/* PokerNow HUD Advanced: home page only. Loaded after core.css (tokens, header, footer, HUD). */

/* ---------- hero ---------- */
.hero { position: relative; padding-block: 40px 64px; overflow: hidden; }
/* A lamp over the table: a soft felt glow behind the demo. */
.hero::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  width: 1100px; height: 900px; right: -320px; top: -260px;
  background: radial-gradient(closest-side, rgba(26, 84, 70, 0.42), rgba(26, 84, 70, 0) 72%);
}
.hero-grid { display: grid; gap: 44px; align-items: start; }
@media (min-width: 1000px) {
  .hero { padding-block: 56px 96px; }
  .hero-grid { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: 56px; }
  .hero-copy { padding-top: 6px; }
}
.tagline { font-family: var(--display); font-weight: 600; font-size: 19px; line-height: 1.3; color: var(--gold); margin-bottom: 16px; }
@media (min-width: 720px) { .tagline { font-size: 21px; } }
.hero h1 { font-size: clamp(42px, 4.3vw + 6px, 66px); line-height: 0.98; letter-spacing: -0.016em; max-width: 11.5em; }
.hero .lede { margin-top: 24px; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin-top: 32px; }
/* Phones and tablets can't install it: offer to send the link instead. */
.share { display: none; gap: 6px; }
@media (max-width: 759px), (pointer: coarse) { .share { display: grid; } }
.share-note { max-width: 18em; }
.hero-fine { margin-top: 18px; max-width: 30em; }

