/* ============================================================
   1LineArt Multi-Screen / Split-Screen — site design system
  Script by: Gamal Nabih | 1LineArt Studio | https://1lineart.com
   ============================================================ */

@font-face { font-family:'Bricolage Grotesque'; src:url('fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2'); font-weight:200 800; font-display:swap; }
@font-face { font-family:'Atkinson Hyperlegible'; src:url('fonts/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Atkinson Hyperlegible'; src:url('fonts/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); font-weight:500; font-display:swap; }

:root {
  color-scheme: light dark;

  --bg:#f5f6f8; --surface:#ffffff; --surface-2:#eef0f4; --surface-3:#e2e6ed;
  --line:rgba(24,29,38,.12); --line-strong:rgba(24,29,38,.24);
  --text:#181d26; --text-2:#434c5a; --text-3:#5f6978;
  --accent:#c25400; --accent-hover:#a04500; --accent-ink:#ffffff; --accent-text:#ad4b00;
  --accent-soft:rgba(194,84,0,.10); --accent-line:rgba(194,84,0,.4);
  --teal:#0f766e; --teal-soft:rgba(15,118,110,.10);
  --nav-bg:rgba(245,246,248,.84);
  --shadow:0 1px 2px rgba(16,24,40,.06),0 14px 34px -18px rgba(16,24,40,.25);
  --shadow-lg:0 2px 4px rgba(16,24,40,.06),0 28px 60px -28px rgba(16,24,40,.38);
  --stage:#12151b;

  --r-lg:24px; --r-md:14px; --r-sm:9px;
  --wrap:1180px; --pad-x:clamp(18px,4vw,40px);
  --section:clamp(64px,9vw,120px);
  --nav-h:64px;
  --f-display:'Bricolage Grotesque','Atkinson Hyperlegible',system-ui,sans-serif;
  --f-body:'Atkinson Hyperlegible','Segoe UI',system-ui,-apple-system,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --spring:cubic-bezier(.34,1.56,.64,1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring:linear(0, 0, 0.009, 0.117, 0.281, 0.483, 0.699, 0.907, 1.084, 1.214, 1.289, 1.307, 1.273, 1.2, 1.103, 1, 0.908, 0.84, 0.805, 0.805, 0.838, 0.894, 0.964, 1.035, 1.094, 1.134, 1.149, 1.138, 1.105, 1.056, 1); }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { 
  --bg:#0f1218; --surface:#161a22; --surface-2:#1d222c; --surface-3:#272d39;
  --line:rgba(232,236,243,.11); --line-strong:rgba(232,236,243,.24);
  --text:#e9ecf2; --text-2:#b4bcc9; --text-3:#97a0af;
  --accent:#ff8a3d; --accent-hover:#ffa05e; --accent-ink:#1b0d00; --accent-text:#ff9c5a;
  --accent-soft:rgba(255,138,61,.13); --accent-line:rgba(255,138,61,.45);
  --teal:#43c9bb; --teal-soft:rgba(67,201,187,.13);
  --nav-bg:rgba(15,18,24,.82);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 34px -18px rgba(0,0,0,.7);
  --shadow-lg:0 2px 4px rgba(0,0,0,.4),0 28px 60px -28px rgba(0,0,0,.85);
  --stage:#0a0c10;
 }
}
:root[data-theme="dark"] { color-scheme: dark; 
  --bg:#0f1218; --surface:#161a22; --surface-2:#1d222c; --surface-3:#272d39;
  --line:rgba(232,236,243,.11); --line-strong:rgba(232,236,243,.24);
  --text:#e9ecf2; --text-2:#b4bcc9; --text-3:#97a0af;
  --accent:#ff8a3d; --accent-hover:#ffa05e; --accent-ink:#1b0d00; --accent-text:#ff9c5a;
  --accent-soft:rgba(255,138,61,.13); --accent-line:rgba(255,138,61,.45);
  --teal:#43c9bb; --teal-soft:rgba(67,201,187,.13);
  --nav-bg:rgba(15,18,24,.82);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 34px -18px rgba(0,0,0,.7);
  --shadow-lg:0 2px 4px rgba(0,0,0,.4),0 28px 60px -28px rgba(0,0,0,.85);
  --stage:#0a0c10;
 }
:root[data-theme="light"] { color-scheme: light; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--text); font:400 1.0625rem/1.65 var(--f-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img, svg, video { max-width:100%; display:block; }
h1,h2,h3,h4 { font-family:var(--f-display); color:var(--text); margin:0; letter-spacing:-.015em; text-wrap:balance; }
p { margin:0; }
ul, ol { margin:0; padding:0; list-style:none; }
a { color:var(--accent-text); text-underline-offset:3px; }
a:hover { color:var(--accent-hover); }
code, kbd { font-family:var(--f-mono); font-size:.86em; background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:.08em .38em; overflow-wrap:anywhere; }
strong { font-weight:700; }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; border-radius:6px; }
::selection { background:var(--accent); color:var(--accent-ink); }
.wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad-x); }
.skip-link { position:fixed; left:12px; top:-60px; z-index:200; background:var(--accent); color:var(--accent-ink); padding:.6rem 1rem; border-radius:var(--r-sm); font-weight:700; text-decoration:none; transition:top .2s; }
.skip-link:focus { top:12px; }
[hidden] { display:none !important; }

/* ---------- Navigation ---------- */
.top-nav { position:sticky; top:0; z-index:100; background:var(--nav-bg); -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s; }
.top-nav.is-stuck { border-bottom-color:var(--line); }
.nav-inner { display:flex; align-items:center; gap:20px; height:var(--nav-h); }
.brand { display:flex; align-items:center; gap:10px; font:700 1rem/1.1 var(--f-display); color:var(--text); text-decoration:none; white-space:nowrap; letter-spacing:-.01em; }
.brand:hover { color:var(--text); }
.brand svg { width:28px; height:28px; flex:none; }
.nav-links { display:flex; align-items:center; gap:2px; margin-inline:auto; }
.nav-links a { position:relative; padding:.45rem .8rem; border-radius:999px; color:var(--text-2); font-size:.95rem; font-weight:700; text-decoration:none; white-space:nowrap; transition:color .15s, background .15s; }
.nav-links a:hover { color:var(--text); background:var(--surface-2); }
.nav-links a.is-active { color:var(--accent-text); background:var(--accent-soft); }
.nav-menu-cta { display:none; }
.nav-actions { display:flex; align-items:center; gap:10px; }
.icon-btn { width:40px; height:40px; display:inline-grid; place-items:center; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--text-2); cursor:pointer; transition:color .15s, border-color .15s; }
.icon-btn:hover { color:var(--text); border-color:var(--line-strong); }
.nav-toggle { display:none; height:40px; padding:0 .95rem; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--text); font:700 .92rem var(--f-body); cursor:pointer; }
.progress { height:3px; }
.progress span { display:block; height:100%; width:100%; background:var(--accent); transform-origin:0 50%; transform:scaleX(var(--p,0)); }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; min-height:48px; padding:.7rem 1.3rem; border-radius:999px; border:1.5px solid transparent; font:700 1rem/1.2 var(--f-body); text-decoration:none; cursor:pointer; transition:background .15s, border-color .15s, color .15s, transform .15s; }
.btn svg { width:18px; height:18px; flex:none; }
.btn-sm { min-height:40px; padding:.45rem 1rem; font-size:.93rem; }
.btn-primary { background:var(--accent); color:var(--accent-ink); }
.btn-primary:hover { background:var(--accent-hover); color:var(--accent-ink); }
.btn-ghost { background:transparent; color:var(--text); border-color:var(--line-strong); }
.btn-ghost:hover { background:var(--surface-2); color:var(--text); border-color:var(--text-3); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn:active:not(:disabled) { transform:translateY(1px); }
.text-link { font-weight:700; }

/* ---------- Hero ---------- */
.hero { padding-block:clamp(40px,7vw,96px) clamp(56px,8vw,104px); overflow:clip; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:clamp(32px,5vw,72px); align-items:center; }
.hero h1 { font-size:clamp(2.5rem,5.6vw,4.6rem); line-height:1.02; font-weight:800; letter-spacing:-.035em; max-width:13ch; }
.lede { color:var(--text-2); font-size:clamp(1.05rem,1.4vw,1.2rem); line-height:1.6; max-width:60ch; }
.hero .lede { margin-top:1.4rem; max-width:50ch; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:2rem; }
.facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin:2.6rem 0 0; border-top:1px solid var(--line); }
.facts div { padding:.9rem 1rem .9rem 0; border-bottom:1px solid var(--line); }
.facts dt { font-size:.85rem; color:var(--text-3); font-weight:700; }
.facts dd { margin:.1rem 0 0; font-weight:700; color:var(--text); }
.hero-stage { position:relative; }
.win-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(8px,1.4vw,16px); padding:clamp(10px,1.6vw,18px); background:var(--surface-2); border:1px solid var(--line); border-radius:calc(var(--r-lg) + 8px); }
.win { margin:0; aspect-ratio:480/412; border-radius:clamp(12px,1.8vw,22px); overflow:hidden; border:2px solid #fff; box-shadow:var(--shadow); background:var(--stage); }
:root[data-theme="dark"] .win { border-color:rgba(255,255,255,.88); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .win { border-color:rgba(255,255,255,.88); } }
.win img { width:100%; height:100%; object-fit:cover; }
@keyframes win-in { from { transform:scale(0); } to { transform:scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  .win { animation:win-in 1.05s var(--spring) both; animation-delay:calc(var(--i) * 90ms + 120ms); }
}

/* ---------- Blocks ---------- */
.block { padding-block:var(--section); scroll-margin-top:var(--nav-h); border-top:1px solid var(--line); }
.block:nth-of-type(even) { background:var(--surface); }
.block-head { margin-bottom:clamp(28px,4vw,48px); max-width:68ch; }
.block-head h2 { font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1.08; font-weight:800; letter-spacing:-.028em; }
.block-head .lede { margin-top:1rem; }
.head-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; margin-top:1.5rem; }
.split { display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:clamp(28px,5vw,80px); align-items:start; }
.split > .block-head { position:sticky; top:calc(var(--nav-h) + 28px); margin:0; }
.split .block-head h2 { font-size:clamp(1.7rem,2.8vw,2.35rem); }
.block-body { display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(28px,4vw,44px); min-width:0; }
.sub-title { font-size:1.3rem; font-weight:700; margin-bottom:1rem; }
.subsection { scroll-margin-top:calc(var(--nav-h) + 16px); }
.callout { padding:1rem 1.2rem; background:var(--accent-soft); border-left:4px solid var(--accent); border-radius:0 var(--r-md) var(--r-md) 0; color:var(--text); font-size:1rem; }
.note-inline { margin-top:1rem; color:var(--text-2); font-size:.97rem; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(18px,3vw,32px); }
.block:nth-of-type(even) .panel { background:var(--bg); }
.panel-title { font-size:1.25rem; margin-bottom:1rem; }
.preset-label { font:700 .95rem var(--f-body); color:var(--text-2); margin-bottom:.7rem; }
.preset-label-spaced { margin-top:1.6rem; }

/* ---------- Samples viewer ---------- */
.viewer { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden; }
.viewer-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 24px; padding:14px clamp(14px,2vw,22px); border-bottom:1px solid var(--line); }
.seg { display:inline-flex; padding:4px; gap:2px; background:var(--surface-2); border-radius:999px; }
.seg-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.45rem .95rem; border:0; border-radius:999px; background:transparent; color:var(--text-2); font:700 .92rem var(--f-body); cursor:pointer; transition:background .15s, color .15s; }
.seg-btn:hover { color:var(--text); }
.seg-btn.is-active { background:var(--surface); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.18), 0 0 0 1px var(--line); }
.seg-count { font:500 .78rem var(--f-mono); color:var(--text-3); }
.switch { display:inline-flex; align-items:center; gap:.65rem; cursor:pointer; font-size:.93rem; color:var(--text-2); }
.switch input { position:absolute; opacity:0; pointer-events:none; }
.switch-ui { position:relative; width:42px; height:24px; flex:none; border-radius:999px; background:var(--surface-3); border:1px solid var(--line-strong); transition:background .2s; }
.switch-ui::after { content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--text-3); transition:transform .25s var(--spring), background .2s; }
.switch input:checked + .switch-ui { background:var(--accent); border-color:var(--accent); }
.switch input:checked + .switch-ui::after { transform:translateX(18px); background:var(--accent-ink); }
.switch input:focus-visible + .switch-ui { outline:3px solid var(--accent); outline-offset:3px; }
.viewer-main { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,360px); align-items:start; }
.viewer-screen { min-width:0; }
.stage { --stage-h:clamp(360px,46vw,540px); position:relative; height:var(--stage-h); display:grid; place-items:center; padding:20px; background:var(--stage); overflow:hidden; isolation:isolate; }
.stage::before { content:""; position:absolute; inset:-30px; z-index:-1; background:var(--ambient, none) center/cover; filter:blur(36px) saturate(1.3); opacity:.5; transition:opacity .4s; }
.screen { margin:0; position:relative; border-radius:var(--r-md); overflow:hidden; background:#000; box-shadow:0 20px 50px -20px rgba(0,0,0,.8); }
.screen.is-vertical { height:100%; aspect-ratio:9/16; }
.screen.is-horizontal { width:100%; aspect-ratio:16/9; max-height:100%; }
.sample-video { width:100%; height:100%; object-fit:cover; background:#000; transition:opacity .25s; }
.screen.is-loading .sample-video { opacity:.35; }
.viewer-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; padding:16px clamp(14px,2vw,22px); }
.now { min-width:0; display:grid; gap:.1rem; }
.now strong { font:700 1.1rem var(--f-display); }
.now span { color:var(--text-3); font-size:.92rem; }
.viewer-actions { display:flex; gap:10px; }
.pool { padding:18px clamp(14px,2vw,22px) 22px; border-left:1px solid var(--line); display:grid; gap:22px; align-self:stretch; background:var(--surface); }
.pool-group h3 { font:700 .98rem var(--f-body); display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.7rem; letter-spacing:0; }
.pool-note { font:400 .85rem var(--f-body); color:var(--text-3); }
.pool-list { display:grid; gap:8px; }
.pool-list--vertical { grid-template-columns:repeat(4,1fr); }
.pool-list--horizontal { grid-template-columns:repeat(3,1fr); }
.clip { position:relative; display:block; width:100%; padding:0; border:2px solid transparent; border-radius:10px; overflow:hidden; background:var(--stage); cursor:pointer; transition:border-color .15s, transform .15s; }
.clip.is-vertical { aspect-ratio:9/16; }
.clip.is-horizontal { aspect-ratio:16/9; }
.clip img { width:100%; height:100%; object-fit:cover; opacity:.82; transition:opacity .15s; }
.clip:hover img { opacity:1; }
.clip:hover { transform:translateY(-2px); }
.clip.is-active { border-color:var(--accent); }
.clip.is-active img { opacity:1; }
.clip-tag { position:absolute; left:4px; bottom:4px; padding:.05rem .4rem; border-radius:5px; background:rgba(0,0,0,.72); color:#fff; font:500 .72rem var(--f-mono); }
.clip.is-active .clip-tag { background:var(--accent); color:var(--accent-ink); }

/* ---------- Features ---------- */
.feature-layout { display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:start; }
.walkthrough { margin:0; position:sticky; top:calc(var(--nav-h) + 24px); }
.phone { aspect-ratio:9/16; border-radius:34px; padding:9px; background:#12151b; box-shadow:var(--shadow-lg); border:1px solid var(--line-strong); }
.demo-video { width:100%; height:100%; object-fit:cover; border-radius:26px; background:#000; }
.walkthrough figcaption { margin-top:1rem; color:var(--text-2); font-size:.93rem; line-height:1.5; }
.walkthrough figcaption strong { display:block; color:var(--text); font-size:1rem; }
.feature-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(22px,3vw,34px) clamp(20px,3vw,40px); }
.feature { display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; }
.feature-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:var(--accent-soft); color:var(--accent-text); }
.feature-icon svg { width:22px; height:22px; }
.feature h3 { font-size:1.12rem; margin-bottom:.25rem; letter-spacing:-.01em; }
.feature p { color:var(--text-2); font-size:.98rem; line-height:1.55; }
.groups { margin-top:clamp(32px,4vw,48px); padding-top:clamp(24px,3vw,34px); border-top:1px solid var(--line); }
.groups h3 { font-size:1.3rem; margin-bottom:1rem; }
.group-list { display:grid; gap:0; counter-reset:g; }
.group-list li { counter-increment:g; display:grid; grid-template-columns:2rem 11rem 1fr; gap:.4rem 1rem; padding:.8rem 0; border-bottom:1px solid var(--line); align-items:baseline; }
.group-list li::before { content:counter(g); font:500 .9rem var(--f-mono); color:var(--text-3); }
.group-list strong { font-family:var(--f-display); }
.group-list span { color:var(--text-2); font-size:.98rem; }
.feature-body .callout { margin-top:1.8rem; }

/* ---------- Guide: steps, paths ---------- */
.step-list { display:grid; gap:0; counter-reset:step; }
.step-item { counter-increment:step; display:grid; grid-template-columns:auto 1fr; gap:18px; padding-block:1.1rem; border-top:1px solid var(--line); }
.step-item:last-child { border-bottom:1px solid var(--line); }
.step-item::before { content:counter(step); width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:var(--accent-ink); font:700 .95rem var(--f-display); margin-top:.1rem; }
.step-body { min-width:0; }
.step-body h3 { font-size:1.12rem; margin-bottom:.35rem; letter-spacing:-.01em; }
.step-body p { color:var(--text-2); }
.step-body p + p, .step-body .path-block + p, .step-body p + .path-block { margin-top:.7rem; }
.path-block { position:relative; margin-top:.6rem; padding:.55rem 5.2rem .55rem .9rem; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); font:400 .83rem/1.5 var(--f-mono); color:var(--text); overflow-wrap:anywhere; }
.os-label { display:block; font:700 .75rem var(--f-body); color:var(--text-3); margin-bottom:.1rem; }
.copy-btn { position:absolute; top:.5rem; right:.5rem; min-height:32px; padding:.2rem .8rem; border-radius:999px; border:1px solid var(--line-strong); background:var(--surface); color:var(--text); font:700 .8rem var(--f-body); cursor:pointer; }
.copy-btn:hover { border-color:var(--text-3); }
.copy-btn.is-done { background:var(--teal-soft); border-color:var(--teal); color:var(--teal); }
.tip-list, .usage-list { display:grid; gap:.7rem; }
.subsection ul:not(.step-list) { display:grid; gap:.6rem; }
.subsection ul:not(.step-list) li, .usage-list li { position:relative; padding-left:1.4rem; color:var(--text-2); }
.subsection ul:not(.step-list) li::before, .usage-list li::before { content:""; position:absolute; left:.2rem; top:.7em; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.subsection .callout { margin-top:1.2rem; }

/* ---------- Mapping diagram ---------- */
.map-diagram { display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(12px,3vw,32px); align-items:stretch; padding:clamp(18px,3vw,30px); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); }
.map-tracks, .map-screens { display:grid; gap:6px; }
.map-screens { direction:ltr; display:flex; flex-direction:column-reverse; gap:6px; }
.map-tracks li, .map-screens li { flex:1; }
.map-tracks li span, .map-screens li span { display:flex; align-items:center; height:100%; min-height:34px; padding:0 .9rem; border-radius:9px; font:500 .95rem var(--f-mono); }
.map-tracks li span { background:var(--teal-soft); color:var(--teal); border:1px solid color-mix(in srgb, var(--teal) 40%, transparent); }
.map-screens li span { justify-content:flex-end; background:var(--accent-soft); color:var(--accent-text); border:1px solid var(--accent-line); }
.map-screens li span::before { content:"Screen "; margin-right:.35em; font-family:var(--f-body); font-weight:400; opacity:.85; }
.map-eq { align-self:center; font:800 clamp(2rem,5vw,3.4rem)/1 var(--f-display); color:var(--text-3); }
.map-caption { color:var(--text-2); }

/* ---------- Tables and tabs ---------- */
.spec-table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); }
.panel .spec-table-wrap { background:transparent; }
.spec-table { width:100%; border-collapse:collapse; font-size:.97rem; }
.spec-table th { text-align:left; padding:.7rem 1rem; font:700 .86rem var(--f-body); color:var(--text-2); background:var(--surface-2); border-bottom:1px solid var(--line); white-space:nowrap; }
.spec-table td { padding:.7rem 1rem; border-bottom:1px solid var(--line); vertical-align:top; color:var(--text-2); }
.spec-table tr:last-child td { border-bottom:0; }
.spec-table td:first-child { color:var(--text); font-weight:700; }
.spec-table:not(.spec-table--text) td:first-child { min-width:11rem; }
.spec-table:not(.spec-table--text) td:last-child { white-space:nowrap; font-family:var(--f-mono); font-size:.88rem; color:var(--text); }
.tab-switch { display:flex; flex-wrap:wrap; gap:8px; }
.btn-chip { display:inline-flex; align-items:center; gap:.55rem; min-height:44px; padding:.45rem 1rem .45rem .55rem; border-radius:999px; border:1.5px solid var(--line-strong); background:transparent; color:var(--text-2); font:700 .95rem var(--f-body); cursor:pointer; transition:background .15s, color .15s, border-color .15s; }
.btn-chip:hover { color:var(--text); border-color:var(--text-3); }
.btn-chip.is-active { background:var(--text); border-color:var(--text); color:var(--bg); }
.chip-icon { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--surface-3); color:var(--text); font:500 .8rem var(--f-mono); }
.btn-chip.is-active .chip-icon { background:var(--accent); color:var(--accent-ink); }
.tab-panel { display:none; padding:0; border:0; background:transparent !important; }
.tab-panel.is-active { display:block; }

