/* ============================================================
   Keleinik — "Midnight Vespers" design system  (dark & premium)
   ------------------------------------------------------------
   A full-site dark theme: near-black grounds, luminous antique
   gold, warm off-white ink, quietly elevated surfaces. Every
   class name and layout from the previous "Orthodox Embroidery"
   pass is preserved — only the palette, surfaces, borders and
   shadows are re-tuned for a cinematic, high-end feel.
   ============================================================ */
:root {
  /* Tell the browser this is a dark document. Without it Chromium assumes a
     light page and paints its own defaults to match: a near-black focus ring
     that vanishes on our ground, white checkboxes, light date/time pickers,
     light scrollbars. Everything the browser draws for us should belong to
     the same world as everything we draw ourselves. */
  color-scheme: dark;

  /* ── grounds (deep → elevated) ── */
  --bg:        #0d0d11;   /* page ground */
  --bg-elev:   #17171d;   /* cards / panels */
  --bg-elev-2: #20202a;   /* inputs, higher surfaces */
  --bg-dark:   #070709;   /* deepest — hero & closing bookends */
  --bg-header: rgba(10,10,13,0.78);

  /* ── ink ── */
  --ink:         #f3efe6;  /* primary text (warm white) */
  --ink-soft:    #b4ada0;  /* secondary text */
  /* Tertiary / fineprint. Lifted from #837c70, which cleared 4.5:1 on the page
     ground but fell to 3.9:1 on inputs and 4.3:1 on cards — so every
     placeholder and every card index number was failing. This value clears
     5:1 on all three grounds. */
  --ink-mute:    #8d8779;
  --ink-inverse: #f3efe6;  /* text on dark grounds (== ink here) */
  --on-gold:     #14110b;  /* text on gold fills */

  /* ── gold accent ── */
  --gold:        #d9b56b;
  --gold-soft:   #e8ce93;
  --gold-light:  #eed69f;
  --gold-dark:   #c39c50;
  --gold-darker: #a37f39;

  /* ── lines & tints ── */
  --line:        rgba(255,255,255,0.09);
  --line-cool:   rgba(255,255,255,0.07);
  --rule:        rgba(255,255,255,0.10);
  --rule-strong: rgba(255,255,255,0.16);
  --gold-line:   rgba(217,181,107,0.30);
  --gold-line-soft: rgba(217,181,107,0.18);
  --gold-fill:   rgba(217,181,107,0.09);
  --gold-fill-2: rgba(217,181,107,0.16);
  --focus-ring:  rgba(217,181,107,0.28);  /* one ring for every focused field */

  /* landing tokens */
  --measure: 68ch;
  --prose-size: 1.125rem;

  /* ── type ── (dark & premium pass) ──
     Cormorant Garamond: large, high-contrast display serif — ecclesiastical.
     Newsreader: warm optical-size text serif for running prose + body.
     Inter: eyebrows, nav, buttons, chat + form UI. */
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-ceremonial: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Newsreader', Charter, Georgia, 'Times New Roman', serif;
  --font-prose: 'Newsreader', Charter, Georgia, 'Times New Roman', serif;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-xl: 1.7rem; --tracking-eyebrow: 0.16em; --tracking-wide: 0.04em;
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 0.15s; --dur-base: 0.25s;

  /* ── elevation ── */
  --shadow:    0 2px 10px rgba(0,0,0,0.45);
  --shadow-md: 0 10px 30px rgba(0,0,0,0.5);
  --shadow-lg: 0 26px 64px rgba(0,0,0,0.6);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--bg);
  font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body.has-sticky-footer { display: flex; flex-direction: column; min-height: 100vh; }
/* <main> sits between body and the page sections, so it has to pass the
   column stretch through rather than absorb it. */
body.has-sticky-footer > main { flex: 1; display: flex; flex-direction: column; min-height: 0; }
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); line-height: 1.25; font-weight: 600; letter-spacing: 0.004em; text-wrap: balance; }
a { color: var(--gold); text-decoration: none; transition: color var(--dur-fast); }
a:hover { color: var(--gold-soft); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; background: var(--bg-elev-2); color: var(--gold-soft); padding: 1px 6px; border-radius: 4px; }
code.break { word-break: break-all; }
::selection { background: rgba(217,181,107,0.30); color: #14110b; }
.container { max-width: 1140px; margin: 0 auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── the surfaces the browser draws for us ──────────────
   Focus ring, caret, scrollbars and control accents are part of the design,
   not defaults to inherit. One gold language for all of them. */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Text fields answer with their own border + ring instead of an outline —
   the outline would trace the field twice. Everything else (links, buttons,
   checkboxes, summaries, file pickers) keeps the ring above. */
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--focus-ring);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--gold); }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible,
input[type="file"]:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px; box-shadow: none;
}
input, textarea { caret-color: var(--gold); }

/* Scrollbars: a hairline that belongs to the palette, not a light-grey slab. */
html, .chat__log, .bot-link__cmd code, .cli-token__cmd {
  scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent;
}

/* Skip link — the first thing a keyboard reaches on every page. */
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 200;
  padding: 0.7rem 1.1rem; border-radius: 0 0 10px 10px;
  font-family: var(--font-ui); font-size: 0.86rem; font-weight: 600;
  color: var(--on-gold); background: var(--gold);
  transition: top var(--dur-base) var(--ease-out-soft);
}
.skip-link:focus { top: 0; color: var(--on-gold); }

/* ── icons ──────────────────────────────────────────────
   One drawn set, inlined as a sprite (see partials/_icons.html). Sized in em
   so an icon always matches the text it sits beside. */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic {
  width: 1em; height: 1em; flex: none; vertical-align: -0.125em;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.ic--solid { fill: currentColor; stroke: none; }
.ic--brand { fill: none; stroke: none; }  /* the mark carries its own colours */

/* ── DS Button ──────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-ui); font-weight: 600; letter-spacing: var(--tracking-wide);
  line-height: 1.2; border-radius: 8px; border: 1.5px solid transparent; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background var(--dur-base), color var(--dur-base), border-color var(--dur-base), transform var(--dur-base), box-shadow var(--dur-base);
}
.btn--sm { padding: 0.45rem 1.1rem; font-size: 0.8rem; }
.btn--lg { padding: 0.95rem 2.5rem; font-size: 0.92rem; }
.btn--primary { background: var(--gold); color: var(--on-gold); border-color: var(--gold); box-shadow: 0 6px 20px rgba(217,181,107,0.18); }
.btn--primary:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--on-gold); box-shadow: 0 10px 28px rgba(217,181,107,0.28); }
.btn--primary:disabled { opacity: 0.5; cursor: default; box-shadow: none; }
.btn--onDark { background: transparent; color: var(--ink); border-color: rgba(255,255,255,0.22); }
.btn--onDark:hover { background: rgba(255,255,255,0.08); color: #fff; }
.btn--ghost { background: transparent; color: var(--gold); border-color: var(--gold-line); }
.btn--ghost:hover { background: var(--gold-fill); color: var(--gold-soft); border-color: var(--gold); }

/* ── DS Badge (trust) ───────────────────────────────── */
.badge-trust {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--font-ui); line-height: 1; white-space: nowrap;
  background: var(--gold-fill); border: 1px solid var(--gold-line);
  color: var(--gold-soft); font-size: 0.78rem; font-weight: 600;
  padding: 0.3rem 0.75rem; border-radius: 100px;
}

/* ── DS SectionHeader (centered) ────────────────────── */
.sh { text-align: center; }
.sh__eyebrow {
  font-family: var(--font-ui); font-size: 0.8125rem; text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: var(--gold); font-weight: 600; margin: 0 0 0.5rem;
}
.sh__title { font-family: var(--font-display); font-weight: 600; color: var(--ink); margin: 0; font-size: var(--text-xl); position: relative; }
.sh__title::after { content: ""; display: block; width: 50px; height: 2px; background: var(--gold); margin: 0.6rem auto 0; opacity: 0.8; }

/* ── header ─────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 40; background: var(--bg-header);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner { padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.wordmark { display: flex; flex-direction: row; align-items: center; gap: 11px; line-height: 1.05; text-decoration: none; }
.wordmark__mark { width: 36px; height: 36px; display: block; flex: none; filter: drop-shadow(0 2px 8px rgba(217,181,107,0.22)); }
.wordmark__text { display: flex; flex-direction: column; line-height: 1.05; }
.wordmark__name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: 0.01em; color: var(--gold); }
.wordmark__sub { font-family: var(--font-ui); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); margin-top: 2px; }
.site-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.site-nav__link { position: relative; font-family: var(--font-ui); font-size: 0.86rem; font-weight: 500; color: var(--ink-soft); }
.site-nav__link:hover { color: var(--gold-soft); }
.site-nav__link.is-active { color: var(--gold); }
.site-header__actions { display: inline-flex; align-items: center; flex: none; }
.nav-toggle { display: none; }
.backlink { font-size: 0.86rem; font-weight: 500; color: var(--ink-soft); }
.backlink:hover { color: var(--gold); }

/* ── announcement bar ───────────────────────────────── */
.announce {
  background: var(--bg-dark); color: var(--ink-soft); text-align: center;
  padding: 10px 24px; font-family: var(--font-ui); font-size: 12px;
  font-weight: 400; letter-spacing: 0.12em; border-bottom: 1px solid var(--rule);
}
.announce__star { color: var(--gold); margin: 0 10px; }
.announce a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.announce a:hover { color: var(--gold-soft); }

/* ── hero ───────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; background: var(--bg-dark); color: var(--ink); }
/* Capped at the painting's own 857px — above that we were scaling a scan up
   past its native resolution and softening the one image on the page. */
