/* sellmyproduct.ai — landing page (EN /, DE /de/) and 404 pages.
   Redesign 2026-10-21 (docs/planning/redesign-2026-10-21/DESIGN-BRIEF.md), restyled 2026-10-23 after the owner's
   mockup (shared/sellmyproduct-example.png): warm off-white page, deep green ink and panels, one lime highlight,
   heavy tight headlines, large faint step numerals, square-cornered ink buttons. No css imports, no webfonts, no
   external refs (locally installed Inter is used when present). The action colour (--accent-strong) fills only
   buttons that lead to the contact form; lime (--lime) marks status chips and the one button on dark bands. */
/* x-build:2026-10-23T212746Z-aee570e5dd67 — stamped from the same token as the html, so a stylesheet
   response whose bytes lack the live build id proves a mixed or stale revision. */

/* ── 1. tokens ──────────────────────────────────────────────────────── */
/* :root is the dark peer; the two light blocks below carry identical light values (css_contrast.py reads all three). */
:root {
  color-scheme: light dark;

  --bg: #0b1512;
  --surface: #101d19;
  --surface-raised: #13221e;
  --surface-tint: #172a24;
  --border-subtle: #22352f;
  --border: #364a43;
  --input-border: #6d827a;
  --text: #f1f4ef;
  --text-secondary: #c8d4ce;
  --text-muted: #a4b3ac;
  --text-faint: #97a79f;
  --accent: #8ed8b2;
  --hl: #8ed8b2;
  --accent-strong: #d9f279;
  --accent-hover: #eef8ad;
  --accent-ink: #0b1512;
  --signal-pos: #5fd19a;
  --signal-pos-bg: #173a2b;
  --signal-neg: #ec8b5d;
  --focus: #d9f279;
  --ghost: rgba(255, 255, 255, 0.07);
  --header-bg: rgba(11, 21, 18, 0.88);
  --band-bg: #133128;
  --band-text: #f6f8f2;
  --band-muted: #c5d4cd;
  --lime: #d9f279;
  --lime-ink: #0f241f;
  --num: #4b6359;
  --shadow-card: 0 0 0 1px #22352f;
  --shadow-lift: 0 0 0 1px #364a43;
  --shadow-btn: none;
  --band-btn-hover: #eef8ad;

  /* type: system stack only (same family as the story player) */
  --display: "Inter Tight", "Inter Display", Inter, "SF Pro Display", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --t-hero: clamp(2.5rem, 1.5rem + 3.1vw, 4rem);
  --t-page: clamp(2rem, 1.5rem + 2.4vw, 3rem);
  --t-h2: clamp(1.875rem, 1.35rem + 2.2vw, 2.875rem);
  --t-h3: clamp(1.25rem, 1.15rem + .4vw, 1.375rem);
  --t-lede: clamp(1.125rem, 1.05rem + .3vw, 1.1875rem);
  --t-price: clamp(2.25rem, 1.7rem + 2vw, 3.25rem);
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;
  --t-read: 1rem;
  --t-caption: 0.875rem;
  --w-regular: 400;
  --w-medium: 500;
  --w-strong: 600;
  --w-display: 800;
  --measure: 62ch;

  /* shape */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;
  --r-btn: 8px;

  /* space & layout (4px base) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --max-w: 75rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(3.5rem, 7vw, 6rem);
  --tap: 44px;
  --header-h: 4rem;
  --scroll-offset: 5rem;

  --dur-fast: 140ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* Breakpoints: 37.5rem phone (dock) · 48rem tablet · 56rem steps/tiers 3-up · 64rem two-column hero */
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f7f7f2;
    --surface: #ffffff;
    --surface-raised: #efefe8;
    --surface-tint: #e8efe9;
    --border-subtle: #e1e2d9;
    --border: #cdd0c5;
    --input-border: #7a8079;
    --text: #132b29;
    --text-secondary: #2d3a36;
    --text-muted: #4f5b56;
    --text-faint: #56625d;
    --accent: #116a55;
    --hl: #147d64;
    --accent-strong: #132b29;
    --accent-hover: #21403a;
    --accent-ink: #ffffff;
    --signal-pos: #147d64;
    --signal-pos-bg: #dfeee4;
    --signal-neg: #a9481a;
    --focus: #147d64;
    --ghost: rgba(13, 26, 23, 0.05);
    --header-bg: rgba(247, 247, 242, 0.9);
    --band-bg: #132b29;
    --band-text: #ffffff;
    --band-muted: #c5d4cd;
    --lime: #d9f279;
    --lime-ink: #0f241f;
    --num: #b7c7bf;
    --shadow-card: none;
    --shadow-lift: 0 1px 2px rgba(13, 26, 23, .05), 0 16px 36px -16px rgba(13, 42, 36, .28);
    --shadow-btn: 0 1px 2px rgba(13, 26, 23, .14);
    --band-btn-hover: #eef8ad;
  }
}

