/* KudoNovel public site — one stylesheet for the landing page, guides, author
   pages and the legal pages. The app (/write) has its own stylesheet in
   src/styles.css; the two share the same token values ("Night Draft").
   Add colours as tokens here, never inline. */

:root {
  color-scheme: dark;
  --bg: #0f0e12;
  --bg-deep: #0a090c;
  --surface: #16141a;
  --surface-raised: #1d1a22;
  --border: #27232d;
  --border-strong: #353040;
  --hairline: rgba(255, 255, 255, 0.06);
  --fg: #f3efea;
  --fg-soft: #d3cdd4;
  --fg-2: #a59ea8;
  --fg-3: #9a939e;
  --accent: #f06a9b;
  --accent-2: #e58bb5;
  --accent-text: #ff9dc0;
  --accent-soft: rgba(240, 106, 155, 0.12);
  --accent-border: rgba(240, 106, 155, 0.45);
  --accent-ring: rgba(240, 106, 155, 0.28);
  --accent-strong: #d93a75;
  --grad: linear-gradient(120deg, #f06a9b 0%, #f58a7d 55%, #f5a66a 100%);
  --grad-btn: linear-gradient(135deg, #d93a75 0%, #ea5a8b 60%, #f07a86 100%);
  --grad-border: linear-gradient(135deg, rgba(240, 106, 155, 0.9), rgba(245, 166, 106, 0.5));
  --glow: 0 10px 30px -10px rgba(240, 106, 155, 0.55);
  --site-head-h: 70px; /* the homepage nav: one row */
  --ok: #86d29a;
  --ok-soft: #17261b;
  --ok-tint: rgba(134, 210, 154, 0.13);
  --ok-border: rgba(134, 210, 154, 0.32);
  --card-deep: linear-gradient(180deg, #1b1720, #141218);
  --stamp-ink: #2a0f1b;
  --cta-glow: 0 24px 60px -30px rgba(240, 106, 155, 0.5);
  --warn: #f0b36a;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --font-ui: "Manrope", system-ui, -apple-system, sans-serif;
  --font-display: "Lora", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

@supports not (color: color-mix(in srgb, red, blue)) {

  :root {
    --bg__r: 15;
    --bg__g: 14;
    --bg__b: 18;
    --bg__a: 1;
    --bg-deep__r: 10;
    --bg-deep__g: 9;
    --bg-deep__b: 12;
    --bg-deep__a: 1;
    --surface__r: 22;
    --surface__g: 20;
    --surface__b: 26;
    --surface__a: 1;
    --surface-raised__r: 29;
    --surface-raised__g: 26;
    --surface-raised__b: 34;
    --surface-raised__a: 1;
    --border__r: 39;
    --border__g: 35;
    --border__b: 45;
    --border__a: 1;
    --border-strong__r: 53;
    --border-strong__g: 48;
    --border-strong__b: 64;
    --border-strong__a: 1;
    --hairline__r: 255;
    --hairline__g: 255;
    --hairline__b: 255;
    --hairline__a: 0.06;
    --fg__r: 243;
    --fg__g: 239;
    --fg__b: 234;
    --fg__a: 1;
    --fg-soft__r: 211;
    --fg-soft__g: 205;
    --fg-soft__b: 212;
    --fg-soft__a: 1;
    --fg-2__r: 165;
    --fg-2__g: 158;
    --fg-2__b: 168;
    --fg-2__a: 1;
    --fg-3__r: 154;
    --fg-3__g: 147;
    --fg-3__b: 158;
    --fg-3__a: 1;
    --accent__r: 240;
    --accent__g: 106;
    --accent__b: 155;
    --accent__a: 1;
    --accent-2__r: 229;
    --accent-2__g: 139;
    --accent-2__b: 181;
    --accent-2__a: 1;
    --accent-text__r: 255;
    --accent-text__g: 157;
    --accent-text__b: 192;
    --accent-text__a: 1;
    --accent-soft__r: 240;
    --accent-soft__g: 106;
    --accent-soft__b: 155;
    --accent-soft__a: 0.12;
    --accent-border__r: 240;
    --accent-border__g: 106;
    --accent-border__b: 155;
    --accent-border__a: 0.45;
    --accent-ring__r: 240;
    --accent-ring__g: 106;
    --accent-ring__b: 155;
    --accent-ring__a: 0.28;
    --accent-strong__r: 217;
    --accent-strong__g: 58;
    --accent-strong__b: 117;
    --accent-strong__a: 1;
    --ok__r: 134;
    --ok__g: 210;
    --ok__b: 154;
    --ok__a: 1;
    --ok-soft__r: 23;
    --ok-soft__g: 38;
    --ok-soft__b: 27;
    --ok-soft__a: 1;
    --ok-tint__r: 134;
    --ok-tint__g: 210;
    --ok-tint__b: 154;
    --ok-tint__a: 0.13;
    --ok-border__r: 134;
    --ok-border__g: 210;
    --ok-border__b: 154;
    --ok-border__a: 0.32;
    --stamp-ink__r: 42;
    --stamp-ink__g: 15;
    --stamp-ink__b: 27;
    --stamp-ink__a: 1;
    --warn__r: 240;
    --warn__g: 179;
    --warn__b: 106;
    --warn__a: 1;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
@supports not (height: 1dvh) {

  body {
    min-height: 100vh;
  }
}
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding-inline: 24px; }
.wrap-narrow { width: 100%; max-width: 720px; margin: 0 auto; padding-inline: 24px; }
@media (max-width: 600px) { .wrap, .wrap-narrow { padding-inline: 18px; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: calc(14px / var(--tz, 1));
  font-weight: 700;
  line-height: 1.2;
  padding: 11px 20px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: filter 120ms, transform 120ms, background 120ms, border-color 120ms, color 120ms;
}
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn-primary {
  background: var(--grad-btn);
  color: #fff;
  box-shadow: var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-secondary {
  background: var(--surface-raised);
  color: var(--fg);
  border-color: var(--border-strong);
  box-shadow: inset 0 1px 0 var(--hairline);
}
.btn-secondary:hover { background: #262230; border-color: #433d4d; }
.btn-ghost { background: transparent; color: var(--fg-2); }
.btn-ghost:hover { color: var(--fg); }
.btn-sm { font-size: calc(13px / var(--tz, 1)); padding: 8px 14px; }

/* ---------- nav ---------- */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: calc(16px / var(--tz, 1)); letter-spacing: -0.01em; color: var(--fg); }
.brand-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: calc(26px / var(--tz, 1));
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nav-links { display: flex; align-items: center; gap: 22px; font-size: calc(13.5px / var(--tz, 1)); font-weight: 600; color: var(--fg-2); }
.nav-links a:not(.btn):hover { color: var(--fg); }
/* Open app is for someone signed in on this browser (the page's head script
   sets html.signed-in from Supabase's stored session). */
html:not(.signed-in) .nav-open-app { display: none; }
@media (max-width: 480px) {
  .nav-links { gap: 14px; }
  .nav-links .nav-support { display: none; }
}

/* The nav stays at the top while the page scrolls (the homepage, the guides,
   the author pages): transparent at the top, glass once the page has moved
   (a script on the page sets .scrolled). */
.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--site-head-h);
  transition: background 200ms, box-shadow 200ms;
}
/* The homepage's sits over the hero's glow: the hero slides up under it. */
.site-head.over-hero { margin-bottom: calc(-1 * var(--site-head-h)); }
.site-head > div, .site-head .site-nav { height: 100%; }
.site-head .site-nav { padding-block: 0; }
.site-head.scrolled {
  background: rgba(15, 14, 18, 0.74);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 -1px 0 var(--hairline), 0 10px 30px -18px rgba(0, 0, 0, 0.9);
}
.site-head.over-hero ~ .hero-wrap { padding-top: var(--site-head-h); }
/* Too long for the row (index.html measures it): Read books goes, then the wordmark. */
.site-nav.tight .nav-read, .site-nav.tighter .brand-name { display: none; }
html:has(.site-head) { scroll-padding-top: calc(var(--site-head-h) + 12px); }

/* Signed out, the nav offers Sign in (the owner, 2026-11-10: someone coming
   back looks for it there; the hero's button and the banner that takes the
   nav's place past the hero ask the new ones to sign up). Signed in on this
   browser, Open app takes its place. */
html.signed-in .nav-signin { display: none; }

/* The CTA bar (/cta-bar.js): past the hero, the nav becomes a lit banner —
   the app's icon, the title, the three perks, Start. The coming is the show:
   the nav blurs away, the bar opens from a lit seed in the middle (clip-path)
   with a flash and a burst of sparks, then its parts pop in one by one; going,
   they drop out and it closes back into the seed before the nav returns.
   A phone: the perks take turns under the title. 1000px and up: all three
   as chips across the middle, the one up lit. */
.cta-bar {
  --cb-open: cubic-bezier(0.7, 0, 0.15, 1);
  --cb-out: cubic-bezier(0.16, 1, 0.3, 1); /* fast off the mark: the coming */
  --cb-pop: cubic-bezier(0.25, 1.6, 0.4, 1);
  display: flex;
  align-items: center;
  gap: 11px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: calc(64px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 12px 0 14px;
  isolation: isolate;
  color: var(--fg);
  background: linear-gradient(110deg, #2b1121 0%, #1c1230 45%, #2e1426 75%, #2b1121 100%);
  background-size: 220% 100%;
  box-shadow: 0 14px 34px -14px rgba(240, 106, 155, 0.55);
  clip-path: inset(46% 48% 46% 48% round 999px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: clip-path 420ms var(--cb-open) 160ms, opacity 200ms 440ms, visibility 0s 620ms;
  animation: cb-drift 9s ease-in-out infinite alternate;
  -webkit-tap-highlight-color: transparent;
}
.cta-bar.on {
  clip-path: inset(0 0 0 0 round 0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: clip-path 460ms var(--cb-out), opacity 80ms, visibility 0s;
}
.cta-bar:active { filter: brightness(1.08); }
/* The lit line along the bottom edge, its light running. */
.cta-bar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(240, 106, 155, 0.15), #f06a9b 30%, #ffd1e2 45%, #f5a66a 60%, #b48cff 80%, rgba(180, 140, 255, 0.15));
  background-size: 200% 100%;
  animation: cb-run 4s linear infinite;
  box-shadow: 0 0 12px rgba(240, 106, 155, 0.8);
}
/* A sheen sweeps the whole bar now and then. */
.cta-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 220, 235, 0.16) 50%, transparent 62%);
  transform: translateX(-120%);
  animation: cb-sheen 5.6s ease-in-out infinite 1.4s;
  pointer-events: none;
}
.cb-glow {
  position: absolute;
  z-index: -1;
  left: -30px;
  top: 50%;
  width: 150px;
  height: 150px;
  margin-top: -75px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(240, 106, 155, 0.38), transparent);
  animation: cb-breathe 3.2s ease-in-out infinite;
  pointer-events: none;
}
/* The flash as it opens: a white-hot line out from the middle, then gone. */
.cb-flash {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 50%;
  height: 100%;
  margin-top: -32px;
  background:
    radial-gradient(ellipse 30% 60% at 50% 50%, rgba(255, 240, 246, 0.95), rgba(255, 157, 192, 0.5) 40%, transparent 70%),
    linear-gradient(90deg, transparent, rgba(255, 220, 235, 0.9) 50%, transparent);
  background-size: 100% 100%, 100% 2px;
  background-position: center, center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scaleX(0.1);
  mix-blend-mode: screen;
  pointer-events: none;
}
.cta-bar.on .cb-flash { animation: cb-flash 600ms cubic-bezier(0.2, 0.7, 0.2, 1); }
/* The sparks, thrown out from the middle as it opens. */
.cb-burst { position: absolute; z-index: 3; left: 50%; top: 50%; pointer-events: none; }
.cb-burst i {
  position: absolute;
  left: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 30%, #ff9dc0 60%, transparent 70%);
  box-shadow: 0 0 10px 2px rgba(255, 157, 192, 0.8);
  opacity: 0;
}
.cta-bar.on .cb-burst i { animation: cb-spray 800ms cubic-bezier(0.1, 0.8, 0.3, 1) calc(30ms + var(--d) / 2) both; }
/* What's in it: blurred and down until the bar is open, then one by one. */
.cb-mark, .cb-text, .cb-chips, .cb-go {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(12px) scale(0.86);
  transition: opacity 180ms, filter 180ms, transform 220ms ease-in;
}
.cta-bar.on .cb-mark, .cta-bar.on .cb-text, .cta-bar.on .cb-chips, .cta-bar.on .cb-go {
  opacity: 1;
  filter: blur(0);
  transform: none;
  transition: opacity 260ms, filter 260ms, transform 440ms var(--cb-pop);
}
.cta-bar.on .cb-mark { transition-delay: 90ms; }
.cta-bar.on .cb-text { transition-delay: 140ms; }
.cta-bar.on .cb-chips { transition-delay: 180ms; }
.cta-bar.on .cb-go { transition-delay: 220ms; }
.cta-bar.on .cb-mark img { animation: cb-spin 560ms var(--cb-pop) 90ms both; }
.cb-mark {
  position: relative;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  box-shadow: 0 0 0 1px rgba(255, 190, 215, 0.3), 0 6px 18px -6px rgba(240, 106, 155, 0.7);
}
/* The app's own icon, as on the phone's home screen. */
.cb-mark img { width: 100%; height: 100%; border-radius: inherit; display: block; }
.cb-spark {
  position: absolute;
  font-style: normal;
  font-family: var(--font-ui);
  color: #ffd6e6;
  text-shadow: 0 0 6px rgba(255, 157, 192, 0.9);
  animation: cb-twinkle 2.4s ease-in-out infinite;
  pointer-events: none;
}
.cb-spark.s1 { top: -7px; right: -6px; font-size: calc(11px / var(--tz, 1)); }
.cb-spark.s2 { bottom: -4px; left: -5px; font-size: calc(8px / var(--tz, 1)); animation-delay: 1.2s; }
.cb-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cb-title {
  font-size: calc(14.5px / var(--tz, 1));
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The perks take turns: in from below, out above. */
.cb-perks { position: relative; height: 17px; overflow: hidden; }
.cb-perk {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: calc(12.5px / var(--tz, 1));
  font-weight: 600;
  line-height: 17px;
  color: var(--accent-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translateY(105%);
  opacity: 0;
  transition: transform 520ms cubic-bezier(0.3, 1.2, 0.4, 1), opacity 320ms;
}
.cb-perk.on { transform: none; opacity: 1; }
.cb-perk.off { transform: translateY(-105%); opacity: 0; }
.cb-perk svg, .cb-chip svg {
  flex: none;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cb-chips { display: none; }
.cb-go {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 13px 10px 15px;
  border-radius: 999px;
  background: var(--grad-btn);
  color: #fff;
  font-size: calc(13.5px / var(--tz, 1));
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 0 0 1px rgba(255, 190, 215, 0.5) inset, 0 6px 22px -6px rgba(240, 106, 155, 0.95);
  animation: signup-glow 3.2s ease-in-out infinite;
}
.cb-go::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.75) 50%, transparent 68%);
  transform: translateX(-130%);
  animation: signup-shine 3.2s ease-in-out infinite;
}
.cb-go svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: cb-nudge 1.6s ease-in-out infinite;
}
.cta-bar:hover .cb-go { filter: brightness(1.1); }
/* Which perk is up: three dashes on the bar's bottom edge. */
/* The nav blurs up and away as the bar comes; back after it has closed. */
.site-head { transition: background 200ms, box-shadow 200ms, transform 520ms var(--cb-pop, ease) 380ms, opacity 360ms 380ms, filter 420ms 380ms; }
html.cta-bar-on .site-head {
  transform: translateY(-40%) scale(0.97);
  opacity: 0;
  filter: blur(10px);
  pointer-events: none;
  transition: transform 380ms ease-in, opacity 300ms, filter 300ms;
}
html.cta-bar-on { scroll-padding-top: 76px; }
/* Dressed up (the owner, 2026-11-09: "make it prettier"): glass over the page,
   a rose and a violet light inside, a light wandering along it, the title lit. */
.cta-bar {
  background:
    radial-gradient(42% 160% at 14% 50%, rgba(240, 106, 155, 0.3), transparent 62%),
    radial-gradient(40% 160% at 86% 50%, rgba(139, 92, 246, 0.28), transparent 62%),
    linear-gradient(110deg, rgba(40, 16, 32, 0.9) 0%, rgba(26, 18, 46, 0.9) 45%, rgba(44, 18, 38, 0.9) 75%, rgba(40, 16, 32, 0.9) 100%);
  background-size: 100% 100%, 100% 100%, 220% 100%;
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 40px -14px rgba(240, 106, 155, 0.6), 0 8px 30px -10px rgba(139, 92, 246, 0.35);
}
.cta-bar::before { display: none; }
@media (min-width: 1000px) {
  /* The perks as a list, not buttons: icon and words, a dot between, the one up lit. */
  .cta-bar .cb-chips { gap: 0; }
  .cta-bar .cb-chip, .cta-bar .cb-chip.on { padding: 6px 14px; background: none; box-shadow: none; transform: none; border-radius: 0; }
  .cta-bar .cb-chip { position: relative; color: rgba(243, 239, 234, 0.55); }
  .cta-bar .cb-chip + .cb-chip::before { content: ""; position: absolute; left: -2px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
  .cta-bar .cb-chip svg { color: rgba(243, 239, 234, 0.4); }
  .cta-bar .cb-chip.on { color: #fff; text-shadow: 0 0 14px rgba(255, 157, 192, 0.7); }
  .cta-bar .cb-chip.on svg { color: #ff9dc0; filter: drop-shadow(0 0 6px rgba(240, 106, 155, 0.9)); }
}
.cb-glow { width: 240px; margin-top: -75px; background: radial-gradient(closest-side, rgba(255, 140, 190, 0.42), rgba(180, 140, 255, 0.16) 60%, transparent); animation: cb-breathe 3.2s ease-in-out infinite, cb-wander 14s ease-in-out infinite alternate; }
@keyframes cb-wander { from { translate: 0 0; } to { translate: calc(100vw - 220px) 0; } }
.cb-title { background: linear-gradient(100deg, #fff 0%, #ffe0ec 45%, #ffb3cf 75%, #e9d5ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cb-mark { box-shadow: 0 0 0 1px rgba(255, 190, 215, 0.45), 0 0 0 4px rgba(240, 106, 155, 0.12), 0 6px 22px -4px rgba(240, 106, 155, 0.8); }
.cb-go { box-shadow: 0 0 0 1px rgba(255, 210, 225, 0.6) inset, 0 8px 26px -6px rgba(240, 106, 155, 1), 0 0 0 0 rgba(240, 106, 155, 0.5); animation: signup-glow 3.2s ease-in-out infinite, cb-ring 2.4s ease-out infinite; }
@keyframes cb-ring { 0% { box-shadow: 0 0 0 1px rgba(255, 210, 225, 0.6) inset, 0 8px 26px -6px rgba(240, 106, 155, 1), 0 0 0 0 rgba(240, 106, 155, 0.45); } 70%, 100% { box-shadow: 0 0 0 1px rgba(255, 210, 225, 0.6) inset, 0 8px 26px -6px rgba(240, 106, 155, 1), 0 0 0 10px rgba(240, 106, 155, 0); } }

/* A computer: wider, the perks as chips across the middle. */
@media (min-width: 721px) {
  .cta-bar {
    height: 68px;
    gap: 16px;
    padding: 0 max(24px, calc((100vw - 1160px) / 2));
  }
  .cb-glow { left: calc(max(24px, (100vw - 1160px) / 2) - 50px); width: 180px; height: 180px; margin-top: -90px; }
  .cb-mark { width: 42px; height: 42px; border-radius: 12px; }
  .cb-title { font-size: calc(16px / var(--tz, 1)); }
  .cb-perk { font-size: calc(13px / var(--tz, 1)); }
  .cb-go { padding: 12px 18px 12px 22px; font-size: calc(14.5px / var(--tz, 1)); gap: 7px; }
  .cb-flash { margin-top: -34px; }
}
@media (min-width: 1000px) {
  .cb-text { flex: none; }
  .cb-perks { display: none; }
  .cb-chips { display: flex; flex: 1; justify-content: center; gap: 8px; min-width: 0; }
  .cb-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: calc(13px / var(--tz, 1));
    font-weight: 600;
    white-space: nowrap;
    color: var(--fg-2);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    transition: color 400ms, background 400ms, box-shadow 400ms, transform 500ms var(--cb-pop);
  }
  .cb-chip svg { color: var(--fg-3); transition: color 400ms; }
  .cb-chip.on {
    color: #fff;
    background: linear-gradient(135deg, rgba(240, 106, 155, 0.28), rgba(180, 140, 255, 0.18));
    box-shadow: inset 0 0 0 1px rgba(255, 157, 192, 0.6), 0 0 22px -4px rgba(240, 106, 155, 0.7);
    transform: translateY(-1px) scale(1.04);
  }
  .cb-chip.on svg { color: var(--accent-text); }
}
@media (max-width: 360px) {
  .cta-bar { gap: 9px; padding-left: 10px; padding-right: 8px; }
  .cb-mark { width: 32px; height: 32px; border-radius: 9px; }
  .cb-title { font-size: calc(13.5px / var(--tz, 1)); }
  .cb-go { padding: 9px 11px 9px 12px; font-size: calc(12.5px / var(--tz, 1)); }
}
@keyframes cb-drift { from { background-position: 0% 0; } to { background-position: 100% 0; } }
@keyframes cb-run { from { background-position: 0% 0; } to { background-position: -200% 0; } }
@keyframes cb-sheen { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@keyframes cb-breathe { 0%, 100% { opacity: 0.65; transform: scale(0.92); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes cb-twinkle { 0%, 100% { opacity: 0.2; transform: scale(0.6) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes cb-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@keyframes cb-flash {
  0% { opacity: 0; transform: scaleX(0.05); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: scaleX(1.6); }
}
@keyframes cb-spray {
  0% { opacity: 0; transform: translate(0, 0) scale(0.2); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(var(--s)); }
}
@keyframes cb-spin { from { transform: rotate(-120deg) scale(0.4); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cta-bar, .cta-bar::before, .cta-bar::after, .cb-glow, .cb-spark, .cb-go, .cb-go::after, .cb-go svg, .cb-chip,
  .cta-bar.on .cb-flash, .cta-bar.on .cb-burst i, .cta-bar.on .cb-mark img { animation: none; }
  .cta-bar::after, .cb-go::after, .cb-flash, .cb-burst { display: none; }
  .cta-bar, .cta-bar.on { clip-path: none; transition: opacity 200ms, visibility 0s; }
  .cb-mark, .cb-text, .cb-chips, .cb-go,
  .cta-bar.on .cb-mark, .cta-bar.on .cb-text, .cta-bar.on .cb-chips, .cta-bar.on .cb-go { filter: none; transform: none; transition: opacity 200ms; }
  .cb-perk, .cb-perk.off, .cb-chip.on { transform: none; }
  .site-head, html.cta-bar-on .site-head { filter: none; transform: none; transition: opacity 200ms; }
}

/* ---------- footer ---------- */
.site-foot {
  margin-top: auto;
  border-top: 1px solid var(--border);
  background: var(--bg-deep);
}
.site-foot .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 20px;
  padding-block: 18px;
  font-size: calc(12.5px / var(--tz, 1));
  color: var(--fg-3);
}
.site-foot nav { display: flex; flex-wrap: wrap; gap: 16px; }
.site-foot nav a:hover { color: var(--fg-2); }

/* ---------- landing: hero ---------- */
.hero-wrap { position: relative; overflow: hidden; }
.hero-wrap::before {
  content: "";
  position: absolute;
  inset: -10% -10% auto -10%;
  height: 720px;
  pointer-events: none;
  background:
    radial-gradient(720px 380px at 22% 8%, rgba(240, 106, 155, 0.2), transparent 70%),
    radial-gradient(620px 360px at 80% 18%, rgba(245, 166, 106, 0.13), transparent 70%);
}
.hero-wrap > * { position: relative; }
.hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 56px 0 72px;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: calc(12px / var(--tz, 1));
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(clamp(38px, 5.4vw, 62px) / var(--tz, 1));
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin-bottom: 20px;
}
.hero h1 em, .grad-text {
  font-style: italic;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub { font-size: calc(17px / var(--tz, 1)); line-height: 1.6; color: var(--fg-2); max-width: 50ch; margin-bottom: 28px; }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hero-note { margin-top: 18px; font-size: calc(12.5px / var(--tz, 1)); color: var(--fg-3); display: flex; flex-wrap: wrap; gap: 6px 16px; }
.hero-note span::before { content: "✓"; color: var(--ok); margin-right: 6px; font-weight: 800; }
@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; gap: 36px; padding: 32px 0 48px; }
  .hero-sub { font-size: calc(16px / var(--tz, 1)); }
}
@media (max-width: 480px) {
  .eyebrow { font-size: calc(10.5px / var(--tz, 1)); letter-spacing: 0.06em; padding: 5px 10px; margin-bottom: 18px; }
  .hero h1 { font-size: calc(clamp(34px, 11vw, 44px) / var(--tz, 1)); }
}

/* product shot (a static mockup of the editor) */
.shot { position: relative; }
.shot::before {
  content: "";
  position: absolute;
  inset: 10% -6% -10% -6%;
  background: radial-gradient(60% 60% at 50% 40%, rgba(240, 106, 155, 0.28), transparent 70%);
  filter: blur(24px);
  z-index: 0;
}
.shot-app {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 148px 1fr;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
  text-align: left;
  box-shadow: 0 0 0 1px rgba(240, 106, 155, 0.18), 0 30px 70px -30px rgba(0, 0, 0, 0.9), inset 0 1px 0 var(--hairline);
}
.shot-side { background: var(--bg-deep); border-right: 1px solid var(--border); padding: 14px 10px; display: flex; flex-direction: column; }
.shot-side-label { font-size: calc(10px / var(--tz, 1)); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px; padding-left: 8px; }
.shot-chap { font-size: calc(12.5px / var(--tz, 1)); color: var(--fg-2); padding: 6px 8px; border-radius: 7px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shot-chap.on { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.shot-main { padding: 16px; min-width: 0; }
.shot-beat {
  border: 1px solid var(--border);
  background: var(--surface-raised);
  border-radius: var(--r-md);
  padding: 13px 15px;
  margin-bottom: 10px;
  box-shadow: inset 0 1px 0 var(--hairline);
}
.shot-beat:last-child { margin-bottom: 0; }
.shot-beat.on {
  border-color: transparent;
  background:
    linear-gradient(var(--surface-raised), var(--surface-raised)) padding-box,
    var(--grad-border) border-box;
  box-shadow: 0 12px 30px -16px rgba(240, 106, 155, 0.45);
}
.shot-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: calc(10.5px / var(--tz, 1));
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  margin-bottom: 9px;
}
.shot-state svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.shot-state.committed { background: var(--ok-soft); color: var(--ok); }
.shot-state.drafting { background: var(--accent-soft); color: var(--accent-text); }
.shot-prose { font-family: var(--font-display); font-size: calc(14px / var(--tz, 1)); line-height: 1.65; color: var(--fg); }
.shot-beat.committed .shot-prose { color: var(--fg-2); }
.shot-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.shot-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: calc(12px / var(--tz, 1));
  font-weight: 600;
  color: var(--fg-2);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  padding: 5px 10px;
  border-radius: var(--r-sm);
}
.shot-pill svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.shot-pill.primary { background: var(--grad-btn); color: #fff; border-color: transparent; box-shadow: var(--glow); }
/* what the AI is reading for this beat (landing hero) */
.shot-ctx { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 11px; font-size: calc(10.5px / var(--tz, 1)); }
.shot-ctx span { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--fg-2); }
.shot-ctx .shot-ctx-label { padding: 2px 0; border: 0; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-3); }
.shot-status {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: calc(11px / var(--tz, 1));
  color: var(--fg-3);
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-deep);
  font-variant-numeric: tabular-nums;
}
/* The sidebar's Bible line (the demo animates it after each commit). */
/* Pinned to the sidebar's bottom edge, as in the app. */
.shot-side-bible-label { margin-top: auto; padding-top: 16px; margin-bottom: 3px; }
/* The status itself stays quiet: small, dim, a soft dot. */
.shot-bible { font-size: calc(9px / var(--tz, 1)); color: var(--fg-3); opacity: 0.8; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.01em; }
.shot-bible b { color: var(--ok); opacity: 0.75; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.shot-bible b::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 4px var(--ok); }
@media (max-width: 480px) {
  .shot-app { grid-template-columns: 1fr; }
  .shot-side { display: none; }
}

/* ---- the live walkthrough (/hero-demo.js) ------------------------------
   Everything below only applies once the script has taken over (.shot-main.live).
   The static mockup above is the no-JS / reduced-motion frame. */
.shot-main.live { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.shot-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
  flex-wrap: wrap;
  font-size: calc(9.5px / var(--tz, 1));
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 0 2px 2px;
}
.shot-steps span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; transition: color 0.3s; }
.shot-steps span i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--border-strong);
  transition: background 0.3s, box-shadow 0.3s;
}
.shot-steps span.done { color: var(--fg-2); }
.shot-steps span.done i { background: var(--fg-3); }
.shot-steps span.on { color: var(--accent-text); }
.shot-steps span.on i { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.shot-feed {
  position: relative;
  height: 392px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  transition: opacity 0.45s;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 44px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 44px);
}
.shot-feed.fade { opacity: 0; }
.shot-feed .shot-beat { flex: 0 0 auto; }
.shot-feed .shot-beat:last-child { margin-bottom: 0; }
/* a new beat card grows in, pushing the committed ones up */
.shot-feed .shot-beat.enter { max-height: 0; opacity: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
.shot-feed .shot-beat {
  max-height: 520px;
  transition: max-height 0.5s ease, opacity 0.4s ease 0.1s, padding 0.5s ease, margin 0.5s ease,
    background 0.35s, border-color 0.35s, box-shadow 0.35s;
}
.shot-feed .shot-beat.committed { max-height: 320px; }
.live .shot-state.sketch { background: var(--surface); color: var(--fg-2); border: 1px solid var(--border-strong); }
.live .shot-state { transition: background 0.3s, color 0.3s; }
.live .shot-state.busy::after {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
  animation: shot-pulse 0.9s ease-in-out infinite;
}
/* the writer typing (note, steer) vs the AI streaming (prose) */
.live .shot-prose { min-height: 1.65em; transition: opacity 0.3s; }
.live .shot-prose.dim { opacity: 0.3; }
.shot-caret {
  display: none;
  width: 1.5px; height: 1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--accent);
  animation: shot-blink 1s steps(2, start) infinite;
}
.typing > .shot-caret { display: inline-block; }
.shot-w { animation: shot-word 0.35s ease both; }
.shot-extra { overflow: hidden; max-height: 200px; transition: max-height 0.45s ease, opacity 0.3s; }
.live .shot-beat.lock .shot-extra { max-height: 0; opacity: 0; }
.live .shot-ctx { display: none; }
.live .shot-beat.ctx-on .shot-ctx { display: flex; animation: shot-rise 0.35s ease both; }
.shot-steer {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--accent-border);
  background: var(--accent-soft);
  font-size: calc(12.5px / var(--tz, 1));
  color: var(--fg);
}
.live .shot-beat.steer-on .shot-steer { display: flex; animation: shot-rise 0.35s ease both; }
.shot-steer-label { font-size: calc(10px / var(--tz, 1)); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
.shot-steer .shot-caret { height: 0.95em; vertical-align: -0.1em; }
.live .shot-pill { transition: transform 0.15s ease, background 0.15s, border-color 0.15s, color 0.15s; }
.live .shot-pill.pressed { transform: scale(0.94); border-color: var(--accent-border); color: var(--accent-text); background: var(--accent-soft); }
.live .shot-pill.primary.pressed { color: #fff; background: var(--accent-strong); }
.shot-chap.pub::after {
  content: "\2713";
  float: right;
  color: var(--ok);
  font-weight: 800;
  animation: shot-rise 0.3s ease both;
}
.shot-bible .busy { color: var(--warn); opacity: 1; }
.shot-bible .busy::before { background: var(--warn); box-shadow: 0 0 8px var(--warn); animation: shot-pulse 0.9s ease-in-out infinite; }
.shot-toast {
  position: absolute;
  left: 16px; right: 16px; bottom: 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  border-radius: var(--r-md);
  background: var(--ok-soft);
  border: 1px solid rgba(134, 210, 154, 0.4);
  color: var(--ok);
  font-size: calc(13px / var(--tz, 1));
  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.35s, transform 0.35s;
  pointer-events: none;
  z-index: 2;
}
.shot-toast.show { opacity: 1; transform: none; }
.shot-toast svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.shot-toast b { font-weight: 700; }
.shot-main.live { position: relative; }
@keyframes shot-blink { to { visibility: hidden; } }
@keyframes shot-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes shot-word { from { opacity: 0; filter: blur(2px); } to { opacity: 1; filter: none; } }
@keyframes shot-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) {
  .shot-feed { height: 420px; }
  .shot-status { flex-wrap: wrap; gap: 4px 10px; }
  .shot-status span { white-space: nowrap; }
}

/* ---------- landing: sections ---------- */
.section { padding: 56px 0; }
.section + .section { border-top: 1px solid var(--border); }
.section-head { max-width: 640px; margin-bottom: 28px; }
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(clamp(28px, 3.6vw, 38px) / var(--tz, 1));
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin-bottom: 10px;
}
.section-head h2 em { font-style: italic; color: var(--accent-text); }
.section-head p { color: var(--fg-2); font-size: calc(15.5px / var(--tz, 1)); }

.feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.feat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px;
  box-shadow: inset 0 1px 0 var(--hairline);
  min-width: 0;
}
.ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  box-shadow: 0 0 20px -6px rgba(240, 106, 155, 0.6);
}
.ico svg { width: 17px; height: 17px; stroke: var(--accent-text); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.feat h3 { font-size: calc(14.5px / var(--tz, 1)); font-weight: 700; margin-bottom: 4px; letter-spacing: -0.01em; }
.feat p { font-size: calc(13px / var(--tz, 1)); line-height: 1.5; color: var(--fg-2); }
.feats.feats-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) { .feats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .feats.feats-3 { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .feats { grid-template-columns: 1fr; } }

/* how it works: a real sequence, so the numbers stay */
.steps { display: grid; grid-template-columns: 1fr 1.3fr; gap: 36px; align-items: start; }
.step-list { display: grid; gap: 10px; }
.step {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  align-items: start;
  padding: 13px 15px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 var(--hairline);
}
.step i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: calc(12px / var(--tz, 1));
  font-weight: 800;
  color: #fff;
  background: var(--grad-btn);
  box-shadow: var(--glow);
}
.step b { display: block; font-size: calc(14.5px / var(--tz, 1)); font-weight: 700; margin-bottom: 2px; }
.step span { font-size: calc(13.5px / var(--tz, 1)); color: var(--fg-2); line-height: 1.55; }
.step span strong { color: var(--fg-soft); font-weight: 700; }
@media (max-width: 880px) { .steps { grid-template-columns: 1fr; gap: 20px; } }

/* free tools teaser: the landing's section and the /tools pages (public/tools/tools.css has the rest) */
.tool-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tool-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 var(--hairline);
  transition: border-color 120ms, transform 120ms;
}
.tool-card:hover { border-color: var(--accent-border); transform: translateY(-2px); }
.tool-card-ico { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 4px; border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--accent-border); color: var(--accent-text); }
.tool-card-ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tool-card-title { font-family: var(--font-display); font-size: calc(19px / var(--tz, 1)); line-height: 1.25; color: var(--fg); }
.tool-card-desc { font-size: calc(13.5px / var(--tz, 1)); line-height: 1.5; color: var(--fg-2); }
.tool-card-go { margin-top: 4px; font-size: calc(13px / var(--tz, 1)); font-weight: 700; color: var(--accent-text); }
@media (max-width: 880px) { .tool-cards { grid-template-columns: 1fr; } }
.guides-tools { margin: 0 0 32px; }
.guides-tools .tool-card { padding: 16px 18px; }
.guides-tools .tool-card-title { font-size: calc(17px / var(--tz, 1)); }

