/* =========================================================================
   Nebula website. One stylesheet for every page.
   Tokens match the desktop app (mockups/css/nebula.css + glass.css): deep
   navy, OIII cyan for anything you can click, SII gold for plans and money,
   H-alpha rose for errors and empty. Dark only.
   ========================================================================= */

@font-face {
  font-family: "Mona Sans";
  src: url("fonts/MonaSansVF.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Space */
  --space: #050817;
  --chrome: #0b0c1c;
  --side: #0f1126;
  --main: #111430;
  --raise: #181c3d;
  --raise-2: #20254c;

  /* Glass */
  --glass: rgba(13, 17, 46, 0.5);
  --glass-strong: rgba(10, 13, 36, 0.72);
  --glass-blur: blur(22px) saturate(160%);
  --rim: rgba(255, 255, 255, 0.1);
  --rim-2: rgba(255, 255, 255, 0.16);
  --hover: rgba(255, 255, 255, 0.06);
  --line: rgba(205, 220, 255, 0.09);
  --line-2: rgba(205, 220, 255, 0.16);

  /* Starlight text */
  --ink: #e9ebf8;
  --ink-2: #a9aecf;
  --ink-3: #737a9e;

  /* Emission accents */
  --oiii: #5ee3f5;
  --oiii-hi: #95efff;
  --oiii-ink: #03222c;
  --oiii-soft: rgba(94, 227, 245, 0.12);
  --oiii-line: rgba(94, 227, 245, 0.34);
  --sii: #f3b95f;
  --sii-ink: #2b1a02;
  --sii-soft: rgba(243, 185, 95, 0.12);
  --sii-line: rgba(243, 185, 95, 0.36);
  --ha: #ff6283;
  --ha-soft: rgba(255, 98, 131, 0.12);
  --ha-line: rgba(255, 98, 131, 0.36);
  --violet: #b08aff;
  --brand: linear-gradient(120deg, #8ff4ff 0%, #5b9dff 50%, #b08aff 100%);
  --brand-text: linear-gradient(100deg, #c2faff 0%, #8fd6ff 34%, #aebdff 66%, #dcc4ff 100%);

  /* Shape */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;

  /* Type */
  --font: "Mona Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --code: "JetBrains Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;

  --wrap: 1160px;
  --gutter: 28px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --shadow: 0 30px 70px -30px rgba(0, 2, 12, 0.9);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--space);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--oiii); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
code, .mono { font-family: var(--code); font-size: 0.92em; }
:focus-visible { outline: 2px solid var(--oiii); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(94, 227, 245, 0.28); }
[hidden] { display: none !important; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
svg.i-sm { width: 15px; height: 15px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* padding: tight tracking pulls the box in past the last glyph, and
   background-clip: text only paints inside the box (it cut "it." short) */
.grad { background: var(--brand-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.12em; margin-right: -0.12em; }

/* ---------- Page art: the branding background, faded into space ---------- */
.page-art {
  position: absolute; inset: 0 0 auto; height: 860px; z-index: -1; pointer-events: none;
  background: url("img/background.jpg") center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, 0.75) 45%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, 0.75) 45%, transparent 100%);
}
.page-art::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 42%, rgba(3, 5, 18, 0.66), rgba(3, 5, 18, 0.25) 70%, transparent),
    linear-gradient(180deg, rgba(3, 5, 18, 0.55), rgba(3, 5, 18, 0.2) 30%, rgba(5, 8, 23, 0.7) 85%);
}
.page-art.is-quiet { height: 560px; opacity: 0.7; }

/* Nebula glow: soft emission clouds behind sections */

/* ---------- Glass ---------- */
.glass {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--rim);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.012)), var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), var(--shadow);
}
/* Specular rim: bright where light catches the top edge */
.glass::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.08) 28%, rgba(255, 255, 255, 0) 55%, rgba(170, 210, 255, 0.16));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 42px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--rim-2);
  background: rgba(255, 255, 255, 0.05); color: var(--ink);
  font-size: 14.5px; font-weight: 600; letter-spacing: 0.005em; white-space: nowrap; text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.2s, color 0.15s, transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.btn:hover { text-decoration: none; background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.24); }
/* Press: every control gives a little under the finger */
.btn:active, .nav-toggle:active, .dm-card:active, .faq summary:active { transform: scale(0.96); }
.btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 12px 34px -10px rgba(94, 227, 245, 0.95); }
.btn-lg { height: 50px; padding: 0 24px; font-size: 15.5px; border-radius: 14px; }
.btn-sm { height: 34px; padding: 0 13px; font-size: 13.5px; border-radius: 10px; }
.btn-block { width: 100%; }
.btn-primary {
  border-color: transparent; color: var(--oiii-ink);
  background: linear-gradient(180deg, #a3f4ff, #5ee3f5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 10px 28px -10px rgba(94, 227, 245, 0.75);
}
.btn-primary:hover { background: linear-gradient(180deg, #bdf8ff, #78e9f8); border-color: transparent; }

.btn-quiet { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn-quiet:hover { background: var(--hover); color: var(--ink); border-color: transparent; }
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.45; pointer-events: none; box-shadow: none; }

.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 99px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap;
  color: var(--ink-2); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--rim);
}
.pill-cyan { color: var(--oiii); background: var(--oiii-soft); border-color: var(--oiii-line); }

/* Plan badge: one look per plan */
.plan-badge {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 99px;
  font-size: 12px; font-weight: 650; letter-spacing: 0.02em; white-space: nowrap;
  color: var(--ink-2); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--rim);
}
.plan-badge[data-plan="trial"] { color: var(--oiii); background: var(--oiii-soft); border-color: var(--oiii-line); }
.plan-badge[data-plan="starter"] { color: var(--ink); }
.plan-badge[data-plan="pro"] { color: #071224; border-color: transparent; background: var(--brand); }
.plan-badge[data-plan="max"] { color: var(--sii-ink); border-color: transparent; background: linear-gradient(120deg, #ffe1a8, #f3b95f); }
.plan-badge[data-plan="student"] { color: #d6c8ff; background: rgba(170, 130, 255, 0.16); border-color: rgba(170, 130, 255, 0.4); }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; }
.nav-bar {
  display: flex; align-items: center; gap: 20px; height: 68px;
}
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(5, 8, 23, 0.82), rgba(5, 8, 23, 0.5));
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand img { width: 34px; height: auto; filter: drop-shadow(0 0 10px rgba(80, 150, 255, 0.55)); }
.brand span { font-size: 18px; font-weight: 660; font-stretch: 120%; letter-spacing: -0.02em; }
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: 18px; }
.nav-links a { padding: 8px 13px; border-radius: 10px; color: var(--ink-2); font-size: 14.5px; font-weight: 520; }
.nav-links a:hover { color: var(--ink); background: var(--hover); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav-toggle { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--rim); background: rgba(255, 255, 255, 0.05); color: var(--ink); align-items: center; justify-content: center; }
.nav-user { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--ink); }
.nav-user:hover { text-decoration: none; }
.nav-user .avatar { width: 30px; height: 30px; font-size: 13px; }

/* Avatar: Discord image, or the first letter on the brand ring */
.avatar {
  position: relative; display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%;
  font-weight: 720; font-size: 14px; color: #fff; overflow: hidden;
  border: 1.5px solid transparent;
  background: linear-gradient(#151a3e, #151a3e) padding-box, var(--brand) border-box;
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar-lg { width: 64px; height: 64px; font-size: 24px; border-width: 2px; }

/* ---------- Sections ---------- */
main { position: relative; display: block; overflow-x: clip; }

/* ---------- Hero ----------
   Display type on open space, then the live app rising out of the art's
   horizon. .hero-sky ends 300px below the headline block, and the art is
   pinned to its bottom edge, so the horizon (72% down the image) always
   lands just behind the top of the demo. */
.hero { position: relative; isolation: isolate; }
.hero-top { position: relative; padding: clamp(56px, 9vh, 104px) 0 0; }
.hero-sky {
  position: absolute; z-index: -2; left: -16px; right: -16px; top: -68px; bottom: -300px; pointer-events: none;
  background: url("img/background.jpg") center bottom / cover no-repeat;
  filter: blur(3px);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 62%, rgba(0, 0, 0, 0.55) 80%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 62%, rgba(0, 0, 0, 0.55) 80%, transparent 100%);
}
/* Dusk over the sky so the type reads, clearing toward the horizon */
.hero-sky::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 5, 18, 0.72), rgba(3, 5, 18, 0.25) 55%, rgba(3, 5, 18, 0.1)),
    linear-gradient(180deg, rgba(3, 5, 18, 0.5), rgba(3, 5, 18, 0.15) 45%, rgba(3, 5, 18, 0) 70%);
}
.hero-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; align-items: end;
}
.hero-title {
  grid-column: 1 / -1; margin: 0;
  /* "Meet your new Verse programmer." is ~15.8em wide: sized to fit the screen */
  font-size: min(70px, calc((100vw - 56px) / 15.9)); line-height: 0.96; font-weight: 520; font-stretch: 118%; letter-spacing: -0.05em;
}
.hero-title .ln > span { white-space: nowrap; }
/* The role word (motion on .role, the gradient on its inner span). Every word sits in the same grid cell, so the slot is as
   wide as the longest one and nothing around it moves when they swap.
   site.js rotates .is-on; the old word leaves upward (.is-out), and the new
   one only starts rising once it's gone (the 0.42s delay). Without JS,
   or with reduced motion, the still word "co-dev." shows instead. */
.roles { display: inline-grid; overflow: hidden; padding: 0.04em 0.08em 0.18em 0; margin: -0.04em -0.08em -0.18em 0; }
.role { grid-area: 1 / 1; }
.role:not(.role-still) { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .js .role { visibility: visible; opacity: 0; transform: translateY(80%); transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease-out; }
  .js .role.is-on { opacity: 1; transform: none; transition-delay: 0.42s; }
  .js .role.is-out { transform: translateY(-80%); transition: transform 0.42s cubic-bezier(0.55, 0, 0.75, 0.25), opacity 0.32s ease-in; }
  .js .role.no-tr { transition: none; }
  .js .role.role-still { visibility: hidden; }
}
/* Each line rises out of its own mask on load */
.hero-title .ln { display: block; overflow: hidden; padding: 0 0.06em 0.14em 0.02em; margin: 0 -0.06em -0.14em -0.02em; }
.hero-title .ln > span { display: block; }
.hero-sub { grid-column: 1; margin-top: 34px; }
.hero-sub > p:first-child { margin: 0; max-width: 46ch; font-size: 18px; line-height: 1.55; color: #c7cbe6; text-wrap: pretty; }
.hero-sub .meta-line { margin-top: 10px; font: 12.5px/1.6 var(--code); color: var(--ink-3); }
.hero-offer { display: flex; align-items: center; gap: 9px; margin: 20px 0 0; font-size: 15.5px; color: var(--ink-2); }
.hero-offer img { width: auto; height: 20px; filter: drop-shadow(0 0 6px rgba(110, 200, 255, 0.8)); }
.hero-offer b { color: var(--oiii); font-weight: 620; }
.hero-cta { grid-column: 2; justify-self: end; }
/* The quiet button sits on the planet's light: give it its own dark glass */
.hero-cta .btn:not(.btn-primary) { background: rgba(6, 9, 28, 0.5); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 34px; }
.cta-row.hero-cta { justify-content: flex-end; flex-wrap: nowrap; margin-top: 0; }
.meta-line { margin: 18px 0 0; font-size: 13.5px; color: var(--ink-2); }

/* ---------- Live app preview (hero object) ----------
   A small working copy of the desktop app. It's drawn at a fixed size
   (1120 x 700, or 560 x 700 on narrow screens) and scaled to the frame by
   assets/demo.js through --s. Class names start with dm-.
   The frame is the page's one real object: a glass bezel that refracts the
   glow and the art behind it, a rim lit from above, a pointer light that
   moves over the rim (--mx, --my), and layered shadow under it. It tilts
   with its place on the screen: leaning back below the middle, flat at it,
   leaning forward above it (--rx, --sc, set by demo.js). */
.hero-stage { position: relative; margin-top: clamp(48px, 7vh, 72px); }
.shot {
  --rx: 0deg; --sc: 1; --mx: 50%; --my: -20%;
  position: relative; max-width: 1120px; margin: 0 auto; padding: 9px; border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025) 22%, rgba(255, 255, 255, 0.01)), rgba(12, 16, 44, 0.34);
  -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 2px 6px rgba(0, 2, 12, 0.45),
    0 30px 60px -20px rgba(0, 2, 12, 0.85),
    0 90px 160px -40px rgba(8, 16, 70, 0.8);
  transform-origin: 50% 0;
  transform: perspective(2400px) rotateX(var(--rx)) scale(var(--sc));
}
/* Flat: no transform at all, so the app inside is drawn pixel for pixel
   (any 3D transform, even at 0deg, gets resampled and goes soft) */
