/* Subretention design system (cloned from CreatorRetention, same tokens)
   Palette: warm studio charcoal + recording-light amber + paper
   Type: Bricolage Grotesque (display) / Schibsted Grotesk (body) / Spline Sans Mono (data, labels, numbers)
   Elevation language: hairline borders. No gradients, no glows, no shadows except overlays.
   Rhythm rule: no section repeats the previous section's opening move. Two paper inversions,
   one asymmetric split, one connected rail, one founder block. */

:root {
  --ink: #191613;
  --ink-2: #211d18;
  --line: #3a332a;
  --line-soft: #2b2620;
  --text: #efe7da;
  --muted: #afa492;
  --bar: #4a4136;
  --amber: #f0a32f;
  --amber-press: #d98f1c;
  --paper: #f1eade;
  --paper-line: #d9cdba;
  --paper-ink: #241f1a;
  --paper-muted: #6e6353;
  --amber-ink: #8a5a10;

  --font-display: "Bricolage Grotesque", "Avenir Next", sans-serif;
  --font-body: "Schibsted Grotesk", "Helvetica Neue", sans-serif;
  --font-mono: "Spline Sans Mono", "SF Mono", monospace;

  /* Five-step type ladder. Every size on the page comes from here. */
  --t-mono: 0.75rem;      /* 12 */
  --t-body: 1rem;         /* 16: small and body share one step on purpose,
                             so every step in the ladder clears 1.25 */
  --t-lg: 1.3125rem;      /* 21 */
  --t-h2: clamp(1.75rem, 2.4vw + 0.9rem, 2.625rem);   /* 28 → 42 */
  --t-display: clamp(2.5rem, 5.5vw + 1rem, 4.25rem);  /* 40 → 68 */

  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem;
  --s6: 1.5rem; --s8: 2rem; --s12: 3rem; --s16: 4rem; --s24: 6rem;

  --radius: 6px;
  --container: 1120px;
  --header-h: 4rem;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--bar) var(--ink);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  caret-color: var(--amber);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--amber); color: var(--ink); }

::-webkit-scrollbar { width: 12px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--bar); border: 3px solid var(--ink); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--line); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--s6); }

/* Constrain the measure without re-centering the block. The left spine holds. */
.container.narrow > * { max-width: 46rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- type ---------- */
h1, h2, h3 { margin: 0; }

.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-display);
  line-height: 1.03;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-lg);
  line-height: 1.3;
  letter-spacing: -0.005em;
}

p { margin: 0; }
.lead { font-size: var(--t-lg); line-height: 1.5; }
.muted { color: var(--muted); }
.small { font-size: var(--t-body); }
.measure { max-width: 62ch; }

.label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--amber);
}

.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

a { color: inherit; }

/* ---------- the platform is the variable ----------
   The whole pitch is that the business shouldn't depend on which platform it
   sits on, so the platform name is the one word on the page that keeps changing.
   Stacked in one grid cell, so nothing around it reflows. */
.rotator {
  display: inline-grid;
  vertical-align: bottom;
  color: var(--amber);
}
.rotator > span {
  grid-area: 1 / 1;
  opacity: 0;
  animation: platform-swap 15s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  /* negative offset so the first name is already held at page load */
  animation-delay: calc(var(--i) * 3s - 0.2s);
}
/* Five names share a 15s cycle, so each owns exactly 20%. The hold runs to the
   handover and the next name is already rising, which keeps the slot filled:
   leave a gap and the headline reads as broken rather than as a swap. */
@keyframes platform-swap {
  0%             { opacity: 0; transform: translateY(0.32em); }
  0.4%, 20.4%    { opacity: 1; transform: translateY(0); }
  21%, 100%      { opacity: 0; transform: translateY(-0.32em); }
}

/* ---------- the strip actually leaks ----------
   The signature motif was static: amber bars simply drawn below the line. They
   now fall out of the row one at a time, which is the thing the page is selling
   against. */
.strip svg rect.lk { transform-box: fill-box; }

