/* ==========================================================================
   FaceKit — facekitapp.com
   Styled to the FaceKit design system (paywall handoff):
   Rebond Grotesque @ 500, capsule shapes, #ececee pills, mono micro-labels,
   white hairline cards, ink accent capsules, #1293ff blue CTAs, blue glow.
   Tokens live in :root — change once, updates site-wide.
   ========================================================================== */

@font-face { font-family: "ES Rebond Grotesque"; src: url("/assets/fonts/Rebond-Regular.otf") format("opentype");  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "ES Rebond Grotesque"; src: url("/assets/fonts/Rebond-Medium.otf") format("opentype");   font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "ES Rebond Grotesque"; src: url("/assets/fonts/Rebond-Semibold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* Color — from colors_and_type.css / paywall handoff */
  --bg: #f4f5f7;
  --surface: #ffffff;
  --capsule: #ececee;
  --capsule-ink: #1a1a1e;
  --ink: #0c0b11;
  --fg-2: #2b2a32;
  --muted: #6b6b72;
  --tertiary: #9b9ba4;
  --circle-empty: #dcdcdf;
  --hairline: rgba(12, 11, 17, 0.06);
  --hairline-strong: rgba(12, 11, 17, 0.12);
  --blue: #1293ff;
  --blue-pressed: #1480db;

  /* Type */
  --font-brand: "ES Rebond Grotesque", "Neue Haas Grotesk", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Shape + elevation */
  --r-card: 16px;
  --r-panel: 32px;
  --r-pill: 999px;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-float: 0 2px 4px rgba(11, 11, 15, 0.04), 0 12px 32px rgba(11, 11, 15, 0.07);
  --shadow-phone: 0 24px 64px rgba(15, 30, 60, 0.16);
  --shadow-cta: 0 8px 28px rgba(18, 147, 255, 0.4);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Layout */
  --nav-h: 72px;
  --max-w: 1140px;
  --section-gap: clamp(96px, 12vw, 160px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-brand);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: none; background: none; cursor: pointer; color: inherit; }

::selection { background: rgba(18, 147, 255, 0.2); }

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* --------------------------------------------------------------------------
   Typography — Rebond 500, tight tracking. Blue accent spans via .b
   -------------------------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--font-brand);
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 { font-size: clamp(40px, 6vw, 68px); line-height: 1.04; }
h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.08; }
h3 { font-size: 20px; line-height: 1.35; letter-spacing: -0.01em; }

.b { color: var(--blue); }

/* Mono micro-label — the signature FaceKit detail */
.micro {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tertiary);
}

.section-head .micro { display: block; margin-bottom: 18px; }

.section-subtitle {
  color: var(--muted);
  font-size: 17.5px;
  line-height: 1.55;
  max-width: 520px;
  margin: 16px auto 0;
}

.section-head { text-align: center; padding: 0 24px; margin-bottom: 56px; }
.section-head h2 { max-width: 640px; margin: 0 auto; }

section { scroll-margin-top: calc(var(--nav-h) + 24px); }

/* --------------------------------------------------------------------------
   Buttons — pills. Blue CTA with glow, ink pill, white ghost.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: var(--r-pill);
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out), background 160ms var(--ease-out);
}
.btn:active { transform: scale(0.985); }

.btn-blue {
  background: var(--blue);
  color: #fff;
  box-shadow: var(--shadow-cta);
}
.btn-blue:hover { background: var(--blue-pressed); transform: translateY(-1px); }

.btn-ink {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 7px 23px rgba(0, 0, 0, 0.22);
}
.btn-ink:hover { background: #1a1922; transform: translateY(-1px); }

.btn-ghost {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-card);
}
.btn-ghost:hover { transform: translateY(-1px); box-shadow: var(--shadow-float); }

/* Apple-badge-style button */
.btn-appstore {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 26px 11px 15px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  text-align: left;
  box-shadow: 0 7px 23px rgba(0, 0, 0, 0.22);
  transition: transform 160ms var(--ease-out), background 160ms var(--ease-out);
}
.btn-appstore:hover { background: #1a1922; transform: translateY(-1px); }
.btn-appstore:active { transform: scale(0.985); }
.btn-appstore img { width: 36px; height: 36px; }
.btn-appstore .small { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.65; line-height: 1.4; }
.btn-appstore .big { display: block; font-size: 19px; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }

.btn-appstore.on-dark { background: #fff; color: var(--ink); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); }
.btn-appstore.on-dark:hover { background: #f2f4f8; }

/* --------------------------------------------------------------------------
   Header / navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 100;
  background: rgba(244, 245, 247, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--hairline);
}
.nav-inner {
  max-width: var(--max-w);
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.brand span {
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.02em;
}

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  padding: 9px 15px;
  border-radius: var(--r-pill);
  font-size: 15.5px;
  font-weight: 400;
  color: var(--muted);
  transition: color 150ms ease, background 150ms ease;
}
.nav-links a:hover { color: var(--ink); background: rgba(12, 11, 17, 0.05); }

.nav-cta { flex-shrink: 0; }
.nav-cta .btn { padding: 11px 22px; font-size: 15px; }

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}

.nav-menu {
  position: fixed;
  top: calc(var(--nav-h) + 8px);
  right: 16px;
  left: 16px;
  background: rgba(252, 252, 253, 0.97);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--hairline);
  border-radius: 24px;
  padding: 10px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 99;
  box-shadow: var(--shadow-float);
}
.nav-menu.open { display: flex; }
.nav-menu a {
  padding: 13px 18px;
  font-size: 16px;
  border-radius: var(--r-pill);
}
.nav-menu a:hover { background: rgba(12, 11, 17, 0.05); }
.nav-menu .menu-cta {
  margin-top: 8px;
  text-align: center;
  background: var(--blue);
  color: #fff;
  font-weight: 500;
  box-shadow: var(--shadow-cta);
}
.nav-menu .menu-cta:hover { background: var(--blue-pressed); }

@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .menu-toggle { display: grid; }
}

/* --------------------------------------------------------------------------
   Hero — split copy + device frame, top-center blue glow (paywall style)
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding: calc(var(--nav-h) + clamp(48px, 8vh, 96px)) 24px 0;
  overflow: clip;
}

/* Blue radial glow, top-center — behind the fixed nav too */
.hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -12%;
  width: 140%;
  height: 70%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 28%, rgba(18, 147, 255, 0.16), rgba(244, 245, 247, 0) 62%);
  pointer-events: none;
}

.hero > * { position: relative; z-index: 1; }

.hero-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  max-width: var(--max-w);
  margin: 0 auto;
}
.hero-copy { text-align: left; }

.trusted-pill {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 7px 18px 7px 8px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--fg-2);
  box-shadow: var(--shadow-card);
  margin-bottom: 30px;
}
.avatar-stack { display: flex; }
.avatar-stack img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
}
.avatar-stack img + img { margin-left: -9px; }

.hero h1 { max-width: 560px; }

.hero .lede {
  max-width: 440px;
  margin: 22px 0 32px;
  color: var(--muted);
  font-size: 18.5px;
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.hero .availability {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tertiary);
}
.hero .availability img { width: 22px; height: 22px; }

/* Single app screen — no bezel, iOS-curved corners, soft bottom fade */
.hero-screens {
  /* --fk-s scales the whole device. It has to be unitless (transform: scale
     takes a number, and CSS cannot divide one length by another), so the size
     steps are explicit breakpoints rather than a clamp. --fk-device is the
     device's full height: 852 screen + 10 bezel top and bottom.

     The whole phone is shown, tab bar included. Cropping it with a bottom fade
     put the tile row inside the fade and greyed out the three things the card
     is there to show. */
  --fk-s: 0.76;
  --fk-device: 872;
  position: relative;
  height: calc(var(--fk-device) * var(--fk-s) * 1px);
  /* No overflow:hidden — it clipped the device's soft shadow into a
     visible rectangle around the mock. */
}
/* Sized so the 413pt device keeps a comfortable side margin at each step:
   the layout stacks at 900, which frees up width rather than taking it away. */
@media (max-width: 1080px) { .hero-screens { --fk-s: 0.68; } }
@media (max-width: 900px)  { .hero-screens { --fk-s: 0.84; } }
@media (max-width: 420px)  { .hero-screens { --fk-s: 0.78; } }
@media (max-width: 360px)  { .hero-screens { --fk-s: 0.72; } }
@media (max-width: 330px)  { .hero-screens { --fk-s: 0.62; } }

