/* ══════════════════════════════════════════════════════════
   Motonari Studio — archival site
   Type:  Figtree — one family, matching the Figma kit's single-family system
   ══════════════════════════════════════════════════════════ */

/* ── self-hosted type ────────────────────────────────────
   One family, the way the Figma kit does it (kit uses Gilroy; Figtree is the
   closest open equivalent). Subset to Latin + punctuation: 175 KB of TTF down
   to 60 KB of woff2. Self-hosted — no third-party request.               */
@font-face{font-family:"Figtree";src:url("fonts/Figtree-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("fonts/Figtree-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("fonts/Figtree-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("fonts/Figtree-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("fonts/Figtree-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

:root{
  color-scheme:light dark;

  /* Ink and the type scale below are lifted from the Figma UI kit open in the
     desktop app (Dev Mode MCP, node 0:4802 "Typography Black"): ink #161c2d and
     a size/line-height/tracking curve of 60/65/-2px → 19/32/-0.2px. The kit's
     own look — stock photography, blob shapes, indigo CTAs — is deliberately
     NOT used; only its measurable typographic system. */
  --bg:#fbfbfd;
  --bg-2:#f1f2f6;
  --paper:#ffffff;
  --ink:#161c2d;
  --ink-2:#545a6b;
  --ink-3:#646a7d;   /* small uppercase labels — must clear 4.5:1 on --bg-2, the tighter of the two */
  --rule:#dcdde3;
  --rule-soft:#e9eaef;
  --accent:#b8352b;
  --accent-2:#8f2820;
  --on-accent:#ffffff;   /* text on an accent fill — must clear 4.5:1 */
  --wash:rgba(184,53,43,.07);
  --shadow-sm:0 1px 2px rgba(20,20,26,.05),0 8px 28px rgba(20,20,26,.06);
  --shadow-lg:0 2px 6px rgba(20,20,26,.06),0 28px 70px rgba(20,20,26,.11);

  --wrap:1160px;
  --wrap-narrow:760px;
  --wrap-wide:1160px;

  --display:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --sans:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
}

@media (prefers-color-scheme:dark){
  :root{
    --bg:#0c0e14;
    --bg-2:#12151d;
    --paper:#161a23;
    --ink:#eef0f6;
    --ink-2:#a1a7b8;
    --ink-3:#868da0;   /* small uppercase labels — must clear 4.5:1 on --bg */
    --rule:#2a2f3a;
    --rule-soft:#1f242e;
    --accent:#ff6b5b;
    --accent-2:#ff8b7d;
    --on-accent:#12131a;   /* the light coral needs dark text, not white */
    --wash:rgba(255,107,91,.1);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.5);
    --shadow-lg:0 2px 6px rgba(0,0,0,.5),0 28px 70px rgba(0,0,0,.7);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.7;
  font-weight:400;letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:3px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 26px}
.wrap-wide{width:100%;max-width:var(--wrap-wide);margin:0 auto;padding:0 26px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;z-index:99;background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:4px}

/* ── motion: opt-in only ─────────────────────────────────
   Content is visible by default. The .js-anim class is added by a head
   script solely when IntersectionObserver exists and motion is allowed.
   If that script never runs, nothing is ever hidden.                    */
.js-anim .reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
}
.js-anim .reveal.in{opacity:1;transform:none}
.js-anim .reveal[data-d="1"]{transition-delay:.08s}
.js-anim .reveal[data-d="2"]{transition-delay:.16s}
.js-anim .reveal[data-d="3"]{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .js-anim .reveal{opacity:1!important;transform:none!important}
  .device-3d{--rx:0deg;--ry:0deg;transform:none!important}
}

/* ── type scale ──────────────────────────────────────────
   Ratios taken from the Figma kit's "Typography Black" sheet: the tracking
   tightens and the leading closes as the size grows.
     60px → 1.083 / -0.033em      24px → 1.417 / -0.021em
     48px → 1.208 / -0.037em      21px → 1.524 / -0.024em
     36px → 1.333 / -0.033em      19px → 1.684 / -0.011em            */
.display{
  font-family:var(--display);font-weight:800;
  font-feature-settings:"ss01" 1;
}
.d-1{font-size:clamp(2.9rem,7.1vw,5.4rem);line-height:1.083;letter-spacing:-.033em}
.d-2{font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.208;letter-spacing:-.037em}
.d-3{font-size:clamp(1.35rem,2.2vw,1.72rem);line-height:1.417;letter-spacing:-.021em}

.kicker{
  font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:11px;margin-bottom:22px;
}
.kicker::after{content:"";height:1px;flex:1;max-width:64px;background:currentColor;opacity:.35}

.lede{
  font-size:clamp(1.06rem,1.55vw,1.24rem);line-height:1.684;letter-spacing:-.011em;
  color:var(--ink-2);max-width:44ch;margin-top:26px;font-weight:400;
}
.prose{color:var(--ink-2);max-width:62ch;margin-top:22px;line-height:1.684;letter-spacing:-.011em}
.prose b{color:var(--ink);font-weight:500}

/* ── buttons ────────────────────────────────────────────── */
.actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:38px}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:16px 30px;border-radius:8px;text-decoration:none;
  font-size:16px;font-weight:700;letter-spacing:-.006em;
  font-family:var(--sans);border:1px solid var(--accent);
  background:var(--accent);color:var(--on-accent);transition:.28s var(--ease);
  box-shadow:0 8px 22px -10px var(--accent);
}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.tlink{
  font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:-.006em;
  color:var(--accent);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:2px;transition:.25s var(--ease);
}
.tlink:hover{opacity:.6}

/* ── scroll progress ────────────────────────────────────── */
.progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:80;
  transform:scaleX(var(--p,0));transform-origin:0 50%;
  background:var(--accent);pointer-events:none;
}

