/* boonvid pre-launch — only what the launch page adds. Everything else (tokens, type, buttons, header, popovers, footer,
   modal, reveal, cursor glow) is css/site.css and css/hero.css, copied unchanged from the main website. */

.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; left: 16px; top: -64px; z-index: 80; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-size: 14px; font-weight: 600; transition: top .25s var(--ease); }
.skip-link:focus { top: 14px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pl-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }   /* honeypot: never visible, never focusable */

/* ---------- hero: launch copy in the main hero's negative space ---------- */
.pl-hero.chero { height: 460vh; }
.pl-hero .m1 { width: min(400px, 27vw); top: 6.5%; }
/* the launch copy is taller than the main site's opening copy: same diffusion, carried further down */
.pl-hero .m1::before { inset: -120px -120px -110px -190px; border-radius: 46%; background: radial-gradient(ellipse at 46% 54%, rgba(255,255,255,.97) 0%, rgba(255,255,255,.94) 40%, rgba(255,255,255,.78) 56%, rgba(255,255,255,.36) 70%, rgba(255,255,255,0) 86%); -webkit-mask-image: radial-gradient(ellipse at 46% 48%, #000 42%, rgba(0,0,0,.6) 62%, transparent 84%); mask-image: radial-gradient(ellipse at 46% 48%, #000 42%, rgba(0,0,0,.6) 62%, transparent 84%); }
.chero-stage.is-night .pl-hero .m1::before, .pl-hero .chero-stage.is-night .m1::before { inset: -120px -120px -110px -190px; background: radial-gradient(ellipse at 46% 48%, rgba(0,0,0,.66) 0%, rgba(0,0,0,.52) 40%, rgba(0,0,0,.24) 62%, rgba(0,0,0,0) 82%); -webkit-mask-image: radial-gradient(ellipse at 46% 48%, #000 42%, rgba(0,0,0,.6) 62%, transparent 84%); mask-image: radial-gradient(ellipse at 46% 48%, #000 42%, rgba(0,0,0,.6) 62%, transparent 84%); }
.pl-date { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--accent); margin-bottom: 14px; }
.chero-stage.is-night .pl-date { color: #9ecbff; }
.pl-hero .m1 .pl-reveal { color: var(--ink); opacity: .62; font-family: var(--display); font-weight: 600; font-size: clamp(20px, 1.9vw, 27px); letter-spacing: -.025em; line-height: 1.15; margin-top: 12px; padding: 0; }

/* countdown — typography, air and hairlines; nothing boxed */
.pl-cd-wrap { margin-top: clamp(18px, 2.6vh, 28px); }
.pl-cd { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-start; }
.pl-cd li { display: grid; gap: 7px; padding: 0 clamp(14px, 1.5vw, 22px); position: relative; }
.pl-cd li:first-child { padding-left: 0; }
.pl-cd li + li::before { content: ""; position: absolute; left: 0; top: 6px; height: 26px; width: 1px; background: currentColor; opacity: .16; }
.pl-cd b { font-family: var(--display); font-weight: 600; font-size: clamp(30px, 2.9vw, 42px); letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; min-width: 2ch; }
.pl-cd span { font-size: 12px; font-weight: 500; color: var(--ink); opacity: .62; }
.pl-when { margin-top: 10px; font-size: 13px; color: var(--ink); opacity: .7; }
.pl-when small { display: block; font-size: 12px; opacity: .85; min-height: 1.4em; margin-top: 2px; }
.pl-live { font-family: var(--display); font-weight: 600; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.03em; }

/* early-access form: the main site's notify row (input + .btn) */
.pl-ea { margin-top: clamp(16px, 2.2vh, 24px); }
.pl-ea .ag-form { margin-top: 0; max-width: 452px; }
.pl-hero .ag-row .btn { padding: 0 16px; font-size: 14px; } .pl-hero .ag-row input { padding: 0 14px; font-size: 14px; }
.pl-ea form.bad .ag-row input { border-color: #d9534f; box-shadow: 0 0 0 4px color-mix(in srgb, #d9534f 16%, transparent); }
.pl-msg { min-height: 0; margin-top: 8px; font-size: 13px; color: #c0392b; }
.pl-msg:empty { display: none; }
.pl-free { margin-top: 14px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.pl-offer { margin-top: 4px; font-size: 14px; color: var(--ink); opacity: .78; }
.pl-consent { margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--ink); opacity: .58; max-width: 46ch; }
.pl-consent a { text-decoration: underline; text-underline-offset: .2em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.pl-consent a:hover { text-decoration-color: currentColor; }
.pl-done { padding: 20px 22px; border-radius: var(--r-s); background: color-mix(in srgb, var(--card) 88%, transparent); border: 1px solid var(--hair); box-shadow: var(--shadow); max-width: 452px; }
.pl-done:focus { outline: none; }
.pl-done h3 { font-size: 22px; } .pl-done p { color: var(--muted); font-size: 15px; margin-top: 4px; } .pl-done small { display: block; margin-top: 8px; font-size: 12px; color: var(--faint); }
.chero-stage.is-night .ag-row input { background: rgba(0,0,0,.35); border-color: rgba(255,255,255,.3); color: #f5f5f7; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.chero-stage.is-night .ag-row input::placeholder { color: rgba(245,245,247,.6); }
.chero-stage.is-night .ag-row .btn { background: #f5f5f7; color: #0b0b0d; border-color: #f5f5f7; }
.chero-stage.is-night .pl-msg { color: #ff9d94; }
.chero-stage.is-night .pl-done { background: rgba(0,0,0,.45); border-color: rgba(255,255,255,.18); color: #f5f5f7; } .chero-stage.is-night .pl-done p { color: rgba(245,245,247,.75); }
.pl-hero .m2 { right: auto; left: 5vw; top: 31%; width: min(270px, 18vw); text-align: left; translate: 0 -50%; }
.pl-hero .m2 .chero-h2 { font-size: clamp(22px, 2vw, 30px); letter-spacing: -.03em; line-height: 1.1; }
.pl-hero .m2 .chero-lead { margin: 10px 0 0; font-size: clamp(14px, 1.05vw, 16px); }
.pl-hero .m2::before { inset: -90px -130px; }

/* ---------- breathing space ---------- */
.pl-breath { height: 190vh; position: relative; }
.pl-breath-stage { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; padding: 0 var(--gutter); }
.pl-breath-line { font-family: var(--display); font-weight: 600; font-size: clamp(44px, 8vw, 124px); letter-spacing: -.045em; line-height: 1.02; text-align: center; will-change: transform; }
.pl-breath-line .w { display: inline-block; will-change: opacity, filter; }

/* ---------- a first look ---------- */
.pl-look { padding: calc(var(--sec) * .4) 0 var(--sec); display: grid; justify-items: center; text-align: center; }
.pl-look-copy { display: grid; justify-items: center; }
.pl-look-copy .display { max-width: 15ch; }
.pl-look-copy .lead { margin-top: 26px; max-width: none; }
.pl-cap { transition: color .7s var(--ease), opacity .7s var(--ease); }
.motion .pl-cap { opacity: .35; } .motion .pl-cap.on { opacity: 1; color: var(--ink); }
.pl-mb { position: relative; margin: clamp(86px, 9.4vw, 140px) auto clamp(30px, 2.4vw, 40px); width: min(940px, 88%); }   /* −13 %: the whole MacBook, more air around it, same section height */
.pl-mb::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: 1.5%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.30), transparent); filter: blur(14px); transform: translateY(46%); }
.pl-mb-body { position: relative; display: block; width: 100%; height: auto; }
.pl-mb-screen { position: absolute; left: 8.54%; top: 3.74%; width: 82.99%; height: 80.14%; overflow: hidden; background: #000; border-radius: .6% / .9%; }
.pl-mb-frame { position: absolute; left: 0; top: 0; width: 1555px; height: 1012px; transform-origin: 0 0; }
.pl-mb-frame { text-align: left; }
.pl-mb-frame .scr { transition: opacity .55s var(--ease); }
.pl-mb-frame .fui > * { transition: opacity .4s var(--ease), transform .45s var(--ease); }
.pl-mb-cover { display: none; }
.pl-mb::after { content: ""; position: absolute; left: 44.8%; top: 3.74%; width: 10.5%; height: 2.7%; background: #000; border-radius: 0 0 9px 9px / 0 0 60% 60%; }   /* the notch of the render */

/* ---------- the film ---------- */
.pl-film { padding: var(--sec) 0; background: var(--paper); text-align: center; }
.pl-film .wrap { display: grid; justify-items: center; }
.pl-player { margin-top: clamp(48px, 6vw, 88px); width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; position: relative; background: #0b0b0d; box-shadow: var(--shadow-lg); }
.pl-player button, .pl-player video { position: absolute; inset: 0; width: 100%; height: 100%; }
.pl-player video { object-fit: cover; background: #000; }
.pl-player button img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.pl-player button::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.42)); }
.pl-player button:hover img { transform: scale(1.03); }
.pl-play { position: absolute; left: 50%; bottom: clamp(20px, 4vw, 44px); transform: translateX(-50%); z-index: 1; display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px 12px 14px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font-size: 15px; font-weight: 600; letter-spacing: -.01em; backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.38); transition: background .3s var(--ease), transform .4s var(--ease); white-space: nowrap; }
.pl-play i { width: 30px; height: 30px; border-radius: 50%; background: #fff; position: relative; }
.pl-play i::after { content: ""; position: absolute; left: 12px; top: 9px; border-left: 10px solid #1d1d1f; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.pl-player button:hover .pl-play { background: rgba(255,255,255,.26); transform: translateX(-50%) translateY(-2px); }
.pl-player button:focus-visible { outline: none; } .pl-player button:focus-visible .pl-play { outline: 2px solid #fff; outline-offset: 4px; }

/* ---------- the story ---------- */
.pl-story { height: 420vh; position: relative; }
.pl-story-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; grid-template-rows: 47% 53%; justify-items: center; }
.pl-story-lines { position: relative; width: 100%; }
.pl-story-line { position: absolute; left: 0; right: 0; bottom: 8%; margin: 0; text-align: center; font-size: clamp(54px, 10.5vw, 168px); letter-spacing: -.05em; line-height: .98; padding: 0 var(--gutter); opacity: 0; will-change: transform, opacity, filter; }
.pl-story-line[data-line="0"] { opacity: 1; }
.pl-story-visuals { position: relative; width: 100%; }
.pl-vis { position: absolute; left: 50%; top: 4%; translate: -50% 0; opacity: 0; will-change: transform, opacity; }
.pl-vis[data-vis="0"] { opacity: 1; }
.pl-chip { display: inline-flex; padding: 5px 12px; border-radius: 999px; background: var(--baby-2); color: var(--accent-ink); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pl-sheet { width: min(620px, calc(100vw - 2 * var(--gutter))); padding: 30px 34px 26px; border-radius: var(--r); background: var(--card); border: 1px solid var(--hair); box-shadow: var(--shadow-lg); display: grid; gap: 20px; justify-items: start; text-align: left; }
.pl-sheet-lines { display: grid; gap: 4px; font-size: clamp(14px, 1.25vw, 17px); line-height: 1.6; color: var(--ink); }
.pl-sheet-lines span { opacity: .1; transform: translateY(4px); transition: opacity .5s var(--ease), transform .5s var(--ease); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pl-sheet-lines span.on { opacity: 1; transform: none; }
.pl-voice { width: min(720px, calc(100vw - 2 * var(--gutter))); padding: 34px 34px 26px; border-radius: var(--r); background: var(--card); border: 1px solid var(--hair); box-shadow: var(--shadow-lg); display: grid; gap: 22px; }
.pl-wave { display: flex; align-items: center; justify-content: space-between; height: 96px; }
.pl-wave i { width: 3px; border-radius: 2px; height: calc(var(--h) * 1%); background: var(--hair); transition: background .35s var(--ease); }
.pl-wave i.on { background: var(--accent); }
.pl-voice-meta { display: flex; align-items: center; justify-content: space-between; font-size: 15px; } .pl-voice-meta b { font-weight: 600; }
.pl-reel { width: 100%; top: 0; display: grid; grid-template-columns: 100%; gap: clamp(22px, 3.4vh, 40px); justify-items: center; }
.pl-reel-track { justify-self: center; display: flex; gap: clamp(12px, 1.6vw, 24px); width: max-content; will-change: transform; padding: 6px 0 24px; }
.pl-reel-track img { width: clamp(240px, 30vw, 470px); aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-s); box-shadow: var(--shadow-lg); will-change: transform, opacity; background: var(--paper); }
.pl-reel-sub { font-size: clamp(16px, 1.4vw, 20px); color: var(--muted); letter-spacing: -.01em; text-align: center; max-width: 40ch; padding: 0 var(--gutter); }
/* reduced motion: the three moments simply follow each other */
.pl-story.is-static { height: auto; padding: var(--sec) 0; }
.pl-story.is-static .pl-story-stage { position: static; height: auto; display: block; overflow: visible; }
.pl-story.is-static .pl-story-line, .pl-story.is-static .pl-vis { position: static; opacity: 1; translate: none; margin: 0 auto; }
.pl-story.is-static .pl-story-line { margin: 12vh 0 5vh; font-size: clamp(44px, 8vw, 110px); }
.pl-story.is-static .pl-sheet-lines span { opacity: 1; transform: none; } .pl-story.is-static .pl-wave i { background: var(--accent); }
.pl-story.is-static .pl-story-lines, .pl-story.is-static .pl-story-visuals { display: contents; }
.pl-story.is-static .pl-reel-track { width: auto; overflow: hidden; }

/* ---------- the invitation ---------- */
.pl-final.closing { padding: calc(var(--sec) * 1.15) 0 calc(var(--sec) * 1.35); }
.pl-final.closing .wrap { gap: 0; }
.pl-final .pl-date { margin-bottom: 22px; }
.pl-cd-sm { justify-content: center; margin: 0 0 clamp(36px, 4.4vw, 56px); opacity: .8; }
.pl-cd-sm li { padding: 0 clamp(12px, 1.3vw, 18px); gap: 6px; } .pl-cd-sm li:first-child { padding-left: clamp(12px, 1.3vw, 18px); }
.pl-cd-sm b { font-size: clamp(22px, 2vw, 28px); font-weight: 500; } .pl-cd-sm span { font-size: 11px; } .pl-cd-sm li + li::before { top: 4px; height: 18px; }
.pl-final h2.display { max-width: 14ch; }
.pl-final .pl-ea { margin-top: clamp(40px, 5vw, 60px); display: grid; justify-items: center; width: 100%; }
.pl-final .ag-form { max-width: 480px; }
.pl-final .pl-free { margin-top: 20px; font-size: 16px; }
.pl-final .pl-offer { margin-top: 6px; font-size: 14px; color: var(--muted); opacity: 1; }
.pl-final .pl-consent { margin-inline: auto; }
.pl-final .pl-done { text-align: left; width: 100%; }

/* ---------- footer additions ---------- */
.foot-offer { max-width: 84ch; line-height: 1.55; }
.foot-bottom { align-items: flex-start; }

/* ---------- confirmation + legal pages ---------- */
.pl-solo main { min-height: calc(100svh - 72px - 190px); display: grid; place-items: center; text-align: center; padding: var(--sec) 0; }
.pl-solo .wrap { display: grid; justify-items: center; }
.pl-solo .pl-mark { width: 44px; height: auto; margin-bottom: 36px; }
:root[data-theme="dark"] .pl-solo .pl-mark { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pl-solo .pl-mark { filter: invert(1); } }
.pl-solo h1:focus { outline: none; }
.pl-solo .lead { margin-top: 22px; text-align: center; }
.pl-bound { margin-top: 16px; max-width: 44ch; font-size: 15px; line-height: 1.5; color: var(--muted); text-align: center; }
.pl-tag { display: inline-flex; margin-top: 28px; padding: 8px 16px; border-radius: 999px; background: var(--baby-2); color: var(--accent-ink); font-size: 14px; font-weight: 600; }
.pl-back { margin-top: 44px; }
.pl-legal main { place-items: start center; text-align: left; }
.pl-legal article { width: min(720px, 100%); display: grid; gap: 16px; }
.pl-legal h1 { font-size: clamp(38px, 5vw, 64px); margin-bottom: 10px; }
.pl-legal h2 { font-size: 22px; margin-top: 22px; }
.pl-legal p, .pl-legal li { color: var(--muted); } .pl-legal ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.pl-todo { margin-top: 14px; padding: 22px 24px; border-radius: var(--r-s); background: var(--paper); border: 1px solid var(--hair); font-size: 15px; }
.pl-todo strong { display: block; margin-bottom: 10px; color: var(--ink); }

/* ---------- responsive: recomposed, not squeezed ---------- */
@media (max-width: 1100px) {
  .pl-hero .m2::before { content: ""; inset: -60px -40px; }
  .pl-hero .m2 { left: 50%; top: 5%; width: min(720px, 92vw); text-align: center; translate: none; } .pl-hero .m2 .chero-lead { margin-inline: auto; }
  .pl-hero .m1 { width: min(560px, 92vw); top: 3.5%; }
  .pl-hero .m1 .chero-h1 { font-size: clamp(30px, 4.6vw, 44px); }
  .pl-cd { justify-content: center; } .pl-cd li:first-child { padding-left: clamp(14px, 1.5vw, 22px); }
  .pl-ea .ag-form, .pl-consent { margin-inline: auto; } .pl-done { margin-inline: auto; text-align: left; }
  .pl-hero .chero-scrim { background: linear-gradient(180deg, var(--white) 0%, color-mix(in srgb, var(--white) 86%, transparent) 46%, transparent 78%); }
  .chero-stage.is-night .chero-scrim { background: linear-gradient(180deg, #0b0b0d 0%, rgba(11,11,13,.82) 46%, transparent 78%); }
}
@media (max-width: 760px) {
  .nav-actions .btn { display: inline-flex; padding: 9px 14px; font-size: 13px; }
  .pl-hero.chero { height: 380vh; }
  /* ---- phone composition (Julius 19.9.): the launch copy starts right under the header, the office and the MacBook
     begin under the copy (hero.js places the camera there), no scrim band, brighter secondary copy ---- */
  .pl-hero .m1 { top: 14px; width: calc(100vw - 2 * var(--gutter, 20px)); }
  .pl-hero .m1 .chero-h1 { font-size: clamp(31px, 9.2vw, 40px); line-height: 1.06; }
  .pl-hero .pl-date { margin-bottom: 10px; }
  .pl-hero .m1 .pl-reveal { font-size: clamp(19px, 5.4vw, 22px); margin-top: 8px; opacity: .8; }
  .pl-cd-wrap { margin-top: 16px; }
  .pl-cd li { padding: 0 clamp(9px, 3.2vw, 16px); gap: 5px; } .pl-cd li:first-child { padding-left: clamp(9px, 3.2vw, 16px); }
  .pl-cd b { font-size: clamp(26px, 8vw, 32px); min-width: 2ch; } .pl-cd.pl-cd-sm b { font-size: 22px; }
  .pl-cd span { font-size: 11px; opacity: .8; } .pl-cd li + li::before { top: 5px; height: 22px; opacity: .22; }
  .pl-when { font-size: 13px; margin-top: 10px; opacity: .85; text-wrap: balance; } .pl-when time { display: inline-block; max-width: 30ch; }
  .pl-ea { margin-top: 14px; }
  .pl-ea .ag-form { max-width: 420px; }
  .pl-ea .ag-row { flex-direction: column; gap: 8px; } .pl-ea .ag-row .btn { width: 100%; justify-content: center; } .pl-ea .ag-row input { text-align: center; height: 46px; flex: none; width: 100%; font-size: 15px; } .pl-ea .ag-row .btn { height: 46px; font-size: 15px; }
  .pl-hero .pl-free { font-size: 15px; margin-top: 12px; color: var(--accent); } .chero-stage.is-night .pl-free { color: #9ecbff; }
  .pl-offer { font-size: 13px; margin-top: 3px; opacity: .9; }
  .pl-hero .pl-consent { font-size: 11.5px; margin-top: 5px; opacity: .74; }
  /* the room begins under the copy: only a soft edge where the two meet, no solid band */
  .pl-hero .chero-scrim { background: linear-gradient(180deg, var(--white) 0%, var(--white) 6%, transparent 22%); }
  .chero-stage.is-night .chero-scrim { background: linear-gradient(180deg, #0b0b0d 0%, #0b0b0d 6%, transparent 22%); }
  .pl-hero .m2 { top: 16px; width: calc(100vw - 2 * var(--gutter, 20px)); }
  .pl-breath { height: 160vh; }
  .pl-story-stage { grid-template-rows: 40% 60%; }
  .pl-sheet, .pl-voice { padding: 22px 20px 20px; } .pl-wave { height: 70px; } .pl-wave i:nth-child(2n) { display: none; }
  .pl-reel-track img { width: 68vw; }
  .pl-play { font-size: 14px; padding: 9px 16px 9px 10px; } .pl-play i { width: 26px; height: 26px; } .pl-play i::after { left: 10px; top: 7px; }
  .pl-solo main { min-height: 60svh; }
}
@media (max-height: 760px) and (min-width: 1101px) { .pl-hero .m1 { top: 4%; } .pl-cd-wrap { margin-top: 16px; } .pl-ea { margin-top: 14px; } .pl-hero .pl-consent { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .pl-breath { height: auto; padding: var(--sec) 0; } .pl-breath-stage { position: static; height: auto; }
  .pl-hero.chero.is-static .m1 { width: auto; max-width: 560px; }
}

.pl-legal .pl-muted { color: var(--muted, #86868b); font-size: 14px; }
.pl-legal ul { padding-left: 20px; display: grid; gap: 8px; }