/* Forced light (previews, proofs). Same values as the media block; keep the two in sync. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f7f2;
  --surface: #ffffff;
  --surface-raised: #efefe8;
  --surface-tint: #e8efe9;
  --border-subtle: #e1e2d9;
  --border: #cdd0c5;
  --input-border: #7a8079;
  --text: #132b29;
  --text-secondary: #2d3a36;
  --text-muted: #4f5b56;
  --text-faint: #56625d;
  --accent: #116a55;
  --hl: #147d64;
  --accent-strong: #132b29;
  --accent-hover: #21403a;
  --accent-ink: #ffffff;
  --signal-pos: #147d64;
  --signal-pos-bg: #dfeee4;
  --signal-neg: #a9481a;
  --focus: #147d64;
  --ghost: rgba(13, 26, 23, 0.05);
  --header-bg: rgba(247, 247, 242, 0.9);
  --band-bg: #132b29;
  --band-text: #ffffff;
  --band-muted: #c5d4cd;
  --lime: #d9f279;
  --lime-ink: #0f241f;
  --num: #b7c7bf;
  --shadow-card: none;
  --shadow-lift: 0 1px 2px rgba(13, 26, 23, .05), 0 16px 36px -16px rgba(13, 42, 36, .28);
  --shadow-btn: 0 1px 2px rgba(13, 26, 23, .14);
  --band-btn-hover: #eef8ad;
}
:root[data-theme="dark"] { color-scheme: dark; }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  :root, :root[data-theme] {
    --bg: #fff; --surface: #fff; --surface-raised: #fff; --surface-tint: #fff; --band-bg: #fff; --band-text: #111; --band-muted: #333;
    --text: #111; --text-secondary: #333; --text-muted: #555; --text-faint: #555;
    --border: #ccc; --border-subtle: #ddd; --accent: #000; --shadow-card: none; --shadow-lift: none; --shadow-btn: none;
  }
}

/* ── 2. base ────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--scroll-offset)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:var(--t-body);line-height:1.6;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter)}
p{margin:0 0 var(--s-4)}p:last-child{margin-bottom:0}
p,li,dd,summary,figcaption{text-wrap:pretty}
a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--text)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm)}
.btn:focus-visible{border-radius:var(--r-btn)}
.skip{position:absolute;left:-9999px;top:0;z-index:20;background:var(--accent-strong);color:var(--accent-ink);padding:.6rem 1rem;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}
.skip:hover{color:var(--accent-ink)}
:lang(de) h1,:lang(de) h2,:lang(de) h3{hyphens:manual;overflow-wrap:break-word}
h1,h2,h3{color:var(--text);text-wrap:balance}
h1{margin:0 0 var(--s-5);font-family:var(--display);font-size:var(--t-hero);font-weight:var(--w-display);letter-spacing:-.038em;line-height:1.02}
h2{margin:0 0 var(--s-4);font-family:var(--display);font-size:var(--t-h2);font-weight:var(--w-display);letter-spacing:-.032em;line-height:1.08}
h3{margin:0 0 var(--s-2);font-family:var(--display);font-size:var(--t-h3);font-weight:700;letter-spacing:-.018em;line-height:1.25}
.hl{color:var(--hl)}
.muted{color:var(--text-secondary)}
.muted strong{color:var(--text)}
.note{font-size:var(--t-small);color:var(--text-secondary);max-width:52ch}

/* ── 3. masthead ────────────────────────────────────────────────────── */
.masthead{position:sticky;top:0;z-index:10;background:var(--header-bg);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--border-subtle)}
.masthead .wrap{display:flex;align-items:center;gap:var(--s-3);min-height:var(--header-h)}
.brand{display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--tap);font-family:var(--display);font-weight:var(--w-display);font-size:1.125rem;letter-spacing:-.03em;color:var(--text);text-decoration:none;white-space:nowrap}
.brand svg{width:22px;height:22px}
.brand:hover{color:var(--text)}
.nav{margin-left:auto;display:flex;align-items:center;gap:var(--s-1);flex-wrap:nowrap;min-width:0}
.nav a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 .7rem;white-space:nowrap;border-radius:var(--r-pill);color:var(--text-secondary);text-decoration:none;font-size:var(--t-small);font-weight:var(--w-medium);transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.nav a:hover{background:var(--ghost);color:var(--text)}
.nav a.sec,.nav a.lang{border-radius:var(--r-btn);color:var(--text)}
.nav .btn{border-radius:var(--r-btn);margin-left:var(--s-2);min-height:var(--tap);padding:0 1.1rem;gap:0;font-size:var(--t-small);white-space:nowrap}
.nav .btn-primary,.nav .btn-primary:hover{color:var(--accent-ink)}
.nav .btn-primary:hover{background:var(--accent-hover)}
.pill-long{display:none}
@media (min-width:52rem){.pill-long{display:inline}.pill-short{display:none}}
.lang-short{display:none}
/* below 60rem only the key section link stays (.sec-keep); at 46rem the section links and the long language name go
   (they no longer fit beside the button), then the phone sizing. On phones the key link takes the button's place
   once the dock carries the button (.dock-on, set by the dock script; no JS = unchanged header) and below ~356px */
@media (max-width:60rem){.nav .sec:not(.sec-keep){display:none}}
@media (max-width:46rem){.nav .sec{display:none}.lang-long{display:none}.lang-short{display:inline}.nav .lang{padding:0 .45rem}}
@media (max-width:37.5rem){.masthead .wrap{gap:var(--s-2)}.brand{font-size:1rem;gap:.45rem}.nav .btn{padding:0 .85rem;margin-left:0;font-size:.875rem;min-height:var(--tap)}.dock-on .nav .btn{display:none}.dock-on .nav .sec-keep{display:inline-flex;padding:0 .45rem}}
@media (max-width:25rem){.brand{font-size:.9375rem;gap:.35rem}.brand svg{width:20px;height:20px}.nav .lang{padding:0 .3rem}.nav .btn{padding:0 .65rem;font-size:.8125rem}}
/* below ~356px the button no longer fits beside the brand; the hero button sits right under the masthead */
@media (max-width:22.25rem){.nav .btn{display:none}.nav .sec-keep{display:inline-flex;padding:0 .45rem}}

