/* ================= Vanar Genesis — campaign page =================
   Page-only styles, loaded after /styles.css by src/pages/genesis.astro.

   The handoff build shipped its own token block; those tokens are dropped here
   and every colour reads from the site palette instead, so the page inherits
   the same greens, violet and signature gradient as the rest of the site and
   moves with it. The mapping was near 1:1 already:

     handoff --green-deep #1D5E4E  ->  --accent-deep   (identical)
     handoff --violet     #6E5BE0  ->  --violet        (identical)
     handoff --sig                 ->  --glow-grad     (identical stops)
     handoff --mint       #8FCFB0  ->  --accent #7CE7B0
     handoff --fg / --fg-dim       ->  --ink / --on-dim, so the section
                                       alternation classes drive text colour

   Every section carries .sec-light / .sec-dark from the shared alternation
   system, which is what flips --on / --on-dim per band. The rewards section
   was a standalone dark green band in the handoff; it now runs on the same
   alternation as everything else, so its elements read from the tokens too.
   The one remaining dark card (the closing bookend) uses the home page's
   closing-CTA gradient rather than a flat fill. */

/* ---- shared primitives ---- */
.gen-wrap { margin: 0 auto; max-width: 1280px; padding-left: clamp(16px, 5vw, 40px); padding-right: clamp(16px, 5vw, 40px); }
/* the site's full-width section measure (matches /hire) */
.gen-wrap-full { max-width: 1600px; }
.gen-wrap-xs { max-width: 880px; }
.gen-sec { position: relative; padding-top: clamp(80px, 12vw, 144px); padding-bottom: clamp(80px, 12vw, 144px); }

/* the h2 tracking is slightly negative, which pulls the final glyph past the
   inline box the gradient is clipped to and shaves its right edge. A hair of
   right padding widens the clip box without moving anything after it. */
.gen-sig { background: var(--glow-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; padding-right: 0.06em; }

.gen-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--on-dim); display: inline-flex; align-items: center; gap: 12px; }
.gen-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .55; }

/* one heading scale for the whole page, matching every other section head on
   the site (clamp 34-64px, 0.96 leading), with keywords carrying .gen-sig */
.gen-h2 { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(34px, 5vw, 64px); line-height: 0.96; letter-spacing: -0.005em; color: var(--on); margin: 0; }
.gen-lead { font-size: clamp(16px, 2vw, 18px); line-height: 1.6; color: var(--on-dim); }

/* CTAs use the shared .pill-cta from styles.css, so the mobile size override
   and the hover treatment come along with them. */
.pill-cta { transition: transform .15s, box-shadow .2s, filter .2s; }
.pill-cta:hover { transform: translateY(-1px); }