.shot.is-flat, .reel-stage.is-flat { transform: none; }
/* Rim light: brightest along the top edge, cyan to the left, violet to the right */
.shot::before, .shot::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1.5px; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.shot::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.12) 14%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.05) 100%),
    linear-gradient(90deg, rgba(110, 235, 255, 0.55), rgba(255, 255, 255, 0.1) 35%, rgba(255, 255, 255, 0.1) 65%, rgba(176, 138, 255, 0.55));
}
/* Pointer light: a soft highlight that follows the pointer around the rim */
.shot::after {
  padding: 2px;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(200, 245, 255, 0.85), rgba(140, 200, 255, 0.2) 45%, transparent 70%);
  opacity: 0; transition: opacity 0.4s;
}
.shot:hover::after { opacity: 1; }
/* The light the app lives in: a bloom behind the frame, strongest at the horizon */
.shot-glow {
  position: absolute; z-index: -1; left: 50%; top: -60px; width: min(1400px, 120%); height: 115%; translate: -50% 0; pointer-events: none;
  background:
    radial-gradient(50% 22% at 50% 8%, rgba(150, 225, 255, 0.55), transparent 70%),
    radial-gradient(34% 48% at 22% 40%, rgba(94, 227, 245, 0.32), transparent 70%),
    radial-gradient(36% 50% at 80% 42%, rgba(150, 110, 255, 0.4), transparent 70%),
    radial-gradient(60% 55% at 50% 55%, rgba(60, 110, 255, 0.28), transparent 75%);
  filter: blur(40px);
}
.shot-window { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: var(--space); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.5); }
.shot.is-narrow .shot-window { aspect-ratio: 4 / 5; }
.shot-hint { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 22px 0 0; font: 12.5px var(--code); color: var(--ink-3); }
.shot-hint svg { color: var(--oiii); }

/* One orchestrated arrival on load: the lines rise, the words settle, the
   app rises out of the horizon and its light blooms. Nothing else on the
   page animates without being scrolled to or touched. */
@keyframes hero-line { from { transform: translateY(108%); } }
@keyframes hero-fade { from { opacity: 0; translate: 0 10px; } }
@keyframes hero-rise { from { opacity: 0; translate: 0 70px; } }
@keyframes hero-bloom { from { opacity: 0; scale: 0.8; } }
.hero-title .ln > span { animation: hero-line 1s cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero-title .ln + .ln > span { animation-delay: 0.05s; }
.hero-sub { animation: hero-fade 0.8s 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero-cta { animation: hero-fade 0.8s 0.38s cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero-stage .shot { animation: hero-rise 1.3s 0.42s cubic-bezier(0.16, 1, 0.3, 1) both; }
.shot-glow { animation: hero-bloom 2s 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
.shot-hint { animation: hero-fade 0.8s 1.2s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .hero-title .ln > span, .hero-sub, .hero-cta, .hero-stage .shot, .shot-glow, .shot-hint { animation: none; }
}

.dm {
  --s: 0.9;
  position: absolute; top: 0; left: 0; width: 1120px; height: 700px; transform: scale(var(--s)); transform-origin: 0 0;
  display: grid; grid-template-rows: 44px 1fr; overflow: hidden; text-align: left;
  font-size: 13px; line-height: 1.45; color: var(--ink);
  background: url("img/background.jpg") center / cover;
}
.dm::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(3, 5, 18, 0.5), rgba(3, 5, 18, 0.12) 45%, rgba(3, 5, 18, 0.2)); }
.dm button { font: inherit; color: inherit; cursor: pointer; }
.dm svg.i { width: 16px; height: 16px; }
.dm.is-narrow { width: 560px; }

/* Title bar */
.dm-bar { position: relative; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 0 4px 0 8px; }
.dm-ib { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2) !important; }
.dm-ib:hover { background: var(--hover); color: var(--ink) !important; }
.dm-brand { display: flex; align-items: center; gap: 8px; padding: 0 4px; }
.dm-brand img { width: 24px; height: auto; filter: drop-shadow(0 0 8px rgba(80, 150, 255, 0.5)); }
.dm-brand b { font-size: 15px; font-weight: 650; font-stretch: 115%; letter-spacing: -0.02em; }
.dm-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--line-2); }
.dm-tab { display: flex; align-items: center; gap: 7px; min-width: 0; max-width: 270px; height: 30px; padding: 0 4px 0 11px; border-radius: 9px; border: 1px solid rgba(94, 227, 245, 0.22); background: rgba(94, 227, 245, 0.08); font-size: 12.5px; }
.dm-tab > svg { color: var(--oiii); }
.dm-tab > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-tab .dm-ib { width: 22px; height: 22px; border-radius: 6px; }
.dm-tab .dm-ib svg { width: 13px; height: 13px; }
.dm-uefn { display: flex; align-items: center; gap: 7px; height: 28px; margin-left: auto; padding: 0 11px; border-radius: 99px; border: 1px solid var(--rim); background: rgba(255, 255, 255, 0.04); font-size: 12px; font-weight: 650; }
.dm-uefn span { color: var(--ink-3); font-weight: 500; }
.dm-uefn svg { color: var(--ink-3); }
.dm-dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px rgba(74, 222, 128, 0.7); }
.dm-win { display: flex; color: var(--ink-3); }
.dm-win svg.i { width: 14px; height: 14px; margin: 0 9px; }

/* Body: rail, sidebar, main */
.dm-body { position: relative; z-index: 1; display: grid; grid-template-columns: 52px 252px minmax(0, 1fr); min-height: 0; transition: grid-template-columns 0.35s var(--ease); }
.dm.side-closed .dm-body { grid-template-columns: 52px 0 minmax(0, 1fr); }
.dm-rail { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0 12px; }
.dm-rb { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--ink-2); }
button.dm-rb:hover { background: var(--hover); color: var(--ink); }
.dm-rb.is-active { border-color: var(--rim); background: rgba(255, 255, 255, 0.08); color: var(--ink); }
.dm-rail-end { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: auto; }
.dm-av { display: grid; place-items: center; width: 30px; height: 30px; margin-top: 4px; border-radius: 50%; border: 1.5px solid transparent; object-fit: cover; background: linear-gradient(#151a3e, #151a3e) padding-box, var(--brand) border-box; }

.dm-side {
  min-width: 0; overflow: hidden; padding: 10px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1); border-left: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px 0 0 0;
  background: rgba(8, 11, 30, 0.68); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  transition: padding 0.35s var(--ease);
}
.dm.side-closed .dm-side { padding-left: 0; padding-right: 0; border-left-color: transparent; }
.dm-side-in { display: flex; flex-direction: column; width: 236px; height: 100%; }
.dm-row { display: flex; align-items: center; gap: 9px; width: 100%; height: 32px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2) !important; font-size: 13px; text-align: left; white-space: nowrap; transition: background 0.15s, color 0.15s; }
.dm-row:hover { background: var(--hover); color: var(--ink) !important; }
.dm-row svg { color: var(--ink-3); }
.dm-new { color: var(--ink) !important; font-weight: 560; }
.dm-new kbd { margin-left: auto; font: 11px var(--code); color: var(--ink-3); }
.dm-label { display: flex; align-items: center; justify-content: space-between; margin: 14px 10px 4px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.dm-label svg.i { width: 14px; height: 14px; }
.dm-tree { flex: 1; min-height: 0; overflow: auto; scrollbar-width: none; }
.dm-tree::-webkit-scrollbar { display: none; }
.dm-folder { color: var(--ink) !important; font-weight: 600; }
.dm-folder .dm-chev { width: 14px; height: 14px; transition: transform 0.2s var(--ease); }
.dm-folder[aria-expanded="false"] .dm-chev { transform: rotate(-90deg); }
.dm-folder[aria-expanded="false"] + .dm-chats { display: none; }
.dm-chat { display: block; height: 30px; padding-left: 34px; overflow: hidden; text-overflow: ellipsis; font-size: 12.8px; line-height: 30px; }
.dm-chat.is-active { background: rgba(94, 227, 245, 0.1); color: var(--ink) !important; box-shadow: inset 0 0 0 1px rgba(94, 227, 245, 0.16); }
.dm-chat.is-running::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px 1px -14px; border-radius: 50%; background: var(--oiii); animation: dm-pulse 1s ease-in-out infinite; }
.dm-chat.is-new { animation: dm-in 0.45s var(--ease) both; }
.dm-shard { display: block; margin-top: 10px; padding: 11px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); color: var(--ink); background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)), rgba(13, 17, 46, 0.35); transition: border-color 0.15s; }
.dm-shard:hover { text-decoration: none; border-color: rgba(94, 227, 245, 0.34); }
.dm-shard .sb-foot svg.i { width: 13px; height: 13px; margin-left: auto; color: var(--ink-3); }
.dm-shard:hover .sb-foot svg.i { color: var(--oiii); }
.dm-shard.is-spend .sb-num { animation: dm-tick 0.5s var(--ease); }

/* Main */
.dm-main { position: relative; min-width: 0; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.dm-home { position: absolute; inset: 0 0 128px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 24px; text-align: center; }
.dm-mark { width: 92px; height: auto; filter: drop-shadow(0 0 22px rgba(70, 150, 255, 0.55)); animation: dm-float 6s ease-in-out infinite; }
.dm-home h3 { margin: 16px 0 0; font-size: 42px; font-weight: 600; font-stretch: 118%; letter-spacing: -0.035em; line-height: 1.05; text-shadow: 0 2px 24px rgba(0, 3, 16, 0.7); }
.dm-status { display: inline-flex; align-items: center; gap: 8px; height: 30px; margin-top: 14px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--rim); background: rgba(8, 11, 30, 0.6); font-size: 12.5px; color: var(--ink-2); }
.dm-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 540px; margin-top: 26px; }
.dm-card {
  display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 12px; text-align: left;
  border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.1); font-size: 13.5px; font-weight: 620;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)), rgba(8, 11, 32, 0.62);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform 0.2s var(--ease), border-color 0.2s, box-shadow 0.2s;
}
.dm-card:hover { transform: translateY(-2px); border-color: rgba(94, 227, 245, 0.36); box-shadow: 0 12px 30px -12px rgba(70, 160, 255, 0.55); }

