/* ChronosCodex light theme (redesign-light-20261019).
 *
 * One shared stylesheet for every public page. tools/site-build/theme.mjs links
 * it at the end of each page's <head>, after the page's own inline <style>, so a
 * rule here wins over an inline rule of equal specificity without !important.
 *
 * How it works:
 *   1. Tokens. Page CSS is written against --navy-*, --text*, --card*, --gold*
 *      and --blue* variables. Redefining them here turns the original dark
 *      design light without editing ~90 inline style blocks.
 *   2. Components. Rules below replace the colors that page CSS hard-codes
 *      (for example color:#fff or rgba(6,13,32,.92)) and set the new layout of
 *      the homepage hero, product screen, gallery and pricing row.
 *   3. Dark scopes. The before/after section, footers and the screenshot dialog
 *      stay dark: they re-declare the dark token values locally.
 *
 * !important is used only where the page or a script already uses it
 * (pricing widget overrides, inline style attributes, reveal animation).
 * Contrast of every text/background pair here is >= 4.5:1 (checked 2026-10-19).
 */

/* ---------- Fonts: self-hosted Inter (SIL OFL 1.1, assets/fonts/OFL.txt) ---------- */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Legacy page CSS (and inline style attributes) still say font-family:Sora with no
   fallback. Sora is no longer downloaded; map the name to the same local Inter file
   so those elements never fall back to a serif default. */
