/* ==========================================================================
   gymghor.com — one stylesheet.

   Extracted FROM the Claude Design export (design/), not invented alongside
   it. Every class below is a pattern that appears more than once across the
   seven pages; genuinely one-off positioning stays as an inline style on the
   element, because inventing a utility class for a single use makes the
   markup harder to read, not easier.

   The palette, type and section rhythm are the design's, unchanged.
   ========================================================================== */

:root {
  /* Dark surfaces, darkest first */
  --ink-900: #13100F;   /* hero, final CTA, footer, page background */
  --ink-850: #161210;   /* dark content sections */
  --ink-800: #1B1715;   /* panels, Bangla band, featured pricing card */
  --ink-750: #221C18;   /* panel chrome / table headers */

  /* Light surfaces */
  --sand-100: #F5F0E8;  /* light sections */
  --sand-200: #EDE6DB;  /* alternate light sections */
  --card-light: #FFFDF9;
  --white: #FFFFFF;

  /* Borders */
  --line-dark: #3a322c;
  --line-dark-soft: #2d2622;
  --line-dark-strong: #574a3f;
  --line-light: #DDD2C4;
  --line-light-strong: #C4B6A4;
  --line-sand: #D8CDBE;

  /* Text */
  --text-on-dark: #C9BFB3;
  --text-on-dark-strong: #F6F1EA;
  --text-on-dark-mid: #E0D8CE;
  --text-on-dark-soft: #EFE8DD;
  --text-muted-dark: #B3A89D;
  --text-faint-dark: #8a7f73;
  --text-on-light: #1B1715;
  --text-on-light-soft: #5B5248;
  --text-on-light-mid: #4A4038;
  --text-muted-light: #8A7D6F;

  /* Accent */
  --accent: #FF5722;
  --accent-hover: #FFD2BF;
  --accent-ink: #C63E10;   /* accent legible on light surfaces */
  --accent-ink-alt: #E8491D;
  --ink-ember: #221A15;   /* the featured plan card on the dark pricing header */
  --gold: #D4AE55;
  --green: #93B07E;
  --green-ink: #5F7F4C;

  --maxw: 1360px;
  --sec-y: clamp(104px, 13vw, 200px);
  --sec-x: clamp(20px, 5vw, 64px);

  --font-display: 'Anton', Impact, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-bn: 'Hind Siliguri', 'Manrope', sans-serif;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html, body { margin: 0; padding: 0; background: var(--ink-900); }

body {
  font-family: var(--font-body);
  color: var(--text-on-dark);
  -webkit-font-smoothing: antialiased;
}

html { scroll-behavior: smooth; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

::selection { background: var(--accent); color: var(--ink-900); }

* { box-sizing: border-box; }

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 12px; top: 12px; z-index: 100;
  background: var(--accent); color: var(--ink-900);
  padding: 10px 18px; font-weight: 800;
}

/* --------------------------------------------------------------------------
   Layout — the section rhythm the whole site is built on
   -------------------------------------------------------------------------- */

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

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

.sec--light      { background: var(--sand-100); }
.sec--light-alt  { background: var(--sand-200); }
.sec--dark       { background: var(--ink-850); }
.sec--darkest    { background: var(--ink-900); }

/* The hairline that separates two consecutive light sections. */
.sec--topline-light { border-top: 1px solid var(--line-sand); }

/* The radial glow behind the dashboard showcase. */
.sec--glow {
  background-image: radial-gradient(ellipse 800px 400px at 50% 0%, rgba(255,120,50,0.07), rgba(0,0,0,0) 70%);
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.18em;
  margin: 0 0 16px;
}
.eyebrow--on-light { color: var(--accent-ink); }
.eyebrow--on-dark  { color: var(--accent); }
.eyebrow--muted    { color: var(--text-muted-dark); }

.h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 92px);
  line-height: 0.97;
  letter-spacing: 0.01em;
  margin: 0 0 26px;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--text-on-dark-strong);
}

.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 4.2vw, 60px);
  line-height: 1.02;
  margin: 0 0 16px;
  text-transform: uppercase;
}
.h2--on-light { color: var(--text-on-light); }
.h2--on-dark  { color: var(--text-on-dark-strong); }

.h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0.03em;
  margin: 0 0 12px;
  text-transform: uppercase;
}
.h3--on-light { color: var(--text-on-light); }
.h3--on-dark  { color: var(--text-on-dark-strong); }

.lede { font-size: 18px; line-height: 1.55; margin: 0; }
.lede--on-light { color: var(--text-on-light-soft); }
.lede--on-dark  { color: var(--text-on-dark); }

.mono { font-family: var(--font-mono); }
.bn   { font-family: var(--font-bn); }

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

