/* ============================================================
   Vitrinenmacher — PLATFORM THEME  (LOCKED BRAND, board-3)
   Cream canvas · warm ink · flat royal cobalt #264CC0 (NEVER a
   gradient) · Space Grotesk (display) + Inter (body). Scoped to
   body.platform (the claim / checkout / done flow).
   ============================================================ */

/* Self-hosted fonts (nDSG: no request ever leaves for Google/gstatic).
   woff2 subsets live in ./fonts, sit beside this file, and are copied
   into every deployed claim bundle. Variable weight ranges match the
   old Google request (Space Grotesk 400..700, Inter 400..600). */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/space-grotesk-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/space-grotesk-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

body.platform{
  --paper:#ffffff;         /* page canvas — clean white */
  --paper-2:#f4f4f5;       /* feature-card / band bg — faint neutral */
  --card:#ffffff;          /* card / paper */
  --ink:#1c1c1c;           /* anthracite */
  --ink-soft:#6B6258;      /* secondary text */
  --forest:#1c1c1c;        /* dark sections -> anthracite */
  --forest-2:#121212;
  --moss:#264CC0;          /* "included" / "done" -> brand cobalt (no green) */
  --rust:#264CC0;          /* primary accent — flat royal cobalt, NEVER a gradient */
  --rust-deep:#1d3da0;     /* cobalt hover */
  --wheat:#E7ECF8;         /* cobalt tint (replaces light-green accent) */
  --asoft:#E7ECF8;         /* cobalt tint alias */
  --line:#ececec;          /* neutral hairline */
  --line-soft:#f1f1f1;
  --radius:14px;

  --serif:'Space Grotesk',system-ui,sans-serif;          /* display */
  --sans:'Inter',system-ui,-apple-system,sans-serif;     /* body / ui */
  --mono:'Space Grotesk',system-ui,sans-serif;           /* micro-labels -> display, no mono */

  --shadow-sm:0 1px 2px rgba(27,21,15,.05), 0 12px 30px -16px rgba(27,21,15,.22);
  --shadow-lg:0 40px 90px -38px rgba(27,21,15,.4), 0 10px 28px -14px rgba(27,21,15,.16);

  background:var(--paper);
  letter-spacing:-.005em;
}
body.platform::before{opacity:0}   /* remove the paper grain */

/* ---------- type ---------- */
body.platform h1,body.platform h2,body.platform h3,body.platform h4{
  font-weight:600;letter-spacing:-.03em}
/* Carry the venue site's Fraunces serif into the primary claim/checkout/done
   display headlines so the two halves of the journey read as one studio's
   voice — even as the accent shifts to Vitrinenmacher indigo. */
body.platform .display{font-family:var(--serif);font-weight:600;
  letter-spacing:-.025em;line-height:1.04}
body.platform .display em{font-style:normal;color:var(--rust)}
body.platform h2.head{font-weight:600}
body.platform .lead{color:var(--ink-soft);letter-spacing:-.01em}

/* eyebrow -> mono micro-label */
body.platform .eyebrow{font-family:var(--mono);font-size:.7rem;font-weight:500;
  letter-spacing:.1em;color:var(--ink-soft);text-transform:uppercase}
body.platform .eyebrow::before{background:var(--rust);width:16px;height:1px}

/* ---------- buttons ---------- */
body.platform .btn{border-radius:10px;font-weight:600;letter-spacing:-.01em}
body.platform .btn-lg{border-radius:12px}
body.platform .btn-primary{background:var(--rust);color:#fff;
  box-shadow:0 1px 2px rgba(12,13,17,.12), 0 10px 22px -10px rgba(38,76,192,.55)}