/* ---------- table pieces (seats, plates, cards, board), used on the home page only ---------- */
.seat { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5em; min-width: 0; }
.plate {
  display: inline-flex; align-items: center; gap: 0.6em;
  background: rgba(6, 20, 22, 0.62); border-radius: 0.7em; padding: 0.45em 0.8em 0.45em 0.5em;
  box-shadow: inset 0 0 0 1px rgba(237, 230, 214, 0.08);
}
.plate .who { display: grid; line-height: 1.15; }
.plate .who b { font-weight: 600; font-size: 1.15em; }
.plate .who span { color: var(--dim); font-size: 1em; }
.plate .pos {
  align-self: flex-start; margin-left: 0.2em;
  font-size: 0.85em; font-weight: 600; color: var(--dim);
  border: 1px solid var(--rule); border-radius: 0.35em; padding: 0.05em 0.35em;
}
.seat.out .plate { opacity: 0.55; }
.betchip { display: inline-flex; align-items: center; gap: 0.35em; font-weight: 600; font-size: 1.05em; }
.betchip i {
  width: 1em; height: 1em; border-radius: 50%; flex: none;
  background: radial-gradient(circle, var(--ink) 0 30%, transparent 32%), repeating-conic-gradient(var(--bone) 0 30deg, var(--gold) 30deg 60deg);
}
.hole { display: inline-flex; gap: 0.2em; }
.card {
  position: relative; display: inline-block; flex: none;
  width: 2.1em; height: 2.9em; border-radius: 0.32em;
  background: #f6f1e4; color: #17242a;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  font-family: var(--display); font-weight: 700;
}
.card.red { color: #b73a30; }
.card .r { position: absolute; left: 0.24em; top: 0.1em; font-size: 1.2em; line-height: 1; }
.card svg { position: absolute; right: 0.22em; bottom: 0.22em; width: 1em; height: 1em; fill: currentColor; }
.card.back {
  background: repeating-linear-gradient(45deg, #1d3d4a 0 0.22em, #24495a 0.22em 0.44em);
  box-shadow: inset 0 0 0 0.14em #c4964e, 0 1px 0 rgba(0, 0, 0, 0.3);
}
.board { display: grid; justify-items: center; gap: 0.6em; padding-block: 0.4em; }
.board .pot { color: var(--soft); font-size: 1.05em; }
.board .pot b { color: var(--bone); font-weight: 600; }
.board .cards { display: flex; gap: 0.4em; }
.board .card, .board .slot { width: 2.9em; height: 4em; border-radius: 0.4em; }
.board .card .r { font-size: 1.55em; left: 0.26em; top: 0.12em; }
.board .card svg { width: 1.35em; height: 1.35em; right: 0.26em; bottom: 0.26em; }
.board .slot { box-shadow: inset 0 0 0 1px rgba(237, 230, 214, 0.12); }
/* Your tag (styles.ts .tg): a chip in front of the numbers, in em of its 10.5px (10.5/13 in a
   pill, 10.5/13.5 on an open badge's first row). One class per tags.ts color: the CSP blocks
   the extension's inline --tg. */
.hud .tg {
  display: inline-block; flex: none; align-self: center; max-width: 5.905em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.808em; font-weight: 700; line-height: 1.333; letter-spacing: 0.01em; padding: 0 0.476em; margin: 0 -0.19em 0 -0.476em;
  border-radius: 0.667em; background: var(--tg, #e9e2e6); color: var(--ink); box-shadow: 0 0 0 1px rgba(13, 31, 38, 0.55);
}
.hud .base > .tg { font-size: 0.778em; margin-left: -0.381em; }
.hud .tg:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.tg.c-blue { --tg: #5d8ffc; }
.tg.c-purple { --tg: #caa9ff; }
.tg.c-gray { --tg: #e9e2e6; }

/* ---------- the demo hand ---------- */
.demo { margin: 0; min-width: 0; }
.demo-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule); flex: none; }
.tabs button {
  font-family: var(--display); font-weight: 600; font-size: 16px; line-height: 1.2;
  color: var(--dim); background: none; border: 0; border-radius: 6px; padding: 7px 14px; cursor: pointer;
}
.tabs button:hover { color: var(--bone); }
.tabs button[aria-selected='true'] { background: var(--bone); color: var(--ink); }
/* The progress bar is the autoplay clock (home.js advances on its animationend). */
.demo-progress { position: relative; flex: 1; height: 2px; min-width: 24px; border-radius: 2px; background: var(--rule); overflow: hidden; }
.demo-progress::after { content: ''; position: absolute; inset: 0; background: var(--gold); transform-origin: left center; transform: scaleX(0); }
.demo-progress.run::after { animation: demo-clock 7s linear forwards; }
.demo.held .demo-progress.run::after { animation-play-state: paused; }
@keyframes demo-clock { to { transform: scaleX(1); } }
.demo-pause {
  flex: none; padding: 6px 2px;
  font-family: var(--display); font-weight: 500; font-size: 15px; color: var(--dim);
  background: none; border: 0; cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 3px;
}
.demo-pause:hover { color: var(--bone); }
.demo-caption { color: var(--soft); font-size: 16px; line-height: 1.45; margin-top: 14px; min-height: 2.9em; max-width: 40em; }
.demo-note { margin-top: 6px; color: var(--dim); font-size: 14px; line-height: 1.4; }

/* The table. */
.stage { container-type: inline-size; padding: 20px 18px 18px; display: flex; flex-direction: column; border-radius: 30px; isolation: isolate; }
/* The betting line on the felt. */
.stage::before {
  content: ''; position: absolute; inset: 12% 7% 16%; z-index: -1; pointer-events: none;
  border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(237, 230, 214, 0.06), 0 0 0 1px rgba(4, 18, 16, 0.25);
}
.stage-inner { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; transition: opacity 150ms linear; }
/* Room for the tallest of the three spots before the script measures them, so nothing below
   moves. Measured at each of the table's widths (the HUD's type size steps at 444 and 560px). */
.stage-inner { min-height: 632px; }
@container (min-width: 300px) { .stage-inner { min-height: 612px; } }
@container (min-width: 444px) { .stage-inner { min-height: 655px; } }
@container (min-width: 560px) { .stage-inner { min-height: 596px; } }
@container (min-width: 590px) { .stage-inner { min-height: 511px; } }
.stage-inner.fading { opacity: 0; }
.stage-inner.probe { position: absolute; left: 18px; right: 18px; visibility: hidden; }
.stage .hud { font-size: 13px; }
@container (min-width: 444px) { .stage .hud { font-size: 14px; } }
@container (min-width: 560px) { .stage .hud { font-size: 15px; } }
.stage .row-top { position: relative; display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: flex-start; justify-content: space-between; }
.stage .row-bottom { display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: flex-end; justify-content: space-between; }
.stage .row-bottom .dock { margin-left: auto; }
.stage .seat-line { display: flex; align-items: center; gap: 0.6em; flex-wrap: wrap; }
/* The other players still at the table: the blinds. */
.stage .others { display: flex; gap: 10px 14px; align-items: flex-start; font-size: 0.9em; }
.stage .mini-seat { gap: 0.4em; }
.stage .mini-seat .plate { padding: 0.35em 0.7em 0.35em 0.45em; }
.stage .mini-seat .card { width: 1.7em; height: 2.35em; }
.stage .mini-seat.out .plate { padding-left: 0.7em; }
/* River: the tooltip for the lit number, pinned. Wide tables float it over the folded blinds. */
.stage .tip.pinned { display: none; }
.hud .tip.pinned-mini .hint { margin-top: 0.15em; }
@container (max-width: 559px) {
  .stage .row-top { flex-direction: column; }
  .stage .others { font-size: 0.86em; }
  .stage .row-top > .tip { width: 100%; max-width: none; }
  .stage .row-bottom { flex-direction: column-reverse; align-items: stretch; }
  .stage .row-bottom .dock { width: 100%; margin-left: 0; }
}
@container (min-width: 560px) {
  .stage .tip.pinned { display: block; position: absolute; top: 0; right: 0; z-index: 3; max-width: 17.5em; box-shadow: 0 0.6em 1.6em rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(243, 207, 122, 0.25); }
  .stage .tip.pinned-mini { display: none; }
}
/* Cards dealt on the flop and river. */
.board .card.deal { animation: deal 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.board .card.deal.d2 { animation-delay: 90ms; }
.board .card.deal.d3 { animation-delay: 180ms; }
@keyframes deal { from { opacity: 0; transform: translateY(-0.9em) scale(0.92); } to { opacity: 1; transform: none; } }

/* ---------- trust strip ---------- */
.trust { border-block: 1px solid var(--rule); background: rgba(19, 43, 53, 0.55); }
.trust-list { list-style: none; margin: 0; padding: 0; display: grid; }
.trust-list li { display: grid; gap: 4px; align-content: start; padding: 22px 0; }
.trust-list li + li { border-top: 1px solid var(--rule); }
.trust-list b { font-family: var(--display); font-weight: 600; font-size: 19px; line-height: 1.25; color: var(--bone); }
.trust-list span { color: var(--dim); font-size: 15.5px; line-height: 1.45; }
.trust-list a { color: var(--focus); white-space: nowrap; }
@media (min-width: 720px) {
  .trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .trust-list li:nth-child(2) { border-top: 0; }
}
@media (min-width: 1100px) {
  .trust-list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; }
  .trust-list li { padding: 28px 28px 30px; border-top: 0; }
  .trust-list li:first-child { padding-left: 0; }
  .trust-list li + li { border-top: 0; border-left: 1px solid var(--rule); }
}

/* ---------- a real table ---------- */
.live-grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1000px) { .live-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; } }
.live-copy p { color: var(--soft); margin-top: 18px; max-width: 30em; }
.live-copy p.muted { color: var(--dim); font-size: 16px; }
.live-shot { margin: 0; min-width: 0; }
.live-shot .shot { border-radius: 14px; }

/* ---------- features ---------- */
.features { padding-top: 0; }
.feature h2 { font-size: clamp(30px, 3.4vw, 42px); }
.feature p { color: var(--soft); margin-top: 16px; max-width: 32em; }
.feature p.aside { color: var(--dim); font-size: 16px; }
.duo { display: grid; gap: 72px; }
@media (min-width: 1000px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: start; } }
.vignette { margin: 0 0 30px; min-width: 0; }
.vignette .felt { container-type: inline-size; display: grid; place-items: center; padding: 26px 20px; border-radius: 24px; }
@media (min-width: 1000px) { .vignette .felt { min-height: 400px; } }
.vignette figcaption { margin-top: 12px; color: var(--dim); font-size: 14px; line-height: 1.4; }

/* Six seats around a table: you at the bottom, then clockwise SB, BB, UTG, HJ, CO. */
.seats6 { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.55fr); grid-template-rows: auto minmax(40px, 1fr) auto; gap: 14px 10px; font-size: 13px; }
@container (min-width: 500px) { .seats6 { font-size: 14px; gap: 18px 14px; } }
.seats6 .seat { align-items: center; text-align: left; }
/* The badge you just clicked open comes to the front. */
.seats6 .seat:focus-within { z-index: 2; }
.seats6 .seat.up { flex-direction: column-reverse; }
.seats6 .s-theo { grid-area: 1 / 1; } .seats6 .s-ana { grid-area: 1 / 2; } .seats6 .s-jules { grid-area: 1 / 3; }
.seats6 .s-mika { grid-area: 3 / 1; } .seats6 .s-you { grid-area: 3 / 2; } .seats6 .s-rr { grid-area: 3 / 3; }
.seats6 .s-rr .badge, .seats6 .s-jules .badge { align-self: flex-end; }
.seats6 .s-jules { align-items: flex-end; }
.seats6 .pot6 { grid-area: 2 / 1 / 3 / 4; place-self: center; color: var(--soft); font-size: 1.05em; }
.seats6 .pot6 b { color: var(--bone); font-weight: 600; }
/* Smaller cards and gaps than the demo's plates, so three plates with cards fit one row. */
.seats6 .plate { gap: 0.45em; padding: 0.4em 0.75em 0.4em 0.7em; }
.seats6 .card { width: 1.7em; height: 2.35em; }
/* Narrow tables (three plates with cards don't fit one row): the player to act first, the
   other five in a row of three, without hole cards. */
