/* ============================================================================
   Capsule Lab — design system v3: PURE-MINIMAL MONOCHROME (Apple / TE register)
   Sleek, modern, premium, restrained. No accent color — product photography
   carries all color. Monochrome contrast only. Default DARK + LIGHT toggle.
   Warm-minimal (warm-neutral greys), not cold. Generous whitespace.
   Self-contained: system font stacks, no external requests.
   ========================================================================== */
/* LOGO face — American Grotesk Medium (Klim). LOCAL REVIEW ONLY: this is a Klim *Test* font
   (mockup/evaluation license — NOT for public/production use, and the .otf is gitignored so it is
   never committed/distributed). Production: license + self-host the real font, or outline to SVG. */
@font-face{
  font-family:"American Grotesk";
  src:url("assets/fonts/AmericanGrotesk-Medium.otf") format("opentype");
  font-weight:500; font-style:normal; font-display:swap;
}

:root{
  /* primary face — set by the top-of-page font selector (default: Brand's pick).
     Falls back through a system grotesk stack until the web font loads. */
  --sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono",Menlo,Consolas,monospace;
  /* LOGO / wordmark face — see the @font-face above (American Grotesk Medium, Klim test font). */
  --logo:"American Grotesk","Inter","Helvetica Neue",Arial,sans-serif;

  /* DARK (default) — warm charcoal monochrome */
  --bg:#131210;
  --bg-2:#1b1916;
  --bg-3:#232019;
  --text:#ece7dd;        /* warm off-white */
  --text-2:#a29c91;
  --text-3:#706a61;
  --line:rgba(236,231,221,.13);
  --line-2:rgba(236,231,221,.22);
  --solid:#ece7dd;
  --solid-ink:#141210;
  --shadow:0 30px 70px rgba(0,0,0,.5);

  --maxw:1120px;
  --pad-y:clamp(76px,11vw,150px);
}
html[data-theme="light"]{
  --bg:#f6f4ef;          /* warm cream */
  --bg-2:#efece4;
  --bg-3:#e8e4da;
  --text:#1a1714;
  --text-2:#6b665e;
  --text-3:#9a958c;
  --line:rgba(26,23,20,.12);
  --line-2:rgba(26,23,20,.2);
  --solid:#1a1714;
  --solid-ink:#f6f4ef;
  --shadow:0 30px 70px rgba(40,34,28,.16);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-weight:400; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
  transition:background-color .45s ease, color .45s ease;
}
a{color:inherit}
img{max-width:100%}
.wrap{width:var(--maxw); max-width:90vw; margin:0 auto}
.center{text-align:center}
.mono{font-family:var(--mono)}

/* ── Type ── */
.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--text-3); margin:0 0 18px}
h1,h2,h3{font-weight:600; letter-spacing:-.025em; line-height:1.06; margin:0; color:var(--text)}
h1{font-size:clamp(42px,6.6vw,92px)}
/* hero word-cycle — vertical slot reels; each word on its own line so the H1
   line count never changes when a longer word (e.g. MODULAR) is showing */
/* Title line spacing = the reel WINDOW height (.reel, 1em — tight, no negative
   margin so adjacent lines never overlap). The track entries (.reel-word) are
   spaced taller (1.5em) than the window, so the word above/below the active one
   sits fully outside the window and can't poke in; JS centres the window on the
   active word. */
.h1-line{display:block; line-height:1}
.reel{display:inline-block; overflow:hidden; height:1em; line-height:1; vertical-align:bottom; will-change:transform}
.reel-track{display:block}
.reel-word{display:block; height:1.5em; line-height:1.5; white-space:nowrap}
h2{font-size:clamp(29px,4.4vw,52px)}
h3{font-size:20px; letter-spacing:-.01em; line-height:1.25}
p{margin:0 0 1em}
.lead{font-size:clamp(17px,2vw,21px); color:var(--text-2); line-height:1.55}
em{font-style:normal; color:var(--text)}
b{font-weight:600; color:var(--text)}

