/* Lifer website v2: a field guide at dusk.
   One gold accent on deep navy (or warm paper in light mode), Playfair Display
   for headlines, Instrument Sans for everything else, and real screenshots
   doing the work. */

:root {
  --bg: #07111b;
  --bg-raised: #0b1826;
  --surface: #0f1f30;
  --surface-2: #132638;
  --line: rgba(244, 239, 228, 0.09);
  --line-strong: rgba(244, 239, 228, 0.16);
  --text: #f4efe4;
  --muted: rgba(244, 239, 228, 0.68);
  --faint: rgba(244, 239, 228, 0.46);
  --gold: #e8a838;
  --gold-text: #f2c66d;
  --gold-wash: rgba(232, 168, 56, 0.12);
  --sage: #8fd1a0;
  --sage-wash: rgba(93, 189, 120, 0.1);
  --sage-line: rgba(93, 189, 120, 0.24);
  --ink: #111820;
  --shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.75);
  --phone-frame: #1b2a3a;
  --phone-edge: #3a4553;
  --bbc-blocks: #f4efe4;
  --itv: #f4efe4;
  --common: #9aa7b4;
  --uncommon: #5fcf97;
  --rare: #6ea8ff;
  --legendary: #f2b544;
  --display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --radius: 22px;
  --gutter: clamp(16px, 5vw, 56px);
  --max: 1180px;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f6f0e3;
  --bg-raised: #efe6d3;
  --surface: #fffaf0;
  --surface-2: #f7efdf;
  --line: rgba(30, 24, 10, 0.1);
  --line-strong: rgba(30, 24, 10, 0.18);
  --text: #16202b;
  --muted: #5b5a54;
  --faint: #86827a;
  --gold: #e8a838;
  --gold-text: #a86a0c;
  --gold-wash: rgba(232, 168, 56, 0.16);
  --sage: #3d6b3a;
  --sage-wash: rgba(95, 145, 85, 0.13);
  --sage-line: rgba(80, 125, 70, 0.26);
  --shadow: 0 30px 60px -30px rgba(40, 30, 10, 0.35);
  --phone-frame: #d9ceb8;
  --phone-edge: #b9ad96;
  --bbc-blocks: #000000;
  --itv: #006473;
  --common: #7b8793;
  --uncommon: #2f9f6a;
  --rare: #3a78d8;
  --legendary: #b87500;
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f6f0e3;
    --bg-raised: #efe6d3;
    --surface: #fffaf0;
    --surface-2: #f7efdf;
    --line: rgba(30, 24, 10, 0.1);
    --line-strong: rgba(30, 24, 10, 0.18);
    --text: #16202b;
    --muted: #5b5a54;
    --faint: #86827a;
    --gold-text: #a86a0c;
    --gold-wash: rgba(232, 168, 56, 0.16);
    --sage: #3d6b3a;
    --sage-wash: rgba(95, 145, 85, 0.13);
    --sage-line: rgba(80, 125, 70, 0.26);
    --shadow: 0 30px 60px -30px rgba(40, 30, 10, 0.35);
    --phone-frame: #d9ceb8;
    --phone-edge: #b9ad96;
    --bbc-blocks: #000000;
    --itv: #006473;
    --common: #7b8793;
    --uncommon: #2f9f6a;
    --rare: #3a78d8;
    --legendary: #b87500;
    color-scheme: light;
  }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; }
h1 em, h2 em { font-style: italic; color: var(--gold-text); }

.sprite { display: none; }
.i { width: 1em; height: 1em; flex: none; }

