/* CourtAlert Brand Guidelines v0.3 layer, with Apple interface craft (2026-10-16).
   Loaded last on every page, after styles.css, ca-header.css and any component CSS.
   It maps the old tokens onto the v0.3 system and overrides what v0.3 no longer allows.
   Remove this one <link> to roll a page back to the v0.2 look.

   v0.3 rules applied: blue leads and red flags (red only on the primary button or one alert),
   Spectral headlines, DM Sans for everything else, square corners (buttons 2px), no shadows,
   no colored side bars, 8px spacing, 2px focus ring. Daylight only: no Night or dark-mode theme on the website.
   Apple craft applied: size-specific tracking and leading, optical sizing, instant press feedback,
   a translucent section bar, critically damped easing, and reduced motion, transparency and contrast. */

/* ---------- 1. Tokens: v0.3 palette and semantic roles (Daylight only) ---------- */
:root {
  --navy:#002d72; --red:#ba0021; --ink:#17171e; --slate:#1b262c; --midnight:#0b1c40; --navy-800:#19315b;
  --deep-blue:#0b4c76; --cobalt:#1774ba; --sky:#3382b9; --ice:#bce1f7; --mist:#f5fbfe;
  --gray-300:#c7cbd2; --gray-200:#e4e7ec; --steel:#4a5568; --white:#fff;

  --surface:var(--mist); --surface-raised:var(--white); --surface-brand:var(--navy); --surface-deep:var(--midnight);
  --text:var(--ink); --text-heading:var(--navy); --text-muted:var(--steel);
  --text-on-brand:var(--white); --text-on-brand-muted:var(--gray-300); --accent-on-brand:var(--ice);
  --link:var(--cobalt); --icon:var(--navy); --tint:var(--ice); --on-tint:var(--navy);
  --action:var(--red); --on-action:var(--white); --action-secondary:var(--navy); --on-action-secondary:var(--white);
  --focus-ring:var(--cobalt); --field-border:#8a93a3; --hover-fill:#eaf3fa;

  /* old names, pointed at v0.3 values so every existing rule picks them up */
  --paper:var(--surface); --muted:var(--text-muted); --muted-dark:var(--gray-300);
  --rule:var(--gray-200); --rule-dark:rgba(255,255,255,.2);
  --navy-700:var(--navy-800); --navy-200:var(--gray-300);

  --display:"Spectral",Georgia,serif;
  --body:"DM Sans",Calibri,Arial,sans-serif;
  --mono:"DM Sans",Calibri,Arial,sans-serif;          /* IBM Plex Mono is dropped in v0.3; labels use DM Sans caps */
  --quote:"Space Grotesk",Arial,sans-serif;

  /* motion: calm, no bounce. Critically damped feel (Apple damping 1.0) */
  --ease:cubic-bezier(.25,1,.5,1);
  --ease-press:cubic-bezier(.3,0,.2,1);
  --dur-press:100ms; --dur-ui:240ms;
  color-scheme:only light;
}

/* ---------- 2. Type: Spectral display, DM Sans text, size-specific tracking ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font:400 16px/24px var(--body);color:var(--text);background:var(--surface);font-optical-sizing:auto;
  text-rendering:optimizeLegibility;transition:background-color .3s var(--ease),color .3s var(--ease)}
h1,h2,h3{color:var(--text-heading);font-optical-sizing:auto;text-wrap:balance}
h1{font-size:clamp(38px,4.6vw,56px);line-height:1.04;letter-spacing:-.025em}
.hero-home h1{font-size:clamp(40px,5.4vw,64px);line-height:1.02;letter-spacing:-.028em}
h2{font-size:clamp(30px,3.4vw,42px);line-height:1.08;letter-spacing:-.025em}
.dark h2,.cta-band h2{font-size:clamp(30px,3.4vw,42px);line-height:1.08}
h3{letter-spacing:-.02em}
h4{font:600 18px/1.3 var(--body);letter-spacing:-.005em;color:var(--text-heading)}
p,li{text-wrap:pretty}
.lead{font-size:20px;line-height:30px;color:var(--text);letter-spacing:-.005em}
.navy h1,.navy h2,.navy h3,.navy h4,.dark h1,.dark h2,.dark h3,.dark h4,.fblock.big h3,.sec h4{color:var(--text-on-brand)}
.navy .lead,.dark .lead{color:#e8edf5}
.toggle-card{background:var(--surface-brand);color:var(--text-on-brand)}
.toggle-card h3,.toggle-card .eyebrow{color:var(--text-on-brand)}
.toggle-card .eyebrow{color:var(--accent-on-brand)}
.tone{color:var(--text-muted)}
.navy .tone,.dark .tone{color:var(--text-on-brand-muted)}
/* numbers: tabular, lining, tightly tracked at display sizes */
.stat .num,.pc .num,.cx-big,.est-num,.est-cases,.cx-val,.cx-stats .n,.tl .yr,.price-table td.p,.code,.cx-row .v,.cal span,.cx-math{
  font-variant-numeric:tabular-nums lining-nums}
