/* Bridge24 — landing site. Same design language as the app:
   Polly Rounded + JetBrains Mono, warm near-black, violet accent, milk-white counterpoint. */

/* 'Amp' covers ONLY the & (U+26) so every ampersand renders in clean Helvetica */
@font-face {
  font-family: 'Amp';
  src: local('Helvetica Neue'), local('Helvetica'), local('Arial');
  unicode-range: U+26;
}

@font-face {
  font-family: 'Polly Rounded';
  src: url('../fonts/PollyRounded-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Polly Rounded';
  src: url('../fonts/PollyRounded-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Polly Rounded';
  src: url('../fonts/PollyRounded-Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}

:root {
  --bg: hsl(30 3% 7%);
  --bg-raise: hsl(30 3% 11%);
  --bg-raise-2: hsl(30 3% 16%);
  --fg: hsl(40 20% 96%);
  --fg-muted: hsl(35 5% 64%);
  --border: hsl(30 4% 20%);
  --accent: hsl(255 85% 76%);
  --accent-deep: hsl(255 35% 14%);
  --success: hsl(95 50% 66%);
  --warning: hsl(38 95% 64%);
  --milk: hsl(42 40% 96%);
  --milk-ink: hsl(30 4% 10%);
  --milk-muted: hsl(30 4% 38%);
  --milk-border: hsl(35 15% 86%);
  --radius: 12px;
  --font: 'Amp', 'Polly Rounded', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* the FE logo is dark ink — invert it on dark surfaces, exactly like the app */
.logo-invert { filter: invert(1); }

.mono-label {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent);
}

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: hsl(30 3% 7% / 0.78);
  border-bottom: 1px solid hsl(30 4% 20% / 0.7);
}
.nav-inner { display: flex; align-items: center; gap: 28px; height: 66px; }
.nav-logo img { height: 26px; width: auto; }
.nav-links { display: flex; gap: 24px; margin-left: auto; align-items: center; }
.nav-links a {
  text-decoration: none; font-size: 0.92rem; color: var(--fg-muted);
  transition: color 0.15s;
}
.nav-links a:hover { color: var(--fg); }
/* The nav CTA sits on the dark header where white carries further than the
   violet, and it keeps the accent for the hero's primary action. */
.nav-links a.btn, .nav-links a.btn:hover {
  background: var(--milk); color: var(--milk-ink);
}
.nav-links a.btn:hover { box-shadow: 0 10px 34px hsl(42 40% 96% / 0.18); }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: var(--accent-deep);
  font-family: var(--font); font-weight: 700; font-size: 0.95rem;
  padding: 11px 24px; border-radius: 999px; text-decoration: none;
  border: none; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 34px hsl(255 85% 76% / 0.28); }
.btn.milk { background: var(--milk); color: var(--milk-ink); }
.btn.milk:hover { box-shadow: 0 10px 34px hsl(42 40% 96% / 0.18); }
.btn.ghost { background: transparent; color: var(--fg); border: 1px solid var(--border); }
.btn.ghost:hover { border-color: var(--accent); box-shadow: none; }
.btn.sm { padding: 8px 18px; font-size: 0.88rem; }
.nav-burger { display: none; background: none; border: none; color: var(--fg); font-size: 1.5rem; cursor: pointer; }

/* ---------- hero ---------- */
.hero { position: relative; padding: 84px 0 70px; }
/* Hero backdrop: a drafting-paper grid — fine 32px cells inside a coarse
   160px module — with a hairline diagonal hatch over it for texture. Two
   scales rather than one read as deliberate structure instead of wallpaper.
   The accent glow is kept faint on purpose; the restraint is what makes it
   feel expensive. Everything is masked outward so the pattern dissolves
   before it reaches the copy. */
.hero-bg {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(ellipse 55% 60% at 82% 8%, hsl(40 20% 96% / 0.075), transparent 62%),
    radial-gradient(ellipse 70% 50% at 12% 0%, hsl(40 20% 96% / 0.035), transparent 60%);
}
/* A wide, soft light-fall across the top — depth without a single hard edge. */
.hero-bg::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse 120% 70% at 50% -20%, hsl(40 20% 96% / 0.055), transparent 70%),
    radial-gradient(circle 420px at 78% 2%, hsl(40 20% 96% / 0.05), transparent 70%);
}
/* One mark, whole and small enough to still read as the logo. Blown up to
   fill the panel it just becomes three dark blobs; kept at a fixed 260px it
   stays recognisable and sits quietly behind the right-hand column. Fixed
   px, not a percentage, so it never rescales with the viewport. */
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background-image: url('/assets/img/pattern-logo.svg');
  background-repeat: no-repeat;
  background-size: 260px auto;
  background-position: right 7% top 16%;
  opacity: 0.05;
}
@media (max-width: 900px) {
  .hero-bg::after { background-size: 170px auto; background-position: right 6% top 8%; }
}
.hero-grid {
  position: relative; display: grid; grid-template-columns: 1.02fr 0.98fr;
  gap: 56px; align-items: center;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent);
  border: 1px solid hsl(255 85% 76% / 0.35); border-radius: 999px;
  padding: 6px 14px; margin-bottom: 24px; background: hsl(255 85% 76% / 0.06);
}
h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.6rem); line-height: 1.06;
  font-weight: 700; letter-spacing: -0.01em; margin-bottom: 20px;
}
h1 .accent { color: var(--accent); }
.lead { color: var(--fg-muted); font-size: clamp(1rem, 1.6vw, 1.14rem); max-width: 470px; margin-bottom: 30px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.hero-note { font-family: var(--mono); font-size: 0.76rem; color: var(--fg-muted); margin-bottom: 30px; }
.hero-stats { display: flex; gap: 26px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 22px; }
.hero-stat .n { font-weight: 700; font-size: 1.3rem; }
.hero-stat .l { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-muted); }

