/* TAOAI — site styles. Tokens and rules: DESIGN.md ("The Network Ledger").
   Order: base, shared components, surfaces, home, Company, Bittensor, Legal, motion.
   Breakpoints: 1399/1100 (wide layouts give way), 860 (two columns stack),
   760 (phones and small tablets), 700/640/600/520 (phones). */

/* Self-hosted fonts (SIL Open Font License): Sora variable, MuseoModerno 700 */
@font-face{ font-family:'Sora'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(fonts/sora-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:'Sora'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(fonts/sora-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'MuseoModerno'; font-style:normal; font-weight:700; font-display:swap;
  src:url(fonts/museomoderno-700-latin.woff2) format('woff2'); }

:root{
  /* published tokens */
  --dim:#1C1620;
  --flash:#E4FF6E;
  --wow:#B384F0;
  --mute:#E8EEEC;
  --cool:#8CE3E2;

  /* derived */
  --dim-raised:#241B2C;
  --dim-sunken:#140F17;
  --border-dark:rgba(232,238,236,0.15);
  --border-light:rgba(28,22,32,0.14);
  --text-dim-on-dark:rgba(232,238,236,0.62);
  --text-dim-on-light:rgba(28,22,32,0.68);

  /* spacing (4px scale) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:144px;

  --r-sm:4px; --r-md:8px; --r-lg:12px;

  --gutter:clamp(16px, 4vw, 48px);
  --max:1240px;
  --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
  --focus:var(--flash);
}

/* =========================================================
   Base
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }

html{
  background:var(--dim);
  color-scheme:dark;
  scrollbar-color:rgba(232,238,236,0.28) var(--dim);
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
}

body{
  background:var(--dim);
  color:var(--mute);
  font-family:'Sora', system-ui, sans-serif;
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  caret-color:var(--flash);
}

::selection{ background:var(--flash); color:var(--dim); }

img,svg{ display:block; max-width:100%; }

a{ color:inherit; text-underline-offset:0.22em; text-decoration-thickness:1px; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--focus); outline-offset:3px; border-radius:var(--r-sm);
}

p, li, figcaption, dd{ text-wrap:pretty; }
h3{ text-wrap:balance; }

.skip{
  position:absolute; left:var(--gutter); top:-100px; z-index:50;
  background:var(--flash); color:var(--dim); padding:var(--sp-2) var(--sp-4);
  border-radius:var(--r-md); font-weight:600; text-decoration:none;
}
.skip:focus{ top:var(--sp-3); }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }

.num{ font-variant-numeric:tabular-nums; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.no-break{ white-space:nowrap; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ transition:none !important; animation:none !important; }
}

/* =========================================================
   Header and footer
   ========================================================= */
.site-head{
  background:var(--dim);
  border-bottom:1px solid var(--border-dark);
}
.site-head .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-5); min-height:72px;
}
/* header, menu and footer links are at least 44px tall to tap */
.logotype{
  display:inline-flex; align-items:center; min-height:44px;
  font-family:'MuseoModerno', 'Sora', sans-serif; font-weight:700; font-size:1.375rem;
  letter-spacing:0.01em; line-height:1; text-decoration:none; white-space:nowrap;
}
.logotype .tao{ color:var(--mute); }
.logotype .ai{ color:var(--flash); }

.site-nav{ display:flex; gap:var(--sp-6); align-items:center; }
.site-nav a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:0.875rem; font-weight:500; color:var(--text-dim-on-dark); text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .15s, border-color .15s;
}
.site-nav a:hover{ color:var(--mute); }
.site-nav a[aria-current="page"]{ color:var(--mute); border-bottom-color:var(--flash); }

@media (max-width:600px){
  .site-head .wrap{ flex-wrap:wrap; gap:0 var(--sp-5); padding-top:var(--sp-4); padding-bottom:var(--sp-2); }
  .site-nav{ width:100%; gap:var(--sp-5); }
  .site-nav a{ font-size:0.8125rem; }
}


.site-foot{
  border-top:1px solid var(--border-dark);
  padding:var(--sp-8) 0 var(--sp-7);
  font-size:0.8438rem; color:var(--text-dim-on-dark);
}
.site-foot .wrap{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--sp-6) var(--sp-8); }
.site-foot nav{ display:flex; flex-direction:column; margin-top:var(--sp-5); }
.site-foot nav a{ display:inline-flex; align-items:center; min-height:44px; color:var(--mute); text-decoration:none; width:fit-content; }
.site-foot nav a:hover{ text-decoration:underline; }
.site-foot .legal-summary p + p{ margin-top:var(--sp-3); }
.site-foot .legal-summary a{ color:var(--mute); }
.to-top{ color:var(--text-dim-on-dark); }
@media (max-width:760px){ .site-foot .wrap{ grid-template-columns:1fr; } }

/* =========================================================
   Type
   ========================================================= */
.display{
  font-size:clamp(2.75rem, 8vw, 6rem); font-weight:600; line-height:0.98;
  letter-spacing:-0.035em; text-wrap:balance;
}
.headline{
  font-size:clamp(2rem, 4.6vw, 3.5rem); font-weight:600; line-height:1.05;
  letter-spacing:-0.03em; text-wrap:balance;
}
.title{
  font-size:clamp(1.375rem, 2.4vw, 1.875rem); font-weight:600; line-height:1.2;
  letter-spacing:-0.015em; text-wrap:balance;
}
.lede{
  font-size:clamp(1.1875rem, 1.7vw, 1.375rem); line-height:1.5; font-weight:400;
  max-width:36em; color:var(--mute);
}
.prose p{ max-width:38em; }
.prose p + p{ margin-top:var(--sp-4); }
.muted{ color:var(--text-dim-on-dark); }
.small{ font-size:0.875rem; line-height:1.55; }
.label{
  font-size:0.75rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
}
.source-note{ margin-top:var(--sp-4); font-size:0.8125rem; color:var(--text-dim-on-dark); max-width:60em; }

/* =========================================================
   Page structure
   ========================================================= */
.block{
  padding:var(--sp-9) 0;
  border-top:1px solid var(--border-dark);
}
.block:first-of-type{ border-top:none; }
.block-head p{ margin-top:var(--sp-4); max-width:36em; }
.lede-tight{ margin-top:var(--sp-4); }
.block-head .lede{ margin-top:var(--sp-5); max-width:36em; }

.ledger{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:var(--sp-6) var(--sp-8);
  align-items:start;
}
.ledger > .ledger-head{ position:sticky; top:var(--sp-6); }
.ledger > .ledger-head p{ margin-top:var(--sp-4); }
@media (max-width:860px){
  .ledger{ grid-template-columns:1fr; gap:var(--sp-5); }
  .ledger > .ledger-head{ position:static; }
  .block{ padding:var(--sp-8) 0; }
}