.hero__media { position: absolute; top: 0; right: 0; bottom: 0; width: 68%; max-width: 857px; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 18%; filter: saturate(0.92) contrast(1.02); }
.hero__media-fade-x { position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg-dark) 0%, rgba(7,7,9,0.92) 26%, rgba(7,7,9,0.45) 60%, rgba(7,7,9,0.08) 100%); }
.hero__media-fade-y { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,7,9,0.85) 0%, rgba(7,7,9,0) 46%); }
.hero__glow { pointer-events: none; position: absolute; inset: 0; background: radial-gradient(58% 62% at 82% 12%, rgba(217,181,107,0.18) 0%, rgba(7,7,9,0) 62%); }
.hero__inner { position: relative; padding: clamp(96px, 12vh, 140px) 24px 116px; min-height: min(86vh, 720px); display: flex; align-items: center; }
.hero__copy { max-width: 600px; }
.hero__eyebrow { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.8rem; font-weight: 600; color: var(--gold-light); margin: 0 0 22px; }
/* A tight shadow for legibility over paint. The old 40px blur read as a dark
   rectangle sitting behind the word rather than as depth. */
.hero__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(3rem, 6vw, 4.6rem); line-height: 1.04; letter-spacing: 0.012em; margin: 0; color: #faf6ec; text-shadow: 0 1px 4px rgba(0,0,0,0.55); }
.hero__tagline { font-family: var(--font-display); font-weight: 500; font-style: italic; font-size: clamp(1.4rem, 2.5vw, 1.9rem); color: var(--gold-soft); margin: 18px 0 0; }
.hero__lede { font-family: var(--font-prose); max-width: 34ch; font-size: 1.15rem; line-height: 1.7; color: var(--ink-soft); margin: 26px 0 0; }
.hero__lede em { color: var(--ink); font-style: italic; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.hero__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin-top: 32px; }
.hero__badge { font-family: var(--font-ui); font-weight: 500; text-transform: uppercase; font-size: 11px; letter-spacing: 0.16em; color: var(--ink-soft); }
.hero__badge + .hero__badge::before { content: "\2726"; color: var(--gold); font-size: 0.7em; margin: 0 0.9em; vertical-align: 0.1em; }
.hero__credit { position: absolute; right: 22px; bottom: 14px; z-index: 2; font-family: var(--font-display); font-style: italic; font-size: 0.78rem; color: rgba(243,239,230,0.78); text-shadow: 0 1px 3px rgba(0,0,0,0.7); margin: 0; }
.hero__rule { height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0.55; }

/* ── generic section ────────────────────────────────── */
.section-ivory { background: var(--bg); }
.section-white { background: var(--bg-elev); border-top: 1px solid var(--rule); }
.section-pad { padding: 88px 24px; }
.lead { margin: 18px 0 0; font-size: 1.05rem; line-height: 1.65; color: var(--ink-soft); }

/* ── benefits ───────────────────────────────────────── */
.benefits__intro { max-width: 640px; margin: 0 auto 52px; text-align: center; }
.benefits__grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.benefit-card {
  background: var(--bg-elev); border: 1px solid var(--rule); border-radius: 14px; padding: 34px; box-shadow: var(--shadow);
  transition: transform 0.5s var(--ease-out-soft), box-shadow 0.5s var(--ease-out-soft), border-color 0.5s var(--ease-out-soft);
}
.benefit-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--gold-line-soft); }
.benefit-card__icon { width: 52px; height: 52px; border-radius: 50%; background: var(--gold-fill); border: 1px solid var(--gold-line); color: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 22px; }
.benefit-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; margin: 0 0 12px; }
.benefit-card p { margin: 0; line-height: 1.65; color: var(--ink-soft); }

/* ── what it can do (ledger) ────────────────────────── */
.can-do__intro { max-width: 660px; margin: 0 auto 52px; text-align: center; }
.ledger { display: grid; gap: 14px 40px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ledger__row { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.ledger__check { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--gold-fill); color: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }
.ledger__title { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; margin: 0 0 3px; }
.ledger__desc { margin: 0; font-size: 0.94rem; line-height: 1.55; color: var(--ink-soft); }
.can-do__more { margin: 46px 0 0; text-align: center; font-family: var(--font-display); font-style: italic; font-size: 1.25rem; color: var(--ink-soft); }

/* ── how it works (landing strip) ───────────────────── */
.how { position: relative; background: var(--bg-dark); color: var(--ink); }
.how::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 60% at 50% 0%, rgba(217,181,107,0.08), rgba(7,7,9,0) 62%); }
.how__inner { position: relative; max-width: 1000px; margin: 0 auto; padding: 96px 24px; }
.how__intro { max-width: 600px; margin: 0 auto 60px; text-align: center; }
.how__eyebrow { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.8rem; font-weight: 600; color: var(--gold-light); margin: 0 0 14px; }
.how__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 3.6vw, 2.9rem); margin: 0; color: #faf6ec; }
.how__sub { margin: 16px 0 0; font-size: 1.05rem; color: var(--ink-soft); }
.how__grid { display: grid; gap: 36px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.how__step { text-align: center; }
.how__numeral { margin: 0 auto 22px; width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--gold-line); background: var(--gold-fill); display: flex; align-items: center; justify-content: center; font-family: var(--font-ceremonial); font-size: 1.6rem; color: var(--gold-light); }
.how__step h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; margin: 0 0 10px; color: #f3ecdd; }
.how__step p { margin: 0; line-height: 1.65; color: var(--ink-soft); }
.how__cta { text-align: center; margin-top: 56px; }

/* ── waitlist ───────────────────────────────────────── */
.waitlist { background: var(--bg); }
.waitlist__inner { max-width: 560px; margin: 0 auto; padding: 88px 24px; text-align: center; }
.waitlist__ornament { color: var(--gold); letter-spacing: 0.8em; opacity: 0.9; font-size: 1rem; margin: 0 0 18px; }
.waitlist h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 3.6vw, 2.9rem); margin: 0; }
.waitlist__lede { margin: 16px auto 0; max-width: 26em; font-size: 1.05rem; line-height: 1.65; color: var(--ink-soft); }
.waitlist__form { margin: 34px auto 0; max-width: 460px; display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.waitlist__field { position: relative; flex: 1 1 240px; min-width: 0; }
.waitlist__field i, .waitlist__field .ic { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--gold); font-size: 0.95rem; pointer-events: none; }
.waitlist__input {
  width: 100%; box-sizing: border-box; font-family: var(--font-ui); font-size: 0.95rem;
  color: var(--ink); background: var(--bg-elev-2); padding: 0.75rem 0.9rem 0.75rem 2.4rem;
  border: 1px solid var(--rule-strong); border-radius: 8px; outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.waitlist__input::placeholder { color: var(--ink-mute); }
.waitlist__input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--focus-ring); }
.waitlist__submit {
  flex: none; background: var(--gold); color: var(--on-gold); border: 1.5px solid var(--gold); border-radius: 8px;
  padding: 0 1.6rem; font-family: var(--font-ui); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.04em;
  cursor: pointer; transition: background 0.2s, border-color 0.2s;
}
.waitlist__submit:hover { background: var(--gold-soft); border-color: var(--gold-soft); }
.waitlist__fineprint { margin: 16px 0 0; font-size: 0.82rem; color: var(--ink-mute); }
.waitlist__setup { margin: 30px 0 0; font-size: 0.9rem; color: var(--ink-soft); }
.waitlist__setup a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

/* ── footer ─────────────────────────────────────────── */
.site-footer { background: var(--bg-dark); color: var(--ink-soft); border-top: 1px solid var(--gold-line); }
.site-footer__inner { max-width: 1140px; margin: 0 auto; padding: 44px 24px; display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; justify-content: space-between; }
.site-footer__name { font-family: var(--font-display); font-size: 1.4rem; color: var(--gold); margin: 0; }
.site-footer__legal { margin: 8px 0 0; font-size: 0.82rem; color: var(--ink-mute); }
.site-footer__right { text-align: right; font-size: 0.88rem; }
.site-footer__right p { margin: 0; }
.site-footer__right a { color: var(--ink-soft); }
.site-footer__right a:hover { color: var(--gold-soft); }
.site-footer__dot { margin: 0 10px; color: var(--ink-mute); }
.site-footer__built { margin: 8px 0 0; font-family: var(--font-display); font-style: italic; color: var(--ink-mute); }
.site-footer__links a { color: var(--ink-soft); }
.site-footer__links a:hover { color: var(--gold-soft); }

/* ── page hero (shared: setup + how-it-works + demo + cabinet) ── */
.page-hero { position: relative; background: var(--bg-dark); color: var(--ink); overflow: hidden; }
.page-hero__glow { pointer-events: none; position: absolute; inset: 0; background: radial-gradient(60% 62% at 50% 0%, rgba(217,181,107,0.16) 0%, rgba(7,7,9,0) 64%); }
.page-hero__inner { position: relative; max-width: 760px; margin: 0 auto; padding: 88px 24px 66px; text-align: center; }
.page-hero__eyebrow { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.8rem; font-weight: 600; color: var(--gold-light); margin: 0 0 18px; }
.page-hero__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.5rem, 5vw, 3.8rem); line-height: 1.05; margin: 0; color: #faf6ec; }
.page-hero__lede { margin: 18px auto 0; max-width: 34em; font-size: 1.08rem; line-height: 1.7; color: var(--ink-soft); }
.page-hero__rule { height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0.55; }

