/* Biojrnl home page (2026-10-23). Fonts are served from our own origin:
   the site CSP allows font-src 'self' only, and no visitor IP goes to a font
   host. */
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/Fraunces.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('/fonts/InstrumentSans.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}
/* Layout: simple, one idea per section, real app screens, in Biojrnl's own look.
   Hero = the app icon's coral-to-plum square with a thin-bezel phone rising out
   of it, cycling four real screens in the app's three themes. The people
   section types a name in each theme's colour and lifts that person's card.
   Three rows, each on a stage tinted for one theme (Tide, Blush, Dusk). One
   dark band for the no-AI promise. One light look on purpose. */
:root {
  color-scheme: light;
  --paper: #F1F5F7;
  --white: #FFFFFF;
  --ink: #0F1B22;
  --ink-2: #3F5A69;
  --muted: #56697A;
  --tide: #3D6E8E;
  --tide-deep: #2C5470;
  --blush: #B3576F;
  --dusk: #B8772B;
  --night: #0F2430;
  --night-ink: #E7EEF3;
  --night-ink-2: #A8C0CF;
  --night-line: rgba(231, 238, 243, .16);
  --coral: #EF8681;
  --plum: #C95F85;
  --amber: #C88A2E;
  --line: rgba(15, 27, 34, .09);
  --card-shadow: 0 1px 2px rgba(15, 27, 34, .05), 0 8px 24px rgba(15, 27, 34, .06);
  --lift-shadow: 0 2px 4px rgba(15, 27, 34, .06), 0 22px 44px rgba(15, 27, 34, .14);
  --f-head: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --push: cubic-bezier(.32, .72, 0, 1);
  --spring: cubic-bezier(.34, 1.36, .52, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink-2);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 30;
  background: var(--white);
}
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0; }
button { font: inherit; }
h1, h2, h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--f-head);
  font-weight: 500;
  font-optical-sizing: auto;
  letter-spacing: -.015em;
  text-wrap: balance;
}
:focus-visible { outline: 3px solid var(--tide); outline-offset: 3px; border-radius: 8px; }
.band :focus-visible { outline-color: var(--night-ink); }

