/* ============================================================
   Chill STILL App — page-specific styles
   Hero · concept · features grid · screenshot gallery · specs
   ============================================================ */

/* ---- HERO ------------------------------------------------- */
.app-hero {
  padding: var(--space-9) 0 var(--space-8);
  background:
    radial-gradient(60% 50% at 0% 0%, rgba(131, 189, 236, 0.18) 0%, transparent 60%),
    radial-gradient(50% 40% at 100% 100%, rgba(247, 190, 182, 0.14) 0%, transparent 60%),
    var(--bg-primary);
  overflow: hidden;
}
.app-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
}
.app-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(40px, 5.6vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-4);
  max-width: 18ch;
}
.app-hero__sub {
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--text-muted);
  max-width: 50ch;
  margin: 0 0 var(--space-5);
}
.app-hero__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.app-hero__visual {
  /* Cap hero mockup so it stays proportional on wide screens too. */
  max-width: 280px;
  margin-inline: auto;
}
.app-hero__visual img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 30px 60px rgba(14, 19, 32, 0.18));
  transform: rotate(-2deg);
  border-radius: var(--radius-lg);
}
@media (max-width: 1023px) {
  .app-hero { padding: var(--space-7) 0 var(--space-6); }
  .app-hero__inner { grid-template-columns: 1fr; gap: var(--space-5); }
  /* Hero mockup on tablet — proportional to the wider stage. */
  .app-hero__visual { max-width: 240px; }
  .app-hero__visual img { max-height: 380px; object-fit: contain; }
}
@media (max-width: 599px) {
  /* Phone — the mockup is the visual anchor of the section. Was
     110px (too small to read the UI). Bump to ~58% of the 375px
     viewport so the screen actually communicates. */
  .app-hero__visual { max-width: 220px; }
  .app-hero__visual img { max-height: 340px; }
}
@media (max-width: 380px) {
  .app-hero__visual { max-width: 200px; }
  .app-hero__visual img { max-height: 310px; }
}

/* ---- CONCEPT ---------------------------------------------- */
.app-concept .section-head__title {
  font-family: var(--font-serif);
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.1;
  margin: var(--space-3) 0 var(--space-5);
  max-width: 22ch;
}
.app-concept__body {
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--text-primary);
  max-width: 56ch;
}

/* ---- FEATURES grid (2x3 on desktop, stacked on mobile) ---- */
.app-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 1023px) {
  .app-features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .app-features { grid-template-columns: 1fr; }
}

.app-feature {
  padding: var(--space-5);
  background: var(--bg-primary);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.app-feature:hover {
  border-color: var(--accent-hover);
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}
/* Feature media area: a wide image slot at the top of each card.
   Was 56×56 with object-fit:cover which made iPhone screenshots barely visible. */
.app-feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 180px;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(131, 189, 236, 0.10), rgba(247, 190, 182, 0.08));
  margin-bottom: var(--space-4);
  overflow: hidden;
}
.app-feature__icon img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
@media (max-width: 1023px) { .app-feature__icon { height: 200px; } }
/* At <= 639px the feature grid collapses to 1 column, so each card
   gets the full container width. That means the portrait-aspect
   mockup is height-constrained — bump the container tall enough
   that the mockup renders at ~200px wide (object-fit: contain). */
@media (max-width: 639px)  { .app-feature__icon { height: 360px; padding: var(--space-3); } }
@media (max-width: 380px)  { .app-feature__icon { height: 320px; } }
.app-feature__sub {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-hover);
  margin: 0 0 var(--space-2);
}
.app-feature__title {
  font-family: var(--font-serif);
  font-size: var(--text-h4);
  line-height: var(--lh-h4);
  margin: 0 0 var(--space-3);
}
.app-feature__body {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--text-muted);
  margin: 0;
}

/* ---- SCREENSHOTS gallery ---------------------------------- */
.app-preview {
  background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-elevated) 100%);
}
.app-shots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5) var(--space-4);
}
@media (max-width: 1023px) { .app-shots { grid-template-columns: repeat(2, 1fr); } }
/* Keep 2 columns on phones too — going to 1 column made each mockup huge */
@media (max-width: 479px)  { .app-shots { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } }

.app-shot {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.app-shot img {
  width: 100%;
  height: auto;
  max-width: 240px;
  display: block;
  filter: drop-shadow(0 24px 48px rgba(14, 19, 32, 0.14));
  transition: transform var(--dur) var(--ease);
}
.app-shot:hover img { transform: translateY(-4px); }
.app-shot__caption {
  margin-top: var(--space-3);
  font-size: var(--text-small);
  line-height: var(--lh-small);
  color: var(--text-muted);
  max-width: 28ch;
}
/* Mobile: shrink mockups so they don't overwhelm the column */
@media (max-width: 1023px) { .app-shot img { max-width: 180px; } }
@media (max-width: 479px)  { .app-shot img { max-width: 140px; } }
.app-shot__caption { font-size: var(--text-micro); }

/* ---- SPECS list ------------------------------------------- */
.app-specs {
  background: var(--bg-elevated);
}
.app-specs__list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.app-specs__row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 2.4fr;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}
.app-specs__row dt {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-soft);
}
.app-specs__row dd {
  margin: 0;
  font-size: var(--text-body);
  color: var(--text-primary);
  font-feature-settings: "tnum";
}
@media (max-width: 639px) {
  .app-specs__row { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* ---- PROMISE ---------------------------------------------- */
.app-promise {
  text-align: center;
  background: var(--bg-primary);
}
.app-promise__title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.15;
  margin: 0 0 var(--space-3);
}
.app-promise__body {
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--text-muted);
  max-width: 56ch;
  margin: 0 auto;
}

/* ---- FINAL CTA -------------------------------------------- */
.app-cta {
  padding: var(--space-9) 0 var(--space-10);
  text-align: center;
  background: radial-gradient(60% 50% at 50% 0%, rgba(131, 189, 236, 0.20) 0%, transparent 60%);
}
.app-cta__title {
  font-family: var(--font-serif);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-5);
}
.app-cta__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* ---- Han / JP font adjustments ---------------------------- */
html[lang="zh-Hant"] .app-hero__title,
html[lang="zh-Hant"] .app-concept .section-head__title,
html[lang="zh-Hant"] .app-feature__title,
html[lang="zh-Hant"] .app-promise__title,
html[lang="zh-Hant"] .app-cta__title { font-family: var(--font-han); font-weight: 700; }

html[lang="ja"] .app-hero__title,
html[lang="ja"] .app-concept .section-head__title,
html[lang="ja"] .app-feature__title,
html[lang="ja"] .app-promise__title,
html[lang="ja"] .app-cta__title { font-family: var(--font-jp); font-weight: 700; letter-spacing: 0.01em; }

html[lang="zh-Hant"] .app-hero__title,
html[lang="ja"] .app-hero__title { max-width: 16ch; }

/* Hero headline (still-app) — CJK headline tuning.
   - zh-Hant: "編寫屬於你的寧靜。" is short → keep on a single line.
   - ja: "自分だけの静けさを、作曲する。" is longer → JSON contains a literal \n
     after the 、 so the headline reads as TWO lines. `pre-line` honours that
     newline while still preventing further internal wrapping per line. */
html[lang="zh-Hant"] [data-i18n="stillApp.hero.headline"] {
  white-space: nowrap !important;
  max-width: none !important;
  font-size: clamp(22px, 4.6vw, 60px) !important;
  letter-spacing: -0.02em !important;
}
html[lang="ja"] [data-i18n="stillApp.hero.headline"] {
  /* `pre` honours the \n after the 、 AND prevents either line from
     wrapping internally (which was happening on narrower columns). */
  white-space: pre !important;
  max-width: none !important;
  font-size: clamp(18px, 3.6vw, 48px) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
}

/* Concept title — single short line in every language.
   EN: "Hardware is half the story."
   ZH: "硬體，只是故事的一半。"
   JA: "ハードウェアは、物語の半分。" */