/* page opener */
.opener{ padding:var(--sp-9) 0 var(--sp-8); }
.opener .display{ max-width:13ch; }
.opener .lede{ margin-top:var(--sp-6); }
.opener-meta{
  margin-top:var(--sp-8);
  display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-6);
  font-size:0.875rem; color:var(--text-dim-on-dark);
}
.opener-meta a{ display:inline-block; padding-block:var(--sp-2); color:var(--mute); }

/* opener with art beside it */
.opener-grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--sp-7); align-items:center; }
.opener-grid .display{ max-width:none; font-size:clamp(2.75rem, 6.4vw, 5.5rem); }
.opener-art{ width:100%; max-width:440px; justify-self:end; color:var(--mute); }
@media (max-width:860px){
  .opener-grid{ grid-template-columns:1fr; }
  .opener-art{ max-width:260px; justify-self:start; order:-1; margin-bottom:var(--sp-5); }
}

/* section index (in-page wayfinding) */
.toc{
  border-top:1px solid var(--border-dark);
  border-bottom:1px solid var(--border-dark);
}
.toc ol{
  list-style:none; display:flex; flex-wrap:wrap; gap:0 var(--sp-6);
  padding:var(--sp-1) 0;
}
.toc a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:0.875rem; color:var(--text-dim-on-dark); text-decoration:none;
}
.toc a:hover{ color:var(--mute); text-decoration:underline; }
.toc a[aria-current]{ color:var(--mute); text-decoration:underline; text-underline-offset:0.3em; }

.text-link{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-weight:600; color:var(--mute); text-decoration:none;
  border-bottom:1px solid var(--border-dark); padding-bottom:2px;
  transition:color .15s, border-color .15s;
}
.text-link:hover{ color:var(--cool); border-color:var(--cool); }
.text-link svg{ width:16px; height:16px; }

/* ledger rows (lines of business, services) */
.rows{ border-top:1px solid var(--border-dark); }
.row{
  display:grid; grid-template-columns:minmax(0,4fr) minmax(0,6fr);
  gap:var(--sp-3) var(--sp-6);
  padding:var(--sp-6) 0; border-bottom:1px solid var(--border-dark);
}
.row h3{ font-size:clamp(1.25rem, 2vw, 1.5rem); font-weight:600; line-height:1.3; letter-spacing:-0.015em; }
.row p{ max-width:36em; }
.row p + p{ margin-top:var(--sp-3); }
@media (max-width:640px){ .row{ grid-template-columns:1fr; } }


/* =========================================================
   Surfaces and texture
   ========================================================= */
.surface-light{ background:var(--mute); color:var(--dim); }
.surface-light ::selection{ background:var(--dim); color:var(--mute); }

.band-light{ background:var(--mute); color:var(--dim); border-top:none; }
.band-light + .block{ border-top:none; }
.band-light ::selection{ background:var(--dim); color:var(--mute); }
.band-light .lede{ color:var(--dim); }
.band-light .source-note{ color:var(--text-dim-on-light); }

