/* Cupstack public marketing site. Tokens mirror Foundations (Figma 01 — Foundations, docs/design/figma-v2-tokens.json):
   Inter, sky bg, ink, primary blue, orange accent, 1px borders first, radius 6/8/12, no elevation. */
:root{--bg:#EAF6FE;--ink:#0A1C40;--primary:#2471E7;--primary-hover:#1A5CC8;--primary-active:#1450AA;--accent:#E6701E;--surface:#fff;--border:#E2ECF7;--border-hover:#C8DCF0;--divider:#F0F4F8;--soft:#F4F8FC;--muted:#597290;--body:#4A6180;--side-text:rgba(255,255,255,.72);--side-line:rgba(255,255,255,.1);--r-sm:6px;--r-md:8px;--r-lg:12px;--font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;--nav-h:64px}
*{box-sizing:border-box}html,body{margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);-webkit-text-size-adjust:100%}body{font-family:var(--font);background:var(--surface);color:var(--ink);line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}img{display:block;max-width:100%;height:auto}h1,h2,h3,p,ol,ul,figure{margin:0;padding:0}a{color:inherit}:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:var(--r-sm)}.wrap{width:min(1180px,calc(100% - 64px));margin-inline:auto}.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r-sm);text-decoration:none;font-weight:600}.skip:focus{top:12px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* Navigation */
.nav{height:var(--nav-h);position:sticky;z-index:20;top:0;background:rgba(234,246,254,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}.nav-inner{height:100%;display:flex;align-items:center;gap:28px}.brand{flex:none}.brand img{width:auto;height:30px}.nav-links{display:flex;align-items:center;gap:26px;margin-left:auto}.nav-links a,.nav-portal{font-size:14px;font-weight:500;text-decoration:none;color:var(--body)}.nav-links a:hover,.nav-portal:hover{color:var(--ink)}.nav-actions{display:flex;align-items:center;gap:18px}.nav-menu{display:none;margin-left:auto}.nav-menu summary{list-style:none;width:44px;height:44px;display:grid;align-content:center;justify-content:center;gap:6px;cursor:pointer;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface)}.nav-menu summary::-webkit-details-marker{display:none}.nav-menu summary span{width:17px;height:2px;background:var(--ink);display:block;border-radius:2px}.nav-menu nav{position:absolute;right:20px;top:60px;width:min(290px,calc(100vw - 40px));background:var(--surface);border:1px solid var(--border);padding:8px;border-radius:var(--r-lg)}.nav-menu nav>*{display:block;width:100%;padding:12px;text-align:left;border:0;background:transparent;text-decoration:none;font:500 15px var(--font);color:var(--ink);cursor:pointer}.nav-menu nav>*:hover{background:var(--bg);border-radius:var(--r-sm)}

/* Shared type and controls */
.label{font:700 11px/1.2 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.label--dot{display:flex;align-items:center;gap:10px}.label--dot>span{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}.label--light{color:#B9D3F5}h1,h2,h3{font-family:var(--font);font-weight:600;color:var(--ink)}h1,h2{letter-spacing:-.03em}.body-lg{font-size:18px;line-height:1.6;color:var(--body)}
.btn{border:1px solid transparent;display:inline-flex;gap:8px;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;font:600 15px/1 var(--font);padding:0 20px;height:44px;border-radius:var(--r-sm);transition:background-color .15s,border-color .15s}.btn-primary{color:#fff;background:var(--primary)}.btn-primary:hover{background:var(--primary-hover)}.btn-primary:active{background:var(--primary-active)}.btn-secondary{background:var(--surface);border-color:var(--border);color:var(--ink)}.btn-secondary:hover{background:#F5F9FE;border-color:var(--border-hover)}.btn-light{background:#fff;color:var(--ink)}.btn-light:hover{background:var(--bg)}.btn-ghost-light{color:#fff;border-color:rgba(255,255,255,.4)}.btn-ghost-light:hover{background:rgba(255,255,255,.1)}.btn-sm{height:36px;padding:0 14px;font-size:14px}.btn-lg{height:48px;padding:0 24px;font-size:16px}
.text-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--primary);text-decoration:none;margin-top:32px}.text-link:hover{color:var(--primary-hover);text-decoration:underline;text-underline-offset:4px}.ico{width:16px;height:16px;flex:none;stroke:currentColor}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}.reveal.is-visible{opacity:1;transform:none}.reveal-delay{transition-delay:.1s}.reveal-delay-2{transition-delay:.2s}

/* Product captures: real app screens in a bordered frame, no shadow */
.shot-frame{background:var(--surface);border:1px solid var(--border-hover);border-radius:var(--r-lg);overflow:hidden}.shot img{width:100%;height:auto}.shot figcaption{font-size:13px;line-height:1.5;color:var(--muted);margin-top:12px}.shot figcaption strong{color:var(--ink);font-weight:600}

/* Hero */
.hero{background:var(--bg);padding:clamp(56px,8vw,104px) 0 clamp(48px,6vw,80px);border-bottom:1px solid var(--border)}.hero-top{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(32px,6vw,88px);align-items:end}.hero h1{font-size:clamp(42px,5.5vw,76px);line-height:1.02;margin-top:22px}.hero h1 em{font-style:normal;color:var(--primary)}.lead{font-size:18px;line-height:1.6;color:var(--body)}.cta-row{display:flex;align-items:center;gap:12px;margin-top:28px;flex-wrap:wrap}.hero .shot{margin-top:clamp(40px,5vw,64px)}

/* Narrative */
.tension{background:var(--surface);padding:clamp(72px,9vw,128px) 0}.tension-head{max-width:760px}.tension-head h2,.modules-head h2,.platform-head h2{font-size:clamp(32px,4vw,52px);line-height:1.06;margin-top:18px}.tension-head .body-lg,.modules-head .body-lg,.platform-head .body-lg{margin-top:20px;max-width:620px}.friction-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(48px,6vw,80px)}.friction{border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;background:var(--surface)}.badge{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:var(--r-sm);background:var(--bg);color:var(--primary);font:700 13px var(--font)}.friction h3{font-size:20px;line-height:1.25;letter-spacing:-.02em;margin-top:20px}.friction p{font-size:15px;line-height:1.55;color:var(--body);margin-top:10px}

