/* =====================================================================
   Distribot — public landing styles (B1.3)
   Scoped under `#distribot-landing` so nothing here leaks into Refactory's
   shared chrome on other URLs. Lifted + condensed from the external design
   handoff at design_handoff_distribot_world/dw-styles.css.
   ===================================================================== */

/* Token block is hoisted to `.dw-mk` so both the landing (`#distribot-landing`)
   and the login surface (`#distribot-login`) inherit the same custom-property
   palette. Any new Distribot public surface that wraps its body in `.dw-mk`
   gets the design tokens for free.
   #1113 (PALETTE-LIGHT re-ink, chrome.css side) changed no base-token value —
   the names + values here stay aligned with chrome.css's token block.
   The shop window (RWD-LRD-0089..0103, 2026-09-07) borrows the operator
   screens' role tokens it renders (the 27 names below the font stack — light
   values = chrome.css's light declarations, verbatim; the parity test in
   tests/test_distribot_shop_window.py pins them), adds the nav veil as a token
   (0.82 — the desk's alpha; the handoff's composites recompute at it) and the
   radius scale (PORTING S11), and declares the DARK values once, under the OS
   preference, on the visitor pages' own modifier (RWD-LRD-0096) — see the
   `@media (prefers-color-scheme: dark)` block after this one. */