.dots-bg{ position:relative; isolation:isolate; }
.dots-bg::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(circle, rgba(232,238,236,0.16) 1.3px, transparent 1.7px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(115deg, transparent 25%, #000 85%);
          mask-image:linear-gradient(115deg, transparent 25%, #000 85%);
}
.field-wow.dots-bg::before, .flash-field.dots-bg::before, .field-flash.dots-bg::before{
  background-image:radial-gradient(circle, rgba(28,22,32,0.22) 1.3px, transparent 1.7px);
}

/* violet field */
.field-wow{ background:var(--wow); color:var(--dim); border-top:none; }
.field-wow + .block, .field-wow + section{ border-top:none; }
.field-wow .muted{ color:rgba(28,22,32,0.86); }
.field-wow .rows, .field-wow .row{ border-color:rgba(28,22,32,0.28); }
.field-wow .text-link{ color:var(--dim); border-color:rgba(28,22,32,0.4); }
.field-wow .text-link:hover{ color:var(--dim); border-color:var(--dim); }
.field-wow .glyph{ color:var(--dim); }
.field-wow ::selection{ background:var(--dim); color:var(--wow); }
.field-wow .headline{ font-size:clamp(2.5rem, 6vw, 5rem); letter-spacing:-0.04em; }
.field-wow .lede{ color:var(--dim); }

/* lime field */
.field-flash{ background:var(--flash); color:var(--dim); border-top:none; }
.field-flash + .block, .field-flash + section{ border-top:none; }
.field-flash .lede, .field-flash .headline{ color:var(--dim); }
.field-flash .source-note{ color:rgba(28,22,32,0.8); }
.field-flash .headline{ font-size:clamp(2.5rem, 6vw, 5rem); letter-spacing:-0.04em; }
.field-flash ::selection{ background:var(--dim); color:var(--flash); }

/* the focus ring takes the right colour for each surface */
.surface-light, .band-light, .field-wow, .field-flash, .flash-field, .market-card{ --focus:var(--dim); }

/* =========================================================
   Home: hero
   ========================================================= */
.hero{
  position:relative; overflow:hidden;
  min-height:min(92svh, 920px);
  display:flex; align-items:flex-end;
  padding:var(--sp-9) 0 var(--sp-8);
  border-bottom:1px solid var(--border-dark);
}
/* the network is the stage: bigger than the page, faded under the headline.
   The map is placed by its hub (54.17% across the drawing): it bleeds off the right edge,
   but never further left than just past the headline's first line, so the hub stays clear of the type */
.hero-map{
  --map-w:min(108vw, 1640px);
  --wrap-left:max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  --hub-x:max(calc(116vw - 0.4583 * var(--map-w)), calc(var(--wrap-left) + 7.5 * clamp(3.25rem, 9vw, 6rem) + 144px));
  position:absolute; z-index:0;
  top:50%; left:calc(var(--hub-x) - 0.5417 * var(--map-w));
  width:var(--map-w); height:auto; aspect-ratio:2 / 1;
  transform:translateY(-54%);
  pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 36%); mask-image:linear-gradient(90deg, transparent 0%, #000 36%);
}
.hero-map .nm-land{ fill:rgba(232,238,236,0.36); }
.hero-map .nm-ocean{ fill:rgba(232,238,236,0.06); }
.hero-map .nm-link{ stroke:rgba(179,132,240,0.55); stroke-width:1.2; }
.hero-map .nm-pulse{ fill:var(--flash); opacity:1; }
.hero-map .nm-hub-core{ fill:var(--flash); r:10px; }
.hero-map .nm-hub-ring{ stroke:var(--flash); stroke-width:1.6; }
.hero-copy{ position:relative; z-index:1; width:100%; }
.hero-title{ max-width:11ch; font-size:clamp(3.25rem, 9vw, 6rem); }
.hero .lede{ margin-top:var(--sp-6); max-width:30em; }
/* phones: the map sits behind the top of the opening, centred on the hub, fading under the headline */
@media (max-width:760px){
  .hero{ display:block; min-height:0; padding-top:clamp(180px, 54vw, 320px); }
  .hero-map{
    top:-10vw; left:calc(50vw - 0.5417 * 230vw); right:auto;
    width:230vw; max-width:none; margin:0; transform:none;
    -webkit-mask-image:linear-gradient(180deg, #000 38%, transparent 66%); mask-image:linear-gradient(180deg, #000 38%, transparent 66%);
  }
}

/* =========================================================
   Doors: the two starting points (home), and the closing panel on each section page
   ========================================================= */
.doors{ display:grid; grid-template-columns:1fr 1fr; }
.door{
  position:relative; display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start;
  min-height:clamp(380px, 46vw, 560px);
  padding:calc(var(--sp-7) + clamp(120px, 16vw, 200px) + var(--sp-5)) var(--gutter) var(--sp-9);
  overflow:hidden;
  text-decoration:none; color:var(--mute);
  transition:background .35s var(--ease-out), color .35s var(--ease-out);
}
.door-light{ background:var(--mute); color:var(--dim); }
.door-dark{ background:var(--dim-sunken); color:var(--mute); }
.door .glyph{
  position:absolute; top:var(--sp-6); right:var(--gutter);
  width:clamp(180px, 15vw, 240px); height:auto;
  transition:transform .6s var(--ease-out);
}
.door-body{ position:relative; max-width:30em; padding-right:72px; }
.door p{ max-width:28em; transition:color .35s var(--ease-out); }
.door .for{ font-size:0.9375rem; font-weight:600; color:inherit; opacity:0.7; margin-bottom:var(--sp-3); }
.door .door-name{ font-size:clamp(2.75rem, 6.4vw, 5.5rem); font-weight:600; line-height:0.95; letter-spacing:-0.04em; }
.door .door-desc{ margin-top:var(--sp-5); font-size:1.0625rem; color:inherit; opacity:0.75; max-width:24em; }
.door .door-arrow{ position:absolute; right:var(--gutter); bottom:var(--sp-7); width:56px; height:56px; transition:transform .35s var(--ease-out); }
.door:focus-visible{ outline:2px solid var(--dim); outline-offset:-8px; }
.door:hover, .door:focus-visible{ background:var(--flash); color:var(--dim); }
.door:hover .for, .door:focus-visible .for{ color:var(--dim); }
.door:hover p, .door:focus-visible p{ color:inherit; }
.door:hover .door-arrow, .door:focus-visible .door-arrow{ transform:translateX(8px); }
.door:hover .glyph, .door:focus-visible .glyph{ transform:rotate(-8deg) scale(1.06); }
@media (max-width:760px){
  .doors{ grid-template-columns:1fr; }
  .door .door-arrow{ bottom:var(--sp-6); width:40px; height:40px; }
}

/* closing panel: one full-width door, its text on the page grid */
.doors-end{ grid-template-columns:1fr; }
.doors-end .door{ min-height:clamp(320px, 34vw, 460px); padding-left:max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
.doors-end .door-name{ font-size:clamp(2.5rem, 5.6vw, 5rem); }
.doors-end .door-body{ max-width:52em; }
.doors-end .door .glyph{ right:max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }

/* one network drawn twice. Bittensor shows the whole network;
   The Company shows the same network faintly, with TAOAI as one participant inside it */
.glyph-net .n-link{ fill:none; stroke:var(--wow); stroke-width:1.5; stroke-opacity:0.8; }
.glyph-net .n-chord{ stroke-opacity:0.35; }
.glyph-net .n-tether{ fill:none; stroke:var(--flash); stroke-width:1.25; stroke-opacity:0.55; }
.glyph-net .n-sat-line{ fill:none; stroke:currentColor; stroke-width:1; stroke-opacity:0.35; }
.glyph-net .n-sat{ fill:currentColor; fill-opacity:0.6; }
.glyph-net .n-node{ fill:currentColor; }
.glyph-net .n-hub{ fill:var(--flash); }
.glyph-net .n-faint{ fill:none; stroke:currentColor; stroke-width:1.25; stroke-opacity:0.22; }
.glyph-net .n-ghost{ fill:currentColor; fill-opacity:0.3; }
.glyph-net .n-hub-ring{ fill:none; stroke:currentColor; stroke-width:1.5; stroke-opacity:0.45; }
.glyph-net .n-halo{ fill:var(--wow); fill-opacity:0.75; mix-blend-mode:multiply; }
.glyph-net .n-ours-link{ fill:none; stroke:currentColor; stroke-width:2.25; stroke-linecap:round; }
.glyph-net .n-ours{ fill:currentColor; }
.door:hover .glyph-net .n-link, .door:focus-visible .glyph-net .n-link{ stroke:var(--dim); }
.door:hover .glyph-net .n-tether, .door:focus-visible .glyph-net .n-tether{ stroke:var(--dim); }
.door:hover .glyph-net .n-hub, .door:focus-visible .glyph-net .n-hub{ fill:var(--dim); }
.door:hover .glyph-net .n-halo, .door:focus-visible .glyph-net .n-halo{ fill-opacity:0.5; }
/* the drawing sits above the heading until the panels are wide enough to hold both side by side */
@media (max-width:1399px){
  .door:has(.glyph-net){ min-height:0; padding-top:var(--sp-6); }
  .door .glyph-net{ position:relative; top:auto; right:auto; width:clamp(120px, 14vw, 160px); align-self:flex-end; margin-bottom:var(--sp-6); }
}
/* closing panels: the drawing sits large and centred on the right, clear of the arrow */
@media (min-width:1280px){
  .doors-end .door:has(.glyph-net){ min-height:clamp(320px, 34vw, 460px); padding-top:var(--sp-8); }
  .doors-end .door .glyph-net{
    --gs:clamp(200px, 22vw, 320px);
    position:absolute; width:var(--gs); top:calc(50% - var(--gs) / 2);
    right:calc(max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))) + 96px);
    margin:0; align-self:auto;
  }
}
/* the closing panel to The Company sits under the lime growth field, and lime means Bittensor:
   it lights up in the Company's own light surface instead */
.door-to-company:hover, .door-to-company:focus-visible{ background:var(--mute); color:var(--dim); }
.door-to-company:hover .glyph-net .n-halo, .door-to-company:focus-visible .glyph-net .n-halo{ mix-blend-mode:multiply; fill-opacity:0.75; }

/* the Company opener carries the same drawing as its home panel, on the dark surface */
.art-dark.glyph-net .n-halo{ mix-blend-mode:normal; fill-opacity:0.6; }
.art-dark.glyph-net .n-faint{ stroke-opacity:0.28; }
.art-dark.glyph-net .n-ghost{ fill-opacity:0.4; }
/* the opener drawing is cropped to its content; stacked, it shares the heading's left edge */
.opener-art.glyph-net{ max-width:380px; }
@media (max-width:860px){
  .opener:has(.glyph-net){ padding-top:var(--sp-7); }
  .opener-grid:has(.glyph-net){ row-gap:var(--sp-6); }
  .opener-art.glyph-net{ justify-self:start; width:min(62vw, 300px); max-width:none; margin:0; }
}

/* =========================================================
   Company: lines of business
   ========================================================= */
/* each mark is cropped to its drawing, so all three share the heading's left edge and one height */
.pillar-glyph{ display:block; height:72px; width:auto; color:var(--mute); margin-bottom:var(--sp-5); overflow:visible; }
/* the TAOAI node (solid, on a Mute halo) doing each line's job */
.pillar-glyph .pg-line{ fill:none; stroke:currentColor; stroke-width:3.5; stroke-linecap:round; }
.pillar-glyph .pg-faint{ fill:none; stroke:currentColor; stroke-width:2.25; stroke-opacity:0.45; stroke-linecap:round; }
.pillar-glyph .pg-node{ fill:currentColor; }
.pillar-glyph .pg-sat{ fill:currentColor; fill-opacity:0.6; }
.pillar-glyph .pg-halo{ fill:var(--mute); fill-opacity:0.9; }
/* the TAO symbol as Bittensor draws it (bittensor.com header mark) */
.pillar-glyph .pg-tau{ fill:currentColor; stroke:none; }
.pillar-glyph .pg-base{ fill:currentColor; fill-opacity:0.45; }
/* plain wrapping: "pretty" left short, ragged lines in these narrow columns */
#model .rows p{ text-wrap:wrap; }
/* the text sits centred against the mark-and-heading block beside it */
@media (min-width:641px){ #model .row{ align-items:center; } }

/* =========================================================
   Company: ecosystem infrastructure (the audit comparison and the validation flow)
   ========================================================= */
.infra .infra-title{ font-size:clamp(44px, 7vw, 96px); letter-spacing:-0.045em; }
.infra .lede{ margin-top:var(--sp-5); color:var(--dim); }
.audit-compare{ display:grid; grid-template-columns:minmax(0,20fr) minmax(0,32fr); gap:var(--sp-8); margin-top:var(--sp-8); align-items:end; }
.ac-group figcaption{ display:flex; flex-direction:column; gap:var(--sp-2); margin-bottom:var(--sp-5); }
.ac-num{ font-size:clamp(3.5rem, 7vw, 6rem); font-weight:700; line-height:0.85; letter-spacing:-0.05em; }
.ac-group:not(.ac-group-bt) .ac-num{ color:var(--text-dim-on-light); }
.ac-what{ font-size:1rem; color:var(--text-dim-on-light); max-width:22em; }
.ac-grid{ display:grid; gap:5px; }
.ac-grid-ftse{ grid-template-columns:repeat(20, 1fr); }
.ac-grid-bt{ grid-template-columns:repeat(32, 1fr); }
.ac-grid span{ aspect-ratio:1; border-radius:2px; border:1.5px solid rgba(28,22,32,0.35); }
.ac-grid-bt span{ border-color:var(--dim); }
.ac-grid-bt span.on{ background:var(--dim); }
.infra-thesis-row{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-6); align-items:end; margin-top:var(--sp-8); padding-top:var(--sp-6); border-top:1px solid var(--border-light); }
.infra-thesis{ font-size:clamp(1.5rem, 2.6vw, 2.25rem); font-weight:600; line-height:1.25; letter-spacing:-0.025em; max-width:26em; }
@media (max-width:860px){ .audit-compare{ grid-template-columns:1fr; gap:var(--sp-7); } }
@media (max-width:520px){
  .ac-grid{ gap:3px; }
  .ac-grid-ftse{ grid-template-columns:repeat(10, 1fr); }
  .ac-grid-bt{ grid-template-columns:repeat(16, 1fr); }
}

/* validation flow: one drawing per step, left-aligned with its caption, joined across the gaps */
.vflow-figure{ margin-top:var(--sp-9); }
.vflow-steps{ list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--sp-8); }
.vflow-step{ position:relative; }
.vflow-steps h3{ font-size:1.25rem; font-weight:600; letter-spacing:-0.01em; }
.vflow-steps p{ margin-top:var(--sp-2); color:var(--text-dim-on-light); }
.vflow-steps .vflow-end p{ color:var(--dim); font-weight:600; font-size:1.125rem; }
.vf-mark{ display:block; height:180px; width:auto; max-width:100%; margin-bottom:var(--sp-6); overflow:visible; }
.vf-mark .vf-rack{ fill:var(--mute); stroke:var(--dim); stroke-width:2; }
.vf-mark .vf-led{ fill:var(--dim); }
.vf-mark .vf-slot{ stroke:rgba(28,22,32,0.35); stroke-width:2; stroke-dasharray:6 6; vector-effect:non-scaling-stroke; }
.vf-mark .vf-score{ stroke:rgba(28,22,32,0.22); stroke-width:1.5; vector-effect:non-scaling-stroke; }
.vf-mark .vf-score.is-best{ stroke:var(--dim); stroke-width:3; }
.vf-mark .vf-miner{ fill:var(--mute); stroke:rgba(28,22,32,0.45); stroke-width:2; }
.vf-mark .vf-miner.is-best{ fill:var(--dim); stroke:var(--dim); }
.vf-mark .vf-validator{ fill:var(--dim); }
.vf-mark .vf-coin{ fill:var(--flash); stroke:var(--dim); stroke-width:3; }
.vf-mark .vf-tao{ fill:var(--dim); }
.vflow-step:not(.vflow-end)::after{
  content:""; position:absolute; top:90px; height:2px; background:var(--dim);
  left:calc(240px + var(--sp-4)); right:calc(-1 * var(--sp-8) + var(--sp-3));
}
.vflow-step:nth-child(2)::after{ height:3px; top:89px; }
.vflow-step:not(.vflow-end)::before{
  content:""; position:absolute; top:84px; right:calc(-1 * var(--sp-8) + var(--sp-3)); width:12px; height:12px;
  border-top:3px solid var(--dim); border-right:3px solid var(--dim); transform:rotate(45deg);
}
@media (max-width:1100px){
  .vf-mark{ height:140px; }
  .vflow-step:not(.vflow-end)::after{ top:70px; left:calc(187px + var(--sp-4)); }
  .vflow-step:nth-child(2)::after{ top:69px; }
  .vflow-step:not(.vflow-end)::before{ top:64px; }
}
@media (max-width:860px){
  .vflow-steps{ grid-template-columns:1fr; }
  .vflow-step::after, .vflow-step::before{ display:none; }
  .vf-mark{ height:120px; margin-bottom:var(--sp-4); }
}

