/* ============================================================
   Operating System — Cognitive Fit Assessment funnel
   Implements "Productivity OS Funnel.dc.html" (desktop, 1440)
   with mobile behaviour per v2's 390px artboards.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  /* ink & type */
  --ink:        #1C1A17;
  --ink-2:      #221F1B;
  --body:       #3A352E;
  --body-2:     #4A443C;
  --muted:      #5C564D;
  --muted-2:    #6B6459;
  --muted-3:    #7A736A;
  --quiet:      #8A8175;
  --quiet-2:    #9A9287;
  --faint:      #B5AC9E;

  /* accent */
  --rust:       #C1552F;
  --rust-deep:  #9C3F22;
  --rust-dark:  #7A2F18;
  --rust-light: #E08A62;

  /* surfaces */
  --page:       #EFEBE4;
  --surface:    #FAF8F4;
  --surface-2:  #F2EDE5;
  --surface-3:  #F5F1EA;
  --surface-4:  #F7F3EC;
  --surface-5:  #FFFDFA;

  /* lines */
  --line:       #E2DCD2;
  --line-2:     #E8E2D8;
  --line-3:     #EDE7DD;
  --line-4:     #DDD5C8;

  /* dark band */
  --dark:       #1C1A17;
  --dark-line:  #332F2A;
  --dark-body:  #B8B1A5;
  --dark-quiet: #9A9287;
  --dark-faint: #7C746A;
  --cream:      #F3EFE8;
  --cream-2:    #E4DFD6;

  /* type families */
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:  'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* fluid scale — min at 390px, max at 1440px */
  --t-h1:       clamp(2.5rem,    1.664rem + 3.4286vw, 4.75rem);
  --t-h2-mech:  clamp(1.8125rem, 1.279rem + 2.1905vw, 3.25rem);
  --t-h2-price: clamp(1.75rem,   1.332rem + 1.7143vw, 2.875rem);
  --t-h2:       clamp(1.625rem,  1.300rem + 1.3333vw, 2.5rem);
  --t-h2-final: clamp(2rem,      1.350rem + 2.6667vw, 3.75rem);
  --t-h3:       clamp(1.3125rem, 1.104rem + 0.8571vw, 1.875rem);
  --t-lead:     clamp(1rem,      0.907rem + 0.381vw,  1.25rem);
  --t-type:     clamp(2.125rem,  1.661rem + 1.9048vw, 3.375rem);

  /* rhythm */
  --gutter: clamp(1.25rem, 0.4rem + 3.5vw, 3.5rem);   /* 20px → 56px  */
  --band-y: clamp(2.75rem, 1.2rem + 6.4vw, 5.5rem);   /* 44px → 88px  */
  --shell:  1440px;
}

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

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

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, dl, dd, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

a { color: var(--rust-deep); text-decoration: none; }
a:hover { color: var(--rust-dark); text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--surface);
  padding: 12px 20px;
  font-size: 14px;
}
.skip-link:focus { left: 8px; top: 8px; text-decoration: none; }

/* ─────────────────────────────────────────────
   Page shell — the design is a 1440 sheet on a
   warm canvas; below 1440 it simply fills the
   viewport.
   ───────────────────────────────────────────── */
.urgency, .nav, main, .foot {
  max-width: var(--shell);
  margin-inline: auto;
  background: var(--surface);
}

@media (min-width: 1500px) {
  .urgency { box-shadow: 0 -30px 80px -30px rgba(28, 26, 23, .35); }
  .foot    { box-shadow: 0 30px 80px -30px rgba(28, 26, 23, .35); }
  .urgency, .nav, main, .foot {
    border-inline: 1px solid var(--line);
  }
}

/* ---------- shared bits ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--quiet);
}
.eyebrow--accent {
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--rust-deep);
}
.eyebrow--warm {
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--rust-light);
}
.eyebrow--tight { letter-spacing: .1em; font-size: 12px; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--body-2);
  text-wrap: pretty;
}
.lead--dark { color: var(--dark-body); max-width: 760px; }
.lead--dark em { color: var(--cream); font-style: italic; }
.lead--sm { font-size: clamp(.875rem, .795rem + .33vw, 1.0625rem); color: var(--muted); }

.band-dark {
  background: var(--dark);
  color: var(--cream);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  padding: 14px 24px;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--rust);
  color: #FFF;
  box-shadow: 0 10px 24px -10px rgba(193, 85, 47, .7);
}
.btn--primary:hover { background: var(--rust-dark); color: #FFF; }

.btn--ink {
  background: var(--ink);
  color: var(--surface);
  font-weight: 500;
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 4px;
}
.btn--ink:hover { background: #35302A; color: var(--surface); }

.btn--outline {
  border: 1.5px solid var(--ink);
  color: var(--ink);
  padding: 12.5px 24px;
}
.btn--outline:hover { background: var(--ink); color: var(--surface); }

.btn--lg {
  font-size: clamp(1rem, .95rem + .19vw, 1.0625rem);
  padding: 19px 34px;
  letter-spacing: -.01em;
}

/* ─────────────────────────────────────────────
   Urgency bar
   ───────────────────────────────────────────── */