/* --------------------------------------------------------------------------
   Buttons — four variants, all of them in the design
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  cursor: pointer;
}

/* Solid orange on dark. Hover inverts to outline. */
.btn--solid {
  background: var(--accent);
  color: var(--ink-900);
  border: 3px solid var(--accent);
  font-size: 17px;
  padding: 17px 34px;
}
.btn--solid:hover { background: transparent; color: var(--accent); }

/* Solid orange whose hover goes to the page background — used on the final
   CTA, where the surface behind it is the darkest tone. */
.btn--solid-invert { background: var(--accent); color: var(--ink-900); border: 3px solid var(--accent); }
.btn--solid-invert:hover { background: var(--ink-900); color: var(--accent); }

/* Quiet outline on dark. */
.btn--ghost {
  color: var(--text-on-dark-mid);
  border: 2px solid #52463d;
  font-weight: 700;
  font-size: 16px;
  padding: 17px 26px;
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

/* Outline on light — fills on hover. */
.btn--outline-ink {
  color: var(--text-on-light);
  border: 3px solid var(--ink-800);
  font-size: 16px;
  letter-spacing: 0.05em;
  padding: 18px 20px;
}
.btn--outline-ink:hover { background: var(--ink-800); color: var(--sand-100); }

/* The compact nav CTA. */
.btn--nav {
  background: var(--accent);
  color: var(--ink-900);
  font-size: 15px;
  letter-spacing: 0.05em;
  padding: 11px 20px;
}
.btn--nav:hover { background: var(--accent-hover); color: var(--ink-900); }

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 15px var(--sec-x);
  background: rgba(19, 16, 15, 0.97);
  border-bottom: 1px solid var(--line-dark);
}
.nav__brand { display: flex; align-items: center; gap: 11px; color: inherit; }
.nav__brand:hover { color: inherit; }
.nav__mark {
  width: 30px; height: 30px; background: var(--accent);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 17px; color: var(--ink-900);
}
.nav__word {
  font-family: var(--font-display); font-size: 21px;
  letter-spacing: 0.06em; color: var(--text-on-dark-strong);
}
.nav__links {
  display: flex; align-items: center;
  gap: clamp(10px, 2.6vw, 30px);
  flex-wrap: wrap; justify-content: flex-end;
}
.nav__link {
  color: var(--text-on-dark-mid);
  font-weight: 700; font-size: 15px; letter-spacing: 0.05em;
}
.nav__link:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

/* The large feature card on light surfaces. */
.card {
  border: 1px solid var(--line-light);
  background: var(--card-light);
  padding: 36px;
  transition: border-color 0.2s, transform 0.2s;
}
.card--lift:hover { border-color: var(--accent); transform: translateY(-4px); }

/* The small inset data card inside a feature card — always mono. */
.minicard {
  border: 1px solid var(--line-light);
  background: var(--white);
  padding: 14px 16px;
  font-family: var(--font-mono);
}
.minicard--roomy { padding: 20px; }

/* Dark panel — the dashboard frame. */
.panel {
  border: 3px solid var(--line-dark-strong);
  background: var(--ink-800);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
.panel__chrome {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 24px;
  border-bottom: 1px solid var(--line-dark);
  background: var(--ink-750);
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.14em; color: var(--text-muted-dark);
}
.panel__label {
  font-family: var(--font-display); font-size: 17px;
  letter-spacing: 0.08em; color: var(--text-on-dark-strong);
}

/* A row inside the dark panel. */
.prow {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  padding: 15px 24px;
  border-bottom: 1px solid var(--line-dark-soft);
  font-family: var(--font-mono);
}
.prow__name { font-size: 17px; font-weight: 600; color: var(--text-on-dark-soft); }
.prow__sub  { font-size: 13px; color: var(--text-muted-dark); margin-top: 3px; }
.prow__amt  { font-size: 18px; font-weight: 700; color: var(--text-on-dark-strong); }

/* The numbered article that sits under a rule, used in three sections. */
.ruled { border-top: 3px solid var(--line-light-strong); padding: 30px 0 0; }
.ruled--accent { border-top-color: var(--accent); padding-top: 26px; }

/* --------------------------------------------------------------------------
   Grids used more than once
   -------------------------------------------------------------------------- */

.grid { display: grid; }
.grid--auto-300 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 48px; }
.grid--auto-340 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px; }
.grid--auto-460 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 32px; grid-auto-rows: 1fr; align-items: stretch; }
.grid--auto-230 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 32px 48px; }

.headrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 20px; align-items: end;
  margin-bottom: 72px;
}

/* --------------------------------------------------------------------------
   Photo bands — a solid panel until a real photo arrives
   -------------------------------------------------------------------------- */

.photoband { position: relative; overflow: hidden; background: var(--ink-900); }
.photoband__media { position: absolute; inset: 0; }
.photoband__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Stands in for a missing photo. A flat tone, never a broken-image icon:
   the layout is final, so dropping a real <img> in changes nothing else. */
