/* Karneh web theme — the app's design tokens (specs/app-redesign.md §1,
   subscription-app/lib/ui/core/theme) for every page of the web host: the
   landing page, /delete-account and the member pages. This file is the one
   owner of the palette; pages build on the custom properties below and never
   write a raw colour. Light is the default, as in the app; the app's dark
   tokens apply when the visitor's system asks for dark. */

@font-face { font-family: "Manrope"; font-weight: 500; font-display: swap; src: url("/assets/landing/manrope-medium.woff2?v=f991c20c27") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 700 800; font-display: swap; src: url("/assets/landing/manrope-bold.woff2?v=ef5dc7f720") format("woff2"); }
@font-face { font-family: "Noto Sans Arabic"; font-weight: 500; font-display: swap; src: url("/assets/landing/noto-arabic-medium.woff2?v=e43bb317c5") format("woff2"); }
@font-face { font-family: "Noto Sans Arabic"; font-weight: 700 800; font-display: swap; src: url("/assets/landing/noto-arabic-bold.woff2?v=2f50fcada7") format("woff2"); }

/* AppColors, light. */
:root {
  color-scheme: light dark;
  --bg: #F4F4FA;
  --card: #FFFFFF;
  --raised: #FFFFFF;
  --text-primary: #14132B;
  --text-secondary: #565870;
  --divider: #ECECF4;
  --field-border: #8A8CA3;
  --brand: #4B3BC9;
  --on-brand: #FFFFFF;
  --brand-text: #4B3BC9;
  --brand-soft: #ECEAFB;
  --success: #0C6B43;
  --success-soft: #E1F3EA;
  --warning: #7A4F00;
  --warning-soft: #FBEFD5;
  --destructive: #A82F27;
  --destructive-soft: #FBE8E6;
  --info: #2B5591;
  --info-soft: #E6EEF9;
  --disabled-bg: #E4E4EE;
  --disabled-fg: #8A8CA3;
  --chart-bar: #DCD8F7;
  --chart-bar-off: #E9E9F2;
  /* Same in both themes. */
  --hero: #4B3BC9;
  --on-hero: #FFFFFF;
  --on-hero-muted: #E4E0FF;
  --hero-chip-bg: #FFFFFF;
  --hero-chip-fg: #3A2DA3;
  --ink-on-light: #14132B;
  /* Status inks on the white hero chip: HeroStatusPill reads the light
     palette's tone inks in both themes, since the chip stays white. */
  --chip-success: #0C6B43;
  --chip-warning: #7A4F00;
  --chip-destructive: #A82F27;
  --chip-info: #2B5591;
  --chip-neutral: #565870;
  /* The days ring's arc on the hero fill: the dark palette's tone inks,
     the ones made to read on a saturated ground (designs W1 and C1). */
  --hero-ring-success: #6FD6A3;
  --hero-ring-warning: #F0BE5C;
  --hero-ring-destructive: #FF9186;

  /* AppShadows: light cards lift off the ground; dark cards cast none. */
  --shadow-card: 0 1px 2px rgb(20 19 43 / 0.05), 0 8px 20px rgb(20 19 43 / 0.05);
  --shadow-lift: 0 2px 4px rgb(20 19 43 / 0.10), 0 16px 40px rgb(20 19 43 / 0.10);
  /* The soft brand wash behind the hero scene. */
  --wash: rgb(75 59 201 / 0.14);

  /* AppSpacing. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* AppRadius. */
  --radius-card: 20px;
  --radius-control: 16px;
  --radius-small: 12px;
  --radius-pill: 999px;
  --radius-pass: 24px;

  /* AppSizes. */
  --touch-target: 48px;
  --button-height: 52px;
  --field-height: 52px;
  --pill-height: 28px;
  --row-min: 64px;
  --well: 44px;

  /* AppTextStyles: size / line height. */
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: 800 28px / 32px var(--font);
  --title: 700 16px / 24px var(--font);
  --body: 500 15px / 24px var(--font);
  --body-strong: 700 15px / 24px var(--font);
  --label: 700 15px / 20px var(--font);
  --caption: 600 13px / 16px var(--font);
  --tracking-tight: -0.02em;
}

