/* USC site. One stylesheet for every page. Rewritten 2026-10-27 (direction: "the product performs").
   RULES (read before changing anything):
   - Palette is LOCKED: navy #0A2350 (+ hover #153A7A, tint #EDF2FA), link blue #1A4AA8, the status colours
     (pos / neg / caution) only for state. Everything else is a neutral. No gradients, no glows.
   - The logo geometry is fixed. The header carries it exactly as before.
   - Type: Open Sans only (self-hosted, OFL), tabular figures for every number. Five steps: small, body, lead, head, display.
   - Marketing pages: no hairlines, no outlined boxes, no shadows at rest. Surfaces are separated by a tone step.
     Lines and 1px borders live only inside real interface fragments ([data-ui]), tables, form fields and the app.
   - Motion: transform and opacity only, every move has a reduced-motion fallback (bottom of this file).
   - Element ids and the class names the scripts build (kv, sav, att, run-steps, st-*, ml-*, chip, notice...) are load-bearing.
   Contrast: every text colour is >= 4.5:1 on its ground (WCAG AA). */

@font-face{font-family:"Open Sans";src:url(/assets/fonts/open-sans-latin-300-normal.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url(/assets/fonts/open-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url(/assets/fonts/open-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url(/assets/fonts/open-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  /* locked palette */
  --navy:#0A2350; --navy-2:#153A7A; --navy-tint:#EDF2FA;
  --link:#1A4AA8; --focus:#1A4AA8;
  --pos:#12663D; --pos-tint:#EDF7F1; --neg:#B42318; --neg-tint:#FDF1F0; --caution:#7A4A00; --caution-tint:#FFF7E8;
  /* neutrals */
  --bg:#FFFFFF;          /* page ground */
  --field:#F3F5F8;       /* one tone step */
  --field-2:#E6EBF1;     /* two tone steps */
  --surface:#FFFFFF;
  --line:#E3E7ED; --line-2:#CDD4DE;
  --ink:#0B1A30;         /* 16.9:1 */
  --ink-2:#344256;       /* 10.1:1 */
  --ink-3:#586578;       /* 5.8:1 */
  --white:#FFFFFF;
  --on-navy:#C9D4E5;     /* 10.3:1 on navy */
  --on-navy-2:#AEBBD0;   /* 7.9:1 on navy */
  --navy-line:#23406F;
  --focus-soft:#9DB8E8;
  --disabled:#9AA5B5;
  --neg-line:#F1CBC6; --caution-line:#EDD5A8; --pos-line:#BFDCCB;
  --backdrop:rgba(10,26,48,.45); --float-shadow:0 18px 48px rgba(10,35,80,.22);
  --focus-halo:rgba(26,74,168,.18);
  --white-08:rgba(255,255,255,.08); --white-18:rgba(255,255,255,.18); --white-40:rgba(255,255,255,.4);

  --sans:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:var(--sans);

  /* five type steps */
  --step-small:clamp(.875rem,.85rem + .1vw,.9375rem);
  --step-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --step-lead:clamp(1.25rem,1.1rem + .7vw,1.625rem);
  --step-head:clamp(2rem,1.3rem + 3.2vw,4rem);
  --step-display:clamp(2.75rem,1.2rem + 5.4vw,6rem);

  --m:clamp(20px,3.2vw,48px);          /* the one pair of outer margins */
  --gap-section:clamp(96px,11vw,176px); /* between sections */
  --r:6px;                               /* the one radius of the page */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-move:cubic-bezier(.65,0,.35,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--step-body)/1.55 var(--sans);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum","lnum"}
img,svg{display:block;max-width:100%}
a{color:var(--link);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--navy)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
::selection{background:var(--navy);color:var(--white)}
a.skip{position:absolute;left:-9999px;top:8px;background:var(--navy);color:var(--white);padding:10px 14px;border-radius:var(--r);z-index:100}
a.skip:focus{left:var(--m)}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--m)}
.num,.mono,.figure{font-variant-numeric:tabular-nums lining-nums}
[hidden]{display:none!important}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── type ── */
h1,h2,h3,h4{font-family:var(--sans);color:var(--ink);margin:0}
h1{font-weight:300;font-size:var(--step-display);line-height:1;letter-spacing:-.035em}
h2{font-weight:300;font-size:var(--step-head);line-height:1.04;letter-spacing:-.03em}
h3{font-weight:500;font-size:var(--step-body);line-height:1.35;letter-spacing:-.005em}
p{margin:0 0 .8em}
.lede{font-size:var(--step-lead);line-height:1.4;color:var(--ink);max-width:34ch;font-weight:300;letter-spacing:-.01em}
.muted{color:var(--ink-3)}
.small{font-size:var(--step-small)}
.m0{margin:0}.mt{margin-top:20px}
.neg-text{color:var(--neg)}

/* ── header: logo top-left, plain links, one action ── */
.site-head{position:sticky;top:0;z-index:30;background:var(--bg)}
.site-head .wrap{display:flex;align-items:center;gap:28px;min-height:76px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:600 20px/1 var(--sans);letter-spacing:-.01em}
.brand svg{width:34px;height:34px}
.tag{font:400 var(--step-small)/1 var(--sans);color:var(--ink-3)}
.nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav a{color:var(--ink);text-decoration:none;font:400 var(--step-small)/1 var(--sans);padding:12px 12px;border-radius:var(--r);transition:background-color .15s var(--ease-out)}
.nav a:hover{background:var(--field)}
.nav a[aria-current="page"]{color:var(--navy);font-weight:600}
.nav a.nav-app{background:var(--navy);color:var(--white);font-weight:500;margin-left:10px;padding:14px 18px}
.nav a.nav-app:hover{background:var(--navy-2);color:var(--white)}
.site-head{transition:box-shadow .2s}
.site-head.is-scrolled{box-shadow:0 1px 0 var(--line)}
.nav .l-short{display:none}
@media(max-width:820px){
  .site-head{position:relative}
  .site-head .wrap{flex-wrap:wrap;gap:4px 12px;padding-top:12px;padding-bottom:4px;min-height:0}
  .nav{order:3;width:calc(100% + 16px);margin:0 0 0 -8px;flex-wrap:nowrap;gap:0;justify-content:space-between}
  .nav a{padding:12px 8px;font-size:14px;white-space:nowrap}
  .nav{overflow-x:auto;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a.nav-app{position:absolute;top:12px;right:var(--m);margin:0;padding:12px 14px}
  .site-head .wrap{position:relative}
}
@media(max-width:440px){.nav a{padding:12px 4px;font-size:13.5px}.nav .l-long{display:none}.nav .l-short{display:inline}}
@media(max-width:375px){.nav a{font-size:12.5px;padding:12px 3px}}

/* ── buttons: one shape, square-ish corners ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:500 16px/1 var(--sans);height:48px;padding:0 22px;border-radius:var(--r);border:0;background:var(--navy);color:var(--white);cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .12s var(--ease-out)}
.btn:hover{background:var(--navy-2);color:var(--white)}
.btn:active{transform:scale(.97)}
.btn:disabled,.btn[aria-disabled="true"]{background:var(--field-2);color:var(--ink-3);cursor:not-allowed;transform:none}
.btn.secondary{background:var(--field);color:var(--ink)}
.btn.secondary:hover{background:var(--field-2);color:var(--ink)}
.btn.small{height:40px;padding:0 14px;font-size:15px}
.btn.large{height:56px;padding:0 26px;font-size:17px}
.btn.link{background:none;color:var(--link);height:auto;padding:4px 6px;text-decoration:underline;font-weight:500}
.btn.block{width:100%;margin-top:8px;height:56px;font-size:17px}
.go{display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font-weight:500;padding:14px 4px}
.go svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;transition:transform .2s var(--ease-out)}
.go:hover{color:var(--navy)}
.go:hover svg{transform:translateX(4px)}
.on-navy .btn{background:var(--white);color:var(--navy)}
.on-navy .btn:hover{background:var(--navy-tint);color:var(--navy)}
.on-navy .go{color:var(--white)}

/* ── "How it works" info button: a small outlined i that opens a small window ── */
.info{position:relative;display:inline-block;vertical-align:middle}
.info > summary{list-style:none;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font:500 var(--step-small)/1 var(--sans);color:var(--ink-2);padding:10px 4px;border-radius:var(--r)}
.info > summary::-webkit-details-marker{display:none}
.info > summary .i{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;font:600 12px/1 var(--sans);font-style:normal}
.info > summary:hover{color:var(--navy)}
.info .info-pop{position:absolute;z-index:20;left:0;top:calc(100% + 6px);width:min(380px,calc(100vw - 2*var(--m)));background:var(--white);color:var(--ink-2);border-radius:var(--r);padding:16px 18px;font-size:16px;line-height:1.5;transform-origin:top left}
.info[open] .info-pop{box-shadow:var(--float-shadow)}
.info .info-pop p:last-child{margin:0}
.info[open] .info-pop{animation:popIn .18s var(--ease-out)}
.info.right .info-pop{left:auto;right:0;transform-origin:top right}
.on-navy .info > summary{color:var(--on-navy)}
.on-navy .info > summary:hover{color:var(--white)}
@keyframes popIn{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}

/* ── sections ── */
.sec{margin-top:var(--gap-section)}

/* ===================== HOME ===================== */
/* hero: headline and sentence upper-left, the product's own calculator on a navy stage at the right */
.hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 24px;padding-top:clamp(24px,5vw,72px);align-items:stretch}
.hero-copy{grid-column:1 / span 6;padding:clamp(8px,3vw,48px) 0 32px;display:flex;flex-direction:column}
.hero-copy h1{max-width:11ch}
.hero-copy .lede{margin-top:clamp(24px,2.6vw,40px);max-width:30ch}
.hero-copy .cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:36px}
.hero-copy .fine{margin-top:auto;padding-top:40px;font-size:var(--step-small);color:var(--ink-3);max-width:46ch}
.stage{grid-column:7 / span 6;background:var(--navy);border-radius:var(--r);padding:clamp(20px,3vw,48px);display:flex;flex-direction:column;gap:20px;justify-content:center;min-height:min(680px,calc(100svh - 120px))}
@media(max-width:960px){
  .hero-copy{grid-column:1 / -1;padding-bottom:40px}
  .stage{grid-column:1 / -1;min-height:0}
}

/* the calculator fragment (an interface piece: its own borders and radii apply inside [data-ui]) */
.calc{background:var(--white);border-radius:10px;padding:22px 22px 18px;font-size:15px;color:var(--ink);max-width:520px;width:100%;margin:0 auto}
.calc-tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--field);border-radius:8px;padding:4px;margin-bottom:18px}
.calc-tabs button{font:500 15px/1 var(--sans);border:0;background:none;color:var(--ink-2);height:40px;border-radius:6px;cursor:pointer;transition:background-color .15s var(--ease-out),color .15s}
.calc-tabs button[aria-pressed="true"]{background:var(--white);color:var(--ink)}
.calc label{font:500 14px var(--sans);color:var(--ink-2);display:block;margin-bottom:6px}

.calc .chips{margin:10px 0 14px}

#calcRows{display:block}
#calcRows > div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-top:1px solid var(--line)}

