/* Cache-buster 2026-09-09: the previous filenames for this file, site.js and
   legal.css were requested at the edge in the window between the HTML being
   deployed and the files themselves landing. Pages answered those requests with
   200 + the fallback HTML page, and the /assets/* rule in _headers stamped that
   answer immutable for a year, so the CDN kept serving an HTML page under a .css
   URL. Changing the bytes changes the content hash, so the markup now points at
   URLs that were never poisoned. See the /assets/ guard in functions/_middleware.js,
   which stops this from being possible again. */
/* ============================================================================
   SyzUp landing — base reset + design tokens
   v2: WCAG sweep, hero rebuild, features grid, FAQ, reviews, final CTA
   ========================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

:root {
  /* surfaces */
  --bg: #FFFFFF;
  --bg-cream: #F4F1EA;
  --bg-dark: #0A0A0A;
  --bg-dark-2: #141414;
  --bg-phone: #13110E;
  --surface-1: #F5F5F4;

  /* ink */
  --ink: #0A0A0A;
  --ink-soft: #2C2620;          /* ~12.5:1 on white */
  --ink-muted: #555;            /* ~7.5:1 on white */
  /* Warm, not neutral, since the 2026-09-18 redesign — the same off-white and
     greys the dark hero uses, so every dark section reads as one palette. */
  --ink-on-dark: #F4EFE7;       /* 17.3:1 on #0A0A0A */
  --ink-on-dark-soft: #BDB6AC;  /* 9.9:1 on #0A0A0A, 9.2:1 on #141414 */
  --ink-on-dark-faint: #8F887E; /* 5.7:1 on #0A0A0A, 5.3:1 on #141414 — AA */

  /* Primary CTA = the app's own CTA, stop for stop and in the same direction
     (AppColors.ctaGradient: #D13A12 → #B32E10 → #8F2408, left to right), so
     the button on the page matches the "Start workout" button in the
     screenshot next to it. White text: 4.86:1 on the lightest stop, 6.3:1 and
     8.7:1 on the others (white on --orange would be 3.0:1). Hover goes
     darker, never lighter, so the text never loses contrast. */
  --cta-grad: linear-gradient(90deg, #D13A12 0%, #B32E10 50%, #8F2408 100%);
  --cta-grad-hover: linear-gradient(90deg, #C0340F 0%, #A42A0E 50%, #822007 100%);
  --radius-btn: 10px;

  /* lines */
  --line: #E5E5E5;
  --line-strong: #CCCCCC;
  --line-dark: #2A2418;
  --line-dark-strong: #5A3A1E;

  /* brand orange */
  --orange: #FF5A1F;
  --orange-hover: #FF6B35;
  --orange-deep: #C24400;       /* ~5.8:1 on white — AA-safe small text */
  --orange-tint: rgba(255, 90, 31, 0.05);
  --orange-bg: rgba(255, 90, 31, 0.10);
  --orange-glow: rgba(255, 90, 31, 0.18);

  /* layout */
  --max: 1100px;
  --pad-x: clamp(20px, 4vw, 36px);
  --pad-y: clamp(64px, 9vw, 112px);

  /* focus (width + style + color only — outline-offset varies per component) */
  --focus: 3px solid var(--orange);

  /* elevation — 3 shared shadow tokens instead of a bespoke rgba/blur/spread
     combination per floating surface */
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.08);   /* dropdowns, small popovers */
  --shadow-md: 0 12px 32px -8px rgba(0, 0, 0, 0.4);   /* small floating cards */
  --shadow-lg: 0 30px 80px -20px rgba(0, 0, 0, 0.35), 0 8px 20px -10px rgba(0, 0, 0, 0.2);   /* large floating device */

  /* type scale — display headings share 2 fluid steps instead of a bespoke
     clamp() per section; body/label text shares a small numeric scale.
     (.hero__title's base size and @480px override stay literal: the hero
     headline gets its own taller scale on purpose, not drift, so neither
     is folded in here.) */
  --display-lg: clamp(36px, 5.5vw, 64px);   /* hero, final CTA, big stat numerals */
  --display-md: clamp(32px, 4.6vw, 52px);   /* every other section H2 */
  --text-xs: 13px;    /* eyebrow labels */
  --text-sm: 14px;    /* small UI text, notes, secondary labels */
  --text-base: 16px;  /* body copy */
  --text-md: 17px;    /* larger subtitles */
  --text-lg: 20px;    /* prominent standalone numerals/labels */
}

html {
  /* Declaring the scheme is what opts this page OUT of Chrome-on-Android's
     "Auto dark theme for web contents", which otherwise algorithmically
     inverts the cream manifesto, the orange system and the light/dark section
     rhythm with no designer in the loop. The product is Android-first, so that
     is the majority case, not an edge one. It also makes UA surfaces
     (scrollbars, form controls) agree with the design instead of guessing.
     The template's theme-color meta is a single unconditional #FFFFFF to
     match — no prefers-color-scheme:dark variant, since there's no dark
     palette here for it to promise. */
  color-scheme: light;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;  /* prevent iOS auto-zoom on text */
  text-size-adjust: 100%;
  overflow-x: hidden;  /* fallback: Safari < 16 ignores `clip` */
  overflow-x: clip;
  scroll-padding-top: 80px;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  /* No overflow-x here on purpose: html already clips horizontally (above),
     and repeating it on body creates a second scroll/clip container — a
     combination with documented Chromium bugs around scrollIntoView() and
     anchor-fragment navigation. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

img, svg { display: block; max-width: 100%; }

/* ============================================================================
   A11y — skip link + focus
   ========================================================================= */

.skip-link {
  position: absolute;
  top: -100px;
  inset-inline-start: 16px;
  background: var(--ink);
  color: var(--ink-on-dark);
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  z-index: 1000;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 12px;
  outline: var(--focus);
  outline-offset: 2px;
}

/* visible focus styles (replaces default) */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Present to screen readers, removed from visual layout without display:none
   (which would also drop it from the accessibility tree). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   Eyebrow + accent
   ========================================================================= */

.eyebrow {
  font-size: 13px;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--ink);
  text-transform: uppercase;
  margin-bottom: 28px;
}

/* on dark sections — bright orange has 7:1 contrast on #0A0A0A */
.moment--dark .eyebrow--orange,
.pricing .eyebrow--orange { color: var(--orange); }

/* on light sections — use deeper orange for small text contrast */
.eyebrow--orange { color: var(--orange-deep); }

.eyebrow--ink { color: var(--ink); }

.accent { color: var(--orange); }

/* ============================================================================
   Buttons
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 14px 22px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  border: 0;
  /* Rounded since 2026-09-18, like the app's own CTA in every screenshot on
     this page — the square poster buttons were the odd ones out next to it. */
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  font-family: inherit;
  text-decoration: none;
}