.dm-tile { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.dm-card > svg:last-child { margin-left: auto; color: var(--ink-3); transition: transform 0.2s var(--ease), color 0.2s; }
.dm-card:hover > svg:last-child { transform: translateX(2px); color: var(--oiii); }

.dm-chatview { position: absolute; inset: 0; overflow: auto; padding: 26px 0 150px; background: rgba(6, 8, 24, 0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.15) transparent; }
.dm-thread { display: grid; gap: 14px; width: min(640px, 100% - 48px); margin: 0 auto; }
.dm-thread > *, .dm-step { animation: dm-in 0.4s var(--ease) both; }
.dm-msg { justify-self: end; max-width: 82%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; border: 1px solid rgba(160, 200, 255, 0.18); background: linear-gradient(180deg, rgba(110, 160, 255, 0.3), rgba(110, 130, 255, 0.16)); font-size: 13.5px; }
.dm-steps { display: grid; gap: 2px; padding: 6px; border-radius: 14px; border: 1px solid var(--line); background: rgba(2, 4, 16, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dm-step { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 30px; padding: 0 8px; border-radius: 8px; font-size: 12.5px; color: var(--ink-2); }
.dm-step code { font-size: 11.5px; color: var(--ink); }
.dm-ic { display: grid; place-items: center; }
.dm-ic svg.i { width: 15px; height: 15px; color: var(--ink-3); }
.dm-res { font: 500 11.5px var(--code); white-space: nowrap; color: var(--ink-3); }
.dm-step.good .dm-res { color: var(--oiii); }
.dm-step.warn .dm-res { color: var(--sii); }
.dm-step.err { color: var(--ink-3); }
.dm-step.err .dm-ic svg.i, .dm-step.err .dm-res { color: var(--ha); }

.dm-reply { font-size: 13.5px; line-height: 1.65; }
.dm-reply code { font-size: 12px; padding: 1px 5px; border-radius: 5px; background: rgba(255, 255, 255, 0.07); }
.dm-meta { margin-top: -6px; font-size: 11.5px; color: var(--ink-3); }
.dm-working { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-3); }
.dm-working i { width: 6px; height: 6px; border-radius: 50%; background: var(--oiii); animation: dm-pulse 1s ease-in-out infinite; }
.dm-working i:nth-child(2) { animation-delay: 0.15s; }
.dm-working i:nth-child(3) { animation-delay: 0.3s; margin-right: 4px; }

.dm-composer {
  position: absolute; left: 50%; bottom: 18px; z-index: 3; width: 600px; transform: translateX(-50%);
  padding: 12px 10px 10px 16px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)), rgba(13, 17, 46, 0.58);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 20px 50px -20px rgba(0, 2, 12, 0.9);
}
.dm-input { min-height: 38px; font-size: 13.5px; }
.dm-ph { color: var(--ink-3); }
.dm.is-typing .dm-ph { display: none; }
.dm.is-typing [data-typed]::after { content: ""; display: inline-block; width: 1.5px; height: 15px; margin-left: 1px; vertical-align: -3px; background: var(--oiii); animation: dm-blink 0.9s steps(1) infinite; }
.dm-tools { display: flex; align-items: center; gap: 6px; }
.dm-tb { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--rim); color: var(--ink-2); }
.dm-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--rim); font-size: 12.5px; color: var(--ink-2); }
.dm-pill svg.i { width: 14px; height: 14px; }
.dm-pill.on { color: var(--oiii); border-color: rgba(94, 227, 245, 0.32); background: rgba(94, 227, 245, 0.08); }
.dm-model { margin-left: auto; padding-right: 6px; font-size: 12.5px; color: var(--ink-2); }
.dm-model span { color: var(--ink-3); }
.dm-send { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--ink-3); background: rgba(255, 255, 255, 0.08); transition: background 0.2s, color 0.2s; }
.dm.is-typing .dm-send { color: var(--oiii-ink); background: var(--oiii); }

/* Narrow: no rail, the sidebar slides over */
.dm.is-narrow .dm-body { grid-template-columns: minmax(0, 1fr); }
.dm.is-narrow .dm-rail, .dm.is-narrow .dm-win, .dm.is-narrow .dm-uefn span, .dm.is-narrow .dm-model { display: none; }
.dm.is-narrow .dm-side { position: absolute; z-index: 6; top: 0; bottom: 0; left: 0; width: 268px; border-radius: 0 14px 0 0; transform: translateX(-102%); transition: transform 0.35s var(--ease); box-shadow: 24px 0 40px -24px rgba(0, 0, 0, 0.9); }
.dm.is-narrow.side-open .dm-side { transform: none; }
.dm.is-narrow .dm-main::after { content: ""; position: absolute; inset: 0; z-index: 4; background: rgba(3, 5, 18, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.dm.is-narrow.side-open .dm-main::after { opacity: 1; pointer-events: auto; }
.dm.is-narrow .dm-tab { max-width: 210px; }
.dm.is-narrow .dm-cards { width: 480px; }
.dm.is-narrow .dm-composer { width: 520px; }

@keyframes dm-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes dm-spin { to { transform: rotate(360deg); } }
@keyframes dm-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes dm-blink { 50% { opacity: 0; } }
@keyframes dm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes dm-tick { 30% { color: var(--oiii); transform: translateY(-1px); } }
.dm.is-away *, .dm.is-away *::before, .dm.is-away *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .shot { transform: none; transition: none; }
  .dm *, .dm *::before, .dm *::after { animation: none !important; transition: none !important; }
}

/* ---------- How it works ---------- */

/* ---------- Feature grid ---------- */

.t-cyan { background: linear-gradient(140deg, rgba(94, 227, 245, 0.36), rgba(60, 120, 255, 0.16)); color: #a6f5ff; }
.t-violet { background: linear-gradient(140deg, rgba(170, 130, 255, 0.38), rgba(90, 90, 255, 0.14)); color: #d6c8ff; }
.t-gold { background: linear-gradient(140deg, rgba(243, 185, 95, 0.36), rgba(255, 120, 80, 0.12)); color: #ffd99f; }
.t-rose { background: linear-gradient(140deg, rgba(255, 98, 131, 0.34), rgba(200, 80, 255, 0.12)); color: #ffb3c4; }

/* ---------- Needs + FAQ ---------- */

.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 2px; cursor: pointer; font-size: 16.5px; font-weight: 580; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { color: var(--ink-3); transition: transform 0.18s var(--ease); }
.faq details[open] summary svg { transform: rotate(45deg); color: var(--oiii); }
.faq details p { margin: -6px 0 20px; max-width: 64ch; font-size: 15px; color: var(--ink-2); line-height: 1.65; }

/* ---------- Sound switch (footer) ----------
   On by default, remembered in localStorage. The knob springs across. */
.sound-switch {
  display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 4px; border: 0; background: none;
  font-size: 14px; color: var(--ink-2); cursor: pointer;
}
.sound-switch:hover { color: var(--ink); }
.sw {
  position: relative; width: 34px; height: 20px; border-radius: 99px; flex: none;
  background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: background-color 0.25s, box-shadow 0.25s;
}
.sw i {
  position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #c9cee8;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: translate 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), scale 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.25s;
}
.sound-switch:active .sw i { scale: 1.18 0.9; }
.sound-switch[aria-checked="true"] .sw { background: linear-gradient(90deg, #5ee3f5, #6f8dff); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 14px -2px rgba(94, 227, 245, 0.6); }
.sound-switch[aria-checked="true"] .sw i { translate: 14px 0; background: #fff; }
@media (prefers-reduced-motion: reduce) { .sw, .sw i { transition: none; } }

/* ---------- Footer ---------- */
.footer { margin-top: 120px; border-top: 1px solid rgba(255, 255, 255, 0.07); background: linear-gradient(180deg, rgba(5, 8, 23, 0), rgba(11, 12, 28, 0.6)); }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; padding-top: 34px; padding-bottom: 34px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-left: auto; }
.footer-links a { color: var(--ink-2); font-size: 14px; }
.footer-links a:hover { color: var(--ink); }
.footer-note { width: 100%; margin: 0; order: 9; font-size: 12.5px; color: var(--ink-3); }

/* ---------- Pricing ---------- */

/* Example run: one message, many steps */

/* =========================================================================
   Shard bar component
   One component for the website and the desktop app's sidebar card. The
   same block sits in website/public/assets/site.css and in
   mockups/css/nebula.css: change both together.
   Full width is the plan size. --fill (0 to 1) and data-tone (ok, low, out,
   none) are set by script: Nebula.shardBar() here, paintShards() in the app.
   Needs only --ink, --ink-2, --ink-3, --sii, --ha and --ha-line.

   The look: light poured into a machined channel. The gradient is laid
   across the whole track, so the fill uncovers cyan, then blue, then violet
   as it grows. A sheen sits on top like a liquid's surface, the leading edge
   glows (the flare on the track), and a glint runs across now and then.
   --fill is a registered number, so the fill and the flare glide together.
   ========================================================================= */
@property --fill { syntax: "<number>"; inherits: true; initial-value: 0; }
.shardbar {
  --fill: 0;
  --sb-light: linear-gradient(90deg, #8ff4ff 0%, #5fb4ff 38%, #6f8dff 62%, #b08aff 100%);
  --sb-glow: 110, 190, 255;
  --sb-h: 8px;
  display: grid; gap: 12px;
  transition: --fill 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.sb-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sb-ico { align-self: center; width: auto; height: 16px; margin-right: -5px; filter: drop-shadow(0 0 6px rgba(110, 190, 255, 0.55)); }
.shard-ico { display: inline-block; width: auto; height: 1em; margin-right: 0.32em; vertical-align: -0.14em; filter: drop-shadow(0 0 5px rgba(110, 190, 255, 0.55)); }
.sb-num { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--ink); }
.sb-unit { font-size: 13px; color: var(--ink-2); }
.sb-of { margin-left: auto; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* The channel: recessed, with a lit lower lip */
.sb-track {
  display: block; position: relative; height: var(--sb-h); border-radius: 99px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(255, 255, 255, 0.035)), rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.65), inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 1px 0 rgba(255, 255, 255, 0.07);
}
/* The light. Surface sheen over the gradient, a shade along the bottom */
.sb-fill {
  position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--fill) * 100%); max-width: 100%; min-width: 0;
  border-radius: inherit; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.12) 42%, rgba(255, 255, 255, 0) 58%, rgba(0, 10, 40, 0.18)),
    var(--sb-light);
  background-size: 100% 100%, calc(100% / max(var(--fill), 0.01)) 100%;
  box-shadow: 0 0 10px -1px rgba(var(--sb-glow), 0.6), 0 0 2px rgba(var(--sb-glow), 0.5);
}
/* A slow glint across the fill (transform only, so it stays cheap) */
.sb-fill::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55) 50%, transparent);
  transform: translateX(-120%) skewX(-24deg);
  animation: sb-glint 7s cubic-bezier(0.45, 0, 0.2, 1) infinite 1.4s;
}
@keyframes sb-glint { 0% { transform: translateX(-120%) skewX(-24deg); } 22%, 100% { transform: translateX(330%) skewX(-24deg); } }
/* The meniscus: the brightest light sits at the leading edge */
.sb-fill::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: calc(var(--sb-h) * 2.5);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(235, 252, 255, 0.75));
  border-radius: inherit;
}
/* The flare: light spilling from the leading edge into the empty channel */
.sb-track::after {
  content: ""; position: absolute; top: 50%; left: calc(min(var(--fill), 1) * 100%);
  width: calc(var(--sb-h) * 4); height: calc(var(--sb-h) * 4); translate: -50% -50%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--sb-glow), 0.5), rgba(var(--sb-glow), 0.12) 55%, transparent);
}
.sb-foot { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-2); }
.sb-foot .sb-note { font-variant-numeric: tabular-nums; }
/* Low: the light turns to amber. Out: the channel is empty and rimmed rose */
.shardbar[data-tone="low"] { --sb-light: linear-gradient(90deg, #ffe7b5 0%, #f6c06a 45%, #ff9a5c 100%); --sb-glow: 243, 185, 95; }
.shardbar[data-tone="low"] .sb-num { color: var(--sii); }
.shardbar[data-tone="out"] .sb-track { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.65), inset 0 0 0 1px var(--ha-line), 0 0 14px -4px rgba(255, 98, 131, 0.5); }
.shardbar[data-tone="out"] .sb-num { color: var(--ha); }
.shardbar[data-tone="none"] .sb-num { color: var(--ink-2); }
.shardbar[data-tone="out"] .sb-fill, .shardbar[data-tone="none"] .sb-fill,
.shardbar[data-tone="out"] .sb-track::after, .shardbar[data-tone="none"] .sb-track::after { display: none; }
/* Large: the website dashboard. Hairline quarter marks, like an instrument */
.shardbar-lg { --sb-h: 12px; gap: 18px; }
.shardbar-lg .sb-ico { height: clamp(36px, 4.2vw, 50px); margin-right: -2px; filter: drop-shadow(0 0 14px rgba(110, 190, 255, 0.6)); }
.shardbar-lg .sb-num { font-size: clamp(44px, 5.4vw, 64px); font-weight: 560; font-stretch: 118%; letter-spacing: -0.045em; line-height: 0.95; }
.shardbar-lg .sb-unit { font-size: 16px; }
.shardbar-lg .sb-of { font-size: 15px; }
.shardbar-lg .sb-track {
  background:
    linear-gradient(90deg, transparent calc(25% - 0.5px), rgba(255, 255, 255, 0.09) 0 calc(25% + 0.5px), transparent 0 calc(50% - 0.5px), rgba(255, 255, 255, 0.09) 0 calc(50% + 0.5px), transparent 0 calc(75% - 0.5px), rgba(255, 255, 255, 0.09) 0 calc(75% + 0.5px), transparent 0),
    linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(255, 255, 255, 0.035)), rgba(255, 255, 255, 0.03);
}
.shardbar-lg .sb-fill { box-shadow: 0 0 18px -2px rgba(var(--sb-glow), 0.6), 0 0 3px rgba(var(--sb-glow), 0.5); }
.shardbar-lg .sb-foot { font-size: 14px; }
/* Small: the app's sidebar card */
.shardbar-sm { --sb-h: 6px; gap: 8px; }
.shardbar-sm .sb-foot { font-size: 11.5px; }
@media (prefers-reduced-motion: reduce) { .sb-fill::before { animation: none; display: none; } .shardbar { transition: none; } }
/* End of the shard bar component */
.sb-foot .sb-aside { margin-left: auto; color: var(--ink-3); }

