/* The home page's sections, below the hero and the proof bar: How it teaches,
   Every seat, the app, Free for everyone, the plans, the FAQ and the closing
   panel.

   Built from tokens.css and components.css; no colour literals. The rules the
   rest of /next/ keeps hold here too: transform and opacity are the only things
   that animate, no gradients, no dashed or dotted lines, and nothing is hidden
   until JS has run (site.js sets an entrance's start state itself, and only for
   pictures, never text). Nothing pins, scrubs or loops (redesign SPEC §4.7).
   Vertical rhythm is one token, --section-y. */

.section { padding-block: var(--section-y); }
.section--cta { padding-block: var(--space-5); }
.section--flush { padding-top: 0; }
.band { background: var(--panel); border-block: var(--stroke) solid var(--border); }

.section-header--center { margin-inline: auto; text-align: center; }
.section-header--center .section-header__line { margin-inline: auto; }
.lede { margin: var(--space-2) 0 0; max-width: var(--measure); color: var(--text-2); font-size: var(--fs-section); }

/* ---- Shot: an app screenshot in a phone frame ----------------------------------
   The same slim bezel as the demo. Screenshots are 600 x 1304. */

.shot {
  width: var(--shot-w, 16rem); margin: 0; background: var(--well);
  border: 6px solid var(--well); border-radius: 38px; overflow: hidden;
  box-shadow: 0 0 0 var(--stroke) var(--border);
}
.shot img { width: 100%; height: auto; }

/* The mix: how often the chart takes each action with a hand (How it teaches). */
.mix { display: grid; gap: var(--space-3); margin: 0; }
.mix__row { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) 2.75rem; align-items: center; gap: var(--space-2); font-size: var(--fs-meta); }
.mix__name { color: var(--text-2); }
.mix__track { height: 0.625rem; border-radius: var(--r-pill); background: var(--well); overflow: hidden; }
.mix__bar { display: block; width: 100%; height: 100%; background: var(--act); transform-origin: left; transform: scaleX(var(--f, 0)); }
.mix__bar--fold { --act: var(--act-fold); }
.mix__bar--call { --act: var(--act-call); }
.mix__bar--raise { --act: var(--act-raise); }
.mix__pct { text-align: right; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }

/* ---- The app (#app, redesign SPEC §6.6) -------------------------------------------
   Five real screenshots and CTA C on a band that is dark in both schemes: the
   section carries data-theme="dark", because the captures are dark-only. The
   track scrolls sideways and snaps; it bleeds to the screen's edges, with its
   first shot on the content's left edge (--edge) and only the gutter after the
   last, so at 1440 all five fit and on a phone the next one peeks. Shots have
   no captions (Stan, 2026-10-29); a Pro screen wears a "Pro" tab on its top
   edge, which the track's top padding leaves room for. A shot has no hover
   effect. The bankroll tracker (#bankroll) uses the same track. gallery.js shows the previous/next buttons only when the
   track overflows on a device that hovers; without it the track still scrolls,
   with a visible scrollbar where the pointer is fine. */