.dw-mk {
  /* Core palette — sage primary + warm stone accent (per the brand family). */
  --dw-bg:              #fbf9f4;
  --dw-surface:         #ffffff;
  --dw-ink:             #1b1c19;
  --dw-ink-soft:        #434842;
  --dw-muted:           #6f7569;
  --dw-line:            #e6e5dc;
  --dw-primary:         #4f604f;  /* sage */
  --dw-primary-soft:    #d9e2d6;
  --dw-primary-mist:    #f2f6f0;
  --dw-stone:           #b8826b;  /* warm-stone accent */
  --dw-stone-soft:      #ead9cc;

  /* Layout tokens */
  --dw-page-max:        1200px;
  --dw-gutter:          clamp(20px, 4vw, 56px);
  --dw-section-y:       96px;

  /* Type scale */
  --dw-display:         clamp(40px, 6vw, 72px);
  --dw-h2:              clamp(28px, 3.5vw, 44px);
  --dw-h3:              clamp(20px, 1.6vw, 24px);
  --dw-body:            17px;
  --dw-meta:            11px;

  /* Shadows */
  --dw-shadow-lift:     0 24px 64px -16px rgba(58, 74, 58, 0.18);
  --dw-shadow-soft:     0 12px 32px -8px rgba(58, 74, 58, 0.10);

  /* Font stack — falls back gracefully when the project hasn't loaded its
     custom families yet. */
  --dw-font-sans:       system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --dw-font-mono:       ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Borrowed from the operator screens (chrome.css light, verbatim) — the
     role tokens the shop window renders: insets, quiet meta ink, the deep
     hover on primary, the clay ink/fill pair, danger, the pill inks, the
     error strip, the status dots, the subtle shadow, the inverse pair, the
     ADR-0055 surface ladder + outline. */
  --dw-surface-low:     #f4f1eb;
  --dw-sunken:          #f4f1eb;
  --dw-meta-ink:        #666c60;
  --dw-primary-deep:    #3a4a3a;
  --dw-stone-deep:      #8c5d48;
  --dw-stone-weak:      #efe0d6;
  --dw-danger:          #a5503f;
  --dw-danger-weak:     #f3e3df;
  --dw-danger-deep:     #7d3a2d;
  --dw-danger-ring:     rgba(165, 80, 63, 0.18);
  --dw-pill-ok-ink:     #3d4e3d;
  --dw-pill-warn-ink:   #7a5a2a;
  --dw-pill-err-ink:    #8a3a32;
  --dw-error-strip-bg:  #fdecea;
  --dw-error-strip-line:#f5c2bc;
  --dw-error-strip-ink: #c1361e;
  --dw-status-ready:    #4f604f;
  --dw-status-staged:   #b8826b;
  --dw-status-failed:   #a8403a;
  --dw-status-archived: #6f7569;
  --dw-shadow-subtle:   0 1px 2px rgba(27, 28, 25, 0.06), 0 2px 8px rgba(27, 28, 25, 0.04);
  --dw-inverse-surface: #1b1c19;
  --dw-inverse-ink:     #fbf9f4;
  --s-base:             #f0eee9;
  --s-high:             #e0d9c9;
  --s-highest:          #d6cdb9;
  --outline:            #c4c8c0;

  /* The nav veil — the page colour at 82% under the blur (the handoff's
     composites: #fcfaf6 over a white card, all pairs ≥ 6.46). Replaces the
     rgba literal the nav carried. */
  --dw-nav-veil:        rgba(251, 249, 244, 0.82);

  /* Shape — the shop window's scale, tokenized once (PORTING S11). Namespaced
     so the operator screens' --radius-* cannot collide; the name link's 4 px
     focus radius and the logo mark's 5 px stay glyph-scale literals. */
  --dw-radius-card:     16px;
  --dw-radius-panel:    12px;
  --dw-radius-control:  10px;
  --dw-radius-pill:     999px;

  background: var(--dw-bg);
  color: var(--dw-ink);
  font-family: var(--dw-font-sans);
  font-size: var(--dw-body);
  line-height: 1.55;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

/* Dark, by the OS preference alone — CSS only, no script, no storage, no
   toggle (RWD-LRD-0096). Values = chrome.css's `.dw-shell[data-theme="dark"]`
   block, verbatim, pinned by the parity test; the veil is the dark page colour
   at the same alpha. Scoped to the visitor pages' modifier: the gated landing
   and login stay light (RWD-LRD-0028 — marketing carries no dark scope). The
   root's colour scheme follows so the canvas beyond the page (overscroll, the
   form controls, the scrollbars) is the UA's dark — no page-ground literal. */
@media (prefers-color-scheme: dark) {
  :root:has(.dw-mk--visitor) { color-scheme: dark; }
  .dw-mk--visitor {
    color-scheme: dark;
    --dw-bg:              #141512;
    --dw-surface:         #1e201c;
    --dw-ink:             #f1efe9;
    --dw-ink-soft:        #cac9c0;
    --dw-muted:           #969890;
    --dw-line:            #32352e;
    --dw-primary:         #8fae8b;
    --dw-primary-soft:    #33402f;
    --dw-primary-mist:    #1e261d;
    --dw-stone:           #d0a184;
    --dw-stone-soft:      #4a3428;
    --dw-shadow-soft:     0 12px 32px -8px rgba(0, 0, 0, 0.55);
    --dw-shadow-lift:     0 24px 64px -16px rgba(0, 0, 0, 0.70);
    --dw-surface-low:     #1a1c18;
    --dw-sunken:          #272925;
    --dw-meta-ink:        #969890;
    --dw-primary-deep:    #a6c2a2;
    --dw-stone-deep:      #e0b393;
    --dw-stone-weak:      #3a2a20;
    --dw-danger:          #dd8a76;
    --dw-danger-weak:     #3b2621;
    --dw-danger-deep:     #eda893;
    --dw-danger-ring:     rgba(221, 138, 118, 0.28);
    --dw-pill-ok-ink:     #a8c4a4;
    --dw-pill-warn-ink:   #dcb877;
    --dw-pill-err-ink:    #eb9a8e;
    --dw-error-strip-bg:  #3a2320;
    --dw-error-strip-line:#5c3b35;
    --dw-error-strip-ink: #f0a091;
    --dw-status-ready:    #8fae8b;
    --dw-status-staged:   #d0a184;
    --dw-status-failed:   #e08a80;
    --dw-status-archived: #969890;
    --dw-shadow-subtle:   0 1px 2px rgba(0, 0, 0, 0.40), 0 2px 8px rgba(0, 0, 0, 0.30);
    --dw-inverse-surface: #ece9e1;
    --dw-inverse-ink:     #1b1c19;
    --s-base:             #232520;
    --s-high:             #2b2e27;
    --s-highest:          #343830;
    --outline:            #3a3e35;
    --dw-nav-veil:        rgba(20, 21, 18, 0.82);
  }
}

.dw-mk *,
.dw-mk *::before,
.dw-mk *::after { box-sizing: border-box; }
/* Links inherit their ink — scoped OFF the buttons and wrapped in :where():
   an unscoped `.dw-mk a { color }` (0,1,1) outranks every `.dw-btn--*` face
   (0,1,0) and paints an anchor button's label in inherited ink — the F15 trap
   in its second guise, measured live on the shipped board's "Sell on
   Distribot" (ink on sage). :where() keeps the rule below every component's
   own ink (the card name, the logo, the nav links, the landing's footer). */
.dw-mk :where(a:not(.dw-btn)) { color: inherit; text-decoration: none; }
/* The shop window's links are sage by default (PORTING S3) — same scope, same
   :where(), so the component inks above still win. Visitor pages only: the
   gated landing's link inks stand. */
.dw-mk--visitor :where(a:not(.dw-btn)) { color: var(--dw-primary); }
.dw-mk--visitor :where(a:not(.dw-btn)):hover { color: var(--dw-primary-deep); }
.dw-mk :focus-visible { outline: 2px solid var(--dw-primary); outline-offset: 2px; }
.dw-mk button:not(.dw-btn) { font: inherit; cursor: pointer; border: 0; background: none; }
.dw-mk button.dw-btn { font-family: inherit; }
.dw-mk input, .dw-mk select, .dw-mk textarea { font: inherit; color: inherit; }
/* The visitor page IS the ground: the token background covers the viewport
   and the UA's 8 px body margin never frames it (base.html carries no body
   rule by design — LR Q2 — so the reset is scoped here, to these pages). */
.dw-mk--visitor { min-height: 100vh; }
body:has(> .dw-mk--visitor) { margin: 0; }

/* ─────────────── Layout helpers ─────────────── */
.dw-mk { background: var(--dw-bg); }
.dw-mk__wrap { max-width: var(--dw-page-max); margin: 0 auto; padding: 0 var(--dw-gutter); }
.dw-mono { font-family: var(--dw-font-mono); font-size: 0.9em; color: var(--dw-primary); }

/* ─────────────── Nav ─────────────── */
.dw-mk__nav {
  position: sticky; top: 0; z-index: 30;
  background: var(--dw-nav-veil);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid var(--dw-line);
}
.dw-mk__navInner {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  max-width: var(--dw-page-max); margin: 0 auto; padding: 0 var(--dw-gutter);
  min-height: 60px;
}
.dw-mk__logo {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
  color: var(--dw-ink);
  margin-right: auto;
}
.dw-mk__logo:hover { color: var(--dw-ink); }
.dw-mk__logoMark {
  width: 18px; height: 18px; flex: none;
  border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
}
.dw-mk__logoMark img { display: block; width: 18px; height: 18px; }
.dw-mk__navLinks { display: flex; gap: 22px; align-items: center; }
.dw-mk__navLink {
  font-size: 14px; font-weight: 600; color: var(--dw-ink-soft);
  transition: color .15s ease;
}
.dw-mk__navLink:hover { color: var(--dw-primary); }
.dw-mk__navCtas { display: flex; gap: 10px; align-items: center; }
/* Reflow, no hamburger (handoff §2): below 720 the links move to a full-width
   second row (scrollable if they ever overflow); the logo and both exits stay
   on row one. */
@media (max-width: 719px) {
  .dw-mk__navInner { gap: 10px; min-height: 56px; padding-top: 8px; padding-bottom: 8px; }
  .dw-mk__navLinks { order: 3; flex-basis: 100%; gap: 18px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .dw-mk__navLink { font-size: 13px; white-space: nowrap; }
  .dw-mk__navCtas .dw-btn { padding: 9px 12px; font-size: 13px; }
  .dw-mk__navCtas .dw-btn--ghost { padding: 9px 8px; }
}
@media (min-width: 720px) and (max-width: 1079px) {
  .dw-mk__navLinks { gap: 16px; }
  .dw-mk__navLink { font-size: 13.5px; }
}

/* ─────────────── Buttons ─────────────── */
/* Three faces, one geometry (handoff §6). The label on a filled button is
   --dw-surface in both themes (6.73 / 6.72) — the operator screens' rule,
   one rule across both hosts. */
.dw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 10px 18px;
  border-radius: var(--dw-radius-pill);
  font-size: 14px; font-weight: 700; letter-spacing: .005em;
  border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap; flex: none;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 160ms ease, transform 120ms ease;
}
.dw-btn--lg { min-height: 48px; padding: 13px 24px; font-size: 15px; }
.dw-btn--primary {
  background: var(--dw-primary); color: var(--dw-surface);
  border-color: var(--dw-primary);
  box-shadow: var(--dw-shadow-soft);
}
.dw-btn--primary:hover {
  background: var(--dw-primary-deep); border-color: var(--dw-primary-deep); color: var(--dw-surface);
  box-shadow: var(--dw-shadow-lift); transform: translateY(-1px);
}
.dw-btn--primary:active { transform: translateY(0); box-shadow: var(--dw-shadow-subtle); background: var(--dw-primary-deep); }
.dw-btn--outline {
  background: var(--dw-surface); color: var(--dw-ink);
  border-color: var(--dw-line);
}
.dw-btn--outline:hover { color: var(--dw-primary); border-color: var(--dw-primary); }
.dw-btn--outline:active { background: var(--dw-surface-low); }
.dw-btn--ghost { background: transparent; color: var(--dw-ink-soft); }
.dw-btn--ghost:hover { color: var(--dw-primary); background: var(--dw-surface-low); }
.dw-btn:focus-visible { outline: 2px solid var(--dw-primary); outline-offset: 3px; }
/* The one legitimate disabled control on this host: the demand form's
   submit while posting. */
.dw-btn:disabled, .dw-btn[aria-disabled="true"] {
  background: var(--dw-surface-low); color: var(--dw-ink-soft); border-color: var(--dw-line);
  box-shadow: none; cursor: progress; transform: none;
}

/* ─────────────── Hero ─────────────── */
.dw-hero {
  padding: clamp(56px, 9vw, 120px) 0 clamp(56px, 9vw, 96px);
  background:
    radial-gradient(800px 400px at 75% -10%, var(--dw-primary-mist), transparent 60%),
    radial-gradient(600px 280px at 5% 10%, var(--dw-stone-soft), transparent 65%);
}
.dw-hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 980px) {
  .dw-hero__inner { grid-template-columns: 1fr; }
}
.dw-hero__eyebrow {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 20px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dw-primary);
  background: var(--dw-primary-soft);
  border-radius: 999px;
}
.dw-hero__title {
  margin: 0;
  font-size: var(--dw-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--dw-ink);
}
.dw-hero__title em {
  font-style: normal;
  color: var(--dw-primary);
}
.dw-hero__lede {
  margin: 24px 0 28px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--dw-ink-soft);
  max-width: 540px;
}
.dw-hero__ctas {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-bottom: 16px;
}
.dw-hero__note {
  margin: 0 0 32px;
  font-size: 13px;
  color: var(--dw-muted);
}