.stat .num,.pc .num,.cx-big,.est-num{letter-spacing:-.03em}
.stat .num,.pc .num,.tl .yr,.price-table td.p,.cx-stats .n,.est-num,.cx-with,.cx-save,.est-cases,.cx-val,.cx-row.tot .v{color:var(--text-heading)}
.cx-cost{color:var(--text)}

/* label style (eyebrows, folios, small caps): DM Sans 600, 11px, +14% tracking */
.eyebrow,.micro,.stat .lbl,.logos .lbl,.mega h5,.opener-bar,.pcard .idx,.prod .tag,.new,.slot,.tl p,.persona .role,
.outcome .attr,.resp,.group-label,.price-table caption,.price-table thead th,.site-footer h5,.trust,.cx-lbl,.cx-rlabel,
.cx-stats .k,.cx-scale,.j-cap,.j-steps .n,.mail .k,.ui .k,.st,.fit-list li .k,.fit-q legend .n,.ca-bar nav a,
.why .n,.step .n,.next li::before,.req,.opt,.ui-top,.kv span:first-child,.without,.toggle-state,.switch label,
.chip-link,.announce .chip,.variant-switch button,.media .cap,.dotscale .r,.utility{
  font-family:var(--body);font-weight:600;letter-spacing:.14em}
.eyebrow,.micro{font-size:11px;line-height:16px}
.eyebrow{color:var(--text-heading)}
.navy .eyebrow,.dark .eyebrow{color:var(--accent-on-brand)}
.micro,.stat .lbl,.logos .lbl,.prod .tag,.tl p,.outcome .attr,.group-label,.price-table caption,.cx-lbl,.cx-rlabel,
.cx-stats .k,.cx-scale,.mail .k,.fit-list li .k,.kv span:first-child,.req,.opt{color:var(--text-muted)}
.navy .micro,.dark .micro,.resp,.j-cap{color:var(--text-on-brand-muted)}
.j-cap{color:var(--text-muted)}
.req,.opt{letter-spacing:.08em}
/* one quote voice per view: Space Grotesk on pull quotes only */
.outcome blockquote,.signoff{font-family:var(--quote);font-style:normal;font-weight:500;font-size:22px;line-height:1.3;letter-spacing:-.01em}
.signoff{color:var(--text-on-brand)}
/* the savings math lines up by digit, so pad with figure spaces (calc.js) and keep numerals tabular */
.cx-math{font:400 15px/2 var(--body);white-space:pre}
.code{font:600 40px/1 var(--body);letter-spacing:.18em}

/* ---------- 3. Color: blue leads, red flags ---------- */
a{color:var(--link)}
.navy a:not(.btn),.dark a:not(.btn){color:var(--accent-on-brand)}
.navy .form-card a:not(.btn),.dark .form-card a:not(.btn){color:var(--link)}
.white,.proofbar{background:var(--surface-raised)}
.paper,.hero{background:var(--surface)}
.navy{background:var(--surface-brand);color:var(--text-on-brand)}
.dark{background:var(--surface-deep);color:var(--text-on-brand)}
/* red is no longer a numeral, label or rail color */
.step .n,.why .n,.next li::before,.fit-q legend .n,.j-steps [aria-selected=true] .n{color:var(--text-heading)}
.persona .role{color:var(--text-muted)}
.step .n::after{background:var(--rule)}
.pill .dot{background:var(--cobalt)}
.chip-link{color:var(--text-heading);border-color:var(--rule);background:var(--surface-raised)}
.chip-link span{background:var(--tint);color:var(--on-tint)}
.new,.announce .chip{background:var(--tint);color:var(--on-tint)}
.tl:last-child::before{background:var(--navy);border-color:var(--navy)}
.tl::before{background:var(--surface)}
.opener,.compliance{border-left:0}
.vd{border-left:0}
.vd-steps li.cur i{background:var(--cobalt);border-color:var(--cobalt)}
.vd-badge{background:var(--navy);border-radius:0}
.cx-note.warn{border-color:var(--rule)}
.src mark{background:var(--ice)}
/* the old Red ring is retired. v0.3 graphic device: evenly spaced 2px lines on the right 40%, behind solid areas */
.ring{display:none}
.flow .pulse{fill:var(--cobalt)}
.flow{background:var(--surface-raised);border-color:var(--rule)}
.panel{background-color:var(--surface-brand);
  background-image:repeating-linear-gradient(90deg,rgba(188,225,247,.14) 0 2px,transparent 2px 16px);
  background-size:40% 100%;background-position:right top;background-repeat:no-repeat}
