/* ==========================================================================
   Base components for /landing-v3.

   Everything here draws a piece of the native app in HTML: a card, a chart,
   a device. Colour, radius and type come from /assets/css/tokens.css, which is
   compiled from src/theme/tokens.ts, so a chart on this page and the same chart
   in the app read off one palette. Device hardware (the watch case, the phone
   bezel) has no token of its own and is mixed from the ink ramp.

   Every component sits under [data-theme='light']: the app screens shown here
   are light-mode screens, whatever the visitor's OS is set to.
   ========================================================================== */

/* color-scheme only changes the browser's own widgets. The tokens follow
   prefers-color-scheme unless an ancestor carries data-theme, so the <html>
   tag in seo/content/landing.html pins data-theme="light" too. Without it a
   dark-mode visitor got dark cards behind dark text in "And that's not all",
   and the footer's --brand resolved to the dark accent on :root. */
html { color-scheme: light; }

:root {
  --bx-device-shadow: 0 28px 40px color-mix(in srgb, var(--c-ink) 18%, transparent);
  --bx-deep-shadow: 0 40px 80px color-mix(in srgb, var(--c-ink) 45%, transparent);
  /* The page's three background washes: the hero aurora, the AI glow, the
     download dialog and the gradient border all read off these. */
  --bx-fade-1: var(--activity-effort);
  --bx-fade-2: var(--energy-activity-4);
  --bx-fade-3: color-mix(in srgb, var(--health-fatigue) 50%, var(--macro-protein));
}

.bx {
  font-family: var(--font-ui);
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}
.bx *, .bx *::before, .bx *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------- card --- */
.bx-card {
  background: var(--c-surface);
  border-radius: var(--r-card);
  border: 0.5px solid var(--c-hairline);
  box-shadow: var(--shadow-card);
  padding: var(--s-lg);
}
.bx-ico { width: 1em; height: 1em; fill: currentColor; flex: none; }

/* ========================================================= SF Symbols === */
/* The app's own glyphs (expo-symbols), rendered from the system font by
   tools/symbols.swift as black masks, so each one takes the colour of the
   text around it and every colour stays a token. */
.sf {
  display: inline-block; flex: none;
  width: 1em; height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--sf) center / contain no-repeat;
  mask: var(--sf) center / contain no-repeat;
}
.sf-figure-strengthtraining-traditional { --sf: url(/landing-v3/assets/base/img/sf/figure-strengthtraining-traditional.png); }
.sf-figure-run { --sf: url(/landing-v3/assets/base/img/sf/figure-run.png); }
.sf-figure-pool-swim { --sf: url(/landing-v3/assets/base/img/sf/figure-pool-swim.png); }
.sf-bicycle { --sf: url(/landing-v3/assets/base/img/sf/bicycle.png); }
.sf-moon-zzz-fill { --sf: url(/landing-v3/assets/base/img/sf/moon-zzz-fill.png); }
.sf-checkmark { --sf: url(/landing-v3/assets/base/img/sf/checkmark.png); }
.sf-flame-fill { --sf: url(/landing-v3/assets/base/img/sf/flame-fill.png); }
.sf-trophy-fill { --sf: url(/landing-v3/assets/base/img/sf/trophy-fill.png); }
.sf-heart-fill { --sf: url(/landing-v3/assets/base/img/sf/heart-fill.png); }
.sf-bolt-heart-fill { --sf: url(/landing-v3/assets/base/img/sf/bolt-heart-fill.png); }
.sf-scalemass-fill { --sf: url(/landing-v3/assets/base/img/sf/scalemass-fill.png); }
.sf-arrow-up-right { --sf: url(/landing-v3/assets/base/img/sf/arrow-up-right.png); }
.sf-chevron-right { --sf: url(/landing-v3/assets/base/img/sf/chevron-right.png); }
.sf-fork-knife { --sf: url(/landing-v3/assets/base/img/sf/fork-knife.png); }
.sf-lock-fill { --sf: url(/landing-v3/assets/base/img/sf/lock-fill.png); }
.sf-location-fill { --sf: url(/landing-v3/assets/base/img/sf/location-fill.png); }
.sf-wifi-slash { --sf: url(/landing-v3/assets/base/img/sf/wifi-slash.png); }
.sf-airplane { --sf: url(/landing-v3/assets/base/img/sf/airplane.png); }
.sf-hand-raised-fill { --sf: url(/landing-v3/assets/base/img/sf/hand-raised-fill.png); }
.sf-eye-slash-fill { --sf: url(/landing-v3/assets/base/img/sf/eye-slash-fill.png); }
.sf-chart-line-uptrend-xyaxis { --sf: url(/landing-v3/assets/base/img/sf/chart-line-uptrend-xyaxis.png); }
.sf-sparkles { --sf: url(/landing-v3/assets/base/img/sf/sparkles.png); }
.sf-calendar { --sf: url(/landing-v3/assets/base/img/sf/calendar.png); }
.sf-photo-fill { --sf: url(/landing-v3/assets/base/img/sf/photo-fill.png); }
.sf-applewatch { --sf: url(/landing-v3/assets/base/img/sf/applewatch.png); }
.sf-barcode-viewfinder { --sf: url(/landing-v3/assets/base/img/sf/barcode-viewfinder.png); }
.sf-link { --sf: url(/landing-v3/assets/base/img/sf/link.png); }
.sf-function { --sf: url(/landing-v3/assets/base/img/sf/function.png); }
.sf-info-circle-fill { --sf: url(/landing-v3/assets/base/img/sf/info-circle-fill.png); }
.sf-chart-bar-fill { --sf: url(/landing-v3/assets/base/img/sf/chart-bar-fill.png); }
.sf-xmark { --sf: url(/landing-v3/assets/base/img/sf/xmark.png); }
.sf-megaphone-fill { --sf: url(/landing-v3/assets/base/img/sf/megaphone-fill.png); }
.sf-text-quote { --sf: url(/landing-v3/assets/base/img/sf/text-quote.png); }
.sf-arrow-triangle-2-circlepath { --sf: url(/landing-v3/assets/base/img/sf/arrow-triangle-2-circlepath.png); }

/* ======================================================= cross-fade set === */
/* Three stacked frames, each on screen for a third of the loop. The negative
   delays start the loop already running, so nothing is blank on first paint. */
