/* Demand Testing funnel — design system ported from maxpiechota-hub.html
   (which itself ports landing-page-mastermind.html). Same tokens, same
   component names: .wrap / section / .alt / .eyebrow / .kicker / .btn /
   .pcard / .bio, so these pages sit inside the brand rather than beside it.

   No JS anywhere: the hub's video lightbox is replaced by a linked card, and
   the sticky nav is CSS-only. Served under default-src 'none', which also
   blocks remote fonts, so Outfit is declared and the system stack carries it. */

:root {
  --bg:#101828; --surface:#1a2231; --surface-up:#1d2939; --surface-down:#0c111d;
  --border:#344054; --border-soft:#1d2939;
  --ink:rgba(255,255,255,0.92); --body:#d0d5dd; --body-2:#98a2b3; --muted:#667085;
  --brand:#465fff; --brand-300:#9cb9ff; --brand-400:#7592ff; --brand-wash:rgba(70,95,255,0.12);
  --good:#6ce9a6; --warn:#fec84b; --warn-wash:rgba(247,144,9,0.12);
  --bad:#fda29b; --bad-wash:rgba(240,68,56,0.12);
  --sans:'Outfit',-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}

/* Self-identify pain list — ported verbatim from landing-page-mastermind.html,
   where it opens the leaders page. Two columns, red rounded-square bullets,
   bold lead clause then the consequence. */
.pains {
  list-style: none; padding: 0; margin: 40px auto 0; max-width: 940px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 36px; text-align: left;
}
.pains li {
  position: relative; padding-left: 32px; font-size: 15.5px;
  color: var(--body-2); line-height: 1.55;
}
.pains li::before {
  content: ""; position: absolute; left: 0; top: 5px;
  width: 17px; height: 17px; border-radius: 5px;
  background: var(--bad-wash); border: 1px solid rgba(240,68,56,0.4);
}
.pains li b { color: var(--ink); font-weight: 600; }
.pains-tag { margin: 34px auto 0; font-size: 17px; color: var(--body); font-weight: 500; }
@media (max-width: 860px) { .pains { grid-template-columns: 1fr; } }

/* Video lightbox — ported from maxpiechota-hub.html, where the product tours use it.
   Progressive enhancement: the trigger is a real <a> to the video, and the script
   upgrades it to this modal. Blueprint's preview CSP blocks the script, so there the
   link simply opens in a new tab; on the deployed host it behaves like the hub. */
.vmodal {
  position: fixed; inset: 0; z-index: 110;
  display: none; align-items: center; justify-content: center; padding: 26px;
  background: rgba(8, 12, 22, 0.93);
}
.vmodal.open { display: flex; }
.vmodal .frame {
  position: relative; width: 100%; max-width: 1000px; aspect-ratio: 16/9;
  background: #000; border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
}
.vmodal .frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.vmodal .close {
  position: absolute; top: -46px; right: 0;
  width: 38px; height: 38px; border-radius: 999px;
  background: var(--surface-up); border: 1px solid var(--border); color: var(--body-2);
  font-size: 20px; line-height: 1; cursor: pointer; font-family: var(--sans);
}
.vmodal .close:hover { color: var(--ink); border-color: var(--muted); }