/* ── archive notice ─────────────────────────────────────── */
.archive-bar{
  background:var(--ink);color:var(--bg);
  border-top:3px solid var(--accent);
}
.archive-inner{
  display:flex;align-items:center;justify-content:center;
  gap:13px;flex-wrap:wrap;text-align:center;padding:10px 0;
}
.archive-bar p{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.72);letter-spacing:.01em}
@media (prefers-color-scheme:dark){.archive-bar p{color:rgba(13,13,16,.75)}}
.archive-bar b{color:var(--bg);font-weight:500}
.archive-tag{
  flex:none;font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);background:var(--accent);padding:4px 10px;border-radius:3px;
}
@media (prefers-color-scheme:dark){.archive-tag{color:#12131a}}

/* ── nav ────────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(160%) blur(18px);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  border-bottom:1px solid transparent;transition:border-color .4s var(--ease);
}
.nav.stuck{border-bottom-color:var(--rule-soft)}
.nav-inner{display:flex;align-items:center;gap:34px;height:66px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand .emblem{width:26px;height:26px;color:var(--accent);flex:none;transition:transform .6s var(--ease)}
.brand:hover .emblem{transform:rotate(90deg)}
.brand-name{font-family:var(--display);font-size:18px;letter-spacing:.01em}
.brand-name em{font-style:normal;color:var(--ink-3)}
.nav-links{display:flex;align-items:center;gap:30px;margin-left:auto}
.nav-links a{
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);text-decoration:none;transition:color .25s;
}
.nav-links a:hover{color:var(--accent)}
.nav-flag{
  flex:none;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid var(--rule);padding:5px 11px;border-radius:3px;
  margin-left:22px;
}


/* ══ revision rail ═══════════════════════════════════════════════════
   The seven board spins, as a track. The connecting line draws itself in
   once the rail scrolls into view.                                      */
.rev-rail{
  list-style:none;margin:64px 0 0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(7,1fr);gap:10px;
}
.rev-rail::before{
  content:"";position:absolute;left:0;top:23px;height:2px;
  width:calc(600% / 7 + 23px);
  background:var(--rule-soft);
}
/* Drawn state is the DEFAULT. Only .js-anim collapses it, so with no JS the
   line is simply there, matching how .reveal is handled. */
.rev-rail::after{
  content:"";position:absolute;left:0;top:23px;height:2px;
  width:calc(600% / 7 + 23px);
  background:linear-gradient(90deg,var(--rule) 0%,var(--accent) 100%);
  transform-origin:0 50%;
}
.js-anim .rev-rail::after{
  transform:scaleX(0);
  transition:transform 1.6s cubic-bezier(.22,.61,.36,1) .15s;
}
.js-anim .rev-rail.in::after{transform:scaleX(1)}
.rev-rail li{position:relative;padding-top:0;text-align:left}
.rev-id{
  position:relative;z-index:1;
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--bg);border:2px solid var(--rule);
  font-size:15px;font-weight:800;letter-spacing:-.02em;color:var(--ink-2);
  transition:border-color .5s var(--ease),color .5s var(--ease),transform .5s var(--ease);
}
.rev-id.is-final{border-color:var(--accent);color:var(--accent)}
.js-anim .rev-rail.in .rev-id.is-final{transform:scale(1.06)}
.rev-note{
  display:block;margin-top:14px;font-size:12.5px;font-weight:600;
  letter-spacing:.01em;color:var(--ink-3);line-height:1.4;
}

/* ══ motion ══════════════════════════════════════════════════════════
   Restrained on purpose: a short rise on entry, a rule that draws under
   each kicker, and a lift on interactive rows. Nothing loops except the
   device, which is demonstrating the product.                          */
.js-anim .reveal .kicker::after{
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .7s var(--ease) .2s;
}
.js-anim .reveal.in .kicker::after{transform:scaleX(1)}

.feature{transition:background-color .4s var(--ease)}
.feature:hover{background:color-mix(in srgb,var(--accent) 4%,transparent)}
.feature:hover .feature-n{color:var(--accent)}
.feature-n{transition:color .35s var(--ease)}

.guards li{transition:background-color .45s var(--ease)}
.guards li:hover{background:#101016}
.guards li:hover .guard-n{letter-spacing:.2em}
.guard-n{transition:letter-spacing .45s var(--ease)}

.chains li{transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.chains li:hover{transform:translateY(-3px)}

.specs > div{transition:background-color .35s var(--ease)}
.specs > div:hover{background:color-mix(in srgb,var(--ink) 3%,transparent)}

.faq summary{transition:color .25s var(--ease),padding-left .35s var(--ease)}
.faq details[open] summary{color:var(--accent)}
.faq summary:hover{padding-left:6px}

/* nav condenses once you leave the hero */
.nav{transition:height .35s var(--ease),border-color .4s var(--ease),
  background-color .4s var(--ease)}
.nav-inner{transition:height .35s var(--ease)}
.nav.stuck .nav-inner{height:58px}
.brand .emblem{transition:transform .6s var(--ease),width .35s var(--ease),height .35s var(--ease)}
.nav.stuck .brand .emblem{width:23px;height:23px}

/* ── sections ───────────────────────────────────────────── */
.band{padding:132px 0;position:relative}
.band.paper{background:var(--bg-2)}
.section-head{max-width:none}
.section-head h2{max-width:19ch}
.section-head .prose{max-width:58ch}

/* hairline divider used between blocks */
.rule{height:1px;background:var(--rule-soft);border:0;margin:0}

/* ── hero ───────────────────────────────────────────────── */
.hero{padding:96px 0 118px;position:relative;overflow:hidden}
.hero-grid{
  display:grid;grid-template-columns:1.02fr .98fr;
  gap:64px;align-items:center;
}
.hero .lede{max-width:40ch}

/* ══ hero device ═══════════════════════════════════════════════════════
   Real extrusion: twelve stacked faces on the Z axis give the body genuine
   thickness with rounded edges, which flat side-planes cannot do on a
   rounded rectangle. Shading darkens with depth so the rim reads as metal. */
.stage{perspective:1500px;perspective-origin:50% 42%;display:flex;justify-content:center}
.device-3d{
  position:relative;width:252px;height:396px;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,8deg)) rotateY(var(--ry,-18deg));
  transition:transform .5s var(--ease);
  animation:bob 8s ease-in-out infinite;
}
.dev-body{position:absolute;inset:0;transform-style:preserve-3d}
@keyframes bob{0%,100%{translate:0 -7px}50%{translate:0 9px}}

.dev-extrude{
  position:absolute;inset:0;border-radius:34px;
  background:linear-gradient(102deg,#20242a 0%,#171b20 38%,#0e1115 100%);
}
.e1{transform:translateZ(-1.6px)} .e2{transform:translateZ(-3.2px)}
.e3{transform:translateZ(-4.8px)} .e4{transform:translateZ(-6.4px)}
.e5{transform:translateZ(-8px)}   .e6{transform:translateZ(-9.6px)}
.e7{transform:translateZ(-11.2px)}.e8{transform:translateZ(-12.8px)}
.e9{transform:translateZ(-14.4px)}.e10{transform:translateZ(-16px)}
.e11{transform:translateZ(-17.6px)}
.e12{transform:translateZ(-19.2px);background:#090b0d;
  box-shadow:0 26px 44px -14px rgba(0,0,0,.7)}

/* front face: anodised aluminium, lit from upper left */
.dev-face{
  position:absolute;inset:0;border-radius:34px;transform:translateZ(0);
  background:
    radial-gradient(120% 80% at 18% 8%, rgba(255,255,255,.13) 0%, transparent 46%),
    linear-gradient(150deg,#3c434c 0%,#2a3038 30%,#1c2127 62%,#12161a 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.30),
    inset 1.5px 0 0 rgba(255,255,255,.10),
    inset -1.5px 0 0 rgba(0,0,0,.45),
    inset 0 -2px 0 rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.05);
}
/* machined chamfer just inside the edge */
.dev-chamfer{
  position:absolute;inset:5px;border-radius:29px;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.045);
}
/* moving specular, driven by the tilt */
.dev-spec{
  position:absolute;inset:0;border-radius:34px;pointer-events:none;
  background:linear-gradient(var(--spec,116deg),
    rgba(255,255,255,.26) 0%,rgba(255,255,255,.05) 22%,transparent 46%);
  mix-blend-mode:screen;transform:translateZ(.4px);
}

/* recessed OLED */
.dev-screen{
  position:absolute;left:24px;right:24px;top:40px;height:132px;border-radius:13px;
  transform:translateZ(-1.5px);overflow:hidden;
  background:linear-gradient(180deg,#06231b 0%,#02100b 62%,#010907 100%);
  box-shadow:
    inset 0 2px 10px rgba(0,0,0,.92),
    inset 0 0 0 1px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,255,255,.06),
    0 0 22px -4px rgba(52,211,153,.18);
}
.scr-inner{position:absolute;inset:0;padding:15px 17px}
.scr-top{
  display:flex;justify-content:space-between;align-items:center;
  font-size:7.5px;font-weight:700;letter-spacing:.2em;color:#3f6d5c;
}
.scr-net{color:#34d399;opacity:.85}
.scr-amt{
  font-size:21px;font-weight:700;letter-spacing:-.02em;color:#eafff6;margin-top:14px;
  text-shadow:0 0 14px rgba(52,211,153,.45);
}
.scr-to{font-size:9.5px;font-weight:500;color:#5d8a78;margin-top:6px;letter-spacing:.02em}
.scr-bar{
  position:absolute;left:17px;right:17px;bottom:15px;height:2.5px;border-radius:2px;
  background:rgba(52,211,153,.16);overflow:hidden;
}
.scr-bar i{
  position:absolute;inset:0;border-radius:2px;background:linear-gradient(90deg,#1f9e73,#34d399);
  transform-origin:0 50%;animation:fill 5s var(--ease) infinite;
  box-shadow:0 0 8px rgba(52,211,153,.6);
}
@keyframes fill{0%,6%{transform:scaleX(0)}50%,100%{transform:scaleX(1)}}
/* glass over the panel */
.scr-glass{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(128deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.03) 26%,transparent 52%);
}

/* machined confirm button, sunk into the shell */
.dev-btn{
  position:absolute;left:50%;top:238px;width:84px;height:84px;margin-left:-42px;
  transform:translateZ(-1px);display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 50% 42%,#0b0e11,#050709);
  box-shadow:inset 0 3px 7px rgba(0,0,0,.9),inset 0 -1px 0 rgba(255,255,255,.07);
}
.dev-btn-ring{
  position:absolute;inset:5px;border-radius:50%;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13);
}
.dev-btn-face{
  position:absolute;inset:11px;border-radius:50%;transform:translateZ(3px);
  background:
    radial-gradient(circle at 36% 28%, #363d45 0%, #232930 42%, #14181d 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.22),
    inset 0 -2px 4px rgba(0,0,0,.6),
    0 3px 8px rgba(0,0,0,.55);
  display:grid;place-items:center;color:#34d399;
}
.dev-btn-face svg{width:30px;height:30px}
.dev-btn-face svg path{
  stroke-dasharray:40;stroke-dashoffset:40;
  animation:tick 5s var(--ease) infinite;
  filter:drop-shadow(0 0 5px rgba(52,211,153,.65));
}
@keyframes tick{0%,50%{stroke-dashoffset:40}62%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:40}}
.dev-halo{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;
  border:1px solid rgba(52,211,153,.5);transform:translateZ(3px);
  animation:halo 5s ease-out infinite;
}
@keyframes halo{
  0%,48%{transform:translateZ(3px) scale(.98);opacity:0}
  60%{transform:translateZ(3px) scale(1.28);opacity:.75}
  82%,100%{transform:translateZ(3px) scale(1.5);opacity:0}
}

.dev-hint{
  position:absolute;left:0;right:0;top:338px;text-align:center;transform:translateZ(.2px);
  font-size:7.5px;font-weight:700;letter-spacing:.26em;color:#57606b;
}

/* USB-C: metal shell with a dark slot */
.dev-usb{
  position:absolute;left:50%;bottom:13px;width:52px;height:12px;margin-left:-26px;
  border-radius:6px;transform:translateZ(-1px);
  background:linear-gradient(180deg,#2b3138,#161a1f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 2px rgba(0,0,0,.8);
  display:grid;place-items:center;
}
.dev-usb i{display:block;width:38px;height:4px;border-radius:2px;background:#05070a;
  box-shadow:inset 0 1px 1px rgba(0,0,0,.9)}

/* contact shadow: tight core plus wide ambient */
.stage-floor{
  width:200px;height:26px;margin:26px auto 0;position:relative;
}
.stage-floor::before,.stage-floor::after{content:"";position:absolute;left:50%;top:50%;border-radius:50%}
.stage-floor::before{
  width:120px;height:13px;margin:-6px 0 0 -60px;
  background:rgba(0,0,0,.42);filter:blur(7px);
}
.stage-floor::after{
  width:230px;height:26px;margin:-13px 0 0 -115px;
  background:rgba(0,0,0,.22);filter:blur(17px);
}
@media (prefers-color-scheme:dark){
  .stage-floor::before{background:rgba(0,0,0,.8)}
  .stage-floor::after{background:rgba(0,0,0,.55)}
}

/* ── figures / stat rail ────────────────────────────────── */
  list-style:none;margin:96px 0 0;padding:34px 0 0;
  border-top:1px solid var(--rule-soft);
  display:grid;grid-template-columns:repeat(4,1fr);gap:26px;
}
  display:block;font-family:var(--display);font-size:2.5rem;font-weight:400;
  line-height:1.333;letter-spacing:-.033em;
}
  display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin-top:12px;line-height:1.55;
}

