/* ==========================================================================
   Tencent App Store Reactivation — case styles (P3 rebuild)
   --------------------------------------------------------------------------
   Structure: one screen ≈ one module, per the owner's presentation PDF.
   Benchmarks: cases/paypal-link (module rhythm, text/visual balance) and
   cases/xiaozao (image-forward steps). Restrained profile; Tencent blue.
   The reconstructed product screens use the shipped product's own dark/gold
   look — that palette is content imagery, not page chrome.
   ========================================================================== */

:root {
  /* type: low contrast within the restrained profile */
  --text-display: clamp(1.9rem, 3.4vw, 2.9rem);
  --text-h2: clamp(1.5rem, 2.4vw, 2.1rem);
  --text-h3: clamp(1.05rem, 1.3vw, 1.2rem);
  --text-label: 0.75rem;
  --text-micro: 0.68rem;

  /* compact density */
  --space-section: clamp(4rem, 7vw, 6.5rem);
  --max-page: 1080px;

  /* canvas */
  --paper: #ffffff;
  --tint: #f3f6fa;
  --ink: #101725;
  --muted: #4c586a;
  --faint: #7c8798;
  --line: #dfe4ec;
  --line-strong: #b9c2cf;

  /* Tencent blue */
  --accent: #0052d9;
  --accent-deep: #003eb3;
  --accent-quiet: #e8f0fd;

  /* dark module + navy */
  --navy: #0a1f44;
  --navy-line: #24365c;
  --navy-text: #c9d4e8;

  /* zone recreation (product's own look) */
  --zone-bg: #17181c;
  --zone-card: #ffffff;
  --zone-gold: #e8b45a;
  --zone-gold-deep: #b8852f;
  --zone-cream: #f6ead2;

  --focus: #0052d9;
}

/* ==========================================================================
   Base
   ========================================================================== */

body { background: var(--paper); color: var(--ink); }

h1 { font-size: var(--text-display); line-height: 1.14; letter-spacing: -0.02em; }
h2 { font-size: var(--text-h2); line-height: 1.18; letter-spacing: -0.015em; }
h3 { font-size: var(--text-h3); line-height: 1.35; }

em { font-style: normal; font-weight: var(--weight-medium); }
strong, b { font-weight: var(--weight-semibold); }

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

.skip { position: absolute; left: -9999px; top: 0; z-index: 50; padding: 12px 18px; background: var(--ink); color: #fff; text-decoration: none; }
.skip:focus { left: 0; }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, #ffffff 90%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { text-decoration: none; font-size: var(--text-support); font-weight: var(--weight-semibold); }
.brand span { color: var(--faint); font-weight: var(--weight-regular); }
.site-header nav { display: flex; gap: clamp(14px, 2.6vw, 28px); }
.site-header nav a { font-size: var(--text-small); font-weight: var(--weight-medium); color: var(--muted); text-decoration: none; padding-block: 4px; border-bottom: 2px solid transparent; }
.site-header nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ==========================================================================
   Module scaffolding — one screen per module
   ========================================================================== */

.module { padding-block: var(--space-section); border-top: 1px solid var(--line); }
.module-tint { background: var(--tint); }

.module-tag {
  margin: 0 0 14px; max-width: none;
  font-size: var(--text-label); font-weight: var(--weight-semibold);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
}
/* Titles fill the page width and wrap naturally instead of balancing into
   an early mid-phrase break (owner P3 feedback, pages 4/5/8). */
.module h2 { margin: 0 0 16px; max-width: none; text-wrap: pretty; }
.module-lede { margin: 0 0 8px; max-width: 76ch; font-size: var(--text-h3); line-height: 1.6; color: var(--muted); }
.module-lede strong { color: var(--ink); }

.fine { margin: 22px 0 0; max-width: none; font-size: var(--text-small); color: var(--faint); }
.fine.center { text-align: center; }

/* ==========================================================================
   M1 · Hero
   ========================================================================== */

.hero { padding-block: clamp(3rem, 6vw, 5rem) var(--space-section); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr); gap: clamp(36px, 6vw, 80px); align-items: center; }

.eyebrow { margin: 0 0 16px; font-size: var(--text-label); font-weight: var(--weight-semibold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); max-width: none; }
.hero h1 { margin: 0 0 20px; }
.hero-lede { margin: 0; max-width: 58ch; font-size: var(--text-h3); line-height: 1.6; color: var(--muted); }