/* --------------------------------------------------------------------------
   Hero device — the FaceKit dashboard rebuilt, not screenshotted
   -------------------------------------------------------------------------

   Every size below is the app's own point value, taken from
   FaceKit-2/FaceKit/Main/HomePlaceholderView.swift: 38pt day circles on 7pt
   gaps, a 300x380 card at corner radius 90, three-across tiles at
   (393 - 48 - 22) / 3, and so on. The whole device is therefore laid out at a
   fixed 393pt screen width and then scaled as one block, so it stays in exact
   proportion with the app at every viewport instead of being re-guessed per
   breakpoint.
   -------------------------------------------------------------------------- */

.phone {
  /* 393 screen + 10 bezel either side. */
  --fk-frame: 413px;
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--fk-frame);
  margin-left: calc(var(--fk-frame) / -2);
  padding: 10px;
  border-radius: 62px;
  /* Titanium-ish frame: a bright edge, a darker body, a soft inner lip. */
  background: linear-gradient(150deg, #4a4d55 0%, #1e2027 34%, #33363d 62%, #14161b 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    var(--shadow-phone);
  transform: scale(var(--fk-s));
  transform-origin: top center;
}

.phone-screen {
  --fk-ink: #1d1f24;
  --fk-mut: #9096a0;
  --fk-blue: #1293ff;
  --fk-glass: rgba(255, 255, 255, 0.62);
  --fk-glass-edge: rgba(255, 255, 255, 0.8);
  --fk-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 3px rgba(20, 22, 28, 0.07);
  position: relative;
  width: 393px;
  height: 852px;
  border-radius: 52px;
  overflow: hidden;
  /* Screen ground matches the site's own paper (--bg #f4f5f7) so the mock
     sits in the page palette; faint brightening behind the header. */
  background:
    radial-gradient(ellipse 300px 190px at 50% 70px, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 65%),
    #f4f5f7;
  color: var(--fk-ink);
  font-size: 16px;
  line-height: 1.2;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

/* ----- Status area: just the island, floating — content scrolls behind it
   like a real hardware cutout, no bar fill. ----- */
.fk-status {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  pointer-events: none;
}
.fk-island {
  position: absolute;
  top: 11px;
  left: 50%;
  width: 112px;
  height: 34px;
  margin-left: -56px;
  border-radius: 999px;
  background: #07080a;
}

/* ----- Header: profile, Image / 3D toggle ----- */
.fk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  margin-top: 4px;
  padding: 0 20px;
}
.fk-avatar,
.fk-head-pad { width: 44px; height: 44px; flex: none; }
.fk-avatar {
  display: grid;
  place-items: center;
  padding: 3px;
  border-radius: 50%;
  background: var(--fk-glass);
  border: 1px solid var(--fk-glass-edge);
  box-shadow: var(--fk-glass-shadow);
}
.fk-avatar svg {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(#c8ccd4, #9aa0ac);
  color: rgba(255, 255, 255, 0.9);
  padding: 7px;
}
.fk-modes { display: flex; align-items: center; gap: 14px; }
.fk-mode {
  position: relative;
  font-size: 18px;
  font-weight: 400;
  color: rgba(29, 31, 36, 0.32);
}
.fk-mode.is-on { font-weight: 600; color: var(--fk-ink); }

/* ----- Day rail: seven circles on a shallow arch ----- */
.fk-days {
  display: flex;
  justify-content: center;
  gap: 7px;
  height: 50px;
  margin-top: 14px;
}
.fk-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: var(--fk-glass);
  border: 1px solid var(--fk-glass-edge);
  box-shadow: var(--fk-glass-shadow);
  transform: translateY(var(--y, 0));
}
.fk-day b { font-size: 9.5px; font-weight: 500; color: rgba(29, 31, 36, 0.5); }
.fk-day.is-future b { color: rgba(29, 31, 36, 0.35); }
.fk-day.is-sel {
  border-color: var(--fk-ink);
  border-width: 2px;
}
.fk-day.is-sel b { color: rgba(29, 31, 36, 0.75); }
.fk-day em { font-size: 11px; font-weight: 600; font-style: normal; }
.fk-tick { width: 10px; height: 10px; color: var(--fk-ink); }
/* A missed day sits between the tick and the future dot: the dot, a shade darker. */
.fk-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(29, 31, 36, 0.2);
}

/* ----- Scan card: 300x380 at radius 90, score pill on the bottom edge ----- */
.fk-card {
  position: relative;
  width: 300px;
  height: 380px;
  margin: 12px auto 0;
  border-radius: 90px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 2px 6px rgba(20, 22, 28, 0.06),
    0 20px 44px rgba(20, 22, 28, 0.11);
}
/* The poster and the live canvas occupy the same box; the canvas fades over the
   poster once its first frame is on screen, so the card is never empty and the
   handover is invisible. */
.fk-face-still,
.fk-face {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 380px;
  margin: -190px 0 0 -150px;
  /* The app's clay head casts a soft shadow into the card under the chin. */
  filter: none;
}
.fk-face {
  opacity: 0;
  z-index: 1;
  transition: opacity 0.5s var(--ease-out);
}
.fk-face.is-ready { opacity: 1; }
/* Once the live mesh is up the poster has to go, or the still frontal face
   peeks out from behind the rotating one. */
.fk-face-still { transition: opacity 0.5s var(--ease-out); }
.fk-card.is-live .fk-face-still { opacity: 0; }

.fk-score {
  position: absolute;
  bottom: -19px;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 1px;
  min-width: 62px;
  min-height: 38px;
  padding: 0 18px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--fk-glass-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 4px 12px rgba(20, 22, 28, 0.1);
  justify-content: center;
}
.fk-score { align-items: center; }
.fk-score b, .fk-score .fk-of { line-height: 1; }
.fk-score .fk-of { transform: translateY(2px); }
.fk-score b {
  font-size: 19px;
  font-weight: 600;
  /* Tabular figures and a reserved width: the score counts up on reveal and the
     pill must not resize under it. */
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
  text-align: right;
}
.fk-of { font-size: 12.5px; font-weight: 500; color: rgba(29, 31, 36, 0.5); }

/* ----- Status capsules ----- */
.fk-chips {
  display: flex;
  gap: 9px;
  margin: 34px 24px 0;
}
.fk-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  height: 40px;
  border-radius: 999px;
  background: var(--fk-glass);
  border: 1px solid var(--fk-glass-edge);
  box-shadow: var(--fk-glass-shadow);
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(29, 31, 36, 0.85);
  white-space: nowrap;
}
.fk-chip svg { width: 14px; height: 14px; flex: none; }

/* ----- Tile row: black, white, blue ----- */
.fk-tiles {
  display: flex;
  gap: 11px;
  margin: 14px 24px 0;
}
.fk-tile {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* (393 - 48 gutters - 22 gaps) / 3, kept square as in the app. */
  height: 107.6px;
  padding: 13px;
  border-radius: 30px;
  overflow: hidden;
}
.fk-tile b {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.6px;
}
.fk-tile-v { margin-top: auto; font-size: 22px; font-weight: 500; }
.fk-tile-s { font-size: 11px; font-weight: 500; }

.fk-tile-ink { background: #0e0f12; color: #fff; }
.fk-tile-ink b { color: rgba(255, 255, 255, 0.6); }
.fk-tile-ink .fk-tile-s { color: rgba(255, 255, 255, 0.65); }

.fk-tile-white {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--fk-glass-edge);
  box-shadow: var(--fk-glass-shadow);
}
.fk-tile-white b,
.fk-tile-white .fk-tile-s { color: var(--fk-mut); }

