/* ==========================================================================
   Warmup Solutions — shared stylesheet
   One file for every language. Copy diverges, styling never does.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Palette. --cold -> --ember is the product metaphor, not decoration. */
  --ink:        #14171C;
  --ink-soft:   #22262E;
  --paper:      #F2F0EC;
  --paper-warm: #EAE7E1;
  --surface:    #FFFFFF;
  --ember:      #E2481F;
  --ember-dark: #C43B14;
  --cold:       #46617A;
  --muted:      #5A6069;
  --muted-dark: #9AA1AB;
  --line:       rgba(20, 23, 28, 0.10);
  --line-strong:rgba(20, 23, 28, 0.20);
  --line-dark:  rgba(255, 255, 255, 0.14);

  /* The warm-up ramp, sampled at five points. Used by the meter and the rails. */
  --ramp-0: #46617A;
  --ramp-1: #6D5B63;
  --ramp-2: #94554D;
  --ramp-3: #BB4E36;
  --ramp-4: #E2481F;

  /* Spacing scale */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;  --s5: 24px;
  --s6: 32px;  --s7: 48px;  --s8: 64px;  --s9: 96px;  --s10: 128px;

  /* Type */
  --font-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;

  --fs-h1:   clamp(2.125rem, 1.1rem + 4.4vw, 4.5rem);
  --fs-h2:   clamp(1.6875rem, 1.3rem + 1.6vw, 2.5rem);
  --fs-h3:   clamp(1.1875rem, 1.11rem + 0.33vw, 1.375rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
  --fs-sm:   clamp(0.875rem, 0.86rem + 0.08vw, 0.9375rem);
  --fs-mono: clamp(0.75rem, 0.735rem + 0.07vw, 0.8125rem);

  /* Depth: three planes only */
  --shadow-elevated: 0 1px 2px rgba(20,23,28,.05), 0 8px 24px -8px rgba(20,23,28,.12);
  --shadow-floating: 0 2px 4px rgba(20,23,28,.06), 0 18px 48px -12px rgba(226,72,31,.18);

  --radius:    8px;
  --radius-lg: 14px;

  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --ease-out:    cubic-bezier(.22, 1, .36, 1);

  --container: 1120px;
  --measure:   62ch;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Grain sits behind content so it textures paper without softening type. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.site-header, main, .site-footer { position: relative; z-index: 2; }

img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid rgba(226, 72, 31, .55);
  outline-offset: 3px;
  border-radius: 3px;
}

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

.skip-link {
  position: absolute; top: -60px; left: var(--s4); z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: var(--s3) var(--s5); border-radius: var(--radius);
  text-decoration: none; font-size: var(--fs-sm);
  transition: top .18s var(--ease-out);
}
.skip-link:focus { top: var(--s4); }

/* ---------- Typography ---------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 84%;
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.01em; }

p { max-width: var(--measure); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: var(--s4);
}
.eyebrow--ember { color: var(--ember); }
.eyebrow--dark  { color: var(--muted-dark); }

.lead {
  font-size: var(--fs-lead);
  color: var(--muted);
  line-height: 1.6;
}
h1 + .lead, h2 + .lead { margin-top: var(--s5); }

.note {
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s5);
}
@media (max-width: 600px) { .container { padding-inline: var(--s4); } }

.section { padding-block: clamp(56px, 8vw, 96px); }
.section--tight { padding-block: clamp(44px, 6vw, 72px); }
.section--dark  { background: var(--ink); color: var(--paper); }
.section--dark .lead { color: var(--muted-dark); }
.section--warm  { background: var(--paper-warm); }

.section-head { max-width: 34ch; margin-bottom: var(--s7); }
.section-head p { margin-top: var(--s4); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 88%;
  font-size: .9375rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 17px 30px;
  border-radius: var(--radius);
  transition: background-color .18s var(--ease-out),
              border-color .18s var(--ease-out),
              color .18s var(--ease-out),
              transform .18s var(--ease-spring);
}

.btn--primary {
  background: var(--ember);
  color: #fff;
  box-shadow: 0 1px 2px rgba(196, 59, 20, .28);
}
.btn--primary:hover  { background: var(--ember-dark); transform: translateY(-1px); }
.btn--primary:active { background: #A93110; transform: translateY(0); }

.btn--ghost {
  border: 1.5px solid var(--line-strong);
  color: var(--ink);
}
.btn--ghost:hover  { border-color: var(--ink); background: rgba(20,23,28,.04); }
.btn--ghost:active { background: rgba(20,23,28,.08); }

.section--dark .btn--ghost { border-color: var(--line-dark); color: var(--paper); }
.section--dark .btn--ghost:hover { border-color: var(--paper); background: rgba(255,255,255,.06); }

.btn--block { width: 100%; }

/* Text link with a travelling arrow */
.link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--line-strong);
  transition: color .18s var(--ease-out), text-decoration-color .18s var(--ease-out);
}
.link:hover { color: var(--ember); text-decoration-color: currentColor; }
.link .arrow { text-decoration: none; transition: transform .18s var(--ease-spring); }
.link:hover .arrow { transform: translateX(3px); }