.strip--leak rect.lk {
  animation: member-leaves 9s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  animation-delay: calc(var(--s) * 0.55s);
}
@keyframes member-leaves {
  0%, 6%    { transform: translateY(-52px) scaleY(0.25); opacity: 0; }
  16%       { transform: translateY(0) scaleY(1); opacity: 1; }
  72%       { transform: translateY(0) scaleY(1); opacity: 1; }
  88%, 100% { transform: translateY(14px) scaleY(1); opacity: 0; }
}

/* The closing strip does NOT move, and that is the point. The hero strip leaks
   on a loop; this one is dead still. Motion against stillness is the argument:
   nothing is leaving any more. A second animation here would flatten the pair
   into decoration, and a scroll-driven version measured as never entering range
   at this depth, which would have left the bars invisible. */

/* ---------- rec dot ---------- */
.dot {
  display: inline-block;
  width: 0.5em; height: 0.5em;
  border-radius: 50%;
  background: var(--amber);
  vertical-align: 0.08em;
}
.dot--live { animation: recpulse 2.8s ease-in-out infinite alternate; }
@keyframes recpulse { from { opacity: 1; } to { opacity: 0.45; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-body);
  color: #d9d9d9;
  background: #1f1f1f;
  border: 0;
  border-radius: 999px;
  padding: 0.7rem 1.9rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 150ms ease;
}
.btn:hover { background: var(--amber-press); }
.btn--sm { padding: 0.5rem 1.25rem; font-size: var(--t-body); min-height: 44px; }

/* An ask needs a reason to be safe. Reassurance rides with every button. */
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s6); }
.cta-note { font-size: var(--t-body); color: var(--muted); }
.paper .cta-note { color: var(--paper-muted); }

a:focus-visible, .btn:focus-visible, summary:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}
.btn:focus-visible { border-radius: 999px; }
.paper a:focus-visible, .paper summary:focus-visible { outline-color: var(--amber-ink); }

/* ---------- header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  background: var(--ink);
  border-bottom: 1px solid var(--line-soft);
  isolation: isolate;
}
.site-header .container {
  min-height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s6);
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-lg);
  letter-spacing: -0.01em;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.45em;
  min-height: 44px;
}
.site-nav { display: flex; gap: var(--s8); }
.site-nav a {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  display: inline-flex; align-items: center;
  min-height: 44px;
  transition: color 150ms ease;
}
.site-nav a:hover { color: var(--text); }

/* menu: no JavaScript on this site, so the disclosure is a <details> */
.menu { display: none; position: relative; }
.menu > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.5em;
  min-height: 44px; padding: 0 0.25rem;
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu-bars { display: grid; gap: 3px; }
.menu-bars i { display: block; width: 17px; height: 1px; background: currentColor; }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 0.5rem);
  min-width: 13rem;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s2) 0;
  display: grid;
}
.menu-panel a {
  padding: 0.7rem var(--s4);
  min-height: 44px;
  display: flex; align-items: center;
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
}
.menu-panel a:hover { color: var(--text); background: var(--ink); }

@media (max-width: 900px) {
  .site-nav { display: none; }
  .menu { display: block; }
}

/* Below this the wordmark, the menu and a pill will not all fit on one line.
   The sticky bottom bar already carries the ask, so the header drops its button. */
@media (max-width: 560px) {
  .site-header .container { gap: var(--s4); }
  .wordmark { font-size: var(--t-body); }
  .site-header > .container > .btn { display: none; }
}