.fk-tile-blue { background: var(--fk-blue); color: #fff; }
.fk-tile-blue b { color: rgba(255, 255, 255, 0.7); }

/* The ASK tile's questions cycle. The sizer holds the tallest one's footprint
   so swapping a question never moves the tile or its neighbours. */
/* width: 100% is load-bearing. Without it the wrapper shrink-wraps the sizer's
   longest LINE (43pt, not the tile's 81pt), and "structure?" spills out of the
   tile instead of wrapping. */
.fk-ask {
  position: relative;
  display: block;
  width: 100%;
  margin-top: auto;
}
.fk-ask-sizer { visibility: hidden; width: 100%; }
.fk-ask-sizer,
.fk-ask-text {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.18;
}
.fk-ask-text { position: absolute; inset: 0; }
.fk-ask-text i {
  font-style: normal;
  opacity: 0;
  animation: fk-letter 0.34s var(--ease-out) forwards;
}
@keyframes fk-letter {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

/* ----- Tab bar ----- */
.fk-tabs {
  position: absolute;
  bottom: 22px;
  left: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  padding: 9px 6px 11px;
  border-radius: 34px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--fk-glass-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 6px 20px rgba(20, 22, 28, 0.08);
}
.fk-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  font-size: 11px;
  font-weight: 500;
  color: var(--fk-ink);
}
.fk-tab svg { width: 25px; height: 25px; }
.fk-tab.is-on { color: var(--fk-blue); }

@media (prefers-reduced-motion: reduce) {
  .fk-ask-text i { animation: none; opacity: 1; }
}

/* Trust strip — 4.8 ★ / users / avg pts (paywall pattern) */
.trust-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(24px, 5vw, 56px);
  max-width: 640px;
  margin: clamp(48px, 7vw, 80px) auto 0;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
  padding: 26px 32px;
  text-align: center;
}
.trust-strip .it { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.trust-strip .v {
  font-size: 27px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.trust-strip .v .star { color: var(--blue); font-size: 20px; }
.trust-strip .v .b { color: var(--blue); }
.trust-strip .v .unit { font-size: 14px; color: var(--tertiary); margin-left: 2px; }
.trust-strip .l {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tertiary);
}
.trust-strip .sep { width: 1px; height: 40px; background: var(--hairline-strong); }

@media (max-width: 880px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-copy { text-align: center; }
  .hero h1, .hero .lede { margin-left: auto; margin-right: auto; }
  /* Buttons share one row on mobile instead of stacking */
  .hero-actions { justify-content: center; flex-wrap: nowrap; max-width: 400px; margin-left: auto; margin-right: auto; }
  .hero-actions .btn { flex: 1; padding: 14px 12px; font-size: 15px; white-space: nowrap; }
  .hero-screens {
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Feature sections — copy + demo panel splits (paywall slides as sections)
   -------------------------------------------------------------------------- */

.feature-section { padding: var(--section-gap) 0 0; }

.feature-split {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}
.feature-split.flip .feature-copy { order: 2; }
.feature-split.flip .demo-panel { order: 1; }

.feature-copy { text-align: left; }
.feature-copy .micro { display: block; margin-bottom: 18px; }
.feature-copy h2 { max-width: 460px; }
.feature-copy .section-subtitle { margin: 16px 0 0; max-width: 440px; }

/* White demo panel holding rebuilt paywall UI */
.demo-panel {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-float);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 520px;
  justify-self: center;
  width: 100%;
}

/* Score card (slide 3) */
.score-card {
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--bg);
  border-radius: 20px;
  padding: 26px 24px;
}
.ring { position: relative; width: 128px; height: 128px; flex-shrink: 0; }
.ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  filter: drop-shadow(0 0 5px rgba(18, 147, 255, 0.4));
}
.ring .ctr { position: absolute; inset: 0; display: grid; place-items: center; }
.ring .num {
  font-size: 42px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.score-side .micro { display: block; margin-bottom: 8px; }
.score-side .headline {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
}

.metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.metric {
  background: var(--bg);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}
.metric .row { display: flex; align-items: baseline; justify-content: space-between; }
.metric .name { font-weight: 500; font-size: 16px; letter-spacing: -0.01em; }
.metric .value { color: var(--blue); font-weight: 500; font-size: 17px; }
.metric .value.sm { font-size: 13.5px; }
.metric .bar {
  height: 5px;
  border-radius: var(--r-pill);
  background: rgba(12, 11, 17, 0.08);
  overflow: hidden;
}
.metric .bar i { display: block; height: 100%; background: var(--blue); border-radius: var(--r-pill); }
.metric .spectrum { display: flex; height: 12px; border-radius: var(--r-pill); overflow: hidden; gap: 0; }
.metric .spectrum i { flex: 1; }
.metric .spectrum i.on { outline: 2px solid #fff; outline-offset: -1px; }

/* Day strip (slide 2) */
.days { display: flex; gap: 8px; }
.day {
  flex: 1;
  border-radius: var(--r-pill);
  background: var(--capsule);
  padding: 11px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.day b { font-weight: 500; font-size: 15px; color: #3c3c43; line-height: 1; }
.day i { font-style: normal; font-size: 9.5px; color: #8a8a90; line-height: 1; }
.day s {
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a8a90;
  line-height: 1;
}
.day.on { background: var(--capsule-ink); }
.day.on b, .day.on s { color: #fff; }

/* Routine photo hero (slide 2) */
.routine-hero {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  min-height: 96px;
  display: flex;
  align-items: center;
  background: url("/assets/routine-jawline.jpg") center 32% / cover;
}
.routine-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 10, 12, 0.82) 30%, rgba(10, 10, 12, 0.25) 75%, rgba(10, 10, 12, 0.1));
}
.routine-hero .ht { position: relative; flex: 1; padding: 0 18px; text-align: left; }
.routine-hero .hk {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}
.routine-hero .hn {
  font-size: 17.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
  margin-top: 5px;
}
.routine-hero .hp {
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ink);
  margin-right: 14px;
  display: grid;
  place-items: center;
}
.routine-hero .hp svg { width: 17px; height: 17px; fill: #fff; }

/* Projection + before/after (slide 4) */
.projection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  border-radius: 16px;
  padding: 18px 20px;
  text-align: left;
}
.projection .micro { display: block; margin-bottom: 6px; }
.projection .range { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.projection .delta { font-size: 30px; font-weight: 500; letter-spacing: -0.02em; color: var(--blue); }
.projection .delta .unit { font-size: 14px; color: var(--tertiary); margin-left: 2px; }

.ba { display: flex; gap: 12px; }
.ba .col {
  flex: 1;
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  overflow: hidden;
  background-size: cover;
  background-position: center 22%;
}
.ba .col.before { filter: grayscale(0.55) brightness(0.92); }
.ba .col.after { border: 1.5px solid var(--blue); }
.ba .lab {
  position: absolute;
  left: 8%;
  bottom: 7%;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  padding: 4px 9px;
  border-radius: 6px;
}
.ba .col.after .lab { background: var(--blue); }

@media (max-width: 880px) {
  .feature-split { grid-template-columns: 1fr; }
  .feature-split.flip .feature-copy { order: 1; }
  .feature-split.flip .demo-panel { order: 2; }
  .feature-copy { text-align: center; }
  .feature-copy h2, .feature-copy .section-subtitle { margin-left: auto; margin-right: auto; }
  .feature-copy .measures-card { margin-left: auto; margin-right: auto; }
}

/* --------------------------------------------------------------------------
   Measures card — "12 / 12 per scan" pill cloud (slide 5)
   -------------------------------------------------------------------------- */

.measures-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  padding: 22px 24px;
  margin-top: 28px;
  max-width: 440px;
  text-align: left;
}
.measures-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}
.measures-head .count { font-weight: 500; font-size: 17px; color: var(--blue); }
.measures { display: flex; flex-wrap: wrap; gap: 8px; }
.measures span {
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--hairline);
  padding: 6px 13px;
  border-radius: var(--r-pill);
}

/* --------------------------------------------------------------------------
   Everything in FaceKit — stat strip + capsule rows (slide 1)
   -------------------------------------------------------------------------- */

.everything { padding: var(--section-gap) 0 0; text-align: center; }

