/* ═══ Aura Shakti — site stylesheet ═════════════════════════════════════════
   One sheet for every page. Playfair carries the display voice (the app's own
   quote screen is set in it), Inter carries running text, and the mono is
   reserved for labels and figures.
   ═════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/playfair.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/mono.woff2') format('woff2');
  font-weight: 100 800; font-style: normal; font-display: swap;
}

/* ── tokens ────────────────────────────────────────────────────────────────
   Dark first, because that is the app's own ground. The bare :root holds the
   complete dark palette; the light palette is redefined twice — once for a
   light OS with no explicit choice, once for an explicit choice — so all three
   viewer states resolve. Components only ever read these names, never a
   literal, so neither theme can end up wearing the other's ink. */
:root {
  --ground: #08080A;
  --raised: #141417;
  --sunken: #0E0E11;
  --line: #2C2C31;
  --line-strong: #45454C;

  --ink: #FFFFFF;
  --ink-body: #E3E3E6;
  --ink-muted: #ADADB4;
  --ink-faint: #8A8A92;

  /* The house red, and the room colours — the app's real per-mode tints. */
  --red: #F1585D;
  --blue: #5CADDD;
  --green: #56BE95;
  --gold: #E4B054;
  --violet: #B08CE8;
  --on-accent: #08080A;

  --accent: var(--red);
  --accent-soft: rgba(241, 88, 93, .16);

  --shell: #1C1C20;
  --shadow-1: 0 1px 2px rgba(0,0,0,.6);
  --shadow-2: 0 22px 60px rgba(0,0,0,.66);
  --shadow-3d: 0 60px 90px -30px rgba(0,0,0,.85);

  --measure: 60ch;
  --edge: clamp(1.25rem, 5vw, 4.5rem);

  --step--1: .875rem;
  --step-0: 1.1875rem;
  --step-1: clamp(1.25rem, 1.7vw, 1.4375rem);
  --step-2: clamp(1.7rem, 2.7vw, 2.15rem);
  --step-3: clamp(2.2rem, 5vw, 3.5rem);
  --step-4: clamp(2.9rem, 8vw, 5.8rem);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground: #FFFFFF;
    --raised: #FFFFFF;
    --sunken: #F3F4F7;
    --line: #E1E4EA;
    --line-strong: #B9BFCA;

    --ink: #06070A;
    --ink-body: #2B3038;
    --ink-muted: #4C525C;
    --ink-faint: #646A75;

    --red: #C22127;
    --blue: #14639C;
    --green: #10704E;
    --gold: #7A5708;
    --violet: #5B32A6;
    --on-accent: #FFFFFF;

    --accent: var(--red);
    --accent-soft: rgba(194, 33, 39, .10);

    --shell: #D8DBE2;
    --shadow-1: 0 1px 2px rgba(10,15,25,.06);
    --shadow-2: 0 22px 56px rgba(10,15,25,.16);
    --shadow-3d: 0 60px 90px -34px rgba(10,15,25,.34);
  }
}

:root[data-theme="light"] {
  --ground: #FFFFFF;
  --raised: #FFFFFF;
  --sunken: #F3F4F7;
  --line: #E1E4EA;
  --line-strong: #B9BFCA;

  --ink: #06070A;
  --ink-body: #2B3038;
  --ink-muted: #4C525C;
  --ink-faint: #646A75;

  --red: #C22127;
  --blue: #14639C;
  --green: #10704E;
  --gold: #7A5708;
  --violet: #5B32A6;
  --on-accent: #FFFFFF;

  --accent: var(--red);
  --accent-soft: rgba(194, 33, 39, .10);

  --shell: #D8DBE2;
  --shadow-1: 0 1px 2px rgba(10,15,25,.06);
  --shadow-2: 0 22px 56px rgba(10,15,25,.16);
  --shadow-3d: 0 60px 90px -34px rgba(10,15,25,.34);
}

/* ── base ─────────────────────────────────────────────────────────────────*/
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink-body);
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background .45s ease, color .45s ease;
}

h1, h2, h3 {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.018em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; max-width: var(--measure); }
a { color: inherit; }

.label {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--edge); }
section { padding-block: clamp(4.5rem, 11vw, 9rem); }
.tight { padding-block: clamp(3rem, 7vw, 5rem); }

