/* prefs.css — user preferences layer: 5 font sizes + light/dark theme + the "Aa" panel.
   Loaded AFTER the site CSS. Light theme = existing design, untouched. */

/* ---- 5 font sizes (rem-based text scales; body was 16px, make it rem) ---- */
html[data-fs="1"] { font-size: 85%; }
html[data-fs="2"] { font-size: 92.5%; }
html[data-fs="3"] { font-size: 100%; }
html[data-fs="4"] { font-size: 115%; }
html[data-fs="5"] { font-size: 130%; }
body { font-size: 1rem; }

/* ---- Dark theme: whole-page soft invert; media and the panel are flipped back ---- */
html[data-theme="dark"] { color-scheme: dark; background: #fff; filter: invert(.92) hue-rotate(180deg); }
html[data-theme="dark"] img:not([src*="logo"]):not([src*="favicon"]),
html[data-theme="dark"] video,
html[data-theme="dark"] iframe,
html[data-theme="dark"] picture,
html[data-theme="dark"] canvas,
html[data-theme="dark"] [style*="background-image"],
html[data-theme="dark"] .prefs { filter: invert(1) hue-rotate(180deg); }

/* dark mode: the beige grid texture is only ~9% alpha and vanishes after inversion -> stronger variant */
html[data-theme="dark"] .hero, html[data-theme="dark"] .page-hero { background-image: url('/images/bg-pattern-dark.png'); }
html[data-theme="dark"] body:has(> .wrap .hero.router), html[data-theme="dark"] body:has(.wrap > .hero) { background-image: url('/images/bg-pattern-dark.png'); }

/* ---- ONE HERO: beige + grid on every page ----
   Beige heroes get the grid texture. Heroes that were dark are authored with white text, so they are flipped
   (invert) into the same beige, with a white-line grid that inverts to the standard dark-line grid. */
:is(.post-head,.sell-hero,.insights-hero,.cs-hero:not(.cs-dark)) { background-color: var(--bg-warm) !important; background-image: url('/images/bg-pattern.png') !important; background-size: cover !important; background-position: center !important; }
:is(.sol-hero,.cs-hero.cs-dark,.ind-hero,.contact-hero,.feat-hero,.resources-hero,.bt-hero,.rr-hero,.roi-hero,.ada-hero,.audit-hero) { background-color: #0a0905 !important; background-image: url('/images/bg-pattern-inv.png') !important; background-size: cover !important; background-position: center !important; filter: invert(1) hue-rotate(180deg); }
:is(.sol-hero,.cs-hero.cs-dark,.ind-hero,.contact-hero,.feat-hero,.resources-hero,.bt-hero,.rr-hero,.roi-hero,.ada-hero,.audit-hero)::before, :is(.sol-hero,.cs-hero.cs-dark,.ind-hero,.contact-hero,.feat-hero,.resources-hero,.bt-hero,.rr-hero,.roi-hero,.ada-hero,.audit-hero)::after { display: none !important; }
html:not([data-theme="dark"]) :is(.sol-hero,.cs-hero.cs-dark,.ind-hero,.contact-hero,.feat-hero,.resources-hero,.bt-hero,.rr-hero,.roi-hero,.ada-hero,.audit-hero) :is(img, video, iframe, canvas, picture, [style*="background-image"]) { filter: invert(1) hue-rotate(180deg); }
html[data-theme="dark"] :is(.post-head,.sell-hero,.insights-hero,.cs-hero:not(.cs-dark)) { background-image: url('/images/bg-pattern-dark.png') !important; }
html[data-theme="dark"] :is(.sol-hero,.cs-hero.cs-dark,.ind-hero,.contact-hero,.feat-hero,.resources-hero,.bt-hero,.rr-hero,.roi-hero,.ada-hero,.audit-hero) :is(img, video, iframe, canvas, picture, [style*="background-image"]) { filter: none; }

/* flipped heroes: accent text uses the pre-flip value that lands on brand ink (#b8460d), muted text on mid grey */
:is(.sol-hero,.cs-hero.cs-dark,.ind-hero,.contact-hero,.feat-hero,.resources-hero,.bt-hero,.rr-hero,.roi-hero,.ada-hero,.audit-hero) :is(em, .sol-hero-eyebrow, .bt-hero-eyebrow, .eyebrow, .tag, .tagline, .accent, .mock-badge, [style*="--brand"]) { color: #ff9158 !important; }
:is(.sol-hero,.cs-hero.cs-dark,.ind-hero,.contact-hero,.feat-hero,.resources-hero,.bt-hero,.rr-hero,.roi-hero,.ada-hero,.audit-hero) em { border-bottom-color: #ff9158 !important; text-decoration-color: #ff9158 !important; }
:is(.sol-hero,.cs-hero.cs-dark,.ind-hero,.contact-hero,.feat-hero,.resources-hero,.bt-hero,.rr-hero,.roi-hero,.ada-hero,.audit-hero) [style*="--text-muted"] { color: #919191 !important; }

/* label that was dark text on a dark pill: pre-flip value that lands on brand ink */
.cs-dark .sol-hero-eyebrow { color: #ff9158 !important; }

/* already-dark sections: flip back so dark mode never produces light blocks */
html[data-theme="dark"] :is(#smrtlvConsent, .section-dark,.sol-hero,.mega-feature,.level-card.dark,.sol-card.sol-card-dark,.mid-cta.mid-cta-dark,.final-cta,.sol-testimonial,.post-cover,.rel-cover,.ins-cover,.sx-footer,.chat-header-tg,.chat-header-wa) { filter: invert(1) hue-rotate(180deg); }
html[data-theme="dark"] :is(.section-dark,.sol-hero,.mega-feature,.level-card.dark,.sol-card.sol-card-dark,.mid-cta.mid-cta-dark,.final-cta,.sol-testimonial,.post-cover,.rel-cover,.ins-cover,.sx-footer,.chat-header-tg,.chat-header-wa) :is(img,video,iframe,picture,canvas,[style*="background-image"]) { filter: none; }

/* keep fixed chrome (nav, cookie banner, chat) at normal size; only page content scales */
html[data-fs="1"] { --fs-inv: 1; } html[data-fs="2"] { --fs-inv: 1; } html[data-fs="3"] { --fs-inv: 1; }
html[data-fs="4"] { --fs-inv: .8696; } html[data-fs="5"] { --fs-inv: .7692; }
.nav, .cookie-banner, [class*="cookie-consent"], #cookie-banner { zoom: var(--fs-inv, 1); }
/* subscribe forms: field, anti-bot slider and button must stack instead of sharing one row (the slider is 100% wide) */
.footer-subscribe-form, .newsletter-form { flex-wrap: wrap; }
.footer-subscribe-form input, .newsletter-form input { flex: 1 1 auto; min-width: min(180px, 100%); }
.footer-subscribe-form .btn, .newsletter-form .btn, .footer-subscribe-form button, .newsletter-form button { flex: 0 0 auto; min-width: max-content; white-space: normal; }
.footer-subscribe-form .ab, .newsletter-form .ab { flex: 1 1 100%; width: 100%; margin: 4px 0; }
/* newsletter banner sits on a dark photo: light slider label */
.newsletter-form .ab { --ab-fg: #fff; --ab-bg: rgba(255,255,255,.18); }
.nav-link, .nav-trigger, .nav .btn { white-space: nowrap; }
.nav .container-large, .nav-inner, .nav .nav-inner { max-width: calc(var(--container-lg, 1280px) / var(--fs-inv, 1)) !important; }

/* in the top menu */
.prefs.prefs-nav { position: relative; left: auto; bottom: auto; margin: 0 12px 0 16px; flex-shrink: 0; z-index: 2; }
.prefs-nav .prefs-btn { width: 38px; height: 38px; font-size: 14px; box-shadow: none; }
.prefs-nav .prefs-panel { left: auto; right: 0; bottom: auto; top: calc(100% + 10px); }
@media (max-width: 991px) { .prefs.prefs-nav { margin: 0 8px 0 auto; } }

/* grid children may shrink below their content width (otherwise one long word widens the whole page on phones) */
[class$="-grid"] > *, [class*="-grid "] > * { min-width: 0; }
.pain-card, .benefit-card, .usecase-card, .sol-card, .focus-item { overflow-wrap: break-word; min-width: 0; }

.stagger-in > * { min-width: 0; }
@media (max-width: 479px) { html[data-fs="4"] .stagger-in, html[data-fs="5"] .stagger-in { grid-template-columns: 1fr !important; } }
.roi-benchmarks { overflow-x: auto; max-width: 100%; }

/* product-page nav (sell-nav): on phones the number collapses to the phone icon so the "Aa" button fits */
@media (max-width: 479px) {
  .sell-nav .nav-phone { font-size: 0; gap: 0; }
  .sell-nav .nav-phone svg { width: 20px; height: 20px; }
  .sell-nav .nav-links { gap: 14px; }
  .sell-nav .prefs.prefs-nav { margin: 0; }
}

/* large text on phones: let footer rows and long words wrap instead of forcing sideways scroll */
.footer-copyright, .footer-copyright * { white-space: normal; overflow-wrap: break-word; }
.footer-legal { flex-wrap: wrap; }
@media (max-width: 767px) { html[data-fs="4"] body, html[data-fs="5"] body { overflow-wrap: break-word; overflow-x: clip; } }

/* ---- "Aa" preferences panel ---- */
.prefs { position: fixed; left: 16px; bottom: 16px; z-index: 9000; font-family: var(--font-ui, sans-serif); }
.prefs-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid #d8d8dc; cursor: pointer;
  background: #fff; color: #171717; font: 700 15px/1 var(--font-ui, sans-serif);
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.prefs-btn:focus-visible, .prefs-panel button:focus-visible, .prefs-panel a:focus-visible { outline: 2px solid #f06517; outline-offset: 2px; }
.prefs-panel {
  position: absolute; left: 0; bottom: 54px; width: 260px; padding: 14px; border-radius: 12px;
  background: #fff; color: #171717; border: 1px solid #d8d8dc; box-shadow: 0 8px 30px rgba(0,0,0,.22);
  font-size: 14px; line-height: 1.3;
}
.prefs-panel[hidden] { display: none; }
.prefs-panel fieldset { border: 0; margin: 0 0 12px; padding: 0; }
.prefs-panel legend { font-weight: 700; margin-bottom: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #6b6b6b; }
.prefs-row { display: flex; gap: 6px; align-items: center; }
.prefs-row button, .prefs-lang a {
  flex: 1; padding: 8px 6px; border: 1px solid #d8d8dc; border-radius: 8px; background: #fff; color: #171717;
  font: 600 13px/1 var(--font-ui, sans-serif); cursor: pointer; text-align: center; text-decoration: none;
}
.prefs-row button[aria-pressed="true"], .prefs-lang a[aria-current="true"] { background: #171717; color: #fff; border-color: #171717; }
.prefs-size { text-align: center; font-size: 12px; min-width: 34px; flex: 0 0 auto; color: #6b6b6b; }
.prefs-lang { display: flex; gap: 6px; }
/* panel itself stays fixed-px so it does not balloon at 130% */
@media (max-width: 479px) { .prefs { left: 10px; bottom: 76px; } }
@media print { .prefs { display: none; } }