/* =====================================================================================
   ActionRefinance.com: shared design system ("The Porchlight Detail")
   See ../DESIGN.md. Fonts (load in each page <head>):
   https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,400..800;1,62..125,400..800&family=Big+Shoulders:opsz,wght@10..72,600..900&family=Big+Shoulders+Stencil:opsz,wght@10..72,700..900&display=swap
   Built by Thunderbird Agency.
   ===================================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  color-scheme: light;
  --paper:#E3E6E0; --paper-2:#D5DAD2; --card:#F2F3EE;
  --ink:#1A2126; --ink-2:#4A555C; --rule:rgba(26,33,38,.22); --rule-strong:rgba(26,33,38,.55);
  --signal:#E2501C; --signal-ink:#A83A0E; --on-signal:#160C06;
  --blueprint:#1D4C84; --blueprint-wash:rgba(29,76,132,.08);
  --charge:#F2C200; --charge-glow:rgba(242,194,0,.38);
  --primer:#99A2A5;
  --ok:#2F6B3A; --warn:#8A5A00; --err:#A3251B;
  --pin-shadow:rgba(26,33,38,.28);
  --grain-opacity:.035;

  --f-title:"Big Shoulders Stencil", "Big Shoulders", Impact, "Arial Narrow", sans-serif;
  --f-readout:"Big Shoulders", "Arial Narrow", sans-serif;
  --f-text:"Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* fluid scale, 375px to 1280px */
  --t-title:clamp(56px, 2.2rem + 9.6vw, 152px);
  --t-1:clamp(38px, 1.6rem + 3.2vw, 64px);
  --t-2:clamp(28px, 1.3rem + 1.4vw, 40px);
  --t-3:clamp(21px, 1.15rem + .55vw, 26px);
  --t-body:clamp(17px, 1rem + .12vw, 18px);
  --t-small:clamp(14.5px, .88rem + .06vw, 15px);
  --t-readout:clamp(44px, 1.8rem + 5.6vw, 96px);

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:72px; --s-9:112px;
  --gutter-l:max(16px, env(safe-area-inset-left)); --gutter-r:max(16px, env(safe-area-inset-right));
  --maxw:1240px; --measure:62ch;

  --ease-dolly:cubic-bezier(.2,.7,.1,1);
  --d-fast:160ms; --d-state:320ms; --d-title:700ms;

  --header-h:64px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#12181C; --paper-2:#1A2227; --card:#1F282E;
    --ink:#E5E8E2; --ink-2:#A6AFB2; --rule:rgba(229,232,226,.18); --rule-strong:rgba(229,232,226,.5);
    --signal:#FF6B2E; --signal-ink:#FF9363; --on-signal:#160C06;
    --blueprint:#79A6E2; --blueprint-wash:rgba(121,166,226,.1);
    --charge:#FFD21A; --charge-glow:rgba(255,210,26,.32);
    --primer:#56626A;
    --ok:#7CC48A; --warn:#E6B44C; --err:#FF8A7A;
    --pin-shadow:rgba(0,0,0,.5);
    --grain-opacity:.05;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#12181C; --paper-2:#1A2227; --card:#1F282E;
  --ink:#E5E8E2; --ink-2:#A6AFB2; --rule:rgba(229,232,226,.18); --rule-strong:rgba(229,232,226,.5);
  --signal:#FF6B2E; --signal-ink:#FF9363; --on-signal:#160C06;
  --blueprint:#79A6E2; --blueprint-wash:rgba(121,166,226,.1);
  --charge:#FFD21A; --charge-glow:rgba(255,210,26,.32);
  --primer:#56626A;
  --ok:#7CC48A; --warn:#E6B44C; --err:#FF8A7A;
  --pin-shadow:rgba(0,0,0,.5);
  --grain-opacity:.05;
}
@media (min-width:768px){ :root{ --gutter-l:32px; --gutter-r:32px; } }
@media (min-width:1200px){ :root{ --gutter-l:48px; --gutter-r:48px; --header-h:72px; } }

