/* ============================================================
   CreateDefend site styles (2026 design).
   Shared by index.html, products/{trackwitness,foliown}/index.html and
   both beta-access.html pages. Designed from the mockups in
   docs/design/new-createdefend-site-pages/.

   Themes: the default is TrackWitness / CreateDefend (black, amber).
   .theme-fo switches to FoliOwn (navy, blue) and .theme-sk to SketchOwn
   (charcoal, green), on <body> or on any section. Components read only the variables below.

   Sizes are fluid: headings and section spacing scale with the window
   and reach the mockups' desktop values at about 1100-1200px, so wide
   screens look exactly as designed. Phone and tablet adjustments are
   at the bottom of this file.
   ============================================================ */

:root, .theme-tw {
  --bg: #000000;
  --bg-alt: #0c0c0c;
  --panel: #121212;
  --card: #161616;
  --card-2: #1c1c1c;
  --line: #333333;
  --line-soft: #262626;
  --field: #4a4a4a;
  --hush: #262626;
  --ink: #f3f2f2;
  --muted: #b8b8b8;
  --dim: #9a9a9a;
  --accent: #ffb506;
  --on-accent: #000000;
  --ok: #00ff7d;
  --ok-bg: #0f2a1b;
  --red: #ec3013;
  --frame-bg: #0a0a0a;
  --scrim: rgba(0, 0, 0, .85);

  --font: Archivo, 'Helvetica Neue', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Fluid type: phone minimum, scaling, desktop size from the mockups. */
  --fs-hero: clamp(40px, 6.2vw, 68px);
  --fs-h1: clamp(36px, 5.5vw, 60px);
  --fs-h1-beta: clamp(34px, 5.1vw, 56px);
  --fs-h2-xl: clamp(30px, 4.4vw, 48px);
  --fs-h2: clamp(28px, 4vw, 44px);
  --fs-h2-md: clamp(26px, 3.3vw, 36px);
  --fs-product: clamp(24px, 2.9vw, 32px);

  /* Fluid spacing. */
  --pad-x: clamp(16px, 4vw, 32px);
  /* The mockups size content to 1200px with the side padding outside it. */
  --page-max: calc(1200px + 2 * var(--pad-x));
  --sec-96: clamp(56px, 8vw, 96px);
  --sec-88: clamp(56px, 7.4vw, 88px);
  --sec-80: clamp(48px, 6.7vw, 80px);
  --sec-72: clamp(48px, 6vw, 72px);
  --gap-56: clamp(32px, 4.7vw, 56px);
  --gap-48: clamp(28px, 4vw, 48px);
  --gap-40: clamp(24px, 3.4vw, 40px);
}

.theme-fo {
  --bg: #07131a;
  --bg-alt: #0b1b24;
  --panel: #0d1f29;
  --card: #0d1f29;
  --card-2: #0d1f29;
  --line: #2a3a44;
  --line-soft: #1d3442;
  --field: #2a3a44;
  --hush: #1d3442;
  --muted: #b8c6cf;
  --dim: #8fa6b3;
  --accent: #4fc3ff;
  --on-accent: #00121c;
  --frame-bg: #04090c;
  --scrim: rgba(7, 19, 26, .88);
}

.theme-sk {
  --bg: #101010;
  --bg-alt: #141414;
  --panel: #181818;
  --card: #1a1a1a;
  --card-2: #202020;
  --line: #343434;
  --line-soft: #262626;
  --field: #4a4a4a;
  --hush: #262626;
  --accent: #17ff81;
  --on-accent: #00170b;
  --frame-bg: #0a0a0a;
  --scrim: rgba(16, 16, 16, .88);
}

/* ---------- base ----------
   Everything is border-box. The mockups were content-box, so a few
   sizes below are their value plus padding and border (the picker and
   diagram cards' flex-basis, the waveform strip, the stage cards). */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 17px; line-height: 1.55;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); }
a:hover { color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 3px;
}
[hidden] { display: none !important; }
h1, h2, h3 { text-wrap: balance; }