[data-i18n="stillApp.concept.title"] {
  white-space: nowrap !important;
  max-width: none !important;
  font-size: clamp(20px, 4vw, 52px) !important;
  letter-spacing: -0.01em !important;
}

/* ============================================================
   SUBSCRIPTION PLANS — three-card pricing grid
   ============================================================ */
.app-plans .section-head__title {
  font-family: var(--font-serif);
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin: 0 auto var(--space-3);
}
html[lang="zh-Hant"] .app-plans .section-head__title { font-family: var(--font-han); }
html[lang="ja"]      .app-plans .section-head__title { font-family: var(--font-jp); }

.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  align-items: stretch;
  max-width: 1100px;
  margin: var(--space-7) auto 0;
}
@media (max-width: 1023px) { .plans-grid { grid-template-columns: 1fr; max-width: 480px; } }

.plan-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-5);
  background: var(--bg-primary);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.plan-card:hover {
  border-color: var(--accent-hover);
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}

.plan-card--featured {
  border-color: var(--color-chill-blue);
  background:
    linear-gradient(135deg, rgba(131, 189, 236, 0.10), rgba(247, 190, 182, 0.04)),
    var(--bg-primary);
  box-shadow: var(--shadow-soft);
}
.plan-card--featured:hover {
  border-color: var(--accent-hover);
  transform: translateY(-5px);
}

.plan-card__name {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-hover);
  margin: 0 0 var(--space-3);
}
.plan-card__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 var(--space-3);
}
.plan-card__amount {
  font-family: var(--font-serif);
  font-size: clamp(36px, 4.6vw, 56px);
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.plan-card__period {
  font-size: var(--text-small);
  color: var(--text-muted);
  font-weight: 500;
}
.plan-card__tagline {
  font-size: var(--text-body);
  font-style: italic;
  color: var(--accent-hover);
  margin: 0 0 var(--space-4);
}
html[lang="zh-Hant"] .plan-card__tagline,
html[lang="ja"]      .plan-card__tagline { font-style: normal; }

.plan-card__features {
  list-style: none;
  margin: 0;
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--line-soft);
  font-size: var(--text-small);
  line-height: var(--lh-small);
  color: var(--text-primary);
}
.plan-card__features li {
  position: relative;
  padding-left: var(--space-4);
  margin-bottom: var(--space-2);
}
.plan-card__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-hover);
  font-weight: 800;
  font-size: 13px;
}

/* ============================================================
   REVENUE CALCULATOR — year selector pills
   ============================================================ */
.rev-year {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.rev-year__label {
  font-size: var(--text-small);
  color: var(--text-muted);
  font-weight: 500;
}
.rev-year__choices {
  display: inline-flex;
  background: var(--bg-elevated);
  padding: 3px;
  border-radius: var(--radius-pill);
  gap: 2px;
}
.rev-year__btn {
  font: inherit;
  font-size: var(--text-small);
  font-weight: 600;
  padding: 6px 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.rev-year__btn:hover { color: var(--text-primary); }
.rev-year__btn.is-active {
  background: var(--bg-primary);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(14, 19, 32, 0.08);
}

/* ============================================================
   REVENUE SHARE SECTION
   Goal: clear hierarchy, calm spacing, easy to scan.
   Vertical stack of blocks; each block has its own eyebrow + title.
   ============================================================ */

.app-revenue {
  background: var(--bg-elevated);
}
.app-revenue .section-head { margin-bottom: var(--space-7); }
.app-revenue .section-head__title {
  font-family: var(--font-serif);
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin: 0 auto var(--space-3);
}
html[lang="zh-Hant"] .app-revenue .section-head__title,
html[lang="zh-Hant"] .rev-active__title,
html[lang="zh-Hant"] .rev-calc__title,
html[lang="zh-Hant"] .rev-compare__title,
html[lang="zh-Hant"] .rev-payout__title,
html[lang="zh-Hant"] .rev-cta__title { font-family: var(--font-han); }
html[lang="ja"] .app-revenue .section-head__title,
html[lang="ja"] .rev-active__title,
html[lang="ja"] .rev-calc__title,
html[lang="ja"] .rev-compare__title,
html[lang="ja"] .rev-payout__title,
html[lang="ja"] .rev-cta__title { font-family: var(--font-jp); letter-spacing: 0.01em; }

/* ---- Vertical rhythm between sub-blocks ---- */
.app-revenue > .container > * + * { margin-top: var(--space-8); }

/* ============================================================
   01. Revenue streams — 2×2 numbered grid
   ============================================================ */
.rev-streams {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (max-width: 767px) { .rev-streams { grid-template-columns: 1fr; } }

.rev-card {
  position: relative;
  padding: var(--space-5);
  background: var(--bg-primary);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.rev-card:hover {
  border-color: var(--accent-hover);
  transform: translateY(-2px);
}
.rev-card__num {
  display: inline-block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--accent-hover);
  margin-bottom: var(--space-3);
}
.rev-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  margin: 0 0 var(--space-3);
}
html[lang="zh-Hant"] .rev-card__title { font-family: var(--font-han); }
html[lang="ja"]      .rev-card__title { font-family: var(--font-jp); }

.rev-card__rate {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-chill-blue);
  color: #0E1320;
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-3);
}
.rev-card__body {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--text-muted);
  margin: 0;
}