/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:calc(var(--header-h) + 16px); }
body{
  margin:0; min-height:100svh; overflow-x:hidden;
  background:var(--paper); color:var(--ink);
  font-family:var(--f-text); font-size:var(--t-body); line-height:1.55;
  font-variation-settings:"wdth" 100; font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* film grain: one fixed layer, never intercepts input */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:100; opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-transparency: reduce){ body::after{ display:none; } }
img,svg,video,canvas,picture{ display:block; max-width:100%; }
img,video{ height:auto; }
a{ color:var(--signal-ink); text-decoration-thickness:.08em; text-underline-offset:.18em; }
a:hover{ text-decoration-thickness:.14em; }
p{ margin:0 0 1em; max-width:var(--measure); }
ul,ol{ padding-left:1.25em; max-width:var(--measure); }
li+li{ margin-top:.35em; }
hr{ border:0; border-top:1px solid var(--rule); margin:var(--s-7) 0; }
b,strong{ font-weight:700; }
small,.small{ font-size:var(--t-small); font-variation-settings:"wdth" 88; line-height:1.5; }
::selection{ background:var(--charge); color:#1A2126; }
[hidden]{ display:none !important; }

/* focus: always visible, never removed */
:focus{ outline:none; }
:focus-visible{ outline:3px solid var(--signal-ink); outline-offset:3px; border-radius:2px; }
.btn:focus-visible,.choice input:focus-visible+span{ outline:3px solid var(--signal-ink); outline-offset:3px; }

.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:var(--gutter-l); top:-100px; z-index:200; background:var(--ink); color:var(--paper); padding:10px 14px; font-weight:700; text-decoration:none; }
.skip:focus{ top:8px; }

/* ---------- 3. Typography ---------- */
h1,h2,h3,h4{ margin:0 0 .45em; line-height:1.06; font-weight:800; text-wrap:balance; }
h1,.h1{ font-size:var(--t-1); font-variation-settings:"wdth" 112; letter-spacing:-.012em; }
h2,.h2{ font-size:var(--t-2); font-variation-settings:"wdth" 112; letter-spacing:-.008em; }
h3,.h3{ font-size:var(--t-3); font-variation-settings:"wdth" 104; line-height:1.15; }
h4,.h4{ font-size:var(--t-body); font-variation-settings:"wdth" 100; font-weight:700; }
.lede{ font-size:clamp(19px, 1.05rem + .5vw, 23px); line-height:1.45; max-width:34ch; color:var(--ink); }
.lede-wide{ max-width:52ch; }
.muted{ color:var(--ink-2); }
.narrator{ font-style:italic; color:var(--ink-2); font-variation-settings:"wdth" 96; }
.readout{ font-family:var(--f-readout); font-weight:800; font-size:var(--t-readout); line-height:.9; font-variant-numeric:tabular-nums lining-nums; letter-spacing:-.01em; }
.readout-sm{ font-family:var(--f-readout); font-weight:800; font-size:clamp(28px, 1.3rem + 1.6vw, 44px); line-height:1; font-variant-numeric:tabular-nums; }
.num{ font-variant-numeric:tabular-nums; }

/* Title card: the stencil moment. Caps only here. */
.title-card{
  font-family:var(--f-title); font-weight:900; font-size:var(--t-title); line-height:.86;
  letter-spacing:-.01em; text-transform:uppercase; margin:0; font-variation-settings:"opsz" 72;
  color:var(--ink);
}
.title-card .tc-line{ display:block; }
.title-card .tc-sub{
  display:block; margin-top:.35em; font-family:var(--f-text); text-transform:none; font-weight:700;
  font-size:var(--t-3); line-height:1.2; letter-spacing:0; font-variation-settings:"wdth" 125;
}
/* spray reveal: only when JS adds .is-spraying, so text is visible without JS */
.title-card.is-spraying .tc-line{ animation:ar-spray var(--d-title) var(--ease-dolly) both; }
.title-card.is-spraying .tc-line:nth-child(2){ animation-delay:120ms; }
.title-card.is-spraying .tc-line:nth-child(3){ animation-delay:240ms; }
.title-card.is-spraying .tc-sub{ animation:ar-cut 1ms steps(1) 820ms both; }
@keyframes ar-spray{
  from{ clip-path:inset(0 100% 0 0); filter:blur(3px); }
  70%{ filter:blur(.6px); }
  to{ clip-path:inset(0 0 0 0); filter:none; }
}
@keyframes ar-cut{ from{ visibility:hidden; } to{ visibility:visible; } }