.section--dark .link:hover { color: #FF7B54; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s5);
  margin-top: var(--s6);
}
@media (max-width: 600px) {
  .cta-row { flex-direction: column; align-items: stretch; gap: var(--s4); }
  .cta-row .btn { width: 100%; }
  .cta-row .link { justify-content: center; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(242, 240, 236, .88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease-out);
}
.site-header.is-stuck { border-bottom-color: var(--line); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  min-height: 56px;
  padding-block: var(--s3);
}
@media (min-width: 768px) { .header-inner { min-height: 68px; } }

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 84%;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}
/* Three segments running cold -> ember: a two-millimetre echo of the meter. */
.wordmark-mark {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  margin-right: 2px;
}
.wordmark-mark i {
  display: block;
  width: 3px;
  border-radius: 2px;
}
.wordmark-mark i:nth-child(1) { height: 10px; background: var(--ramp-0); }
.wordmark-mark i:nth-child(2) { height: 14px; background: var(--ramp-2); }
.wordmark-mark i:nth-child(3) { height: 18px; background: var(--ramp-4); }

.header-right { display: flex; align-items: center; gap: var(--s5); }

.lang-switch {
  display: flex;
  align-items: center;
  gap: var(--s1);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.lang-switch a,
.lang-switch span {
  padding: 5px 7px;
  border-radius: 5px;
  text-decoration: none;
  color: var(--muted);
  transition: color .16s var(--ease-out), background-color .16s var(--ease-out);
}
.lang-switch a:hover { color: var(--ink); background: rgba(20,23,28,.06); }
.lang-switch [aria-current='true'] { color: var(--ink); background: rgba(20,23,28,.08); font-weight: 500; }

.header-cta { display: none; }
@media (min-width: 768px) { .header-cta { display: inline-flex; padding: 11px 20px; font-size: .8125rem; } }

/* ---------- Hero ---------- */
.hero {
  display: flex;
  align-items: center;
  min-height: calc(100svh - 56px);
  padding-block: var(--s8) var(--s7);
}
@media (min-width: 768px) {
  .hero { min-height: 0; padding-block: clamp(72px, 9vw, 128px) clamp(64px, 7vw, 104px); }
}

.hero h1 { max-width: 17ch; }
.hero .lead { margin-top: var(--s5); max-width: 48ch; }
@media (min-width: 1100px) { .hero .lead { font-size: 1.3125rem; } }

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s4);
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .04em;
  color: var(--muted);
}
.hero-trust li { display: flex; align-items: center; gap: var(--s4); }
.hero-trust li:not(:last-child)::after {
  content: '';
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--line-strong);
}
@media (max-width: 600px) {
  .hero-trust { flex-direction: column; align-items: flex-start; gap: var(--s2); margin-top: var(--s6); }
  .hero-trust li:not(:last-child)::after { display: none; }
}

/* ---------- Problem ---------- */
.problem { border-top: 1px solid var(--line); }
.problem h2 { max-width: 20ch; }

.problem-list {
  margin-top: var(--s7);
  max-width: 56ch;
  border-top: 1px solid var(--line);
}
.problem-list li {
  padding-block: var(--s5);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  display: flex;
  gap: var(--s5);
  align-items: baseline;
}
.problem-list .tick {
  flex: none;
  width: 22px; height: 3px; border-radius: 2px;
  background: var(--cold);
  transform: translateY(-5px);
  opacity: .55;
}
.problem-close {
  margin-top: var(--s6);
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 84%;
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
  max-width: 30ch;
}
.problem-close em { font-style: normal; color: var(--ember); }