.gallery {
  --shot-w: 13.75rem;
  --edge: max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter)));
}
.gallery__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.gallery__nav { display: flex; flex: none; gap: var(--space-1); }
.gallery__nav[hidden] { display: none; }
.gallery__btn {
  display: grid; place-items: center; width: var(--hit); height: var(--hit); padding: 0;
  background: transparent; color: var(--text); border: var(--stroke) solid var(--border); border-radius: 50%;
  cursor: pointer; transition: transform var(--dur-press) var(--ease-press);
}
.gallery__btn:hover:not(:disabled) { background: var(--well); }
.gallery__btn { box-shadow: 0 3px 0 var(--border); transition: transform var(--dur-press) var(--ease-press), box-shadow var(--dur-press) var(--ease-press); }
.gallery__btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--border); }
.gallery__btn:disabled { color: var(--text-3); cursor: default; }
.gallery__btn svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gallery__track {
  display: flex; gap: var(--space-3); margin: var(--space-3) 0 0; padding: var(--space-2) var(--gutter) var(--space-2) var(--edge);
  list-style: none; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge) var(--gutter);
}
.gallery__track:focus-visible { outline-offset: -2px; }
.gallery__item { flex: none; scroll-snap-align: start; }
.gshot { position: relative; width: var(--shot-w); margin: 0; }
.gshot__pro {
  position: absolute; z-index: 1; top: -0.625rem; left: 50%; transform: translateX(-50%);
  padding: 0.25rem 0.75rem; border-radius: var(--r-pill);
  background: var(--accent-fill); color: var(--accent-fill-ink); box-shadow: 0 0 0 3px var(--bg);
  font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.06em; line-height: 1.2; text-transform: uppercase;
}
.gshot__frame {
  padding: 5px; background: var(--well);
  border: var(--stroke) solid var(--border); border-radius: calc(var(--shot-w) * 0.1);
}
.gshot__frame img { display: block; width: 100%; height: auto; border-radius: calc(var(--shot-w) * 0.1 - 6px); }
.gallery__cta { margin-top: var(--space-3); background: var(--bg); }
@media (pointer: coarse) {
  .gallery__track { scrollbar-width: none; }
  .gallery__track::-webkit-scrollbar { display: none; }
}
@media (pointer: fine) { .gallery__track { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } }
@media (min-width: 48rem) { .gallery { --shot-w: 15rem; } }
/* 5 x 14rem + 4 gaps + the end padding fit beside the content's left edge at 1440. */
@media (min-width: 90rem) { .gallery { --shot-w: 14rem; } }
@media (min-width: 120rem) { .gallery { --shot-w: 14.5rem; } }

/* ---- Free for everyone (#progress, redesign SPEC §6.7) -------------------------------
   Two cards, each with captures from the app: badges, and the Home Screen
   widgets. One column on a phone, two from 48rem, pictures on the
   cards' bottom edge. The bankroll tracker has its own section (#bankroll). */

.perks__grid { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.perk {
  display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-3);
  background: var(--panel); color: var(--text); border: var(--stroke) solid var(--border); border-radius: var(--r-panel);
}
.perk__title { margin: 0; text-wrap: balance; }
.perk__text { margin: var(--space-1) 0 0; color: var(--text-2); text-wrap: pretty; }
.perk__visual { margin: auto 0 0; }
@media (min-width: 48rem) { .perks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } }
@media (min-width: 64rem) { .perk { gap: var(--space-3); padding: var(--space-4); } }

/* Card 1: two captures from the app: the "Badge earned" banner, and the
   Badges screen's count with one seat's ladder in progress. */
.bshots { display: grid; gap: var(--space-2); justify-items: start; }
.bshots img { display: block; width: 100%; height: auto; }
.bshots__banner { max-width: 20rem; }
.bshots__list { max-width: 26rem; }

/* Card 2: the medium and small widgets, captured from the app (dark; the
   corners are cut to the widget's shape, transparent). The small one shows
   beside the medium one when the card has room. */
.wshots { display: flex; align-items: flex-end; gap: var(--space-1); container-type: inline-size; }
.wshots img { display: block; height: auto; }
.wshots__m { width: min(100%, 22rem); }
.wshots .wshots__s { display: none; width: 7.25rem; }
@container (min-width: 28rem) { .wshots .wshots__s { display: block; } }
@container (min-width: 28rem) { .wshots__m { width: calc(100% - 7.25rem - var(--space-1)); max-width: 22rem; } }

/* ---- Bankroll tracker (#bankroll) ------------------------------------------------
   Dark in both schemes like #app, because the captures are dark. The four
   tracker screens on the gallery's track, then the Live Activity: copy and the
   Lock Screen capture, stacked on a phone, side by side from 64rem. */
.bankroll { background: var(--bg); color: var(--text); }
.live {
  display: grid; gap: var(--space-3); align-items: center; margin-top: var(--space-3); padding: var(--space-3);
  background: var(--panel); border: var(--stroke) solid var(--border); border-radius: var(--r-panel);
}
.live__title { margin: 0; text-wrap: balance; }
.live__text { margin: var(--space-1) 0 0; color: var(--text-2); text-wrap: pretty; }
.live__shot { display: block; width: 100%; max-width: 32rem; height: auto; }
@media (min-width: 64rem) {
  .live { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: var(--space-5); padding: var(--space-4); }
}