/* cost-comparison visual */
.compare { position: relative; display: grid; gap: 14px; }
.compare::before {
  content: ''; position: absolute; inset: 6% -8% -6% 2%;
  background: radial-gradient(ellipse, hsl(255 85% 76% / 0.15), transparent 70%);
  filter: blur(12px);
}
.cmp-card {
  position: relative;
  background: linear-gradient(180deg, hsl(30 3% 12%), hsl(30 3% 9%));
  border: 1px solid var(--border); border-radius: 16px; padding: 20px 22px;
  box-shadow: 0 30px 70px hsl(0 0% 0% / 0.45);
}
.cmp-card.old { transform: rotate(-1.2deg); }
.cmp-card.new { transform: rotate(0.8deg); border-color: hsl(255 85% 76% / 0.55); }
.cmp-title { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 10px; }
.cmp-card.new .cmp-title { color: var(--accent); }
.cmp-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 9px 0; border-bottom: 1px dashed hsl(30 4% 22%); font-size: 0.9rem;
}
.cmp-row:last-of-type { border-bottom: none; }
.cmp-row .what { color: var(--fg-muted); }
.cmp-row .val { font-family: var(--mono); font-size: 0.82rem; white-space: nowrap; }
.cmp-row .bad { color: hsl(0 70% 70%); }
.cmp-row .bad s { opacity: 0.85; }
.cmp-row .good { color: var(--success); }
.cmp-note {
  margin-top: 12px; padding: 10px 14px; border-radius: 10px;
  background: hsl(255 85% 76% / 0.1); border: 1px solid hsl(255 85% 76% / 0.3);
  font-size: 0.85rem; color: var(--fg);
}

/* story — timeline + oversized quote */
.timeline { position: relative; max-width: 700px; padding-left: 38px; }
.timeline::before {
  content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, var(--accent), hsl(255 85% 76% / 0.08));
}
.tl-item { position: relative; margin-bottom: 36px; }
.tl-item:last-child { margin-bottom: 0; }
.tl-item::before {
  content: ''; position: absolute; left: -37px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg); border: 3px solid var(--accent);
  box-shadow: 0 0 14px hsl(255 85% 76% / 0.45);
}
.tl-tag {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.tl-item p { color: var(--fg-muted); font-size: 1rem; }
.tl-item em { color: var(--fg); font-style: italic; }

/* The quote mark used to sit above the text as a small floating glyph with
   nothing to anchor it, stranded in a lot of empty space. It is now an
   oversized watermark behind the words — decoration that belongs to the
   composition instead of hovering apart from it — and the whole block is
   pulled tighter so the section stops sagging. */
/* Was set centred at up to 2.15rem across 880px, which ran to four huge
   lines and swallowed the section. Now left-aligned on a narrower measure at
   a calmer size: it reads as a closing remark, not a billboard. */
.big-quote {
  margin: 52px 0 0; max-width: none; text-align: left;
  position: relative; padding: 6px 0 6px 32px; border: 0;
}
/* A thin ink rule down the left edge, the standard pull-quote mark. Replaces
   the oversized serif glyph that sat above the text with nothing under it. */
.big-quote::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 2px; background: currentColor; opacity: 0.18;
}
.big-quote p {
  font-size: clamp(1.3rem, 2.6vw, 2rem); font-weight: 600; line-height: 1.3;
  color: var(--fg); letter-spacing: -0.015em; text-wrap: balance;
}
.milk-section .big-quote p { color: var(--milk-ink); }
/* .accent was only ever defined under h1, so the emphasis in the quote was
   rendering as plain body text. A highlighter stroke under the figure marks
   it without turning the sentence violet. */
.big-quote .accent {
  color: inherit; padding: 0 3px;
  background-image: linear-gradient(transparent 58%, hsl(255 70% 62% / 0.28) 58%);
}
.big-quote footer {
  display: block; margin-top: 14px;
  font-family: var(--mono); font-size: 0.78rem;
  letter-spacing: 0.04em; color: var(--fg-muted);
}
.milk-section .big-quote footer { color: var(--milk-muted); }

/* dashboard mock */
.mock-wrap { position: relative; }
.mock-wrap::before {
  content: ''; position: absolute; inset: 8% -6% -4% 4%;
  background: radial-gradient(ellipse, hsl(255 85% 76% / 0.16), transparent 70%);
  filter: blur(10px);
}
.mock {
  position: relative; text-align: left;
  background: linear-gradient(180deg, hsl(30 3% 12%), hsl(30 3% 9%));
  border: 1px solid hsl(30 4% 24%);
  border-radius: 18px; padding: 18px;
  box-shadow: 0 40px 90px hsl(0 0% 0% / 0.55), inset 0 1px 0 hsl(40 20% 96% / 0.05);
  transform: rotate(-1.4deg);
}
.mock-head { display: flex; align-items: center; gap: 7px; margin-bottom: 14px; }
.mock-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bg-raise-2); }
.mock-title { margin-left: 8px; font-family: var(--mono); font-size: 0.7rem; color: var(--fg-muted); }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.kpi { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 13px; }
.kpi .k-label { font-family: var(--mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-muted); }
.kpi .k-value { font-size: 1.22rem; font-weight: 700; margin-top: 3px; }
.kpi .k-delta { font-family: var(--mono); font-size: 0.64rem; color: var(--success); }
.mock-chart { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px; }
.mock-chart svg { width: 100%; height: auto; display: block; }
.mock-row {
  display: flex; align-items: center; gap: 10px; margin-top: 12px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 14px; font-size: 0.82rem;
}
.chip { font-size: 0.64rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: hsl(95 50% 66% / 0.15); color: var(--success); }
.mock-row .spend { margin-left: auto; font-family: var(--mono); font-size: 0.7rem; color: var(--fg-muted); }