.btn--lg {
  padding: 16px 28px;
  font-size: 15px;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--dark {
  background: var(--bg-dark);
  color: var(--ink-on-dark);
}
.btn--dark:hover { background: #1A1A1A; }

.btn--orange {
  background: var(--cta-grad);
  color: #FFFFFF;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 10px 30px -12px rgba(179, 46, 16, 0.65);
}
.btn--orange:hover { background: var(--cta-grad-hover); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--ink-on-dark); }

.btn--outline-light {
  background: rgba(244, 239, 231, 0.03);
  color: var(--ink-on-dark);
  border: 1px solid rgba(244, 239, 231, 0.24);
}
.btn--outline-light:hover {
  background: rgba(244, 239, 231, 0.08);
  border-color: rgba(244, 239, 231, 0.5);
}

.btn svg { flex-shrink: 0; }

/* ============================================================================
   NAV
   ========================================================================= */

.nav {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  z-index: 100;
  /* iPhone: notch / Dynamic Island (landscape + standalone "Add to Home Screen") */
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* toggled by site.js past ~40px scrollY — reinforces the sticky nav as an
   active, present element instead of static chrome */
.nav--scrolled {
  border-bottom-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}

.nav__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px var(--pad-x);
  transition: padding 0.2s ease;
  /* Sections carry --pad-x on the outer element, outside their max-width box,
     so past 1100 + 2 * --pad-x the padding stops counting and the content
     edge is the max-width edge. The padding here sits inside the box, so it
     kept eating --pad-x at every width and the logo sat that much further in
     than every heading below it. Widening the box by the padding puts the
     content edge back on --max. Padding stays put, so the safe-area insets on
     .nav still work, and below the breakpoint nothing moves. */
  max-width: calc(var(--max) + 2 * var(--pad-x));
  margin: 0 auto;
  gap: 24px;
}

.nav--scrolled .nav__inner {
  padding-top: 11px;
  padding-bottom: 11px;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
  flex-shrink: 0;
}

.nav__links {
  display: flex;
  gap: 28px;
  font-size: 14px;
  font-weight: 500;
  margin-inline-start: auto;
  margin-inline-end: 24px;
}

.nav__links a {
  position: relative;
  color: var(--ink-soft);
  padding: 8px 0;
  transition: color 0.15s ease;
}

.nav__links a::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.nav__links a:hover,
.nav__links a:focus-visible { color: var(--orange-deep); }

.nav__links a:hover::after,
.nav__links a:focus-visible::after { transform: scaleX(1); }

/* "The myth" — story link, subtly distinguished */
.nav__links a.nav__myth {
  color: var(--orange-deep);
  font-style: italic;
}
.nav__links a.nav__myth:hover,
.nav__links a.nav__myth:focus-visible { color: var(--orange); }

.nav__cta {
  padding: 10px 18px;
  font-size: 14px;
  flex-shrink: 0;
}

/* language switcher */
.nav__lang {
  position: relative;
  flex-shrink: 0;
  margin-inline-start: 4px;
}

/* The language switcher (button + dropdown) is the one deliberately soft
   corner in an otherwise sharp-cornered (radius 0) brand system: it's a
   floating, transient UI control — closer to OS chrome than to a brand
   surface — so it borrows conventional rounded-dropdown language instead
   of the poster-flat system used for buttons, cards and tags. */
.nav__lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 7px 10px 7px 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.nav__lang-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.nav__lang-btn:focus-visible {
  border-color: var(--ink);
  color: var(--ink);
  /* no `outline: none` — the global 3px orange outline is the only cue that
     clears WCAG 1.4.11; a 1px border colour change does not. */
}

.nav__lang-chev {
  transition: transform 0.18s ease;
}
.nav__lang-btn[aria-expanded="true"] .nav__lang-chev {
  transform: rotate(180deg);
}

.nav__lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  min-width: 168px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  list-style: none;
  margin: 0;
  padding: 6px;
  z-index: 100;
  /* 9 languages — don't overflow short viewports (landscape phones) */
  max-height: min(70vh, 420px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.nav__lang-menu--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}

.nav__lang-menu li { margin: 0; }

.nav__lang-menu a {
  display: block;
  padding: 11px 12px;  /* ~44px tap target with 14px text */
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.12s ease;
}
.nav__lang-menu a:hover {
  background: var(--surface-1);
}
/* Keyboard focus needs the global outline. `outline: none` here won this
   selector on specificity and left a 1.09:1 background tint as the only
   focus cue across a 12-item menu. Inset, because the menu scrolls. */
.nav__lang-menu a:focus-visible {
  background: var(--surface-1);
  outline: var(--focus);
  outline-offset: -3px;
}

/* hamburger */
.nav__toggle {
  display: none;
  background: transparent;
  border: 0;
  width: 44px;
  height: 44px;
  cursor: pointer;
  padding: 0;
  position: relative;
  margin-inline-start: auto;
}

.nav__toggle-bar {
  display: block;
  position: absolute;
  inset-inline-start: 10px;
  inset-inline-end: 10px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}
.nav__toggle-bar:nth-child(1) { top: 15px; }
.nav__toggle-bar:nth-child(2) { top: 21px; }
.nav__toggle-bar:nth-child(3) { top: 27px; }

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) {
  top: 21px; transform: rotate(45deg);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) {
  top: 21px; transform: rotate(-45deg);
}

/* mobile-only CTA inside hamburger menu */
.nav__mobile-cta { display: none; }

@media (max-width: 880px) {
  .nav__toggle { display: block; }
  .nav__cta { display: none; }

  /* lang switcher zostaje widoczny, ale kompaktowy — min. 44px tap target */
  .nav__lang-btn {
    padding: 7px 8px 7px 10px;
    font-size: 12px;
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
  }
  .nav__lang-menu {
    /* na mobile: dropdown w lewo zeby nie wychodzil za ekran */
    inset-inline-end: 0;
    inset-inline-start: auto;
  }

  .nav__links {
    display: flex;
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    inset-inline-end: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px var(--pad-x) 24px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    margin: 0;
    /* Landscape phones and 200 % zoom: the panel is taller than what is left
       of the viewport and the bar is fixed, so without its own scroll the
       last entries (pricing, FAQ, the CTA) could not be reached at all. */
    max-height: calc(100vh - 78px);
    max-height: calc(100dvh - 78px);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .nav__links--open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
  }
  .nav__links a {
    padding: 16px 0;
    font-size: 16px;
    border-bottom: 1px solid var(--line);
  }
  .nav__links a:last-child { border-bottom: 0; }

  /* CTA at bottom of mobile menu */
  .nav__mobile-cta {
    display: block;
    margin-top: 16px;
    padding: 14px 22px !important;
    background: var(--cta-grad);
    color: #FFFFFF !important;
    border-radius: var(--radius-btn);
    font-weight: 600;
    text-align: center;
    border-bottom: 0 !important;
    font-size: 15px !important;
    letter-spacing: 0.01em;
  }
  .nav__mobile-cta:hover,
  .nav__mobile-cta:focus-visible {
    background: var(--cta-grad-hover);
    color: #FFFFFF !important;
  }
}