.stat-strip {
  display: flex;
  justify-content: center;
  gap: 10px;
  max-width: 480px;
  margin: 0 auto 28px;
  padding: 0 24px;
}
.stat-strip .chip {
  flex: 1;
  border-radius: var(--r-pill);
  background: var(--capsule);
  padding: 13px 0 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.stat-strip .chip s {
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a8a90;
  line-height: 1;
}
.stat-strip .chip b { font-weight: 500; font-size: 17px; color: #3c3c43; line-height: 1; }
.stat-strip .chip.dark { background: var(--capsule-ink); }
.stat-strip .chip.dark s { color: rgba(255, 255, 255, 0.55); }
.stat-strip .chip.dark b { color: #fff; }

.everything .capsule-list { margin: 0 auto; }
.everything-cta { margin-top: 34px; }

.capsule-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 520px;
  padding: 0 24px;
}
.capsule-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--capsule);
  border-radius: var(--r-pill);
  padding: 13px 14px 13px 26px;
  text-align: left;
}
.capsule-row .body { flex: 1; min-width: 0; }
.capsule-row .micro { display: block; font-size: 10.5px; margin-bottom: 2px; }
.capsule-row .title { font-weight: 500; font-size: 16.5px; letter-spacing: -0.01em; color: var(--capsule-ink); line-height: 1.2; }
.capsule-row .detail { font-size: 14px; color: var(--muted); flex-shrink: 0; }
.capsule-row .check {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--capsule-ink);
  color: #fff;
  font-size: 14px;
  display: grid;
  place-items: center;
}
/* Dark ink accent row (last item) */
.capsule-row.dark { background: var(--capsule-ink); }
.capsule-row.dark .micro { color: rgba(255, 255, 255, 0.5); }
.capsule-row.dark .title { color: #fff; }
.capsule-row.dark .detail { color: rgba(255, 255, 255, 0.6); }
.capsule-row.dark .check { background: #fff; color: var(--capsule-ink); }

/* Empty task circle (unchecked state, paywall daily plan) */
.capsule-row .circle {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--circle-empty);
}
/* Capsule rows inside a white demo panel keep the gray capsule fill */
.demo-panel .capsule-row { padding: 11px 12px 11px 22px; }
.demo-panel .capsule-row .title { font-size: 15.5px; }
.demo-panel .capsule-row .micro { font-size: 9.5px; }
.demo-panel .capsule-row .circle,
.demo-panel .capsule-row .check { width: 30px; height: 30px; }

/* --------------------------------------------------------------------------
   Testimonials — marquee of white cards, blue stars
   -------------------------------------------------------------------------- */

.testimonials { padding: var(--section-gap) 0 0; }

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  padding: 8px 0 16px;
}
.marquee-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: marquee 60s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.t-card {
  width: 340px;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  box-shadow: var(--shadow-card);
}
.t-card .stars {
  color: var(--blue);
  font-size: 13px;
  letter-spacing: 0.2em;
  margin-bottom: 14px;
}
.t-card blockquote {
  font-size: 16px;
  font-weight: 400;
  color: var(--fg-2);
  line-height: 1.55;
}
.t-card .author {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  gap: 12px;
}
.t-card .author img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
}
.t-card .author img.src-mark {
  /* The App Store mark, not a portrait. Sits in the avatar slot but inset and
     unclipped, so it reads as provenance rather than as a face. */
  width: 34px;
  height: 34px;
  padding: 7px;
  border-radius: 50%;
  object-fit: contain;
  background: var(--capsule);
}
.t-card .author .name { font-weight: 500; font-size: 15.5px; letter-spacing: -0.01em; }
.t-card .author .role {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tertiary);
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq { padding: var(--section-gap) 0 0; }

.faq-list {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: border-color 200ms ease;
}
.faq-item:hover { border-color: var(--hairline-strong); }
.faq-item > button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 18px 19px 24px;
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: left;
}
.faq-item .plus {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--capsule);
  border-radius: 50%;
  transition: transform 250ms var(--ease-out), background 250ms var(--ease-out);
}
.faq-item .plus svg { width: 13px; height: 13px; }
.faq-item.open .plus { transform: rotate(45deg); background: var(--capsule-ink); }
.faq-item.open .plus svg { stroke: #fff; }
.faq-item .answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms var(--ease-out);
}
.faq-item .answer p {
  padding: 0 56px 22px 24px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   CTA — ink panel with blue glow (paywall dark mode language)
   -------------------------------------------------------------------------- */

.cta-wrap { padding: var(--section-gap) 24px; }

.cta {
  position: relative;
  max-width: var(--max-w);
  margin: 0 auto;
  border-radius: var(--r-panel);
  background: #0a0b0e;
  text-align: center;
  padding: clamp(56px, 8vw, 88px) 24px 0;
  overflow: clip;
}
.cta::before {
  content: "";
  position: absolute;
  left: -20%;
  top: -12%;
  width: 140%;
  height: 55%;
  background: radial-gradient(ellipse at 50% 28%, rgba(18, 147, 255, 0.26), rgba(10, 11, 14, 0) 62%);
  pointer-events: none;
}
.cta > * { position: relative; }
.cta h2 { color: #fff; }
.cta h2 .b { color: #3aa6ff; }
.cta .lede {
  max-width: 420px;
  margin: 18px auto 30px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 17px;
  line-height: 1.5;
}
.cta .btn-blue { padding: 17px 36px; font-size: 17.5px; }
.cta .reassure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 18px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}
.cta .reassure svg { width: 14px; height: 14px; stroke: #3aa6ff; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.cta-phone {
  position: relative;
  margin: clamp(40px, 6vw, 60px) auto 0;
  --fk-s: 0.7;
  /* Wider than the device so the mask (which clips to the border box)
     never cuts the glow shadow into a rectangle. */
  width: calc(413px * var(--fk-s) + 160px);
  max-width: 100%;
  /* Show the device down through the chips row, then fade out. */
  height: calc(640px * var(--fk-s));
  -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 98%);
  mask-image: linear-gradient(to bottom, #000 68%, transparent 98%);
}
.cta-phone .phone {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 -16px 64px rgba(18, 147, 255, 0.18);
}
.fk-scroll.is-static { overflow: hidden; pointer-events: none; }
@media (max-width: 330px) { .cta-phone { --fk-s: 0.6; } }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  text-align: center;
  padding: 24px 24px 48px;
}
.site-footer .brand { justify-content: center; margin-bottom: 16px; }
.site-footer .tagline {
  max-width: 360px;
  margin: 0 auto 26px;
  font-size: 16px;
  color: var(--muted);
}
.footer-contact {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 500;
  box-shadow: var(--shadow-card);
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.footer-contact:hover { transform: translateY(-1px); box-shadow: var(--shadow-float); }
.footer-contact svg { width: 18px; height: 18px; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 4px;
  margin: 48px auto 0;
  padding-top: 30px;
  border-top: 1px solid var(--hairline);
  max-width: var(--max-w);
  color: var(--muted);
  font-size: 14.5px;
}
.footer-links a {
  padding: 6px 12px;
  border-radius: var(--r-pill);
  transition: color 150ms ease, background 150ms ease;
}
.footer-links a:hover { color: var(--ink); background: rgba(12, 11, 17, 0.05); }
.footer-links .d { width: 3px; height: 3px; border-radius: 50%; background: rgba(12, 11, 17, 0.25); }

.footer-legal {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tertiary);
}

/* --------------------------------------------------------------------------
   Legal pages (privacy / terms)
   -------------------------------------------------------------------------- */

.legal-hero {
  position: relative;
  text-align: center;
  padding: calc(var(--nav-h) + 72px) 24px 56px;
  overflow: clip;
}
.legal-hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -12%;
  width: 140%;
  height: 320px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 28%, rgba(18, 147, 255, 0.14), rgba(244, 245, 247, 0) 62%);
  pointer-events: none;
}
.legal-hero > * { position: relative; }
.legal-hero .micro { display: block; margin-bottom: 18px; }
.legal-hero p {
  max-width: 540px;
  margin: 18px auto 0;
  color: var(--muted);
  font-size: 17px;
}

.legal-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 24px 120px;
}
.legal-body .updated {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tertiary);
  margin-bottom: 40px;
}
.legal-body h2 {
  font-size: 24px;
  margin: 48px 0 14px;
}
.legal-body h3 {
  font-size: 18px;
  margin: 28px 0 10px;
  font-weight: 500;
}
.legal-body p { color: var(--muted); font-size: 16px; margin-bottom: 14px; }
.legal-body ul { margin: 0 0 14px 22px; color: var(--muted); font-size: 16px; }
.legal-body li { margin-bottom: 8px; }
.legal-body a { color: var(--blue); font-weight: 500; }
.legal-body a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.notfound {
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}
.notfound h1 { font-size: clamp(88px, 16vw, 140px); line-height: 1; }
.notfound p { color: var(--muted); margin: 16px 0 32px; font-size: 17.5px; }

/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   Reveal choreography inside two cards. Both ride on the .visible class the
   scroll-reveal observer already adds, so there is no extra JS beyond the
   counters. Everything ends in the same resting state the static markup
   describes, and prefers-reduced-motion jumps straight there.
   -------------------------------------------------------------------------- */

/* Score card: the ring draws in, the tiles land in turn, the symmetry bar
   fills, the eye spectrum builds swatch by swatch and the match outline
   arrives last. The numbers count up via data-count in main.js. */
#score .ring .arc { stroke-dasharray: 0 276; transition: stroke-dasharray 1400ms var(--ease-out) 150ms; }
#score .visible .ring .arc { stroke-dasharray: var(--arc) 276; }
#score .metric {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
#score .visible .metric { opacity: 1; transform: none; }
#score .metric:nth-child(2) { transition-delay: 90ms; }
#score .metric:nth-child(3) { transition-delay: 180ms; }
#score .metric:nth-child(4) { transition-delay: 270ms; }
#score .metric .bar i { width: 0; transition: width 1100ms var(--ease-out) 500ms; }
#score .visible .metric .bar i { width: var(--w); }
#score .spectrum i { opacity: 0; transition: opacity 360ms var(--ease-out); }
#score .visible .spectrum i { opacity: 1; }
#score .spectrum i:nth-child(1) { transition-delay: 520ms; }
#score .spectrum i:nth-child(2) { transition-delay: 590ms; }
#score .spectrum i:nth-child(3) { transition-delay: 660ms; }
#score .spectrum i:nth-child(4) { transition-delay: 730ms; }
#score .spectrum i:nth-child(5) { transition-delay: 800ms; }
#score .spectrum i:nth-child(6) { transition-delay: 870ms; }
#score .spectrum i.on { outline-color: transparent; transition: opacity 360ms var(--ease-out) 730ms, outline-color 300ms var(--ease-out) 1150ms; }
#score .visible .spectrum i.on { outline-color: #fff; }


