/* YallaLift site, 2026-11 redesign.
   The app's world (Calibrated Plates, DESIGN.md in the app repo) presented on an Apple-style product page:
   light-led, soft grey panels, real app screens in CSS phone frames, one deliberate rubber section.
   Plate hues stay accents with one meaning each: yellow marks BEAT, red marks a record, blue is data.
   Shape system: buttons and store badges are pills / 14 px; panels 28 px; pop-out cards 18 px;
   app components inside pop-outs keep the app's own 4 px / 2 px corners.
   Logical properties throughout so an Arabic RTL version can reuse this file. */

/* ---------- fonts ---------- */
/* Display face: Sofia Sans Extra Condensed. Its multiplication sign is tiny, so U+00D7 comes from Public Sans Bold. */
@font-face { font-family: "YL Display"; src: url("/assets/fonts/SofiaSansExtraCondensed-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; unicode-range: U+0000-00D6, U+00D8-10FFFF; }
@font-face { font-family: "YL Display"; src: url("/assets/fonts/SofiaSansExtraCondensed-Black.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; unicode-range: U+0000-00D6, U+00D8-10FFFF; }
@font-face { font-family: "YL Display"; src: url("/assets/fonts/PublicSans-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+00D7; }
@font-face { font-family: "YL Display"; src: url("/assets/fonts/PublicSans-Bold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; unicode-range: U+00D7; }
@font-face { font-family: "YL Display"; src: url("/assets/fonts/PublicSans-Bold.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; unicode-range: U+00D7; }
@font-face { font-family: "Public Sans"; src: url("/assets/fonts/PublicSans-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("/assets/fonts/PublicSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("/assets/fonts/PublicSans-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  color-scheme: light;

  --bg: #FCFCFB;
  --panel: #F0F2F2;
  --panel-deep: #E5E8E9;
  --card: #FFFFFF;
  --line: rgba(21, 24, 26, 0.1);
  --hairline: #D5DADC;
  --outline: #717A7F;
  --ink: #15181A;
  --ink-2: #424A4F;
  --ink-3: #596267;
  --on-ink: #F5F6F5;
  --action-pressed: #2E3438;

  --rubber: #1B1E20;
  --on-rubber: #EFF1F0;
  --on-rubber-2: #A9B1B5;
  --rubber-line: #3A4145;

  /* the plate code */
  --plate-25: #C7212B;
  --plate-20: #1C4EA5;
  --plate-15: #EFC300;
  --plate-10: #16824A;
  --plate-5: #F1F2EF;
  --plate-2-5: #26292B;
  --plate-1-25: #BCC3C7;
  --on-plate-light: #FFFFFF;
  --on-plate-dark: #17191A;
  --bar-steel: #8F999E;
  --bar-steel-lo: #5D676C;
  --bar-steel-hi: #C3CACD;
  --sleeve-chrome: #D7DDE0;

  /* accent roles, one meaning each */
  --beat: #EFC300;
  --on-beat: #17191A;
  --record: #C7212B;
  --on-record: #FFFFFF;

  /* app screen grounds (what the captures sit on) */
  --screen-light: #ECEEEE;
  --screen-dark: #15181A;

  --font-display: "YL Display", "Sofia Sans Extra Condensed", "Public Sans", sans-serif;
  --font-body: "Public Sans", system-ui, sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.32, 0.72, 0, 1);

  --gutter: 16px;
  --page: 75rem;
  --section: clamp(88px, 6rem + 4vw, 168px);
  --nav-h: 64px;

  /* soft, layered, ink-tinted (never pure black) */
  --shadow-phone: 0 50px 100px -20px rgba(21, 24, 26, 0.25), 0 30px 60px -30px rgba(21, 24, 26, 0.3), 0 2px 6px -2px rgba(21, 24, 26, 0.12);
  --shadow-pop: 0 24px 48px -16px rgba(21, 24, 26, 0.22), 0 10px 20px -12px rgba(21, 24, 26, 0.18), 0 0 0 1px rgba(21, 24, 26, 0.05);
}

@media (min-width: 37.5em) { :root { --gutter: 24px; } }
@media (min-width: 64em) { :root { --gutter: 40px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-block-start: calc(var(--nav-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-feature-settings: "kern" 1, "lnum" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  min-block-size: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}
main { flex: 1 0 auto; }
img, svg, video { display: block; max-inline-size: 100%; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
button { font: inherit; color: inherit; }

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

.visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip-link {
  position: absolute;
  inset-inline-start: var(--gutter);
  inset-block-start: -100px;
  z-index: 30;
  min-block-size: 48px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
}
.skip-link:focus { inset-block-start: 8px; }

.wrap { inline-size: 100%; max-inline-size: calc(var(--page) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- type ---------- */
.display, .headline, .title { font-family: var(--font-display); font-weight: 800; hyphens: none; text-wrap: balance; letter-spacing: 0.005em; }
.display { font-size: clamp(3.75rem, 2.2rem + 6.2vw, 7.75rem); line-height: 0.88; }
.headline { font-size: clamp(2.875rem, 1.9rem + 3.6vw, 5rem); line-height: 0.9; }
.title { font-size: clamp(1.75rem, 1.5rem + 0.8vw, 2.25rem); line-height: 0.95; }
.lede { font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); line-height: 1.5; color: var(--ink-2); max-inline-size: 34ch; text-wrap: pretty; }
.body { color: var(--ink-2); max-inline-size: 40ch; text-wrap: pretty; }
.num { unicode-bidi: isolate; direction: ltr; font-family: var(--font-display); font-weight: 800; font-feature-settings: "tnum" 1, "lnum" 1; white-space: nowrap; }
.nowrap { white-space: nowrap; }

/* "Beat last time." carries the BEAT yellow as a fill under ink text, never as text colour */
.mark-beat { background: linear-gradient(to top, transparent 0.06em, var(--beat) 0.06em, var(--beat) 0.36em, transparent 0.36em); padding-inline: 0.04em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- buttons, badges ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-block-size: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 200ms var(--ease), transform 200ms var(--ease), border-color 200ms var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn--ink { background: var(--ink); color: var(--on-ink); }
.btn--ink:hover { background: var(--action-pressed); }
.btn--line { border: 1.5px solid var(--ink); color: var(--ink); background: transparent; }
.btn--line:hover { background: var(--panel); }
.btn--sm { min-block-size: 44px; padding: 0 18px; font-size: 0.9375rem; }
.btn .btn-arrow { inline-size: 26px; block-size: 26px; border-radius: 999px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.14); margin-inline-end: -12px; transition: transform 300ms var(--ease); }
.btn--line .btn-arrow { background: var(--panel-deep); }
.btn .btn-arrow svg { inline-size: 14px; block-size: 14px; }
.btn:hover .btn-arrow { transform: translateX(3px); }

.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-block-size: 56px;
  min-inline-size: 160px;
  padding: 8px 22px 9px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--on-ink);
  line-height: 1.15;
}
.store-soon { font-size: 0.75rem; font-weight: 600; color: #B9C0C3; letter-spacing: 0.01em; }
.store-name { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.005em; }

/* Official store badges, for launch (markup is commented out at each badge spot, marked LAUNCH).
   The artwork is used untouched: no borders, shadows, radii or recolouring. Both render at the same visible height;
   Google's PNG (646 x 250) carries built-in transparent padding around the black badge (x 40-606, y 40-210),
   which the wrapper crops. */
.badges { --badge-h: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.badge { display: block; block-size: var(--badge-h); flex: none; }
.badge img { display: block; max-inline-size: none; }
.badge--apple img { block-size: 100%; inline-size: auto; }
.badge--google { overflow: hidden; inline-size: calc(var(--badge-h) * 566 / 170); }
.badge--google img { block-size: calc(var(--badge-h) * 250 / 170); inline-size: auto; margin: calc(var(--badge-h) * -40 / 170) 0 0 calc(var(--badge-h) * -40 / 170); }
@media (max-width: 30em) { .badges { --badge-h: 44px; } }
.hero .badges { margin-block-start: 36px; }
.band .badges { margin-block-start: 32px; justify-content: center; }
@media (max-width: 56.24em) { .hero .badges { justify-content: center; } }

.checks { display: grid; gap: 14px; }
.checks li { display: flex; align-items: flex-start; gap: 14px; font-weight: 600; line-height: 1.4; text-wrap: pretty; }
.checks li::before {
  content: "";
  flex: none;
  inline-size: 24px;
  block-size: 24px;
  margin-block-start: -1px;
  border-radius: 999px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.4l3.3 3.2L17.2 8.6' fill='none' stroke='%23F5F6F5' stroke-width='2.4' stroke-linecap='square'/%3E%3C/svg%3E") center / 24px no-repeat,
    var(--ink);
}

/* ---------- header / nav ---------- */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  background: rgba(252, 252, 251, 0.78);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-block-end: 1px solid transparent;
  transition: border-color 300ms var(--ease), background-color 300ms var(--ease);
}
.site-header.is-scrolled, .site-header.is-open { border-block-end-color: var(--line); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { background: var(--bg); } }
@media (prefers-reduced-transparency: reduce) { .site-header { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }

.nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0 16px; min-block-size: var(--nav-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-block-size: 44px; text-decoration: none; margin-inline-end: auto; }
.brand-icon { inline-size: 32px; block-size: 32px; border-radius: 22.5%; box-shadow: 0 0 0 0.5px rgba(21, 24, 26, 0.2), 0 2px 6px -2px rgba(21, 24, 26, 0.35); }
.wordmark { font-family: var(--font-display); font-weight: 800; font-size: 1.75rem; line-height: 1; letter-spacing: 0.005em; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding: 0 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color 200ms var(--ease), background-color 200ms var(--ease);
}
.nav-links a:hover { color: var(--ink); background: rgba(21, 24, 26, 0.05); }
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-end { display: flex; align-items: center; gap: 8px; }

.nav-toggle {
  display: none;
  inline-size: 44px;
  block-size: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  place-items: center;
  margin-inline-start: -8px;
  margin-inline-end: -8px;
}
.nav-toggle:hover { background: rgba(21, 24, 26, 0.05); }
.nav-toggle .bars { position: relative; inline-size: 18px; block-size: 12px; }
.nav-toggle .bars::before, .nav-toggle .bars::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 400ms var(--ease-snap), inset-block-start 400ms var(--ease-snap);
}
.nav-toggle .bars::before { inset-block-start: 2px; }
.nav-toggle .bars::after { inset-block-start: 8px; }
.nav-toggle[aria-expanded="true"] .bars::before { inset-block-start: 5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after { inset-block-start: 5px; transform: rotate(-45deg); }

@media (min-width: 56.25em) {
  .nav { display: grid; grid-template-columns: 1fr auto 1fr; }
  .nav-end { justify-self: end; }
}

@media (max-width: 56.24em) {
  /* without JS the links stay a visible second row; with JS they fold into the menu button */
  .nav-end { order: 1; }
  .nav-toggle { order: 2; }
  .nav-menu { order: 3; inline-size: 100%; overflow-x: auto; }
  .nav-links { padding-block-end: 8px; }
  .nav-links a { padding-inline: 10px; }
  .nav-links li:first-child a { padding-inline-start: 0; }

  .js .nav-toggle { display: inline-grid; }
  .js .nav-menu {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    background: rgba(252, 252, 251, 0.97);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-block-end: 1px solid var(--line);
    box-shadow: 0 24px 48px -24px rgba(21, 24, 26, 0.18);
    padding: 8px var(--gutter) 24px;
    overflow: visible;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 300ms var(--ease), transform 400ms var(--ease), visibility 0s linear 400ms;
  }
  .js .site-header.is-open .nav-menu { visibility: visible; opacity: 1; transform: none; transition: opacity 300ms var(--ease), transform 400ms var(--ease), visibility 0s; }
  .js .nav-links { display: block; padding: 0; }
  .js .nav-links li + li { border-block-start: 1px solid var(--line); }
  .js .nav-links a { display: flex; min-block-size: 60px; padding: 0; border-radius: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.875rem; color: var(--ink); }
  .js .nav-links a:hover { background: none; }
  .js .nav-links li { opacity: 0; transform: translateY(10px); transition: opacity 400ms var(--ease), transform 500ms var(--ease); }
  .js .site-header.is-open .nav-links li { opacity: 1; transform: none; }
  .js .site-header.is-open .nav-links li:nth-child(2) { transition-delay: 40ms; }
  .js .site-header.is-open .nav-links li:nth-child(3) { transition-delay: 80ms; }
  .js .site-header.is-open .nav-links li:nth-child(4) { transition-delay: 120ms; }
}
@media (max-width: 23em) {
  .wordmark { font-size: 1.5rem; }
  .brand { gap: 8px; }
  .nav-cta { padding-inline: 14px; }
}

/* ---------- phone frame ---------- */
/* .device is the size container: everything inside scales with its inline size (cqw).
   .screen holds a 393 x 852 capture (1179 x 2556 px); its top 59 logical px are empty and get the status bar. */
.device { container-type: inline-size; position: relative; }
.phone {
  position: relative;
  padding: 2.6cqw;
  border-radius: 15.5cqw;
  background: var(--rubber);
  box-shadow:
    inset 0 0 0 0.35cqw #3A4145,
    inset 0 0.45cqw 0.2cqw -0.2cqw rgba(255, 255, 255, 0.28),
    0 0 0 1px rgba(21, 24, 26, 0.35),
    var(--shadow-phone);
}
.phone::after { content: ""; position: absolute; inset-inline-end: -0.7cqw; inset-block-start: 21%; inline-size: 0.8cqw; block-size: 8.5%; border-radius: 0 0.6cqw 0.6cqw 0; background: #2A2F33; }
.screen {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 393 / 852;
  border-radius: 12.9cqw;
  overflow: hidden;
  background: var(--screen-light);
  isolation: isolate;
  transform: translateZ(0);
}
.device--dark .screen { background: var(--screen-dark); }
.screen-media { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top; color: transparent; }
/* a capture that has not landed yet shows the bare screen, never a broken-image icon or alt text */
img.screen-media::after { content: ""; position: absolute; inset: 0; background: var(--screen-light); }
.device--dark img.screen-media::after { background: var(--screen-dark); }
.screen-media.is-missing { visibility: hidden; }
/* iOS home indicator over the capture's empty bottom band */
.screen::after { content: ""; position: absolute; z-index: 2; inset-inline-start: 33%; inline-size: 34%; inset-block-end: 0.95%; block-size: 0.6%; border-radius: 999px; background: var(--ink); pointer-events: none; }
.device--dark .screen::after { background: #F5F6F5; }

.status { position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 15cqw; z-index: 2; color: var(--ink); direction: ltr; pointer-events: none; }
.device--dark .status { color: #F5F6F5; }
.sb-time { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 33.8cqw; padding-inline-start: 4.2cqw; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 4.3cqw; letter-spacing: -0.01em; font-feature-settings: "tnum" 1, "lnum" 1; }
.island { position: absolute; inset-block-start: 2.8cqw; inset-inline-start: 50%; inline-size: 32cqw; block-size: 9.4cqw; margin-inline-start: -16cqw; border-radius: 999px; background: #08090A; }
.sb-icons { position: absolute; inset-block-start: 5.85cqw; inset-inline-end: 7.2cqw; inline-size: 19.6cqw; block-size: 3.31cqw; }

/* ---------- pop-out cards (real app components lifted off the screen) ---------- */
.pop { position: absolute; z-index: 3; background: var(--card); border-radius: 18px; box-shadow: var(--shadow-pop); padding: 14px 16px; }

/* BEAT target, as in the app */
.beat-row { display: flex; align-items: center; gap: 18px; }
.beat { display: inline-flex; align-items: stretch; border: 2px solid var(--ink); border-radius: 4px; min-block-size: 48px; background: var(--card); }
.beat-tag { display: flex; align-items: center; padding: 0 10px; background: var(--beat); color: var(--on-beat); font-family: var(--font-display); font-weight: 900; font-size: 1.25rem; letter-spacing: 0.07em; }
.beat-val { display: flex; align-items: center; padding: 0 12px; font-size: 1.5rem; line-height: 1; }
.last { display: flex; flex-direction: column; gap: 2px; }
.last .label { font-size: 0.8125rem; font-weight: 600; line-height: 1.3; color: var(--ink-2); white-space: nowrap; }
.last .num { font-size: 1.5rem; line-height: 1; }
.beat-note { margin-block-start: 10px; padding-block-start: 10px; border-block-start: 1px solid var(--hairline); font-size: 0.875rem; font-weight: 600; color: var(--ink-2); }

.tag { display: inline-flex; align-items: center; block-size: 24px; padding: 0 6px; border-radius: 2px; background: var(--ink); color: var(--on-ink); font-family: var(--font-display); font-weight: 800; font-size: 1.0625rem; line-height: 1; letter-spacing: 0.02em; }
.pr-mark { display: inline-flex; align-items: center; block-size: 22px; padding: 0 7px; border-radius: 2px; background: var(--record); color: var(--on-record); font-family: var(--font-display); font-weight: 900; font-size: 1rem; line-height: 1; letter-spacing: 0.06em; }

.rec { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.rec-name { font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); line-height: 1.3; }
.rec-val { display: inline-flex; align-items: center; gap: 8px; }
.rec-val .num { font-size: 1.625rem; line-height: 1; }

/* plate drawing vocabulary (inline SVG) */
.p25 { fill: var(--plate-25); }
.p20 { fill: var(--plate-20); }
.p15 { fill: var(--plate-15); }
.p10 { fill: var(--plate-10); }
.p5 { fill: var(--plate-5); }
.p2 { fill: var(--plate-2-5); stroke: var(--rubber-line); stroke-width: 1.2; }
.p1 { fill: var(--plate-1-25); }
.pn { font-family: var(--font-display); font-weight: 900; text-anchor: middle; dominant-baseline: central; font-feature-settings: "tnum" 1, "lnum" 1; }
.tl { fill: var(--on-plate-light); }
.td { fill: var(--on-plate-dark); }
.tdim { fill: var(--ink-2); }
.ring.p5, .ring.p1, .ring.p2 { stroke: var(--outline); stroke-width: 1.5; }
.hole { fill: var(--card); }
.off { fill: none; stroke: var(--outline); stroke-width: 1.5; stroke-dasharray: 4 3; }
.cap-t { fill: var(--ink-2); font-family: var(--font-body); font-weight: 600; text-anchor: middle; }
.shaft { fill: var(--bar-steel); }
.sleeve { fill: var(--sleeve-chrome); }
.collar, .clip { fill: var(--bar-steel-hi); }
.cap { fill: var(--bar-steel-lo); }
.hl { fill: #fff; fill-opacity: 0.22; }
.sh { fill: #000; fill-opacity: 0.25; }

/* ---------- hero ---------- */
.hero { padding-block: clamp(40px, 2rem + 3vw, 88px) clamp(64px, 3rem + 4vw, 120px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: center; }
.hero-copy { display: grid; justify-items: start; }
.hero h1 { margin-block-end: 28px; }
.hero h1 > span { display: block; white-space: nowrap; }
.hero .stores { margin-block-start: 36px; }
.trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-block-start: 26px; padding-block-start: 22px; border-block-start: 1px solid var(--line); font-size: 0.9375rem; font-weight: 600; color: var(--ink-2); }
.trust li { display: inline-flex; align-items: center; gap: 8px; }
.trust li::before { content: ""; inline-size: 16px; block-size: 16px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3 2.9 6.6-6.6' fill='none' stroke='%2315181A' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E") center / 16px no-repeat; }

.hero-stage { position: relative; inline-size: 100%; max-inline-size: 540px; aspect-ratio: 10 / 12.4; margin-inline: auto; }
.hero-stage .device--back { position: absolute; inset-block-start: 0; inset-inline-end: 2%; inline-size: 44%; }
.hero-stage .device--front { position: absolute; inset-block-start: 11%; inset-inline-start: 14%; inline-size: 50%; z-index: 1; }
.hero-stage .device--back .phone { box-shadow: inset 0 0 0 0.35cqw #3A4145, 0 0 0 1px rgba(21, 24, 26, 0.3), 0 40px 80px -24px rgba(21, 24, 26, 0.22), 0 20px 40px -24px rgba(21, 24, 26, 0.25); }

/* Hero pop-outs: four real app moments floating in front of the phones, in story order:
   BEAT target, the plates that load it, the rest timer after the set, the new record.
   The layer is decorative (aria-hidden); what the cards say is in the focus screen's alt text. */
.hero-pops { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hero-pops .pop { box-shadow: 0 32px 64px -24px rgba(21, 24, 26, 0.24), 0 12px 24px -14px rgba(21, 24, 26, 0.16), 0 0 0 1px rgba(21, 24, 26, 0.1); }
.pop-text { display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; }
.pop-label { font-size: 0.8125rem; font-weight: 600; line-height: 1.25; color: var(--ink-2); white-space: nowrap; }
.pop-val { font-size: 1.5rem; line-height: 1; }

/* lifted off its own row: it sits between the big numbers and the Log set button, covering neither */
.pop--beat { inset-inline-start: 0; inset-block-start: 56.6%; padding: 12px 16px; }
.pop--beat .beat-note { margin-block-start: 9px; padding-block-start: 9px; }

/* the plates for the BEAT weight, drawn side-on as on the app's bar: a red 25 and a white 5 per side */
.pop--load { display: flex; align-items: center; gap: 14px; padding: 10px 18px 10px 12px; inset-inline-end: 0; inset-block-start: 37%; }
.load-bar { inline-size: 96px; block-size: auto; flex: none; overflow: visible; }
.plate-edge { stroke: var(--outline); stroke-width: 1.5; }

/* the rest bar, dark as in the app */
.pop--rest { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 18px; background: var(--rubber); color: var(--on-rubber); inset-inline-end: 3%; inset-block-end: 3%; }
.hero-pops .pop--rest { box-shadow: 0 32px 64px -24px rgba(21, 24, 26, 0.34), 0 12px 24px -14px rgba(21, 24, 26, 0.24), 0 0 0 1px rgba(21, 24, 26, 0.4); }
.rest-time { display: flex; flex-direction: column; gap: 4px; margin-inline-end: 12px; }
.rest-time .num { font-size: 2rem; line-height: 0.9; }
.rest-label { font-size: 0.8125rem; font-weight: 600; line-height: 1.25; color: var(--on-rubber-2); }
.rest-btn { display: grid; place-items: center; inline-size: 52px; block-size: 46px; border: 1.5px solid var(--rubber-line); border-radius: 4px; font-size: 1.3125rem; line-height: 1; }

/* the new record, with the app's PR mark */
.pop--pr { display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; inset-inline-start: 3%; inset-block-start: 2%; }
.pop--pr .pr-mark { block-size: 36px; padding: 0 9px; font-size: 1.375rem; }

@media (min-width: 56.25em) {
  .hero { padding-block-start: clamp(40px, 1rem + 3vw, 72px); }
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; }
  .hero .display { font-size: clamp(4rem, 9.2vw - 0.5rem, 7.75rem); }
  .hero-stage { margin-inline-end: 0; }
}
@media (max-width: 56.24em) {
  .hero-copy { justify-items: center; text-align: center; }
  .hero .lede { margin-inline: auto; }
  .hero .stores, .trust { justify-content: center; }
  .hero-stage { max-inline-size: 440px; }
}
/* Compact cards whenever the stage itself is narrow (tablet, the two-column hero at 1024, phones):
   a container query, so the cards follow the stage's real width, not the window's. */
.hero-stage { container-type: inline-size; }
@container (max-width: 480px) {
  .hero-pops .pop { border-radius: 14px; }
  .pop-label { font-size: 0.75rem; }
  .pop-val { font-size: 1.25rem; }
  .pop--beat { padding: 10px 12px; inset-block-start: 55.9%; }
  .pop--beat .beat-row { gap: 12px; }
  .pop--beat .beat-tag { font-size: 1.0625rem; padding: 0 8px; }
  .pop--beat .beat-val, .pop--beat .last .num { font-size: 1.25rem; }
  .pop--beat .beat { min-block-size: 42px; }
  .pop--beat .beat-note { margin-block-start: 7px; padding-block-start: 7px; font-size: 0.8125rem; }
  .pop--load { gap: 10px; padding: 8px 12px 8px 8px; }
  .load-bar { inline-size: 66px; }
  .pop--rest { gap: 6px; padding: 8px 8px 8px 12px; }
  .rest-time { margin-inline-end: 6px; }
  .rest-time .num { font-size: 1.625rem; }
  .rest-btn { inline-size: 42px; block-size: 38px; font-size: 1.125rem; }
  .pop--pr { gap: 10px; padding: 8px 12px 8px 8px; }
  .pop--pr .pr-mark { block-size: 30px; padding: 0 7px; font-size: 1.1875rem; }
}
/* phones: the front phone is wider here, so the BEAT card drops its note to stay clear of Log set,
   and the plates card rises beside the exercise title, clear of the bar drawing */
@media (max-width: 30em) {
  .hero-stage .device--front { inset-inline-start: 18%; inline-size: 52%; }
  .pop--beat { inset-block-start: 58.4%; }
  .pop--beat .beat-note { display: none; }
  .pop--load { inset-block-start: 22%; gap: 8px; }
  .load-bar { inline-size: 56px; }
  .pop--load .pop-label > span { display: block; }
}

/* ---------- statement ---------- */
.statement { padding-block: clamp(40px, 1rem + 4vw, 104px) 0; text-align: center; }
.statement .headline { margin-inline: auto; }
.statement .lede { margin: 24px auto 0; max-inline-size: 40ch; text-wrap: balance; }

/* ---------- feature rows ---------- */
.features { padding-block: clamp(64px, 3rem + 4vw, 120px) 0; display: grid; gap: var(--section); }
.feature { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.feature-copy { display: grid; justify-items: start; }
.feature-copy .headline { font-size: clamp(2.625rem, 1.9rem + 2.6vw, 4.25rem); }
.feature-copy .body { margin-block-start: 20px; font-size: 1.125rem; }
.feature-copy .checks { margin-block-start: 30px; }

.panel {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: var(--panel);
  aspect-ratio: 1 / 1.1;
  inline-size: 100%;
}
.panel > .device { position: absolute; inset-block-start: 8%; inset-inline-start: 24%; inline-size: 52%; }
.panel--pair > .device { inline-size: 44%; }
.panel--pair > .pair-a { inset-inline-start: 7%; inset-block-start: 15%; }
.panel--pair > .pair-b { inset-inline-start: 49%; inset-block-start: 7%; z-index: 1; }
.pop--plates { inset-inline: 6%; inset-block-end: 6%; padding: 14px 16px 6px; }
.pop--plates svg { inline-size: 100%; block-size: auto; overflow: visible; }
.pop--rec { inset-inline-start: 5%; inset-block-end: 8%; min-inline-size: min(70%, 300px); }

@media (min-width: 56.25em) {
  .feature { grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 112px); }
  .feature--flip .panel { order: -1; }
}
@media (max-width: 56.24em) {
  .feature .panel { max-inline-size: 600px; margin-inline: auto; }
}
@media (max-width: 30em) {
  .panel { border-radius: 22px; aspect-ratio: 1 / 1.2; }
  .panel > .device { inline-size: 56%; inset-inline-start: 22%; inset-block-start: 7%; }
  .panel--pair > .device { inline-size: 47%; }
  .panel--pair > .pair-a { inset-inline-start: 3%; }
  .panel--pair > .pair-b { inset-inline-start: 50%; }
  .pop { border-radius: 14px; }
  .pop--plates { inset-inline: 5%; padding: 10px 12px 4px; }
  .pop--rec { padding: 10px 12px; }
  .pop--rec .rec-val .num { font-size: 1.375rem; }
}

/* the one dark moment: rubber */
.rubber { background: var(--rubber); color: var(--on-rubber); margin-block-start: var(--section); padding-block-start: var(--section); overflow: hidden; }
.rubber :focus-visible { outline-color: var(--on-rubber); }
.rubber-copy { display: grid; justify-items: center; text-align: center; }
.rubber .body { color: var(--on-rubber-2); margin-block-start: 22px; font-size: 1.1875rem; max-inline-size: 44ch; }
.rubber .checks { margin-block-start: 34px; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 32px; }
.rubber .checks li::before { background-color: var(--on-rubber); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.4l3.3 3.2L17.2 8.6' fill='none' stroke='%231B1E20' stroke-width='2.4' stroke-linecap='square'/%3E%3C/svg%3E"); }
.rubber-stage { position: relative; margin-block-start: clamp(56px, 3rem + 3vw, 96px); block-size: calc(clamp(260px, 14rem + 9vw, 360px) * 1.96); }
.rubber-stage .device { position: absolute; inset-block-start: 0; inset-inline-start: 50%; inline-size: clamp(260px, 14rem + 9vw, 360px); transform: translateX(-50%); }
.rubber-stage .phone { background: #0D0F10; box-shadow: inset 0 0 0 0.35cqw #5A6368, 0 0 0 1.5px rgba(255, 255, 255, 0.16), inset 0 0.45cqw 0.2cqw -0.2cqw rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 50px 100px -20px rgba(0, 0, 0, 0.55), 0 30px 60px -30px rgba(0, 0, 0, 0.6); }
/* the loaded bar runs wall to wall behind the phone, as on the app's platform */
/* centred on the in-app shaft, which sits about 46% down the stage, so the bar reads as one bar running through the phone */
.rubber-bar { --bar-h: clamp(170px, 7rem + 9vw, 270px); position: absolute; inset-inline: 0; inset-block-start: calc(46.4% - var(--bar-h) * 0.478); block-size: var(--bar-h); pointer-events: none; }
.rubber-bar svg { position: absolute; inset-block: 0; block-size: 100%; inline-size: auto; max-inline-size: none; overflow: visible; }
.rubber-bar .bar-r { inset-inline-start: calc(50% + clamp(130px, 7rem + 4.5vw, 180px) + 40px); }
.rubber-bar .bar-l { inset-inline-end: calc(50% + clamp(130px, 7rem + 4.5vw, 180px) + 40px); }
@media (max-width: 44em) { .rubber-bar { display: none; } }

/* ---------- highlights gallery ---------- */
.highlights { padding-block: var(--section) 0; }
.highlights-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.gallery-nav { display: flex; gap: 10px; }
.gallery-nav button {
  inline-size: 48px;
  block-size: 48px;
  border: 0;
  border-radius: 999px;
  background: var(--panel);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 200ms var(--ease), opacity 200ms var(--ease), transform 200ms var(--ease);
}
.gallery-nav button:hover { background: var(--panel-deep); }
.gallery-nav button:active { transform: scale(0.95); }
.gallery-nav button:disabled { opacity: 0.4; cursor: default; }
.gallery-nav svg { inline-size: 20px; block-size: 20px; }
.gallery-nav .prev svg { transform: scaleX(-1); }
.gallery-track {
  --edge: max(var(--gutter), calc((100% - var(--page)) / 2));
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(250px, 17rem + 6vw, 360px);
  gap: clamp(14px, 1.5vw, 24px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  padding: 40px var(--edge) 28px;
  scrollbar-width: thin;
}
.js .gallery-track { scrollbar-width: none; }
.js .gallery-track::-webkit-scrollbar { display: none; }
.gallery-track:focus-visible { outline-offset: -3px; border-radius: 28px; }
.shot { scroll-snap-align: start; position: relative; overflow: hidden; border-radius: 28px; background: var(--panel); aspect-ratio: 4 / 6; }
.shot figcaption { position: relative; z-index: 2; padding: 26px 26px 0; font-weight: 700; font-size: 1.1875rem; line-height: 1.3; text-wrap: balance; }
.shot .device { position: absolute; inset-inline-start: 20%; inset-block-start: 20%; inline-size: 60%; }
.shot--dark { background: var(--rubber); color: var(--on-rubber); }
.shot--dark .phone { background: #0D0F10; box-shadow: inset 0 0 0 0.35cqw #5A6368, 0 0 0 1.5px rgba(255, 255, 255, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 40px 80px -20px rgba(0, 0, 0, 0.5); }

/* ---------- FAQ + help ---------- */
.faq-section { padding-block: var(--section) 0; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.faq-aside { display: grid; gap: 32px; align-content: start; }
.help-card { border-radius: 28px; background: var(--panel); padding: 28px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.help-card .title, .help-card .body { flex-basis: 100%; }
.help-card .title { font-size: 1.875rem; }
.help-card .body { margin-block-end: 6px; }
.faq-list { border-block-start: 1px solid var(--hairline); }
.faq-list details { border-block-end: 1px solid var(--hairline); }
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-block-size: 72px;
  padding-block: 18px;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "";
  flex: none;
  inline-size: 32px;
  block-size: 32px;
  border-radius: 999px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M10 16h12M16 10v12' stroke='%2315181A' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") center / 32px no-repeat,
    var(--panel);
  transition: transform 400ms var(--ease-snap), background-color 200ms var(--ease);
}
.faq-list summary:hover::after { background-color: var(--panel-deep); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list summary:focus-visible { outline-offset: 4px; }
.faq-answer { padding-block-end: 24px; color: var(--ink-2); max-inline-size: 60ch; }
.faq-answer p + p { margin-block-start: 0.75em; }
.faq-answer a { color: var(--ink); font-weight: 600; }
@media (min-width: 56.25em) {
  .faq-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 7vw, 112px); }
  .faq-aside { position: sticky; inset-block-start: calc(var(--nav-h) + 32px); }
}

/* ---------- download band ---------- */
.download { padding-block: var(--section) 0; }
.band {
  border-radius: 36px;
  background: var(--panel);
  padding: clamp(48px, 3rem + 3vw, 96px) clamp(20px, 1rem + 4vw, 80px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}
.band-icon { inline-size: 88px; block-size: 88px; border-radius: 22.5%; box-shadow: 0 0 0 0.5px rgba(21, 24, 26, 0.2), 0 24px 40px -16px rgba(21, 24, 26, 0.4), 0 8px 16px -8px rgba(21, 24, 26, 0.3); margin-block-end: 32px; }
.band .lede { margin-block-start: 20px; max-inline-size: 40ch; }
.band .stores { margin-block-start: 32px; justify-content: center; }
.facts { margin-block-start: clamp(40px, 2rem + 2vw, 64px); padding-block-start: 32px; border-block-start: 1px solid var(--hairline); display: grid; gap: 24px 48px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); inline-size: 100%; max-inline-size: 60rem; text-align: start; }
.fact .title { font-size: 1.75rem; margin-block-end: 8px; }
.fact .body { font-size: 1rem; }

/* ---------- footer ---------- */
.site-footer { margin-block-start: var(--section); background: var(--panel); color: var(--ink-2); font-size: 0.9375rem; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: 64px 48px; }
.footer-brand { display: grid; gap: 16px; justify-items: start; align-content: start; }
.footer-brand .brand { margin: 0; color: var(--ink); }
.footer-brand p { max-inline-size: 30ch; }
.footer-cols { display: grid; gap: 32px 24px; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.footer-col h2 { font-family: var(--font-body); font-size: 0.875rem; font-weight: 700; color: var(--ink); margin-block-end: 8px; }
.footer-col a { display: inline-flex; align-items: center; min-block-size: 44px; text-decoration: none; }
.footer-col a { color: var(--ink-3); transition: color 200ms var(--ease); }
.footer-col a:hover { color: var(--ink); }
.footer-col a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 24px 40px; border-block-start: 1px solid var(--hairline); font-size: 0.875rem; color: var(--ink-3); }
@media (min-width: 56.25em) {
  .footer-top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); padding-block: 80px 64px; }
}

/* ---------- features page ---------- */
.fhero { padding-block: clamp(40px, 2rem + 3vw, 88px) 0; }
.fhero .lede { margin-block-start: 26px; }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 32px; }
.jump a { display: inline-flex; align-items: center; min-block-size: 44px; padding: 0 18px; border-radius: 999px; background: var(--panel); font-weight: 600; font-size: 0.9375rem; text-decoration: none; transition: background-color 200ms var(--ease); }
.jump a:hover { background: var(--panel-deep); }
.fhero-stage { position: relative; inline-size: 100%; max-inline-size: 520px; aspect-ratio: 10 / 11.6; margin-inline: auto; }
.fhero-stage .device--back { position: absolute; inset-block-start: 0; inset-inline-start: 4%; inline-size: 44%; }
.fhero-stage .device--front { position: absolute; inset-block-start: 8%; inset-inline-end: 6%; inline-size: 48%; z-index: 1; }
@media (max-width: 56.24em) {
  .fhero .hero-copy { justify-items: center; text-align: center; }
  .fhero .lede { margin-inline: auto; }
  .jump { justify-content: center; }
  .fhero-stage { max-inline-size: 420px; }
}

.cats { padding-block: var(--section) 0; display: grid; gap: var(--section); }
.cat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
.cat-head .headline { font-size: clamp(2.5rem, 1.8rem + 2.4vw, 4rem); }
.cat-head .body { margin-block-start: 16px; font-size: 1.125rem; }
.cat .panel { margin-block-start: 32px; aspect-ratio: 1 / 1; }
.cat .panel > .device { inline-size: 48%; inset-inline-start: 26%; inset-block-start: 7%; }
.items { display: grid; gap: 0 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); align-content: start; }
.item { padding-block: 22px; border-block-start: 1px solid var(--hairline); display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-content: start; }
.item::before {
  content: "";
  grid-row: span 2;
  inline-size: 24px;
  block-size: 24px;
  border-radius: 999px;
  margin-block-start: -1px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.4l3.3 3.2L17.2 8.6' fill='none' stroke='%23F5F6F5' stroke-width='2.4' stroke-linecap='square'/%3E%3C/svg%3E") center / 24px no-repeat,
    var(--ink);
}
.item h3 { font-size: 1.0625rem; font-weight: 700; line-height: 1.35; }
.item p { color: var(--ink-2); font-size: 1rem; line-height: 1.5; text-wrap: pretty; }
@media (min-width: 56.25em) {
  .cat { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 96px); }
  .cat-head { position: sticky; inset-block-start: calc(var(--nav-h) + 32px); }
  .items { padding-block-start: 6px; }
}
@media (max-width: 56.24em) {
  .cat .panel { max-inline-size: 520px; }
}

/* ---------- long-form pages ---------- */
.doc-hero { padding-block: clamp(48px, 2rem + 4vw, 112px) clamp(32px, 1.5rem + 2vw, 56px); }
.doc-hero .display { font-size: clamp(3.25rem, 2rem + 5vw, 6.25rem); max-inline-size: 14ch; }
.doc { padding-block-end: 8px; }
.prose { max-inline-size: 68ch; color: var(--ink-2); }
.prose > * + * { margin-block-start: 1em; }
.prose h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1.7rem + 1vw, 2.5rem); line-height: 0.95; letter-spacing: 0.005em; color: var(--ink); margin-block-start: 1.7em; padding-block-start: 28px; border-block-start: 1px solid var(--hairline); hyphens: none; text-wrap: balance; }
.prose h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.625rem; line-height: 1; color: var(--ink); margin-block-start: 1.8em; hyphens: none; }
.prose > h2 + *, .prose > h3 + * { margin-block-start: 0.8em; }
.prose ul { list-style: disc; padding-inline-start: 1.25em; }
.prose li + li { margin-block-start: 0.55em; }
.prose li::marker { color: var(--outline); }
.prose a { color: var(--ink); font-weight: 600; }

/* ---------- support ---------- */
.contact { margin-block-start: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.contact-mail { display: inline-flex; align-items: center; min-block-size: 64px; padding: 0 28px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-family: var(--font-display); font-weight: 800; font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); line-height: 1; letter-spacing: 0.005em; text-decoration: none; overflow-wrap: anywhere; transition: background-color 200ms var(--ease), transform 200ms var(--ease); }
.contact-mail:hover { background: var(--action-pressed); }
.contact-mail:active { transform: scale(0.98); }
.support-faq { margin-block-start: clamp(56px, 3rem + 3vw, 96px); }
.support-faq > h2 { margin-block-end: 24px; }
.faq { max-inline-size: 68ch; border-block-start: 1px solid var(--hairline); }
.faq > div { border-block-end: 1px solid var(--hairline); padding-block: 24px; }
.faq h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.125rem; line-height: 1.35; }
.faq p { margin-block-start: 8px; color: var(--ink-2); }
.faq p + p { margin-block-start: 0.7em; }
.faq a { color: var(--ink); font-weight: 600; }
.also { margin-block-start: 48px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- 404 ---------- */
.lost { padding-block: clamp(48px, 2rem + 5vw, 128px) 56px; display: grid; justify-items: start; }
.lost .lede { margin-block-start: 24px; }
.lost .btn { margin-block-start: 36px; }
.platform { background: var(--rubber); block-size: clamp(184px, 8rem + 8vw, 300px); overflow: hidden; }
.platform-in { position: relative; block-size: 100%; max-inline-size: calc(var(--page) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.platform svg { position: absolute; inset-block: 0; inset-inline-end: var(--gutter); block-size: 100%; inline-size: auto; max-inline-size: none; overflow: visible; }
.lost-page .site-footer { margin-block-start: 0; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .reveal { opacity: 0; transform: translate3d(0, 32px, 0); transition: opacity 900ms var(--ease), transform 1100ms var(--ease); }
  .reveal.is-in { opacity: 1; transform: none; }
  .reveal.d1 { transition-delay: 90ms; }
  .reveal.d2 { transition-delay: 180ms; }
  .reveal.d3 { transition-delay: 270ms; }
  .reveal.d4 { transition-delay: 360ms; }
  .pop.reveal { transform: translate3d(0, 20px, 0) scale(0.96); }
  .pop.reveal.is-in { transform: none; }

  /* Hero entrance. site.js sets html.hero-ready in <head>, before the first paint, so the stage starts in its
     start pose with NO transition (nothing can fly out); .is-in (stage in view) then plays one-way keyframes,
     which run even when set in the same frame (desktop, hero already on screen). JS off or reduced motion:
     no hero-ready, nothing hidden. The phones settle first; then each card rises 40 px and fades in,
     strictly vertical, 1.2 s with a long soft settle, one after another 0.55 s apart (done by about 3.5 s).
     The front phone never goes see-through (the back phone would ghost through it): it only settles 16 px. */
  .hero-ready [data-hero-stage]:not(.is-in) .device { transform: translate3d(0, 16px, 0); }
  .hero-ready [data-hero-stage]:not(.is-in) .device--back { opacity: 0; }
  .hero-ready [data-hero-stage]:not(.is-in) .hero-pops .pop { opacity: 0; transform: translate3d(0, 40px, 0); }
  .hero-ready [data-hero-stage].is-in .device { animation: hero-settle 900ms var(--ease) both; }
  .hero-ready [data-hero-stage].is-in .device--back { animation-name: hero-settle-fade; }
  .hero-ready [data-hero-stage].is-in .device--front { animation-delay: 70ms; }
  .hero-ready [data-hero-stage].is-in .hero-pops .pop { animation: hero-rise 1200ms var(--ease) both; }
  .hero-ready [data-hero-stage].is-in .hero-pops .s1 { animation-delay: 650ms; }
  .hero-ready [data-hero-stage].is-in .hero-pops .s2 { animation-delay: 1200ms; }
  .hero-ready [data-hero-stage].is-in .hero-pops .s3 { animation-delay: 1750ms; }
  /* the record rises last, then alone drifts a few pixels, very slowly */
  .hero-ready [data-hero-stage].is-in .hero-pops .pop--pr.s4 {
    animation: hero-rise 1200ms var(--ease) 2300ms both, hero-drift 6s cubic-bezier(0.37, 0, 0.63, 1) 3500ms infinite alternate;
  }
}
@keyframes hero-rise { from { opacity: 0; transform: translate3d(0, 40px, 0); } to { opacity: 1; transform: none; } }
@keyframes hero-settle { from { transform: translate3d(0, 16px, 0); } to { transform: none; } }
@keyframes hero-settle-fade { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
@keyframes hero-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -6px, 0); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* JS-inserted marker for the header's scrolled state */
.scroll-sentinel { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 1px; block-size: 8px; pointer-events: none; }