/* Platform (ink, like the app sidebar) */
.platform{background:var(--ink);color:#fff;padding:clamp(72px,9vw,128px) 0}.platform h2,.platform h3{color:#fff}.platform .body-lg{color:var(--side-text)}.moment{display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);gap:clamp(32px,5vw,72px);align-items:center;margin-top:clamp(56px,7vw,96px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--side-line)}.moment--flip{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}.moment--flip .moment-copy{order:2}.moment--note{grid-template-columns:1fr}.moment--note{gap:24px}.moment-tag{display:flex;align-items:center;gap:10px;font:700 11px var(--font);letter-spacing:.14em;text-transform:uppercase;color:#B9D3F5}.moment-tag span{display:inline-grid;place-items:center;height:22px;min-width:26px;padding:0 6px;border-radius:var(--r-sm);background:var(--accent);color:#fff;letter-spacing:.04em}.moment h3{font-size:clamp(26px,2.8vw,36px);line-height:1.1;letter-spacing:-.025em;margin-top:18px}.moment-copy>p:not(.moment-tag){font-size:16px;line-height:1.6;color:var(--side-text);margin-top:14px;max-width:420px}.chips{display:flex;gap:8px;list-style:none;flex-wrap:wrap;margin-top:22px}.chips li{font:600 12px var(--font);padding:5px 10px;border-radius:var(--r-sm);background:rgba(255,255,255,.08);border:1px solid var(--side-line);color:#fff}.moment .shot-frame{border-color:rgba(255,255,255,.18)}.moment .shot figcaption{color:var(--side-text)}.moment .shot figcaption strong{color:#fff}.moment-link{display:inline-flex;align-items:center;gap:10px;justify-self:start;font-weight:600;font-size:15px;color:#fff;text-decoration:none;padding:14px 18px;border:1px solid var(--side-line);border-radius:var(--r-md);background:rgba(255,255,255,.06)}.moment-link:hover{background:rgba(255,255,255,.12)}

/* Modules: Hub-style cards */
.modules{background:var(--bg);padding:clamp(72px,9vw,128px) 0;border-bottom:1px solid var(--border)}.modules-head{max-width:700px}.mod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(40px,5vw,64px)}.mod-group{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px}.mod-group .label{font-size:10px;margin-bottom:6px}.mod-group ul{list-style:none}.mod-group li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--divider);font-size:15px;font-weight:500}.mod-group li:first-child{border-top:0}.mod-group li .ico{width:32px;height:32px;padding:8px;border-radius:var(--r-md);background:var(--bg);color:var(--primary)}