.photoband__placeholder { position: absolute; inset: 0; background: var(--ink-900); }

.photoband__scrim { position: absolute; inset: 0; pointer-events: none; }
.photoband__scrim--hero {
  background: linear-gradient(100deg, rgba(19,16,15,0.97) 0%, rgba(19,16,15,0.93) 45%, rgba(19,16,15,0.82) 100%);
}
.photoband__scrim--band { background: rgba(19, 16, 15, 0.75); }
.photoband__scrim--cta  { background: rgba(19, 16, 15, 0.86); }
.photoband__body { position: relative; }

/* --------------------------------------------------------------------------
   Dashboard tab switcher — was React state, now a class toggle
   -------------------------------------------------------------------------- */

.tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

.tab {
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 700; letter-spacing: 0.08em;
  padding: 13px 24px;
  cursor: pointer;
  border: 1px solid var(--line-dark);
  background: var(--ink-800);
  color: var(--text-on-dark);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tab:hover { border-color: var(--accent); color: var(--accent); }
.tab.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink-900);
}

/* Panels are all rendered server-side; JS only flips which one is shown, so
   the content is in the HTML for crawlers and for a visitor with no JS. */
.tabpanel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   FAQ — native <details>, no JS
   -------------------------------------------------------------------------- */

.faq { border-top: 3px solid var(--ink-800); }

.faq__item { border-bottom: 2px solid var(--line-light-strong); }

.faq__q {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  padding: 15px 4px;
  cursor: pointer;
  list-style: none;
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 800;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { background: var(--sand-200); }

/* The +/− the design draws, without the JS that drove it. */
.faq__q::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 26px; font-weight: 700;
  color: var(--accent-ink);
  flex-shrink: 0;
}
.faq__item[open] .faq__q::after { content: "\2212"; }

.faq__a {
  font-size: 16px; line-height: 1.7;
  color: var(--text-on-light-soft);
  margin: 0;
  padding: 0 36px 22px 4px;
  max-width: 70ch;
}

/* --------------------------------------------------------------------------
   Pricing cards
   -------------------------------------------------------------------------- */

.tier {
  border: 3px solid var(--ink-800);
  background: var(--card-light);
  padding: 48px 40px;
  min-height: 660px;
  display: flex; flex-direction: column;
  transition: transform 0.15s, box-shadow 0.15s;
}
.tier:hover { transform: translateY(-6px); box-shadow: 6px 6px 0 var(--ink-800); }

.tier--featured {
  border: 6px solid var(--accent);
  background: var(--ink-800);
  padding: 105px 37px 45px;
  min-height: 726px;
  position: relative;
}
.tier--featured:hover { transform: translateY(-6px); box-shadow: 8px 8px 0 var(--accent); }

.tier__flag {
  position: absolute; top: 0; left: 0; right: 0;
  background: var(--accent); color: var(--ink-900);
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  letter-spacing: 0.18em; padding: 14px 0; text-align: center;
}
.tier__name {
  font-family: var(--font-mono); font-size: 15px; font-weight: 700;
  letter-spacing: 0.18em; color: var(--text-on-light-soft);
  margin-bottom: 22px;
}
.tier--featured .tier__name { color: var(--accent); }
.tier__price {
  height: 100px; display: flex; align-items: flex-end;
  font-family: var(--font-mono);
  font-size: clamp(56px, 5.6vw, 84px); font-weight: 700;
  color: var(--text-on-light); line-height: 0.95; letter-spacing: -0.02em;
}
.tier--featured .tier__price {
  font-size: clamp(60px, 6vw, 100px);
  color: var(--text-on-dark-strong);
  letter-spacing: -0.03em;
}
.tier__per {
  font-family: var(--font-mono); font-size: 16px;
  color: var(--text-muted-light); margin-top: 10px;
}
.tier--featured .tier__per { color: var(--text-muted-dark); }
.tier__list {
  list-style: none; padding: 0; margin: 36px 0 40px;
  display: grid; gap: 18px;
  font-size: 17px; color: var(--text-on-light-mid);
}
.tier__list li { border-left: 3px solid var(--ink-800); padding-left: 16px; }
.tier--featured .tier__list { color: var(--text-on-dark-mid); }
.tier--featured .tier__list li { border-left-color: var(--accent); }
.tier__cta { margin-top: auto; }

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

.foot {
  background: var(--ink-900);
  border-top: 1px solid var(--line-dark);
  padding: clamp(44px, 6vw, 68px) var(--sec-x) 30px;
}
.foot__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line-dark);
}
.foot__heading {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.16em; color: var(--text-muted-dark);
  margin-bottom: 16px;
}
.foot__links { display: grid; gap: 10px; }
.foot__links a { font-size: 15px; color: var(--text-on-dark-mid); font-weight: 500; }
.foot__links a:hover { color: var(--accent); }
.foot__base {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 10px; padding-top: 22px;
  font-family: var(--font-mono); font-size: 13px; color: var(--text-faint-dark);
}