/* ---------- band ---------- */
.band {
  display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 24px 0; font-size: 0.9rem; color: var(--fg-muted);
  background: hsl(30 3% 9%);
}
.band img { height: 20px; width: auto; }
.band .soon { font-family: var(--mono); font-size: 0.68rem; border: 1px dashed var(--border); padding: 3px 10px; border-radius: 999px; }

/* ---------- sections ---------- */
section { padding: 92px 0; }
.section-head { max-width: 660px; margin-bottom: 50px; }
.section-head .mono-label { display: block; margin-bottom: 14px; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 700; margin-bottom: 12px; letter-spacing: -0.01em; }
.section-head p { color: var(--fg-muted); }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card {
  background: linear-gradient(180deg, hsl(30 3% 12%), hsl(30 3% 10%));
  border: 1px solid var(--border);
  border-radius: 16px; padding: 26px; transition: border-color 0.2s, transform 0.2s;
}
.card:hover { border-color: hsl(255 85% 76% / 0.5); transform: translateY(-3px); }
.card .icon {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: hsl(255 85% 76% / 0.1); border: 1px solid hsl(255 85% 76% / 0.25);
  color: var(--accent); margin-bottom: 16px;
}
.card .icon svg { width: 20px; height: 20px; }
.card h3 { font-size: 1.06rem; margin-bottom: 8px; }
.card p { font-size: 0.9rem; color: var(--fg-muted); }

/* ---------- milk section (how it works) ---------- */
.milk-section {
  background: var(--milk); color: var(--milk-ink);
  border-top: 1px solid var(--milk-border);
}
.milk-section .mono-label { color: hsl(255 45% 48%); }
.milk-section .section-head p { color: var(--milk-muted); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: step; }
.step {
  position: relative; background: #fff; border: 1px solid var(--milk-border);
  border-radius: 16px; padding: 30px 26px 26px;
  box-shadow: 0 10px 30px hsl(30 20% 50% / 0.08);
}
.step::before {
  counter-increment: step; content: '0' counter(step);
  font-family: var(--mono); font-size: 0.78rem; font-weight: 500; color: hsl(255 45% 48%);
}
.step h3 { margin: 10px 0 8px; font-size: 1.05rem; }
.step p { font-size: 0.92rem; color: var(--milk-muted); }
.milk-section .milk-cta { margin-top: 40px; text-align: center; }
.milk-section .btn { background: var(--milk-ink); color: var(--milk); }
.milk-section .btn:hover { box-shadow: 0 10px 30px hsl(30 4% 10% / 0.3); }

/* ---------- marquee ---------- */
.marquee-section { padding: 92px 0 70px; }
.marquee { overflow: hidden; margin-top: 46px; mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); }
.marquee-track { display: flex; gap: 16px; width: max-content; animation: marquee 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.niche {
  position: relative; border-radius: 16px; overflow: hidden;
  width: 250px; aspect-ratio: 4/3; border: 1px solid var(--border); flex-shrink: 0;
}
.niche img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92); }
.niche::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, hsl(0 0% 0% / 0.72)); }
.niche span {
  position: absolute; left: 14px; bottom: 11px; z-index: 1;
  font-weight: 700; font-size: 0.95rem;
}

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
.faq details {
  border: 1px solid var(--border); border-radius: 14px; background: var(--bg-raise);
  padding: 16px 20px; margin-bottom: 10px;
}
.faq summary { cursor: pointer; font-weight: 700; font-size: 0.98rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--accent); font-size: 1.25rem; transition: transform 0.2s; flex-shrink: 0; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: 10px; color: var(--fg-muted); font-size: 0.92rem; }
.faq a { color: var(--accent); }

/* ---------- final CTA ---------- */
.cta-final {
  text-align: center; position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(ellipse 70% 90% at 50% 115%, hsl(255 85% 76% / 0.2), transparent 70%),
    linear-gradient(180deg, hsl(30 3% 11%), hsl(30 3% 9%));
  border: 1px solid var(--border);
  border-radius: 24px; padding: 76px 30px;
}
/* The same grid + mark as the hero, so the page opens and closes on the same
   texture instead of ending on a flat panel. Masked from the top edge down,
   mirroring the hero's top-down fade. */
.cta-final::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url('/assets/img/pattern-logo.svg');
  background-repeat: no-repeat;
  background-size: 190px auto;
  background-position: right 6% center;
  opacity: 0.05;
}
.cta-final h2 { margin-bottom: 14px; }
.cta-final p { color: var(--fg-muted); max-width: 500px; margin: 0 auto 32px; }

/* ---------- footer ---------- */
/* body > footer, not footer: a bare element selector also matched the
   <footer> inside the pull-quote, drawing a rule across it and padding it
   out by 106px, which is what stretched the quote's left rule past its text. */
