@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-var.woff2") format("woff2");
}

:root {
  --primary-50: #F0F7F7;
  --primary-100: #E1EFEF;
  --primary-200: #C3E0E0;
  --primary-300: #A4D1D0;
  --primary-400: #88C2C0;
  --primary-500: #6BB2B1;
  --primary-600: #518E8D;
  --primary-700: #3D6B6A;
  --primary-800: #294847;
  --primary-900: #152424;
  --primary-950: #0A1212;

  /* Candlelight: only ever a glow, never text or a fill behind text. */
  --warm: #F2C894;

  --night: #0A1212;
  --night-2: #0F1B1B;
  --on-night: #EEF6F6;
  --on-night-muted: #B8CDCC;

  --bg: #FBFDFD;
  --bg-soft: var(--primary-50);
  --surface: #FFFFFF;
  --text: var(--primary-900);
  --text-muted: #4B5452;
  --accent-text: var(--primary-700);
  --line: rgb(21 36 36 / 0.1);
  --card-shadow: 0 1px 2px rgb(21 36 36 / 0.04), 0 12px 32px -12px rgb(21 36 36 / 0.16);

  --radius: 24px;
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0C1515;
    --bg-soft: #101C1C;
    --surface: #132020;
    --text: #EEF6F6;
    --text-muted: #A9C2C1;
    --accent-text: var(--primary-300);
    --line: rgb(238 246 246 / 0.1);
    --card-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 18px 40px -18px rgb(0 0 0 / 0.7);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  padding: 0.1em 0.4em;
  border-radius: 6px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
}

:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 3px;
  border-radius: 8px;
}

.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-link {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 999px;
  background: var(--primary-700); color: #fff; text-decoration: none; font-weight: 500;
  transition: top 0.2s;
}
.skip-link:focus { top: 16px; }

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left));
}
.container--narrow { max-width: 860px; }

/* ---------- Buttons: low pills, 36–44px ---------- */

.btn {
  --h: 44px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--h);
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 500 0.9375rem/1 var(--font);
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.3s, transform 0.2s var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn--sm { --h: 36px; padding: 0 16px; font-size: 0.875rem; }

.btn--primary { background: var(--primary-700); color: #fff; }
.btn--primary:hover { background: var(--primary-800); }

.btn--glow {
  box-shadow: 0 0 0 1px rgb(164 209 208 / 0.35), 0 8px 30px -6px rgb(107 178 177 / 0.6);
}
.btn--glow:hover {
  box-shadow: 0 0 0 1px rgb(164 209 208 / 0.6), 0 10px 44px -4px rgb(107 178 177 / 0.85);
}

.btn--ghost {
  color: var(--on-night);
  border-color: rgb(238 246 246 / 0.28);
  background: rgb(238 246 246 / 0.04);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover { border-color: rgb(238 246 246 / 0.6); background: rgb(238 246 246 / 0.1); }

.btn--outline { color: var(--accent-text); border-color: currentColor; background: transparent; }
.btn--outline:hover { background: color-mix(in srgb, var(--accent-text) 10%, transparent); }

.btn__arrow { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ---------- Eyebrow ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.eyebrow--dark { color: var(--primary-300); }
.eyebrow__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary-300);
  box-shadow: 0 0 0 4px rgb(164 209 208 / 0.18), 0 0 14px var(--primary-300);
  animation: pulse-dot 2.4s ease-in-out infinite;
}

/* ---------- Nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  padding: max(10px, env(safe-area-inset-top)) var(--gutter) 0;
  pointer-events: none;
}
/* The launch coupon rides on top of the nav, without a deadline. */
.promo {
  pointer-events: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px;
  margin: calc(-1 * max(10px, env(safe-area-inset-top))) calc(-1 * var(--gutter)) 10px;
  padding: calc(7px + env(safe-area-inset-top)) var(--gutter) 7px;
  background: var(--primary-800);
  color: #fff;
  font-size: 0.875rem;
  line-height: 1.3;
  text-align: center;
}
.promo__tag {
  padding: 2px 8px; border-radius: 999px;
  background: var(--warm); color: var(--primary-950);
  font-size: 0.75rem; font-weight: 700;
}
.promo code { padding: 1px 6px; border-radius: 6px; background: rgb(255 255 255 / 0.16); color: #fff; font-size: 0.8125rem; }
.promo a { color: #fff; font-weight: 600; text-underline-offset: 3px; }
@media (max-width: 600px) { .promo { font-size: 0.8125rem; } .promo__tag, .promo__long, .promo a { display: none; } }

.nav__bar {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1200px;
  margin-inline: auto;
  padding: 8px 8px 8px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background-color 0.35s, border-color 0.35s, box-shadow 0.35s, backdrop-filter 0.35s;
}
.nav.is-scrolled .nav__bar,
.nav.is-open .nav__bar {
  background: rgb(10 18 18 / 0.88);
  border-color: rgb(238 246 246 / 0.1);
  box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.5);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
}
.nav__brand { display: flex; flex-shrink: 0; }
.nav__brand img { height: 34px; width: auto; }
.nav__links { display: flex; gap: 4px; margin-left: auto; }
.nav__links a {
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--on-night-muted);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s, background-color 0.2s;
}
.nav__links a:hover { color: var(--on-night); background: rgb(238 246 246 / 0.08); }
.nav__actions { display: flex; align-items: center; gap: 8px; }
.nav__toggle { display: none; }

@media (max-width: 960px) {
  .nav__bar { padding: 6px 6px 6px 14px; }
  .nav__brand img { height: 30px; }
  .nav__actions { margin-left: auto; }
  .nav__toggle {
    display: inline-grid;
    place-content: center;
    gap: 6px;
    width: 40px; height: 40px;
    border: 1px solid rgb(238 246 246 / 0.18);
    border-radius: 50%;
    background: rgb(238 246 246 / 0.06);
    cursor: pointer;
  }
  .nav__toggle span {
    display: block; width: 16px; height: 1.5px; border-radius: 2px;
    background: var(--on-night);
    transition: transform 0.3s var(--ease);
  }
  .nav.is-open .nav__toggle span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .nav.is-open .nav__toggle span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

  .nav__links {
    position: absolute;
    top: calc(100% + 8px);
    left: var(--gutter);
    right: var(--gutter);
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    border-radius: 24px;
    background: rgb(10 18 18 / 0.92);
    border: 1px solid rgb(238 246 246 / 0.1);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.6);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top center;
    transition: opacity 0.25s, transform 0.3s var(--ease), visibility 0.3s;
  }
  .nav.is-open .nav__links { opacity: 1; visibility: visible; transform: none; }
  .nav__links a { padding: 14px 16px; font-size: 1.0625rem; color: var(--on-night); }
  .nav__login { border-top: 1px solid rgb(238 246 246 / 0.1); border-radius: 0 0 16px 16px !important; margin-top: 4px; }
}

