/* ═══════════════════════════════════════════════════════════════════
   LineKeeper — marketing site. Self-contained: local fonts, no CDN.
   World: the andon board hung over the line. Matte board black, LED-white
   numerals, a hairline cell grid, one green RUNNING lamp, red STOPPED,
   amber for limits. Archivo (wide-heavy caps = the wordmark's voice) for
   headings and body, JetBrains Mono for tags, values and time codes.
   Square cells, pushbutton controls. No pills, no gradients, no glass.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Fonts (local, variable) ── */
@font-face { font-family:'Archivo'; font-weight:100 900; font-stretch:62% 125%; font-display:swap; src:url(assets/fonts/archivo-var-latin.woff2) format('woff2-variations'); }
@font-face { font-family:'JetBrains Mono'; font-weight:100 800; font-display:swap; src:url(assets/fonts/jetbrains-mono-var-latin.woff2) format('woff2-variations'); }

/* ── Tokens ── */
/* The wall of the plant: light, warm grey. The board objects (top rail, hero,
   mocks, calculator readout, footer) carry the dark tokens via .on-board. */
:root {
    color-scheme:light;
    --bg:        #ebeae6;   /* wall */
    --bg-2:      #f6f5f2;   /* raised cell */
    --bg-3:      #ffffff;
    --bg-4:      #d9d8d2;
    --ink:       #121317;
    --ink-2:     #3f4146;
    --muted:     #5f625e;   /* 5.2:1 on the wall */
    --line:      rgba(18,19,23,.10);
    --line-2:    rgba(18,19,23,.18);
    --line-3:    rgba(18,19,23,.34);
    /* lamps: the only color. *-text variants keep AA on the light wall. */
    --run:       #3be37f;
    --run-ink:   #052a14;
    --run-text:  #0b6d35;
    --stop:      #ff5f52;
    --stop-text: #c4271c;
    --warn:      #ffb648;
    --warn-text: #8a5200;
    /* product identity (LK Go / LK Up / LK On), the tile colours of branding/app-icons.
       Identity, not state: only the product tile image or the .pt square beside a
       product name (DESIGN.md "Product Tile Rule"). Never text, fills, buttons or lamps. */
    --prod-go-deep:   #073f3a;
    --prod-go:        #0f8f7f;
    --prod-go-bright: #22c6a6;
    --prod-up-deep:   #1c1a66;
    --prod-up:        #3a3fc2;
    --prod-up-bright: #6f79f2;
    --prod-on-deep:   #7a3703;
    --prod-on:        #cf7607;
    --prod-on-bright: #ffb648;
    /* aliases kept for page-scoped styles written against the old tokens */
    --accent:    var(--run-text);
    --accent-2:  var(--run-text);
    --ok:        var(--run-text);
    --ok-dark:   var(--run);
    --bad:       var(--stop-text);
    --card-ink:  #0e0f11;
    --surface:   var(--bg-2);
    --surface-2: var(--bg-4);
    --font:      'Archivo', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --display:   'Archivo', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --mono:      'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --r:         4px;
    --r-lg:      6px;
    --r-xl:      8px;
    --shadow:    0 24px 60px rgba(18,19,23,.18);
    --wrap:      1280px;
    --nav-h:     64px;
}
.on-board, .nav, .subnav, .hero, .page-band, .footer, .mock, .device, .calc-out, .lightbox, .fb-card, .ck-banner {
    color-scheme:dark;
    --bg:        #0e0f11;
    --bg-2:      #141517;
    --bg-3:      #1a1c1f;
    --bg-4:      #232529;
    --ink:       #f2f2ee;
    --ink-2:     #c9cbc6;
    --muted:     #8f928e;
    --line:      rgba(255,255,255,.10);
    --line-2:    rgba(255,255,255,.20);
    --line-3:    rgba(255,255,255,.36);
    --run-text:  var(--run);
    --stop-text: var(--stop);
    --warn-text: var(--warn);
    --accent:    var(--run);
    --ok:        var(--run);
    --bad:       var(--stop);
    --surface:   var(--bg-2);
    --surface-2: var(--bg-3);
    --shadow:    0 24px 60px rgba(0,0,0,.55);
    color:var(--ink);
}
.hero, .page-band, .footer { background:var(--bg); }

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scrollbar-color:var(--bg-4) var(--bg); }
body {
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font);
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    caret-color:var(--run);
}
::selection { background:var(--run); color:var(--run-ink); }
::-webkit-scrollbar { width:12px; height:12px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--bg-4); border:3px solid var(--bg); border-radius:8px; }
img, svg, canvas { max-width:100%; display:block; }
a { color:var(--ink); text-decoration:none; text-underline-offset:3px; text-decoration-thickness:1px; }
p a, li a, td a, .footer-note a, .plan-fine a, .get-fine a, .problem-note a { text-decoration:underline; text-decoration-color:var(--line-3); }
p a:hover, li a:hover, td a:hover { text-decoration-color:var(--ink); }
p a.btn, li a.btn, td a.btn, p a.appstore-badge { text-decoration:none; }
b, strong { font-weight:600; color:var(--ink); }
em { font-style:normal; font-weight:600; color:var(--ink); }
:focus-visible { outline:2px solid var(--warn); outline-offset:3px; border-radius:2px; }
button, input, select, textarea { font:inherit; color:inherit; }
table { font-variant-numeric:tabular-nums; }

.wrap { max-width:var(--wrap); margin:0 auto; padding:0 28px; }
.wrap-narrow { max-width:880px; }
.mono { font-family:var(--mono); }
.num { font-variant-numeric:tabular-nums; }

/* ── Type scale ── */
h1, h2, h3, h4 { font-family:var(--display); text-wrap:balance; }
h1 {
    font-stretch:125%; font-weight:800; text-transform:uppercase;
    font-size:clamp(34px, 4.6vw, 62px); line-height:.98; letter-spacing:-.005em;
}
h2 {
    font-stretch:112%; font-weight:700;
    font-size:clamp(28px, 3.3vw, 42px); line-height:1.06; letter-spacing:-.015em;
}
h3 { font-stretch:106%; font-weight:700; font-size:21px; line-height:1.25; letter-spacing:-.01em; }
p, li { max-width:70ch; }
.sec-head { max-width:720px; margin-bottom:40px; }
.sec-head h2 { margin-bottom:12px; }
.sec-head p { color:var(--ink-2); }

/* Board label: the row label of the andon. Small caps, tracked, muted. */
.eyebrow, .cell-label, .sec-label, .path-time, .plan-kicker, .get-kicker,
.case-tag, .guide-tag, .footer-resources span,
.gear-title, .thanks-order, .calc-tile span, .dev-chip, .rec-title {
    display:block; font-family:var(--font); font-stretch:112%;
    font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
    color:var(--muted); line-height:1.4;
}
.eyebrow { margin-bottom:14px; }
.eyebrow::before, .sec-label::before { content:''; display:inline-block; width:8px; height:8px; margin-right:10px; vertical-align:1px; background:var(--muted); }

/* ── Lamps ── */
.lamp {
    display:inline-block; width:10px; height:10px; border-radius:50%;
    background:var(--bg-4); vertical-align:middle; flex:none;
    transition:background .3s, box-shadow .3s;
}
.lamp.run  { background:var(--run);  box-shadow:0 0 0 3px rgba(59,227,127,.14), 0 0 14px rgba(59,227,127,.7); }
.lamp.stop { background:var(--stop); box-shadow:0 0 0 3px rgba(255,95,82,.14), 0 0 14px rgba(255,95,82,.7); }
.lamp.warn { background:var(--warn); box-shadow:0 0 0 3px rgba(255,182,72,.14), 0 0 14px rgba(255,182,72,.6); }
.lamp.blink { animation:lamp-blink 1.1s steps(2) infinite; }
@keyframes lamp-blink { 50% { opacity:.3; box-shadow:none; } }