.bx-xfade { position: relative; }
.bx-xfade > * { animation: bx-xfade 12s infinite; }
.bx-xfade > *:nth-child(2) { animation-delay: -8s; }
.bx-xfade > *:nth-child(3) { animation-delay: -4s; }
@keyframes bx-xfade {
  0%, 30% { opacity: 1; }
  36%, 94% { opacity: 0; }
  100% { opacity: 1; }
}

/* ============================================================ sky ======== */
/* The hero backdrop: a dawn sky. Pale blue overhead, a breath of lavender,
   a warm glow low behind the phone, and two decks of cloud drifting at
   different speeds so the near one passes the far one. Each deck is twice
   the hero's width with a tile exactly one (or half a) hero wide, so moving
   it by half its own width lands on the same frame and the loop is seamless.
   Moved by transform, never background-position, so it costs no repaints. */
.hero_bg-2.bx-aurora {
  --sky-top: color-mix(in srgb, var(--health-temp) 30%, var(--c-surface));
  --sky-mid: color-mix(in srgb, var(--activity-effort) 9%, var(--c-surface));
  --sky-low: color-mix(in srgb, color-mix(in srgb, var(--macro-fat) 55%, var(--macro-protein)) 16%, var(--c-surface));
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 48%, var(--sky-low) 82%, var(--c-surface) 100%);
  overflow: hidden;
  isolation: isolate;
}
.bx-aurora > i {
  position: absolute; top: 0; left: 0;
  width: 200%; height: 72%;
  background: url(/landing-v3/assets/base/img/sky/clouds.webp) repeat-x 0 0 / 50% auto;
  will-change: transform;
  animation: bx-sky 160s linear infinite;
}
.bx-aurora > i:nth-child(2) {
  top: 6%;
  background-size: 25% auto;
  background-position: 37% 0;
  opacity: 0.45;
  animation-duration: 260s;
}
.bx-aurora > i:nth-child(1) {
  opacity: 0.8;
  -webkit-mask-image: linear-gradient(180deg, black 30%, transparent 100%);
  mask-image: linear-gradient(180deg, black 30%, transparent 100%);
}
.bx-aurora > i:nth-child(3) {
  left: 50%; top: auto; bottom: -18%;
  width: 90%; height: 75%;
  background: radial-gradient(closest-side, color-mix(in srgb, color-mix(in srgb, var(--macro-fat) 60%, var(--macro-protein)) 26%, transparent), transparent);
  transform: translateX(-50%);
  animation: none;
}
@keyframes bx-sky { to { transform: translate3d(-50%, 0, 0); } }
.bx-aurora::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  opacity: 0.04; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.bx-aurora::before {
  content: ''; position: absolute; inset: auto 0 0; height: 22%; z-index: 1;
  background: linear-gradient(transparent, var(--c-surface));
}

/* ============================================================== hero ===== */
.bx-hero {
  position: relative;
  width: 100%;
  max-width: 90rem;
  aspect-ratio: 1440 / 640;
  margin: 0 auto;
  pointer-events: none;
}
.bx-hero__phone {
  position: absolute;
  z-index: 2;
  left: 33.5%;
  top: 3%;
  width: 22%;
  aspect-ratio: 892 / 2088;
  transform: rotate(-3deg);
  filter: drop-shadow(var(--bx-device-shadow));
}
.bx-hero__phone img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
}
.bx-hero__watch {
  position: absolute;
  z-index: 3;
  left: 51%;
  top: 44%;
  width: 13%;
  transform: rotate(4deg);
}
.bx-hero__watch img { display: block; width: 100%; height: auto; filter: drop-shadow(var(--bx-device-shadow)); }

/* The flying cards: pieces of the app's own screens (a session row, a goal,
   the macro bars, a stat tile), rising out of the bottom of two lanes either
   side of the devices and dissolving as they reach the top. */
.bx-lane {
  position: absolute; top: 0; bottom: 0; width: 30%;
  container-type: size;
  font-size: clamp(10px, 0.92vw, 14px);
  z-index: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 38%, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 38%, black 80%, transparent 100%);
}
.bx-lane--l { left: 0; }
.bx-lane--r { right: 0; }
.bx-fly {
  position: absolute; top: 100%; left: var(--x, 10%);
  display: flex; align-items: center; gap: 0.85em;
  padding: 0.85em 1em;
  background: var(--c-surface);
  border-radius: 1.55em;
  border: 0.5px solid var(--c-hairline);
  box-shadow: var(--shadow-card);
  white-space: nowrap;
  opacity: 0;
  animation: bx-rise var(--dur, 18s) linear infinite;
  animation-delay: var(--d, 0s);
  will-change: transform, opacity;
}
.bx-lane--r .bx-fly { animation-duration: var(--dur, 20s); }
@keyframes bx-rise {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(var(--r0, -4deg)) scale(0.94); }
  12% { opacity: 1; }
  55% { opacity: 1; }
  88%, 100% { opacity: 0; }
  100% { transform: translate3d(var(--dx, 0), -118cqh, 0) rotate(var(--r1, 2deg)) scale(1); }
}

/* Session row: the Today card on the Workout and Dashboard tabs. */
.bx-row__well {
  width: 2.9em; height: 2.9em; border-radius: 0.85em; flex: none;
  display: grid; place-items: center;
  color: var(--tone);
  background: color-mix(in srgb, var(--tone) 16%, transparent);
  font-size: 1em;
}
.bx-row__well .sf { width: 1.45em; height: 1.45em; }
.bx-row__well.is-solid { background: var(--tone); color: var(--c-on-ink); }
.bx-row__well.is-pr { color: var(--btn-pr-ink); }
.bx-row__txt { display: flex; flex-direction: column; gap: 0.15em; min-width: 0; }
.bx-row__t { font-weight: 600; font-size: 1.07em; line-height: 1.3; color: var(--c-ink); letter-spacing: -0.01em; }
.bx-row__m { font-size: 0.93em; line-height: 1.35; color: var(--c-ink-muted); }
.bx-row__pills { display: flex; gap: 0.35em; margin-top: 0.3em; }
.bx-row__chev { width: 0.75em; height: 0.95em; color: var(--c-ink-faint); margin-left: 0.2em; }