/* AEO capsule (under hero) */
.dw-aeo {
  margin-top: 24px;
  padding: 20px 22px;
  background: var(--dw-surface);
  border: 1px solid var(--dw-line);
  border-radius: 14px;
  box-shadow: var(--dw-shadow-soft);
  max-width: 580px;
}
.dw-aeo__q {
  margin: 0 0 8px;
  font-size: 13px; font-weight: 700;
  color: var(--dw-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dw-aeo__a {
  margin: 0;
  font-size: 15px;
  color: var(--dw-ink-soft);
  line-height: 1.55;
}

/* ─────────────── Pipeline diagram ─────────────── */
.dw-pipeline {
  background: var(--dw-surface);
  border: 1px solid var(--dw-line);
  border-radius: 20px;
  padding: clamp(20px, 3vw, 32px);
  box-shadow: var(--dw-shadow-lift);
  /* Width-aware: the row stacks until the pipeline's OWN box (not the
     viewport) is wide enough for 3 cards + 2 arrows. Fixes the cramping
     when the pipeline sits in the hero's narrow right rail. Design drop:
     design_handoff_landing_hotfix (2026-05-29). */
  container: dw-pipeline / inline-size;
}
.dw-pipeline__row {
  display: flex;
  flex-direction: column;   /* stacked by default — each card gets full width, copy never slivers */
  align-items: stretch;
  gap: 12px;
}
.dw-pipe {
  min-width: 0;
  padding: 18px;
  background: var(--dw-bg);
  border: 1px solid var(--dw-line);
  border-radius: 12px;
}
.dw-pipe__brand {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600;
  color: var(--dw-ink-soft);
  margin-bottom: 12px;
}
.dw-pipe__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--dw-primary);
}
.dw-pipe--1 .dw-pipe__dot { background: #c87b3d; /* Columbot rust */ }
.dw-pipe--2 .dw-pipe__dot { background: #4a5b7a; /* Refactory slate */ }
.dw-pipe--3 .dw-pipe__dot { background: var(--dw-primary); }
.dw-pipe__verb {
  margin: 0 0 8px;
  font-size: var(--dw-h3); font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--dw-ink);
}
.dw-pipe__sub {
  margin: 0 0 12px;
  font-size: 14px; color: var(--dw-muted); line-height: 1.5;
}
.dw-pipe__chip {
  display: inline-block;
  padding: 4px 8px;
  font-size: 11px;
  background: var(--dw-primary-mist);
  border-radius: 6px;
  color: var(--dw-primary);
}
.dw-pipe__arrow {
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  color: var(--dw-stone);
  font-weight: 300;
  transform: rotate(90deg);   /* points down while the chain is stacked */
}
/* Horizontal only when there's genuine room — a container query on the
   pipeline box, so it works full-width OR in the squeezed hero rail. */
@container dw-pipeline (min-width: 600px) {
  .dw-pipeline__row { flex-direction: row; }
  .dw-pipe { flex: 1 1 0; }
  .dw-pipe__arrow { transform: none; }
}

/* ─────────────── Sections ─────────────── */
.dw-section {
  padding: var(--dw-section-y) 0;
}
.dw-section--alt { background: var(--dw-primary-mist); }
.dw-section__head {
  max-width: 720px;
  margin: 0 0 48px;
}
.dw-section__eyebrow {
  display: inline-block;
  padding: 4px 10px;
  margin-bottom: 12px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dw-stone);
  background: var(--dw-stone-soft);
  border-radius: 999px;
}
.dw-section__title {
  margin: 0 0 16px;
  font-size: var(--dw-h2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--dw-ink);
}
.dw-section__lede {
  margin: 0;
  font-size: 18px;
  color: var(--dw-ink-soft);
  line-height: 1.55;
}