/* AppColors, dark. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12111F;
    --card: #1C1B2E;
    --raised: #262540;
    --text-primary: #ECEBF7;
    --text-secondary: #A6A7C0;
    --divider: #2C2B45;
    --field-border: #7375A0;
    --brand: #8F82F5;
    --on-brand: #12111F;
    --brand-text: #B3A9FF;
    --brand-soft: #2A2752;
    --success: #6FD6A3;
    --success-soft: #1B3229;
    --warning: #F0BE5C;
    --warning-soft: #362D1A;
    --destructive: #FF9186;
    --destructive-soft: #3A2222;
    --info: #8FB8F5;
    --info-soft: #1E2C45;
    --disabled-bg: #262540;
    --disabled-fg: #7375A0;
    --chart-bar: #3A3768;
    --chart-bar-off: #262540;

    --shadow-card: none;
    --shadow-lift: 0 24px 48px -20px rgb(0 0 0 / 0.6);
    --wash: rgb(143 130 245 / 0.12);
  }
}

/* A dark band on any page: one moment in the app's dark theme (the landing
   page's screens strip). It re-maps the same token names to the dark
   palette, so components inside never name a colour; it must stay a copy of
   the dark block above, which webtheme_test.go checks. */
[data-band="dark"] {
  color-scheme: dark;
  --bg: #12111F;
  --card: #1C1B2E;
  --raised: #262540;
  --text-primary: #ECEBF7;
  --text-secondary: #A6A7C0;
  --divider: #2C2B45;
  --field-border: #7375A0;
  --brand: #8F82F5;
  --on-brand: #12111F;
  --brand-text: #B3A9FF;
  --brand-soft: #2A2752;
  --success: #6FD6A3;
  --success-soft: #1B3229;
  --warning: #F0BE5C;
  --warning-soft: #362D1A;
  --destructive: #FF9186;
  --destructive-soft: #3A2222;
  --info: #8FB8F5;
  --info-soft: #1E2C45;
  --disabled-bg: #262540;
  --disabled-fg: #7375A0;
  --chart-bar: #3A3768;
  --chart-bar-off: #262540;

  --shadow-card: none;
  --shadow-lift: 0 24px 48px -20px rgb(0 0 0 / 0.6);
  --wash: rgb(143 130 245 / 0.12);
}

/* Arabic: its own face, taller lines for the marks above and below, and no
   negative tracking (it would break the joins). */
html[lang="ar"] {
  --font: "Manrope", "Noto Sans Arabic", system-ui, sans-serif;
  --tracking-tight: 0;
}
/* Karneh — karneh.com
   The app on the web, light first like the app and its dark theme when the
   system asks for it (the shared token sheet from internal/webtheme is
   prepended to this file when it is served). Components name tokens only.
   The page keeps a rhythm of three grounds: the bg ground, brandSoft stages
   that hold the app's own components, and two signature bands: a dark band
   for the screens strip (the app's dark theme, re-mapped by
   [data-band="dark"]) and a hero-violet band for members, the colour of the
   app's pass card. One stylesheet for both directions: logical properties
   only, and --flip mirrors the tilts for right-to-left. Every text/fill
   pair is checked in both themes by contrast_test.go. */

@property --orbit {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@property --sweep {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 72%;
}

:root {
  --body-leading: 1.6;
  --head-leading: 1.08;

  /* Web scale of the app's type roles: the display and section titles grow
     with the viewport, keeping 800 and the tight tracking. */
  --text-body: 1.0625rem;
  --text-lede: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);
  --text-display: clamp(44px, 6vw, 76px);
  --text-section: clamp(30px, 4vw, 44px);
  --text-feature: clamp(24px, 1.6rem + 0.6vw, 32px);
  --text-numeral: 56px;

  --gutter: clamp(16px, 4vw, 40px);
  --page: 1200px;
  /* The app's section gap (24) scaled up for the web; cards stay 12 apart. */
  --section-gap: clamp(72px, 9vw, 128px);
  --card-gap: var(--space-3);
  /* Stages and bands: the pass-card radius, grown for page-sized surfaces. */
  --radius-stage: 32px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --rise: 600ms;
  --flip: 1;

  /* Phone frame: a phone is a phone, dark in both themes: the inkOnLight
     bezel and the dark fieldBorder (#7375A0) as a 40% rim. */
  --bezel: var(--ink-on-light);
  --phone-rim: rgb(115 117 160 / 0.4);
  --phone-bezel: 10px;
  --phone-radius: 36px;

  /* Decorative only (no text sits on them): the hero's grid lines and the
     soft light on the violet band. */
  --grid-line: color-mix(in srgb, var(--brand-text) 8%, transparent);
  --hero-glow: color-mix(in srgb, var(--on-hero) 12%, transparent);
  --hero-ring: color-mix(in srgb, var(--on-hero) 22%, transparent);
  --hero-rule: color-mix(in srgb, var(--on-hero) 24%, transparent);

  /* The tick in the plan lists, drawn in the success token (a data URI
     cannot read custom properties, so each theme spells its colour). */
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%230C6B43' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root { --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%236FD6A3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
}

[dir="rtl"] { --flip: -1; }