/* ============================================================================
   NAV on the landing page (2026-09-18) — transparent on the hero, dark glass
   everywhere below it (the landing is dark top to bottom). Two states:
     .nav                         absolutely positioned ON the hero, fully
                                  transparent. The no-JS state: it scrolls
                                  away with the hero.
     .nav--pinned.nav--scrolled   fixed (site.js) with content under it: dark
                                  glass, so it reads over the light myth too.
   Legal pages keep the plain white sticky bar above; `.landing` is on <body>
   in template.html only, and build.js gives the landing the light wordmark.
   ========================================================================= */

.landing {
  /* 44 px tallest child (CTA min-height / hamburger) + 2 × 16 px padding + the
     1 px border. The hero reserves exactly this much above its content. */
  --nav-h: calc(77px + env(safe-area-inset-top, 0px));
  /* The page is dark end to end, so the canvas is too: `body` itself shows
     under the footer (the 76 px reserved for the sticky bar) and in iOS
     overscroll, and it was still the legal pages' white. */
  background: var(--bg-dark);
}

.landing .nav {
  position: absolute;
  inset-inline: 0;
  top: 0;
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow: none;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.landing .nav--pinned { position: fixed; }
.landing .nav--pinned.nav--scrolled {
  background: rgba(10, 10, 10, 0.74);
  border-bottom-color: rgba(244, 239, 231, 0.08);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
          backdrop-filter: saturate(160%) blur(14px);
  box-shadow: none;
}

.landing .nav__links a { color: rgba(244, 239, 231, 0.8); }
.landing .nav__links a:hover,
.landing .nav__links a:focus-visible { color: #F4EFE7; }
.landing .nav__links a.nav__myth { color: var(--orange); font-style: normal; }

.landing .nav__lang-btn {
  color: #F4EFE7;
  border-color: rgba(244, 239, 231, 0.28);
  border-radius: 999px;
  padding-inline: 14px 12px;
}
.landing .nav__lang-btn:hover,
.landing .nav__lang-btn:focus-visible {
  color: #FFFFFF;
  border-color: rgba(244, 239, 231, 0.6);
}

/* Same burnt orange as the hero CTA (see --cta-grad). */
.landing .nav__cta {
  background: var(--cta-grad);
  color: #FFFFFF;
  border-radius: 999px;
  padding-inline: 20px;
}
.landing .nav__cta:hover { background: var(--cta-grad-hover); }

.landing .nav__toggle-bar { background: #F4EFE7; }

@media (max-width: 880px) {
  .landing .nav__links {
    background: #0A0A0A;
    border-bottom-color: rgba(244, 239, 231, 0.1);
  }
  .landing .nav__links a { border-bottom-color: rgba(244, 239, 231, 0.08); }
}

/* ============================================================================
   HERO — dark, cinematic, product-first (redesign 2026-09-18)
   The user's mockup set the layout: dark hero on the Sisyphus plate, copy on
   the left, the app on the right. What it also had, and this deliberately
   does not: a generated phone with garbled text, gradient-filled type and a
   decorative glowing arc. The phone is the real screenshot in a built frame,
   the accent line is one flat brand colour, and the only light in the scene
   is the sunset in the photograph.
   ========================================================================= */

.hero {
  --hero-ink: #F4EFE7;          /* warm off-white — ~17:1 on #0A0A0A */
  --hero-ink-soft: #BDB6AC;     /* ~9:1 */
  --hero-ink-faint: #8F887E;    /* ~5.2:1 — labels only */
  --hero-line: rgba(244, 239, 231, 0.12);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg-dark);
  color: var(--hero-ink);
  padding: calc(var(--nav-h, 0px) + clamp(40px, 6vw, 88px)) var(--pad-x) clamp(48px, 6vw, 88px);
}

/* The plate is anchored by its RIGHT edge and pushed a further 20 % of its own
   width past it, so the figure (63–84 % across the image) lands at the far
   right beside the phone instead of behind it; the sun is sacrificed. The
   left edge is masked out, so on wide screens where the image does not reach
   the left side there is no seam. */
.hero__art {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
.hero__art img {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  max-width: none;
  transform: translateX(20%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28%);
          mask-image: linear-gradient(90deg, transparent 0, #000 28%);
}

/* Narrower desktops: the phone column sits further right relative to the
   plate, so push the plate further too or the phone covers the figure's head
   (measured at 1280 px: 81 px of overlap at 20 %). */
@media (min-width: 881px) and (max-width: 1360px) {
  .hero__art img { transform: translateX(26%); }
}

/* Grade: near-black under the copy, open over the art, a floor so the next
   section does not start on a bright rock. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, #0A0A0A 0%, rgba(10, 10, 10, 0.92) 34%, rgba(10, 10, 10, 0.45) 56%, rgba(10, 10, 10, 0) 76%),
    linear-gradient(0deg, rgba(10, 10, 10, 0.85) 0%, rgba(10, 10, 10, 0) 26%),
    linear-gradient(180deg, rgba(10, 10, 10, 0.6) 0%, rgba(10, 10, 10, 0) 16%);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
}

.hero .eyebrow {
  margin-bottom: 0;
  color: var(--hero-ink-faint);
  letter-spacing: 0.26em;
  font-weight: 500;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.5vw, 20px);
}

.hero__title {
  /* Literal, not --display-lg: the hero headline is the one place this site
     wants "typography as hero image" — a taller ceiling than the H2/stat
     scale shares. See the --display-lg comment above for why this diverges. */
  font-size: clamp(40px, 6vw, 92px);
  line-height: 0.92;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--hero-ink);
  overflow-wrap: break-word;
  hyphens: none;
}
.hero__title .accent { color: var(--orange); }

/* PL/PT/FR: the third headline line ("Mimo wszystko." / "Mesmo assim." /
   "Quand même.") is long enough that the 92px ceiling above wraps it
   mid-phrase in the hero column at desktop widths — verified against all
   16 locales, only these three break. Cap them back at the shared
   --display-lg scale instead of lowering the ceiling for everyone.
   :where() keeps this at the same specificity as .hero__title itself, so
   the @480px mobile override further down (same specificity, later in the
   cascade) still wins on small screens for these locales too. */
:where(html[lang="pl"], html[lang="pt"], html[lang="fr"]) .hero__title {
  font-size: var(--display-lg);
}

.hero__sub {
  font-size: clamp(16px, 1.3vw, 18px);
  color: var(--hero-ink-soft);
  line-height: 1.6;
  max-width: 540px;
  font-weight: 400;
}

.hero__sub strong { font-weight: 600; color: var(--hero-ink); }

.hero__cta {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 6px;
}

.btn--glass {
  background: rgba(244, 239, 231, 0.04);
  color: var(--hero-ink);
  border: 1px solid rgba(244, 239, 231, 0.28);
  border-radius: 10px;
}
.btn--glass:hover {
  background: rgba(244, 239, 231, 0.09);
  border-color: rgba(244, 239, 231, 0.5);
}

.hero__proof {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 4px;
  list-style: none;
  padding: 0;
}

.hero__proof-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--hero-ink-soft);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* --orange is 6.9:1 on the dark hero — no need for --orange-deep here. */
.hero__proof-icon {
  color: var(--orange);
  flex-shrink: 0;
}

/* Three pillars under a hairline: icon above a two-line label, separated by
   hairlines — no boxes, no glow. */
.hero__pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(18px, 2.4vw, 32px);
  padding-top: clamp(18px, 2vw, 26px);
  border-top: 1px solid var(--hero-line);
  list-style: none;
  max-width: 540px;
}

