@font-face {
  font-family: 'ReviewsLeckerli';
  src: url('/fonts/LeckerliOne-Regular.ttf') format('truetype');
  font-display: swap;
}

/* Office workstation routing controls, scoped away from the Reviews consumer UI. */
.office-real-app .office-station-control {
  display: grid;
  gap: 8px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 14px;
  background: rgba(5, 10, 31, 0.28);
}

.office-real-app .office-station-control-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.office-real-app .office-station-control-heading strong {
  font-size: 12px;
  letter-spacing: 0.01em;
}

.office-real-app .office-station-control-heading span {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.54);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.office-real-app .office-station-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  background: rgba(1, 5, 20, 0.34);
}

.office-real-app .office-station-toggle button {
  display: flex;
  min-width: 0;
  min-height: 31px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.office-real-app .office-station-toggle button.is-selected {
  background: rgba(255, 255, 255, 0.94);
  color: #182044;
  box-shadow: 0 5px 14px rgba(3, 7, 29, 0.2);
}

.office-real-app .office-station-toggle i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #6b7280;
}

.office-real-app .office-station-toggle i.is-online {
  background: #45df8b;
  box-shadow: 0 0 0 3px rgba(69, 223, 139, 0.15);
}

.office-real-app .codex-android-host-panel {
  gap: 9px;
}

/* App-faithful rebuild: native Reviews editorial system */
:root {
  --app-green: #229a5c;
  --app-light-green: #66b34d;
  --app-ink: #111312;
  --app-muted: rgba(17, 19, 18, 0.48);
  --app-faint: rgba(17, 19, 18, 0.075);
  --app-soft: #f7f8f6;
  --app-card-shadow: 0 22px 60px rgba(17, 19, 18, 0.07);
  --app-tight-shadow: 0 12px 30px rgba(17, 19, 18, 0.055);
}

body {
  background: #fff !important;
  color: var(--app-ink);
}

.app-install-banner {
  position: sticky;
  top: 0;
  z-index: 1200;
  width: 100%;
  padding: 0;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(17, 19, 18, 0.08);
  box-shadow: 0 8px 26px rgba(17, 19, 18, 0.055);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.app-install-banner-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(1120px, 100%);
  min-height: 76px;
  margin: 0 auto;
  padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
}

.app-install-icon {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 13px;
  object-fit: cover;
  background: #f4f5f2;
  box-shadow: 0 1px 2px rgba(17, 19, 18, 0.08);
}

.app-install-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  margin-right: auto;
}

.app-install-copy strong {
  color: var(--app-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: 780;
  line-height: 1.14;
  letter-spacing: 0;
}

.app-install-copy span {
  color: rgba(17, 19, 18, 0.54);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
  font-weight: 520;
  line-height: 1.18;
  letter-spacing: 0;
}

.app-install-get {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  background: #007aff;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.app-download-page {
  display: grid;
  place-items: center;
  min-height: calc(100svh - 116px);
  padding: clamp(34px, 6vw, 72px) 16px;
  background:
    radial-gradient(circle at 50% 0%, rgba(34, 154, 92, 0.12), transparent 42%),
    #fff;
}

.app-install-page {
  min-height: calc(100svh - 116px);
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 16%, rgba(34, 154, 92, 0.16), transparent 34%),
    radial-gradient(circle at 15% 82%, rgba(102, 179, 77, 0.13), transparent 32%),
    linear-gradient(180deg, #fbfcfa 0%, #ffffff 48%, #f4faf6 100%);
}

.app-install-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(330px, 0.74fr);
  align-items: center;
  gap: clamp(34px, 7vw, 84px);
  width: min(1120px, calc(100% - 32px));
  min-height: calc(100svh - 150px);
  margin: 0 auto;
  padding: clamp(34px, 6vw, 78px) 0;
}

.app-install-hero-copy {
  display: grid;
  justify-items: start;
  gap: 18px;
  max-width: 620px;
}

.app-install-page-icon {
  width: 84px;
  height: 84px;
  border-radius: 21px;
  object-fit: cover;
  background: #f4f5f2;
  box-shadow: 0 18px 46px rgba(17, 19, 18, 0.12);
}

.app-install-hero h1 {
  max-width: 650px;
  margin: 0;
  color: var(--app-ink);
  font-family: var(--serif);
  font-size: clamp(4rem, 8.8vw, 7.4rem);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: 0;
}

.app-install-lede {
  max-width: 570px;
  margin: 0;
  color: rgba(17, 19, 18, 0.6);
  font-size: clamp(1.14rem, 2.4vw, 1.5rem);
  font-weight: 680;
  line-height: 1.34;
  letter-spacing: 0;
}

.app-hold-download-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: min(100%, 510px);
  min-height: 76px;
  margin-top: 6px;
  padding: 0 30px;
  border-radius: 999px;
  background: #111312;
  color: #fff;
  box-shadow: 0 24px 64px rgba(17, 19, 18, 0.2);
  font-size: clamp(1.12rem, 4.8vw, 1.48rem);
  font-weight: 900;
  letter-spacing: 0;
  text-decoration: none;
  -webkit-touch-callout: default;
  user-select: text;
}

.app-hold-download-button .apple-mark {
  width: 30px;
  height: 30px;
}

.app-hold-download-button .apple-mark path {
  fill: currentColor;
}

.app-hold-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 560px;
}

.app-hold-steps span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(17, 19, 18, 0.075);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: rgba(17, 19, 18, 0.68);
  box-shadow: 0 10px 24px rgba(17, 19, 18, 0.055);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0;
}

.app-install-preview {
  position: relative;
  min-height: min(690px, 68svh);
}

.app-install-phone {
  position: absolute;
  width: min(245px, 39vw);
  margin: 0;
  overflow: hidden;
  border: 10px solid #111312;
  border-radius: 34px;
  background: #fff;
  box-shadow: 0 32px 90px rgba(17, 19, 18, 0.18);
}

.app-install-phone img {
  display: block;
  width: 100%;
  height: auto;
}

.app-install-phone-1 {
  left: 14%;
  top: 1%;
  z-index: 3;
  transform: rotate(-7deg);
}

.app-install-phone-2 {
  right: 4%;
  top: 11%;
  z-index: 2;
  transform: rotate(8deg) scale(0.92);
  opacity: 0.96;
}

.app-install-phone-3 {
  left: 34%;
  bottom: 0;
  z-index: 1;
  transform: rotate(3deg) scale(0.86);
  opacity: 0.9;
}

@media (max-width: 860px) {
  .app-install-hero {
    grid-template-columns: 1fr;
    gap: 26px;
    min-height: 0;
    padding-top: 36px;
  }

  .app-install-hero-copy {
    justify-items: center;
    text-align: center;
  }

  .app-install-preview {
    width: min(100%, 520px);
    min-height: 410px;
    margin: 0 auto;
  }

  .app-install-phone {
    width: min(190px, 42vw);
    border-width: 8px;
    border-radius: 28px;
  }

  .app-install-phone-1 {
    left: 5%;
  }

  .app-install-phone-2 {
    right: 2%;
  }

  .app-install-phone-3 {
    left: 34%;
  }

  .app-hold-steps {
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .app-install-hero {
    width: min(100% - 24px, 1120px);
  }

  .app-install-page-icon {
    width: 72px;
    height: 72px;
    border-radius: 18px;
  }

  .app-install-hero h1 {
    font-size: clamp(3.45rem, 16vw, 4.8rem);
  }

  .app-install-lede {
    font-size: 1.08rem;
  }

  .app-hold-download-button {
    min-height: 68px;
    padding: 0 20px;
  }

  .app-hold-steps span {
    min-height: 36px;
    font-size: 0.78rem;
  }

  .app-install-preview {
    min-height: 360px;
  }
}

.download-card {
  display: grid;
  justify-items: center;
  gap: 18px;
  width: min(620px, 100%);
  padding: clamp(30px, 6vw, 58px) clamp(18px, 5vw, 46px);
  border: 1px solid rgba(17, 19, 18, 0.075);
  border-radius: 34px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 34px 90px rgba(17, 19, 18, 0.09);
  text-align: center;
}

.download-app-icon {
  width: 86px;
  height: 86px;
  border-radius: 21px;
  object-fit: cover;
  background: #f4f5f2;
  box-shadow: 0 10px 30px rgba(17, 19, 18, 0.1);
}

.download-card h1 {
  max-width: 520px;
  margin: 0;
  color: var(--app-ink);
  font-family: var(--serif);
  font-size: clamp(3rem, 9vw, 5.7rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0;
}

.download-lede {
  max-width: 470px;
  margin: 0;
  color: rgba(17, 19, 18, 0.58);
  font-size: clamp(1.02rem, 2.7vw, 1.24rem);
  font-weight: 620;
  line-height: 1.38;
  letter-spacing: 0;
}

.download-store-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: min(100%, 440px);
  min-height: 68px;
  margin-top: 8px;
  padding: 0 26px;
  border-radius: 999px;
  background: #111312;
  color: #fff;
  box-shadow: 0 20px 54px rgba(17, 19, 18, 0.18);
  font-size: clamp(1.06rem, 4.8vw, 1.42rem);
  font-weight: 860;
  letter-spacing: 0;
  text-decoration: none;
}

.download-store-button .apple-mark {
  width: 28px;
  height: 28px;
}

.download-store-button .apple-mark path {
  fill: currentColor;
}

.download-fallback {
  max-width: 390px;
  margin: 0;
  color: rgba(17, 19, 18, 0.42);
  font-size: 0.9rem;
  font-weight: 620;
  line-height: 1.32;
  letter-spacing: 0;
}

.site-header {
  width: min(1120px, calc(100% - 32px)) !important;
  min-height: 70px !important;
  margin: 14px auto 0 !important;
  padding: 12px 14px 12px 18px !important;
  border: 1px solid rgba(17, 19, 18, 0.065) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 18px 54px rgba(17, 19, 18, 0.055) !important;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

@media (max-width: 720px) {
  .app-install-banner-inner {
    gap: 11px;
    min-height: 74px;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .app-install-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
  }

  .app-install-copy strong {
    font-size: 0.96rem;
  }

  .app-install-copy span {
    font-size: 0.8rem;
  }

  .app-install-get {
    min-width: 58px;
    min-height: 32px;
    padding: 0 13px;
    font-size: 0.86rem;
  }
}

.brand-logo {
  width: 132px !important;
  height: auto !important;
}

.site-header nav {
  gap: 22px !important;
  color: rgba(17, 19, 18, 0.56) !important;
  font-size: 0.86rem !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
}

.site-header nav a:not(.nav-cta) {
  color: rgba(17, 19, 18, 0.56) !important;
  padding: 8px 0 !important;
}

.nav-cta,
.app-primary-cta,
.app-download-button,
.footer-waitlist-cta,
.waitlist-card button {
  min-height: 52px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #171b1a, #252929) !important;
  color: #fff !important;
  box-shadow: 0 18px 44px rgba(17, 19, 18, 0.14) !important;
  font-size: 0.94rem !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

.app-site {
  background: #fff;
  overflow: clip;
}

.app-site .eyebrow,
.eyebrow {
  color: var(--app-green) !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}

.app-site-hero,
.app-site-section {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
}

.app-site-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(360px, 0.9fr);
  align-items: center;
  gap: clamp(36px, 6vw, 72px);
  min-height: min(640px, calc(100svh - 86px));
  padding: clamp(38px, 5.8vw, 64px) 0 clamp(28px, 4vw, 46px);
}

.app-site-hero-copy {
  display: grid;
  gap: 18px;
  max-width: 560px;
}

.app-mascot-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 8px 14px 8px 8px;
  border: 1px solid rgba(17, 19, 18, 0.065);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--app-tight-shadow);
}

.app-mascot-line img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 50%;
  background: #f6f7f5;
}

.app-mascot-line span {
  color: rgba(17, 19, 18, 0.7);
  font-size: 0.92rem;
  font-weight: 760;
  letter-spacing: 0;
}

.app-site-hero h1,
.app-section-heading h2,
.app-scan-copy h2,
.rail-heading h3,
.app-feature-grid h2,
.site-footer-cta h2,
.waitlist-card h2,
.app-product-hero h1,
.app-analysis-copy h2 {
  margin: 0;
  color: var(--app-ink) !important;
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.app-site-hero h1 {
  max-width: 600px;
  font-size: clamp(3.7rem, 6.6vw, 6.7rem);
  line-height: 0.9;
}

.app-site-lede,
.app-section-heading > p,
.app-scan-copy > p,
.app-feature-grid article > p,
.waitlist-card p,
.site-footer-cta p {
  color: rgba(17, 19, 18, 0.55) !important;
  font-size: clamp(1.04rem, 1.55vw, 1.28rem) !important;
  font-weight: 520 !important;
  line-height: 1.44 !important;
  letter-spacing: 0 !important;
}

.app-site-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding-top: 8px;
}

.app-primary-cta,
.app-secondary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 178px;
  padding: 0 24px;
  text-decoration: none;
}

.app-secondary-cta {
  min-height: 52px;
  border: 1px solid rgba(17, 19, 18, 0.075);
  border-radius: 999px;
  background: #fff;
  color: var(--app-ink);
  box-shadow: var(--app-tight-shadow);
  font-weight: 850;
  letter-spacing: 0;
}

.app-hero-product-card {
  display: grid;
  grid-template-columns: minmax(150px, 0.74fr) minmax(0, 1fr);
  gap: clamp(22px, 4vw, 38px);
  align-items: center;
  min-height: 372px;
  padding: clamp(22px, 3.4vw, 32px);
  border: 1px solid rgba(17, 19, 18, 0.065);
  border-radius: 30px;
  background: #fff;
  box-shadow: var(--app-card-shadow);
  overflow: hidden;
}

.app-product-art {
  display: grid;
  place-items: center;
  min-height: 286px;
}

.app-product-art img {
  width: min(100%, 300px);
  max-height: 300px;
  object-fit: contain;
  filter: drop-shadow(0 24px 42px rgba(17, 19, 18, 0.11));
}

.app-product-detail-copy {
  display: grid;
  gap: 16px;
  align-content: center;
}

.app-brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-brand-row p {
  margin: 0;
  color: rgba(17, 19, 18, 0.48);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.app-brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #f4f5f3;
  color: var(--app-ink);
  font-weight: 900;
  text-transform: uppercase;
}

.app-product-detail-copy h2 {
  margin: 0;
  color: var(--app-ink);
  font-family: var(--serif);
  font-size: clamp(2rem, 3.1vw, 3.18rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: 0;
  overflow-wrap: break-word;
}

.app-hero-score-row,
.app-score-pair,
.app-product-score-pair,
.search-score-pair,
.rail-score-pair {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.app-hero-score {
  display: grid;
  justify-items: center;
  gap: 7px;
}

.app-hero-score-ring,
.app-score-ring,
.score-ring {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  background: conic-gradient(var(--score-color, var(--app-green)) calc(var(--score) * 1%), var(--score-track, rgba(34, 154, 92, 0.11)) 0) !important;
  box-shadow: none !important;
}

.app-hero-score-ring::before,
.app-score-ring::before,
.score-ring::before {
  content: '' !important;
  position: absolute !important;
  inset: 4px !important;
  border-radius: inherit !important;
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.96) 0 62%, transparent 63%),
    color-mix(in srgb, var(--score-color, var(--app-green)) 5.5%, #fff) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--score-color, var(--app-green)) 8%, transparent) !important;
}

.app-hero-score-ring > *,
.app-score-ring > *,
.score-ring > * {
  position: relative !important;
  z-index: 1 !important;
}

.app-hero-score-ring {
  --score-color: var(--app-green);
  --score-track: rgba(34, 154, 92, 0.11);
}

.app-hero-score-ring .app-symbol-icon,
.app-score-ring .app-symbol-icon,
.score-ring .app-symbol-icon {
  width: 12px !important;
  height: 12px !important;
  margin-bottom: -3px !important;
  color: var(--score-color, var(--app-green)) !important;
}

.app-hero-score-ring strong,
.app-score-ring strong,
.score-ring span,
.score-ring strong {
  color: var(--score-color, var(--app-green)) !important;
  font-family: ui-serif, Georgia, 'Times New Roman', serif !important;
  font-size: 1.06rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.app-hero-score span {
  color: rgba(17, 19, 18, 0.46);
  font-size: 0.68rem;
  font-weight: 820;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.app-site-section {
  padding: clamp(54px, 8vw, 94px) 0;
}

.app-scan-explainer {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.8fr);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
}

.app-scan-copy h2,
.app-section-heading h2 {
  font-size: clamp(3rem, 5.6vw, 5.7rem);
  line-height: 0.9;
}

.app-scan-card {
  position: relative;
  min-height: 430px;
  padding: 28px;
  overflow: hidden;
  border: 1px solid rgba(17, 19, 18, 0.065);
  border-radius: 30px;
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.96), rgba(255,255,255,0.78)),
    radial-gradient(circle at 75% 12%, rgba(34,154,92,0.12), transparent 32%),
    #fff;
  box-shadow: var(--app-card-shadow);
}

.scan-lens-mini {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px 9px 10px;
  border: 1px solid rgba(17, 19, 18, 0.06);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--app-tight-shadow);
}

.scan-lens-mini img {
  width: 24px;
  height: auto;
}

.scan-lens-mini span {
  color: var(--app-ink);
  font-family: var(--serif);
  font-size: 1.25rem;
}

.app-viewfinder {
  position: relative;
  width: min(100%, 360px);
  height: 148px;
  margin: 96px auto 16px;
  border-radius: 24px;
  background: rgba(17, 19, 18, 0.04);
}

.app-viewfinder span {
  position: absolute;
  width: 72px;
  height: 52px;
  border-color: var(--app-ink);
  border-style: solid;
}

.app-viewfinder span:nth-child(1) { top: 0; left: 0; border-width: 4px 0 0 4px; border-radius: 20px 0 0 0; }
.app-viewfinder span:nth-child(2) { top: 0; right: 0; border-width: 4px 4px 0 0; border-radius: 0 20px 0 0; }
.app-viewfinder span:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 4px 4px; border-radius: 0 0 0 20px; }
.app-viewfinder span:nth-child(4) { right: 0; bottom: 0; border-width: 0 4px 4px 0; border-radius: 0 0 20px 0; }

.app-scan-card > p {
  width: fit-content;
  margin: 0 auto;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.85);
  color: rgba(17, 19, 18, 0.62);
  font-size: 0.92rem;
  font-weight: 720;
}

.app-mini-result {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: center;
  margin-top: 42px;
  padding: 16px;
  border: 1px solid rgba(17, 19, 18, 0.06);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--app-tight-shadow);
}

.app-mini-result img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.app-mini-result small {
  display: block;
  color: rgba(17, 19, 18, 0.45);
  font-size: 0.66rem;
  font-weight: 860;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.app-mini-result strong {
  display: -webkit-box;
  margin-top: 4px;
  overflow: hidden;
  color: var(--app-ink);
  font-size: 1.1rem;
  font-weight: 840;
  line-height: 1.1;
  letter-spacing: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.app-search-section {
  padding: clamp(32px, 5vw, 54px);
  border: 1px solid rgba(17, 19, 18, 0.065);
  border-radius: 30px;
  background: #fff;
  box-shadow: var(--app-card-shadow);
}

.app-section-heading {
  display: flex !important;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 26px;
}

.app-section-heading > div {
  display: grid;
  gap: 6px;
}

.app-section-heading > p {
  max-width: 360px;
  margin: 0;
}

.app-section-heading > a,
.rail-heading > a {
  color: #087af4 !important;
  font-size: 1rem !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
}

.product-search {
  border: 1px solid rgba(17, 19, 18, 0.07) !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: 0 18px 52px rgba(17, 19, 18, 0.055) !important;
}

.app-category-dock {
  display: flex;
  gap: 22px;
  margin-top: 22px;
  overflow-x: auto;
  scrollbar-width: none;
}

.app-category-dock::-webkit-scrollbar {
  display: none;
}

.app-category-dock a {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 92px;
  color: rgba(17, 19, 18, 0.5);
  font-size: 0.92rem;
  font-weight: 780;
  letter-spacing: 0;
  text-decoration: none;
}

.app-category-dock img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.app-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.app-feature-grid article {
  display: grid;
  align-content: start;
  min-height: 300px;
  padding: 24px;
  border: 1px solid rgba(17, 19, 18, 0.065);
  border-radius: 28px;
  background: #fff;
  box-shadow: var(--app-tight-shadow);
}

.app-feature-grid img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  margin-bottom: 24px;
}

.app-feature-grid h2 {
  margin-bottom: 10px;
  font-size: clamp(2.2rem, 3.2vw, 3.4rem);
  line-height: 0.94;
}

.app-feature-grid p:last-child {
  margin: 0;
  font-size: 1rem !important;
}

.category-rails,
.app-trending-board,
.app-loved-section,
.app-final-download {
  padding-top: clamp(48px, 7vw, 90px);
}

.ranking-tabs,
.ranking-section-tabs {
  border-radius: 24px !important;
}

.rail-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px;
  margin-bottom: 18px !important;
}

.rail-heading > div {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.rail-heading img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  border-radius: 50%;
  background: #f8f8f6;
}

.rail-heading h3 {
  font-size: clamp(2.4rem, 4.1vw, 4.2rem) !important;
  line-height: 0.92 !important;
}

.product-rail {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(150px, 1fr) !important;
  gap: clamp(16px, 2.4vw, 28px) !important;
  overflow-x: auto !important;
  padding: 8px 2px 22px !important;
  scrollbar-width: none !important;
}

.product-rail::-webkit-scrollbar {
  display: none;
}

.product-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: clamp(20px, 3vw, 32px) !important;
}

.product-card,
.rail-card {
  min-width: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.product-float-zone,
.rail-art {
  height: clamp(142px, 17vw, 210px) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.product-float-zone img,
.rail-art img,
.product-card img {
  object-fit: contain !important;
  filter: drop-shadow(0 18px 28px rgba(17, 19, 18, 0.1)) !important;
}

.product-rank-bubble {
  width: 42px !important;
  height: 42px !important;
  border: 1px solid rgba(34, 154, 92, 0.18) !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.88) !important;
  color: var(--app-ink) !important;
  box-shadow: 0 10px 26px rgba(17, 19, 18, 0.08) !important;
  font-family: var(--serif) !important;
  font-size: 1.36rem !important;
  font-weight: 500 !important;
}

.product-card-copy {
  display: grid !important;
  justify-items: center !important;
  gap: 5px !important;
  padding: 0 !important;
}

.product-card-copy h3,
.rail-card h4 {
  display: -webkit-box !important;
  min-height: 2.28em !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: var(--app-ink) !important;
  font-size: 1.05rem !important;
  font-weight: 860 !important;
  line-height: 1.14 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

.product-card-copy > span,
.rail-card p,
.product-brand {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: rgba(17, 19, 18, 0.42) !important;
  font-size: 0.88rem !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.product-card .app-score-pair {
  gap: 8px !important;
  margin-top: 8px !important;
  justify-content: center !important;
}

.product-card .app-score-ring,
.rail-score-pair .app-score-ring,
.search-score-pair .app-score-ring {
  width: 44px !important;
  height: 44px !important;
}

.product-card .app-score-ring::before,
.rail-score-pair .app-score-ring::before,
.search-score-pair .app-score-ring::before {
  inset: 3.4px !important;
}

.product-card .app-score-ring .app-symbol-icon,
.rail-score-pair .app-score-ring .app-symbol-icon,
.search-score-pair .app-score-ring .app-symbol-icon {
  width: 9px !important;
  height: 9px !important;
}

.product-card .app-score-ring strong,
.rail-score-pair .app-score-ring strong,
.search-score-pair .app-score-ring strong {
  font-size: 0.86rem !important;
}

.app-product-hero,
.product-hero.app-product-hero {
  display: block !important;
  width: min(980px, calc(100% - 32px)) !important;
  margin: 28px auto 32px !important;
  padding: clamp(22px, 4vw, 36px) !important;
  border: 1px solid rgba(17, 19, 18, 0.065) !important;
  border-radius: 30px !important;
  background: #fff !important;
  box-shadow: var(--app-card-shadow) !important;
}

.app-product-hero::before,
.app-product-hero::after {
  display: none !important;
}

.app-product-hero .breadcrumb {
  display: none !important;
}

.app-product-header {
  display: grid !important;
  grid-template-columns: minmax(150px, 0.72fr) minmax(0, 1fr) !important;
  grid-template-areas:
    "image brand"
    "image title"
    "image scores"
    "image pantry"
    "image category" !important;
  align-items: center !important;
  column-gap: clamp(22px, 4vw, 44px) !important;
  row-gap: 12px !important;
}

.app-product-image {
  grid-area: image !important;
  display: grid !important;
  place-items: center !important;
  min-height: 286px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.app-product-image img {
  width: min(100%, 300px) !important;
  max-height: 286px !important;
  object-fit: contain !important;
}

.app-product-brand {
  grid-area: brand !important;
  color: rgba(17, 19, 18, 0.48) !important;
  font-size: 0.76rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

.app-product-header h1 {
  grid-area: title !important;
}

.app-product-score-pair {
  grid-area: scores !important;
}

.app-product-pantry-cta {
  grid-area: pantry !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  min-height: 46px !important;
  padding: 0 18px !important;
  border-radius: 16px !important;
  background: #f2f2f6 !important;
  color: var(--app-ink) !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
}

.app-category-badge {
  grid-area: category !important;
  width: fit-content !important;
  color: rgba(17, 19, 18, 0.48) !important;
  font-size: 0.86rem !important;
  font-weight: 720 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
}

.app-category-badge span {
  color: var(--app-green) !important;
}

.app-product-image-wrap,
.product-hero-image,
.product-image-panel {
  background: transparent !important;
  box-shadow: none !important;
}

.app-product-hero img,
.product-hero img {
  object-fit: contain !important;
  filter: drop-shadow(0 20px 34px rgba(17, 19, 18, 0.1)) !important;
}

.app-product-hero h1 {
  font-size: clamp(2.1rem, 4.2vw, 4.05rem) !important;
  line-height: 0.98 !important;
}

.app-product-score-pair {
  gap: 18px !important;
  margin-top: 16px !important;
}

.app-product-score-pair .app-score-ring {
  width: 72px !important;
  height: 72px !important;
}

.app-product-score-pair .app-score-ring strong {
  font-size: 1.36rem !important;
  color: var(--score-color, var(--app-green)) !important;
}

.app-product-score-pair .app-score-ring::after {
  display: block !important;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  color: rgba(17, 19, 18, 0.48) !important;
  font-size: 0.68rem !important;
  font-weight: 820 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

.app-product-score-pair .app-score-ring-reviews::after {
  content: 'Reviews' !important;
}

.app-product-score-pair .app-score-ring-health::after {
  content: 'Health' !important;
}

.app-analysis-toggle {
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: var(--app-tight-shadow) !important;
}

.app-analysis-toggle button {
  border-radius: 18px !important;
  letter-spacing: 0 !important;
}

.app-analysis-copy,
.breakdown-card,
.product-breakdown-list,
.app-download-cta,
.waitlist-card,
.site-footer-cta,
.seo-link-panel,
.archive-hero {
  border: 1px solid rgba(17, 19, 18, 0.065) !important;
  border-radius: 28px !important;
  background: #fff !important;
  box-shadow: var(--app-tight-shadow) !important;
}

.site-footer {
  width: min(1120px, calc(100% - 32px)) !important;
  margin: 72px auto 28px !important;
  padding: 24px !important;
  border: 1px solid rgba(17, 19, 18, 0.055) !important;
  border-radius: 30px !important;
  background: #f7f8f6 !important;
}

@media (max-width: 920px) {
  .app-site-hero,
  .app-scan-explainer {
    grid-template-columns: 1fr;
  }

  .app-site-hero {
    min-height: auto;
    padding-top: 42px;
  }

  .app-hero-product-card {
    grid-template-columns: minmax(120px, 0.72fr) minmax(0, 1fr);
    min-height: auto;
  }

  .app-feature-grid {
    grid-template-columns: 1fr;
  }
}

/* EOF authority: Top Picks must use the current app layout, not legacy archive rules. */
.best-archive-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.54fr) !important;
  align-items: center !important;
}

.best-archive-hero::after {
  display: none !important;
  content: none !important;
}

.best-hero-copy {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.best-hero-preview {
  display: grid !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
}

.best-hero-preview-card {
  width: 100% !important;
}

@media (max-width: 920px) {
  .best-archive-hero {
    display: block !important;
  }

  .best-hero-preview {
    display: none !important;
  }
}

/* Homepage launch polish: fixed app-style glass search and flatter score rings. */
.app-site {
  padding-bottom: clamp(110px, 10vw, 148px) !important;
}

.floating-product-search {
  position: fixed;
  right: auto;
  bottom: max(18px, env(safe-area-inset-bottom));
  left: 50%;
  z-index: 9000;
  width: min(760px, calc(100vw - 28px));
  transform: translateX(-50%);
  pointer-events: none;
}

.floating-search-form,
.floating-search-results {
  pointer-events: auto;
}

.floating-search-form {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 76px;
  padding: 10px 12px 10px 24px;
  overflow: hidden;
  border: 1px solid rgba(16, 20, 18, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 24px 70px rgba(18, 22, 20, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(255, 255, 255, 0.48);
  -webkit-backdrop-filter: blur(28px) saturate(1.45);
  backdrop-filter: blur(28px) saturate(1.45);
}

.floating-search-form::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.42);
  pointer-events: none;
}

.floating-search-icon {
  position: relative;
  z-index: 1;
  color: rgba(36, 154, 96, 0.96);
  font-size: 2.05rem;
  font-weight: 800;
  line-height: 1;
}

.floating-search-form input {
  position: relative;
  z-index: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #111513;
  font: 800 clamp(1rem, 2.1vw, 1.28rem) var(--sans);
  letter-spacing: -0.02em;
}

.floating-search-form input::placeholder {
  color: rgba(17, 21, 19, 0.34);
}

.floating-search-form button,
.floating-search-all {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: #111513;
  color: #fff;
  font: 850 0.98rem var(--sans);
  letter-spacing: -0.02em;
  text-decoration: none;
}

.floating-search-form button {
  min-height: 54px;
  padding: 0 26px;
}

.floating-search-results {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  left: 0;
  display: grid;
  gap: 10px;
  max-height: min(432px, calc(100vh - 170px));
  padding: 12px;
  overflow: auto;
  border: 1px solid rgba(16, 20, 18, 0.1);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow:
    0 24px 70px rgba(18, 22, 20, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(30px) saturate(1.45);
  backdrop-filter: blur(30px) saturate(1.45);
}

.floating-search-result {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 86px;
  padding: 12px;
  border: 1px solid rgba(16, 20, 18, 0.07);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  color: #111513;
  text-decoration: none;
}

.floating-search-result img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
}

.floating-result-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.floating-result-copy strong,
.floating-result-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.floating-result-copy strong {
  font: 850 1.02rem/1.05 var(--sans);
  letter-spacing: -0.025em;
}

.floating-result-copy small,
.floating-search-empty {
  color: rgba(17, 21, 19, 0.5);
  font: 750 0.92rem/1.2 var(--sans);
}

.floating-result-scores {
  margin: 0 !important;
}

.floating-search-all {
  min-height: 48px;
  padding: 0 20px;
  justify-self: center;
}

.app-score-ring::before,
.app-hero-score-ring::before,
.score-ring::before,
.ranking-score-circle::before,
.rail-score-pair .app-score-ring::before,
.compact-grid .product-card .app-score-ring::before,
.product-card .app-score-ring::before,
.search-score-pair .app-score-ring::before,
.app-product-score-pair .app-score-ring::before {
  background: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(36, 154, 96, 0.035) !important;
}

.app-score-ring,
.app-hero-score-ring,
.score-ring,
.ranking-score-circle {
  filter: none !important;
}

@media (max-width: 720px) {
  .floating-product-search {
    bottom: max(12px, env(safe-area-inset-bottom));
    width: calc(100vw - 22px);
  }

  .floating-search-form {
    min-height: 66px;
    gap: 10px;
    padding: 8px 8px 8px 18px;
  }

  .floating-search-form button {
    min-height: 48px;
    padding: 0 18px;
  }

  .floating-search-results {
    bottom: calc(100% + 10px);
    max-height: min(390px, calc(100vh - 138px));
    border-radius: 24px;
  }

  .floating-search-result {
    grid-template-columns: 52px minmax(0, 1fr);
    min-height: 78px;
  }

  .floating-result-scores {
    display: none !important;
  }
}

/* True EOF authority: keep the website on real app screenshots, never rebuilt mock UI. */
.app-real-hero-stage {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  min-height: clamp(620px, 72vw, 880px) !important;
}

.app-real-shot-primary {
  width: min(430px, 43vw) !important;
}

.app-real-shot-secondary {
  position: absolute !important;
  right: clamp(-42px, -3vw, -18px) !important;
  bottom: clamp(42px, 6vw, 88px) !important;
  width: min(300px, 30vw) !important;
  opacity: 0.54 !important;
}

.app-real-feature {
  display: grid !important;
  grid-template-columns: minmax(0, 0.74fr) minmax(280px, 0.48fr) !important;
  align-items: center !important;
}

.app-screenshot-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.app-store-shot-card,
.best-hero-preview.best-real-preview {
  overflow: hidden !important;
  border: 1px solid rgba(17, 19, 18, 0.075) !important;
  border-radius: clamp(26px, 3vw, 42px) !important;
  background: #f6f7f5 !important;
  box-shadow: 0 24px 68px rgba(17, 19, 18, 0.09) !important;
}

.best-hero-preview.best-real-preview {
  display: block !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: min(380px, 100%) !important;
  max-width: 380px !important;
  justify-self: center !important;
  margin: 0 !important;
}

.best-hero-preview.best-real-preview img,
.app-store-shot-card img,
.app-real-shot img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

.best-hero-preview.best-real-preview img,
.app-screenshot-grid .app-store-shot-card img {
  aspect-ratio: 1284 / 2778 !important;
  object-fit: cover !important;
  object-position: top center !important;
}

@media (max-width: 1180px) {
  .app-screenshot-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 920px) {
  .app-real-feature {
    grid-template-columns: 1fr !important;
  }

  .best-hero-preview.best-real-preview {
    display: none !important;
  }
}

@media (max-width: 720px) {
  .app-real-hero-stage {
    min-height: auto !important;
    padding: 12px 0 4px !important;
  }

  .app-real-shot-primary {
    width: min(360px, 92vw) !important;
  }

  .app-real-shot-secondary {
    display: none !important;
  }

  .app-screenshot-grid {
    display: flex !important;
    overflow-x: auto !important;
    gap: 16px !important;
    scroll-snap-type: x mandatory !important;
    padding: 2px 16px 18px !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
  }

  .app-screenshot-grid .app-store-shot-card {
    flex: 0 0 min(78vw, 330px) !important;
    scroll-snap-align: center !important;
  }
}

/* Real app screenshots replace generated website mock UI. */
.app-real-hero-stage {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  min-height: clamp(620px, 72vw, 880px) !important;
  padding: clamp(18px, 3vw, 42px) clamp(6px, 2vw, 24px) !important;
  isolation: isolate !important;
}

.app-real-hero-stage::before {
  content: "" !important;
  position: absolute !important;
  inset: 8% 1% 4% 4% !important;
  z-index: -1 !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 40% 24%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.2) 45%, transparent 70%),
    linear-gradient(145deg, rgba(222, 243, 232, 0.82), rgba(255, 255, 255, 0.62)) !important;
  filter: blur(6px) !important;
}

.app-real-shot,
.app-store-shot-card,
.best-real-preview {
  margin: 0 !important;
}

.app-real-shot {
  position: relative !important;
  border-radius: clamp(28px, 4vw, 54px) !important;
  background: #f7f8f6 !important;
  box-shadow: 0 34px 90px rgba(17, 19, 18, 0.14) !important;
  overflow: hidden !important;
}

.app-real-shot img,
.app-store-shot-card img,
.best-real-preview img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

.app-real-shot-primary {
  z-index: 2 !important;
  width: min(430px, 43vw) !important;
}

.app-real-shot-secondary {
  position: absolute !important;
  right: clamp(-42px, -3vw, -18px) !important;
  bottom: clamp(42px, 6vw, 88px) !important;
  z-index: 1 !important;
  width: min(300px, 30vw) !important;
  transform: rotate(3deg) !important;
  opacity: 0.54 !important;
  box-shadow: 0 26px 70px rgba(17, 19, 18, 0.11) !important;
}

.app-real-shot-badge {
  position: absolute !important;
  left: clamp(2px, 2vw, 28px) !important;
  bottom: clamp(32px, 7vw, 86px) !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 16px 10px 10px !important;
  border: 1px solid rgba(17, 19, 18, 0.08) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 20px 46px rgba(17, 19, 18, 0.12) !important;
  color: #111312 !important;
  font-size: 0.86rem !important;
  font-weight: 800 !important;
}

.app-real-shot-mascot {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
}

.app-real-feature {
  display: grid !important;
  grid-template-columns: minmax(0, 0.74fr) minmax(280px, 0.48fr) !important;
  align-items: center !important;
  gap: clamp(28px, 5vw, 78px) !important;
  overflow: hidden !important;
}

.app-real-feature-copy h2 {
  max-width: 760px !important;
}

.app-real-feature-copy p:last-child {
  max-width: 620px !important;
  color: rgba(76, 87, 80, 0.9) !important;
  font-size: clamp(1.12rem, 1.7vw, 1.42rem) !important;
  line-height: 1.38 !important;
}

.app-store-shot-card {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(17, 19, 18, 0.075) !important;
  border-radius: clamp(26px, 3vw, 42px) !important;
  background: #f6f7f5 !important;
  box-shadow: 0 24px 68px rgba(17, 19, 18, 0.09) !important;
}

.app-store-shot-card-featured {
  width: min(390px, 100%) !important;
  justify-self: center !important;
}

.app-screenshot-gallery-section {
  padding-top: clamp(44px, 6vw, 88px) !important;
}

.app-screenshot-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(16px, 2vw, 28px) !important;
  margin-top: clamp(24px, 3vw, 42px) !important;
}

.app-screenshot-grid .app-store-shot-card {
  display: flex !important;
  flex-direction: column !important;
}

.app-screenshot-grid .app-store-shot-card img {
  aspect-ratio: 1284 / 2778 !important;
  object-fit: cover !important;
  object-position: top center !important;
}

.app-store-shot-card figcaption {
  padding: 18px 18px 20px !important;
  background: #fff !important;
  border-top: 1px solid rgba(17, 19, 18, 0.055) !important;
}

.app-store-shot-card figcaption span {
  display: block !important;
  margin-bottom: 8px !important;
  color: #249a60 !important;
  font-size: 0.74rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.23em !important;
  text-transform: uppercase !important;
}

.app-store-shot-card figcaption strong {
  display: block !important;
  color: #111312 !important;
  font-family: var(--font-serif), Georgia, serif !important;
  font-size: clamp(1.55rem, 2.2vw, 2.2rem) !important;
  font-weight: 500 !important;
  line-height: 0.95 !important;
  letter-spacing: 0 !important;
}

.app-store-shot-card figcaption p {
  margin: 9px 0 0 !important;
  color: rgba(76, 87, 80, 0.82) !important;
  font-size: 0.98rem !important;
  line-height: 1.3 !important;
}

.best-real-preview {
  display: block !important;
  max-width: 380px !important;
  justify-self: center !important;
  border-radius: clamp(26px, 3vw, 46px) !important;
  overflow: hidden !important;
  background: #f6f7f5 !important;
  box-shadow: 0 30px 82px rgba(17, 19, 18, 0.13) !important;
}

.best-real-preview img {
  aspect-ratio: 1284 / 2778 !important;
  object-fit: cover !important;
  object-position: top center !important;
}

@media (max-width: 1180px) {
  .app-screenshot-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 920px) {
  .app-real-feature {
    grid-template-columns: 1fr !important;
  }

  .best-real-preview {
    display: none !important;
  }
}

@media (max-width: 720px) {
  .app-real-hero-stage {
    min-height: auto !important;
    padding: 12px 0 4px !important;
  }

  .app-real-shot-primary {
    width: min(360px, 92vw) !important;
  }

  .app-real-shot-secondary {
    display: none !important;
  }

  .app-real-shot-badge {
    left: 12px !important;
    bottom: 24px !important;
  }

  .app-store-shot-card-featured {
    width: min(360px, 100%) !important;
  }

  .app-screenshot-grid {
    display: flex !important;
    gap: 16px !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
    scroll-snap-type: x mandatory !important;
    padding: 2px 16px 18px !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
  }

  .app-screenshot-grid .app-store-shot-card {
    flex: 0 0 min(78vw, 330px) !important;
    scroll-snap-align: center !important;
  }
}

/* Final launch authority: keep the website on the current native app visual system. */
.app-score-stack {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 48px !important;
}

.app-score-stack > span {
  color: rgba(17, 19, 18, 0.46) !important;
  font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif !important;
  font-size: 0.58rem !important;
  font-weight: 780 !important;
  letter-spacing: 0.16em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

.ranking-score-circle,
.rail-score-pair .app-score-ring,
.compact-grid .product-card .app-score-ring,
.product-card .app-score-ring {
  width: 52px !important;
  height: 52px !important;
  inline-size: 52px !important;
  block-size: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  flex: 0 0 52px !important;
  border-radius: 999px !important;
  background:
    conic-gradient(var(--score-color, #23a060) calc(var(--score, 0) * 1%), rgba(35, 160, 96, 0.08) 0),
    #fff !important;
  box-shadow:
    0 14px 28px rgba(17, 19, 18, 0.045),
    inset 0 0 0 1px rgba(35, 160, 96, 0.08) !important;
}

.ranking-score-circle::before,
.rail-score-pair .app-score-ring::before,
.compact-grid .product-card .app-score-ring::before,
.product-card .app-score-ring::before {
  inset: 5px !important;
  border-radius: inherit !important;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.98), rgba(248, 252, 250, 0.94) 62%, rgba(255, 255, 255, 0.88)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72) !important;
}

.ranking-score-circle .app-symbol-icon,
.rail-score-pair .app-score-ring .app-symbol-icon,
.compact-grid .product-card .app-score-ring .app-symbol-icon,
.product-card .app-score-ring .app-symbol-icon {
  width: 11px !important;
  height: 11px !important;
  margin-top: 9px !important;
  color: var(--score-color, #23a060) !important;
}

.ranking-score-circle strong,
.rail-score-pair .app-score-ring strong,
.compact-grid .product-card .app-score-ring strong,
.product-card .app-score-ring strong {
  margin-bottom: 7px !important;
  color: #111312 !important;
  font-family: var(--font-serif), Georgia, serif !important;
  font-size: 1.06rem !important;
  font-weight: 450 !important;
  letter-spacing: 0 !important;
}

.app-download-cta,
.site-footer-cta {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  border: 1px solid rgba(17, 19, 18, 0.075) !important;
  background:
    radial-gradient(circle at 88% 8%, rgba(35, 160, 96, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.9)) !important;
  box-shadow: 0 24px 70px rgba(17, 19, 18, 0.075) !important;
}

.app-download-mascot-line {
  display: inline-flex !important;
  width: fit-content !important;
  max-width: min(100%, 560px) !important;
  align-items: center !important;
  gap: 13px !important;
  padding: 9px 16px 9px 9px !important;
  border: 1px solid rgba(17, 19, 18, 0.06) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.84) !important;
  box-shadow: 0 16px 36px rgba(17, 19, 18, 0.055) !important;
  color: #111312 !important;
  font-size: 1rem !important;
  font-weight: 760 !important;
  line-height: 1.18 !important;
}

.app-download-mascot {
  width: 44px !important;
  height: 44px !important;
}

.site-footer-mascot {
  width: 54px !important;
  height: 54px !important;
}

@media (max-width: 720px) {
  .ranking-score-circle,
  .rail-score-pair .app-score-ring,
  .compact-grid .product-card .app-score-ring,
  .product-card .app-score-ring {
    width: 48px !important;
    height: 48px !important;
    inline-size: 48px !important;
    block-size: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    flex-basis: 48px !important;
  }

  .app-score-stack > span {
    font-size: 0.52rem !important;
  }

  .app-download-mascot-line {
    width: 100% !important;
    font-size: 0.94rem !important;
  }
}

/* Launch polish: current Reviews app parity across shared web surfaces. */
.product-card,
.rail-card {
  text-decoration: none !important;
}

.product-float-zone,
.rail-art {
  overflow: visible !important;
}

.product-rank-bubble {
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 31% 21%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.82) 58%, rgba(255, 255, 255, 0.68)),
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(241, 250, 245, 0.72)) !important;
  border: 1px solid rgba(35, 160, 96, 0.18) !important;
  box-shadow:
    0 16px 34px rgba(17, 19, 18, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.72) !important;
  color: #111312 !important;
  font-family: var(--font-serif), Georgia, serif !important;
  font-size: 1.24rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

.product-grid.compact-grid {
  row-gap: clamp(34px, 5vw, 62px) !important;
}

.compact-grid .product-card,
.rail-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 0 !important;
}

.compact-grid .product-card .product-float-zone,
.rail-card .rail-art {
  width: 100% !important;
  min-height: 146px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(246, 249, 247, 0.74), rgba(255, 255, 255, 0) 70%) !important;
}

.compact-grid .product-card img,
.rail-card img {
  max-width: min(76%, 154px) !important;
  max-height: 136px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 20px 23px rgba(17, 19, 18, 0.1)) !important;
  transform: translateZ(0) !important;
}

.compact-grid .product-card h3,
.rail-card h4 {
  width: min(100%, 180px) !important;
  margin: 0 auto !important;
  color: #111312 !important;
  font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif !important;
  font-size: clamp(0.98rem, 1.35vw, 1.16rem) !important;
  font-weight: 760 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}

.compact-grid .product-card .product-card-copy > span,
.rail-card > p {
  max-width: 168px !important;
  margin: 0 auto !important;
  color: rgba(17, 19, 18, 0.43) !important;
  font-size: 0.88rem !important;
  font-weight: 620 !important;
  line-height: 1.05 !important;
  text-align: center !important;
}

.product-card .app-score-pair,
.rail-score-pair,
.ranking-score-pair {
  gap: 12px !important;
  margin-top: 6px !important;
}

.app-score-stack {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 48px !important;
}

.app-score-stack > span {
  color: rgba(17, 19, 18, 0.45) !important;
  font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif !important;
  font-size: 0.58rem !important;
  font-weight: 760 !important;
  letter-spacing: 0.16em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

.ranking-score-circle,
.rail-score-pair .app-score-ring,
.compact-grid .product-card .app-score-ring,
.product-card .app-score-ring {
  width: 52px !important;
  height: 52px !important;
  inline-size: 52px !important;
  block-size: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  flex: 0 0 52px !important;
  border-radius: 999px !important;
  background:
    conic-gradient(var(--score-color, #23a060) calc(var(--score, 0) * 1%), rgba(35, 160, 96, 0.08) 0),
    #fff !important;
  box-shadow:
    0 14px 28px rgba(17, 19, 18, 0.045),
    inset 0 0 0 1px rgba(35, 160, 96, 0.08) !important;
}

.ranking-score-circle::before,
.rail-score-pair .app-score-ring::before,
.compact-grid .product-card .app-score-ring::before,
.product-card .app-score-ring::before {
  inset: 5px !important;
  border-radius: inherit !important;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.98), rgba(248, 252, 250, 0.94) 62%, rgba(255, 255, 255, 0.88)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72) !important;
}

.ranking-score-circle .app-symbol-icon,
.rail-score-pair .app-score-ring .app-symbol-icon,
.compact-grid .product-card .app-score-ring .app-symbol-icon,
.product-card .app-score-ring .app-symbol-icon {
  width: 11px !important;
  height: 11px !important;
  margin-top: 9px !important;
  color: var(--score-color, #23a060) !important;
}

.ranking-score-circle strong,
.rail-score-pair .app-score-ring strong,
.compact-grid .product-card .app-score-ring strong,
.product-card .app-score-ring strong {
  margin-bottom: 7px !important;
  color: #111312 !important;
  font-family: var(--font-serif), Georgia, serif !important;
  font-size: 1.06rem !important;
  font-weight: 450 !important;
  letter-spacing: 0 !important;
}

.app-download-cta,
.site-footer-cta {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  border: 1px solid rgba(17, 19, 18, 0.075) !important;
  background:
    radial-gradient(circle at 88% 8%, rgba(35, 160, 96, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.9)) !important;
  box-shadow: 0 24px 70px rgba(17, 19, 18, 0.075) !important;
}

.app-download-cta {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 18px 24px !important;
  align-items: end !important;
  padding: clamp(22px, 4vw, 34px) !important;
}

.app-download-mascot-line {
  grid-column: 1 / -1 !important;
  display: inline-flex !important;
  width: fit-content !important;
  max-width: min(100%, 560px) !important;
  align-items: center !important;
  gap: 13px !important;
  padding: 9px 16px 9px 9px !important;
  border: 1px solid rgba(17, 19, 18, 0.06) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.84) !important;
  box-shadow: 0 16px 36px rgba(17, 19, 18, 0.055) !important;
  color: #111312 !important;
  font-size: 1rem !important;
  font-weight: 760 !important;
  line-height: 1.18 !important;
}

.app-download-mascot,
.site-footer-mascot {
  flex: 0 0 auto !important;
  border-radius: 999px !important;
  background: rgba(246, 250, 248, 0.92) !important;
  box-shadow:
    inset 0 0 0 1px rgba(17, 19, 18, 0.05),
    0 10px 24px rgba(17, 19, 18, 0.05) !important;
}

.app-download-mascot {
  width: 44px !important;
  height: 44px !important;
}

.site-footer-mascot {
  width: 54px !important;
  height: 54px !important;
}

.app-download-copy h2,
.site-footer-cta h2 {
  max-width: 640px !important;
  color: #111312 !important;
  line-height: 0.9 !important;
}

.app-download-copy > p:not(.eyebrow),
.site-footer-cta > div > p:not(.eyebrow) {
  max-width: 560px !important;
  color: rgba(17, 19, 18, 0.58) !important;
  font-weight: 620 !important;
  line-height: 1.35 !important;
}

.app-download-button,
.footer-waitlist-cta {
  min-height: 50px !important;
  padding: 0 24px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #080b0a, #1f2422) !important;
  color: #fff !important;
  box-shadow: 0 18px 36px rgba(17, 19, 18, 0.16) !important;
  transform: translateZ(0) !important;
}

.site-footer {
  border-radius: 32px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.9)),
    #fff !important;
  box-shadow: 0 26px 80px rgba(17, 19, 18, 0.07) !important;
}

.site-footer-cta {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 18px !important;
  padding: clamp(20px, 3vw, 28px) !important;
}

.site-footer-links {
  border-top: 0 !important;
}

.site-footer-links h3,
.seo-link-panel h3 {
  color: #111312 !important;
  font-weight: 820 !important;
}

.site-footer-links a,
.seo-text-links a {
  color: rgba(17, 19, 18, 0.54) !important;
  font-weight: 720 !important;
}

.site-footer-links a:hover,
.seo-text-links a:hover {
  color: #111312 !important;
}

@media (max-width: 720px) {
  .product-grid.compact-grid {
    row-gap: 32px !important;
  }

  .compact-grid .product-card .product-float-zone,
  .rail-card .rail-art {
    min-height: 128px !important;
  }

  .compact-grid .product-card img,
  .rail-card img {
    max-width: min(82%, 132px) !important;
    max-height: 118px !important;
  }

  .ranking-score-circle,
  .rail-score-pair .app-score-ring,
  .compact-grid .product-card .app-score-ring,
  .product-card .app-score-ring {
    width: 48px !important;
    height: 48px !important;
    inline-size: 48px !important;
    block-size: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    flex-basis: 48px !important;
  }

  .ranking-score-circle .app-symbol-icon,
  .rail-score-pair .app-score-ring .app-symbol-icon,
  .compact-grid .product-card .app-score-ring .app-symbol-icon,
  .product-card .app-score-ring .app-symbol-icon {
    width: 10px !important;
    height: 10px !important;
    margin-top: 9px !important;
  }

  .ranking-score-circle strong,
  .rail-score-pair .app-score-ring strong,
  .compact-grid .product-card .app-score-ring strong,
  .product-card .app-score-ring strong {
    font-size: 1rem !important;
  }

  .app-score-stack > span {
    font-size: 0.52rem !important;
  }

  .app-download-cta,
  .site-footer-cta {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  .app-download-button,
  .footer-waitlist-cta {
    width: 100% !important;
    justify-content: center !important;
  }

  .app-download-mascot-line {
    width: 100% !important;
    font-size: 0.94rem !important;
  }

  .site-footer-mascot {
    width: 48px !important;
    height: 48px !important;
  }
}

/* EOF authority: archive routes get the current Reviews app mascot/editorial rhythm. */
.archive-hero:not(.best-archive-hero) {
  width: min(1090px, calc(100% - 32px)) !important;
  margin: 4px auto 0 !important;
  padding: clamp(36px, 6vw, 68px) clamp(26px, 5vw, 72px) clamp(34px, 5vw, 58px) !important;
  border: 1px solid rgba(16, 19, 18, 0.065) !important;
  border-radius: 34px !important;
  background: #fff !important;
  box-shadow: 0 24px 68px rgba(16, 19, 18, 0.06) !important;
}

.app-archive-mascot-line {
  width: fit-content !important;
  max-width: min(640px, 100%) !important;
  margin: 0 0 18px !important;
}

.archive-hero:not(.best-archive-hero) h1 {
  max-width: 790px !important;
  font-size: clamp(4.1rem, 8vw, 7.25rem) !important;
  line-height: 0.88 !important;
  letter-spacing: 0 !important;
}

.archive-hero:not(.best-archive-hero) > p:not(.eyebrow) {
  max-width: 720px !important;
  color: rgba(16, 19, 18, 0.56) !important;
  font-size: clamp(1.04rem, 1.35vw, 1.2rem) !important;
  font-weight: 660 !important;
  line-height: 1.43 !important;
}

.archive-hero:not(.best-archive-hero) .product-search-form {
  width: min(100%, 710px) !important;
}

@media (max-width: 720px) {
  .archive-hero:not(.best-archive-hero) {
    width: calc(100% - 24px) !important;
    padding: 22px 14px 26px !important;
    border-radius: 28px !important;
  }

  .app-archive-mascot-line {
    width: 100% !important;
    margin-bottom: 14px !important;
  }

  .archive-hero:not(.best-archive-hero) h1 {
    max-width: 340px !important;
    font-size: clamp(3rem, 12.6vw, 3.9rem) !important;
    line-height: 0.91 !important;
  }

  .archive-hero:not(.best-archive-hero) > p:not(.eyebrow) {
    font-size: 1.02rem !important;
  }
}

/* EOF authority: trust/index pages should feel like the current native app, not generic SEO pages. */
.methodology-hero,
.trust-hero,
.waitlist-page-hero {
  width: min(1090px, calc(100% - 32px)) !important;
  margin: 4px auto 0 !important;
  padding: clamp(38px, 6vw, 70px) clamp(26px, 5vw, 72px) clamp(34px, 5vw, 60px) !important;
  border: 1px solid rgba(16, 19, 18, 0.065) !important;
  border-radius: 34px !important;
  background: #fff !important;
  box-shadow: 0 24px 68px rgba(16, 19, 18, 0.06) !important;
}

.methodology-hero h1,
.trust-hero h1,
.waitlist-page-hero h1 {
  max-width: 820px !important;
  font-size: clamp(4.1rem, 8.2vw, 7.35rem) !important;
  line-height: 0.88 !important;
  letter-spacing: 0 !important;
}

.methodology-hero > p:not(.eyebrow),
.trust-hero > p:not(.eyebrow),
.waitlist-page-hero > p:not(.eyebrow) {
  max-width: 720px !important;
  color: rgba(16, 19, 18, 0.56) !important;
  font-size: clamp(1.04rem, 1.35vw, 1.2rem) !important;
  font-weight: 660 !important;
  line-height: 1.43 !important;
}

.methodology-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 24px !important;
}

.methodology-actions a {
  display: inline-flex !important;
  min-height: 48px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 22px !important;
  border: 1px solid rgba(16, 19, 18, 0.075) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #111312 !important;
  font-size: 0.95rem !important;
  font-weight: 860 !important;
  text-decoration: none !important;
  box-shadow: 0 18px 38px rgba(16, 19, 18, 0.055) !important;
}

.methodology-actions a:first-child {
  border-color: rgba(16, 19, 18, 0.92) !important;
  background: #111312 !important;
  color: #fff !important;
}

.methodology-score-grid {
  width: min(1090px, calc(100% - 32px)) !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.methodology-score-card {
  border: 1px solid rgba(16, 19, 18, 0.065) !important;
  border-radius: 30px !important;
  background: #fff !important;
  box-shadow: 0 22px 52px rgba(16, 19, 18, 0.045) !important;
}

.methodology-score-card > span.methodology-score-orb {
  display: inline-grid !important;
  width: 58px !important;
  height: 58px !important;
  place-items: center !important;
  border: 1px solid rgba(36, 154, 96, 0.11) !important;
  border-radius: 999px !important;
  background: radial-gradient(circle at 50% 46%, rgba(36, 154, 96, 0.12), rgba(255, 255, 255, 0.9) 72%) !important;
  color: #249a60 !important;
  box-shadow: 0 16px 28px rgba(36, 154, 96, 0.08) !important;
}

.methodology-score-card > span.methodology-score-orb .app-symbol-icon {
  width: 22px !important;
  height: 22px !important;
  color: currentColor !important;
}

.methodology-score-card h2 {
  max-width: 280px !important;
  font-size: clamp(2.05rem, 3vw, 3rem) !important;
  line-height: 0.94 !important;
  letter-spacing: 0 !important;
}

.methodology-score-card > p:not(.eyebrow) {
  color: rgba(16, 19, 18, 0.58) !important;
  font-weight: 650 !important;
  line-height: 1.45 !important;
}

.seo-link-panel,
.methodology-panel,
.methodology-faq {
  border: 1px solid rgba(16, 19, 18, 0.065) !important;
  border-radius: 32px !important;
  background: #fff !important;
  box-shadow: 0 22px 58px rgba(16, 19, 18, 0.045) !important;
}

.seo-text-links a {
  display: flex !important;
  min-height: 46px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 10px 16px !important;
  border: 1px solid rgba(36, 154, 96, 0.17) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #249a60 !important;
  font-weight: 850 !important;
  text-decoration: none !important;
  box-shadow: 0 16px 30px rgba(16, 19, 18, 0.035) !important;
}

.seo-text-links a span {
  flex: 0 0 auto !important;
  color: rgba(16, 19, 18, 0.44) !important;
  font-size: 0.82rem !important;
  font-weight: 840 !important;
}

.waitlist-back-link {
  display: inline-flex !important;
  width: fit-content !important;
  margin-bottom: 18px !important;
  color: #249a60 !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}

.waitlist-page-hero form,
.waitlist-page-hero .waitlist-form,
.waitlist-page-hero [class*="waitlist"] form {
  max-width: 520px !important;
}

@media (max-width: 860px) {
  .methodology-score-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  .methodology-hero,
  .trust-hero,
  .waitlist-page-hero {
    width: calc(100% - 24px) !important;
    padding: 22px 14px 26px !important;
    border-radius: 28px !important;
  }

  .methodology-hero h1,
  .trust-hero h1,
  .waitlist-page-hero h1 {
    max-width: 350px !important;
    font-size: clamp(3rem, 13.2vw, 4rem) !important;
    line-height: 0.91 !important;
  }

  .methodology-actions {
    gap: 10px !important;
  }

  .methodology-actions a {
    min-height: 45px !important;
    padding: 0 17px !important;
    font-size: 0.9rem !important;
  }

  .methodology-score-card {
    border-radius: 27px !important;
  }

  .seo-text-links a {
    min-height: 42px !important;
    padding: 9px 13px !important;
    font-size: 0.86rem !important;
  }
}

/* EOF authority: archive routes get the same current app mascot/editorial rhythm. */
.archive-hero:not(.best-archive-hero) {
  width: min(1090px, calc(100% - 32px)) !important;
  margin: 4px auto 0 !important;
  padding: clamp(36px, 6vw, 68px) clamp(26px, 5vw, 72px) clamp(34px, 5vw, 58px) !important;
  border: 1px solid rgba(16, 19, 18, 0.065) !important;
  border-radius: 34px !important;
  background: #fff !important;
  box-shadow: 0 24px 68px rgba(16, 19, 18, 0.06) !important;
}

.app-archive-mascot-line {
  width: fit-content !important;
  max-width: min(640px, 100%) !important;
  margin: 0 0 18px !important;
}

.archive-hero:not(.best-archive-hero) h1 {
  max-width: 790px !important;
  font-size: clamp(4.1rem, 8vw, 7.25rem) !important;
  line-height: 0.88 !important;
  letter-spacing: 0 !important;
}

.archive-hero:not(.best-archive-hero) > p:not(.eyebrow) {
  max-width: 720px !important;
  color: rgba(16, 19, 18, 0.56) !important;
  font-size: clamp(1.04rem, 1.35vw, 1.2rem) !important;
  font-weight: 660 !important;
  line-height: 1.43 !important;
}

.archive-hero:not(.best-archive-hero) .product-search-form {
  width: min(100%, 710px) !important;
}

@media (max-width: 720px) {
  .archive-hero:not(.best-archive-hero) {
    width: calc(100% - 24px) !important;
    padding: 22px 14px 26px !important;
    border-radius: 28px !important;
  }

  .app-archive-mascot-line {
    width: 100% !important;
    margin-bottom: 14px !important;
  }

  .archive-hero:not(.best-archive-hero) h1 {
    max-width: 350px !important;
    font-size: clamp(3.42rem, 14.4vw, 4.42rem) !important;
    line-height: 0.9 !important;
  }

  .archive-hero:not(.best-archive-hero) > p:not(.eyebrow) {
    font-size: 1.02rem !important;
  }
}

/* World-class Reviews web finish: current-app editorial system, verified by screenshots. */
.app-section-mascot-line {
  width: fit-content !important;
  max-width: min(680px, 100%) !important;
  margin: 0 0 18px !important;
  padding: 8px 17px 8px 8px !important;
}

.app-section-mascot {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
}

.app-section-mascot-line span {
  color: rgba(16, 19, 18, 0.76) !important;
  font-size: 0.92rem !important;
  font-weight: 790 !important;
  line-height: 1.15 !important;
}

.category-rails,
.app-trending-board,
.app-loved-section {
  padding-top: clamp(52px, 7vw, 88px) !important;
}

.best-archive-hero {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.54fr) !important;
  align-items: center !important;
  gap: clamp(30px, 5vw, 78px) !important;
  width: min(1090px, calc(100% - 32px)) !important;
  margin: 4px auto 0 !important;
  padding: clamp(42px, 6vw, 76px) clamp(28px, 5vw, 72px) clamp(36px, 5vw, 64px) !important;
  overflow: hidden !important;
  border: 1px solid rgba(16, 19, 18, 0.065) !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 78% 18%, rgba(36, 154, 96, 0.055), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(255, 255, 255, 0.95)) !important;
  box-shadow: 0 24px 68px rgba(16, 19, 18, 0.06) !important;
}

.best-archive-hero::after {
  display: none !important;
  content: none !important;
}

.best-hero-copy {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-column: 1 !important;
  gap: 14px !important;
  min-width: 0 !important;
}

.best-mascot-line {
  margin: 0 0 4px !important;
}

.best-archive-hero h1 {
  max-width: 650px !important;
  font-size: clamp(4.2rem, 8vw, 7.8rem) !important;
  line-height: 0.86 !important;
  letter-spacing: 0 !important;
}

.best-hero-copy > p:not(.eyebrow) {
  max-width: 640px !important;
  color: rgba(16, 19, 18, 0.56) !important;
  font-size: clamp(1.05rem, 1.38vw, 1.22rem) !important;
  font-weight: 660 !important;
  line-height: 1.42 !important;
}

.best-archive-hero .product-search-form {
  width: min(100%, 710px) !important;
  max-width: 710px !important;
  margin-top: 4px !important;
}

.best-archive-hero .seo-chip-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 0 !important;
}

.best-archive-hero .seo-chip-row a {
  min-height: 40px !important;
  padding: 0 17px !important;
  border: 1px solid rgba(36, 154, 96, 0.22) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #178653 !important;
  font-size: 0.82rem !important;
  font-weight: 860 !important;
  box-shadow: 0 10px 28px rgba(16, 19, 18, 0.035) !important;
}

.best-hero-preview {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  gap: 14px !important;
  align-self: center !important;
  min-width: 0 !important;
}

.best-hero-preview-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 88px minmax(0, 1fr) 54px !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 112px !important;
  padding: 14px 14px 14px 18px !important;
  overflow: visible !important;
  border: 1px solid rgba(16, 19, 18, 0.065) !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--current-ink) !important;
  text-decoration: none !important;
  box-shadow: 0 18px 44px rgba(16, 19, 18, 0.055) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

.best-hero-preview-card:nth-child(2) {
  transform: translateX(18px) !important;
}

.best-hero-preview-card:nth-child(3) {
  transform: translateX(36px) !important;
}

.best-hero-preview-card img {
  width: 84px !important;
  height: 88px !important;
  max-width: 84px !important;
  max-height: 88px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 14px 22px rgba(16, 19, 18, 0.105)) !important;
}

.best-hero-preview-card .product-rank-bubble {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 2 !important;
  width: 38px !important;
  height: 38px !important;
  font-size: 1.08rem !important;
  transform: translate(-28%, -28%) !important;
}

.best-preview-copy {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
}

.best-preview-copy strong {
  display: -webkit-box !important;
  overflow: hidden !important;
  color: var(--current-ink) !important;
  font-size: 1.02rem !important;
  font-weight: 870 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

.best-preview-copy em {
  overflow: hidden !important;
  color: rgba(16, 19, 18, 0.42) !important;
  font-size: 0.78rem !important;
  font-style: normal !important;
  font-weight: 760 !important;
  letter-spacing: 0.05em !important;
  text-overflow: ellipsis !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.best-hero-preview-card .ranking-score-circle {
  width: 52px !important;
  height: 52px !important;
  inline-size: 52px !important;
  block-size: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  max-width: 52px !important;
  max-height: 52px !important;
}

.ranking-score-circle,
.rail-score-pair .app-score-ring,
.compact-grid .product-card .app-score-ring,
.product-card .app-score-ring,
.search-score-pair .app-score-ring {
  color: var(--current-ink) !important;
  background: conic-gradient(var(--score-color, var(--current-green)) calc(var(--score) * 1%), var(--score-track, rgba(36, 154, 96, 0.14)) 0) !important;
  box-shadow: 0 12px 26px rgba(16, 19, 18, 0.045) !important;
}

.ranking-score-circle::before,
.rail-score-pair .app-score-ring::before,
.compact-grid .product-card .app-score-ring::before,
.product-card .app-score-ring::before,
.search-score-pair .app-score-ring::before {
  background: color-mix(in srgb, var(--score-color, var(--current-green)) 5%, #fff) !important;
}

.ranking-score-circle strong,
.rail-score-pair .app-score-ring strong,
.compact-grid .product-card .app-score-ring strong,
.product-card .app-score-ring strong,
.search-score-pair .app-score-ring strong {
  color: var(--current-ink) !important;
  font-family: var(--font-serif), Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.rail-score-pair .app-score-ring .app-symbol-icon,
.compact-grid .product-card .app-score-ring .app-symbol-icon,
.product-card .app-score-ring .app-symbol-icon,
.search-score-pair .app-score-ring .app-symbol-icon {
  color: var(--score-color, var(--current-green)) !important;
}

.rail-card,
.compact-grid .product-card,
.product-card {
  border-radius: 0 !important;
  background: transparent !important;
}

.compact-grid {
  gap: clamp(24px, 4vw, 44px) clamp(18px, 3vw, 32px) !important;
}

.compact-grid .product-float-zone,
.compact-grid .rail-art {
  height: 192px !important;
  min-height: 192px !important;
}

.compact-grid .product-float-zone img,
.compact-grid .product-card img {
  max-height: 168px !important;
}

@media (max-width: 920px) {
  .best-archive-hero {
    grid-template-columns: 1fr !important;
  }

  .best-hero-copy {
    grid-column: 1 !important;
  }

  .best-hero-preview {
    display: none !important;
  }
}

@media (max-width: 720px) {
  .best-archive-hero {
    width: calc(100% - 24px) !important;
    margin-top: 4px !important;
    padding: 22px 14px 24px !important;
    border-radius: 28px !important;
  }

  .best-hero-copy {
    gap: 12px !important;
  }

  .best-mascot-line {
    width: 100% !important;
  }

  .best-archive-hero h1 {
    max-width: 330px !important;
    font-size: clamp(4rem, 17.8vw, 5.2rem) !important;
    line-height: 0.88 !important;
  }

  .best-hero-copy > p:not(.eyebrow) {
    font-size: 1.02rem !important;
    line-height: 1.43 !important;
  }

  .best-archive-hero .product-search-form {
    margin-top: 2px !important;
  }

  .best-archive-hero .seo-chip-row {
    gap: 9px !important;
  }

  .best-archive-hero .seo-chip-row a {
    min-height: 38px !important;
    padding: 0 15px !important;
    font-size: 0.78rem !important;
  }

  .app-section-mascot-line {
    width: 100% !important;
    margin-bottom: 14px !important;
  }

  .compact-grid {
    gap: 26px 16px !important;
  }

  .compact-grid .product-float-zone {
    height: 146px !important;
    min-height: 146px !important;
  }
}

@media (max-width: 720px) {
  .site-header {
    width: calc(100% - 24px) !important;
    min-height: 62px !important;
    margin-top: 10px !important;
    border-radius: 22px !important;
  }

  .brand-logo {
    width: 118px !important;
  }

  .site-header nav a:not(.nav-cta) {
    display: none !important;
  }

  .nav-cta {
    min-height: 42px !important;
    padding: 0 14px !important;
    font-size: 0.78rem !important;
  }

  .app-site-hero,
  .app-site-section,
  .app-product-hero,
  .product-hero.app-product-hero,
  .site-footer {
    width: calc(100% - 24px) !important;
  }

  .app-site-hero {
    gap: 28px;
    padding-top: 30px;
  }

  .app-site-hero h1 {
    font-size: clamp(3.8rem, 17vw, 5.2rem);
  }

  .app-site-lede {
    font-size: 1.02rem !important;
  }

  .app-site-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .app-primary-cta,
  .app-secondary-cta {
    width: 100%;
  }

  .app-hero-product-card {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 16px;
    padding: 18px;
    border-radius: 26px;
  }

  .app-product-art {
    min-height: 190px;
  }

  .app-product-art img {
    max-height: 190px;
  }

  .app-brand-row p {
    font-size: 0.66rem;
  }

  .app-brand-mark {
    width: 34px;
    height: 34px;
    font-size: 0.78rem;
  }

  .app-product-detail-copy h2 {
    font-size: clamp(2rem, 9vw, 3.2rem);
  }

  .app-hero-score-ring {
    width: 52px !important;
    height: 52px !important;
  }

  .app-search-section {
    padding: 20px;
    border-radius: 26px;
  }

  .app-section-heading {
    display: grid !important;
    align-items: start;
    gap: 10px;
  }

  .app-section-heading h2,
  .app-scan-copy h2 {
    font-size: clamp(3rem, 15vw, 4.5rem) !important;
  }

  .app-scan-card {
    min-height: 380px;
    padding: 20px;
  }

  .app-viewfinder {
    height: 118px;
    margin-top: 76px;
  }

  .product-rail {
    grid-auto-columns: 150px !important;
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .product-float-zone,
  .rail-art {
    height: 138px !important;
  }

  .product-card-copy h3 {
    font-size: 0.96rem !important;
  }

  .app-product-hero,
  .product-hero.app-product-hero {
    padding: 18px !important;
    border-radius: 26px !important;
  }

  .app-product-header {
    grid-template-columns: 112px minmax(0, 1fr) !important;
    column-gap: 16px !important;
    row-gap: 9px !important;
  }

  .app-product-image {
    min-height: 190px !important;
  }

  .app-product-image img {
    max-height: 190px !important;
  }

  .app-product-hero h1 {
    font-size: clamp(2rem, 9vw, 3.4rem) !important;
  }

  .app-product-score-pair .app-score-ring {
    width: 58px !important;
    height: 58px !important;
  }
}

/* Polish after screenshot pass — denser, app-like, and no CTA icon artifacts. */
.nav-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  overflow: hidden !important;
}

.nav-cta .apple-mark,
.app-primary-cta .apple-mark {
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px !important;
  color: currentColor !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

.nav-cta .apple-mark path,
.app-primary-cta .apple-mark path {
  fill: currentColor !important;
}

.app-site-hero {
  min-height: auto !important;
  padding-top: clamp(34px, 5vw, 58px) !important;
  padding-bottom: clamp(42px, 5.8vw, 72px) !important;
}

.app-site-section {
  padding-top: clamp(34px, 5.2vw, 64px) !important;
  padding-bottom: clamp(34px, 5.2vw, 64px) !important;
}

.app-scan-explainer {
  padding-top: clamp(30px, 4vw, 42px) !important;
}

.app-feature-grid {
  padding-top: clamp(22px, 3vw, 34px) !important;
  padding-bottom: clamp(30px, 4.4vw, 48px) !important;
}

.app-feature-grid article {
  min-height: 206px !important;
}

.category-rails {
  padding-top: clamp(30px, 4.6vw, 56px) !important;
}

.product-rail-block {
  margin-top: 26px !important;
}

.product-rail {
  grid-auto-columns: 158px !important;
}

.product-float-zone,
.rail-art {
  height: 150px !important;
  min-height: 150px !important;
  max-height: 150px !important;
}

.product-float-zone img,
.rail-art img,
.product-card img {
  max-height: 132px !important;
}

.rail-heading {
  align-items: end !important;
}

.rail-heading h3 {
  font-size: clamp(2.3rem, 3.85vw, 3.76rem) !important;
}

@media (min-width: 921px) {
  .app-site-hero {
    grid-template-columns: minmax(0, 0.98fr) minmax(440px, 0.82fr) !important;
  }

  .app-scan-explainer {
    grid-template-columns: minmax(0, 0.86fr) minmax(380px, 0.72fr) !important;
  }
}

@media (max-width: 720px) {
  .site-header {
    position: sticky !important;
    top: 8px !important;
    z-index: 20 !important;
  }

  .nav-cta {
    gap: 8px !important;
    min-width: 0 !important;
    padding-inline: 18px !important;
  }

  .nav-cta .apple-mark {
    width: 14px !important;
    height: 14px !important;
    flex-basis: 14px !important;
  }

  .app-site-hero {
    padding-top: 30px !important;
    padding-bottom: 34px !important;
  }

  .app-hero-product-card {
    grid-template-columns: 124px minmax(0, 1fr) !important;
    padding: 16px !important;
  }

  .app-product-detail-copy h2 {
    font-size: clamp(1.46rem, 6.7vw, 2.1rem) !important;
  }

  .app-product-art {
    min-height: 150px !important;
  }

  .app-product-art img {
    max-height: 150px !important;
  }

  .app-section-heading h2,
  .app-scan-copy h2 {
    font-size: clamp(2.24rem, 11vw, 3.3rem) !important;
  }

  .app-site-section {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  .app-feature-grid {
    gap: 12px !important;
  }

  .app-feature-grid article {
    min-height: 0 !important;
    padding: 24px !important;
  }

  .app-feature-grid article img {
    width: 58px !important;
    height: 58px !important;
    margin-bottom: 18px !important;
  }

  .app-feature-grid h2 {
    font-size: clamp(2rem, 9.2vw, 2.78rem) !important;
  }

  .product-rail {
    grid-auto-columns: 136px !important;
    gap: 12px !important;
  }

  .product-float-zone,
  .rail-art {
    height: 138px !important;
    min-height: 138px !important;
    max-height: 138px !important;
  }

  .product-float-zone img,
  .rail-art img,
  .product-card img {
    max-height: 118px !important;
  }

  .rail-heading {
    display: flex !important;
    align-items: end !important;
  }

  .rail-heading h3 {
    font-size: clamp(2.2rem, 10.5vw, 3.2rem) !important;
  }
}

/* Product page app-sheet cleanup. */
.app-product-analysis::before {
  content: none !important;
  display: none !important;
}

.app-product-score-pair .app-score-ring strong::after {
  content: none !important;
  display: none !important;
}

.app-product-pantry-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  min-width: 184px !important;
}

.app-product-pantry-cta::before {
  content: '♡' !important;
  display: inline-block !important;
  color: currentColor !important;
  font-size: 1.16rem !important;
  line-height: 1 !important;
}

@media (max-width: 720px) {
  .app-product-hero,
  .product-hero.app-product-hero {
    margin-top: 22px !important;
    padding: 16px !important;
  }

  .app-product-header {
    grid-template-columns: 126px minmax(0, 1fr) !important;
    grid-template-areas:
      "image brand"
      "image title"
      "image scores"
      "pantry pantry"
      "category category" !important;
    row-gap: 10px !important;
  }

  .app-product-image {
    min-height: 184px !important;
  }

  .app-product-image img {
    max-height: 184px !important;
  }

  .app-product-brand {
    justify-self: center !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .app-product-header h1 {
    justify-self: center !important;
    text-align: center !important;
    font-size: clamp(1.86rem, 8.4vw, 2.92rem) !important;
  }

  .app-product-score-pair {
    justify-content: center !important;
    padding-bottom: 4px !important;
  }

  .app-product-pantry-cta {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    margin-top: 6px !important;
    border-radius: 16px !important;
  }
}

/* Current app fidelity pass — no old seed, native mascot + floating Top Picks. */
.mascot-lottie {
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}

.mascot-lottie > *,
.mascot-lottie-player {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

.mascot-lottie-player {
  display: block;
  object-fit: contain;
  transform: scale(2.55);
  transform-origin: center;
  animation: mascotLottieFloat 2.4s ease-in-out infinite;
}

@keyframes mascotLottieFloat {
  0%,
  100% {
    transform: translateY(0) scale(2.55) rotate(-1deg);
  }
  50% {
    transform: translateY(-2px) scale(2.55) rotate(1deg);
  }
}

.app-current-mascot-line {
  width: fit-content !important;
  max-width: min(100%, 560px) !important;
  gap: 10px !important;
  padding: 8px 16px 8px 8px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(16, 19, 18, 0.055) !important;
  box-shadow: 0 18px 48px rgba(16, 19, 18, 0.065) !important;
}

.app-hero-mascot,
.app-final-mascot-lottie {
  width: 58px !important;
  height: 58px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--current-green) 8%, #fff) !important;
  box-shadow: inset 0 0 0 1px rgba(36, 154, 96, 0.12) !important;
  flex: 0 0 auto;
}

.app-current-mascot-line span {
  max-width: 420px !important;
  color: rgba(16, 19, 18, 0.78) !important;
  font-size: 0.96rem !important;
  font-weight: 780 !important;
  line-height: 1.2 !important;
}

.app-site-hero {
  align-items: center !important;
}

.app-site-hero h1 {
  max-width: 660px !important;
  letter-spacing: 0 !important;
}

.app-site-lede {
  max-width: 590px !important;
}

.app-hero-product-card {
  overflow: visible !important;
  align-items: center !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.94)) !important;
}

.app-product-art {
  display: grid !important;
  place-items: center !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.app-product-art::before,
.product-float-zone::before,
.rail-art::before {
  content: none !important;
}

.app-product-art img {
  object-fit: contain !important;
}

.app-hero-score,
.app-product-score-badge {
  align-items: center !important;
}

.app-hero-score-ring {
  width: 72px !important;
  height: 72px !important;
}

.app-hero-score-ring .app-symbol-icon {
  width: 14px !important;
  height: 14px !important;
  margin-top: 15px !important;
}

.app-hero-score-ring strong {
  margin-bottom: 13px !important;
  font-size: 1.42rem !important;
}

.app-hero-score span {
  margin-top: 2px !important;
  color: rgba(16, 19, 18, 0.50) !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.18em !important;
}

.app-scan-explainer {
  align-items: center !important;
}

.app-scan-card {
  overflow: hidden !important;
  box-shadow: 0 24px 70px rgba(16, 19, 18, 0.07) !important;
}

.scan-lens-mini {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(16, 19, 18, 0.055) !important;
  box-shadow: 0 16px 34px rgba(16, 19, 18, 0.07) !important;
}

.app-viewfinder {
  border-color: rgba(16, 19, 18, 0.16) !important;
  background: rgba(16, 19, 18, 0.035) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.78) !important;
}

.app-feature-grid article {
  background: #fff !important;
}

.app-feature-grid article img {
  border-radius: 18px !important;
  background: #fafafa !important;
  box-shadow: 0 12px 30px rgba(16, 19, 18, 0.045) !important;
}

.top-picks-web-header {
  margin: 4px 0 22px !important;
}

.top-picks-parent-row {
  justify-content: flex-start !important;
  gap: clamp(18px, 3vw, 34px) !important;
}

.top-picks-parent {
  min-width: 76px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.top-picks-parent-icon {
  width: 68px !important;
  height: 68px !important;
  border-radius: 999px !important;
  background: transparent !important;
  transition: box-shadow 180ms ease, transform 180ms ease, background 180ms ease !important;
}

.top-picks-parent-icon img {
  width: 58px !important;
  height: 58px !important;
  object-fit: contain !important;
}

.top-picks-parent.is-active .top-picks-parent-icon {
  background: #f8f8f8 !important;
  box-shadow:
    0 0 0 2px rgba(16, 19, 18, 0.18),
    0 14px 30px rgba(16, 19, 18, 0.055) !important;
}

.top-picks-parent:hover .top-picks-parent-icon {
  transform: translateY(-2px) !important;
}

.product-rail-block {
  margin-top: 34px !important;
}

.product-rail {
  align-items: start !important;
}

.rail-card,
.product-card {
  position: relative !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 0 6px !important;
}

.rail-card:hover,
.product-card:hover {
  transform: translateY(-3px) !important;
}

.rail-art,
.product-float-zone {
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.rail-art img,
.product-float-zone img {
  object-fit: contain !important;
}

.rail-card h4,
.product-card-copy h3 {
  width: 100% !important;
  max-width: 178px !important;
  margin-inline: auto !important;
  text-align: center !important;
  font-size: 1.04rem !important;
  font-weight: 840 !important;
}

.rail-card > p,
.product-card-copy > span {
  width: 100% !important;
  max-width: 166px !important;
  margin-inline: auto !important;
  text-align: center !important;
}

.ranking-score-pair,
.rail-score-pair,
.product-card .app-score-pair {
  justify-content: center !important;
  gap: 8px !important;
}

.ranking-score-circle,
.rail-score-pair .app-score-ring,
.product-card .app-score-ring {
  width: 46px !important;
  height: 46px !important;
  background:
    conic-gradient(var(--score-color, var(--current-green)) calc(var(--score) * 1%), var(--score-track, rgba(36, 154, 96, 0.12)) 0) !important;
  filter: drop-shadow(0 10px 18px rgba(16, 19, 18, 0.04)) !important;
}

.ranking-score-circle::before,
.rail-score-pair .app-score-ring::before,
.product-card .app-score-ring::before {
  inset: 3.5px !important;
  background: color-mix(in srgb, var(--score-color, var(--current-green)) 6%, #fff) !important;
}

.ranking-score-circle .app-symbol-icon,
.rail-score-pair .app-score-ring .app-symbol-icon,
.product-card .app-score-ring .app-symbol-icon {
  width: 9px !important;
  height: 9px !important;
  margin-top: 8px !important;
}

.ranking-score-circle strong,
.rail-score-pair .app-score-ring strong,
.product-card .app-score-ring strong {
  margin-bottom: 7px !important;
  color: var(--current-ink) !important;
  font-family: ui-serif, Georgia, 'Times New Roman', serif !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
}

.product-rank-bubble {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(10px) !important;
}

.app-trending-board .product-card,
.app-loved-section .product-card {
  min-width: 0 !important;
}

.app-final-download {
  display: grid !important;
  gap: 18px !important;
  justify-items: center !important;
  text-align: center !important;
}

.app-final-mascot {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 16px 8px 8px !important;
  border: 1px solid rgba(16, 19, 18, 0.06) !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: 0 14px 34px rgba(16, 19, 18, 0.055) !important;
  color: rgba(16, 19, 18, 0.74) !important;
  font-weight: 820 !important;
}

@media (max-width: 720px) {
  .app-current-mascot-line {
    align-items: center !important;
    padding-right: 13px !important;
  }

  .app-hero-mascot,
  .app-final-mascot-lottie {
    width: 40px !important;
    height: 40px !important;
  }

  .app-current-mascot-line span {
    font-size: 0.86rem !important;
  }

  .app-hero-score-ring {
    width: 58px !important;
    height: 58px !important;
  }

  .app-hero-score-ring .app-symbol-icon {
    width: 12px !important;
    height: 12px !important;
    margin-top: 12px !important;
  }

  .app-hero-score-ring strong {
    margin-bottom: 10px !important;
    font-size: 1.1rem !important;
  }

  .top-picks-parent-icon {
    width: 60px !important;
    height: 60px !important;
  }

  .top-picks-parent-icon img {
    width: 50px !important;
    height: 50px !important;
  }

  .product-rail {
    grid-auto-columns: 142px !important;
  }

  .ranking-score-circle,
  .rail-score-pair .app-score-ring,
  .product-card .app-score-ring {
    width: 42px !important;
    height: 42px !important;
  }

  .ranking-score-circle strong,
  .rail-score-pair .app-score-ring strong,
  .product-card .app-score-ring strong {
    font-size: 0.82rem !important;
  }
}

/* SEO best-page editorial layer */
.best-archive-hero {
  padding-top: clamp(52px, 7vw, 96px);
  padding-bottom: 18px;
}

.best-archive-hero h1 {
  max-width: 930px;
}

.best-archive-hero > p:not(.eyebrow) {
  max-width: 760px;
  margin-bottom: 28px;
}

.best-intent-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.best-intent-row a,
.best-related-grid a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(36, 154, 96, 0.18);
  background: #ffffff;
  color: var(--green);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 14px 38px rgba(25, 42, 31, 0.05);
}

.best-intent-row a {
  padding: 0 17px;
  font-size: 0.72rem;
}

.best-leader-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding-top: 20px;
  padding-bottom: 26px;
}

.best-leader-card {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 190px;
  overflow: hidden;
  border-radius: 34px;
  border: 1px solid rgba(18, 24, 20, 0.08);
  background: #ffffff;
  padding: 26px 96px 26px 26px;
  box-shadow: 0 28px 80px rgba(24, 44, 32, 0.07);
}

.best-leader-card::after {
  content: '';
  position: absolute;
  inset: auto -26px -46px auto;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(36, 154, 96, 0.13), rgba(36, 154, 96, 0));
  pointer-events: none;
}

.best-leader-card span {
  color: var(--green);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.best-leader-card strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--ink);
  font-size: clamp(1.42rem, 2vw, 2rem);
  line-height: 1;
  letter-spacing: -0.055em;
}

.best-leader-card small {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.best-leader-card em {
  position: absolute;
  right: 24px;
  bottom: 20px;
  color: var(--green);
  font-family: var(--serif);
  font-size: 4.3rem;
  font-style: normal;
  line-height: 0.9;
  letter-spacing: -0.1em;
}

.best-related-rankings {
  padding-top: 18px;
  padding-bottom: 22px;
}

.best-related-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.best-related-grid a {
  min-height: 48px;
  padding: 0 22px;
  font-size: 0.84rem;
}

.seo-link-panel {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

@media (max-width: 900px) {
  .best-leader-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .best-archive-hero {
    width: calc(100% - 34px);
    padding-top: 38px;
  }

  .best-archive-hero h1 {
    font-size: clamp(3.35rem, 14vw, 4.4rem);
    line-height: 0.86;
  }

  .best-archive-hero > p:not(.eyebrow) {
    font-size: 1.08rem;
    line-height: 1.4;
  }

  .best-intent-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
  }

  .best-intent-row::-webkit-scrollbar {
    display: none;
  }

  .best-intent-row a {
    flex: 0 0 auto;
  }

  .best-leader-card {
    min-height: 156px;
    padding: 22px 84px 22px 22px;
  }

  .best-leader-card em {
    right: 20px;
    bottom: 18px;
    font-size: 3.5rem;
  }
}

/* Launch waitlist mascot toast */
.waitlist-mascot-toast {
  position: fixed;
  z-index: 80;
  top: max(112px, calc(env(safe-area-inset-top) + 92px));
  left: 50%;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  width: min(560px, calc(100vw - 28px));
  transform: translateX(-50%);
  pointer-events: none;
  animation: mascotToastIn 720ms cubic-bezier(0.16, 1, 0.3, 1) both, mascotToastOut 760ms cubic-bezier(0.65, 0, 0.35, 1) 6.05s forwards;
}

.waitlist-mascot-orb {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1px solid rgba(18, 24, 20, 0.06);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 20px 52px rgba(18, 24, 20, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(22px) saturate(1.18);
  -webkit-backdrop-filter: blur(22px) saturate(1.18);
  animation: mascotFloat 3.2s ease-in-out infinite;
}

.waitlist-mascot-copy {
  position: relative;
  display: grid;
  gap: 5px;
  min-height: 64px;
  margin-left: -10px;
  padding: 13px 24px 13px 30px;
  border-radius: 28px;
  border: 1px solid rgba(18, 24, 20, 0.06);
  color: var(--ink);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.72));
  box-shadow: 0 22px 62px rgba(18, 24, 20, 0.1), 0 0 0 9px rgba(36, 154, 96, 0.045);
  backdrop-filter: blur(24px) saturate(1.16);
  -webkit-backdrop-filter: blur(24px) saturate(1.16);
  pointer-events: auto;
  overflow: hidden;
}

.waitlist-mascot-copy::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.82) 42%, transparent 72%);
  transform: translateX(-120%);
  animation: glassSweep 2.4s ease 740ms both;
  pointer-events: none;
}

.waitlist-mascot-copy::after {
  content: '';
  position: absolute;
  left: -9px;
  top: 25px;
  width: 18px;
  height: 18px;
  border-radius: 5px 0 0 0;
  background: rgba(255, 255, 255, 0.84);
  transform: rotate(45deg);
  box-shadow: -1px -1px 0 rgba(18, 24, 20, 0.04);
}

.waitlist-mascot-copy span {
  position: relative;
  z-index: 1;
  color: var(--green);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.waitlist-mascot-copy strong {
  position: relative;
  z-index: 1;
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(0.95rem, 2.4vw, 1.16rem);
  font-weight: 850;
  line-height: 1.12;
  letter-spacing: -0.04em;
}

.waitlist-mascot-lottie {
  width: 68px;
  height: 68px;
}

.waitlist-mascot-lottie .mascot-lottie-player {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

@keyframes mascotToastIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -22px) scale(0.96);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes mascotToastOut {
  0% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -18px) scale(0.985);
    filter: blur(8px);
  }
}

@keyframes mascotFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-5px) rotate(1.5deg); }
}

@keyframes glassSweep {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(130%); }
}

@media (max-width: 760px) {
  .waitlist-mascot-toast {
    top: max(88px, calc(env(safe-area-inset-top) + 66px));
    grid-template-columns: 58px minmax(0, 1fr);
    width: calc(100vw - 22px);
  }

  .waitlist-mascot-orb {
    width: 62px;
    height: 62px;
  }

  .waitlist-mascot-lottie {
    width: 56px;
    height: 56px;
  }

  .waitlist-mascot-copy {
    min-height: 56px;
    padding: 11px 16px 11px 24px;
    border-radius: 24px;
  }

  .waitlist-mascot-copy strong {
    font-size: 0.94rem;
  }
}

/* Final mobile product-card rhythm: clean two-line title, brand below, scores aligned. */
@media (max-width: 760px) {
  .product-rail {
    align-items: start !important;
  }

  .rail-card,
  .product-card {
    display: grid !important;
    grid-template-rows: 132px 2.62em 1.28em 58px !important;
    row-gap: 8px !important;
    align-items: start !important;
    overflow: visible !important;
  }

  .product-card-copy {
    display: grid !important;
    grid-template-rows: 2.62em 1.28em 58px !important;
    row-gap: 8px !important;
    align-items: start !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .rail-card h4,
  .product-card-copy h3,
  .product-card h3 {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    min-height: 2.62em !important;
    max-height: 2.62em !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: var(--ink) !important;
    font-size: 1.02rem !important;
    font-weight: 850 !important;
    line-height: 1.18 !important;
    letter-spacing: -0.04em !important;
  }

  .rail-card p,
  .product-card-copy > span {
    display: block !important;
    min-height: 1.28em !important;
    max-height: 1.28em !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #969895 !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    line-height: 1.28 !important;
    letter-spacing: -0.025em !important;
  }

  .rail-score-pair,
  .app-score-pair {
    display: flex !important;
    flex-flow: row nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 58px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .rail-score-pair .app-score-ring,
  .product-card .app-score-ring,
  .app-score-pair .app-score-ring {
    flex: 0 0 54px !important;
    width: 54px !important;
    height: 54px !important;
  }
}

/* Final mobile polish: remove header artifacts, tighten hero, and stop category collisions. */
@media (max-width: 760px) {
  html,
  body,
  main,
  .home-hero,
  .home-hero-search-first,
  .section-shell {
    background: #ffffff !important;
  }

  body::before,
  .home-hero::before,
  .home-hero::after,
  .home-hero-search-first::before,
  .home-hero-search-first::after,
  .site-header::before,
  .site-header::after {
    display: none !important;
    content: none !important;
  }

  .site-header {
    position: relative !important;
    width: calc(100% - 34px) !important;
    min-height: 92px !important;
    margin: 0 auto !important;
    padding: 18px 0 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .site-header nav {
    background: transparent !important;
    box-shadow: none !important;
  }

  .brand-link {
    width: 144px !important;
    height: 48px !important;
  }

  .nav-cta {
    min-height: 46px !important;
    padding: 0 17px !important;
    border: 0 !important;
    background: #050706 !important;
    background-image: linear-gradient(135deg, #151816, #050706) !important;
    box-shadow: none !important;
    outline: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .home-hero-search-first {
    width: 100% !important;
    margin: 0 !important;
    padding: 44px 18px 14px !important;
  }

  .home-hero-search-first .home-hero-copy {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .home-hero-search-first .eyebrow {
    margin-bottom: 16px !important;
  }

  .home-hero-search-first h1 {
    width: calc(100vw - 30px) !important;
    max-width: none !important;
    margin: 0 0 22px !important;
    font-size: clamp(3.85rem, 15.8vw, 4.55rem) !important;
    line-height: 0.88 !important;
    letter-spacing: -0.078em !important;
  }

  .hero-selling-copy {
    max-width: none !important;
    margin-bottom: 28px !important;
    font-size: 1.2rem !important;
    line-height: 1.28 !important;
  }

  .home-hero-search-first .product-search {
    grid-template-columns: 32px minmax(0, 1fr) 60px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 9px !important;
    gap: 8px !important;
    border-radius: 36px !important;
  }

  .home-hero-search-first .product-search input {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 1.02rem !important;
  }

  .home-hero-search-first .product-search button {
    position: relative !important;
    grid-column: auto !important;
    width: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    color: transparent !important;
    font-size: 0 !important;
    overflow: hidden !important;
  }

  .home-hero-search-first .product-search button::after {
    content: '→' !important;
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    color: #ffffff !important;
    font-size: 2rem !important;
    line-height: 1 !important;
  }

  .home-hero-search-first .top-picks-web-header {
    margin: 26px 0 18px !important;
    padding: 0 !important;
  }

  .home-hero-search-first .top-picks-parent-row {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 24px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 0 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity !important;
  }

  .home-hero-search-first .top-picks-parent {
    flex: 0 0 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    scroll-snap-align: start !important;
  }

  .home-hero-search-first .top-picks-parent-icon {
    width: 62px !important;
    height: 62px !important;
  }

  .home-hero-search-first .top-picks-parent-icon img {
    max-width: 44px !important;
    max-height: 44px !important;
  }

  .home-hero-search-first .top-picks-parent strong {
    display: block !important;
    width: 86px !important;
    margin-left: -5px !important;
    font-size: 0.78rem !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .category-rails {
    width: 100% !important;
    margin-top: 0 !important;
    padding: 4px 18px 20px !important;
  }

  .category-rails .product-rail-block:first-of-type {
    margin-top: 0 !important;
  }

  .rail-heading {
    margin-bottom: 12px !important;
  }

  .rail-heading h3 {
    font-size: clamp(3rem, 14vw, 4rem) !important;
  }
}

@font-face {
  font-family: 'ReviewsPacifico';
  src: url('/fonts/Pacifico-Regular.ttf') format('truetype');
  font-display: swap;
}

:root {
  --ink: #111312;
  --soft-ink: #2c302e;
  --muted: #8b8d8a;
  --paper: #ffffff;
  --glass: rgba(255, 255, 255, 0.78);
  --line: rgba(18, 24, 20, 0.08);
  --green: #249a60;
  --leaf: #69b756;
  --glow: rgba(36, 154, 96, 0.16);
  --glow-strong: rgba(36, 154, 96, 0.24);
  --serif: ui-serif, 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans: 'Avenir Next', Avenir, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}

* { box-sizing: border-box; }

html {
  background: #ffffff;
  color: var(--ink);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sans);
  background: #ffffff;
}

body::before {
  display: none;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1120px, calc(100% - 38px));
  margin: 0 auto;
  padding: 22px 0 12px;
  backdrop-filter: blur(22px);
}

.brand-link {
  display: inline-flex;
  align-items: center;
  width: clamp(158px, 18vw, 238px);
  height: clamp(42px, 5vw, 62px);
  overflow: hidden;
}

.brand-logo {
  width: 100%;
  height: auto;
  transform: scale(1.04);
  filter: contrast(1.08) saturate(0.92);
  mix-blend-mode: multiply;
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: 18px;
  color: #7f827f;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.nav-cta,
.button-primary,
.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: 999px;
  padding: 0 19px;
  border: 1px solid var(--line);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.nav-cta,
.button-primary {
  color: #fff;
  background: linear-gradient(135deg, #151816, #050706);
  box-shadow: 0 22px 42px rgba(13, 15, 14, 0.18);
}

.button-secondary {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 18px 46px rgba(22, 37, 28, 0.08);
}

.hero-stage,
.section-shell,
.manifesto-card,
.archive-hero,
.product-hero {
  width: min(1120px, calc(100% - 38px));
  margin: 0 auto;
}

.hero-stage {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(28px, 5vw, 68px);
  align-items: center;
  padding: clamp(42px, 7vw, 86px) 0 36px;
}

.hero-browse-logo {
  width: clamp(120px, 17vw, 210px);
  height: clamp(44px, 6vw, 72px);
  object-fit: cover;
  object-position: center;
  margin: 0 0 18px -12px;
  filter: contrast(1.15) saturate(0.72);
  mix-blend-mode: multiply;
}

.eyebrow,
.card-kicker {
  margin: 0 0 14px;
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }

h1,
h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.072em;
  color: var(--ink);
}

h1 {
  max-width: 690px;
  margin-bottom: 24px;
  font-size: clamp(4.35rem, 8.4vw, 8.25rem);
  line-height: 0.82;
}

h2 {
  margin-bottom: 18px;
  font-size: clamp(2.75rem, 5vw, 5.25rem);
  line-height: 0.9;
}

.hero-subtitle,
.section-heading p,
.manifesto-card p,
.archive-hero p,
.product-body p,
.product-verdict {
  color: var(--muted);
  font-size: clamp(1.08rem, 1.6vw, 1.34rem);
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 30px;
  font-weight: 700;
}

.hero-device {
  position: relative;
  padding: clamp(18px, 3vw, 34px);
  border-radius: 54px;
  background: rgba(255, 255, 255, 0.48);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.88), 0 42px 120px rgba(34, 55, 42, 0.12);
}

.hero-device::before {
  content: '';
  position: absolute;
  inset: 18px;
  z-index: -1;
  border-radius: 48px;
  background: radial-gradient(circle at 50% 12%, var(--glow-strong), transparent 58%);
  filter: blur(24px);
}

.mascot-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}

.mascot-bubble {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 18px 48px rgba(29, 52, 39, 0.1);
}

.mascot-bubble img {
  width: 118%;
  height: 118%;
  object-fit: cover;
  filter: contrast(1.08) saturate(0.9);
}

.speech-bubble {
  position: relative;
  padding: 16px 20px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--soft-ink);
  font-weight: 700;
  letter-spacing: -0.025em;
  box-shadow: 0 18px 50px rgba(26, 40, 31, 0.08);
}

.speech-bubble::before {
  content: '';
  position: absolute;
  left: -9px;
  top: 26px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 12px solid rgba(255, 255, 255, 0.72);
}

.spotlight-product,
.manifesto-card,
.fact-card,
.product-art-panel {
  border: 1px solid rgba(36, 154, 96, 0.12);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 30px 90px rgba(22, 37, 28, 0.09), 0 0 0 12px rgba(36, 154, 96, 0.08);
  backdrop-filter: blur(24px);
}

.spotlight-product {
  overflow: hidden;
  border-radius: 42px;
  padding: clamp(26px, 4vw, 42px);
}

.spotlight-image {
  display: grid;
  place-items: center;
  min-height: 250px;
  margin: -4px 0 18px;
}

.spotlight-image img {
  width: min(58%, 280px);
  filter: drop-shadow(0 34px 42px rgba(18, 24, 20, 0.15));
}

.spotlight-product h2 {
  font-size: clamp(2.7rem, 5vw, 4.8rem);
}

.spotlight-product > p:not(.eyebrow) {
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.45;
}

.score-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.score-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 13px;
  border-radius: 28px;
  border: 1px solid rgba(18, 24, 20, 0.08);
  background: rgba(255, 255, 255, 0.82);
}

.score-ring {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: conic-gradient(var(--green) calc(var(--score) * 1%), rgba(36, 154, 96, 0.12) 0);
}

.score-ring::before {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: #fff;
}

.score-ring span {
  position: relative;
  z-index: 1;
  font-family: var(--serif);
  font-size: 1.68rem;
  letter-spacing: -0.08em;
}

.score-badge-health .score-ring {
  background: conic-gradient(var(--leaf) calc(var(--score) * 1%), rgba(105, 183, 86, 0.12) 0);
}

.score-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.score-copy strong {
  display: block;
  margin-top: 5px;
  color: var(--soft-ink);
  font-size: 0.98rem;
}

.signal-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  width: min(1120px, calc(100% - 38px));
  margin: 18px auto 72px;
}

.signal-strip div {
  padding: 23px 24px;
  border-radius: 30px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 20px 52px rgba(20, 36, 27, 0.06);
}

.signal-strip strong {
  display: block;
  font-family: var(--serif);
  font-size: 3rem;
  line-height: 0.95;
  letter-spacing: -0.08em;
}

.signal-strip span {
  color: var(--muted);
  font-weight: 850;
}

.section-shell { padding: 36px 0; }
.section-heading { max-width: 750px; margin-bottom: 32px; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 30px);
}

.product-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 10px 22px;
  border-radius: 34px;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(18, 24, 20, 0.055);
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.product-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 24px 70px rgba(26, 43, 32, 0.1);
}

.product-float-zone {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 270px;
  margin-bottom: 12px;
}

.product-float-zone img {
  width: min(66%, 230px);
  filter: drop-shadow(0 34px 36px rgba(18, 24, 20, 0.15));
}

.mini-score {
  position: absolute;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 1.28rem;
  letter-spacing: -0.08em;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(36, 154, 96, 0.14);
  box-shadow: 0 14px 34px rgba(25, 42, 31, 0.1);
}

.mini-score-reviews { right: 22px; top: 24px; color: var(--green); }
.mini-score-health { left: 24px; bottom: 22px; color: var(--leaf); }

.product-card-copy { padding: 0 12px; }
.product-card-copy span, .product-brand { color: var(--muted); font-weight: 820; }

.product-card h3 {
  margin: 7px 0 9px;
  color: var(--ink);
  font-size: 1.46rem;
  line-height: 1.06;
  letter-spacing: -0.05em;
}

.product-card p { margin-bottom: 0; color: var(--muted); line-height: 1.43; }

.manifesto-card {
  border-radius: 48px;
  margin-top: 48px;
  margin-bottom: 70px;
  padding: clamp(36px, 7vw, 78px);
}

.archive-hero,
.product-hero { padding: 58px 0 26px; }
.archive-hero h1 { max-width: 860px; }

.breadcrumb { margin-bottom: 24px; color: var(--muted); font-weight: 800; }

.product-layout {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 40px;
  align-items: center;
}

.product-art-panel {
  display: grid;
  place-items: center;
  min-height: 520px;
  border-radius: 46px;
}

.product-art-panel img {
  width: min(68%, 350px);
  filter: drop-shadow(0 40px 50px rgba(14, 16, 15, 0.16));
}

.product-story h1 { font-size: clamp(3.6rem, 7vw, 7rem); }
.score-grid-large .score-badge { padding: 18px; }

.product-body {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 34px;
  align-items: start;
}

.fact-card { border-radius: 32px; padding: 28px; }

.fact-card h3 {
  margin-bottom: 16px;
  font-family: var(--serif);
  font-size: 2rem;
  letter-spacing: -0.05em;
}

.fact-card li { margin: 12px 0; color: var(--muted); font-weight: 800; }
.compact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .site-header { width: min(100% - 28px, 1120px); }
  .brand-link { width: 154px; height: 42px; }
  .site-header nav { gap: 10px; font-size: 0.78rem; }
  .site-header nav a:not(.nav-cta) { display: none; }
  .hero-stage,
  .product-layout,
  .product-body { grid-template-columns: 1fr; }
  .hero-stage { padding-top: 34px; }
  .hero-copy { order: 1; }
  .hero-device { order: 2; border-radius: 36px; }
  .product-grid,
  .signal-strip,
  .score-grid,
  .compact-grid { grid-template-columns: 1fr; }
  .product-art-panel { min-height: 360px; }
  .mascot-row { grid-template-columns: 58px 1fr; }
  .mascot-bubble { width: 58px; height: 58px; }
  .hero-browse-logo { width: 136px; height: 48px; margin-left: -8px; }
}

.data-status {
  max-width: 620px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.data-status-firebase {
  color: var(--green);
}

.data-status-fallback {
  color: #a56f22;
}

.product-card h3,
.product-card p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card h3 {
  -webkit-line-clamp: 2;
}

.product-card p {
  -webkit-line-clamp: 3;
}

.spotlight-product h2 {
  overflow-wrap: anywhere;
}

.hero-browse-logo {
  display: none;
}

.spotlight-image img[src*="walmartimages"],
.spotlight-image img[src*="target.scene7"],
.spotlight-image img[src*="walgreens"],
.product-float-zone img[src*="walmartimages"],
.product-float-zone img[src*="target.scene7"],
.product-float-zone img[src*="walgreens"] {
  mix-blend-mode: multiply;
}

.empty-state {
  border: 1px solid rgba(32, 92, 60, 0.12);
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 22px 70px rgba(22, 78, 50, 0.08), inset 0 0 0 10px rgba(232, 246, 237, 0.65);
  color: var(--muted);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  line-height: 1.5;
  padding: 48px;
}

/* Launch access and score destination pass */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header nav { gap: clamp(12px, 2vw, 24px); }
.nav-cta { min-height: 48px; padding: 0 22px; }

.home-hero {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  width: min(1120px, calc(100% - 38px));
  margin: 0 auto;
  padding: clamp(48px, 8vw, 104px) 0 38px;
}

.home-hero-copy h1 {
  max-width: 760px;
  margin-bottom: 24px;
  font-size: clamp(4.15rem, 8.1vw, 8rem);
}

.hero-scoreboard {
  position: relative;
  border-radius: 54px;
  padding: clamp(18px, 3vw, 34px);
  background: rgba(255, 255, 255, 0.44);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.92), 0 40px 120px rgba(31, 53, 39, 0.12);
}

.hero-scoreboard::before {
  content: '';
  position: absolute;
  inset: 12px;
  z-index: -1;
  border-radius: 50px;
  background: radial-gradient(circle at 50% 4%, rgba(36, 154, 96, 0.24), transparent 58%);
  filter: blur(28px);
}

.scorecard-hero {
  display: block;
  overflow: hidden;
  border-radius: 42px;
  padding: clamp(26px, 4vw, 42px);
  border: 1px solid rgba(36, 154, 96, 0.12);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 30px 90px rgba(22, 37, 28, 0.09), 0 0 0 12px rgba(36, 154, 96, 0.07);
}

.scorecard-hero-art {
  display: grid;
  place-items: center;
  min-height: 260px;
  margin-bottom: 10px;
  background: #fff;
}

.scorecard-hero-art img {
  width: min(58%, 290px);
  filter: drop-shadow(0 34px 42px rgba(18, 24, 20, 0.14));
}

.scorecard-hero h2 { font-size: clamp(2.65rem, 5vw, 4.75rem); }
.scorecard-hero > p:not(.eyebrow) { color: var(--muted); font-size: 1.08rem; line-height: 1.45; }

.waitlist-card {
  display: grid;
  gap: 18px;
  border-radius: 42px;
  padding: clamp(26px, 4vw, 42px);
  border: 1px solid rgba(36, 154, 96, 0.13);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 28px 90px rgba(25, 44, 32, 0.09), 0 0 0 12px rgba(36, 154, 96, 0.065);
}

.waitlist-card-compact {
  margin-top: 30px;
  padding: 24px;
  border-radius: 32px;
}

.waitlist-card h2 {
  margin-bottom: 10px;
  font-size: clamp(2.15rem, 4vw, 3.8rem);
}

.waitlist-card p:not(.eyebrow):not(.waitlist-message) {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.5;
}

.waitlist-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 7px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(18, 24, 20, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 14px 42px rgba(20, 32, 25, 0.07);
}

.waitlist-form input {
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0 18px;
  color: var(--ink);
  background: transparent;
  font: 800 1rem/1 var(--sans);
}

.waitlist-form input::placeholder { color: #b9bcb7; }

.waitlist-form button {
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  padding: 0 21px;
  color: #fff;
  background: linear-gradient(135deg, #151816, #050706);
  font: 850 0.95rem/1 var(--sans);
  cursor: pointer;
  box-shadow: 0 16px 32px rgba(12, 15, 13, 0.15);
}

.waitlist-form button:disabled { opacity: 0.62; cursor: wait; }
.waitlist-message { margin: -4px 0 0; font-weight: 800; }
.waitlist-message-success { color: var(--green); }
.waitlist-message-error { color: #b5473f; }

.score-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  width: min(1120px, calc(100% - 38px));
  margin: 18px auto 74px;
}

.score-strip div {
  padding: 24px;
  border-radius: 30px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 20px 52px rgba(20, 36, 27, 0.06);
}

.score-strip strong {
  display: block;
  font-family: var(--serif);
  font-size: 3.2rem;
  line-height: 0.94;
  letter-spacing: -0.08em;
}

.score-strip span { color: var(--muted); font-weight: 850; }

.split-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(260px, 0.7fr);
  gap: 24px;
  align-items: end;
  max-width: none;
}

.split-heading p:not(.eyebrow) { margin-bottom: 20px; }

.product-rail-block {
  margin: 28px 0 42px;
  padding-top: 4px;
}

.rail-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.rail-heading h3 {
  margin: -6px 0 15px;
  font-family: var(--serif);
  font-size: clamp(2.5rem, 4.5vw, 4.65rem);
  font-weight: 400;
  letter-spacing: -0.07em;
  line-height: 0.92;
}

.rail-heading a,
.rank-list-title a {
  margin-bottom: 20px;
  color: #147df5;
  font-weight: 900;
  letter-spacing: -0.025em;
}

.product-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(190px, 22vw, 260px);
  gap: 24px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: 4px 0 18px;
  scrollbar-width: none;
}

.product-rail::-webkit-scrollbar { display: none; }

.rail-card {
  scroll-snap-align: start;
  display: grid;
  grid-template-rows: 230px auto auto auto;
  min-width: 0;
}

.rail-art {
  display: grid;
  place-items: center;
  background: #fff;
}

.rail-art img {
  max-width: 78%;
  max-height: 210px;
  object-fit: contain;
  filter: drop-shadow(0 24px 28px rgba(19, 24, 21, 0.13));
}

.rail-scores {
  display: flex;
  gap: 9px;
  margin: 12px 0 8px;
  font-weight: 900;
  font-size: 1.05rem;
}

.rail-scores span,
.rank-score,
.feature-score-row span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border-radius: 999px;
  padding: 0 11px;
  border: 1px solid rgba(18, 24, 20, 0.07);
  background: rgba(255, 255, 255, 0.88);
}

.score-great { color: var(--green); }
.score-good { color: #57ad4e; }
.score-watch { color: #d49324; }
.score-low { color: #bd5148; }

.rail-card h4 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 1.34rem;
  line-height: 1.06;
  letter-spacing: -0.055em;
}

.rail-card p { margin: 0; color: var(--muted); font-weight: 780; }

.trending-board { padding-top: 54px; }

.trending-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(310px, 0.75fr);
  gap: 30px;
  align-items: stretch;
}

.trending-lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 36px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 24px 78px rgba(26, 43, 32, 0.07);
}

.rank-list { padding: 26px; }
.rank-list + .rank-list { border-left: 1px solid var(--line); }

.rank-list-title {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}

.rank-list-title h3 {
  margin: 0;
  color: var(--soft-ink);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  letter-spacing: -0.04em;
}

.rank-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 66px;
  border-top: 1px solid var(--line);
}

.rank-number {
  font-family: var(--serif);
  font-size: 1.35rem;
  letter-spacing: -0.08em;
}

.rank-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--soft-ink);
  font-weight: 780;
  letter-spacing: -0.03em;
}

.rank-score {
  min-width: 48px;
  font-weight: 950;
}

.trending-feature {
  display: grid;
  align-content: end;
  min-height: 100%;
  border-radius: 38px;
  padding: 30px;
  overflow: hidden;
  border: 1px solid rgba(36, 154, 96, 0.12);
  background: radial-gradient(circle at 50% 8%, #fff 0 34%, rgba(238, 249, 242, 0.92) 35%, rgba(255, 255, 255, 0.92) 100%);
  box-shadow: 0 26px 90px rgba(24, 42, 30, 0.09), 0 0 0 12px rgba(36, 154, 96, 0.06);
}

.trending-feature img {
  justify-self: center;
  width: min(72%, 260px);
  max-height: 320px;
  object-fit: contain;
  margin: 6px 0 28px;
  filter: drop-shadow(0 34px 42px rgba(18, 24, 20, 0.14));
}

.feature-kicker {
  color: var(--green);
  font-weight: 950;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.trending-feature h3 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: clamp(2.35rem, 4vw, 4.2rem);
  font-weight: 400;
  letter-spacing: -0.075em;
  line-height: 0.96;
}

.trending-feature p { margin: 0 0 18px; color: var(--muted); font-weight: 850; }
.feature-score-row { display: flex; flex-wrap: wrap; gap: 10px; font-weight: 950; }

.product-card { background: rgba(255, 255, 255, 0.64); }
.product-float-zone { background: #fff; border-radius: 28px; }
.product-float-zone img { object-fit: contain; max-height: 238px; }

.seo-manifesto p:not(.eyebrow) { max-width: 850px; }
.final-waitlist { padding-bottom: 84px; }

@media (max-width: 860px) {
  .site-header {
    width: min(100% - 28px, 1120px);
    align-items: flex-start;
    gap: 12px;
  }

  .brand-link { width: 150px; height: 48px; }
  .site-header nav { gap: 12px; font-size: 0.78rem; overflow-x: auto; padding-bottom: 4px; }
  .site-header nav a:not(.nav-cta) { display: none; }
  .nav-cta { min-height: 42px; padding: 0 16px; white-space: nowrap; }

  .home-hero,
  .trending-layout,
  .split-heading,
  .product-body {
    grid-template-columns: 1fr;
  }

  .home-hero { padding-top: 38px; }
  .home-hero-copy h1 { font-size: clamp(3.8rem, 18vw, 5.6rem); }
  .score-strip { grid-template-columns: 1fr; margin-bottom: 42px; }
  .waitlist-form { grid-template-columns: 1fr; border-radius: 26px; }
  .waitlist-form input { min-height: 48px; }
  .product-rail { grid-auto-columns: 210px; gap: 18px; }
  .rail-card { grid-template-rows: 205px auto auto auto; }
  .rail-art img { max-height: 188px; }
  .trending-lists { grid-template-columns: 1fr; }
  .rank-list + .rank-list { border-left: 0; border-top: 1px solid var(--line); }
  .product-grid { grid-template-columns: 1fr; }
}

.product-card { background: rgba(255, 255, 255, 0.72); }
.product-float-zone { background: transparent; border-radius: 0; }

/* App-matched product cards */
.score-strip div:last-child strong {
  font-family: var(--sans);
  font-size: clamp(2.3rem, 4vw, 3.1rem);
  font-weight: 900;
  letter-spacing: -0.05em;
}

.product-card {
  align-items: center;
  padding: 0 0 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.product-card:hover {
  background: transparent;
  box-shadow: none;
}

.product-float-zone {
  width: 100%;
  min-height: 260px;
  margin-bottom: 12px;
  background: #fff;
}

.product-float-zone img {
  width: min(68%, 225px);
  max-height: 232px;
  object-fit: contain;
  filter: drop-shadow(0 30px 28px rgba(18, 24, 20, 0.11));
}

.product-rank-bubble {
  position: absolute;
  left: 12%;
  top: 7%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(18, 24, 20, 0.055);
  box-shadow: 0 12px 28px rgba(18, 24, 20, 0.08);
  font-family: var(--serif);
  font-size: 1.62rem;
  line-height: 1;
  letter-spacing: -0.08em;
}

.product-card-copy {
  display: grid;
  justify-items: center;
  width: 100%;
  padding: 0 8px;
  text-align: center;
}

.product-card-copy h3 {
  max-width: 92%;
  margin: 0 auto 9px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1.18rem, 2.3vw, 1.56rem);
  font-weight: 900;
  line-height: 1.07;
  letter-spacing: -0.045em;
}

.product-card-copy span,
.rail-card p {
  color: #949794;
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -0.025em;
}

.app-score-pair {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 13px;
}

.app-score-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: conic-gradient(var(--green) calc(var(--score) * 1%), rgba(36, 154, 96, 0.13) 0);
}

.app-score-ring::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #fff;
}

.app-score-ring span,
.app-score-ring strong {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
}

.app-score-ring span {
  align-self: start;
  margin-top: 14px;
  color: var(--green);
  font-size: 0.72rem;
  line-height: 1;
}

.app-score-ring strong {
  align-self: end;
  margin-bottom: 12px;
  color: var(--green);
  font-family: var(--serif);
  font-size: 1.24rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.08em;
}

.app-score-ring-health {
  background: conic-gradient(var(--leaf) calc(var(--score) * 1%), rgba(105, 183, 86, 0.13) 0);
}

.app-score-ring-health span,
.app-score-ring-health strong {
  color: var(--leaf);
}

.rail-card {
  grid-template-rows: 245px auto auto auto;
  text-align: center;
}

.rail-art {
  position: relative;
  background: #fff;
}

.rail-art .product-rank-bubble {
  left: 6%;
  top: 2%;
  width: 52px;
  height: 52px;
  font-size: 1.45rem;
}

.rail-art img {
  max-width: 74%;
  max-height: 218px;
}

.rail-score-pair {
  margin: 10px 0 12px;
}

.rail-card h4 {
  margin: 0 auto 9px;
  max-width: 92%;
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1.1rem, 2vw, 1.42rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

@media (max-width: 860px) {
  .product-float-zone { min-height: 230px; }
  .product-rank-bubble { width: 52px; height: 52px; font-size: 1.45rem; }
  .app-score-ring { width: 58px; height: 58px; }
}

/* Remove childish rounded web font: app-matched typography reset */
:root {
  --sans: Avenir, 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body,
button,
input,
.site-header nav,
.nav-cta,
.button-primary,
.button-secondary,
.waitlist-form input,
.waitlist-form button,
.product-card-copy h3,
.rail-card h4,
.rank-name,
.rank-list-title h3,
.score-strip span,
.product-card-copy span,
.rail-card p {
  font-family: var(--sans) !important;
}

.site-header nav,
.nav-cta,
.button-primary,
.button-secondary,
.waitlist-form button,
.score-strip span,
.product-card-copy h3,
.rail-card h4,
.rank-name,
.rank-list-title h3 {
  font-weight: 700 !important;
}

.waitlist-form input {
  font-weight: 500 !important;
}

/* App-matched Top Picks header */
.top-picks-web-header {
  display: grid;
  gap: 26px;
  margin: 0 0 28px;
}

.top-picks-wordmark {
  width: clamp(230px, 22vw, 330px);
  height: clamp(54px, 6vw, 74px);
  object-fit: cover;
  object-position: center;
  transform: scale(1.18);
  transform-origin: left center;
  filter: contrast(1.1);
  mix-blend-mode: multiply;
}

.top-picks-parent-row {
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, 4vw, 58px);
  overflow-x: auto;
  padding: 4px 0 10px;
  scrollbar-width: none;
}

.top-picks-parent-row::-webkit-scrollbar { display: none; }

.top-picks-parent {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 92px;
  color: #999c99;
}

.top-picks-parent-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
}

.top-picks-parent.is-active .top-picks-parent-icon {
  border: 3px solid rgba(93, 96, 105, 0.32);
  background: rgba(255, 255, 255, 0.72);
}

.top-picks-parent-icon img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.top-picks-parent strong {
  color: inherit;
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -0.025em;
}

.top-picks-parent.is-active strong {
  color: #6d7070;
  font-weight: 800;
}

/* Product detail: match the app breakdown language and structure */
.app-product-hero {
  padding-top: 34px;
}

.app-product-header {
  display: grid;
  justify-items: center;
  text-align: center;
  width: min(720px, 100%);
  margin: 0 auto;
}

.app-product-image {
  display: grid;
  place-items: center;
  width: min(320px, 72vw);
  height: min(300px, 64vw);
  margin-bottom: 16px;
  background: #fff;
}

.app-product-image img {
  max-width: 84%;
  max-height: 94%;
  object-fit: contain;
  filter: drop-shadow(0 30px 34px rgba(18, 24, 20, 0.12));
}

.app-product-brand {
  margin-bottom: 10px;
  color: #8f9290;
  font-size: 1.22rem;
  font-weight: 650;
  letter-spacing: -0.03em;
}

.app-product-header h1 {
  max-width: 700px;
  margin: 0 0 20px;
  font-family: var(--serif);
  font-size: clamp(3rem, 6.6vw, 6.4rem);
  line-height: 0.9;
  letter-spacing: -0.075em;
}

.app-product-score-pair {
  gap: 26px;
  margin: 2px 0 22px;
}

.app-product-score-pair .app-score-ring {
  width: 92px;
  height: 92px;
}

.app-product-score-pair .app-score-ring::before {
  inset: 7px;
}

.app-product-score-pair .app-score-ring span {
  margin-top: 20px;
  font-size: 0.92rem;
}

.app-product-score-pair .app-score-ring strong {
  margin-bottom: 18px;
  font-size: 1.88rem;
}

.app-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  padding: 8px 14px;
  border-radius: 999px;
  color: #7e827f;
  background: rgba(243, 244, 246, 0.9);
  font-size: 0.84rem;
  font-weight: 750;
}

.app-category-badge span {
  color: var(--ink);
}

.app-product-analysis {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding-top: 8px;
}

.app-analysis-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 3px;
  width: min(520px, 100%);
  padding: 3px;
  border-radius: 14px;
  background: #f2f3f2;
}

.app-analysis-toggle span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 42px;
  border-radius: 11px;
  color: #8c8f8d;
  font-weight: 800;
}

.app-analysis-toggle .is-selected {
  color: var(--ink);
  background: #fff;
  box-shadow: 0 3px 8px rgba(18, 24, 20, 0.06);
}

.app-analysis-copy {
  width: min(720px, 100%);
  padding: 24px 26px;
  border-radius: 18px;
  background: rgba(244, 245, 244, 0.58);
}

.app-analysis-copy h2 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.06em;
}

.app-analysis-copy p {
  margin: 0;
  color: #898d8a;
  font-size: 1.05rem;
  line-height: 1.58;
}

.app-breakdown-section {
  width: min(720px, calc(100% - 38px));
  padding-top: 18px;
}

.app-breakdown-section h2 {
  margin-bottom: 18px;
  font-family: var(--sans);
  font-size: 1.22rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.app-breakdown-list {
  overflow: hidden;
  border-radius: 18px;
  background: #f5f5f5;
}

.app-breakdown-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 66px;
  padding: 12px 16px;
  background: #fff;
}

.app-breakdown-item + .app-breakdown-item {
  border-top: 1px solid rgba(18, 24, 20, 0.065);
}

.app-breakdown-item .app-breakdown-row + .app-breakdown-row {
  border-top: 0 !important;
}

.app-breakdown-item.is-open .breakdown-chevron {
  transform: rotate(90deg);
}

.app-breakdown-detail {
  padding: 0 24px 20px 90px;
  background: #fff;
  animation: appCopyIn 220ms ease both;
}

.breakdown-sheet-hero {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.breakdown-sheet-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #969996;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.breakdown-sheet-kicker .breakdown-row-icon {
  width: 28px !important;
  height: 28px !important;
  font-size: 0.85rem;
}

.breakdown-sheet-hero h3 {
  margin: 0;
  color: #101211;
  font-size: clamp(1.65rem, 3.8vw, 2.2rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.04;
}

.breakdown-sheet-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 !important;
  font-size: 0.9rem !important;
  font-weight: 850 !important;
}

.breakdown-sheet-status span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.breakdown-sheet-stack {
  display: grid;
  gap: 12px;
}

.breakdown-sheet-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(18, 24, 20, 0.035);
}

.breakdown-sheet-card h4 {
  margin: 0;
  color: #101211;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0;
}

.breakdown-sheet-card > p,
.breakdown-status-card p {
  margin: 0 !important;
  color: #777b78 !important;
  font-size: 0.98rem !important;
  font-weight: 650 !important;
  line-height: 1.45 !important;
}

.breakdown-score-card {
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

.breakdown-score-mini {
  position: relative;
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: conic-gradient(var(--green) calc(var(--score) * 1%), rgba(36, 154, 96, 0.13) 0);
}

.breakdown-score-mini::before {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: #fff;
}

.breakdown-score-mini strong,
.breakdown-score-mini span {
  position: relative;
  z-index: 1;
}

.breakdown-score-mini strong {
  align-self: center;
  color: var(--green);
  font-family: var(--serif);
  font-size: 1.78rem;
  font-weight: 400;
  line-height: 1;
}

.breakdown-score-mini span {
  align-self: end;
  margin-bottom: 14px;
  color: #9ea29f;
  font-size: 0.62rem;
  font-weight: 800;
}

.breakdown-status-card {
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: start;
  background: rgba(36, 154, 96, 0.08);
}

.breakdown-status-dot {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--green);
}

.breakdown-status-dot::before {
  content: '';
  width: 9px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

.breakdown-detail-list {
  display: grid;
  gap: 0;
}

.breakdown-detail-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 11px 0;
  border-top: 1px solid rgba(18, 24, 20, 0.06);
}

.breakdown-detail-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.breakdown-detail-item:last-child {
  padding-bottom: 0;
}

.breakdown-detail-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: currentColor;
  color: var(--green);
  font-size: 0.8rem;
  font-weight: 900;
}

.breakdown-detail-icon::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
}

.breakdown-detail-item .breakdown-detail-icon:not(:empty)::before {
  display: none;
}

.breakdown-detail-item strong {
  display: block;
  color: #101211;
  font-size: 0.98rem;
  font-weight: 850;
  line-height: 1.2;
}

.breakdown-detail-item p {
  margin: 3px 0 0 !important;
  color: #858986 !important;
  font-size: 0.88rem !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
}

.breakdown-detail-item em,
.breakdown-detail-item small {
  align-self: center;
  border-radius: 999px;
  background: rgba(36, 154, 96, 0.1);
  color: var(--green);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
  padding: 4px 8px;
}

.breakdown-nutri-scale {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.breakdown-nutri-scale span {
  display: grid;
  place-items: center;
  min-height: 50px;
  border-radius: 10px;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 1000;
  opacity: 0.24;
}

.breakdown-nutri-scale .is-active {
  opacity: 1;
  outline: 2px solid #fff;
  transform: scale(1.05);
}

.nutri-grade-a { background: #038141; }
.nutri-grade-b { background: #85bb2f; }
.nutri-grade-c { background: #d49324; }
.nutri-grade-d { background: #ee8100; }
.nutri-grade-e { background: #df3d35; }

.detail-card-tone-danger .breakdown-detail-icon,
.detail-card-tone-danger.breakdown-status-card .breakdown-status-dot {
  color: #df3d35;
  background: #df3d35;
}

.detail-card-tone-warn .breakdown-detail-icon,
.detail-card-tone-warn.breakdown-status-card .breakdown-status-dot {
  color: #d49324;
  background: #d49324;
}

.detail-card-tone-info .breakdown-detail-icon,
.detail-card-tone-info.breakdown-status-card .breakdown-status-dot {
  color: #168cf3;
  background: #168cf3;
}

.detail-card-tone-neutral .breakdown-detail-icon,
.detail-card-tone-neutral.breakdown-status-card .breakdown-status-dot {
  color: #9da19e;
  background: #9da19e;
}

.app-breakdown-detail p {
  margin: 0 0 12px;
  color: #8f9290;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.5;
}

.app-breakdown-detail-lines {
  display: grid;
  gap: 10px;
}

.app-breakdown-detail-lines p {
  margin: 0;
  border-radius: 18px;
  background: rgba(18, 24, 20, 0.035);
  color: #8f9290;
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.45;
  padding: 12px 14px;
}

.app-breakdown-detail-lines strong {
  color: var(--ink);
}

.app-ingredients-only {
  display: block !important;
  width: min(820px, calc(100% - 34px)) !important;
  padding-top: 22px !important;
}

.app-ingredients-only .app-detail-card {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  background: #fff !important;
}

.app-breakdown-row + .app-breakdown-row {
  border-top: 1px solid rgba(18, 24, 20, 0.065);
}

.breakdown-row-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(36, 154, 96, 0.1);
  color: var(--green);
  font-weight: 900;
}

.app-breakdown-row strong {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: -0.025em;
}

.app-breakdown-row em {
  max-width: 180px;
  overflow: hidden;
  color: #8d908d;
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 800;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tone-reviews,
.tone-health,
.tone-good { color: var(--green) !important; }
.tone-warn { color: #d49324 !important; }
.tone-neutral { color: #8f9390 !important; }

.app-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: min(900px, calc(100% - 38px));
}

.app-detail-card {
  padding: 24px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(18, 24, 20, 0.07);
  box-shadow: 0 18px 50px rgba(20, 36, 27, 0.055);
}

.app-detail-card-wide {
  grid-column: 1 / -1;
}

.app-detail-card h3 {
  margin: 0 0 14px;
  font-size: 1.18rem;
  font-weight: 900;
  letter-spacing: -0.035em;
}

.driver-list {
  display: grid;
  gap: 12px;
}

.driver-list div {
  padding: 14px 0;
  border-top: 1px solid rgba(18, 24, 20, 0.065);
}

.driver-list div:first-child {
  border-top: 0;
  padding-top: 0;
}

.driver-list strong {
  display: block;
  color: var(--ink);
  font-weight: 850;
  letter-spacing: -0.02em;
}

.driver-list p {
  margin: 5px 0 0;
  color: #8b8e8b;
  line-height: 1.45;
}

.ingredient-cloud,
.label-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.ingredient-cloud span,
.label-chip-row span {
  padding: 8px 11px;
  border-radius: 999px;
  color: #5d625f;
  background: #f3f4f3;
  font-size: 0.88rem;
  font-weight: 750;
}

.label-chip-row {
  margin-top: 16px;
}

.muted-copy {
  color: #8b8e8b;
}

@media (max-width: 860px) {
  .top-picks-wordmark { width: 230px; height: 54px; margin-left: -8px; }
  .top-picks-parent-row { gap: 22px; }
  .top-picks-parent { min-width: 74px; }
  .top-picks-parent-icon { width: 62px; height: 62px; }
  .top-picks-parent-icon img { width: 50px; height: 50px; }
  .app-detail-grid { grid-template-columns: 1fr; }
  .app-product-score-pair .app-score-ring { width: 82px; height: 82px; }
  .app-breakdown-row { grid-template-columns: 34px minmax(0, 1fr); }
  .app-breakdown-row em {
    grid-column: 2;
    max-width: none;
    text-align: left;
  }
}

.nav-cta,
.waitlist-form button {
  letter-spacing: -0.02em !important;
}

.product-card-copy h3,
.rail-card h4 {
  font-size: clamp(1.08rem, 2vw, 1.42rem);
  font-weight: 700 !important;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.product-card-copy span,
.rail-card p {
  font-weight: 500 !important;
  color: #969895;
}

.score-strip span {
  font-size: 0.98rem;
  font-weight: 600 !important;
  color: #8e918d;
}

.waitlist-form input::placeholder {
  font-family: var(--sans);
  font-weight: 500;
  color: #b6bab5;
}

/* Reviews app homepage/web destination pass */
.home-hero-search-first {
  grid-template-columns: minmax(0, 0.94fr) minmax(360px, 1.06fr);
  padding-top: clamp(38px, 7vw, 86px);
}

.home-hero-search-first .home-hero-copy h1 {
  margin-bottom: 24px;
  max-width: 760px;
  font-size: clamp(4.6rem, 9vw, 8.6rem);
  line-height: 0.82;
}

.product-search-wrap {
  position: relative;
  z-index: 3;
  width: min(720px, 100%);
}

.product-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 70px;
  padding: 8px 9px 8px 22px;
  border-radius: 999px;
  border: 1px solid rgba(18, 24, 20, 0.08);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 28px 80px rgba(24, 43, 31, 0.08), 0 0 0 12px rgba(36, 154, 96, 0.055);
}

.product-search span {
  color: var(--green);
  font-family: var(--serif);
  font-size: 2.15rem;
  line-height: 1;
}

.product-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font: 800 clamp(1rem, 2vw, 1.2rem)/1 var(--sans);
  letter-spacing: -0.035em;
}

.product-search input::placeholder { color: #b8bbb6; }

.product-search button {
  min-height: 52px;
  border: 0;
  border-radius: 999px;
  padding: 0 24px;
  color: #fff;
  background: linear-gradient(135deg, #151816, #050706);
  font: 850 0.98rem/1 var(--sans);
  letter-spacing: -0.025em;
  cursor: pointer;
}

.search-suggestions {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  right: 0;
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 28px;
  border: 1px solid rgba(18, 24, 20, 0.08);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 28px 88px rgba(22, 37, 28, 0.14);
}

.search-suggestion-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 8px 12px;
  border-radius: 20px;
}

.search-suggestion-row:hover { background: rgba(239, 249, 243, 0.78); }
.search-suggestion-row img { width: 50px; height: 50px; object-fit: contain; mix-blend-mode: multiply; }
.search-suggestion-row strong, .search-suggestion-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-suggestion-row strong { color: var(--ink); font-weight: 850; letter-spacing: -0.035em; }
.search-suggestion-row small { color: var(--muted); font-weight: 760; }
.search-suggestion-row em { color: var(--green); font-style: normal; font-family: var(--serif); font-size: 1.65rem; letter-spacing: -0.08em; }

.category-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.category-chip-row a,
.label-chip-row span,
.ingredient-cloud span,
.ingredient-cloud a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  border-radius: 999px;
  padding: 0 15px;
  border: 1px solid rgba(36, 154, 96, 0.12);
  background: rgba(255, 255, 255, 0.84);
  color: var(--soft-ink);
  font-weight: 830;
  letter-spacing: -0.025em;
  box-shadow: 0 12px 30px rgba(24, 42, 30, 0.05);
}

.hero-poster-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 22px);
  align-items: stretch;
}

.hero-mini-card {
  position: relative;
  display: grid;
  grid-template-rows: 250px minmax(58px, auto) auto;
  align-content: start;
  gap: 10px;
  padding: 18px;
  border-radius: 34px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(18, 24, 20, 0.06);
  box-shadow: 0 28px 82px rgba(24, 42, 30, 0.08), 0 0 0 10px rgba(36, 154, 96, 0.045);
}

.hero-mini-card span,
.product-rank-bubble {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.55rem;
  letter-spacing: -0.08em;
  box-shadow: 0 12px 30px rgba(19, 25, 21, 0.08);
}

.hero-mini-card img {
  align-self: center;
  justify-self: center;
  max-width: 82%;
  max-height: 238px;
  object-fit: contain;
  filter: drop-shadow(0 28px 32px rgba(18, 24, 20, 0.14));
  mix-blend-mode: multiply;
}

.hero-mini-card strong {
  color: var(--ink);
  font-size: 1.16rem;
  line-height: 1.06;
  letter-spacing: -0.05em;
}

.hero-mini-card em {
  color: var(--green);
  font-family: var(--serif);
  font-size: 2rem;
  font-style: normal;
  letter-spacing: -0.08em;
}

.trending-stack-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.trending-stack-grid .rank-list {
  border: 1px solid var(--line);
  border-radius: 34px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 24px 78px rgba(26, 43, 32, 0.07);
}

.rail-card {
  grid-template-rows: 230px auto auto auto;
}

.rail-art,
.product-float-zone,
.scorecard-hero-art {
  background: #fff;
}

.rail-card h4,
.product-card h3 {
  font-family: var(--sans);
  font-weight: 850;
}

.product-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

.breakdown-card {
  border-radius: 34px;
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid rgba(36, 154, 96, 0.12);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 24px 76px rgba(22, 37, 28, 0.075), 0 0 0 10px rgba(36, 154, 96, 0.05);
}

.breakdown-card-wide { grid-column: 1 / -1; }
.breakdown-card h2 { margin-bottom: 18px; }
.breakdown-card h3 { margin: 0 0 18px; font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3.6rem); font-weight: 400; letter-spacing: -0.07em; line-height: 0.94; }
.breakdown-card p { color: var(--muted); font-size: 1.08rem; line-height: 1.55; }
.label-chip-row, .ingredient-cloud { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ingredient-cloud span { color: var(--green); }
.driver-list { display: grid; gap: 14px; }
.driver-list > div { padding-top: 14px; border-top: 1px solid var(--line); }
.driver-list strong { color: var(--ink); font-size: 1.08rem; letter-spacing: -0.035em; }
.driver-list p { margin: 6px 0 0; font-size: 0.98rem; }
.muted-copy { color: var(--muted); }

@media (max-width: 900px) {
  .home-hero-search-first,
  .hero-poster-strip,
  .trending-stack-grid,
  .product-breakdown-grid { grid-template-columns: 1fr; }
  .hero-poster-strip { display: flex; overflow-x: auto; padding-bottom: 14px; }
  .hero-mini-card { min-width: 220px; grid-template-rows: 210px auto auto; }
  .product-search { grid-template-columns: auto minmax(0, 1fr); border-radius: 30px; }
  .product-search button { grid-column: 1 / -1; }
}

/* Less explaining, more board */
.split-heading > p:empty { display: none; }
.split-heading:has(> p:empty) { grid-template-columns: 1fr; }
.section-heading.split-heading { margin-bottom: 18px; }
.home-hero-search-first .eyebrow { margin-bottom: 10px; }
.hero-mini-card { background: rgba(255, 255, 255, 0.9); }
.hero-mini-card img,
.rail-art img,
.product-float-zone img,
.product-art-panel img { mix-blend-mode: multiply; }

/* Product pages: product art should float on white, not inside a tinted web panel */
.product-art-panel {
  background: #fff;
  border-color: rgba(18, 24, 20, 0.055);
  box-shadow: 0 28px 78px rgba(22, 37, 28, 0.07);
}

.product-art-panel img {
  width: min(74%, 390px);
  background: transparent;
}

/* Top clean-up: no preview cards or stats above rankings */
.home-hero-search-first {
  grid-template-columns: 1fr;
  padding-bottom: 18px;
}

.home-hero-search-first .home-hero-copy {
  width: min(760px, 100%);
}

.home-hero-search-first .home-hero-copy h1 {
  max-width: 720px;
}

/* App-match polish: pure white shelf, full-width top glass, app-like rankings reveal. */
html,
body {
  background: #fff !important;
}

body::before {
  display: none !important;
}

.site-header {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding-left: clamp(26px, 5vw, 88px) !important;
  padding-right: clamp(26px, 5vw, 88px) !important;
  background:
    linear-gradient(90deg, rgba(220, 240, 228, 0.92), rgba(255, 255, 255, 0.78) 58%, rgba(255, 255, 255, 0.94) 100%) !important;
  box-shadow: 0 26px 80px rgba(47, 112, 82, 0.14) !important;
}

.home-hero,
.home-hero-search-first,
.archive-hero,
.category-rails,
.shelf-section,
.trending-board,
.final-waitlist {
  background-color: #fff !important;
}

.home-hero-search-first::before {
  right: calc(50% - 50vw) !important;
  width: 100vw !important;
}

.category-rails {
  width: min(1480px, calc(100% - 32px)) !important;
}

.top-picks-web-header {
  margin-left: 0 !important;
  overflow: hidden;
}

.top-picks-parent-row {
  justify-content: flex-start !important;
  gap: clamp(20px, 6vw, 112px) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 8px 2px 18px !important;
  scroll-snap-type: x proximity;
}

.top-picks-parent {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  flex: 0 0 auto;
  font: inherit;
  min-width: 118px;
  padding: 0;
  scroll-snap-align: start;
}

.top-picks-parent-icon {
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.top-picks-parent.is-active .top-picks-parent-icon {
  border-color: rgba(18, 24, 20, 0.24);
  box-shadow: 0 18px 46px rgba(18, 24, 20, 0.08);
  transform: translateY(-2px);
}

.top-picks-empty {
  margin: 22px 0 8px;
}

.ranking-section-reveal {
  animation: rankingRailIn 380ms ease both;
}

.rankings-see-more-wrap {
  display: flex;
  justify-content: center;
  padding: 22px 0 8px;
}

.rankings-see-more-button {
  border: 1px solid rgba(33, 148, 91, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 48px rgba(33, 148, 91, 0.16);
  color: var(--green);
  cursor: pointer;
  font: inherit;
  font-weight: 860;
  letter-spacing: 0.01em;
  padding: 16px 28px;
}

.app-score-ring-health span {
  font-size: 0.96em;
  transform: translateY(-1px);
}

.app-symbol-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  line-height: 1;
}

.app-symbol-icon svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.score-leaf-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

.score-leaf-icon svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.apple-mark {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
}

.top-picks-editorial-title {
  display: none !important;
}

.category-rails {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.category-rails .product-rail-block:first-of-type {
  margin-top: 0 !important;
}

.app-trending-board {
  padding-top: 26px !important;
}

.app-section-heading {
  max-width: none;
  margin-bottom: 20px;
}

.app-section-heading h2 {
  margin-bottom: 0;
}

.app-trending-rail {
  margin-top: 24px !important;
}

.app-trending-rail .product-rail {
  grid-auto-columns: clamp(190px, 22vw, 260px);
}

.app-trending-rail .product-card {
  min-width: 0;
  scroll-snap-align: start;
}

.nav-cta {
  gap: 8px;
}

.hero-app-waitlist-button {
  display: none !important;
}

@media (max-width: 760px) {
  .site-header {
    width: calc(100% - 30px) !important;
    padding-top: 20px !important;
    padding-bottom: 12px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .site-header nav a:not(.nav-cta) {
    display: none !important;
  }

  .nav-cta {
    min-height: 48px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    font-size: 0.9rem !important;
    white-space: nowrap !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #050706 !important;
    isolation: isolate !important;
  }

  .home-hero-search-first {
    padding-bottom: 18px !important;
  }

  .home-hero-search-first .home-hero-copy {
    width: 100% !important;
  }

  .home-hero-search-first .product-search {
    grid-template-columns: 34px minmax(0, 1fr) 58px !important;
    width: calc(100vw - 28px) !important;
    margin-left: calc((100% - (100vw - 28px)) / 2) !important;
    padding: 9px !important;
    gap: 8px !important;
    border-radius: 38px !important;
  }

  .home-hero-search-first .product-search input {
    font-size: 1rem !important;
  }

  .home-hero-search-first .product-search button {
    grid-column: auto !important;
    width: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 0 !important;
  }

  .home-hero-search-first .product-search button::after {
    content: '→';
    font-size: 1.55rem;
    line-height: 1;
  }

  .home-hero-search-first .top-picks-web-header {
    margin-top: 22px !important;
    margin-bottom: 18px !important;
    padding-top: 0 !important;
  }

  .home-hero-search-first .top-picks-parent-row {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 4px 0 0 !important;
    overflow: visible !important;
  }

  .home-hero-search-first .top-picks-parent {
    min-width: 0 !important;
  }

  .home-hero-search-first .top-picks-parent-icon {
    width: 58px !important;
    height: 58px !important;
    margin: 0 auto !important;
  }

  .home-hero-search-first .top-picks-parent-icon img {
    max-width: 42px !important;
    max-height: 42px !important;
  }

  .home-hero-search-first .top-picks-parent strong {
    margin-top: 7px !important;
    font-size: 0.75rem !important;
    line-height: 1 !important;
  }

  .category-rails {
    margin-top: 4px !important;
    padding-top: 10px !important;
  }

  .top-picks-editorial-title {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    font-size: clamp(2.9rem, 13.5vw, 4rem) !important;
    line-height: 0.92 !important;
  }
}

.rail-art,
.product-float-zone {
  background: #fff !important;
}

@keyframes rankingRailIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 860px) {
  .top-picks-web-header {
    margin-left: 0 !important;
  }

  .site-header {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* Hero should sell the app, not just sit there. */
.home-hero-search-first {
  padding-top: clamp(74px, 10vw, 132px) !important;
}

.home-hero-search-first .home-hero-copy {
  width: min(1180px, 100%) !important;
}

.home-hero-search-first .home-hero-copy h1 {
  max-width: 1120px !important;
}

.hero-selling-copy {
  max-width: 820px;
  margin: -8px 0 28px;
  color: #787d79;
  font-size: clamp(1.18rem, 2vw, 1.62rem);
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 1.32;
}

.hero-proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 20px;
}

.hero-proof-row span {
  border: 1px solid rgba(33, 148, 91, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 38px rgba(33, 148, 91, 0.08);
  color: var(--green);
  font-size: 0.86rem;
  font-weight: 860;
  letter-spacing: 0.08em;
  padding: 10px 14px;
  text-transform: uppercase;
}

.home-hero-search-first .waitlist-card-compact {
  width: min(820px, 100%);
  margin-top: 16px;
  padding: 18px;
  border-radius: 34px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 20px 70px rgba(33, 148, 91, 0.12), 0 0 0 10px rgba(33, 148, 91, 0.055);
}

.home-hero-search-first .waitlist-card-compact > div {
  display: none;
}

.home-hero-search-first .waitlist-form {
  margin: 0;
}

/* Top Picks should behave like the app header: visible, left-set, no clipping. */
.top-picks-web-header {
  margin-left: clamp(-54px, -3.2vw, -16px) !important;
  overflow: visible !important;
  padding-top: 48px;
}

.top-picks-wordmark {
  display: block;
  margin-top: 0 !important;
  margin-bottom: clamp(44px, 6vw, 78px) !important;
}

.top-picks-parent-row {
  padding-left: 0 !important;
}

@media (max-width: 860px) {
  .top-picks-web-header {
    margin-left: -4px !important;
    padding-top: 38px;
  }

  .hero-selling-copy {
    margin-top: 0;
  }
}

/* Product pages: app-style tabs and compact breakdown rows. */
.app-analysis-toggle {
  background: transparent !important;
  border-radius: 0 !important;
  gap: 0 !important;
  padding: 0 !important;
}

.app-analysis-toggle button {
  appearance: none;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: #969996;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  letter-spacing: 0.12em;
  min-height: 52px;
  padding: 0 18px 14px;
  text-transform: uppercase;
}

.app-analysis-toggle button.is-selected {
  border-bottom-color: var(--ink);
  color: var(--ink);
}

.app-analysis-copy {
  animation: appCopyIn 260ms ease both;
}

.app-breakdown-eyebrow {
  margin: 0 0 14px;
}

.app-breakdown-eyebrow::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  margin-top: 14px;
  background: var(--ink);
}

.app-breakdown-list {
  border: 1px solid rgba(18, 24, 20, 0.07) !important;
  border-radius: 24px !important;
  background: #fff !important;
}

.app-breakdown-row {
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  grid-template-columns: 52px minmax(0, 1fr) auto 20px !important;
  min-height: 86px !important;
  padding: 14px 20px !important;
  text-align: left;
  width: 100%;
}

.app-breakdown-row.tone-row-danger {
  background: rgba(220, 56, 50, 0.075) !important;
}

.breakdown-row-icon {
  width: 44px !important;
  height: 44px !important;
  font-size: 1.2rem;
}

.app-breakdown-row strong {
  font-size: clamp(1.16rem, 2vw, 1.42rem) !important;
}

.app-breakdown-row em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 210px !important;
  border-radius: 999px;
  background: rgba(36, 154, 96, 0.1);
  color: var(--green);
  font-size: clamp(0.88rem, 1.5vw, 1.06rem) !important;
  padding: 7px 13px;
}

.app-breakdown-row em.tone-warn {
  background: rgba(222, 165, 42, 0.12);
  color: #d49324 !important;
}

.app-breakdown-row em.tone-danger {
  background: rgba(220, 56, 50, 0.1);
  color: #df3d35 !important;
}

.app-breakdown-row em.tone-info {
  background: rgba(28, 145, 255, 0.1);
  color: #168cf3 !important;
}

.breakdown-chevron {
  color: #c6c8c7;
  font-size: 2.1rem;
  font-weight: 450;
  line-height: 1;
}

.tone-danger {
  color: #df3d35 !important;
}

.tone-info {
  color: #168cf3 !important;
}

@keyframes appCopyIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Kill the last off-white/tinted rail surfaces so white product photos disappear into the page. */
main,
section,
.section-shell,
.category-rails,
.product-rail-block,
.product-rail,
.product-grid,
.rail-card,
.product-card,
.rail-art,
.product-float-zone {
  background: #fff !important;
  background-image: none !important;
}

.rail-card,
.product-card {
  border-color: transparent !important;
  box-shadow: none !important;
}

.rail-art,
.product-float-zone {
  border: 0 !important;
  box-shadow: none !important;
}

.rail-art img,
.product-float-zone img {
  mix-blend-mode: multiply !important;
  background: transparent !important;
}

/* Search suggestions should feel like the app score cards too. */
.search-suggestion-row {
  display: grid !important;
  grid-template-columns: 76px minmax(0, 1fr) auto !important;
  gap: 18px !important;
  align-items: center !important;
}

.search-suggestion-row > em {
  display: none !important;
}

.search-score-pair {
  gap: 8px !important;
}

.search-score-pair .app-score-ring {
  width: 54px !important;
  height: 54px !important;
  border-width: 4px !important;
}

.search-score-pair .app-score-ring::before {
  inset: 4px !important;
}

.search-score-pair .app-score-ring span {
  margin-top: 10px !important;
  font-size: 0.68rem !important;
}

.search-score-pair .app-score-ring strong {
  margin-bottom: 9px !important;
  font-size: 1.08rem !important;
}

@media (max-width: 720px) {
  .search-suggestion-row {
    grid-template-columns: 54px minmax(0, 1fr) !important;
  }

  .search-score-pair {
    grid-column: 2;
    justify-self: start;
  }
}

/* Keep Top Picks tabs touchable; only the wordmark gets the editorial left set. */
.top-picks-web-header {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.top-picks-wordmark {
  margin-left: 0 !important;
}

.top-picks-parent-row {
  margin-left: 0 !important;
  padding-left: 0 !important;
  width: 100% !important;
}

.top-picks-parent:first-child {
  margin-left: 0 !important;
}

@media (min-width: 861px) {
  .top-picks-wordmark {
    margin-left: clamp(-58px, -3.4vw, -18px) !important;
  }
}

/* Rebuilt upper fold: calmer, app-like, no billboard chaos. */
.home-hero-search-first {
  display: block !important;
  min-height: 0 !important;
  padding: clamp(96px, 8vw, 132px) clamp(22px, 4vw, 64px) clamp(42px, 5vw, 74px) !important;
}

.home-hero-search-first .home-hero-copy {
  width: min(980px, 100%) !important;
  max-width: 980px !important;
  margin: 0 auto !important;
}

.home-hero-search-first .eyebrow {
  margin-bottom: 14px !important;
}

.home-hero-search-first .home-hero-copy h1 {
  max-width: 900px !important;
  margin: 0 0 18px !important;
  font-size: clamp(4.8rem, 9.2vw, 8.8rem) !important;
  letter-spacing: -0.095em !important;
  line-height: 0.86 !important;
}

.hero-selling-copy {
  max-width: 720px !important;
  margin: 0 0 26px !important;
  color: #7e837f !important;
  font-family: var(--sans) !important;
  font-size: clamp(1.05rem, 1.55vw, 1.34rem) !important;
  font-weight: 560 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.42 !important;
}

.home-hero-search-first .product-search-wrap,
.home-hero-search-first .product-search,
.home-hero-search-first .waitlist-card-compact {
  width: min(780px, 100%) !important;
  max-width: 780px !important;
}

.home-hero-search-first .product-search {
  min-height: 86px !important;
  padding: 12px 14px 12px 28px !important;
  border-radius: 999px !important;
}

.home-hero-search-first .product-search input {
  font-size: clamp(1.02rem, 1.5vw, 1.24rem) !important;
  font-weight: 650 !important;
  letter-spacing: -0.025em !important;
}

.home-hero-search-first .product-search button {
  min-width: 176px !important;
  min-height: 64px !important;
  border-radius: 999px !important;
  font-size: 1.02rem !important;
}

.hero-proof-row {
  margin: 18px 0 18px !important;
}

.hero-proof-row span {
  font-size: 0.78rem !important;
  padding: 9px 13px !important;
}

.home-hero-search-first .waitlist-card-compact {
  margin-top: 18px !important;
  padding: 10px !important;
  border-radius: 999px !important;
  box-shadow: 0 18px 52px rgba(33, 148, 91, 0.12), 0 0 0 8px rgba(33, 148, 91, 0.045) !important;
}

.home-hero-search-first .waitlist-card-compact .waitlist-form {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
}

.home-hero-search-first .waitlist-card-compact input {
  min-height: 64px !important;
  border-radius: 999px !important;
  padding-left: 28px !important;
  font-size: 1.02rem !important;
  font-weight: 620 !important;
}

.home-hero-search-first .waitlist-card-compact button {
  min-height: 64px !important;
  border-radius: 999px !important;
  padding: 0 28px !important;
  font-size: 1rem !important;
}

.hero-app-waitlist-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 62px;
  margin-top: 4px;
  padding: 0 30px;
  border-radius: 999px;
  background: #070b09;
  box-shadow: 0 20px 58px rgba(18, 24, 20, 0.16);
  color: #fff;
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 880;
  letter-spacing: -0.015em;
}

.hero-app-waitlist-button span {
  font-size: 1.24rem;
  line-height: 1;
}

.nav-cta span {
  margin-right: 7px;
  font-size: 1.08em;
  line-height: 1;
}

.top-picks-editorial-title {
  width: min(1480px, 100%);
  margin: 10px 0 clamp(18px, 3vw, 34px);
  font-family: var(--serif);
  font-size: clamp(4.2rem, 7.6vw, 7rem);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.085em;
}

.category-rails {
  margin-top: 0 !important;
  padding-top: 24px !important;
}

.top-picks-web-header {
  padding-top: 18px !important;
}

.top-picks-wordmark {
  width: clamp(220px, 24vw, 360px) !important;
  margin-bottom: clamp(30px, 4vw, 54px) !important;
}

@media (max-width: 760px) {
  .home-hero-search-first {
    padding: 84px 12px 42px !important;
  }

  .home-hero-search-first .home-hero-copy,
  .home-hero-search-first .product-search-wrap,
  .home-hero-search-first .product-search {
    width: 100% !important;
    max-width: none !important;
  }

  .home-hero-search-first .home-hero-copy h1 {
    font-size: clamp(4.1rem, 17vw, 5.8rem) !important;
  }

  .home-hero-search-first .product-search {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    min-height: 78px !important;
    padding: 10px 12px 10px 20px !important;
  }

  .home-hero-search-first .product-search button {
    grid-column: auto !important;
    min-width: 118px !important;
    min-height: 56px !important;
    padding: 0 18px !important;
  }

  .hero-app-waitlist-button {
    width: 100%;
    max-width: 360px;
  }
}

.waitlist-page-hero {
  display: grid;
  align-content: center;
  min-height: 100svh;
  width: min(920px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(92px, 10vw, 150px) 0;
}

.waitlist-page-hero h1 {
  max-width: 820px;
  margin: 0 0 18px;
  font-family: var(--serif);
  font-size: clamp(4.8rem, 11vw, 10rem);
  line-height: 0.86;
  letter-spacing: -0.095em;
}

.waitlist-page-hero > p:not(.eyebrow) {
  max-width: 640px;
  margin: 0 0 28px;
  color: #7e837f;
  font-size: clamp(1.08rem, 1.7vw, 1.38rem);
  font-weight: 560;
  line-height: 1.42;
}

.waitlist-page-hero .waitlist-card {
  max-width: 760px;
}

.waitlist-back-link {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 36px;
  color: var(--green);
  font-weight: 850;
}

/* Mobile pass: make the site feel designed for a phone, not squeezed desktop. */
@media (max-width: 760px) {
  html,
  body {
    overflow-x: hidden;
  }

  .site-header {
    min-height: 76px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .site-header .brand img {
    width: 118px !important;
    max-height: 44px !important;
    object-fit: contain;
  }

  .site-header .nav-cta {
    min-height: 44px !important;
    padding: 0 16px !important;
    font-size: 0.82rem !important;
  }

  .home-hero-search-first {
    padding: 86px 14px 26px !important;
  }

  .home-hero-search-first .home-hero-copy {
    width: 100% !important;
    margin: 0 !important;
  }

  .home-hero-search-first .eyebrow {
    margin-bottom: 10px !important;
    font-size: 0.74rem !important;
    letter-spacing: 0.28em !important;
  }

  .home-hero-search-first .home-hero-copy h1 {
    max-width: 355px !important;
    margin-bottom: 14px !important;
    font-size: clamp(3.7rem, 15.8vw, 5.1rem) !important;
    line-height: 0.88 !important;
    letter-spacing: -0.09em !important;
  }

  .hero-selling-copy {
    max-width: 340px !important;
    margin-bottom: 18px !important;
    font-size: 1rem !important;
    line-height: 1.36 !important;
  }

  .home-hero-search-first .product-search-wrap,
  .home-hero-search-first .product-search {
    width: 100% !important;
    max-width: none !important;
  }

  .home-hero-search-first .product-search {
    min-height: 72px !important;
    padding: 9px 10px 9px 18px !important;
    box-shadow: 0 18px 44px rgba(33, 148, 91, 0.12), 0 0 0 8px rgba(33, 148, 91, 0.04) !important;
  }

  .home-hero-search-first .product-search span {
    font-size: 1.22rem !important;
  }

  .home-hero-search-first .product-search input {
    min-width: 0 !important;
    font-size: 0.98rem !important;
  }

  .home-hero-search-first .product-search button {
    min-width: 104px !important;
    min-height: 52px !important;
    padding: 0 14px !important;
    font-size: 0.9rem !important;
  }

  .hero-proof-row {
    gap: 8px !important;
    margin: 16px 0 !important;
  }

  .hero-proof-row span {
    font-size: 0.66rem !important;
    letter-spacing: 0.12em !important;
    padding: 8px 10px !important;
  }

  .hero-app-waitlist-button {
    width: fit-content !important;
    min-height: 52px !important;
    padding: 0 22px !important;
    font-size: 0.92rem !important;
  }

  .category-rails {
    width: calc(100% - 18px) !important;
    padding-top: 22px !important;
  }

  .top-picks-web-header {
    padding-top: 14px !important;
    margin-top: 4px !important;
    margin-bottom: 22px !important;
  }

  .top-picks-editorial-title {
    margin-top: 6px !important;
    margin-bottom: 14px !important;
    font-size: clamp(3.4rem, 15vw, 4.6rem) !important;
  }

  .top-picks-parent-row {
    gap: 24px !important;
    padding-bottom: 16px !important;
  }

  .top-picks-parent {
    min-width: 72px !important;
  }

  .top-picks-parent-icon {
    width: 66px !important;
    height: 66px !important;
  }

  .top-picks-parent-icon img {
    max-width: 48px !important;
    max-height: 48px !important;
  }

  .top-picks-parent strong {
    margin-top: 8px !important;
    font-size: 0.9rem !important;
  }

  .product-rail-block {
    margin-top: 24px !important;
  }

  .rail-heading {
    align-items: end !important;
    margin-bottom: 14px !important;
  }

  .rail-heading .eyebrow {
    font-size: 0.72rem !important;
    letter-spacing: 0.26em !important;
  }

  .rail-heading h3 {
    font-size: clamp(2.8rem, 12vw, 3.6rem) !important;
    line-height: 0.9 !important;
  }

  .rail-heading a {
    font-size: 0.95rem !important;
  }

  .product-rail {
    grid-auto-columns: minmax(138px, 41vw) !important;
    gap: 18px !important;
    padding: 6px 2px 12px !important;
    scroll-padding-left: 2px !important;
  }

  .rail-card {
    grid-template-rows: 132px auto auto auto !important;
    gap: 7px !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  .rail-art {
    height: 132px !important;
    min-height: 132px !important;
  }

  .rail-art img {
    max-width: 94% !important;
    max-height: 118px !important;
  }

  .rail-art .product-rank-bubble,
  .product-rank-bubble {
    width: 42px !important;
    height: 42px !important;
    font-size: 1.35rem !important;
  }

  .rail-card h4 {
    font-size: 1.02rem !important;
    line-height: 1.08 !important;
    letter-spacing: -0.04em !important;
    min-height: 2.2em !important;
  }

  .rail-card p {
    font-size: 0.9rem !important;
    line-height: 1.05 !important;
  }

  .rail-score-pair {
    gap: 8px !important;
    margin-top: 4px !important;
  }

  .rail-score-pair .app-score-ring,
  .product-card .app-score-ring {
    width: 54px !important;
    height: 54px !important;
    border-width: 4px !important;
  }

  .rail-score-pair .app-score-ring::before,
  .product-card .app-score-ring::before {
    inset: 4px !important;
  }

  .rail-score-pair .app-score-ring span,
  .product-card .app-score-ring span {
    margin-top: 10px !important;
    font-size: 0.68rem !important;
  }

  .rail-score-pair .app-score-ring strong,
  .product-card .app-score-ring strong {
    margin-bottom: 9px !important;
    font-size: 1.08rem !important;
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px 16px !important;
  }

  .product-card {
    padding: 0 !important;
  }

  .product-float-zone {
    height: 132px !important;
  }

  .product-float-zone img {
    max-height: 118px !important;
  }

  .product-card h3 {
    font-size: 1.02rem !important;
    line-height: 1.08 !important;
  }

  .product-card-copy > span {
    font-size: 0.9rem !important;
  }

  .search-suggestions {
    border-radius: 28px !important;
    padding: 8px !important;
  }

  .search-suggestion-row {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 10px !important;
  }

  .search-suggestion-row img {
    width: 44px !important;
    height: 44px !important;
  }

  .search-suggestion-row strong {
    font-size: 0.92rem !important;
  }

  .search-score-pair {
    margin-top: 4px !important;
  }
}

/* Hard white canvas override: no grey/tinted product surfaces anywhere. */
html,
body,
main,
.site-header,
.home-hero,
.home-hero-search-first,
.section-shell,
.category-rails,
.trending-board,
.shelf-section,
.product-grid,
.product-card,
.product-float-zone,
.product-rail,
.rail-card,
.rail-art,
.app-product-image,
.product-art-panel,
.search-suggestions,
.search-suggestion-row {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

.product-card,
.rail-card,
.rail-art,
.product-float-zone,
.product-grid,
.product-rail {
  box-shadow: none !important;
}

.rail-art img,
.product-float-zone img,
.product-card img {
  background: #ffffff !important;
}

@media (max-width: 760px) {
  html,
  body,
  main,
  .site-header,
  .home-hero,
  .home-hero-search-first,
  .section-shell,
  .category-rails,
  .trending-board,
  .shelf-section,
  .product-grid,
  .product-card,
  .product-float-zone,
  .product-rail,
  .rail-card,
  .rail-art,
  .app-product-image,
  .product-art-panel,
  .search-suggestions,
  .search-suggestion-row {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
  }
}

/* Kill the remaining grey product glow/shadow on mobile and desktop product rails. */
.product-card,
.rail-card,
.rail-art,
.product-float-zone,
.product-rank-bubble,
.app-score-ring,
.mini-score {
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

.rail-art img,
.product-float-zone img,
.product-card img,
.product-art-panel img,
.app-product-image img {
  filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.rail-art,
.product-float-zone {
  isolation: auto !important;
}

@media (max-width: 760px) {
  .product-card,
  .rail-card,
  .rail-art,
  .product-float-zone,
  .product-rank-bubble,
  .app-score-ring,
  .mini-score,
  .rail-art img,
  .product-float-zone img,
  .product-card img,
  .product-art-panel img,
  .app-product-image img {
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
  }
}

/* Consistent product image sizing: every rail card gets the same image stage. */
.rail-card,
.product-card {
  align-content: start !important;
}

.rail-art,
.product-float-zone {
  width: 100% !important;
  height: 230px !important;
  min-height: 230px !important;
  max-height: 230px !important;
  overflow: visible !important;
  display: grid !important;
  place-items: center !important;
}

.rail-art img,
.product-float-zone img {
  width: auto !important;
  height: auto !important;
  max-width: 82% !important;
  max-height: 190px !important;
  object-fit: contain !important;
  object-position: center !important;
}

.product-card .product-float-zone img {
  max-height: 190px !important;
}

@media (max-width: 760px) {
  .rail-card,
  .product-card {
    grid-template-rows: 128px auto auto auto !important;
  }

  .rail-art,
  .product-float-zone {
    height: 128px !important;
    min-height: 128px !important;
    max-height: 128px !important;
  }

  .rail-art img,
  .product-float-zone img,
  .product-card .product-float-zone img {
    max-width: 84% !important;
    max-height: 108px !important;
  }
}

/* Collapse the dead air between Top Picks category buttons and the first rail. */
@media (min-width: 761px) {
  .home-hero-search-first {
    min-height: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .home-hero-search-first .top-picks-web-header {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .home-hero-search-first .top-picks-parent-row {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .home-hero-search-first + .category-rails {
    margin-top: -190px !important;
  }
}

@media (max-width: 760px) {
  .home-hero-search-first {
    min-height: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .home-hero-search-first .top-picks-web-header {
    margin-bottom: 4px !important;
  }

  .home-hero-search-first + .category-rails {
    margin-top: -8px !important;
  }
}

/* Product page: pull the website much closer to the app sheet/product-detail layout. */
.app-product-hero {
  width: min(820px, calc(100% - 34px)) !important;
  margin: 16px auto 0 !important;
  padding: 18px 0 0 !important;
  border-radius: 46px 46px 0 0 !important;
  background: #fff !important;
}

.app-product-hero .breadcrumb {
  display: none !important;
}

.app-product-hero::before {
  content: '';
  display: block;
  width: 58px;
  height: 7px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: #c9c9c6;
}

.app-product-header::before {
  content: '';
  width: 150px;
  height: 52px;
  margin: 0 auto -4px;
  background: url('/brand/reviews-logo.png') center / contain no-repeat;
}

.app-product-header {
  width: min(760px, 100%) !important;
  padding: 0 18px !important;
}

.app-product-image {
  width: min(280px, 64vw) !important;
  height: min(230px, 52vw) !important;
  margin-bottom: 8px !important;
}

.app-product-image img {
  max-width: 78% !important;
  max-height: 190px !important;
  color: transparent !important;
  font-size: 0 !important;
  filter: none !important;
}

.app-product-brand {
  margin-bottom: 6px !important;
  color: #979a98 !important;
  font-size: 1.02rem !important;
  font-weight: 700 !important;
}

.app-product-header h1 {
  max-width: 680px !important;
  margin-bottom: 14px !important;
  font-size: clamp(3.4rem, 6.2vw, 5.9rem) !important;
  line-height: 0.9 !important;
  text-align: center !important;
}

.app-product-score-pair {
  gap: 26px !important;
  margin: 0 0 22px !important;
}

.app-product-score-pair .app-symbol-icon {
  display: none !important;
}

.app-product-score-pair .app-score-ring strong {
  align-self: center !important;
  margin-bottom: 0 !important;
  letter-spacing: 0 !important;
}

.app-category-badge {
  display: none !important;
}

.app-product-analysis {
  width: min(820px, calc(100% - 34px)) !important;
  padding-top: 0 !important;
}

.app-product-analysis::before {
  content: '♡  Add to Pantry in app';
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 68px;
  margin: 0 0 28px;
  border-radius: 18px;
  background: #f3f3f7;
  color: #101211;
  font-size: 1.28rem;
  font-weight: 760;
  letter-spacing: -0.03em;
}

.app-analysis-toggle {
  width: 100% !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
}

.app-analysis-toggle button {
  min-height: 64px !important;
  border-bottom-width: 3px !important;
  color: #969996 !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.18em !important;
}

.app-analysis-toggle button.is-selected {
  color: #101211 !important;
}

.app-analysis-copy {
  width: 100% !important;
  padding: 42px 0 34px !important;
  border-radius: 0 !important;
  background: #fff !important;
}

.app-analysis-copy h2 {
  max-width: 760px !important;
  margin: 0 0 18px !important;
  font-size: clamp(3.5rem, 7vw, 5.8rem) !important;
  line-height: 0.95 !important;
}

.app-analysis-copy p {
  max-width: 760px !important;
  color: #949795 !important;
  font-size: clamp(1.55rem, 2.2vw, 2rem) !important;
  line-height: 1.45 !important;
}

.app-breakdown-section {
  width: min(820px, calc(100% - 34px)) !important;
  padding-top: 8px !important;
}

.app-breakdown-list {
  border-radius: 24px !important;
}

.app-breakdown-row {
  min-height: 88px !important;
  padding: 14px 24px !important;
}

@media (max-width: 760px) {
  .app-product-hero {
    width: 100% !important;
    margin-top: 0 !important;
    border-radius: 34px 34px 0 0 !important;
  }

  .app-product-header::before {
    width: 126px;
    height: 42px;
  }

  .app-product-image {
    height: 188px !important;
  }

  .app-product-image img {
    max-height: 166px !important;
  }

  .app-product-header h1 {
    font-size: clamp(2.7rem, 12vw, 4.4rem) !important;
  }

  .app-product-analysis,
  .app-breakdown-section {
    width: calc(100% - 34px) !important;
  }

  .app-product-analysis::before {
    min-height: 58px;
    margin-bottom: 22px;
    font-size: 1.08rem;
  }

  .app-analysis-toggle button {
    min-height: 56px !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.16em !important;
  }

  .app-analysis-copy {
    padding: 34px 0 26px !important;
  }

  .app-analysis-copy h2 {
    font-size: clamp(2.8rem, 13vw, 4.2rem) !important;
  }

  .app-analysis-copy p {
    font-size: 1.45rem !important;
    line-height: 1.45 !important;
  }

  .app-breakdown-row {
    grid-template-columns: 48px minmax(0, 1fr) auto 18px !important;
    min-height: 78px !important;
    padding: 12px 14px !important;
  }

  .app-breakdown-row em {
    max-width: 132px !important;
    padding: 6px 10px !important;
  }
}

/* Product page: no fake sheet handle or Reviews logo at the top on web. */
.app-product-hero::before,
.app-product-header::before {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  background: none !important;
}

.app-product-hero {
  padding-top: 0 !important;
}

/* Desktop only: keep category rails below the hero search, not underneath it. */
@media (min-width: 761px) {
  .home-hero-search-first + .category-rails {
    margin-top: 26px !important;
    padding-top: 0 !important;
  }

  .category-rails .product-rail-block:first-of-type {
    margin-top: 0 !important;
  }
}

/* Align score circles across product rails by locking title/brand text height. */
@media (min-width: 761px) {
  .rail-card {
    grid-template-rows: 230px 3.35em 1.35em auto !important;
    align-items: start !important;
  }

  .rail-card h4 {
    display: -webkit-box !important;
    min-height: 3.35em !important;
    max-height: 3.35em !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
  }

  .rail-card p {
    min-height: 1.35em !important;
    max-height: 1.35em !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .rail-score-pair {
    align-self: start !important;
    margin-top: 14px !important;
  }

  .product-card-copy {
    display: grid !important;
    grid-template-rows: 3.35em 1.35em auto !important;
    align-items: start !important;
  }

  .product-card h3 {
    display: -webkit-box !important;
    min-height: 3.35em !important;
    max-height: 3.35em !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
  }

  .product-card-copy > span {
    min-height: 1.35em !important;
    max-height: 1.35em !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* Rail text fix: app-style truncation so brand and score rows never collide. */
@media (min-width: 761px) {
  .rail-card {
    grid-template-rows: 230px 2.38em 1.45em auto !important;
    row-gap: 10px !important;
  }

  .rail-card h4 {
    display: -webkit-box !important;
    min-height: 2.38em !important;
    max-height: 2.38em !important;
    margin: 0 !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-height: 1.08 !important;
    font-size: 1.24rem !important;
  }

  .rail-card p {
    min-height: 1.45em !important;
    max-height: 1.45em !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 1.25 !important;
  }

  .rail-score-pair {
    margin-top: 10px !important;
  }

  .product-card-copy {
    grid-template-rows: 2.38em 1.45em auto !important;
    row-gap: 10px !important;
  }

  .product-card h3 {
    min-height: 2.38em !important;
    max-height: 2.38em !important;
    margin: 0 !important;
    -webkit-line-clamp: 2 !important;
    line-height: 1.08 !important;
    font-size: 1.24rem !important;
  }

  .product-card-copy > span {
    min-height: 1.45em !important;
    max-height: 1.45em !important;
    line-height: 1.25 !important;
  }
}

/* Final product-card title clamp: prevent hidden third lines bleeding into brand rows. */
.product-card-copy {
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  align-content: start !important;
  row-gap: 10px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.product-card h3,
.product-card-copy h3,
.rail-card h3 {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  line-height: 1.08 !important;
  height: 2.16em !important;
  max-height: 2.16em !important;
  min-height: 2.16em !important;
  margin: 0 !important;
  padding: 0 !important;
  contain: paint !important;
}

.product-card-copy > span,
.product-card .product-brand,
.rail-card .product-brand {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.18 !important;
  height: 1.18em !important;
  margin: 0 !important;
}

.product-card-copy .app-score-pair,
.product-card .app-score-pair,
.rail-card .app-score-pair {
  align-self: start !important;
  margin-top: 4px !important;
}

@media (max-width: 760px) {
  .product-card-copy {
    row-gap: 8px !important;
  }

  .rail-card,
  .product-card {
    grid-template-rows: 126px 2.16em 1.18em 58px !important;
  }

  .product-card h3,
  .product-card-copy h3,
  .rail-card h3 {
    line-height: 1.06 !important;
    height: 2.12em !important;
    max-height: 2.12em !important;
    min-height: 2.12em !important;
  }

  .product-card-copy > span,
  .product-card .product-brand,
  .rail-card .product-brand {
    height: 1.16em !important;
    line-height: 1.16 !important;
  }
}

/* Final rail/product clamp: the app-style ranking rails use h4 titles. */
.rail-card {
  align-content: start !important;
  overflow: hidden !important;
}

.rail-card h4 {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  line-height: 1.08 !important;
  height: 2.16em !important;
  max-height: 2.16em !important;
  min-height: 2.16em !important;
  margin: 0 !important;
  padding: 0 !important;
  contain: paint !important;
  clip-path: inset(0) !important;
}

.rail-card > p {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.18 !important;
  height: 1.18em !important;
  max-height: 1.18em !important;
  min-height: 1.18em !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 760px) {
  .rail-card {
    grid-template-rows: 126px 2.2em 1.18em 58px !important;
    row-gap: 8px !important;
  }

  .rail-card h4 {
    line-height: 1.1 !important;
    height: 2.2em !important;
    max-height: 2.2em !important;
    min-height: 2.2em !important;
  }
}

/* Final mobile/desktop card rhythm: never let hidden title lines bleed into brands/scores. */
.product-card-copy {
  grid-template-rows: 2.28em 1.22em 64px !important;
  row-gap: 12px !important;
  justify-items: center !important;
}

.product-card-copy h3,
.rail-card h4 {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  block-size: 2.28em !important;
  min-block-size: 2.28em !important;
  max-block-size: 2.28em !important;
  line-height: 1.14 !important;
  overflow: clip !important;
  overflow-clip-margin: 0 !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  word-break: normal !important;
  contain: layout paint style !important;
  clip-path: inset(0 0 0 0) !important;
}

.product-card-copy > span,
.rail-card > p {
  block-size: 1.22em !important;
  min-block-size: 1.22em !important;
  max-block-size: 1.22em !important;
  line-height: 1.22 !important;
}

@media (max-width: 760px) {
  .product-card-copy {
    grid-template-rows: 2.36em 1.18em 58px !important;
    row-gap: 9px !important;
  }

  .product-card-copy h3,
  .rail-card h4 {
    block-size: 2.36em !important;
    min-block-size: 2.36em !important;
    max-block-size: 2.36em !important;
    line-height: 1.18 !important;
  }

  .product-card-copy > span,
  .rail-card > p {
    block-size: 1.18em !important;
    min-block-size: 1.18em !important;
    max-block-size: 1.18em !important;
    line-height: 1.18 !important;
  }
}

/* SEO authority surfaces: app-like scoreboards and internal link graph. */
.category-archive-hero > p:not(.eyebrow) {
  max-width: 760px;
  margin: -4px 0 24px;
  color: var(--muted);
  font-size: clamp(1.1rem, 2vw, 1.38rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.045em;
}

.seo-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.seo-chip-row a,
.seo-text-links a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  border: 1px solid rgba(36, 154, 96, 0.2);
  border-radius: 999px;
  background: #fff;
  color: var(--green);
  font-size: 0.9rem;
  font-weight: 850;
  letter-spacing: -0.025em;
  box-shadow: 0 14px 36px rgba(18, 24, 20, 0.04);
}

.seo-chip-row a {
  padding: 0 17px;
}

.seo-scoreboard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
  margin-bottom: 42px;
}

.seo-leader-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px;
  min-height: 152px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 26px 70px rgba(18, 24, 20, 0.06);
}

.seo-leader-card span {
  grid-column: 1 / -1;
  color: var(--green);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.seo-leader-card strong {
  min-width: 0;
  color: var(--ink);
  font-size: clamp(1.18rem, 2.2vw, 1.65rem);
  font-weight: 850;
  line-height: 1.02;
  letter-spacing: -0.055em;
}

.seo-leader-card em {
  color: var(--green);
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4vw, 3.7rem);
  font-style: normal;
  line-height: 0.86;
  letter-spacing: -0.07em;
}

.seo-link-panel {
  display: grid;
  grid-template-columns: minmax(220px, 0.5fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 52px);
  align-items: start;
  margin-top: 44px;
  margin-bottom: 48px;
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid var(--line);
  border-radius: 34px;
  background: #fff;
  box-shadow: 0 26px 80px rgba(18, 24, 20, 0.05);
}

.seo-link-panel h2 {
  margin-bottom: 0;
  font-size: clamp(2.4rem, 4vw, 4.2rem);
}

.seo-link-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.seo-link-columns h3 {
  margin-bottom: 14px;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.035em;
}

.seo-text-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.seo-text-links a {
  padding: 0 15px;
}

.product-link-graph {
  margin-top: 28px;
}

.homepage-authority-link {
  margin-top: -10px;
  margin-bottom: 22px;
}

.homepage-authority-link a,
.methodology-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(36, 154, 96, 0.2);
  border-radius: 999px;
  background: #fff;
  color: var(--green);
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: -0.025em;
  box-shadow: 0 16px 44px rgba(18, 24, 20, 0.05);
}

.methodology-hero {
  padding-top: clamp(70px, 9vw, 120px);
}

.methodology-hero h1 {
  max-width: 980px;
  margin-bottom: 24px;
  font-size: clamp(4.3rem, 10vw, 10.5rem);
  line-height: 0.84;
  letter-spacing: -0.09em;
}

.methodology-hero > p:not(.eyebrow) {
  max-width: 760px;
  color: var(--muted);
  font-size: clamp(1.18rem, 2vw, 1.55rem);
  font-weight: 760;
  line-height: 1.34;
  letter-spacing: -0.045em;
}

.methodology-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.methodology-actions a:first-child {
  border-color: transparent;
  background: var(--ink);
  color: #fff;
}

.methodology-score-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.methodology-score-card,
.methodology-panel,
.methodology-faq article {
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 28px 76px rgba(18, 24, 20, 0.045);
}

.methodology-score-card {
  min-height: 320px;
  padding: clamp(24px, 4vw, 38px);
  border-radius: 34px;
}

.methodology-score-card > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 26px;
  border-radius: 999px;
  background: rgba(36, 154, 96, 0.09);
  color: var(--green);
  font-family: var(--serif);
  font-size: 2rem;
}

.methodology-score-card h2 {
  margin-bottom: 14px;
  font-size: clamp(2.2rem, 4vw, 4.4rem);
  line-height: 0.9;
}

.methodology-score-card > p:not(.eyebrow) {
  color: var(--muted);
  font-size: 1.04rem;
  font-weight: 720;
  line-height: 1.35;
  letter-spacing: -0.035em;
}

.methodology-panel {
  display: grid;
  grid-template-columns: minmax(240px, 0.65fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 60px);
  padding: clamp(26px, 4vw, 44px);
  border-radius: 38px;
}

.methodology-panel h2,
.methodology-faq h2 {
  font-size: clamp(2.8rem, 6vw, 6.4rem);
  line-height: 0.86;
}

.methodology-steps {
  display: grid;
  gap: 18px;
}

.methodology-steps div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.methodology-steps div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.methodology-steps strong {
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.45rem;
  box-shadow: 0 16px 38px rgba(18, 24, 20, 0.07);
}

.methodology-steps h3,
.methodology-faq h3 {
  margin-bottom: 6px;
  font-size: 1.18rem;
  font-weight: 900;
  letter-spacing: -0.045em;
}

.methodology-steps p,
.methodology-faq p {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: -0.035em;
}

.methodology-faq > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 26px;
}

.methodology-faq article {
  min-height: 190px;
  padding: 24px;
  border-radius: 28px;
}

.app-cta-shell {
  margin-top: 18px;
  margin-bottom: 28px;
}

.legal-hero h1 {
  max-width: 1080px;
}

.legal-shell,
.support-shell {
  display: grid;
  gap: 22px;
}

.legal-summary-card,
.legal-warning-card,
.legal-content,
.support-intro,
.support-form {
  border: 1px solid var(--line);
  border-radius: 34px;
  background: #fff;
  box-shadow: 0 28px 76px rgba(18, 24, 20, 0.045);
}

.legal-summary-card,
.legal-warning-card {
  padding: clamp(24px, 4vw, 42px);
}

.legal-warning-card {
  border-color: rgba(36, 154, 96, 0.22);
}

.legal-summary-card h2,
.legal-warning-card h2,
.support-intro h2 {
  max-width: 900px;
  margin-bottom: 14px;
  font-size: clamp(2.5rem, 5vw, 5.6rem);
  line-height: 0.9;
}

.legal-summary-card p:not(.eyebrow),
.legal-warning-card p:not(.eyebrow),
.support-intro > p {
  max-width: 980px;
  color: var(--muted);
  font-size: 1.05rem;
  font-weight: 720;
  line-height: 1.45;
  letter-spacing: -0.035em;
}

.legal-content {
  padding: clamp(24px, 4vw, 44px);
}

.legal-content article {
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}

.legal-content article:first-child {
  padding-top: 0;
}

.legal-content article:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.legal-content h2 {
  margin-bottom: 12px;
  font-size: clamp(1.55rem, 3vw, 2.8rem);
  line-height: 0.98;
}

.legal-content p,
.legal-content li {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 680;
  line-height: 1.58;
  letter-spacing: -0.025em;
}

.legal-content p + p,
.legal-content p + ul,
.legal-content ul + p {
  margin-top: 12px;
}

.legal-content ul {
  display: grid;
  gap: 10px;
  padding-left: 1.15rem;
}

.legal-content strong,
.legal-content a {
  color: var(--ink);
}

.support-shell {
  grid-template-columns: minmax(0, 0.85fr) minmax(320px, 0.75fr);
  align-items: start;
}

.support-intro,
.support-form {
  padding: clamp(24px, 4vw, 38px);
}

.support-card-grid {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

.support-card-grid article {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
}

.support-card-grid h3 {
  margin-bottom: 6px;
  font-size: 1.02rem;
  font-weight: 950;
  letter-spacing: -0.04em;
}

.support-card-grid p {
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.025em;
}

.support-form {
  display: grid;
  gap: 16px;
}

.support-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.support-form label {
  display: grid;
  gap: 8px;
}

.support-form label span {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.support-form input,
.support-form select,
.support-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 760;
  letter-spacing: -0.025em;
  outline: none;
  box-shadow: 0 16px 44px rgba(18, 24, 20, 0.035);
}

.support-form input,
.support-form select {
  min-height: 54px;
  padding: 0 16px;
}

.support-form textarea {
  min-height: 164px;
  padding: 16px;
  resize: vertical;
}

.support-form input:focus,
.support-form select:focus,
.support-form textarea:focus {
  border-color: rgba(36, 154, 96, 0.45);
  box-shadow: 0 0 0 4px rgba(36, 154, 96, 0.08);
}

.support-form button {
  min-height: 58px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 1rem;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 22px 48px rgba(18, 24, 20, 0.12);
}

.support-form button:disabled {
  cursor: wait;
  opacity: 0.68;
}

.support-form-message,
.support-direct-email {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 760;
  line-height: 1.35;
  letter-spacing: -0.025em;
}

.support-form-message-success {
  color: var(--green);
}

.support-form-message-error {
  color: #b5473f;
}

.support-direct-email a {
  color: var(--ink);
  font-weight: 950;
}

.support-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.app-download-cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(18px, 4vw, 42px);
  align-items: center;
  overflow: hidden;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(36, 154, 96, 0.16);
  border-radius: 38px;
  background:
    radial-gradient(circle at 14% 10%, rgba(36, 154, 96, 0.08), transparent 34%),
    linear-gradient(135deg, #fff 0%, #fff 52%, rgba(247, 252, 249, 0.92) 100%);
  box-shadow: 0 30px 88px rgba(18, 24, 20, 0.07);
}

.app-download-cta::after {
  content: '';
  position: absolute;
  inset: 10px;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 30px;
}

.app-download-cta > div,
.app-download-button {
  position: relative;
  z-index: 1;
}

.app-product-pantry-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  margin: 12px auto 2px;
  padding: 0 24px;
  border-radius: 999px;
  background: #f2f3f6;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  box-shadow: inset 0 0 0 1px rgba(18, 24, 20, 0.035);
}

.app-product-pantry-cta::before {
  content: "";
  width: 14px;
  height: 18px;
  margin-right: 10px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 4px 4px 2px 2px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
}

.app-download-cta h2 {
  max-width: 760px;
  margin-bottom: 10px;
  color: var(--ink);
  font-size: clamp(2.5rem, 5vw, 5.6rem);
  line-height: 0.86;
  letter-spacing: -0.08em;
}

.app-download-cta p:not(.eyebrow) {
  max-width: 680px;
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 740;
  line-height: 1.34;
  letter-spacing: -0.04em;
}

.app-download-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 220px;
  min-height: 70px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: -0.045em;
  box-shadow: 0 22px 58px rgba(18, 24, 20, 0.18);
}

.app-download-button svg {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
}

.app-download-cta-compact {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: clamp(22px, 3vw, 32px);
  border-radius: 32px;
}

.app-download-cta-compact h2 {
  font-size: clamp(2.1rem, 4vw, 4rem);
}

.app-download-cta-compact .app-download-button {
  min-height: 62px;
}

@media (max-width: 860px) {
  .seo-scoreboard,
  .seo-link-panel,
  .seo-link-columns,
  .methodology-score-grid,
  .methodology-panel,
  .methodology-faq > div {
    grid-template-columns: 1fr;
  }

  .seo-scoreboard {
    gap: 12px;
    margin-bottom: 30px;
  }

  .seo-leader-card {
    min-height: 124px;
    padding: 20px;
    border-radius: 26px;
  }

  .seo-link-panel {
    padding: 22px;
    border-radius: 28px;
  }

  .methodology-hero {
    padding-top: 34px;
  }

  .methodology-hero h1 {
    font-size: clamp(3.8rem, 15vw, 5.7rem);
  }

  .methodology-score-card {
    min-height: 0;
    border-radius: 28px;
  }

  .methodology-panel,
  .methodology-faq article {
    border-radius: 28px;
  }

  .legal-summary-card,
  .legal-warning-card,
  .legal-content,
  .support-intro,
  .support-form {
    border-radius: 28px;
  }

  .support-shell,
  .support-field-grid {
    grid-template-columns: 1fr;
  }

  .legal-content article {
    padding: 22px 0;
  }

  .app-download-cta,
  .app-download-cta-compact {
    grid-template-columns: 1fr;
    padding: 24px;
    border-radius: 30px;
  }

  .app-download-cta h2 {
    font-size: clamp(2.8rem, 12vw, 4.4rem);
  }

  .app-download-button {
    width: 100%;
    min-height: 64px;
  }
}

/* Alternatives SEO pages: high-intent swap landing pages. */
.alternatives-hero > p:not(.eyebrow) {
  max-width: 740px;
  margin: -4px 0 24px;
  color: var(--muted);
  font-size: clamp(1.08rem, 2vw, 1.34rem);
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: -0.045em;
}

.alternatives-hero .product-search {
  margin-bottom: 0;
}

.best-archive-hero > p:not(.eyebrow) {
  max-width: 780px;
  margin: -4px 0 24px;
  color: var(--muted);
  font-size: clamp(1.1rem, 2vw, 1.42rem);
  font-weight: 760;
  line-height: 1.34;
  letter-spacing: -0.045em;
}

.best-archive-hero .product-search {
  margin-bottom: 0;
}

.product-faq-section {
  margin-top: 22px;
}

.product-faq-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.product-faq-grid article {
  min-height: 176px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 22px 64px rgba(18, 24, 20, 0.045);
}

.product-faq-grid h3 {
  margin-bottom: 12px;
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.product-faq-grid p {
  color: var(--muted);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.38;
  letter-spacing: -0.035em;
}

@media (max-width: 760px) {
  .alternatives-hero,
  .category-archive-hero,
  .best-archive-hero {
    padding-top: 26px !important;
  }

  .alternatives-hero h1,
  .category-archive-hero h1,
  .best-archive-hero h1 {
    font-size: clamp(3.4rem, 15vw, 4.8rem) !important;
    line-height: 0.9 !important;
  }

  .seo-chip-row {
    gap: 8px;
  }

  .seo-chip-row a,
  .seo-text-links a {
    min-height: 38px;
    padding: 0 13px;
    font-size: 0.78rem;
  }

  .product-faq-grid {
    grid-template-columns: 1fr;
  }

  .product-faq-grid article {
    min-height: 0;
    border-radius: 24px;
  }
}


.ingredient-archive-hero > p:not(.eyebrow) {
  max-width: 780px;
  margin: -4px 0 24px;
  color: var(--muted);
  font-size: clamp(1.1rem, 2vw, 1.42rem);
  font-weight: 760;
  line-height: 1.34;
  letter-spacing: -0.045em;
}

.ingredient-archive-hero .product-search {
  margin-bottom: 0;
}

.trust-hero > p:not(.eyebrow) {
  max-width: 820px;
}

.trust-panel {
  margin-top: 24px;
}

/* Sitewide SEO footer: internal links and app access on every page. */
.site-footer {
  width: min(100% - 48px, 1320px);
  margin: clamp(70px, 10vw, 130px) auto 36px;
  padding: clamp(28px, 5vw, 48px);
  border: 1px solid var(--line);
  border-radius: clamp(32px, 5vw, 52px);
  background: #fff;
  box-shadow: 0 26px 90px rgba(18, 24, 20, 0.055);
}

.site-footer-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding-bottom: clamp(24px, 4vw, 38px);
  border-bottom: 1px solid var(--line);
}

.site-footer-cta h2 {
  margin: 0 0 10px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(3rem, 6vw, 6.4rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.085em;
}

.site-footer-cta p:not(.eyebrow) {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.7vw, 1.35rem);
  font-weight: 760;
  line-height: 1.35;
  letter-spacing: -0.045em;
}

.footer-waitlist-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 62px;
  padding: 0 28px;
  border-radius: 999px;
  background: #070b09;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: -0.035em;
  white-space: nowrap;
  box-shadow: 0 18px 42px rgba(7, 11, 9, 0.18);
}

.footer-waitlist-cta svg {
  width: 20px;
  height: 20px;
}

.site-footer-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 52px);
  padding-top: clamp(24px, 4vw, 38px);
}

.site-footer-links h3 {
  margin: 0 0 16px;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.035em;
}

.site-footer-links div {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.site-footer-links a {
  color: var(--muted);
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.site-footer-links a:hover {
  color: var(--green);
}

@media (max-width: 760px) {
  .site-footer {
    width: min(100% - 28px, 1320px);
    margin-top: 72px;
    padding: 26px;
    border-radius: 34px;
  }

  .site-footer-cta {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .site-footer-cta h2 {
    font-size: clamp(3.2rem, 15vw, 5.2rem);
  }

  .footer-waitlist-cta {
    width: 100%;
    min-height: 58px;
  }

  .site-footer-links {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}
.app-verified-reviews-section {
  max-width: 980px;
  margin-top: 12px;
}

.app-verified-reviews-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.app-verified-reviews-heading .eyebrow {
  margin: 0;
}

.app-verified-reviews-heading span {
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 12px;
  background: #111;
}

.app-verified-reviews-heading > p {
  margin: 0;
  color: rgba(18, 22, 20, 0.36);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: lowercase;
}

.app-verified-review-list {
  display: grid;
  gap: 22px;
}

.app-verified-review-card {
  padding: 0 0 22px;
  border-bottom: 1px solid rgba(18, 22, 20, 0.08);
}

.app-verified-review-card:last-child {
  border-bottom: 0;
}

.app-verified-review-meta {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.app-verified-review-meta strong {
  color: #111;
  font-size: clamp(0.88rem, 1vw, 1rem);
  font-weight: 900;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.app-verified-review-meta .app-symbol-icon {
  width: 18px;
  height: 18px;
  color: var(--green);
}

.app-verified-review-meta em {
  justify-self: end;
  color: var(--green);
  font-family: var(--font-editorial);
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  font-style: normal;
  font-weight: 700;
}

.app-verified-review-card p {
  max-width: 780px;
  margin: 0 0 16px;
  color: #111;
  font-family: var(--font-editorial);
  font-size: clamp(1.6rem, 2.4vw, 2.5rem);
  line-height: 1.14;
  letter-spacing: -0.03em;
}

.app-verified-like-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #f4f3f7;
  color: #ef5350;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.app-verified-like-pill .app-symbol-icon {
  width: 18px;
  height: 18px;
}

.app-read-all-reviews {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  padding: 13px 28px;
  border: 2px solid #111;
  border-radius: 999px;
  color: #111;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-decoration: none;
}

@media (max-width: 700px) {
  .app-verified-reviews-heading {
    align-items: center;
  }

  .app-verified-reviews-heading > p {
    font-size: 0.8rem;
  }

  .app-verified-review-card p {
    font-size: 1.95rem;
  }
}

/* Final mobile rescue: prevent hero clipping and keep score circles usable. */
.homepage-authority-link {
  margin-top: 18px !important;
  margin-bottom: 26px !important;
}

@media (max-width: 760px) {
  .home-hero-search-first {
    overflow: hidden !important;
    padding: 70px 18px 28px !important;
  }

  .home-hero-search-first .home-hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .home-hero-search-first .eyebrow {
    margin-bottom: 16px !important;
  }

  .home-hero-search-first .home-hero-copy h1 {
    width: min(100%, 340px) !important;
    max-width: 340px !important;
    margin: 0 0 18px !important;
    font-size: clamp(3.05rem, 13.2vw, 4.25rem) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.055em !important;
    overflow: visible !important;
  }

  .hero-selling-copy {
    width: min(100%, 340px) !important;
    max-width: 340px !important;
    margin-bottom: 22px !important;
    font-size: 1.02rem !important;
    line-height: 1.42 !important;
    letter-spacing: -0.02em !important;
  }

  .home-hero-search-first .product-search-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .home-hero-search-first .product-search {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 66px !important;
    margin: 0 !important;
    padding: 8px 9px 8px 16px !important;
    gap: 8px !important;
    border-radius: 999px !important;
    grid-template-columns: 28px minmax(0, 1fr) 52px !important;
  }

  .home-hero-search-first .product-search input {
    font-size: 0.94rem !important;
    font-weight: 720 !important;
  }

  .home-hero-search-first .product-search button {
    width: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 0 !important;
  }

  .home-hero-search-first .product-search button::after {
    content: '→';
    font-size: 1.35rem;
    line-height: 1;
  }

  .homepage-authority-link {
    width: 100% !important;
    margin: 18px 0 30px !important;
  }

  .homepage-authority-link a {
    width: 100% !important;
    min-height: 52px !important;
    padding: 0 14px !important;
    font-size: 0.92rem !important;
  }

  .app-score-pair,
  .rail-score-pair,
  .search-score-pair {
    gap: 7px !important;
    justify-content: center !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  .app-score-ring,
  .rail-score-pair .app-score-ring,
  .product-card .app-score-ring {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    inline-size: 48px !important;
    block-size: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    aspect-ratio: 1 / 1 !important;
    box-sizing: border-box !important;
  }

  .app-score-ring::before,
  .rail-score-pair .app-score-ring::before,
  .product-card .app-score-ring::before {
    inset: 4px !important;
  }

  .app-score-ring .app-symbol-icon,
  .app-score-ring span {
    display: none !important;
  }

  .app-score-ring strong,
  .rail-score-pair .app-score-ring strong,
  .product-card .app-score-ring strong {
    align-self: center !important;
    justify-self: center !important;
    margin: 0 !important;
    font-size: 1.08rem !important;
    line-height: 1 !important;
    letter-spacing: -0.03em !important;
  }

  .app-product-score-pair {
    gap: 18px !important;
    margin-bottom: 20px !important;
  }

  .app-product-score-pair .app-score-ring {
    flex-basis: 74px !important;
    width: 74px !important;
    height: 74px !important;
    inline-size: 74px !important;
    block-size: 74px !important;
    min-width: 74px !important;
    min-height: 74px !important;
    max-width: 74px !important;
    max-height: 74px !important;
  }

  .app-product-score-pair .app-score-ring::before {
    inset: 6px !important;
  }

  .app-product-score-pair .app-score-ring strong {
    font-size: 1.55rem !important;
  }

  .search-suggestion-row {
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    min-height: 58px !important;
    gap: 9px !important;
    padding: 8px !important;
  }

  .search-suggestion-row img {
    width: 42px !important;
    height: 42px !important;
  }

  .search-score-pair .app-score-ring {
    flex-basis: 38px !important;
    width: 38px !important;
    height: 38px !important;
    inline-size: 38px !important;
    block-size: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
  }

  .search-score-pair .app-score-ring::before {
    inset: 3px !important;
  }

  .search-score-pair .app-score-ring strong {
    font-size: 0.88rem !important;
  }
}

/* App parity score circles: iOS CompactScoreCircle and AnimatedScoreCircle. */
.app-score-ring,
.app-score-ring-health {
  background: conic-gradient(var(--score-color, var(--green)) calc(var(--score) * 1%), var(--score-track, rgba(36, 154, 96, 0.15)) 0) !important;
}

.app-score-ring .app-symbol-icon,
.app-score-ring span,
.app-score-ring strong,
.app-score-ring-health span,
.app-score-ring-health strong {
  color: var(--score-color, var(--green)) !important;
}

@media (max-width: 760px) {
  .app-score-pair,
  .rail-score-pair,
  .search-score-pair {
    gap: 6px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .app-score-ring,
  .rail-score-pair .app-score-ring,
  .product-card .app-score-ring,
  .search-score-pair .app-score-ring {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    inline-size: 36px !important;
    block-size: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    aspect-ratio: 1 / 1 !important;
    box-sizing: border-box !important;
  }

  .app-score-ring::before,
  .rail-score-pair .app-score-ring::before,
  .product-card .app-score-ring::before,
  .search-score-pair .app-score-ring::before {
    inset: 4px !important;
  }

  .app-score-ring .app-symbol-icon,
  .app-score-ring span {
    display: inline-flex !important;
    align-self: start !important;
    justify-self: center !important;
    margin-top: 7px !important;
    font-size: 7.2px !important;
    line-height: 1 !important;
    color: var(--score-color, var(--green)) !important;
  }

  .app-score-ring strong,
  .rail-score-pair .app-score-ring strong,
  .product-card .app-score-ring strong,
  .search-score-pair .app-score-ring strong {
    display: block !important;
    align-self: end !important;
    justify-self: center !important;
    margin: 0 0 6px !important;
    color: var(--score-color, var(--green)) !important;
    font-family: var(--sans) !important;
    font-size: 8.8px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  .app-product-score-pair {
    gap: 24px !important;
    margin-bottom: 34px !important;
  }

  .app-product-score-pair .app-score-ring {
    flex-basis: 72px !important;
    width: 72px !important;
    height: 72px !important;
    inline-size: 72px !important;
    block-size: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    max-width: 72px !important;
    max-height: 72px !important;
    overflow: visible !important;
  }

  .app-product-score-pair .app-score-ring::before {
    inset: 6px !important;
  }

  .app-product-score-pair .app-score-ring .app-symbol-icon,
  .app-product-score-pair .app-score-ring span {
    display: inline-flex !important;
    align-self: start !important;
    justify-self: center !important;
    margin-top: 16px !important;
    font-size: 14.4px !important;
    color: var(--score-color, var(--green)) !important;
  }

  .app-product-score-pair .app-score-ring strong {
    align-self: start !important;
    justify-self: center !important;
    margin: 31px 0 0 !important;
    color: #111 !important;
    font-family: var(--sans) !important;
    font-size: 15.8px !important;
    font-weight: 800 !important;
    line-height: 0.95 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
  }

  .app-product-score-pair .app-score-ring strong::after {
    content: '/100';
    display: block;
    margin: 1px 0 0;
    color: #8e918d;
    font-size: 8.6px;
    font-weight: 500;
    line-height: 1;
  }

  .app-product-score-pair .app-score-ring::after {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    color: #8e918d;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
  }

  .app-product-score-pair .app-score-ring-reviews::after {
    content: 'Reviews';
  }

  .app-product-score-pair .app-score-ring-health::after {
    content: 'Health';
  }
}

/* Internal creator studio (/p) */
.p-studio {
  min-height: 100vh;
  background: #f6f7f3;
  color: #101511;
  font-family: var(--sans);
  padding: 42px min(5vw, 58px) 72px;
}

.p-auth-screen {
  display: grid;
  place-items: center;
}

.p-auth-card,
.p-empty-state,
.p-control-panel,
.p-output-panel,
.p-package-grid article {
  border: 1px solid rgba(16, 21, 17, 0.09);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 24px 80px rgba(16, 21, 17, 0.08);
}

.p-auth-card {
  width: min(100%, 520px);
  border-radius: 28px;
  padding: 34px;
}

.p-auth-card h1,
.p-topbar h1,
.p-output-header h2,
.p-empty-state h2 {
  margin: 0;
  font-family: var(--serif);
  line-height: 0.92;
  letter-spacing: -0.06em;
}

.p-auth-card h1 {
  margin-top: 12px;
  margin-bottom: 18px;
  font-size: clamp(3.3rem, 6.2vw, 5.2rem);
  line-height: 0.9;
}

.p-auth-card p,
.p-topbar p,
.p-empty-state p,
.p-output-header p {
  color: #6e756f;
  font-size: 1.02rem;
  font-weight: 750;
  line-height: 1.45;
}

.p-eyebrow {
  margin: 0;
  color: var(--green) !important;
  font-size: 0.78rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.p-error,
.p-warning,
.p-message {
  border-radius: 16px;
  padding: 13px 15px;
  background: rgba(36, 154, 96, 0.1);
  color: #176339;
  font-weight: 850;
  line-height: 1.35;
}

.p-error,
.p-message.is-error {
  background: rgba(205, 58, 52, 0.1);
  color: #a52924;
}

.p-warning {
  margin-bottom: 18px;
  background: rgba(218, 165, 32, 0.14);
  color: #7c5a05;
}

.p-warning code {
  border-radius: 7px;
  background: rgba(124, 90, 5, 0.1);
  padding: 2px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.p-warning small,
.p-message small {
  display: block;
  margin-top: 6px;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
}

.p-primary-button,
.p-ghost-button,
.p-account button,
.p-output-actions button,
.p-selected-product button,
.p-idea-buttons button {
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-weight: 950;
}

.p-primary-button {
  width: 100%;
  min-height: 54px;
  margin-top: 18px;
  background: #101511;
  color: #fff;
}

.p-primary-button:disabled {
  cursor: wait;
  opacity: 0.64;
}

.p-ghost-button {
  width: 100%;
  min-height: 48px;
  margin-top: 10px;
  background: #eef1ec;
  color: #101511;
}

.p-idea-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.p-idea-buttons button {
  display: grid;
  gap: 4px;
  min-height: 76px;
  padding: 12px;
  border: 1px solid rgba(16, 21, 17, 0.1);
  background: #fff;
  color: #101511;
  font-size: 0.86rem;
  text-align: left;
}

.p-idea-buttons button.is-selected {
  border-color: rgba(36, 154, 96, 0.45);
  background: rgba(36, 154, 96, 0.1);
  color: #176339;
  box-shadow: 0 0 0 2px rgba(36, 154, 96, 0.08);
}

.p-idea-buttons button strong,
.p-idea-buttons button small {
  display: block;
}

.p-idea-buttons button small {
  color: #6e756f;
  font-size: 0.74rem;
  font-weight: 850;
  line-height: 1.25;
}

.p-idea-buttons button:disabled {
  cursor: wait;
  opacity: 0.58;
}

.p-layout-picker {
  display: grid;
  gap: 2px;
}

.p-layout-picker > span {
  color: #6e756f;
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.p-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 24px;
  margin: 0 auto 26px;
  max-width: 1500px;
}

.p-topbar h1 {
  margin-top: 8px;
  font-size: clamp(4.3rem, 8vw, 8.8rem);
}

.p-topbar p {
  max-width: 760px;
  margin: 16px 0 0;
}

.p-account {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  background: #fff;
  padding: 8px 9px 8px 16px;
  box-shadow: 0 14px 36px rgba(16, 21, 17, 0.08);
}

.p-account span {
  color: #6e756f;
  font-size: 0.88rem;
  font-weight: 850;
}

.p-account button,
.p-output-actions button,
.p-selected-product button {
  min-height: 36px;
  padding: 0 14px;
  background: #101511;
  color: #fff;
  font-size: 0.82rem;
}

.p-workspace {
  display: grid;
  grid-template-columns: minmax(320px, 430px) minmax(0, 1fr);
  gap: 22px;
  max-width: 1500px;
  margin: 0 auto;
}

.p-control-panel,
.p-output-panel {
  border-radius: 28px;
}

.p-control-panel {
  position: sticky;
  top: 22px;
  align-self: start;
  display: grid;
  gap: 14px;
  padding: 18px;
}

.p-output-panel {
  min-height: 760px;
  padding: 22px;
}

.p-field {
  display: grid;
  gap: 8px;
}

.p-field span,
.p-check span,
.p-selected-products > span,
.p-selected-product span {
  color: #6e756f;
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.p-field input,
.p-field textarea,
.p-field select {
  width: 100%;
  border: 1px solid rgba(16, 21, 17, 0.1);
  border-radius: 18px;
  background: #fff;
  color: #101511;
  font: inherit;
  font-weight: 800;
  line-height: 1.35;
  padding: 14px 15px;
  outline: none;
}

.p-field textarea {
  resize: vertical;
}

.p-check {
  display: flex;
  align-items: center;
  gap: 10px;
}

.p-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--green);
}

.p-product-results {
  display: grid;
  gap: 8px;
  max-height: 310px;
  overflow: auto;
  padding-right: 3px;
}

.p-product-results button,
.p-selected-product {
  display: grid;
  align-items: center;
  border: 1px solid rgba(16, 21, 17, 0.08);
  border-radius: 18px;
  background: #fff;
}

.p-selected-products {
  display: grid;
  gap: 8px;
}

.p-product-results button {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 11px;
  min-height: 58px;
  padding: 8px;
  cursor: pointer;
  text-align: left;
}

.p-product-results button.is-selected {
  border-color: rgba(36, 154, 96, 0.42);
  box-shadow: 0 0 0 3px rgba(36, 154, 96, 0.1);
}

.p-product-results img,
.p-selected-product img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.p-product-results strong,
.p-selected-product strong {
  display: block;
  overflow: hidden;
  color: #101511;
  font-size: 0.94rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-product-results small,
.p-selected-product p {
  color: #8b918b;
  font-size: 0.82rem;
  font-weight: 850;
}

.p-product-results em {
  font-style: normal;
  font-weight: 950;
}

.p-selected-product {
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
}

.p-selected-product-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.p-selected-product button {
  background: rgba(36, 154, 96, 0.1);
  color: var(--green);
}

.p-selected-product-actions button:last-child {
  background: #eef1ec;
  color: #101511;
}

.p-empty-state {
  display: grid;
  align-content: center;
  min-height: 710px;
  border-radius: 24px;
  padding: 34px;
}

.p-empty-state h2,
.p-output-header h2 {
  margin-top: 8px;
  font-size: clamp(3.4rem, 6vw, 6.4rem);
}

.p-recent-jobs {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.p-recent-jobs h3 {
  margin: 0;
  color: #101511;
  font-size: 1rem;
  font-weight: 950;
}

.p-recent-jobs button {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(16, 21, 17, 0.08);
  border-radius: 16px;
  background: #fff;
  color: #101511;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
}

.p-recent-jobs strong {
  overflow: hidden;
  font-size: 0.94rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-recent-jobs span {
  color: #656d67;
  font-size: 0.82rem;
  font-weight: 850;
}

.p-output-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px;
  margin-bottom: 20px;
}

.p-output-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.p-editor-shell {
  border: 1px solid rgba(16, 21, 17, 0.08);
  border-radius: 24px;
  background: #fff;
  padding: 20px;
}

.p-editor-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}

.p-editor-header h3 {
  margin: 6px 0 0;
  color: #101511;
  font-size: 1.5rem;
  font-weight: 950;
  letter-spacing: -0.04em;
}

.p-editor-header p {
  margin: 6px 0 0;
  color: #656d67;
  font-weight: 800;
  line-height: 1.4;
}

.p-slide-editor-layout {
  display: grid;
  grid-template-columns: minmax(620px, 1fr) minmax(340px, 420px);
  gap: 22px;
  align-items: start;
}

.p-canvas-column {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.p-canvas-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(16, 21, 17, 0.08);
  border-radius: 18px;
  background: #f6f7f3;
  padding: 9px;
}

.p-canvas-toolbar span {
  margin: 0 8px 0 4px;
  color: #6e756f;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.p-canvas-toolbar button {
  min-height: 36px;
  border: 1px solid rgba(16, 21, 17, 0.08);
  border-radius: 999px;
  background: #fff;
  color: #101511;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 950;
  padding: 0 14px;
}

.p-canvas-toolbar button.is-selected {
  border-color: rgba(36, 154, 96, 0.42);
  background: rgba(36, 154, 96, 0.1);
  color: var(--green);
}

.p-canvas-toolbar button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.p-canvas-stage {
  display: grid;
  place-items: center;
  min-height: min(78vh, 820px);
  border: 1px solid rgba(16, 21, 17, 0.08);
  border-radius: 26px;
  background:
    linear-gradient(45deg, rgba(16, 21, 17, 0.035) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(16, 21, 17, 0.035) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(16, 21, 17, 0.035) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(16, 21, 17, 0.035) 75%),
    #edf0ea;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
  background-size: 24px 24px;
  padding: 22px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  cursor: crosshair;
  touch-action: none;
  user-select: none;
}

.p-canvas-frame {
  position: relative;
  container-type: size;
  width: min(100%, 624px);
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  background: #101511;
  box-shadow: 0 28px 80px rgba(16, 21, 17, 0.22);
  overflow: hidden;
}

.p-canvas-frame > img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 22px;
  object-fit: contain;
  background: #101511;
}

.p-live-canvas-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.p-live-headline {
  position: absolute;
  color: #fff;
  font-family: Impact, "Arial Black", "Helvetica Neue", sans-serif;
  font-size: clamp(2rem, var(--live-headline-size, 9.4cqw), 6.2rem);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.62);
  outline: 2px solid rgba(255, 255, 255, 0.86);
  outline-offset: 8px;
}

.p-live-headline em {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.12em;
  font-style: italic;
  font-weight: 800;
  line-height: 0.82;
}

.p-live-reviews-logo {
  position: absolute;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.34));
}

.p-live-spotlight {
  position: absolute;
  display: grid;
  place-items: center;
  border: 4px solid #fff;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
  overflow: hidden;
}

.p-live-spotlight img {
  display: block;
  width: var(--live-spotlight-image, 72%);
  height: var(--live-spotlight-image, 72%);
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.12));
}

.p-slide-filmstrip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 4px 12px;
  scrollbar-width: thin;
}

.p-slide-thumb {
  position: relative;
  flex: 0 0 112px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 16px;
  background: #101511;
  padding: 0;
  cursor: pointer;
}

.p-slide-thumb.is-selected {
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(36, 154, 96, 0.13);
}

.p-slide-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.p-slide-thumb span {
  position: absolute;
  left: 10px;
  bottom: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #101511;
  padding: 6px 9px;
  font-size: 0.72rem;
  font-weight: 950;
}

.p-slide-form {
  position: sticky;
  top: 22px;
  display: grid;
  gap: 14px;
  max-height: calc(100vh - 44px);
  overflow: auto;
  border: 1px solid rgba(16, 21, 17, 0.08);
  border-radius: 20px;
  background: #f6f7f3;
  padding: 14px;
}

.p-tool-section {
  display: grid;
  gap: 11px;
  border: 1px solid rgba(16, 21, 17, 0.08);
  border-radius: 18px;
  background: #fff;
  padding: 13px;
}

.p-tool-section h4 {
  margin: 0;
  color: #101511;
  font-size: 0.95rem;
  font-weight: 950;
  letter-spacing: -0.02em;
}

.p-range-field {
  display: grid;
  gap: 7px;
}

.p-range-field span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #6e756f;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.p-range-field em {
  border-radius: 999px;
  background: rgba(36, 154, 96, 0.1);
  color: var(--green);
  padding: 3px 8px;
  font-style: normal;
  letter-spacing: 0;
}

.p-range-field input[type='range'] {
  width: 100%;
  accent-color: var(--green);
}

.p-check-field {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #101511;
  font-size: 0.86rem;
  font-weight: 850;
}

.p-check-field input {
  width: 18px;
  height: 18px;
  accent-color: var(--green);
}

.p-nudge-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.p-single-action-row {
  grid-template-columns: 1fr;
}

.p-nudge-row button {
  min-height: 36px;
  border: 1px solid rgba(16, 21, 17, 0.08);
  border-radius: 999px;
  background: #eef1ec;
  color: #101511;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 950;
}

.p-nudge-row button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.p-progress-panel {
  display: grid;
  gap: 14px;
}

.p-slide-card {
  display: grid;
  gap: 10px;
}

.p-slide-preview {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 22px;
  background: radial-gradient(circle at 30% 18%, rgba(36, 154, 96, 0.2), transparent 34%), #101511;
  background-position: center;
  background-size: cover;
  color: #fff;
}

.p-slide-preview::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.74));
}

.p-slide-preview > span {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  padding: 7px 10px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.p-slide-preview > div {
  position: absolute;
  z-index: 2;
  inset: auto 16px 16px;
}

.p-slide-preview em {
  display: inline-flex;
  margin-bottom: 8px;
  border-radius: 999px;
  background: var(--green);
  padding: 6px 9px;
  color: #fff;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.p-slide-preview strong {
  display: block;
  font-size: clamp(1.65rem, 3vw, 2.75rem);
  font-weight: 950;
  line-height: 0.9;
  letter-spacing: -0.055em;
}

.p-slide-preview p {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.25;
}

.p-slide-copy {
  border-radius: 18px;
  background: #fff;
  padding: 13px;
}

.p-slide-copy span {
  color: var(--green);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.p-slide-copy p,
.p-slide-copy small,
.p-package-grid p,
.p-package-grid li,
.p-package-grid small {
  color: #656d67;
  font-weight: 780;
  line-height: 1.45;
}

.p-slide-copy details {
  margin-top: 9px;
}

.p-slide-copy summary {
  cursor: pointer;
  color: #101511;
  font-weight: 950;
}

.p-package-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.p-package-grid article {
  display: grid;
  gap: 9px;
  border-radius: 22px;
  padding: 18px;
}

.p-package-grid h3,
.p-package-grid h4 {
  margin: 0;
  color: #101511;
  font-weight: 950;
  letter-spacing: -0.035em;
}

.p-package-grid pre {
  max-height: 360px;
  overflow: auto;
  border-radius: 16px;
  background: #f4f5f1;
  color: #26302a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.84rem;
  line-height: 1.5;
  white-space: pre-wrap;
  padding: 14px;
}

.p-package-grid a {
  display: grid;
  gap: 4px;
  border-top: 1px solid rgba(16, 21, 17, 0.08);
  color: #101511;
  padding-top: 9px;
  text-decoration: none;
}

.p-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.p-chip-list span {
  border-radius: 999px;
  background: rgba(36, 154, 96, 0.1);
  color: var(--green);
  padding: 8px 11px;
  font-size: 0.78rem;
  font-weight: 950;
}

.p-studio-office-surface {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 8%, rgba(139, 92, 246, 0.38), transparent 30%),
    radial-gradient(circle at 88% 4%, rgba(6, 182, 212, 0.42), transparent 34%),
    radial-gradient(circle at 60% 82%, rgba(236, 72, 153, 0.2), transparent 34%),
    linear-gradient(135deg, #070a10 0%, #101a2b 48%, #061a1d 100%);
  color: rgba(255, 255, 255, 0.92);
}

body:has(.p-studio-office-surface) {
  background: #070a10;
}

body:has(.p-studio-office-surface) .app-install-banner,
body:has(.p-studio-office-surface) .site-header,
body:has(.p-studio-office-surface) .site-footer,
body:has(.p-studio-office-surface) footer {
  display: none !important;
}

.p-studio-office-surface::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.12), transparent 22%, rgba(255, 255, 255, 0.08) 48%, transparent 72%),
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.12), transparent 36%);
  mix-blend-mode: screen;
  opacity: 0.62;
}

.p-studio-office-surface .p-topbar,
.office-creator-cockpit {
  position: relative;
  z-index: 1;
}

.p-studio-office-surface .p-topbar {
  align-items: center;
  margin-bottom: 18px;
}

.p-studio-office-surface .p-topbar h1 {
  color: #fff;
  max-width: 900px;
  text-shadow: 0 30px 90px rgba(0, 0, 0, 0.36);
}

.p-studio-office-surface .p-topbar p,
.p-studio-office-surface .p-account span {
  color: rgba(255, 255, 255, 0.68);
}

.p-studio-office-surface .p-account,
.office-creator-glass,
.p-studio-office-surface .p-control-panel,
.p-studio-office-surface .p-output-panel {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)),
    rgba(8, 13, 22, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 26px 90px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(28px) saturate(1.28);
  -webkit-backdrop-filter: blur(28px) saturate(1.28);
}

.office-creator-cockpit {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  gap: 18px;
  max-width: 1500px;
  margin: 0 auto 22px;
}

.office-creator-glass {
  border-radius: 32px;
  padding: 18px;
}

.office-creator-hero {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  align-items: center;
  gap: 24px;
  min-height: 360px;
}

.office-creator-hero h2,
.office-section-heading h3 {
  margin: 8px 0 0;
  color: #fff;
  font-family: var(--serif);
  letter-spacing: -0.06em;
  line-height: 0.92;
}

.office-creator-hero h2 {
  max-width: 820px;
  font-size: clamp(3rem, 6vw, 7rem);
}

.office-creator-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 820px;
  margin-top: 24px;
}

.office-creator-status-grid div,
.office-approval-checks div,
.office-idea-grid article,
.office-brainstorm-search,
.office-phone-caption {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.office-creator-status-grid div {
  display: grid;
  gap: 5px;
  border-radius: 22px;
  padding: 14px;
}

.office-creator-status-grid span,
.office-approval-checks em,
.office-phone-caption span,
.office-idea-grid span,
.office-brainstorm-search span {
  color: rgba(255, 255, 255, 0.54);
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.office-creator-status-grid strong,
.office-phone-caption strong {
  overflow: hidden;
  color: #fff;
  font-size: 1.08rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.office-phone-sim {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.office-phone-shell {
  position: relative;
  width: min(100%, 300px);
  aspect-ratio: 9 / 18.7;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 42px;
  background: linear-gradient(145deg, #0a0c10, #1b2230);
  padding: 12px;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.06),
    0 30px 90px rgba(0, 0, 0, 0.48);
}

.office-phone-speaker {
  position: absolute;
  z-index: 3;
  top: 22px;
  left: 50%;
  width: 88px;
  height: 26px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: #05070a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.office-phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 32px;
  background:
    radial-gradient(circle at 30% 14%, rgba(255, 255, 255, 0.18), transparent 28%),
    linear-gradient(145deg, #f7f9f4, #dce5ef);
}

.office-phone-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.office-phone-placeholder {
  display: grid;
  align-content: center;
  gap: 10px;
  height: 100%;
  padding: 54px 18px 24px;
  color: #0d1512;
}

.office-phone-placeholder > strong {
  font-family: var(--serif);
  font-size: 2.5rem;
  line-height: 0.9;
  letter-spacing: -0.06em;
}

.office-phone-placeholder > em {
  color: rgba(13, 21, 18, 0.52);
  font-style: normal;
  font-weight: 850;
}

.office-phone-placeholder div {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.72);
  padding: 8px;
}

.office-phone-placeholder img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.office-phone-placeholder div strong {
  overflow: hidden;
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.office-phone-caption {
  display: grid;
  gap: 3px;
  width: min(100%, 320px);
  border-radius: 18px;
  padding: 12px 14px;
}

.office-section-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.office-section-heading h3 {
  font-size: clamp(2rem, 3vw, 3.25rem);
}

.office-section-heading button,
.office-idea-grid article > div button,
.office-quick-searches button {
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 950;
  padding: 0 14px;
}

.office-section-heading button:not(:disabled):hover,
.office-idea-grid article > div button:not(:disabled):hover,
.office-quick-searches button:hover {
  background: rgba(255, 255, 255, 0.2);
}

.office-section-heading button:disabled,
.office-idea-grid article > div button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.office-brainstorm-search {
  display: grid;
  gap: 8px;
  border-radius: 22px;
  padding: 12px;
}

.office-brainstorm-search input {
  width: 100%;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 1.12rem;
  font-weight: 900;
  outline: 0;
}

.office-brainstorm-search input::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.office-quick-searches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.office-quick-searches button {
  min-height: 34px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.76rem;
}

.office-idea-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.office-idea-grid article {
  overflow: hidden;
  border-radius: 24px;
}

.office-idea-grid article.is-selected {
  border-color: rgba(134, 239, 172, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 0 3px rgba(34, 197, 94, 0.12);
}

.office-idea-grid article > button {
  display: grid;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  padding: 14px;
  text-align: left;
}

.office-idea-grid strong {
  color: #fff;
  font-size: 1.04rem;
  font-weight: 950;
  letter-spacing: -0.03em;
}

.office-idea-grid em,
.office-idea-grid small {
  color: rgba(255, 255, 255, 0.7);
  font-style: normal;
  font-weight: 820;
  line-height: 1.28;
}

.office-idea-grid small {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.78rem;
}

.office-idea-grid article > div {
  display: flex;
  gap: 8px;
  padding: 0 14px 14px;
}

.office-idea-grid article > div button:last-child,
.office-section-heading button {
  background: #f5f7fb;
  color: #081018;
}

.office-approval-panel {
  align-self: start;
}

.office-approval-checks {
  display: grid;
  gap: 9px;
}

.office-approval-checks div {
  display: grid;
  grid-template-columns: 30px minmax(0, 0.72fr) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border-radius: 18px;
  padding: 10px;
}

.office-approval-checks div > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.16);
  color: #fde68a;
  font-weight: 950;
}

.office-approval-checks div.is-ok > span {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
}

.office-approval-checks strong {
  overflow: hidden;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.office-approval-checks em {
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
}

.p-studio-office-surface .p-workspace {
  position: relative;
  z-index: 1;
}

.p-studio-office-surface .p-control-panel,
.p-studio-office-surface .p-output-panel {
  color: rgba(255, 255, 255, 0.9);
}

.p-studio-office-surface .p-field span,
.p-studio-office-surface .p-check span,
.p-studio-office-surface .p-selected-products > span,
.p-studio-office-surface .p-selected-product span,
.p-studio-office-surface .p-layout-picker > span {
  color: rgba(255, 255, 255, 0.54);
}

.p-studio-office-surface .p-field input,
.p-studio-office-surface .p-field textarea,
.p-studio-office-surface .p-field select,
.p-studio-office-surface .p-product-results button,
.p-studio-office-surface .p-selected-product,
.p-studio-office-surface .p-recent-jobs button,
.p-studio-office-surface .p-tool-section,
.p-studio-office-surface .p-slide-form,
.p-studio-office-surface .p-editor-shell,
.p-studio-office-surface .p-canvas-toolbar,
.p-studio-office-surface .p-slide-copy,
.p-studio-office-surface .p-package-grid article {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.p-studio-office-surface .p-product-results strong,
.p-studio-office-surface .p-selected-product strong,
.p-studio-office-surface .p-recent-jobs h3,
.p-studio-office-surface .p-recent-jobs strong,
.p-studio-office-surface .p-editor-header h3,
.p-studio-office-surface .p-tool-section h4,
.p-studio-office-surface .p-output-header h2,
.p-studio-office-surface .p-empty-state h2 {
  color: #fff;
}

.p-studio-office-surface .p-product-results small,
.p-studio-office-surface .p-selected-product p,
.p-studio-office-surface .p-recent-jobs span,
.p-studio-office-surface .p-editor-header p,
.p-studio-office-surface .p-output-header p,
.p-studio-office-surface .p-empty-state p,
.p-studio-office-surface .p-slide-copy p,
.p-studio-office-surface .p-slide-copy small {
  color: rgba(255, 255, 255, 0.58);
}

.p-studio-office-surface .p-primary-button,
.p-studio-office-surface .p-account button,
.p-studio-office-surface .p-output-actions button {
  background: #f5f7fb;
  color: #081018;
}

.p-studio-office-surface .p-output-actions button:not(.p-primary-button) {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.p-studio-office-surface .p-canvas-stage {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at 22% 12%, rgba(139, 92, 246, 0.24), transparent 34%),
    radial-gradient(circle at 80% 82%, rgba(6, 182, 212, 0.18), transparent 34%),
    rgba(255, 255, 255, 0.08);
}

@media (max-width: 1100px) {
  .p-workspace,
  .p-topbar,
  .p-output-header,
  .office-creator-cockpit,
  .office-creator-hero {
    grid-template-columns: 1fr;
  }

  .p-control-panel {
    position: static;
  }

  .p-output-actions {
    justify-content: flex-start;
  }

  .p-editor-header,
  .p-slide-editor-layout {
    grid-template-columns: 1fr;
  }

  .p-slide-form {
    position: static;
    max-height: none;
  }

  .p-canvas-stage {
    min-height: auto;
  }

  .p-canvas-frame {
    width: min(100%, 560px);
  }

  .office-creator-status-grid,
  .office-idea-grid {
    grid-template-columns: 1fr 1fr;
  }

}

@media (max-width: 700px) {
  .p-studio {
    padding: 24px 14px 52px;
  }

  .p-topbar h1,
  .p-empty-state h2,
  .p-output-header h2 {
    font-size: 3.65rem;
  }

  .p-account {
    align-items: stretch;
    flex-direction: column;
    border-radius: 22px;
  }

  .p-output-panel,
  .p-control-panel {
    padding: 14px;
  }

  .p-package-grid {
    grid-template-columns: 1fr;
  }

  .p-canvas-stage {
    padding: 10px;
  }

  .p-slide-thumb {
    flex-basis: 86px;
  }

  .p-nudge-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Reviews launch redesign: app-matched editorial web system */
body {
  background: #fff !important;
  color: #111312;
}

.site-header {
  width: min(1160px, calc(100% - 40px));
  margin: 18px auto 0;
  border: 1px solid rgba(17, 19, 18, 0.07);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 22px 70px rgba(17, 19, 18, 0.07);
  backdrop-filter: blur(24px) saturate(1.15);
}

.brand-logo {
  width: 164px;
  height: auto;
}

.site-header nav {
  gap: 20px;
}

.site-header nav a:not(.nav-cta) {
  color: rgba(17, 19, 18, 0.68);
  font-size: 0.9rem;
  font-weight: 750 !important;
  letter-spacing: 0;
}

.nav-cta,
.app-download-button,
.launch-primary-cta,
.footer-waitlist-cta {
  border: 1px solid rgba(17, 19, 18, 0.9) !important;
  background: #111312 !important;
  color: #fff !important;
  box-shadow: 0 18px 44px rgba(17, 19, 18, 0.18) !important;
}

.launch-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.74fr);
  align-items: center;
  gap: 58px;
  width: min(1160px, calc(100% - 40px));
  min-height: calc(100vh - 96px);
  margin: 0 auto;
  padding: 32px 0 30px;
}

.launch-hero-copy {
  display: grid;
  align-content: center;
  gap: 22px;
}

.eyebrow {
  color: #249a60 !important;
  font-size: 0.74rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
}

.launch-hero h1 {
  max-width: 730px;
  margin: 0;
  color: #111312;
  font-family: var(--serif);
  font-size: 7.45rem;
  font-weight: 500;
  line-height: 0.82;
  letter-spacing: 0;
}

.launch-hero .hero-selling-copy {
  max-width: 660px;
  margin: 0;
  color: rgba(17, 19, 18, 0.62);
  font-size: 1.28rem;
  font-weight: 650;
  line-height: 1.38;
  letter-spacing: 0;
}

.launch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

.launch-primary-cta,
.launch-secondary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  border-radius: 999px;
  padding: 0 28px;
  font-weight: 850;
  letter-spacing: 0;
}

.launch-secondary-cta {
  border: 1px solid rgba(17, 19, 18, 0.08);
  background: rgba(255, 255, 255, 0.84);
  color: #111312;
  box-shadow: 0 18px 50px rgba(17, 19, 18, 0.07);
}

.launch-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.launch-trust-row span {
  border: 1px solid rgba(36, 154, 96, 0.14);
  border-radius: 999px;
  background: #fff;
  color: rgba(17, 19, 18, 0.58);
  padding: 10px 13px;
  font-size: 0.82rem;
  font-weight: 800;
}

.launch-phone-stage {
  display: grid;
  place-items: center;
  min-height: 640px;
}

.launch-phone {
  position: relative;
  width: min(362px, 100%);
  aspect-ratio: 0.48;
  overflow: hidden;
  border: 12px solid #111312;
  border-radius: 54px;
  background: #f7f8f6;
  box-shadow: 0 42px 110px rgba(17, 19, 18, 0.18);
}

.launch-phone::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(circle at 68% 18%, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0) 28%),
    linear-gradient(180deg, rgba(255,255,255,0.9), rgba(246,248,246,0.26) 26%, rgba(255,255,255,0.9) 70%, #fff 100%),
    linear-gradient(135deg, #eef1ed, #d8ddd8 42%, #f7f7f4);
  opacity: 1;
}

.launch-phone-status,
.launch-scan-topbar,
.launch-viewfinder,
.launch-scan-copy,
.launch-result-card,
.launch-glass-nav {
  position: relative;
  z-index: 2;
}

.launch-phone-status {
  display: flex;
  justify-content: space-between;
  padding: 19px 24px 0;
  color: #111312;
  font-size: 0.92rem;
  font-weight: 850;
}

.launch-scan-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 34px 22px 0;
}

.scan-lens-pill,
.scan-flash {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.68);
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 18px 44px rgba(17, 19, 18, 0.09), inset 0 1px 0 rgba(255,255,255,0.92);
  backdrop-filter: blur(18px);
}

.scan-lens-pill {
  gap: 10px;
  min-height: 54px;
  border-radius: 999px;
  padding: 9px 16px 9px 11px;
}

.scan-lens-pill img {
  width: 27px;
  height: 27px;
  object-fit: contain;
}

.scan-lens-pill span {
  display: grid;
  color: #111312;
  font-family: var(--serif);
  font-size: 1.14rem;
  line-height: 1;
  letter-spacing: 0;
}

.scan-lens-pill em {
  color: rgba(17, 19, 18, 0.52);
  font-family: var(--sans);
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.scan-flash {
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: #111312;
  font-size: 1.5rem;
}

.launch-viewfinder {
  width: 68%;
  height: 142px;
  margin: 104px auto 0;
  border-radius: 30px;
  background: rgba(17, 19, 18, 0.1);
  backdrop-filter: blur(1.5px);
}

.launch-viewfinder span {
  position: absolute;
  width: 56px;
  height: 44px;
  border-color: #fff;
  border-style: solid;
  filter: drop-shadow(0 8px 18px rgba(17, 19, 18, 0.16));
}

.launch-viewfinder span:nth-child(1) { top: -2px; left: -2px; border-width: 6px 0 0 6px; border-radius: 18px 0 0 0; }
.launch-viewfinder span:nth-child(2) { top: -2px; right: -2px; border-width: 6px 6px 0 0; border-radius: 0 18px 0 0; }
.launch-viewfinder span:nth-child(3) { bottom: -2px; left: -2px; border-width: 0 0 6px 6px; border-radius: 0 0 0 18px; }
.launch-viewfinder span:nth-child(4) { right: -2px; bottom: -2px; border-width: 0 6px 6px 0; border-radius: 0 0 18px 0; }

.launch-viewfinder em {
  position: absolute;
  bottom: -42px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: rgba(17, 19, 18, 0.72);
  padding: 9px 15px;
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 800;
}

.launch-scan-copy {
  display: grid;
  gap: 8px;
  margin-top: 142px;
  text-align: center;
}

.launch-scan-copy h2 {
  margin: 0;
  color: #111312;
  font-family: var(--serif);
  font-size: 2.1rem;
  font-weight: 500;
  letter-spacing: 0;
}

.launch-result-card {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 14px;
  align-items: center;
  width: calc(100% - 38px);
  margin: 20px auto 0;
  border: 1px solid rgba(17, 19, 18, 0.07);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  padding: 12px;
  box-shadow: 0 22px 62px rgba(17, 19, 18, 0.1);
  backdrop-filter: blur(18px);
}

.launch-result-card > img {
  width: 78px;
  height: 78px;
  object-fit: contain;
}

.launch-result-copy {
  min-width: 0;
}

.launch-result-copy > span {
  display: block;
  overflow: hidden;
  color: rgba(17, 19, 18, 0.48);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.launch-result-copy > strong {
  display: block;
  overflow: hidden;
  color: #111312;
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.launch-score-row {
  display: flex;
  gap: 8px;
  margin-top: 9px;
}

.launch-score-circle {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: #249a60;
  background: conic-gradient(currentColor 82%, rgba(36,154,96,0.12) 0);
}

.launch-score-circle-health {
  color: #66b34f;
  background: conic-gradient(currentColor 74%, rgba(102,179,79,0.13) 0);
}

.launch-score-circle::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #fff;
}

.launch-score-circle .app-symbol-icon,
.launch-score-circle b,
.launch-score-circle small {
  position: relative;
  z-index: 1;
}

.launch-score-circle .app-symbol-icon {
  width: 13px;
  height: 13px;
  margin-top: 8px;
}

.launch-score-circle b {
  margin-top: -7px;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0;
}

.launch-score-circle small {
  position: absolute;
  top: calc(100% + 6px);
  color: rgba(17, 19, 18, 0.48);
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.launch-glass-nav {
  position: absolute;
  right: 18px;
  bottom: 22px;
  left: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 58px;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  padding: 10px;
  box-shadow: 0 22px 68px rgba(17, 19, 18, 0.14), inset 0 1px 0 rgba(255,255,255,0.96);
  backdrop-filter: blur(20px) saturate(1.1);
}

.launch-glass-nav span {
  display: grid;
  place-items: center;
  color: rgba(17, 19, 18, 0.45);
  font-size: 1.34rem;
  font-weight: 800;
}

.launch-glass-nav span.is-active {
  color: #111312;
}

.launch-glass-nav small {
  margin-top: 2px;
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0;
}

.launch-glass-nav strong {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(255,255,255,0.86);
  box-shadow: 0 14px 40px rgba(17, 19, 18, 0.12);
  color: #111312;
  font-size: 1.72rem;
}

.section-shell {
  width: min(1160px, calc(100% - 40px));
  margin-right: auto;
  margin-left: auto;
}

.launch-search-panel {
  border: 1px solid rgba(17, 19, 18, 0.07);
  border-radius: 34px;
  background: #fff;
  padding: clamp(24px, 4vw, 42px);
  box-shadow: 0 24px 72px rgba(17, 19, 18, 0.06);
}

.section-heading h2,
.rail-heading h3,
.site-footer h2,
.app-download-cta h2,
.archive-hero h1,
.product-hero h1 {
  color: #111312 !important;
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

.section-heading h2 {
  font-size: 4.5rem !important;
  line-height: 0.9 !important;
}

.section-heading p,
.archive-hero p,
.app-download-cta p,
.site-footer p {
  color: rgba(17, 19, 18, 0.56) !important;
  font-weight: 650;
  letter-spacing: 0;
}

.product-search {
  border: 1px solid rgba(17, 19, 18, 0.07) !important;
  background: rgba(255,255,255,0.9) !important;
  box-shadow: 0 20px 62px rgba(17, 19, 18, 0.07), inset 0 1px 0 rgba(255,255,255,0.96) !important;
  backdrop-filter: blur(18px);
}

.product-search button {
  background: #111312 !important;
  color: #fff !important;
  box-shadow: none !important;
}

.launch-category-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 22px;
}

.launch-category-icons a,
.top-picks-parent {
  display: grid;
  justify-items: center;
  gap: 9px;
  min-width: 92px;
  color: rgba(17, 19, 18, 0.62);
  font-size: 0.92rem;
  font-weight: 800;
}

.launch-category-icons img,
.top-picks-parent-icon {
  width: 58px !important;
  height: 58px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.launch-category-icons img,
.top-picks-parent-icon img {
  object-fit: contain;
}

.top-picks-parent.is-active {
  color: #111312 !important;
}

.launch-feature-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding-top: 32px;
}

.launch-feature-strip article {
  min-height: 250px;
  border: 1px solid rgba(17, 19, 18, 0.07);
  border-radius: 30px;
  background: #fff;
  padding: 28px;
  box-shadow: 0 22px 70px rgba(17, 19, 18, 0.06);
}

.launch-feature-strip img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  margin-bottom: 24px;
}

.launch-feature-strip h2 {
  margin: 0;
  max-width: 340px;
  color: #111312;
  font-family: var(--serif);
  font-size: 3.15rem;
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: 0;
}

.launch-ranking-rails {
  padding-top: clamp(48px, 7vw, 84px);
}

.product-rail {
  gap: clamp(20px, 3vw, 34px) !important;
}

.product-card,
.rail-card {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.product-float-zone,
.rail-art {
  background: transparent !important;
  box-shadow: none !important;
}

.product-float-zone img,
.rail-art img {
  object-fit: contain !important;
  filter: drop-shadow(0 18px 30px rgba(17, 19, 18, 0.1));
}

.product-rank-bubble {
  border: 1px solid rgba(36, 154, 96, 0.16) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  color: #111312 !important;
  box-shadow: 0 10px 28px rgba(17, 19, 18, 0.08) !important;
  backdrop-filter: blur(14px);
}

.product-card-copy h3,
.rail-card h4 {
  color: #111312 !important;
  font-size: 1.16rem !important;
  font-weight: 850 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

.product-card-copy span,
.rail-card p {
  color: rgba(17, 19, 18, 0.42) !important;
  font-weight: 700 !important;
}

.app-score-ring {
  background: conic-gradient(var(--score-color, #249a60) calc(var(--score) * 1%), var(--score-track, rgba(36,154,96,0.13)) 0) !important;
}

.app-score-ring strong,
.app-score-ring .app-symbol-icon {
  color: var(--score-color, #249a60) !important;
}

.app-score-ring::before {
  box-shadow: inset 0 0 0 1px rgba(17, 19, 18, 0.03);
}

.app-trending-board,
.shelf-section,
.final-waitlist {
  padding-top: clamp(48px, 7vw, 82px);
}

.waitlist-card,
.app-download-cta,
.site-footer-cta,
.seo-link-panel,
.archive-hero {
  border: 1px solid rgba(17, 19, 18, 0.07) !important;
  background: #fff !important;
  box-shadow: 0 24px 72px rgba(17, 19, 18, 0.06) !important;
}

.site-footer {
  width: min(1160px, calc(100% - 40px));
  margin: 64px auto 28px;
  border-radius: 34px;
  background: #f7f8f6;
}

@media (max-width: 980px) {
  .launch-hero {
    grid-template-columns: 1fr;
    padding-top: 32px;
  }

  .launch-phone-stage {
    min-height: auto;
  }

  .launch-phone {
    width: min(390px, 100%);
  }

  .launch-feature-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .site-header {
    width: calc(100% - 24px);
    margin-top: 12px;
    padding: 10px 12px;
  }

  .brand-logo {
    width: 132px;
  }

  .site-header nav a:not(.nav-cta) {
    display: none;
  }

  .nav-cta {
    min-height: 44px;
    padding: 0 16px !important;
    font-size: 0.78rem !important;
  }

  .launch-hero,
  .section-shell,
  .site-footer {
    width: calc(100% - 24px);
  }

  .launch-hero {
    min-height: auto;
    gap: 28px;
    padding-top: 28px;
  }

  .launch-hero h1 {
    font-size: 4.72rem;
  }

  .launch-hero .hero-selling-copy {
    font-size: 1.08rem;
  }

  .launch-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .launch-primary-cta,
  .launch-secondary-cta {
    width: 100%;
  }

  .launch-trust-row {
    display: none;
  }

  .launch-phone {
    width: min(342px, 100%);
    border-width: 9px;
    border-radius: 44px;
  }

  .launch-scan-topbar {
    padding-top: 24px;
  }

  .launch-viewfinder {
    height: 116px;
    margin-top: 88px;
  }

  .launch-scan-copy {
    margin-top: 132px;
  }

  .launch-result-card {
    grid-template-columns: 64px 1fr;
    margin-top: 18px;
  }

  .launch-result-card > img {
    width: 64px;
    height: 64px;
  }

  .launch-glass-nav {
    right: 12px;
    bottom: 14px;
    left: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr)) 48px;
    padding: 8px;
  }

  .launch-glass-nav strong {
    width: 48px;
    height: 48px;
  }

  .launch-search-panel {
    border-radius: 26px;
    padding: 20px;
  }

  .launch-category-icons {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-right: -20px;
    padding-right: 20px;
    scrollbar-width: none;
  }

  .launch-category-icons::-webkit-scrollbar {
    display: none;
  }

  .launch-category-icons a {
    flex: 0 0 auto;
  }

  .section-heading h2 {
    font-size: 3.64rem !important;
  }

  .product-search {
    min-height: 68px !important;
  }

  .product-search button {
    width: 54px !important;
    min-width: 54px !important;
    height: 54px !important;
    padding: 0 !important;
    font-size: 0 !important;
  }

  .product-search button::after {
    content: '→';
    font-size: 2rem;
    line-height: 1;
  }
}

/* True final app-faithful overrides. Keep this at EOF so legacy launch CSS cannot win. */
body {
  background: #fff !important;
}

.site-header {
  width: min(1120px, calc(100% - 32px)) !important;
  min-height: 70px !important;
  margin: 14px auto 0 !important;
  padding: 12px 14px 12px 18px !important;
  border: 1px solid rgba(17, 19, 18, 0.065) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 18px 54px rgba(17, 19, 18, 0.055) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
}

.app-site-hero,
.app-site-section {
  width: min(1120px, calc(100% - 32px)) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.app-site-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 0.86fr) minmax(360px, 0.9fr) !important;
  align-items: center !important;
  gap: clamp(36px, 6vw, 72px) !important;
  min-height: min(640px, calc(100svh - 86px)) !important;
  padding: clamp(38px, 5.8vw, 64px) 0 clamp(28px, 4vw, 46px) !important;
}

.app-site-hero h1 {
  max-width: 600px !important;
  font-size: clamp(3.7rem, 6.6vw, 6.7rem) !important;
  line-height: 0.9 !important;
  letter-spacing: 0 !important;
}

.app-hero-product-card {
  display: grid !important;
  grid-template-columns: minmax(150px, 0.74fr) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(22px, 4vw, 38px) !important;
  min-height: 372px !important;
  padding: clamp(22px, 3.4vw, 32px) !important;
  overflow: hidden !important;
  border: 1px solid rgba(17, 19, 18, 0.065) !important;
  border-radius: 30px !important;
  background: #fff !important;
  box-shadow: 0 22px 60px rgba(17, 19, 18, 0.07) !important;
}

.app-product-art {
  min-height: 286px !important;
  background: transparent !important;
}

.app-product-art img {
  width: min(100%, 300px) !important;
  max-height: 300px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 24px 42px rgba(17, 19, 18, 0.11)) !important;
}

.app-product-detail-copy h2 {
  font-size: clamp(2rem, 3.1vw, 3.18rem) !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
}

.app-site .eyebrow,
.eyebrow {
  color: #229a5c !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}

.app-section-heading h2,
.app-scan-copy h2 {
  font-size: clamp(3rem, 5.6vw, 5.7rem) !important;
  line-height: 0.9 !important;
  letter-spacing: 0 !important;
}

.app-score-ring,
.score-ring,
.app-hero-score-ring {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  background: conic-gradient(var(--score-color, #229a5c) calc(var(--score) * 1%), var(--score-track, rgba(34, 154, 92, 0.11)) 0) !important;
  box-shadow: none !important;
}

.app-score-ring::before,
.score-ring::before,
.app-hero-score-ring::before {
  content: '' !important;
  position: absolute !important;
  inset: 4px !important;
  border-radius: inherit !important;
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.96) 0 62%, transparent 63%),
    color-mix(in srgb, var(--score-color, #229a5c) 5.5%, #fff) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--score-color, #229a5c) 8%, transparent) !important;
}

.app-score-ring > *,
.score-ring > *,
.app-hero-score-ring > * {
  position: relative !important;
  z-index: 1 !important;
}

.app-score-ring .app-symbol-icon,
.score-ring .app-symbol-icon,
.app-hero-score-ring .app-symbol-icon {
  width: 12px !important;
  height: 12px !important;
  margin-bottom: -3px !important;
  color: var(--score-color, #229a5c) !important;
}

.app-score-ring strong,
.score-ring strong,
.score-ring span,
.app-hero-score-ring strong {
  color: var(--score-color, #229a5c) !important;
  font-family: ui-serif, Georgia, 'Times New Roman', serif !important;
  font-size: 1.06rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.product-card,
.rail-card {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.product-float-zone,
.rail-art {
  height: clamp(142px, 17vw, 210px) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.product-float-zone img,
.rail-art img,
.product-card img {
  object-fit: contain !important;
  filter: drop-shadow(0 18px 28px rgba(17, 19, 18, 0.1)) !important;
}

.product-card-copy h3,
.rail-card h4 {
  display: -webkit-box !important;
  min-height: 2.28em !important;
  overflow: hidden !important;
  color: #111312 !important;
  font-size: 1.05rem !important;
  font-weight: 860 !important;
  line-height: 1.14 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

.product-card-copy > span,
.rail-card p,
.product-brand {
  color: rgba(17, 19, 18, 0.42) !important;
  font-size: 0.88rem !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

.product-card .app-score-ring,
.rail-score-pair .app-score-ring,
.search-score-pair .app-score-ring {
  width: 44px !important;
  height: 44px !important;
}

.product-card .app-score-ring strong,
.rail-score-pair .app-score-ring strong,
.search-score-pair .app-score-ring strong {
  font-size: 0.86rem !important;
}

.app-product-hero,
.product-hero.app-product-hero {
  display: block !important;
  width: min(980px, calc(100% - 32px)) !important;
  margin: 28px auto 32px !important;
  padding: clamp(22px, 4vw, 36px) !important;
  border: 1px solid rgba(17, 19, 18, 0.065) !important;
  border-radius: 30px !important;
  background: #fff !important;
  box-shadow: 0 22px 60px rgba(17, 19, 18, 0.07) !important;
}

.app-product-hero .breadcrumb,
.app-product-hero::before,
.app-product-hero::after {
  display: none !important;
}

.app-product-header {
  display: grid !important;
  grid-template-columns: minmax(150px, 0.72fr) minmax(0, 1fr) !important;
  grid-template-areas:
    "image brand"
    "image title"
    "image scores"
    "image pantry"
    "image category" !important;
  align-items: center !important;
  column-gap: clamp(22px, 4vw, 44px) !important;
  row-gap: 12px !important;
}

.app-product-image {
  grid-area: image !important;
  display: grid !important;
  place-items: center !important;
  min-height: 286px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.app-product-image img {
  width: min(100%, 300px) !important;
  max-height: 286px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 20px 34px rgba(17, 19, 18, 0.1)) !important;
}

.app-product-brand {
  grid-area: brand !important;
  color: rgba(17, 19, 18, 0.48) !important;
  font-size: 0.76rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

.app-product-header h1 {
  grid-area: title !important;
  font-size: clamp(2.1rem, 4.2vw, 4.05rem) !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
}

.app-product-score-pair {
  grid-area: scores !important;
  gap: 18px !important;
  margin-top: 8px !important;
  padding-bottom: 18px !important;
}

.app-product-score-pair .app-score-ring {
  width: 72px !important;
  height: 72px !important;
}

.app-product-score-pair .app-score-ring strong {
  font-size: 1.36rem !important;
}

.app-product-pantry-cta {
  grid-area: pantry !important;
  width: fit-content !important;
  min-height: 46px !important;
  padding: 0 18px !important;
  border-radius: 16px !important;
  background: #f2f2f6 !important;
  color: #111312 !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
}

.app-category-badge {
  grid-area: category !important;
  width: fit-content !important;
}

@media (max-width: 920px) {
  .app-site-hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
}

@media (max-width: 720px) {
  .site-header,
  .app-site-hero,
  .app-site-section,
  .app-product-hero,
  .product-hero.app-product-hero,
  .site-footer {
    width: calc(100% - 24px) !important;
  }

  .site-header {
    min-height: 62px !important;
    margin-top: 10px !important;
    border-radius: 22px !important;
  }

  .app-site-hero h1 {
    font-size: clamp(3.8rem, 17vw, 5.2rem) !important;
  }

  .app-hero-product-card {
    grid-template-columns: 112px minmax(0, 1fr) !important;
    gap: 16px !important;
    padding: 18px !important;
    border-radius: 26px !important;
  }

  .app-product-art {
    min-height: 190px !important;
  }

  .app-product-art img {
    max-height: 190px !important;
  }

  .app-product-detail-copy h2 {
    font-size: clamp(2rem, 9vw, 3.2rem) !important;
  }

  .app-product-header {
    grid-template-columns: 112px minmax(0, 1fr) !important;
    column-gap: 16px !important;
    row-gap: 9px !important;
  }

  .app-product-image {
    min-height: 190px !important;
  }

  .app-product-image img {
    max-height: 190px !important;
  }

  .app-product-header h1 {
    font-size: clamp(2rem, 9vw, 3.4rem) !important;
  }

  .app-product-score-pair .app-score-ring {
    width: 58px !important;
    height: 58px !important;
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .product-rail {
    grid-auto-columns: 150px !important;
  }
}

/* Current native app parity layer — July 2026. Keep this at EOF. */
:root {
  --current-ink: #101312;
  --current-muted: rgba(16, 19, 18, 0.54);
  --current-soft-line: rgba(16, 19, 18, 0.075);
  --current-green: #249a60;
}

html,
body {
  background: #fff !important;
  color: var(--current-ink) !important;
}

.site-header {
  width: min(1090px, calc(100% - 32px)) !important;
  min-height: 64px !important;
  margin-top: 12px !important;
  padding: 10px 12px 10px 16px !important;
  border: 1px solid var(--current-soft-line) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 18px 44px rgba(16, 19, 18, 0.055) !important;
}

.brand-logo {
  width: 128px !important;
}

.site-header nav {
  gap: 18px !important;
}

.site-header nav a:not(.nav-cta) {
  color: rgba(16, 19, 18, 0.58) !important;
  font-size: 0.84rem !important;
  font-weight: 760 !important;
}

.nav-cta,
.app-primary-cta,
.app-download-button,
.footer-waitlist-cta,
.waitlist-card button {
  min-height: 48px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #171a19, #252a29) !important;
  box-shadow: 0 16px 36px rgba(16, 19, 18, 0.15) !important;
}

.app-site {
  background: #fff !important;
}

.app-site-hero,
.app-site-section {
  width: min(1090px, calc(100% - 32px)) !important;
}

.app-site-hero {
  grid-template-columns: minmax(0, 0.9fr) minmax(370px, 0.86fr) !important;
  gap: clamp(32px, 5.2vw, 58px) !important;
  min-height: min(520px, calc(100svh - 86px)) !important;
  padding: clamp(22px, 3.8vw, 42px) 0 30px !important;
}

.app-site-hero-copy {
  gap: 15px !important;
  max-width: 548px !important;
}

.app-mascot-line {
  padding: 7px 13px 7px 7px !important;
  border-color: rgba(16, 19, 18, 0.06) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 12px 30px rgba(16, 19, 18, 0.052) !important;
}

.app-mascot-line img {
  width: 38px !important;
  height: 38px !important;
  background: #f6f7f5 !important;
}

.app-mascot-line span {
  color: rgba(16, 19, 18, 0.72) !important;
  font-size: 0.88rem !important;
  font-weight: 760 !important;
}

.app-site .eyebrow,
.eyebrow {
  color: var(--current-green) !important;
  font-size: 0.7rem !important;
  font-weight: 910 !important;
  letter-spacing: 0.22em !important;
}

.app-site-hero h1 {
  max-width: 560px !important;
  font-size: clamp(3.32rem, 5.35vw, 5.36rem) !important;
  line-height: 0.91 !important;
}

.app-site-lede {
  max-width: 510px !important;
  color: rgba(16, 19, 18, 0.58) !important;
  font-size: clamp(1rem, 1.25vw, 1.12rem) !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}

.app-site-actions {
  padding-top: 4px !important;
}

.app-primary-cta,
.app-secondary-cta {
  min-height: 50px !important;
  min-width: 164px !important;
  padding: 0 22px !important;
  font-size: 0.92rem !important;
  font-weight: 850 !important;
}

.app-secondary-cta {
  border-color: rgba(16, 19, 18, 0.08) !important;
  background: #fff !important;
  box-shadow: 0 14px 34px rgba(16, 19, 18, 0.055) !important;
}

.app-hero-product-card {
  grid-template-columns: minmax(138px, 0.72fr) minmax(0, 1fr) !important;
  min-height: 314px !important;
  gap: clamp(18px, 3vw, 30px) !important;
  padding: clamp(20px, 3vw, 28px) !important;
  border-color: rgba(16, 19, 18, 0.065) !important;
  border-radius: 28px !important;
  box-shadow: 0 22px 58px rgba(16, 19, 18, 0.072) !important;
}

.app-product-art {
  min-height: 232px !important;
}

.app-product-art img {
  width: min(100%, 260px) !important;
  max-height: 238px !important;
  filter: drop-shadow(0 22px 34px rgba(16, 19, 18, 0.1)) !important;
}

.app-brand-mark {
  width: 38px !important;
  height: 38px !important;
  background: #f3f4f2 !important;
  color: var(--current-ink) !important;
}

.app-brand-row p,
.app-product-brand {
  color: rgba(16, 19, 18, 0.46) !important;
  font-size: 0.72rem !important;
  font-weight: 860 !important;
  letter-spacing: 0.22em !important;
}

.app-product-detail-copy h2 {
  font-size: clamp(2rem, 2.85vw, 2.92rem) !important;
  line-height: 0.98 !important;
}

.app-hero-score-row,
.app-product-score-pair {
  gap: 18px !important;
}

.app-score-ring,
.score-ring,
.app-hero-score-ring {
  width: 54px !important;
  height: 54px !important;
  overflow: visible !important;
  background: conic-gradient(var(--score-color, var(--current-green)) calc(var(--score) * 1%), var(--score-track, rgba(36, 154, 96, 0.13)) 0) !important;
}

.app-score-ring::before,
.score-ring::before,
.app-hero-score-ring::before {
  inset: 4.5px !important;
  background: color-mix(in srgb, var(--score-color, var(--current-green)) 5%, #fff) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--score-color, var(--current-green)) 8%, transparent) !important;
}

.app-score-ring .app-symbol-icon,
.score-ring .app-symbol-icon,
.app-hero-score-ring .app-symbol-icon {
  align-self: start !important;
  justify-self: center !important;
  width: 12px !important;
  height: 12px !important;
  margin: 11px 0 0 !important;
  color: var(--score-color, var(--current-green)) !important;
}

.app-score-ring strong,
.score-ring strong,
.score-ring span,
.app-hero-score-ring strong {
  align-self: end !important;
  justify-self: center !important;
  margin: 0 0 10px !important;
  color: var(--current-ink) !important;
  font-family: ui-serif, Georgia, 'Times New Roman', serif !important;
  font-size: 1.04rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

.app-hero-score span {
  color: rgba(16, 19, 18, 0.48) !important;
  font-size: 0.66rem !important;
  font-weight: 860 !important;
  letter-spacing: 0.17em !important;
}

.product-card .app-score-ring,
.rail-score-pair .app-score-ring,
.search-score-pair .app-score-ring {
  width: 42px !important;
  height: 42px !important;
}

.product-card .app-score-ring .app-symbol-icon,
.rail-score-pair .app-score-ring .app-symbol-icon,
.search-score-pair .app-score-ring .app-symbol-icon {
  width: 9px !important;
  height: 9px !important;
  margin-top: 8px !important;
}

.product-card .app-score-ring strong,
.rail-score-pair .app-score-ring strong,
.search-score-pair .app-score-ring strong {
  margin-bottom: 7px !important;
  color: var(--current-ink) !important;
  font-size: 0.84rem !important;
}

.app-section-heading {
  align-items: end !important;
  gap: 18px !important;
}

.app-section-heading h2,
.app-scan-copy h2 {
  font-size: clamp(2.8rem, 4.7vw, 4.85rem) !important;
  line-height: 0.92 !important;
}

.app-section-heading > p,
.app-scan-copy > p,
.app-feature-grid article > p {
  color: rgba(16, 19, 18, 0.55) !important;
  font-size: 1.02rem !important;
  font-weight: 610 !important;
  line-height: 1.44 !important;
}

.app-site-section {
  padding: clamp(48px, 7vw, 78px) 0 !important;
}

.app-scan-explainer {
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.78fr) !important;
}

.app-scan-card,
.app-feature-grid article,
.launch-search-panel,
.waitlist-card,
.app-download-cta,
.seo-link-panel,
.archive-hero {
  border: 1px solid rgba(16, 19, 18, 0.065) !important;
  background: #fff !important;
  box-shadow: 0 20px 56px rgba(16, 19, 18, 0.058) !important;
}

.app-scan-card {
  min-height: 390px !important;
  border-radius: 28px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.86)),
    radial-gradient(circle at 78% 10%, rgba(36,154,96,0.08), transparent 34%),
    #fff !important;
}

.app-viewfinder {
  height: 132px !important;
  margin-top: 78px !important;
  background: rgba(16, 19, 18, 0.045) !important;
}

.app-feature-grid {
  gap: 14px !important;
}

.app-feature-grid article {
  min-height: 232px !important;
  border-radius: 28px !important;
  padding: 26px !important;
}

.app-feature-grid img {
  width: 68px !important;
  height: 68px !important;
  margin-bottom: 20px !important;
}

.app-feature-grid h2 {
  max-width: 260px !important;
  font-size: clamp(2.35rem, 3.5vw, 3.12rem) !important;
  line-height: 0.92 !important;
}

.app-category-dock a,
.top-picks-parent {
  color: rgba(16, 19, 18, 0.55) !important;
  font-size: 0.88rem !important;
  font-weight: 790 !important;
}

.app-category-dock img,
.top-picks-parent-icon {
  width: 60px !important;
  height: 60px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.top-picks-parent.is-active {
  color: var(--current-ink) !important;
}

.top-picks-parent.is-active .top-picks-parent-icon {
  border-radius: 999px !important;
  box-shadow: 0 0 0 2px rgba(16, 19, 18, 0.17) !important;
}

.rail-heading {
  border-bottom: 1px solid rgba(16, 19, 18, 0.08) !important;
  padding-bottom: 12px !important;
}

.rail-heading h3 {
  font-size: clamp(2.6rem, 4.2vw, 4.12rem) !important;
  line-height: 0.95 !important;
}

.rail-heading a,
.app-section-heading a {
  color: #087cf8 !important;
  font-weight: 820 !important;
  text-decoration: none !important;
}

.product-rail {
  grid-auto-columns: 174px !important;
  gap: clamp(18px, 2.5vw, 28px) !important;
  padding-top: 18px !important;
}

.product-card,
.rail-card {
  gap: 9px !important;
  color: inherit !important;
  text-decoration: none !important;
}

.product-float-zone,
.rail-art {
  height: 168px !important;
  min-height: 168px !important;
  max-height: 168px !important;
}

.product-float-zone img,
.rail-art img,
.product-card img {
  max-width: 92% !important;
  max-height: 146px !important;
  filter: drop-shadow(0 15px 22px rgba(16, 19, 18, 0.095)) !important;
}

.product-rank-bubble {
  width: 42px !important;
  height: 42px !important;
  border-color: rgba(36, 154, 96, 0.18) !important;
  color: var(--current-ink) !important;
  font-family: ui-serif, Georgia, 'Times New Roman', serif !important;
  font-size: 1.22rem !important;
  font-weight: 600 !important;
  box-shadow: 0 10px 24px rgba(16, 19, 18, 0.07) !important;
}

.product-card-copy h3,
.rail-card h4 {
  min-height: 2.24em !important;
  color: var(--current-ink) !important;
  font-size: 1.02rem !important;
  font-weight: 860 !important;
  line-height: 1.12 !important;
}

.product-card-copy > span,
.rail-card p,
.product-brand {
  color: rgba(16, 19, 18, 0.43) !important;
  font-size: 0.84rem !important;
  font-weight: 650 !important;
}

.app-product-hero,
.product-hero.app-product-hero {
  width: min(940px, calc(100% - 32px)) !important;
  border-color: rgba(16, 19, 18, 0.065) !important;
  box-shadow: 0 20px 54px rgba(16, 19, 18, 0.062) !important;
}

.app-product-image {
  min-height: 260px !important;
}

.app-product-image img {
  max-height: 260px !important;
}

.app-product-header h1 {
  font-size: clamp(2.15rem, 3.65vw, 3.78rem) !important;
}

.app-product-score-pair .app-score-ring {
  width: 68px !important;
  height: 68px !important;
}

.app-product-score-pair .app-score-ring .app-symbol-icon {
  width: 14px !important;
  height: 14px !important;
  margin-top: 15px !important;
}

.app-product-score-pair .app-score-ring strong {
  margin-bottom: 12px !important;
  color: var(--current-ink) !important;
  font-size: 1.34rem !important;
}

@media (max-width: 920px) {
  .app-site-hero {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
    padding-top: 32px !important;
  }
}

@media (max-width: 720px) {
  .site-header,
  .app-site-hero,
  .app-site-section,
  .app-product-hero,
  .product-hero.app-product-hero,
  .site-footer {
    width: calc(100% - 24px) !important;
  }

  .site-header {
    min-height: 58px !important;
    margin-top: 10px !important;
    border-radius: 21px !important;
    padding: 9px 10px 9px 13px !important;
  }

  .brand-logo {
    width: 118px !important;
  }

  .nav-cta {
    min-height: 42px !important;
    padding: 0 14px !important;
    font-size: 0.76rem !important;
  }

  .app-site-hero {
    min-height: auto !important;
    padding: 26px 0 22px !important;
  }

  .app-site-hero-copy {
    gap: 13px !important;
  }

  .app-site-hero h1 {
    max-width: 360px !important;
    font-size: clamp(2.88rem, 12.6vw, 4rem) !important;
    line-height: 0.92 !important;
  }

  .app-site-lede {
    max-width: 348px !important;
    font-size: 1rem !important;
  }

  .app-site-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .app-primary-cta,
  .app-secondary-cta {
    width: 100% !important;
  }

  .app-hero-product-card {
    grid-template-columns: 108px minmax(0, 1fr) !important;
    min-height: 0 !important;
    gap: 15px !important;
    padding: 15px !important;
    border-radius: 24px !important;
  }

  .app-product-art {
    min-height: 164px !important;
  }

  .app-product-art img {
    max-height: 162px !important;
  }

  .app-brand-mark {
    width: 30px !important;
    height: 30px !important;
  }

  .app-brand-row {
    gap: 7px !important;
  }

  .app-brand-row p {
    max-width: 140px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .app-product-detail-copy {
    gap: 10px !important;
  }

  .app-product-detail-copy h2 {
    font-size: clamp(1.58rem, 7.2vw, 2.24rem) !important;
    line-height: 1 !important;
  }

  .app-hero-score-row {
    gap: 12px !important;
  }

  .app-hero-score-ring {
    width: 50px !important;
    height: 50px !important;
  }

  .app-section-heading {
    display: grid !important;
    align-items: start !important;
  }

  .app-section-heading h2,
  .app-scan-copy h2 {
    font-size: clamp(2.5rem, 12vw, 3.58rem) !important;
  }

  .app-scan-explainer {
    grid-template-columns: 1fr !important;
  }

  .app-scan-card {
    min-height: 340px !important;
    padding: 20px !important;
    border-radius: 24px !important;
  }

  .app-viewfinder {
    width: 88% !important;
    height: 118px !important;
    margin-top: 58px !important;
  }

  .app-mini-result {
    margin-top: 28px !important;
  }

  .app-feature-grid {
    grid-template-columns: 1fr !important;
  }

  .top-picks-parent-row,
  .app-category-dock {
    gap: 18px !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
  }

  .top-picks-parent-row::-webkit-scrollbar,
  .app-category-dock::-webkit-scrollbar {
    display: none !important;
  }

  .product-rail {
    grid-auto-columns: 145px !important;
    gap: 14px !important;
  }

  .product-float-zone,
  .rail-art {
    height: 146px !important;
    min-height: 146px !important;
    max-height: 146px !important;
  }

  .product-float-zone img,
  .rail-art img,
  .product-card img {
    max-height: 124px !important;
  }

  .product-card .app-score-ring,
  .rail-score-pair .app-score-ring,
  .search-score-pair .app-score-ring {
    width: 38px !important;
    height: 38px !important;
  }

  .product-card .app-score-ring .app-symbol-icon,
  .rail-score-pair .app-score-ring .app-symbol-icon,
  .search-score-pair .app-score-ring .app-symbol-icon {
    width: 8px !important;
    height: 8px !important;
    margin-top: 7px !important;
  }

  .product-card .app-score-ring strong,
  .rail-score-pair .app-score-ring strong,
  .search-score-pair .app-score-ring strong {
    margin-bottom: 6px !important;
    font-size: 0.76rem !important;
  }

  .app-product-header {
    grid-template-columns: 106px minmax(0, 1fr) !important;
    column-gap: 15px !important;
  }

  .app-product-image {
    min-height: 166px !important;
  }

  .app-product-image img {
    max-height: 164px !important;
  }

  .app-product-header h1 {
    font-size: clamp(1.78rem, 8vw, 2.72rem) !important;
  }

  .app-product-score-pair .app-score-ring {
    width: 58px !important;
    height: 58px !important;
  }
}
/* Final product-page guard: keep mobile product actions full-width after all parity rules. */
@media (max-width: 720px) {
  .product-hero.app-product-hero .app-product-header,
  .app-product-hero .app-product-header {
    grid-template-columns: 126px minmax(0, 1fr) !important;
    grid-template-areas:
      "image brand"
      "image title"
      "image scores"
      "pantry pantry"
      "category category" !important;
  }

  .product-hero.app-product-hero .app-product-pantry-cta,
  .app-product-hero .app-product-pantry-cta {
    grid-area: pantry !important;
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }
}

/* Current Top Picks polish: mascot-led hero and app-like ranking score circles. */
.best-archive-hero {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.86fr) minmax(260px, 0.5fr) !important;
  align-items: end !important;
  gap: clamp(24px, 5vw, 74px) !important;
  min-height: 0 !important;
  padding: clamp(34px, 6vw, 72px) clamp(22px, 6vw, 72px) clamp(28px, 5vw, 54px) !important;
  overflow: hidden !important;
}

.best-archive-hero::after {
  content: "" !important;
  align-self: stretch !important;
  min-height: 360px !important;
  border: 1px solid rgba(35, 160, 96, 0.14) !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 36% 22%, rgba(35, 160, 96, 0.12), transparent 26%),
    radial-gradient(circle at 70% 70%, rgba(246, 181, 61, 0.10), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 251, 0.92)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 26px 70px rgba(17, 19, 18, 0.055) !important;
}

.best-archive-hero > :not(.seo-chip-row) {
  grid-column: 1 !important;
}

.best-archive-hero .seo-chip-row {
  grid-column: 1 / -1 !important;
}

.best-mascot-line {
  width: fit-content !important;
  max-width: min(640px, 100%) !important;
  margin-bottom: 6px !important;
  padding: 9px 18px 9px 9px !important;
}

.best-hero-mascot {
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px !important;
}

.best-archive-hero h1 {
  max-width: 720px !important;
  font-size: clamp(4.7rem, 9vw, 8.6rem) !important;
  line-height: 0.86 !important;
  letter-spacing: 0 !important;
}

.best-archive-hero > p:not(.eyebrow) {
  max-width: 650px !important;
  font-size: clamp(1.1rem, 1.5vw, 1.28rem) !important;
  line-height: 1.34 !important;
}

.best-archive-hero .product-search-form {
  max-width: 720px !important;
}

.best-archive-hero .seo-chip-row {
  gap: 11px !important;
  margin-top: 8px !important;
}

.best-archive-hero .seo-chip-row a {
  min-height: 42px !important;
  padding: 0 18px !important;
  border-color: rgba(35, 160, 96, 0.22) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  color: #249a60 !important;
  box-shadow: 0 12px 28px rgba(17, 19, 18, 0.035) !important;
}

.best-archive-hero + .section-shell {
  padding-top: clamp(38px, 6vw, 70px) !important;
}

.compact-grid .product-card,
.rail-card {
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.compact-grid .product-card img,
.rail-card img {
  filter: drop-shadow(0 18px 24px rgba(17, 19, 18, 0.08)) !important;
}

.ranking-score-pair,
.rail-score-pair,
.product-card .app-score-pair {
  gap: 8px !important;
  align-items: center !important;
  justify-content: center !important;
}

.ranking-score-circle,
.rail-score-pair .app-score-ring,
.compact-grid .product-card .app-score-ring {
  width: 48px !important;
  height: 48px !important;
  overflow: visible !important;
  color: #111312 !important;
  box-shadow: 0 12px 24px rgba(17, 19, 18, 0.035) !important;
}

.ranking-score-circle::before,
.rail-score-pair .app-score-ring::before,
.compact-grid .product-card .app-score-ring::before {
  inset: 4px !important;
  background: rgba(35, 160, 96, 0.065) !important;
  box-shadow: inset 0 0 0 1px rgba(35, 160, 96, 0.035) !important;
}

.ranking-score-circle .app-symbol-icon,
.rail-score-pair .app-score-ring .app-symbol-icon,
.compact-grid .product-card .app-score-ring .app-symbol-icon {
  width: 10px !important;
  height: 10px !important;
  margin-top: 9px !important;
  color: #249a60 !important;
}

.ranking-score-circle strong,
.rail-score-pair .app-score-ring strong,
.compact-grid .product-card .app-score-ring strong {
  margin-bottom: 7px !important;
  color: #111312 !important;
  font-family: var(--font-serif), Georgia, serif !important;
  font-size: 1.02rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.app-score-ring-health .app-symbol-icon {
  color: var(--score-color, #249a60) !important;
}

.section-heading.split-heading h2 {
  max-width: 620px !important;
  line-height: 0.9 !important;
}

@media (max-width: 920px) {
  .best-archive-hero {
    grid-template-columns: 1fr !important;
  }

  .best-archive-hero::after {
    display: none !important;
  }
}

@media (max-width: 720px) {
  .best-archive-hero {
    width: calc(100% - 24px) !important;
    padding: 24px 14px 22px !important;
    border-radius: 28px !important;
  }

  .best-mascot-line {
    width: 100% !important;
    padding-right: 13px !important;
  }

  .best-hero-mascot {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
  }

  .best-archive-hero h1 {
    font-size: clamp(4.35rem, 18vw, 5.55rem) !important;
  }

  .best-archive-hero .product-search-form {
    margin-top: 6px !important;
  }

  .ranking-score-circle,
  .rail-score-pair .app-score-ring,
  .compact-grid .product-card .app-score-ring {
    width: 42px !important;
    height: 42px !important;
  }

  .ranking-score-circle .app-symbol-icon,
  .rail-score-pair .app-score-ring .app-symbol-icon,
  .compact-grid .product-card .app-score-ring .app-symbol-icon {
    width: 9px !important;
    height: 9px !important;
    margin-top: 8px !important;
  }

  .ranking-score-circle strong,
  .rail-score-pair .app-score-ring strong,
  .compact-grid .product-card .app-score-ring strong {
    margin-bottom: 6px !important;
    font-size: 0.9rem !important;
  }
}

/* Final Top Picks correction: no giant desktop blank panel, no squeezed score pies. */
.best-archive-hero {
  display: block !important;
  min-height: 0 !important;
}

.best-archive-hero::after {
  position: absolute !important;
  right: clamp(22px, 5vw, 74px) !important;
  top: clamp(96px, 13vw, 156px) !important;
  width: min(360px, 30%) !important;
  height: min(360px, 42%) !important;
  min-height: 0 !important;
  pointer-events: none !important;
  opacity: 0.78 !important;
}

.best-archive-hero > :not(.seo-chip-row),
.best-archive-hero .seo-chip-row {
  grid-column: auto !important;
}

.best-archive-hero h1,
.best-archive-hero > p:not(.eyebrow),
.best-archive-hero .product-search-form {
  position: relative !important;
  z-index: 1 !important;
}

.ranking-score-circle,
.rail-score-pair .app-score-ring,
.compact-grid .product-card .app-score-ring {
  width: 48px !important;
  height: 48px !important;
  inline-size: 48px !important;
  block-size: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  flex: 0 0 48px !important;
  aspect-ratio: 1 / 1 !important;
}

.ranking-score-circle::before,
.rail-score-pair .app-score-ring::before,
.compact-grid .product-card .app-score-ring::before {
  background: #fff !important;
}

@media (max-width: 720px) {
  .best-archive-hero::after {
    display: none !important;
  }

  .ranking-score-circle,
  .rail-score-pair .app-score-ring,
  .compact-grid .product-card .app-score-ring {
    width: 42px !important;
    height: 42px !important;
    inline-size: 42px !important;
    block-size: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    flex: 0 0 42px !important;
  }
}

/* EOF authority: Top Picks must use the current app layout, not legacy archive rules. */
.best-archive-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.54fr) !important;
  align-items: center !important;
}

.best-archive-hero::after {
  display: none !important;
  content: none !important;
}

.best-hero-copy {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.best-hero-preview {
  display: grid !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
}

.best-hero-preview-card {
  width: 100% !important;
}

@media (max-width: 920px) {
  .best-archive-hero {
    display: block !important;
  }

  .best-hero-preview {
    display: none !important;
  }
}
/* EOF authority: mobile CTA/search cleanup, after all legacy overrides. */
.app-store-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
}

.app-store-cta .apple-mark {
  width: 1.08em !important;
  height: 1.08em !important;
}

.cta-reviews-logo {
  display: block !important;
  width: 76px !important;
  height: auto !important;
  max-height: 24px !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
}

@media (max-width: 760px) {
  .site-header {
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .site-header::before,
  .site-header::after,
  .floating-product-search::before,
  .floating-product-search::after,
  .floating-search-form::after {
    display: none !important;
    content: none !important;
  }

  .nav-cta,
  .app-primary-cta {
    box-shadow: none !important;
    filter: none !important;
  }

  .floating-search-form {
    border-color: rgba(16, 20, 18, 0.095) !important;
    background: rgba(255, 255, 255, 0.82) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      inset 0 -1px 0 rgba(255, 255, 255, 0.42) !important;
  }

  .floating-search-results {
    box-shadow: 0 12px 28px rgba(18, 22, 20, 0.075) !important;
  }

  .app-store-cta {
    gap: 8px !important;
  }

  .cta-reviews-logo {
    width: 68px !important;
    max-height: 22px !important;
  }
}

/* Mobile authority: homepage shelves should feel like the app, not a clipped desktop rail. */
@media (max-width: 760px) {
  .category-rails {
    width: calc(100% - 24px) !important;
    padding-top: 42px !important;
    overflow: hidden !important;
  }

  .category-rails .app-section-heading {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 24px !important;
  }

  .category-rails .app-section-heading .eyebrow {
    margin-bottom: 4px !important;
  }

  .category-rails .app-section-heading h2 {
    font-size: clamp(3.12rem, 12.9vw, 3.72rem) !important;
    line-height: 0.87 !important;
    letter-spacing: -0.012em !important;
    white-space: nowrap !important;
  }

  .category-rails .app-section-heading > a {
    justify-self: start !important;
    width: fit-content !important;
    min-height: 36px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #0a84ff !important;
    font-size: 1.05rem !important;
    font-weight: 860 !important;
    letter-spacing: -0.02em !important;
  }

  .category-rails .top-picks-web-header {
    margin: 0 0 28px !important;
    overflow: visible !important;
  }

  .category-rails .top-picks-parent-row {
    display: grid !important;
    grid-template-columns: 52px 52px 66px 82px 70px !important;
    gap: 4px !important;
    align-items: start !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .category-rails .top-picks-parent {
    display: grid !important;
    justify-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    color: rgba(17, 19, 18, 0.48) !important;
    font-size: clamp(0.62rem, 2.26vw, 0.72rem) !important;
    font-weight: 820 !important;
    letter-spacing: -0.045em !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .category-rails .top-picks-parent strong {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .category-rails .top-picks-parent-icon {
    display: grid !important;
    place-items: center !important;
    width: clamp(46px, 12.7vw, 54px) !important;
    height: clamp(46px, 12.7vw, 54px) !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .category-rails .top-picks-parent-icon img {
    width: clamp(39px, 10.4vw, 47px) !important;
    height: clamp(39px, 10.4vw, 47px) !important;
    object-fit: contain !important;
  }

  .category-rails .top-picks-parent.is-active {
    color: #111312 !important;
  }

  .category-rails .top-picks-parent.is-active .top-picks-parent-icon {
    background: rgba(255, 255, 255, 0.78) !important;
    box-shadow:
      0 0 0 2px rgba(17, 19, 18, 0.18),
      0 14px 28px rgba(17, 19, 18, 0.055) !important;
  }

  .category-rails .product-rail-block {
    margin-top: 34px !important;
  }

  .category-rails .product-rail-block:first-of-type {
    margin-top: 18px !important;
  }

  .category-rails .rail-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    gap: 14px !important;
    margin: 0 0 18px !important;
    padding-bottom: 13px !important;
    border-bottom: 1px solid rgba(17, 19, 18, 0.075) !important;
  }

  .category-rails .rail-heading > div {
    display: block !important;
    min-width: 0 !important;
  }

  .category-rails .rail-heading .eyebrow {
    margin: 0 0 3px !important;
    color: #249a60 !important;
    font-size: 0.76rem !important;
    font-weight: 920 !important;
    letter-spacing: 0.22em !important;
  }

  .category-rails .rail-heading h3 {
    margin: 0 !important;
    color: #111312 !important;
    font-size: clamp(3.6rem, 16vw, 4.65rem) !important;
    font-weight: 500 !important;
    line-height: 0.87 !important;
    letter-spacing: 0 !important;
  }

  .category-rails .rail-heading a {
    align-self: center !important;
    color: #0a84ff !important;
    font-size: 1.04rem !important;
    font-weight: 860 !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
  }

  .category-rails .product-rail {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: clamp(144px, 41vw, 162px) !important;
    gap: 16px !important;
    align-items: start !important;
    margin: 0 -12px 0 0 !important;
    padding: 6px 18px 24px 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .category-rails .product-rail::-webkit-scrollbar {
    display: none !important;
  }

  .category-rails .rail-card {
    display: grid !important;
    grid-template-rows: 120px 2.38em 1.18em 62px !important;
    row-gap: 8px !important;
    align-items: start !important;
    justify-items: center !important;
    min-width: 0 !important;
    width: 100% !important;
    min-height: 248px !important;
    padding: 0 0 4px !important;
    overflow: visible !important;
    scroll-snap-align: start !important;
  }

  .category-rails .rail-art {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 120px !important;
    overflow: visible !important;
    background: transparent !important;
  }

  .category-rails .rail-art img {
    width: 100% !important;
    max-width: 128px !important;
    height: 114px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 16px 18px rgba(17, 19, 18, 0.07)) !important;
  }

  .category-rails .product-rank-bubble {
    top: 0 !important;
    left: 4px !important;
    width: 42px !important;
    height: 42px !important;
    color: #111312 !important;
    font-size: 1.28rem !important;
    line-height: 1 !important;
    z-index: 2 !important;
  }

  .category-rails .rail-card h4 {
    display: -webkit-box !important;
    width: 100% !important;
    max-width: 148px !important;
    block-size: 2.38em !important;
    min-block-size: 2.38em !important;
    max-block-size: 2.38em !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    color: #111312 !important;
    font-size: 1.02rem !important;
    font-weight: 860 !important;
    line-height: 1.19 !important;
    letter-spacing: -0.025em !important;
    text-align: center !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    contain: paint !important;
  }

  .category-rails .rail-card > p {
    display: block !important;
    width: 100% !important;
    max-width: 136px !important;
    block-size: 1.18em !important;
    min-block-size: 1.18em !important;
    max-block-size: 1.18em !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    color: rgba(17, 19, 18, 0.4) !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .category-rails .rail-score-pair,
  .category-rails .ranking-score-pair {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-self: start !important;
    align-items: start !important;
    justify-content: center !important;
    gap: 9px !important;
    width: 100% !important;
    min-height: 64px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .category-rails .app-score-stack {
    display: grid !important;
    justify-items: center !important;
    gap: 4px !important;
    min-width: 48px !important;
    overflow: visible !important;
  }

  .category-rails .app-score-stack > span {
    display: block !important;
    width: max-content !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    color: rgba(17, 19, 18, 0.45) !important;
    font-size: 0.52rem !important;
    font-weight: 860 !important;
    letter-spacing: 0.18em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    transform: translateX(0.04em) !important;
  }

  .category-rails .rail-score-pair .app-score-ring,
  .category-rails .ranking-score-circle {
    flex: 0 0 46px !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
    overflow: visible !important;
    filter: drop-shadow(0 9px 14px rgba(17, 19, 18, 0.035)) !important;
  }

  .category-rails .rail-score-pair .app-score-ring::before,
  .category-rails .ranking-score-circle::before {
    inset: 3.6px !important;
    background: color-mix(in srgb, var(--score-color, #249a60) 5.5%, #fff) !important;
  }

  .category-rails .rail-score-pair .app-score-ring .app-symbol-icon,
  .category-rails .ranking-score-circle .app-symbol-icon {
    width: 9px !important;
    height: 9px !important;
    margin-top: 8px !important;
  }

  .category-rails .rail-score-pair .app-score-ring strong,
  .category-rails .ranking-score-circle strong {
    margin-bottom: 7px !important;
    color: #111312 !important;
    font-family: var(--font-serif), Georgia, serif !important;
    font-size: 0.92rem !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
  }

  .category-rails .rankings-see-more-wrap {
    margin-top: 8px !important;
  }
}

/* Mobile authority: the first viewport should feel editorial and app-native, not duplicated. */
@media (max-width: 760px) {
  .site-header {
    width: calc(100% - 24px) !important;
    min-height: 58px !important;
    margin-top: 12px !important;
    padding: 4px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .site-header .brand {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 50px !important;
    padding: 0 2px !important;
  }

  .site-header .brand-logo,
  .brand-logo {
    width: clamp(134px, 35vw, 146px) !important;
    height: auto !important;
  }

  .site-header nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
  }

  .site-header nav a:not(.nav-cta) {
    display: none !important;
  }

  .site-header .nav-cta.app-store-cta {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 166px !important;
    min-width: 166px !important;
    min-height: 52px !important;
    padding: 0 !important;
    gap: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 999px !important;
    background: #171b1a !important;
    background-clip: padding-box !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.13),
      0 14px 28px rgba(17, 19, 18, 0.13) !important;
    filter: none !important;
    overflow: hidden !important;
    isolation: isolate !important;
    transform: translateZ(0) !important;
    -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
  }

  .site-header .nav-cta .apple-mark {
    flex: 0 0 auto !important;
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    transform: translate(3.5px, -0.5px) !important;
  }

  .site-header .nav-cta span {
    flex: 0 0 auto !important;
    font-family: var(--font-sans), ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", ui-sans-serif, system-ui, sans-serif !important;
    font-size: 1.14rem !important;
    font-weight: 950 !important;
    letter-spacing: -0.035em !important;
    line-height: 1 !important;
    transform: translate(3.5px, 1.5px) !important;
  }

  .site-header .cta-reviews-logo {
    display: none !important;
  }

  .site-header .nav-cta.app-store-cta::before,
  .site-header .nav-cta.app-store-cta::after,
  .site-header .nav-cta.app-store-cta *::before,
  .site-header .nav-cta.app-store-cta *::after {
    display: none !important;
    content: none !important;
  }

  .app-site-hero {
    width: calc(100% - 24px) !important;
    padding-top: 16px !important;
  }

  .app-site-hero-copy {
    gap: 12px !important;
  }

  .app-site-hero .app-current-mascot-line {
    width: 100% !important;
    margin-top: 2px !important;
    padding: 5px 12px 5px 5px !important;
    border-color: rgba(17, 19, 18, 0.07) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      0 12px 24px rgba(17, 19, 18, 0.045) !important;
  }

  .app-site-hero .app-current-mascot-line img {
    width: 38px !important;
    height: 38px !important;
  }

  .app-site-hero .app-current-mascot-line .app-hero-mascot img {
    width: 100% !important;
    height: 100% !important;
  }

  .app-site-hero .app-hero-mascot {
    width: 58px !important;
    height: 58px !important;
  }

  .app-site-hero .app-hero-mascot .mascot-lottie-player {
    transform: scale(2.55) !important;
    animation: mascotLottieFloatMobile 2.4s ease-in-out infinite !important;
  }

  @keyframes mascotLottieFloatMobile {
    0%,
    100% {
      transform: translateY(0) scale(2.55) rotate(-1deg);
    }
    50% {
      transform: translateY(-2px) scale(2.55) rotate(1deg);
    }
  }

  .app-site-hero .app-current-mascot-line span {
    color: rgba(17, 19, 18, 0.66) !important;
    font-size: 0.91rem !important;
    font-weight: 790 !important;
    line-height: 1.13 !important;
    letter-spacing: -0.025em !important;
  }

  .app-site-hero .eyebrow {
    margin-top: 8px !important;
    font-size: 0.77rem !important;
    letter-spacing: 0.25em !important;
  }

  .app-site-hero h1 {
    max-width: 100% !important;
    font-size: clamp(3.15rem, 13.6vw, 4.08rem) !important;
    line-height: 0.9 !important;
    letter-spacing: -0.01em !important;
  }

  .app-site-lede {
    max-width: 96% !important;
    color: rgba(17, 19, 18, 0.58) !important;
    font-size: 1.03rem !important;
    font-weight: 650 !important;
    line-height: 1.37 !important;
    letter-spacing: -0.012em !important;
  }

  .app-site-hero .app-site-actions {
    display: flex !important;
    width: 100% !important;
    padding-top: 14px !important;
    justify-content: stretch !important;
  }

  .app-site-hero .app-primary-cta.app-store-cta {
    display: inline-flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 64px !important;
    gap: 12px !important;
    padding: 0 22px !important;
    border-radius: 999px !important;
    background: #171b1a !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 20px 44px rgba(17, 19, 18, 0.14) !important;
    color: #fff !important;
    font-size: 1.13rem !important;
    font-weight: 950 !important;
    letter-spacing: -0.035em !important;
  }

  .app-site-hero .app-primary-cta.app-store-cta .apple-mark {
    width: 25px !important;
    height: 25px !important;
    flex: 0 0 25px !important;
    transform: translateY(-0.5px) !important;
  }

  .app-site-hero .app-primary-cta.app-store-cta span {
    font-family: var(--font-sans), ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", ui-sans-serif, system-ui, sans-serif !important;
    transform: translateY(1px) !important;
  }

  .app-real-hero-stage {
    margin-top: 18px !important;
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .app-real-feature,
    .app-screenshot-gallery-section,
    .app-store-shot-card,
    .category-rail-section,
    .app-trending-row,
    .app-section-heading {
      animation: app-scroll-polish both cubic-bezier(0.2, 0.72, 0.2, 1);
      animation-timeline: view();
      animation-range: entry 0% cover 28%;
      transform-origin: 50% 60%;
    }

    .app-real-shot-primary {
      animation: app-phone-settle both cubic-bezier(0.2, 0.72, 0.2, 1);
      animation-timeline: view();
      animation-range: entry 0% cover 34%;
    }
  }
}

@keyframes app-scroll-polish {
  0% {
    opacity: 0.72;
    transform: translateY(28px) scale(0.985);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes app-phone-settle {
  0% {
    opacity: 0.8;
    transform: translateY(34px) scale(0.975);
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Static search page results: keep search cheap while making query pages useful. */
.search-page-results {
  display: grid;
  gap: 18px;
}

.search-results-count {
  margin: 0;
  color: rgba(17, 19, 18, 0.48);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.search-results-grid {
  align-items: stretch;
}

@media (max-width: 760px) {
  .search-results-count {
    font-size: 0.68rem;
    letter-spacing: 0.16em;
  }
}

/* Final hero mascot authority: keep the real app avocado visible over older icon rules. */
.app-site-hero .app-current-mascot-line .app-hero-mascot {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  flex-basis: 58px !important;
  overflow: hidden !important;
}

.app-site-hero .app-current-mascot-line .app-hero-mascot .mascot-lottie-player {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  transform: scale(2.9) !important;
  transform-origin: center !important;
  animation: appHeroMascotFloat 2.4s ease-in-out infinite !important;
}

@keyframes appHeroMascotFloat {
  0%,
  100% {
    transform: translateY(0) scale(2.9) rotate(-1deg);
  }
  50% {
    transform: translateY(-2px) scale(2.9) rotate(1deg);
  }
}

/* Reviews Office prototype */
.office-page {
  min-height: 100vh;
  overflow: clip;
  background:
    radial-gradient(circle at 8% 8%, rgba(34, 154, 92, 0.13), transparent 28%),
    radial-gradient(circle at 90% 12%, rgba(95, 143, 239, 0.12), transparent 28%),
    linear-gradient(180deg, #fbfcfa 0%, #fff 44%, #f8faf7 100%);
}

.office-hero,
.office-safety-band,
.office-console,
.office-build-plan {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
}

.office-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.78fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  min-height: min(720px, calc(100svh - 94px));
  padding: clamp(42px, 6vw, 76px) 0 clamp(34px, 5vw, 58px);
}

.office-hero-copy {
  display: grid;
  gap: 18px;
}

.office-hero h1,
.office-status-card h2,
.office-chat-header h2,
.office-room-list-heading h2,
.office-build-plan h2 {
  margin: 0;
  color: var(--app-ink);
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0;
}

.office-hero h1 {
  max-width: 720px;
  font-size: clamp(3.4rem, 7.2vw, 7.15rem);
  line-height: 0.88;
}

.office-hero-copy > p:not(.eyebrow),
.office-status-card > p,
.office-build-plan .app-section-heading > p {
  max-width: 620px;
  margin: 0;
  color: rgba(17, 19, 18, 0.58);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 540;
  line-height: 1.48;
}

.office-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 10px;
}

.office-status-card {
  position: relative;
  display: grid;
  gap: 16px;
  padding: clamp(24px, 4vw, 34px);
  overflow: hidden;
  border: 1px solid rgba(17, 19, 18, 0.07);
  border-radius: 34px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 30px 80px rgba(17, 19, 18, 0.085);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.office-status-card::after {
  content: '';
  position: absolute;
  inset: auto -40px -70px auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(34, 154, 92, 0.12);
}

.office-orb {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 24px;
  background: linear-gradient(135deg, #111312, #2a302d);
  color: #fff;
  font-family: var(--serif);
  font-size: 2.5rem;
  box-shadow: 0 24px 50px rgba(17, 19, 18, 0.18);
}

.office-status-card h2 {
  max-width: 380px;
  font-size: clamp(2.25rem, 4vw, 3.7rem);
  line-height: 0.94;
}

.office-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  position: relative;
  z-index: 1;
}

.office-status-grid span,
.office-safety-band article,
.office-phase-grid article {
  border: 1px solid rgba(17, 19, 18, 0.065);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: var(--app-tight-shadow);
}

.office-status-grid span {
  display: grid;
  gap: 4px;
  padding: 14px;
  color: rgba(17, 19, 18, 0.54);
  font-size: 0.82rem;
  font-weight: 760;
}

.office-status-grid strong {
  color: var(--app-ink);
  font-size: 1rem;
  font-weight: 920;
}

.office-safety-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 0 0 clamp(40px, 6vw, 70px);
}

.office-safety-band article {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 18px;
}

.office-safety-band span {
  display: grid;
  place-items: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(34, 154, 92, 0.12);
  color: var(--app-green);
  font-weight: 900;
}

.office-safety-band p {
  margin: 0;
  color: rgba(17, 19, 18, 0.64);
  font-size: 0.94rem;
  font-weight: 760;
  line-height: 1.35;
}

.office-console {
  display: grid;
  grid-template-columns: minmax(260px, 0.36fr) minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(17, 19, 18, 0.065);
  border-radius: 36px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 34px 90px rgba(17, 19, 18, 0.09);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.office-room-list,
.office-chat-panel {
  border: 1px solid rgba(17, 19, 18, 0.06);
  border-radius: 28px;
  background: #fff;
}

.office-room-list {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px;
}

.office-room-list-heading {
  padding: 8px 8px 4px;
}

.office-room-list-heading h2,
.office-chat-header h2 {
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  line-height: 0.95;
}

.office-room-card {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 16px;
  border: 1px solid rgba(17, 19, 18, 0.06);
  border-radius: 22px;
  background: #fbfcfa;
  color: var(--app-ink);
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.office-room-card:hover,
.office-room-card.is-active {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--room-accent) 28%, rgba(17, 19, 18, 0.06));
  box-shadow: 0 16px 40px color-mix(in srgb, var(--room-accent) 14%, transparent);
}

.office-room-card span {
  font-size: 1rem;
  font-weight: 900;
}

.office-room-card small {
  color: rgba(17, 19, 18, 0.54);
  font-size: 0.82rem;
  font-weight: 620;
  line-height: 1.35;
}

.office-room-card em,
.office-access-pill {
  width: fit-content;
  border-radius: 999px;
  background: color-mix(in srgb, var(--room-accent) 12%, #fff);
  color: color-mix(in srgb, var(--room-accent) 78%, #111312);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 920;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.office-room-card em {
  padding: 7px 9px;
}

.office-chat-panel {
  display: grid;
  grid-template-rows: auto minmax(320px, 1fr) auto auto;
  min-height: 660px;
  overflow: hidden;
}

.office-chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 24px;
  border-bottom: 1px solid rgba(17, 19, 18, 0.06);
  background:
    radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--room-accent) 14%, transparent), transparent 34%),
    #fff;
}

.office-chat-header > div:first-child {
  display: grid;
  gap: 8px;
}

.office-chat-header span {
  max-width: 560px;
  color: rgba(17, 19, 18, 0.56);
  font-size: 0.96rem;
  font-weight: 650;
  line-height: 1.4;
}

.office-access-pill {
  padding: 10px 12px;
  white-space: nowrap;
}

.office-message-stream {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  overflow: auto;
  background: linear-gradient(180deg, #fbfcfa, #fff);
}

.office-message,
.office-empty-room {
  display: grid;
  gap: 6px;
  max-width: 76%;
  padding: 14px 16px;
  border-radius: 20px;
}

.office-message span {
  font-size: 0.68rem;
  font-weight: 920;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.office-message p,
.office-empty-room span {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 620;
  line-height: 1.45;
}

.office-message-hermes,
.office-empty-room {
  align-self: flex-start;
  border: 1px solid rgba(17, 19, 18, 0.06);
  background: #fff;
  color: rgba(17, 19, 18, 0.72);
  box-shadow: var(--app-tight-shadow);
}

.office-message-grant {
  align-self: flex-end;
  background: linear-gradient(135deg, #111312, #252929);
  color: #fff;
  box-shadow: 0 16px 38px rgba(17, 19, 18, 0.16);
}

.office-message-grant span {
  color: rgba(255, 255, 255, 0.62);
}

.office-message-hermes span {
  color: var(--app-green);
}

.office-empty-room strong {
  color: var(--app-ink);
  font-size: 1.05rem;
}

.office-quick-prompts,
.office-chat-form {
  display: flex;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid rgba(17, 19, 18, 0.06);
}

.office-quick-prompts {
  flex-wrap: wrap;
  background: #fff;
}

.office-quick-prompts button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(17, 19, 18, 0.07);
  border-radius: 999px;
  background: #fbfcfa;
  color: rgba(17, 19, 18, 0.66);
  font-weight: 800;
  cursor: pointer;
}

.office-chat-form {
  background: #fff;
}

.office-chat-form input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid rgba(17, 19, 18, 0.08);
  border-radius: 999px;
  background: #fbfcfa;
  color: var(--app-ink);
  font-size: 1rem;
  font-weight: 650;
  outline: none;
}

.office-chat-form input:focus {
  border-color: rgba(34, 154, 92, 0.38);
  box-shadow: 0 0 0 4px rgba(34, 154, 92, 0.08);
}

.office-chat-form button {
  min-width: 92px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #229a5c, #66b34d);
  color: #fff;
  font-weight: 920;
  cursor: pointer;
}

.office-build-plan {
  padding: clamp(62px, 8vw, 96px) 0;
}

.office-phase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.office-phase-grid article {
  display: grid;
  gap: 12px;
  padding: 22px;
}

.office-phase-grid span {
  color: var(--app-green);
  font-size: 0.8rem;
  font-weight: 920;
  letter-spacing: 0.2em;
}

.office-phase-grid h3 {
  margin: 0;
  color: var(--app-ink);
  font-size: 1.24rem;
}

.office-phase-grid p {
  margin: 0;
  color: rgba(17, 19, 18, 0.56);
  font-weight: 630;
  line-height: 1.44;
}

@media (max-width: 920px) {
  .office-hero,
  .office-console,
  .office-safety-band,
  .office-phase-grid {
    grid-template-columns: 1fr;
  }

  .office-chat-panel {
    min-height: 620px;
  }
}

@media (max-width: 640px) {
  .office-hero,
  .office-safety-band,
  .office-console,
  .office-build-plan {
    width: min(100% - 20px, 1120px);
  }

  .office-console {
    padding: 10px;
    border-radius: 28px;
  }

  .office-chat-header,
  .office-chat-form {
    flex-direction: column;
  }

  .office-access-pill,
  .office-chat-form button {
    width: 100%;
  }

  .office-message {
    max-width: 92%;
  }
}

/* Codex-style Reviews Office app shell */
body:has(.codex-office-shell) {
  margin: 0 !important;
  overflow: hidden !important;
  background: #07080a !important;
  color: #f4f7fb !important;
}

body:has(.codex-office-shell) .site-header,
body:has(.codex-office-shell) .site-footer,
body:has(.codex-office-shell) footer {
  display: none !important;
}

.codex-office-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 220px;
  height: 100svh;
  min-height: 720px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% -12%, rgba(34, 154, 92, 0.22), transparent 28%),
    radial-gradient(circle at 92% 10%, rgba(87, 116, 255, 0.18), transparent 30%),
    #07080a;
  color: #f4f7fb;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
}

.codex-sidebar,
.codex-right-panel {
  min-height: 0;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(12, 14, 18, 0.62);
  backdrop-filter: blur(34px) saturate(1.28);
  -webkit-backdrop-filter: blur(34px) saturate(1.28);
}

.codex-sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.codex-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.codex-logo,
.codex-avatar {
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #1f7a4e, #65d48c);
  color: #061009;
  font-weight: 950;
}

.codex-logo {
  width: 38px;
  height: 38px;
}

.codex-brand strong,
.codex-panel-card strong,
.codex-message strong,
.codex-empty-state strong {
  color: #f7fafc;
}

.codex-brand span,
.codex-security-box span,
.codex-device-card span,
.codex-skill-row span,
.codex-empty-state span {
  color: rgba(244, 247, 251, 0.54);
  font-size: 0.82rem;
}

.codex-new-room,
.codex-room-row,
.codex-quick-actions button,
.codex-panel-heading button,
.codex-composer button {
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #f4f7fb;
  cursor: pointer;
}

.codex-new-room {
  min-height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  font-weight: 800;
}

.codex-sidebar-section {
  display: grid;
  gap: 8px;
}

.codex-sidebar-section > p,
.codex-panel-heading p,
.codex-breadcrumb {
  margin: 0;
  color: rgba(244, 247, 251, 0.46);
  font-size: 0.69rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.codex-room-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 10px;
  background: transparent;
  text-align: left;
}

.codex-room-row:hover,
.codex-room-row.is-active {
  background: rgba(255, 255, 255, 0.075);
}

.codex-room-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 760;
}

.codex-room-row em,
.codex-skill-row em,
.codex-run-status,
.codex-device-rules li,
.codex-composer-meta span,
.codex-message header span,
.codex-voice-chip {
  border-radius: 999px;
  color: rgba(244, 247, 251, 0.62);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 850;
  letter-spacing: 0.04em;
}

.codex-room-row em:empty,
.codex-composer-meta:empty {
  display: none;
}

.codex-room-row em,
.codex-skill-row em,
.codex-composer-meta span,
.codex-message header span,
.codex-voice-chip {
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.07);
}

.codex-security-box {
  margin-top: auto;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
}

.codex-security-box strong {
  font-size: 0.95rem;
}

.codex-chat-column {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  min-width: 0;
  min-height: 0;
}

.codex-topbar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 26px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(9, 10, 12, 0.48);
}

.codex-topbar h1 {
  margin: 4px 0 3px;
  color: #f7fafc;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
  font-size: 1.12rem;
  font-weight: 850;
}

.codex-topbar p,
.codex-message p,
.codex-voicebox-preview p {
  margin: 0;
  color: rgba(244, 247, 251, 0.62);
  line-height: 1.5;
  white-space: pre-wrap;
}

.codex-run-status {
  display: inline-flex;
  align-items: center;
  align-self: start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(82, 255, 151, 0.18);
  background: rgba(45, 212, 112, 0.08);
}

.codex-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #52ff97;
  box-shadow: 0 0 18px rgba(82, 255, 151, 0.8);
}

.codex-messages {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 0;
  padding: 26px;
  overflow: auto;
}

.codex-message,
.codex-empty-state {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  max-width: 860px;
}

.codex-avatar {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.09);
  color: #f4f7fb;
}

.codex-message.is-hermes .codex-avatar {
  background: linear-gradient(135deg, #1f7a4e, #65d48c);
  color: #061009;
}

.codex-message > div:last-child,
.codex-empty-state {
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
}

.codex-empty-state {
  grid-template-columns: 1fr;
}

.codex-message header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}

.codex-voice-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: #b7f7c7;
  background: rgba(82, 255, 151, 0.08);
}

.codex-wave,
.codex-big-wave {
  display: inline-block;
  border-radius: 999px;
  background: linear-gradient(90deg, #52ff97, #72a8ff, #52ff97);
}

.codex-wave {
  width: 34px;
  height: 8px;
}

.codex-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 26px 16px;
}

.codex-quick-actions button {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(244, 247, 251, 0.72);
  font-weight: 760;
}

.codex-composer {
  margin: 0 26px 22px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.22);
}

.codex-composer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.codex-composer-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px;
  gap: 10px;
}

.codex-composer textarea {
  width: 100%;
  resize: none;
  border: 0;
  background: transparent;
  color: #f7fafc;
  font: inherit;
  outline: none;
}

.codex-composer textarea::placeholder {
  color: rgba(244, 247, 251, 0.36);
}

.codex-composer button,
.codex-panel-heading button.is-on {
  border-radius: 12px;
  background: #f4f7fb;
  color: #090a0d;
  font-weight: 900;
}

.codex-right-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  padding: 18px;
  overflow: hidden;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.codex-right-panel-minimal {
  gap: 10px;
}

.codex-panel-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
}

.codex-right-panel-minimal .codex-panel-card {
  padding: 12px;
  border-radius: 14px;
}

.codex-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.codex-panel-heading button {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  font-weight: 850;
}

.codex-panel-heading > span {
  color: rgba(244, 247, 251, 0.5);
  font-size: 0.76rem;
  font-weight: 850;
}

.codex-voicebox-preview,
.codex-device-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.18);
}

.codex-big-wave {
  width: 100%;
  height: 34px;
  opacity: 0.88;
  mask-image: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 13px);
}

.codex-device-rules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.codex-device-rules li {
  padding: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.codex-skill-list {
  display: grid;
  gap: 8px;
}

.codex-skill-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.16);
}

.codex-skill-row div {
  display: grid;
  min-width: 0;
}

.codex-skill-row strong {
  overflow: hidden;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.codex-skill-row em.is-enabled {
  color: #b7f7c7;
  background: rgba(82, 255, 151, 0.08);
}

.office-real-app {
  position: relative;
}

.office-auth-shell {
  grid-template-columns: 1fr;
  place-items: center;
  padding: 24px;
}

.office-auth-card {
  display: grid;
  gap: 18px;
  width: min(620px, 100%);
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  background: rgba(12, 14, 18, 0.88);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.28);
}

.office-auth-card h1 {
  margin: 8px 0 0;
  color: #f7fafc;
  font-family: var(--font-serif);
  font-size: clamp(3rem, 8vw, 6.6rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 0.9;
}

.office-auth-card p,
.office-auth-card > span {
  margin: 0;
  max-width: 54ch;
  color: rgba(244, 247, 251, 0.62);
  font-size: 1rem;
  font-weight: 760;
  line-height: 1.55;
}

.office-auth-primary,
.office-auth-secondary,
.office-inline-link,
.office-composer-actions button {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  cursor: pointer;
  font-weight: 900;
}

.office-auth-primary,
.office-auth-secondary {
  min-height: 54px;
  padding: 0 18px;
}

.office-auth-primary {
  background: #f7fafc;
  color: #07080a;
}

.office-auth-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: #f7fafc;
}

.office-auth-note,
.office-auth-error {
  font-size: 0.82rem !important;
}

.office-auth-error {
  color: #ffb4b4 !important;
}

.office-inline-link {
  width: fit-content;
  min-height: 30px;
  margin-top: 12px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.07);
  color: #f7fafc;
}

.office-composer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.office-composer-actions .office-file-button {
  width: 38px;
  min-width: 38px;
  height: 38px;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.07);
  color: #f7fafc;
}

.office-composer-actions button {
  min-height: 38px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(244, 247, 251, 0.72);
}

.office-composer-actions button.is-on {
  color: #b7f7c7;
  background: rgba(82, 255, 151, 0.08);
}

.office-allowed-list,
.office-kanban-mini {
  display: grid;
  gap: 7px;
}

.office-allowed-list span,
.office-kanban-mini span {
  overflow: hidden;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.16);
  color: rgba(244, 247, 251, 0.58);
  font-size: 0.76rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Reviews-styled Codex workspace controls */
body:has(.office-app-page) {
  background: #f7f8f6 !important;
}

body:has(.office-app-page) .site-header,
body:has(.office-app-page) .site-footer,
body:has(.office-app-page) footer {
  display: none !important;
}

.office-app-page {
  min-height: 100svh;
  padding: 14px;
  background:
    radial-gradient(circle at 12% 0%, rgba(34, 154, 92, 0.12), transparent 28%),
    #f7f8f6;
}

.office-codex-console {
  position: relative;
  grid-template-columns: minmax(230px, 0.32fr) minmax(0, 1fr);
  align-items: stretch;
  width: min(1480px, 100%);
  min-height: calc(100svh - 28px);
  margin: 0 auto;
  padding-top: 58px;
}

.office-dark-toggle,
.office-top-actions {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
}

.office-top-actions {
  display: flex;
  gap: 8px;
}

.office-dark-toggle,
.office-top-actions button {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(17, 19, 18, 0.08);
  border-radius: 999px;
  background: #111312;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: var(--app-tight-shadow);
}

.office-codex-console.office-dark-mode {
  background:
    radial-gradient(circle at 18% 0%, rgba(34, 154, 92, 0.2), transparent 32%),
    radial-gradient(circle at 92% 0%, rgba(95, 143, 239, 0.14), transparent 34%),
    #080a0d;
  border-color: rgba(255, 255, 255, 0.08);
  color: #f5f7f6;
}

.office-dark-mode .office-dark-toggle,
.office-dark-mode .office-top-actions button {
  border-color: rgba(255, 255, 255, 0.12);
  background: #fff;
  color: #111312;
}

.office-dark-mode .office-room-list,
.office-dark-mode .office-chat-panel,
.office-dark-mode .office-tool-card {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(13, 15, 18, 0.92);
  color: #f5f7f6;
  box-shadow: none;
}

.office-dark-mode .office-room-card,
.office-dark-mode .office-new-room-button,
.office-dark-mode .office-quick-prompts,
.office-dark-mode .office-chat-form,
.office-dark-mode .office-skill-row,
.office-dark-mode .office-tool-heading button,
.office-dark-mode .office-composer-row input,
.office-dark-mode .office-message-hermes,
.office-dark-mode .office-empty-room {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: #f5f7f6 !important;
  box-shadow: none !important;
}

.office-dark-mode .office-chat-header,
.office-dark-mode .office-message-stream {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(8, 10, 13, 0.72);
}

.office-dark-mode .office-room-card span,
.office-dark-mode .office-room-list-heading h2,
.office-dark-mode .office-chat-header h2,
.office-dark-mode .office-tool-card > strong,
.office-dark-mode .office-skill-row strong,
.office-dark-mode .office-empty-room strong {
  color: #f5f7f6 !important;
}

.office-dark-mode .office-room-card small,
.office-dark-mode .office-chat-header span,
.office-dark-mode .office-tool-card > p,
.office-dark-mode .office-skill-row span,
.office-dark-mode .office-mini-note,
.office-dark-mode .office-composer-meta span {
  color: rgba(245, 247, 246, 0.58) !important;
}

.office-dark-mode .office-composer-row input::placeholder {
  color: rgba(245, 247, 246, 0.38);
}

.office-dark-mode .office-room-card.is-active,
.office-dark-mode .office-room-card:hover {
  background: rgba(34, 154, 92, 0.12) !important;
}

.office-dark-mode .office-message-grant {
  background: linear-gradient(135deg, #229a5c, #66b34d) !important;
  color: #061009 !important;
}

.office-dark-mode .office-message-grant span,
.office-dark-mode .office-message-grant p {
  color: #061009 !important;
}

.office-dark-mode .office-audio-wave {
  opacity: 0.8;
}


.office-codex-sidebar {
  min-width: 0;
}

.office-mini-note {
  color: rgba(17, 19, 18, 0.48);
  font-size: 0.78rem;
  font-weight: 760;
}

.office-new-room-button {
  min-height: 42px;
  border: 1px solid rgba(17, 19, 18, 0.07);
  border-radius: 999px;
  background: linear-gradient(135deg, #171b1a, #252929);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.office-codex-chat-panel {
  min-width: 0;
}

.office-codex-composer {
  display: grid;
  gap: 10px;
}

.office-composer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.office-composer-meta span,
.office-voice-chip,
.office-device-rules li,
.office-skill-row em {
  width: fit-content;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(17, 19, 18, 0.055);
  color: rgba(17, 19, 18, 0.58);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.office-composer-row {
  display: flex;
  gap: 10px;
}

.office-composer-row input {
  min-height: 54px;
}

.office-voice-chip {
  display: inline-flex;
  margin-top: 10px;
  color: var(--app-green);
  background: rgba(34, 154, 92, 0.1);
}

.office-side-tools {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.office-tool-card {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(17, 19, 18, 0.06);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--app-tight-shadow);
}

.office-tool-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.office-tool-heading p {
  margin: 0;
  font-size: 0.62rem !important;
  letter-spacing: 0.14em !important;
}

.office-tool-heading button {
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(17, 19, 18, 0.08);
  border-radius: 999px;
  background: #fbfcfa;
  color: rgba(17, 19, 18, 0.66);
  font-size: 0.68rem;
  font-weight: 900;
  cursor: pointer;
}

.office-tool-heading button.is-on {
  border-color: rgba(34, 154, 92, 0.2);
  background: rgba(34, 154, 92, 0.11);
  color: var(--app-green);
}

.office-tool-heading > span {
  color: rgba(17, 19, 18, 0.48);
  font-size: 0.68rem;
  font-weight: 900;
}

.office-tool-card > strong {
  color: var(--app-ink);
  font-size: 0.84rem;
  line-height: 1.1;
}

.office-tool-card > p {
  margin: 0;
  color: rgba(17, 19, 18, 0.52);
  font-size: 0.74rem;
  font-weight: 620;
  line-height: 1.26;
}

.office-audio-wave {
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(34,154,92,0.22), rgba(95,143,239,0.22), rgba(34,154,92,0.22));
  mask-image: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 10px);
}

.office-device-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.office-device-rules li {
  padding: 4px 6px;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
}

.office-skill-list {
  display: grid;
  gap: 5px;
  max-height: 188px;
  overflow: auto;
}

.office-skill-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px;
  border-radius: 11px;
  background: #fbfcfa;
}

.office-skill-row div {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.office-skill-row strong {
  overflow: hidden;
  color: var(--app-ink);
  font-size: 0.7rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.office-skill-row span {
  color: rgba(17, 19, 18, 0.48);
  font-size: 0.6rem;
  font-weight: 760;
}

.office-skill-row em {
  padding: 4px 6px;
  font-size: 0.56rem;
}

.office-skill-row em.is-enabled {
  color: #111;
  background: rgba(17, 19, 18, 0.08);
}

/* Office monochrome authority */
.office-app-page,
.office-codex-console {
  background: #f7f7f7 !important;
}

.office-codex-console,
.office-codex-console * {
  --room-accent: #111 !important;
}

.office-codex-console .eyebrow,
.office-codex-console .office-message-hermes span,
.office-codex-console .office-voice-chip,
.office-codex-console .office-tool-heading button.is-on,
.office-codex-console .office-skill-row em.is-enabled {
  color: #111 !important;
}

.office-codex-console .office-tool-heading button.is-on,
.office-codex-console .office-skill-row em.is-enabled,
.office-codex-console .office-voice-chip,
.office-codex-console .office-room-card.is-active,
.office-codex-console .office-room-card:hover {
  border-color: rgba(17, 19, 18, 0.12) !important;
  background: rgba(17, 19, 18, 0.06) !important;
  box-shadow: none !important;
}

.office-codex-console .office-message-grant,
.office-codex-console .office-new-room-button,
.office-codex-console .office-composer-row button,
.office-codex-console .office-dark-toggle {
  background: #111 !important;
  color: #fff !important;
}

.office-codex-console .office-audio-wave {
  background: linear-gradient(90deg, rgba(17,19,18,0.18), rgba(17,19,18,0.5), rgba(17,19,18,0.18)) !important;
}

.office-dark-mode,
.office-dark-mode.office-codex-console,
body:has(.office-dark-mode) .office-app-page {
  background: #050505 !important;
}

.office-dark-mode .office-room-list,
.office-dark-mode .office-chat-panel,
.office-dark-mode .office-tool-card,
.office-dark-mode .office-room-card,
.office-dark-mode .office-new-room-button,
.office-dark-mode .office-quick-prompts,
.office-dark-mode .office-chat-form,
.office-dark-mode .office-skill-row,
.office-dark-mode .office-tool-heading button,
.office-dark-mode .office-composer-row input,
.office-dark-mode .office-message-hermes,
.office-dark-mode .office-empty-room,
.office-dark-mode .office-chat-header,
.office-dark-mode .office-message-stream {
  background: #0c0c0c !important;
  border-color: rgba(255, 255, 255, 0.11) !important;
  color: #fff !important;
}

.office-dark-mode .office-room-card.is-active,
.office-dark-mode .office-room-card:hover,
.office-dark-mode .office-tool-heading button.is-on,
.office-dark-mode .office-skill-row em.is-enabled,
.office-dark-mode .office-voice-chip {
  background: #1b1b1b !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
}

.office-dark-mode .office-dark-toggle,
.office-dark-mode .office-message-grant,
.office-dark-mode .office-composer-row button {
  background: #fff !important;
  color: #050505 !important;
}

.office-dark-mode .office-message-grant span,
.office-dark-mode .office-message-grant p {
  color: #050505 !important;
}

.office-dark-mode .office-audio-wave {
  background: linear-gradient(90deg, rgba(255,255,255,0.16), rgba(255,255,255,0.7), rgba(255,255,255,0.16)) !important;
}

.office-heart-status {
  display: grid;
  gap: 6px;
  margin: 0 0 8px;
  padding: 10px;
  border: 1px solid rgba(17, 19, 18, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.office-heart-status strong {
  color: #111312;
  font-size: 0.78rem;
  font-weight: 950;
}

.office-heart-status span {
  color: rgba(17, 19, 18, 0.56);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.35;
}

.office-heart-status button {
  width: fit-content;
  min-height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: #111312;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 950;
  cursor: pointer;
}

.office-heart-status.is-online {
  border-color: rgba(34, 154, 92, 0.22);
  background: rgba(231, 247, 236, 0.9);
}

.office-heart-status.is-online strong {
  color: var(--app-green);
}

.office-file-button {
  display: grid;
  place-items: center;
  width: 54px;
  min-width: 54px;
  height: 54px;
  border: 1px solid rgba(17, 19, 18, 0.08);
  border-radius: 999px;
  background: #fbfcfa;
  color: #111;
  font-size: 1.35rem;
  font-weight: 900;
  cursor: pointer;
}

.office-file-button input {
  display: none;
}

.office-mic-window {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 0 18px 12px auto;
  padding: 10px 12px;
  border: 1px solid rgba(255, 36, 72, 0.48);
  border-radius: 999px;
  background: linear-gradient(135deg, #c8102e, #ff2f4f);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 950;
  box-shadow: 0 14px 42px rgba(200, 16, 46, 0.34);
  animation: officeMicPulse 0.7s ease-in-out infinite alternate;
}

.office-mic-window strong,
.office-mic-window em {
  color: #fff;
  font-style: normal;
  line-height: 1;
}

.office-mic-window em {
  opacity: 0.86;
  font-size: 0.74rem;
  font-weight: 800;
}

.office-mic-window button,
.office-mic-permission button {
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #b10824;
  padding: 6px 10px;
  font-size: 0.72rem;
  font-weight: 950;
  cursor: pointer;
}

.office-mic-permission .office-mic-dismiss {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(159, 11, 34, 0.14);
  background: rgba(255, 255, 255, 0.74);
  color: rgba(159, 11, 34, 0.72);
  font-size: 1rem;
  line-height: 1;
}

.office-mic-window button:disabled,
.office-mic-permission button:disabled {
  cursor: wait;
  opacity: 0.68;
}

.office-mic-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2), 0 0 16px rgba(255, 255, 255, 0.86);
}

.office-mic-permission {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 0 18px 12px auto;
  padding: 9px 10px 9px 14px;
  border: 1px solid rgba(200, 16, 46, 0.22);
  border-radius: 999px;
  background: rgba(255, 244, 246, 0.96);
  color: #9f0b22;
  font-size: 0.76rem;
  font-weight: 900;
  box-shadow: 0 10px 28px rgba(200, 16, 46, 0.12);
}

@keyframes officeMicPulse {
  from { transform: scale(1); opacity: 0.72; }
  to { transform: scale(1.035); opacity: 1; }
}

.office-settings-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  justify-items: end;
  background: rgba(0, 0, 0, 0.18);
}

.office-settings-panel {
  display: grid;
  align-content: start;
  gap: 16px;
  width: min(340px, calc(100vw - 24px));
  height: calc(100svh - 24px);
  margin: 12px;
  padding: 16px;
  border: 1px solid rgba(17, 19, 18, 0.08);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18);
}

.office-settings-head,
.office-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.office-settings-head strong {
  color: #111;
  font-size: 1.12rem;
}

.office-settings-head button {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(17, 19, 18, 0.08);
  border-radius: 50%;
  background: #f7f7f7;
  color: #111;
  font-size: 1.2rem;
  cursor: pointer;
}

.office-settings-panel section {
  display: grid;
  gap: 8px;
}

.office-setting-row {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(17, 19, 18, 0.08);
  border-radius: 14px;
  background: #f7f7f7;
  color: #111;
  font-weight: 850;
  cursor: pointer;
}

.office-setting-row em {
  color: rgba(17, 19, 18, 0.55);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.office-device-path {
  margin: -2px 0 0;
  overflow: hidden;
  color: rgba(17, 19, 18, 0.48);
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.office-settings-skills {
  display: grid;
  gap: 7px;
}

.office-dark-mode .office-file-button,
.office-dark-mode .office-settings-panel,
.office-dark-mode .office-setting-row,
.office-dark-mode .office-settings-head button {
  border-color: rgba(255, 255, 255, 0.11) !important;
  background: #0c0c0c !important;
  color: #fff !important;
}

.office-dark-mode .office-settings-head strong,
.office-dark-mode .office-setting-row span,
.office-dark-mode .office-setting-row em,
.office-dark-mode .office-device-path {
  color: #fff !important;
}

@media (max-width: 1080px) {
  .office-codex-console {
    grid-template-columns: minmax(230px, 0.36fr) minmax(0, 1fr);
  }

  .office-side-tools {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .office-codex-console,
  .office-side-tools {
    grid-template-columns: 1fr;
  }

  .office-composer-row {
    flex-direction: column;
  }
}

@media (max-width: 1120px) {
  body:has(.codex-office-shell) {
    overflow: auto !important;
  }

  .codex-office-shell {
    grid-template-columns: 240px minmax(0, 1fr);
    height: auto;
    min-height: 100svh;
  }

  .codex-right-panel {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
}

@media (max-width: 760px) {
  .codex-office-shell {
    grid-template-columns: 1fr;
  }

  .codex-sidebar,
  .codex-right-panel {
    border: 0;
  }

  .codex-right-panel {
    grid-template-columns: 1fr;
  }

  .codex-topbar,
  .codex-composer-row {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* Hermes Office: Codex-dark command center */
body:has(.office-real-app) {
  margin: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  color: #f4f7fb !important;
}

body:has(.office-real-app) .site-header,
body:has(.office-real-app) .site-footer,
body:has(.office-real-app) footer {
  display: none !important;
}

.office-app-page {
  display: grid !important;
  place-items: center !important;
  min-height: 100svh !important;
  padding: 0 !important;
  background: transparent !important;
  color: #f4f7fb !important;
}

.codex-office-shell.office-real-app {
  display: grid !important;
  grid-template-columns: 268px minmax(0, 1fr) 342px !important;
  gap: 0 !important;
  width: 100vw !important;
  height: 100svh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: rgba(5, 6, 8, 0.74) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #f4f7fb !important;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif !important;
  isolation: isolate !important;
}

.office-real-app .codex-sidebar,
.office-real-app .codex-chat-column,
.office-real-app .codex-right-panel {
  min-height: 0 !important;
  color: #f4f7fb !important;
  scrollbar-color: rgba(148, 163, 184, 0.32) transparent !important;
}

.office-real-app *::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

.office-real-app *::-webkit-scrollbar-track {
  background: transparent !important;
}

.office-real-app *::-webkit-scrollbar-thumb {
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  background: rgba(148, 163, 184, 0.34) !important;
  background-clip: padding-box !important;
}

.office-real-app .codex-sidebar {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  height: 100svh !important;
  overflow: hidden !important;
  padding: 50px 10px 10px !important;
  border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.14), transparent 30%),
    linear-gradient(180deg, rgba(61, 68, 82, 0.42), rgba(19, 23, 31, 0.34) 54%, rgba(7, 10, 16, 0.44)),
    rgba(28, 34, 45, 0.36) !important;
  backdrop-filter: blur(54px) saturate(190%) brightness(1.08) !important;
  -webkit-backdrop-filter: blur(54px) saturate(190%) brightness(1.08) !important;
  box-shadow:
    inset -1px 0 0 rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.office-real-app .codex-sidebar::before {
  display: none !important;
}

.office-real-app .codex-sidebar::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 22%) !important;
  opacity: 0.34 !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
}

.office-real-app .codex-brand {
  min-height: 38px !important;
  padding: 5px 8px !important;
  border-radius: 12px !important;
  background: transparent !important;
  position: relative !important;
  z-index: 1 !important;
}

.office-real-app .codex-brand-compact {
  margin-bottom: 4px !important;
}

.office-real-app .codex-logo,
.office-real-app .codex-avatar {
  width: 30px !important;
  height: 30px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.075) !important;
  color: #f7fafc !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
}

.office-real-app .codex-brand strong,
.office-real-app .codex-panel-card strong,
.office-real-app .codex-message strong,
.office-real-app .codex-empty-state strong,
.office-real-app .codex-topbar h1 {
  color: #f8fafc !important;
}

.office-real-app .codex-brand strong {
  font-size: 0.9rem !important;
  font-weight: 760 !important;
}

.office-real-app .codex-brand span,
.office-real-app .codex-security-box span,
.office-real-app .codex-device-card span,
.office-real-app .codex-skill-row span,
.office-real-app .codex-empty-state span,
.office-real-app .codex-topbar p,
.office-real-app .codex-message p,
.office-real-app .codex-panel-heading > span {
  color: rgba(226, 232, 240, 0.64) !important;
}

.office-real-app .codex-sidebar-section {
  display: grid !important;
  gap: 5px !important;
  position: relative !important;
  z-index: 1 !important;
}

.office-real-app .codex-sidebar-spacer {
  flex: 1 1 auto !important;
  min-height: 10px !important;
}

.office-real-app .codex-sidebar-section > p,
.office-real-app .codex-panel-heading p,
.office-real-app .codex-breadcrumb {
  margin: 7px 8px 5px !important;
  color: rgba(148, 163, 184, 0.72) !important;
  font-size: 0.67rem !important;
  font-weight: 760 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.office-real-app .codex-room-row,
.office-real-app .office-command-stack button,
.office-real-app .codex-quick-actions button,
.office-real-app .codex-panel-heading button,
.office-real-app .office-inline-link,
.office-real-app .office-composer-actions button,
.office-real-app .office-file-button {
  border: 1px solid transparent !important;
  color: rgba(241, 245, 249, 0.84) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.office-real-app .codex-room-row {
  min-height: 34px !important;
  padding: 0 8px !important;
  border-radius: 9px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.office-real-app .codex-room-row:hover,
.office-real-app .codex-room-row.is-active,
.office-real-app .office-command-stack button:hover,
.office-real-app .office-command-stack button.is-active {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.office-real-app .codex-room-row span {
  color: inherit !important;
  font-size: 0.84rem !important;
  font-weight: 620 !important;
}

.office-real-app .codex-room-row em,
.office-real-app .codex-skill-row em,
.office-real-app .codex-composer-meta span,
.office-real-app .codex-message header span,
.office-real-app .codex-voice-chip {
  padding: 3px 7px !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: rgba(203, 213, 225, 0.76) !important;
  font-size: 0.61rem !important;
  font-weight: 760 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}

.office-real-app .office-command-stack {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  padding: 0 8px !important;
  position: relative !important;
  z-index: 1 !important;
}

.office-real-app .office-command-stack button {
  min-height: 28px !important;
  padding: 0 8px !important;
  border-radius: 8px !important;
  color: rgba(226, 232, 240, 0.82) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 0.73rem !important;
  cursor: pointer !important;
}

.office-real-app .codex-security-box {
  margin-top: auto !important;
  padding: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.09) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  position: relative !important;
  z-index: 1 !important;
}

.office-real-app .codex-settings-dock {
  margin-top: auto !important;
}

.office-real-app .codex-settings-panel {
  display: grid !important;
  gap: 9px !important;
  margin: 4px 4px 0 !important;
  padding: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.office-real-app .codex-settings-panel > div:first-child {
  display: grid !important;
  gap: 2px !important;
}

.office-real-app .codex-settings-panel strong {
  color: #f8fafc !important;
  font-size: 0.82rem !important;
}

.office-real-app .codex-settings-panel span {
  color: rgba(203, 213, 225, 0.68) !important;
  font-size: 0.72rem !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.office-real-app .codex-mode-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 5px !important;
}

.office-real-app .codex-mode-grid button {
  min-height: 28px !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: rgba(226, 232, 240, 0.78) !important;
  font-size: 0.66rem !important;
  font-weight: 720 !important;
}

.office-real-app .codex-mode-grid button.is-active {
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
}

.office-real-app .codex-chat-column {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto auto !important;
  min-width: 0 !important;
  height: 100svh !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(13, 13, 14, 0.98), rgba(7, 7, 8, 1)),
    #070708 !important;
}

.office-real-app .codex-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  min-height: 62px !important;
  padding: 12px 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075) !important;
  background: rgba(13, 13, 14, 0.88) !important;
  backdrop-filter: blur(22px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(140%) !important;
}

.office-real-app .codex-topbar h1 {
  margin: 0 !important;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 720 !important;
  letter-spacing: 0 !important;
}

.office-real-app .codex-topbar p:not(.codex-breadcrumb) {
  margin-top: 2px !important;
  font-size: 0.78rem !important;
}

.office-real-app .codex-run-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 6px 9px !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
  border-radius: 999px !important;
  background: rgba(15, 23, 42, 0.82) !important;
  color: rgba(226, 232, 240, 0.82) !important;
  font-size: 0.72rem !important;
}

.office-real-app .codex-dot {
  width: 7px !important;
  height: 7px !important;
  background: #22c55e !important;
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.85) !important;
}

.office-real-app .codex-messages {
  display: flex !important;
  flex-direction: column !important;
  gap: 13px !important;
  min-height: 0 !important;
  padding: 18px 18px 16px !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  background:
    radial-gradient(circle at 52% 0%, rgba(37, 37, 39, 0.46), transparent 34%),
    #070708 !important;
}

.office-real-app .codex-message,
.office-real-app .codex-empty-state {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  gap: 10px !important;
  max-width: 920px !important;
}

.office-real-app .codex-message > div:last-child,
.office-real-app .codex-empty-state {
  padding: 11px 13px !important;
  border: 1px solid rgba(255, 255, 255, 0.075) !important;
  border-radius: 12px !important;
  background: rgba(14, 18, 25, 0.72) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

.office-real-app .codex-message.is-user {
  align-self: end !important;
  width: min(820px, 92%) !important;
}

.office-real-app .codex-message.is-user > div:last-child {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(37, 44, 56, 0.9) !important;
}

.office-real-app .codex-message header {
  margin-bottom: 5px !important;
  user-select: text !important;
}

.office-real-app .codex-message p {
  color: rgba(241, 245, 249, 0.86) !important;
  font-size: 0.91rem !important;
  line-height: 1.55 !important;
  white-space: pre-wrap !important;
}

.office-real-app .codex-thinking-panel {
  display: grid !important;
  gap: 10px !important;
  max-width: 920px !important;
  padding: 12px 13px !important;
  border: 1px solid rgba(255, 255, 255, 0.075) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: rgba(226, 232, 240, 0.76) !important;
}

.office-real-app .codex-thinking-panel header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.office-real-app .codex-thinking-panel strong {
  color: rgba(248, 250, 252, 0.88) !important;
  font-size: 0.84rem !important;
}

.office-real-app .codex-thinking-panel > div {
  display: grid !important;
  gap: 5px !important;
}

.office-real-app .codex-thinking-panel span {
  color: rgba(203, 213, 225, 0.68) !important;
  font-size: 0.78rem !important;
}

.office-real-app .codex-thinking-orb {
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #a3e635 !important;
  box-shadow: 0 0 18px rgba(163, 230, 53, 0.7) !important;
}

.office-real-app .codex-thinking-panel.is-thinking .codex-thinking-orb {
  animation: office-thinking-pulse 1s ease-in-out infinite !important;
}

@keyframes office-thinking-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.86); }
  50% { opacity: 1; transform: scale(1.18); }
}

.office-real-app .office-modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 80 !important;
  display: grid !important;
  place-items: center !important;
  padding: 24px !important;
  background: rgba(2, 6, 12, 0.58) !important;
  backdrop-filter: blur(18px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
}

.office-real-app .office-modal-card {
  display: grid !important;
  gap: 14px !important;
  width: min(390px, 100%) !important;
  padding: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 18px !important;
  background: rgba(15, 18, 24, 0.96) !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  color: rgba(248, 250, 252, 0.92) !important;
}

.office-real-app .office-modal-card header,
.office-real-app .office-modal-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.office-real-app .office-modal-card header span {
  font-size: 0.95rem !important;
  font-weight: 780 !important;
}

.office-real-app .office-modal-card label {
  display: grid !important;
  gap: 7px !important;
  font-size: 0.76rem !important;
  color: rgba(203, 213, 225, 0.74) !important;
}

.office-real-app .office-modal-card input {
  height: 42px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  background: rgba(2, 6, 23, 0.62) !important;
  color: #f8fafc !important;
  outline: none !important;
}

.office-real-app .office-modal-card p {
  margin: 0 !important;
  color: rgba(203, 213, 225, 0.68) !important;
  font-size: 0.78rem !important;
  line-height: 1.4 !important;
}

.office-real-app .office-modal-card button {
  min-height: 34px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: rgba(248, 250, 252, 0.9) !important;
  font-weight: 720 !important;
}

.office-real-app .office-modal-card button:disabled {
  cursor: not-allowed !important;
  opacity: 0.48 !important;
}

.office-real-app .codex-quick-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  padding: 0 18px 10px !important;
  background: #070708 !important;
  flex: 0 0 auto !important;
}

.office-real-app .codex-quick-actions button {
  min-height: 30px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.075) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: rgba(226, 232, 240, 0.76) !important;
  font-size: 0.76rem !important;
  font-weight: 650 !important;
}

.office-real-app .codex-composer {
  margin: 0 18px 16px !important;
  padding: 10px !important;
  flex: 0 0 auto !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 14px !important;
  background: rgba(34, 34, 35, 0.86) !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  backdrop-filter: blur(28px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(145%) !important;
}

.office-real-app .office-composer-actions {
  display: flex !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
}

.office-real-app .office-composer-actions .office-file-button,
.office-real-app .office-composer-actions button {
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.075) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: rgba(226, 232, 240, 0.76) !important;
  font-size: 0.74rem !important;
}

.office-real-app .office-composer-actions .office-file-button {
  width: 30px !important;
  min-width: 30px !important;
  font-size: 1rem !important;
}

.office-real-app .codex-composer-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 78px !important;
  gap: 9px !important;
}

.office-real-app .codex-composer textarea {
  min-height: 58px !important;
  max-height: 140px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #f8fafc !important;
  font-size: 0.92rem !important;
  line-height: 1.48 !important;
  outline: none !important;
  resize: none !important;
  overflow: hidden !important;
}

.office-real-app .codex-composer textarea::placeholder {
  color: rgba(148, 163, 184, 0.7) !important;
}

.office-real-app .codex-composer-row > button {
  min-height: 42px !important;
  align-self: end !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  color: #05070b !important;
  font-size: 0.82rem !important;
  font-weight: 820 !important;
}

.office-real-app .codex-right-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 12px !important;
  height: 100svh !important;
  border-left: 1px solid rgba(255, 255, 255, 0.075) !important;
  background:
    linear-gradient(180deg, rgba(11, 12, 14, 0.98), rgba(7, 8, 10, 0.99)),
    #08090b !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
}

.office-real-app .codex-panel-card {
  display: grid !important;
  gap: 10px !important;
  padding: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.075) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

.office-real-app .codex-device-card,
.office-real-app .codex-skill-row,
.office-real-app .office-kanban-mini span,
.office-real-app .office-allowed-list span,
.office-real-app .codex-device-rules li {
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 10px !important;
  background: rgba(3, 6, 10, 0.42) !important;
  color: rgba(226, 232, 240, 0.72) !important;
}

.office-real-app .codex-device-card {
  padding: 12px !important;
}

.office-real-app .codex-device-rules {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
}

.office-real-app .codex-device-rules li {
  padding: 7px !important;
  font-size: 0.64rem !important;
}

.office-real-app .codex-skill-row {
  padding: 9px !important;
}

.office-real-app .codex-skill-row em.is-enabled {
  border-color: rgba(34, 197, 94, 0.18) !important;
  background: rgba(34, 197, 94, 0.11) !important;
  color: #bbf7d0 !important;
}

.codex-office-shell.office-real-app.office-auth-shell {
  display: grid !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  padding: 22px !important;
}

.office-real-app .office-auth-card {
  width: min(660px, calc(100vw - 32px)) !important;
  padding: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 18px !important;
  background: rgba(12, 17, 24, 0.9) !important;
  color: #f8fafc !important;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.45) !important;
}

.office-real-app .office-auth-card h1 {
  color: #f8fafc !important;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif !important;
  font-size: clamp(2.5rem, 7vw, 5.8rem) !important;
  font-weight: 780 !important;
  letter-spacing: -0.05em !important;
}

.office-real-app .office-auth-primary,
.office-real-app .office-auth-secondary {
  min-height: 48px !important;
  border-radius: 12px !important;
}

.office-real-app .office-auth-primary {
  background: #f8fafc !important;
  color: #05070b !important;
}

.office-real-app .office-auth-secondary {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #f8fafc !important;
}

@media (max-width: 1180px) {
  body:has(.office-real-app) {
    overflow: hidden !important;
  }

  .office-app-page {
    padding: 0 !important;
  }

  .codex-office-shell.office-real-app {
    grid-template-columns: 240px minmax(0, 1fr) !important;
    width: 100vw !important;
    height: 100svh !important;
    min-height: 0 !important;
    border-radius: 0 !important;
  }

  .office-real-app .codex-right-panel {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.075) !important;
    max-height: 34svh !important;
  }
}

@media (max-width: 760px) {
  .codex-office-shell.office-real-app {
    grid-template-columns: 1fr !important;
  }

  .office-real-app .codex-sidebar,
  .office-real-app .codex-right-panel {
    border: 0 !important;
  }

  .office-real-app .codex-right-panel {
    grid-template-columns: 1fr !important;
  }

  .office-real-app .codex-composer-row {
    grid-template-columns: 1fr !important;
  }
}

/* Hermes Office final authority: dark Codex shell with real translucent Mac glass */
body:has(.office-real-app) {
  background: transparent !important;
}

.codex-office-shell.office-real-app {
  grid-template-columns: 272px minmax(0, 1fr) 340px !important;
  background: transparent !important;
}

.office-real-app .codex-sidebar {
  padding: 50px 12px 12px !important;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.014) 34%, rgba(255, 255, 255, 0.004) 100%),
    linear-gradient(180deg, rgba(8, 11, 17, 0.82), rgba(6, 8, 12, 0.7) 58%, rgba(3, 4, 7, 0.82)),
    rgba(3, 5, 8, 0.72) !important;
  backdrop-filter: blur(72px) saturate(190%) contrast(1.1) brightness(0.72) !important;
  -webkit-backdrop-filter: blur(72px) saturate(190%) contrast(1.1) brightness(0.72) !important;
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.11),
    inset -1px 0 0 rgba(255, 255, 255, 0.06),
    28px 0 88px rgba(0, 0, 0, 0.42) !important;
}

.office-real-app .codex-sidebar::after {
  background:
    linear-gradient(92deg, rgba(255, 255, 255, 0.055), transparent 34%),
    radial-gradient(circle at 20% 8%, rgba(255, 255, 255, 0.07), transparent 30%) !important;
  opacity: 0.18 !important;
}

.office-real-app .codex-chat-column {
  background:
    radial-gradient(circle at 50% -10%, rgba(255, 255, 255, 0.065), transparent 30%),
    linear-gradient(180deg, rgba(9, 10, 12, 0.98), rgba(4, 5, 6, 0.995)) !important;
}

.office-real-app .codex-right-panel {
  background:
    linear-gradient(180deg, rgba(10, 11, 13, 0.97), rgba(5, 6, 8, 0.99)),
    #07080a !important;
}

.office-real-app .codex-brand,
.office-real-app .codex-room-row,
.office-real-app .office-command-stack button,
.office-real-app .codex-quick-actions button,
.office-real-app .codex-panel-heading button,
.office-real-app .office-composer-actions button,
.office-real-app .office-file-button,
.office-real-app .office-inline-link {
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease !important;
}

.office-real-app .codex-room-row,
.office-real-app .office-command-stack button,
.office-real-app .codex-quick-actions button,
.office-real-app .codex-panel-heading button,
.office-real-app .office-composer-actions button,
.office-real-app .office-file-button,
.office-real-app .office-inline-link {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.035)) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 32px rgba(0, 0, 0, 0.08) !important;
}

.office-real-app .codex-room-row:hover,
.office-real-app .codex-room-row.is-active,
.office-real-app .office-command-stack button:hover,
.office-real-app .codex-quick-actions button:hover,
.office-real-app .codex-panel-heading button:hover,
.office-real-app .office-composer-actions button:hover,
.office-real-app .office-file-button:hover,
.office-real-app .office-inline-link:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.07)) !important;
}

.office-real-app .codex-room-row.is-active {
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 16px 44px rgba(0, 0, 0, 0.14) !important;
}

.office-real-app .codex-room-row span b {
  display: inline-grid !important;
  place-items: center !important;
  width: 20px !important;
  height: 20px !important;
  margin-right: 7px !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.11) !important;
  color: rgba(248, 250, 252, 0.96) !important;
  font-size: 0.7rem !important;
  font-weight: 860 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.office-real-app .codex-topbar {
  min-height: 58px !important;
  background: rgba(8, 9, 11, 0.74) !important;
}

.office-real-app .codex-topbar h1 {
  font-size: 1.04rem !important;
}

.office-real-app .codex-messages {
  padding: 22px 22px 14px !important;
}

.office-real-app .codex-message > div:last-child,
.office-real-app .codex-empty-state,
.office-real-app .codex-thinking-panel,
.office-real-app .codex-panel-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  backdrop-filter: blur(28px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(145%) !important;
}

.office-real-app .codex-message.is-user > div:last-child {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.06)) !important;
}

.office-real-app .codex-agent-brief {
  display: grid !important;
  gap: 7px !important;
  padding: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.075) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)) !important;
}

.office-real-app .codex-agent-brief strong {
  color: rgba(248, 250, 252, 0.92) !important;
  font-size: 0.84rem !important;
  line-height: 1.36 !important;
}

.office-real-app .codex-agent-brief span {
  color: rgba(203, 213, 225, 0.66) !important;
  font-size: 0.76rem !important;
  font-weight: 620 !important;
  line-height: 1.4 !important;
}

.office-real-app .codex-composer {
  position: relative !important;
  margin: 0 22px 18px !important;
  background:
    linear-gradient(180deg, rgba(42, 44, 48, 0.92), rgba(23, 24, 27, 0.92)) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  border-radius: 18px !important;
}

.office-real-app .codex-composer-row {
  grid-template-columns: minmax(0, 1fr) 84px !important;
}

.office-real-app .codex-composer textarea {
  min-height: 56px !important;
  max-height: 120px !important;
  overflow: hidden !important;
}

.office-real-app .codex-composer-row > button {
  border-radius: 13px !important;
}

.office-real-app .codex-right-panel {
  overflow: hidden !important;
}

.office-real-app .codex-skill-list,
.office-real-app .office-allowed-list,
.office-real-app .office-kanban-mini {
  min-height: 0 !important;
  max-height: 280px !important;
  overflow: auto !important;
}

.office-real-app .codex-skill-row,
.office-real-app .codex-device-card,
.office-real-app .office-kanban-mini span,
.office-real-app .office-allowed-list span {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)) !important;
  border-color: rgba(255, 255, 255, 0.075) !important;
}

.office-real-app .office-auth-card {
  background:
    linear-gradient(180deg, rgba(19, 23, 31, 0.76), rgba(10, 12, 16, 0.82)) !important;
  backdrop-filter: blur(46px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(46px) saturate(180%) !important;
}

@media (max-width: 1180px) {
  .codex-office-shell.office-real-app {
    grid-template-columns: 248px minmax(0, 1fr) !important;
  }
}

/* Hermes Office hard reset: simple Codex-like desktop app, no dashboard slop */
body:has(.office-real-app),
html:has(.office-real-app) {
  overflow: hidden !important;
  background: transparent !important;
}

.codex-office-shell.office-real-app {
  grid-template-columns: 264px minmax(0, 1fr) !important;
  width: 100vw !important;
  height: 100svh !important;
  min-height: 0 !important;
  background: transparent !important;
  color: #f8fafc !important;
}

.office-real-app .codex-right-panel {
  display: none !important;
}

.office-real-app .codex-sidebar {
  gap: 10px !important;
  padding: 54px 10px 12px !important;
  border-right: 1px solid rgba(255, 255, 255, 0.11) !important;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.018) 34%, rgba(255, 255, 255, 0.006)),
    rgba(8, 10, 14, 0.44) !important;
  backdrop-filter: blur(78px) saturate(205%) brightness(0.78) !important;
  -webkit-backdrop-filter: blur(78px) saturate(205%) brightness(0.78) !important;
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.1),
    inset -1px 0 0 rgba(255, 255, 255, 0.05),
    28px 0 90px rgba(0, 0, 0, 0.32) !important;
}

.office-real-app .codex-sidebar::after {
  opacity: 0.12 !important;
}

.office-real-app .codex-brand {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 30px !important;
  margin: 0 4px 8px !important;
  padding: 0 7px !important;
}

.office-real-app .codex-logo {
  width: 9px !important;
  min-width: 9px !important;
  height: 9px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #22c55e !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.74) !important;
}

.office-real-app .codex-brand strong {
  font-size: 0.96rem !important;
  font-weight: 760 !important;
  letter-spacing: -0.01em !important;
}

.office-real-app .codex-brand span {
  display: none !important;
}

.office-real-app .codex-sidebar-section {
  gap: 4px !important;
}

.office-real-app .codex-primary-actions {
  margin-bottom: 5px !important;
}

.office-real-app .codex-room-row {
  min-height: 36px !important;
  padding: 0 9px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.office-real-app .codex-room-row:hover,
.office-real-app .codex-room-row.is-active {
  transform: none !important;
  border-color: rgba(255, 255, 255, 0.11) !important;
  background: rgba(255, 255, 255, 0.105) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

.office-real-app .codex-room-row span {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  color: rgba(248, 250, 252, 0.82) !important;
  font-size: 0.88rem !important;
  font-weight: 640 !important;
  letter-spacing: -0.01em !important;
}

.office-real-app .codex-room-row.is-active span {
  color: #fff !important;
}

.office-real-app .codex-room-row span b {
  width: 22px !important;
  height: 22px !important;
  margin-right: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04)) !important;
  color: rgba(248, 250, 252, 0.86) !important;
  font-size: 0.72rem !important;
  font-weight: 760 !important;
}

.office-real-app .codex-room-row em {
  display: none !important;
}

.office-real-app .codex-settings-panel {
  margin: 4px 2px 0 !important;
  border-radius: 13px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.04)) !important;
}

.office-real-app .codex-chat-column {
  height: 100svh !important;
  background:
    radial-gradient(circle at 50% -16%, rgba(255, 255, 255, 0.06), transparent 30%),
    linear-gradient(180deg, #0b0c0f, #050607 72%) !important;
}

.office-real-app .codex-topbar {
  min-height: 54px !important;
  padding: 10px 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  background: rgba(8, 9, 11, 0.58) !important;
  backdrop-filter: blur(24px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
}

.office-real-app .codex-topbar h1 {
  font-size: 0.98rem !important;
  font-weight: 720 !important;
}

.office-real-app .codex-run-status {
  min-height: 26px !important;
  padding: 0 9px !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: rgba(226, 232, 240, 0.72) !important;
  font-size: 0.7rem !important;
}

.office-real-app .codex-messages {
  gap: 12px !important;
  padding: 20px 20px 12px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.04), transparent 36%),
    transparent !important;
}

.office-real-app .codex-message,
.office-real-app .codex-empty-state {
  grid-template-columns: 28px minmax(0, 1fr) !important;
}

.office-real-app .codex-avatar {
  width: 28px !important;
  height: 28px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: rgba(248, 250, 252, 0.84) !important;
  font-size: 0.72rem !important;
  box-shadow: none !important;
}

.office-real-app .codex-message.is-hermes .codex-avatar {
  background: rgba(34, 197, 94, 0.12) !important;
  color: #bbf7d0 !important;
}

.office-real-app .codex-message > div:last-child,
.office-real-app .codex-empty-state,
.office-real-app .codex-thinking-panel {
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  border-color: rgba(255, 255, 255, 0.075) !important;
  box-shadow: none !important;
}

.office-real-app .codex-message.is-user > div:last-child {
  background: rgba(255, 255, 255, 0.085) !important;
}

.office-real-app .codex-message p {
  color: rgba(248, 250, 252, 0.86) !important;
  font-size: 0.93rem !important;
}

.office-real-app .codex-quick-actions {
  padding: 0 20px 10px !important;
}

.office-real-app .codex-quick-actions button,
.office-real-app .office-composer-actions button,
.office-real-app .office-file-button {
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: rgba(226, 232, 240, 0.76) !important;
  box-shadow: none !important;
}

.office-real-app .codex-quick-actions button:hover,
.office-real-app .office-composer-actions button:hover,
.office-real-app .office-file-button:hover {
  transform: none !important;
  background: rgba(255, 255, 255, 0.09) !important;
}

.office-real-app .codex-composer {
  margin: 0 20px 18px !important;
  padding: 11px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(37, 39, 43, 0.86), rgba(23, 24, 27, 0.9)) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

.office-real-app .office-composer-actions {
  margin-bottom: 8px !important;
}

.office-real-app .codex-composer textarea {
  min-height: 54px !important;
  color: #f8fafc !important;
  font-size: 0.95rem !important;
}

.office-real-app .codex-composer-row > button {
  border-radius: 13px !important;
  background: #f8fafc !important;
  color: #050607 !important;
  box-shadow: none !important;
}

/* Hermes Office final polish layer: Codex-dark, fixed panes, no dashboard graphics */
html:has(.office-real-app),
body:has(.office-real-app),
.office-page.office-app-page:has(.office-real-app) {
  width: 100vw !important;
  height: 100svh !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}

.codex-office-shell.office-real-app {
  display: grid !important;
  grid-template-columns: 262px minmax(0, 1fr) !important;
  gap: 0 !important;
  width: 100vw !important;
  height: 100svh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif !important;
  color: #f7f8fb !important;
}

.office-real-app .codex-right-panel,
.office-real-app .codex-panel-card,
.office-real-app .codex-agent-brief,
.office-real-app .codex-security-box,
.office-real-app .codex-voice-chip {
  display: none !important;
}

.office-real-app .codex-sidebar {
  position: relative !important;
  height: 100svh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 52px 10px 12px !important;
  gap: 8px !important;
  border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035) 42%, rgba(255, 255, 255, 0.015)),
    rgba(8, 9, 13, 0.56) !important;
  backdrop-filter: blur(86px) saturate(190%) brightness(0.78) !important;
  -webkit-backdrop-filter: blur(86px) saturate(190%) brightness(0.78) !important;
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.12),
    inset -1px 0 0 rgba(255, 255, 255, 0.04),
    22px 0 80px rgba(0, 0, 0, 0.36) !important;
}

.office-real-app .codex-sidebar::before,
.office-real-app .codex-sidebar::after {
  display: none !important;
}

.office-real-app .codex-brand {
  min-height: 30px !important;
  margin: 0 4px 10px !important;
  padding: 0 8px !important;
  gap: 9px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.office-real-app .codex-logo {
  width: 8px !important;
  min-width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: #2bff73 !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: 0 0 18px rgba(43, 255, 115, 0.66) !important;
}

.office-real-app .codex-brand strong {
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 0.95rem !important;
  font-weight: 720 !important;
  letter-spacing: -0.015em !important;
}

.office-real-app .codex-brand span,
.office-real-app .codex-sidebar-section > p,
.office-real-app .codex-room-row em {
  display: none !important;
}

.office-real-app .codex-sidebar-section {
  gap: 3px !important;
}

.office-real-app .codex-room-row {
  min-height: 34px !important;
  padding: 0 8px !important;
  border-radius: 9px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.office-real-app .codex-room-row:hover,
.office-real-app .codex-room-row.is-active {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.105) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.office-real-app .codex-room-row span {
  display: flex !important;
  align-items: center !important;
  color: rgba(244, 247, 251, 0.78) !important;
  font-size: 0.86rem !important;
  font-weight: 610 !important;
  letter-spacing: -0.01em !important;
}

.office-real-app .codex-room-row.is-active span {
  color: #fff !important;
}

.office-real-app .codex-room-row span b {
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  margin-right: 8px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  color: rgba(255, 255, 255, 0.76) !important;
  font-size: 0.68rem !important;
  font-weight: 760 !important;
  box-shadow: none !important;
}

.office-real-app .codex-room-row span b.codex-room-avatar-image,
.office-real-app .codex-avatar.has-image {
  background-color: rgba(255, 255, 255, 0.08) !important;
  background-position: center !important;
  background-size: cover !important;
  color: transparent !important;
  overflow: hidden !important;
}

.office-real-app .codex-room-row span b.codex-room-avatar-image {
  border-radius: 999px !important;
}

.office-real-app .codex-avatar.has-image {
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 28px rgba(0, 0, 0, 0.22) !important;
}

.office-hidden-file-input {
  display: none !important;
}

/* Final Hermes Office device rail override. Keep this last so old experiments cannot hide it. */
.codex-office-shell.office-real-app {
  grid-template-columns: 262px minmax(0, 1fr) 420px !important;
}

.office-real-app .codex-right-panel.codex-right-panel-minimal {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  height: 100svh !important;
  min-height: 0 !important;
  padding: 54px 10px 12px !important;
  border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
  background:
    linear-gradient(260deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02) 42%, rgba(255, 255, 255, 0.008)),
    rgba(8, 10, 14, 0.42) !important;
  backdrop-filter: blur(72px) saturate(190%) brightness(0.82) !important;
  -webkit-backdrop-filter: blur(72px) saturate(190%) brightness(0.82) !important;
  overflow: hidden !important;
}

.office-real-app .codex-right-panel-minimal .codex-panel-card {
  display: grid !important;
  gap: 10px !important;
  padding: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.office-real-app .codex-device-card-android {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
}

.office-real-app .codex-device-card-android strong,
.office-real-app .codex-device-card-android span {
  display: block !important;
}

.office-real-app .codex-device-card-android button {
  min-height: 30px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #f8fafc !important;
  font-weight: 780 !important;
}

.office-real-app .codex-android-host-panel {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 10px !important;
  height: calc(100svh - 72px) !important;
  min-height: 0 !important;
  padding: 10px !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035) 42%, rgba(255, 255, 255, 0.012)),
    rgba(6, 8, 12, 0.5) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 20px 70px rgba(0, 0, 0, 0.28) !important;
}

.office-real-app .codex-android-host-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 40px !important;
}

.office-real-app .codex-android-host-header strong,
.office-real-app .codex-android-host-header span {
  display: block !important;
}

.office-real-app .codex-android-host-header strong {
  color: rgba(255, 255, 255, 0.94) !important;
  font-size: 0.92rem !important;
  font-weight: 760 !important;
  letter-spacing: -0.015em !important;
}

.office-real-app .codex-android-host-header span,
.office-real-app .codex-android-host-footer span {
  color: rgba(226, 232, 240, 0.58) !important;
  font-size: 0.72rem !important;
  font-weight: 680 !important;
  letter-spacing: 0.055em !important;
  text-transform: uppercase !important;
}

.office-real-app .codex-android-host-header button {
  min-height: 30px !important;
  padding: 0 13px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.11) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 0.78rem !important;
  font-weight: 760 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.office-real-app .codex-android-viewport {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(34, 197, 94, 0.1), transparent 34%),
    #030405 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -34px 55px rgba(0, 0, 0, 0.46) !important;
  cursor: crosshair !important;
}

.office-real-app .codex-android-viewport img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.office-real-app .codex-android-viewport.is-live::after {
  content: "Grant Host" !important;
  position: absolute !important;
  left: 12px !important;
  bottom: 12px !important;
  padding: 7px 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: 999px !important;
  background: rgba(5, 7, 10, 0.52) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 0.72rem !important;
  font-weight: 720 !important;
  letter-spacing: 0.02em !important;
  backdrop-filter: blur(22px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
}

.office-real-app .codex-android-placeholder {
  display: grid !important;
  place-content: center !important;
  height: 100% !important;
  gap: 8px !important;
  padding: 22px !important;
  text-align: center !important;
}

.office-real-app .codex-android-placeholder strong {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 1rem !important;
  font-weight: 760 !important;
}

.office-real-app .codex-android-placeholder span {
  max-width: 230px !important;
  color: rgba(226, 232, 240, 0.55) !important;
  font-size: 0.8rem !important;
  font-weight: 620 !important;
  line-height: 1.35 !important;
}

.office-real-app .codex-android-host-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 24px !important;
}

@media (max-width: 1180px) {
  .codex-office-shell.office-real-app {
    grid-template-columns: 220px minmax(0, 1fr) 280px !important;
  }

  .office-real-app .codex-right-panel.codex-right-panel-minimal {
    display: flex !important;
    padding: 46px 8px 10px !important;
  }
}

.office-real-app .codex-settings-panel {
  margin: 5px 3px 0 !important;
  padding: 10px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  box-shadow: none !important;
}

.office-real-app .codex-settings-panel strong,
.office-real-app .codex-settings-panel span {
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 0.78rem !important;
}

.office-real-app .codex-chat-column {
  display: grid !important;
  grid-template-rows: 54px minmax(0, 1fr) auto auto !important;
  height: 100svh !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% -20%, rgba(255, 255, 255, 0.055), transparent 35%),
    linear-gradient(180deg, rgba(13, 14, 17, 0.98), rgba(4, 5, 7, 0.99) 76%) !important;
}

.office-real-app .codex-topbar {
  min-height: 54px !important;
  padding: 9px 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.065) !important;
  background: rgba(9, 10, 13, 0.7) !important;
  backdrop-filter: blur(30px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(160%) !important;
}

.office-real-app .codex-topbar h1 {
  color: rgba(255, 255, 255, 0.94) !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

.office-real-app .codex-run-status {
  min-height: 26px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: rgba(226, 232, 240, 0.68) !important;
  font-size: 0.7rem !important;
  font-weight: 650 !important;
}

.office-real-app .codex-dot {
  background: #23f46e !important;
  box-shadow: 0 0 12px rgba(35, 244, 110, 0.72) !important;
}

.office-real-app .codex-messages {
  min-height: 0 !important;
  overflow: auto !important;
  gap: 14px !important;
  padding: 24px 24px 16px !important;
  background: transparent !important;
  overflow-anchor: none !important;
}

.office-real-app .codex-messages-bottom {
  width: 100% !important;
  height: 1px !important;
  flex: 0 0 1px !important;
}

.office-real-app .codex-message,
.office-real-app .codex-empty-state {
  grid-template-columns: 28px minmax(0, 1fr) !important;
  gap: 10px !important;
}

.office-real-app .codex-avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: rgba(248, 250, 252, 0.78) !important;
  box-shadow: none !important;
  font-size: 0.68rem !important;
  font-weight: 760 !important;
}

.office-real-app .codex-message.is-hermes .codex-avatar {
  background: rgba(35, 244, 110, 0.12) !important;
  color: #baf7cf !important;
}

.office-real-app .codex-message > div:last-child,
.office-real-app .codex-empty-state,
.office-real-app .codex-thinking-panel {
  padding: 12px 13px !important;
  border: 1px solid rgba(255, 255, 255, 0.072) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.043) !important;
  box-shadow: none !important;
}

.office-real-app .codex-message.is-user > div:last-child {
  background: rgba(255, 255, 255, 0.082) !important;
}

.office-real-app .codex-message header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 5px !important;
  user-select: text !important;
}

.office-real-app .codex-message header strong {
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 0.72rem !important;
  font-weight: 720 !important;
}

.office-real-app .codex-message header span {
  color: #fca5a5 !important;
  font-size: 0.68rem !important;
}

.office-real-app .codex-message p {
  color: rgba(248, 250, 252, 0.88) !important;
  font-size: 0.92rem !important;
  font-weight: 480 !important;
  line-height: 1.48 !important;
  user-select: text !important;
  white-space: pre-wrap !important;
}

.office-real-app .codex-copy-message {
  margin-left: auto !important;
  min-height: 22px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.052) !important;
  color: rgba(226, 232, 240, 0.62) !important;
  font-size: 0.66rem !important;
  font-weight: 720 !important;
}

.office-real-app .codex-copy-message:hover {
  background: rgba(255, 255, 255, 0.11) !important;
  color: #fff !important;
}

.office-real-app .codex-messages,
.office-real-app .codex-message,
.office-real-app .codex-message * {
  -webkit-user-select: text !important;
  user-select: text !important;
}

.office-real-app button,
.office-real-app input,
.office-real-app textarea {
  -webkit-user-select: none !important;
  user-select: none !important;
}

.office-real-app textarea {
  -webkit-user-select: text !important;
  user-select: text !important;
}

.office-real-app .codex-media-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)) !important;
  gap: 10px !important;
  margin-top: 12px !important;
}

.office-real-app .codex-media-card {
  overflow: hidden !important;
  margin: 0 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035)) !important;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.office-real-app .codex-media-card img,
.office-real-app .codex-media-card video {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  background: rgba(0, 0, 0, 0.34) !important;
}

.office-real-app .codex-media-card figcaption {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 9px !important;
}

.office-real-app .codex-media-card figcaption span {
  overflow: hidden !important;
  color: rgba(248, 250, 252, 0.74) !important;
  font-size: 0.72rem !important;
  font-weight: 650 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.office-real-app .codex-media-card figcaption button {
  min-height: 24px !important;
  padding: 0 8px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.075) !important;
  color: rgba(255, 255, 255, 0.84) !important;
  font-size: 0.68rem !important;
  font-weight: 720 !important;
}

.office-real-app .codex-media-card figcaption button:hover {
  background: rgba(255, 255, 255, 0.13) !important;
  color: #fff !important;
}

.office-real-app .codex-empty-state {
  color: rgba(255, 255, 255, 0.82) !important;
}

.office-real-app .codex-thinking-panel {
  margin-left: 38px !important;
}

.office-real-app .codex-thinking-panel header {
  color: rgba(255, 255, 255, 0.74) !important;
  font-size: 0.84rem !important;
}

.office-real-app .codex-quick-actions {
  display: flex !important;
  gap: 7px !important;
  padding: 0 22px 10px !important;
  overflow: hidden !important;
  background: transparent !important;
}

.office-real-app .codex-quick-actions button,
.office-real-app .office-composer-actions button,
.office-real-app .office-file-button,
.office-real-app .office-inline-link,
.office-real-app .codex-mode-grid button {
  min-height: 28px !important;
  padding: 0 10px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.052) !important;
  color: rgba(226, 232, 240, 0.75) !important;
  box-shadow: none !important;
  font-size: 0.78rem !important;
  font-weight: 650 !important;
  transform: none !important;
}

.office-real-app .codex-quick-actions button:hover,
.office-real-app .office-composer-actions button:hover,
.office-real-app .office-file-button:hover,
.office-real-app .office-inline-link:hover,
.office-real-app .codex-mode-grid button:hover,
.office-real-app .codex-mode-grid button.is-active,
.office-real-app .office-composer-actions button.is-on {
  background: rgba(255, 255, 255, 0.095) !important;
  color: #fff !important;
}

.office-real-app .codex-composer {
  position: relative !important;
  margin: 0 22px 18px !important;
  padding: 10px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background:
    linear-gradient(180deg, rgba(39, 41, 46, 0.9), rgba(22, 23, 27, 0.94)) !important;
  box-shadow:
    0 24px 78px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

.office-real-app .codex-composer-meta {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.office-real-app .office-composer-actions {
  display: flex !important;
  gap: 7px !important;
  margin-bottom: 8px !important;
}

.office-real-app .codex-composer-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 76px !important;
  gap: 9px !important;
}

.office-real-app .codex-composer textarea {
  min-height: 48px !important;
  max-height: 116px !important;
  padding: 4px 2px !important;
  overflow: hidden !important;
  resize: none !important;
  color: #f8fafc !important;
  font-size: 0.95rem !important;
  line-height: 1.42 !important;
  background: transparent !important;
}

.office-real-app .codex-composer textarea::placeholder {
  color: rgba(226, 232, 240, 0.42) !important;
}

.office-real-app .codex-composer-row > button {
  min-height: 48px !important;
  border-radius: 13px !important;
  border: 0 !important;
  background: #f8fafc !important;
  color: #050607 !important;
  box-shadow: none !important;
  font-size: 0.88rem !important;
  font-weight: 770 !important;
}

@media (max-width: 900px) {
  .codex-office-shell.office-real-app {
    grid-template-columns: 78px minmax(0, 1fr) !important;
  }

  .office-real-app .codex-brand strong,
  .office-real-app .codex-room-row span {
    font-size: 0 !important;
  }

  .office-real-app .codex-room-row span b {
    margin-right: 0 !important;
  }
}

.office-real-app .codex-room-row span b.codex-room-avatar-image,
.office-real-app .codex-avatar.has-image {
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  color: transparent !important;
  overflow: hidden !important;
}

.office-real-app .codex-room-row span b.codex-room-avatar-image {
  border-radius: 999px !important;
}

.office-real-app .codex-avatar.has-image {
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.office-real-app .codex-room-row span b.codex-room-avatar-image img,
.office-real-app .codex-avatar.has-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}

.office-hidden-file-input {
  display: none !important;
}


/* Hermes Office: preserve native text selection/copy in chat output, logs, errors, paths, and composer fields. */
.codex-messages,
.codex-message,
.codex-message > div:last-child,
.codex-message p,
.codex-message header,
.codex-message header span,
.codex-media-card figcaption span,
.codex-composer textarea,
.codex-composer-meta span {
  -webkit-user-select: text;
  user-select: text;
}

/* Reviews Office final visual authority: soft Apple/Reviews left rail. */
.office-real-app .codex-sidebar {
  padding: 52px 12px 14px !important;
  gap: 10px !important;
  border-right: 1px solid rgba(21, 80, 44, 0.12) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0) 34%),
    linear-gradient(180deg, rgba(248, 253, 248, 0.96), rgba(232, 245, 235, 0.92)) !important;
  color: #142018 !important;
  backdrop-filter: blur(34px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(34px) saturate(170%) !important;
  box-shadow:
    inset -1px 0 0 rgba(255, 255, 255, 0.78),
    14px 0 44px rgba(34, 84, 52, 0.08) !important;
}

.office-real-app .codex-brand {
  min-height: 38px !important;
  margin: 0 2px 8px !important;
  padding: 6px 8px !important;
  border: 1px solid rgba(34, 154, 92, 0.1) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.62) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.office-real-app .codex-logo {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #229a5c, #66b34d) !important;
  color: #fff !important;
  font-size: 0.74rem !important;
  font-weight: 950 !important;
  box-shadow: 0 8px 20px rgba(34, 154, 92, 0.22) !important;
}

.office-real-app .codex-brand strong {
  color: #142018 !important;
  font-size: 0.95rem !important;
  font-weight: 850 !important;
}

.office-real-app .codex-brand span {
  display: block !important;
  color: rgba(20, 32, 24, 0.52) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
}

.office-real-app .codex-room-row {
  min-height: 40px !important;
  padding: 0 10px !important;
  border: 1px solid transparent !important;
  border-radius: 16px !important;
  background: transparent !important;
  color: #203127 !important;
  box-shadow: none !important;
}

.office-real-app .codex-room-row:hover,
.office-real-app .codex-room-row.is-active {
  border-color: rgba(34, 154, 92, 0.14) !important;
  background: rgba(255, 255, 255, 0.68) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 24px rgba(34, 84, 52, 0.08) !important;
}

.office-real-app .codex-room-row span,
.office-real-app .codex-room-row.is-active span {
  color: #17251c !important;
  font-size: 0.88rem !important;
  font-weight: 760 !important;
}

.office-real-app .codex-room-row span b {
  width: 24px !important;
  height: 24px !important;
  margin-right: 9px !important;
  border: 1px solid rgba(34, 154, 92, 0.13) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #ffffff, #eef8f1) !important;
  color: #229a5c !important;
  font-size: 0.72rem !important;
  font-weight: 950 !important;
}

.office-real-app .codex-room-row em {
  display: inline-flex !important;
  color: rgba(20, 32, 24, 0.46) !important;
  font-size: 0.64rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

.office-real-app .codex-room-row em:empty {
  display: none !important;
}

.office-real-app .office-heart-status {
  margin: 0 2px 8px !important;
  border-color: rgba(34, 154, 92, 0.14) !important;
  background: rgba(255, 255, 255, 0.7) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.office-real-app .office-heart-status.is-online {
  border-color: rgba(34, 154, 92, 0.26) !important;
  background: rgba(232, 248, 237, 0.9) !important;
}

/* Reviews Office final dark authority: match the native app rails. */
.office-real-app .codex-sidebar,
.office-real-app .codex-right-panel.codex-right-panel-minimal {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background:
    radial-gradient(circle at 50% -16%, rgba(255, 255, 255, 0.06), transparent 34%),
    linear-gradient(180deg, #090a0c, #030405 74%) !important;
  color: #f8fafc !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    22px 0 70px rgba(0, 0, 0, 0.34) !important;
}

.office-real-app .codex-sidebar {
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.office-real-app .codex-right-panel.codex-right-panel-minimal {
  border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.office-real-app .codex-brand,
.office-real-app .office-heart-status,
.office-real-app .codex-settings-panel,
.office-real-app .codex-right-panel-minimal .codex-panel-card,
.office-real-app .codex-android-host-panel {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: #f8fafc !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

.office-real-app .codex-brand strong,
.office-real-app .office-heart-status strong,
.office-real-app .codex-right-panel-minimal strong,
.office-real-app .codex-android-host-header strong {
  color: #f8fafc !important;
}

.office-real-app .codex-brand span,
.office-real-app .office-heart-status span,
.office-real-app .codex-right-panel-minimal span,
.office-real-app .codex-android-host-header span,
.office-real-app .codex-android-host-footer span {
  color: rgba(226, 232, 240, 0.58) !important;
}

.office-real-app .codex-logo {
  width: 9px !important;
  min-width: 9px !important;
  height: 9px !important;
  border-radius: 999px !important;
  background: #22c55e !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.72) !important;
}

.office-real-app .codex-room-row {
  border-color: transparent !important;
  background: transparent !important;
  color: rgba(248, 250, 252, 0.82) !important;
  box-shadow: none !important;
}

.office-real-app .codex-room-row:hover,
.office-real-app .codex-room-row.is-active {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.09) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

.office-real-app .codex-room-row span,
.office-real-app .codex-room-row.is-active span {
  color: rgba(248, 250, 252, 0.9) !important;
}

.office-real-app .codex-room-row span b {
  border-color: rgba(255, 255, 255, 0.09) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: rgba(248, 250, 252, 0.84) !important;
}

.office-real-app .codex-room-row em {
  color: rgba(226, 232, 240, 0.46) !important;
}

.office-real-app .office-heart-status.is-online {
  border-color: rgba(34, 197, 94, 0.22) !important;
  background: rgba(34, 197, 94, 0.09) !important;
}

.office-real-app .office-heart-status.is-online strong {
  color: #86efac !important;
}

/* Hermes Office launch authority: dark Codex-style shell on web and desktop. */
html:has(.office-real-app),
body:has(.office-real-app),
.office-page.office-app-page:has(.office-real-app) {
  color-scheme: dark !important;
  background: #050608 !important;
  color: #f8fafc !important;
}

.codex-office-shell.office-real-app {
  background:
    radial-gradient(circle at 18% 8%, rgba(34, 197, 94, 0.08), transparent 30%),
    radial-gradient(circle at 82% 0%, rgba(255, 255, 255, 0.055), transparent 28%),
    #050608 !important;
  color: #f8fafc !important;
}

.office-real-app .codex-sidebar,
.office-real-app .codex-right-panel.codex-right-panel-minimal {
  border-color: rgba(255, 255, 255, 0.11) !important;
  background: rgba(8, 10, 14, 0.78) !important;
  color: #f8fafc !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 80px rgba(0, 0, 0, 0.42) !important;
  backdrop-filter: blur(34px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(34px) saturate(145%) !important;
}

.office-real-app .codex-brand,
.office-real-app .office-heart-status,
.office-real-app .codex-settings-panel,
.office-real-app .codex-right-panel-minimal .codex-panel-card,
.office-real-app .codex-android-host-panel,
.office-real-app .codex-message > div:last-child,
.office-real-app .codex-empty-state,
.office-real-app .codex-thinking-panel,
.office-real-app .codex-composer {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: #f8fafc !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.065) !important;
}

.office-real-app .codex-brand strong,
.office-real-app .codex-topbar h1,
.office-real-app .codex-room-row span,
.office-real-app .codex-room-row.is-active span,
.office-real-app .codex-message header strong,
.office-real-app .codex-message p,
.office-real-app .codex-right-panel-minimal strong,
.office-real-app .codex-android-host-header strong {
  color: #f8fafc !important;
}

.office-real-app .codex-brand span,
.office-real-app .codex-room-row em,
.office-real-app .codex-message header span,
.office-real-app .codex-composer-meta span,
.office-real-app .codex-right-panel-minimal span,
.office-real-app .codex-android-host-header span,
.office-real-app .codex-android-host-footer span {
  color: rgba(248, 250, 252, 0.62) !important;
}

.office-real-app .codex-room-row,
.office-real-app .codex-quick-actions button,
.office-real-app .office-composer-actions button,
.office-real-app .office-file-button,
.office-real-app .office-inline-link,
.office-real-app .codex-mode-grid button {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: transparent !important;
  color: rgba(248, 250, 252, 0.78) !important;
}

.office-real-app .codex-room-row:hover,
.office-real-app .codex-room-row.is-active,
.office-real-app .codex-quick-actions button:hover,
.office-real-app .office-composer-actions button:hover,
.office-real-app .office-file-button:hover,
.office-real-app .office-inline-link:hover,
.office-real-app .codex-mode-grid button:hover,
.office-real-app .codex-mode-grid button.is-active,
.office-real-app .office-composer-actions button.is-on {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

.office-real-app .codex-chat-column,
.office-real-app .codex-messages {
  background: transparent !important;
  color: #f8fafc !important;
}

.office-real-app .codex-composer textarea {
  background: transparent !important;
  color: #ffffff !important;
  caret-color: #ffffff !important;
}

.office-real-app .codex-composer textarea::placeholder {
  color: rgba(248, 250, 252, 0.38) !important;
}

.office-real-app .office-agent-controls {
  display: grid !important;
  gap: 8px !important;
  margin: 0 22px 10px !important;
  padding: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

.office-real-app .office-command-stack {
  display: flex !important;
  gap: 7px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.office-real-app .office-command-stack::-webkit-scrollbar {
  display: none !important;
}

.office-real-app .office-command-stack button,
.office-real-app .office-steer-row button {
  min-height: 30px !important;
  padding: 0 10px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: rgba(248, 250, 252, 0.76) !important;
  cursor: pointer !important;
  font-size: 0.76rem !important;
  font-weight: 760 !important;
  white-space: nowrap !important;
}

.office-real-app .office-command-stack button:hover,
.office-real-app .office-steer-row button:hover {
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.11) !important;
  color: #fff !important;
}

.office-real-app .office-command-stack button:disabled,
.office-real-app .office-steer-row button:disabled,
.office-real-app .office-steer-row input:disabled {
  cursor: not-allowed !important;
  opacity: 0.42 !important;
}

.office-real-app .office-command-stack button.is-danger {
  border-color: rgba(248, 113, 113, 0.35) !important;
  background: rgba(127, 29, 29, 0.34) !important;
  color: #fecaca !important;
}

.office-real-app .office-steer-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
}

.office-real-app .office-steer-row input {
  min-width: 0 !important;
  min-height: 32px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  background: rgba(0, 0, 0, 0.22) !important;
  color: #f8fafc !important;
  font-size: 0.82rem !important;
  outline: none !important;
}

.office-real-app .office-steer-row input::placeholder {
  color: rgba(248, 250, 252, 0.34) !important;
}

.office-real-app .office-steer-row input:focus {
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06) !important;
}

.office-real-app .office-steer-queue {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.office-real-app .office-steer-queue span {
  max-width: 100% !important;
  padding: 5px 8px !important;
  border-radius: 999px !important;
  background: rgba(34, 197, 94, 0.1) !important;
  color: rgba(187, 247, 208, 0.9) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 0.7rem !important;
  font-weight: 760 !important;
}

.office-real-app .codex-composer-row > button {
  background: #f8fafc !important;
  color: #050608 !important;
}

.office-real-app .office-reviews-logo {
  display: block !important;
  width: 118px !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  filter: invert(1) brightness(1.28) contrast(1.06) !important;
}

.office-real-app .codex-brand {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.office-real-app .codex-brand > span {
  flex: 0 0 auto !important;
  padding: 3px 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  font-size: 0.62rem !important;
  font-weight: 760 !important;
  letter-spacing: 0.02em !important;
  text-transform: lowercase !important;
}

.office-real-app .office-settings-group {
  display: grid !important;
  gap: 7px !important;
  padding: 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.045) !important;
}

.office-real-app .office-settings-group strong {
  font-size: 0.7rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.office-real-app .codex-settings-panel .office-inline-link {
  width: 100% !important;
  justify-content: center !important;
}

.office-real-app .codex-settings-panel .office-inline-link.is-active {
  border-color: rgba(80, 214, 138, 0.28) !important;
  background: rgba(43, 169, 106, 0.14) !important;
  color: #eafff3 !important;
}

.office-real-app .codex-quick-actions {
  display: none !important;
}

.office-real-app .office-composer-actions {
  justify-content: space-between !important;
}

body:has(.codex-office-shell) .app-install-banner,
body:has(.office-app-page) .app-install-banner,
body:has(.office-real-app) .app-install-banner,
body:has(.app-download-page) .app-install-banner,
body:has(.app-install-page) .app-install-banner {
  display: none !important;
}

@keyframes officePulseRing {
  0% {
    box-shadow: 0 0 0 0 rgba(130, 255, 188, 0.22);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(130, 255, 188, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(130, 255, 188, 0);
  }
}

@keyframes officeTraceIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.office-real-app .office-profile-line {
  margin: 5px 0 0 !important;
  color: rgba(236, 253, 245, 0.58) !important;
  font-size: 0.76rem !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

.office-real-app .codex-run-status {
  min-width: max-content !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.055)) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 14px 40px rgba(0, 0, 0, 0.32) !important;
}

.office-real-app .codex-dot {
  animation: officePulseRing 2.2s ease-out infinite !important;
}

.office-real-app .codex-thinking-panel {
  gap: 12px !important;
  border-color: rgba(117, 255, 177, 0.18) !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(83, 255, 153, 0.12), transparent 28%),
    linear-gradient(145deg, rgba(12, 18, 16, 0.82), rgba(5, 7, 8, 0.74)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 24px 70px rgba(0, 0, 0, 0.3) !important;
}

.office-real-app .office-live-trace {
  display: grid !important;
  gap: 8px !important;
}

.office-real-app .office-live-event,
.office-real-app .office-mini-event {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 10px !important;
  padding: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  animation: officeTraceIn 220ms ease both !important;
}

.office-real-app .office-live-event > span,
.office-real-app .office-mini-event > span {
  padding: 4px 7px !important;
  border-radius: 999px !important;
  background: rgba(83, 255, 153, 0.12) !important;
  color: rgba(187, 247, 208, 0.9) !important;
  font-size: 0.62rem !important;
  font-weight: 820 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
}

.office-real-app .office-live-event strong,
.office-real-app .office-mini-event strong {
  display: block !important;
  color: rgba(255, 255, 255, 0.94) !important;
  font-size: 0.82rem !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
}

.office-real-app .office-live-event p {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  margin: 3px 0 0 !important;
  overflow: hidden !important;
  color: rgba(226, 232, 240, 0.66) !important;
  font-size: 0.75rem !important;
  line-height: 1.35 !important;
}

.office-real-app .office-live-event > em {
  color: rgba(226, 232, 240, 0.42) !important;
  font-size: 0.68rem !important;
  font-style: normal !important;
  font-weight: 780 !important;
}

.office-real-app .office-live-event.is-error,
.office-real-app .office-mini-event.is-error {
  border-color: rgba(248, 113, 113, 0.28) !important;
  background: rgba(127, 29, 29, 0.22) !important;
}

.office-real-app .office-live-event.is-warn,
.office-real-app .office-mini-event.is-warn {
  border-color: rgba(251, 191, 36, 0.24) !important;
  background: rgba(120, 53, 15, 0.16) !important;
}

.office-real-app .office-profile-card,
.office-real-app .office-activity-card {
  display: grid !important;
  gap: 12px !important;
}

.office-real-app .office-profile-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.office-real-app .office-profile-card-header span {
  color: rgba(226, 232, 240, 0.48) !important;
  font-size: 0.64rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.office-real-app .office-profile-card-header strong {
  color: #f8fafc !important;
  font-size: 0.86rem !important;
  font-weight: 760 !important;
  text-transform: lowercase !important;
}

.office-real-app .office-profile-card p {
  margin: 0 !important;
  color: rgba(226, 232, 240, 0.68) !important;
  font-size: 0.83rem !important;
  line-height: 1.42 !important;
}

.office-real-app .office-profile-card code {
  color: rgba(187, 247, 208, 0.9) !important;
}

.office-real-app .office-profile-card em {
  display: block !important;
  padding: 10px !important;
  border-radius: 12px !important;
  background: rgba(0, 0, 0, 0.18) !important;
  color: rgba(226, 232, 240, 0.54) !important;
  font-size: 0.74rem !important;
  font-style: normal !important;
  line-height: 1.35 !important;
}

.office-real-app .office-profile-metrics {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.office-real-app .office-profile-metrics span {
  min-height: 42px !important;
  display: grid !important;
  place-items: center !important;
  padding: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.052) !important;
  color: rgba(226, 232, 240, 0.72) !important;
  text-align: center !important;
  font-size: 0.68rem !important;
  font-weight: 760 !important;
}

.office-real-app .office-profile-metrics strong {
  display: block !important;
  color: #ffffff !important;
  font-size: 1.02rem !important;
  line-height: 1 !important;
}

.office-real-app .office-mini-trace {
  display: grid !important;
  gap: 7px !important;
}

.office-real-app .office-mini-event {
  grid-template-columns: auto minmax(0, 1fr) !important;
  padding: 8px !important;
}

.office-real-app .office-mini-event strong {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 0.76rem !important;
}

.codex-office-shell.office-real-app {
  -webkit-app-region: drag !important;
}

.office-real-app .codex-brand,
.office-real-app .codex-brand.codex-brand-compact {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.office-real-app .codex-brand.codex-brand-compact {
  padding: 8px 10px 4px !important;
  margin: 0 0 4px !important;
  justify-content: flex-start !important;
}

.office-real-app button,
.office-real-app input,
.office-real-app textarea,
.office-real-app select,
.office-real-app a,
.office-real-app label,
.office-real-app .codex-messages,
.office-real-app .codex-message,
.office-real-app .codex-message *,
.office-real-app .codex-sidebar *,
.office-real-app .codex-right-panel *,
.office-real-app .codex-composer,
.office-real-app .codex-composer *,
.office-real-app .office-agent-controls,
.office-real-app .office-agent-controls * {
  -webkit-app-region: no-drag !important;
}

.office-real-app .codex-topbar,
.office-real-app .codex-topbar * {
  -webkit-app-region: drag !important;
}

.office-real-app .codex-run-status {
  -webkit-app-region: no-drag !important;
}

.office-real-app .office-inline-link.is-danger {
  border-color: rgba(248, 113, 113, 0.32) !important;
  background: rgba(127, 29, 29, 0.22) !important;
  color: #fecaca !important;
}

.office-real-app .office-inline-link.is-danger:hover {
  background: rgba(185, 28, 28, 0.3) !important;
  color: #fff1f2 !important;
}

.office-real-app .codex-topbar.office-drag-strip {
  min-height: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.office-real-app .codex-composer-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  min-height: 0 !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
}

.office-real-app .codex-composer-meta:empty {
  display: none !important;
}

.office-real-app .codex-composer-meta span {
  max-width: 100% !important;
  padding: 4px 9px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: rgba(226, 232, 240, 0.54) !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 0.68rem !important;
  font-weight: 720 !important;
  letter-spacing: 0.01em !important;
}

.office-real-app .codex-thinking-panel {
  max-width: 760px !important;
  gap: 12px !important;
  padding: 20px 22px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035), transparent 70%),
    rgba(4, 5, 7, 0.42) !important;
  box-shadow: none !important;
  backdrop-filter: blur(24px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(120%) !important;
}

.office-real-app .codex-thinking-panel header {
  gap: 0 !important;
}

.office-real-app .codex-thinking-panel header .codex-thinking-orb {
  display: none !important;
}

.office-real-app .codex-thinking-panel header strong {
  color: rgba(226, 232, 240, 0.54) !important;
  font-size: 0.94rem !important;
  font-weight: 560 !important;
  letter-spacing: 0 !important;
}

.office-real-app .office-live-trace {
  gap: 9px !important;
}

.office-real-app .office-live-event {
  grid-template-columns: 28px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  animation: officeTraceLineIn 260ms ease both !important;
}

.office-real-app .office-live-event > span {
  width: 20px !important;
  height: 20px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border-radius: 4px !important;
  background: rgba(226, 232, 240, 0.52) !important;
  color: #080a0d !important;
  font-size: 0 !important;
  font-weight: 800 !important;
}

.office-real-app .office-live-event > span::before {
  content: "·" !important;
  color: #0b0d10 !important;
  font-size: 1rem !important;
  line-height: 1 !important;
}

.office-real-app .office-live-event > span:where(:not(:empty))::before {
  content: "▸" !important;
  font-size: 0.72rem !important;
}

.office-real-app .office-live-event strong {
  color: rgba(226, 232, 240, 0.58) !important;
  font-size: 0.93rem !important;
  font-weight: 540 !important;
}

.office-real-app .office-live-event p {
  display: block !important;
  margin: 2px 0 0 !important;
  color: rgba(226, 232, 240, 0.38) !important;
  font-size: 0.8rem !important;
  line-height: 1.35 !important;
  -webkit-line-clamp: unset !important;
}

.office-real-app .office-live-event > em {
  color: rgba(226, 232, 240, 0.34) !important;
  font-size: 0.72rem !important;
  font-weight: 520 !important;
}

.office-real-app .office-live-event.is-error,
.office-real-app .office-live-event.is-warn {
  border: 0 !important;
  background: transparent !important;
}

.office-real-app .office-live-event.is-error strong {
  color: rgba(254, 202, 202, 0.78) !important;
}

@keyframes officeTraceLineIn {
  from {
    opacity: 0;
    transform: translateY(6px);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

html:has(.office-real-app),
body:has(.office-real-app),
.office-page.office-app-page:has(.office-real-app) {
  background: transparent !important;
}

.codex-office-shell.office-real-app {
  background: transparent !important;
  color: rgba(248, 250, 252, 0.94) !important;
}

.office-real-app .codex-sidebar,
.office-real-app .codex-chat-column,
.office-real-app .codex-right-panel.codex-right-panel-minimal {
  background: rgba(12, 14, 18, 0.34) !important;
  border-color: rgba(255, 255, 255, 0.11) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 90px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: blur(58px) saturate(185%) !important;
  -webkit-backdrop-filter: blur(58px) saturate(185%) !important;
}

.office-real-app .codex-chat-column {
  background: rgba(10, 11, 14, 0.18) !important;
}

.office-real-app .codex-sidebar::before,
.office-real-app .codex-sidebar::after,
.office-real-app .codex-android-viewport.is-live::after {
  display: none !important;
}

.office-real-app .codex-brand,
.office-real-app .codex-brand.codex-brand-compact,
.office-real-app .codex-settings-panel,
.office-real-app .codex-android-host-panel,
.office-real-app .codex-message > div:last-child,
.office-real-app .codex-empty-state,
.office-real-app .codex-composer,
.office-real-app .codex-thinking-panel {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.075) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 18px 55px rgba(0, 0, 0, 0.16) !important;
  backdrop-filter: blur(44px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(44px) saturate(180%) !important;
}

.office-real-app .codex-brand,
.office-real-app .codex-brand.codex-brand-compact {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.office-real-app .codex-room-row,
.office-real-app .office-inline-link,
.office-real-app .office-file-button,
.office-real-app .office-slash-menu button,
.office-real-app .codex-android-host-header button {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: rgba(248, 250, 252, 0.82) !important;
  backdrop-filter: blur(26px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(160%) !important;
}

.office-real-app .codex-room-row:hover,
.office-real-app .codex-room-row.is-active,
.office-real-app .office-inline-link:hover,
.office-real-app .office-inline-link.is-active,
.office-real-app .office-file-button:hover,
.office-real-app .office-slash-menu button:hover,
.office-real-app .office-slash-menu button.is-active {
  background: rgba(255, 255, 255, 0.13) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

.office-real-app .codex-settings-panel {
  gap: 8px !important;
  padding: 10px !important;
  border-radius: 18px !important;
}

.office-real-app .codex-settings-panel > div:first-child {
  padding: 6px 4px 8px !important;
  border: 0 !important;
  background: transparent !important;
}

.office-real-app .office-settings-note {
  display: none !important;
}

.office-real-app .codex-composer {
  margin: 0 22px 18px !important;
  padding: 12px !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.085) !important;
}

.office-real-app .codex-composer-row {
  grid-template-columns: 42px minmax(0, 1fr) 46px !important;
  align-items: end !important;
  gap: 10px !important;
}

.office-real-app .codex-composer textarea {
  min-height: 44px !important;
  max-height: 138px !important;
  padding: 10px 2px 8px !important;
  line-height: 1.45 !important;
  font-size: 1rem !important;
}

.office-real-app .office-file-button,
.office-real-app .office-send-button {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border-radius: 14px !important;
  font-size: 1.5rem !important;
  line-height: 1 !important;
}

.office-real-app .office-send-button {
  border: 0 !important;
  background: rgba(248, 250, 252, 0.94) !important;
  color: #08090b !important;
  font-size: 1.45rem !important;
  font-weight: 760 !important;
}

.office-real-app .office-send-button:disabled {
  opacity: 0.52 !important;
}

.office-real-app .office-slash-menu {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(100% + 14px) !important;
  max-height: min(430px, 48vh) !important;
  display: grid !important;
  gap: 4px !important;
  padding: 10px !important;
  overflow: auto !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 24px !important;
  background: rgba(24, 25, 28, 0.64) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 30px 90px rgba(0, 0, 0, 0.36) !important;
  backdrop-filter: blur(54px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(54px) saturate(180%) !important;
}

.office-real-app .office-slash-menu button {
  min-height: 48px !important;
  display: grid !important;
  grid-template-columns: 120px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 14px !important;
  border-radius: 16px !important;
  text-align: left !important;
}

.office-real-app .office-slash-menu span {
  color: rgba(248, 250, 252, 0.92) !important;
  font-size: 0.94rem !important;
  font-weight: 650 !important;
}

.office-real-app .office-slash-menu em {
  overflow: hidden !important;
  color: rgba(226, 232, 240, 0.48) !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 0.84rem !important;
  font-style: normal !important;
  font-weight: 520 !important;
}

.office-real-app .office-slash-menu kbd {
  padding: 4px 8px !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, 0.2) !important;
  color: rgba(226, 232, 240, 0.56) !important;
  font: inherit !important;
  font-size: 0.76rem !important;
}

.office-real-app .office-agent-controls {
  display: none !important;
}

.office-real-app .codex-android-host-panel {
  background: rgba(255, 255, 255, 0.06) !important;
}

.office-real-app .codex-android-viewport {
  background: rgba(0, 0, 0, 0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Office final pass: true Mac glass shell and a locked, compact composer. */
html:has(.office-real-app),
body:has(.office-real-app),
.office-page.office-app-page:has(.office-real-app) {
  background: transparent !important;
}

.office-real-app {
  background: rgba(0, 0, 0, 0.001) !important;
}

.office-real-app .codex-sidebar,
.office-real-app .codex-right-panel,
.office-real-app .codex-chat-column {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.024)),
    rgba(8, 9, 12, 0.26) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 28px 90px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: blur(58px) saturate(185%) brightness(1.03) !important;
  -webkit-backdrop-filter: blur(58px) saturate(185%) brightness(1.03) !important;
}

.office-real-app .codex-chat-column {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)),
    rgba(6, 7, 10, 0.15) !important;
}

.office-real-app .codex-composer {
  position: relative !important;
  display: grid !important;
  gap: 7px !important;
  min-height: 0 !important;
  margin: 0 22px 18px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035)),
    rgba(11, 12, 16, 0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 18px 60px rgba(0, 0, 0, 0.24) !important;
  backdrop-filter: blur(52px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(52px) saturate(190%) !important;
}

form.codex-composer .codex-composer-row {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 44px !important;
  gap: 10px !important;
  align-items: center !important;
  min-height: 54px !important;
  width: 100% !important;
}

form.codex-composer .codex-composer-row > .office-file-button,
form.codex-composer .codex-composer-row > .office-send-button {
  grid-column: auto !important;
  align-self: center !important;
  justify-self: center !important;
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 15px !important;
  line-height: 1 !important;
  text-align: center !important;
}

form.codex-composer .codex-composer-row > .office-file-button {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: rgba(248, 250, 252, 0.84) !important;
  font-size: 1.1rem !important;
}

form.codex-composer .codex-composer-row > textarea {
  grid-column: auto !important;
  align-self: center !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 142px !important;
  margin: 0 !important;
  padding: 14px 4px !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.94) !important;
  font-size: 1.03rem !important;
  font-weight: 560 !important;
  line-height: 1.45 !important;
  text-align: left !important;
  resize: none !important;
}

form.codex-composer .codex-composer-row > textarea::placeholder {
  color: rgba(248, 250, 252, 0.38) !important;
  text-align: left !important;
}

form.codex-composer .codex-composer-row > .office-send-button {
  border: 0 !important;
  background: rgba(248, 250, 252, 0.94) !important;
  color: #07080a !important;
  font-size: 1.32rem !important;
  font-weight: 780 !important;
}

form.codex-composer .codex-composer-row > .office-send-button:disabled {
  opacity: 0.48 !important;
}

form.codex-composer .codex-composer-meta {
  display: flex !important;
  min-height: 24px !important;
  gap: 8px !important;
  padding: 0 2px !important;
  overflow: hidden !important;
}

form.codex-composer .codex-composer-meta:empty {
  display: none !important;
}

.office-real-app .codex-composer.is-dragging-file {
  border-color: rgba(255, 255, 255, 0.34) !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.22), transparent 45%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.055)),
    rgba(11, 12, 16, 0.58) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 24px 86px rgba(255, 255, 255, 0.12),
    0 26px 90px rgba(0, 0, 0, 0.32) !important;
}

.office-real-app .office-drop-aura {
  position: absolute !important;
  inset: 8px !important;
  z-index: 8 !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 7px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  color: rgba(255, 255, 255, 0.94) !important;
  text-align: center !important;
  pointer-events: none !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.065)),
    rgba(10, 11, 14, 0.48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 18px 52px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(42px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(42px) saturate(190%) !important;
  animation: officeDropAuraIn 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
}

.office-real-app .office-drop-aura::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  opacity: 0.55;
  transform: translateX(-100%);
  animation: officeDropAuraSweep 1.4s ease-in-out infinite;
}

.office-real-app .office-drop-aura strong,
.office-real-app .office-drop-aura em {
  position: relative !important;
  z-index: 1 !important;
}

.office-real-app .office-drop-aura strong {
  font-size: 1.04rem !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
}

.office-real-app .office-drop-aura em {
  color: rgba(226, 232, 240, 0.62) !important;
  font-size: 0.82rem !important;
  font-style: normal !important;
  font-weight: 560 !important;
}

@keyframes officeDropAuraIn {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes officeDropAuraSweep {
  to {
    transform: translateX(100%);
  }
}

.office-real-app .office-attachment-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  max-width: min(460px, 100%) !important;
  min-height: 28px !important;
  padding: 4px 5px 4px 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.075) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.office-real-app .office-attachment-chip b {
  overflow: hidden !important;
  color: rgba(248, 250, 252, 0.78) !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 0.78rem !important;
  font-weight: 650 !important;
}

.office-real-app .office-attachment-chip button {
  display: grid !important;
  place-items: center !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.13) !important;
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 1rem !important;
  font-weight: 650 !important;
  line-height: 1 !important;
}

.office-real-app .office-attachment-chip button:hover {
  background: rgba(255, 255, 255, 0.24) !important;
  color: #fff !important;
}

/* Reviews Office rail authority: large identity photos and Codex-style collapse. */
.codex-office-shell.office-real-app {
  --office-left-rail-width: 318px;
  --office-left-rail-collapsed-width: 86px;
  --office-right-rail-width: minmax(390px, 430px);
  grid-template-columns: var(--office-left-rail-width) minmax(0, 1fr) var(--office-right-rail-width) !important;
  transition: grid-template-columns 240ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.codex-office-shell.office-real-app.is-left-rail-collapsed {
  grid-template-columns: var(--office-left-rail-collapsed-width) minmax(0, 1fr) var(--office-right-rail-width) !important;
}

.office-real-app .codex-sidebar {
  position: relative !important;
  padding-top: 42px !important;
  overflow: hidden !important;
}

.office-real-app .office-sidebar-toggle {
  all: unset !important;
  -webkit-app-region: no-drag !important;
  position: static !important;
  flex: 0 0 auto !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  outline: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 10px 24px rgba(0, 0, 0, 0.18) !important;
  cursor: pointer !important;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease !important;
}

.office-real-app .office-sidebar-toggle span {
  display: block !important;
  width: 9px !important;
  height: 9px !important;
  border-top: 2px solid rgba(255, 255, 255, 0.82) !important;
  border-left: 2px solid rgba(255, 255, 255, 0.82) !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-radius: 1px !important;
  transform: translateX(2px) rotate(-45deg) !important;
}

.office-real-app.is-left-rail-collapsed .office-sidebar-toggle span {
  transform: translateX(-2px) rotate(135deg) !important;
}

.office-real-app .office-sidebar-toggle:hover {
  border-color: rgba(255, 255, 255, 0.24) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  transform: translateY(-1px) !important;
}

.office-real-app .codex-room-row {
  min-height: 66px !important;
  padding: 8px 15px !important;
  border-radius: 24px !important;
}

.office-real-app .codex-room-row span {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  gap: 0 !important;
}

.office-real-app .codex-room-row span b,
.office-real-app .codex-room-row span b.codex-room-avatar-image {
  width: 54px !important;
  min-width: 54px !important;
  height: 54px !important;
  margin-right: 15px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 10px 26px rgba(0, 0, 0, 0.24) !important;
  font-size: 0.96rem !important;
}

.office-real-app .codex-room-row span b.codex-room-avatar-image img {
  transform: scale(1.1) !important;
}

.office-real-app .codex-avatar {
  width: 62px !important;
  min-width: 62px !important;
  height: 62px !important;
  border-radius: 999px !important;
  font-size: 1.04rem !important;
}

.office-real-app .codex-avatar.has-image {
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 14px 34px rgba(0, 0, 0, 0.28) !important;
}

.office-real-app .codex-avatar.has-image img {
  transform: scale(1.12) !important;
}

.office-real-app .codex-message,
.office-real-app .codex-empty-state {
  grid-template-columns: 62px minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: start !important;
}

.office-real-app .codex-message > div:last-child {
  min-width: 0 !important;
}

.office-real-app.is-left-rail-collapsed .codex-sidebar {
  align-items: center !important;
  padding: 42px 10px 14px !important;
}

.office-real-app.is-left-rail-collapsed .codex-brand {
  width: 62px !important;
  min-height: 38px !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  justify-content: center !important;
}

.office-real-app.is-left-rail-collapsed .office-reviews-logo {
  display: none !important;
}

.office-real-app.is-left-rail-collapsed .codex-sidebar-section {
  width: 100% !important;
  align-items: center !important;
}

.office-real-app.is-left-rail-collapsed .codex-room-row {
  justify-content: center !important;
  width: 60px !important;
  min-width: 60px !important;
  height: 60px !important;
  min-height: 60px !important;
  padding: 0 !important;
  border-radius: 23px !important;
}

.office-real-app.is-left-rail-collapsed .codex-room-row span {
  justify-content: center !important;
  width: 100% !important;
  font-size: 0 !important;
}

.office-real-app.is-left-rail-collapsed .codex-room-row span b,
.office-real-app.is-left-rail-collapsed .codex-room-row span b.codex-room-avatar-image {
  width: 54px !important;
  min-width: 54px !important;
  height: 54px !important;
  margin: 0 !important;
}

.office-real-app.is-left-rail-collapsed .codex-room-row em {
  display: none !important;
}

.office-real-app.is-left-rail-collapsed .codex-new-influencer-row span::before,
.office-real-app.is-left-rail-collapsed .codex-settings-dock > .codex-room-row span::before {
  display: grid !important;
  place-items: center !important;
  width: 54px !important;
  height: 54px !important;
  border-radius: 999px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  font-size: 1.45rem !important;
  font-weight: 820 !important;
  content: "+" !important;
}

.office-real-app.is-left-rail-collapsed .codex-settings-dock > .codex-room-row span::before {
  font-size: 1.1rem !important;
  content: "⚙" !important;
}

.office-real-app.is-left-rail-collapsed .codex-settings-panel {
  display: none !important;
}

@media (max-width: 1080px) {
  .codex-office-shell.office-real-app {
    --office-left-rail-width: 286px;
    --office-right-rail-width: minmax(360px, 390px);
    grid-template-columns: var(--office-left-rail-width) minmax(0, 1fr) var(--office-right-rail-width) !important;
  }

  .codex-office-shell.office-real-app.is-left-rail-collapsed {
    grid-template-columns: var(--office-left-rail-collapsed-width) minmax(0, 1fr) var(--office-right-rail-width) !important;
  }
}

/* Final Android mirror lock: the phone column never gets sacrificed. */
.codex-office-shell.office-real-app {
  --office-left-rail-width: 304px !important;
  --office-left-rail-collapsed-width: 86px !important;
  --office-phone-rail-width: 430px !important;
  grid-template-columns: var(--office-left-rail-width) minmax(360px, 1fr) var(--office-phone-rail-width) !important;
  min-width: calc(var(--office-left-rail-width) + 360px + var(--office-phone-rail-width)) !important;
  overflow-x: auto !important;
}

.codex-office-shell.office-real-app.is-left-rail-collapsed {
  grid-template-columns: var(--office-left-rail-collapsed-width) minmax(360px, 1fr) var(--office-phone-rail-width) !important;
  min-width: calc(var(--office-left-rail-collapsed-width) + 360px + var(--office-phone-rail-width)) !important;
}

.office-real-app .codex-right-panel.codex-right-panel-minimal {
  width: var(--office-phone-rail-width) !important;
  min-width: var(--office-phone-rail-width) !important;
  max-width: var(--office-phone-rail-width) !important;
}

.office-real-app .codex-android-host-panel {
  width: 100% !important;
  min-width: 0 !important;
}

.office-real-app .codex-android-viewport img {
  object-fit: contain !important;
  object-position: center !important;
}

@media (max-width: 1180px) {
  .codex-office-shell.office-real-app {
    --office-left-rail-width: 286px !important;
    --office-phone-rail-width: 430px !important;
    grid-template-columns: var(--office-left-rail-width) minmax(360px, 1fr) var(--office-phone-rail-width) !important;
    min-width: calc(var(--office-left-rail-width) + 360px + var(--office-phone-rail-width)) !important;
  }

  .codex-office-shell.office-real-app.is-left-rail-collapsed {
    grid-template-columns: var(--office-left-rail-collapsed-width) minmax(360px, 1fr) var(--office-phone-rail-width) !important;
    min-width: calc(var(--office-left-rail-collapsed-width) + 360px + var(--office-phone-rail-width)) !important;
  }
}

/* Keep profile images as clean circles in the collapsed rail. */
.office-real-app .codex-room-row span b.codex-room-avatar-image {
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.office-real-app.is-left-rail-collapsed .codex-room-row:has(.codex-room-avatar-image) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.office-real-app.is-left-rail-collapsed .codex-room-row:has(.codex-room-avatar-image):hover,
.office-real-app.is-left-rail-collapsed .codex-room-row.is-active:has(.codex-room-avatar-image) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Ownership chooses the posting phone automatically. The only control row is
   the Android viewer selector; keep the phone viewport flexible. */
.office-real-app .codex-android-host-panel {
  grid-template-rows: auto auto minmax(0, 1fr) !important;
}

.office-real-app .office-station-control,
.office-real-app .office-station-toggle,
.office-real-app .office-station-toggle button {
  align-self: start;
}

.office-real-app .office-station-toggle button {
  height: 31px !important;
}

.office-real-app .office-station-toggle button.is-selected,
.office-real-app .office-station-toggle button.is-selected span {
  color: #182044 !important;
}

.office-real-app .office-station-toggle button.is-selected {
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 5px 14px rgba(3, 7, 29, 0.2) !important;
}

.office-real-app .office-influencer-groups {
  min-height: 0 !important;
  align-content: start !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.office-real-app .office-influencer-owner-group {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.office-real-app .office-influencer-owner-group + .office-influencer-owner-group {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.office-real-app .office-influencer-owner-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px 2px;
  color: rgba(255, 255, 255, 0.54);
  font-size: 10px;
  font-weight: 820;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.office-real-app .office-influencer-owner-heading em {
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.68);
  font-style: normal;
  letter-spacing: 0;
}

.office-real-app.is-left-rail-collapsed .office-influencer-owner-heading {
  display: none;
}

.office-real-app.is-left-rail-collapsed .office-influencer-owner-group + .office-influencer-owner-group {
  margin-top: 8px;
  padding-top: 8px;
}

.office-real-app .office-influencer-owner-note {
  margin: 0 !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(117, 153, 255, 0.22);
  border-radius: 14px;
  background: rgba(71, 105, 210, 0.1);
  color: rgba(238, 242, 255, 0.82) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.office-real-app .office-room-row-shell {
  position: relative;
  min-width: 0;
}

.office-real-app .office-room-row-shell > .codex-room-row {
  width: 100%;
  padding-right: 42px !important;
}

.office-real-app .office-room-delete {
  position: absolute;
  top: 50%;
  right: 10px;
  z-index: 2;
  display: grid;
  width: 26px;
  height: 26px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(252, 165, 165, 0.18);
  border-radius: 999px;
  background: rgba(127, 29, 29, 0.14);
  color: rgba(254, 202, 202, 0.72);
  font-size: 18px;
  line-height: 1;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 140ms ease, background 140ms ease, color 140ms ease;
}

.office-real-app .office-room-row-shell:hover .office-room-delete,
.office-real-app .office-room-delete:focus-visible {
  opacity: 1;
}

.office-real-app .office-room-delete:hover {
  background: rgba(185, 28, 28, 0.34);
  color: #fff;
}

.office-real-app.is-left-rail-collapsed .office-room-delete {
  display: none;
}

.office-real-app .codex-message header time {
  color: rgba(226, 232, 240, 0.42);
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Reviews Office Creator: fixed liquid-glass cockpit, no landing-page scroll */
html:has(.office-engine-shell),
body:has(.office-engine-shell) {
  width: 100%;
  height: 100%;
  overflow: hidden !important;
  background: #050912 !important;
}

body:has(.office-engine-shell) .app-install-banner,
body:has(.office-engine-shell) .site-header,
body:has(.office-engine-shell) .site-footer,
body:has(.office-engine-shell) footer {
  display: none !important;
}

.office-engine-shell,
.office-engine-shell * {
  box-sizing: border-box;
}

.office-engine-shell {
  --office-glass-border: rgba(255, 255, 255, 0.16);
  --office-glass-bg: rgba(255, 255, 255, 0.085);
  --office-glass-bg-strong: rgba(255, 255, 255, 0.13);
  --office-ink: rgba(248, 250, 252, 0.94);
  --office-muted: rgba(226, 232, 240, 0.56);
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: 58px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(124, 58, 237, 0.55), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(6, 182, 212, 0.52), transparent 31%),
    radial-gradient(circle at 64% 92%, rgba(236, 72, 153, 0.22), transparent 32%),
    linear-gradient(135deg, #050912 0%, #0b1430 50%, #062329 100%);
  color: var(--office-ink);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
}

.office-engine-shell::before {
  content: '';
  position: absolute;
  inset: -18%;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 20%, rgba(255, 255, 255, 0.16) 27%, transparent 34% 58%, rgba(255, 255, 255, 0.08) 66%, transparent 76%),
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.14), transparent 34%);
  filter: blur(2px);
  opacity: 0.7;
}

.office-engine-topbar,
.office-engine-panel {
  position: relative;
  z-index: 1;
  border: 1px solid var(--office-glass-border);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.055)),
    var(--office-glass-bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.055),
    0 22px 70px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(30px) saturate(1.45);
  -webkit-backdrop-filter: blur(30px) saturate(1.45);
}

.office-engine-topbar {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 0;
  border-radius: 22px;
  padding: 8px 10px;
}

.office-engine-brand,
.office-engine-tabs,
.office-engine-account {
  display: flex;
  align-items: center;
  min-width: 0;
}

.office-engine-brand {
  gap: 10px;
  padding-left: 6px;
}

.office-engine-brand img {
  width: 96px;
  height: auto;
  filter: brightness(0) invert(1) drop-shadow(0 8px 24px rgba(0, 0, 0, 0.25));
}

.office-engine-brand span,
.office-engine-tabs span,
.office-engine-account span,
.office-panel-heading span,
.office-panel-heading em {
  overflow: hidden;
  color: var(--office-muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.office-engine-tabs {
  justify-content: center;
  gap: 6px;
}

.office-engine-tabs span {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  padding: 8px 12px;
}

.office-engine-tabs span.is-active {
  background: rgba(255, 255, 255, 0.92);
  color: #07101a;
}

.office-engine-account {
  justify-content: end;
  gap: 8px;
}

.office-engine-account select,
.office-engine-account a,
.office-panel-heading button,
.office-engine-actions button {
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--office-ink);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  outline: 0;
  padding: 0 12px;
  text-decoration: none;
}

.office-engine-account select {
  max-width: 128px;
}

.office-engine-account a,
.office-panel-heading button,
.office-engine-actions button:first-child {
  background: rgba(255, 255, 255, 0.92);
  color: #07101a;
}

.office-engine-account span {
  max-width: 170px;
  letter-spacing: 0;
  text-transform: none;
}

.office-engine-main {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr) 318px;
  gap: 12px;
  min-height: 0;
  overflow: hidden !important;
}

.office-engine-panel {
  min-height: 0;
  overflow: hidden !important;
  border-radius: 26px;
  padding: 12px;
}

.office-engine-left,
.office-engine-center,
.office-engine-right {
  display: grid;
  align-content: start;
  gap: 10px;
}

.office-engine-center {
  grid-template-rows: auto 76px auto auto minmax(0, 1fr) 92px;
}

.office-engine-right {
  grid-template-rows: auto minmax(260px, 1fr) auto auto;
}

.office-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
}

.office-panel-heading button:disabled,
.office-engine-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.office-engine-input input,
.office-engine-prompt {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.105);
  color: var(--office-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  outline: 0;
}

.office-engine-input input {
  height: 40px;
  padding: 0 13px;
}

.office-engine-input input::placeholder,
.office-engine-prompt::placeholder {
  color: rgba(226, 232, 240, 0.38);
}

.office-engine-prompt {
  height: 76px;
  resize: none;
  padding: 11px 13px;
  line-height: 1.3;
}

.office-engine-ideas,
.office-engine-products,
.office-engine-checks {
  display: grid;
  gap: 8px;
  min-height: 0;
}

.office-engine-ideas {
  grid-template-rows: repeat(4, minmax(0, 1fr));
}

.office-engine-ideas button,
.office-engine-products button,
.office-engine-checks div {
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.075);
  color: var(--office-ink);
  min-width: 0;
}

.office-engine-ideas button {
  display: grid;
  gap: 4px;
  min-height: 70px;
  padding: 10px 11px;
  cursor: pointer;
  text-align: left;
}

.office-engine-ideas button.is-selected,
.office-engine-products button.is-selected {
  border-color: rgba(134, 239, 172, 0.46);
  background: rgba(34, 197, 94, 0.16);
}

.office-engine-ideas strong {
  overflow: hidden;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.office-engine-ideas span {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(226, 232, 240, 0.62);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.office-engine-products {
  grid-template-rows: repeat(5, 50px);
}

.office-engine-products button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 9px;
  height: 50px;
  padding: 6px 8px;
  cursor: pointer;
  text-align: left;
}

.office-engine-products img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.office-engine-products strong,
.office-engine-products small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.office-engine-products strong {
  color: #fff;
  font-size: 12px;
  font-weight: 850;
}

.office-engine-products small {
  color: rgba(226, 232, 240, 0.52);
  font-size: 11px;
  font-weight: 700;
}

.office-engine-products em {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(134, 239, 172, 0.14);
  color: #86efac;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

.office-engine-actions {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 8px;
}

.office-engine-toast {
  min-height: 34px;
  overflow: hidden;
  border: 1px solid rgba(134, 239, 172, 0.18);
  border-radius: 16px;
  background: rgba(34, 197, 94, 0.12);
  color: rgba(220, 252, 231, 0.9);
  font-size: 12px;
  font-weight: 750;
  padding: 9px 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.office-engine-toast.is-error {
  border-color: rgba(252, 165, 165, 0.2);
  background: rgba(127, 29, 29, 0.2);
  color: rgba(254, 226, 226, 0.92);
}

.office-engine-preview {
  display: grid;
  min-height: 0;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  background:
    radial-gradient(circle at 28% 14%, rgba(255, 255, 255, 0.12), transparent 24%),
    rgba(255, 255, 255, 0.075);
}

.office-engine-preview img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.38);
}

.office-engine-preview div {
  display: grid;
  gap: 8px;
  justify-items: center;
  color: rgba(226, 232, 240, 0.56);
  font-size: 13px;
  font-weight: 750;
}

.office-engine-preview div strong {
  color: #fff;
  font-size: 18px;
}

.office-engine-filmstrip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 58px;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
}

.office-engine-filmstrip button {
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  padding: 0;
  cursor: pointer;
}

.office-engine-filmstrip button.is-selected {
  border-color: #86efac;
}

.office-engine-filmstrip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.office-engine-filmstrip span {
  position: absolute;
  left: 5px;
  bottom: 5px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: #07101a;
  font-size: 10px;
  font-weight: 950;
}

.office-engine-phone {
  position: relative;
  justify-self: center;
  width: min(100%, 246px);
  height: 100%;
  min-height: 260px;
  max-height: 470px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 36px;
  background: linear-gradient(145deg, #030712, #111827);
  padding: 10px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45), inset 0 0 0 2px rgba(255, 255, 255, 0.055);
}

.office-engine-phone-notch {
  position: absolute;
  top: 20px;
  left: 50%;
  z-index: 2;
  width: 72px;
  height: 22px;
  border-radius: 999px;
  background: #020617;
  transform: translateX(-50%);
}

.office-engine-phone-screen {
  display: grid;
  width: 100%;
  height: 100%;
  overflow: hidden;
  place-items: center;
  border-radius: 28px;
  background: linear-gradient(145deg, #f8fafc, #dbeafe);
  color: #07101a;
}

.office-engine-phone-screen > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.office-engine-phone-screen > strong {
  color: rgba(15, 23, 42, 0.42);
  font-size: 16px;
  font-weight: 950;
}

.office-engine-phone-products {
  display: grid;
  grid-template-columns: repeat(2, 58px);
  gap: 12px;
}

.office-engine-phone-products img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.75);
  padding: 7px;
}

.office-engine-checks {
  grid-template-rows: repeat(6, 38px);
}

.office-engine-checks div {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 7px 9px;
}

.office-engine-checks div span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.18);
  color: #fde68a;
  font-size: 12px;
  font-weight: 950;
}

.office-engine-checks div.is-ok span {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
}

.office-engine-checks strong {
  overflow: hidden;
  color: rgba(248, 250, 252, 0.82);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .office-engine-main {
    grid-template-columns: 300px minmax(0, 1fr) 280px;
  }

  .office-engine-topbar {
    grid-template-columns: 170px minmax(0, 1fr) auto;
  }

  .office-engine-tabs span {
    padding-inline: 9px;
  }
}

/* Electron compositor override: keep Creator glass dark, readable, and app-like. */
.office-engine-shell {
  background-color: #050912 !important;
  background-image:
    radial-gradient(circle at 10% 5%, rgba(112, 76, 255, 0.72), transparent 26%),
    radial-gradient(circle at 90% 10%, rgba(0, 201, 255, 0.62), transparent 30%),
    radial-gradient(circle at 54% 94%, rgba(255, 84, 174, 0.26), transparent 34%),
    linear-gradient(135deg, #050912 0%, #0a1230 48%, #041e24 100%) !important;
  isolation: isolate !important;
}

.office-engine-shell::after {
  content: '';
  position: absolute;
  inset: 14px;
  z-index: 0;
  pointer-events: none;
  border-radius: 30px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.16), transparent 28%, rgba(255, 255, 255, 0.08) 52%, transparent 76%),
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.1), transparent 32%);
  opacity: 0.72;
  mix-blend-mode: screen;
}

.office-engine-topbar,
.office-engine-panel {
  background-color: rgba(8, 13, 30, 0.78) !important;
  background-image:
    linear-gradient(140deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06) 44%, rgba(255, 255, 255, 0.035)) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.office-engine-ideas button,
.office-engine-products button,
.office-engine-checks div,
.office-engine-input input,
.office-engine-prompt,
.office-engine-preview,
.office-engine-filmstrip button {
  background-color: rgba(10, 18, 38, 0.62) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: rgba(248, 250, 252, 0.94) !important;
}

.office-engine-ideas button.is-selected,
.office-engine-products button.is-selected {
  background-color: rgba(30, 115, 78, 0.52) !important;
  border-color: rgba(134, 239, 172, 0.72) !important;
}

.office-engine-topbar,
.office-engine-panel,
.office-engine-brand,
.office-engine-tabs,
.office-engine-account,
.office-engine-main {
  color: rgba(248, 250, 252, 0.94) !important;
}

/* Creator Studio belongs inside the old Office shell, not on a separate page. */
.codex-office-shell.office-real-app {
  position: relative !important;
}

.office-real-app .office-creator-studio-drawer {
  position: absolute !important;
  z-index: 45 !important;
  top: 18px !important;
  bottom: 18px !important;
  left: calc(var(--office-left-rail-width, 304px) + 16px) !important;
  right: calc(var(--office-phone-rail-width, 430px) + 16px) !important;
  min-width: 360px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(108, 92, 231, 0.32), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.055) 48%, rgba(15, 23, 42, 0.68)),
    rgba(9, 13, 23, 0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 30px 90px rgba(0, 0, 0, 0.52) !important;
  backdrop-filter: blur(44px) saturate(185%) brightness(1.08) !important;
  -webkit-backdrop-filter: blur(44px) saturate(185%) brightness(1.08) !important;
}

.office-real-app.is-left-rail-collapsed .office-creator-studio-drawer {
  left: calc(var(--office-left-rail-collapsed-width, 86px) + 16px) !important;
}

.office-real-app .office-creator-studio-drawer form {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.office-real-app .office-creator-drawer-header,
.office-real-app .office-creator-drawer-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 16px 18px !important;
}

.office-real-app .office-creator-drawer-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.office-real-app .office-creator-drawer-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.office-real-app .office-creator-drawer-header div,
.office-real-app .office-creator-drawer-footer span {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.office-real-app .office-creator-drawer-header .office-creator-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

.office-real-app .office-creator-drawer-header span,
.office-real-app .office-creator-field span,
.office-real-app .office-creator-drawer-footer span {
  color: rgba(226, 232, 240, 0.64) !important;
  font-size: 0.72rem !important;
  font-weight: 760 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.office-real-app .office-creator-drawer-header strong {
  color: #fff !important;
  font-size: 1.1rem !important;
  font-weight: 820 !important;
  letter-spacing: -0.03em !important;
}

.office-real-app .office-creator-drawer-body {
  display: grid !important;
  align-content: start !important;
  gap: 8px !important;
  min-height: 0 !important;
  padding: 12px 14px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.office-real-app .office-creator-field {
  display: grid !important;
  gap: 7px !important;
  min-width: 0 !important;
}

.office-real-app .office-creator-field textarea,
.office-real-app .office-creator-field input {
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: 22px !important;
  outline: 0 !important;
  background: rgba(255, 255, 255, 0.09) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  font: 700 0.9rem/1.34 ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif !important;
}

.office-real-app .office-creator-field textarea {
  min-height: 64px !important;
  resize: none !important;
  padding: 11px 13px !important;
}

.office-real-app .office-creator-field input {
  height: 44px !important;
  padding: 0 14px !important;
}

.office-real-app .office-creator-field textarea:focus,
.office-real-app .office-creator-field input:focus {
  border-color: rgba(147, 197, 253, 0.38) !important;
  background: rgba(255, 255, 255, 0.13) !important;
}

.office-real-app .office-creator-chip-row,
.office-real-app .office-creator-selected {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.office-real-app .office-creator-chip-row button,
.office-real-app .office-creator-selected button,
.office-real-app .office-creator-drawer-header button,
.office-real-app .office-creator-drawer-footer button {
  appearance: none !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.09) !important;
  color: rgba(255, 255, 255, 0.86) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  cursor: pointer !important;
  font: 760 0.78rem/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif !important;
}

.office-real-app .office-creator-chip-row button,
.office-real-app .office-creator-selected button {
  min-height: 28px !important;
  padding: 6px 10px !important;
}

.office-real-app .office-creator-chip-row button.is-active,
.office-real-app .office-creator-selected button {
  border-color: rgba(147, 197, 253, 0.32) !important;
  background: rgba(96, 165, 250, 0.18) !important;
  color: #fff !important;
}

.office-real-app .office-creator-selected span {
  margin-left: 5px !important;
  opacity: 0.72 !important;
}

.office-real-app .office-creator-product-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  min-height: 64px !important;
  max-height: 126px !important;
  overflow: hidden !important;
}

.office-real-app .office-creator-product-grid > button {
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 60px !important;
  padding: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.075) !important;
  color: #fff !important;
  text-align: left !important;
  cursor: pointer !important;
}

.office-real-app .office-creator-product-grid > button.is-selected {
  border-color: rgba(134, 239, 172, 0.38) !important;
  background: rgba(34, 197, 94, 0.14) !important;
}

.office-real-app .office-creator-product-grid img,
.office-real-app .office-creator-product-grid i {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  object-fit: contain !important;
}

.office-real-app .office-creator-product-grid span {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.office-real-app .office-creator-product-grid strong {
  overflow: hidden !important;
  color: #fff !important;
  font-size: 0.78rem !important;
  font-weight: 820 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.08 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.office-real-app .office-creator-product-grid em,
.office-real-app .office-creator-muted {
  color: rgba(226, 232, 240, 0.58) !important;
  font-size: 0.7rem !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

.office-real-app .office-creator-muted {
  grid-column: 1 / -1 !important;
  align-self: center !important;
  justify-self: center !important;
}

.office-real-app .office-creator-drawer-header button {
  min-height: 34px !important;
  padding: 8px 12px !important;
}

.office-real-app .office-creator-drawer-footer button {
  min-height: 42px !important;
  padding: 0 17px !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: #0f172a !important;
}

.office-real-app .office-creator-drawer-footer button:disabled {
  opacity: 0.52 !important;
  cursor: not-allowed !important;
}

.codex-office-shell.office-real-app .office-creator-studio-drawer,
.codex-office-shell.office-real-app .office-creator-studio-drawer form,
.codex-office-shell.office-real-app .office-creator-drawer-body {
  background-color: rgba(8, 13, 24, 0.76) !important;
  color: #f8fafc !important;
}

.codex-office-shell.office-real-app .office-creator-drawer-body {
  background-image:
    radial-gradient(circle at 78% 4%, rgba(59, 130, 246, 0.22), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(15, 23, 42, 0.26)) !important;
}

.codex-office-shell.office-real-app .office-creator-field textarea,
.codex-office-shell.office-real-app .office-creator-field input,
.codex-office-shell.office-real-app .office-creator-field select {
  background-color: rgba(15, 23, 42, 0.72) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
}

.codex-office-shell.office-real-app .office-creator-field textarea::placeholder,
.codex-office-shell.office-real-app .office-creator-field input::placeholder {
  color: rgba(226, 232, 240, 0.46) !important;
}

.codex-office-shell.office-real-app .office-creator-field select {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  height: 44px !important;
  padding: 0 13px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 22px !important;
  outline: 0 !important;
  font: 760 0.82rem/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif !important;
}

.office-real-app .office-creator-visual-controls {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.codex-office-shell.office-real-app .office-creator-drawer-body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
}

.office-real-app .office-creator-drawer-body.has-preview {
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-content: stretch !important;
  gap: 10px !important;
}

.office-real-app .office-creator-preview-controls {
  display: grid !important;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.25fr) !important;
  gap: 8px !important;
}

.office-real-app .office-creator-preview-controls .office-creator-field {
  gap: 5px !important;
}

.office-real-app .office-creator-preview-controls select,
.office-real-app .office-creator-preview-controls input {
  height: 38px !important;
  min-width: 0 !important;
  font-size: 0.72rem !important;
}

.office-real-app .office-creator-status {
  border: 1px solid rgba(147, 197, 253, 0.18) !important;
  border-radius: 18px !important;
  padding: 10px 12px !important;
  background: rgba(59, 130, 246, 0.1) !important;
  color: rgba(219, 234, 254, 0.9) !important;
  font-size: 0.78rem !important;
  font-weight: 760 !important;
  line-height: 1.28 !important;
}

.office-real-app .office-creator-status.is-error {
  border-color: rgba(248, 113, 113, 0.28) !important;
  background: rgba(127, 29, 29, 0.22) !important;
  color: rgba(254, 226, 226, 0.94) !important;
}

.office-real-app .office-creator-preview-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 8px !important;
  min-height: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 24px !important;
  padding: 12px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
    rgba(15, 23, 42, 0.48) !important;
}

.office-real-app .office-creator-preview-panel > header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.office-real-app .office-creator-preview-panel > header span {
  color: rgba(226, 232, 240, 0.62) !important;
  font-size: 0.7rem !important;
  font-weight: 820 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.office-real-app .office-creator-preview-panel > header strong {
  color: #fff !important;
  font-size: 0.82rem !important;
  font-weight: 820 !important;
}

.office-real-app .office-creator-preview-panel p {
  margin: 0 !important;
  color: rgba(226, 232, 240, 0.62) !important;
  font-size: 0.78rem !important;
  font-weight: 720 !important;
}

.office-real-app .office-creator-preview-panel .office-creator-progress {
  align-self: center !important;
  justify-self: center !important;
  max-width: 420px !important;
  color: rgba(226, 232, 240, 0.78) !important;
  font-size: 0.84rem !important;
  line-height: 1.45 !important;
  text-align: center !important;
}

.office-real-app .office-creator-preview-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 5px !important;
  max-height: none !important;
  overflow: hidden !important;
}

.office-real-app .office-creator-preview-grid figure,
.office-real-app .office-creator-preview-grid button {
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

.office-real-app .office-creator-preview-grid button {
  padding: 0 !important;
  color: inherit !important;
  cursor: pointer !important;
  text-align: left !important;
}

.office-real-app .office-creator-preview-grid button.is-selected {
  border-color: rgba(147, 197, 253, 0.62) !important;
  box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.18) !important;
}

.office-real-app .office-creator-preview-grid img,
.office-real-app .office-creator-preview-grid video {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  background: rgba(2, 6, 23, 0.66) !important;
}

.office-real-app .office-creator-preview-workspace {
  display: grid !important;
  grid-template-columns: minmax(190px, 0.82fr) minmax(250px, 1.18fr) !important;
  gap: 10px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.office-real-app .office-creator-preview-media {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  min-height: 0 !important;
}

.office-real-app .office-creator-preview-hero {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 18px !important;
  background: rgba(2, 6, 23, 0.54) !important;
  object-fit: contain !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 38px rgba(0, 0, 0, 0.24) !important;
}

.office-real-app .office-creator-preview-grid button {
  position: relative !important;
}

.office-real-app .office-creator-preview-grid button span {
  position: absolute !important;
  right: 4px !important;
  bottom: 4px !important;
  display: grid !important;
  place-items: center !important;
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: rgba(2, 6, 23, 0.78) !important;
  color: #fff !important;
  font-size: 0.6rem !important;
}

.office-real-app .office-creator-preview-grid figcaption {
  overflow: hidden !important;
  padding: 7px 8px !important;
  color: rgba(226, 232, 240, 0.72) !important;
  font-size: 0.68rem !important;
  font-weight: 760 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.office-real-app .office-creator-slide-editor {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  align-content: stretch !important;
  gap: 10px !important;
  min-height: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 22px !important;
  padding: 12px !important;
  background: rgba(2, 6, 23, 0.26) !important;
}

.office-real-app .office-creator-slide-editor .office-creator-field:nth-of-type(2),
.office-real-app .office-creator-slide-editor .office-creator-field:nth-of-type(2) textarea {
  min-height: 0 !important;
  height: 100% !important;
}

.office-real-app .office-creator-slide-editor > header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.office-real-app .office-creator-slide-editor > header span {
  color: rgba(226, 232, 240, 0.62) !important;
  font-size: 0.7rem !important;
  font-weight: 820 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.office-real-app .office-creator-slide-editor > header strong {
  color: #fff !important;
  font-size: 0.82rem !important;
  font-weight: 820 !important;
}

.office-real-app .office-creator-footer-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 9px !important;
}

.office-real-app .office-creator-footer-actions button + button {
  background: rgba(96, 165, 250, 0.24) !important;
  color: #fff !important;
}

.office-real-app .office-creator-brief-chat,
.office-real-app .office-creator-source-panel,
.office-real-app .office-creator-plan,
.office-real-app .office-creator-fine-tune {
  display: grid !important;
  gap: 9px !important;
  padding: 11px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  background: rgba(7, 12, 22, 0.34) !important;
}

.office-real-app .office-creator-brief-chat > header,
.office-real-app .office-creator-source-panel > header,
.office-real-app .office-creator-plan > header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.office-real-app .office-creator-brief-chat > header span,
.office-real-app .office-creator-source-panel > header strong,
.office-real-app .office-creator-plan > header span {
  color: #fff !important;
  font-size: 0.84rem !important;
  font-weight: 820 !important;
}

.office-real-app .office-creator-brief-chat > header small,
.office-real-app .office-creator-source-panel > header span,
.office-real-app .office-creator-handoff-copy small {
  color: rgba(226, 232, 240, 0.62) !important;
  font-size: 0.7rem !important;
  font-weight: 680 !important;
  line-height: 1.35 !important;
}

.office-real-app .office-creator-chat-log {
  display: grid !important;
  gap: 6px !important;
  max-height: 126px !important;
  overflow-y: auto !important;
}

.office-real-app .office-creator-chat-log p {
  width: fit-content !important;
  max-width: 82% !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  color: rgba(248, 250, 252, 0.94) !important;
  font-size: 0.76rem !important;
  font-weight: 670 !important;
  line-height: 1.35 !important;
}

.office-real-app .office-creator-chat-log .is-assistant {
  background: rgba(255, 255, 255, 0.08) !important;
}

.office-real-app .office-creator-chat-log .is-user {
  justify-self: end !important;
  background: rgba(37, 99, 235, 0.28) !important;
}

.office-real-app .office-creator-chat-composer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 8px !important;
}

.office-real-app .office-creator-chat-composer textarea {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 50px !important;
  padding: 9px 11px !important;
  resize: none !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 8px !important;
  outline: none !important;
  background: rgba(15, 23, 42, 0.8) !important;
  color: #fff !important;
  font: 680 0.78rem/1.35 ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif !important;
}

.office-real-app .office-creator-chat-composer button,
.office-real-app .office-creator-source-tabs button,
.office-real-app .office-creator-plan button {
  min-height: 34px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  cursor: pointer !important;
  font: 760 0.72rem/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif !important;
}

.office-real-app .office-creator-chat-composer button:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

.office-real-app .office-creator-source-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

.office-real-app .office-creator-source-tabs button.is-active {
  border-color: rgba(134, 239, 172, 0.42) !important;
  background: rgba(22, 163, 74, 0.2) !important;
}

.office-real-app .office-creator-library-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 6px !important;
  min-height: 72px !important;
}

.office-real-app .office-creator-library-grid button {
  display: grid !important;
  grid-template-rows: 62px auto !important;
  gap: 5px !important;
  min-width: 0 !important;
  padding: 5px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
  cursor: pointer !important;
}

.office-real-app .office-creator-library-grid button.is-selected {
  border-color: rgba(134, 239, 172, 0.44) !important;
  background: rgba(22, 163, 74, 0.16) !important;
}

.office-real-app .office-creator-library-grid img,
.office-real-app .office-creator-library-grid video {
  width: 100% !important;
  height: 62px !important;
  border-radius: 5px !important;
  object-fit: cover !important;
}

.office-real-app .office-creator-library-grid button span {
  overflow: hidden !important;
  font-size: 0.66rem !important;
  font-weight: 720 !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.office-real-app .office-creator-fine-tune summary {
  color: rgba(248, 250, 252, 0.9) !important;
  cursor: pointer !important;
  font-size: 0.76rem !important;
  font-weight: 780 !important;
}

.office-real-app .office-creator-fine-tune[open] summary {
  margin-bottom: 3px !important;
}

.office-real-app .office-creator-plan.is-confirmed {
  border-color: rgba(134, 239, 172, 0.38) !important;
  background: rgba(20, 83, 45, 0.2) !important;
}

.office-real-app .office-creator-plan > header > div {
  display: grid !important;
  gap: 2px !important;
}

.office-real-app .office-creator-plan > header strong {
  color: rgba(226, 232, 240, 0.62) !important;
  font-size: 0.68rem !important;
  font-weight: 720 !important;
}

.office-real-app .office-creator-plan dl {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px 14px !important;
  margin: 0 !important;
}

.office-real-app .office-creator-plan dl div {
  min-width: 0 !important;
}

.office-real-app .office-creator-plan dt {
  color: rgba(226, 232, 240, 0.52) !important;
  font-size: 0.64rem !important;
  font-weight: 760 !important;
  text-transform: uppercase !important;
}

.office-real-app .office-creator-plan dd {
  margin: 2px 0 0 !important;
  overflow-wrap: anywhere !important;
  color: rgba(248, 250, 252, 0.92) !important;
  font-size: 0.72rem !important;
  font-weight: 680 !important;
  line-height: 1.3 !important;
}

.office-real-app .office-creator-handoff-copy {
  display: grid !important;
  gap: 3px !important;
  max-width: 52% !important;
}

@media (max-width: 1180px) {
  .office-real-app .office-creator-brief-chat > header {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 3px !important;
  }

  .office-real-app .office-creator-chat-log p {
    max-width: 94% !important;
  }

  .office-real-app .office-creator-library-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .office-real-app .office-creator-plan dl {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .office-real-app .office-creator-drawer-footer {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .office-real-app .office-creator-handoff-copy {
    max-width: none !important;
  }

  .office-real-app .office-creator-drawer-footer .office-creator-footer-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .office-real-app .office-creator-drawer-footer .office-creator-footer-actions button {
    width: 100% !important;
    padding: 0 8px !important;
    font-size: 0.7rem !important;
  }
}

/* Keep post creation unmistakable from every influencer chat. */
.office-real-app .codex-topbar.office-drag-strip {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  min-height: 64px !important;
  height: 64px !important;
  padding: 11px 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)) !important;
}

.office-real-app .office-chat-identity {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

.office-real-app .office-chat-identity > strong {
  overflow: hidden !important;
  font-size: 0.88rem !important;
  font-weight: 820 !important;
  letter-spacing: -0.01em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.office-real-app .office-chat-identity > b,
.office-real-app .office-chat-identity .codex-room-avatar-image {
  display: grid !important;
  flex: 0 0 auto !important;
  place-items: center !important;
  box-sizing: border-box !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

.office-real-app .office-chat-identity .codex-room-avatar-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.office-real-app .codex-topbar .office-chat-create-post,
.office-real-app .codex-topbar .office-chat-create-post * {
  -webkit-app-region: no-drag !important;
}

.office-real-app .office-chat-create-post {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  min-height: 42px !important;
  padding: 7px 11px 7px 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 15px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(229, 226, 255, 0.94)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 9px 28px rgba(91, 72, 214, 0.26) !important;
  color: #17172a !important;
  cursor: pointer !important;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease !important;
}

.office-real-app .office-chat-create-post > span {
  display: grid !important;
  place-items: center !important;
  width: 27px !important;
  height: 27px !important;
  border-radius: 9px !important;
  background: linear-gradient(145deg, #5c45e7, #2f6fe8) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
  color: #fff !important;
  font-size: 0.88rem !important;
}

.office-real-app .office-chat-create-post > strong {
  color: #17172a !important;
  font-size: 0.78rem !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

.office-real-app .office-chat-create-post > em {
  color: rgba(23, 23, 42, 0.48) !important;
  font-size: 0.68rem !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

.office-real-app .office-chat-create-post:hover {
  filter: brightness(1.04) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 13px 34px rgba(91, 72, 214, 0.34) !important;
}

.office-real-app .codex-primary-actions > .codex-room-row:first-child {
  border-color: rgba(150, 135, 255, 0.5) !important;
  background:
    linear-gradient(135deg, rgba(111, 80, 232, 0.3), rgba(59, 130, 246, 0.18)),
    rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 30px rgba(52, 47, 130, 0.18) !important;
}

.office-real-app .codex-primary-actions > .codex-room-row:first-child span,
.office-real-app .codex-primary-actions > .codex-room-row:first-child em {
  color: rgba(255, 255, 255, 0.96) !important;
}

@media (max-width: 1120px) {
  .office-real-app .office-chat-create-post > em {
    display: none !important;
  }
}

/* Content Library is intentionally isolated from Creator Studio. */
.office-real-app .office-content-library-drawer {
  position: absolute !important;
  z-index: 48 !important;
  inset: 14px 14px 14px calc(var(--office-left-rail-width, 304px) + 14px) !important;
  display: grid !important;
  grid-template-rows: 68px minmax(0, 1fr) !important;
  min-width: 680px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 32px !important;
  background:
    radial-gradient(circle at 14% -10%, rgba(126, 96, 255, 0.32), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(52, 211, 153, 0.17), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.145), rgba(255, 255, 255, 0.045) 44%, rgba(4, 9, 19, 0.8)),
    rgba(7, 12, 22, 0.88) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 34px 100px rgba(0, 0, 0, 0.6) !important;
  color: #f8fafc !important;
  backdrop-filter: blur(52px) saturate(190%) brightness(1.06) !important;
  -webkit-backdrop-filter: blur(52px) saturate(190%) brightness(1.06) !important;
}

.office-real-app.is-left-rail-collapsed .office-content-library-drawer {
  left: calc(var(--office-left-rail-collapsed-width, 86px) + 14px) !important;
}

.office-library-header {
  display: grid !important;
  grid-template-columns: minmax(210px, 1fr) auto auto !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 0 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015)) !important;
}

.office-library-title {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  min-width: 0 !important;
}

.office-library-mark {
  display: grid !important;
  flex: 0 0 auto !important;
  place-items: center !important;
  width: 39px !important;
  height: 39px !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(145deg, rgba(139, 92, 246, 0.92), rgba(37, 99, 235, 0.9)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 10px 24px rgba(83, 67, 191, 0.34) !important;
  color: #fff !important;
  font-size: 0.78rem !important;
}

.office-library-title > span:last-child {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.office-library-title em {
  color: rgba(216, 208, 255, 0.82) !important;
  font-size: 0.66rem !important;
  font-style: normal !important;
  font-weight: 850 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.office-library-title strong {
  overflow: hidden !important;
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 850 !important;
  letter-spacing: -0.035em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.office-library-header-stats {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.office-library-header-stats > span {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: rgba(226, 232, 240, 0.55) !important;
  font-size: 0.61rem !important;
  font-weight: 760 !important;
  line-height: 30px !important;
  white-space: nowrap !important;
}

.office-library-header-stats strong {
  color: #fff !important;
  font-size: 0.7rem !important;
  font-weight: 850 !important;
}

.office-library-close,
.office-library-browser-toolbar button,
.office-library-load-more,
.office-library-builder-actions button,
.office-library-bulk-edit > button {
  appearance: none !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, 0.09) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  cursor: pointer !important;
  font: 790 0.7rem/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif !important;
}

.office-library-close {
  min-height: 36px !important;
  padding: 0 13px !important;
}

.office-library-workspace {
  display: grid !important;
  grid-template-columns: 230px minmax(320px, 1fr) 326px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.office-library-controls,
.office-library-builder {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 12px !important;
  background: rgba(2, 6, 15, 0.22) !important;
}

.office-library-controls {
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.office-library-builder {
  display: grid !important;
  grid-template-rows: auto minmax(76px, 1fr) auto auto auto !important;
  align-content: stretch !important;
  gap: 8px !important;
  border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
  overflow: hidden !important;
}

.office-library-dropzone {
  display: grid !important;
  place-items: center !important;
  gap: 5px !important;
  min-height: 142px !important;
  padding: 12px !important;
  border: 1px dashed rgba(167, 139, 250, 0.42) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(124, 92, 246, 0.2), transparent 58%),
    rgba(255, 255, 255, 0.045) !important;
  text-align: center !important;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease !important;
}

.office-library-dropzone.is-dragging {
  border-color: rgba(196, 181, 253, 0.92) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.4), transparent 62%),
    rgba(124, 92, 246, 0.14) !important;
  transform: scale(1.015) !important;
}

.office-library-dropzone.is-importing {
  border-style: solid !important;
}

.office-library-drop-icon {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  font-size: 1.2rem !important;
  font-weight: 350 !important;
}

.office-library-dropzone strong {
  color: #fff !important;
  font-size: 0.76rem !important;
  font-weight: 840 !important;
}

.office-library-dropzone p {
  margin: 0 !important;
  color: rgba(226, 232, 240, 0.52) !important;
  font-size: 0.62rem !important;
  font-weight: 680 !important;
}

.office-library-import-buttons {
  display: flex !important;
  gap: 6px !important;
  margin-top: 3px !important;
}

.office-library-import-buttons label,
.office-library-dropzone > button {
  position: relative !important;
  overflow: hidden !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.09) !important;
  color: rgba(255, 255, 255, 0.86) !important;
  cursor: pointer !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  line-height: 28px !important;
}

.office-library-import-buttons input {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
}

.office-library-progress {
  width: 100% !important;
  height: 5px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.09) !important;
}

.office-library-progress i {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #8b5cf6, #60a5fa, #34d399) !important;
  transition: width 180ms ease !important;
}

.office-library-field,
.office-library-draft-fields label,
.office-library-bulk-edit label {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
}

.office-library-field > span,
.office-library-draft-fields label > span,
.office-library-bulk-edit label > span {
  color: rgba(226, 232, 240, 0.5) !important;
  font-size: 0.58rem !important;
  font-weight: 820 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.office-library-field input,
.office-library-field select,
.office-library-search input,
.office-library-draft-fields input,
.office-library-draft-fields textarea,
.office-library-draft-fields select,
.office-library-bulk-edit input,
.office-library-bulk-edit select {
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 12px !important;
  outline: 0 !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
    rgba(2, 6, 23, 0.56) !important;
  color: #fff !important;
  font: 730 0.68rem/1.2 ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif !important;
}

.office-library-field input,
.office-library-field select,
.office-library-search input,
.office-library-draft-fields input,
.office-library-draft-fields select,
.office-library-bulk-edit input,
.office-library-bulk-edit select {
  height: 34px !important;
  padding: 0 10px !important;
}

.office-library-field select,
.office-library-draft-fields select,
.office-library-bulk-edit select {
  appearance: auto !important;
}

.office-library-draft-fields textarea {
  min-height: 62px !important;
  padding: 9px 10px !important;
  resize: none !important;
}

.office-library-filter-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 3px !important;
}

.office-library-filter-heading strong {
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 0.68rem !important;
  font-weight: 840 !important;
}

.office-library-filter-heading button {
  border: 0 !important;
  background: transparent !important;
  color: rgba(196, 181, 253, 0.8) !important;
  cursor: pointer !important;
  font-size: 0.6rem !important;
  font-weight: 800 !important;
}

.office-library-search {
  position: relative !important;
  display: block !important;
}

.office-library-search span {
  position: absolute !important;
  z-index: 1 !important;
  top: 50% !important;
  left: 10px !important;
  color: rgba(226, 232, 240, 0.42) !important;
  transform: translateY(-50%) !important;
}

.office-library-search input {
  padding-left: 28px !important;
}

.office-library-segment {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 3px !important;
  padding: 3px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  background: rgba(2, 6, 23, 0.42) !important;
}

.office-library-segment button {
  min-height: 28px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: rgba(226, 232, 240, 0.46) !important;
  cursor: pointer !important;
  font-size: 0.6rem !important;
  font-weight: 780 !important;
}

.office-library-segment button.is-active {
  background: rgba(255, 255, 255, 0.11) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

.office-library-saved-drafts {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  min-height: 0 !important;
  margin-top: auto !important;
  overflow: hidden !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 10px !important;
}

.office-library-saved-drafts > header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 5px !important;
}

.office-library-saved-drafts > header strong,
.office-library-saved-drafts > header span {
  color: rgba(255, 255, 255, 0.68) !important;
  font-size: 0.62rem !important;
  font-weight: 830 !important;
}

.office-library-saved-drafts > div {
  min-height: 0 !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}

.office-library-saved-drafts article {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 24px !important;
  gap: 3px !important;
  margin-bottom: 4px !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  background: rgba(255, 255, 255, 0.035) !important;
}

.office-library-saved-drafts article.is-active {
  border-color: rgba(167, 139, 250, 0.3) !important;
  background: rgba(124, 92, 246, 0.12) !important;
}

.office-library-saved-drafts article button {
  min-width: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  cursor: pointer !important;
}

.office-library-saved-drafts article button:first-child {
  display: grid !important;
  gap: 2px !important;
  padding: 7px 8px !important;
  text-align: left !important;
}

.office-library-saved-drafts article strong {
  overflow: hidden !important;
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.office-library-saved-drafts article span,
.office-library-saved-drafts p {
  margin: 0 !important;
  color: rgba(226, 232, 240, 0.42) !important;
  font-size: 0.55rem !important;
  font-weight: 680 !important;
}

.codex-office-shell.office-real-app .office-content-library-drawer .office-library-browser {
  display: grid !important;
  grid-template-rows: 48px auto minmax(0, 1fr) auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 10px 10px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% -8%, rgba(99, 102, 241, 0.1), transparent 38%),
    linear-gradient(180deg, rgba(8, 15, 30, 0.64), rgba(3, 8, 18, 0.76)) !important;
  color: #f8fafc !important;
}

.office-library-browser-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 0 3px !important;
}

.office-library-browser-toolbar > div:first-child {
  display: grid !important;
  gap: 2px !important;
}

.office-library-browser-toolbar strong {
  color: rgba(255, 255, 255, 0.91) !important;
  font-size: 0.7rem !important;
  font-weight: 840 !important;
}

.office-library-browser-toolbar span {
  color: rgba(226, 232, 240, 0.42) !important;
  font-size: 0.58rem !important;
  font-weight: 720 !important;
}

.office-library-browser-toolbar > div:last-child {
  display: flex !important;
  gap: 5px !important;
}

.office-library-browser-toolbar button {
  min-height: 29px !important;
  padding: 0 9px !important;
}

.office-library-browser-toolbar button:first-child {
  border-color: rgba(167, 139, 250, 0.3) !important;
  background: rgba(124, 92, 246, 0.15) !important;
}

.office-library-browser-toolbar button:disabled,
.office-library-builder-actions button:disabled,
.office-library-bulk-edit > button:disabled {
  opacity: 0.42 !important;
  cursor: not-allowed !important;
}

.office-library-notice {
  margin: 0 0 7px !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(96, 165, 250, 0.2) !important;
  border-radius: 12px !important;
  background: rgba(59, 130, 246, 0.1) !important;
  color: rgba(219, 234, 254, 0.84) !important;
  font-size: 0.62rem !important;
  font-weight: 730 !important;
}

.office-library-notice.is-error {
  border-color: rgba(248, 113, 113, 0.25) !important;
  background: rgba(127, 29, 29, 0.18) !important;
  color: rgba(254, 226, 226, 0.9) !important;
}

.office-library-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  align-content: start !important;
  gap: 7px !important;
  min-height: 0 !important;
  padding: 1px 2px 8px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent !important;
  scrollbar-width: thin !important;
}

.office-library-card {
  min-width: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 15px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
    rgba(2, 6, 23, 0.38) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.office-library-card.is-selected {
  border-color: rgba(167, 139, 250, 0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 2px rgba(124, 92, 246, 0.16),
    0 10px 24px rgba(61, 47, 135, 0.22) !important;
}

.office-library-card-media {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  background: rgba(2, 6, 23, 0.7) !important;
  cursor: pointer !important;
}

.office-library-card-media img,
.office-library-card-media video {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  transition: transform 180ms ease, filter 180ms ease !important;
}

.office-library-card:hover .office-library-card-media img,
.office-library-card:hover .office-library-card-media video {
  filter: brightness(1.05) !important;
  transform: scale(1.018) !important;
}

.office-library-selection-index {
  position: absolute !important;
  top: 7px !important;
  right: 7px !important;
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  border-radius: 999px !important;
  background: rgba(4, 9, 19, 0.72) !important;
  color: #fff !important;
  font-size: 0.62rem !important;
  font-weight: 850 !important;
  backdrop-filter: blur(12px) !important;
}

.office-library-card.is-selected .office-library-selection-index {
  border-color: rgba(255, 255, 255, 0.52) !important;
  background: linear-gradient(145deg, #8b5cf6, #4f46e5) !important;
}

.office-library-video-badge {
  position: absolute !important;
  bottom: 7px !important;
  left: 7px !important;
  padding: 4px 6px !important;
  border-radius: 7px !important;
  background: rgba(4, 9, 19, 0.7) !important;
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 0.48rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.08em !important;
}

.office-library-card-footer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 22px !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: 42px !important;
  padding: 5px 6px 5px 8px !important;
}

.office-library-card-footer > div {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.office-library-card-footer strong,
.office-library-card-footer span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.office-library-card-footer strong {
  color: rgba(255, 255, 255, 0.87) !important;
  font-size: 0.58rem !important;
  font-weight: 790 !important;
}

.office-library-card-footer span {
  color: rgba(226, 232, 240, 0.4) !important;
  font-size: 0.5rem !important;
  font-weight: 660 !important;
}

.office-library-card-footer > button {
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: rgba(226, 232, 240, 0.46) !important;
  cursor: pointer !important;
  font-size: 0.55rem !important;
}

.office-library-empty {
  grid-column: 1 / -1 !important;
  display: grid !important;
  align-self: center !important;
  justify-self: center !important;
  place-items: center !important;
  gap: 7px !important;
  max-width: 330px !important;
  min-height: 260px !important;
  text-align: center !important;
}

.office-library-empty > span {
  color: rgba(167, 139, 250, 0.72) !important;
  font-size: 1.2rem !important;
}

.office-library-empty strong {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 0.78rem !important;
  font-weight: 830 !important;
}

.office-library-empty p {
  margin: 0 !important;
  color: rgba(226, 232, 240, 0.46) !important;
  font-size: 0.64rem !important;
  font-weight: 680 !important;
  line-height: 1.45 !important;
}

.office-library-load-more {
  justify-self: center !important;
  min-height: 30px !important;
  margin-top: 7px !important;
  padding: 0 12px !important;
}

.office-library-builder > header {
  display: grid !important;
  gap: 2px !important;
}

.office-library-builder > header span {
  color: rgba(196, 181, 253, 0.72) !important;
  font-size: 0.58rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

.office-library-builder > header strong {
  color: #fff !important;
  font-size: 0.78rem !important;
  font-weight: 840 !important;
}

.office-library-sequence {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  gap: 5px !important;
  min-height: 76px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: none !important;
}

.office-library-sequence article {
  display: grid !important;
  grid-template-columns: 22px 38px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 46px !important;
  padding: 4px 5px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  cursor: grab !important;
}

.office-library-sequence article > span {
  display: grid !important;
  place-items: center !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 7px !important;
  background: rgba(124, 92, 246, 0.18) !important;
  color: rgba(221, 214, 254, 0.94) !important;
  font-size: 0.56rem !important;
  font-weight: 850 !important;
}

.office-library-sequence img,
.office-library-sequence video {
  width: 38px !important;
  height: 38px !important;
  border-radius: 9px !important;
  background: rgba(2, 6, 23, 0.62) !important;
  object-fit: cover !important;
}

.office-library-sequence article > div {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.office-library-sequence article strong,
.office-library-sequence article small {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.office-library-sequence article strong {
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 0.58rem !important;
  font-weight: 790 !important;
}

.office-library-sequence article small {
  color: rgba(226, 232, 240, 0.38) !important;
  font-size: 0.5rem !important;
  font-weight: 680 !important;
}

.office-library-sequence nav {
  display: flex !important;
  gap: 2px !important;
}

.office-library-sequence nav button {
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: rgba(255, 255, 255, 0.64) !important;
  cursor: pointer !important;
  font-size: 0.55rem !important;
}

.office-library-sequence nav button:disabled {
  opacity: 0.25 !important;
}

.office-library-builder-empty {
  display: grid !important;
  place-items: center !important;
  gap: 8px !important;
  min-height: 130px !important;
  padding: 12px !important;
  border: 1px dashed rgba(255, 255, 255, 0.12) !important;
  border-radius: 17px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  text-align: center !important;
}

.office-library-builder-empty span {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  background: rgba(124, 92, 246, 0.14) !important;
  color: rgba(196, 181, 253, 0.9) !important;
  font-size: 0.65rem !important;
  font-weight: 850 !important;
}

.office-library-builder-empty p {
  max-width: 210px !important;
  margin: 0 !important;
  color: rgba(226, 232, 240, 0.43) !important;
  font-size: 0.62rem !important;
  font-weight: 690 !important;
  line-height: 1.42 !important;
}

.office-library-bulk-edit {
  display: grid !important;
  grid-template-columns: 0.85fr 1fr auto !important;
  align-items: end !important;
  gap: 5px !important;
  padding: 8px !important;
  border: 1px solid rgba(167, 139, 250, 0.15) !important;
  border-radius: 14px !important;
  background: rgba(124, 92, 246, 0.07) !important;
}

.office-library-bulk-edit > button {
  height: 34px !important;
  padding: 0 9px !important;
}

.office-library-draft-fields {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
  padding-top: 9px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  flex: 0 0 auto !important;
}

.office-library-draft-fields label:nth-child(3),
.office-library-draft-fields label:nth-child(4) {
  grid-column: 1 / -1 !important;
}

.office-library-builder-actions {
  display: grid !important;
  grid-template-columns: 0.78fr 1.22fr !important;
  gap: 7px !important;
  padding-top: 1px !important;
  flex: 0 0 auto !important;
}

.office-library-builder-actions button {
  min-height: 38px !important;
  padding: 0 10px !important;
}

.office-library-builder-actions button:last-child {
  border-color: rgba(255, 255, 255, 0.36) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(232, 228, 255, 0.92)) !important;
  color: #17172a !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 10px 26px rgba(83, 67, 191, 0.24) !important;
}

.office-real-app .office-library-nav {
  border-color: rgba(110, 231, 183, 0.2) !important;
  background:
    linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(59, 130, 246, 0.1)),
    rgba(255, 255, 255, 0.045) !important;
}

.office-real-app .office-library-nav.is-active {
  border-color: rgba(110, 231, 183, 0.46) !important;
  background:
    linear-gradient(135deg, rgba(16, 185, 129, 0.24), rgba(59, 130, 246, 0.16)),
    rgba(255, 255, 255, 0.07) !important;
}

@media (max-width: 1280px) {
  .office-library-workspace {
    grid-template-columns: 210px minmax(290px, 1fr) 292px !important;
  }

  .office-library-header-stats > span:nth-child(3),
  .office-library-header-stats > span:nth-child(4) {
    display: none !important;
  }

  .office-library-grid {
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)) !important;
  }
}

:root {
  --rv-ink: #101311;
  --rv-muted: #737875;
  --rv-line: #e3e6e3;
  --rv-soft: #f5f6f4;
  --rv-green: #229a5c;
  --rv-green-soft: #eaf6ef;
  --rv-blue: #5976c7;
  --rv-orange: #cf7d2b;
  --rv-serif: Georgia, 'Times New Roman', serif;
  --rv-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --rv-width: 1200px;
}

/* High-intent editorial guides */
.reviews-site-v2 .acquisition-guide { padding-bottom: 48px; }
.reviews-site-v2 .acquisition-hero { padding-top: 92px; padding-bottom: 46px; max-width: 980px; }
.reviews-site-v2 .acquisition-hero h1 { max-width: 920px; margin: 12px 0 20px; font-family: var(--font-editorial, Georgia, serif); font-size: 66px; line-height: .98; font-weight: 500; letter-spacing: 0; }
.reviews-site-v2 .acquisition-hero > p:not(.eyebrow) { max-width: 780px; margin: 0; color: #747872; font-size: 21px; line-height: 1.55; }
.reviews-site-v2 .acquisition-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.reviews-site-v2 .acquisition-hero-actions a { display: inline-flex; align-items: center; min-height: 50px; padding: 0 20px; border: 1px solid #d9ddd8; border-radius: 8px; color: #111; font-weight: 800; text-decoration: none; }
.reviews-site-v2 .acquisition-hero-actions a:first-child { border-color: #111; background: #111; color: #fff; }
.reviews-site-v2 .acquisition-screens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; align-items: start; max-width: 980px; padding-top: 12px; padding-bottom: 76px; }
.reviews-site-v2 .acquisition-screens figure { width: 100%; margin: 0; }
.reviews-site-v2 .acquisition-screens figure:nth-child(2) { margin-top: 52px; }
.reviews-site-v2 .acquisition-screens img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 28px rgba(22, 30, 25, .12)); }
.reviews-site-v2 .acquisition-verdict { max-width: none; padding-top: 66px; padding-bottom: 70px; border-top: 1px solid #e2e5e1; border-bottom: 1px solid #e2e5e1; background: #f5f8f4; }
.reviews-site-v2 .acquisition-verdict > * { max-width: 980px; margin-left: auto; margin-right: auto; }
.reviews-site-v2 .acquisition-verdict h2 { margin-top: 14px; font-family: var(--font-editorial, Georgia, serif); font-size: 46px; line-height: 1.08; font-weight: 500; letter-spacing: 0; }
.reviews-site-v2 .acquisition-comparison { padding-top: 76px; padding-bottom: 76px; }
.reviews-site-v2 .acquisition-comparison-table { border-top: 2px solid #121512; }
.reviews-site-v2 .acquisition-comparison-table > div { display: grid; grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: start; padding: 26px 0; border-bottom: 1px solid #dfe3de; }
.reviews-site-v2 .acquisition-comparison-table strong { font-size: 15px; text-transform: uppercase; }
.reviews-site-v2 .acquisition-comparison-table span { color: #101410; font-size: 17px; font-weight: 750; line-height: 1.5; }
.reviews-site-v2 .acquisition-comparison-table p { margin: 0; color: #787d77; font-size: 16px; line-height: 1.55; }
.reviews-site-v2 .acquisition-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding-top: 16px; padding-bottom: 78px; }
.reviews-site-v2 .acquisition-body section { padding: 32px 34px 34px 0; border-top: 1px solid #dfe3de; }
.reviews-site-v2 .acquisition-body section + section { padding-left: 34px; border-left: 1px solid #dfe3de; }
.reviews-site-v2 .acquisition-body h2 { margin: 0 0 18px; font-family: var(--font-editorial, Georgia, serif); font-size: 32px; line-height: 1.08; font-weight: 500; letter-spacing: 0; }
.reviews-site-v2 .acquisition-body p,
.reviews-site-v2 .acquisition-body li { color: #737872; font-size: 16px; line-height: 1.65; }
.reviews-site-v2 .acquisition-body ul { margin: 20px 0 0; padding-left: 20px; }
.reviews-site-v2 .acquisition-faq { padding-top: 70px; padding-bottom: 76px; border-top: 1px solid #dfe3de; }
.reviews-site-v2 .acquisition-faq > h2 { margin: 12px 0 34px; font-family: var(--font-editorial, Georgia, serif); font-size: 44px; font-weight: 500; letter-spacing: 0; }
.reviews-site-v2 .acquisition-faq > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.reviews-site-v2 .acquisition-faq article { padding: 24px 0; border-top: 1px solid #dfe3de; }
.reviews-site-v2 .acquisition-faq h3 { margin: 0 0 10px; font-size: 19px; }
.reviews-site-v2 .acquisition-faq p { margin: 0; color: #747972; line-height: 1.6; }
.reviews-site-v2 .acquisition-sources { display: grid; grid-template-columns: minmax(240px, .75fr) minmax(0, 1.25fr); gap: 60px; padding-top: 60px; padding-bottom: 60px; border-top: 1px solid #dfe3de; }
.reviews-site-v2 .acquisition-sources h2 { margin: 10px 0 0; font-family: var(--font-editorial, Georgia, serif); font-size: 36px; font-weight: 500; letter-spacing: 0; }
.reviews-site-v2 .acquisition-sources > div:last-child { display: grid; align-content: start; }
.reviews-site-v2 .acquisition-sources a { padding: 13px 0; border-bottom: 1px solid #e3e6e2; color: #1f6f4a; font-weight: 750; text-decoration: none; }
.reviews-site-v2 .acquisition-related { padding-top: 34px; padding-bottom: 58px; }
.reviews-site-v2 .acquisition-related > div { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
.reviews-site-v2 .acquisition-related a { display: inline-flex; padding: 12px 15px; border: 1px solid #dce1dc; border-radius: 8px; color: #151815; font-weight: 750; text-decoration: none; }

@media (max-width: 760px) {
  .reviews-site-v2 .acquisition-hero { padding-top: 54px; padding-bottom: 34px; }
  .reviews-site-v2 .acquisition-hero h1 { font-size: 44px; line-height: 1; }
  .reviews-site-v2 .acquisition-hero > p:not(.eyebrow) { font-size: 18px; }
  .reviews-site-v2 .acquisition-hero-actions { display: grid; }
  .reviews-site-v2 .acquisition-hero-actions a { justify-content: center; }
  .reviews-site-v2 .acquisition-screens { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; overflow: hidden; padding-bottom: 54px; }
  .reviews-site-v2 .acquisition-screens figure:nth-child(2) { margin-top: 24px; }
  .reviews-site-v2 .acquisition-screens img { min-width: 0; }
  .reviews-site-v2 .acquisition-verdict { padding: 48px 22px; }
  .reviews-site-v2 .acquisition-verdict h2 { font-size: 34px; }
  .reviews-site-v2 .acquisition-comparison { padding-top: 54px; padding-bottom: 54px; }
  .reviews-site-v2 .acquisition-comparison-table > div { grid-template-columns: 1fr; gap: 9px; padding: 22px 0; }
  .reviews-site-v2 .acquisition-body { grid-template-columns: 1fr; padding-bottom: 54px; }
  .reviews-site-v2 .acquisition-body section,
  .reviews-site-v2 .acquisition-body section + section { padding: 28px 0; border-left: 0; }
  .reviews-site-v2 .acquisition-body h2 { font-size: 30px; }
  .reviews-site-v2 .acquisition-faq { padding-top: 48px; padding-bottom: 54px; }
  .reviews-site-v2 .acquisition-faq > h2 { font-size: 34px; }
  .reviews-site-v2 .acquisition-faq > div { grid-template-columns: 1fr; }
  .reviews-site-v2 .acquisition-sources { grid-template-columns: 1fr; gap: 24px; padding-top: 48px; padding-bottom: 48px; }
}

/* Original-data research */
.reviews-site-v2 .research-hero { padding-top: 92px; padding-bottom: 52px; }
.reviews-site-v2 .research-hero h1 { max-width: 900px; margin: 12px 0 20px; font-family: var(--rv-serif); font-size: 66px; line-height: .98; font-weight: 500; letter-spacing: 0; }
.reviews-site-v2 .research-hero > p:not(.eyebrow) { max-width: 760px; margin: 0; color: var(--rv-muted); font-size: 21px; line-height: 1.55; }
.reviews-site-v2 .research-hero > span { display: block; margin-top: 25px; color: #8a8f89; font-size: 13px; font-weight: 800; text-transform: uppercase; }
.reviews-site-v2 .research-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rv-line); border-bottom: 1px solid var(--rv-line); }
.reviews-site-v2 .research-stats > div { min-width: 0; padding: 30px 28px 32px 0; }
.reviews-site-v2 .research-stats > div + div { padding-left: 28px; border-left: 1px solid var(--rv-line); }
.reviews-site-v2 .research-stats strong { display: block; font-family: var(--rv-serif); font-size: 42px; font-weight: 500; letter-spacing: 0; }
.reviews-site-v2 .research-stats span { display: block; max-width: 180px; margin-top: 8px; color: var(--rv-muted); font-size: 13px; font-weight: 750; line-height: 1.35; }
.reviews-site-v2 .research-product-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; padding-top: 62px; padding-bottom: 62px; }
.reviews-site-v2 .research-product-strip a { min-width: 0; color: var(--rv-ink); text-decoration: none; }
.reviews-site-v2 .research-product-strip img { display: block; width: 100%; height: 124px; object-fit: contain; }
.reviews-site-v2 .research-product-strip span { display: block; min-width: 0; margin-top: 12px; }
.reviews-site-v2 .research-product-strip strong,
.reviews-site-v2 .research-product-strip small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reviews-site-v2 .research-product-strip small { margin-top: 4px; color: var(--rv-muted); }
.reviews-site-v2 .research-product-strip em { display: block; margin-top: 8px; color: var(--rv-green); font-style: normal; font-weight: 800; }
.reviews-site-v2 .research-table-section { padding-top: 62px; padding-bottom: 78px; }
.reviews-site-v2 .research-table { overflow: hidden; border-top: 2px solid var(--rv-ink); }
.reviews-site-v2 .research-table > [role="row"] { display: grid; grid-template-columns: minmax(190px, 1.5fr) repeat(4, minmax(100px, .75fr)); align-items: center; min-height: 58px; border-bottom: 1px solid var(--rv-line); color: var(--rv-ink); text-decoration: none; }
.reviews-site-v2 .research-table > [role="row"] > * { min-width: 0; padding: 14px 14px 14px 0; overflow-wrap: anywhere; }
.reviews-site-v2 .research-table-head { min-height: 44px !important; color: var(--rv-muted) !important; font-size: 11px; text-transform: uppercase; }
.reviews-site-v2 .research-table > a:hover { background: var(--rv-green-soft); }
.reviews-site-v2 .research-table > a span:first-child { font-weight: 800; }
.reviews-site-v2 .research-empty { margin: 0; padding: 28px 0; color: var(--rv-muted); line-height: 1.6; }
.reviews-site-v2 .research-findings { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr); gap: 70px; padding-top: 70px; padding-bottom: 76px; border-top: 1px solid var(--rv-line); }
.reviews-site-v2 .research-findings h2,
.reviews-site-v2 .research-method h2 { margin: 12px 0 0; font-family: var(--rv-serif); font-size: 40px; line-height: 1.08; font-weight: 500; letter-spacing: 0; }
.reviews-site-v2 .research-findings article { padding: 23px 0; border-top: 1px solid var(--rv-line); }
.reviews-site-v2 .research-findings h3 { margin: 0 0 9px; font-size: 19px; }
.reviews-site-v2 .research-findings article p { margin: 0; color: var(--rv-muted); line-height: 1.62; }
.reviews-site-v2 .research-method { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr); gap: 70px; padding-top: 64px; padding-bottom: 70px; border-top: 1px solid var(--rv-line); }
.reviews-site-v2 .research-method ol { margin: 0; padding: 0; list-style: none; counter-reset: method; }
.reviews-site-v2 .research-method li { position: relative; padding: 22px 0 22px 48px; border-top: 1px solid var(--rv-line); color: var(--rv-muted); line-height: 1.6; counter-increment: method; }
.reviews-site-v2 .research-method li::before { position: absolute; left: 0; top: 18px; content: counter(method, decimal-leading-zero); color: var(--rv-green); font-family: var(--rv-serif); font-size: 23px; }

@media (max-width: 760px) {
  .reviews-site-v2 .research-hero { padding-top: 54px; padding-bottom: 42px; }
  .reviews-site-v2 .research-hero h1 { font-size: 44px; line-height: 1; }
  .reviews-site-v2 .research-hero > p:not(.eyebrow) { font-size: 18px; }
  .reviews-site-v2 .research-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reviews-site-v2 .research-stats > div { padding: 22px 16px 24px 0; }
  .reviews-site-v2 .research-stats > div + div { padding-left: 16px; }
  .reviews-site-v2 .research-stats > div:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid var(--rv-line); }
  .reviews-site-v2 .research-stats > div:nth-child(4) { border-top: 1px solid var(--rv-line); }
  .reviews-site-v2 .research-stats strong { font-size: 34px; }
  .reviews-site-v2 .research-product-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 12px; padding-top: 44px; padding-bottom: 44px; }
  .reviews-site-v2 .research-product-strip img { height: 96px; }
  .reviews-site-v2 .research-table-section { padding-top: 48px; padding-bottom: 54px; overflow: hidden; }
  .reviews-site-v2 .research-table { overflow-x: auto; }
  .reviews-site-v2 .research-table > [role="row"] { width: 760px; grid-template-columns: 210px repeat(4, 130px); }
  .reviews-site-v2 .research-findings,
  .reviews-site-v2 .research-method { grid-template-columns: 1fr; gap: 28px; padding-top: 50px; padding-bottom: 54px; }
  .reviews-site-v2 .research-findings h2,
  .reviews-site-v2 .research-method h2 { font-size: 34px; }
}

.reviews-site-v2 .site-header,
.reviews-site-v2 .site-footer,
.reviews-site-v2 .app-install-banner,
.reviews-site-v2 .rv-home,
.reviews-site-v2 .rv-archive-page,
.reviews-site-v2 .rv-product-page,
.reviews-site-v2 .rv-download-page {
  color: var(--rv-ink);
  font-family: var(--rv-sans);
  letter-spacing: 0;
}

.reviews-site-v2 .eyebrow {
  margin: 0 0 12px;
  color: var(--rv-green);
  font: 800 12px/1.2 var(--rv-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.reviews-site-v2 .site-header.rv-header {
  position: sticky;
  z-index: 60;
  top: 0;
  width: 100%;
  max-width: none;
  min-height: 72px;
  margin: 0;
  padding: 0 28px;
  border: 0;
  border-bottom: 1px solid var(--rv-line);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.reviews-site-v2 .rv-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--rv-width);
  min-height: 71px;
  margin: 0 auto;
}

.reviews-site-v2 .rv-header .brand-link {
  display: inline-flex;
  align-items: center;
  width: 132px;
  height: 44px;
}

.reviews-site-v2 .rv-header .brand-logo {
  display: block;
  width: 128px;
  height: auto;
  max-height: 42px;
  object-fit: contain;
}

.reviews-site-v2 .rv-header nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.reviews-site-v2 .rv-header nav a:not(.nav-cta) {
  color: #454a47;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}

.reviews-site-v2 .rv-header nav a:hover {
  color: var(--rv-green);
}

.reviews-site-v2 .rv-header .nav-cta,
.reviews-site-v2 .rv-primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--rv-ink);
  border-radius: 8px;
  background: var(--rv-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
  box-shadow: none;
}

.reviews-site-v2 .rv-header .nav-cta:hover,
.reviews-site-v2 .rv-primary-button:hover {
  background: var(--rv-green);
  border-color: var(--rv-green);
  color: #fff;
}

.reviews-site-v2 .apple-mark {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.reviews-site-v2 .app-install-banner {
  display: none;
}

.reviews-site-v2 .rv-hero {
  width: 100%;
  border-bottom: 1px solid var(--rv-line);
  background: #fff;
}

.reviews-site-v2 .rv-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.82fr);
  align-items: center;
  gap: 56px;
  width: 100%;
  max-width: var(--rv-width);
  margin: 0 auto;
  padding: 36px 28px 32px;
}

.reviews-site-v2 .rv-mascot-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  margin-bottom: 30px;
  padding: 4px 16px 4px 5px;
  border: 1px solid var(--rv-line);
  border-radius: 8px;
  background: #fff;
  color: #464b48;
  font-size: 13px;
  font-weight: 650;
}

.reviews-site-v2 .rv-hero-mascot {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
}

.reviews-site-v2 .rv-hero-mascot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.reviews-site-v2 .rv-hero h1,
.reviews-site-v2 .rv-archive-hero h1 {
  max-width: 760px;
  margin: 0;
  color: var(--rv-ink);
  font-family: var(--rv-serif);
  font-size: 68px;
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: 0;
}

.reviews-site-v2 .rv-hero-lede {
  max-width: 610px;
  margin: 24px 0 30px;
  color: #626764;
  font-size: 20px;
  line-height: 1.5;
}

.reviews-site-v2 .rv-hero-copy .product-search-wrap,
.reviews-site-v2 .rv-search-hero .product-search-wrap,
.reviews-site-v2 .category-archive-hero .product-search-wrap {
  position: relative;
  z-index: 12;
  width: 100%;
  max-width: 620px;
}

.reviews-site-v2 .product-search {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 58px;
  padding: 6px 7px 6px 18px;
  border: 1px solid #cfd4d1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(16, 19, 17, 0.06);
}

.reviews-site-v2 .product-search > span {
  color: var(--rv-ink);
  font-size: 26px;
  line-height: 1;
}

.reviews-site-v2 .product-search input {
  width: 100%;
  min-width: 0;
  padding: 0 12px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--rv-ink);
  font: 600 16px/1.2 var(--rv-sans);
}

.reviews-site-v2 .product-search input::placeholder {
  color: #9a9f9c;
}

.reviews-site-v2 .product-search button {
  min-width: 92px;
  min-height: 44px;
  border: 0;
  border-radius: 6px;
  background: var(--rv-green);
  color: #fff;
  font: 750 14px/1 var(--rv-sans);
  cursor: pointer;
}

.reviews-site-v2 .search-suggestions {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--rv-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(16, 19, 17, 0.12);
}

.reviews-site-v2 .search-suggestion-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--rv-line);
  color: var(--rv-ink);
  text-decoration: none;
}

.reviews-site-v2 .search-suggestion-row > img {
  width: 48px;
  height: 54px;
  object-fit: contain;
}

.reviews-site-v2 .search-suggestion-row > span {
  display: grid;
  min-width: 0;
}

.reviews-site-v2 .search-suggestion-row strong,
.reviews-site-v2 .search-suggestion-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reviews-site-v2 .search-suggestion-row small {
  margin-top: 4px;
  color: var(--rv-muted);
}

.reviews-site-v2 .rv-hero-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 22px;
}

.reviews-site-v2 .rv-text-link,
.reviews-site-v2 .rv-section-heading > a {
  color: var(--rv-ink);
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
}

.reviews-site-v2 .rv-text-link:hover,
.reviews-site-v2 .rv-section-heading > a:hover {
  color: var(--rv-green);
}

.reviews-site-v2 .rv-hero-product {
  position: relative;
  min-width: 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--rv-ink);
}

.reviews-site-v2 .rv-hero-product-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  color: var(--rv-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.reviews-site-v2 .rv-hero-product-label span:first-child {
  color: var(--rv-ink);
  font: 400 30px/1 var(--rv-serif);
  letter-spacing: 0;
}

.reviews-site-v2 .rv-hero-product-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 300px;
  border: 1px solid var(--rv-line);
  border-radius: 8px;
  background: var(--rv-soft);
}

.reviews-site-v2 .rv-hero-product-stage > img {
  width: 78%;
  height: 82%;
  object-fit: contain;
  filter: drop-shadow(0 20px 20px rgba(16, 19, 17, 0.12));
}

.reviews-site-v2 .rv-hero-product-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rv-line);
}

.reviews-site-v2 .rv-hero-product-info p {
  margin: 0 0 6px;
  color: var(--rv-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.reviews-site-v2 .rv-hero-product-info h2 {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  font-family: var(--rv-serif);
  font-size: 27px;
  font-weight: 400;
  line-height: 1.06;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.reviews-site-v2 .rv-hero-scores {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.reviews-site-v2 .rv-hero-scores .app-score-ring {
  width: 54px !important;
  height: 54px !important;
}

.reviews-site-v2 .rv-hero-next {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-top: 14px;
}

.reviews-site-v2 .rv-hero-next a {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--rv-ink);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.reviews-site-v2 .rv-hero-next img {
  width: 42px;
  height: 44px;
  object-fit: contain;
}

.reviews-site-v2 .rv-hero-next span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reviews-site-v2 .rv-proof-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  max-width: var(--rv-width);
  margin: 0 auto;
  padding: 0 28px;
  border-bottom: 1px solid var(--rv-line);
}

.reviews-site-v2 .rv-proof-band > span {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 88px;
  padding: 28px 24px;
  border-right: 1px solid var(--rv-line);
  color: var(--rv-muted);
  font-size: 13px;
}

.reviews-site-v2 .rv-proof-band > span:first-child { padding-left: 0; }
.reviews-site-v2 .rv-proof-band > span:last-child { border-right: 0; }
.reviews-site-v2 .rv-proof-band strong { color: var(--rv-ink); font: 400 27px/1 var(--rv-serif); }

.reviews-site-v2 .rv-section {
  width: 100%;
  max-width: var(--rv-width);
  margin: 0 auto;
  padding: 96px 28px;
}

.reviews-site-v2 .rv-section + .rv-section {
  border-top: 1px solid var(--rv-line);
}

.reviews-site-v2 .rv-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 40px;
}

.reviews-site-v2 .rv-section-heading h2,
.reviews-site-v2 .rv-related-paths h2 {
  margin: 0;
  font-family: var(--rv-serif);
  font-size: 48px;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0;
}

.reviews-site-v2 .rv-trending-board {
  width: 100%;
}

.reviews-site-v2 .rv-trending-meta {
  display: flex;
  justify-content: flex-end;
  min-height: 22px;
  margin-bottom: 14px;
}

.reviews-site-v2 .rv-trending-updated {
  color: #8b908d;
  font-size: 13px;
  font-weight: 650;
}

.reviews-site-v2 .rv-trending-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 650px;
  margin-bottom: 42px;
  border: 1px solid var(--rv-line);
  border-radius: 8px;
  background: #fff;
}

.reviews-site-v2 .rv-trending-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 62px;
  padding: 8px 14px;
  border: 0;
  border-right: 1px solid var(--rv-line);
  background: transparent;
  color: var(--rv-muted);
  font: 750 15px/1 var(--rv-sans);
  cursor: pointer;
}

.reviews-site-v2 .rv-trending-tabs button:last-child { border-right: 0; }
.reviews-site-v2 .rv-trending-tabs button:nth-child(1).is-active { color: var(--rv-green); background: var(--rv-green-soft); }
.reviews-site-v2 .rv-trending-tabs button:nth-child(2).is-active { color: var(--rv-blue); background: #eef1fa; }
.reviews-site-v2 .rv-trending-tabs button:nth-child(3).is-active { color: var(--rv-orange); background: #fbf1e8; }
.reviews-site-v2 .rv-trending-tabs img { width: 32px; height: 32px; object-fit: contain; }

.reviews-site-v2 .rv-live-heading {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  max-width: 850px;
  margin-bottom: 28px;
}

.reviews-site-v2 .rv-live-heading > img {
  width: 66px;
  height: 66px;
  padding: 8px;
  border: 1px solid var(--rv-line);
  border-radius: 50%;
  background: #f8f8f5;
  object-fit: contain;
}

.reviews-site-v2 .rv-live-heading h2 {
  margin: 0 0 8px;
  font-family: var(--rv-serif);
  font-size: 42px;
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: 0;
}

.reviews-site-v2 .rv-live-heading p:last-child {
  margin: 0;
  color: var(--rv-muted);
  font-size: 15px;
  line-height: 1.5;
}

.reviews-site-v2 .rv-trending-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reviews-site-v2 .rv-trending-list li {
  min-width: 0;
}

.reviews-site-v2 .rv-trending-list a {
  display: grid;
  grid-template-columns: 48px 68px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 112px;
  padding: 12px 16px;
  border: 1px solid var(--rv-line);
  border-radius: 8px;
  background: #fff;
  color: var(--rv-ink);
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease;
}

.reviews-site-v2 .rv-trending-list a:hover {
  transform: translateY(-2px);
  border-color: #aeb5b1;
}

.reviews-site-v2 .rv-trend-rank {
  color: var(--rv-ink);
  font: 400 25px/1 var(--rv-serif);
}

.reviews-site-v2 .rv-trend-product {
  width: 64px;
  height: 76px;
  object-fit: contain;
}

.reviews-site-v2 .rv-trend-copy {
  display: grid;
  min-width: 0;
}

.reviews-site-v2 .rv-trend-copy strong,
.reviews-site-v2 .rv-trend-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reviews-site-v2 .rv-trend-copy strong { font-size: 15px; line-height: 1.25; }
.reviews-site-v2 .rv-trend-copy small { margin-top: 6px; color: #9a9e9c; font-size: 12px; }
.reviews-site-v2 .rv-trend-scores { display: flex; gap: 6px; }
.reviews-site-v2 .rv-trend-scores .app-score-ring { width: 42px !important; height: 42px !important; }

.reviews-site-v2 .rv-ranking-section .top-picks-web-header {
  margin: 0 0 32px;
}

.reviews-site-v2 .rv-ranking-section .top-picks-parent-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(100px, 1fr));
  gap: 10px;
}

.reviews-site-v2 .rv-ranking-section .top-picks-parent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 58px;
  padding: 8px 12px;
  border: 1px solid var(--rv-line);
  border-radius: 8px;
  background: #fff;
  color: var(--rv-muted);
  cursor: pointer;
}

.reviews-site-v2 .rv-ranking-section .top-picks-parent.is-active {
  border-color: var(--rv-green);
  color: var(--rv-ink);
  background: var(--rv-green-soft);
}

.reviews-site-v2 .rv-ranking-section .top-picks-parent-icon,
.reviews-site-v2 .rv-ranking-section .top-picks-parent-icon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.reviews-site-v2 .rv-ranking-section .product-rail-block { margin: 48px 0 0; }
.reviews-site-v2 .rail-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 18px; }
.reviews-site-v2 .rail-heading h3 { margin: 0; font: 400 30px/1.1 var(--rv-serif); }
.reviews-site-v2 .rail-heading a { color: var(--rv-ink); font-size: 13px; font-weight: 750; }
.reviews-site-v2 .product-rail { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; overflow: visible; }

.reviews-site-v2 .rail-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--rv-line);
  border-radius: 8px;
  background: #fff;
  color: var(--rv-ink);
  text-decoration: none;
}

.reviews-site-v2 .rail-art { position: relative; display: flex; align-items: center; justify-content: center; height: 150px; background: var(--rv-soft); border-radius: 6px; }
.reviews-site-v2 .rail-art > img { width: 84%; height: 84%; object-fit: contain; }
.reviews-site-v2 .product-rank-bubble { position: absolute; z-index: 2; top: 8px; left: 8px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--rv-ink); font: 400 15px/1 var(--rv-serif); box-shadow: 0 2px 10px rgba(16,19,17,.1); }
.reviews-site-v2 .rail-card h4 { display: -webkit-box; min-height: 40px; overflow: hidden; margin: 14px 0 5px; font-size: 14px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.reviews-site-v2 .rail-card > p { overflow: hidden; margin: 0 0 12px; color: var(--rv-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.reviews-site-v2 .rail-score-pair { display: flex; gap: 6px; margin-top: auto; }
.reviews-site-v2 .rail-score-pair .app-score-stack > span:not(.app-native-score) { display: none; }
.reviews-site-v2 .rankings-see-more-wrap { display: flex; justify-content: center; margin-top: 32px; }
.reviews-site-v2 .rankings-see-more-button { min-height: 44px; padding: 0 18px; border: 1px solid var(--rv-ink); border-radius: 8px; background: #fff; color: var(--rv-ink); font-weight: 750; cursor: pointer; }

.reviews-site-v2 .rv-score-story {
  width: 100%;
  border-top: 1px solid var(--rv-line);
  border-bottom: 1px solid var(--rv-line);
  background: #edf6f0;
}

.reviews-site-v2 .rv-score-story-inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 80px;
  width: 100%;
  max-width: var(--rv-width);
  margin: 0 auto;
  padding: 96px 28px;
}

.reviews-site-v2 .rv-score-story h2 { margin: 0; font: 400 58px/1 var(--rv-serif); letter-spacing: 0; }
.reviews-site-v2 .rv-score-explainer { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.reviews-site-v2 .rv-score-explainer article { padding: 26px; border: 1px solid #d5e3da; border-radius: 8px; background: #fff; }
.reviews-site-v2 .rv-score-symbol { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 28px; border: 3px solid var(--rv-green); border-radius: 50%; color: var(--rv-green); font-size: 20px; }
.reviews-site-v2 .rv-score-symbol-health { color: #6bb54d; border-color: #6bb54d; }
.reviews-site-v2 .rv-score-explainer h3 { margin: 0 0 10px; font: 400 25px/1.1 var(--rv-serif); }
.reviews-site-v2 .rv-score-explainer p { margin: 0; color: var(--rv-muted); font-size: 14px; line-height: 1.55; }
.reviews-site-v2 .rv-score-explainer > a { grid-column: 1 / -1; margin-top: 12px; color: var(--rv-ink); font-weight: 750; }

.reviews-site-v2 .rv-product-grid,
.reviews-site-v2 .rv-search-results-section .product-grid,
.reviews-site-v2 .rv-archive-page .product-grid,
.reviews-site-v2 .rv-product-page .product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.reviews-site-v2 .product-card {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  min-height: 220px;
  overflow: hidden;
  border: 1px solid var(--rv-line);
  border-radius: 8px;
  background: #fff;
  color: var(--rv-ink);
  text-decoration: none;
  box-shadow: none;
}

.reviews-site-v2 .product-float-zone { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; padding: 18px; background: var(--rv-soft); }
.reviews-site-v2 .product-float-zone > img { width: 100%; height: 150px; object-fit: contain; }
.reviews-site-v2 .product-card-copy { display: flex; flex-direction: column; min-width: 0; padding: 22px 18px; }
.reviews-site-v2 .product-card-copy h3 { display: -webkit-box; overflow: hidden; margin: 0 0 7px; font-size: 16px; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.reviews-site-v2 .product-card-copy > span { overflow: hidden; color: var(--rv-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.reviews-site-v2 .product-card-copy .app-score-pair { display: flex; gap: 8px; margin-top: auto; }
.reviews-site-v2 .product-card-copy .app-score-stack > span:not(.app-native-score) { display: none; }

.reviews-site-v2 .rv-download-band {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  width: calc(100% - 56px);
  max-width: 1144px;
  margin: 0 auto 96px;
  padding: 34px;
  border: 1px solid var(--rv-line);
  border-radius: 8px;
  background: var(--rv-soft);
}

.reviews-site-v2 .rv-download-band-mascot { width: 94px; height: 94px; }
.reviews-site-v2 .rv-download-band-mascot img { width: 100%; height: 100%; object-fit: contain; }
.reviews-site-v2 .rv-download-band h2 { margin: 0 0 8px; font: 400 34px/1.05 var(--rv-serif); }
.reviews-site-v2 .rv-download-band p:last-child { margin: 0; color: var(--rv-muted); }

.reviews-site-v2 .rv-archive-hero {
  width: 100%;
  max-width: var(--rv-width);
  margin: 0 auto;
  padding: 46px 28px 38px;
  border-bottom: 1px solid var(--rv-line);
}

.reviews-site-v2 .rv-archive-hero > p:last-of-type {
  max-width: 820px;
  margin: 18px 0 0;
  color: var(--rv-muted);
  font-size: 18px;
  line-height: 1.55;
}

.reviews-site-v2 .rv-archive-hero .product-search-wrap { margin-top: 30px; }
.reviews-site-v2 .rv-trending-main { padding-top: 34px; }

.reviews-site-v2 .rv-related-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  width: 100%;
  max-width: var(--rv-width);
  margin: 0 auto;
  padding: 72px 28px;
  border-top: 1px solid var(--rv-line);
}

.reviews-site-v2 .rv-related-paths nav { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rv-ink); }
.reviews-site-v2 .rv-related-paths nav a { padding: 18px 0; border-bottom: 1px solid var(--rv-line); color: var(--rv-ink); font-weight: 700; text-decoration: none; }

.reviews-site-v2 .rv-search-results-section { padding-top: 56px; }
.reviews-site-v2 .search-page-results { width: 100%; }
.reviews-site-v2 .search-results-count { margin: 0 0 20px; color: var(--rv-muted); }
.reviews-site-v2 .search-result-card { display: flex; min-width: 0; overflow: hidden; flex-direction: column; padding: 18px; }
.reviews-site-v2 .search-result-card > img { width: 100%; height: 180px; object-fit: contain; background: var(--rv-soft); border-radius: 6px; }
.reviews-site-v2 .search-result-card > strong { display: -webkit-box; min-height: 42px; overflow: hidden; margin-top: 16px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.reviews-site-v2 .search-result-card > span:not(.rank-badge) { display: block; width: 100%; min-width: 0; overflow: hidden; margin-top: 5px; color: var(--rv-muted); text-overflow: ellipsis; white-space: nowrap; }
.reviews-site-v2 .search-result-card .app-score-pair { display: flex; gap: 7px; margin-top: 16px; }

.reviews-site-v2 .section-shell {
  width: 100%;
  max-width: var(--rv-width);
  margin: 0 auto;
  padding: 64px 28px;
}

.reviews-site-v2 .section-heading { margin-bottom: 28px; }
.reviews-site-v2 .section-heading h2 { margin: 0; font: 400 39px/1.06 var(--rv-serif); letter-spacing: 0; }
.reviews-site-v2 .split-heading { display: flex; justify-content: space-between; align-items: end; gap: 28px; }
.reviews-site-v2 .split-heading > p { max-width: 500px; margin: 0; color: var(--rv-muted); line-height: 1.55; }

.reviews-site-v2 .seo-scoreboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.reviews-site-v2 .seo-leader-card { display: grid; min-height: 150px; padding: 20px; border: 1px solid var(--rv-line); border-radius: 8px; color: var(--rv-ink); text-decoration: none; }
.reviews-site-v2 .seo-leader-card span { color: var(--rv-green); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.reviews-site-v2 .seo-leader-card strong { align-self: end; font: 400 22px/1.1 var(--rv-serif); }
.reviews-site-v2 .seo-leader-card em { justify-self: end; font: 400 30px/1 var(--rv-serif); }

.reviews-site-v2 .app-download-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 22px;
  padding: 30px;
  border: 1px solid var(--rv-line);
  border-radius: 8px;
  background: var(--rv-soft);
}

.reviews-site-v2 .app-download-mascot-line { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; color: var(--rv-muted); font-size: 13px; font-weight: 650; }
.reviews-site-v2 .app-download-mascot { width: 48px; height: 48px; }
.reviews-site-v2 .app-download-mascot img { width: 100%; height: 100%; object-fit: contain; }
.reviews-site-v2 .app-download-copy h2 { margin: 0 0 8px; font: 400 34px/1.05 var(--rv-serif); }
.reviews-site-v2 .app-download-copy > p:last-child { max-width: 620px; margin: 0; color: var(--rv-muted); line-height: 1.5; }
.reviews-site-v2 .app-download-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 18px; border-radius: 8px; background: var(--rv-ink); color: #fff; font-weight: 750; text-decoration: none; }

.reviews-site-v2 .rv-product-page .app-product-hero,
.reviews-site-v2 .rv-product-page .product-hero.app-product-hero {
  width: 100%;
  max-width: var(--rv-width);
  margin: 0 auto;
  padding: 54px 28px 70px;
  border-bottom: 1px solid var(--rv-line);
  background: #fff;
}

.reviews-site-v2 .rv-product-page .breadcrumb { margin-bottom: 34px; color: var(--rv-muted); font-size: 12px; }
.reviews-site-v2 .rv-product-page .breadcrumb a { color: inherit; }
.reviews-site-v2 .rv-product-page .app-product-header { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); grid-template-rows: auto auto auto auto 1fr; gap: 12px 64px; align-items: start; }
.reviews-site-v2 .rv-product-page .app-product-image { grid-row: 1 / 6; display: flex; align-items: center; justify-content: center; width: 100%; height: 480px; padding: 30px; border: 1px solid var(--rv-line); border-radius: 8px; background: var(--rv-soft); }
.reviews-site-v2 .rv-product-page .app-product-image img { width: 92%; height: 92%; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(16,19,17,.12)); }
.reviews-site-v2 .rv-product-page .app-product-brand { grid-column: 2; color: var(--rv-muted); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.reviews-site-v2 .rv-product-page .app-product-header h1 { grid-column: 2; margin: 0; font: 400 52px/1.02 var(--rv-serif); letter-spacing: 0; }
.reviews-site-v2 .rv-product-page .app-product-score-pair { grid-column: 2; display: flex; gap: 12px; margin: 16px 0; }
.reviews-site-v2 .rv-product-page .app-product-score-pair .app-score-ring { width: 64px !important; height: 64px !important; }
.reviews-site-v2 .rv-product-page .app-product-pantry-cta { grid-column: 2; display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; border-radius: 8px; background: #f0f1f4; color: var(--rv-ink); font-weight: 750; text-decoration: none; }
.reviews-site-v2 .rv-product-page .app-category-badge { grid-column: 2; color: var(--rv-muted); font-size: 12px; text-decoration: none; }
.reviews-site-v2 .rv-product-page .app-product-analysis { padding-top: 28px; }
.reviews-site-v2 .rv-product-page .app-detail-card,
.reviews-site-v2 .rv-product-page .product-faq-grid article,
.reviews-site-v2 .seo-link-panel { border: 1px solid var(--rv-line); border-radius: 8px; background: #fff; box-shadow: none; }

.reviews-site-v2 .site-footer {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 72px max(28px, calc((100% - var(--rv-width)) / 2 + 28px)) 26px;
  border: 0;
  border-top: 1px solid var(--rv-line);
  border-radius: 0;
  background: var(--rv-ink);
  color: #fff;
}

.reviews-site-v2 .site-footer-cta { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 24px; padding-bottom: 54px; border-bottom: 1px solid rgba(255,255,255,.18); }
.reviews-site-v2 .site-footer-mascot { width: 84px; height: 84px; }
.reviews-site-v2 .site-footer-mascot img { width: 100%; height: 100%; object-fit: contain; }
.reviews-site-v2 .site-footer .eyebrow { color: #74cf99; }
.reviews-site-v2 .site-footer-cta h2 { margin: 0 0 8px; color: #fff; font: 400 38px/1.05 var(--rv-serif); }
.reviews-site-v2 .site-footer-cta p:last-child { margin: 0; color: rgba(255,255,255,.62); }
.reviews-site-v2 .footer-waitlist-cta { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 1px solid #fff; border-radius: 8px; color: #fff; font-weight: 750; text-decoration: none; }
.reviews-site-v2 .site-footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; padding: 50px 0; }
.reviews-site-v2 .site-footer-links h3 { margin: 0 0 18px; color: #fff; font-size: 13px; }
.reviews-site-v2 .site-footer-links a { display: block; margin: 10px 0; color: rgba(255,255,255,.64); font-size: 13px; text-decoration: none; }
.reviews-site-v2 .rv-footer-bottom { display: flex; justify-content: space-between; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.44); font-size: 11px; }

.reviews-site-v2 .rv-download-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 40px 24px; background: #fff; text-align: center; }
.reviews-site-v2 .rv-download-page > img { width: 160px; height: auto; margin: 12px 0 28px; }
.reviews-site-v2 .rv-download-mascot { width: 100px; height: 100px; }
.reviews-site-v2 .rv-download-mascot img { width: 100%; height: 100%; object-fit: contain; }
.reviews-site-v2 .rv-download-page h1 { margin: 0; font: 400 42px/1.05 var(--rv-serif); }
.reviews-site-v2 .rv-download-page p { color: var(--rv-muted); }
.reviews-site-v2 .rv-download-fallback { margin-top: 18px; color: var(--rv-green); font-weight: 750; }
.reviews-site-v2 .rv-download-standard { display: flex; flex-direction: column; align-items: center; min-height: 72px; color: var(--rv-muted); }
.reviews-site-v2 .rv-download-standard span { font-size: 14px; }
.reviews-site-v2 .rv-download-instagram { width: min(440px, 100%); margin-top: 16px; }
.reviews-site-v2 .rv-download-instagram .rv-download-instagram-note { max-width: 380px; margin: 0 auto 20px; color: #4e534f; font-size: 16px; line-height: 1.45; }
.reviews-site-v2 .rv-download-primary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 58px; padding: 14px 22px; border-radius: 8px; background: #080a09; color: #fff; font-size: 17px; font-weight: 800; }
.reviews-site-v2 .rv-download-primary .apple-mark { width: 21px; height: 21px; }
.reviews-site-v2 .rv-download-instagram .rv-download-instagram-help { margin: 18px auto 10px; color: #777c78; font-size: 14px; line-height: 1.5; }
.reviews-site-v2 .rv-download-copy { min-height: 44px; padding: 8px 12px; border: 0; background: transparent; color: var(--rv-green); font: 750 14px/1.2 var(--rv-sans); cursor: pointer; }
body:has(.rv-download-page) .app-install-banner,
body:has(.rv-download-page) .site-header,
body:has(.rv-download-page) .site-footer { display: none; }

.reviews-site-v2 .rv-app-install-page {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 0.72fr);
  align-items: center;
  gap: 72px;
  width: 100%;
  max-width: 1180px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 54px 28px;
  color: var(--rv-ink);
  font-family: var(--rv-sans);
}

.reviews-site-v2 .rv-app-install-brand {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
}

.reviews-site-v2 .rv-app-install-brand img {
  width: 154px;
  height: auto;
}

.reviews-site-v2 .support-shell,
.reviews-site-v2 .support-shell * {
  box-sizing: border-box;
}

.reviews-site-v2 .support-shell {
  width: 100%;
}

.reviews-site-v2 .support-intro h2 {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.reviews-site-v2 .rv-app-install-copy h1 {
  max-width: 680px;
  margin: 0;
  font: 400 64px/0.98 var(--rv-serif);
  letter-spacing: 0;
}

.reviews-site-v2 .rv-app-install-lede {
  max-width: 610px;
  margin: 24px 0 28px;
  color: var(--rv-muted);
  font-size: 18px;
  line-height: 1.55;
}

.reviews-site-v2 .rv-app-store-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 22px;
  border-radius: 8px;
  background: var(--rv-ink);
  color: #fff;
  font-weight: 780;
  text-decoration: none;
}

.reviews-site-v2 .rv-app-hold-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 34px 0 0;
  padding: 0;
  border-top: 1px solid var(--rv-line);
  list-style: none;
}

.reviews-site-v2 .rv-app-hold-steps li {
  display: grid;
  gap: 8px;
  padding: 18px 14px 0 0;
}

.reviews-site-v2 .rv-app-hold-steps span {
  color: var(--rv-green);
  font: 400 21px/1 var(--rv-serif);
}

.reviews-site-v2 .rv-app-hold-steps strong {
  font-size: 12px;
}

.reviews-site-v2 .rv-app-install-preview {
  position: relative;
  height: min(760px, calc(100vh - 70px));
  overflow: hidden;
  border: 1px solid var(--rv-line);
  border-radius: 8px;
  background: var(--rv-soft);
}

.reviews-site-v2 .rv-app-install-preview img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: top center;
}

body:has(.rv-app-install-page) .app-install-banner,
body:has(.rv-app-install-page) .site-header,
body:has(.rv-app-install-page) .site-footer {
  display: none !important;
}

@media (max-width: 980px) {
  .reviews-site-v2 .rv-header nav { gap: 18px; }
  .reviews-site-v2 .rv-header nav a:not(.nav-cta) { font-size: 13px; }
  .reviews-site-v2 .rv-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(350px, .8fr); gap: 38px; }
  .reviews-site-v2 .rv-hero h1,
  .reviews-site-v2 .rv-archive-hero h1 { font-size: 56px; }
  .reviews-site-v2 .rv-hero-product-stage { height: 330px; }
  .reviews-site-v2 .rv-trending-list { grid-template-columns: 1fr; }
  .reviews-site-v2 .product-rail { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; }
  .reviews-site-v2 .rail-card { flex: 0 0 190px; scroll-snap-align: start; }
  .reviews-site-v2 .rv-product-grid,
  .reviews-site-v2 .rv-search-results-section .product-grid,
  .reviews-site-v2 .rv-archive-page .product-grid,
  .reviews-site-v2 .rv-product-page .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .reviews-site-v2 .app-install-banner { display: block; width: 100%; padding: 8px 14px; border-bottom: 1px solid var(--rv-line); background: #fff; }
  .reviews-site-v2 .app-install-banner-inner { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
  .reviews-site-v2 .app-install-icon { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; }
  .reviews-site-v2 .app-install-copy { display: grid; min-width: 0; }
  .reviews-site-v2 .app-install-copy strong,
  .reviews-site-v2 .app-install-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .reviews-site-v2 .app-install-copy strong { font-size: 12px; }
  .reviews-site-v2 .app-install-copy span { margin-top: 3px; color: var(--rv-muted); font-size: 10px; }
  .reviews-site-v2 .app-install-get { padding: 8px 10px; border-radius: 6px; background: var(--rv-green-soft); color: var(--rv-green); font-size: 12px; font-weight: 800; text-decoration: none; }
  .reviews-site-v2 .site-header.rv-header { min-height: 62px; padding: 0 16px; }
  .reviews-site-v2 .rv-header-inner { min-height: 61px; }
  .reviews-site-v2 .rv-header .brand-link { width: 106px; }
  .reviews-site-v2 .rv-header .brand-logo { width: 104px; }
  .reviews-site-v2 .rv-header nav a:not(.nav-cta) { display: none; }
  .reviews-site-v2 .rv-header nav a[href='/search'] { display: inline-flex; }
  .reviews-site-v2 .rv-header .nav-cta { min-height: 38px; padding: 0 12px; font-size: 12px; }
  .reviews-site-v2 .rv-header .nav-cta .apple-mark { display: none; }
  .reviews-site-v2 .rv-hero-inner { display: flex; flex-direction: column; align-items: stretch; gap: 42px; padding: 42px 18px 36px; }
  .reviews-site-v2 .rv-mascot-note { margin-bottom: 24px; font-size: 12px; }
  .reviews-site-v2 .rv-hero h1,
  .reviews-site-v2 .rv-archive-hero h1 { font-size: 44px; line-height: 1; }
  .reviews-site-v2 .rv-hero-lede { margin: 18px 0 24px; font-size: 17px; }
  .reviews-site-v2 .product-search { min-height: 54px; padding-left: 12px; }
  .reviews-site-v2 .product-search button { min-width: 72px; min-height: 40px; }
  .reviews-site-v2 .rv-hero-actions { align-items: flex-start; flex-direction: column; gap: 15px; }
  .reviews-site-v2 .rv-primary-button { min-height: 48px; }
  .reviews-site-v2 .rv-hero-product { width: 100%; }
  .reviews-site-v2 .rv-hero-product-stage { height: 270px; }
  .reviews-site-v2 .rv-hero-product-info h2 { font-size: 23px; }
  .reviews-site-v2 .rv-hero-next { display: none; }
  .reviews-site-v2 .rv-proof-band { display: flex; overflow-x: auto; padding: 0 18px; }
  .reviews-site-v2 .rv-proof-band > span { flex: 0 0 230px; min-height: 74px; padding: 22px 18px; }
  .reviews-site-v2 .rv-proof-band > span:first-child { padding-left: 0; }
  .reviews-site-v2 .rv-section { padding: 68px 18px; }
  .reviews-site-v2 .rv-section-heading { align-items: flex-start; flex-direction: column; margin-bottom: 30px; }
  .reviews-site-v2 .rv-section-heading h2,
  .reviews-site-v2 .rv-related-paths h2 { font-size: 38px; }
  .reviews-site-v2 .rv-trending-meta { justify-content: flex-start; }
  .reviews-site-v2 .rv-trending-tabs { margin-bottom: 34px; }
  .reviews-site-v2 .rv-trending-tabs button { min-height: 58px; padding: 7px 5px; font-size: 12px; }
  .reviews-site-v2 .rv-trending-tabs img { width: 28px; height: 28px; }
  .reviews-site-v2 .rv-live-heading { grid-template-columns: 54px minmax(0, 1fr); gap: 14px; }
  .reviews-site-v2 .rv-live-heading > img { width: 54px; height: 54px; }
  .reviews-site-v2 .rv-live-heading h2 { font-size: 32px; }
  .reviews-site-v2 .rv-trending-list a { grid-template-columns: 34px 54px minmax(0, 1fr) auto; gap: 9px; min-height: 96px; padding: 10px; }
  .reviews-site-v2 .rv-trend-rank { font-size: 21px; }
  .reviews-site-v2 .rv-trend-product { width: 50px; height: 62px; }
  .reviews-site-v2 .rv-trend-scores { gap: 3px; }
  .reviews-site-v2 .rv-trend-scores .app-score-ring { width: 38px !important; height: 38px !important; }
  .reviews-site-v2 .rv-ranking-section .top-picks-parent-row { display: flex; overflow-x: auto; padding-bottom: 8px; }
  .reviews-site-v2 .rv-ranking-section .top-picks-parent { flex: 0 0 118px; }
  .reviews-site-v2 .rv-score-story-inner { grid-template-columns: 1fr; gap: 42px; padding: 68px 18px; }
  .reviews-site-v2 .rv-score-story h2 { font-size: 46px; }
  .reviews-site-v2 .rv-score-explainer { grid-template-columns: 1fr; }
  .reviews-site-v2 .rv-score-explainer > a { grid-column: auto; }
  .reviews-site-v2 .rv-product-grid,
  .reviews-site-v2 .rv-search-results-section .product-grid,
  .reviews-site-v2 .rv-archive-page .product-grid,
  .reviews-site-v2 .rv-product-page .product-grid { grid-template-columns: 1fr; }
  .reviews-site-v2 .product-card { min-height: 190px; grid-template-columns: 118px minmax(0, 1fr); }
  .reviews-site-v2 .product-float-zone > img { height: 130px; }
  .reviews-site-v2 .rv-download-band { grid-template-columns: 68px minmax(0, 1fr); width: calc(100% - 36px); margin-bottom: 68px; padding: 22px; }
  .reviews-site-v2 .rv-download-band-mascot { width: 68px; height: 68px; }
  .reviews-site-v2 .rv-download-band .rv-primary-button { grid-column: 1 / -1; width: 100%; }
  .reviews-site-v2 .rv-archive-hero { padding: 50px 18px 46px; }
  .reviews-site-v2 .rv-archive-hero > p:last-of-type { font-size: 16px; }
  .reviews-site-v2 .rv-related-paths { grid-template-columns: 1fr; gap: 32px; padding: 58px 18px; }
  .reviews-site-v2 .rv-related-paths nav { grid-template-columns: 1fr; }
  .reviews-site-v2 .section-shell { padding: 52px 18px; }
  .reviews-site-v2 .split-heading { align-items: flex-start; flex-direction: column; }
  .reviews-site-v2 .seo-scoreboard { grid-template-columns: 1fr; }
  .reviews-site-v2 .app-download-cta { grid-template-columns: 1fr; padding: 22px; }
  .reviews-site-v2 .app-download-button { width: 100%; }
  .reviews-site-v2 .rv-product-page .app-product-hero,
  .reviews-site-v2 .rv-product-page .product-hero.app-product-hero { padding: 34px 18px 48px; }
  .reviews-site-v2 .rv-product-page .app-product-header { display: flex; flex-direction: column; gap: 11px; }
  .reviews-site-v2 .rv-product-page .app-product-image { width: 100%; height: 330px; margin-bottom: 18px; }
  .reviews-site-v2 .rv-product-page .app-product-header h1 { font-size: 38px; }
  .reviews-site-v2 .rv-product-page .app-product-score-pair { margin: 14px 0; }
  .reviews-site-v2 .rv-product-page .app-product-pantry-cta { width: 100%; }
  .reviews-site-v2 .site-footer { padding: 54px 18px 24px; }
  .reviews-site-v2 .site-footer-cta { grid-template-columns: 66px minmax(0, 1fr); }
  .reviews-site-v2 .site-footer-mascot { width: 66px; height: 66px; }
  .reviews-site-v2 .site-footer-cta h2 { font-size: 29px; }
  .reviews-site-v2 .site-footer-cta .footer-waitlist-cta { grid-column: 1 / -1; justify-content: center; }
  .reviews-site-v2 .site-footer-links { grid-template-columns: 1fr 1fr; gap: 34px 20px; }
  .reviews-site-v2 .site-footer-links > div:last-child { grid-column: 1 / -1; }
}

/* App-native consumer surface. Mirrors the current iOS hierarchy and depth. */
.reviews-site-v2 {
  --rv-ink: #0a0b0a;
  --rv-muted: #8d918e;
  --rv-line: rgba(10, 11, 10, 0.09);
  --rv-soft: #f6f7f6;
  --rv-green: #229a5c;
  --rv-green-soft: #edf8f2;
  --rv-width: 1280px;
  --rv-app-shadow: 0 18px 46px rgba(18, 24, 20, 0.09), 0 4px 14px rgba(18, 24, 20, 0.045);
  --rv-app-shadow-hover: 0 24px 58px rgba(18, 24, 20, 0.13), 0 6px 16px rgba(18, 24, 20, 0.055);
  background: #fff;
}

.reviews-site-v2 .site-header.rv-header {
  min-height: 84px !important;
  padding: 0 30px !important;
  border-bottom: 1px solid rgba(10, 11, 10, 0.07) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 1px 16px rgba(10, 11, 10, 0.025) !important;
  backdrop-filter: blur(22px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.4) !important;
}

.reviews-site-v2 .rv-header-inner { min-height: 83px; }
.reviews-site-v2 .rv-header .brand-link { width: 158px; height: 52px; }
.reviews-site-v2 .rv-header .brand-logo { width: 154px !important; max-height: 48px !important; }
.reviews-site-v2 .rv-header nav { gap: 18px !important; }
.reviews-site-v2 .rv-header-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid rgba(10, 11, 10, 0.06);
  border-radius: 24px;
  background: #f4f5f4;
}
.reviews-site-v2 .rv-header .rv-header-tabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 17px;
  border-radius: 19px;
  color: #6f7471 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none;
  transition: color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.reviews-site-v2 .rv-header .rv-header-tabs a:hover {
  background: #fff;
  color: var(--rv-ink) !important;
  box-shadow: 0 4px 12px rgba(10, 11, 10, 0.07);
}
.reviews-site-v2 .rv-header .nav-cta {
  min-height: 48px !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: #090a09 !important;
}

.reviews-site-v2 .rv-hero {
  overflow: hidden;
  border-bottom: 0;
  background: #fbfcfb;
}
.reviews-site-v2 .rv-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  max-width: var(--rv-width);
  padding: 30px 30px 78px;
}
.reviews-site-v2 .rv-hero-appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  margin-bottom: 48px;
  animation: rv-app-enter 620ms cubic-bezier(.2,.75,.2,1) both;
}
.reviews-site-v2 .rv-home-wordmark { width: 140px; height: auto; }
.reviews-site-v2 .rv-hero-appbar .rv-mascot-note { margin: 0; }
.reviews-site-v2 .rv-mascot-note {
  min-height: 60px;
  padding: 5px 18px 5px 6px;
  border: 1px solid rgba(10, 11, 10, 0.08);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 26px rgba(18, 24, 20, 0.06);
  color: #313531;
  font-size: 14px;
}
.reviews-site-v2 .rv-hero-mascot { width: 50px; height: 50px; }
.reviews-site-v2 .rv-hero-copy {
  width: 100%;
  max-width: 940px;
  animation: rv-app-enter 700ms 70ms cubic-bezier(.2,.75,.2,1) both;
}
.reviews-site-v2 .rv-hero h1 {
  max-width: 900px;
  font-size: 78px;
  line-height: 0.98;
}
.reviews-site-v2 .rv-hero-lede {
  max-width: 760px;
  margin: 24px 0 28px;
  color: #717572;
  font-size: 21px;
  line-height: 1.48;
}
.reviews-site-v2 .rv-hero-copy .product-search-wrap { max-width: 760px; }
.reviews-site-v2 .product-search {
  min-height: 64px;
  padding: 7px 8px 7px 20px !important;
  border: 1px solid rgba(10, 11, 10, 0.1) !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 14px 34px rgba(18, 24, 20, 0.07) !important;
}
.reviews-site-v2 .product-search-glyph {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--rv-ink);
  border-radius: 50%;
}
.reviews-site-v2 .product-search-glyph::after {
  position: absolute;
  right: -5px;
  bottom: -3px;
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--rv-ink);
  content: '';
  transform: rotate(47deg);
  transform-origin: center;
}
.reviews-site-v2 .product-search input { font-size: 16px !important; }
.reviews-site-v2 .product-search button {
  min-width: 104px !important;
  min-height: 48px !important;
  border-radius: 16px !important;
  background: #090a09 !important;
}
.reviews-site-v2 .search-suggestions { border-radius: 20px; box-shadow: var(--rv-app-shadow); }
.reviews-site-v2 .search-suggestion-row { min-height: 82px; padding: 10px 16px; }
.reviews-site-v2 .rv-hero-actions { margin-top: 22px; }
.reviews-site-v2 .rv-primary-button {
  min-height: 50px;
  padding: 0 21px;
  border: 0;
  border-radius: 25px;
  background: #090a09;
}
.reviews-site-v2 .rv-text-link { color: #4f5451; }

.reviews-site-v2 .rv-hero-product {
  width: 100%;
  margin-top: 54px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(10, 11, 10, 0.08);
  border-radius: 28px;
  background: #fff;
  box-shadow: var(--rv-app-shadow);
  animation: rv-scorecard-enter 760ms 150ms cubic-bezier(.16,.78,.2,1) both;
}
.reviews-site-v2 .rv-hero-product-label {
  display: flex;
  justify-content: space-between;
  padding: 22px 26px;
  border-bottom: 1px solid var(--rv-line);
  color: #9a9e9b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.reviews-site-v2 .rv-hero-product-label span:first-child { color: var(--rv-green); }
.reviews-site-v2 .rv-hero-product-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.22fr);
  align-items: center;
  min-height: 430px;
}
.reviews-site-v2 .rv-hero-product-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 430px !important;
  padding: 40px;
  background: #f7f8f7;
}
.reviews-site-v2 .rv-hero-product-stage > img {
  width: 86%;
  height: 86%;
  object-fit: contain;
  filter: drop-shadow(0 20px 24px rgba(18, 24, 20, 0.15));
  transition: transform 240ms ease;
}
.reviews-site-v2 .rv-hero-product-stage:hover > img { transform: translateY(-4px) scale(1.015); }
.reviews-site-v2 .rv-hero-product-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  padding: 48px 54px;
}
.reviews-site-v2 .rv-hero-product-copy { min-width: 0; }
.reviews-site-v2 .rv-hero-product-info p {
  margin: 0 0 10px;
  color: #8c918e;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.reviews-site-v2 .rv-hero-product-info h2 {
  max-width: 620px;
  margin: 0;
  font: 400 48px/1.02 var(--rv-serif);
}
.reviews-site-v2 .rv-hero-product-copy > span {
  display: block;
  margin-top: 12px;
  color: #a0a4a1;
  font-size: 14px;
}
.reviews-site-v2 .rv-hero-scores { display: flex; gap: 16px; }
.reviews-site-v2 .rv-hero-scores .app-score-ring {
  width: 84px !important;
  height: 84px !important;
}
.reviews-site-v2 .rv-hero-scores .app-score-stack { gap: 8px; }
.reviews-site-v2 .rv-hero-scores .app-score-stack > span {
  display: block !important;
  color: #8d918e !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
}
.reviews-site-v2 .rv-scorecard-link {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 0 20px;
  border-radius: 18px;
  background: #f1f2f4;
  color: var(--rv-ink);
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
}
.reviews-site-v2 .rv-hero-next {
  display: grid;
  grid-template-columns: 160px repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  padding: 0 26px;
  border-top: 1px solid var(--rv-line);
}
.reviews-site-v2 .rv-hero-next > strong {
  align-self: center;
  color: #969a97;
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.reviews-site-v2 .rv-hero-next a {
  display: grid;
  grid-template-columns: 28px 56px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 96px;
  padding: 12px 18px;
  border-left: 1px solid var(--rv-line);
  color: var(--rv-ink);
  text-decoration: none;
}
.reviews-site-v2 .rv-hero-next a > span:first-child { color: #9ca09d; font: 400 17px/1 var(--rv-serif); }
.reviews-site-v2 .rv-hero-next a > img { width: 52px; height: 64px; object-fit: contain; }
.reviews-site-v2 .rv-hero-next a > span:nth-child(3) { display: grid; min-width: 0; }
.reviews-site-v2 .rv-hero-next b,
.reviews-site-v2 .rv-hero-next small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reviews-site-v2 .rv-hero-next small { margin-top: 5px; color: #a0a4a1; }
.reviews-site-v2 .rv-hero-next .app-score-ring { width: 40px !important; height: 40px !important; }

.reviews-site-v2 .rv-proof-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: calc(100% - 60px);
  max-width: var(--rv-width);
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: #fff;
}
.reviews-site-v2 .rv-proof-band > span {
  display: flex;
  align-items: baseline;
  gap: 11px;
  min-height: 112px;
  padding: 32px;
  border-right: 1px solid var(--rv-line);
  color: #777c79;
  font-size: 13px;
}
.reviews-site-v2 .rv-proof-band > span:last-child { border-right: 0; }
.reviews-site-v2 .rv-proof-band strong { color: var(--rv-ink); font: 400 32px/1 var(--rv-serif); }

.reviews-site-v2 .rv-section { max-width: var(--rv-width); padding: 88px 30px; }
.reviews-site-v2 .rv-section-heading { align-items: flex-end; margin-bottom: 38px; }
.reviews-site-v2 .rv-section-heading h2,
.reviews-site-v2 .rv-related-paths h2 { font-size: 52px; line-height: 1; }
.reviews-site-v2 .rv-section-heading > a { color: var(--rv-ink); font-size: 13px; font-weight: 750; }

.reviews-site-v2 .rv-trending-meta { margin-bottom: 14px; }
.reviews-site-v2 .rv-trending-updated { color: #989c99; font-size: 12px; }
.reviews-site-v2 .rv-trending-tabs {
  max-width: 720px;
  margin-bottom: 48px;
  padding: 6px;
  border: 1px solid rgba(10, 11, 10, 0.07);
  border-radius: 26px;
  background: #f5f6f5;
}
.reviews-site-v2 .rv-trending-tabs button {
  min-height: 58px;
  border: 0 !important;
  border-radius: 20px;
  background: transparent !important;
}
.reviews-site-v2 .rv-trending-tabs button.is-active {
  background: #fff !important;
  box-shadow: 0 7px 20px rgba(18, 24, 20, 0.08);
}
.reviews-site-v2 .rv-trending-tabs img { width: 36px; height: 36px; }
.reviews-site-v2 .rv-live-heading { grid-template-columns: 76px minmax(0, 1fr); max-width: 920px; margin-bottom: 34px; }
.reviews-site-v2 .rv-live-heading > img {
  width: 76px;
  height: 76px;
  padding: 10px;
  border: 1px solid var(--rv-line);
  background: #f8f8f5;
}
.reviews-site-v2 .rv-live-heading h2 { font-size: 50px; }
.reviews-site-v2 .rv-live-heading p:last-child { font-size: 16px; }
.reviews-site-v2 .rv-trending-list { gap: 16px; }
.reviews-site-v2 .rv-trending-list a {
  grid-template-columns: 50px 82px minmax(0, 1fr) auto;
  min-height: 130px;
  padding: 14px 18px;
  border: 1px solid rgba(10, 11, 10, 0.075);
  border-radius: 22px;
  box-shadow: 0 10px 28px rgba(18, 24, 20, 0.055);
}
.reviews-site-v2 .rv-trending-list a:hover { border-color: rgba(10, 11, 10, 0.12); box-shadow: var(--rv-app-shadow-hover); }
.reviews-site-v2 .rv-trend-rank { font-size: 29px; }
.reviews-site-v2 .rv-trend-product { width: 78px; height: 92px; }
.reviews-site-v2 .rv-trend-copy strong { font-size: 17px; }
.reviews-site-v2 .rv-trend-copy small { font-size: 13px; }
.reviews-site-v2 .rv-trend-scores .app-score-ring { width: 48px !important; height: 48px !important; }

.reviews-site-v2 .rv-ranking-section .top-picks-parent-row { gap: 12px; }
.reviews-site-v2 .rv-ranking-section .top-picks-parent {
  min-height: 74px;
  border: 1px solid rgba(10, 11, 10, 0.07);
  border-radius: 22px;
  background: #f7f8f7;
  color: #777c79;
}
.reviews-site-v2 .rv-ranking-section .top-picks-parent.is-active {
  border-color: rgba(34, 154, 92, 0.22);
  background: #fff;
  color: var(--rv-ink);
  box-shadow: 0 12px 30px rgba(34, 154, 92, 0.1);
}
.reviews-site-v2 .rv-ranking-section .top-picks-parent-icon,
.reviews-site-v2 .rv-ranking-section .top-picks-parent-icon img { width: 42px; height: 42px; }
.reviews-site-v2 .rv-ranking-section .product-rail-block { margin-top: 62px; }
.reviews-site-v2 .rv-ranking-section .rail-heading h3 { font-size: 38px !important; }
.reviews-site-v2 .rv-ranking-section .product-rail {
  display: flex;
  gap: 22px !important;
  padding: 8px 4px 24px !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.reviews-site-v2 .rv-ranking-section .rail-card {
  flex: 0 0 216px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  scroll-snap-align: start;
}
.reviews-site-v2 .rv-ranking-section .rail-art {
  height: 226px !important;
  min-height: 226px !important;
  max-height: 226px !important;
  border: 1px solid rgba(10, 11, 10, 0.07);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(18, 24, 20, 0.07);
}
.reviews-site-v2 .rv-ranking-section .rail-art img { max-width: 82% !important; max-height: 184px !important; }
.reviews-site-v2 .rv-ranking-section .product-rank-bubble,
.reviews-site-v2 .product-card .product-rank-bubble {
  width: 34px !important;
  height: 34px !important;
  font-size: 17px !important;
}
.reviews-site-v2 .rv-ranking-section .rail-card h4 {
  min-height: 46px !important;
  margin: 16px 3px 4px;
  font-size: 16px !important;
}
.reviews-site-v2 .rv-ranking-section .rail-card > p { margin-left: 3px; font-size: 13px !important; }
.reviews-site-v2 .rv-ranking-section .rail-score-pair { margin-left: 3px; }

.reviews-site-v2 .rv-score-story { border: 0; background: #f4f6f4; }
.reviews-site-v2 .rv-score-story-inner { max-width: var(--rv-width); padding: 96px 30px; }
.reviews-site-v2 .rv-score-story h2 { font-size: 64px; }
.reviews-site-v2 .rv-score-explainer article {
  padding: 30px;
  border: 1px solid rgba(10, 11, 10, 0.07);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(18, 24, 20, 0.06);
}
.reviews-site-v2 .rv-score-explainer h3 { font-size: 28px; }

.reviews-site-v2 .rv-authority-band {
  display: grid;
  grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr);
  gap: clamp(56px, 8vw, 120px);
  width: 100%;
  max-width: var(--rv-width);
  margin: 0 auto;
  padding: 96px 30px;
}
.reviews-site-v2 .rv-authority-intro h2 {
  max-width: 430px;
  margin: 10px 0 20px;
  font: 400 62px/0.95 var(--rv-serif);
}
.reviews-site-v2 .rv-authority-intro > p:last-child { max-width: 460px; color: #737875; font-size: 16px; line-height: 1.65; }
.reviews-site-v2 .rv-authority-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px; }
.reviews-site-v2 .rv-authority-columns > div { border-top: 1px solid #cfd3d0; }
.reviews-site-v2 .rv-authority-columns > div > span {
  display: block;
  padding: 17px 0;
  color: var(--rv-green);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.reviews-site-v2 .rv-authority-columns a {
  display: grid;
  gap: 7px;
  padding: 22px 0;
  border-top: 1px solid var(--rv-line);
  color: var(--rv-ink);
  text-decoration: none;
}
.reviews-site-v2 .rv-authority-columns a::after { content: '→'; grid-area: 1 / 2 / 3 / 3; align-self: center; color: var(--rv-green); font-size: 18px; }
.reviews-site-v2 .rv-authority-columns strong { font-size: 15px; line-height: 1.35; }
.reviews-site-v2 .rv-authority-columns small { color: #858a87; font-size: 11px; line-height: 1.4; }

.reviews-site-v2 .product-search-answer {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: 56px;
  padding-top: 48px;
  padding-bottom: 48px;
  border-top: 1px solid #d9ddda;
  border-bottom: 1px solid #d9ddda;
}

.reviews-site-v2 .product-search-answer h2 {
  max-width: 560px;
  margin: 8px 0 0;
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(36px, 4vw, 58px);
  font-weight: 400;
  line-height: 1.02;
}

.reviews-site-v2 .product-search-answer-copy > p {
  margin: 0;
  color: #222724;
  font-size: 18px;
  line-height: 1.65;
}

.reviews-site-v2 .product-search-answer-copy small {
  display: block;
  margin-top: 16px;
  color: #747a76;
  font-size: 12px;
  line-height: 1.5;
}

.reviews-site-v2 .product-search-answer-copy nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 22px;
}

.reviews-site-v2 .product-search-answer-copy nav a {
  color: #111;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: #26a269;
  text-underline-offset: 4px;
}

.reviews-site-v2 .rv-product-grid,
.reviews-site-v2 .rv-search-results-section .product-grid,
.reviews-site-v2 .rv-archive-page .product-grid,
.reviews-site-v2 .rv-product-page .product-grid { gap: 18px; }
.reviews-site-v2 .rv-loved-section .rv-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.reviews-site-v2 .product-card {
  grid-template-columns: 142px minmax(0, 1fr);
  min-height: 204px;
  border: 1px solid rgba(10, 11, 10, 0.07);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(18, 24, 20, 0.06);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.reviews-site-v2 .product-card:hover { transform: translateY(-3px); box-shadow: var(--rv-app-shadow-hover); }
.reviews-site-v2 .product-float-zone { background: #f7f8f7; }
.reviews-site-v2 .product-float-zone > img { height: 148px; }
.reviews-site-v2 .product-card-copy { padding: 22px 18px; }
.reviews-site-v2 .product-card-copy h3 { font-size: 17px; }
.reviews-site-v2 .product-card-copy .app-score-pair { gap: 7px; }

.reviews-site-v2 .rv-download-band {
  grid-template-columns: 120px minmax(0, 1fr) auto;
  max-width: 1220px;
  margin-bottom: 100px;
  padding: 34px 38px;
  border: 1px solid rgba(10, 11, 10, 0.07);
  border-radius: 26px;
  background: #fff;
  box-shadow: var(--rv-app-shadow);
}
.reviews-site-v2 .rv-download-band-mascot { width: 120px; height: 120px; }
.reviews-site-v2 .rv-download-band h2 { font-size: 40px; }

.reviews-site-v2 .rv-archive-page { background: #fff; }
.reviews-site-v2 .rv-archive-hero {
  max-width: var(--rv-width);
  padding: 64px 30px 54px;
  border-bottom: 0;
}
.reviews-site-v2 .rv-archive-hero h1 { font-size: 68px; }
.reviews-site-v2 .rv-archive-hero > p:last-of-type { max-width: 860px; font-size: 19px; }
.reviews-site-v2 .rv-search-hero .rv-mascot-note { margin-bottom: 34px; }
.reviews-site-v2 .category-archive-hero .rv-mascot-note { margin-bottom: 34px; }
.reviews-site-v2 .section-shell { max-width: var(--rv-width); padding: 72px 30px; }
.reviews-site-v2 .section-heading h2 { font-size: 46px; }
.reviews-site-v2 .seo-scoreboard { gap: 16px; padding-top: 8px; }
.reviews-site-v2 .seo-leader-card {
  grid-template-columns: 88px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 176px;
  padding: 24px;
  border: 1px solid rgba(10, 11, 10, 0.07);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(18, 24, 20, 0.06);
}
.reviews-site-v2 .seo-leader-image { width: 84px; height: 112px; object-fit: contain; }
.reviews-site-v2 .seo-leader-copy { display: grid; min-width: 0; }
.reviews-site-v2 .seo-leader-copy small {
  margin-bottom: 10px;
  color: var(--rv-green);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.reviews-site-v2 .seo-leader-copy strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 20px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.reviews-site-v2 .seo-leader-copy em {
  overflow: hidden;
  margin-top: 7px;
  color: #9a9e9b;
  font: 600 12px/1.2 var(--rv-sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reviews-site-v2 .seo-leader-scores { display: flex; gap: 5px; }
.reviews-site-v2 .seo-leader-scores .app-score-ring { width: 42px !important; height: 42px !important; }
.reviews-site-v2 .category-updated {
  display: block;
  margin-top: 18px;
  color: #777c79;
  font-size: 12px;
  font-weight: 700;
}
.reviews-site-v2 .category-benchmark-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 150px)) minmax(280px, 1fr);
  align-items: end;
  gap: 28px;
  padding-top: 34px;
  padding-bottom: 54px;
  border-bottom: 1px solid var(--rv-line);
}
.reviews-site-v2 .category-benchmark-band > div {
  display: grid;
  gap: 7px;
}
.reviews-site-v2 .category-benchmark-band strong {
  color: var(--rv-ink);
  font: 400 48px/0.9 var(--rv-serif);
}
.reviews-site-v2 .category-benchmark-band span {
  max-width: 130px;
  color: #777c79;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}
.reviews-site-v2 .category-benchmark-band > p {
  max-width: 520px;
  margin: 0 0 2px auto;
  color: #454a47;
  font-size: 16px;
  line-height: 1.65;
}
.reviews-site-v2 .category-editorial-grid,
.reviews-site-v2 .category-ingredient-study,
.reviews-site-v2 .category-faq-section {
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(50px, 8vw, 120px);
  align-items: start;
}
.reviews-site-v2 .category-editorial-grid h2,
.reviews-site-v2 .category-ingredient-study h2,
.reviews-site-v2 .category-comparison-section h2,
.reviews-site-v2 .category-faq-section h2 {
  margin: 8px 0 18px;
  font: 400 clamp(38px, 5vw, 58px)/0.98 var(--rv-serif);
}
.reviews-site-v2 .category-editorial-grid > div > p:last-child,
.reviews-site-v2 .category-ingredient-study > div:first-child > p:last-child {
  max-width: 540px;
  color: #717673;
  font-size: 16px;
  line-height: 1.7;
}
.reviews-site-v2 .category-editorial-grid ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: comparison-lens;
  border-top: 1px solid var(--rv-line);
}
.reviews-site-v2 .category-editorial-grid li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rv-line);
  color: var(--rv-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  counter-increment: comparison-lens;
}
.reviews-site-v2 .category-editorial-grid li::before {
  content: counter(comparison-lens, decimal-leading-zero);
  color: var(--rv-green);
  font: 400 22px/1 var(--rv-serif);
}
.reviews-site-v2 .category-ingredient-study {
  border-top: 1px solid var(--rv-line);
  border-bottom: 1px solid var(--rv-line);
}
.reviews-site-v2 .category-ingredient-study > div:last-child {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--rv-line);
}
.reviews-site-v2 .category-ingredient-study > div:last-child > a,
.reviews-site-v2 .category-ingredient-study > div:last-child > div {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 18px 16px 18px 0;
  border-bottom: 1px solid var(--rv-line);
  color: var(--rv-ink);
  text-decoration: none;
}
.reviews-site-v2 .category-ingredient-study > div:last-child > :nth-child(odd) {
  border-right: 1px solid var(--rv-line);
}
.reviews-site-v2 .category-ingredient-study > div:last-child > :nth-child(even) { padding-left: 16px; }
.reviews-site-v2 .category-ingredient-study strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reviews-site-v2 .category-ingredient-study span { color: #8a8f8c; font-size: 11px; font-weight: 700; }
.reviews-site-v2 .category-comparison-section { padding-top: 88px; }
.reviews-site-v2 .category-comparison-table {
  width: 100%;
  overflow: hidden;
  border-top: 1px solid #cfd3d0;
}
.reviews-site-v2 .category-comparison-table [role="row"] {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) minmax(130px, .8fr) 82px 82px minmax(170px, 1fr);
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 17px 12px;
  border-bottom: 1px solid var(--rv-line);
  color: var(--rv-ink);
  text-decoration: none;
}
.reviews-site-v2 .category-comparison-table > div:first-child {
  color: #747976;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.reviews-site-v2 .category-comparison-table > a:hover { background: #f7f8f7; }
.reviews-site-v2 .category-comparison-table [role="cell"] {
  overflow: hidden;
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reviews-site-v2 .category-comparison-table [role="cell"]:first-child { font-weight: 800; }
.reviews-site-v2 .category-comparison-table [role="cell"]:nth-child(3),
.reviews-site-v2 .category-comparison-table [role="cell"]:nth-child(4) {
  color: var(--rv-green);
  font: 400 24px/1 var(--rv-serif);
}
.reviews-site-v2 .category-comparison-table [role="cell"]:last-child { color: #7d827f; font-size: 11px; }
.reviews-site-v2 .category-faq-section { border-top: 1px solid var(--rv-line); }
.reviews-site-v2 .category-faq-section > div:last-child { border-top: 1px solid var(--rv-line); }
.reviews-site-v2 .category-faq-section article { padding: 24px 0; border-bottom: 1px solid var(--rv-line); }
.reviews-site-v2 .category-faq-section h3 { margin: 0 0 9px; font-size: 16px; line-height: 1.35; }
.reviews-site-v2 .category-faq-section article p { margin: 0; color: #747976; font-size: 14px; line-height: 1.65; }
.reviews-site-v2 .category-sources {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 30px;
  padding-top: 30px;
  padding-bottom: 30px;
  border-top: 1px solid var(--rv-line);
  border-bottom: 1px solid var(--rv-line);
}
.reviews-site-v2 .category-sources > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 24px; }
.reviews-site-v2 .category-sources a { color: #5d625f; font-size: 12px; font-weight: 700; text-underline-offset: 4px; }
.reviews-site-v2 .app-download-cta {
  padding: 30px;
  border: 1px solid rgba(10, 11, 10, 0.07);
  border-radius: 24px;
  background: #f6f7f6;
}
.reviews-site-v2 .app-download-button { border-radius: 24px !important; }
.reviews-site-v2 .seo-link-panel { border-radius: 24px; }

.reviews-site-v2 .rv-search-results-section { padding-top: 44px; }
.reviews-site-v2 .search-results-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
.reviews-site-v2 .search-result-card {
  display: grid !important;
  grid-template-columns: 38px 92px minmax(0, 1fr) auto !important;
  align-items: center;
  gap: 14px;
  min-height: 132px !important;
  padding: 14px 18px !important;
  border-radius: 22px !important;
}
.reviews-site-v2 .search-result-card .rank-badge {
  position: static;
  display: block;
  color: #7f8481;
  font: 400 22px/1 var(--rv-serif);
}
.reviews-site-v2 .search-result-card > img {
  width: 88px !important;
  height: 100px !important;
  border-radius: 0 !important;
  background: transparent !important;
  object-fit: contain;
}
.reviews-site-v2 .search-result-copy { display: grid !important; min-width: 0; margin: 0 !important; }
.reviews-site-v2 .search-result-copy strong {
  display: -webkit-box;
  min-height: 0 !important;
  overflow: hidden;
  margin: 0 !important;
  font-size: 16px;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.reviews-site-v2 .search-result-copy span {
  overflow: hidden;
  margin-top: 6px;
  color: #9a9e9b;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reviews-site-v2 .search-result-card > .app-score-pair { display: flex; gap: 5px; margin: 0 !important; }
.reviews-site-v2 .search-result-card .app-score-ring { width: 44px !important; height: 44px !important; }

.reviews-site-v2 .rv-product-page .app-product-hero,
.reviews-site-v2 .rv-product-page .product-hero.app-product-hero {
  max-width: var(--rv-width) !important;
  padding: 60px 30px 76px !important;
  border-bottom: 0 !important;
}
.reviews-site-v2 .rv-product-page .app-product-header { grid-template-columns: minmax(340px, .82fr) minmax(0, 1.18fr); gap: 14px 76px; }
.reviews-site-v2 .rv-product-page .app-product-image {
  height: 540px;
  border: 1px solid rgba(10, 11, 10, 0.07);
  border-radius: 26px;
  background: #f7f8f7;
  box-shadow: var(--rv-app-shadow);
}
.reviews-site-v2 .rv-product-page .app-product-header h1 { font-size: 58px; }
.reviews-site-v2 .rv-product-page .app-product-score-pair .app-score-ring { width: 78px !important; height: 78px !important; }
.reviews-site-v2 .rv-product-page .app-product-pantry-cta { min-height: 60px; border-radius: 20px; }
.reviews-site-v2 .rv-product-page .app-detail-card,
.reviews-site-v2 .rv-product-page .product-faq-grid article { border-radius: 22px; box-shadow: 0 12px 32px rgba(18, 24, 20, 0.055); }

.reviews-site-v2 .site-footer {
  padding: 78px max(30px, calc((100% - var(--rv-width)) / 2 + 30px)) 28px;
  border-top: 1px solid var(--rv-line);
  background: #fff;
  color: var(--rv-ink);
}
.reviews-site-v2 .site-footer-cta {
  grid-template-columns: 112px minmax(0, 1fr) auto;
  gap: 30px;
  padding-bottom: 58px;
  border-bottom: 1px solid var(--rv-line);
}
.reviews-site-v2 .site-footer-mascot { width: 112px; height: 112px; }
.reviews-site-v2 .site-footer .eyebrow { color: var(--rv-green); }
.reviews-site-v2 .site-footer-cta h2 { color: var(--rv-ink); font-size: 42px; }
.reviews-site-v2 .site-footer-cta p:last-child { color: #7d827f; }
.reviews-site-v2 .footer-waitlist-cta {
  min-height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: 26px !important;
  background: #090a09 !important;
  color: #fff;
}
.reviews-site-v2 .site-footer-links { border-bottom: 0; }
.reviews-site-v2 .site-footer-links { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 42px; }
.reviews-site-v2 .site-footer-links h3 { color: var(--rv-ink); }
.reviews-site-v2 .site-footer-links a { color: #777c79; }
.reviews-site-v2 .site-footer-links a:hover { color: var(--rv-green); }
.reviews-site-v2 .rv-footer-bottom { border-top: 1px solid var(--rv-line); color: #999d9a; }

@keyframes rv-app-enter {
  from { opacity: 0; transform: translateY(12px); filter: blur(5px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes rv-scorecard-enter {
  from { opacity: 0; transform: translateY(18px) scale(0.985); filter: blur(7px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@media (max-width: 1040px) {
  .reviews-site-v2 .rv-header .rv-header-tabs a { padding: 0 12px; }
  .reviews-site-v2 .rv-hero h1 { font-size: 68px; }
  .reviews-site-v2 .rv-hero-product-layout { grid-template-columns: minmax(270px, .72fr) minmax(0, 1.28fr); }
  .reviews-site-v2 .rv-hero-product-info { padding: 40px 34px; }
  .reviews-site-v2 .rv-hero-product-info h2 { font-size: 40px; }
  .reviews-site-v2 .rv-hero-next { grid-template-columns: 128px repeat(2, minmax(0, 1fr)); }
  .reviews-site-v2 .rv-hero-next a { grid-template-columns: 24px 50px minmax(0, 1fr); }
  .reviews-site-v2 .rv-hero-next a > .app-score-ring { display: none; }
  .reviews-site-v2 .rv-loved-section .rv-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reviews-site-v2 .rv-authority-band { grid-template-columns: 1fr; gap: 48px; }
  .reviews-site-v2 .site-footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reviews-site-v2 .search-results-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 760px) {
  .reviews-site-v2 .product-search-answer {
    grid-template-columns: 1fr;
    gap: 26px;
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .reviews-site-v2 .product-search-answer h2 { font-size: 40px; }
  .reviews-site-v2 .product-search-answer-copy > p { font-size: 16px; }
  .reviews-site-v2 .app-install-banner {
    display: block;
    padding: 8px 14px;
    border-bottom: 1px solid var(--rv-line);
    background: #fff;
  }
  .reviews-site-v2 .site-header.rv-header { min-height: 64px !important; padding: 0 16px !important; }
  .reviews-site-v2 .rv-header-inner { min-height: 63px; }
  .reviews-site-v2 .rv-header .brand-link { width: 112px; height: 42px; }
  .reviews-site-v2 .rv-header .brand-logo { width: 110px !important; max-height: 38px !important; }
  .reviews-site-v2 .rv-header-tabs { display: none; }
  .reviews-site-v2 .rv-header nav { gap: 0 !important; }
  .reviews-site-v2 .rv-header .nav-cta { min-height: 40px !important; padding: 0 14px !important; }
  .reviews-site-v2 .rv-header .nav-cta span { font-size: 12px !important; }

  .reviews-site-v2 .rv-hero-inner { padding: 22px 18px 54px; }
  .reviews-site-v2 .rv-hero-appbar { align-items: flex-start; margin-bottom: 38px; }
  .reviews-site-v2 .rv-home-wordmark { width: 106px; margin-top: 9px; }
  .reviews-site-v2 .rv-hero-appbar .rv-mascot-note { max-width: 232px; min-height: 54px; font-size: 11px; line-height: 1.3; }
  .reviews-site-v2 .rv-hero-mascot { width: 44px; height: 44px; }
  .reviews-site-v2 .rv-hero h1,
  .reviews-site-v2 .rv-archive-hero h1 { font-size: 48px; line-height: 1; }
  .reviews-site-v2 .rv-hero-lede { margin: 18px 0 24px; font-size: 17px; }
  .reviews-site-v2 .product-search { grid-template-columns: 20px minmax(0, 1fr) auto !important; min-height: 58px !important; padding: 6px 7px 6px 16px !important; border-radius: 18px !important; }
  .reviews-site-v2 .product-search button { width: 76px !important; min-width: 76px !important; min-height: 44px !important; border-radius: 14px !important; }
  .reviews-site-v2 .rv-hero-actions { flex-direction: row; align-items: center; }
  .reviews-site-v2 .rv-hero-product { display: block; margin-top: 42px; border-radius: 24px; }
  .reviews-site-v2 .rv-hero-product-label { padding: 18px; }
  .reviews-site-v2 .rv-hero-product-layout { grid-template-columns: 136px minmax(0, 1fr); min-height: 250px; }
  .reviews-site-v2 .rv-hero-product-stage { height: 250px !important; padding: 18px; }
  .reviews-site-v2 .rv-hero-product-stage > img { width: 100%; height: 88%; }
  .reviews-site-v2 .rv-hero-product-info { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px 18px; }
  .reviews-site-v2 .rv-hero-product-info h2 { display: -webkit-box; overflow: hidden; font-size: 28px; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
  .reviews-site-v2 .rv-hero-product-copy > span { font-size: 11px; }
  .reviews-site-v2 .rv-hero-scores { gap: 9px; }
  .reviews-site-v2 .rv-hero-scores .app-score-ring { width: 56px !important; height: 56px !important; }
  .reviews-site-v2 .rv-scorecard-link { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 15px; font-size: 12px; }
  .reviews-site-v2 .rv-hero-next { grid-template-columns: 1fr; padding: 0; }
  .reviews-site-v2 .rv-hero-next > strong { padding: 16px 18px 8px; }
  .reviews-site-v2 .rv-hero-next a { grid-template-columns: 28px 52px minmax(0, 1fr) 42px; min-height: 84px; padding: 10px 18px; border-top: 1px solid var(--rv-line); border-left: 0; }
  .reviews-site-v2 .rv-hero-next a > .app-score-ring { display: grid; }

  .reviews-site-v2 .rv-proof-band { display: flex; width: 100%; overflow-x: auto; padding: 0 18px; }
  .reviews-site-v2 .rv-proof-band > span { flex: 0 0 255px; min-height: 92px; padding: 25px 18px; }
  .reviews-site-v2 .rv-section { padding: 68px 18px; }
  .reviews-site-v2 .rv-authority-band { padding: 68px 18px; }
  .reviews-site-v2 .rv-authority-intro h2 { font-size: 48px; }
  .reviews-site-v2 .rv-authority-columns { grid-template-columns: 1fr; gap: 28px; }
  .reviews-site-v2 .site-footer-links > div:last-child { grid-column: auto; }
  .reviews-site-v2 .rv-section-heading { align-items: flex-start; }
  .reviews-site-v2 .rv-section-heading h2,
  .reviews-site-v2 .rv-related-paths h2 { font-size: 40px; }
  .reviews-site-v2 .rv-trending-tabs { border-radius: 22px; }
  .reviews-site-v2 .rv-trending-tabs button { min-height: 54px; border-radius: 17px; font-size: 12px; }
  .reviews-site-v2 .rv-trending-tabs img { width: 30px; height: 30px; }
  .reviews-site-v2 .rv-live-heading { grid-template-columns: 60px minmax(0, 1fr); gap: 14px; }
  .reviews-site-v2 .rv-live-heading > img { width: 60px; height: 60px; }
  .reviews-site-v2 .rv-live-heading h2 { font-size: 34px; }
  .reviews-site-v2 .rv-trending-list { grid-template-columns: 1fr; }
  .reviews-site-v2 .rv-trending-list a { grid-template-columns: 34px 62px minmax(0, 1fr) auto; min-height: 106px; padding: 10px 12px; border-radius: 20px; }
  .reviews-site-v2 .rv-trend-rank { font-size: 22px; }
  .reviews-site-v2 .rv-trend-product { width: 58px; height: 72px; }
  .reviews-site-v2 .rv-trend-copy strong { font-size: 15px; }
  .reviews-site-v2 .rv-trend-copy small { font-size: 11px; }
  .reviews-site-v2 .rv-trend-scores { gap: 3px; }
  .reviews-site-v2 .rv-trend-scores .app-score-ring { width: 39px !important; height: 39px !important; }

  .reviews-site-v2 .rv-ranking-section .top-picks-parent { flex: 0 0 126px; min-height: 66px; border-radius: 20px; }
  .reviews-site-v2 .rv-ranking-section .product-rail { margin-right: -18px; }
  .reviews-site-v2 .rv-ranking-section .rail-card { flex-basis: 188px; }
  .reviews-site-v2 .rv-ranking-section .rail-art { height: 198px !important; min-height: 198px !important; max-height: 198px !important; border-radius: 20px; }
  .reviews-site-v2 .rv-score-story-inner { padding: 68px 18px; }
  .reviews-site-v2 .rv-score-story h2 { font-size: 48px; }
  .reviews-site-v2 .rv-score-explainer article { border-radius: 22px; }
  .reviews-site-v2 .rv-loved-section .rv-product-grid,
  .reviews-site-v2 .rv-product-grid,
  .reviews-site-v2 .rv-archive-page .product-grid { grid-template-columns: 1fr; }
  .reviews-site-v2 .product-card { grid-template-columns: 124px minmax(0, 1fr); min-height: 178px; border-radius: 20px; }
  .reviews-site-v2 .product-float-zone > img { height: 126px; }
  .reviews-site-v2 .rv-download-band { grid-template-columns: 82px minmax(0, 1fr); width: calc(100% - 36px); padding: 24px 20px; border-radius: 24px; }
  .reviews-site-v2 .rv-download-band-mascot { width: 82px; height: 82px; }
  .reviews-site-v2 .rv-download-band h2 { font-size: 30px; }

  .reviews-site-v2 .rv-archive-hero { padding: 50px 18px 42px; }
  .reviews-site-v2 .rv-archive-hero > p:last-of-type { font-size: 16px; }
  .reviews-site-v2 .section-shell { padding: 56px 18px; }
  .reviews-site-v2 .section-heading h2 { font-size: 38px; }
  .reviews-site-v2 .seo-leader-card { min-height: 146px; border-radius: 20px; }
  .reviews-site-v2 .app-download-cta { border-radius: 22px; }
  .reviews-site-v2 .search-results-grid { grid-template-columns: 1fr !important; }
  .reviews-site-v2 .search-result-card { grid-template-columns: 30px 74px minmax(0, 1fr) auto !important; gap: 9px; min-height: 112px !important; padding: 10px 12px !important; border-radius: 20px !important; }
  .reviews-site-v2 .search-result-card > img { width: 72px !important; height: 86px !important; }
  .reviews-site-v2 .search-result-copy strong { font-size: 14px; }
  .reviews-site-v2 .search-result-card .app-score-ring { width: 38px !important; height: 38px !important; }

  .reviews-site-v2 .rv-product-page .app-product-hero,
  .reviews-site-v2 .rv-product-page .product-hero.app-product-hero { padding: 34px 18px 58px !important; }
  .reviews-site-v2 .rv-product-page .app-product-image { height: 250px !important; border-radius: 22px; box-shadow: 0 12px 34px rgba(18, 24, 20, 0.08); }
  .reviews-site-v2 .rv-product-page .app-product-header h1 { font-size: 34px !important; }
  .reviews-site-v2 .rv-product-page .app-product-score-pair .app-score-ring { width: 58px !important; height: 58px !important; }
  .reviews-site-v2 .rv-product-page .app-product-pantry-cta { border-radius: 18px; }

  .reviews-site-v2 .site-footer { padding: 58px 18px 24px; }
  .reviews-site-v2 .site-footer-cta { grid-template-columns: 78px minmax(0, 1fr); gap: 18px; }
  .reviews-site-v2 .site-footer-mascot { width: 78px; height: 78px; }
  .reviews-site-v2 .site-footer-cta h2 { font-size: 31px; }
  .reviews-site-v2 .site-footer-cta .footer-waitlist-cta { grid-column: 1 / -1; justify-content: center; }
}

@media (max-width: 430px) {
  .reviews-site-v2 .rv-hero-appbar { gap: 12px; }
  .reviews-site-v2 .rv-hero-appbar .rv-mascot-note { max-width: 215px; padding-right: 12px; }
  .reviews-site-v2 .rv-hero h1 { font-size: 44px; }
  .reviews-site-v2 .rv-text-link { font-size: 12px; }
  .reviews-site-v2 .rv-hero-product-layout { grid-template-columns: 124px minmax(0, 1fr); }
  .reviews-site-v2 .rv-hero-product-info { padding: 22px 14px; }
  .reviews-site-v2 .rv-hero-product-info h2 { font-size: 25px; }
  .reviews-site-v2 .rv-hero-scores .app-score-ring { width: 52px !important; height: 52px !important; }
  .reviews-site-v2 .rv-hero-next a { grid-template-columns: 24px 48px minmax(0, 1fr) 38px; padding-right: 12px; padding-left: 12px; }
  .reviews-site-v2 .search-result-card { grid-template-columns: 26px 66px minmax(0, 1fr) !important; }
  .reviews-site-v2 .search-result-card > img { width: 64px !important; }
  .reviews-site-v2 .search-result-card > .app-score-pair { grid-column: 3; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .reviews-site-v2 *,
  .reviews-site-v2 *::before,
  .reviews-site-v2 *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Consumer-site authority over the legacy app parity layer in globals.css. */
.reviews-site-v2 .rv-header,
.reviews-site-v2 .rv-header *,
.reviews-site-v2 .rv-home *,
.reviews-site-v2 .rv-archive-page *,
.reviews-site-v2 .rv-product-page *,
.reviews-site-v2 .site-footer,
.reviews-site-v2 .site-footer * {
  box-sizing: border-box;
}

.reviews-site-v2 .site-header.rv-header {
  width: 100% !important;
  max-width: none !important;
  min-height: 84px !important;
  margin: 0 !important;
  padding: 0 30px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(10, 11, 10, 0.07) !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 1px 16px rgba(10, 11, 10, 0.025) !important;
  backdrop-filter: blur(22px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.4) !important;
}

.reviews-site-v2 .rv-header .brand-logo {
  width: 154px !important;
  max-height: 48px !important;
}

.reviews-site-v2 .rv-header nav {
  gap: 18px !important;
}

.reviews-site-v2 .rv-header nav a:not(.nav-cta) {
  color: #454a47 !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

.reviews-site-v2 .rv-header .nav-cta,
.reviews-site-v2 .app-download-button,
.reviews-site-v2 .footer-waitlist-cta {
  min-height: 48px !important;
  border-radius: 24px !important;
  background: var(--rv-ink) !important;
  box-shadow: none !important;
  filter: none !important;
}

.reviews-site-v2 .rv-header .nav-cta span {
  font-family: var(--rv-sans) !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
  transform: none !important;
}

.reviews-site-v2 .rv-header .nav-cta .apple-mark {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  transform: none !important;
}

.reviews-site-v2 .rv-ranking-section .rail-heading h3 {
  font-size: 38px !important;
  line-height: 1.1 !important;
}

.reviews-site-v2 .rv-ranking-section .rail-heading a {
  color: var(--rv-ink) !important;
}

.reviews-site-v2 .rv-ranking-section .product-rail {
  gap: 22px !important;
  padding: 8px 4px 24px !important;
}

.reviews-site-v2 .rv-ranking-section .rail-card {
  gap: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.reviews-site-v2 .rv-ranking-section .rail-art {
  height: 226px !important;
  min-height: 226px !important;
  max-height: 226px !important;
}

.reviews-site-v2 .rv-ranking-section .rail-art img {
  max-width: 82% !important;
  max-height: 184px !important;
}

.reviews-site-v2 .rv-ranking-section .product-rank-bubble,
.reviews-site-v2 .product-card .product-rank-bubble {
  width: 34px !important;
  height: 34px !important;
  font-size: 17px !important;
  box-shadow: 0 2px 10px rgba(16, 19, 17, 0.1) !important;
}

.reviews-site-v2 .rv-ranking-section .rail-card h4 {
  min-height: 46px !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
}

.reviews-site-v2 .rv-ranking-section .rail-card > p {
  font-size: 13px !important;
}

.reviews-site-v2 .rv-product-page .app-product-hero,
.reviews-site-v2 .rv-product-page .product-hero.app-product-hero {
  width: 100% !important;
  max-width: var(--rv-width) !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 1050px) {
  .reviews-site-v2 .rv-hero-inner {
    padding-top: 30px;
    padding-bottom: 64px;
  }

  .reviews-site-v2 .rv-hero-product-stage {
    height: 430px;
  }
}

@media (max-width: 720px) {
  .reviews-site-v2 .site-header.rv-header {
    width: 100% !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    border-bottom: 1px solid var(--rv-line) !important;
    background: #fff !important;
  }

  .reviews-site-v2 .rv-header .brand-logo {
    width: 110px !important;
    max-height: 38px !important;
  }

  .reviews-site-v2 .rv-header nav {
    gap: 0 !important;
  }

  .reviews-site-v2 .rv-header .nav-cta {
    width: auto !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 20px !important;
    overflow: visible !important;
    transform: none !important;
    -webkit-mask-image: none !important;
  }

  .reviews-site-v2 .rv-header .nav-cta .apple-mark {
    display: none !important;
  }

  .reviews-site-v2 .rv-header .nav-cta span {
    font-size: 12px !important;
  }

  .reviews-site-v2 .product-search {
    grid-template-columns: 20px minmax(0, 1fr) auto !important;
    min-height: 58px !important;
    padding: 6px 7px 6px 16px !important;
    border-radius: 18px !important;
  }

  .reviews-site-v2 .product-search button {
    grid-column: auto !important;
    width: 76px !important;
    min-width: 76px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 10px !important;
    border-radius: 14px !important;
    background: #090a09 !important;
    font-size: 12px !important;
  }

  .reviews-site-v2 .product-search button::after {
    display: none !important;
    content: none !important;
  }

  .reviews-site-v2 .rv-hero-inner {
    padding-top: 22px;
    padding-bottom: 54px;
  }

  .reviews-site-v2 .rv-hero-product {
    display: block;
  }

  .reviews-site-v2 .rv-product-page .app-product-header {
    display: grid !important;
    grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr) !important;
    grid-template-rows: auto auto auto auto auto !important;
    align-items: center !important;
    gap: 8px 14px !important;
    width: 100% !important;
  }

  .reviews-site-v2 .rv-product-page .app-product-image {
    grid-column: 1 !important;
    grid-row: 1 / 4 !important;
    width: 100% !important;
    height: 240px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 16px !important;
    transform: none !important;
  }

  .reviews-site-v2 .rv-product-page .app-product-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    transform: none !important;
  }

  .reviews-site-v2 .rv-product-page .app-product-brand {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .reviews-site-v2 .rv-product-page .app-product-header h1 {
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    font-size: 32px !important;
    line-height: 1.02 !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .reviews-site-v2 .rv-product-page .product-search-answer h2 {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .reviews-site-v2 .rv-product-page .app-product-score-pair {
    grid-column: 2 !important;
    grid-row: 3 !important;
    gap: 8px !important;
    margin: 10px 0 0 !important;
  }

  .reviews-site-v2 .rv-product-page .app-product-score-pair .app-score-ring {
    width: 56px !important;
    height: 56px !important;
  }

  .reviews-site-v2 .rv-product-page .app-product-pantry-cta {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    width: 100% !important;
    margin-top: 16px !important;
  }

  .reviews-site-v2 .rv-product-page .app-category-badge {
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
  }

  .reviews-site-v2 .rv-product-page .app-product-header-long {
    grid-template-columns: 1fr !important;
  }

  .reviews-site-v2 .rv-product-page .app-product-header-long .app-product-image {
    grid-column: 1 !important;
    grid-row: 1 !important;
    height: 220px !important;
    overflow: hidden !important;
  }

  .reviews-site-v2 .rv-product-page .app-product-header-long .app-product-image img {
    width: auto !important;
    height: 180px !important;
    max-width: 100% !important;
    max-height: 180px !important;
  }

  .reviews-site-v2 .rv-product-page .app-product-header-long .app-product-brand {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin-top: 10px;
  }

  .reviews-site-v2 .rv-product-page .app-product-header-long h1 {
    grid-column: 1 !important;
    grid-row: 3 !important;
    font-size: 34px !important;
    overflow-wrap: normal;
  }

  .reviews-site-v2 .rv-product-page .app-product-header-long .app-product-score-pair {
    grid-column: 1 !important;
    grid-row: 4 !important;
  }

  .reviews-site-v2 .rv-product-page .app-product-header-long .app-product-pantry-cta {
    grid-column: 1 !important;
    grid-row: 5 !important;
  }

  .reviews-site-v2 .rv-product-page .app-product-header-long .app-category-badge {
    grid-column: 1 !important;
    grid-row: 6 !important;
  }

  .reviews-site-v2 .app-download-mascot,
  .reviews-site-v2 .site-footer-mascot {
    overflow: hidden !important;
  }

  .reviews-site-v2 .rv-app-install-page {
    display: block;
    min-height: 0;
    padding: 28px 18px 0;
  }

  .reviews-site-v2 .rv-app-install-brand {
    margin-bottom: 24px;
  }

  .reviews-site-v2 .rv-app-install-page .rv-mascot-note {
    width: 100%;
    margin-bottom: 22px;
  }

  .reviews-site-v2 .rv-app-install-copy h1 {
    font-size: 43px;
    line-height: 1;
  }

  .reviews-site-v2 .rv-app-install-lede {
    margin: 18px 0 22px;
    font-size: 16px;
  }

  .reviews-site-v2 .rv-app-store-button {
    width: 100%;
  }

  .reviews-site-v2 .rv-app-hold-steps {
    margin-top: 26px;
  }

  .reviews-site-v2 .rv-app-hold-steps li {
    padding-right: 8px;
  }

  .reviews-site-v2 .rv-app-install-preview {
    height: 420px;
    margin: 34px -18px 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .reviews-site-v2 .support-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    padding-right: 18px;
    padding-left: 18px;
  }

  .reviews-site-v2 .support-intro,
  .reviews-site-v2 .support-form {
    min-width: 0;
    padding: 22px;
    border-radius: 8px;
  }
}

/* Final app-surface authority after the legacy compatibility rules above. */
.reviews-site-v2 .rv-header .rv-header-tabs a {
  min-height: 38px !important;
  padding: 0 15px !important;
  color: #6f7471 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.reviews-site-v2 .rv-hero-product-label span:first-child {
  color: var(--rv-green) !important;
  font: 800 11px/1.2 var(--rv-sans) !important;
  letter-spacing: 0.13em !important;
}
.reviews-site-v2 .rv-hero-product-stage {
  border: 0 !important;
  border-radius: 0 !important;
}
.reviews-site-v2 .rv-header .nav-cta,
.reviews-site-v2 .app-download-button,
.reviews-site-v2 .footer-waitlist-cta { border-radius: 24px !important; }
.reviews-site-v2 .rv-home .rv-product-grid,
.reviews-site-v2 .rv-archive-page:not(.rv-search-page) .section-shell > .product-grid,
.reviews-site-v2 .rv-product-page .product-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}
.reviews-site-v2 .rv-search-page .search-results-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
.reviews-site-v2 .seo-leader-copy {
  color: var(--rv-ink) !important;
  font-size: inherit !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.reviews-site-v2 footer.site-footer {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 78px max(30px, calc((100% - var(--rv-width)) / 2 + 30px)) 28px !important;
  border: 0 !important;
  border-top: 1px solid var(--rv-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

@media (max-width: 1040px) {
  .reviews-site-v2 .rv-home .rv-product-grid,
  .reviews-site-v2 .rv-archive-page:not(.rv-search-page) .section-shell > .product-grid,
  .reviews-site-v2 .rv-product-page .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .reviews-site-v2 .rv-search-page .search-results-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 760px) {
  .reviews-site-v2 .rv-header-tabs { display: none !important; }
  .reviews-site-v2 .rv-hero-inner { padding: 22px 18px 54px !important; }
  .reviews-site-v2 .rv-hero-product-stage { height: 250px !important; }
  .reviews-site-v2 .rv-hero-appbar .rv-mascot-note { margin-bottom: 0 !important; }
  .reviews-site-v2 .rv-ranking-section .rail-art {
    height: 198px !important;
    min-height: 198px !important;
    max-height: 198px !important;
  }
  .reviews-site-v2 .rv-ranking-section .rail-art img { max-height: 162px !important; }
  .reviews-site-v2 .rv-home .rv-product-grid,
  .reviews-site-v2 .rv-archive-page:not(.rv-search-page) .section-shell > .product-grid,
  .reviews-site-v2 .rv-product-page .product-grid,
  .reviews-site-v2 .rv-search-page .search-results-grid { grid-template-columns: 1fr !important; }
  .reviews-site-v2 footer.site-footer { padding: 58px 18px 24px !important; }
  .reviews-site-v2 .category-benchmark-band {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 10px;
    padding-top: 16px;
    padding-bottom: 38px;
  }
  .reviews-site-v2 .category-benchmark-band strong { font-size: 36px; }
  .reviews-site-v2 .category-benchmark-band span { font-size: 9px; }
  .reviews-site-v2 .category-benchmark-band > p { grid-column: 1 / -1; margin: 16px 0 0; font-size: 14px; }
  .reviews-site-v2 .category-editorial-grid,
  .reviews-site-v2 .category-ingredient-study,
  .reviews-site-v2 .category-faq-section { grid-template-columns: 1fr; gap: 34px; }
  .reviews-site-v2 .category-editorial-grid h2,
  .reviews-site-v2 .category-ingredient-study h2,
  .reviews-site-v2 .category-comparison-section h2,
  .reviews-site-v2 .category-faq-section h2 { font-size: 42px; }
  .reviews-site-v2 .category-ingredient-study > div:last-child { grid-template-columns: 1fr; }
  .reviews-site-v2 .category-ingredient-study > div:last-child > :nth-child(odd) { border-right: 0; }
  .reviews-site-v2 .category-ingredient-study > div:last-child > :nth-child(even) { padding-left: 0; }
  .reviews-site-v2 .category-comparison-section { overflow: hidden; padding-top: 58px; }
  .reviews-site-v2 .category-comparison-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .reviews-site-v2 .category-comparison-table [role="row"] {
    grid-template-columns: 190px 120px 70px 70px 160px;
    width: 690px;
    padding-right: 8px;
    padding-left: 8px;
  }
  .reviews-site-v2 .category-sources { align-items: flex-start; flex-direction: column; }
  .reviews-site-v2 .category-sources > div { justify-content: flex-start; }
}

/* App-faithful homepage and score system. */
.reviews-site-v2 .rv-app-hero {
  overflow: hidden;
  padding: 34px 24px 0;
  border-bottom: 1px solid #e7e9e7;
  background: #f5f6f5;
}

.reviews-site-v2 .rv-app-hero-copy {
  width: min(900px, 100%);
  margin: 0 auto;
  text-align: center;
}

.reviews-site-v2 .rv-app-mascot-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  margin-bottom: 16px;
  padding: 4px 17px 4px 4px;
  border: 1px solid rgba(17, 19, 18, 0.09);
  border-radius: 27px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(18, 24, 20, 0.055);
  color: #3e433f;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
}

.reviews-site-v2 .rv-app-hero-mascot {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px;
  overflow: hidden;
  border: 1px solid rgba(17, 19, 18, 0.08);
  border-radius: 50%;
  background: #fff;
  padding: 0;
}

.reviews-site-v2 .rv-app-hero-mascot .mascot-lottie-player {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transform: scale(1.45) !important;
}

.reviews-site-v2 .rv-app-hero .eyebrow {
  margin: 0 0 12px;
  color: #25935d;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.reviews-site-v2 .rv-app-hero h1 {
  max-width: 820px;
  margin: 0 auto;
  color: #080a09;
  font-family: var(--rv-serif);
  font-size: 84px;
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: 0;
}

.reviews-site-v2 .rv-app-hero-lede {
  max-width: 720px;
  margin: 17px auto 20px;
  color: #626763;
  font-size: 19px;
  line-height: 1.5;
}

.reviews-site-v2 .rv-app-hero .product-search-wrap {
  width: min(690px, 100%);
  margin: 0 auto;
  text-align: left;
}

.reviews-site-v2 .rv-app-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 18px;
}

.reviews-site-v2 .rv-app-screens-stage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 300px));
  justify-content: center;
  gap: 22px;
  width: min(1120px, 100%);
  height: 680px;
  margin: 24px auto 0;
  overflow: hidden;
}

.reviews-site-v2 .rv-app-hero-screen {
  width: 100%;
  margin: 0;
}

.reviews-site-v2 .rv-app-hero-screen img,
.reviews-site-v2 .rv-app-tour-screen img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(17, 19, 18, 0.08);
  border-radius: 26px;
  background: #f3f4f3;
  box-shadow: 0 24px 54px rgba(18, 24, 20, 0.13);
}

.reviews-site-v2 .rv-app-hero-screen-home,
.reviews-site-v2 .rv-app-hero-screen-score {
  margin-top: 54px;
}

.reviews-site-v2 .rv-app-tour {
  padding: 92px 0 88px;
  overflow: hidden;
  border-bottom: 1px solid #e7e9e7;
  background: #fff;
}

.reviews-site-v2 .rv-app-tour-heading {
  width: min(var(--rv-width), calc(100% - 48px));
  margin: 0 auto 38px;
}

.reviews-site-v2 .rv-app-tour-heading > p {
  max-width: 470px;
  margin: 0;
  color: #737874;
  font-size: 16px;
  line-height: 1.55;
}

.reviews-site-v2 .rv-app-tour-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(270px, 320px);
  gap: 20px;
  width: 100%;
  padding: 0 max(24px, calc((100% - var(--rv-width)) / 2));
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: 24px;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
}

.reviews-site-v2 .rv-app-tour-track::-webkit-scrollbar { display: none; }
.reviews-site-v2 .rv-app-tour-screen { margin: 0; scroll-snap-align: start; }

.reviews-site-v2 .app-native-score {
  --native-score-color: #229a5c;
  --native-score-size: 62px;
  position: relative;
  display: inline-grid;
  width: var(--native-score-size);
  height: var(--native-score-size);
  flex: 0 0 var(--native-score-size);
  place-items: center;
  border-radius: 50%;
}

.reviews-site-v2 .app-native-score-svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.reviews-site-v2 .app-native-score-fill {
  fill: color-mix(in srgb, var(--native-score-color) 6%, transparent);
}

.reviews-site-v2 .app-native-score-track,
.reviews-site-v2 .app-native-score-progress {
  fill: transparent;
  stroke-width: 4.48;
}

.reviews-site-v2 .app-native-score-track {
  stroke: color-mix(in srgb, var(--native-score-color) 10%, transparent);
  stroke-linecap: round;
}

.reviews-site-v2 .app-native-score-progress {
  stroke: var(--native-score-color);
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 32px 32px;
}

.reviews-site-v2 .app-native-score-value {
  position: absolute !important;
  inset: 0;
  z-index: 1;
  display: grid !important;
  grid-template-rows: calc(var(--native-score-size) * 0.18) calc(var(--native-score-size) * 0.32);
  row-gap: calc(var(--native-score-size) * 0.025);
  align-content: center;
  align-items: center;
  justify-content: center;
  justify-items: center;
  color: var(--native-score-color) !important;
  line-height: 1 !important;
}

.reviews-site-v2 .app-native-score-glyph {
  display: block !important;
  width: calc(var(--native-score-size) * 0.18) !important;
  height: calc(var(--native-score-size) * 0.18) !important;
  margin: 0 !important;
  fill: currentColor;
  color: inherit !important;
  overflow: visible;
}

.reviews-site-v2 .app-native-score-value strong {
  color: inherit !important;
  font-family: var(--rv-serif) !important;
  font-size: calc(var(--native-score-size) * 0.32) !important;
  font-weight: 400 !important;
  font-variant-numeric: tabular-nums;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.reviews-site-v2 .product-card .app-native-score,
.reviews-site-v2 .rail-card .app-native-score {
  --native-score-size: 54px;
}

.reviews-site-v2 .rv-trend-scores .app-native-score {
  --native-score-size: 40px;
}

.reviews-site-v2 .search-score-pair .app-native-score,
.reviews-site-v2 .search-result-card .app-native-score,
.reviews-site-v2 .seo-leader-scores .app-native-score {
  --native-score-size: 44px;
}

.reviews-site-v2 .app-product-score-pair .app-native-score {
  --native-score-size: 78px;
}

@media (min-width: 521px) {
  body:has(.rv-home) .app-install-banner { display: none !important; }
}

@media (max-width: 1040px) {
  .reviews-site-v2 .rv-app-hero h1 { font-size: 72px; }
  .reviews-site-v2 .rv-app-screens-stage {
    grid-template-columns: repeat(3, minmax(0, 260px));
    height: 590px;
  }
}

@media (max-width: 760px) {
  .reviews-site-v2 .rv-app-hero { padding: 28px 18px 0; }
  .reviews-site-v2 .rv-app-mascot-line { margin-bottom: 18px; }
  .reviews-site-v2 .rv-app-hero h1 { font-size: 54px; line-height: 0.98; }
  .reviews-site-v2 .rv-app-hero-lede { margin: 20px auto 24px; font-size: 17px; }
  .reviews-site-v2 .rv-app-hero-actions { flex-wrap: wrap; gap: 16px; }
  .reviews-site-v2 .rv-app-screens-stage {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(82vw, 330px);
    justify-content: start;
    gap: 14px;
    width: calc(100% + 36px);
    height: 650px;
    margin: 26px -18px 0;
    padding: 0 18px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 18px;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }
  .reviews-site-v2 .rv-app-screens-stage::-webkit-scrollbar { display: none; }
  .reviews-site-v2 .rv-app-hero-screen { margin-top: 0; scroll-snap-align: start; }
  .reviews-site-v2 .rv-app-hero-screen-primary { order: -1; }
  .reviews-site-v2 .rv-app-tour { padding: 72px 0 68px; }
  .reviews-site-v2 .rv-app-tour-heading { width: calc(100% - 36px); margin-bottom: 30px; }
  .reviews-site-v2 .rv-app-tour-heading > p { margin-top: 18px; }
  .reviews-site-v2 .rv-app-tour-track {
    grid-auto-columns: min(82vw, 320px);
    gap: 14px;
    padding-inline: 18px;
  }
  .reviews-site-v2 .rv-app-hero-screen img,
  .reviews-site-v2 .rv-app-tour-screen img { border-radius: 20px; }
  .reviews-site-v2 .product-card .app-native-score,
  .reviews-site-v2 .rail-card .app-native-score { --native-score-size: 50px; }
  .reviews-site-v2 .rv-trend-scores .app-native-score { --native-score-size: 34px; }
  .reviews-site-v2 .search-score-pair .app-native-score,
  .reviews-site-v2 .search-result-card .app-native-score,
  .reviews-site-v2 .seo-leader-scores .app-native-score { --native-score-size: 40px; }
  .reviews-site-v2 .app-product-score-pair .app-native-score { --native-score-size: 64px; }
}

@media (max-width: 420px) {
  .reviews-site-v2 .rv-app-hero h1 { font-size: 48px; }
  .reviews-site-v2 .rv-app-mascot-line { max-width: 100%; font-size: 11px; }
  .reviews-site-v2 .rv-app-hero-mascot { width: 38px !important; height: 38px !important; flex-basis: 38px; }
  .reviews-site-v2 .rv-app-screens-stage { height: 610px; }
}

/* TikTok-safe App Store handoff, styled as the same editorial app showcase. */
.reviews-site-v2 .rv-app-install-page {
  display: block;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding: 48px 24px 0;
  overflow: hidden;
  background: #f5f6f5;
  text-align: center;
}

.reviews-site-v2 .rv-app-install-copy {
  width: min(860px, 100%);
  margin: 0 auto;
}

.reviews-site-v2 .rv-app-install-brand {
  justify-content: center;
  margin-bottom: 20px;
}

.reviews-site-v2 .rv-app-install-brand img { width: 142px; }

.reviews-site-v2 .rv-app-install-page .rv-app-mascot-line {
  margin-bottom: 20px;
}

.reviews-site-v2 .rv-app-install-page .eyebrow {
  margin: 0 0 13px;
  color: #25935d;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.reviews-site-v2 .rv-app-install-copy h1 {
  max-width: 780px;
  margin: 0 auto;
  color: #080a09;
  font-family: var(--rv-serif);
  font-size: 72px;
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: 0;
}

.reviews-site-v2 .rv-app-install-lede {
  max-width: 640px;
  margin: 22px auto 24px;
  color: #626763;
  font-size: 17px;
  line-height: 1.5;
}

.reviews-site-v2 .rv-app-store-button {
  min-height: 54px;
  padding: 0 22px;
  border-radius: 27px;
  background: #090a09;
  box-shadow: 0 12px 28px rgba(18, 24, 20, 0.12);
}

.reviews-site-v2 .rv-app-hold-steps {
  width: min(680px, 100%);
  margin: 32px auto 0;
}

.reviews-site-v2 .rv-app-hold-steps li {
  justify-items: center;
  padding: 18px 8px 0;
}

.reviews-site-v2 .rv-app-install-preview {
  width: min(380px, calc(100% - 36px));
  height: 760px;
  margin: 46px auto 0;
  overflow: hidden;
  border: 1px solid rgba(17, 19, 18, 0.09);
  border-bottom: 0;
  border-radius: 28px 28px 0 0;
  background: #f3f4f3;
  box-shadow: 0 28px 64px rgba(18, 24, 20, 0.14);
}

.reviews-site-v2 .rv-app-install-preview img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: top center;
}

@media (max-width: 720px) {
  .reviews-site-v2 .rv-app-install-page { padding: 28px 18px 0; }
  .reviews-site-v2 .rv-app-install-brand { margin-bottom: 16px; }
  .reviews-site-v2 .rv-app-install-brand img { width: 122px; }
  .reviews-site-v2 .rv-app-install-page .rv-app-mascot-line { margin-bottom: 18px; }
  .reviews-site-v2 .rv-app-install-copy h1 { font-size: 48px; line-height: 0.98; }
  .reviews-site-v2 .rv-app-install-lede { margin: 18px auto 21px; font-size: 15px; }
  .reviews-site-v2 .rv-app-store-button { width: 100%; }
  .reviews-site-v2 .rv-app-hold-steps { margin-top: 25px; }
  .reviews-site-v2 .rv-app-hold-steps li { padding: 16px 4px 0; }
  .reviews-site-v2 .rv-app-hold-steps strong { font-size: 11px; }
  .reviews-site-v2 .rv-app-install-preview {
    width: min(340px, calc(100% - 18px));
    height: 680px;
    margin: 34px auto 0;
    border-right: 1px solid rgba(17, 19, 18, 0.09);
    border-left: 1px solid rgba(17, 19, 18, 0.09);
    border-radius: 24px 24px 0 0;
  }
}

/* Mobile homepage authority: keep Top Picks readable and the lower mascot restrained. */
@media (max-width: 760px) {
  .reviews-site-v2 .rv-home .rv-ranking-section .top-picks-parent-row {
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .reviews-site-v2 .rv-home .rv-ranking-section .top-picks-parent-row::-webkit-scrollbar,
  .reviews-site-v2 .rv-home .rv-ranking-section .product-rail::-webkit-scrollbar {
    display: none;
  }

  .reviews-site-v2 .rv-home .rv-ranking-section .product-rail-block {
    margin-top: 44px !important;
  }

  .reviews-site-v2 .rv-home .rv-ranking-section .product-rail {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: min(46vw, 176px) !important;
    gap: 14px !important;
    align-items: start;
    margin-right: -18px !important;
    padding: 8px 18px 24px 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 18px;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .reviews-site-v2 .rv-home .rv-ranking-section .rail-card {
    display: flex !important;
    flex: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: auto !important;
    min-width: 0 !important;
    gap: 0 !important;
    overflow: hidden;
    scroll-snap-align: start;
  }

  .reviews-site-v2 .rv-home .rv-ranking-section .rail-art {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1;
  }

  .reviews-site-v2 .rv-home .rv-ranking-section .rail-art img {
    width: 82% !important;
    height: 82% !important;
    max-width: 142px !important;
    max-height: 142px !important;
    object-fit: contain !important;
  }

  .reviews-site-v2 .rv-home .rv-ranking-section .rail-card h4 {
    min-height: 44px !important;
    margin: 13px 2px 4px !important;
    overflow: hidden;
    font-size: 15px !important;
    line-height: 1.42 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .reviews-site-v2 .rv-home .rv-ranking-section .rail-card > p {
    min-height: 18px;
    margin: 0 2px 10px !important;
    overflow: hidden;
    font-size: 12px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .reviews-site-v2 .rv-home .rv-ranking-section .rail-score-pair {
    min-height: 50px;
    margin: auto 2px 0 !important;
  }

  .reviews-site-v2 .rv-home .rv-download-band {
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .reviews-site-v2 .rv-home .rv-download-band-mascot {
    width: 52px !important;
    height: 52px !important;
  }

  .reviews-site-v2 .rv-home .rv-download-band-mascot .mascot-lottie-player {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transform: scale(0.82) !important;
    transform-origin: center;
  }

  .reviews-site-v2 .site-footer-cta {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .reviews-site-v2 .site-footer-mascot {
    width: 48px !important;
    height: 48px !important;
  }

  .reviews-site-v2 .site-footer-mascot .mascot-lottie-player {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transform: scale(1.45) !important;
    transform-origin: center;
  }
}

.rv-header-tabs{gap:24px}.reviews-site-v2 .static-footer{max-width:1200px;margin:auto;padding:32px 24px;display:flex;gap:24px;flex-wrap:wrap;align-items:center;border-top:1px solid #e3e6e3;color:#737875}.static-footer a{color:inherit}.static-footer span{margin-right:auto}.rv-download-primary{display:inline-flex;align-items:center;gap:8px}.rv-download-copy{margin-top:18px}.static-404{padding:100px 24px;text-align:center}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}