.urgency {
  background: var(--ink);
  color: var(--cream);
  padding: 11px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.urgency p { margin: 0; }
.urgency strong { font-weight: 600; }
.urgency__dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--rust);
  animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }

body[data-urgency-bar="off"] .urgency { display: none; }

/* ─────────────────────────────────────────────
   Nav
   ───────────────────────────────────────────── */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px var(--gutter);
  border-bottom: 1px solid var(--line-2);
}

.brand { display: flex; align-items: center; gap: 10px; color: inherit; }
.brand:hover { text-decoration: none; color: inherit; }
.brand__mark { width: 26px; height: 26px; flex: none; display: block; }
.brand__name {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.01em;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-left: auto;
  font-size: 14px;
}
.nav__links a { color: var(--muted); }
.nav__links a:hover { color: var(--ink); text-decoration: none; }

.nav__cta-short { display: none; }

/* ─────────────────────────────────────────────
   Hero
   ───────────────────────────────────────────── */
.hero {
  padding: clamp(2.25rem, .9rem + 5.6vw, 5.5rem) var(--gutter) clamp(2rem, .8rem + 5vw, 4.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 64px;
  align-items: start;
}

.hero__copy { display: flex; flex-direction: column; gap: 28px; }

.hero h1 {
  font-family: var(--serif);
  font-size: var(--t-h1);
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.hero h1 em { font-style: italic; color: var(--rust-deep); }

.hero .lead { max-width: 620px; }

.hero__action { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.hero__action-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hero__reassure { font-size: 14px; color: var(--muted-2); line-height: 1.4; }

.statline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted-3);
}
.statline li { display: flex; align-items: center; }
/* separator trails its item so a wrapped line never begins with a divider */
.statline li:not(:last-child)::after {
  content: "|";
  color: #CFC7BA;
  margin-left: 20px;
}

.hero__proof {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 20px;
  margin-top: 12px;
  border-top: 1px solid var(--line-2);
}
.hero__proof p { font-size: 14px; color: var(--body-2); line-height: 1.5; }

/* placeholder headshots — swap for real images */
.avatars { display: flex; flex: none; }
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  background: repeating-linear-gradient(135deg, #DED7CB 0 4px, #E8E2D8 4px 8px);
}
.avatar:nth-child(even) {
  background: repeating-linear-gradient(135deg, #D6CEC1 0 4px, #E0D9CD 4px 8px);
}
.avatars .avatar + .avatar { margin-left: -10px; }

/* graveyard */
.graveyard {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 28px;
}
.graveyard .eyebrow { margin-bottom: 20px; }
.graveyard__list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.graveyard__list li:last-child { border-bottom: 0; }
.graveyard__name {
  font-size: 16px;
  text-decoration: line-through;
  color: var(--quiet-2);
}
.graveyard__life {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--faint);
  flex: none;
}
.graveyard__list .is-alive .graveyard__name {
  text-decoration: none;
  font-weight: 600;
  color: var(--ink);
}
.graveyard__list .is-alive .graveyard__life { color: var(--rust); }

/* ─────────────────────────────────────────────
   Mechanism (dark band)
   ───────────────────────────────────────────── */
.mechanism { padding: var(--band-y) var(--gutter); }

.mechanism__intro {
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.mechanism h2 {
  font-family: var(--serif);
  font-size: var(--t-h2-mech);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -.02em;
}

.axes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--dark-line);
  border: 1px solid var(--dark-line);
  margin-top: clamp(1.5rem, .6rem + 3.7vw, 3.5rem);
}
.axis {
  background: var(--dark);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.axis__num { font-family: var(--mono); font-size: 11px; color: var(--dark-faint); }
.axis__name {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1.014rem + .457vw, 1.5rem);
  font-weight: 400;
  line-height: 1.2;
}
.axis__desc { font-size: 14px; line-height: 1.55; color: var(--dark-quiet); }