/* Arabic: the app's 1.75 line height for the marks above and below. */
html[lang="ar"] { --body-leading: 1.75; --head-leading: 1.3; }

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text-primary);
  font: 500 var(--text-body) / var(--body-leading) var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--brand-text); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { color: var(--text-primary); }
:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 2px; border-radius: var(--space-1); }

h1, h2, h3 { margin: 0; line-height: var(--head-leading); text-wrap: balance; }
h1, h2 { font-weight: 800; letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-section); }
h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.35; }
p { margin: 0; }
figure { margin: 0; }

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

.skip-link {
  position: absolute;
  inset-inline-start: var(--gutter);
  top: -100px;
  z-index: 20;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-small);
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 700;
}
.skip-link:focus { top: var(--space-3); }

/* ---------- Components: card, button, pill, banner, well ---------- */

/* AppCard: card fill, radius 20, the shadow token (none in dark), and a
   small lift under the pointer. */
.extra, .step, .panel, .faq-list, .plan-free {
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.extra, .step, .panel, .plan {
  transition: translate 220ms var(--ease), box-shadow 220ms var(--ease);
}
.extra:hover, .step:hover, .panel:hover, .plan:hover { translate: 0 -4px; box-shadow: var(--shadow-lift); }

/* AppStatusPill shape, tonal: the kicker above headings. */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--pill-height);
  padding-inline: var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--brand-soft);
  color: var(--brand-text);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  justify-self: start;
}
.kicker-dot { width: var(--space-2); height: var(--space-2); border-radius: 50%; background: currentColor; }

/* AppStatusPill, success tone: soft fill, success label, a dot marker. */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding-inline: var(--space-3) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: var(--shadow-lift);
}
.status-success { background: var(--success-soft); color: var(--success); }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.status-sep { margin-inline: -2px; }
.status-time { font-weight: 600; font-variant-numeric: tabular-nums; }

/* AppBanner, warning tone: soft fill, warning text and icon. */
.banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  box-shadow: var(--shadow-lift);
}
.banner-warning { background: var(--warning-soft); color: var(--warning); }
/* The app's warning glyph: a ring with a bar and a dot, in currentColor. */
.banner-icon {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background:
    linear-gradient(currentColor, currentColor) 50% 28% / 2px 38% no-repeat,
    radial-gradient(circle, currentColor 0 1.3px, transparent 1.6px) 50% 78% / 4px 4px no-repeat;
}

.stores { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* AppButton, 52 high, radius 16: Google Play primary (brand fill), App
   Store outline (fieldBorder 1.5). */
.store {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--button-height);
  padding-block: 6px;
  padding-inline: 18px var(--space-5);
  border-radius: var(--radius-control);
  color: var(--on-brand);
  background: var(--brand);
  text-decoration: none;
  line-height: 1.15;
  transition: translate 180ms var(--ease), filter 180ms ease, box-shadow 180ms ease;
}
.store:hover { color: var(--on-brand); translate: 0 -2px; filter: brightness(1.08); box-shadow: var(--shadow-lift); }
.store svg { width: var(--space-5); height: var(--space-5); flex: none; fill: currentColor; }
.store span { display: grid; }
.store small { font-size: 0.75rem; font-weight: 500; }
.store strong { font-size: 1.0625rem; font-weight: 700; font-family: "Manrope", system-ui, sans-serif; }
.store-app-store, .store-app-store:hover { background: transparent; color: var(--text-primary); box-shadow: inset 0 0 0 1.5px var(--field-border); filter: none; }
/* On the violet band: the white hero chip as a button. */
.store-on-hero, .store-on-hero:hover { background: var(--hero-chip-bg); color: var(--hero-chip-fg); }

.hero-note { display: flex; align-items: center; gap: var(--space-2); margin-top: 20px; color: var(--text-secondary); font-size: 0.9375rem; }
.hero-note svg { flex: none; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--success-soft); fill: none; stroke: var(--success); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Icon wells: brandSoft squares holding brandText icons. */
.extra-icon, .panel-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--well);
  height: var(--well);
  border-radius: var(--radius-small);
  background: var(--brand-soft);
}
.extra-icon svg, .panel-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--brand-text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Phone frame: the bezel, a hairline rim, the app's lifted shadow. The
   screen keeps a card fill, so a capture still on its way reads as a
   screen, never as an empty frame. */
.phone {
  position: relative;
  padding: var(--phone-bezel);
  border-radius: var(--phone-radius);
  background: var(--bezel);
  box-shadow: 0 0 0 1px var(--phone-rim), var(--shadow-lift);
}
.phone img {
  width: 100%;
  aspect-ratio: 600 / 1333;
  border-radius: calc(var(--phone-radius) - var(--phone-bezel));
  background: var(--card);
}