/* --------------------------------------------------------------------------
   Motion — the design's reveals and count-ups
   -------------------------------------------------------------------------- */

@keyframes heroUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes plateSettle {
  0%   { opacity: 0; transform: translateY(54px); }
  70%  { opacity: 1; transform: translateY(-6px); }
  85%  { transform: translateY(2px); }
  100% { opacity: 1; transform: translateY(0); }
}

.anim-heroUp { animation: heroUp 0.8s cubic-bezier(.22, 1, .36, 1) both; }
.anim-plate  { animation: plateSettle 0.9s cubic-bezier(.3, 1, .4, 1) 0.25s both; }

/* The reveal's start state is applied by JS, not here, so a visitor with no
   JS sees the content rather than a page of invisible elements. */

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

/* --------------------------------------------------------------------------
   Spec lists — the Features page's dominant pattern

   A ruled list of "title · optional plan tag · body". The export repeats it
   in six of the eight feature sections, in light and dark variants, with the
   same measurements each time. That is what earns it a class rather than an
   inline style.
   -------------------------------------------------------------------------- */

.speclist { border-top: 3px solid var(--text-on-light); }
.speclist--on-dark { border-top-color: var(--line-dark-strong); }

/* Two columns where the design splits a long list across the full width. */
.speclist--split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 0 64px;
}

.speclist__item { padding: 24px 0; border-bottom: 1px solid var(--line-sand); }
.speclist--on-dark .speclist__item { border-bottom-color: var(--line-dark); }

.speclist__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; margin-bottom: 8px;
}

.speclist__title {
  font-size: 19px; font-weight: 800; margin: 0;
  letter-spacing: -0.01em;
  color: var(--text-on-light);
}
.speclist--on-dark .speclist__title { color: var(--text-on-dark-strong); }

/* The variant that sets titles in the display face instead — reminders and
   the 2x2 growth cards. */
.speclist__title--display {
  font-family: var(--font-display); font-weight: 400;
  font-size: 26px; letter-spacing: 0.03em; text-transform: uppercase;
}

.speclist__body {
  font-size: 16px; line-height: 1.6; margin: 0; max-width: 62ch;
  color: var(--text-on-light-soft);
}
.speclist--on-dark .speclist__body { color: var(--text-on-dark); }

/* --------------------------------------------------------------------------
   Plan tag — the "BASIC +" / "PRO" chip beside a feature title
   -------------------------------------------------------------------------- */

.tag {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  padding: 3px 9px;
  flex-shrink: 0;
  white-space: nowrap;
}
.tag--on-light { color: var(--accent-ink); border: 2px solid var(--accent-ink); }
.tag--on-dark  { color: var(--accent); border: 2px solid var(--accent); }

/* --------------------------------------------------------------------------
   Jump bar — the Features hero's in-page section links
   -------------------------------------------------------------------------- */

.jumpbar { display: flex; flex-wrap: wrap; gap: 10px; }

.jumpbar__link {
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--text-on-dark-mid);
  border: 2px solid var(--line-dark);
  padding: 12px 18px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.jumpbar__link:hover { border-color: var(--accent); color: var(--accent); }

/* The last one — the honesty section — is pre-lit, because it is the link
   the page most wants a buyer to follow before signing up. */
.jumpbar__link--lit { color: var(--accent); border-color: var(--accent); }
.jumpbar__link--lit:hover { background: var(--accent); color: var(--ink-900); }

/* Sections that are anchor targets, under the sticky nav. */
.sec--anchor { scroll-margin-top: 60px; }

/* --------------------------------------------------------------------------
   Light panel — the white mock-up card with the hard offset shadow

   The dark .panel's twin. Used for the member profile and the check-in list.
   -------------------------------------------------------------------------- */

.panel--light {
  border: 3px solid var(--text-on-light);
  background: var(--white);
  font-family: var(--font-mono);
  box-shadow: 10px 10px 0 var(--line-light);
}

.panel__chrome--light {
  background: var(--sand-200);
  border-bottom: 2px solid var(--text-on-light);
  color: var(--text-on-light-soft);
  padding: 14px 22px;
}

/* The key/value cells inside the member card. */
.kvgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kvgrid__cell { padding: 16px 22px; border-bottom: 1px solid var(--sand-200); }
.kvgrid__cell:nth-child(odd) { border-right: 1px solid var(--sand-200); }
.kvgrid__cell:nth-last-child(-n+2) { border-bottom: 0; }
.kvgrid__k { font-size: 11px; letter-spacing: 0.12em; color: var(--text-muted-light); }
.kvgrid__v { font-size: 16px; font-weight: 600; color: var(--text-on-light); margin-top: 5px; }

/* --------------------------------------------------------------------------
   Small mono chips and the permission toggle
   -------------------------------------------------------------------------- */

