/* AdRouter V4, shared by the mobile and desktop pages: Geist, the theme tokens and the story's content
   components. The page follows the system theme: white in light, black in dark. Layout lives in
   v4/mobile.css and v4/desktop.css. */
@font-face { font-family:"Geist"; font-style:normal; font-weight:100 900; font-display:swap; src:url("/v4/fonts/geist-latin-wght-normal.woff2") format("woff2-variations"); }
body[data-v4] {
  --v4-gutter:20px;
  --v4-ink:#0a0a0a;
  --v4-bg:#fff; --v4-bg-rgb:255,255,255; --v4-fg:#0a0a0a; --v4-fg-rgb:10,10,10; --v4-muted:#5c6068; --v4-line:rgba(10,10,10,.12); --v4-accent:#6f86f6;
  font-family:"Geist",sans-serif;
}
html[data-theme="dark"] body[data-v4] { --v4-bg:#000; --v4-bg-rgb:0,0,0; --v4-fg:#f4f4f5; --v4-fg-rgb:244,244,245; --v4-muted:#a1a1aa; --v4-line:rgba(255,255,255,.14); --v4-accent:#9db0ff; }
@media (prefers-color-scheme:dark) {
  html:not([data-theme]) body[data-v4] { --v4-bg:#000; --v4-bg-rgb:0,0,0; --v4-fg:#f4f4f5; --v4-fg-rgb:244,244,245; --v4-muted:#a1a1aa; --v4-line:rgba(255,255,255,.14); --v4-accent:#9db0ff; }
}
body[data-v4] :is(h1,h2,h3,h4,p,span,a,button,figcaption,li,dt,dd,strong,small,label,input,legend,div), body[data-v4] .v3-waitlist, body[data-v4] .v3-waitlist * { font-family:"Geist",sans-serif; }
/* The V3 ASCII artwork and appearance controls are not part of V4; the theme follows the system. */
body[data-v4] .mobile-artwork, body[data-v4] > .preference-controls { display:none !important; }

/* The hero's one action: a black pill over the pastel in both themes. */
html body[data-v4] .v4-get-started { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 28px; color:#fff !important; background:var(--v4-ink); border:1px solid var(--v4-ink); border-radius:999px; font-size:15px; font-weight:500; line-height:1; letter-spacing:-.005em; text-decoration:none; box-shadow:0 10px 28px rgba(0,0,0,.16); }
html body[data-v4] .v4-get-started:focus-visible { outline:3px solid var(--v4-ink); outline-offset:3px; }

/* The story: numbered kickers, thin headings, hairline lists. */
html body[data-v4] .v4-kicker { display:flex; align-items:center; gap:10px; margin:0 0 20px; color:var(--v4-muted); font-size:11px; font-weight:500; line-height:1.4; letter-spacing:.14em; text-transform:uppercase; }
body[data-v4] .v4-kicker-index { display:inline-flex; align-items:center; gap:10px; color:var(--v4-fg); font-variant-numeric:tabular-nums; }
body[data-v4] .v4-kicker-index::after { content:""; width:18px; border-top:1px solid currentColor; opacity:.4; }
html body[data-v4] .v4-heading { margin:0; color:var(--v4-fg); font-size:clamp(2.25rem,10.5vw,3.25rem); font-weight:300; line-height:1.02; letter-spacing:-.045em; text-wrap:balance; }
html body[data-v4] .v4-lede { margin:20px 0 0; color:var(--v4-muted); font-size:16px; line-height:1.6; letter-spacing:-.006em; }
html body[data-v4] .v4-lede + .v4-lede { margin-top:12px; }
html body[data-v4] .v4-note { margin:20px 0 0; color:var(--v4-muted); font-size:13px; line-height:1.6; }
html body[data-v4] .v4-action { display:inline-flex; align-items:center; justify-content:center; min-height:52px; margin-top:32px; padding:0 26px; color:var(--v4-bg) !important; background:var(--v4-fg); border-radius:999px; font-size:15px; font-weight:500; line-height:1; text-decoration:none; }
html body[data-v4] .v4-action:focus-visible { outline:3px solid var(--v4-fg); outline-offset:3px; }
/* Lists: a pastel dot and a hairline per line; features sit in a two-column grid of tiles. */
body[data-v4] .v4-list { display:grid; margin:32px 0 0; padding:0; list-style:none; border-top:1px solid var(--v4-line); }
body[data-v4] .v4-list li { display:flex; align-items:baseline; gap:14px; padding:15px 0; color:var(--v4-fg); border-bottom:1px solid var(--v4-line); font-size:17px; line-height:1.4; letter-spacing:-.01em; }
body[data-v4] .v4-list li::before { content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--v4-accent); transform:translateY(-2px); }
body[data-v4] .v4-features { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; border:0; }
body[data-v4] .v4-features li { flex-direction:column; align-items:flex-start; gap:18px; min-height:92px; padding:16px; border:1px solid var(--v4-line); border-radius:16px; font-size:15px; }
body[data-v4] .v4-features li:last-child:nth-child(odd) { grid-column:1 / -1; min-height:0; }
body[data-v4] .v4-features li::before { transform:none; }
/* Numbered rows, and steps joined by a line. */
body[data-v4] .v4-numbered { display:grid; margin:32px 0 0; padding:0; list-style:none; }
body[data-v4] .v4-numbered li { display:grid; grid-template-columns:36px minmax(0,1fr); gap:12px; padding:20px 0; border-top:1px solid var(--v4-line); }
body[data-v4] .v4-numbered li:last-child { border-bottom:1px solid var(--v4-line); }
body[data-v4] .v4-index { color:var(--v4-muted); font-size:13px; line-height:1.9; font-variant-numeric:tabular-nums; }
html body[data-v4] .v4-numbered h3 { margin:0 0 6px; color:var(--v4-fg); font-size:19px; font-weight:400; line-height:1.3; letter-spacing:-.02em; }
html body[data-v4] .v4-numbered p { margin:0; color:var(--v4-muted); font-size:15px; line-height:1.55; }
body[data-v4] .v4-steps { margin-top:36px; }
body[data-v4] .v4-steps li, body[data-v4] .v4-steps li:last-child { position:relative; grid-template-columns:32px minmax(0,1fr); gap:16px; padding:0 0 28px; border:0; }
body[data-v4] .v4-steps li:last-child { padding-bottom:0; }
body[data-v4] .v4-steps li:not(:last-child)::before { content:""; position:absolute; top:32px; bottom:0; left:16px; border-left:1px solid var(--v4-line); }
body[data-v4] .v4-steps .v4-index { position:relative; display:grid; place-items:center; width:32px; height:32px; color:var(--v4-fg); background:var(--v4-bg); border:1px solid var(--v4-line); border-radius:50%; font-size:12px; line-height:1; }
html body[data-v4] .v4-steps h3 { margin-top:5px; }
/* The five signals as label and description rows. */
body[data-v4] .v4-signals dl { margin:0; }
body[data-v4] .v4-signals dl > div { display:grid; gap:4px; padding:16px 0; border-top:1px solid var(--v4-line); }
body[data-v4] .v4-signals dl > div:first-child { border-top:0; }
html body[data-v4] .v4-signals dt { color:var(--v4-fg); font-size:17px; font-weight:500; line-height:1.3; letter-spacing:-.015em; }
html body[data-v4] .v4-signals dd { margin:0; color:var(--v4-muted); font-size:14px; line-height:1.5; }
@media (min-width:380px) { body[data-v4] .v4-signals dl > div { grid-template-columns:8.25rem minmax(0,1fr); gap:12px; align-items:baseline; } }
/* The pilot as a timeline. */
body[data-v4] .v4-timeline { margin:36px 0 0 4px; padding:0 0 0 22px; list-style:none; border-left:1px solid var(--v4-line); }
body[data-v4] .v4-timeline li { position:relative; padding:0 0 26px; }
body[data-v4] .v4-timeline li:last-child { padding-bottom:0; }
body[data-v4] .v4-timeline li::before { content:""; position:absolute; top:5px; left:-26.5px; width:8px; height:8px; border-radius:50%; background:var(--v4-accent); box-shadow:0 0 0 4px var(--v4-bg); }
html body[data-v4] .v4-when { display:block; color:var(--v4-fg); font-size:12px; font-weight:500; line-height:1.4; letter-spacing:.08em; text-transform:uppercase; font-variant-numeric:tabular-nums; }
html body[data-v4] .v4-timeline p { margin:6px 0 0; color:var(--v4-muted); font-size:15px; line-height:1.5; }

/* Legal: the story's type, links on hairlines, and the lockup cropped to its glyphs
   (v4/adrouter-lockup.svg, 3567×693), of which the top 74% shows. */
html body[data-v4] .v4-legal-note { margin:20px 0 0; color:var(--v4-muted); font-size:15px; line-height:1.6; }
body[data-v4] .v4-legal-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:16px; margin:36px 0 0; border-top:1px solid var(--v4-line); }
html body[data-v4] .v4-legal-links a { display:flex; align-items:center; min-height:52px; padding:0; color:var(--v4-fg); background:none; border:0; border-bottom:1px solid var(--v4-line); border-radius:0; font-size:16px; letter-spacing:-.01em; text-decoration:none; }
html body[data-v4] .v4-legal-links a:focus-visible { outline:2px solid var(--v4-fg); outline-offset:2px; }
body[data-v4] .v4-legal-block .v3-socials { margin-top:28px; color:var(--v4-fg); }
html body[data-v4] .v4-legal-copyright { margin:24px 0 0; color:var(--v4-muted); font-size:13px; line-height:1.6; }
body[data-v4] .v4-legal-mark { aspect-ratio:3567 / 513; overflow:hidden; color:var(--v4-fg); }
body[data-v4] .v4-legal-lockup { display:block; width:100%; aspect-ratio:3567 / 693; background:currentColor; -webkit-mask:url("/v4/adrouter-lockup.svg") center / 100% 100% no-repeat; mask:url("/v4/adrouter-lockup.svg") center / 100% 100% no-repeat; }
