/* ============================================================
   1LineArt Viral Grid Effect: website design system (v3)
   Script by: Gamal Nabih | 1LineArt Studio | https://1lineart.com

   Elastic layout principles (as the effect itself works):
   - sizes, type and spacing are fluid (clamp), never fixed to a device
   - grids reflow with auto-fit / minmax, so cells keep their proportions
   - only a few breakpoints change structure (nav, two-column splits)
   Sections: 1 tokens, 2 base, 3 layout, 4 components, 5 sections, 6 utilities
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  color-scheme: light dark;
  --brand-teal:#49c7b8; --brand-yellow:#ffcc4d; --brand-magenta:#ba006e; --brand-navy:#005273; --brand-ink:#0b1f2a;

  --bg:#f6f7f4; --surface:#ffffff; --surface-2:#eef2ef; --surface-3:#e1e8e5;
  --line:rgba(11,31,42,.11); --line-strong:rgba(11,31,42,.26);
  --text:#0b1f2a; --text-2:#34505e; --text-3:#52707d;
  --accent:#b0006a; --accent-hover:#8c0054; --accent-ink:#ffffff; --accent-text:#a30063;
  --accent-soft:rgba(176,0,106,.08); --accent-line:rgba(176,0,106,.38);
  --teal:#0b7a6e; --teal-soft:rgba(11,122,110,.10);
  --focus:#005273;
  --nav-bg:rgba(246,247,244,.82);
  --stage:#0b2a38;
  --face-a:#49c7b8; --face-b:#ffcc4d; --face-ink:#0b1f2a;
  --shadow:0 1px 2px rgba(11,31,42,.06),0 14px 34px -18px rgba(11,31,42,.28);
  --shadow-lg:0 2px 4px rgba(11,31,42,.06),0 30px 60px -28px rgba(11,31,42,.42);

  --r-xl:32px; --r-lg:22px; --r-md:14px; --r-sm:9px;
  --wrap:1200px; --pad-x:clamp(18px,4.5vw,44px);
  --section:clamp(60px,8.5vw,112px);
  --gap:clamp(16px,2.6vw,30px);
  --nav-h:68px;
  --f-display:'Bricolage Grotesque','Avenir Next','Segoe UI Variable Display','Segoe UI',system-ui,-apple-system,sans-serif;
  --f-body:'Atkinson Hyperlegible','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --fs-h1:clamp(2.4rem,5.2vw + .4rem,4.6rem);
  --fs-h2:clamp(1.8rem,3vw + .5rem,2.85rem);
  --fs-h3:clamp(1.06rem,.45vw + 1rem,1.22rem);
  --fs-lede:clamp(1.04rem,.5vw + .94rem,1.2rem);
  --spring:cubic-bezier(.34,1.56,.64,1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring:linear(0,0,.009,.117,.281,.483,.699,.907,1.084,1.214,1.289,1.307,1.273,1.2,1.103,1,.908,.84,.805,.805,.838,.894,.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:#08171f; --surface:#0e2530; --surface-2:#14313f; --surface-3:#1c3f50;
    --line:rgba(226,240,242,.11); --line-strong:rgba(226,240,242,.26);
    --text:#eaf3f4; --text-2:#b6cacf; --text-3:#8fa9b1;
    --accent:#ffcc4d; --accent-hover:#ffd873; --accent-ink:#0b1f2a; --accent-text:#ffd466;
    --accent-soft:rgba(255,204,77,.12); --accent-line:rgba(255,204,77,.45);
    --teal:#49c7b8; --teal-soft:rgba(73,199,184,.13);
    --focus:#ffcc4d; --nav-bg:rgba(8,23,31,.8); --stage:#061218;
    --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 30px 60px -28px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#08171f; --surface:#0e2530; --surface-2:#14313f; --surface-3:#1c3f50;
  --line:rgba(226,240,242,.11); --line-strong:rgba(226,240,242,.26);
  --text:#eaf3f4; --text-2:#b6cacf; --text-3:#8fa9b1;
  --accent:#ffcc4d; --accent-hover:#ffd873; --accent-ink:#0b1f2a; --accent-text:#ffd466;
  --accent-soft:rgba(255,204,77,.12); --accent-line:rgba(255,204,77,.45);
  --teal:#49c7b8; --teal-soft:rgba(73,199,184,.13);
  --focus:#ffcc4d; --nav-bg:rgba(8,23,31,.8); --stage:#061218;
  --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 30px 60px -28px rgba(0,0,0,.85);
}
:root[data-theme="light"] { color-scheme: light; }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--text); font:400 1.0625rem/1.65 var(--f-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; }
img, svg, canvas { max-width:100%; display:block; }
h1,h2,h3,h4 { font-family:var(--f-display); color:var(--text); margin:0; letter-spacing:-.02em; text-wrap:balance; }
h3 { font-size:var(--fs-h3); line-height:1.25; }
p { margin:0; text-wrap:pretty; }
ul, ol { margin:0; padding:0; list-style:none; }
a { color:var(--accent-text); text-underline-offset:3px; text-decoration-thickness:1.5px; }
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 .4em; overflow-wrap:anywhere; }
strong { font-weight:700; }
:focus-visible { outline:3px solid var(--focus); outline-offset:3px; border-radius:6px; }
::selection { background:var(--brand-yellow); color:var(--brand-ink); }
[hidden] { display:none !important; }

/* Decorative graph paper (grid/graph-paper.svg): a fixed, very faint layer behind everything.
   It never takes pointer events and fades toward the edges so it cannot compete with content. */
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:url('graph-paper.svg') 0 0/400px 400px repeat; opacity:.07;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 35%,#000 30%,transparent 100%); mask-image:radial-gradient(ellipse 90% 80% at 50% 35%,#000 30%,transparent 100%); }
:root[data-theme="dark"] body::before { opacity:.09; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::before { opacity:.09; } }