/* =========================================================
   Bittensor page colour logic
   violet = the world Bittensor responds to (market, incumbents, voices)
   light  = the open alternative (Bittensor's side, the distributed model)
   lime   = Bittensor's own numbers (21M, 128, wallet growth, the network hub)
   dark   = default
   ========================================================= */

/* opener: the supply figure beside the headline */
.opener-grid-supply .display{ font-size:clamp(2.75rem, 5.6vw, 5rem); }
.supply{ justify-self:end; text-align:right; }
.supply-fig{ display:block; font-size:clamp(6.875rem, 15vw, 14.375rem); font-weight:700; line-height:0.8; letter-spacing:-0.06em; color:var(--flash); }
.supply-cap{ display:block; margin-top:var(--sp-4); font-size:1.0625rem; color:var(--text-dim-on-dark); }
@media (max-width:860px){
  .opener-grid-supply .display{ font-size:clamp(2.75rem, 11vw, 4rem); }
  .supply{ justify-self:start; text-align:left; }
}

/* ---------- market: heading across the top, copy and card in a row, chart across the full width ---------- */
.market-title{ max-width:18ch; font-size:clamp(2.25rem, 5.4vw, 4.75rem); letter-spacing:-0.04em; }
.market-intro{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--sp-8); align-items:end; margin-top:var(--sp-6); }
.market-intro .lede{ margin-top:0; max-width:30em; }
.market-card{
  display:flex; flex-wrap:nowrap; align-items:center; gap:var(--sp-4);
  width:fit-content; max-width:100%; padding:var(--sp-6);
  background:var(--wow); color:var(--dim); border-radius:var(--r-lg);
}
.mc-col{ display:flex; flex-direction:column; gap:var(--sp-2); }
.mc-label{ font-size:0.75rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:rgba(28,22,32,0.86); }
.mc-fig{ font-size:clamp(2.25rem, 3.6vw, 3.5rem); font-weight:700; line-height:0.9; letter-spacing:-0.045em; white-space:nowrap; }
.mc-fig-wow{ font-size:clamp(2.75rem, 4.6vw, 4.5rem); }
.mc-arrow{ width:32px; height:32px; align-self:flex-end; margin-bottom:0.5em; }
.market-chart{ margin-top:var(--sp-8); }
.market-chart > .label{ display:block; margin-bottom:var(--sp-5); color:var(--text-dim-on-dark); }
#market .source-note{ margin-top:var(--sp-5); }
@media (max-width:860px){ .market-intro{ grid-template-columns:1fr; gap:var(--sp-6); } }