/* ---------- sections ---------- */
.section { padding: var(--s24) 0; border-top: 1px solid var(--line-soft); }
section[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

/* hero */
.hero { padding: 10.5rem 0 0; }
.hero .lead { margin-top: var(--s8); }
.hero-cta { margin-top: var(--s12); }

/* leak strip (signature) */
.strip { margin-top: var(--s16); }
.strip .strip-clip { overflow: hidden; }
.strip svg { display: block; width: 100%; height: 130px; }
.strip rect { fill: var(--bar); }
.strip rect.lk { fill: var(--amber); }
.strip line { stroke: var(--line); stroke-width: 1; }
.strip-caption {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: var(--s3) 0 var(--s8);
}
.strip-caption .amber { color: var(--amber); }

/* Crop the data instead of squeezing it: at narrow widths the bars keep their
   real width and the row scrolls out of frame, and the leaked bars thicken. */
@media (max-width: 720px) {
  .strip svg { width: 230%; height: 104px; }
  .strip rect.lk { width: 11px; }
}

/* ---------- 2. problem: ledger ---------- */
.ledger { margin-top: var(--s12); border-top: 1px solid var(--line); }
.ledger-row {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: var(--s6);
  padding: var(--s8) 0;
  border-bottom: 1px solid var(--line);
}
.ledger-row .h3 { margin-bottom: var(--s2); }
.ledger-row { transition: border-color 200ms ease; }
.ledger-row:hover { border-bottom-color: var(--amber); }
.ledger-row:hover .label { color: var(--text); }
.ledger-row .label { transition: color 200ms ease; }
@media (max-width: 720px) {
  .ledger-row { grid-template-columns: 1fr; gap: var(--s3); }
}

/* ---------- 3. engine: parallel columns, amber rule ---------- */
.cols3 { margin-top: var(--s12); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s12); }
.col-rule { border-top: 2px solid var(--amber); padding-top: var(--s6); }
.col-rule .h3 { margin-bottom: var(--s2); }
@media (max-width: 900px) { .cols3 { grid-template-columns: 1fr; gap: var(--s8); } }

/* ---------- 4. what we install: asymmetric split, heading holds the left ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: var(--s16);
  align-items: start;
}
.split-head { position: sticky; top: calc(var(--header-h) + var(--s8)); }
.split-head .lead { margin-top: var(--s4); }
.install { display: grid; gap: var(--s8); }
.install-item { display: grid; grid-template-columns: auto 1fr; gap: var(--s4); }
.sq { width: 8px; height: 8px; background: var(--amber); margin-top: 0.55em; transition: transform 200ms cubic-bezier(0.22,1,0.36,1); }
.install-item:hover .sq { transform: rotate(45deg) scale(1.15); }
.install-item strong { font-weight: 600; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--s12); }
  .split-head { position: static; }
}

/* ---------- 5. how it works: paper band, connected rail ---------- */
.rail {
  list-style: none; margin: var(--s16) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s8);
  position: relative;
}
.rail::before {
  content: ""; position: absolute; left: 0; right: 0; top: 5px;
  height: 1px; background: var(--paper-line);
}
.rail li { position: relative; padding-top: var(--s8); }
.rail li::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--amber-ink);
}
.rail li:first-child::before { background: var(--amber-ink); }
.rail li::before { transition: background-color 200ms ease; }
.rail li:hover::before { background: var(--amber-ink); }
.rail-mark {
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--amber-ink);
}
.rail .h3 { margin: var(--s2) 0 var(--s2); }
@media (max-width: 720px) {
  .rail { grid-template-columns: 1fr; gap: var(--s6); margin-top: var(--s12); }
  .rail::before { left: 5px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .rail li { padding-top: 0; padding-left: var(--s8); }
  .rail li::before { top: 0.4em; }
}

/* ---------- 6. comparison ---------- */
.vs-wrap { margin-top: var(--s12); overflow-x: auto; }
table.vs { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--t-body); }
table.vs th, table.vs td { padding: var(--s4); border-bottom: 1px solid var(--line); text-align: center; }
table.vs th { font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
table.vs th.us { color: var(--amber); }
table.vs td:first-child, table.vs th:first-child { text-align: left; padding-left: 0; }
table.vs th[scope="row"] { text-align: left; padding-left: 0; font-family: var(--font-body); font-size: var(--t-body); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text); }
table.vs td.us { border-left: 1px solid var(--line); border-right: 1px solid var(--line); font-weight: 600; color: var(--amber); }
table.vs td { color: var(--muted); }
.vs-key { margin-top: var(--s4); font-size: var(--t-body); color: var(--muted); }
.vs-key b { color: var(--text); font-weight: 500; }

/* Below the table's minimum, transpose to one card per alternative. A tidy row of
   check marks with the comparators off-screen is worse than no table at all. */
