/* ===========================================================
   APAP client update — shared app shell (mobile-first)
   One screen, native-app feel, tap-to-call, Trump video.
   50 improvements applied — see drafts/MEJORAS.md.
   Per-treatment themes via body.theme-{a,b,c,d}.
   =========================================================== */
:root{
  --call:#25b34b; --call-deep:#1c8f3a;
  --safe-b:env(safe-area-inset-bottom);
  --safe-t:env(safe-area-inset-top);
  --ease:cubic-bezier(.22,.61,.36,1);
  /* gold FAB palette (shared) */
  --gold-hi:#f6d98f; --gold-mid:#e5bf5a; --gold-lo:#b98a2c; --gold-lab:#a87d2e;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}                 /* #7 no iOS auto-zoom */
body{
  height:100dvh;overflow:hidden;
  font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  line-height:1.45;color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  -webkit-user-select:none;user-select:none;                 /* #5 chrome not selectable */
}
img,video{display:block;}
::selection{background:var(--accent);color:#fff;}            /* #32 themed selection */

/* #1 universal keyboard focus ring */
a,button{outline:none;}
a:focus-visible,button:focus-visible{
  outline:3px solid var(--accent);outline-offset:3px;border-radius:6px;
}

/* ---------- App column ---------- */
.app{
  position:relative;height:100dvh;width:100%;
  display:flex;flex-direction:column;background:var(--bg);overflow:hidden;
}

/* ---------- App bar ---------- */
.appbar{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:calc(9px + var(--safe-t)) 16px 9px;
  background:var(--bar-bg);color:var(--bar-ink);
}
.appbar b{flex:0 0 auto;white-space:nowrap;font-family:var(--brand-font,'Source Serif 4',Georgia,serif);
  font-size:14px;letter-spacing:.03em;font-weight:700;}
.appbar span{margin-left:auto;min-width:0;text-align:right;font-size:9.5px;opacity:.8;
  letter-spacing:.03em;text-transform:uppercase;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ---------- Video stage ---------- */
.stage{position:relative;flex:0 0 auto;background:#05070b;}
.stage__vid{
  width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 42%;  /* #29 keep subject framed */
  background:#05070b;opacity:0;transition:opacity .6s var(--ease);           /* #26 fade-in when ready */
}
.stage__vid.is-ready{opacity:1;}
.stage--big .stage__vid{aspect-ratio:auto;height:min(30dvh,48vw);transition:height .35s var(--ease);}
/* when the user plays with sound, the video grows to fill more of the screen */
.stage--big.is-playing .stage__vid{height:min(62dvh,150vw);}
/* #13 bottom scrim so burned-in captions stay legible against content seam */
.stage::after{content:'';position:absolute;left:0;right:0;bottom:0;height:64px;pointer-events:none;
  background:linear-gradient(0deg,rgba(5,7,11,.55),transparent);}
/* #34 slim progress bar tracking video position */
.stage__prog{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--accent);
  z-index:3;transition:width .2s linear;box-shadow:0 0 8px var(--accent);}

/* #33 Volume hint — entrance + bob; #41 killed under reduced-motion */
.volhint{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  background:rgba(10,14,20,.74);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  color:#fff;border:1px solid rgba(255,255,255,.24);border-radius:999px;
  padding:9px 15px;min-height:40px;font-size:13px;font-weight:700;letter-spacing:.01em;cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  animation:hintIn .5s var(--ease) both, bob 1.7s ease-in-out .5s infinite;
  transition:opacity .5s ease;
}
.volhint__ico{font-size:16px;display:inline-block;animation:wiggle 1.7s ease-in-out infinite;}
.volhint__up{display:inline-flex;flex-direction:column;line-height:.6;font-size:9px;opacity:.9;}
.volhint.is-dim{opacity:.6;animation:hintIn .5s var(--ease) both;}
.volhint.is-hidden{opacity:0;pointer-events:none;}
@keyframes hintIn{from{opacity:0;transform:translateX(-50%) translateY(-10px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(-5px);}}
@keyframes wiggle{0%,100%{transform:scale(1) rotate(0);}50%{transform:scale(1.18) rotate(-6deg);}}

/* #37 tap-for-sound chip */
.stage__tap{
  position:absolute;right:10px;bottom:12px;display:inline-flex;align-items:center;gap:6px;
  background:rgba(10,14,20,.62);color:#fff;border:1px solid rgba(255,255,255,.18);
  border-radius:999px;padding:8px 12px;min-height:36px;
  font-size:11px;font-weight:700;cursor:pointer;backdrop-filter:blur(4px);z-index:3;}

/* ---------- Content ---------- */
.content{flex:1 1 auto;min-height:0;overflow:hidden;padding:16px 20px 8px;
  display:flex;flex-direction:column;justify-content:center;gap:9px;}
.eyebrow{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);margin:0;}
.content h1{margin:0;color:var(--head);letter-spacing:-.01em;text-wrap:balance;}   /* #21 */
.lede{color:var(--ink-soft);font-size:14px;line-height:1.5;margin:0;text-wrap:pretty;} /* #22 */
.lede b{color:var(--head);}
.signal{display:block;margin:2px 0 0;
  font-size:12.5px;line-height:1.42;color:var(--ink-soft);border-radius:0 10px 10px 0;
  border-left:3px solid var(--accent);padding:9px 12px 9px 12px;background:var(--signal-bg,transparent);}
.signal b{color:var(--head);}

/* Literal call script inside the compact signal box — "here's exactly what to say" */
.signal__say{display:block;margin-top:6px;padding:7px 10px;border-radius:8px;
  background:var(--say-bg,rgba(0,0,0,.14));font-style:italic;color:var(--head);
  font-size:12px;line-height:1.4;font-weight:600;}

/* FILED vs UNFILED segmented preview toggle */
.seg{display:inline-flex;align-self:flex-start;gap:2px;padding:2px;border-radius:999px;
  background:var(--seg-bg,rgba(255,255,255,.08));border:1px solid var(--seg-line,rgba(255,255,255,.16));}
.seg__btn{border:0;background:none;color:var(--ink-soft);font-size:10.5px;font-weight:800;
  letter-spacing:.03em;text-transform:uppercase;padding:5px 12px;border-radius:999px;cursor:pointer;line-height:1;}
.seg__btn--on{background:var(--accent);color:#fff;}
/* status line — content swapped by the toggle */
.statusline{font-size:13px;line-height:1.45;color:var(--ink-soft);margin:0;}
.statusline b{color:var(--head);}
.statusline .filed-only,.statusline .unfiled-only{display:none;}
body[data-seg="filed"] .statusline .filed-only{display:inline;}
body[data-seg="unfiled"] .statusline .unfiled-only{display:inline;}

/* ---------- Mobile footer: 3 actions (Watch · Call · Contact) ---------- */
.callbar{flex:0 0 auto;text-align:center;position:relative;z-index:5;
  padding:10px 14px calc(9px + var(--safe-b));
  background:var(--foot-bg);border-top:1px solid var(--foot-line);
  box-shadow:0 -10px 24px -8px rgba(0,0,0,.28);}
.callbar__kick{margin:0 0 18px;font-size:11px;font-weight:700;color:var(--ink-soft);
  position:relative;z-index:6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* nav bar: flanking action buttons + a raised gold call FAB in the middle */
.navbar{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:6px;min-height:78px;padding:8px 12px;
  background:var(--nav-bg);border:1px solid var(--nav-line);border-radius:22px;
  box-shadow:0 8px 26px rgba(0,0,0,.16),0 1px 0 rgba(255,255,255,.04) inset;}

/* side actions (Watch / Contact) — footer-style circle + label */
.navact{display:flex;flex-direction:column;align-items:center;gap:5px;justify-content:center;
  color:var(--nav-ink);text-decoration:none;border:0;background:none;cursor:pointer;
  font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;line-height:1;}
.navact__circle{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--seg-bg,rgba(255,255,255,.08));border:1px solid var(--nav-line);color:var(--nav-ink);}
.navact svg{width:21px;height:21px;fill:currentColor;}
.navact__num{font-size:15px;font-weight:800;letter-spacing:.01em;color:var(--head);text-transform:none;}
.navact:active .navact__circle{transform:scale(.94);}

/* center gold call FAB, raised above the bar */
.navcall{position:relative;justify-self:center;margin-top:-40px;
  display:grid;place-items:center;width:84px;height:84px;border-radius:50%;text-decoration:none;
  background:radial-gradient(circle at 50% 30%,var(--gold-hi,#f6d98f) 0%,var(--gold-mid,#e5bf5a) 45%,var(--gold-lo,#b98a2c) 100%);
  color:#3a2a05;border:3px solid var(--nav-bg);
  box-shadow:0 10px 24px rgba(184,138,44,.55),0 2px 6px rgba(0,0,0,.3),
             0 1px 0 rgba(255,255,255,.7) inset,0 -3px 6px rgba(120,86,18,.4) inset;
  transition:transform .12s var(--ease);}
.navcall::before{content:'';position:absolute;left:14%;right:14%;top:9%;height:40%;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.65),transparent);pointer-events:none;}
.navcall::after{content:'';position:absolute;inset:-3px;border-radius:50%;
  border:2px solid var(--gold-mid,#e5bf5a);animation:ring 2.1s ease-out infinite;}
.navcall:active{transform:translateY(1px) scale(.96);}
.navcall svg{position:relative;width:34px;height:34px;fill:#3a2a05;}
.navcall__lab{position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-lab,#b98a2c);}
@keyframes ring{0%{transform:scale(1);opacity:.7;}100%{transform:scale(1.6);opacity:0;}}

/* ---------- #2/#41 reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
  .stage__vid{opacity:1;}
  .callbtn::before,.callbtn::after{display:none;}
}
/* #11 no-transparency fallback */
@media (prefers-reduced-transparency:reduce){
  .volhint,.stage__tap{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(10,14,20,.92);}
}
/* #4 high-contrast bump */
@media (prefers-contrast:more){
  .lede,.signal{color:var(--head);}
  .volhint,.stage__tap{border-color:#fff;}
}

/* ===========================================================
   THEME A · Campaign (black/red, condensed)
   =========================================================== */
body.theme-a{--bg:#0b0c0f;--ink:#e7ebf1;--ink-soft:#b4bcc9;--head:#fff;--accent:#e23b3b;
  --bar-bg:#0b0c0f;--bar-ink:#fff;--foot-bg:#0b0c0f;--foot-line:#1b1f27;--signal-bg:rgba(226,59,59,.10);
  --nav-bg:#15171c;--nav-line:#24272f;--nav-ink:#c7ccd6;--gold-lab:#e5bf5a;}
body.theme-a .content h1{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(30px,8.8vw,42px);line-height:.98;}
body.theme-a .content h1 em{color:var(--accent);font-style:normal;}
body.theme-a .appbar b{font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.03em;}

/* ===========================================================
   THEME B · Firm authority (navy + serif)
   =========================================================== */
body.theme-b{--bg:#fff;--ink:#1a202c;--ink-soft:#3f4d61;--head:#0f1e33;--accent:#0e7c86;
  --bar-bg:#1a365d;--bar-ink:#fff;--foot-bg:#fbfcfe;--foot-line:#e2e6ec;--signal-bg:#f2f8f9;
  --nav-bg:#1a365d;--nav-line:#16304f;--nav-ink:#dbe6f2;
  --urg-bg:#fff5f5;--urg-line:#f3c0c0;--urg-tag:#c0272d;--say-bg:#f2f8f9;}
body.theme-b .content h1{font-family:'Source Serif 4',Georgia,serif;font-weight:700;
  font-size:clamp(24px,6.6vw,30px);line-height:1.12;}

/* ===========================================================
   THEME C · Hybrid (win band + action)
   =========================================================== */
body.theme-c{--bg:#fff;--ink:#1a202c;--ink-soft:#3f4d61;--head:#0f1e33;--accent:#c53030;
  --bar-bg:#0f3b41;--bar-ink:#fff;--foot-bg:#fbfcfe;--foot-line:#e2e6ec;--signal-bg:#fdf3f3;
  --nav-bg:#0f3b41;--nav-line:#0b2d32;--nav-ink:#d6e8e9;
  --urg-bg:#fff5f5;--urg-line:#f3c0c0;--urg-tag:#c0272d;--say-bg:#f6fafa;}
body.theme-c .winband{flex:0 0 auto;background:linear-gradient(115deg,#0f3b41,#0e7c86);color:#fff;
  padding:12px 20px;position:relative;overflow:hidden;}
body.theme-c .winband::after{content:'';position:absolute;right:-20px;top:-20px;width:120px;height:120px;
  border-radius:50%;background:rgba(255,255,255,.06);}
body.theme-c .winband__k{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.88;}
body.theme-c .winband__v{font-family:'Source Serif 4',Georgia,serif;font-size:17px;line-height:1.15;margin-top:2px;position:relative;}
body.theme-c .content h1{font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(22px,6vw,27px);line-height:1.1;}

/* ===========================================================
   THEME D · Watts (navy + gold, PORTRAIT HERO behind text)  ★
   =========================================================== */
body.theme-d{
  --bg:#0a1526;--ink:#dbe3ef;--ink-soft:#aebdd1;--head:#fff;--accent:#e0b64f;
  --gold:#d9b048;--gold-lite:#f0d488;--navy:#1a365d;
  --bar-bg:transparent;--bar-ink:#fff;--foot-bg:#0a1526;--foot-line:rgba(217,176,72,.24);
  --brand-font:'Source Serif 4',Georgia,serif;--signal-bg:rgba(217,176,72,.09);
  --nav-bg:#0f2137;--nav-line:rgba(217,176,72,.28);--nav-ink:#cdd9e8;--gold-lab:#f0d488;}
body.theme-d .app{
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(217,176,72,.16) 0%, transparent 45%),
    linear-gradient(180deg,#12233d 0%, #0a1526 100%);}
body.theme-d .appbar{border-bottom:1px solid rgba(217,176,72,.22);}
body.theme-d .appbar b{color:var(--gold-lite);}
body.theme-d .stage__vid{border-bottom:2px solid var(--gold);}
body.theme-d .content h1{
  font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(27px,7.4vw,40px);line-height:.95;letter-spacing:.005em;color:#fff;text-wrap:balance;}
/* portrait as ambient hero behind the whole text block */
body.theme-d .content{position:relative;overflow:hidden;isolation:isolate;}
body.theme-d .content::before{
  content:'';position:absolute;z-index:-2;
  /* portrait pinned to the TOP-RIGHT — taller, nudged down */
  right:-4%;top:8%;width:56%;height:84%;
  background:url('watts-portrait.webp') no-repeat right top / contain;
  opacity:.92;
  /* feathered edges on ALL sides: a soft-edged ellipse fades the portrait into the navy */
  -webkit-mask-image:radial-gradient(ellipse 78% 82% at 68% 42%, #000 34%, rgba(0,0,0,.55) 60%, transparent 82%);
          mask-image:radial-gradient(ellipse 78% 82% at 68% 42%, #000 34%, rgba(0,0,0,.55) 60%, transparent 82%);}
body.theme-d .content::after{ /* strong LEFT scrim: opaque navy across the text column, only clearing at the far right edge for the face */
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(10,21,38,.96) 0%,rgba(10,21,38,.94) 52%,rgba(10,21,38,.72) 72%,rgba(10,21,38,.25) 88%,rgba(10,21,38,0) 100%);}
/* copy lives upper-left / lower-left; leaves the top-right clear for the face */
body.theme-d .content{justify-content:space-between;padding-top:10px;padding-bottom:8px;gap:8px;}
body.theme-d .eyebrow,body.theme-d .content h1{max-width:60%;}
body.theme-d .content h1{font-size:clamp(25px,7vw,38px);}
body.theme-d .lede{font-size:14.5px;line-height:1.4;max-width:80%;margin:0;}
body.theme-d .seg__btn{padding:4px 10px;}
body.theme-d .statusline{font-size:11.5px;line-height:1.32;}
body.theme-d .signal{font-size:11.5px;padding:6px 10px;}
body.theme-d .signal__say{font-size:11px;line-height:1.32;margin-top:4px;padding:5px 8px;}
body.theme-d .eyebrow,body.theme-d .content h1{max-width:62%;}
body.theme-d .lede,body.theme-d .statusline{max-width:60%;}
/* call-script panel: full width (stretched right) so it's shorter, with a gold treatment */
body.theme-d .signal{max-width:100%;
  background:linear-gradient(180deg,rgba(217,176,72,.16),rgba(217,176,72,.06));
  border-left:3px solid var(--gold-mid,#e5bf5a);border-radius:0 12px 12px 0;}
body.theme-d .signal figcaption{color:var(--gold-lite,#ffd977);font-weight:700;}
body.theme-d .signal__say{background:rgba(217,176,72,.10);border-left:0;color:#fff;}
body.theme-d .knock{color:var(--gold-lite);-webkit-text-fill-color:var(--gold-lite);
  text-shadow:0 2px 14px rgba(0,0,0,.5);}
body.theme-d .eyebrow{color:var(--gold-lite);}
body.theme-d .callbar__kick{color:var(--gold-lite);}
body.theme-d .callbar__num{color:#fff;}
body.theme-d .callbar__num b{color:var(--gold-lite);}

/* ===========================================================
   THEME D — polish round: legibility fix, patriotic accents,
   semantic-element styling, 20 UX/CSS upgrades
   =========================================================== */
/* [legibility] white copy over the portrait/shirt: soft dark halo so it never disappears */
body.theme-d .content h1,
body.theme-d .lede,
body.theme-d .statusline{
  text-shadow:0 1px 3px rgba(6,14,26,.85),0 0 14px rgba(6,14,26,.55);}
/* [1] skip link — keyboard/screen-reader users jump straight to the call */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--gold-lite,#f0d488);
  color:#0a1526;font-weight:800;padding:10px 16px;border-radius:0 0 10px 0;text-decoration:none;}
.skip:focus{left:0;}
/* [2] patriotic top ribbon on the video: red-white-blue hairline */
body.theme-d .flagline{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:4;
  background:linear-gradient(90deg,#b22234 0 33%,#ffffff 33% 66%,#3c5aa6 66% 100%);opacity:.9;}
body.theme-d .stage__vid{border-bottom:0;}   /* the flag ribbon replaces the gold rule */
/* [3] eyebrow gets a live red dot — "confirmed / breaking" energy */
.eyebrow__dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#e5484d;
  box-shadow:0 0 0 0 rgba(229,72,77,.6);animation:pulseDot 1.6s ease-out infinite;vertical-align:middle;}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(229,72,77,.6);}70%{box-shadow:0 0 0 6px rgba(229,72,77,0);}100%{box-shadow:0 0 0 0 rgba(229,72,77,0);}}
/* [4] figure/figcaption reset (semantic markup) */
figure{margin:0;}
.signal figcaption{color:var(--ink-soft);margin-bottom:4px;}
/* [5] blockquote reset — the say-line is a real <blockquote> now */
blockquote{margin:0;}
/* [6] the quote gets an opening gold quotation glyph */
body.theme-d .signal{position:relative;}
body.theme-d .signal__say{position:relative;}
/* [7] segmented control: rounded knob slide + active glow */
.seg__btn--on{box-shadow:0 1px 4px rgba(0,0,0,.3);}
body.theme-d .seg__btn--on{background:var(--gold-mid,#e5bf5a);color:#26200c;}
/* [8] statusline bold lead-in already gold; add a left tick */
body.theme-d .statusline b{color:var(--gold-lite,#f0d488);}
/* [9] patriotic subtle star watermark behind the FAB label (tasteful, low-opacity) */
body.theme-d .callbar{background-image:
  radial-gradient(circle at 50% 0%, rgba(60,90,166,.14), transparent 60%),
  linear-gradient(var(--foot-bg),var(--foot-bg));}
/* [10] the call FAB keeps gold but gains a thin navy inner ring = brand lockup */
body.theme-d .navcall{border-color:#0f2137;}
body.theme-d .navcall::after{border-color:var(--gold-lite,#f0d488);}
/* [11] Watch circle = gold to match the call FAB / brand */
body.theme-d .navact__circle{transition:background .18s var(--ease),border-color .18s var(--ease),transform .12s var(--ease);}
body.theme-d #watchbtn .navact__circle{
  background:radial-gradient(circle at 50% 32%,#fbe6a6,var(--gold-mid,#e5bf5a) 60%,var(--gold-lo,#b98a2c));
  border-color:var(--gold-lo,#b98a2c);color:#3a2a05;
  box-shadow:0 2px 8px rgba(184,138,44,.4),0 1px 0 rgba(255,255,255,.6) inset;}
body.theme-d #watchbtn{color:var(--gold-lite,#ffd977);}
body.theme-d #watchbtn:hover .navact__circle,
body.theme-d #watchbtn:focus-visible .navact__circle{transform:scale(1.06);}
/* [21] "Tap for sound" chip = gold on theme D */
body.theme-d .stage__tap{
  background:linear-gradient(180deg,rgba(255,217,119,.95),rgba(217,176,72,.95));
  color:#3a2a05;border-color:rgba(255,255,255,.5);font-weight:800;
  box-shadow:0 3px 10px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.5) inset;}
/* [12] the phone-number action underlines on focus/hover (it IS a link) */
body.theme-d a.navact:hover .navact__num{text-decoration:underline;text-underline-offset:2px;}
/* [13] cheerful micro-lift on the whole footer bar */
.navbar{transition:box-shadow .2s var(--ease);}
/* [14] warmer, brighter gold for the headline highlight (alegre) */
body.theme-d{--gold-lite:#ffd977;}
/* [15] headline highlight gets a faint glow so it "pops" happily */
body.theme-d .knock{text-shadow:0 0 18px rgba(255,217,119,.35),0 2px 10px rgba(0,0,0,.5);}
/* [16] lede stays crisp: cap width tighter so it never runs under the face */
body.theme-d .lede{max-width:62%;}
/* [17] eyebrow: brighter, small-caps kicker */
body.theme-d .eyebrow{color:#ffe6a6;display:inline-flex;align-items:center;gap:7px;}
/* [18] focus ring on the segmented tabs */
.seg__btn:focus-visible{outline:2px solid var(--gold-lite,#ffd977);outline-offset:2px;}
/* [19] respect reduced-motion for the new pulses/ribbon */
@media (prefers-reduced-motion:reduce){.eyebrow__dot{animation:none;}}
/* [20] the app bar brand gets a tiny patriotic underline accent */
body.theme-d .appbar b{position:relative;}
body.theme-d .appbar b::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:2px;
  background:linear-gradient(90deg,#b22234,#ffffff,#3c5aa6);border-radius:2px;opacity:.8;}

/* ===========================================================
   DESKTOP / WEB — framed phone on a themed backdrop (#15/#17/#18)
   =========================================================== */
/* ===========================================================
   WEB / DESKTOP — true horizontal layout, fits one screen.
   Only applies ≥900px; mobile (<900px) is 100% untouched.
   Video fills the LEFT; header→content→footer stack on the RIGHT.
   =========================================================== */
@media (min-width:900px){
  body{height:100dvh;overflow:hidden;display:grid;place-items:center;padding:0;}
  body.theme-d::before{content:'';position:fixed;inset:0;z-index:-1;background:
    radial-gradient(90% 70% at 100% 0%, rgba(217,176,72,.18),transparent 55%),
    linear-gradient(135deg,#12233d,#060d18);}

  /* app = full-viewport 2-column grid; video column wider */
  .app{width:100vw;height:100dvh;max-width:none;border-radius:0;box-shadow:none;
    display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:auto 1fr auto;
    grid-template-areas:"stage header" "stage main" "stage footer";animation:none;}

  /* header top-right */
  .app > .appbar{grid-area:header;border-bottom:1px solid rgba(217,176,72,.18);}
  .appbar b{max-width:none;font-size:18px;}
  .appbar span{font-size:12px;}

  /* video spans the whole left column, full height */
  .app > .stage{grid-area:stage;height:100%;border-right:2px solid var(--gold,#d9b048);}
  .stage--big .stage__vid,.stage--big.is-playing .stage__vid{height:100dvh;width:100%;object-fit:cover;transition:none;}
  .stage .flagline{height:5px;}
  /* prominent centered gold play button on web (mobile keeps the small corner chip) */
  .stage__tap{top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);
    width:96px;height:96px;border-radius:50%;padding:0;gap:0;font-size:0;overflow:hidden;
    border:0;color:transparent;
    background:radial-gradient(circle at 50% 32%,#fbe6a6,var(--gold-mid,#e5bf5a) 60%,var(--gold-lo,#b98a2c));
    box-shadow:0 12px 34px rgba(184,138,44,.6),0 2px 8px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.7) inset;
    transition:transform .15s var(--ease);align-items:center;justify-content:center;}
  body.theme-d .stage__tap{background:radial-gradient(circle at 50% 32%,#fbe6a6,var(--gold-mid,#e5bf5a) 60%,var(--gold-lo,#b98a2c));}
  .stage__tap::before,.stage__tap::after{display:none;}
  /* the play triangle, perfectly centered */
  .stage__tap{position:absolute;}
  .stage__tap .navcall__lab{display:none;}
  .stage__tap svg{display:none;}
  .stage__tap:hover{transform:translate(-50%,-50%) scale(1.06);}
  /* draw the triangle with a background image so it stays centered regardless of text */
  .stage__tap{background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M15 11 L29 20 L15 29 Z' fill='%233a2a05'/></svg>"),
    radial-gradient(circle at 50% 32%,#fbe6a6,#e5bf5a 60%,#b98a2c);
    background-repeat:no-repeat,no-repeat;background-position:center,center;}
  body.theme-d .stage__tap{background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M15 11 L29 20 L15 29 Z' fill='%233a2a05'/></svg>"),
    radial-gradient(circle at 50% 32%,#fbe6a6,#e5bf5a 60%,#b98a2c);
    background-repeat:no-repeat,no-repeat;background-position:center,center;}

  /* content = right column, vertically centered, roomy */
  .app > .content{grid-area:main;max-width:none;padding:16px 48px;justify-content:center;gap:22px;overflow:visible;}
  body.theme-d .content::before,body.theme-d .content::after{display:none;} /* portrait hero is mobile-only; web shows the video instead */
  body.theme-d .eyebrow,body.theme-d .content h1,body.theme-d .lede,body.theme-d .signal{max-width:none;}
  body.theme-d .content h1{font-size:clamp(48px,3.6vw,68px);text-shadow:none;}
  body.theme-d .lede{font-size:clamp(20px,1.7vw,26px);line-height:1.55;text-shadow:none;}
  .eyebrow{font-size:16px;}
  body.theme-d .signal{font-size:clamp(17px,1.4vw,21px);padding:20px 24px;}
  body.theme-d .signal figcaption{font-size:clamp(17px,1.4vw,21px);line-height:1.55;}

  /* footer = the most important part → make it big and prominent */
  .app > .callbar{grid-area:footer;padding:30px 40px 40px;}
  .navbar{max-width:640px;margin:0 auto;min-height:104px;border-radius:26px;
    border-color:var(--gold,#d9b048);box-shadow:0 10px 40px rgba(0,0,0,.35),0 0 0 1px rgba(217,176,72,.25) inset;}
  .navcall{width:108px;height:108px;margin-top:-52px;border-width:4px;}
  .navcall svg{width:44px;height:44px;}
  .navcall__lab{bottom:-20px;font-size:12px;}
  .navact{min-width:96px;}
  .navact__circle{width:56px;height:56px;}
  .navact svg{width:24px;height:24px;}
  .navact{font-size:12px;gap:7px;}
  .navact__num{font-size:20px;}
}

/* ===========================================================
   50 CSS REFINEMENTS — typography, touch, motion, finish
   (appended; overrides earlier rules where noted)
   =========================================================== */
/* 1 smoother font stack rendering */
body{-moz-osx-font-smoothing:grayscale;font-synthesis:none;}
/* 2 kerning + ligatures on display type */
.content h1,.appbar b{font-kerning:normal;font-feature-settings:"kern" 1,"liga" 1;}
/* 3 tabular figures so the phone number never jitters */
.navact__num,.callbar__num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
/* 4 crisper hairlines on retina */
.navbar,.appbar,.stage__vid{-webkit-transform:translateZ(0);transform:translateZ(0);}
/* 5 stage promoted to its own layer for smooth video paint */
.stage{contain:layout paint;}
.stage__vid{will-change:opacity;backface-visibility:hidden;}
/* 6 prevent layout shift while the webfont loads */
.content h1{font-size-adjust:0.52;}
@supports not (font-size-adjust:1){.content h1{font-size-adjust:none;}}
/* 7 optical margin: pull the big headline flush-left */
body.theme-a .content h1,body.theme-d .content h1{margin-left:-1px;text-indent:-1px;}
/* 8 tighten widow control on short lines */
.lede,.statusline{hyphens:none;overflow-wrap:break-word;}
/* 9 selection matches the brand accent everywhere */
::selection{background:var(--accent);color:#fff;}
::-moz-selection{background:var(--accent);color:#fff;}
/* 10 remove tap delay + callout on the whole app */
.app{touch-action:manipulation;-webkit-touch-callout:none;}
/* 11 bigger invisible hit area on the sound chip */
.stage__tap{position:absolute;}
.stage__tap::after{content:'';position:absolute;inset:-10px;}
/* 12 keyboard focus: offset ring that reads on any bg */
a:focus-visible,button:focus-visible{outline:2px solid var(--gold-lite,#f0d488);outline-offset:2px;}
/* 13 the gold FAB gets a focus halo, not a square ring */
.navcall:focus-visible{outline:none;box-shadow:0 0 0 3px var(--gold-lite,#f0d488),
  0 10px 24px rgba(184,138,44,.55),0 2px 6px rgba(0,0,0,.3);}
/* 14 side actions grow their tap target to 44px min */
.navact{min-width:56px;min-height:44px;padding:2px 4px;border-radius:12px;}
/* 15 press states feel physical */
.navact:active{background:rgba(255,255,255,.05);}
/* 16 the progress bar rounds its leading edge */
.stage__prog{border-top-right-radius:2px;border-bottom-right-radius:2px;}
/* 17 gold underline accent under the eyebrow on D */
body.theme-d .eyebrow{padding-bottom:2px;}
/* 18 smooth the video's bottom gold rule into the panel */
body.theme-d .stage__vid{box-shadow:0 2px 0 var(--gold);}
/* 19 kill the ugly blue highlight on tel/mailto links */
a[href^="tel:"],a[href^="mailto:"]{-webkit-tap-highlight-color:transparent;color:inherit;}
/* 20 signal quote gets a subtle inner shadow for depth */
.signal__say{box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 1px 2px rgba(0,0,0,.15);}
/* 21 the segmented toggle animates its knob */
.seg__btn{transition:background .18s var(--ease),color .18s var(--ease);}
/* 22 app bar text never wraps, ellipsis if cramped */
.appbar b{max-width:56%;overflow:hidden;text-overflow:ellipsis;}
/* 23 balance the appbar sublabel across two words max */
.appbar span{max-width:44%;}
/* 24 subtle divider glow under the app bar */
.appbar{box-shadow:0 1px 0 rgba(0,0,0,.25);}
/* 25 richer FAB: warm inner glow */
.navcall{background-image:radial-gradient(circle at 50% 28%,#fbe6a6 0%,var(--gold-mid,#e5bf5a) 46%,var(--gold-lo,#b98a2c) 100%);}
/* 26 the call icon sits optically centered */
.navcall svg{transform:translateY(0.5px);}
/* 27 footer lifts with a soft top gradient hairline */
.callbar{border-top:0;background-image:linear-gradient(180deg,var(--nav-line,rgba(255,255,255,.12)),transparent 2px),linear-gradient(var(--foot-bg),var(--foot-bg));}
/* 28 content uses the full width on very narrow phones */
@media (max-width:360px){.content{padding-left:16px;padding-right:16px;}}
/* 29 on very short screens, trim the video first */
@media (max-height:640px){.stage--big .stage__vid{height:20dvh;} .stage .stage__vid{aspect-ratio:2/1;}}
/* 30 …and tighten the headline there too */
@media (max-height:640px){body.theme-d .content h1{font-size:clamp(23px,6.4vw,34px);}}
/* 31 large screens: cap line length of the lede for readability */
.lede{max-width:60ch;}
/* 32 render images crisply when scaled */
.stage__vid,.navcall,.navact__circle{image-rendering:auto;}
/* 33 respect notch on landscape too */
@media (orientation:landscape){.app{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);}}
/* 34 smooth theme-color-ish scrollbar hiding (no scroll anyway) */
.app::-webkit-scrollbar{width:0;height:0;}
/* 35 the eyebrow letterspacing reads as a kicker, not a label */
.eyebrow{font-variant:all-small-caps;letter-spacing:.08em;}
/* 36 give the winband (theme C) a top sheen */
body.theme-c .winband{box-shadow:inset 0 1px 0 rgba(255,255,255,.12);}
/* 37 quote marks hang into the margin on the say-line */
.signal__say{text-indent:-0.3em;}
/* 38 prevent iOS from auto-styling the phone number */
.navact__num{-webkit-text-fill-color:currentColor;}
/* 39 gold text gets a hair of warmth via shadow */
.knock{text-shadow:0 1px 10px rgba(217,176,72,.25);}
/* 40 crisp 1px borders regardless of DPR */
.navact__circle{border-width:max(1px,0.5px);}
/* 41 the FAB label tracks wider for legibility */
.navcall__lab{letter-spacing:.06em;}
/* 42 smooth entrance for the whole app on load */
@keyframes appIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.app{animation:appIn .4s var(--ease) both;}
/* 43 …but never for reduced-motion */
@media (prefers-reduced-motion:reduce){.app{animation:none;}}
/* 44 dark-mode browser chrome hint already set per page; ensure bg meets it */
body.theme-d,body.theme-a{background-color:#0a1526;}
body.theme-a{background-color:#0b0c0f;}
/* 45 the status line bold lead-in gets a gold tint on D */
body.theme-d .statusline b{color:var(--gold-lite,#f0d488);}
/* 46 tidy: no stray margins collapse at the content edges */
.content>*:first-child{margin-top:0;}
.content>*:last-child{margin-bottom:0;}
/* 47 the video poster fades, never pops */
.stage__vid{transition:opacity .5s var(--ease),filter .5s var(--ease);}
/* 48 print/screenshot friendliness: solid bg */
@media print{.app{box-shadow:none;} .stage__tap,.volhint{display:none;}}
/* 49 high-DPI: sharpen the gold vignette banding */
@supports (background:paint(x)){body.theme-d .app{background-attachment:fixed;}}
/* 50 final guard: nothing can force a horizontal scrollbar */
html,body,.app{max-width:100%;overflow-x:hidden;}