/* ── Buttons ── */
.btn{display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:500; font-size:15px;
  border-radius:980px; padding:13px 26px; border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:opacity .18s, background-color .2s, color .2s, border-color .2s, transform .12s; font-family:inherit}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--solid); color:var(--solid-ink); border-color:var(--solid)}
.btn-primary:hover{opacity:.85}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--text)}
.link{color:var(--text); text-decoration:none; border-bottom:1px solid var(--line-2); padding-bottom:2px; transition:border-color .2s}
.link:hover{border-color:var(--text)}

/* ── Nav — chunky banner (bold, tall, high header-to-body ratio) ── */
header.nav{position:relative; z-index:50; background:var(--text); color:var(--bg)}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:clamp(18px,2.6vw,40px); min-height:clamp(90px,11vw,134px); padding:16px 0}
.brand{display:flex; align-items:center; text-decoration:none; font-family:var(--logo); font-weight:500; color:var(--bg); font-size:clamp(26px,3.3vw,44px); letter-spacing:-.02em; line-height:.95}
.brand .pill,.brand small{display:none}
/* nav links live ONLY in the hamburger dropdown now (all widths) */
.nav-links{position:absolute; top:100%; left:0; right:0; z-index:50; display:none; flex-direction:column; align-items:stretch; gap:0; background:var(--text); border-top:1px solid color-mix(in srgb, var(--bg) 18%, transparent); padding:8px 0}
.nav-links.open{display:flex}
.nav-links a{text-decoration:none; white-space:nowrap; font-size:18px; font-weight:500; color:var(--bg); opacity:.7; padding:15px 24px; transition:opacity .18s}
.nav-links a:hover,.nav-links a.active{color:var(--bg); opacity:1}
.nav-actions{display:flex; align-items:center; gap:13px}
.nav .btn{padding:11px 22px; font-size:14px}
/* inner controls inverted onto the dark banner */
header.nav .btn-primary{background:var(--bg); color:var(--text); border-color:var(--bg)}
header.nav .btn-primary:hover{opacity:.86}
header.nav .nav-toggle{color:var(--bg)}
/* header style = transparent: blends into the body, reversed (normal) text — toggled from the controls panel */
html[data-header="transparent"] header.nav{background:transparent; color:var(--text)}
html[data-header="transparent"] .brand{color:var(--text)}
html[data-header="transparent"] .nav-links a{color:var(--text-2)}
html[data-header="transparent"] .nav-links a:hover,
html[data-header="transparent"] .nav-links a.active{color:var(--text)}
html[data-header="transparent"] header.nav .btn-primary{background:var(--solid); color:var(--solid-ink); border-color:var(--solid)}
html[data-header="transparent"] header.nav .nav-toggle{color:var(--text)}
html[data-header="transparent"] .nav-links{background:var(--bg); border-top-color:var(--line)}
/* font selector (review tool) */
.font-pick{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line-2); border-radius:980px; padding:5px 10px 5px 13px; color:var(--text-2)}
.font-pick > span{font-size:14px; line-height:1; color:var(--text)}
.font-pick select{appearance:none; -webkit-appearance:none; background:transparent; border:0; color:var(--text); font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; max-width:160px; padding-right:2px}
.font-pick select:focus{outline:none}
.font-pick select option{font-family:var(--sans); text-transform:none; color:#111; background:#fff}
@media(max-width:620px){ .font-pick select{max-width:78px} .theme-toggle span{display:none} .color-pick span{display:none} .color-pick{padding:6px 7px} }
/* floating preview controls — separate from the official header */
.float-tools{position:fixed; right:18px; bottom:18px; z-index:80; display:flex; align-items:center; gap:2px; background:var(--bg); border:1px solid var(--line-2); border-radius:14px; padding:6px; box-shadow:0 12px 34px rgba(40,34,28,.20)}
.float-tools .font-pick{border:0; padding:6px 4px 6px 10px}
.float-tools .theme-toggle{border:0; border-left:1px solid var(--line); border-radius:0; padding:7px 12px; margin-left:4px}
.float-tools .theme-toggle:hover{border-left-color:var(--line)}
.theme-toggle{display:inline-flex; align-items:center; gap:7px; background:none; border:1px solid var(--line-2); border-radius:980px; padding:6px 12px 6px 10px; cursor:pointer; color:var(--text-2); font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; transition:color .18s, border-color .18s}
.theme-toggle:hover{color:var(--text); border-color:var(--text)}
.theme-toggle svg{width:14px; height:14px}
/* primary/secondary color pickers (review tool, in the float panel) */
.color-pick{display:inline-flex; align-items:center; gap:6px; border-left:1px solid var(--line); padding:6px 10px; cursor:pointer}
.color-pick > span{font-family:var(--mono); font-size:9px; letter-spacing:.1em; color:var(--text-3)}
.color-pick input[type=color]{width:20px; height:20px; padding:0; border:1px solid var(--line-2); border-radius:50%; background:none; cursor:pointer; -webkit-appearance:none; appearance:none}
.color-pick input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.color-pick input[type=color]::-webkit-color-swatch{border:none; border-radius:50%}
.color-pick input[type=color]::-moz-color-swatch{border:none; border-radius:50%}

/* product photo band — sits right below the header (transparent render floats on the bg) */
.product-hero{padding:clamp(16px,3vw,40px) 0 0; text-align:center}
/* tiny honest label under the live demo */
.demo-tag{margin:16px auto 0; max-width:540px; font-family:var(--mono); font-size:11px; letter-spacing:.05em; line-height:1.5; color:var(--text-3)}
/* share button (v1: link + copy; degrades to X intent without Web Share) */
.share-btn{display:inline-flex; align-items:center; gap:8px; margin:16px auto 0; padding:9px 18px; background:transparent; color:var(--text); border:1px solid var(--line-2); border-radius:980px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; transition:border-color .2s}
.share-btn:hover{border-color:var(--text)}
.share-btn svg{width:15px; height:15px}
/* caption directly under the live demo — the invitation to act (Brand 2026-06-01) */
.demo-cap{margin:14px auto 0; max-width:640px; color:var(--text-2); font-size:14.5px; line-height:1.5}
.demo-cap b{color:var(--text); font-weight:600}
/* "living OS" line — built in the open, updated continuously */
.os-live{margin:10px auto 0; max-width:680px; font-family:var(--mono); font-size:12px; letter-spacing:.03em; color:var(--text-3)}
.os-live b{color:var(--text-2); font-weight:500}
.os-live .dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:#5fbf6a; margin-right:7px; vertical-align:middle; animation:oslive 2.4s ease-out infinite}
@keyframes oslive{0%{box-shadow:0 0 0 0 rgba(95,191,106,.5)}70%{box-shadow:0 0 0 7px rgba(95,191,106,0)}100%{box-shadow:0 0 0 0 rgba(95,191,106,0)}}
/* tour entry button */
.tour-start{display:inline-flex; align-items:center; gap:6px; margin:18px auto 0; padding:9px 18px; background:transparent; color:var(--text); border:1px solid var(--line-2); border-radius:980px; font-family:var(--mono); font-size:12px; letter-spacing:.07em; text-transform:uppercase; cursor:pointer; transition:border-color .2s, background .2s}
.tour-start:hover{border-color:var(--text)}

/* ── promo tour overlay (tutorial.js) ── */
.tour-root{position:absolute; inset:0; z-index:60; cursor:pointer}
.tour-root.no-spot{background:rgba(8,7,6,.74)}
.tour-spot{position:absolute; border-radius:6px; box-shadow:0 0 0 9999px rgba(8,7,6,.74); outline:2px solid rgba(236,231,221,.9); pointer-events:none; transition:left .35s ease, top .35s ease, width .35s ease, height .35s ease}
.tour-card{position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(14px); width:min(440px,92vw); background:var(--bg-2); color:var(--text); border:1px solid var(--line-2); border-radius:16px; padding:22px 22px 18px; box-shadow:0 18px 54px rgba(0,0,0,.5); z-index:61; opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s ease}
.tour-card.show{opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto}
.tour-x{position:absolute; top:8px; right:12px; background:none; border:0; color:var(--text-3); font-size:22px; line-height:1; cursor:pointer}
.tour-x:hover{color:var(--text)}
.tour-step{font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-3)}
.tour-title{margin:6px 0 8px; font-size:21px}
.tour-body{margin:0; color:var(--text-2); font-size:15px; line-height:1.55}
.tour-dots{display:flex; gap:7px; margin:16px 0}
.tour-dot{width:7px; height:7px; border-radius:50%; background:var(--line-2)}
.tour-dot.on{background:var(--text)}
.tour-nav{display:flex; gap:10px; justify-content:flex-end}
.tour-nav .btn{padding:9px 18px; font-size:14px; cursor:pointer}
.tour-back:disabled{opacity:.4; cursor:default}