/* ── setup page (steps + safety) ────────────────────── */
.steps { background: var(--bg); flex: 1; }
.steps__inner { max-width: 760px; margin: 0 auto; padding: 72px 24px; }
.step { display: flex; gap: 24px; align-items: flex-start; padding: 34px 0; border-bottom: 1px solid var(--rule); }
.step__num {
  flex: none; width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid var(--gold-line); background: var(--gold-fill);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ceremonial); font-size: 1.4rem; color: var(--gold);
}
.step__body { padding-top: 4px; min-width: 0; }
.step__body h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; margin: 0 0 10px; }
.step__lede { margin: 0; line-height: 1.65; color: var(--ink-soft); }
.step__list { list-style: none; margin: 20px 0 0; padding: 0; }
.step__list li { display: flex; gap: 14px; margin-top: 12px; line-height: 1.6; color: var(--ink-soft); }
.step__list li:first-child { margin-top: 0; }
.step__list li strong { color: var(--ink); }
.step__list .rn { flex: none; font-family: var(--font-ceremonial); color: var(--gold); min-width: 1.4em; }
.bullets { list-style: none; margin: 20px 0 0; padding: 0; }
.bullets li { display: flex; gap: 12px; margin-top: 8px; color: var(--ink-soft); }
.bullets li strong { color: var(--ink); }
.bullets .dot { color: var(--gold); }
.note {
  margin: 20px 0 0; padding: 16px 20px; border: 1px solid var(--gold-line);
  background: var(--gold-fill); border-radius: 10px; font-size: 0.92rem;
  line-height: 1.6; color: var(--ink-soft);
}
.note i, .note .ic { color: var(--gold); }
.safety { max-width: 760px; margin: 0 auto; padding: 0 24px 72px; }
.safety__box { padding: 24px 26px; border: 1px solid var(--gold-line); background: var(--gold-fill); border-radius: 14px; }
.safety__box h3 { font-family: var(--font-display); font-size: 1.2rem; margin: 0; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.safety__box h3 i, .safety__box h3 .ic { color: var(--gold); }
.safety__box p { margin: 10px 0 0; line-height: 1.65; color: var(--ink-soft); }

/* ── how-it-works page (video examples) ─────────────── */
.examples { background: var(--bg); }
.examples__inner { max-width: 1000px; margin: 0 auto; padding: 80px 24px; }
.examples__grid { display: grid; gap: 40px; grid-template-columns: 1fr; margin-top: 8px; }
.example { display: grid; gap: 30px; grid-template-columns: 1fr 1fr; align-items: center; }
.example:nth-child(even) .example__media { order: 2; }
.example__media {
  position: relative; border-radius: 16px; overflow: hidden; background: var(--bg-dark);
  box-shadow: var(--shadow-md); border: 1px solid var(--rule);
}
.example__media video, .example__media iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.example__placeholder {
  aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; color: var(--ink-soft); text-align: center; padding: 24px;
  background: radial-gradient(70% 70% at 50% 30%, rgba(217,181,107,0.16), rgba(7,7,9,0) 65%), var(--bg-dark);
}
.example__play { width: 62px; height: 62px; border-radius: 50%; border: 1px solid var(--gold-line); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--gold-light); }
.example__placeholder p { margin: 0; font-size: 0.86rem; letter-spacing: 0.04em; }
.example__num { font-family: var(--font-ceremonial); color: var(--gold); font-size: 0.95rem; letter-spacing: 0.1em; margin: 0 0 8px; }
.example__body h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; margin: 0 0 12px; }
.example__body p { margin: 0; line-height: 1.7; color: var(--ink-soft); }
.example__tag { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 16px; font-size: 0.8rem; font-weight: 600; color: var(--gold-soft); background: var(--gold-fill); border: 1px solid var(--gold-line); padding: 0.3rem 0.75rem; border-radius: 100px; }
.examples__cta { text-align: center; margin-top: 64px; }
.examples__cta p { margin: 0 0 20px; font-family: var(--font-display); font-style: italic; font-size: 1.25rem; color: var(--ink-soft); }

/* ── demo widget ────────────────────────────────────── */
.demo { background: var(--bg); flex: 1; }
.demo__inner { max-width: 720px; margin: 0 auto; padding: 56px 24px 80px; }
.demo__frame {
  background: var(--bg-elev); border: 1px solid var(--rule); border-radius: 18px;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.demo__bar { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: var(--bg-dark); color: var(--ink); border-bottom: 1px solid var(--rule); }
.demo__avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--gold-fill); border: 1px solid var(--gold-line); display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 1.1rem; }
.demo__bar-name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.demo__bar-sub { font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink-soft); }
.demo__bar-status { margin-left: auto; font-size: 0.72rem; color: #86d086; display: inline-flex; align-items: center; gap: 6px; }
.demo__bar-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #6ec46e; box-shadow: 0 0 8px rgba(110,196,110,0.6); }

/* email gate */
.gate { padding: 44px 34px; text-align: center; }
.gate__ornament { color: var(--gold); letter-spacing: 0.8em; opacity: 0.9; font-size: 1rem; margin: 0 0 16px; }
.gate h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; margin: 0; }
.gate__lede { margin: 14px auto 0; max-width: 34em; line-height: 1.65; color: var(--ink-soft); }
.gate__form { margin: 28px auto 0; max-width: 440px; display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.gate__field { position: relative; flex: 1 1 240px; min-width: 0; }
.gate__field i, .gate__field .ic { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--gold); font-size: 0.95rem; pointer-events: none; }
.gate__input {
  width: 100%; height: 100%; box-sizing: border-box; font-family: var(--font-ui); font-size: 0.95rem;
  color: var(--ink); background: var(--bg-elev-2); padding: 0.8rem 0.9rem 0.8rem 2.4rem;
  border: 1px solid var(--rule-strong); border-radius: 8px; outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.gate__input::placeholder { color: var(--ink-mute); }
.gate__input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--focus-ring); }
.gate__submit { flex: none; }
.gate__error { margin: 14px 0 0; font-size: 0.88rem; color: #e08a8a; min-height: 1.2em; }
.gate__fineprint { margin: 22px auto 0; max-width: 34em; font-size: 0.8rem; color: var(--ink-mute); line-height: 1.6; }
.gate__consent { display: flex; align-items: flex-start; gap: 10px; text-align: left; margin: 20px auto 0; max-width: 34em; font-size: 0.84rem; color: var(--ink-soft); }
.gate__consent input { margin-top: 3px; accent-color: var(--gold); }

/* chat */
.chat { display: none; }
.chat.is-open { display: block; }
.chat__log { height: 420px; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 16px; background: var(--bg); }
.msg { max-width: 82%; padding: 12px 16px; border-radius: 14px; line-height: 1.55; font-size: 0.95rem; white-space: pre-wrap; word-wrap: break-word; }
.msg--bot { align-self: flex-start; background: var(--bg-elev-2); border: 1px solid var(--rule); border-bottom-left-radius: 4px; color: var(--ink); }
.msg--user { align-self: flex-end; background: var(--gold); color: var(--on-gold); border-bottom-right-radius: 4px; }
.msg--typing { color: var(--ink-mute); font-style: italic; }
.chat__hint { padding: 0 24px 4px; background: var(--bg); }
.chat__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 24px 16px; background: var(--bg); border-top: 1px solid var(--rule); }
.chip { font-family: var(--font-ui); font-size: 0.82rem; color: var(--gold-soft); background: var(--gold-fill); border: 1px solid var(--gold-line); border-radius: 100px; padding: 0.4rem 0.85rem; cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.chip:hover { background: var(--gold-fill-2); border-color: var(--gold); }
.chat__form { display: flex; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--rule); background: var(--bg-elev); }
.chat__input {
  flex: 1; font-family: var(--font-ui); font-size: 0.95rem; color: var(--ink); background: var(--bg-elev-2);
  padding: 0.7rem 0.9rem; border: 1px solid var(--rule-strong); border-radius: 10px; outline: none; resize: none;
  transition: border-color 0.2s, box-shadow 0.2s; max-height: 120px;
}
.chat__input::placeholder { color: var(--ink-mute); }
.chat__input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--focus-ring); }
.chat__send { flex: none; width: 46px; border-radius: 10px; background: var(--gold); color: var(--on-gold); border: 1.5px solid var(--gold); cursor: pointer; font-size: 1.1rem; transition: background 0.2s; }
.chat__send:hover { background: var(--gold-soft); border-color: var(--gold-soft); }
.chat__send:disabled { opacity: 0.5; cursor: default; }
.chat__meta { padding: 10px 20px 16px; font-size: 0.76rem; color: var(--ink-mute); text-align: center; background: var(--bg-elev); }
.demo__disclaimer { margin: 22px auto 0; max-width: 40em; text-align: center; font-size: 0.82rem; color: var(--ink-mute); line-height: 1.6; }
.cab-chat__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 20px 16px; border-top: 1px solid var(--rule); background: var(--bg-elev); }
.cab-chat__foot .chat__meta { flex: 1 1 220px; margin: 0; padding: 0; text-align: left; background: transparent; }
.cab-chat__clear { flex: none; margin: 0; }

/* Attach-a-file button in the chat composer (paperclip). Mirrors the send
   button's size but reads as a quiet, ghost control. */
