/* ═══════════════════════════════════════════════════════════════════
   SparkAE · editorial marketing skin
   Vol. I · No. 1 · Editorial / institutional aesthetic

   Single source of truth for the marketing site's editorial design.
   Ported from website/ae/project/styles.css (the design-handoff system)
   and extended with the component classes the marketing pages use
   (hero, chips, stats, position, pipeline, terminal, modes,
   independence, pricing, colophon). Self-hosted fonts under
   static/fonts/ (single canonical copy) keep the "zero external
   calls" property true.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Self-hosted editorial typography (no external fetch) ── */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:300 700;font-display:swap;src:url('static/fonts/IBMPlexSans-VariableFont.woff2') format('woff2-variations')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('static/fonts/IBMPlexMono-Regular.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('static/fonts/IBMPlexMono-Medium.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('static/fonts/IBMPlexMono-SemiBold.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;src:url('static/fonts/Fraunces-VariableFont.woff2') format('woff2-variations')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400 500;font-display:swap;src:url('static/fonts/Fraunces-Italic-VariableFont.woff2') format('woff2-variations')}

:root{
  --ink:#0F1419;
  --ink-soft:#5A6270;
  --paper:#FFFEF8;
  --paper-warm:#F7F2E8;
  --paper-cool:#FAFAF5;
  --rule:#D1CFC8;
  --rule-soft:#E5E3DC;
  --vermillion:#B23A1C;
  --vermillion-soft:#D4634B;
  --vermillion-dark:#8E2D14;
  --moss:#3D5235;
  --moss-soft:#5C7350;
  --amber:#D4A017;
  --gold:#9C7A1D;
  --teal:#3A7A7A;
  --teal-dark:#2C5E5E;
  --purple:#8B7BAE;
  --shadow:rgba(15,20,25,0.08);
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'IBM Plex Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  font-size:17px;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--vermillion);text-decoration:none;transition:color .2s}
a:hover{color:var(--vermillion-dark)}

/* ── Background grain ── */
body::before{
  content:'';position:fixed;inset:0;
  background-image:radial-gradient(circle at 1px 1px, rgba(14,20,25,0.04) 1px, transparent 0);
  background-size:24px 24px;pointer-events:none;z-index:1;opacity:0.6;
}

/* ── Reveal-on-scroll (replaces fade-up) ── */
@keyframes ae-fade-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.fade-up,.reveal{animation:ae-fade-up .7s ease both}
.fade-up-1,.d1{animation-delay:.08s}
.fade-up-2,.d2{animation-delay:.16s}
.fade-up-3,.d3{animation-delay:.24s}
.fade-up-4,.d4{animation-delay:.32s}
.fade-up-5,.d5{animation-delay:.40s}
@keyframes ae-blink{50%{border-color:transparent}}

/* ── Masthead / nav ── */
nav,.masthead{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;gap:28px;
  padding:14px 40px;
  background:rgba(255,254,248,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
  font-family:var(--font-mono);
  font-size:12px;letter-spacing:0.05em;text-transform:uppercase;
}
nav .logo,.wordmark{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:700;font-size:22px;
  letter-spacing:-0.01em;color:var(--ink);text-transform:none;
}
nav .logo .mark{
  width:30px;height:30px;border-radius:0;
  background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:15px;font-weight:700;
}
nav .logo .mark .v,nav .logo em{color:var(--vermillion);font-style:normal}
nav .logo span,.wordmark span{color:var(--vermillion)}
nav .links{display:flex;gap:28px;margin-left:auto;align-items:center}
nav .links a{font-size:13px;color:var(--ink-soft);font-weight:500;letter-spacing:0.05em;text-transform:uppercase;font-family:var(--font-mono)}
nav .links a:hover,nav .links a.active{color:var(--vermillion)}
.nav-cta{
  padding:8px 18px;background:var(--ink);color:var(--paper) !important;
  font-weight:500;font-size:12px;letter-spacing:0.08em;
  font-family:var(--font-mono);text-transform:uppercase;transition:background .2s;
}
.nav-cta:hover{background:var(--vermillion)}

/* ── Hero ── */
.hero{
  position:relative;z-index:2;
  min-height:88vh;display:flex;flex-direction:column;justify-content:center;
  padding:160px 40px 80px;border-bottom:1px solid var(--rule);
}
.hero-badge,.page-meta{
  display:inline-flex;align-items:center;gap:10px;width:fit-content;
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--vermillion);margin-bottom:28px;
}
.hero-badge .dot,.page-meta .dot{width:6px;height:6px;border-radius:50%;background:var(--vermillion)}
.hero h1{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(42px,6vw,76px);line-height:1.02;letter-spacing:-0.025em;
  color:var(--ink);max-width:1000px;margin-bottom:24px;
  font-variation-settings:"opsz" 144;
}
.hero h1 em{font-style:italic;color:var(--vermillion);font-weight:400}
.hero .sub{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(18px,2.2vw,23px);line-height:1.45;color:var(--ink-soft);
  max-width:760px;margin-bottom:36px;
}
.hero .ctas{display:flex;gap:14px;flex-wrap:wrap}

/* ── Buttons ── */
.btn{
  padding:16px 30px;border:1px solid var(--ink);cursor:pointer;
  font-family:var(--font-mono);font-size:13px;letter-spacing:0.12em;
  text-transform:uppercase;font-weight:500;transition:all .25s;
  display:inline-flex;align-items:center;gap:12px;border-radius:0;
}
.btn-primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-primary:hover{background:var(--vermillion);border-color:var(--vermillion);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-vermillion{background:var(--vermillion);color:var(--paper);border-color:var(--vermillion)}
.btn-vermillion:hover{background:var(--vermillion-dark);border-color:var(--vermillion-dark)}

/* ── Public preview status ──
   The engine is published and measured on a small public case set, not on real
   authorization packages. That belongs beside the button that starts a run:
   a visitor decides what to trust before they click, not in a footnote after. */
.preview-note{
  display:flex;align-items:flex-start;gap:14px;max-width:660px;
  margin-top:20px;padding:13px 16px;
  border:1px solid var(--rule);border-left:3px solid var(--vermillion);
  background:var(--paper-warm);
  font-size:13.5px;line-height:1.55;color:var(--ink-soft);
}
.preview-note .tag{
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--vermillion);white-space:nowrap;padding-top:3px;
}
.preview-note strong{color:var(--ink);font-weight:500}
.preview-note a{color:var(--vermillion);text-decoration:underline;text-underline-offset:2px}
@media (max-width:720px){.preview-note{flex-direction:column;gap:8px}}

/* ── Chips / eyebrow ── */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:40px}
.chip{
  padding:6px 14px;font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:0.08em;text-transform:uppercase;border:1px solid var(--rule);
  background:var(--paper);color:var(--ink-soft);
}
.chip.accent{border-color:var(--vermillion);color:var(--vermillion);background:var(--paper)}
.section-label,.eyebrow{
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--vermillion);margin-bottom:14px;
  display:flex;align-items:center;gap:12px;
}
.section-title,.chapter-title{
  font-family:var(--font-display);font-size:clamp(28px,4.2vw,52px);font-weight:500;
  letter-spacing:-0.02em;color:var(--ink);line-height:1.08;margin-bottom:16px;
  font-variation-settings:"opsz" 144;
}
.section-title em,.chapter-title em,.section-title span[style]{font-style:italic;color:var(--vermillion);font-weight:400}
.section-sub{
  font-family:var(--font-display);font-style:italic;font-size:clamp(17px,2vw,21px);
  color:var(--ink-soft);max-width:680px;margin-bottom:48px;line-height:1.4;
}

/* ── Sections ── */
section{position:relative;z-index:2;padding:96px 40px;border-bottom:1px solid var(--rule)}
section.warm{background:var(--paper-warm)}
section.dark{background:var(--ink);color:var(--paper)}
section.dark .section-title,section.dark h2,section.dark h3{color:var(--paper)}
.container{max-width:1200px;margin:0 auto}

/* ── Position statement ── */
.position{background:var(--paper-warm)}
.position-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;max-width:1200px;margin:0 auto;background:var(--rule);border:1px solid var(--rule)}
.position-card{background:var(--paper);padding:36px 28px;text-align:center;transition:background .3s}
.position-card:hover{background:var(--paper-warm)}
.position-card.featured{background:var(--paper-warm);border-top:3px solid var(--vermillion)}
.position-card .icon{font-size:26px;margin-bottom:16px}
.position-card h3{font-family:var(--font-display);font-size:20px;font-weight:500;color:var(--ink);margin-bottom:6px}
.position-card .label{font-family:var(--font-mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px}
.position-card.featured .label{color:var(--vermillion)}
.position-card p{font-size:14px;color:var(--ink-soft);line-height:1.55}

/* ── Stats ── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.stat{text-align:center;background:var(--paper);padding:36px 20px}
.stat .num{font-family:var(--font-display);font-size:clamp(36px,5vw,52px);font-weight:500;color:var(--ink);letter-spacing:-0.03em;line-height:1}
.stat .num span{color:var(--vermillion)}
.stat .label{font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft);margin-top:10px}

/* ── Pipeline ── */
.pipeline{display:flex;flex-direction:column;max-width:860px;margin:0 auto;border:1px solid var(--rule)}
.pipe-step{display:flex;align-items:flex-start;gap:20px;padding:22px 26px;background:var(--paper);border-bottom:1px solid var(--rule);transition:background .2s}
.pipe-step:last-child{border-bottom:none}
.pipe-step:hover{background:var(--paper-warm)}
.pipe-num{
  width:38px;height:38px;flex-shrink:0;background:var(--paper-warm);border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--vermillion);
}
.pipe-step h4{font-family:var(--font-display);font-size:17px;font-weight:500;color:var(--ink);margin-bottom:4px}
.pipe-step p{font-size:14px;color:var(--ink-soft);line-height:1.55}