@container (max-width: 469px) {
  .seats6 { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; gap: 14px 8px; font-size: 12.5px; }
  .seats6 .s-rr { grid-area: 1 / 1 / 2 / 4; flex-direction: column; align-items: flex-start; }
  .seats6 .s-theo { grid-area: 2 / 1; } .seats6 .s-ana { grid-area: 2 / 2; } .seats6 .s-jules { grid-area: 2 / 3; }
  .seats6 .s-mika { grid-area: 3 / 1; } .seats6 .s-you { grid-area: 3 / 2; }
  .seats6 .seat, .seats6 .s-jules { align-items: flex-start; }
  .seats6 .seat.up { flex-direction: column; }
  .seats6 .badge, .seats6 .s-rr .badge, .seats6 .s-jules .badge { align-self: flex-start; }
  .seats6 .seat:not(.s-rr):not(.s-you) .hole { display: none; }
  .seats6 .s-you .card { width: 1.7em; height: 2.35em; }
  .seats6 .pot6 { display: none; }
  /* A badge clicked open grows from its column toward the middle, so it stays on the table. */
  .seats6 .s-ana .badge.open, .seats6 .s-you .badge.open { align-self: center; }
  .seats6 .s-jules .badge.open { align-self: flex-end; }
}
/* The narrowest tables (phones): two columns, so a pill with its tag, type and note dot fits. */
@container (max-width: 349px) {
  .seats6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seats6 .s-rr { grid-area: 1 / 1 / 2 / 3; }
  .seats6 .s-theo { grid-area: 2 / 1; } .seats6 .s-ana { grid-area: 2 / 2; }
  .seats6 .s-jules { grid-area: 3 / 1; } .seats6 .s-mika { grid-area: 3 / 2; }
  .seats6 .s-you { grid-area: 4 / 1; }
  .seats6 .s-jules .badge.open, .seats6 .s-you .badge.open { align-self: flex-start; }
  .seats6 .s-ana .badge.open, .seats6 .s-mika .badge.open { align-self: flex-end; }
}
.options-felt > .hud { font-size: 13px; }
@container (min-width: 440px) { .options-felt > .hud { font-size: 15px; } }
.options-felt > .hud:not(.tip-layer) { width: 100%; display: flex; justify-content: center; }
.options-felt .dock { width: 25em; max-width: 100%; }
.vignette .felt > .hud, .anatomy .felt > .hud { min-width: 0; max-width: 100%; }

