/* client: fulfillmate · site: usafulfill.co, three pages · tone: corporate-logistics, ledger-precise
   · donor: fulfillmate.us/usa-gateway (measured DOM, see BRAND-NOTES.md beside this file)
   · axes: light/sans-heavy/teal

   ONE STYLESHEET FOR THE WHOLE SITE. Three pages that each carried their own copy of this would
   drift within a week, and a prospect can see all three in one session.

   Diversification rule DELIBERATELY overridden on all three axes: this IS the client's own site
   styling, which is the entire brief.

   TWO SIGNATURE MOTIFS, one per job, and they do not overlap:
     .swap    the before/after pair joined by an arrow - the donor's hero device. Home only.
     .ledger  the hairline row, label left with its unit beneath, value right in tabular nums.
              Everything costed: the rate card, worked examples, the intro offer, contact details.
   A three-column service/unit/rate grid was tried for the rate card and failed - inside the
   two-column rate-group layout the label squeezed to ~260px and the unit dropped to its own row.

   COPY IS US-MARKET VOICE (fulfillment, labeling, itemized). En-GB to a US reader is a tell. */

:root{
  --primary:#089BD9;         /* measured from donor --primary */
  --secondary:#065E85;       /* measured from donor --secondary */
  --primary-lo:#4FBBE6;
  --ink:#0A1114;             /* near-black, tinted toward the brand hue (never pure black) */
  --ink-2:#3D4C53;
  --ink-3:#6B7C84;
  --paper:#FDFEFF;           /* off-white, never pure white */
  --smoke:#F7FAFB;           /* measured from donor */
  --line:#DCE7EC;
  --line-2:#EAF1F4;
  --dark:#050A0D;            /* near-black ground, stands in for the donor's #000 */
  --on-dark:#F2F7F9;
  --on-dark-mute:rgba(242,247,249,.55);  /* measured: donor hero body is rgba(255,255,255,.55) */
  --r:8px;                   /* measured: donor CTA border-radius */
  --r-lg:16px;
  --s4:32px; --s5:48px; --s6:64px; --s7:80px;
  --shell:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'DM Sans',ui-sans-serif,system-ui,sans-serif;
  font-size:17px; line-height:28.9px;   /* measured from donor body copy */
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:'Sora',ui-sans-serif,system-ui,sans-serif;margin:0}
h1{font-size:clamp(38px,5.1vw,54px);font-weight:800;line-height:1.08;letter-spacing:-1.62px}
h2{font-size:clamp(29px,3.8vw,44px);font-weight:700;line-height:1.12;letter-spacing:-.88px}
h3{font-size:19px;font-weight:700;line-height:1.35;letter-spacing:-.2px}
h4{font-size:16px;font-weight:700;line-height:1.4;letter-spacing:-.1px}
p{margin:0}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.shell{max-width:var(--shell);margin:0 auto;padding:0 24px}
.measure{max-width:62ch}

/* ---- texture layer: a faint engineered grid, one light source ---- */
.grid-tex{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:76px 76px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 35%,transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 0%,#000 35%,transparent 78%);
}

/* ---- nav: three page links, same on every page ----
   Desktop puts them inline. MOBILE GETS ITS OWN ROW, not a hamburger: there are exactly three
   links and they fit at 320px, so a toggle would add hidden state and an extra tap for nothing.

   This is NOT the scrollable jump bar that was removed on 20 Aug. That one listed eight SECTION
   anchors on a single long page and was noise. These are the three PAGES, and without them a phone
   visitor cannot reach Rates or How it works at all - which is a broken site, not a clean one. */