.hero-facts {
  margin-top: clamp(28px, 3.5vw, 42px); padding-top: 22px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px clamp(20px, 3vw, 36px);
}
.fact-k { display: block; font-size: var(--text-label); font-weight: var(--weight-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.fact-v { display: block; margin-top: 4px; font-size: var(--text-support); font-weight: var(--weight-medium); line-height: 1.45; }
.fact-wide { grid-column: 1 / -1; }
.fact-note { display: block; margin-top: 2px; font-size: var(--text-small); font-weight: var(--weight-regular); color: var(--faint); }

.hero-visual { margin: 0; }
.hero-visual figcaption, .bg-phone figcaption { margin-top: 12px; font-size: var(--text-small); color: var(--faint); text-align: center; }

/* ==========================================================================
   Phones — shared frame
   ========================================================================== */

.phone {
  width: min(100%, 300px); margin-inline: auto;
  border: 1px solid var(--line-strong); border-radius: 18px; overflow: hidden;
  background: #fff; box-shadow: 0 10px 30px rgba(16, 23, 37, 0.08);
}

/* --- the reactivation zone: faithful dark/gold recreation --------------- */
.phone-zone { background: var(--zone-bg); border-color: #000; }
.zp-status { display: flex; justify-content: space-between; padding: 10px 14px 6px; color: #d9dbe0; font-size: var(--text-label); }
.zp-tabs { display: flex; gap: 14px; padding: 8px 14px 12px; font-size: var(--text-small); color: #9aa0ab; }
.zp-tabs strong { color: var(--zone-gold); box-shadow: inset 0 -2px 0 var(--zone-gold); padding-bottom: 2px; }
.zp-gift { margin: 4px 12px 10px; padding: 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; border-radius: 10px; background: linear-gradient(115deg, #241d12, #3a2c15); border: 1px solid #58421f; }
.zp-gift strong { display: block; color: var(--zone-gold); font-size: var(--text-support); }
.zp-gift small { display: block; margin-top: 3px; color: #cdb98a; font-size: var(--text-label); }
.zp-gift-box { font-size: 1.6rem; }
.zp-card { margin: 0 12px 10px; border-radius: 10px; background: var(--zone-card); overflow: hidden; }
.zp-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid #eee; }
.zp-ico { width: 30px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 7px; background: #101725; color: #fff; font-size: var(--text-label); font-weight: var(--weight-semibold); }
.zp-meta { min-width: 0; }
.zp-meta b { display: block; font-size: var(--text-small); color: #16181d; }
.zp-meta i { display: block; font-style: normal; font-size: var(--text-label); color: #8a8f98; }
.zp-btn { padding: 6px 12px; border-radius: 999px; background: linear-gradient(180deg, var(--zone-gold), var(--zone-gold-deep)); color: #2a1f08; font-size: var(--text-label); font-weight: var(--weight-semibold); }
.zp-oneclick { margin: 10px; padding: 10px; border-radius: 999px; background: #16181d; color: var(--zone-gold); text-align: center; font-size: var(--text-small); font-weight: var(--weight-medium); }
.zp-weekly { display: flex; justify-content: space-between; padding: 2px 16px 16px; color: #b9bec7; font-size: var(--text-label); }
.zp-timer { color: var(--zone-gold); }

/* zone reward modal */
.zp-dim { min-height: 380px; display: grid; place-items: center; background: rgba(10, 10, 12, 0.72); padding: 20px; }
.zp-modal { width: 100%; max-width: 210px; padding: 22px 18px; border-radius: 14px; background: var(--zone-cream); text-align: center; }
.zp-modal-gift { font-size: 2rem; }
.zp-modal strong { display: block; margin-top: 8px; color: #6d4c0e; font-size: var(--text-support); }
.zp-modal small { display: block; margin-top: 6px; color: #8a6f3c; font-size: var(--text-label); line-height: 1.5; }
.zp-modal-btn { display: block; margin: 14px auto 0; padding: 9px 0; width: 80%; border-radius: 999px; background: #241f16; color: var(--zone-cream); font-size: var(--text-small); font-weight: var(--weight-medium); }

/* --- store home (light) -------------------------------------------------- */
.hp-status { display: flex; justify-content: space-between; padding: 10px 14px 6px; color: var(--muted); font-size: var(--text-label); }
.hp-search { margin: 6px 12px; padding: 8px 12px; border-radius: 999px; background: #f1f3f7; color: var(--faint); font-size: var(--text-label); }
.hp-tabs { display: flex; gap: 14px; padding: 8px 14px 10px; font-size: var(--text-small); color: var(--faint); }
.hp-tabs strong { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); padding-bottom: 2px; }
.hp-banner { margin: 2px 12px 12px; height: 84px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(120deg, var(--accent-quiet), #dceafe); color: var(--faint); font-size: var(--text-label); }
.hp-banner.sm { height: 64px; }
.hp-section { padding: 2px 14px 8px; font-size: var(--text-small); font-weight: var(--weight-semibold); }
.hp-apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 12px 14px; }
.hp-app { display: grid; justify-items: center; gap: 4px; }
.hp-app i { width: 40px; aspect-ratio: 1; border-radius: 10px; background: #e8ecf3; }
.hp-app i.g { background: #dce6f8; }
.hp-app span { font-size: var(--text-label); color: var(--muted); }
.hp-app b { padding: 2px 10px; border-radius: 999px; background: var(--accent-quiet); color: var(--accent); font-size: var(--text-label); font-weight: var(--weight-medium); }

/* home reminder card (amber, like the shipped card) */
.hp-flowcard { margin: 0 12px 12px; padding: 12px; border-radius: 10px; background: #fdf3e3; border: 1px solid #f3ddb5; }
.hp-flowcard-top { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-size: var(--text-label); color: #7a5a1d; }
.hp-flowcard-top b { color: #b8852f; font-weight: var(--weight-medium); white-space: nowrap; }
.hp-flowrow { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.hp-claim { padding: 6px 12px; border-radius: 999px; background: linear-gradient(180deg, var(--zone-gold), var(--zone-gold-deep)); color: #2a1f08; font-size: var(--text-label); font-weight: var(--weight-semibold); }

/* progress screen */
.pg-wrap { padding: 14px; }
.pg-head { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--text-support); }
.pg-head span { color: var(--accent); font-weight: var(--weight-semibold); font-size: var(--text-small); }
.pg-bar { margin: 10px 0 6px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.pg-bar i { height: 5px; border-radius: 3px; background: var(--line); }
.pg-bar i.on { background: var(--accent); }
.pg-labels { display: flex; justify-content: space-between; font-size: var(--text-label); color: var(--faint); }
.pg-note { margin: 10px 0 12px; max-width: none; font-size: var(--text-label); color: var(--faint); line-height: 1.5; }
.pg-step { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: var(--text-small); }
.pg-check { flex: 0 0 22px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--line); color: var(--muted); font-size: var(--text-label); }
.pg-check.on { background: var(--accent); color: #fff; }

/* ==========================================================================
   M2 · Background
   ========================================================================== */

.bg-grid { margin-top: clamp(30px, 4vw, 44px); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr); gap: clamp(32px, 5vw, 64px); align-items: center; }

/* Ecosystem shared bits (layout in the r2 block below). */
.loop3-title { margin: 0 0 clamp(20px, 3vw, 32px); font-size: var(--text-label); font-weight: var(--weight-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.loop3-sub { display: block; margin-top: 3px; font-size: var(--text-label); color: var(--faint); line-height: 1.4; }
.loop3-badge { display: inline-block; margin-bottom: 6px; padding: 2px 9px; border-radius: 999px; background: var(--accent); color: #fff; font-size: var(--text-label); font-weight: var(--weight-semibold); letter-spacing: 0.04em; }

.bg-phone { margin: 0; }

/* ==========================================================================
   M3 · Challenge — before/after
   ========================================================================== */

.ba { margin-top: clamp(30px, 4vw, 44px); display: grid; gap: 14px; }
.ba-track { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: clamp(14px, 2vw, 22px); align-items: center; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.ba-track.ba-after { border-color: #e6b0b0; background: #fffafa; }
/* Big Before / After markers make the two states the headline (owner P3, page 3). */
.ba-mark { align-self: center; padding: 10px 12px; border-radius: 10px; text-align: center; font-size: var(--text-support); font-weight: var(--weight-semibold); letter-spacing: 0.02em; background: var(--tint); color: var(--muted); }
.ba-mark.warn { background: #fdeaea; color: #a12b2b; }
.ba-body { min-width: 0; }
.ba-title { display: block; margin-bottom: 12px; font-size: var(--text-label); font-weight: var(--weight-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.ba-after .ba-title { color: #a12b2b; }
.ba-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1.2fr; gap: 10px; align-items: center; }
.ba-step { padding: 12px 10px; border-radius: 8px; text-align: center; font-size: var(--text-small); line-height: 1.35; background: var(--tint); color: var(--muted); }
.ba-step i { font-style: normal; font-size: var(--text-label); color: var(--faint); }
.ba-step.ours { background: var(--accent-quiet); color: var(--accent-deep); }
.ba-step.ours i { color: var(--accent); }
.ba-step.idle { background: var(--tint); }
.ba-step.theirs { background: #fbdcdc; color: #9a3030; }
.ba-step.theirs i { color: #c04545; }
.ba-step.strong { font-weight: var(--weight-semibold); }
.ba-arrow { color: var(--line-strong); }
.ba-loss { margin: 12px 0 0; max-width: none; font-size: var(--text-support); color: #a12b2b; }
.ba-loss strong { color: #8f1f1f; }
.ba-note { margin: 4px 4px 0; max-width: none; font-size: var(--text-support); color: var(--muted); }

/* ==========================================================================
   M4 · Role band + strategy cards
   ========================================================================== */

/* Role statement: eyebrow stays flush-left (aligned with every other module),
   emphasis carried by an accent bar instead of an inset navy box
   (owner P3 feedback, page 4). */
.role-statement {
  margin: 0 0 clamp(40px, 5vw, 60px);
  max-width: 64ch;
  padding-left: clamp(16px, 2vw, 22px);
  border-left: 3px solid var(--accent);
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  font-weight: var(--weight-medium);
  line-height: 1.42;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.role-statement strong { color: var(--accent-deep); }

.cards3 { margin-top: clamp(28px, 3.5vw, 40px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.cards3 article { padding: clamp(18px, 2.4vw, 26px); border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.card-n { display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 12px; border-radius: 50%; background: var(--accent); color: #fff; font-size: var(--text-small); font-weight: var(--weight-semibold); }
.cards3 h3 { margin: 0 0 8px; }
.cards3 p { margin: 0; max-width: none; font-size: var(--text-support); color: var(--muted); line-height: 1.55; }

/* ==========================================================================
   M5 · Factor formula (light) + worked examples
   Each factor chip sits directly above its own signals, so the formula and the
   explanation line up one-to-one; the formula is the emphasis (owner P3, page 5).
   ========================================================================== */

.factors { margin: clamp(28px, 3.5vw, 40px) 0 0; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: clamp(8px, 1.4vw, 16px); align-items: start; }
.factor { min-width: 0; }
.factor-chip { padding: 13px 14px; border-radius: 10px 10px 0 0; background: var(--accent); color: #fff; font-size: var(--text-support); font-weight: var(--weight-semibold); text-align: center; line-height: 1.25; }
.factor ul { margin: 0; padding: 16px 16px 6px; list-style: none; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px; background: #fff; }
.factor li { position: relative; padding: 0 0 12px 15px; font-size: var(--text-small); color: var(--muted); line-height: 1.5; }
.factor li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 2px; background: var(--accent); }
.factor-op { align-self: start; padding-top: 12px; color: var(--accent); font-size: 1.3rem; font-weight: var(--weight-semibold); }

.factor-result { margin-top: 14px; padding: 15px 20px; display: flex; align-items: center; gap: 12px; border-radius: 10px; border: 1px solid var(--accent); background: var(--accent-quiet); font-size: var(--text-h3); color: var(--muted); }
.factor-result strong { color: var(--accent-deep); }

/* worked examples (M5b) */
.examples { margin-top: clamp(28px, 3.5vw, 40px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 28px); }
.ex { padding: clamp(18px, 2.4vw, 26px); border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.ex-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.ex-avatar { flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-quiet); color: var(--accent-deep); font-weight: var(--weight-semibold); }
.ex-avatar.hi { background: var(--accent); color: #fff; }
.ex-head strong { display: block; font-size: var(--text-support); }
.ex-head span { font-size: var(--text-small); color: var(--faint); }
.ex-factors { margin: 0; padding: 0; list-style: none; }
.ex-factors li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--text-small); color: var(--muted); }
.ex-factors li i { grid-column: 1 / -1; font-style: normal; font-size: var(--text-label); color: var(--faint); }
.lv { padding: 2px 9px; border-radius: 999px; font-size: var(--text-label); font-weight: var(--weight-semibold); white-space: nowrap; }
.lv-hi { background: #e0ebff; color: var(--accent-deep); }
.lv-mid { background: #eef1f5; color: var(--muted); }
.lv-lo { background: #f2f4f7; color: var(--faint); }
.ex-out { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 14px; border-top: 2px solid var(--ink); }
.ex-out span { font-size: var(--text-small); color: var(--muted); }
.reward { padding: 7px 14px; border-radius: 999px; font-size: var(--text-small); font-weight: var(--weight-semibold); white-space: nowrap; }
.reward-std { background: var(--accent-quiet); color: var(--accent-deep); }
.reward-prem { background: linear-gradient(180deg, var(--zone-gold), var(--zone-gold-deep)); color: #2a1f08; }

/* ==========================================================================
   M7 · Experience — 4 screens
   ========================================================================== */

.screens4 { margin-top: clamp(30px, 4vw, 44px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); align-items: start; }
.screens4 figure { margin: 0; min-width: 0; }
.screens4 .phone { width: 100%; }
.screens4 figcaption { margin-top: 12px; font-size: var(--text-small); color: var(--muted); line-height: 1.5; }
.screens4 figcaption b { display: block; margin-bottom: 3px; color: var(--ink); font-size: var(--text-support); }

/* ==========================================================================
   M8 · Swimlane
   ========================================================================== */

.lane-wrap { margin-top: clamp(30px, 4vw, 44px); border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; background: #fff; }
.lane-head { display: grid; grid-template-columns: 140px repeat(6, minmax(120px, 1fr)); border-bottom: 1px solid var(--line); background: var(--tint); }
.lane-head span { padding: 10px 12px; font-size: var(--text-label); font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.lane-head span:first-child { grid-column: 2; }
.lane { display: grid; grid-template-columns: 140px minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.lane:last-child { border-bottom: 0; }
.lane-k { padding: 14px 12px; font-size: var(--text-small); font-weight: var(--weight-semibold); color: var(--muted); border-right: 1px solid var(--line); background: var(--tint); display: flex; align-items: center; }
.lane-cells { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); }
.cell { margin: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: var(--text-small); color: var(--muted); line-height: 1.45; align-self: center; }
.cell.on { border-color: var(--accent); background: var(--accent-quiet); color: var(--accent-deep); font-weight: var(--weight-medium); }
.cell.src { border-style: dashed; }
.c1 { grid-column: 1; } .c2 { grid-column: 2; } .c3 { grid-column: 3; } .c3b { grid-column: 4; }
.c4 { grid-column: 4 / 6; } .c5 { grid-column: 5; } .c6 { grid-column: 6; }

/* ==========================================================================
   M9 · Results
   ========================================================================== */

.results3 { margin-top: clamp(30px, 4vw, 44px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); align-items: stretch; }
.rchart { margin: 0; display: flex; flex-direction: column; padding: clamp(18px, 2.4vw, 26px); border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.rchart figcaption strong { display: block; font-size: var(--text-h3); letter-spacing: -0.01em; color: var(--accent); }
.rchart figcaption span { display: block; margin-top: 4px; font-size: var(--text-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }

.rbars { margin: 18px 0 6px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: end; height: 150px; padding-inline: 8px; }
.rbar { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 8px; justify-items: center; }
.rbar i { align-self: end; width: 100%; max-width: 64px; height: var(--h); border-radius: 6px 6px 0 0; background: var(--accent); }
.rbar.dim i { background: var(--line-strong); }
.rbar span { font-size: var(--text-label); color: var(--muted); }

.rcurve { margin: 18px 0 6px; }
.rcurve svg { width: 100%; height: auto; }
.rcurve .grid line { stroke: var(--line); stroke-width: 1; }
.rcurve .line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.rcurve .base { fill: none; stroke: var(--faint); stroke-width: 2; stroke-dasharray: 5 4; }
.rcurve .dot { fill: var(--accent); }
.rcurve .gain { fill: rgba(0, 82, 217, 0.1); }
.rcurve .cost { fill: var(--line-strong); opacity: 0.55; }
.rx { display: flex; justify-content: space-between; margin-top: 6px; font-size: var(--text-label); color: var(--faint); }
.rkey { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: var(--text-label); color: var(--muted); }
.rkey span { position: relative; padding-left: 16px; }
.rkey span::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 11px; height: 3px; }
.rkey .k1::before { background: var(--accent); }
.rkey .k2::before { background: var(--faint); }
.rkey .k3::before { height: 7px; background: var(--line-strong); }

.rnote { margin: auto 0 0; max-width: none; padding-top: 12px; font-size: var(--text-label); color: var(--faint); line-height: 1.5; border-top: 1px solid var(--line); }
.rnote strong { color: var(--accent); }

/* Two headline results promoted above the charts (owner P3, page 9). */
.result-heads { margin: clamp(24px, 3vw, 34px) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.rhead { padding: 18px 20px; border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 4px 4px 12px 12px; background: #fff; }
.rhead strong { display: block; font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -0.01em; color: var(--accent); }
.rhead span { display: block; margin-top: 6px; font-size: var(--text-small); color: var(--muted); line-height: 1.5; }

/* ==========================================================================
   Closer + footer
   ========================================================================== */

.closer { background: var(--navy); border-top-color: var(--navy); }
.closer-inner { text-align: center; color: #fff; }
.closer h2 { margin: 0 0 10px; max-width: none; color: #fff; }
.closer p { margin: 0 auto; max-width: 52ch; color: var(--navy-text); font-size: var(--text-h3); }
.closer-tags { margin-top: 18px !important; font-size: var(--text-small) !important; color: #8fa0c0 !important; letter-spacing: 0.04em; }

footer { padding-block: 26px; border-top: 1px solid var(--line); }
.footer-inner { display: flex; justify-content: space-between; gap: 20px; font-size: var(--text-small); color: var(--faint); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .bg-grid { grid-template-columns: 1fr; }
  .screens4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .results3 { grid-template-columns: 1fr; }
  .rbars { height: 130px; }
}

@media (max-width: 720px) {
  .site-header nav a:nth-child(2),
  .site-header nav a:nth-child(3) { display: none; }
  .brand { white-space: nowrap; }
  .hero-visual { order: 0; }
  .cards3 { grid-template-columns: 1fr; }
  .hero-facts { grid-template-columns: 1fr; }

  .ba-track { grid-template-columns: 1fr; gap: 12px; }
  .ba-mark { justify-self: start; }
  .ba-steps { grid-template-columns: 1fr; gap: 6px; }
  .ba-arrow { transform: rotate(90deg); justify-self: center; }

  .factors { grid-template-columns: 1fr; }
  .factor-op { padding-top: 0; justify-self: center; }

  .examples { grid-template-columns: 1fr; }
  .result-heads { grid-template-columns: 1fr; }

  .screens4 { grid-template-columns: 1fr; }
  .screens4 .phone { max-width: 300px; }
  .footer-inner { flex-direction: column; gap: 6px; }
}

@media (max-width: 360px) {
  .site-header nav a:first-child { display: none; }
}

/* ==========================================================================
   Claude visual round 1 (task tencent-visuals-r1)
   --------------------------------------------------------------------------
   Adds: realistic device frame + status glyphs + refined reactivation zone
   (M1/M7 product imagery, shipped dark/gold look); small evidence-card and
   reason-card visuals (M4/M6, restrained blue chrome); swimlane polish (M8).
   Product imagery keeps the shipped palette; page chrome stays on tokens.
   ========================================================================== */

/* --- realistic device frame (product imagery) --------------------------- */
.device {
  position: relative; width: min(100%, 316px); margin-inline: auto;
  padding: 12px; border-radius: 44px;
  background: linear-gradient(155deg, #2b2c33 0%, #17181c 55%, #0e0f12 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 0 0 1px rgba(0, 0, 0, 0.55),
    0 26px 54px -20px rgba(16, 23, 37, 0.55),
    0 6px 18px rgba(16, 23, 37, 0.12);
}
.device::before { /* dynamic-island pill */
  content: ""; position: absolute; z-index: 6; top: 22px; left: 50%;
  transform: translateX(-50%); width: 82px; height: 20px;
  border-radius: 999px; background: #050506;
}
.device::after { /* soft screen edge */
  content: ""; position: absolute; z-index: 4; inset: 12px;
  border-radius: 33px; pointer-events: none;
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.5);
}
.device .phone {
  width: 100%; border: 0; border-radius: 33px; box-shadow: none;
  position: relative; z-index: 2;
}
.device .zp-status, .device .hp-status { padding-top: 13px; }
.hero-visual .device { width: min(100%, 320px); }
.device-sm { padding: 8px; border-radius: 34px; }
.device-sm::before { top: 15px; width: 60px; height: 15px; }
.device-sm::after { inset: 8px; border-radius: 27px; }
.device-sm .phone { border-radius: 27px; }

/* --- status-bar signal / wifi / battery glyphs -------------------------- */
.sb-icons { display: inline-flex; align-items: center; gap: 5px; }
.sb-icons svg { display: block; }

/* --- reactivation-zone store top bar + Tencent authority mark ----------- */
.zp-topbar {
  display: flex; align-items: center; gap: 10px; padding: 4px 14px 10px;
}
.zp-brand { width: auto; height: 15px; opacity: 0.96; flex: 0 0 auto; }
.zp-search {
  flex: 1; min-width: 0; padding: 7px 12px; border-radius: 999px;
  background: #202127; border: 1px solid #2c2e35; color: #7f8590;
  font-size: var(--text-label); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.zp-search::before { content: "\2315"; margin-right: 6px; color: #6c727c; }

/* refined zone gift graphic (replaces emoji) */
.zp-gift-box, .zp-modal-gift { display: grid; place-items: center; }
.zp-gift-box svg { width: 46px; height: 46px; }
.zp-modal-gift svg { width: 60px; height: 60px; }

/* app-icon tiles: distinct, app-like, still neutral (letters = Game A/B/C) */
.zp-ico, .ex-avatar { position: relative; overflow: hidden; }
.zp-ico { color: #fff; }
.zp-row:nth-child(1) .zp-ico { background: linear-gradient(150deg, #2f6bff, #0a3ea8); }
.zp-row:nth-child(2) .zp-ico { background: linear-gradient(150deg, #f0b757, #b8852f); color: #2a1f08; }
.zp-row:nth-child(3) .zp-ico { background: linear-gradient(150deg, #3a4256, #10131c); }
.hp-flowrow .zp-ico { background: linear-gradient(150deg, #2f6bff, #0a3ea8); }
.zp-ico::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 55%);
}

/* --- M4 / M6 card visuals ---------------------------------------------- */
.card-viz {
  margin: 2px 0 16px; min-height: 118px; padding: 14px;
  display: grid; place-items: center; border-radius: 10px;
  background: var(--tint); border: 1px solid var(--line);
}

/* M4·1 — neutral channels, ours highlighted */
.chan { display: flex; align-items: center; gap: 9px; }
.chan-sq {
  width: 34px; height: 34px; border-radius: 9px; background: #fff;
  border: 1px solid var(--line-strong);
  display: grid; place-items: center; color: var(--line-strong);
}
.chan-sq svg { width: 15px; height: 15px; }
.chan-sq.ours {
  position: relative; width: 50px; height: 50px; border-color: var(--accent);
  background: var(--accent-quiet); color: var(--accent);
  box-shadow: 0 6px 16px rgba(0, 82, 217, 0.16);
}
.chan-sq.ours svg { width: 22px; height: 22px; }
.chan-tag {
  position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%);
  padding: 2px 8px; border-radius: 999px; background: var(--accent); color: #fff;
  font-size: var(--text-label); font-weight: var(--weight-semibold);
  letter-spacing: 0.04em; white-space: nowrap;
}
.chan-sq.ours { margin-bottom: 14px; }

/* M4·2 — qualitative value concentration */
.vs { width: 100%; display: grid; gap: 12px; }
.vs-row { display: grid; grid-template-columns: minmax(96px, 0.8fr) minmax(80px, 1.4fr) 42px; align-items: center; gap: 8px; }
.vs-lab { font-size: var(--text-micro); font-weight: var(--weight-semibold); letter-spacing: 0.06em; line-height: 1.25; text-transform: uppercase; color: var(--faint); }
.vs-bar { position: relative; height: 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.vs-bar i { position: absolute; inset: 0 auto 0 0; min-width: 4px; border-radius: 999px; background: var(--accent); }
.vs-num { text-align: right; font-size: var(--text-small); font-weight: var(--weight-semibold); color: var(--accent-deep); font-variant-numeric: tabular-nums; }

/* M4·3 — stylized reward tiles */
.rewards { display: flex; gap: 10px; }
.rw { width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(160deg, #fbf1db, #f2ddb5); border: 1px solid #ecd6a6; }
.rw svg { width: 24px; height: 24px; }

/* M6·1 — permanent tab */
.entry { width: 100%; max-width: 210px; display: grid; gap: 12px; }
.entry-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.entry-tabs span { height: 26px; border-radius: 7px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; }
.entry-tabs span.on { background: var(--accent-quiet); border-color: var(--accent); color: var(--accent); }
.entry-tabs span.on svg { width: 15px; height: 15px; }
.entry-cap { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--text-label); font-weight: var(--weight-medium); color: var(--muted); }
.entry-cap svg { width: 13px; height: 13px; color: var(--accent); }

/* M6·2 — churn/return loop */
.loop-viz { width: 132px; height: 92px; }

/* M6·3 — unstable campaign slots */
.slots { display: flex; align-items: center; gap: 8px; }
.slot { width: 52px; height: 52px; border-radius: 10px; display: grid; place-items: center; text-align: center; font-size: var(--text-label); line-height: 1.25; padding: 4px; }
.slot.temp { border: 1px dashed var(--line-strong); background: repeating-linear-gradient(135deg, #fff, #fff 5px, var(--tint) 5px, var(--tint) 10px); color: var(--faint); }
.slot.temp.gone { opacity: 0.42; }
.slot-arrow { color: var(--line-strong); }
.slot-arrow svg { width: 14px; height: 14px; display: block; }
.slot.stable { border: 1px solid var(--accent); background: var(--accent-quiet); color: var(--accent-deep); font-weight: var(--weight-semibold); box-shadow: 0 6px 16px rgba(0, 82, 217, 0.14); }

/* --- M8 swimlane polish ------------------------------------------------- */
.lane-head span { position: relative; }
.lane-flow { display: grid; grid-template-columns: 140px repeat(6, minmax(120px, 1fr)); align-items: center; background: var(--tint); border-bottom: 1px solid var(--line); }
.lane-flow .lf-label { padding: 8px 12px; font-size: var(--text-label); font-weight: var(--weight-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.lane-flow .lf-stage { display: flex; align-items: center; gap: 8px; padding: 8px 12px; }
.lane-flow .lf-num { flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.66rem; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.lane-flow .lf-name { font-size: var(--text-small); font-weight: var(--weight-semibold); color: var(--ink); }
.lane-flow .lf-conn { flex: 1; height: 0; border-top: 1.5px dashed var(--line-strong); margin-left: 2px; min-width: 8px; }
.lane-flow .lf-stage:last-child .lf-conn { display: none; }
.lane-k { gap: 9px; }
.lane-ico { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: #fff; border: 1px solid var(--line); color: var(--muted); }
.lane-ico svg { width: 14px; height: 14px; }
.cell { transition: none; }
.cell.on { box-shadow: 0 4px 12px rgba(0, 82, 217, 0.1); }

@media (max-width: 720px) {
  .card-viz { min-height: 104px; }
  .lane-flow { grid-template-columns: 140px repeat(6, minmax(120px, 1fr)); }
}

/* ==========================================================================
   Owner refinements — round 2 (task tencent-visuals-r2)
   ========================================================================== */

/* R2 — card title sits ABOVE its visual; key phrase highlighted (M4/M6) */
.cards3 article { display: flex; flex-direction: column; }
.cards3 .card-n { order: 0; }
.cards3 h3 { order: 1; }
.cards3 .card-viz { order: 2; margin: 4px 0 14px; }
.cards3 p { order: 3; }

/* R3 — three factors converge downward into the incentive (M5) */
.factor-converge { display: grid; place-items: center; margin-top: 10px; }
.factor-converge .converge { width: 100%; height: clamp(48px, 5vw, 72px); }
.factor-converge .converge path { stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.factor-converge .converge .branch { stroke-width: 2; }
.factor-converge .converge circle { fill: var(--accent); }
.factor-result { justify-content: center; text-align: center; }

/* R1 — Product + Operations are internal to Tencent App Store; game
   developers are an external B2B customer of the platform (owner r2, page 1). */
.eco-diagram { max-width: 460px; margin-inline: auto; display: grid; }
.eco-platform { position: relative; padding: 28px 16px 16px; border: 1.5px solid var(--accent); border-radius: 14px; background: var(--accent-quiet); }
.eco-platform-tag { position: absolute; top: -11px; left: 16px; padding: 2px 10px; border-radius: 999px; background: var(--accent); color: #fff; font-size: var(--text-label); font-weight: var(--weight-semibold); letter-spacing: 0.04em; }
.eco-nodes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.eco-node { position: relative; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; text-align: center; }
.eco-node.mine { border-color: var(--accent); box-shadow: 0 6px 18px rgba(0, 82, 217, 0.12); }
.eco-node strong { display: block; font-size: var(--text-support); }
.eco-node.mine strong { color: var(--accent-deep); }
.eco-link { display: grid; justify-items: center; gap: 5px; padding: 8px 0; }
.eco-link-line { width: 0; height: 16px; border-left: 1.5px dashed var(--line-strong); }
.eco-link-lbl { font-size: var(--text-label); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); }
.eco-node.ext { border-style: dashed; border-color: var(--line-strong); }
.eco-ext-tag { display: inline-block; margin-bottom: 6px; padding: 2px 9px; border-radius: 999px; background: var(--tint); border: 1px solid var(--line-strong); color: var(--muted); font-size: var(--text-label); font-weight: var(--weight-semibold); letter-spacing: 0.04em; }

@media (max-width: 720px) {
  .eco-nodes { grid-template-columns: 1fr; }
}

/* ===== Shared Case Shell — Tencent ===== */

[data-shell="case-header"] {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.shell-header-inner {
  width: min(calc(100% - 48px), var(--max-page)); margin-inline: auto;
  display: flex; align-items: baseline; gap: 16px; padding: 18px 0 14px;
}
.shell-brand {
  font-weight: var(--weight-semibold); text-decoration: none; color: var(--ink);
  font-size: 15px; white-space: nowrap;
}
.shell-brand:hover { text-decoration: underline; }

.shell-case-title {
  font-size: var(--text-small); color: var(--muted); font-weight: var(--weight-regular);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px;
}

[data-shell="section-nav"] {
  display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--text-small);
  margin-left: auto;
}
[data-shell="section-nav"] a {
  text-decoration: none; color: var(--muted);
}
[data-shell="section-nav"] a:hover { color: var(--ink); }

[data-shell="case-footer"] {
  margin-top: 64px; padding: 32px 0; border-top: 1px solid var(--line);
  font-size: var(--text-small); color: var(--muted);
}
.shell-footer-inner {
  width: min(calc(100% - 48px), var(--max-page)); margin-inline: auto;
}
.shell-connect {
  display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px;
}
.shell-connect a {
  color: var(--muted); text-decoration: underline;
}
.shell-connect a:hover { color: var(--ink); }

[data-shell="disclosure-note"] {
  margin-bottom: 16px; font-style: italic; color: var(--muted);
}

/* Skip link — ensure visible on focus */
.skip { position: absolute; top: -100px; left: 0; z-index: 200; }
.skip:focus { top: 0; }

@media (prefers-reduced-motion: reduce) {
  [data-shell="case-header"] { position: relative; }
}

@media (max-width: 700px) {
  .shell-header-inner { width: min(calc(100% - 32px), var(--max-page)); padding: 14px 0 12px; }
  .shell-footer-inner { width: min(calc(100% - 32px), var(--max-page)); }
}

@media (max-width: 420px) {
  .shell-header-inner { flex-wrap: wrap; gap: 8px; }
  .shell-case-title { max-width: 140px; }
  [data-shell="section-nav"] { width: 100%; justify-content: flex-start; margin-left: 0; }
}

.shell-cta-heading { font-size: 1.3em; color: var(--ink); margin-bottom: 12px; }