body > footer { border-top: 1px solid var(--border); padding: 46px 0 60px; margin-top: 40px; }
.foot { display: flex; gap: 40px; flex-wrap: wrap; justify-content: space-between; }
.foot img { height: 24px; width: auto; margin-bottom: 14px; }
.foot p { font-size: 0.85rem; color: var(--fg-muted); max-width: 320px; }
.foot h4 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-muted); margin-bottom: 12px; font-family: var(--mono); font-weight: 500; }
.foot ul { list-style: none; }
.foot li { margin-bottom: 8px; }
.foot a { color: var(--fg-muted); text-decoration: none; font-size: 0.92rem; }
.foot a:hover { color: var(--fg); }
.legal-line { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 0.78rem; color: var(--fg-muted); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* ---------- legal pages ---------- */
.legal { max-width: 780px; margin: 0 auto; padding: 70px 24px 90px; }
.legal h1 { font-size: 2.2rem; margin-bottom: 8px; }
.legal .updated { font-family: var(--mono); font-size: 0.78rem; color: var(--fg-muted); margin-bottom: 40px; display: block; }
.legal h2 { font-size: 1.35rem; margin: 42px 0 12px; }
.legal h3 { font-size: 1.05rem; margin: 26px 0 8px; }
.legal p, .legal li { color: var(--fg-muted); font-size: 0.98rem; margin-bottom: 12px; }
.legal ul, .legal ol { padding-left: 22px; margin-bottom: 16px; }
.legal strong { color: var(--fg); }
.legal a { color: var(--accent); }
/* milk note — reads like a human margin note, not an AI summary card */
.callout {
  position: relative;
  background: var(--milk);
  border: none;
  border-radius: 14px;
  padding: 24px 26px 20px;
  margin: 30px 0 26px;
  box-shadow: 0 18px 44px hsl(0 0% 0% / 0.35);
}
.callout::before {
  content: 'In short';
  position: absolute; top: -11px; left: 20px;
  font-family: var(--mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--accent); color: var(--accent-deep);
  padding: 4px 12px; border-radius: 999px;
}
.callout p { color: var(--milk-ink) !important; }
.callout strong { color: var(--milk-ink); }
.callout a { color: hsl(255 45% 45%); }

/* ---------- glossary ---------- */
.alpha-nav {
  position: sticky; top: 78px; z-index: 10;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2px;
  background: hsl(30 3% 10%);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 12px; margin: 26px 0 6px;
  box-shadow: 0 14px 34px hsl(0 0% 0% / 0.4);
}
.alpha-nav a {
  font-family: var(--mono); font-size: 0.72rem; text-decoration: none;
  color: var(--fg-muted); width: 25px; height: 25px;
  display: grid; place-items: center; border-radius: 999px;
  transition: color 0.15s, background 0.15s;
}
.alpha-nav a:hover { color: var(--accent-deep); background: var(--accent); }
/* dictionary layout: giant letter in the margin, term | definition rows */
.glossary section {
  display: grid; grid-template-columns: 84px 1fr; gap: 0 28px;
  padding: 26px 0 0; margin-top: 26px;
  border-top: 1px solid var(--border);
  scroll-margin-top: 150px;
}
.glossary section h2 {
  grid-column: 1; margin: 0;
  font-size: 3.4rem; line-height: 1; font-weight: 700;
  color: hsl(255 85% 76% / 0.85);
  scroll-margin-top: 130px;
}
.glossary dl {
  grid-column: 2; margin: 0;
  display: grid; grid-template-columns: 215px 1fr; gap: 14px 26px;
  align-items: baseline;
}
.glossary dt { font-weight: 700; color: var(--fg); font-size: 0.98rem; margin: 0; }
.glossary dd { margin: 0; color: var(--fg-muted); font-size: 0.94rem; }
.glossary dd code { font-family: var(--mono); font-size: 0.82rem; color: var(--accent); }
@media (max-width: 760px) {
  .glossary section { grid-template-columns: 1fr; }
  .glossary section h2 { font-size: 2rem; margin-bottom: 10px; }
  .glossary dl { grid-template-columns: 1fr; gap: 4px; }
  .glossary dd { margin-bottom: 12px; }
}

/* ---------- reveal ---------- */
/* Every hidden start state below is gated on [data-anim], which only the
   inline <head> flag sets. Anything that does not run scripts — search
   crawlers, AI answer engines, reader modes, a failed JS request — gets the
   default: fully painted content, no opacity:0, nothing to mistake for
   hidden text. The animation is an enhancement layered on top, never the
   thing standing between a crawler and the copy. */
@media (prefers-reduced-motion: no-preference) {
  [data-anim] .reveal { opacity: 0; filter: blur(8px); transform: translateY(14px); transition: opacity 0.6s ease, filter 0.6s ease, transform 0.6s ease; }
  [data-anim] .reveal.in { opacity: 1; filter: blur(0); transform: none; }

  /* Scroll-driven blur reveal for everything else — pure CSS, melts each
     block in as it enters the viewport (skipped by unsupporting browsers).
     This one needs the gate most: it hides below-the-fold content with no
     JS at all, so a renderer that loads the page without scrolling would
     otherwise capture the whole page below the hero at opacity 0. */
  @supports (animation-timeline: view()) {
    [data-anim] .legal > *,
    [data-anim] .band > *,
    [data-anim] .section-head > *,
    [data-anim] .cta-final > *,
    [data-anim] .foot > div {
      animation: lp-blur-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }
}
@keyframes lp-blur-in {
  from { opacity: 0; filter: blur(9px); transform: translateY(12px); }
  to { opacity: 1; filter: blur(0); transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 920px) {
  /* 84px above the headline and 92px between every section is generous on a
     desktop column and dead space on a phone, where the fold is the whole
     budget. Roughly halved. */
  .hero { padding: 40px 0 52px; }
  section { padding: 60px 0; }
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .mock { transform: none; }
  .grid-3, .steps { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; gap: 30px; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .nav-links {
    display: none; position: absolute; top: 66px; left: 0; right: 0;
    flex-direction: column; background: var(--bg-raise); padding: 20px;
    border-bottom: 1px solid var(--border);
  }
  .nav-links.open { display: flex; }
  .nav-burger { display: block; margin-left: auto; }
}

/* the agency script — lines everyone has heard */
.script { max-width: 720px; }
.script-lines { list-style: none; margin: 0 0 26px; padding: 0; }
/* These are the excuses an agency gives you, not features. Bordered white
   cards with icons made them read as a product grid, which is exactly the
   wrong signal. They are now speech bubbles: grey, tailed, staggered, no
   hover, no chrome. Overheard, not offered. */
.script-lines li {
  position: relative; max-width: 33rem;
  padding: 16px 20px 17px; margin: 0 0 8px;
  background: hsl(30 6% 10% / 0.055);
  border-radius: 18px 18px 18px 5px;
}
.script-lines li:nth-child(2n) {
  margin-left: auto; border-radius: 18px 18px 5px 18px;
  background: hsl(30 6% 10% / 0.035);
}
/* The tail: a small triangle at the bottom corner the bubble is anchored to. */
.script-lines li::after {
  content: ''; position: absolute; bottom: 0; left: -6px;
  border: 7px solid transparent; border-top-color: hsl(30 6% 10% / 0.055);
  border-bottom: 0; border-left: 0;
}
.script-lines li:nth-child(2n)::after {
  left: auto; right: -6px;
  border-top-color: hsl(30 6% 10% / 0.035);
  border-right: 0; border-left: 7px solid transparent;
}
.script-ico { display: none; }
.script-q {
  display: block;
  font-size: clamp(0.98rem, 1.3vw, 1.08rem); font-weight: 500; font-style: italic;
  line-height: 1.5; color: hsl(30 4% 26%);
}
.script-punch { color: var(--milk-muted); font-size: 1.05rem; max-width: 640px; }
.script-punch strong { color: var(--milk-ink); font-weight: 700; }

/* why-grid: their script vs you */
.why-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: start; }
.you-card {
  position: relative;
  background: linear-gradient(180deg, hsl(30 3% 12%), hsl(30 3% 9%));
  border: 1px solid hsl(255 85% 76% / 0.55);
  border-radius: 18px; padding: 30px 28px;
  box-shadow: 0 30px 70px hsl(0 0% 0% / 0.45);
}
.you-tag {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
}
.you-lead { font-weight: 700; font-size: 1.35rem; margin-bottom: 20px; }
.you-steps { list-style: none; margin: 0 0 20px; padding: 0; }
.you-steps li {
  display: flex; align-items: baseline; gap: 14px;
  color: var(--fg-muted); font-size: 0.97rem; margin-bottom: 14px;
}
.you-steps span {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: var(--accent-deep);
  font-family: var(--mono); font-size: 0.8rem; font-weight: 500;
  display: grid; place-items: center; transform: translateY(4px);
}
.you-note { color: var(--fg-muted); font-size: 0.92rem; margin-bottom: 24px; }
@media (max-width: 920px) { .why-grid { grid-template-columns: 1fr; gap: 40px; } }

/* the serif italic ampersand — Polly's & is clumsy, Baskerville's is a classic */
.amp { font-family: 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif; font-style: normal; }

/* why section on milk — the script reads like ink on paper */
#why.milk-section .script-lines li { color: var(--milk-ink); border-left-color: hsl(255 45% 48% / 0.5); }
#why.milk-section .script-lines li:nth-child(2n) { color: var(--milk-muted); }
#why.milk-section .script-punch { color: var(--milk-muted); }
#why.milk-section .script-punch strong { color: hsl(255 45% 42%); }
#why.milk-section .big-quote p { color: var(--milk-ink); }
#why.milk-section .big-quote::before { color: hsl(255 45% 48%); }
#why.milk-section .big-quote footer { color: hsl(255 45% 42%); }

/* the dark you-card keeps its own contrast even inside a milk section */
.you-card { color: var(--fg); }
.you-card .you-lead { color: var(--fg); }
.milk-section .you-card .btn { background: var(--accent); color: var(--accent-deep); }

#why.milk-section { padding-bottom: 48px; }

/* you-side: ink stepper on milk, mirroring the script column */
.you-side { padding-top: 4px; }
.you-side .you-tag { color: hsl(255 45% 42%); }
.you-lead { font-weight: 700; font-size: 1.5rem; color: var(--milk-ink); margin-bottom: 26px; }
.you-side .you-steps { list-style: none; margin: 0 0 24px; padding: 0; }
.you-side .you-steps li {
  position: relative; display: flex; gap: 16px; padding-bottom: 24px;
  color: var(--milk-muted); font-size: 1rem;
}
.you-side .you-steps li:not(:last-child)::before {
  content: ''; position: absolute; left: 13px; top: 32px; bottom: 4px; width: 2px;
  background: hsl(255 45% 42% / 0.25);
}
.you-side .you-steps span {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: hsl(255 45% 42%); color: var(--milk);
  font-family: var(--mono); font-size: 0.82rem;
  display: grid; place-items: center; transform: translateY(-2px);
}
.you-side .you-steps strong { color: var(--milk-ink); }
.you-side .you-note { color: var(--milk-muted); font-size: 0.95rem; max-width: 400px; margin-bottom: 28px; }

/* Was margin-top:-16px to pull up under the old pricing note. That note is
   gone, so the negative margin left this sitting on the buttons. */
.hero-meta {
  display: flex; align-items: center; gap: 10px; margin-top: 26px; margin-bottom: 30px;
  font-size: 0.85rem; color: var(--fg-muted);
}
.hero-meta img { height: 18px; width: auto; }

/* hero phone: your ad, live, with results floating around it */
.phone-stage { position: relative; display: flex; justify-content: center; padding: 20px 0; }
.phone {
  width: 300px; border-radius: 36px; overflow: hidden;
  background: hsl(30 3% 10%);
  border: 5px solid hsl(30 4% 22%);
  box-shadow: 0 40px 90px hsl(0 0% 0% / 0.6), 0 0 60px hsl(255 85% 76% / 0.08);
  transform: rotate(1.6deg);
  position: relative; z-index: 1;
}
.phone-notch {
  width: 90px; height: 8px; border-radius: 999px; background: hsl(30 4% 22%);
  margin: 10px auto 8px;
}
.ig-head { display: flex; align-items: center; gap: 10px; padding: 8px 14px 10px; }
.ig-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: conic-gradient(from 200deg, var(--accent), hsl(95 50% 66%), var(--accent));
}
.ig-id { display: flex; flex-direction: column; line-height: 1.2; }
.ig-id strong { font-size: 0.82rem; }
.ig-id em { font-style: normal; font-size: 0.68rem; color: var(--fg-muted); }
.ig-dots { margin-left: auto; color: var(--fg-muted); letter-spacing: 2px; }
.ig-media { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.ig-cta {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 14px; font-size: 0.85rem; font-weight: 700; color: var(--accent);
  border-bottom: 1px solid hsl(30 4% 18%);
}
.ig-caption { padding: 10px 14px 16px; font-size: 0.78rem; color: var(--fg-muted); }
.ig-caption strong { color: var(--fg); }

.chip-float {
  position: absolute; z-index: 2;
  font-family: var(--mono); font-size: 0.72rem; color: var(--fg-muted);
  background: linear-gradient(180deg, hsl(30 3% 14%), hsl(30 3% 10%));
  border: 1px solid var(--border); border-radius: 12px;
  padding: 9px 14px; box-shadow: 0 16px 40px hsl(0 0% 0% / 0.5);
  white-space: nowrap;
}
.chip-float b { color: var(--fg); font-family: var(--font); font-size: 0.95rem; margin-left: 4px; }
.chip-float.c1 { top: 9%; left: 2%; transform: rotate(-4deg); }
.chip-float.c2 { top: 24%; right: 1%; transform: rotate(3deg); }
.chip-float.c2 b { color: var(--success); }
.chip-float.c1 b { color: var(--success); }
.chip-float.c3 {
  bottom: 12%; left: 0; transform: rotate(-2deg);
  border-color: hsl(255 85% 76% / 0.55); color: var(--fg);
}
.chip-float.c3 b { color: var(--accent); margin-left: 0; }
.chip-float.c4 { bottom: 28%; right: 3%; transform: rotate(2.5deg); }
@media (max-width: 920px) {
  .chip-float.c1, .chip-float.c2 { top: auto; }
  .chip-float { position: static; transform: none; display: inline-block; margin: 8px 8px 0 0; }
  .phone-stage { flex-wrap: wrap; }
}

/* single side-by-side comparison card */
.vs-card {
  background: linear-gradient(180deg, hsl(30 3% 12%), hsl(30 3% 9%));
  border: 1px solid var(--border); border-radius: 18px;
  padding: 10px 0 0; overflow: hidden;
  box-shadow: 0 36px 80px hsl(0 0% 0% / 0.5);
}
.vs-row {
  display: grid; grid-template-columns: 1.1fr 1fr 1fr;
  align-items: center; gap: 10px;
  padding: 13px 22px; border-bottom: 1px dashed hsl(30 4% 20%);
  font-size: 0.9rem;
}
.vs-row > span:first-child { color: var(--fg-muted); }
.vs-row > span:nth-child(2), .vs-row > span:nth-child(3) { text-align: right; font-family: var(--mono); font-size: 0.8rem; }
.vs-head { border-bottom: 1px solid var(--border); padding-top: 6px; }
.vs-head span {
  font-family: var(--mono); font-size: 0.66rem !important; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-muted);
}
.vs-head .vs-b24 { color: var(--fg); }
.vs-row .bad { color: hsl(0 70% 70%); }
.vs-row .good { color: var(--success); }
.vs-note {
  margin: 6px 14px 14px; padding: 11px 16px; border-radius: 12px;
  background: hsl(255 85% 76% / 0.09); border: 1px solid hsl(255 85% 76% / 0.3);
  font-size: 0.85rem; color: var(--fg);
}

/* why section: two stacked horizontal blocks */
.script { max-width: none; }
/* A single column: a thread of four excuses reads chronologically, the way
   you actually received them. Two columns turned it back into a grid. */
.script-lines { display: block; max-width: 760px; }
.script-punch { max-width: 720px; margin-top: 28px; }
.you-band { margin-top: 54px; border-top: 1px solid var(--milk-border); padding-top: 40px; }
.you-band-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 30px; }
.you-band .you-tag { color: hsl(255 45% 42%); margin-bottom: 8px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; }
.you-band .you-lead { margin-bottom: 0; }
.you-steps-h { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
/* Cards, not loose text: three bare numerals floating in whitespace read as
   an afterthought next to the excuse cards above. Same border, radius and
   hover as those, so the section holds together as one system. */
.you-steps-h li {
  display: block; padding: 22px 22px 20px;
  border: 1px solid var(--milk-border); border-radius: 14px;
  background: hsl(0 0% 100% / 0.5); color: var(--milk-muted); font-size: 0.97rem;
  transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.you-steps-h li:hover {
  border-color: hsl(30 4% 10% / 0.28); transform: translateY(-2px);
  box-shadow: 0 12px 28px hsl(30 4% 10% / 0.07);
}
.step-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.step-ico {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--milk-border); background: var(--milk); color: var(--milk-ink);
  transition: border-color 0.22s ease;
}
.you-steps-h li:hover .step-ico { border-color: hsl(30 4% 10% / 0.35); }
.step-ico svg { width: 17px; height: 17px; }
.step-n {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em;
  color: hsl(30 4% 10% / 0.32);
}
.you-steps-h strong { color: var(--milk-ink); }
.you-steps-h strong { color: var(--milk-ink); }
.you-band .you-note { color: var(--milk-muted); font-size: 0.92rem; margin: 0; }
@media (max-width: 760px) { .script-lines, .you-steps-h { grid-template-columns: 1fr; } }

/* static niche grid: every card is a real SEO landing page */
.niches-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.niches-grid .niche { width: auto; display: block; text-decoration: none; }
.niche-label {
  position: absolute; left: 14px; bottom: 11px; z-index: 1;
  font-weight: 700; font-size: 0.95rem; color: var(--fg);
  text-shadow: 0 2px 10px hsl(0 0% 0% / 0.8);
}
.niches-grid .niche:hover img { transform: scale(1.05); }
.niches-grid .niche:hover { border-color: hsl(255 85% 76% / 0.6); }
@media (max-width: 860px) { .niches-grid { grid-template-columns: repeat(2, 1fr); } }

/* niche landing pages */
.niche-page .niche-hero { border-radius: 18px; overflow: hidden; border: 1px solid var(--border); margin: 26px 0; }
.niche-page .niche-hero img { width: 100%; aspect-ratio: 21/9; object-fit: cover; }
.niche-page .niche-intro { font-size: 1.1rem; color: var(--fg); }

/* gradient niche cards (until photos arrive) + gradient page hero */
.niche-grad {
  display: grid; place-items: center;
  background:
    radial-gradient(ellipse 90% 90% at 30% 20%, hsl(var(--nh) / 0.22), transparent 65%),
    linear-gradient(180deg, hsl(30 3% 13%), hsl(30 3% 9%));
}
.niche-grad::after { background: linear-gradient(180deg, transparent 55%, hsl(0 0% 0% / 0.55)); }
.niche-grad svg { width: 54px; height: 54px; color: hsl(var(--nh)); opacity: 0.9; transition: transform 0.35s; }
.niche-grad:hover svg { transform: scale(1.12); }
.niche-hero-grad {
  display: grid; place-items: center; aspect-ratio: 21/9;
  background:
    radial-gradient(ellipse 80% 100% at 30% 20%, hsl(var(--nh) / 0.2), transparent 65%),
    linear-gradient(180deg, hsl(30 3% 13%), hsl(30 3% 9%));
}
.niche-hero-grad svg { width: 84px; height: 84px; color: hsl(var(--nh)); }

.niches-more {
  margin-top: 28px;
  text-align: center;
  font-size: 15px;
  color: var(--muted);
}

/* ---------- language dropdown ----------
   Flags ride as data-URI SVGs so the only colour in an otherwise monochrome
   header is the flag itself — the same restraint the reference site uses. */
.flag {
  flex-shrink: 0; width: 18px; height: 13px; border-radius: 2px;
  background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px hsl(0 0% 100% / 0.16);
}
.flag-gb {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='t'%3E%3Cpath d='M30,15h30v15zv15h-30zh-30v-15zv-15h30z'/%3E%3C/clipPath%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0,0 60,30M60,0 0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 60,30M60,0 0,30' clip-path='url(%23t)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E");
}
.flag-fr {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23ED2939'/%3E%3Crect width='2' height='2' fill='%23fff'/%3E%3Crect width='1' height='2' fill='%23002395'/%3E%3C/svg%3E");
}

.lang { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em;
  color: var(--fg-muted); background: none; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 8px 4px 7px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.lang-btn:hover, .lang-btn[aria-expanded='true'] {
  color: var(--fg); border-color: var(--fg-muted); background: hsl(0 0% 100% / 0.04);
}
.lang-chev { width: 9px; height: 9px; opacity: 0.7; transition: transform 0.18s ease; }
.lang-btn[aria-expanded='true'] .lang-chev { transform: rotate(180deg); }

.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 168px; list-style: none; margin: 0; padding: 5px;
  background: var(--bg-raise); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 18px 40px hsl(0 0% 0% / 0.5);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.lang[data-open='true'] .lang-menu { opacity: 1; visibility: visible; transform: none; }
.lang-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; text-decoration: none;
  font-size: 0.86rem; color: var(--fg-muted); transition: background 0.14s, color 0.14s;
}
a.lang-opt:hover { background: hsl(0 0% 100% / 0.06); color: var(--fg); }
.lang-opt.is-current { color: var(--fg); cursor: default; }
.lang-opt.is-current::after {
  content: ''; margin-left: auto; width: 5px; height: 5px;
  border-radius: 50%; background: var(--accent);
}

/* ---------- pricing ----------
   Two plans, monochrome. The yearly card is distinguished by ink weight —
   a solid border and an inverted button — rather than by colour, so the
   accent stays rare and the hierarchy still reads at a glance. */
.pricing-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px; max-width: 820px; margin: 0 auto;
}
.price-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--milk-border); border-radius: 18px;
  background: hsl(0 0% 100% / 0.6); padding: 30px 28px;
  transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.price-card:hover {
  border-color: hsl(30 4% 10% / 0.28); transform: translateY(-3px);
  box-shadow: 0 18px 40px hsl(30 4% 10% / 0.08);
}
.price-card.featured { border-color: var(--milk-ink); background: #fff; }
.price-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.price-name {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--milk-muted);
}
.price-badge {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--milk); background: var(--milk-ink);
  border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}
