/* pudo.now v3 — the SMARTS identity in one accent (Gateway's Forge Orange): colours are tokens in :root. Fonts self-hosted (no Google). */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/fonts/inter-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/fonts/inter-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* PUDO Now is a Gateway product, so it wears one SMARTS accent: Forge Orange (#DB6428), as one tonal ramp.
     The other SMARTS product colours appear only inside the SMARTS logo. Every text pair below passes WCAG AA. */
  --brand:#DB6428; --brand-rgb:219 100 40;   /* marks, graphics, focus ring, the hero panel and the closing band */
  --brand-fill:#B8501C; --brand-fill-h:#A3461A; --on-brand:#fff;   /* fills that carry white text (5.0:1) */
  --brand-text:#A8461A;   /* orange text on light grounds (5.2:1 or more) */
  --brand-deep:#9A3F12;   /* tag and stamp text on orange tints */
  --brand-on-dark:#EE8150; --tag-on-dark:#F5A274;   /* orange text on dark grounds */
  --light:#FAFAF8; --alt:#F5F5F3; --warm:#F5F0EB; --ink:#1C1917; --ink-2:#57534E; --muted:#78716C; --rule:#E7E5E4; --rule-2:#D6D3D1;
  --dark:#0D0D0D; --d1:#161616; --d2:#1E1E1E; --d3:#242424; --d-b:#363636; --d-t:#FAFAF8; --d-t2:#A8A29E; --d-muted:#A8A29E;
  --d-line:#2C2C2C; --d-line-2:#4A4A4A; --d-node:#2A2A2A; --d-link:#2E2E2E; --d-meter:#333333; --d-dot:#3A3A3A; --d-stat:#D6D3D1;
  --ok:#3A8A5C; --ok-text:#2D6B47; --warn:#D4A017; --err:#C93B3B;
  --focus:var(--brand);
  /* the hero: daylight ground and ink type; the brand colour is a flat panel behind the product (.stage::before) */
  --hero-bg:var(--light); --hero-fg:var(--ink); --hero-fg-2:var(--ink-2); --hero-fg-3:var(--ink-2); --hero-kicker:var(--brand-text);
  --hero-chip:rgba(28,25,23,.07); --hero-glow:none;
  --band:repeating-linear-gradient(0deg,rgba(255,255,255,.1) 0 1px,transparent 1px 24px),repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0 1px,transparent 1px 24px),var(--brand);
  --tiles-blend:overlay; --tiles-o:.5;
  --seg-bg:rgba(28,25,23,.04); --seg-line:var(--rule); --seg-fg:var(--ink-2); --seg-on-bg:var(--ink); --seg-on-fg:var(--light);
  --cta-bg:var(--brand-fill); --cta-fg:var(--on-brand); --cta-shadow:0 6px 16px rgb(var(--brand-rgb) / .3);
  --ghost-bg:transparent; --ghost-bg-h:rgba(28,25,23,.05); --ghost-line:var(--rule-2); --ghost-fg:var(--ink);
  /* the nav pill while it floats over the hero */
  --pill-bg:rgba(250,250,248,.92); --pill-line:var(--rule); --pill-fg:var(--ink); --pill-chip:var(--alt); --pill-chip-h:var(--rule);
  --pill-focus:var(--focus); --pill-dot:var(--brand); --pill-dot-o:1; --pill-cta-bg:var(--brand-fill); --pill-cta-fg:var(--on-brand);
  --stile-ring:var(--brand); --stile-glow:0 0 40px rgb(var(--brand-rgb) / .16);
  --glow:0 0 32px rgb(var(--brand-rgb) / .17),0 0 64px rgb(var(--brand-rgb) / .09);
  --lift:0 1px 2px rgba(28,25,23,.06),0 12px 32px rgba(28,25,23,.08);
  --wrap:1240px; --gut:clamp(20px,4vw,48px); --r:18px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--light);color:var(--ink);font:400 17px/1.6 "Inter",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