/* ── top bar ──────────────────────────────────────────────────────────────*/
.bar {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.bar__in { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; height: 68px; }
.mark {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 800; font-size: 1rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
}
.mark i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: block; transition: background .45s ease; }
.bar nav { display: flex; gap: 1.6rem; }
.bar nav a { font-size: .9375rem; font-weight: 500; color: var(--ink-muted); text-decoration: none; transition: color .2s; }
.bar nav a:hover { color: var(--ink); }
.bar nav a[aria-current="page"] { color: var(--ink); }
.bar__right { display: flex; align-items: center; gap: .75rem; }

/* Sun becomes moon: the rays retract and a second disc slides across to bite
   a crescent out of the first. */
.toggle {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  background: none; border: 1px solid var(--line);
  border-radius: 12px; cursor: pointer; color: var(--ink-muted);
  transition: color .2s, border-color .2s;
}
.toggle:hover { color: var(--ink); border-color: var(--line-strong); }
.toggle svg { transition: transform .5s cubic-bezier(.3,.8,.3,1); }
.toggle .disc { transition: r .45s cubic-bezier(.3,.8,.3,1); }
.toggle .bite { transition: cx .5s cubic-bezier(.3,.8,.3,1), cy .5s cubic-bezier(.3,.8,.3,1); }
.toggle .rays { transition: opacity .3s ease, transform .5s cubic-bezier(.3,.8,.3,1); transform-origin: 12px 12px; }

/* The nav collapses to a sheet rather than disappearing — on a multi-page site
   the links are the only way between pages. */
.burger { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px; background: none; color: var(--ink); cursor: pointer; align-items: center; justify-content: center; }
.burger svg { display: block; }
@media (max-width: 940px) {
  .bar nav { display: none; }
  .burger { display: flex; }
  .bar nav.open {
    display: flex; flex-direction: column; gap: 0;
    position: fixed; inset: 68px 0 auto; z-index: 59;
    background: var(--ground); border-bottom: 1px solid var(--line);
    padding: .5rem var(--edge) 1.5rem;
  }
  .bar nav.open a { padding: .9rem 0; font-size: 1.0625rem; border-bottom: 1px solid var(--line); }
}

/* ── buttons ──────────────────────────────────────────────────────────────*/
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 54px; padding-inline: 1.75rem;
  border-radius: 999px; font-size: 1rem; font-weight: 600;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  font-family: inherit;
  transition: transform .18s ease, background .35s ease, border-color .2s;
}
.btn--solid { background: var(--accent); color: var(--on-accent); }
.btn--ghost { border-color: var(--line-strong); color: var(--ink); background: none; }
.btn--ghost:hover { border-color: var(--ink-faint); }
.btn:hover { transform: translateY(-2px); }
.btn--sm { min-height: 40px; font-size: .875rem; padding-inline: 1.15rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ── page head (inner pages) ──────────────────────────────────────────────*/
.phead { padding-block: clamp(3rem, 8vw, 6rem) clamp(2rem, 5vw, 3.5rem); position: relative; overflow: hidden; }
.phead__glow {
  position: absolute; inset: -30% -20% auto; height: 130%;
  background: radial-gradient(ellipse 45% 55% at 50% 20%, var(--accent-soft), transparent 70%);
  pointer-events: none; transition: background .6s ease;
}
.phead .wrap { position: relative; z-index: 1; }
.phead h1 { font-size: var(--step-3); margin: 1.1rem 0 1.3rem; }
.phead p { font-size: var(--step-1); color: var(--ink-muted); max-width: 58ch; }

/* ── shared section head ──────────────────────────────────────────────────*/
.head { display: grid; gap: 1.1rem; margin-bottom: clamp(2.75rem, 5vw, 4rem); }
.head h2 { font-size: var(--step-3); }
.head p { color: var(--ink-muted); font-size: var(--step-1); }

/* ── feature grid ─────────────────────────────────────────────────────────*/
.grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden;
}
.cell { background: var(--ground); padding: 1.85rem 1.7rem; display: grid; gap: .6rem; align-content: start; }
.cell h3 { font-size: 1.1875rem; font-family: 'Inter', sans-serif; font-weight: 650; letter-spacing: -.005em; }
.cell p { font-size: 1rem; color: var(--ink-muted); }