.chat__attach {
  flex: none; width: 46px; border-radius: 10px; background: var(--bg-elev-2); color: var(--gold-soft);
  border: 1px solid var(--rule-strong); cursor: pointer; font-size: 1.1rem;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.chat__attach:hover { border-color: var(--gold); color: var(--gold); }
.chat__attach:disabled { opacity: 0.5; cursor: default; }

/* Back chevron in the chat header — a way out of the full-screen mobile chat.
   Hidden on desktop, where the site header already carries navigation. */
.demo__bar-back { display: none; align-items: center; justify-content: center; width: 34px; height: 34px; margin-left: -6px; border-radius: 50%; color: var(--ink-soft); text-decoration: none; font-size: 1.2rem; flex: none; }
.demo__bar-back:hover { color: var(--gold); }

/* ── Mobile: the cabinet chat becomes a plain, full-screen messenger ──────
   On a phone the page should read like a chat and nothing else — the chat
   header, the message log, the composer (with send + add-file) — so we strip
   the site header/footer, the marketing hero, the suggestion chips, the
   footer bar (meta + "Clear chat"), and the bottom action links, then let the
   frame fill the viewport edge to edge. */
@media (max-width: 640px) {
  .cab-chat-page .site-header,
  .cab-chat-page .site-footer,
  .cab-chat-page .page-hero,
  .cab-chat-page .scroll-progress,
  .cab-chat-page #chatChips,
  .cab-chat-page .cab-chat__foot,
  .cab-chat-page .cab__actions { display: none; }

  /* Pin the page to the viewport so ONLY the message log scrolls. Without this
     the flex items keep their default min-height:auto, refuse to shrink, and the
     whole page scrolls instead — which snaps back to the top every time the log
     re-renders on a new reply (the "jumps to the top" bug). */
  .cab-chat-page.has-sticky-footer { min-height: 100dvh; height: 100dvh; overflow: hidden; }
  .cab-chat-page .demo { flex: 1; display: flex; min-height: 0; }
  .cab-chat-page .demo__inner { max-width: none; margin: 0; padding: 0; flex: 1; display: flex; min-height: 0; }
  .cab-chat-page .demo__frame {
    flex: 1; display: flex; flex-direction: column; min-height: 0;
    border: none; border-radius: 0; box-shadow: none;
  }
  .cab-chat-page .demo__bar-back { display: inline-flex; }
  .cab-chat-page .chat.is-open { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .cab-chat-page .chat__log { flex: 1; height: auto; min-height: 0; }
  /* Keep the composer clear of the iOS home indicator. */
  .cab-chat-page .chat__form { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}

/* ── auth (sign in / sign up) ───────────────────────── */
.auth { background: var(--bg); flex: 1; display: flex; align-items: center; justify-content: center; padding: 64px 24px; }
.auth__card { width: 100%; max-width: 440px; background: var(--bg-elev); border: 1px solid var(--rule); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 44px 36px; text-align: center; }
.auth__ornament { color: var(--gold); letter-spacing: 0.8em; opacity: 0.9; font-size: 1rem; margin: 0 0 14px; }
.auth__title { font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; margin: 0; }
.auth__lede { margin: 14px auto 0; max-width: 30em; line-height: 1.6; color: var(--ink-soft); }
.auth__google { display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem; width: 100%; margin: 28px 0 0; padding: 0.85rem 1.2rem; font-family: var(--font-ui); font-weight: 600; font-size: 0.95rem; color: var(--ink); background: var(--bg-elev-2); border: 1.5px solid var(--rule-strong); border-radius: 10px; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; }
.auth__google:hover { border-color: var(--gold-line); background: var(--gold-fill); color: var(--ink); }
/* The real Google mark on its required white ground — a letter G drawn in our
   display face is both off-brand and against Google's sign-in guidelines. */
.auth__google-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid #e0e0e0; font-size: 15px; }
.auth__pending { margin: 26px 0 0; padding: 16px 18px; border: 1px solid var(--gold-line); background: var(--gold-fill); border-radius: 10px; font-size: 0.86rem; line-height: 1.6; color: var(--ink-soft); }
.auth__pending i, .auth__pending .ic { color: var(--gold); margin-right: 6px; }
.auth__switch { margin: 24px 0 0; font-size: 0.9rem; color: var(--ink-soft); }
.auth__switch a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.auth__fine { margin: 18px 0 0; font-size: 0.78rem; color: var(--ink-mute); line-height: 1.55; }

/* email / password form on the auth card */
.auth__divider { display: flex; align-items: center; gap: 14px; margin: 22px 0 4px; color: var(--ink-mute); font-family: var(--font-ui); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.14em; }
.auth__divider::before, .auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.auth__form { margin: 22px 0 0; text-align: left; }
.auth__field { display: block; margin: 14px 0 0; }
.auth__label { display: block; margin: 0 0 6px; font-family: var(--font-ui); font-size: 0.82rem; font-weight: 500; color: var(--ink-soft); }
.auth__form input { width: 100%; padding: 0.72rem 0.9rem; font-family: var(--font-ui); font-size: 0.95rem; color: var(--ink); background: var(--bg-elev-2); border: 1.5px solid var(--rule-strong); border-radius: 10px; transition: border-color 0.2s, box-shadow 0.2s; }
.auth__form input::placeholder { color: var(--ink-mute); }
.auth__form input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--focus-ring); }
.auth__submit { width: 100%; margin: 22px 0 0; justify-content: center; }
.auth__error { margin: 6px 0 0; padding: 12px 14px; border: 1px solid var(--gold-line); background: rgba(224,138,138,0.08); border-radius: 10px; font-size: 0.86rem; line-height: 1.5; color: #e08a8a; }
.auth__error p { margin: 0; }
.auth__field-error { display: block; margin: 6px 0 0; font-size: 0.82rem; color: #e08a8a; }
.auth__forgot { margin: 14px 0 0; text-align: center; font-size: 0.86rem; }
.auth__forgot a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.auth__forgot a:hover { color: var(--gold); }

/* ── cabinet ────────────────────────────────────────── */
.cab { background: var(--bg); flex: 1; }
.cab__inner { max-width: 900px; margin: 0 auto; padding: 56px 24px 80px; }
.cab__grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cab-card { background: var(--bg-elev); border: 1px solid var(--rule); border-radius: 16px; padding: 28px; box-shadow: var(--shadow); }
.cab-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cab-card__head h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; margin: 0; }
.cab-card__body { margin: 0 0 18px; line-height: 1.6; color: var(--ink-soft); }
.cab-badge { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.25rem 0.65rem; border-radius: 100px; white-space: nowrap; }
.cab-badge--pending { color: var(--gold-soft); background: var(--gold-fill); border: 1px solid var(--gold-line); }
.cab-badge--active { color: #86d29a; background: rgba(93,193,122,0.1); border: 1px solid rgba(93,193,122,0.32); }
.cab-badge--paused { color: var(--ink-soft); background: var(--bg-elev-2); border: 1px solid var(--rule-strong); }
.cab-badge--error { color: #e08a8a; background: rgba(224,138,138,0.1); border: 1px solid rgba(224,138,138,0.32); }
.cab-list { list-style: none; margin: 0; padding: 0; }
.cab-list li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 0.92rem; }
.cab-list li:last-child { border-bottom: 0; }
.cab-list span { color: var(--ink-soft); }
.cab-list strong { color: var(--ink); font-weight: 600; }
.cab__actions { margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }

/* ── privacy screen ─────────────────────────────────── */
.priv-path { font-family: var(--font-ui); font-size: 0.85em; padding: 0.12em 0.4em; background: var(--bg-elev-2); border: 1px solid var(--rule); border-radius: 6px; color: var(--gold-soft); }
.priv-danger { border-color: rgba(224,138,138,0.28); }
.priv-confirm { display: block; margin: 0 0 14px; }
.priv-confirm span { display: block; margin: 0 0 6px; font-size: 0.86rem; color: var(--ink-soft); }
.priv-confirm input { width: 100%; max-width: 260px; padding: 0.6rem 0.8rem; font-family: var(--font-ui); font-size: 0.95rem; letter-spacing: 0.08em; color: var(--ink); background: var(--bg-elev-2); border: 1.5px solid var(--rule-strong); border-radius: 10px; }
.priv-confirm input:focus { outline: none; border-color: #e08a8a; box-shadow: 0 0 0 3px rgba(224,138,138,0.14); }
.priv-danger__btn { color: #e08a8a; border-color: rgba(224,138,138,0.32); }
.priv-danger__btn:hover { border-color: #e08a8a; }

/* ── onboarding wizard ──────────────────────────────── */
.ob-form .cab-card + .cab-card { margin-top: 22px; }
.ob-step { display: inline-flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; margin-right: 8px; font-size: 0.8em; font-weight: 700; color: var(--on-gold); background: var(--gold); border-radius: 50%; }
.ob-field { display: block; margin: 0 0 4px; }
.ob-field + .ob-field, .ob-row + .ob-field { margin-top: 16px; }
.ob-label { display: block; margin: 0 0 6px; font-family: var(--font-ui); font-size: 0.86rem; font-weight: 500; color: var(--ink-soft); }
.ob-help { display: block; margin: 8px 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--ink-mute); }
.ob-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; }
.ob-row .ob-field { flex: 1 1 200px; margin-top: 0; }
.ob-form input[type="text"], .ob-form input[type="time"], .ob-form select, .ob-form textarea { width: 100%; padding: 0.7rem 0.9rem; font-family: var(--font-ui); font-size: 0.95rem; color: var(--ink); background: var(--bg-elev-2); border: 1.5px solid var(--rule-strong); border-radius: 10px; }
.ob-form textarea { line-height: 1.55; resize: vertical; }
.ob-form input[type="text"]:focus, .ob-form input[type="time"]:focus, .ob-form select:focus, .ob-form textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--focus-ring); }
.ob-check { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; font-family: var(--font-ui); color: var(--ink); cursor: pointer; }
.ob-check input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.ob-check small { color: var(--ink-mute); }
.bot-link { margin: 16px 0 0; }
.bot-link__step { margin: 18px 0 8px; font-size: 0.9rem; color: var(--ink-soft); }
.bot-link__cmd { display: flex; align-items: stretch; gap: 8px; }
.bot-link__cmd code { flex: 1 1 auto; min-width: 0; padding: 10px 12px; font-family: var(--font-ui); font-size: 0.9rem; color: var(--gold-soft); background: var(--bg); border: 1px solid var(--rule-strong); border-radius: 8px; overflow-x: auto; white-space: nowrap; }
.bot-link__copy { flex: none; }

/* "How to reach your bot" numbered steps */
.bot-how { margin: 10px 0 14px; padding-left: 1.25rem; }
.bot-how li { margin: 6px 0; font-size: 0.92rem; color: var(--ink-soft); }

/* Telegram-ID how-to disclosure under the field */
.tg-help { margin: 8px 0 0; }
.tg-help__toggle { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 0.82rem; color: var(--ink-mute); cursor: pointer; list-style: none; user-select: none; }
.tg-help__toggle::-webkit-details-marker { display: none; }
.tg-help__toggle:hover { color: var(--gold-soft); }
.tg-help__steps { margin: 10px 0 6px; padding-left: 1.25rem; }
.tg-help__steps li { margin: 5px 0; font-size: 0.86rem; color: var(--ink-soft); }
.tg-help__note { margin: 6px 0 0; font-size: 0.8rem; color: var(--ink-mute); }

/* Telegram Login widget — the one-tap alternative to the how-to disclosure above */
.tg-login { margin: 4px 0 12px; }
.tg-login__lede { margin: 0 0 8px; font-size: 0.86rem; color: var(--ink-soft); }
.tg-login__status { margin: 8px 0 0; font-size: 0.82rem; color: var(--ink-mute); min-height: 1.1em; }
.tg-login__status--ok { color: var(--gold-soft); }
.tg-login__or { margin: 2px 0 6px; font-size: 0.78rem; color: var(--ink-mute); }

/* Onboarding wizard — one screen at a time (see onboarding-wizard.js) */
.wiz { background: var(--bg); flex: 1; display: flex; align-items: center; min-height: 70vh; }
.wiz__inner { max-width: 640px; width: 100%; margin: 0 auto; padding: 48px 24px 80px; }
.wiz__progress { display: flex; align-items: center; justify-content: space-between; margin: 0 0 32px; }
.wiz__progress-text { font-family: var(--font-ui); font-size: 0.82rem; color: var(--ink-mute); }
.wiz__dots { display: flex; gap: 8px; }
.wiz__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rule-strong); transition: background var(--dur-fast); }
.wiz__dot.is-active { background: var(--gold); }
.wiz__dot.is-done { background: var(--gold-line); }