/* live strip under the calculator: four live figures that crossfade (signature move) */
.live{color:var(--white);max-width:520px;width:100%;margin:0 auto;display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.live-fig{position:relative;margin:0;flex:1;min-height:84px;display:grid}
.live-fig > div{grid-area:1 / 1;align-self:end;display:flex;flex-direction:column-reverse}
.live-fig > div + div{margin-top:0}
.live-fig.cycling > div{opacity:0;transition:opacity 1.6s var(--ease-move)}
.live-fig.cycling > div.on{opacity:1}
.live-fig:not(.cycling){display:block}
.live-fig:not(.cycling) > div + div{margin-top:14px}
.live-fig dt{font-size:var(--step-small);color:var(--on-navy)}
.live-fig dd{margin:0 0 4px;font:300 clamp(28px,2.6vw,40px)/1.05 var(--sans);letter-spacing:-.02em;color:var(--white)}

.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--pos-line);margin-right:6px;vertical-align:1px}
.figure-sec .dot{background:var(--pos)}

/* trilemma: staggered fragment cells, three by two, fragments in a checkerboard */

/* fragments: small true pieces of the app */

/* one deposit, four fields: the same receipt further along each time */
.fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
.field{min-height:84svh;padding:clamp(24px,2.4vw,40px);display:flex;flex-direction:column;position:relative}
.field:nth-child(1){background:var(--field)}
.field:nth-child(2){background:var(--field-2)}
.field:nth-child(3){background:var(--navy-2);color:var(--white)}
.field:nth-child(4){background:var(--navy);color:var(--white)}
.field h2{font-size:clamp(28px,2.4vw,40px);max-width:9ch;font-weight:400}
.field:nth-child(3) h2,.field:nth-child(4) h2{color:var(--white)}

.field p.clause{margin:clamp(28px,4vh,56px) 0 0;font:300 clamp(22px,1.9vw,28px)/1.2 var(--sans);letter-spacing:-.015em;max-width:17ch}

@media(max-width:1000px){.fields{grid-template-columns:1fr 1fr}.field{min-height:64svh}}
@media(max-width:640px){
  .fields{grid-template-columns:1fr}
  .field{min-height:64svh;padding:28px 20px}
  
  .field p.clause{font-size:24px}
}

/* earn: one panel, the savings position on the left, its controls on the right */
.demo-h{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end;margin-bottom:32px}
.demo-h h2{grid-column:1 / span 6}
.demo-h p{grid-column:7 / span 5;margin:0;color:var(--ink-2)}
.demo{display:grid;grid-template-columns:62fr 38fr;background:var(--field);border-radius:var(--r);overflow:hidden;min-height:560px}
.demo-show{padding:clamp(24px,4vw,56px);display:flex;flex-direction:column;justify-content:center;gap:16px}
.demo-ctl{background:var(--field-2);padding:clamp(20px,2.6vw,36px);display:flex;flex-direction:column}
.demo-ctl .ctl{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding:6px 0}
.demo-ctl .ctl label,.demo-ctl .ctl > span:first-child{font:500 15px var(--sans);color:var(--ink-2);margin:0}
.demo-ctl .ctl b{font-weight:500;font-variant-numeric:tabular-nums}
.demo-ctl .ctl.range{flex-direction:column;align-items:stretch;gap:6px;padding:12px 0}
.demo-ctl .ctl.range div{display:flex;justify-content:space-between}
.demo-ctl input[type=range]{width:100%;accent-color:var(--navy);height:28px;margin:0;cursor:pointer}
.demo-ctl .demo-link{margin-top:auto;padding-top:20px}

@media(max-width:900px){
  .demo-h{grid-template-columns:1fr}.demo-h h2,.demo-h p{grid-column:auto}
  .demo{grid-template-columns:1fr;min-height:0}
  .demo-ctl .ctl{min-height:52px}
}

/* three ways to hold it: a large comparison table */
.plans{width:100%;border-collapse:collapse;font-size:clamp(16px,1.25vw,20px)}
.plans th,.plans td{text-align:left;vertical-align:top;padding:18px 20px;border:0}
.plans thead th{font-weight:300;font-size:clamp(24px,2.6vw,40px);letter-spacing:-.025em;line-height:1.1;padding-top:28px;padding-bottom:24px}
.plans thead th small{display:block;font-size:var(--step-small);letter-spacing:0;color:var(--ink-3);margin-top:8px;font-weight:400}
.plans thead th:first-child{font-size:var(--step-head);vertical-align:bottom;width:30%}
.plans tbody th{font-family:var(--sans);font-weight:400;font-size:inherit;line-height:1.4;color:var(--ink-2)}
.plans tbody tr:nth-child(odd) > *{background:var(--field)}
.plans tbody tr:nth-child(odd) > .rec{background:var(--field-2)}
.plans .rec{background:var(--navy-tint)}
.plans thead .rec{background:var(--navy);color:var(--white);border-radius:var(--r) var(--r) 0 0}
.plans thead .rec small{color:var(--on-navy)}
.plans tfoot td{padding-top:20px;padding-bottom:24px}
.plans tfoot .rec{border-radius:0 0 var(--r) var(--r)}
.plans-m{display:none}
@media(max-width:860px){
  .plans{display:none}
  .plans-m{display:grid;gap:28px}
  .plan{background:var(--field);border-radius:var(--r);padding:24px 20px}
  .plan.rec{background:var(--navy);color:var(--white)}
  .plan h3{font:300 clamp(30px,9vw,40px)/1.05 var(--sans);letter-spacing:-.03em;margin-bottom:6px;color:inherit}
  .plan > p{color:var(--ink-3);font-size:var(--step-small)}
  .plan.rec > p{color:var(--on-navy)}
  .plan dl{margin:14px 0 18px}
  .plan dt{color:var(--ink-3);font-size:15px;margin-top:12px}
  .plan.rec dt{color:var(--on-navy)}
  .plan dd{margin:2px 0 0;font-size:17px}
  .plan .btn{width:100%}
}

/* the figure: what backs one USC, read from the chain */
.figure-sec{background:var(--field);border-radius:var(--r);min-height:88svh;padding:clamp(28px,4vw,64px);display:flex;flex-direction:column}
.figure-sec h2{max-width:14ch}
.figure-sec .src{margin-top:24px;color:var(--ink-2);display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.figure-row{margin-top:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,30ch);gap:24px 48px;align-items:end;padding-top:48px}
.figure-row .big-fig{font:300 clamp(96px,19vw,300px)/.82 var(--sans);letter-spacing:-.05em;margin:0;white-space:nowrap}
.figure-row .big-fig.is-text{font-size:clamp(44px,7vw,104px);white-space:normal;line-height:1}
.figure-row p{margin:0 0 10px;font-size:17px;color:var(--ink-2)}
.reserves{margin-top:32px}
.reserves > summary{cursor:pointer;font-weight:500;color:var(--ink);list-style:none;display:inline-flex;align-items:center;gap:10px;padding:10px 0}
.reserves > summary::-webkit-details-marker{display:none}
.reserves > summary::after{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .2s var(--ease-out)}
.reserves[open] > summary::after{transform:rotate(225deg) translateY(-1px)}
.res-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;margin-top:12px}
.res-grid dl{margin:0}
.res-grid dl > div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;font-size:16px}
.res-grid dt{color:var(--ink-2)}
.res-grid dd{margin:0;font-weight:500;text-align:right}
.readat{font-size:var(--step-small);color:var(--ink-3);margin:16px 0 0;max-width:90ch}
@media(max-width:860px){.res-grid{grid-template-columns:1fr}.figure-row{grid-template-columns:1fr}}
@media(max-width:640px){.figure-sec{min-height:84svh;padding:28px 20px}.figure-row .big-fig{font-size:30vw}}

/* ===================== FOOTER: two rows of tiles ===================== */
.site-foot{margin-top:var(--gap-section);padding:0 8px 8px}
.tiles{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px}
.tile{background:var(--field);border-radius:var(--r);padding:24px;min-height:220px;display:flex;flex-direction:column;color:var(--ink)}
.tile a{color:var(--ink)}
.t-say{grid-column:span 4}
.t-say .say{font:300 24px/1.25 var(--sans);letter-spacing:-.015em;max-width:20ch;margin:0}
.t-say .legal{margin-top:auto;padding-top:20px;font-size:13px;color:var(--ink-3);max-width:46ch}
.t-nav{grid-column:span 3}
.t-law{grid-column:span 2}
.t-mail{grid-column:span 3}
.tile .foot-h{font:500 var(--step-small) var(--sans);color:var(--ink-3);margin:0 0 12px}
.tile ul{list-style:none;margin:0;padding:0}
.tile li{margin:0 0 6px}
.tile li a{text-decoration:none;font-size:16px}
.tile li a:hover{text-decoration:underline}
.t-mail .mail{margin-top:auto;font:400 20px/1.3 var(--sans);word-break:break-word}
.t-mail .clock{color:var(--ink-3);font-size:var(--step-small);margin:0}
.t-mark{grid-column:span 8;min-height:320px;background:var(--navy);color:var(--white);flex-direction:row;align-items:center;justify-content:center;gap:clamp(16px,2vw,32px)}
.t-mark svg{width:clamp(72px,9vw,150px);height:auto}
.t-mark span{font:500 clamp(72px,9vw,150px)/1 var(--sans);letter-spacing:-.04em}
.t-go{grid-column:span 4;min-height:320px;background:var(--link);color:var(--white);text-decoration:none;justify-content:space-between;transition:background-color .2s var(--ease-out)}
.t-go:hover{background:var(--navy-2);color:var(--white)}
.t-go b{font:300 28px/1.15 var(--sans);letter-spacing:-.015em;max-width:12ch}
.t-go svg{align-self:flex-end;width:56px;height:56px;stroke:currentColor;stroke-width:4;fill:none;transition:transform .25s var(--ease-out)}
.t-go:hover svg{transform:translate(4px,-4px)}
@media(max-width:1000px){.t-say{grid-column:span 12}.t-nav{grid-column:span 4}.t-law{grid-column:span 4}.t-mail{grid-column:span 4}.t-mark{grid-column:span 12}.t-go{grid-column:span 12;min-height:200px}}
@media(max-width:640px){
  .site-foot{padding:0 6px 6px}.tiles{gap:6px}
  .tile{padding:20px;min-height:0}
  .t-mark{order:-2;min-height:160px}.t-go{order:-1;min-height:160px}
  .t-nav,.t-law{grid-column:span 6}.t-mail{grid-column:span 12}
  .t-mail .mail{margin-top:16px}
}

/* ===================== CONTENT PAGES ===================== */
.page{padding:clamp(24px,4vw,64px) 0 0}
.page-title{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end;margin-bottom:clamp(40px,6vw,88px)}
.page-title h1{grid-column:1 / span 7;font-size:var(--step-display);line-height:1}
.page-title .lede{grid-column:8 / span 5;margin:0;font-size:var(--step-body);line-height:1.55;font-weight:400;color:var(--ink-2);max-width:46ch}
.page-title .updated{grid-column:8 / span 5;margin:0;color:var(--ink-3);font-size:var(--step-small)}
@media(max-width:860px){.page-title{grid-template-columns:1fr;gap:16px}.page-title h1,.page-title .lede,.page-title .updated{grid-column:auto}}