/* DeltaBadge: arrow glyph and a tiny label on the hue at low alpha. */
.bx-delta {
  display: inline-flex; align-items: center; gap: 0.3em;
  padding: 0.18em 0.5em; border-radius: 0.45em;
  font-size: 0.82em; font-weight: 600; line-height: 1.3;
  color: var(--semantic-good); background: var(--semantic-good-tint);
}
.bx-delta .sf { width: 0.78em; height: 0.78em; }
.bx-delta.is-best { background: var(--semantic-pr); color: var(--btn-pr-ink); }

/* Macro bars: the P / F / C row under the Energy header. */
.bx-mbars { display: grid; grid-template-columns: repeat(3, 6.2em); gap: 0.9em; padding: 0.95em 1.1em; }
.bx-mbar { display: grid; gap: 0.4em; }
.bx-mbar span { font-size: 0.93em; color: var(--c-ink-muted); }
.bx-mbar em { font-style: normal; font-weight: 600; color: var(--m); }
.bx-mbar b { font-weight: 600; color: var(--c-ink); }
.bx-mbar i {
  display: block; height: 0.3em; border-radius: 1em;
  background: linear-gradient(90deg, var(--m) var(--p), color-mix(in srgb, var(--m) 18%, transparent) var(--p));
}

/* StatTile: icon and title, caption or badge, chevron; then the value. */
.bx-stat { display: grid; gap: 0.3em; align-items: start; min-width: 13.5em; padding: 0.9em 1.05em; }
.bx-stat__head { display: flex; align-items: center; gap: 0.4em; }
.bx-stat__head > .sf:first-child { color: var(--tone); width: 1.05em; height: 1.05em; }
.bx-stat__t { font-weight: 600; font-size: 1.02em; color: var(--c-ink); flex: 1; }
.bx-stat__c { font-size: 0.9em; color: var(--c-ink-muted); }
.bx-stat__v { font-weight: 600; font-size: 1.32em; line-height: 1.25; color: var(--c-ink); letter-spacing: -0.01em; }
.bx-stat__v small { font-size: 0.68em; font-weight: 400; color: var(--c-ink-muted); margin-left: 0.2em; }
.bx-stat__d { font-size: 0.9em; color: var(--c-ink-muted); }
.bx-stat__spark { width: 100%; height: 2.2em; overflow: visible; margin: 0.15em 0; }

/* Goal row: tinted square, title, percent, and a bar with a knob. */
.bx-goal { display: grid; gap: 0.75em; min-width: 16em; padding: 0.95em 1.1em; }
.bx-goal__head { display: flex; align-items: center; gap: 0.6em; }
.bx-goal__head .bx-row__t { flex: 1; }
.bx-goal__head b { font-size: 0.98em; font-weight: 600; color: var(--c-ink); }
.bx-goal__well {
  width: 1.9em; height: 1.9em; border-radius: 0.5em; display: grid; place-items: center;
  color: color-mix(in srgb, var(--tone) 70%, var(--c-ink)); background: color-mix(in srgb, var(--tone) 22%, transparent);
}
.bx-goal__well .sf { width: 1.15em; height: 1.15em; }
.bx-goal__bar { position: relative; height: 0.5em; border-radius: 1em; background: var(--c-bar-track); }
.bx-goal__bar i {
  position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit;
  background: var(--tone);
}
.bx-goal__bar i::after {
  content: ''; position: absolute; right: -0.45em; top: 50%;
  width: 0.9em; height: 0.9em; margin-top: -0.45em; border-radius: 50%;
  background: var(--c-surface); border: 0.22em solid var(--tone);
}

/* Eaten: the Energy header's number and its "left" pill. */
.bx-eaten { display: grid; gap: 0.25em; padding: 0.9em 1.1em; }
.bx-eaten__k { font-size: 0.8em; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-muted); }
.bx-eaten__row { display: flex; align-items: baseline; gap: 0.4em; }
.bx-eaten__v { font-size: 1.9em; font-weight: 700; letter-spacing: -0.02em; color: var(--c-ink); line-height: 1.1; }
.bx-eaten__of { font-size: 0.95em; color: var(--c-ink-muted); margin-right: 0.5em; }
.bx-left {
  display: inline-flex; align-items: center; gap: 0.3em; align-self: center;
  padding: 0.35em 0.75em; border-radius: var(--r-pill);
  font-size: 0.93em; font-weight: 600;
  color: var(--c-accent); background: var(--c-accent-soft);
}
.bx-left .sf { width: 0.85em; height: 0.85em; }

@media screen and (max-width: 991px) {
  .bx-hero { aspect-ratio: 1440 / 900; }
  .bx-hero__phone { left: 29%; width: 31%; }
  .bx-hero__watch { left: 52%; width: 23%; top: 40%; }
  .bx-lane { width: 27%; font-size: clamp(9px, 1.1vw, 12px); }
}
@media screen and (max-width: 767px) {
  .bx-hero { aspect-ratio: 1440 / 1500; }
  .bx-hero__phone { left: 16%; width: 52%; top: 2%; }
  .bx-hero__watch { left: 53%; width: 38%; top: 42%; }
  .bx-lane { display: none; }
}

/* ================================================== push past plateaus === */
/* The macros tile turned around: copy on the left, the phone on the right,
   and the same two orbits behind it carrying tiny charts instead of food. */
.bx-mirror .records_circle-container { left: 33%; }
.bx-mirror .records_phone { left: auto; right: 6.78175%; }
.bx-chip {
  aspect-ratio: 1;
  display: grid; place-items: center;
  background: var(--c-surface);
}
.bx-chip svg { width: 76%; height: 76%; display: block; overflow: visible; }
[data-upright] .records_circle-holder .bx-chip:first-child { transform: translateY(-50%) rotate(calc(-1 * (var(--spin, 0deg) + var(--h, 0deg)))) !important; }
[data-upright] .records_circle-holder .bx-chip:last-child { transform: translateY(50%) rotate(calc(-1 * (var(--spin, 0deg) + var(--h, 0deg)))) !important; }
[data-upright] .records_circle-holder.cc-2 { --h: 18deg; }
[data-upright] .records_circle-holder.cc-3 { --h: 36deg; }
[data-upright] .records_circle-holder.cc-4 { --h: 54deg; }
[data-upright] .records_circle-holder.cc-5 { --h: 72deg; }
[data-upright] .records_circle-holder.cc-6 { --h: 90deg; }
[data-upright] .records_circle-holder.cc-7 { --h: 108deg; }
[data-upright] .records_circle-holder.cc-8 { --h: 126deg; }
[data-upright] .records_circle-holder.cc-9 { --h: 144deg; }
[data-upright] .records_circle-holder.cc-10 { --h: 162deg; }