/* ─────────────── Benefits / How-it-works 3-up cards ─────────────── */
.dw-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 880px) {
  .dw-benefits { grid-template-columns: 1fr; }
}
.dw-benefit {
  padding: 28px 24px;
  background: var(--dw-surface);
  border: 1px solid var(--dw-line);
  border-radius: 16px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.dw-benefit:hover {
  transform: translateY(-2px);
  box-shadow: var(--dw-shadow-soft);
}
.dw-benefit__num {
  display: inline-block;
  font-family: var(--dw-font-mono);
  font-size: 12px;
  color: var(--dw-stone);
  margin-bottom: 14px;
}
.dw-benefit__title {
  margin: 0 0 10px;
  font-size: var(--dw-h3);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.dw-benefit__body {
  margin: 0 0 16px;
  font-size: 15px;
  color: var(--dw-ink-soft);
  line-height: 1.55;
}
.dw-benefit__foot {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px;
  color: var(--dw-primary);
  font-weight: 600;
}

/* ─────────────── Comparison table (legacy AEO content preserved) ─────────────── */
.dw-compare__table {
  width: 100%;
  border-collapse: collapse;
  background: var(--dw-surface);
  border: 1px solid var(--dw-line);
  border-radius: 14px;
  overflow: hidden;
  font-size: 15px;
}
.dw-compare__table th,
.dw-compare__table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--dw-line);
  vertical-align: top;
}
.dw-compare__table thead th {
  background: var(--dw-primary-mist);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--dw-primary);
}
.dw-compare__table tbody th {
  font-weight: 600;
  color: var(--dw-ink);
}
.dw-compare__table tbody td {
  color: var(--dw-ink-soft);
}
.dw-compare__own {
  background: var(--dw-primary-soft) !important;
}
.dw-compare__own th,
.dw-compare__own td {
  color: var(--dw-primary);
  font-weight: 600;
}