.chip {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  padding: 4px 10px;
  border: 1px solid var(--line-light);
  color: var(--text-on-light-soft);
  white-space: nowrap;
}
.chip--on-dark { border-color: var(--line-dark); color: var(--text-on-dark); padding: 5px 12px; }

/* The design draws a switch rather than using a checkbox — it is a picture
   of a setting, not a control, so it stays a <span>. */
.toggle {
  width: 44px; height: 22px;
  border: 2px solid currentColor;
  display: flex; padding: 2px;
  flex-shrink: 0;
}
.toggle--on  { justify-content: flex-end; }
.toggle--off { justify-content: flex-start; }
.toggle__dot { width: 14px; height: 14px; background: currentColor; }

/* --------------------------------------------------------------------------
   The limits list — "what it doesn't do"
   -------------------------------------------------------------------------- */

.limits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 0 64px;
  border-top: 3px solid var(--text-on-light);
}

.limit { display: flex; gap: 20px; padding: 30px 0; border-bottom: 1px solid var(--line-sand); }
.limit__dash { width: 22px; height: 6px; background: var(--accent); flex-shrink: 0; margin-top: 12px; }
.limit__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(22px, 2.2vw, 28px); letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-on-light);
  margin: 0 0 8px;
}
.limit__body { font-size: 16px; line-height: 1.6; color: var(--text-on-light-soft); margin: 0; max-width: 56ch; }

/* The reminders grid draws each item under its own heavy ink rule rather
   than sharing one list rule. Same family as .ruled, darker line. */
.ruled--ink { border-top-color: var(--text-on-light); padding-top: 24px; }

/* --------------------------------------------------------------------------
   Big rows — a display-face title beside its explanation

   Two columns on a wide screen, stacked on a narrow one. The Features page
   uses it for the Bangladesh list, the Pricing page for the credit rules.
   -------------------------------------------------------------------------- */

.bigrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 12px 40px;
  padding: 32px 0;
  align-items: baseline;
  border-bottom: 1px solid var(--line-sand);
}
.bigrow--on-dark { border-bottom-color: var(--line-dark); padding: 40px 0; }

/* The last row closes the list with the same heavy rule it opened with. */
.bigrow--last { border-bottom: 3px solid var(--text-on-light); }

.bigrow__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px); letter-spacing: 0.02em;
  text-transform: uppercase; margin: 0;
  color: var(--text-on-light);
}
.bigrow--on-dark .bigrow__title {
  font-size: clamp(26px, 3vw, 40px);
  color: var(--text-on-dark-strong);
}
.bigrow__body { font-size: 17px; line-height: 1.6; margin: 0; max-width: 62ch; color: var(--text-on-light-soft); }
.bigrow--on-dark .bigrow__body { max-width: 60ch; color: var(--text-on-dark); }

/* --------------------------------------------------------------------------
   Plan cards on a dark surface

   .tier was extracted from the landing page's pricing strip, which sits on
   a light section. The Pricing page runs the same three cards on the dark
   hero, so the surface colours flip while every measurement stays.
   -------------------------------------------------------------------------- */

.tier--dark {
  border: 3px solid var(--line-dark-strong);
  background: var(--ink-800);
  min-height: 0;
}
.tier--dark:hover { box-shadow: 6px 6px 0 var(--line-dark-strong); }
.tier--dark .tier__name  { color: var(--text-muted-dark); }
.tier--dark .tier__price { color: var(--text-on-dark-strong); }
.tier--dark .tier__per   { color: var(--text-muted-dark); }
.tier--dark .tier__list  { color: var(--text-on-dark-mid); margin-top: 28px; }
.tier--dark .tier__list li { border-left-color: var(--line-dark-strong); }

/* The featured card lifts out of the row on the pricing page. The grid it
   sits in carries the matching padding-top, so nothing is clipped. */
.tier--raised {
  background: var(--ink-ember);
  margin-top: -56px;
  min-height: 0;
}

.tier__desc { font-size: 16px; line-height: 1.55; margin: 24px 0 0; min-height: 50px; color: var(--text-on-dark); }
.tier--featured .tier__desc { color: var(--text-on-dark-mid); }

/* Outline CTA on a dark card — the dark twin of .btn--outline-ink. */
.btn--outline-dark {
  color: var(--text-on-dark-strong);
  border: 3px solid var(--line-dark-strong);
  font-size: 16px; letter-spacing: 0.05em;
  padding: 18px 20px;
}
.btn--outline-dark:hover { border-color: var(--accent); color: var(--accent); }

/* --------------------------------------------------------------------------
   SMS credit cards
   -------------------------------------------------------------------------- */

.credcard { border: 3px solid var(--text-on-light); background: var(--card-light); padding: clamp(32px, 4vw, 48px); }
.credcard--bn { border-color: var(--accent); background: #FFF4EE; }

.credcard__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 22px;
  font-family: var(--font-mono); font-size: 14px; font-weight: 700;
}
.credcard__label { letter-spacing: 0.16em; color: var(--text-on-light-soft); }
.credcard--bn .credcard__label { color: var(--accent-ink); }
.credcard__cost { color: var(--text-on-light); border: 2px solid var(--text-on-light); padding: 5px 12px; }
.credcard--bn .credcard__cost { color: var(--ink-900); background: var(--accent); border-color: var(--accent); padding: 7px 14px; }

/* The sample message, shown as the member would receive it. */
.credcard__sms {
  font-size: 16px; line-height: 1.6; color: var(--text-on-light);
  background: var(--sand-200); padding: 16px 18px; margin: 0 0 22px;
}
.credcard--bn .credcard__sms {
  font-family: var(--font-bn); font-size: 17px;
  background: var(--white); border: 1px solid #F3C9B6;
}
.credcard__sum { font-family: var(--font-mono); font-size: 15px; color: var(--text-on-light-soft); }
.credcard__sum b { font-size: clamp(28px, 3vw, 40px); font-weight: 700; color: var(--text-on-light); }
.credcard--bn .credcard__sum b { color: var(--accent-ink); }

/* --------------------------------------------------------------------------
   Plan comparison table

   Rendered as a flex grid rather than a <table> because that is what the
   design is: a grid of cells with a sticky header, not tabular data a
   screen reader should announce as rows and columns. Roles are set in the
   markup so it still reads as a table to assistive tech.

   NARROW SCREENS — the export solved this with React state and a window
   resize listener that re-rendered the whole table with one column. Here all
   three columns are always in the HTML, and below 720px a plan picker hides
   two of them with CSS. The picker is revealed by JS, so with no JS the
   table keeps all three columns and scrolls sideways instead of losing two
   thirds of its content to a dead button.
   -------------------------------------------------------------------------- */

.cmp__tabs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 3px solid var(--text-on-light);
  margin-bottom: 24px;
}
.cmp__tab {
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 700; letter-spacing: 0.1em;
  padding: 15px 8px;
  border: 0; cursor: pointer;
  background: var(--card-light); color: var(--text-on-light);
}
.cmp__tab[aria-selected="true"] { background: var(--ink-800); color: var(--text-on-dark-strong); }

/* Only ever shown below the breakpoint, and only once JS has armed it. */
.cmp__tabs { display: none; }
@media (max-width: 720px) {
  .cmp.is-selectable .cmp__tabs { display: grid; }
}

.cmp__scroll { overflow-x: auto; }

.cmp__table { border: 3px solid var(--text-on-light); background: var(--card-light); min-width: 520px; }

.cmp__head { display: flex; position: sticky; top: 62px; z-index: 5; background: var(--ink-800); }

.cmp__headcell { flex: 1; min-width: 0; padding: 18px 12px; text-align: center; background: var(--ink-800); }
.cmp__headcell--feature {
  flex: 2; text-align: left;
  font-family: var(--font-mono); font-size: 13px;
  letter-spacing: 0.14em; color: var(--text-muted-dark);
  padding: 18px 20px;
}
.cmp__headcell--on { background: var(--accent); }
.cmp__plan {
  font-family: var(--font-mono); font-size: 14px; font-weight: 700;
  letter-spacing: 0.14em; color: var(--text-on-dark-strong);
}
.cmp__headcell--on .cmp__plan { color: var(--ink-900); }
.cmp__price { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted-dark); margin-top: 4px; }
.cmp__headcell--on .cmp__price { color: var(--ink-900); }

.cmp__group {
  padding: 22px 20px 12px;
  border-top: 3px solid var(--text-on-light);
  font-family: var(--font-display); font-size: 20px;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-on-light);
  background: var(--sand-100);
}

.cmp__row { display: flex; align-items: stretch; border-top: 1px solid #E3D9CB; }

.cmp__label {
  flex: 2; min-width: 0; padding: 15px 20px;
  font-size: 16px; line-height: 1.45; font-weight: 500;
  color: var(--text-on-light);
}

.cmp__cell {
  flex: 1; min-width: 0; padding: 15px 12px;
  text-align: center;
  font-family: var(--font-mono); font-size: 15px; font-weight: 700;
  color: var(--text-on-light);
  display: flex; align-items: center; justify-content: center;
}
.cmp__cell--on  { background: #FFF1E9; }
.cmp__cell--yes { font-size: 20px; }
.cmp__cell--on.cmp__cell--yes { color: var(--accent-ink); }
.cmp__cell--no  { font-size: 18px; color: #B8AB9B; }

/* One plan at a time on a phone. Column 2 is the FEATURE label and is never
   hidden; the three plan columns are children 2, 3 and 4. */
@media (max-width: 720px) {
  .cmp.is-selectable .cmp__table { min-width: 0; }
  .cmp.is-selectable[data-plan="0"] .cmp__cell:nth-child(3),
  .cmp.is-selectable[data-plan="0"] .cmp__cell:nth-child(4),
  .cmp.is-selectable[data-plan="0"] .cmp__headcell:nth-child(3),
  .cmp.is-selectable[data-plan="0"] .cmp__headcell:nth-child(4),
  .cmp.is-selectable[data-plan="1"] .cmp__cell:nth-child(2),
  .cmp.is-selectable[data-plan="1"] .cmp__cell:nth-child(4),
  .cmp.is-selectable[data-plan="1"] .cmp__headcell:nth-child(2),
  .cmp.is-selectable[data-plan="1"] .cmp__headcell:nth-child(4),
  .cmp.is-selectable[data-plan="2"] .cmp__cell:nth-child(2),
  .cmp.is-selectable[data-plan="2"] .cmp__cell:nth-child(3),
  .cmp.is-selectable[data-plan="2"] .cmp__headcell:nth-child(2),
  .cmp.is-selectable[data-plan="2"] .cmp__headcell:nth-child(3) { display: none; }
}

/* --------------------------------------------------------------------------
   Blog

   The export's post page was a TYPOGRAPHIC SPECIMEN — it showed a paragraph,
   an h2, a list, a pull quote, an h3 and a note box with placeholder words,
   under a banner reading "LAYOUT TEMPLATE · NOT A PUBLISHED POST". The
   banner is gone and real Markdown renders in its place, which means that
   specimen had to become CSS: every rule below is the inline style the
   design gave that element, moved onto a .prose descendant selector so
   Parsedown's output lands on it without any classes in the Markdown.
   -------------------------------------------------------------------------- */

.post { max-width: 720px; margin: 0 auto; }

.backlink {
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--accent-ink);
}
.backlink:hover { color: var(--accent); }

.post__eyebrow {
  font-family: var(--font-mono); font-size: 14px;
  letter-spacing: 0.16em; color: var(--text-muted-light);
  margin: 40px 0 18px;
}
.post__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(42px, 5.6vw, 76px); line-height: 1;
  margin: 0 0 28px; color: var(--text-on-light);
  text-transform: uppercase; text-wrap: balance;
}
/* The standfirst — the description, set big. */
.post__stand {
  font-size: clamp(20px, 2vw, 24px); line-height: 1.55;
  color: var(--text-on-light); font-weight: 600; margin: 0 0 32px;
}
.post__meta {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  font-family: var(--font-mono); font-size: 14px; color: var(--text-muted-light);
  padding: 18px 0;
  border-top: 3px solid var(--text-on-light);
  border-bottom: 1px solid var(--line-sand);
  margin: 0 0 48px;
}

/* ---- The specimen, as rules ---- */

.prose { color: var(--text-on-light-soft); }
.prose p { font-size: 20px; line-height: 1.8; margin: 0 0 28px; }
.prose a { color: var(--accent-ink); text-decoration: underline; }
.prose a:hover { color: var(--accent); }
.prose strong { color: var(--text-on-light); }

.prose h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(28px, 3vw, 38px); letter-spacing: 0.02em;
  color: var(--text-on-light); margin: 64px 0 20px;
  text-transform: uppercase;
}
.prose h3 { font-size: 22px; font-weight: 800; color: var(--text-on-light); margin: 48px 0 14px; }

.prose ul, .prose ol { font-size: 20px; line-height: 1.8; margin: 0 0 28px; padding-left: 24px; }
.prose li { margin-bottom: 10px; }

.prose blockquote { margin: 48px 0; padding: 8px 0 8px 28px; border-left: 6px solid var(--accent); }
.prose blockquote p {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(26px, 2.8vw, 34px); line-height: 1.2;
  color: var(--text-on-light); margin: 0; text-transform: uppercase;
}

.prose img { display: block; margin: 40px 0; border: 3px solid var(--text-on-light); }

.prose code {
  font-family: var(--font-mono); font-size: 0.9em;
  background: var(--sand-200); padding: 2px 6px;
  color: var(--text-on-light);
}
.prose pre {
  background: var(--ink-800); color: var(--text-on-dark-soft);
  padding: 20px 22px; overflow-x: auto; margin: 32px 0;
  font-size: 15px; line-height: 1.6;
}
.prose pre code { background: none; color: inherit; padding: 0; }

.prose hr { border: 0; border-top: 3px solid var(--text-on-light); margin: 56px 0; }

/* The design's boxed aside. Raw HTML in a post does NOT survive — Parsedown
   runs with safe mode on, which escapes it — so a post writes
   "NOTE: …" at the start of a paragraph and posts_boxed_notes() in
   parts/posts.php turns it into this. */
.postnote { border: 3px solid var(--text-on-light); background: var(--card-light); padding: 24px 26px; margin: 48px 0; }
.postnote__label {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; color: var(--accent-ink); margin-bottom: 10px;
}
.postnote p { font-size: 18px; line-height: 1.7; color: #3E362F; margin: 0; }

/* The sign-off CTA under every post. */
.postcta {
  border-top: 3px solid var(--text-on-light);
  margin-top: 72px; padding-top: 36px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 24px; align-items: center;
}
.postcta__line {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1;
  color: var(--text-on-light); margin: 0; text-transform: uppercase;
}

/* ---- The index ---- */

/* The export only drew the empty state, so the list is built from the
   vocabulary the rest of the site already uses: a heavy rule, then one
   ruled row per post. */
.postlist { border-top: 3px solid var(--text-on-light); }

.postlist__item {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 8px 40px;
  padding: 36px 0;
  border-bottom: 1px solid var(--line-sand);
  align-items: baseline;
}
.postlist__date {
  font-family: var(--font-mono); font-size: 14px;
  letter-spacing: 0.12em; color: var(--text-muted-light);
}
.postlist__main { grid-column: span 2; min-width: 0; }
@media (max-width: 640px) { .postlist__main { grid-column: auto; } }

.postlist__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(26px, 3vw, 38px); line-height: 1.05;
  letter-spacing: 0.02em; text-transform: uppercase;
  margin: 0 0 10px;
}
.postlist__title a { color: var(--text-on-light); }
.postlist__title a:hover { color: var(--accent-ink); }
.postlist__desc { font-size: 17px; line-height: 1.6; color: var(--text-on-light-soft); margin: 0; max-width: 62ch; }

/* The empty state, kept exactly as the design drew it. */
.blogempty {
  border: 3px solid var(--text-on-light); background: var(--card-light);
  padding: clamp(40px, 6vw, 80px) clamp(28px, 5vw, 64px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 32px 64px; align-items: center;
}
.blogempty__count {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  letter-spacing: 0.16em; color: var(--accent-ink); margin-bottom: 14px;
}

/* A solid CTA on a light surface — hover drops the fill, as on the dark one. */
.btn--solid-light { background: var(--accent); color: var(--ink-900); border: 3px solid var(--accent); font-size: 17px; padding: 17px 34px; }
.btn--solid-light:hover { background: transparent; color: var(--accent-ink); }

/* Local-only warning strip for malformed post files. Never shown in
   production — see the guard in blog.php. */
.devwarn {
  border: 3px dashed var(--accent-ink); background: #FFF4EE;
  padding: 20px 24px; margin: 0 0 40px;
  font-family: var(--font-mono); font-size: 14px; line-height: 1.7;
  color: var(--accent-ink);
}

/* --------------------------------------------------------------------------
   Legal pages — the dark twin of .prose

   Privacy and Terms are the only two pages whose body copy sits on the dark
   ground, and they are structurally identical to each other: an eyebrow, a
   title, a draft notice, a lede, then numbered sections each opening with a
   heavy rule.
   -------------------------------------------------------------------------- */

.legal { max-width: 720px; margin: 0 auto; color: var(--text-on-dark); }

.legal__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(46px, 6vw, 80px); line-height: 0.98;
  margin: 0 0 32px; color: var(--text-on-dark-strong);
  text-transform: uppercase;
}

/* The notice that says a lawyer has not read this yet. It is the first
   thing on the page on purpose. */
.legal__draft {
  border: 3px solid var(--accent);
  background: var(--ink-800);
  padding: 22px 24px; margin: 0 0 56px;
}
.legal__draft-label {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  letter-spacing: 0.16em; color: var(--accent); margin-bottom: 8px;
}
.legal__draft p { font-size: 16px; line-height: 1.65; color: var(--text-on-dark-mid); margin: 0; }

.legal__lede { font-size: 19px; line-height: 1.75; color: var(--text-on-dark-mid); margin: 0 0 48px; }

.legal h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(26px, 3vw, 34px); letter-spacing: 0.02em;
  color: var(--text-on-dark-strong);
  margin: 56px 0 16px; text-transform: uppercase;
  border-top: 3px solid var(--line-dark); padding-top: 28px;
}
.legal p  { font-size: 18px; line-height: 1.75; margin: 0 0 16px; }
.legal ul { font-size: 18px; line-height: 1.75; margin: 0 0 16px; padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal strong { color: var(--text-on-dark-strong); }
.legal a { color: var(--accent); font-weight: 700; }
.legal a:hover { color: var(--accent-hover); }

.legal__foot {
  font-family: var(--font-mono); font-size: 14px; color: var(--text-faint-dark);
  margin: 64px 0 0; border-top: 1px solid var(--line-dark); padding-top: 20px;
}
.legal__foot a { color: var(--text-muted-dark); font-weight: 400; }
.legal__foot a:hover { color: var(--accent); }