@media (max-width: 960px) {
  .nav__brand { align-items: center; min-height: 44px; }
  .nav__actions .btn--sm { --h: 44px; }
  .nav__toggle { width: 44px; height: 44px; }
}

@media (max-width: 360px) {
  .nav__brand img { height: 26px; }
  .nav__actions .btn--sm { padding: 0 12px; }
}

/* ---------- Aurora (living gradient, transform-only animation) ---------- */

.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.aurora__blob {
  position: absolute;
  width: 70vmax; height: 70vmax;
  border-radius: 50%;
  opacity: 0.9;
  will-change: transform;
}
.aurora__blob--a {
  left: -20vmax; top: -30vmax;
  background: radial-gradient(closest-side, rgb(107 178 177 / 0.4), rgb(107 178 177 / 0) 70%);
  animation: drift-a 22s ease-in-out infinite alternate;
}
.aurora__blob--b {
  right: -25vmax; top: -10vmax;
  background: radial-gradient(closest-side, rgb(61 107 106 / 0.75), rgb(61 107 106 / 0) 70%);
  animation: drift-b 26s ease-in-out infinite alternate;
}
.aurora__blob--c {
  left: 20%; bottom: -45vmax;
  background: radial-gradient(closest-side, rgb(242 200 148 / 0.28), rgb(242 200 148 / 0) 70%);
  animation: drift-c 30s ease-in-out infinite alternate;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--on-night);
  background:
    radial-gradient(120% 80% at 50% 120%, #17302F 0%, transparent 60%),
    linear-gradient(180deg, var(--night) 0%, #0D1919 100%);
  padding: 150px 0 128px;
}
.hero::after {
  content: "";
  position: absolute; inset: auto 0 0; height: 96px;
  background: linear-gradient(180deg, transparent, var(--bg));
  z-index: -1;
}
/* The take C loop plays behind the copy, silent. The poster sits under it: it shows until the first frame and
   stays with reduced motion. The veil keeps the copy at AA over the brightest frame, and the aurora still tints
   the night over the film. */
.hero__media { position: absolute; inset: 0; z-index: -3; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgb(10 18 18 / 0.95) 0%, rgb(10 18 18 / 0.9) 44%, rgb(10 18 18 / 0.5) 62%, rgb(10 18 18 / 0.15) 82%),
    linear-gradient(180deg, rgb(10 18 18 / 0.6) 0%, transparent 22%);
}
.hero__poster, .hero__poster img, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__poster img, .hero__video { object-fit: cover; object-position: 70% 50%; }
.hero .aurora { z-index: -2; opacity: 0.6; }

.hero__inner {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}

.hero__copy { will-change: transform, opacity; }

