:root{
  /* — HERO WARM GRADIENT (clay/sienna/gold sunset) — */
  --navy:        #3A2517;       /* warm brown (lightened from near-black) */
  --navy-2:      #4A3324;       /* lighter brown */
  --cobalt:      #B95B36;       /* clay primary (token name kept) */
  --cobalt-soft: #D27A52;       /* clay light */
  --cyan:        #D7B470;       /* gold light (token name kept) */
  --teal-glow:   #C49849;       /* gold */

  /* — WARM AURORA PALETTE (cream paper, clay/gold accents) — */
  --paper:       #F2E9D8;       /* warm cream body bg */
  --paper-2:     #EADFC8;       /* deeper cream tint, header/pill bg */
  --paper-3:     #FAF4E6;       /* warm white card bg */
  --ink:         #191512;       /* deep warm ink */
  --ink-2:       #3C342D;       /* mid warm ink */
  --ink-3:       #6E6155;       /* warm gray */
  --ink-4:       #968779;       /* light warm gray */
  --line:        rgba(25,21,18,.10);
  --line-2:      rgba(25,21,18,.05);
  --aurora-glow: rgba(196,152,73,.18);   /* gold aurora hint */
  --aurora-cobalt: rgba(185,91,54,.12);  /* clay aurora hint */

  --trading:     #C44D3D;       /* trading red/coral */
  --trading-bg:  #F4D9D2;
  --hobby:       #8B5FBF;       /* muted purple */
  --hobby-bg:    #E2D5EE;
  --general:     #A87C5A;       /* warm tan */
  --general-bg:  #ECDFCD;
  --sage:        #5DA362;       /* live/in-progress green */
  --sage-bg:     #DCE3CC;
  --amber:       #D88A3C;       /* awaiting orange */
  --amber-bg:    #F2DCC0;
  --gold:        #E0A33A;       /* token amber */
  --idle:        #7A7367;

  --blue:        #B95B36;       /* primary CTA = clay (token name kept) */
  --blue-soft:   #D27A52;       /* clay light hover */

  /* — DARK PRODUCT PALETTE (warm tobacco/umber to match cream paper) — */
  --dk-bg:       #3D2D1F;
  --dk-bg-2:     #4A3724;
  --dk-surface:  #5A452F;
  --dk-border:   #6E5440;
  --dk-fg:       #E8DCC4;
  --dk-fg-2:     #A89A82;
  --dk-fg-3:     #6E6155;

  --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --serif: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif-it: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sans:  'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0; overflow-x:hidden}
html{scroll-behavior:smooth; background:var(--paper)}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"calt","ss02","cv02";
}
a{color:inherit; text-decoration:none}
::selection{background:var(--blue); color:#fff}

.wrap{max-width:1280px; margin:0 auto; padding:0 28px; position:relative; z-index:1}
.it{font-family:var(--serif-it); font-style:italic; font-weight:400; letter-spacing:-.005em}

@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes blink{50%{opacity:0}}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ================================================================
   HERO — CLAY/SIENNA/GOLD SUNSET GRADIENT
   ================================================================ */
.hero-shell{
  position:relative;
  min-height:calc(100vh - 200px);
  background:
    radial-gradient(900px 700px at 100% 50%, rgba(196,152,73,.32), transparent 58%),
    radial-gradient(1000px 700px at 85% 88%, rgba(185,91,54,.24), transparent 62%),
    radial-gradient(800px 600px at 0% 22%, rgba(215,180,112,.13), transparent 60%),
    linear-gradient(180deg, #3E2A1B 0%, #4A3324 26%, #5E4631 52%, #886C4A 78%, #BFA47C 100%);
  overflow:hidden;
  isolation:isolate;
  color:#fff;
}
.hero-shell::before{
  /* very subtle grid */
  content:""; 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: 64px 64px;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 80%);
}
.hero-shell::after{
  /* grain */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  opacity:.4;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:3px 3px;
  mix-blend-mode:overlay;
}

/* status ticker */
.statusbar{
  background:rgba(0,0,0,.3);
  border-bottom:1px solid rgba(255,255,255,.08);
  font-family:var(--mono); font-size:11px;
  color:rgba(255,255,255,.4); letter-spacing:.05em;
  overflow:hidden; height:30px;
  display:flex; align-items:center;
  position:relative; z-index:5;
  backdrop-filter:blur(10px);
}
.statusbar .scroll{
  display:flex; gap:48px; white-space:nowrap;
  animation: ticker 60s linear infinite;
  padding-left:100%;
}
.statusbar .scroll span b{color:#fff; font-weight:700}
.statusbar .scroll span em{color:#D7B470; font-style:normal}
.statusbar .scroll span i{color:#E0A33A; font-style:normal}

/* nav */
nav.top{position:relative; z-index:10; padding:18px 0}
nav.top .row{display:flex; align-items:center; gap:32px}
.brand{
  display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-weight:500;
  font-size:22px; letter-spacing:.04em;
  color:#fff;
}
.brand .sigil{
  width:34px; height:34px;
  filter:drop-shadow(0 0 14px rgba(196,152,73,.6));
}
.brand b{font-weight:600}
.brand .ver{
  color:rgba(255,255,255,.55); font-size:11px;
  padding:2px 7px; border:1px solid rgba(255,255,255,.2);
  border-radius:2px; margin-left:4px;
  white-space:nowrap;
}
/* logo hover popover — the name story */
.brand-wrap{position:relative; display:inline-flex}
.brand-info{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; margin-left:2px;
  font-family:var(--mono); font-size:9.5px; font-weight:700; line-height:1;
  color:#fff; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.28); border-radius:50%;
  cursor:help;
  animation:brandpulse 2.6s ease-in-out infinite;
}
@keyframes brandpulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(215,180,112,.55) }
  50%{ box-shadow:0 0 0 5px rgba(215,180,112,0) }
}
.brand-pop{
  position:absolute; top:calc(100% + 13px); left:0;
  width:336px; max-width:82vw;
  background:var(--paper-3); color:var(--ink);
  border:1px solid var(--line); border-radius:14px;
  padding:16px 18px;
  box-shadow:0 24px 54px rgba(0,0,0,.4);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
  z-index:60; pointer-events:none;
}
.brand-pop::before{
  content:""; position:absolute; top:-7px; left:24px;
  width:12px; height:12px; background:var(--paper-3);
  border-left:1px solid var(--line); border-top:1px solid var(--line);
  transform:rotate(45deg);
}
.brand-wrap:hover .brand-pop,
.brand-wrap:focus-within .brand-pop{
  opacity:1; visibility:visible; transform:none; pointer-events:auto;
}
.brand-pop .bp-badge{
  display:inline-block; font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
  margin-bottom:9px;
}
.brand-pop p{
  font-family:var(--sans); font-size:13px; line-height:1.55;
  color:var(--ink-2); margin:0 0 9px;
}
.brand-pop p:last-child{margin-bottom:0}
.brand-pop p b{color:var(--ink); font-weight:600}
.brand-pop p i{font-style:italic; color:var(--cobalt)}

.navlinks{display:flex; gap:6px; margin-left:auto}
.navlinks a{
  padding:8px 12px;
  font-family:var(--sans); font-size:14px;
  color:rgba(255,255,255,.75);
  border-radius:999px;
  white-space:nowrap;
  transition:color .15s, background .15s;
}
.navlinks a:hover{color:#fff; background:rgba(255,255,255,.08)}

/* mobile hamburger nav (built by app.js, hidden on desktop) */
.nav-burger{
  display:none; margin-left:auto;
  width:42px; height:42px; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px; cursor:pointer;
}
.nav-burger span{
  display:block; width:18px; height:2px; border-radius:2px;
  background:rgba(255,255,255,.88);
  transition:transform .25s ease, opacity .2s ease;
}
.nav-burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2){ opacity:0; }
.nav-burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  display:none; position:absolute; left:0; right:0; top:100%; z-index:60;
  background:var(--dk-bg-2);
  border-top:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 44px rgba(0,0,0,.38);
  padding:8px 0 16px;
}
.mobile-menu.open{ display:block; }
.mobile-menu .wrap{ display:flex; flex-direction:column; }
.mobile-menu a{
  padding:14px 4px; font-family:var(--sans); font-size:16px;
  color:rgba(255,255,255,.82);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.mobile-menu a:hover{ color:#fff; }
.mobile-menu a.active{ color:#fff; font-weight:600; }
.mobile-menu a.mm-cta{
  margin-top:12px; color:var(--cyan); font-weight:600; border-bottom:0;
  display:flex; align-items:center; gap:8px;
}
@media (min-width:1101px){
  .nav-burger{ display:none !important; }
  .mobile-menu{ display:none !important; }
}

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 24px;
  font-family:var(--sans); font-size:14.5px; font-weight:600;
  letter-spacing:0;
  border-radius:999px;
  cursor:pointer;
  transition:transform .18s, box-shadow .25s, background .25s, border-color .25s, color .2s;
  white-space:nowrap;
  border:1px solid transparent;
}
.btn-white{
  background:#fff; color:var(--navy);
  box-shadow: 0 12px 36px -10px rgba(255,255,255,.4);
}
.btn-white:hover{transform:translateY(-1px); box-shadow: 0 16px 44px -10px rgba(255,255,255,.6); background:#EADFC8}
.btn-outline-w{
  background:transparent; color:#fff;
  border-color:rgba(255,255,255,.4);
}
.btn-outline-w:hover{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.7)}
.btn-blue{background:var(--blue); color:#fff; box-shadow:0 12px 36px -10px rgba(185,91,54,.5)}
.btn-blue:hover{transform:translateY(-1px); background:#8B3D1F; box-shadow:0 16px 44px -10px rgba(185,91,54,.7)}
.btn-ink{background:var(--ink); color:#fff; box-shadow:0 12px 36px -10px rgba(25,21,18,.4)}
.btn-ink:hover{transform:translateY(-1px); background:#2A1F18}
.btn-ghost{
  background:transparent; color:var(--ink);
  border-color:rgba(25,21,18,.18);
}
.btn-ghost:hover{background:rgba(25,21,18,.04); border-color:rgba(25,21,18,.4)}

/* HERO BODY */
.hero-body{
  position:relative; z-index:6;
  padding:4px 0 48px;
}
.hero-grid{
  display:grid; grid-template-columns: minmax(560px, 1.15fr) minmax(0, 0.85fr); gap:40px;
  align-items:center;
  min-height:calc(100vh - 560px);
}

.hero-tag{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:15px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.95);
  padding:10px 18px;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.07);
  border-radius:999px;
  backdrop-filter:blur(8px);
  margin-bottom:32px;
}
.hero-tag .dot{width:7px;height:7px;border-radius:50%;background:#5DA362;
  box-shadow:0 0 10px rgba(93,163,98,1);
  animation:pulse 2s ease-in-out infinite;
}
.hero-tag b{color:#fff; font-weight:700}

.hero h1{
  font-family:var(--serif);
  font-variation-settings:"opsz" 144, "SOFT" 30, "wght" 400;
  font-weight:400;
  font-size:clamp(48px, 5.8vw, 80px);
  line-height:1.0;
  letter-spacing:-0.025em;
  margin:0 0 28px;
  color:#fff;
}
.hero h1 .it{
  font-family:var(--serif-it); font-style:italic; font-weight:400;
  background:linear-gradient(135deg, #D7B470 0%, #C49849 60%, #fff 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  letter-spacing:-.005em;
}

.hero p.lede{
  font-family:var(--sans); font-weight:400;
  font-size:20px; line-height:1.55;
  color:rgba(255,255,255,.78);
  max-width:600px;
  margin:0 0 40px;
}
.hero p.lede b{color:#fff; font-weight:600}

.hero .ctas{display:flex; gap:12px; flex-wrap:nowrap; margin-bottom:44px}
.hero .ctas .btn{flex:1 1 0; justify-content:center; white-space:nowrap; padding-left:16px; padding-right:16px}

.hero-meta{
  display:flex; flex-wrap:nowrap; align-items:center;
  gap:16px;
  width:auto;
  margin-top:0;
  font-family:var(--mono); font-size:14px; font-weight:500;
  color:#fff;
  font-weight:600;
  letter-spacing:.01em;
  white-space:nowrap;
  text-shadow:0 1px 7px rgba(0,0,0,.6);
}
.hero-meta > span{display:flex; align-items:center; gap:8px; white-space:nowrap;
  padding:6px 12px; border-radius:999px;
  background:rgba(25,18,12,.42); border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.hero-meta .pip{display:block; width:9px; min-width:9px; height:9px;
  border-radius:50%; background:#F0C97A; flex:0 0 9px;
  box-shadow:0 0 8px 1px rgba(240,201,122,.95)}

/* ================================================================
   DASHBOARD VISUAL — TILTED SCREENSHOT IN ROUNDED CARD
   ================================================================ */
.dash-stage{
  position:relative;
  perspective: 2400px;
  perspective-origin: 50% 50%;
  padding:30px 10px;
  margin-right:-32px;
  z-index:1;
}
/* hover-lift: scale up and bring to front (grows leftward from the right edge so it
   doesn't clip against the hero's overflow:hidden right boundary) */
.dash-stage.lifted{ z-index:60; }
.dash-tilt{ transform-origin:88% 50%; }
.dash-stage.lifted .shot-card{
  box-shadow:
    0 0 0 2px rgba(255,255,255,.12) inset,
    0 180px 360px -80px rgba(0,0,0,.8),
    0 80px 180px -60px rgba(185,91,54,.45);
}
.dash-stage::before{
  content:""; position:absolute; inset:-50px;
  background:
    radial-gradient(closest-side, rgba(196,152,73,.35), transparent 70%);
  filter:blur(50px);
  z-index:0;
  opacity:.9;
  pointer-events:none;
}
.dash-tilt{
  position:relative; z-index:1;
  width:100%;
  aspect-ratio: 2395 / 1281;   /* card size, independent of the supersampled child */
  transform-style:preserve-3d;
  transform-origin:88% 50%;
  cursor:pointer;
}

/* the rounded screenshot card — Upcloud-style.
   SUPERSAMPLED: laid out at 2x and scaled to .5 so its baked 3D-layer texture is
   high-res (the tilt would otherwise resample a 1x texture and look soft). All px
   values inside are 2x to compensate the .5 scale. */
.shot-card{
  position:absolute; top:0; left:0;
  width:200%; height:200%;
  transform:scale(.5);
  transform-origin:0 0;
  transform-style:preserve-3d;
  border-radius:48px;
  overflow:hidden;
  background:#F2E9D8;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.1) inset,
    0 140px 280px -100px rgba(0,0,0,.7),
    0 60px 120px -40px rgba(185,91,54,.3);
}
.shot-card img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}

/* Floating stat card (like Upcloud's "ARR $458,000") */
.stat-card{
  position:absolute;
  bottom:-30px; left:10px;
  background:#fff;
  border-radius:18px;
  padding:18px 22px;
  width:240px;
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,.5),
    0 12px 24px -10px rgba(185,91,54,.3);
  z-index:3;
  transform: translateZ(60px);
  font-family:var(--sans);
  animation: float 5s ease-in-out infinite;
}
.stat-card .lbl{
  font-family:var(--mono); font-size:10px;
  color:var(--blue); letter-spacing:.16em; text-transform:uppercase;
  font-weight:600;
  margin-bottom:4px;
}
.stat-card .big{
  font-family:var(--serif); font-weight:600;
  font-size:32px; letter-spacing:-.02em; line-height:1;
  color:var(--ink);
}
.stat-card .big sup{font-size:18px; color:var(--blue); top:-.6em; margin-right:1px}
.stat-card .delta{
  font-family:var(--mono); font-size:11px;
  color:#fff; font-weight:700; margin-top:4px;
  display:flex; align-items:center; gap:5px;
}
.stat-card .chart{
  position:relative;
  margin-top:10px; height:30px;
}
.stat-card .chart svg{display:block; width:100%; height:100%}
.stat-card .chart svg path.line{stroke:var(--blue); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round}
.stat-card .chart svg path.area{fill:url(#statgrad); opacity:.4}
.stat-card .cursor-arrow{
  position:absolute; right:-20px; top:8px;
  width:28px; height:28px;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));
}

/* Floating circular icon badges */
.float-badge{
  position:absolute;
  width:64px; height:64px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:
    0 20px 40px -15px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.08);
  z-index:4;
  transform: translateZ(80px);
  animation: float 6s ease-in-out infinite;
}
.float-badge svg{width:28px; height:28px; color:#fff}
.fb-1{background:#191512; right:-30px; top:25%;}
.fb-2{background:#B95B36; right:-50px; top:48%; animation-delay:-2s; width:62px; height:62px}
.fb-3{background:#D7B470; right:-25px; top:70%; animation-delay:-4s; width:58px; height:58px}

/* hover hint */
.hover-hint{
  position:absolute; bottom:-46px; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.45);
  display:flex; align-items:center; gap:8px;
  pointer-events:none;
  transition:opacity .3s;
  z-index:1;
}
.hover-hint::before, .hover-hint::after{
  content:""; width:24px; height:1px; background:rgba(255,255,255,.3);
}
.dash-stage:hover .hover-hint{opacity:0}

/* scroll cue */
.scroll-cue{
  display:none;
  position:absolute; bottom:200px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.45);
  z-index:8;
}
.scroll-cue .bar{
  width:1px; height:36px;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.4));
  position:relative; overflow:hidden;
}
.scroll-cue .bar::after{
  content:""; position:absolute; left:0; right:0; top:0;
  height:14px; background:#fff;
  animation: cueDrop 2.3s ease-in-out infinite;
}
@keyframes cueDrop{
  0%{transform:translateY(-14px); opacity:0}
  30%{opacity:1}
  100%{transform:translateY(36px); opacity:0}
}

/* ================================================================
   SECTION-BRIDGE — two-stage transitions through a pale near-white blue.
   Each transition uses a BOTTOM bridge on the outgoing section
   (transparent → pale blue) and a TOP bridge on the incoming section
   (pale blue → next section's color). The two bridges meet at the
   shared pale-blue intermediate, hiding the boundary entirely.
   ================================================================ */
.section-bridge{
  position:absolute;
  left:0; right:0;
  height:220px;
  pointer-events:none;
  z-index:3;
}
.section-bridge.btm{bottom:0}
.section-bridge.top{top:0}

/* ---- OUTGOING (BOTTOM) BRIDGES — always end at pale blue ---- */
/* Bottom of a navy/dark section, fading down to pale blue */
.section-bridge.btm.from-dark{
  height:340px;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(242,233,216,.10) 32%,
    rgba(242,233,216,.40) 60%,
    rgba(242,233,216,.80) 84%,
    #F2E9D8 100%);
}
/* Bottom of a cream/paper section, fading down to pale blue */
.section-bridge.btm.from-paper{
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(229,219,194,.30) 30%,
    rgba(229,219,194,.65) 55%,
    rgba(229,219,194,.92) 82%,
    #E5DBC2 100%);
}

/* ---- INCOMING (TOP) BRIDGES — always start at pale blue ---- */
/* Top of a cream section: pale blue at top fading into cream */
.section-bridge.top.into-paper{
  background: linear-gradient(to bottom,
    #E5DBC2 0%,
    rgba(229,219,194,.85) 18%,
    rgba(234,223,200,.55) 42%,
    rgba(242,233,216,.20) 65%,
    transparent 85%);
}
/* Top of a dark navy section: pale blue at top → mid blues → dark navy */
.section-bridge.top.into-dark{
  background: linear-gradient(to bottom,
    #E5DBC2 0%,
    rgba(220,200,170,.92) 15%,
    rgba(150,135,115,.85) 30%,
    rgba(80,65,50,.7) 48%,
    rgba(40,30,20,.45) 68%,
    transparent 90%);
}
/* Top of the dark CTA: cream → warm tan → brown → dark (mirrors the hero exit) */
.section-bridge.top.into-blue{
  height:340px;
  background: linear-gradient(to bottom,
    #F2E9D8 0%,
    #E7DDC6 14%,
    rgba(191,164,124,.95) 42%,
    rgba(110,84,58,.92) 70%,
    rgba(74,51,36,.55) 88%,
    transparent 100%);
}

/* ================================================================
   LIGHT — WHAT IT DOES + FEATURES (Minuttia-style scatter)
   ================================================================ */
.light{
  background:
    radial-gradient(900px 600px at 100% 0%, var(--aurora-glow), transparent 60%),
    radial-gradient(800px 500px at 0% 100%, var(--aurora-cobalt), transparent 55%),
    var(--paper);
  color:var(--ink);
  position:relative;
  overflow:hidden;
}
.light::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(rgba(25,21,18,.05) 1px, transparent 1px);
  background-size: 4px 4px;
  opacity:.6;
}

/* "what it does" strip */
.what-pad{padding:90px 0 50px; position:relative; z-index:1}
.what-head{
  text-align:center;
  position:relative; z-index:5;
  margin-bottom:60px;
}
.what-head .badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3);
  padding:6px 14px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  margin-bottom:24px;
}
.what-head .badge::before{
  content:""; width:7px;height:7px;border-radius:50%;background:var(--blue);
  box-shadow:0 0 8px rgba(185,91,54,.5);
}
.what-head h2{
  font-family:var(--serif);
  font-variation-settings:"opsz" 144, "SOFT" 30, "wght" 600;
  font-weight:600;
  font-size:clamp(40px, 6vw, 84px);
  line-height:0.98;
  letter-spacing:-0.035em;
  margin:0 0 22px;
  color:var(--ink);
}
.what-head h2 .it{
  font-family:var(--serif-it); font-style:italic; font-weight:400;
  color:var(--cobalt);
  letter-spacing:-.01em;
}
.what-head p{
  font-family:var(--sans); font-size:18px; line-height:1.5;
  color:var(--ink-2);
  max-width:600px; margin:0 auto 32px;
}
.what-head .ctas{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* manifesto — the idea */
.manifesto{
  background:
    radial-gradient(800px 500px at 0% 0%, var(--aurora-glow), transparent 60%),
    var(--paper);
  color:var(--ink);
  position:relative;
  overflow:hidden;
}
.manifesto::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(25,21,18,.05) 1px, transparent 1px);
  background-size:4px 4px; opacity:.5;
}
.manifesto-pad{padding:60px 0 52px; position:relative; z-index:6}
.manifesto-body{max-width:760px; margin:0; position:relative; z-index:2}
.manifesto-body .badge{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:#B95B36;
  padding:7px 15px; background:rgba(185,91,54,.09);
  border:1px solid rgba(185,91,54,.38); border-radius:999px;
  margin-bottom:24px;
}
.manifesto-body .badge::before{
  content:""; width:7px;height:7px;border-radius:50%;background:#B95B36;
  box-shadow:0 0 8px rgba(185,91,54,.6);
}
.manifesto-body p{
  font-family:var(--sans);
  font-size:clamp(18px, 2.4vw, 23px);
  line-height:1.6;
  color:var(--ink-2);
  margin:0 0 22px;
}
.manifesto-body p:last-child{margin-bottom:0}
.manifesto-body p strong{
  color:var(--ink); font-weight:600;
}
@media (max-width:720px){
  .manifesto-pad{padding:70px 0 50px}
  .manifesto-body p{font-size:18px}
}

/* ================================================================
   HOW IT WORKS — numbered steps (themed)
   ================================================================ */
.howit{
  /* transparent top so the section overlaps the hero's color transition
     without an opaque edge — the cream fades in over the first 190px */
  background:
    radial-gradient(800px 500px at 100% 0%, var(--aurora-glow), transparent 60%),
    linear-gradient(180deg, transparent 0, var(--paper) 190px);
  color:var(--ink);
  position:relative;
  overflow:hidden;
  margin-top:-150px;
  z-index:5;
  /* the -150px overlap zone sits over the hero's CTAs; let clicks fall through
     it to the hero, while keeping the actual section content interactive */
  pointer-events:none;
}
.howit::before{
  content:""; position:absolute; inset:190px 0 0; pointer-events:none;
  background-image:radial-gradient(rgba(25,21,18,.05) 1px, transparent 1px);
  background-size:4px 4px; opacity:.5;
}
.howit-pad{padding:210px 0 60px; position:relative; z-index:6; pointer-events:none}
.howit-grid{pointer-events:auto}
.howit-grid{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:start;
}
.howit-head .badge{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:#B95B36;
  padding:7px 15px; background:rgba(185,91,54,.09);
  border:1px solid rgba(185,91,54,.38); border-radius:999px;
  margin-bottom:22px;
}
.howit-head .badge::before{
  content:""; width:7px;height:7px;border-radius:50%;background:#B95B36;
  box-shadow:0 0 8px rgba(185,91,54,.6);
}
.howit-head h2{
  font-family:var(--serif);
  font-variation-settings:"opsz" 144, "SOFT" 30, "wght" 600;
  font-weight:600;
  font-size:clamp(34px, 4.4vw, 54px);
  line-height:1.02; letter-spacing:-.03em; margin:0 0 18px; color:var(--ink);
}
.howit-head h2 .it{font-family:var(--serif-it); font-style:italic; font-weight:400; color:var(--cobalt)}
.howit-head p{font-family:var(--sans); font-size:17px; line-height:1.6; color:var(--ink-2); margin:0; max-width:440px}
.howit-steps{
  background:var(--paper-3);
  border:1px solid var(--line);
  border-radius:16px;
  padding:8px 30px;
}
.howit-step{
  display:flex; gap:20px; align-items:flex-start;
  padding:22px 0; border-bottom:1px solid var(--line);
}
.howit-step:last-child{border-bottom:0}
.howit-step .num{
  flex-shrink:0; width:40px; height:40px; border-radius:50%;
  background:var(--ink); color:var(--paper-3);
  font-family:var(--mono); font-weight:600; font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
.howit-step h4{
  font-family:var(--serif); font-weight:600; font-size:19px;
  letter-spacing:-.01em; margin:2px 0 6px; color:var(--ink);
}
.howit-step p{font-family:var(--sans); font-size:14.5px; line-height:1.55; color:var(--ink-3); margin:0}
@media (max-width:900px){
  .howit-grid{grid-template-columns:1fr; gap:28px}
  /* drop the desktop -150px overlap on mobile so the "how it works" badge
     doesn't ride up over the hero's phone image */
  .howit{ margin-top:0 }
  .howit-pad{padding:64px 0 50px}
}

/* features section intro line */
.scatter-sub{
  font-family:var(--sans); font-size:17px; line-height:1.6;
  color:var(--ink-2); margin:18px 0 0; max-width:620px;
}

/* Two-column problem/answer */
.what-pa{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  margin-top:40px;
}
.pa-card{
  background:var(--paper-3);
  border:1px solid var(--line);
  border-radius:16px;
  padding:36px 32px;
  position:relative;
}
.pa-card.b{
  background:linear-gradient(160deg, #fff 0%, var(--paper-2) 100%);
  border-color:rgba(185,91,54,.22);
}
.pa-card .lbl{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3);
  padding:5px 12px; background:var(--paper); border:1px solid var(--line); border-radius:999px;
  margin-bottom:20px;
}
.pa-card.b .lbl{color:var(--cobalt); border-color:rgba(185,91,54,.28); background:#fff}
.pa-card h3{
  font-family:var(--serif); font-weight:600;
  font-size:26px; line-height:1.18; letter-spacing:-.022em;
  margin:0 0 14px;
}
.pa-card h3 .it{font-family:var(--serif-it); font-style:italic; font-weight:400; color:var(--cobalt)}
.pa-card p{
  font-family:var(--sans); font-size:15.5px; line-height:1.6;
  color:var(--ink-2); margin:0 0 12px;
}
.pa-card p code{
  font-family:var(--mono); font-size:13px; color:var(--cobalt);
  background:rgba(185,91,54,.08); padding:1px 6px; border-radius:3px;
}

/* === SCATTER (FEATURES, Minuttia-style) === */
.scatter-pad{padding:40px 0 80px; position:relative; z-index:6}
.scatter-head{margin-bottom:50px}
.scatter-head .badge{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:#B95B36;
  padding:7px 15px;
  background:rgba(185,91,54,.09);
  border:1px solid rgba(185,91,54,.38);
  border-radius:999px;
  margin-bottom:20px;
}
.scatter-head .badge::before{
  content:""; width:7px;height:7px;border-radius:50%;background:#B95B36;
  box-shadow:0 0 8px rgba(185,91,54,.6);
}
.scatter-head h2{
  font-family:var(--serif);
  font-variation-settings:"opsz" 144, "SOFT" 30, "wght" 600;
  font-weight:600;
  font-size:clamp(36px, 5vw, 64px);
  line-height:1.02;
  letter-spacing:-0.03em;
  margin:0;
  color:var(--ink);
  max-width:780px;
}
.scatter-head h2 .it{
  font-family:var(--serif-it); font-style:italic; font-weight:400;
  color:var(--hobby);
}

/* compact 3×3 feature grid (replaces the scatter board) */
.feat-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin-top:30px;
}
.fg-cell{
  background:var(--paper-3);
  border:1px solid var(--line);
  border-radius:12px;
  padding:18px 18px 16px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.fg-cell:hover{
  transform:translateY(-3px);
  border-color:var(--general);
  box-shadow:0 18px 36px -22px rgba(20,20,30,.25);
}
.fg-cell svg{
  width:22px; height:22px;
  color:var(--general);
  margin-bottom:10px;
}
.fg-cell h4{
  font-family:var(--serif);
  font-weight:600;
  font-size:17px;
  line-height:1.1;
  letter-spacing:-.01em;
  margin:0 0 6px;
  color:var(--ink);
}
.fg-cell p{
  font-family:var(--sans);
  font-size:13.5px;
  line-height:1.5;
  color:var(--ink-3);
  margin:0;
}
@media (max-width:820px){
  .feat-grid{grid-template-columns:repeat(2, 1fr); gap:10px}
}
@media (max-width:520px){
  .feat-grid{grid-template-columns:1fr}
}

.scatter{
  position:relative;
  margin-top:40px;
  height:1100px;
  z-index:5;
}
@media (max-width:1100px){
  .scatter{height:auto; display:flex; flex-direction:column; gap:30px; align-items:center}
}

.scatter-svg{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:1;
}
.scatter-svg path{
  stroke:rgba(25,21,18,.18);
  stroke-width:1.4;
  stroke-dasharray:5 7;
  fill:none;
  stroke-linecap:round;
  stroke-dashoffset:1000;
  transition:stroke-dashoffset 1.4s ease-out;
}
.scatter.in .scatter-svg path{stroke-dashoffset:0}

.sc{
  position:absolute;
  z-index:3;
  transition:
    transform 1.2s cubic-bezier(.2,.8,.2,1),
    opacity .8s ease;
  opacity:0;
}
@media (max-width:1100px){
  .sc{position:relative; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important}
}

.scatter:not(.in) .sc{
  opacity:0;
  transform: translate(var(--sx, 0), var(--sy, 40px)) rotate(var(--sr, 0deg));
}
.scatter.in .sc{
  opacity:1;
  transform: rotate(var(--fr, 0deg));
}

.sc-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:
    0 30px 60px -30px rgba(20,20,30,.18),
    0 12px 24px -10px rgba(20,20,30,.08);
  padding:18px;
  width:280px;
}

/* tile board mock — uses ACTUAL CR palette */
.mock-tiles h5{
  margin:0 0 12px; font-family:var(--mono); font-weight:600;
  font-size:10px; color:var(--ink-3); letter-spacing:.18em; text-transform:uppercase;
}
.mock-tiles .row{display:flex; gap:8px; margin-bottom:8px}
.mock-tiles .mt{
  flex:1; padding:9px 11px;
  border-radius:6px; font-family:var(--sans); font-size:11px;
  font-weight:500;
  background:var(--paper);
  border:1px solid var(--line);
  border-left:3px solid var(--general);
  display:flex; flex-direction:column; gap:4px;
  min-height:40px;
}
.mock-tiles .mt .dom{font-family:var(--mono); font-size:8.5px; color:var(--ink-3); letter-spacing:.14em; text-transform:uppercase}
.mock-tiles .mt .nm{color:var(--ink); font-size:11px; line-height:1.2}
.mock-tiles .mt.trading{border-left-color:var(--trading)}
.mock-tiles .mt.hobby{border-left-color:var(--hobby)}
.mock-tiles .mt.general{border-left-color:var(--general)}
.mock-tiles .mt.dashed{background:#fff; border-style:dashed; opacity:.5}

/* terminal mock */
.mock-term{
  background:var(--dk-bg);
  border:1px solid var(--dk-border);
  border-radius:14px; padding:0; overflow:hidden;
  width:340px;
  box-shadow:
    0 30px 60px -30px rgba(0,0,0,.4),
    0 12px 24px -10px rgba(0,0,0,.2);
}
.mock-term .h{
  display:flex; align-items:center; gap:6px; padding:10px 14px;
  background:rgba(0,0,0,.3);
  border-bottom:1px solid var(--dk-border);
  font-family:var(--mono); font-size:10px; color:var(--dk-fg-3);
  letter-spacing:.1em;
}
.mock-term .h i{display:block; width:8px; height:8px; border-radius:50%}
.mock-term .h i:nth-child(1){background:#E07A5F}
.mock-term .h i:nth-child(2){background:#F2CC8F}
.mock-term .h i:nth-child(3){background:#7FB069}
.mock-term .h span{margin-left:8px}
.mock-term .body{padding:14px 16px; font-family:var(--mono); font-size:11px; line-height:1.7; color:var(--dk-fg)}
.mock-term .body .a{color:var(--gold)}
.mock-term .body .g{color:#fff; font-weight:700}
.mock-term .body .d{color:var(--dk-fg-3)}
.mock-term .body .r{color:var(--amber)}
.cursor{display:inline-block;width:6px;height:13px;background:var(--gold);vertical-align:-2px;animation:blink 1s step-end infinite;margin-left:2px}

/* schedule card */
.mock-sched{width:240px}
.mock-sched h5{
  margin:0 0 14px; font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:center; gap:8px;
}
.mock-sched h5 svg{width:14px; height:14px; color:var(--amber)}
.mock-sched .row{
  display:flex; align-items:center; gap:10px;
  padding:9px 0;
  border-top:1px dashed var(--line);
  font-family:var(--mono); font-size:11px;
}
.mock-sched .row:first-of-type{border-top:none}
.mock-sched .row .t{color:var(--amber); font-weight:600; flex-shrink:0; min-width:54px}
.mock-sched .row .l{color:var(--ink-2); font-size:11px; font-family:var(--sans); font-weight:500}
.mock-sched .row .when{
  margin-left:auto; font-size:9.5px; color:var(--ink-3);
  letter-spacing:.1em; text-transform:uppercase;
  padding:2px 7px; background:var(--paper-2); border-radius:3px;
  font-weight:500;
}

/* metric / cost card */
.mock-cost{width:200px}
.mock-cost .lbl{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
  margin-bottom:10px;
}
.mock-cost .big{
  font-family:var(--serif); font-weight:600;
  font-size:34px; line-height:1; letter-spacing:-.02em;
  color:var(--ink); margin-bottom:2px;
}
.mock-cost .big sup{font-size:18px; color:var(--blue); top:-0.6em}
.mock-cost .delta{
  font-family:var(--mono); font-size:11px; color:#fff;
  display:flex; align-items:center; gap:4px; font-weight:700;
}
.mock-cost .bars{
  display:flex; gap:3px; align-items:flex-end;
  margin-top:14px; height:34px;
}
.mock-cost .bars i{
  display:block; flex:1;
  background:linear-gradient(180deg, var(--blue), var(--cobalt-soft));
  border-radius:1px;
  opacity:.85;
}

/* phone mock */
.mock-phone{
  width:170px;
  background:var(--dk-bg);
  border-radius:24px;
  padding:9px;
  border:1px solid var(--dk-border);
  box-shadow:
    0 40px 70px -30px rgba(0,0,0,.4),
    0 14px 30px -10px rgba(0,0,0,.2);
}
.mock-phone .screen{
  background:var(--dk-bg-2);
  border-radius:16px;
  padding:14px 12px;
  font-family:var(--mono);
  position:relative;
  height:300px;
  overflow:hidden;
}
.mock-phone .screen::before{
  content:""; position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:42px; height:5px; background:#000; border-radius:3px;
}
.mock-phone .top{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:14px; margin-bottom:14px;
  font-size:8.5px; color:var(--dk-fg-3); letter-spacing:.1em;
}
.mock-phone .top em{color:#fff; font-style:normal; display:flex; align-items:center; gap:4px; font-weight:700}
.mock-phone .top em::before{content:""; width:5px;height:5px;border-radius:50%; background:var(--sage); box-shadow:0 0 4px rgba(93,163,98,.7)}
.mock-phone .ptile{
  background:rgba(255,255,255,.04);
  border-left:2px solid var(--trading);
  border-radius:3px;
  padding:7px 9px;
  font-size:9.5px;
  margin-bottom:5px;
  color:var(--dk-fg);
  font-family:var(--sans);
  font-weight:500;
}
.mock-phone .ptile.s{border-left-color:var(--sage)}
.mock-phone .ptile.a{border-left-color:var(--amber)}
.mock-phone .ptile.h{border-left-color:var(--hobby)}
.mock-phone .ptile small{display:block; font-size:7.5px; color:var(--dk-fg-3); margin-top:2px; letter-spacing:.06em; font-family:var(--mono); font-weight:400}

/* memory doc */
.mock-doc{width:240px}
.mock-doc h5{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
  margin:0 0 12px;
  display:flex; align-items:center; gap:8px;
}
.mock-doc h5 svg{width:14px; height:14px; color:var(--general)}
.mock-doc .ln{
  display:flex; gap:8px; padding:5px 0;
  font-family:var(--mono); font-size:11px;
  color:var(--ink-2); line-height:1.5;
}
.mock-doc .ln .h{color:var(--trading); font-weight:600}
.mock-doc .ln .b{color:var(--ink); font-weight:500}

/* git branch */
.mock-git{width:240px; font-family:var(--mono)}
.mock-git .ttl{
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
  margin-bottom:14px;
  display:flex; align-items:center; gap:8px;
}
.mock-git .ttl svg{color:var(--hobby); width:14px; height:14px}
.mock-git .ln{
  display:flex; align-items:center; gap:10px;
  padding:6px 0;
  font-size:11px;
}
.mock-git .ln .gr{
  flex-shrink:0; width:14px; height:14px; position:relative;
}
.mock-git .ln .gr::before{
  content:""; position:absolute; left:6px; top:-12px; bottom:-12px; width:2px;
  background:rgba(25,21,18,.15);
}
.mock-git .ln:first-child .gr::before{top:6px}
.mock-git .ln:last-child .gr::before{bottom:auto; height:8px}
.mock-git .ln .gr i{
  position:absolute; left:2px; top:2px;
  width:10px; height:10px; border-radius:50%;
  background:#fff; border:2px solid var(--ink);
}
.mock-git .ln.t .gr i{background:var(--trading); border-color:#9D3E32}
.mock-git .ln.a .gr i{background:var(--amber); border-color:#B26F2D}
.mock-git .ln.s .gr i{background:var(--sage); border-color:#4A8350}
.mock-git .ln span{color:var(--ink-2); font-family:var(--sans); font-weight:500}
.mock-git .ln em{margin-left:auto; font-style:normal; font-size:9px; padding:2px 6px; border-radius:3px; letter-spacing:.06em; text-transform:uppercase; font-weight:600}
.mock-git .ln.t em{background:var(--trading-bg); color:var(--trading)}
.mock-git .ln.a em{background:var(--amber-bg); color:var(--amber)}
.mock-git .ln.s em{background:var(--sage); color:#fff; font-weight:700}
.mock-git .ln em.done{background:var(--paper); color:var(--ink-3)}

/* multi-window */
.mock-stack{width:300px; height:200px; position:relative}
.mock-stack .w{
  position:absolute;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow: 0 14px 28px -10px rgba(20,20,30,.15);
  padding:0;
  overflow:hidden;
}
.mock-stack .w .h{
  display:flex; gap:4px; padding:6px 10px;
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
}
.mock-stack .w .h i{display:block; width:6px;height:6px;border-radius:50%; background:var(--ink-3)}
.mock-stack .w .h i:first-child{background:var(--trading)}
.mock-stack .w .h i:nth-child(2){background:var(--amber)}
.mock-stack .w .h i:nth-child(3){background:var(--sage)}
.mock-stack .w .b{padding:10px 12px; font-family:var(--mono); font-size:9px; color:var(--ink-3); line-height:1.7}
.mock-stack .w.w1{left:0; top:30px; width:170px; height:130px; transform:rotate(-3deg)}
.mock-stack .w.w2{left:90px; top:0; width:200px; height:160px; transform:rotate(2deg)}
.mock-stack .w.w3{left:60px; top:60px; width:230px; height:140px; transform:rotate(-1.5deg); z-index:2}

/* feature label tags — using actual CR palette */
.sc-tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px;
  border-radius:999px;
  font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:0;
  background:#fff;
  border:1px solid var(--line);
  color:var(--ink-2);
  box-shadow: 0 4px 10px -4px rgba(20,20,30,.1);
}
.sc-tag.live{background:var(--sage); border-color:transparent; color:#fff; font-weight:700}
.sc-tag.live::before{content:""; width:8px;height:8px;border-radius:50%; background:var(--sage); box-shadow:0 0 8px rgba(93,163,98,.6)}
.sc-tag.amber{background:var(--amber-bg); border-color:transparent; color:#A05E1F}
.sc-tag.trading{background:var(--trading-bg); border-color:transparent; color:var(--trading)}
.sc-tag.hobby{background:var(--hobby-bg); border-color:transparent; color:#5E3D8C}
.sc-tag.general{background:var(--general-bg); border-color:transparent; color:#7A5638}
.sc-tag.blue{background:var(--blue); border-color:transparent; color:#fff}
.sc-tag.blue::before{content:""; width:8px;height:8px;border-radius:50%; background:#fff}
.sc-tag svg{width:14px;height:14px}

/* numbered chips */
.chip{
  width:38px; height:38px; border-radius:50%;
  background:var(--ink); color:#fff;
  font-family:var(--mono); font-weight:600; font-size:13px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px -4px rgba(20,20,30,.3);
}
.chip.amber{background:var(--amber); color:#fff}
.chip.trading{background:var(--trading); color:#fff}
.chip.sage{background:var(--sage); color:#fff}
.chip.hobby{background:var(--hobby); color:#fff}
.chip.blue{background:var(--blue); color:#fff}

/* ================================================================
   DARK SECTION — vs the field (DIFF MATRIX)
   ================================================================ */
.dark-band{
  background:var(--dk-bg);
  color:var(--dk-fg);
  position:relative;
  overflow:hidden;
}
.dark-band::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(110,97,85,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110,97,85,.05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 80%);
}
.dark-band::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(900px 500px at 90% 10%, rgba(185,91,54,.18), transparent 60%),
    radial-gradient(700px 400px at 10% 100%, rgba(196,152,73,.10), transparent 60%);
}

.section-pad{padding:90px 0 80px; position:relative; z-index:6}
.s-head{
  margin-bottom:60px;
  display:grid; grid-template-columns: 80px 1fr auto; gap:32px; align-items:end;
  border-bottom:1px solid var(--dk-border); padding-bottom:24px;
}
.s-head .ref{
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.18em; color:var(--cyan);
  border:1px solid rgba(196,152,73,.6); border-radius:2px;
  padding:8px 0; text-align:center;
  background:rgba(196,152,73,.14);
}
.s-head h2{
  font-family:var(--serif);
  font-variation-settings:"opsz" 144, "SOFT" 30, "wght" 500;
  font-weight:500;
  font-size:clamp(36px, 5vw, 64px); line-height:1.02;
  letter-spacing:-.03em; margin:0; color:var(--dk-fg);
}
.s-head h2 .it{font-family:var(--serif-it); font-style:italic; font-weight:400; color:var(--cyan)}
.s-head .meta{
  font-family:var(--mono); font-size:11px; color:var(--dk-fg-3);
  letter-spacing:.04em; text-align:right; white-space:nowrap;
}
.s-head .meta b{color:var(--dk-fg-2); display:block}

.cmp{
  background:var(--dk-surface);
  border:1px solid var(--dk-border);
  border-radius:8px;
  overflow:hidden;
  position:relative;
}
.cmp::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(800px 400px at 90% 10%, rgba(185,91,54,.12), transparent 60%);
}
.cmp-h{
  padding:28px 32px;
  border-bottom:1px solid var(--dk-border);
  background:rgba(0,0,0,.2);
}
.cmp-h .ref{font-family:var(--mono); font-size:10px; font-weight:700; color:var(--cyan); letter-spacing:.18em}
.cmp-h h3{
  font-family:var(--serif); font-weight:500;
  font-size:26px; line-height:1.15; letter-spacing:-.02em;
  margin:8px 0 0; color:var(--dk-fg);
}
.cmp-h h3 .it{font-family:var(--serif-it); font-style:italic; font-weight:400; color:var(--cyan)}
.cmp-table{padding:0 32px 24px; position:relative}
.cmp-row{
  display:grid; grid-template-columns: 200px 1fr 1fr 1fr 90px;
  padding:18px 0;
  border-top:1px solid var(--dk-border);
  align-items:center;
  font-size:13px;
}
.cmp-row.head{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--dk-fg-3);
  border-top:none; padding:18px 0 12px;
}
.cmp-row .name{
  font-family:var(--mono); font-size:14px;
  color:var(--dk-fg); font-weight:500;
  display:flex; align-items:center; gap:10px;
}
.cmp-row .name .glyph{width:18px;height:18px; opacity:.6}
.cmp-cell{padding-right:14px; color:var(--dk-fg-2); font-size:13px; font-family:var(--sans)}
.pill{display:inline-block; padding:3px 10px; border-radius:999px; font-family:var(--mono);
  font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:600}
.pill-warn{background:rgba(196,77,61,.15); color:#E08070; border:1px solid rgba(196,77,61,.3)}
.pill-good{background:rgba(93,163,98,.18); color:#8DC992; border:1px solid rgba(93,163,98,.3)}
.pill-mute{background:rgba(255,255,255,.06); color:var(--dk-fg-2); border:1px solid var(--dk-border)}
.cmp-row.us{
  background:linear-gradient(90deg, rgba(185,91,54,.12), transparent);
  border-top:1px solid rgba(185,91,54,.4);
}
.cmp-row.us .name{color:var(--cyan); font-weight:600}
.cmp-row.us .name .glyph{opacity:1; color:var(--cyan)}
.cmp-row.us .cmp-cell{color:var(--dk-fg)}

/* ================================================================
   LIGHT — ARCHITECTURE + INSTALL
   ================================================================ */
.light-pad{
  padding:84px 0 80px;
  background:
    radial-gradient(900px 500px at 0% 0%, var(--aurora-glow), transparent 55%),
    radial-gradient(800px 600px at 100% 100%, var(--aurora-cobalt), transparent 55%),
    var(--paper);
  position:relative; z-index:6; overflow:hidden;
}
.light-pad::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(rgba(25,21,18,.05) 1px, transparent 1px);
  background-size: 4px 4px; opacity:.5;
}
/* keep install content above its own section bridges (else bottom text fades) */
.light-pad > .wrap{position:relative; z-index:6}

/* download routing CTA (replaces the old install block) */
.dl-cta{text-align:center; max-width:660px; margin:0 auto}
.dl-cta .badge{
  display:inline-block;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--cobalt);
  padding:6px 14px; margin-bottom:20px;
  border:1px solid rgba(185,91,54,.3);
  background:rgba(185,91,54,.06);
  border-radius:999px;
}
.dl-cta h2{
  font-family:var(--serif);
  font-variation-settings:"opsz" 144, "SOFT" 30, "wght" 600;
  font-weight:600;
  font-size:clamp(34px, 4.6vw, 56px); line-height:1.02;
  letter-spacing:-.03em; margin:0 0 16px; color:var(--ink);
}
.dl-cta h2 .it{font-family:var(--serif-it); font-style:italic; font-weight:400; color:var(--blue)}
.dl-cta p{
  font-family:var(--sans); font-size:17px; line-height:1.6;
  color:var(--ink-2); margin:0 auto 26px; max-width:520px;
}
.dl-cta .ctas{justify-content:center}
.l-head{
  margin-bottom:50px;
  display:grid; grid-template-columns: 80px 1fr auto; gap:32px; align-items:end;
  border-bottom:1px solid var(--line); padding-bottom:24px;
  position:relative;
}
.l-head .ref{
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.18em; color:var(--blue);
  border:1px solid rgba(185,91,54,.5); border-radius:2px;
  padding:8px 0; text-align:center;
  background:rgba(185,91,54,.12);
}
.l-head h2{
  font-family:var(--serif);
  font-variation-settings:"opsz" 144, "SOFT" 30, "wght" 600;
  font-weight:600;
  font-size:clamp(34px, 4.6vw, 56px); line-height:1.18;
  letter-spacing:-.03em; margin:0; color:var(--ink);
}
.l-head h2 .it{font-family:var(--serif-it); font-style:italic; font-weight:400; color:var(--blue); white-space:nowrap}
.l-head .meta{
  font-family:var(--mono); font-size:11px; color:var(--ink-3);
  letter-spacing:.04em; text-align:right; white-space:nowrap;
}
.l-head .meta b{color:var(--ink-2); display:block}

.arch{
  background:var(--paper-3);
  border:1px solid var(--line);
  border-radius:12px;
  padding:42px 38px;
  position:relative;
}
.arch .ttl{
  font-family:var(--mono); font-size:10px; color:var(--blue);
  letter-spacing:.18em; margin-bottom:6px;
}
.arch h3{
  font-family:var(--serif); font-weight:500;
  font-size:24px; letter-spacing:-.02em; line-height:1.2;
  margin:0 0 28px; color:var(--ink);
}
.arch h3 .it{font-family:var(--serif-it); font-style:italic; font-weight:400; color:var(--cobalt)}
.arch .ascii{
  font-family:var(--mono); font-size:12px;
  line-height:1.4;
  color:var(--ink-2);
  white-space:pre; overflow-x:auto;
  padding:18px 22px; background:var(--ink); border-radius:6px;
  border:1px solid var(--ink);
}
.arch .ascii{color:#9BA8C2}
.arch .ascii .c{color:#D7B470}
.arch .ascii .a{color:#E0A33A}
.arch .ascii .g{color:#fff; font-weight:700}
.arch .ascii .r{color:#D27A52}
.arch .ascii .d{color:#6E6155}

.qs-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:36px}
.qs{
  background:var(--paper-3);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  display:flex; flex-direction:column;
}
.qs .h{
  padding:18px 24px;
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
}
.qs .h .who{
  font-family:var(--mono); font-size:10px; color:var(--blue);
  letter-spacing:.18em; text-transform:uppercase; font-weight:600;
}
.qs .h .platform{font-family:var(--mono); font-size:11px; color:var(--ink-3)}
.qs .body{padding:24px; flex:1; display:flex; flex-direction:column}
.qs h3{
  font-family:var(--serif); font-weight:600;
  font-size:18px; margin:0 0 14px; color:var(--ink);
  letter-spacing:-.01em;
}
.qs pre{
  background:var(--ink);
  border-radius:6px;
  padding:18px;
  font-family:var(--mono); font-size:12.5px; line-height:1.7;
  color:#C4B49C;
  overflow-x:auto;
  margin:0 0 18px;
}
.qs pre .cm{color:#6E6155}
.qs pre .pr{color:#D7B470}
.qs pre .kw{color:#E0A33A}
.qs pre .st{color:#fff; font-weight:700}
.qs pre .nm{color:#D27A52}
.qs .foot{margin-top:auto; display:flex; gap:10px; flex-wrap:wrap}

/* ================================================================
   CTA — BIG BLUE ECHO
   ================================================================ */
.cta-band{
  background:
    radial-gradient(900px 600px at 50% 118%, rgba(196,152,73,.16), transparent 60%),
    linear-gradient(180deg, #4A3324 0%, #412D1E 55%, #3D2D1F 100%);
  position:relative;
  overflow:hidden;
  color:#fff;
}
.cta-band::before{
  content:""; 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: 64px 64px;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 80%);
}
.cta-pad{padding:230px 0 84px; position:relative; z-index:6}
.cta{
  display:grid; grid-template-columns:1.2fr 1fr; gap:60px; align-items:center;
}
/* centered single-column variant (no stats panel) */
.cta.cta-center{ grid-template-columns:1fr; justify-items:center; text-align:center; }
.cta.cta-center .lhs{ max-width:720px; }
.cta.cta-center .lhs p{ margin-left:auto; margin-right:auto; }
.cta.cta-center .lhs .ctas{ justify-content:center; }
.cta .lhs h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(38px, 5vw, 64px); line-height:1.02; letter-spacing:-.03em;
  margin:0 0 22px; color:#fff;
}
.cta .lhs h2 .it{
  font-family:var(--serif-it); font-style:italic; font-weight:400;
  background:linear-gradient(135deg, #D7B470 0%, #fff 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.cta .lhs h2 .clay{color:#E07A5F}
.cta .lhs p{font-size:16.5px; color:rgba(255,255,255,.78); margin:0 0 16px; max-width:540px}
.cta .lhs .ctas{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}

.cta-stats{
  display:grid; grid-template-columns:repeat(2,1fr); gap:0;
  border:1px solid rgba(255,255,255,.15); border-radius:12px;
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(10px);
  overflow:hidden;
}
.cta-stat{
  padding:28px;
  border-right:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.cta-stat:nth-child(2n){border-right:none}
.cta-stat:nth-last-child(-n+2){border-bottom:none}
.cta-stat b{
  display:block; font-family:var(--serif); font-weight:600;
  font-size:38px; letter-spacing:-.025em; color:#fff; line-height:1;
}
.cta-stat span{
  display:block; margin-top:10px;
  font-family:var(--mono); font-size:10.5px; color:rgba(255,255,255,.55);
  letter-spacing:.18em; text-transform:uppercase;
}
.cta-stat.cyan b{color:var(--cyan)}
.cta-stat.warm b{color:#E0A33A}
.cta-stat.sage b{color:#9DD58A}

/* footer */
/* the name — golem / clay / rune origin */
.foot-name{
  display:grid; grid-template-columns:200px 1fr; gap:44px;
  padding-bottom:40px; margin-bottom:40px;
  border-bottom:1px dashed var(--dk-border);
}
.foot-name .badge{
  display:inline-flex; align-items:center; gap:8px; align-self:start;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dk-fg-3);
  padding:6px 12px; border:1px solid var(--dk-border); border-radius:999px;
  background:rgba(255,255,255,.03);
}
.foot-name .badge::before{
  content:""; width:6px;height:6px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 6px rgba(215,180,112,.6);
}
.foot-name h3{
  font-family:var(--serif); font-weight:600;
  font-size:27px; line-height:1.12; letter-spacing:-.02em;
  margin:0 0 16px; color:var(--dk-fg);
}
.foot-name h3 .it{font-family:var(--serif-it); font-style:italic; font-weight:400; color:var(--cyan)}
.foot-name p{
  font-family:var(--sans); font-size:14.5px; line-height:1.62;
  color:var(--dk-fg-2); margin:0 0 12px; max-width:660px;
}
.foot-name p:last-child{margin-bottom:0}
.foot-name p b{color:var(--dk-fg); font-weight:600}
.foot-name p i{font-style:italic; color:var(--cyan)}
@media (max-width:1100px){
  .foot-name{grid-template-columns:1fr; gap:18px}
}

footer{
  background:var(--dk-bg);
  color:var(--dk-fg);
  border-top:1px solid var(--dk-border);
  padding:60px 0 32px;
  position:relative;
}
footer .fbrand{
  display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-weight:500;
  font-size:22px; color:var(--dk-fg);
}
footer .fbrand .sigil{width:34px;height:34px}
footer .fbrand .ver{
  color:var(--dk-fg-3); font-size:11px;
  padding:2px 7px; border:1px solid var(--dk-border); border-radius:2px;
}
footer .grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px;
  margin-bottom:40px;
}
footer h5{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--dk-fg-3);
  margin:0 0 16px;
}
footer ul{list-style:none;padding:0;margin:0}
footer ul li{margin-bottom:10px; font-size:13px; font-family:var(--mono)}
footer ul li a{color:var(--dk-fg-2); transition:color .15s}
footer ul li a:hover{color:var(--cyan)}
footer .legal{
  border-top:1px dashed var(--dk-border);
  padding-top:20px;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-family:var(--mono); font-size:10.5px;
  color:var(--dk-fg-3); letter-spacing:.06em;
}

/* responsive */
@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr; gap:40px; min-height:auto}
  .dash-stage{transform:scale(.92); transform-origin:center top}
  .stat-card{left:-10px}
  .float-badge{display:none}
  .what-pa{grid-template-columns:1fr; gap:18px}
  .qs-grid{grid-template-columns:1fr}
  .cta{grid-template-columns:1fr; padding:36px 30px}
  footer .grid{grid-template-columns:1fr 1fr; gap:28px}
  .navlinks{display:none}
  .nav-burger{display:flex}
  .s-head, .l-head{grid-template-columns: 1fr; gap:14px}
  .s-head .meta, .l-head .meta{display:none}
  .l-head h2 .it{display:block; white-space:normal; margin-top:.12em}
  .scroll-cue{display:none}
}
@media (max-width:680px){
  .wrap{padding:0 20px}
  .dash-stage{transform:scale(.78)}
  .stat-card{left:50%; transform:translateX(-50%) translateZ(60px); width:90%; max-width:280px}
  .cmp-row{grid-template-columns:1fr; gap:6px; padding:16px 0}
  .cmp-row.head{display:none}
  .cmp-cell{padding:0}
  .cmp-cell::before{
    content:attr(data-l) "  ";
    font-size:9.5px; color:var(--dk-fg-3); letter-spacing:.16em; text-transform:uppercase;
  }
  .cmp-table{padding:0 20px 20px}
  .section-pad, .light-pad{padding:64px 0}
  .cta-pad{padding:150px 0 56px}
  .arch{padding:28px 22px}
  .arch .ascii{font-size:10px}
  .what-pad{padding:80px 0 30px}
  .scatter-pad{padding:30px 0 80px}
  .scatter{margin-top:30px}
  .what-head h2{font-size:42px}
  .scatter-head h2{font-size:32px}
  .hero h1{font-size:48px}
  .cta .lhs h2{font-size:36px}
  .pa-card{padding:28px 24px}
  .pa-card h3{font-size:21px}
  .hero .ctas{flex-direction:row; flex-wrap:nowrap; gap:10px}
  .hero .ctas .btn{flex:1 1 0; justify-content:center; white-space:nowrap; padding-left:14px; padding-right:14px; font-size:13px}
}

.reveal{opacity:0; transform:translateY(14px); transition:opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}


/* ================================================================
   HERO DASHBOARD CHOREOGRAPHY — cursor browses → clicks → modal opens
   one 7s loop, synced with the phone (.ph-row.fresh slides in)
   ================================================================ */
.dash-fx{
  position:absolute; inset:0;
  pointer-events:none;
  border-radius:48px;
  overflow:hidden;
  z-index:3;
}

/* highlight ring around the targeted dashboard tile */
.tile-glow{
  position:absolute;
  left:3.5%; top:24.5%;
  width:13%; height:20%;
  border-radius:12px;
  border:4px solid #B95B36;
  box-shadow:0 0 48px rgba(185,91,54,.55), inset 0 0 36px rgba(185,91,54,.18);
  opacity:0;
  animation: cr-tile-glow 7s ease-in-out infinite;
}

/* click pulse (concentric ring at click point) */
.click-ring{
  position:absolute;
  left:10.5%; top:35%;
  width:64px; height:64px;
  margin-left:-32px; margin-top:-32px;
  border-radius:50%;
  border:4px solid #B95B36;
  background:radial-gradient(circle at center, rgba(185,91,54,.25), transparent 70%);
  opacity:0;
  animation: cr-click-ring 7s ease-in-out infinite;
}

/* the animated cursor */
.cursor-anim{
  position:absolute;
  width:52px; height:52px;
  left:68%; top:72%;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.4));
  opacity:0;
  z-index:4;
  overflow:visible;
  animation: cr-cursor 7s ease-in-out infinite;
}
.cursor-anim svg{
  display:block;
  width:52px !important;
  height:52px !important;
}

/* real chat-conversation screenshot that crossfades in over the dashboard
   after the cursor clicks the Clayrune tile */
/* full composite (dashboard with the conversation panel open) crossfades in
   over the plain dashboard after the cursor clicks the Clayrune tile */
.chat-open{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  border-radius:48px;
  opacity:0;
  z-index:2;
  animation: cr-chat 7s ease-in-out infinite;
}
@keyframes cr-chat{
  0%, 33%  { opacity:0 }
  44%      { opacity:1 }
  82%      { opacity:1 }
  90%      { opacity:0 }
  100%     { opacity:0 }
}
/* masked scroll layer: identical composite, clipped to the window's message
   rectangle (inset: top right bottom left) and panned up during the hold so the
   conversation text appears to scroll while everything else stays still */
.chat-scroll{
  position:absolute; inset:0; z-index:2;
  opacity:0;
  clip-path: inset(31% 2.5% 15.5% 40.5%);
  animation: cr-chat 7s ease-in-out infinite;
}
.chat-scroll img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  animation: cr-chatscroll 7s ease-in-out infinite;
}
@keyframes cr-chatscroll{
  0%, 46%  { transform:translateY(0) }
  80%      { transform:translateY(-3.2%) }
  100%     { transform:translateY(-3.2%) }
}

/* opened project modal that fades in over the dashboard */
.opened-modal{
  position:absolute;
  left:24%; top:30%;
  width:54%; min-height:36%;
  background:rgba(250,244,230,.96);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(185,91,54,.25);
  border-radius:10px;
  padding:12px 16px 16px;
  box-shadow:0 30px 60px rgba(25,21,18,.32), 0 0 0 1px rgba(255,255,255,.4) inset;
  opacity:0;
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--ink);
  z-index:3;
  animation: cr-modal 7s ease-in-out infinite;
}
.opened-modal .om-h{
  display:flex; align-items:center; gap:8px;
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
  margin-bottom:8px;
  font-size:10.5px;
}
.opened-modal .om-dom{
  font-family:var(--mono); font-size:8.5px;
  letter-spacing:.18em; text-transform:uppercase;
  padding:2px 6px; border-radius:3px;
  background:var(--general-bg); color:var(--general);
}
.opened-modal .om-nm{font-family:var(--sans); font-size:12px; font-weight:600; color:var(--ink)}
.opened-modal .om-st{
  margin-left:auto;
  font-style:normal;
  font-size:9.5px; letter-spacing:.04em;
  color:#fff; font-weight:700;
  display:flex; align-items:center; gap:4px;
}
.opened-modal .om-st i{
  width:5px; height:5px; border-radius:50%;
  background:var(--sage); box-shadow:0 0 4px rgba(93,163,98,.7);
  animation:pulse 1.4s ease-in-out infinite;
}
.opened-modal .om-x{
  color:var(--ink-3); font-size:14px;
  cursor:default; padding:0 4px;
}
.opened-modal .om-body{display:flex; flex-direction:column; gap:4px}
.opened-modal .om-ln{
  display:flex; align-items:baseline; gap:8px;
  font-size:10.5px; line-height:1.5;
}
.opened-modal .om-ln .d{color:var(--ink-4); font-size:9.5px; min-width:54px}
.opened-modal .om-ln .a{color:var(--cobalt)}
.opened-modal .om-ln .g{color:#fff; font-weight:700}
.opened-modal .om-ln .r{color:var(--trading)}
.opened-modal .om-ln .caret{
  display:inline-block; width:6px; height:11px;
  background:var(--cobalt);
  vertical-align:-1px;
  animation: blink 1s steps(1) infinite;
}

/* fresh row that slides in on the phone when the cursor opens the project */
.ph-row.fresh{
  background:rgba(185,91,54,.10);
  overflow:hidden;
  opacity:0;
  max-height:0;
  padding-top:0;
  padding-bottom:0;
  border-bottom:1px solid rgba(255,255,255,.04);
  animation: cr-fresh 7s ease-in-out infinite;
}

/* ── single coordinated 7s timeline ── */
@keyframes cr-cursor{
  0%   { opacity:0; left:68%; top:72%; transform:scale(1) }
  6%   { opacity:1; left:68%; top:72%; transform:scale(1) }
  /* travel diagonally to the Clayrune tile */
  28%  { opacity:1; left:10.5%; top:35%; transform:scale(1) }
  /* click squish */
  31%  { opacity:1; left:10.5%; top:35%; transform:scale(.82) }
  34%  { opacity:1; left:10.5%; top:35%; transform:scale(1) }
  /* hold while the conversation is open */
  82%  { opacity:1; left:10.5%; top:35%; transform:scale(1) }
  /* drift off */
  92%  { opacity:0; left:10.5%; top:35%; transform:scale(1) }
  100% { opacity:0; left:10.5%; top:35%; transform:scale(1) }
}
@keyframes cr-tile-glow{
  0%, 26%  { opacity:0 }
  30%      { opacity:1 }
  80%      { opacity:1 }
  88%      { opacity:0 }
  100%     { opacity:0 }
}
@keyframes cr-click-ring{
  0%, 28%  { opacity:0; transform:scale(.5) }
  30%      { opacity:.9; transform:scale(1) }
  38%      { opacity:0; transform:scale(2.6) }
  100%     { opacity:0; transform:scale(2.6) }
}
@keyframes cr-modal{
  0%, 34%  { opacity:0; transform:translateY(10px) scale(.97) }
  42%      { opacity:1; transform:translateY(0) scale(1) }
  82%      { opacity:1; transform:translateY(0) scale(1) }
  90%      { opacity:0; transform:translateY(-4px) scale(.98) }
  100%     { opacity:0; transform:translateY(-4px) scale(.98) }
}
@keyframes cr-fresh{
  0%, 34%  { opacity:0; max-height:0; padding-top:0; padding-bottom:0 }
  42%      { opacity:1; max-height:54px; padding-top:8px; padding-bottom:8px }
  82%      { opacity:1; max-height:54px; padding-top:8px; padding-bottom:8px }
  90%      { opacity:0; max-height:0; padding-top:0; padding-bottom:0 }
  100%     { opacity:0; max-height:0; padding-top:0; padding-bottom:0 }
}

/* accessibility: kill the loop for visitors who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .cursor-anim, .click-ring, .tile-glow, .opened-modal, .ph-row.fresh{
    animation:none !important;
  }
  .opened-modal{opacity:1}
  .tile-glow{opacity:.7}
  .cursor-anim{opacity:1}
  .ph-row.fresh{opacity:1; max-height:none; padding-top:8px; padding-bottom:8px}
}


/* ================================================================
   HERO — sigil watermark + inline cli + tag separators
   ================================================================ */
.hero-sigil-bg{
  position:absolute;
  right:-120px; top:50%;
  transform:translateY(-50%) rotate(-8deg);
  width:780px; height:780px;
  pointer-events:none;
  opacity:.045;
  z-index:2;
  color:#F2E9D8;
  mix-blend-mode:screen;
}

/* Claydo mascot — static smile, sitting next to the brand mark */
.brand-claydo{
  width:48px; height:auto;
  display:block;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.35));
  margin-right:4px;
}
@media (max-width: 900px){
  .brand-claydo{ width:40px; }
}
.hero-sigil-bg use{ fill:currentColor; stroke:currentColor; }
.hero-tag .sep{opacity:.4; margin:0 2px}
.hero-cli{
  font-family:var(--mono);
  font-style:normal;
  font-weight:500;
  font-size:.78em;
  letter-spacing:.01em;
  padding:.06em .35em .12em;
  border:1px solid rgba(255,255,255,.22);
  border-radius:6px;
  background:rgba(255,255,255,.06);
  color:#F2E9D8;
  vertical-align:.06em;
}

/* ================================================================
   DUAL-SURFACE HERO — phone + tunnel-arc layered over dashboard
   ================================================================ */
.tunnel-arc{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:3;
  overflow:visible;
}
.tunnel-arc .arc-lbl{
  font-family:var(--mono); font-size:9.5px;
  fill:#F2E9D8; opacity:.7;
  letter-spacing:.14em;
}

.hero-phone{
  position:absolute;
  right:-26px; top:-44px;
  z-index:4;
  transform:rotate(5deg);
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.45));
  animation:float 7s ease-in-out infinite;
}
.hero-phone .phone-frame{ width:220px }
.hero-phone .phone-screen{ min-height:340px }
/* real dark screenshot in the hero — cap height, trim the android nav strip */
.hero-phone .phone-shot{ height:430px; object-fit:cover; object-position:top center }

/* mobile-only stand-in phone — direct child of .dash-stage so it stacks
   below the dashboard card on small screens (the in-tilt .hero-phone is
   hidden there). Hidden on desktop. */
.hero-phone-m{ display:none }
.hero-phone-m .phone-frame{ width:150px }
.hero-phone-m .phone-shot{ height:300px; object-fit:cover; object-position:top center }

/* shared phone styling */
.phone-frame{
  background:#0e0a07;
  border-radius:32px;
  padding:8px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset, 0 30px 60px rgba(0,0,0,.4);
  position:relative;
  width:200px;
}
.phone-frame.lg{ width:184px }
.phone-frame.lg .phone-screen{ min-height:300px; border-radius:24px }
.phone-notch{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  width:52px; height:6px; border-radius:4px;
  background:#000;
  z-index:2;
}
.phone-screen{
  background:linear-gradient(180deg, #1A1410 0%, #221A14 100%);
  border-radius:24px;
  padding:24px 10px 12px;
  min-height:360px;
  color:var(--dk-fg);
  font-family:var(--sans);
  font-size:10.5px;
  position:relative;
  overflow:hidden;
}
.ph-top{
  display:flex; align-items:center; gap:6px;
  padding:0 6px 10px;
  border-bottom:1px solid rgba(255,255,255,.06);
  margin-bottom:8px;
  font-family:var(--mono); font-size:10px;
  color:var(--dk-fg-2);
}
.ph-sigil{width:14px; height:14px; flex-shrink:0}
.ph-brand{font-family:var(--sans); font-size:11px; color:var(--dk-fg)}
.ph-brand b{font-weight:600}
.ph-tunnel{
  margin-left:auto;
  font-style:normal;
  display:flex; align-items:center; gap:4px;
  color:#fff; font-weight:700;
}
.ph-tunnel i{
  width:5px; height:5px; border-radius:50%;
  background:var(--sage);
  box-shadow:0 0 4px rgba(93,163,98,.7);
  animation:pulse 1.6s ease-in-out infinite;
}
.ph-top .back{
  font-size:14px; color:var(--dk-fg-2);
  margin-right:4px; cursor:default;
}

.ph-row{
  display:flex; align-items:center; gap:8px;
  padding:8px 6px;
  border-bottom:1px solid rgba(255,255,255,.04);
  position:relative;
}
.ph-row:last-child{border-bottom:0}
.ph-row.live{ background:rgba(93,163,98,.06) }
.ph-row.unread{ background:rgba(216,138,60,.07) }
.ph-row.scheduled{ background:rgba(255,255,255,.02) }
.av{
  width:30px; height:30px; flex-shrink:0;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:9px; font-weight:600;
  color:#fff;
  letter-spacing:.02em;
}
.av-trading{background:linear-gradient(135deg, #C44D3D, #8E2E1F)}
.av-general{background:linear-gradient(135deg, #A87C5A, #6A4A2E)}
.av-amber{background:linear-gradient(135deg, #D88A3C, #9D5A1B)}
.av-hobby{background:linear-gradient(135deg, #8B5FBF, #5C3C8E)}
.rc{flex:1; min-width:0}
.nm{
  display:flex; justify-content:space-between; align-items:baseline;
  font-weight:500;
  color:var(--dk-fg);
  font-size:11px;
}
.nm .t{font-family:var(--mono); font-size:9px; color:var(--dk-fg-3); font-weight:400}
.ms{
  display:flex; align-items:center; gap:4px;
  margin-top:2px;
  font-family:var(--mono);
  font-size:9.5px;
  color:var(--dk-fg-2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ms-dot{
  width:5px; height:5px; border-radius:50%;
  flex-shrink:0;
}
.ms-dot.live{background:var(--sage); box-shadow:0 0 4px rgba(93,163,98,.7); animation:pulse 1.6s ease-in-out infinite}
.ms-dot.sch{background:var(--amber); box-shadow:0 0 4px rgba(216,138,60,.7)}
.unread-dot{
  margin-left:auto;
  background:var(--trading);
  color:#fff;
  font-style:normal;
  font-family:var(--mono);
  font-size:8.5px;
  font-weight:600;
  padding:2px 6px;
  border-radius:9px;
  line-height:1;
}

/* conversation drill-down (Phone B in pocket) */
.phone-screen.chat{
  padding-top:24px;
}
.bub{
  max-width:78%;
  padding:7px 10px;
  margin:5px 4px;
  border-radius:12px;
  font-size:10.5px;
  line-height:1.4;
  font-family:var(--mono);
}
.bub.them{
  background:rgba(255,255,255,.06);
  color:var(--dk-fg);
  border-bottom-left-radius:3px;
  margin-right:auto;
}
.bub.me{
  background:linear-gradient(135deg, var(--cobalt), var(--cobalt-soft));
  color:#fff;
  border-bottom-right-radius:3px;
  margin-left:auto;
  font-family:var(--sans);
  font-size:11px;
}
.ph-compose{
  position:absolute;
  bottom:8px; left:8px; right:8px;
  display:flex; align-items:center; gap:6px;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.3);
  border-radius:14px;
  font-family:var(--mono);
  font-size:9.5px;
  color:var(--dk-fg-3);
}
.compose-bar{flex:1}
.compose-img{
  padding:2px 6px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:5px;
  color:var(--dk-fg-2);
  letter-spacing:.04em;
}


/* ================================================================
   POCKET — mobile + tunnel section
   ================================================================ */
.pocket{
  background:
    radial-gradient(900px 600px at 10% 10%, rgba(196,152,73,.18), transparent 55%),
    radial-gradient(800px 500px at 90% 90%, rgba(185,91,54,.14), transparent 55%),
    var(--paper);
  color:var(--ink);
  position:relative;
}
.pocket-pad{padding:56px 0 44px; position:relative; z-index:6}
.pocket-head{
  margin-bottom:48px;
}
.pocket-head .ref{
  font-family:var(--mono); font-size:11px; font-weight:700;
  color:#A5471F; letter-spacing:.2em;
  padding-top:18px;
}
.pocket-head .badge{
  display:inline-flex; align-items:center; gap:9px; width:max-content;
  font-family:var(--mono); font-size:12px; font-weight:600;
  color:#B95B36; letter-spacing:.16em; text-transform:uppercase;
  padding:7px 15px;
  border:1px solid rgba(185,91,54,.38);
  background:rgba(185,91,54,.09);
  border-radius:999px;
  margin-bottom:20px;
}
.pocket-head .badge::before{
  content:""; width:7px;height:7px;border-radius:50%;background:#B95B36;
  box-shadow:0 0 8px rgba(185,91,54,.6);
}
.pocket-head h2{
  grid-column:2;
  font-family:var(--serif); font-weight:500;
  font-size:clamp(32px, 4vw, 48px);
  line-height:1.02;
  letter-spacing:-.025em;
  margin:0 0 14px;
}
.pocket-head p{
  grid-column:2;
  max-width:680px;
  font-size:17px; line-height:1.55;
  color:var(--ink-2);
  margin:0 0 18px;
}
.pocket-head .meta{
  grid-column:2;
  font-family:var(--mono); font-size:10.5px;
  color:var(--ink-3); letter-spacing:.18em;
  display:flex; gap:14px;
}
.pocket-head .meta b{color:var(--cobalt); font-weight:500}

.pocket-stage{
  display:grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  align-items:center;
  gap:30px;
  margin-bottom:0;
}
/* single-phone variant — centered, upright */
.pocket-stage.solo{
  display:flex;
  justify-content:center;
}
.pocket-stage.solo .phone-card{transform:none}
.pocket-stage.solo .phone-frame.lg{width:212px}
/* two-phone variant — left image flush-left with text, second pulled toward center */
.pocket-stage.two{
  display:flex;
  justify-content:flex-start;
  align-items:flex-start;
  gap:150px;
  flex-wrap:wrap;
}
.pocket-stage.two .phone-card{transform:none; width:max-content}
.pocket-stage.two .phone-frame.lg{width:230px}
.phone-card{
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.phone-card.pca{transform:rotate(-3deg)}
.phone-card.pcb{transform:rotate(4deg)}
.phone-label{
  align-self:flex-start;
  font-family:var(--mono); font-size:11px; font-weight:600;
  text-transform:uppercase;
  color:#B95B36; letter-spacing:.16em;
  padding:5px 12px;
  border:1px solid rgba(185,91,54,.3);
  border-radius:99px;
  background:#FAF4E6;
}
.phone-card .phone-frame{
  filter:drop-shadow(0 20px 40px rgba(25,21,18,.18));
}
/* real device screenshots — fill the bezel, image carries its own status/nav bars */
.phone-shot{
  display:block;
  width:100%;
  border-radius:24px;
  vertical-align:top;
}

.pocket-tunnel{
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
  gap:14px;
  padding:0 12px;
}
.pocket-tunnel .pt-end{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:var(--ink-2);
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.16em;
}
.pocket-tunnel .pt-end svg{width:36px; height:26px}
.pocket-tunnel .pt-wire{
  width:100%; height:60px;
  overflow:visible;
}
.pocket-tunnel .pt-lbl{
  font-family:var(--mono); font-size:9.5px;
  fill:var(--ink-2);
  letter-spacing:.18em;
}
.pocket-tunnel .pt-lbl.small{
  fill:var(--ink-3); font-size:8.5px; letter-spacing:.14em;
}

.pocket-strip{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:32px 0;
}
.ps-cell{
  padding:6px 24px;
  border-right:1px solid var(--line-2);
}
.ps-cell:last-child{border-right:0}
.ps-glyph{
  font-family:var(--mono); font-size:24px;
  color:var(--cobalt);
  margin-bottom:14px;
  line-height:1;
}
.ps-ttl{
  font-family:var(--serif); font-weight:500;
  font-size:19px; line-height:1.15;
  letter-spacing:-.01em;
  margin-bottom:8px;
}
.ps-sub{
  font-family:var(--mono); font-size:11.5px;
  line-height:1.6; color:var(--ink-3);
}


/* ================================================================
   HIVEMIND mock card (in feature scatter)
   ================================================================ */
.mock-hive{
  width:300px;
  background:linear-gradient(180deg, #FAF4E6 0%, #F2E9D8 100%);
  padding:14px 14px 16px;
}
.mock-hive h5{
  display:flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:10.5px;
  color:var(--ink-3); letter-spacing:.14em; text-transform:lowercase;
  margin:0 0 12px;
  font-weight:500;
}
.mock-hive h5 svg{width:14px; height:14px; color:var(--cobalt)}
.hv-root{margin-bottom:8px; display:flex; justify-content:center}
.hv-node{
  font-family:var(--mono); font-size:10.5px;
  padding:6px 10px;
  border:1px solid var(--line);
  background:#FAF4E6;
  border-radius:6px;
  color:var(--ink-2);
}
.hv-node.orch{
  background:linear-gradient(135deg, var(--cobalt), var(--cobalt-soft));
  color:#fff; border-color:transparent;
  font-weight:500;
  letter-spacing:.01em;
}
.hv-branch{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px;
  position:relative;
  padding-top:14px;
}
.hv-branch::before{
  content:""; position:absolute;
  top:0; left:50%; width:1px; height:14px;
  background:var(--ink-4);
}
.hv-branch::after{
  content:""; position:absolute;
  top:7px; left:16%; right:16%; height:1px;
  background:var(--ink-4);
}
.hv-node.w{
  display:flex; align-items:center; gap:5px;
  font-size:9.5px;
  padding:5px 7px;
  position:relative;
  z-index:1;
}
.hv-node.w em{color:var(--ink-3); font-style:normal; font-size:8.5px; margin-left:auto; letter-spacing:.06em}
.hv-dot{width:5px; height:5px; border-radius:50%; flex-shrink:0}
.hv-dot.live{background:var(--sage); box-shadow:0 0 4px rgba(93,163,98,.7); animation:pulse 1.4s ease-in-out infinite}
.hv-dot.wait{background:var(--amber)}


/* ================================================================
   ISOLATION ↔ COLLABORATION section
   ================================================================ */
.iso{
  background:
    radial-gradient(800px 500px at 50% 0%, rgba(196,152,73,.16), transparent 55%),
    var(--paper);
  color:var(--ink);
  position:relative;
}
.iso-pad{padding:90px 0 80px; position:relative; z-index:6}
.iso-head{
  margin-bottom:56px;
}
.iso-head .ref{
  font-family:var(--mono); font-size:11px; font-weight:700;
  color:#A5471F; letter-spacing:.2em;
  padding-top:18px;
}
.iso-head .badge{
  display:inline-flex; align-items:center; gap:9px; width:max-content;
  font-family:var(--mono); font-size:12px; font-weight:600;
  color:#B95B36; letter-spacing:.16em; text-transform:uppercase;
  padding:7px 15px;
  border:1px solid rgba(185,91,54,.38);
  background:rgba(185,91,54,.09);
  border-radius:999px;
  margin-bottom:20px;
}
.iso-head .badge::before{
  content:""; width:7px;height:7px;border-radius:50%;background:#B95B36;
  box-shadow:0 0 8px rgba(185,91,54,.6);
}
.iso-head h2{
  grid-column:2;
  font-family:var(--serif); font-weight:500;
  font-size:clamp(38px, 5vw, 60px);
  line-height:1.04;
  letter-spacing:-.025em;
  margin:0 0 18px;
}
.iso-head p{
  grid-column:2;
  max-width:720px;
  font-size:16.5px; line-height:1.6;
  color:var(--ink-2);
  margin:0 0 18px;
}
.iso-head .meta{
  grid-column:2;
  font-family:var(--mono); font-size:10.5px;
  color:var(--ink-3); letter-spacing:.18em;
  display:flex; gap:14px;
}
.iso-head .meta b{color:var(--cobalt); font-weight:500}

.iso-stage{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:80px;
  align-items:start;
  padding:80px 0 100px;
  margin-bottom:60px;
}
.iso-proj{
  background:#FAF4E6;
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px;
  position:relative; z-index:2;
  box-shadow:0 8px 24px rgba(25,21,18,.06);
}
.iso-proj.p1{transform:rotate(-2deg)}
.iso-proj.p3{transform:rotate(2deg)}
.iso-hd{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.iso-hd .dom{
  font-family:var(--mono); font-size:9px;
  letter-spacing:.18em; padding:3px 7px;
  border-radius:4px;
  text-transform:uppercase;
}
.dom-trading{background:var(--trading-bg); color:var(--trading)}
.dom-general{background:var(--general-bg); color:var(--general)}
.dom-hobby{background:var(--hobby-bg); color:var(--hobby)}
.iso-hd .nm{
  font-family:var(--mono); font-size:13px;
  color:var(--ink); font-weight:500;
  display:block;
}
.iso-ls{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:6px;
}
.iso-ls li{
  display:flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:11px;
  color:var(--ink-2);
}
.iso-ls .g{color:var(--cobalt); font-size:10px}
.iso-ls em{font-style:normal; color:var(--ink-3); margin-left:auto; font-size:10px; letter-spacing:.04em}

.iso-wires{
  position:absolute;
  top:0; left:0; width:100%; height:100%;
  pointer-events:none;
  z-index:1;
  overflow:visible;
}
.iso-lbl{
  font-family:var(--mono); font-size:10px;
  fill:var(--cobalt); letter-spacing:.16em;
}

.iso-goal{
  position:absolute;
  top:48%; left:50%;
  transform:translate(-50%, -50%);
  background:linear-gradient(135deg, var(--cobalt), var(--cobalt-soft));
  color:#fff;
  border-radius:14px;
  padding:18px 22px 16px;
  max-width:480px; width:80%;
  z-index:3;
  box-shadow:0 20px 50px rgba(185,91,54,.35), 0 0 0 1px rgba(255,255,255,.1) inset;
}
.iso-goal .lbl{
  font-family:var(--mono); font-size:10px;
  color:rgba(255,255,255,.7); letter-spacing:.18em;
  margin-bottom:6px;
}
.iso-goal h4{
  font-family:var(--serif); font-weight:400;
  font-size:18px; line-height:1.3;
  margin:0 0 12px;
  font-style:italic;
}
.goal-row{
  display:flex; flex-wrap:wrap; gap:6px;
}
.g-pill{
  font-family:var(--mono); font-size:9.5px;
  padding:4px 8px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.1);
  border-radius:5px;
  color:#fff;
  letter-spacing:.02em;
}
.g-pill em{font-style:normal; color:rgba(255,255,255,.65); margin-left:4px}

/* boundaries — two-column split (items card left, heading right) */
.iso-split{
  display:grid; grid-template-columns:0.95fr 1.05fr; gap:52px; align-items:center;
}
.iso-split .iso-head{ margin-bottom:0; }
.iso-split .iso-head h2,
.iso-split .iso-head p{ grid-column:auto; max-width:none; }
.iso-card{
  background:var(--paper-3);
  border:1px solid var(--line);
  border-radius:20px;
  padding:10px 30px;
  box-shadow:0 30px 60px -40px rgba(20,20,30,.25);
}
.iso-item{
  display:flex; gap:16px; align-items:flex-start;
  padding:22px 0; border-bottom:1px solid var(--line);
}
.iso-item:last-child{ border-bottom:0; }
.iso-item .ck{
  flex-shrink:0; color:var(--cobalt); font-weight:800;
  font-family:var(--mono); font-size:16px; line-height:1.5;
}
.iso-item strong{
  display:block; font-family:var(--serif); font-weight:600;
  font-size:18px; letter-spacing:-.01em; color:var(--ink); margin-bottom:5px;
}
.iso-item p{
  margin:0; font-family:var(--sans); font-size:14px;
  line-height:1.55; color:var(--ink-3);
}
@media (max-width:900px){
  .iso-split{ grid-template-columns:1fr; gap:28px; }
  .iso-split .iso-head{ order:-1; }
}

.iso-rules{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0;
  border-top:1px solid var(--line);
  padding-top:36px;
}
.ir{
  padding:0 22px 0 0;
  border-right:1px solid var(--line-2);
}
.ir:last-child{border-right:0; padding-right:0}
.ir-ttl{
  font-family:var(--mono); font-size:11.5px;
  color:var(--cobalt); letter-spacing:.04em;
  margin-bottom:10px;
  font-weight:500;
}
.ir p{
  margin:0;
  font-size:13px; line-height:1.55;
  color:var(--ink-2);
}
.ir p code{
  font-family:var(--mono); font-size:11px;
  padding:1px 4px;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:3px;
}

/* ================================================================
   MOBILE — collapse new sections
   ================================================================ */
@media (max-width: 900px){
  .hero-phone{display:none}            /* in-tilt phone is a desktop-only 3D surface */
  .hero-phone-m{                       /* mobile stand-in: stacks below the dashboard card */
    display:block;
    margin:30px auto 0;
    width:max-content;
    filter:drop-shadow(0 24px 44px rgba(0,0,0,.4));
  }
  .tunnel-arc{display:none}
  .hero-sigil-bg{opacity:.025; width:520px; height:520px; right:-180px}

  /* bigger, flat dashboard card on phones: fill the column and kill the desktop
     3D tilt + tap-to-enlarge. The hover JS writes inline transforms on .dash-tilt
     (base tilt + a scale() on tap); transform:none !important overrides both, so
     the card is flat and a tap can't resize it. */
  .dash-stage{ transform:none; margin:0; padding:0; perspective:none; }
  .dash-tilt{ width:100%; transform:none !important; }
  .hover-hint{ display:none; }

  .pocket-pad{padding:80px 0 70px}
  .pocket-head{grid-template-columns:1fr; gap:8px}
  .pocket-head .ref, .pocket-head .badge, .pocket-head h2, .pocket-head p, .pocket-head .meta{grid-column:1}
  .pocket-stage{grid-template-columns:1fr; gap:36px}
  .pocket-tunnel{order:-1; padding:8px 0}
  .pocket-tunnel .pt-wire{height:50px}
  .phone-card.pca, .phone-card.pcb{transform:none}
  .pocket-strip{grid-template-columns:1fr 1fr; gap:0}
  .ps-cell{border-bottom:1px solid var(--line-2)}
  .ps-cell:nth-child(2){border-right:0}
  .ps-cell:nth-child(3), .ps-cell:nth-child(4){border-bottom:0}

  .iso-pad{padding:80px 0 80px}
  .iso-head{grid-template-columns:1fr; gap:8px}
  .iso-head .ref, .iso-head .badge, .iso-head h2, .iso-head p, .iso-head .meta{grid-column:1}
  .iso-stage{grid-template-columns:1fr; gap:24px; padding:24px 0 80px}
  .iso-goal{position:relative; transform:none; top:auto; left:auto; width:100%; max-width:none; margin:24px 0}
  .iso-wires{display:none}
  .iso-rules{grid-template-columns:1fr 1fr; gap:24px 0; padding-top:24px}
  .ir{padding:0 14px 14px 0; border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2)}
  .ir:nth-child(2n){border-right:0; padding-right:0}
  .ir:nth-last-child(-n+2){border-bottom:0; padding-bottom:0}
}

/* ============================================================
   MOBILE HARDENING — overflow & fit fixes
   ============================================================ */
@media (max-width:680px){
  /* prevent any stray horizontal scroll */
  html, body{ overflow-x:hidden; }

  /* nav: brand + hamburger only — GitHub & Download live inside the menu */
  nav.top .row{ gap:14px; }
  nav.top .row > a.btn-outline-w{ display:none; }
  nav.top .row > a.btn-white{ display:none; }
  .brand .ver{ display:none; }

  /* hero copy: allow the single-line badges to wrap on narrow screens */
  .hero-meta{ flex-wrap:wrap; gap:9px 16px; white-space:normal; }
  .hero-copy{ max-width:100%; }
  .stat-card{ display:none; }   /* 3D-transformed card pokes off-screen */
  .hover-hint{ display:none; }
  .dash-stage{ margin-right:0; }

  /* code blocks scroll horizontally instead of stretching the page */
  pre{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
  .arch .ascii{ font-size:7.5px; line-height:1.3; }

  /* wide content tables (docs) scroll instead of overflowing */
  table{ display:block; overflow-x:auto; max-width:100%; }
}

/* ============================================================
   MOBILE LEAN TRIM — cut redundant scroll weight on phones
   Desktop is unaffected (all rules live inside this query).
   ============================================================ */
@media (max-width:900px){
  /* Scatter: drop the floating label-chips + numbered editorial chips.
     On the stacked mobile layout they're duplicate labels — the nine
     surface names already show in the scatter-head meta line above. */
  .sc:has(> .sc-tag), .sc:has(> .chip){ display:none; }

  /* Connector strokes are drawn for the desktop scatter's xy coords;
     stretched into the mobile column they render as stray lines. */
  .scatter-svg{ display:none; }

  /* Tighten the stacked card column so the surfaces read faster. */
  .scatter{ gap:22px; }

  /* Scatter is illustrative, not load-bearing — the messaging lives in
     the header + problem/answer cards above. On mobile, show 5 strong
     surfaces (dashboard · live terminal · hivemind · memory · phone) and
     drop the rest so the section isn't a quarter of the whole scroll. */
  .sc:has(> .mock-sched),
  .sc:has(> .mock-cost),
  .sc:has(> .mock-git),
  .sc:has(> .mock-stack){ display:none; }

  /* The runtime-topology ASCII is 68 chars wide — illegible at phone
     widths and only scrolls sideways. Keep the heading, drop the art. */
  .arch .ascii{ display:none; }

  /* Oversized vertical padding is the other half of the long scroll. */
  .pocket-pad{ padding:48px 0 44px; }
  .iso-pad{ padding:48px 0 48px; }
  .what-pad{ padding:56px 0 24px; }
  .scatter-pad{ padding:20px 0 48px; }
  .section-pad, .light-pad, .cta-pad{ padding:48px 0; }
  .manifesto-pad{ padding:48px 0 40px; }
}

/* ================================================================
   SAMPLE-MATCH TYPOGRAPHY
   Adopt the sample HTML's font style: Inter sans throughout, tight
   and bold display type. Neutralizes the old Fraunces variable-axis
   settings and renders accent (.it) words upright (color kept).
   ================================================================ */
h1,h2,h3,h4,h5,h6{ font-variation-settings:normal !important; }

/* accent words: same Inter family, upright, keep their accent color/gradient */
.it{ font-style:normal !important; letter-spacing:-0.02em; }

/* bold, tight display weights to match the sample's heavy headings */
.hero h1{ font-weight:700 !important; letter-spacing:-0.04em; }
.what-head h2,.scatter-head h2,.howit-head h2,.iso-head h2,
.cta .lhs h2,.dl-cta h2,.l-head h2,.s-head h2,.manifesto-body p strong{
  font-weight:700 !important; letter-spacing:-0.035em;
}
.cmp-h h3,.pa-card h3,.qs h3,.arch h3,.howit-step h4,.fg-cell h4,
.iso-head h2,.brand b{ font-weight:600 !important; }

/* section eyebrow badges — heavier & more noticeable */
.badge{ font-weight:800 !important; font-size:13px !important; letter-spacing:.15em; }