/* ── rooms (home) ─────────────────────────────────────────────────────────*/
.rooms { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.room { background: var(--ground); padding-block: clamp(3rem, 6vw, 4.5rem); transition: background .4s ease; }
.room__in {
  width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--edge);
  display: grid; grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 3.5rem); align-items: start;
}
@media (max-width: 880px) { .room__in { grid-template-columns: 1fr; } }
.room__id { display: flex; align-items: baseline; gap: .9rem; }
.room__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--tint); flex: none; translate: 0 -2px; }
.room__name { font-size: var(--step-2); color: var(--ink); }
.room__what { color: var(--tint); }
.room__body { display: grid; gap: 1.25rem; }
.room p { color: var(--ink-body); }
.ask {
  display: inline-block;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic; font-size: 1.3rem; line-height: 1.5;
  color: var(--ink); border-left: 2px solid var(--tint);
  padding: .15rem 0 .15rem 1.15rem; max-width: 46ch;
}

/* ── hero + 3-D device cluster (home) ─────────────────────────────────────
   Real screenshots of the running app, not a drawing of one. The stage owns
   the perspective so the phones share one vanishing point, and the pointer
   tilt is applied to the stage as a whole — one composited transform however
   many phones sit inside. */
.hero { padding-block: clamp(3.5rem, 9vw, 6.5rem) 0; position: relative; overflow: hidden; }
.hero__glow {
  position: absolute; inset: -10% -20% auto; height: 70%;
  background: radial-gradient(ellipse 52% 60% at 50% 30%, var(--accent-soft), transparent 72%);
  pointer-events: none; transition: background .6s ease;
}
/* Only the content is lifted above the glow. A blanket `.hero > *` rule would
   match the glow at equal specificity and, coming later, replace its
   `position: absolute` — putting a decorative layer back into the flow. */
.hero .wrap, .hero .stage { position: relative; z-index: 1; }
.hero__copy { text-align: center; }
.hero h1 { font-size: var(--step-4); margin-bottom: 1.6rem; }
.hero h1 em { font-style: italic; color: var(--accent); transition: color .45s ease; }
.hero__copy p { margin-inline: auto; max-width: 52ch; font-size: var(--step-1); color: var(--ink-muted); }
.hero .cta-row { justify-content: center; margin-top: 2.75rem; }
.hero__note { margin: 1.6rem auto 0; font-size: var(--step--1); color: var(--ink-faint); }

.stage {
  margin-top: clamp(3rem, 7vw, 5rem);
  perspective: 1600px; perspective-origin: 50% 40%;
  display: flex; justify-content: center; align-items: flex-end;
  gap: clamp(.5rem, 3vw, 2.75rem);
  padding-bottom: clamp(3rem, 8vw, 6rem);
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.phone {
  position: relative;
  width: clamp(150px, 21vw, 268px);
  aspect-ratio: 390 / 800;
  border-radius: clamp(1.35rem, 2.6vw, 2.2rem);
  background: var(--shell);
  padding: clamp(4px, .55vw, 8px);
  box-shadow: var(--shadow-3d);
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease;
  will-change: transform;
}
.phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: clamp(1.05rem, 2.1vw, 1.75rem); }
.phone::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(128deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.03) 26%, transparent 52%);
}
.phone::before {
  content: ''; position: absolute; z-index: 2;
  top: clamp(8px, 1.1vw, 14px); left: 50%; translate: -50% 0;
  width: 26%; height: clamp(4px, .6vw, 7px);
  border-radius: 99px; background: rgba(0,0,0,.55);
}
.phone--l { transform: rotateY(19deg) rotateX(5deg) translateZ(-70px) translateY(22px); }
.phone--c { transform: rotateY(0deg) rotateX(3deg) translateZ(40px); z-index: 3; }
.phone--r { transform: rotateY(-19deg) rotateX(5deg) translateZ(-70px) translateY(22px); }
.stage:hover .phone--l { transform: rotateY(15deg) rotateX(4deg) translateZ(-46px) translateY(12px); }
.stage:hover .phone--c { transform: rotateY(0deg) rotateX(2deg) translateZ(64px) translateY(-8px); }
.stage:hover .phone--r { transform: rotateY(-15deg) rotateX(4deg) translateZ(-46px) translateY(12px); }
.phone__tag { position: absolute; bottom: -2.1rem; left: 50%; translate: -50% 0; white-space: nowrap; }
@media (max-width: 760px) {
  .phone--l, .phone--r { display: none; }
  .phone--c { transform: rotateX(2deg); width: min(70vw, 300px); }
}