/* ── 4. buttons ─────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:.75rem 1.5rem;border-radius:var(--r-btn);border:1px solid transparent;font:inherit;font-size:1.0625rem;font-weight:var(--w-strong);line-height:1.2;text-align:center;text-wrap:balance;text-decoration:none;cursor:pointer;transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.btn-primary{background:var(--accent-strong);color:var(--accent-ink);box-shadow:var(--shadow-btn)}
.btn-primary:hover{background:var(--accent-hover);color:var(--accent-ink);transform:translateY(-1px)}
.btn-primary:active{transform:none}
.btn-lg{min-height:3.5rem;padding:.9rem 1.85rem;font-size:1.125rem}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border)}
.btn-ghost:hover{background:var(--ghost);color:var(--text)}
.btn-on-dark{background:var(--lime);color:var(--lime-ink);box-shadow:none}
.btn-on-dark:hover{background:var(--band-btn-hover);color:var(--lime-ink);transform:translateY(-1px)}
.closing .btn-on-dark:focus-visible,.tier--featured .btn:focus-visible{outline-color:var(--lime)}
.textlink{font-weight:var(--w-strong);color:var(--text);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.25em;gap:.35rem}
.textlink:hover{color:var(--accent)}
.arrow{display:inline-block;transition:transform var(--dur-fast) var(--ease)}
.textlink:hover .arrow{transform:translateX(3px)}

/* reassurance checklist: three plain facts under every primary button */
.assure{list-style:none;margin:var(--s-4) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);font-size:var(--t-small);color:var(--text-secondary)}
.assure li{position:relative;padding-left:1.7rem;line-height:1.5}
.assure li::before{content:"";position:absolute;left:0;top:.1em;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--signal-pos-bg)}
.assure li::after{content:"";position:absolute;left:.47rem;top:calc(.1em + .27rem);width:.3rem;height:.55rem;border:solid var(--signal-pos);border-width:0 2px 2px 0;transform:rotate(45deg)}
.assure--stack{flex-direction:column;gap:var(--s-3)}

/* ── 5. sections ────────────────────────────────────────────────────── */
section{padding:var(--section) 0}
.alt{background:var(--surface);border-block:1px solid var(--border-subtle)}
.section-head{margin-bottom:clamp(2rem,4vw,3rem);max-width:44rem}
.section-head h2{margin-bottom:0}
.section-head p{margin:var(--s-3) 0 0;color:var(--text-secondary)}
@media (min-width:56rem){.head-split{max-width:none;display:grid;grid-template-columns:1.2fr 1fr;column-gap:var(--s-7);align-items:end}.head-split p{margin:0;text-wrap:pretty;max-width:34ch;justify-self:end}}
@media (min-width:56rem){.split{display:grid;grid-template-columns:minmax(16rem,1fr) 2fr;column-gap:clamp(2rem,5vw,4.5rem);align-items:start}.split .section-head{margin-bottom:0;position:sticky;top:calc(var(--header-h) + var(--s-6))}}

/* hero */
.hero{padding:clamp(2rem,4vw,3.5rem) 0 clamp(3rem,7vw,6rem)}
.hero-grid{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center}
@media (min-width:64rem){.hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.hero-copy{max-width:40rem}
.eyebrow{display:block;margin:0 0 var(--s-5);padding:0;color:var(--text-secondary);font-size:var(--t-caption);font-weight:var(--w-strong);letter-spacing:.12em;text-transform:uppercase;line-height:1.5}
.chip{display:inline-block;padding:.2rem .6rem;border-radius:6px;background:var(--lime);color:var(--lime-ink);font-size:var(--t-caption);font-weight:var(--w-strong);letter-spacing:0;text-transform:none;line-height:1.5;white-space:nowrap}
@media (max-width:37.5rem){.eyebrow{font-size:.75rem;letter-spacing:.08em;text-wrap:balance}}
.hero h1{max-width:17ch;text-wrap:balance}
.lede{margin:0 0 var(--s-6);max-width:36rem;font-size:var(--t-lede);line-height:1.5;color:var(--text-secondary)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5)}
@media (max-width:26rem){:lang(de) .btn-lg,:lang(de) .btn-send,:lang(de) .start-here .btn{font-size:.9375rem;padding-inline:.625rem;letter-spacing:-.01em}:lang(de) .start-here{padding-inline:1rem}}
@media (max-width:37.5rem){.btn-lg{font-size:1.0625rem;padding-inline:1rem}.cta-row{flex-direction:column;align-items:stretch;text-align:center}.cta-row .btn{width:100%}.cta-row .textlink{min-height:var(--tap);display:inline-flex;align-items:center;justify-content:center}.hero .assure{flex-direction:column;gap:var(--s-2)}}
/* hero story player (docs/growth/motion): on a tinted stage beside the copy, under it on phones */
.hero-story{container-type:inline-size;min-width:0;padding:clamp(1rem,3vw,2.25rem);background-color:var(--band-bg);background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:32px 32px;border-radius:var(--r-md)}
.hero-story .story-note,.hero-story .story-note a{color:var(--band-muted)}
.hero-story .story-note a:hover{color:var(--band-text)}
.hero-story a:focus-visible{outline-color:var(--lime)}
.hero-story iframe{display:block;width:100%;height:calc(56.25cqw + 210px);border:0;background:var(--surface);border-radius:var(--r-md)}
@media (max-width:63.99rem){.hero-story{max-width:34rem}}
.story-note{margin:var(--s-3) 0 0;font-size:var(--t-caption);color:var(--text-muted);text-align:center}
.story-note a{display:flex;width:fit-content;margin:0 auto;align-items:center;min-height:var(--tap);color:var(--text-secondary);white-space:nowrap}
/* example report (home hero): what the free snapshot looks like, for a made-up business; the finding titles are the
   snapshot tool's own fixed texts (m2/agents/snapshot) and the score is their rubric sum, nothing invented */