img,svg{display:block}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-999px;top:8px;z-index:99;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px}
.skip:focus{left:8px}
h1,h2,h3{margin:0;text-wrap:balance}
p{text-wrap:pretty}
.h2{font-size:clamp(34px,4.4vw,60px);line-height:1.04;letter-spacing:-.04em;font-weight:750;margin:0 0 18px;max-width:18ch}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--ink-2);max-width:56ch;margin:0}
.dark .lead,.dark .muted{color:var(--d-t2)}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--brand-text);margin:0 0 18px}
.kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.grad .kicker{color:var(--hero-kicker)}
.dark .kicker{color:var(--brand-on-dark)}
section{position:relative}
.pad{padding:clamp(88px,11vw,148px) 0}
.dark{background:var(--dark);color:var(--d-t)}
.grad{background:var(--hero-bg);color:var(--hero-fg);overflow:hidden;isolation:isolate}
.tiles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:var(--tiles-blend);opacity:var(--tiles-o);z-index:0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:inherit;font-weight:650;font-size:15px;text-decoration:none;border-radius:10px;padding:13px 22px;border:0;cursor:pointer;white-space:nowrap;transition:transform .2s,box-shadow .2s,background .2s,color .2s}
.btn:hover{transform:translateY(-1px)}
.btn-white{background:var(--cta-bg);color:var(--cta-fg)}
.btn-white:hover{box-shadow:var(--cta-shadow)}
.btn-orange{background:var(--brand-fill);color:var(--on-brand)}
.btn-orange:hover{background:var(--brand-fill-h);box-shadow:0 6px 16px rgb(var(--brand-rgb) / .3)}
.btn-ghost{background:var(--ghost-bg);color:var(--ghost-fg);border:1px solid var(--ghost-line)}
.btn-ghost:hover{background:var(--ghost-bg-h)}
.btn-ink{background:var(--ink);color:#fff}
.arrow{width:16px;height:16px}

/* nav */
.nav{position:fixed;top:14px;left:0;right:0;z-index:50;transition:top .3s}
.pill{display:flex;align-items:center;gap:18px;max-width:1144px;margin:0 auto;padding:9px 10px 9px 20px;border-radius:999px;background:var(--pill-bg);border:1px solid var(--pill-line);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);transition:background .3s,border-color .3s,color .3s;color:var(--pill-fg)}
.nav.solid .pill{background:rgba(250,250,248,.86);border-color:var(--rule);color:var(--ink);box-shadow:var(--lift)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.brand img{width:26px;height:26px}
.brand b{font-size:18px;font-weight:800;letter-spacing:-.02em}
.brand b i{font-style:normal;color:var(--brand)}
.nav:not(.solid) .brand b i{color:var(--pill-dot);opacity:var(--pill-dot-o)}
.brand small{font-size:12px;opacity:.65}
.links{display:flex;gap:24px;list-style:none;margin:0 auto;padding:0;font-size:14px;font-weight:500}
.links a{text-decoration:none;opacity:.78;white-space:nowrap}
.links a:hover{opacity:1}
/* Language menu: a native <details>, so it works without JavaScript and scales to more languages than a row of links. */
.langs{position:relative;font-size:13px;font-weight:600}
.langs details,.langs details:last-child{border:0;padding:0}
.langs summary{list-style:none;display:flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;background:var(--pill-chip);cursor:pointer;user-select:none}
.langs summary::-webkit-details-marker{display:none}
.langs summary::after{content:"";width:6px;height:6px;margin-top:-3px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:rotate(45deg);transition:transform .2s,margin .2s}
.langs details[open] summary::after{margin-top:3px;transform:rotate(-135deg)}
.langs summary:hover,.langs details[open] summary{background:var(--pill-chip-h)}
.langs summary:focus-visible{border-radius:999px;outline:2px solid var(--pill-focus);outline-offset:2px}
.nav.solid .langs summary:focus-visible{outline-color:var(--focus)}
.nav.solid .langs summary{background:var(--alt)}
.nav.solid .langs summary:hover,.nav.solid .langs details[open] summary{background:var(--rule)}
.langs ul{position:absolute;right:0;top:calc(100% + 12px);z-index:5;margin:0;padding:6px;list-style:none;min-width:176px;background:#fff;color:var(--ink);border:1px solid var(--rule);border-radius:14px;box-shadow:var(--lift)}
.langs li a{display:block;padding:9px 12px;border-radius:9px;font-size:14px;font-weight:550;text-decoration:none;color:var(--ink)}
.langs li a:hover,.langs li a:focus-visible{background:var(--alt)}
.langs li a[aria-current="true"]{background:var(--alt);font-weight:700;color:var(--brand-text)}
.pill .btn{padding:9px 16px;font-size:14px}
.pill .btn-white{background:var(--pill-cta-bg);color:var(--pill-cta-fg)}
.nav.solid .pill .btn-white{background:var(--brand-fill);color:var(--on-brand)}
@media (max-width:1240px){.links{display:none}.langs{margin-left:auto}}
@media (max-width:560px){.pill{gap:10px}.brand small{display:none}.pill .btn{padding:8px 12px;font-size:13px;white-space:normal;line-height:1.15;text-align:center}}
@media (max-width:380px){.brand b{display:none}}

/* hero */
.hero{min-height:min(100svh,940px);display:flex;align-items:center;padding:132px 0 88px}
.hero::after{content:"";position:absolute;inset:0;z-index:0;background:var(--hero-glow);pointer-events:none}
.hero .wrap{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,64px);align-items:center}
@media (max-width:1000px){.hero .wrap{grid-template-columns:minmax(0,1fr)}}
.hero h1{font-size:clamp(46px,6.4vw,96px);line-height:.98;letter-spacing:-.05em;font-weight:800}
/* Longer headline words (transporteurs, transportistas, transportadoras) get a smaller headline, so no word runs under the parcel label.
   "transportadoras." is 7.6 times its font size wide and the label starts about 510px from the text edge, hence the lower cap for Portuguese. */
html:is([lang="fr"],[lang="es"],[lang="hr"]) .hero h1{font-size:clamp(42px,5.2vw,78px)}
html[lang="pt"] .hero h1{font-size:clamp(36px,5.2vw,64px)}
.hero h1 span{display:block}
.pudo-eq{display:flex;align-items:center;gap:8px;margin-top:26px;font-size:14px;color:var(--hero-fg-3)}
.pudo-eq b{display:inline-grid;place-items:center;min-width:32px;height:28px;padding:0 6px;border-radius:8px;background:var(--hero-chip);color:var(--hero-fg);font-weight:800}
.seg{display:inline-flex;margin-top:30px;padding:4px;border-radius:999px;background:var(--seg-bg);border:1px solid var(--seg-line)}
.seg button{font:inherit;font-size:14px;font-weight:600;color:var(--seg-fg);background:none;border:0;border-radius:999px;padding:9px 18px;cursor:pointer;transition:background .25s,color .25s}
.seg button[aria-selected="true"]{background:var(--seg-on-bg);color:var(--seg-on-fg)}
.hp{margin-top:20px;max-width:560px;min-height:150px}
.hp[hidden]{display:none}
.hp p{margin:0;font-size:clamp(17px,1.4vw,19px);line-height:1.6;color:var(--hero-fg-2)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* hero stage: the product composition */
.stage{position:relative;height:640px;justify-self:center;width:min(100%,600px);perspective:1400px}
/* a flat brand panel behind the product composition, used by a direction that keeps the hero light (none by default) */
.stage::before{content:"";position:absolute;z-index:-1;top:-200vh;bottom:-200vh;left:-6%;right:-100vw;background:var(--band);pointer-events:none}
@media (max-width:1000px){.stage::before{top:150px;left:-100vw}}
@media (max-width:1000px){.stage{height:600px}}
@media (max-width:520px){.stage{height:540px;transform:scale(.86);transform-origin:top center;margin-bottom:-70px}}
.layer{position:absolute;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
/* The label straddles the edge of the orange panel but stays inside the column gap: at left:-17% it covered the end of
   the hero text by up to 46 px between 1001 and 1440 px, in every language (measured 25 Oct 2026). 16 px of margin covers the rotated corners and the
   pointer parallax. */
.l-label{left:calc(16px - clamp(28px,4vw,64px));top:190px;width:350px;transform:rotate(-7deg)}
.l-phone{left:50%;top:10px;margin-left:-150px;z-index:3}
.l-note{right:-4%;top:96px;width:300px;z-index:4}
.l-chip{left:2%;bottom:52px;z-index:4}
@media (max-width:1000px){.l-label{left:-4%}}
@media (max-width:520px){.l-label{left:-14%;width:300px;top:230px}.l-note{right:-10%;width:270px}}

/* parcel label */
.label{background:#fff;color:var(--ink);border-radius:12px;box-shadow:0 30px 60px rgba(28,25,23,.3),0 8px 18px rgba(28,25,23,.16);overflow:hidden}
.label .r{display:grid;grid-template-columns:minmax(0,1fr);border-bottom:2px solid var(--ink);position:relative}
.label .r:last-child{border-bottom:0}
.label .r > *{min-width:0}
.label .r2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.label .c{padding:10px 14px}
.label .c + .c{border-left:2px solid var(--ink)}
.cap{display:block;font-size:10.5px;color:var(--muted);line-height:1.2}
.val{display:block;font-weight:800;font-size:16px;letter-spacing:-.01em;line-height:1.3}
.bars{display:flex;height:64px;margin:14px 14px 0;overflow:hidden}
.bars span{display:block;flex:none;background:var(--ink)}
.digits{display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:.2em;color:var(--ink-2);margin:5px 14px 10px;font-variant-numeric:tabular-nums}
.scan{position:absolute;left:8px;right:8px;top:14px;height:3px;border-radius:2px;background:var(--brand);box-shadow:0 0 14px 3px rgb(var(--brand-rgb) / .55);opacity:0}
.status{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px}
.stamp{display:inline-block;font-weight:800;font-size:14px;color:var(--brand-deep);border:2px solid currentColor;border-radius:5px;padding:2px 9px;transform:rotate(-3deg)}
.stamp.done{color:var(--ok-text)}
.time{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}

/* notification card */
.note{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:20px;background:rgba(255,255,255,.94);color:var(--ink);box-shadow:0 20px 44px rgba(28,25,23,.28);backdrop-filter:blur(10px);opacity:0;transform:translateY(-14px) scale(.96);transition:opacity .45s,transform .45s cubic-bezier(.2,.9,.3,1.1)}
.note.show{opacity:1;transform:none}
.note .ni{width:38px;height:38px;border-radius:11px;background:var(--ink);display:grid;place-items:center;flex:none}
.note b{display:block;font-size:13px}
.note span{display:block;font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.note small{font-size:11px;color:var(--muted)}
.chipf{display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:999px;background:rgba(13,13,13,.55);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:13px;font-weight:600;backdrop-filter:blur(10px)}
.chipf b{font-size:17px;font-variant-numeric:tabular-nums;color:var(--tag-on-dark)}

/* phone + app screens (the real store app, restyled) */
.phone{width:300px;height:620px;border-radius:46px;background:#0f0f0f;padding:10px;box-shadow:0 44px 90px rgba(28,25,23,.36),0 0 0 1px #2a2a2a inset;position:relative;flex:none}
.phone .scr{position:absolute;inset:10px;border-radius:36px;overflow:hidden;background:var(--alt)}
/* the product mock-ups (app screens on #F5F5F3, the hero's cards over the orange panel) take the muted grey one step darker,
   because the SMARTS #78716C drops to 4.4:1 there */
.stage,.scr{--muted:#716A65}
.notch{position:absolute;top:19px;left:50%;transform:translateX(-50%);width:92px;height:25px;border-radius:14px;background:#0f0f0f;z-index:6}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;transform:translateX(16px);transition:opacity .45s,transform .45s;font-size:12px;color:var(--ink)}
.screen.on{opacity:1;transform:none}
.sb{height:42px;display:flex;justify-content:space-between;align-items:center;padding:8px 24px 0;font-size:11px;font-weight:700;flex:none}
.apphd{display:flex;align-items:center;gap:8px;padding:6px 14px 10px;flex:none}
.av{width:28px;height:28px;border-radius:8px;background:var(--brand-fill);color:var(--on-brand);display:grid;place-items:center;font-weight:800;font-size:12px;flex:none}
.apphd b{display:block;font-size:12.5px;line-height:1.15}
.apphd .ic{margin-left:auto;display:flex;gap:6px}
.apphd .ic i{width:24px;height:24px;border-radius:7px;background:#fff;border:1px solid var(--rule);display:grid;place-items:center;font-style:normal;font-size:10px;color:var(--ink-2)}
.apphd .ic i.sos{color:var(--err)}
.mut{color:var(--muted);font-size:10.5px}
.trn{font-size:9px;font-weight:800;color:var(--brand-deep);background:rgb(var(--brand-rgb) / .14);border-radius:4px;padding:1px 5px;letter-spacing:.03em}
.body{flex:1;padding:0 12px;overflow:hidden;display:flex;flex-direction:column;gap:8px;min-height:0}
.acard{border-radius:14px;padding:12px;color:#fff}
.acard .k{font-size:9px;font-weight:700;letter-spacing:.06em;opacity:.8;text-transform:uppercase}
.acard .h{font-size:15px;font-weight:750;margin:3px 0 8px;letter-spacing:-.01em}
.acard .b{display:block;text-align:center;background:#fff;border-radius:8px;padding:6px;font-weight:750;font-size:11px}
.ac-in{background:var(--ink)}.ac-in .b{color:var(--ink)}
.ac-out{background:var(--brand-fill);color:var(--on-brand)}.ac-out .b{color:var(--brand-fill)}
.capc{background:#fff;border:1px solid var(--rule);border-radius:12px;padding:10px 12px}
.capc .row{display:flex;justify-content:space-between;font-size:11px;font-weight:650}
.meter{height:6px;border-radius:3px;background:var(--rule);margin:8px 0 6px;overflow:hidden}
.meter i{display:block;height:100%;width:4%;background:var(--ok);border-radius:3px;transition:width .9s cubic-bezier(.2,.8,.2,1),background .4s}
.cam{flex:1;margin:0 -12px;background:#141414;position:relative;display:grid;place-items:center;min-height:0}
.cam .hint{position:absolute;top:14px;left:0;right:0;text-align:center;color:rgba(255,255,255,.72);font-size:11px}
.frame{width:200px;height:118px;border-radius:14px;position:relative;background:#fff;outline:3px solid var(--brand);outline-offset:10px}
.frame .bc{position:absolute;inset:16px 16px 26px;display:flex;overflow:hidden}
.frame .bc span{display:block;flex:none;background:var(--ink)}
.frame .tn{position:absolute;bottom:7px;left:0;right:0;text-align:center;font-size:9px;letter-spacing:.14em;color:var(--ink-2)}
.laser{position:absolute;left:8px;right:8px;top:50%;height:2px;background:var(--brand);box-shadow:0 0 10px 2px rgb(var(--brand-rgb) / .6)}
.screen.on .laser,.bento .on .laser{animation:laser 1.1s ease-in-out infinite alternate}
@keyframes laser{from{top:16%}to{top:80%}}
.toast{position:absolute;left:12px;right:12px;bottom:12px;background:#fff;border-radius:12px;padding:10px 12px;display:flex;gap:10px;align-items:center;transform:translateY(140%);transition:transform .45s cubic-bezier(.2,.9,.3,1.15)}
.toast.show{transform:none}
.okd{width:26px;height:26px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;font-weight:800;flex:none}
.toast b{display:block;font-size:12px}
.pcard{background:#fff;border:1px solid var(--rule);border-radius:12px;padding:10px 12px}
.pcard .top{display:flex;justify-content:space-between;align-items:center}
.car{font-weight:800;font-size:12px}
.car.dhl{color:#8F6A08}.car.dpd{color:#C8102E}.car.ups{color:#5A3A1E}.car.sd{color:#1D9696}
.hand .car.dpd{color:#FF7A85}.hand .car.sd{color:#2FB5B5}
.badge{font-size:8.5px;font-weight:750;border-radius:4px;padding:2px 6px}
.b-wait{background:rgba(212,160,23,.16);color:#7A5C08}
.b-ready{background:rgba(58,138,92,.14);color:#2D6B47}
.b-ret{background:rgb(var(--brand-rgb) / .14);color:var(--brand-deep)}
.trk{font-family:ui-monospace,Menlo,monospace;font-size:12px;font-weight:700;margin:6px 0 2px;letter-spacing:.02em}
.chk{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--rule);border-radius:10px;padding:8px 10px;font-size:11.5px;font-weight:650}
.chk i{width:18px;height:18px;border-radius:5px;border:2px solid var(--rule-2);display:grid;place-items:center;font-style:normal;font-size:11px;color:#fff;transition:all .3s}
.chk.ok i{background:var(--ok);border-color:var(--ok)}
.sig{background:#fff;border:1px dashed var(--rule-2);border-radius:12px;height:96px;position:relative;flex:none}
.sig .lb{position:absolute;left:10px;top:6px;font-size:9.5px;color:var(--muted)}
.sig svg{position:absolute;inset:0;width:100%;height:100%}
.sig path,.sigpath{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cta{display:block;text-align:center;border-radius:10px;padding:10px;font-weight:750;font-size:12px;background:var(--ink);color:#fff}
.cta.o{background:var(--brand-fill);color:var(--on-brand)}
.bigok{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px}
.bigok .okd{width:64px;height:64px;font-size:28px}
.bigok b{font-size:17px;letter-spacing:-.02em}
.grp{background:#fff;border:1px solid var(--rule);border-radius:12px;overflow:hidden}
.grp .gh{display:flex;justify-content:space-between;padding:8px 12px;font-size:11.5px;font-weight:750;border-bottom:1px solid var(--rule)}
.grp .li{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;font-size:11px}
.grp .li + .li{border-top:1px solid var(--rule)}
.tabbar{flex:none;display:flex;justify-content:space-around;padding:8px 8px 18px;background:#fff;border-top:1px solid var(--rule);font-size:9px;color:var(--muted)}
.tabbar span{display:flex;flex-direction:column;align-items:center;gap:3px}
.tabbar span::before{content:"";width:16px;height:16px;border-radius:5px;background:var(--rule)}
.tabbar span.on{color:var(--brand-text);font-weight:750}
.tabbar span.on::before{background:var(--brand)}

/* proof */
.proof{border-bottom:1px solid var(--rule);background:var(--light)}
.proof .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) auto;gap:20px 48px;align-items:center;padding-top:34px;padding-bottom:34px}
.proof p{margin:0;color:var(--ink-2);font-size:15px;max-width:44ch}
.proof .row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 34px}
.carriers{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:26px;font-weight:800;letter-spacing:-.02em}
@media (max-width:360px){.carriers{column-gap:18px;font-size:22px}}
.carriers span{color:var(--ink)}
.pstat{font-size:13px;color:var(--muted);line-height:1.3}
.pstat b{display:block;font-size:22px;color:var(--ink);font-weight:800;letter-spacing:-.02em}
.vsep{width:1px;height:40px;background:var(--rule)}
@media (max-width:900px){.proof .wrap{grid-template-columns:minmax(0,1fr)}.vsep{display:none}}

/* chaos → one app (scroll morph) */
.chaos{height:230vh}
.chaos .sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.chaos .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:center;width:100%}
.pains{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:10px}
.pains li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;padding:12px 0;border-top:1px solid var(--rule)}
.pains li i{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:rgba(201,59,59,.08);color:var(--err);font-style:normal;font-weight:800;font-size:14px;transition:background .4s,color .4s}
.pains li.fixed i{background:rgba(58,138,92,.12);color:var(--ok-text)}
.pains b{display:block;font-size:16px}
.pains span{display:block;color:var(--ink-2);font-size:14.5px;line-height:1.5}
.morph{position:relative;height:620px}
.dev{position:absolute;width:190px;border-radius:22px;background:#2a2826;color:#fff;padding:14px;box-shadow:0 20px 40px rgba(28,25,23,.22);will-change:transform,opacity}
.dev .scrn{height:96px;border-radius:12px;background:#3c3936;display:grid;place-items:center;font-size:12px;color:rgba(255,255,255,.7)}
.dev .keys{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.dev .keys i{height:14px;border-radius:4px;background:#4a4744}
.dev b{display:block;margin-top:10px;font-size:13px}
.dev .login{position:absolute;top:-10px;right:-10px;background:var(--err);color:#fff;font-size:11px;font-weight:750;border-radius:999px;padding:4px 9px}
.morph .one{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.6);opacity:0;will-change:transform,opacity}
.morph .lbl-b,.morph .lbl-a{position:absolute;left:0;right:0;bottom:-6px;text-align:center;font-size:14px;font-weight:650;color:var(--muted);transition:opacity .3s}
@media (max-width:900px){.chaos{height:auto}.chaos .sticky{position:static;height:auto;padding:96px 0}.chaos .wrap{grid-template-columns:minmax(0,1fr)}.morph{height:560px;transform:scale(.9);transform-origin:top center}}

/* flow: scrollytelling */
.flow .grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:clamp(32px,6vw,96px);margin-top:56px}
.steps{list-style:none;margin:0;padding:0}
.steps li{min-height:62vh;display:flex;align-items:center}
.steps li:first-child{min-height:44vh;align-items:flex-start}
.steps li:last-child{min-height:56vh}
/* a step not yet reached is set back in muted colour (4.6:1), not faded, so its text stays readable */
.st{display:grid;grid-template-columns:48px 1fr;gap:20px}
.st h3,.st p,.st .who{transition:color .4s,background .4s,box-shadow .4s}
.st:not(.on) h3,.st:not(.on) p{color:var(--muted)}
.st:not(.on) .who{color:var(--muted);background:transparent;box-shadow:inset 0 0 0 1px var(--rule)}
.st .n{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-weight:800;font-size:18px;background:#fff;border:1px solid var(--rule);color:var(--muted);transition:all .4s}
.st.on .n{background:var(--brand-fill);border-color:var(--brand-fill);color:var(--on-brand);box-shadow:0 0 0 8px rgb(var(--brand-rgb) / .12)}
.st h3{font-size:clamp(24px,2.4vw,32px);letter-spacing:-.03em;line-height:1.15;margin:4px 0 8px}
.st .who{display:inline-block;font-size:12px;font-weight:650;color:var(--brand-text);background:rgb(var(--brand-rgb) / .1);border-radius:999px;padding:3px 10px;margin-bottom:10px}
.st p{margin:0;color:var(--ink-2);font-size:17px;max-width:42ch}
.pin{position:sticky;top:calc(50vh - 310px);height:620px;display:flex;justify-content:center}
@media (max-width:900px){.flow .grid{grid-template-columns:minmax(0,1fr)}.pin{position:sticky;top:76px;height:auto;z-index:2;order:-1;transform:scale(.62);transform-origin:top center;margin-bottom:-236px}.steps li,.steps li:first-child,.steps li:last-child{min-height:58vh;align-items:flex-end;padding-bottom:6vh}.st{background:rgba(250,250,248,.94);border-radius:16px;padding:16px;backdrop-filter:blur(8px)}}

/* bento */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:56px}
.cell{position:relative;background:var(--d2);border:1px solid var(--d-b);border-radius:var(--r);padding:26px;overflow:hidden;min-height:300px;display:flex;flex-direction:column}
.cell.wide{grid-column:span 2}
.cell h3{font-size:20px;letter-spacing:-.02em;margin:0 0 6px}
.cell p{margin:0;color:var(--d-t2);font-size:15px;line-height:1.5;max-width:40ch}
.cell .vis{flex:1;position:relative;margin-top:22px;min-height:150px;display:grid;place-items:center}
.cell.lit{border-color:rgb(var(--brand-rgb) / .34);box-shadow:var(--glow)}
@media (max-width:980px){.bento{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.cell.wide{grid-column:span 2}}
@media (max-width:640px){.bento{grid-template-columns:minmax(0,1fr)}.cell.wide{grid-column:auto}}
.carrierchips{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap;justify-content:center}
.carrierchips span{font-size:12px;font-weight:750;padding:6px 12px;border-radius:999px;background:var(--d3);color:var(--d-t2);border:1px solid var(--d-b);transition:all .35s}
.carrierchips span.on{background:var(--brand-fill);color:var(--on-brand);border-color:var(--brand-fill)}
.sigpad{width:100%;max-width:300px;height:130px;border-radius:14px;background:#fff;position:relative}
.sigpad svg{position:absolute;inset:0;width:100%;height:100%}
.sigpad small{position:absolute;left:12px;top:8px;font-size:11px;color:var(--muted)}
.gauge{width:100%;max-width:300px}
.gauge .num{font-size:48px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.gauge .bar{height:12px;border-radius:6px;background:var(--d3);overflow:hidden;margin-top:10px}
.gauge .bar i{display:block;height:100%;width:20%;border-radius:6px;background:var(--ok);transition:width 1.2s cubic-bezier(.2,.8,.2,1),background .5s}
.gauge .lab{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:var(--d-t2)}
.sos{width:96px;height:96px;border-radius:50%;background:var(--err);display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px;position:relative;box-shadow:0 0 0 0 rgba(201,59,59,.5)}
.cell.on .sos{animation:sos 2.2s ease-out infinite}
@keyframes sos{0%{box-shadow:0 0 0 0 rgba(201,59,59,.45)}100%{box-shadow:0 0 0 34px rgba(201,59,59,0)}}
.hand{width:100%;max-width:280px;display:grid;gap:8px}
.hand div{display:flex;justify-content:space-between;align-items:center;background:var(--d3);border:1px solid var(--d-b);border-radius:10px;padding:10px 12px;font-size:13px;transition:transform .5s,opacity .5s}
.hand .done{background:rgba(58,138,92,.16);border-color:rgba(58,138,92,.4);color:#BFE3CC;justify-content:center;font-weight:700}
.demo-ex{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.demo-ex div{background:#fff;color:var(--ink);border-radius:12px;padding:10px 12px;width:170px;font-size:12px;transform:rotate(var(--r,0deg))}
.demo-ex .trn{display:inline-block;margin-bottom:6px}
.words{font-size:clamp(40px,5vw,60px);font-weight:800;letter-spacing:-.04em;height:1.2em;overflow:hidden;position:relative;width:100%;text-align:center}
.words span{position:absolute;left:0;right:0;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .6s}
.words small{display:block}

/* till */
.ways{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:20px;margin-top:56px;align-items:stretch}
@media (max-width:900px){.ways{grid-template-columns:minmax(0,1fr)}}
.way{background:#fff;border:1px solid var(--rule);border-radius:var(--r);padding:30px;display:flex;flex-direction:column;min-width:0;box-shadow:var(--lift)}
.tag{align-self:flex-start;font-size:12px;font-weight:650;border-radius:999px;padding:4px 12px;color:var(--brand-deep);background:rgb(var(--brand-rgb) / .12)}
.tag.ok{color:#2D6B47;background:rgba(58,138,92,.14)}
.dark .tag{color:var(--tag-on-dark);background:rgb(var(--brand-rgb) / .16)}
.dark .tag.ok{color:#8FD0AA;background:rgba(58,138,92,.2)}
.way h3{font-size:26px;letter-spacing:-.03em;margin:14px 0 4px}
.way dl{margin:12px 0 24px}
.way dt{font-size:12.5px;color:var(--muted);margin-top:12px}
.way dd{margin:2px 0 0;font-size:16px}
.way .vis{margin-top:auto;display:flex;justify-content:center}
.mini{width:180px;height:320px;border-radius:32px;background:#0f0f0f;padding:8px;position:relative}
.mini .scr{position:absolute;inset:8px;border-radius:25px;background:var(--alt);overflow:hidden;padding:32px 10px 10px;display:flex;flex-direction:column;gap:7px;font-size:10px}
.mini .acard{padding:10px;border-radius:11px}.mini .acard .h{font-size:12.5px;margin:2px 0 6px}.mini .acard .b{font-size:9.5px;padding:4px}
.till{width:100%;border-radius:14px;background:var(--d2);border:1px solid rgb(var(--brand-rgb) / .34);box-shadow:var(--glow);overflow:hidden;color:var(--d-t);font-size:12px}
.till .tb{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--d-b);font-size:11px;color:var(--d-t2)}
.till .tb b{color:var(--d-t);font-size:12px}
.dots{display:flex;gap:6px}.dots i{width:9px;height:9px;border-radius:50%;background:var(--d-dot)}
.till .cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);min-height:300px}
@media (max-width:560px){.till .cols{grid-template-columns:minmax(0,1fr)}.rcpt{border-right:0!important;border-bottom:1px solid var(--d-b)}}
.rcpt{border-right:1px solid var(--d-b);padding:14px;display:flex;flex-direction:column;gap:2px;background:var(--d1)}
.rcpt .hd{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--d-muted);margin-bottom:8px;font-weight:650}
.rl{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--d-line);font-variant-numeric:tabular-nums}
.rl.new{color:#fff;background:rgb(var(--brand-rgb) / .12);margin:0 -8px;padding:6px 8px;border-radius:6px;border-bottom-color:transparent;opacity:0;transform:translateY(-6px);transition:all .45s}
.rl.new.show{opacity:1;transform:none}
.rl small{color:var(--d-t2);display:block;font-size:10px}
.rtot{margin-top:auto;display:flex;justify-content:space-between;padding-top:10px;font-weight:750;font-size:13px}
.epos{padding:14px;display:flex;flex-direction:column;gap:10px}
.epos .eh{display:flex;align-items:center;gap:8px;font-weight:750;font-size:13px}
.epos .eh img{width:18px;height:18px}
.epos .eh span{margin-left:auto;font-size:10px;font-weight:650;color:var(--tag-on-dark);background:rgb(var(--brand-rgb) / .16);padding:2px 8px;border-radius:999px}
.ts{display:flex;align-items:center;gap:10px;background:var(--d3);border:1px solid var(--d-b);border-radius:10px;padding:9px 11px;color:var(--d-t2);transition:all .3s}
.ts i{width:20px;height:20px;border-radius:50%;border:2px solid var(--d-line-2);display:grid;place-items:center;font-style:normal;font-size:11px;color:#fff;flex:none;transition:all .3s}
.ts.cur{border-color:rgb(var(--brand-rgb) / .6);color:#fff}.ts.cur i{border-color:var(--brand)}
.ts.ok{color:#fff}.ts.ok i{background:var(--ok);border-color:var(--ok)}
.tsig{height:64px;border-radius:10px;background:#fff;position:relative}
.tsig svg{position:absolute;inset:0;width:100%;height:100%}
.tnote{font-size:11px;color:var(--d-t2)}
.tillcap{font-size:13.5px;color:var(--ink-2);text-align:center;margin:14px 0 0}

/* logistics */
.mile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:52px}
@media (max-width:860px){.mile{grid-template-columns:minmax(0,1fr)}}
.mcard{background:var(--d2);border:1px solid var(--d-b);border-radius:var(--r);padding:24px}
.mcard h3{font-size:19px;margin:0 0 4px}
.mcard p{margin:0 0 18px;color:var(--d-t2);font-size:14.5px}
.track{position:relative;height:84px}
.track .ln{position:absolute;left:44px;right:44px;top:30px;height:2px;background:repeating-linear-gradient(90deg,var(--d-line-2) 0 8px,transparent 8px 14px)}
.track .nd{position:absolute;top:8px;width:46px;height:46px;border-radius:14px;background:var(--d3);border:1px solid var(--d-b);display:grid;place-items:center}
.track .nd.s{left:calc(50% - 23px);border-color:rgb(var(--brand-rgb) / .5);background:rgb(var(--brand-rgb) / .14);color:var(--brand-on-dark)}
.track .nd.a{left:0}.track .nd.b{right:0}
.track .nl{position:absolute;top:62px;font-size:12px;color:var(--d-t2);width:110px;text-align:center}
.track .nl.a{left:-32px}.track .nl.s{left:calc(50% - 55px)}.track .nl.b{right:-32px}
.track .pk{position:absolute;top:22px;width:18px;height:16px;border-radius:4px;background:var(--brand);box-shadow:0 0 12px rgb(var(--brand-rgb) / .6)}
.layers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.lay{background:var(--d2);border:1px solid var(--d-b);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:8px}
.lay b{font-size:18px}
.lay span:last-child{color:var(--d-t2);font-size:14.5px;line-height:1.5}
@media (max-width:860px){.layers{grid-template-columns:minmax(0,1fr)}}
.chain{position:relative;margin-top:44px;padding-right:256px}
@media (max-width:1000px){.chain{padding-right:0;display:flex;flex-direction:column;gap:28px;align-items:center}}
.platform{--muted:var(--d-muted);border-radius:16px;background:var(--d2);border:1px solid rgb(var(--brand-rgb) / .34);box-shadow:var(--glow);overflow:hidden;font-size:12px;width:100%}
.ptb{display:flex;align-items:center;gap:14px;padding:10px 14px;border-bottom:1px solid var(--d-b);color:var(--d-t2);font-size:11px}
.ptb b{color:var(--d-t);font-size:12px}.ptb span{margin-left:auto}
.pbody{display:grid;grid-template-columns:150px minmax(0,1fr)}
.pside{border-right:1px solid var(--d-b);padding:14px 10px;display:flex;flex-direction:column;gap:2px;background:var(--d1)}
.pside span{padding:7px 10px;border-radius:8px;color:var(--d-t2)}
.pside span.on{background:rgb(var(--brand-rgb) / .14);color:#fff}
.pmain{padding:14px;display:grid;gap:12px;min-width:0}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.kpi{background:var(--d3);border:1px solid var(--d-b);border-radius:10px;padding:10px 12px}
.kpi span{display:block;color:var(--d-t2);font-size:11px}
.kpi b{display:block;font-size:22px;font-weight:750;margin-top:2px;font-variant-numeric:tabular-nums}
.kpi.warn b{color:var(--warn)}
.pgrid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px}
.pc{background:var(--d3);border:1px solid var(--d-b);border-radius:10px;position:relative;overflow:hidden;min-width:0}
.pc .ph{font-size:10px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--d-muted);padding:10px 12px 6px}
.map{height:250px}
.map svg{position:absolute;left:0;right:0;top:26px;bottom:0;width:100%;height:calc(100% - 26px)}
.net .link{stroke:var(--d-link);stroke-width:1}
.net .route{stroke:var(--brand);stroke-width:1.5;fill:none}
.net .store{fill:var(--d-node);stroke:var(--d-line-2);stroke-width:1}
.net .store.lit{fill:var(--brand);stroke:var(--brand)}
.net .store.w{fill:var(--warn);stroke:var(--warn)}
.net .hub{fill:#fff}
.legend{position:absolute;left:12px;bottom:10px;display:flex;gap:12px;font-size:10px;color:var(--d-t2)}
.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle}
.feed ul{list-style:none;margin:0;padding:0 12px 10px}
.feed li{display:flex;gap:8px;align-items:flex-start;padding:7px 0;border-top:1px solid var(--d-line);font-size:11px;animation:feedin .45s ease-out}
.feed li:first-child{border-top:0}
.feed li i{flex:none;width:8px;height:8px;border-radius:50%;margin-top:4px;background:var(--ok)}
.feed li i.w{background:var(--warn)}.feed li i.o{background:var(--brand)}
.feed li small{margin-left:auto;color:var(--d-muted);font-variant-numeric:tabular-nums}
@keyframes feedin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.routes{padding-bottom:10px}
.rrow{display:grid;grid-template-columns:150px minmax(0,1fr) 40px;gap:12px;align-items:center;padding:5px 12px;font-size:11px}
.rrow .meter{background:var(--d-meter);margin:0}.rrow .meter i{background:var(--brand)}
@media (max-width:760px){.pbody{grid-template-columns:minmax(0,1fr)}.pside{display:none}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.pgrid{grid-template-columns:minmax(0,1fr)}.rrow{grid-template-columns:110px minmax(0,1fr) 36px}}
.consumer{position:absolute;right:0;top:40px;transform:scale(.84);transform-origin:top right;box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 0 1px #2a2a2a inset}
@media (max-width:1000px){.consumer{position:relative;transform:none;top:0}}
.push{position:absolute;z-index:7;left:10px;right:10px;top:46px;background:rgba(255,255,255,.96);border-radius:14px;padding:9px 10px;display:flex;gap:9px;align-items:center;box-shadow:0 8px 24px rgba(0,0,0,.18);transform:translateY(-140%);opacity:0;transition:transform .5s cubic-bezier(.2,.9,.3,1.15),opacity .4s;color:var(--ink)}
.push.show{transform:none;opacity:1}
.push img{width:26px;height:26px}
.push b{display:block;font-size:11.5px}
.push span{font-size:10px;color:var(--ink-2)}
.cons{background:#fff;border:1px solid var(--rule);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:3px}
.cons .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.cons b{font-size:14px}
.qr{width:108px;height:108px;margin:10px auto 6px;display:grid;grid-template-columns:repeat(21,1fr)}
.qr span.k{background:var(--ink)}
.tl{list-style:none;margin:2px 0 0;padding:0 4px;display:flex;flex-direction:column}
.tl li{display:grid;grid-template-columns:16px 1fr auto;gap:8px;align-items:center;padding:5px 0;font-size:11px;color:var(--muted)}
.tl li i{width:10px;height:10px;border-radius:50%;border:2px solid var(--rule-2);background:#fff}
.tl li.done{color:var(--ink)}.tl li.done i{background:var(--ok);border-color:var(--ok)}
.tl li.cur{color:var(--ink);font-weight:750}.tl li.cur i{background:var(--brand);border-color:var(--brand);box-shadow:0 0 0 4px rgb(var(--brand-rgb) / .18)}
.tl small{font-size:9.5px;color:var(--muted);font-weight:400}
.mocknote{margin:64px 0 0;font-size:13px;color:var(--d-muted)}
@media (max-width:1000px){.mocknote{margin-top:24px}}
.lfoot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:center;margin-top:40px;padding-top:32px;border-top:1px solid var(--d-b)}
.lfoot ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 32px}
.lfoot li{display:flex;gap:12px;font-size:15px}
.lfoot li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--brand);margin-top:8px}
@media (max-width:860px){.lfoot{grid-template-columns:minmax(0,1fr)}.lfoot ul{grid-template-columns:minmax(0,1fr)}}

/* built by SMARTS */
.built{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:760px){.built{grid-template-columns:minmax(0,1fr)}}
.stile{width:132px;height:132px;border-radius:30px;background:#fff;display:grid;place-items:center;position:relative;box-shadow:var(--stile-glow)}
.stile::before{content:"";position:absolute;inset:0;border-radius:30px;padding:2px;background:var(--stile-ring);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.stile img{width:78px;height:78px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:44px;background:var(--dark);border-radius:20px;padding:32px 20px}
.stat{text-align:center}
.stat b{display:block;color:var(--brand-on-dark);font-size:clamp(30px,3.4vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1}
.stat span{display:block;color:var(--d-stat);font-size:13.5px;margin-top:10px}
.stat small{display:block;color:var(--d-muted);font-size:11.5px;margin-top:2px}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}}

/* faq */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:start}
@media (max-width:900px){.faq{grid-template-columns:minmax(0,1fr)}}
details{border-top:1px solid var(--rule);padding:4px 0}
details:last-child{border-bottom:1px solid var(--rule)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:18px 0;font-size:18px;font-weight:650;letter-spacing:-.01em}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:rotate(45deg);transition:transform .25s;margin-top:-6px}
details[open] summary::after{transform:rotate(-135deg);margin-top:6px}
details p{margin:0 0 20px;color:var(--ink-2);max-width:62ch}

/* closing + footer */
/* the closing band: flat Forge Orange with ink type (4.9:1) and the pixel grid at half strength, so text stays above 4.5:1 on every cell */
.closing{text-align:center;--hero-bg:var(--brand); --hero-fg:var(--ink); --hero-fg-2:var(--ink); --focus:var(--ink);
  --cta-bg:var(--ink); --cta-fg:var(--light); --cta-shadow:0 8px 22px rgba(28,25,23,.25);
  --ghost-bg:transparent; --ghost-bg-h:rgba(28,25,23,.08); --ghost-line:rgba(28,25,23,.4); --ghost-fg:var(--ink)}
.closing .wrap{position:relative;z-index:2}
.closing h2{font-size:clamp(38px,5.4vw,76px);font-weight:800;letter-spacing:-.045em;line-height:1.02;max-width:16ch;margin:0 auto 18px}
.closing p{color:var(--hero-fg-2);max-width:48ch;margin:0 auto 30px;font-size:19px}
.closing .ctas{justify-content:center}
footer{background:var(--dark);color:var(--d-t2);padding:48px 0;font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:20px 32px;justify-content:space-between;align-items:center}
footer img{height:26px;width:auto}
footer nav{display:flex;flex-wrap:wrap;gap:18px}
footer a{text-decoration:none}
footer a:hover{color:#fff}

/* reveal on scroll (one gentle move, never for product UI) */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}