/* how it works: a sticky contents column and long-form chapters */
.chapters{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.toc{grid-column:10 / span 3;grid-row:1}
.toc nav{position:sticky;top:104px}
.toc ol{list-style:none;margin:0;padding:0}
.toc a{display:block;padding:9px 12px;margin-left:-12px;border-radius:var(--r);color:var(--ink-2);text-decoration:none;font-size:16px;transition:background-color .15s,color .15s}
.toc a:hover{background:var(--field);color:var(--ink)}
.toc a.is-here{color:var(--navy);font-weight:500;background:var(--navy-tint)}
.chap-list{grid-column:1 / span 8;grid-row:1}
.chap{padding:0 0 clamp(48px,6vw,88px)}
.chap h2{font-size:clamp(28px,2.8vw,44px);font-weight:300;margin-bottom:20px;scroll-margin-top:104px}
.chap p,.chap li{color:var(--ink);max-width:68ch}
.chap ul{padding-left:22px}
.chap li{margin-bottom:6px}
.chap b{color:var(--ink);font-weight:500}
@media(max-width:960px){
  .toc{grid-column:1 / -1;grid-row:auto}.toc nav{position:static}.toc ol{display:flex;flex-wrap:wrap;gap:2px 4px}
  .toc a{margin-left:0;font-size:15px;background:var(--field)}
  .chap-list{grid-column:1 / -1;grid-row:auto}
}
.ledger{margin:8px 0 0;max-width:720px}
.ledger > div{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:24px;padding:14px 16px;font-size:16px}
.ledger > div:nth-child(odd){background:var(--field);border-radius:var(--r)}
.ledger dt{color:var(--ink-3)}
.ledger dd{margin:0;color:var(--ink)}
@media(max-width:560px){.ledger > div{grid-template-columns:1fr;gap:2px}}

/* tables (real tables keep their lines) */
table{width:100%;border-collapse:collapse;font-size:16px}
th,td{text-align:left;padding:13px 14px 13px 0;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
th{font:500 14px var(--sans);color:var(--ink-3)}
td.num,th.num{text-align:right;padding-right:28px;font-variant-numeric:tabular-nums}
.table-wrap{overflow-x:auto}
@media(max-width:560px){
  #fees + .table-wrap{overflow:visible}
  #fees + .table-wrap thead{display:none}
  #fees + .table-wrap table,#fees + .table-wrap tbody{display:block;width:100%}
  #fees + .table-wrap tr{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:12px 0;border-bottom:1px solid var(--line)}
  #fees + .table-wrap td{border:0;padding:0}
  #fees + .table-wrap td:nth-child(3){grid-column:1 / -1;color:var(--ink-3);font-size:15px}
  #fees + .table-wrap td:nth-child(3):empty{display:none}
}
.mono{font-variant-numeric:tabular-nums}

/* risks: a numbered list set large, every risk on its own row */
.risk-rows{list-style:none;margin:0;padding:0;counter-reset:none}
.risk-rows{display:grid;gap:8px}
.risk-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding:clamp(28px,3vw,44px) clamp(16px,2vw,28px);border-radius:var(--r)}
.risk-row:nth-child(odd){background:var(--field)}
.risk-row h2{grid-column:1 / span 5;font-size:clamp(24px,2.2vw,34px);font-weight:400;line-height:1.15;letter-spacing:-.02em}
.risk-row > :not(h2){grid-column:6 / span 7;margin:0;color:var(--ink-2);max-width:62ch}
@media(max-width:860px){.risk-row{grid-template-columns:1fr;gap:10px}.risk-row > *{grid-column:auto!important}}

/* long legal pages */
.doc{max-width:1440px;margin:0 auto;padding:clamp(24px,4vw,64px) var(--m) 0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 24px}
.doc > *{grid-column:4 / span 7}
.doc h1{grid-column:1 / span 10;font-size:var(--step-head);margin-bottom:12px}
.doc .updated{color:var(--ink-3);font-size:var(--step-small);margin-bottom:clamp(32px,5vw,64px)}
.doc h2{font-size:clamp(22px,1.8vw,28px);font-weight:400;letter-spacing:-.015em;margin:44px 0 12px}
.doc p,.doc li{color:var(--ink-2);max-width:68ch}
.doc .table-wrap,.doc table{max-width:100%}
@media(max-width:960px){.doc > *,.doc h1{grid-column:1 / -1}}

/* protocols */
.pr-hero{background:var(--navy);color:var(--white);border-radius:var(--r);padding:clamp(28px,5vw,80px);min-height:min(620px,78svh);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px 24px;align-items:end}
.pr-hero h1{color:var(--white);font-size:var(--step-display);max-width:11ch;grid-column:1 / span 6;align-self:start}
.pr-side{grid-column:7 / span 6}
@media(max-width:860px){.pr-hero h1,.pr-side{grid-column:1 / -1}}
.pr-hero .lede{color:var(--on-navy);max-width:40ch;font-size:var(--step-lead)}
.pr-hero .cta{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.lines{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.line-card{background:var(--field);border-radius:var(--r);padding:clamp(24px,3vw,44px)}
.line-card h2{font-size:clamp(28px,2.8vw,44px);margin-bottom:14px}
.line-card > p{color:var(--ink-2);max-width:46ch}
.line-card > p b{color:var(--ink);font-weight:500}
.line-card .ledger > div:nth-child(odd){background:var(--white)}
@media(max-width:860px){.lines{grid-template-columns:1fr}}

.steps-list{grid-column:5 / span 8;margin:0;padding:0;list-style:none;counter-reset:s}
.steps-list li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px;padding:20px 16px;border-radius:var(--r);color:var(--ink-2)}
.steps-list li:nth-child(odd){background:var(--field)}
.steps-list li b{color:var(--ink);font-weight:500;font-size:var(--step-lead);font-weight:300;letter-spacing:-.01em;line-height:1.2}
@media(max-width:860px){.steps-list{grid-column:auto}.steps-list li{grid-template-columns:1fr;gap:6px}}
.apply{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.apply-h{grid-column:1 / span 4}
.apply-h p{color:var(--ink-2)}
.apply form{grid-column:5 / span 8}
@media(max-width:860px){.apply{grid-template-columns:1fr}.apply-h,.apply form{grid-column:auto}}

/* status */
.narrow{max-width:1440px}

/* ===================== FORMS (shared) ===================== */
.form-row{margin-bottom:16px}
label{display:block;font-weight:500;font-size:15px;margin-bottom:6px;color:var(--ink)}
.hint{font-size:14px;color:var(--ink-3);margin-top:6px}
.input-wrap{display:flex;border:1px solid var(--ink-3);border-radius:var(--r);background:var(--white);overflow:hidden}
.input-wrap:focus-within{border-color:var(--focus);box-shadow:0 0 0 3px var(--focus-halo)}
.input-wrap input{flex:1;border:0;background:none;padding:12px;font:16px var(--sans);color:var(--ink);min-width:0;font-variant-numeric:tabular-nums}
.input-wrap input:focus{outline:none}
.input-wrap .unit{align-self:center;padding:0 10px;color:var(--ink-3);font-size:14px;font-weight:500}
.input-wrap .btn{border-radius:0;height:auto;align-self:stretch;margin:0;background:var(--field);color:var(--ink);border-left:1px solid var(--line-2)}
.input-wrap .btn:hover{background:var(--field-2)}
input[type="text"].plain,select,textarea.plain{width:100%;border:1px solid var(--ink-3);border-radius:var(--r);padding:12px;font:16px/1.4 var(--sans);color:var(--ink);background:var(--white);font-variant-numeric:tabular-nums}
input[type="text"].plain:focus,select:focus,textarea.plain:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px var(--focus-halo)}
textarea.plain{resize:vertical}
fieldset{border:0;padding:0;margin:0 0 16px}
legend{font-weight:500;font-size:15px;margin-bottom:8px}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg label{display:flex;align-items:center;gap:8px;border:1px solid var(--ink-3);border-radius:var(--r);padding:10px 14px;font-weight:400;cursor:pointer;margin:0}
.seg input{accent-color:var(--navy);width:16px;height:16px}
.seg label:has(input:checked){border-color:var(--navy);background:var(--navy-tint);box-shadow:inset 0 0 0 1px var(--navy)}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:16px;color:var(--ink-2)}
.check input{width:18px;height:18px;margin-top:4px;accent-color:var(--navy);flex:none}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.form-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 16px}
.form-grid .c6{grid-column:span 6}.form-grid .c12{grid-column:span 12}
@media(max-width:700px){.form-grid .c6{grid-column:span 12}}
.form-grid .form-row{margin-bottom:14px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{border:0;background:var(--field);border-radius:var(--r);padding:8px 12px;font:500 14px var(--sans);color:var(--ink-2);cursor:pointer;transition:background-color .15s,color .15s,transform .12s var(--ease-out)}
.chip:hover{background:var(--field-2);color:var(--ink)}
.chip:active{transform:scale(.96)}
.chip[aria-pressed="true"]{background:var(--navy);color:var(--white)}

/* notices */
.notice{background:var(--field);border-radius:var(--r);padding:14px 16px;font-size:15px;color:var(--ink-2)}
.notice.risk{background:var(--neg-tint);color:var(--neg)}
.notice.caution{background:var(--caution-tint);color:var(--caution)}
.notice.done{background:var(--pos-tint);color:var(--pos);font-weight:500}
.notice.small{font-size:14px;margin:0 0 10px}
.notice b{color:inherit}
.notice p:last-child{margin-bottom:0}
.risk-list{margin:0;padding-left:20px}
.risk-list li{margin-bottom:10px;color:var(--ink-2)}

/* ===================== APP (an app screen: quiet borders and repeated panels are normal here) ===================== */
.app-body{background:var(--field)}
.app-body .site-head{background:var(--field)}
.app-body .tile:not(.t-mark):not(.t-go){background:var(--white)}

.hero-card{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:28px 28px 24px}

.hero-label{font:500 16px var(--sans);color:var(--ink-2);margin:0;letter-spacing:0}
.wallet-chip{display:flex;align-items:center;gap:8px;font:14px var(--sans);background:var(--field);border-radius:var(--r);padding:8px 12px}
.wallet-chip .muted{color:var(--ink-3)}
.hero-total{font:300 clamp(48px,6vw,64px)/1 var(--sans);letter-spacing:-.04em;margin:18px 0 8px;font-variant-numeric:tabular-nums}
.hero-sub{color:var(--ink-2);margin:0 0 24px;font-size:16px}
.verbs{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}
@media(max-width:620px){.verbs{grid-template-columns:1fr}}
.verb{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:2px;align-items:center;text-align:left;background:var(--navy-tint);color:var(--ink);border:0;border-radius:10px;padding:18px 18px;cursor:pointer;font-family:var(--sans);transition:background-color .15s var(--ease-out),transform .12s var(--ease-out)}
.verb:hover{background:#DFE8F6}
.verb:active{transform:scale(.98)}
.verb:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.v-ico{grid-row:1/3;width:28px;height:28px;display:grid;place-items:center}
.v-ico svg{width:24px;height:24px;fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.v-t{font-weight:500;font-size:17px}
.v-h{font-size:14px;color:var(--ink-2)}

.attention{margin-top:16px;padding:0}
.att{display:grid;grid-template-columns:12px 1fr auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:var(--white);margin-bottom:10px}
.att.bad{border-color:var(--neg-line);background:var(--neg-tint)}
.att b{display:block;font-size:15px;font-weight:500}
.att span{color:var(--ink-2);font-size:14.5px}
.att-dot{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
@media(max-width:620px){.att{grid-template-columns:12px 1fr;align-items:start}.att-dot{margin-top:6px}.att > :nth-child(3){grid-column:2;justify-self:start}}
.att-dot.ok{background:var(--pos)}.att-dot.bad{background:var(--neg)}
.att-dot.live{background:none;border:2px solid var(--navy);border-right-color:transparent;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.panel-card{border:1px solid var(--line);border-radius:12px;padding:22px 24px;background:var(--white);margin-bottom:16px}
.panel-card h2{font:500 18px var(--sans);letter-spacing:-.005em;margin-bottom:12px}
.panel-card h3{font-size:16px}
.kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:15px}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--ink-3);flex:none;white-space:nowrap}
.kv .v{min-width:0}
.kv .v{font-weight:500;text-align:right;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.v.pos{color:var(--pos)}.v.neg{color:var(--neg)}
.chain-h{font-size:14px;font-weight:500;color:var(--ink-3);margin:14px 0 2px}
.status-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--disabled);margin-right:8px;vertical-align:middle}
.status-dot.ok{background:var(--pos)}.status-dot.bad{background:var(--neg)}
.sys-line{display:flex;align-items:center;margin:10px 0 0;font-size:15px;color:var(--ink-2)}

.sav{border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:10px;display:grid;gap:8px}
.sav-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sav-amt{font-size:22px;font-weight:400;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.bar{height:6px;background:var(--field);border-radius:3px;overflow:hidden}
.bar span{display:block;height:100%;background:var(--navy)}

.ml-bar{position:relative;height:8px;background:var(--field);border-radius:4px;overflow:visible}
.ml-fill{display:block;height:100%;background:var(--pos);border-radius:4px}
.ml-fill.bad{background:var(--neg)}
.ml-mark{position:absolute;top:-4px;width:2px;height:16px;background:var(--ink-3)}
.ml-mark.close{background:var(--neg)}

.activity{list-style:none;margin:0;padding:0;max-height:340px;overflow:auto}
.activity li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.activity li:last-child{border-bottom:0}
.activity li.ok .a-msg::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--pos);margin-right:8px;vertical-align:1px}
.activity li.err{color:var(--neg)}
.activity li#logEmpty{font-size:15px}
.a-time{color:var(--ink-3);font-size:13.5px;white-space:nowrap}

