/* TPL-LP-1 landing template (LW-P4 2026-10-26; rework D-122 2026-10-29). Inlined into each generated page by
   incubator/lpgen.py; tool pages and the MVP scaffold reuse the same tokens and classes.
   Direction: calm editorial product page — serif display over a sans body, ink buttons, one brand accent used for
   meaning (focus, links, the selected answer), hairline rules instead of shadow cards, one large product image.
   Measured on 10 product sites (web/templates/lp/_DESIGN-NOTES.md). System fonts only (no font files, no requests).
   Every horizontal edge comes from one token, --gutter, on .wrap: nothing touches the screen edge at any width. */
:root {
  --accent: #2563eb;            /* replaced per brand by lpgen (spec brand.accent) */
  --bg: #fbfaf7;
  --surface: #ffffff;
  --surface-2: #f1efe9;
  --text: #17171a;
  --text-2: #45454d;
  --text-3: #6b6b73;
  --line: rgb(23 23 26 / 0.12);
  --primary: #17171a;
  --on-primary: #ffffff;
  --on-accent: #ffffff;         /* text on the brand accent (how-to step badges) */
  --note-bg: #fff6db;
  --note-text: #5c4300;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, ui-serif, serif;
  /* type scale: mobile 36 / 26 / 18 / 17 px, desktop 64 / 40 / 21 / 17 px (notes §3) */
  --fs-hero: clamp(2.25rem, 1.6rem + 2.9vw, 4rem);
  --fs-h2: clamp(1.625rem, 1.35rem + 1.2vw, 2.5rem);
  --fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.75rem;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px;
  --gutter: clamp(16px, 5vw, 40px);                 /* the one horizontal edge: 16 at 320, 19.5 at 390, 40 from 800 */
  --space-section: clamp(3.5rem, 2.5rem + 5vw, 7.5rem);
  --r-sm: 8px; --r-lg: 12px;
  --w-page: 1120px;             /* content width; the wrap adds the gutter on both sides */
  --w-measure: 62ch;            /* longest prose line */
  /* desktop layout (2026-10-29, Sebastian: "make them also good on desktop"): the hero card has a fixed, readable
     width beside a fluid headline column; the hero photo is cropped to a calm ratio so the first section stays near
     the fold; staged figures sit in the same text column as the sections (one left edge for all running text) */
  --w-offer: 26rem;             /* price card from 960 px (416 px): a priced CTA label fits on one line */
  --ratio-hero-photo: 2 / 1;    /* hero photo crop from 960 px (1120 x 560 at full width) */
  --gap-columns: var(--s-16);   /* title column | text column, hero copy | card */
  --duration-fast: 150ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121214; --surface: #1b1b1f; --surface-2: #202025;
    --text: #f2f2f3; --text-2: #c6c6cc; --text-3: #9d9da6; --line: rgb(255 255 255 / 0.14);
    --primary: #f2f2f3; --on-primary: #121214; --note-bg: #3a2f0e; --note-text: #f6e3a6;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 var(--fs-body)/1.6 var(--font);
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: var(--gutter); top: -100px; background: var(--surface); padding: var(--s-2) var(--s-3); }
.skip:focus { top: var(--s-4); }
.wrap { width: 100%; max-width: calc(var(--w-page) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* test note: visible, plain, never hidden behind a click */
.test-note { background: var(--note-bg); color: var(--note-text); font-size: var(--fs-small); }
.test-note .wrap { padding-block: var(--s-2); }
.test-note strong { font-weight: 650; }

.brand-bar { display: flex; align-items: center; gap: var(--s-3); padding-block: var(--s-5); }
.brand-mark { width: 14px; height: 14px; border-radius: 3px; background: var(--accent); flex: none; }
.brand-name { font-weight: 650; letter-spacing: -0.01em; text-decoration: none; }

/* hero: one strong headline, one short paragraph, then price and the first action (first phone screen) */
.hero { display: grid; gap: var(--s-8); padding-block: var(--s-4) var(--s-12); }
.eyebrow { font-size: var(--fs-small); color: var(--text-3); margin: 0 0 var(--s-3); max-width: 46ch; }
h1 {
  font: 500 var(--fs-hero)/1.05 var(--display); letter-spacing: -0.02em; margin: 0 0 var(--s-5);
  max-width: 17ch; text-wrap: balance;
}
.subhead { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-2); max-width: 46ch; margin: 0; text-wrap: pretty; }
h2 { font: 500 var(--fs-h2)/1.15 var(--display); letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
section { scroll-margin-top: var(--s-6); }

/* offer: price + CTA. On phones it is part of the page flow under a hairline; from 960 px a quiet bordered panel */
.offer { align-self: start; display: grid; gap: var(--s-4); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.offer > h2 { font: 600 var(--fs-body)/1.35 var(--font); letter-spacing: 0; color: var(--text-2); }
.price { display: flex; align-items: baseline; gap: var(--s-2); margin: 0; flex-wrap: wrap; }
.price .amount { font: 500 2.25rem/1 var(--display); letter-spacing: -0.02em; }
.price .period { color: var(--text-3); }
.price-note { font-size: var(--fs-small); color: var(--text-3); margin: calc(-1 * var(--s-2)) 0 0; }

/* CTA: one primary action per page */
.cta { display: grid; gap: var(--s-3); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--s-6);
  border: 1px solid transparent; border-radius: var(--r-sm); background: var(--primary); color: var(--on-primary);
  font: 600 1rem/1.2 var(--font); text-decoration: none; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease),
    transform var(--duration-fast) var(--ease);
}
.btn:hover { color: var(--on-primary); background: color-mix(in srgb, var(--primary) 82%, var(--accent)); }
.btn:active { transform: translateY(1px); }
label { font-size: var(--fs-small); font-weight: 600; }
input[type="email"], select {
  width: 100%; min-height: 48px; padding: 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); font: inherit;
}
input[type="email"]:focus-visible, select:focus-visible { outline-offset: 0; }
.consent { display: grid; grid-template-columns: 22px 1fr; gap: var(--s-2); align-items: start; font-weight: 400; color: var(--text-2); }
.consent input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--accent); }
.fineprint { font-size: var(--fs-small); color: var(--text-3); margin: 0; }