/* A chip standing in for a row's symbol well: the orbit tile, white with the
   glyph drawn in, so a card off the orbit reads in the same hand. */
.bx-row__well.bx-chip {
  background: var(--c-surface);
  border: 0.5px solid var(--c-hairline);
  box-shadow: 0 0.35em 0.9em -0.45em color-mix(in srgb, var(--c-ink) 30%, transparent);
}
.bx-row__well.bx-chip svg { width: 80%; height: 80%; }
.bx-row__well.bx-chip img { width: 64%; height: 64%; }

.bx-float .bx-stat { font-size: clamp(10px, 0.95vw, 14px); border-radius: 1.4em; }
.bx-float--e1rm { top: 15%; left: -34%; width: 70%; transform: rotate(-4deg); }
.bx-float--vo2 { top: 48%; right: -14%; width: 60%; transform: rotate(4deg); }

@media screen and (max-width: 767px) {
  .bx-mirror .records_circle-container { left: auto; }
  .bx-mirror .records_phone { right: auto; }
  .bx-float--e1rm { left: -18%; width: 66%; }
  .bx-float--vo2 { right: -14%; width: 58%; }
}/* ===================================================== track every macro == */
.bx-food {
  aspect-ratio: 1;
  display: grid; place-items: center;
  background: var(--c-surface);
}
.bx-food img { width: 64%; height: 64%; display: block; }
.records_circle .records_circle-icon.bx-food { width: 6.6%; border-radius: 0.8rem; }
.records_circle.cc-2 .records_circle-icon.bx-food { width: 4.6%; }
.records_circle .records_circle-icon.bx-chip { width: 6.4%; border-radius: 0.8rem; }
.records_circle.cc-2 .records_circle-icon.bx-chip { width: 4.5%; }
@media screen and (max-width: 479px) {
  .records_circle .records_circle-icon.bx-food, .records_circle .records_circle-icon.bx-chip { border-radius: 0.45rem; }
}
.bx-food-phone { position: relative; z-index: 1; width: 100%; height: auto; display: block; filter: drop-shadow(var(--bx-device-shadow)); }
.bx-float { position: absolute; z-index: 2; }
.bx-float--meal { top: 18%; right: -30%; width: 74%; transform: rotate(4deg); }
.bx-float--macros { top: 46%; left: -6%; width: 78%; transform: rotate(-4deg); }

.bx-meal {
  display: flex; align-items: center; gap: var(--s-md);
  padding: var(--s-md);
  background: var(--c-surface); border-radius: var(--r-lg);
  border: 0.5px solid var(--c-hairline); box-shadow: var(--shadow-card);
}
.bx-meal__well {
  width: 36px; height: 36px; border-radius: var(--r-well); flex: none;
  display: grid; place-items: center; background: var(--c-surface-alt);
}
.bx-meal__well img { width: 82%; height: 82%; }
.bx-meal__name { font: var(--t-body-med); margin: 0; font-size: clamp(12px, 1.1vw, 17px); line-height: 1.25; }
.bx-meal__meta { font: var(--t-meta); color: var(--c-ink-muted); margin: 2px 0 0; display: flex; align-items: center; gap: 3px; font-size: clamp(10px, 0.9vw, 13px); }
.bx-meal__meta svg { width: 9px; height: 10px; fill: var(--c-ink-muted); }

.bx-macros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-md) var(--s-lg); padding: var(--s-md) var(--s-lg); border-radius: var(--r-lg); }
.bx-macro { display: grid; gap: 5px; min-width: 0; }
.bx-macro__v { font: var(--t-label); color: var(--c-ink-muted); white-space: nowrap; font-size: clamp(9px, 0.85vw, 13px); }
.bx-macro__v b { font-weight: 600; color: var(--c-ink); }
.bx-macro__v em { font-style: normal; font-weight: 600; color: var(--m); margin-right: 3px; }
.bx-macro__bar { height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--m) 18%, transparent); overflow: hidden; }
.bx-macro__bar i { display: block; height: 100%; width: var(--p); background: var(--m); border-radius: inherit; }

/* ========================================================== AI coaching === */
.bx-ai__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.bx-ai__copy { display: grid; gap: var(--s-xl); }
.bx-ai__copy .h2 { margin: 0; }
.bx-ai__note { font: var(--t-meta); margin: 0; opacity: 0.6; }
.bx-ai__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 30% 50%, color-mix(in srgb, var(--bx-fade-1) 34%, transparent), transparent 70%),
    radial-gradient(40% 45% at 85% 90%, color-mix(in srgb, var(--bx-fade-2) 18%, transparent), transparent 70%);
}

/* The real coach screen, face on, with a proposal card floating off its
   edge the way it appears in the thread. */
.bx-ai__shot { position: relative; width: min(100%, 22rem); margin: 0 auto; }
.bx-ai__phone { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 40px color-mix(in srgb, var(--c-ink) 45%, transparent)); }

/* Three things to ask, as plain quotes on the dark section: a faint glass
   bubble in the section's own text colour, so nothing white or tinted sits
   on the dark. */
.bx-ai__asks { list-style: none; margin: 0; padding: 0; display: grid; justify-items: start; gap: 10px; }
.bx-ai__asks li {
  padding: 12px 18px;
  border-radius: 1.25rem 1.25rem 1.25rem 0.4rem;
  background: color-mix(in srgb, currentColor 7%, transparent);
  border: 0.5px solid color-mix(in srgb, currentColor 14%, transparent);
  font: var(--t-body-med); font-size: 17px; line-height: 1.35; letter-spacing: -0.01em;
}
.bx-ai__asks li:nth-child(2) { margin-left: clamp(0rem, 2.5vw, 2rem); }
.bx-ai__asks span { opacity: 0.55; }

.bx-pop { left: var(--x, auto); transform: rotate(var(--r, 0deg)); }