/* ── the roster ───────────────────────────────────────────────────────────
   No licensed stills: each character gets a struck plate instead — a monogram
   over concentric rings, seeded so the same name always draws the same mark.
   Swap the plate for an <img> when a licensed portrait exists. */
.roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  perspective: 1200px;
}
.char {
  --tint: var(--red);
  position: relative;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  display: grid; grid-template-rows: auto 1fr;
  text-decoration: none;
  transform-style: preserve-3d;
  transition: transform .4s cubic-bezier(.2,.7,.3,1), border-color .3s ease, box-shadow .4s ease;
  will-change: transform;
}
.char:hover, .char:focus-within {
  border-color: color-mix(in srgb, var(--tint) 55%, var(--line));
  box-shadow: var(--shadow-2);
  transform: translateY(-4px) rotateX(3deg);
}
.plate {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--tint) 22%, transparent), transparent 62%),
    var(--sunken);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.plate svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.plate .mono {
  position: relative;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.6rem, 5vw, 3.4rem); font-weight: 600;
  color: var(--ink); letter-spacing: -.02em; line-height: 1;
  transition: transform .45s cubic-bezier(.2,.7,.3,1);
}
.char:hover .mono { transform: scale(1.07); }
/* Where a licensed portrait exists, drop an <img class="portrait"> into the
   plate and it covers the mark with no other change. */
.plate .portrait { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.char__body { padding: 1.15rem 1.2rem 1.35rem; display: grid; gap: .5rem; align-content: start; }
.char__name { font-size: 1.1875rem; font-family: 'Inter', sans-serif; font-weight: 650; letter-spacing: -.01em; color: var(--ink); }
.char__from { font-family: 'JetBrains Mono', monospace; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tint); }
.char__line { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 1rem; line-height: 1.45; color: var(--ink-muted); margin-top: .2rem; }

.group { margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.group__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.group__head h2 { font-size: var(--step-2); }
.group__head span { color: var(--ink-faint); }

/* ── the report mock ──────────────────────────────────────────────────────*/
.test-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); gap: clamp(2.25rem, 6vw, 5rem); align-items: center; }
@media (max-width: 920px) { .test-split { grid-template-columns: 1fr; } }
.facts { display: grid; gap: 1rem; margin-top: 2rem; padding: 0; list-style: none; }
.facts li { display: flex; gap: 1rem; font-size: 1.0625rem; color: var(--ink-body); }
.facts b {
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  color: var(--accent); font-weight: 600; flex: none; min-width: 3.4rem;
  transition: color .45s ease;
}
.report { background: var(--raised); border: 1px solid var(--line); border-radius: 18px; padding: 1.7rem; box-shadow: var(--shadow-2); display: grid; gap: 1.25rem; }
.report__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.report__idx { font-family: 'JetBrains Mono', monospace; font-size: 3rem; line-height: 1; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.bars { display: grid; gap: .8rem; }
.bar-row { display: grid; grid-template-columns: 9rem 1fr 2.4rem; gap: .8rem; align-items: center; font-size: .875rem; }
.bar-row span:first-child { color: var(--ink-muted); }
.bar-row span:last-child { font-family: 'JetBrains Mono', monospace; color: var(--ink-faint); text-align: right; font-variant-numeric: tabular-nums; }
/* Both are spans, so they need an explicit box — height does nothing on an
   inline element. */
.track { display: block; height: 7px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; }
.fill { display: block; width: 0; height: 100%; border-radius: 99px; background: var(--accent); transition: width 1s cubic-bezier(.2,.7,.3,1), background .45s ease; }
.caveat { margin-top: 1.5rem; font-size: var(--step--1); color: var(--ink-faint); max-width: 54ch; }

/* ── privacy / plain lists ────────────────────────────────────────────────*/
.locks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 2.25rem; }
.lock { display: grid; gap: .6rem; align-content: start; }
.lock h3 { font-size: 1.1875rem; font-family: 'Inter', sans-serif; font-weight: 650; letter-spacing: -.005em; }
.lock p { font-size: 1rem; color: var(--ink-muted); }