/* text links: link color, not red */
.tlink{color:var(--link);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.tlink::after{content:" ›";display:inline-block;transition:transform var(--dur-ui) var(--ease)}
a:hover .tlink::after,.tlink:hover::after{transform:translateX(3px)}
.navy .tlink,.dark .tlink{color:var(--accent-on-brand)}

/* ---------- 4. Edges and depth: square corners, hairlines, no shadows, no colored bars ---------- */
.mega,.ui,.ca-bar,.vd{box-shadow:none}
.mega{border-top:1px solid var(--rule);background:var(--surface-raised)}
.form-card,.cx-card,.fit-res,.est{border-top:1px solid var(--rule)}
.form-card{background:var(--surface-raised);color:var(--text)}
.src,.cx-note,.j-note,.form-carry,.form-status{border-left:0;border:1px solid var(--rule)}
.src{background:var(--surface);padding:12px 14px}
.cx-note,.form-status{background:var(--surface-raised)}
.j-note{padding:12px 16px;background:var(--surface-raised)}
.form-carry{background:var(--surface);padding:8px 12px}
.form-status{border-color:var(--red)} /* the one error in view, paired with words */
.ui{border:1px solid var(--rule)}
.pill{border-radius:0}
.cx-chip,.cx-basis button,.cx-val,.form-card input,.form-card select{border-radius:var(--r-ctl)}
.btn{border-radius:var(--r-ctl)}
.vd-badge{border-radius:0}
.hero::before{display:none}            /* v0.3 grounds are quiet: no dot grid */
.hero-split .grid>div:first-child{background:none;padding:0}
.prod,.fact,.outcome,.pc,.related a,.fblock,.cx-payoff,.cx-roi,.est-out,.price-table,.meet,.fit-opts span{background:var(--surface-raised)}
.fblock.big{background:var(--surface-brand);border-color:transparent}
.prod p,.fact p,.step p,.persona p,.fblock p,.faq-panel,.j-copy p,.cx-rsub,.cx-note,.cx-row,.cx-mathnote,.est-note,
.fit-list li span:last-child,.fit-foot p,.faq-more,.calc-intro,.mail-body{color:var(--text-muted)}
.fblock.big p{color:#e8edf5}
.nav-list>li>a,.nav-list>li>button,.mega li a,.cx-fhead label,.cx-note strong,.cx-row .v,.cx-row.tot span:first-child,.cx-math,
.cx-foot strong,.j-steps [role=tab]:hover .t,.file,.cx-toggle{color:var(--text)}
.cx-math{background:var(--surface);border-color:var(--rule)}
.fblock svg.ic,.ul-check li::before{stroke:var(--icon);border-color:var(--icon)}
.fblock.big svg.ic,.sec svg{stroke:var(--sky)}
.sec p{color:var(--text-on-brand-muted)}
.related b,.fact h4,.cx-details summary,.faq-item button{color:var(--text-heading)}
.related a{color:var(--text)}
.logo-ph{color:var(--text-muted);border-color:var(--field-border)}

/* footer: the real logo in a white field, never a CSS redraw */
.site-footer{background:var(--ink)}
.site-footer .logo-wrap{padding:16px 24px}
.site-footer .logo-wrap img{display:block;width:140px;height:auto}
.legal,.legal a,.trust{color:var(--gray-300)}

/* ---------- 5. Forms ---------- */
.form-card input[type=text],.form-card input[type=email],.form-card input[type=tel],.form-card select,.radio-row label,
.cx-chip,.cx-basis button,.fit-opts span{border-color:var(--field-border);background-color:var(--surface-raised);color:var(--text)}
.form-card input:focus,.form-card select:focus,.cx-val:focus{border-color:var(--focus-ring);outline:2px solid var(--focus-ring);outline-offset:0}
.radio-row input,.form-card input[type=checkbox]{accent-color:var(--navy)}
.cx-chip[aria-pressed=true],.cx-basis button[aria-pressed=true],.fit-opts input:checked+span,.variant-switch button[aria-pressed=true]{
  background:var(--action-secondary);border-color:var(--action-secondary);color:var(--on-action-secondary)}
.cx-val{background:var(--surface-raised);border-color:var(--rule)}
.consent,.cx-fine,.footnote{color:var(--text-muted)}
/* range sliders: square thumb on a hairline track, no shadow ring */
.calc input[type=range]::-webkit-slider-runnable-track,.est input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--gray-300)}
.calc input[type=range]::-moz-range-track,.est input[type=range]::-moz-range-track{height:2px;background:var(--gray-300)}
.calc input[type=range]::-webkit-slider-thumb,.est input[type=range]::-webkit-slider-thumb{width:20px;height:20px;border-radius:0;border:2px solid var(--surface-raised);box-shadow:none;outline:1.5px solid var(--navy);margin-top:-9px;background:var(--navy);transition:transform var(--dur-press) var(--ease-press)}
.calc input[type=range]::-moz-range-thumb,.est input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:0;border:2px solid var(--surface-raised);box-shadow:none;outline:1.5px solid var(--navy);background:var(--navy)}
.calc input[type=range]:active::-webkit-slider-thumb,.est input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}

