/* Landing page. Tokens live in tokens.css; layout follows
   docs/DESIGN_landing.md, section 5. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 760px; }
.mono { font-family: var(--font-mono); }
.num { font-variant-numeric: tabular-nums; text-align: right; }

/* ------------------------------------------------------------ buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--r-md);
  font: 600 15px/1 var(--font-body);
  border: 1px solid transparent;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, transform 150ms ease-out;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hi); }
.btn-primary:active { background: var(--accent-lo); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { height: 36px; padding: 0 14px; font-size: 14px; }
.btn-block { width: 100%; }

.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-hi);
  font: 500 12px/1.4 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow {
  display: block;
  margin-bottom: 12px;
  color: var(--accent);
  font: 500 13px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------ nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(14, 21, 24, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease-out;
}
.nav.scrolled { border-bottom-color: var(--border-soft); }
.nav-inner {
  max-width: 1200px;
  height: 64px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font: 600 18px/1 var(--font-display);
  letter-spacing: -0.01em;
}
.logo:hover { text-decoration: none; }
.logo-mark { width: 30px; height: 30px; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { color: var(--text-2); font-size: 15px; }
.nav-links a:hover { color: var(--text); text-decoration: none; }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.link-quiet { color: var(--text-2); font-size: 15px; }
.link-quiet:hover { color: var(--text); text-decoration: none; }
.nav-toggle { display: none; }

/* ------------------------------------------------------------ hero */