/* the one large product image (spec images[0]); later images use the same figure */
.hero-figure { margin-bottom: var(--s-4); }
.figure { margin: 0; }
.figure-media { border-radius: var(--r-lg); overflow: hidden; }
.figure-photo img { width: 100%; height: auto; }
.figure-illustration .figure-media {
  background: var(--surface-2); display: grid; place-items: center; padding: clamp(var(--s-5), 5vw, var(--s-16));
}
.figure-illustration img { border-radius: var(--r-sm); box-shadow: 0 0 0 1px var(--line); }
.figure-caption { font-size: var(--fs-small); color: var(--text-3); margin: var(--s-3) 0 0; max-width: var(--w-measure); }
.credit { font-size: var(--fs-tiny); color: var(--text-3); margin-top: var(--s-2); }
.credit a { color: inherit; }
.more-figures { display: grid; gap: var(--space-section); margin-top: var(--space-section); }
.thanks-gift { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.thanks-gift a { font-weight: 650; }

/* sections: a hairline inside the content box, the title, the text — no bands, no cards */
.section { margin-top: var(--space-section); }
.section-grid { display: grid; gap: var(--s-5); }
.section-grid::before { content: ""; grid-column: 1 / -1; height: 1px; background: var(--line); margin-bottom: var(--s-3); }
.prose p { margin: 0 0 1em; max-width: var(--w-measure); text-wrap: pretty; }
.prose p:first-child { font-size: var(--fs-lead); line-height: 1.5; }
.prose p:last-child { margin-bottom: 0; }
.how-lead { font-size: var(--fs-lead); line-height: 1.5; margin: 0 0 var(--s-6); max-width: var(--w-measure); text-wrap: pretty; }
.points { list-style: none; padding: 0; margin: 0; display: grid; column-gap: var(--s-8); max-width: 52rem; }
.points li { padding-block: var(--s-3); border-top: 1px solid var(--line); color: var(--text-2); }
.points li:first-child { border-top: 0; padding-top: 0; }

.faq { padding: var(--space-section) 0; }   /* tool pages: a standalone FAQ block */
.faq-list { max-width: var(--w-measure); }
details { border-bottom: 1px solid var(--line); }
summary {
  cursor: pointer; padding: var(--s-4) 0; font-weight: 600; list-style: none; display: flex;
  justify-content: space-between; gap: var(--s-4); min-height: 44px;
}
.section .faq-list details:first-child summary { padding-top: 0; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--text-3); font-weight: 400; }
summary:hover { color: var(--accent); }
details[open] summary::after { content: "\2013"; }
details p { margin: 0 0 var(--s-4); color: var(--text-2); max-width: var(--w-measure); }