/* ── security section (dark) ─────────────────────────────── */
.noir{background:#0a0a0c;color:#f0eee9;padding:132px 0;overflow:hidden}
.noir .kicker{color:#ff6b5b}
.noir .lede,.noir .prose{color:#a8a8b2}
.noir .prose b{color:#f0eee9}

.guards{
  list-style:none;margin:72px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#1c1c22;
}
.guards li{background:#0a0a0c;padding:44px 40px}
.guard-n{
  display:block;font-size:12px;font-weight:700;letter-spacing:.16em;
  color:#ff6b5b;margin-bottom:18px;
}
.guards h3{
  font-family:var(--display);font-weight:700;font-size:1.34rem;
  line-height:1.417;letter-spacing:-.021em;margin-bottom:11px;color:#f0eee9;
}
.guards p{color:#a8a8b2;font-size:16px;line-height:1.66}

/* ── feature list (editorial rows, not cards) ───────────── */
.features{margin-top:76px;border-top:1px solid var(--rule)}
.feature{
  display:grid;grid-template-columns:64px 1fr 1.25fr;gap:34px;align-items:start;
  padding:40px 0;border-bottom:1px solid var(--rule-soft);
}
.feature-n{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--accent);padding-top:6px;
}
.feature h3{font-family:var(--display);font-size:1.42rem;font-weight:400;line-height:1.417;letter-spacing:-.021em}
.feature p{color:var(--ink-2);font-size:15.5px}

/* ── steps ──────────────────────────────────────────────── */
.steps{list-style:none;margin:72px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:46px}
.steps li{padding-top:26px;border-top:2px solid var(--ink)}
.steps li:nth-child(2){border-top-color:var(--accent)}
.step-k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--ink-3)}
.steps h3{font-family:var(--display);font-size:1.32rem;font-weight:400;line-height:1.524;letter-spacing:-.024em;margin:14px 0 10px}
.steps p{color:var(--ink-2);font-size:15.5px}

/* ── chains ─────────────────────────────────────────────── */
.chains{list-style:none;margin:72px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule-soft)}
.chains li{background:var(--bg);padding:46px 40px}
.band.paper .chains li{background:var(--bg-2)}
.chain-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--accent);display:block;margin-bottom:20px}
.chains h3{font-family:var(--display);font-size:1.62rem;font-weight:400;line-height:1.417;letter-spacing:-.021em;margin-bottom:12px}
.chains p{color:var(--ink-2);font-size:15.5px}