/* The app's pass card: solid hero fill, radius 24, gym kicker and plan,
   a white QR tile with the live refresh ring, and the days-left chip. */
.pass-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: var(--radius-pass);
  background: var(--hero);
  color: var(--on-hero);
  box-shadow: var(--shadow-lift);
}
.pass-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.pass-gym { color: var(--on-hero-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3; }
html[lang="ar"] .pass-gym { letter-spacing: 0; }
.pass-plan { margin-top: 4px; font-size: 1.25rem; font-weight: 800; line-height: 1.25; }
.pass-days {
  display: grid;
  place-items: center;
  min-height: var(--pill-height);
  border-radius: var(--radius-pill);
  background: var(--hero-chip-bg);
  color: var(--hero-chip-fg);
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
}
/* The QR tile: inkOnLight modules on the white hero chip, as in the app. */
.pass-qr {
  position: relative;
  flex: none;
  width: 38%;
  aspect-ratio: 1;
  padding: 7%;
  border-radius: var(--radius-small);
  background: var(--hero-chip-bg);
}
.pass-qr svg { display: block; width: 100%; height: 100%; fill: var(--ink-on-light); }
/* The QR refreshes on its own: a ring that sweeps round, as in the app. */
.pass-ring {
  position: absolute;
  inset-block-start: -7px;
  inset-inline-end: -7px;
  width: 22px;
  height: 22px;
  padding: 3px;
  border-radius: 50%;
  background: var(--hero-chip-bg);
  box-shadow: var(--shadow-card);
}
.pass-ring::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(var(--hero) var(--sweep), var(--on-hero-muted) 0);
  -webkit-mask: radial-gradient(circle, transparent 46%, #000 50%);
  mask: radial-gradient(circle, transparent 46%, #000 50%);
  animation: sweep 30s linear infinite;
}

/* AppStatCard: a number (24/800, tabular) over its label. */
.stat-card {
  display: grid;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  background: var(--card);
  box-shadow: var(--shadow-lift), 0 0 0 1px var(--divider);
}
.stat-card strong { font-size: 1.5rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.stat-card span { color: var(--text-secondary); font-size: 0.8125rem; font-weight: 600; line-height: 1.3; white-space: nowrap; }

/* Stages: brandSoft surfaces the app's components are set on. */
.stage { position: relative; border-radius: var(--radius-stage); background: var(--brand-soft); }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--card);
  border-bottom: 1px solid var(--divider);
}

.header-bar { display: flex; align-items: center; gap: clamp(12px, 3vw, 32px); min-height: 68px; }

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text-primary); text-decoration: none; font-weight: 800; font-size: 1.1875rem; letter-spacing: var(--tracking-tight); }
.brand img { width: 34px; height: 34px; border-radius: 10px; }
.brand-local { color: var(--text-secondary); font-weight: 500; font-size: 1rem; letter-spacing: 0; padding-inline-start: 10px; border-inline-start: 1px solid var(--divider); }

.site-nav { margin-inline-start: auto; }
.site-nav ul { display: flex; gap: clamp(16px, 2.6vw, 34px); margin: 0; padding: 0; list-style: none; }
.site-nav a { display: inline-flex; align-items: center; min-height: var(--touch-target); color: var(--text-secondary); text-decoration: none; font-size: 0.9375rem; font-weight: 700; }
.site-nav a:hover { color: var(--text-primary); }

/* Language switch: a tonal pill. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding-inline: var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--brand-soft);
  color: var(--brand-text);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 700;
  white-space: nowrap;
}
.lang-switch:hover { color: var(--brand-text); text-decoration: underline; }
.lang-switch svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
/* The switch names the other language in its own script, so it uses that
   script's system face instead of downloading a web font for one word. */
.lang-switch[lang="ar"] { font-family: system-ui, "Segoe UI", Tahoma, sans-serif; }

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

.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(32px, 5vw, 72px) clamp(64px, 8vw, 112px);
}

