/* ============================================================
   AUTOLINK CORE — shared DNA for every page.
   Values copied 1:1 from the original homepage (now ad-accounts.html).
   Pages load this FIRST, then their own page CSS (page CSS wins).
   Read docs/DESIGN-LESSONS.md before changing anything here.
   ============================================================ */

:root {
  --font-sans: 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
  --text-primary: #F4F4F4;
  --text-muted:   #A1A1A3;
  --text-faint:   #8A8A8F;
  --bg: #08090B;
  --bg-2: #0C0D10;
  --surface: #101115;
  --surface-2: #15171C;
  --line: rgba(255,255,255,0.06);
  --line-2: rgba(255,255,255,0.11);
  --text: #F4F4F4;
  --text-2: #A1A1A3;
  --text-3: #8A8A8F;
  --signal: #FFFFFF;
  --signal-dim: #C9CBD1;
  --silver: linear-gradient(180deg, #FFFFFF 0%, #C9CBD1 50%, #8E9099 100%);
  --warm: #C9CBD1;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snappy: cubic-bezier(0.34, 1.56, 0.64, 1);
  --grid: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: auto; scroll-padding-top: 96px; color-scheme: dark;
  /* Stop iOS Safari from auto-inflating text (made headings/forms too big). */
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (pointer: fine) { html { overscroll-behavior: none; } }
a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* New pages only (body.site) — keeps ad-accounts pixel-identical.
   Not on h1: balance re-wraps mid-typewriter and makes lines jump. */
/* Longhand on purpose: the text-wrap shorthand resets text-wrap-mode and
   would silently undo white-space: nowrap on single-line labels. */
.site h2, .site h3 { text-wrap-style: balance; }
.site p { text-wrap-style: pretty; }

.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-link {
  position: fixed; top: 12px; left: 12px; z-index: 10000;
  padding: 12px 18px; border-radius: 100px;
  background: #FFFFFF; color: #08090B;
  font-size: 14px; font-weight: 500; text-decoration: none;
  transform: translateY(-160%);
  opacity: 0; /* iOS 26 Safari paints the page under the status bar, where a link parked above the top shows */
  transition: transform 0.3s var(--ease-out), opacity 0.2s var(--ease-out);
}
.skip-link:focus-visible { transform: none; opacity: 1; }

a:focus-visible, button:focus-visible {
  outline: 2px solid rgba(255,255,255,0.7);
  outline-offset: 3px;
  border-radius: 6px;
}
.btn:focus-visible { border-radius: 100px; }
body {
  background: var(--bg);
  color: var(--text);
  /* Scroll-anchoring misfires during scroll-driven transitions. */
  overflow-anchor: none;
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.locked { overflow: hidden; height: 100vh; height: 100svh; }

/* Cross-page fade (Chrome / Safari 18.2+; others just navigate). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 0.45s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* === TYPOGRAPHY SCALE === */
.t-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
::selection { background: rgba(255,255,255,0.92); color: #08090B; }

/* Grain overlay */
.grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Ambient glows */
.ambient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 600px at 80% -10%, rgba(255, 255, 255, 0.035), transparent 60%),
    radial-gradient(700px 500px at -10% 30%, rgba(255, 255, 255, 0.025), transparent 60%),
    radial-gradient(800px 600px at 50% 110%, rgba(255, 255, 255, 0.02), transparent 60%);
}

.wrap {
  max-width: var(--grid);
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
}

.mono {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
}
.mono.dot::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--signal);
  margin-right: 10px;
  vertical-align: middle;
  box-shadow: 0 0 12px var(--signal);
  animation: pulse 2s var(--ease-in-out) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}
.display {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.95;
}
/* Muted second clause — "One panel. <span class="em">Total control.</span>" */
.muted { color: var(--text-2); }