/* Reading a number: the tooltip, line by line. */
.anatomy-feature { margin-top: 112px; }
@media (min-width: 1000px) { .anatomy-feature { margin-top: 144px; } }
.anatomy-head { max-width: 46em; }
.anatomy { margin: 40px 0 0; display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) {
  .anatomy { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; }
  /* The tooltip stays in view while you read the notes beside it. */
  .anatomy > .felt { position: sticky; top: calc(var(--header) + 32px); }
}
.anatomy .felt { container-type: inline-size; padding: 30px 24px; display: grid; justify-items: center; gap: 14px; border-radius: 24px; }
.anatomy .hud { font-size: 15px; }
@container (max-width: 279px) { .anatomy .hud { font-size: 13px; } }
@container (min-width: 440px) { .anatomy .hud { font-size: 17px; } }
.anatomy .tip.big { max-width: 21em; width: calc(100% - 1.9em); padding: 0.7em 0.9em; }
.anatomy .tip.big > * { position: relative; }
.anatomy .tip.big > [data-n] { padding-block: 0.12em; }
.anatomy .tip.big [data-n]::before {
  content: attr(data-n) / ''; position: absolute; left: -2.6em; top: 50%; transform: translateY(-50%);
  width: 1.6em; height: 1.6em; border-radius: 50%; display: grid; place-items: center;
  font-size: 0.7em; font-weight: 700; line-height: 1; color: var(--ink); background: var(--gold);
  box-shadow: 0 0 0 0.18em var(--felt-2);
}
/* The title and the value are bigger type (1.125em, 1.5em): their markers are scaled back to 0.7em. */
.anatomy .tip.big .val[data-n]::before { font-size: 0.467em; }
.anatomy .tip.big b[data-n]::before { font-size: 0.622em; }
.anatomy .tip.big { margin-left: 1.9em; }
.anatomy-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: line; border-top: 1px solid var(--rule); }
.anatomy-notes li { counter-increment: line; display: grid; grid-template-columns: 2em minmax(0, 1fr); gap: 4px 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); color: var(--soft); font-size: 16px; line-height: 1.45; }
.anatomy-notes li::before {
  content: counter(line); grid-row: 1 / span 2; align-self: start; margin-top: 2px;
  width: 1.55em; height: 1.55em; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ink); background: var(--gold);
}
.anatomy-notes b { font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--bone); }
.legend { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 15px; color: var(--soft); }
.legend li { display: flex; align-items: baseline; gap: 8px; }
.legend .st { font-family: var(--display); font-size: 19px; font-weight: 600; }
.legend .high { color: var(--hot); } .legend .low { color: var(--cool); } .legend .thin { color: var(--faint); }