.bx-prop { display: grid; gap: var(--s-md); padding: var(--s-lg); font-size: clamp(11px, 1vw, 14px); }
.bx-prop__head { display: flex; align-items: center; gap: var(--s-sm); }
.bx-prop__head .bx-row__well { width: 2.3em; height: 2.3em; border-radius: 0.7em; }
.bx-prop__head .bx-row__well .sf { width: 1.15em; height: 1.15em; }
.bx-prop__head b { font: var(--t-body-strong); font-size: clamp(13px, 1.1vw, 16px); line-height: 1.25; }
.bx-prop__line { margin: 0; display: flex; gap: var(--s-sm); flex-wrap: wrap; font: var(--t-meta); font-size: clamp(11px, 0.95vw, 14px); }
.bx-prop__line span { color: var(--c-ink-faint); text-decoration: line-through; }
.bx-prop__line em { font-style: normal; font-weight: 600; color: var(--c-accent); }
.bx-prop__btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-sm); }
.bx-prop__btns span { padding: 8px 0; border-radius: var(--r-pill); text-align: center; font: var(--t-label-strong); background: var(--c-surface-alt); color: var(--c-ink); }
.bx-prop__btns .is-primary { background: var(--c-ink); color: var(--c-on-ink); }

@media screen and (max-width: 767px) {
  .bx-ai__grid { grid-template-columns: minmax(0, 1fr); }
  .bx-ai__copy { order: -1; }
  .bx-ai__shot { width: min(74%, 17rem); }
}/* ===================================================== and that's not all = */
.bx-tabs .extra_features-item { background-color: var(--c-surface-alt); opacity: 0.7; transform: scale(0.97); transition: opacity .3s, transform .3s, background-color .3s; }
.bx-tabs .extra_features-item.is-active { background-color: var(--c-surface); box-shadow: var(--shadow-card); opacity: 1; transform: none; }
.bx-tabs .extra_features-item:hover { opacity: 1; }
.bx-tabs .extra-features_list { height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.bx-tabs [data-tabs-ring] circle:last-child {
  stroke-dasharray: 339.3; stroke-dashoffset: 339.3;
  transform: rotate(-90deg); transform-origin: center;
}
.bx-tabs .is-active [data-tabs-ring] circle:last-child {
  animation: bx-ring var(--tab-ms, 6000ms) linear forwards;
  animation-play-state: paused;
}
.bx-tabs.is-running:not(:hover) .is-active [data-tabs-ring] circle:last-child { animation-play-state: running; }
@media (hover: none) {
  .bx-tabs.is-running .is-active [data-tabs-ring] circle:last-child { animation-play-state: running; }
}
@keyframes bx-ring { to { stroke-dashoffset: 0; } }

.bx-stage {
  position: relative;
  width: 100%;
  max-width: 34rem;
  aspect-ratio: 1 / 1.08;
  margin: 0 auto;
}
.bx-panel {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.bx-panel.is-active { opacity: 1; visibility: visible; transition: opacity .45s ease; }

/* One tile per capability: a soft wash in the capability's colour, two real
   screens angled toward each other and cropped by the bottom edge, and one
   of the app's own cards laid across the gap between them. */
.bx-shot {
  position: absolute; inset: 0;
  border-radius: 2rem; overflow: hidden;
  background:
    radial-gradient(70% 55% at 50% 100%, color-mix(in srgb, var(--tone) 34%, transparent), transparent 70%),
    linear-gradient(180deg, var(--c-surface-alt), color-mix(in srgb, var(--tone) 14%, var(--c-surface-alt)));
}
.bx-duo > img {
  position: absolute; height: auto;
  filter: drop-shadow(0 20px 26px color-mix(in srgb, var(--c-ink) 20%, transparent));
}
.bx-duo__a { left: 7%; top: 8%; width: 41%; }
.bx-duo__b { right: 7%; top: 16%; width: 41%; }
.bx-duo.is-watch .bx-duo__a { left: 5%; top: 12%; width: 45%; transform: rotate(-6deg); }
.bx-duo.is-watch .bx-duo__b { right: 5%; top: 22%; width: 43%; transform: rotate(6deg); }
.bx-duo__card {
  left: 50%; bottom: 7%;
  width: max-content; max-width: 86%;
  transform: translateX(-50%) rotate(-2deg);
  font-size: clamp(9px, 0.85vw, 12.5px);
}
.bx-duo__card.is-wide { width: 70%; }
.bx-duo__card .bx-stat { min-width: 17em; font-size: inherit; }

/* The flying row from the hero, standing still. */
.bx-tag {
  display: flex; align-items: center; gap: 0.85em;
  padding: 0.85em 1em;
  background: var(--c-surface);
  border-radius: 1.55em;
  border: 0.5px solid var(--c-hairline);
  box-shadow: var(--shadow-raised);
  white-space: nowrap;
}
.bx-row__well img { width: 68%; height: 68%; }
.bx-delta.is-muted { color: var(--c-ink-muted); background: var(--c-surface-alt); }

.bx-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-md); padding: var(--s-md) var(--s-lg); min-width: 15em; }
.bx-pair div { display: grid; gap: 2px; }
.bx-pair div + div { border-left: 0.5px solid var(--c-hairline); padding-left: var(--s-md); }
.bx-pair b { font: var(--t-title-sm); font-weight: 700; letter-spacing: -0.01em; }
.bx-pair span { font: var(--t-tiny); color: var(--c-ink-muted); }

.bx-sheet { border-radius: var(--r-sheet); background: var(--c-sheet); box-shadow: var(--shadow-raised); padding: var(--s-lg); display: grid; gap: var(--s-md); }
.bx-sheet h4 { margin: 0; font: var(--t-title-sm); display: flex; align-items: center; gap: 8px; }
.bx-sheet h4 .sf { width: 18px; height: 18px; color: var(--c-accent); }
.bx-formula { padding: var(--s-md) var(--s-lg); border-radius: var(--r-lg); background: var(--c-surface-alt); font: var(--t-body-strong); font-family: var(--font-mono); font-size: clamp(11px, 1vw, 14px); color: var(--c-ink); }
.bx-sheet__worked { display: flex; justify-content: space-between; font: var(--t-label); color: var(--c-ink-muted); }
.bx-sheet__worked b { color: var(--c-ink); }
.bx-duo__card .bx-sheet { padding: 1.2em; gap: 0.8em; border-radius: 1.8em; }
.bx-duo__card .bx-sheet h4 { font-size: 1.3em; line-height: 1.3; }
.bx-duo__card .bx-sheet h4 .sf { width: 1.1em; height: 1.1em; }
.bx-duo__card .bx-formula { font-size: 1em; padding: 0.8em 1em; }
.bx-duo__card .bx-sheet__worked { font-size: 0.95em; }