.vs-cards { display: none; margin-top: var(--s12); gap: var(--s6); }
.vs-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink-2); padding: var(--s6); }
.vs-card .h3 { margin-bottom: var(--s4); }
.vs-card dl { margin: 0; display: grid; gap: var(--s3); }
.vs-card dt { font-size: var(--t-body); color: var(--text); }
.vs-card dd { margin: var(--s1) 0 0; font-size: var(--t-body); color: var(--muted); }
.vs-card dd::before { content: "→ "; color: var(--amber); }
@media (max-width: 720px) {
  .vs-wrap, .vs-key { display: none; }
  .vs-cards { display: grid; }
}

/* ---------- 7. founder block ---------- */
.founder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: var(--s16); align-items: start; }
.founder-say { font-size: var(--t-lg); line-height: 1.5; }
.founder-say p + p { margin-top: var(--s6); }
.founder-sign {
  margin-top: var(--s8);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem;
  padding-top: var(--s4); border-top: 1px solid var(--line);
}
.founder-sign .name { font-family: var(--font-display); font-weight: 700; font-size: var(--t-lg); letter-spacing: -0.01em; }
.founder-sign .role { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.founder-facts { display: grid; gap: var(--s6); }
.portrait { margin: 0; }
.portrait img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-2);
}
.portrait figcaption {
  margin-top: var(--s3);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.01em;
  color: var(--muted);
}
@media (max-width: 900px) { .portrait { max-width: 20rem; } }
.fact { border-top: 1px solid var(--line); padding-top: var(--s4); }
.fact .num { display: block; font-size: var(--t-h2); font-weight: 500; line-height: 1.05; color: var(--amber); }
.fact .small { margin-top: var(--s2); }
@media (max-width: 900px) { .founder { grid-template-columns: 1fr; gap: var(--s12); } }

/* ---------- 8. proof cards ---------- */
.proof { margin-top: var(--s12); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); }
.proof-card {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-2);
  padding: var(--s8);
  text-decoration: none;
  transition: border-color 150ms ease;
}
a.proof-card:hover { border-color: var(--amber); }
.proof-card .h3 { margin-bottom: var(--s3); }
.proof-card .meta { display: block; margin-top: var(--s4); font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: 0.01em; color: var(--muted); }
.readmore { color: var(--amber); font-weight: 600; white-space: nowrap; }
.readmore .arw { display: inline-block; transition: transform 200ms cubic-bezier(0.22,1,0.36,1); }
a.proof-card:hover .readmore .arw { transform: translateX(0.35em); }
@media (max-width: 900px) { .proof { grid-template-columns: 1fr; } }

/* ---------- paper inversions (how it works, guarantee) ---------- */
.paper {
  background: var(--paper);
  color: var(--paper-ink);
  padding: var(--s24) 0;
}
.paper .label { color: var(--amber-ink); }
.paper .muted { color: var(--paper-muted); }
.paper .btn { background: var(--paper-ink); color: var(--paper); }
.paper .btn:hover { background: #000; }
.paper .guarantee-cta { margin-top: var(--s8); }

/* ---------- 10. fit ---------- */
.fit { margin-top: var(--s12); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s16); }
.fit ul { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; gap: var(--s4); }
.fit li { position: relative; padding-left: 1.6rem; }
.fit li::before { position: absolute; left: 0; top: 0; }
.fit .yes li::before { content: "✓"; color: var(--amber); font-weight: 700; }
.fit .no li::before { content: "✕"; color: var(--muted); }
.fit .no { color: var(--muted); }
.fit-cta { margin-top: var(--s12); padding-top: var(--s8); border-top: 1px solid var(--line); }
@media (max-width: 720px) { .fit { grid-template-columns: 1fr; gap: var(--s8); } }

/* ---------- 11. faq ---------- */
.faq { margin-top: var(--s12); border-top: 1px solid var(--line); padding-top: var(--s2); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s6);
  padding: var(--s6) 0;
  font-weight: 600; font-size: var(--t-lg);
}
.faq summary::-webkit-details-marker { display: none; }
.faq .chev {
  font-family: var(--font-mono); color: var(--amber);
  transition: transform 150ms ease;
  flex: none;
}
.faq details[open] .chev { transform: rotate(45deg); }
.faq details p { padding: 0 0 var(--s6); max-width: 60ch; }

