/* LeapCode OS™ public pages (product home, updates, pricing, Founding Cohort, trust, help).
   Builds on tokens.css + app.css. Figtree headings, Inter body (DR-16). Buttons follow DR-14. 28 Oct 2026. */
.top .wrap{display:flex;align-items:center;gap:16px}
.pnav{margin-left:auto;display:flex;align-items:center;gap:22px}
.pnav a{color:var(--d-text-2);text-decoration:none;font:600 .9375rem var(--font-body)}
.pnav a:hover,.pnav a[aria-current="page"]{color:#fff}
.pnav .btn{padding:10px 18px;font-size:.9375rem;color:#fff}
@media (max-width:860px){.pnav a:not(.btn){display:none}}

.hero .lead{color:var(--d-text-2);font-size:var(--fs-lead);max-width:52ch;margin:16px 0 0}
.hero h1{max-width:20ch}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;align-items:center}
.reassure{font-size:var(--fs-small);color:var(--d-muted);margin-top:14px}
.hero .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.hero .btn.ghost:hover{background:#fff;color:var(--fg-heading)}

.band{padding:64px 0}
.band.tint{background:var(--bg-tint)}
.band.dark{background:var(--g-anchor);color:var(--d-text)}
.band.dark h2,.band.dark h3{color:#fff}
.band.dark p,.band.dark li{color:var(--d-text-2)}
.band h2{font:700 clamp(1.6rem,1.2rem + 1.6vw,2.25rem)/1.2 var(--font-heading);color:var(--fg-heading);margin:0 0 14px;max-width:28ch}
.band .intro{max-width:62ch;color:var(--fg-muted);margin:0 0 28px}
.band.dark .intro{color:var(--d-text-2)}
.ask{font:600 clamp(1.25rem,1rem + 1vw,1.6rem)/1.35 var(--font-heading);color:var(--fg-heading);max-width:34ch;margin:0 0 16px}

.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid .card{margin:0}
.card h3{font:700 1.125rem/1.3 var(--font-heading);color:var(--fg-heading);margin:0 0 8px}
.band.dark .card{background:var(--g-anchor-2);border-color:var(--d-hairline)}
.step{display:flex;gap:16px;align-items:flex-start}
.step .n{flex:0 0 40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--fg-heading);color:#fff;font:700 1rem var(--font-heading)}

.chips{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 0}
.chip{display:inline-block;border-radius:999px;padding:6px 14px;font:600 .9375rem var(--font-body);line-height:1.4}
.chip.g{color:#0B8A6B;background:#E7F7F2}.chip.o{color:#B85A1B;background:#FDF0E4}.chip.r{color:#A12A2A;background:#F9E9E9}

.state{display:inline-block;font:700 .75rem var(--font-heading);letter-spacing:.08em;text-transform:uppercase;border-radius:6px;padding:3px 8px;margin-bottom:10px}
.state.live{background:#E7F7F2;color:#0B7C61}.state.building{background:#FDF0E4;color:#AD5519}.state.planned{background:#EEF2F6;color:#2C3E50}.state.not{background:#F3F3F3;color:#5D6D74}
.ev{font-size:var(--fs-small);color:var(--fg-muted);margin:8px 0 0}
ul.ticks{list-style:none;padding:0;margin:0}
ul.ticks li{position:relative;padding-left:26px;margin:10px 0}
ul.ticks li::before{content:"\2713";position:absolute;left:0;color:#0B8A6B;font-weight:700}
ul.cross li::before{content:"\2715";color:#A12A2A}

.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{cursor:pointer;font:600 1.0625rem var(--font-heading);color:var(--fg-heading)}
.faq details p{margin:10px 0 0;max-width:68ch}

.limits{border-left:4px solid var(--rule);padding:4px 0 4px 18px;max-width:70ch}
.disclaim{font-size:var(--fs-small);color:var(--fg-muted);max-width:76ch;margin:0}
.page-hero{padding:56px 0 64px}
.anchor{scroll-margin-top:24px}
.release{border-left:3px solid var(--line);padding-left:18px;margin:0 0 28px}
.release h3{margin:0 0 6px}
.release .when{font:600 .875rem var(--font-heading);color:var(--fg-muted);letter-spacing:.04em}
.tier .price{font:700 1.375rem var(--font-heading);color:var(--fg-heading);margin:6px 0 12px}
.tier.feature{border-top:4px solid var(--c-coral)}
.signin-home{padding:56px 0}
.signin-home .card{max-width:520px;border-top:4px solid var(--c-coral);margin:0}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* 28 Oct 2026: public pages follow the main site's design language (leapcode.consulting).
   Rules below are copied from the main site's assets/css/pagekit.css (itself copied from its home page): dawn and grain on the hero,
   red numbered circles, the journey list, shining underlines and the Problem / How section grounds. Portal screens are not affected. */
.page-hero::before { /* dawn: maroon-red from the top right edge, so the dark stays dark and a little hope comes in */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 560px at 92% -10%, rgba(178,40,54,.78), rgba(108,22,38,.46) 42%, transparent 72%),
    linear-gradient(180deg, rgba(120,26,40,.5) 0, rgba(80,18,32,.22) 16%, transparent 42%); }

.page-hero::after { /* grain, 2-3% */ content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .028;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.page-hero .wrap{position:relative;z-index:3}
.step .n{background:#C83A3A}
ol.journey { list-style: none; counter-reset: j; padding: 0; margin: 0 0 1em; }
ol.journey li { counter-increment: j; position: relative; padding-left: 2.6em; margin: .7em 0; min-height: 1.9em; }
ol.journey li::before { content: counter(j); position: absolute; left: 0; top: -.05em; width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center; font: 700 .9rem var(--font-heading); background: #C83A3A; color: #fff; }
ol.journey li::after { content: ""; position: absolute; left: .95em; top: 1.9em; bottom: -.9em; width: 2px; background: repeating-linear-gradient(180deg, var(--line-strong) 0 5px, transparent 5px 9px); }
ol.journey li:last-child::after { display: none; }
.ln { padding-bottom: .08em; background:
        linear-gradient(90deg, rgba(200,58,58,0) 0%, rgba(200,58,58,.55) 45%, #C83A3A 88%, #FFC75A 100%) 0 100% / 100% 3px no-repeat; }
.ln{-webkit-box-decoration-break:clone;box-decoration-break:clone}
.p-problem { --pc: #C83A3A; background-color: #FCF1EA; background-image: radial-gradient(circle at 20px 20px, rgba(200,58,58,.11) 1.5px, transparent 1.7px); background-size: 40px 40px; }
.p-how { --pc: #488ECE; background-color: #ECF2FA; background-image: repeating-linear-gradient(115deg, rgba(72,142,206,.08) 0 2px, transparent 2px 24px); }