/* ---------- The brief artifact ---------- */
.brief { background: var(--paper-warm); }
.brief-layout {
  display: grid;
  gap: var(--s7);
  align-items: start;
}
@media (min-width: 900px) {
  .brief-layout { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--s8); }
  .brief-copy { position: sticky; top: 108px; }
}

.brief-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-floating);
  overflow: hidden;
}

.brief-head {
  padding: var(--s5) var(--s5) var(--s4);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(226,72,31,.05), transparent);
}
.brief-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s2) var(--s4);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--muted);
  letter-spacing: .02em;
}
.brief-subject {
  margin-top: var(--s3);
  font-size: var(--fs-h3);
}

.brief-fields { padding: var(--s2) var(--s5) var(--s5); }
.brief-fields > div {
  padding-block: var(--s4);
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: var(--s1);
}
@media (min-width: 480px) {
  .brief-fields > div { grid-template-columns: 128px minmax(0, 1fr); gap: var(--s5); align-items: baseline; }
}
.brief-fields dt {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.brief-fields dd { font-size: var(--fs-sm); line-height: 1.6; }
.brief-fields .quote { color: var(--ink-soft); font-style: italic; }

.brief-approach {
  margin: 0 var(--s5) var(--s5);
  padding: var(--s5);
  border-radius: var(--radius);
  background: rgba(226, 72, 31, .06);
  border: 1px solid rgba(226, 72, 31, .18);
}
.brief-approach h4 {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ember-dark);
  margin-bottom: var(--s3);
}
.brief-approach p { font-size: var(--fs-sm); line-height: 1.65; max-width: none; }
.brief-approach p + p { margin-top: var(--s3); }

.brief-caption {
  margin-top: var(--s4);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--muted);
  letter-spacing: .04em;
}

.privacy-line {
  margin-top: var(--s6);
  padding: var(--s4) var(--s5);
  border-left: 3px solid var(--cold);
  background: rgba(70, 97, 122, .045);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  max-width: 52ch;
}
.privacy-line a { color: var(--cold); text-underline-offset: 3px; }

/* Staggered reveal for the brief rows */
.reveal > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.reveal.is-in > * { opacity: 1; transform: none; }

/* ---------- Flow + warm-up meter (signature element) ---------- */
.flow h2 { max-width: 18ch; }

.flow-steps {
  margin-top: var(--s7);
  display: grid;
  gap: var(--s5);
}
@media (min-width: 860px) {
  .flow-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
}

.flow-step { position: relative; }

/* Mobile: each step carries its own slice of the cold -> ember ramp. */
@media (max-width: 859px) {
  .flow-steps { gap: 0; }
  .flow-step { padding-left: var(--s6); padding-block: var(--s5); }
  .flow-step::before {
    content: '';
    position: absolute;
    left: 5px; top: 0; bottom: 0;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--from), var(--to));
  }
  .flow-step::after {
    content: '';
    position: absolute;
    left: 0; top: var(--s5);
    width: 13px; height: 13px;
    border-radius: 50%;
    background: var(--from);
    border: 3px solid var(--paper);
  }
  .flow-step:first-child::before { top: var(--s5); }
  .flow-step:last-child::before  { bottom: auto; height: var(--s5); }
}

.flow-art {
  height: 116px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-elevated);
  padding: var(--s3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: var(--s4);
}
@media (max-width: 859px) { .flow-art { max-width: 260px; } }

.flow-step h3 { margin-bottom: var(--s2); }
.flow-step p { font-size: var(--fs-sm); color: var(--muted); }

.who {
  display: inline-block;
  margin-top: var(--s3);
  padding: 3px 9px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(20,23,28,.06);
  color: var(--muted);
}
.who--auto { background: rgba(226,72,31,.10); color: var(--ember-dark); }
.who--you  { background: rgba(70,97,122,.12); color: var(--cold); }

/* Miniature artifacts inside .flow-art */
.mini-row { height: 7px; border-radius: 3px; background: rgba(20,23,28,.09); }
.mini-row--sm { width: 46%; }
.mini-row--md { width: 72%; }
.mini-row--accent { background: rgba(226,72,31,.35); }
.mini-row--cold { background: rgba(70,97,122,.32); }

.mini-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: 2px;
}
.mini-cell { aspect-ratio: 1; border-radius: 3px; background: rgba(20,23,28,.07); }
.mini-cell--on { background: var(--ember); }