/* ---- Plans (#pricing, redesign SPEC §6.8) ----------------------------------------
   Free and Pro, stacked on a phone, side by side from 768px. The grid stretches
   the two cards to one height, and six list items each keep their bottoms level:
   Free's button (CTA D, the card's full width) and Pro's status line both sit at
   the bottom (margin-top: auto). */

.plans { display: grid; gap: var(--space-2); margin-top: var(--space-5); }
.plan {
  display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3);
  background: var(--panel); color: var(--text); border: var(--stroke) solid var(--border); border-radius: var(--r-panel);
}
.plan--pro { border-color: var(--accent); }
.plan__tier { margin: 0; color: var(--text-2); }
.plan--pro .plan__tier { color: var(--accent); }
.plan__price { margin: var(--space-1) 0 0; font-size: var(--fs-headline); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.plan__per { font-size: var(--fs-body); font-weight: 400; letter-spacing: 0; color: var(--text-2); }
.plan__alt { margin: var(--space-1) 0 0; color: var(--text-2); }
.plan__alt b { color: var(--text); font-weight: 600; }
.plan__lead { margin: 0; color: var(--text-2); font-size: var(--fs-meta); }
.plan__list { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.plan__list li { position: relative; padding-left: 1.75rem; }
.plan__list li::before {
  content: ""; position: absolute; left: 0.3rem; top: 0.35em; width: 0.4rem; height: 0.75rem;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg);
}
.plan__list b { font-weight: 600; }
.plan .btn, .plan .badge-soon { margin-top: auto; }
@media (min-width: 48rem) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .plan { padding: var(--space-4); }
}
.plan__status { margin: auto 0 0; padding-top: var(--space-1); color: var(--text-2); font-size: var(--fs-meta); }
.plans__fine { margin: var(--space-3) auto 0; max-width: var(--measure); color: var(--text-3); font-size: var(--fs-meta); text-align: center; }

/* ---- FAQ (#faq, redesign SPEC §6.9) ------------------------------------------------
   Six of /faq/'s questions, the first open; the aside above the list until
   1024px, beside it from there (not sticky). */
.faqs { display: grid; gap: var(--space-4); }
.faqs__aside p:last-child { margin: var(--space-2) 0 0; color: var(--text-2); }
@media (min-width: 64rem) {
  .faqs { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-7); }
  .faqs__aside { align-self: start; }
}

/* ---- Closing (redesign SPEC §6.10) --------------------------------------------------
   One panel: the line, CTA E (button and note, the QR on a desktop with a
   pointer) and the demo's first hand, A and 5 of hearts, fanned at -8 and +6
   degrees and overlapping by 30%. Copy above the cards on a phone, side by side
   from 600px. The cards are dealt once (site.js); without JS they are simply
   there. */

.closing {
  display: grid; gap: var(--space-4); padding: var(--space-4) var(--space-3);
  background: var(--panel); color: var(--text); border: var(--stroke) solid var(--border); border-radius: var(--r-panel);
}
.closing__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.closing__line { margin: 0; max-width: 24rem; color: var(--text-2); font-size: var(--fs-section); }
.closing__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); align-self: stretch; }
.closing__cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
@media (max-width: 37.49rem) { .closing__cta { width: 100%; } }
.closing__cards { --card-w: 6rem; display: flex; justify-content: center; padding-block: var(--space-1); }
.bigcard {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25em;
  width: var(--card-w); aspect-ratio: 96 / 136; flex: none;
  background: var(--card-face); color: var(--suit-red);
  border: var(--stroke) solid var(--border); border-radius: calc(var(--card-w) * 0.1);
  font-size: calc(var(--card-w) * 0.42); font-weight: 700; line-height: 1;
  transform: rotate(-8deg);
}
.bigcard + .bigcard { margin-left: calc(var(--card-w) * -0.3); transform: rotate(6deg); }
.bigcard__suit { width: 0.8em; height: 0.8em; }
[data-deal="pending"] > .bigcard { opacity: 0; }
@media (min-width: 37.5rem) {
  .closing { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: var(--space-5); }
  .closing__cards { --card-w: 7rem; padding-inline: var(--space-3); }
}
@media (min-width: 64rem) {
  .closing { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-3); padding: var(--space-6); }
  .closing__copy { grid-column: 1 / 9; }
  .closing__cards { --card-w: 8rem; grid-column: 9 / 13; }
}