/* ---------- 12. final cta: the resolution lands before the ask ---------- */
.final { padding: var(--s24) 0 var(--s16); }
.final .strip { margin-top: 0; margin-bottom: var(--s12); }
.final .lead { margin-top: var(--s6); }
.final .cta-row { margin-top: var(--s8); }

/* ---------- sticky mobile ask ---------- */
.stickycta { display: none; }
@media (max-width: 860px) {
  .stickycta {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: var(--s3) var(--s6) calc(var(--s3) + env(safe-area-inset-bottom));
    background: var(--ink);
    border-top: 1px solid var(--line);
  }
  .stickycta .cta-note { font-size: var(--t-mono); line-height: 1.35; }
  body { padding-bottom: 5.5rem; }
}

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line-soft); }
.site-footer .container {
  padding-top: var(--s8); padding-bottom: var(--s8);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4);
  font-size: var(--t-body); color: var(--muted);
}
.site-footer a {
  color: var(--muted); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
  transition: color 150ms ease;
}
.site-footer a:hover { color: var(--text); }
.site-footer .links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s6); }

/* ---------- article (teardown, legal) ---------- */
.article { padding: 9.5rem 0 var(--s16); }
.article .display { font-size: clamp(2.1rem, 4vw + 0.8rem, 3.4rem); }
.byline {
  margin-top: var(--s6);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.01em;
  color: var(--muted);
}
.article-body { margin-top: var(--s12); display: grid; gap: var(--s12); }
.article-body h2 { margin-bottom: var(--s4); }

/* The leak number reads as a running count, not a chip above the heading. */
.leaknum {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  margin-right: 0.55em;
}
.article-body p + p { margin-top: var(--s4); }
.callout {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-2);
  padding: var(--s6);
  font-size: var(--t-body);
}
.callout ul { margin: var(--s3) 0 0; padding-left: 1.1rem; }
.callout li + li { margin-top: var(--s2); }

.statgrid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s6);
  text-align: center;
}
.statgrid .num { font-size: var(--t-h2); font-weight: 500; color: var(--paper-ink); }
.statgrid .small { color: var(--paper-muted); }
@media (max-width: 720px) { .statgrid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- legal + 404 ---------- */
.legal { padding: 9.5rem 0 var(--s16); max-width: 44rem; }
.legal h1 { margin-bottom: var(--s2); }
.legal p + p { margin-top: var(--s4); }
.legal a { color: var(--amber); text-decoration: none; }

.notfound { padding: 12rem 0 var(--s24); }
.notfound .lead { margin-top: var(--s6); }
.notfound .cta-row { margin-top: var(--s12); }
.notfound-links { margin-top: var(--s12); border-top: 1px solid var(--line); display: grid; }
.notfound-links a {
  padding: var(--s4) 0; border-bottom: 1px solid var(--line);
  text-decoration: none; display: flex; justify-content: space-between; gap: var(--s6);
}
.notfound-links a:hover { color: var(--amber); }
.notfound-links .small { color: var(--muted); }

@media (max-width: 640px) {
  .final .display br { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dot--live, .strip rect.lk, .rotator > span { animation: none; }
  .rotator > span { opacity: 0; }
  .rotator > span:first-child { opacity: 1; }
  .strip rect.lk { transform: none; opacity: 1; }
  .btn, .site-nav a, .menu-panel a, .proof-card, .faq .chev, .site-footer a,
  .ledger-row, .rail li::before, .readmore, .install-item .sq { transition: none; }
}

/* =====================================================================
   SUBRETENTION ADDITIONS (2026-10-12)
   Same system as creatorretention.com. Added: six-name rotator, hero photo
   with live "leak" notices, photo rows in the ledger, three animated phone
   mockups (cancel flow, failed-card text, portal skip), and a photo beside
   the final ask. Motion loops; reduced-motion shows each mockup's end state.
   ===================================================================== */

/* six apps share an 18s cycle, so each owns one sixth */
.rotator--6 > span { animation-name: app-swap; animation-duration: 18s; }
@keyframes app-swap {
  0%             { opacity: 0; transform: translateY(0.32em); }
  0.4%, 17%      { opacity: 1; transform: translateY(0); }
  17.6%, 100%    { opacity: 0; transform: translateY(-0.32em); }
}

/* hero: copy left, doorstep photo right */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--s12);
  align-items: center;
}
.hero-photo { margin: 0; position: relative; }
.hero-photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 40% 60%;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.toast {
  position: absolute; left: -1.5rem;
  display: flex; gap: var(--s3); align-items: flex-start;
  max-width: 17rem;
  background: rgba(25, 22, 19, 0.92);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: var(--s3) var(--s4);
  font-size: 0.875rem; line-height: 1.4; color: var(--muted);
  opacity: 0;
  animation: toast-cycle 10s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.toast b { color: var(--text); font-weight: 600; }
.toast .dot { margin-top: 0.45em; flex: none; }
.toast--a { top: 12%; }
.toast--b { top: 30%; left: auto; right: -1.25rem; animation-delay: 5s; }
@keyframes toast-cycle {
  0%        { opacity: 0; transform: translateY(10px); }
  6%, 40%   { opacity: 1; transform: translateY(0); }
  48%, 100% { opacity: 0; transform: translateY(-6px); }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s8); }
  .hero-photo img { aspect-ratio: 16 / 10; }
  .toast { left: var(--s3); max-width: 15rem; }
  .toast--b { right: var(--s3); top: auto; bottom: var(--s4); }
}