.wrap { max-width: var(--page-max); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.accent { color: var(--accent); }
.ok { color: var(--ok); }
.red { color: var(--red); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- motion ---------- */
@keyframes cd-dip { 0%, 78%, 100% { transform: translateY(0); } 84% { transform: translateY(3px); } 90% { transform: translateY(-1px); } }
@keyframes cd-eq { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.55); } }
@keyframes cd-bar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes cd-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes cd-new { from { transform: translateY(8px); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes cd-in { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cd-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pv-move { 0% { left: 0%; opacity: 0; } 10% { opacity: 1; } 75% { left: calc(100% - 32px); opacity: 1; } 85%, 100% { left: calc(100% - 32px); opacity: 0; } }
@keyframes pv-move-v { 0% { top: 0%; opacity: 0; } 10% { opacity: 1; } 75% { top: calc(100% - 32px); opacity: 1; } 85%, 100% { top: calc(100% - 32px); opacity: 0; } }
@keyframes pv-ok { 0%, 70% { opacity: .25; } 80%, 100% { opacity: 1; } }
@keyframes fo-lit {
  0%, 18% { border-color: #4fc3ff; transform: translateY(-6px); box-shadow: 0 10px 30px rgba(79, 195, 255, .25); }
  22%, 100% { border-color: #2a3a44; transform: none; box-shadow: none; }
}
@keyframes fo-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fo-strike { 0%, 15% { background-size: 0% 3px; } 35%, 100% { background-size: 100% 3px; } }
@keyframes fo-insert { 0%, 35% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes fo-type { 0%, 8% { clip-path: inset(0 100% 0 0); } 60%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes fo-line { 0%, 25% { transform: scaleX(0); } 60%, 100% { transform: scaleX(1); } }
@keyframes fo-move { 0%, 25% { transform: translateX(-24px); } 60%, 100% { transform: translateX(0); } }
@keyframes fo-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.cd-dip { animation: cd-dip 7s ease-in-out infinite; }
.cd-eq { transform-box: fill-box; transform-origin: center; animation: cd-eq 1.4s ease-in-out infinite; }
.cd-live { animation: cd-pulse 1.4s ease-in-out infinite; }
.cd-new { animation: cd-new .9s ease-out both; }
.cd-in { animation: cd-in .5s ease-out both; }
.cd-track { animation: cd-marquee 30s linear infinite; }
.fo-line { transform-box: fill-box; transform-origin: left; animation: fo-line 6s steps(5) infinite; }
.fo-caret { animation: fo-move 6s steps(5) infinite, fo-blink 1s steps(1) infinite; }
.fo-progress { transform-origin: left; animation: fo-progress 10s linear infinite; }
.fo-strike { background-image: linear-gradient(#ec3013, #ec3013); background-repeat: no-repeat; background-position: 0 55%; background-size: 100% 3px; animation: fo-strike 10s ease-out infinite; }
.fo-insert { animation: fo-insert 10s ease-out infinite; }
.fo-type { display: inline-block; white-space: nowrap; animation: fo-type 10s steps(30) infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cd-dip, .cd-eq, .bar, .cd-live, .cd-new, .cd-in, .cd-track, .flow-chip, .pv-ok,
  .stage, .fo-progress, .fo-strike, .fo-insert, .fo-type, .fo-line, .fo-caret { animation: none !important; }
}

/* ---------- brand ---------- */
.brand {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink);
  font-weight: 800; letter-spacing: .02em; text-transform: uppercase; font-size: 20px; line-height: 1;
}
.brand:hover { color: var(--ink); }
.brand svg { width: 17px; height: 17px; flex: none; }
.brand .cut { fill: var(--bg); }
.brand--lg { font-size: 26px; }
.brand--lg svg { width: 22px; height: 22px; }
.brand--foot { font-size: 18px; }
.brand--foot svg { width: 15px; height: 15px; }
.brand--foot-lg { font-size: 20px; }
.brand--foot-lg svg { width: 17px; height: 17px; }

.product { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.product--hero { margin-bottom: 24px; }
.product-name { font-size: var(--fs-product); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; line-height: 1; }
.product .icon-tw { width: 41px; height: 25px; flex: none; }
.product .icon-fo { width: 25px; height: 26px; flex: none; }
.product .icon-sk { width: 23px; height: 26px; flex: none; }
.badge {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--on-accent); background: var(--accent); padding: 3px 8px; border-radius: 4px;
}

/* ---------- header and navigation ---------- */
.site-header {
  max-width: var(--page-max); margin: 0 auto; padding: 20px var(--pad-x);
  display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between;
}
.site-nav { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; font-size: 15px; margin-left: auto; }
.header-social { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: -8px; color: var(--muted); }
.header-social:hover { color: var(--ink); }
.header-social svg { width: 20px; height: 20px; }
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover { color: var(--ink); }
.site-nav .nav-cta {
  background: var(--accent); color: var(--on-accent); font-weight: 600; padding: 12px 18px; border-radius: 8px;
}
.site-nav .nav-cta:hover { color: var(--on-accent); filter: brightness(1.08); }
.nav-toggle {
  display: none; align-items: center; gap: 8px; min-height: 44px; padding: 10px 14px;
  background: transparent; color: var(--ink); border: 1px solid var(--field); border-radius: 8px;
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.nav-toggle svg { width: 18px; height: 18px; }

/* ---------- type ---------- */
.kicker { font-family: var(--mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.kicker--live { display: flex; align-items: center; gap: 10px; letter-spacing: .12em; color: var(--ok); margin-bottom: 0; }
.kicker--live .dot { width: 11px; height: 11px; background: var(--red); display: inline-block; }
.h1-hero { font-size: var(--fs-hero); line-height: 1; font-weight: 900; margin: 18px 0 20px; letter-spacing: -.025em; }
.h1 { font-size: var(--fs-h1); line-height: 1.02; font-weight: 900; margin: 0 0 20px; letter-spacing: -.02em; }
.h1-beta { font-size: var(--fs-h1-beta); line-height: 1.04; font-weight: 900; margin: 0 0 16px; letter-spacing: -.02em; max-width: 18em; }
.h2-xl { font-size: var(--fs-h2-xl); line-height: 1.05; font-weight: 900; margin: 0 0 40px; }
.h2 { font-size: var(--fs-h2); line-height: 1.06; font-weight: 900; margin: 0 0 40px; }
.h2-md { font-size: var(--fs-h2-md); line-height: 1.1; font-weight: 900; margin: 0 0 12px; }
.lede { margin: 0; color: var(--muted); max-width: 34em; }

/* ---------- buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 14px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; padding: 14px 22px; border-radius: 8px;
  background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 600; text-decoration: none;
  border: 0; cursor: pointer;
}
.btn:hover { color: var(--on-accent); filter: brightness(1.08); }
.btn:disabled { opacity: .55; cursor: default; filter: none; }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--field); font-weight: 400; }
.btn-ghost:hover { color: var(--ink); border-color: var(--muted); filter: none; }
.btn-form { padding: 14px 24px; min-height: 48px; font-weight: 700; }
.btn-light { background: var(--ink); color: var(--on-accent); }
.btn-dark { background: var(--on-accent); color: var(--accent); padding: 16px 26px; }
.btn-dark:hover { color: var(--accent); }

/* ---------- cards ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; }

/* ---------- sections ---------- */
.section { max-width: var(--page-max); margin: 0 auto; padding: var(--sec-88) var(--pad-x); }
.section-alt { background: var(--bg-alt); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.split { display: flex; flex-wrap: wrap; align-items: center; }

/* Accent band ("Invited to the beta?", "Start your record") */
.band { background: var(--accent); color: var(--on-accent); }
.band-inner {
  max-width: var(--page-max); margin: 0 auto; padding: var(--sec-72) var(--pad-x);
  display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between;
}
.band h2 { font-size: var(--fs-h2); line-height: 1.06; margin: 0 0 12px; font-weight: 900; }
.band p { margin: 0; }
.band-text { flex: 1 1 420px; min-width: 0; }

/* ---------- footer ---------- */
.site-footer {
  max-width: var(--page-max); margin: 0 auto; padding: 40px var(--pad-x);
  display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between;
  color: var(--dim); font-size: 13px;
}
.site-footer--rule { border-top: 1px solid var(--line-soft); }
.site-footer .fine { flex: 1 1 360px; min-width: 0; }
.site-footer .fine--narrow { flex-basis: 320px; }
.foot-links { display: flex; gap: 16px; flex-wrap: wrap; }
.contact-link { display: inline-flex; align-items: center; gap: 6px; }
.contact-link svg { width: 15px; height: 15px; flex: none; }

/* ---------- session record (TrackWitness example) ---------- */
.record { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-family: var(--mono); font-size: 14px; }
.record-head { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); color: var(--dim); }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 83px; padding: 12px 18px 6px; border-bottom: 1px solid var(--line); }
.bars--tall { height: 91px; }
.bar { flex: 1; background: var(--accent); border-radius: 2px; transform-origin: bottom; animation: cd-bar 1.6s ease-in-out infinite; }
.bar.is-ok { background: var(--ok); }
.record-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; padding: 10px 18px; border-bottom: 1px solid var(--line-soft); align-items: center; }
.record-row .t { color: var(--dim); }
.tag { color: #000000; background: var(--ok); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; }
.tag--pending { background: var(--accent); color: var(--on-accent); }
.tag--sm { padding: 2px 7px; margin-top: auto; align-self: flex-start; }

/* ---------- how a book took shape (FoliOwn example) ---------- */
.progress { position: relative; height: 4px; background: var(--line-soft); border-radius: 2px; margin-bottom: 20px; overflow: hidden; }
.progress > div { position: absolute; inset: 0; background: var(--accent); }
.stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.stage {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px; min-height: 264px;
  animation: fo-lit 10s ease-in-out infinite;
}
.stage-date { font-family: var(--mono); font-size: 12px; color: var(--dim); }
.note-sticky { background: #fff4b8; color: #222222; border-radius: 4px; padding: 10px 12px; font-family: Caveat, 'Comic Sans MS', cursive; font-size: 21px; line-height: 1.2; transform: rotate(-2deg); }
.outline { font-size: 14px; line-height: 1.5; display: flex; flex-direction: column; gap: 4px; }
.outline b { color: var(--accent); font-weight: 400; }
.page-text { background: #f3f2f2; color: #1b1b1b; border-radius: 4px; padding: 10px 12px; font-family: Literata, Georgia, serif; font-size: 13px; line-height: 1.6; overflow: hidden; }
.page-text .ins { background: #c8f5dc; padding: 0 3px; border-radius: 3px; }
.book { background: #4fc3ff; color: #00121c; border-radius: 4px 8px 8px 4px; padding: 14px; box-shadow: 4px 4px 0 #1d6f96, 8px 8px 0 #10465f; display: flex; flex-direction: column; gap: 4px; }
.book-title { font-family: Literata, Georgia, serif; font-size: 18px; line-height: 1.15; }
.book-meta { font-size: 12px; }
.stage-note { font-size: 13px; color: var(--muted); }
.illustration-note { margin: 16px 0 0; color: var(--dim); font-size: 13px; font-family: var(--mono); }

/* ---------- machine to server diagram ---------- */
.flow { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; margin-bottom: 40px; font-family: var(--mono); font-size: 14px; }
.flow-card { flex: 1 1 342px; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.flow-label { color: var(--dim); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.flow-row { display: flex; justify-content: space-between; gap: 12px; }
.flow-row--total, .flow-ok { border-top: 1px solid var(--line); padding-top: 10px; }
.flow-ok { color: var(--ok); animation: pv-ok 5s ease-in-out infinite; }
.flow-link { flex: 1 1 200px; min-width: 0; position: relative; min-height: 80px; display: flex; align-items: center; justify-content: center; }
.flow-link::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--line); }
.flow-chip {
  position: absolute; top: calc(50% - 16px); background: var(--ok); color: #000000; padding: 6px;
  border-radius: 8px; display: inline-flex; animation: pv-move 5s ease-in-out infinite;
}
.flow-chip svg { width: 20px; height: 20px; display: block; }

/* ---------- pillars (three short points under a rule) ---------- */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
.pillar { display: flex; flex-direction: column; gap: 6px; border-top: 2px solid var(--pillar, var(--accent)); padding-top: 14px; }
.pillar-title { font-size: 20px; font-weight: 800; }
.pillar-text { color: var(--muted); }
.pillar--ok { --pillar: var(--ok); }
.pillar--ink { --pillar: var(--ink); }
.pillar--tw { --pillar: #ffb506; }
.pillar--fo { --pillar: #4fc3ff; }
.pillar--red { --pillar: var(--red); }
.pillars--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
.step { display: flex; flex-direction: column; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.step-num { font-family: var(--mono); font-size: 13px; color: var(--accent); }
.step-title { font-size: 24px; font-weight: 800; }
.step-text { color: var(--muted); }

/* ---------- product flow animation (product pages, "How it works") ---------- */
/* A muted, looping animation (site.js plays it only while it is on screen).
   Wide screens get a small pause button; phones keep the native controls,
   so the animation can go full screen where its text would be small. */
.product-flow { position: relative; margin: 0 0 40px; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.product-flow-video { display: block; width: 100%; height: auto; aspect-ratio: 8 / 3; }
.product-flow-toggle {
  position: absolute; right: 12px; bottom: 12px; width: 36px; height: 36px; display: grid; place-items: center;
  padding: 0; border: 1px solid var(--line); border-radius: 50%; background: rgba(0, 0, 0, .6); color: var(--ink);
  cursor: pointer; opacity: .7; transition: opacity .2s;
}
.product-flow-toggle[hidden] { display: none; }
.product-flow:hover .product-flow-toggle, .product-flow-toggle:focus-visible { opacity: 1; }
.product-flow-toggle svg { width: 16px; height: 16px; }
.product-flow .i-play, .product-flow.is-paused .i-pause { display: none; }
.product-flow.is-paused .i-play { display: inline; }

/* ============================================================
   Home page
   ============================================================ */
.home-hero { max-width: var(--page-max); margin: 0 auto; padding: 48px var(--pad-x) var(--sec-80); gap: var(--gap-56); }
.home-hero-copy { flex: 1 1 460px; min-width: 0; }
.home-hero-copy .lede { margin: 0 0 32px; }
.picker { flex: 1 1 478px; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.picker h2 { margin: 0 0 6px; font-size: 28px; font-weight: 900; }
.pick {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 12px;
  background: var(--card-2); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
}
.pick:hover { color: var(--ink); border-color: var(--field); }
.pick--soon { border-style: dashed; border-color: var(--field); }
.pick-label { display: flex; flex-direction: column; }
.pick-title { font-size: 22px; font-weight: 800; }
.pick-sub { color: var(--muted); font-size: 15px; }
.pick-go { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; }
.pick-icon { flex: none; }
.pick-icon--tw { width: 36px; height: 22px; }
.pick-icon--fo { width: 23px; height: 24px; }
.pick-icon--sk { width: 23px; height: 24px; }
.pick-go--tw { color: #ffb506; }
.pick-go--fo { color: #4fc3ff; }
.pick-go--sk { color: #17ff81; }
.pick-go--soon { color: var(--ok); }

.marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-alt); padding: 16px 0; }
.marquee-track { display: flex; gap: 40px; width: max-content; font-family: var(--mono); font-size: 15px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; align-items: center; }
.marquee-track > span { display: flex; align-items: center; gap: 40px; }
.marquee-track > span::after { content: ""; width: 8px; height: 8px; background: var(--red); display: inline-block; }
.marquee .c-ok { color: var(--ok); } .marquee .c-tw { color: #ffb506; } .marquee .c-fo { color: #4fc3ff; } .marquee .c-ink { color: var(--ink); }

.home-music { max-width: var(--page-max); margin: 0 auto; padding: var(--sec-96) var(--pad-x) 48px; }
.home-music .h2-xl { max-width: 20em; }
.home-music .split { gap: var(--gap-40); }
.product-blurb { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.product-blurb p { margin: 0; color: var(--muted); }
.product-blurb .more { font-weight: 600; }
.home-music .record { flex: 1 1 522px; min-width: 0; }

.home-writing { background: var(--bg); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.home-writing-inner { max-width: var(--page-max); margin: 0 auto; padding: var(--sec-96) var(--pad-x); }
.home-writing .h2-xl { max-width: 18em; }
.home-writing .split { gap: var(--gap-40); }
.home-writing .manuscript { flex: 1 1 522px; min-width: 0; }

/* Home page: For digital artists (SketchOwn, coming soon). */
.home-art { background: var(--bg); border-bottom: 1px solid var(--line-soft); }
.home-art-inner { max-width: var(--page-max); margin: 0 auto; padding: var(--sec-96) var(--pad-x); }
.home-art .h2-xl { max-width: 18em; }
.home-art .split { gap: var(--gap-40); }
.home-art .record, .product-hero .record--piece { flex: 1 1 522px; min-width: 0; }

/* SketchOwn's piece record: a strip of stages (thumbnails, sketch,
   lineart, flats) above the signed rows. Each stage's image and row appear
   together, the tag reads "signing" on blue, then "signed" on green, and
   the next stage follows; all four hold, then the loop starts again. */
.record--piece .record-row { grid-template-columns: auto minmax(0, 1fr) auto; }
.record--piece .record-row .t { white-space: nowrap; min-width: 6ch; }
.sk-stage, .sk-row { opacity: 0; }
.tag--flip { display: inline-grid; }
.tag--flip > span { grid-area: 1 / 1; text-align: center; }
@keyframes sk-in1 { 0%, 4% { opacity: 0; transform: translateY(6px); } 7%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes sk-tag1 { 0%, 13% { background: #4fc3ff; } 14%, 100% { background: #00ff7d; } }
@keyframes sk-ing1 { 0%, 13% { opacity: 1; } 14%, 100% { opacity: 0; } }
@keyframes sk-ed1 { 0%, 13% { opacity: 0; } 14%, 100% { opacity: 1; } }
@keyframes sk-in2 { 0%, 26% { opacity: 0; transform: translateY(6px); } 29%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes sk-tag2 { 0%, 35% { background: #4fc3ff; } 36%, 100% { background: #00ff7d; } }
@keyframes sk-ing2 { 0%, 35% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes sk-ed2 { 0%, 35% { opacity: 0; } 36%, 100% { opacity: 1; } }
@keyframes sk-in3 { 0%, 48% { opacity: 0; transform: translateY(6px); } 51%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes sk-tag3 { 0%, 57% { background: #4fc3ff; } 58%, 100% { background: #00ff7d; } }
@keyframes sk-ing3 { 0%, 57% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes sk-ed3 { 0%, 57% { opacity: 0; } 58%, 100% { opacity: 1; } }
@keyframes sk-in4 { 0%, 70% { opacity: 0; transform: translateY(6px); } 73%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes sk-tag4 { 0%, 79% { background: #4fc3ff; } 80%, 100% { background: #00ff7d; } }
@keyframes sk-ing4 { 0%, 79% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes sk-ed4 { 0%, 79% { opacity: 0; } 80%, 100% { opacity: 1; } }
.sk-stage--1, .sk-row--1 { animation: sk-in1 16s linear infinite; }
.sk-row--1 .tag--flip { animation: sk-tag1 16s linear infinite; }
.sk-row--1 .tag-ing { animation: sk-ing1 16s linear infinite; }
.sk-row--1 .tag-ed { animation: sk-ed1 16s linear infinite; }
.sk-stage--2, .sk-row--2 { animation: sk-in2 16s linear infinite; }
.sk-row--2 .tag--flip { animation: sk-tag2 16s linear infinite; }
.sk-row--2 .tag-ing { animation: sk-ing2 16s linear infinite; }
.sk-row--2 .tag-ed { animation: sk-ed2 16s linear infinite; }
.sk-stage--3, .sk-row--3 { animation: sk-in3 16s linear infinite; }
.sk-row--3 .tag--flip { animation: sk-tag3 16s linear infinite; }
.sk-row--3 .tag-ing { animation: sk-ing3 16s linear infinite; }
.sk-row--3 .tag-ed { animation: sk-ed3 16s linear infinite; }
.sk-stage--4, .sk-row--4 { animation: sk-in4 16s linear infinite; }
.sk-row--4 .tag--flip { animation: sk-tag4 16s linear infinite; }
.sk-row--4 .tag-ing { animation: sk-ing4 16s linear infinite; }
.sk-row--4 .tag-ed { animation: sk-ed4 16s linear infinite; }
.sk-strip { display: block; width: 100%; height: auto; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); }
.sk-strip .p { fill: var(--card-2); stroke: var(--line); }
.sk-strip .ln { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sk-strip .ln--rough { stroke-opacity: .45; stroke-width: 1.2; }
.sk-strip .ln--clean { stroke-width: 2.5; }


.home-privacy { max-width: var(--page-max); margin: 0 auto; padding: var(--sec-96) var(--pad-x) 24px; }
.home-privacy .h2-xl { margin-bottom: 16px; max-width: 18em; }
.home-privacy > p { margin: 0 0 40px; color: var(--muted); max-width: 40em; }

.home-why { max-width: var(--page-max); margin: 0 auto; padding: var(--sec-96) var(--pad-x); display: flex; flex-wrap: wrap; gap: var(--gap-48); }
.home-why-head { flex: 1 1 380px; min-width: 0; }
.home-why-head .h2 { margin: 0; }
.home-why-body { flex: 1 1 480px; min-width: 0; color: var(--muted); display: flex; flex-direction: column; gap: 16px; }
.home-why-body p { margin: 0; }
.home-why-body .strong { color: var(--ink); font-weight: 600; }
.mini-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-top: 8px; }
.mini-pillars .pillar { padding-top: 12px; }
.mini-pillars .pillar-title { color: var(--ink); font-size: 17px; }
.mini-pillars .pillar-text { font-size: 15px; color: var(--muted); }

.join .band-inner { gap: var(--gap-40); align-items: flex-start; }
.join .band-text { flex-basis: 380px; }
.join-form { flex: 1 1 420px; min-width: 0; display: grid; gap: 12px; position: relative; }
.join-form label { font-weight: 600; font-size: 14px; }
.join-form input, .join-form select { padding: 14px; border: 2px solid #000000; border-radius: 8px; background: #fff3d1; color: #000000; font: inherit; width: 100%; }
.join-form .btn { justify-self: start; background: #000000; color: #ffb506; padding: 14px 24px; }
.join-form .btn:hover { color: #ffb506; }
.join-status { margin: 0; font-weight: 600; }
.join-status:empty { display: none; }

/* ---------- The session record fills in as it goes ----------
   (home page and the TrackWitness page hero)
   From docs/design/new-createdefend-site-pages/new-snippets/
   tw-session-snippet.html, on .record--live: the four rows appear in
   turn over 12 seconds, and the waveform turns green a quarter at a time
   as each is signed; the last quarter stays amber, still signing. */
@keyframes tw-row1 { 0%, 8% { opacity: 0; transform: translateY(6px); } 11%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes tw-row2 { 0%, 28% { opacity: 0; transform: translateY(6px); } 31%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes tw-row3 { 0%, 48% { opacity: 0; transform: translateY(6px); } 51%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes tw-row4 { 0%, 68% { opacity: 0; transform: translateY(6px); } 71%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes tw-q1 { 0%, 8% { background: #ffb506; } 11%, 90% { background: #00ff7d; } 95%, 100% { background: #ffb506; } }
@keyframes tw-q2 { 0%, 28% { background: #ffb506; } 31%, 90% { background: #00ff7d; } 95%, 100% { background: #ffb506; } }
@keyframes tw-q3 { 0%, 48% { background: #ffb506; } 51%, 90% { background: #00ff7d; } 95%, 100% { background: #ffb506; } }
.record--live .record-row { opacity: 0; }
.record--live .record-row:nth-child(3) { animation: tw-row1 12s linear infinite; }
.record--live .record-row:nth-child(4) { animation: tw-row2 12s linear infinite; }
.record--live .record-row:nth-child(5) { animation: tw-row3 12s linear infinite; }
.record--live .record-row:nth-child(6) { animation: tw-row4 12s linear infinite; }
.record--live .bar:nth-child(-n+10) { animation: cd-bar 1.6s ease-in-out infinite, tw-q1 12s linear infinite; }
.record--live .bar:nth-child(n+11):nth-child(-n+20) { animation: cd-bar 1.6s ease-in-out infinite, tw-q2 12s linear infinite; }
.record--live .bar:nth-child(n+21):nth-child(-n+30) { animation: cd-bar 1.6s ease-in-out infinite, tw-q3 12s linear infinite; }
.record--live .bar:nth-child(9n+2) { animation-delay: .12s, 0s; }
.record--live .bar:nth-child(9n+3) { animation-delay: .24s, 0s; }
.record--live .bar:nth-child(9n+4) { animation-delay: .36s, 0s; }
.record--live .bar:nth-child(9n+5) { animation-delay: .48s, 0s; }
.record--live .bar:nth-child(9n+6) { animation-delay: .6s, 0s; }
.record--live .bar:nth-child(9n+7) { animation-delay: .72s, 0s; }
.record--live .bar:nth-child(9n+8) { animation-delay: .84s, 0s; }
.record--live .bar:nth-child(9n) { animation-delay: .96s, 0s; }

/* ---------- Home: the FoliOwn strip ----------
   From docs/design/new-createdefend-site-pages/new-snippets/
   fo-strip-snippet.html (pure CSS, 18 s loop): each step in turn slides
   to the center and lights up, its own animation plays (memo, typing,
   strike-through), the bar fills, and after the manuscript the row
   sweeps back. The offsets assume 250px steps 16px apart (266px each),
   so the step width doesn't change on small screens. */
.fv-bar { position: relative; height: 4px; background: var(--line-soft); overflow: hidden; }
.fv-bar > div { position: absolute; inset: 0; background: var(--accent); transform-origin: left; animation: fv-prog 18s linear infinite; }
.fv-view {
  position: relative; overflow: hidden; padding: 16px 0 18px; font-family: var(--font); font-size: 17px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.fv-row { display: flex; gap: 16px; width: max-content; margin-left: calc(50% - 125px); animation: fv-row 18s ease-in-out infinite; }
.fv-step {
  flex: 0 0 250px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px; min-height: 240px; opacity: .55;
}
.fv-memo { display: flex; align-items: center; gap: 10px; background: #12303f; border-radius: 999px; padding: 8px 12px; }
.fv-play { width: 0; height: 0; border-left: 10px solid var(--accent); border-top: 6px solid transparent; border-bottom: 6px solid transparent; flex: none; }
.fv-wave { display: flex; align-items: center; gap: 2px; height: 24px; flex: 1; }
.fv-wave span { flex: 1; background: var(--accent); border-radius: 1px; animation: fv-wave .7s ease-in-out infinite; }
.fv-wave span:nth-child(3n+2) { animation-delay: .15s; }
.fv-wave span:nth-child(3n) { animation-delay: .3s; }
.fv-time { font-family: var(--mono); font-size: 11px; color: var(--dim); }
.fv-quote { font-size: 13px; line-height: 1.5; color: var(--muted); font-style: italic; }
.fv-type { display: inline-block; white-space: nowrap; animation: fv-type 18s steps(26) infinite; }
.fv-strike { background-image: linear-gradient(#ec3013, #ec3013); background-repeat: no-repeat; background-position: 0 55%; background-size: 100% 3px; animation: fv-strike 18s linear infinite; }
.fv-insert { animation: fv-insert 18s linear infinite; }
.fv-step:nth-child(1) { animation: fv-on1 18s linear infinite; }
.fv-step:nth-child(2) { animation: fv-on2 18s linear infinite; }
.fv-step:nth-child(3) { animation: fv-on3 18s linear infinite; }
.fv-step:nth-child(4) { animation: fv-on4 18s linear infinite; }
.fv-step:nth-child(5) { animation: fv-on5 18s linear infinite; }
.fv-step:nth-child(6) { animation: fv-on6 18s linear infinite; }
@keyframes fv-wave { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1); } }
@keyframes fv-row { 0% { transform: translateX(0); } 14.44% { transform: translateX(0); } 17.78% { transform: translateX(-266px); } 28.89% { transform: translateX(-266px); } 32.22% { transform: translateX(-532px); } 43.33% { transform: translateX(-532px); } 46.67% { transform: translateX(-798px); } 57.78% { transform: translateX(-798px); } 61.11% { transform: translateX(-1064px); } 72.22% { transform: translateX(-1064px); } 75.56% { transform: translateX(-1330px); } 94.44% { transform: translateX(-1330px); } 100% { transform: translateX(0); } }
@keyframes fv-on1 { 0%, 14.44% { opacity: 1; border-color: #4fc3ff; transform: translateY(-6px); box-shadow: 0 10px 30px rgba(79, 195, 255, .25); } 16.11%, 96.67% { opacity: .55; border-color: #2a3a44; transform: none; box-shadow: 0 0 0 rgba(0, 0, 0, 0); } 100% { opacity: 1; border-color: #4fc3ff; transform: translateY(-6px); box-shadow: 0 10px 30px rgba(79, 195, 255, .25); } }
@keyframes fv-on2 { 0%, 14.44% { opacity: .55; border-color: #2a3a44; transform: none; box-shadow: 0 0 0 rgba(0, 0, 0, 0); } 16.11%, 28.89% { opacity: 1; border-color: #4fc3ff; transform: translateY(-6px); box-shadow: 0 10px 30px rgba(79, 195, 255, .25); } 30.56%, 100% { opacity: .55; border-color: #2a3a44; transform: none; box-shadow: 0 0 0 rgba(0, 0, 0, 0); } }
@keyframes fv-on3 { 0%, 28.89% { opacity: .55; border-color: #2a3a44; transform: none; box-shadow: 0 0 0 rgba(0, 0, 0, 0); } 30.56%, 43.33% { opacity: 1; border-color: #4fc3ff; transform: translateY(-6px); box-shadow: 0 10px 30px rgba(79, 195, 255, .25); } 45%, 100% { opacity: .55; border-color: #2a3a44; transform: none; box-shadow: 0 0 0 rgba(0, 0, 0, 0); } }
@keyframes fv-on4 { 0%, 43.33% { opacity: .55; border-color: #2a3a44; transform: none; box-shadow: 0 0 0 rgba(0, 0, 0, 0); } 45%, 57.78% { opacity: 1; border-color: #4fc3ff; transform: translateY(-6px); box-shadow: 0 10px 30px rgba(79, 195, 255, .25); } 59.44%, 100% { opacity: .55; border-color: #2a3a44; transform: none; box-shadow: 0 0 0 rgba(0, 0, 0, 0); } }
@keyframes fv-on5 { 0%, 57.78% { opacity: .55; border-color: #2a3a44; transform: none; box-shadow: 0 0 0 rgba(0, 0, 0, 0); } 59.44%, 72.22% { opacity: 1; border-color: #4fc3ff; transform: translateY(-6px); box-shadow: 0 10px 30px rgba(79, 195, 255, .25); } 73.89%, 100% { opacity: .55; border-color: #2a3a44; transform: none; box-shadow: 0 0 0 rgba(0, 0, 0, 0); } }
@keyframes fv-on6 { 0%, 72.22% { opacity: .55; border-color: #2a3a44; transform: none; box-shadow: 0 0 0 rgba(0, 0, 0, 0); } 73.89%, 94.44% { opacity: 1; border-color: #4fc3ff; transform: translateY(-6px); box-shadow: 0 10px 30px rgba(79, 195, 255, .25); } 96.11%, 100% { opacity: .55; border-color: #2a3a44; transform: none; box-shadow: 0 0 0 rgba(0, 0, 0, 0); } }
@keyframes fv-prog { 0% { transform: scaleX(.167); } 14.44% { transform: scaleX(.167); } 17.78% { transform: scaleX(.333); } 28.89% { transform: scaleX(.333); } 32.22% { transform: scaleX(.5); } 43.33% { transform: scaleX(.5); } 46.67% { transform: scaleX(.667); } 57.78% { transform: scaleX(.667); } 61.11% { transform: scaleX(.833); } 72.22% { transform: scaleX(.833); } 75.56% { transform: scaleX(1); } 94.44% { transform: scaleX(1); } 100% { transform: scaleX(.167); } }
@keyframes fv-type { 0%, 45% { clip-path: inset(0 100% 0 0); } 52.78%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes fv-strike { 0%, 59.44% { background-size: 0% 3px; } 62.22%, 100% { background-size: 100% 3px; } }
@keyframes fv-insert { 0%, 62.78% { opacity: 0; } 65%, 100% { opacity: 1; } }

/* ============================================================
   Product pages
   ============================================================ */
.product-hero { max-width: var(--page-max); margin: 0 auto; padding: clamp(32px, 4.7vw, 56px) var(--pad-x) var(--sec-80); }
.product-hero.split { gap: var(--gap-56); }
.product-hero-copy { flex: 1 1 460px; min-width: 0; }
.product-hero-copy .lede { margin-bottom: 16px; }
.product-hero-copy .lede:last-of-type { margin-bottom: 32px; }
.product-hero .record { flex: 1 1 502px; min-width: 0; }
.product-hero--fo { padding-bottom: 48px; }
.product-hero--fo .split { gap: var(--gap-48); align-items: flex-end; }
.product-hero--fo .h1 { flex: 1 1 560px; min-width: 0; margin: 0; }
.product-hero--fo .hero-aside { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.product-hero--fo .hero-aside .lede { max-width: none; }
.book-shape { max-width: var(--page-max); margin: 0 auto; padding: 24px var(--pad-x) var(--sec-88); }
.how .h2 { max-width: 20em; }
.trust .h2 { margin-bottom: 16px; }
.trust > p { margin: 0 0 40px; color: var(--muted); max-width: 40em; }

/* ============================================================
   Beta access pages
   ============================================================ */
.beta-hero { max-width: var(--page-max); margin: 0 auto; padding: clamp(32px, 4vw, 48px) var(--pad-x) 40px; }
.beta-hero p { margin: 0; color: var(--muted); max-width: 40em; }
.access { max-width: var(--page-max); margin: 0 auto; padding: 16px var(--pad-x) clamp(40px, 4.7vw, 56px); }
.gate { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: clamp(20px, 2.4vw, 28px); display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; }
.gate-field { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.gate-field label { font-size: 22px; font-weight: 800; }
.gate-field input { padding: 14px 16px; border: 1px solid var(--field); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; min-height: 48px; width: 100%; }
.gate-field .hint { color: var(--dim); font-size: 14px; }
.field-label { font-size: 14px; font-weight: 600; }
.input { padding: 12px 14px; border: 1px solid var(--field); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; width: 100%; }
textarea.input { resize: vertical; min-height: 88px; }
select.input { appearance: auto; }
input[type=file].input { padding: 10px 12px; }
.field { display: flex; flex-direction: column; gap: 6px; }
/* Fixed column counts: the full-width rows would otherwise keep empty
   auto-fit columns open. */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: clamp(20px, 2.4vw, 28px); position: relative; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-grid h2 { grid-column: 1 / -1; margin: 0; font-size: 26px; font-weight: 800; }
.form-grid .btn { justify-self: start; }
.form-hint { font-size: 13px; color: var(--dim); }
.status { margin: 0; font-size: 15px; }
.status:empty { display: none; }
.status.err { color: var(--ink); border: 1px solid var(--red); border-radius: 12px; padding: 16px 20px; }
.status.info { color: var(--ink); border: 1px solid var(--accent); border-radius: 12px; padding: 16px 20px; }
.status.ok { color: var(--ok); }
.status a { font-weight: 700; }

.locked { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--pad-x) var(--sec-80); }
.locked-box { position: relative; border: 1px dashed var(--field); border-radius: 16px; padding: 28px; overflow: hidden; }
.locked-ghosts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; filter: blur(5px); opacity: .5; }
.locked-ghosts div { height: 160px; background: var(--hush); border-radius: 12px; }
.locked-msg { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.locked-msg svg { width: 28px; height: 28px; fill: none; stroke: var(--accent); stroke-width: 2; }
.locked-msg strong { font-size: 20px; font-weight: 800; }
.locked-msg span { color: var(--muted); }

.unlocked { padding-bottom: var(--sec-80); display: flex; flex-direction: column; gap: clamp(48px, 6vw, 72px); }
/* The server's content goes straight into the column above. */
.beta-content { display: contents; }
.confirmed { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; background: var(--ok-bg); border: 1px solid var(--ok); border-radius: 12px; padding: 16px 20px; }
.confirmed .pill { color: #000000; background: var(--ok); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; }
.beta-lede { margin: 0 0 24px; color: var(--muted); max-width: 44em; }

/* Demo: overview.html / walkthrough.html are self-contained animations
   that replace their own document, so they sit in an iframe; their
   16:9 stage scales itself to fit. */
.frame { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 14px; background: var(--frame-bg); overflow: hidden; }
.frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.frame-open { margin: 12px 0 0; font-size: 14px; color: var(--dim); }
.frame-open a { font-weight: 700; text-decoration: none; }

.downloads { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.download { display: flex; flex-direction: column; gap: 10px; background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 14px; padding: 22px; }
.download .os { font-size: 24px; font-weight: 800; }
.download .meta { color: var(--muted); font-size: 15px; }
.download .file { font-family: var(--mono); font-size: 13px; color: var(--dim); overflow-wrap: anywhere; }
.download .btn { margin-top: auto; align-self: flex-start; }
.fineprint { margin: 14px 0 0; color: var(--dim); font-size: 14px; }

.walk { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.walk-step { display: flex; flex-direction: column; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.walk-step .num { font-family: var(--mono); color: var(--accent); font-size: 20px; }
.walk-step h3 { margin: 0; font-size: 19px; font-weight: 800; }
.walk-step p { margin: 0; color: var(--muted); font-size: 15px; }
.thumb { display: block; width: 100%; margin-top: 12px; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--hush); cursor: zoom-in; font: inherit; color: inherit; }
.thumb:hover { border-color: var(--accent); }
/* contain, not cover: real screenshots in different aspect ratios, and
   cropping risks cutting off what the step points at. */
.thumb img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.thumb-hint { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); text-align: center; }
.lightbox { position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: center; justify-content: center; padding: 40px; z-index: 100; cursor: zoom-out; }
.lightbox-frame { max-width: min(920px, 100%); max-height: 100%; position: relative; cursor: default; background: var(--card); border-radius: 12px; }
.lightbox-frame img { display: block; width: 100%; height: auto; max-height: 85vh; object-fit: contain; border-radius: 12px; }
.lightbox-close { position: absolute; top: -16px; right: -16px; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--bg); border: 0; font-size: 18px; font-weight: 800; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }

.beta-split { display: flex; flex-wrap: wrap; gap: var(--gap-40); }
.beta-split > section { flex: 1 1 520px; min-width: 0; }
.try-list { counter-reset: try; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; max-width: 46em; }
.try-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; border-top: 1px solid var(--line); padding-top: 14px; color: var(--muted); }
.try-list li::before { counter-increment: try; content: counter(try); font-family: var(--mono); color: var(--accent); font-size: 20px; }
.try-list b { color: var(--ink); }
.tell { flex: 1 1 340px; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 12px; align-self: flex-start; }
.tell h2 { font-size: 24px; font-weight: 800; margin: 0; }
.tell p { margin: 0; color: var(--muted); }
.tell .mail { font-family: var(--mono); font-size: 15px; overflow-wrap: anywhere; }
.tell .small { color: var(--dim); font-size: 14px; }

/* ============================================================
   Tablet (up to 900px)
   ============================================================ */
@media (max-width: 900px) {
  /* The diagram's cards stack here, so the link between them runs
     top to bottom instead of left to right. */
  .flow { flex-direction: column; gap: 0; }
  .flow-card { flex: none; }
  .flow-link { flex: none; min-height: 72px; }
  .flow-link::before { left: 50%; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .flow-chip { left: calc(50% + 14px); top: 0; animation-name: pv-move-v; }

  .form-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* The book's stages become a row you swipe through. */
  .stages {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(220px, 34%);
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    padding: 8px 2px 12px; margin: -8px -2px 0; scrollbar-width: thin;
  }
  .stage { scroll-snap-align: start; }
  p.swipe-hint { display: block; }
}

/* Four activation steps and the four home points: two by two until
   there's room for a row. */
@media (max-width: 1100px) {
  .walk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .pillars--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   Header menu (up to 860px, where the links stop fitting)
   ============================================================ */
@media (max-width: 860px) {
  /* Header: logo and a Menu button; the links open below. Without
     JavaScript the links simply wrap as before. */
  .js .site-header { gap: 8px; justify-content: flex-start; flex-wrap: wrap; }
  .js .nav-toggle { display: inline-flex; }
  .js .site-nav { gap: 0; }
  .js .site-header .header-social { margin-left: 0; width: 44px; height: 44px; }
  .js .site-header.is-open .header-social { margin-left: auto; }
  /* Closed: logo and Menu only (every page repeats its main action
     right below the header). Open: the links, then the main action. */
  .js .site-nav a { display: none; }
  .js .site-header.is-open .site-nav { order: 3; flex-basis: 100%; flex-direction: column; align-items: stretch; margin-left: 0; border-top: 1px solid var(--line); padding-top: 8px; }
  .js .site-header.is-open .site-nav a:not(.nav-cta):not([hidden]) { display: flex; align-items: center; min-height: 48px; font-size: 17px; border-bottom: 1px solid var(--line-soft); }
  .js .site-header.is-open .site-nav .nav-cta { display: flex; margin-top: 12px; justify-content: center; }
  .site-header { padding-top: 14px; padding-bottom: 14px; }
  .site-header .brand, .site-header .brand--lg { font-size: 18px; }
  .site-header .brand svg, .site-header .brand--lg svg { width: 16px; height: 16px; }
}

/* ============================================================
   Phone (up to 720px)
   ============================================================ */
@media (max-width: 720px) {
  /* The animation runs edge to edge, for the most room its text can get. */
  .product-flow { margin-left: calc(-1 * var(--pad-x)); margin-right: calc(-1 * var(--pad-x)); border-radius: 0; border-left: 0; border-right: 0; }

  /* Comfortable touch targets. */
  .foot-links a, .site-footer .brand { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-links { gap: 4px 20px; }
  .actions .btn { flex: 1 1 auto; }

  /* Home: product choices put the link under the label. */
  .picker { padding: 20px; }
  .picker h2 { font-size: 24px; }
  .pick { flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; }

  .stages { grid-auto-columns: minmax(220px, 78%); }
  .stage { min-height: 230px; }
  .walk, .form-grid, .pillars--4 { grid-template-columns: 1fr; }

  .record { font-size: 13px; }
  .record-row { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; padding: 10px 14px; }
  .record-head, .bars { padding-left: 14px; padding-right: 14px; }

  .gate .btn { width: 100%; }
  .gate-field label { font-size: 19px; }
  .lightbox { padding: 20px; }
  .lightbox-close { top: 8px; right: 8px; }
  .band .btn-dark { width: 100%; }
}

.swipe-hint { display: none; margin: 10px 0 0; color: var(--dim); font-size: 13px; font-family: var(--mono); }
.kicker.ok { color: var(--ok); }

/* Reduced motion for the home page's two records. Last in the file so it
   outranks the animated rules above: the session record shows every row
   with its takes signed, and the FoliOwn strip stands still, every step
   shown, scrolling by hand. */
@media (prefers-reduced-motion: reduce) {
  .record--live .record-row:nth-child(n) { opacity: 1; animation: none; }
  .record--live .bar:nth-child(-n+30) { background: #00ff7d; }
  .fv-view { overflow-x: auto; }
  .fv-row, .fv-step:nth-child(n), .fv-bar > div, .fv-wave span, .fv-type, .fv-strike, .fv-insert { animation: none; }
  .fv-step { opacity: 1; }
  .sk-stage, .sk-row, .sk-row .tag--flip, .sk-row .tag-ing, .sk-row .tag-ed { animation: none; }
  .sk-stage, .sk-row, .sk-row .tag-ed { opacity: 1; }
  .sk-row .tag-ing { opacity: 0; }
}

/* The smallest phones: the Menu button keeps only its icon so the header
   stays on one line (its aria-label still says "Menu"). */
@media (max-width: 359px) {
  .nav-toggle-label { display: none; }
  .nav-toggle { padding: 10px 12px; }
  .js .site-header { gap: 4px; }
  .site-header .brand, .site-header .brand--lg { font-size: 16px; }
  .js .site-header .header-social { width: 40px; }
}