/* GymBro marketing site.
   Shares the console's typeface and slate so the two read as one product; adds
   a single accent the console does not use, because a landing page has to move
   and a tool used at 6pm with a queue should not. */

:root {
  --ink: #10161c;
  --ink-2: #4a545e;
  --ink-3: #79848f;
  --line: #e3e7eb;
  --paper: #ffffff;
  --wash: #f5f7f9;

  --slate: #18222c;
  --slate-2: #223040;

  --accent: #12b76a;
  --accent-d: #0e8f53;
  --accent-w: #e7f8ef;

  --late: #b4232a;
  --late-bg: #fdeceb;
  --soon: #8a5a00;
  --soon-bg: #fdf3e0;
  --ok: #1a6b45;
  --ok-bg: #e8f4ed;

  --r: 10px;
  /* --script is set per page in the template: the one Noto face for that
     page's writing system, or IBM Plex on the English page. It sits ahead of
     IBM Plex because a browser picks the first family that has the glyph, so
     Latin — "GymBro", "WhatsApp", the tier names — still renders in the brand
     type while the script renders in a face built for it. Without this a
     mid-range Android frequently has nothing for Sinhala and draws boxes. */
  --script: 'IBM Plex Sans';
  --sans: var(--script), 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --wrap: 1120px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 720px; }

.skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100;
  background: var(--slate); color: #fff; padding: 10px 16px;
}
.skip:focus { inset-inline-start: 8px; top: 8px; }

/* ───────────────────────────────────────────────────────────── buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-weight: 500; text-decoration: none;
  padding: 10px 18px; border-radius: var(--r);
  border: 1px solid transparent; cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s;
  white-space: nowrap;
}
.btn.lg { padding: 14px 26px; font-size: 17px; }
.btn.w { width: 100%; }
.btn.solid { background: var(--accent); color: #04120a; border-color: var(--accent); }
.btn.solid:hover { background: var(--accent-d); border-color: var(--accent-d); color: #fff; }
.btn.ghost { border-color: var(--line); background: var(--paper); color: var(--ink); }
.btn.ghost:hover { background: var(--wash); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent-d); outline-offset: 2px; }

/* ───────────────────────────────────────────────────────────── nav */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav-in { display: flex; align-items: center; gap: 32px; height: 68px; }
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 18px; letter-spacing: -0.02em; text-decoration: none;
}
.mark {
  width: 20px; height: 20px; border-radius: 6px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--slate) 100%);
  display: inline-block;
}
.nav-links { display: flex; gap: 26px; margin-inline-end: auto; }
.nav-links a { text-decoration: none; color: var(--ink-2); font-size: 15px; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { display: flex; gap: 10px; align-items: center; }

/* ─────────────────────────────────────────────── language picker

   One control that opens a list, not a row of six names across the header.
   Built on <details>, so the links are in the markup for a crawler and the
   open/close is the browser's — nothing here needs JavaScript to work.

   Each row is the language's own name over its English name. Somebody who
   picks the wrong one is looking at a script they cannot read, and "Sinhala"
   under සිංහල is the way back. */
.lang { position: relative; }
.lang > summary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 10px; border-radius: var(--r);
  font-size: 14px; color: var(--ink-2); cursor: pointer;
  list-style: none; user-select: none; white-space: nowrap;
}
/* Three rules for one triangle. `list-style` is what the spec says, the
   -webkit pseudo-element is what older Chromium reads, and `::marker` is what
   current Chromium and Edge read — Edge was still drawing a "+" beside the
   globe with only the first two. */
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary::marker { content: ""; }
.lang > summary:hover { color: var(--ink); background: var(--wash); }
.lang > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lang[open] > summary { color: var(--ink); background: var(--wash); }
.lang[open] .chev { transform: rotate(180deg); }
.chev { transition: transform .15s; }
.globe { flex: none; opacity: .75; }

/* Closed means gone. A browser hiding the panel by shrinking it rather than
   removing it left its top and bottom borders drawn across the header. */