/* ── developer ────────────────────────────────────────────────────────────*/
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: clamp(2.25rem, 6vw, 5rem); align-items: start; }
@media (max-width: 920px) { .split { grid-template-columns: 1fr; } }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-top: 2.25rem; }
.stat { background: var(--ground); padding: 1.1rem 1.15rem; display: grid; gap: .2rem; }
.stat b { font-family: 'JetBrains Mono', monospace; font-size: 1.6rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat span { font-size: .8125rem; color: var(--ink-muted); line-height: 1.35; }
.stack { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; padding: 0; list-style: none; }
.stack li { font-family: 'JetBrains Mono', monospace; font-size: .8125rem; border: 1px solid var(--line); border-radius: 999px; padding: .35rem .8rem; color: var(--ink-muted); }
.links { display: grid; gap: .75rem; margin-top: 2rem; }
.links a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: 13px;
  background: var(--raised); text-decoration: none; color: var(--ink);
  font-weight: 550; font-size: 1rem;
  transition: border-color .2s, transform .2s ease;
}
.links a:hover { border-color: var(--accent); transform: translateX(3px); }
.links a span { font-family: 'JetBrains Mono', monospace; font-size: .8125rem; color: var(--ink-faint); }

/* ── cards / download ─────────────────────────────────────────────────────*/
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1.35rem; }
.card {
  border: 1px solid var(--line); border-radius: 18px; padding: 2rem 1.85rem;
  background: var(--raised); display: grid; gap: .75rem; align-content: start;
  box-shadow: var(--shadow-1);
}
.card h3 { font-size: 1.45rem; }
.card p { font-size: 1rem; color: var(--ink-muted); }
.card .btn { margin-top: 1rem; justify-self: start; }

/* ── FAQ ──────────────────────────────────────────────────────────────────*/
.faq { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.faq details { background: var(--ground); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.35rem 1.6rem; font-weight: 600; font-size: 1.0625rem; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: 'JetBrains Mono', monospace; font-size: 1.3rem; color: var(--ink-faint); flex: none; transition: transform .25s ease; }
.faq details[open] summary::after { transform: rotate(45deg); color: var(--accent); }
.faq details p { padding: 0 1.6rem 1.5rem; color: var(--ink-muted); font-size: 1rem; }

/* ── strip CTA ────────────────────────────────────────────────────────────*/
.strip { background: var(--sunken); border-block: 1px solid var(--line); }
.strip__in { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; align-items: center; justify-content: space-between; }
.strip h2 { font-size: var(--step-2); }

/* ── footer ───────────────────────────────────────────────────────────────*/
footer { border-top: 1px solid var(--line); padding-block: 3rem 2.5rem; }
.foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 2rem; margin-bottom: 2.5rem; }
.foot-col { display: grid; gap: .6rem; align-content: start; }
.foot-col strong { font-size: .8125rem; font-family: 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.foot-col a { font-size: .9375rem; color: var(--ink-muted); text-decoration: none; }
.foot-col a:hover { color: var(--ink); }
.foot { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; font-size: .9375rem; color: var(--ink-faint); padding-top: 1.75rem; border-top: 1px solid var(--line); }
.foot a { color: var(--ink-muted); text-decoration: none; }
.foot a:hover { color: var(--ink); }

/* ── motion ───────────────────────────────────────────────────────────────*/
.rise { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.rise.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .rise { opacity: 1; transform: none; }
  .stage { transform: none !important; }
  .char:hover { transform: none; }
}

/* ── device views (mode pages) ────────────────────────────────────────────
   Desktop and phone side by side. The phone overlaps the desktop shot's
   corner so the pair reads as one product rather than two screenshots. */
.views { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 14rem); gap: clamp(1rem, 3vw, 2.5rem); align-items: end; }
@media (max-width: 860px) { .views { grid-template-columns: 1fr; justify-items: center; } .view--phone { max-width: 15rem; } }
.view { margin: 0; display: grid; gap: .85rem; justify-items: center; }
.view img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-2); background: var(--sunken);
}
.view--phone img { border-radius: 22px; }
.view figcaption { color: var(--ink-faint); }