/* A brandSoft wash and a faint grid behind the scene, fading out. */
.hero-backdrop {
  --wash-at: 74% 46%;
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(42% 56% at var(--wash-at), var(--wash), transparent 72%),
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 48px 48px;
  -webkit-mask: radial-gradient(60% 75% at var(--wash-at), #000 35%, transparent 85%);
  mask: radial-gradient(60% 75% at var(--wash-at), #000 35%, transparent 85%);
}
[dir="rtl"] .hero-backdrop { --wash-at: 26% 46%; }

.hero-grid { display: grid; gap: clamp(48px, 7vw, 64px); align-items: center; }

.hero-copy { position: relative; z-index: 2; display: grid; justify-items: start; }
.hero h1 { margin-block: var(--space-5); font-size: var(--text-display); max-width: 11ch; }
html[lang="ar"] .hero h1 { max-width: 12ch; }
.hero-lede { max-width: 34rem; margin-bottom: var(--space-6); color: var(--text-secondary); font-size: var(--text-lede); }

/* The stage: every layer is placed in percentages of it, so the whole
   composition scales as one object. Nothing is clipped; the layers that
   hang over its edge keep inside the page gutter. */
.hero-stage {
  width: 100%;
  max-width: 560px;
  aspect-ratio: 4 / 5;
  margin-inline: auto;
  isolation: isolate;
  background: none;
  border-radius: 0;
}

/* The hero scene floats on an aura instead of a box: a soft brand glow
   behind the phones and one thin orbit ring whose highlight glides around
   the composition. Both are pseudo-elements under every layer, so the
   percentage placement above is untouched. */
.hero-stage::before,
.hero-stage::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  border-radius: 50%;
}
.hero-stage::before {
  inset: 10% 6%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 44%, transparent), transparent);
  filter: blur(36px);
  animation: rise var(--rise) var(--ease) both, breathe 9s ease-in-out infinite;
}
.hero-stage::after {
  inset: 1% 0;
  background:
    conic-gradient(from var(--orbit), transparent 0 64%, color-mix(in srgb, var(--brand) 70%, transparent) 82%, transparent 100%),
    color-mix(in srgb, var(--brand) 16%, transparent);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  animation: rise var(--rise) var(--ease) 100ms both, orbit 14s linear infinite;
}
.hero-stage .phone { position: absolute; }
.phone-front { z-index: 3; width: 52%; inset-inline-start: 9%; top: 5%; rotate: calc(-4deg * var(--flip)); }
.phone-back { z-index: 2; width: 40%; inset-inline-end: 5%; top: 14%; rotate: calc(8deg * var(--flip)); }
.hero-pass { position: absolute; z-index: 4; width: 46%; inset-inline-start: -5%; bottom: 6%; rotate: calc(-10deg * var(--flip)); }
.float { position: absolute; z-index: 5; margin: 0; }
.float-checkin { inset-inline-start: -7%; top: 20%; }
.float-stat { inset-inline-end: -3%; top: 4%; }
.float-expiring { inset-inline-end: -3%; bottom: 13%; }

/* Motion: the copy and the scene rise in, staggered, then the floating
   components drift on their own phases. Every keyframe starts from the
   resting pose, so a still frame (and reduced motion) shows the finished
   composition. */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes float { 50% { translate: 0 -10px; } }
@keyframes sweep { from { --sweep: 0%; } to { --sweep: 100%; } }
@keyframes breathe { 50% { opacity: 0.78; scale: 1.06; } }
@keyframes orbit { to { --orbit: 360deg; } }
@keyframes arrive { from { opacity: 0; transform: translateY(18px) scale(0.92); } }

.hero-copy > *, .hero-stage > * { animation: rise var(--rise) var(--ease) both; }
.hero-copy > :nth-child(2) { animation-delay: 60ms; }
.hero-copy > :nth-child(3) { animation-delay: 120ms; }
.hero-copy > :nth-child(4) { animation-delay: 180ms; }
.hero-copy > :nth-child(5) { animation-delay: 240ms; }
.phone-back { animation-delay: 120ms; }
.phone-front { animation-delay: 200ms; }
.hero-pass { animation: rise var(--rise) var(--ease) 320ms both, float 10s ease-in-out -3s infinite; }
.float-checkin { animation: rise var(--rise) var(--ease) 420ms both, float 8s ease-in-out -1s infinite; }
.float-stat { animation: rise var(--rise) var(--ease) 500ms both, float 9s ease-in-out -6s infinite; }
.float-expiring { animation: rise var(--rise) var(--ease) 580ms both, float 9.5s ease-in-out -4s infinite; }

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