.lang:not([open]) .lang-menu { display: none; }
.lang-menu {
  position: absolute; z-index: 60; inset-inline-end: 0; top: calc(100% + 6px);
  min-width: 208px; padding: 6px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: 0 14px 34px rgba(16,22,28,.14);
  display: flex; flex-direction: column;
}
.lang-menu a {
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 10px; border-radius: 7px; text-decoration: none;
}
.lang-menu a:hover { background: var(--wash); }
.lang-menu a.on { background: var(--accent-w); }
.endonym { font-size: 14.5px; color: var(--ink); line-height: 1.45; }
.exonym  { font-size: 11.5px; color: var(--ink-3); letter-spacing: .01em; }
/* Two separate problems, and conflating them broke one or the other twice.
   Shaping is the span's job — `dir="auto"` on each name lets the browser read
   its first strong character, so اردو joins right-to-left inside an otherwise
   left-to-right menu instead of coming out as loose letters in reverse.
   Alignment is the menu's job, and it follows the page rather than the row, so
   every language starts at the same edge; `text-align: start` would resolve
   against the row's own direction and push that one line across. */
.lang-menu a > span { text-align: left; }
[dir="rtl"] .lang-menu a > span { text-align: right; }

@media (max-width: 860px) {
  .nav-links { display: none; }
  /* The picker stays — a Sinhala reader landing on the English page from a
     phone is the exact case it exists for — but drops to the globe alone,
     because the header has a sign-in and a call to action to fit as well. */
  .lang-now { display: none; }
  .lang > summary { padding: 8px; gap: 3px; }
  .nav-in { gap: 16px; }
  .brand { margin-inline-end: auto; }
}