.price-figure { display: flex; align-items: baseline; gap: 6px; }
.price-amount { font-size: clamp(2.2rem, 4.4vw, 2.9rem); font-weight: 700; color: var(--milk-ink); letter-spacing: -0.02em; }
.price-per { font-family: var(--mono); font-size: 0.85rem; color: var(--milk-muted); }
.price-sub { color: var(--milk-muted); font-size: 0.9rem; margin: 8px 0 22px; }
.price-card .btn { justify-content: center; text-align: center; width: 100%; }
.price-card.featured .btn { background: var(--milk-ink); color: var(--milk); }
.price-feats { list-style: none; margin: 24px 0 0; padding: 24px 0 0; border-top: 1px solid var(--milk-border); display: grid; gap: 11px; }
.price-feats li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.93rem; color: var(--milk-muted); }
.price-feats svg { flex-shrink: 0; width: 15px; height: 15px; margin-top: 3px; color: var(--milk-ink); }
.price-note {
  max-width: 640px; margin: 30px auto 0; text-align: center;
  font-size: 0.9rem; color: var(--milk-muted);
}
@media (max-width: 760px) { .pricing-grid { grid-template-columns: 1fr; } }
.hero-note a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: hsl(40 20% 96% / 0.4); }
.hero-note a:hover { text-decoration-color: currentColor; }