/* ─────────────────────────────────────────────
   Steps
   ───────────────────────────────────────────── */
.steps { padding: clamp(2.5rem, 1.1rem + 5.8vw, 5rem) var(--gutter); }

.steps__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
}
.step { display: flex; flex-direction: column; gap: 12px; }
.step__num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--rust);
}
.step h3 {
  font-family: var(--serif);
  font-size: var(--t-h3);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.15;
}
.step p { font-size: 16px; line-height: 1.6; color: var(--muted); }

/* ─────────────────────────────────────────────
   Report preview / paywall tease
   ───────────────────────────────────────────── */
.report { padding: 0 var(--gutter) var(--band-y); }

.report__card {
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-5);
}
.report__head {
  padding: 36px 40px 28px;
  border-bottom: 1px solid var(--line-3);
}
.report__head .eyebrow { letter-spacing: .16em; }

.report__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
}

.report__result {
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-right: 1px solid var(--line-3);
}
.report__type {
  font-family: var(--serif);
  font-size: var(--t-type);
  line-height: 1;
  letter-spacing: -.025em;
  margin-top: 8px;
}

.report__stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  padding: 20px 0;
  border-top: 1px solid var(--line-3);
  border-bottom: 1px solid var(--line-3);
}
.report__stats div { display: flex; flex-direction: column-reverse; }
.report__stats dd {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.625rem, 1.347rem + 1.14vw, 2.375rem);
  line-height: 1;
}
.report__stats dd.is-accent { color: var(--rust); }
.report__stats dt { font-size: 13px; color: var(--muted-3); margin-top: 4px; }

.report__blur {
  filter: blur(5px);
  user-select: none;
  pointer-events: none;
  opacity: .75;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.report__blur p { font-size: 17px; line-height: 1.6; color: var(--body); }

.report__unlock {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.report__unlock .btn { padding: 16px 28px; font-size: 16px; }
.report__terms { font-size: 13px; color: var(--muted-3); }

.report__contents {
  padding: 40px;
  background: var(--surface-4);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.contents__list { display: flex; flex-direction: column; gap: 13px; }
.contents__list li {
  display: flex;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--body);
}
.contents__num { color: var(--rust); font-family: var(--mono); flex: none; }
.contents__length {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--quiet);
}

/* ─────────────────────────────────────────────
   Never-do list / permission to ignore
   ───────────────────────────────────────────── */
.neverdo {
  margin-top: 28px;
  background: var(--dark);
  color: var(--cream);
  border-radius: 6px;
  padding: clamp(1.5rem, .95rem + 2.3vw, 2.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, .5rem + 4.2vw, 3.5rem);
  align-items: start;
}

.neverdo__intro { display: flex; flex-direction: column; gap: 14px; }
.neverdo__intro h3 {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 1.152rem + .914vw, 2.125rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.neverdo__lead { font-size: 15px; line-height: 1.6; color: var(--dark-body); }
.neverdo__lead em { color: var(--cream); font-style: italic; }

.neverdo__list { display: flex; flex-direction: column; }
.neverdo__list li {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--dark-line);
  font-size: 15px;
  line-height: 1.55;
  color: var(--dark-body);
}
.neverdo__list li:first-child { padding-top: 0; }
.neverdo__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.neverdo__list strong { color: var(--cream); font-weight: 600; }
.neverdo__x { color: var(--rust); flex: none; line-height: 1.55; }

.neverdo__note {
  grid-column: 1 / -1;
  padding-top: 20px;
  border-top: 1px solid var(--dark-line);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--dark-faint);
}

/* ─────────────────────────────────────────────
   Social proof
   ───────────────────────────────────────────── */
.proof {
  padding: 0 var(--gutter) var(--band-y);
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.proof__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}
.proof h2, .faq h2, .pricing h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.proof h2 { font-size: var(--t-h2); }
.proof__stat { font-family: var(--mono); font-size: 13px; color: var(--quiet); }