/* closing band */
.band {
  margin: 8px 0 56px;
  border-radius: var(--r-lg);
  padding: 44px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--accent-border);
  background: linear-gradient(180deg, rgba(240, 106, 155, 0.14), rgba(245, 166, 106, 0.05));
}
.band h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(clamp(28px, 3.6vw, 38px) / var(--tz, 1));
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  text-wrap: balance;
}
.band p { color: var(--fg-2); margin-bottom: 20px; }
.band-tip { display: block; margin-top: 16px; font-size: calc(13px / var(--tz, 1)); color: var(--fg-3); }
.band-tip a { color: var(--accent-2); }
@media (max-width: 600px) { .band { padding: 32px 20px; } }

/* ---------- pricing cards (landing #pricing, press page) ---------- */
.price-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 20px 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: inset 0 1px 0 var(--hairline);
}
.price-card.featured {
  border-color: var(--accent-border);
  background: linear-gradient(180deg, rgba(240, 106, 155, 0.12), var(--surface) 70%);
  box-shadow: var(--glow), inset 0 1px 0 var(--hairline);
}
.price-tag {
  position: absolute;
  top: -10px;
  right: 16px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--grad-btn);
  color: #fff;
  font-size: calc(11px / var(--tz, 1));
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.price-name { font-size: calc(12px / var(--tz, 1)); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.price-amount {
  font-family: var(--font-display);
  font-size: calc(40px / var(--tz, 1));
  line-height: 1.05;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.price-credits { font-size: calc(14px / var(--tz, 1)); font-weight: 700; color: var(--accent-text); }
.price-blurb { flex: 1; margin: 6px 0 16px; font-size: calc(13.5px / var(--tz, 1)); line-height: 1.5; color: var(--fg-2); }
.price-card .btn { width: 100%; }
.price-fine { margin-top: 16px; font-size: calc(13px / var(--tz, 1)); color: var(--fg-3); max-width: 720px; }
@media (max-width: 880px) { .price-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .price-cards { grid-template-columns: 1fr; } }

/* ---- Homepage FAQ: plain <details>, readable with JS off ---- */
.faq { max-width: 760px; border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  position: relative;
  padding: 16px 36px 16px 0;
  font-size: calc(15.5px / var(--tz, 1));
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: calc(20px / var(--tz, 1));
  font-weight: 500;
  color: var(--accent-text);
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item summary:hover { color: var(--accent-text); }
.faq-item summary:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; border-radius: 4px; }
.faq-item p { max-width: 680px; padding: 0 0 18px; font-size: calc(14.5px / var(--tz, 1)); line-height: 1.6; color: var(--fg-2); }
.faq-item p a { color: var(--accent-text); }

/* ---------- article pages (guides, authors) ---------- */
.article-page { padding-bottom: 72px; }
.crumbs { font-size: calc(12.5px / var(--tz, 1)); color: var(--fg-3); margin: 8px 0 18px; }
.crumbs a { color: var(--fg-2); }
.crumbs a:hover { color: var(--fg); }
.article-page h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(clamp(30px, 5vw, 42px) / var(--tz, 1));
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin-bottom: 14px;
}
.lead { font-size: calc(17px / var(--tz, 1)); color: var(--fg-2); margin-bottom: 28px; max-width: 60ch; }
.meta { font-size: calc(13px / var(--tz, 1)); color: var(--fg-3); margin-bottom: 36px; }
.meta .byline { color: var(--accent-2); font-weight: 600; }
article { font-size: calc(16.5px / var(--tz, 1)); line-height: 1.75; color: var(--fg-soft); }
article h2 { font-family: var(--font-display); font-weight: 400; font-size: calc(26px / var(--tz, 1)); line-height: 1.25; color: var(--fg); margin: 1.6em 0 0.6em; }
article h3 { font-size: calc(18px / var(--tz, 1)); font-weight: 700; color: var(--fg); margin: 1.4em 0 0.5em; }
article p { margin: 0 0 1.15em; }
article a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
article ul, article ol { margin: 0 0 1.3em; padding-left: 1.4em; }
article li { margin-bottom: 0.45em; }
article strong { color: var(--fg); font-weight: 700; }
article blockquote { border-left: 2px solid var(--accent-border); padding: 0.2em 0 0.2em 1.1em; margin: 0 0 1.3em; color: var(--fg-2); font-style: italic; }
article code { background: var(--surface-raised); border: 1px solid var(--border); border-radius: 5px; padding: 0.08em 0.4em; font-size: 0.86em; font-family: var(--font-mono); color: var(--accent-text); }
article hr { border: none; border-top: 1px solid var(--border); margin: 2.5em 0; }
.more { margin-top: 3em; padding-top: 1.5em; border-top: 1px solid var(--border); }
.more h4 { font-size: calc(11px / var(--tz, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3); margin-bottom: 12px; }
.more ul { padding: 0; margin: 0; }
.more li { list-style: none; margin-bottom: 8px; font-size: calc(15px / var(--tz, 1)); }
.more li a { color: var(--fg-soft); text-decoration: none; }
.more li a:hover { color: var(--accent-text); }

.cards, .author-cards { display: grid; gap: 12px; margin-top: 8px; }
.card {
  display: block;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 var(--hairline);
  transition: border-color 120ms, transform 120ms;
}
.card:hover { border-color: var(--accent-border); transform: translateY(-2px); }
.card h2 { font-family: var(--font-display); font-weight: 400; font-size: calc(20px / var(--tz, 1)); color: var(--fg); margin-bottom: 6px; line-height: 1.3; }
.card p { font-size: calc(14px / var(--tz, 1)); color: var(--fg-2); margin-bottom: 8px; }
.card .meta { font-size: calc(12px / var(--tz, 1)); color: var(--fg-3); margin: 0; }
.card-author { display: flex; gap: 16px; align-items: center; }
.card-author img { border-radius: 50%; flex: 0 0 auto; }
.card-author h2 { margin-bottom: 2px; }
.card-author p { margin: 0; }
.author-hero { display: flex; gap: 20px; align-items: center; margin-bottom: 16px; }
.author-hero img { border-radius: 50%; flex: 0 0 auto; }
.author-role { font-size: calc(12px / var(--tz, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-text); margin-bottom: 6px; }
.author-hero h1 { margin-bottom: 0; }
.author-page-bio { font-size: calc(17px / var(--tz, 1)); color: var(--fg-soft); margin: 0 0 12px; }
.author-contact { font-size: calc(14px / var(--tz, 1)); color: var(--fg-3); margin: 0 0 36px; }
.author-contact a { color: var(--accent-2); }
.author-list-head { font-family: var(--font-display); font-weight: 400; font-size: calc(22px / var(--tz, 1)); color: var(--fg); margin-bottom: 6px; }

/* ---------- legal pages ---------- */
.legal { padding-bottom: 72px; }
.legal h1 { font-family: var(--font-display); font-weight: 400; font-size: calc(clamp(30px, 5vw, 40px) / var(--tz, 1)); line-height: 1.15; margin: 8px 0 6px; }
.legal .updated { font-size: calc(13px / var(--tz, 1)); color: var(--fg-3); margin-bottom: 36px; }
.legal h2 { font-size: calc(17px / var(--tz, 1)); font-weight: 700; color: var(--fg); margin: 2em 0 0.5em; }
.legal p, .legal li { color: var(--fg-soft); font-size: calc(15.5px / var(--tz, 1)); line-height: 1.7; }
.legal p { margin-bottom: 1em; }
.legal ul { padding-left: 1.4em; margin-bottom: 1em; }
.legal li { margin-bottom: 0.4em; }
.legal p a, .legal li a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.legal .callout {
  border: 1px solid var(--accent-border);
  background: var(--accent-soft);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin: 20px 0;
}
.legal .callout p { margin: 0; }
.legal .divider { border: none; border-top: 1px solid var(--border); margin: 2.5em 0; }
.legal .back-link { display: inline-block; font-size: calc(14px / var(--tz, 1)); font-weight: 600; color: var(--fg-2); }
.legal .back-link:hover { color: var(--accent-text); }

/* ---------- press page ---------- */
.press-hero { position: relative; overflow: hidden; padding-bottom: 8px; }
.press-hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 820px;
  pointer-events: none;
  background:
    radial-gradient(640px 360px at 50% 12%, rgba(240, 106, 155, 0.22), transparent 70%),
    radial-gradient(520px 320px at 85% 30%, rgba(245, 166, 106, 0.12), transparent 70%),
    radial-gradient(520px 320px at 12% 40%, rgba(240, 106, 155, 0.08), transparent 70%);
}
.press-hero > * { position: relative; }
.press-head { max-width: 860px; margin: 0 auto; padding: 52px 0 36px; text-align: center; }
.press-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 8px;
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  background: rgba(240, 106, 155, 0.08);
  font-size: calc(12.5px / var(--tz, 1));
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--fg-soft);
}
.press-kicker b {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--grad-btn);
  color: #fff;
  font-size: calc(10.5px / var(--tz, 1));
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.press-head h1 {
  margin: 22px 0 18px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(clamp(38px, 6.4vw, 72px) / var(--tz, 1));
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.press-head h1 em {
  font-style: italic;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.press-dek { max-width: 680px; margin: 0 auto; font-size: calc(clamp(16px, 2vw, 19px) / var(--tz, 1)); line-height: 1.6; color: var(--fg-2); text-wrap: pretty; }
.press-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.press-shot { position: relative; max-width: 820px; margin: 12px auto 0; }
.press-chip {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--accent-border);
  background: rgba(22, 20, 26, 0.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.8), var(--glow);
  font-size: calc(14px / var(--tz, 1));
  font-weight: 700;
  color: var(--fg);
  white-space: nowrap;
}
.press-chip span { color: var(--accent-text); font-size: calc(17px / var(--tz, 1)); }
.press-chip.one { top: -18px; right: -14px; }
.press-chip.two { bottom: 26px; left: -22px; }
@media (max-width: 880px) {
  .press-chip.one { right: 8px; }
  .press-chip.two { left: 8px; bottom: -18px; }
}

.press-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; padding: 64px 0 24px; }
.press-article { max-width: 680px; }
.press-dateline { font-size: calc(12.5px / var(--tz, 1)); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 18px; }
.press-article p { font-family: var(--font-display); font-size: calc(18.5px / var(--tz, 1)); line-height: 1.75; color: var(--fg-soft); margin-bottom: 1.1em; text-wrap: pretty; }
.press-article p.lede::first-letter {
  float: left;
  margin: 6px 12px 0 0;
  font-size: 4.1em;
  line-height: 0.8;
  font-style: italic;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.press-article h2 {
  margin: 1.9em 0 0.6em;
  font-family: var(--font-ui);
  font-size: calc(13px / var(--tz, 1));
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.press-article strong { color: var(--fg); font-weight: 500; }
.press-article a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.press-pull {
  margin: 1.6em 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid transparent;
  border-image: var(--grad) 1;
  font-family: var(--font-display);
  font-style: italic;
  font-size: calc(24px / var(--tz, 1));
  line-height: 1.4;
  color: var(--fg);
}
.press-aside { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 14px; }
.press-card {
  padding: 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: inset 0 1px 0 var(--hairline);
}
.press-card h3 { font-size: calc(12px / var(--tz, 1)); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 12px; }
.press-facts { display: grid; gap: 12px; }
.press-facts div { display: grid; gap: 2px; }
.press-facts dt { font-size: calc(11.5px / var(--tz, 1)); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }
.press-facts dd { font-size: calc(14px / var(--tz, 1)); line-height: 1.5; color: var(--fg-soft); }
.press-facts dd a { color: var(--accent-text); }
.press-card.contact { border-color: var(--accent-border); background: linear-gradient(180deg, rgba(240, 106, 155, 0.12), var(--surface)); }
.press-card.contact p { font-size: calc(14px / var(--tz, 1)); line-height: 1.55; color: var(--fg-2); margin-bottom: 14px; }
.press-card.contact .btn { width: 100%; }
.press-card.research p { font-size: calc(14px / var(--tz, 1)); line-height: 1.55; color: var(--fg-2); margin-bottom: 10px; }
.press-card.research p:last-child { margin-bottom: 0; }
@media (max-width: 980px) {
  .press-body { grid-template-columns: 1fr; gap: 32px; }
  .press-aside { position: static; }
}

.press-new { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.press-new .feat h3 { font-size: calc(16px / var(--tz, 1)); }
@media (max-width: 880px) { .press-new { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .press-new { grid-template-columns: 1fr; } }

.press-kit { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 12px; }
.kit-item {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 120ms, transform 120ms;
}
.kit-item:hover { border-color: var(--accent-border); transform: translateY(-2px); }
.kit-preview {
  display: grid;
  place-items: center;
  aspect-ratio: 1200 / 630;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border);
}
.kit-preview img { width: 100%; height: 100%; object-fit: cover; }
.kit-preview.icon img { width: 42%; height: auto; border-radius: 22%; box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.8); }
.kit-preview.swatches { display: grid; grid-template-columns: repeat(3, 1fr); place-items: stretch; }
.kit-preview.swatches i { display: block; }
.kit-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; }
.kit-meta b { display: block; font-size: calc(14px / var(--tz, 1)); color: var(--fg); }
.kit-meta small { font-size: calc(12px / var(--tz, 1)); color: var(--fg-3); font-family: var(--font-mono); }
.kit-meta .dl { font-size: calc(12.5px / var(--tz, 1)); font-weight: 700; color: var(--accent-text); white-space: nowrap; }
@media (max-width: 880px) { .press-kit { grid-template-columns: 1fr 1fr; } .press-kit .kit-item:first-child { grid-column: 1 / -1; } }
@media (max-width: 480px) { .press-kit { grid-template-columns: 1fr; } }

.press-boiler {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  padding: 28px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
}
.press-boiler h2 { font-family: var(--font-display); font-weight: 400; font-size: calc(26px / var(--tz, 1)); line-height: 1.2; }
.press-boiler p { font-size: calc(15.5px / var(--tz, 1)); line-height: 1.7; color: var(--fg-soft); }
.press-boiler p + p { margin-top: 0.8em; }
.press-boiler a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.press-boiler .names { font-size: calc(13.5px / var(--tz, 1)); color: var(--fg-2); }
.press-boiler .names b { color: var(--fg); }
@media (max-width: 760px) { .press-boiler { grid-template-columns: 1fr; gap: 12px; padding: 22px; } }

/* ---------- guide pages: hero, two-column layout, sidebar ---------- */
/* A guide is a hero (crumbs, H1, lede, meta, CTA row) over a grid: the
   article in a ≤68ch column and, from 1024px, a sticky 300px sidebar (table
   of contents, CTA card, related guides). Narrower, the sidebar's blocks
   stack into the page grid (display: contents + order): TOC before the
   article, CTA card and related after it. */
.wrap-guide { width: 100%; max-width: 1120px; margin: 0 auto; padding-inline: 24px; }
/* wider on a big screen (the owner, 2026-11-09) */
@media (min-width: 1280px) { .wrap-guide { max-width: 1280px; } }
@media (max-width: 600px) { .wrap-guide { padding-inline: 18px; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* The hero (the owner, 2026-11-09: "super beautiful… modern wow, keep the
   page speedy"): a lit panel — two slow rose / violet lights and a faint
   grid under it, all gradients (no image, no blur filter) — the title big
   in Lora, the byline with its initial, a big pill button with a breathing
   halo, the perks as glass chips with their icons; on a guide from 1024px,
   the app's beat on the right, lit by the Rewrite ring, its scene writing
   itself in (scripts/build-guides.mjs heroArt). Everything that moves is
   transform / opacity; under reduced motion it stands on its last frame. */
.guide-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
  align-items: center;
  margin: 6px -6px 44px;
  padding: 28px 22px 30px;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 40%),
    linear-gradient(160deg, #1a1520 0%, #131117 55%, #100e13 100%);
  box-shadow: 0 40px 90px -50px rgba(240, 106, 155, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* the lights: two soft discs drifting slowly */
.guide-hero::before, .guide-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.guide-hero::before {
  width: 640px; height: 640px;
  top: -380px; left: -180px;
  background: radial-gradient(closest-side, rgba(240, 106, 155, 0.30), rgba(240, 106, 155, 0.10) 55%, transparent);
}
.guide-hero::after {
  width: 560px; height: 560px;
  bottom: -340px; right: -160px;
  background: radial-gradient(closest-side, rgba(155, 109, 255, 0.24), rgba(245, 166, 106, 0.07) 60%, transparent);
}
/* a faint grid, fading out from the top left */
.gh-main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(120% 90% at 0% 0%, #000 20%, transparent 70%);
  mask-image: radial-gradient(120% 90% at 0% 0%, #000 20%, transparent 70%);
}
.gh-main { min-width: 0; max-width: 720px; }
.guide-hero .crumbs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  max-width: 100%;
  margin: 0 0 22px;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.03);
  font-size: calc(12px / var(--tz, 1));
  color: var(--fg-3);
}
.guide-hero .crumbs span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34ch; color: var(--fg-2); }
.guide-hero h1 {
  font-size: calc(clamp(32px, 5.6vw, 52px) / var(--tz, 1));
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin-bottom: 18px;
  background: linear-gradient(180deg, #fff 30%, #d9cfd8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.guide-hero .lede { font-size: calc(clamp(16.5px, 1.6vw, 18.5px) / var(--tz, 1)); line-height: 1.6; color: var(--fg-soft); opacity: 0.86; max-width: 60ch; margin: 0 0 20px; text-wrap: pretty; }
.guide-hero .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0 0 28px; font-size: calc(13px / var(--tz, 1)); color: var(--fg-3); }
.meta-av {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 26px; height: 26px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--grad);
  color: #2a0f1b;
  font: 800 calc(12px / var(--tz, 1))/1 var(--font-ui);
  box-shadow: 0 0 0 3px rgba(240, 106, 155, 0.14);
}
.meta-bit { white-space: nowrap; }
.meta-bit + .meta-bit::before { content: "·"; margin: 0 8px; color: var(--border-strong); }
.guide-hero .meta .byline { color: var(--fg); }
.guide-hero .meta .byline:hover { color: var(--accent-text); }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
.guide-hero .cta-row { flex-direction: column; align-items: flex-start; gap: 20px; }
.cta-halo { position: relative; display: inline-flex; isolation: isolate; max-width: 100%; }
.cta-halo::before {
  content: "";
  position: absolute;
  inset: 6px 10px -4px;
  z-index: -1;
  border-radius: 999px;
  background: var(--grad);
  filter: blur(18px);
  opacity: 0.55;
  pointer-events: none;
}
.btn-hero {
  max-width: 100%;
  padding: 16px 26px 16px 28px;
  border-radius: 999px;
  font-size: calc(16px / var(--tz, 1));
  font-weight: 800;
  letter-spacing: -0.005em;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 6px rgba(120, 10, 50, 0.25), 0 14px 34px -14px rgba(240, 106, 155, 0.9);
  transition: transform 200ms cubic-bezier(.3, 1.4, .5, 1), filter 160ms;
}
.btn-hero span { white-space: normal; }
.btn-cta.btn-hero .arr {
  width: 26px; height: 26px;
  padding: 5px;
  margin-right: -8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}
.btn-cta.btn-hero:hover .arr { transform: translateX(3px); }
.btn-hero:hover { transform: translateY(-2px) scale(1.02); filter: brightness(1.08); }
.btn-hero:active { transform: translateY(0) scale(0.98); }
.guide-hero .perks { gap: 8px; width: 100%; }
.guide-hero .perks li {
  gap: 7px;
  padding: 6px 12px 6px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  color: var(--fg-soft);
  font-size: calc(12.5px / var(--tz, 1));
}
.guide-hero .perks li::before { content: none; }
.guide-hero .perks svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--accent-text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 600px) {
  .guide-hero { padding: 22px 20px 24px; border-radius: 22px; }
  .guide-hero .crumbs { margin-bottom: 18px; }
  .guide-hero .crumbs span { display: none; }
  .guide-hero .lede { margin-bottom: 16px; }
  .guide-hero .meta { margin-bottom: 22px; font-size: calc(12.5px / var(--tz, 1)); }
  /* Published goes when Updated follows it: one line on a phone */
  .meta-bit:nth-child(3):nth-last-child(3) { display: none; }
  .guide-hero .cta-row { align-items: stretch; gap: 16px; }
  .cta-halo, .btn-hero { width: 100%; }
  .guide-hero .perks { flex-direction: column; gap: 7px; }
  .guide-hero .perks li { padding: 0; border: none; background: none; font-size: calc(13px / var(--tz, 1)); }
}
/* The guide's illustration (public/guides/art, scripts/guide-art.mjs): behind
   the glass on a computer, fading into the dark under the text; a picture
   band across the top on a phone (the owner, 2026-11-09). */
.guide-hero .gh-bg { position: relative; z-index: 0; height: 200px; margin: -28px -22px -12px; background: center 50% / cover no-repeat; pointer-events: none; }
.guide-hero .gh-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 15, 22, 0) 45%, #141118 100%); }
@media (min-width: 1024px) {
  .guide-hero .gh-bg { position: absolute; inset: 0; z-index: -1; height: auto; margin: 0; background-position: right 45%; }
  .guide-hero .gh-bg::after {
    background:
      linear-gradient(90deg, #120f16 0%, rgba(18, 15, 22, 0.94) 38%, rgba(18, 15, 22, 0.55) 62%, rgba(18, 15, 22, 0.2) 100%),
      linear-gradient(180deg, rgba(18, 15, 22, 0) 60%, rgba(18, 15, 22, 0.7) 100%);
  }
}
.gh-art { display: none; }
@media (min-width: 1024px) {
  .guide-hero { margin-inline: 0; padding: 48px 48px 50px 52px; border-radius: 30px; }
  .guide-hero.has-art { grid-template-columns: minmax(0, 1fr) 370px; gap: 52px; }
  .has-art .gh-art { display: block; position: relative; }
}
@media (prefers-reduced-motion: no-preference) {
  .guide-hero::before { animation: gh-drift-a 22s ease-in-out infinite alternate; }
  .guide-hero::after { animation: gh-drift-b 26s ease-in-out infinite alternate; }
  .cta-halo::before { animation: gh-breathe 3.6s ease-in-out infinite; }
  .gh-main > * { animation: gh-rise 700ms cubic-bezier(.2, .7, .2, 1) both; }
  .gh-main > :nth-child(2) { animation-delay: 60ms; }
  .gh-main > :nth-child(3) { animation-delay: 140ms; }
  .gh-main > :nth-child(4) { animation-delay: 210ms; }
  .gh-main > :nth-child(5) { animation-delay: 280ms; }
  .gh-art { animation: gh-float-in 900ms cubic-bezier(.2, .7, .2, 1) 200ms both; }
}
@keyframes gh-drift-a { to { transform: translate(140px, 70px) scale(1.12); } }
@keyframes gh-drift-b { to { transform: translate(-120px, -60px) scale(1.1); } }
@keyframes gh-breathe { 0%, 100% { opacity: 0.4; transform: scale(0.96); } 50% { opacity: 0.8; transform: scale(1.04); } }
@keyframes gh-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes gh-float-in { from { opacity: 0; transform: translateY(24px) scale(0.96); } to { opacity: 1; transform: none; } }

.guide-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: start; }
.guide-body { min-width: 0; max-width: 68ch; }
.guide-side { display: contents; }
.guide-side .toc { order: -1; }
.guide-side .side-cta { order: 1; }
.guide-side .side-related { order: 2; }
.guide-side > :empty { display: none; }
@media (min-width: 1024px) {
  .guide-layout { grid-template-columns: minmax(0, 68ch) 300px; column-gap: 64px; }
  .guide-side {
    display: flex;
    flex-direction: column;
    gap: 22px;
    position: sticky;
    top: calc(var(--site-head-h) + 24px); /* under the sticky nav */
    max-height: calc(100dvh - var(--site-head-h) - 48px);
    overflow-y: auto;
    scrollbar-width: none;
  }
  @supports not (height: 1dvh) {

    .guide-side {
      max-height: calc(100vh - var(--site-head-h) - 48px);
    }
  }
  .guide-side::-webkit-scrollbar { display: none; }
  .guide-side .toc, .guide-side .side-cta, .guide-side .side-related { order: 0; }
}
/* wider on a big screen (the owner, 2026-11-09) */
@media (min-width: 1280px) {
  .guide-layout { grid-template-columns: minmax(0, 1fr) 320px; column-gap: 72px; }
  .guide-body { max-width: 780px; }
}

.side-head { font-size: calc(11px / var(--tz, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3); margin: 0 0 10px; }
.toc { padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: inset 0 1px 0 var(--hairline); }
.toc ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--border); }
.toc li { margin: 0; }
.toc a {
  display: block;
  padding: 5px 0 5px 14px;
  margin-left: -1px;
  border-left: 1px solid transparent;
  font-size: calc(13.5px / var(--tz, 1));
  line-height: 1.4;
  color: var(--fg-2);
  transition: color 120ms, border-color 120ms;
}
.toc a:hover { color: var(--fg); }
.toc a.is-active { color: var(--accent-text); border-left-color: var(--accent); }
@media (min-width: 1024px) { .toc { padding: 0; background: none; border: none; box-shadow: none; } }