/* ---------- 3. Layout ---------- */
.wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad-x); }
.skip-link { position:fixed; left:12px; top:-120px; z-index:200; background:var(--accent); color:var(--accent-ink); padding:.65rem 1.1rem; border-radius:var(--r-sm); font-weight:700; text-decoration:none; transition:top .2s; }
.skip-link:focus { top:12px; }
.block { padding-block:var(--section); scroll-margin-top:var(--nav-h); border-top:1px solid var(--line); }
.block:nth-of-type(even) { background:color-mix(in srgb,var(--surface) 84%,transparent); }
.block-head { margin-bottom:clamp(26px,4vw,48px); max-width:68ch; }
.block-head h2 { font-size:var(--fs-h2); line-height:1.07; font-weight:800; letter-spacing:-.03em; }
.block-head h2::before { content:""; display:block; width:44px; height:6px; margin-bottom:1.1rem; border-radius:999px; background:linear-gradient(90deg,var(--brand-teal) 0 50%,var(--brand-yellow) 50% 100%); }
.lede { color:var(--text-2); font-size:var(--fs-lede); line-height:1.6; max-width:62ch; }
.block-head .lede { margin-top:1rem; }
.split { display:grid; grid-template-columns:minmax(0,320px) 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.65rem,2.3vw + .6rem,2.3rem); }
.stack { display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(28px,4vw,48px); min-width:0; }
.sub-title { font-size:1.3rem; font-weight:700; margin-bottom:1rem; }
.sub { scroll-margin-top:calc(var(--nav-h) + 16px); }
.auto-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr)); gap:var(--gap); }

