/* WrapSync landing page
   Colors, the 12pt corner radius and the "blue glass" surfaces mirror
   WrapSyncTheme, WrapSyncGlassSurface and WrapSyncGlassButtonStyle in the app.
   Dark is the default. The header switch, or the device setting, chooses light. */

:root {
  color-scheme: dark;
  --accent: #6a93d9;                   /* WrapSyncTheme.accent */
  --accent-rgb: 106 147 217;
  --radius: 12px;                      /* WrapSyncTheme.cornerRadius */
  --gutter: clamp(16px, 4vw, 32px);
  --maxw: 1180px;
  --nav-top: max(12px, env(safe-area-inset-top));
  --nav-h: 52px;
  --peek: clamp(28px, 4vw, 48px);      /* how far the content sheet rises over the hero */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --spring: cubic-bezier(.2, .8, .2, 1);

  /* Dark appearance */
  --bg: #0b0d11;                       /* WrapSyncTheme.background, dark */
  --bg-rgb: 11 13 17;
  --text: #f5f7fb;
  --text-2: rgb(235 240 250 / .68);
  --text-3: rgb(235 240 250 / .54);
  --accent-text: #6a93d9;
  --accent-soft: #a9c8fa;
  --link: #a9c8fa;
  --link-hover: #d7e6ff;
  --focus: #b3d1ff;
  --line: rgb(157 188 239 / .16);
  --card: rgb(255 255 255 / .055);     /* WrapSyncTheme.card, dark */
  --card-solid: #151a24;
  --card-shadow: 0 0 10px rgb(var(--accent-rgb) / .07);
  --rim: rgb(255 255 255 / .32);
  --press: rgb(255 255 255 / .03);
  --path: #e1ebfc;
  --halo: rgb(20 44 79 / .7);
  --halo-2: rgb(31 58 104 / .45);
  --nav-bg: rgb(11 13 17 / .56);
  --nav-solid: #0b0d11;
  --nav-shadow: 0 12px 32px -14px rgb(0 0 0 / .7);
  --stage-bg: #0c1322;                 /* the blue-lit stage behind the hero */
  --stage-horizon: rgb(36 72 132 / .5);
  --stage-dot: rgb(160 190 240 / .1);
  --sheet-rim: rgb(255 255 255 / .22);
  --sheet-shadow: 0 -28px 60px -28px rgb(0 0 0 / .75);
  --switch-track: linear-gradient(to bottom right, rgb(var(--accent-rgb) / .55), rgb(var(--accent-rgb) / .18), rgb(var(--accent-rgb) / .36)), #090e17;
  --switch-rim: rgb(255 255 255 / .5);
  --switch-icon: rgb(255 255 255 / .62);
  --stage-rgb: 12 19 34;               /* --stage-bg as channels, for the scrim */
  --glow-a: rgb(32 66 122 / .75);
  --glow-b: rgb(20 44 79 / .85);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f2f7;                       /* WrapSyncTheme.background, light */
  --bg-rgb: 242 242 247;
  --text: #0b0d11;
  --text-2: rgb(28 32 42 / .74);
  --text-3: rgb(28 32 42 / .64);
  --accent-text: #3f6cbe;
  --accent-soft: #3f6cbe;
  --link: #2f5fb3;
  --link-hover: #1d4690;
  --focus: #2f5fb3;
  --line: rgb(60 60 67 / .14);
  --card: #fff;                        /* WrapSyncTheme.card, light */
  --card-solid: #fff;
  --card-shadow: 0 0 10px rgb(var(--accent-rgb) / .07), 0 1px 2px rgb(16 24 40 / .04), 0 16px 36px -22px rgb(16 32 64 / .24);
  --rim: rgb(255 255 255 / .9);
  --press: rgb(0 0 0 / .03);
  --path: #1d2a44;
  --halo: rgb(106 147 217 / .16);
  --halo-2: rgb(106 147 217 / .12);
  --nav-bg: rgb(255 255 255 / .66);
  --nav-solid: #fff;
  --nav-shadow: 0 12px 32px -16px rgb(20 40 80 / .28);
  --stage-bg: #e3ebf7;
  --stage-horizon: rgb(106 147 217 / .32);
  --stage-dot: rgb(40 70 130 / .12);
  --sheet-rim: #fff;
  --sheet-shadow: 0 -24px 56px -28px rgb(20 40 80 / .3);
  --switch-track: rgb(120 120 128 / .16);
  --switch-rim: rgb(255 255 255 / .9);
  --switch-icon: rgb(60 60 67 / .5);
  --stage-rgb: 227 235 247;
  --glow-a: rgb(106 147 217 / .32);
  --glow-b: rgb(160 192 242 / .4);
}
/* Critically damped spring (damping 1.0), sampled for CSS */
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, 0.0571, 0.1793, 0.3192, 0.4533, 0.571, 0.6691, 0.7483, 0.8106, 0.8587, 0.8954, 0.9231, 0.9437, 0.959, 0.9703, 0.9785, 0.9845, 0.9889, 0.992, 0.9943, 0.9959, 0.9971, 0.9979, 0.9985, 1); }
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-top) + var(--nav-h) + 16px);
  background: var(--bg);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.5 var(--font);
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
svg { fill: currentColor; }
a { color: var(--link); text-underline-offset: .2em; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 6px; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 700; text-wrap: balance; }
p { margin: 0; }