.wrap { width: min(var(--max), 100% - var(--gutter) * 2); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px; top: 12px; z-index: 50;
  background: var(--gold); color: var(--ink); padding: 10px 16px; border-radius: 10px; font-weight: 700;
}
.skip:focus { left: 12px; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

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

.nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav__inner { display: flex; align-items: center; gap: 24px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 22px; }
.brand img { width: 34px; height: 34px; object-fit: contain; }
.nav__links { display: none; gap: 26px; margin-left: 10px; }
.nav__links a { text-decoration: none; color: var(--muted); font-size: 15px; font-weight: 500; }
.nav__links a:hover { color: var(--text); }
.nav__end { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.theme-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: transparent; color: var(--text); display: grid; place-items: center; cursor: pointer; font-size: 18px;
}
.theme-btn .i-sun { display: none; }
:root[data-theme="light"] .theme-btn .i-sun { display: block; }
:root[data-theme="light"] .theme-btn .i-moon { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-btn .i-sun { display: block; }
  :root:not([data-theme="dark"]) .theme-btn .i-moon { display: none; }
}

.btn {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; font-size: 15px;
  padding: 10px 18px; border-radius: 999px; background: var(--gold); color: var(--ink);
}
.btn:hover { filter: brightness(1.06); }
.btn .i { font-size: 16px; }

@media (min-width: 900px) { .nav__links { display: flex; } }

/* ---------- Store badges ---------- */

.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store {
  display: inline-flex; align-items: center; gap: 11px; text-decoration: none;
  padding: 9px 18px 9px 14px; min-height: 56px; border-radius: 14px;
  background: var(--text); color: var(--bg);
}
.store .i { font-size: 26px; }
.store small { display: block; font-size: 11px; line-height: 1.1; opacity: 0.8; letter-spacing: 0.02em; }
.store strong { display: block; font-size: 18px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.store:hover { transform: translateY(-1px); }

.rating { margin-top: 12px; font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.rating b { color: var(--gold-text); letter-spacing: 1px; }

/* "As featured on": the news brands' own logos, in their colours on light and
   in the page's cream on dark, where black blocks and teal would disappear. */
.featured { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.featured__label { font-size: 13px; color: var(--faint); letter-spacing: 0.02em; }
.featured__logo { display: inline-flex; line-height: 0; }
a.featured__logo { transition: opacity 0.2s ease; }
a.featured__logo:hover { opacity: 0.8; }
.press-logo--bbc { height: 34px; width: auto; }
.press-logo--itv { height: 17px; width: auto; }
.bbc-blocks { fill: var(--bbc-blocks); }
.bbc-news { fill: #eb0000; }
.itv-mark { fill: var(--itv); }

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

.hero { position: relative; padding: clamp(40px, 7vw, 96px) 0 clamp(56px, 8vw, 110px); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(closest-side, var(--gold-wash), transparent 70%);
  pointer-events: none;
}
.hero__grid { position: relative; display: grid; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(46px, 8.2vw, 92px); line-height: 0.98; font-weight: 800; }
.hero h1 span { display: block; }
.hero__lede { margin-top: 24px; font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); max-width: 34em; }
.hero__cta { margin-top: 32px; }
.hero .featured { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); max-width: 30em; }

.hero__stage { position: relative; height: clamp(470px, 50vw, 620px); max-width: 560px; width: 100%; justify-self: center; }
/* The home screen with two cards fanned out from behind it, like a hand being dealt. */
.hero__phone { position: absolute; left: 26%; top: 0; width: 48%; z-index: 2; }
.hero__stage .hero__card { position: absolute; width: 38%; }
.hero__stage .hero__card--back { left: 0; top: 13%; transform: rotate(-9deg); z-index: 1; }
.hero__stage .hero__card--front { right: 0; bottom: 3%; width: 40%; transform: rotate(7deg); z-index: 3; }
@media (max-width: 520px) {
  .hero__stage .hero__card--back { left: 4%; }
  .hero__stage .hero__card--front { right: 4%; }
}

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.05fr 1fr; gap: 40px; }
  .hero__stage { justify-self: end; }
}

/* ---------- Phone frames and screenshot slots ---------- */

.phone {
  /* A modern phone: a thin near-black bezel, a fine metal edge and screen-
     proportioned corners. Screenshots are raw screens, so the frame is ours. */
  position: relative; margin: 0; padding: 2.4%;
  border-radius: 16% / 7.4%;
  background: #0a0c10;
  box-shadow:
    var(--shadow),
    0 0 0 1.5px var(--phone-edge),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.phone img {
  width: 100%; aspect-ratio: 1290 / 2796; object-fit: cover; object-position: top;
  border-radius: 13.6% / 6.3%; background: var(--surface);
}
.phone.is-empty img { display: none; }
.phone.is-empty::after {
  content: attr(data-slot);
  display: grid; place-items: center; text-align: center; padding: 24px;
  aspect-ratio: 1290 / 2796; border-radius: 13.6% / 6.3%;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, var(--line) 14px 15px),
    var(--surface);
  color: var(--faint); font-size: 13px; font-weight: 600; line-height: 1.5; white-space: pre-line;
}

/* ---------- The 3D card ---------- */

.card3d { position: relative; perspective: 1100px; }
.card3d__inner {
  position: relative; border-radius: 5.5% / 3.6%; overflow: hidden;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: var(--shadow);
  will-change: transform;
}
.card3d.is-live .card3d__inner { transition: transform 0.08s linear; }
.card3d__inner img { width: 100%; aspect-ratio: 716 / 1089; object-fit: cover; }
.card3d__sheen {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--sx, 30%) var(--sy, 20%), rgba(255, 255, 255, 0.55), transparent 45%);
  opacity: var(--so, 0.5);
}
.card3d--foil .card3d__sheen {
  mix-blend-mode: color-dodge; opacity: var(--so, 0.35);
  background:
    radial-gradient(circle at var(--sx, 30%) var(--sy, 20%), rgba(255, 255, 255, 0.4), transparent 40%),
    linear-gradient(115deg, #ff8ad8 0%, #ffd36e 22%, #8cf2d8 44%, #8ab4ff 66%, #e29bff 88%);
  background-size: 100% 100%, 220% 220%;
  background-position: 0 0, var(--fx, 30%) var(--fy, 30%);
}

/* ---------- Proof ledger ---------- */

.ledger { border-block: 1px solid var(--line); background: var(--bg-raised); }
.ledger__row { display: grid; grid-template-columns: repeat(2, 1fr); }
.ledger__item { padding: 26px 8px 24px; text-align: center; }
.ledger__item:nth-child(odd) { border-right: 1px solid var(--line); }
.ledger__item:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
.ledger__num { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 4.4vw, 44px); line-height: 1; }
.ledger__label { margin-top: 8px; font-size: 14px; color: var(--muted); }
@media (min-width: 760px) {
  .ledger__row { grid-template-columns: repeat(4, 1fr); }
  .ledger__item { border-bottom: 0 !important; border-right: 1px solid var(--line); }
  .ledger__item:last-child { border-right: 0; }
}

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