/* ---------- 4. Components ---------- */
.top-nav { position:sticky; top:0; z-index:100; background:var(--nav-bg); -webkit-backdrop-filter:saturate(1.5) blur(16px); backdrop-filter:saturate(1.5) blur(16px); border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s; }
.top-nav.is-stuck { border-bottom-color:var(--line); box-shadow:0 8px 24px -18px rgba(11,31,42,.35); }
.nav-inner { display:flex; align-items:center; gap:clamp(12px,2vw,24px); height:var(--nav-h); }
.brand { display:flex; align-items:center; gap:.65rem; font:700 1rem/1.1 var(--f-display); color:var(--text); text-decoration:none; min-width:0; }
.brand:hover { color:var(--text); }
.logo { width:30px; height:30px; flex:none; padding:4px; border-radius:9px; background:var(--brand-yellow); color:var(--brand-ink); }
.brand span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-links { display:flex; align-items:center; gap:2px; margin-inline:auto; }
.nav-links a { padding:.5rem .8rem; border-radius:999px; color:var(--text-2); font-size:.94rem; 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; flex:none; }
.icon-btn { width:42px; height:42px; 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, background .15s; }
.icon-btn:hover { color:var(--text); border-color:var(--line-strong); background:var(--surface-2); }
.nav-toggle { display:none; height:42px; padding:0 1rem; 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:linear-gradient(90deg,var(--brand-teal),var(--brand-yellow)); transform-origin:0 50%; transform:scaleX(var(--p,0)); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; min-height:50px; padding:.7rem 1.4rem; border-radius:999px; border:1.5px solid transparent; font:700 1rem/1.2 var(--f-body); text-decoration:none; cursor:pointer; transition:background .18s, border-color .18s, color .18s, transform .18s; }
.btn svg { width:18px; height:18px; flex:none; }
.btn-sm { min-height:42px; padding:.45rem 1.05rem; font-size:.93rem; }
.btn-primary { background:var(--accent); color:var(--accent-ink); box-shadow:0 8px 20px -10px var(--accent); }
.btn-primary:hover { background:var(--accent-hover); color:var(--accent-ink); transform:translateY(-1px); }
.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; box-shadow:none; }
.btn:active:not(:disabled) { transform:translateY(1px); }
.btn-row { display:flex; flex-wrap:wrap; gap:12px; }
.text-link { font-weight:700; }

.chip { display:inline-flex; align-items:center; gap:.45rem; padding:.3rem .8rem; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--text-2); font:700 .85rem var(--f-body); }
.dot { width:8px; height:8px; border-radius:50%; background:var(--brand-teal); display:inline-block; }
.eyebrow { display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1.3rem; padding:.35rem .95rem; border:1px solid var(--line-strong); border-radius:999px; background:var(--surface); color:var(--text-2); font:700 .88rem var(--f-body); }

.callout { padding:1.05rem 1.3rem; 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; }
.callout + .callout { margin-top:1rem; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(18px,3vw,32px); box-shadow:var(--shadow); }
.block:nth-of-type(even) .panel { background:var(--bg); box-shadow:none; }
.panel-title { font-size:1.28rem; margin-bottom:1rem; }
.label { font:700 .78rem var(--f-body); letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); margin-bottom:.8rem; }

.seg { display:inline-flex; flex-wrap:wrap; padding:4px; gap:2px; background:var(--surface-2); border-radius:999px; }
.seg-btn { display:inline-flex; align-items:center; gap:.5rem; min-height:38px; padding:.4rem .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); }
.field { display:grid; gap:.35rem; min-width:0; }
.field > span, .field-top { font-size:.9rem; font-weight:700; color:var(--text-2); }
.field-top { display:flex; justify-content:space-between; gap:1rem; }
.field-top output { font:500 .9rem var(--f-mono); color:var(--text); }
select, input[type="search"] { width:100%; min-height:44px; padding:.5rem .9rem; border-radius:var(--r-sm); border:1px solid var(--line-strong); background:var(--surface); color:var(--text); font:400 1rem var(--f-body); }
select { appearance:auto; }
input[type="range"] { width:100%; accent-color:var(--accent); height:28px; cursor:pointer; }
.switch { display:inline-flex; align-items:center; gap:.7rem; cursor:pointer; font-size:.93rem; font-weight:700; color:var(--text-2); }
.switch input { position:absolute; opacity:0; pointer-events:none; }
.switch-ui { position:relative; width:44px; height:26px; flex:none; border-radius:999px; background:var(--surface-3); border:1px solid var(--line-strong); transition:background .2s, border-color .2s; }
.switch-ui::after { content:""; position:absolute; top:3px; left:3px; 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(--focus); outline-offset:3px; }