.adopt-chart{ width:100%; height:auto; overflow:visible; }
.adopt-chart .ac-goal{ stroke:var(--border-dark); stroke-dasharray:4 6; }
.adopt-chart .ac-base{ stroke:var(--border-dark); }
.adopt-chart .ac-goal-label{ font:600 16px 'Sora', sans-serif; fill:var(--text-dim-on-dark); letter-spacing:0.04em; }
.adopt-chart .ac-curve{ fill:none; stroke:rgba(232,238,236,0.42); stroke-width:2; }
.adopt-chart .ac-curve.is-ai{ stroke:var(--mute); stroke-width:4; }
.adopt-chart .ac-start{ fill:var(--dim); stroke:rgba(232,238,236,0.6); stroke-width:1.5; }
.adopt-chart .ac-start.is-ai{ fill:var(--mute); stroke:var(--mute); }
.adopt-chart .ac-end{ fill:var(--mute); }
.adopt-chart .ac-name{ font:600 20px 'Sora', sans-serif; fill:var(--text-dim-on-dark); }
.adopt-chart .ac-name.is-ai{ font-size:22px; }
.adopt-chart .ac-years{ font:600 30px 'Sora', sans-serif; fill:var(--text-dim-on-dark); letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.adopt-chart .ac-years.is-ai{ font-size:40px; font-weight:700; }
.adopt-chart .is-ai.ac-name, .adopt-chart .is-ai.ac-years{ fill:var(--mute); }
.chart-scroll:focus-visible{ outline-offset:4px; }

/* phones: bars replace the wide curve chart */
.adopt-bars{ display:none; }
@media (max-width:700px){
  .chart-scroll{ display:none; }
  .adopt-bars{ display:grid; gap:var(--sp-4); list-style:none; }
  .adopt-bars li{ display:grid; grid-template-columns:1fr auto; gap:var(--sp-2) var(--sp-3); align-items:baseline; }
  .ab-name{ font-size:0.9375rem; color:var(--text-dim-on-dark); }
  .ab-value{ font-size:1.25rem; font-weight:600; letter-spacing:-0.02em; color:var(--text-dim-on-dark); }
  .ab-track{ grid-column:1 / -1; height:12px; }
  .ab-bar{ display:block; height:100%; width:max(6px, calc(var(--share) * 100%)); border-radius:var(--r-sm); background:rgba(232,238,236,0.32); }
  .adopt-bars .is-ai .ab-name, .adopt-bars .is-ai .ab-value{ color:var(--mute); font-weight:700; }
  .adopt-bars .is-ai .ab-value{ font-size:1.75rem; }
  .adopt-bars .is-ai .ab-bar{ background:var(--mute); }
}

/* ---------- eras: a timeline on one rule, widening toward now ---------- */
.timeline{
  --bleed:calc((100vw - min(100vw, var(--max))) / 2 + var(--gutter));
  list-style:none; position:relative;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.6fr);
  margin-top:var(--sp-8);
}
.timeline::before{ content:""; position:absolute; left:0; right:calc(-1 * var(--bleed)); top:8px; height:1px; background:var(--border-dark); }
.tl-era{ position:relative; padding:var(--sp-8) var(--sp-6) 0 0; }
.tl-node{
  position:absolute; left:0; top:0; width:17px; height:17px; border-radius:50%;
  border:1px solid rgba(232,238,236,0.55); background:var(--dim);
}
.tl-mark{ display:block; height:64px; width:auto; margin-bottom:var(--sp-6); color:var(--mute); overflow:visible; }
.tl-mark line, .tl-mark circle, .tl-mark ellipse, .tl-mark rect{ fill:none; stroke:currentColor; stroke-width:1.5; vector-effect:non-scaling-stroke; stroke-opacity:0.55; }
.tl-mark .em{ stroke-opacity:1; stroke-width:2.5; }
.tl-mark .fill{ fill:currentColor; stroke:none; }
.tl-name{ font-size:clamp(1.75rem, 3vw, 2.5rem); font-weight:600; line-height:1; letter-spacing:-0.03em; }
.tl-who{ margin-top:var(--sp-4); }
.tl-who dt{ font-size:0.8125rem; color:var(--text-dim-on-dark); }
.tl-who dd{ margin-top:var(--sp-1); font-size:1.0625rem; font-weight:500; }
.tl-era:not(.is-now) .tl-name, .tl-era:not(.is-now) .tl-who dd{ color:var(--text-dim-on-dark); }
.tl-era:not(.is-now) .tl-mark{ color:var(--text-dim-on-dark); }
.tl-era.is-now{
  margin-right:calc(-1 * var(--bleed)); padding:var(--sp-8) var(--gutter) var(--sp-7) var(--sp-7);
  background:var(--dim-sunken); border-left:1px solid var(--border-dark);
}
.tl-era.is-now .tl-node{ left:-9px; width:19px; height:19px; background:var(--mute); border-color:var(--mute); }
.tl-era.is-now .tl-name{ font-size:clamp(3rem, 6vw, 5.5rem); letter-spacing:-0.045em; }
.tl-era.is-now .tl-mark{ height:88px; }
@media (max-width:860px){
  .timeline{ grid-template-columns:1fr; padding-left:var(--sp-7); }
  .timeline::before{ left:8px; right:auto; top:0; bottom:0; width:1px; height:auto; }
  .tl-era{ padding:0 0 var(--sp-8) 0; }
  .tl-node{ left:calc(-1 * var(--sp-7)); }
  .tl-era.is-now{ margin:0 calc(-1 * var(--gutter)) 0 calc(-1 * var(--sp-7) - var(--gutter)); padding:var(--sp-7) var(--gutter) var(--sp-7) calc(var(--sp-7) + var(--gutter)); border-left:none; }
  .tl-era.is-now .tl-node{ left:calc(var(--gutter) + 8px - 9px); top:var(--sp-7); }
  .tl-mark{ height:48px; margin-bottom:var(--sp-4); }
  .tl-era.is-now .tl-mark{ height:64px; }
}