/* ─────────────── Social proof ─────────────── */
.dw-social { display: grid; gap: 36px; }
.dw-social__logos {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 24px;
  align-items: center;
}
.dw-social__logo {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600;
  color: var(--dw-ink-soft);
  opacity: 0.85;
}
.dw-social__logoMark {
  width: 18px; height: 18px;
  border-radius: 4px;
  background: var(--dw-primary);
  opacity: 0.4;
}
.dw-social__quotes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 720px) {
  .dw-social__quotes { grid-template-columns: 1fr; }
}
.dw-quote {
  padding: 24px;
  background: var(--dw-surface);
  border: 1px solid var(--dw-line);
  border-radius: 14px;
}
.dw-quote__body {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--dw-ink);
  font-style: italic;
}
.dw-quote__attr {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--dw-muted);
}
.dw-quote__avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--dw-primary);
  color: var(--dw-bg);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em;
}

/* ─────────────── FAQ ─────────────── */
.dw-faq {
  display: grid; gap: 12px;
  margin: 0;
}
.dw-faq__item {
  background: var(--dw-surface);
  border: 1px solid var(--dw-line);
  border-radius: 12px;
  padding: 20px 24px;
}
.dw-faq__q {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--dw-ink);
}
.dw-faq__a {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--dw-ink-soft);
}

