/* =========================================================
   Exponential Clips — landing page
   Dark glass. Plain CSS, no build step, no external requests.
   ========================================================= */

:root {
  /* ---- LIGHT THEME ----------------------------------------------------
     Page washes warm cream into cool grey (the dent.global treatment),
     with pure-white blocks zebra-striped over the top. Three surfaces
     only: --bg (washed page), --surface (white), --ink-block (the one
     dark block at the close). */
  --bg-warm:   #fcf3ee;   /* top of the page wash — warm cream */
  --bg:        #f3f5fb;   /* body of the wash — cool light grey */
  --surface:   #ffffff;   /* white zebra blocks and cards */
  --ink-block: #101522;   /* the single dark section (booking) */

  --ink:       #10131d;   /* headings */
  --body:      #4b5265;   /* body copy */
  --muted:     #6a7183;   /* labels, captions — kept at 4.6:1 on white */

  /* ---- ACCENT: change these and the whole page follows ----------------
     --accent is the text-safe copper (5.6:1 on white, so it can carry
     small text); --accent-bright is the original lighter copper, used
     only for fills and graphics where contrast rules don't apply. */
  --accent-rgb:    154 82 48;           /* copper, safe on white */
  --accent-bright: #e2a06a;             /* fills, bars, dots, graphics */
  --accent-lite:   #fdf2e9;             /* tinted panel wash */
  --accent-2:      #7d4226;             /* hover / deep stop */
  --accent-ink:    #ffffff;             /* text ON the accent */

  --accent:      rgb(var(--accent-rgb));
  --accent-glow: rgb(var(--accent-rgb) / .18);

  --glass:      rgba(255, 255, 255, .70);
  --glass-2:    rgba(255, 255, 255, .92);
  --edge:       rgba(16, 19, 29, .11);
  --edge-soft:  rgba(16, 19, 29, .07);

  --shadow-sm: 0 1px 2px rgba(16,19,29,.04), 0 8px 24px -16px rgba(16,19,29,.18);
  --shadow-md: 0 2px 6px rgba(16,19,29,.05), 0 24px 50px -30px rgba(16,19,29,.28);

  --wrap: 1160px;
  --r: 16px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --serif: "Bodoni 72", Didot, "Playfair Display", Georgia, "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 120px; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  color: var(--body);
  background:
    linear-gradient(180deg, var(--bg-warm) 0%, var(--bg) 620px) no-repeat,
    var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 {
  color: var(--ink); font-weight: 600; letter-spacing: -.028em; line-height: 1.1; margin: 0 0 .5em;
  text-wrap: balance;   /* keeps a single short word off its own line */
}
h1 em, h2 em, h3 em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  letter-spacing: -.012em; color: var(--ink);
}
p { margin: 0 0 1.05em; }
a { color: var(--accent); text-underline-offset: 3px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong { color: var(--ink); font-weight: 600; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--accent); color: var(--accent-ink); padding: 10px 16px; border-radius: 8px; text-decoration: none; font-weight: 600; transition: top .15s ease; }
.skip:focus { top: 14px; }

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }

/* ---------- ambient glows ---------- */
.glow { position: fixed; z-index: 0; pointer-events: none; border-radius: 50%; filter: blur(60px); opacity: .95; }
.glow-a { top: -16vh; left: -12vw; width: 62vw; height: 62vw; max-width: 840px; max-height: 840px;
  background: radial-gradient(circle, rgba(226,160,106,.66) 0%, rgba(226,160,106,0) 72%); }
.glow-b { top: 4vh; right: -16vw; width: 56vw; height: 56vw; max-width: 760px; max-height: 760px;
  background: radial-gradient(circle, rgba(150,175,235,.62) 0%, rgba(150,175,235,0) 72%); }