.report{margin:0;min-width:0;padding:clamp(.6rem,1.6vw,1.1rem);border-radius:calc(var(--r-lg) + 4px);background:var(--surface-tint);border:1px solid var(--border-subtle)}
.report-doc{background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--r-md);box-shadow:var(--shadow-lift);padding:clamp(1.25rem,3vw,2rem)}
.report-tag{margin:0 0 var(--s-4);font-size:var(--t-caption);font-weight:var(--w-strong);color:var(--text-muted)}
.report-score{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);margin:0 0 var(--s-5);padding-bottom:var(--s-5);border-bottom:1px solid var(--border-subtle)}
.report-score span{font-size:var(--t-small);font-weight:var(--w-strong);color:var(--text-secondary)}
.report-score b{font-family:var(--display);font-size:var(--t-price);font-weight:var(--w-display);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;color:var(--text)}
.report-score small{flex-basis:100%;font-size:var(--t-caption);color:var(--text-muted)}
.report-bar{flex:1 1 8rem;height:.6rem;border-radius:var(--r-pill);background:var(--border-subtle);overflow:hidden}
.report-bar i{display:block;height:100%;width:55%;border-radius:inherit;background:var(--text-secondary)}
.report-h{margin:0 0 var(--s-3);font-size:var(--t-small);font-weight:var(--w-strong);color:var(--text)}
.report ol{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3);counter-reset:f}
.report li{position:relative;padding:.8rem 1rem .8rem 3.1rem;border:1px solid var(--border-subtle);border-radius:var(--r-sm);background:var(--surface-raised);font-weight:var(--w-medium);color:var(--text);line-height:1.4}
.report li::before{counter-increment:f;content:counter(f);content:counter(f) / "";position:absolute;left:.85rem;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--surface-tint);color:var(--accent);font-weight:var(--w-display);font-size:var(--t-caption)}
/* one quiet line under the hero checklist that routes online shops to their own page */
@media (max-width:63.99rem){.report{max-width:34rem}}
.shop-line{margin:var(--s-5) 0 0;font-size:var(--t-small)}
.shop-line a{display:inline-block;padding:.7rem 1.1rem;border:1px solid var(--border);border-radius:var(--r-btn);line-height:1.45;color:var(--text);font-weight:var(--w-medium);text-decoration:none;text-wrap:balance}
.shop-line a:hover{background:var(--ghost);color:var(--text)}
.shop-line a:hover .arrow{transform:translateX(3px)}
/* the free snapshot, as the offer box in the hero */
.hook{padding:clamp(1.125rem,3vw,1.75rem);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-lift)}
.hook-tag{display:inline-block;margin:0 0 var(--s-3);padding:.25rem .65rem;border-radius:6px;background:var(--lime);color:var(--lime-ink);font-size:var(--t-small);font-weight:var(--w-strong);line-height:1.4}
.hook-tag .price0{font-variant-numeric:tabular-nums;font-weight:var(--w-display)}
.hook-title{margin:0 0 var(--s-4);font-family:var(--display);font-size:var(--t-h3);font-weight:var(--w-display);line-height:1.2;letter-spacing:-.025em;color:var(--text);text-wrap:balance}
.lede + .hook{margin-top:calc(var(--s-5) - var(--s-6))}
.hook .assure{margin:0 0 var(--s-5)}
.hook-fine{margin:var(--s-3) 0 0;font-size:var(--t-read);color:var(--text-secondary)}
@media (min-width:64rem){.hero-grid:has(.hook){align-items:start}}
.calc-ex{margin:0 0 var(--s-4);color:var(--text-secondary)}
.calc:not(.nojs) .calc-ex,.calc.nojs .calc-in,.calc.nojs .js{display:none}
.calc-in{display:grid;grid-template-columns:1fr 8.5rem;gap:var(--s-3) var(--s-4);align-items:center;margin:0 0 var(--s-4)}
.calc-in label{font-size:var(--t-small);font-weight:var(--w-strong);line-height:1.35;color:var(--text)}
.calc-in label .hint{display:block;margin:var(--s-1) 0 0;font-weight:var(--w-regular)}
#c-bad{color:var(--signal-neg);font-weight:var(--w-strong)}
.calc-in input[type=text]{min-height:var(--tap);text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:30rem){.calc-in{grid-template-columns:1fr 6.5rem;gap:var(--s-3)}}
.calc-out{margin:0 0 var(--s-4);padding:var(--s-4);border-radius:var(--r-md);background:var(--surface-tint);color:var(--text-secondary)}
.calc-out p{margin:0}
.calc-out p+p{margin-top:var(--s-2)}
.calc-big{font-size:1.25rem;color:var(--text)}
.calc-big b{font-weight:var(--w-display);font-variant-numeric:tabular-nums;white-space:nowrap}
.calc-big b.neg{color:var(--signal-neg)}
.calc .hook-fine{margin:0 0 var(--s-5)}
.calc-share{margin:0 0 var(--s-4);font-size:var(--t-small);color:var(--text-secondary)}
.calc-share button{padding:0;border:0;background:none;font:inherit;font-weight:var(--w-strong);cursor:pointer;min-height:var(--tap)}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (min-width:64rem){.hero-grid:has(.calc) .hero-story{position:sticky;top:calc(var(--header-h) + var(--s-5))}}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-5);counter-reset:s;position:relative}
.steps li{position:relative;padding:var(--s-5) 0 0 5.5rem;border-top:1px solid var(--border-subtle);min-height:5rem}
.steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);content:counter(s,decimal-leading-zero) / "";position:absolute;left:0;top:calc(var(--s-5) - .1rem);font-family:var(--display);font-size:3.5rem;line-height:1;font-weight:500;letter-spacing:-.04em;color:var(--num);font-variant-numeric:tabular-nums}
.steps h3{margin-top:.3rem}
.steps p{color:var(--text-secondary);font-size:var(--t-read);margin:0}
@media (min-width:56rem){.steps{grid-template-columns:repeat(3,1fr);column-gap:0}.steps li{padding-right:var(--s-5)}.steps:not(.steps--six) li{border-top:0;padding-top:0;padding-left:calc(5.5rem + var(--s-5))}.steps:not(.steps--six) li::before{top:-.1rem;left:var(--s-5)}.steps:not(.steps--six) li+li{border-left:1px solid var(--border-subtle)}.steps:not(.steps--six) li:first-child{padding-left:5.5rem}.steps:not(.steps--six) li:first-child::before{left:0}.steps--six{grid-template-columns:repeat(2,1fr);column-gap:var(--s-6)}}