.mini-pill {
  height: 20px;
  border-radius: 5px;
  border: 1px solid var(--line);
}
.mini-pill--on { border-color: var(--ember); background: rgba(226,72,31,.10); }

.mini-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The meter: desktop only, sits under the four steps */
.meter { display: none; }
@media (min-width: 860px) {
  .meter { display: block; margin-top: var(--s7); }
  .meter-track {
    height: 6px;
    border-radius: 3px;
    background: rgba(20,23,28,.08);
    overflow: hidden;
  }
  .meter-fill {
    height: 100%;
    width: 0;
    border-radius: 3px;
    background: linear-gradient(90deg,
      var(--ramp-0) 0%, var(--ramp-1) 25%, var(--ramp-2) 50%, var(--ramp-3) 75%, var(--ramp-4) 100%);
    transition: width 1.5s var(--ease-out);
  }
  .meter.is-in .meter-fill { width: 100%; }
  .meter-labels {
    display: flex;
    justify-content: space-between;
    margin-top: var(--s3);
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .meter-labels span:first-child { color: var(--cold); }
  .meter-labels span:last-child  { color: var(--ember); }
}

/* No rule here: the meter directly above is already the horizontal divider. */
.flow-close {
  margin-top: var(--s7);
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 84%;
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
  max-width: 34ch;
}

/* ---------- Demo band ---------- */
.demo-band { text-align: center; }
.demo-band h2 { max-width: 22ch; margin-inline: auto; }
.demo-band p { margin: var(--s5) auto 0; max-width: 50ch; }
.demo-band .cta-row { justify-content: center; margin-top: var(--s7); }

/* ---------- Offer ---------- */
.offer-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  padding: clamp(24px, 4vw, 44px);
  max-width: 800px;
  margin-inline: auto;
}
.offer-card h2 { max-width: 16ch; }
.offer-card > .lead { margin-top: var(--s4); }

.offer-list { margin-top: var(--s7); border-top: 1px solid var(--line); }
.offer-list li {
  padding-block: var(--s5);
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: var(--s1);
}
@media (min-width: 620px) {
  .offer-list li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s5); align-items: baseline; }
}
.offer-list strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 86%;
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
}
.offer-list span { font-size: var(--fs-sm); color: var(--muted); }

.offer-card .cta-row { margin-top: var(--s7); }

/* Add-ons: deliberately subordinate. No fill, no shadow, ~55% width. */
/* Shares the offer card's left edge, but stays narrower so it never competes. */
.addons {
  margin-top: var(--s7);
  max-width: 800px;
  margin-inline: auto;
  padding-inline: clamp(24px, 4vw, 44px);
}
.addons-label, .addon { max-width: 560px; }
.addon:last-child { border-bottom: 0; }
.addons-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}
.addon {
  padding-block: var(--s5);
  border-bottom: 1px solid var(--line);
}
.addon h3 { font-size: 1.0625rem; }
.addon p { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--s2); }
.addon .link { margin-top: var(--s3); font-size: var(--fs-sm); }
.addon--empty p { color: var(--muted); opacity: .7; }

/* ---------- Boundary ---------- */
.boundary { text-align: center; }
.boundary h2 { max-width: 14ch; margin-inline: auto; }
.boundary p { margin: var(--s5) auto 0; max-width: 46ch; font-size: var(--fs-lead); color: var(--ink-soft); }

/* ---------- Founders ---------- */
.founders h2 { max-width: 22ch; }

.founder-grid {
  margin-top: var(--s7);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5);
  max-width: 620px;
}
@media (min-width: 620px) { .founder-grid { gap: var(--s7); } }

.founder-photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-warm);
  border: 1px solid var(--line);
  position: relative;
  display: grid;
  place-items: center;
}
.founder-photo img { width: 100%; height: 100%; object-fit: cover; }
.founder-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20,23,28,.34), transparent 55%);
  pointer-events: none;
}
/* Empty slots shouldn't wear the photo treatment. */
.founder-photo:not(:has(img))::after { display: none; }
.founder-photo .placeholder {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--muted);
  text-align: center;
  padding: var(--s4);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.founder h3 { margin-top: var(--s4); }
.founder .role {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--muted);
  letter-spacing: .04em;
  margin-top: var(--s1);
}
.founder p { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: var(--s3); }