/* centralised: a violet field, past eras in dark ink, AI as a solid dark block */
.centralised{ padding-bottom:0; overflow:hidden; }
.centralised .headline{ font-size:clamp(2.5rem, 6vw, 5.25rem); letter-spacing:-0.045em; max-width:16ch; }
.centralised .block-head .lede{ color:var(--dim); }
.centralised .timeline{ align-items:stretch; }
.centralised .timeline::before{ background:rgba(28,22,32,0.4); }
.centralised .tl-era{ padding-bottom:var(--sp-9); }
.centralised .tl-node{ background:var(--wow); border-color:var(--dim); }
.centralised .tl-era:not(.is-now) .tl-mark{ color:var(--dim); }
.centralised .tl-era:not(.is-now) .tl-name,
.centralised .tl-era:not(.is-now) .tl-who dd{ color:var(--dim); }
.centralised .tl-mark{ height:96px; }
.centralised .tl-name{ font-size:clamp(2.25rem, 4.4vw, 4rem); letter-spacing:-0.04em; }
/* past era names: never wider than their column */
.centralised .tl-era:not(.is-now) .tl-name{ font-size:clamp(1.875rem, 3.5vw, 3rem); white-space:nowrap; }
.centralised .tl-who dt{ color:rgba(28,22,32,0.86); }
.centralised .tl-who dd{ font-size:clamp(1.125rem, 1.6vw, 1.375rem); font-weight:600; }
.centralised .tl-era.is-now{
  background:var(--dim); color:var(--mute); border-left:none;
  padding:var(--sp-8) var(--gutter) var(--sp-9) var(--sp-7);
}
.centralised .tl-era.is-now .tl-node{ background:var(--mute); border-color:var(--mute); }
.centralised .tl-era.is-now .tl-mark{ color:var(--mute); height:128px; }
.centralised .tl-era.is-now .tl-name{ font-size:clamp(6rem, 13vw, 12.5rem); line-height:0.82; letter-spacing:-0.06em; color:var(--mute); }
.centralised .tl-era.is-now .tl-who dt{ color:var(--text-dim-on-dark); }
.centralised .tl-era.is-now .tl-who dd{ color:var(--mute); }
.centralised ::selection{ background:var(--dim); color:var(--wow); }
@media (max-width:860px){
  .centralised .tl-era{ padding-bottom:var(--sp-7); }
  .centralised .tl-mark{ height:64px; }
  .centralised .tl-era.is-now{ padding-bottom:var(--sp-8); }
  .centralised .tl-era.is-now .tl-mark{ height:88px; }
  .centralised .tl-era.is-now .tl-name{ font-size:clamp(5.5rem, 26vw, 8.75rem); }
}

/* ---------- light band: centralised vs distributed ---------- */
.dist-lede{ max-width:34em; }
.versus{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); margin-top:var(--sp-8); }
.versus-side .diagram{ width:100%; height:auto; max-width:480px; }
.versus-side figcaption{ margin-top:var(--sp-6); padding-top:var(--sp-5); border-top:1px solid var(--border-light); }
.versus-side figcaption p{ margin-top:var(--sp-3); font-size:clamp(1.125rem, 1.6vw, 1.3125rem); line-height:1.5; color:var(--text-dim-on-light); max-width:24em; }
.diagram .d-line{ stroke:rgba(28,22,32,0.28); stroke-width:1.2; }
.diagram .d-ink{ fill:var(--dim); }
.diagram .d-hollow{ fill:var(--mute); stroke:var(--dim); stroke-width:1.5; }
.diagram .d-wow{ fill:var(--wow); }
@media (max-width:760px){ .versus{ grid-template-columns:1fr; gap:var(--sp-7); } }

/* ---------- featured quotes: the two voices get a section of their own ---------- */
.voices{ background:var(--dim); border-top:none; padding:var(--sp-10) 0; }
.voice{ position:relative; max-width:min(100%, 880px); font-size:clamp(1.75rem, 3.6vw, 3.25rem); }
.voice + .voice{ margin-top:var(--sp-9); }
.voice-alt{ margin-left:auto; }
.voice-mark{
  position:absolute; left:-0.08em; top:-0.42em;
  font-size:4.2em; font-weight:700; line-height:1; color:var(--wow); pointer-events:none;
}
.voice blockquote{ position:relative; }
.voice blockquote p{ font-size:1em; font-weight:500; line-height:1.18; letter-spacing:-0.025em; text-indent:0; padding-top:0.9em; text-wrap:balance; }
.voice figcaption{ display:flex; align-items:baseline; gap:var(--sp-4); flex-wrap:wrap; margin-top:var(--sp-6); padding-top:var(--sp-4); border-top:1px solid var(--border-dark); font-size:1.0625rem; }
.voice-name{ font-size:clamp(1.125rem, 1.6vw, 1.375rem); font-weight:600; color:var(--mute); letter-spacing:-0.01em; }
.voice-role{ color:var(--text-dim-on-dark); }
.voices-note{ margin-top:var(--sp-8); }
@media (max-width:760px){
  .voices{ padding:var(--sp-9) 0; }
  .voice-alt{ margin-left:0; }
  .voice + .voice{ margin-top:var(--sp-8); }
}

/* ---------- 128 subnets: the lime field and its squares ---------- */
.flash-field{ background:var(--flash); color:var(--dim); }
.flash-field .wrap{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--sp-5) var(--sp-8); align-items:end;
  padding-top:var(--sp-9); padding-bottom:var(--sp-9);
}
.flash-field .big{
  font-size:clamp(7.5rem, 22vw, 17.5rem); font-weight:700; line-height:0.78; letter-spacing:-0.06em;
  font-variant-numeric:tabular-nums;
}
.flash-field h2{ font-size:clamp(1.625rem, 3vw, 2.5rem); font-weight:600; letter-spacing:-0.025em; line-height:1.1; }
.flash-field p{ margin-top:var(--sp-3); max-width:30em; color:rgba(28,22,32,0.8); }
.subnet-grid{
  grid-column:1 / -1; display:grid; grid-template-columns:repeat(32, 1fr); gap:6px;
  margin-top:var(--sp-7);
}
.subnet-grid span{ aspect-ratio:1; background:var(--dim); border-radius:var(--r-sm); }
@media (max-width:760px){
  .flash-field .wrap{ grid-template-columns:1fr; }
  .subnet-grid{ grid-template-columns:repeat(16, 1fr); gap:4px; }
}