/* ── prose blocks ─────────────────────────────────────────────────────────*/
.prose-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: clamp(1.75rem, 4vw, 3rem); }
.prose { display: grid; gap: .75rem; align-content: start; }
.prose h3 { font-size: 1.3rem; }
.prose p { color: var(--ink-muted); font-size: 1.0625rem; }
.prose h3 + p { margin-bottom: .5rem; }

.note { font-size: var(--step--1); color: var(--ink-faint); max-width: 62ch; }

/* ── "try asking" list ────────────────────────────────────────────────────*/
.asks { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; }
.asks .ask { border-left-color: var(--accent); }

/* ── room chips ───────────────────────────────────────────────────────────*/
.chips { display: flex; flex-wrap: wrap; gap: .7rem; }
.chip {
  --tint: var(--accent);
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .7rem 1.15rem; border: 1px solid var(--line); border-radius: 999px;
  text-decoration: none; color: var(--ink); font-weight: 550; font-size: .9375rem;
  transition: border-color .2s, transform .2s ease;
}
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--tint); display: block; flex: none; }
.chip:hover { border-color: var(--tint); transform: translateY(-2px); }

/* ── "inside the room" link ───────────────────────────────────────────────
   This was coloured text with a hover underline, which nobody read as a
   control. It is now shaped like one — a bordered pill in the room's colour —
   and the arrow drifts every few seconds so the affordance is visible without
   having to hover to discover it. */
.more {
  justify-self: start;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .65rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--tint) 42%, var(--line));
  background: color-mix(in srgb, var(--tint) 9%, transparent);
  border-radius: 999px;
  color: var(--tint); font-weight: 600; font-size: .9375rem;
  text-decoration: none; white-space: nowrap;
  transition: background .25s ease, border-color .25s ease, transform .2s ease;
}
.more::after {
  content: '→';
  font-size: 1.05em; line-height: 1;
  animation: more-nudge 2.8s ease-in-out infinite;
}
.more:hover, .more:focus-visible {
  background: color-mix(in srgb, var(--tint) 18%, transparent);
  border-color: var(--tint);
  transform: translateY(-2px);
}
.more:hover::after { animation: none; transform: translateX(4px); transition: transform .2s ease; }

/* Two small pushes, then a long rest — a constant slide would read as decoration
   rather than as an invitation. */
@keyframes more-nudge {
  0%, 62%, 100% { transform: translateX(0); }
  70%           { transform: translateX(5px); }
  78%           { transform: translateX(0); }
  86%           { transform: translateX(5px); }
  94%           { transform: translateX(0); }
}

/* ── the feature tour ─────────────────────────────────────────────────────
   Screenshot on one side, copy on the other, sides alternating so a long page
   has a rhythm instead of a single column of text. */
.tour-list { display: grid; gap: clamp(3.5rem, 9vw, 7rem); }
.tour {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: center;
}
.tour--flip .tour__shot { order: 2; }
@media (max-width: 820px) {
  .tour { grid-template-columns: 1fr; gap: 1.75rem; }
  .tour--flip .tour__shot { order: 0; }
}

/* A phone-shaped frame around the shot, so a screenshot reads as a device
   rather than as a floating rectangle. */
.tour__frame {
  position: relative;
  max-width: 20rem; margin-inline: auto;
  padding: clamp(5px, .7vw, 9px);
  background: var(--shell);
  border-radius: clamp(1.5rem, 2.4vw, 2.1rem);
  box-shadow: var(--shadow-2);
}
.tour__frame img { display: block; width: 100%; height: auto; border-radius: clamp(1.15rem, 1.9vw, 1.7rem); }
.tour__frame::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(128deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.02) 24%, transparent 50%);
}
.tour__copy { display: grid; gap: 1rem; align-content: center; }
.tour__copy h2 { font-size: var(--step-2); }
.tour__copy p { color: var(--ink-muted); }

.ticks { list-style: none; padding: 0; margin: .35rem 0 0; display: grid; gap: .6rem; }
.ticks li { position: relative; padding-left: 1.6rem; font-size: 1rem; color: var(--ink-body); }
.ticks li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--tint);
}