/* ---------- 4. Layout primitives ---------- */
.wrap{ width:100%; max-width:calc(var(--maxw) + var(--gutter-l) + var(--gutter-r)); margin:0 auto; padding-left:var(--gutter-l); padding-right:var(--gutter-r); }
.section{ padding-block:var(--s-8); }
@media (min-width:1024px){ .section{ padding-block:var(--s-9); } }
.section-tight{ padding-block:var(--s-7); }
.stack>*+*{ margin-top:var(--s-4); }
.stack-lg>*+*{ margin-top:var(--s-6); }
.cluster{ display:flex; flex-wrap:wrap; gap:var(--s-3); align-items:center; }

/* The slate: main content cols 1-8, margin rail cols 10-12 */
.slate{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-5); }
@media (min-width:1024px){
  .slate{ grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:24px; }
  .slate>.slate-main{ grid-column:1 / span 8; }
  .slate>.slate-rail{ grid-column:10 / span 3; }
  .slate>.slate-full{ grid-column:1 / -1; }
  .slate>.slate-offset{ grid-column:3 / span 8; }
}
.slate-rail{ font-size:var(--t-small); font-variation-settings:"wdth" 88; color:var(--ink-2); line-height:1.5; }
.slate-rail>*+*{ margin-top:var(--s-4); }
@media (min-width:1024px){ .slate-rail{ border-left:1px solid var(--rule); padding-left:var(--s-4); align-self:start; position:sticky; top:calc(var(--header-h) + 24px); } }