.section { padding-block-start: var(--section-gap); }
.section-head { display: grid; gap: var(--space-4); max-width: 46rem; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head p { color: var(--text-secondary); font-size: var(--text-lede); }

/* Screens strip: the dark band. [data-band="dark"] re-maps the tokens to
   the app's dark theme; on a dark page the band steps up to the raised
   surface so it still stands out from the ground. */
.screens {
  padding-block: clamp(64px, 8vw, 112px) clamp(40px, 5vw, 72px);
  background: var(--bg);
  color: var(--text-primary);
}
.screens .section-head { margin-bottom: clamp(16px, 2vw, 24px); }
@media (prefers-color-scheme: dark) {
  .screens { background: var(--raised); }
  .screens .phone { --bezel: var(--bg); }
}

.strip {
  /* Lines the first phone up with the page column; the snap padding must
     match it or snapping scrolls the strip off that line on load. */
  --strip-inset: max(var(--gutter), (100% - var(--page)) / 2);
  display: flex;
  gap: clamp(18px, 2.6vw, 32px);
  margin: 0;
  padding-block: var(--space-6) 56px;
  padding-inline: var(--strip-inset);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--strip-inset);
  scrollbar-width: thin;
  scrollbar-color: var(--field-border) transparent;
  overscroll-behavior-x: contain;
}
.strip li { flex: none; width: clamp(180px, 19vw, 232px); scroll-snap-align: start; }
.strip li:nth-child(even) { translate: 0 32px; }
.strip .phone { --bezel: var(--raised); box-shadow: 0 0 0 1px var(--field-border), var(--shadow-lift); transition: translate 220ms var(--ease); }
.strip li:hover .phone { translate: 0 -6px; }
.strip-caption { margin-top: var(--space-4); text-align: center; color: var(--text-secondary); font-size: 0.8125rem; font-weight: 600; }
.strip:focus-visible { outline-offset: -2px; }

/* Features: alternating rows; each phone rises out of a brandSoft stage
   that also holds one live app component. */
.feature-list { display: grid; gap: clamp(56px, 8vw, 112px); margin: 0; padding: 0; list-style: none; counter-reset: feature; }
.feature { display: grid; gap: clamp(28px, 5vw, 72px); align-items: center; counter-increment: feature; }

.feature-stage {
  display: grid;
  justify-items: center;
  height: clamp(420px, 44vw, 540px);
  padding-top: clamp(36px, 5vw, 56px);
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(70% 55% at 50% 100%, var(--wash), transparent 75%), var(--brand-soft);
}
.feature-stage .phone { z-index: 2; width: min(54%, 288px); align-self: start; }

/* 01: the member's pass card peeking from behind the phone. */
.feature-pass { position: absolute; z-index: 1; width: min(46%, 250px); inset-inline-end: 3%; top: 26%; rotate: calc(9deg * var(--flip)); }
/* Only its QR side peeks out; the days chip would be cut by the phone. */
.feature-pass .pass-days { display: none; }
/* 02: the check-in pill arrives as the row comes into view. */
.feature-checkin { position: absolute; z-index: 3; inset-inline-start: 6%; bottom: 14%; animation: arrive 700ms var(--ease) 300ms both; }
.feature-checkin .status-pill { min-height: 48px; font-size: 1rem; padding-inline: var(--space-4) 20px; }
/* 03: the overdue banner with its tonal Record button. */
.feature-owes { position: absolute; z-index: 3; inset-inline: 7%; bottom: 12%; }
.feature-owes p { display: grid; flex: 1; gap: 2px; min-width: 0; }
.feature-owes small { font-size: 0.8125rem; font-weight: 600; }
.banner-action {
  flex: none;
  display: grid;
  place-items: center;
  min-height: 36px;
  padding-inline: var(--space-4);
  border-radius: var(--radius-small);
  background: var(--brand-soft);
  color: var(--brand-text);
  font-size: 0.875rem;
}

@supports (animation-timeline: view()) {
  .feature-checkin { animation: arrive linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
}

.feature-text { max-width: 30rem; }
.feature-text::before {
  content: "0" counter(feature);
  display: block;
  margin-bottom: var(--space-3);
  color: var(--brand-text);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
.feature-text h3 { font-size: var(--text-feature); font-weight: 800; line-height: 1.2; letter-spacing: var(--tracking-tight); }
.feature-text p { margin-top: var(--space-4); color: var(--text-secondary); font-size: var(--text-body); }

.extras { display: grid; gap: var(--card-gap); margin: clamp(56px, 8vw, 104px) 0 0; padding: 0; list-style: none; }
.extra {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-5);
}
.extra strong { display: block; font-size: 1rem; line-height: 1.5; margin-bottom: var(--space-1); }
.extra span { color: var(--text-secondary); font-size: 0.9375rem; }

/* For members: the hero-violet band, the colour of the app's pass card,
   with the member's app (dark capture) rising out of its bottom edge. */
.members-band {
  --glow-at: 82% 30%;
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 40px;
  align-items: center;
  overflow: hidden;
  padding: clamp(32px, 6vw, 80px);
  padding-bottom: 0;
  border-radius: var(--radius-stage);
  background: radial-gradient(55% 70% at var(--glow-at), var(--hero-glow), transparent 70%), var(--hero);
  color: var(--on-hero);
}
[dir="rtl"] .members-band { --glow-at: 18% 30%; }
/* Two thin rings behind the phone, the pass card's refresh ring writ large. */
.members-band::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 560px;
  aspect-ratio: 1;
  inset-inline-end: -120px;
  top: -80px;
  border-radius: 50%;
  border: 1.5px solid var(--hero-ring);
  outline: 1.5px solid var(--hero-ring);
  outline-offset: 72px;
}
.members-text { display: grid; gap: var(--space-4); justify-items: start; padding-bottom: clamp(32px, 5vw, 80px); }
.members-text h2 { font-size: var(--text-section); }
.members-text p:not(.kicker) { color: var(--on-hero-muted); font-size: var(--text-lede); max-width: 32rem; }
.members-text .store { margin-top: var(--space-3); }
.kicker-on-hero { background: var(--hero-chip-bg); color: var(--hero-chip-fg); }
/* The phone hangs from the top of its column and the band cuts it off:
   the top of the app shows, its empty lower screen does not. */