/* The card while the recording does not exist yet. */
.talk.pending { border-style: dashed; cursor: default; }
.talk.pending:hover { border-color: var(--border); }
.talk.pending .play { opacity: .45; }
.talk .soon {
  display: inline-block; margin-bottom: 12px;
  font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 600;
  color: var(--warn); background: var(--warn-wash);
  border: 1px solid rgba(254, 200, 75, 0.35); border-radius: 999px; padding: 4px 11px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

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

a { color: var(--brand-400); text-decoration: none; }
a:hover { color: var(--brand-300); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; margin-left: auto; margin-right: auto; }

/* nav */
nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(16,24,40,0.86);
  border-bottom: 1px solid var(--border-soft);
}
nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.logo { font-weight: 600; color: var(--ink); letter-spacing: -0.01em; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.logo:hover { color: var(--ink); }
.logo .dot { width: 9px; height: 9px; border-radius: 2px; background: var(--brand); display: inline-block; }
.navlinks { display: flex; align-items: center; gap: 26px; }
.navlinks a { color: var(--body-2); font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em; }
.navlinks a:hover { color: var(--ink); }
@media (max-width: 560px) { .navlinks { gap: 16px; } .navlinks a { font-size: 13.5px; } }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--brand); color: #fff;
  font-weight: 600; font-size: 15px; border: none; border-radius: 9px;
  padding: 11px 18px; letter-spacing: -0.01em; white-space: nowrap;
}
.btn:hover { background: #5a72ff; color: #fff; }
.btn.lg { font-size: 17px; padding: 15px 26px; border-radius: 11px; }
.btn.ghost { background: transparent; border: 1px solid var(--border); color: var(--ink); }
.btn.ghost:hover { background: var(--surface); border-color: var(--muted); color: var(--ink); }

/* sections */
section { padding: 84px 0; }
.alt { background: var(--surface); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.eyebrow { font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--brand-400); font-weight: 600; margin: 0 0 16px; display: block; }
h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 600; color: var(--ink); letter-spacing: -0.02em; line-height: 1.18; margin: 0 0 16px; }
h3 { font-size: 19px; color: var(--ink); font-weight: 600; margin: 0 0 10px; letter-spacing: -0.01em; }
p { margin: 0 0 14px; }
.lead { font-size: 18px; color: var(--body-2); max-width: 64ch; margin: 0 0 8px; }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }

/* hero */
.hero { padding: 72px 0 60px; text-align: center; }
.hero .kicker {
  display: inline-block; font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--brand-300); font-weight: 600; background: var(--brand-wash);
  border: 1px solid rgba(70,95,255,0.25); padding: 6px 13px; border-radius: 999px; margin: 0 0 26px;
}
.hero h1 {
  font-size: clamp(30px, 4.6vw, 50px); font-weight: 600; color: var(--ink);
  letter-spacing: -0.03em; line-height: 1.08; margin: 0 auto 22px; max-width: 22ch;
}
.hero h1 .mk { color: var(--brand-400); }
.hero .sub { font-size: clamp(17px, 2vw, 20px); color: var(--body); max-width: 62ch; margin: 0 auto 30px; }
.hero .actions { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; }

/* statement type, used for the differentiation lines */
.statement {
  font-size: clamp(24px, 3.2vw, 34px); font-weight: 600; color: var(--ink);
  line-height: 1.28; letter-spacing: -0.02em; margin: 0 auto; max-width: 26ch;
}
.statement .mk { color: var(--brand-400); }
.sup { font-size: 17.5px; color: var(--body-2); max-width: 66ch; margin: 26px auto 0; line-height: 1.62; }

/* card grid — the hub's .pcard, reused for pains, lineage and outcomes */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; text-align: left; }
.grid.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .grid, .grid.two { grid-template-columns: 1fr; } }

.pcard {
  display: flex; flex-direction: column;
  background: var(--surface-up); border: 1px solid var(--border);
  border-radius: 14px; padding: 24px;
}
.alt .pcard { background: var(--surface-down); }
.pcard .pkind { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; margin-bottom: 12px; }
.pcard p { font-size: 14.5px; color: var(--body-2); margin: 0; line-height: 1.6; }
.pcard p + p { margin-top: 10px; }

/* lineage — the giants, as compact rows rather than cards */
.lineage { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 34px; margin-top: 34px; text-align: left; }
@media (max-width: 700px) { .lineage { grid-template-columns: 1fr; } }
.lineage div { padding: 14px 0; border-bottom: 1px solid var(--border); }
.lineage b { display: block; color: var(--ink); font-weight: 600; font-size: 15.5px; letter-spacing: -0.01em; }
.lineage span { font-size: 14.5px; color: var(--body-2); }