/* ---------- 5. Sections ---------- */
/* Hero */
.hero { position:relative; padding-block:clamp(36px,6vw,88px) clamp(52px,8vw,104px); overflow:clip; }
.hero::before { content:""; position:absolute; inset:0 0 auto 0; height:70%; z-index:-1; background:radial-gradient(60% 70% at 85% 10%, color-mix(in srgb,var(--brand-teal) 22%,transparent), transparent 70%), radial-gradient(45% 55% at 5% 0%, color-mix(in srgb,var(--brand-yellow) 22%,transparent), transparent 70%); }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(30px,5vw,76px); align-items:center; }
.hero h1 { font-size:var(--fs-h1); line-height:1.01; font-weight:800; letter-spacing:-.04em; max-width:14ch; }
.hero .lede { margin-top:1.4rem; max-width:52ch; }
.hero .btn-row { margin-top:2rem; }
.facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr)); gap:10px; margin:2.4rem 0 0; }
.facts div { padding:.85rem 1rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); }
.facts dt { font-size:.78rem; color:var(--text-3); font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.facts dd { margin:.15rem 0 0; font-weight:700; line-height:1.35; }
.hero-stage { margin:0; justify-self:center; width:100%; max-width:520px; }
.hero-art-frame { aspect-ratio:1; display:grid; place-items:center; padding:clamp(18px,4vw,40px); border-radius:var(--r-xl); background:var(--stage); box-shadow:var(--shadow-lg); border:1px solid var(--line-strong); }
.hero-art-frame img { width:100%; height:auto; }
.hero-stage figcaption { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }

/* Live demo */
.demo { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,340px); gap:var(--gap); align-items:stretch; }
.demo-stage { display:grid; place-items:center; padding:clamp(14px,2.4vw,28px); border-radius:var(--r-xl); background:var(--stage); min-height:clamp(300px,42vw,520px); box-shadow:var(--shadow-lg); border:1px solid var(--line-strong); }
.demo-canvas-wrap { width:100%; display:grid; place-items:center; }
.demo-canvas { width:100%; height:auto; border-radius:var(--r-md); background:transparent; }
.demo-canvas-wrap[data-aspect="9:16"] .demo-canvas { max-width:min(100%,calc((min(60vh,460px)) * 9 / 16)); }
.demo-controls { display:grid; gap:1.1rem; }
.demo-readout { font-size:.93rem; color:var(--text-2); padding-top:.9rem; border-top:1px solid var(--line); }
.demo-readout strong { font-family:var(--f-mono); font-weight:500; color:var(--text); }
.demo-play { display:flex; gap:10px; flex-wrap:wrap; }
.demo-scrub { width:100%; }

/* Steps, paths, tabs */
.step-list { display:grid; counter-reset:step; }
.step-item { counter-increment:step; display:grid; grid-template-columns:auto 1fr; gap:18px; padding-block:1.15rem; border-top:1px solid var(--line); }
.step-item:last-child { border-bottom:1px solid var(--line); }
.step-item::before { content:counter(step); width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:var(--accent-ink); font:700 .98rem var(--f-display); margin-top:.1rem; }
.step-body { min-width:0; color:var(--text-2); }
.step-body h3 { margin-bottom:.3rem; color:var(--text); }
.step-body strong { color:var(--text); }
.path-block { position:relative; margin-top:.6rem; padding:.6rem 5.4rem .6rem .95rem; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); font:400 .83rem/1.55 var(--f-mono); color:var(--text); overflow-wrap:anywhere; }
.os-label { display:block; font:700 .75rem var(--f-body); letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); margin-bottom:.1rem; }
.copy-btn { position:absolute; top:.55rem; right:.55rem; min-height:34px; padding:.2rem .85rem; 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); }
.bullets { display:grid; gap:.65rem; }
.bullets li { position:relative; padding-left:1.5rem; color:var(--text-2); }
.bullets li::before { content:""; position:absolute; left:.15rem; top:.62em; width:8px; height:8px; border-radius:2px; background:var(--brand-teal); transform:rotate(45deg); }
.bullets strong { color:var(--text); }
.tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:1.3rem; }
.tab { min-height:44px; padding:.45rem 1.1rem; 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; }
.tab:hover { color:var(--text); border-color:var(--text-3); }
.tab[aria-selected="true"] { background:var(--text); border-color:var(--text); color:var(--bg); }
.tab-panel[hidden] { display:none; }

