/* ==========================================================================
   FILAMENTAL — SITE DESIGN SYSTEM
   One stylesheet. Every page reads from it. Change a value here, it changes
   everywhere, which is the whole point.

   Sections:
     0. Fonts           — self-hosted @font-face, no third-party request
     1. Tokens          — colours, type, spacing, radii, elevation
     2. Base            — page shell, layout wrappers
     3. Typography      — the anchor-title / header-statement hierarchy
     4. Controls        — buttons, badges, chips
     5. Surfaces        — cards, bento grid, the instrument stage
     6. Chrome          — nav, footer
     7. Motion          — all animation lives here, and nowhere else
     8. Long-form prose — the utility pages only, scoped under .prose
   ========================================================================== */


/* 0. FONTS =================================================================
   Self-hosted on purpose. Loading these from fonts.googleapis.com sends every
   visitor's IP address to Google before a single word renders, which is not
   something a site with our privacy policy should be doing. These files are
   served from our own origin and the site makes no third-party request at all.

   All four are variable fonts, so one file covers a whole weight range rather
   than one file per weight. latin and latin-ext only — see assets/fonts/README.md
   for what was dropped and how to refresh them.

   font-display:swap means text paints immediately in the fallback and reflows
   when the face arrives. Never let a webfont hold up the first paint.
   ========================================================================== */