/* ── spec table ─────────────────────────────────────────── */
.specs{margin-top:72px;border-top:1px solid var(--rule)}
.specs > div{
  display:grid;grid-template-columns:250px 1fr;gap:30px;
  padding:22px 0;border-bottom:1px solid var(--rule-soft);
}
.specs dt{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);padding-top:4px;
}
.specs dd{margin:0;font-size:15.5px;color:var(--ink)}

/* ── footnote ───────────────────────────────────────────── */

/* ── faq ────────────────────────────────────────────────── */
.faq{margin-top:72px;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule-soft)}
.faq summary{
  list-style:none;cursor:pointer;padding:26px 44px 26px 0;position:relative;
  font-family:var(--display);font-size:1.2rem;line-height:1.524;letter-spacing:-.024em;
  transition:color .25s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:13px;height:13px;
  margin-top:-7px;
  border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);
  transform:rotate(45deg) translateY(-3px);
  transform-origin:center;transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.faq details p{
  color:var(--ink-2);font-size:15.5px;line-height:1.684;letter-spacing:-.011em;
  max-width:68ch;padding:0 44px 30px 0;margin-top:-4px;
}

/* inline links inside prose/spec tables */

/* ── pull note ──────────────────────────────────────────── */
.note{
  margin-top:76px;padding:44px 48px;background:var(--paper);
  border:1px solid var(--rule-soft);box-shadow:var(--shadow-sm);
}
.note p{color:var(--ink-2);font-size:16px;max-width:74ch}
.note p + p{margin-top:16px}
.note b{color:var(--ink);font-weight:500}
.note .kicker{margin-bottom:18px}
/* impersonation warning — same shell, heavier voice */
.note-warn{border-left:3px solid var(--ink);background:var(--bg-2)}
.note-warn .kicker{color:var(--ink)}
.note-warn .kicker::after{opacity:.25}