/* contact + form */
.contact-grid{display:grid;gap:clamp(2rem,4vw,3rem);align-items:start}
@media (min-width:60rem){.contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(3rem,6vw,5rem)}.contact-intro{position:sticky;top:calc(var(--header-h) + var(--s-6))}}
.contact-intro h2{margin-bottom:var(--s-3)}
.contact-intro .muted{font-size:var(--t-lede);line-height:1.5}
/* phones: a button that jumps to #contact lands on the heading with the form right under it; the signature follows the form */
@media (max-width:37.5rem){.contact-grid{gap:0}.contact-intro{display:contents}.form-card{order:2;margin-top:var(--s-5)}.contact-intro .sig{order:3;margin-top:var(--s-6)}}
.sig{display:flex;align-items:center;gap:var(--s-4);margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--border-subtle)}
.sig p{margin:0;font-size:var(--t-small);color:var(--text-secondary)}
.sig b{display:block;color:var(--text);font-weight:var(--w-strong)}
.mono{flex:none;display:grid;place-items:center;width:3.5rem;height:3.5rem;border-radius:50%;background:var(--text);color:var(--bg);font-weight:var(--w-display);font-size:1.0625rem;letter-spacing:.02em}
.form-card{background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--r-md);box-shadow:var(--shadow-lift);padding:clamp(1.25rem,3.5vw,2.25rem)}
.field{margin-bottom:var(--s-5)}
.field label{display:block;font-size:var(--t-small);font-weight:var(--w-strong);margin-bottom:var(--s-1);color:var(--text)}
.field .opt{color:var(--text-muted);font-weight:var(--w-regular)}
.hint{font-size:.875rem;line-height:1.5;color:var(--text-muted);margin:0 0 var(--s-2)}
input[type=text],input[type=email],select,textarea{width:100%;min-height:3rem;padding:.7rem .9rem;font:inherit;font-size:1rem;line-height:1.4;color:var(--text);background:var(--surface);border:1px solid var(--input-border);border-radius:var(--r-sm);transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
input[type=text]:hover,input[type=email]:hover,select:hover,textarea:hover{border-color:var(--text-muted)}
input[type=text]:focus,input[type=email]:focus,select:focus,textarea:focus{border-color:var(--focus);outline:3px solid var(--focus);outline-offset:2px}
.calc-in input[aria-invalid=true],.calc-in input[aria-invalid=true]:focus{border-color:var(--signal-neg);border-width:2px}
/* select: own chevron (two token-coloured gradient triangles), same height and padding as the text fields */
select{-webkit-appearance:none;appearance:none;padding-right:2.5rem;cursor:pointer;background-image:linear-gradient(45deg,transparent calc(50% - 1px),var(--text-secondary) calc(50% - 1px),var(--text-secondary) calc(50% + 1px),transparent calc(50% + 1px)),linear-gradient(135deg,transparent calc(50% - 1px),var(--text-secondary) calc(50% - 1px),var(--text-secondary) calc(50% + 1px),transparent calc(50% + 1px));background-position:calc(100% - 1rem - 6px) 50%,calc(100% - 1rem) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
textarea{min-height:5.5rem;resize:vertical}
::placeholder{color:var(--text-faint);opacity:1}
.field.has-error input,.field.has-error textarea,.field.has-error select{border-color:var(--signal-neg);border-width:2px}
.err{margin:var(--s-1) 0 0;font-size:var(--t-small);color:var(--signal-neg);font-weight:var(--w-strong)}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.btn-send{width:100%;margin-top:var(--s-2)}
.form-note{font-size:.875rem;color:var(--text-muted);margin:var(--s-3) 0 0;line-height:1.5}
.form-note:first-of-type{margin-top:var(--s-4)}

/* prices */
.start-here{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-4) var(--s-6);margin:0 0 var(--s-6);padding:clamp(1.25rem,3vw,1.75rem) clamp(1.25rem,3vw,2rem);background:var(--surface-tint);border:1px solid var(--border-subtle);border-radius:var(--r-md)}
.start-here p{margin:0;font-size:1.125rem;color:var(--text-secondary);max-width:38rem}
.start-here b{color:var(--text)}
.start-here .price0{font-variant-numeric:tabular-nums;color:var(--text);font-weight:var(--w-display)}
@media (max-width:37.5rem){.start-here .btn{width:100%}}
.tiers{display:grid;gap:var(--s-5);margin:0 0 var(--s-6)}
@media (min-width:56rem){.tiers{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(7,auto);align-items:stretch}.tiers>.tier{display:grid;grid-row:span 7;grid-template-rows:subgrid;row-gap:0;align-content:start}.tiers>.tier>.label{margin-top:0;align-self:end}}
.tier{position:relative;display:flex;flex-direction:column;padding:clamp(1.25rem,2.5vw,2rem);background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--r-md);box-shadow:var(--shadow-card)}
.tier--featured{border:0;background:var(--band-bg);color:var(--band-text)}
.tier--featured h3,.tier--featured .tier-price{color:var(--band-text)}
.tier--featured .tier-tag{color:var(--lime)}
.tier.tier--featured .tier-price small,.tier.tier--featured .tier-from,.tier.tier--featured .tier-what,.tier.tier--featured ul,.tier.tier--featured .label{color:var(--band-muted)}
.tier--featured .tier-what{border-color:rgba(255,255,255,.14)}
.tier.tier--featured li::before{border-color:var(--lime)}
.tier--featured a:not(.btn){color:var(--band-text)}
.tier--featured .btn-primary{background:var(--lime);color:var(--lime-ink);box-shadow:none}
.tier--featured .btn-primary:hover{background:var(--band-btn-hover);color:var(--lime-ink)}
.tier-tag{margin:0 0 var(--s-2);font-size:var(--t-caption);font-weight:var(--w-strong);color:var(--text-muted);letter-spacing:.01em}
.tier h3{margin-bottom:var(--s-3)}
.tier-price{margin:0 0 var(--s-3);font-family:var(--display);font-size:var(--t-price);font-weight:var(--w-display);letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.tier-from{font-size:1.125rem;font-weight:var(--w-strong);letter-spacing:0;color:var(--text-secondary);margin-right:.15em}
.tier-price small{display:block;margin-top:var(--s-2);font-size:var(--t-caption);font-weight:var(--w-regular);letter-spacing:0;line-height:1.5;color:var(--text-muted)}
.tier-what{color:var(--text-secondary);font-size:var(--t-read);margin:0 0 var(--s-4);padding-bottom:var(--s-4);border-bottom:1px solid var(--border-subtle)}
.tier ul{list-style:none;margin:0;padding:0;font-size:var(--t-read);color:var(--text-secondary)}
.tier li{position:relative;padding:.3rem 0 .3rem 1.6rem}
.tier li::before{content:"";position:absolute;left:.3rem;top:calc(.3rem + .35em);width:.3rem;height:.55rem;border:solid var(--signal-pos);border-width:0 2px 2px 0;transform:rotate(45deg)}
.tier .not li::before{content:"×";content:"×" / "";border:0;transform:none;width:auto;height:auto;left:.25rem;top:.3rem;line-height:inherit;color:var(--text-muted)}
.tier .not{margin-top:var(--s-1)}
.label{margin:auto 0 var(--s-1);padding-top:var(--s-5);font-size:var(--t-caption);font-weight:var(--w-strong);color:var(--text)}
.terms{display:grid;gap:var(--s-3);max-width:48rem;font-size:var(--t-read);color:var(--text-secondary)}
.terms p{margin:0}
.terms b{color:var(--text)}

/* not promised */
.limits{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--r-md);overflow:hidden}
.limits li{position:relative;padding:var(--s-4) var(--s-5) var(--s-4) calc(var(--s-5) + 1.75rem);border-top:1px solid var(--border-subtle);color:var(--text-secondary)}
.limits li:first-child{border-top:0}
.limits li::before{content:"";position:absolute;left:var(--s-5);top:calc(var(--s-4) + .8em);width:.9rem;height:2px;border-radius:2px;background:var(--text-muted)}
.limits b{color:var(--text)}