@font-face{ font-family:'Outfit'; font-style:normal; font-weight:200 500; font-display:swap;
  src:url(../fonts/outfit-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:'Outfit'; font-style:normal; font-weight:200 500; font-display:swap;
  src:url(../fonts/outfit-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:'Manrope'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url(../fonts/manrope-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:'Manrope'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url(../fonts/manrope-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:'JetBrains Mono'; font-style:normal; font-weight:400 500; font-display:swap;
  src:url(../fonts/jetbrainsmono-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:'JetBrains Mono'; font-style:normal; font-weight:400 500; font-display:swap;
  src:url(../fonts/jetbrainsmono-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:'Gruppo'; font-style:normal; font-weight:400; font-display:swap;
  src:url(../fonts/gruppo-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:'Gruppo'; font-style:normal; font-weight:400; font-display:swap;
  src:url(../fonts/gruppo-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 }


/* 1. TOKENS ================================================================
   Nothing below this block should contain a raw colour or a raw pixel size.
   If you want the site darker, warmer, tighter, roomier — change it here. */

:root{
  /* --- Ground: three depths, not one black. Sections alternate between them
         so each band reads as its own plane rather than one flat sheet. --- */
  --colour-ground:        #0A0A0F;
  --colour-ground-deep:   #050508;
  --colour-ground-raised: #0D0D14;

  /* --- Surfaces that sit above the ground --- */
  --colour-surface:        #101018;
  --colour-surface-raised: #17171F;
  --colour-card:           #0E0E14;
  --colour-bezel:          #15151D;   /* the instrument frame */
  --colour-canvas:         #07070B;   /* inside the instrument */

  /* --- Edges: three, graded by how much light they catch --- */
  --colour-line:        #22222C;
  --colour-line-bright: #3D3D4A;
  --colour-edge-light:  rgba(255,255,255,.07);

  /* --- Text. All four pass WCAG AA on every ground and card colour above.
         Do not darken text-muted below #8C8C9B — that is the AA floor. --- */
  --colour-text:           #F2F2F5;   /* 17.7:1 */
  --colour-text-secondary: #A8A8B5;   /*  8.4:1 */
  --colour-text-muted:     #8C8C9B;   /*  6.0:1 */

  /* --- Brand. Accent is the site's primary; cyan and purple are the app's
         identity, kept here for categorical use (node types), not branding. */
  --colour-accent:     #D4FF00;
  --colour-accent-ink: #0A0A0F;       /* text that sits ON accent */
  --colour-accent-dim: #A8CC00;
  --colour-cyan:       #67EDEB;
  --colour-purple:     #9981D9;

  /* --- Type --- */
  --font-display:  'Outfit', system-ui, sans-serif;      /* headings */
  --font-body:     'Manrope', system-ui, sans-serif;     /* everything else */
  --font-signal:   'JetBrains Mono', ui-monospace, monospace; /* labels, terms */
  --font-wordmark: 'Gruppo', var(--font-display);        /* logo only */

  --type-statement: clamp(2.75rem, 5.6vw, 5.25rem);
  --type-heading-2: clamp(2rem, 3.6vw, 3rem);
  --type-heading-3: 1.5rem;
  --type-lede:      clamp(1.125rem, 1.5vw, 1.375rem);
  --type-body:      17px;
  --type-small:     15px;
  --type-anchor:    13px;
  --type-stat:      clamp(3rem, 5vw, 4.5rem);

  --leading-tight: 1.0;
  --leading-body:  1.55;

  /* --- Space: one scale, used for everything --- */
  --space-1:4px;  --space-2:8px;   --space-3:12px;  --space-4:16px;
  --space-5:24px; --space-6:32px;  --space-7:48px;  --space-8:64px;
  --space-9:96px; --space-10:128px;--space-11:192px;

  --layout-container:        1240px;
  --layout-container-narrow: 760px;
  --layout-gutter:           24px;
  --layout-section-y:        clamp(72px, 9vw, 128px);
  --layout-nav-height:       64px;

  --radius-small:  10px;
  --radius-medium: 16px;
  --radius-large:  24px;
  --radius-pill:   999px;

  /* --- Elevation. The rule: light falls from above. So anything raised
         catches its top edge, carries a downward sheen, and casts below. --- */
  --edge-catch: inset 0 1px 0 0 var(--colour-edge-light);
  --elev-1: var(--edge-catch), 0 18px 40px -24px rgba(0,0,0,.9);
  --elev-2: inset 0 1px 0 0 rgba(255,255,255,.10), 0 40px 80px -32px rgba(0,0,0,.95);
  --sheen: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 38%);
  --wash:  radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.03) 0%, rgba(255,255,255,0) 62%);

  /* --- Motion. Every duration and distance on the site is one of these.
         Turn them down here if it ever feels busy. --- */
  --motion-quick:  140ms;
  --motion-ease:   260ms;
  --motion-slow:   600ms;
  --motion-drift:  24s;                    /* the hero light breathing */
  --motion-rise:   14px;                   /* how far a revealing block moves */
  --motion-curve:  cubic-bezier(.22,.61,.36,1);
}


/* 2. BASE ================================================================= */

*, *::before, *::after{ box-sizing:border-box }

body{
  margin:0;
  background:var(--colour-ground);
  color:var(--colour-text);
  font-family:var(--font-body);
  font-size:var(--type-body);
  line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;
}

img, svg{ max-width:100%; height:auto }

.wrap{ width:100%; max-width:var(--layout-container); margin-inline:auto; padding-inline:var(--layout-gutter) }
.wrap-narrow{ width:100%; max-width:var(--layout-container-narrow); margin-inline:auto; padding-inline:var(--layout-gutter) }
.layer{ position:relative; z-index:2 }
.centre{ display:flex; flex-direction:column; align-items:center; text-align:center; margin-inline:auto; max-width:900px }

/* A section is one movement of the argument. Alternate the depth classes down
   the page so consecutive sections never share a ground colour. */
.section{
  position:relative;
  padding-block:var(--layout-section-y);
  background-color:var(--colour-ground);
  background-image:var(--wash);
  border-top:1px solid var(--colour-line);
}
.section-deep  { background-color:var(--colour-ground-deep) }
.section-raised{ background-color:var(--colour-ground-raised) }


/* 3. TYPOGRAPHY ===========================================================
   Two classes carry the whole hierarchy rule: a quiet anchor-title saying what
   the section is, and one dominant header-statement making its argument.
   One header-statement per section. Never two competing at equal weight. */

.anchor-title, .anchor-title-ink{
  font-family:var(--font-signal); font-size:var(--type-anchor); font-weight:500;
  text-transform:uppercase; letter-spacing:.18em; margin:0 0 var(--space-5);
}
.anchor-title{ color:var(--colour-accent) }
.anchor-title-ink{ color:var(--colour-accent-ink); opacity:.72 }

.header-statement{
  font-family:var(--font-display); font-size:var(--type-statement); font-weight:300;
  line-height:var(--leading-tight); letter-spacing:-.035em;
  color:var(--colour-text); max-width:16ch; margin:0 0 var(--space-7);
}
.section-heading, .section-heading-ink{
  font-family:var(--font-display); font-size:var(--type-heading-2); font-weight:300;
  line-height:1.05; letter-spacing:-.03em; max-width:22ch; margin:0 0 var(--space-6);
}
.section-heading{ color:var(--colour-text) }
.section-heading-ink{ color:var(--colour-accent-ink) }

.sub-heading, .sub-heading-ink{
  font-family:var(--font-display); font-size:var(--type-heading-3); font-weight:500;
  line-height:1.25; letter-spacing:-.02em; margin:0 0 var(--space-3);
}
.sub-heading{ color:var(--colour-text) }
.sub-heading-ink{ color:var(--colour-accent-ink) }

.lede{ font-size:var(--type-lede); line-height:1.5; color:var(--colour-text-secondary); max-width:58ch; margin:0 0 var(--space-7) }
.body-copy{ font-size:var(--type-body); line-height:var(--leading-body); color:var(--colour-text-secondary); max-width:66ch; margin:0 }
.body-copy-ink{ font-size:var(--type-body); line-height:var(--leading-body); color:var(--colour-accent-ink); opacity:.82; max-width:66ch; margin:0 0 var(--space-5) }
.note{ font-size:var(--type-small); line-height:1.5; color:var(--colour-text-muted); max-width:60ch; margin:0 }

/* A signal term: a single word that tells the right reader this is for them,
   and reads straight past everyone else. */
.signal-term{ font-family:var(--font-signal); font-size:13px; letter-spacing:.02em; color:var(--colour-accent); margin:0 0 var(--space-5) }

.stat-number{
  font-family:var(--font-display); font-size:var(--type-stat); font-weight:200;
  letter-spacing:-.045em; line-height:1; color:var(--colour-text); margin:0 0 var(--space-4);
}

/* The ownership argument: one numbered sequence, not four scattered lines. */
.numbered{ display:grid; grid-template-columns:56px minmax(0,1fr); gap:var(--space-5); padding-block:var(--space-5); border-top:1px solid var(--colour-line); align-items:baseline }
.numeral{ font-family:var(--font-signal); font-size:13px; letter-spacing:.08em; color:var(--colour-accent) }


/* 4. CONTROLS ============================================================= */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 28px; border-radius:var(--radius-pill);
  border:1px solid var(--colour-line-bright);
  background-color:var(--colour-surface-raised); background-image:var(--sheen);
  box-shadow:var(--elev-1);
  color:var(--colour-text); font-size:var(--type-small); font-weight:500;
  letter-spacing:.01em; text-decoration:none;
}
.btn-accent{
  background-color:var(--colour-accent); color:var(--colour-accent-ink); border-color:var(--colour-accent);
  background-image:linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 46%);
  box-shadow:0 0 0 1px rgba(212,255,0,.35), 0 16px 40px -18px rgba(212,255,0,.6);
}
.btn-ink{
  background-color:var(--colour-accent-ink); background-image:none;
  color:var(--colour-accent); border-color:var(--colour-accent-ink);
  box-shadow:0 16px 34px -20px rgba(0,0,0,.9);
}
.cta-row{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-7) }

.badge{
  display:inline-flex; align-items:center; gap:var(--space-2);
  padding:8px 8px 8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--colour-line-bright);
  background-color:var(--colour-surface-raised); background-image:var(--sheen);
  box-shadow:var(--elev-1);
  font-size:13px; color:var(--colour-text-secondary); margin-bottom:var(--space-7);
}
.badge-dot{ width:6px; height:6px; border-radius:var(--radius-pill); background:var(--colour-accent); box-shadow:0 0 0 4px rgba(212,255,0,.16) }
.badge-tag{ font-family:var(--font-signal); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--colour-accent-ink); background:var(--colour-accent); padding:3px 10px; border-radius:var(--radius-pill) }