.wiz-step { display: none; animation: wizIn 0.35s ease; }
.wiz-step.is-active { display: block; }
@keyframes wizIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wiz-step--shake { animation: wizShake 0.35s ease; }
@keyframes wizShake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.wiz-step__eyebrow { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.76rem; font-weight: 600; color: var(--gold); margin: 0 0 10px; }
.wiz-step__title { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; margin: 0 0 20px; }
.wiz-step__title--big { font-size: clamp(2rem, 6vw, 3rem); line-height: 1.15; }
.wiz-fieldset { border: 0; margin: 0; padding: 0; }
.wiz-fieldset legend { padding: 0; width: 100%; }

.wiz-input { width: 100%; box-sizing: border-box; padding: 0.85rem 1rem; font-family: var(--font-ui); font-size: 1.05rem; color: var(--ink); background: var(--bg-elev-2); border: 1.5px solid var(--rule-strong); border-radius: 12px; }
.wiz-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--focus-ring); }
.wiz-input--big { padding: 0.2em 0; font-family: var(--font-display); font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 600; background: transparent; border: none; border-bottom: 2px solid var(--rule-strong); border-radius: 0; }
.wiz-input--big:focus { border-color: var(--gold); box-shadow: none; }

.wiz-choices { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.wiz-choices label { display: flex; align-items: center; gap: 12px; padding: 0.9rem 1.1rem; font-family: var(--font-ui); font-size: 1rem; color: var(--ink); background: var(--bg-elev-2); border: 1.5px solid var(--rule-strong); border-radius: 12px; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.wiz-choices label:hover { border-color: var(--gold-line); }
.wiz-choices label:has(input:checked) { background: var(--gold-fill); border-color: var(--gold); }
.wiz-choices input { accent-color: var(--gold); }

.wiz-actions { display: flex; align-items: center; gap: 14px; margin: 28px 0 0; }
.wiz-actions--minimal { margin: 14px 0 0; }

/* ── CLI AI pairing ─────────────────────────────────── */
.cli-token { margin: 16px 0; padding: 16px 18px; border: 1px solid var(--gold-line); background: var(--gold-fill); border-radius: 12px; }
.cli-token__label { margin: 0 0 8px; font-size: 0.84rem; color: var(--ink-soft); }
.cli-token__value { display: block; padding: 10px 12px; font-family: var(--font-ui); font-size: 0.9rem; color: var(--gold-soft); background: var(--bg); border: 1px solid var(--rule-strong); border-radius: 8px; word-break: break-all; }
.cli-token__hint { margin: 14px 0 6px; font-size: 0.82rem; color: var(--ink-mute); }
.cli-token__cmd { display: block; padding: 10px 12px; font-family: var(--font-ui); font-size: 0.82rem; color: var(--ink-soft); background: var(--bg); border: 1px solid var(--rule); border-radius: 8px; overflow-x: auto; white-space: nowrap; }
.cli-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.cli-actions form { margin: 0; }

/* Advanced disclosure (native <details>) */
.adv { margin: 22px 0 0; }
.adv__toggle { display: inline-flex; align-items: center; gap: 8px; padding: 0.55rem 0.9rem; font-family: var(--font-ui); font-weight: 600; font-size: 0.86rem; color: var(--ink-soft); background: var(--bg-elev-2); border: 1px solid var(--rule-strong); border-radius: 10px; cursor: pointer; list-style: none; user-select: none; }
.adv__toggle::-webkit-details-marker { display: none; }
.adv__toggle:hover { color: var(--ink); border-color: var(--gold-line); }
.adv__chevron { font-size: 0.8rem; color: var(--gold); transition: transform 0.2s; }
.adv[open] .adv__chevron { transform: rotate(90deg); }
.adv__body { margin-top: 14px; }
.ob-choices { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.ob-choices label { display: inline-flex; align-items: center; gap: 8px; padding: 0.6rem 1rem; font-family: var(--font-ui); font-size: 0.92rem; color: var(--ink); background: var(--bg-elev-2); border: 1.5px solid var(--rule-strong); border-radius: 10px; cursor: pointer; }
.ob-choices label:hover { border-color: var(--gold-line); }
.ob-choices input { accent-color: var(--gold); }
.ob-actions { margin: 24px 0 0; }
.ob-skip { margin: 18px 0 0; text-align: center; }
.ob-skip__btn { background: none; border: 0; padding: 0; font-family: var(--font-ui); font-size: 0.88rem; color: var(--ink-mute); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ob-skip__btn:hover { color: var(--ink-soft); }

/* ── memory screen ──────────────────────────────────── */
.page-hero__back { color: var(--gold-soft); text-decoration: none; }
.page-hero__back:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.cab .cab-card + .cab-card { margin-top: 22px; }
.mem-flash { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.mem-flash__item { padding: 12px 16px; border-radius: 10px; font-size: 0.9rem; border: 1px solid var(--rule-strong); background: var(--bg-elev-2); color: var(--ink); }
.mem-flash__item--success { border-color: rgba(93,193,122,0.32); background: rgba(93,193,122,0.1); color: #86d29a; }
.mem-flash__item--error { border-color: rgba(224,138,138,0.32); background: rgba(224,138,138,0.1); color: #e08a8a; }
.mem-quota { font-size: 0.8rem; color: var(--ink-soft); white-space: nowrap; }
.mem-note__input, .mem-file { width: 100%; font-family: var(--font-ui); color: var(--ink); background: var(--bg-elev-2); border: 1.5px solid var(--rule-strong); border-radius: 10px; }
.mem-note__input { padding: 0.7rem 0.9rem; font-size: 0.95rem; line-height: 1.55; resize: vertical; }
.mem-note__input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--focus-ring); }
.mem-note__actions { margin: 14px 0 0; }
.mem-upload { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mem-file { flex: 1 1 240px; min-width: 0; padding: 0.5rem 0.7rem; font-size: 0.88rem; }
.mem-file::file-selector-button { margin-right: 12px; padding: 0.4rem 0.8rem; font-family: var(--font-ui); font-weight: 600; font-size: 0.82rem; color: var(--ink); background: var(--bg-elev); border: 1px solid var(--rule-strong); border-radius: 8px; cursor: pointer; }
.mem-hint { margin: 10px 0 0; font-size: 0.8rem; color: var(--ink-mute); }
.mem-list { list-style: none; margin: 20px 0 0; padding: 0; }
.mem-list__row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.mem-list__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 500; }
.mem-list__meta { flex: none; font-size: 0.82rem; color: var(--ink-soft); white-space: nowrap; }
.mem-list__del { flex: none; margin: 0; }
.mem-del { background: none; border: 0; padding: 0; font-family: var(--font-ui); font-size: 0.84rem; color: var(--ink-mute); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.mem-del:hover { color: #e08a8a; }
.mem-danger { margin: 20px 0 0; }
.mem-danger__btn { color: #e08a8a; border-color: rgba(224,138,138,0.32); }
.mem-danger__btn:hover { border-color: #e08a8a; }
.mem-empty { margin: 20px 0 0; font-size: 0.9rem; color: var(--ink-mute); }
.cab-steps { margin: 0 0 18px; padding-left: 1.2rem; line-height: 1.9; color: var(--ink-soft); }
.cab-steps strong { color: var(--ink); }
.cab__note { margin: 34px 0 0; text-align: center; font-family: var(--font-display); font-style: italic; color: var(--ink-soft); }

/* ── responsive ─────────────────────────────────────── */
@media (max-width: 760px) {
  .example { grid-template-columns: 1fr; }
  .example:nth-child(even) .example__media { order: 0; }
}
/* ── phones: the links collapse behind a menu, the CTA does not ──────────
   Previously .site-nav__link was simply display:none below 640px with nothing
   to replace it, so a priest on a phone — the device this product is built
   around — had no way to reach "What it does", "How it works" or the demo
   from the header at all. */
@media (max-width: 640px) {
  .site-header__inner { flex-wrap: wrap; gap: 12px; padding: 10px 20px; }
  .wordmark { flex: 1 1 auto; min-width: 0; }
  /* The descriptor costs ~110px, which is the difference between the bar
     holding wordmark + CTA + menu on one row and the button wrapping onto a
     second. The name carries the identity on its own at this size. */
  .wordmark__sub { display: none; }
  .site-header__actions { order: 2; }
  .nav-toggle {
    order: 3; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none; cursor: pointer;
    color: var(--ink-soft); background: var(--bg-elev-2);
    border: 1px solid var(--rule-strong); border-radius: 10px;
    transition: color var(--dur-fast), border-color var(--dur-fast);
  }
  .nav-toggle[aria-expanded="true"] { color: var(--gold); border-color: var(--gold-line); background: var(--gold-fill); }

  .site-nav {
    order: 4; flex-basis: 100%; margin-left: 0; display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 4px 0 8px; border-top: 1px solid var(--rule);
  }
  .site-nav.is-open { display: flex; }
  .site-nav__link { display: flex; align-items: center; min-height: 48px; font-size: 1rem; }
  .site-nav__link + .site-nav__link { border-top: 1px solid var(--line-cool); }
  .site-nav__link::after { display: none; }  /* the sliding underline is a desktop gesture */
}

/* ── touch: nothing you tap should be smaller than a fingertip ───────────
   Scoped to coarse pointers so the desktop keeps its compact 32px controls. */
@media (pointer: coarse) {
  .btn, .btn-primary, .btn-secondary, .chip, .auth__google,
  .waitlist__submit, .chat__send, .chat__attach, .nav-toggle { min-height: 44px; }
  .mem-file::file-selector-button { min-height: 36px; }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
  .gate__consent, .ob-check { gap: 12px; padding: 4px 0; }
  .wiz-choices label, .ob-choices label { min-height: 48px; }
  /* Standalone text links get a real tap area without changing how they read.
     Links set inside a running sentence are deliberately left alone: WCAG
     2.5.5 and 2.5.8 both exempt inline text links, and forcing a 44px box on
     one would push the line it sits in apart. */
  .auth__switch a, .auth__forgot a, .voice__more a, .waitlist__setup a,
  .mem-del, .ob-skip__btn, .tg-help__toggle, .page-hero__back, .announce a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .wordmark { min-height: 44px; }
  .skip-link { min-height: 44px; }
  /* The footer's middle-dot run is a desktop typographic device; on a phone it
     becomes a column of 44px rows instead of a dense wrapped paragraph. */
  .site-footer__inner { flex-direction: column; gap: 28px; }
  .site-footer__right { text-align: left; }
  .site-footer__links { display: flex; flex-direction: column; align-items: flex-start; }
  .site-footer__links a { display: flex; align-items: center; min-height: 44px; }
  .site-footer__dot { display: none; }
}

/* Reduced motion means no travel — not no feedback. Killing every transition
   also killed the colour and border response on hover and focus, which is
   what tells you a control is live. Keyframes and movement stop; colour,
   background, border and shadow keep their short crossfade. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-property: color, background-color, border-color, box-shadow, opacity, outline-color !important;
    transition-duration: var(--dur-fast) !important;
    scroll-behavior: auto !important;
  }
  /* Anything whose whole point is displacement stays put. */
  .btn:hover, .btn-primary:hover, .btn-secondary:hover,
  .benefit-card:hover, .keep-card:hover { transform: none !important; }
}

/* Reveals are a scroll effect; on paper everything is simply present. */
@media print {
  .js-reveal, [data-reveal], .js-reveal-ready .js-reveal, .js-reveal-ready [data-reveal] {
    opacity: 1 !important; transform: none !important;
  }
  .scroll-progress, .hero__scroll, .nav-toggle, .skip-link { display: none !important; }
}

/* ============================================================
   LANDING — "Midnight Vespers"
   ------------------------------------------------------------
   One deep ground from the hero rule to the closing block, parted
   by whitespace and gold hairlines. Type is the site-wide set
   declared at the top of this file: Cormorant Garamond display,
   Newsreader prose, Inter for eyebrows / nav / buttons.
   ============================================================ */

body.landing { background: var(--bg); }
body.landing .site-nav__link { font-family: var(--font-ui); font-size: 14px; font-weight: 500; letter-spacing: 0.04em; }
body.landing .waitlist__input:focus { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); border-color: var(--gold); }

/* ── section shell: single ivory ground, hairline between blocks (§3) ── */
/* Unequal padding (more above than below) sets a gentle downward rhythm.
   Section partings are explicit <hr class="section-rule"> in the flow,
   never a border inside a section. */
.voice { background: var(--bg); padding: clamp(48px, 6vw, 88px) 24px clamp(36px, 4.5vw, 64px); }
.voice--flush { padding-top: clamp(40px, 5vw, 72px); }   /* first block, under the hero rule */
.voice__inner { max-width: 720px; margin: 0 auto; }
.voice__inner--wide { max-width: 960px; }

.section-rule { border: 0; border-top: 1px solid var(--gold-line-soft); width: 96px; margin: 0 auto; }
.section-star { text-align: center; color: var(--gold); font-size: 14px; padding: 10px 0; background: var(--bg); }

.voice__head { margin: 0 0 40px; }
.voice__head--center { text-align: center; }
.voice__eyebrow {
  font-family: var(--font-ui); text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 12px;
  font-weight: 600; color: var(--gold); margin: 0 0 12px;
}
.voice__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 3.8vw, 2.9rem); line-height: 1.15;
  margin: 0; color: var(--ink);
}

/* ── running prose ─────────────────────────────────── */
.prose { font-family: var(--font-prose); color: var(--ink); font-size: var(--prose-size); line-height: 1.7; }
.prose p { margin: 0 0 1.15em; max-width: var(--measure); }
.prose p:last-child { margin-bottom: 0; }
.prose__lead { color: var(--ink); }

/* ── attendant lists — hanging em-dash in gold ─────── */
.attendant-list { list-style: none; margin: 1.3em 0 0; padding-left: 0; font-family: var(--font-prose); }
.attendant-list li {
  position: relative; padding-left: 1.6em; margin: 0 0 0.8em; max-width: var(--measure);
  font-size: var(--prose-size); line-height: 1.7; color: var(--ink-soft);
}
.attendant-list li:last-child { margin-bottom: 0; }
.attendant-list li::before { content: "—"; position: absolute; left: 0; top: 0; color: var(--gold); font-weight: 500; }

.voice__point-lead { color: var(--ink); font-weight: 600; }

/* ── honest disclaimer sub-block ───────────────────── */
.voice__caveat {
  margin: 48px 0 0; padding: 30px 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.voice__caveat-title {
  font-family: var(--font-ui); text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.78rem; font-weight: 600;
  color: var(--gold); margin: 0 0 16px;
}
.voice__caveat p {
  font-family: var(--font-prose); font-size: 1.05rem; line-height: 1.7;
  color: var(--ink-soft); margin: 0 0 1em; max-width: var(--measure);
}
.voice__caveat p:last-child { margin-bottom: 0; }

/* ── "How far to trust me" — two columns + hairline divide ── */
.trust__intro {
  font-family: var(--font-prose); font-size: 1.2rem; line-height: 1.7;
  color: var(--ink); max-width: var(--measure); margin: 0 auto 48px;
  text-align: center;
}
.trust__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.trust__cols > :first-child { padding-right: 64px; }
.trust__cols > * + * { border-left: 1px solid var(--rule); padding-left: 64px; }
.trust__col-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.25rem, 1.6vw, 1.375rem);
  color: var(--ink); margin: 0 0 20px;
}
.trust__closing {
  font-family: var(--font-prose); font-size: var(--prose-size); line-height: 1.7;
  color: var(--ink-soft); max-width: var(--measure); margin: 48px auto 0;
  text-align: center;
}

/* ── pull-quote ────────────────────────────────────── */
.pull-quote {
  font-family: var(--font-display), Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(24px, 3.2vw, 32px);
  line-height: 1.35;
  color: var(--gold-soft);
  text-align: center;
  max-width: 32ch;
  margin: 2.4rem auto 1.6rem;
  position: relative;
}
.pull-quote::before {
  content: "\2726";
  display: block;
  color: var(--gold);
  font-size: 14px;
  margin-bottom: 0.9rem;
  font-style: normal;
}
.pull-quote::after {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  background: var(--gold);
  margin: 0.9rem auto 0;
  opacity: 0.5;
}

/* ── "Your cell is yours" ──────────────────────────── */
.portability__text {
  font-family: var(--font-prose); font-size: var(--prose-size); line-height: 1.7;
  color: var(--ink-soft); max-width: var(--measure); margin: 0;
}

/* ── CTA buttons (landing) — gold-forward on the deep ground ── */
.btn-primary {
  display: inline-block; padding: 0.9rem 1.6rem;
  background: var(--gold); color: var(--on-gold);
  border: 1px solid var(--gold); border-radius: 8px;
  font-family: var(--font-ui); font-size: 14px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  line-height: 1.2; cursor: pointer;
  box-shadow: 0 8px 24px rgba(217,181,107,0.18);
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.btn-primary:hover { background: var(--gold-soft); color: var(--on-gold); border-color: var(--gold-soft); box-shadow: 0 12px 30px rgba(217,181,107,0.28); }

.btn-secondary {
  display: inline-block; padding: 0.9rem 1.6rem;
  background: transparent; color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: 8px;
  font-family: var(--font-ui); font-size: 14px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  line-height: 1.2; cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.btn-secondary:hover { background: rgba(255,255,255,0.06); color: var(--ink); border-color: var(--gold-line); }

/* hero + closing already sit on the deepest ground; the base gold CTA reads
   as-is there, so only the secondary needs a lighter ghost outline. */
.hero .btn-secondary,
.waitlist--closing .btn-secondary {
  color: var(--ink); border-color: rgba(255,255,255,0.28);
}
.hero .btn-secondary:hover,
.waitlist--closing .btn-secondary:hover {
  background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.4);
}

/* ── closing: deepest ground that bookends the opening painting-hero ── */
.waitlist--closing { position: relative; overflow: hidden; background: var(--bg-dark); }
.waitlist--closing::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 0%, rgba(217,181,107,0.12) 0%, rgba(7,7,9,0) 62%);
}
.waitlist--closing .waitlist__inner { position: relative; }
.waitlist--closing h2 { font-family: var(--font-display); font-weight: 600; color: #faf6ec; }
.waitlist--closing .waitlist__ornament { color: var(--gold); }
.waitlist--closing .waitlist__lede { font-family: var(--font-prose); color: var(--ink-soft); }
.waitlist--closing .waitlist__fineprint { color: var(--ink-mute); }
.waitlist--closing .waitlist__setup { color: var(--ink-soft); }
.waitlist--closing .waitlist__setup a { color: var(--gold-soft); }
.waitlist--closing .waitlist__input { background: var(--bg-elev-2); border-color: var(--rule-strong); }
.waitlist--closing .waitlist__submit { flex: none; }

/* ── voice two-column layout: prose left, chat mockup right ── */
.voice__grid {
  display: grid; grid-template-columns: 1fr minmax(300px, 360px);
  gap: 56px; align-items: start; margin-top: 8px;
}
.voice__grid-aside { position: sticky; top: 96px; }
.voice__more { margin: 2em 0 0; }
.voice__more a {
  font-family: var(--font-ui); font-size: 14px; font-weight: 500;
  letter-spacing: 0.02em; color: var(--ink-soft);
  text-decoration: none; border-bottom: 1px solid var(--rule);
  transition: color 180ms ease, border-color 180ms ease;
}
.voice__more a:hover { color: var(--gold); border-color: var(--gold); }
.voice__mockup--center { display: flex; justify-content: center; margin-top: 48px; }

/* ── "What Keleinik keeps for you" cards ───────────── */
.keep-cards {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; grid-auto-rows: auto;
}
.keep-card {
  display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0;
  align-content: start; position: relative; overflow: hidden;
  min-height: 232px; padding: 24px 24px 26px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 42%), var(--bg-elev);
  border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow);
  transition: transform 0.4s var(--ease-out-soft), border-color 0.4s var(--ease-out-soft), box-shadow 0.4s var(--ease-out-soft);
}
.keep-card:hover { transform: translateY(-2px); border-color: var(--gold-line-soft); box-shadow: var(--shadow-md); }
.keep-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 13px;
  background: var(--gold-fill); border: 1px solid var(--gold-line-soft);
  color: var(--gold);
  transition: background 0.4s var(--ease-out-soft), border-color 0.4s var(--ease-out-soft), color 0.4s var(--ease-out-soft);
}
.keep-card__icon svg { display: block; }
.keep-card:hover .keep-card__icon { background: var(--gold-fill-2); border-color: var(--gold-line); color: var(--gold-soft); }
.keep-card__eyebrow {
  font-family: var(--font-ui); text-transform: uppercase;
  font-size: 11px; font-weight: 500; letter-spacing: 0.14em;
  color: var(--gold); margin: 0 0 8px;
}
.keep-card__title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.22rem;
  line-height: 1.25; color: var(--ink); margin: 0;
  text-wrap: balance; align-self: start;
}
/* Prose face, like every other run of text on the page. These descriptions
   were the only body copy on the landing set in Inter. */