.founders-honest {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  max-width: 54ch;
}
.founders-honest p { font-size: var(--fs-lead); }
.founders-honest .link { margin-top: var(--s4); }

/* Reserved for the first real testimonial. Unhide by removing [hidden]. */
.testimonial {
  margin-top: var(--s7);
  padding: var(--s5) var(--s6);
  border-left: 3px solid var(--ember);
  background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  max-width: 56ch;
}
.testimonial blockquote { font-size: var(--fs-lead); }
.testimonial figcaption {
  margin-top: var(--s4);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--muted);
  letter-spacing: .04em;
}

/* ---------- FAQ ---------- */
.faq h2 { max-width: 20ch; }
.faq-list { margin-top: var(--s7); max-width: 760px; border-top: 1px solid var(--line); }

.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  min-height: 56px;
  padding-block: var(--s4);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 86%;
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
  transition: color .16s var(--ease-out);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--ember); }

.faq-chevron {
  flex: none;
  width: 14px; height: 14px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s var(--ease-out);
}
.faq-item[open] .faq-chevron { transform: rotate(-135deg) translate(-3px, -3px); }

.faq-answer { padding-bottom: var(--s5); }
.faq-answer p { font-size: var(--fs-sm); color: var(--ink-soft); }
.faq-answer p + p { margin-top: var(--s3); }
/* Standalone: .todo also appears inside .pending blocks on /privacy/ and /legal/. */
.todo {
  display: inline-block;
  margin-top: var(--s3);
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(226,72,31,.12);
  color: var(--ember-dark);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ---------- Final CTA ---------- */
.final-cta { text-align: center; }
.final-cta h2 { max-width: 20ch; margin-inline: auto; }
.final-cta p { margin: var(--s5) auto 0; max-width: 46ch; }
.final-cta .cta-row { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: var(--muted-dark);
  padding-block: var(--s7);
  font-size: var(--fs-sm);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s6);
  justify-content: space-between;
  align-items: flex-start;
}
.site-footer .wordmark { color: var(--paper); }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--s5); }
.footer-nav a { text-decoration: none; transition: color .16s var(--ease-out); }
.footer-nav a:hover { color: var(--paper); }
.footer-legal {
  width: 100%;
  max-width: none;
  padding-top: var(--s5);
  border-top: 1px solid var(--line-dark);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .03em;
}
/* The cold end of the mark needs lifting to stay visible on ink. */
.site-footer .wordmark-mark i:nth-child(1) { background: #7590AA; }
.site-footer .wordmark-mark i:nth-child(2) { background: #A9695C; }
.site-footer .lang-switch a { color: var(--muted-dark); }
.site-footer .lang-switch a:hover { color: var(--paper); background: rgba(255,255,255,.08); }
.site-footer .lang-switch [aria-current='true'] { color: var(--paper); background: rgba(255,255,255,.10); }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  gap: var(--s3);
  align-items: center;
  padding: 10px var(--s4) calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(242, 240, 236, .94);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform .3s var(--ease-out);
}
.sticky-cta.is-visible { transform: none; }
.sticky-cta .btn { flex: 1; padding-block: 15px; }
.sticky-cta .sticky-demo {
  flex: none;
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color .16s var(--ease-out);
}
.sticky-cta .sticky-demo:hover { border-color: var(--ink); }
@media (min-width: 768px) { .sticky-cta { display: none; } }

/* Keep the last section clear of the sticky bar */
@media (max-width: 767px) { .site-footer { padding-bottom: calc(var(--s7) + 76px); } }

/* ==========================================================================
   Subpages: /demo/, /privacy/, /legal/, /thanks/
   ========================================================================== */

/* A back link replaces the CTA in the header on subpages. */
.header-back {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--muted);
  transition: color .16s var(--ease-out);
}
.header-back:hover { color: var(--ink); }
.header-back .arrow { transition: transform .18s var(--ease-spring); }
.header-back:hover .arrow { transform: translateX(-3px); }