/* ---------- announcement strip ---------- */
.strip { position: relative; z-index: 20; background: var(--ink-block); border-bottom: 1px solid var(--edge-soft); font-size: 13.5px; }
.strip-in { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 40px; flex-wrap: wrap; color: #c9cedb; text-align: center; }
.strip a { color: var(--accent-bright); text-decoration: none; font-weight: 600; white-space: nowrap; }
.strip strong { color: #fff; }
.strip a:hover { text-decoration: underline; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 0 3px rgba(226,160,106,.25); flex: none; }

/* ---------- glass primitive ----------
   No backdrop-filter here on purpose. Over a near-black page the
   translucent gradient is visually identical to a blurred one, and
   ~25 stacked filter layers is the single most expensive thing a
   page like this can do on a mid-range phone. The blur is kept only
   on the nav and the hero chip, where it actually sits over content. */
.glass {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}

/* ---------- header pill nav ---------- */
.site-head { position: sticky; top: 12px; z-index: 60; padding-top: 14px; }
.pillnav {
  display: flex; align-items: center; gap: 18px;
  padding: 9px 9px 9px 20px; border-radius: 999px;
  /* dark pill floating over both light and dark sections */
  background: var(--ink-block);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: var(--shadow-sm);
  transition: border-color .25s ease, background .25s ease;
}
.site-head.is-stuck .pillnav { background: var(--ink-block); border-color: rgba(255,255,255,.16); box-shadow: var(--shadow-md); }

/* ---------- brand lockup ----------
   The Splice mark (brand/exponentialclips-splice.svg) is inlined so it
   inherits the surrounding text colour via currentColor. Two rules from
   the brand README that are easy to break:
     · 36px here, never below 20px — the splice gap closes and it
       reads as a plain multiplication sign
     · clear space is half the mark's height on every side, which is what
       18px gap is for (half the 36px mark)
   The gap in the lower-left arm is the whole idea. Don't close it. */
.brand {
  display: inline-flex; align-items: center; gap: 18px;   /* clear space = half the mark */
  color: #fff; text-decoration: none; white-space: nowrap;
}
.brand-mark { width: 36px; height: 36px; flex: none; display: block; }

.brand-wordmark { font-size: 23px; font-weight: 400; letter-spacing: -.035em; }
.brand-wordmark b { font-weight: 800; }

.nav { display: flex; align-items: center; gap: 24px; margin-inline: auto; }
.nav a { color: #b6bdcc; font-size: 15px; text-decoration: none; transition: color .16s ease; }
.nav a:hover { color: #fff; }

.nav-toggle { display: none; width: 40px; height: 40px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); cursor: pointer; align-items: center; justify-content: center; }
.bars { display: block; width: 16px; }
.bars i { display: block; height: 1.5px; background: #fff; border-radius: 2px; transition: transform .2s ease; }
.bars i + i { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] i:first-child { transform: translateY(3.2px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i:last-child { transform: translateY(-3.2px) rotate(-45deg); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-weight: 600; font-size: 16px; cursor: pointer;
  padding: 13px 24px; border-radius: 999px; text-decoration: none;
  color: var(--accent-ink);
  background: var(--accent);
  border: 1px solid var(--accent);
  box-shadow: 0 8px 22px -12px rgb(var(--accent-rgb) / .55);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.btn:hover { transform: translateY(-1px); background: var(--accent-2); border-color: var(--accent-2); box-shadow: 0 14px 30px -12px rgb(var(--accent-rgb) / .8); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .55; cursor: default; transform: none; }
.btn-sm { padding: 10px 18px; font-size: 14.5px; }
.btn-lg { padding: 15px 30px; font-size: 17px; }
.btn-block { width: 100%; }

.ghost {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px;
  border-radius: 999px; border: 1px solid var(--edge); background: var(--surface);
  color: var(--ink); font-weight: 500; font-size: 16px; text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: border-color .16s ease, background .16s ease;
}
.ghost::after { content: "↓"; color: var(--muted); font-size: 14px; }
.ghost:hover { border-color: rgba(16,19,29,.18); background: var(--glass-2); }

/* ---------- hero ---------- */
.hero { position: relative; z-index: 1; padding: clamp(60px, 10vw, 118px) 0 clamp(40px, 6vw, 70px); text-align: center; }
.hero-in { max-width: 940px; margin-inline: auto; }

.chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 16px 6px 6px; border-radius: 999px;
  background: var(--glass-2); border: 1px solid var(--edge);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 13.5px; color: var(--body); margin: 0 0 30px;
}
/* A label, not a control — no pill, no fill, or it reads as clickable. */
.chip-tag {
  font-weight: 700; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-bright); background: none; padding: 0;
}
.chip-tag::after { content: ""; display: inline-block; width: 1px; height: 12px; margin: 0 2px 0 10px;
  background: var(--edge); vertical-align: -2px; }
.hero-dark .chip-tag::after, .section-ink .chip-tag::after { background: rgba(255,255,255,.22); }

.hero h1 {
  font-size: clamp(38px, 6.6vw, 78px);
  line-height: 1.02; letter-spacing: -.038em;
  margin: 0 auto .5em; max-width: 15ch;
}
.lede { font-size: clamp(17px, 1.55vw, 20px); max-width: 60ch; margin-inline: auto; color: var(--body); text-wrap: pretty; }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px; }

/* ---------- hero risk line + value bar ---------- */
.risk {
  margin: 22px 0 0; font-size: 14px; color: var(--muted);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px;
}
.risk span[aria-hidden] { color: var(--accent); font-weight: 700; }
.risk-sep { opacity: .4; }

/* ---------- marquee ---------- */
.marquee {
  position: relative; z-index: 1; overflow: hidden;
  border-top: 1px solid var(--edge-soft); border-bottom: 1px solid var(--edge-soft);
  padding: 16px 0; background: rgba(16,19,29,.015);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex; align-items: center; gap: 26px; width: max-content;
  animation: slide 44s linear infinite;
  font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.marquee .sep { color: var(--accent); opacity: .55; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
/* Zebra surfaces. Strict alternation after the hero:
     .section          the page wash (warm cream -> cool grey)
     .section-alt      white block
     .section-feature  warm accent wash (the offer)
     .section-ink      dark block, for contrast at the close
   Keep it a rhythm — every section tinted is the same as none. */
.section-alt {
  /* Translucent so the page wash and the two .glow blobs read boldly through
     the white blocks too (incl. "Who it's for"). */
  background: rgba(255, 255, 255, .34);
  border-top: 1px solid var(--edge-soft);
  border-bottom: 1px solid var(--edge-soft);
}
/* Washed sections carry the same warm gradient as the offer block, at lower
   intensity and from different origins so two of them never look identical.
   Order down the page: -a (top left), -b (bottom right), feature (top centre,
   strongest, used once on the offer). */
.section-wash-a {
  background:
    radial-gradient(105ch 58ch at 12% -18%, var(--accent-lite), rgba(253,242,233,0) 62%),
    rgba(243, 245, 251, .34);
  border-top: 1px solid var(--edge-soft);
  border-bottom: 1px solid var(--edge-soft);
}
.section-wash-b {
  background:
    radial-gradient(105ch 58ch at 88% 118%, var(--accent-lite), rgba(253,242,233,0) 62%),
    rgba(243, 245, 251, .34);
  border-top: 1px solid var(--edge-soft);
  border-bottom: 1px solid var(--edge-soft);
}
.section-feature {
  background:
    radial-gradient(120ch 62ch at 50% -10%, var(--accent-lite), rgba(253,242,233,0) 66%),
    rgba(243, 245, 251, .34);
  border-top: 1px solid var(--edge-soft);
  border-bottom: 1px solid var(--edge-soft);
}
/* Two tinted blocks in a row would cancel each other out. */
.section-feature + .section-feature { border-top: 0; }

.section { position: relative; z-index: 1; padding: clamp(66px, 8.5vw, 108px) 0; }
.kicker {
  display: inline-block; padding: 5px 14px; border-radius: 999px;
  background: var(--glass-2); border: 1px solid var(--edge);
  font-size: 12px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 22px;
}
.h2 { font-size: clamp(30px, 4vw, 50px); letter-spacing: -.032em; max-width: 20ch; margin-bottom: .45em; }
.sub { font-size: 18px; max-width: 64ch; margin-bottom: 46px; text-wrap: pretty; }

.card { padding: 26px 24px; transition: transform .22s ease, border-color .22s ease; }
.card:hover { transform: translateY(-3px); border-color: rgba(16,19,29,.14); }
.card h3 { font-size: 20px; margin-bottom: .5em; }
.card p { font-size: 15.5px; margin-bottom: 0; }

/* ---------- number band ---------- */
.numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 26px; }
.num-card { padding: 26px 24px; text-align: center; }
.num {
  display: block; font-size: clamp(44px, 5.4vw, 68px); font-weight: 600; line-height: 1;
  letter-spacing: -.05em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffffff 25%, var(--accent-lite) 130%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.num-label { display: block; margin-top: 12px; font-size: 14px; color: var(--muted); letter-spacing: .02em; }

/* ---------- the offer ---------- */
/* .offer surface now comes from .section-feature */
.offer-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }

.stack { padding: 32px 30px; }
.stack-h { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.stack-list li { position: relative; padding: 15px 0 15px 34px; border-top: 1px solid var(--edge-soft); }
.stack-list li:first-child { border-top: 0; }
.stack-list li::before {
  content: "✓"; position: absolute; left: 0; top: 16px;
  width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%;
  font-size: 11px; font-weight: 700; color: var(--accent-ink);
  background: var(--accent);
}
.stack-list strong { display: block; font-size: 16.5px; color: var(--ink); margin-bottom: 2px; }
.stack-list span { display: block; font-size: 14.5px; color: var(--body); }

/* service divider inside the stack — a label, not a deliverable */
.stack-list li.stack-svc { padding: 18px 0 6px; }
.stack-list li.stack-svc::before { display: none; }
.stack-list li.stack-svc .arc { margin-bottom: 0; }

.offer-side { display: grid; gap: 16px; }
.pricebox { padding: 30px 28px; text-align: center; }
.price-label { display: inline-block; padding: 5px 14px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); background: rgb(var(--accent-rgb) / .1); border: 1px solid rgb(var(--accent-rgb) / .28); }
.price-sub { font-size: 14px; color: var(--muted); margin-bottom: 22px; }
.price-list { margin-top: 20px; text-align: left; }
.price-list li { position: relative; padding: 8px 0 8px 24px; font-size: 14.5px; border-top: 1px solid var(--edge-soft); }
.price-list li:first-child { border-top: 0; }
.price-list li::before { content: "→"; position: absolute; left: 0; top: 8px; color: var(--accent); }

.guarantee { padding: 28px 26px; border-color: rgb(var(--accent-rgb) / .28); background: linear-gradient(180deg, rgb(var(--accent-rgb) / .1), rgb(var(--accent-rgb) / .02)); }
.g-badge {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  font-size: 17px; font-weight: 700; color: var(--accent-ink); margin-bottom: 16px;
  background: var(--accent);
  box-shadow: 0 6px 20px -6px rgb(var(--accent-rgb) / .6);
}
.guarantee h3 { font-size: 20px; margin-bottom: .5em; }
.guarantee p { font-size: 15.5px; margin-bottom: 0; }
.g-note { margin-top: 14px !important; padding-top: 14px; border-top: 1px solid rgb(var(--accent-rgb) / .2); font-size: 13.5px !important; color: var(--muted); }

/* single included bonus — a row, not a grid of three */
.bonus-single { display: flex; align-items: flex-start; gap: 22px; padding: 26px 28px; flex-wrap: wrap; }
.bonus-single h4 { font-size: 19px; margin-bottom: .4em; }
.bonus-single p { font-size: 15.5px; margin: 0; max-width: 78ch; }
.b-tag {
  flex: none; padding: 5px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent); background: rgb(var(--accent-rgb) / .1); border: 1px solid rgb(var(--accent-rgb) / .28);
}
.price { margin: 16px 0 6px; font-size: clamp(34px, 4vw, 46px); font-weight: 600; color: var(--ink); letter-spacing: -.04em; line-height: 1; }
.price span { font-size: 17px; font-weight: 500; color: var(--muted); letter-spacing: 0; }

.bonus-h { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 44px 0 16px; }

/* ---------- dream outcome: before / after ---------- */
.outcome { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ocol { padding: 30px 28px; }
.ocol-before { opacity: .78; }
.ocol-after { border-color: rgb(var(--accent-rgb) / .3); background: linear-gradient(180deg, rgb(var(--accent-rgb) / .09), rgb(var(--accent-rgb) / .02)); }
.ocol h3 { font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; }
.ocol-after h3 { color: var(--accent); }
.olist li { padding: 14px 0; border-top: 1px solid var(--edge-soft); font-size: 16px; }
.olist li:first-child { border-top: 0; }
.ocol-after .olist li { color: var(--ink); font-weight: 500; }

/* ---------- book a call ---------- */
.book {
  background: var(--ink-block);
  border-top: 1px solid var(--edge-soft);
  color: #c9cedb;
}
.book .h2, .book .h2 em, .book h3 { color: #fff; }
.book .sub, .book .book-facts li { color: #b3bacb; }
.book .kicker { color: var(--accent-bright); background: rgba(226,160,106,.13); border-color: rgba(226,160,106,.3); }
.book .glass { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.12); box-shadow: none; }
.book .book-brand, .book .form-h { color: #fff; }
.book .book-sign, .book .form-intro, .book .form-note, .book .bf-sub { color: #98a0b3; }
.book .field label { color: #e7eaf1; }
.book .field input, .book .field textarea { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #fff; }
.book .field input::placeholder, .book .field textarea::placeholder { color: #8c94a7; }
.book .booking-fallback { background: rgba(255,255,255,.03); }
.book .bf-title { color: #fff; }
.book .book-meta { border-right-color: rgba(255,255,255,.12); }
.book .book-facts li span { color: var(--accent-bright); }
.book-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.book-panel { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 0; overflow: hidden; }
.book-meta { padding: 32px 30px; border-right: 1px solid var(--edge-soft); }
.book-brand { display: block; font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .03em; margin-bottom: 6px; }
.book-meta h3 { font-size: 24px; margin-bottom: 22px; }
.book-facts li { position: relative; padding: 9px 0 9px 26px; font-size: 15px; color: var(--body); }
.book-facts li span { position: absolute; left: 0; top: 9px; color: var(--accent); }
.book-sign { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--edge-soft); font-size: 14px; color: var(--muted); }

.book-embed { min-height: 400px; display: grid; }
.book-embed iframe { width: 100%; height: 100%; min-height: 400px; border: 0; display: block; }
.booking-fallback {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 6px; padding: 36px 28px; background: rgba(16,19,29,.03);
}
.bf-icon { font-size: 26px; color: var(--accent); margin-bottom: 8px; }
.bf-title { font-size: 17px; font-weight: 600; color: var(--ink); margin: 0; }
.bf-sub { font-size: 14px; color: var(--muted); margin: 0 0 18px; max-width: 34ch; }
.booking-fallback code { font-size: 13px; color: var(--accent); background: rgb(var(--accent-rgb) / .1); padding: 1px 6px; border-radius: 5px; }

.form-h { font-size: 20px; margin-bottom: .3em; }
.form-intro { font-size: 14.5px; color: var(--muted); margin-bottom: 22px; }

/* ---------- audience tabs ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px; margin-bottom: 16px; border-radius: 999px; background: var(--glass); border: 1px solid var(--edge); width: fit-content; }
/* Seven sectors don't fit one pill row cleanly — let it wrap into a
   rounded block instead of overflowing. */
.tabs-wide { width: 100%; border-radius: 20px; justify-content: flex-start; }
.tabs-wide .tab { padding: 10px 18px; font-size: 14px; }
.tab {
  font-family: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
  padding: 10px 20px; border-radius: 999px; color: var(--body);
  background: transparent; border: 1px solid transparent;
  transition: color .16s ease, background .16s ease;
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); box-shadow: 0 4px 12px -6px rgb(var(--accent-rgb) / .5); }

.panel { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; padding: 32px; align-content: start; }
.panel[hidden] { display: none; }
.panel h3 { font-size: 24px; margin-bottom: .5em; }
.panel-main > p { font-size: 16px; max-width: 52ch; }
.ticks { margin-top: 18px; }
.ticks li { position: relative; padding: 7px 0 7px 26px; font-size: 15px; color: var(--ink); }
.ticks li::before { content: "✓"; position: absolute; left: 0; top: 8px; width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; font-size: 10px; font-weight: 700; color: var(--accent-ink); background: var(--accent); }
/* Closing line at the foot of each audience panel's left column. */
.panel-result { margin: 20px 0 0; font-size: 15px; line-height: 1.55; color: var(--accent); max-width: 50ch; }
.panel-result strong { color: var(--accent); font-weight: 700; }

.panel-side { border-left: 1px solid var(--edge-soft); padding-left: 32px; }
.panel-label { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
/* stacked, not wrapped: a ragged two-and-a-bit-row cloud reads as clutter
   next to a tidy tick list. */
.chips { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.chips li { padding: 8px 14px; border-radius: 999px; font-size: 13.5px; color: var(--body); background: rgba(16,19,29,.045); border: 1px solid var(--edge); }

/* ---------- hero promise ---------- */
.promise {
  display: inline-block; margin: 22px auto 0; padding: 14px 22px; max-width: 62ch;
  border-radius: 14px; font-size: 16px; color: var(--ink); text-align: left;
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / .11), rgb(var(--accent-rgb) / .03));
  border: 1px solid rgb(var(--accent-rgb) / .28);
}
.promise-tag {
  display: inline-block; margin-right: 10px; padding: 3px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-bright); background: transparent;
  border: 1px solid rgba(226,160,106,.45);
  vertical-align: 2px;
}

.define-q { font-size: clamp(21px, 2.3vw, 27px); margin-bottom: .6em; max-width: 24ch; }
.define-a { font-size: 17px; line-height: 1.62; max-width: 62ch; }

/* Definition now sits inside the problem section rather than its own block. */
.define-inline { max-width: 74ch; margin: 30px 0 34px; padding-top: 26px; border-top: 1px solid var(--edge-soft); }

/* ---------- method cards ---------- */
.method-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.method { padding: 26px 24px; display: flex; flex-direction: column; }
.m-n { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--muted); margin-bottom: 14px; }
.method h3 { font-size: 18.5px; margin-bottom: .5em; }
.method p { font-size: 15px; }

/* Footnotes run to one or two lines depending on the card. Without a floor,
   the flexed body above absorbs the difference and the rules sit at
   different heights across the row. Two lines' worth of min-height keeps
   every border on the same line. */
.m-foot {
  /* Pinned to the bottom with a fixed height, so the rule lands at the same
     y in every card regardless of whether the note runs to one line or two.
     min-height alone was not enough: the flexed body above still absorbed
     the difference. */
  margin: 16px 0 0 !important; margin-top: auto !important;
  padding-top: 14px; border-top: 1px solid var(--edge-soft);
  font-size: 13px; color: var(--muted); height: 56px; box-sizing: content-box;
}

.m-vis {
  height: 150px; margin-bottom: 20px; border-radius: 10px; padding: 14px;
  background: rgba(16,19,29,.035); border: 1px solid var(--edge-soft);
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.m-vis-window { gap: 12px; }
.win-l, .win-r { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
.win-bar { position: relative; flex: 1; height: 6px; border-radius: 999px; background: rgba(16,19,29,.10); overflow: hidden; }
.win-bar i { position: absolute; inset: 0 auto 0 0; width: 38%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), rgb(var(--accent-rgb) / .2)); }
.m-vis-mute { flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; }
.mute-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cap-line { display: block; width: 100%; height: 8px; border-radius: 3px; background: var(--accent); opacity: .85; }
.cap-line.short { width: 58%; opacity: .4; }
.frame {
  display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: var(--muted);
  border: 1px solid var(--edge); border-radius: 5px; background: rgba(16,19,29,.03);
}
.m-vis-native .frame:nth-child(1) { width: 26px; height: 46px; }
.m-vis-native .frame:nth-child(2) { width: 38px; height: 38px; color: var(--accent); border-color: rgb(var(--accent-rgb) / .4); background: rgb(var(--accent-rgb) / .08); }
.m-vis-native .frame:nth-child(3) { width: 50px; height: 30px; }

/* ---------- ICP panel CTA ---------- */
/* Full-width CTA bar across the bottom of the panel, in the CTA colour so
   it reads as the action rather than another content card. */
.panel-cta {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: 4px; padding: 20px 26px; border-radius: 14px;
  text-decoration: none;
  background: var(--accent); border: 1px solid var(--accent);
  transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.panel-cta:hover { background: var(--accent-2); border-color: var(--accent-2); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.panel-cta .pc-q { font-weight: 400; color: rgba(255,255,255,.86); font-size: 16px; }
.panel-cta .pc-a { font-weight: 700; color: #fff; font-size: 17px; white-space: nowrap; }

/* ---------- FAQ ---------- */
.faq-section .h2 { max-width: 26ch; }
.faq-controls { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 8px 0 26px; }
.faq-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.fpill {
  font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  padding: 9px 18px; border-radius: 999px; color: var(--body);
  background: var(--glass); border: 1px solid var(--edge);
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.fpill:hover { color: var(--ink); border-color: rgba(16,19,29,.18); }
.fpill.is-active { color: var(--accent); border-color: rgb(var(--accent-rgb) / .55); background: rgb(var(--accent-rgb) / .1); }

.faq-search { position: relative; flex: 1 1 260px; max-width: 340px; }
.fs-ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--muted); }
.fs-ico svg { width: 17px; height: 17px; display: block; }
.faq-search input {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  padding: 12px 16px 12px 42px; border-radius: 999px;
  background: rgba(16,19,29,.035); border: 1px solid var(--edge);
}
.faq-search input::placeholder { color: var(--muted); }
.faq-search input:focus { outline: none; border-color: rgb(var(--accent-rgb) / .5); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .14); }

/* Grid, not CSS columns. Columns flow items down one side then wrap, so
   nothing lines up across the two halves and an open answer shunts
   everything below it. A two-column grid keeps questions in rows. */
.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.faq-grid .qa { width: 100%; }
.faq-grid .qa[hidden] { display: none; }
.faq-empty { margin: 8px 0 0; padding: 26px; text-align: center; color: var(--muted); font-size: 15.5px; border: 1px dashed var(--edge); border-radius: var(--r); }
.qa[open] { border-color: rgb(var(--accent-rgb) / .35); background: linear-gradient(180deg, rgb(var(--accent-rgb) / .07), rgba(16,19,29,.02)); }
.qa-badge {
  margin-left: auto; margin-right: 4px; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent); background: rgb(var(--accent-rgb) / .12); border: 1px solid rgb(var(--accent-rgb) / .28);
}
.qa strong { color: var(--accent); font-weight: 600; }

.faq-cta {
  display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap;
  margin-top: 30px; padding: 26px; border-radius: var(--r);
  background: var(--glass); border: 1px solid var(--edge);
}
.faq-cta p { margin: 0; font-size: 17px; color: var(--ink); font-weight: 500; }
.qa { overflow: hidden; }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 19px 22px; cursor: pointer; list-style: none;
  font-size: 16.5px; font-weight: 600; color: var(--ink);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--accent); }
.qa-i { position: relative; width: 15px; height: 15px; flex: none; }
.qa-i::before, .qa-i::after { content: ""; position: absolute; inset: 50% 0 auto 0; height: 1.5px; background: var(--accent); border-radius: 2px; transition: transform .22s ease; }
.qa-i::after { transform: rotate(90deg); }
.qa[open] .qa-i::after { transform: rotate(0deg); }
.qa p { margin: 0; padding: 0 22px 21px; font-size: 15.5px; max-width: 72ch; }

/* ---------- problem trio ---------- */
/* ---------- steps ---------- */
/* auto-fit rather than a fixed breakpoint: the three service cards sit
   side by side whenever the row can hold them, and wrap on their own
   when it cannot. */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; align-items: stretch; }
.step { display: flex; flex-direction: column; }

/* two-service layout */
.steps-2 { grid-template-columns: repeat(2, 1fr); }
.steps-2 .step { padding: 32px 30px; }
.steps-2 .step h3 { font-size: 24px; }
.steps-2 .step > .step-n { display: block; margin-bottom: 12px; }
.steps-2 .step .ticks { margin: 4px 0 20px; }
.step-n { font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--muted); }
.step p { font-size: 15.5px; }
.out { margin: auto 0 0 !important; padding-top: 16px; border-top: 1px solid var(--edge-soft); font-size: 14px; color: var(--muted); }
.out span { display: inline-block; margin-right: 7px; font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--accent); }

/* create / distribute / convert label */
.arc {
  display: inline-block; align-self: flex-start; width: fit-content;
  margin-bottom: 10px; padding: 4px 11px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent); background: rgb(var(--accent-rgb) / .09); border: 1px solid rgb(var(--accent-rgb) / .24);
}
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(102,214,140,0); } 100% { box-shadow: 0 0 0 0 rgba(102,214,140,0); } }