.section { padding: clamp(72px, 10vw, 136px) 0; }
.section--raised { background: var(--bg-raised); }
.section__head { max-width: 40em; }
.section__head--center { margin-inline: auto; text-align: center; }
.kicker { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 14px; }
.section h2 { font-size: clamp(36px, 5.4vw, 60px); line-height: 1.04; }
.section__lede { margin-top: 20px; font-size: clamp(17px, 1.5vw, 19px); color: var(--muted); }

.split { display: grid; gap: 56px; align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: 80px; }
  .split--flip > :first-child { order: 2; }
}

.points { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 22px; }
.point { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.point__icon {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  background: var(--gold-wash); color: var(--gold-text); font-size: 21px;
}
.point h3 { font-family: var(--sans); font-size: 18px; font-weight: 700; letter-spacing: 0; }
.point p { margin-top: 4px; color: var(--muted); font-size: 16px; }

/* Watch: a small hero thumbnail. Instagram's player only loads in the dialog
   once someone asks for it, so visitors who don't watch get no Instagram
   scripts or cookies. */
.watch-chip {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 20px; padding: 6px 18px 6px 6px;
  border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface);
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.watch-chip:hover, .watch-chip:focus-visible { border-color: var(--gold); transform: translateY(-1px); }
.watch-chip__thumb {
  position: relative; flex: none; width: 44px; height: 60px; border-radius: 10px; overflow: hidden; background: #000;
}
.watch-chip__thumb img { width: 100%; height: 100%; object-fit: cover; }
.watch-chip__play {
  position: absolute; inset: 0; margin: auto; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: var(--gold); color: var(--ink);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.watch-chip__play svg { width: 11px; height: 11px; margin-left: 1px; }
.watch-chip__text { display: grid; gap: 2px; line-height: 1.2; }
.watch-chip__text strong { font-size: 15px; font-weight: 700; }
.watch-chip__text small { font-size: 13px; color: var(--muted); }

.video-dialog {
  /* Instagram's embed is a 4:5 video plus ~212px of chrome, so narrow it on short
     screens to keep the whole player (and its controls) in view. */
  width: min(400px, calc(100vw - 32px), max(260px, calc((100dvh - 330px) * 0.8)));
  max-height: calc(100dvh - 32px); padding: 0; border: 0;
  background: transparent; overflow: visible; color: #f4efe4;
}
.video-dialog::backdrop { background: rgba(5, 10, 16, 0.82); backdrop-filter: blur(4px); }
.video-dialog__frame iframe {
  display: block; width: 100%; border: 0; border-radius: 16px; background: #fff;
  max-height: calc(100dvh - 110px);
}
.video-dialog__close {
  position: absolute; top: -14px; right: -14px; z-index: 1; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; border: 0; cursor: pointer; background: var(--gold); color: var(--ink);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.video-dialog__close svg { width: 18px; height: 18px; }
.video-dialog__note { margin-top: 10px; text-align: center; font-size: 12.5px; color: rgba(244, 239, 228, 0.72); }
.video-dialog__note a { color: inherit; }
@media (max-width: 480px) { .video-dialog__close { top: -48px; right: 0; } .video-dialog { margin-top: 64px; } }

/* Catch */
.catch__visual { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: 18px; }
.catch__visual .phone { width: min(300px, 62%); }
.catch__visual .phone + .phone { margin-top: 64px; }
.biomes { margin-top: 64px; }
.biomes__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
@media (min-width: 760px) { .biomes__row { grid-template-columns: repeat(8, 1fr); } }
.biome { margin: 0; }
.biome img { border-radius: 14px; aspect-ratio: 9 / 13; object-fit: cover; object-position: center 62%; border: 1px solid var(--line); }
.biome figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); text-align: center; }
.caption { font-size: 15px; color: var(--muted); }

/* Cards */
.cards { position: relative; overflow: hidden; }
.cards::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 38%, var(--gold-wash), transparent 70%);
}
.cards__stage { position: relative; display: flex; justify-content: center; align-items: flex-end; margin-top: 56px; min-height: 360px; }
.cards__stage .card3d { width: min(330px, 70vw); z-index: 2; }
.cards__back { position: absolute; width: min(250px, 50vw); bottom: 18px; opacity: 0.92; }
.cards__back--l { transform: translateX(-62%) rotate(-10deg); }
.cards__back--r { transform: translateX(62%) rotate(10deg); }
.cards__back img { border-radius: 5.5% / 3.6%; box-shadow: var(--shadow); }
.cards__hint { text-align: center; margin-top: 22px; font-size: 14px; color: var(--faint); }

