/* AdRouter V4 desktop (v4/desktop.html, after v4/base.css): V3's frame, side panels and choreography
   (v4/desktop.js) in V4 type and colour. The frame, panels and pill take the page colour; the hero
   and closing sit in black over the pastel backdrop; the story rests on the panels; and the bottom
   rail opens into the legal panel, which ends in the lockup clipped by the screen edge. */
@media (min-width:901px) {
  /* Floating copy over the backdrop is black in both themes, as V3's was dark. */
  html body[data-v4][data-backdrop] { --v3-copy-ink:#0a0a0a; --v3-copy-muted:#0a0a0a; --v3-copy-blue:#0a0a0a; }

  /* Frame, side panels, pill and loader in the page colour, replacing V3's white and navy. */
  html body[data-v4] :is(.frame-panel,#page-loader,.legal-panel) { color:var(--v4-fg); background-color:var(--v4-bg) !important; }
  html body[data-v4] .frame-panel::before { background-color:var(--v4-bg) !important; }
  html body[data-v4] .bg-navbar { color:var(--v4-fg); background:var(--v4-bg) !important; border-color:var(--v4-line) !important; }
  html body[data-v4] #page-loader .loader-text { color:var(--v4-muted); }

  /* Navigation: About · Docs · Legal in the middle cells, Get started as a pill on the right. */
  html body[data-v4] .navbar :is(.logo,.nav-links a,.nav-actions .link-btn) { color:var(--v4-fg) !important; border-color:var(--v4-line) !important; }
  html body[data-v4] .navbar .nav-links a { font-size:13px; font-weight:400; letter-spacing:-.005em; text-transform:none; }
  html body[data-v4] .navbar .nav-links a:hover { background-color:rgba(var(--v4-fg-rgb),.05) !important; }
  html body[data-v4] .navbar .nav-links .v4-nav-soon { display:flex; flex:0 0 auto; align-items:center; justify-content:center; gap:8px; width:var(--v3-nav-cell,130px); height:100%; color:rgba(var(--v4-fg-rgb),.4); border-right:1px solid var(--v4-line); font-size:13px; letter-spacing:-.005em; white-space:nowrap; cursor:default; }
  html body[data-v4] .navbar .v4-nav-soon small { padding:3px 6px; color:rgba(var(--v4-fg-rgb),.6); border:1px solid rgba(var(--v4-fg-rgb),.25); border-radius:999px; font-size:9px; font-weight:500; line-height:1; letter-spacing:.08em; text-transform:uppercase; }
  html body[data-v4] .navbar .nav-actions { justify-content:flex-end; }
  html body[data-v4] .navbar .nav-actions .v4-nav-start { width:auto; height:40px; margin-block:auto; padding:0 20px; color:var(--v4-bg) !important; background:var(--v4-fg) !important; border:0; border-radius:999px; font-size:13px; font-weight:500; letter-spacing:-.005em; text-transform:none; }
  html body[data-v4] .navbar .nav-actions .v4-nav-start:hover { opacity:.86; }
  html body[data-v4] .frame-top.navbar .nav-actions { padding-right:calc(var(--frame-size,80px) - 20px); }
  html body[data-v4] .bg-navbar .nav-actions { padding-right:12px; }
  html body[data-v4] .bg-navbar .nav-actions .v4-nav-start { height:40px; }
  html body[data-v4] .navbar :is(a,button):focus-visible { outline:2px solid var(--v4-fg); outline-offset:-4px; }

  /* The backdrop keeps V3's pastel treatment, baked into the V4 video and poster rather than applied
     as a CSS filter: Safari stops painting a filtered <video> in V4's layering (v4/README.md). V4's
     still grain sits above the flares. */
  html body[data-v4] .v3-backdrop video, html body[data-v4] .v3-backdrop::before { filter:none; }
  /* The still always sits under the video instead of in a poster attribute: Safari can keep showing a
     poster over a video that is already playing (v4/README.md). */
  html body[data-v4] .v3-backdrop::before { content:""; background-image:url("/v4/assets/backdrop-pastel-poster.jpg"); }
  html body[data-v4] .v3-backdrop canvas.v4-grain { z-index:3; opacity:1; image-rendering:pixelated; }
  html[data-motion="reduce"] body[data-v4] .v3-backdrop canvas.v4-grain { display:block !important; }

  /* Hero: the V4 title, copy and action on the left of the frame; the right is the background. */
  html body[data-v4] .v4-hero-desk { grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); }
  html body[data-v4] .v4-hero-copy { --v3-title-size:clamp(56px,5.4vw,92px); padding-inline:clamp(8px,1.5vw,32px) 0; }
  html body[data-v4] .hero-body .v4-hero-copy h1 { margin:0 0 28px; font-size:var(--v3-title-size); font-weight:200; line-height:.98; letter-spacing:-.055em; text-wrap:balance; }
  html body[data-v4] .v4-hero-copy > .v3-hero-copy { max-width:34rem; margin:0 0 12px; font-size:16px; font-weight:400; line-height:1.6; letter-spacing:-.006em; text-wrap:pretty; }
  html body[data-v4] .v4-hero-copy .v4-actions { display:flex; margin-top:20px; }

  /* Panel copy, laid out like V3's: a left-aligned block centred in its panel, faded line by line. */
  html body[data-v4] .v4-panel-copy { min-width:0; max-width:540px; color:var(--v4-fg); pointer-events:auto; }
  html[data-motion="full"] body[data-v4] :is(.v3-copy-left,.v3-copy-right) > .v4-panel-copy { justify-self:center; width:min(540px,calc(100% - 2 * var(--v3-copy-gutter))); text-align:left; }
  /* V3's copy sat beside a visual; V4's is alone, so it is placed in the panel's column. */
  html[data-motion="full"] body[data-v4] .v3-copy-left > .v4-panel-copy { grid-column:1; }
  html[data-motion="full"] body[data-v4] .v3-copy-right > .v4-panel-copy { grid-column:2; }
  html[data-motion="full"] body[data-v4] :is(.v3-copy-left,.v3-copy-right) > .v4-panel-copy > * { will-change:opacity; }
  html[data-motion="full"] body[data-v4] :is(.v3-copy-left,.v3-copy-right) > .v4-panel-copy:focus-within { pointer-events:auto !important; }
  html[data-motion="full"] body[data-v4] :is(.v3-copy-left,.v3-copy-right) > .v4-panel-copy:focus-within > * { opacity:1 !important; }
  /* Without the panels (reduced motion, no script) the copy rests on its own card. */
  html:not([data-motion="full"]) body[data-v4] .v4-panel-copy { padding:36px; background:var(--v4-bg); border-radius:24px; }
  /* Compact desktop sizes, so the longest section fits a 720px screen. */
  html body[data-v4] .v4-panel-copy .v4-kicker { margin-bottom:16px; }
  html body[data-v4] .v4-panel-copy .v4-heading { font-size:clamp(34px,3vw,48px); }
  html body[data-v4] .v4-panel-copy .v4-lede { margin-top:16px; font-size:15px; line-height:1.55; }
  html body[data-v4] .v4-panel-copy .v4-lede + .v4-lede { margin-top:10px; }
  html body[data-v4] .v4-panel-copy .v4-note { margin-top:14px; font-size:12px; }
  html body[data-v4] .v4-panel-copy .v4-action { min-height:46px; margin-top:22px; padding:0 22px; font-size:14px; }
  html body[data-v4] .v4-panel-copy .v4-list { margin-top:24px; }
  html body[data-v4] .v4-panel-copy .v4-list li { padding:11px 0; font-size:15px; }
  html body[data-v4] .v4-panel-copy .v4-features { gap:8px; }
  html body[data-v4] .v4-panel-copy .v4-features li { gap:12px; min-height:0; padding:12px 14px; font-size:14px; }
  html body[data-v4] .v4-panel-copy .v4-numbered { margin-top:22px; }
  html body[data-v4] .v4-panel-copy .v4-numbered li { gap:10px; padding:12px 0; }
  html body[data-v4] .v4-panel-copy .v4-numbered h3 { margin-bottom:3px; font-size:16px; }
  html body[data-v4] .v4-panel-copy .v4-numbered p { font-size:13px; line-height:1.5; }
  html body[data-v4] .v4-panel-copy .v4-steps { margin-top:24px; }
  html body[data-v4] .v4-panel-copy .v4-steps li { padding-bottom:16px; }
  html body[data-v4] .v4-panel-copy .v4-steps li:last-child { padding-bottom:0; }
  html body[data-v4] .v4-panel-copy .v4-steps h3 { margin-top:5px; }
  html body[data-v4] .v4-panel-copy .v4-signals { margin-top:18px; }
  html body[data-v4] .v4-panel-copy .v4-signals dl > div { grid-template-columns:9rem minmax(0,1fr); padding:11px 0; }
  html body[data-v4] .v4-panel-copy .v4-signals dt { font-size:15px; }
  html body[data-v4] .v4-panel-copy .v4-signals dd { font-size:13px; }
  html body[data-v4] .v4-panel-copy .v4-timeline { margin-top:24px; }
  html body[data-v4] .v4-panel-copy .v4-timeline li { padding-bottom:14px; }
  html body[data-v4] .v4-panel-copy .v4-timeline li:last-child { padding-bottom:0; }
  html body[data-v4] .v4-panel-copy .v4-timeline p { margin-top:3px; font-size:13px; }

  /* The closing: full frame, centred over the background, before the legal panel opens. */
  html body[data-v4] .v4-closing-copy { max-width:780px; margin-inline:auto; color:#0a0a0a; text-align:center; pointer-events:auto; }
  html body[data-v4] .v4-closing-copy .v4-kicker { justify-content:center; color:rgba(10,10,10,.62); }
  html body[data-v4] .v4-closing-copy .v4-kicker-index { color:#0a0a0a; }
  html body[data-v4] .v4-closing-copy .v4-heading { color:#0a0a0a; font-size:clamp(44px,4.6vw,76px); font-weight:200; letter-spacing:-.05em; }
  html body[data-v4] .v4-closing-copy .v4-lede { max-width:560px; margin-inline:auto; color:#0a0a0a; font-size:18px; }
  html body[data-v4] .v4-closing-copy .v4-action { color:#fff !important; background:#0a0a0a; }
  /* The mid-page stop, where V3 had its waitlist: one line and an action per audience, centred over
     the background in black and white for both themes. */
  html body[data-v4] .v4-interlude { justify-content:center; }
  html body[data-v4] .v4-interlude-copy { max-width:780px; margin-inline:auto; color:#0a0a0a; text-align:center; pointer-events:auto; }
  html body[data-v4] .v4-interlude-copy .v4-heading { color:#0a0a0a; font-size:clamp(40px,4vw,64px); font-weight:200; letter-spacing:-.05em; }
  html body[data-v4] .v4-interlude-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:32px; }
  html body[data-v4] .v4-interlude-actions .v4-action { margin-top:0; color:#fff !important; background:#0a0a0a; }
  html body[data-v4] .v4-interlude-actions .v4-action + .v4-action { color:#0a0a0a !important; background:#fff; box-shadow:inset 0 0 0 1px rgba(10,10,10,.12); }
  html body[data-v4] .v4-interlude-actions .v4-action:focus-visible { outline-color:#0a0a0a; }
  /* Dark panels: as a panel sweeps under the interlude or closing copy, the copy takes the panel ink
     on the panel and black over the video, split at the panel edge (v4/desktop.js). */
  html[data-theme="dark"][data-motion="full"].has-v3-split-ink body[data-v4] :is(#interlude .v4-interlude-copy > .v4-heading,.v3-closing > .v4-closing-copy > :is(.v4-kicker,.v4-heading,.v4-lede)) {
    -webkit-text-fill-color:transparent; -webkit-background-clip:text; background-clip:text; background-repeat:no-repeat;
    background-image:linear-gradient(90deg,var(--v4-fg) 0 var(--v3-split-l,-99999px),#0a0a0a var(--v3-split-l,-99999px) var(--v3-split-r,99999px),var(--v4-fg) var(--v3-split-r,99999px));
    background-size:var(--v3-ink-w,100%) 100%; background-position:calc(-1 * var(--v3-leaf-x,0px)) 0;
  }
  html body[data-v4] .section-scroll-btn { color:#0a0a0a; font-family:"Geist",sans-serif; }

  /* Legal: the bottom rail opens taller to hold the copy and the lockup, flush with the screen edge. */
  html body[data-v4] { --v4-legal-pad:clamp(40px,5vw,80px); }
  html body[data-v4] .frame-bottom { height:clamp(480px,64vh,680px); }
  html body[data-v4] .v4-legal-desk { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); grid-template-rows:auto 1fr; column-gap:clamp(40px,6vw,120px); padding:clamp(36px,6vh,64px) var(--v4-legal-pad) 0; color:var(--v4-fg); text-align:left; }
  /* V3 forces legal text blue (revision.css); the V4 inks take precedence. */
  html body[data-v4] .v4-legal-desk :is(.v4-heading,.v4-kicker-index,.v4-legal-links a,.v4-legal-lockup,.v3-socials,.v3-socials span) { color:var(--v4-fg) !important; }
  html body[data-v4] .v4-legal-desk :is(.v4-kicker,.v4-legal-note,.v4-legal-copyright) { color:var(--v4-muted) !important; }
  html body[data-v4] .v4-legal-desk .v4-kicker { margin-bottom:14px; }
  html body[data-v4] .v4-legal-desk .v4-heading { font-size:clamp(40px,4vw,64px); }
  html body[data-v4] .v4-legal-desk .v4-legal-note { max-width:34rem; margin-top:16px; }
  html body[data-v4] .v4-legal-desk .v3-socials { margin-top:22px; }
  html body[data-v4] .v4-legal-desk .v4-legal-links { margin-top:6px; }
  html body[data-v4] .v4-legal-desk .v4-legal-links a { min-height:46px; font-size:15px; }
  html body[data-v4] .v4-legal-desk .v4-legal-copyright { margin-top:18px; }
  html body[data-v4] .v4-legal-desk .v4-legal-mark { grid-column:1 / -1; align-self:end; margin:32px calc(24px - var(--v4-legal-pad)) 0; }
  html body[data-v4] .reduced-motion-footer.v4-legal-desk { padding-bottom:0; overflow:hidden; background:var(--v4-bg); }
}
@media (min-width:901px) and (max-height:800px) {
  html body[data-v4] .v4-panel-copy .v4-heading { font-size:clamp(30px,2.6vw,40px); }
  html body[data-v4] .v4-panel-copy .v4-lede { font-size:14px; }
  html body[data-v4] .v4-panel-copy .v4-list li { padding:8px 0; font-size:14px; }
  html body[data-v4] .v4-panel-copy .v4-numbered li { padding:9px 0; }
  html body[data-v4] .v4-panel-copy .v4-numbered h3 { font-size:15px; }
  html body[data-v4] .v4-panel-copy .v4-numbered p { font-size:12.5px; }
  html body[data-v4] .v4-panel-copy .v4-steps li { padding-bottom:10px; }
  html body[data-v4] .v4-panel-copy .v4-signals dl > div { padding:8px 0; }
  html body[data-v4] .v4-panel-copy .v4-timeline li { padding-bottom:9px; }
  html body[data-v4] .v4-panel-copy .v4-action { margin-top:16px; }
  html body[data-v4] .v4-hero-copy > .v3-hero-copy { font-size:14px; }
}