/* ─────────────── CTA strip ─────────────── */
.dw-ctaStrip {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 36px 40px;
  background: linear-gradient(135deg, var(--dw-primary) 0%, #3a4a3a 100%);
  color: var(--dw-bg);
  border-radius: 20px;
  flex-wrap: wrap;
}
.dw-ctaStrip__h {
  margin: 0 0 6px;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.dw-ctaStrip__sub {
  margin: 0;
  font-size: 15px;
  opacity: 0.85;
}
.dw-ctaStrip__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px;
  background: var(--dw-bg);
  color: var(--dw-primary);
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
}

/* ─────────────── Footer ─────────────── */
.dw-footer {
  border-top: 1px solid var(--dw-line);
  padding: 56px 0 32px;
  background: var(--dw-bg);
}
.dw-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 40px;
}
@media (max-width: 880px) {
  .dw-footer__grid { grid-template-columns: 1fr 1fr; }
}
.dw-footer__lede {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--dw-muted);
  line-height: 1.55;
  max-width: 320px;
}
.dw-footer__colTitle {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dw-ink-soft);
}
.dw-footer__links {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 8px;
}
.dw-footer__links a {
  font-size: 14px;
  color: var(--dw-muted);
  transition: color .15s ease;
}
.dw-footer__links a:hover { color: var(--dw-primary); }
.dw-footer__bottom {
  display: flex; justify-content: space-between; gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--dw-line);
  font-size: 12px;
  color: var(--dw-muted);
  flex-wrap: wrap;
}