.side-related ul { list-style: none; padding: 0; margin: 0; }
.side-related li { margin-bottom: 12px; font-size: calc(14px / var(--tz, 1)); line-height: 1.4; }
.side-related li a { color: var(--fg-soft); }
.side-related li a:hover { color: var(--accent-text); }
.side-related .tag { display: block; margin-top: 2px; font-size: calc(11px / var(--tz, 1)); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }
@media (max-width: 1023px) { .side-related { padding-top: 24px; border-top: 1px solid var(--border); } }

/* in-article extras: tables, figures, callouts, the end CTA, the "made" box */
article h2 { scroll-margin-top: 24px; }
article blockquote p { margin: 0; }
article blockquote p + p { margin-top: 0.7em; }
.table-wrap { overflow-x: auto; margin: 0 0 1.5em; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); -webkit-overflow-scrolling: touch; }
article table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: calc(14.5px / var(--tz, 1)); line-height: 1.5; }
article th, article td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
article th { font-size: calc(11.5px / var(--tz, 1)); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-2); background: var(--surface-raised); white-space: nowrap; }
article td:first-child { color: var(--fg); font-weight: 600; }
article tbody tr:last-child td { border-bottom: none; }
article figure { margin: 0 0 1.5em; }
article figure img { display: block; width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--border); }
article figcaption { margin-top: 8px; font-size: calc(13px / var(--tz, 1)); line-height: 1.5; color: var(--fg-3); }
article p.note {
  padding: 14px 18px;
  border: 1px solid var(--accent-border);
  border-left-width: 3px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  font-size: calc(15px / var(--tz, 1));
}
article p.note strong { color: var(--accent-text); }
/* Share buttons (build-guides' shareLinks): a sticky rail left of the
   article where there's room for it, else a small row after the article. */
