/* SyncTV customer surfaces v5 — Brochure-only alignment and theme normalization.
 * The legacy brochure began as a dark landing page. The portal-style Brochure
 * now uses the same customer theme tokens and one consistent content gutter. */

/* Map legacy brochure tokens onto the shared customer surface theme. */
body.brochure-v2{
  --bg:var(--surface-app-page);
  --bg2:var(--surface-app-card);
  --panel:var(--surface-app-card);
  --panel2:var(--surface-app-soft);
  --line:var(--surface-app-border);
  --line-strong:color-mix(in srgb,var(--surface-app-border) 72%,var(--surface-app-text));
  --text:var(--surface-app-text);
  --muted:var(--surface-app-muted);
  --shadow:0 5px 16px rgba(25,34,53,.045);
  --radius:16px;
}

/* Brochure navigation and page intro align like the newer customer portal. */
body.brochure-v2 .customer-app-pagehead{text-align:center}
body.brochure-v2 .customer-app-pagehead p{margin-left:auto;margin-right:auto}
body.brochure-v2 .customer-app-tabs{justify-content:center}

/* Every brochure card/section lands on the same content edges. */
body.brochure-v2 main#top{display:block}
body.brochure-v2 main#top>.customer-app-panel{width:100%!important;max-width:none!important}
body.brochure-v2 .hero{padding:30px!important}
body.brochure-v2 .how,
body.brochure-v2 .feature-section,
body.brochure-v2 .plans,
body.brochure-v2 .account-section,
body.brochure-v2 .faq{padding:30px!important}
body.brochure-v2 .possibilities,
body.brochure-v2 .quality-band,
body.brochure-v2 .addon-band,
body.brochure-v2 .final-cta{padding:30px!important}
body.brochure-v2 .possibilities>.section-wrap,
body.brochure-v2 .quality-band>.section-wrap,
body.brochure-v2 .addon-band>.section-wrap,
body.brochure-v2 .final-cta>.section-wrap{width:100%!important;margin:0!important}

/* The approved Overview uses its own card. Remove the older wrapper card so
 * there is not a card-inside-a-card or a second, slightly narrower gutter. */
body.brochure-v2 #why.statement{
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
body.brochure-v2 #why .brochure-sales-overview{width:100%!important;margin:0!important}

/* Light/Dark readable text for legacy brochure elements that used fixed dark-theme colors. */
body.brochure-v2 .hero-lead,
body.brochure-v2 .demo-label,
body.brochure-v2 .demo-note,
body.brochure-v2 .statement-copy,
body.brochure-v2 .section-heading>p:not(.eyebrow),
body.brochure-v2 .step-card p,
body.brochure-v2 .use-card p,
body.brochure-v2 .filter-status,
body.brochure-v2 .feature-card p,
body.brochure-v2 .quality-grid>div>p:last-child,
body.brochure-v2 .quality-stat span,
body.brochure-v2 .fine-print{color:var(--surface-app-muted)!important}
body.brochure-v2 .feature-detail{color:var(--surface-app-text)!important}
body.brochure-v2 .hero-points span{color:var(--surface-app-text)!important;background:var(--surface-app-soft)!important;border-color:var(--surface-app-border)!important}

/* Interactive controls follow the current theme rather than dark-only translucent whites. */
body.brochure-v2 .scenario,
body.brochure-v2 .filter,
body.brochure-v2 .cycle{
  color:var(--surface-app-text)!important;
  background:var(--surface-app-card)!important;
  border-color:var(--surface-app-border)!important;
}
body.brochure-v2 .scenario.active,
body.brochure-v2 .filter.active,
body.brochure-v2 .cycle.active{
  color:var(--surface-app-purple)!important;
  background:color-mix(in srgb,var(--surface-app-accent) 11%,var(--surface-app-card))!important;
  border-color:color-mix(in srgb,var(--surface-app-accent) 45%,var(--surface-app-border))!important;
}