.keep-card__desc {
  font-family: var(--font-prose); font-size: 0.95rem; font-weight: 400;
  line-height: 1.55; color: var(--ink-soft); margin: 10px 0 0; align-self: start;
}

/* ── Telegram chat mockup (§7) — pure HTML/CSS phone screenshot so the
      wording stays editable and it reads as the real product. Palette
      matches Telegram Dark; user bubbles are the classic Telegram blue.
      ──────────────────────────────────────────────────────────────── */
.chat-mockup { margin: 0; width: 100%; max-width: 340px; }
.chat-mockup__phone {
  --tg-bg: #0e1621;
  --tg-panel: #17212b;
  --tg-panel-edge: #22303c;
  --tg-user: #2b5278;
  --tg-user-edge: #3e7dbb;
  --tg-bot: #182533;
  --tg-white: #ffffff;
  --tg-meta: #7e8d99;
  --tg-tick: #8fd0ff;
  --tg-accent: #64b5f6;
  background: var(--tg-bg);
  border-radius: 28px;
  overflow: hidden;
  box-shadow:
    0 24px 60px rgba(20, 14, 4, 0.28),
    0 8px 20px rgba(20, 14, 4, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  font-family: -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--tg-white);
  line-height: 1.35;
}
.chat-mockup__statusbar {
  display: flex; justify-content: space-between; align-items: center;
  height: 32px; padding: 0 22px 0 24px;
  background: var(--tg-panel);
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--tg-white);
}
.chat-mockup__clock { font-variant-numeric: tabular-nums; }
.chat-mockup__indicators { display: inline-flex; align-items: center; gap: 6px; }
.chat-mockup__signal { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.chat-mockup__signal i {
  display: inline-block; width: 3px; background: #fff; border-radius: 1px;
}
.chat-mockup__signal i:nth-child(1) { height: 4px; }
.chat-mockup__signal i:nth-child(2) { height: 6px; }
.chat-mockup__signal i:nth-child(3) { height: 8px; }
.chat-mockup__signal i:nth-child(4) { height: 10px; }
.chat-mockup__wifi {
  width: 14px; height: 10px;
  background: conic-gradient(from 225deg at 50% 100%, #fff 0 90deg, transparent 90deg 360deg);
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 0 2px, #000 2.5px 4.5px, transparent 5px 6px, #000 6.5px 8.5px, transparent 9px);
          mask: radial-gradient(circle at 50% 100%, transparent 0 2px, #000 2.5px 4.5px, transparent 5px 6px, #000 6.5px 8.5px, transparent 9px);
}
.chat-mockup__battery {
  position: relative; width: 24px; height: 11px;
  border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 3px;
  background:
    linear-gradient(#fff, #fff) left center / 78% 60% no-repeat,
    transparent;
  background-origin: content-box; padding: 1px;
}
.chat-mockup__battery::after {
  content: ""; position: absolute; top: 3px; right: -3px;
  width: 2px; height: 5px; background: rgba(255, 255, 255, 0.85); border-radius: 0 1px 1px 0;
}
.chat-mockup__header {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 10px;
  background: var(--tg-panel);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.chat-mockup__back {
  color: var(--tg-accent); font-size: 22px; font-weight: 500; line-height: 1;
  margin-right: 2px;
}
.chat-mockup__avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #d4a847 0%, #8a6515 100%);
  color: #1a1408; font-size: 16px; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.chat-mockup__who { display: flex; flex-direction: column; min-width: 0; }
.chat-mockup__name { font-size: 15px; font-weight: 600; color: var(--tg-white); }
.chat-mockup__status { font-size: 12px; color: var(--tg-accent); }
.chat-mockup__body {
  position: relative;
  background: var(--tg-bg);
  padding: 14px 12px 18px;
  min-height: 220px;
  display: flex; flex-direction: column; gap: 8px;
}
.chat-mockup__body::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    radial-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 14px 14px, 22px 22px;
  background-position: 0 0, 7px 11px;
  pointer-events: none;
}
.chat-mockup__row {
  position: relative; display: flex; z-index: 1;
}
.chat-mockup__row--user { justify-content: flex-end; }
.chat-mockup__row--bot  { justify-content: flex-start; }
.chat-mockup__bubble {
  position: relative;
  max-width: 82%;
  padding: 7px 12px 20px;
  font-size: 14px; line-height: 1.38;
  border-radius: 14px;
  word-wrap: break-word;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.chat-mockup__bubble--user {
  background: var(--tg-user);
  border-bottom-right-radius: 4px;
}
.chat-mockup__bubble--bot {
  background: var(--tg-bot);
  border-bottom-left-radius: 4px;
}
.chat-mockup__text { display: block; color: var(--tg-white); }
.chat-mockup__meta {
  position: absolute; right: 10px; bottom: 5px;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
}
.chat-mockup__bubble--user .chat-mockup__meta { color: rgba(255, 255, 255, 0.7); }
.chat-mockup__ticks { color: var(--tg-tick); font-size: 12px; letter-spacing: -3px; padding-right: 2px; }
.chat-mockup__caption {
  font-family: var(--font-ui, var(--font-body));
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft); text-align: center; margin: 14px 0 0; font-weight: 600;
}

/* ── responsive: stack trust columns, tighten scale ── */
@media (max-width: 900px) {
  .voice__grid { grid-template-columns: 1fr; gap: 40px; }
  .voice__grid-aside { position: static; justify-self: start; }
  .keep-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .trust__cols { grid-template-columns: 1fr; }
  .trust__cols > :first-child { padding-right: 0; }
  .trust__cols > * + * { border-left: none; padding-left: 0; margin-top: 36px; padding-top: 36px; border-top: 1px solid var(--rule); }
  .keep-cards { grid-template-columns: 1fr; }
  .voice__mockup--center, .voice__grid-aside { justify-content: flex-start; }
  .chat-mockup { max-width: 100%; }
  :root { --prose-size: 1.0625rem; }
}
/* On a phone the painting was squeezed into a 265px strip on the right — a
   portrait scan cropped until the figure stopped reading. Let it fill the
   ground instead and sit behind the copy as atmosphere. */
@media (max-width: 640px) {
  .hero__inner { padding-bottom: 128px; }
  .hero__media { width: 100%; max-width: none; }
  .hero__media img { object-position: 62% 10%; }
  .hero__media-fade-x {
    background: linear-gradient(90deg, rgba(7,7,9,0.94) 0%, rgba(7,7,9,0.72) 45%, rgba(7,7,9,0.5) 100%);
  }
  .hero__media-fade-y {
    background: linear-gradient(0deg, rgba(7,7,9,0.95) 0%, rgba(7,7,9,0.3) 52%, rgba(7,7,9,0.55) 100%);
  }
  .hero__credit { right: 20px; bottom: 18px; }
}

/* ============================================================
   HOW-IT-WORKS — supporting copy, now on the same dark ground.
   ============================================================ */
.hiw-lede { max-width: 720px; margin: 0 auto; padding: 56px 24px 8px; }
.hiw-lede p {
  margin: 0; text-align: center; font-family: var(--font-display);
  font-style: italic; font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.6; color: var(--ink-soft);
}
.hiw-lede em { font-style: italic; color: var(--gold-soft); }
.hiw-more__inner { max-width: 760px; margin: 0 auto; padding: 80px 24px; }
.hiw-block + .hiw-block { margin-top: 64px; padding-top: 64px; border-top: 1px solid var(--rule); }
.hiw-prose { font-size: 1.05rem; line-height: 1.75; color: var(--ink-soft); }
.hiw-prose > p { margin: 0 0 1.1em; }
.hiw-prose > p:last-child { margin-bottom: 0; }
.hiw-list { list-style: none; margin: 1.1em 0 0; padding: 0; }
.hiw-list li { position: relative; padding-left: 1.5em; margin-bottom: 0.9em; line-height: 1.7; }
.hiw-list li:last-child { margin-bottom: 0; }
.hiw-list li::before { content: "—"; position: absolute; left: 0; color: var(--gold); }

/* ============================================================
   MOTION LAYER
   ------------------------------------------------------------
   Progress bar, staggered scroll reveals, nav underline, hero
   choreography, gold shimmer. Every rule here is opt-out under
   prefers-reduced-motion at the end of the file.
   ============================================================ */

/* ── Reading-progress bar ────────────────────────────── */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-soft));
  box-shadow: 0 0 10px rgba(217,181,107,0.5);
  z-index: 100; pointer-events: none; will-change: transform;
}

/* ── Animated nav underline ── */
.site-nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px;
  background: var(--gold); opacity: 0.9;
  transform: scaleX(0); transform-origin: left;
  transition: transform 240ms var(--ease-out-soft);
}
.site-nav__link:hover::after,
.site-nav__link.is-active::after { transform: scaleX(1); }