@media screen and (max-width: 767px) {
  .bx-stage { margin-top: 1.5rem; }
}/* ============================================================== privacy == */
/* Copy on the left; on the right one lock and six short rows, straight and
   in a grid. The words are the privacy screen's, cut to a label and a
   verdict; app/settings/privacy.tsx is authoritative. */
.feature_horizontal-layout.bx-vault-card {
  background-image:
    radial-gradient(60% 80% at 70% 40%, color-mix(in srgb, var(--semantic-good) 18%, transparent), transparent 70%),
    linear-gradient(color-mix(in srgb, var(--semantic-good) 4%, transparent), color-mix(in srgb, var(--semantic-good) 14%, transparent));
}
.bx-vault-card .feature_horizontal-images { position: relative; }
.bx-vault {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2.4em;
  padding: 0 4% 0 0;
  font-size: clamp(10px, 0.95vw, 14px);
}

.bx-vault__mark {
  position: relative;
  width: 6.4em; aspect-ratio: 1; border-radius: 26%;
  display: grid; place-items: center;
  color: var(--c-on-ink);
  background: linear-gradient(150deg, color-mix(in srgb, var(--semantic-good) 70%, var(--c-surface)), var(--semantic-good) 60%, color-mix(in srgb, var(--semantic-good) 80%, var(--c-ink)));
  box-shadow:
    0 1.4em 2.8em -0.8em color-mix(in srgb, var(--semantic-good) 55%, transparent),
    inset 0 0.12em 0 color-mix(in srgb, var(--c-surface) 55%, transparent),
    inset 0 -0.2em 0.5em color-mix(in srgb, var(--c-ink) 12%, transparent);
  transform: rotate(-6deg);
}
.bx-vault__mark .sf { width: 46%; height: 46%; }
.bx-vault__mark::before, .bx-vault__mark::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid color-mix(in srgb, var(--semantic-good) 40%, transparent);
  animation: bx-halo 3.6s ease-out infinite;
  pointer-events: none;
}
.bx-vault__mark::after { animation-delay: -1.8s; }
@keyframes bx-halo {
  0% { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(1.7); opacity: 0; }
}

.bx-vault__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 20em)); gap: 0.7em;
}
.bx-vault__list li {
  display: flex; align-items: center; gap: 0.75em;
  padding: 0.65em 0.8em 0.65em 0.65em;
  background: var(--c-surface);
  border: 0.5px solid var(--c-hairline);
  border-radius: 1.15em;
  box-shadow: var(--shadow-card);
}
.bx-vault__list .bx-row__well { width: 2.3em; height: 2.3em; border-radius: 0.7em; box-shadow: none; }
.bx-vault__t { flex: 1; min-width: 0; font-weight: 600; font-size: 1.02em; line-height: 1.25; letter-spacing: -0.01em; color: var(--c-ink); }
.bx-vault__list .bx-delta { flex: none; white-space: nowrap; }

/* JS opts the tile into its reveal, so with no script the rows just show. */
.bx-vault[data-reveal] .bx-vault__list li {
  opacity: 0;
  transform: translateY(0.8em);
  transition: opacity .5s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--i, 0) * 70ms + 200ms);
}
.bx-vault[data-reveal].is-in .bx-vault__list li { opacity: 1; transform: none; }
.bx-vault[data-reveal] .bx-vault__mark { opacity: 0; transform: rotate(-18deg) scale(0.7); transition: opacity .5s ease, transform .9s cubic-bezier(.34, 1.56, .64, 1); }
.bx-vault[data-reveal].is-in .bx-vault__mark { opacity: 1; transform: rotate(-6deg); }

.bx-privacy__more {
  display: inline-flex; align-items: center; gap: 4px; margin-top: var(--s-sm);
  font: var(--t-body-strong); color: var(--c-accent); text-decoration: none;
}
.bx-privacy__more span { font-size: 22px; line-height: 1; transform: translateY(-1px); }
.bx-privacy__more:hover { text-decoration: underline; }

/* Below the two-column width the tile stacks: copy, then the lock and the
   rows under it. */
@media screen and (max-width: 991px) {
  .feature_horizontal-layout.bx-vault-card { flex-direction: column; aspect-ratio: auto; justify-content: flex-start; align-items: stretch; }
  .bx-vault-card .feature_horizontal-content { position: static; order: -1; width: 100%; padding: clamp(2rem, 6vw, 3rem) clamp(1.5rem, 5vw, 2.5rem) 0; }
  .bx-vault-card .feature_horizontal-images,
  .bx-vault-card .feature_horizontal-images.cc-longer { width: 100%; height: auto; aspect-ratio: auto; }
  .bx-vault { position: relative; inset: auto; padding: 2.5rem clamp(1rem, 4vw, 2.5rem) 2.5rem; font-size: 13px; }
}
@media screen and (max-width: 600px) {
  .bx-vault__list { grid-template-columns: minmax(0, 1fr); width: 100%; }
}

/* ==================================================== download dialog === */
/* What a computer gets from "Download app": the page's own white card on
   the hero's aurora, and a code drawn by store-qr.js. */
html.bxqr-lock { overflow: hidden; }
.bxqr {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  padding: var(--s-xl);
}
.bxqr[hidden] { display: none; }
.bxqr__backdrop {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--c-ink) 38%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  opacity: 0; transition: opacity .3s ease;
}
.bxqr__card {
  position: relative; overflow: hidden;
  width: min(100%, 25rem);
  padding: 2.4rem 2rem 1.6rem;
  border-radius: 2rem;
  background: var(--c-surface);
  border: 0.5px solid var(--c-hairline);
  box-shadow: 0 2.5rem 6rem -1rem color-mix(in srgb, var(--c-ink) 40%, transparent);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  opacity: 0; transform: translateY(14px) scale(0.97);
  transition: opacity .3s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}
.bxqr.is-open .bxqr__backdrop { opacity: 1; }
.bxqr.is-open .bxqr__card { opacity: 1; transform: none; }