.share { display: flex; gap: 10px; }
.share-btn {
  display: inline-grid; place-items: center; flex: none; width: 42px; height: 42px; padding: 0;
  border-radius: 50%; border: 1px solid transparent; background: none;
  color: var(--fg-3); cursor: pointer; text-decoration: none;
  transition: color .15s, background-color .15s, border-color .15s;
}
.share-btn:hover, .share-btn:focus-visible { color: var(--fg); background: var(--surface); border-color: var(--border); }
.share-btn:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.share-copy .i-ok { display: none; }
.share-copy.is-copied { color: var(--ok); }
.share-copy .i-link, .share-copy.is-copied .i-ok { display: contents; }
.share-copy.is-copied .i-link { display: none; }
.share-rail { display: none; }
.share-row { margin: 28px 0 0; }
@media (min-width: 1440px) {
  /* zero height and sticky inside the article, so it follows the reader to
     the article's end; the buttons hang off its left edge */
  .guide-body > .share-rail {
    display: flex; flex-direction: column; position: sticky; z-index: 2;
    top: calc(var(--site-head-h) + 32px); height: 0; width: 42px; margin-left: -82px;
  }
  .share-row { display: none; }
}

.made-box {
  margin: 2.5em 0 0;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 var(--hairline);
  font-size: calc(14px / var(--tz, 1));
  line-height: 1.55;
  color: var(--fg-2);
}
.made-box .made-head { font-size: calc(11px / var(--tz, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3); margin: 0 0 6px; }
.made-box p { margin: 0; }
.made-box a { color: var(--accent-2); text-decoration: none; }
.made-box a:hover { color: var(--accent-text); }

/* /guides index: cards in two columns on wide screens, with a cluster tag */
.card-tag { display: inline-block; margin-bottom: 8px; font-size: calc(11px / var(--tz, 1)); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
.guide-page .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) { .guide-page .cards { grid-template-columns: 1fr; } }
.card h2 { text-wrap: pretty; }

@media (prefers-reduced-motion: reduce) {
  .btn, .card, .kit-item, .toc a { transition: none; }
  .btn-primary:hover, .card:hover, .kit-item:hover { transform: none; }
}

/* ---------- landing: the feature showcases (#features) ----------
   Five blocks, text one side and a live mock of the feature the other,
   alternating. /landing.js reveals them on scroll (.reveal → .in) and runs
   each mock as a silent loop while it is on screen (data-scene). The static
   markup is the no-JS / reduced-motion frame, so every mock reads as a
   finished picture before any script runs. */
.showcase { padding-bottom: 24px; }
.showcase .section-head { max-width: 760px; margin: 0 auto 8px; text-align: center; }
/* The text column is as wide as the text (so no slack opens between the
   two halves); the mock takes the rest, up to a sane width. */
.show {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  padding: 44px 0;
}
.show + .show { border-top: 1px solid var(--hairline); }
.show.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
.show.flip .show-text { order: 2; }
.show-text { min-width: 0; }
.show-visual { max-width: 720px; width: 100%; justify-self: end; }
.show.flip .show-visual { justify-self: start; }
.show-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: calc(11.5px / var(--tz, 1));
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 14px;
}
.show-kicker i { width: 18px; height: 2px; border-radius: 2px; background: var(--grad); }
.show-text h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(clamp(26px, 3.2vw, 36px) / var(--tz, 1));
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin-bottom: 14px;
}
.show-text h3 em { font-style: italic; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.show-text p { font-size: calc(15.5px / var(--tz, 1)); line-height: 1.65; color: var(--fg-2); margin-bottom: 18px; }
.show-points { list-style: none; display: grid; gap: 8px; }
.show-points li { position: relative; padding-left: 24px; font-size: calc(14px / var(--tz, 1)); color: var(--fg-soft); line-height: 1.5; }
.show-points li b { color: var(--fg); font-weight: 700; }
.show-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  box-shadow: 0 0 12px -2px rgba(240, 106, 155, 0.7);
}
.show-points li::after {
  content: "";
  position: absolute;
  left: 4px; top: 11px;
  width: 6px; height: 3.5px;
  border-left: 1.8px solid var(--accent-text);
  border-bottom: 1.8px solid var(--accent-text);
  transform: rotate(-45deg);
}
.show-visual { position: relative; min-width: 0; }
.show-visual::before {
  content: "";
  position: absolute;
  inset: 8% -4% -8% -4%;
  background: radial-gradient(55% 55% at 50% 45%, rgba(240, 106, 155, 0.22), transparent 70%);
  filter: blur(26px);
  z-index: 0;
  pointer-events: none;
}
.show.flip .show-visual::before { background: radial-gradient(55% 55% at 50% 45%, rgba(245, 166, 106, 0.18), transparent 70%); }
@media (max-width: 880px) {
  .show, .show.flip { grid-template-columns: 1fr; gap: 26px; padding: 36px 0; }
  .show.flip .show-text { order: 0; }
  .show-text { max-width: 560px; }
  .show-visual, .show.flip .show-visual { justify-self: start; max-width: none; }
}

