@font-face{font-family:"Geist Variable";font-style:normal;font-display:swap;font-weight:100 900;src:url("./assets/geist-latin.woff2") format("woff2")} :root{ --kp-bg-base:#06080D; --kp-bg-card:#0B0E16; --kp-bg-elevated:#131820; --kp-border-default:#1E2535; --kp-border-strong:#2A3245; --kp-brand-blue:#003B8F; --kp-brand-blue-bright:#1D7FE8; --kp-gold:#C9961A; --kp-gold-dim:#8A6812; --kp-text-primary:#F4F5F7; --kp-text-secondary:#9AA3B5; --kp-text-muted:#5B6478; --font-display:"Geist Variable",-apple-system,BlinkMacSystemFont,system-ui,sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--kp-bg-base);color:var(--kp-text-primary);font-family:var(--font-display);line-height:1.5;-webkit-font-smoothing:antialiased;text-wrap:pretty} a{color:var(--kp-brand-blue-bright);text-decoration:none} a:hover{color:#4FA0F0} img{max-width:100%} .wrap{max-width:1180px;margin:0 auto;padding:0 32px} .wrap-narrow{max-width:860px;margin:0 auto;padding:0 32px} /* ---------- NAV ---------- */ /* No border; the bar is solid-dark at the top and fades to fully transparent by its bottom edge (a vertical gradient WITHIN the bar, so page content shows through the lower portion). blur is retained for nav-text legibility while the bar sits over content (hide-on-scroll reveals it over content on scroll-up and near the top — legibility is not a non-issue). */ /* SEAM FIX (KP Build 89): the blurred, gradient-tinted bar is a ::before layer BEHIND the links (z-index:-1), NOT the nav box itself. Previously the mask lived on nav, so it masked the LINKS too — forcing the fade to a tiny ~16px sliver at the very bottom to avoid fading the text. That left backdrop-filter:blur at FULL strength across the whole bar (its opacity only tapering in that 16px) while the background COLOUR faded smoothly over the full height: mismatched falloffs → a band of full blur with almost no tint, ending in an abrupt edge the eye read as a seam at scroll depth. With the backdrop on ::before the links are never masked, so the mask can taper over the FULL height and MIRROR the background gradient's alpha (.97 → .82@55% → 0) — blur opacity now tracks the tint exactly, so colour and blur dissolve to zero TOGETHER at the bottom edge as one unit. No seam at any scroll depth; the links stay fully crisp. Same masking idea as kp-ascent.svg. */ nav{position:sticky;top:0;z-index:50;transition:transform .3s ease;will-change:transform} /* Mask holds FULL opacity (blur+tint at strength behind the centered links) until 55% — exactly where the background gradient's tint begins its .82→0 descent — then dissolves to zero by the bottom edge. Blur and tint therefore start fading together at 55% and both reach zero at 100%: one unified dissolve, no seam. (Desktop single-row nav: links sit at ~28–48px / <63%, inside the full-opacity zone, so they keep full frosting; the taper lives in the empty gap below them.) */ nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgba(6,8,13,.97) 0%,rgba(6,8,13,.82) 55%,rgba(6,8,13,0) 100%);backdrop-filter:blur(10px);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 100%)} /* Hide-on-scroll-down / reveal-on-scroll-up (matches the live Squarespace behavior). */ nav.nav-hidden{transform:translateY(-100%)} /* One compact, evenly-spaced row centered as a single unit: the .nav-group divs collapse via display:contents (desktop) so all 7 items — Home · How it works · Pricing · [figure] · Our story · Contact · Join waitlist — become direct flex children with ONE consistent gap between every adjacent item. The figure is the visual middle by ORDER (4th of 7), not pinned to viewport center. (Replaced the old 1fr/auto/1fr grid, which edge-pinned the groups and left large dead gaps.) */ /* Logo pinned far left, links immediately after it, CTA pinned to the far right via margin-left:auto on .nav-cta-desktop. Hamburger (.nav-toggle) and the drawer-only CTA (.nav-cta-mobile) are hidden above the mobile breakpoint. */ nav .wrap{display:flex;align-items:center;gap:36px;height:76px} .wordmark{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.02em;font-size:16px;color:var(--kp-text-primary);text-decoration:none;flex:none} .wordmark:hover{color:var(--kp-text-primary)} .mark-img{height:30px;width:auto;display:block} .nav-links{display:flex;align-items:center;gap:28px} .nav-links a:not(.nav-cta){font-size:14px;font-weight:500;color:var(--kp-text-secondary);text-decoration:none;transition:color .3s ease} .nav-links a:not(.nav-cta):hover{color:var(--kp-text-primary)} .nav-links a[aria-current="page"]:not(.nav-cta){color:var(--kp-text-primary)} .nav-cta{padding:10px 22px;border-radius:8px;background:transparent;border:1px solid var(--kp-border-default);color:var(--kp-text-primary);font-weight:600;font-size:14px;text-decoration:none;transition:border-color .35s ease,background .35s ease,transform .35s cubic-bezier(.16,1,.3,1);flex:none} .nav-cta:hover{border-color:var(--kp-brand-blue-bright);background:rgba(29,127,232,.08);color:var(--kp-text-primary);transform:translateY(-1px)} .nav-cta-desktop{margin-left:auto} .nav-cta-mobile{display:none} /* Hamburger: three bars, hidden until the mobile breakpoint. */ .nav-toggle{display:none;flex:none;width:34px;height:34px;padding:0;border:none;background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px} .nav-toggle-bar{display:block;width:20px;height:2px;border-radius:1px;background:var(--kp-text-primary);transition:transform .25s ease,opacity .2s ease} body.nav-open .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)} body.nav-open .nav-toggle-bar:nth-child(2){opacity:0} body.nav-open .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ---------- BUTTONS ---------- */ .btn-primary{display:inline-flex;align-items:center;gap:8px;padding:16px 30px;border-radius:10px;border:none;background:var(--kp-brand-blue-bright);color:#fff;font-weight:700;font-size:15px;font-family:inherit;text-decoration:none;cursor:pointer;transition:transform .35s cubic-bezier(.16,1,.3,1),background .35s ease,box-shadow .35s ease} .btn-primary:hover{background:#2F8FF5;transform:translateY(-2px);box-shadow:0 10px 30px -12px rgba(29,127,232,.55);color:#fff} .btn-ghost{display:inline-flex;align-items:center;gap:8px;padding:15px 26px;border-radius:10px;background:transparent;border:1px solid var(--kp-border-default);color:var(--kp-text-primary);font-weight:600;font-size:15px;text-decoration:none;transition:border-color .35s ease,transform .35s cubic-bezier(.16,1,.3,1)} .btn-ghost:hover{border-color:var(--kp-border-strong);color:var(--kp-text-primary);transform:translateY(-2px)} /* ---------- SHARED TYPE ---------- */ .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--kp-brand-blue-bright);padding:6px 14px;border:1px solid rgba(29,127,232,.35);border-radius:100px;background:rgba(29,127,232,.08)} .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--kp-brand-blue-bright)} .eyebrow-static{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--kp-text-muted);margin-bottom:12px;display:block} .lede{font-size:19px;color:var(--kp-text-secondary);line-height:1.6;max-width:620px} /* ---------- PAGE HEAD (inner pages) ---------- */ /* (B) full-width dark-blue lift at the very top so the content background reads blue "running up under the head" instead of flat near-black (#06080D), fading back into the base within ~240px. (A) the corner glow is strengthened toward the home hero's depth (.22 -> .28, pulled on-screen, enlarged), since interior page-heads have no hero-watermark to carry that richness. */ .page-head{padding:96px 0 72px;border-bottom:1px solid var(--kp-border-default);position:relative;overflow:hidden;background:linear-gradient(to bottom,rgba(0,59,143,.16),transparent 240px)} .page-head::before{content:'';position:absolute;top:-200px;right:-180px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(0,59,143,.28),transparent 70%);pointer-events:none} .page-head .wrap,.page-head .wrap-narrow{position:relative;z-index:1} .page-head h1{font-size:clamp(34px,4.4vw,54px);font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:20px 0 20px;max-width:860px} .page-head h1 .soft{color:var(--kp-text-secondary);font-weight:600} /* ---------- REVEAL ---------- */ @keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}} .reveal{opacity:0;animation:riseIn .9s cubic-bezier(.16,1,.3,1) forwards} .d1{animation-delay:.14s}.d2{animation-delay:.28s}.d3{animation-delay:.42s} .on-scroll{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)} .on-scroll.seen{opacity:1;transform:none} .pillar-grid .on-scroll:nth-child(2),.plan-grid .on-scroll:nth-child(2){transition-delay:.12s} .pillar-grid .on-scroll:nth-child(3),.plan-grid .on-scroll:nth-child(3){transition-delay:.24s} @media (prefers-reduced-motion:reduce){.reveal,.on-scroll{animation:none;opacity:1;transform:none;transition:none} /* Still hide/reveal the header on scroll, but toggle instantly (no slide). */ nav{transition:none}} /* ---------- FOOTER ---------- */ footer{border-top:1px solid var(--kp-border-default);padding:56px 0 40px;margin-top:0} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:36px;border-bottom:1px solid var(--kp-border-default)} .footer-brand{display:flex;align-items:center;gap:10px} .footer-mark{height:22px;width:auto;opacity:.7} .footer-tag{font-size:13px;color:var(--kp-gold);font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-top:18px;display:block} .footer-blurb{font-size:13.5px;color:var(--kp-text-muted);line-height:1.65;max-width:300px;margin-top:10px} .footer-col h4{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--kp-text-muted);margin-bottom:16px} .footer-col ul{list-style:none;display:flex;flex-direction:column;gap:11px} .footer-col a{color:var(--kp-text-secondary);font-size:14px;text-decoration:none} .footer-col a:hover{color:var(--kp-text-primary)} .footer-base{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding-top:24px;font-size:12.5px;color:var(--kp-text-muted)} @media (max-width:860px){ /* Hamburger pattern: the bar stays a single compact row (logo, CTA, hamburger) — no more wrapping into extra rows — so the base 55%-proportional mask on nav::before still applies correctly and doesn't need the bottom-edge override the old reflow needed. */ nav .wrap{gap:16px} .nav-toggle{display:flex} .nav-cta-desktop{display:none} .nav-cta-mobile{display:inline-flex;justify-content:center} /* Off-canvas drawer: fixed panel below the nav bar, slides/fades in. Closed by default; JS toggles body.nav-open. prefers-reduced-motion below drops the transition, matching the .reveal pattern. */ .nav-links{ position:fixed;left:0;right:0;top:76px;height:calc(100vh - 76px); /* height (not bottom:0) because `nav` has will-change:transform for the hide-on-scroll effect, which makes nav a new containing block for this fixed child — bottom:0 would resolve against nav's own ~76px box (collapsing the drawer) instead of the viewport. 100vh is a viewport unit, so it isn't subject to that containing-block redirection. */ display:flex;flex-direction:column;align-items:stretch;gap:2px; padding:20px 24px 32px;overflow-y:auto; background:rgba(6,8,13,.98);backdrop-filter:blur(16px); transform:translateY(-12px);opacity:0;pointer-events:none; transition:opacity .25s ease,transform .25s ease; } body.nav-open .nav-links{transform:translateY(0);opacity:1;pointer-events:auto} .nav-links a:not(.nav-cta){font-size:17px;padding:14px 4px;border-bottom:1px solid var(--kp-border-default)} .nav-cta-mobile{margin-top:16px} .footer-grid{grid-template-columns:1fr;gap:32px} .page-head{padding:64px 0 52px} } @media (max-width:860px) and (prefers-reduced-motion:reduce){ .nav-links{transition:none} } /* ---------- MARK DIVIDER — recurring full-colour mark beat ---------- */ .mark-divider{display:flex;align-items:center;gap:32px;max-width:1180px;margin:0 auto;padding:8px 32px} .md-rule{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--kp-border-default) 45%,var(--kp-border-strong))} .md-rule:last-child{background:linear-gradient(270deg,transparent,var(--kp-border-default) 45%,var(--kp-border-strong))} .md-mark{height:72px;width:auto;flex:none;filter:drop-shadow(0 0 26px rgba(29,127,232,.28));animation:markBreathe 12s ease-in-out 1s infinite} @keyframes markBreathe{0%,100%{filter:drop-shadow(0 0 22px rgba(29,127,232,.20))}50%{filter:drop-shadow(0 0 40px rgba(29,127,232,.42))}} /* ---------- ARC ECHO — interior page heads ---------- */ /* top is positive (was -26px) so the full decorative ring sits BELOW the sticky nav within the page-head padding zone — the old top-bleed got clipped by .page-head overflow:hidden right at the nav line, reading as "clipped by the nav". right/size/z-index/opacity unchanged. */ .page-arc{position:absolute;top:20px;right:32px;width:200px;height:200px;pointer-events:none;z-index:0} .page-arc.on-scroll{opacity:0} .page-arc.on-scroll.seen{opacity:.32} .page-arc-path{stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 2.6s cubic-bezier(.16,1,.3,1) .2s} .page-arc.seen .page-arc-path{stroke-dashoffset:0} /* ---------- EARNED OVERLAY — the same fill on all three arcs ---------- */ .page-arc-earn,.arc-earn{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.1s cubic-bezier(.16,1,.3,1) .3s} .page-arc-earn{opacity:.9} .gp-settled .page-arc-earn,.gp-settled .arc-earn{stroke:#8A7128;opacity:.55;transition:stroke 2.2s ease,opacity 2.2s ease} /* ---------- GAME PLAN RING — orientation progress ---------- */ .gp{position:fixed;bottom:26px;right:26px;top:20px;z-index:45;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;gap:10px;font-family:var(--font-display);pointer-events:none;transition:opacity .3s ease,transform .3s ease} .gp>*{pointer-events:auto} .gp[hidden]{display:none} /* Yields to the page's own last CTA/footer instead of sitting on top of it (was clipping "Built in Los Angeles" on every page, and covering the waitlist submit button + hero "See how it works" button on narrow viewports). Toggled by an IntersectionObserver on