.tiers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 56px; }
@media (min-width: 760px) { .tiers { grid-template-columns: repeat(4, 1fr); } }
.tier { border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: var(--surface); }
.tier__name { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tier); }
.tier__bird { margin-top: 10px; font-family: var(--display); font-size: 21px; font-weight: 700; line-height: 1.2; }
.tier__pts { margin-top: 4px; font-size: 14px; color: var(--muted); }
.tier--common { --tier: var(--common); }
.tier--uncommon { --tier: var(--uncommon); }
.tier--rare { --tier: var(--rare); }
.tier--legendary { --tier: var(--legendary); }

/* Your Aviary: the light or dark screenshot, following the site's theme. */
.aviary { margin-top: 64px; gap: 40px; }
.aviary__title { font-size: clamp(30px, 4vw, 42px); line-height: 1.1; }
.aviary .phone { width: min(290px, 70%); justify-self: center; }
.phone--themed .shot-light { display: none; }
:root[data-theme="light"] .phone--themed .shot-light { display: block; }
:root[data-theme="light"] .phone--themed .shot-dark { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .phone--themed .shot-light { display: block; }
  :root:not([data-theme="dark"]) .phone--themed .shot-dark { display: none; }
}

/* Prismwings: the one band that stays dark in both themes, like a jewel case.
   The foil uses the app's own Prismwing colours. */