/* agenda steps */
.steps { list-style: none; padding: 0; margin: 34px 0 0; counter-reset: s; text-align: left; }
.steps li {
  counter-increment: s; position: relative; padding: 16px 0 16px 46px;
  border-bottom: 1px solid var(--border); color: var(--body); font-size: 16px;
}
.steps li:last-child { border-bottom: 0; }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: 14px;
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--brand-wash); border: 1px solid rgba(70,95,255,0.28);
  color: var(--brand-300); font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.steps b { color: var(--ink); font-weight: 600; }

/* plain outcome list */
ul.plain { list-style: none; padding: 0; margin: 0; text-align: left; }
ul.plain li { padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 15.5px; color: var(--body); }
ul.plain li:last-child { border-bottom: 0; }
ul.plain b { color: var(--ink); font-weight: 600; }

/* fact bar */
.fact {
  display: inline-block; font-size: 14.5px; color: var(--body-2);
  background: var(--surface-down); border: 1px solid var(--border);
  border-radius: 999px; padding: 9px 20px; margin: 0 0 24px;
}
.alt .fact { background: var(--bg); }
.fact b { color: var(--ink); font-weight: 600; }
.fact .todo { color: var(--warn); }

/* the talk */
.talk {
  display: block; max-width: 720px; margin: 34px auto 0; text-align: left;
  background: var(--surface-up); border: 1px solid var(--border);
  border-radius: 14px; padding: 26px 28px; color: var(--body-2);
}
.alt .talk { background: var(--surface-down); }
.talk:hover { border-color: var(--brand); color: var(--body-2); }
.talk .play {
  width: 34px; height: 34px; border-radius: 999px; background: var(--brand-wash);
  border: 1px solid rgba(70,95,255,0.3); display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.talk .play svg { width: 12px; height: 12px; fill: var(--brand-300); margin-left: 2px; }
.talk .t { display: block; color: var(--ink); font-weight: 600; font-size: 19px; margin-bottom: 8px; letter-spacing: -0.01em; }
.talk .m { display: block; color: var(--muted); font-size: 13px; margin-top: 14px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }

/* bio */
.bio { display: grid; grid-template-columns: 140px 1fr; gap: 30px; align-items: start; max-width: 860px; margin: 0 auto; text-align: left; }
@media (max-width: 620px) { .bio { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.photo-img { width: 140px; height: 140px; border-radius: 999px; object-fit: cover; border: 1px solid var(--border); display: block; }
.bio .txt p { margin: 0 0 14px; color: var(--body); }
.bio .txt p:last-child { margin-bottom: 0; }
.name { color: var(--ink); font-weight: 600; }

/* price */
.price {
  max-width: 620px; margin: 34px auto 0; text-align: left;
  background: var(--surface-down); border: 1px solid var(--border);
  border-radius: 16px; padding: 30px 32px;
}
.alt .price { background: var(--bg); }
.price .amount { font-size: 46px; font-weight: 600; color: var(--ink); letter-spacing: -0.03em; line-height: 1; }
.price .amount .todo { color: var(--warn); }
.price .when { color: var(--body-2); font-size: 15px; margin: 10px 0 22px; }
.price ul.plain li { font-size: 14.5px; color: var(--body-2); }
.price .cta { margin-top: 24px; }
.note { font-size: 13.5px; color: var(--muted); margin: 12px 0 0; }
.note code, .stickycta code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em;
  color: var(--ink); background: var(--surface-down); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 6px;
}

/* fork / role capture */
.fork { list-style: none; padding: 0; margin: 34px auto 0; max-width: 620px; text-align: left; }
.fork li { margin: 0 0 10px; }
.fork a {
  display: block; background: var(--surface-up); border: 1px solid var(--border);
  border-radius: 11px; padding: 17px 20px; color: var(--ink); font-size: 16px; font-weight: 500;
}
.alt .fork a { background: var(--surface-down); }
.fork a::after { content: "›"; color: var(--muted); float: right; font-weight: 400; }
.fork a:hover { border-color: var(--brand); background: var(--surface); color: var(--ink); }

/* faq */
.faq { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 40px; margin-top: 34px; text-align: left; }
@media (max-width: 780px) { .faq { grid-template-columns: 1fr; } }
.faq dt { color: var(--ink); font-weight: 600; margin: 18px 0 6px; font-size: 15.5px; letter-spacing: -0.01em; }
.faq dd { margin: 0; color: var(--body-2); font-size: 14.5px; line-height: 1.6; }

footer { padding: 40px 0 56px; border-top: 1px solid var(--border-soft); color: var(--muted); font-size: 14px; text-align: center; }


/* ---- merged from pitch.css when the funnel collapsed to one page, 2026-08-31 ---- */

/* A scene, not a section. Big, short lines, lots of air. */
.scene { padding: 96px 0 84px; text-align: center; }
.scene p {
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.24;
  letter-spacing: -0.025em;
  font-weight: 300;
  color: var(--body-2);
  max-width: 20ch;
  margin: 0 auto 0.5em;
}
.scene p.hit { color: var(--ink); font-weight: 600; }
.scene p:last-child { margin-bottom: 0; }

/* The big domino: one belief, alone on the screen. */
.domino { padding: 96px 0; text-align: center; }
.domino .line {
  font-size: clamp(30px, 5vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: var(--ink);
  max-width: 16ch;
  margin: 0 auto;
}
.domino .line .mk { color: var(--brand-400); }
.domino .under { margin: 30px auto 0; max-width: 46ch; color: var(--body-2); font-size: 17px; }

/* Story: flowing prose at a readable measure, with the pull-quotes breaking OUT
   of the column so the eye gets a rest and the column stops reading as one long
   thin ribbon. Widening the measure alone would push the line length past
   comfortable reading, so the rhythm does the work instead. */
.story { max-width: 37rem; margin: 0 auto; text-align: left; }
.story p { font-size: 18.5px; line-height: 1.66; color: var(--body); margin: 0 0 20px; }
.story p.beat { color: var(--ink); font-weight: 600; }

/* Act marker — a quiet progress cue through a long read. */
.story .act {
  display: flex; align-items: center; gap: 14px;
  margin: 46px 0 30px;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.story .act::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.story .pull {
  font-size: clamp(22px, 2.8vw, 31px);
  line-height: 1.26;
  letter-spacing: -0.022em;
  font-weight: 600;
  color: var(--ink);
  margin: 40px 0;
  padding: 0;
  border: 0;
  /* break out of the measure */
  width: calc(100% + 9rem);
  margin-left: -4.5rem;
}
@media (max-width: 900px) {
  .story .pull { width: 100%; margin-left: 0; }
}
.story .pull .mk { color: var(--brand-400); }

/* Destination: loud. Their voice, a year from now. */
.destination {
  font-size: clamp(24px, 3.6vw, 40px);
  line-height: 1.24;
  letter-spacing: -0.028em;
  font-weight: 600;
  color: var(--ink);
  max-width: 22ch;
  margin: 0 auto;
  text-align: center;
}
.destination .mk { color: var(--brand-400); }

/* Promise: quiet, dense, deliberately smaller than the destination above it.
   The drop in register IS the differentiator. */
.promise {
  max-width: 44rem;
  margin: 56px auto 0;
  background: var(--surface-down);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 26px 30px;
  text-align: left;
}
.alt .promise { background: var(--bg); }
.promise p {
  font-size: 15px;
  line-height: 1.62;
  color: var(--body-2);
  margin: 0 0 12px;
  letter-spacing: 0;
}
.promise p:last-child { margin-bottom: 0; }
.promise .label {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-bottom: 14px;
}

/* Belief breakers: objection, then the turn. */
.beliefs { max-width: 40rem; margin: 40px auto 0; text-align: left; }
.belief { padding: 26px 0; border-bottom: 1px solid var(--border); }
.belief:last-child { border-bottom: 0; }
.belief .said {
  font-size: 19px; color: var(--body-2); font-style: italic;
  margin: 0 0 12px; letter-spacing: -0.01em;
}
.belief .turn { font-size: 17px; color: var(--ink); margin: 0; line-height: 1.6; }

/* Offer box: the €27 has to feel disproportionate without a fabricated anchor. */
.offer {
  max-width: 560px; margin: 40px auto 0; text-align: left;
  background: var(--surface-up); border: 1px solid var(--border);
  border-radius: 16px; padding: 32px;
}
.alt .offer { background: var(--surface-down); }
.offer .gets { list-style: none; padding: 0; margin: 0 0 26px; }
.offer .gets li {
  padding: 11px 0 11px 26px; position: relative;
  border-bottom: 1px solid var(--border-soft); font-size: 15.5px; color: var(--body);
}
.offer .gets li:last-child { border-bottom: 0; }
.offer .gets li::before {
  content: ""; position: absolute; left: 0; top: 19px;
  width: 7px; height: 7px; border-radius: 2px; background: var(--brand);
}
.offer .gets b { color: var(--ink); font-weight: 600; }
.offer .tag { font-size: 13px; color: var(--muted); margin: 0 0 6px; }
.offer .amount { font-size: 56px; font-weight: 600; color: var(--ink); letter-spacing: -0.04em; line-height: 1; }
.offer .cta { margin-top: 26px; }

.compare { max-width: 44ch; margin: 30px auto 0; color: var(--body-2); font-size: 16px; text-align: center; }


/* ---- Show-the-thing assets, added 2026-08-31 ----
   The page argued for the guardrail without ever showing one. These render the
   real artifact — the diagram, the rule, the command, the verdict — as markup
   rather than screenshots, so nothing is fabricated and nothing loads remotely
   (the served CSP is default-src 'none'). Contents are taken verbatim from
   Boundry's own README. */

.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

/* Asymmetric split — breaks the page out of one centred column. */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 40px; text-align: left; align-items: stretch; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }

.panelbox {
  background: var(--surface-up); border: 1px solid var(--border);
  border-radius: 14px; padding: 22px 24px; display: flex; flex-direction: column;
}
.alt .panelbox { background: var(--surface-down); }
.panelbox .cap {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); font-weight: 600; margin-bottom: 16px;
}

/* The architecture diagram, as inline SVG. */
.arch { width: 100%; height: auto; display: block; margin: auto 0; }
.arch .box { fill: var(--surface-down); stroke: var(--border); }
.alt .arch .box { fill: var(--bg); }
.arch .lbl { fill: var(--ink); font-family: var(--sans); font-size: 13px; font-weight: 600; }
.arch .sub { fill: var(--muted); font-family: ui-monospace, monospace; font-size: 10.5px; }
.arch .ok { stroke: var(--good); fill: none; stroke-width: 1.6; }
.arch .no { stroke: var(--bad, #fda29b); fill: none; stroke-width: 1.6; stroke-dasharray: 5 4; }
.arch .oktx { fill: var(--good); font-family: var(--sans); font-size: 11px; font-weight: 600; }
.arch .notx { fill: var(--bad, #fda29b); font-family: var(--sans); font-size: 11px; font-weight: 600; }

/* Code and terminal blocks. */
.code, .term {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.65; white-space: pre; overflow-x: auto;
  margin: 0; color: var(--body-2);
}
.code .k { color: var(--brand-300); }
.code .c { color: var(--muted); font-style: italic; }
.code .s { color: var(--ink); }

.term .cmd { color: var(--ink); }
.term .cmd::before { content: "$ "; color: var(--muted); }
.term .pass { color: var(--good); }
.term .fail { color: var(--bad, #fda29b); }
.term .dim { color: var(--muted); }

/* Before / after — the two numbers, side by side. */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 40px; text-align: left; }
@media (max-width: 720px) { .vs { grid-template-columns: 1fr; } }
.vs > div {
  border: 1px solid var(--border); border-radius: 14px; padding: 26px 24px;
  background: var(--surface-up);
}
.alt .vs > div { background: var(--surface-down); }
.vs .who { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; margin-bottom: 14px; }
.vs .big { font-size: 34px; font-weight: 600; color: var(--ink); letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 10px; }
.vs .big.win { color: var(--good); }
.vs p { font-size: 14.5px; color: var(--body-2); margin: 0; }

/* Post-script — the classic direct-response last word. */
.ps {
  max-width: 46rem; margin: 46px auto 0; text-align: left;
  border-top: 1px solid var(--border); padding-top: 26px;
  color: var(--body-2); font-size: 16px; line-height: 1.65;
}
.ps b { color: var(--ink); }

/* Screenshot frame — real product, shown at scale. */
.shot {
  margin: 34px auto 0; max-width: 1000px;
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  background: var(--surface-down);
}
.shot img { display: block; width: 100%; height: auto; }
.shot .cap {
  font-size: 13px; color: var(--muted); text-align: left;
  padding: 12px 18px; border-top: 1px solid var(--border-soft);
}
.shot .cap b { color: var(--body-2); font-weight: 600; }

/* LikeC4 exports PNGs with a transparent background, so they take the page's
   ground rather than carrying one. Do NOT mat them — an earlier version painted
   a light panel behind them, which is what made them look washed out and flat. */
.shot.light .zoom { background: transparent; padding: 10px; }


/* ---- Promise graphics, 2026-09-02 ----
   The page had drifted into a tool demo. Per ic-offer-stack.md the centrepiece
   is the map, and the staircase has to be named before payment or the offer is
   dishonest. These render both, and neither leads with a product name. */

/* The map — one sheet, two columns. Item 3 of the stack. */
.map {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  max-width: 900px; margin: 40px auto 0; text-align: left;
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  background: var(--surface-up);
}
.alt .map { background: var(--surface-down); }
@media (max-width: 820px) { .map { grid-template-columns: 1fr; } }

.map > div { padding: 26px 28px; }
.map > div + div { border-left: 1px solid var(--border); }
@media (max-width: 820px) { .map > div + div { border-left: 0; border-top: 1px solid var(--border); } }

.map .col {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); font-weight: 600; margin-bottom: 6px;
}
.map .colsub { font-size: 13.5px; color: var(--body-2); margin: 0 0 18px; }

/* Left column: ruled lines, as if filled in by hand. */
.map .ruled { list-style: none; padding: 0; margin: 0; }
.map .ruled li {
  border-bottom: 1px dashed var(--border);
  padding: 13px 0 7px; font-size: 14.5px; color: var(--muted);
}
.map .ruled li:last-child { border-bottom: 0; }

/* Right column: the four drifts, one already closed. */
.map .drift { list-style: none; padding: 0; margin: 0; }
.map .drift li {
  padding: 11px 0 11px 30px; position: relative;
  border-bottom: 1px solid var(--border-soft); font-size: 15px; color: var(--body);
}
.map .drift li:last-child { border-bottom: 0; }
.map .drift b { color: var(--ink); font-weight: 600; }
.map .drift span { color: var(--muted); font-size: 13.5px; display: block; margin-top: 2px; }
.map .drift li::before {
  content: ""; position: absolute; left: 2px; top: 17px;
  width: 12px; height: 12px; border-radius: 3px;
  border: 1.5px solid var(--border);
}
.map .drift li.done::before {
  background: var(--good); border-color: var(--good);
}
.map .drift li.done b { color: var(--good); }

/* The staircase — where step one sits. */
.stairs { max-width: 860px; margin: 40px auto 0; }
.stairs svg { width: 100%; height: auto; display: block; }
.stairs .tread { fill: var(--surface-up); stroke: var(--border); }
.alt .stairs .tread { fill: var(--surface-down); }
.stairs .tread.now { fill: var(--brand-wash); stroke: var(--brand); }
.stairs .n { fill: var(--muted); font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; }
.stairs .n.now { fill: var(--brand-300); }
.stairs .t { fill: var(--body-2); font-family: var(--sans); font-size: 13px; }
.stairs .t.now { fill: var(--ink); font-weight: 600; }
.stairs .dest { fill: var(--ink); font-family: var(--sans); font-size: 15px; font-weight: 600; }
.stairs .rise { stroke: var(--border); stroke-dasharray: 4 4; fill: none; }


/* ---- Conversion structure, 2026-09-02 ----
   From a 2026 study of 2,000 tested pages: named, specific social proof is the
   highest-lift element (+22%) and a sticky bottom CTA is +11%. Both were absent.
   Deliberately NOT taken from that study: its "shorten the page" advice, whose
   population is short-form lead-gen. This page keeps the thesis above the buy
   button on purpose (promise rule 6) — the filter is the measurement. */

/* Proof strip, directly under the hero. Specific claims only; the study's
   finding is that vague claims convert the same as none at all. */
.proofstrip {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0;
  max-width: 940px; margin: 0 auto; padding: 0;
  border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft);
}
.proofstrip div { padding: 20px 26px; text-align: center; flex: 1 1 200px; }
.proofstrip div + div { border-left: 1px solid var(--border-soft); }
@media (max-width: 760px) {
  .proofstrip div { flex-basis: 100%; }
  .proofstrip div + div { border-left: 0; border-top: 1px solid var(--border-soft); }
}
.proofstrip .fig {
  font-size: 26px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; line-height: 1.1;
}
.proofstrip .fig.win { color: var(--good); }
.proofstrip .lbl { font-size: 13px; color: var(--body-2); margin-top: 6px; line-height: 1.45; }

/* Sticky bottom CTA. CSS-only; hidden on very short viewports so it can't eat
   a phone screen. */
.stickycta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: rgba(16, 24, 40, 0.94);
  border-top: 1px solid var(--border);
  padding: 12px 16px;
}
.stickycta .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.stickycta .what { font-size: 14.5px; color: var(--body-2); line-height: 1.35; }
.stickycta .what b { color: var(--ink); font-weight: 600; }
.stickycta .btn { flex: none; }
@media (max-width: 620px) {
  .stickycta .what { font-size: 13px; }
  .stickycta .btn { font-size: 14px; padding: 10px 14px; }
}
@media (max-height: 480px) { .stickycta { display: none; } }
/* Keep the footer clear of the sticky bar. */
footer { padding-bottom: 104px; }

/* Review marker — sections parked for a decision. Draft-only; strip before launch. */
.review {
  background: rgba(254, 200, 75, 0.10);
  border-left: 4px solid var(--warn);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px; margin: 0 auto 26px; max-width: 46rem;
  text-align: left; color: var(--warn); font-size: 14px; font-weight: 600;
}
.review span { display: block; color: var(--body-2); font-weight: 400; margin-top: 4px; }

/* Price contrast, used where a bare figure is enough. */
.pricecmp { text-align: center; margin: 0 0 6px; }
.pricecmp s { color: var(--muted); font-size: 22px; font-weight: 600; }
.pricecmp b { color: var(--good); font-size: 30px; font-weight: 700; margin-left: 10px; letter-spacing: -0.02em; }
.pricenote { text-align: center; font-size: 13.5px; color: var(--body-2); margin: 0 0 18px; }

/* The order box. A real basket with one line in it, so the price is read as a
   thing being bought rather than as a number on a poster. Nothing here posts
   anywhere — the button hands off to Stripe's hosted checkout. */
.checkout {
  max-width: 32rem; margin: 26px auto 0; text-align: left;
  background: var(--surface-up); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
}
.checkout .hd {
  background: var(--surface-down); border-bottom: 1px solid var(--border);
  padding: 11px 20px; font-size: 13.5px; color: var(--body-2); font-weight: 600;
}
.checkout .line {
  display: flex; gap: 18px; align-items: flex-start; justify-content: space-between;
  padding: 18px 20px;
}
.checkout .line .nm { color: var(--ink); font-weight: 600; font-size: 16px; line-height: 1.3; }
.checkout .line .dt { color: var(--muted); font-size: 13.5px; margin-top: 5px; }
.checkout .line .amt { text-align: right; white-space: nowrap; }
.checkout .line .amt s { display: block; color: var(--muted); font-size: 14px; }
.checkout .line .amt b { color: var(--ink); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.checkout .disc {
  display: flex; gap: 18px; align-items: baseline; justify-content: space-between;
  padding: 0 20px 18px; color: var(--body-2); font-size: 14px;
}
.checkout .disc b { color: var(--good); font-weight: 600; white-space: nowrap; }
.checkout code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px;
  color: var(--ink); background: var(--surface-down); border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 7px;
}
.checkout .total {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 14px 20px; border-top: 1px solid var(--border-soft);
  color: var(--body); font-size: 14.5px;
}
.checkout .total b { color: var(--good); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.checkout .pay { padding: 0 20px 8px; }
.checkout .pay .btn { display: block; text-align: center; }
.checkout .fine {
  padding: 12px 20px 18px; margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5;
}
.checkout .fine a { color: var(--body-2); text-decoration: underline; text-underline-offset: 2px; }
.checkout .fine a:hover { color: var(--ink); }
@media (max-width: 460px) {
  .checkout .line { flex-direction: column; gap: 8px; }
  .checkout .line .amt { text-align: left; }
  .checkout .line .amt s { display: inline; margin-right: 8px; }
}

/* One number, on its own, where the page hands over its provenance. */
.stat { margin: 34px auto 0; max-width: 30rem; }
.stat .fig {
  font-size: clamp(64px, 12vw, 104px); font-weight: 700; color: var(--good);
  letter-spacing: -0.045em; line-height: 1;
}
.stat .fig sup { font-size: 0.32em; font-weight: 600; color: var(--body-2); top: -1.55em; margin-left: 4px; }
.stat .cap { color: var(--body-2); font-size: 15px; margin: 12px 0 0; }

/* The three prices, side by side, so the €97 reads against the closed-door one. */
.tiers {
  list-style: none; padding: 0; margin: 30px auto 0; max-width: 34rem; text-align: left;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface-up);
  overflow: hidden;
}
.tiers li {
  display: flex; gap: 18px; align-items: baseline; justify-content: space-between;
  padding: 15px 20px; border-bottom: 1px solid var(--border-soft); color: var(--body);
  font-size: 15.5px;
}
.tiers li:last-child { border-bottom: 0; }
.tiers li b { color: var(--ink); font-size: 21px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }
.tiers li.on { background: var(--surface-down); color: var(--ink); }
.tiers li.on b { color: var(--good); font-size: 26px; font-weight: 700; }
.tiers code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px;
  color: var(--ink); background: var(--bg); border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 8px;
}

/* Click-to-zoom, done with :target so it needs no script (the served CSP is
   default-src 'none'). The close links point back at the section id, which
   un-targets the overlay and leaves the reader where they were. */
.zoom { display: block; position: relative; cursor: zoom-in; }
.zoom img { cursor: zoom-in; }

.zoom .mag {
  position: absolute; right: 14px; bottom: 14px;
  width: 40px; height: 40px; border-radius: 999px;
  background: rgba(16, 24, 40, 0.82); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.zoom .mag svg { width: 18px; height: 18px; stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; }
.zoom:hover .mag { background: var(--brand); border-color: var(--brand); transform: scale(1.06); }
.zoom:hover .mag svg { stroke: #fff; }

.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: center; justify-content: center;
  padding: 28px; background: rgba(8, 12, 22, 0.94);
}
.lightbox:target { display: flex; }
.lightbox .backdrop { position: absolute; inset: 0; cursor: zoom-out; }
.lightbox img {
  position: relative; max-width: 100%; max-height: 90vh; width: auto; height: auto;
  border-radius: 10px; border: 1px solid var(--border);
}
.lightbox .x {
  position: absolute; top: 16px; right: 20px; z-index: 2;
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--surface-up); border: 1px solid var(--border); color: var(--body-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; text-decoration: none;
}
.lightbox .x:hover { color: var(--ink); border-color: var(--muted); }
.lightbox .hint {
  position: absolute; bottom: 20px; left: 0; right: 0; text-align: center;
  color: var(--muted); font-size: 13px;
}