/* The play button opens the film with sound. It sits on the film, beside her face. */
.hero__watch {
  justify-self: start;
  align-self: center;
  position: relative;
  display: grid; place-items: center;
  width: 104px; height: 104px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(238 246 246 / 0.08);
  box-shadow: 0 0 0 1px rgb(238 246 246 / 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  transition: transform 0.3s var(--ease), background-color 0.2s;
}
.hero__watch:hover { transform: scale(1.04); background: rgb(238 246 246 / 0.14); }
.hero__watch:focus-visible { outline: 2px solid var(--primary-300); outline-offset: 4px; }
.hero__watch-icon {
  display: grid; place-items: center;
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--on-night);
  color: var(--primary-800);
  box-shadow: 0 12px 30px -10px rgb(0 0 0 / 0.6);
}
.hero__title {
  margin-top: 20px;
  font-size: clamp(2.75rem, 7.2vw, 5.75rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.hero__title .line { display: block; }
.hero__forever {
  padding-bottom: 0.08em;
  background: linear-gradient(100deg, var(--primary-300) 0%, var(--primary-100) 30%, var(--warm) 50%, var(--primary-200) 70%, var(--primary-400) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 9s ease-in-out infinite alternate;
}
.hero__lead {
  margin-top: 24px;
  max-width: 34rem;
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  color: var(--on-night-muted);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
/* Trust badges: readable pills with their own background, so they hold over any frame of the film. */
.hero__trust {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 28px 0 0; padding: 0; list-style: none;
}
.hero__trust li {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 6px 14px 6px 10px;
  border: 1px solid rgb(238 246 246 / 0.18);
  border-radius: 999px;
  background: rgb(10 18 18 / 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--on-night);
  font-size: 0.875rem; font-weight: 500; line-height: 1.2;
}
.hero__trust svg { flex-shrink: 0; color: var(--primary-300); }

/* Hero stage: the voice orb with floating message cards. */
.wave { display: flex; align-items: center; gap: 2px; height: 28px; flex: 1; }
.wave i {
  flex: 1; min-width: 2px; height: 100%;
  border-radius: 2px;
  background: var(--primary-300);
  transform: scaleY(var(--s));
  transform-origin: center;
  animation: bar 1.8s ease-in-out infinite;
  animation-delay: var(--delay);
}
.wave i:nth-child(n+14) { background: rgb(164 209 208 / 0.4); }

.avatar {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  font-size: 0.8125rem; font-weight: 600; color: var(--primary-950);
}
.avatar--a { background: linear-gradient(135deg, var(--primary-200), var(--primary-400)); }
.avatar--b { background: linear-gradient(135deg, #F6DDBB, var(--warm)); }
.avatar--c { background: linear-gradient(135deg, var(--primary-100), var(--primary-300)); }
.avatar--more { background: var(--primary-900); color: var(--primary-100); }
.avatar--foto { overflow: hidden; background: var(--primary-100); }

.hero__scroll {
  position: absolute; left: 50%; bottom: 112px;
  width: 26px; height: 40px; margin-left: -13px;
  border: 1.5px solid rgb(238 246 246 / 0.3); border-radius: 999px;
}
.hero__scroll span {
  position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px;
  border-radius: 2px; background: var(--on-night);
  animation: scroll-hint 2s var(--ease) infinite;
}

/* Phones and tablets: her face fills the top and the copy sits on the darkened lower part, with "Assistir"
   just under her face. The veil rides with the copy, so it starts above the button however tall the copy wraps. */
@media (max-width: 900px) {
  .hero { padding: 46svh 0 88px; align-items: flex-end; }
  .hero__inner { grid-template-columns: 1fr; gap: 28px; position: relative; }
  .hero__inner::before {
    content: ""; position: absolute; z-index: -1;
    inset: -120px 0 -88px;
    background: linear-gradient(180deg, transparent 0, rgb(10 18 18 / 0.9) 150px, rgb(10 18 18 / 0.96) 100%);
  }
  .hero__media::after { background: linear-gradient(180deg, rgb(10 18 18 / 0.55) 0%, rgb(10 18 18 / 0.05) 16%, transparent 30%); }
  .hero__copy { text-align: left; }
  .hero__watch { order: -1; justify-self: end; width: 88px; height: 88px; }
  .hero__watch-icon { width: 64px; height: 64px; }
  .hero__scroll { display: none; }
}
@media (max-width: 760px) {
  .hero__poster img, .hero__video { object-position: 50% 0%; }
}
@media (max-width: 480px) {
  .hero__title { font-size: clamp(2.25rem, 10vw, 2.75rem); }
  .hero__ctas .btn { flex: 1 1 auto; }
  .hero { padding-bottom: 112px; }
}

/* ---------- Film (modal with the player) ---------- */

/* The film with sound, in a modal: Esc, the close button and a click outside the player close it, and closing
   stops it. The player is the Beep's (Video.js v10's pieces, drawn here), in the night and teal of Meu Legado. */
.film {
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0; padding: 72px var(--gutter) 40px;
  border: 0;
  background: rgb(10 18 18 / 0.96);
  color: var(--on-night);
  font-family: var(--font);
}
.film[open] { display: grid; place-items: center; }
.film::backdrop { background: rgb(10 18 18 / 0.9); }
.film__close {
  position: absolute; top: 16px; right: var(--gutter);
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid rgb(238 246 246 / 0.24);
  border-radius: 50%;
  background: rgb(238 246 246 / 0.08);
  color: var(--on-night);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.film__close:hover { background: rgb(238 246 246 / 0.16); border-color: rgb(238 246 246 / 0.5); }
.film__close:focus-visible { outline: 2px solid var(--primary-300); outline-offset: 2px; }
.film__stage {
  width: min(100%, 1200px, calc((100dvh - 112px) * 16 / 9));
  aspect-ratio: 16 / 9;
}
@media (max-width: 760px) {
  .film { padding: 64px 12px 16px; }
  .film__stage { width: min(100%, calc((100dvh - 80px) * 9 / 16)); aspect-ratio: 9 / 16; }
}

/* The player. The veil under the controls is the night, since it sits on the picture. */
.film-player {
  --film-veil: rgb(10 18 18 / 0.72);
  --film-ink: var(--on-night);
  --film-accent: var(--primary-700);
  --film-accent-hover: var(--primary-800);
  --film-bar: var(--primary-400);

  display: block;
  height: 100%;
}
.film-player media-i18n { display: contents; }
.film-player__frame {
  container: film-player / inline-size;
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%; height: 100%;
  border-radius: 20px;
  background: var(--night);
  color: var(--film-ink);
  box-shadow: 0 30px 80px -30px rgb(0 0 0 / 0.8);
}
.film-player__frame:fullscreen { border-radius: 0; }
.film-player__frame:focus { outline: none; }
.film-player__frame:focus-visible { outline: 2px solid var(--primary-300); outline-offset: 0; }
.film-player__frame video { display: block; width: 100%; height: 100%; object-fit: contain; }

.film-player__poster { position: absolute; inset: 0; pointer-events: none; }
.film-player__poster:not([data-visible]) { display: none; }
.film-player__poster img { width: 100%; height: 100%; object-fit: contain; }

.film-player__loading { position: absolute; inset: 0; display: none; place-items: center; pointer-events: none; }
.film-player__loading[data-visible] { display: grid; }
.film-player__spinner {
  width: 40px; height: 40px;
  border: 3px solid rgb(238 246 246 / 0.25);
  border-top-color: var(--film-ink);
  border-radius: 50%;
  animation: film-spin 0.8s linear infinite;
}

.film-player__big {
  position: absolute; top: 50%; left: 50%;
  display: grid; place-items: center;
  width: 4.5rem; height: 4.5rem;
  border-radius: 999px;
  background: var(--film-accent);
  color: #fff;
  cursor: pointer;
  translate: -50% -50%;
  transition: background-color 0.15s var(--ease);
}
.film-player__big:hover { background: var(--film-accent-hover); }
.film-player__big:focus-visible,
.film-player__button:focus-visible { outline: 2px solid var(--primary-300); outline-offset: 0; }
/* Only the cover has it. Paused later on, the bar's own button is enough, and the picture stays uncovered. */
.film-player__big:is([data-started], :not([data-paused])) { display: none; }

.film-player__controls {
  position: absolute; inset-inline: 0; bottom: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--film-veil);
  transition: opacity 0.25s var(--ease);
}
.film-player__frame:has(.film-player__big:not([data-started])) .film-player__controls { display: none; }
.film-player__frame:not([data-controls-visible]) .film-player__controls { opacity: 0; pointer-events: none; }

.film-player__button {
  display: grid; flex-shrink: 0; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 999px;
  color: var(--film-ink);
  cursor: pointer;
}
.film-player__button:hover { background: rgb(238 246 246 / 0.16); }
/* With a speed other than 1x, the gear widens into a pill that says it. */
.film-player__settings:has(.film-player__rate:not([hidden])) { display: flex; gap: 4px; width: auto; padding-inline: 8px; }
.film-player__settings { border: 0; background: none; font: inherit; }
.film-player__rate { font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.film-player__button[data-paused] .film-player__when-playing,
.film-player__button:not([data-paused]) .film-player__when-paused,
.film-player__button[data-volume-level="off"] .film-player__when-sound,
.film-player__button:not([data-volume-level="off"]) .film-player__when-muted,
.film-player__button[data-fullscreen] .film-player__when-window,
.film-player__button:not([data-fullscreen]) .film-player__when-fullscreen { display: none; }

.film-player__menu {
  min-width: 13rem;
  margin: 0; padding: 4px;
  border: 1px solid rgb(238 246 246 / 0.14);
  border-radius: 20px;
  background: var(--night-2);
  color: var(--on-night);
  font-family: var(--font);
  text-align: start;
}
.film-player__menu-content[data-child-open] > .film-player__menu-item { display: none; }
.film-player__menu-item {
  display: flex; align-items: center; gap: 8px;
  min-height: 40px;
  padding-inline: 12px;
  border-radius: 999px;
  font-size: 0.875rem; font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.film-player__menu-item > svg { flex-shrink: 0; }
@media (any-hover: hover) { .film-player__menu-item:hover { background: rgb(238 246 246 / 0.08); } }
.film-player__menu-item[data-highlighted] { background: rgb(238 246 246 / 0.08); }
.film-player__menu-item:focus-visible { outline: 2px solid var(--primary-300); outline-offset: -2px; }
.film-player__menu-item[aria-checked="true"] { background: rgb(107 178 177 / 0.2); color: var(--primary-100); font-weight: 600; }
.film-player__menu-label { flex: 1; }
.film-player__menu-value { color: var(--on-night-muted); font-variant-numeric: tabular-nums; }
.film-player__menu-back { color: var(--on-night-muted); }
.film-player__rate-check { margin-left: auto; }
.film-player__menu-item[aria-checked="false"] .film-player__rate-check { visibility: hidden; }

.film-player__time { flex-shrink: 0; font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.film-player__slider {
  position: relative;
  display: flex; flex: 1; align-items: center;
  min-width: 2rem; height: 1.5rem;
  cursor: pointer;
}
.film-player__track {
  position: relative; display: block;
  width: 100%; height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(238 246 246 / 0.28);
}
/* Video.js writes the slider's positions already as percentages ("21.5%"). */
.film-player__buffer, .film-player__fill { position: absolute; inset-block: 0; left: 0; display: block; }
.film-player__buffer { width: var(--media-slider-buffer, 0%); background: rgb(238 246 246 / 0.4); }
.film-player__fill { width: var(--media-slider-fill, 0%); background: var(--film-bar); }
.film-player__thumb {
  position: absolute; left: var(--media-slider-fill, 0%);
  display: block;
  width: 0.875rem; height: 0.875rem;
  border-radius: 999px;
  background: var(--film-bar);
  translate: -50% 0;
}

/* A phone-wide vertical film: the bar tightens before it drops anything, so the slider keeps room to aim at. */
@container film-player (width < 24rem) { .film-player__controls { gap: 4px; padding-inline: 8px; } }
@container film-player (width < 20rem) { .film-player__time[type="duration"] { display: none; } }
@container film-player (width < 16rem) { .film-player__time { display: none; } }
@container film-player (width < 14rem) { .film-player__controls media-mute-button { display: none; } }

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

.section { position: relative; padding: clamp(80px, 11vw, 144px) 0; }
.section__head { max-width: 720px; margin-bottom: clamp(40px, 6vw, 64px); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__title {
  margin-top: 14px;
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  letter-spacing: -0.035em;
}
.section__lead {
  margin-top: 18px;
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  color: var(--text-muted);
}

.section--dawn { background: var(--bg); }

/* Bento of what can be left behind. */
.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}
.tile {
  --x: 50%; --y: 50%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--card-shadow);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s;
}
.tile::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--x) var(--y), rgb(107 178 177 / 0.16), transparent 45%);
  opacity: 0; transition: opacity 0.3s;
}
.tile:hover { transform: translateY(-4px); border-color: rgb(107 178 177 / 0.4); }
.tile:hover::before { opacity: 1; }
.tile h3 { font-size: 1.375rem; margin-top: auto; }
.tile p { margin-top: 8px; color: var(--text-muted); }
.tile__art { position: relative; height: 140px; margin-bottom: 28px; display: grid; place-items: center; }

.tile--audio { grid-column: span 4; }
.tile--video { grid-column: span 2; }
.tile--letter { grid-column: span 2; }
.tile--files { grid-column: span 2; }
.tile--people { grid-column: span 2; }

.tile--audio {
  background:
    radial-gradient(80% 120% at 85% 0%, rgb(107 178 177 / 0.22), transparent 60%),
    var(--surface);
}
.wave--tile { height: 96px; width: 100%; gap: 4px; }
/* The voice card plays a real message; the bars are its waveform and light up as it plays. */
.tile__art--player { display: flex; align-items: center; gap: 18px; }
.tile__art--player .wave--tile { flex: 1; min-width: 0; height: 56px; gap: 3px; justify-content: space-between; overflow: hidden; }
.tile__art--player .wave--tile i { flex: 0 0 3px; min-width: 0; }
.tile__art--player .wave--tile i { animation: none; background: var(--primary-200); transition: background-color 0.2s; }
.tile__art--player .wave--tile i.is-played { background: linear-gradient(180deg, var(--primary-400), var(--primary-700)); }
.media-btn {
  position: relative; flex-shrink: 0;
  display: grid; place-items: center;
  width: 60px; height: 60px;
  border: 0; border-radius: 50%;
  background: var(--primary-700); color: #fff;
  box-shadow: 0 12px 26px -12px rgb(61 107 106 / 0.9);
  cursor: pointer;
  transition: transform 0.25s var(--ease), background-color 0.2s;
}
.media-btn:hover { background: var(--primary-800); transform: scale(1.05); }
.media-btn:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
/* Phosphor's play triangle already sits ~2px right of center in its box, the optical center. */
.media-btn__pause, .is-playing .media-btn__play { display: none; }
.is-playing .media-btn__pause { display: block; }
.media-time { flex-shrink: 0; min-width: 2.5em; color: var(--text-muted); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.tile__art--video {
  position: relative; display: block;
  height: auto; aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
  background: var(--night);
}
.tile__art--video video { display: block; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.media-btn--over { position: absolute; top: 50%; left: 50%; translate: -50% -50%; background: rgb(255 255 255 / 0.94); color: var(--primary-800); }
.media-btn--over:hover { background: #fff; transform: scale(1.06); }
.is-playing .media-btn--over { opacity: 0; transition: opacity 0.3s; }
.is-playing:hover .media-btn--over, .is-playing .media-btn--over:focus-visible { opacity: 1; }
.wave--tile i { min-width: 3px; }

.tile__art--photo { height: auto; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; display: block; }
.tile__art--photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.tile--letter:hover .tile__art--photo img { transform: scale(1.04); }

/* A small table of memories: a document page under three prints of big days. */
.memories { position: relative; height: 172px; }
.memories__doc, .memories__print { position: absolute; left: 50%; top: 50%; transition: transform 0.5s var(--ease); }
.memories__doc {
  display: grid; align-content: start; gap: 8px;
  width: 104px; height: 134px; padding: 14px 12px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--card-shadow);
  transform: translate(-50%, -50%) translate(-78px, -4px) rotate(-12deg);
}
.memories__doc i { display: block; height: 5px; border-radius: 3px; background: var(--primary-200); }
.memories__doc i.short { width: 60%; }
.memories__tag {
  justify-self: start; margin-bottom: 4px; padding: 2px 6px; border-radius: 5px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em;
  background: var(--primary-700); color: #fff;
}
.memories__print {
  width: 106px; padding: 6px 6px 20px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 14px 28px -14px rgb(21 36 36 / 0.5), 0 1px 2px rgb(21 36 36 / 0.12);
}
.memories__print img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 3px; }
.memories__print--1 { transform: translate(-50%, -50%) translate(-8px, -14px) rotate(-5deg); }
.memories__print--2 { transform: translate(-50%, -50%) translate(66px, -2px) rotate(9deg); }
.memories__print--3 { transform: translate(-50%, -50%) translate(16px, 16px) rotate(-1deg); }
.tile--files:hover .memories__doc { transform: translate(-50%, -50%) translate(-96px, -8px) rotate(-16deg); }
.tile--files:hover .memories__print--1 { transform: translate(-50%, -50%) translate(-18px, -26px) rotate(-9deg); }
.tile--files:hover .memories__print--2 { transform: translate(-50%, -50%) translate(84px, -8px) rotate(13deg); }
.avatar--foto img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

.tile--people .tile__art { display: flex; justify-content: center; align-items: center; }
.tile--people .avatar { width: 56px; height: 56px; font-size: 1.125rem; margin-left: -12px; border: 3px solid var(--surface); transition: transform 0.4s var(--ease); }
.tile--people .avatar:first-child { margin-left: 0; }
.tile--people:hover .avatar:nth-child(odd) { transform: translateY(-6px); }

@media (max-width: 960px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile--audio { grid-column: span 2; }
  .tile--video, .tile--letter, .tile--files, .tile--people { grid-column: span 1; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; gap: 12px; }
  .tile, .tile--audio { grid-column: auto; padding: 22px; }
  .tile__art { height: 116px; margin-bottom: 20px; }
  .memories { height: 168px; }
  .tile__art--player { height: 96px; }
}

/* Feeling: words light up as you scroll. */
.section--feeling {
  background:
    radial-gradient(60% 50% at 50% 0%, rgb(242 200 148 / 0.14), transparent 70%),
    var(--bg-soft);
}
.feeling {
  margin-top: 20px;
  font-size: clamp(1.75rem, 4.4vw, 3.25rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.035em;
}
.js .feeling .w { opacity: 0.2; transition: opacity 0.35s; }
.js .feeling .w.on { opacity: 1; }
.feeling__points {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  margin: clamp(48px, 7vw, 80px) 0 0; padding: 0; list-style: none;
}
.feeling__points li { padding-top: 20px; border-top: 1px solid var(--line); }
.feeling__points strong { display: block; font-size: 1.0625rem; font-weight: 600; }
.feeling__points span { display: block; margin-top: 6px; color: var(--text-muted); }
@media (max-width: 760px) { .feeling__points { grid-template-columns: 1fr; gap: 0; } .feeling__points li { padding: 20px 0; } }

/* People who stay: three portraits, the middle one lower, so the row reads as a family album. */
.people {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px);
  margin: clamp(48px, 7vw, 80px) 0 0;
}
.people__item { margin: 0; }
.people__item:nth-child(2) { margin-top: clamp(24px, 5vw, 56px); }
.people__photo {
  display: block; overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}
.people__photo img { width: 100%; height: 100%; object-fit: cover; }
.people__item figcaption { margin-top: 12px; font-weight: 600; font-size: 0.9375rem; color: var(--text-muted); text-align: center; }
@media (max-width: 760px) {
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people__item:first-child { grid-column: span 2; }
  .people__item:first-child .people__photo { aspect-ratio: 4 / 3; }
  .people__item:nth-child(2) { margin-top: 0; }
}

/* Steps with a line of light that fills on scroll. */
.steps {
  --progress: 0;
  position: relative;
  display: grid;
  gap: clamp(28px, 4vw, 44px);
  margin: 0; padding: 0; list-style: none;
  max-width: 760px;
}
.steps::before, .steps::after {
  content: ""; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px; border-radius: 2px;
}
.steps::before { background: var(--line); }
.steps::after {
  background: linear-gradient(180deg, var(--primary-300), var(--primary-600));
  box-shadow: 0 0 12px var(--primary-400);
  transform-origin: top;
  transform: scaleY(var(--progress));
}
.step { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 20px; align-items: start; }
.step__num {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  font-weight: 600;
  color: var(--accent-text);
  background: var(--bg);
  border: 1.5px solid color-mix(in srgb, var(--accent-text) 45%, transparent);
  transition: background-color 0.4s, color 0.4s, box-shadow 0.4s;
}
.step.is-lit .step__num { background: var(--primary-700); color: #fff; border-color: var(--primary-700); box-shadow: 0 0 0 6px rgb(107 178 177 / 0.18); }
.step h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-top: 10px; }
.step p { margin-top: 8px; color: var(--text-muted); }
/* The steps close on an infinity sign: what you leave stays. */
.infinity { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.infinity path { stroke-dasharray: 100; stroke-dashoffset: 0; }
.step--forever.is-lit .infinity path { animation: infinity-draw 1.8s var(--ease) both; }
.step--forever h3 { background: linear-gradient(100deg, var(--primary-600), var(--primary-400) 60%, #C99A5B); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* The steps on the left, the photos of someone recording and someone listening on the right. */
.how { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.how__photos { position: relative; padding-bottom: 18%; }
.how__photo { display: block; overflow: hidden; border-radius: var(--radius); box-shadow: var(--card-shadow); }
.how__photo img { width: 100%; height: 100%; object-fit: cover; }
.how__photo--main { aspect-ratio: 4 / 5; width: 82%; }
.how__photos > :last-child { position: absolute; right: 0; bottom: 0; width: 50%; }
.how__photo--small { aspect-ratio: 1; border: 6px solid var(--bg); }
@media (max-width: 900px) {
  .how { grid-template-columns: 1fr; }
  .how__photos { max-width: 520px; }
}

/* Security vault, always night. */
.section--night {
  overflow: hidden;
  isolation: isolate;
  color: var(--on-night);
  background:
    radial-gradient(70% 60% at 80% 0%, rgb(61 107 106 / 0.45), transparent 70%),
    radial-gradient(50% 50% at 0% 100%, rgb(242 200 148 / 0.08), transparent 70%),
    var(--night);
}
.section--night .section__lead { color: var(--on-night-muted); }
.grid-glow {
  --mx: 0; --my: 0;
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgb(164 209 208 / 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgb(164 209 208 / 0.07) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask: radial-gradient(600px circle at calc(50% + var(--mx) * 30%) calc(40% + var(--my) * 30%), #000, transparent 70%);
  mask: radial-gradient(600px circle at calc(50% + var(--mx) * 30%) calc(40% + var(--my) * 30%), #000, transparent 70%);
}
.vault { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 80px); align-items: start; }
.seal {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 20px; padding: 6px 14px 6px 10px;
  border-radius: 999px;
  border: 1px solid rgb(164 209 208 / 0.35);
  background: rgb(107 178 177 / 0.12);
  color: var(--primary-200);
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.seal svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vault__grid { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.vault__item {
  padding: 22px 24px 22px 68px;
  position: relative;
  border-radius: 20px;
  background: linear-gradient(160deg, rgb(238 246 246 / 0.07), rgb(238 246 246 / 0.02));
  border: 1px solid rgb(238 246 246 / 0.1);
  transition: border-color 0.3s, background-color 0.3s, transform 0.4s var(--ease);
}
.vault__item:hover { border-color: rgb(164 209 208 / 0.35); transform: translateX(4px); }
.vault__item svg {
  position: absolute; left: 22px; top: 22px; width: 28px; height: 28px;
  fill: none; stroke: var(--primary-300); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.vault__item h3 { font-size: 1.125rem; letter-spacing: -0.02em; }
.vault__item p { margin-top: 6px; color: var(--on-night-muted); font-size: 0.9375rem; }
@media (max-width: 900px) { .vault { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .vault__item { padding: 20px 20px 20px 60px; } .vault__item svg { left: 18px; } }
.vault__photo {
  display: block; overflow: hidden;
  margin-top: 32px;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  border: 1px solid rgb(164 209 208 / 0.16);
  box-shadow: 0 30px 80px -40px rgb(107 178 177 / 0.5);
}
.vault__photo img { width: 100%; height: 100%; object-fit: cover; }

/* Delivery confirmation inside the vault: four layered checks, then the guarantees. */
.vault__body { display: grid; gap: 14px; }
.vault__label { color: var(--primary-200); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.vault__steps { display: grid; gap: 10px; margin: 0 0 10px; padding: 0; list-style: none; }
.vault__step {
  display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start;
  padding: 18px 20px;
  border-radius: 18px;
  background: rgb(238 246 246 / 0.05);
  border: 1px solid rgb(164 209 208 / 0.16);
}
.vault__num {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  font-weight: 600; color: #fff;
  background: var(--primary-700);
  box-shadow: 0 0 0 5px rgb(107 178 177 / 0.14);
}
.vault__step h3 { margin-top: 8px; font-size: 1.0625rem; letter-spacing: -0.02em; }
.vault__step p { margin-top: 4px; color: var(--on-night-muted); font-size: 0.9375rem; }
.vault__note { margin-top: 6px; color: var(--primary-200); font-weight: 600; }

/* Plans */
.section--plans { background: var(--bg-soft); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan {
  position: relative;
  display: flex; flex-direction: column;
  padding: 32px 28px 28px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--card-shadow);
  transition: transform 0.4s var(--ease);
}
.plan:hover { transform: translateY(-4px); }
.plan__name { font-size: 1.125rem; letter-spacing: -0.01em; }
.plan__price {
  margin-top: 14px;
  font-size: clamp(2.75rem, 5vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* The coupon code is what people type at checkout: big enough to read and copy. */
.promo code, .plan__launch code, .included__note code, .faq code { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; }
/* The full price struck through above the launch price. */
.plan__full { margin-top: 14px; color: var(--text-muted); font-size: 1rem; }
.plan__full s { text-decoration-thickness: 1.5px; }
.plan__full + .plan__price { margin-top: 2px; }
.plan__currency { font-size: 0.42em; font-weight: 500; letter-spacing: 0; margin-right: 6px; vertical-align: 0.9em; color: var(--text-muted); }
.plan__save { margin-top: 12px; font-weight: 600; color: var(--accent-text); }
.plan__launch {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  margin-top: 12px; font-size: 0.875rem; color: var(--text-muted);
}
.plan__launch strong { color: var(--text); }
.plan__tag {
  padding: 2px 8px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600;
  color: #fff; background: var(--primary-700);
}
.plan__facts { margin: 24px 0 28px; padding: 20px 0 0; list-style: none; border-top: 1px solid var(--line); display: grid; gap: 10px; color: var(--text-muted); }
.plan__facts strong { color: var(--text); font-weight: 600; }
/* Plain text with a dot hung in the margin, so a bold word stays inline when the line wraps. */
.plan__facts li { position: relative; padding-left: 16px; }
.plan__facts li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--primary-500); }
.plan .btn { margin-top: auto; width: 100%; }

.plan--featured {
  border-color: transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    conic-gradient(from var(--angle, 0deg), var(--primary-300), var(--primary-700), var(--warm), var(--primary-500), var(--primary-300)) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 30px 70px -30px rgb(61 107 106 / 0.55), var(--card-shadow);
  animation: angle 8s linear infinite;
}
.plan__badge {
  position: absolute; top: -13px; left: 28px;
  padding: 4px 12px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em;
  color: #fff; background: var(--primary-700);
  box-shadow: 0 6px 18px -6px rgb(61 107 106 / 0.8);
}

.included {
  margin-top: 24px; padding: 28px 32px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--card-shadow);
}
.included__title { font-weight: 600; }
.included ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 24px; margin: 12px 0 0; padding: 0; list-style: none; color: var(--text-muted); font-size: 0.9375rem; }
.included li { display: flex; gap: 8px; }
.included li::before { content: "✓"; color: var(--accent-text); font-weight: 700; }
.included__note { margin-top: 14px; font-size: 0.8125rem; color: var(--text-muted); }

@media (max-width: 900px) {
  .plans { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; gap: 24px; }
  .plan--featured { order: -1; }
  .included { max-width: 480px; margin-inline: auto; }
  .included ul { grid-template-columns: 1fr; }
}

/* FAQ */
.faq { display: grid; gap: 10px; }
.faq__item {
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.faq__item[open] { border-color: rgb(107 178 177 / 0.45); box-shadow: var(--card-shadow); }
.faq__item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 22px;
  font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em;
  cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background:
    linear-gradient(var(--accent-text), var(--accent-text)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--accent-text), var(--accent-text)) center / 1.5px 12px no-repeat,
    var(--bg-soft);
  transition: background-size 0.3s var(--ease);
}
/* + closed, − open: the vertical bar folds away. */
.faq__item[open] summary::after { background-size: 12px 1.5px, 1.5px 0, auto; }
.faq__item summary { min-height: 56px; }
.faq__item summary:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; border-radius: 18px; }
.faq__item p { padding: 0 22px 20px; color: var(--text-muted); }
@media (max-width: 600px) {
  .faq__item summary { padding: 14px 16px 14px 18px; font-size: 1rem; }
  .faq__item p { padding: 0 18px 18px; }
}
.faq__more { margin: 0; }
.faq__more[hidden] { display: none; }
.faq__toggle {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; margin: 16px auto 0; padding: 0 24px;
  border: 1px solid color-mix(in srgb, var(--accent-text) 45%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--accent-text);
  font: 600 0.9375rem/1 var(--font);
  cursor: pointer;
}
.faq__toggle[hidden] { display: none; }
.faq__toggle:hover { background: color-mix(in srgb, var(--accent-text) 10%, transparent); }
.faq__toggle:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.faq__item::details-content { block-size: 0; overflow: hidden; transition: block-size 0.35s var(--ease), content-visibility 0.35s allow-discrete; }
.faq__item[open]::details-content { block-size: auto; }
:root { interpolate-size: allow-keywords; }

/* Final call */
.cta-final {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(96px, 14vw, 180px) 0;
  text-align: center;
  color: var(--on-night);
  background: var(--night);
}
.cta-final .aurora { z-index: -1; }
.aurora--soft .aurora__blob--a { left: 10%; top: -40vmax; }
.aurora--soft .aurora__blob--b { right: -10vmax; top: auto; bottom: -50vmax; }
.cta-final__inner { display: flex; flex-direction: column; align-items: center; }
.cta-final__mark { width: 72px; height: 72px; filter: drop-shadow(0 0 24px rgb(107 178 177 / 0.6)); animation: breathe 6s ease-in-out infinite; }
.cta-final__title { margin-top: 24px; max-width: 14ch; font-size: clamp(2.25rem, 6vw, 4.5rem); letter-spacing: -0.045em; }
.cta-final__lead { margin: 18px 0 32px; color: var(--on-night-muted); font-size: 1.125rem; }
.cta-final__photo {
  display: block; overflow: hidden;
  max-width: 1000px; margin: clamp(56px, 8vw, 88px) auto 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  box-shadow: 0 40px 90px -40px rgb(107 178 177 / 0.45);
}
.cta-final__photo img { width: 100%; height: 100%; object-fit: cover; }
.cta-final__sign { margin-top: clamp(32px, 5vw, 48px); font-size: clamp(1.25rem, 2.6vw, 1.75rem); font-weight: 600; letter-spacing: -0.02em; color: var(--primary-200); }
@media (max-width: 760px) { .cta-final__photo { aspect-ratio: 4 / 5; } }

/* Footer */
.footer { background: var(--night); color: var(--on-night-muted); border-top: 1px solid rgb(238 246 246 / 0.08); font-size: 0.9375rem; }
.footer__inner { display: grid; grid-template-columns: 1.2fr 2fr; gap: 48px; padding-top: 64px; padding-bottom: 40px; }
.footer__brand img { height: 40px; width: auto; }
.footer__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.footer__nav div { display: grid; gap: 4px; align-content: start; }
.footer__title { color: var(--on-night); font-weight: 600; margin-bottom: 6px; }
.footer__nav a { padding: 6px 0; text-decoration: none; overflow-wrap: anywhere; transition: color 0.2s; }
.footer__nav a:hover { color: var(--on-night); }
.footer__base {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-top: 24px; padding-bottom: max(24px, env(safe-area-inset-bottom));
  border-top: 1px solid rgb(238 246 246 / 0.08);
  font-size: 0.8125rem;
}
/* Company data: the Unio mark beside one fact per line, the copyright last and smaller. */
.footer__legal { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; }
.footer__legal > img { width: 32px; height: 32px; }
.footer__legal div { display: grid; gap: 4px; }
.footer__legal p { margin: 0; }
.footer__copy { margin-top: 6px !important; font-size: 0.75rem; opacity: 0.8; }
.footer__legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer__legal a:hover { color: var(--on-night); }
/* Phones: every footer link is a 44px tap target, without spreading the text apart. */
@media (max-width: 960px) {
  .footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__nav a { display: flex; align-items: center; min-height: 40px; padding: 0; }
  .footer__legal a { display: inline-flex; align-items: center; min-height: 40px; }
}
.footer__social { display: flex; gap: 8px; }
.footer__social a {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgb(238 246 246 / 0.14);
  transition: border-color 0.2s, color 0.2s;
}
.footer__social a:hover { border-color: var(--primary-300); color: var(--on-night); }
.footer__social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
@media (max-width: 760px) {
  .footer__inner { grid-template-columns: 1fr; gap: 36px; }
  .footer__nav { grid-template-columns: 1fr 1fr; }
}

/* Inner pages (legal, 404) */
.page {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 80vh; min-height: 80svh;
  display: flex; align-items: center;
  padding: 140px 0 96px;
  color: var(--on-night);
  background: var(--night);
}
.page .aurora { z-index: -1; }
.page__title { margin-top: 16px; font-size: clamp(2.25rem, 6vw, 4rem); letter-spacing: -0.04em; }
.page__lead { margin: 16px 0 32px; color: var(--on-night-muted); font-size: 1.125rem; max-width: 36rem; }

.legal-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 140px 0 56px;
  color: var(--on-night);
  background: var(--night);
}
.legal-hero .aurora { z-index: -1; }
.legal-hero h1 { margin-top: 14px; font-size: clamp(2.25rem, 5vw, 3.5rem); letter-spacing: -0.04em; }
.legal-hero p { margin-top: 12px; color: var(--on-night-muted); }
.legal { padding-top: 56px; padding-bottom: 96px; }
.legal > h2:first-child { margin-top: 0; }
.legal h2 { margin: 2.2em 0 0.6em; font-size: 1.375rem; letter-spacing: -0.02em; }
.legal h3 { margin: 1.6em 0 0.4em; font-size: 1.125rem; letter-spacing: -0.01em; }
.legal p, .legal li { color: var(--text-muted); }
.legal p { margin: 0.8em 0; }
.legal strong { color: var(--text); font-weight: 600; }
.legal a { color: var(--accent-text); text-underline-offset: 3px; }
.legal ul, .legal ol { padding-left: 1.3em; }
.legal li { margin: 0.35em 0; }
.legal table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: 0.9375rem; display: block; overflow-x: auto; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--text-muted); }
.legal th { color: var(--text); font-weight: 600; }

/* ---------- Reveal on scroll (only hidden when JS is running) ---------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }

.js .hero__copy > * { animation: rise 1s var(--ease) both; }
.js .hero__copy > :nth-child(2) { animation-delay: 0.08s; }
.js .hero__copy > :nth-child(3) { animation-delay: 0.16s; }
.js .hero__copy > :nth-child(4) { animation-delay: 0.24s; }
.js .hero__copy > :nth-child(5) { animation-delay: 0.32s; }

.is-paused, .is-paused * { animation-play-state: paused !important; }

/* A light parallax on the photos, driven by the scroll itself (no JS, off the main thread). Only on wider
   screens and with motion allowed; elsewhere the photos stay still. */
@media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
  @supports (animation-timeline: view()) {
    .parallax img {
      scale: 1.12;
      animation: parallax linear both;
      animation-timeline: view();
    }
  }
}

/* ---------- Phones: tighter type and cards ---------- */

@media (max-width: 600px) {
  .section__title, .cta-final__title { font-size: 1.75rem; letter-spacing: -0.03em; }
  .media-btn { width: 48px; height: 48px; }
  .media-btn svg { width: 18px; height: 18px; }
  .tile, .tile--audio, .plan, .included, .vault__step, .vault__item { padding: 18px; }
  .vault__item { padding-left: 56px; }
}

/* ---------- Keyframes ---------- */

@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes angle { to { --angle: 360deg; } }
@keyframes drift-a { to { transform: translate3d(18vmax, 12vmax, 0) scale(1.1); } }
@keyframes drift-b { to { transform: translate3d(-14vmax, 16vmax, 0) scale(0.92); } }
@keyframes drift-c { to { transform: translate3d(-20vmax, -10vmax, 0) scale(1.15); } }
@keyframes shimmer { to { background-position: 100% 0; } }
@keyframes breathe { 50% { transform: scale(1.05); } }
@keyframes bar { 50% { transform: scaleY(calc(var(--s) * 0.35)); } }
@keyframes ripple { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.7); opacity: 0; } }
@keyframes pulse-dot { 50% { box-shadow: 0 0 0 7px rgb(164 209 208 / 0.08), 0 0 18px var(--primary-300); } }
@keyframes scroll-hint { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }
@keyframes film-spin { to { rotate: 360deg; } }
@keyframes parallax { from { translate: 0 -5%; } to { translate: 0 5%; } }
@keyframes infinity-draw { from { stroke-dashoffset: 100; } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); filter: blur(8px); } }

/* ---------- Reduced motion: everything still, everything visible ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; filter: none; }
  .js .feeling .w { opacity: 1; }
  .steps { --progress: 1; }
  .hero__video { display: none; }
}