.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 {
  position: absolute; left: 16px; top: -64px; z-index: 100;
  padding: 10px 16px; border-radius: var(--radius);
  background: #13203a; color: #fff; text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow {
  margin: 0 0 18px;
  font: 700 .8125rem/1.2 var(--font);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* ---------- Glass ---------- */

/* WrapSyncGlassButtonStyle: opaque dark glass, blue rim, soft glow (in both appearances) */
.btn {
  --c: var(--accent-rgb);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--radius);
  color: #fff;
  text-decoration: none;
  font: 600 1rem/1.2 var(--font);
  letter-spacing: .03em;
  white-space: nowrap;
  background:
    linear-gradient(to bottom right, rgb(var(--c) / .65), rgb(var(--c) / .2), rgb(var(--c) / .4)),
    #090e17;
  box-shadow: 0 0 20px rgb(var(--c) / .5);
  transition:
    transform 220ms var(--spring),
    opacity 220ms var(--spring),
    box-shadow 220ms var(--spring);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.2px;
  background: linear-gradient(to bottom right, rgb(255 255 255 / .9), rgb(var(--c) / .3), rgb(var(--c) / .95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.btn:hover { color: #fff; }
@media (hover: hover) {
  .btn:hover { box-shadow: 0 0 28px rgb(var(--c) / .62); }
}
/* Feedback lives on the press, and it is immediate */
.btn:active {
  transform: scale(.985);
  opacity: .82;
  box-shadow: 0 0 20px rgb(var(--c) / .15);
  transition-duration: 70ms;
}
.btn--lg {
  min-height: 64px;
  padding: 0 34px;
  font-size: 1.125rem;
  letter-spacing: .04em;
}
.btn--sm {
  min-height: 40px;
  padding: 0 16px;
  font-size: .9375rem;
  letter-spacing: .01em;
  box-shadow: 0 0 14px rgb(var(--c) / .4);
}

/* WrapSyncGlassSurface: quiet reflection and illuminated rim */
.glass {
  position: relative;
  isolation: isolate;
  border-radius: 22px;
  background:
    linear-gradient(to bottom right, rgb(var(--accent-rgb) / .1), transparent 55%, rgb(var(--accent-rgb) / .04)),
    var(--card);
  box-shadow: var(--card-shadow);
}
/* The illuminated rim shared by glass surfaces */
.glass::after,
.nav-bar::after,
.theme-toggle::after,
.hero-pause::after,
.cta-card::after,
.wave::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(to bottom right, var(--rim), rgb(var(--accent-rgb) / .16), rgb(var(--accent-rgb) / .3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ---------- Header: a floating glass bar, with the appearance toggle beside it ---------- */

.nav {
  position: fixed;
  top: var(--nav-top);
  left: 0;
  right: 0;
  z-index: 50;
  padding: 0 var(--gutter);
  pointer-events: none;
}
/* Scroll edge: once content passes under the floating chrome, a soft fade keeps it clear */
.nav::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--nav-top));
  height: calc(var(--nav-top) + var(--nav-h) + 28px);
  background: linear-gradient(rgb(var(--bg-rgb) / .8), rgb(var(--bg-rgb) / 0));
  opacity: 0;
  transition: opacity 300ms ease;
}
.nav.is-scrolled::before { opacity: 1; }
.nav-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.nav-bar,
.theme-toggle {
  position: relative;
  height: var(--nav-h);
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  box-shadow: var(--nav-shadow);
  pointer-events: auto;
}
/* One corner style throughout, the app's 12pt: the button inside keeps it, and the
   bar and toggle add the 4px inset (16px) so the curves stay parallel */
.nav-bar {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px 0 16px;
  border-radius: calc(var(--radius) + 4px);
  --cta-room: 141px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font: 700 1.125rem/1 var(--font-display);
  letter-spacing: -.02em;
}
.brand:hover { color: var(--text); }
.brand img { width: 30px; height: 30px; border-radius: 22.4%; }
/* The header lockup, set like a logo: the W of WrapSync stands exactly as tall as the
   clapperboard (SF Pro's capitals are .7046 of the font size) */
.nav .brand {
  --mark: 30px;
  gap: calc(var(--mark) / 3);
  font: 600 calc(var(--mark) / .7046)/1 var(--font-display);
  letter-spacing: -.02em;
}
/* Trimmed to its capitals and baseline, the name centers on the mark exactly */
.nav .brand-name { text-box: trim-both cap alphabetic; }
.nav .btn {
  min-height: 44px;
  padding: 0 18px;
  font-size: .9375rem;
  letter-spacing: .01em;
}
/* The header mark: the clapperboard alone. Glow art for dark, blue ink for light;
   both load so switching never flashes. The glow reaches past the clapperboard. */
.brand-mark {
  position: relative;
  display: block;
  flex: none;
  width: calc(var(--mark) * 1.0057);
  height: var(--mark);
}
.brand-mark::before,
.brand-mark::after {
  content: "";
  position: absolute;
  inset: calc(var(--mark) * -.1264) calc(var(--mark) * -.09) calc(var(--mark) * -.0914) calc(var(--mark) * -.0561);
  background: url("assets/logo-glow.png") center / 100% 100% no-repeat;
}
.brand-mark::after { background-image: url("assets/logo-ink.png"); opacity: 0; }
:root[data-theme="light"] .brand-mark::before { opacity: 0; }
:root[data-theme="light"] .brand-mark::after { opacity: 1; }

/* Light and dark: a glass toggle of its own, shaped like the bar. It shows the current appearance. */
.theme-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--nav-h);
  padding: 0;
  border: 0;
  border-radius: calc(var(--radius) + 4px);
  color: var(--accent-text);
  cursor: pointer;
  transition: transform 220ms var(--spring);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.theme-toggle svg {
  grid-area: 1 / 1;
  width: 22px;
  height: 22px;
  transition: opacity 260ms ease, transform 520ms var(--spring);
}
:root[data-theme="dark"] .theme-toggle .tt-sun,
:root[data-theme="light"] .theme-toggle .tt-moon { opacity: 0; transform: rotate(-90deg) scale(.5); }
.theme-toggle:active { transform: scale(.92); transition-duration: 80ms; }
.no-js .theme-toggle { display: none; }

@media (max-width: 400px) {
  .nav-row { gap: 8px; }
  .nav-bar { padding-left: 12px; --cta-room: 133px; }
  .nav .brand { --mark: 17px; }
  .nav .btn { padding: 0 14px; }
}
/* On narrow bars the pair shrinks as one piece: it is 7.8 marks wide, and it takes
   whatever the bar has left beside Get the app */
@supports (width: 1cqi) {
  .nav-bar { container-type: inline-size; }
  .nav .brand { --mark: clamp(17px, (100cqi - var(--cta-room)) / 7.8, 30px); }
}
/* The narrowest phones keep the logo and drop the name; the link keeps its label */
@media (max-width: 369px) {
  .nav .brand { --mark: 30px; }
  .nav .brand-name { display: none; }
}

/* Switching appearance reveals the new look from the toggle */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: appearance-reveal 700ms cubic-bezier(.2, .8, .2, 1); }
@keyframes appearance-reveal {
  from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 50%)); }
  to { clip-path: circle(150vmax at var(--vt-x, 50%) var(--vt-y, 50%)); }
}
/* With reduced motion, a short cross-fade instead of a sudden jump in brightness */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root) { animation: vt-out 300ms ease both; }
  ::view-transition-new(root) { animation: vt-in 300ms ease both; }
}
@keyframes vt-in { from { opacity: 0; } }
@keyframes vt-out { to { opacity: 0; } }

/* ---------- Hero: the walkthrough plays across the whole hero ---------- */

.hero {
  position: relative;
  z-index: 0;
  height: 100svh;
  min-height: 600px;
  overflow: clip;
  isolation: isolate;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(70% 50% at 50% 112%, var(--stage-horizon), transparent 70%),
    var(--stage-bg);
}
/* Two slow pools of light drift behind the scene */
.hero-bg::before,
.hero-bg::after {
  content: "";
  position: absolute;
  left: 72%;
  top: 28%;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow-a), transparent);
  translate: -50% -50%;
  animation: drift-a 26s ease-in-out infinite alternate;
}
.hero-bg::after {
  left: 16%;
  top: 86%;
  width: 60vmax;
  height: 60vmax;
  background: radial-gradient(closest-side, var(--glow-b), transparent);
  animation-name: drift-b;
  animation-duration: 33s;
}
@keyframes drift-a { to { transform: translate(-16vw, 26vh); } }
@keyframes drift-b { to { transform: translate(20vw, -24vh); } }
.hero-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--stage-dot) 1.2px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(60% 70% at 64% 48%, #000 15%, transparent 80%);
  mask-image: radial-gradient(60% 70% at 64% 48%, #000 15%, transparent 80%);
}
.hero-curves { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-curves path { fill: none; stroke-width: 1.4; }
.hero-curves .spark {
  stroke: rgb(var(--accent-rgb) / .9);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 90 2400;
  animation: spark 11s linear infinite;
}
.hero-curves .spark + .spark { animation-delay: -5.5s; }
@keyframes spark { from { stroke-dashoffset: 2490; } to { stroke-dashoffset: 0; } }

/* The camera's view covers the hero edge to edge */
.stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  animation: fade-in 1200ms ease 150ms backwards;
}
.no-js .canvas { display: none; }
.stage-fallback {
  position: absolute;
  right: 12%;
  top: 50%;
  width: auto;
  height: min(78%, 640px);
  border: 8px solid #15171c;
  border-radius: 44px;
  transform: translateY(-50%);
}
/* A soft pool of the stage color keeps the headline readable over the motion */
.hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgb(var(--stage-rgb) / .5), rgb(var(--stage-rgb) / 0) 16%),
    radial-gradient(46% 64% at 20% 54%, rgb(var(--stage-rgb) / .9), rgb(var(--stage-rgb) / .62) 46%, rgb(var(--stage-rgb) / 0) 78%);
}

.hero-inner {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: calc(var(--nav-top) + var(--nav-h) + 24px) var(--gutter) calc(var(--peek) + 24px);
  pointer-events: none;
}
.hero-copy {
  max-width: min(560px, 42vw);
  padding-left: clamp(0px, 1.2vw, 14px);
  pointer-events: auto;
}
.hero h1 {
  font-size: clamp(2.75rem, 5.6vw, 5.5rem);
  line-height: .98;
  letter-spacing: -.045em;
}
.hero h1,
.hero-sub { text-shadow: 0 0 28px rgb(var(--stage-rgb) / .9), 0 0 3px rgb(var(--stage-rgb) / .6); }
.hero-sub {
  max-width: 21em;
  margin-top: 22px;
  font-size: clamp(1.0625rem, .95rem + .5vw, 1.375rem);
  line-height: 1.4;
  letter-spacing: -.015em;
  color: var(--text-2);
  text-wrap: balance;
}
.hero-copy .btn { margin-top: 34px; }

/* Entrance: the copy rises in while the scene fades up */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes fade-in { from { opacity: 0; } }
.hero-copy > * { animation: rise 900ms var(--spring) backwards; }
.hero-copy > :nth-child(2) { animation-delay: 80ms; }
.hero-copy > :nth-child(3) { animation-delay: 160ms; }

.hero-pause {
  position: absolute;
  z-index: 3;
  right: var(--gutter);
  bottom: calc(var(--peek) + 16px);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--text);
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  cursor: pointer;
  transition: transform 220ms var(--spring), opacity 220ms var(--spring);
  -webkit-tap-highlight-color: transparent;
}
.hero-pause:active { transform: scale(.94); opacity: .7; transition-duration: 70ms; }
.hero-pause svg { width: 14px; height: 14px; }
.hero-pause .i-play { display: none; margin-left: 2px; }
.hero-pause[data-state="paused"] .i-play { display: block; }
.hero-pause[data-state="paused"] .i-pause { display: none; }
.no-js .hero-pause { display: none; }