.prismwing {
  --text: #f6f1e7; --muted: rgba(246, 241, 231, 0.72); --faint: rgba(246, 241, 231, 0.5);
  --line: rgba(246, 241, 231, 0.12);
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(84px, 10vw, 150px) 0; background: #060a13; color: var(--text);
}
.prismwing::before {
  /* a faint field of stars */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.5; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 22%, #fff, transparent 60%), radial-gradient(1px 1px at 28% 68%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 44% 14%, #ffe08a, transparent 60%), radial-gradient(1px 1px at 63% 82%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 81% 18%, #86f0ff, transparent 60%), radial-gradient(1px 1px at 92% 58%, #fff, transparent 60%),
    radial-gradient(1px 1px at 6% 88%, #ff9be0, transparent 60%), radial-gradient(1px 1px at 52% 46%, #fff, transparent 60%);
}
.prismwing__aurora {
  position: absolute; inset: -25%; z-index: -2; pointer-events: none; filter: blur(20px);
  background:
    radial-gradient(32% 30% at 72% 42%, rgba(226, 155, 255, 0.24), transparent 70%),
    radial-gradient(28% 26% at 86% 72%, rgba(140, 242, 216, 0.16), transparent 70%),
    radial-gradient(26% 24% at 62% 22%, rgba(255, 211, 110, 0.14), transparent 70%),
    radial-gradient(30% 30% at 18% 82%, rgba(138, 180, 255, 0.12), transparent 70%);
  animation: aurora-drift 18s ease-in-out infinite alternate;
}
@keyframes aurora-drift { to { transform: translate3d(-4%, 3%, 0) rotate(6deg); } }
.prismwing__grid { position: relative; display: grid; gap: 64px; align-items: center; }
.prismwing h2 { font-size: clamp(40px, 5.6vw, 72px); line-height: 1.02; color: var(--text); }
.foil-text {
  background: linear-gradient(100deg, #ff8ad8, #ffd36e, #8cf2d8, #8ab4ff, #e29bff, #ff8ad8);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: foil-shift 7s linear infinite;
}
@keyframes foil-shift { to { background-position: 200% 0; } }
.prismwing__kicker { display: inline-flex; align-items: center; gap: 9px; color: #ffe08a; }
.prismwing__kicker .prism-star { width: 15px; height: 15px; }
.prismwing__lede { margin-top: 24px; max-width: 32em; font-size: clamp(17px, 1.5vw, 19px); color: var(--muted); }
.prismwing__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; padding-top: 28px;
  border-top: 1px solid var(--line); max-width: 34em;
}
.prismwing__stats div { display: grid; gap: 4px; }
.prismwing__stats dd { order: -1; margin: 0; font-family: var(--display); font-size: clamp(26px, 3vw, 38px); font-weight: 700; line-height: 1; color: var(--text); }
.prismwing__stats dt { font-size: 13px; color: var(--faint); }

.prismwing__stage { position: relative; display: grid; place-items: center; padding: 24px 0; }
.prismwing__halo {
  position: absolute; width: min(520px, 115%); aspect-ratio: 1; border-radius: 50%; opacity: 0.55; filter: blur(48px);
  background: conic-gradient(from 0deg, #ff8ad8, #ffd36e, #8cf2d8, #8ab4ff, #e29bff, #ff8ad8);
  animation: halo-spin 22s linear infinite;
}
@keyframes halo-spin { to { transform: rotate(360deg); } }
.card3d--prismwing { width: min(360px, 74vw); transform: rotate(-3deg); }
/* The real card from the app, cut out with its own rounded corners. */
.card3d--prismwing .card3d__inner { border-radius: 6.1% / 4%; box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.8), 0 0 50px -10px rgba(255, 211, 110, 0.25); }
.card3d--prismwing .card3d__inner img { aspect-ratio: 760 / 1157; }
.prismwing__foil {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: 0.14;
  background: repeating-linear-gradient(115deg, #ff8ad8 0%, #ffd36e 7%, #8cf2d8 14%, #8ab4ff 21%, #e29bff 28%, #ff8ad8 35%);
  background-size: 300% 300%; background-position: var(--fx, 30%) var(--fy, 30%);
}
.card3d--prismwing:not(.is-live) .prismwing__foil { animation: foil-idle 9s ease-in-out infinite alternate; }
@keyframes foil-idle { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
.prismwing__foil::after {
  /* a glint that crosses the card every few seconds */
  content: ""; position: absolute; inset: 0; mix-blend-mode: overlay;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.9) 50%, transparent 62%);
  background-size: 260% 100%; background-position: 160% 0;
  animation: glint 5.5s ease-in-out 1.2s infinite;
}
@keyframes glint { 0% { background-position: 160% 0; } 45%, 100% { background-position: -60% 0; } }
.prismwing__spark { position: absolute; width: 22px; height: 22px; animation: twinkle 3.2s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(255, 224, 138, 0.7)); }
.prismwing__spark svg { width: 100%; height: 100%; }
.prismwing__spark--1 { top: 8%; left: 14%; }
.prismwing__spark--2 { top: 20%; right: 8%; width: 14px; height: 14px; animation-delay: 0.8s; }
.prismwing__spark--3 { bottom: 14%; left: 8%; width: 16px; height: 16px; animation-delay: 1.6s; }
.prismwing__spark--4 { bottom: 6%; right: 16%; animation-delay: 2.3s; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
@media (min-width: 900px) {
  .prismwing__grid { grid-template-columns: 1.05fr 1fr; gap: 48px; }
}

/* Daily play bento */
.bento { display: grid; gap: 16px; margin-top: 56px; }
@media (min-width: 900px) { .bento { grid-template-columns: 1fr 1.3fr 1fr; } }
.tile {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  padding: 28px 28px 0; display: flex; flex-direction: column; overflow: hidden;
}
.tile h3 { font-size: 26px; line-height: 1.15; }
.tile p { margin-top: 10px; color: var(--muted); font-size: 16px; }
.tile .tags { margin-top: 16px; }
.tile .phone { width: min(240px, 78%); margin: 28px auto -64px; }
/* Golden Hour in front, Twilight Hour fanned behind it. */
.phone-pair { display: flex; justify-content: center; align-items: flex-start; margin: 28px auto -64px; width: 100%; }
.tile .phone-pair .phone { width: min(250px, 64%); margin: 0; }
.phone-pair__back { transform: rotate(-6deg) translateX(18%); margin-top: 30px !important; opacity: 0.96; }
.phone-pair__front { transform: rotate(4deg) translateX(-14%); z-index: 2; }
.tile--golden { background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 16%, var(--surface)), var(--surface) 60%); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { font-size: 13px; font-weight: 600; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); }