/* The player database. */
.db-feature { margin-top: 112px; display: grid; gap: 32px; align-items: center; }
@media (min-width: 1000px) { .db-feature { margin-top: 144px; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; } }
.db-shot { margin: 0; min-width: 0; }

/* Player types, reads and shown hands: copy on the right, the badge and its panel on the left. */
.types-feature { margin-top: 112px; display: grid; gap: 32px; align-items: center; }
@media (min-width: 1000px) {
  .types-feature { margin-top: 144px; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; }
  .types-copy { grid-column: 2; grid-row: 1; }
  .types-vignette { grid-column: 1; grid-row: 1; }
}
.types-vignette { margin: 0; }
.types-felt > .hud { font-size: 12px; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0.5em; width: 100%; }
@container (min-width: 440px) { .types-felt > .hud { font-size: 14px; } }
.types-hud .seat { align-items: center; }
/* The player panel, mirroring .panel in the extension's styles.ts (0.4.0), in em of its 12.5px:
   a bigger name, each read's number in a right-hand column, sentences in bone at 80% and 72%. */
.hud .panel { position: relative; width: 26.24em; max-width: 100%; background: var(--ink); border-radius: 0.64em; padding: 0.88em 0.96em 0.96em; box-shadow: inset 0 0 0 1px var(--edge), 0 0.64em 1.76em rgba(0, 0, 0, 0.45); font-size: 1.042em; line-height: 1.2; text-align: left; }
.hud .panel p { margin: 0; }
.hud .panel .close { position: absolute; top: 0.467em; right: 0.533em; padding: 0 0.2em; color: var(--dim); font-size: 1.2em; font-weight: 600; }
.hud .panel .ptitle { display: flex; flex-wrap: wrap; align-items: center; gap: 0.235em 0.412em; margin: 0 1.529em 0.176em 0; font-size: 1.36em; line-height: 1.15; font-weight: 700; }
.hud .panel .ptitle .ty { font-size: 0.618em; }
.hud .panel .aka { color: var(--dim); font-size: 0.92em; margin-bottom: 0.609em; }
.hud .panel .tyd { color: rgba(237, 230, 214, 0.8); line-height: 1.4; margin: 0 0 0.64em; }
.hud .panel .acts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.32em 1.12em; margin: 0 0 0.48em; }
.hud .panel .link { color: var(--focus); font-size: 0.96em; cursor: help; }
.hud .panel .sec { color: var(--dim); font-size: 0.84em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin: 1.333em 0 0.381em; }
.hud .panel .reads { list-style: none; margin: 0; padding: 0; }
.hud .panel .reads li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.8em; align-items: baseline; padding: 0.4em 0; border-top: 1px solid var(--rule); }
.hud .panel .rl { font-weight: 600; font-size: 1.04em; }
.hud .panel .reads li > .pair { justify-self: end; font-size: 1.04em; }
.hud .panel .ra { grid-column: 1 / -1; color: rgba(237, 230, 214, 0.72); font-size: 0.96em; line-height: 1.3; margin-top: 0.083em; }
.hud .panel .sd { padding: 0.4em 0; border-top: 1px solid var(--rule); }
.hud .panel .sd.flag { box-shadow: inset 2px 0 0 var(--hot); padding-left: 0.64em; }
.hud .panel .sdt { font-weight: 600; }
.hud .panel .line { color: var(--dim); font-size: 0.92em; line-height: 1.35; }
.hud .panel .link:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.more { margin-top: 18px; font-family: var(--display); font-weight: 600; font-size: 18px; }
.feature p.more { color: inherit; }
.more a { text-decoration-thickness: 1px; }