.nav{position:sticky;top:0;z-index:40;background:rgba(253,254,255,.93);
  backdrop-filter:saturate(140%) blur(9px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:74px;max-width:var(--shell);margin:0 auto;padding:0 24px}
/* The 44px floor counts the BOX on BOTH axes - a four-letter link is 34px wide and would clear
   a height-only check while failing. min-width is not optional. */
.brand{display:flex;align-items:center;min-height:44px}
.brand img{height:40px;width:auto}
.nav-links{display:none;gap:20px;align-items:center}
.nav-links a{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;padding:0 8px;
  color:var(--ink-2);text-decoration:none;font-size:15px;font-weight:500}
.nav-links a:hover{color:var(--primary)}
.nav-links a[aria-current="page"]{color:var(--ink);font-weight:700}
@media(min-width:1000px){.nav-links{display:flex}}

/* Mobile: compact the logo row so the two rows together stay under ~110px of sticky chrome. */
@media(max-width:999px){
  .nav-in{min-height:64px}   /* 40px logo + 12px each side */
  .nav-in .btn{min-height:44px;padding:11px 18px;font-size:14px}
}
/* The page row. `top` MUST equal the compacted .nav-in height above or the two rows overlap. */
.nav-pages{position:sticky;top:64px;z-index:39;background:rgba(253,254,255,.96);
  backdrop-filter:saturate(140%) blur(9px);border-bottom:1px solid var(--line)}
.nav-pages ul{display:flex;list-style:none;margin:0 auto;padding:0;max-width:var(--shell)}
.nav-pages li{flex:1}
.nav-pages a{display:flex;align-items:center;justify-content:center;
  min-height:46px;min-width:44px;padding:0 6px;
  color:var(--ink-2);text-decoration:none;
  font-family:'Sora',sans-serif;font-size:13.5px;font-weight:600;
  border-bottom:2px solid transparent}
.nav-pages a:hover{color:var(--primary)}
.nav-pages a[aria-current="page"]{color:var(--primary);border-bottom-color:var(--primary)}
/* At 320px "How it works" sits flush to the edge. It does not overflow, but it reads cramped. */
@media(max-width:359px){.nav-pages a{font-size:12.5px;padding:0 2px;letter-spacing:-.2px}}
@media(min-width:1000px){.nav-pages{display:none}}

/* ---- buttons: donor colour, radius and weight; padding raised to clear the 44px floor ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:13px 28px;border-radius:var(--r);
  font-family:'Sora',sans-serif;font-size:15px;font-weight:600;line-height:1.2;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background-color .18s ease-out,color .18s ease-out,border-color .18s ease-out}
.btn-pri{background:var(--primary);color:#FDFEFF}
.btn-pri:hover{background:#0787bd}
.btn-ghost{background:transparent;color:var(--on-dark);border-color:rgba(242,247,249,.34)}
.btn-ghost:hover{border-color:var(--on-dark)}
.btn-line{background:transparent;color:var(--secondary);border-color:var(--line)}
.btn-line:hover{border-color:var(--primary);color:var(--primary)}
a:focus-visible,.btn:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--primary-lo);outline-offset:3px;border-radius:var(--r)}

/* ---- eyebrow pill: donor device ---- */
.eyebrow{display:inline-block;padding:8px 15px;border-radius:6px;
  font-family:'Sora',sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:1.3px;text-transform:uppercase}
.eyebrow-dark{background:rgba(255,255,255,.13);color:rgba(255,255,255,.86)}
.eyebrow-light{background:#E3F3FA;color:var(--secondary)}
.eyebrow-accent{background:rgba(255,255,255,.18);color:#FDFEFF}

/* ---- bands ---- */
.hero{position:relative;overflow:hidden;padding:112px 0 92px;
  background-image:linear-gradient(160deg,#050A0D 0%,#065E85 50%,#089BD9 100%);
  color:var(--on-dark)}
.hero-sm{padding:88px 0 72px}          /* the two inner pages lead shorter than home */
.band-dark{position:relative;overflow:hidden;background:var(--dark);color:var(--on-dark);padding:96px 0}
.band-white{background:var(--paper);padding:92px 0}
.band-smoke{background:var(--smoke);padding:92px 0}
.band-accent{position:relative;overflow:hidden;color:#FDFEFF;padding:84px 0;
  background-image:linear-gradient(135deg,#089BD9 0%,#065E85 100%)}
.band-close{position:relative;overflow:hidden;background:var(--dark);color:var(--on-dark);padding:100px 0}
.band-dark h2,.band-accent h2,.band-close h2,.hero h2{color:#FDFEFF}
.lede{color:var(--ink-2);margin-top:18px}
.band-dark .lede,.band-close .lede{color:var(--on-dark-mute)}
.band-accent .lede{color:rgba(255,255,255,.85)}
.sec-head h2{margin-top:18px}

/* ---- hero ---- */
.hero-in{position:relative;display:grid;gap:var(--s6);align-items:center}
@media(min-width:1000px){.hero-in{grid-template-columns:58fr 42fr;gap:var(--s7)}}
.hero h1{color:#FDFEFF;margin:22px 0 0}
.hero h1 .accent{color:var(--primary-lo);display:block}
.hero-sub{color:var(--on-dark-mute);margin-top:22px;max-width:56ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero-panel{display:grid;gap:14px}
.panel-k{font-family:'Sora',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--primary-lo);margin-bottom:14px}
.pcard{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg);padding:24px;display:grid;gap:22px}
@media(min-width:520px){.pcard{grid-template-columns:1fr 1fr}}
.pcard .k{font-family:'Sora',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--primary-lo)}
.pcard .v{font-family:'Sora',sans-serif;font-size:33px;font-weight:800;letter-spacing:-1.2px;
  line-height:1.05;color:#FDFEFF;margin-top:8px}
.pcard .n{font-size:13px;line-height:1.5;color:rgba(242,247,249,.5);margin-top:7px}

/* ---- MOTIF 1: the before/after swap pair, taken from the donor hero. HOME ONLY. ---- */
.swap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  padding:22px 24px;border-radius:var(--r-lg)}
.swap-dark{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14)}
.swap-k{font-family:'Sora',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;margin-bottom:7px}
.swap-v{font-family:'Sora',sans-serif;font-size:clamp(20px,2.3vw,25px);font-weight:800;
  letter-spacing:-.7px;line-height:1.1}
.swap-n{font-size:13px;line-height:1.45;margin-top:5px}
.swap-ar{font-size:21px;line-height:1;opacity:.62}
.swap-dark .swap-k{color:rgba(255,255,255,.5)}
.swap-dark .was .swap-v{color:rgba(255,255,255,.42);text-decoration:line-through;text-decoration-thickness:2px}
.swap-dark .now .swap-k{color:var(--primary-lo)}
.swap-dark .now .swap-v{color:#FDFEFF}
.swap-dark .swap-n{color:rgba(242,247,249,.44)}
.swap-dark .swap-ar{color:var(--primary-lo)}

/* ---- MOTIF 2: the hairline ledger row. Everything costed, on every page. ---- */
.ledger{list-style:none;margin:0;padding:0}
.ledger li{display:grid;grid-template-columns:1fr auto;gap:6px 22px;
  align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line-2)}
.ledger li:last-child{border-bottom:0}
.ledger .lab{font-size:15.5px;line-height:1.45;color:var(--ink-2)}
.ledger .lab strong{display:block;color:var(--ink);font-weight:500}
.ledger .unit{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px;line-height:1.4}
.ledger .val{font-family:'Sora',sans-serif;font-size:15.5px;font-weight:700;
  letter-spacing:-.2px;color:var(--ink);text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.ledger .waived{color:var(--primary);font-weight:500}
.ledger-dark li{border-bottom-color:rgba(242,247,249,.12)}
.ledger-dark .lab{color:var(--on-dark-mute)}
.ledger-dark .lab strong{color:#FDFEFF;font-weight:500}
.ledger-dark .val{color:var(--primary-lo)}
.ledger-dark .unit{color:rgba(242,247,249,.4)}
.ledger .total{border-top:2px solid var(--primary);border-bottom:0;margin-top:6px;padding-top:16px}
.ledger .total .lab{font-family:'Sora',sans-serif;font-size:12.5px;font-weight:700;
  letter-spacing:1.1px;text-transform:uppercase;color:var(--ink-3)}
.ledger .total .val{font-size:21px;font-weight:800;letter-spacing:-.7px}
.ledger-dark .total .lab{color:rgba(242,247,249,.5)}
.ledger-dark .total .val{color:#FDFEFF}

/* ---- trusted-by strip: deliberately SHORT band, breaks the section rhythm ---- */
.trust{background:var(--paper);padding:42px 0;border-bottom:1px solid var(--line)}
.trust-lab{text-align:center;font-family:'Sora',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-3);margin-bottom:24px}
/* Static row, not a marquee - the scrolling version glitched at the loop seam and was the only
   animation over the 300ms motion budget. */
.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:24px 50px}
.logos img{height:34px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.78}

/* ---- HOME: the two-track band, the ONE place each campaign cohort is named ---- */
.tracks{display:grid;gap:var(--s5);margin-top:var(--s6)}
@media(min-width:900px){.tracks{grid-template-columns:1fr 1fr;gap:var(--s6)}}
.track{padding-top:26px;border-top:2px solid var(--primary)}
.track .who{font-family:'Sora',sans-serif;font-size:11px;font-weight:700;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--primary-lo);margin-bottom:13px}
.track h3{color:#FDFEFF;font-size:23px;margin-bottom:12px}
.track p{color:var(--on-dark-mute);font-size:16px;line-height:1.62}
.track .figs{display:flex;flex-wrap:wrap;gap:26px;margin-top:22px}
.track .fig .v{font-family:'Sora',sans-serif;font-size:28px;font-weight:800;letter-spacing:-1px;
  color:#FDFEFF;line-height:1.05}
.track .fig .l{font-size:12.5px;color:rgba(242,247,249,.45);margin-top:5px;line-height:1.4}

/* ---- HOME: what changes ---- */
.changes{display:grid;gap:var(--s5);margin-top:var(--s6)}
@media(min-width:880px){.changes{grid-template-columns:repeat(3,1fr);gap:var(--s4) var(--s6)}}
.change{padding-top:22px;border-top:2px solid var(--primary)}
.change h3{margin-bottom:10px}
.change p{color:var(--ink-2);font-size:16px;line-height:1.62}

/* ---- HOME: proof figures ---- */
.proof{display:grid;gap:20px;margin-top:var(--s5)}
@media(min-width:860px){.proof{grid-template-columns:1.35fr 1fr 1fr}}
.pf{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px}
.pf .v{font-family:'Sora',sans-serif;font-size:38px;font-weight:800;letter-spacing:-1.4px;
  line-height:1.05;color:var(--secondary);font-variant-numeric:tabular-nums}
.pf h3{margin:12px 0 8px}
.pf p{color:var(--ink-2);font-size:15px;line-height:1.6}
.pf-src{margin-top:12px;font-size:12.5px;color:var(--ink-3)}

/* ---- case studies ---- */
.cases{display:grid;gap:20px;margin-top:var(--s6)}
@media(min-width:900px){.cases{grid-template-columns:1fr 1fr}}
.case{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 28px;display:flex;flex-direction:column}
.band-white .case{background:var(--smoke)}
.case .who{font-family:'Sora',sans-serif;font-size:11px;font-weight:700;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--primary);margin-bottom:10px}
.case h3{font-size:23px;letter-spacing:-.5px}
.case .story{margin-top:14px;color:var(--ink-2);font-size:15px;line-height:1.62}
.quote{margin-top:auto;padding-top:20px;border-top:1px solid var(--line)}
.quote p{font-size:15px;line-height:1.6;color:var(--ink);font-style:italic}
.quote cite{display:block;margin-top:10px;font-style:normal;font-size:13px;color:var(--ink-3)}

/* ---- client roster ---- */
.roster-lab{font-family:'Sora',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--ink-3);margin-top:var(--s6)}
.roster{display:grid;gap:var(--s5) var(--s6);margin-top:22px}
@media(min-width:760px){.roster{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.roster{grid-template-columns:repeat(4,1fr);gap:var(--s4)}}
.roster h4{padding-top:16px;border-top:2px solid var(--primary);margin-bottom:10px;
  font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--secondary)}
.roster ul{list-style:none;margin:0;padding:0}
.roster li{font-size:15px;line-height:1.8;color:var(--ink-2)}

/* ---- tab control (rate card, getting-started routes) ---- */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s5)}
.tab{min-height:44px;padding:10px 18px;border-radius:var(--r);cursor:pointer;
  font-family:'Sora',sans-serif;font-size:13.5px;font-weight:600;
  background:var(--paper);color:var(--ink-2);border:1px solid var(--line);
  transition:background-color .18s ease-out,color .18s ease-out,border-color .18s ease-out}
.tab:hover{border-color:var(--primary);color:var(--primary)}
.tab[aria-selected="true"]{background:var(--primary);color:#FDFEFF;border-color:var(--primary)}
.tabpanel{margin-top:var(--s5)}
.tabpanel[hidden]{display:none}

/* ---- rate groups ---- */
.rates{display:grid;gap:var(--s5) var(--s6)}
@media(min-width:900px){.rates{grid-template-columns:1fr 1fr}}
.rate-grp h3{padding-bottom:12px;border-bottom:2px solid var(--primary);margin-bottom:2px;
  font-size:15.5px;letter-spacing:-.1px}
.rate-grp.wide{grid-column:1 / -1}
.exs{display:grid;gap:18px;margin-top:var(--s5)}
@media(min-width:760px){.exs{grid-template-columns:1fr 1fr}}
@media(min-width:1060px){.exs{grid-template-columns:repeat(3,1fr)}}
.ex{background:var(--smoke);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 20px}
.band-smoke .ex{background:var(--paper)}
.ex .k{font-family:'Sora',sans-serif;font-size:10px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--primary);margin-bottom:8px}
.ex h4{font-size:14px;line-height:1.45;margin-bottom:12px}
.ex .ledger .lab,.ex .ledger .val{font-size:13.5px}
.ex .ledger li{padding:8px 0}
.ex .ledger .total .val{font-size:17px}
.notes{margin-top:var(--s5);padding:26px 24px;border-radius:var(--r-lg);
  background:var(--smoke);border:1px solid var(--line)}
.band-smoke .notes{background:var(--paper)}
.notes h4{margin-bottom:14px;font-size:12.5px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--secondary)}
.notes ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
@media(min-width:880px){.notes ul{grid-template-columns:1fr 1fr;gap:8px var(--s5)}}
.notes li{position:relative;padding-left:20px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.notes li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:2px;background:var(--primary)}

/* ---- intro offer ---- */
.offer-in{display:grid;gap:var(--s6);align-items:start}
@media(min-width:980px){.offer-in{grid-template-columns:42fr 58fr;gap:var(--s7)}}
.offer-note{margin-top:24px;padding:20px 22px;border-radius:var(--r-lg);
  background:rgba(8,155,217,.11);border:1px solid rgba(79,187,230,.3);
  font-size:15px;line-height:1.6;color:rgba(242,247,249,.85)}
.offer-note strong{color:#FDFEFF;font-weight:700}

/* ---- services ---- */
.svcs{display:grid;gap:0 var(--s6);margin-top:var(--s5);counter-reset:sv}
@media(min-width:900px){.svcs{grid-template-columns:1fr 1fr}}
.svc{counter-increment:sv;position:relative;padding:20px 0 20px 52px;
  border-bottom:1px solid var(--line)}
.svc::before{content:counter(sv,decimal-leading-zero);position:absolute;left:0;top:22px;
  font-family:'Sora',sans-serif;font-size:13px;font-weight:800;color:var(--primary);
  font-variant-numeric:tabular-nums}
.svc h3{margin-bottom:4px;font-size:17.5px}
.svc p{color:var(--ink-2);font-size:15px;line-height:1.55}
.svc:last-child{border-bottom:0}
@media(min-width:900px){.svc:nth-last-child(2){border-bottom:0}}

/* ---- locations + shipping ---- */
.sites{display:grid;gap:18px;margin-top:var(--s5)}
@media(min-width:760px){.sites{grid-template-columns:1fr 1fr}}
.site{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-lg);padding:26px 24px}
.site .k{font-family:'Sora',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:rgba(255,255,255,.72)}
.site h3{color:#FDFEFF;margin:8px 0 14px;font-size:22px}
.site .ledger li{border-bottom-color:rgba(255,255,255,.18);padding:11px 0}
.site .ledger .lab{color:rgba(255,255,255,.65);font-size:14px}
.site .ledger .val{color:#FDFEFF;font-size:14px;white-space:normal;max-width:24ch}
.ship-lab{margin-top:var(--s5);font-family:'Sora',sans-serif;font-size:12.5px;font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-3)}
.ship-wrap{display:grid;gap:18px;margin-top:20px}
@media(min-width:900px){.ship-wrap{grid-template-columns:1fr 1fr}}
.ship{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--paper)}
.ship.wide{grid-column:1 / -1}
.ship-h{padding:13px 20px;background:var(--smoke);border-bottom:1px solid var(--line);
  font-family:'Sora',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--secondary)}
.ship-scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:400px}
th,td{padding:11px 20px;text-align:right;font-size:14px;border-bottom:1px solid var(--line-2);
  font-variant-numeric:tabular-nums}