/* the mock window every showcase sits in */
.sv {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
  text-align: left;
  box-shadow: 0 0 0 1px rgba(240, 106, 155, 0.16), 0 30px 70px -30px rgba(0, 0, 0, 0.9), inset 0 1px 0 var(--hairline);
}
.sv-pane { min-width: 0; padding: 14px; }
.sv-pane + .sv-pane { border-left: 1px solid var(--border); background: var(--bg-deep); }
.sv-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: calc(10px / var(--tz, 1));
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 12px;
  white-space: nowrap;
}
.sv-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); margin-right: 6px; display: inline-block; vertical-align: 1px; }
.sv-prose { font-family: var(--font-display); font-size: calc(13.5px / var(--tz, 1)); line-height: 1.62; color: var(--fg); }
.sv .shot-pill { font-size: calc(11.5px / var(--tz, 1)); padding: 4px 9px; transition: transform 0.15s ease, background 0.15s, border-color 0.15s, color 0.15s; }
.sv .shot-pill.pressed { transform: scale(0.94); border-color: var(--accent-border); color: var(--accent-text); background: var(--accent-soft); }
.sv .shot-pill.primary.pressed { color: #fff; background: var(--accent-strong); }
.sv .shot-w { animation: shot-word 0.35s ease both; }
.sv .shot-caret { display: inline-block; }
.sv .t { white-space: pre-wrap; }
/* A mock never changes height while it plays: every text it can show sits
   in the same grid cell, the hidden ones only holding the room (so the
   box is as tall as its longest state at any width, no per-breakpoint
   fixed heights). */
.sv-stack { display: grid; }
.sv-stack > * { grid-area: 1 / 1; min-width: 0; }
.sv-ghost { visibility: hidden; pointer-events: none; }
@media (max-width: 480px) {
  .sv, .sv.sv-publish { grid-template-columns: 1fr; }
  .sv-pane + .sv-pane { border-left: 0; border-top: 1px solid var(--border); }
}

/* 1 · the story bible */
.sv-beat {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface-raised), var(--surface-raised)) padding-box,
    var(--grad-border) border-box;
  border-radius: var(--r-md);
  padding: 12px 13px;
  box-shadow: 0 12px 30px -16px rgba(240, 106, 155, 0.45);
  transition: border-color 0.4s, box-shadow 0.4s, opacity 0.4s;
}
.sv-bible.done .sv-beat { background: var(--surface-raised); border-color: var(--border); box-shadow: none; }
.sv-bible.done .sv-beat .sv-prose { color: var(--fg-2); }
.sv-acts { display: flex; justify-content: flex-end; margin-top: 10px; }
.nm { font-weight: 500; border-radius: 4px; padding: 0 2px; margin: 0 -2px; transition: background 0.3s, color 0.3s, box-shadow 0.3s; }
.nm.lit { background: var(--accent-soft); color: var(--accent-text); box-shadow: 0 0 0 1px var(--accent-border); }
.sv-next { margin-top: 12px; opacity: 0.45; transition: opacity 0.4s; }
.sv-bible.next-on .sv-next { opacity: 1; }
.sv-next-label { display: block; font-size: calc(10px / var(--tz, 1)); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 6px; }
.sv-mind { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: calc(10.5px / var(--tz, 1)); }
.sv-mind span { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--fg-2); transition: background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; }
.sv-mind .sv-mind-label { padding: 2px 0; border: 0; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-3); }
.sv-mind span.lit { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent-border); box-shadow: 0 0 14px -4px var(--accent); }
.sv-bible-state { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; font-size: calc(10.5px / var(--tz, 1)); color: var(--ok); }
.sv-bible-state i { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.sv-bible-state.busy { color: var(--warn); }
.sv-bible-state.busy i { background: var(--warn); box-shadow: 0 0 8px var(--warn); animation: shot-pulse 0.9s ease-in-out infinite; }
.sv-entries { display: grid; gap: 6px; }
.sv-entry {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 9px;
  align-items: center;
  padding: 7px 9px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color 0.35s, box-shadow 0.35s, background 0.35s, opacity 0.4s, transform 0.4s;
}
.sv-entry b { display: block; font-size: calc(12px / var(--tz, 1)); font-weight: 700; color: var(--fg); line-height: 1.2; }
.sv-entry small { display: block; font-size: calc(10.5px / var(--tz, 1)); color: var(--fg-3); margin-top: 1px; }
.sv-entry-ico {
  width: 24px; height: 24px;
  border-radius: 7px;
  display: grid; place-items: center;
  font-size: calc(11px / var(--tz, 1)); font-weight: 800;
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
}
.sv-entry.flash { border-color: var(--accent-border); background: var(--accent-soft); box-shadow: 0 0 18px -6px var(--accent); }
.sv-entry small .n { transition: color 0.3s; }
.sv-entry.flash small, .sv-entry.flash small .n { color: var(--accent-text); }
.sv-bible.live .sv-entry-new { opacity: 0; transform: translateY(6px); }
.sv-bible.live .sv-entry-new.shown { opacity: 1; transform: none; }
.sv-foot { margin-top: 12px; font-size: calc(10.5px / var(--tz, 1)); color: var(--fg-3); }
.sv-count { color: var(--fg-2); font-weight: 700; }
.sv-fly {
  position: absolute;
  z-index: 3;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: calc(11px / var(--tz, 1));
  font-weight: 700;
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  box-shadow: 0 0 16px -4px var(--accent);
  pointer-events: none;
  white-space: nowrap;
  transition: transform 0.75s cubic-bezier(0.3, 0.8, 0.25, 1), opacity 0.3s ease 0.55s;
}

/* 3 · versions: a map beside the picked draft */
.sv-tree { display: flex; flex-direction: column; }
.sv-graph { position: relative; }
.sv-graph svg { position: absolute; left: 0; top: 0; width: 56px; height: 100%; overflow: visible; }
.sv-line { fill: none; stroke: var(--border-strong); stroke-width: 1.5; }
.sv-rows { list-style: none; display: grid; }
.sv-row {
  position: relative;
  height: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: calc(8px + var(--lane) * 24px);
  font-size: calc(12.5px / var(--tz, 1));
  font-weight: 600;
  color: var(--fg-2);
  transition: color 0.3s;
}
.sv-row small { display: block; font-size: calc(10.5px / var(--tz, 1)); font-weight: 500; color: var(--fg-3); }
.sv-row i {
  flex: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border-strong);
  box-shadow: 0 0 0 3px var(--bg-deep);
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s, transform 0.3s;
}
.sv-row.current { color: var(--fg); }
.sv-row.current i { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 3px var(--bg-deep), 0 0 16px var(--accent); transform: scale(1.15); }
.sv-row.picked:not(.current) i { border-color: var(--accent-text); }
.sv-undo { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; }
.sv-draft-name { color: var(--fg-2); }
.sv-draft-tag { font-size: calc(9.5px / var(--tz, 1)); letter-spacing: 0.08em; padding: 2px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); border: 1px solid var(--accent-border); }
.sv-draft-tag.old { background: var(--surface); color: var(--fg-3); border-color: var(--border-strong); }
.sv-draft-text { transition: opacity 0.3s, transform 0.3s; }
.sv-draft-text.swap { opacity: 0; transform: translateY(5px); }

