/* AdRouter V4 mobile (v4/mobile.html, after v4/base.css): a floating logo and menu toggle over a
   full-screen menu, a hero with the desktop's pastel backdrop between two equal bands in the page
   colour, the story on the page and the legal panel ending in the clipped lockup. */
body[data-v4] {
  /* The two hero bands share one height: solid page colour behind the header, then a fade to the video. */
  --v4-band:calc(env(safe-area-inset-top) + clamp(112px,17svh,168px));
  /* Endstack's menu timing, measured from its shipped page: opacity on an expo-out curve, items
     0/55/125/205ms apart, and the logo on a spring (stiffness 145, damping 22, mass .9) sampled
     here over 600ms. */
  --v4-ease:cubic-bezier(.16,1,.3,1);
  --v4-spring:cubic-bezier(.16,1,.3,1);
}
@supports (transition-timing-function:linear(0, 1)) {
  body[data-v4] { --v4-spring:linear(0, 0.0412, 0.1351, 0.2508, 0.3695, 0.481, 0.5804, 0.6656, 0.7369, 0.7952, 0.8422, 0.8795, 0.9087, 0.9314, 0.9488, 0.9621, 0.9722, 0.9797, 0.9853, 0.9894, 0.9925, 0.9947, 0.9963, 0.9974, 1); }
}
html:has(> body[data-v4]) { background:#fff; }
html[data-theme="dark"]:has(> body[data-v4]) { background:#000; }
html body[data-v4] { color:var(--v4-fg); background:var(--v4-bg); }

/* Floating logo and toggle. Their ink follows what lies beneath them (data-ink, v4/menu.js). */
.v4-header { position:fixed; z-index:10002; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:calc(env(safe-area-inset-top) + 12px) calc(var(--v4-gutter) - 11px) 0 var(--v4-gutter); color:var(--v4-fg); pointer-events:none; transition:color 200ms ease; }
.v4-header[data-ink="light"] { color:#fff; }
.v4-header[data-ink="dark"] { color:var(--v4-ink); }
.v4-header > * { pointer-events:auto; }
.v4-brand { display:inline-flex; align-items:center; min-height:44px; color:inherit; text-decoration:none; transition:transform 600ms var(--v4-spring); }
.v4-brand .brand-lockup { width:112px; }
.v4-menu-toggle { display:inline-grid; place-content:center; gap:4px; width:44px; height:44px; padding:0; color:inherit; background:transparent; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.v4-menu-toggle span { display:block; width:20px; height:1.5px; border-radius:99px; background:currentColor; transition:transform 220ms var(--v4-ease), opacity 220ms var(--v4-ease); }
/* V4 focus rings, above V3's blue ones (body[data-v3] :is(a,button):focus-visible). */
html body[data-v4] .v4-header :is(a,button):focus-visible { outline:2px solid currentColor; outline-offset:2px; border-radius:6px; }

/* The menu: the page fades to the page colour, the logo eases 1rem to the right and the items drop in
   from the top one after another. Closing removes the items at once while the overlay fades away. */
.v4-menu { position:fixed; z-index:10001; inset:0; overflow-y:auto; overscroll-behavior:contain; background:var(--v4-bg); opacity:0; visibility:hidden; transition:opacity 220ms var(--v4-ease), visibility 0s linear 220ms; }
.v4-menu-nav { display:grid; justify-items:start; padding:calc(env(safe-area-inset-top) + 76px) var(--v4-gutter) 48px calc(var(--v4-gutter) + 1rem); }
body[data-v4] .v4-menu-item { display:flex; align-items:center; gap:12px; min-height:64px; color:var(--v4-fg); font-size:32px; font-weight:300; line-height:1; letter-spacing:-.035em; text-decoration:none; opacity:0; transform:translate3d(0,-8px,0); }
body[data-v4] .v4-menu-soon { color:rgba(var(--v4-fg-rgb),.38); cursor:default; }
body[data-v4] .v4-menu-soon small { padding:4px 8px; color:rgba(var(--v4-fg-rgb),.62); border:1px solid rgba(var(--v4-fg-rgb),.28); border-radius:999px; font-size:10px; font-weight:500; line-height:1; letter-spacing:.08em; text-transform:uppercase; }
html body[data-v4] .v4-menu-item:focus-visible { outline:2px solid var(--v4-fg); outline-offset:4px; border-radius:6px; }
html.v4-menu-open, html.v4-menu-open body { overflow:hidden; }
html.v4-menu-open .v4-header { color:var(--v4-fg); }
html.v4-menu-open .v4-menu { opacity:1; visibility:visible; transition:opacity 220ms var(--v4-ease); }
html.v4-menu-open .v4-brand { transform:translate3d(1rem,0,0); }
html.v4-menu-open .v4-menu-toggle span:nth-child(1) { transform:translateY(5.5px) rotate(45deg); }
html.v4-menu-open .v4-menu-toggle span:nth-child(2) { opacity:0; }
html.v4-menu-open .v4-menu-toggle span:nth-child(3) { transform:translateY(-5.5px) rotate(-45deg); }
html.v4-menu-open body[data-v4] .v4-menu-item { opacity:1; transform:none; transition:opacity 300ms var(--v4-ease) var(--v4-delay,0ms), transform 300ms var(--v4-ease) var(--v4-delay,0ms); }
.v4-menu-item:nth-child(2) { --v4-delay:55ms; }
.v4-menu-item:nth-child(3) { --v4-delay:125ms; }
.v4-menu-item:nth-child(4) { --v4-delay:205ms; }
/* Reduced motion: the menu appears and goes at once, with nothing moving. */
html[data-motion="reduce"] :is(.v4-brand,.v4-menu-item) { transform:none !important; }
@media (prefers-reduced-motion:reduce) { :is(.v4-brand,.v4-menu-item) { transform:none !important; } }

/* Hero: full-bleed and at least one screen tall. Equal padding under the two equal bands keeps the
   copy centred on the hero's midline; a taller block grows the hero evenly. */
body[data-v4] .v4-hero { display:flex; flex-direction:column; width:100%; max-width:none; min-height:100svh; margin:0; padding:var(--v4-band) 0; text-align:left; color:var(--v4-ink); }
body[data-v4] .v4-hero .audience-hero-inner { position:relative; flex:1 0 auto; display:flex; flex-direction:column; align-items:stretch; justify-content:center; gap:0; width:min(100%,36rem); padding:0 var(--v4-gutter); }
body[data-v4] .v4-title { margin:0; color:var(--v4-ink); font-size:clamp(3.25rem,15.5vw,5.25rem); font-weight:200; line-height:.98; letter-spacing:-.055em; }
body[data-v4] .v4-title-line { display:block; }
body[data-v4] .v4-copy { display:grid; gap:12px; margin-top:24px; }
body[data-v4] .v4-copy p { margin:0; color:var(--v4-ink); font-size:15px; font-weight:400; line-height:1.55; letter-spacing:-.006em; }
body[data-v4] .v4-hero .v4-actions { display:flex; width:auto; margin-top:28px; }

/* The desktop backdrop's pastel treatment (v3/style.css .v3-backdrop), baked into the V4 hero video
   and poster rather than applied as a CSS filter: Safari stops painting a filtered <video> in V4's
   layering (v4/README.md). */
body[data-v4] .mobile-hero-media { background:#eef1ff; }
body[data-v4] .mobile-hero-media video, body[data-v4] .mobile-hero-media::before { filter:none; transform:scale(1.04); }
/* The still always sits under the video, in its box, instead of in a poster attribute: Safari can keep
   showing a poster over a video that is already playing (v4/README.md). */
body[data-v4] .mobile-hero-media::before { content:""; position:absolute; inset:-3%; background:url("/v4/assets/hero-pastel-poster.jpg") center/cover no-repeat; }
body[data-v4] .mobile-hero-media:is(.is-static,.is-unavailable)::before, html[data-motion="reduce"] body[data-v4] .mobile-hero-media::before { content:""; }
/* The bands replace the original bottom fade. */
body[data-v4] .mobile-hero-media::after { content:none; }
body[data-v4] .mobile-hero-grain { opacity:.12; }
body[data-v4] .mobile-hero-flares { background:radial-gradient(ellipse 75% 78% at 100% 0%,rgba(118,148,250,.88) 20%,transparent 95%),radial-gradient(ellipse 78% 82% at 0% 100%,rgba(186,166,250,.86) 18%,transparent 95%),radial-gradient(ellipse 50% 55% at 5% 0%,rgba(255,167,212,.4),transparent 85%),radial-gradient(ellipse 45% 55% at 37% 30%,rgba(255,255,255,.82) 10%,transparent 90%),radial-gradient(ellipse 36% 50% at 75% 68%,rgba(255,255,255,.76) 8%,transparent 90%),radial-gradient(ellipse 35% 35% at 55% 105%,rgba(255,255,255,.5),transparent 100%),linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.22)); }
body[data-v4] .mobile-hero-media canvas[data-ascii-field] { opacity:.22; }
/* Still film grain (v4/grain.js): sparse, faint specks at device-pixel size. */
body[data-v4] .mobile-hero-media canvas.v4-grain { opacity:1; image-rendering:pixelated; }
html[data-motion="reduce"] body[data-v4] .mobile-hero-media canvas.v4-grain { display:block !important; }
/* The two bands: one gradient, mirrored for the bottom, so their heights and fades always match. */
body[data-v4] .v4-hero-shade { position:absolute; top:0; left:0; right:0; height:var(--v4-band); background:linear-gradient(to bottom,rgb(var(--v4-bg-rgb)) 0,rgb(var(--v4-bg-rgb)) 42%,rgba(var(--v4-bg-rgb),.9) 50%,rgba(var(--v4-bg-rgb),.75) 58%,rgba(var(--v4-bg-rgb),.56) 66%,rgba(var(--v4-bg-rgb),.37) 74%,rgba(var(--v4-bg-rgb),.2) 82%,rgba(var(--v4-bg-rgb),.08) 91%,rgba(var(--v4-bg-rgb),0) 100%); pointer-events:none; }
body[data-v4] .v4-hero-shade.is-bottom { top:auto; bottom:1px; transform:scaleY(-1); }

/* The story on the page, one section after another with hairlines between them. */
body[data-v4] .v4-section, body[data-v4] .v4-legal { position:relative; width:100%; max-width:36rem; margin:0 auto; padding:88px var(--v4-gutter); color:var(--v4-fg); }
body[data-v4] :is(.v4-section,.v4-legal) + :is(.v4-section,.v4-legal)::before { content:""; position:absolute; top:0; left:var(--v4-gutter); right:var(--v4-gutter); border-top:1px solid var(--v4-line); }
/* Pastel cards: the hero's flare light on its base colour, a soft grain and black type in both themes. */
body[data-v4] .v4-card { position:relative; isolation:isolate; overflow:hidden; margin-top:32px; padding:6px 22px; color:var(--v4-ink); background:radial-gradient(ellipse 75% 78% at 100% 0%,rgba(118,148,250,.88) 20%,transparent 95%),radial-gradient(ellipse 78% 82% at 0% 100%,rgba(186,166,250,.86) 18%,transparent 95%),radial-gradient(ellipse 50% 55% at 5% 0%,rgba(255,167,212,.4),transparent 85%),radial-gradient(ellipse 45% 55% at 37% 30%,rgba(255,255,255,.82) 10%,transparent 90%),radial-gradient(ellipse 36% 50% at 75% 68%,rgba(255,255,255,.76) 8%,transparent 90%),#eef1ff; border-radius:24px; }
body[data-v4] .v4-card::after { content:""; position:absolute; inset:0; z-index:-1; background:url("/mobile/assets/grain.png") center/340px repeat; opacity:.2; mix-blend-mode:soft-light; pointer-events:none; }
body[data-v4] .v4-card.v4-signals dl > div { border-top-color:rgba(10,10,10,.12); }
body[data-v4] .v4-card.v4-signals dl > div:first-child { border-top:0; }
html body[data-v4] .v4-card.v4-signals dt { color:var(--v4-ink); }
html body[data-v4] .v4-card.v4-signals dd { color:rgba(10,10,10,.72); }
/* The closing statement on a pastel card. */
body[data-v4] .v4-closing { margin:0; padding:40px 24px; }
body[data-v4] .v4-closing :is(.v4-kicker,.v4-kicker-index) { color:rgba(10,10,10,.62); }
html body[data-v4] .v4-closing .v4-heading { color:var(--v4-ink); }
html body[data-v4] .v4-closing .v4-lede { color:rgba(10,10,10,.78); }
html body[data-v4] .v4-closing .v4-action { color:#fff !important; background:var(--v4-ink); }

/* Legal: the last section, ending in the lockup clipped by the bottom of the page. */
body[data-v4] .v4-legal { overflow:hidden; padding-bottom:0; }
body[data-v4] .v4-legal .v4-legal-mark { margin:56px calc(10px - var(--v4-gutter)) 0; }