.hero__pillar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-inline: 18px;
  font-size: var(--text-sm);
  line-height: 1.35;
  color: var(--hero-ink-soft);
  font-weight: 500;
  /* One long word per label ("Spersonalizowane", "Персональные") in an
     ~80 px column on a 360 px phone: let it hyphenate, and break anywhere
     before it runs into the neighbour or out of the page. */
  min-width: 0;
  -webkit-hyphens: auto;
          hyphens: auto;
  overflow-wrap: anywhere;
}
.hero__pillar:first-child { padding-inline-start: 0; }
.hero__pillar + .hero__pillar { border-inline-start: 1px solid var(--hero-line); }
.hero__pillar svg { color: var(--orange); }

/* hero phone — visual right column. Start-aligned, not centred: the phone
   sits closer to the copy and leaves the far right to the figure. */
.hero__visual {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-height: 380px;
}

/* 320 px and STILL (2026-09-18). At 240 px the app screen sat at ~0.56x
   and its 11 px text came out around 6 px; the heroFloat animation then
   moved it by fractions of a pixel every frame, so the browser resampled
   the bitmap continuously and the screenshot read as blurred.
   `.phone.hero__phone`, not `.hero__phone`: the generic `.phone` rule sits
   further down with the same specificity and won — the hero phone was
   240 px on every screen, and the old 190 px phone rule never applied.

   The frame: a black bezel inside a thin graphite rim, the rim lit a little
   warmer on the right where the sunset is, and a long soft shadow. */
.phone.hero__phone {
  width: 320px;
  position: relative;
  padding: 11px;
  border-radius: 52px;
  background: #050505;
  box-shadow:
    0 0 0 1.5px #2B2724,
    0 0 0 3px #0E0D0C,
    3px 0 0 3px rgba(255, 138, 76, 0.22),
    0 40px 90px -20px rgba(0, 0, 0, 0.85),
    0 18px 36px -18px rgba(0, 0, 0, 0.7);
}
.phone.hero__phone .phone__shot { border-radius: 41px; }

.phone__screen { position: relative; }

/* The simulator capture has the status bar but no Dynamic Island. iPhone 17:
   island 126 × 37 pt, 11 pt from the top of a 402 × 874 pt screen. */
.phone__island {
  position: absolute;
  top: 1.26%;
  left: 50%;
  width: 31.3%;
  height: 4.23%;
  transform: translateX(-50%);
  background: #000;
  border-radius: 999px;
}

/* ============================================================================
   Scroll reveal — content below the hero fades + lifts in as it enters view.
   .is-visible is added by an IntersectionObserver in site.js; elements stay
   fully visible with no JS or without IntersectionObserver support.
   ========================================================================= */

/* The resting state of every .reveal element is VISIBLE. Hiding is scoped to
   `html.js-reveal`, a class site.js sets at the moment it is about to start the
   IntersectionObserver — so JavaScript that is off, blocked, or simply never
   arrives leaves the content on the page instead of erasing it. This rule used to
   be unconditional, which meant a single failed script request turned the site
   into a hero above 25 invisible elements: the feature grid, both story sections,
   the manifesto, the numbers, all three pricing cards, the FAQ heading and the
   final CTA. Nothing flashes, because the first .reveal sits below the fold at
   every breakpoint. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* grid items reveal with a light stagger instead of all at once */
.features__grid .reveal:nth-child(2) { transition-delay: 0.08s; }
.features__grid .reveal:nth-child(3) { transition-delay: 0.16s; }
.features__grid .reveal:nth-child(4) { transition-delay: 0.24s; }
.features__grid .reveal:nth-child(5) { transition-delay: 0.32s; }
.features__grid .reveal:nth-child(6) { transition-delay: 0.4s; }

.ministats .reveal:nth-child(2) { transition-delay: 0.1s; }
.ministats .reveal:nth-child(3) { transition-delay: 0.2s; }

.numbers__inner .reveal:nth-child(2) { transition-delay: 0.1s; }
.numbers__inner .reveal:nth-child(3) { transition-delay: 0.2s; }

.pricing__grid .reveal:nth-child(2) { transition-delay: 0.12s; }
.pricing__grid .reveal:nth-child(3) { transition-delay: 0.24s; }

.moment__visual.reveal { transition-delay: 0.1s; }
.manifesto__body.reveal { transition-delay: 0.1s; }

@media (max-width: 880px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero__visual {
    min-height: auto;
    justify-content: center;
  }

  /* Phones and small tablets: the tight crop (boulder + figure) becomes a
     banner across the top and the copy starts on its darkened lower half.
     Beside a 260 px phone on a 375 px screen there is no room for the figure,
     and under the headline it would fight the text. */
  .hero {
    --hero-banner: min(88vw, 520px);
    padding-top: calc(var(--nav-h, 0px) + var(--hero-banner) * 0.5);
  }
  .hero__art { bottom: auto; height: calc(var(--nav-h, 0px) + var(--hero-banner)); }
  .hero__art img {
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 55% 35%;
    transform: none;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  }
  .hero::after {
    bottom: auto;
    height: calc(var(--nav-h, 0px) + var(--hero-banner));
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.45) 0%, rgba(10, 10, 10, 0.1) 28%, rgba(10, 10, 10, 0.72) 62%, #0A0A0A 96%);
  }
  .hero__pillars { max-width: none; }
}

/* Below the fold in the first screen is where most visitors are (Android,
   phone-sized viewports) — tighten the copy stack so a meaningful part of the
   product screenshot is visible without scrolling. */
@media (max-width: 600px) {
  .hero__copy {
    gap: 10px;
  }
  .hero__cta {
    margin-top: 4px;
  }
  .hero__proof {
    margin-top: 4px;
    gap: 12px 18px;
  }
  .hero__pillar { padding-inline: 12px; font-size: 13px; }
  .phone.hero__phone { width: 260px; padding: 9px; border-radius: 42px; }
  .phone.hero__phone .phone__shot { border-radius: 33px; }
}