.chip{
  display:inline-flex; align-items:center; align-self:flex-start;
  padding:6px 12px; border-radius:var(--radius-pill);
  background-color:var(--colour-surface-raised); border:1px solid var(--colour-line-bright);
  font-family:var(--font-signal); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--colour-text-secondary); margin-bottom:var(--space-5);
}
.chip-ink{ background-color:rgba(10,10,15,.14); border-color:rgba(10,10,15,.28); color:var(--colour-accent-ink) }


/* 5. SURFACES ============================================================= */

/* Bento: a 12-column grid. Give each card a span class. Mixed sizes are the
   point — equal columns read as a table, not a composition. */
.bento{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--space-5); margin-top:var(--space-8) }
.span-3{grid-column:span 3} .span-4{grid-column:span 4} .span-5{grid-column:span 5}
.span-6{grid-column:span 6} .span-7{grid-column:span 7} .span-8{grid-column:span 8}
.span-12{grid-column:span 12}

.card{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between; gap:var(--space-6);
  background-color:var(--colour-card); background-image:var(--sheen);
  border:1px solid var(--colour-line); border-radius:var(--radius-large);
  box-shadow:var(--elev-1);
  padding:var(--space-6); min-height:250px;
}
.card-top, .card-foot{ position:relative; z-index:1 }
.card-top{ display:flex; flex-direction:column; align-items:flex-start }