.mix__bar--v0 { --f: 0; } .mix__bar--v33 { --f: 0.33; } .mix__bar--v35 { --f: 0.35; } .mix__bar--v65 { --f: 0.65; } .mix__bar--v67 { --f: 0.67; }

/* ---- How it teaches (#features, redesign SPEC §6.4) --------------------------------
   Header, tabs, the chart, its key, then the answer card; on the 12-column grid
   from 1024px the header, tabs and card take columns 1-5 and the chart 6-12,
   both top-aligned (EXPL-01: a centred chart moved under the pointer). The
   card sits below the chart on narrow screens, so a tap never moves the chart.
   The tabs control the chart (role=tabpanel, set by teach.js); the card
   describes the hand picked in it. */

.teach__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.teach__head { margin-bottom: var(--space-1); }
.teach__tabs {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-half);
  max-width: 28rem; padding: var(--space-half);
  background: var(--well); border-radius: var(--r-pill);
}
.teach__tabs[hidden] { display: none; }
.teach__tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem;
  min-height: var(--hit); padding: 0.4rem var(--space-1);
  background: none; color: var(--text-2); border: var(--stroke) solid transparent; border-radius: var(--r-pill);
  font: inherit; line-height: 1.2; cursor: pointer;
  transition: transform var(--dur-press) var(--ease-press);
}
.teach__tab:active { transform: scale(var(--press-scale)); }
.teach__tab[aria-selected="true"] { background: var(--bg); color: var(--text); border-color: var(--accent); }
.teach__tab-hand { font-size: 1rem; font-weight: 600; letter-spacing: -0.02em; }
.teach__tab-sit { font-size: var(--fs-label); }

.teach__chart { margin: 0; min-width: 0; }
.teach__live { container-type: inline-size; }
.teach__live .cgrid { touch-action: manipulation; outline-offset: 4px; }
.teach__live .cell { cursor: pointer; }
/* Hand names only where a cell is 30px or more (13 x 30 + 12 gaps). */
.teach__live .cell__t { display: none; }
@container (min-width: 414px) { .teach__live .cell__t { display: grid; font-size: clamp(11px, 2cqw, 12px); } }
.cgrid[data-wash="pending"] .cell { opacity: 0.25; }
.teach__key { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-half) var(--space-3); margin-top: var(--space-2); color: var(--text-2); font-size: var(--fs-meta); }
.teach__key[hidden], .teach__cap[hidden] { display: none; }
.teach__note, .teach__hint { margin: 0; }
.teach__hint--hover { display: none; }
@media (hover: hover) { .teach__hint--hover { display: inline; } .teach__hint--touch { display: none; } }
.teach__cap { margin-top: var(--space-half); }
/* No JS: the app's own capture of the KTs chart, in a forced-dark box. 280px
   wide where there is room; narrower on a phone, where a 609px-tall capture
   took the section over its height budget (redesign Phase 3). */
.teach__static { --shot-w: min(280px, 55vw); display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-2); background: var(--bg); border-radius: var(--r-panel); }

.teach__card { min-width: 0; padding: var(--space-3); background: var(--bg); border: var(--stroke) solid var(--border); border-radius: var(--r-panel); }
.teach__hand { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-title); letter-spacing: var(--track-title); line-height: var(--lh-title); }
.teach__where { margin: var(--space-half) 0 0; color: var(--text-2); font-size: var(--fs-meta); }
.teach__mix { gap: var(--space-1); margin-top: var(--space-3); }
.teach__mix .mix__bar { transition: transform var(--dur-settle) var(--ease-out); }
.teach__mix .mix__row:nth-child(2) .mix__bar { transition-delay: 60ms; }
.teach__mix .mix__row:nth-child(3) .mix__bar { transition-delay: 120ms; }
.teach__why-label { margin: var(--space-3) 0 0; color: var(--accent); }
.teach__why { margin: var(--space-1) 0 0; min-height: var(--why-h, 0); line-height: var(--lh-body); text-wrap: pretty; }