/* ---------- Dashboard ----------
   The shard meter is the page's one lit object (and the sign-in card, when
   signed out). Everything else sits on space or in hairline panels. */
.dash { position: relative; padding: clamp(40px, 7vh, 72px) 0 0; }
.dash-x { display: grid; gap: 28px; max-width: 1080px; margin: 0 auto; }
.dash-head { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 22px; padding-bottom: 6px; }
.dash-who { min-width: 0; }
.dash-who h1 { margin: 0; font-size: clamp(32px, 4vw, 48px); line-height: 1; font-weight: 560; font-stretch: 120%; letter-spacing: -0.04em; overflow-wrap: anywhere; }
.dash-who p { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 0; font-size: 14px; color: var(--ink-2); }
.dash-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }

/* Lit surface: the meter and the sign-in card */
.meter-x, .signin-card {
  position: relative; border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015) 40%), rgba(10, 13, 38, 0.62);
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 6px rgba(0, 2, 12, 0.4), 0 40px 80px -30px rgba(0, 2, 12, 0.9), 0 60px 120px -50px rgba(40, 100, 255, 0.45);
}
.meter-x::before, .signin-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.1) 18%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.05)),
    linear-gradient(90deg, rgba(110, 235, 255, 0.5), rgba(255, 255, 255, 0.08) 35%, rgba(255, 255, 255, 0.08) 65%, rgba(176, 138, 255, 0.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.meter-x { padding: 28px 34px 26px; }
.meter-label { display: flex; justify-content: space-between; width: 100%; margin-bottom: 24px; }
.meter-label a { font: 500 13.5px var(--font); }
.unmetered b {
  display: block; font-size: clamp(44px, 5.4vw, 64px); font-weight: 560; font-stretch: 120%; letter-spacing: -0.045em; line-height: 0.95;
  background: var(--brand-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.unmetered span { display: block; margin-top: 12px; font-size: 15px; color: var(--ink-2); }
/* Readouts: what the number means, in three instruments */
.readouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 26px -34px 0; padding: 0 34px; border-top: 1px solid var(--line); }
.readouts > div { padding: 20px 20px 2px 0; min-width: 0; }
.readouts > div + div { padding-left: 24px; box-shadow: inset 1px 0 0 var(--line); }
.readouts dt { font: 500 12.5px var(--code); color: var(--ink-3); }
.readouts dd { margin: 8px 0 0; }
.readouts dd b { display: block; font-size: 30px; font-weight: 540; font-stretch: 115%; letter-spacing: -0.03em; line-height: 1.05; }
.readouts dd > span { display: block; margin-top: 5px; font-size: 13.5px; color: var(--ink-3); }
.runway { display: flex; align-items: center; gap: 9px; margin: 20px 0 0; font-size: 14px; color: var(--ink-2); }
.runway svg { flex: none; }
.runway .runway-ok { color: var(--oiii); }
.runway .runway-warn { display: none; color: var(--sii); }
.runway[data-tone="warn"] { color: #ffd9a0; }
.runway[data-tone="warn"] .runway-ok { display: none; }
.runway[data-tone="warn"] .runway-warn { display: inline; }

/* Banners: hairline panels with a tinted rim, one per state */
.banner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding: 20px 22px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line-2); }
.banner-i { flex: none; width: 22px; height: 22px; color: var(--oiii); }
.banner h2 { margin: 0; font-size: 17px; font-weight: 640; }
.banner p { margin: 3px 0 0; font-size: 14.5px; color: var(--ink-2); }
.banner-text { flex: 1 1 260px; min-width: 0; }
.banner .banner-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.banner .mini-plans { flex-basis: 100%; margin-top: 6px; }
.banner .mini-packs { flex-basis: 100%; margin-top: 4px; }
.banner .mini-packs p { margin: 0 0 10px; font: 12.5px var(--code); color: var(--ink-3); }
.banner-error { background: linear-gradient(160deg, rgba(255, 98, 131, 0.1), rgba(255, 98, 131, 0.01) 60%); box-shadow: inset 0 0 0 1px rgba(255, 98, 131, 0.34); }
.banner-error .banner-i { color: var(--ha); }
.banner-cyan { background: linear-gradient(160deg, rgba(94, 227, 245, 0.1), rgba(94, 227, 245, 0.01) 60%); box-shadow: inset 0 0 0 1px var(--oiii-line); }
.upsell { background: linear-gradient(160deg, rgba(243, 185, 95, 0.12), rgba(243, 185, 95, 0.01) 60%); box-shadow: inset 0 0 0 1px var(--sii-line); }
.upsell .banner-i { color: var(--sii); }
body[data-state="out"] .upsell { background: linear-gradient(160deg, rgba(255, 98, 131, 0.12), rgba(255, 98, 131, 0.01) 60%); box-shadow: inset 0 0 0 1px var(--ha-line); }
body[data-state="out"] .upsell .banner-i { color: var(--ha); }

.mini-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.mini-plan { display: grid; gap: 4px; padding: 18px; border-radius: 14px; color: var(--ink); text-decoration: none; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 0.15s, background-color 0.15s, transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1); }
.mini-plan:hover { text-decoration: none; background: rgba(94, 227, 245, 0.06); box-shadow: inset 0 0 0 1px var(--oiii-line); }
.mini-plan:active { transform: scale(0.98); }
.mini-plan b { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 640; }
.mini-plan .pill { margin-left: auto; height: 22px; font-size: 11.5px; }
.mini-plan > span { font-size: 13.5px; color: var(--ink-2); }
.mini-plan .mono { color: var(--ink); }
.mini-plan.is-rec { box-shadow: inset 0 0 0 1px var(--oiii-line); }

/* Usage chart + plan, side by side */
.dash-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 28px; align-items: start; }
.dash-split:not(:has(.usage:not([hidden]))) { grid-template-columns: minmax(0, 1fr); }
.usage, .plan-x, .bonus-x { padding: 24px 26px; border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)); box-shadow: inset 0 0 0 1px var(--line-2); }
.usage h2, .plan-x h2, .bonus-x h2 { margin: 0; font-size: 16px; font-weight: 620; }
.usage-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.usage-head p { margin: 0; font-size: 13.5px; color: var(--ink-3); }
.chart { margin-top: 26px; }
.ch-plot { position: relative; height: 180px; margin-left: 46px; }
.ch-grid { position: absolute; left: 0; right: 0; bottom: calc(var(--y) * 100%); height: 1px; background: rgba(255, 255, 255, 0.07); }
.ch-grid span { position: absolute; right: calc(100% + 10px); top: -8px; font: 11.5px var(--code); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch-bars { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); align-items: end; }
.ch-bar { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 100%; outline: none; }
.ch-bar i {
  display: block; width: 56%; max-width: 26px; min-height: 2px; height: calc(var(--v) * 100%); border-radius: 4px 4px 1px 1px;
  background: rgba(120, 196, 255, 0.5);
  transition: background-color 0.15s, height 0.8s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0ms);
}
.chart:not(.is-drawn) .ch-bar i { height: 2px; }
.ch-bar.is-hot i { background: rgba(160, 242, 255, 0.95); }
.ch-bar.is-today i { background: linear-gradient(180deg, #b4f7ff, #5b9dff); box-shadow: 0 0 16px -2px rgba(94, 190, 255, 0.65); }
.ch-bar:focus-visible::after { content: ""; position: absolute; inset: -4px 2px; border-radius: 8px; outline: 2px solid var(--oiii); }
.ch-avg { position: absolute; left: 0; right: 0; bottom: calc(var(--y) * 100%); height: 1px; background: rgba(233, 235, 248, 0.42); pointer-events: none; }
.ch-avg span { position: absolute; right: 0; bottom: 5px; padding: 1px 7px; border-radius: 6px; font: 11.5px var(--code); color: var(--ink-2); background: rgba(5, 8, 23, 0.85); }
.ch-tip {
  position: absolute; z-index: 2; left: var(--x); bottom: calc(var(--y) * 100% + 12px); translate: -50% 0;
  display: grid; gap: 1px; padding: 7px 11px; border-radius: 10px; white-space: nowrap; pointer-events: none;
  background: rgba(14, 17, 44, 0.96); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 12px 26px -10px rgba(0, 0, 0, 0.85);
}
.ch-tip b { font-size: 13px; font-weight: 640; }
.ch-tip span { font-size: 12px; color: var(--ink-3); }
.ch-x { position: relative; height: 20px; margin: 10px 0 0 46px; }
.ch-x span { position: absolute; left: var(--x); translate: -50% 0; font: 11.5px var(--code); color: var(--ink-3); white-space: nowrap; }
.ch-x span:last-child { color: var(--ink-2); }
.chart-table { margin-top: 12px; }
.chart-table summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.chart-table summary::-webkit-details-marker { display: none; }
.chart-table summary svg { transition: rotate 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.chart-table[open] summary svg { rotate: 180deg; }
.chart-table table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 13.5px; }
.chart-table th { padding: 6px 0; text-align: left; font: 500 12px var(--code); color: var(--ink-3); border-bottom: 1px solid var(--line); }
.chart-table td { padding: 7px 0; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.chart-table :is(th, td):last-child { text-align: right; font-variant-numeric: tabular-nums; }

.plan-x-name { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 18px 0 0; }
.plan-x-name b { font-size: 26px; font-weight: 580; font-stretch: 115%; letter-spacing: -0.03em; }
.plan-x-name span { font-size: 14px; color: var(--ink-2); }
.plan-x-line { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.plan-x-acts { display: grid; gap: 10px; margin-top: 22px; }
.plan-x-acts:not(:has(> :not([hidden]))) { display: none; }

/* Bonus shards: a hairline checklist */
.bonus-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding-bottom: 8px; }
.bonus-head p { margin: 0; font-size: 13.5px; color: var(--ink-3); }
.check { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.check-box { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--ink-3); color: transparent; transition: background-color 0.3s, border-color 0.3s; }
.check-box svg { width: 14px; height: 14px; stroke-width: 2.6; }
.check[data-done="true"] .check-box { border-color: transparent; background: var(--oiii); color: var(--oiii-ink); box-shadow: 0 0 12px -2px rgba(94, 227, 245, 0.6); }
.check-text { flex: 1 1 0; min-width: 0; }
.check-text b { display: block; font-size: 15px; font-weight: 600; }
.check-text > span { display: block; font-size: 13.5px; color: var(--ink-2); }
.check-end { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.check[data-done="true"] .check-act { display: none; }
.check[data-done="false"] .check-done { display: none; }
.check-done { font-size: 13px; font-weight: 560; color: var(--oiii); }

/* Signed out */
.signin-card { max-width: 480px; margin: 40px auto 0; padding: 46px 40px 38px; text-align: center; }
.signin-card img { width: 84px; margin: 0 auto; filter: drop-shadow(0 0 24px rgba(70, 150, 255, 0.55)); }
.signin-card h1 { margin: 22px 0 0; font-size: 32px; font-weight: 560; font-stretch: 120%; letter-spacing: -0.035em; line-height: 1.1; }
.signin-card p { margin: 10px 0 0; color: var(--ink-2); }
.signin-card .btn { margin-top: 28px; }
.signin-card .small { margin-top: 18px; font-size: 13.5px; }
.signin-card .signin-error { margin: 16px 0 0; padding: 10px 14px; border-radius: 12px; font-size: 14px; color: #ffc2cf; background: var(--ha-soft); box-shadow: inset 0 0 0 1px var(--ha-line); }

@media (max-width: 900px) {
  .dash-split { grid-template-columns: minmax(0, 1fr); }
  .dash-acts { margin-left: 0; width: 100%; }
}
@media (max-width: 560px) {
  .meter-x { padding: 24px 20px 22px; }
  .readouts { grid-template-columns: minmax(0, 1fr); margin: 22px -20px 0; padding: 0 20px; }
  .readouts > div { padding: 16px 0 14px; }
  .readouts > div + div { padding-left: 0; box-shadow: inset 0 1px 0 var(--line); }
  .usage, .plan-x, .bonus-x { padding: 20px 18px; }
  .ch-plot, .ch-x { margin-left: 38px; }
  .dash-acts .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .ch-bar i { transition: none; } }

/* Nothing account-specific shows until the account is known */
body[data-page="dashboard"]:not([data-state]) [data-show],
body[data-state="loading"] [data-show] { display: none; }

/* Preview switcher: only with ?state= in the URL */
.preview { position: fixed; right: 16px; bottom: 16px; z-index: 90; font-size: 13px; }
.preview > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 99px;
  font-weight: 650; color: #ffd58f; border: 1px solid rgba(243, 185, 95, 0.55);
  background: linear-gradient(180deg, rgba(255, 214, 140, 0.24), rgba(243, 185, 95, 0.1)), rgba(20, 16, 10, 0.75);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.3), 0 8px 24px -8px rgba(243, 185, 95, 0.55);
}
.preview > summary::-webkit-details-marker { display: none; }
.preview-menu { position: absolute; right: 0; bottom: 48px; width: 230px; padding: 8px; border-radius: 16px; border: 1px solid rgba(243, 185, 95, 0.35); background: rgba(14, 15, 34, 0.92); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: var(--shadow); }
.preview-menu p { margin: 4px 8px 6px; font-size: 11.5px; color: var(--ink-3); }
.preview-menu a { display: block; padding: 7px 10px; border-radius: 9px; color: var(--ink-2); }
.preview-menu a:hover, .preview-menu a[aria-current="true"] { background: rgba(255, 255, 255, 0.07); color: var(--ink); text-decoration: none; }

/* ---------- Goodbye + 404 ---------- */
.solo { min-height: 100vh; display: grid; place-items: center; padding: 40px var(--gutter); }
.solo-card { width: 100%; max-width: 460px; padding: 40px 36px 34px; text-align: center; }
.solo-card img { width: 64px; margin: 0 auto; filter: drop-shadow(0 0 20px rgba(70, 150, 255, 0.5)); }
.solo-card h1 { margin: 20px 0 0; font-size: 28px; font-weight: 580; font-stretch: 118%; letter-spacing: -0.025em; line-height: 1.15; }
.solo-card form { display: grid; gap: 12px; margin-top: 26px; text-align: left; }
.solo-card label { font-size: 14px; font-weight: 560; color: var(--ink-2); }
.select-wrap { position: relative; }
.select-wrap svg { position: absolute; right: 14px; top: 50%; margin-top: -9px; color: var(--ink-3); pointer-events: none; }
select.field {
  -webkit-appearance: none; appearance: none; width: 100%; height: 48px; padding: 0 44px 0 16px; border-radius: 12px;
  border: 1px solid var(--rim-2); background: rgba(2, 4, 16, 0.5); color: var(--ink); font-size: 15px; cursor: pointer;
}
select.field:focus { outline: none; border-color: var(--oiii-line); box-shadow: 0 0 0 4px var(--oiii-soft); }
select.field option { background: #10132c; color: var(--ink); }
.solo-card .thanks { margin: 22px 0 0; font-size: 16px; color: var(--ink-2); }

/* =========================================================================
   Home sections. One idea per screen, three surface levels:
   1. type and media straight on space (most of the page),
   2. lit panels for one grouped fact (the Mastery card),
   3. the app itself, the only lit object.
   ========================================================================= */
.wrap-wide { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 var(--gutter); }
/* Small mono label that names a section. Sentence case, never a shout */
.label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 500 12.5px/1.4 var(--code); color: var(--oiii); }
.label svg.i { width: 15px; height: 15px; }
.h-display { margin: 0; font-size: clamp(44px, 7.2vw, 104px); line-height: 0.92; font-weight: 520; font-stretch: 125%; letter-spacing: -0.05em; text-wrap: balance; }
.h-display .ln { display: block; overflow: hidden; padding: 0 0.06em 0.14em 0.02em; margin: 0 -0.06em -0.14em -0.02em; }
.h-display .ln > span { display: block; }
.h-one .ln > span { white-space: nowrap; }
.signout-form { display: contents; } /* sign-out is a POST (server: /auth/logout); the button sits in the row like the links */ /* pricing: "Try it free." stays one line */
.h-section { margin: 16px 0 0; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; font-weight: 540; font-stretch: 118%; letter-spacing: -0.035em; text-wrap: balance; }

/* Arrivals, played once when scrolled to (site.js adds .is-in).
   Headings rise out of their line masks like the hero; media opens like a
   shutter. Without JS everything is simply there. */
.js [data-rise] .ln > span { transform: translateY(108%); transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
.js [data-rise] .ln + .ln > span { transition-delay: 0.05s; }
.js [data-rise].is-in .ln > span { transform: none; }

/* ---------- 1. Built: the reel ----------
   Three silent clips on a curve. The front one plays; the others turn away,
   dim, and hold the frame they stopped on. site.js sets data-pos (front,
   left, right) and the tilt (--rx, --sc), like the hero frame.
   The cards don't share a 3D space (no preserve-3d): they'd cut through
   each other mid-turn. Each is projected on its own and stacked by z-index,
   which swaps 0.07s in, when the moving pair is halfway (the ease is
   front-loaded). The card crossing sides drops behind at once. */
.built { position: relative; padding: clamp(120px, 16vh, 180px) 0 0; }
.built-head { text-align: center; }
.built-note { margin: 22px auto 0; max-width: 42ch; font-size: 17px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.reel { --fw: min(860px, 60vw); position: relative; isolation: isolate; margin-top: clamp(56px, 8vh, 88px); }
.reel-glow {
  position: absolute; z-index: -1; left: 50%; top: -14%; width: min(1500px, 140%); height: 92%; translate: -50% 0; pointer-events: none; opacity: 0.75;
  background:
    radial-gradient(40% 46% at 30% 50%, rgba(94, 227, 245, 0.3), transparent 70%),
    radial-gradient(40% 46% at 70% 50%, rgba(150, 110, 255, 0.36), transparent 70%),
    radial-gradient(30% 30% at 50% 10%, rgba(150, 225, 255, 0.35), transparent 70%);
  filter: blur(50px);
}
.reel-stage {
  --rx: 0deg; --sc: 1;
  position: relative; width: var(--fw); aspect-ratio: 16 / 9; margin: 0 auto;
  perspective: 2200px; touch-action: pan-y;
  transform: perspective(2400px) rotateX(var(--rx)) scale(var(--sc));
}
.reel-card {
  position: absolute; inset: 0; margin: 0; border-radius: 18px; overflow: hidden; cursor: pointer; background: var(--space);
  box-shadow: 0 30px 60px -24px rgba(0, 2, 12, 0.9), 0 80px 140px -50px rgba(8, 16, 70, 0.85);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), z-index 0s 0.07s;
}
.reel-card video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The shade that dims the cards at the sides, and a lit rim */
.reel-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-color: rgba(4, 6, 20, 0.62);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: background-color 0.8s ease, box-shadow 0.8s ease;
}
.reel-card[data-pos="front"] { z-index: 3; cursor: default; transform: translate3d(0, 0, 0) rotateY(0deg); }
.reel-card[data-pos="front"]::after { background-color: rgba(4, 6, 20, 0); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1.5px 0 rgba(255, 255, 255, 0.42); }
.reel-card[data-pos="left"], .reel-card[data-pos="right"] { z-index: 2; }
.reel-card[data-pos="left"] { transform: translate3d(-56%, 0, -300px) rotateY(-30deg); }
.reel-card[data-pos="right"] { transform: translate3d(56%, 0, -300px) rotateY(30deg); }
/* The card crossing from one side to the other passes behind both */
.reel-card.is-wrap { z-index: 1; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.reel-card:not([data-pos="front"]):hover::after { background-color: rgba(4, 6, 20, 0.42); }

.reel-bar { display: flex; align-items: center; justify-content: center; margin-top: 34px; }
/* The cards' shadows fall past the stage, which stacks above plain content */
.reel-cap { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; text-align: center; }
.reel-cap b { font-size: clamp(20px, 1.9vw, 26px); font-weight: 580; font-stretch: 112%; letter-spacing: -0.02em; }
.reel-cap span { font: 13px var(--code); color: var(--ink-3); }
/* The buttons sit on either side of the front clip, over the dimmed ones */
.reel-nav {
  position: absolute; z-index: 5; top: calc(var(--fw) * 0.28125 - 30px);
  display: grid; place-items: center; width: 60px; height: 60px; padding: 0; border: 0; border-radius: 50%; color: var(--ink); cursor: pointer;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 60%), rgba(10, 13, 36, 0.5);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 14px 30px -10px rgba(0, 2, 12, 0.9);
  transition: box-shadow 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.reel-nav:first-child { left: calc(50% - var(--fw) / 2 - 106px); }
.reel-nav:last-child { right: calc(50% - var(--fw) / 2 - 106px); }
.reel-nav svg.i { width: 22px; height: 22px; transition: translate 0.2s ease; }
.reel-nav:hover { color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 0 0 1px rgba(143, 244, 255, 0.5), 0 0 0 6px rgba(94, 227, 245, 0.08), 0 0 36px -4px rgba(94, 227, 245, 0.55), 0 14px 30px -10px rgba(0, 2, 12, 0.9); }
.reel-nav:first-child:hover svg.i { translate: -2px 0; }
.reel-nav:last-child:hover svg.i { translate: 2px 0; }
.reel-nav:active { transform: scale(0.96); }
/* One mark per clip. The current one is longer and fills as its clip plays (--t) */
.reel-dots { position: relative; z-index: 1; display: flex; justify-content: center; margin-top: 14px; }
.reel-dots button { display: grid; place-items: center; height: 32px; padding: 0 5px; border: 0; background: none; cursor: pointer; }
.reel-dots i { position: relative; display: block; width: 26px; height: 3px; border-radius: 99px; overflow: hidden; background: rgba(255, 255, 255, 0.16); transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s; }
.reel-dots button:hover i { background: rgba(255, 255, 255, 0.3); }
.reel-dots [aria-current="true"] i { width: 46px; }
.reel-dots i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--brand); transform-origin: 0 50%; transform: scaleX(var(--t, 0)); }
@media (prefers-reduced-motion: reduce) {
  .reel-card, .reel-card::after, .reel-dots i { transition: none; }
  .reel-dots [aria-current="true"] i::after { transform: none; }
}

/* ---------- 2. How it works: the pinned steps ----------
   .story-track is tall; .story-view sticks to the screen inside it for the
   whole run. demo.js reads how far through the run the page is: each step
   owns an equal stretch, the current one shows (.is-on) and the marks fill.
   The swap is time-based and eased, so scrolling stays the browser's own.
   Without JS the steps are a plain list beside the app. */
.story { position: relative; padding: clamp(150px, 20vh, 220px) 0 0; }
.story-head { margin-bottom: clamp(24px, 6vh, 64px); }
.story-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 88px); align-items: center; }
.story-steps { grid-column: 1; grid-row: 1; }
.story-pin { grid-column: 2; grid-row: 1; }
.steps-x { list-style: none; margin: 0; padding: 0; display: grid; gap: 56px; }
.sx { display: flex; flex-direction: column; }
.story-marks { display: none; }
.js .story-track { --steps: 4; height: calc(100svh + var(--steps) * 64svh); }
.js .story-view { position: sticky; top: 0; height: 100svh; padding-top: 68px; display: grid; align-items: center; }
@media (min-width: 901px) { .js .story-track { margin-top: -16svh; } }
.js .steps-x { gap: 0; }
/* All steps share one cell, so the column holds still. A step leaves the
   way the page went (up going down, down going back), then the next one
   arrives from the other side: no overlap, slow-fast-slow. */