th:first-child,td:first-child{text-align:left}
thead th{font-family:'Sora',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--line)}
tbody td{color:var(--ink-2)}
tbody tr:last-child td{border-bottom:0}
.fine{margin-top:14px;font-size:13px;color:var(--ink-3);line-height:1.5}
.band-accent .fine{color:rgba(255,255,255,.7)}

/* ---- getting started: one line per step ---- */
.route{margin-top:var(--s5);counter-reset:st;padding:0}
.route li{counter-increment:st;position:relative;padding:16px 0 16px 56px;
  border-bottom:1px solid var(--line);list-style:none}
.route li:last-child{border-bottom:0}
.route li::before{content:counter(st,decimal-leading-zero);position:absolute;left:0;top:18px;
  font-family:'Sora',sans-serif;font-size:13px;font-weight:800;color:var(--primary);
  font-variant-numeric:tabular-nums}
.route strong{display:block;font-family:'Sora',sans-serif;font-size:16px;font-weight:700;
  letter-spacing:-.2px;color:var(--ink);margin-bottom:3px}
.route span{color:var(--ink-2);font-size:15px;line-height:1.55}
.principles{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s5)}
.principles span{font-family:'Sora',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.3px;
  padding:8px 14px;border-radius:6px;background:var(--paper);border:1px solid var(--line);
  color:var(--ink-2)}