.grid-2{ display:grid; gap:var(--s-5); grid-template-columns:minmax(0,1fr); }
.grid-3{ display:grid; gap:var(--s-5); grid-template-columns:minmax(0,1fr); }
@media (min-width:768px){ .grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* Slate rule: act divider, used only where content is a real sequence */
.act-rule{ max-width:none; display:flex; align-items:center; gap:var(--s-3); margin:0 0 var(--s-6); font-weight:700; font-size:var(--t-small); font-variation-settings:"wdth" 112; color:var(--ink-2); }
.act-rule::after{ content:""; flex:1; border-top:2px solid var(--ink); }

/* ---------- 5. Header and nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter:saturate(1.2) blur(8px); backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--rule); padding-top:env(safe-area-inset-top);
}
@supports not (background:color-mix(in srgb, red 50%, blue)){ .site-header{ background:var(--paper); } }
.site-header .wrap{ display:flex; align-items:center; gap:var(--s-4); min-height:var(--header-h); }
.brand{ display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; margin-right:auto; min-width:0; }
.brand svg{ width:30px; height:30px; flex:none; color:var(--ink); }
.brand-word{ font-family:var(--f-readout); font-weight:800; font-size:24px; letter-spacing:.005em; line-height:1; white-space:nowrap; }
.brand-word span{ color:var(--signal-ink); }
.nav{ display:none; }
.nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:var(--s-1); max-width:none; }
.nav li+li{ margin:0; }
.nav a{ display:block; padding:10px 12px; color:var(--ink); text-decoration:none; font-weight:600; font-size:15.5px; font-variation-settings:"wdth" 100; border-radius:2px; }
.nav a:hover{ background:var(--paper-2); }
.nav a[aria-current="page"]{ box-shadow:inset 0 -3px 0 var(--signal); }
.header-call{ display:none; }
.theme-btn,.menu-btn{
  appearance:none; border:1px solid var(--rule-strong); background:transparent; color:var(--ink);
  width:44px; height:44px; border-radius:3px; display:inline-grid; place-items:center; cursor:pointer; flex:none;
}
.theme-btn svg,.menu-btn svg{ width:22px; height:22px; }
.theme-btn:hover,.menu-btn:hover{ background:var(--paper-2); }
@media (min-width:1024px){
  .nav{ display:block; }
  .menu-btn{ display:none; }
  .header-call{ display:inline-flex; }
}
/* mobile menu sheet */
.menu-sheet{
  position:fixed; inset:calc(var(--header-h) + env(safe-area-inset-top)) 0 0 0; z-index:49; background:var(--paper);
  padding:var(--s-5) var(--gutter-r) calc(var(--s-6) + env(safe-area-inset-bottom)) var(--gutter-l);
  overflow-y:auto; border-top:2px solid var(--ink);
}
.menu-sheet ul{ list-style:none; margin:0; padding:0; max-width:none; }
.menu-sheet li+li{ margin:0; border-top:1px solid var(--rule); }
.menu-sheet li a{ display:block; padding:16px 0; font-size:26px; font-weight:800; font-variation-settings:"wdth" 112; color:var(--ink); text-decoration:none; }
.menu-sheet li a[aria-current="page"]{ color:var(--signal-ink); }
.menu-sheet .btn{ margin-top:var(--s-5); width:100%; }
body.menu-open{ overflow:hidden; }
@media (min-width:1024px){ .menu-sheet{ display:none !important; } }

/* ---------- 6. Buttons ---------- */
.btn{
  appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:12px 20px; border-radius:3px; border:2px solid var(--ink);
  font:inherit; font-weight:700; font-size:17px; font-variation-settings:"wdth" 104; line-height:1.15;
  text-decoration:none; cursor:pointer; color:var(--ink); background:transparent;
  transition:transform var(--d-fast) var(--ease-dolly), background-color var(--d-fast), box-shadow var(--d-fast);
}
.btn svg{ width:20px; height:20px; flex:none; }
.btn-primary{ background:var(--signal); border-color:var(--signal); color:var(--on-signal); box-shadow:0 3px 0 var(--ink); }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 4px 0 var(--ink); }
.btn-primary:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--ink); }
.btn-secondary:hover{ background:var(--paper-2); }
.btn-ghost{ border-color:transparent; padding-inline:8px; text-decoration:underline; text-underline-offset:.2em; }
.btn-call .readout-inline{ font-family:var(--f-readout); font-weight:800; font-size:20px; font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-block{ width:100%; }

/* ---------- 7. Forms ---------- */
.form{ display:grid; gap:var(--s-5); max-width:560px; }
.field{ display:grid; gap:6px; }
.field label,.field .label{ font-weight:700; font-size:16px; font-variation-settings:"wdth" 100; }
.field .hint{ font-size:var(--t-small); color:var(--ink-2); font-variation-settings:"wdth" 88; margin:0; }
.input,.field input[type="text"],.field input[type="tel"],.field input[type="email"],.field input[type="number"],.field select,.field textarea{
  width:100%; min-height:50px; padding:12px 14px; border-radius:2px; font:inherit; font-size:18px; color:var(--ink);
  background:var(--card); border:2px solid var(--rule-strong); box-shadow:inset 0 2px 0 rgba(0,0,0,.04);
}
.field textarea{ min-height:120px; resize:vertical; line-height:1.45; }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:var(--ink); }
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{ outline:3px solid var(--signal-ink); outline-offset:1px; border-color:var(--ink); }
.field [aria-invalid="true"]{ border-color:var(--err); }
.field .err{ color:var(--err); font-weight:600; font-size:var(--t-small); min-height:0; margin:0; }
.field .err:empty{ display:none; }
.money{ position:relative; }
.money::before{ content:"$"; position:absolute; left:14px; top:50%; transform:translateY(-50%); font-weight:700; color:var(--ink-2); pointer-events:none; }
.money input{ padding-left:30px !important; font-family:var(--f-readout); font-weight:700; font-size:24px !important; font-variant-numeric:tabular-nums; }
.code-input{ font-family:var(--f-readout) !important; font-weight:800; font-size:28px !important; letter-spacing:.18em; text-transform:lowercase; }