.js .sx { grid-area: 1 / 1; opacity: 0; translate: 0 28px; pointer-events: none; transition: opacity 0.26s ease-in, translate 0.3s cubic-bezier(0.55, 0, 0.75, 0.25); }
.js .sx.is-past { translate: 0 -28px; }
.js .sx.is-on { opacity: 1; translate: none; pointer-events: auto; transition: opacity 0.5s ease-out 0.26s, translate 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.26s; }
/* One mark per step: done ones full, the current one fills as you scroll */
.js .story-marks { display: flex; gap: 6px; margin: 0 0 34px -5px; }
.story-marks button { display: grid; place-items: center; height: 28px; padding: 0 5px; border: 0; background: none; cursor: pointer; }
.story-marks i { position: relative; display: block; width: 34px; height: 3px; border-radius: 99px; overflow: hidden; background: rgba(255, 255, 255, 0.14); transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s; }
.story-marks button:hover i { background: rgba(255, 255, 255, 0.28); }
.story-marks [aria-current="true"] i { width: 56px; }
.story-marks i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--brand); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.sx-n { font: 500 13px var(--code); color: var(--oiii); }
.sx h3 { margin: 12px 0 0; font-size: clamp(28px, 2.6vw, 36px); line-height: 1.05; font-weight: 560; font-stretch: 118%; letter-spacing: -0.03em; }
.sx p { margin: 14px 0 0; max-width: 36ch; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.sx .btn { align-self: flex-start; margin-top: 24px; }

.story-stage { position: relative; }
.story-stage .shot-glow { animation: none; top: -12%; height: 124%; opacity: 0.85; }
.shot-story { transform-origin: 50% 50%; translate: 0 var(--dy, 0px); }
/* As big as the screen's height allows, under the nav */
.js .story-pin .shot { max-width: min(100%, calc((100svh - 68px - 96px) * 1.6)); margin: 0 auto; }
.shot-story .dm { pointer-events: none; }
/* The parts of the app that aren't the point of a step go quiet */
.story-stage .dm-bar, .story-stage .dm-rail, .story-stage .dm-main, .story-stage .dm-side-in > :not(.dm-shard) { transition: opacity 0.5s ease; }
.story-stage[data-stage="setup"] :is(.dm-bar, .dm-rail, .dm-main, .dm-side-in > *) { opacity: 0.22; }
.story-stage[data-stage="signin"] :is(.dm-bar, .dm-rail, .dm-main, .dm-side-in > :not(.dm-shard)) { opacity: 0.22; }
.story-stage[data-stage="signin"] .dm-shard, .story-stage.is-filling .dm-shard { border-color: rgba(94, 227, 245, 0.5); box-shadow: 0 0 0 4px rgba(94, 227, 245, 0.1), 0 0 40px -6px rgba(94, 227, 245, 0.5); }
.story-stage .dm-shard, .story-stage .dm-uefn { transition: border-color 0.4s, box-shadow 0.6s; }
.story-stage[data-stage="connect"] .dm:not(.is-offline) .dm-uefn { border-color: rgba(74, 222, 128, 0.5); box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.1), 0 0 30px -4px rgba(74, 222, 128, 0.45); }
/* Not connected yet: a grey dot */
.dm.is-offline .dm-dot { background: #6b7194; box-shadow: none; }
.dm .dm-dot { transition: background 0.3s, box-shadow 0.3s; }

/* The card that floats over the app for the first two steps (page size, so it reads) */
.story-card { position: absolute; z-index: 3; left: 50%; top: 50%; width: min(340px, 78%); translate: -50% -50%; pointer-events: none; }
.sc-pane {
  position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%;
  display: grid; justify-items: center; gap: 12px; padding: 28px 26px 24px; border-radius: 22px; text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)), rgba(9, 12, 34, 0.78);
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 70px -24px rgba(0, 2, 12, 0.95);
  opacity: 0; scale: 0.96; transition: opacity 0.3s ease-in, scale 0.3s ease-in;
}
.story-stage[data-stage="setup"] [data-pane="setup"], .story-stage[data-stage="signin"] [data-pane="signin"] {
  opacity: 1; scale: 1; transition: opacity 0.45s ease-out 0.1s, scale 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}