@font-face{font-family:"Sora";font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- 1. Tokens ---------- */
:root{
  color-scheme:light;
  /* Brand palette */
  --cc-ink:#142b4b;          /* headings, body text */
  --cc-ink-soft:#3d4f68;     /* secondary text */
  --cc-ink-mute:#52647c;     /* tertiary text, captions */
  --cc-blue:#225fc5;         /* links, emphasis */
  --cc-blue-ink:#1b4f9f;     /* hover */
  --cc-gold-ink:#8a5a00;     /* gold as text on light surfaces */
  --cc-cta:#efbd5b;          /* gold call to action fill */
  --cc-cta-hover:#f3c86f;
  --cc-cta-ink:#29200e;
  --cc-surface:#ffffff;
  --cc-tint:#f5f8fc;         /* alternate section */
  --cc-pale:#edf4fc;         /* pale blue band */
  --cc-chip:#edf3fb;
  --cc-border:#d6e1ee;
  --cc-border-soft:#e3eaf3;
  --cc-dark:#0c1c36;         /* before/after section */
  --cc-dark-2:#102442;
  --cc-footer:#0b1c35;
  --cc-shadow:0 18px 45px rgba(19,44,76,.11);
  --cc-shadow-sm:0 3px 12px rgba(24,52,83,.05);
  --cc-focus:#225fc5;

  /* Legacy tokens used by the inline page CSS, remapped to the light palette */
  --navy-950:var(--cc-surface); --navy-900:var(--cc-tint); --navy-850:var(--cc-surface);
  --navy-800:var(--cc-chip); --navy-700:#e3edfa;
  --line:#cbd7e6; --line-soft:var(--cc-border-soft);
  --blue:var(--cc-blue); --blue-bright:var(--cc-blue); --blue-soft:var(--cc-blue-ink);
  --gold:#94600a; --gold-bright:var(--cc-gold-ink); --gold-deep:#6f4800;
  --text:var(--cc-ink); --text-soft:var(--cc-ink-soft); --text-mute:var(--cc-ink-mute);
  --card:var(--cc-surface); --card-line:var(--cc-border);
  /* sell-insurance and legacy light pages */
  --bg:var(--cc-surface); --panel:var(--cc-tint); --ink:var(--cc-ink); --muted:var(--cc-ink-mute);
  --max:1240px;
}

/* Dark scopes keep the original graphic treatment. */
#problem,footer,.lightbox,.contract-note,.cc-dark{
  --navy-950:var(--cc-dark); --navy-900:var(--cc-dark); --navy-850:var(--cc-dark-2);
  --navy-800:#15305a; --navy-700:#1b3a68;
  --line:#294361; --line-soft:#1f3656;
  --blue:#6ea2ff; --blue-bright:#8fb8ff; --blue-soft:#a9c8ff;
  --gold:#efbd5b; --gold-bright:#f3c86f; --gold-deep:#efbd5b;
  --text:#f3f7fd; --text-soft:#c4d0e0; --text-mute:#b6c5d8;
  --card:var(--cc-dark-2); --card-line:#294361;
  color:var(--text);
}
footer{--navy-950:var(--cc-footer);--navy-900:var(--cc-footer);--text-mute:#bdcce0;--text-soft:#bdcce0}

/* ---------- 2. Base ---------- */
html{scroll-behavior:auto}
body{background:var(--cc-surface);color:var(--cc-ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,h4,.btn,.brand b{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
h1{letter-spacing:-.035em;line-height:1.08;font-weight:800}
h2{letter-spacing:-.025em;font-weight:800}
h3{letter-spacing:-.01em}
main h1,main h2,main h3,main h4,article h1,article h2,article h3,article h4{color:var(--cc-ink)}
article b,article strong,.glossary dt,.crumb span,.doc-card h3,.card h2,.card h3,.card strong{color:var(--cc-ink)}
a{color:var(--cc-blue)}
a:hover{color:var(--cc-blue-ink)}
/* Links inside running text are underlined, so they never rely on color alone
   (WCAG 1.4.1). Buttons, cards and navigation are unaffected. */
p a:not(.btn),li a:not(.btn),dd a,td a,.crumb a,.notice a,.lead a,.demo-note a,.datasets a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
nav li a,.menu a,footer li a,.related li a{text-decoration:none}
img,video,iframe{max-width:100%}
table{max-width:100%}
.gold{color:var(--gold-bright)}
.lead{color:var(--text-soft)}
::selection{background:#cfe0fb;color:var(--cc-ink)}

/* Focus: one visible style everywhere (WCAG 2.4.7 / 2.4.11). */
:focus-visible{outline:3px solid var(--cc-focus);outline-offset:3px;border-radius:4px}
#problem :focus-visible,footer :focus-visible,.lightbox :focus-visible{outline-color:#f3c86f}
.skip{background:var(--cc-ink);color:#fff}
.skip:focus{left:0;color:#fff}

/* No decorative motion: reveal-on-scroll and glows are disabled outright. */
html.js .reveal,.reveal{opacity:1!important;transform:none!important;transition:none!important}
.hero-glow{display:none!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------- 3. Header and navigation ---------- */
header{background:rgba(255,255,255,.97);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--cc-border-soft);box-shadow:0 1px 0 rgba(20,43,75,.02)}
.nav{max-width:1320px;padding-top:12px;padding-bottom:12px}
.brand,.brand:hover{color:var(--cc-ink);text-decoration:none}
.brand b{color:var(--cc-ink);letter-spacing:.02em}
.brand b span{color:var(--cc-blue)}
.brand small{color:var(--cc-gold-ink)}
.navlinks a,.navlinks button.navtop,.login-link{color:var(--cc-ink-soft)}
.navlinks a:hover,.navlinks button.navtop:hover,.navlinks button.navtop[aria-expanded="true"],.login-link:hover{color:var(--cc-ink);background:var(--cc-chip);text-decoration:none}
.menu{background:var(--cc-surface);border:1px solid var(--cc-border);box-shadow:0 18px 40px rgba(20,43,75,.12)}
.menu a{color:var(--cc-ink-soft)}
.menu a:hover,.menu a:focus-visible{color:var(--cc-ink);background:var(--cc-chip);text-decoration:none}
.hamburger{border-color:var(--cc-border);min-width:44px;min-height:44px}
.hamburger span{background:var(--cc-ink)}
@media (prefers-reduced-motion:reduce){.hamburger span{transition:none}}

/* Mobile menu: scrolls inside the viewport, 44px touch rows. */
#mobileMenu{background:var(--cc-surface);border-top:1px solid var(--cc-border-soft);max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#mobileMenu .mgroup{border-bottom:1px solid var(--cc-border-soft)}
#mobileMenu .mtitle{color:var(--cc-gold-ink)}
#mobileMenu a{color:var(--cc-ink);display:flex;align-items:center;min-height:44px;padding:6px 0}
#mobileMenu a:hover{color:var(--cc-blue);text-decoration:none}
#mobileMenu .mcta{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
#mobileMenu .mcta .btn{flex:1 1 200px}

/* Language select (rendered by assets/lang-switcher.js, which injects its own
   dark-theme CSS at runtime; the extra element selectors outrank it). */
html body .cc-lang select{color:var(--cc-ink);background:var(--cc-chip);border:1px solid var(--cc-border);min-height:36px;font-family:Inter,system-ui,sans-serif}
html body .cc-lang select:hover,html body .cc-lang select:focus-visible{border-color:var(--cc-blue)}
html body .cc-lang svg{color:var(--cc-ink-mute)}
html body .cc-lang::after{border-color:var(--cc-ink-mute)}
#langToggle{color:var(--cc-ink)!important;border-color:var(--cc-border)!important}

/* Older news-post header (logo + inline links, no menu button): keep links
   reachable on small screens as a scrollable row instead of hiding them. */
/* The full desktop row needs ~1180px with Spanish labels; collapse earlier than
   the page CSS (1020px) so the header never overflows horizontally. */
@media (max-width:1180px){
  header .nav:has(.hamburger) .navlinks,header .nav:has(.hamburger) .nav-cta .login-link{display:none}
  header .nav:has(.hamburger) .hamburger{display:block;flex:none}
  header .nav:has(.hamburger) .nav-cta{margin-left:auto;flex:none}
}
@media (max-width:1180px){
  header .nav:not(:has(.hamburger)){flex-wrap:wrap}
  header .nav:not(:has(.hamburger)) .navlinks{display:flex;order:3;width:100%;margin:2px 0 0;overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  header .nav:not(:has(.hamburger)) .navlinks a{min-height:44px;flex:none}
}

/* "dh" header used by some older news posts and the 404 page */
.dh{background:rgba(255,255,255,.97);border-bottom:1px solid var(--cc-border-soft);backdrop-filter:none}
.dh .dh-nav a,.dh .dh-login{color:var(--cc-ink-soft)}
.dh .dh-nav a:hover,.dh .dh-login:hover,.dh .dh-subnav a:hover{color:var(--cc-ink)}
.dh .dh-cta{background:var(--cc-cta);color:var(--cc-cta-ink);box-shadow:none}
.dh .dh-subnav{background:var(--cc-tint);border-top:1px solid var(--cc-border-soft)}
.dh .dh-subnav a{color:var(--cc-ink-soft)}
.phone-topbar{background:var(--cc-pale);border-bottom:1px solid var(--cc-border-soft)}
.phone-topbar a{color:var(--cc-blue)}

/* ---------- 4. Buttons ---------- */
.btn-gold,.nav .btn-gold,.cta-row a.btn:not(.secondary):not(.btn-line),.hbtn.primary,.top .cta{background:var(--cc-cta);color:var(--cc-cta-ink);box-shadow:none;border:1px solid #e2ac43}
.btn-gold:hover,.nav .btn-gold:hover,.cta-row a.btn:not(.secondary):not(.btn-line):hover{background:var(--cc-cta-hover);color:var(--cc-cta-ink);filter:none}
.btn-line,.cta-row a.btn.secondary,.btn.secondary,.hbtn.secondary{background:var(--cc-surface);color:var(--cc-blue);border:1.5px solid #9dbbe8}
.btn-line:hover,.cta-row a.btn.secondary:hover,.btn.secondary:hover{background:var(--cc-pale);color:var(--cc-blue-ink);border-color:var(--cc-blue)}
.btn,.hbtn,.top .cta{min-height:44px}
#problem .btn-line,footer .btn-line{background:transparent;color:#fff;border-color:#5a7398}

/* ---------- 5. Homepage ---------- */
.hero,.page-hero,.audit-hero{background:radial-gradient(900px 420px at 88% -12%,rgba(34,95,197,.07),transparent 65%),radial-gradient(700px 320px at 0% 110%,rgba(239,189,91,.08),transparent 60%),var(--cc-surface)}
.hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:56px;padding-top:56px;padding-bottom:56px}
.hero .wrap>*{min-width:0}
.hero h1{font-size:clamp(36px,3.9vw,54px);color:var(--cc-ink)}
.hero h1 .gold,.hero h1 em.gold{color:var(--cc-blue)}
.hero .lead{font-size:17px;max-width:560px}
.eyebrow{background:#faf6ed;border:1px solid #ead7ae;color:var(--cc-gold-ink);letter-spacing:.08em}
.hero .eyebrow{font-size:11px;margin-bottom:16px}
.hero .cta-row{gap:12px}
.chips{color:var(--text-mute)}
.chips svg,.pchip svg,.trust-list svg,.ai-caps svg{color:var(--cc-gold-ink)}
.hero-visual{display:flex;flex-direction:column;gap:16px}
.hero-visual>img{order:0;width:100%;height:auto;border:1px solid var(--cc-border);border-radius:16px;box-shadow:var(--cc-shadow)}
.hero-visual .ai-callbar{order:1;margin-bottom:0}
.ai-callbar{background:var(--cc-tint);border:1px solid var(--cc-border);color:var(--cc-ink)}
.ai-callbar:hover{border-color:var(--cc-blue)}
.ai-callbar .ai-ico{background:var(--cc-chip)}
.ai-callbar .ai-ico svg{color:var(--cc-blue)}
.ai-callbar b{color:var(--cc-ink-soft)}
.ai-callbar .num,.callcard .phone{color:var(--cc-blue)}
.ai-callbar .opt9,.callcard .opt{color:var(--cc-blue);border-color:var(--cc-blue)}
.demo-note a{color:var(--cc-blue)}
.proofband,.datasets{background:var(--cc-tint)}
.pchip{color:var(--cc-ink-soft)}
.pchip b,.trust-list b,.out b,.proof-card b,.trust-card b,.trust-band b,.stat .l,.tile b,.hero-panel strong,.plan-hl b,.ftab td:first-child{color:var(--cc-ink)}

/* Prominent household screen on a pale-blue band, heading above. */
.screen-peek{background:var(--cc-pale);padding:64px 0}
.shot-feature{display:flex;flex-direction:column-reverse;align-items:center;gap:24px;max-width:1120px;margin:0 auto}
.shot-feature>div{text-align:center;max-width:760px}
.shot-feature h3{font-size:clamp(25px,3vw,38px);letter-spacing:-.025em;line-height:1.15;font-weight:800}
.shot-feature .shot{width:100%;box-shadow:0 18px 50px rgba(24,52,83,.1)}
.shot-feature .shot img{aspect-ratio:auto}

/* Screenshots and gallery: two larger columns. */
.shot{background:var(--cc-surface);border:1px solid var(--cc-border);color:var(--cc-ink)}
.shot:hover{border-color:var(--cc-blue);box-shadow:0 8px 25px rgba(23,52,84,.07)}
.shot .cap{display:block;padding:16px 18px;font-size:14px;color:var(--text-soft)}
.shot .cap b{color:var(--cc-ink);font-size:16px}
.zoom-hint{color:var(--text-mute)}
.shotgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.shotgrid .shot:last-child:nth-child(odd){grid-column:1/-1;max-width:600px;justify-self:center;width:100%}

/* Dark before/after section */
#problem{background:var(--cc-dark)}
#problem h2,#problem h3{color:#f3f7fd}
#problem .gold,#problem h2 .gold{color:var(--cc-cta)}
#problem .shot{background:var(--cc-dark-2);border-color:#294361;color:#dce7f5}
#problem .cap b{color:#fff}
#problem a{color:#8fb8ff}

.out,.per,.panel,.worry details,.doc-card,.proof-card,.trust-card,.ft-card,.card,.tile,.stat{background:var(--cc-surface);border-color:var(--cc-border);box-shadow:var(--cc-shadow-sm)}
.out .oicon{background:var(--cc-chip)}
.per,.per:hover{color:var(--cc-ink);text-decoration:none}
.per:hover,.doc-card:hover{border-color:var(--cc-blue)}
.per .go{color:var(--cc-blue)}
.ai-sec{background:var(--cc-tint)}
.ai-caps span{background:var(--cc-surface)}
.callcard{background:var(--cc-surface);box-shadow:0 12px 30px rgba(24,52,83,.05)}
.story-grid .shot img{display:block}

/* FAQ disclosure */
.faq summary,.worry summary,.ft-faq summary{min-height:44px;color:var(--cc-ink)}
.faq summary .plus,.worry summary .plus{color:var(--cc-blue)}
details summary:focus-visible{outline-offset:2px}

/* Pricing cards (rendered by assets/chronos-pricing.js; page CSS sets these
   with !important, so the overrides need it too). */
.pricing-sec{background:var(--cc-tint)}
.pricing-mount{min-height:0}
[data-chronos-pricing] .chronos-plan-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;align-items:stretch}
.chronos-plan-card{display:flex;flex-direction:column;background:var(--cc-surface)!important;border:1px solid var(--cc-border)!important;border-radius:16px!important;box-shadow:none!important;color:var(--cc-ink-soft)!important}
.chronos-plan-card.is-highlighted{border:2px solid var(--cc-blue)!important;box-shadow:0 10px 30px rgba(34,95,197,.12)!important}
.chronos-plan-card .chronos-cta{margin-top:auto}
.chronos-plan-name,.chronos-price,.chronos-def b,.chronos-callout strong,.chronos-table thead th,.chronos-table td b{color:var(--cc-ink)!important}
.chronos-plan-card p,.chronos-plan-card ul{color:var(--cc-ink-soft)!important}
.chronos-badge{background:var(--cc-pale)!important;color:var(--cc-blue)!important}
.chronos-cta{background:var(--cc-cta)!important;color:var(--cc-cta-ink)!important;box-shadow:none!important}
.chronos-cta:hover{background:var(--cc-cta-hover)!important}
.chronos-table-scroll{box-shadow:none!important;border-color:var(--cc-border)!important}
.chronos-pricing-note,.chronos-facts-ref{color:var(--cc-ink-mute)}
@media (max-width:1100px){[data-chronos-pricing] .chronos-plan-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:920px){[data-chronos-pricing] .chronos-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:600px){[data-chronos-pricing] .chronos-plan-grid{grid-template-columns:1fr!important}}

.final{background:var(--cc-pale)}
.sticky-cta{background:rgba(255,255,255,.98);border-top:1px solid var(--cc-border)}
.sticky-cta .btn{min-height:44px}

/* ---------- 6. Inner pages: features, use cases, compare, docs, trust, legal, news ---------- */
main{background:none}
.crumb a{color:var(--cc-blue)}
.crumb a:hover{color:var(--cc-blue-ink)}
.notice{background:var(--cc-pale);border-color:#b9cff1;color:var(--cc-ink)}
.draft{background:#fdf7e9;border-color:#ead7ae;color:var(--cc-ink)}
.callout-box,.related,.groupintro,.demo-context{border-color:var(--cc-border)}
.feature-table,.ftab,.chronos-table{background:var(--cc-surface)}
.feature-table th,.feature-table thead th,.ftab th{background:var(--cc-pale);color:var(--cc-ink)}
.feature-table td{background:var(--cc-surface);color:var(--cc-ink-soft);border-color:var(--cc-border-soft)}
.feature-table td:first-child{color:var(--cc-ink)}
.feature-table tbody tr:hover td{background:var(--cc-tint)}
.tblwrap,.tscroll,.table-scroll{overflow-x:auto;max-width:100%}
.plan-hl{background:linear-gradient(180deg,var(--cc-pale),#fdf7e9)}
.plan-hl .tag{background:var(--cc-cta);color:var(--cc-cta-ink)}
.news-meta,.news-date{color:var(--cc-ink-mute)}
.st.av{background:#e7f6ee;color:#1d7a46;border-color:#a6dcbd}
.st.ro{background:#fdf3df;color:var(--cc-gold-ink);border-color:#ead7ae}
.score{color:#1d7a46}
.warn{color:#8a5a00}
.cft-good,.cft-listed{color:#1d7a46}
.cft-bad,.cft-err{color:#b42318}
.cft-limit{background:#fdf7e9}
.ytv{border-color:var(--cc-border)}
.vid{background:var(--cc-surface);border-color:var(--cc-border)}
.pill,.tag{border-color:var(--cc-border)}
.contract-note,.foot{background:var(--cc-dark)}
.contract-note h2,.contract-note h3,.contract-note li,.contract-note ul{color:#f3f7fd}
.contract-note p{color:#c4d0e0}
.hero p{color:var(--text-soft)}
.hbtn.secondary{color:var(--cc-blue)!important;background:var(--cc-surface)}

/* sell-insurance page has its own top bar and a dark photo hero */
.top{background:rgba(255,255,255,.97);border-bottom:1px solid var(--cc-border-soft)}
.top .links a{color:var(--cc-ink-soft)}
.top .lang{border-color:var(--cc-border);color:var(--cc-ink)}

/* ---------- 7. Footer (dark) ---------- */
footer{background:var(--cc-footer);color:#bdcce0;border-top:0}
footer p,footer .fcol a,footer .df-links a,footer a{color:#bdcce0}
footer a:hover,footer .fcol a:hover{color:#fff}
footer .footer-title,footer .brand,footer b{color:#fff}
footer .fbottom{border-top-color:#1f3656}
footer .fcol a{min-height:32px;display:flex;align-items:center}
.privacy-pledge{color:var(--cc-cta)}
footer.df{padding:28px 22px}

/* ---------- 8. Screenshot dialog (dark) ---------- */
.lightbox{background:rgba(7,18,37,.96)}
.lightbox .lb-cap{color:#e0eaf7;background:rgba(16,36,66,.92)}
.lb-close{background:#173354;color:#fff;border:1px solid #3a5a86;min-height:44px;min-width:44px}

/* ---------- 9. Layout safety ---------- */
section[id],main[id]{scroll-margin-top:96px}
pre,code{white-space:pre-wrap;overflow-wrap:anywhere}
.wrap,.dwrap{min-width:0}

/* ---------- 10. Responsive ---------- */
@media (max-width:1100px){
  .hero .wrap{gap:32px;padding-top:44px}
}
@media (max-width:920px){
  .hero .wrap{grid-template-columns:1fr;padding-bottom:40px}
  .hero h1,.hero .lead{max-width:680px}
  .hero-visual{max-width:720px;width:100%;margin:0 auto}
}
@media (max-width:600px){
  .wrap{padding-left:16px;padding-right:16px}
  .nav{padding:10px 16px}
  .hero .wrap{padding-top:30px;gap:26px}
  .hero h1{font-size:clamp(31px,9.4vw,40px);letter-spacing:-.03em}
  .hero .lead{font-size:16px}
  .btn-hero{width:100%;padding:14px 16px;font-size:15.5px}
  .chips{gap:8px 14px;font-size:13px}
  .ai-callbar .num{font-size:19px}
  .shotgrid{grid-template-columns:1fr}
  .shotgrid .shot:last-child:nth-child(odd){grid-column:auto;max-width:none}
  section{padding-top:48px;padding-bottom:48px}
  .screen-peek{padding:44px 0}
  .sec-head{margin-bottom:28px}
  .lightbox{padding:12px}
  .lightbox img{max-width:96vw}
  .lightbox .lb-cap{bottom:16px;font-size:12.5px;width:90vw}
  footer{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
}

/* Language select: the full "English"/"Español" label fits beside the menu
   button at phone widths; page CSS truncated it to "Engli...". */
@media (max-width:640px){
  #langSwitcher .cc-lang select,#langSwitcher select{max-width:none;min-height:40px}
}
@media (max-width:374px){
  .brand small{display:none}
  .brand b{font-size:13.5px}
}