.list-plain{list-style:none;margin:0;padding:0}
.row-item{border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:10px;display:grid;gap:8px}
@media(min-width:700px){.row-item{grid-template-columns:1fr auto;align-items:center}}
.row-item .meta{font-size:14px;color:var(--ink-3)}
.row-item .amt{font-size:18px}

.advanced{margin-top:4px;border:1px solid var(--line);border-radius:12px;background:var(--white)}
.advanced summary{cursor:pointer;padding:20px 24px;display:flex;flex-direction:column;gap:2px;font-weight:500;list-style:none;font-size:17px}
.advanced summary::-webkit-details-marker{display:none}
.advanced summary .muted{font-weight:400;font-size:15px}
.advanced[open] summary{border-bottom:1px solid var(--line)}
.adv-body{padding:20px 24px}
.adv-body .panel h2{font:400 24px/1.2 var(--sans);letter-spacing:-.015em;margin-bottom:8px}
.adv-body .panel > p.muted{max-width:72ch}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto;margin-bottom:22px}
.tabs [role="tab"]{background:none;border:0;border-bottom:2px solid transparent;padding:12px 14px;font:500 15px var(--sans);color:var(--ink-3);cursor:pointer;white-space:nowrap}
.tabs [role="tab"][aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.tabs [role="tab"]:hover{color:var(--ink)}
.quote{border:1px solid var(--line);border-radius:8px;background:var(--field);padding:12px 16px;margin:14px 0}
.quote:empty{display:none}
.progress{list-style:none;margin:12px 0 0;padding:0;font-size:15px}
.progress li{padding:6px 0 6px 26px;position:relative;color:var(--ink-3)}
.progress li::before{content:"";position:absolute;left:4px;top:12px;width:10px;height:10px;border-radius:50%;border:2px solid var(--line-2)}
.progress li.done{color:var(--ink)}
.progress li.done::before{background:var(--pos);border-color:var(--pos)}
.progress li.now{color:var(--ink);font-weight:500}
.progress li.now::before{border-color:var(--navy);border-right-color:transparent;animation:spin .9s linear infinite}
.progress li.fail{color:var(--neg)}
.progress li.fail::before{background:var(--neg);border-color:var(--neg)}
.log{border:1px solid var(--line);border-radius:8px;background:var(--white);max-height:280px;overflow:auto;font:13px/1.7 var(--sans);padding:10px 14px;margin:0;list-style:none}
.log li{border-bottom:1px dashed var(--line);padding:4px 0;word-break:break-word}
.log li:last-child{border-bottom:0}
.log .t{color:var(--ink-3);margin-right:8px}
.log .ok{color:var(--pos)}.log .err{color:var(--neg)}
.faucet-box{display:flex;flex-direction:column;gap:6px;background:var(--field);border-radius:10px;padding:12px 14px;margin:0 0 12px}

/* sheet (dialog): floats, so it may carry a shadow */
.sheet{border:0;border-radius:14px;padding:24px;width:min(520px,calc(100vw - 24px));max-height:calc(100vh - 32px);overflow:auto;color:var(--ink);box-shadow:var(--float-shadow)}
.sheet[open]{animation:sheetIn .26s var(--ease-out)}
.sheet.narrow{width:min(460px,calc(100vw - 24px))}
.sheet::backdrop{background:var(--backdrop)}
@keyframes sheetIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:620px){.sheet{margin:auto 0 0;width:100vw;max-width:100vw;border-radius:16px 16px 0 0}@keyframes sheetIn{from{transform:translateY(32px);opacity:.6}to{transform:none;opacity:1}}}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sheet-head h2{font:400 26px/1.15 var(--sans);letter-spacing:-.02em;margin:0}
.sheet-intro{font-size:15px;margin:8px 0 18px}
.icon-btn{width:44px;height:44px;border-radius:var(--r);border:0;background:var(--field);display:grid;place-items:center;cursor:pointer;transition:background-color .15s}
.icon-btn:hover{background:var(--field-2)}
.icon-btn svg{width:18px;height:18px;stroke:var(--ink);stroke-width:2;fill:none;stroke-linecap:round}
.big-input{display:flex;align-items:baseline;border:1px solid var(--ink-3);border-radius:10px;padding:10px 14px}
.big-input:focus-within{border-color:var(--focus);box-shadow:0 0 0 3px var(--focus-halo)}
.big-input input{flex:1;min-width:0;border:0;font:300 34px var(--sans);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;background:none}
.big-input input:focus{outline:none}
.big-input .unit{font-weight:500;color:var(--ink-3)}
.you-get{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;background:var(--navy-tint);border-radius:10px;padding:14px 16px;margin:6px 0 12px}
.you-get-n{font-size:30px;font-weight:300;letter-spacing:-.02em;color:var(--navy);font-variant-numeric:tabular-nums}
.you-get-u{font-weight:500;color:var(--navy)}
.plan-steps{margin:8px 0 12px;padding-left:22px}
.plan-steps li{margin-bottom:6px}
.plan-steps b{display:block;font-size:15px;font-weight:500}
.plan-steps span{font-size:14px;color:var(--ink-3)}
.plan-details{margin:8px 0 14px;font-size:15px}
.plan-details summary{cursor:pointer;color:var(--link);font-weight:500;margin-bottom:6px}
.plan-details .v{font-size:14px;text-align:right}
.plan-details .kv{align-items:baseline}
.run-steps{list-style:none;margin:10px 0 16px;padding:0}
.run-steps:empty{display:none}
/* the steps as a timeline: a marker per step, a rail between them that turns green as each step completes */
.run-steps li{position:relative;padding:11px 0 11px 38px;min-height:44px}
.run-steps li::before{content:"";position:absolute;left:0;top:12px;width:20px;height:20px;box-sizing:border-box;border-radius:50%;border:2px solid var(--line-2);background:var(--white) center / 12px 12px no-repeat;z-index:1}
.run-steps li:not(:last-child)::after{content:"";position:absolute;left:9px;top:34px;bottom:-10px;width:2px;border-radius:1px;background:var(--line);transform-origin:top center}
.run-steps li.now::before{border-color:var(--navy);border-right-color:transparent;animation:spin .9s linear infinite}
.run-steps li.done::before{background-color:var(--pos);border-color:var(--pos);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.run-steps li.done::after,.run-steps li.skip::after{background:var(--pos)}
.run-steps li.fail::before{background-color:var(--neg);border-color:var(--neg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 3.5l5 5M8.5 3.5l-5 5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
.run-steps li.skip::before{background-color:var(--field);border-color:var(--line-2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 6h5' fill='none' stroke='%23586578' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
/* only the step that has just finished moves: its marker settles in and the rail below it fills downwards */
.run-steps li.st-just::before{animation:stDone .32s cubic-bezier(.34,1.56,.64,1)}
.run-steps li.st-just::after{animation:stRail .45s var(--ease-out) .1s both}
.run-steps li.st-in{animation:stIn .28s var(--ease-out)}
@keyframes stDone{from{transform:scale(.6)}to{transform:none}}
@keyframes stRail{from{transform:scaleY(0)}to{transform:none}}
@keyframes stIn{from{opacity:.4}to{opacity:1}}
.run-steps b{display:block;font-size:15px;font-weight:500;line-height:1.35;color:var(--ink-2)}
.run-steps li.now b,.run-steps li.done b{color:var(--ink)}
.run-steps li.fail b{color:var(--neg)}
.run-steps .st-sub{font-size:14px;color:var(--ink-3)}
.run-steps li.now .st-sub{color:var(--navy);font-weight:500}
body.is-busy .act{pointer-events:none;opacity:.6}

/* status page rows (built by status.js) */

/* ===================== MOTION ===================== */
/* entrances: heading, then text, then fragment; once, as the section enters. Content is visible without script. */
/* opacity and transform only: a blur here repainted whole sections on every frame and made scrolling stutter */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .live-fig > div{transition:none}
  .att-dot.live,.progress li.now::before,.run-steps li.now::before{animation:none;border-right-color:var(--navy)}
}

/* fixed widths for the example fragments (no inline styles: the CSP forbids them) */

/* ===================== APP SHELL (2026-10-27 b): sidebar + one screen at a time ===================== */
/* The app is an app screen (Taste "Open plane" shell): a labelled sidebar on the page ground, white panels with
   quiet 1px borders, one h1 per screen, one primary action per screen. Nav items are screens, not anchors. */
.app-body{background:var(--field)}
.shell{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100svh}
.side{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;gap:20px;padding:20px 14px 20px 18px;background:var(--field)}
.side-top{display:flex;align-items:center;gap:10px;padding:2px 6px}
.side-top .brand{font-size:18px}
.side-top .brand svg{width:30px;height:30px}
.acct-switch{padding:0 4px}
.acct-switch .btn{width:100%;height:42px}
.acct-switch .wallet-chip{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:14px;flex-wrap:wrap;row-gap:2px}
.acct-switch .wallet-chip .muted{width:100%;padding-left:17px;font-size:13px}
.side-nav{display:flex;flex-direction:column;gap:2px}
.side-nav a{display:flex;align-items:center;gap:10px;height:38px;padding:0 10px;border-radius:8px;color:var(--ink-2);text-decoration:none;font-size:15px;transition:background-color .12s,color .12s}
.side-nav a svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.side-nav a:hover{background:var(--field-2);color:var(--ink)}
.side-nav a[aria-current="page"]{background:var(--field-2);color:var(--ink);font-weight:500}
.side-nav{position:relative}
.nav-pill{display:none}
.js .nav-pill.is-on{display:block;position:absolute;top:0;left:0;border-radius:8px;background:var(--field-2);transition:transform .32s var(--ease-out),height .32s var(--ease-out),width .32s var(--ease-out);pointer-events:none}
.js .nav-pill.no-anim{transition:none}
.js .side-nav:has(.nav-pill.is-on) a[aria-current="page"]{background:transparent}
.side-nav a{position:relative}
.side-foot{margin-top:auto;padding:0 6px;font-size:13px;color:var(--ink-3)}
.side-foot p{margin:0 0 8px}
.side-foot a{color:var(--ink-2);margin-right:10px;white-space:nowrap}

.canvas{padding:28px clamp(20px,3vw,40px) 64px;min-width:0;max-width:1180px;width:100%}
.view-title{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin:6px 0 20px}
.view-title h1,.view-title h2{font:500 26px/1.2 var(--sans);letter-spacing:-.015em;margin:0;color:var(--ink)}
.view-title .hero-label{font:500 26px/1.2 var(--sans)}
.view-sub{margin:6px 0 0;color:var(--ink-2);font-size:15px;max-width:64ch}
.view-sub b{font-weight:500;color:var(--ink)}
.view[hidden]{display:none}
.view h1:focus,.view h2:focus{outline:none}

/* balance: the screen's biggest thing */
.app-body .hero-card{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:24px 24px 20px}
.app-body .hero-total{font:300 clamp(48px,6vw,68px)/1 var(--sans);letter-spacing:-.04em;margin:4px 0 8px}
.app-body .hero-sub{margin:0 0 22px}
.ov-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;margin-top:16px;align-items:stretch}
.app-body .panel-card{margin:0 0 16px;border-radius:12px}
.ov-grid .panel-card{margin:0}
.pair-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;align-items:stretch}
.pair-grid .panel-card{margin:0}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;background:var(--white);border:1px solid var(--line);border-radius:12px}
.facts > div{padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.facts > div + div{border-left:1px solid var(--line)}
.facts span{font-size:13px;color:var(--ink-3)}
.facts b{font-weight:500;font-size:15px}

/* tools: the former "Advanced tools", now a screen of its own and always open */
.tools-box{border-radius:12px;margin:0}
.tools-box > summary{display:none}
.tools-box .adv-body{padding:8px 24px 24px}
.tools-box .tabs{position:sticky;top:0;background:var(--white);z-index:2;margin:0 -24px 22px;padding:0 16px}
.tools-box [role="tabpanel"]{max-width:720px}

@media(max-width:1100px){.facts{grid-template-columns:1fr 1fr}.facts > div:nth-child(3){border-left:0}.facts > div:nth-child(n+3){border-top:1px solid var(--line)}}
@media(max-width:960px){.ov-grid,.pair-grid{grid-template-columns:1fr}}

/* phone and small tablet: a top bar with the wallet, a bottom tab bar for the five screens */
@media(max-width:820px){
  .shell{grid-template-columns:1fr}
  .side{position:sticky;top:0;z-index:20;height:auto;flex-direction:row;align-items:center;gap:10px;padding:10px 16px;background:var(--field);box-shadow:0 1px 0 var(--line)}
  .side-top{padding:0}.side-top .tag{display:none}
  .acct-switch{margin-left:auto;padding:0}
  .acct-switch .btn{width:auto;height:40px;padding:0 14px;font-size:15px}
  .acct-switch .wallet-chip{padding:8px 10px}
  .acct-switch .wallet-chip .muted{display:none}
  .side-foot{display:none}
  .side-nav{position:fixed;left:0;right:0;bottom:0;z-index:30;flex-direction:row;gap:0;background:var(--white);box-shadow:0 -1px 0 var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .side-nav a{flex:1;flex-direction:column;justify-content:center;gap:3px;height:54px;padding:0 2px;font-size:11.5px;text-align:center;line-height:1.1}
  .side-nav a[aria-current="page"]{background:var(--navy-tint);color:var(--navy)}
  .js .nav-pill.is-on{background:var(--navy-tint);border-radius:10px}
  .canvas{padding:18px 16px calc(96px + env(safe-area-inset-bottom))}
  .view-title h1,.view-title h2,.view-title .hero-label{font-size:22px}
  .view-title .btn{width:100%}
  .facts{grid-template-columns:1fr}.facts > div + div{border-left:0;border-top:1px solid var(--line)}
  .tools-box .adv-body{padding:4px 16px 20px}
  .tools-box .tabs{margin:0 -16px 18px;padding:0 6px}
}
@media(max-width:820px){
  .tools-box .tabs{flex-wrap:wrap;overflow:visible}
  .app-body .verbs{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .app-body .verb{grid-template-columns:1fr;grid-template-rows:auto auto;justify-items:center;text-align:center;padding:14px 6px;row-gap:6px}
  .app-body .v-ico{grid-row:auto}
  .app-body .v-t{font-size:15px}
  .app-body .v-h{display:none}
}

/* ===================== HOME: the trilemma, drawn with the logo ===================== */
.tri{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center}

.tri-svg{width:100%;max-width:620px;height:auto;overflow:visible}
.tri-svg .hl{fill:var(--navy-tint);opacity:0;transition:opacity .35s var(--ease-out)}
.tri-svg .hl.on{opacity:1}

.tri-svg .lbl{font:400 17px var(--sans);fill:var(--ink-3);transition:fill .3s}
.tri-svg .lbl.end{text-anchor:end}
.tri-svg .lbl.on{fill:var(--ink);font-weight:500}
.tri-svg .hl,.tri-svg .lbl{cursor:pointer}

.tri-pick{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.tri-pick .chip{padding:10px 14px;font-size:15px}

.tri-panel{grid-area:1 / 1;transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}
.js .tri-panel:not(.on){opacity:0;transform:translateY(6px);pointer-events:none;visibility:hidden}
.tri-panel > p{color:var(--ink-2);max-width:44ch;min-height:4.8em}

/* four fields: the same three rows in each, so every receipt sits at the same height */
.field{display:grid;grid-template-rows:clamp(96px,9vw,128px) 1fr minmax(4.2em,auto);min-height:84svh}
.field .f-sp{display:block}

.field p.clause{margin:0;align-self:start}
@media(max-width:640px){.field{grid-template-rows:auto auto auto;min-height:0;gap:24px}.field .f-sp{display:none}}
.tri-svg{max-width:520px}
.tri-svg .lbl{font-size:15px}
.tri-svg .lbl.mid{text-anchor:middle}
@media(min-width:1001px){
  .fields{grid-template-rows:auto 1fr auto}
  .field{grid-row:span 3;grid-template-rows:subgrid;row-gap:0;min-height:84svh}
  .field .f-sp,.field h2{min-height:clamp(96px,9vw,128px)}
}
@media(min-width:1001px){.fields{min-height:84svh}.field{min-height:0}.field p.clause{padding-top:24px}}

/* ===================== HOW IT WORKS: explainers ===================== */
.ex{margin:28px 0 8px;background:var(--field);border-radius:var(--r);padding:clamp(18px,2.4vw,28px);max-width:820px}

.ex-seg{display:inline-grid;grid-auto-flow:column;background:var(--field-2);border-radius:8px;padding:3px}
.ex-seg button{border:0;background:none;font:500 14px var(--sans);color:var(--ink-2);height:36px;padding:0 14px;border-radius:6px;cursor:pointer;transition:background-color .15s,color .15s}
.ex-seg button[aria-pressed="true"]{background:var(--white);color:var(--ink)}

/* follow a dollar */
.flow{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto 56px auto;gap:0 10px}

.node{position:relative;z-index:1;margin:30px 0 12px;background:var(--white);border-radius:8px;padding:10px 12px;min-height:62px;display:flex;flex-direction:column;justify-content:center;box-shadow:inset 0 0 0 1px var(--line-2);transition:box-shadow .25s var(--ease-out)}

.node b{font-weight:500;font-size:15px;line-height:1.2}
.node small{font-size:12.5px;color:var(--ink-3)}
.node.on{box-shadow:inset 0 0 0 2px var(--navy)}
.node[data-n="ws"]{grid-row:1;grid-column:1}
.node[data-n="mer"]{grid-row:1;grid-column:2}
.node[data-n="br"]{grid-row:2;grid-column:1 / span 2;justify-self:center;width:calc(50% - 5px);margin:4px 0;min-height:48px;background:var(--field-2);box-shadow:none}
.node[data-n="br"].on{box-shadow:inset 0 0 0 2px var(--navy)}
.node[data-n="meth"]{grid-row:3;grid-column:1}
.node[data-n="pool"]{grid-row:3;grid-column:2}
.node[data-n="tre"]{grid-row:3;grid-column:3}
.node[data-n="wc"]{grid-row:3;grid-column:4}
.token{position:absolute;left:0;top:0;z-index:3;pointer-events:none;transition:transform .9s var(--ease-move);will-change:transform}
.token.jump{transition:none}
.token span{display:block;background:var(--navy);color:var(--white);font:500 13px/1 var(--sans);padding:7px 10px;border-radius:999px;white-space:nowrap;transform:translateY(-34px)}
.ex-cap{margin:18px 0 12px;font-size:var(--step-body);color:var(--ink);min-height:3.2em;max-width:62ch}

.ex-dots{display:flex;gap:6px;margin-left:8px}
.ex-dots i{width:7px;height:7px;border-radius:50%;background:var(--line-2);transition:background-color .2s}
.ex-dots i.on{background:var(--navy)}
@media(max-width:700px){
  .flow{grid-template-columns:1fr;grid-template-rows:none;gap:8px}
  
  .node,.node[data-n]{grid-row:auto;grid-column:1;margin:0;min-height:52px;padding-left:16px;width:auto;justify-self:stretch}
  .node[data-n="ws"]{order:1}.node[data-n="mer"]{order:2}.node[data-n="br"]{order:3}.node[data-n="meth"]{order:4}.node[data-n="pool"]{order:5}.node[data-n="tre"]{order:6}.node[data-n="wc"]{order:7}
  .token span{transform:translateX(70px)}
}

/* sliders, figure, scale */

/* withdrawal queue */

@media (prefers-reduced-motion: reduce){.token{transition:none}}
.app-legal{display:none;font-size:13px;color:var(--ink-3);margin:28px 0 0}
.app-legal a{color:var(--ink-2)}
@media(max-width:820px){.app-legal{display:block}}

/* ===================== 2026-10-27 d: minimal graphics ===================== */
/* home hero: the mark, large and white, with three live figures */
.stage{justify-content:space-between;gap:32px}

/* trilemma: one sentence and one figure per property */

/* the strip: one figure per field */
.f-figure{align-self:center}
.ff-n{font:300 clamp(40px,4vw,60px)/1 var(--sans);letter-spacing:-.035em;margin:0 0 10px}
.ff-l{margin:0;font-size:15px;opacity:.8;max-width:18ch}
.field:nth-child(3) .ff-l,.field:nth-child(4) .ff-l{color:var(--on-navy);opacity:1}

/* savings demo: no card, the figure and a bar */
.pos-plain{max-width:520px}
.pos-plain .p-amt{font:300 clamp(56px,6vw,88px)/1 var(--sans);letter-spacing:-.04em;margin:0 0 6px}
.pos-plain .p-sub{color:var(--ink-2);margin:0 0 20px}
.pos-plain .f-bar{height:6px;border-radius:3px;background:var(--field-2);position:relative;margin:0 0 14px;overflow:hidden}
.pos-plain .f-bar i{position:absolute;inset:0;background:var(--navy);transform-origin:left;transition:transform .45s var(--ease-out)}
.pos-plain .p-line{color:var(--ink-2);font-size:15px;margin:0}
.pos-plain .p-line b{color:var(--ink);font-weight:500}
.demo{min-height:440px}

/* how it works: simple diagrams drawn like the logo, rings and lines only */
.dg{margin:28px 0 12px;max-width:760px}
.dg svg{width:100%;height:auto;display:block;overflow:visible}
.dg figcaption{margin-top:14px;color:var(--ink-2);font-size:15px;max-width:62ch}
.dg .ring{fill:none;stroke:var(--navy);stroke-width:3}
.dg .rail{fill:none;stroke:var(--navy);stroke-width:2}
.dg .lens{fill:var(--navy)}
.dg .t-l{font:500 15px var(--sans);fill:var(--white)}.dg .t-l.sm{font-weight:400;font-size:12.5px;fill:var(--on-navy)}
.dg .t-h{font:500 22px var(--sans);fill:var(--ink)}
.dg .t-s{font:400 15px var(--sans);fill:var(--ink-2)}
.dg .t-s.strong{fill:var(--ink);font-weight:500}
.dg .t-n{font:400 14px var(--sans);fill:var(--ink-3)}
.dg .axis{stroke:var(--ink-3);stroke-width:1.5;fill:none}
.dg .grid{stroke:var(--line);stroke-width:1;fill:none}
.dg .tick{stroke:var(--ink-3);stroke-width:1.5}
.dg .line{fill:none;stroke:var(--navy);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.dg .line.soft{stroke:var(--line-2);stroke-width:2}
.dg .pt{fill:var(--white);stroke:var(--navy);stroke-width:2.5}
.dg .limit{stroke-width:1.5;fill:none}
.dg .limit.warn{stroke:var(--caution)}.dg .t-s.warn{fill:var(--caution)}
.dg .limit.close{stroke:var(--neg)}.dg .t-s.close{fill:var(--neg)}
.dg .z1{fill:var(--field-2)}.dg .z2{fill:var(--navy-tint)}.dg .z3{fill:var(--field)}
.dg .arrow{fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dg .now{fill:var(--navy)}
.dg .wait{fill:var(--white);stroke:var(--navy);stroke-width:2}
.dg-tall{display:none!important}
@media(max-width:600px){
  .dg-wide{display:none!important}.dg-tall{display:block!important;max-width:300px;margin:0 auto}
  .dg-chains .t-s{font-size:19px}.dg-chains .t-h{font-size:24px}.dg-chains .t-l{font-size:19px}
  .dg-tall{max-width:none}.dg-chains .dg-tall{max-width:300px}
}
/* the one moving thing: a dot crossing the bridge, only while the diagram is on screen */
.stage{justify-content:space-between}

.tri-panel > p{min-height:0}
.tri-panel > p:first-child{min-height:3.2em;margin-bottom:12px}
.tri{align-items:start}

.stage{gap:24px}
@media(max-width:1000px) and (min-width:641px){.field{min-height:46svh;grid-template-rows:auto 1fr auto;gap:28px}.field .f-sp{display:none}}

/* protocols: the lender of last resort */
.rescue h2{margin-bottom:8px}
.dg-rescue{max-width:900px;margin:24px 0 32px}
.dg .t-h.sm{font-size:18px}
.dg .pt.hit{fill:var(--navy)}
.rescue .steps-list{grid-column:auto;max-width:980px}
.rescue .steps-list li b{font-size:var(--step-body);font-weight:500;letter-spacing:0}
.why h2{max-width:18ch;margin-bottom:clamp(28px,4vw,48px)}
.why-rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 40px}
.why-big{font:300 clamp(32px,3.4vw,52px)/1.05 var(--sans);letter-spacing:-.03em;margin:0 0 14px;color:var(--navy)}
.why-rows p:not(.why-big){color:var(--ink-2);max-width:34ch}
@media(max-width:860px){.why-rows{grid-template-columns:1fr}}
@media(max-width:600px){.dg-rescue .dg-tall{max-width:none}.dg-rescue .t-h.sm{font-size:20px}.dg-rescue .t-s{font-size:16px}}
.pr-hero h1{max-width:15ch;grid-column:1 / span 7;font-size:clamp(2.75rem,1rem + 4.6vw,5.5rem)}
.pr-side{grid-column:8 / span 5}
.rescue .steps-list{max-width:none}
.rescue + .lines{margin-top:var(--gap-section)}
@media(max-width:860px){.pr-hero h1,.pr-side{grid-column:1 / -1}}
@media(max-width:600px){.pr-hero h1{font-size:36px;line-height:1.05}}

/* ===================== MOTION, round 3 ===================== */
/* the window's animation: what is happening, drawn with the logo's rings */

/* the app: a screen slides in when you switch to it (short: you switch often) */
@keyframes viewIn{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
@keyframes viewInUp{from{opacity:0;transform:translate3d(0,-8px,0)}to{opacity:1;transform:none}}
.js .view:not([hidden]){animation:viewIn .24s var(--ease-out)}
.js .canvas[data-dir="up"] .view:not([hidden]){animation-name:viewInUp}
/* a value still being read: a still grey bar the width of a short figure, never a pulse */
.skel{color:transparent!important;background:var(--field-2);border-radius:4px;min-width:4.5em;display:inline-block;line-height:1.1;user-select:none}
.m-kv.skel,.m-big.skel,.m-ring-v.skel{min-width:3.2em;border-radius:8px}
.m-ring-v.skel{min-width:2.4em}
.attention.att-in{animation:attIn .32s var(--ease-out)}
@keyframes attIn{from{opacity:0;transform:translate3d(0,-6px,0)}to{opacity:1;transform:none}}
/* a new line in Activity arrives instead of appearing */
@keyframes rowIn{from{opacity:0;transform:translate3d(0,-4px,0)}to{opacity:1;transform:none}}
#log li{animation:rowIn .28s var(--ease-out)}
/* the three action tiles: the icon hints at the action on hover */
.v-ico svg{transition:transform .25s var(--ease-out)}
#vAdd:hover .v-ico svg{transform:rotate(90deg)}
#vEarn:hover .v-ico svg{transform:translate(2px,-2px)}
#vOut:hover .v-ico svg{transform:translateY(-3px)}
/* the in-progress step: its ring turns, the finished ones settle with a small pop */

/* how it works: each chart is uncovered left to right once, the first time it is on screen.
   A sliding cover (transform, composited) instead of drawing the lines (which repaints every frame). */
.dg-plot{position:relative;overflow:hidden}

@media (prefers-reduced-motion: reduce){
  .js .view:not([hidden]),#log li,.attention.att-in{animation:none}
  .js .nav-pill{transition:none}
}

/* ── metrics page (2026-10-28). Both chains drawn as the logo draws them: rings, a bridge, plain bars.
   Three marks only: navy (the main part), link blue (the second), a pale blue (the third). Every mark has its
   value written beside it in ink, so colour never carries meaning alone. 2px white gaps between touching parts. ── */
.metrics{--c1:var(--navy);--c2:#3D6FD1;--c3:#A7BEE6;--m-fig:clamp(2.1rem,1.3rem + 2.4vw,3.4rem)}
.metrics .page-title .updated{display:flex;align-items:center;gap:10px}
.metrics .updated .dot{width:8px;height:8px;border-radius:50%;background:var(--ink-3);flex:none;transition:background .4s}
body.m-ready .metrics .updated .dot{background:var(--pos)}
body.m-ready.m-partial .metrics .updated .dot{background:var(--caution)}
.metrics .is-na{color:var(--ink-3)}
.metrics .is-warn{color:var(--caution)}

/* the sheet: two rings and the bridge */
.m-sheet{background:var(--field);border-radius:var(--r);padding:clamp(28px,4.5vw,72px) clamp(20px,4vw,64px)}
.m-rings{display:grid;grid-template-columns:minmax(0,1fr) clamp(120px,14vw,220px) minmax(0,1fr);align-items:start;gap:clamp(12px,2vw,32px)}
.m-ring{margin:0;display:grid;justify-items:center;gap:clamp(20px,2.4vw,36px)}
.m-ring > svg{width:min(100%,340px);height:auto;transform:rotate(-90deg);overflow:visible}
.m-ring{position:relative}
.m-ring .track{fill:none;stroke:var(--field-2);stroke-width:14}
.m-ring .seg{fill:none;stroke-width:14;stroke-linecap:butt;stroke-dasharray:0 100;transition:stroke-dasharray 1.1s var(--ease-out),stroke-dashoffset 1.1s var(--ease-out)}
.m-ring .s1,.m-ring .c1{stroke:var(--c1)} .m-ring .s2,.m-ring .c2{stroke:var(--c2)} .m-ring .s3,.m-ring .c3{stroke:var(--c3)}
.m-sheet:not(.m-in) .m-ring .seg{stroke-dasharray:0 100!important}
.m-ring-in{position:absolute;top:0;left:50%;width:min(100%,340px);aspect-ratio:1;transform:translateX(-50%);display:grid;place-content:center;text-align:center;padding:0 18%}
.m-ring-k{margin:0;color:var(--ink-3);font-size:var(--step-small)}
.m-ring-v{margin:2px 0 0;font-weight:300;font-size:var(--m-fig);line-height:1;letter-spacing:-.035em;white-space:nowrap}
.m-ring-v.is-text{font-size:var(--step-lead);letter-spacing:-.01em}
.m-ring-u{margin:6px 0 0;color:var(--ink-2);font-size:var(--step-small)}
.m-key{list-style:none;margin:0;padding:0;display:grid;gap:10px;width:min(100%,360px)}
.m-key li{display:grid;grid-template-columns:12px 1fr auto;gap:12px;align-items:baseline;font-size:var(--step-small);color:var(--ink-2)}
.m-key b{font-weight:500;color:var(--ink);white-space:nowrap}
.m-key i,.m-stack-l i{display:inline-block;width:12px;height:12px;border-radius:3px;transform:translateY(1px)}
.k1{background:var(--c1)} .k2{background:var(--c2)} .k3{background:var(--c3)}
.m-bridge{align-self:center;margin-top:calc(min(100%,340px) * 0);display:grid;justify-items:center;text-align:center;gap:6px;padding-bottom:clamp(80px,9vw,150px)}
.m-bridge svg{width:min(100%,120px);height:auto;overflow:visible}
.m-bridge .mr{fill:none;stroke:var(--navy);stroke-width:2.4}.m-bridge .ml{fill:var(--navy)}
.m-bridge-k{margin:8px 0 0;font-weight:500;font-size:var(--step-small)}
.m-bridge-v{margin:0;color:var(--ink-3);font-size:var(--step-small)}
@media(max-width:900px){
  .m-rings{grid-template-columns:1fr;gap:40px}
  .m-bridge{padding:0;width:min(220px,60%);justify-self:center;order:0}
  .m-bridge svg{transform:none}
}

/* headline figures */
.m-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,48px);margin-top:clamp(56px,7vw,112px)}
.m-kv{margin:0;font-weight:300;font-size:var(--m-fig);line-height:1;letter-spacing:-.04em;white-space:nowrap}
.m-kv.is-text{font-size:var(--step-lead);letter-spacing:-.01em;line-height:1.2}
.m-kl{margin:12px 0 0;color:var(--ink-2);font-size:var(--step-small);max-width:24ch}
.m-note{margin:clamp(24px,3vw,40px) 0 0;color:var(--ink-3);font-size:var(--step-small);max-width:70ch}
@media(max-width:900px){.m-kpis{grid-template-columns:1fr 1fr;row-gap:40px}}

/* a block: heading and one line of context, then the drawing */
.m-block-h{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.m-block-h h2{grid-column:1 / span 7;font-size:var(--m-fig);max-width:22ch}
.m-block-h p{grid-column:8 / span 5;margin:0;color:var(--ink-2);font-size:var(--step-body);line-height:1.5;max-width:46ch}
@media(max-width:860px){.m-block-h{grid-template-columns:1fr;gap:12px}.m-block-h h2,.m-block-h p{grid-column:auto}}
.m-sub{margin:0 0 10px;color:var(--ink-2);font-size:var(--step-small)}
.m-sub b{color:var(--ink);font-weight:500}
.m-small{margin:10px 0 0;color:var(--ink-3);font-size:var(--step-small)}
.m-small b{color:var(--ink);font-weight:500}
.m-big{margin:0;font-weight:300;font-size:var(--m-fig);line-height:1.05;letter-spacing:-.035em;white-space:nowrap}
.m-big.sm{font-size:var(--step-lead);letter-spacing:-.015em;margin-top:12px}
.m-big.is-text{font-size:var(--step-lead);letter-spacing:-.01em}
.m-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,96px);align-items:start}
@media(max-width:860px){.m-two{grid-template-columns:1fr}}

/* bars: parts of a whole grow from the left once, then hold */
.m-stack,.m-split{display:flex;gap:2px;height:28px;border-radius:var(--r);overflow:hidden;background:var(--field);transform-origin:left center}
.m-stack.thin{height:14px;margin-top:20px}
.m-stack i,.m-split i{display:block;flex:0 0 0;flex-grow:0;min-width:0}
.m-stack .b1,.m-split .b1{background:var(--c1)} .m-stack .b2,.m-split .b2{background:var(--c2)} .m-stack .b3{background:var(--c3)}
.m-block:not(.m-in) .m-stack,.m-block:not(.m-in) .m-split{transform:scaleX(.001)}
.m-block .m-stack,.m-block .m-split{transition:transform .9s var(--ease-out)}
.m-stack-l,.m-split-l{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;margin-top:12px;color:var(--ink-2);font-size:var(--step-small)}
.m-stack-l{justify-content:flex-start}
.m-stack-l span{display:inline-flex;align-items:baseline;gap:8px}
.m-stack-l b,.m-split-l b{color:var(--ink);font-weight:500}
.m-meter{height:14px;border-radius:var(--r);background:var(--field);overflow:hidden;margin:4px 0 0}
.m-meter i{display:block;height:100%;width:100%;background:var(--c1);border-radius:var(--r);transform-origin:left center;transform:scaleX(0);transition:transform 1s var(--ease-out)}
.m-in .m-meter i{transform:scaleX(var(--w,0))}

/* figures in a grid of plain definitions */
.m-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px clamp(20px,3vw,48px);margin:clamp(32px,4vw,56px) 0 0}
.m-grid.tight{grid-template-columns:1fr 1fr;margin:0}
.m-grid dt{color:var(--ink-3);font-size:var(--step-small);margin:0 0 4px}
.m-grid dd{margin:0;font-size:var(--step-lead);font-weight:300;letter-spacing:-.015em;line-height:1.2}
@media(max-width:860px){.m-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.m-grid,.m-grid.tight{grid-template-columns:1fr}}

/* backing against the protocol's lines: three zones of fixed width (a state, not a linear axis) and one marker */
.m-scale{position:relative;padding-top:56px;overflow-x:clip}
.m-scale-bar{display:grid;grid-template-columns:36fr 28fr 36fr;gap:2px;height:14px;border-radius:var(--r);overflow:hidden}
.m-scale-bar .z1{background:var(--caution-line)} .m-scale-bar .z2{background:var(--pos-line)} .m-scale-bar .z3{background:var(--field-2)}
.m-zones{display:grid;grid-template-columns:36fr 28fr 36fr;gap:2px;margin-top:14px}
.m-zones p{margin:0;font-size:var(--step-small);color:var(--ink-3);display:grid;gap:2px;padding-right:12px}
.m-zones b{font-weight:500;color:var(--ink)}
.m-marker{position:absolute;top:0;left:0;right:0;height:84px;pointer-events:none;opacity:0;transition:opacity .4s;overflow:hidden}
.m-marker.is-on{opacity:1}
.m-mk{position:absolute;inset:0;transform:translate3d(calc(var(--p,0) * 100%),0,0);transition:transform 1.2s var(--ease-out)}
.m-block:not(.m-in) .m-mk{transform:none}
.m-mk::after{content:"";position:absolute;left:-1px;top:34px;width:2px;height:44px;background:var(--navy)}
.m-mk b{position:absolute;left:0;top:0;transform:translateX(-50%);background:var(--navy);color:var(--white);font-weight:500;font-size:var(--step-small);padding:4px 10px;border-radius:var(--r);white-space:nowrap}
.m-marker.at-end b{transform:translateX(-100%)} .m-marker.at-start b{transform:none}
@media(max-width:640px){.m-zones{grid-template-columns:1fr;gap:10px}.m-zones p{grid-template-columns:auto 1fr;gap:8px;align-items:baseline}}

/* the savings rate line */
.m-rate svg{width:100%;max-width:440px;height:auto;overflow:visible}
.m-rate .axis{stroke:var(--line-2);stroke-width:1;fill:none}
.m-rate .line{stroke:var(--navy);stroke-width:2;fill:none;stroke-linejoin:round;stroke-linecap:round}
.m-rate text{font:400 12px var(--sans);fill:var(--ink-3)}
.m-rate-dot{opacity:0;transition:transform 1.2s var(--ease-out),opacity .4s}
.m-rate-dot.is-on{opacity:1}
.m-rate-dot circle{fill:var(--link);stroke:var(--bg);stroke-width:3}

/* the bridge check */
.m-match{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,96px)}
@media(max-width:700px){.m-match{grid-template-columns:1fr}}
.m-verdict{margin:28px 0 0;font-size:var(--step-body);color:var(--ink-2)}
.m-verdict.is-ok{color:var(--pos)} .m-verdict.is-bad{color:var(--neg)}

@media (prefers-reduced-motion: reduce){
  .m-ring .seg,.m-stack i,.m-split i,.m-meter i,.m-marker,.m-mk,.m-rate-dot,.m-block .m-stack,.m-block .m-split{transition:none!important}
}

/* ── status page (2026-10-28): the logo turns green when every check passes. One ring with a part per group,
   the three inner circles of the mark, a tick where they meet. Groups stay shut while they pass. ── */
.status-page{--ok:var(--pos);--bad:var(--neg)}
.st-hero{display:grid;grid-template-columns:minmax(220px,380px) 1fr;gap:clamp(32px,6vw,112px);align-items:center;margin:clamp(8px,2vw,24px) 0 clamp(56px,7vw,112px)}
.st-ring{margin:0;width:100%;max-width:380px}
.st-ring svg{width:100%;height:auto;overflow:visible}
.st-ring .track{fill:none;stroke:var(--field-2);stroke-width:7}
.st-ring .arc{fill:none;stroke-width:7;stroke-dasharray:0 100;transition:stroke-dasharray .9s var(--ease-out)}
.st-ring.drawn .arc{stroke-dasharray:var(--len) 100}
.st-ring .arc.ok{stroke:var(--ok)} .st-ring .arc.bad{stroke:var(--bad)}
#stArcs{transform:rotate(-90deg);transform-origin:120px 120px}
.st-ring .inner{fill:none;stroke:var(--field-2);stroke-width:2.6;transition:stroke .6s var(--ease-out) .5s}
.st-ring .core{fill:var(--field-2);transition:fill .6s var(--ease-out) .6s}
.st-ring .tick{fill:none;stroke:var(--white);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .4s .9s}
body.st-good .st-ring.drawn .inner{stroke:var(--ok)}
body.st-good .st-ring.drawn .core{fill:var(--ok)}
body.st-good .st-ring.drawn .tick{opacity:1}
body.st-bad .st-ring.drawn .inner{stroke:var(--line-2)}
.st-copy h1{font-size:var(--step-display);line-height:1;margin:0 0 clamp(20px,2.4vw,32px)}
.st-say{margin:0;font-size:var(--step-lead);font-weight:300;letter-spacing:-.01em;line-height:1.3;display:flex;align-items:center;gap:4px}
.st-say b{font-weight:400}
.st-say .status-dot{width:12px;height:12px;flex:none;transform:translateY(-2px)}
.st-meta{margin:12px 0 0;color:var(--ink-2);font-size:var(--step-body)}
.st-note{margin:clamp(24px,3vw,40px) 0 0;color:var(--ink-3);font-size:var(--step-small);max-width:52ch}
@media(max-width:760px){.st-hero{grid-template-columns:1fr;justify-items:start}.st-ring{max-width:240px}}

.st-list-wrap{display:grid;gap:8px;max-width:980px}
.st-group{background:var(--field);border-radius:var(--r)}
.st-group.bad{background:var(--neg-tint)}
.st-sum{list-style:none;display:grid;grid-template-columns:22px 1fr auto 20px;gap:16px;align-items:center;padding:22px 24px;cursor:pointer}
.st-sum::-webkit-details-marker{display:none}
.st-sum-t{display:grid;gap:2px}
.st-sum-t b{font-weight:500;font-size:var(--step-body)}
.st-sum-t span{color:var(--ink-2);font-size:var(--step-small)}
.st-mark{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 2px currentColor;position:relative}
.st-mark.ok{color:var(--ok)} .st-mark.bad{color:var(--bad)}
.st-mark.ok::after{content:"";position:absolute;left:7px;top:5px;width:5px;height:9px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
.st-mark.bad::after{content:"";position:absolute;left:10px;top:5px;width:2px;height:8px;background:currentColor;box-shadow:0 10px 0 0 currentColor;border-radius:1px}
.st-state{font-size:var(--step-small);font-weight:500;white-space:nowrap}
.st-state.ok{color:var(--ok)} .st-state.bad{color:var(--bad)}
.st-chev{width:10px;height:10px;border:solid var(--ink-3);border-width:0 1.6px 1.6px 0;transform:rotate(45deg) translateY(-3px);transition:transform .2s var(--ease-out);justify-self:center}
.st-group[open] .st-chev{transform:rotate(-135deg) translateY(-2px)}
.st-checks{list-style:none;margin:0;padding:0 24px 18px 62px;display:grid;gap:14px}
.st-check{display:grid;grid-template-columns:10px 1fr;gap:14px;align-items:baseline}
.st-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);transform:translateY(-1px)}
.st-check.bad .st-dot{background:var(--bad)} .st-check.idle .st-dot{background:var(--disabled)}
.st-body b{font-weight:500;font-size:var(--step-small);color:var(--ink)}
.st-body p{margin:2px 0 0;font-size:var(--step-small);color:var(--ink-2);max-width:70ch}
.st-check.bad .st-body p{color:var(--bad)}
.st-tech{margin:8px 0 0;font-size:14px}
.st-tech summary{cursor:pointer;color:var(--ink-3);list-style:none}
.st-tech summary::-webkit-details-marker{display:none}
.st-tech summary::after{content:" +"}
.st-tech[open] summary::after{content:" \2212"}
.st-tech code{display:block;margin-top:6px;font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--ink-2);background:var(--white);border-radius:4px;padding:8px 10px;overflow-wrap:anywhere}
@media(max-width:560px){.st-sum{grid-template-columns:22px 1fr 16px;padding:18px}.st-sum .st-state{grid-column:2;grid-row:2}.st-checks{padding:0 18px 16px 56px}}
@media (prefers-reduced-motion: reduce){.st-ring .arc,.st-ring .inner,.st-ring .core,.st-ring .tick,.st-chev{transition:none}}

/* app balance on wide screens: the balance on the left, the three actions stacked on the right, no empty half */
@media(min-width:1180px){
  .app-body .hero-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);grid-template-rows:auto auto;column-gap:40px;align-items:center;padding:28px 28px 28px 32px}
  .app-body .hero-total{grid-column:1;grid-row:1;align-self:end;font-size:clamp(64px,6vw,88px);margin:0 0 10px}
  .app-body .hero-sub{grid-column:1;grid-row:2;align-self:start;margin:0}
  .app-body .verbs{grid-column:2;grid-row:1 / span 2;grid-template-columns:1fr;gap:8px}
  .app-body .verb{padding:14px 18px}
}
@media (prefers-reduced-motion: reduce){.run-steps li.st-just::before,.run-steps li.st-just::after,.run-steps li.st-in{animation:none}}