.sc-pane > b { font-size: 18px; font-weight: 620; font-stretch: 110%; letter-spacing: -0.01em; }
.sc-pane img { width: 40px; height: auto; filter: drop-shadow(0 0 12px rgba(80, 150, 255, 0.6)); }
.sc-pane ul { display: grid; gap: 10px; width: 100%; margin: 6px 0 0; padding: 14px 0 0; list-style: none; text-align: left; border-top: 1px solid var(--line); }
.sc-pane li { display: flex; align-items: center; gap: 11px; font-size: 14px; color: var(--ink-2); }
.sc-pane li i {
  position: relative; display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.22); transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.sc-pane li i::after { content: ""; width: 6px; height: 3.5px; margin-top: -2px; border: solid var(--oiii-ink); border-width: 0 0 2px 2px; rotate: -45deg; opacity: 0; transition: opacity 0.2s; }
.story-stage[data-stage="setup"] .sc-pane li i { background: var(--oiii); border-color: var(--oiii); box-shadow: 0 0 12px rgba(94, 227, 245, 0.6); }
.story-stage[data-stage="setup"] .sc-pane li i::after { opacity: 1; }
.story-stage[data-stage="setup"] .sc-pane li { color: var(--ink); transition: color 0.3s; }
.story-stage[data-stage="setup"] .sc-pane li:nth-child(1), .story-stage[data-stage="setup"] .sc-pane li:nth-child(1) i, .story-stage[data-stage="setup"] .sc-pane li:nth-child(1) i::after { transition-delay: 0.5s; }
.story-stage[data-stage="setup"] .sc-pane li:nth-child(2), .story-stage[data-stage="setup"] .sc-pane li:nth-child(2) i, .story-stage[data-stage="setup"] .sc-pane li:nth-child(2) i::after { transition-delay: 1.1s; }
.story-stage[data-stage="setup"] .sc-pane li:nth-child(3), .story-stage[data-stage="setup"] .sc-pane li:nth-child(3) i, .story-stage[data-stage="setup"] .sc-pane li:nth-child(3) i::after { transition-delay: 1.7s; }
.sc-av { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid transparent; background: linear-gradient(#151a3e, #151a3e) padding-box, var(--brand) border-box; box-shadow: 0 0 24px -4px rgba(110, 170, 255, 0.6); }
.sc-gift { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px 0 11px; border-radius: 99px; font: 500 13px var(--code); color: var(--oiii); background: var(--oiii-soft); border: 1px solid var(--oiii-line); }
.sc-gift img { width: auto; height: 16px; filter: drop-shadow(0 0 5px rgba(110, 200, 255, 0.7)); }

/* Step 2 into 3: the card goes, its shards spill out and pour into the
   sidebar bar, which blips up with each one (demo.js) */
.spill { position: absolute; left: 0; top: 0; z-index: 4; width: auto; height: 27px; pointer-events: none; filter: drop-shadow(0 0 8px rgba(120, 200, 255, 0.85)); will-change: transform, opacity; }
.story-stage .dm-shard.is-blip { animation: shard-blip 0.32s ease-out; }
.story-stage .dm-shard.is-blip .sb-num { animation: dm-tick 0.32s var(--ease); }
@keyframes shard-blip { from { box-shadow: 0 0 0 5px rgba(94, 227, 245, 0.25), 0 0 54px 0 rgba(94, 227, 245, 0.85); } }

/* ---------- 3. The statement ---------- */
.statement { position: relative; padding: clamp(150px, 22vh, 240px) 0 0; }
.statement-text {
  margin: 26px 0 0; max-width: 17em; font-size: clamp(34px, 5vw, 76px); line-height: 1.04; font-weight: 520; font-stretch: 118%; letter-spacing: -0.04em; text-wrap: balance;
}
/* Words light up as the statement scrolls through the screen (site.js) */
.js .statement-text .w { color: rgba(233, 235, 248, 0.14); transition: color 0.35s ease, text-shadow 0.6s ease; }
.js .statement-text .w.on { color: var(--ink); text-shadow: 0 0 34px rgba(120, 190, 255, 0.28); }
/* Words in the gradient: the phrase holds one gradient; each word lays a
   veil of the page colour over its own letters and drops it when lit */
@property --veil { syntax: "<color>"; inherits: false; initial-value: rgba(5, 8, 23, 0); }
.js .statement-text .grad .w {
  /* padding: the letters overhang the word's box (tight tracking); the veil has to reach them */
  --veil: rgba(5, 8, 23, 0.86); color: transparent; text-shadow: none; padding: 0 0.1em; margin: 0 -0.1em;
  background: linear-gradient(var(--veil), var(--veil)); -webkit-background-clip: text; background-clip: text;
  transition: --veil 0.35s ease;
}
.js .statement-text .grad .w.on { --veil: rgba(5, 8, 23, 0); color: transparent; text-shadow: none; }

/* ---------- 4. UEFN Mastery students ---------- */
.students-x { position: relative; padding: clamp(150px, 22vh, 240px) 0 0; }
.students-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 48px clamp(48px, 7vw, 120px); align-items: center; }
.students-copy > p:not(.label) { margin: 20px 0 0; max-width: 44ch; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.students-copy .label { color: #c9b6ff; }
.students-copy .btn { margin-top: 30px; }
/* The offer card: UEFN Mastery's gold, here and nowhere else */
.perk-card {
  --gold: #e0b77e;
  display: grid; justify-items: start; gap: 10px; padding: 34px 34px 30px; border-radius: 22px;
  background: radial-gradient(120% 90% at 0% 0%, rgba(224, 183, 126, 0.14), rgba(224, 183, 126, 0.02) 60%), rgba(18, 14, 24, 0.4);
  box-shadow: inset 0 0 0 1px rgba(224, 183, 126, 0.26), inset 0 1px 0 rgba(255, 240, 214, 0.18), 0 30px 70px -30px rgba(0, 2, 12, 0.9);
}
.perk-num { display: flex; align-items: center; gap: 12px; margin: 0; }
.perk-num .shard-ico { width: auto; height: 34px; }
.perk-num b { font-size: clamp(48px, 5vw, 64px); line-height: 1; font-weight: 540; font-stretch: 118%; letter-spacing: -0.04em; color: #f6e4c4; text-shadow: 0 0 30px rgba(224, 183, 126, 0.45); }
.perk-num span { align-self: flex-end; margin-bottom: 6px; font-size: 15px; color: var(--ink-2); }
.perk-sub { margin: 0; font: 13px var(--code); color: var(--gold); }

/* ---------- 5. The download area ---------- */
.finale { position: relative; isolation: isolate; margin-top: clamp(120px, 18vh, 200px); padding: clamp(120px, 18vh, 180px) 0 clamp(120px, 16vh, 170px); text-align: center; }
.finale-sky {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("img/background.jpg") center 78% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 38%, #000 75%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 38%, #000 75%, transparent);
}
.finale-sky::after { content: ""; position: absolute; inset: 0; background: radial-gradient(46% 50% at 50% 46%, rgba(3, 5, 18, 0.72), rgba(3, 5, 18, 0.3) 70%, rgba(3, 5, 18, 0.15)); }
.finale-mark { width: 120px; height: auto; margin: 0 auto 30px; filter: drop-shadow(0 0 30px rgba(70, 150, 255, 0.6)) drop-shadow(0 0 80px rgba(150, 110, 255, 0.35)); }
.finale .h-display { font-size: clamp(48px, 8vw, 116px); }
.finale .cta-row { margin-top: 30px; }
/* The offer, said once and big enough to see */
.free-offer {
  display: inline-flex; align-items: center; gap: 12px; margin: 40px 0 0; padding: 12px 22px 12px 16px; border-radius: 99px;
  font-size: clamp(16px, 1.5vw, 19px); color: var(--ink-2);
  background: rgba(94, 227, 245, 0.08); box-shadow: inset 0 0 0 1px rgba(94, 227, 245, 0.3), 0 0 50px -10px rgba(94, 227, 245, 0.45);
}
.free-offer img { width: auto; height: 24px; filter: drop-shadow(0 0 8px rgba(110, 200, 255, 0.8)); }
.free-offer b { color: var(--ink); font-weight: 620; }
.ref-line { margin: 16px 0 0; font-size: 14.5px; color: var(--oiii); }
.finale .ref-line { margin-top: 20px; }
.more-line { margin: 10px 0 0; font-size: 14.5px; color: var(--ink-3); }
.need-line { margin: 22px auto 0; max-width: 60ch; font: 12.5px/1.6 var(--code); color: var(--ink-3); }
main:has(.finale) + .footer { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .js [data-rise] .ln > span { transform: none; transition: none; }
  .sc-pane, .sc-pane li, .sc-pane li i, .sc-pane li i::after { transition: none !important; }
  .js .sx, .js .sx.is-on, .story-marks i { transition: none; }
}

/* =========================================================================
   Pricing. One rail of plans on open space; the recommended plan is the
   only lit surface. Facts sit in hairline lists, not boxes.
   ========================================================================= */
.page-hero { position: relative; padding: clamp(64px, 11vh, 120px) 0 0; }
.page-hero .label { margin-bottom: 22px; }
/* What you need besides Nebula, right under the offer */
.req-line { display: inline-flex; align-items: center; gap: 9px; margin: 26px 0 0; padding: 8px 16px 8px 12px; border-radius: 99px; font-size: 14.5px; font-weight: 540; color: var(--ink); background: rgba(243, 185, 95, 0.06); box-shadow: inset 0 0 0 1px rgba(243, 185, 95, 0.24); }
.req-line svg.i { flex: none; width: 17px; height: 17px; color: var(--sii); }
.req-line + .page-sub { margin-top: 22px; }
.page-sub { margin: 28px 0 0; max-width: 52ch; font-size: 18px; line-height: 1.55; color: #c7cbe6; text-wrap: pretty; }

/* Free first: the offer and the download, beside every way to get free
   shards. The ledger shares the receipt's language; only the Collective
   row (where everyone starts) is lit. */
.free-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 48px clamp(40px, 6vw, 96px); align-items: center; }
.free-cta { justify-content: flex-start; }
.earn {
  margin: 0; padding: 22px 18px 20px; border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)), rgba(6, 9, 28, 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 40px 80px -30px rgba(0, 2, 12, 0.9);
}
.earn-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 10px 16px; }
.earn-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 20px; font-weight: 620; font-stretch: 112%; letter-spacing: -0.015em; }
.earn-head img { width: auto; height: 22px; filter: drop-shadow(0 0 8px rgba(110, 200, 255, 0.75)); }
.earn-head span { font: 13px var(--code); color: var(--ink-3); }
.earn-rows { list-style: none; display: grid; gap: 4px; margin: 0; padding: 0; }
.earn-rows li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 13px 12px; border-radius: 16px; }
.earn-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.earn-ico svg.i { width: 18px; height: 18px; color: var(--ink-2); }
.earn-rows b { display: block; font-size: 15.5px; font-weight: 580; color: var(--ink); }
.earn-rows small { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.4; color: var(--ink-3); text-wrap: pretty; }
.earn-rows em { font: normal 500 17px var(--code); color: var(--oiii); white-space: nowrap; }
.earn-rows .is-lit { background: linear-gradient(90deg, rgba(94, 227, 245, 0.14), rgba(94, 227, 245, 0.03)); box-shadow: inset 0 0 0 1px rgba(94, 227, 245, 0.26); }
.earn-rows .is-lit .earn-ico { background: rgba(94, 227, 245, 0.15); box-shadow: inset 0 0 0 1px rgba(94, 227, 245, 0.36); }
.earn-rows .is-lit .earn-ico svg.i { color: var(--oiii); }
.earn-rows .is-lit em { color: #eafcff; text-shadow: 0 0 18px rgba(94, 227, 245, 0.65); }
.earn-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 14px 0 0; padding: 16px 12px 0; border-top: 1px dashed rgba(255, 255, 255, 0.14); font-size: 14.5px; color: var(--ink-2); }
.earn-total b { font: 500 20px var(--code); color: var(--ink); }
@media (max-width: 600px) {
  .earn { padding: 16px 10px; }
  .earn-head { flex-wrap: wrap; row-gap: 4px; padding: 0 8px 14px; }
  .earn-head h2 { white-space: nowrap; }
  .earn-rows li { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; padding: 12px 10px; }
  .earn-ico { width: 34px; height: 34px; }
  .earn-total { padding: 14px 10px 0; }
}