/* LED dot-matrix on the board's live counters */
.led {
    -webkit-mask-image:radial-gradient(circle, #000 1.05px, transparent 1.5px);
    mask-image:radial-gradient(circle, #000 1.05px, transparent 1.5px);
    -webkit-mask-size:3px 3px; mask-size:3px 3px;
    -webkit-mask-position:center; mask-position:center;
}

/* ── Buttons: pushbuttons ── */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    min-height:50px; padding:0 22px; border-radius:2px;
    font-family:var(--font); font-stretch:106%; font-size:14.5px; font-weight:700;
    letter-spacing:.04em; text-transform:uppercase;
    border:1px solid transparent; cursor:pointer; white-space:normal; text-align:center; line-height:1.25; max-width:100%;
    padding-top:10px; padding-bottom:10px;
    transition:background-color .15s ease, border-color .15s ease, transform .08s ease, box-shadow .15s ease;
}
.btn-primary { background:var(--run); color:var(--run-ink); border-color:#1f8a4c; box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.22); }
.btn-primary:hover { background:#57ea92; }
.btn-primary:active { transform:translateY(1px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2), inset 0 2px 6px rgba(0,0,0,.4); }
.btn-ghost { background:var(--bg-2); color:var(--ink); border-color:var(--line-3); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), inset 0 -2px 0 rgba(0,0,0,.35); }
.btn-ghost:hover { border-color:var(--ink); }
.btn-ghost:active { transform:translateY(1px); box-shadow:inset 0 2px 6px rgba(0,0,0,.5); }
.btn-sm { min-height:40px; padding:0 16px; font-size:13px; }
.btn-wide { width:100%; }
.btn[disabled], .btn.is-busy { opacity:.55; cursor:default; pointer-events:none; }

/* ═══════════ NAV: the board's top rail ═══════════ */
.nav {
    position:sticky; top:0; z-index:100;
    background:var(--bg);
    border-bottom:1px solid var(--line-2);
}
.hero { border-bottom:1px solid var(--line-2); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); gap:24px; }
.brand { display:inline-flex; align-items:center; gap:12px; color:var(--ink); flex:none; }
.brand-mark { height:26px; width:auto; }
.brand-word { height:13px; width:auto; }
.brand.small .brand-mark { height:22px; }
.brand.small .brand-word { height:11px; }
/* The mark assembles like a circuit closing once per session (main.js adds
   .lk-play on the first page of a visit); a hover sends the green pulse through it. */
.brand-mark .lk-bar, .brand-mark .lk-kup, .brand-mark .lk-klo, .brand-mark .lk-pulse { transform-box:fill-box; }
.brand-mark .lk-bar { transform-origin:50% 0; }
.brand-mark .lk-kup, .brand-mark .lk-klo { transform-origin:0 50%; }
.brand-mark .lk-pulse { opacity:0; }
@media (prefers-reduced-motion: no-preference) {
    .brand.lk-play .lk-bar   { animation:lk-drop  .45s cubic-bezier(.2,.8,.2,1) 0s both; }
    .brand.lk-play .lk-foot  { animation:lk-run   .40s cubic-bezier(.2,.8,.2,1) .28s both; }
    .brand.lk-play .lk-kup   { animation:lk-kup   .45s cubic-bezier(.3,1.35,.4,1) .52s both; }
    .brand.lk-play .lk-klo   { animation:lk-klo   .45s cubic-bezier(.3,1.35,.4,1) .62s both; }
    .brand.lk-play .lk-pulse { animation:lk-pulse .85s cubic-bezier(.4,0,.2,1) 1.05s both; }
    a.brand:hover .lk-pulse, a.brand:focus-visible .lk-pulse { animation:lk-pulse .85s cubic-bezier(.4,0,.2,1) both; }
}
@keyframes lk-drop  { from { opacity:0; transform:translateY(-38%); } to { opacity:1; transform:none; } }
@keyframes lk-run   { from { clip-path:inset(0 100% 0 -2%); } to { clip-path:inset(0 -2% 0 -2%); } }
@keyframes lk-kup   { from { opacity:0; transform:translate(22%, -14%) rotate(-10deg); } to { opacity:1; transform:none; } }
@keyframes lk-klo   { from { opacity:0; transform:translate(22%, 14%) rotate(10deg); } to { opacity:1; transform:none; } }
@keyframes lk-pulse { from { transform:translateX(-110%); opacity:1; } 85% { opacity:1; } to { transform:translateX(190%); opacity:0; } }
.nav-links { display:flex; gap:26px; }
.nav-links a {
    color:var(--ink-2); font-size:14px; font-weight:500; letter-spacing:.01em;
    position:relative; padding:4px 0; transition:color .15s;
}
.nav-links a:hover, .nav-links a[aria-current] { color:var(--ink); }
.nav-links a[aria-current]::before {
    content:''; display:inline-block; width:6px; height:6px; border-radius:50%;
    background:var(--run); margin-right:8px; vertical-align:2px;
}
.nav-cta { display:flex; align-items:center; gap:12px; }
.nav-burger { display:none; flex-direction:column; gap:5px; background:none; border:1px solid var(--line-2); border-radius:var(--r); padding:10px; cursor:pointer; }
.nav-burger span { width:20px; height:2px; background:var(--ink); }

/* ═══════════ SUBNAV (homepage row selector) ═══════════ */
.subnav {
    position:fixed; top:var(--nav-h); left:0; right:0; z-index:90;
    background:var(--bg); border-bottom:1px solid var(--line);
    opacity:0; transform:translateY(-8px); pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
}
.subnav.visible { opacity:1; transform:none; pointer-events:auto; }
.subnav-inner { position:relative; display:flex; align-items:stretch; gap:0; height:44px; overflow-x:auto; scrollbar-width:none; }
.subnav-inner::-webkit-scrollbar { display:none; }
.subnav a {
    position:relative; z-index:1; flex:0 0 auto; display:flex; align-items:center;
    padding:0 16px; font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
    color:var(--muted); white-space:nowrap; transition:color .2s;
}
.subnav a:hover, .subnav a.active { color:var(--ink); }
.subnav-ind {
    position:absolute; left:0; bottom:0; top:auto; height:2px; width:0; opacity:0;
    background:var(--run);
    transition:transform .28s cubic-bezier(.4,0,.2,1), opacity .2s;
}
.subnav ~ main [id] { scroll-margin-top:124px; }
[id] { scroll-margin-top:calc(var(--nav-h) + 16px); }

/* ═══════════ THE BOARD: hairline cell grid ═══════════ */
.board {
    display:grid; gap:1px;
    background:var(--line-2); border:1px solid var(--line-2);
}
.board > * { background:var(--bg); min-width:0; }
.board.raised > * { background:var(--bg-2); }
.cell { padding:20px 22px; }
.cell-label { margin-bottom:8px; }
.cell-value { font-family:var(--display); font-stretch:106%; font-weight:700; font-size:26px; line-height:1.1; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.cell-note { font-size:13.5px; color:var(--muted); margin-top:6px; }
.kv { display:flex; align-items:baseline; justify-content:space-between; gap:16px; }

/* ═══════════ SECTIONS: labeled rows ═══════════ */
.sec { position:relative; border-top:1px solid var(--line); padding:80px 0; }
.sec-inner { display:grid; grid-template-columns:200px minmax(0,1fr); gap:28px 56px; align-items:start; }
.sec-label { position:sticky; top:calc(var(--nav-h) + 24px); padding-top:6px; }
.sec-label small { display:block; margin-top:8px; font-size:12px; letter-spacing:.02em; text-transform:none; font-weight:500; color:var(--muted); font-stretch:100%; }
.sec-body > h2 { margin-bottom:14px; max-width:20ch; }
.sec-body > .lead { color:var(--ink-2); font-size:18px; max-width:62ch; margin-bottom:40px; }

/* ═══════════ HERO ═══════════ */
.hero { position:relative; padding:56px 0 40px; }
.hero-inner { display:grid; grid-template-columns:minmax(0,1fr); gap:44px; align-items:start; }
.hero-copy { display:flex; flex-direction:column; align-items:flex-start; }
.hero h1 { max-width:14ch; }
.hero h1 em { color:var(--run); font-style:normal; font-weight:inherit; }
.hero-sub { color:var(--ink-2); font-size:18px; max-width:56ch; margin:26px 0 30px; }
.hero-cta { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.hero-trust { list-style:none; margin-top:30px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); width:100%; }
.hero-trust li { position:relative; padding:14px 0 0; border-top:1px solid var(--line-2); font-size:13.5px; color:var(--ink-2); max-width:none; }
.hero-trust li b { display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-stretch:112%; margin-bottom:4px; }
.hero-trust li + li { margin-left:20px; }
.hero-photo { margin:56px 0 0; position:relative; border:1px solid var(--line-2); background:var(--bg-2); }
.hero-photo img { width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; }
.hero-photo figcaption {
    display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
    padding:12px 18px; border-top:1px solid var(--line-2);
    font-size:13.5px; color:var(--ink-2);
}
.hero-photo figcaption span { color:var(--muted); font-family:var(--mono); font-size:12.5px; }
@media (min-width: 1080px) {
    .hero { padding:64px 0 48px; }
    .hero-inner { grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:64px; align-items:center; }
}

/* ── The live board in the hero: Line 3 recovery ── */
.rec-board { width:100%; grid-template-columns:1fr; }
.rec-head { display:flex; align-items:center; justify-content:space-between; gap:6px 16px; padding:12px 18px; background:var(--bg-2) !important; flex-wrap:wrap; }
.rec-head .rec-title { white-space:nowrap; }
.rec-meta { display:inline-flex; align-items:center; gap:14px; margin-left:auto; white-space:nowrap; }
.rec-title { margin:0; color:var(--ink); }
.rec-title i { font-style:normal; color:var(--muted); margin-left:10px; }
.rec-clock { font-family:var(--mono); font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.rec-status { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-2); padding:0; }
.rec-status .rec-down { grid-column:1 / -1; }
.rec-status .rec-down b { font-size:clamp(34px, 3vw, 44px); font-stretch:106%; letter-spacing:.02em; }
.rec-sim, .mock-sim { font-family:var(--mono); font-size:11.5px; color:var(--muted); letter-spacing:.02em; text-transform:none; font-weight:400; }
.mock-head .mock-sim { margin-left:auto; padding-right:14px; }
.rec-status > div { background:var(--bg); padding:16px 18px 18px; min-width:0; }
.rec-status b {
    display:flex; align-items:center; gap:10px;
    font-family:var(--display); font-stretch:100%; font-weight:800; letter-spacing:.01em;
    font-size:clamp(18px, 1.5vw, 22px); line-height:1; color:var(--ink);
    font-variant-numeric:tabular-nums; white-space:nowrap;
}
.rec-status b.is-stop { color:var(--stop); }
.rec-status b.is-run { color:var(--run); }
.rec-list { list-style:none; position:relative; padding:18px 18px 6px; display:flex; flex-direction:column; }
.rec-fill { display:none; }
.rec-item { position:relative; display:grid; grid-template-columns:52px 1fr; gap:14px; padding:0 0 14px; opacity:.18; transition:opacity .45s ease; max-width:none; }
.rec-item.on { opacity:1; }
.rec-dot { display:none; }
.rec-time { font-family:var(--mono); font-size:12.5px; color:var(--muted); padding-top:3px; font-variant-numeric:tabular-nums; }
.rec-text { font-size:14.5px; line-height:1.45; color:var(--ink-2); }
.rec-item.bad.on .rec-time { color:var(--stop); }
.rec-item.ok.on .rec-time { color:var(--run); }
.rec-item.big .rec-text { color:var(--ink); font-weight:600; }
.rec-sum {
    display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; min-height:82px;
    padding:16px 18px 18px; background:var(--bg-2) !important;
}
.rec-sum > b, .rec-sum > span:not(.rec-wait) { opacity:0; transition:opacity .5s ease; }
.rec-sum.on > b, .rec-sum.on > span { opacity:1; }
.rec-wait { font-family:var(--mono); font-size:12.5px; color:var(--muted); align-self:center; }
.rec-wait::after { content:'…'; }
.rec-sum.on .rec-wait { display:none; }
.rec-board { cursor:pointer; }
.rec-sum b {
    font-family:var(--display); font-stretch:112%; font-weight:800; font-size:clamp(30px, 2.6vw, 40px);
    line-height:1; color:var(--run); font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.rec-sum > span { font-size:13.5px; color:var(--muted); max-width:34ch; }
.rec-sum s { color:var(--stop); text-decoration-color:var(--stop); }

/* ═══════════ PROBLEM / SOLUTION: two board columns ═══════════ */
.split { grid-template-columns:1fr 1fr; }
.split-col { padding:28px 28px 30px; display:flex; flex-direction:column; }
.split-col h2 { order:-1; margin:0 0 6px; }
.split-col .split-badge { margin-bottom:18px; }
.split-badge { display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--stop-text); font-stretch:112%; }
.split-badge.ok { color:var(--run-text); }
.split-col h2 { font-size:clamp(22px, 2.2vw, 28px); margin:16px 0 22px; max-width:22ch; }
.x-list, .ok-list { list-style:none; display:flex; flex-direction:column; }
.x-list li, .ok-list li { color:var(--ink-2); font-size:15px; padding:11px 0 11px 26px; position:relative; border-top:1px solid var(--line); max-width:none; }
.x-list li::before, .ok-list li::before { content:''; position:absolute; left:0; top:21px; width:12px; height:2px; background:var(--stop-text); }
.ok-list li::before { background:var(--run-text); }
.problem-note { margin-top:28px; color:var(--ink-2); font-size:15px; max-width:74ch; }

/* ═══════════ THREE MOMENTS ═══════════ */
.path-grid { grid-template-columns:repeat(3, minmax(0,1fr)); margin-top:8px; }
.path-step { display:flex; flex-direction:column; gap:12px; padding:26px 24px 28px; color:inherit; transition:background .2s; }
a.path-step:hover { background:var(--bg-2); }
.path-time { display:flex; align-items:center; gap:10px; }
.path-step h3 { order:-1; }
.path-step h3 { font-size:20px; max-width:20ch; }
.path-step p { color:var(--ink-2); font-size:15px; line-height:1.55; flex:1; max-width:none; }
.path-link { font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--run-text); }
.path-step.main { background:var(--bg-2); }
.path-step.main .path-link { color:var(--run-text); }
.dev-chip { align-self:flex-start; color:var(--warn-text); border:1px solid currentColor; padding:3px 8px; }

/* ═══════════ FEATURE ROWS (copy + product mock) ═══════════ */
.tour { }
.feature { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:56px; align-items:center; padding:36px 0; border-top:1px solid var(--line); }
.feature:first-of-type { border-top:0; padding-top:0; }
.feature.flip .feature-copy { order:2; }
.feature.flip .feature-visual { order:1; }
.feature-num { display:none; }
.feature-copy h3 { font-size:clamp(22px, 2.2vw, 28px); margin-bottom:14px; max-width:22ch; }
.feature-copy p { color:var(--ink-2); margin-bottom:16px; font-size:16px; }
.feature-copy ul { list-style:none; display:flex; flex-direction:column; margin-bottom:6px; }
.feature-copy li { color:var(--ink-2); font-size:14.5px; padding:9px 0 9px 20px; position:relative; border-top:1px solid var(--line); max-width:none; }
.feature-copy li::before { content:''; position:absolute; left:0; top:17px; width:8px; height:2px; background:var(--muted); }
.proto-chip { display:inline-block; font-family:var(--mono); font-size:12px; color:var(--ink-2); border:1px solid var(--line-2); border-radius:var(--r); padding:4px 8px; margin:0 6px 8px 0; }

/* Product mockups: cells of the board */
.mock, .device-screen {
    --m-bg:     #121416;
    --m-panel:  #1a1c1f;
    --m-panel2: #16181b;
    --m-border: rgba(255,255,255,.14);
    --m-text:   var(--ink);
    --m-text2:  var(--ink-2);
    --m-muted:  var(--muted);
    color:var(--m-text);
}
.mock { background:var(--m-bg); border:1px solid var(--line-2); overflow:hidden; }
.mock b, .device-screen b { color:var(--m-text); }
.mock-head {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:11px 16px; border-bottom:1px solid var(--m-border);
    font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; background:var(--m-panel2); color:var(--m-text2); font-stretch:112%;
}
.mock-chip { font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--run); border:1px solid rgba(59,227,127,.4); padding:3px 8px; }
.mock-table { width:100%; border-collapse:collapse; font-size:13px; }
.mock-table td { padding:10px 16px; border-bottom:1px solid var(--m-border); color:var(--m-text2); }
.mock-table td:first-child { color:var(--m-text); }
.mock-table .v { font-family:var(--mono); text-align:right; }
.mock-table .v.on { color:var(--run); font-weight:600; }
.mock-table tr.dim { opacity:.55; }
.mock-bits { padding:12px 16px 16px; font-size:12px; color:var(--m-muted); }
.mock-bits .bits { display:flex; gap:5px; margin-top:8px; }
.mock-bits .bits i { font-style:normal; font-family:var(--mono); font-size:11.5px; width:26px; height:26px; display:flex; align-items:center; justify-content:center; background:var(--m-panel); border:1px solid var(--m-border); color:var(--m-muted); }
.mock-bits .bits i.on { color:var(--run-ink); background:var(--run); border-color:var(--run); font-weight:700; }
.mock-ctrl-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; padding:16px; }
.mock-btn { display:flex; align-items:center; justify-content:center; gap:8px; padding:14px 8px; border-radius:2px; font-weight:800; font-size:13px; letter-spacing:.08em; font-stretch:112%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), inset 0 -2px 0 rgba(0,0,0,.35); }
.mock-btn i { font-style:normal; font-size:10px; }
.mock-btn.run  { background:rgba(59,227,127,.12); color:var(--run); border:1px solid rgba(59,227,127,.45); }
.mock-btn.stop { background:rgba(255,95,82,.10); color:var(--stop); border:1px solid rgba(255,95,82,.45); }
.mock-ind { text-align:center; padding:14px 8px; border-radius:var(--r); font-size:12.5px; font-weight:600; color:var(--m-muted); background:var(--m-panel); border:1px solid var(--m-border); }
.mock-ind.on { color:var(--run); border-color:rgba(59,227,127,.45); background:rgba(59,227,127,.08); }
.mock-setpoint { display:flex; align-items:center; justify-content:space-between; gap:6px; background:var(--m-panel); border:1px solid var(--m-border); border-radius:var(--r); padding:10px 12px; }
.mock-setpoint span { font-size:11px; color:var(--m-muted); text-transform:uppercase; letter-spacing:.06em; }
.mock-setpoint b { font-family:var(--mono); font-size:15px; }
.mock-setpoint i { font-style:normal; color:var(--run); font-size:11px; }
.mock-dash { padding:14px; display:flex; flex-direction:column; gap:10px; }
.mock-chart-card { background:var(--m-panel); border:1px solid var(--m-border); padding:10px 12px; }
.mock-card-title { font-size:12px; font-weight:600; margin-bottom:6px; }
.mock-card-title span { color:var(--m-muted); font-weight:400; font-family:var(--mono); font-size:11.5px; margin-left:6px; }
.mock-svg-chart { width:100%; height:110px; }
.mock-svg-chart polyline { fill:none; stroke:var(--run); stroke-width:2.2; stroke-linejoin:round; }
.mock-svg-chart .thr { stroke:var(--warn); stroke-width:1; stroke-dasharray:5 5; opacity:.8; }
.mock-tiles { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.mock-tile { background:var(--m-panel); border:1px solid var(--m-border); padding:8px 10px; }
.mock-tile span { display:block; font-size:11px; color:var(--m-muted); text-transform:uppercase; letter-spacing:.08em; }
.mock-tile b { font-size:18px; font-weight:700; font-family:var(--mono); }
.mock-tile.warn b { color:var(--warn); }
.mock-remote { padding:16px; display:flex; flex-direction:column; gap:10px; font-size:13.5px; color:var(--m-text2); }
.mock-row { display:flex; align-items:center; gap:9px; flex-wrap:wrap; max-width:none; }
.mock-row .dot { width:8px; height:8px; border-radius:50%; background:var(--m-muted); flex-shrink:0; }
.mock-row .dot.ok { background:var(--run); }
.mock-row .dot.warn { background:var(--warn); }
.mock-terminal { margin-top:4px; background:#0a0b0d; border:1px solid var(--m-border); padding:12px 14px; font-size:12px; color:var(--run); display:flex; flex-direction:column; gap:4px; }
.mock-terminal em { color:var(--m-muted); font-weight:400; }
.mock-topbar { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--m-border); background:var(--m-panel2); font-family:var(--mono); font-size:11.5px; color:var(--m-text2); }
.mock-conn { display:flex; align-items:center; gap:6px; color:var(--run); }
.mock-conn i { width:7px; height:7px; border-radius:50%; background:var(--run); }
.mock-body { padding:12px; display:flex; flex-direction:column; gap:10px; }
.mock-controls { display:flex; gap:8px; flex-wrap:wrap; }
.device { width:100%; background:var(--bg-2); border:1px solid var(--line-2); padding:clamp(16px, 3vw, 32px); }
.device-screen { background:var(--m-bg); border:1px solid var(--m-border); overflow:hidden; }
.device-foot { display:none; }

/* ═══════════ WHO IT'S FOR: rows of the board ═══════════ */
.cases-grid { grid-template-columns:1fr; }
.case { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr) auto; gap:20px 40px; align-items:start; padding:26px 24px; color:inherit; transition:background .2s; }
a.case:hover { background:var(--bg-2); }
.case-icon { display:none; }
.case h3 { font-size:22px; }
.case p { color:var(--ink-2); font-size:15px; max-width:none; }
.case-tag { color:var(--run-text); align-self:center; white-space:nowrap; }