/* Narrow or tall screens: the copy sits at the top and the close-ups play below it.
   hero.js sets --copy-bottom so the scrim ends just under the copy. */
@media (max-width: 799px), (max-aspect-ratio: 1/1) {
  .hero-inner {
    align-items: flex-start;
    justify-content: center;
    padding-top: calc(var(--nav-top) + var(--nav-h) + clamp(20px, 5vh, 56px));
    text-align: center;
  }
  .hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 34rem;
    padding-left: 0;
  }
  .hero h1 { font-size: clamp(2.75rem, 1rem + 7.4vw, 4.75rem); }
  .hero-sub { max-width: 19em; margin-top: 14px; }
  .hero-copy .btn { margin-top: 24px; }
  .hero-scrim {
    background: linear-gradient(
      rgb(var(--stage-rgb) / .95),
      rgb(var(--stage-rgb) / .9) calc(var(--copy-bottom, 45%) - 30px),
      rgb(var(--stage-rgb) / 0) calc(var(--copy-bottom, 45%) + 70px));
  }
  .hero-dots {
    -webkit-mask-image: radial-gradient(80% 45% at 50% 70%, #000 15%, transparent 78%);
    mask-image: radial-gradient(80% 45% at 50% 70%, #000 15%, transparent 78%);
  }
  .stage-fallback { right: auto; left: 50%; top: auto; bottom: 8%; height: 46%; transform: translateX(-50%); }
}
@media (max-width: 480px) {
  .hero-copy .btn--lg { min-height: 56px; padding: 0 28px; font-size: 1.0625rem; }
}

/* ---------- The content sheet: a clear break from the hero ---------- */

.sheet {
  --r: clamp(28px, 5.6vw, 80px);
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--peek));
  border-radius: var(--r) var(--r) 0 0;
  background: var(--bg);
  box-shadow: var(--sheet-shadow);
}
.sheet::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  height: 240px;
  border-radius: inherit;
  padding: 1px 1px 0;
  background: linear-gradient(var(--sheet-rim), rgb(var(--accent-rgb) / .12) 35%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ---------- The scene: live HTML at device scale, framed by a camera ---------- */

.canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-origin: 0 0;
  color: var(--text);
  font-family: var(--font);
  letter-spacing: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.canvas > * { position: absolute; left: 0; top: 0; }

/* The report goes to an AI assistant: a plain chat window with a tab for each */
.ai {
  --ai-bg: #15171c;
  --ai-bar: #1b1e24;
  --ai-soft: #23272f;
  --ai-line: rgb(255 255 255 / .08);
  --ai-dot: rgb(255 255 255 / .18);
  --ai-text: #eef1f6;
  --ai-text-2: rgb(238 241 246 / .58);
  --ai-accent: #8fb2ec;
  --ai-mark: #f0a63a;
  width: 560px;
  overflow: hidden;
  border-radius: 24px;
  background: var(--ai-bg);
  color: var(--ai-text);
  font: 400 19px/1.45 var(--font);
  letter-spacing: -.01em;
  box-shadow: 0 0 0 1px var(--ai-line), 0 50px 100px -40px rgb(0 0 0 / .7), 0 0 90px -20px rgb(var(--accent-rgb) / .3);
}
:root[data-theme="light"] .ai {
  --ai-bg: #fff;
  --ai-bar: #f3f4f7;
  --ai-soft: #eaedf3;
  --ai-line: rgb(16 24 40 / .09);
  --ai-dot: rgb(16 24 40 / .16);
  --ai-text: #14161b;
  --ai-text-2: rgb(20 22 27 / .58);
  --ai-accent: #3f6cbe;
  --ai-mark: #b4650f;
  box-shadow: 0 0 0 1px var(--ai-line), 0 50px 100px -40px rgb(20 40 80 / .35), 0 0 90px -20px rgb(var(--accent-rgb) / .25);
}
.ai-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 58px;
  padding: 0 20px;
  border-bottom: 1px solid var(--ai-line);
  background: var(--ai-bar);
}
.win-dots { display: flex; gap: 8px; }
.win-dots i { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--ai-dot); }
.ai-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 13px; background: var(--ai-soft); }
.ai-tab { padding: 9px 18px; border-radius: 9px; color: var(--ai-text-2); font: 600 16px/1 var(--font); }
.ai-tab.is-on { background: var(--ai-bg); color: var(--ai-text); box-shadow: 0 1px 3px rgb(0 0 0 / .2), 0 0 0 1px var(--ai-line); }
.ai-body { position: relative; height: 580px; }
.ai-user {
  position: absolute;
  top: 28px;
  right: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.ai-file,
.ai-chip { display: flex; align-items: center; gap: 12px; border-radius: 14px; background: var(--ai-soft); }
.ai-file { padding: 10px 18px 10px 10px; }
.ai-file-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 46px;
  border-radius: 8px;
  background: #e5484d;
  color: #fff;
  font: 800 11px/1 var(--font);
  letter-spacing: .04em;
}
.ai-file-tx b { display: block; font: 600 16px/1.3 var(--font); }
.ai-file-tx small { display: block; color: var(--ai-text-2); font-size: 14px; }
.ai-bubble { padding: 12px 18px; border-radius: 18px; background: var(--ai-soft); white-space: nowrap; }
.ai-typing { position: absolute; left: 34px; top: 204px; display: flex; gap: 7px; }
.ai-typing i { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--ai-text-2); }
.ai-answer { position: absolute; left: 30px; right: 30px; top: 192px; }
.ai-h { display: flex; align-items: center; gap: 10px; font: 700 22px/1.3 var(--font-display); letter-spacing: -.02em; }
.ai-h svg { flex: none; width: 24px; height: 24px; color: var(--accent); fill: none; }
.ai-note { margin: 6px 0 12px; color: var(--ai-text-2); font-size: 16px; line-height: 1.4; }
.ai-row { display: grid; gap: 4px; padding: 11px 0; border-top: 1px solid var(--ai-line); }
.ai-tc { color: var(--ai-accent); font: 500 15px/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.ai-row--mark .ai-tc { color: var(--ai-mark); }
.ai-tx { font-size: 18px; line-height: 1.4; }
.ai-composer {
  position: relative;
  height: 118px;
  margin: 0 22px 22px;
  border-radius: 20px;
  background: var(--ai-bar);
  box-shadow: inset 0 0 0 1px var(--ai-line);
}
.ai-chip {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 6px 14px 6px 6px;
  font: 600 15px/1 var(--font);
}
.ai-chip .ai-file-ic { width: 30px; height: 36px; border-radius: 6px; font-size: 9px; }
.ai-input { position: absolute; left: 20px; right: 76px; top: 18px; line-height: 1.4; white-space: nowrap; }
.ai-ph { position: absolute; left: 0; top: 0; color: var(--ai-text-2); }
.ai-caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -3px; background: var(--accent); }
.ai-send {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
}
.ai-send svg { width: 20px; height: 20px; }