/* card-lit: a point source falling across the card from the upper left. Use it
   on the one card per section that should draw the eye. Not on all of them. */
.card-lit::after{
  content:""; position:absolute; left:-10%; top:-60%; width:120%; height:120%; pointer-events:none;
  background-image:radial-gradient(42% 42% at 22% 30%, rgba(212,255,0,.16) 0%, rgba(212,255,0,0) 68%);
}
.card-accent{
  background-color:var(--colour-accent); border-color:var(--colour-accent-dim); color:var(--colour-accent-ink);
  background-image:linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 42%);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.5), 0 30px 60px -30px rgba(212,255,0,.5);
}

.accent-block{
  background-color:var(--colour-accent); color:var(--colour-accent-ink);
  padding-block:var(--space-10); border-top:0;
  background-image:radial-gradient(70% 100% at 50% 0%, rgba(255,255,255,.36) 0%, rgba(255,255,255,0) 60%);
}

/* The instrument. A bezel with a lit top edge over a darker inner canvas —
   built like the product, so it reads as the product rather than a picture. */
.stage{
  position:relative; margin-top:var(--space-10); padding:10px;
  border-radius:var(--radius-large); background-color:var(--colour-bezel);
  background-image:linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.02) 22%, rgba(255,255,255,0) 60%);
  box-shadow:var(--elev-2), 0 -40px 160px -40px rgba(212,255,0,.30);
}
.stage-inner{ position:relative; display:flex; min-height:520px; overflow:hidden; border-radius:var(--radius-medium); background:var(--colour-canvas); border:1px solid rgba(255,255,255,.05) }
.stage-rail{ width:212px; flex:none; padding:var(--space-5); border-right:1px solid rgba(255,255,255,.05); background-image:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 40%) }
.stage-main{ position:relative; flex:1; display:flex; flex-direction:column }
.stage-bar{ height:46px; flex:none; display:flex; align-items:center; gap:10px; padding-inline:var(--space-5); border-bottom:1px solid rgba(255,255,255,.05); background-image:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0)) }
.stage-canvas{ position:relative; flex:1; display:flex; align-items:center; justify-content:center; background-image:radial-gradient(70% 60% at 50% 55%, rgba(212,255,0,.10) 0%, rgba(10,10,15,0) 70%) }
.stage-canvas svg{ position:absolute; inset:0; width:100%; height:100% }