.wrap {
  max-width: 1120px;
  margin-inline: auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.sec { padding-block: 76px; }
.sec--paper { background: var(--paper); }
.sec h2 { font-size: clamp(32px, 2.4vw + 20px, 50px); line-height: 1.1; }
.sec-sub { margin-top: 12px; max-width: 32em; font-size: 19px; color: var(--muted); }
@media (min-width: 960px) { .sec { padding-block: 112px; } }

/* ── Header ── */
.top {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: color-mix(in srgb, var(--white) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
  transition: box-shadow .25s;
}
.top.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 6px 20px rgba(15, 27, 34, .05); }
.top-in { display: flex; align-items: center; gap: 16px; height: 70px; }
.wm img { height: 30px; width: auto; }
.nav { display: flex; gap: 28px; margin-left: auto; }
.nav a { font-size: 16px; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.nav a:hover { color: var(--ink); }
.get {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--tide-deep);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 4px 12px rgba(44, 84, 112, .25);
}
@media (max-width: 859px) { .nav { display: none; } .get { margin-left: auto; } }

/* ── Store badges: equal size; Google Play carries its own colours ── */
.stores { display: flex; gap: 12px; }
.badge {
  flex: 0 1 200px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 58px;
  padding: 0 14px;
  border-radius: 13px;
  background: #000000;
  color: #FFFFFF;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 6px 16px rgba(0, 0, 0, .16);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.badge:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 12px 24px rgba(0, 0, 0, .22); }
.badge svg { width: 26px; height: 26px; flex: none; }
.badge .apple { fill: #FFFFFF; }
.badge span { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.badge small { font-size: 12.5px; opacity: .9; }
.badge b { font-size: 19px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
@media (max-width: 639px) { .badge { flex: 1 1 0; } }

/* ── Phone: an iPhone 16 Pro in natural titanium, standing in a square ──
   Everything is sized in cqw (hundredths of the square's width) so the
   frame keeps the real proportions at any size: a thin titanium rim, a thin
   black bezel, corners that follow the screen's own curve, the Dynamic
   Island, and the side buttons. The phone is narrower than the square's
   flat bottom edge, so the square cuts it in a clean straight line. */
.stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  border-radius: 20%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
  container-type: inline-size;
}
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 18% 0%, rgba(255, 255, 255, .28), transparent 60%);
  pointer-events: none;
  z-index: 1;
}
.device {
  --ti: linear-gradient(90deg, #707177 0%, #D3D4D8 5%, #9A9BA0 12%, #6A6B70 50%, #9A9BA0 88%, #D3D4D8 95%, #707177 100%);
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 10%;
  width: 58cqw;
  padding: .8cqw .8cqw 0;
  border-radius: 9.6cqw 9.6cqw 0 0;
  background: var(--ti);
  transform: translate(-50%, var(--rise, 0px));
  will-change: transform;
  box-shadow:
    inset 0 .25cqw 0 rgba(255, 255, 255, .55),
    0 3.2cqw 6cqw -1.6cqw rgba(30, 10, 25, .45),
    0 1cqw 2.4cqw -.8cqw rgba(0, 0, 0, .3);
}
/* Side buttons: Action and volume on the left, side button on the right. */
.device::before, .device::after {
  content: "";
  position: absolute;
  width: .7cqw;
  background: linear-gradient(90deg, #5E5F64, #B9BABE 55%, #7E7F84);
}
.device::before {
  left: -.62cqw;
  top: 17cqw;
  height: 5cqw;
  border-radius: .35cqw 0 0 .35cqw;
  box-shadow: 0 9.5cqw 0 0 #8D8E93, 0 19cqw 0 0 #8D8E93;
}
.device::after {
  right: -.62cqw;
  top: 24cqw;
  height: 13cqw;
  border-radius: 0 .35cqw .35cqw 0;
}
.screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 600 / 1304;
  border: 1.2cqw solid #060607;
  border-bottom: 0;
  border-radius: 8.8cqw 8.8cqw 0 0;
  background: #ECF0F2;
  box-sizing: content-box;
}
.screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(128deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 30%);
  pointer-events: none;
}
/* The PDF: two real pages from the app's export, lying on the square. */
.papers {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 10%;
  width: 74%;
  transform: translate(-50%, var(--rise, 0px));
  will-change: transform;
}
.page {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  border-radius: 6px;
  background: #FFFFFF;
  transform: rotate(-2deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 26px 50px -16px rgba(70, 40, 10, .5);
}
.page--back { position: absolute; left: 0; top: 0; transform: translate(10%, -3%) rotate(5deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 16px 36px -14px rgba(70, 40, 10, .4); }
.screen img { position: absolute; inset: 0; width: 100%; height: auto; }
.screen::after {
  content: "";
  position: absolute;
  top: 1.35cqw;
  left: 50%;
  width: 16.6cqw;
  height: 4.8cqw;
  border-radius: 999px;
  background: #050506;
  box-shadow: inset 0 0 0 .15cqw rgba(255, 255, 255, .05);
  transform: translateX(-50%);
  z-index: 4;
}
.stage--icon { background: linear-gradient(150deg, var(--coral) 0%, var(--plum) 100%); }
.stage--tide { background: linear-gradient(150deg, #DCE8EF 0%, #B9D0DE 100%); }
.stage--blush { background: linear-gradient(150deg, #F8E0E6 0%, #EBBCCA 100%); }
.stage--dusk { background: linear-gradient(150deg, #F6E6CB 0%, #E2C08D 100%); }

/* ── Hero ── */
.hero { padding-block: 24px 72px; }
.hero-in { display: grid; gap: 44px; align-items: center; }
.hero h1 { max-width: 11ch; font-size: clamp(42px, 4vw + 22px, 70px); line-height: 1.03; letter-spacing: -.026em; }
.lede { margin-top: 20px; max-width: 30em; font-size: 19px; color: var(--ink-2); }
.hero .stores { margin-top: 30px; }
.fine { margin-top: 14px; font-size: 15px; color: var(--muted); }
.show { width: min(100%, 480px); margin-inline: auto; }
/* The hero square takes the colour of the theme on screen: Blush is the app
   icon's own coral-to-plum, then Tide and Dusk. */
.show { --cur: #C95F85; }
.show .stage { background: #C95F85; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 30px 60px -24px rgba(15, 27, 34, .45); }
.tint { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--ease); }
.tint.is-on { opacity: 1; }
.tint--blush { background: linear-gradient(150deg, var(--coral) 0%, var(--plum) 100%); }
.tint--tide { background: linear-gradient(150deg, #A9C9DC 0%, #3D6E8E 100%); }
.tint--dusk { background: linear-gradient(150deg, #EDB066 0%, #5B3448 100%); }
/* Hero motion. On arrival the headline rises word by word while the square
   and the phone fade in where they sit (no rise from below). Every few
   seconds the next screen fades in over the last at its normal resting
   place, with a sweep of light across the glass, the square takes the new
   theme's colour, and each screen drifts gently up from rest while it is
   shown. On a computer the phone leans a little toward the pointer. */
.hero h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.hero h1 .w > span { display: inline-block; animation: wordup 1s var(--ease) backwards; animation-delay: calc(.1s + var(--k) * 75ms); }
@keyframes wordup { from { transform: translateY(110%); } }
.hero .lede, .hero .stores, .hero .fine { animation: fadeup .8s var(--ease) backwards; }
.hero .lede { animation-delay: .5s; }
.hero .stores { animation-delay: .62s; }
.hero .fine { animation-delay: .74s; }
@keyframes fadeup { from { opacity: 0; transform: translateY(14px); } }
.show .stage { animation: fadein 1s .15s var(--ease) backwards; }
@keyframes fadein { from { opacity: 0; } }
.glow {
  position: absolute;
  z-index: 1;
  left: 12%;
  top: 14%;
  width: 76%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, 0) 62%);
  transform: translate(var(--gx, 0px), var(--gy, 0px));
  pointer-events: none;
}
.show .device {
  transform: translate(-50%, 0) perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  animation: fadein .9s .35s var(--ease) backwards;
}
/* Each new screen fades in exactly where a phone would show it, at the top
   of its page. It rests there a moment, then scrolls smoothly up to show what
   is further down. */
.shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .8s var(--ease);
}
.shot.is-on { z-index: 1; opacity: 1; }
.shot.is-out { opacity: 0; transition: opacity .45s .5s var(--ease); }
.shot img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
.shot.is-on img, .shot.is-out img { animation: pan 5.6s .3s linear both; }
.shot.first.is-on img, .shot.first.is-out img { animation-delay: .9s; }
/* Starts where a phone would really show the page (the empty status strip
   already off the top), then keeps drifting up at the same pace. */
@keyframes pan { from { transform: translateY(-5%); } to { transform: translateY(-15%); } }
.sheen {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, .4) 48%, rgba(255, 255, 255, 0) 62%);
  background-size: 260% 100%;
  background-position: 140% 0;
}
.sheen.sweep { animation: sweep 1.3s var(--ease) both; }
@keyframes sweep { 0% { opacity: 0; background-position: 140% 0; } 18% { opacity: 1; } 100% { opacity: 0; background-position: -60% 0; } }
.show .screen::after { z-index: 4; }
.reel { animation: fadeup .8s 1.1s var(--ease) backwards; }
.cap span { transition: opacity .28s var(--ease); }
.cap.swap span { opacity: 0; }
.reel { display: grid; gap: 12px; margin-top: 18px; }
.cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; min-height: 30px; font-size: 16px; font-weight: 600; color: var(--ink); }
.th {
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cur) 13%, var(--white));
  color: color-mix(in srgb, var(--cur) 82%, var(--ink));
  font-size: 13.5px;
  font-weight: 600;
  transition: background .6s, color .6s;
}
.bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 280px; width: 100%; margin-inline: auto; }
.bar {
  position: relative;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.bar::before, .bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
  height: 4px;
  border-radius: 4px;
}
.bar::before { background: rgba(15, 27, 34, .12); }
.bar::after { background: var(--cur); transform: scaleX(0); transform-origin: left; transition: background .6s; }
.bar.done::after { transform: scaleX(1); }
.bar.is-on::after { animation: fill var(--dur, 4.2s) linear both; }
.reel.paused .bar.is-on::after { animation: none; transform: scaleX(1); }
@keyframes fill { to { transform: scaleX(1); } }
@media (min-width: 900px) {
  .hero { padding-block: 44px 108px; }
  .hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
  .show { margin-inline: auto 0; }
}

/* ── A record for each person ── */
/* The name sits in a profile chip, like the app's own profile switcher. It
   rolls up to the next person, takes their colour and resizes to fit. */
.who-h { white-space: nowrap; }
.sw {
  --t: var(--blush);
  display: inline-block;
  height: 1.24em;
  margin-left: .08em;
  overflow: hidden;
  vertical-align: -.27em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--t) 13%, var(--white));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--t) 28%, transparent), 0 6px 18px -8px color-mix(in srgb, var(--t) 60%, transparent);
  transition: width .6s var(--spring), background-color .6s var(--ease), box-shadow .6s var(--ease);
}
.sw-track { display: flex; flex-direction: column; align-items: flex-start; transition: transform .7s var(--spring); }
.sw-item {
  display: flex;
  align-items: center;
  gap: .2em;
  height: 1.24em;
  padding: 0 .38em 0 .14em;
  white-space: nowrap;
  color: color-mix(in srgb, var(--t) 88%, var(--ink));
}
.sw-av {
  flex: none;
  width: .92em;
  height: .92em;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--t);
  color: #FFFFFF;
  font-family: var(--f-body);
  letter-spacing: 0;
}
.sw-av b { font-size: .42em; font-weight: 700; line-height: 1; }
.people { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 14px; }
.person {
  --t: var(--tide);
  position: relative;
  min-width: 0;
  padding: 22px 22px 20px;
  border: 1.5px solid var(--line);
  border-radius: 22px;
  background: var(--white);
  box-shadow: var(--card-shadow);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s, background-color .45s;
}
.person.is-on {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--t) 55%, transparent);
  background: color-mix(in srgb, var(--t) 6%, var(--white));
  box-shadow: var(--lift-shadow);
}
.p-top { display: flex; align-items: center; gap: 14px; }
.av {
  position: relative;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--t);
  color: #FFFFFF;
  font-size: 19px;
  font-weight: 700;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--t) 16%, transparent);
}
.p-top b { display: block; font-family: var(--f-head); font-size: 23px; font-weight: 500; line-height: 1.15; color: var(--ink); }
.role { display: block; margin-top: 2px; font-size: 15.5px; color: var(--muted); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; padding: 0; }
.chips li {
  padding: 5px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--t) 10%, var(--white));
  color: color-mix(in srgb, var(--t) 80%, var(--ink));
  font-size: 14.5px;
  font-weight: 600;
}
.person--guest { border-style: dashed; background: transparent; box-shadow: none; }
.person--guest .av { background: #8A6A2E; box-shadow: none; }
.person--guest .av svg { position: absolute; inset: -7px; width: 66px; height: 66px; }
.person--guest .av circle { fill: none; stroke-width: 3; }
.ring-bg { stroke: color-mix(in srgb, var(--amber) 22%, var(--paper)); }
.ring-fg { stroke: var(--amber); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 62; transform: rotate(-90deg); transform-origin: 50% 50%; }
@media (min-width: 640px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .people { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }

/* ── Three rows, one theme each ── */
.rows { display: grid; gap: 76px; }
.row { display: grid; gap: 30px; align-items: center; }
.row .stage { width: min(100%, 440px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 26px 50px -26px rgba(15, 27, 34, .35); }
.row .device { box-shadow: inset 0 .25cqw 0 rgba(255, 255, 255, .55), 0 3.2cqw 6cqw -1.6cqw rgba(15, 27, 34, .4), 0 1cqw 2.4cqw -.8cqw rgba(0, 0, 0, .25); }
.row h2 { font-size: clamp(30px, 2vw + 20px, 44px); }
.row p { margin-top: 14px; max-width: 28em; font-size: 18px; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  padding: 5px 12px 5px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--t) 12%, var(--white));
  color: color-mix(in srgb, var(--t) 85%, var(--ink));
  font-size: 14.5px;
  font-weight: 600;
}
.tag::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--t); }
@media (min-width: 860px) {
  .rows { gap: 112px; }
  .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 76px; }
  .row--flip .stage { order: 2; justify-self: end; }
}