/* ============================================================
   02. Active subscriber pool — explainer + formula card
   ============================================================ */
.rev-active {
  max-width: 760px;
  margin-inline: auto;
  text-align: left;
}
.rev-active .eyebrow { display: block; margin-bottom: var(--space-3); }
.rev-active__title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.12;
  margin: 0 0 var(--space-5);
  max-width: 22ch;
}
.rev-active__body {
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--text-primary);
  margin: 0 0 var(--space-4);
  max-width: 60ch;
}
.rev-active__body:last-of-type { margin-bottom: var(--space-5); }

.rev-formula {
  display: block;
  margin: 0;
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(135deg, rgba(131, 189, 236, 0.18), rgba(247, 190, 182, 0.10));
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-primary);
  white-space: pre-wrap;
  overflow-x: auto;
}
.rev-formula code {
  font: inherit;
  background: transparent;
  padding: 0;
  display: block;
}
.rev-formula__footnote {
  margin: var(--space-3) 0 0;
  padding: 0;
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
  color: var(--text-soft);
  max-width: 64ch;
}

/* The Chinese f3 title "編寫屬於你的寧靜" must stay on one line.
   Aggressively small font + nowrap + word-break suppression. */
html[lang="zh-Hant"] [data-i18n="stillApp.features.f3.title"],
html[lang="zh-Hant"] h3.app-feature__title[data-i18n="stillApp.features.f3.title"] {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  font-size: clamp(11px, 1.4vw, 15px) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.3 !important;
}

/* ============================================================
   03. Scenarios table + interactive calculator
   ============================================================ */
.rev-calc {
  max-width: 880px;
  margin-inline: auto;
}
.rev-calc .eyebrow { display: block; margin-bottom: var(--space-3); }
.rev-calc__title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.12;
  margin: 0 0 var(--space-5);
}

/* Table — shared styling */
.rev-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
  background: var(--bg-primary);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.rev-table thead { background: var(--bg-elevated); }
.rev-table th {
  text-align: left;
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-soft);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
}
.rev-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-primary);
}
.rev-table tbody tr:last-child td { border-bottom: 0; }
.rev-table td:not(:first-child) { font-variant-numeric: tabular-nums; }

/* Calculator block */
.rev-interactive {
  position: relative;
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--bg-primary);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.rev-interactive__currency {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-micro);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.rev-interactive__title {
  font-family: var(--font-serif);
  font-size: var(--text-h4);
  line-height: 1.2;
  margin: 0 0 var(--space-4);
  /* Make room for the absolute-positioned USD pill in the top-right
     so titles like "Or estimate your own." never collide with it. */
  padding-right: 56px;
}
html[lang="zh-Hant"] .rev-interactive__title { font-family: var(--font-han); }
html[lang="ja"]      .rev-interactive__title { font-family: var(--font-jp); }