.bxqr__glow { position: absolute; inset: 0; pointer-events: none; }
.bxqr__glow i { position: absolute; border-radius: 50%; filter: blur(40px); }
.bxqr__glow i:nth-child(1) { width: 70%; height: 45%; left: -20%; top: -18%; background: color-mix(in srgb, var(--bx-fade-1) 30%, transparent); }
.bxqr__glow i:nth-child(2) { width: 70%; height: 45%; right: -25%; top: -10%; background: color-mix(in srgb, var(--bx-fade-2) 26%, transparent); }
.bxqr__glow i:nth-child(3) { width: 80%; height: 40%; left: 10%; bottom: -28%; background: color-mix(in srgb, var(--bx-fade-3) 16%, transparent); }
.bxqr__card > :not(.bxqr__glow) { position: relative; }

.bxqr__x {
  position: absolute !important; top: 14px; right: 14px;
  width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-surface-alt) 85%, transparent);
  color: var(--c-ink); cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.bxqr__x:hover { background: var(--c-hairline); }
.bxqr__x:active { transform: scale(0.94); }
.bxqr__x:focus-visible, .bxqr__link:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.bxqr__x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

.bxqr__eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 10px; border-radius: var(--r-pill);
  font: var(--t-label-strong); color: var(--c-ink);
  background: color-mix(in srgb, var(--c-surface) 75%, transparent);
  border: 0.5px solid var(--c-hairline);
  box-shadow: var(--shadow-raised);
}
.bxqr__eyebrow svg { width: 12px; height: 14px; fill: currentColor; }
.bxqr__title {
  margin: 1rem 0 0;
  font-family: var(--_typography---font-families--sf-pro, var(--font-ui));
  font-size: 2rem; line-height: 1.1; font-weight: 600; letter-spacing: -0.035em;
  color: var(--c-ink);
}
.bxqr__sub { margin: 0.6rem auto 0; max-width: 28ch; font: var(--t-body); font-size: 15px; line-height: 1.45; color: var(--c-ink-muted); }

.bxqr__plate {
  margin-top: 1.5rem;
  width: min(100%, 15.5rem);
  padding: 0.9rem;
  border-radius: 1.75rem;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--c-surface), var(--c-surface)) padding-box,
    linear-gradient(140deg, color-mix(in srgb, var(--bx-fade-1) 55%, var(--c-surface)), color-mix(in srgb, var(--bx-fade-2) 55%, var(--c-surface)) 55%, color-mix(in srgb, var(--bx-fade-3) 45%, var(--c-surface))) border-box;
  box-shadow: 0 1.2rem 2.4rem -1rem color-mix(in srgb, var(--c-accent) 35%, transparent), var(--shadow-card);
}
.bxqr__code svg { display: block; width: 100%; height: auto; border-radius: 0.6rem; }

.bxqr__rating {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 1.25rem;
  font: var(--t-meta); color: var(--c-ink-muted);
}
.bxqr__rating span { color: var(--semantic-pr); letter-spacing: 1px; font-size: 13px; }
.bxqr__link {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 0.9rem; padding: 4px 2px;
  font: var(--t-label-strong); font-size: 14px; color: var(--c-accent); text-decoration: none;
}
.bxqr__link span { font-size: 18px; line-height: 1; transform: translateY(-1px); }
.bxqr__link:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .bxqr__card, .bxqr__backdrop { transition: none; }
}

/* ======================================================== hybrid trio === */
/* Under "Built for athletes who want to go hybrid": the three halves of the
   ledger as three real screens, Workout, Food and Endurance, with the watch
   in front and a piece of each screen floating off it. The phones run off
   the bottom and fade, so the stage never needs their full height. */
.bx-trio {
  position: relative;
  width: 100%; max-width: 80rem;
  aspect-ratio: 1440 / 800;
  margin: 0 auto;
  font-size: clamp(10px, 0.95vw, 14px);
  pointer-events: none;
}
.bx-trio__glow {
  position: absolute; inset: 4% 6% 0;
  background:
    radial-gradient(40% 55% at 50% 55%, color-mix(in srgb, var(--bx-fade-1) 24%, transparent), transparent 70%),
    radial-gradient(30% 45% at 24% 62%, color-mix(in srgb, var(--bx-fade-2) 18%, transparent), transparent 70%),
    radial-gradient(30% 45% at 76% 62%, color-mix(in srgb, var(--bx-fade-3) 18%, transparent), transparent 70%);
}
.bx-trio__devices {
  position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(to bottom, black 66%, transparent 98%);
  mask-image: linear-gradient(to bottom, black 66%, transparent 98%);
}
.bx-trio__phone, .bx-trio__watch {
  position: absolute; height: auto;
  transform: var(--t);
  filter: drop-shadow(var(--bx-device-shadow));
}
.bx-trio__phone.is-c { z-index: 2; left: 37.5%; top: 2%; width: 25%; --t: none; }
.bx-trio__phone.is-l { left: 20%; top: 12%; width: 21.5%; --t: rotate(-7deg); }
.bx-trio__phone.is-r { right: 20%; top: 12%; width: 21.5%; --t: rotate(7deg); }
.bx-trio__watch { z-index: 3; left: 58.5%; top: 49%; width: 12.5%; --t: rotate(9deg); }

.bx-trio__card { position: absolute; z-index: 4; transform: rotate(var(--r, 0deg)); }
.bx-trio__card > * { animation: bx-bob var(--bob, 7s) ease-in-out infinite; animation-delay: var(--bd, 0s); }
.bx-trio__card .bx-card { border-radius: 1.4em; box-shadow: var(--shadow-raised); }
.bx-trio__card .bx-stat { min-width: 14.5em; }
.bx-trio__card.is-1 { left: 3%; top: 9%; --r: -4deg; --i: 0; }
.bx-trio__card.is-2 { left: 5%; top: 53%; --r: 3deg; --i: 1; --bob: 8s; --bd: -2s; }
.bx-trio__card.is-3 { right: 2.5%; top: 8%; --r: 4deg; --i: 2; --bob: 7.5s; --bd: -4s; }
.bx-trio__card.is-4 { right: 4%; top: 37%; --r: -3deg; --i: 3; --bob: 6.5s; --bd: -1s; }
.bx-trio__card.is-5 { left: 21%; top: 72%; --r: -3deg; --i: 4; --bob: 8.5s; --bd: -3s; }
@keyframes bx-bob { 50% { transform: translateY(-0.6em); } }