.hero { position: relative; padding: 88px 0 72px; overflow-x: clip; }
/* drawn by landing.js; fades out toward the top and bottom of the hero */
.hero-dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 72%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 72%, transparent);
}
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: center;
}
.hero h1 { margin: 20px 0 20px; font-size: 52px; line-height: 1.08; }
.hero h1 span { display: block; }
.lead { color: var(--text-2); font-size: 19px; max-width: 34em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.hero-visual { position: relative; }
.hero-visual::before {
  content: "";
  position: absolute;
  inset: -18% -12%;
  background: radial-gradient(closest-side, var(--accent-glow), transparent 70%);
  opacity: 0.55;
  z-index: -1;
  pointer-events: none;
}

.window {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1), 0 30px 80px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  font-size: 14px;
}
.window-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding: 0 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--border-soft);
}
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); }
.seg {
  display: flex;
  margin-left: auto;
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  font: 600 12px/1 var(--font-body);
  color: var(--muted);
}
.seg button {
  position: relative;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: color 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out;
}
.seg button::after { content: ""; position: absolute; inset: -8px 0; }   /* 40px tall touch target */
.seg button:hover { color: var(--text-2); }
.seg .on, .seg .on:hover {
  background: linear-gradient(180deg, rgba(44, 200, 192, 0.12), rgba(44, 200, 192, 0.30));
  box-shadow: inset 0 -1px 0 rgba(90, 219, 212, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.window-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }

.board-row { display: flex; align-items: center; gap: 8px; }
.label, .mini-head {
  color: var(--muted);
  font: 500 12px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.board-row .label { margin-right: 6px; }
.deals { margin-left: auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.pc {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 7px 9px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font: 600 15px/1 var(--font-mono);
}
.pc i { font-style: normal; }
.pc.s i { color: var(--suit-s); }
.pc.h i { color: var(--suit-h); }
.pc.d i { color: var(--suit-d); }
.pc.c i { color: var(--suit-c); }

.eqbar {
  display: flex;
  height: 14px;
  gap: 3px;
  border-radius: var(--r-pill);
  overflow: hidden;
}
.eqbar span {
  flex: 0 0 auto;
  width: 33.33%;
  height: 100%;
  transition: width 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.p1 { background: var(--series-1); }
.p2 { background: var(--series-2); }
.p3 { background: var(--series-3); }
.p4 { background: #9AA7AB; }

.eqtable { width: 100%; border-collapse: collapse; }
.eqtable th {
  padding: 0 0 8px;
  color: var(--muted);
  font: 500 11px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
}
.eqtable th.num { text-align: right; }
.eqtable td { padding: 9px 0; border-top: 1px solid var(--border-soft); }
.eqtable th, .eqtable td { padding-right: 12px; }
.eqtable th:last-child, .eqtable td:last-child { padding-right: 0; }
.eqtable td:first-child { width: 64px; }
.sw { display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 3px; vertical-align: -1px; }
.strong { font-weight: 600; color: var(--text); }
.dim { color: var(--muted); }

.strength { display: flex; flex-direction: column; gap: 8px; }
.srow { display: flex; align-items: center; gap: 10px; }
.srow > span { width: 22px; color: var(--muted); font-size: 12px; }
.stack { flex: 1; display: flex; height: 10px; gap: 2px; }
.stack b { width: calc(var(--w) * 1%); border-radius: 2px; transition: width 500ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.g1 { background: #5ADBD4; }
.g2 { background: #3A9E9A; }
.g3 { background: #2B6F70; }
.g4 { background: #2A4A50; }
.g5 { background: #22343A; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 11px; color: var(--muted); }
.legend span { background: none; }
.legend span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 2px;
  background: inherit;
}
.legend .g1::before { background: #5ADBD4; }
.legend .g2::before { background: #3A9E9A; }
.legend .g3::before { background: #2B6F70; }
.legend .g4::before { background: #2A4A50; }
.legend .g5::before { background: #22343A; }

/* the hand strength feature card tells one story: the overpair segment is
   lit in the accent and the others step back */
.s-story .srow > span { width: 52px; font-size: 12px; color: var(--text-2); }
.s-story .srow > .num { width: 44px; color: var(--accent-hi); font-size: 13px; }
.s-story .stack { height: 12px; }
.s-story .stack b:not(.g3) { opacity: 0.45; }
.s-story .stack .g3 { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.s-story .legend { margin-top: 2px; }
.s-story .legend span:not(.g3) { opacity: 0.7; }
.s-story .legend .g3 { color: var(--text); }
.s-story .legend .g3::before { background: var(--accent); }

/* ------------------------------------------------------------ stats */

.stats {
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-1);
}
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stats-grid > div {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stats-grid > div + div { border-left: 1px solid var(--border-soft); }
.stats strong { font: 600 36px/1 var(--font-display); letter-spacing: -0.02em; }
.stats span { color: var(--muted); font-size: 14px; }

/* ------------------------------------------------------------ sections */

.section { padding: 112px 0 0; }
.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head h2, .accuracy h2 { font-size: 40px; }
.section-head p { margin-top: 16px; color: var(--text-2); }

/* a faint neon playing card behind a section: teal tubes with a soft glow,
   tilted, never in the way of a click */
.has-neon { position: relative; overflow-x: clip; }
.has-neon > .wrap { position: relative; z-index: 1; }
.neon-card {
  position: absolute;
  z-index: 0;
  top: 56px;
  right: max(-20px, calc(50% - 640px));
  width: 190px;
  height: auto;
  transform: rotate(14deg);
  opacity: 0.22;
  fill: none;
  stroke: var(--accent-hi);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 2px var(--accent)) drop-shadow(0 0 10px var(--accent-glow));
  pointer-events: none;
}
.neon-card .inner { stroke-width: 0.7; opacity: 0.5; }
.neon-card .pip { stroke-width: 1; }
.neon-card text { font: 600 17px var(--font-display); stroke-width: 0.9; }
.neon-card.small {
  top: 72px;
  right: auto;
  left: max(-36px, calc(50% - 700px));
  width: 112px;
  transform: rotate(-11deg);
  opacity: 0.18;
}

/* ------------------------------------------------------------ features */

.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 20px;
}
.bento .card, .acc-chart {
  padding: 24px;
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bento .card { transition: border-color 200ms ease-out, transform 200ms ease-out; }
.bento .card:hover { border-color: var(--border); transform: translateY(-2px); }
.bento h3 { font-size: 20px; }
.bento p { color: var(--text-2); font-size: 15px; }
.c-large { grid-column: span 2; }
.c-wide, .c-wide-lg { grid-column: span 2; }   /* -lg: wide in the three column grid only */

.card-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  margin-bottom: 6px;
}
.card-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.snip { margin-top: auto; padding-top: 14px; }
.snip-multi, .report { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.mrow, .rrow { display: grid; align-items: center; gap: 12px; }
.mrow { grid-template-columns: 10px 64px 1fr 52px; }
.mrow .sw { margin: 0; }
.rrow { grid-template-columns: 84px 1fr 52px; color: var(--text-2); }
.mbar, .rbar { height: 8px; background: var(--surface-2); border-radius: var(--r-pill); overflow: hidden; }
.mbar b, .rbar b { display: block; height: 100%; width: calc(var(--w) * 2%); border-radius: inherit; }
.rbar b { width: calc(var(--w) * 1%); background: var(--series-1); }

.pstrip {
  position: relative;
  height: 12px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--accent-hi), var(--accent-lo) 30%, var(--surface-3) 70%, var(--surface-2));
}
.pstrip .sel {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: calc(var(--from) * 1%);
  width: calc((var(--to) - var(--from)) * 1%);
  border: 2px solid var(--text);
  border-radius: 6px;
}
.pscale { position: relative; display: flex; justify-content: space-between; margin-top: 8px; color: var(--muted); font-size: 12px; }
.pscale span:nth-child(2) { position: absolute; left: 15%; transform: translateX(-50%); color: var(--text); }
.hands { list-style: none; margin: 16px 0 0; padding: 0; font-size: 13px; }
.hands li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; border-top: 1px solid var(--border-soft); }
.hands li > span:last-child { color: var(--muted); white-space: nowrap; }
/* a hand as a row of small playing cards, the board's .pc look */
.hand-cards { display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; }
.hand-cards .pc { gap: 1px; padding: 4px 5px; font-size: 12px; }

.heat { display: grid; grid-template-columns: repeat(13, 1fr); gap: 3px; }
.heat i { height: 20px; border-radius: 3px; background: var(--surface-2); }
.heat i.up { background: color-mix(in srgb, var(--good) calc(10% + var(--v) * 80%), var(--surface-2)); }
.heat i.down { background: color-mix(in srgb, var(--bad) calc(10% + var(--v) * 80%), var(--surface-2)); }
.heat i.b { background: transparent; border: 1px dashed var(--border); }

.bento .snip-note { margin-top: 12px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.snip-multi .snip-note { margin-top: 2px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.chips span { padding: 5px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-2); }
/* the last chip says the list goes on */
.chips .more { background: var(--accent-soft); border: 1px dashed var(--accent-lo); color: var(--accent-hi); font-family: var(--font-body); }

/* the filters card stands out: outlined in teal like the Pro plan, with
   the preflop and the postflop filters side by side */
.bento .c-star {
  border-color: var(--accent-lo);
  background: linear-gradient(180deg, rgba(44, 200, 192, 0.07), transparent 45%), var(--surface-1);
}
.bento .c-star:hover { border-color: var(--accent); }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fcol { display: flex; flex-direction: column; gap: 10px; }
.fcol + .fcol { padding-left: 24px; border-left: 1px solid var(--border-soft); }
.bento .fwhat { font-size: 14px; }
.bento .fcol .snip-note { margin-top: auto; padding-top: 4px; }

/* ------------------------------------------------------------ questions */

.qgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.q {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.q h3 { font-size: 22px; line-height: 1.2; }
.q .setup { color: var(--muted); font-size: 13px; }
.q .setup .mono { color: var(--text-2); }
.q .eqbar { margin-top: 4px; }
.q .big { margin-top: 6px; font: 600 48px/1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.q .cap { color: var(--text-2); font-size: 15px; }
.q .src { margin-top: auto; padding-top: 6px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

/* the question cards flow in from the sides, the left column from the left
   and the right one from the right. Where the browser ties animations to
   scroll they move with it; elsewhere they slide in once, on reveal. */
#questions { overflow-x: clip; }
.q.reveal { --q-from: -120px; transform: translateX(var(--q-from)); transition-duration: 700ms; transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
.q.reveal:nth-child(even) { --q-from: 120px; }
.q.reveal.in { transform: none; }
@keyframes q-flow-in {
  from { opacity: 0; transform: translateX(var(--q-from)); }
  to { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .q.reveal {
      transition: none;
      animation: q-flow-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
    /* arrived (landing.js): stays put when the page scrolls back up */
    .q.reveal.landed { animation: none; opacity: 1; transform: none; }
  }
}

/* ------------------------------------------------------------ how it works */

.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 0 0 48px;
  padding: 0;
  list-style: none;
}
/* a column, so the bars at the bottom line up when a step's text wraps */
.steps li { position: relative; display: flex; flex-direction: column; }
.step-n {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 18px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
  color: var(--accent);
  font: 600 16px/1 var(--font-display);
}
.steps h3 { font-size: 20px; margin-bottom: 8px; }
.steps p { color: var(--text-2); font-size: 15px; transition: color 200ms ease-out; }
.step-n { transition: background-color 200ms ease-out, color 200ms ease-out; }

/* each step is a button over its whole item; the active one is filled and
   its bar fills while that part of the walkthrough plays */
.steps button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-2);
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 200ms ease-out;
}
.steps button::after { content: ""; position: absolute; inset: -10px -12px -14px; border-radius: var(--r-md); }
.steps button:focus-visible { outline: none; }
.steps button:focus-visible::after { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.steps li:hover button { color: var(--text); }
.steps li:not(.on) p { color: var(--muted); }
.steps li.on button { color: var(--text); }
.steps li.on .step-n { background: var(--accent); color: var(--accent-ink); }
.steps p { margin-bottom: 18px; }
.step-bar {
  display: block;
  flex: none;
  height: 2px;
  margin-top: auto;
  overflow: hidden;
  border-radius: 1px;
  background: var(--border-soft);
}
.step-bar i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.walk-caption { display: none; }

/* ------------------------------------------------------------ walkthrough */

/* A small copy of the calculator (omahalytics/app/web) inside the window frame of
   the hero. landing.js scrolls it like a page (the "camera") and moves the
   cursor over it; the wa- classes mirror the app's panels at a smaller size. */
.walk-window .window-bar { gap: 7px; }
.walk-title {
  flex: 1;
  margin-right: 26px;          /* centered against the dots */
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.walk-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  background: var(--surface-1);
  color: var(--text-2);
  cursor: pointer;
  transition: color 150ms ease-out, border-color 150ms ease-out;
}
.walk-toggle::after { content: ""; position: absolute; inset: -8px; }   /* 44px touch target */
.walk-toggle:hover { color: var(--text); border-color: var(--border); }
.walk-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.walk-toggle .i-play, .walk-window.paused .i-pause { display: none; }
.walk-window.paused .i-play { display: block; }

.walk-view {
  position: relative;
  height: 512px;
  overflow: hidden;
  background: var(--bg);
}
.walk-app {
  display: flex;
  flex-direction: column;
  gap: 16px;                   /* as the padding: the camera stops on a block */
  padding: 16px;
  font-size: 13px;
  line-height: 1.45;
  transition: transform 800ms cubic-bezier(0.65, 0, 0.35, 1), opacity 300ms ease-out;
}
.walk-app.fade { opacity: 0; }
.walk-app h4 { margin: 0; font: 600 15px/1.2 var(--font-display); letter-spacing: -0.01em; }

.wa-setup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 0.75fr); gap: 12px; align-items: start; }
.wa-results {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "eq st" "beat st";
  grid-template-rows: auto 1fr;
  gap: 12px;
  align-items: start;
}
.wa-equity { grid-area: eq; }
.wa-strength { grid-area: st; }
.wa-beat { grid-area: beat; }
.wa-panel, .wa-runbar { transition: opacity 400ms ease-out; }
.wa-panel {
  padding: 16px;
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
}
.walk-app .dim { opacity: 0.38; }
.wa-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.wa-head h4 { display: flex; align-items: center; gap: 8px; }
.wa-n {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--accent-lo);
  border-radius: 50%;
  color: var(--accent);
  font: 600 11px/1 var(--font-display);
}
.wa-tag, .wa-pill {
  padding: 2px 9px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent-hi);
  font: 500 10px/1.5 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.wa-pill { border: 1px solid var(--accent-lo); letter-spacing: 0; text-transform: none; font-size: 11px; }
.wa-count { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.wa-sq {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--muted);
  transition: background-color 120ms ease-out, color 120ms ease-out;
}
.wa-sq.press { background: var(--surface-3); color: var(--text); }

.wa-player {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
}
.wa-player + .wa-player { margin-top: 8px; }
.wa-player.off { display: none; }
.wa-player.enter { animation: wa-enter 300ms ease-out; }
@keyframes wa-enter { from { opacity: 0; transform: translateY(-6px); } }
.wa-seat { padding-top: 9px; color: var(--text-2); font-size: 12px; font-weight: 600; }
.wa-seat .sw { width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: 0; }
.wa-input {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 10px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font: 13px/1 var(--font-mono);
  white-space: pre;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.wa-input.focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.wa-text:empty::before { content: attr(data-ph); color: var(--muted); }
.wa-caret { display: none; width: 1.5px; height: 16px; margin-left: 1px; background: var(--accent-hi); animation: wa-blink 1s steps(1) infinite; }
.wa-input.focus .wa-caret { display: block; }
.wa-input.focus .wa-text:empty::before { content: none; }
@keyframes wa-blink { 50% { opacity: 0; } }
.wa-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.wa-chips span { padding: 1px 8px; border: 1px solid var(--border-soft); border-radius: var(--r-pill); color: var(--muted); font-size: 10.5px; }
.wa-info { margin-top: 6px; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; transition: opacity 250ms ease-out; }
.wa-info b { color: var(--text-2); font-weight: 600; }
.wa-info.off { opacity: 0; }

.wa-slots { display: flex; gap: 5px; margin-bottom: 10px; }
.wa-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 40px;
  height: 54px;
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  font: 600 16px/1 var(--font-mono);
}
.wa-slot:nth-child(4) { margin-left: 8px; }
.wa-slot i { font-style: normal; font-size: 14px; }
.wa-slot.next { border-color: var(--accent-lo); background: var(--accent-soft); }
.wa-slot.filled { border-style: solid; background: var(--surface-2); animation: wa-pop 220ms ease-out; }
@keyframes wa-pop { from { transform: scale(0.85); opacity: 0.4; } }
.wa-slot.s i, .wa-card.s { color: var(--suit-s); }
.wa-slot.h i, .wa-card.h { color: var(--suit-h); }
.wa-slot.d i, .wa-card.d { color: var(--suit-d); }
.wa-slot.c i, .wa-card.c { color: var(--suit-c); }
.wa-deck { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 3px; margin-top: 12px; }
.wa-card {
  padding: 6px 0 5px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: var(--surface-2);
  font: 600 11px/1 var(--font-body);
  text-align: center;
  white-space: nowrap;
  transition: background-color 120ms ease-out;
}
.wa-card.picked { border-color: var(--accent); background: var(--accent-soft); }

.wa-runbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(33, 50, 56, 0.7), rgba(20, 30, 34, 0.78));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.wa-btn {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font: 600 13px/1 var(--font-body);
  transition: transform 120ms ease-out, background-color 120ms ease-out, opacity 150ms ease-out;
}
.wa-run { border-color: transparent; background: var(--accent); color: var(--accent-ink); }
.wa-run.press { transform: scale(0.96); background: var(--accent-lo); }
.wa-stop { color: var(--muted); opacity: 0.5; }
.wa-stop.on { opacity: 1; color: var(--text); }
.wa-stop.press { transform: scale(0.96); background: var(--surface-3); }
.wa-stats { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.wa-flag { width: 8px; height: 8px; border-radius: 50%; background: var(--surface-3); }
.wa-flag.live { background: var(--good); animation: wa-pulse 1.6s ease-in-out infinite; }
@keyframes wa-pulse { 50% { opacity: 0.35; } }
.wa-stat small { display: block; color: var(--muted); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.wa-stat b { display: block; min-width: 54px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

.wa-note { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; text-align: right; }
.wa-split { display: flex; gap: 3px; height: 12px; margin-bottom: 10px; overflow: hidden; border-radius: var(--r-pill); }
.wa-split span { flex: 1 1 0; min-width: 2px; transition: flex-grow 250ms ease-out, opacity 250ms ease-out; }
.wa-split.idle span { opacity: 0.25; }
.wa-eqrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 4px 16px;
  padding: 9px 0;
  border-top: 1px solid var(--border-soft);
}
.wa-name { display: flex; align-items: center; gap: 4px; color: var(--text-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.wa-name .sw { width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; vertical-align: 0; }
.wa-name code { margin-left: 4px; font: 400 12px var(--font-mono); }
.wa-sub { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.wa-val { min-width: 112px; text-align: right; white-space: nowrap; }
.wa-val b { font: 600 19px/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.wa-val small { display: inline-block; min-width: 36px; margin-left: 5px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; text-align: left; }

.wa-dist { width: 100%; border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.wa-dist th {
  padding: 0 0 6px;
  color: var(--muted);
  font: 500 10px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}
.wa-dist thead th + th { padding-left: 8px; }
.wa-draws th { padding-top: 14px; }
.wa-dist td { padding: 5px 0; border-top: 1px solid var(--border-soft); white-space: nowrap; }
.wa-dist td:first-child { width: 30%; padding-right: 8px; color: var(--text-2); }
.wa-cell { display: flex; align-items: center; gap: 6px; padding-left: 8px; }
.wa-bar { flex: 1; min-width: 12px; height: 6px; overflow: hidden; border-radius: 3px; background: var(--surface-2); }
.wa-bar i {
  display: block;
  width: calc(var(--w) * 1%);
  height: 100%;
  border-radius: inherit;
  transform-origin: left;
  transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.wa-cell { transition: color 300ms ease-out; }
.wa-strength.idle .wa-bar i { transform: scaleX(0); }
.wa-strength.idle .wa-cell { color: transparent; }

.wa-beat p { color: var(--text-2); font-size: 13px; transition: opacity 300ms ease-out; }
.wa-beat b { color: var(--text); font-weight: 600; }
.wa-beat.idle p { opacity: 0; }

/* the cursor: an arrow, or a fingertip on touch screens; its tip sits on
   the element's top left corner and landing.js moves it with a transform */
.walk-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 250ms ease-out;
}
.walk-cursor.on { opacity: 1; }
.walk-cursor svg {
  display: block;
  width: 22px;
  height: 22px;
  margin: -3px 0 0 -5px;
  fill: var(--text);
  stroke: var(--bg);
  stroke-width: 1.2;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
.walk-ring {
  position: absolute;
  top: -14px;
  left: -14px;
  width: 28px;
  height: 28px;
  border: 2px solid var(--accent-hi);
  border-radius: 50%;
  opacity: 0;
}
@media (hover: none) {
  .walk-cursor svg { display: none; }
  .walk-cursor::before {
    content: "";
    position: absolute;
    top: -12px;
    left: -12px;
    width: 24px;
    height: 24px;
    border: 1.5px solid rgba(232, 239, 241, 0.75);
    border-radius: 50%;
    background: rgba(232, 239, 241, 0.22);
  }
}

/* ------------------------------------------------------------ accuracy */

.acc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.accuracy h2 { margin-bottom: 28px; }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; color: var(--text-2); }
.checks li { padding-left: 30px; position: relative; }
.checks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.checks strong { color: var(--text); font-weight: 600; }
.acc-chart { margin: 0; }
.acc-chart figcaption { color: var(--muted); font-size: 13px; }
.acc-chart svg { width: 100%; height: auto; display: block; }
.acc-foot { display: flex; justify-content: space-between; padding-left: 10%; color: var(--muted); font-size: 12px; }

/* ------------------------------------------------------------ pricing */

.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 400px)); gap: 24px; justify-content: center; }
.plan {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
}
.plan-pro {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(44, 200, 192, 0.06), transparent 40%), var(--surface-1);
}
.plan-top { display: flex; align-items: center; justify-content: space-between; }
.plan h3 { font-size: 22px; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.price strong { font: 600 40px/1 var(--font-display); letter-spacing: -0.02em; }
.price > span { color: var(--muted); font-size: 14px; }
/* the price Pro will cost, struck through while it is free */
.price-was {
  color: var(--muted);
  font: 500 24px/1 var(--font-display);
  letter-spacing: -0.02em;
  text-decoration-color: var(--text-2);
  text-decoration-thickness: 2px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; color: var(--text-2); font-size: 15px; flex: 1; }
.plan li::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 6px;
  margin-right: 12px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: translateY(-3px) rotate(-45deg);
}
.plan-note { margin: -8px 0 0; color: var(--muted); font-size: 13px; }
.plan-note a { color: var(--text-2); text-decoration: underline; }

/* ------------------------------------------------------------ faq */

.faq { display: flex; flex-direction: column; gap: 10px; }
.faq details {
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: 0 20px;
}
.faq details[open] { border-color: var(--border); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 200ms ease-out;
  flex: none;
  margin-left: 16px;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details p { padding: 0 0 18px; color: var(--text-2); font-size: 15px; }

/* ------------------------------------------------------------ cta, footer */

.cta {
  position: relative;
  margin-top: 120px;
  padding: 96px 0;
  text-align: center;
  overflow: hidden;
  border-top: 1px solid var(--border-soft);
}
.cta::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 900px;
  height: 600px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--accent-glow), transparent);
  opacity: 0.6;
  pointer-events: none;
}
.cta .wrap { position: relative; }
.cta h2 { font-size: 40px; }
.cta p { margin: 14px 0 28px; color: var(--text-2); }

.footer { border-top: 1px solid var(--border-soft); padding: 40px 0 48px; }
.footer-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.footer-links a { color: var(--text-2); font-size: 14px; }
.fine { width: 100%; color: var(--muted); font-size: 13px; }

/* ------------------------------------------------------------ legal pages */

.legal { padding: 64px 0 96px; }
.legal-head h1 { font-size: 44px; }
.legal-summary, .legal-toc {
  margin-top: 40px;
  padding: 24px 28px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-1);
}
.legal-summary { border-color: var(--accent-lo); }
.legal-summary h2, .legal-toc h2 { font-size: 20px; margin-bottom: 12px; }
.legal-summary p { margin-top: 12px; color: var(--muted); font-size: 14px; }
.legal-toc ol { columns: 2; column-gap: 32px; }
.legal-toc li { break-inside: avoid; }
.legal section { margin-top: 48px; scroll-margin-top: 80px; }
.legal section h2 { font-size: 24px; margin-bottom: 14px; }
.legal section p + p, .legal section p + ul, .legal section ul + p { margin-top: 12px; }
.legal section p, .legal section li { color: var(--text-2); }
.legal ul, .legal ol { margin: 0; padding-left: 22px; }
.legal li + li { margin-top: 8px; }
.legal li::marker { color: var(--muted); }
.legal strong { color: var(--text); font-weight: 600; }
.table-wrap { margin-top: 12px; }
.legal table { width: 100%; border-collapse: collapse; font-size: 15px; }
.legal th, .legal td { padding: 10px 12px; border-bottom: 1px solid var(--border-soft); text-align: left; vertical-align: top; }
.legal th { color: var(--text); font-weight: 600; border-bottom-color: var(--border); }
.legal td { color: var(--text-2); }
.footer-links a[aria-current="page"] { color: var(--text); }

/* ------------------------------------------------------------ motion */

.reveal { opacity: 0; transform: translateY(12px); transition: opacity 400ms ease-out, transform 400ms ease-out; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .q.reveal { opacity: 1; transform: none; transition: none; }
  .eqbar span, .stack b, .seg button, .bento .card, .btn { transition: none; }
  .walk-app, .walk-app *, .step-n, .steps button, .steps p { transition: none; animation: none; }
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1000px) {
  .hero-grid, .acc-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero { padding-top: 56px; }
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-flow: dense; }   /* no holes beside the wide cards */
  .c-wide-lg { grid-column: auto; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid > div:nth-child(3) { border-left: 0; }
  .stats-grid > div:nth-child(n+3) { border-top: 1px solid var(--border-soft); }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .wrap, .nav-inner { padding: 0 16px; }
  .hero h1 { font-size: 38px; }
  .lead { font-size: 17px; }
  /* the long hand count gets its own row, the three short stats share one */
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .stats-grid > div { padding: 22px 16px; }
  .stats-grid > div:first-child { grid-column: 1 / -1; }
  .stats-grid > div:nth-child(2) { border-left: 0; }
  .stats-grid > div:nth-child(3) { border-left: 1px solid var(--border-soft); }
  .stats-grid > div:nth-child(n+2) { border-top: 1px solid var(--border-soft); }
  .section { padding-top: 80px; }
  .legal { padding: 40px 0 72px; }
  .legal-head h1 { font-size: 32px; }
  .legal-summary, .legal-toc { padding: 20px; }
  .legal-toc ol { columns: 1; }
  /* tables become one card per row, each cell under its column's name */
  .legal thead { display: none; }
  .legal table, .legal tbody, .legal tr, .legal td { display: block; }
  .legal tr { padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
  .legal td { padding: 2px 0; border: 0; }
  .legal td::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .legal td + td { margin-top: 8px; }
  .section-head h2, .accuracy h2, .cta h2 { font-size: 28px; }
  .neon-card { top: 24px; right: -44px; width: 120px; opacity: 0.16; }
  .neon-card.small { top: 36px; left: -40px; width: 76px; opacity: 0.14; }
  .bento { grid-template-columns: 1fr; }
  .qgrid { grid-template-columns: 1fr; }
  .q { padding: 22px; }
  .q.reveal { --q-from: -60px; }
  .q.reveal:nth-child(even) { --q-from: 60px; }
  .q .big { font-size: 40px; }
  .c-large, .c-wide { grid-column: auto; }
  .fgrid { grid-template-columns: 1fr; gap: 18px; }
  .fcol + .fcol { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--border-soft); }
  /* the steps turn into three compact tabs; the active one's line shows
     below them, in the caption */
  .steps { gap: 12px; margin-bottom: 14px; }
  .step-n { width: 32px; height: 32px; margin-bottom: 10px; font-size: 14px; }
  .steps h3 { margin: 0 0 12px; font-size: 15px; line-height: 1.25; }
  .steps p { display: none; }
  .walk-caption { display: block; min-height: 3em; margin: 0 0 16px; color: var(--text-2); font-size: 15px; line-height: 1.5; }
  .plans { grid-template-columns: 1fr; }
  .plan { padding: 24px; }
  .window-body { padding: 16px; }
  .eqtable td:first-child { width: 56px; }

  .walk-view { height: 480px; }
  .walk-app { padding: 12px; gap: 12px; }
  .wa-setup, .wa-results { grid-template-columns: 1fr; gap: 10px; }
  .wa-results { grid-template-areas: "eq" "st" "beat"; grid-template-rows: auto; }
  .wa-panel { padding: 14px; }
  .wa-player { grid-template-columns: 34px minmax(0, 1fr); gap: 8px; padding: 10px; }
  .wa-chips span:nth-child(n+5) { display: none; }
  .wa-card { font-size: 10px; letter-spacing: -0.02em; }
  .wa-eqrow { grid-template-columns: minmax(0, 1fr) auto; }
  .wa-sub { grid-column: 1 / -1; grid-row: 2; }
  .wa-val { min-width: 0; }
  .wa-dist td:first-child { width: 27%; }
  .wa-cell { gap: 4px; padding-left: 6px; }

  .nav-inner { gap: 12px; }
  .nav-actions { gap: 12px; }
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0 10px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
  }
  .nav-toggle span { height: 2px; background: var(--text); border-radius: 1px; }
  .nav-links {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px 16px 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 0; border-bottom: 1px solid var(--border-soft); font-size: 16px; }
}