/* choice chips (survey); real radios, visible focus */
.choices{ display:flex; flex-wrap:wrap; gap:var(--s-2); border:0; padding:0; margin:0; min-width:0; }
.choices legend{ font-weight:700; margin-bottom:var(--s-3); padding:0; font-size:var(--t-3); font-variation-settings:"wdth" 104; line-height:1.2; }
.choice{ position:relative; }
.choice input{ position:absolute; opacity:0; width:1px; height:1px; }
.choice span{
  display:inline-flex; align-items:center; gap:8px; min-height:46px; padding:10px 16px; cursor:pointer;
  border:2px solid var(--rule-strong); border-radius:2px; background:var(--card); font-weight:600; font-size:16.5px;
}
.choice span::before{ content:""; width:14px; height:14px; border:2px solid var(--ink); border-radius:50%; flex:none; }
.choice input:checked+span{ border-color:var(--ink); background:var(--ink); color:var(--paper); }
.choice input:checked+span::before{ background:var(--charge); border-color:var(--charge); box-shadow:0 0 0 3px var(--ink); }
.choice input:hover+span{ border-color:var(--ink); }

/* consent block: the box is optional and unchecked; the text is rendered from window.AR_CONSENT */
.consent{ display:grid; grid-template-columns:28px minmax(0,1fr); gap:12px; align-items:start; padding:var(--s-4); background:var(--paper-2); border-left:3px solid var(--ink); }
.consent input{ width:24px; height:24px; margin:2px 0 0; accent-color:var(--ink); }
.consent label{ font-size:var(--t-small); line-height:1.5; font-variation-settings:"wdth" 92; font-weight:400; }
.consent-note{ font-size:var(--t-small); color:var(--ink-2); margin:0; }
/* consent wording is rendered by script from CONSENT_LANGUAGE; without script, no box shows at all */
html:not(.js) .consent, html:not(.js) .consent-note{ display:none; }
.hp{ position:absolute !important; left:-10000px !important; width:1px; height:1px; overflow:hidden; }

.form-alert{ padding:var(--s-3) var(--s-4); border-left:4px solid var(--err); background:color-mix(in srgb, var(--err) 10%, var(--card)); font-weight:600; }
.form-status{ font-size:var(--t-small); color:var(--ink-2); }

/* ---------- 8. Surfaces with hierarchy ---------- */
/* Plan board: recessed surface with 8mm grid */
.board{
  position:relative; background-color:var(--paper-2); border:1px solid var(--rule);
  background-image:linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size:32px 32px; background-position:-1px -1px; padding:var(--s-6) var(--s-5);
}
/* Index card: pinned, fixed tilt set per card with --tilt */
.index-card{
  --tilt:0deg; position:relative; background:var(--card); color:var(--ink); padding:var(--s-6) var(--s-5) var(--s-5);
  border-radius:2px; transform:rotate(var(--tilt)); box-shadow:2px 6px 0 -2px var(--pin-shadow);
  background-image:linear-gradient(transparent 38px, var(--signal) 38px, var(--signal) 39.5px, transparent 39.5px);
  background-repeat:no-repeat;
}
.index-card::before{ /* pushpin */
  content:""; position:absolute; top:10px; left:50%; width:14px; height:14px; margin-left:-7px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #ff9a6b, var(--signal) 55%, #7a2508); box-shadow:2px 3px 2px var(--pin-shadow);
}
.index-card h3{ margin-top:var(--s-2); }
.tilt-a{ --tilt:-.9deg; } .tilt-b{ --tilt:.6deg; } .tilt-c{ --tilt:-.4deg; } .tilt-d{ --tilt:1.1deg; }
@media (max-width:479px){ .index-card{ --tilt:0deg; } }