/* ── milestones / deliverables — inverted block (white in dark mode, dark in light) ── */
.deliver{background:var(--text); color:var(--bg)}
.deliver .eyebrow{color:var(--bg); opacity:.5}
.deliver h2{color:var(--bg)}
.deliver-intro{margin-top:14px; max-width:700px; color:var(--bg); opacity:.72; font-size:17px; line-height:1.55}
.deliver-intro em{color:var(--bg); opacity:.85}
.deliver-list{list-style:none; margin:30px 0 0; padding:0}
.deliver-row{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 22px; padding:18px 0; border-top:1px solid rgba(128,128,128,.32)}
.deliver-row:last-child{border-bottom:1px solid rgba(128,128,128,.32)}
.deliver-row .tag{font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; opacity:.5}
.deliver-row .date{font-family:var(--mono); font-size:14px; letter-spacing:.04em; opacity:.78; min-width:104px}
.deliver-row .name{font-size:19px; font-weight:600}

/* ── finish picker / single-unit + price (above Join) ── */
/* the finish picker sits in the hero zone — small top; the reserve section below owns the gap */
.config{text-align:center; padding:clamp(8px,2vw,20px) 0 0}

/* reserve / Founding-Crew card (ported from lab-1.html so it works on the homepage) */
.reserve-card{position:relative; background:var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:clamp(32px,5vw,56px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,56px); align-items:center; text-align:left}
.price{display:flex; align-items:baseline; gap:12px; margin:18px 0 6px}
.price .amt{font-size:46px; font-weight:600; letter-spacing:-.03em; color:var(--text)}
.price .cur{font-family:var(--mono); color:var(--text-3); font-size:12px; text-transform:uppercase; letter-spacing:.1em}
.reserve-card ul{list-style:none; padding:0; margin:22px 0 0; font-size:15px}
/* hanging-indent icon (not flex): flex made the inline <b> + the trailing text
   separate flex items, so the 11px gap fell before the comma. Absolute icon
   keeps the text — bold span and comma — flowing inline. */