/* ---------- Damped harmonic section ---------- */
.damped-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(18px,3vw,32px); align-items:stretch; margin-bottom:clamp(18px,3vw,32px); }
.damped-figure { margin:0; border-radius:var(--r-lg); overflow:hidden; background:#272930; display:flex; flex-direction:column; }
.damped-figure img { width:100%; height:auto; }
.damped-figure figcaption { padding:.9rem 1.2rem; color:#c9ccd6; font-size:.93rem; border-top:1px solid rgba(255,255,255,.08); }
.damped-figure figcaption strong { color:#fff; margin-right:.5rem; }
.eq-card { display:flex; flex-direction:column; justify-content:center; gap:1rem; }
.eq { font-size:clamp(1.5rem,3vw,2.1rem); color:var(--text); padding:.5rem 0; }
.eq-plain { align-self:flex-start; font-size:.9rem; }
.param-list { display:grid; gap:.7rem; margin:.4rem 0 0; }
.param-list div { display:grid; grid-template-columns:2rem 1fr; gap:.6rem; align-items:baseline; }
.param-list dt { font:italic 700 1.25rem var(--f-display); color:var(--accent-text); }
.param-list dd { margin:0; color:var(--text-2); font-size:.97rem; line-height:1.5; }
.param-list dd strong { color:var(--text); }
.how-panel, .dh-plot { margin-bottom:clamp(18px,3vw,32px); }
.dh-layout { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:clamp(18px,3vw,36px); align-items:center; }
.dh-svg { width:100%; height:auto; overflow:visible; }
.dh-grid line { stroke:var(--line); }
.dh-grid text, .dh-lbl { fill:var(--text-3); font:500 11px var(--f-mono); }
.dh-one { stroke:var(--teal); stroke-width:1.25; stroke-dasharray:5 5; }
.dh-edge { stroke:var(--line-strong); stroke-dasharray:3 4; }
.dh-curve { stroke:var(--accent); stroke-width:2.75; stroke-linejoin:round; stroke-linecap:round; }
.dh-controls { display:grid; gap:1rem; }
.dh-field { display:grid; gap:.3rem; }
.dh-field-top { display:flex; justify-content:space-between; font-size:.93rem; font-weight:700; color:var(--text-2); }
.dh-field-top output { font:500 .9rem var(--f-mono); color:var(--text); }
.dh-field input { width:100%; accent-color:var(--accent); height:28px; }
.dh-readout { font-size:.93rem; color:var(--text-2); padding-top:.8rem; border-top:1px solid var(--line); }
.dh-readout strong { color:var(--text); font-family:var(--f-mono); font-weight:500; }
.timing { margin-bottom:clamp(28px,4vw,48px); }
.stat-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.stat { padding:1rem 1.1rem; border:1px solid var(--line); border-radius:var(--r-md); background:var(--bg); }
.stat b { display:block; font:800 1.7rem/1.1 var(--f-display); letter-spacing:-.02em; }
.stat span { color:var(--text-2); font-size:.93rem; }
.dh-tagline { display:flex; flex-wrap:wrap; gap:.2em .6em; font:800 clamp(1.5rem,3.4vw,2.5rem)/1.15 var(--f-display); letter-spacing:-.025em; padding-top:clamp(20px,3vw,32px); border-top:1px solid var(--line); }

/* ---------- FAQ ---------- */
.faq { border-top:1px solid var(--line); }
.faq-item { border-bottom:1px solid var(--line); }
.faq-q { width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.2rem; padding:1.15rem 0; background:none; border:0; text-align:left; color:var(--text); font:700 1.08rem/1.35 var(--f-display); cursor:pointer; }
.faq-q:hover { color:var(--accent-text); }
.faq-icon { flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; border:1.5px solid var(--line-strong); font:400 1.2rem/1 var(--f-body); transition:transform .3s var(--spring), background .2s, color .2s; }
.faq-item.is-open .faq-icon { transform:rotate(45deg); background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.faq-a { display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
.faq-a > p { overflow:hidden; min-height:0; color:var(--text-2); max-width:62ch; }
.faq-item.is-open .faq-a { grid-template-rows:1fr; }
.faq-item.is-open .faq-a > p { padding-bottom:1.2rem; }

/* ---------- Download banner ---------- */
.block--cta, .block--cta:nth-of-type(even) { background:var(--bg); }
.cta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px 40px; padding:clamp(28px,5vw,56px); border-radius:calc(var(--r-lg) + 6px); background:#181d26; color:#fff; }
:root[data-theme="dark"] .cta { background:var(--surface-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cta { background:var(--surface-2); } }
.cta h2 { color:#fff; font-size:clamp(1.7rem,3.2vw,2.5rem); line-height:1.1; font-weight:800; max-width:20ch; }
.cta .lede { color:#c4cad6; margin-top:.8rem; }
.cta-actions { display:flex; flex-wrap:wrap; gap:10px; }
.cta .btn-primary { background:#fff; color:#181d26; }
.cta .btn-primary:hover { background:#ffe3cc; color:#181d26; }
.cta .btn-ghost { color:#fff; border-color:rgba(255,255,255,.4); }
.cta .btn-ghost:hover { background:rgba(255,255,255,.1); border-color:#fff; color:#fff; }

/* ---------- Footer ---------- */
.site-footer { border-top:1px solid var(--line); padding-block:clamp(40px,6vw,72px) 28px; background:var(--surface); }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; }
.footer-name { display:flex; align-items:center; gap:10px; font:700 1.05rem var(--f-display); }
.footer-name svg { width:26px; height:26px; }
.footer-tagline { display:flex; align-items:center; gap:10px; margin-top:.8rem; color:var(--text-2); max-width:34ch; }
.footer-tagline img { flex:none; }
.footer-title { font:700 .98rem var(--f-body); letter-spacing:0; margin-bottom:.8rem; color:var(--text); }
.site-footer ul { display:grid; gap:.45rem; }
.site-footer li a { color:var(--text-2); text-decoration:none; }
.site-footer li a:hover { color:var(--accent-text); text-decoration:underline; }
.footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; margin-top:40px; padding-top:20px; border-top:1px solid var(--line); color:var(--text-3); font-size:.92rem; }
.footer-bottom a { color:var(--text-2); }

/* ---------- Utilities ---------- */
.to-top { position:fixed; right:clamp(14px,2.4vw,28px); bottom:clamp(14px,2.4vw,28px); z-index:90; width:46px; height:46px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line-strong); background:var(--surface); color:var(--text); box-shadow:var(--shadow); cursor:pointer; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .25s, transform .25s, visibility .25s; }
.to-top svg { width:20px; height:20px; transform:rotate(90deg); }
.to-top.is-shown { opacity:1; visibility:visible; transform:none; }
#ays_tooltip { display:none; position:fixed; inset:0; z-index:99999; align-items:center; justify-content:center; pointer-events:none; opacity:0; transform:scale(.96); transition:opacity .25s ease, transform .25s ease; }
#ays_tooltip.is-visible { opacity:1; transform:scale(1); }
#ays_tooltip_block { max-width:min(90vw,500px); padding:18px 28px; border-radius:14px; background:rgba(20,20,20,.96); color:#fff; font-size:.95rem; box-shadow:0 10px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08); }
#ays_tooltip_block p { text-align:center; }

/* ---------- Responsive ---------- */
@media (max-width:1080px) {
  .viewer-main { grid-template-columns:1fr; }
  .pool { border-left:0; border-top:1px solid var(--line); grid-template-columns:1fr 1fr; }
  .pool-list--vertical { grid-template-columns:repeat(4,1fr); }
  .pool-list--horizontal { grid-template-columns:repeat(2,1fr); }
  .nav-links a { padding:.45rem .6rem; font-size:.9rem; }
  .brand span { max-width:12ch; white-space:normal; font-size:.88rem; }
}
@media (max-width:960px) {
  .nav-toggle { display:inline-flex; align-items:center; }
  .nav-cta { display:none; }
  .nav-links { position:absolute; left:0; right:0; top:100%; margin:0; padding:10px var(--pad-x) 18px; flex-direction:column; align-items:stretch; gap:2px; background:var(--surface); border-bottom:1px solid var(--line); box-shadow:var(--shadow-lg); display:none; }
  .nav-links.is-open { display:flex; }
  .nav-links a { padding:.8rem .9rem; font-size:1rem; border-radius:var(--r-sm); }
  .nav-menu-cta { display:block !important; margin-top:8px; text-align:center; background:var(--accent); color:var(--accent-ink) !important; }
  .nav-menu-cta:hover { background:var(--accent-hover) !important; }
  .brand span { max-width:none; white-space:nowrap; }
  .nav-actions { margin-left:auto; }
  .hero-grid { grid-template-columns:1fr; }
  .hero h1 { max-width:16ch; }
  .split { grid-template-columns:minmax(0,1fr); }
  .split > .block-head { position:static; margin-bottom:0; }
  .feature-layout { grid-template-columns:1fr; }
  .walkthrough { position:static; max-width:300px; margin-inline:auto; }
  .damped-grid, .dh-layout { grid-template-columns:1fr; }
  .stat-row { grid-template-columns:repeat(2,1fr); }
  .spec-table:not(.spec-table--text) { min-width:560px; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1/-1; }
}
@media (max-width:640px) {
  body { font-size:1rem; }
  .brand span { font-size:.85rem; white-space:normal; max-width:13ch; }
  .facts { grid-template-columns:1fr 1fr; }
  .feature-list { grid-template-columns:1fr; }
  .group-list li { grid-template-columns:1.6rem 1fr; }
  .group-list span { grid-column:2; }
  .pool { grid-template-columns:1fr; }
  .stage { --stage-h:min(116vw,480px); padding:14px; }
  .viewer-actions { width:100%; }
  .viewer-actions .btn { flex:1; }
  .map-diagram { gap:10px; }
  .cta-actions .btn { flex:1 1 100%; }
  .footer-grid { grid-template-columns:1fr; }
  .step-item { gap:14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
}
@media print {
  .top-nav, .to-top, .viewer, .walkthrough, .cta-actions, #ays_tooltip { display:none !important; }
  body { background:#fff; color:#000; }
  .block { padding-block:24px; border:0; background:#fff !important; break-inside:avoid-page; }
}