/* ledger rows that carry a photo */
.ledger-row.has-img { grid-template-columns: 13rem minmax(0, 1fr) 15rem; align-items: center; }
.ledger-img { margin: 0; }
.ledger-img img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border: 1px solid var(--line); border-radius: var(--radius);
  filter: saturate(0.9);
  transition: filter 300ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ledger-row:hover .ledger-img img { filter: saturate(1.05); transform: scale(1.015); }
@media (max-width: 900px) {
  .ledger-row.has-img { grid-template-columns: 1fr; }
  .ledger-img { max-width: 26rem; }
}

/* ---------- phone mockups ---------- */
.phones {
  margin-top: var(--s16);
  padding-top: var(--s12);
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s8);
}
.phone-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--s4); min-width: 0; }
.phone-fig figcaption { font-size: var(--t-body); color: var(--muted); text-align: center; }
.phone-fig figcaption b { color: var(--text); font-weight: 600; }
.phone {
  width: 100%; max-width: 16.5rem; aspect-ratio: 9 / 18.5;
  background: #0d0b09; border: 1px solid var(--line); border-radius: 2.3rem; padding: 0.55rem;
}
.screen {
  position: relative; height: 100%; overflow: hidden;
  background: var(--paper); color: var(--paper-ink);
  border-radius: 1.8rem; padding: 1.5rem 1rem 1rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  font-size: 0.875rem; line-height: 1.35;
}
.scr-brand { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.02em; color: var(--paper-muted); text-align: center; margin-bottom: 0.25rem; }
.scr-title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.15; }
.scr-q { font-weight: 600; margin-top: 0.25rem; }
.chip { border: 1px solid var(--paper-line); border-radius: 999px; padding: 0.45rem 0.8rem; background: transparent; }
.pbtn { display: block; text-align: center; border: 1px solid var(--paper-line); border-radius: 999px; padding: 0.55rem 0.8rem; font-weight: 600; }
.pbtn--go, .pbtn--skip { background: var(--paper-ink); border-color: var(--paper-ink); color: var(--paper); }
.plink { text-align: center; color: var(--paper-muted); text-decoration: underline; text-underline-offset: 3px; font-size: 0.8125rem; }
.sheet { margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--paper-line); display: grid; gap: 0.45rem; }
.sysline { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.02em; color: var(--amber-ink); display: flex; gap: 0.4rem; align-items: center; }
.sysline .dot { width: 0.6rem; height: 0.6rem; vertical-align: 0; }