@media (max-width: 480px) {
  .hero__title {
    font-size: clamp(44px, 13vw, 72px);
    letter-spacing: -0.04em;
  }
  .hero__cta .btn { flex: 1 1 auto; min-width: 0; }
  .hero__cta .btn--glass { flex: 0 1 auto; }

  /* long localized labels (DE/RU/NL) must wrap instead of overflowing cards */
  .btn {
    white-space: normal;
    line-height: 1.3;
    text-align: center;
  }
}

/* ============================================================================
   FEATURES GRID
   ========================================================================= */

.features {
  padding: var(--pad-y) var(--pad-x);
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.features__inner {
  max-width: var(--max);
  margin: 0 auto;
}

.features__head {
  margin-bottom: clamp(40px, 5vw, 64px);
  /* 780, not 720: at --display-md's 52px ceiling, PL ("Wszystko, czego
     potrzebujesz.") and TR ("Bir halterci için gereken her şey.") need
     ~745-750px to stay on one line before the intentional <br/> — checked
     against all 16 locales, these two are the tightest. */
  max-width: 780px;
}

.features__title {
  font-size: var(--display-md);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--ink);
}

/* Hairline rows instead of a boxed grid (2026-09-18): each item starts on a
   thin rule, the icon is bare orange line work, and nothing moves on hover —
   these are not links. The tinted icon squares and the hover zoom were the
   stock "features grid" look the redesign moves away from. */
.features__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(32px, 4vw, 56px);
  list-style: none;
}

.feature {
  padding: 28px 0 44px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feature__icon {
  color: var(--orange-deep);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 8px;
}

.feature__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.feature__body {
  font-size: var(--text-base);
  color: var(--ink-muted);
  line-height: 1.65;
}

@media (max-width: 880px) {
  .features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .features__grid { grid-template-columns: 1fr; }
  .feature { padding: 24px 0 32px; }
}

/* ============================================================================
   PRODUCT MOMENT (alternating dark/light, copy + phone)
   ========================================================================= */

.moment {
  padding: var(--pad-y) var(--pad-x);
}

.moment--dark {
  background: var(--bg-dark);
  color: var(--ink-on-dark);
}

.moment--light {
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.moment__inner {
  display: grid;
  grid-template-columns: minmax(0, 500px) 320px;
  grid-template-areas: "copy visual";
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  justify-content: center;
  max-width: var(--max);
  margin: 0 auto;
}

.moment--reverse .moment__inner {
  grid-template-columns: 320px minmax(0, 500px);
  grid-template-areas: "visual copy";
}

.moment__copy { grid-area: copy; min-width: 0; }
.moment__visual { grid-area: visual; min-width: 0; display: flex; justify-content: center; }

.moment__title {
  font-size: var(--display-md);
  line-height: 1.0;
  font-weight: 700;
  letter-spacing: -0.035em;
  margin-bottom: 24px;
  overflow-wrap: break-word;
  hyphens: none;
}

.moment__body {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 28px;
  max-width: 480px;
}

.moment--dark .moment__body { color: var(--ink-on-dark-soft); }
.moment--light .moment__body { color: var(--ink-soft); }

@media (max-width: 1024px) {
  .moment__inner,
  .moment--reverse .moment__inner {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "visual";
    gap: 40px;
    justify-items: center;
  }
  .moment__copy { max-width: 540px; width: 100%; }
}

.ministats {
  display: flex;
  gap: 32px;
  font-size: 14px;
  flex-wrap: wrap;
}

.ministat__num {
  display: block;
  font-size: 32px;
  font-weight: 700;
  color: var(--orange);
  line-height: 1;
  letter-spacing: -0.02em;
}

.ministat__lbl {
  display: block;
  color: var(--ink-on-dark-faint);
  margin-top: 4px;
  font-size: 14px;
}

.tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  list-style: none;
}

.tag {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
}

/* ============================================================================
   PHONE MOCKUP
   The heavy 26-36px rounding here is the other deliberate exception to the
   sharp (radius 0) brand system: it's device chrome standing in for a real
   phone bezel, not a brand surface — real phones don't have square corners,
   so this one context stays soft on purpose.
   ========================================================================= */

/* Black bezel inside a thin graphite rim, long soft shadow — the frame the
   hero phone introduced (2026-09-18), shared by every phone on the page. */
.phone {
  background: #050505;
  border-radius: 40px;
  padding: 9px;
  width: 240px;
  flex-shrink: 0;
  position: relative;
  box-shadow:
    0 0 0 1.5px #2B2724,
    0 0 0 3px #0E0D0C,
    0 34px 70px -22px rgba(0, 0, 0, 0.55),
    0 14px 28px -14px rgba(0, 0, 0, 0.4);
}

/* larger phone for moment sections — they have more breathing room */
.phone--lg {
  width: 280px;
  border-radius: 46px;
  padding: 10px;
}

@media (max-width: 480px) {
  .phone--lg { width: 260px; }
}

/* Screenshot inside the device frame.
   Height comes from the image's own width/height attributes, so any
   screenshot aspect ratio works and there is no layout shift while it
   loads. Swap the files in /screens/ — no CSS change needed. */
.phone__shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 31px;
  background: var(--bg-phone);
}

.phone--lg .phone__shot { border-radius: 36px; }

/* A cropped screen (Arena) is shown as a floating screen card, not in a phone
   body: a bezel around a 1080 × 1272 crop reads as a square phone. */
.phone--card {
  padding: 0;
  border-radius: 24px;
  background: var(--bg-phone);
  box-shadow:
    0 0 0 1px rgba(244, 239, 231, 0.1),
    0 34px 70px -22px rgba(0, 0, 0, 0.7),
    0 14px 28px -14px rgba(0, 0, 0, 0.5);
}
.phone--card .phone__shot { border-radius: 24px; }

.manifesto {
  background: var(--bg-cream);
  padding: var(--pad-y) var(--pad-x);
}

.manifesto__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 64px);
  align-items: start;
  max-width: var(--max);
  margin: 0 auto;
}

.manifesto__title {
  font-size: var(--display-md);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.035em;
  overflow-wrap: break-word;
  hyphens: none;
  color: var(--ink);
}

.manifesto__title--orange {
  color: var(--orange-deep);  /* AA-safe on cream */
  margin-top: 12px;
}

.manifesto__body {
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.6;
  padding-top: 14px;
}

.manifesto__body p { margin-bottom: 18px; }
.manifesto__body p:last-child { margin-bottom: 0; }
.manifesto__body strong { font-weight: 700; color: var(--ink); }