/* 4 · rewrite control: the gearbox */
.sv-gears { grid-template-columns: 1fr; }
.sv-words { text-transform: none; letter-spacing: 0.02em; font-size: calc(10.5px / var(--tz, 1)); font-variant-numeric: tabular-nums; }
.sv-words b { color: var(--fg-2); }
.sv-note {
  font-family: var(--font-display);
  font-size: calc(13px / var(--tz, 1));
  color: var(--fg-2);
  padding: 9px 12px;
  border-radius: var(--r-sm);
  border: 1px dashed var(--border-strong);
  background: var(--surface-raised);
}
.sv-note-label { display: block; font-family: var(--font-ui); font-size: calc(9.5px / var(--tz, 1)); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 3px; }
/* The app's gear shift (src/lib/ui/effort-picker + styles.css .gear-*):
   three dots on one line, the line filled up to the picked one. */
.sv-shift { display: flex; align-items: flex-start; gap: 16px; margin: 14px 0 12px; }
.sv-shift-label { font-size: calc(10px / var(--tz, 1)); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); line-height: 16px; }
.sv-gear-track {
  --dot: 16px;
  position: relative;
  flex: 1;
  max-width: 280px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
}
.sv-gear-line, .sv-gear-fill {
  position: absolute;
  top: calc(var(--dot) / 2 - 1px);
  left: calc(100% / 6);
  height: 2px;
  border-radius: 2px;
  background: var(--border-strong);
}
.sv-gear-line { right: calc(100% / 6); }
.sv-gear-fill {
  width: calc(var(--g, 1) * 100% / 3);
  background: var(--accent);
  transition: width 0.45s cubic-bezier(0.3, 0.8, 0.25, 1.1);
}
.sv-gear {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-size: calc(12.5px / var(--tz, 1));
  font-weight: 500;
  color: var(--fg-2);
  transition: color 0.2s;
}
.sv-gear i {
  width: var(--dot);
  height: var(--dot);
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--surface);
  transition: background 0.3s, border-color 0.3s;
}
.sv-gear.done i { border-color: var(--accent); }
.sv-gear.on i { border-color: var(--accent); background: var(--accent); }
.sv-gear.on { color: var(--accent-text); }
.sv-out {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface-raised), var(--surface-raised)) padding-box,
    var(--grad-border) border-box;
  border-radius: var(--r-md);
  padding: 12px 13px;
  box-shadow: 0 12px 30px -16px rgba(240, 106, 155, 0.45);
}
.sv-out-text { transition: opacity 0.3s; }
.sv-out-text.dim { opacity: 0.3; }