/* ═══════════ HARDWARE ═══════════ */
.hw-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:20px; align-items:stretch; margin-bottom:40px; }
.hw-side { display:flex; flex-direction:column; gap:20px; min-width:0; }
.hw-photo { margin:0; position:relative; overflow:hidden; border:1px solid var(--line-2); background:var(--bg-2); min-width:0; }
.hw-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.hw-photo figcaption { position:absolute; left:0; right:0; bottom:0; padding:10px 16px; font-size:12.5px; color:#f2f2ee; background:rgba(14,15,17,.86); border-top:1px solid rgba(255,255,255,.2); }
.hw-sub { color:var(--ink-2); font-size:16px; margin-top:12px; }
.hw-list { list-style:none; flex:1; border:1px solid var(--line-2); padding:6px 22px; display:flex; flex-direction:column; justify-content:center; }
.hw-list li { color:var(--ink-2); font-size:14.5px; padding:10px 0 10px 22px; position:relative; border-top:1px solid var(--line); max-width:none; }
.hw-list li:first-child { border-top:0; }
.hw-list li::before { content:''; position:absolute; left:0; top:21px; width:10px; height:2px; background:var(--muted); }
.hw-duo { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px; }
.hw-note { margin-top:18px; font-size:13px; color:var(--muted); }

/* ═══════════ PLANS (device sizes, app / Pro / device) ═══════════ */
.plan-grid { grid-template-columns:repeat(3, minmax(0,1fr)); margin-top:36px; }
.plan { display:flex; flex-direction:column; gap:14px; padding:28px 26px 30px; }
.plan.featured { background:var(--bg-2); }
.plan h2 { order:-1; }
.plan-kicker { display:flex; align-items:center; gap:10px; }
.plan-kicker::before { content:''; width:10px; height:2px; background:var(--muted); flex:none; }
.plan.featured .plan-kicker::before { background:var(--run-text); }
.plan h2 { font-size:24px; }
.plan-price { font-family:var(--display); font-stretch:112%; font-size:40px; font-weight:800; letter-spacing:-.01em; line-height:1; font-variant-numeric:tabular-nums; }
.plan-price small { display:block; font-family:var(--font); font-stretch:100%; font-size:13px; font-weight:500; color:var(--muted); letter-spacing:.02em; margin-top:8px; }
.plan-for { font-size:14.5px; color:var(--ink-2); }
.plan ul { list-style:none; display:flex; flex-direction:column; margin:4px 0; flex:1; }
.plan li { position:relative; padding:9px 0 9px 22px; font-size:14px; color:var(--ink-2); line-height:1.5; border-top:1px solid var(--line); max-width:none; }
.plan li::before { content:''; position:absolute; left:0; top:19px; width:10px; height:2px; background:var(--muted); }
.plan li.lim::before { background:var(--warn-text); }
.plan .btn, .plan .appstore-badge { margin-top:6px; align-self:flex-start; }
.plan-fine { font-size:12.5px; color:var(--muted); }
.never-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 40px; margin-top:26px; max-width:860px; }
.never-grid .x-list li { font-size:15px; }