.plans-x { position: relative; padding: clamp(110px, 16vh, 170px) 0 0; }
.plans-head { margin-bottom: 40px; }
.plans-head .h-section { margin: 0; }
.plans-head p { margin: 14px 0 0; max-width: 56ch; font-size: 17px; line-height: 1.6; color: var(--ink-2); }

.plan-rail { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 28px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)); }
.pl { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 38px 36px 34px; }
.pl + .pl { box-shadow: inset 1px 0 0 var(--line); }
.pl h3 { margin: 0; font-size: 22px; font-weight: 620; font-stretch: 112%; letter-spacing: -0.015em; }
.pl-for { margin: 6px 0 0; font-size: 14.5px; color: var(--ink-2); }
.pl-price { display: flex; align-items: baseline; gap: 10px; margin: 30px 0 0; }
.pl-price b { font-size: clamp(52px, 5vw, 68px); font-weight: 520; font-stretch: 120%; letter-spacing: -0.05em; line-height: 0.9; }
.pl-price span { font-size: 14px; color: var(--ink-3); }
.pl .shardbar { margin: 32px 0 0; }
.pl-shards { margin: 16px 0 0; font-size: 15px; color: var(--ink-2); }
.pl-shards b { font: 500 16px var(--code); color: var(--ink); }
.pl-jobs { margin: 4px 0 0; font-size: 14px; color: var(--ink-3); }
.pl .btn { margin-top: 32px; }
/* The recommended plan steps out of the rail with a rim of light */
.pl.is-rec {
  z-index: 1; margin: -18px 0; padding-top: 56px; padding-bottom: 52px; border-radius: 28px;
  background: linear-gradient(180deg, rgba(94, 227, 245, 0.12), rgba(94, 227, 245, 0.02) 42%, rgba(176, 138, 255, 0.05)), rgba(10, 13, 38, 0.72);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 40px 90px -30px rgba(40, 110, 255, 0.6), 0 0 70px -20px rgba(94, 200, 255, 0.35);
}
.pl.is-rec + .pl { box-shadow: none; }
.pl.is-rec::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(160deg, rgba(160, 245, 255, 0.95), rgba(94, 160, 255, 0.35) 40%, rgba(176, 138, 255, 0.7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.pl-tag { position: absolute; top: 22px; right: 24px; }
/* One-time packs: the dashboard's tiles beside one line of copy */
.packs { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 18px 48px; align-items: center; margin: 72px 0 0; }
.packs-copy h3 { margin: 0; font-size: 20px; font-weight: 620; font-stretch: 112%; letter-spacing: -0.015em; }
.packs-copy p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.mini-plan b .shard-ico { margin: 0; }
.ai-note { display: flex; align-items: center; gap: 12px; margin: 48px 0 0; font-size: 15.5px; color: var(--ink); }
.ai-note svg { flex: none; color: var(--sii); }
/* Hairline list of the extras */
.perks { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line); }
.perks li { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; align-items: baseline; gap: 6px 24px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.perk-k { font: 500 13px var(--code); color: var(--ink); }
.perks a { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 14.5px; }

/* Shards explainer: words on the left, a receipt of one real-looking job on the right */
.shards-x { position: relative; padding: clamp(140px, 20vh, 220px) 0 0; }
.shards-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 56px clamp(48px, 7vw, 110px); align-items: center; }
.h-mid { margin-top: 18px; font-size: clamp(42px, 5.6vw, 84px); }
.shards-copy > p:not(.label) { margin: 22px 0 0; max-width: 46ch; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.shards-copy > p + p:not(.label) { margin-top: 12px; }
.sizes-x { margin: 34px 0 0; border-top: 1px solid var(--line); }
.sizes-x > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.sizes-x dt { font-size: 15.5px; }
.sizes-x dd { margin: 0; font-size: 14px; color: var(--ink-3); }
.sizes-x dd b { font: 500 17px var(--code); color: var(--ink); }
.sizes-x .free { color: var(--oiii); }
.receipt {
  margin: 0; padding: 20px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)), rgba(3, 5, 18, 0.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.receipt-msg { display: flex; justify-content: flex-end; margin: 0; }
.receipt-msg span { max-width: 88%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; font-size: 14px; background: linear-gradient(180deg, rgba(110, 160, 255, 0.3), rgba(110, 130, 255, 0.16)); box-shadow: inset 0 0 0 1px rgba(160, 200, 255, 0.18); }
.receipt-steps { list-style: none; display: grid; gap: 2px; margin: 16px 0 0; padding: 0; }
.receipt-steps li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 38px; padding: 0 10px; border-radius: 10px; font-size: 14px; color: var(--ink-2); }
.receipt-steps svg.i { width: 16px; height: 16px; color: var(--ink-3); }
.receipt-steps code { font-size: 12.5px; color: var(--ink); }
.receipt-steps b { font: 500 13px var(--code); color: var(--oiii); }
.receipt-steps .failed { color: var(--ink-3); }
.receipt-steps .failed svg.i, .receipt-steps .failed b { color: var(--ha); }
.receipt-total { display: flex; align-items: baseline; justify-content: space-between; margin: 14px 0 0; padding: 14px 10px 0; border-top: 1px dashed rgba(255, 255, 255, 0.14); font-size: 14px; color: var(--ink-2); }
.receipt-total b { font: 500 18px var(--code); color: var(--ink); }
.receipt-more { margin: 10px 10px 0; font-size: 13.5px; color: var(--ink-3); }
/* The rows print one after another when the receipt scrolls in */
.js [data-rows] :is(.receipt-steps li, .earn-rows li), .js [data-rows] :is(.receipt-total, .earn-total) { opacity: 0; translate: 0 6px; transition: opacity 0.35s ease-out, translate 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.js [data-rows].is-in :is(.receipt-steps li, .earn-rows li), .js [data-rows].is-in :is(.receipt-total, .earn-total) { opacity: 1; translate: 0 0; }
.js [data-rows].is-in li:nth-child(2) { transition-delay: 0.05s; }
.js [data-rows].is-in li:nth-child(3) { transition-delay: 0.1s; }
.js [data-rows].is-in li:nth-child(4) { transition-delay: 0.15s; }
.js [data-rows].is-in li:nth-child(5) { transition-delay: 0.2s; }
.js [data-rows].is-in li:nth-child(6) { transition-delay: 0.25s; }
.js [data-rows].is-in :is(.receipt-total, .earn-total) { transition-delay: 0.35s; }

.faq-x { position: relative; padding: clamp(140px, 20vh, 220px) 0 0; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 32px clamp(40px, 6vw, 96px); align-items: start; }
.faq-grid .h-section { margin: 0; }

@media (max-width: 900px) {
  .plan-rail { grid-template-columns: minmax(0, 1fr); }
  .pl + .pl { box-shadow: inset 0 1px 0 var(--line); }
  .pl.is-rec { margin: 0; padding-top: 52px; padding-bottom: 40px; }
  .shards-grid, .faq-grid, .free-grid { grid-template-columns: minmax(0, 1fr); }
  .perks li { grid-template-columns: minmax(0, 1fr); }
  .packs { grid-template-columns: minmax(0, 1fr); margin-top: 56px; }
}
@media (max-width: 560px) {
  .pl { padding: 30px 24px 28px; }
  .receipt { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-rows] :is(.receipt-steps li, .earn-rows li), .js [data-rows] :is(.receipt-total, .earn-total) { opacity: 1; translate: none; transition: none; }
}

/* =========================================================================
   Terms and privacy (built by legal/build.py): one calm reading column.
   ========================================================================= */
.legal { position: relative; padding: clamp(64px, 11vh, 120px) 0 0; }
.prose { max-width: 760px; }
.prose h1 { margin: 20px 0 0; font-size: clamp(40px, 5.2vw, 68px); line-height: 1; font-weight: 540; font-stretch: 120%; letter-spacing: -0.04em; text-wrap: balance; }
.prose h2 { margin: 60px 0 0; font-size: 21px; font-weight: 620; font-stretch: 112%; letter-spacing: -0.015em; scroll-margin-top: 96px; }
.prose p, .prose li { font-size: 16.5px; line-height: 1.7; color: var(--ink-2); text-wrap: pretty; }
.prose p { margin: 14px 0 0; }
.prose ul { margin: 14px 0 0; padding-left: 22px; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--ink-3); }
.prose ul ul { margin-top: 8px; }
.prose strong { font-weight: 620; color: var(--ink); }
.prose a { text-decoration: underline; text-decoration-color: rgba(94, 227, 245, 0.4); text-underline-offset: 3px; }
.prose .legal-draft { margin-top: 30px; padding: 12px 16px; border-radius: 12px; font: 13px/1.55 var(--code); color: var(--sii); background: var(--sii-soft); box-shadow: inset 0 0 0 1px var(--sii-line); }
.prose .legal-date { margin-top: 18px; font: 13px var(--code); color: var(--ink-3); }
.prose .legal-date + p { margin-top: 30px; }

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  /* The role word takes its own line: three lines, sized to the longest word */
  .hero-title { font-size: min(84px, calc((100vw - 40px) / 8.9)); }
  .roles { display: grid; justify-content: start; }
  .hero-head { grid-template-columns: minmax(0, 1fr); }
  .hero-sub { margin-top: 24px; }
  .hero-sub > p:first-child { font-size: 17px; }
  .cta-row.hero-cta { grid-column: 1; justify-self: start; justify-content: flex-start; flex-wrap: wrap; margin-top: 28px; }

}
@media (max-width: 820px) {
  :root { --gutter: 20px; }
  .nav-links, .nav-end .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav[data-open="true"] .nav-links {
    display: grid; position: absolute; left: 12px; right: 12px; top: 72px; margin: 0; padding: 10px; gap: 2px;
    border-radius: 18px; border: 1px solid var(--rim); background: rgba(10, 13, 34, 0.96);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: var(--shadow);
  }
  .nav[data-open="true"] .nav-links a { padding: 12px 14px; font-size: 16px; }
  .nav[data-open="true"] .nav-links .nav-cta-mobile { display: flex; margin-top: 8px; }

  .shot { padding: 6px; border-radius: 18px; }
  .shot-window { border-radius: 12px; }

}
@media (max-width: 560px) {
  body { font-size: 14.5px; }

  .cta-row .btn { width: 100%; }

  .banner .banner-acts { margin-left: 0; }
  .check-end .btn-sm { padding: 0 11px; }
  .footer-links { margin-left: 0; }
  .nav-user span:last-child { display: none; }
  .sb-foot { flex-wrap: wrap; }
  .sb-foot .sb-aside { margin-left: 0; width: 100%; }
  .signin-card, .solo-card { padding: 34px 22px 28px; }

  .meta-line span { display: block; }
}
.nav-links .nav-cta-mobile { display: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Home sections, smaller screens */
@media (max-width: 900px) {
  /* The app on top, the step under it */
  .story-grid { grid-template-columns: minmax(0, 1fr); row-gap: 26px; align-content: center; }
  .story-pin { grid-column: 1; grid-row: 1; }
  .story-steps { grid-column: 1; grid-row: 2; }
  .js .story-pin .shot { max-width: min(300px, calc((100svh - 68px - 330px) * 0.8)); }
  .story-stage .shot-glow { display: none; }
  .js .story-marks { margin-bottom: 14px; }
  .sx h3 { margin-top: 8px; font-size: 26px; }
  .sx p { margin-top: 10px; font-size: 16px; line-height: 1.55; }
  .sx .btn { margin-top: 16px; }
  .students-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .reel { --fw: 84vw; }
  .reel-card[data-pos="left"] { transform: translate3d(-70%, 0, -260px) rotateY(-28deg); }
  .reel-card[data-pos="right"] { transform: translate3d(70%, 0, -260px) rotateY(28deg); }
  .reel-bar { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 12px; width: var(--fw); margin: 28px auto 0; }
  .reel-nav { position: static; width: 48px; height: 48px; }
  .reel-cap { min-height: 72px; align-content: center; }
  .reel-cap b { font-size: 17px; text-wrap: balance; }
}
@media (max-width: 560px) {
  .perk-card { padding: 28px 24px 24px; }
  .free-offer { border-radius: 20px; text-align: left; }
  .finale .cta-row .btn { width: 100%; }
}