.page-head { padding-block: clamp(48px, 7vw, 88px) clamp(28px, 4vw, 44px); }
.page-head h1 { max-width: 20ch; }
.page-head .lead { max-width: 54ch; }
.page-head .updated {
  margin-top: var(--s5);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Prose document (privacy, legal) ---------- */
.doc { padding-bottom: clamp(64px, 8vw, 104px); }
.doc-body { max-width: 68ch; }
.doc-body h2 {
  font-size: var(--fs-h3);
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.doc-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.doc-body h3 { font-size: 1.0625rem; margin-top: var(--s6); }
.doc-body p, .doc-body li { font-size: var(--fs-sm); color: var(--ink-soft); }
.doc-body p { margin-top: var(--s4); }
.doc-body ul { margin-top: var(--s4); }
.doc-body ul li {
  position: relative;
  padding-left: var(--s5);
  margin-top: var(--s3);
}
.doc-body ul li::before {
  content: '';
  position: absolute;
  left: 0; top: .65em;
  width: 10px; height: 2px; border-radius: 1px;
  background: var(--cold);
  opacity: .6;
}
/* Prose links only. A blanket `.doc-body a` outranks `.btn--primary` and
   repaints button labels dark-on-ember. */
.doc-body p a,
.doc-body li a,
.doc-body dd a { color: var(--ember-dark); text-underline-offset: 3px; }
.doc-body dl { margin-top: var(--s4); }
.doc-body dl > div {
  display: grid;
  gap: var(--s1);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 520px) {
  .doc-body dl > div { grid-template-columns: 190px minmax(0, 1fr); gap: var(--s5); align-items: baseline; }
}
.doc-body dt {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
}
.doc-body dd { font-size: var(--fs-sm); color: var(--ink-soft); }

/* Public-facing statement of fact. Calm, not a warning: this one is meant to be
   read by a customer, unlike .pending below. */
.notice {
  margin-top: var(--s5);
  padding: var(--s5) var(--s6);
  border-left: 3px solid var(--cold);
  background: rgba(70, 97, 122, .05);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.notice p { margin-top: var(--s3); }
.notice p:first-child { margin-top: 0; }
.notice-small { font-size: var(--fs-mono); font-family: var(--font-mono); color: var(--muted); letter-spacing: .02em; }

/* A block Diego still has to fill. Loud on purpose so it can't ship unnoticed. */
.pending {
  margin-top: var(--s5);
  padding: var(--s4) var(--s5);
  border: 1px dashed var(--ember);
  border-radius: var(--radius);
  background: rgba(226, 72, 31, .05);
}
.pending p { margin-top: 0; color: var(--ember-dark); }
.pending p + p { margin-top: var(--s3); }
.pending .todo { margin-top: var(--s3); }

/* ---------- Demo page ---------- */
.demo-steps {
  display: grid;
  gap: var(--s5);
  margin-bottom: var(--s7);
  max-width: 760px;
}
@media (min-width: 720px) { .demo-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.demo-step {
  padding: var(--s5);
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-elevated);
}
.demo-step .num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .1em;
  color: var(--ember);
  margin-bottom: var(--s3);
}
.demo-step h3 { font-size: 1.0625rem; }
.demo-step p { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--s2); }

.demo-cta {
  padding: clamp(24px, 4vw, 44px);
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: var(--paper);
  max-width: 760px;
}
.demo-cta h2 { max-width: 22ch; }
.demo-cta p { color: var(--muted-dark); margin-top: var(--s4); }
.demo-cta .cta-row { margin-top: var(--s6); }
.demo-cta .link { color: var(--paper); text-decoration-color: var(--line-dark); }
.demo-cta .link:hover { color: #FF7B54; text-decoration-color: currentColor; }

.demo-after { margin-top: clamp(56px, 7vw, 88px); }
.demo-after h2 { max-width: 24ch; }
.demo-after .brief-card { margin-top: var(--s6); max-width: 640px; }

/* ---------- Thanks ---------- */
.next-list { margin-top: var(--s7); border-top: 1px solid var(--line); }
.next-list li {
  padding-block: var(--s5);
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: var(--s1);
}
@media (min-width: 560px) {
  .next-list li { grid-template-columns: 128px minmax(0, 1fr); gap: var(--s5); align-items: baseline; }
}
.next-list .when {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ember);
}
.next-list p { font-size: var(--fs-sm); color: var(--ink-soft); }

/* ---------- Demo-build banner (sits above /demo-gym/) ---------- */
.demo-banner {
  position: sticky;
  top: 0;
  z-index: 80;
  background: var(--ember);
  color: #fff;
}
.demo-banner-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3) var(--s5);
  padding-block: var(--s3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .04em;
}
.demo-banner a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal > * { opacity: 1; transform: none; }
  .meter-fill { width: 100%; }
  .sticky-cta { transition: none; }
}