/* Legacy cards used rgba(255,255,255,...) which becomes wrong in Light mode. */
body.brochure-v2 .step-card,
body.brochure-v2 .use-card,
body.brochure-v2 .feature-card,
body.brochure-v2 .quality-stat,
body.brochure-v2 .plan-card{
  color:var(--surface-app-text)!important;
  background:var(--surface-app-soft)!important;
  border-color:var(--surface-app-border)!important;
  box-shadow:none!important;
}
body.brochure-v2 .feature-card.featured{
  background:linear-gradient(135deg,color-mix(in srgb,var(--surface-app-accent) 10%,var(--surface-app-card)),var(--surface-app-soft))!important;
}
body.brochure-v2 .step-number{color:color-mix(in srgb,var(--surface-app-accent) 20%,transparent)!important}
body.brochure-v2 .step-icon,
body.brochure-v2 .use-icon{
  color:var(--surface-app-purple)!important;
  background:color-mix(in srgb,var(--surface-app-accent) 10%,var(--surface-app-card))!important;
  border-color:color-mix(in srgb,var(--surface-app-accent) 28%,var(--surface-app-border))!important;
}
body.brochure-v2 .quality-band{background:var(--surface-app-card)!important;border-color:var(--surface-app-border)!important}

/* Button text must not inherit the Light theme's dark body text on gradients. */
body.brochure-v2 .button.primary{color:#fff!important}
body.brochure-v2 .button.secondary,
body.brochure-v2 .button.ghost{color:var(--surface-app-text)!important;background:var(--surface-app-card)!important;border-color:var(--surface-app-border)!important}
body.brochure-v2 .final-cta .button.secondary,
body.brochure-v2 .final-cta .button.ghost{color:#25324a!important;background:#fff!important;border-color:#fff!important}

/* The TV illustration intentionally remains a dark display in both themes. */
body.brochure-v2 .tv-bezel,
body.brochure-v2 .tv-screen{color:#fff!important}
body.brochure-v2 .tv-demo{align-self:center}
body.brochure-v2 .hero-copy{align-self:center}

html[data-synctv-theme="light"] body.brochure-v2 .brochure-sales-overview,
html[data-synctv-theme="light"] body.brochure-v2 .hero,
html[data-synctv-theme="light"] body.brochure-v2 .how,
html[data-synctv-theme="light"] body.brochure-v2 .feature-section,
html[data-synctv-theme="light"] body.brochure-v2 .plans,
html[data-synctv-theme="light"] body.brochure-v2 .account-section,
html[data-synctv-theme="light"] body.brochure-v2 .faq{
  background:#fff!important;
  color:var(--surface-app-text)!important;
}
html[data-synctv-theme="dark"] body.brochure-v2 .brochure-sales-overview,
html[data-synctv-theme="dark"] body.brochure-v2 .hero,
html[data-synctv-theme="dark"] body.brochure-v2 .how,
html[data-synctv-theme="dark"] body.brochure-v2 .feature-section,
html[data-synctv-theme="dark"] body.brochure-v2 .plans,
html[data-synctv-theme="dark"] body.brochure-v2 .account-section,
html[data-synctv-theme="dark"] body.brochure-v2 .faq{
  background:var(--surface-app-card)!important;
  color:var(--surface-app-text)!important;
}

@media(max-width:900px){
  body.brochure-v2 .customer-app-tabs{justify-content:flex-start}
  body.brochure-v2 .hero,
  body.brochure-v2 .how,
  body.brochure-v2 .feature-section,
  body.brochure-v2 .plans,
  body.brochure-v2 .account-section,
  body.brochure-v2 .faq,
  body.brochure-v2 .possibilities,
  body.brochure-v2 .quality-band,
  body.brochure-v2 .addon-band,
  body.brochure-v2 .final-cta{padding:24px!important}
}
@media(max-width:620px){
  body.brochure-v2 .hero,
  body.brochure-v2 .how,
  body.brochure-v2 .feature-section,
  body.brochure-v2 .plans,
  body.brochure-v2 .account-section,
  body.brochure-v2 .faq,
  body.brochure-v2 .possibilities,
  body.brochure-v2 .quality-band,
  body.brochure-v2 .addon-band,
  body.brochure-v2 .final-cta{padding:18px!important}
  body.brochure-v2 .brochure-sales-overview{padding:18px!important}
}