/* ───────────────────────────────────────────────────────────── hero */
.hero {
  background:
    radial-gradient(900px 400px at 82% -8%, rgba(18,183,106,.16), transparent 62%),
    linear-gradient(180deg, var(--slate) 0%, #101820 100%);
  color: #fff;
  padding: 84px 0 96px;
}
.hero-in { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.eyebrow {
  font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  color: #7fe3b1; margin-bottom: 18px;
}
.hero h1 { font-size: 50px; letter-spacing: -0.03em; }
.lede { margin-top: 20px; font-size: 19px; color: #c3ccd6; max-width: 30em; }
.hero-actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.hero .btn.ghost { background: transparent; border-color: #3b4956; color: #fff; }
.hero .btn.ghost:hover { background: #223040; }
.fine { font-size: 13.5px; color: var(--ink-3); }
.nowrap { white-space: nowrap; }
.hero .fine { color: #8d9aa6; margin-top: 18px; }
.fine.mid { text-align: center; margin-top: 22px; }

/* mock console panel */
.hero-panel {
  background: var(--paper); border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.34);
  color: var(--ink);
}
.panel-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 14px; background: var(--wash); border-bottom: 1px solid var(--line);
}
.dot { width: 9px; height: 9px; border-radius: 50%; background: #cfd6dd; }
.panel-title { margin-inline-start: 10px; font-size: 12.5px; color: var(--ink-3); font-weight: 500; }
.panel-body { padding: 6px 0; }
.q-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 18px; border-bottom: 1px solid var(--line); font-size: 14px;
}
.q-row:last-child { border-bottom: 0; }
.q-row.muted { opacity: .62; }
.q-row strong { display: block; font-weight: 600; }
.q-sub { font-size: 12.5px; color: var(--ink-3); }
.pill {
  font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 999px;
  background: var(--wash); color: var(--ink-2); white-space: nowrap;
}
.pill.late { background: var(--late-bg); color: var(--late); }
.pill.soon { background: var(--soon-bg); color: var(--soon); }
.pill.ok   { background: var(--ok-bg);   color: var(--ok); }

@media (max-width: 900px) {
  .hero { padding: 56px 0 64px; }
  .hero-in { grid-template-columns: 1fr; gap: 40px; }
  .hero h1 { font-size: 36px; }
  .lede { font-size: 17px; }
}

/* ───────────────────────────────────────────────────────────── strip */
.strip { background: var(--slate-2); color: #fff; }
.strip-in { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 26px 24px; }
.strip-in div { display: flex; flex-direction: column; gap: 3px; }
.strip-in strong { font-size: 14.5px; }
.strip-in span { font-size: 13.5px; color: #a8b4c0; }
@media (max-width: 820px) { .strip-in { grid-template-columns: 1fr; gap: 16px; } }

/* ───────────────────────────────────────────────────────────── sections */
.sec { padding: 84px 0; }
.sec.alt { background: var(--wash); border-block: 1px solid var(--line); }
.sec-h { font-size: 34px; letter-spacing: -0.025em; }
.sec-sub { margin-top: 14px; color: var(--ink-2); font-size: 17px; max-width: 62ch; }
@media (max-width: 700px) { .sec { padding: 56px 0; } .sec-h { font-size: 27px; } }

/* ───────────────────────────────────────────────────────────── feature grid */
.grid {
  margin-top: 44px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px;
}
.sec.alt .card { background: var(--paper); }
.card h3 { font-size: 16.5px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.card p { margin-top: 9px; color: var(--ink-2); font-size: 14.5px; }
.tag {
  font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
}
.tag.live { background: var(--accent-w); color: var(--accent-d); }
.tag.soon { background: var(--soon-bg); color: var(--soon); }
@media (max-width: 940px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid { grid-template-columns: 1fr; } }

/* ───────────────────────────────────────────────────────────── pricing */
.cur-row {
  margin-top: 34px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 14.5px; color: var(--ink-2);
}
.cur-row select {
  font: inherit; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
}
.cur-note { font-size: 13.5px; color: var(--ink-3); }

.tiers {
  margin-top: 26px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; align-items: start;
}
.tier {
  position: relative;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 24px 20px; display: flex; flex-direction: column; gap: 12px;
}
.tier.free { border-color: var(--accent); }
.tier.best { border-color: var(--slate); box-shadow: 0 10px 28px rgba(16,22,28,.09); }
.badge {
  position: absolute; top: -11px; inset-inline-start: 20px;
  background: var(--slate); color: #fff; font-size: 11px; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
}
.tier h3 { font-size: 15px; color: var(--ink-2); font-weight: 600; }
.price { display: flex; align-items: baseline; gap: 4px; }
.amt { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; }
.per { font-size: 14px; color: var(--ink-3); }
.cap { font-size: 13.5px; color: var(--ink-2); }
.tier ul { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.tier li { font-size: 13.5px; color: var(--ink-2); padding-inline-start: 20px; position: relative; }
/* The tick is positioned logically but drawn physically: a checkmark is a
   glyph, not a layout, and mirroring it in Urdu makes it read as a tick drawn
   backwards rather than as a right-to-left tick. */
.tier li::before {
  content: ""; position: absolute; inset-inline-start: 3px; top: 8px;
  width: 8px; height: 4px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.tier .btn { margin-top: auto; }
@media (max-width: 1040px) { .tiers { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .tiers { grid-template-columns: 1fr; } }

.compare {
  margin-top: 52px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r); padding: 26px;
}
.compare h3 { font-size: 18px; }
.compare > p { margin-top: 8px; color: var(--ink-2); font-size: 14.5px; }
.cmp { margin: 16px 0 14px; display: flex; flex-direction: column; }
.cmp li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px;
}
.cmp li:last-child { border-bottom: 0; }
.cmp li:first-child { color: var(--accent-d); font-weight: 600; }
.cmp b { font-variant-numeric: tabular-nums; }

/* ───────────────────────────────────────────────────────────── steps */
.steps {
  margin-top: 44px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.steps li {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: 22px;
}
.step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--slate); color: #fff; font-weight: 600; font-size: 14px;
  margin-bottom: 14px;
}
.steps h3 { font-size: 16px; }
.steps p { margin-top: 8px; color: var(--ink-2); font-size: 14.5px; }
@media (max-width: 940px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ───────────────────────────────────────────────────────────── who */
.who { margin-top: 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.who div { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.who h3 { font-size: 16px; }
.who p { margin-top: 8px; color: var(--ink-2); font-size: 14.5px; }
@media (max-width: 940px) { .who { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .who { grid-template-columns: 1fr; } }

/* ───────────────────────────────────────────────────────────── faq

   Scoped to #faq. These were bare `details` and `summary` selectors, written
   when the FAQ was the only disclosure on the site — so the language picker,
   which is also a <details>, arrived wearing the FAQ's clothes: a "+" beside
   its chevron, and the accordion's top and bottom borders drawn across the
   header. */
#faq details {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
#faq details:first-of-type { border-top: 1px solid var(--line); margin-top: 36px; }
#faq summary {
  cursor: pointer; font-weight: 600; font-size: 16.5px; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
#faq summary::-webkit-details-marker { display: none; }
#faq summary::after {
  content: "+"; font-weight: 400; font-size: 22px; color: var(--ink-3); line-height: 1;
}
#faq details[open] summary::after { content: "\2212"; }
#faq details p { margin-top: 12px; color: var(--ink-2); font-size: 15.5px; max-width: 68ch; }
#faq summary:focus-visible { outline: 2px solid var(--accent-d); outline-offset: 3px; }

/* ───────────────────────────────────────────────────────────── cta */
.cta {
  background: linear-gradient(180deg, #101820 0%, var(--slate) 100%);
  color: #fff; padding: 84px 0; text-align: center;
}
.cta h2 { font-size: 34px; letter-spacing: -0.025em; }
.cta > .wrap > p { margin-top: 14px; color: #bcc6d0; font-size: 17px; }
.cta-actions { margin-top: 30px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta .btn.ghost { background: transparent; border-color: #3b4956; color: #fff; }
.cta .btn.ghost:hover { background: #223040; }
.cta .fine { color: #8d9aa6; margin-top: 18px; }
@media (max-width: 700px) { .cta { padding: 56px 0; } .cta h2 { font-size: 27px; } }

/* ───────────────────────────────────────────────────────────── footer */
.foot { background: #0c1218; color: #8d9aa6; padding: 34px 0; }
.foot-in { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; }
.foot .brand { color: #fff; }
.foot nav { display: flex; gap: 22px; flex-wrap: wrap; }
.foot nav a { text-decoration: none; font-size: 14.5px; }
.foot nav a:hover { color: #fff; }
.foot .fine { color: #6f7d89; margin-top: 6px; }

/* ───────────────────────────────────────────── country rail */
/* Horizontal because the list is meant to read as "and it keeps going".
   Each card earns the scroll by carrying a price, not just a name. */
.rail-wrap { margin-top: 46px; }
.rail-h {
  font-size: 15px; font-weight: 600; color: var(--ink-2);
  margin-bottom: 14px;
}
.rail {
  display: flex; gap: 12px;
  overflow-x: auto; scroll-snap-type: x proximity;
  padding-bottom: 12px;
  /* Bleed to the viewport edge so a half-visible card signals "scrollable"
     rather than looking like the list simply ends. */
  margin-inline: -24px; padding-inline: 24px;
  scrollbar-width: thin;
}
.rail:focus-visible { outline: 2px solid var(--accent-d); outline-offset: 4px; }
.rail-card {
  flex: 0 0 auto; scroll-snap-align: start;
  min-width: 152px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: 15px 17px;
  display: flex; flex-direction: column; gap: 3px;
}
.rail-country { font-size: 13px; color: var(--ink-3); }
.rail-price {
  font-size: 21px; font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.rail-code { font-size: 11.5px; color: var(--ink-3); }
.rail-wrap .fine { margin-top: 6px; max-width: 68ch; }

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

/* ─────────────────────────────────────────────── right-to-left

   Urdu, and Arabic if MENA ever happens. The layout mirrors on its own because
   the rules above use logical properties; what is left is the handful of
   things that are genuinely directional, plus the fact that Nastaliq is a
   taller script than anything else on this site and clips at Latin leading. */
[dir="rtl"] .hero {
  background:
    radial-gradient(900px 400px at 18% -8%, rgba(18,183,106,.16), transparent 62%),
    linear-gradient(180deg, var(--slate) 0%, #101820 100%);
}

/* The rail is scrolled by hand and starts at the reading edge either way. */
[dir="rtl"] .rail { direction: rtl; }

/* Prices, member numbers and currency codes stay left-to-right inside a
   right-to-left line — "Rs 12,000" reversed is a different number. */
[dir="rtl"] .amt,
[dir="rtl"] .price,
[dir="rtl"] .rail-price,
[dir="rtl"] .rail-code,
[dir="rtl"] .cmp b { direction: ltr; unicode-bidi: isolate; }

/* Noto Nastaliq Urdu hangs well below the baseline and stacks its ligatures
   diagonally. At the leading the Latin faces use, descenders of one line land
   on the next. This is the one place a language needs its own numbers. */
html[lang="ur"] { line-height: 2.05; }
html[lang="ur"] h1 { line-height: 1.7; }
html[lang="ur"] h2,
html[lang="ur"] h3 { line-height: 1.85; }
html[lang="ur"] .btn { padding-block: 13px; }
html[lang="ur"] .tag { line-height: 1.9; }