/* Daily plan card: the day pills land left to right and Day 7 fills to ink
   once they have, the routine photo rises in and its play button pops, the
   task rows follow, and then the first task checks itself off (main.js,
   data-auto-done) so the card does what the copy says. */
#plan .day {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out), background 420ms var(--ease-out) 480ms;
}
#plan .visible .day { opacity: 1; transform: none; }
#plan .day:nth-child(2) { transition-delay: 50ms, 50ms, 480ms; }
#plan .day:nth-child(3) { transition-delay: 100ms, 100ms, 480ms; }
#plan .day:nth-child(4) { transition-delay: 150ms, 150ms, 480ms; }
#plan .day:nth-child(5) { transition-delay: 200ms, 200ms, 480ms; }
#plan .day:nth-child(6) { transition-delay: 250ms, 250ms, 480ms; }
#plan .day:nth-child(7) { transition-delay: 300ms, 300ms, 480ms; }
#plan .day.on { background: var(--capsule); }
#plan .visible .day.on { background: var(--capsule-ink); }
#plan .day.on b { color: #3c3c43; transition: color 420ms var(--ease-out) 480ms; }
#plan .day.on s { color: #8a8a90; transition: color 420ms var(--ease-out) 480ms; }
#plan .visible .day.on b, #plan .visible .day.on s { color: #fff; }
#plan .day i { transform: scale(0); transition: transform 480ms cubic-bezier(0.34, 1.56, 0.64, 1); }
#plan .visible .day i { transform: scale(1); }
#plan .day:nth-child(1) i { transition-delay: 560ms; }
#plan .day:nth-child(2) i { transition-delay: 640ms; }

#plan .routine-hero {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms var(--ease-out) 250ms, transform 600ms var(--ease-out) 250ms;
}
#plan .visible .routine-hero { opacity: 1; transform: none; }
#plan .routine-hero .hp { transform: scale(0); transition: transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1) 700ms; }
#plan .visible .routine-hero .hp { transform: scale(1); }

#plan .capsule-row {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
#plan .visible .capsule-row { opacity: 1; transform: none; }
#plan .routine-hero + .capsule-row { transition-delay: 420ms; }
#plan .routine-hero + .capsule-row + .capsule-row { transition-delay: 490ms; }
#plan .routine-hero + .capsule-row + .capsule-row + .capsule-row { transition-delay: 560ms; }

/* The check-off: the empty circle fills to ink and a tick pops in. */
#plan .capsule-row .circle { position: relative; display: grid; place-items: center; transition: background 320ms var(--ease-out); }
#plan .capsule-row .circle::after {
  content: "\2713";
  color: #fff;
  font-size: 14px;
  line-height: 1;
  transform: scale(0);
  transition: transform 480ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
#plan .capsule-row.done .circle { background: var(--capsule-ink); }
#plan .capsule-row.done .circle::after { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  #plan .day, #plan .day b, #plan .day s, #plan .day i, #plan .routine-hero, #plan .routine-hero .hp,
  #plan .capsule-row, #plan .capsule-row .circle, #plan .capsule-row .circle::after { transition: none; }
  #plan .day, #plan .routine-hero, #plan .capsule-row { opacity: 1; transform: none; }
  #plan .day.on { background: var(--capsule-ink); }
  #plan .day.on b, #plan .day.on s { color: #fff; }
  #plan .day i, #plan .routine-hero .hp { transform: none; }
}

/* Everything list: rows land top to bottom, each tick popping in just after
   its row, with a little overshoot so it reads as a check being made. */