@media (min-width: 37.5rem) {
  .teach__live, .teach__key, .teach__cap, .teach__card { width: 100%; max-width: 35rem; margin-inline: auto; }
  .teach__tabs { width: 100%; margin-inline: auto; }
  .teach__key { justify-content: center; }
  .teach__cap { text-align: center; }
}
@media (min-width: 64rem) {
  .teach__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: var(--space-3); row-gap: var(--space-4); }
  .teach__head, .teach__tabs, .teach__card { grid-column: 1 / 6; }
  .teach__tabs { margin-inline: 0; }
  .teach__head { margin-bottom: 0; }
  .teach__card { align-self: start; max-width: none; padding: var(--space-4); }
  .teach__chart { grid-column: 6 / 13; grid-row: 1 / 4; align-self: start; justify-self: end; width: 100%; max-width: 37.5rem; }
  .teach__live, .teach__key, .teach__cap { max-width: none; }
  .teach__key { justify-content: flex-start; }
  .teach__cap { text-align: left; }
}
@media (min-width: 120rem) { .teach__chart { max-width: 36rem; } }

/* ---- Every seat. Every depth. (#spots, redesign SPEC §6.5) --------------------------
   The five situations as rows (name, Level pill and depth chips on one line,
   who beneath, on a phone; a four-column grid from 600px) and the spot count
   at each depth as bars, side by side until 1024px. From 1024px: header and
   bars in columns 1-5, the list in 6-12. The bars are scaleX(var(--f)):
   spotsByDepth over the largest (facts.json), and they fill once when they
   come on screen (site.js); the labels are the counts rounded down to
   thousands ("6K+").
   The list is .spots__rows, not .spots: the section is .spots, and a rule for
   the list on that name took the section's padding away. */

.spots__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.spots__bars-title { margin: 0 0 var(--space-2); color: var(--text-2); font-size: var(--fs-meta); font-weight: 600; }
.dbars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.dbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; row-gap: var(--space-half); }
.dbar__name { color: var(--text-2); font-size: var(--fs-meta); }
.dbar__n { font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dbar__track { grid-column: 1 / -1; height: 0.375rem; border-radius: var(--r-pill); background: var(--well); overflow: hidden; }
.dbar__bar { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--f)); transition: transform var(--dur-settle) var(--ease-out); }
.dbar__bar--100 { --f: 0.673; } .dbar__bar--30 { --f: 1; } .dbar__bar--20 { --f: 0.994; }
.dbar:nth-child(2) .dbar__bar { transition-delay: 60ms; }
.dbar:nth-child(3) .dbar__bar { transition-delay: 120ms; }
.dbars[data-fill="pending"] .dbar__bar { transform: scaleX(0); }

.spots__rows { margin: 0; padding: 0; list-style: none; border-top: var(--stroke) solid var(--border); }
.spot {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name depths level" "who who who";
  align-items: center; column-gap: var(--space-1); row-gap: 0.125rem;
  padding-block: 0.625rem; border-bottom: var(--stroke) solid var(--border);
}
.spot__name { grid-area: name; font-weight: 600; letter-spacing: -0.01em; }
.spot__who { grid-area: who; color: var(--text-2); font-size: var(--fs-meta); line-height: 1.4; }
.spot__depths { grid-area: depths; display: flex; gap: 0.1875rem; }
.spot__level { grid-area: level; }
.chip {
  padding: 0.0625rem 0.25rem; border-radius: var(--r-card); background: var(--well); color: var(--text);
  font-size: var(--fs-label); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.4;
}
.spot__level {
  padding: 0.0625rem 0.5rem; border: var(--stroke) solid var(--accent); border-radius: var(--r-pill);
  color: var(--accent); font-size: var(--fs-label); font-weight: 600; line-height: 1.4; white-space: nowrap;
}
.spots__seats { margin: var(--space-2) 0 0; color: var(--text-2); font-size: var(--fs-meta); }

@media (min-width: 37.5rem) {
  .spot { grid-template-columns: 9.5rem minmax(0, 1fr) auto 4.5rem; grid-template-areas: "name who depths level"; column-gap: var(--space-2); padding-block: 0.75rem; }
  .spot__level { justify-self: end; }
}
@media (min-width: 64rem) {
  .spots__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--space-3); row-gap: var(--space-5); }
  .spots__head, .spots__bars { grid-column: 1 / 6; }
  .spots__list { grid-column: 6 / 13; grid-row: 1 / 3; align-self: start; }
  .dbars { grid-template-columns: minmax(0, 1fr); }
}