@font-face{
  font-family:'August';
  src:url('../assets/fonts/August-Bold.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* ---------- TOKENS ----------
   --bg must stay #f5f5f7: the gear frames in assets/frames/ have that exact
   colour baked in, so any other background shows the canvas as a box. */
:root{
  --bg:#f5f5f7;
  --bg-raised:#ffffff;
  --bg-sunken:#ebebef;
  --ink:#101014;
  --ink-strong:#000;
  --muted:#1010149e;
  --faint:#1010146b;
  --line:#10101429;
  --line-strong:#10101466;
  --invert-bg:#101014;
  --invert-fg:#f5f5f7;
  /* The site itself is monochrome. Colour lives only in the logo and in the
     product cards, where each product has its own (see "per-product colours"). */
  --accent:#101014;

  --nav-h:48px;
  --bar-h:43px;
  --ruler-rail:60px;
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --font-display:'Archivo', system-ui, sans-serif;
  --font-mono:'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-body:'Inter', system-ui, sans-serif;
  color-scheme:light;
}
*,*::before,*::after{ box-sizing:border-box; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:clip; position:relative;
}
h1,h2,h3,p,ul{ margin:0; }
ul{ list-style:none; padding:0; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- TYPE ---------- */
.display{ font-family:var(--font-display); font-weight:620; font-stretch:118%; color:var(--ink-strong); }
.hud{ font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; }
.muted{ color:var(--muted); }
.faint{ color:var(--faint); }
.ink{ color:var(--ink); }
/* highlight word: italic serif instead of colour, one per heading */
.em{ font-family:'Instrument Serif', Georgia, serif; font-style:italic; font-weight:400; font-stretch:normal; font-size:1.1em; letter-spacing:-.01em; line-height:0; }
.h-xl{ font-size:36px; line-height:1.02; letter-spacing:-.035em; max-width:48rem; }
.h-cta{ font-size:48px; line-height:.98; letter-spacing:-.04em; max-width:56rem; }
.h-card{ font-size:26px; line-height:1.05; letter-spacing:-.03em; }
.h-beat{ font-size:clamp(28px,3.2vw,40px); line-height:1.12; letter-spacing:-.03em; }
.h-step{ font-size:22px; line-height:1.1; letter-spacing:-.02em; margin-bottom:9px; }
.lede{ font-size:18px; line-height:1.625; color:var(--muted); max-width:36rem; }
@media (min-width:640px){ .h-xl{ font-size:48px; } .h-cta{ font-size:60px; } }
@media (min-width:768px){ .h-xl{ font-size:60px; } .h-cta{ font-size:72px; } .h-card{ font-size:28px; } }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; width:fit-content; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  white-space:nowrap; transition:opacity .15s, background-color .12s linear, color .12s linear, border-color .12s linear;
}
.btn svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.btn-lg{ height:48px; padding:0 24px; }
.btn-sm{ padding:8px 16px; }
.btn-solid{ background:var(--invert-bg); color:var(--invert-fg); }
.btn-solid:hover{ opacity:.82; }
.btn-line{ border:1px solid var(--line-strong); background:var(--bg); color:var(--ink); }
.btn-line:hover{ background:var(--invert-bg); color:var(--invert-fg); border-color:transparent; }

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:50; height:var(--nav-h);
  display:flex; align-items:stretch; justify-content:space-between;
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 95%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.nav-brand{ display:flex; align-items:center; gap:10px; padding:0 16px; border-right:1px solid var(--line); }
.nav-brand img{ width:30px; height:30px; object-fit:contain; }
.nav-brand:hover{ opacity:.75; }
.wordmark{ font-family:'August', var(--font-body); font-weight:700; font-size:22px; letter-spacing:-.01em; color:var(--ink-strong); line-height:1; padding-top:2px; }
.nav-links{ display:none; margin-right:auto; }
.nav-links li{ display:flex; }
.nav-link{
  display:flex; align-items:center; padding:0 10px; color:var(--muted);
  font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; white-space:nowrap;
}
.nav-link span{ padding:2px 6px; transition:background-color .12s linear, color .12s linear; }
.nav-link:hover{ color:var(--ink); }
.nav-link:hover span, .nav-link.on span{ background:var(--invert-bg); color:var(--invert-fg); }
.nav-right{ display:flex; align-items:stretch; }
.nav-email{ display:none; }
.nav-cta{ padding:0 18px; }
@media (min-width:640px){ .nav-brand{ padding:0 20px; } }
@media (min-width:768px){ .nav-email{ display:flex; border-left:1px solid var(--line); } .nav-cta{ padding:0 20px; } }
@media (min-width:1024px){ .nav-links{ display:flex; padding-left:6px; } }

/* ---------- SECTION FRAME ----------
   Full-width rule on each section's top edge, a bordered 1280px column,
   crosshair ticks where they meet, and a sticky numbered bar. */
.section{ position:relative; }
.rule{ position:absolute; left:0; right:0; top:0; height:1px; background:var(--line); }
.wrap{ position:relative; max-width:1280px; margin:0 auto; border-left:1px solid var(--line); border-right:1px solid var(--line); }
.tick{ position:absolute; z-index:31; width:11px; height:11px; pointer-events:none; top:-5px; }
.tick::before,.tick::after{ content:""; position:absolute; background:var(--line-strong); }
.tick::before{ width:1px; top:5px; bottom:0; left:5px; }
.tick::after{ height:1px; top:5px; left:0; right:0; }
.tick-l{ left:-6px; }
.tick-r{ right:-6px; }
.bar{
  position:sticky; top:var(--nav-h); z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 24px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 60%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.slash{ margin:0 8px; }
.bar-meta{ display:none; }
@media (min-width:640px){ .bar-meta{ display:block; } }
@media (min-width:768px){ .bar{ padding:12px 40px; } }

/* ---------- 01 HERO ---------- */
.hero{ padding:56px 24px; }
.hero h1{ max-width:none; }
/* Rolling-word slot: tall enough for the serif's descenders (company, hustle),
   baseline-aligned with "your", and pulled up so it doesn't widen the line gap. */
.roll{ display:inline-block; height:1.3em; margin-top:-.24em; vertical-align:-.28em; overflow:hidden; text-align:left; }
.roll-word{ display:inline-block; white-space:nowrap; line-height:1.18; will-change:transform,opacity; }
.hero .lede{ margin-top:20px; }
.cta-row{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px; margin-top:32px; }
.cta-stack{ display:flex; flex-direction:column; gap:8px; }
.cta-center{ justify-content:center; }
.stats{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:48px;
  background:var(--line); border:1px solid var(--line); max-width:30rem;
}
.stat{ background:var(--bg); padding:20px; display:flex; flex-direction:column; gap:10px; }
.stat-n{ font-size:44px; line-height:1; letter-spacing:-.03em; }
.stat-unit{ font-size:.45em; letter-spacing:0; margin-left:4px; color:var(--muted); }
.stat-l{ font-size:13px; line-height:1.4; color:var(--muted); }
@media (min-width:768px){ .hero{ padding:80px 40px; } .stat{ padding:24px; } }
@media (min-width:1280px){
  .hero{ display:flex; align-items:center; justify-content:space-between; gap:48px; }
  .stats{ margin-top:0; flex:none; width:30rem; }
}

/* ---------- 02 WHERE IT HURTS ---------- */
.intro{ padding:56px 24px; }
.intro .lede{ margin-top:20px; }
@media (min-width:768px){ .intro{ padding:80px 40px; } }
.cards{ display:grid; gap:1px; background:var(--line); border-top:1px solid var(--line); }
@media (min-width:640px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1280px){ .cards{ grid-template-columns:repeat(3,1fr); } }
/* per-product colours: --app-fill (badges, bars, icon tiles), --app-on (text on
   the fill), --app-ink (coloured text on the page). QualiAI keeps its brand gradient. */
.card{ --app-fill:var(--ink); --app-on:#fff; --app-ink:var(--ink); position:relative; display:flex; flex-direction:column; background:var(--bg); }
.card.app-qualiai { --app-fill:linear-gradient(95deg,#6a1fc9,#a516b8 55%,#c80c9e); --app-on:#fff; --app-ink:#8a19b2; }
.card.app-invoices{ --app-fill:#2f7bf5; --app-on:#000; --app-ink:#1a5bc4; }
.card.app-reviews { --app-fill:#f26b1d; --app-on:#000; --app-ink:#ad4306; }
.card.app-bookings{ --app-fill:#1f9d55; --app-on:#000; --app-ink:#136938; }
.card.app-admin   { --app-fill:#0b8aa8; --app-on:#000; --app-ink:#09596d; }
.card-bar{ position:absolute; left:0; right:0; top:0; z-index:10; height:2px; background:var(--app-fill); transform:scaleX(0); transform-origin:left; transition:transform .3s; }
.card:hover .card-bar{ transform:scaleX(1); }
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 24px; border-bottom:1px solid var(--line); }
.card-head .hud:last-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.num{ background:var(--app-fill); color:var(--app-on); padding:4px 8px; }
.card-visual{
  position:relative; aspect-ratio:16/10; overflow:hidden; border-bottom:1px solid var(--line);
  background-color:var(--bg-sunken);
  background-image:radial-gradient(var(--line-strong) 1px, transparent 1px);
  background-size:16px 16px; background-position:8px 8px;
}
.card-visual img{ width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(0,0,.2,1); }
.card:hover .card-visual img{ transform:scale(1.03); }
.visual-icon{ display:none; position:absolute; left:50%; top:50%; width:64px; height:64px; transform:translate(-50%,-50%); fill:none; stroke:var(--app-ink); stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; opacity:.45; transition:transform .5s cubic-bezier(0,0,.2,1), opacity .3s; }
.card-visual.empty img{ display:none; }
.card-visual.empty .visual-icon{ display:block; }
.card:hover .card-visual.empty .visual-icon{ transform:translate(-50%,-50%) scale(1.08); opacity:.7; }
.card-body{ display:flex; flex:1; flex-direction:column; padding:0 24px 24px; }
.card-icon{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:72px; height:72px; margin-top:-36px; border-radius:22%; overflow:hidden;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.18)); transition:transform .3s cubic-bezier(0,0,.2,1);
}
.card-icon img{ width:100%; height:100%; object-fit:cover; }
.card-icon-fill{ background:var(--app-fill); }
.card-icon-fill svg{ width:34px; height:34px; fill:none; stroke:#fff; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.card:hover .card-icon{ transform:translateY(-4px); }
.card .h-card{ margin-top:16px; }
.card-text{ margin-top:12px; line-height:1.625; color:var(--muted); }
.tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:24px; }
.tag{
  display:flex; align-items:center; padding:1px 6px; border:1px solid var(--line); background:var(--bg-sunken);
  font-family:var(--font-mono); font-size:10px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.tag-accent{ color:var(--app-ink); }
.card-link{ display:flex; align-items:center; gap:6px; margin-top:auto; padding-top:24px; color:var(--muted); transition:color .15s; }
.card-link svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; }
.card:hover .card-link{ color:var(--ink); }
.card:hover .card-link svg{ transform:translateX(2px); }
.card-next{ padding:24px; }
.card-next .h-card{ margin-top:16px; }
.card-next-cta{ margin-top:auto; padding-top:32px; }
@media (min-width:768px){
  .card-body{ padding:0 32px 32px; }
  .card-next{ padding:32px; }
}

/* ---------- 03 HOW IT WORKS (scroll-scrubbed gear) ---------- */
.scrub-outer{ position:relative; height:420vh; }
.scrub-sticky{
  position:sticky; top:calc(var(--nav-h) + var(--bar-h));
  height:calc(100vh - var(--nav-h) - var(--bar-h)); overflow:hidden;
}
.scrub-canvas-wrap{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(48vh,420px); height:min(48vh,420px); z-index:2;
}
.scrub-canvas{ width:100%; height:100%; display:block; }
.scrub-text{ position:absolute; opacity:0; will-change:opacity; z-index:3; }
.scrub-text p:not(.hud){ font-size:16px; color:var(--muted); line-height:1.55; }
.step-n{ color:var(--ink); margin-bottom:10px; }
.scrub-text[data-beat="0"]{ top:7%; left:50%; transform:translate(-50%,0); width:min(620px,80vw); text-align:center; }
.scrub-text[data-beat="1"]{ left:5%; top:50%; transform:translateY(-50%); width:280px; }
.scrub-text[data-beat="2"]{ bottom:7%; left:50%; transform:translate(-50%,0); width:min(520px,80vw); text-align:center; }
.scrub-text[data-beat="3"]{ right:7%; top:50%; transform:translateY(-50%); width:280px; text-align:right; }
@media (max-width:900px){
  .scrub-canvas-wrap{ width:min(30vh,220px); height:min(30vh,220px); top:44%; }
  .scrub-text{ left:50% !important; right:auto !important; width:86vw !important; text-align:center !important; }
  .scrub-text[data-beat="0"]{ top:5% !important; bottom:auto !important; transform:translate(-50%,0) !important; }
  .scrub-text[data-beat="1"], .scrub-text[data-beat="2"], .scrub-text[data-beat="3"]{
    top:80% !important; bottom:auto !important; transform:translate(-50%,-50%) !important;
  }
}

/* ---------- 04 ABOUT ---------- */
.about{ display:grid; gap:1px; background:var(--line); }
.about > div{ background:var(--bg); }
.about-photo{ padding:24px; }
.about-photo img{ width:100%; height:auto; max-width:320px; aspect-ratio:4/5; object-fit:cover; object-position:50% 20%; background:var(--bg-sunken); }
.about-copy{ padding:24px 24px 56px; }
.about-copy .lede{ margin-top:20px; }
.about-copy .lede + .lede{ margin-top:16px; }
.sig{ margin-top:24px; }
@media (min-width:768px){
  .about{ grid-template-columns:minmax(0,2fr) minmax(0,3fr); }
  .about-photo{ padding:40px; }
  .about-photo img{ max-width:400px; }
  .about-copy{ padding:80px 40px; }
}

/* ---------- 05 GET STARTED ---------- */
.closer{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:80px 24px; }
.closer .h-cta{ margin-top:24px; }
.closer .lede{ margin-top:24px; }
.closer .cta-row{ margin-top:40px; }
.closer-alt{ margin-top:32px; }
.closer-alt a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:4px; }
.closer-alt a:hover{ text-decoration-color:currentColor; }
@media (min-width:768px){ .closer{ padding:112px 40px 64px; } }

/* booking panel: Cal.com inline embed, or the email fallback until it's set up */
.booker{ border-top:1px solid var(--line); }
.booker-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 24px; border-bottom:1px solid var(--line); }
.cal-embed{ min-height:560px; width:100%; overflow:auto; background:var(--bg); }
.cal-embed[hidden]{ display:none; }
.cal-fallback{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:56px 24px 64px;
  background:var(--bg-sunken);
}
.cal-fallback > svg{ width:40px; height:40px; fill:none; stroke:var(--ink); stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; opacity:.6; margin-bottom:4px; }
.cal-fallback .card-text{ max-width:26rem; margin-top:0; }
.cal-fallback .btn{ margin-top:12px; }
.cal-fallback[hidden]{ display:none; }
@media (min-width:768px){ .booker-head{ padding:12px 40px; } .cal-fallback{ padding:72px 40px 80px; } }

/* ---------- FOOTER ---------- */
.footer{ border-top:1px solid var(--line); }
.foot-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); }
.foot-grid > *{ background:var(--bg); padding:24px; }
.foot-brand{ grid-column:1 / -1; }
.foot-logo{ padding:0; border:0; }
.foot-logo img{ width:40px; height:40px; }
.foot-logo .wordmark{ font-size:26px; }
.foot-brand p{ margin-top:16px; max-width:20rem; line-height:1.625; }
.foot-mail{ display:inline-block; margin-top:24px; }
.foot-mail:hover{ color:var(--ink); }
.foot-col ul{ display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.foot-col a{ color:var(--muted); }
.foot-col a:hover{ color:var(--ink); }
.foot-word{
  font-family:'August', var(--font-body); font-weight:700; font-size:clamp(80px,17vw,230px); line-height:.9;
  letter-spacing:-.01em; color:var(--ink-strong); opacity:.05; white-space:nowrap; overflow:hidden;
  padding:24px 24px 8px; border-top:1px solid var(--line); user-select:none;
}
.foot-bar{ display:flex; flex-direction:column; gap:8px; padding:16px 24px; border-top:1px solid var(--line); }
@media (min-width:768px){
  .foot-grid{ grid-template-columns:2fr 1fr 1fr 1fr; }
  .foot-grid > *{ padding:32px; }
  .foot-brand{ grid-column:auto; padding:40px !important; }
  .foot-word{ padding:24px 40px 8px; }
  .foot-bar{ flex-direction:row; align-items:center; justify-content:space-between; padding:16px 40px; }
}
.foot-bar a:hover{ color:var(--ink); }

/* ---------- LEGAL PAGE (privacy.html) ---------- */
.legal .wrap{ padding:56px 24px 80px; }
.legal .wrap > *{ max-width:40rem; }
.legal .h-xl{ margin-top:16px; }
.legal .lede{ margin-top:24px; }
.legal h2{ font-size:22px; line-height:1.1; letter-spacing:-.02em; margin-top:48px; }
.legal p, .legal ul{ margin-top:12px; line-height:1.625; color:var(--muted); }
.legal ul{ list-style:disc; padding-left:20px; }
.legal li + li{ margin-top:6px; }
.legal a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
@media (min-width:768px){ .legal .wrap{ padding:96px 40px 120px; } }

/* ---------- ENTRANCE CHOREOGRAPHY ----------
   Rules draw left→right, corner ticks pop, numbered bars and content rise out
   of a blur. Hidden states only apply once JS is running (html.js). */
.js [data-draw-rule]{ transform:scaleX(0); transform-origin:left center; transition:transform 1.1s var(--ease-out-expo); }
.js [data-draw-tick]{ opacity:0; transform:scale(0); transition:opacity .6s var(--ease-out-expo) .25s, transform .6s var(--ease-out-expo) .25s; }
.js [data-draw-eyebrow]{ opacity:0; transform:translateY(28px); filter:blur(8px); transition:opacity 1s var(--ease-out-expo) .1s, transform 1s var(--ease-out-expo) .1s, filter 1s var(--ease-out-expo) .1s; }
.js [data-reveal]{ opacity:0; transform:translateY(28px); filter:blur(8px); transition:opacity .9s var(--ease-out-expo), transform .9s var(--ease-out-expo), filter .9s var(--ease-out-expo); transition-delay:var(--d,0s); }
.js .in [data-draw-rule]{ transform:scaleX(1); }
.js .in [data-draw-tick]{ opacity:1; transform:none; }
.js .in > .wrap > [data-draw-eyebrow]{ opacity:1; transform:none; filter:none; }
.js [data-reveal].in{ opacity:1; transform:none; filter:none; }
/* once settled, drop the filter/transform so sticky bars and hovers stay crisp */
.js [data-reveal].done, .js [data-draw-eyebrow].done{ filter:none !important; transition-delay:0s; }
.js .card[data-reveal].done{ transform:none; }
@media (prefers-reduced-motion:reduce){
  .js [data-draw-rule], .js [data-draw-tick], .js [data-draw-eyebrow], .js [data-reveal]{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
  .scrub-outer{ height:auto; }
  .scrub-sticky{ position:relative; top:auto; height:auto; padding:56px 24px; display:flex; flex-direction:column; align-items:center; gap:32px; }
  .scrub-canvas-wrap{ position:relative; top:auto; left:auto; transform:none; }
  .scrub-text{ position:relative; opacity:1; transform:none !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; width:100% !important; max-width:520px; text-align:center !important; }
}

/* ---------- RULER (desktop) ----------
   0–100 ticks laid down the page, and a fixed marker that sits on the tick
   matching scroll progress, with odometer-style rolling digits. */
#ruler{ position:absolute; top:0; right:0; width:var(--ruler-rail); pointer-events:none; z-index:40; display:none; }
.r-tick{ position:absolute; right:0; height:1px; background:var(--ink); transform-origin:right center; transform:scaleX(0); transition:transform .7s var(--ease-out-expo); }
.r-tick.on{ transform:scaleX(1); }
.r-label{ position:absolute; right:24px; transform:translateY(-50%); font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; color:var(--ink); opacity:.5; }
#rulerMark{ position:fixed; right:0; top:0; width:var(--ruler-rail); height:0; z-index:41; pointer-events:none; display:none; opacity:0; transition:opacity .6s ease; }
#rulerMark .line{ position:absolute; left:0; right:0; top:0; height:1px; background:var(--ink); }
#rulerMark .val{ position:absolute; right:2px; top:4px; display:flex; white-space:nowrap; font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; color:var(--ink); }
#rulerMark .pct{ margin-left:2px; }
.ruler-digits{ height:1em; line-height:1; display:inline-flex; overflow:hidden; }
.ruler-digit-col{ display:flex; flex-direction:column; transition:transform .28s cubic-bezier(.2,.9,.2,1); }
.ruler-digit-col > span{ height:1em; display:block; }

/* ---------- SECTION INDEX (desktop) ----------
   Section names split into letters that fly between a bottom-right list,
   the vertical rail, the big top-right title and the small stack above it. */
#sectionIndex{ position:fixed; inset:0; z-index:40; pointer-events:none; display:none; }
#sectionIndex .ltr{
  position:absolute; top:0; left:0; white-space:pre; font-size:34px; line-height:1;
  transform-origin:0 0; will-change:transform; text-shadow:0 0 4px var(--bg), 0 0 10px var(--bg);
}
#sectionIndex a{ position:absolute; pointer-events:auto; cursor:pointer; }
#sectionIndex{ transition:opacity .3s ease; }
#sectionIndex.away{ opacity:0; }
#sectionIndex.away a{ pointer-events:none; }
.vignette{
  position:fixed; right:0; z-index:39; pointer-events:none; display:none; transition:opacity .4s ease;
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); background-color:color-mix(in srgb, var(--bg) 80%, transparent);
}
#vigTop{ top:0; height:260px; -webkit-mask-image:radial-gradient(100% 100% at 100% 0%, #000 38%, rgba(0,0,0,.8) 55%, transparent 100%); mask-image:radial-gradient(100% 100% at 100% 0%, #000 38%, rgba(0,0,0,.8) 55%, transparent 100%); }
#vigBottom{ bottom:0; height:180px; -webkit-mask-image:radial-gradient(100% 100% at 100% 100%, #000 38%, rgba(0,0,0,.8) 55%, transparent 100%); mask-image:radial-gradient(100% 100% at 100% 100%, #000 38%, rgba(0,0,0,.8) 55%, transparent 100%); }
#scrollHint{ position:fixed; right:90px; bottom:82px; width:16px; height:16px; z-index:40; display:none; pointer-events:none; fill:none; stroke:var(--muted); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:opacity .4s ease; }

@media (min-width:1024px){
  html{ scrollbar-width:none; }
  html::-webkit-scrollbar{ width:0; height:0; display:none; }
  #ruler, #rulerMark, #sectionIndex, .vignette, #scrollHint{ display:block; }
}