/* === PRELOADER (signature pen-draw) === */
#preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px;
  transition: opacity 0.7s var(--ease-out), visibility 0.7s var(--ease-out);
}
#preloader.gone { opacity: 0; visibility: hidden; pointer-events: none; }
#preloader::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(600px 400px at 50% 50%, rgba(255,255,255,0.04), transparent 60%);
}
/* Second+ page in a session: no signature replay. */
html.pl-quick #preloader { display: none; }

.pl-sig-svg {
  position: relative;
  width: clamp(280px, 38%, 460px);
  height: auto;
  display: block;
  overflow: visible;
}
.pl-sig-svg .stroke {
  fill: none;
  stroke: url(#plSigInk);
  stroke-linecap: round;
  stroke-linejoin: round;
  /* pathLength="1" + dasharray:1 so WebKit/iOS Safari doesn't fragment strokes. */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  animation: plSigDraw var(--dur, 0.5s) cubic-bezier(0.45, 0.05, 0.4, 1) var(--d, 0s) forwards;
}
@keyframes plSigDraw {
  from { opacity: 1; stroke-dashoffset: 1; }
  to   { opacity: 1; stroke-dashoffset: 0; }
}
.pl-sig-svg .dot {
  opacity: 0;
  transform-origin: center;
  animation: plSigDot 0.16s var(--ease-snappy) 1.10s forwards;
}
@keyframes plSigDot {
  0%   { opacity: 0; transform: translateY(-2px) scale(0.6); }
  60%  { opacity: 1; transform: translateY(0) scale(1.25); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.pl-sig-svg .stroke[data-i="0"] { --dur: 0.20s; --d: 0.05s; }
.pl-sig-svg .stroke[data-i="1"] { --dur: 0.07s; --d: 0.26s; }
.pl-sig-svg .stroke[data-i="2"] { --dur: 0.40s; --d: 0.35s; }
.pl-sig-svg .stroke[data-i="3"] { --dur: 0.06s; --d: 0.78s; }
.pl-sig-svg .stroke[data-i="4"] { --dur: 0.22s; --d: 0.86s; }
.pl-sig-svg .stroke[data-i="5"] { --dur: 0.34s; --d: 1.10s; }
.pl-sig-svg .stroke[data-i="6"] { --dur: 0.14s; --d: 1.46s; }
.pl-sig-svg .stroke[data-i="7"] { --dur: 0.32s; --d: 1.62s; }
.pl-sig-bar {
  width: clamp(220px, 30%, 340px);
  height: 1px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
  position: relative;
}
.pl-sig-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.05), #FFFFFF 50%, rgba(255,255,255,0.05));
  transform: scaleX(0);
  transform-origin: left;
  animation: plSigBar var(--pl-total, 2400ms) cubic-bezier(0.45, 0.05, 0.4, 1) 0.05s forwards;
}
@keyframes plSigBar {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* === NAV === */
.nav {
  position: fixed; top: max(16px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  z-index: 100;
  width: calc(100% - 32px);
  max-width: 1200px;
  background: rgba(11, 13, 18, 0.55);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 10px 12px 10px 22px;
  display: flex; align-items: center; justify-content: space-between;
  transition: transform 0.6s var(--ease-out), opacity 0.6s var(--ease-out);
  opacity: 0; transform: translate(-50%, -20px);
}
.nav.ready { opacity: 1; transform: translate(-50%, 0); }
.nav-logo { display: flex; align-items: center; text-decoration: none; }
.nav-logo img { height: 22px; width: auto; display: block; }
.nav-cta { display: flex; align-items: center; gap: 8px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-weight: 500; font-size: 14px;
  letter-spacing: -0.01em;
  padding: 11px 20px;
  border-radius: 100px;
  border: 0; cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.2;
  transition: transform 0.4s var(--ease-out), background 0.3s var(--ease-out), box-shadow 0.4s var(--ease-out);
  will-change: transform;
}
.btn-primary {
  background: #FFFFFF;
  color: #08090B;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.0), 0 8px 24px -12px rgba(255,255,255,0.25);
}
.btn-primary:hover {
  background: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 0 0 6px rgba(255,255,255,0.06), 0 14px 30px -12px rgba(255,255,255,0.3);
}
.btn-primary .arr { width: 14px; height: 14px; transition: transform 0.4s var(--ease-out); }
.btn-primary:hover .arr { transform: translateX(3px); }
.btn-ghost {
  background: rgba(255,255,255,0.04);
  color: var(--text);
  border: 1px solid var(--line-2);
}
.btn-ghost:hover { background: rgba(255,255,255,0.08); transform: translateY(-1px); }
.btn-lg { padding: 17px 30px; font-size: 16px; border-radius: 999px; }
.btn-lg .arr { width: 16px; height: 16px; }

/* === NAV MENUS (Services / Sign In) — new, shared === */
.nav-menu { position: static; }
.nav-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 500; font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--text-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 100px;
  padding: 13px 18px;
  min-height: 44px;
  cursor: pointer;
  transition: color 0.3s var(--ease-out), background 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.nav-trigger:hover, .nav-trigger[aria-expanded="true"] {
  color: var(--text);
  background: rgba(255,255,255,0.05);
  border-color: var(--line);
}
.nav-trigger .chev { width: 10px; height: 10px; transition: transform 0.4s var(--ease-out); }
.nav-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
/* Sign In as a dropdown trigger keeps the primary button look. */
.btn.nav-trigger { color: #08090B; background: #FFFFFF; border: 0; padding: 17px 30px; font-size: 16px; }
.btn.nav-trigger:hover, .btn.nav-trigger[aria-expanded="true"] { color: #08090B; background: #FFFFFF; }

.nav-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(460px, 100%);
  padding: 10px;
  /* Near-opaque: a backdrop-filter nested inside the nav's own blur doesn't render. */
  background: linear-gradient(180deg, #111318, #0B0D12);
  border: 1px solid var(--line-2);
  border-radius: 24px;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.8);
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.985);
  transform-origin: top right;
  transition: opacity 0.35s var(--ease-out), transform 0.45s var(--ease-out), visibility 0s linear 0.45s;
}
.nav-panel.open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.35s var(--ease-out), transform 0.45s var(--ease-out), visibility 0s;
}
.nav-panel-head { padding: 10px 14px 12px; margin: 0; }
.nav-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 14px;
  padding: 16px 14px;
  border-radius: 16px;
  position: relative;
  text-decoration: none;
  color: var(--text);
  opacity: 0;
  transform: translateY(6px);
  transition: background 0.3s var(--ease-out), opacity 0.4s var(--ease-out), transform 0.5s var(--ease-out);
}
.nav-panel.open .nav-item { opacity: 1; transform: none; }
.nav-panel.open .nav-item:nth-of-type(2) { transition-delay: 0s, 0.05s, 0.05s; }
.nav-panel.open .nav-item:nth-of-type(3) { transition-delay: 0s, 0.10s, 0.10s; }
.nav-item:hover, .nav-item:focus-visible { background: rgba(255,255,255,0.045); }
.nav-item + .nav-item::before {
  content: ""; position: absolute; top: 0; left: 14px; right: 14px;
  height: 1px; background: var(--line);
  transition: opacity 0.3s var(--ease-out);
}
.nav-item:hover::before, .nav-item:hover + .nav-item::before { opacity: 0; }
.nav-item-idx {
  font-size: 11px; letter-spacing: 0.14em; color: var(--text-3);
  font-weight: 500; font-variant-numeric: tabular-nums;
}
.nav-item-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nav-item-name { font-size: 16px; font-weight: 500; letter-spacing: -0.02em; }
.nav-item-blurb { font-size: 13px; color: var(--text-2); line-height: 1.4; }
.nav-item .arr {
  width: 14px; height: 14px; color: var(--text-3);
  transition: transform 0.4s var(--ease-out), color 0.3s var(--ease-out);
}
.nav-item:hover .arr { transform: translateX(3px); color: var(--text); }

/* Sign In menu row for a service that isn't open yet (core.js sets .is-soon). */
.nav-item.is-soon { cursor: default; }
.nav-item.is-soon .nav-item-name { color: var(--text-2); }
.nav-item.is-soon:hover { background: transparent; }
.nav-item.is-soon .arr { visibility: hidden; }

/* Live / Soon status pill */
.status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-2);
  padding: 5px 10px;
  border-radius: 100px;
  border: 1px solid var(--line-2);
  white-space: nowrap;
}
.status::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--text-3);
}
.status[data-state="live"] { color: var(--text); }
.status[data-state="live"]::before {
  background: #FFFFFF; box-shadow: 0 0 10px #FFFFFF;
  animation: pulse 2s var(--ease-in-out) infinite;
}