/* about */
.about-card{display:grid;gap:var(--s-6);padding:clamp(1.25rem,3.5vw,2.5rem);background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}
@media (min-width:56rem){.about-card{grid-template-columns:auto 1.4fr 1fr;align-items:start;gap:var(--s-7)}}
.about-card .mono{width:4.5rem;height:4.5rem;font-size:1.375rem}
.facts{margin:0;padding:0}
.facts div{display:grid;gap:var(--s-1);padding:var(--s-3) 0;border-top:1px solid var(--border-subtle)}
.facts div:first-of-type{border-top:0;padding-top:0}
.facts dt{font-size:var(--t-caption);font-weight:var(--w-strong);color:var(--text-muted)}
.facts dd{margin:0;font-size:var(--t-small);color:var(--text)}

/* faq */
.faq{border-top:1px solid var(--border-subtle)}
.faq details{border-bottom:1px solid var(--border-subtle)}
.faq summary{display:flex;justify-content:space-between;gap:var(--s-4);align-items:center;min-height:3.5rem;padding:var(--s-4) 0;cursor:pointer;list-style:none;font-weight:var(--w-strong);font-size:1.0625rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";content:"+" / "";flex:none;display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--surface-raised);color:var(--text-secondary);font-weight:var(--w-regular);font-size:1.125rem;line-height:1}
.faq summary:hover{color:var(--accent)}
.faq details[open] summary::after{content:"−";content:"−" / "";background:var(--surface-tint);color:var(--accent)}
.faq details>p{padding:0 2.75rem var(--s-5) 0;margin:0;color:var(--text-secondary);font-size:var(--t-read);max-width:var(--measure)}

/* closing band */
.closing{background:var(--band-bg);color:var(--band-text);text-align:center;border-top:0}
.closing-inner{max-width:46rem;display:flex;flex-direction:column;align-items:center}
.closing h2{color:var(--band-text);margin-bottom:var(--s-3)}
.closing p{color:var(--band-muted);font-size:var(--t-lede);margin:0 0 var(--s-6)}
@media (max-width:37.5rem){.closing .btn{width:100%}}

/* footer */
footer{background:var(--bg);border-top:1px solid var(--border-subtle);padding:var(--s-7) 0 var(--s-6);font-size:var(--t-caption);color:var(--text-faint)}
.foot-grid{display:grid;gap:var(--s-6)}
@media (min-width:52rem){.foot-grid{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr) minmax(0,1.5fr);gap:var(--s-7)}}
footer h2{margin:0 0 var(--s-3);font-size:var(--t-small);font-weight:var(--w-strong);letter-spacing:0;line-height:1.3;color:var(--text);max-width:none}
footer p{margin:0 0 var(--s-2)}
footer a{color:var(--text-secondary)}
footer a:hover{color:var(--text)}
.legal{line-height:1.6}
.legal b{color:var(--text-secondary);font-weight:var(--w-strong)}
.legal ol{margin:0 0 var(--s-2);padding-left:1.1rem}
.legal li{margin-bottom:var(--s-2)}
.more{margin:0 0 var(--s-2)}
.more summary{display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--tap);cursor:pointer;color:var(--text-secondary);font-weight:var(--w-strong);list-style:none}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"+";content:"+" / "";color:var(--text-muted)}
.more[open] summary::after{content:"−";content:"−" / ""}
.more summary:hover{color:var(--text)}
.disclaimer{margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--border-subtle);max-width:none}

/* phone dock: one button, only on phones, only while neither the free check (shop pages), the hero button, the form,
   the closing band nor the footer is on screen (inline script); markup ships hidden, so without JS there is no dock */
.dock{display:none}
@media (max-width:37.5rem){
  .dock{position:fixed;left:0;right:0;bottom:0;z-index:9;display:block;padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom,0px));background:var(--header-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--border-subtle)}
  .dock[hidden]{display:none}
  .dock .btn{width:100%}
  html{scroll-padding-bottom:5.5rem}
}