/* Directions, tables */
.dir-card { display:grid; gap:.5rem; align-content:start; padding:1.1rem 1.2rem; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-md); }
.block:nth-of-type(odd) .dir-card { background:var(--surface); }
.dir-card h3 { font-size:1.05rem; }
.dir-card p { color:var(--text-2); font-size:.95rem; line-height:1.55; }
.dir-card .num { font:500 .78rem var(--f-mono); color:var(--text-3); }
.dir-card .btn { justify-self:start; margin-top:.3rem; }
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); -webkit-overflow-scrolling:touch; }
.block:nth-of-type(odd) .table-wrap { background:var(--bg); }
.spec { width:100%; border-collapse:collapse; font-size:.96rem; min-width:34rem; }
.spec th { text-align:left; padding:.7rem 1rem; font:700 .82rem var(--f-body); letter-spacing:.05em; text-transform:uppercase; color:var(--text-3); background:var(--surface-2); border-bottom:1px solid var(--line); white-space:nowrap; }
.spec td { padding:.75rem 1rem; border-bottom:1px solid var(--line); vertical-align:top; color:var(--text-2); }
.spec tr:last-child td { border-bottom:0; }
.spec td:first-child { color:var(--text); font-weight:700; white-space:nowrap; }

/* Motion */
.motion-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr)); gap:var(--gap); align-items:stretch; margin-bottom:var(--gap); }
.eq-card { display:flex; flex-direction:column; justify-content:center; gap:1rem; }
.eq { font-size:clamp(1.4rem,2.4vw + .6rem,2.1rem); color:var(--text); padding:.4rem 0; overflow-x:auto; max-width:100%; }
.eq-plain { align-self:flex-start; max-width:100%; }
.map-list { display:grid; gap:.7rem; margin:0; }
.map-list div { display:grid; grid-template-columns:minmax(5.5rem,7rem) 1fr; gap:.6rem; align-items:baseline; }
.map-list dt { font:700 .95rem var(--f-display); color:var(--accent-text); }
.map-list dd { margin:0; color:var(--text-2); font-size:.96rem; line-height:1.5; }
.plot-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,290px); gap:clamp(18px,3vw,40px); align-items:center; }
.plot-svg { width:100%; height:auto; overflow:visible; }
.plot-grid line { stroke:var(--line); }
.plot-grid text, .plot-lbl { fill:var(--text-3); font:500 11px var(--f-mono); }
.plot-one { stroke:var(--teal); stroke-width:1.25; stroke-dasharray:5 5; }
.plot-curve { stroke:var(--accent); stroke-width:3; stroke-linejoin:round; stroke-linecap:round; fill:none; }
.plot-controls { display:grid; gap:1rem; }
.plot-readout { font-size:.93rem; color:var(--text-2); padding-top:.85rem; border-top:1px solid var(--line); }
.plot-readout strong { color:var(--text); font-family:var(--f-mono); font-weight:500; }
.tagline { display:flex; flex-wrap:wrap; gap:.15em .6em; font:800 clamp(1.5rem,3vw + .6rem,2.5rem)/1.15 var(--f-display); letter-spacing:-.03em; padding-top:clamp(20px,3vw,32px); border-top:1px solid var(--line); }
.tagline strong:nth-child(1) { color:var(--accent-text); }
.tagline strong:nth-child(2) { color:var(--teal); }