/* Nests */
.nests__visual { position: relative; display: flex; justify-content: center; align-items: flex-start; }
.nests__visual .phone { width: min(236px, 38%); margin-top: 72px; }
.nests__visual .phone:nth-child(2) { margin-top: 0; margin-inline: -9%; z-index: 2; }
.stat-inline { display: flex; align-items: baseline; gap: 12px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.stat-inline strong { font-family: var(--display); font-size: 40px; font-weight: 800; line-height: 1; }
.stat-inline span { color: var(--muted); font-size: 15px; }
.fineprint { margin-top: 18px; font-size: 14px; color: var(--faint); }

/* Map */
.mapband { position: relative; overflow: hidden; }
.mapband__num { font-family: var(--display); font-weight: 800; font-size: clamp(64px, 12vw, 150px); line-height: 0.9; letter-spacing: -0.03em; color: var(--gold-text); }
.mapband__visual { display: flex; justify-content: center; }
.mapband__visual .phone { width: min(300px, 70%); }

/* Friends */
.trio { display: grid; gap: 16px; margin-top: 48px; }
@media (min-width: 900px) { .trio { grid-template-columns: repeat(3, 1fr); } }
.trio .tile { padding-bottom: 28px; }
.trio .tile .phone { margin-bottom: -96px; }
.pro-note { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 6px; background: var(--gold); color: var(--ink); vertical-align: 3px; font-family: var(--sans); }

/* Privacy */
.section--tight { padding: clamp(56px, 7vw, 96px) 0; }
/* The birds: Lifer's hand-drawn sprites flying in and perching, with the
   app's own timings (see BirdFlyInOverlay in the app). Motion lives in v2.js. */
.flock { position: relative; padding: clamp(72px, 10vw, 136px) 0 clamp(48px, 6vw, 80px); overflow: hidden; }
.flock__head { max-width: var(--max); }
.flock__head .section__lede { max-width: 36em; }
.flock__stage {
  --sky-top: #f6f0e3; --sky-mid: #eef0e4; --sky-low: #e6ecdd; --sun: rgba(255, 214, 140, 0.32);
  --cloud: rgba(255, 255, 255, 0.75);
  --bark: #6f5132; --bark-dark: #4d3721; --bark-light: #8c6a45; --leaf: #7f9b5a; --leaf-2: #9db574; --leaf-3: #5f7d45;
  --bw: clamp(124px, 16vw, 232px);
  position: relative; height: clamp(360px, 36vw, 500px); margin-top: clamp(8px, 2vw, 24px);
  isolation: isolate; overflow: hidden; touch-action: manipulation; user-select: none; -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
}
:root:not([data-theme="light"]) .flock__stage {
  --sky-top: #07111b; --sky-mid: #0b1a29; --sky-low: #0e2030; --sun: rgba(214, 226, 255, 0.11);
  --cloud: rgba(200, 220, 255, 0.06);
  --bark: #3e2d1e; --bark-dark: #2a1e13; --bark-light: #5a4330; --leaf: #3f5a37; --leaf-2: #4d6b43; --leaf-3: #2f4429;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .flock__stage {
    --sky-top: #f6f0e3; --sky-mid: #eef0e4; --sky-low: #e6ecdd; --sun: rgba(255, 214, 140, 0.32);
    --cloud: rgba(255, 255, 255, 0.75);
    --bark: #6f5132; --bark-dark: #4d3721; --bark-light: #8c6a45; --leaf: #7f9b5a; --leaf-2: #9db574; --leaf-3: #5f7d45;
  }
}
.flock__sky {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(26% 40% at 84% 20%, var(--sun), transparent 72%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 48%, var(--sky-low) 100%);
}
:root:not([data-theme="light"]) .flock__sky::after {
  /* stars, dark theme only */
  content: ""; position: absolute; inset: 0; opacity: 0.7;
  background-image:
    radial-gradient(1px 1px at 8% 18%, #fff, transparent 60%), radial-gradient(1px 1px at 23% 34%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 37% 12%, #ffe08a, transparent 60%), radial-gradient(1px 1px at 54% 28%, #fff, transparent 60%),
    radial-gradient(1px 1px at 66% 9%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 91% 38%, #fff, transparent 60%),
    radial-gradient(1px 1px at 73% 44%, #fff, transparent 60%), radial-gradient(1px 1px at 14% 52%, #fff, transparent 60%);
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .flock__sky::after { content: none; } }
.flock__cloud {
  position: absolute; display: block; border-radius: 50%; background: var(--cloud); filter: blur(18px);
  animation: cloud-drift 90s linear infinite;
}
.flock__cloud--1 { width: 34%; height: 18%; top: 14%; left: -10%; }
.flock__cloud--2 { width: 24%; height: 12%; top: 32%; left: 40%; animation-duration: 120s; animation-delay: -40s; }
.flock__cloud--3 { width: 28%; height: 14%; top: 8%; left: 70%; animation-duration: 105s; animation-delay: -70s; }
@keyframes cloud-drift { from { transform: translateX(-40vw); } to { transform: translateX(110vw); } }
.flock__branch { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flock__birds { position: absolute; inset: 0; }

.fl-bird {
  position: absolute; left: 0; top: 0; width: var(--bw); cursor: pointer; opacity: 0;
  transform-origin: 50% 50%; will-change: transform, opacity; -webkit-tap-highlight-color: transparent;
}
.fl-bird:focus-visible { outline: none; }
.fl-face, .fl-body { transform-origin: 52.5% 74.5%; }
.fl-bird svg { display: block; width: 100%; height: auto; overflow: visible; }
.fl-bird .sp-wing { transform-box: fill-box; transform-origin: 80% 32%; transition: transform 0.15s ease-out; }
.fl-bird .sp-head { transform-box: fill-box; transform-origin: 45% 80%; }
.fl-bird .sp-leg { transition: opacity 0.12s ease; }
.fl-bird.is-flying .sp-leg { opacity: 0; }
/* The app's wingbeat: 85ms up (ease-out quad), 155ms down (ease-in quad). */
.fl-bird.is-flying .sp-wing { animation: fl-flap 240ms infinite; transition: none; }
@keyframes fl-flap {
  0% { transform: rotate(-20deg); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  35% { transform: rotate(32deg); animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); }
  100% { transform: rotate(-20deg); }
}
.fl-bird.is-flying .fl-body { animation: fl-bob 240ms linear infinite; }
@keyframes fl-bob {
  0%, 35%, 100% { transform: translateY(0); }
  10%, 81% { transform: translateY(calc(var(--bw) * -0.032)); }
}
.fl-name {
  position: absolute; left: 52.5%; top: 84%; transform: translate(-50%, 4px); white-space: nowrap;
  padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em;
  color: var(--text); background: var(--surface); background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.35); border: 1px solid var(--line);
  opacity: 0; transition: opacity 0.35s ease, transform 0.35s ease; pointer-events: none;
}
.fl-bird.is-perched.is-named .fl-name,
.fl-bird.is-perched:hover .fl-name { opacity: 1; transform: translate(-50%, 0); transition-delay: 0.25s; }
.fl-bird.is-perched:hover .fl-name { transition-delay: 0s; }

.flock__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: 8px; }
.flock__stats { display: flex; flex-wrap: wrap; gap: 14px 40px; }
.flock__stats div { display: grid; gap: 2px; }
.flock__stats dd { order: -1; margin: 0; font-family: var(--display); font-size: clamp(28px, 3vw, 38px); font-weight: 700; line-height: 1; }
.flock__stats dt { font-size: 13px; color: var(--muted); }
.flock__aside { display: grid; gap: 8px; justify-items: end; }
@media (max-width: 760px) { .flock__aside { justify-items: start; } }
.flock__join { font-size: 14px; font-weight: 700; color: var(--gold-text); text-decoration: none; }
.flock__join span { display: inline-block; transition: transform 0.2s ease; }
.flock__join:hover span { transform: translateX(3px); }
.flock__hint { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.flock__hint-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--gold-wash); }
@media (prefers-reduced-motion: reduce) { .flock__hint { display: none; } }

/* Citizen science: one compact card, sage rather than gold so it reads as a
   different kind of promise from the rest of the page. */
.section--flush-bottom { padding-bottom: 0; }
.science {
  display: grid; gap: 28px; align-items: center; padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--sage-line); border-radius: 28px;
  background: linear-gradient(135deg, var(--sage-wash), transparent 70%), var(--surface);
}
.science .kicker { color: var(--sage); }
.science h2 { font-size: clamp(30px, 3.6vw, 44px); }
.science h2 em { white-space: nowrap; }
.science p:not(.kicker) { margin-top: 14px; color: var(--muted); max-width: 40em; }
.science__side { display: grid; gap: 18px; justify-items: start; }
.science__logo { display: block; width: 200px; }
.science__logo img { width: 100%; height: auto; }
.science__logo .shot-light { display: none; }
:root[data-theme="light"] .science__logo .shot-light { display: block; }
:root[data-theme="light"] .science__logo .shot-dark { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .science__logo .shot-light { display: block; }
  :root:not([data-theme="dark"]) .science__logo .shot-dark { display: none; }
}
.science__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.science__chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--sage-line); background: var(--sage-wash); color: var(--sage);
  font-size: 13px; font-weight: 700;
}
.science__chip--live { border-color: var(--sage); }
.science__dot { width: 8px; height: 8px; border-radius: 50%; background: #3fae5f; animation: live-pulse 2.4s ease-out infinite; }
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(63, 174, 95, 0.5); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(63, 174, 95, 0); }
}
@media (min-width: 900px) {
  .science { grid-template-columns: 1.5fr 1fr; gap: 48px; }
  .science__side { justify-items: end; }
  .science__chips { justify-content: flex-end; }
}