/* Step copy split into a title line and a description line: the three cards
   then share a rhythm instead of one holding a single short sentence and a
   lot of empty space. */
.step-body { display: block; }
.step-title { display: block; font-weight: 700; color: var(--milk-ink); margin-bottom: 3px; }
.step-desc { display: block; color: var(--milk-muted); font-size: 0.93rem; line-height: 1.5; }

/* The arrow nudges on hover: the button already says where it goes, the
   motion just confirms it is going somewhere. */
.btn-arrow { width: 15px; height: 15px; flex-shrink: 0; transition: transform 0.18s ease; }
.btn:hover .btn-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .btn:hover .btn-arrow { transform: none; } }

/* ---------- FAQ page / blog ---------- */
.faq-page .faq { margin-bottom: 34px; }
.faq-cat {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent);
  margin: 44px 0 16px; font-weight: 500;
}
.faq-lede, .article-lede { color: var(--fg-muted); font-size: 1.05rem; max-width: 62ch; margin-bottom: 8px; }
.faq-back { margin-top: 48px; font-family: var(--mono); font-size: 0.82rem; }
.faq-back a { color: var(--accent); text-decoration: none; }
.faq-back a:hover { text-decoration: underline; }
.crumb { font-family: var(--mono); font-size: 0.75rem; margin-bottom: 14px; }
.crumb a { color: var(--fg-muted); text-decoration: none; }
.crumb a:hover { color: var(--fg); }