.rail-row{ display:flex; align-items:center; gap:10px; padding-block:9px }
.rail-dot{ width:8px; height:8px; border-radius:var(--radius-pill); flex:none; background:var(--colour-accent) }
.rail-dot-cyan{ background:var(--colour-cyan) } .rail-dot-purple{ background:var(--colour-purple) }
.rail-bar{ height:7px; border-radius:4px; background:rgba(255,255,255,.11); width:104px }
.rail-divider{ margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,.06) }
.bar-pill{ height:22px; border-radius:var(--radius-pill); background:rgba(255,255,255,.07); width:200px }
.bar-pill-accent{ background:rgba(212,255,0,.22); width:74px }
.bar-spacer{ flex:1 }

.rule{ width:100%; height:1px; background:var(--colour-line) }

/* Platform strip. Deliberately not a customer logo wall — there are no
   customers yet, and a borrowed one would read as exactly that. */
.logo-strip{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-5) var(--space-7); padding-block:var(--space-7); margin-top:var(--space-9); border-top:1px solid var(--colour-line); border-bottom:1px solid var(--colour-line) }
.logo-item{ font-family:var(--font-display); font-size:19px; letter-spacing:-.01em; color:var(--colour-text-muted) }


/* 6. CHROME =============================================================== */

.nav{ position:sticky; top:0; z-index:100; background:var(--colour-accent); color:var(--colour-accent-ink); box-shadow:0 18px 40px -28px rgba(212,255,0,.55) }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:var(--layout-nav-height) }
.nav-logo{ font-family:var(--font-wordmark); font-size:22px; letter-spacing:.08em; color:var(--colour-accent-ink); text-decoration:none }
.nav-links{ display:flex; align-items:center; gap:var(--space-7) }
.nav-link{ font-size:var(--type-small); font-weight:500; letter-spacing:.01em; color:var(--colour-accent-ink); text-decoration:none; opacity:.78 }

/* The mobile menu, with no JavaScript. A visually-hidden checkbox drives the
   drawer through a sibling selector, which means the link list exists exactly
   once in the markup — there is no second copy to drift out of step.

   The checkbox is clipped rather than display:none on purpose: clipped, it
   still takes keyboard focus, so the menu opens with Space like any other
   control. display:none would remove it from the tab order entirely.

   Everything here is inert above 767px. The rules that switch it on live in
   the responsive block at the foot of the file. */
.nav-toggle{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; white-space:nowrap; border:0; clip-path:inset(50%);
}
.nav-burger{
  display:none; position:relative; width:40px; height:40px; margin-right:-8px;
  align-items:center; justify-content:center;
  border-radius:var(--radius-small); cursor:pointer;
}
.burger-bars, .burger-bars::before, .burger-bars::after{
  position:absolute; left:50%; width:20px; height:2px; margin-left:-10px;
  background:var(--colour-accent-ink); border-radius:2px;
}
.burger-bars{ top:50%; margin-top:-1px }
.burger-bars::before{ content:""; top:-6px }
.burger-bars::after { content:""; top:6px }

/* Open: the bars become a cross. This is state, not decoration — it is how the
   control says it now closes rather than opens. */
.nav-toggle:checked ~ .nav-burger .burger-bars{ background:transparent }
.nav-toggle:checked ~ .nav-burger .burger-bars::before{ top:0; transform:rotate(45deg) }
.nav-toggle:checked ~ .nav-burger .burger-bars::after { top:0; transform:rotate(-45deg) }

.nav-toggle:focus-visible ~ .nav-burger{ outline:2px solid var(--colour-accent-ink); outline-offset:2px }