/* Dossier: folder with a tab; for forms and the licensing file */
.dossier{ position:relative; margin-top:30px; background:var(--card); border:1px solid var(--rule-strong); border-radius:0 3px 3px 3px; padding:var(--s-6) var(--s-5); }
.dossier::before{
  content:attr(data-tab); position:absolute; left:-1px; top:-31px; height:31px; padding:6px 16px 0;
  background:var(--card); border:1px solid var(--rule-strong); border-bottom:0; border-radius:3px 3px 0 0;
  font-weight:700; font-size:14.5px; font-variation-settings:"wdth" 100; color:var(--ink-2); white-space:nowrap; max-width:calc(100% - 24px); overflow:hidden; text-overflow:ellipsis;
}
@media (min-width:768px){ .dossier{ padding:var(--s-7) var(--s-7); } }

/* Notice: taped strip; tone with .notice-caveat / .notice-info / .notice-demo */
.notice{ position:relative; padding:var(--s-4) var(--s-5); background:var(--card); border-left:4px solid var(--ink); font-size:var(--t-small); line-height:1.5; font-variation-settings:"wdth" 92; max-width:68ch; }
.notice>*:last-child{ margin-bottom:0; }
.notice-caveat{ border-left-color:var(--blueprint); background:var(--blueprint-wash); }
.notice-info{ border-left-color:var(--charge); }
.notice-demo{
  border:0; color:#1A2126; font-weight:700;
  background:repeating-linear-gradient(-45deg, var(--charge) 0 14px, #E9B800 14px 28px);
}
.tape::before{ content:""; position:absolute; top:-9px; left:24px; width:72px; height:18px; background:rgba(242,194,0,.55); transform:rotate(-2deg); }

/* Caveat placed beside a claim (in the rail on desktop, under the claim on phones) */
.caveat{ font-size:var(--t-small); color:var(--ink-2); font-variation-settings:"wdth" 88; line-height:1.5; padding-left:var(--s-3); border-left:2px solid var(--blueprint); max-width:60ch; }
.caveat b{ color:var(--ink); }

/* Chips (property facts) */
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; }
.chip{ display:inline-block; padding:4px 10px; border:1px solid var(--rule-strong); border-radius:2px; font-weight:600; font-size:15px; font-variant-numeric:tabular-nums; }

/* Steps: only for real sequences */
.steps{ list-style:none; margin:0; padding:0; counter-reset:step; display:grid; gap:var(--s-6); max-width:none; }
.steps>li{ counter-increment:step; display:grid; grid-template-columns:56px minmax(0,1fr); gap:var(--s-4); margin:0; }
.steps>li::before{ content:counter(step); font-family:var(--f-title); font-weight:900; font-size:56px; line-height:.8; color:var(--signal); }