/* home hero: the logo lockup, as on the footer tile: the mark and the word, white on navy */
.hero-lockup{flex:1;display:flex;align-items:center;justify-content:center;gap:clamp(16px,2.4vw,36px);color:var(--white)}
.hero-lockup svg{width:clamp(88px,11vw,180px);height:auto;flex:none}
.hero-lockup span{font:500 clamp(84px,11vw,184px)/1 var(--sans);letter-spacing:-.04em}
@media(max-width:860px){.hero-lockup{padding:clamp(40px,10vw,72px) 0}}

/* the three, written out: one column each, a small mark showing which circle it is */
.three{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.three-h{grid-column:1 / span 5}
.three-h h2{max-width:12ch}
.three-h p{margin:20px 0 0;color:var(--ink-2);max-width:40ch}
.three-cols{grid-column:7 / span 6;display:grid;gap:clamp(28px,3vw,44px);margin:0;padding:0;list-style:none}
.three-cols li{display:grid;grid-template-columns:56px 1fr;column-gap:22px;align-items:start}
.three-cols svg{width:56px;height:56px;grid-row:1 / span 3}
.three-cols .o{fill:none;stroke:var(--line-2);stroke-width:6}
.three-cols .me{fill:none;stroke:var(--navy);stroke-width:10}
.three-cols .ring{fill:none;stroke:var(--line-2);stroke-width:8}
.three-cols h3{margin:2px 0 6px;font-size:var(--step-lead);font-weight:400;letter-spacing:-.01em}
.three-cols p{margin:0;color:var(--ink-2)}
.three-cols .fig{margin-top:10px;color:var(--ink);font-weight:500}
.three-note{grid-column:7 / span 6;margin:8px 0 0;color:var(--ink-3);font-size:var(--step-small)}
@media(max-width:900px){.three-h,.three-cols,.three-note{grid-column:1 / -1}}

/* home hero fits one screen on desktop: the navy panel matches the text column instead of its own tall minimum,
   and the headline and lede scale with the window height as well as its width */
@media(min-width:861px){
  .hero{min-height:calc(100svh - 96px);padding-top:clamp(12px,3vh,48px);padding-bottom:clamp(16px,4vh,48px)}
  .stage{min-height:0}
  .hero-copy{padding:clamp(8px,2vh,40px) 0 0}
  .hero-copy h1{font-size:min(var(--step-display),12vh)}
  .hero-copy .lede{font-size:min(var(--step-lead),3.6vh);margin-top:min(clamp(24px,2.6vw,40px),3.2vh)}
  .hero-copy .cta{margin-top:min(36px,4vh)}
  .hero-copy .fine{padding-top:min(40px,4vh)}
}

/* ── app forms and cards, refined (2026-10-29). Soft tone fields instead of hard outlines, segmented choices instead
   of boxed radio buttons, pill tabs, one consistent 12px radius, quieter helper text. Element ids, classes and the
   radio inputs themselves are untouched; the inputs are only hidden visually and stay focusable. ── */
.app-body{--rr:12px}
/* tools: tabs as one pill bar */
.app-body .tools-box{border:0;background:transparent}
.app-body .tools-box .adv-body{padding:0}
.app-body .tools-box .tabs{display:inline-flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:2px;margin:0 0 20px;padding:4px;background:var(--field-2);border:0;border-radius:var(--rr);position:sticky;top:8px;max-width:100%}
.app-body .tabs [role="tab"]{flex:none;border:0;border-radius:9px;padding:9px 16px;font:500 14.5px var(--sans);color:var(--ink-2);transition:background-color .15s,color .15s}
.app-body .tabs [role="tab"]:hover{color:var(--ink)}
.app-body .tabs [role="tab"][aria-selected="true"]{background:var(--white);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.app-body .tools-box [role="tabpanel"]{max-width:720px;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:clamp(22px,3vw,36px)}
.app-body .tools-box [role="tabpanel"] > *{max-width:none}
.app-body .adv-body .panel h2{font:500 22px/1.25 var(--sans);letter-spacing:-.015em;margin:0 0 8px}
.app-body .adv-body .panel > p.muted{font-size:15px;line-height:1.6;color:var(--ink-2);margin:0 0 26px;max-width:60ch}

/* labels and helper text */
.app-body fieldset{margin:0 0 22px}
.app-body legend,.app-body .form-row > label{display:block;font:500 13.5px var(--sans);color:var(--ink-2);margin:0 0 8px}
.app-body .form-row{margin-bottom:22px}
.app-body .hint{font-size:13px;line-height:1.5;color:var(--ink-3);margin:8px 2px 0}

/* choices: a segmented control */
.app-body .seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;background:var(--field);border-radius:var(--rr)}
.app-body .seg label{position:relative;border:0;border-radius:9px;padding:10px 16px;font:500 14.5px var(--sans);color:var(--ink-2);background:transparent;box-shadow:none;transition:background-color .15s,color .15s,box-shadow .15s}
.app-body .seg label:hover{color:var(--ink)}
.app-body .seg input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.app-body .seg label:has(input:checked){background:var(--white);color:var(--navy);box-shadow:0 0 0 1px var(--line-2)}
.app-body .seg label:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}