.everything .capsule-list .capsule-row {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.everything .capsule-list.visible .capsule-row { opacity: 1; transform: none; }
.everything .capsule-list .check { transform: scale(0); transition: transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.everything .capsule-list.visible .check { transform: scale(1); }
.everything .capsule-row:nth-child(1) { transition-delay: 0ms; }   .everything .capsule-row:nth-child(1) .check { transition-delay: 300ms; }
.everything .capsule-row:nth-child(2) { transition-delay: 70ms; }  .everything .capsule-row:nth-child(2) .check { transition-delay: 370ms; }
.everything .capsule-row:nth-child(3) { transition-delay: 140ms; } .everything .capsule-row:nth-child(3) .check { transition-delay: 440ms; }
.everything .capsule-row:nth-child(4) { transition-delay: 210ms; } .everything .capsule-row:nth-child(4) .check { transition-delay: 510ms; }
.everything .capsule-row:nth-child(5) { transition-delay: 280ms; } .everything .capsule-row:nth-child(5) .check { transition-delay: 580ms; }
.everything .capsule-row:nth-child(6) { transition-delay: 350ms; } .everything .capsule-row:nth-child(6) .check { transition-delay: 650ms; }
.everything .capsule-row:nth-child(7) { transition-delay: 420ms; } .everything .capsule-row:nth-child(7) .check { transition-delay: 720ms; }

@media (prefers-reduced-motion: reduce) {
  #score .ring .arc, #score .metric, #score .metric .bar i, #score .spectrum i,
  .everything .capsule-list .capsule-row, .everything .capsule-list .check { transition: none; }
  #score .ring .arc { stroke-dasharray: var(--arc) 276; }
  #score .metric, .everything .capsule-list .capsule-row { opacity: 1; transform: none; }
  #score .metric .bar i { width: var(--w); }
  #score .spectrum i { opacity: 1; }
  #score .spectrum i.on { outline-color: #fff; }
  .everything .capsule-list .check { transform: none; }
}

/* Broad contact shadow beneath the floating clay head. */
.fk-card::before { content: ""; position: absolute; left: 22%; right: 22%; bottom: 20px; height: 25px; border-radius: 50%; background: rgba(28, 30, 38, .15); filter: blur(14px); pointer-events: none; }

/* Native dashboard feed: only the contents below the status bar scroll. */
/* Above every overlay: the island is a hardware cutout, not UI. */
.fk-status { z-index: 20; }
.fk-scroll { height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; padding-top: 54px; padding-bottom: 32px; }
.fk-scroll::-webkit-scrollbar,.fk-rail::-webkit-scrollbar { display:none; }
.fk-scroll:focus-visible { outline: 2px solid var(--fk-blue); outline-offset: -3px; }
.fk-feed { padding: 28px 24px 12px; display: grid; gap: 28px; }
.fk-feed h3,.fk-feed h4,.fk-feed p { margin:0; letter-spacing:0; }
.fk-feed small { display:block; font-size:10px; font-weight:600; letter-spacing:.7px; color:var(--fk-mut); }
.fk-glass { background:var(--fk-glass); border:1px solid var(--fk-glass-edge); box-shadow:var(--fk-glass-shadow); border-radius:36px; }
.fk-feed-heading { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:14px; }
.fk-feed-heading h3 { font-size:11.5px; font-weight:600; letter-spacing:.8px; color:var(--fk-mut); }
.fk-feed-heading span { font-size:11.5px; color:var(--fk-mut); }
.fk-plan { padding:18px; }
.fk-plan-title { display:flex; justify-content:space-between; align-items:baseline; }
.fk-plan-title h3 { font-size:19px; font-weight:500; }
.fk-plan-title>span { font-size:11px; color:var(--fk-mut); }
.fk-plan-days { display:flex; justify-content:space-between; gap:4px; margin:16px 0; }
.fk-plan-days>span { width:36px; height:48px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:#9b9ca1; }
.fk-plan-days .active { border-radius:22px; background:#fff; box-shadow:0 3px 10px #00000008; color:var(--fk-ink); }
.fk-plan-days small { font-size:9px; }
.fk-next { min-height:90px; padding:18px; border-radius:26px; display:flex; flex-direction:column; justify-content:flex-end; gap:5px; color:white; background:linear-gradient(0deg,#0009,#0001),url('/assets/RoutineJawline.jpg') center 45%/cover; }
.fk-next small { color:#fffC; font-size:9px; }
.fk-next strong { font-size:16px; font-weight:500; }
.fk-plan-row { display:flex; align-items:center; justify-content:space-between; padding:15px 13px; margin-top:8px; background:#fff9; border:1px solid white; border-radius:25px; gap:8px; cursor:pointer; }
.fk-plan-row strong { display:block; font-size:14px; font-weight:500; margin:3px 0; }
.fk-plan-row em { font-size:11px; color:var(--fk-mut); font-style:normal; }
.fk-plan-row input { width:23px; height:23px; flex-shrink:0; accent-color:#1d1f24; cursor:pointer; }
.fk-more summary { list-style:none; padding:17px 13px 0; font-size:14px; cursor:pointer; }
.fk-more summary::-webkit-details-marker { display:none; }
.fk-more summary span { float:right; }
.fk-rail { display:flex; gap:12px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; scroll-snap-type:x proximity;
  /* The native rail: the scroll view bleeds to the screen edge (negative
     margin) while its CONTENT is inset (padding), which is exactly what
     the app does, ScrollView with .padding(.horizontal, -20) around an
     HStack with .padding(.horizontal, 20). The inset is the point: a card
     is never flush against the bezel, so a neighbour peeking in still
     shows its rounded corner instead of being sliced off by the screen. */
  margin:0 -24px; padding:0 24px 6px; }
.fk-rail:focus-visible { outline:2px solid var(--fk-blue); outline-offset:3px; }
.fk-photo { width:250px; height:190px; flex:0 0 250px; border-radius:38px; padding:20px; background-size:cover; background-position:center; color:white; display:flex; flex-direction:column; justify-content:space-between; scroll-snap-align:center; }
.fk-photo small { color:#fffd; }
.fk-photo h4 { font-size:26px; line-height:1.05; font-weight:500; }
.fk-photo p { font-size:12.5px; margin-top:4px; color:#fffd; }
.fk-neck { margin-top:10px; padding:15px 20px; display:flex; gap:10px; align-items:center; }
.fk-neck small { font-size:8px; }.fk-neck strong {font-size:16px;font-weight:500}.fk-neck span{font-size:11px;color:var(--fk-mut);margin-left:auto}
.fk-opportunity,.fk-insight { padding:20px; }
.fk-opportunity>div:not(.fk-meter) { display:flex; align-items:center; justify-content:space-between; margin:7px 0; }
.fk-opportunity h3 { font-size:25px; font-weight:500; }.fk-opportunity b {font-size:34px;font-weight:500;color:#e2a03f;}
.fk-opportunity p {font-size:12px;color:var(--fk-mut)}
.fk-meter {height:5px;border-radius:5px;background:#dfdfdf;margin-top:14px;overflow:hidden}.fk-meter i{display:block;width:57%;height:100%;background:#e2a03f;border-radius:5px}
.fk-insight h3 {font-size:20px;font-weight:500;margin-top:3px}.fk-insight p {font-size:13.5px;line-height:1.5;color:#1d1f24bf;margin-top:14px;}
.fk-feed-cta {display:inline-flex;align-items:center;min-height:38px;background:var(--fk-ink);color:#fff;border-radius:30px;padding:0 16px;margin-top:16px;font-size:13px;font-weight:600;text-decoration:none;}
.fk-bundle {display:flex;align-items:center;gap:12px;padding:16px;margin-bottom:14px}.fk-bundle img{width:46px;height:60px;object-fit:cover;border-radius:16px}.fk-bundle h3{font-size:18px;font-weight:500}.fk-bundle p{font-size:12.5px;color:var(--fk-mut);margin-top:3px}
.fk-product{flex:0 0 152px;scroll-snap-align:center}.fk-product-image{position:relative;height:175px;background:white;border-radius:30px;overflow:hidden}.fk-product-image img{width:100%;height:100%;object-fit:cover}.fk-product-image span{position:absolute;top:10px;left:10px;border-radius:20px;background:#fffD;padding:5px 9px;font-size:11px}.fk-product h4{font-size:14px;font-weight:500;margin-top:10px}.fk-product p{font-size:11px;color:var(--fk-mut);margin:4px 0}.fk-product>b{font-size:14px;font-weight:500}
.fk-progress-tiles {display:flex;gap:11px}.fk-progress-tiles>div{flex:1;min-width:0;padding:13px;height:130px;border-radius:30px;display:flex;flex-direction:column}.fk-progress-tiles b{font-size:22px;font-weight:500;margin-top:auto}.fk-progress-tiles span{font-size:11px;color:var(--fk-mut);margin-top:3px}
.fk-trend{display:flex;gap:5px;align-items:flex-end;padding:16px;height:86px;margin-top:12px;border-radius:28px}.fk-trend span{flex:1;background:#1d1f242e;border-radius:20px}.fk-trend span:last-child{background:var(--fk-blue)}
.fk-demo-note {text-align:center;font-size:11px;color:var(--fk-mut);padding:8px 0 12px}

.fk-feed { grid-template-columns: minmax(0, 1fr); }
.fk-feed > section { min-width: 0; }

.fk-photo-plain { background:var(--fk-glass);color:var(--fk-ink);border:1px solid white; }
.fk-photo-plain small,.fk-photo-plain p {color:var(--fk-mut)}
.fk-product-image img {object-fit:contain;padding:10px;}

/* Plan geometry and controls matched to the native LumoPlanCard. */
.fk-plan { padding:18px; border-radius:36px; box-shadow:inset 0 1px 0 #fff,0 14px 28px rgba(20,22,28,.07); }
.fk-plan-title { gap:10px; }.fk-plan-title>span {font-size:12.5px;white-space:nowrap;letter-spacing:-.2px;}
.fk-plan-days { gap:6px; margin:14px 0; }
.fk-plan-days>span { flex:1; width:auto; height:58px; border-radius:22px; background:rgba(29,31,36,.05);font-size:14px;font-weight:600;gap:0; }
.fk-plan-days .active { background:var(--fk-ink);color:white;box-shadow:none;font-size:18px;font-weight:500; }
.fk-plan-days .active small {color:#ffffff99;font-size:10px;font-weight:400;letter-spacing:0;text-transform:capitalize;}
.fk-plan-days>span>small {font-size:13px;}
.fk-window-note {font-size:12.5px;color:var(--fk-mut);margin:0 0 8px!important;line-height:1.2;}
.fk-next {position:relative;height:76px;min-height:76px;padding:16px 65px 16px 16px;justify-content:center;gap:2px;background-image:linear-gradient(90deg,#0009,#0000001a),url('/assets/RoutineJawline.jpg');background-position:center;background-size:cover;}
.fk-next small {font-size:10px;white-space:nowrap;}.fk-next strong {white-space:nowrap;font-size:16px;letter-spacing:-.4px;}
.fk-plan-play {position:absolute;right:16px;top:16px;width:44px;height:44px;border-radius:50%;background:var(--fk-ink);color:#fff;display:grid;place-items:center;font-size:12px;padding-left:2px;}
.fk-plan-row {height:62px;padding:0 16px;gap:12px;background:rgba(29,31,36,.05);border:0;margin-top:8px;border-radius:26px;}
.fk-plan-row>span {flex:1;min-width:0;}.fk-plan-row small {font-size:10px;letter-spacing:.7px;white-space:nowrap;}
.fk-plan-row strong {font-size:16px;font-weight:500;margin:2px 0 0;line-height:1.15;white-space:nowrap;letter-spacing:-.4px;}
.fk-plan-row:has(input[aria-label="Complete Apply SPF 30+ Sunscreen"]) strong {font-size:13px;letter-spacing:-.45px;}
.fk-plan-row>em {font-size:12.5px;color:var(--fk-mut);font-style:normal;white-space:nowrap;flex:none;}
.fk-plan-row input {appearance:none;-webkit-appearance:none;margin:0;width:44px;height:44px;flex:0 0 44px;border:0;border-radius:50%;background:rgba(29,31,36,.06);display:grid;place-items:center;transition:background .18s;}
.fk-plan-row input:checked {background:var(--fk-ink);}.fk-plan-row input:checked::after {content:"";width:12px;height:7px;border-left:2px solid white;border-bottom:2px solid white;transform:translateY(-2px) rotate(-45deg);}
.fk-plan-row input:focus-visible {outline:2px solid var(--fk-blue);outline-offset:3px;}.fk-plan-row:has(input:checked) strong {color:var(--fk-mut);text-decoration:line-through;}
.fk-more summary {height:62px;background:rgba(29,31,36,.05);border-radius:26px;margin-top:8px;padding:15px 16px;font-size:16px;line-height:1.2;}
.fk-more summary small {margin-bottom:2px;}.fk-more summary:focus-visible {outline:2px solid var(--fk-blue);outline-offset:2px;}

/* Native routine card play controls. */
.fk-photo { position:relative; }
.fk-routine-play { position:absolute;top:20px;right:20px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--fk-ink);color:white;font-size:12px;padding-left:2px; }

/* --------------------------------------------------------------------------
   In-phone overlays — sheets and coach chat, matched to the FaceKit-2 iOS
   dashboard (GuidedRoutineSheet / ProductDetailView / BundleSheet / ChatView).
   -------------------------------------------------------------------------- */

/* Anything tappable in the dash presses like the app */
.fk-scroll .fk-photo,
.fk-scroll .fk-product,
.fk-scroll .fk-bundle,
.fk-scroll .fk-tile,
.fk-scroll .fk-next,
.fk-scroll .fk-opportunity {
  cursor: pointer;
  transition: transform 140ms var(--ease-out);
}
.fk-scroll .fk-photo:active,
.fk-scroll .fk-product:active,
.fk-scroll .fk-bundle:active,
.fk-scroll .fk-tile:active,
.fk-scroll .fk-next:active,
.fk-scroll .fk-opportunity:active { transform: scale(0.975); }

/* Dim behind the sheets */
.fk-dim {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: rgba(15, 17, 22, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}
.fk-dim.is-open { opacity: 1; pointer-events: auto; }
.fk-dim.raise { z-index: 8; }

/* SheetCloseButton: chevron-down in a 38pt material circle, top-left */
.fk-close-chip {
  position: absolute;
  top: 12px;
  left: 20px;
  z-index: 5;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(250, 250, 251, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 1px 4px rgba(20, 22, 28, 0.12);
  display: grid;
  place-items: center;
  color: #9096a0;
  cursor: pointer;
}
.fk-close-chip svg { width: 17px; height: 17px; }
.fk-close-chip:active { transform: scale(0.94); }

/* Full-height page sheet, iOS style: rounded top, slides up over the dash */
.fk-sheet {
  position: absolute;
  left: 0;
  right: 0;
  top: 44px;
  bottom: 0;
  z-index: 9;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 340px 280px at 50% 246px, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 70%),
    #f4f4f3;
  border-radius: 38px 38px 0 0;
  box-shadow: 0 -12px 44px rgba(15, 17, 22, 0.25);
  transform: translateY(106%);
  transition: transform 360ms var(--ease-out);
  overflow: hidden;
}
.fk-sheet.is-open { transform: none; }
.fk-sheet-body {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
}
.fk-sheet-body::-webkit-scrollbar { display: none; }

/* Pinned bottom bar (start / buy) over blur, like safeAreaInset + material */
.fk-sheet-bar {
  flex: 0 0 auto;
  padding: 12px 24px 16px;
  background: rgba(244, 244, 243, 0.86);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(29, 31, 36, 0.05);
}
.fk-sheet-bar:empty { display: none; }
.fk-bar-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 54px;
  border-radius: var(--r-pill);
  background: var(--fk-ink);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}
.fk-bar-cta:active { transform: scale(0.98); }
.fk-bar-cta svg { width: 13px; height: 13px; fill: currentColor; }
.fk-bar-sub {
  display: block;
  text-align: center;
  margin-top: 9px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fk-mut);
}
.fk-bar-sub.link { color: var(--fk-ink); font-weight: 600; }

/* Buy bar variant: PRICE left, blue Shop pill right, in a glass capsule */
.fk-buy-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 9px 0 22px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 3px rgba(20, 22, 28, 0.07);
}
.fk-buy-bar .price small { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.7px; color: var(--fk-mut); }
.fk-buy-bar .price b { font-size: 18px; font-weight: 500; color: var(--fk-ink); }
.fk-buy-bar .shop {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 46px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  background: var(--fk-blue);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(18, 147, 255, 0.35);
}
.fk-buy-bar .shop:active { transform: scale(0.97); }

/* Full-bleed cover with the type on the photograph (GuidedRoutineSheet) */
.fk-cover {
  position: relative;
  height: 330px;
  background-size: cover;
  background-position: center 30%;
  display: flex;
  align-items: flex-end;
}
.fk-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.72) 100%);
}
.fk-cover.is-plain { background: rgba(29, 31, 36, 0.06); }
.fk-cover.is-plain::before { display: none; }
.fk-cover .txt { position: relative; padding: 24px; }
.fk-cover small {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  color: rgba(255, 255, 255, 0.8);
}
.fk-cover h3 {
  margin: 6px 0 0;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
}
.fk-cover p { margin: 6px 0 0; font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, 0.85); }
.fk-cover.is-plain small { color: var(--fk-mut); }
.fk-cover.is-plain h3 { color: var(--fk-ink); }
.fk-cover.is-plain p { color: var(--fk-mut); }

/* Sheet content column */
.fk-sheet-col { padding: 28px 24px 24px; display: grid; gap: 28px; }

/* LumoSectionHeader: mono uppercase title + muted trailing */
.fk-lumo-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.fk-lumo-head small { font-size: 11.5px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--fk-mut); }
.fk-lumo-head span { font-size: 13px; font-weight: 500; color: var(--fk-mut); }

.fk-sheet-copy { font-size: 14px; line-height: 1.5; color: rgba(29, 31, 36, 0.75); }
.fk-sheet-note { margin-top: 12px; font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--fk-mut); }

/* LumoPlanRow: glass row, eyebrow over title, trailing value */
.fk-lumo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 62px;
  padding: 0 16px;
  border-radius: 26px;
  background: var(--fk-glass);
  border: 1px solid var(--fk-glass-edge);
  box-shadow: var(--fk-glass-shadow);
}
.fk-lumo-row + .fk-lumo-row { margin-top: 8px; }
.fk-lumo-row .body { flex: 1; min-width: 0; }
.fk-lumo-row small { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.7px; color: var(--fk-mut); }
.fk-lumo-row b { display: block; margin-top: 2px; font-size: 16px; font-weight: 500; color: var(--fk-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fk-lumo-row em { font-style: normal; font-size: 12.5px; font-weight: 500; color: var(--fk-mut); flex-shrink: 0; }

/* Product hero: glass well with the match badge hanging off the bottom */
.fk-prod-hero {
  position: relative;
  margin: 56px 24px 0;
  height: 300px;
  border-radius: 44px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 3px rgba(20, 22, 28, 0.07);
  display: grid;
  place-items: center;
}
.fk-prod-hero img { max-width: 62%; max-height: 74%; object-fit: contain; }
.fk-prod-hero .badge {
  position: absolute;
  left: 50%;
  bottom: -19px;
  transform: translateX(-50%);
  height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--fk-blue);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(18, 147, 255, 0.35);
  white-space: nowrap;
}

.fk-prod-title { padding: 33px 24px 0; }
.fk-prod-title small { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--fk-mut); }
.fk-prod-title h3 { margin: 5px 0 0; font-size: 26px; font-weight: 500; letter-spacing: -0.01em; color: var(--fk-ink); }

/* 2x2 stat tiles (TARGETS / STEP / WHEN / RATING) */
.fk-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 18px 24px 0;
}
.fk-stat-tile {
  height: 84px;
  border-radius: 26px;
  background: var(--fk-glass);
  border: 1px solid var(--fk-glass-edge);
  box-shadow: var(--fk-glass-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.fk-stat-tile small { font-size: 10px; font-weight: 600; letter-spacing: 0.7px; color: var(--fk-mut); }
.fk-stat-tile b { font-size: 18px; font-weight: 500; color: var(--fk-ink); }

/* ABOUT chips: soft ink fill, not glass */
.fk-chip-flow { display: flex; flex-wrap: wrap; gap: 7px; }
.fk-chip-flow span {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 13px;
  border-radius: var(--r-pill);
  background: rgba(29, 31, 36, 0.05);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fk-mut);
}

/* Bundle rows */
.fk-bundle-row {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 26px;
  background: var(--fk-glass);
  border: 1px solid var(--fk-glass-edge);
  box-shadow: var(--fk-glass-shadow);
}
.fk-bundle-row + .fk-bundle-row { margin-top: 8px; }
.fk-bundle-row .img {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.fk-bundle-row .img img { width: 82%; height: 82%; object-fit: contain; }
.fk-bundle-row .body { flex: 1; min-width: 0; }
.fk-bundle-row .body b { display: block; font-size: 15px; font-weight: 500; color: var(--fk-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fk-bundle-row .body p { margin: 3px 0 0; font-size: 12px; line-height: 1.4; color: var(--fk-mut); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fk-bundle-row .price { font-size: 14px; font-weight: 500; color: var(--fk-ink); flex-shrink: 0; }

.fk-glass-pills { display: flex; gap: 8px; margin-top: 16px; }
.fk-glass-pills span {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--fk-glass);
  border: 1px solid var(--fk-glass-edge);
  box-shadow: var(--fk-glass-shadow);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fk-ink);
}

/* Intro block (BundleSheet-style headers, also the scan sheet) */
.fk-sheet-intro { padding: 60px 24px 0; }
.fk-sheet-intro small { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--fk-mut); }
.fk-sheet-intro h3 { margin: 10px 0 0; font-size: 28px; font-weight: 500; letter-spacing: -0.01em; color: var(--fk-ink); }
.fk-sheet-intro p { margin: 8px 0 0; font-size: 13.5px; font-weight: 500; line-height: 1.5; color: var(--fk-mut); }

/* Coach chat: sheet presentation, orb header, the app's chat ground */
.fk-chatpage {
  position: absolute;
  left: 0;
  right: 0;
  top: 44px;
  bottom: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  background: #efeff1;
  border-radius: 38px 38px 0 0;
  box-shadow: 0 -12px 44px rgba(15, 17, 22, 0.25);
  transform: translateY(106%);
  transition: transform 360ms var(--ease-out);
  overflow: hidden;
}
.fk-chatpage.is-open { transform: none; }
.fk-chat-head {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 18px 10px;
}
.fk-coach-orb {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.06));
}
.fk-chat-head b { font-size: 16px; font-weight: 600; color: var(--fk-ink); }
.fk-chat-scroll {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 10px 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.fk-chat-scroll::-webkit-scrollbar { display: none; }
.fk-msg {
  max-width: 80%;
  padding: 11px 15px;
  border-radius: 20px;
  font-size: 15px;
  line-height: 1.38;
  opacity: 0;
  transform: translateY(8px);
  animation: fk-msg-in 300ms var(--ease-out) forwards;
}
.fk-msg.is-user {
  align-self: flex-end;
  background: var(--fk-ink);
  color: #fff;
  border-bottom-right-radius: 8px;
}
.fk-msg.is-coach {
  align-self: flex-start;
  background: #fff;
  color: var(--fk-ink);
  border: 1px solid rgba(29, 31, 36, 0.06);
  border-bottom-left-radius: 8px;
  box-shadow: 0 1px 3px rgba(20, 22, 28, 0.05);
}
@keyframes fk-msg-in {
  to { opacity: 1; transform: none; }
}
.fk-typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid rgba(29, 31, 36, 0.06);
  border-radius: 20px;
  border-bottom-left-radius: 8px;
}
.fk-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(29, 31, 36, 0.3);
  animation: fk-typing 1.1s infinite;
}
.fk-typing i:nth-child(2) { animation-delay: 0.18s; }
.fk-typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes fk-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.fk-chat-chip {
  align-self: flex-start;
  margin-top: 2px;
  padding: 9px 17px;
  border: 1.5px solid var(--fk-blue);
  border-radius: var(--r-pill);
  color: var(--fk-blue);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  animation: fk-msg-in 300ms var(--ease-out) forwards;
}
.fk-chat-chip:active { transform: scale(0.97); }
.fk-chat-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 16px 22px;
  padding: 13px 8px 13px 18px;
  background: #fff;
  border: 1px solid rgba(29, 31, 36, 0.08);
  border-radius: var(--r-pill);
  color: var(--fk-mut);
  font-size: 15px;
}
.fk-chat-bar svg {
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 50%;
  background: var(--fk-blue);
  color: #fff;
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  .fk-sheet, .fk-chatpage, .fk-dim { transition: none; }
  .fk-msg, .fk-chat-chip { animation-duration: 1ms; }
  .fk-typing i { animation: none; }
}

/* --------------------------------------------------------------------------
   Scan depth (#scan) — same vocabulary as the other feature splits:
   demo-panel, gray inner card (like the dash's face card), #ececee capsule
   chips with the ink active state, and a white hairline insight card.
   -------------------------------------------------------------------------- */

/* Insight card: twin of .measures-card */
.scan-insight {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  padding: 20px 22px;
  margin-top: 28px;
  max-width: 440px;
  text-align: left;
}
.scan-insight .head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.scan-insight .count { font-weight: 500; font-size: 15px; color: var(--tertiary); }
.scan-insight .count b {
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.scan-insight .bar {
  position: relative;
  height: 5px;
  border-radius: var(--r-pill);
  background: rgba(12, 11, 17, 0.07);
  margin-top: 14px;
  overflow: hidden;
}
.scan-insight .band {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--lo, 85%);
  width: calc(var(--hi, 92%) - var(--lo, 85%));
  background: rgba(18, 147, 255, 0.18);
  border-radius: var(--r-pill);
  transition: left 500ms var(--ease-out), width 500ms var(--ease-out);
}
.scan-insight .fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--val, 89%);
  background: var(--blue);
  border-radius: var(--r-pill);
  transition: width 500ms var(--ease-out);
}
.scan-insight .detail {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tertiary);
}
.scan-insight .what {
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fg-2);
  min-height: 4.6em;
}
.scan-insight .how {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
  min-height: 3em;
}

/* Stage: gray inner card, like .score-card / the dash's face card */
.scan-stage {
  position: relative;
  aspect-ratio: 1 / 1.02;
  background: var(--bg);
  border-radius: 20px;
  overflow: clip;
}
.scan-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 44%;
  height: 24px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(20, 24, 34, 0.15), rgba(20, 24, 34, 0) 70%);
  filter: blur(2px);
  pointer-events: none;
}
.scan-stage canvas {
  position: absolute;
  inset: 3%;
  width: 94%;
  height: 94%;
}

/* Floating metric callout, repositioned per metric */
.scan-pill {
  position: absolute;
  left: var(--px, 62%);
  top: var(--py, 40%);
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 15px 11px 13px;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  transition: left 560ms var(--ease-out), top 560ms var(--ease-out);
  pointer-events: none;
  white-space: nowrap;
}
.scan-pill .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pill-c, #61c9f0);
  margin-top: 5px;
  transition: background 300ms ease;
}
.scan-pill b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); line-height: 1.2; }
.scan-pill .v { display: block; font-size: 14.5px; color: var(--ink); margin-top: 1px; }
.scan-pill small { display: block; font-size: 11.5px; color: var(--tertiary); margin-top: 1px; }