@media (max-width: 880px) {
  .manifesto__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ============================================================================
   NUMBERS
   ========================================================================= */

.numbers {
  padding: clamp(48px, 6vw, 80px) var(--pad-x);
  border-top: 1px solid var(--line);
}

.numbers__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: var(--max);
  margin: 0 auto;
}

.number {
  padding: 16px 36px;
  border-inline-end: 1px solid var(--line);
}

.number:first-child { padding-inline-start: 0; }
.number:last-child {
  padding-inline-end: 0;
  border-inline-end: 0;
}

.number__big {
  font-size: var(--display-lg);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 14px;
  color: var(--ink);
}

.number__big--orange { color: var(--orange-deep); }

.number__lbl {
  font-size: 15px;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 6px;
}

.number__sub {
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.55;
}

@media (max-width: 720px) {
  .numbers__inner { grid-template-columns: 1fr; }
  .number {
    padding: 36px 0;
    border-inline-end: 0;
    border-bottom: 1px solid var(--line);
  }
  .number:last-child { border-bottom: 0; }
}

/* ============================================================================
   REVIEWS — section removed pending real Play Store reviews
   When re-adding, restore .reviews / .review styles from git history.
   ========================================================================= */

/* ============================================================================
   PRICING (dark)
   ========================================================================= */

.pricing {
  background: var(--bg-dark);
  color: var(--ink-on-dark);
  padding: var(--pad-y) var(--pad-x);
}

.pricing__inner {
  max-width: var(--max);
  margin: 0 auto;
}

.pricing__title {
  font-size: var(--display-md);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.035em;
  margin-bottom: 16px;
  max-width: 560px;
  overflow-wrap: break-word;
}

.pricing__intro {
  font-size: 16px;
  color: var(--ink-on-dark-soft);
  line-height: 1.6;
  max-width: 560px;
  margin-bottom: 48px;
}

.pricing__intro strong { color: var(--orange); font-weight: 700; }

.pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.plan {
  border: 1px solid rgba(244, 239, 231, 0.1);
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  background: var(--bg-dark-2);
  transition: border-color 0.2s ease;
}

.plan:hover { border-color: rgba(244, 239, 231, 0.2); }

/* One orange hairline and a faint warm wash — no double ring, no glow. */
.plan--featured {
  border-color: rgba(255, 90, 31, 0.7);
  background: linear-gradient(180deg, rgba(255, 90, 31, 0.07) 0%, var(--bg-dark-2) 55%);
}

.plan--featured:hover { border-color: var(--orange); }

.plan__badge {
  position: absolute;
  top: -11px;
  inset-inline-end: 24px;
  background: var(--cta-grad);
  color: #FFFFFF;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.16em;
  padding: 5px 12px;
  font-weight: 700;
}

.plan__lbl {
  font-size: 12px;
  color: var(--ink-on-dark-faint);
  letter-spacing: 0.2em;
  font-weight: 600;
}

.plan__lbl--orange { color: var(--orange); }

.plan__billing {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink-on-dark);
}

.plan__body {
  font-size: var(--text-base);
  color: var(--ink-on-dark-soft);
  line-height: 1.6;
}

.plan__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
  padding: 16px 0;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.plan__features li {
  font-size: 15px;
  color: var(--ink-on-dark-soft);
  padding-inline-start: 24px;
  position: relative;
  line-height: 1.55;
}

.plan__features li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 6px;
  width: 14px;
  height: 8px;
  border-inline-start: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(-45deg);
}

.plan__features li strong { color: var(--orange); font-weight: 700; }

.plan .btn {
  margin-top: 8px;
}

.pricing__region-note {
  margin-top: 28px;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ink-on-dark-faint);
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}

.pricing__note {
  font-size: 14px;
  color: var(--ink-on-dark-faint);
  line-height: 1.55;
  text-align: center;
  border-top: 1px solid var(--line-dark);
  padding-top: 32px;
  margin-top: 16px;
}

/* ============================================================================
   PRICING VIEW — table on desktop (room to scan tier differences at a
   glance), cards on mobile (no horizontal scroll by default) with an
   opt-in switch to the table. Pure CSS: two radios are the state, :has()
   on the shared .pricing__view wrapper drives which block shows — no JS.
   Desktop always shows the table regardless of which radio is checked;
   the toggle itself only exists below the 880px breakpoint.
   ========================================================================= */

.pricing__grid { display: none; }
.pricing__view-toggle { display: none; }

.pricing__view-toggle {
  gap: 4px;
  margin-bottom: 24px;
  padding: 4px;
  background: var(--bg-dark-2);
  border: 1px solid rgba(244, 239, 231, 0.1);
  border-radius: 999px;
  width: fit-content;
}

.pricing__view-btn {
  display: inline-block;
  padding: 8px 18px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-on-dark-faint);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.pricing__view-btn:hover { color: var(--ink-on-dark); }

.pricing__view-input:checked + .pricing__view-btn {
  background: var(--cta-grad);
  color: #FFFFFF;
}

.pricing__view-input:focus-visible + .pricing__view-btn {
  outline: var(--focus);
  outline-offset: 2px;
}

.pricing__table-wrap {
  overflow-x: auto;
  margin-bottom: 32px;
}

.pricing__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.pricing__table th,
.pricing__table td {
  padding: 14px 16px;
  text-align: center;
  border-bottom: 1px solid var(--line-dark);
}

.pricing__table th[scope="row"] {
  text-align: start;
  font-weight: 400;
  color: var(--ink-on-dark-soft);
}

.pricing__table thead th {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-on-dark-faint);
  font-weight: 600;
}

.pricing__table thead th:first-child { text-align: start; }

.pricing__table-price {
  display: block;
  margin-top: 6px;
  font-size: var(--text-base);
  letter-spacing: normal;
  text-transform: none;
  font-weight: 600;
  color: var(--ink-on-dark);
}

.pricing__table-featured { background: var(--orange-tint); }
thead .pricing__table-featured { color: var(--orange); }

.pricing__table tbody tr:last-of-type th,
.pricing__table tbody tr:last-of-type td {
  border-bottom: none;
}

.pricing__table-yes { color: var(--orange); font-weight: 700; }
.pricing__table-no { color: var(--ink-on-dark-faint); }

.pricing__table-cta-row td { padding-top: 24px; }
.pricing__table-cta-row .btn { width: 100%; text-align: center; }

