/* Launch: one page, fixed layout, no photographs. Every visual is drawn in code.
   The ground, text and four accents live at the top of :root. */

:root{
  /* ---- colours: ground, four accents, text ---- */
  --bg:    #0C0E13;   /* ground */
  --c1:    #5B8CFF;   /* accent one   (hero glyph 1, plans)  cornflower */
  --c2:    #FF6B9D;   /* accent two   (glyph 2, lanes)       rose */
  --c3:    #B5E853;   /* accent three (glyph 3, wall)        lime */
  --c4:    #FFB84D;   /* accent four  (glyph 4, run)         amber */
  --text:  #FFFFFF;
  /* ---- tints: each accent about 40% toward white ---- */
  --c1-2:#A9C2FF; --c2-2:#FFB4CB; --c3-2:#DCF5A6; --c4-2:#FFD99A;
  --accent:var(--c1); --accent-2:var(--c1-2);
  --panel: color-mix(in srgb, var(--bg) 92%, #fff 8%);
  --panel2:color-mix(in srgb, var(--bg) 86%, #fff 14%);
  --line:  rgba(255,255,255,.08);
  --line2: rgba(255,255,255,.16);
  --mute:  rgba(255,255,255,.64);
  --dim:   rgba(255,255,255,.42);
  --font:  "Manrope", "Segoe UI", system-ui, sans-serif;
  --mono:  "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --wrap:1180px; --pad:clamp(18px,4vw,48px); --sec:clamp(84px,12vh,150px);
  --ease:cubic-bezier(.2,.7,.15,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--bg); }
body{ font-family:var(--font); font-size:16px; line-height:1.55; color:var(--text); background:var(--bg); overflow-x:hidden; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
svg{ display:block; }
.wrap{ width:min(var(--wrap), 100% - var(--pad)*2); margin-inline:auto; }
.wrap.narrow{ max-width:820px; }
.wrap.center{ text-align:center; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.skip{ position:absolute; left:-999px; top:8px; background:#fff; color:#000; padding:8px 12px; z-index:200; }
.skip:focus{ left:8px; }

/* ---- type ---- */
.h2{ font-weight:700; font-size:clamp(32px,4.4vw,58px); line-height:1.04; letter-spacing:-.025em; margin-top:18px; }
.lede{ margin-top:22px; font-size:clamp(16px,1.25vw,19px); color:var(--mute); max-width:56ch; font-weight:500; }
.mono{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.mono.c1{ color:var(--c1); }
.tag{
  display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:99px;
  background:var(--panel2); font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute);
}
.tag i{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); }
.sec{ padding-block:var(--sec); position:relative; }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.counter b{ color:var(--text); font-weight:500; }

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:13px 24px; border-radius:99px;
  font-weight:700; font-size:14.5px; letter-spacing:-.005em; transition:transform .35s var(--ease), background .3s, color .3s, border-color .3s;
}
.btn:hover{ transform:translateY(-2px); }
.btn.solid{ background:var(--accent); color:#0B0C0F; }
.btn.solid:hover{ background:var(--accent-2); }
.btn.ghost{ border:1px solid var(--line2); color:var(--text); }
.btn.ghost:hover{ border-color:var(--accent); color:var(--accent); }
.hero-btns{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }

/* ---- loader ---- */
.loader{
  position:fixed; inset:0; z-index:100; background:var(--bg); display:grid; place-items:center; align-content:center; gap:22px;
  transition:transform .8s var(--ease), opacity .8s var(--ease);
}
.loader.out{ transform:translateY(-100%); opacity:0; pointer-events:none; }
.loader-pill{ width:82px; height:190px; border-radius:99px; background:var(--panel2); overflow:hidden; position:relative; }
.loader-pill i{
  position:absolute; left:0; right:0; bottom:0; height:calc(var(--p, 0) * 1%); border-radius:99px;
  background:linear-gradient(180deg, var(--accent-2), var(--accent)); transition:height .08s linear;
}
.loader-num{ display:flex; align-items:baseline; gap:12px; }
.loader-num b{ font-size:34px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.loader-num span{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }

/* ---- progress ---- */
.progress{ position:fixed; left:0; top:0; height:3px; width:100%; z-index:90; background:var(--accent); transform-origin:0 0; transform:scaleX(var(--sp, 0)); transition:background .5s; }

/* ---- header ---- */
.top{
  position:fixed; top:14px; left:50%; translate:-50% 0; z-index:80; width:min(var(--wrap), 100% - var(--pad)*2);
  display:flex; align-items:center; justify-content:space-between; gap:20px; padding:10px 12px 10px 18px; border-radius:99px;
  background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(18px) saturate(1.1); -webkit-backdrop-filter:blur(18px) saturate(1.1); border:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:17px; letter-spacing:-.02em; }
.brand svg{ width:26px; height:26px; }
.nav{ display:flex; gap:clamp(14px,2.2vw,30px); }
.nav a{ font-size:13.5px; font-weight:600; color:var(--mute); transition:color .3s; }
.nav a:hover{ color:var(--text); }
.pill{ padding:10px 18px; border-radius:99px; background:var(--accent); color:#0B0C0F; font-weight:700; font-size:13.5px; transition:background .4s; }
.pill:hover{ background:var(--accent-2); }

/* ---- hero ---- */
.hero{ position:relative; min-height:min(100svh, 940px); overflow:hidden; isolation:isolate; }
.glyphs{
  position:absolute; top:0; bottom:0; left:50%; translate:-50% 0; width:min(100%, 1560px); z-index:1;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2.4vw,40px);
  padding:clamp(70px,9vh,110px) var(--pad) 120px;
}
.glyph{ width:100%; height:100%; overflow:visible; fill:transparent; stroke-width:1.5; opacity:.9; transition:fill .8s var(--ease), stroke .8s; }
.glyph path,.glyph rect{ vector-effect:non-scaling-stroke; }
.g1{ stroke:var(--c1); } .g2{ stroke:var(--c2); } .g3{ stroke:var(--c3); } .g4{ stroke:var(--c4); }
.g1.on{ fill:var(--c1); } .g2.on{ fill:var(--c2); } .g3.on{ fill:var(--c3); } .g4.on{ fill:var(--c4); }
.stage{ position:absolute; inset:0; z-index:2; display:grid; place-items:center; pointer-events:none; }
.glow{ position:absolute; width:clamp(300px,42vw,640px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, var(--accent) 0%, transparent 62%); opacity:.22; filter:blur(20px); transition:background .8s; }
.dial{ width:clamp(260px,36vw,560px); aspect-ratio:1; }   /* a software-rendered torus, see ready.js */
.hero-lede{ position:absolute; left:50%; translate:-50% 0; bottom:96px; z-index:3; display:flex; justify-content:space-between; align-items:flex-end; gap:24px; }
.hero-lede p{ max-width:34ch; font-weight:600; font-size:clamp(15px,1.2vw,17px); text-shadow:0 2px 20px rgba(0,0,0,.6); }
.hero-lede .hero-btns{ margin:0; }
.hero-foot{
  position:absolute; left:50%; translate:-50% 0; bottom:26px; z-index:3; display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.scroll-rule{ display:inline-block; width:1px; height:14px; background:var(--dim); margin-right:12px; vertical-align:middle; }
.dots{ display:flex; gap:10px; }
.dots button{ width:8px; height:8px; border-radius:50%; background:var(--line2); transition:background .3s, transform .3s; }
.dots button[aria-selected="true"]{ background:var(--accent); transform:scale(1.35); }

/* ---- loops: one .set, cloned by ready.js until the track outruns the screen; slides by exactly one set ---- */
.loop{ display:flex; width:max-content; --gap:16px; gap:var(--gap); animation:loop var(--dur, 60s) linear infinite; }
.loop[data-dir="rev"]{ animation-direction:reverse; }
.loop .set{ display:flex; gap:var(--gap); flex:0 0 auto; }
@keyframes loop{ to{ transform:translateX(calc(-1 * var(--set, 50%))); } }
.marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:20px 0; overflow:hidden; background:var(--panel); }
.marquee-track{ --gap:28px; align-items:center; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); }
.marquee-track .set{ align-items:center; }
.marquee-track i{ width:6px; height:6px; border-radius:50%; background:var(--accent); }

/* ---- cards ---- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:clamp(36px,6vh,64px); }
.card{ position:relative; background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:26px 24px 28px; transition:border-color .4s, transform .5s var(--ease); }
.card:hover{ border-color:var(--line2); transform:translateY(-3px); }
.card .no{ position:absolute; right:20px; top:18px; font-family:var(--mono); font-size:11px; color:var(--dim); letter-spacing:.14em; }
.chip{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; margin-bottom:40px; }
.chip svg{ width:22px; height:22px; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.chip.c1{ background:color-mix(in srgb, var(--c1) 16%, transparent); } .chip.c1 svg{ stroke:var(--c1); }
.chip.c2{ background:color-mix(in srgb, var(--c2) 16%, transparent); } .chip.c2 svg{ stroke:var(--c2); }
.chip.c3{ background:color-mix(in srgb, var(--c3) 16%, transparent); } .chip.c3 svg{ stroke:var(--c3); }
.chip.c4{ background:color-mix(in srgb, var(--c4) 16%, transparent); } .chip.c4 svg{ stroke:var(--c4); }
.card h3{ font-size:19px; font-weight:700; letter-spacing:-.015em; }
.card p{ margin-top:10px; color:var(--mute); font-size:14.5px; }

/* ---- lanes ---- */
.lane-strip{
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:clamp(28px,5vh,48px) max(var(--pad), calc((100% - var(--wrap)) / 2)) 20px;   /* first card lines up with the content column */
  scroll-padding-inline:max(var(--pad), calc((100% - var(--wrap)) / 2));
  scrollbar-width:thin; scrollbar-color:var(--accent) transparent;
}
.lane-strip::-webkit-scrollbar{ height:3px; } .lane-strip::-webkit-scrollbar-thumb{ background:var(--accent); }
.lane{
  flex:0 0 clamp(280px, 26vw, 360px); scroll-snap-align:start; background:var(--panel); border:1px solid var(--line); border-radius:22px;
  padding:0 24px 26px; overflow:hidden; position:relative;
}
.lane-art{ position:relative; height:300px; margin:0 -24px 22px; display:grid; place-items:center; overflow:hidden; }
.lane-art::before{ content:""; position:absolute; inset:0; opacity:.16; }
.lane.c1 .lane-art::before{ background:repeating-radial-gradient(circle at 50% 50%, var(--c1) 0 2px, transparent 2px 26px); }
.lane.c2 .lane-art::before{ background:repeating-linear-gradient(135deg, var(--c2) 0 14px, transparent 14px 44px); }
.lane.c3 .lane-art::before{ background:radial-gradient(circle, var(--c3) 0 6px, transparent 7px) 0 0/34px 34px; }
.lane.c4 .lane-art::before{ background:conic-gradient(var(--c4) 25%, transparent 0 50%, var(--c4) 0 75%, transparent 0) 0 0/48px 48px; }
.ring{ width:176px; aspect-ratio:1; border-radius:50%; position:relative; filter:drop-shadow(0 18px 30px rgba(0,0,0,.5)); }
.ring::before{ content:""; position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 210deg, var(--k2), var(--k), var(--k2)); -webkit-mask:radial-gradient(circle, transparent 46%, #000 47%); mask:radial-gradient(circle, transparent 46%, #000 47%); }
.ring::after{ content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.45), transparent 45%); -webkit-mask:radial-gradient(circle, transparent 46%, #000 47%); mask:radial-gradient(circle, transparent 46%, #000 47%); }
.lane.c1{ --k:var(--c1); --k2:var(--c1-2); } .lane.c2{ --k:var(--c2); --k2:var(--c2-2); } .lane.c3{ --k:var(--c3); --k2:var(--c3-2); } .lane.c4{ --k:var(--c4); --k2:var(--c4-2); }
.lane .mono{ color:var(--k); }
.lane h3{ margin-top:8px; font-size:24px; font-weight:700; letter-spacing:-.02em; }
.lane p{ margin-top:10px; color:var(--mute); font-size:14.5px; }
.lane dl{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.lane dt{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.lane dd{ font-weight:700; font-size:17px; margin-top:3px; }

/* ---- wall ---- */
.wall-rows{ margin-top:clamp(36px,6vh,64px); display:grid; gap:16px; overflow:hidden; }
.tile{ width:260px; height:300px; border-radius:18px; position:relative; overflow:hidden; background:var(--panel); border:1px solid var(--line); }
.tile b{ position:absolute; left:16px; right:16px; bottom:14px; font-size:13px; font-weight:700; letter-spacing:-.01em; color:var(--text); text-shadow:0 1px 8px rgba(0,0,0,.6); }
.tile::before{ content:""; position:absolute; inset:0; }
.t1::before{ background:repeating-radial-gradient(circle at 50% 45%, var(--c1) 0 8px, transparent 8px 22px); opacity:.85; }
.t2::before{ background:radial-gradient(circle at 50% 45%, transparent 0 60px, var(--c2) 61px 100px, transparent 101px); }
.t3::before{ background:radial-gradient(circle, var(--c3) 0 7px, transparent 8px) 0 0/30px 30px, radial-gradient(circle at 50% 45%, var(--c3) 0, transparent 70%); opacity:.9; }
.t4::before{ background:repeating-linear-gradient(115deg, var(--c4) 0 22px, color-mix(in srgb, var(--c4) 55%, var(--bg)) 22px 44px); }
.t5::before{ background:conic-gradient(from 90deg at 50% 50%, var(--c1) 0 25%, transparent 0 50%, var(--c1) 0 75%, transparent 0); opacity:.85; }
.t6::before{ background:repeating-linear-gradient(0deg, var(--c2) 0 18px, transparent 18px 36px); opacity:.85; }
.t7::before{ background:radial-gradient(circle at 30% 30%, var(--c3) 0 70px, transparent 71px), radial-gradient(circle at 70% 70%, var(--c1) 0 70px, transparent 71px); }
.t8::before{ background:repeating-radial-gradient(circle at 0 100%, var(--c4) 0 10px, transparent 10px 30px); opacity:.9; }
.t9::before{ background:linear-gradient(45deg, var(--c2) 50%, transparent 0) 0 0/60px 60px; opacity:.8; }
.t10::before{ background:radial-gradient(circle at 50% 50%, var(--c1) 0 44px, transparent 45px), repeating-radial-gradient(circle at 50% 50%, transparent 0 60px, var(--c1) 60px 63px, transparent 63px 90px); }
.t11::before{ background:repeating-linear-gradient(90deg, var(--c3) 0 12px, transparent 12px 30px); opacity:.85; }
.t12::before{ background:conic-gradient(var(--c4), var(--c2), var(--c3), var(--c1), var(--c4)); -webkit-mask:radial-gradient(circle, transparent 38%, #000 39%); mask:radial-gradient(circle, transparent 38%, #000 39%); }

/* ---- steps ---- */
.steps{ position:relative; margin-top:clamp(40px,7vh,80px); display:grid; gap:clamp(36px,6vh,64px); }
.steps::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--line2); translate:-50% 0; }
.steps li{ position:relative; width:calc(50% - 44px); }
.steps li:nth-child(odd){ margin-left:auto; }
.steps li:nth-child(even){ text-align:right; }
.steps li::before{
  content:""; position:absolute; top:6px; width:16px; height:16px; border-radius:50%; background:var(--bg); border:2px solid var(--line2);
  transition:border-color .5s, box-shadow .5s;
}
.steps li:nth-child(odd)::before{ left:-52px; }
.steps li:nth-child(even)::before{ right:-52px; }
.steps li.lit::before{ border-color:var(--accent); box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent); }
.steps li .mono{ color:var(--accent); }
.steps h3{ margin-top:8px; font-size:clamp(22px,2.2vw,30px); font-weight:700; letter-spacing:-.02em; }
.steps p{ margin-top:8px; color:var(--mute); font-size:15px; max-width:44ch; }
.steps li:nth-child(even) p{ margin-left:auto; }

/* ---- plans ---- */
.toggle{ display:inline-flex; gap:4px; margin-top:30px; padding:4px; border-radius:99px; background:var(--panel2); }
.toggle button{ padding:9px 16px; border-radius:99px; font-size:13.5px; font-weight:600; color:var(--mute); transition:background .3s, color .3s; }
.toggle button.on{ background:var(--text); color:#0B0C0F; }
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:28px; }
.plan{ position:relative; background:var(--panel); border:1px solid var(--line); border-radius:22px; padding:26px 26px 28px; display:flex; flex-direction:column; }
.plan.pick{ border-color:color-mix(in srgb, var(--accent) 60%, transparent); box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 30px 60px rgba(0,0,0,.4); background:var(--panel2); }
.badge{ position:absolute; right:18px; top:20px; padding:5px 10px; border-radius:99px; background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--accent); font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.price{ margin-top:14px; display:flex; align-items:baseline; gap:10px; }
.price b{ font-size:44px; font-weight:800; letter-spacing:-.04em; line-height:1; }
.price span{ color:var(--dim); font-size:13px; }
.pl{ margin-top:12px; color:var(--mute); font-size:14.5px; min-height:3.2em; }
.plan ul{ margin-top:18px; display:grid; gap:9px; padding-top:18px; border-top:1px solid var(--line); flex:1; }
.plan li{ position:relative; padding-left:24px; font-size:14.5px; color:var(--mute); }
.plan li::before{ content:""; position:absolute; left:0; top:6px; width:12px; height:8px; border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg); }
.plan .btn{ margin-top:24px; width:100%; }
.fine{ margin-top:22px; text-align:center; font-size:13px; color:var(--dim); }

/* ---- voices ---- */
.voice-rows{ margin-top:clamp(36px,6vh,64px); display:grid; gap:16px; overflow:hidden; }
.voice{ width:360px; background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:22px 22px 20px; }
.voice p{ font-size:15.5px; font-weight:500; line-height:1.5; }
.voice footer{ display:grid; grid-template-columns:36px 1fr; grid-template-rows:auto auto; column-gap:12px; margin-top:18px; align-items:center; }
.voice footer b{ font-size:13.5px; }
.voice footer span:last-child{ font-size:12px; color:var(--dim); grid-column:2; }
.av{ grid-row:1 / span 2; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-family:var(--mono); font-size:11px; color:#0B0C0F; font-weight:500; }
.av.c1{ background:var(--c1); } .av.c2{ background:var(--c2); } .av.c3{ background:var(--c3); } .av.c4{ background:var(--c4); }

/* ---- faq ---- */
.faq{ margin-top:clamp(28px,5vh,48px); }
.faq details{ border-top:1px solid var(--line); }
.faq details:last-child{ border-bottom:1px solid var(--line); }
.faq summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px 0; font-size:clamp(17px,1.6vw,21px); font-weight:600; letter-spacing:-.01em; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:22px; color:var(--accent); transition:rotate .3s var(--ease); }
.faq details[open] summary::after{ rotate:45deg; }
.faq p{ padding:0 0 22px; max-width:62ch; color:var(--mute); font-size:15px; }

/* ---- go ---- */
.go{ position:relative; padding-block:calc(var(--sec)*1.2); overflow:hidden; isolation:isolate; background:radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%); transition:background .8s; }
.stars{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.stars i{ position:absolute; width:2px; height:2px; border-radius:50%; background:#fff; opacity:var(--o); }
.giant{ position:relative; z-index:1; font-size:clamp(52px,10vw,150px); font-weight:800; letter-spacing:-.045em; line-height:.95; }
.giant .outline{ color:rgba(255,255,255,.14); }
.giant .solidw{ background:linear-gradient(90deg, var(--accent-2), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.go .lede{ margin-inline:auto; position:relative; z-index:1; }
.go .hero-btns{ justify-content:center; position:relative; z-index:1; }
.go .mono{ position:relative; z-index:1; display:block; }

/* ---- footer ---- */
.foot{ border-top:1px solid var(--line); padding-top:var(--sec); background:var(--bg); }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:clamp(24px,4vw,60px); }
.foot-grid p{ margin-top:16px; color:var(--mute); font-size:14.5px; max-width:36ch; }
.foot-grid div .mono{ display:block; margin-bottom:14px; }
.foot-grid div a:not(.brand){ display:block; font-size:14.5px; font-weight:600; color:var(--mute); padding:5px 0; transition:color .3s; }
.foot-grid div a:not(.brand):hover{ color:var(--text); }
.foot-word{ margin-top:clamp(40px,7vh,80px); font-size:clamp(80px,17vw,260px); font-weight:800; letter-spacing:-.05em; line-height:.85; text-align:center; color:rgba(255,255,255,.05); user-select:none; }
.foot-bar{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:22px 0 26px; margin-top:24px; border-top:1px solid var(--line); font-size:12.5px; color:var(--dim); }
.foot-bar a{ color:var(--mute); } .foot-bar a:hover{ color:var(--accent); }

/* ---- reveal ---- */
.rv{ opacity:0; translate:0 18px; transition:opacity .9s var(--ease) var(--d,0ms), translate .9s var(--ease) var(--d,0ms); }
.rv.in{ opacity:1; translate:0 0; }

/* ---- responsive ---- */
@media (max-width:1000px){
  .cards,.plans{ grid-template-columns:1fr 1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .hero-lede{ flex-direction:column; align-items:flex-start; bottom:88px; gap:16px; }
  .glyphs{ padding-bottom:230px; }
}
@media (max-width:640px){
  .nav{ display:none; }
  .top{ padding:8px 8px 8px 14px; }
  .cards,.plans{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .glyphs{ gap:10px; padding:80px var(--pad) 300px; }
  .dial{ width:min(62vw, 300px); }
  .glow{ width:80vw; }
  .steps::before{ left:8px; }
  .steps li,.steps li:nth-child(even){ width:auto; margin-left:36px; text-align:left; }
  .steps li::before,.steps li:nth-child(odd)::before,.steps li:nth-child(even)::before{ left:-36px; right:auto; }
  .steps li:nth-child(even) p{ margin-left:0; }
  .voice{ width:300px; }
  .tile{ width:200px; height:230px; }
  .hero-foot .mono:last-child{ display:none; }
}

/* ---- ?still : freezes everything for screenshots ---- */
.still *,.still *::before,.still *::after{ transition:none !important; animation:none !important; }
.still .rv{ opacity:1; translate:0 0; }
.still .loader{ display:none; }

/* ---- motion off ---- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .loop{ animation:none; }
  .rv{ opacity:1; translate:0 0; transition:none; }
  .loader{ display:none; }
}