/* ── Staggered scroll reveals (translate + fade) ── */
/* Supersedes the opacity-only reveal above; JS assigns --reveal-i per group. */
/* No will-change here. Opacity and transform are promoted for the duration of
   the transition anyway, and the hint was never cleared — leaving ~30
   permanent compositor layers on the landing long after everything had
   finished appearing. */
.js-reveal-ready .js-reveal,
.js-reveal-ready [data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity 640ms var(--ease-out-soft), transform 640ms var(--ease-out-soft);
  transition-delay: calc(var(--reveal-i, 0) * 85ms);
}
.js-reveal-ready .js-reveal.is-visible,
.js-reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }

/* ── Hero entrance choreography ── */
@keyframes keRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.js-reveal-ready .hero__copy > * { opacity: 0; animation: keRise 0.9s var(--ease-out-soft) both; }
.js-reveal-ready .hero__copy > *:nth-child(1) { animation-delay: 0.10s; }
.js-reveal-ready .hero__copy > *:nth-child(2) { animation-delay: 0.20s; }
.js-reveal-ready .hero__copy > *:nth-child(3) { animation-delay: 0.30s; }
.js-reveal-ready .hero__copy > *:nth-child(4) { animation-delay: 0.42s; }
.js-reveal-ready .hero__copy > *:nth-child(5) { animation-delay: 0.54s; }