@media (max-width: 880px) {
  .pricing__grid { display: grid; grid-template-columns: 1fr; }
  .pricing__view-toggle { display: inline-flex; }
  .pricing__table-wrap { display: none; }

  .pricing__view:has(#pricing-view-table:checked) .pricing__grid { display: none; }
  .pricing__view:has(#pricing-view-table:checked) .pricing__table-wrap { display: block; }
}

/* Below ~560px the comparison table cannot fit: four columns need about 464px of
   track inside a 335px container on a 375px phone, so the toggle was offering a
   view that could only be read by dragging it sideways. Cards are not a fallback
   here, they are the correct layout — so the choice goes away rather than the
   table getting a scrollbar. */
@media (max-width: 560px) {
  .pricing__view-toggle { display: none; }
  .pricing__view:has(#pricing-view-table:checked) .pricing__grid { display: grid; }
  .pricing__view:has(#pricing-view-table:checked) .pricing__table-wrap { display: none; }
}

/* ============================================================================
   FAQ
   ========================================================================= */

.faq {
  padding: var(--pad-y) var(--pad-x);
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.faq__inner {
  max-width: 820px;
  margin: 0 auto;
}

.faq__head {
  margin-bottom: clamp(36px, 4vw, 48px);
}

.faq__title {
  font-size: var(--display-md);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--ink);
}

.faq__list {
  border-top: 1px solid var(--line);
}

.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: color 0.15s ease;
}

.faq__q::-webkit-details-marker { display: none; }

.faq__q:hover { color: var(--orange-deep); }

.faq__chev {
  width: 14px;
  height: 14px;
  position: relative;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.faq__chev::before,
.faq__chev::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform 0.25s ease;
}

.faq__chev::before {
  top: 6px; left: 0; right: 0; height: 2px;
}
.faq__chev::after {
  top: 0; bottom: 0; left: 6px; width: 2px;
}

.faq__item[open] .faq__chev::after { transform: scaleY(0); }
.faq__item[open] .faq__q { color: var(--orange-deep); }

.faq__a {
  padding: 0 0 22px;
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 680px;
}

.faq__a strong { color: var(--ink); font-weight: 600; }

/* ============================================================================
   FINAL CTA
   ========================================================================= */

.final-cta {
  padding: clamp(96px, 12vw, 160px) var(--pad-x);
  background: var(--bg-dark);
  color: var(--ink-on-dark);
  text-align: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* The hero's Sisyphus plate again, as the page's closing frame (2026-09-18) —
   it replaces a radial orange glow. Heavily graded: the headline sits on it
   centred, so the plate is a mood, not a picture. */
.final-cta__art {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
.final-cta__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 40%;
}
.final-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 70% at 50% 50%, rgba(10, 10, 10, 0.82) 0%, rgba(10, 10, 10, 0.55) 60%, rgba(10, 10, 10, 0.35) 100%),
    linear-gradient(180deg, #0A0A0A 0%, rgba(10, 10, 10, 0) 22%, rgba(10, 10, 10, 0) 78%, #0A0A0A 100%);
}

.final-cta__inner {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.final-cta__title {
  font-size: var(--display-lg);
  line-height: 1.0;
  font-weight: 700;
  letter-spacing: -0.04em;
  margin-bottom: 18px;
}

.final-cta__sub {
  font-size: 17px;
  color: var(--ink-on-dark-soft);
  margin-bottom: 36px;
  line-height: 1.55;
}

/* ============================================================================
   FOOTER
   ========================================================================= */

.footer {
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.footer__inner {
  padding: 32px var(--pad-x);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: var(--ink-muted);
  /* Same inset as .nav__inner — see the note there. */
  max-width: calc(var(--max) + 2 * var(--pad-x));
  margin: 0 auto;
  gap: 24px;
  flex-wrap: wrap;
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  color: var(--ink);
}

.footer__links {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

.footer__links a {
  color: var(--ink-muted);
  transition: color 0.15s ease;
  display: inline-block;
  padding: 8px 0;  /* comfortable tap target on touch */
}

.footer__links a:hover { color: var(--orange-deep); }

.footer__cta {
  flex-shrink: 0;
  padding: 10px 18px;
  font-size: 13px;
}

@media (max-width: 600px) {
  .footer__inner { flex-direction: column; align-items: flex-start; }
  .footer__links { gap: 16px 24px; }
}

/* ============================================================================
   STICKY MOBILE CTA — bottom bar visible on small screens, hides near footer
   ========================================================================= */

.sticky-cta {
  display: none;
}

@media (max-width: 880px) {
  .sticky-cta {
    display: block;
    position: fixed;
    inset-inline-start: 0;
    inset-inline-end: 0;
    bottom: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(10, 10, 10, 0.92);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    z-index: 90;
    /* Starts off-screen: the hero already has its own inline CTA, so this bar
       has no reason to exist until that CTA has scrolled out of view. site.js
       adds --visible once past the hero (and removes it again near the
       final CTA/footer) via IntersectionObserver. */
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
    border-top: 1px solid rgba(255, 90, 31, 0.3);
  }

  .sticky-cta--visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .sticky-cta__btn {
    width: 100%;
    padding: 14px 22px;
    font-size: 15px;
  }

  /* leave room for sticky bar so final-cta + footer aren't covered — only
     where the bar exists; legal pages have none and got 76 px of nothing */
  body.landing { padding-bottom: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .sticky-cta { transition: none; }
}

/* ============================================================================
   DARK LANDING — every section below the hero (2026-09-18)
   The user's full-page mockup: one dark scene top to bottom, the myth as the
   single light pause. Scoped to `.landing` so the legal pages, which share
   these stylesheets, keep their light look. Content stays the real one — the
   mockup's user counts, sample leaderboard and extra FAQ were not adopted.
   Two warm near-blacks alternate so long dark stretches still have rhythm.
   ========================================================================= */

.landing {
  --bg-dark-alt: #100D0B;
  --line-on-dark: rgba(244, 239, 231, 0.08);
  --line-on-dark-strong: rgba(244, 239, 231, 0.14);
}

.landing .features .eyebrow,
.landing .moment .eyebrow--orange,
.landing .faq .eyebrow { color: var(--orange); letter-spacing: 0.22em; }

/* --- features: heading left, six items right -------------------------------- */
.landing .features {
  background: var(--bg-dark);
  color: var(--ink-on-dark);
  border-top: 1px solid var(--line-on-dark);
}
.landing .features__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.62fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.landing .features__head { margin-bottom: 0; max-width: none; }
.landing .features__title { color: var(--ink-on-dark); }
.landing .features__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(24px, 3vw, 40px);
}
.landing .feature {
  border-top-color: var(--line-on-dark-strong);
  padding: 24px 0 36px;
}
.landing .feature__icon { color: var(--orange); }
.landing .feature__title { color: var(--ink-on-dark); font-size: 17px; }
.landing .feature__body { color: var(--ink-on-dark-soft); font-size: 14px; line-height: 1.6; }

@media (max-width: 1100px) {
  .landing .features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .landing .features__inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .landing .features__grid { grid-template-columns: 1fr; }
}

/* --- product moments: both dark now, the Plan one on the alternate tone ------ */
.landing .moment--dark { background: var(--bg-dark-alt); }
.landing .moment--light {
  /* Class kept for the markup; since the redesign it is a dark section. */
  background: var(--bg-dark);
  color: var(--ink-on-dark);
  border-top: 1px solid var(--line-on-dark);
}
.landing .moment--light .moment__body { color: var(--ink-on-dark-soft); }
.landing .moment .eyebrow--orange { color: var(--orange); }
.landing .tag {
  border-color: var(--line-on-dark-strong);
  color: var(--ink-on-dark);
  background: rgba(244, 239, 231, 0.03);
}

/* --- myth: the one light section, mountains at dawn ------------------------ */
.landing .manifesto {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #F1ECE3;
  padding-block: clamp(96px, 11vw, 150px);
}
.manifesto__art {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
.manifesto__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 55%;
}
/* A cream wash over the text columns; the ridge on the right stays visible.
   Measured by sampling the painted background under every glyph box at
   1440 px: body text ≥ 5.3:1 (AA 4.5), the orange 52 px title ≥ 4.1:1 (AA
   large 3.0). A lighter wash (0.45 at 78 %) put body text at 3.8:1 where it
   reaches the sunlit snow. */
.landing .manifesto::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(244, 241, 234, 0.9) 0%, rgba(244, 241, 234, 0.84) 50%, rgba(244, 241, 234, 0.62) 80%, rgba(244, 241, 234, 0.1) 100%);
}
.landing .manifesto .eyebrow--ink { letter-spacing: 0.22em; }

@media (max-width: 880px) {
  .manifesto__art img { object-position: 78% 60%; }
  .landing .manifesto::after {
    background: linear-gradient(180deg, rgba(244, 241, 234, 0.9) 0%, rgba(244, 241, 234, 0.84) 70%, rgba(244, 241, 234, 0.6) 100%);
  }
}

/* --- numbers ------------------------------------------------------------------ */
.landing .numbers {
  background: var(--bg-dark);
  color: var(--ink-on-dark);
  border-top: 0;
}
.landing .number { border-inline-end-color: var(--line-on-dark-strong); }
.landing .number__big { color: var(--ink-on-dark); }
.landing .number__big--orange { color: var(--orange); }
.landing .number__lbl { color: var(--ink-on-dark); }
.landing .number__sub { color: var(--ink-on-dark-faint); }
@media (max-width: 720px) {
  .landing .number { border-bottom-color: var(--line-on-dark-strong); }
}

/* --- pricing on the alternate tone ------------------------------------------- */
.landing .pricing {
  background: var(--bg-dark-alt);
  border-top: 1px solid var(--line-on-dark);
}

/* --- FAQ: heading left, questions right, as in the mockup --------------------- */
.landing .faq {
  background: var(--bg-dark);
  color: var(--ink-on-dark);
  border-top: 1px solid var(--line-on-dark);
}
.landing .faq__inner {
  max-width: var(--max);
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.42fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.landing .faq__head { margin-bottom: 0; }
.landing .faq__title { color: var(--ink-on-dark); }
.landing .faq__list { border-top-color: var(--line-on-dark-strong); }
.landing .faq__item { border-bottom-color: var(--line-on-dark-strong); }
.landing .faq__q { color: var(--ink-on-dark); font-size: 16px; }
.landing .faq__q:hover,
.landing .faq__item[open] .faq__q { color: var(--orange); }
.landing .faq__chev { color: var(--orange); }
.landing .faq__a { color: var(--ink-on-dark-soft); }
.landing .faq__a strong { color: var(--ink-on-dark); }
@media (max-width: 880px) {
  .landing .faq__inner { grid-template-columns: 1fr; gap: 28px; }
}

/* --- footer -------------------------------------------------------------------- */
.landing .footer {
  background: var(--bg-dark);
  border-top: 1px solid var(--line-on-dark);
}
.landing .footer__inner { color: var(--ink-on-dark-faint); }
.landing .footer__brand { color: var(--ink-on-dark); }
.landing .footer__links a { color: var(--ink-on-dark-soft); }
.landing .footer__links a:hover { color: var(--orange); }
.landing .footer__cta {
  background: transparent;
  color: var(--ink-on-dark);
  border: 1px solid var(--line-on-dark-strong);
}
.landing .footer__cta:hover { background: rgba(244, 239, 231, 0.08); }

/* ============================================================================
   SCRIPT SUPPORT — Korean, Arabic, Japanese, Chinese, Devanagari

   Turkish needs nothing: ı is named explicitly in the `latin` unicode-range in
   fonts.css, and İ ğ ş fall inside latin-ext, both of which already ship.
   ========================================================================= */

/* Inter carries no Hangul. Without this the browser silently substitutes a
   system font and the page looks half-finished even though the copy is fine. */
[lang="ko"] body,
[lang="ko"] {
  /* System Korean stack — Android: Noto Sans KR (system), iOS/macOS: Apple SD
     Gothic Neo, Windows: Malgun Gothic. No web-font payload for CJK. */
  font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Korean breaks lines between characters by default, which splits words in
   the middle. keep-all breaks at word boundaries instead. */
[lang="ko"] {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* Japanese and Simplified Chinese. Same no-payload approach as Korean —
   Android ships Noto CJK, macOS/iOS Hiragino and PingFang, Windows Yu Gothic
   and Microsoft YaHei. A subsetted web font would be 150-350 KB per weight
   and would need rebuilding on every copy change. */
[lang="ja"] body,
[lang="ja"] {
  font-family: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Meiryo', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

[lang="zh-Hans"] body,
[lang="zh-Hans"] {
  font-family: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Deliberately NOT keep-all. Korean has spaces between words; Japanese and
   Chinese do not, so keep-all would leave the browser nowhere to break a
   paragraph and the layout would scroll sideways. `line-break: strict`
   applies kinsoku shori: no break before 。、」 and none after 「. */
[lang="ja"],
[lang="zh-Hans"] {
  word-break: normal;
  line-break: strict;
  overflow-wrap: break-word;
}

/* Devanagari stacks marks above and below the baseline, so 1.6 lets glyphs
   from adjacent lines touch. Same treatment Arabic already gets below. */
[lang="hi"] body,
[lang="hi"] {
  font-family: 'Noto Sans Devanagari', 'Nirmala UI', 'Kohinoor Devanagari', 'Mangal', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.85;
}

/* …and the headings, which set their own tight line-heights (0.92–1.05) and
   so never saw the value above. */
[lang="hi"] .hero__title,
[lang="hi"] .moment__title,
[lang="hi"] .features__title,
[lang="hi"] .manifesto__title,
[lang="hi"] .pricing__title,
[lang="hi"] .faq__title,
[lang="hi"] .final-cta__title {
  line-height: 1.3;
}

/* Arabic-only and [dir="rtl"] rules (font stack, letter-spacing, bidi
   isolation, phone/underline orientation) now live in rtl.css, loaded only
   for the ar build — see rtlStylesheetTag in _build/build.js. Kept out of
   this file so the other 15 locales don't fetch RTL-only CSS. */