footer { margin-top: var(--space-section); padding: var(--s-8) 0 var(--s-12); font-size: var(--fs-small); color: var(--text-3); }
footer .wrap::before { content: ""; display: block; height: 1px; background: var(--line); margin-bottom: var(--s-8); }
.legal-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); list-style: none; padding: 0; margin: 0 0 var(--s-4); }
.legal-links a { display: inline-block; padding-block: var(--s-1); }
.seller { margin: 0; }
.cross-promo { margin: 0 0 var(--s-6); padding-bottom: var(--s-6); border-bottom: 1px solid var(--line); }
.cp-title { margin: 0 0 var(--s-2); font-weight: 600; color: var(--text-2); }
.cp-list { list-style: none; padding: 0; margin: 0 0 var(--s-2); display: grid; gap: var(--s-2); }
.cp-list a { font-weight: 600; }
.cp-line { color: var(--text-3); }
.cp-disclosure { margin: 0; }

/* legal + thanks pages */
.doc { max-width: var(--w-measure); padding: var(--s-8) 0 var(--s-12); }
.doc h1 { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); max-width: none; }
.doc h2 { font-size: 1.375rem; margin-top: var(--s-8); margin-bottom: var(--s-3); }
.doc h3 { font-size: 1.0625rem; margin: var(--s-6) 0 var(--s-2); }
mark.check { background: var(--note-bg); color: var(--note-text); padding: 0 4px; border-radius: 3px; font-size: 0.85em; font-weight: 650; }
.missing { background: #fde2e1; color: #7a1414; padding: 0 4px; border-radius: 3px; }

/* funnel CTA (2026-10-28): one question per step, each answer a full-width counted link (no script) */
.funnel { gap: var(--s-4); }
.funnel-progress { font-size: var(--fs-small); color: var(--text-3); margin: 0; }
.funnel-q { font: 500 1.375rem/1.25 var(--display); letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
.doc .funnel-q { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); margin: 0; }
.funnel-options { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.funnel-opt {
  width: 100%; min-height: 52px; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4);
  background: var(--surface); color: var(--text); border-color: var(--line); text-align: left; line-height: 1.3;
  font-weight: 550;
}
.funnel-opt::after { content: "\2192"; color: var(--text-3); flex: none; transition: transform var(--duration-fast) var(--ease); }
.funnel-opt:hover { color: var(--text); background: var(--surface); border-color: var(--accent); }
.funnel-opt:hover::after { color: var(--accent); transform: translateX(2px); }
.funnel-opt:active { background: var(--surface-2); }
.funnel-page { display: grid; gap: var(--s-6); max-width: 40rem; padding-block: var(--s-6) var(--s-12); }
.funnel-page h1 { margin: 0; }
.funnel-page .price, .funnel-page .price-note { margin: 0; }
.funnel-lead { margin: 0; color: var(--text-2); font-size: var(--fs-lead); line-height: 1.5; }
.funnel-nav { margin: 0; font-size: var(--fs-small); }
.funnel-back { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; color: var(--text-2); }

/* full-screen funnel (2026-10-29, Sebastian: "not in a pop up ... a proper fullscreen funnel"): the landing page has
   one start button; every question is its own page filling the viewport: progress, question, answers, back, quiet footer */
.btn-start { width: 100%; min-height: 56px; justify-content: space-between; gap: var(--s-3); font-size: 1.0625rem; }
.btn-start::after { content: "\2192"; transition: transform var(--duration-fast) var(--ease); }
.btn-start:hover::after { transform: translateX(3px); }
.funnel-screen { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.funnel-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); padding-block: var(--s-5); }
.funnel-progress-wrap { display: grid; gap: var(--s-2); justify-items: end; flex: 0 1 11rem; min-width: 0; }
.funnel-meter { position: relative; display: block; width: 100%; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.funnel-meter::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--progress, 0%); background: var(--accent); }
.funnel-main { flex: 1 0 auto; display: grid; align-content: center; }
.funnel-screen .funnel-page { width: 100%; max-width: 38rem; margin-inline: auto; padding-block: var(--s-6) var(--s-12); }
.funnel-screen .funnel-q, .funnel-screen .funnel-final h1 {
  font: 500 clamp(1.75rem, 1.35rem + 1.9vw, 2.75rem)/1.15 var(--display); letter-spacing: -0.015em; max-width: none;
}
.funnel-screen .funnel-options { gap: var(--s-3); }
.funnel-screen .funnel-opt { min-height: 60px; padding: var(--s-4) var(--s-5); font-size: 1.0625rem; }
.funnel-screen footer { margin-top: 0; padding: var(--s-4) 0 var(--s-6); font-size: var(--fs-tiny); }
.funnel-screen footer .wrap::before { margin-bottom: var(--s-4); }
.funnel-screen .legal-links { margin-bottom: var(--s-2); }