/* ---------- big bang of subnets ---------- */
.bang{
  background:var(--dim-sunken);
  border-top:1px solid var(--border-dark);
  padding:var(--sp-9) 0 var(--sp-7);
}
.bang + .block{ border-top:1px solid var(--border-dark); }
.bang-head .lede{ margin-top:var(--sp-4); }
.bang-stage{ position:relative; height:clamp(520px, 62vw, 720px); margin-top:var(--sp-5); }
.bang-stage canvas{ position:absolute; inset:0; display:block; }
/* when the canvas is too narrow for its labels (subnet-bang.js sets .is-narrow), a category list replaces them */
.bang-legend{ display:none; flex-wrap:wrap; gap:var(--sp-2); list-style:none; margin:0 0 var(--sp-5); }
.bang-legend li{ padding:var(--sp-1) var(--sp-3); border:1px solid var(--border-dark); border-radius:var(--r-sm); font-size:0.8125rem; color:var(--mute); background:var(--dim); }
.bang.is-narrow .bang-legend{ display:flex; }
@media (max-width:760px){ .bang-stage{ height:760px; } }
/* phones: the burst is wider and shorter */
@media (max-width:600px){ .bang-stage{ height:440px; } }

/* ---------- network map (home hero and the workforce section) ---------- */
.map-fallback{ padding:var(--sp-5); color:var(--text-dim-on-dark); }
.nm-land{ fill:rgba(232,238,236,0.34); }
.nm-ocean{ fill:rgba(232,238,236,0.05); }
.nm-link{ fill:none; stroke:rgba(179,132,240,0.32); stroke-width:1.1; transition:stroke .25s, stroke-width .25s, opacity .25s; }
.nm-link.is-drawing{ stroke-dasharray:1; stroke-dashoffset:1; }
.is-live .nm-link.is-drawing{ animation:nm-draw 1.1s var(--ease-out) forwards; }
@keyframes nm-draw{ to{ stroke-dashoffset:0; } }
.nm-pulse{ fill:var(--mute); opacity:0.7; transition:opacity .25s; }
/* illustrative only: nodes take no hover or focus */
.nm-node{ outline:none; cursor:default; }
.nm-halo{ fill:var(--flash); opacity:0; transition:opacity .25s; }
.nm-core{ fill:var(--mute); stroke:var(--dim-sunken); stroke-width:1; transition:fill .2s; }
.nm-label{ font-family:'Sora', sans-serif; font-size:11px; fill:var(--text-dim-on-dark); pointer-events:none; transition:fill .2s, opacity .2s; }
.nm-hub-core{ fill:var(--wow); stroke:var(--dim-sunken); stroke-width:1.2; }
.nm-hub-label{ font-family:'Sora', sans-serif; font-size:11px; font-weight:600; letter-spacing:0.08em; fill:var(--wow); pointer-events:none; }
.nm-hub-ring{ fill:none; stroke:var(--wow); stroke-width:1.4; opacity:0; transform-box:fill-box; transform-origin:center; animation:nm-ring 3s var(--ease-out) infinite; }
.nm-hub-ring-2{ animation-delay:1.5s; }
@keyframes nm-ring{ 0%{ transform:scale(0.6); opacity:0.55; } 100%{ transform:scale(2.4); opacity:0; } }
.nm-ping{ fill:none; stroke:var(--flash); stroke-width:1.5; opacity:0; transform-box:fill-box; transform-origin:center; }
.is-live .nm-ping{ animation:nm-ping 3s var(--ease-out) infinite backwards; }
@keyframes nm-ping{ 0%{ transform:scale(0.5); opacity:0.9; } 35%{ transform:scale(2.6); opacity:0; } 100%{ transform:scale(2.6); opacity:0; } }
.is-paused .nm-ping, .is-paused .nm-hub-ring{ animation-play-state:paused; }
@media (max-width:640px){
  .nm-label{ display:none; }
  .nm-core{ r:7px; }
  .nm-halo{ r:24px; }
  .nm-hub-core{ r:11px; }
  .nm-hub-label{ font-size:22px; }
}
@media (prefers-reduced-motion: reduce){
  .nm-link.is-drawing{ animation:none; stroke-dashoffset:0; }
}

/* workforce: the map is the section, notes pinned to it */
.network-band{ background:var(--dim); border-top:none; }
.workforce{ padding-bottom:var(--sp-7); }
.wf-head{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:var(--sp-5) var(--sp-8); align-items:end; }
.wf-head .lede{ margin:0; max-width:30em; }
.wf-map{ margin-top:var(--sp-7); }
.wf-stage{ position:relative; }
#network-map, .wf-overlay{ display:block; width:100%; height:auto; aspect-ratio:1000 / 380; }
.wf-overlay{ position:absolute; inset:0; pointer-events:none; overflow:visible; }
.wf-leader{ stroke:var(--mute); stroke-width:1; stroke-opacity:0.6; vector-effect:non-scaling-stroke; }
.wf-anchor{ fill:none; stroke:var(--mute); stroke-width:1.2; stroke-opacity:0.8; vector-effect:non-scaling-stroke; }
.wf-notes{ list-style:none; }
.wf-note{
  position:absolute; left:var(--x); top:var(--y); width:min(22vw, 260px);
  padding:var(--sp-3) var(--sp-4); background:rgba(20,15,23,0.92);
  border:1px solid var(--border-dark); border-radius:var(--r-md);
}
.wf-note h3{ font-size:1rem; font-weight:600; letter-spacing:-0.01em; color:var(--mute); }
.wf-note p{ margin-top:var(--sp-1); font-size:0.875rem; line-height:1.45; color:var(--text-dim-on-dark); }
.wf-map figcaption{ margin-top:var(--sp-4); font-size:0.8125rem; color:var(--text-dim-on-dark); }
/* same sequence as the home hero, toned down, keeps the SUBNET tag */
.network-band #network-map .nm-link{ stroke:rgba(179,132,240,0.4); stroke-width:1; }
.network-band #network-map .nm-pulse{ fill:var(--flash); opacity:0.75; }
.network-band #network-map .nm-ping{ stroke-width:1; }
.network-band #network-map.is-live .nm-ping{ animation-name:nm-ping-soft; }
@keyframes nm-ping-soft{ 0%{ transform:scale(0.5); opacity:0.5; } 30%{ transform:scale(2); opacity:0; } 100%{ transform:scale(2); opacity:0; } }
.network-band #network-map .nm-hub-core{ fill:var(--flash); }
.network-band #network-map .nm-hub-ring{ stroke:var(--flash); stroke-width:1.2; }
.network-band #network-map .nm-hub-label{ fill:var(--flash); }
/* notes are pinned to the map only when it is wide enough to hold them; otherwise a row of notes under it */
@media (max-width:1419px){
  .wf-overlay{ display:none; }
  .wf-notes{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--sp-4); padding:var(--sp-5) var(--gutter) 0; max-width:var(--max); margin:0 auto; }
  .wf-note{ position:static; width:auto; }
}
@media (max-width:860px){
  .wf-head{ grid-template-columns:1fr; }
  .wf-notes{ grid-template-columns:1fr; gap:var(--sp-3); }
}