/* Chip strip: same capsules as the plan's day strip / stat chips */
.scan-groups { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.scan-group { display: flex; flex-direction: column; gap: 6px; }
.scan-group-label {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tertiary);
  padding-left: 2px;
}
.scan-chips { display: flex; gap: 8px; }
.scan-chip {
  flex: 1;
  border-radius: var(--r-pill);
  background: var(--capsule);
  border: none;
  padding: 11px 0 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  transition: background 200ms ease, transform 140ms var(--ease-out);
}
.scan-chip:active { transform: scale(0.96); }
.scan-chip s {
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a8a90;
  line-height: 1;
}
.scan-chip b { font-size: 16px; font-weight: 500; color: #3c3c43; line-height: 1; font-variant-numeric: tabular-nums; }
.scan-chip.is-on { background: var(--capsule-ink); }
.scan-chip.is-on s { color: rgba(255, 255, 255, 0.55); }
.scan-chip.is-on b { color: #fff; }
/* Narrow labels like REDNESS must not wrap the chip taller than its row. */
.scan-chip s { white-space: nowrap; }
@media (max-width: 420px) {
  .scan-chip s { font-size: 7.5px; letter-spacing: 0.08em; }
}

@media (max-width: 880px) {
  .scan-insight { margin-left: auto; margin-right: auto; }
  .scan-insight .what, .scan-insight .how { min-height: 0; }
}


/* --------------------------------------------------------------------------
   Loading
   -------------------------------------------------------------------------

   Sections below the hero are skipped entirely until they are scrolled near,
   which keeps their layout, decoding and background images off the critical
   path. contain-intrinsic-size stands in for the real height so the scrollbar
   does not jump as each one is realised; it is a rough figure on purpose,
   since the exact height only matters once the section is actually rendered.

   The hero is deliberately NOT in this list: it is what the first paint is.
   -------------------------------------------------------------------------- */
/* The in-phone feed scrolls inside the device. Its cards sit well below what
   the phone shows, yet their background images would all load at first paint:
   six photos nobody has scrolled to. Skipping the offscreen ones defers that. */
.fk-feed > section {
  content-visibility: auto;
  contain-intrinsic-size: auto 260px;
}
/* Not the sections holding a card rail. content-visibility: auto brings
   paint containment, which clips descendants to the section's own box, and
   the rail deliberately bleeds 24px past that box to the screen edge (see
   .fk-rail). Contained, the neighbouring cards were chopped at the inset
   instead of running under the bezel like the app. Nothing is lost by
   exempting them: the cover photos are already deferred via data-bg in
   main.js, and the product images use loading="lazy". */
.fk-feed > section:has(.fk-rail) {
  content-visibility: visible;
  contain-intrinsic-size: none;
}

#score,
#scan,
#plan,
#progress,
#everything,
#testimonials,
#faq {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}