/* ═══════════ COMPARE ═══════════ */
.compare-scroll { overflow-x:auto; border:1px solid var(--line-2); }
.compare-table { width:100%; min-width:760px; border-collapse:collapse; }
.compare-table th, .compare-table td { padding:15px 20px; text-align:left; font-size:14.5px; border-bottom:1px solid var(--line); border-right:1px solid var(--line); vertical-align:top; }
.compare-table th:last-child, .compare-table td:last-child { border-right:0; }
.compare-table thead th { background:var(--bg-2); padding:12px 20px; font-stretch:112%; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); line-height:1.4; }
.compare-table td { color:var(--ink-2); }
.compare-table td:first-child { color:var(--ink); font-weight:600; }
.compare-table .hl { background:rgba(59,227,127,.05); }
.compare-table thead .hl { color:var(--run-text); }
.compare-table tbody tr:last-child td { border-bottom:none; }

/* ═══════════ CALCULATOR: the board does the math ═══════════ */
.calc-sub { color:var(--ink-2); font-size:16px; margin-top:10px; }
.calc-card { max-width:960px; margin-top:32px; }
.calc-inputs { display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line-2); border:1px solid var(--line-2); }
.calc-inputs label { display:flex; flex-direction:column; gap:10px; padding:18px 20px; background:var(--bg); font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-stretch:112%; }
.calc-inputs input {
    background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r);
    min-height:48px; padding:10px 14px; color:var(--ink);
    font-family:var(--mono); font-size:18px; font-variant-numeric:tabular-nums; letter-spacing:0; text-transform:none;
    transition:border-color .15s;
}
.calc-inputs input:focus { outline:none; border-color:var(--run); box-shadow:0 0 0 3px rgba(59,227,127,.18); }
.calc-out { display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line-2); border:1px solid #0e0f11; }
.calc-tile { background:var(--bg-2); padding:20px 20px 22px; display:flex; flex-direction:column; gap:8px; }
.calc-tile > span { min-height:2.8em; display:flex; align-items:flex-end; }
.calc-tile b { font-family:var(--display); font-stretch:106%; font-weight:800; font-size:clamp(30px, 2.8vw, 40px); line-height:1; letter-spacing:.01em; font-variant-numeric:tabular-nums; -webkit-mask-image:radial-gradient(circle, #000 1.05px, transparent 1.5px); mask-image:radial-gradient(circle, #000 1.05px, transparent 1.5px); -webkit-mask-size:3px 3px; mask-size:3px 3px; }
.calc-tile.big b { color:var(--stop); }
.calc-tile.ok b { color:var(--run); }
.calc-tile i { font-style:normal; font-size:12.5px; color:var(--muted); }
.calc-cta { margin-top:22px; }

/* ═══════════ FAQ: rows ═══════════ */
.faq details { border-top:1px solid var(--line-2); }
.faq details:last-of-type { border-bottom:1px solid var(--line-2); }
.faq summary {
    list-style:none; cursor:pointer; padding:20px 56px 20px 0;
    font-family:var(--display); font-stretch:106%; font-weight:600; font-size:17.5px; line-height:1.35; position:relative;
    transition:color .15s;
}
.faq summary:hover { color:var(--run-text); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after {
    content:''; position:absolute; right:8px; top:50%; width:14px; height:14px; transform:translateY(-50%);
    background:
        linear-gradient(var(--muted), var(--muted)) center/14px 2px no-repeat,
        linear-gradient(var(--muted), var(--muted)) center/2px 14px no-repeat;
    transition:transform .2s;
}
.faq details[open] summary::after { transform:translateY(-50%) rotate(45deg); }
.faq details p { padding:0 0 22px; color:var(--ink-2); font-size:15.5px; max-width:70ch; }

/* ═══════════ CONTACT / FORMS ═══════════ */
.contact-card { border:1px solid var(--line-2); background:var(--bg-2); padding:44px 44px 40px; }
.contact-card .sec-head { margin-bottom:26px; }
.contact-sub { color:var(--ink-2); margin-top:8px; }
.lead-form { position:relative; }
.lead-form label { display:block; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; font-stretch:112%; }
.lead-form .opt { color:var(--muted); font-weight:500; letter-spacing:0; text-transform:none; }
/* block label + block control: the "(optional)" note stays on the label's line */
.lead-form label > input, .lead-form label > select, .lead-form label > textarea { display:block; width:100%; margin-top:8px; }
.lead-form input, .lead-form textarea, .lead-form select {
    background:var(--bg); border:1px solid var(--line-2); border-radius:var(--r);
    min-height:50px; padding:12px 14px; color:var(--ink);
    font-family:var(--font); font-size:16px; font-weight:400; letter-spacing:0; text-transform:none; resize:vertical;
    transition:border-color .15s, box-shadow .15s;
}
.lead-form input::placeholder, .lead-form textarea::placeholder { color:var(--muted); opacity:1; }
.lead-form input:focus, .lead-form textarea:focus, .lead-form select:focus { outline:none; border-color:var(--run); box-shadow:0 0 0 3px rgba(59,227,127,.18); }
.lead-form select {
    appearance:none;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238f928e' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 16px center;
}
.lead-form .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-note { margin-top:14px; font-size:13px; color:var(--muted); }
.form-success { text-align:center; padding:34px 20px; border:1px solid rgba(59,227,127,.4); background:rgba(59,227,127,.06); }
.form-success b { font-family:var(--display); font-size:19px; }
.form-success p { margin:10px auto 0; max-width:46ch; color:var(--ink-2); font-size:14.5px; }
.get-row { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-2); border:1px solid var(--line-2); margin:26px 0 30px; }
.get-opt { display:flex; flex-direction:column; gap:11px; align-items:flex-start; background:var(--bg); padding:22px 22px 20px; }
.get-opt h3 { font-size:19px; order:-1; }
.get-opt p { font-size:14.5px; color:var(--ink-2); flex:1; }
.get-fine { font-size:12.5px; color:var(--muted); line-height:1.55; }
.get-form-lead { font-size:15px; color:var(--ink-2); margin:0 0 18px; }

/* App Store badge: white variant on the dark board */
.appstore-badge {
    display:inline-flex; align-items:center; gap:10px;
    background:var(--ink); color:var(--bg);
    border-radius:8px; padding:0 16px 0 14px; min-height:50px; line-height:1;
    transition:background-color .15s ease, transform .08s ease;
}
.appstore-badge-logo { width:24px; height:24px; flex:none; }
.appstore-badge-text { display:flex; flex-direction:column; gap:2px; text-align:left; }
.appstore-badge-text small { font-size:11px; font-weight:500; color:var(--bg); opacity:.8; }
.appstore-badge-text b { font-family:var(--display); font-size:19px; font-weight:700; letter-spacing:-.01em; color:var(--bg); }
a.appstore-badge:hover { background:#fff; }
a.appstore-badge:active { transform:translateY(1px); }
.appstore-badge.is-soon { cursor:default; }
.qr-app { display:none; }
@media (min-width: 768px) {
    .qr-app { display:flex; align-items:center; gap:12px; }
    .qr-app img { width:84px; height:84px; flex:none; border:1px solid var(--line-2); background:#fff; padding:5px; }
    .qr-app span { font-size:12.5px; color:var(--muted); line-height:1.5; max-width:200px; }
}
.app-soon-tag { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); }
.app-soon-tag::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--warn); }

/* ═══════════ FOOTER: the board's bottom strip ═══════════ */
.footer { border-top:1px solid var(--line-2); padding:44px 0 40px; margin-top:40px; }
.footer-inner { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:24px 48px; align-items:start; }
.footer .brand { flex-direction:column; align-items:flex-start; gap:12px; }
.footer-tag { font-size:11.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); font-stretch:112%; }
.footer-note { font-size:13.5px; color:var(--muted); line-height:1.6; }
.footer-links { display:flex; flex-direction:column; gap:8px; }
.footer-links a { color:var(--ink-2); font-size:14px; }
.footer-links a:hover { color:var(--ink); }
.footer-resources { grid-column:1 / -1; display:flex; gap:6px 18px; flex-wrap:wrap; padding-top:18px; border-top:1px solid var(--line); font-size:13px; }
.footer-resources span { width:100%; margin-bottom:4px; }
.footer-resources a { color:var(--ink-2); }
.footer-resources a:hover { color:var(--ink); text-decoration:underline; }
.affiliate-note { grid-column:1 / -1; padding-top:16px; border-top:1px solid var(--line); font-size:12.5px; line-height:1.55; color:var(--muted); max-width:none; }
.affiliate-note a { color:var(--ink-2); text-decoration:underline; text-decoration-color:var(--line-3); }
/* since the product line: (brand + note) · Products · LineKeeper */
.footer-inner.has-cols { grid-template-columns:minmax(0,1fr) auto auto; gap:28px 72px; }
.footer-about .footer-note { margin-top:18px; max-width:46ch; }
.footer-col { display:flex; flex-direction:column; gap:8px; min-width:0; }
.footer-col > span { font-family:var(--font); font-stretch:112%; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.footer-col a { display:inline-flex; align-items:center; gap:9px; color:var(--ink-2); font-size:14px; }
.footer-col a:hover { color:var(--ink); }
.footer-col a small { color:var(--muted); font-size:12.5px; }

/* ═══════════ PRODUCT LINE: LK Go / LK Up / LK On ═══════════ */
/* .pt — the product square: a flat swatch of the product colour next to its name.
   Square on purpose, so it never reads as a (round) lamp. */
.pt { display:inline-block; width:10px; height:10px; flex:none; background:var(--pt, var(--muted)); vertical-align:middle; }
.pt-go { --pt:var(--prod-go); }
.pt-up { --pt:var(--prod-up); }
.pt-on { --pt:var(--prod-on); }
.on-board .pt-up, .nav .pt-up, .footer .pt-up, .page-band .pt-up, .hero .pt-up { --pt:var(--prod-up-bright); }
.pt.lg { width:14px; height:14px; }
/* nav: the three products lead the rail, then the site sections */
.nav-links a.nav-prod { display:inline-flex; align-items:center; gap:9px; font-weight:600; }
.nav-prod > span { display:flex; flex-direction:column; line-height:1.2; }
.nav-prod small { display:none; }
.nav-links a.nav-prod[aria-current]::before { display:none; }
.nav-prod[aria-current] .pt { box-shadow:0 0 0 2px var(--bg), 0 0 0 3px var(--ink-2); }
.nav-sep { flex:none; width:1px; align-self:stretch; margin:18px 0; background:var(--line-2); }
/* product tile: the app icon master, square (no baked corners), always via <img> */
.prod-tile { display:block; width:64px; height:64px; flex:none; }
.prod-tile.sm { width:40px; height:40px; }
.prod-tile.lg { width:88px; height:88px; }
/* hub: three product cards on one board */
.prod-grid { grid-template-columns:repeat(3, minmax(0,1fr)); }
.prod-grid.two { grid-template-columns:repeat(2, minmax(0,1fr)); }
.hero .prod-grid { margin-top:44px; }
.hero .hero-copy h1 { max-width:18ch; }
a.prod-card { display:flex; flex-direction:column; gap:14px; padding:26px 24px 22px; color:var(--ink); text-decoration:none; transition:background .15s; }
a.prod-card:hover { background:var(--bg-2); }
.board.raised a.prod-card:hover { background:var(--bg-3); }
.prod-card h3 { font-size:24px; font-stretch:112%; }
.prod-card h3 small { display:block; margin-top:6px; font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-stretch:112%; }
.prod-card p { color:var(--ink-2); font-size:15.5px; line-height:1.55; max-width:none; }
.prod-card ul { list-style:none; display:flex; flex-direction:column; gap:6px; }
.prod-card li { font-size:14.5px; color:var(--ink-2); padding-left:18px; position:relative; max-width:none; }
.prod-card li::before { content:''; position:absolute; left:0; top:11px; width:8px; height:2px; background:var(--line-3); }
.prod-status { margin-top:auto; padding-top:14px; border-top:1px solid var(--line); font-family:var(--mono); font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.prod-more { font-size:13.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-stretch:106%; color:var(--ink); }
.prod-more::after { content:' →'; }
/* product badge in a page band: tile + name, above the h1's eyebrow row */
.prod-badge { display:inline-flex; align-items:center; gap:14px; margin-bottom:18px; }
.prod-badge b { display:block; font-stretch:112%; font-size:15px; letter-spacing:.02em; }
.prod-badge span { display:block; font-size:13px; color:var(--muted); }
/* how the three fit: a numbered row of cells */
.fit-grid { grid-template-columns:repeat(3, minmax(0,1fr)); }
.fit-grid .cell h3 { display:flex; align-items:center; gap:10px; }
/* gear page: groups of the .gear-note list, and the short pointer the guides carry */
.gear-group { margin-top:8px; }
.gear-group + .gear-group { margin-top:40px; }
.gear-note .gear-for { display:inline-flex; align-items:center; gap:7px; margin-top:6px; font-size:12.5px; color:var(--muted); }
.plan-grid.two { grid-template-columns:repeat(2, minmax(0,1fr)); }
/* a row whose visual leans past the viewport edge (the tilted tablet of .phone-stack) */
.sec.clip-x { overflow-x:clip; }
.gear-note.gear-short { display:flex; align-items:flex-start; gap:14px; }
.gear-note.gear-short p { margin:0; font-size:14.5px; line-height:1.6; color:var(--ink-2); max-width:none; }

/* ═══════════ Motion: things arrive on the wall, screens power on, values live ═══════════ */
.reveal { opacity:1; transform:none; }
.sec-label::before { transition:background .3s, box-shadow .3s; }
@media (prefers-reduced-motion: no-preference) {
    .reveal { opacity:0; transform:translateY(16px); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
    .reveal.in { opacity:1; transform:none; }
    .reveal.d1 { transition-delay:.08s; } .reveal.d2 { transition-delay:.16s; } .reveal.d3 { transition-delay:.24s; }
    /* screens: dark until scrolled into view, then power on with a scan sweep */
    .reveal.power { opacity:1; transform:none; position:relative; filter:brightness(.12) saturate(.2); transition:filter .8s cubic-bezier(.2,.7,.2,1); }
    .reveal.power.in { filter:none; }
    .reveal.power.in::after { content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
        background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,.16) 50%, transparent 100%) no-repeat 0 -60% / 100% 45%;
        animation:scan .7s ease-out .05s 1 both; }
    /* the hero headline lights up row by row */
    .hero h1 .w { display:inline-block; opacity:0; transform:translateY(.28em); animation:rise .55s cubic-bezier(.2,.7,.2,1) forwards; }
    .hero-sub.w-in, .hero-cta.w-in, .hero-trust.w-in { opacity:0; animation:rise .6s cubic-bezier(.2,.7,.2,1) .5s forwards; }
    .hero-cta.w-in { animation-delay:.62s; } .hero-trust.w-in { animation-delay:.74s; }
    .rec-board.w-in { opacity:0; animation:rise .7s cubic-bezier(.2,.7,.2,1) .3s forwards; }
    /* lamps ignite */
    .lamp.ignite { animation:ignite .55s cubic-bezier(.2,.7,.2,1); }
    /* the active section's row label lights */
    .sec.is-active .sec-label::before { background:var(--run-text); box-shadow:0 0 8px rgba(59,227,127,.55); }
    /* comparison rows arrive one by one */
    .compare-scroll.reveal tbody tr { opacity:0; transform:translateX(-10px); transition:opacity .45s cubic-bezier(.2,.7,.2,1), transform .45s cubic-bezier(.2,.7,.2,1); }
    .compare-scroll.reveal.in tbody tr { opacity:1; transform:none; }
    .compare-scroll.reveal.in tbody tr:nth-child(2) { transition-delay:.06s; } .compare-scroll.reveal.in tbody tr:nth-child(3) { transition-delay:.12s; }
    .compare-scroll.reveal.in tbody tr:nth-child(4) { transition-delay:.18s; } .compare-scroll.reveal.in tbody tr:nth-child(5) { transition-delay:.24s; }
    .compare-scroll.reveal.in tbody tr:nth-child(6) { transition-delay:.30s; } .compare-scroll.reveal.in tbody tr:nth-child(7) { transition-delay:.36s; }
    /* FAQ answers unfold */
    .faq details[open] > p { animation:faq-in .3s cubic-bezier(.2,.7,.2,1); }
    /* the dashboard trend draws itself */
    .mock-svg-chart polyline { stroke-dasharray:1400; stroke-dashoffset:1400; }
    .reveal.power.in .mock-svg-chart polyline { animation:draw 1.6s cubic-bezier(.3,.6,.2,1) .3s forwards; }
    /* pushbuttons: the bezel brightens under the hand */
    .btn { transition:background-color .15s ease, border-color .15s ease, transform .08s ease, box-shadow .15s ease, filter .15s ease; }
    .btn:hover { filter:brightness(1.06); }
    /* live values tick */
    .tick { transition:color .25s; }
    .tick.up { color:var(--run); } .tick.down { color:var(--warn); }
}
@keyframes rise { to { opacity:1; transform:none; } }
@keyframes scan { from { background-position:0 -60%; opacity:1; } to { background-position:0 160%; opacity:0; } }
@keyframes ignite { 0% { transform:scale(.3); box-shadow:none; } 55% { transform:scale(1.6); } 100% { transform:scale(1); } }
@keyframes faq-in { from { opacity:0; transform:translateY(-6px); } }
@keyframes draw { to { stroke-dashoffset:0; } }

/* ═══════════ LANDINGS / GUIDES (Read register of the same board) ═══════════ */
.landing { padding:56px 0 40px; }
.crumbs { font-size:13px; color:var(--muted); margin-bottom:28px; }
.crumbs a { color:var(--muted); text-decoration:underline; text-decoration-color:var(--line-3); }
.page-hero { display:flex; flex-direction:column; align-items:flex-start; }
.page-hero .crumbs { order:-3; }
.page-hero h1 { order:-2; font-size:clamp(28px, 3.6vw, 44px); line-height:1.06; max-width:22ch; margin:0 0 18px; text-transform:uppercase; }
.page-hero .eyebrow { margin:0 0 4px; }
.sec-head { display:flex; flex-direction:column; align-items:flex-start; }
.sec-head h2 { order:-1; }
.sec-head .eyebrow { margin:0 0 6px; }
.page-hero .hero-sub { margin:22px 0 0; max-width:64ch; }
.urgent-cta { margin:26px 0 0; }
.urgent-cta .btn { white-space:normal; max-width:100%; text-align:center; padding:14px 22px; line-height:1.3; }
.article { margin:44px 0 20px; }
.article h2 { font-size:clamp(24px, 2.4vw, 30px); margin:52px 0 16px; padding-top:22px; border-top:1px solid var(--line-2); max-width:26ch; }
.article h3 { font-size:20px; margin:30px 0 10px; }
.article p { color:var(--ink-2); font-size:17px; line-height:1.7; margin:14px 0; max-width:68ch; }
.article ul, .article ol { color:var(--ink-2); font-size:17px; line-height:1.7; padding-left:22px; max-width:66ch; }
.article li { margin:8px 0; }
.article li b, .article p b { color:var(--ink); }
.article .callout, .tester-note, .manual-note, .founders-note, .app-connect-note {
    margin:22px 0; padding:18px 20px; max-width:68ch;
    border:1px solid var(--line-2); background:var(--bg-2);
}
.article .callout p, .tester-note p { margin:0; color:var(--ink-2); }
.founders-note { font-size:14.5px; line-height:1.6; color:var(--ink-2); }
.founders-note b { color:var(--ink); }
.small-note, .avail-note { font-size:13.5px; color:var(--muted); }
.avail-note b { color:var(--ink-2); }
.price-was { font-family:var(--display); font-size:17px; color:var(--muted); text-decoration:line-through; }
.landing .compare-scroll { margin:18px 0; }
.landing .faq { padding:30px 0 10px; }
.landing .contact { padding:40px 0 60px; }
.gear-note { margin:24px 0; padding:18px 20px; max-width:68ch; border:1px solid var(--line-2); background:var(--bg-2); }
.gear-note .gear-title { margin:0 0 10px; }
.gear-note ul { list-style:none; padding:0; margin:0; max-width:none; }
.gear-note li { margin:12px 0; font-size:14.5px; line-height:1.6; color:var(--ink-2); display:flex; align-items:flex-start; gap:12px; }
.gear-ico { flex:0 0 auto; width:26px; height:26px; margin-top:1px; color:var(--muted); }
.gear-txt { flex:1 1 auto; min-width:0; }
.gear-note .gear-fine { margin:12px 0 0; font-size:12px; color:var(--muted); }
.anchor-alias { display:block; height:0; }
.beta-path { padding-top:22px; margin-top:22px; border-top:1px solid var(--line); }
.beta-path:first-of-type { padding-top:0; margin-top:0; border-top:0; }
.beta-path h3 { font-size:17px; margin:0 0 8px; }
.beta-path > p { color:var(--ink-2); font-size:14.5px; line-height:1.6; margin:0 0 14px; }
.beta-path form { margin-top:16px; }
.beta-steps { margin:0 0 14px; padding-left:22px; }
.beta-steps li { margin:9px 0; font-size:14.5px; line-height:1.6; color:var(--ink-2); }

/* Screens galleries */
.screens-sub { color:var(--ink-2); font-size:16px; max-width:64ch; margin-top:12px; }
.shots-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px 20px; }
.shot { margin:0; min-width:0; }
.shot.wide { grid-column:1 / -1; }
.shot-btn { display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; }
.shot img { width:100%; height:auto; display:block; background:var(--bg-2); border:1px solid var(--line-2); }
.shot figcaption { margin-top:12px; font-size:13.5px; color:var(--muted); }
.shot figcaption b { color:var(--ink-2); font-weight:600; }
.lightbox { position:fixed; inset:0; z-index:300; background:rgba(8,9,10,.94); display:none; align-items:center; justify-content:center; padding:clamp(16px, 4vw, 48px); cursor:zoom-out; }
.lightbox.open { display:flex; }
.lightbox img { max-width:100%; max-height:100%; width:auto; height:auto; border:1px solid var(--line-2); }
.screens-toggle { display:flex; gap:1px; margin-top:22px; border:1px solid var(--line-2); background:var(--line-2); width:max-content; }
.toggle-pill { min-height:42px; padding:0 20px; border:0; background:var(--bg); color:var(--ink-2); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; transition:background .15s, color .15s; }
.toggle-pill:hover { color:var(--ink); }
.toggle-pill.active { background:var(--ink); color:var(--bg); }