/* 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; min-height:56px; padding:1.1rem 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:32px; height:32px; display:grid; place-items:center; border-radius:50%; border:1.5px solid var(--line-strong); font:400 1.25rem/1 var(--f-body); transition:transform .3s var(--spring), background .2s, color .2s, border-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; visibility:hidden; transition:grid-template-rows .3s ease, visibility 0s .3s; }
.faq-a > p { overflow:hidden; min-height:0; color:var(--text-2); max-width:64ch; }
.faq-item.is-open .faq-a { grid-template-rows:1fr; visibility:visible; transition:grid-template-rows .3s ease, visibility 0s; }
.faq-item.is-open .faq-a > p { padding-bottom:1.3rem; }

/* CTA + footer */
.block--cta, .block--cta:nth-of-type(even) { background:var(--bg); }
.cta { position:relative; overflow:hidden; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px 40px; padding:clamp(28px,5vw,60px); border-radius:var(--r-xl); background:var(--brand-ink); color:#fff; isolation:isolate; }
.cta::before { content:""; position:absolute; z-index:-1; right:-60px; top:-60px; width:clamp(200px,34vw,380px); aspect-ratio:1; background:conic-gradient(var(--brand-teal) 0 25%, var(--brand-yellow) 0 50%, var(--brand-teal) 0 75%, var(--brand-yellow) 0) 0 0/50% 50%; opacity:.16; border-radius:var(--r-xl); transform:rotate(12deg); }
: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,2.6vw + .7rem,2.55rem); line-height:1.1; font-weight:800; max-width:20ch; }
.cta .lede { color:#c6d5da; margin-top:.8rem; }
.cta .btn-primary { background:var(--brand-yellow); color:var(--brand-ink); box-shadow:none; }
.cta .btn-primary:hover { background:#ffd873; color:var(--brand-ink); }
.cta .btn-ghost { color:#fff; border-color:rgba(255,255,255,.45); }
.cta .btn-ghost:hover { background:rgba(255,255,255,.1); border-color:#fff; color:#fff; }
.site-footer { border-top:1px solid var(--line); padding-block:clamp(44px,6vw,76px) 28px; background:color-mix(in srgb,var(--surface) 92%,transparent); }
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr)); gap:clamp(28px,4vw,48px); }
.footer-brand { grid-column:span 2; }
.footer-name { display:flex; align-items:center; gap:.65rem; font:700 1.1rem var(--f-display); }
.footer-tagline { margin-top:.9rem; color:var(--text-2); max-width:42ch; }
.footer-cta { display:flex; flex-wrap:wrap; gap:10px; margin-top:1.3rem; }
.footer-title { font:700 .8rem var(--f-body); letter-spacing:.1em; text-transform:uppercase; margin-bottom:.9rem; color:var(--text-3); }
.site-footer ul { display:grid; gap:.5rem; }
.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:44px; padding-top:20px; border-top:1px solid var(--line); color:var(--text-3); font-size:.92rem; }
.footer-bottom a { color:var(--text-2); }

/* ---------- 6. Utilities and responsive ---------- */
.to-top { position:fixed; right:clamp(14px,2.4vw,28px); bottom:clamp(14px,2.4vw,28px); z-index:90; width:48px; height:48px; 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(11,31,42,.96); color:#fff; font-size:.95rem; box-shadow:0 10px 30px rgba(0,0,0,.35); }
#ays_tooltip_block p { text-align:center; }

@media (max-width:1080px) { .nav-links a { padding:.5rem .6rem; font-size:.9rem; } .demo { grid-template-columns:minmax(0,1fr); } }
@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) 20px; 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:.85rem .95rem; 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-actions { margin-left:auto; }
  .hero-grid, .split, .plot-layout { grid-template-columns:minmax(0,1fr); }
  .hero h1 { max-width:16ch; }
  .hero-stage { max-width:440px; }
  .split > .block-head { position:static; margin-bottom:0; }
  .footer-brand { grid-column:1/-1; }
}
@media (max-width:640px) {
  body { font-size:1rem; }
  .brand span { font-size:.9rem; max-width:15ch; white-space:normal; line-height:1.15; }
  .btn-row .btn, .footer-cta .btn { flex:1 1 100%; }
  .step-item { gap:14px; }
  .path-block { padding-right:.95rem; padding-bottom:3rem; }
  .copy-btn { top:auto; bottom:.55rem; }
  .map-list div { grid-template-columns:1fr; gap:.1rem; }
  .footer-brand { grid-column:auto; }
}
@media (max-width:380px) { .brand span { display:none; } }
@media (max-height:520px) and (orientation:landscape) { .demo-stage { min-height:0; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *, *::before, *::after { animation:none !important; transition:none !important; } }
@media (forced-colors: active) { .btn-primary, .seg-btn.is-active, .tab[aria-selected="true"] { border:2px solid ButtonText; } }
@media print {
  .top-nav, .to-top, .demo, #ays_tooltip { display:none !important; }
  body { background:#fff; color:#000; }
  body::before { display:none; }
  .block { padding-block:24px; border:0; background:#fff !important; break-inside:avoid-page; }
  .faq-a { visibility:visible; grid-template-rows:1fr; }
}