/* ---------- 139 stats ---------- */
.stats { border-top: 1px solid var(--rule); }
.stats-grid { display: grid; gap: 40px; }
@media (min-width: 1000px) { .stats-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; } }
.stats-copy p { color: var(--soft); margin-top: 18px; max-width: 30em; }
/* Every stat label, by street: a picture of how much is counted. Hidden from screen readers;
   the paragraph beside it says the same in words. */
.wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; font-family: var(--display); }
@media (min-width: 560px) { .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wall section { min-width: 0; }
.wall h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 16px; font-weight: 600; color: var(--soft); padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid var(--rule-2); }
.wall h3 span { color: var(--gold); font-weight: 700; }
.wall ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 3px 9px; font-size: 14px; line-height: 1.5; color: rgba(159, 177, 182, 0.72); font-weight: 500; }
.wall li.key { color: var(--bone); font-weight: 600; }

/* ---------- steps ---------- */
.start { border-block: 1px solid var(--rule); background: linear-gradient(180deg, rgba(19, 43, 53, 0.7), rgba(19, 43, 53, 0.35)); }
.start + .compare { border-top: 0; }
.start-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.steps { display: grid; gap: 32px; margin: 44px 0 0; padding: 0; list-style: none; counter-reset: step; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; } }
.steps li { counter-increment: step; border-top: 1px solid var(--rule); padding-top: 22px; }
.steps li::before {
  content: counter(step); display: block; margin-bottom: 14px;
  font-family: var(--display); font-weight: 700; font-size: 44px; line-height: 1; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.steps p { color: var(--soft); margin-top: 8px; }
.start .more { margin-top: 36px; }

/* ---------- how it compares ---------- */
.compare { border-top: 1px solid var(--rule); }
.compare-grid { display: grid; gap: 32px; }
@media (min-width: 1000px) { .compare-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; } }
.compare-grid p { color: var(--soft); margin-top: 18px; max-width: 32em; }
.compare-links { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.compare-links li { border-bottom: 1px solid var(--rule); }
.compare-links a { display: grid; gap: 2px; padding: 16px 0; text-decoration: none; color: var(--bone); font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.25; }
.compare-links a span { font-family: var(--body); font-weight: 400; font-size: 16px; color: var(--dim); }
.compare-links a:hover { color: var(--focus); }

/* ---------- questions ---------- */
.faq-section { border-top: 1px solid var(--rule); }
.faq-section .faq { margin-top: 36px; }

/* ---------- closing ---------- */
.closing { padding-block: 96px 112px; border-top: 1px solid var(--rule); position: relative; overflow: hidden; }
.closing::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; left: -260px; bottom: -420px; width: 900px; height: 800px;
  background: radial-gradient(closest-side, rgba(26, 84, 70, 0.4), rgba(26, 84, 70, 0) 72%);
}
.closing-grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 820px) { .closing-grid { grid-template-columns: auto minmax(0, 1fr); gap: 48px; } }
.closing-chip { width: 96px; height: 96px; }
@media (min-width: 820px) { .closing-chip { width: 148px; height: 148px; } }
.closing h2 { max-width: 13em; }
.closing p { color: var(--soft); margin-top: 18px; max-width: 30em; }
.closing .btn { margin-top: 30px; }