.rev-interactive__controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
@media (max-width: 639px) { .rev-interactive__controls { grid-template-columns: 1fr; } }

.rev-slider {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--space-2);
}
.rev-slider__label {
  grid-column: 1;
  font-size: var(--text-small);
  color: var(--text-muted);
  font-weight: 500;
}
.rev-slider__value {
  grid-column: 2;
  font-size: var(--text-body);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent-hover);
}
.rev-slider input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--bg-elevated);
  border-radius: 999px;
  outline: none;
  margin-top: var(--space-2);
}
.rev-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-chill-blue);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(14, 19, 32, 0.20);
  cursor: pointer;
}
.rev-slider input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-chill-blue);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(14, 19, 32, 0.20);
  cursor: pointer;
}

.rev-interactive__result {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, rgba(131, 189, 236, 0.15), rgba(247, 190, 182, 0.10));
  margin: 0 0 var(--space-3);
}
.rev-interactive__result-label {
  font-size: var(--text-small);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
}
.rev-interactive__result-value {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  color: var(--accent-hover);
  font-variant-numeric: tabular-nums;
}
.rev-interactive__note {
  font-size: var(--text-micro);
  color: var(--text-soft);
  margin: 0;
  line-height: var(--lh-micro);
}

/* ============================================================
   04. Comparison table — STILL rows highlighted
   ============================================================ */
.rev-compare {
  max-width: 880px;
  margin-inline: auto;
}
.rev-compare .eyebrow { display: block; margin-bottom: var(--space-3); }
.rev-compare__title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.12;
  margin: 0 0 var(--space-5);
}
.rev-table--compare td:nth-child(1) { font-weight: 600; }
.rev-table__row--still {
  background: linear-gradient(90deg, rgba(131, 189, 236, 0.12), transparent);
}
.rev-table__row--still td { font-weight: 700; color: var(--text-primary); }
.rev-table__row--still td:not(:first-child) { color: var(--accent-hover); }
.rev-compare__note {
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
  color: var(--text-soft);
  margin: var(--space-3) 0 0;
}

/* ============================================================
   05. Payout mechanics — tiers table + safety + rules
   ============================================================ */
.rev-payout { max-width: 1000px; margin-inline: auto; }
.rev-payout .eyebrow { display: block; margin-bottom: var(--space-3); }
.rev-payout__title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.12;
  margin: 0 0 var(--space-5);
}
.rev-payout__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 1023px) { .rev-payout__grid { grid-template-columns: 1fr; } }

.rev-payout__heading,
.rev-safety__title,
.rev-rules__title {
  font-family: var(--font-serif);
  font-size: var(--text-h4);
  line-height: var(--lh-h4);
  margin: 0 0 var(--space-3);
}
html[lang="zh-Hant"] .rev-payout__heading,
html[lang="zh-Hant"] .rev-safety__title,
html[lang="zh-Hant"] .rev-rules__title { font-family: var(--font-han); }
html[lang="ja"] .rev-payout__heading,
html[lang="ja"] .rev-safety__title,
html[lang="ja"] .rev-rules__title { font-family: var(--font-jp); }

.rev-table--tiers td:nth-child(2) { font-weight: 600; color: var(--accent-hover); }

.rev-payout__side > * + * { margin-top: var(--space-4); }

.rev-safety {
  position: relative;
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(135deg, rgba(247, 190, 182, 0.20), rgba(131, 189, 236, 0.12));
  border-radius: var(--radius-md);
}
.rev-safety__icon {
  width: 28px;
  height: 28px;
  color: var(--color-honest);
  margin-bottom: var(--space-2);
}
.rev-safety__body {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  margin: 0;
}

.rev-rules {
  padding: var(--space-4) var(--space-5);
  background: var(--bg-primary);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.rev-rules__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rev-rules__list li {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--text-small);
  line-height: var(--lh-small);
  color: var(--text-muted);
}
.rev-rules__list li + li { margin-top: var(--space-2); }
.rev-rules__list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent-hover);
}