/* Where Lifer works: a quiet footnote under Get the app */
.regions-mini { max-width: 40em; margin: 36px auto 0; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.regions-mini strong { color: var(--text); font-weight: 700; }
.regions-mini details { margin-top: 8px; }
.regions-mini summary { cursor: pointer; display: inline; font-weight: 600; color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.regions-mini summary:hover { text-decoration-color: currentColor; }
.regions-mini details p { margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--faint); }

.promises { display: grid; gap: 24px; margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--line); }
.promises--open { margin-top: 36px; padding-top: 0; border-top: 0; }
@media (min-width: 900px) { .promises { grid-template-columns: repeat(3, 1fr); } }
.promise h3 { font-family: var(--sans); font-size: 17px; font-weight: 700; letter-spacing: 0; }
.promise p { margin-top: 6px; color: var(--muted); font-size: 15px; }

/* Get the app */
.getapp { text-align: center; }
.getapp img.logo { width: 76px; height: 76px; margin: 0 auto 26px; }
.getapp h2 { font-size: clamp(40px, 6vw, 68px); line-height: 1.02; }
.getapp .section__lede { max-width: 32em; margin-inline: auto; }
.getapp .stores { justify-content: center; margin-top: 34px; }
.getapp .rating { justify-content: center; }
.getapp .featured { justify-content: center; margin-top: 30px; }