/* Roll call */
.rollcall{ display:grid; gap:var(--s-6); grid-template-columns:minmax(0,1fr); }
@media (min-width:768px){ .rollcall{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.roll{ position:relative; }
.roll-frame{ position:relative; aspect-ratio:4/5; background:var(--paper-2); overflow:hidden; border:1px solid var(--rule); }
.roll-frame>img,.roll-frame>video,.roll-frame>svg{ width:100%; height:100%; object-fit:cover; }
.roll-name{
  position:absolute; left:0; bottom:12%; padding:8px 14px 10px; background:var(--ink); color:var(--paper);
  font-family:var(--f-title); font-weight:900; text-transform:uppercase; font-size:clamp(28px, 1.2rem + 1.6vw, 40px); line-height:.9; max-width:92%;
}
.roll-name small{ display:block; font-family:var(--f-text); text-transform:none; font-weight:600; font-size:14px; letter-spacing:0; margin-top:4px; color:inherit; opacity:.86; font-variation-settings:"wdth" 112; }
.roll.is-frozen .roll-frame{ animation:ar-freeze 220ms steps(2) 1; }
@keyframes ar-freeze{ 0%{ filter:brightness(2.2) contrast(.6); } 100%{ filter:none; } }

/* ---------- 9. Hero and scene ---------- */
.hero{ position:relative; isolation:isolate; padding-block:var(--s-7) var(--s-8); }
@media (min-width:1024px){ .hero{ padding-block:var(--s-8) var(--s-9); } }
.scene{ position:relative; width:100%; aspect-ratio:4/3; background:var(--paper-2); overflow:hidden; border:1px solid var(--rule); }
@media (min-width:1024px){ .scene{ aspect-ratio:16/10; } }
.scene>.scene-poster,.scene>picture,.scene>video,.scene>canvas{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.scene>canvas{ opacity:0; transition:opacity 500ms var(--ease-dolly); }
.scene.is-live>canvas{ opacity:1; }
.scene.is-live>.scene-poster{ visibility:hidden; }
.scene-caption{ margin-top:var(--s-2); font-size:var(--t-small); color:var(--ink-2); }

/* media slot: a designed fallback sits underneath; the <video> covers it once it can play */
.media-slot{ position:relative; overflow:hidden; background:var(--paper-2); }
.media-slot>.media-fallback{ position:absolute; inset:0; width:100%; height:100%; }
.media-slot>video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 400ms; }
.media-slot.is-playing>video{ opacity:1; }

/* Porchlight */
.porchlight{ --glow:0; color:var(--ink); }
.porchlight .bulb{ fill:color-mix(in srgb, var(--charge) calc(var(--glow) * 100%), var(--primer)); transition:fill 120ms steps(2); }
.porchlight .halo{ opacity:var(--glow); transition:opacity 600ms var(--ease-dolly); }
.porchlight.is-on{ --glow:1; }

/* ---------- 10. Meter (vertical cell fallback for the core) ---------- */
.meter{ display:grid; grid-template-columns:72px minmax(0,1fr); gap:var(--s-5); align-items:stretch; }
.meter-cell{ position:relative; height:320px; border:2px solid var(--ink); background:var(--card); display:flex; flex-direction:column-reverse; overflow:hidden; }
.meter-seg{ flex:none; height:0; transition:height 900ms var(--ease-dolly); }
.seg-owe{ background:var(--primer); }
.seg-use{ background:var(--charge); box-shadow:0 0 18px var(--charge-glow) inset; }
.seg-heloc{ background:repeating-linear-gradient(45deg, var(--blueprint) 0 3px, transparent 3px 8px); }
.seg-stay{ background:transparent; }
.meter-legend{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s-3); align-content:start; max-width:none; }
.meter-legend li{ display:grid; grid-template-columns:16px minmax(0,1fr); gap:10px; margin:0; font-size:var(--t-small); }
.meter-legend i{ width:16px; height:16px; margin-top:3px; border:1px solid var(--ink); }

/* ---------- 11. Footer with full licensing ---------- */
.site-footer{ --foot-fg:var(--paper); --foot-bg:var(--ink); margin-top:var(--s-8); background:var(--foot-bg); color:var(--foot-fg); padding:var(--s-8) 0 calc(var(--s-7) + env(safe-area-inset-bottom)); }
.site-footer a{ color:var(--foot-fg); }
.site-footer .wrap{ display:grid; gap:var(--s-6); }
@media (min-width:1024px){ .site-footer .wrap{ grid-template-columns:5fr 4fr 3fr; column-gap:var(--s-7); } }
.foot-sign{ display:flex; gap:12px; align-items:center; }
.foot-sign svg{ width:40px; height:40px; color:var(--charge); flex:none; }
.foot-call{ font-family:var(--f-readout); font-weight:800; font-size:clamp(32px, 1.4rem + 1.8vw, 48px); line-height:1; text-decoration:none; font-variant-numeric:tabular-nums; display:inline-block; margin-top:var(--s-3); }
.foot-nav ul{ list-style:none; margin:0; padding:0; columns:2; column-gap:var(--s-5); max-width:none; }
.foot-nav li{ margin:0 0 10px; break-inside:avoid; }
.foot-nav a{ text-decoration:none; font-weight:600; }
.foot-nav a:hover{ text-decoration:underline; }
.foot-legal{ grid-column:1 / -1; border-top:1px solid rgba(255,255,255,.2); padding-top:var(--s-5); font-size:var(--t-small); font-variation-settings:"wdth" 88; line-height:1.55; color:var(--foot-fg); opacity:.86; }
.foot-legal p{ max-width:110ch; }
.ehl{ display:inline-flex; align-items:center; gap:10px; font-weight:700; }
.ehl svg{ width:34px; height:34px; flex:none; }
/* dark: --ink flips light, so the footer gets its own darker floor and light text */
:root[data-theme="dark"] .site-footer{ --foot-bg:#0B0F12; --foot-fg:var(--ink); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .site-footer{ --foot-bg:#0B0F12; --foot-fg:var(--ink); } }

/* ---------- 12. States: reveal, count, reduced motion ---------- */
/* .reveal is visible at rest. site.js may add .is-settling for a short transform settle only. */
.reveal.is-settling{ animation:ar-settle var(--d-state) var(--ease-dolly) both; }
@keyframes ar-settle{ from{ transform:translateY(8px); } to{ transform:none; } }
.cut-flash{ animation:ar-flash 90ms steps(1) 1; }
@keyframes ar-flash{ 0%{ background-color:var(--ink); color:var(--paper); } 100%{ background-color:transparent; } }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:1ms !important; animation-iteration-count:1 !important; transition-duration:1ms !important; scroll-behavior:auto !important; }
  .title-card.is-spraying .tc-line,.title-card.is-spraying .tc-sub{ animation:none !important; clip-path:none; filter:none; visibility:visible; }
}