/* ============================================================
   06. Creator CTA card + disclaimer
   ============================================================ */
.rev-cta {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  padding: var(--space-7) var(--space-5);
  background: linear-gradient(135deg, rgba(131, 189, 236, 0.18), rgba(247, 190, 182, 0.12));
  border-radius: var(--radius-lg);
}
.rev-cta__title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.1;
  margin: 0 0 var(--space-3);
}
.rev-cta__body {
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--text-muted);
  margin: 0 0 var(--space-5);
  max-width: 56ch;
  margin-inline: auto;
}

.rev-disclaimer {
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
  color: var(--text-soft);
  max-width: 76ch;
  margin: var(--space-6) auto 0;
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--line-soft);
}

/* ============================================================
   Mobile cleanup — tables wrap inside the container, never overflow
   ============================================================ */
@media (max-width: 639px) {
  /* Tables stay as proper tables, but cells WRAP so the column
     headers like "Free withdrawals per year" and
     "Per-subscriber pool contribution" don't push the table wider
     than its container. Previous nowrap+scroll approach made the
     whole .rev-payout block visibly overflow. */
  .rev-table {
    width: 100%;
    table-layout: auto;
    font-size: 11px;
  }
  .rev-table th,
  .rev-table td {
    padding: 8px 10px;
    font-size: 11px;
    line-height: 1.35;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
    vertical-align: top;
  }
  /* Side blocks (Safety net + Anti-fraud rules) — clamp internal
     padding and guarantee they don't outgrow the grid cell. */
  .rev-payout__side > div {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }
  .rev-safety,
  .rev-rules { padding: var(--space-4); }
  .rev-safety__body,
  .rev-rules__list li { font-size: var(--text-small); line-height: var(--lh-small); }
  /* Ensure the long rule item wraps cleanly. */
  .rev-rules__list li { overflow-wrap: anywhere; word-break: keep-all; }

  .rev-streams { gap: var(--space-3); }
  .rev-card { padding: var(--space-4); }
  .rev-card__title { font-size: var(--text-h4); }

  /* Calculator block padding shrinks; USD pill moves so it doesn't
     overlap the title on phones. */
  .rev-interactive { padding: var(--space-4); }
  .rev-interactive__currency { top: 10px; right: 10px; }
  .rev-interactive__title { padding-right: 48px; font-size: var(--text-body-lg); }

  /* Result row stacks vertically so the big numeric value never
     collides with the label on narrow viewports. */
  .rev-interactive__result {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  .rev-interactive__result-value { font-size: clamp(24px, 8vw, 32px); }

  /* CTA block padding cleanup */
  .rev-cta { padding: var(--space-6) var(--space-4); }
  .rev-cta__title { font-size: clamp(24px, 7vw, 36px); }

  /* Section titles — EN strings like "Built so you can rely on it."
     (28 chars in serif) overflow at the desktop min 28px. Shrink
     across all sub-section titles in the revenue stack. */
  .rev-active__title,
  .rev-calc__title,
  .rev-compare__title,
  .rev-payout__title { font-size: clamp(22px, 6.4vw, 32px); }

  /* Sub-block h4 headings inside payout grid (Withdrawal tiers /
     Safety net / Anti-fraud) — these can be long in EN too. */
  .rev-payout__heading,
  .rev-safety__title,
  .rev-rules__title { font-size: var(--text-body-lg); }

  /* Compare/payout/cta notes — keep readable but tighter */
  .rev-compare__note,
  .rev-disclaimer { font-size: 11px; }

  /* Formula card readable */
  .rev-formula { padding: var(--space-3) var(--space-4); font-size: 12px; }
}

/* Very small phones — final size-down */
@media (max-width: 380px) {
  .rev-table th,
  .rev-table td { padding: 6px 6px; font-size: 10px; }
  .rev-active__title,
  .rev-calc__title,
  .rev-compare__title,
  .rev-payout__title { font-size: clamp(20px, 6vw, 26px); }
}