.proof__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.quote {
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.quote blockquote {
  font-family: var(--serif);
  font-size: clamp(1.0625rem, .995rem + .276vw, 1.3125rem);
  line-height: 1.4;
  color: var(--ink-2);
}
.quote blockquote em { font-style: italic; }
.quote__body { font-size: 14px; line-height: 1.6; color: var(--muted); }
.quote__by {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.4;
}
.quote__by .avatar { border: 0; width: 40px; height: 40px; flex: none; }
.quote__name { display: block; font-weight: 600; }
.quote__role { display: block; color: var(--quiet); }

/* ─────────────────────────────────────────────
   Pricing
   ───────────────────────────────────────────── */
.pricing {
  background: var(--surface-2);
  padding: var(--band-y) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.pricing__intro {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
}
.pricing h2 { font-size: var(--t-h2-price); }

.tiers {
  display: grid;
  grid-template-columns: 1fr 1.12fr 1fr;
  gap: 20px;
  align-items: start;
}

.tier {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 520px;
}
.tier--featured {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--cream);
  min-height: 560px;
  box-shadow: 0 24px 60px -24px rgba(28, 26, 23, .55);
  position: relative;
}
.tier__badge {
  position: absolute;
  top: -12px;
  left: 32px;
  background: var(--rust);
  color: #FFF;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 3px;
}
.tier__name {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.411rem + .366vw, 1.875rem);
  font-weight: 400;
  margin-top: 6px;
}
.tier__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tier__amount {
  font-family: var(--serif);
  font-size: clamp(2rem, 1.762rem + .976vw, 3.25rem);
  line-height: 1;
}
.tier__unit { font-size: 14px; color: var(--quiet); }
.tier__was { font-size: 14px; color: var(--quiet-2); text-decoration: line-through; }
.tier__pitch { font-size: 15px; line-height: 1.6; color: var(--muted); }
.tier--featured .tier__pitch { color: var(--dark-body); }

.tier__features { display: flex; flex-direction: column; gap: 11px; }
.tier__features li {
  display: flex;
  gap: 10px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--body);
}
.tier__features li::before { content: "—"; color: var(--rust); flex: none; }
.tier--featured .tier__features li { color: var(--cream-2); }
.tier--featured .tier__features li::before { color: var(--rust-light); }

.tier__cta { margin-top: auto; font-size: 15px; padding: 14px; }
.tier--featured .tier__cta { padding: 15px; }

/* guarantee */
.guarantee {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 26px 30px;
}
.guarantee__seal {
  width: 44px;
  height: 44px;
  flex: none;
  border: 2px solid var(--ink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 15px;
}
.guarantee__title {
  font-family: var(--serif);
  font-size: clamp(1.1875rem, 1.143rem + .183vw, 1.375rem);
  margin-bottom: 6px;
}
.guarantee__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 840px;
}

/* ─────────────────────────────────────────────
   FAQ
   ───────────────────────────────────────────── */
.faq {
  padding: clamp(2.5rem, 1.1rem + 5.8vw, 5rem) var(--gutter);
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 64px;
}
.faq h2 { font-size: var(--t-h2); margin-bottom: 14px; }
.faq__intro p { font-size: 15px; line-height: 1.6; color: var(--muted-3); }

.faq__item {
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item dt { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.faq__item dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 760px;
}

/* ─────────────────────────────────────────────
   Final CTA
   ───────────────────────────────────────────── */
.final {
  padding: clamp(3rem, 1.3rem + 7vw, 6rem) var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
}
.final h2 {
  font-family: var(--serif);
  font-size: var(--t-h2-final);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.05;
  max-width: 900px;
}
.final > p {
  font-size: clamp(.9375rem, .869rem + .276vw, 1.1875rem);
  line-height: 1.6;
  color: var(--dark-body);
  max-width: 640px;
}
.final .btn { margin-top: 8px; box-shadow: 0 14px 32px -12px rgba(193, 85, 47, .8); }
.final__meta {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--dark-faint);
  letter-spacing: .06em;
}

/* ─────────────────────────────────────────────
   Footer
   ───────────────────────────────────────────── */
.foot {
  padding: 32px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--quiet);
  border-top: 1px solid var(--line-2);
}
.foot__links { display: flex; gap: 24px; }
.foot__links a { color: var(--quiet); }
.foot__links a:hover { color: var(--ink); }

/* ═════════════════════════════════════════════
   Tablet — below 1100px
   ═════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .hero .lead { max-width: none; }

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

  .report__body { grid-template-columns: minmax(0, 1fr); }
  .report__result { border-right: 0; border-bottom: 1px solid var(--line-3); }

  .neverdo { grid-template-columns: minmax(0, 1fr); }

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

  .tiers { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .tier, .tier--featured { min-height: 0; }
  /* featured tier leads on stacked layouts — it is the one to choose */
  .tier--featured { order: -1; }

  .faq { grid-template-columns: minmax(0, 1fr); gap: 32px; }

  .steps__list { gap: 32px; }
}