/* P4 row 1 (LR 2026-06-12): muted capsule variant for section heads —
   the hero capsule stays prominent; per-H2 capsules read as quiet
   definitive answers (D2 design note: readability over schema-greed). */
.dw-aeo__a--section {
  max-width: 56ch;
  margin: 14px auto 0;
  font-size: 0.92em;
  color: rgba(47, 58, 47, 0.78);
}

/* ---- Pricing ladder (P4 row 4 — LR 2026-06-12 O3, design brief D1) ----
   Marketing-quiet translation of the in-app plan picker: hero €/mo figure,
   one subtle accent (middle tier), dashed Enterprise row, mobile stack. */
.dw-pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 860px) {
  .dw-pricing { grid-template-columns: 1fr; }
}
.dw-price {
  background: #fff;
  border: 1px solid rgba(47, 58, 47, 0.12);
  border-radius: 14px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dw-price--accent {
  border-color: #4f604f;
  box-shadow: 0 1px 0 rgba(79, 96, 79, 0.18);
}
.dw-price__tier {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
}
.dw-price__figure {
  font-size: 40px;
  font-weight: 700;
  color: #2f3a2f;
  line-height: 1.1;
}
.dw-price__figure small {
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
}
.dw-price__credits { font-size: 14px; color: #2f3a2f; }
.dw-price__rate { font-size: 12px; color: #8a8a8a; }
.dw-price__who { font-size: 13px; color: #4b5563; margin: 8px 0 0; flex: 1; }
.dw-price__cta { margin-top: 14px; text-align: center; }
.dw-pricing__enterprise {
  margin-top: 18px;
  border: 1.5px dashed rgba(79, 96, 79, 0.4);
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.dw-pricing__enterpriseCopy { margin: 0; font-size: 14px; color: #2f3a2f; }

/* At-cost AI video (Lane C, ADR-0070 PR-V4) — the "best bargain" anchor under
   the ladder. Sage-tinted panel; prices render from the costing function. */
.dw-atcost {
  margin-top: 18px;
  border: 1px solid rgba(79, 96, 79, 0.28);
  border-radius: 14px;
  padding: 20px 22px;
  background: rgba(79, 96, 79, 0.04);
}
.dw-atcost__lede { margin: 0 0 14px; font-size: 14px; color: #2f3a2f; line-height: 1.5; }
.dw-atcost__rungs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 860px) {
  .dw-atcost__rungs { grid-template-columns: 1fr; }
}
.dw-atcost__rung {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(47, 58, 47, 0.12);
  border-radius: 10px;
  padding: 12px 14px;
  background: #fff;
}
.dw-atcost__quality { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7280; }
.dw-atcost__price { font-size: 22px; font-weight: 700; color: #4f604f; }
.dw-atcost__note { margin: 12px 0 0; font-size: 12px; color: #8a8a8a; }
/* At-cost AI image (Lane D, ADR-0071 PR-I5) — model-NAME chips (no per-model €;
   image models price live per generation, shown in-app). Reuses the .dw-atcost
   panel; the chip row replaces the video price rungs. */
.dw-atcost__models {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dw-atcost__model {
  border: 1px solid rgba(47, 58, 47, 0.12);
  border-radius: 999px;
  padding: 6px 12px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: #4f604f;
}