styles.css

/* Geist / Geist Mono, self-hosted. Same variable woff2 files and unicode-ranges
   Google Fonts serves, so rendering is unchanged — but they come off our own
   origin, which drops two cross-origin handshakes (fonts.googleapis.com for the
   stylesheet, fonts.gstatic.com for the files) from the critical path. The
   latin-ext faces only download if a glyph in that range is actually used.
   Licensed under the SIL Open Font License 1.1 — see /assets/fonts/OFL.txt. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/geist-latin.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: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/geist-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/geist-mono-latin.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: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/geist-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#001432;color:#F5F5FA;font-family:'Geist',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:#47C78A;text-decoration:none}
a:hover{opacity:.82}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
@keyframes flowUp{to{background-position:0 -22px}}
@keyframes spin{to{transform:rotate(360deg)}}
/* keeps the inline translateX(-50%) centring — a running animation replaces transform wholesale */
@keyframes vPulse{0%,100%{background:rgba(255,255,255,.14);height:14px}50%{background:#47C78A;height:22px}}
@keyframes blockIn{0%{opacity:0;transform:translateX(14px) scale(.9)}18%,100%{opacity:1;transform:translateX(0) scale(1)}}
@keyframes chainGlow{0%,100%{box-shadow:0 0 0 0 rgba(71,199,138,0)}50%{box-shadow:0 0 22px 2px rgba(71,199,138,.35)}}
@keyframes receiptUp{0%{transform:translateY(0);opacity:0}12%{opacity:1}82%{opacity:1}100%{transform:translateY(calc(-100% - 46px));opacity:0}}
@keyframes finalDown{0%{transform:translateY(-46px);opacity:0}20%{opacity:.9}100%{transform:translateY(0);opacity:0}}
@keyframes receiptDown{0%{transform:translateY(0);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateY(64px);opacity:0}}
@keyframes marqueeLTR{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
@keyframes nudge{0%,100%{transform:translateX(-50%) translateY(0);opacity:.82}50%{transform:translateX(-50%) translateY(6px);opacity:1}}

/* ── Responsive ───────────────────────────────────────────────────────────
   Two things make this harder than a normal breakpoint sheet:

   1. Layout lives in inline style attributes, so nearly everything here needs
      !important to win the cascade.
   2. The page JS writes to element.style at runtime (theme tokens, reveal
      transforms). The moment it touches an element, the browser re-serialises
      that element's whole style attribute — "display:grid" comes back as
      "display: grid" — which silently stops [style*="display:grid"] from
      matching. ~29 of the 80 inline grids on the home page are in that state
      after boot, which is why rows kept their desktop columns on phones.
      Every attribute-substring selector below therefore matches BOTH forms.
   ─────────────────────────────────────────────────────────────────────── */

img,video,canvas,svg{max-width:100% !important;height:auto}

/* Ensure code blocks, tables, and wide charts scroll horizontally within container */
pre,code,table,.table-container,[data-code-block]{max-width:100% !important;overflow-x:auto !important;-webkit-overflow-scrolling:touch}

/* Lock body scrolling when mobile menu drawer is active */
body.mobile-menu-open{overflow:hidden !important}

/* Anchor navigation scroll offset to clear fixed header */
section,[data-page],[data-anchor],[id]{scroll-margin-top:90px !important}

/* Fluid typography scale using clamp() */
h1{font-size:clamp(2rem,4.5vw + 1rem,4.5rem) !important;letter-spacing:-.03em !important}
h2{font-size:clamp(1.5rem,3vw + 0.5rem,2.75rem) !important;letter-spacing:-.02em !important}
h3{font-size:clamp(1.2rem,2vw + 0.3rem,2rem) !important}
#hero-h1{font-size:clamp(2.25rem,5.5vw + 0.5rem,5rem) !important;letter-spacing:-.03em !important}

/* Mobile Nav Drawer & Items Animations */
@keyframes drawerSlideDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
.nav-mobile-drawer.is-open{animation:drawerSlideDown .28s cubic-bezier(.16,1,.3,1) forwards}

.mobile-nav-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-radius:12px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  text-decoration:none;transition:all .2s cubic-bezier(.16,1,.3,1);
  min-height:52px;
}
.mobile-nav-item:hover,.mobile-nav-item:active{
  background:rgba(71,199,138,.08) !important;
  border-color:rgba(71,199,138,.35) !important;
  transform:translateX(4px);
}
.mobile-nav-item:hover .mobile-nav-arrow,.mobile-nav-item:active .mobile-nav-arrow{
  opacity:1 !important;transform:translateX(3px);color:#47C78A !important;
}
.mobile-nav-arrow{transition:transform .2s,opacity .2s,color .2s}

/* ── Breakpoint 1: Ultra-Wide Desktops (>= 1920px) ───────────────────────── */
@media (min-width:1920px){
  section,[data-page]>section{max-width:1440px !important;margin-left:auto !important;margin-right:auto !important}
}

/* ── Breakpoint 2: Large Desktops (1440px - 1919px) ──────────────────────── */
@media (min-width:1440px) and (max-width:1919px){
  section,[data-page]>section{max-width:1280px !important;margin-left:auto !important;margin-right:auto !important}
}

/* ── Breakpoint 3: Standard Desktops (1024px - 1439px) ───────────────────── */
@media (min-width:1024px) and (max-width:1439px){
  nav{padding:16px 36px !important}
  section,[data-page]>section{max-width:1080px !important;padding-left:36px !important;padding-right:36px !important}
  footer{padding:34px 36px !important}
}

/* Hide side rail navigation on screens under 1024px to prevent content overlap */
@media (max-width:1023px){
  [data-rail]{display:none !important}
}

@media (max-width:980px){
  nav{padding:14px 24px !important}
  section{padding-left:24px !important;padding-right:24px !important}
  footer{padding:34px 24px !important}
}

/* ── Breakpoint 4: Tablet & Below (< 768px) Mobile Navigation Collapse ──── */
@media (max-width:767px){
  .nav-links-desktop,.nav-actions-desktop{display:none !important}
  .nav-mobile-toggle{display:flex !important}
  nav{padding:12px 18px !important}

  /* Touch targets minimum height (44px WCAG standard) */
  button,[role="button"],input,select,a[data-magnetic],.mobile-nav-link{min-height:44px !important}
}

@media (max-width:720px){
  section{padding-left:20px !important;padding-right:20px !important;padding-top:56px !important;padding-bottom:56px !important}
  /* Ensure top section on every page clears fixed navbar (60px navbar + 44px top margin = 104px) */
  [data-page] > section:first-of-type,
  [data-page] > section:first-child,
  section[data-anchor="shift"]{padding-top:104px !important}
  #hero{min-height:85vh !important;padding-top:80px !important}
  a[data-magnetic]{min-height:44px !important;display:inline-flex !important;align-items:center !important}

  /* Collapse multi-column inline grids to a single column */
  [data-page] [style*="display:grid"],[data-page] [style*="display: grid"],
  footer [style*="display:grid"],footer [style*="display: grid"]{
    grid-template-columns:minmax(0,1fr) !important;gap:14px !important;
  }

  /* Ensure grid and flex children never exceed container width */
  [data-page] [style*="display:grid"] > *,[data-page] [style*="display: grid"] > *,
  [data-page] [style*="display:flex"] > *,[data-page] [style*="display: flex"] > *{
    min-width:0 !important;max-width:100% !important;
  }

  /* Opt-outs */
  [data-page] [data-keep-cols]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  [data-page] [data-gantt-cols]{grid-template-columns:repeat(6,minmax(0,1fr)) !important}
  [data-page] [style*="grid-template-columns:5px"],[data-page] [style*="grid-template-columns: 5px"]{
    grid-template-columns:5px minmax(0,1fr) !important;gap:0 14px !important;
  }
  [data-page] [style*="grid-template-columns:38px"],[data-page] [style*="grid-template-columns: 38px"]{
    grid-template-columns:38px minmax(0,1fr) !important;gap:0 14px !important;
  }

  #hero-hint,#hero-replay{display:none !important}
}

/* ── Breakpoint 5: Standard Phones (< 430px) ─────────────────────────────── */
@media (max-width:430px){
  section{padding-left:16px !important;padding-right:16px !important}
  nav{padding:10px 16px !important}
}

/* ── Breakpoint 6: Small Phones (320px - 374px) ──────────────────────────── */
@media (max-width:374px){
  section{padding-left:12px !important;padding-right:12px !important}
  nav{padding:8px 12px !important}
}