/* ═════════════════════════════════════════════
   Mobile — below 760px  (per v2 390px artboards)
   ═════════════════════════════════════════════ */
@media (max-width: 760px) {
  .nav { padding: 14px var(--gutter); gap: 12px; }
  .nav__links { display: none; }
  .brand__name { font-size: 17px; }
  .brand__mark { width: 22px; height: 22px; }
  .nav__cta { padding: 11px 16px; font-size: 13px; border-radius: 5px; }
  .nav__cta-long { display: none; }
  .nav__cta-short { display: inline; }

  .urgency { font-size: 12px; padding: 10px var(--gutter); gap: 10px; }

  .hero { gap: 32px; }
  .hero__copy { gap: 20px; }
  .hero__action-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero__action-row .btn { width: 100%; padding: 17px 20px; }
  .hero__reassure { text-align: center; font-size: 13px; }
  /* wraps to two lines at 390 — spacing reads better than a stranded divider */
  .statline { justify-content: center; gap: 6px 16px; font-size: 11px; }
  .statline li:not(:last-child)::after { content: none; }
  .hero__proof { gap: 14px; }
  .hero__proof p { font-size: 12.5px; }
  .avatar { width: 30px; height: 30px; }
  .avatars .avatar + .avatar { margin-left: -9px; }
  .avatars .avatar:nth-child(4) { display: none; }

  .graveyard { padding: 20px; }
  .graveyard .eyebrow { font-size: 10px; margin-bottom: 12px; }
  .graveyard__list li { padding: 10px 0; }
  .graveyard__name { font-size: 14px; }
  .graveyard__life { font-size: 11px; }

  .axis { padding: 18px 16px; gap: 4px; }
  .axis__desc { display: none; }   /* mobile artboard shows axis names only */

  .steps__list { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; }
  .step__num { grid-row: 1 / span 2; padding-top: 4px; }
  .step p { font-size: 14px; line-height: 1.55; }

  .report { padding-inline: 16px; }
  .report__card { border-radius: 8px; }
  .report__head { padding: 18px 20px; }
  .report__head .eyebrow { font-size: 10px; }
  .report__result, .report__contents { padding: 24px 20px; gap: 18px; }
  .report__stats { gap: 22px; padding: 14px 0; }
  .report__stats dt { font-size: 11px; margin-top: 3px; }
  .report__blur { filter: blur(4px); }
  .report__blur p { font-size: 14px; }
  .report__unlock { flex-direction: column; align-items: stretch; gap: 8px; }
  .report__unlock .btn { padding: 16px; font-size: 15px; }
  .report__terms { text-align: center; font-size: 12px; }
  .contents__length { margin-top: 0; }

  .neverdo { margin-top: 16px; border-radius: 8px; padding: 24px 20px; gap: 18px; }
  .neverdo__list li { font-size: 14px; padding: 12px 0; gap: 10px; }
  .neverdo__note { padding-top: 16px; font-size: 11px; }

  .proof__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .quote { padding: 20px; gap: 12px; border-radius: 8px; }
  .quote__body { display: none; }   /* mobile artboard shows quote + attribution only */
  .quote__by { padding-top: 0; border-top: 0; margin-top: 0; }
  .quote__by .avatar { width: 32px; height: 32px; }
  .proof__head { padding-bottom: 12px; }

  .tiers { gap: 20px; }
  .tier { padding: 24px 20px; border-radius: 8px; gap: 14px; }
  .tier__badge { top: -10px; left: 20px; font-size: 10px; padding: 5px 10px; }
  .tier__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .tier__head .eyebrow { order: 2; }
  .tier__name { margin-top: 0; }
  .tier__cta { padding: 15px; }

  .guarantee { padding: 18px 20px; gap: 14px; border-radius: 8px; }
  .guarantee__seal { width: 36px; height: 36px; font-size: 13px; }
  .guarantee__body { font-size: 13px; }

  .faq__item dt { font-size: 16px; }
  .faq__item dd { font-size: 15px; }

  .final { gap: 18px; }
  .final .btn { width: 100%; }
  .final__meta { font-size: 10.5px; }

  .foot { padding: 20px var(--gutter); font-size: 11px; }
  .foot__links { gap: 14px; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- print ---------- */
@media print {
  .urgency, .nav__cta, .btn { display: none; }
  body { background: #FFF; }
  .band-dark { background: #FFF; color: #000; }
}