/* The rough cut on an editing timeline, dark as editing apps are */
.nle {
  --pps: 84px;                         /* timeline pixels per second */
  width: 1180px;
  height: 330px;
  overflow: hidden;
  border-radius: 22px;
  background: #18191d;
  color: #e9ebf0;
  font: 500 14px/1 var(--font);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 50px 100px -40px rgb(0 0 0 / .7);
}
:root[data-theme="light"] .nle { box-shadow: 0 0 0 1px rgb(0 0 0 / .12), 0 50px 100px -40px rgb(20 40 80 / .4); }
.canvas[data-layout="stacked"] .nle { --pps: 56px; width: 800px; }
.nle > * { position: absolute; }
.nle-bar {
  --ai-dot: rgb(255 255 255 / .18);
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 56px;
  padding: 0 20px;
  border-bottom: 1px solid rgb(255 255 255 / .07);
  background: #202227;
}
.nle-title { display: flex; align-items: baseline; gap: 12px; color: rgb(233 235 240 / .55); font: 500 16px/1 var(--font); }
.nle-title b { color: #e9ebf0; font-weight: 600; }
.nle-ruler {
  left: 96px;
  right: 0;
  top: 56px;
  height: 40px;
  border-bottom: 1px solid rgb(255 255 255 / .07);
  background: repeating-linear-gradient(90deg, rgb(255 255 255 / .2) 0 1px, transparent 1px calc(var(--pps) / 2)) 0 100% / 100% 8px no-repeat;
}
.nle-ruler span { position: absolute; top: 8px; left: calc(var(--at) * var(--pps) + 6px); color: rgb(233 235 240 / .5); font: 500 12px/1 var(--mono); }
.nle-heads { left: 0; top: 56px; bottom: 0; width: 96px; border-right: 1px solid rgb(255 255 255 / .07); background: #1d1f23; }
.nle-heads span { position: absolute; left: 0; width: 100%; text-align: center; color: rgb(233 235 240 / .6); font: 700 14px/1 var(--font); }
.nle-hv { top: 95px; }
.nle-ha { top: 199px; }
.nle-lane { left: 96px; right: 0; }
.nle-lane--v { top: 106px; height: 104px; }
.nle-lane--a { top: 220px; height: 84px; }
.nle-clip,
.nle-wav {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--in) * var(--pps) + 2px);
  width: calc(var(--len) * var(--pps) - 4px);
  border-radius: 10px;
}
.nle-clip {
  padding: 12px 14px;
  overflow: hidden;
  background: linear-gradient(#4b74ba, #34599a);
  box-shadow: inset 0 0 0 1px rgb(200 220 255 / .3);
}
.nle-clip b { display: block; color: #fff; font: 600 15px/1.25 var(--font); }
.nle-clip small { display: block; margin-top: 8px; color: rgb(255 255 255 / .72); font: 500 12px/1 var(--mono); }
.nle-wav {
  transform-origin: 0 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60' preserveAspectRatio='none'%3E%3Cg fill='%2396e6be' fill-opacity='.85'%3E%3Crect x='1.3' y='21' width='2.4' height='18' rx='1.2'/%3E%3Crect x='6.3' y='15' width='2.4' height='30' rx='1.2'/%3E%3Crect x='11.3' y='8' width='2.4' height='44' rx='1.2'/%3E%3Crect x='16.3' y='17' width='2.4' height='26' rx='1.2'/%3E%3Crect x='21.3' y='4' width='2.4' height='52' rx='1.2'/%3E%3Crect x='26.3' y='12' width='2.4' height='36' rx='1.2'/%3E%3Crect x='31.3' y='19' width='2.4' height='22' rx='1.2'/%3E%3Crect x='36.3' y='10' width='2.4' height='40' rx='1.2'/%3E%3Crect x='41.3' y='2' width='2.4' height='56' rx='1.2'/%3E%3Crect x='46.3' y='13' width='2.4' height='34' rx='1.2'/%3E%3Crect x='51.3' y='20' width='2.4' height='20' rx='1.2'/%3E%3Crect x='56.3' y='7' width='2.4' height='46' rx='1.2'/%3E%3Crect x='61.3' y='15' width='2.4' height='30' rx='1.2'/%3E%3Crect x='66.3' y='5' width='2.4' height='50' rx='1.2'/%3E%3Crect x='71.3' y='18' width='2.4' height='24' rx='1.2'/%3E%3Crect x='76.3' y='11' width='2.4' height='38' rx='1.2'/%3E%3Crect x='81.3' y='3' width='2.4' height='54' rx='1.2'/%3E%3Crect x='86.3' y='16' width='2.4' height='28' rx='1.2'/%3E%3Crect x='91.3' y='9' width='2.4' height='42' rx='1.2'/%3E%3Crect x='96.3' y='20' width='2.4' height='20' rx='1.2'/%3E%3Crect x='101.3' y='12' width='2.4' height='36' rx='1.2'/%3E%3Crect x='106.3' y='6' width='2.4' height='48' rx='1.2'/%3E%3Crect x='111.3' y='17' width='2.4' height='26' rx='1.2'/%3E%3Crect x='116.3' y='14' width='2.4' height='32' rx='1.2'/%3E%3C/g%3E%3C/svg%3E") 0 50% / 120px 72% repeat-x, linear-gradient(#25594a, #1c463a);
  box-shadow: inset 0 0 0 1px rgb(150 230 190 / .25);
}
.nle-marker { left: calc(96px + var(--at) * var(--pps)); top: 76px; transform-origin: 0 100%; }
.nle-marker i { display: block; width: 14px; height: 20px; background: #f0a63a; clip-path: polygon(0 0, 100% 0, 100% 64%, 50% 100%, 0 64%); }
.nle-marker::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 20px;
  width: 2px;
  height: 208px;
  background: linear-gradient(rgb(240 166 58 / .95), rgb(240 166 58 / 0));
}
.nle-marker span {
  position: absolute;
  left: 14px;
  top: 104px;
  padding: 5px 9px;
  border-radius: 7px;
  background: #f0a63a;
  color: #2a1a05;
  font: 700 13px/1 var(--font);
  white-space: nowrap;
}
.nle-playhead { left: 96px; top: 56px; bottom: 14px; width: 2px; margin-left: -1px; background: #ff5a4e; }
.nle-playhead::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 0;
  width: 16px;
  height: 14px;
  background: #ff5a4e;
  clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%);
}

.cue {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: 12px;
  font: 700 12px/1 var(--font);
  letter-spacing: .08em;
}
.cue--action { color: #6a93d9; background: rgb(106 147 217 / .14); }
.cue--cut { color: #ff453a; background: rgb(255 69 58 / .14); }
.cue svg { width: 10px; height: 10px; fill: currentColor; color: inherit; }

/* Floating document */
.doc {
  z-index: 5;            /* flies in front of the phone */
  width: 128px;
  margin: -82px 0 0 -64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.doc-sheet {
  position: relative;
  width: 128px;
  height: 164px;
  padding: 38px 16px 0;
  border-radius: 10px;
  background: #fff;
  clip-path: polygon(0 0, 72% 0, 100% 22%, 100% 100%, 0 100%);
  box-shadow: 0 24px 50px -16px rgb(0 0 0 / .55);
}
.doc-sheet::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 28%;
  height: 22%;
  background: linear-gradient(225deg, transparent 50%, #d8dee8 50%);
  border-bottom-left-radius: 6px;
}
.doc-sheet i { display: block; height: 6px; margin-bottom: 8px; border-radius: 3px; background: #dfe3ea; }
.doc-sheet i:nth-child(2) { width: 80%; }
.doc-sheet i:nth-child(4) { width: 60%; }
.doc-badge {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 5px 8px;
  border-radius: 6px;
  background: #e5484d;
  color: #fff;
  font: 800 13px/1 var(--font);
  letter-spacing: .04em;
}

/* Shared-session connector */
.link { overflow: visible; max-width: none; }   /* the scene container has no width of its own */
.link line { stroke-linecap: round; }
.link .lk-glow { stroke: rgb(106 147 217 / .38); stroke-width: 14; }
.link .lk-core { stroke: #d6e6ff; stroke-width: 2.5; }
.link circle { fill: #e3eeff; stroke: rgb(106 147 217 / .55); stroke-width: 6; }

/* PDF report pages */
.page {
  width: 300px;
  height: 388px;
  margin: -194px 0 0 -150px;
  padding: 26px 24px;
  overflow: hidden;
  border-radius: 6px;
  background: #fff;
  color: #141414;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / .55), 0 0 0 1px rgb(0 0 0 / .06);
}
.page { --pdf: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.pg-brand { display: flex; align-items: center; gap: 8px; font: 700 8px/1 var(--pdf); letter-spacing: .04em; }
.pg-brand i { display: block; width: 24px; height: 4px; background: #6a93d9; }
.pg-kicker { margin: 16px 0 6px; font: 700 7.5px/1.2 var(--pdf); }
.pg-title { margin: 0 0 10px; font: 700 23px/1.05 var(--pdf); letter-spacing: -.01em; }
.pg-meta { font: 400 7.5px/1.7 var(--pdf); color: #333; }
.pg-h { margin: 14px 0 7px; font: 700 8.5px/1.2 var(--pdf); letter-spacing: .02em; }
.pg-h.pg-first { margin-top: 18px; }
.pg-line { height: 4px; margin: 0 0 6px; border-radius: 2px; background: #dde1e8; }
.pg-line.s { width: 72%; }
.pg-line.m { width: 86%; }
.pg-item { margin: 0 0 9px; font: 400 8px/1.45 var(--pdf); }
.pg-quote {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 6px;
  border-radius: 3px;
  background: rgb(106 147 217 / .16);
  color: #1d3f78;
  font: 400 7.5px/1.3 var(--pdf);
}
.pg-item mark { padding: 0 2px; border-radius: 2px; background: rgb(106 147 217 / .28); color: inherit; }
.pg-item s { color: #8a8f99; }
.pg-log { font: 400 7.5px/1.9 var(--mono); }
.pg-log b { color: #3f6cbe; font-weight: 500; margin-right: 6px; }
.pg-log .a { color: #3f6cbe; font-weight: 700; }
.pg-log .c { color: #d93a30; font-weight: 700; }
.pg-foot { position: absolute; left: 24px; bottom: 16px; font: 400 6.5px/1 var(--pdf); color: #555; }

/* ---------- Devices ---------- */

.phone, .ipad {
  padding: 12px;
  border-radius: 68px;
  background: linear-gradient(150deg, #50545d 0%, #262930 16%, #0e0f12 48%, #1c1f24 84%, #41454e 100%);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / .18),
    inset 0 0 0 6px #050607,
    0 0 0 1px rgb(0 0 0 / .55),
    0 44px 90px -28px rgb(0 0 0 / .8),
    0 0 100px -16px rgb(var(--accent-rgb) / .35);
}
.phone { width: 417px; height: 876px; margin: -438px 0 0 -208.5px; }
.ipad { width: 860px; height: 1220px; margin: -610px 0 0 -430px; padding: 20px; border-radius: 54px; }
:root[data-theme="light"] .phone,
:root[data-theme="light"] .ipad {
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / .2),
    inset 0 0 0 6px #050607,
    0 0 0 1px rgb(0 0 0 / .4),
    0 44px 90px -30px rgb(20 40 80 / .45),
    0 0 100px -20px rgb(var(--accent-rgb) / .4);
}
.screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 56px;
  clip-path: inset(0 round 56px);
  background: var(--ios-bg);
  isolation: isolate;
}
.ipad .screen { border-radius: 34px; clip-path: inset(0 round 34px); }
.island {
  position: absolute;
  z-index: 30;
  top: 11px;
  left: 50%;
  width: 122px;
  height: 36px;
  translate: -50% 0;
  border-radius: 18px;
  background: #000;
}
/* While recording, the Dynamic Island shows a live level meter */
.isl-rec { position: absolute; inset: 0 16px; display: flex; align-items: center; justify-content: space-between; }
.isl-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff453a; box-shadow: 0 0 8px rgb(255 69 58 / .8); }
.isl-bars { display: flex; align-items: center; gap: 2.5px; height: 18px; }
.isl-bars i { display: block; width: 2.5px; height: 18px; border-radius: 2px; background: #ff6b60; }

/* iOS semantic colors, dark by default */
.ios {
  --ios-bg: #0b0d11;               /* WrapSyncTheme.background */
  --ios-sys: #000;                 /* systemBackground */
  --ios-label: #fff;
  --ios-label-2: rgb(235 235 245 / .6);
  --ios-label-3: rgb(235 235 245 / .3);
  --ios-sep: rgb(84 84 88 / .6);
  --ios-card: rgb(255 255 255 / .055);
  --ios-section: #1c1c1e;          /* secondarySystemGroupedBackground */
  --ios-fill: rgb(120 120 128 / .32);
  --ios-alert: rgb(38 38 41 / .97);
  --ios-red: #ff453a;
  --ios-rim: rgb(255 255 255 / .32);
}
:root[data-theme="light"] .ios {
  --ios-bg: #f2f2f7;               /* systemGroupedBackground */
  --ios-sys: #fff;
  --ios-label: #000;
  --ios-label-2: rgb(60 60 67 / .6);
  --ios-label-3: rgb(60 60 67 / .3);
  --ios-sep: rgb(60 60 67 / .29);
  --ios-card: #fff;
  --ios-section: #f2f2f7;          /* secondarySystemBackground */
  --ios-fill: rgb(120 120 128 / .16);
  --ios-alert: rgb(250 250 252 / .97);
  --ios-red: #ff3b30;
  --ios-rim: rgb(255 255 255 / .9);
}

.scr {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--ios-bg);
  color: var(--ios-label);
  font: 400 17px/22px var(--font);
  letter-spacing: -.02em;
}
.scr > * { position: absolute; }

/* Status bar */
.sb { position: absolute; z-index: 25; left: 0; top: 0; width: 100%; height: 54px; color: var(--ios-label); }
.sb-time { position: absolute; left: 34px; top: 17px; width: 66px; text-align: center; font: 600 17px/22px var(--font); letter-spacing: -.02em; }
.sb-icons { position: absolute; right: 32px; top: 22px; display: flex; align-items: center; gap: 6px; }
.sb-icons svg { height: 12px; fill: currentColor; }
.sb-icons .b { height: 13px; }
.sb--ipad .sb-time { left: 26px; top: 12px; width: auto; font-size: 15px; text-align: left; }
.sb--ipad .sb-icons { right: 26px; top: 15px; }

/* Glass controls inside the app */
.tb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-width: 44px;
  padding: 0 14px;
  border-radius: 12px;
  color: #6a93d9;
  font: 400 17px/1 var(--font);
  background:
    linear-gradient(to bottom right, rgb(var(--accent-rgb) / .1), transparent 50%, rgb(var(--accent-rgb) / .04)),
    var(--ios-section);
  box-shadow: 0 0 10px rgb(var(--accent-rgb) / .07);
}
.tb::after,
.gcard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(to bottom right, var(--ios-rim), rgb(var(--accent-rgb) / .16), rgb(var(--accent-rgb) / .3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.tb svg { width: 24px; height: 24px; }
.gbtn {
  --c: var(--accent-rgb);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  color: #fff;
  font: 600 17px/1.2 var(--font);
  letter-spacing: .02em;
  background:
    linear-gradient(to bottom right, rgb(var(--c) / .65), rgb(var(--c) / .2), rgb(var(--c) / .4)),
    #090e17;
  box-shadow: 0 0 20px rgb(var(--c) / .5);
}
.gbtn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.2px;
  background: linear-gradient(to bottom right, rgb(255 255 255 / .9), rgb(var(--c) / .3), rgb(var(--c) / .95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.gbtn--2 {
  background:
    linear-gradient(to bottom right, rgb(var(--c) / .3), rgb(var(--c) / .1), rgb(var(--c) / .2)),
    #090e17;
  box-shadow: 0 0 12px rgb(var(--c) / .18);
}
.gbtn--2::after { background: linear-gradient(to bottom right, rgb(255 255 255 / .5), rgb(var(--c) / .3), rgb(var(--c) / .6)); }
.gbtn--red { --c: 255 69 58; }
.gbtn svg { width: 18px; height: 18px; fill: currentColor; }
.gcard {
  border-radius: 12px;
  background:
    linear-gradient(to bottom right, rgb(var(--accent-rgb) / .1), transparent 55%, rgb(var(--accent-rgb) / .04)),
    var(--ios-card);
  box-shadow: 0 0 10px rgb(var(--accent-rgb) / .07);
}
.tap {
  position: absolute;
  z-index: 40;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(170 180 200 / .55) 0%, rgb(170 180 200 / .3) 62%, rgb(170 180 200 / 0) 72%);
  box-shadow: 0 0 0 1.5px rgb(255 255 255 / .7);
  opacity: 0;
}
.dim { position: absolute; inset: 0; z-index: 20; background: rgb(0 0 0 / .4); opacity: 0; }

/* Screen header, used by the recording screen */
.hm-word {
  left: 0;
  top: 56px;
  width: 100%;
  text-align: center;
  font: 700 35px/44px var(--font-display);
  letter-spacing: -.5px;
}
.hm-settings { right: 16px; top: 56px; padding: 0; width: 46px; }
.hm-settings svg { width: 26px; height: 26px; }

/* Add a script */
.sc-back { left: 16px; top: 56px; }
.sc-title { left: 24px; top: 116px; font: 700 34px/41px var(--font-display); letter-spacing: .01em; }
.sc-desc { left: 24px; top: 168px; width: 345px; color: var(--ios-label-2); }
.sc-upload { left: 24px; top: 256px; width: 345px; height: 52px; }
.sc-upload svg { fill: none; stroke: currentColor; }
.sc-file { left: 24px; top: 256px; width: 345px; padding: 18px; }
.sc-file > * { position: relative; }
.sc-file-head { display: flex; align-items: center; gap: 10px; font: 600 17px/22px var(--font); }
.sc-file-head svg { width: 22px; height: 22px; fill: none; stroke: currentColor; }
.sc-file-text { margin-top: 10px; color: var(--ios-label-2); font: 400 15px/20px var(--font); }
.sc-file-text span { display: block; }
.sc-link { margin-top: 12px; color: #6a93d9; font: 400 17px/22px var(--font); }
.sc-red { margin-top: 10px; color: var(--ios-red); }
.sc-continue { left: 24px; top: 470px; width: 345px; height: 52px; }
.sc-foot { left: 24px; top: 324px; width: 345px; color: var(--ios-label-2); font: 400 12px/16px var(--font); letter-spacing: 0; }
.sc-join { left: 0; top: 392px; width: 100%; text-align: center; color: #6a93d9; font: 400 15px/20px var(--font); }

/* Teleprompter */
.pr-done { left: 16px; top: 56px; }
.pr-more { right: 22px; top: 66px; color: #6a93d9; }
.pr-more svg { width: 28px; height: 24px; fill: currentColor; }
.pr-head { left: 16px; top: 114px; width: 361px; display: flex; align-items: baseline; justify-content: space-between; }
.pr-title { font: 600 17px/22px var(--font); }
.pr-cap { position: relative; font: 400 12px/16px var(--font); letter-spacing: 0; color: var(--ios-label-2); }
.pr-cap span:last-child { position: absolute; right: 0; top: 0; white-space: nowrap; }
.reader { overflow: hidden; border-radius: 12px; background: #000; }
.pr-reader { left: 16px; top: 146px; width: 361px; height: 494px; }
.reader-text {
  position: absolute;
  left: 56px;
  top: 0;
  width: 287px;
  color: #fff;
  font: 500 40px/50px var(--font-display);
  letter-spacing: -.01em;
}
.reader-text p { margin: 0 0 50px; }
.reader-shared { position: absolute; left: 56px; top: 0; width: 680px; transform-origin: 0 0; transform: scale(.42206); }
.reader-text--ipad { left: 0; width: 680px; font: 400 46px/58px var(--font-display); }
.reader-text--ipad p { margin: 0 0 58px; }
.marker { position: absolute; left: 6px; top: 50%; width: 20px; height: 22px; margin-top: -11px; }
.pr-transport { left: 16px; top: 658px; width: 361px; height: 46px; color: #6a93d9; }
.pr-transport > * { position: absolute; top: 0; }
.pr-ic { display: flex; align-items: center; height: 46px; }
.pr-ic svg { width: 26px; height: 22px; fill: currentColor; }
.pr-ic.a { left: 0; } .pr-ic.b { left: 38px; } .pr-ic.c { right: 38px; } .pr-ic.d { right: 0; }
.pr-play { left: 132px; width: 98px; height: 46px; font-weight: 400; letter-spacing: 0; }
.pr-play > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; }
.pr-speed { left: 16px; top: 724px; width: 361px; height: 30px; display: flex; align-items: center; gap: 12px; font: 400 12px/16px var(--font); letter-spacing: 0; }
.pr-speed > * { position: relative; }
.slider { flex: 1; height: 30px; }
.slider::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 4px; border-radius: 2px; background: var(--ios-fill); }
.slider-fill { position: absolute; left: 0; top: 13px; width: 100%; height: 4px; border-radius: 2px; background: #6a93d9; transform-origin: 0 50%; transform: scaleX(.34); }
.slider-thumb { position: absolute; left: 0; top: 1px; width: 40px; height: 28px; margin-left: -20px; border-radius: 14px; background: #fff; box-shadow: 0 2px 8px rgb(0 0 0 / .25), 0 0 0 .5px rgb(0 0 0 / .04); }
.pr-val { width: 22px; text-align: right; font-variant-numeric: tabular-nums; }
.pr-display { left: 16px; top: 770px; width: 361px; display: flex; justify-content: space-between; align-items: center; color: #6a93d9; }
.pr-display svg { width: 16px; height: 16px; color: var(--ios-label); }

/* Alert */
.alert {
  position: absolute;
  z-index: 21;
  left: 46px;
  top: 314px;
  width: 301px;
  padding: 22px 16px 16px;
  border-radius: 30px;
  background: var(--ios-alert);
  box-shadow: 0 20px 50px rgb(0 0 0 / .35);
  opacity: 0;
}
.alert > * { position: relative; }
.al-title { padding: 0 6px; font: 600 17px/22px var(--font); }
.al-body { margin-top: 6px; padding: 0 6px; color: var(--ios-label-2); font: 400 15px/20px var(--font); }
.al-btns { display: flex; gap: 10px; margin-top: 18px; }
.al-btn {
  position: relative;
  flex: 1;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  background: var(--ios-fill);
  font: 500 17px/1 var(--font);
}
.al-accept { color: #6a93d9; font-weight: 600; }

/* New shoot */
.su-back { left: 16px; top: 56px; }
.su-card { left: 24px; top: 116px; width: 345px; padding: 22px; }
.su-card > * { position: relative; }
.su-kicker { color: var(--ios-label-2); font: 700 12px/16px var(--font); letter-spacing: 2px; }
.su-title { margin-top: 16px; font: 500 22px/28px var(--font); letter-spacing: -.01em; }
.su-rule { height: .5px; margin: 16px 0; background: var(--ios-sep); }
.su-row { display: flex; align-items: center; justify-content: space-between; }
.su-rate { display: flex; align-items: center; gap: 4px; color: #6a93d9; }
.su-rate svg { width: 14px; height: 14px; }
.su-scan { left: 24px; top: 304px; width: 345px; height: 52px; letter-spacing: 0; }
.su-scan svg { width: 20px; height: 20px; fill: none; }
.su-link { left: 0; width: 100%; color: #6a93d9; text-align: center; }
.su-prompt { top: 380px; }
.su-manual { top: 420px; font: 400 15px/20px var(--font); }

/* Scan timecode: the camera finds a running clock and the frame locks green */
.sn-cancel { left: 16px; top: 56px; }
.sn-title { left: 0; top: 66px; width: 100%; text-align: center; font: 600 17px/22px var(--font); }
.sn-preview { left: 16px; top: 112px; width: 361px; height: 352px; overflow: hidden; border-radius: 12px; background: #0c0d10; }
.sn-preview > * { position: absolute; }
.sn-feed {
  inset: -24px;
  background:
    radial-gradient(50% 40% at 26% 30%, rgb(255 196 120 / .22), transparent 70%),
    radial-gradient(45% 50% at 80% 75%, rgb(110 150 220 / .2), transparent 70%),
    linear-gradient(160deg, #1d2027, #0b0c0f 60%);
}
.sn-lcd {
  left: 50%;
  top: 50%;
  width: 288px;
  height: 112px;
  margin: -56px 0 0 -144px;
  padding: 14px 20px;
  border-radius: 14px;
  background: #08090b;
  box-shadow: inset 0 0 0 6px #23262d, inset 0 0 0 7px rgb(255 255 255 / .06), 0 20px 40px -10px rgb(0 0 0 / .8);
  rotate: -2deg;
}
.sn-lcd-top { display: flex; justify-content: space-between; color: rgb(200 210 225 / .6); font: 600 11px/1 var(--font); letter-spacing: .12em; }
.sn-lcd-tc { margin-top: 10px; color: #eaf2ff; font: 600 40px/48px var(--mono); letter-spacing: -.01em; font-variant-numeric: tabular-nums; text-shadow: 0 0 12px rgb(170 200 255 / .55); }
.sn-frame { left: 24px; top: 136px; width: 313px; height: 80px; overflow: hidden; border-radius: 12px; box-shadow: inset 0 0 0 2px #6a93d9; }
.sn-sweep { position: absolute; left: 0; top: 0; width: 94px; height: 100%; background: linear-gradient(90deg, transparent, rgb(106 147 217 / .32), transparent); }
.sn-ok { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px #34c759, inset 0 0 22px rgb(52 199 89 / .3); }
.sn-status { left: 24px; top: 486px; width: 345px; height: 44px; color: var(--ios-label-2); text-align: center; }
.sn-status span { position: absolute; left: 0; right: 0; top: 0; }
.sn-tc { left: 0; top: 540px; width: 100%; text-align: center; font: 600 36px/44px var(--mono); font-variant-numeric: tabular-nums; }
.sn-use { left: 24px; top: 604px; width: 345px; height: 52px; letter-spacing: 0; }
.sn-note { left: 24px; top: 676px; width: 345px; color: var(--ios-label-2); text-align: center; font: 400 12px/16px var(--font); letter-spacing: 0; }

/* Recording */
.rc-word { font-size: 30px; }
.rc-status { left: 24px; top: 114px; display: flex; align-items: center; gap: 6px; color: var(--ios-red); font: 700 12px/16px var(--font); letter-spacing: 2px; }
.rc-status svg { width: 14px; height: 14px; fill: currentColor; }
.rc-title { left: 24px; top: 138px; font: 700 34px/41px var(--font-display); letter-spacing: .01em; }
.rc-tc { left: 24px; top: 190px; font: 500 46px/54px var(--mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rc-fps { left: 24px; top: 252px; color: var(--ios-label-2); }
.rc-counts { left: 24px; top: 286px; display: flex; gap: 24px; font: 400 12px/16px var(--font); letter-spacing: 0; color: var(--ios-label); }
.rc-counts span { display: flex; align-items: center; gap: 6px; }
.rc-counts svg { width: 14px; height: 14px; color: #6a93d9; fill: none; stroke: currentColor; }
.rc-info { left: 24px; top: 312px; width: 345px; color: var(--ios-label-2); font: 400 15px/20px var(--font); }
.rc-log { left: 24px; top: 368px; width: 345px; height: 214px; overflow: hidden; }
.rc-log-inner { position: absolute; left: 16px; right: 16px; top: 16px; }
.log-e { position: relative; margin: 0 0 18px; }
.log-tc { display: block; color: #6a93d9; font: 400 12px/16px var(--mono); }
.log-tx { display: block; margin-top: 3px; font: 400 17px/22px var(--font); }
.log-row { display: flex; align-items: center; justify-content: space-between; }
.log-cue { margin-top: 4px; color: var(--ios-label-2); font: 400 15px/20px var(--font); }
.rc-btns { left: 24px; top: 600px; width: 345px; height: 56px; display: flex; gap: 12px; }
.rc-btns > * { position: relative; flex: 1; height: 56px; }
.rc-wrap { letter-spacing: 3px; }
.rc-foot { left: 24px; top: 674px; width: 345px; color: var(--ios-label-2); font: 400 12px/16px var(--font); letter-spacing: 0; }

/* Session detail */
.scr-detail { background: var(--ios-sys); }
.dt-grab { left: 50%; top: 62px; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--ios-label-3); }
.dt-back { left: 16px; top: 80px; width: 44px; height: 44px; padding: 0; border-radius: 22px; color: var(--ios-label); }
.dt-back svg { width: 20px; height: 20px; }
.dt-title { left: 0; top: 90px; width: 100%; text-align: center; font: 600 17px/22px var(--font); }
.dt-h { left: 16px; color: var(--ios-label-2); font: 600 20px/25px var(--font); }
.dt-h1 { top: 150px; }
.dt-h2 { top: 432px; }
.dt-card { left: 16px; top: 184px; width: 361px; padding: 0 16px; }
.dt-card > * { position: relative; }
.dt-row { display: flex; justify-content: space-between; align-items: center; height: 52px; border-bottom: .5px solid var(--ios-sep); }
.dt-v { color: var(--ios-label-2); font-variant-numeric: tabular-nums; }
.dt-export { justify-content: flex-start; gap: 14px; height: 54px; border: 0; color: #6a93d9; }
.dt-export svg { width: 24px; height: 24px; fill: none; stroke: currentColor; }
.dt-status { height: 36px; color: var(--ios-label-2); font: 400 13px/18px var(--font); letter-spacing: 0; }
.dt-status span { position: absolute; left: 0; top: 0; }
.dt-prog { height: 4px; margin-bottom: 18px; border-radius: 2px; background: var(--ios-fill); overflow: hidden; }
.dt-prog i { position: absolute; inset: 0; border-radius: inherit; background: #6a93d9; transform-origin: 0 50%; transform: scaleX(0); }
.dt-log { left: 16px; top: 466px; width: 361px; padding: 16px; }
.dt-log > * { position: relative; }

/* iPad: join */
.ip-title { left: 0; top: 64px; width: 100%; text-align: center; font: 600 17px/22px var(--font); }
.ip-done { right: 20px; top: 52px; }
.ip-h { left: 130px; top: 148px; color: var(--ios-label-2); font: 600 20px/25px var(--font); }
.ip-row { left: 130px; top: 184px; width: 560px; height: 84px; }
.ip-row > * { position: absolute; }
.ip-row-ic { left: 18px; top: 22px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: rgb(var(--accent-rgb) / .14); color: #6a93d9; }
.ip-row-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; }
.ip-row-tx { left: 74px; top: 18px; display: flex; flex-direction: column; gap: 2px; }
.ip-row-tx b { font: 600 17px/22px var(--font); }
.ip-row-tx small { color: var(--ios-label-2); font: 400 15px/20px var(--font); }
.ip-connect { right: 16px; top: 19px; width: 112px; height: 46px; font-weight: 600; letter-spacing: 0; }
.ip-connecting { right: 20px; top: 32px; color: var(--ios-label-2); font: 400 15px/20px var(--font); opacity: 0; }
.ip-foot { left: 130px; top: 280px; width: 560px; color: var(--ios-label-2); font: 400 13px/18px var(--font); letter-spacing: 0; }

/* iPad: teleprompter */
.ip-pdone { left: 20px; top: 52px; }
.ip-more { right: 26px; top: 62px; color: #6a93d9; }
.ip-more svg { width: 30px; height: 24px; fill: currentColor; }
.ip-head { left: 20px; top: 118px; width: 780px; display: flex; justify-content: space-between; align-items: baseline; }
.ip-head b { font: 600 17px/22px var(--font); }
.ip-head small { color: var(--ios-label-2); font: 400 12px/16px var(--font); letter-spacing: 0; }
.ip-reader { left: 20px; top: 150px; width: 780px; height: 858px; }
.ip-reader .reader-text--ipad { left: 72px; }
.ip-transport { left: 20px; top: 1024px; width: 780px; height: 46px; color: #6a93d9; }
.ip-transport > * { position: absolute; top: 0; }
.ip-transport .pr-play { left: 341px; }
.ip-speed { left: 20px; top: 1086px; width: 780px; height: 30px; display: flex; align-items: center; gap: 12px; font: 400 12px/16px var(--font); letter-spacing: 0; }
.ip-speed > * { position: relative; }
.ip-display { left: 20px; top: 1132px; width: 780px; display: flex; justify-content: space-between; align-items: center; color: #6a93d9; }
.ip-display svg { width: 16px; height: 16px; color: var(--ios-label); }

/* ---------- Sections ---------- */

.section { position: relative; padding: clamp(72px, 11vw, 140px) 0; }
.section-head { max-width: 760px; margin: 0 auto clamp(40px, 6vw, 64px); text-align: center; }
.section-head h2 {
  font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -.035em;
}
.section-lede {
  max-width: 36em;
  margin: 20px auto 0;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  line-height: 1.5;
  color: var(--text-2);
}

/* Features bento */
.features::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 70%;
  background: radial-gradient(50% 60% at 50% 0%, var(--halo), transparent 70%);
  pointer-events: none;
}
.bento {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}
.card {
  overflow: hidden;
  padding: clamp(24px, 3vw, 34px);
  border-radius: 26px;
}
.card h3 { font-size: 1.375rem; line-height: 1.2; letter-spacing: -.02em; }
.card p { margin-top: 10px; color: var(--text-2); font-size: 1rem; line-height: 1.55; }
.card > * { position: relative; }
.card-a { grid-column: span 4; display: grid; grid-template-columns: 1fr minmax(180px, 250px); gap: 28px; align-items: start; padding-bottom: 0; }
.card-b { grid-column: span 2; display: flex; flex-direction: column; }
.card-c { grid-column: span 2; }
.card-d { grid-column: span 4; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
.card-e { grid-column: span 3; }
.card-f { grid-column: span 3; }
.card-copy { align-self: center; padding-bottom: clamp(24px, 3vw, 34px); }
.shot-phone {
  margin: 0;
  align-self: end;
  overflow: hidden;
  height: 320px;
  border-radius: 34px 34px 0 0;
  border: 6px solid #15171c;
  border-bottom: 0;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 0 60px -10px rgb(var(--accent-rgb) / .35);
}
.shot-phone img { width: 100%; height: auto; }
.shot-ipad {
  margin: 0 0 24px;
  overflow: hidden;
  height: 220px;
  border-radius: 18px;
  border: 5px solid #15171c;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 0 50px -10px rgb(var(--accent-rgb) / .3);
}
.shot-ipad img { width: 100%; height: auto; margin-top: -8%; }
.tc-demo { margin-bottom: 26px; }
.tc-big { font: 500 clamp(2rem, 1.4rem + 1.6vw, 2.6rem)/1.1 var(--mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tc-meta { margin-top: 6px; color: var(--text-3); font-size: .875rem; }
.tc-cues { display: flex; gap: 8px; margin-top: 14px; }
.mini-pages { position: relative; height: 230px; }
.mini-pages .page {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  transform-origin: 50% 50%;
}
.mini-pages .page:nth-child(1) { transform: translate(-78%, -50%) rotate(-6deg) scale(.56); }
.mini-pages .page:nth-child(2) { transform: translate(-28%, -48%) rotate(4deg) scale(.56); }
.card-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 12px;
  color: var(--accent);
  background: rgb(var(--accent-rgb) / .12);
  box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / .25);
}
.card-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; }

@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .card-a, .card-d { grid-column: span 2; }
  .card-b, .card-c, .card-e, .card-f { grid-column: span 1; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; gap: 14px; }
  .card-a, .card-b, .card-c, .card-d, .card-e, .card-f { grid-column: auto; }
  .card-a, .card-d { grid-template-columns: 1fr; }
  .card-a { gap: 4px; }
  .card-copy { padding-bottom: 0; }
  .shot-phone { width: min(260px, 82%); margin: 18px auto 0; height: 290px; }
  .mini-pages { height: 190px; }
  .mini-pages .page:nth-child(1) { transform: translate(-70%, -50%) rotate(-6deg) scale(.44); }
  .mini-pages .page:nth-child(2) { transform: translate(-30%, -48%) rotate(4deg) scale(.44); }
}

/* Modes */
.modes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.mode { padding: 28px; border-radius: 26px; }
.mode > * { position: relative; }
.mode-name {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 84px;
  padding: 0 18px;
  border-radius: var(--radius);
  text-align: center;
  font: 600 1.0625rem/1.25 var(--font);
  color: #fff;
  background:
    linear-gradient(to bottom right, rgb(var(--accent-rgb) / .5), rgb(var(--accent-rgb) / .14), rgb(var(--accent-rgb) / .3)),
    #090e17;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18), 0 0 16px rgb(var(--accent-rgb) / .25);
}
.mode p { margin-top: 18px; color: var(--text-2); font-size: 1rem; line-height: 1.55; }
.mode ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.mode li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 15px;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--accent-soft);
  background: rgb(var(--accent-rgb) / .12);
}
.mode li svg { width: 14px; height: 14px; fill: none; stroke: currentColor; }
@media (max-width: 860px) {
  .modes-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}

/* Privacy */
.privacy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(45% 60% at 85% 40%, var(--halo-2), transparent 70%);
  pointer-events: none;
}
.privacy-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); }
.privacy-grid article { border-top: 1px solid var(--line); padding-top: 26px; }
.privacy-grid h3 { font-size: 1.25rem; letter-spacing: -.02em; }
.privacy-grid p { margin-top: 10px; color: var(--text-2); font-size: 1rem; line-height: 1.55; }
.privacy-grid .card-icon { margin-bottom: 20px; }
.fine {
  position: relative;
  max-width: 62em;
  margin: clamp(40px, 6vw, 64px) auto 0;
  color: var(--text-3);
  font-size: .8125rem;
  line-height: 1.55;
  letter-spacing: 0;
  text-align: center;
}
@media (max-width: 860px) {
  .privacy-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
}

/* Final call to action: a rounded stage that echoes the hero */
.cta { text-align: center; }
.cta-card {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: clamp(56px, 9vw, 112px) clamp(20px, 5vw, 64px);
  border-radius: clamp(28px, 5vw, 64px);
  background:
    radial-gradient(60% 65% at 50% 26%, rgb(var(--accent-rgb) / .3), transparent 70%),
    radial-gradient(70% 50% at 50% 115%, var(--stage-horizon), transparent 70%),
    var(--stage-bg);
}
.cta-icon {
  width: 128px;
  height: 128px;
  margin: 0 auto 34px;
  border-radius: 22.4%;
  box-shadow: 0 0 80px rgb(var(--accent-rgb) / .45), 0 0 0 1px rgb(255 255 255 / .08);
}
.cta h2 {
  font-size: clamp(2.4rem, 1.2rem + 5vw, 4.75rem);
  line-height: 1;
  letter-spacing: -.04em;
}
.cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 40px;
}
.qr {
  display: none;
  align-items: center;
  gap: 16px;
  padding: 12px 18px 12px 12px;
  border-radius: 18px;
  text-align: left;
}
.qr > * { position: relative; }
.qr-code { width: 92px; height: 92px; padding: 7px; border-radius: 10px; background: #fff; }
.qr-code svg { width: 100%; height: 100%; }
.qr p { max-width: 13em; color: var(--text-2); font-size: .875rem; line-height: 1.45; letter-spacing: 0; }
/* Offer the QR code only where a camera hand-off makes sense */
@media (hover: hover) and (pointer: fine) and (min-width: 720px) {
  .qr { display: flex; }
}

/* Footer */
.footer { padding: 40px 0 56px; border-top: 1px solid var(--line); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; }
.footer nav { display: flex; gap: 24px; margin-left: auto; }
.footer nav a { color: var(--text-2); text-decoration: none; font-size: .9375rem; padding: 8px 0; }
.footer nav a:hover { color: var(--text); }
.legal { flex-basis: 100%; color: var(--text-3); font-size: .8125rem; line-height: 1.55; letter-spacing: 0; }
@media (max-width: 560px) {
  .footer nav { flex-basis: 100%; margin-left: 0; }
}

/* ---------- Support and privacy pages ---------- */

.subpage {
  position: relative;
  padding: calc(var(--nav-top) + var(--nav-h) + clamp(40px, 7vw, 88px)) 0 clamp(72px, 10vw, 120px);
}
.subpage::before {
  content: "";
  position: absolute;
  inset: -64px 0 auto;
  height: 640px;
  background: radial-gradient(60% 70% at 8% 0%, var(--halo), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.subpage .wrap { max-width: 820px; }
.subpage-head { margin-bottom: clamp(32px, 5vw, 48px); }
.subpage h1 {
  font-size: clamp(2.5rem, 1.6rem + 3.8vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -.04em;
}
.subpage .intro {
  max-width: 34em;
  margin-top: 18px;
  color: var(--text-2);
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  line-height: 1.5;
}
.section-title {
  margin: clamp(44px, 6vw, 64px) 0 18px;
  font-size: 1.5rem;
  letter-spacing: -.02em;
}
.page-meta { margin-top: 32px; color: var(--text-3); font-size: .875rem; letter-spacing: 0; }
.path { color: var(--path); }

.contact-card { padding: clamp(24px, 4vw, 34px); border-radius: 24px; }
.contact-card > * { position: relative; }
.contact-card h2 { font-size: 1.375rem; letter-spacing: -.02em; }
.contact-card p { margin-top: 10px; color: var(--text-2); }
.contact-card strong { color: var(--text); font-weight: 600; }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 22px 0 6px; }
.contact-email { font-size: .9375rem; overflow-wrap: anywhere; }

/* Questions, grouped like the app's glass lists */
.faq { overflow: hidden; border-radius: 24px; }
.faq details { position: relative; }
.faq details + details { border-top: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 18px 24px;
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline-offset: -4px; border-radius: 20px; }
.faq summary:active { background: var(--press); }
.faq summary svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--accent);
  transition: transform 320ms var(--spring);
}
.faq details[open] summary svg { transform: rotate(90deg); }
.faq .answer { padding: 0 24px 22px; color: var(--text-2); }
.faq .answer p + p { margin-top: 10px; }
.faq .answer strong { color: var(--text); font-weight: 600; }
.faq .answer ol { margin: 0 0 12px; padding-left: 1.3rem; }
.faq .answer li + li { margin-top: 6px; }
/* Opening a question eases the content in where the browser supports it */
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content {
    height: 0;
    overflow: clip;
    transition: height 360ms var(--spring), content-visibility 360ms allow-discrete;
  }
  .faq details[open]::details-content { height: auto; }
}

/* Policy text */
.policy { color: var(--text-2); }
.policy h2 {
  margin: clamp(36px, 5vw, 48px) 0 4px;
  color: var(--text);
  font-size: 1.375rem;
  letter-spacing: -.02em;
}
.policy p { margin-top: 12px; line-height: 1.65; }
.policy .policy-lede { margin-top: 0; color: var(--text); font-size: clamp(1.125rem, 1.05rem + .3vw, 1.3125rem); line-height: 1.5; }
.updated { margin-top: 14px; color: var(--text-3); font-size: .9375rem; letter-spacing: 0; }
.footer nav a[aria-current="page"] { color: var(--text); }

/* Scroll reveal */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--spring), transform 900ms var(--spring);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Accessibility preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  .js .reveal { transform: none; transition: opacity 300ms ease; }
  .btn, .hero-pause, .theme-toggle, .theme-toggle svg { transition: opacity 150ms ease, box-shadow 150ms ease; }
  .btn:active, .hero-pause:active { transform: none; }
  .theme-toggle:active { transform: none; }
  .hero-copy > *, .stage { animation-name: fade-in; animation-duration: 400ms; }
  .hero-curves .spark { display: none; }
  .hero-bg::before, .hero-bg::after { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav-bar, .theme-toggle, .hero-pause { background: var(--nav-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .glass { background: var(--card-solid); }
}
@media (prefers-contrast: more) {
  :root { --text-2: #dce5f4; --text-3: #c3cee0; --line: #8ca7cc; }
  :root[data-theme="light"] { --text-2: #2a2f3a; --text-3: #3d4350; --line: #5b6b85; }
  .glass { background: var(--card-solid); }
  .glass::after, .btn::after { padding: 2px; }
}