/* ---- standards ---- */
.stds{display:grid;gap:var(--s5) var(--s6);margin-top:var(--s5)}
@media(min-width:760px){.stds{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.stds{grid-template-columns:repeat(3,1fr)}}
.std{padding-top:18px;border-top:2px solid var(--primary)}
.std h4{margin-bottom:10px;font-size:14.5px}
.std ul{list-style:none;margin:0;padding:0}
.std li{position:relative;padding-left:19px;margin-bottom:7px;font-size:14.5px;line-height:1.5;
  color:var(--ink-2)}
.std li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:2px;background:var(--primary)}
.callout{margin-top:var(--s5);padding:20px 22px;border-radius:var(--r-lg);
  background:#E3F3FA;border:1px solid #BFE4F5;color:var(--secondary);font-size:14.5px;line-height:1.6}

/* ---- our story ---- */
.founders{display:grid;gap:var(--s6);align-items:center}
@media(min-width:940px){.founders{grid-template-columns:47fr 53fr;gap:var(--s7)}}
.founders-img{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.founders-img img{width:100%;height:100%;object-fit:cover}
.values{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;padding:0;list-style:none}
.values li{font-family:'Sora',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.4px;
  padding:8px 14px;border-radius:6px;background:var(--paper);border:1px solid var(--line);
  color:var(--ink-2)}
.band-white .values li{background:var(--smoke)}

/* ---- FAQ ---- */
.faq{margin-top:var(--s5);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:22px;
  min-height:44px;padding:22px 0;cursor:pointer;list-style:none;
  font-family:'Sora',sans-serif;font-size:17px;font-weight:700;letter-spacing:-.3px;
  color:var(--ink);transition:color .18s ease-out}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--primary)}