/* function-first block (S34): the job comes first, right under the headline, before the offer */
.fn { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.fn h2 { font-size: 1.5rem; margin-bottom: var(--s-3); }
.fn-intro { color: var(--text-2); margin: 0 0 var(--s-4); max-width: var(--w-measure); }
.fn-label { display: block; font-size: var(--fs-small); color: var(--text-3); margin: 0 0 var(--s-2); }
.fn .fineprint { margin-top: var(--s-3); }
.fn-sources { margin-top: var(--s-4); font-size: var(--fs-small); }
.fn-sources ul { margin: 0; padding-left: 1.1em; }
.tool { display: grid; gap: var(--s-3); }
.tool-in, .tool-out { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s-4); }
.tool-out { border-color: var(--accent); }
.kv { margin: 0; display: grid; gap: var(--s-2); }
.kv div { display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.kv dt { color: var(--text-2); }
.kv dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.kv-out dd { font: 500 1.25rem/1.2 var(--display); }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.compare { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.compare caption { caption-side: bottom; text-align: left; padding: var(--s-2) var(--s-3); color: var(--text-3); }
.compare th, .compare td { text-align: left; vertical-align: top; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); }
.compare thead th { color: var(--text-3); font-weight: 600; }
.compare thead th:nth-child(2) { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: var(--s-4); }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2.25rem 1fr; column-gap: var(--s-3); }
.steps li::before { content: counter(s); grid-row: span 2; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-weight: 650; }
.steps h3 { font-size: 1.0625rem; margin: 0.2rem 0 var(--s-2); }
.steps p { margin: 0; color: var(--text-2); }
.flow { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-6); }
.flow li { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s-3) var(--s-4); }
.flow li + li::before { content: "\2193"; position: absolute; top: calc(-1 * var(--s-6)); left: var(--s-4); line-height: var(--s-6); color: var(--accent); font-weight: 700; }
.flow li:last-child { border-color: var(--accent); }
.flow strong { margin-right: 0.25em; }

@media (min-width: 640px) {
  .tool { grid-template-columns: 1fr 1fr; }
  .points { grid-template-columns: 1fr 1fr; }
  .points li:nth-child(2) { border-top: 0; padding-top: 0; }
}
/* phones (benchmark 2026-10-29 rank 8): price and the CTA (or the funnel start button) reach the first screen of a
   390 x 844 phone */
@media (max-width: 959px) {
  .brand-bar { padding-block: var(--s-4); }
  .hero { gap: var(--s-6); padding-top: var(--s-2); }
  h1 { margin-bottom: var(--s-4); }
  .subhead { font-size: 1.0625rem; }
  .offer { gap: var(--s-3); padding-top: var(--s-5); }
  .price .amount { font-size: 2rem; }
  .price-note { margin-top: calc(-1 * var(--s-1)); }
  .funnel { gap: var(--s-3); }
  .funnel-q { font-size: 1.25rem; }
}
@media (min-width: 960px) {
  .brand-bar { padding-block: var(--s-8); }
  /* hero: fluid headline column + a fixed-width card whose bottom lines up with the subhead (no floating box over
     empty space); the card's button is in the first desktop screen at 768 px viewport height */
  .hero {
    grid-template-columns: minmax(0, 1fr) var(--w-offer); column-gap: var(--gap-columns); align-items: end;
    padding-block: var(--s-6) var(--s-12);
  }
  .offer {
    align-self: end; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
    padding: var(--s-8); gap: var(--s-5);
  }
  .hero h1 { max-width: 20ch; }   /* the wider headline column: 2-3 lines instead of 4 */
  .hero-figure .figure-photo img { aspect-ratio: var(--ratio-hero-photo); object-fit: cover; }
  .section-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--gap-columns); row-gap: var(--s-6); }
  .section-grid > :not(h2) { grid-column: 2; }
  .section .faq-list { max-width: none; }   /* the question rows end on the same edge as the lists above */
  .section .faq-list details:first-child summary { padding-top: var(--s-1); }
  /* later figures: the same two columns as the sections (caption left, image in the text column), so an
     illustration is staged at a readable size instead of a 1120 px wide panel */
  .more-figures .figure {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--gap-columns);
    align-items: start;
  }
  .more-figures .figure::before { content: ""; grid-column: 1 / -1; height: 1px; background: var(--line); margin-bottom: var(--s-8); }
  .more-figures .figure-media { grid-column: 2; grid-row: 2 / span 2; }
  .more-figures .figure-caption { grid-column: 1; grid-row: 2; margin: 0; font-size: var(--fs-body); color: var(--text-2); }
  .more-figures .credit { grid-column: 1; grid-row: 3; }
  .more-figures .figure-illustration .figure-media { padding: var(--s-8); }
  footer .wrap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: var(--s-8); }
  footer .wrap::before { flex: 0 0 100%; }
  footer .cross-promo { flex: 0 0 100%; }
  .legal-links { margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.brand-logo { display: block; height: 22px; width: auto; }