/* ── Hero scroll cue ── */
.hero__scroll {
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);
  z-index: 3; width: 26px; height: 44px; border-radius: 14px;
  border: 1px solid var(--gold-line); display: flex; justify-content: center;
  align-items: flex-start; padding-top: 8px; opacity: 0.85;
  transition: opacity 200ms ease, border-color 200ms ease;
}
.hero__scroll:hover { opacity: 1; border-color: var(--gold); }
/* Never fully transparent: the cue began each 1.9s cycle at opacity 0, so at
   any given moment it could read as an empty capsule — a rendering glitch
   rather than an invitation. */
.hero__scroll-line { width: 2px; height: 8px; border-radius: 2px; background: var(--gold); animation: keScrollCue 1.9s var(--ease-out-soft) infinite; }
@keyframes keScrollCue { 0% { opacity: 0.35; transform: translateY(0); } 25% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0.35; transform: translateY(14px); } }

/* ── Gold rule shimmer (hero + page heros) ── */
.hero__rule, .page-hero__rule { background-size: 220% 100%; animation: keShimmer 7s linear infinite; }
@keyframes keShimmer { 0% { background-position: 220% 0; } 100% { background-position: -220% 0; } }

/* ── Button hover lift ── */
.btn-primary, .btn-secondary {
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.btn-primary:hover, .btn--primary:hover { transform: translateY(-2px); }
.btn-secondary:hover, .btn--ghost:hover, .btn--onDark:hover, .btn--sm:hover { transform: translateY(-1px); }

/* ── Restructured "keeps for you" cards — editorial grid with an index
      numeral, a top row (icon ↔ number), and a gold glow on hover. ──── */
/* Subgrid so the four slots — icon row, eyebrow, title, description — sit on
   the same lines across a row. Before this the card was a flex column with
   margin-bottom:auto on the top row, which bottom-aligned each body: a
   three-line title in card 01 pushed its eyebrow 24px off its neighbours',
   and the row read as sloppy. Without subgrid support the rule is ignored and
   the card falls back to ordinary auto rows. */
/* soft gold glow that warms the corner on hover */
.keep-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(130% 90% at 100% 0%, var(--gold-fill-2), transparent 58%);
  opacity: 0; transition: opacity 420ms ease;
}
.keep-card:hover::after { opacity: 1; }
/* hairline gold accent along the top edge, brightening on hover */
.keep-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-line), transparent);
  opacity: 0.5; transition: opacity 420ms ease; z-index: 2;
}
.keep-card:hover::before { opacity: 1; }
.keep-card__top { display: flex; align-items: flex-start; justify-content: space-between; position: relative; z-index: 1; padding-bottom: 22px; }
.keep-card__num { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; color: var(--ink-mute); }
.keep-card__eyebrow, .keep-card__title, .keep-card__desc { position: relative; z-index: 1; }

/* ── keeps-for-you responsive: 3 → 2 → 1 columns ── */
@media (max-width: 900px) { .keep-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .keep-cards { grid-template-columns: 1fr; } }

/* ── Reduced-motion: hide the progress bar & scroll cue outright.
      (Reveals & keyframes are already neutralised by the global
      prefers-reduced-motion reset near the top of this file, and the
      motion JS never marks the page ready, so content stays visible.) ── */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress, .hero__scroll { display: none; }
}
@media (max-width: 640px) {
  .hero__scroll { display: none; }
}

/* ── Legal pages (privacy / terms) ─────────────────────── */
.legal-page { padding: 40px 20px 80px; }
.legal { max-width: 760px; margin: 0 auto; font-family: var(--font-prose); color: var(--ink); line-height: 1.7; }
.legal__meta { color: var(--ink-mute); font-size: 0.88rem; margin: 0 0 28px; }
.legal h2 { font-family: var(--font-display, var(--font-ui)); font-size: 1.4rem; margin: 34px 0 10px; color: var(--ink); }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 16px; padding-left: 1.3rem; }
.legal li { margin: 6px 0; }
.legal a { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; }
.legal code { font-size: 0.92em; padding: 1px 5px; background: var(--bg-elev-2); border-radius: 5px; }

/* ── large screens: let the composition use the canvas ───────────────────
   Every voice section is either a card grid or a two-column grid, so a 720px
   inner left ~360px of dead ground on each side of a 1440px viewport and
   squeezed the six cards to ~228px each. Prose stays capped at --measure by
   its own rules; only the structure widens. */
@media (min-width: 1100px) {
  .voice__inner { max-width: 1080px; }
  .voice__inner--wide { max-width: 1140px; }
  .voice__grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 72px; }
  .trust__cols > :first-child { padding-right: 80px; }
  .trust__cols > * + * { padding-left: 80px; }
}