/* text thread */
.screen--sms { background: #f6f1e8; }
.bub { max-width: 86%; border-radius: 1rem; padding: 0.55rem 0.75rem; }
.bub--in { align-self: flex-start; background: #e4d9c6; border-bottom-left-radius: 0.3rem; }
.bub--out { align-self: flex-end; background: var(--amber); color: var(--ink); border-bottom-right-radius: 0.3rem; font-weight: 500; }
.bub--link { color: var(--paper-ink); text-decoration: underline; text-decoration-color: var(--amber-ink); text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 600; }

/* portal date swap */
.next { display: grid; padding: 0.7rem 0.8rem; border-radius: 0.8rem; background: #e9e0d0; margin: 0.25rem 0 0.35rem; }
.next > span { grid-area: 1 / 1; }

/* one shared 9s loop per phone */
.chip--pick  { animation: pick 9s ease infinite; }
.sheet       { animation: sheet-in 9s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
.pbtn--go    { animation: press 9s ease infinite; }
@keyframes pick {
  0%, 22%   { background: transparent; border-color: var(--paper-line); color: var(--paper-ink); }
  26%, 94%  { background: var(--amber); border-color: var(--amber); color: var(--ink); }
  100%      { background: transparent; border-color: var(--paper-line); }
}
@keyframes sheet-in {
  0%, 32%   { opacity: 0; transform: translateY(14px); }
  40%, 92%  { opacity: 1; transform: translateY(0); }
  100%      { opacity: 0; transform: translateY(14px); }
}
@keyframes press {
  0%, 58%   { transform: scale(1); background: var(--paper-ink); }
  61%       { transform: scale(0.95); }
  64%, 92%  { transform: scale(1); background: var(--amber-ink); border-color: var(--amber-ink); }
  100%      { background: var(--paper-ink); }
}

.b1, .b2, .b3, .b4 { animation: msg 9s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
.b1 { --in: 4%; }
.b2 { animation-name: msg2; }
.b3 { animation-name: msg3; }
.b4 { animation-name: msg4; }
@keyframes msg  { 0%, 4%  { opacity: 0; transform: translateY(8px); } 9%, 92%  { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes msg2 { 0%, 14% { opacity: 0; transform: translateY(8px); } 19%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes msg3 { 0%, 40% { opacity: 0; transform: translateY(8px); } 45%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes msg4 { 0%, 56% { opacity: 0; transform: translateY(8px); } 61%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

.pbtn--skip { animation: press 9s ease infinite; animation-delay: -2.4s; }
.next-a { animation: date-out 9s ease infinite; }
.next-b { animation: date-in 9s ease infinite; }
.sys--skip { animation: msg4 9s ease infinite; animation-delay: -1.8s; }
@keyframes date-out { 0%, 34% { opacity: 1; transform: none; } 38%, 94% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 1; } }
@keyframes date-in  { 0%, 36% { opacity: 0; transform: translateY(8px); } 40%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }

@media (max-width: 900px) {
  .phones {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 72%);
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s4);
  }
  .phone-fig { scroll-snap-align: center; }
}

/* final ask with a photo */
.final-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--s12); align-items: center; }
.final-photo { margin: 0; }
.final-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius); }
@media (max-width: 900px) { .final-grid { grid-template-columns: 1fr; } }

.founder-facts > .label { margin-bottom: calc(var(--s2) * -1); }

@media (prefers-reduced-motion: reduce) {
  .rotator--6 > span, .toast, .chip--pick, .sheet, .pbtn--go, .pbtn--skip,
  .b1, .b2, .b3, .b4, .next-a, .next-b, .sys--skip { animation: none; }
  .rotator--6 > span:not(:first-child) { opacity: 0; }
  .rotator--6 > span:first-child, .toast--a, .sheet, .b1, .b2, .b3, .b4, .next-b, .sys--skip { opacity: 1; transform: none; }
  .next-a { opacity: 0; }
  .chip--pick { background: var(--amber); border-color: var(--amber); color: var(--ink); }
}