.reserve-card li{position:relative; padding-left:29px; margin-bottom:12px; color:var(--text-2); line-height:1.5}
.reserve-card li svg{position:absolute; left:0; top:3px; color:var(--text)}
.reserve-card li b{color:var(--text); font-weight:600}
.rform label{display:block; font-family:var(--mono); font-size:11px; margin:0 0 7px; color:var(--text-3); text-transform:uppercase; letter-spacing:.1em}
.rform input{width:100%; padding:14px 16px; border-radius:10px; border:1px solid var(--line-2); background:transparent; color:var(--text); font-size:15px; font-family:inherit; margin-bottom:16px; transition:border-color .2s}
.rform input::placeholder{color:var(--text-3)}
.rform input:focus{outline:none; border-color:var(--text)}
.rform .btn-primary{width:100%; justify-content:center; padding:15px}
.rform .fine{font-size:12px; color:var(--text-3); margin-top:14px; text-align:center}
.ok{display:none; text-align:center}
.ok.show{display:block}
.ok .badge{font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--text-3); text-transform:uppercase; margin-bottom:14px}
.ok .serial{font-family:var(--mono); font-size:32px; color:var(--text); letter-spacing:.02em}
@media(max-width:760px){ .reserve-card{grid-template-columns:1fr; gap:30px} }
/* no-commitment mailing-list alternative under the reserve card */
.join-alt{margin:clamp(34px,5vw,52px) 0 0; text-align:center; font-size:14px; color:var(--text-2)}
.join-alt b{color:var(--text); font-weight:600}
.config .eyebrow{margin-bottom:24px}
.config-photo img{display:block; height:clamp(375px,62.5vh,625px); width:auto; margin:0 auto; filter:drop-shadow(0 24px 44px rgba(0,0,0,.45)); transition:opacity .2s}
.config-color{margin:22px 0 0; font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-2)}
.swatches{display:flex; gap:14px; justify-content:center; margin:12px 0 0}
.sw{width:30px; height:30px; border-radius:50%; background:var(--sw); border:1px solid var(--line-2); cursor:pointer; padding:0; transition:transform .15s ease}
.sw:hover{transform:scale(1.07)}
.sw.active{box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--text)}
/* Platform callout — lifts the differentiator out of the parity spec table */
.spec-lead{display:block; max-width:440px; margin:38px auto 0; padding:16px 20px; border:1px solid var(--line-2); border-radius:12px; text-align:left; text-decoration:none; color:var(--text); transition:border-color .2s, background .2s}
.spec-lead:hover{border-color:var(--text)}
.spec-lead-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.spec-lead-top b{font-size:16px; font-weight:600}
.spec-lead-go{font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--text-2)}
.spec-lead-v{display:block; margin-top:6px; font-size:13.5px; color:var(--text-2); line-height:1.5}
/* stub spec table — sits above the price */
.spec{max-width:440px; margin:22px auto 0; text-align:left}
.spec-head{text-align:center; margin-bottom:12px}
.spec-draft{color:var(--text-3); text-transform:none; letter-spacing:0; font-weight:400}
.spec-list{margin:0; padding:0}
.spec-row{display:flex; justify-content:space-between; gap:18px; padding:10px 0; border-top:1px solid var(--line)}
.spec-row:last-child{border-bottom:1px solid var(--line)}
.spec-row dt{color:var(--text-2); font-size:14px}
.spec-row dd{margin:0; color:var(--text); font-size:14px; text-align:right}
.config-price{margin:34px 0 0; font-size:clamp(42px,8vw,78px); font-weight:600; letter-spacing:-.03em; line-height:1; color:var(--text)}
.config-price .cur{font-size:.34em; font-weight:600; color:var(--text-2); letter-spacing:.06em; vertical-align:middle; margin-right:.32em}
.config-price .was{font-size:.36em; font-weight:500; color:var(--text-3); letter-spacing:0; margin-left:.18em; vertical-align:middle}
/* currency code is a tappable picker (placeholder live-FX conversion) */
.config-price select.cur{appearance:none; -webkit-appearance:none; background:none; border:0; border-bottom:1px dotted var(--line-2); cursor:pointer; font-family:var(--mono); font-size:.34em; font-weight:600; color:var(--text-2); letter-spacing:.06em; vertical-align:middle; margin-right:.32em; padding:0 2px}
.config-price select.cur:hover{color:var(--text); border-bottom-color:var(--text)}
.config-price select.cur option{color:#111; background:#fff; font-size:14px}
.price-note{margin:10px 0 0; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3)}
.config-note{margin:14px 0 0; font-size:13px; color:var(--text-3)}
/* reassure line moved into the config block — keep it small + muted */
.config .reassure{margin:18px 0 0; font-size:13px; color:var(--text-3)}
.config .reassure b{color:var(--text-2); font-weight:500}
/* inline email signup (moved out of the standalone Join section) */
.join-inline{max-width:480px; margin:26px auto 0}
.join-inline form{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:0 auto}
.join-inline input{flex:1; min-width:240px; padding:14px 18px; border-radius:980px; border:1px solid var(--line-2); background:transparent; color:var(--text); font-size:15px; font-family:inherit; transition:border-color .2s}
.join-inline input::placeholder{color:var(--text-3)}
.join-inline input:focus{outline:none; border-color:var(--text)}
.join-inline .fine{font-size:12px; color:var(--text-3); margin-top:14px}
.join-inline .ok-msg{display:none; font-size:16px; color:var(--text); margin-top:18px}
.join-inline .ok-msg.show{display:block}
@media (prefers-reduced-motion: reduce){ .os-live .dot{animation:none}; .tour-spot{transition:none}; .sw{transition:none} }
/* the render becomes the interactive device (device.js mounts screens + hotspots) */
.device{position:relative; display:block; max-width:1180px; margin:0 auto}
.device img{display:block; width:100%; filter:drop-shadow(0 26px 44px rgba(0,0,0,.5))}
.dev-layer{position:absolute; inset:0; pointer-events:none}
/* opaque screen-off color so the render's baked-in screen graphics never show through (the live OS blits over this) */
.dev-screen{position:absolute; display:block; background:#0d0c0a; border-radius:3px}
.dev-hotspots{position:absolute; inset:0}
.dev-hotspots .hot{position:absolute; background:transparent; border:0; padding:0; cursor:pointer; border-radius:5px; -webkit-tap-highlight-color:transparent; touch-action:none; transition:background .08s}
.dev-hotspots .hot.key.pressed{background:rgba(150,150,150,.30)}
.dev-hotspots .hot.btn.flash{background:rgba(150,150,150,.34)}
.dev-boot{position:absolute; left:50%; top:27%; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:9px; padding:12px 22px; background:rgba(236,231,221,.96); border:0; border-radius:980px; color:#141210; font-family:var(--mono); font-size:13.5px; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; box-shadow:0 10px 26px rgba(0,0,0,.45); z-index:5}
.dev-boot .tri{font-size:11px}
.dev-boot .spin{width:16px; height:16px; border:2px solid rgba(20,18,16,.3); border-top-color:#141210; border-radius:50%; animation:devspin 1s linear infinite}
@keyframes devspin{to{transform:rotate(360deg)}}
.dev-boot.hidden{opacity:0; pointer-events:none; transition:opacity .4s}
/* OS boot sequence shown on the main screen while the WASM loads (no button) */
.dev-bootseq{position:absolute; background:#0d0c0a; border-radius:3px; overflow:hidden; z-index:6; transition:opacity .45s ease}
.dev-bootseq.done{opacity:0; pointer-events:none}
.dev-bootseq .bs-inner{padding:9% 10%; font-family:var(--mono); color:#d7ead9; font-size:clamp(7px,1vw,12px); line-height:1.7; letter-spacing:.03em}
.dev-bootseq .bs-title{color:#fff; letter-spacing:.2em; margin-bottom:7%}
.dev-bootseq .bs-lines{list-style:none; margin:0; padding:0}
.dev-bootseq .bs-lines li{opacity:0; transition:opacity .25s ease}
.dev-bootseq .bs-lines li::before{content:"> "; color:#5fbf6a}
.dev-bootseq .bs-lines li.on{opacity:.82}
.dev-bootseq .bs-cur{display:inline-block; width:.55em; height:1em; background:#5fbf6a; vertical-align:-2px; margin-left:3px; animation:bscur 1.05s steps(1) infinite}
@keyframes bscur{50%{opacity:0}}
@media (prefers-reduced-motion: reduce){ .dev-bootseq .bs-cur{animation:none} }
.device.calib .dev-screen{outline:1px solid #36c5ff; background:rgba(54,197,255,.14)}
.device.calib .hot{outline:1px solid rgba(255,80,200,.85); background:rgba(255,80,200,.12)}
.nav-toggle{display:block; background:none; border:0; cursor:pointer; padding:6px; color:var(--text)}

/* ── Sections ── */
section{padding:var(--pad-y) 0; position:relative}
.tight{padding:clamp(48px,7vw,90px) 0}
.section-head{max-width:720px}
.section-head .lead{margin-top:18px}
.divider{border:0; border-top:1px solid var(--line); margin:0}

/* ── Hero ── */
.hero{padding-top:clamp(60px,10vw,120px); padding-bottom:clamp(40px,6vw,70px); text-align:center}
.hero h1{margin:0 auto; max-width:14ch}
.hero .lede{font-size:clamp(17px,2.1vw,22px); color:var(--text-2); max-width:600px; margin:24px auto 0; line-height:1.5}
.hero .lede b{color:var(--text)}
/* value signature folded into the lede's lead-in */
.values-lead{font-family:var(--mono); font-size:.74em; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--text)}
.hero-craft{margin:16px auto 0; max-width:560px; font-family:var(--mono); font-size:12.5px; letter-spacing:.03em; color:var(--text-3)}
.hero-craft b{color:var(--text-2); font-weight:500}
.hero .cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px}
.hero .reassure{margin-top:18px; font-size:13px; color:var(--text-3)}
.hero .reassure b{color:var(--text-2); font-weight:500}

/* product photo — the hero object, presented cleanly (it carries the color) */
.heroshot{margin:clamp(46px,7vw,84px) auto 0; max-width:1000px; border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg, var(--bg-2), var(--bg)); box-shadow:var(--shadow); border:1px solid var(--line)}
.heroshot img{display:block; width:100%}
.heroshot .stamp{display:none}
.figcap{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); margin-top:18px; text-align:center}

/* ── Spec strip ── */
.specs{display:grid; grid-template-columns:repeat(4,1fr); margin:clamp(48px,7vw,80px) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.specs div{padding:30px 18px; text-align:center; border-left:1px solid var(--line)}
.specs div:first-child{border-left:0}
.specs b{display:block; font-size:30px; font-weight:600; letter-spacing:-.03em; margin-bottom:6px}
.specs span{font-family:var(--mono); font-size:10.5px; color:var(--text-3); letter-spacing:.08em; text-transform:uppercase}

/* ── Feature grid (minimal, hairline-led) ── */
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:clamp(40px,5vw,64px); background:var(--line); border:1px solid var(--line)}
/* live mini-demo screen at the top of each pillar card (pillars.js) */
.pillar-demo{display:block; width:100%; aspect-ratio:16/6; min-height:92px; background:#0d0c0a; border-radius:8px; margin-bottom:20px; touch-action:none; cursor:pointer; -webkit-user-select:none; user-select:none}
.pillar-demo[data-demo="pad"]{cursor:crosshair}
/* tap-to-play sound toggle under a sounding demo (pillars.js soundBtn) */
.demo-sound{display:inline-flex; align-items:center; gap:7px; margin:-4px 0 16px; padding:6px 14px; background:transparent; color:var(--text-2); border:1px solid var(--line-2); border-radius:980px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:border-color .2s, color .2s}
.demo-sound:hover{border-color:var(--text-3)}
.demo-sound[aria-pressed="true"]{color:var(--text); border-color:var(--text-3)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--bg); padding:38px 32px; transition:background-color .3s}
.card:hover{background:var(--bg-2)}
.card .ic{width:30px; height:30px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; color:var(--text)}
.card h3{margin-bottom:10px}
.card p{font-size:15px; color:var(--text-2); margin:0; line-height:1.6}
.card.dark{background:var(--bg-2)}
.card.dark:hover{background:var(--bg-3)}

/* ── Alternating band ── */
.invert{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:center}
.split h2{font-size:clamp(28px,4vw,46px)}
.split p{font-size:17px; color:var(--text-2); margin-top:20px; line-height:1.6}

/* ── Tags ── */
.pill-row{display:flex; flex-wrap:wrap; gap:9px; margin-top:30px}
.tag{font-family:var(--mono); font-size:12px; padding:7px 14px; border:1px solid var(--line-2); border-radius:980px; color:var(--text-2)}
.note{font-size:13.5px; color:var(--text-3); margin-top:24px; max-width:640px; line-height:1.6}

/* ── Email capture ── */
.capture{text-align:center; border-top:1px solid var(--line)}
.capture h2{max-width:680px; margin:0 auto}
.capture p.sub{color:var(--text-2); max-width:540px; margin:18px auto 0; font-size:17px; line-height:1.55}
.capture form{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; max-width:480px; margin:32px auto 0}
.capture input{flex:1; min-width:240px; padding:14px 18px; border-radius:980px; border:1px solid var(--line-2); background:transparent; color:var(--text); font-size:15px; font-family:inherit; transition:border-color .2s}
.capture input::placeholder{color:var(--text-3)}
.capture input:focus{outline:none; border-color:var(--text)}
.capture .fine{font-size:12px; color:var(--text-3); margin-top:16px}
.capture .ok-msg{display:none; font-size:17px; color:var(--text); margin-top:24px}
.capture .ok-msg.show{display:block}

/* ── Footer ── */
footer.site{border-top:1px solid var(--line); padding:64px 0 44px; font-size:14px; color:var(--text-2)}
.foot-top{display:flex; justify-content:space-between; gap:36px; flex-wrap:wrap; padding-bottom:34px; border-bottom:1px solid var(--line)}
.foot-top .col h4{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); margin:0 0 16px; font-weight:400}
.foot-top .col a{display:block; text-decoration:none; color:var(--text-2); margin-bottom:11px; transition:color .18s}
.foot-top .col a:hover{color:var(--text)}
.foot-bottom{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:28px; color:var(--text-3); font-size:12px; font-family:var(--mono); letter-spacing:.04em}

/* ── Misc ── */
.engr{border:1px solid var(--line); border-radius:14px; padding:48px 40px; background:var(--bg-2); font-family:var(--mono); text-align:center}
.engr .wm{font-family:var(--logo); font-weight:500; font-size:clamp(30px,3.6vw,46px); letter-spacing:-.02em; line-height:1; color:var(--text); margin-bottom:10px}
.engr .big{font-size:clamp(20px,2.6vw,26px); color:var(--text); letter-spacing:.02em; line-height:1.45; font-weight:500}
.engr .sub{font-size:10.5px; letter-spacing:.2em; color:var(--text-3); text-transform:uppercase; margin-top:18px}
.placeholder{border:1px dashed var(--line-2); border-radius:12px; padding:38px; text-align:center; color:var(--text-3); font-size:14px; line-height:1.6}
.banner{border:1px solid var(--line); border-left:2px solid var(--text); border-radius:8px; padding:18px 22px; font-size:14.5px; color:var(--text-2); background:var(--bg-2)}
.banner b{color:var(--text)}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:clamp(40px,5vw,60px)}
.steps .step{border-top:1px solid var(--line-2); padding:20px 22px 0 0}
.steps .step .n{font-family:var(--mono); font-size:11px; color:var(--text-3); letter-spacing:.1em}
.steps .step h4{margin:10px 0 8px; font-size:16px; font-weight:600}
.steps .step p{font-size:13.5px; color:var(--text-2); margin:0; line-height:1.55}

/* ── Scroll reveal (the only motion) ── */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1)}
.reveal.in{opacity:1; transform:none}

/* ── Responsive ── */
@media(max-width:860px){
  .nav-links{position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--text); border-top:1px solid color-mix(in srgb, var(--bg) 18%, transparent); padding:8px 0; display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:15px 24px; font-size:18px}
  .nav-toggle{display:block}
  .specs{grid-template-columns:repeat(2,1fr)}
  .specs div:nth-child(odd){border-left:0}
  .specs div:nth-child(3),.specs div:nth-child(4){border-top:1px solid var(--line)}
  .features,.cols-2{grid-template-columns:1fr}
  .split,.steps{grid-template-columns:1fr; gap:28px}
  .steps .step{padding-right:0}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1!important; transform:none!important; transition:none!important}
  body,.btn{transition:none}
}