/* Guides hub */
.guides-hub { padding:0 0 40px; }
.guide-sec { margin-top:56px; }
.guide-sec .sec-head { margin-bottom:22px; }
.guide-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line-2); border:1px solid var(--line-2); }
.guide-card { display:flex; flex-direction:column; gap:10px; background:var(--bg); padding:24px 22px; color:inherit; transition:background .15s; }
.guide-card:hover { background:var(--bg-2); }
.guide-card h3 { font-size:17px; line-height:1.3; }
.guide-card p { color:var(--ink-2); font-size:14px; line-height:1.55; flex:1; margin:0; max-width:none; }
.gallery-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px; margin-top:8px; }
.gallery-grid .shot figcaption { font-size:13px; }
/* tiles share one frame, the panel's 16:10 screen; a longer capture shows its top, the zoom shows all of it */
.gallery-grid .shot img { aspect-ratio:16 / 10; object-fit:cover; object-position:left top; }

/* Steps, specs, how (older section kits used by guides) */
.steps, .specs-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line-2); border:1px solid var(--line-2); }
.specs-grid { grid-template-columns:1fr 1fr; }
.step, .spec { background:var(--bg); padding:26px 24px; }
.step-n { width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:var(--ink); color:var(--bg); font-family:var(--display); font-weight:800; font-size:16px; margin-bottom:16px; }
.step h3 { margin-bottom:8px; }
.step p { color:var(--ink-2); font-size:14.5px; }
.spec { display:flex; flex-direction:column; gap:3px; }
.spec span { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
.spec b { font-size:15.5px; }
.spec i { font-style:normal; font-size:13px; color:var(--ink-2); }

/* User manual page */
.manual-layout { display:grid; grid-template-columns:240px minmax(0, 1fr); gap:56px; align-items:start; margin-top:36px; }
.manual-toc { position:sticky; top:calc(var(--nav-h) + 24px); max-height:calc(100vh - 120px); overflow-y:auto; font-size:13.5px; line-height:1.45; }
.manual-toc summary { font-size:11px; text-transform:uppercase; letter-spacing:.12em; font-weight:600; color:var(--muted); margin-bottom:10px; cursor:default; list-style:none; }
.manual-toc summary::-webkit-details-marker { display:none; }
.manual-toc summary::after { content:"▾"; display:none; margin-left:8px; transition:transform .15s; }
.manual-toc details:not([open]) summary::after { transform:rotate(-90deg); }
.manual-toc nav a { display:block; padding:6px 12px; border-left:2px solid var(--line); color:var(--ink-2); }
.manual-toc nav a:hover { color:var(--ink); border-left-color:var(--line-3); }
.manual-toc nav a.active { color:var(--run-text); border-left-color:var(--run-text); font-weight:600; }
.manual-body > h2:first-child { margin-top:8px; }
.manual-body h2 { scroll-margin-top:96px; }
.manual-body h3 { scroll-margin-top:96px; }
.manual-body .manual-shot { max-width:760px; margin:24px 0 28px; }
.manual-body .manual-shot.narrow { max-width:440px; }
.manual-note { font-size:14.5px; color:var(--ink-2); margin:16px 0; }
.manual-body .compare-table { min-width:560px; }
.manual-body code.mono, .article code.mono { font-family:var(--mono); font-size:.86em; background:var(--bg-3); border:1px solid var(--line-2); border-radius:3px; padding:1px 6px; white-space:nowrap; }
.manual-body .founders-note { margin-top:40px; }
/* how-to video cards (/up/manual under a chapter heading, /up as a section); the YouTube frame loads only on click (main.js) */
.video-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:18px 16px; margin:18px 0 26px; max-width:760px; }
.videos-foot { margin-top:26px; color:var(--ink-2); font-size:15px; line-height:1.6; max-width:68ch; }
/* /up: the how-to playlist — the player left (YouTube frame), the list of videos right; a row swaps the player (main.js) */
.playlist { display:grid; grid-template-columns:minmax(0, 1fr) 360px; gap:24px; align-items:start; }
.pl-frame { display:block; width:100%; aspect-ratio:16/9; border:1px solid var(--line-2); border-radius:var(--r-lg); background:#0e0f11; }
.pl-now { margin:12px 0 0; font-size:15px; line-height:1.5; color:var(--ink-2); }
.pl-now b { color:var(--ink); }
.pl-now-num { font-family:var(--mono); font-size:12.5px; color:var(--muted); margin-right:6px; }
.pl-list { display:flex; flex-direction:column; gap:4px; max-height:min(600px, 64vh); overflow-y:auto; padding:8px; border:1px solid var(--line-2); border-radius:var(--r-lg); background:var(--bg-2); }
.pl-item { display:grid; grid-template-columns:20px 112px minmax(0, 1fr); gap:10px; align-items:center; padding:6px; border:1px solid transparent; border-radius:var(--r); background:transparent; text-align:left; cursor:pointer; color:var(--ink-2); font:inherit; }
.pl-item:hover { background:var(--bg-3); }
.pl-item.is-active { background:var(--bg-3); border-color:var(--line-2); color:var(--ink); }
.pl-item:focus-visible { outline:2px solid var(--run-text); outline-offset:1px; }
.pl-num { font-family:var(--mono); font-size:12px; color:var(--muted); text-align:center; }
.pl-item.is-active .pl-num { color:var(--run-text); font-weight:600; }
.pl-item img { width:112px; height:63px; object-fit:cover; border-radius:3px; display:block; background:#0e0f11; }
.pl-text { display:flex; flex-direction:column; gap:3px; min-width:0; }
.pl-title { font-size:13.5px; line-height:1.35; }
.pl-dur { font-family:var(--mono); font-size:11.5px; color:var(--muted); }
.video-card { margin:0; display:flex; flex-direction:column; gap:10px; min-width:0; }
.video-card-play { position:relative; display:block; width:100%; aspect-ratio:16/9; padding:0; border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden; background:#0e0f11; cursor:pointer; }
.video-card-play img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.video-card-play:hover img, .video-card-play:focus-visible img { transform:scale(1.03); }
.video-card-play:focus-visible { outline:2px solid var(--run-text); outline-offset:2px; }
.video-card-badge { position:absolute; left:10px; bottom:10px; display:inline-flex; align-items:center; gap:7px; padding:4px 10px 4px 8px; border-radius:999px; background:var(--run); color:var(--run-ink); font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.02em; }
.video-card-badge::before { content:''; width:0; height:0; border-left:8px solid currentColor; border-top:5px solid transparent; border-bottom:5px solid transparent; }
.video-card-frame { display:block; width:100%; aspect-ratio:16/9; border:1px solid var(--line-2); border-radius:var(--r-lg); background:#0e0f11; }
.video-card figcaption { font-size:13.5px; color:var(--ink-2); line-height:1.5; }
.video-card figcaption b { color:var(--ink); }
.video-card figcaption a { color:var(--muted); white-space:nowrap; }
@media (max-width: 1024px) {
    .manual-layout { display:block; }
    .manual-toc { position:static; max-height:none; margin-bottom:8px; border:1px solid var(--line-2); padding:14px 18px; background:var(--bg-2); }
    .manual-toc summary { cursor:pointer; margin-bottom:0; }
    .manual-toc summary::after { display:inline-block; }
    .manual-toc[data-collapsible] details[open] summary { margin-bottom:10px; }
    .manual-toc nav a { border-left:none; padding:7px 0; min-height:34px; }
}

/* ═══════════ MOBILE APP PAGE (app.html) ═══════════ */
.app-hero { padding:56px 0 72px; }
.app-hero-inner { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:48px; align-items:center; }
.app-hero-copy h1 { font-size:clamp(32px, 4.4vw, 54px); margin:14px 0 0; }
.app-hero-copy .hero-sub { margin:22px 0 30px; max-width:54ch; }
.app-hero .hero-cta { justify-content:flex-start; margin-bottom:26px; }
.app-trust { display:flex; flex-direction:column; gap:0; grid-template-columns:none; margin-top:0; }
.app-trust li { padding:10px 0 10px 20px; border-top:1px solid var(--line); margin-left:0 !important; }
.app-trust li::before { content:''; position:absolute; left:0; top:20px; width:10px; height:2px; background:var(--muted); }
.phone { background:#1a1c1f; border-radius:40px; padding:11px; border:1px solid rgba(255,255,255,.22); width:min(290px, 74vw); margin:0; }
.phone img { width:100%; height:auto; border-radius:30px; }
.phone.sm { width:100%; border-radius:30px; padding:8px; }
.phone.sm img { border-radius:23px; }
.phone-stack { position:relative; display:flex; justify-content:center; padding:16px 0; }
.phone-stack .phone { position:relative; z-index:1; }
.phone-stack .phone.back { position:absolute; z-index:0; top:50%; left:50%; transform:translate(-8%, -50%) rotate(7deg) scale(.88); opacity:.85; }
.phone-stack .tablet.back { position:absolute; z-index:0; top:50%; left:50%; transform:translate(-64%, -54%) rotate(-6deg); width:min(460px, 86vw); opacity:.95; }
.app-hero .phone-stack .phone { animation:duo-enter .8s cubic-bezier(.16,1,.3,1) both; }
.app-hero .phone-stack .tablet.back { --enter-from:-30px 48px; animation:duo-enter .8s cubic-bezier(.16,1,.3,1) .15s both; }
@keyframes duo-enter { from { opacity:0; translate:var(--enter-from, 0 36px); } }
.app-features { padding:56px 0 40px; }
.app-feature-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line-2); border:1px solid var(--line-2); }
.app-feature { background:var(--bg); padding:26px 24px 28px; }
.app-feature svg { width:24px; height:24px; color:var(--run-text); margin-bottom:16px; }
.app-feature h3 { font-size:18px; margin-bottom:8px; }
.app-feature p { color:var(--ink-2); font-size:14.5px; line-height:1.65; max-width:none; }
.app-feature p .mono { font-size:13px; }
.app-screens { padding:64px 0 40px; }
.app-screen-row { display:grid; grid-template-columns:repeat(4, 1fr); gap:22px; }
.app-shot { margin:0; display:flex; flex-direction:column; gap:14px; }
.app-shot figcaption { font-size:13.5px; color:var(--ink-2); line-height:1.5; text-align:center; padding:0 6px; }
.article-shots { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px 16px; margin:24px 0 10px; }
.article-shots.duo { grid-template-columns:repeat(2, 1fr); }
.app-steps { padding:64px 0 30px; }
.app-steps-list { list-style:none; counter-reset:step; display:flex; flex-direction:column; gap:14px; max-width:640px; }
.app-steps-list li { counter-increment:step; position:relative; padding:6px 0 6px 56px; color:var(--ink-2); font-size:15.5px; line-height:1.6; max-width:none; }
.app-steps-list li::before { content:counter(step); position:absolute; left:0; top:4px; width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:var(--bg-3); border:1px solid var(--line-2); color:var(--ink); font-family:var(--display); font-weight:800; font-size:15px; }
.app-cta-row { margin-top:30px; display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.app-android { padding:56px 0 30px; }
.app-device { padding:40px 0 30px; }
.app-device-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:28px; align-items:center; border:1px solid var(--line-2); background:var(--bg-2); padding:32px 36px; }
.app-device-card h2 { font-size:24px; margin:12px 0 12px; }
.app-device-card p { color:var(--ink-2); font-size:15px; line-height:1.65; max-width:56ch; }
.app-faq { padding:56px 0 96px; }
.app-tablet { padding:20px 0 40px; }
.app-tablet-row { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; align-items:start; }
.tablet { background:#1a1c1f; border-radius:24px; padding:11px; border:1px solid rgba(255,255,255,.22); width:100%; margin:0; }
.tablet img { width:100%; height:auto; border-radius:14px; display:block; }
.app-connect { padding:60px 0 34px; }
.app-connect .app-steps-list { max-width:680px; }
.app-connect .app-steps-list li b { color:var(--ink); }
.app-connect-note { font-size:14.5px; color:var(--ink-2); line-height:1.6; max-width:680px; }
.fold > summary { list-style:none; cursor:pointer; user-select:none; display:flex; width:max-content; max-width:100%; align-items:center; gap:12px; padding:11px 18px; border:1px solid var(--line-2); background:var(--bg-2); font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase; transition:border-color .15s; }
.fold > summary::-webkit-details-marker { display:none; }
.fold > summary::after { content:'+'; font-size:19px; font-weight:300; color:var(--muted); line-height:1; transition:transform .2s; }
.fold[open] > summary { margin-bottom:20px; }
.fold[open] > summary::after { transform:rotate(45deg); }
.fold > summary:hover { border-color:var(--ink); }
.fold.center > summary { margin-inline:auto; }
.fold + .fold { margin-top:12px; }
.app-more { margin-top:20px; }
.app-deep .sec-head { margin-bottom:28px; }
.app-tour { position:relative; }
.tour-track { display:grid; grid-auto-flow:column; grid-auto-columns:100%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.tour-track::-webkit-scrollbar { display:none; }
.tour-slide { scroll-snap-align:center; display:grid; grid-template-columns:minmax(0,.44fr) minmax(0,.56fr); gap:44px; align-items:center; padding:10px 76px 4px; }
.tour-slide .phone { margin-inline:auto; }
.tour-copy h3 { font-size:22px; margin-bottom:10px; }
.tour-copy p { color:var(--ink-2); font-size:15.5px; line-height:1.7; max-width:52ch; }
.tour-copy .tour-note { margin-top:12px; font-size:13.5px; color:var(--muted); }
.tour-btn { position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:44px; height:44px; cursor:pointer; display:flex; align-items:center; justify-content:center; border:1px solid var(--line-2); background:var(--bg-2); color:var(--ink); transition:border-color .15s; }
.tour-btn svg { width:20px; height:20px; }
.tour-btn:hover { border-color:var(--ink); }
.tour-btn.prev { left:0; }
.tour-btn.next { right:0; }
.tour-dots { display:flex; justify-content:center; gap:10px; margin-top:16px; }
.tour-dots button { width:8px; height:8px; border-radius:50%; border:none; cursor:pointer; background:var(--line-3); padding:0; transition:background .15s, box-shadow .15s; }
.tour-dots button.on { background:var(--run); }

/* Device page */
.terms-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:1px; background:var(--line-2); border:1px solid var(--line-2); }
.term { background:var(--bg); padding:18px 20px; display:flex; flex-direction:column; gap:6px; }
.term b { font-size:15.5px; }
.term span { font-size:14px; color:var(--ink-2); line-height:1.5; }
.box-list { list-style:none; display:grid; grid-template-columns:repeat(2, 1fr); gap:0 22px; }
.box-list li { position:relative; padding:9px 0 9px 24px; font-size:15px; color:var(--ink-2); line-height:1.5; border-top:1px solid var(--line); max-width:none; }
.box-list li::before { content:''; position:absolute; left:0; top:20px; width:10px; height:2px; background:var(--muted); }
.device-hero-cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; align-items:center; }
.device-hero-fine { font-size:13.5px; color:var(--muted); margin-top:12px; }
.checkout-note { margin:22px 0 0; max-width:820px; padding:14px 18px; border:1px solid var(--warn-text); background:rgba(255,182,72,.14); color:var(--ink); font-size:14.5px; line-height:1.5; }
.thanks-order { color:var(--run-text); margin-top:8px; }


/* ═══════════ INNER PAGES: the dark band under the rail + shared kit ═══════════ */
.page-band { padding:52px 0 52px; border-bottom:1px solid var(--line-2); }
.landing > .page-band { margin:-56px 0 44px; padding:44px 0 48px; }
.landing > .page-band .page-hero h1 { margin-top:12px; }
.landing > .page-band .page-hero .small-note { color:var(--muted); }
.landing > .page-band .app-cta-row { margin-top:20px; }
.landing > .page-band .urgent-cta { margin-top:22px; }
.page-band .crumbs { margin-bottom:22px; }
.page-band-inner { display:grid; grid-template-columns:minmax(0,1fr); gap:40px; align-items:center; }
.page-band h1 { font-size:clamp(30px, 3.9vw, 52px); max-width:18ch; }
.page-band .hero-sub { color:var(--ink-2); font-size:17.5px; max-width:58ch; margin:20px 0 26px; }
.page-band .hero-cta { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.page-band .band-fine { font-size:13.5px; color:var(--muted); margin-top:14px; max-width:60ch; }
.page-band .band-fine a { color:var(--ink-2); }
.page-band .eyebrow { margin:12px 0 0; }
.page-band figure { margin:0; }
.page-band .band-photo { border:1px solid var(--line-2); background:var(--bg-2); }
.page-band .band-photo img { width:100%; height:auto; display:block; }
@media (min-width: 1080px) {
    .page-band-inner { grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:64px; }
    .page-band-inner.wide-media { grid-template-columns:minmax(0,6fr) minmax(0,6fr); }
}
.cell p { font-size:15px; color:var(--ink-2); line-height:1.55; margin-top:8px; max-width:none; }
.cell h3 { font-size:19px; }
.band-photo figcaption { padding:10px 14px; border-top:1px solid var(--line-2); font-size:13px; color:var(--muted); }
.sec-body > h2 + .board, .sec-body > h2 + .kv-table, .sec-body > h2 + .check-list, .sec-body > h2 + .proc,
.sec-body > h2 + .guide-list, .sec-body > h2 + .compare-scroll, .sec-body > h2 + .hw-grid, .sec-body > h2 + .feature,
.sec-body > h2 + .app-feature-grid, .sec-body > h2 + .app-screen-row, .sec-body > h2 + .app-tablet-row, .sec-body > h2 + .gallery-grid { margin-top:28px; }
/* status strip: a row of board cells (label over value) */
.board.stats { grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }
.board.stats .cell-value { font-size:22px; }
/* two-column key/value table (specs, box contents, terms) */
.kv-table { width:100%; border-collapse:collapse; border:1px solid var(--line-2); }
.kv-table th, .kv-table td { padding:13px 18px; text-align:left; font-size:15px; border-bottom:1px solid var(--line); vertical-align:top; }
.kv-table th { width:32%; font-weight:600; color:var(--ink); border-right:1px solid var(--line); font-size:14px; }
.kv-table td { color:var(--ink-2); }
.kv-table tr:last-child th, .kv-table tr:last-child td { border-bottom:0; }
.kv-table td .mono { font-size:13.5px; }
/* checklist rows */
.check-list { list-style:none; border:1px solid var(--line-2); }
.check-list li { padding:12px 18px 12px 40px; position:relative; border-top:1px solid var(--line); color:var(--ink-2); font-size:15px; max-width:none; }
.check-list li:first-child { border-top:0; }
.check-list li::before { content:''; position:absolute; left:18px; top:22px; width:10px; height:2px; background:var(--run-text); }
.check-list li b { color:var(--ink); }
/* numbered procedure (steps the reader performs, the number carries order) */
.proc { list-style:none; counter-reset:proc; border:1px solid var(--line-2); }
.proc > li { counter-increment:proc; position:relative; padding:18px 20px 18px 70px; border-top:1px solid var(--line); color:var(--ink-2); font-size:15.5px; line-height:1.6; max-width:none; }
.proc > li:first-child { border-top:0; }
.proc > li::before { content:counter(proc, decimal-leading-zero); position:absolute; left:20px; top:20px; font-family:var(--mono); font-size:13px; color:var(--muted); }
.proc > li b { color:var(--ink); }
/* guides hub: a labeled list of links, each a row */
.guide-list { list-style:none; border:1px solid var(--line-2); }
.guide-list li { border-top:1px solid var(--line); max-width:none; }
.guide-list li:first-child { border-top:0; }
.guide-list a { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:baseline; padding:14px 18px; color:var(--ink); transition:background .15s; }
.guide-list a:hover { background:var(--bg-2); }
.guide-list li a { text-decoration:none; }
main > .toc-wrap { margin-top:24px; }
.guide-list a span { font-size:13px; color:var(--muted); white-space:nowrap; }
.guide-list a small { display:block; font-size:13.5px; color:var(--ink-2); margin-top:2px; }
@media (max-width: 760px) {
    .guide-list a { grid-template-columns:1fr; gap:4px; }
    .guide-list a span { white-space:normal; }
    .proc > li { padding-left:56px; }
    .kv-table th { width:40%; }
}

/* ═══════════ Feedback widget (injected by main.js) ═══════════ */
.fb-fab {
    position:fixed; right:20px; bottom:20px; z-index:900;
    display:inline-flex; align-items:center; gap:8px;
    min-height:42px; padding:0 16px;
    background:var(--bg-2); color:var(--ink);
    border:1px solid var(--line-3); border-radius:var(--r); cursor:pointer;
    font-family:var(--font); font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    box-shadow:0 10px 26px rgba(0,0,0,.5);
    transition:border-color .15s, background .15s;
}
.fb-fab svg { width:16px; height:16px; }
.fb-fab { box-shadow:none; }
.fb-fab:hover { border-color:var(--ink); background:var(--bg-3); }
@media (max-width:640px) { .fb-fab { right:14px; bottom:calc(14px + env(safe-area-inset-bottom, 0px)); padding:0 14px; } }
@media (max-width:767px) { html:not(.fb-scrolled) .fb-fab { display:none; } }
.fb-lock, .fb-lock body { overflow:hidden; }
.fb-overlay { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(8,9,10,.7); opacity:0; transition:opacity .2s; }
.fb-overlay.open { opacity:1; }
.fb-overlay[hidden] { display:none; }
.fb-card { position:relative; width:100%; max-width:460px; background:var(--bg-2); border:1px solid var(--line-2); padding:28px 26px 26px; box-shadow:var(--shadow); transform:translateY(8px); transition:transform .2s; max-height:calc(100dvh - 40px); overflow-y:auto; }
.fb-overlay.open .fb-card { transform:none; }
.fb-card h3 { padding-right:32px; }
.fb-sub { margin:6px 0 18px; font-size:14px; color:var(--ink-2); }
.fb-close { position:absolute; top:14px; right:14px; width:34px; height:34px; border:1px solid var(--line-2); background:var(--bg); color:var(--ink-2); cursor:pointer; font-size:13px; line-height:1; transition:border-color .15s, color .15s; }
.fb-close:hover { border-color:var(--ink); color:var(--ink); }
.fb-kind { display:flex; gap:1px; margin-bottom:16px; border:1px solid var(--line-2); background:var(--line-2); }
.fb-kind label { flex:1; cursor:pointer; }
.fb-kind input { position:absolute; opacity:0; pointer-events:none; }
.fb-kind span { display:flex; align-items:center; justify-content:center; min-height:42px; background:var(--bg); font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); transition:background .15s, color .15s; }
.fb-kind input:checked + span { background:var(--ink); color:var(--bg); }
.fb-kind input:focus-visible + span { outline:2px solid var(--warn); outline-offset:-2px; }
.fb-label { display:block; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
.fb-label em { color:var(--muted); font-weight:400; text-transform:none; letter-spacing:0; }
.fb-form textarea, .fb-form input[type="email"] { width:100%; background:var(--bg); border:1px solid var(--line-2); border-radius:var(--r); min-height:50px; padding:12px 14px; margin-bottom:16px; color:var(--ink); font-family:var(--font); font-size:15px; resize:vertical; transition:border-color .15s, box-shadow .15s; }
.fb-form textarea:focus, .fb-form input[type="email"]:focus { outline:none; border-color:var(--run); box-shadow:0 0 0 3px rgba(59,227,127,.18); }
.fb-hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.fb-send { width:100%; }
.fb-status { margin-top:12px; font-size:13.5px; color:var(--stop-text); }
.fb-status a { text-decoration:underline; }
.fb-done { text-align:center; padding:14px 0 6px; }
.fb-done b { font-family:var(--display); font-size:20px; }
.fb-done p { margin:8px auto 0; font-size:14px; color:var(--ink-2); }

/* ═══════════ Cookie consent banner (injected by main.js) ═══════════ */
.ck-banner { position:fixed; left:20px; bottom:20px; z-index:950; max-width:430px; background:var(--bg-2); border:1px solid var(--line-3); padding:18px 20px; box-shadow:var(--shadow); }
.ck-banner p { font-size:13.5px; color:var(--ink-2); line-height:1.55; }
.ck-banner p b { color:var(--ink); }
.ck-banner a { text-decoration:underline; }
.ck-actions { display:flex; gap:10px; margin-top:14px; }
.ck-actions .btn { flex:1; }
html.ck-open .fb-fab { display:none; }
@media (max-width:640px) { .ck-banner { left:10px; right:10px; max-width:none; bottom:calc(10px + env(safe-area-inset-bottom, 0px)); } }

/* ═══════════ /demo keeps its own light workbench (demo.css was written for it) ═══════════ */
body.demo-page, body.demo-page .nav, body.demo-page .hero, body.demo-page .footer {
    color-scheme:light;
    --bg:#ffffff; --bg-2:#f4f5f4; --bg-3:#eceeec; --bg-4:#dfe2df;
    --ink:#121317; --ink-2:#45474d; --muted:#6e7076;
    --line:rgba(18,19,23,.09); --line-2:rgba(18,19,23,.16); --line-3:rgba(18,19,23,.3);
    --run:#1ea966; --run-ink:#ffffff; --run-text:#15804d; --stop:#e5484d; --stop-text:#c23a3f; --warn:#e0930c; --warn-text:#8a5200;
    --accent:#15804d; --ok:#15804d; --bad:#c23a3f;
    --card-ink:#0a0b0d; --shadow:0 30px 80px rgba(18,19,23,.12);
}
body.demo-page ::selection { background:var(--run); color:#fff; }
body.demo-page h1 { text-transform:none; font-stretch:100%; letter-spacing:-.02em; }

/* ═══════════ Motion preferences ═══════════ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    .lamp.blink { animation:none; }
    .subnav, .subnav-ind, .subnav a, .rec-item, .rec-sum, .lamp { transition:none; }
    .app-hero .phone-stack .phone, .app-hero .phone-stack .tablet.back { animation:none; }
}

/* ═══════════ Responsive ═══════════ */
@media (max-width: 1240px) and (min-width: 901px) {
    .nav-links { gap:18px; }
    .nav-inner { gap:18px; }
}
@media (max-width: 1100px) and (min-width: 901px) {
    .nav .brand-word { display:none; }
    .footer-inner.has-cols { gap:28px 40px; }
}
@media (max-width: 1100px) {
    .sec-inner { grid-template-columns:160px minmax(0,1fr); gap:24px 36px; }
    .feature { gap:36px; }
}
@media (max-width: 900px) {
    .nav-links { display:none; position:absolute; top:var(--nav-h); left:0; right:0; flex-direction:column; gap:0; background:var(--bg-2); border-bottom:1px solid var(--line-2); padding:6px 0; }
    .nav-links.open { display:flex; }
    .nav-links a { padding:14px 28px; font-size:16px; min-height:48px; display:flex; align-items:center; border-top:1px solid var(--line); }
    .nav-links a[aria-current]::before { display:none; }
    .nav-burger { display:flex; }
    .sec { padding:56px 0; }
    .sec-inner { grid-template-columns:minmax(0,1fr); gap:18px; }
    .sec-label { display:none; }
    .split, .path-grid, .plan-grid, .cases-grid { grid-template-columns:minmax(0,1fr); }
    .case { grid-template-columns:minmax(0,1fr); gap:10px; }
    .case-tag { white-space:normal; }
    .shots-grid, .hw-grid, .hw-duo, .specs-grid, .steps { grid-template-columns:1fr; }
    .feature { grid-template-columns:1fr; padding:32px 0; gap:24px; }
    .feature.flip .feature-copy { order:1; }
    .feature.flip .feature-visual { order:2; }
    .contact-card { padding:30px 24px; }
    .form-grid, .get-row { grid-template-columns:1fr; }
    .footer-inner, .footer-inner.has-cols { grid-template-columns:1fr; gap:22px; }
    .nav-sep { display:none; }
    .nav-links a.nav-prod { align-items:center; }
    .nav-prod small { display:block; font-size:12.5px; font-weight:500; color:var(--muted); letter-spacing:0; }
    .prod-grid, .prod-grid.two, .fit-grid, .plan-grid.two { grid-template-columns:minmax(0,1fr); }
    .footer-links { flex-direction:row; flex-wrap:wrap; gap:10px 20px; }
    .rec-status { grid-template-columns:1fr; }
    .rec-status > div { display:flex; align-items:center; justify-content:space-between; padding:12px 18px; }
    .rec-status .cell-label { margin:0; }
    .rec-status .rec-down b { font-size:30px; }
    .hero-trust { grid-template-columns:1fr; }
    .hero-trust li + li { margin-left:0; }
    .hero-trust li { padding:12px 0; border-top:1px solid var(--line); }
    .hero-trust li b { display:inline; margin-right:10px; }
    .app-tablet-row { gap:16px; }
    .app-hero-inner { grid-template-columns:1fr; gap:44px; }
    .app-hero { padding:48px 0 56px; }
    .phone-stack .tablet.back { transform:translate(-58%, -50%) rotate(-6deg); width:min(420px, 78vw); }
    .app-hero .hero-cta { justify-content:flex-start; }
    .app-feature-grid { grid-template-columns:repeat(2, 1fr); }
    .app-screen-row { grid-template-columns:repeat(2, 1fr); gap:26px 18px; }
    .guide-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 760px) {
    .calc-inputs, .calc-out { grid-template-columns:1fr; }
    .landing { padding-top:40px; }
    .tour-slide { grid-template-columns:1fr; gap:20px; padding:0 6px; text-align:center; }
    .tour-copy p { margin-inline:auto; }
    .tour-slide .phone { width:min(230px, 62vw); }
    .tour-btn { display:none; }
    .terms-grid, .box-list { grid-template-columns:1fr; }
}
@media (max-width: 640px) {
    .guide-grid { grid-template-columns:1fr; }
    .gallery-grid { grid-template-columns:1fr 1fr; gap:16px 12px; }
    .article-shots, .article-shots.duo { grid-template-columns:repeat(2, 1fr); gap:16px 12px; }
    .article-shots > .app-shot:nth-child(3):last-child { grid-column:1 / -1; max-width:60%; margin:0 auto; }
    .never-grid { grid-template-columns:1fr; }
}
@media (max-width: 560px) {
    .app-feature-grid { grid-template-columns:1fr; }
    .app-device-card { grid-template-columns:1fr; padding:26px 22px; }
    .app-hero .hero-cta .btn, .app-hero .hero-cta .appstore-badge { width:100%; }
    .app-cta-row { align-items:stretch; text-align:center; }
    .phone-stack .back { display:none; }
    .app-tablet-row { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:76%; overflow-x:auto; gap:14px; scroll-snap-type:x mandatory; padding-bottom:12px; -webkit-overflow-scrolling:touch; }
    .app-tablet-row .app-shot { scroll-snap-align:center; }
}
@media (max-width: 460px) {
    body { font-size:16px; }
    .manual-body code.mono, .article code.mono { white-space:normal; overflow-wrap:anywhere; }
    .video-cards { grid-template-columns:1fr 1fr; gap:14px 12px; }
    .wrap { padding:0 18px; }
    .hero { padding:36px 0 32px; }
    .hero-cta { flex-direction:column; align-items:stretch; }
    .hero-cta .btn, .hero-cta .appstore-badge { width:100%; justify-content:center; }
    .mock-ctrl-grid { grid-template-columns:repeat(2, 1fr); }
    .device { padding:12px; }
    .plan .btn, .plan .appstore-badge { align-self:stretch; }
    .brand-word { display:none; }
    .footer .brand-word { display:block; }
}

/* The live simulator needs room (demo/index.html shows a note below 900 px):
   its links are hidden on narrow screens so nobody is sent to a note. */
@media (max-width: 899px) {
    .demo-wide-only { display:none !important; }
}
@media (max-width:460px) {
    .video-cards { grid-template-columns:1fr; }
}
@media (max-width:900px) {
    .playlist { grid-template-columns:1fr; }
    .pl-list { max-height:none; }
}