/* amounts and addresses: soft fields that light up when you type */
.app-body .input-wrap,.app-body .big-input{display:flex;align-items:center;background:var(--field);border:1px solid transparent;border-radius:var(--rr);overflow:hidden;transition:border-color .15s,box-shadow .15s,background-color .15s}
.app-body .input-wrap:focus-within,.app-body .big-input:focus-within{background:var(--white);border-color:var(--navy);box-shadow:0 0 0 4px var(--focus-halo)}
.app-body .input-wrap input{padding:16px 18px;font:400 22px var(--sans);letter-spacing:-.01em}
.app-body .input-wrap input::placeholder,.app-body .big-input input::placeholder{color:var(--disabled)}
.app-body .input-wrap .unit,.app-body .big-input .unit{padding:0 12px 0 4px;font:500 14px var(--sans);color:var(--ink-3)}
.app-body .input-wrap .btn{align-self:center;height:34px;margin:0 8px 0 0;padding:0 12px;border:0;border-radius:8px;background:var(--white);color:var(--ink-2);font-size:13.5px;box-shadow:0 0 0 1px var(--line)}
.app-body .input-wrap .btn:hover{color:var(--navy);background:var(--white)}
.app-body .big-input{padding:6px 6px 6px 18px}
.app-body .big-input input{font-size:32px;padding:6px 0}
.app-body input[type="text"].plain,.app-body select,.app-body textarea.plain{background:var(--field);border:1px solid transparent;border-radius:var(--rr);padding:14px 16px;font-size:15px}
.app-body input[type="text"].plain:focus,.app-body select:focus,.app-body textarea.plain:focus{background:var(--white);border-color:var(--navy);box-shadow:0 0 0 4px var(--focus-halo)}
.app-body .chips{gap:6px;margin-top:10px}
.app-body .chip{border-radius:999px;padding:6px 12px;font-size:13px}