/* ---- reveal primitives ---- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
[data-reveal].in { opacity: 1; transform: none; }
.gen-growx { transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.16,1,.3,1); }
.gen-growy { transform: scaleY(0); transform-origin: bottom; transition: transform .8s cubic-bezier(.16,1,.3,1); }
[data-reveal].in .gen-growx { transform: scaleX(1); }
[data-reveal].in .gen-growy { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
  .gen-growx, .gen-growy { transform: none !important; transition: none; }
}

/* ================= HERO ================= */
.gen-hero { position: relative; min-height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.gen-hero-glyph { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; will-change: transform, opacity;
  -webkit-mask-image: linear-gradient(to bottom, black 40%, rgba(0,0,0,0.25) 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 40%, rgba(0,0,0,0.25) 88%, transparent 100%); }
.gen-hero-glyph span { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; color: #0E3F33; font-size: clamp(120px, 24vw, 560px); line-height: 1; white-space: nowrap; letter-spacing: -0.01em; transform-origin: center; }
.gen-hero-body { position: relative; z-index: 10; flex: 1; display: flex; align-items: center; justify-content: center; padding: clamp(96px, 14vh, 140px) 16px 64px; will-change: transform; }
.gen-hero-panel { position: relative; width: 100%; max-width: 820px; border-radius: 44px; padding: clamp(40px, 6vw, 64px) clamp(24px, 5vw, 56px); display: flex; flex-direction: column; align-items: center; text-align: center;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(11,19,14,0.10); box-shadow: 0 1px 0 rgba(11,19,14,0.04), 0 30px 80px -24px rgba(14,60,53,0.35), 0 2px 6px -2px rgba(11,19,14,0.06); }
.gen-hero-h1 { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(40px, 7vw, 68px); line-height: 0.94; letter-spacing: -0.005em; color: var(--ink); max-width: 15ch; margin: 16px 0 18px; }
.gen-hero-sub { font-size: clamp(16px, 2.2vw, 18px); line-height: 1.55; color: #51564F; max-width: 44ch; margin: 0 0 26px; }
.gen-hero-sub b { color: var(--ink); font-weight: 600; }
.gen-hero-ctas { display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; }
.gen-hero-count { margin-top: 24px; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #51564F; display: inline-flex; align-items: center; gap: 9px; }
.gen-hero-count .gen-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-deep); animation: gen-pulse 2s ease-in-out infinite; }
.gen-hero-count b { color: #0E3F33; font-weight: 600; }
@keyframes gen-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .55; } }

/* ================= TICKER ================= */
.gen-ticker { padding: 20px 0; overflow: hidden; border-top: 1px solid rgba(11,19,14,0.10); border-bottom: 1px solid rgba(11,19,14,0.10); }
.gen-ticker-track { display: flex; width: max-content; }
@media (prefers-reduced-motion: no-preference) {
  .gen-ticker-track { animation: gen-ticker 42s linear infinite; }
  @keyframes gen-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
}
.gen-ticker-row { display: flex; align-items: center; flex-shrink: 0; }
.gen-ticker-item { display: flex; align-items: center; flex-shrink: 0; }
.gen-ticker-item > span:first-child { font-family: 'Big Shoulders Display', sans-serif; font-weight: 700; text-transform: uppercase; font-size: clamp(17px, 2vw, 20px); letter-spacing: 0.05em; white-space: nowrap; color: #0E3F33; }
.gen-ticker-sphere { width: 14px; height: 14px; border-radius: 50%; margin: 0 clamp(28px, 4vw, 40px); background: radial-gradient(circle at 35% 30%, #fff 0%, #E2E6E0 38%, #B7C0B5 78%, #80897C 100%); box-shadow: inset 0 0 0 1px rgba(11,19,14,0.12); flex-shrink: 0; }

/* ================= MANIFESTO ================= */
.gen-man-statement { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(34px, 5vw, 64px); line-height: 0.96; letter-spacing: -0.005em; color: var(--on); max-width: 20ch; margin: 18px 0 0; }
.gen-man-body { font-size: clamp(16px, 2vw, 19px); line-height: 1.6; color: var(--on-dim); max-width: 56ch; margin-top: 20px; }
.gen-man-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: clamp(40px, 6vw, 64px); }
.gen-man-card { background: rgba(255,255,255,0.72); border: 1px solid rgba(11,19,14,0.10); border-radius: 22px; padding: 26px 24px; box-shadow: 0 1px 0 rgba(11,19,14,.03), 0 18px 40px -22px rgba(11,19,14,.18); }
.gen-man-not { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.06em; color: #8A8D84; text-decoration: line-through; text-decoration-color: rgba(110,91,224,0.6); }
.gen-man-is { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(26px, 3vw, 34px); line-height: 1.02; color: #0E3F33; margin-top: 10px; }
.gen-man-note { font-size: 14px; line-height: 1.55; color: var(--on-dim); margin-top: 10px; }
@media (max-width: 820px) { .gen-man-grid { grid-template-columns: 1fr; } }

/* ================= OFFERS (accordion) =================
   Six tiles laid out two per row. The pair in a row opens and closes together
   (genesis.js drives them as one unit), so the row bottoms always line up. */
.gen-off-list { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 4vw, 56px); }
.gen-off-row { border-top: 1px solid rgba(11,19,14,0.10); }
.gen-off-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(20px, 3vw, 28px) 0; text-align: left; }
.gen-off-title { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(24px, 4vw, 34px); line-height: 1; color: var(--on); transition: color .25s; }
.gen-off-row.open .gen-off-title { color: #0E3F33; }
.gen-off-plus { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(11,19,14,0.10); display: inline-flex; align-items: center; justify-content: center; color: var(--on-dim); transition: transform .3s cubic-bezier(.16,1,.3,1), background .25s, color .25s; }
.gen-off-row.open .gen-off-plus { transform: rotate(45deg); background: #0E3F33; color: #EAF3E7; border-color: #0E3F33; }
.gen-off-panel { overflow: hidden; height: 0; transition: height .45s cubic-bezier(.16,1,.3,1); }
.gen-off-panel-inner { padding-bottom: 28px; font-size: clamp(16px, 2vw, 18px); line-height: 1.6; color: var(--on-dim); max-width: 58ch; }
.gen-off-panel-inner b { color: var(--on); font-weight: 600; }

/* ================= SCORING =================
   Four weighting cards sharing the card language used elsewhere on the page
   (white sheet, hairline border, 22px radius). The weight leads as a large
   gradient number, then the category, then a track showing that weight as a
   proportion of the whole, then what actually counts toward it. */
.gen-weight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 20px); }
.gen-weight {
  display: flex; flex-direction: column;
  background: rgba(255,255,255,0.72); border: 1px solid rgba(11,19,14,0.10);
  border-radius: 22px; padding: clamp(20px, 2.4vw, 28px);
  box-shadow: 0 1px 0 rgba(11,19,14,.03), 0 18px 40px -22px rgba(11,19,14,.18);
  transition: transform .25s, box-shadow .25s;
}
.gen-weight:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(11,19,14,.05), 0 28px 54px -24px rgba(11,19,14,.26); }
.gen-weight-pct {
  font-family: 'Big Shoulders Display', sans-serif; font-weight: 900;
  font-size: clamp(40px, 5vw, 58px); line-height: 0.86; letter-spacing: -0.01em;
  background: var(--glow-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; padding-right: 0.04em;
}
.gen-weight-pct span:last-child { font-size: 0.5em; vertical-align: top; }
/* the track sits above the category as a rule, with clear air on both sides */
.gen-weight-track { height: 4px; border-radius: 999px; background: rgba(11,19,14,0.08); margin: 18px 0 0; overflow: hidden; }
.gen-weight-label { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(19px, 2.2vw, 26px); line-height: 1.02; color: var(--on); margin: 18px 0 0; }
.gen-weight-line { height: 100%; border-radius: 999px; background: var(--glow-grad); }
.gen-weight-body { font-size: clamp(14px, 1.6vw, 16px); line-height: 1.55; color: var(--on-dim); margin: 12px 0 0; }

/* ================= REWARDS =================
   Was a dark green band; now runs on the same light/dark alternation as every
   other section, so every element reads from --on / --on-dim and the accents
   use the site's deep green and violet rather than mint on emerald. */
.gen-split-bar { display: flex; height: clamp(56px, 8vw, 64px); border-radius: 999px; overflow: hidden; background: rgba(11,19,14,0.06); }
.gen-split-seg { height: 100%; transform-origin: left; }
.gen-split-legend { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; margin-top: 20px; }
.gen-split-pct { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: clamp(22px, 3vw, 28px); line-height: 1; color: var(--on); }
.gen-split-cap { font-family: 'JetBrains Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--on-dim-2); margin: 6px 0; }
.gen-split-note { font-size: 13px; line-height: 1.45; color: var(--on-dim); max-width: 24ch; margin: 0; }
.gen-curve { display: flex; align-items: flex-end; gap: clamp(3px, 0.8vw, 8px); height: clamp(220px, 32vw, 300px); margin-top: clamp(56px, 8vw, 88px); }
.gen-curve-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.gen-curve-val { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: clamp(15px, 2.2vw, 24px); line-height: 1; color: var(--accent-deep); margin-bottom: 8px; }
.gen-curve-bar { width: 100%; border-radius: 6px 6px 0 0; background: rgba(11,19,14,0.12); }
.gen-curve-bar.top3 { background: linear-gradient(180deg, var(--violet) 0%, var(--accent-deep) 100%); }
.gen-curve-rank { font-family: 'JetBrains Mono', monospace; font-size: clamp(9px, 1.4vw, 11px); margin-top: 8px; color: var(--on-dim-2); }
.gen-curve-rank.top3 { color: var(--on); }
.gen-curve-note { margin-top: 14px; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dim-2); }
.gen-sched { margin-top: 40px; }
.gen-sched summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-family: 'JetBrains Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--on); user-select: none; }
.gen-sched summary::-webkit-details-marker { display: none; }
.gen-sched-plus { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(11,19,14,0.22); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.gen-sched[open] .gen-sched-plus { transform: rotate(45deg); }
.gen-sched-table-wrap { margin-top: 24px; border-radius: 24px; overflow-x: auto; background: rgba(255,255,255,0.6); border: 1px solid rgba(11,19,14,0.07); }
table.gen-sched-table { width: 100%; min-width: 640px; border-collapse: collapse; }
.gen-sched-table th { font-family: 'JetBrains Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--on-dim-2); font-weight: 500; padding: 16px 24px; text-align: right; }
.gen-sched-table th:first-child { text-align: left; width: 90px; }
.gen-sched-table td { font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--on); padding: 12px 24px; text-align: right; border-top: 1px solid rgba(11,19,14,0.07); }
.gen-sched-table td:first-child { text-align: left; color: var(--on-dim-2); }
.gen-sched-table td.mint { color: var(--accent-deep); font-weight: 600; }
.gen-rewards-fine { margin-top: 40px; font-size: 13px; line-height: 1.65; color: var(--on-dim); max-width: 72ch; }

/* ================= DOORS =================
   The tab/panel block was replaced by the home page's Vanar Foundry widget
   (.run-ai), which is styled by styles.css. Only the closing line is local. */
.gen-door-foot { margin-top: 40px; font-size: 14px; color: var(--on-dim); text-align: center; }

/* ================= JOURNEY (scroll-drawn rail) ================= */
.gen-rail { position: relative; padding-left: clamp(40px, 6vw, 64px); }
.gen-rail-track { position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: rgba(11,19,14,0.12); }
.gen-rail-fill { position: absolute; left: 6px; top: 8px; bottom: 8px; width: 3px; border-radius: 999px; background: linear-gradient(180deg, var(--accent-deep), var(--violet)); transform: scaleY(0); transform-origin: top; }
.gen-steps { display: flex; flex-direction: column; gap: clamp(48px, 6vw, 64px); list-style: none; margin: 0; padding: 0; }
.gen-step { position: relative; }
.gen-step-dot { position: absolute; left: clamp(-64px, -6vw, -40px); top: 4px; width: 16px; height: 16px; border-radius: 50%; background: #0E3F33; box-shadow: 0 0 0 4px rgba(14,60,53,0.14); }
.gen-step:last-child .gen-step-dot { background: var(--violet); box-shadow: 0 0 0 4px rgba(110,91,224,0.18); }
.gen-step-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 8px; }
.gen-step-n { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: clamp(22px, 3vw, 26px); line-height: 1; color: #0E3F33; opacity: 0.4; }
.gen-step:last-child .gen-step-n { color: var(--violet); opacity: 0.75; }
.gen-step-title { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(22px, 3.2vw, 28px); line-height: 1; color: var(--on); margin: 0; }
.gen-step-body { font-size: clamp(15px, 2vw, 17px); line-height: 1.55; color: var(--on-dim); max-width: 56ch; margin: 0; }
.gen-step-out { display: inline-block; margin-top: 10px; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); }

/* ================= SEASON (roadmap) ================= */
.gen-road { position: relative; margin-top: clamp(48px, 7vw, 72px); }
.gen-road-line { position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: rgba(11,19,14,0.12); }
.gen-road-fill { position: absolute; left: 0; top: 11px; height: 2px; background: linear-gradient(90deg, var(--accent-deep), var(--violet)); transform: scaleX(0); transform-origin: left; }
.gen-road-cols { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 3vw, 32px); }
.gen-road-node { position: relative; padding-top: 44px; }
.gen-road-dot { position: absolute; top: 3px; left: 0; width: 18px; height: 18px; border-radius: 50%; background: #E6EBE4; border: 2px solid rgba(11,19,14,0.22); transition: border-color .4s, background .4s, box-shadow .4s; }
.gen-road-node.lit .gen-road-dot { border-color: #0E3F33; background: #0E3F33; box-shadow: 0 0 0 5px rgba(14,60,53,0.12); }
.gen-road-node:last-child.lit .gen-road-dot { border-color: var(--violet); background: var(--violet); box-shadow: 0 0 0 5px rgba(110,91,224,0.16); }
.gen-road-tag { font-family: 'JetBrains Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--on-dim); transition: color .4s; }
.gen-road-node.lit .gen-road-tag { color: var(--accent-deep); }
.gen-road-title { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(21px, 2.6vw, 27px); line-height: 1.02; color: var(--on); margin: 8px 0; }
.gen-road-body { font-size: 14px; line-height: 1.55; color: var(--on-dim); margin: 0; }
.gen-road-node:last-child .gen-road-title { color: #0E3F33; }
@media (max-width: 860px) {
  .gen-road-line, .gen-road-fill { left: 11px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; transform-origin: top; }
  .gen-road-fill { transform: scaleY(0); }
  .gen-road-cols { grid-template-columns: 1fr; gap: 36px; }
  .gen-road-node { padding-top: 0; padding-left: 40px; }
  .gen-road-dot { top: 2px; left: 2px; }
}

/* ================= CLOSING BOOKEND ================= */
.gen-bookend { position: relative; overflow: hidden; padding-top: clamp(96px, 14vw, 160px); padding-bottom: clamp(96px, 14vw, 160px); }
/* The outline fills the whole section, edge to edge on both axes. It is SVG
   rather than styled text so that preserveAspectRatio="none" can stretch the
   glyphs to the box while vector-effect keeps the stroke a true hairline -
   scaling real text would thicken the horizontal bars ~5x and thin the stems
   away to nothing. genesis.js sets the viewBox from the rendered glyph bounds
   so the letters meet the edges rather than the em box doing so. */
.gen-bookend-ghost { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.22; overflow: visible; }
.gen-bookend-ghost text {
  font-family: 'Big Shoulders Display', sans-serif; font-weight: 900;
  font-size: 200px; letter-spacing: -0.01em;
  fill: none; stroke: #0E3F33; stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
/* same gradient treatment as the home page's closing CTA card: a 150deg
   deep->base ramp with a radial glow laid over the top edge */
.gen-bookend-card { position: relative; overflow: hidden; margin: 0 auto; max-width: 820px; border-radius: 28px; padding: clamp(48px, 7vw, 64px) clamp(24px, 5vw, 56px); display: flex; flex-direction: column; align-items: center; text-align: center; background: linear-gradient(150deg, var(--deep) 0%, var(--base) 70%); border: 1px solid var(--hair-2); box-shadow: 0 4px 14px -2px rgba(11,19,14,.16), 0 30px 60px -22px rgba(11,19,14,.34); }
.gen-bookend-card > * { position: relative; }
.gen-bookend-h { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(38px, 6vw, 64px); line-height: 0.94; letter-spacing: -0.005em; color: #D8E6D3; margin: 0 0 16px; }
.gen-bookend-h .gen-sig-on { background: linear-gradient(92deg, #8FCFB0 0%, #B6A8F2 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.gen-bookend-sub { font-size: clamp(16px, 2.2vw, 18px); line-height: 1.55; color: rgba(216,230,211,0.66); max-width: 42ch; margin: 0 0 30px; }
.gen-bookend-fine { font-size: 13px; line-height: 1.6; color: rgba(216,230,211,0.5); max-width: 64ch; margin-top: 30px; }

/* ================= MOBILE =================
   Same rules the rest of the site follows: 44px tap targets, no layout that
   needs a horizontal scroll, and the section rhythm handled by one owner. */
@media (max-width: 720px) {
  .gen-sec, .gen-bookend { padding-top: 58px !important; padding-bottom: 58px !important; }
  .gen-wrap { padding-left: 16px; padding-right: 16px; }
  .gen-hero { min-height: 0; }
  .gen-hero-body { padding: 104px 16px 40px; }
  .gen-hero-panel { border-radius: 28px; padding: 28px 20px; }
  .gen-hero-h1 { font-size: min(calc((100vw - 72px) / 5.4), 60px); max-width: none; }
  .gen-hero-ctas { width: 100%; }
  .gen-hero-ctas .pill-cta { flex: 1 1 100%; }
  .gen-bookend-card { border-radius: 28px; }
  /* The eyebrow rule is a flex sibling of the label. Once the label wraps to two
     centred lines the rule is stranded on the left, reading as a stray dash. */
  .gen-bookend-card .gen-eyebrow::before { display: none; }

  /* payout schedule: 5 columns cannot fit, so each row becomes a card */
  .gen-sched-table-wrap { overflow-x: visible; }
  table.gen-sched-table { min-width: 0; }
  .gen-sched-table thead { display: none; }
  .gen-sched-table, .gen-sched-table tbody, .gen-sched-table tr, .gen-sched-table td { display: block; }
  /* These row/label colours were hard-coded light for a dark band. The section
     runs .sec-light, so they were light-on-light and unreadable — read the
     alternation tokens instead, the way the desktop table already does. */
  .gen-sched-table tr { padding: 12px 18px; border-top: 1px solid var(--hair-2); }
  .gen-sched-table td { padding: 0 !important; text-align: left !important; border: 0; }
  .gen-sched-table td:first-child { font-size: 18px; color: var(--on); margin-bottom: 4px; }
  .gen-sched-table td:not(:first-child) { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0 !important; }
  .gen-sched-table td:not(:first-child)::before { content: attr(data-label); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dim-2); }

  /* 20 bars in a 358px column leaves ~14px each: show rank 1-10 only, and
     say so, rather than rendering a row of slivers nobody can read */
  .gen-curve-col:nth-child(n+11) { display: none; }
  .gen-curve { height: 200px; }
  .gen-curve-val { font-size: 12px; }
  /* halving the bar count leaves room for a legible axis label */
  .gen-curve-rank { font-size: 12px; }

  .gen-split-legend { grid-template-columns: 1fr; gap: 18px; }
  .gen-split-note { max-width: none; }
  .gen-step-dot { left: -40px; }

  /* one tile per row on a phone. The offers tiles still open and close in
     pairs, so the first two are expanded together, they just stack instead of
     sitting side by side. Full-width tiles need no size reductions, so the
     desktop type and spacing carry straight over. */
  .gen-off-list, .gen-weight-grid { grid-template-columns: 1fr; }
}