.members-media { position: relative; align-self: stretch; min-height: clamp(340px, 80vw, 420px); }
.members-media .phone { position: absolute; top: clamp(8px, 3vw, 32px); inset-inline: 0; width: min(76%, 340px); margin-inline: auto; rotate: calc(-7deg * var(--flip)); }

/* How it works: three cards with big numerals, joined on wide screens by
   a dashed line that shows only in the gaps between them. */
.steps { position: relative; display: grid; gap: var(--card-gap); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.step {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-5) var(--space-5) var(--space-6);
  counter-increment: step;
}
.step::before {
  content: counter(step);
  margin-bottom: var(--space-3);
  color: var(--brand-text);
  font-size: var(--text-numeral);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: 1.1875rem; }
.step p { color: var(--text-secondary); font-size: 0.9375rem; }

/* Plans: Free is a card with a divider edge, Pro is the hero fill. */
.plans { display: grid; gap: var(--card-gap); align-items: stretch; }
.plan { position: relative; overflow: hidden; padding: clamp(28px, 4vw, 44px); border-radius: var(--radius-card); }
.plan-free { box-shadow: var(--shadow-card), inset 0 0 0 1px var(--divider); }
.plan h3 { font-size: var(--text-section); font-weight: 800; letter-spacing: var(--tracking-tight); }
.plan-lede { margin-top: var(--space-2); color: var(--text-secondary); }
.plan ul { display: grid; gap: var(--space-3); margin: var(--space-5) 0 0; padding: var(--space-5) 0 0; list-style: none; border-top: 1px solid var(--divider); }
.plan li { display: grid; grid-template-columns: 22px 1fr; gap: var(--space-3); }
.plan li::before {
  content: "";
  width: 22px;
  height: 22px;
  margin-top: 0.15em;
  border-radius: 50%;
  background: var(--success-soft) var(--tick) center / 16px no-repeat;
}
.plan-pro {
  background: radial-gradient(60% 70% at 100% 0%, var(--hero-glow), transparent 70%), var(--hero);
  color: var(--on-hero);
  box-shadow: var(--shadow-lift);
}
[dir="rtl"] .plan-pro { background: radial-gradient(60% 70% at 0% 0%, var(--hero-glow), transparent 70%), var(--hero); }
.plan-pro .plan-lede { color: var(--on-hero-muted); }
.plan-pro ul { border-top-color: var(--hero-rule); }
.plan-pro li::before {
  background: var(--hero-chip-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%233A2DA3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.plan-badge {
  position: absolute;
  top: clamp(28px, 4vw, 44px);
  inset-inline-end: clamp(28px, 4vw, 44px);
  display: grid;
  place-items: center;
  min-height: var(--pill-height);
  padding-inline: var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--hero-chip-bg);
  color: var(--hero-chip-fg);
  font-size: 0.8125rem;
  font-weight: 700;
}

/* About and data use: card rows Google's reviewers read, each led by an
   icon well. */
.trust-grid { display: grid; gap: var(--card-gap); }
.panel { display: grid; gap: var(--space-4); align-content: start; padding: clamp(24px, 4vw, 36px); }
.panel-head { display: flex; align-items: center; gap: var(--space-4); }
.panel h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: 0; line-height: 1.35; }
.panel p { color: var(--text-secondary); }
.panel-links { color: var(--text-primary); }
.panel-links a { font-weight: 700; }

/* FAQ: AppCardList — one card, rows of 64+ split by inset dividers, a
   chevron that turns when a row opens. */
.faq-grid { display: grid; gap: var(--space-5); }
.faq-list { padding-inline: var(--space-5); }
.faq-list details + details { border-top: 1px solid var(--divider); }
.faq-list summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--row-min);
  padding-block: var(--space-4);
  cursor: pointer;
  list-style: none;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-inline-end: var(--space-2);
  border-inline-end: 2px solid var(--brand-text);
  border-block-end: 2px solid var(--brand-text);
  rotate: 45deg;
  translate: 0 -2px;
  transition: rotate 220ms var(--ease), translate 220ms var(--ease);
}
.faq-list details[open] summary::after { rotate: 225deg; translate: 0 2px; }
.faq-list summary:hover { color: var(--brand-text); }
.faq-list details p { padding-bottom: var(--space-5); max-width: 60ch; color: var(--text-secondary); font-size: 0.9375rem; }