/* CTA + footer */
.final{background:var(--primary);color:#fff;padding:clamp(72px,9vw,120px) 0}.final-inner{max-width:780px}.final h2{font-size:clamp(34px,4.6vw,60px);line-height:1.04;color:#fff;margin-top:18px}.final .body-lg{color:rgba(255,255,255,.9);margin-top:22px;max-width:620px}.final .cta-row{margin-top:32px}
footer.site{background:var(--ink);color:#fff;padding:64px 0 32px}.footer-top{display:flex;justify-content:space-between;gap:48px}.footer-brand{max-width:300px}.logo-plate{display:inline-flex;padding:8px 12px;background:#fff;border-radius:var(--r-sm)}.logo-plate img{height:26px;width:auto}.footer-brand p{color:var(--side-text);font-size:14px;line-height:1.55;margin-top:16px}.footer-links{display:flex;gap:clamp(32px,6vw,80px)}.footer-links .col{display:flex;flex-direction:column;align-items:flex-start;gap:10px}.footer-links h2{font:700 10px var(--font);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);margin:0 0 4px}.footer-links a,.linklike{border:0;background:none;padding:0;color:#fff;text-decoration:none;font:500 14px var(--font);text-align:left;cursor:pointer}.footer-links a:hover,.linklike:hover{text-decoration:underline;text-underline-offset:3px}.footer-bottom{border-top:1px solid var(--side-line);margin-top:48px;padding-top:24px}.footer-bottom p{color:var(--side-text);font-size:13px}

/* Legal page survives as a lightweight public document. */
.page-legal{min-height:100dvh;display:flex;flex-direction:column}.page-legal .legal{flex:1}.legal{padding:72px 0 96px}.legal-body{max-width:720px;margin:auto}.legal h1{font-size:44px;line-height:1.08;margin:0 0 24px}.legal p{font-size:17px;line-height:1.65;color:var(--body);margin:0 0 18px}.legal a{color:var(--primary);font-weight:600;text-underline-offset:3px}.legal~footer.site .footer-bottom{border:0;margin-top:0;padding-top:0}

/* Demo form contract */
.demo{border:0;padding:0;background:transparent;width:min(560px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 32px);color:var(--ink)}.demo::backdrop{background:rgba(10,28,64,.6)}.demo-card{background:var(--surface);border:1px solid var(--border-hover);border-radius:var(--r-lg);padding:28px;max-height:calc(100dvh - 32px);overflow:auto}.demo-head{display:flex;justify-content:space-between;gap:16px}.dialog-kicker{font:700 11px/1.2 var(--font);letter-spacing:.14em;text-transform:uppercase;color:#C2570F;margin-bottom:10px}.demo-head h2{font:600 26px/1.15 var(--font);letter-spacing:-.025em}.demo-lead{font-size:15px;line-height:1.55;color:var(--body);margin-top:8px;max-width:420px}.demo-close{flex:none;width:40px;height:40px;margin:-6px -6px 0 0;border:1px solid transparent;border-radius:var(--r-md);background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer}.demo-close:hover{background:var(--bg);border-color:var(--border-hover);color:var(--ink)}.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px;margin-top:24px}.field--full{grid-column:1/-1}.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}.field .opt{font-weight:400;color:var(--muted)}.field input{width:100%;font:inherit;font-size:15px;line-height:22px;color:var(--ink);background:#fff;border:1px solid var(--border-hover);border-radius:var(--r-sm);padding:9px 12px;min-height:44px}.field input:hover{border-color:var(--primary)}.field input:focus-visible{outline:0;border-color:var(--primary);box-shadow:0 0 0 2px var(--primary)}.field input[aria-invalid="true"]{border-color:#B52626;background:#FDEAEA}.err{font-size:13px;line-height:18px;color:#B52626;margin-top:6px}.demo-errors{margin-top:20px;background:#FDEAEA;border:1px solid rgba(181,38,38,.18);border-radius:var(--r-md);color:#8F1D1D;padding:12px 14px;font-size:14px;line-height:20px}.demo-status{margin-top:20px;background:var(--bg);border-radius:var(--r-md);padding:12px 14px;font-size:14px;line-height:20px}.demo-status[data-kind="ok"]{background:#E6F7EF;color:#14573A}.demo-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}[hidden]{display:none!important}

@media(max-width:900px){:root{--nav-h:60px}.wrap{width:min(680px,calc(100% - 40px))}.nav-links{display:none}.nav-actions .btn{display:none}.nav-actions{margin-left:auto}.nav-menu{display:block;margin-left:0}.hero-top{grid-template-columns:1fr;gap:28px;align-items:start}.friction-grid{grid-template-columns:1fr}.moment,.moment--flip{grid-template-columns:1fr;gap:28px}.moment--flip .moment-copy{order:0}.moment-copy>p:not(.moment-tag){max-width:520px}.mod-grid{grid-template-columns:1fr 1fr}.footer-top{flex-direction:column}.footer-links{width:100%;justify-content:space-between}.reveal-delay,.reveal-delay-2{transition-delay:0s}}
@media(max-width:560px){.wrap{width:calc(100% - 32px)}.brand img{height:26px}.nav-portal{font-size:13px}.hero{padding-top:44px}.hero h1{font-size:40px;line-height:1.04}.lead{font-size:17px}.cta-row{flex-direction:column;align-items:stretch}.cta-row .btn{width:100%}.mod-grid{grid-template-columns:1fr}.final .cta-row{margin-top:28px}.footer-links{display:grid;grid-template-columns:1fr 1fr;gap:32px}.footer-links .col:last-child{grid-column:1/-1}.demo{width:100%;margin:auto 0 0;max-height:100dvh}.demo-card{max-height:92dvh;padding:24px 20px;border-radius:var(--r-lg) var(--r-lg) 0 0;border-width:1px 0 0}.fields{grid-template-columns:1fr}.demo-actions{flex-direction:column-reverse}.demo-actions .btn{width:100%}.legal{padding:56px 0 72px}.legal h1{font-size:36px}.legal p{font-size:16px}}