/* ---------- 5b. Toggle switches: round, the one exception to square corners (Marketing, 2026-10-16) ----------
   Markup: <span class="sw [sw-sm|sw-lg]"><input type="checkbox" role="switch"><span></span></span>
   Off: light track, white knob. On: Cobalt track, knob slides right. Large size shows an x or a check in the knob.
   Press stretches the knob toward where it is going (Apple: hint in the direction of the gesture). */
:root{--tg-off:var(--gray-200);--tg-edge:var(--field-border);--tg-on:var(--cobalt);--tg-knob:#fff;--tg-knob-edge:rgba(23,23,30,.14);--tg-ease:cubic-bezier(.3,.9,.3,1)}
.navy,.dark,.toggle-card,.vd-bar{--tg-off:rgba(255,255,255,.18);--tg-edge:rgba(255,255,255,.5);--tg-knob:#fff;--tg-knob-edge:transparent}
.sw{--w:52px;--h:30px;--k:calc(var(--h) - 6px);--travel:calc(var(--w) - var(--k) - 6px);
  position:relative;display:inline-block;width:var(--w);height:var(--h);flex:none;vertical-align:middle;-webkit-tap-highlight-color:transparent}
.sw-sm{--w:36px;--h:20px}
.sw-lg{--w:88px;--h:48px}
.sw input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:2}
.sw>span{position:absolute;inset:0;box-sizing:border-box;border-radius:var(--r-full);background:var(--tg-off);border:1px solid var(--tg-edge);
  transition:background-color .25s var(--ease),border-color .25s var(--ease)}
.sw>span::after{content:"";position:absolute;top:2px;left:2px;width:var(--k);height:var(--k);box-sizing:border-box;border-radius:var(--r-full);
  background:var(--tg-knob) center/50% no-repeat;border:1px solid var(--tg-knob-edge);
  transition:transform .32s var(--tg-ease),width .18s var(--tg-ease),background-color .25s var(--ease)}
.sw input:hover:not(:disabled)+span{border-color:var(--text-muted)}
.sw input:checked+span{background:var(--tg-on);border-color:var(--tg-on)}
.sw input:checked+span::after{transform:translateX(var(--travel));background-color:#fff;border-color:transparent}
/* press: knob stretches 6px toward the side it will move to */
.sw input:active:not(:disabled)+span::after{width:calc(var(--k) + 6px)}
.sw input:checked:active:not(:disabled)+span::after{transform:translateX(calc(var(--travel) - 6px))}
.sw input:focus-visible+span{outline:2px solid var(--focus-ring);outline-offset:2px}
.navy .sw input:focus-visible+span,.dark .sw input:focus-visible+span,.toggle-card .sw input:focus-visible+span,.vd-bar .sw input:focus-visible+span{outline-color:var(--ice)}
.sw input:disabled{cursor:not-allowed}
.sw input:disabled+span{opacity:.45}
/* large: right arrow when off (slide to turn on), check when on */
.sw-lg>span::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c7cbd2' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.sw-lg input:checked+span::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231774ba' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
/* label and description beside a switch, switch on the left */
.switch{flex-direction:row-reverse;justify-content:flex-end;align-items:center;gap:16px;background:none;border:0;padding:0}
.switch label{font:600 17px/24px var(--body);letter-spacing:0;text-transform:none;cursor:pointer}
.toggle-state{font:400 14px/20px var(--body);letter-spacing:0;text-transform:none;color:var(--text-on-brand-muted);margin:-16px 0 0 104px}
.cx-toggle{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--text);cursor:pointer}
@media (prefers-reduced-motion:reduce){.sw>span,.sw>span::after{transition:background-color .15s linear!important}}
@media (prefers-contrast:more){.sw>span{border-color:var(--text)}.sw>span::after{border-color:var(--text)}}

/* ---------- 6. Focus: 2px ring on every control ---------- */
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.navy :focus-visible,.dark :focus-visible,.site-footer :focus-visible{outline-color:var(--ice)}
.faq-item button:focus-visible,.j-steps [role=tab]:focus-visible,.fit-opts input:focus-visible+span,.sw input:focus-visible+span,
.calc input[type=range]:focus-visible,.est input[type=range]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* ---------- 7. Response: instant press feedback, calm hover ---------- */
.btn{transition:background-color var(--dur-ui) var(--ease),border-color var(--dur-ui) var(--ease),color var(--dur-ui) var(--ease),transform var(--dur-press) var(--ease-press);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.btn:active:not([disabled]){transform:scale(.97)}
.btn-cta{background:var(--action);border-color:var(--action);color:var(--on-action)}
.btn-cta:hover{background:#9c001b;border-color:#9c001b}
.btn-primary{background:var(--action-secondary);border-color:var(--action-secondary);color:var(--on-action-secondary)}
.btn-primary:hover{background:var(--navy-800);border-color:var(--navy-800)}
.btn-secondary{background:transparent;color:var(--text-heading);border-color:currentColor}
.btn-secondary:hover{background:var(--hover-fill)}
.navy .btn-secondary,.dark .btn-secondary{color:var(--white)}
.navy .btn-secondary:hover,.dark .btn-secondary:hover{background:rgba(255,255,255,.08)}
.prod,.related a,.cx-chip,.fit-opts span,.radio-row label,.faq-item button,.j-steps [role=tab],.cx-basis button{
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:border-color var(--dur-ui) var(--ease),background-color var(--dur-ui) var(--ease),transform var(--dur-press) var(--ease-press)}
.prod:hover,.related a:hover{border-color:var(--navy);transform:none}
.prod:active,.related a:active{transform:scale(.985)}
.cx-chip:active,.fit-opts label:active span,.radio-row label:active,.cx-basis button:active{transform:scale(.97)}
.faq-item button::after,.cx-details summary::after{color:var(--icon);transition:transform var(--dur-ui) var(--ease)}
.step{transition:opacity .5s var(--ease),transform .5s var(--ease)}

/* ---------- 8. Materials: translucent section bar, content scrolls beneath ---------- */
.ca-bar{background:rgba(255,255,255,.78);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--rule)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.ca-bar{background:var(--surface-raised)}}
.ca-bar-name{color:var(--text-heading)}
.ca-bar nav a{font-size:11px;color:var(--text-muted)}
.ca-bar nav a:hover,.ca-bar nav a[aria-current=true]{color:var(--text-heading)}
.ca-bar nav a[aria-current=true]{box-shadow:inset 0 -2px 0 currentColor}
.ca-bar{transition:transform .36s var(--ease),visibility 0s .36s}
.ca-bar.show{transition:transform .36s var(--ease)}
/* the Verity demo arrives as a sheet from the right and leaves the same way; the scrim dims to focus */
.vd{transition:transform .5s var(--ease)}
.vd-scrim{background:rgba(11,28,64,.5)}


/* ---------- 10. Accessibility preferences ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn:active,.prod:active,.related a:active,.cx-chip:active,.fit-opts label:active span,.radio-row label:active{transform:none}
  .js .step.pre{opacity:1;transform:none}
  .vd{transform:none!important;opacity:0;transition:opacity .2s linear!important}.vd.on{opacity:1}
}
@media (prefers-reduced-transparency:reduce){.ca-bar{background:var(--surface-raised);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-contrast:more){
  :root{--rule:var(--steel);--field-border:var(--ink)}
  .ca-bar{background:var(--surface-raised);-webkit-backdrop-filter:none;backdrop-filter:none}
  .tone,.micro{color:var(--text)}
}
@media (max-width:820px){
  .lead{font-size:18px;line-height:28px}
  section{padding:var(--s7) 0}
  .wrap{padding:0 16px}
}
@media (max-width:600px){.cards.four,.personas,.timeline{grid-template-columns:1fr}.persona{border-right:0;margin-right:0;border-bottom:1px solid var(--rule)}}