/* Nav variant: hub without Sign In */
html[data-nav="services-only"] [data-nav-signin] { display: none; }

/* === HERO TITLE — shared typewriter (copied from ad-accounts.html) ===
   Markup: <h1 class="hero-title" data-typewriter>
             <span class="ln"><span data-tw>Line one.</span></span>
             <span class="ln"><span data-tw>All From </span><span class="em em-underline"><span data-tw>One Partner.</span></span></span>
           </h1>
   Real text stays in the HTML (SEO / no-JS); core.js clears + retypes it on al:ready. */
h1.hero-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(56px, min(8.6vw, 15vh), 132px);
  line-height: 0.96;
  letter-spacing: -0.045em;
  margin: 0;
  position: relative;
}
.hero-title .ln { display: block; min-height: 1.05em; padding-bottom: 0.22em; }
.hero-title .tw-caret {
  display: inline-block;
  width: 0.055em; height: 0.84em;
  margin-left: 0.04em;
  vertical-align: baseline;
  transform: translateY(0.06em);
  background: rgba(255,255,255,0.92);
  animation: twBlink 0.7s step-end infinite;
}
@keyframes twBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
h1.hero-title .em {
  font-weight: 400;
  background: linear-gradient(180deg, #FFFFFF 0%, #B8BAC0 60%, #6E7079 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
  position: relative;
}
.hero-title .em-underline { display: inline-block; position: relative; }
.hero-title .em-underline::after {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: -0.14em;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: scaleX(0); transform-origin: left;
}
.hero-title.tw-done .em-underline::after { animation: underlineDraw 0.7s var(--ease-out) 0.12s forwards; }
@keyframes underlineDraw { to { transform: scaleX(1); } }
/* Sub + actions enter after the title lands. */
.hero-sub, .hero-actions { opacity: 0; transform: translateY(12px); }
.hero-title.tw-done ~ .hero-sub { animation: heroFadeUp 0.8s var(--ease-out) 0.35s forwards; }
.hero-title.tw-done ~ .hero-actions { animation: heroFadeUp 0.7s var(--ease-out) 0.55s forwards; }
@keyframes heroFadeUp { to { opacity: 1; transform: translateY(0); } }
/* Typewriter titles stay hidden until core is ready (font loaded) — no fallback-font flash/jump. */
html:not(.al-ready):not(.reduced) body.site h1[data-typewriter] { visibility: hidden; }
/* New pages: sub + buttons arrive while the title types (results pages can't
   make people wait ~5s for the CTA). ad-accounts keeps its original sequence. */
html.al-ready body.site .hero-sub { animation: heroFadeUp 0.8s var(--ease-out) 0.7s forwards; }
html.al-ready body.site .hero-actions { animation: heroFadeUp 0.7s var(--ease-out) 0.95s forwards; }

/* === PRODUCT MOCK WINDOW — every "live UI" visual sits in one ===
   <div class="win"><div class="winbar"><b></b><b></b><b></b><span class="url">ads.autolink.media / overview</span></div> … </div> */
.win {
  background: #0A0B0E;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}
.winbar {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.winbar b { width: 8px; height: 8px; border-radius: 50%; background: #2A2C33; display: inline-block; }
.winbar .url {
  margin-left: 10px; flex: 1; min-width: 0;
  font-size: 11px; color: var(--text-3);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 5px 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Tag pill (no dot) — formats, angles, platforms */
.tag {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-2);
  padding: 5px 10px;
  border-radius: 100px;
  border: 1px solid var(--line-2);
  white-space: nowrap;
}
.tag.is-on { color: var(--text); border-color: rgba(255,255,255,0.32); }

/* === TIMELINE RAIL (How it works / funnel) — scroll-driven by core.js ===
   <div class="rail-wrap" data-rail>
     <div class="rail" aria-hidden="true"><div class="rail-fill"></div></div>
     <div class="step"><span class="node" aria-hidden="true"></span> …text… …art… </div> …
   </div> */
.rail-wrap { position: relative; }
.rail { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,0.08); }
.rail-fill {
  width: 1px; height: calc(var(--rail-p, 0) * 100%);
  background: linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.9));
  box-shadow: 0 0 10px rgba(255,255,255,0.35);
}
.step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 64px;
  align-items: center;
  padding: 72px 0 72px 72px;
  border-top: 1px solid var(--line);
  position: relative;
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step > * { min-width: 0; }
.node {
  position: absolute; left: -6px; top: 50%;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--bg);
  border: 1px solid rgba(255,255,255,0.3);
  transform: translateY(-50%);
  transition: background 0.4s var(--ease-out), border-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.step.is-active .node { background: #FFFFFF; border-color: #FFFFFF; box-shadow: 0 0 16px rgba(255,255,255,0.8); }
.step-title {
  margin: 0;
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: 500; letter-spacing: -0.035em; line-height: 1.05;
}
.step-copy { margin: 18px 0 0; max-width: 420px; font-size: 16px; line-height: 1.6; color: var(--text-2); }

/* === RESULTS — numbers row ===
   <section data-stats> … <dl class="results"><div class="result"><dt class="result-label mono">CTR lift</dt><dd class="result-val">[X]%</dd><dd class="result-note">…</dd></div>…</dl>
   Hidden (core.js) unless AUTOLINK_CONFIG.showStats or ?stats=1 (dev preview). */
.results {
  display: grid;
  grid-template-columns: repeat(var(--results-cols, 4), minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--line);
}
.result {
  display: flex; flex-direction: column-reverse; gap: 12px;
  padding: 36px 28px 8px;
  border-left: 1px solid var(--line);
  min-width: 0;
}
.result:first-child { border-left: 0; padding-left: 0; }
.result dt, .result dd { margin: 0; }
.result-val {
  font-size: clamp(40px, 4.6vw, 72px);
  font-weight: 500; letter-spacing: -0.045em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.result-note { order: -1; font-size: 13px; color: var(--text-2); line-height: 1.5; }
@media (max-width: 760px) {
  .results { --results-cols: 2; }
  .result { padding: 28px 16px 8px 0; border-left: 0; border-top: 1px solid var(--line); }
  .results { border-top: 0; }
}

/* Reveal */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* Proof sub-line under a section heading — "Trusted with $500M+ in ad spend." */
.h-proof {
  margin: 18px auto 0;
  max-width: 680px;
  text-align: center;
  font-size: clamp(16px, 1.45vw, 21px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--text-2);
}

/* Section head primitive (matches "Built for agencies…" heading) */
.h-section {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin: 0;
}
.h-section .muted { color: var(--text-2); }

/* === FOOTER === */
footer {
  border-top: 1px solid var(--line);
  padding: 80px 0 40px;
  position: relative; z-index: 2;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 60px;
  align-items: start;
}
.footer-brand { display: flex; align-items: flex-start; }
.footer-logo { display: inline-flex; align-items: center; text-decoration: none; }
.footer-logo img { height: 26px; width: auto; }
.footer-col h5, .footer-col .footer-h {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0 0 18px;
  font-weight: 500;
}
.footer-col a, .footer-col p {
  display: block;
  color: var(--text-2);
  text-decoration: none;
  font-size: 13.5px;
  line-height: 1.7;
  margin: 0;
  transition: color 0.3s var(--ease-out);
}
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
}
.footer-bottom .legal { font-size: 11px; color: var(--text-3); letter-spacing: 0.06em; }
.footer-legal-links { display: flex; align-items: center; gap: 22px; }
.footer-legal-links a {
  font-size: 11px; color: var(--text-2); letter-spacing: 0.06em;
  text-decoration: none; transition: color 0.3s var(--ease-out);
}
.footer-legal-links a:hover { color: var(--text); }

/* Lenis (vendored 1.1.18) */
/* Small faint labels must hit 4.5:1 — html:root also beats ad-accounts.html's inline :root. */
html:root { --text-3: #8A8A8F; --text-faint: #8A8A8F; }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ============================================================
   Responsive — kept last so it wins.
   ============================================================ */
@media (max-width: 960px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .step { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 56px 0 56px 36px; }
}
@media (max-width: 760px) {
  .footer-col a { min-height: 44px; display: flex; align-items: center; }
  .footer-legal-links { gap: 16px; flex-wrap: wrap; }
  .footer-legal-links a { padding: 12px 2px; }
}
/* #nav prefix: must beat ad-accounts.html's inline nav rules. */
/* Touch: every link ≥ 44px tall. */
@media (pointer: coarse) {
  .footer-col a, .footer-legal-links a { min-height: 44px; display: inline-flex; align-items: center; }
  .footer-col a { display: flex; }
  .nav-logo, .footer-logo { min-height: 44px; }
}
/* Landscape phones: hero buttons need breathing room above the screen edge. */
@media (max-height: 520px) {
  html .hero-fold h1.hero-title { margin-bottom: 28px; }
  html .hero-fold { padding-bottom: 28px; }
}
@media (max-width: 600px) {
  #nav { padding: 8px 8px 8px 18px; }
  #nav .nav-cta { gap: 4px; }
  #nav .nav-trigger { padding: 12px 14px; font-size: 14px; }
  #nav .nav-cta .btn-lg, #nav .btn.nav-trigger { padding: 13px 18px; font-size: 14px; min-height: 44px; }
  .nav-panel { left: 0; width: 100%; transform-origin: top center; }
}
@media (max-width: 400px) {
  #nav { padding-left: 14px; }
  #nav .nav-logo img { height: 18px; }
  #nav .nav-trigger { padding: 12px 8px; gap: 6px; }
  #nav .nav-cta .btn-lg, #nav .btn.nav-trigger { padding: 13px 14px; }
  #nav .nav-cta .btn-lg .arr, #nav .btn.nav-trigger .chev { display: none; }
  .nav-item { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; }
  .nav-item .arr { display: none; }
}

/* ============================================================
   Big screens — grow the layout instead of leaving a 1280px strip.
   html:root beats ad-accounts.html's inline :root.
   ============================================================ */
@media (min-width: 1800px) {
  html:root { --grid: 1440px; }
  #nav { max-width: 1360px; }
  html h1.hero-title { --h1-cap: clamp(56px, min(8.6vw, 15vh), 150px); }
}
@media (min-width: 2400px) {
  html:root { --grid: 1720px; }
  #nav { max-width: 1640px; padding: 14px 16px 14px 30px; }
  #nav .nav-logo img { height: 28px; }
  html h1.hero-title { --h1-cap: clamp(56px, min(8.6vw, 15vh), 180px); }
  html .hero-actions .btn-lg, #nav .nav-cta .btn-lg, #nav .btn.nav-trigger { font-size: 18px; padding: 20px 36px; }
  #nav .nav-trigger { font-size: 17px; }
}
@media (min-width: 3200px) {
  html:root { --grid: 2240px; }
  #nav { max-width: 2160px; }
  html h1.hero-title { --h1-cap: clamp(56px, min(8.6vw, 15vh), 236px); }
  html .hero-actions .btn-lg, #nav .nav-cta .btn-lg, #nav .btn.nav-trigger { font-size: 22px; padding: 26px 46px; }
  #nav { padding: 18px 20px 18px 40px; }
  #nav .nav-logo img { height: 36px; }
  #nav .nav-trigger { font-size: 20px; }
}
/* Short screens (landscape phones, small laptops): keep the hero clear of the floating nav. */
@media (max-height: 520px) {
  .hero-fold { padding-top: 112px !important; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .hero-title .tw-caret { display: none; }
  .hiw-caret, .hiw-caret-tw { animation: none !important; }
  .hero-sub, .hero-actions { opacity: 1; transform: none; animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .nav-panel, .nav-item { transition: none; }
  .mono.dot::before, .status[data-state="live"]::before { animation: none; }
}

/* ============================================================
   One hero H1 rule for every page (audit #12).
   Same cap as /ad-accounts; each page only declares its longest
   line (--h1-fit, em incl. caret) so every .ln stays on one row
   inside the content column (= nav edges). Phones keep their
   phrase-level breaks in page CSS.
   ============================================================ */
.hero-fold, .cw-fold, .ve-fold { container-type: inline-size; }
@media (min-width: 601px) {
  html h1.hero-title {
    font-size: min(var(--h1-cap, clamp(56px, min(8.6vw, 15vh), 132px)), 100cqw / var(--h1-fit, 9.4));
    max-width: 100%;
  }
  html h1.hero-title .ln { white-space: nowrap; }
}
.hub-hero { --h1-fit: 11.7; }
.cw-hero { --h1-fit: 10.1; } /* "Research, Write, Scale." ≈9.89em */

/* Services menu marks the page you're on (audit #16). */
.nav-item[aria-current="page"] { background: rgba(255,255,255,0.05); border-color: var(--line-2); }
.nav-item[aria-current="page"] .nav-item-name::after {
  content: "You're here"; margin-left: 10px;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3);
  vertical-align: 2px;
}
.nav-item[aria-current="page"] .arr { opacity: 0.35; }


/* ============================================================
   One edge for everything (owner: "make sure everything is aligned").
   The floating nav is exactly as wide as the content column
   (.wrap minus its gutters) on every page and size, so the nav
   pill, H1, sections, tables and footer share the same edges.
   ============================================================ */
/* --gut = the page gutter; --gut-s adds the iPhone notch / Dynamic Island
   (safe-area, landscape) symmetrically so the nav stays centred (audit #9). */
:root { --gut: 32px; --gut-s: max(var(--gut), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); }
@media (max-width: 600px) { :root { --gut: 20px; } }
html .wrap { padding-left: var(--gut-s); padding-right: var(--gut-s); }
html #nav { width: calc(100% - 2 * var(--gut-s)); max-width: calc(var(--grid) - 64px); }

/* Landscape phones (audit #10): a slimmer nav so it doesn't eat the short screen. */
@media (max-height: 520px) and (orientation: landscape) {
  html #nav { top: 8px; padding-top: 6px; padding-bottom: 6px; }
  html #nav .nav-cta .btn-lg, html #nav .nav-trigger { min-height: 44px; padding-top: 11px; padding-bottom: 11px; font-size: 14px; }
  html #nav .nav-logo img { height: 18px; }
}

/* Narrow phones: logo · Services · Contact Us must fit inside the nav pill (320px). */
@media (max-width: 400px) {
  #nav .nav-trigger { padding: 12px 8px; gap: 4px; }
  #nav .nav-trigger .chev { display: none; }
}
@media (max-width: 340px) {
  #nav { padding-left: 12px; }
  #nav .nav-logo img { height: 16px; }
  #nav .nav-cta .btn-lg { padding: 13px 14px; }
  #nav .nav-cta .btn-lg .arr { display: none; }
}

/* ============================================================
   Preloader (audit #19): the signature draws at 0.65× (≈1.5s total, core.js
   TOTAL matches) — same strokes, same order, just quicker.
   ============================================================ */
:root { --pl-k: 0.65; }
.pl-sig-svg .stroke { animation-duration: calc(var(--dur, 0.5s) * var(--pl-k)); animation-delay: calc(var(--d, 0s) * var(--pl-k)); }
.pl-sig-svg .dot { animation-delay: calc(1.10s * var(--pl-k)); }

/* ============================================================
   Safety net (audit #18): if core.js never runs (blocked, failed, offline),
   nothing may stay hidden. After 4.6s without .al-ready the preloader fades,
   the page unlocks and every "wait for JS" element shows. When core runs it
   sets .al-ready long before that, so these never apply. No-JS visitors get
   assets/css/nojs.css through <noscript>.
   ============================================================ */
@keyframes alFailsafeShow { to { opacity: 1; visibility: visible; transform: none; } }
@keyframes alFailsafeNav { to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes alFailsafeHide { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@keyframes alFailsafeUnlock { to { overflow: visible; height: auto; } }
/* Only pages on the shared preloader (body[data-core-preloader]); /ad-accounts runs its own. */
html:not(.al-ready):not(.pl-quick) body[data-core-preloader] #preloader { animation: alFailsafeHide 0.4s ease 4.6s forwards; }
html:not(.al-ready) body[data-core-preloader].locked { animation: alFailsafeUnlock 0s 4.6s forwards; }
html:not(.al-ready) body[data-core-preloader] .nav { animation: alFailsafeNav 0.4s ease 4.6s forwards; }
html:not(.al-ready):not(.reduced) body[data-core-preloader] h1[data-typewriter],
html:not(.al-ready) body[data-core-preloader] .hero-sub,
html:not(.al-ready) body[data-core-preloader] .hero-actions,
html:not(.al-ready) body[data-core-preloader] .reveal,
html:not(.al-ready) body[data-core-preloader] .hiw-step,
html:not(.al-ready) body[data-core-preloader] .hiw-title span,
html:not(.al-ready) body[data-core-preloader] .hiw-desc,
html:not(.al-ready) body[data-core-preloader] .hiw-art { animation: alFailsafeShow 0.4s ease 4.6s forwards; }

/* Reduced motion (audit #25): no signature preloader, H1 underline already drawn. */
html.reduced #preloader { display: none !important; }
html.reduced .hero-title .em-underline::after { animation: none !important; transform: scaleX(1); }
html.reduced .hero-title .tw-caret { animation: none !important; display: none; }

/* Typewriter without layout shift (CLS): the untyped rest of a line is laid out
   but invisible, and the caret takes no net width. */
.hero-title .tw-rest { visibility: hidden; }
h1[data-typewriter] .tw-caret { margin-right: -0.095em; }

/* Touch screens: every button ≥ 44px tall (table CTA, slim landscape nav). */
@media (pointer: coarse) {
  .cmp-foot-cta { min-height: 44px; }
  html #nav .nav-cta .btn-lg, html #nav .nav-trigger { min-height: 44px; }
}

/* Footer links: ≥24px target on desktop too (WCAG 2.2 target size). Column links
   stay one per line (flex, not inline-flex); touch keeps its 44px. */
html .footer-col a { min-height: 24px; display: flex; align-items: center; width: fit-content; }
html .footer-legal-links a { min-height: 24px; display: inline-flex; align-items: center; }
@media (pointer: coarse) {
  html .footer-col a, html .footer-legal-links a { min-height: 44px; }
}
/* Footer Telegram line — one markup on every page: "Telegram · @handle". */
html .footer-col a.ft-tg { flex-wrap: wrap; column-gap: 0; }
.ft-handle { white-space: nowrap; }
.ft-sep { white-space: pre; } /* keep the spaces around "·" inside the flex link */
@media (max-width: 412px) {
  html .footer-col a.ft-tg { flex-direction: column; align-items: flex-start; justify-content: center; line-height: 1.4; }
  .ft-sep { display: none; }
}