.article h2 { font-size: clamp(1.15rem, 2vw, 1.4rem); margin: 34px 0 12px; }
.article p { max-width: 68ch; margin-bottom: 14px; color: var(--fg-muted); line-height: 1.75; }
.article .article-lede { color: var(--fg); font-weight: 500; margin-bottom: 26px; }

.blog-index { max-width: 1140px; }
.post-list {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.post-list a {
  display: flex; flex-direction: column; height: 100%;
  padding: 24px 24px 20px; text-decoration: none;
  border: 1px solid var(--border); border-radius: 16px;
  background: linear-gradient(180deg, hsl(30 3% 11%), hsl(30 3% 9%));
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.post-list a:hover {
  border-color: var(--accent); transform: translateY(-3px);
  box-shadow: 0 18px 40px hsl(0 0% 0% / 0.45);
}
.post-title {
  display: block; font-weight: 700; font-size: 1.02rem; line-height: 1.35;
  color: var(--fg); margin-bottom: 10px;
}
.post-desc {
  display: block; color: var(--fg-muted); font-size: 0.9rem; line-height: 1.6;
  flex: 1 1 auto;
}
.post-more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent);
}
.post-more::after { content: '\2192'; transition: transform 0.18s ease; }
.post-list a:hover .post-more::after { transform: translateX(3px); }
@media (max-width: 1000px) { .post-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .post-list { grid-template-columns: 1fr; } }

/* The nav marks where you are, so it is not identical on every page. */
.nav-links a[aria-current='page'] { color: var(--fg); }
.nav-links a[aria-current='page']:not(.btn) { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--accent); }

/* FAQ page runs the full column and lays questions out two-up, so 47 of them
   do not read as an endless single stack. */
.faq-wide { max-width: 1140px; }
.faq-wide .faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.faq-wide .faq details { margin: 0; }
.faq-search { position: relative; margin: 26px 0 8px; max-width: 460px; }
.faq-search input {
  width: 100%; padding: 12px 16px; border-radius: 999px;
  background: var(--bg-raise); border: 1px solid var(--border); color: var(--fg);
  font-family: var(--font); font-size: 0.95rem; outline: none;
  transition: border-color 0.18s ease;
}
.faq-search input:focus { border-color: var(--accent); }
.faq-search input::placeholder { color: var(--fg-muted); }
.faq-count { display: block; margin-top: 8px; font-family: var(--mono); font-size: 0.72rem; color: var(--fg-muted); }
.faq-empty { margin-top: 20px; color: var(--fg-muted); }
@media (max-width: 760px) { .faq-wide .faq { grid-template-columns: 1fr; } }