/* ---------- user growth: line chart on the lime field ---------- */
.growth-figure{ margin-top:var(--sp-7); }
.growth-chart{ width:100%; height:auto; overflow:visible; }
.growth-chart .gc-base{ stroke:rgba(28,22,32,0.45); stroke-width:1.5; }
.growth-chart .gc-grid{ stroke:rgba(28,22,32,0.2); stroke-dasharray:4 6; }
.growth-chart .gc-area{ fill:rgba(28,22,32,0.08); }
.growth-chart .gc-line{ fill:none; stroke:var(--dim); stroke-width:4; stroke-linejoin:round; stroke-linecap:round; }
.growth-chart .gc-dot{ fill:var(--flash); stroke:var(--dim); stroke-width:3; }
.growth-chart .gc-dot-end{ fill:var(--dim); }
.growth-chart .gc-fig{ font:700 34px 'Sora', sans-serif; fill:var(--dim); letter-spacing:-0.03em; font-variant-numeric:tabular-nums; }
.growth-chart .gc-fig-end{ font-size:72px; letter-spacing:-0.05em; }
.growth-chart .gc-axis{ font:500 18px 'Sora', sans-serif; fill:rgba(28,22,32,0.8); }
@media (max-width:640px){
  .growth-chart .gc-fig{ font-size:56px; }
  .growth-chart .gc-fig-end{ font-size:96px; }
  .growth-chart .gc-axis{ font-size:34px; }
}

/* =========================================================
   Legal (light surface)
   ========================================================= */
.legal{ padding:var(--sp-9) 0; }
.legal .wrap{ max-width:900px; }
.legal-head{ padding-bottom:var(--sp-7); border-bottom:1px solid var(--border-light); }
.legal-head .lede{ margin-top:var(--sp-4); color:var(--dim); }
.legal-draft{
  margin-top:var(--sp-5); padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--border-light); border-radius:var(--r-md);
  font-size:0.875rem; color:var(--text-dim-on-light);
}
.legal-sec{
  display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:var(--sp-4) var(--sp-7);
  padding:var(--sp-7) 0; border-bottom:1px solid var(--border-light);
}
.legal-sec .title{ font-size:clamp(1.25rem, 2vw, 1.5rem); }
.legal .prose p{ max-width:none; }
@media (max-width:760px){ .legal-sec{ grid-template-columns:1fr; } }

/* =========================================================
   Motion (armed by assets/motion.js adding .motion to <html>;
   content is fully visible without it). Kept last so these start
   states win over the resting styles above.
   ========================================================= */
.motion .words .w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:0.08em; margin-bottom:-0.08em; }
.motion .words .wi{ display:inline-block; transform:translateY(105%); transition:transform .9s var(--ease-out); transition-delay:calc(var(--i) * 60ms); }
.motion .words.in .wi{ transform:none; }

.motion .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay:calc(var(--d, 0) * 90ms + 120ms); }
.motion .reveal.in{ opacity:1; transform:none; }

.motion .subnet-grid span{ opacity:0; transform:scale(0.2) rotate(45deg); transition:opacity .4s var(--ease-out), transform .5s var(--ease-out); transition-delay:calc(var(--i) * 9ms); }
.motion .subnet-grid.in span{ opacity:1; transform:none; }

.motion .diagram line, .motion .glyph path, .motion .opener-art path{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.4s var(--ease-out) .2s; }
.motion .diagram.in line, .motion .glyph.in path, .motion .opener-art.in path{ stroke-dashoffset:0; }
.motion .diagram circle, .motion .diagram rect{ transform-box:fill-box; transform-origin:center; transform:scale(0); transition:transform .6s var(--ease-out) .5s; }
.motion .diagram.in circle, .motion .diagram.in rect{ transform:none; }

.motion .timeline::before{ transform:scaleX(0); transform-origin:left; transition:transform 1.4s var(--ease-out); }
.motion .timeline.in::before{ transform:none; }
/* non-scaling strokes measure dashes on screen, so a dash of 1 only covers 1/scale of each line once a mark is drawn larger than its viewBox; 4 covers marks up to 4x */
.motion .tl-mark line, .motion .tl-mark circle, .motion .tl-mark ellipse{ stroke-dasharray:4; stroke-dashoffset:4; transition:stroke-dashoffset 1.3s var(--ease-out); }
.motion .tl-era.in .tl-mark line, .motion .tl-era.in .tl-mark circle, .motion .tl-era.in .tl-mark ellipse{ stroke-dashoffset:0; }
.motion .tl-era:nth-child(2) .tl-mark *{ transition-delay:.3s; }
.motion .tl-era:nth-child(3) .tl-mark *{ transition-delay:.6s; }
@media (max-width:860px){ .motion .timeline::before{ transform:scaleY(0); transform-origin:top; } }

.motion .adopt-chart path{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.6s var(--ease-out) .2s; }
.motion .adopt-chart.in path{ stroke-dashoffset:0; }
.motion .adopt-chart .ac-curve.is-ai{ transition-delay:.9s; }
.motion .adopt-chart .ac-goal{ stroke-dasharray:4 6; stroke-dashoffset:0; }
@media (max-width:700px){
  .motion .adopt-bars .ab-bar{ transform:scaleX(0); transform-origin:left; transition:transform 1.2s var(--ease-out); }
  .motion .adopt-bars.in .ab-bar{ transform:none; }
  .motion .adopt-bars.in li:nth-child(4) .ab-bar{ transition-delay:.5s; }
}

.motion .voice-mark{ opacity:0; transform:translateY(0.15em) scale(0.8); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.motion .voice.in .voice-mark{ opacity:1; transform:none; }

.motion .growth-chart .gc-line{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.8s var(--ease-out) .2s; }
.motion .growth-chart.in .gc-line{ stroke-dashoffset:0; }
.motion .growth-chart .gc-area{ opacity:0; transition:opacity 1s var(--ease-out) 1.2s; }
.motion .growth-chart.in .gc-area{ opacity:1; }
.motion .growth-chart .gc-fig{ opacity:0; transition:opacity .6s var(--ease-out) 1.4s; }
.motion .growth-chart.in .gc-fig{ opacity:1; }
.motion .growth-chart .gc-grid{ stroke-dasharray:4 6; stroke-dashoffset:0; }

.motion .ac-grid span{ opacity:0; transform:scale(0.3); transition:opacity .35s var(--ease-out), transform .45s var(--ease-out); transition-delay:calc(var(--i, 0) * 6ms); }
.motion .ac-grid.in span{ opacity:1; transform:none; }