body.platform .btn-primary:hover{background:var(--rust-deep)}
body.platform .btn-dark{background:#1c1c1c;color:#fff}
body.platform .btn-dark:hover{background:#121212}
body.platform .btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)}
body.platform .btn-ghost:hover{background:#1c1c1c;border-color:#1c1c1c;color:#fff}
body.platform .btn-light{background:#fff;color:#1c1c1c;border-color:var(--line)}
body.platform .btn-light:hover{background:#f0f0f0}
body.platform .btn-grey{background:#ececec;color:var(--ink);border-color:#ececec}
body.platform .btn-grey:hover{background:#e2e2e2}

/* ---------- header ---------- */
body.platform .ew-header{background:rgba(255,255,255,.65);border-bottom:1px solid var(--line);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}
body.platform .ew-logo{font-family:var(--serif);font-weight:650;letter-spacing:-.03em}
body.platform .ew-mark rect{fill:#1c1c1c}
body.platform .ew-mark path{fill:var(--rust)}
body.platform .ew-header .tag{font-family:var(--mono);font-size:.7rem;letter-spacing:0;
  color:var(--ink-soft);border-left:1px solid var(--line)}
body.platform .ew-header .secure{color:var(--moss);font-weight:600}

/* ---------- chips / pills ---------- */
body.platform .chip{background:#fff;border:1px solid var(--line);border-radius:9px;
  font-weight:550;box-shadow:0 1px 2px rgba(12,13,17,.03)}
body.platform .chip svg{color:var(--moss)}
body.platform .tagpill{background:rgba(38,76,192,.09);border:1px solid rgba(38,76,192,.26);
  color:var(--rust-deep);border-radius:8px;font-family:var(--mono);font-weight:500;
  letter-spacing:0;text-transform:none}
body.platform .tagpill .dot{background:var(--rust)}

/* ---------- browser preview frame ---------- */
body.platform .browser{border-radius:14px;border:1px solid var(--line);
  transform:perspective(1800px) rotateY(-3deg) rotateX(1deg);
  box-shadow:0 50px 90px -40px rgba(12,13,17,.45), 0 12px 30px -14px rgba(12,13,17,.2)}
body.platform .browser:hover{transform:perspective(1800px) rotateY(0) rotateX(0)}
body.platform .browser-bar{background:#ececec;border-bottom:1px solid var(--line)}
body.platform .browser-bar i{background:#d9d1c3}
body.platform .browser-url{background:#fff;border:1px solid var(--line);font-family:var(--mono);font-size:.7rem}

/* ---------- surfaces / inputs ---------- */
body.platform .surface{border-radius:14px;border:1px solid var(--line)}
body.platform .input,body.platform select.input,body.platform textarea.input{
  background:#fff;border:1.5px solid var(--line);border-radius:10px}
body.platform .input:focus{border-color:var(--rust);box-shadow:0 0 0 3px rgba(38,76,192,.18)}
body.platform .field label{font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;
  font-weight:500;font-size:.74rem;color:var(--ink-soft)}

/* ---------- dark sections ---------- */
body.platform .band-forest{background:#1c1c1c;color:#efe9df}  /* flat ink — no accent gradient */
body.platform .band-forest .muted{color:#b7afa3}
body.platform .band-forest .eyebrow{color:var(--wheat)}

/* ---------- platform-tax compare ---------- */
body.platform .tax-card{border-radius:14px}
body.platform .tax-old{background:#fff;border:1px solid var(--line)}
body.platform .tax-old .amt{color:var(--ink)}
body.platform .tax-new{background:#1c1c1c;color:#efe9df}  /* flat ink — no accent gradient */
body.platform .tax-new .muted{color:#b7afa3}
body.platform .tax-mid{font-family:var(--mono);font-style:normal;text-transform:uppercase;
  font-size:.72rem;letter-spacing:.1em}

/* ---------- before / after ---------- */
body.platform .swap-label{font-family:var(--mono);letter-spacing:.06em}
body.platform .newsite-shot{border-radius:12px}

/* ---------- sender / founder ---------- */
body.platform .sender{border-radius:14px}
/* no founder headshot yet → make the monogram a deliberate brand mark
   (indigo letterform on near-black, ringed), not a default initials chip */
body.platform .monogram{background:#1c1c1c;color:var(--wheat);border-radius:16px;
  font-family:var(--serif);font-weight:700;letter-spacing:.01em;
  box-shadow:inset 0 0 0 1.5px rgba(38,76,192,.4), 0 8px 20px -10px rgba(38,76,192,.5)}
body.platform .sig{font-family:var(--serif);font-style:normal;
  font-weight:600;color:var(--ink)}

/* ---------- FAQ ---------- */
body.platform .faq summary{font-family:var(--serif);font-weight:600;font-size:1.12rem}
body.platform .faq summary .pm{color:var(--rust)}

/* ---------- WhatsApp section ---------- */
body.platform .wa-loop .wn{background:#264CC0;color:#fff;border-radius:9px;font-family:var(--mono)}

/* ============================================================
   CHECKOUT (platform)
   ============================================================ */
body.platform .stepper .st{border-radius:9px;font-weight:550}
body.platform .stepper .st .n{font-family:var(--mono);border-radius:7px;background:#ececec}
body.platform .stepper .st.active{border-color:var(--line)}
body.platform .stepper .st.active .n{background:var(--rust);color:#fff}
body.platform .stepper .st.done .n{background:var(--moss);color:#fff}

body.platform .co-step h2{font-family:var(--serif);font-weight:640;letter-spacing:-.035em}

body.platform .toggle{background:#ececec;border-radius:11px}
body.platform .toggle button{border-radius:8px;font-weight:600}
body.platform .toggle button.on{background:#fff}
body.platform .toggle .save{color:var(--rust)}

body.platform .plan{border-radius:14px;border-width:1.5px;border-color:var(--line);transition:.18s}
body.platform .plan:hover{border-color:#c9bfa9;box-shadow:var(--shadow-sm)}
body.platform .plan.sel{border-color:var(--rust);box-shadow:0 0 0 3px rgba(38,76,192,.16)}
body.platform .plan.sel .radio{border-color:var(--rust)}
body.platform .plan.sel .radio::after{background:var(--rust)}
body.platform .plan h3{font-family:var(--serif);font-weight:600}
body.platform .plan .price b{font-family:var(--serif);font-weight:640}
body.platform .plan .price span{font-family:var(--mono);font-size:.68rem}
body.platform .star{background:#1c1c1c;color:#E7ECF8;border-radius:7px;font-family:var(--mono);font-weight:600}
body.platform .plan .feats span{color:var(--ink-soft)}

body.platform .addon{border-radius:13px;border-width:1.5px}
body.platform .addon:hover{border-color:#c9bfa9}
body.platform .addon.on{border-color:var(--rust);background:var(--asoft)}
body.platform .addon.inc{background:#f5f5f5;border-color:var(--line-soft)}
body.platform .check{border-radius:7px;border-color:var(--line)}
body.platform .addon.on .check{background:var(--rust);border-color:var(--rust)}
body.platform .addon.inc .check{background:var(--moss);border-color:var(--moss)}
body.platform .addon h4{font-family:var(--sans);font-weight:650}
body.platform .addon .ap{font-family:var(--serif);font-weight:600}
body.platform .addon .ap small{font-family:var(--mono);color:var(--moss)}
/* optional addons sit below the plans as a clearly-secondary block — never a wall */
body.platform .co-optional{margin:26px 0 4px;padding-top:22px;border-top:1px solid var(--line-soft)}
body.platform .co-optional .cv-eyebrow{margin-bottom:12px;color:var(--ink-soft)}
body.platform .addons-slim .addon{border-style:dashed}
body.platform .addons-slim .addon.on{border-style:solid}

body.platform .pay{border-radius:12px;border-width:1.5px;font-weight:600}
body.platform .pay:hover{border-color:#c9bfa9}
body.platform .pay.sel{border-color:var(--rust);box-shadow:0 0 0 3px rgba(38,76,192,.16)}

body.platform .summary{border-radius:16px;border:1px solid var(--line)}
body.platform .summary-head .sn{font-family:var(--serif);font-weight:600}
body.platform .summary-head small{font-family:var(--mono);font-size:.68rem}
body.platform .summary-foot{background:#f6f6f7}
body.platform .summary-total b{font-family:var(--serif);font-weight:640}
body.platform .summary-total .per{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.06em}
body.platform .sline{font-variant-numeric:tabular-nums}
body.platform .guarantee svg{color:var(--moss)}
body.platform .back-link{font-weight:600}

/* ---------- checkout value reinforcer (before/after + benefits) ---------- */
body.platform .co-value{margin-top:18px;border:1px solid var(--line);border-radius:16px;
  overflow:hidden;background:var(--card)}
/* hide the reinforcer on the payment step — decision is made, no benefit there */
body.platform #checkout.on-pay .co-value{display:none}
body.platform .cv-ba{padding:16px 18px 14px}
body.platform .cv-eyebrow{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rust);font-weight:600;margin-bottom:12px}
body.platform .cv-ba-row{display:grid;grid-template-columns:1fr auto 1fr;gap:9px;align-items:center}
body.platform .cv-shot{position:relative}
body.platform .cv-tag{position:absolute;top:6px;left:6px;z-index:2;font-family:var(--mono);
  font-size:.56rem;letter-spacing:.07em;text-transform:uppercase;padding:.22em .55em;
  border-radius:6px;font-weight:600}
body.platform .cv-tag.old{background:#e6ddc7;color:#665b44}
body.platform .cv-tag.new{background:var(--rust);color:#fff}
body.platform .cv-arrow{font-family:var(--mono);color:var(--rust);font-size:1.1rem;text-align:center}
body.platform .cv-new-shot{display:block;aspect-ratio:4/3;border-radius:9px;border:1px solid var(--line)}
body.platform .cv-link{display:block;text-align:center;margin-top:12px;font-weight:600;
  font-size:.84rem;color:var(--forest)}
body.platform .cv-link:hover{color:var(--rust)}

/* real screenshot of their current site (pipeline fills the <img>) */
body.platform .cv-frame{aspect-ratio:4/3;border:1px solid var(--line);border-radius:9px;
  overflow:hidden;background:#fff;display:flex;flex-direction:column}
body.platform .cv-frame-bar{height:11px;flex:none;background:#e6e0d4;
  border-bottom:1px solid var(--line-soft)}
body.platform .cv-old-img{width:100%;flex:1;object-fit:cover;object-position:top center;display:block}

/* no-website fallback — today scattered across portals */
body.platform .cv-portals .cv-portal-tile{aspect-ratio:4/3;border:1px solid var(--line);
  border-radius:9px;background:#f4f0e6;display:flex;flex-direction:column;justify-content:center;
  gap:4px;padding:10px;text-align:center}
body.platform .cvp-lead{font-family:var(--mono);font-size:.5rem;letter-spacing:.07em;
  text-transform:uppercase;color:#8a7d63;margin-bottom:2px}
body.platform .cvp-row{font-size:.66rem;font-weight:600;color:var(--ink-soft);background:#fff;
  border:1px solid var(--line-soft);border-radius:5px;padding:2px 5px}
body.platform .cvp-foot{font-size:.55rem;font-style:normal;color:var(--rust-deep);margin-top:3px}

/* mini "ugly old site" mock (fallback while no screenshot exists) */
body.platform .oldsite-mini{aspect-ratio:4/3;border:1px solid #cfc3a8;border-radius:9px;
  overflow:hidden;background:#fff;display:flex;flex-direction:column}
body.platform .om-top{background:#1f5fa8;color:#fff;text-align:center;font-weight:bold;
  padding:4px 3px;font-size:.56rem;line-height:1.1}
body.platform .om-body{padding:7px;flex:1;display:flex;flex-direction:column}
body.platform .om-marq{color:#cc0000;font-weight:bold;font-size:.5rem;margin-bottom:5px}
body.platform .om-img{background:repeating-linear-gradient(45deg,#e7e0cf,#e7e0cf 6px,#ddd5c0 6px,#ddd5c0 12px);
  height:30px;border:1px solid #ccc;margin-bottom:6px;font-size:.42rem;color:#998;
  display:flex;align-items:center;justify-content:center}
body.platform .om-line{height:4px;background:#dcdcdc;border-radius:2px;margin-bottom:4px}
body.platform .om-line.short{width:62%}

/* benefits list */
body.platform .cv-benefits{padding:16px 18px 18px}
body.platform .cv-benefits ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
body.platform .cv-benefits li{position:relative;padding-left:23px;font-size:.84rem;
  color:var(--ink-soft);line-height:1.35}
body.platform .cv-benefits li b{color:var(--ink);font-weight:600}
body.platform .cv-benefits li::before{content:"✓";position:absolute;left:0;top:-1px;
  color:var(--moss);font-weight:800;font-size:.92rem}
body.platform .cv-roi{margin:14px 0 0;padding-top:13px;border-top:1px dashed var(--line);
  font-size:.84rem;font-weight:600;color:var(--forest);line-height:1.4}
body.platform .cv-roi b{color:var(--rust)}

/* TWINT mock tweak */
body.platform .twint-logo{font-family:var(--sans)}

/* ---------- persona-driven reassurance components ---------- */
/* the "two yeses" banner — paying changes nothing technical (docs/13 #3) */
/* quiet light-grey card, no accent side border */
body.platform .co-reassure{display:flex;gap:13px;align-items:flex-start;margin:0 0 30px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
body.platform .co-reassure .ic{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  background:var(--asoft);color:var(--rust)}
body.platform .co-reassure .ic svg{width:18px;height:18px}
body.platform .co-reassure b{font-weight:650;color:var(--ink)}
body.platform .co-reassure p{margin:3px 0 0;font-size:.86rem;color:var(--ink-soft);line-height:1.45}

/* benefit / "the look-up moment" — scene-led value block atop step 1.
   Plain-language, no jargon; the result card is proof inside the scene. */
body.platform .co-found{margin:0 0 26px;padding:0 0 24px;border-bottom:1px solid var(--line-soft)}
body.platform .co-found .cf-h{font-family:var(--serif);font-weight:640;
  font-size:1.42rem;letter-spacing:-.03em;line-height:1.18;color:var(--ink);margin:0 0 16px;max-width:30ch}
body.platform .co-found .cf-lines{display:grid;gap:11px;margin:0 0 18px}
body.platform .co-found .cf-now,
body.platform .co-found .cf-next{position:relative;padding-left:18px;font-size:.92rem;line-height:1.5;margin:0}
body.platform .co-found .cf-now{color:var(--ink-soft)}
body.platform .co-found .cf-next{color:var(--ink)}
body.platform .co-found .cf-now b,
body.platform .co-found .cf-next b{font-weight:650}
body.platform .co-found .cf-next i{font-style:normal;color:var(--rust);font-weight:650}
body.platform .co-found .cf-now::before,
body.platform .co-found .cf-next::before{content:"";position:absolute;left:0;top:.5em;
  width:7px;height:7px;border-radius:50%}
body.platform .co-found .cf-now::before{background:#c9cdd4}
body.platform .co-found .cf-next::before{background:var(--rust)}
body.platform .co-found .cf-proof{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 9px}
body.platform .co-found .cf-serp{background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:14px 16px}
body.platform .co-found .cf-serp .su{font-size:.73rem;color:#5f6368;margin:0 0 3px;display:flex;align-items:center;gap:7px}
body.platform .co-found .cf-serp .su .fav{width:17px;height:17px;border-radius:50%;flex:none;
  display:grid;place-items:center;background:var(--asoft);color:var(--rust)}
body.platform .co-found .cf-serp .su .fav svg{width:11px;height:11px}
body.platform .co-found .cf-serp .stitle{color:var(--rust);font-size:1.05rem;font-weight:500;line-height:1.2;margin:1px 0 3px}
body.platform .co-found .cf-serp .sdesc{font-size:.8rem;color:#4d5156;line-height:1.45;margin:0}
body.platform .co-found .cf-serp .srow{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap}
body.platform .co-found .cf-serp .pill{font-size:.69rem;background:#f6f6f7;color:var(--ink-soft);
  border-radius:20px;padding:3px 10px;font-weight:500}
body.platform .co-found .cf-serp .pill.green{background:var(--asoft);color:var(--rust-deep)}
body.platform .co-found .cf-foot{display:flex;align-items:flex-start;gap:9px;margin:16px 0 0;
  font-size:.84rem;line-height:1.45;color:var(--ink-soft)}
body.platform .co-found .cf-foot svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--moss)}

/* the survivability / exit micro-trust block on the payment step (docs/13 #5) */
body.platform .co-trust{margin-top:16px;border:1px solid var(--line);border-radius:13px;
  padding:15px 17px;background:#fff}
body.platform .co-trust .ct-h{font-family:var(--serif);font-weight:650;font-size:.95rem;
  color:var(--ink);margin:0 0 10px;display:flex;align-items:center;gap:8px}
body.platform .co-trust .ct-h svg{width:17px;height:17px;color:var(--moss)}
body.platform .co-trust ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
body.platform .co-trust li{position:relative;padding-left:22px;font-size:.83rem;color:var(--ink-soft);line-height:1.4}
body.platform .co-trust li::before{content:"✓";position:absolute;left:0;top:-1px;color:var(--moss);font-weight:800}

/* low-commitment alternative — reserve the draft, no card (docs/13 #4) */
body.platform .co-alt{margin-top:16px;text-align:center;font-size:.86rem;color:var(--ink-soft)}
body.platform .co-alt a{color:var(--rust);font-weight:650;text-decoration:none;border-bottom:1.5px solid rgba(38,76,192,.3)}
body.platform .co-alt a:hover{border-color:var(--rust)}

/* prefilled web-person hint (docs/13 web-person field) */
body.platform .field .opt-tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:500;margin-left:6px}
body.platform .field-note{font-size:.78rem;color:var(--ink-soft);margin:6px 0 0;line-height:1.45}
body.platform .field-note b{color:var(--ink)}

/* ============================================================
   DONE (platform)
   ============================================================ */
body.platform .seal{background:var(--rust);box-shadow:0 16px 36px -12px rgba(38,76,192,.55)}
/* keep the claimed domain (the emotional payoff) on one intact line — never
   broken mid-hyphen across two lines on narrow phones */
body.platform .done-domain{white-space:nowrap}
@media(max-width:480px){
  body.platform .done-domain{font-size:.82em}
}
body.platform .tl-dot{border-color:var(--rust);color:var(--rust);font-family:var(--mono);border-radius:12px}
body.platform .tl.done2 .tl-dot{background:var(--moss);border-color:var(--moss);color:#fff}
body.platform .tl-when{font-family:var(--mono);color:var(--rust);text-transform:uppercase;letter-spacing:.08em}
body.platform .tl-body h3{font-family:var(--serif);font-weight:600}
body.platform .wa-card{background:#1c1c1c;color:#efe9df;border-radius:18px}  /* flat ink — no accent gradient */
body.platform .wa-card h3{font-family:var(--serif)}
body.platform .wa-num{font-family:var(--serif);color:var(--wheat)}
body.platform .wa-qr{border-radius:12px}
body.platform .wa-qr svg rect[fill="#2f3a2b"],body.platform .wa-qr svg g[fill="#2f3a2b"] rect{fill:#1c1c1c}

/* ---------- pay-step: sender identity + reassurance + reserve off-ramp ---------- */
body.platform .co-ident{display:flex;align-items:center;gap:10px;margin:18px 0 12px;padding:11px 14px;
  background:#f6f6f7;border:1px solid var(--line);border-radius:11px;font-size:.82rem;color:var(--ink-soft);line-height:1.4}
body.platform .co-ident .ew-mark,body.platform .co-ident .id-mark{width:24px;height:24px;flex:none;border-radius:6px}
body.platform .co-ident b{color:var(--ink);font-weight:650}
body.platform .co-ident a{color:var(--rust);font-weight:600;text-decoration:none;white-space:nowrap}
body.platform .co-ident a:hover{text-decoration:underline}
/* Pay step: both CTAs are full-width and equal size, stacked. Back nav is a
   quiet centered link at the very bottom — not competing with the two CTAs. */
body.platform .pay-actions{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:28px}
body.platform .co-reserve{margin-top:14px}
body.platform .btn-block{width:100%;display:flex}
body.platform .btn.is-busy{opacity:.7;pointer-events:none}
body.platform .co-reserve.is-busy{opacity:1;pointer-events:none;color:var(--moss);border-color:var(--moss)}
/* RESERVED: the draft is held, nothing is due today. The reserve control reads
   as the chosen one and the pay CTA steps back to secondary, so the page stops
   pushing a payment the visitor just declined (buying stays one click away). */
body.platform #checkout.is-reserved .co-reserve.is-busy{background:rgba(106,122,79,.09);border-color:var(--moss);border-width:1.5px}
body.platform #checkout.is-reserved #payBtn{background:#fff;color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
body.platform #checkout.is-reserved #payBtn:hover{border-color:var(--ink)}
body.platform .co-pay-back{margin-top:20px;text-align:center}
body.platform .co-pay-back .back-link{font-size:.86rem}

/* ---------- mobile sticky price/CTA bar (price stays in view) ---------- */
.co-mobilebar{display:none}
@media(max-width:980px){
  body.platform .co-mobilebar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    align-items:center;gap:12px;padding:11px 16px;background:rgba(255,255,255,.96);
    backdrop-filter:saturate(1.2) blur(10px);border-top:1px solid var(--line);
    box-shadow:0 -8px 24px -14px rgba(12,13,17,.3)}
  body.platform .co-mobilebar .mb-total{font-family:var(--serif);font-weight:640;font-size:1.05rem;color:var(--ink)}
  body.platform .co-mobilebar .mb-total small{display:block;font-family:var(--mono);font-size:.6rem;
    text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);font-weight:500}
  body.platform .co-mobilebar a{margin-left:auto}
  body.platform .co-wrap{padding-bottom:78px}
}
/* PHONE (<=700px): lift the sticky price bar above the collapsed demo-pill
   gutter strip docked flush at the bottom edge, so the pill never overlaps a
   tile/field and the bar never overlaps the pill. --dn-strip is set in styles.css.
   On a DEPLOYED checkout (body.vm-live) there is no demo pill and therefore no
   gutter: --dn-strip is 0 there, so the bar sits flush on the viewport edge
   instead of hovering 46px above it with content scrolling underneath. */
@media(max-width:700px){
  body.platform .co-mobilebar{bottom:var(--dn-strip,46px)}
  body.platform.vm-live .co-mobilebar{padding-bottom:calc(11px + env(safe-area-inset-bottom,0px))}
}

/* ============================================================
   BRAND LOGO LOCKUP (wordmark stands alone) + FOOTER STAMP
   ============================================================ */
/* header wordmark — stands ALONE, never beside the star */
body.platform .ew-logo{display:flex;align-items:center;gap:0}
body.platform .ew-logo .wm{height:36px;width:auto;display:block}
/* the 8-point star is used rarely: footer stamp + sender-identity tile only */
body.platform .vm-footer{background:var(--forest);color:#cfc7bb}
body.platform .vm-footer .sf-bottom span,
body.platform .vm-footer a{color:#cfc7bb}
body.platform .vm-footer a:hover{color:#fff}
body.platform .vm-footer .sf-mark{color:#fff;opacity:.85;flex:none}
/* the body reserves padding-bottom for the fixed demo pill; without this the
   white body background shows as a strip below the dark footer. Pull the footer
   down into that reserved zone (and pad it back) so its dark bg fills the gap
   while the bottom row still clears the pill. */
body.platform .vm-footer{margin-bottom:calc(-1 * var(--dn-safe));padding-bottom:calc(40px + var(--dn-safe))}
@media(max-width:700px){
  body.platform .vm-footer{margin-bottom:calc(-1 * var(--dn-strip));padding-bottom:calc(40px + var(--dn-strip))}
}

/* ============================================================
   DONE v2 · POST-PURCHASE WIZARD (D56)
   Two skippable steps after the yay; done steps collapse to a
   slim ✓ line; the finish ("Wir melden uns bei Ihnen") takes
   over the page like a second hero.
   ============================================================ */
body.platform .wz-wrap{max-width:640px;margin:0 auto;padding:0 22px 30px}
body.platform .wz-bar{display:flex;gap:8px;margin:0 0 22px}
body.platform .wz-seg{flex:1;height:5px;border-radius:99px;background:#ececec;transition:background .4s}
body.platform .wz-seg.on{background:var(--rust)}

body.platform .wz-step{margin-bottom:14px;overflow:hidden;
  transition:opacity .4s ease,transform .4s ease,border-color .4s,background .4s}
body.platform .wz-body{padding:26px 28px}
body.platform .wz-row{display:flex;gap:14px;align-items:baseline}
body.platform .wz-grow{flex:1;min-width:0}
body.platform .wz-num{flex:none;font-family:var(--serif);font-weight:700;color:var(--rust)}
body.platform .wz-body h3{font-family:var(--serif);font-size:1.08rem;margin:0 0 4px}
body.platform .wz-body p{font-size:.88rem;line-height:1.5;margin:0 0 4px}

/* completed → slim ✓ line */
body.platform .wz-mini{display:none;align-items:center;gap:10px;padding:11px 18px;
  font-size:.84rem;font-weight:600;color:var(--ink-soft)}
body.platform .wz-check{width:20px;height:20px;border-radius:50%;background:var(--moss);color:#fff;
  font-size:.7rem;display:inline-flex;align-items:center;justify-content:center;flex:none}
body.platform .wz-step.wz-done{border-color:var(--line-soft);background:#fafafa}
body.platform .wz-step.wz-done .wz-body{display:none}
body.platform .wz-step.wz-done .wz-mini{display:flex;animation:wz-minifade .45s ease}
@keyframes wz-minifade{from{opacity:0}to{opacity:1}}
body.platform .wz-locked{opacity:.28;transform:translateY(10px);pointer-events:none;filter:grayscale(.4)}

/* primary action sits right, the quiet skip link left of it */
body.platform .wz-actions{display:flex;justify-content:flex-end;align-items:center;gap:16px;margin-top:16px}
body.platform .wz-skip{font-size:.84rem;color:var(--ink-soft);text-decoration:underline;cursor:pointer;
  background:none;border:none;font-family:inherit;padding:0}
body.platform .wz-skip:hover{color:var(--ink)}

/* step-2 option cards */
body.platform .wz-opts{display:grid;gap:10px}
body.platform .wz-opt{text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:13px;
  padding:14px 17px;cursor:pointer;font-family:var(--sans);transition:border-color .15s,box-shadow .15s}
body.platform .wz-opt:hover{border-color:#c9bfa9}
body.platform .wz-opt b{display:block;font-size:.92rem;font-weight:650;color:var(--ink);margin-bottom:2px}
body.platform .wz-opt span{font-size:.8rem;color:var(--ink-soft);line-height:1.4;display:block}

/* finish: the page's only remaining content */
body.platform #wzDone{display:none;text-align:center;padding:56px 20px 40px;
  opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
body.platform #wzDone.show{display:block}
body.platform #wzDone.in{opacity:1;transform:none}
body.platform .wz-icon{width:92px;height:92px;margin:0 auto 20px}
/* the quotable reference under the hero copy: quiet, monospaced, not a headline */
body.platform .done-ref{margin:18px 0 0;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
body.platform .wz-out{opacity:0 !important;transform:translateY(-8px) !important;
  transition:opacity .4s ease,transform .4s ease;pointer-events:none}

/* entrance + finish choreography (skipped for reduced-motion users) */
@media (prefers-reduced-motion: no-preference){
  body.platform .wz-seal{animation:wz-sealpop .6s cubic-bezier(.2,.9,.3,1.3) both}
  body.platform .wz-sealcheck{stroke-dasharray:26;animation:wz-checkdraw .45s ease-out .4s both}
  body.platform .wz-an1{animation:wz-fadeup .55s ease .35s both}
  body.platform .wz-an2{animation:wz-fadeup .55s ease .5s both}
  body.platform .wz-bar{animation:wz-fadeup .5s ease .65s both}
  body.platform #wz1{animation:wz-fadeup .55s ease .75s both}
  body.platform .wz-plane{opacity:0}
  body.platform #wzDone.in .wz-plane{animation:wz-planein .7s cubic-bezier(.25,.8,.35,1) both}
  body.platform #wzDone.in .display{animation:wz-fadeup .55s ease .35s both}
}
@keyframes wz-sealpop{0%{transform:scale(.45);opacity:0}70%{transform:scale(1.07);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes wz-checkdraw{from{stroke-dashoffset:26}to{stroke-dashoffset:0}}
@keyframes wz-fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes wz-planein{from{opacity:0;transform:translate(-22px,20px) rotate(-8deg)}to{opacity:1;transform:none}}