/* Footer */
.footer { border-top: 1px solid var(--line); padding: 40px 0 48px; font-size: 14px; color: var(--muted); }
.footer__row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 18px; margin-left: auto; }
.footer__links a { text-decoration: none; }
.footer__links a:hover { color: var(--text); }
.footer__links .i { vertical-align: -2px; margin-right: 5px; }
.footer__legal { margin-top: 22px; font-size: 12.5px; color: var(--faint); line-height: 1.6; }
.footer__legal + .footer__legal { margin-top: 6px; }
.footer__legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer__legal a:hover { color: var(--text); }

/* ---------- Motion ---------- */

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

.hero__phone, .hero__card, .hero h1 span, .hero__lede, .hero__cta, .hero .featured { animation: rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hero h1 span:nth-child(2) { animation-delay: 0.08s; }
.hero__lede { animation-delay: 0.16s; }
.hero__cta { animation-delay: 0.24s; }
.hero .featured { animation-delay: 0.32s; }
.hero__phone { animation-delay: 0.1s; }
.hero__card--back { animation: deal-left 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.7s both; }
.hero__card--front { animation: deal-right 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.85s both; }

@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes deal-left { from { opacity: 0; transform: translateX(55%) rotate(0deg) scale(0.9); } }
@keyframes deal-right { from { opacity: 0; transform: translateX(-55%) rotate(0deg) scale(0.9); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .card3d__inner { transform: none !important; }
}