.hero{ position:relative; overflow:hidden; padding-top:var(--space-10); padding-bottom:0; background:var(--colour-ground) }
.hero-grid{ position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:88px 88px;
  -webkit-mask-image:radial-gradient(80% 60% at 50% 30%, #000 0%, transparent 78%);
          mask-image:radial-gradient(80% 60% at 50% 30%, #000 0%, transparent 78%) }
.hero-glow{ position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(48% 40% at 50% 62%, rgba(212,255,0,.20) 0%, rgba(212,255,0,.05) 42%, rgba(10,10,15,0) 74%) }
.hero-horizon{ position:absolute; left:0; right:0; bottom:0; height:340px; pointer-events:none;
  background-image:linear-gradient(180deg, rgba(10,10,15,0) 0%, rgba(5,5,8,.85) 70%, #050508 100%) }

.footer{ position:relative; background:var(--colour-ground-deep); border-top:1px solid var(--colour-line); padding:var(--space-9) 0 var(--space-8) }
.footer-cols{ display:flex; flex-wrap:wrap; gap:var(--space-5) var(--space-7) }
.footer-link{ font-size:var(--type-small); color:var(--colour-text-secondary); text-decoration:none }


/* 7. MOTION ===============================================================
   All animation on the site lives in this block and nowhere else.

   The rule it follows (Vega): motion must do a job. Reveal marks a boundary
   and sets reading order. Hover states say "this is clickable". The glow
   breathes because a light source that never moves reads as a flat gradient,
   not as light. Nothing here exists to delight.

   To calm the whole site down, change --motion-* in the tokens block.
   To remove any single behaviour, delete its rule below. Nothing else breaks.
   ======================================================================== */

/* --- Hover: affordance only, on things you can actually click ------------ */
.btn{ transition:transform var(--motion-quick) var(--motion-curve),
                 box-shadow var(--motion-ease) var(--motion-curve),
                 border-color var(--motion-ease) var(--motion-curve) }
.btn:hover{ transform:translateY(-1px) }
.btn:active{ transform:translateY(0) }
.btn:not(.btn-accent):not(.btn-ink):hover{ border-color:var(--colour-text-muted) }
.btn-accent:hover{ box-shadow:0 0 0 1px rgba(212,255,0,.5), 0 20px 48px -18px rgba(212,255,0,.75) }

.nav-link{ transition:opacity var(--motion-quick) var(--motion-curve) }
.nav-link:hover{ opacity:1 }

.footer-link{ transition:color var(--motion-quick) var(--motion-curve) }
.footer-link:hover{ color:var(--colour-text) }

/* Only cards that are links get a hover state. A card that does nothing
   should not pretend it does. */
a.card{ text-decoration:none; transition:transform var(--motion-ease) var(--motion-curve),
                                         border-color var(--motion-ease) var(--motion-curve),
                                         box-shadow var(--motion-ease) var(--motion-curve) }
a.card:hover{ transform:translateY(-3px); border-color:var(--colour-line-bright);
              box-shadow:var(--edge-catch), 0 28px 56px -26px rgba(0,0,0,.95) }

/* --- The hero light breathes -------------------------------------------- */
@keyframes drift{
  0%,100%{ opacity:.85; transform:scale(1) }
  50%    { opacity:1;   transform:scale(1.06) }
}
.hero-glow{ animation:drift var(--motion-drift) ease-in-out infinite; transform-origin:50% 62% }

/* --- Node coronas pulse, staggered, like the app's own selection pulse --- */
@keyframes corona{
  0%,100%{ opacity:.45; r:26 }
  50%    { opacity:.18; r:34 }
}
.corona{ animation:corona 7s ease-in-out infinite }
.corona-b{ animation-delay:-2.4s }
.corona-c{ animation-delay:-4.8s }

/* --- Reveal on scroll ---------------------------------------------------
   Uses scroll-driven CSS animation: no JavaScript, and in browsers that do
   not support it the content is simply visible, which is the correct
   fallback. Never hide content behind a script. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    @keyframes reveal{
      from{ opacity:0; transform:translateY(var(--motion-rise)) }
      to  { opacity:1; transform:translateY(0) }
    }
    .reveal{
      animation:reveal var(--motion-slow) var(--motion-curve) both;
      animation-timeline:view();
      animation-range:entry 5% cover 22%;
    }
    /* Stagger a row of cards so the eye is led across rather than hit at once */
    .reveal-stagger > *{
      animation:reveal var(--motion-slow) var(--motion-curve) both;
      animation-timeline:view();
      animation-range:entry 5% cover 26%;
    }
    .reveal-stagger > *:nth-child(2){ animation-range:entry 8% cover 30% }
    .reveal-stagger > *:nth-child(3){ animation-range:entry 11% cover 34% }
  }
}

/* --- The override that outranks everything above ------------------------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}


/* 8. LONG-FORM PROSE ======================================================
   Only the utility pages use this: privacy, terms, cancel, partners, help.

   Everything above is built for a marketing page, where every block is placed
   deliberately and nothing simply flows. These pages are the opposite — they
   are continuous documents that need ordinary paragraphs, lists and tables,
   and they are read rather than scanned.

   All of it is scoped under .prose so none of it can leak onto a marketing
   page and start styling things that were composed by hand.
   ======================================================================== */

.prose{ max-width:72ch }
.prose > :last-child{ margin-bottom:0 }

.prose h2{
  font-family:var(--font-display); font-size:var(--type-heading-3); font-weight:500;
  line-height:1.25; letter-spacing:-.02em; color:var(--colour-text);
  margin:var(--space-8) 0 var(--space-4);
}
.prose h3{
  font-family:var(--font-display); font-size:1.125rem; font-weight:500;
  line-height:1.3; color:var(--colour-text); margin:var(--space-7) 0 var(--space-3);
}
.prose h2:first-child, .prose h3:first-child{ margin-top:0 }

.prose p{ font-size:var(--type-body); line-height:var(--leading-body); color:var(--colour-text-secondary); margin:0 0 var(--space-5) }
.prose strong{ color:var(--colour-text); font-weight:600 }
.prose a{ color:var(--colour-accent); text-decoration:underline; text-underline-offset:3px }

.prose ul{ margin:0 0 var(--space-5); padding-left:var(--space-5) }
.prose li{ font-size:var(--type-body); line-height:var(--leading-body); color:var(--colour-text-secondary); margin-bottom:var(--space-2) }
.prose li::marker{ color:var(--colour-accent) }

/* Tables scroll inside their own box rather than widening the page. A legal
   summary table is the one place this site has genuinely tabular data. */
.prose-scroll{ overflow-x:auto; margin:0 0 var(--space-6) }
.prose table{ width:100%; min-width:520px; border-collapse:collapse; font-size:var(--type-small) }
.prose th, .prose td{ text-align:left; padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--colour-line); vertical-align:top }
.prose th{
  font-family:var(--font-signal); font-size:11px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--colour-text-muted);
}
.prose td{ color:var(--colour-text-secondary) }
.prose td:first-child{ color:var(--colour-text) }

/* The summary a reader actually reads before the document they do not. */
.prose-lead{ margin-bottom:var(--space-8) }
.prose-lead li{ color:var(--colour-text) }


/* RESPONSIVE ==============================================================
   The bento collapses in two steps: 12 → halves → single column. */

@media (max-width: 991px){
  .span-3,.span-4,.span-5{ grid-column:span 6 }
  .span-7,.span-8{ grid-column:span 12 }
  .stage-rail{ display:none }
  .nav-links{ gap:var(--space-5) }
}
@media (max-width: 767px){
  .span-3,.span-4,.span-5,.span-6,.span-7,.span-8{ grid-column:span 12 }
  .header-statement{ max-width:none }
  .stage-inner{ min-height:320px }
  .logo-strip{ justify-content:flex-start }

  /* The menu switches on here. The drawer is absolute against .nav, which is
     sticky and so is its own containing block, giving a full-bleed panel that
     sits under the bar rather than inside the 1240px wrap. */
  .nav-burger{ display:flex }
  .nav-links{
    display:none;
    position:absolute; left:0; right:0; top:var(--layout-nav-height);
    flex-direction:column; align-items:stretch; gap:0;
    padding:0 var(--layout-gutter) var(--space-5);
    background:var(--colour-accent);
    box-shadow:0 24px 40px -30px rgba(0,0,0,.7);
  }
  .nav-toggle:checked ~ .nav-links{ display:flex }
  .nav-links .nav-link{
    display:block; padding:var(--space-4) 0; font-size:17px; opacity:1;
    border-top:1px solid rgba(10,10,15,.16);
  }
  .nav-links .btn{ margin-top:var(--space-5); text-align:center }
}