/* ── portraits ────────────────────────────────────────────────────────────*/
.char--photo .plate { background: var(--sunken); }
.char--photo .plate::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--tint) 26%, transparent), transparent 55%);
}
.char--photo .portrait { transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.char--photo:hover .portrait { transform: scale(1.05); }

.credits { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: grid; gap: 1.25rem; }
.credit-list {
  margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .45rem 1.25rem;
  font-size: .8125rem;
}
.credit-list dt { color: var(--ink-muted); font-weight: 550; }
.credit-list dd { margin: 0; color: var(--ink-faint); font-family: 'JetBrains Mono', monospace; font-size: .75rem; }
@media (max-width: 640px) { .credit-list { grid-template-columns: 1fr; gap: .15rem; } .credit-list dd { margin-bottom: .6rem; } }

/* ── developer portrait ───────────────────────────────────────────────────*/
.portrait-card {
  margin: 0 0 2.25rem; max-width: 22rem;
  border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  background: var(--raised); box-shadow: var(--shadow-2);
}
.portrait-card img { display: block; width: 100%; height: auto; }
.portrait-card figcaption {
  display: grid; gap: .2rem; padding: 1.1rem 1.25rem;
  border-top: 1px solid var(--line);
}
.portrait-card strong { font-size: 1.0625rem; color: var(--ink); font-weight: 650; }

/* ── mobile: shorter pages, and a swipeable nav ───────────────────────────
   A long marketing page on a phone is mostly scrolling, so the vertical
   rhythm tightens and the section links become a horizontal rail the thumb
   can flick through instead of a stack to scroll past. */
.railnav { display: none; }

@media (max-width: 720px) {
  :root {
    --step-0: 1.0625rem;
    --step-3: clamp(1.9rem, 8vw, 2.4rem);
    --step-4: clamp(2.4rem, 12vw, 3.2rem);
  }
  section { padding-block: clamp(2.75rem, 9vw, 4rem); }
  .tight { padding-block: clamp(2.25rem, 8vw, 3.25rem); }
  .phead { padding-block: 2.25rem 1.5rem; }
  .head { margin-bottom: 1.75rem; }
  .tour-list { gap: 2.75rem; }
  .room { padding-block: 2rem; }
  .hero { padding-block: 2.25rem 0; }
  .stage { margin-top: 2rem; padding-bottom: 3.25rem; }
  .grid, .cards, .locks, .roster { gap: .85rem; }
  .locks { gap: 1.5rem; }
  .cell, .card { padding: 1.25rem 1.15rem; }
  .foot-cols { gap: 1.5rem; margin-bottom: 1.75rem; }

  /* the swipe rail, under the sticky bar */
  .railnav {
    display: block; position: sticky; top: 68px; z-index: 40;
    background: color-mix(in srgb, var(--ground) 92%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
  }
  .railnav ul {
    display: flex; gap: .5rem; margin: 0; padding: .6rem var(--edge);
    list-style: none; overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  }
  .railnav ul::-webkit-scrollbar { display: none; }
  .railnav a {
    display: block; white-space: nowrap; scroll-snap-align: start;
    padding: .5rem .9rem; border: 1px solid var(--line); border-radius: 999px;
    font-size: .8125rem; font-weight: 550; color: var(--ink-muted); text-decoration: none;
  }
  .railnav a[aria-current="page"] { color: var(--on-accent); background: var(--accent); border-color: transparent; }
}

/* Twenty-five cards stacked one per row is fifteen screens of thumb work. On a
   phone each group becomes a shelf you flick sideways instead, which puts the
   whole roster inside about four screens. */
@media (max-width: 720px) {
  .roster {
    grid-auto-flow: column;
    grid-auto-columns: 74%;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: .5rem;
    /* the shelf runs to the screen edge, so the next card peeks */
    margin-inline: calc(var(--edge) * -1);
    padding-inline: var(--edge);
  }
  .roster::-webkit-scrollbar { display: none; }
  .char { scroll-snap-align: start; }
  .group__head { margin-bottom: 1rem; }
  .group { margin-bottom: 2.5rem; }

  /* the tour frames get the same treatment: no need for a full-height phone
     mock-up when the copy beside it is what carries the point */
  .tour__frame { max-width: 15rem; }
}