/* ── Every area of health: the app's own 17 tiles in its own colours. They
   are dealt in once as the section arrives, then drift slowly in two rows
   going opposite ways, and a swipe sends a row either way. ── */
.areas-h { max-width: 16ch; }
.belt {
  display: grid;
  gap: 14px;
  margin-top: 44px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
/* The rows are moved by script: each drifts its own way, and a swipe or drag
   throws it either way before it eases back to its own direction. */
.lane { overflow: hidden; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.lane.is-dragging { cursor: grabbing; }
.track {
  list-style: none;
  display: flex;
  gap: 12px;
  width: max-content;
  margin: 0;
  padding: 10px 0 14px;
  will-change: transform;
}
.cat img { -webkit-user-drag: none; pointer-events: none; }
.cat {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 212px;
  padding: 11px 20px 11px 11px;
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  border-radius: 20px;
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(15, 27, 34, .04), 0 10px 22px -12px color-mix(in srgb, var(--c) 55%, transparent);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.cat:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(15, 27, 34, .05), 0 16px 30px -12px color-mix(in srgb, var(--c) 70%, transparent); }
.cat-ic {
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .78);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent);
  color: var(--c);
}
.cat-ic img { width: 30px; height: 30px; transition: transform .45s var(--spring); }
.cat-ic svg { width: 22px; height: 22px; }
.cat:hover .cat-ic img { transform: rotate(-8deg) scale(1.1); }
.cat-tx b { display: block; font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--ink); white-space: nowrap; }
.cat-tx span { display: block; margin-top: 1px; font-size: 14px; color: var(--muted); white-space: nowrap; }
.cat--own { border: 1.5px dashed color-mix(in srgb, var(--c) 45%, transparent); box-shadow: none; }
.cat--own .cat-ic { background: color-mix(in srgb, var(--c) 10%, var(--white)); }
.belt.deal .cat { animation: deal .75s var(--ease) backwards; animation-delay: calc(var(--i) * 70ms); }
.belt.deal .lane--back .cat { animation-delay: calc(var(--i) * 70ms + 35ms); }
@keyframes deal { from { opacity: 0; transform: translateY(28px) rotate(-3deg) scale(.92); } }
@media (max-width: 639px) { .cat { min-width: 196px; } .belt { margin-top: 36px; } }