/* 5 · publish */
.sv-publish { grid-template-columns: 1fr 1.05fr; }
.sv-pub-meta { text-transform: none; letter-spacing: 0.02em; }
.sv-chaps { list-style: none; display: grid; gap: 5px; margin-bottom: 12px; }
.sv-chaps li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: calc(12.5px / var(--tz, 1));
  color: var(--fg-2);
  padding: 7px 9px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface-raised);
  transition: border-color 0.35s, background 0.35s;
}
.sv-chaps li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-chaps li b { font-size: calc(9.5px / var(--tz, 1)); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; color: var(--fg-3); border: 1px solid var(--border-strong); white-space: nowrap; transition: color 0.35s, background 0.35s, border-color 0.35s; }
.sv-chaps li.is-pub b { color: var(--ok); background: var(--ok-soft); border-color: rgba(134, 210, 154, 0.4); }
.sv-chaps li.sv-chap-new { border-color: var(--accent-border); }
.sv-chaps li.sv-chap-new.is-pub { border-color: var(--border); }
.sv-pub-btn { width: 100%; font-size: calc(13px / var(--tz, 1)); padding: 10px 14px; transition: transform 0.15s ease, filter 0.15s, background 0.3s, box-shadow 0.3s; }
.sv-pub-btn.pressed { transform: scale(0.96); filter: brightness(0.92); }
.sv-pub-btn.done { background: var(--ok-soft); color: var(--ok); box-shadow: inset 0 0 0 1px rgba(134, 210, 154, 0.4); }
.sv-pub-out { display: flex; flex-direction: column; gap: 10px; }
.sv-book {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 11px;
  align-items: center;
  padding: 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: inset 0 1px 0 var(--hairline);
}
.sv-cover {
  aspect-ratio: 2 / 3;
  border-radius: 5px;
  display: flex;
  align-items: flex-end;
  padding: 6px 5px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: calc(9.5px / var(--tz, 1));
  line-height: 1.15;
  color: #fff;
  background: linear-gradient(160deg, #3a1f3a 0%, #d93a75 55%, #f5a66a 100%);
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.sv-book-meta b { display: block; font-size: calc(13.5px / var(--tz, 1)); color: var(--fg); line-height: 1.2; }
.sv-book-meta small { display: block; font-size: calc(11px / var(--tz, 1)); color: var(--fg-3); margin: 2px 0 6px; }
.sv-book-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; font-size: calc(10.5px / var(--tz, 1)); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.sv-book-stats span { white-space: nowrap; }
.sv-book-meta .sv-kudos b { display: inline; font-size: inherit; line-height: inherit; color: var(--accent-text); font-weight: 700; }
.sv-epub { padding: 1px 6px; line-height: 1.4; border-radius: 999px; border: 1px solid var(--border-strong); font-size: calc(9.5px / var(--tz, 1)); font-weight: 700; letter-spacing: 0.06em; }
.sv-share {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px 7px 11px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: calc(11px / var(--tz, 1));
  font-family: var(--font-mono);
  color: var(--fg-2);
}
.sv-share-link { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-share-copy { flex: none; font-family: var(--font-ui); font-size: calc(11px / var(--tz, 1)); font-weight: 700; color: var(--accent-text); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--accent-border); background: var(--accent-soft); transition: background 0.3s, color 0.3s, border-color 0.3s; }
.sv-share-copy.ok { color: var(--ok); background: var(--ok-soft); border-color: rgba(134, 210, 154, 0.4); }
.sv-readers { display: flex; align-items: center; font-size: calc(11px / var(--tz, 1)); color: var(--fg-2); }
.sv-readers i {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--bg-deep);
  margin-right: -6px;
  background: linear-gradient(135deg, #e58bb5, #f5a66a);
}
.sv-readers i:nth-child(2) { background: linear-gradient(135deg, #86d29a, #e58bb5); }
.sv-readers i:nth-child(3) { background: linear-gradient(135deg, #f0b36a, #d93a75); }
.sv-readers span { margin-left: 12px; }
.sv-readers b { color: var(--fg); }
.sv-publish.live .sv-pub-out > * { opacity: 0; transform: translateY(8px); transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.sv-publish.live .sv-pub-out > .shown { opacity: 1; transform: none; }
.sv-publish.live .sv-book { transition-delay: 0s; }
.sv-publish.live .sv-cover { transform: rotateY(18deg); transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s; }
.sv-publish.live .sv-book.shown .sv-cover { transform: none; }

/* ---------- scroll reveal ----------
   Anything .reveal (or a child of .reveal-stagger) rises in once it scrolls
   into view. Only when the script is there to show it (html.js), so no-JS
   readers see everything at once. */
html.js .reveal,
html.js .reveal-stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--d, 0ms);
}
html.js .show-visual.reveal { transform: translateY(26px) scale(0.965); }
html.js .reveal.in,
html.js .reveal-stagger.in > * { opacity: 1; transform: none; }
html.js .reveal-stagger.in > :nth-child(2) { --d: 90ms; }
html.js .reveal-stagger.in > :nth-child(3) { --d: 180ms; }
html.js .reveal-stagger.in > :nth-child(4) { --d: 270ms; }
html.js .show-visual.reveal.in { --d: 120ms; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal, html.js .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
  .sv *, .sv-line { transition: none !important; animation: none !important; }
}

/* ---------- landing: beat by beat → one manuscript (#beats) ----------
   A centred manuscript page with one slot per beat. Live, the beat cards
   fly in over their slots one after another and dissolve into the page's
   prose. Each slot holds its final text as a ghost, so the page is the same
   height before, during and after. */
.beatflow .section-head { max-width: 760px; margin: 0 auto 28px; text-align: center; }
.bf { position: relative; max-width: 720px; margin: 0 auto; }
.bf-rail {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-bottom: 22px;
  font-size: calc(11px / var(--tz, 1));
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.bf-rail span { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 0 18px; transition: color 0.3s; }
.bf-rail span + span::before {
  content: "";
  position: absolute;
  left: -14px;
  width: 28px;
  height: 1px;
  background: var(--border-strong);
}
.bf-rail span i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); transition: background 0.3s, box-shadow 0.3s, transform 0.3s; }
.bf-rail span.done { color: var(--fg-2); }
.bf-rail span.done i { background: var(--fg-3); }
.bf-rail span.on { color: var(--accent-text); }
.bf-rail span.on i { background: var(--accent); box-shadow: 0 0 12px var(--accent); transform: scale(1.3); }
.bf-stage { position: relative; padding: 6px 10px; overflow: hidden; }
.bf-stage::before {
  content: "";
  position: absolute;
  inset: 10% 0 -6% 0;
  background: radial-gradient(55% 60% at 50% 50%, rgba(240, 106, 155, 0.2), transparent 70%);
  filter: blur(28px);
  pointer-events: none;
}
.bf-page {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 18px 22px 16px;
  box-shadow: 0 0 0 1px rgba(240, 106, 155, 0.16), 0 30px 70px -30px rgba(0, 0, 0, 0.9), inset 0 1px 0 var(--hairline);
  overflow: hidden;
  transition: box-shadow 0.8s, background 0.8s, border-radius 0.8s, color 0.8s;
}
.bf-page-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: calc(10.5px / var(--tz, 1));
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.bf-words { text-transform: none; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; transition: color 0.3s; }
.bf-words b { color: var(--fg-2); }
.bf-slots { display: grid; gap: 10px; }
.bf-slot {
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  padding: 10px 12px;
  transition: border-color 0.5s, background 0.5s;
}
.bf-slot.filled { border-color: transparent; }
.bf-slot .bf-text { transition: opacity 0.5s; }
.bf.live .bf-slot:not(.filled) .bf-text { opacity: 0; }
.bf-slot.filled .bf-text { color: var(--fg-soft); }
/* the beat card: same box as a slot, so its text wraps the same way */
.bf-card {
  position: absolute;
  z-index: 2;
  display: none;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: 10px 12px;
  background:
    linear-gradient(var(--surface-raised), var(--surface-raised)) padding-box,
    var(--grad-border) border-box;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.9), 0 12px 30px -16px rgba(240, 106, 155, 0.5);
  transform: translateY(-6px) scale(1.015);
  transition: transform 0.5s cubic-bezier(0.2, 0.75, 0.2, 1), opacity 0.35s, box-shadow 0.4s, background 0.4s, border-color 0.4s;
  will-change: transform;
}
/* a card shows only once the script has placed it over its slot */
.bf.live .bf-card.placed { display: block; }
.bf-card.from-left { transform: translate(-115%, -6px) rotate(-3deg); opacity: 0; }
.bf-card.from-right { transform: translate(115%, -6px) rotate(3deg); opacity: 0; }
.bf-card.landed { transform: none; box-shadow: none; background: var(--surface-raised); border-color: var(--border); }
.bf-card.dissolve { opacity: 0; }
/* "Beat N" rides the card's top-left edge: no room taken, so the card is
   exactly its slot's box. */
.bf-tag {
  position: absolute;
  top: -10px;
  left: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 55%;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: calc(9.5px / var(--tz, 1));
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  color: var(--fg-soft);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  transition: opacity 0.3s;
}
.bf-card.landed .bf-tag { opacity: 0; }
.bf.clearing .bf-slot .bf-text { opacity: 0; }
@media (max-width: 600px) {
  .bf-rail { flex-wrap: wrap; gap: 6px 14px; }
  .bf-rail span { padding: 0; font-size: calc(10px / var(--tz, 1)); }
  .bf-rail span + span::before { display: none; }
  .bf-page { padding: 14px 14px 12px; }
}

/* ---- the finale: stitch, book page, publish ---- */
.bf-page-foot { height: 34px; display: grid; place-items: end center; }
.bf-pageno { font-family: var(--font-display); font-style: italic; font-size: calc(11.5px / var(--tz, 1)); color: var(--bg); opacity: 0; transition: opacity 0.6s 0.3s; }
/* a seam sweeps down the page as the beats join */
.bf-seam {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--grad);
  box-shadow: 0 0 18px 2px rgba(240, 106, 155, 0.6);
  opacity: 0;
  pointer-events: none;
}
.bf.stitch .bf-seam { animation: bf-sweep 1.1s cubic-bezier(0.4, 0, 0.3, 1) both; }
@keyframes bf-sweep { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(var(--sweep, 320px)); } }
.bf.stitch .bf-slot.filled .bf-text { animation: bf-join 0.5s ease both; }
.bf.stitch .bf-slot[data-i="1"] .bf-text { animation-delay: 0.3s; }
.bf.stitch .bf-slot[data-i="2"] .bf-text { animation-delay: 0.6s; }
@keyframes bf-join { 0% { color: var(--fg-soft); } 40% { color: var(--accent-text); } 100% { color: inherit; } }
/* the page becomes a book page: paper, ink, a drop cap, a running head */
.bf.book .bf-page {
  background: var(--fg);
  color: var(--bg);
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 40px 80px -30px rgba(0, 0, 0, 0.95), inset 14px 0 24px -18px rgba(0, 0, 0, 0.45);
}
.bf-page-head { transition: color 0.8s, border-color 0.8s; }
.bf.book .bf-page-head { color: rgba(15, 14, 18, 0.55); border-bottom-color: rgba(15, 14, 18, 0.15); }
.bf.book .bf-words b { color: var(--bg); }
.bf-slot .bf-text { transition: opacity 0.5s, color 0.8s; }
.bf.book .bf-slot.filled .bf-text { color: var(--bg); }
.bf.book .bf-slot[data-i="0"] .bf-text::first-letter {
  float: left;
  font-size: 3.1em;
  line-height: 0.78;
  margin: 5px 7px 0 0;
  font-style: italic;
  color: var(--accent-strong);
}
.bf.book .bf-pageno { opacity: 0.6; }
/* the stamp slams on */
.bf-stamp {
  position: absolute;
  right: 22px; bottom: 16px;
  padding: 4px 12px;
  border: 2.5px solid var(--accent-strong);
  border-radius: 6px;
  color: var(--accent-strong);
  font-size: calc(13px / var(--tz, 1));
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  transform: rotate(-9deg) scale(1.8);
  pointer-events: none;
}
.bf.published .bf-stamp { opacity: 0.88; transform: rotate(-9deg) scale(1); transition: opacity 0.25s, transform 0.4s cubic-bezier(0.2, 1.6, 0.4, 1); }
.bf-after {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  font-size: calc(13px / var(--tz, 1));
  color: var(--ok);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s, transform 0.4s;
}
.bf-after svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.bf-after b { font-family: var(--font-mono); font-weight: 500; color: var(--fg-soft); }
.bf.published .bf-after, html:not(.js) .bf-after { opacity: 1; transform: none; }
.bf.clearing .bf-stamp, .bf.clearing .bf-after { opacity: 0; transition: opacity 0.4s; }
@media (max-width: 600px) { .bf-after { font-size: calc(12px / var(--tz, 1)); flex-wrap: wrap; text-align: center; } }

/* ---------- language button (navbar) — opens /lang-picker.js's dialog ---------- */
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--fg-2);
  font: inherit;
  font-size: calc(12px / var(--tz, 1));
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.lang-btn:hover { color: var(--fg); border-color: var(--border-strong); background: rgba(255, 255, 255, 0.03); }
.lang-flag { font-size: calc(15px / var(--tz, 1)); line-height: 1; }
.lang-code { text-transform: uppercase; }

/* ---------- language picker dialog ----------
   Twin of the app's (src/lib/ui/language-picker.css): keep them alike. */
.lang-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 5, 8, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.lang-modal.open { opacity: 1; }
.lang-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  padding: 26px 22px 22px;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 var(--hairline), 0 30px 80px -20px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(240, 106, 155, 0.06);
  transform: translateY(10px) scale(0.97);
  transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.lang-modal.open .lang-card { transform: none; }
.lang-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  right: 22px;
  height: 1px;
  background: var(--grad);
  opacity: 0.7;
}
.lang-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--fg-3);
  font: inherit;
  font-size: calc(14px / var(--tz, 1));
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.lang-close:hover { background: rgba(255, 255, 255, 0.06); color: var(--fg); }
.lang-title {
  margin: 0 0 4px;
  font-family: var(--font-display, "Lora", Georgia, serif);
  font-weight: 500;
  font-size: calc(22px / var(--tz, 1));
  line-height: 1.25;
  color: var(--fg);
}
.lang-sub { margin: 0 0 18px; font-size: calc(13px / var(--tz, 1)); color: var(--fg-3); }
.lang-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: min(62vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px;
  margin: -2px;
}
@media (max-width: 480px) { .lang-list { grid-template-columns: 1fr; } }
.lang-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.02);
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.lang-option:hover,
.lang-option:focus-visible { border-color: var(--border-strong); background: rgba(255, 255, 255, 0.05); transform: translateX(2px); outline: none; }
.lang-option.current { border-color: var(--accent-border); background: var(--accent-soft); }
.lang-option.picked { transform: scale(0.98); }
.lang-option-flag { font-size: calc(26px / var(--tz, 1)); line-height: 1; width: 30px; text-align: center; }
.lang-option-name { flex: 1; min-width: 0; font-size: calc(15px / var(--tz, 1)); font-weight: 700; letter-spacing: -0.01em; }
.lang-option-code {
  font-size: calc(11px / var(--tz, 1));
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--fg-3);
}
.lang-option-check {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: calc(12px / var(--tz, 1));
  font-weight: 800;
  color: #fff;
}
.lang-option.current .lang-option-check { background: var(--grad-btn); }
.lang-modal-lock, .lang-modal-lock body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .lang-modal, .lang-card, .lang-option { transition: none; }
}
@media (max-width: 480px) {
  .nav-links a { white-space: nowrap; }
  .lang-btn { padding: 4px 6px; gap: 4px; }
}
/* Room for the language button on a phone: Guides is in the footer too. */
@media (max-width: 440px) {
  .nav-links .nav-guides { display: none; }
}
@media (max-width: 400px) {
  .site-nav { gap: 10px; }
  .nav-links { gap: 10px; }
  .nav-links .btn-sm { padding: 7px 11px; }
}
@media (max-width: 380px) {
  .lang-code { display: none; }
}

/* ---------- guide CTAs (scripts/build-guides.mjs) ----------
   The owner, 2026-11-03: "very intuitive, cute, modern, animated a bit".
   The hero row, a mid-article card with a beat turning into a scene, a
   simplified end card, and a sidebar card. Pivot 2026-11-06: lead with
   "Start writing for free!"; same-day follow-up drops the stamp/seal and
   end/side fine print. Every animation stops under prefers-reduced-motion;
   the demo shows its last frame without JavaScript. */