@media (prefers-reduced-motion:reduce){.btn,.nav a,a,.arrow,input,select,textarea{transition:none}.btn:hover{transform:none}}
@media print{.masthead{position:static}.skip,.nav,.dock,.btn,.hero-story{display:none}body{font-size:11pt;line-height:1.45}section{padding:1.5rem 0;break-inside:avoid}.closing{color:#111}}

/* ── 6. 404 ─────────────────────────────────────────────────────────── */
.notfound{max-width:40rem;padding-top:clamp(3rem,10vw,7rem);padding-bottom:var(--s-8)}
.notfound h1{font-size:var(--t-page);max-width:18ch}
.notfound .lead{color:var(--text-secondary);font-size:var(--t-lede);margin-bottom:var(--s-6)}
.notfound .note{margin-top:var(--s-6)}
.foot-min{padding:var(--s-5) 0}
body:has(.foot-min){min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body:has(.foot-min)>main{flex:1 0 auto}
.foot-links{display:flex;flex-wrap:wrap;gap:0 var(--s-4)}
.foot-links a{display:inline-flex;align-items:center;min-height:var(--tap)}
.notfound .eyebrow::before{display:none}

/* ── 8. pilot home (relaunch briefing 2026-10-23, shared/sellmyproduct_ai_Relaunch_Briefing.pdf) ─────────── */
.eyebrow .chip{margin-left:var(--s-3);vertical-align:.1em}
.hero-meta{margin:var(--s-5) 0 0;font-size:var(--t-small);color:var(--text-secondary);font-variant-numeric:tabular-nums}
/* the concept card in the hero: a dark panel, a white card, labelled as an example; simplified on phones */
.sample{min-width:0;padding:clamp(1rem,3vw,2.25rem);background-color:var(--band-bg);background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:32px 32px;border-radius:var(--r-md)}
.sample-card{background:var(--surface);color:var(--text);border-radius:var(--r-md);overflow:hidden}
.sample-card>*{margin-inline:clamp(1rem,3vw,1.75rem)}
.sample-tag{margin-top:clamp(1rem,3vw,1.5rem);margin-bottom:var(--s-3);font-size:.75rem;font-weight:var(--w-strong);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.sample-title{margin-bottom:var(--s-1);font-family:var(--display);font-size:clamp(1.375rem,1.1rem + 1vw,1.75rem);font-weight:var(--w-display);letter-spacing:-.03em;line-height:1.15}
.sample-sub{margin-bottom:var(--s-4);color:var(--text-secondary)}
.sample-src{list-style:none;padding:0 0 var(--s-4);display:flex;flex-wrap:wrap;gap:var(--s-2);border-bottom:1px solid var(--border-subtle)}
.sample-src li{padding:.3rem .8rem;border-radius:var(--r-pill);background:var(--surface-raised);font-size:var(--t-caption);color:var(--text-secondary)}
.sample-steps{list-style:none;padding:0;counter-reset:q}
.sample-steps li{position:relative;padding:var(--s-4) 0 var(--s-4) 3.5rem;border-bottom:1px solid var(--border-subtle);color:var(--text-secondary);font-size:var(--t-small);line-height:1.45}
.sample-steps li:last-child{border-bottom:0}
.sample-steps li::before{counter-increment:q;content:counter(q,decimal-leading-zero);content:counter(q,decimal-leading-zero) / "";position:absolute;left:0;top:var(--s-4);font-family:var(--display);font-size:2rem;line-height:1;font-weight:500;color:var(--num)}
.sample-steps b{display:block;color:var(--text);font-size:var(--t-body);font-weight:var(--w-strong)}
.sample-card>.sample-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3);margin:0;padding:var(--s-4) clamp(1rem,3vw,1.75rem);background:var(--lime);color:var(--lime-ink);font-weight:var(--w-strong)}
.sample-foot a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 1rem;border-radius:var(--r-btn);background:var(--lime-ink);color:#fff;text-decoration:none;font-size:var(--t-small)}
.sample-foot a:hover{background:#21403a;color:#fff}
.sample-foot a:focus-visible{outline-color:var(--lime-ink)}
.sample-note{margin:var(--s-4) 0 0;text-align:center;font-size:var(--t-caption);color:var(--band-muted)}
@media (max-width:30rem){.sample-src,.sample-sub{display:none}.sample-steps li{padding-left:2.75rem}.sample-steps li::before{font-size:1.5rem}}
@media (max-width:63.99rem){.sample{max-width:34rem}}
.trust{list-style:none;margin:clamp(2.5rem,5vw,4rem) 0 0;padding:var(--s-5) 0;display:grid;gap:var(--s-4);border-block:1px solid var(--border-subtle)}
.trust li{display:flex;align-items:center;justify-content:center;gap:var(--s-3);font-weight:var(--w-medium);color:var(--text)}
.trust svg{flex:none;width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:48rem){.trust{grid-template-columns:repeat(3,1fr);gap:0}.trust li+li{border-left:1px solid var(--border-subtle)}}
@media (max-width:47.99rem){.trust li{justify-content:flex-start}}
.side-entry{margin:var(--s-5) 0 0;font-size:var(--t-small);color:var(--text-secondary)}
.side-entry a{color:var(--text);font-weight:var(--w-medium)}
.section-head .eyebrow{margin-bottom:var(--s-3)}
/* the work sample: the one surface with a soft shadow */
.report-full{max-width:56rem;background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--r-md);box-shadow:var(--shadow-lift);overflow:hidden}
.rf-head{padding:clamp(1.25rem,3vw,2rem) clamp(1.25rem,3vw,2rem) var(--s-5);border-bottom:1px solid var(--border-subtle)}
.rf-head .chip{margin:0 0 var(--s-3);white-space:normal}
.rf-head h3{margin:0 0 var(--s-1)}
.rf-meta{margin:0;font-size:var(--t-small);color:var(--text-muted)}
.rf-rows{margin:0}
.rf-rows div{display:grid;gap:var(--s-1) var(--s-6);padding:var(--s-5) clamp(1.25rem,3vw,2rem);border-bottom:1px solid var(--border-subtle)}
@media (min-width:48rem){.rf-rows div{grid-template-columns:11rem 1fr}}
.rf-rows dt{font-weight:var(--w-strong);color:var(--text)}
.rf-rows dd{margin:0;color:var(--text-secondary);font-size:var(--t-read);font-variant-numeric:tabular-nums}
.rf-note{margin:0;padding:var(--s-4) clamp(1.25rem,3vw,2rem);background:var(--surface-raised);font-size:var(--t-small);color:var(--text-secondary)}
.story-link{margin:var(--s-6) 0 0;font-size:var(--t-small);color:var(--text-secondary)}
.story-link a{color:var(--text);font-weight:var(--w-medium)}
/* scope with a status per item: tested / built / planned / still to build stay distinguishable */
.scope{list-style:none;margin:0 0 var(--s-6);padding:0;display:grid;gap:var(--s-5)}
@media (min-width:48rem){.scope{grid-template-columns:repeat(2,1fr);column-gap:var(--s-6)}}
@media (min-width:64rem){.scope{grid-template-columns:repeat(3,1fr)}}
.scope li{padding-top:var(--s-4);border-top:1px solid var(--border-subtle)}
.scope p{margin:0 0 var(--s-3);color:var(--text-secondary);font-size:var(--t-read)}
.st-row{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.st{display:inline-block;padding:.15rem .55rem;border-radius:6px;font-size:var(--t-caption);font-weight:var(--w-strong);line-height:1.5}
.st-test{background:var(--signal-pos-bg);color:var(--text)}
.st-built{background:var(--surface-raised);color:var(--text)}
.st-plan{background:var(--lime);color:var(--lime-ink)}
.st-todo{background:transparent;color:var(--text-secondary);box-shadow:inset 0 0 0 1px var(--border)}
/* price band (the mockup's "Ein klar begrenzter Pilot.") */
.price-band{display:grid;gap:var(--s-5);padding:clamp(1.5rem,4vw,2.5rem);background:var(--band-bg);color:var(--band-text);border-radius:var(--r-md)}
@media (min-width:48rem){.price-band{grid-template-columns:1.4fr 1fr;align-items:center}.pb-price{padding-left:var(--s-6);border-left:1px solid rgba(255,255,255,.18);text-align:center}}
.price-band h2{color:var(--band-text);margin-bottom:var(--s-3)}
.pb-facts{margin:0 0 var(--s-4);font-size:var(--t-lede);color:var(--band-muted)}
.pb-main .chip{margin:0}
.pb-amount{margin:0;font-family:var(--display);font-size:var(--t-price);font-weight:var(--w-display);letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.pb-unit{margin:var(--s-2) 0 var(--s-4);color:var(--band-muted)}
.price-band .btn-on-dark:focus-visible{outline-color:var(--lime)}
@media (max-width:37.5rem){.price-band .btn{width:100%}}
.pb-under{margin:var(--s-3) 0 var(--s-6);text-align:center;font-size:var(--t-small);color:var(--text-secondary)}
.terms--grid{max-width:none}
@media (min-width:48rem){.terms--grid{grid-template-columns:repeat(2,1fr);column-gap:var(--s-6)}}
/* calculator as its own tool: intro left, the box right */
.calc-grid{display:grid;gap:var(--s-6);align-items:start}
@media (min-width:56rem){.calc-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}.calc-grid .section-head{position:sticky;top:calc(var(--header-h) + var(--s-6))}}
.calc-grid .section-head .hook-fine{margin-top:var(--s-4);font-size:var(--t-small)}
.calc-scope{font-size:var(--t-small);color:var(--text-muted)}
.contact-steps{margin:var(--s-5) 0 0}
.btn-send:disabled{opacity:.7;cursor:progress}
/* phones: the header button would have to shorten its label; every primary button keeps the full wording (briefing),
   so the header shows the price link instead and the hero button, then the dock, carry the action */
@media (max-width:37.5rem){.nav .btn{display:none}.nav .sec-keep{display:inline-flex;padding:0 .45rem}}

/* ── 7. shop page (/shops/, /de/shops/) ─────────────────────────────── */
.status{display:flex;gap:var(--s-3);align-items:flex-start;max-width:36rem;margin:var(--s-5) 0 0;padding:var(--s-4) var(--s-5);border:1px solid var(--border-subtle);border-radius:var(--r-md);background:var(--surface-raised);font-size:var(--t-small);color:var(--text-secondary)}
.status::before{content:"";flex:none;width:.6rem;height:.6rem;margin-top:.45em;border-radius:50%;background:var(--lime);box-shadow:0 0 0 1px var(--lime-ink)}
.status b{color:var(--text)}
.steps--six{counter-reset:s}
@media (min-width:56rem){.steps--six h3{min-height:0}}
.box{max-width:48rem;margin:var(--s-6) 0 0;padding:clamp(1.25rem,3vw,1.75rem);background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--r-md)}
.box h3{font-size:var(--t-small);margin-bottom:var(--s-3)}
.xlist,.clist{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2);font-size:var(--t-read);color:var(--text-secondary)}
.xlist li,.clist li{position:relative;padding-left:1.6rem}
.xlist li::before{content:"×";content:"×" / "";position:absolute;left:.2rem;top:0;color:var(--text-muted)}
.clist li::before{content:"";position:absolute;left:.3rem;top:.35em;width:.3rem;height:.55rem;border:solid var(--signal-pos);border-width:0 2px 2px 0;transform:rotate(45deg)}
.limits ul{list-style:none;margin:var(--s-2) 0 0;padding:0}
.limits li li{padding:var(--s-1) 0 0 1.25rem;border-top:0}
.limits li li::before{left:0;top:calc(var(--s-1) + .8em);width:.6rem}
.fit-grid{display:grid;gap:var(--s-5)}
@media (min-width:56rem){.fit-grid{grid-template-columns:1.3fr 1fr;align-items:start}}
.fit-grid .box{margin:0;max-width:none}
.fit-grid .clist,.fit-grid .xlist{font-size:var(--t-body)}
.price-grid{display:grid;gap:var(--s-5)}
@media (min-width:56rem){.price-grid{grid-template-columns:1fr 1.2fr;align-items:start}}
.price-grid .tier{max-width:30rem}
.data-list{max-width:52rem}
.price-cta{margin-top:var(--s-3)}
@media (max-width:37.5rem){.price-cta .btn{width:100%}}
.hero-story .story-note{margin-top:var(--s-3)}
.hero-story .story-note--top{margin:0 0 var(--s-2);text-align:left}
.nw{white-space:nowrap}