/* ── The promise ── */
.band { position: relative; overflow: hidden; padding-block: 84px; background: var(--night); color: var(--night-ink-2); }
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 90% at 90% 0%, rgba(143, 182, 206, .14), transparent 70%);
  pointer-events: none;
}
.band .wrap { position: relative; }
.band h2 { color: var(--night-ink); font-size: clamp(50px, 5vw + 22px, 96px); line-height: 1; letter-spacing: -.03em; }
.band .say { margin-top: 22px; max-width: 30em; font-size: 20px; }
.facts { list-style: none; margin: 36px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 17px 0 14px;
  border: 1px solid var(--night-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: var(--night-ink);
  font-size: 16px;
  font-weight: 500;
}
.facts svg { width: 18px; height: 18px; flex: none; color: var(--night-ink-2); }
.band .more { display: inline-block; margin-top: 30px; color: var(--night-ink); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid currentColor; }
@media (min-width: 960px) { .band { padding-block: 124px; } }

/* ── Plan names: Family and Care carry their own theme gradients wherever
   they are named, so they read as the paid plans. ── */
.tier { font-weight: 700; color: var(--g1); }
.tier--family { --g1: #B34E6E; --g: linear-gradient(100deg, #E0707B 0%, #9C3D6A 100%); }
.tier--care { --g1: #9A5A2E; --g: linear-gradient(100deg, #C98426 0%, #7A3E5A 100%); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .tier {
    background: var(--g);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* ── Questions ── */
.qa { display: grid; gap: 28px; }
.faq { display: grid; gap: 10px; }
.faq details {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--white);
  box-shadow: var(--card-shadow);
  transition: box-shadow .25s;
}
.faq details[open] { box-shadow: var(--lift-shadow); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 14px 20px;
  list-style: none;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--paper);
  color: var(--tide);
  transition: transform .25s var(--ease), background .25s;
}
.faq summary .pm svg { width: 16px; height: 16px; }
.faq details[open] .pm { transform: rotate(45deg); background: color-mix(in srgb, var(--tide) 14%, var(--white)); }
.faq details p { padding: 0 20px 20px; max-width: 36em; }
@media (min-width: 860px) { .qa { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 64px; align-items: start; } }

/* ── Closing ── */
.end { text-align: center; }
.end .icon { width: 88px; height: 88px; margin: 0 auto 26px; border-radius: 22px; box-shadow: 0 2px 4px rgba(201, 95, 133, .2), 0 16px 32px rgba(201, 95, 133, .3); }
.end h2 { max-width: 14ch; margin-inline: auto; }
.end .stores { justify-content: center; margin-top: 30px; }

/* ── Footer ── */
.foot { padding-block: 44px 40px; background: var(--paper); font-size: 15px; color: var(--muted); }
.foot-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 20px 40px; }
.foot-top .wm img { height: 26px; }
.slogan { margin-top: 8px; font-family: var(--f-head); font-size: 17px; color: var(--ink-2); }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 22px; padding-top: 4px; }
.foot-links a { text-decoration: none; font-weight: 500; color: var(--ink-2); }
.foot-links a:hover { color: var(--ink); }
.foot-base { display: grid; gap: 8px; margin-top: 28px; font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .bar.is-on::after { transform: scaleX(1); }
  .belt { -webkit-mask-image: none; mask-image: none; }
  .track { flex-wrap: wrap; width: auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
  .cat[aria-hidden="true"] { display: none; }
}

/* ── Phone menu ── */
.menu-btn { display: none; }
@media (max-width: 859px) {
  .nav {
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding-block: 4px 14px;
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px rgba(15, 27, 34, .08);
  }
  .nav.open { display: flex; }
  .nav a { padding-block: 15px; font-size: 18px; color: var(--ink); border-bottom: 1px solid var(--line); }
  .nav a:last-child { border-bottom: 0; }
  .menu-btn {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-right: -8px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
  }
  .menu-btn span, .menu-btn span::before {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .25s var(--ease);
  }
  .menu-btn span { position: relative; transform: translateY(-4px); }
  .menu-btn span::before { content: ""; position: absolute; left: 0; top: 8px; }
  .menu-btn[aria-expanded="true"] span { transform: translateY(0) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span::before { transform: translateY(-8px) rotate(-90deg); }
}

/* ── Full footer ── */
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 48px; }
.fh { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--ink); }
.fcol { display: grid; gap: 8px; }
.fcol a { text-decoration: none; color: var(--ink-2); }
.fcol a:hover { color: var(--ink); text-decoration: underline; }
.social { display: flex; gap: 10px; margin-top: 18px; }
.social a {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--white);
  color: var(--ink-2);
}
.social a:hover { color: var(--ink); }
.social svg { width: 18px; height: 18px; }
@media (max-width: 639px) { .foot-cols { grid-template-columns: 1fr 1fr; } }

/* ── Skip link ── */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: #FFFFFF; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; }

/* ── Current page in the bar ── */
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }