/* ═══════════════════════════════════════════════════════════════
   Harifetam site — the whole stylesheet.

   Tokens are 1:1 with app/lib/core/theme/app_colors.dart. If a color here
   drifts from the app, the site stops looking like the product it sells,
   so every value below is copied, never invented.

   No framework, no build step, no external request: the fonts are the same
   TTFs the app bundles (app/assets/fonts), served from this origin. A CDN
   font is unreachable for a large share of Iranian users and is banned by
   org rule anyway (IRAN-FIRST.md).

   Two hard constraints this file lives under, both from site/nginx.conf:
     - `style-src 'self'` with no 'unsafe-inline' — so an inline style
       attribute in the HTML is silently DROPPED by the browser. Every
       rule has to live here, in a class.
     - `img-src 'self'` — so no data: URI backgrounds either. Every piece
       of art on this site is a gradient, a border or an inline <svg>.
   ═══════════════════════════════════════════════════════════════ */

/* ── Fonts ─────────────────────────────────────────────────────── */
/* TTF rather than woff2 on purpose: converting needs fontTools+brotli,
   which is a toolchain this repo does not carry. nginx gzips them instead
   (see site/nginx.conf), which recovers most of the difference. */
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lalezar';
  src: url('../fonts/Lalezar-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ────────────────────────────────────────────────────── */
:root {
  /* Surfaces (AppColors.bg / bgDeep / surface) */
  --bg: #0d1326;
  --bg-deep: #080d1c;
  --surface: #161e3a;

  /* Ink */
  --ink: #eef2ff;
  --ink-soft: #98a4c9;
  /* AppColors.inkFaint (#5d6890) nudged up. The app draws that value on
     lighter surfaces and at larger sizes; here it lands on --bg-deep at
     0.9rem, where it measures 3.5:1 and fails AA. This one clears 5.2:1
     and is the only deliberate departure from the app palette. */
  --ink-quiet: #7c88b0;

  /* Lines */
  --line: rgba(255, 255, 255, 0.1);
  --line-soft: rgba(255, 255, 255, 0.055);

  /* The two sides. This pair IS the product: one phone, one orange half,
     one blue half. It is the only decoration the page needs. */
  --p1: #ff6a3d;
  --p1-deep: #e24f24;
  --p2: #34a9ff;
  --p2-deep: #1f7fd6;

  /* Coin — the page's single "money and action" accent: the primary
     download button, the price, the VS mark. Nothing else. */
  --coin: #ffc23d;
  --coin-deep: #e09a12;
  --coin-hi: #ffe08a;
  --coin-ink: #3a2a00;

  /* Type: five steps, and only five. The old sheet had nine sizes inside
     one octave, which reads as accident rather than hierarchy. */
  --t-display: clamp(2.4rem, 9vw, 3.8rem);
  --t-title: clamp(1.55rem, 5.5vw, 2.1rem);
  --t-lead: clamp(1.08rem, 3.6vw, 1.28rem);
  --t-body: 1rem;
  --t-small: 0.9rem;

  /* Rhythm: one spacing scale, used everywhere. */
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2.5rem;
  --s5: 4rem;

  --radius: 16px;
  --radius-lg: 20px;
  --measure: 60ch;
  --shell: 58rem;
  --gutter: clamp(1.15rem, 5vw, 2rem);
}

/* ── Reset-ish ─────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

/* Column layout so a short page (404) still puts its footer on the bottom
   edge instead of leaving a stripe of --bg underneath it. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Vazirmatn', 'Tahoma', sans-serif;
  font-size: var(--t-body);
  line-height: 1.9;
  /* Persian text is read, not skimmed: the app locks tabular figures for the
     same reason (CLAUDE.md golden rule 4). */
  font-variant-numeric: tabular-nums;
  /* `anywhere` (the old value) breaks Persian words mid-letter. `break-word`
     only steps in for an unbreakable run, which here means an email or a
     package id. */
  overflow-wrap: break-word;
}

main {
  flex: 1 0 auto;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--p2);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

a:hover {
  color: var(--ink);
}

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

h1,
h2,
h3 {
  line-height: 1.4;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
}

/* Latin inside an RTL paragraph (a package id) has to be isolated or the
   surrounding punctuation jumps to the wrong end of it. */
code {
  font-family: inherit;
  font-size: 0.95em;
  direction: ltr;
  unicode-bidi: isolate;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 0.05em 0.4em;
  overflow-wrap: anywhere;
}

/* ── Layout shell ──────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.prose {
  max-width: var(--measure);
}

/* Visually hidden until focused. Clip instead of an off-screen offset,
   which would sit outside the page box and can add stray scroll in RTL. */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  padding: 0.6rem 1rem;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}

.skip-link:focus {
  position: static;
  display: inline-block;
  width: auto;
  height: auto;
  clip-path: none;
  z-index: 10;
}

/* One section = one idea. No hairline between every pair: the only two
   bands on the page are the hero and the duel grid, and the space itself
   does the separating everywhere else. */
.section {
  padding-block: clamp(3.5rem, 10vw, 5.5rem);
}

.band {
  background: var(--bg-deep);
  border-block: 1px solid var(--line-soft);
}

.section__head {
  max-width: 34rem;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 5vw, 3rem);
  text-align: center;
}

.section__head h2 {
  font-family: 'Lalezar', 'Vazirmatn', sans-serif;
  font-weight: 400;
  font-size: var(--t-title);
}

.section__head p {
  margin-top: var(--s1);
  color: var(--ink-soft);
}

/* ── Hero ──────────────────────────────────────────────────────── */
.hero {
  text-align: center;
  padding-block: clamp(3rem, 11vw, 5.5rem) clamp(3rem, 9vw, 4.5rem);
  border-bottom: 1px solid var(--line-soft);
  /* A warm core inside a cool halo: the two sides again, this time as
     light. Pure CSS, so the page stays request-free. */
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(255, 106, 61, 0.14), transparent 60%),
    radial-gradient(ellipse 130% 75% at 50% -5%, rgba(52, 169, 255, 0.13), transparent 62%),
    var(--bg-deep);
}

/* The mark: the product itself, drawn in CSS. A phone lying between two
   people, the far half turned 180°, a coin on the seam. Three seconds. */
.phone {
  position: relative;
  width: clamp(9.5rem, 42vw, 14rem);
  aspect-ratio: 100 / 196;
  margin-inline: auto;
  padding: 0.85rem 0.5rem;
  border-radius: 1.7rem;
  background: #0a1024;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14),
    0 22px 50px rgba(0, 0, 0, 0.55);
}

/* Speaker slot and home bar: without them the frame reads as a card. */
.phone::before,
.phone::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  margin-inline: auto;
  height: 0.22rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.phone::before {
  top: 0.3rem;
  width: 2.2rem;
}

.phone::after {
  bottom: 0.28rem;
  width: 3.4rem;
}

.phone__screen {
  position: relative;
  height: 100%;
  border-radius: 1rem;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr 1fr;
}

.phone__half {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
}

/* The far half is the rotated one, exactly as in the app. */
.phone__half--far {
  background: linear-gradient(180deg, var(--p2-deep), var(--p2));
  transform: rotate(180deg);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}

.phone__half--near {
  background: linear-gradient(180deg, var(--p1), var(--p1-deep));
}

.phone__avatar {
  font-size: clamp(1.5rem, 6vw, 2rem);
  line-height: 1;
}

.phone__name {
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.94);
}

/* `inset: 0; margin: auto` centers on both axes with no transform, which
   keeps it honest under dir="rtl". */
.phone__vs {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(2.1rem, 9vw, 2.7rem);
  height: clamp(2.1rem, 9vw, 2.7rem);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--coin-hi), var(--coin) 55%, var(--coin-deep));
  color: var(--bg-deep);
  font-weight: 700;
  font-size: clamp(0.78rem, 3.4vw, 0.95rem);
  line-height: 1;
  box-shadow:
    0 0 0 0.18rem rgba(8, 13, 28, 0.85),
    0 6px 16px rgba(0, 0, 0, 0.45);
}

.hero h1 {
  font-family: 'Lalezar', 'Vazirmatn', sans-serif;
  font-weight: 400;
  font-size: var(--t-display);
  line-height: 1.25;
  margin-top: clamp(1.4rem, 4vw, 2rem);
}

.hero__lead {
  margin-top: 0.3rem;
  font-size: var(--t-lead);
  font-weight: 700;
}

.hero__intro {
  max-width: 32rem;
  margin: var(--s2) auto 0;
  color: var(--ink-soft);
}

/* Four claims, one line, zero pills. The gap is the separator: a printed
   "·" would strand itself at the end of a wrapped line. */
.facts {
  list-style: none;
  margin: clamp(1.4rem, 4vw, 1.9rem) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.1rem 1.6rem;
  font-size: var(--t-small);
  color: var(--ink-soft);
}

/* ── Buttons ───────────────────────────────────────────────────── */
.stores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: clamp(1.6rem, 5vw, 2.2rem);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  min-width: 13rem;
  padding: 0.85rem 1.6rem;
  border-radius: 0.85rem;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 1.02rem;
  text-decoration: none;
}

.btn--primary {
  background: linear-gradient(180deg, var(--coin), var(--coin-deep));
  color: var(--coin-ink);
}

.btn--primary:hover {
  color: var(--coin-ink);
  filter: brightness(1.07);
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.045);
  border-color: var(--line);
  color: var(--ink);
}

.btn--ghost:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
}

.stores__note {
  max-width: 30rem;
  margin: var(--s3) auto 0;
  font-size: var(--t-small);
  line-height: 1.75;
  color: var(--ink-quiet);
}

/* ── How it works: three steps, no boxes ───────────────────────── */
/* Three steps want one column or three, never two: `auto-fit` kept landing
   on 2+1 at tablet widths. The whole page turns on the one breakpoint. */
.steps {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 52rem;
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  grid-template-columns: 1fr;
}

@media (min-width: 46rem) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.step__n {
  display: block;
  font-family: 'Lalezar', 'Vazirmatn', sans-serif;
  font-size: 2.3rem;
  line-height: 1;
  color: var(--p1);
  margin-bottom: 0.6rem;
}

.step h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.step p {
  color: var(--ink-soft);
}

/* ── The nine duels: one 3×3 block, one surface, zero accents ───── */
.duels {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 46rem;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Nine cards over two columns leaves a lone one on the last row and a
   ragged bottom edge; the ninth takes the whole row instead. Three columns
   divide nine exactly, so there it goes back to a normal cell. */
.duel:last-child {
  grid-column: 1 / -1;
}

@media (min-width: 46rem) {
  .duels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .duel:last-child {
    grid-column: auto;
  }
}

/* A column, so the tier line can be pushed to the bottom edge: a two-line
   tagline in one card must not leave its neighbours' tiers floating. */
.duel {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 1.1rem 1rem 1.15rem;
}

.duel__icon {
  display: block;
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 0.55rem;
}

.duel h3 {
  font-size: 1.02rem;
  font-weight: 700;
}

.duel p {
  margin-top: 0.15rem;
  font-size: var(--t-small);
  line-height: 1.75;
  color: var(--ink-soft);
}

/* The tier is a fact, not a badge. Three pills in three colors inside one
   grid was the loudest thing on the old page. */
.duel__tier {
  display: block;
  margin-top: auto;
  padding-top: 0.6rem;
  font-size: var(--t-small);
  color: var(--ink-quiet);
}

.duels__note {
  max-width: 34rem;
  margin: clamp(1.75rem, 4vw, 2.25rem) auto 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--t-small);
  line-height: 1.8;
}

/* ── Feature list: hairline rows, two columns, no fills ─────────── */
.feats {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 52rem;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: clamp(1.5rem, 4vw, 3rem);
}

@media (min-width: 46rem) {
  .feats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.feats li {
  padding-block: 1.05rem;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-soft);
}

.feats b {
  display: block;
  color: var(--ink);
  font-weight: 700;
}

/* ── The one paid thing ────────────────────────────────────────── */
.offer {
  max-width: 30rem;
  margin-inline: auto;
  padding: clamp(1.6rem, 5vw, 2.25rem);
  text-align: center;
  border: 1px solid rgba(255, 194, 61, 0.28);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 194, 61, 0.07), rgba(255, 255, 255, 0.02));
}

.offer h3 {
  font-size: 1.1rem;
  font-weight: 700;
}

.offer__price {
  display: block;
  margin-top: 0.35rem;
  font-family: 'Lalezar', 'Vazirmatn', sans-serif;
  font-size: clamp(2rem, 7vw, 2.5rem);
  line-height: 1.25;
  color: var(--coin);
}

.offer__once {
  display: block;
  font-size: var(--t-small);
  color: var(--ink-soft);
}

/* The list keeps its start alignment but the block itself is centred on the
   card, so four short lines do not sit against one edge of a wide card. */
.offer ul {
  list-style: none;
  margin: var(--s3) auto 0;
  padding: 0;
  width: fit-content;
  max-width: 100%;
  display: grid;
  gap: 0.55rem;
  text-align: start;
}

.offer li {
  position: relative;
  padding-inline-start: 1.4rem;
  color: var(--ink-soft);
}

.offer li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0.25rem;
  top: 0.82em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--coin);
}

.offer__fine {
  margin-top: var(--s3);
  padding-top: var(--s2);
  border-top: 1px solid rgba(255, 194, 61, 0.18);
  font-size: var(--t-small);
  line-height: 1.75;
  color: var(--ink-quiet);
  text-align: start;
}

.coins-note {
  max-width: 34rem;
  margin: clamp(1.75rem, 4vw, 2.25rem) auto 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--t-small);
  line-height: 1.8;
}

/* ── Closing honesty strip ─────────────────────────────────────── */
.strip {
  max-width: 42rem;
  margin-inline: auto;
  padding: clamp(1.4rem, 4vw, 1.9rem) clamp(1.25rem, 4vw, 1.9rem);
  border: 1px solid rgba(52, 169, 255, 0.22);
  border-inline-start: 3px solid var(--p2);
  border-radius: var(--radius);
  background: rgba(52, 169, 255, 0.05);
}

.strip h2 {
  font-size: var(--t-lead);
  font-weight: 700;
  color: var(--p2);
  margin-bottom: 0.6rem;
}

.strip p {
  color: var(--ink-soft);
}

.strip p + p {
  margin-top: var(--s2);
}

/* ── Legal pages ───────────────────────────────────────────────── */
.topbar {
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line-soft);
}

.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding-block: 0.8rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
  text-decoration: none;
  font-family: 'Lalezar', 'Vazirmatn', sans-serif;
  font-size: 1.2rem;
}

.brand img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.topbar__back {
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}

.topbar__back:hover {
  color: var(--ink);
}

.legal {
  padding-block: clamp(2.5rem, 7vw, 3.75rem) clamp(3rem, 8vw, 4.5rem);
}

.legal h1 {
  font-family: 'Lalezar', 'Vazirmatn', sans-serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 7vw, 2.6rem);
  line-height: 1.3;
}

.stamp {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--t-small);
  color: var(--ink-quiet);
}

.legal .intro {
  margin-top: var(--s3);
  color: var(--ink);
}

/* No rule above every heading: the generous top margin already says
   "new section", and eighteen hairlines said "settings screen". */
.legal h2 {
  margin: clamp(2.25rem, 6vw, 3rem) 0 0.7rem;
  font-size: var(--t-lead);
  font-weight: 700;
  line-height: 1.55;
  color: var(--ink);
}

.legal p {
  margin-bottom: var(--s2);
  color: var(--ink-soft);
}

.legal p:last-child {
  margin-bottom: 0;
}

.legal ul {
  list-style: none;
  margin: 0 0 var(--s2);
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.legal li {
  position: relative;
  padding-inline-start: 1.35rem;
  color: var(--ink-soft);
}

.legal li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0.3rem;
  top: 0.85em;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--p2);
  opacity: 0.7;
}

.legal b {
  color: var(--ink);
  font-weight: 700;
}

.callout {
  margin-top: var(--s3);
  padding: clamp(1.1rem, 3.5vw, 1.4rem) clamp(1.1rem, 3.5vw, 1.5rem);
  border: 1px solid rgba(255, 194, 61, 0.22);
  border-inline-start: 3px solid var(--coin);
  border-radius: var(--radius);
  background: rgba(255, 194, 61, 0.05);
}

.callout p {
  margin-bottom: 0;
  color: var(--ink);
}

/* A key/value table that stays readable at 360px: the wrapper scrolls, the
   page never does. */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  margin-bottom: var(--s3);
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 26rem;
  font-size: var(--t-small);
}

caption {
  text-align: start;
  padding: 0.9rem 1rem;
  color: var(--ink-quiet);
  line-height: 1.75;
}

th,
td {
  text-align: start;
  padding: 0.9rem 1rem;
  border-top: 1px solid var(--line-soft);
  vertical-align: top;
  line-height: 1.8;
}

th {
  width: 1%;
  white-space: nowrap;
  color: var(--ink);
  font-weight: 700;
  background: rgba(255, 255, 255, 0.03);
}

td {
  color: var(--ink-soft);
}

.th-note {
  display: block;
  font-weight: 400;
  color: var(--ink-quiet);
}

/* ── 404 ───────────────────────────────────────────────────────── */
.notfound {
  padding-block: clamp(4rem, 14vw, 7rem);
  text-align: center;
}

.notfound h1 {
  font-family: 'Lalezar', 'Vazirmatn', sans-serif;
  font-weight: 400;
  font-size: var(--t-display);
  line-height: 1.2;
}

/* The split motif at its smallest: one seam, two sides. */
.split-rule {
  width: 7rem;
  height: 5px;
  margin: var(--s3) auto;
  border-radius: 999px;
  background: linear-gradient(to left, var(--p1) 0 50%, var(--p2) 50% 100%);
}

.notfound p {
  color: var(--ink-soft);
}

.notfound .foot__links {
  margin-top: var(--s3);
}

/* ── Footer ────────────────────────────────────────────────────── */
.foot {
  background: var(--bg-deep);
  border-top: 1px solid var(--line-soft);
  padding-block: var(--s4) var(--s5);
  text-align: center;
  font-size: var(--t-small);
  color: var(--ink-quiet);
}

.foot__links {
  list-style: none;
  margin: 0 0 var(--s2);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.5rem;
}

.foot__links a {
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 700;
}

.foot__links a:hover {
  color: var(--ink);
}

/* ── Motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .phone {
    animation: float 7s ease-in-out infinite;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-0.5rem);
  }
}

/* ── Narrow screens ────────────────────────────────────────────── */
/* Under ~544px the two-column table stops being a table and becomes label
   over value. Scrolling it sideways technically works, but it hides the
   column that carries the answer, which on a privacy page is the point. */
@media (max-width: 34rem) {
  .table-scroll {
    overflow-x: visible;
  }

  table {
    min-width: 0;
  }

  /* `caption` has to come along: left as table-caption inside a block table
     it grows an anonymous table wrapper and shrinks to one word per line. */
  table,
  caption,
  tbody,
  tr,
  th,
  td {
    display: block;
  }

  th {
    width: auto;
    white-space: normal;
    background: transparent;
    padding-bottom: 0;
  }

  td {
    border-top: 0;
    padding-top: 0.3rem;
  }
}

/* ── Narrow phones ─────────────────────────────────────────────── */
@media (max-width: 26rem) {
  .btn {
    width: 100%;
    min-width: 0;
  }
}

/* ── Landing refresh (owner pass, 2026-07-29) ─────────────────────
   Additions only; nothing above is redefined except the two deliberate
   overrides marked below. */

/* Title picks up the product's two sides plus the coin between them.
   Deliberate override of the plain-ink h1 above. */
.hero h1 {
  background: linear-gradient(105deg, var(--p1) 15%, var(--coin) 50%, var(--p2) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Store buttons before launch: real buttons, honest badge, no apology
   paragraph. Swap to live <a> links on launch day (comment in index.html). */
.btn--soon {
  position: relative;
  cursor: default;
  user-select: none;
}

.soon {
  position: absolute;
  top: -0.6rem;
  inset-inline-start: 1rem;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.7;
  padding: 0 0.6rem;
  border-radius: 999px;
  background: var(--bg-deep);
  color: var(--coin);
  border: 1px solid rgba(255, 194, 61, 0.5);
}

/* Tier facts, colour-coded but still text (no pills — see .duel__tier).
   Green = yours already, gold = the coin economy, purple = pro. */
.duel__tier--free {
  color: #3ddc84;
}

.duel__tier--coin {
  color: var(--coin);
}

.duel__tier--pro {
  color: #a378ff;
}

/* The bragging strip is the orange twin of the blue honesty strip. */
.strip--kari {
  border-color: rgba(255, 106, 61, 0.25);
  border-inline-start-color: var(--p1);
  background: rgba(255, 106, 61, 0.05);
}

.strip--kari h2 {
  color: var(--p1);
}