.fineprint{
  margin-top:30px;font-family:var(--mono);font-size:10.5px;line-height:1.8;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
}

/* ── utilities ──────────────────────────────────────────── */
.lede-mid{margin-inline:auto}
.actions-mid{justify-content:center}

/* ── 404 ────────────────────────────────────────────────── */
.lost{min-height:74vh;display:grid;place-items:center;text-align:center}
.lost .emblem{width:52px;height:52px;color:var(--accent);margin:0 auto 34px}
.lost .code{
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:20px;
}

/* ── footer ─────────────────────────────────────────────── */
.foot{background:var(--ink);color:var(--bg);padding:76px 0 64px}
.foot-inner{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:start}
.foot-mark{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.foot-mark .emblem{width:30px;height:30px;color:var(--accent)}
.foot-mark span{font-family:var(--display);font-size:19px}
.foot p{font-size:13.5px;line-height:1.75;color:color-mix(in srgb,var(--bg) 62%,transparent)}
.foot b{color:var(--bg);font-weight:500}
.foot a{color:color-mix(in srgb,var(--bg) 62%,transparent);text-decoration:underline;text-underline-offset:3px}
.foot a:hover{color:var(--accent)}
.foot-meta{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:14px;color:var(--accent);
}

/* ── print ──────────────────────────────────────────────
   The page is a record, so it should print like one: no chrome, no 3D,
   everything expanded, and link targets spelled out.                    */
@media print{
  @page{margin:18mm 16mm}
  :root{--ink:#000;--ink-2:#333;--ink-3:#555;--bg:#fff;--bg-2:#fff;
        --rule:#bbb;--rule-soft:#ddd;--accent:#000;--paper:#fff}
  body{background:#fff;color:#000;font-size:10.5pt;line-height:1.5}
  .progress,.nav,.stage,.stage-floor,.dev-spec,.skip{display:none!important}
  .band,.noir,.hero{padding:0 0 14pt!important;background:#fff!important;color:#000!important}
  .noir .prose,.noir .lede,.guards p{color:#333!important}
  .hero-grid,.foot-inner{display:block!important}
  .chains,.steps,.guards,.features{display:block!important}
  .feature,.steps li,.chains li,.guards li{page-break-inside:avoid;break-inside:avoid}
  .d-1{font-size:26pt!important}.d-2{font-size:17pt!important}
  .note,.faq details{page-break-inside:avoid;break-inside:avoid;box-shadow:none!important;
    border:1px solid #ccc!important;background:#fff!important}
  .faq details{border:0!important;border-bottom:1px solid #ddd!important}
  .faq details p{display:block!important}       /* print answers even if collapsed */
  .faq summary::after{display:none}
  .foot{background:#fff!important;color:#000!important;border-top:1px solid #bbb}
  .foot p,.foot a{color:#333!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#555;word-break:break-all}
  .archive-bar{background:#fff!important;color:#000!important;border-bottom:1.5pt solid #000}
  .archive-bar p,.archive-bar b,.archive-tag{color:#000!important}
}

/* ── responsive ─────────────────────────────────────────── */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:56px;text-align:center}
  .hero .kicker{justify-content:center}
  .hero .kicker::before{content:"";height:1px;flex:1;max-width:64px;background:currentColor;opacity:.35}
  .hero .lede{margin-inline:auto}
  .hero .actions{justify-content:center}
  .feature{grid-template-columns:44px 1fr;gap:22px}
  .feature p{grid-column:2}
  .guards{grid-template-columns:1fr}
  .rev-rail{grid-template-columns:repeat(4,1fr);gap:26px 10px}
  .rev-rail::before,.rev-rail::after{display:none}
}
@media (max-width:820px){
  .nav-links{display:none}
    .band{padding:92px 0}
  .noir{padding:96px 0}
  .steps{grid-template-columns:1fr;gap:34px}
  .chains{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .band,.noir{padding:74px 0}
  .hero{padding:66px 0 84px}
  /* 0.817 of the desktop geometry, part by part */
  .device-3d{width:206px;height:324px}
  .dev-face,.dev-extrude,.dev-spec{border-radius:28px}
  .dev-chamfer{inset:4px;border-radius:24px}
  .dev-screen{top:33px;height:108px;left:20px;right:20px;border-radius:11px}
  .scr-inner{padding:12px 14px}
  .scr-amt{font-size:17px;margin-top:11px}
  .scr-to{font-size:8.5px}
  .scr-bar{left:14px;right:14px;bottom:12px}
  .dev-btn{top:194px;width:69px;height:69px;margin-left:-34.5px}
  .dev-btn-face{inset:9px}
  .dev-btn-face svg{width:25px;height:25px}
  .dev-hint{top:276px;font-size:6.5px}
  .dev-usb{bottom:11px;width:43px;height:10px;margin-left:-21.5px}
  .dev-usb i{width:31px;height:3px}
  .stage-floor{margin-top:20px}
  .stage-floor::before{width:98px}
  .stage-floor::after{width:188px}
      .guards li{padding:34px 26px}
  .rev-rail{grid-template-columns:repeat(3,1fr)}
  .rev-id{width:40px;height:40px;font-size:13px}
  .rev-note{font-size:11.5px;margin-top:10px}
  .specs > div{grid-template-columns:1fr;gap:7px;padding:18px 0}
  .faq summary{font-size:1.06rem;padding:22px 34px 22px 0}
  .faq details p{padding-right:0;font-size:15px}
    .chains li{padding:34px 26px}
  .note{padding:32px 26px}
  .foot-inner{grid-template-columns:1fr;gap:34px}
  .feature{grid-template-columns:1fr;gap:12px;padding:32px 0}
  .feature-n{padding-top:0}
  .feature p{grid-column:auto}   /* undo the 2-col rule from the 1000px breakpoint */
}