.faq summary::after{content:"";flex:none;width:12px;height:12px;
  border-right:2px solid var(--primary);border-bottom:2px solid var(--primary);
  transform:rotate(45deg);margin-top:-6px;transition:transform .2s ease-out}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.faq .a{padding:0 0 24px;max-width:76ch}
.faq .a p{color:var(--ink-2);font-size:15.5px;line-height:1.65}
.faq .a p + p{margin-top:12px}
.faq .a a{color:var(--secondary);text-decoration:underline;text-underline-offset:3px}
/* A jump link on its own line is a control, not prose, so it takes the 44px floor. */
.faq .a .jump a{display:inline-flex;align-items:center;min-height:44px;font-weight:500}

/* ---- close ---- */
.close-in{position:relative;display:grid;gap:var(--s6);align-items:center}
@media(min-width:900px){.close-in{grid-template-columns:1.05fr .95fr;gap:var(--s7)}}
.close-list{list-style:none;margin:22px 0 0;padding:0}
.close-list li{position:relative;padding-left:28px;margin-bottom:12px;
  color:var(--on-dark-mute);font-size:16px;line-height:1.55}
.close-list li::before{content:"";position:absolute;left:0;top:9px;width:11px;height:11px;
  border-radius:2px;background:var(--primary)}
.contact-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg);padding:28px 26px}
.contact-card .ledger .val{white-space:normal;color:#FDFEFF}
.contact-card a{display:inline-flex;align-items:center;min-height:44px;
  color:var(--primary-lo);text-decoration:none;border-bottom:1px solid rgba(79,187,230,.55)}
.contact-card a:hover{color:#FDFEFF;border-bottom-color:#FDFEFF}
.contact-card .btn{min-height:48px;width:100%;margin-top:22px;border-bottom:0;color:#FDFEFF}
.contact-card .btn:hover{color:#FDFEFF}

/* ---- footer ---- */
.foot{background:var(--paper);border-top:1px solid var(--line);padding:56px 0 36px;
  font-size:14.5px;line-height:1.7;color:var(--ink-3)}
.foot-top{display:grid;gap:var(--s5)}
@media(min-width:820px){.foot-top{grid-template-columns:1.5fr 1fr 1fr;gap:var(--s6)}}
.foot img{height:26px;width:auto;margin-bottom:14px}
.foot h4{font-family:'Sora',sans-serif;font-size:11px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--ink-2);margin:0 0 10px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:2px}
.foot a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid transparent}
.foot a:hover{color:var(--primary);border-bottom-color:var(--primary)}
/* The 44px floor applies to footer links too - they are the easiest ones to miss. */
.foot li a,.foot-legal a{display:inline-flex;align-items:center;justify-content:flex-start;
  min-height:44px;min-width:44px}
.foot-bar{margin-top:var(--s5);padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;align-items:center;
  font-size:13.5px}
.foot-legal{display:flex;flex-wrap:wrap;gap:0 22px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}