/* JS opts the stage into its entrance, so with no script it just shows. */
.bx-trio[data-reveal] .bx-trio__phone,
.bx-trio[data-reveal] .bx-trio__watch {
  opacity: 0;
  transform: var(--t) translateY(14%);
  transition: opacity .7s ease, transform 1.2s cubic-bezier(.22, 1, .36, 1);
}
.bx-trio[data-reveal] .bx-trio__phone.is-l,
.bx-trio[data-reveal] .bx-trio__phone.is-r { transition-delay: .12s; }
.bx-trio[data-reveal] .bx-trio__watch { transition-delay: .3s; }
.bx-trio[data-reveal] .bx-trio__card {
  opacity: 0;
  transform: rotate(var(--r, 0deg)) translateY(1.4em) scale(0.94);
  transition: opacity .5s ease, transform .9s cubic-bezier(.34, 1.4, .64, 1);
  transition-delay: calc(var(--i, 0) * 90ms + 450ms);
}
.bx-trio[data-reveal].is-in .bx-trio__phone,
.bx-trio[data-reveal].is-in .bx-trio__watch { opacity: 1; transform: var(--t); }
.bx-trio[data-reveal].is-in .bx-trio__card { opacity: 1; transform: rotate(var(--r, 0deg)); }

@media screen and (max-width: 767px) {
  .bx-trio { aspect-ratio: 4 / 5; font-size: 8.5px; margin-top: -0.5rem; }
  .bx-trio__glow { inset: 8% -10% 0; }
  .bx-trio__phone.is-c { left: 26%; top: 7%; width: 48%; }
  .bx-trio__phone.is-l { left: 1%; top: 17%; width: 38%; }
  .bx-trio__phone.is-r { right: 1%; top: 17%; width: 38%; }
  .bx-trio__watch { left: 61%; top: 55%; width: 26%; }
  .bx-trio__card .bx-stat { min-width: 13em; }
  .bx-trio__card.is-1 { left: -1%; top: 1%; }
  .bx-trio__card.is-3 { right: -1%; top: 0; }
  .bx-trio__card.is-2 { left: -1%; top: 63%; }
  .bx-trio__card.is-4, .bx-trio__card.is-5 { display: none; }
}

/* ============================================================== footer === */
/* The site's own footer (/assets/css/footer.css), on the light ground. Two
   things it takes from whatever page it is on, given here: the gutter, which
   is .container-2's so the footer lines up with every section above it, and
   the arrow's size inside the CTA, which is this page's own .btn. */
.foot { --gutter: clamp(1rem, 1.429vw + .714rem, 2rem); }
.foot .btn__ico { width: 18px; height: 18px; flex: none; }

/* ============================================================ phones ===== */
/* The page at phone width, in one place. Sections breathe half as much,
   every tile's copy comes down a size, the hero keeps both devices whole
   with two cards resting on them,
   the hybrid heading and its phones step aside, the extra features become
   a row you swipe through. */
@media screen and (max-width: 767px) {
  .section-2:not(.u-pt-0):not(.u-p-0) { padding-top: 4.5rem; }
  .section-2:not(.u-pb-0):not(.u-p-0) { padding-bottom: 4.5rem; }
  .works-with.section-3 { padding-top: 3rem; }

  .hero_section.section-3 { min-height: 0; }
  .hero_bg-2 { min-height: 0; height: calc(100% - 0.5rem); }
  .hero_bottom { margin-top: 0.5rem; }
  .bx-hero { aspect-ratio: 1 / 1.08; }
  .bx-hero__phone { left: 19%; width: 44%; top: 3%; }
  .bx-hero__watch { left: 55%; width: 31%; top: 44%; }
  .bx-lane { display: block; inset: 0; width: 100%; z-index: 4; font-size: 8.5px; -webkit-mask-image: none; mask-image: none; }
  .bx-lane .bx-fly { display: none; }
  .bx-lane--l .bx-fly:nth-child(5),
  .bx-lane--r .bx-fly:nth-child(4) {
    display: flex; top: auto; opacity: 1;
    animation: bx-bob 7s ease-in-out infinite;
  }
  .bx-lane--l .bx-fly:nth-child(5) { left: 0; bottom: 30%; }
  .bx-lane--r .bx-fly:nth-child(4) { left: auto; right: 0; bottom: 70%; display: grid; animation-delay: -3s; }

  .feature_horizontal-layout { border-radius: 1.75rem; }
  .feature_horizontal-content { padding: 2rem 1.5rem 0.5rem; }
  .feature_horizontal-content .p-md,
  .bx-ai__copy .p-md { font-size: 1.0625rem; line-height: 1.5; }

  .bx-ai__copy { gap: var(--s-lg); }
  .bx-ai__asks li { font-size: 15px; padding: 10px 16px; }
  .bx-ai__asks li:nth-child(2) { margin-left: 0; }

  .bx-hybrid { display: none; }
  .bx-hybrid + .section-2.u-pt-0 { padding-top: 3rem; }

  .bx-tabs .extra-features_list {
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 0.75rem calc(50% - 9.375rem) 1.25rem;
  }
  .bx-tabs .extra-features_list::-webkit-scrollbar { display: none; }
  .bx-tabs .extra_features-item { scroll-snap-align: center; }

  .bx-tabs .extra_features-item .h4 { font-size: 1.125rem; }
  .bx-tabs .extra_features-item p { font-size: 0.9375rem; line-height: 1.45; }

  .bx-vault { padding-top: 2rem; padding-bottom: 2rem; gap: 1.6em; }
  .bx-vault__mark { width: 5.4em; }
}

/* ======================================================= reduced motion == */
@media (prefers-reduced-motion: reduce) {
  .bx-xfade > * { animation: none; opacity: 0; }
  .bx-xfade > *:first-child { opacity: 1; }
  .bx-fly { animation: none; opacity: 1; top: var(--rest, 50%); }
  .bx-aurora > i { animation: none; }
  .bx-tabs .is-active [data-tabs-ring] circle:last-child { animation: none; stroke-dashoffset: 0; }
  .bx-panel { transition: none; }
  .bx-vault__mark::before, .bx-vault__mark::after { animation: none; opacity: 0; }
  .bx-trio__card > *, .bx-lane .bx-fly { animation: none !important; }
  .bx-trio[data-reveal] .bx-trio__phone, .bx-trio[data-reveal] .bx-trio__watch, .bx-trio[data-reveal] .bx-trio__card { transition: none; }
  .bx-vault[data-reveal] .bx-vault__tag, .bx-vault[data-reveal] .bx-vault__mark { transition: none; }
}