.note {
  margin: 26px 0 0; padding: 20px 24px; border-radius: 14px; font-size: 15.5px; max-width: 82ch;
  background: rgb(var(--accent-rgb) / .055); border: 1px solid rgb(var(--accent-rgb) / .2);
}

.form-shell { padding: clamp(24px, 3vw, 34px); }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 7px; line-height: 1.4; }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  padding: 12px 14px; border-radius: 10px;
  background: rgba(16,19,29,.035); border: 1px solid var(--edge);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field textarea { resize: vertical; min-height: 84px; }
.field input:focus, .field textarea:focus { outline: none; border-color: rgb(var(--accent-rgb) / .55); background: rgba(16,19,29,.05); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .14); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: rgba(232,110,96,.6); }
.err { margin: 6px 0 0; font-size: 13px; color: #f0938a; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { margin: 14px 0 0; font-size: 13.5px; color: var(--muted); text-align: center; }
.form-status { margin: 14px 0 0; padding: 12px 16px; border-radius: 10px; font-size: 14.5px; background: rgba(102,214,140,.1); border: 1px solid rgba(102,214,140,.3); color: #a8e8bd; }
.form-status.is-error { background: rgba(232,110,96,.1); border-color: rgba(232,110,96,.32); color: #f0a79f; }

/* ---------- footer ---------- */
.site-foot { position: relative; z-index: 1; margin-top: 0; padding: 56px 0 26px; background: var(--ink-block); color: #98a0b3; font-size: 15px; }
.foot-top { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.1fr); gap: 40px; padding-bottom: 40px; }
.foot-line { margin: 16px 0 0; max-width: 38ch; color: var(--muted); }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 900px) { .foot-cols { grid-template-columns: 1fr 1fr; } }
.foot-cols h4 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin-bottom: 15px; }
.foot-cols p { margin: 0 0 9px; }
.site-foot a { color: #b3bacb; text-decoration: none; }
.site-foot a:hover { color: var(--accent-bright); }
.site-foot .brand { color: #fff; }
.site-foot .brand-mark { color: #fff; }
.site-foot .foot-cols h4 { color: #fff; }
.site-foot .foot-line, .site-foot .muted { color: #8c94a7; }
.foot-base { border-top-color: rgba(255,255,255,.1); }
.muted { color: var(--muted); }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 22px; border-top: 1px solid var(--edge-soft); font-size: 13px; }
.foot-base p { margin: 0; }

/* ---------- reveal ----------
   Scoped to .js so content is visible by default. If script.js never
   runs, nothing is hidden — the page just loses the animation. */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .audience, .numbers { grid-template-columns: 1fr; }
  .outcome, .book-grid, .define-grid { grid-template-columns: 1fr; }
  .method-grid { grid-template-columns: 1fr 1fr; }
  .offer-grid, .bonuses { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; }
  .book-panel { grid-template-columns: 1fr; }
  .book-meta { border-right: 0; border-bottom: 1px solid var(--edge-soft); padding: 26px 24px; }
  .panel { grid-template-columns: 1fr; gap: 26px; padding: 26px 24px; }
  .panel-side { border-left: 0; border-top: 1px solid var(--edge-soft); padding-left: 0; padding-top: 24px; }
  .tabs { width: 100%; }
  .tab { flex: 1 1 auto; padding: 10px 14px; }
  /* With seven sectors, stretching leaves ragged rows — pack to content. */
  .tabs-wide .tab { flex: 0 0 auto; padding: 9px 14px; font-size: 13.5px; }
  .numbers { gap: 12px; }
  .num-card { display: flex; align-items: baseline; justify-content: flex-start; gap: 16px; text-align: left; }
  .num { font-size: 44px; }
  .num-label { margin-top: 0; }
  .pilot-wrap, .foot-top { grid-template-columns: 1fr; }
  .principles { gap: 24px; }
}

@media (max-width: 860px) {
  .site-head { top: 8px; }
  .nav-toggle { display: inline-flex; }
  .nav-cta { display: none; }
  .pillnav { position: relative; justify-content: space-between; padding: 8px 8px 8px 16px; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + 10px);
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    padding: 8px 18px 16px; border-radius: 18px;
    background: rgba(16, 21, 34, .97); border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 30px 60px -30px rgba(0,0,0,1);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 13px 2px; border-bottom: 1px solid var(--edge-soft); font-size: 16px; }
  .nav a:last-child { border-bottom: 0; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap { width: calc(100% - 32px); }
  .hero { text-align: left; }
  .hero h1 { margin-inline: 0; }
  .lede { margin-inline: 0; }
  .cta-row { justify-content: stretch; flex-direction: column; }
  .cta-row .btn, .cta-row .ghost { width: 100%; }
  .foot-cols { grid-template-columns: 1fr; }
  .strip-in { font-size: 12.5px; }
  .method-grid { grid-template-columns: 1fr; }
  .faq-controls { flex-direction: column; align-items: stretch; }
  .faq-search { max-width: none; }
  .promise { text-align: left; }
  .qa summary { padding: 16px 18px; font-size: 15.5px; }
  .qa p { padding: 0 18px 18px; }
  
  .risk { justify-content: flex-start; }
  .stack { padding: 24px 20px; }
  .pricebox { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- MEDIA PLACEHOLDERS ----------
   Every one of these is a drop-in slot. Replace the whole .ph-* element
   with your <video>, <img> or embed — the wrapper keeps the aspect ratio,
   so nothing shifts when you swap it in. Search "PLACEHOLDER" in
   index.html to find them all. */
.ph {
  position: relative; display: grid; place-items: center; overflow: hidden;
  border-radius: 14px; text-align: center;
  background:
    repeating-linear-gradient(45deg, rgba(16,19,29,.022) 0 10px, rgba(16,19,29,.045) 10px 20px);
  border: 1px dashed rgb(var(--accent-rgb) / .35);
  color: var(--muted);
}
.ph::after {
  content: attr(data-label);
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); background: rgba(255,255,255,.85);
  padding: 4px 12px; border-radius: 999px; white-space: nowrap;
}
.ph-video { aspect-ratio: 16 / 9; width: 100%; }
.ph-clip  { aspect-ratio: 9 / 16; width: 100%; }
.ph-photo { aspect-ratio: 4 / 5; width: 100%; }
.ph-play {
  width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: 20px; padding-left: 4px;
  box-shadow: 0 10px 26px -12px rgb(var(--accent-rgb) / .8);
}
.ph-ico { font-size: 30px; color: rgb(var(--accent-rgb) / .5); }

.hero-media { margin: 44px auto 0; max-width: 820px; }
.clip-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 34px; }
.clip-strip .ph::after { font-size: 10.5px; padding: 3px 9px; }
.ph-photo-wrap { max-width: 240px; margin-top: 22px; }

@media (max-width: 1000px) { .clip-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .clip-strip { grid-template-columns: 1fr 1fr; gap: 10px; } }

/* Placeholders sitting on the dark booking block need inverted striping. */
.book .ph {
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 10px, rgba(255,255,255,.07) 10px 20px);
  border-color: rgba(226,160,106,.4);
}
.book .ph::after { color: #b3bacb; background: rgba(16,21,34,.85); }
.book .ph-ico { color: rgba(226,160,106,.6); }

/* ---------- DARK BLOCKS ON A LIGHT PAGE ----------
   Two sections invert: the hero (with the nav floating over it) and
   services. Everything inside them needs the light-on-dark treatment,
   so the rules are grouped here rather than scattered per component. */
.hero-dark, .section-ink {
  position: relative;
  background: var(--ink-block);
  color: #c3cad8;
}
.hero-dark { border-bottom: 1px solid rgba(255,255,255,.08); }
/* The sticky header takes flow space above the hero, which would otherwise
   show the light page wash as a pale band. Extend the hero's dark ground
   upward behind it so the strip, header and hero read as one block. */
.hero-dark::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%;
  height: 240px; background: var(--ink-block); pointer-events: none;
}
.section-ink { border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }

/* the hero carries the warm wash, inverted: a copper glow over near-black */
.hero-dark {
  background:
    radial-gradient(90ch 46ch at 50% -18%, rgba(226,160,106,.20), rgba(226,160,106,0) 62%),
    var(--ink-block);
}
.hero-dark h1, .hero-dark h1 em,
.section-ink .h2, .section-ink .h2 em,
.section-ink h3, .section-ink h4 { color: #fff; }
.hero-dark .lede, .section-ink .sub, .section-ink p { color: #b6bdcc; }
.hero-dark .lede strong, .section-ink strong { color: #fff; }

.hero-dark .chip, .section-ink .kicker {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); color: #c3cad8;
}
.section-ink .kicker { color: var(--accent-bright); background: rgba(226,160,106,.13); border-color: rgba(226,160,106,.3); }
.hero-dark .risk { color: #98a0b3; }
.hero-dark .risk span[aria-hidden] { color: var(--accent-bright); }
.hero-dark .promise {
  background: rgba(226,160,106,.11); border-color: rgba(226,160,106,.3); color: #e7eaf1;
}
.hero-dark .ghost { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #fff; box-shadow: none; }
.hero-dark .ghost:hover { background: rgba(255,255,255,.1); }
.hero-dark .ghost::after { color: #98a0b3; }

.section-ink .glass { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); box-shadow: none; }
.section-ink .arc { color: var(--accent-bright); background: rgba(226,160,106,.13); border-color: rgba(226,160,106,.3); }
.section-ink .step-n { color: #7d8598; }
.section-ink .ticks li { color: #e7eaf1; }
.section-ink .ticks li::before { color: var(--ink-block); background: var(--accent-bright); }
.section-ink .out { border-top-color: rgba(255,255,255,.12); color: #98a0b3; }
.section-ink .out span { color: var(--accent-bright); }
.section-ink .note {
  background: rgba(226,160,106,.09); border-color: rgba(226,160,106,.26); color: #c3cad8;
}
.section-ink .note strong { color: #fff; }

/* placeholders inverted on dark blocks */
.hero-dark .ph, .section-ink .ph {
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 10px, rgba(255,255,255,.07) 10px 20px);
  border-color: rgba(226,160,106,.4);
}
.hero-dark .ph::after, .section-ink .ph::after { color: #b3bacb; background: rgba(16,21,34,.85); }

/* nav floats over the dark hero */
.hero-dark ~ * { position: relative; }

/* ---------- the two delivery models ---------- */
/* ---------- platform marks ----------
   Simplified monochrome renderings, used nominatively to say where clips
   get posted. Swap each <svg> for the platform's own brand asset if you
   want the official artwork; the wrapper sizing does not change. */

/* EU flag sitting inline in a sentence */
/* The flag is a 3:2 rectangle, the platform marks are square, so sizing both
   by width would put them on different optical lines. Size the flag by
   HEIGHT instead and set vertical-align so its centre lands on the same
   line as .pf: centre = height/2 + vertical-align, which is .355em for both. */
.eu { display: inline-block; height: .82em; vertical-align: -.06em; margin-right: .12em; }
.eu svg { height: 100%; width: auto; display: block; border-radius: 2px; }

@media (max-width: 560px) {
  
  
}

/* ---------- inline platform marks ----------
   These sit inside a sentence in place of the platform names, so they are
   sized in em (they scale with the copy) and optically centred on the
   lowercase x-height rather than the baseline. The name stays in the DOM
   as .sr-only text, which is what screen readers announce and what search
   and answer engines read — replacing the words outright would have
   stripped those entities from the page's most important paragraph.
   --yt-notch is the "hole" colour punched out of the solid marks; it has
   to match whatever sits behind them. */
.pf {
  display: inline-block; width: 1.15em; height: 1.15em;
  vertical-align: -.22em; margin: 0 .04em;
}
/* Marks carry their own brand colours, so no fill is set here. X is the
   exception: it has no colour of its own and uses currentColor, so it
   inverts correctly on light and dark. */
.pf svg { width: 100%; height: 100%; display: block; }

/* Panel CTA now carries a category-specific question above the action. */

/* ---------- network quality ----------
   The gate is drawn as a vertical rail with numbered stops. The rail is a
   pseudo-element behind the numbers so the sequence reads as a funnel you
   pass through, not a list of features. */
/* stretch, not start: the gate and the never-list should read as a
   matched pair rather than one card trailing off short. */
.quality-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.gate, .nobots { display: flex; flex-direction: column; }
.gate-foot, .nb-foot { margin-top: auto !important; }

.gate { padding: 30px 28px; }
.gate-h { font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; }
.gate-steps { position: relative; }
.gate-steps::before {
  content: ""; position: absolute; left: 13px; top: 12px; bottom: 26px; width: 2px;
  background: linear-gradient(180deg, var(--accent), rgb(var(--accent-rgb) / .12));
}
.gate-steps li { position: relative; display: flex; gap: 18px; padding: 0 0 24px; }
.gate-steps li:last-child { padding-bottom: 4px; }
.gs-n {
  position: relative; z-index: 1; flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--accent-ink); background: var(--accent);
}
.gate-steps strong { display: block; font-size: 16.5px; color: var(--ink); margin-bottom: 3px; }
.gate-steps span:not(.gs-n) { display: block; font-size: 15px; color: var(--body); }
.gate-foot { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--edge-soft); font-size: 14px; color: var(--muted); }

.nobots { padding: 30px 28px; border-color: rgb(var(--accent-rgb) / .25); }
.nb-badge {
  display: inline-block; margin-bottom: 14px; padding: 5px 13px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent);
}
.nobots h3 { font-size: 21px; margin-bottom: 20px; }
.nb-list li {
  position: relative; padding: 12px 0 12px 32px;
  border-top: 1px solid var(--edge-soft); font-size: 15.5px; color: var(--body);
}
.nb-list li:first-child { border-top: 0; }
.nb-list li::before {
  content: "\00d7"; position: absolute; left: 0; top: 11px;
  width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%;
  font-size: 13px; font-weight: 700; color: var(--accent);
  background: rgb(var(--accent-rgb) / .1); border: 1px solid rgb(var(--accent-rgb) / .28);
}
.nb-foot { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--edge-soft); font-size: 14.5px; color: var(--muted); }

@media (max-width: 1000px) { .quality-grid { grid-template-columns: 1fr; } }

/* platform marks in the footer, at their own size rather than inline-in-text */
.foot-platforms { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 18px 0 0; }
.pf-foot { display: block; width: 26px; height: 26px; }
.pf-foot svg { width: 100%; height: 100%; display: block; }

/* The problem section runs as two columns so the vertical clip starts level
   with the heading rather than halfway down the section. The clip column is
   capped so a 9:16 frame never towers over the copy beside it. */
.problem-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
  gap: clamp(28px, 5vw, 64px); align-items: start;
}
.problem-main .define-main { max-width: 68ch; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--edge-soft); }
.define-media { position: sticky; top: 110px; }
@media (max-width: 900px) {
  .problem-grid { grid-template-columns: 1fr; }
  .define-media { position: static; max-width: 260px; }
}

/* Consistency card: an actual month view, with weekday headers and dates,
   every day marked. The card is taller than its siblings on purpose —
   a calendar only reads as a calendar once the numbers are legible. */
.m-vis-cal { flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; padding: 12px; }
.cal-head, .cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-head i {
  font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .04em;
  text-align: center; color: var(--muted);
}
.cal i {
  font-style: normal; font-size: 9px; font-weight: 600; line-height: 1;
  height: 19px; display: grid; place-items: center; border-radius: 3px;
  background: rgb(var(--accent-rgb) / .08); color: var(--muted);
}
.cal i.pad { background: none; }
.cal i.on { background: var(--accent); color: var(--accent-ink); }

/* The promise, restated as the last thing before the form. Four concrete
   deliverables and the remedy, rather than one abstract sentence. */
.promise-band { padding: 30px 32px; margin-top: 20px; }
.book .promise-band { background: rgba(255,255,255,.05); border-color: rgba(226,160,106,.28); }
.promise-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 26px; margin: 16px 0 0; }
.promise-list li { position: relative; padding-left: 26px; font-size: 15.5px; }
.promise-list li::before {
  content: "\2713"; position: absolute; left: 0; top: 1px;
  width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%;
  font-size: 10px; font-weight: 700; color: var(--accent-ink); background: var(--accent);
}
.book .promise-list li { color: #c3cad8; }
.book .promise-list strong { color: #fff; }
.promise-foot { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--edge-soft); font-size: 14.5px; color: var(--muted); }
.book .promise-foot { color: #98a0b3; }

/* ---------- distribution ways ----------
   Two options side by side, each with its upside and its trade-off. The
   trade-offs are real ones, not straw men: a comparison a buyer can tell
   is honest does more work than one that only flatters the recommendation. */
.ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.way { padding: 30px 28px; }
.way-lead { border-color: rgb(var(--accent-rgb) / .3); }
.way-tag {
  display: inline-block; margin-bottom: 14px; padding: 5px 13px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent);
}
.way-tag-plain { color: var(--muted); background: rgb(16 19 29 / .05); border: 1px solid var(--edge); }
.way h3 { font-size: 22px; margin-bottom: .4em; }
.way-lede { font-size: 16px; color: var(--body); }
.way-h {
  margin: 22px 0 10px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.way-h-pro { color: var(--accent); }
.way-h-con { color: var(--muted); }
.way-list li { position: relative; padding: 7px 0 7px 26px; font-size: 15px; }
.way-pro li::before {
  content: "\2713"; position: absolute; left: 0; top: 8px;
  width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%;
  font-size: 9.5px; font-weight: 700; color: var(--accent-ink); background: var(--accent);
}
.way-con li { color: var(--muted); }
.way-con li::before {
  content: "\2212"; position: absolute; left: 0; top: 8px;
  width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%;
  font-size: 11px; font-weight: 700; color: var(--muted);
  background: rgb(16 19 29 / .05); border: 1px solid var(--edge);
}

/* cost comparison: relative bands rather than invented euro figures */


/* Cost explained in prose with worked sums, rather than a table of symbols.
   The euro figures are illustrative and the copy says so — swap them for
   real campaign numbers when you have them. */
.cost-note { margin-top: 16px; padding: 30px 30px 26px; }
.cost-h { font-size: 20px; margin-bottom: .55em; }
.cost-note p { font-size: 16px; max-width: 82ch; }
.cost-note strong { color: var(--accent); }
.cost-foot {
  margin: 20px 0 0 !important; padding-top: 18px; border-top: 1px solid var(--edge-soft);
  font-size: 14.5px; color: var(--muted);
}
.cost-foot strong { color: var(--ink); }

/* Section-level CTA under the vetting pair. */
.quality-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 16px; padding: 24px 28px; border-radius: var(--r);
  background: var(--ink-block);
}
.quality-cta p { margin: 0; font-size: 17px; color: #c3cad8; max-width: 62ch; }
.quality-cta strong { color: #fff; }

.promise-lede { font-size: 16.5px; margin: 14px 0 0; max-width: 82ch; }
.promise-lede strong { color: var(--ink); }

/* ---------- MEDIA NOG NIET BESCHIKBAAR ----------
   Zolang <body> de class "no-media" heeft, worden alle videoplekken
   verborgen. Gestreepte "PLACEHOLDER"-vakken op een live site lezen als
   een onaffe website, en dat kost je precies de leads waar je op wacht.
   Heb je clips? Haal de class weg in index.html en alles staat er weer,
   op exact dezelfde plek en maat. */
.no-media .hero-media,
.no-media .clip-strip,
.no-media .ph-photo-wrap { display: none; }

/* De probleemsectie wordt weer één kolom, anders blijft er een gat staan
   waar de verticale clip hoorde. */
.no-media .define-media { display: none; }
.no-media .problem-grid { grid-template-columns: minmax(0, 76ch); }

/* ---------- Calendly inline widget ----------
   widget.js injects an iframe at width/height 100%, so the container has
   to carry the height itself — an auto-height container collapses and the
   calendar renders as a sliver. 700px is Calendly's own minimum for the
   inline view; below that their month grid starts scrolling internally. */
.book-embed { min-height: 700px; }
.book-embed .calendly-inline-widget {
  min-width: 320px;
  height: 100%;
  min-height: 700px;
  background: var(--ink-block);
}

@media (max-width: 1000px) {
  /* Stacked panel: the calendar sits under the copy, so it can lose the
     stretch and just take its natural height. */
  .book-embed, .book-embed .calendly-inline-widget { min-height: 660px; }
}

/* ---------- legal pages (privacy statement) ----------
   Prose, not marketing. Narrow measure, generous leading, and headings
   that step down clearly — people scan these for one specific answer. */
.wrap-narrow { max-width: 74ch; }
.legal { padding-top: 40px; }
.legal-date { font-size: 14px; color: var(--muted); margin: 0 0 34px; }
.legal-body { font-size: 16.5px; line-height: 1.72; color: var(--body); }
.legal-body h2 {
  font-size: 23px; line-height: 1.25; color: var(--ink);
  margin: 44px 0 12px; letter-spacing: -.01em; text-wrap: balance;
}
.legal-body h3 {
  font-size: 17px; color: var(--ink);
  margin: 30px 0 8px; letter-spacing: -.005em;
}
.legal-body p { margin: 0 0 15px; }
.legal-body ul { margin: 0 0 15px; padding-left: 20px; }
.legal-body li { margin-bottom: 9px; }
.legal-body strong { color: var(--ink); font-weight: 600; }
.legal-body a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.legal-body a:hover { color: var(--ink); }

.legal-contact { list-style: none; padding: 0; margin: 0 0 15px; }
.legal-contact li { margin-bottom: 4px; }

/* Wide content scrolls inside its own box so the page body never does. */
.legal-table-wrap { overflow-x: auto; margin: 0 0 15px; }
.legal-table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 15px; }
.legal-table th, .legal-table td {
  text-align: left; padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--edge-soft); vertical-align: top;
}
.legal-table th { color: var(--ink); font-weight: 600; font-size: 13.5px; letter-spacing: .02em; text-transform: uppercase; }

.legal-back { margin-top: 40px; }

/* The homepage nav points at anchors that only exist on the homepage;
   on a legal page the in-page nav is noise. */
.legal-page .nav, .legal-page .strip { display: none; }

/* ---------- booking panel: give the calendar room ----------
   Calendly drops to its cramped narrow layout below ~680px, which is what a
   half-width column was forcing on it — the calendar got 364px while the
   secondary contact form beside it got 508px. The panel now runs wide and
   stacks internally: the meta copy is a header strip, the calendar takes the
   full width beneath it.

   Two columns only when the row is genuinely wide enough for a ~680px calendar
   next to the contact form. This rule has to be min-width scoped: an
   unconditional `.book-grid` here would sit after the max-width:1000px rule
   above and cancel the single-column stack on tablet and phone. */
@media (min-width: 1001px) {
  .book-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}
.book-panel { grid-template-columns: 1fr; }

.book-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 34px;
  padding: 24px 28px;
  border-right: 0;
  border-bottom: 1px solid var(--edge-soft);
}
.book-meta-head { min-width: 0; }
.book-meta h3 { font-size: 22px; margin: 0; text-wrap: balance; }
.book-facts { margin: 0; }
.book-facts li { padding: 5px 0 5px 26px; }
.book-facts li span { top: 5px; }

/* Sits inside the head block now, so it no longer needs the divider rule
   that separated it from the facts list above it. */
.book-sign { margin: 10px 0 0; padding-top: 0; border-top: 0; }

/* Calendly's iframe is tinted dark via the background_color/text_color/
   primary_color params on the embed URL (see index.html), so it now blends
   with the panel instead of sitting on it as a white card. Inset padding
   plus a soft edge still separate it from the surrounding glass. */
.book-embed { padding: 18px; min-height: 0; display: block; }

/* The cap stops the card stretching absurdly wide on large screens. 680px is
   chosen because the calendar was verified rendering correctly at 666px; it
   was NOT verified at narrower widths, so do not tighten this without looking
   at the result in a real browser first. */
.book-embed .calendly-inline-widget {
  max-width: 680px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  min-height: 640px;
  border: 1px solid rgba(255, 255, 255, .1);
}

@media (max-width: 1000px) {
  .book-embed { padding: 14px; }
  .book-embed .calendly-inline-widget { min-height: 620px; }
  .book-meta { padding: 22px 22px; }
}

/* ---------- language switch ----------
   Sits in the dark header pill (next to the CTA) and again in the footer,
   so it inherits light text there. EN / NL, current language marked with
   aria-current. */
.lang-switch {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 13px; font-weight: 600; letter-spacing: .03em;
  flex: none;
}
.lang-switch a {
  color: #b6bdcc; text-decoration: none;
  padding: 3px 6px; border-radius: 7px;
  transition: color .16s ease, background .16s ease;
}
.lang-switch a:hover { color: #fff; }
.lang-switch a[aria-current="true"] { color: #fff; background: rgba(255,255,255,.1); }
.lang-switch .ls-sep { color: rgba(255,255,255,.28); }

/* In the footer the switch sits under the Contact column. */
.foot-lang { margin-top: 14px; }

/* ---------- use-case pack modal ----------
   Native <dialog>. Hidden entirely without JS; the trigger link
   falls back to its href. */
.uc-modal {
  width: min(440px, calc(100vw - 32px));
  padding: 0; border: 0; border-radius: 18px;
  background: transparent; color: var(--body);
}
.uc-modal::backdrop { background: rgba(8, 9, 12, .62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.uc-form {
  position: relative;
  background: var(--surface); border: 1px solid var(--edge);
  border-radius: 18px; padding: 34px 28px 26px; box-shadow: var(--shadow-md);
}
.uc-close {
  position: absolute; top: 12px; right: 14px;
  width: 32px; height: 32px; border: 0; border-radius: 8px;
  background: transparent; font-size: 22px; line-height: 1;
  color: var(--muted); cursor: pointer;
}
.uc-close:hover { background: var(--glass); color: var(--ink); }
.uc-form h2 { font-size: 21px; margin: 0 0 8px; letter-spacing: -.02em; }
.uc-sub { font-size: 14.5px; color: var(--muted); margin: 0 0 18px; }
.uc-form label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.uc-form input[type="email"] {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  padding: 12px 14px; border-radius: 10px;
  background: rgba(16,19,29,.035); border: 1px solid var(--edge); margin-bottom: 14px;
}
.uc-form input[type="email"]:focus {
  outline: none; border-color: rgb(var(--accent-rgb) / .55);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .14);
}
.uc-form input[type="email"][aria-invalid="true"] { border-color: rgba(232,110,96,.6); }
.uc-status {
  margin: 14px 0 0; padding: 12px 16px; border-radius: 10px; font-size: 14.5px;
  background: rgba(102,214,140,.12); border: 1px solid rgba(102,214,140,.3); color: #2f7d4a;
}
.uc-status.is-error { background: rgba(232,110,96,.1); border-color: rgba(232,110,96,.32); color: #b23b30; }
.uc-fine { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }

/* After a successful submit the form collapses to just the message. */
.uc-form.is-sent > .uc-sub,
.uc-form.is-sent > label,
.uc-form.is-sent > input,
.uc-form.is-sent > .err,
.uc-form.is-sent > #ucSubmit,
.uc-form.is-sent > .uc-fine { display: none; }
.uc-form.is-sent > .uc-status { margin-top: 6px; }