/* the quote and the buttons */
.app-body .quote{border:0;border-radius:var(--rr);background:var(--navy-tint);padding:16px 18px;margin:4px 0 20px;font-size:15px}
.app-body .actions{gap:10px;margin-top:4px}
.app-body .btn{border-radius:10px}
.app-body .actions .btn{min-width:140px}

/* step lists in the tools: the same timeline as the windows */
.app-body .progress{margin:18px 0 0;font-size:15px}
.app-body .progress li{padding:9px 0 9px 34px;color:var(--ink-2)}
.app-body .progress li::before{left:0;top:10px;width:20px;height:20px;box-sizing:border-box;border:2px solid var(--line-2);background:var(--white)}
.app-body .progress li.done::before{background:var(--pos);border-color:var(--pos)}
.app-body .progress li.fail::before{background:var(--neg);border-color:var(--neg)}

/* cards: savings, positions, holdings, facts */
.app-body .panel-card{border-color:var(--line);border-radius:16px;padding:24px 26px}
.app-body .panel-card h2{font:500 17px var(--sans);margin-bottom:14px}
.app-body .sav,.app-body .row-item{border:0;background:var(--field);border-radius:14px;padding:18px 20px;margin-bottom:10px;gap:10px}
.app-body .sav-amt{font-size:24px;font-weight:300;letter-spacing:-.02em}
.app-body .ml-bar{height:6px;border-radius:3px;background:var(--white)}
.app-body .ml-fill{border-radius:3px}
.app-body .facts{border-radius:16px}
.app-body .facts > div{padding:18px 20px}
.app-body .kv{padding:11px 0}
.app-body .view-sub{line-height:1.55}

/* the windows (Add money, Earn, Withdraw, Pair) share the same fields */
.app-body .sheet{border-radius:20px;padding:28px}
.app-body .sheet-intro{font-size:15px;line-height:1.55;color:var(--ink-2);margin:8px 0 22px}
.app-body .sheet .btn.block{height:54px;border-radius:12px;margin-top:14px}
@media(max-width:620px){.app-body .sheet{border-radius:20px 20px 0 0;padding:22px 20px}.app-body .seg{display:flex}.app-body .seg label{flex:1;text-align:center;justify-content:center}.app-body .tools-box .tabs{display:flex;overflow-x:auto}}
.app-body .check input{accent-color:var(--navy);width:18px;height:18px}
.app-body .check{font-size:14.5px;line-height:1.55;padding:14px 16px;background:var(--field);border-radius:var(--rr)}
.st-list-wrap:empty{min-height:500px} /* room for the five groups, so the footer does not jump when the feed arrives */

/* footer: both founders by email (2026-11-01) */
.t-mail .mail + .mail{margin-top:4px}