/* ---------- 13. Utilities ---------- */
.u-mt-0{ margin-top:0 !important; } .u-mb-0{ margin-bottom:0 !important; }
.u-mt-4{ margin-top:var(--s-4); } .u-mt-5{ margin-top:var(--s-5); } .u-mt-6{ margin-top:var(--s-6); } .u-mt-7{ margin-top:var(--s-7); }
.u-ink2{ color:var(--ink-2); } .u-signal{ color:var(--signal-ink); }
.u-paper2{ background:var(--paper-2); }
.u-wide{ font-variation-settings:"wdth" 125; } .u-narrow{ font-variation-settings:"wdth" 80; }
.u-nowrap{ white-space:nowrap; }
.u-measure{ max-width:var(--measure); }
.u-full{ width:100%; }
.icon{ width:24px; height:24px; flex:none; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:square; stroke-linejoin:miter; }

/* ---------- 14. Print ---------- */
@media print{
  body::after,.site-header,.menu-sheet,.scene canvas,.media-slot video,.theme-btn{ display:none !important; }
  body{ background:#fff; color:#000; }
  .site-footer{ --foot-bg:#fff; --foot-fg:#000; }
}

.site-footer :focus-visible{ outline-color:var(--charge); }

/* ---------- 15. Page-agnostic fix (appended by the home page build) ----------
   .btn (section 6) is declared after .header-call (section 5) with equal specificity, so its
   display:inline-flex was showing the header call button on phones. Re-assert the header rule. */
.site-header .header-call{ display:none; }
@media (min-width:1024px){ .site-header .header-call{ display:inline-flex; } }

/* 16. Licensed company name under the brand, on every page and screen size */
.brand-txt{ display:grid; gap:3px; min-width:0; }
.brand-sub{ font-size:12.5px; font-weight:500; line-height:1.2; color:var(--ink-2); white-space:nowrap; }
@media (max-width:479px){ .brand-nmls{ display:none; } .brand-sub{ font-size:11.5px; } }
@media (max-width:359px){ .brand-sub{ font-size:11px; } }