/* Closing call to action: a brandSoft band. */
.closing { padding-block-end: var(--section-gap); }
.closing-band {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 64px);
  border-radius: var(--radius-stage);
  background: radial-gradient(50% 60% at 50% 0%, var(--wash), transparent 75%), var(--brand-soft);
  text-align: center;
}
.closing-icon { width: 88px; height: 88px; border-radius: var(--radius-card); box-shadow: var(--shadow-lift); }
.closing h2 { font-size: clamp(36px, 5vw, 60px); max-width: 14ch; }
.closing .stores { justify-content: center; }
.closing .hero-note { margin-top: 0; justify-content: center; }

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

.site-footer { padding-block: 40px; border-top: 1px solid var(--divider); background: var(--card); color: var(--text-secondary); font-size: 0.9375rem; }
.footer-grid { display: grid; gap: 20px; align-items: center; }
.footer-brand { display: flex; align-items: center; gap: 10px; color: var(--text-primary); }
.footer-brand img { width: 28px; height: 28px; border-radius: var(--space-2); }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-5); margin: 0; padding: 0; list-style: none; }
.footer-links a:not(.lang-switch) { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-primary); text-decoration: none; font-weight: 700; }
.footer-links a:not(.lang-switch):hover { text-decoration: underline; }

/* ---------- Wider screens ---------- */

@media (min-width: 700px) {
  .extras { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .steps::before {
    content: "";
    position: absolute;
    inset-inline: 8%;
    top: calc(var(--space-5) + var(--text-numeral) / 2);
    border-top: 2px dashed var(--chart-bar);
  }
  .plans { grid-template-columns: 1fr 1fr; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .members-band { grid-template-columns: 1.1fr 1fr; }
  .feature { grid-template-columns: 1.05fr 1fr; }
  .feature:nth-child(even) .feature-stage { order: 2; }
  .footer-grid { grid-template-columns: auto 1fr; }
  .footer-links { justify-content: flex-end; }
}

@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1fr 1.05fr; }
  .faq-grid { grid-template-columns: 1fr 1.7fr; gap: 72px; }
  .faq-grid .section-head { position: sticky; top: 100px; align-self: start; }
}

@media (min-width: 1100px) {
  .extras { grid-template-columns: repeat(4, 1fr); }
}

/* Phones: the section links give way to the language switch. */
@media (max-width: 759px) {
  .site-nav { display: none; }
  .header-bar .lang-switch { margin-inline-start: auto; }
}

/* Below the two-column hero the floating layers stay inside the stage, so
   the 16px gutter is never crossed. */
@media (max-width: 959px) {
  .hero-pass { inset-inline-start: 2%; }
  .float-checkin { inset-inline-start: 2%; }
  .float-stat, .float-expiring { inset-inline-end: 2%; }
}

@media (max-width: 520px) {
  .stores { flex-direction: column; justify-self: stretch; }
  .store { width: 100%; }
  .members-text .store { width: 100%; }
  .members-text { justify-items: stretch; }
  .members-text .kicker { justify-self: start; }
  .phone { --phone-bezel: 7px; --phone-radius: 26px; }
  .pass-card { gap: 8px; padding: 12px; border-radius: 18px; }
  .pass-plan { font-size: 0.9375rem; }
  .pass-gym { font-size: 0.625rem; }
  .pass-days { min-height: 22px; font-size: 0.6875rem; }
  .pass-ring { width: 18px; height: 18px; padding: 2px; }
  .status-pill { min-height: 32px; font-size: 0.75rem; padding-inline: 10px 12px; gap: 6px; }
  .status-dot { width: 8px; height: 8px; }
  .banner { padding: var(--space-2) var(--space-3); font-size: 0.75rem; gap: var(--space-2); border-radius: var(--radius-small); }
  .banner-icon { width: 18px; height: 18px; }
  .stat-card { padding: var(--space-2) var(--space-3); border-radius: var(--radius-small); }
  .stat-card strong { font-size: 1.0625rem; }
  .stat-card span { font-size: 0.6875rem; }
  .feature-checkin .status-pill { min-height: 40px; font-size: 0.875rem; }
  .feature-owes { inset-inline: 4%; }
  .feature-owes .banner-icon { display: none; }
  .banner-action { min-height: 32px; padding-inline: var(--space-3); font-size: 0.8125rem; }
}

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