/* ── Terminal demo (editorial, light) ── */
.terminal{max-width:760px;margin:48px auto 0;background:var(--ink);border:1px solid var(--ink);overflow:hidden}
.term-bar{display:flex;align-items:center;gap:7px;padding:11px 16px;background:#11181f;border-bottom:1px solid #2C3540}
.term-dot{width:9px;height:9px;border-radius:50%}
.term-title,.term-bar span[style]{font-family:var(--font-mono);font-size:10px;letter-spacing:0.18em;color:#5A6270}
/* Terminal transcripts hold unbreakable mono strings (JSON fragments, OSCAL
   filenames). They scroll inside their own box rather than widening the page. */
.term-body{padding:18px 20px;font-family:var(--font-mono);font-size:12.5px;line-height:1.85;color:#B8C0CC;overflow-x:auto}
.term-bar{overflow:hidden}
.term-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.term-body .prompt{color:var(--moss-soft)}
.term-body .cmd{color:var(--paper)}
.term-body .out{color:#7A8290}
.term-body .ok{color:#7CA672}
.term-body .warn{color:#E5B838}
.term-body .err{color:var(--vermillion-soft)}
.term-body .info{color:#5BA8A8}

/* ── Cards (modes / features / generic) ── */
.modes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.mode-card{background:var(--paper);padding:32px 28px;position:relative;transition:background .25s}
.mode-card:hover{background:var(--paper-warm)}
.mode-card .mode-tag{
  position:absolute;top:24px;right:24px;font-family:var(--font-mono);font-size:9px;font-weight:500;
  padding:3px 10px;letter-spacing:0.12em;text-transform:uppercase;border:1px solid;
}
.mode-card .mode-tag.safe{color:var(--moss);border-color:var(--moss);background:rgba(61,82,53,0.08)}
.mode-card .mode-tag.review{color:var(--amber);border-color:var(--amber);background:rgba(212,160,23,0.08)}
.mode-card h3{font-family:var(--font-display);font-size:21px;font-weight:500;color:var(--ink);margin-bottom:4px}
.mode-card .mode-sub{font-family:var(--font-mono);font-size:12px;color:var(--vermillion);margin-bottom:16px;letter-spacing:0.04em}
.mode-card p{font-size:14px;color:var(--ink-soft);line-height:1.6;margin-bottom:16px}
.mode-card .mode-specs{list-style:none}
.mode-card .mode-specs li{font-size:12.5px;color:var(--ink-soft);padding:7px 0;border-top:1px solid var(--rule);display:flex;justify-content:space-between}
.mode-card .mode-specs li span:last-child{color:var(--ink);font-family:var(--font-mono);font-weight:500}

.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.feature-card{background:var(--paper);padding:26px 24px;transition:background .25s}
.feature-card:hover{background:var(--paper-warm)}
.feature-card .h{font-family:var(--font-display);font-size:17px;font-weight:500;color:var(--ink);margin-bottom:8px}
.feature-card .b{font-size:13.5px;color:var(--ink-soft);line-height:1.6}

/* ── Independence visual ── */
.independence{background:var(--paper-warm)}
.ind-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.ind-prose p{font-size:16px;color:var(--ink-soft);line-height:1.7;margin-bottom:20px}
.ind-prose .moat{font-family:var(--font-display);font-style:italic;font-size:20px;color:var(--vermillion);font-weight:400}
.ind-visual{background:var(--paper);border:1px solid var(--rule);padding:40px}
.ind-node{padding:16px 20px;border:1px solid var(--rule);font-size:14px;font-weight:500;text-align:center;margin-bottom:12px;background:var(--paper)}
.ind-node span{font-size:11px;font-weight:400;color:var(--ink-soft)}
.ind-node.spark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ind-node.spark span{color:var(--vermillion-soft)}
.ind-arrow{text-align:center;color:var(--ink-soft);font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;margin:6px 0}

/* ── Pull quote ── */
.pullquote{
  font-family:var(--font-display);font-style:italic;font-size:24px;line-height:1.4;
  color:var(--ink);border-left:3px solid var(--vermillion);padding:8px 0 8px 28px;
  margin:36px 0;font-weight:400;
}

/* ── Urgency / callout ── */
.urgency{
  background:var(--paper);border:1px solid var(--rule);border-left:3px solid var(--vermillion);
  padding:28px 32px;display:flex;align-items:flex-start;gap:20px;margin-top:60px;
}
.urgency .icon{font-size:24px;flex-shrink:0}
.urgency h4{font-family:var(--font-display);font-size:18px;font-weight:500;color:var(--ink);margin-bottom:6px}
.urgency p{font-size:14px;color:var(--ink-soft);line-height:1.6}

/* ── Pricing ── */
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.price-card{background:var(--paper);padding:30px 24px;position:relative;transition:background .25s}
.price-card:hover{background:var(--paper-warm)}
.price-card.featured{background:var(--paper-warm);border-top:3px solid var(--vermillion)}
.price-card.featured::before{
  content:'MOST POPULAR';position:absolute;top:-1px;left:0;
  background:var(--vermillion);color:var(--paper);padding:3px 12px;
  font-family:var(--font-mono);font-size:9px;font-weight:500;letter-spacing:0.12em;
}
.price-card h3{font-family:var(--font-display);font-size:19px;font-weight:500;color:var(--ink);margin-bottom:4px}
.price-card .price{font-family:var(--font-display);font-size:34px;font-weight:500;color:var(--ink);margin:14px 0 4px;letter-spacing:-0.02em}
.price-card .price span{font-size:14px;font-weight:400;color:var(--ink-soft);font-family:var(--font-body)}
.price-card .price-sub{font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);margin-bottom:20px;letter-spacing:0.04em}
.price-card ul{list-style:none;margin-bottom:24px}
.price-card ul li{font-size:13.5px;color:var(--ink-soft);padding:7px 0;border-top:1px solid var(--rule);display:flex;align-items:center;gap:8px}
.price-card ul li::before{content:'·';color:var(--vermillion);font-weight:700}
.price-btn{
  width:100%;display:block;padding:11px;border:1px solid var(--ink);background:transparent;color:var(--ink);
  font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;
  cursor:pointer;transition:all .2s;text-align:center;text-decoration:none;
}

.price-btn:hover{background:var(--ink);color:var(--paper)}
.price-card.featured .price-btn{background:var(--vermillion);border-color:var(--vermillion);color:var(--paper)}
.price-card.featured .price-btn:hover{background:var(--vermillion-dark);border-color:var(--vermillion-dark)}

/* ── Brand line ── */
.brandline{font-family:var(--font-display);font-size:19px;line-height:1.5;color:var(--ink);margin-top:18px}
.brandline em{font-style:italic;color:var(--vermillion)}

/* ── Product lanes (Rev5 / 20x) ── */
.lane-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.lane-card{background:var(--paper);padding:34px 30px}
.lane-card.featured{background:var(--paper-warm);border-left:3px solid var(--vermillion)}
.lane-tag{font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px}
.lane-card.featured .lane-tag{color:var(--vermillion)}
.lane-card h3{font-family:var(--font-display);font-size:23px;font-weight:500;color:var(--ink);margin-bottom:6px}
.lane-lede{font-size:14px;color:var(--ink-soft);font-style:italic;margin-bottom:18px}
.lane-list{list-style:none;padding:0;margin:0}
.lane-list li{position:relative;padding-left:20px;font-size:14px;line-height:1.65;color:var(--ink);margin-bottom:10px}
.lane-list li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:1px;background:var(--vermillion)}
.lane-link{display:inline-block;margin-top:18px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--vermillion);text-decoration:none;border-bottom:1px solid var(--vermillion);padding-bottom:2px}
.lane-link:hover{color:var(--ink);border-color:var(--ink)}
.lane-note{margin-top:24px;font-size:13.5px;line-height:1.7;color:var(--ink-soft);max-width:78ch}

/* ── Cross-page link cards ── */
/* auto-fit rather than a fixed repeat(3,1fr): the row used to keep three
   columns at every width, so a 390px phone got a 450px-wide page and the
   whole document scrolled sideways. */
.linkcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.linkcard{
  display:block;text-decoration:none;background:var(--paper);border:1px solid var(--rule);
  padding:28px 24px;transition:background .25s,border-color .25s;
}
.linkcard:hover{background:var(--paper-warm);border-color:var(--vermillion)}
.linkcard.featured{border-left:3px solid var(--vermillion)}
.linkcard .icon{font-size:20px;margin-bottom:10px}
.linkcard .h{font-family:var(--font-display);font-size:18px;font-weight:500;color:var(--ink);margin-bottom:4px}
.linkcard.featured .h{color:var(--vermillion)}
.linkcard .b{font-size:13px;color:var(--ink-soft);line-height:1.5}

/* ── CTA section ── */
.cta-section{text-align:center;padding:120px 40px;background:var(--paper-warm)}
.cta-section h2{font-family:var(--font-display);font-size:clamp(30px,4.5vw,56px);font-weight:500;color:var(--ink);letter-spacing:-0.02em;margin-bottom:18px;line-height:1.05}
.cta-section h2 em{font-style:italic;color:var(--vermillion);font-weight:400}
.cta-section p{font-family:var(--font-display);font-style:italic;font-size:19px;color:var(--ink-soft);max-width:560px;margin:0 auto 32px;line-height:1.45}

/* ── Colophon footer ── */
footer,.colophon{
  background:var(--ink);color:#B8C0CC;padding:64px 40px 40px;position:relative;z-index:2;
  font-family:var(--font-mono);font-size:12px;letter-spacing:0.04em;
}
footer a,.colophon a{color:#B8C0CC}
footer a:hover,.colophon a:hover{color:var(--paper)}
.colophon-brand{font-family:var(--font-display);font-weight:600;font-size:26px;letter-spacing:-0.02em;color:var(--paper);margin-bottom:8px}
.colophon-brand span{color:var(--vermillion)}
footer .foot-rule{border-top:1px solid #2C3540;margin:24px auto;max-width:1200px}
footer strong{color:var(--paper);font-weight:600}

/* ── Responsive ── */
@media (max-width:900px){
  /* The section links used to be display:none below 900px, so on a phone every
     page showed only the logo and the pilot button — the site's sections were
     unreachable from any page but by URL. They now wrap onto a second,
     horizontally scrollable row under the logo. */
  nav,.masthead{padding:10px 20px;gap:10px 14px;flex-wrap:wrap}
  nav .links{display:flex;order:3;width:100%;margin-left:0;gap:18px;padding:8px 0 2px;border-top:1px solid var(--rule);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  nav .links::-webkit-scrollbar{display:none}
  nav .links a{font-size:11px;white-space:nowrap}
  nav .nav-cta{margin-left:auto;padding:7px 12px;font-size:11px}
  .hero{padding:120px 20px 60px;min-height:auto}
  section{padding:60px 20px}
  .position-grid,.modes-grid,.feature-grid,.pricing-grid{grid-template-columns:1fr}
  .ind-grid{grid-template-columns:1fr;gap:28px}
  .stats{grid-template-columns:repeat(2,1fr)}
}