@property --cta-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.guide-body { container-type: inline-size; }

.btn-cta { position: relative; overflow: hidden; isolation: isolate; }
.btn-cta .arr { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 180ms cubic-bezier(.3, 1.5, .5, 1); }
.btn-cta:hover .arr { transform: translateX(4px); }
.btn-cta::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  transform: skewX(-18deg);
  opacity: 0;
}
article a.btn, article a.btn:hover { color: #fff; text-decoration: none; }

.perks { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; padding: 0; margin: 0; }
.perks li { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: calc(12.5px / var(--tz, 1)); font-weight: 600; color: var(--fg-2); }
.perks li::before, .side-cta li::before {
  content: "✓";
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ok-tint);
  color: var(--ok);
  font-size: calc(9.5px / var(--tz, 1));
  font-weight: 800;
}

.cta { position: relative; margin: 3em 0 1.2em; }
.cta h3 { font-family: var(--font-display); font-weight: 400; font-size: calc(25px / var(--tz, 1)); line-height: 1.22; color: var(--fg); margin: 0 0 10px; text-wrap: balance; }
.cta h3 em { font-style: italic; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cta p { font-size: calc(15px / var(--tz, 1)); line-height: 1.55; color: var(--fg-2); margin: 0 0 18px; }
.cta .cta-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 4px 11px 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: calc(11.5px / var(--tz, 1));
  font-weight: 700;
  letter-spacing: 0.04em;
}
.cta-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* the mid card: copy + a beat becoming a scene */
.cta-mid, .end-card {
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(245, 166, 106, 0.13), transparent 62%) padding-box,
    var(--card-deep) padding-box,
    conic-gradient(from var(--cta-a, 0deg), rgba(240, 106, 155, 0.8), rgba(245, 166, 106, 0.35), rgba(240, 106, 155, 0.1), rgba(245, 166, 106, 0.35), rgba(240, 106, 155, 0.8)) border-box;
  box-shadow: var(--cta-glow);
}
.cta-mid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 24px; }
.cta-mid .btn { margin-top: 2px; }
@container (min-width: 580px) {
  .cta-mid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 26px; padding: 28px; }
}
/* the mid card's picture: the write page (.gp, below) */
.cta-demo { position: relative; padding: 0 0 14px; }

/* the end card: headline, seed box, primary button.
   Title uses the full card width (do not use text-wrap: balance here — it
   left a stamp-sized blank on the right after the seal was removed).
   Primary button sits under the seed box, right-aligned to its edge. */
.cta-end { margin-top: 4em; }
.end-card { position: relative; }
.end-card-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 24px 22px 20px;
}
.cta-end h3,
.end-card-body > h3 {
  width: 100%;
  max-width: none;
  padding-right: 0;
  text-wrap: wrap;
}
.end-card-body > .btn-cta {
  align-self: flex-end;
  width: auto;
  max-width: 100%; /* wrap / shrink on narrow phones, never overflow */
}
.cta-idea { display: block; margin: 4px 0 16px; }
.cta-idea[hidden] { display: none; }
.cta-idea-label { display: block; margin-bottom: 7px; font-size: calc(13.5px / var(--tz, 1)); font-weight: 700; color: var(--fg-soft); }
.cta-idea-label em { font-style: normal; font-weight: 500; color: var(--fg-3); }
.cta-idea textarea {
  display: block;
  width: 100%;
  min-height: 66px;
  resize: vertical;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px dashed var(--border-strong);
  background: var(--surface-raised);
  color: var(--fg);
  font: 500 calc(15px / var(--tz, 1))/1.45 var(--font-ui);
  transition: border-color 140ms, box-shadow 140ms, background 140ms;
}
.cta-idea textarea::placeholder { color: var(--fg-3); }
.cta-idea textarea:focus { outline: none; border-style: solid; border-color: var(--accent-border); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-ring); }
.cta-idea-hint { display: block; margin-top: 7px; font-size: calc(12px / var(--tz, 1)); color: var(--fg-3); }
.cta .fine { margin: 12px 0 0; font-size: calc(12.5px / var(--tz, 1)); color: var(--fg-3); }
.cta .cta-import { margin: 14px 6px 0; font-size: calc(13px / var(--tz, 1)); color: var(--fg-3); text-align: center; text-wrap: balance; }
@container (min-width: 520px) {
  .end-card-body { padding: 28px 30px 24px; }
}

/* the sidebar card */
.side-cta {
  padding: 18px;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  background: var(--card-deep) padding-box, var(--grad-border) border-box;
  box-shadow: var(--cta-glow);
}
.side-cta h3 { font-family: var(--font-display); font-weight: 400; font-size: calc(21px / var(--tz, 1)); line-height: 1.25; color: var(--fg); margin: 0 0 12px; text-wrap: balance; }
.side-cta ul { list-style: none; padding: 0; margin: 0 0 18px; }
.side-cta li { display: flex; gap: 9px; margin-bottom: 9px; font-size: calc(13.5px / var(--tz, 1)); line-height: 1.45; color: var(--fg-2); }
.side-cta li::before { margin-top: 2px; }
.side-cta .btn { width: 100%; }
.side-cta .fine { margin: 10px 0 0; font-size: calc(12px / var(--tz, 1)); color: var(--fg-3); text-align: center; }

/* motion */
@media (prefers-reduced-motion: no-preference) {
  .btn-cta::after { animation: cta-shine 6s ease-in-out 1.2s infinite; }
  .cta-chip i { animation: cta-ping 2.4s ease-out infinite; }
  .cta-mid, .end-card { animation: cta-border 12s linear infinite; }
}
@keyframes cta-shine {
  0% { transform: translateX(0) skewX(-18deg); opacity: 0; }
  3% { opacity: 1; }
  16%, 100% { transform: translateX(400%) skewX(-18deg); opacity: 0; }
}
@keyframes cta-ping { 0% { box-shadow: 0 0 0 0 rgba(240, 106, 155, 0.6); } 70%, 100% { box-shadow: 0 0 0 7px rgba(240, 106, 155, 0); } }
@keyframes cta-border { to { --cta-a: 360deg; } }

/* The write page in the guides' hero and mid card (scripts/build-guides.mjs
   pageDemo): the homepage's kit (/home-page.css .pm-*, the app's own Sepia
   page), smaller. A paragraph already written, the writer's line as a draft,
   the margin's Expand pressed, "Expanding…" above it, the prose writing in
   after it, the Bible's chips popping beside the page. A 9 s loop; the
   markup's state is its last frame (reduced motion, no animation). */
.pm.gp {
  --pm-gutter: 44px;
  --pm-btn: 28px;
  padding: 16px 20px 18px calc(var(--pm-gutter) + 6px);
  border-radius: 18px;
}
.gp .pm-top { margin: 12px 0 14px; padding-bottom: 10px; }
.gp .pm-chap { font-size: calc(18px / var(--tz, 1)); }
.gp .pm-para { margin-bottom: 12px; }
.gp .pm-para:last-child { margin-bottom: 0; }
.gp .pm-text { font-size: calc(14.5px / var(--tz, 1)); line-height: 1.6; font-weight: 500; }
.gp .pm-dash { left: calc(var(--pm-gutter) * -1 + 10px); top: 3px; }
.gp-body { position: relative; }
.gp .pm-rail { top: 0; }
.gp .pm-btn-label { font-size: calc(11.5px / var(--tz, 1)); }
.gp .pm-box.is-open, .gp .gp-box { font-size: calc(12px / var(--tz, 1)); }
.gp-lines { margin: 0; }
.gp-lines i {
  display: block;
  width: var(--w);
  height: 6px;
  margin: 0 0 9px;
  border-radius: 4px;
  background: rgba(80, 60, 30, 0.2);
  transform-origin: left center;
}
.gp-lines i:last-child { margin-bottom: 0; }
.gp-grow { margin-top: 10px; }
.gp-chips { position: absolute; right: -12px; bottom: -16px; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; }
.gp-chips span {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--ok-border);
  background: rgba(23, 38, 27, 0.94);
  color: var(--ok);
  font-size: calc(11.5px / var(--tz, 1));
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.8);
}
.gp-hero { transform: rotate(-1deg); }
.cta-demo .gp-chips { right: -6px; bottom: 0; }
.has-art .gh-art { padding-bottom: 8px; }

@media (prefers-reduced-motion: no-preference) {
  .gp-hero { animation: gp-bob 8s ease-in-out 1.1s infinite; }
  .gh-art .gp-expand, .cta-demo.anim .gp-expand { animation: gp-press 9s ease both infinite; }
  .gh-art .gp-expand .pm-btn-label, .cta-demo.anim .gp-expand .pm-btn-label { animation: gp-label 9s ease both infinite; }
  .gh-art .gp-box, .cta-demo.anim .gp-box { animation: gp-box 9s cubic-bezier(.2, .8, .2, 1) both infinite; }
  .gh-art .gp-grow i, .cta-demo.anim .gp-grow i { animation: gp-write 9s cubic-bezier(.2, .7, .2, 1) both infinite; }
  .gh-art .gp-grow i:nth-child(2), .cta-demo.anim .gp-grow i:nth-child(2) { animation-delay: 0.25s; }
  .gh-art .gp-grow i:nth-child(3), .cta-demo.anim .gp-grow i:nth-child(3) { animation-delay: 0.5s; }
  .gh-art .gp-grow i:nth-child(4), .cta-demo.anim .gp-grow i:nth-child(4) { animation-delay: 0.75s; }
  .gh-art .gp-grow i:nth-child(5), .cta-demo.anim .gp-grow i:nth-child(5) { animation-delay: 1s; }
  .gh-art .gp-chips span, .cta-demo.anim .gp-chips span { animation: gp-pop 9s cubic-bezier(.3, 1.6, .5, 1) both infinite; }
  .gh-art .gp-chips span:nth-child(2), .cta-demo.anim .gp-chips span:nth-child(2) { animation-delay: 0.2s; }
  /* the mid card plays only while it's in view (the guide's inline script) */
  .cta-demo.anim:not(.play) * { animation-play-state: paused !important; }
}
@keyframes gp-bob { 0%, 100% { transform: rotate(-1deg) translateY(0); } 50% { transform: rotate(-0.5deg) translateY(-7px); } }
@keyframes gp-press {
  0%, 8% { transform: none; box-shadow: inset 0 1px 0 #fffaf0; }
  11% { transform: scale(0.9); box-shadow: 0 0 0 5px rgba(240, 106, 155, 0.22); }
  15%, 100% { transform: none; box-shadow: inset 0 1px 0 #fffaf0; }
}
@keyframes gp-label {
  0%, 2% { max-width: 0; opacity: 0; margin: 0; }
  6%, 14% { max-width: 80px; opacity: 1; margin: 0 4px 0 6px; }
  19%, 100% { max-width: 0; opacity: 0; margin: 0; }
}
@keyframes gp-box {
  0%, 12% { height: 0; margin-bottom: 0; opacity: 0; transform: scaleX(0.15); border-color: transparent; }
  17%, 50% { height: 34px; margin-bottom: 10px; opacity: 1; transform: none; border-color: var(--border); }
  56%, 100% { height: 0; margin-bottom: 0; opacity: 0; transform: scaleX(0.6); border-color: transparent; }
}
@keyframes gp-write {
  0%, 18% { transform: scaleX(0); opacity: 1; background: rgba(240, 106, 155, 0.45); }
  30% { transform: scaleX(1); background: rgba(240, 106, 155, 0.45); }
  58%, 93% { transform: scaleX(1); opacity: 1; background: rgba(80, 60, 30, 0.2); }
  100% { transform: scaleX(1); opacity: 0; background: rgba(80, 60, 30, 0.2); }
}
@keyframes gp-pop {
  0%, 56% { opacity: 0; transform: translateY(6px) scale(0.7); }
  62%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-4px); }
}

/* The guides' footer: whose the names in the comparisons are. */
.site-foot .foot-tm { display: block; margin-block: 0; padding-top: 0; font-size: calc(12px / var(--tz, 1)); line-height: 1.5; opacity: 0.6; }
.site-foot .foot-tm a { color: inherit; text-decoration: underline; }

/* Guide topics: the hub's sections and /guides/topics/<slug> (scripts/build-guides.mjs). */
.card h3 { font-family: var(--font-display); font-weight: 400; font-size: calc(20px / var(--tz, 1)); color: var(--fg); margin-bottom: 6px; line-height: 1.3; }
.topic-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.topic-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); color: var(--fg-2); font-size: calc(14px / var(--tz, 1)); text-decoration: none; transition: border-color .15s, color .15s; }
.topic-nav a:hover { border-color: var(--accent-border); color: var(--fg); }
.topic-nav a[aria-current="page"] { border-color: var(--accent-border); color: var(--accent-text); }
.topic-nav a span { font-size: calc(12px / var(--tz, 1)); color: var(--fg-3); }
.guide-topic { margin: 0 0 44px; scroll-margin-top: 80px; }
.guide-topic > h2 { font-family: var(--font-display); font-weight: 400; font-size: calc(clamp(24px, 3vw, 30px) / var(--tz, 1)); margin: 0 0 6px; }
.guide-topic > h2 a { color: var(--fg); text-decoration: none; }
.guide-topic > h2 a:hover { color: var(--accent-text); }
.topic-lede { color: var(--fg-2); max-width: 64ch; margin: 0 0 16px; font-size: calc(15px / var(--tz, 1)); line-height: 1.55; }