/* pokernowhack.com
   Dark liquid glass on contour lines, one green accent family, white-alpha text tiers.
   Tokens follow docs/ARCHITECTURE.md §7; the HUD renderings follow §10. */

:root {
  color-scheme: dark;

  --bg: #0b0f0e;
  --t1: rgba(255, 255, 255, 0.96);
  --t2: rgba(255, 255, 255, 0.7);
  --t3: rgba(255, 255, 255, 0.5);
  --t4: rgba(255, 255, 255, 0.32);
  --green: #0bb57e;
  --green-line: #3fe0a6;
  --mint: #7ff7cc;
  --mint-pale: #c9ffea;
  --fold: #ff8a80;
  --track: rgba(255, 255, 255, 0.08);
  --slot: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);

  /* Page glass: cards, FAQ, forms */
  --glass:
    radial-gradient(120% 90% at 15% 0%, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.012) 100%),
    rgba(18, 23, 22, 0.62);
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    0 18px 44px rgba(0, 0, 0, 0.32);

  --gold: linear-gradient(180deg, #fff3b7 0%, #f6d96b 35%, #d7a93b 100%);
  --gold-ink: #2a2107;

  --spring: cubic-bezier(0.3, 0.9, 0.3, 1);
  --out: cubic-bezier(0.22, 1, 0.36, 1);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;

  --header-h: 72px;
  interpolate-size: allow-keywords;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font: 500 15px/1.6 var(--font);
  color: var(--t1);
  /* Contour lines over a faint green glow, scrolling with the page. topo.svg is two screens tall
     and repeats seamlessly, as wide as the page or 1.6 screens tall (main.js lays its light the
     same way). */
  background:
    radial-gradient(90% 60% at 50% -8%, rgba(11, 181, 126, 0.16) 0%, rgba(11, 181, 126, 0) 70%)
      center top / 100% 100vh no-repeat,
    url(../images/topo.svg) center top / max(100%, 160vh) auto repeat-y,
    var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

::selection {
  background: rgba(63, 224, 166, 0.3);
  color: #fff;
}

a {
  color: inherit;
}

/* The browser draws these bold (700). The design uses 500 and 600 only. */
h1,
h2,
h3,
h4,
h5,
h6,
b,
strong,
th {
  font-weight: 600;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--green-line);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
}

.skip-link:focus-visible {
  transform: none;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.tnum {
  font-variant-numeric: tabular-nums;
}

/* ===== Header: a floating glass pill ===== */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding: 0 20px;
  pointer-events: none;
}

.nav {
  position: relative;
  max-width: 1120px;
  min-height: 48px;
  margin: 0 auto;
  padding: 5px 5px 5px 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  isolation: isolate;
  transform: translateY(16px);
  transition: transform 0.4s var(--out);
  pointer-events: auto;
}

.header.is-scrolled .nav {
  transform: translateY(10px);
}

.nav::before,
.nav::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 999px;
  opacity: 0;
  transform: scale(0.985, 0.94);
  transform-origin: center top;
  transition:
    opacity 0.28s ease,
    transform 0.4s var(--out);
  pointer-events: none;
}

/* Liquid glass: a thin tint over a strong blur, lit from above */
.nav::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 48%, rgba(255, 255, 255, 0.05) 100%),
    rgba(14, 20, 19, 0.52);
  -webkit-backdrop-filter: blur(28px) saturate(190%) brightness(1.08);
  backdrop-filter: blur(28px) saturate(190%) brightness(1.08);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.22),
    inset 0 -1px 1px rgba(255, 255, 255, 0.06),
    inset 0 0 20px rgba(255, 255, 255, 0.04),
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 14px 36px rgba(0, 0, 0, 0.4);
}

/* Its rim catches the light at the top left and bottom right */
.nav::after {
  padding: 1px;
  background: linear-gradient(115deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.12) 22%,
    rgba(255, 255, 255, 0.04) 55%,
    rgba(200, 255, 230, 0.3) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.header.is-scrolled .nav::before,
.header.is-scrolled .nav::after,
.header.is-solid .nav::before,
.header.is-solid .nav::after {
  opacity: 1;
  transform: none;
}

/* Logo: the marble and the wordmark in liquid-glass lettering, ".com" in green glass */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding-right: 6px;
  border-radius: 999px;
  text-decoration: none;
}

.marble {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.45));
}

.marble img {
  width: 100%;
  height: 100%;
}

.marble::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

.wordmark {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1;
  white-space: nowrap;
}

.wordmark-name {
  color: transparent;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(240, 255, 249, 0.74) 48%,
    rgba(205, 255, 233, 0.86) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.4);
}

.wordmark-tld {
  color: transparent;
  background: linear-gradient(180deg,
    rgba(200, 255, 230, 0.97) 0%,
    rgba(80, 228, 170, 0.8) 48%,
    rgba(140, 250, 205, 0.9) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 0.5px rgba(200, 255, 230, 0.4);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
}

.nav-menu a:not(.btn) {
  display: block;
  padding: 7px 14px;
  border-radius: 999px;
  color: var(--t2);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.nav-menu a:not(.btn):hover {
  color: var(--t1);
  background: rgba(255, 255, 255, 0.07);
}

.nav-menu li:last-child {
  margin-left: 8px;
}

.nav-menu .btn {
  min-height: 38px;
  padding: 0 16px;
  font-size: 14px;
}

/* ===== Buttons ===== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.btn svg {
  flex-shrink: 0;
}

.btn:active {
  filter: brightness(0.94);
}

/* Primary: green liquid glass with a gradient rim */
.btn-primary {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%),
    #0f8a60;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 4px 14px rgba(0, 0, 0, 0.22);
  text-shadow: 0 1px 1px rgba(0, 40, 25, 0.35);
}

.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0.12) 40%,
    rgba(255, 255, 255, 0.06) 70%,
    rgba(170, 255, 220, 0.55) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0.55;
  pointer-events: none;
}

.btn-primary:hover {
  background-color: #12996b;
}

/* Secondary: clear glass */
.btn-glass {
  color: var(--t1);
  background: rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.11);
}

.btn-lg {
  min-height: 52px;
  padding: 0 26px;
  font-size: 16px;
}

/* The Chrome logo turns once on hover */
.btn-chrome svg {
  transition: transform 0.5s ease;
}

.btn-chrome:hover svg {
  transform: rotate(360deg);
}

/* "Coming soon" bubble under an install button while there's no store link (main.js) */
.tip {
  position: fixed;
  z-index: 300;
  max-width: 260px;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--t1);
  text-align: center;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03) 55%),
    rgba(16, 20, 19, 0.82);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  border: 0.5px solid rgba(255, 255, 255, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 12px 28px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  opacity: 0;
  translate: 0 -3px;
  transition: opacity 0.18s ease, translate 0.18s var(--out);
}

.tip.is-open {
  opacity: 1;
  translate: 0 0;
}

/* ===== Layout ===== */
.container {
  max-width: 1120px;
  margin: 0 auto;
}

.section {
  position: relative;
  padding: 96px 24px;
}

.section + .section {
  padding-top: 48px;
}

.section-head {
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
}

.section-head .section-title {
  margin-bottom: 0;
}

.section-lead {
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--t2);
  text-wrap: balance;
}

.section-title {
  margin: 0 auto 48px;
  max-width: 720px;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.1;
  text-wrap: balance;
}

/* ===== Hero ===== */
.hero {
  position: relative;
  padding: 148px 24px 40px;
  text-align: center;
}

.hero-title {
  max-width: 820px;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: clamp(40px, 5.6vw, 68px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.04;
  text-wrap: balance;
  color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 40%, rgba(214, 255, 238, 0.78) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero-lead {
  max-width: 600px;
  margin: 22px auto 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--t2);
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin-top: 24px;
  list-style: none;
  font-size: 14px;
  color: var(--t2);
}

.hero-facts li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-facts svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--green-line);
}

.btn-hero {
  min-height: 50px;
  padding: 0 24px;
  font-size: 16px;
}

/* The table: a screen leaning back that stands up as the page scrolls (main.js sets --tilt) */
.stage {
  width: min(100%, 1080px);
  margin: 56px auto 0;
  perspective: 1600px;
  perspective-origin: 50% 0%;
}

.frame {
  --tilt: 0;
  position: relative;
  aspect-ratio: 16 / 9;
  container-type: size;
  border-radius: 24px;
  overflow: hidden;
  background: #070a09;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 40px 100px rgba(0, 0, 0, 0.55),
    0 12px 30px rgba(0, 0, 0, 0.35);
  transform-origin: 50% 100%;
  transform: translateY(calc(var(--tilt) * -10%)) rotateX(calc(var(--tilt) * 22deg)) scale(calc(1 - var(--tilt) * 0.04));
}

.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

/* The scene is drawn in em on a 104 x 58.5 grid and covers the frame; --fx is the point that
   stays in the middle when the frame is narrower than the scene */
.scene {
  --fx: 52em;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 104em;
  height: 58.5em;
  font-size: max(calc(100cqw / 104), calc(100cqh / 58.5));
  transform: translate(calc(-1 * var(--fx)), -50%);
  background:
    radial-gradient(60% 70% at 42% 46%, #142722 0%, #0d1714 45%, #080c0b 100%);
  user-select: none;
}

/* Table: a dark rail around the felt */
.table {
  position: absolute;
  left: 9em;
  top: 9.5em;
  width: 68em;
  height: 34em;
  border-radius: 17em;
  background:
    linear-gradient(180deg, #232b29 0%, #141a18 45%, #0c100f 100%);
  box-shadow:
    inset 0 0.1em 0 rgba(255, 255, 255, 0.14),
    inset 0 -0.2em 0.5em rgba(0, 0, 0, 0.6),
    0 3em 6em rgba(0, 0, 0, 0.6),
    0 0.6em 1.2em rgba(0, 0, 0, 0.4);
}

.felt {
  position: absolute;
  inset: 1.5em;
  border-radius: 15.5em;
  background:
    radial-gradient(70% 60% at 50% 38%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(ellipse at 50% 45%, #1c6a4c 0%, #145139 42%, #0e3d2b 75%, #0a2f21 100%);
  box-shadow:
    inset 0 0 4em rgba(0, 0, 0, 0.45),
    inset 0 0.35em 0.7em rgba(0, 0, 0, 0.45),
    0 0 0 0.12em rgba(0, 0, 0, 0.55);
}

.felt::before {
  content: "";
  position: absolute;
  inset: 2.4em;
  border-radius: 13em;
  border: 0.12em solid rgba(255, 255, 255, 0.07);
}

.pot {
  position: absolute;
  left: 50%;
  top: 6.2em;
  transform: translateX(-50%);
  padding: 0.45em 1.4em;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0.08em 0.2em rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

.pot b {
  display: block;
  font-size: 1.3em;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.88);
  font-variant-numeric: tabular-nums;
}

.pot b span {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
}

.board {
  position: absolute;
  left: 50%;
  top: 11.2em;
  transform: translateX(-50%);
  display: flex;
  gap: 0.8em;
}

/* Playing cards (scene) */
.card {
  position: relative;
  width: 5.6em;
  height: 7.8em;
  border-radius: 0.6em;
  background: linear-gradient(180deg, #ffffff 0%, #eef1f4 100%);
  color: #15181c;
  box-shadow:
    0 0.15em 0.3em rgba(0, 0, 0, 0.35),
    0 0.6em 1.4em rgba(0, 0, 0, 0.25),
    inset 0 -0.1em 0 rgba(0, 0, 0, 0.08);
}

.card.is-red {
  color: #d93a3a;
}

.card b {
  position: absolute;
  left: 0.5em;
  top: 0.35em;
  font-size: 2.3em;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
}

.card .pip {
  position: absolute;
  left: 0.62em;
  top: 3.05em;
  width: 1.3em;
  height: 1.4em;
  fill: currentColor;
}

.card .pip-lg {
  position: absolute;
  right: 0.55em;
  bottom: 0.55em;
  width: 2.5em;
  height: 2.7em;
  fill: currentColor;
}

.card.is-empty {
  background: var(--slot);
  box-shadow: inset 0 0 0 0.1em rgba(255, 255, 255, 0.05);
}

.card.is-back {
  width: 3.4em;
  height: 4.7em;
  border-radius: 0.45em;
  background:
    repeating-linear-gradient(45deg, rgba(127, 247, 204, 0.12) 0 0.12em, transparent 0.12em 0.6em),
    repeating-linear-gradient(-45deg, rgba(127, 247, 204, 0.12) 0 0.12em, transparent 0.12em 0.6em),
    linear-gradient(180deg, #17503b 0%, #0d3426 100%);
  box-shadow:
    inset 0 0 0 0.25em #f1f4f2,
    inset 0 0 0 0.32em rgba(0, 0, 0, 0.15),
    0 0.2em 0.5em rgba(0, 0, 0, 0.45);
}

/* Seats: dark glass plates */
.seat {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.8em;
  width: 13.4em;
  padding: 0.5em 1.2em 0.5em 0.5em;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%),
    rgba(9, 13, 12, 0.88);
  box-shadow:
    inset 0 0 0 0.08em rgba(255, 255, 255, 0.12),
    inset 0 0.1em 0 rgba(255, 255, 255, 0.1),
    0 0.6em 1.6em rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -50%);
}

.seat-avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 3.2em;
  height: 3.2em;
  border-radius: 50%;
  background: linear-gradient(180deg, #3a4542 0%, #222a28 100%);
  box-shadow: inset 0 0.08em 0 rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.8);
}

.seat-avatar span {
  font-size: 1.4em;
  font-weight: 600;
}

.seat-text {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}

.seat-name {
  font-size: 1.25em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}

.seat-stack {
  font-size: 1.15em;
  color: rgba(255, 255, 255, 0.5);
  font-variant-numeric: tabular-nums;
}

.seat.is-folded {
  opacity: 0.45;
}

.seat-cards {
  position: absolute;
  display: flex;
}

.seat-cards .card + .card {
  margin-left: -1.6em;
  transform: rotate(8deg);
}

.seat-cards .card:first-child {
  transform: rotate(-4deg);
}

.bet {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.6em;
}

.bet b {
  font-size: 1.3em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0.08em 0.2em rgba(0, 0, 0, 0.5);
}

.chip {
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background:
    repeating-conic-gradient(#f2f4f3 0deg 22.5deg, #0e3d2b 22.5deg 45deg);
  box-shadow:
    inset 0 0 0 0.24em #f2f4f3,
    inset 0 0 0 0.3em rgba(0, 0, 0, 0.2),
    0 0.12em 0.25em rgba(0, 0, 0, 0.5);
}

.dealer {
  position: absolute;
  display: grid;
  place-items: center;
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff, #e2e7e5);
  color: #15181c;
  box-shadow: 0 0.15em 0.35em rgba(0, 0, 0, 0.5);
}

.dealer span {
  font-size: 1.15em;
  font-weight: 600;
}

/* Seat positions on the 104 x 58.5 grid */
.seat--top { left: 43em; top: 6em; }
.seat--tl { left: 22em; top: 9.4em; }
.seat--tr { left: 64em; top: 9.4em; }
.seat--bl { left: 12.6em; top: 39.5em; }
.seat--br { left: 73.4em; top: 39.5em; }
.seat--hero { left: 43em; top: 53.2em; }

.seat-cards--tl { left: 23.4em; top: 12.6em; }
.seat-cards--tr { left: 57.4em; top: 12.6em; }
.bet--tr { left: 51em; top: 14.6em; }
.dealer--tr { left: 63.4em; top: 14.6em; }

/* The hero's cards, larger, over the rail */
.hero-cards {
  position: absolute;
  left: 43em;
  top: 37.4em;
  display: flex;
  transform: translateX(-50%);
}

.hero-cards .card {
  width: 6.8em;
  height: 9.5em;
  border-radius: 0.7em;
}

.hero-cards .card b {
  font-size: 2.8em;
}

.hero-cards .card .pip {
  top: 3.7em;
  width: 1.6em;
  height: 1.7em;
}

.hero-cards .card .pip-lg {
  width: 3.1em;
  height: 3.3em;
}

.hero-cards .card:first-child {
  transform: rotate(-5deg) translateY(0.2em);
}

.hero-cards .card + .card {
  margin-left: -1.4em;
  transform: rotate(5deg) translateY(0.2em);
}

/* The game's action bar, bottom right */
.actions {
  position: absolute;
  right: 3em;
  bottom: 3em;
  display: flex;
  gap: 0.8em;
}

.actions span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  min-width: 6.6em;
  height: 3em;
  padding: 0 1.1em;
  border-radius: 0.8em;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.03) 100%),
    rgba(14, 19, 18, 0.9);
  box-shadow:
    inset 0 0 0 0.08em rgba(255, 255, 255, 0.12),
    inset 0 0.1em 0 rgba(255, 255, 255, 0.1),
    0 0.6em 1.4em rgba(0, 0, 0, 0.4);
  color: rgba(255, 255, 255, 0.86);
  font-size: 1.35em;
  font-weight: 600;
  white-space: nowrap;
}

.actions span b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ===== HUD (§7, §10): rendered with the extension's own tokens ===== */
.hud {
  position: relative;
  width: 232px;
  padding: 14px 16px 13px;
  border-radius: 20px;
  font: 500 13px/1.4 var(--font);
  font-variant-numeric: tabular-nums;
  color: var(--t1);
  text-align: left;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02) 55%),
    rgba(14, 17, 16, 0.72);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  backdrop-filter: blur(28px) saturate(170%);
  border: 0.5px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 16px 40px rgba(0, 0, 0, 0.35);
}

/* Your turn: the rim goes mint and a light runs around it */
.hud.is-turn {
  border-color: rgba(127, 247, 204, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(11, 181, 126, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 16px 40px rgba(0, 0, 0, 0.35);
}


.hud-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
}

.mini-cards {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}

.mini-card {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 1px;
  width: 22px;
  height: 30px;
  border-radius: 5px;
  background: linear-gradient(180deg, #ffffff 0%, #eef1f4 100%);
  color: #15181c;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.mini-card.is-red {
  color: #d93a3a;
}

.mini-card.is-ten {
  font-size: 12px;
  letter-spacing: -0.06em;
}

.mini-card svg {
  width: 9px;
  height: 10px;
  fill: currentColor;
}

.hud-hand {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hud-ctrls {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.hud:hover .hud-ctrls {
  opacity: 1;
}

.hud-ctrls span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: var(--t2);
}

.hud-ctrls svg {
  width: 12px;
  height: 12px;
}

.hud-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.hud-eq {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.hud-pc {
  margin-left: 1px;
  font-size: 17px;
  letter-spacing: 0;
  color: var(--t3);
}

.hud-act {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--t3);
}

/* A move with a long size ("Raise to 1,200") steps down, as in the HUD */
.hud-act.is-long {
  font-size: 15px;
}

.act-raise { color: var(--mint); }
.act-call { color: var(--t1); }
.act-check { color: var(--t2); }
.act-fold { color: var(--fold); }

.meter {
  position: relative;
  height: 4px;
  margin: 9px 0 9px;
  border-radius: 999px;
  background: var(--track);
}

.meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green) 0%, var(--green-line) 100%);
}

.meter-tick {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 10px;
  margin-left: -1px;
  border-radius: 1px;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(14, 17, 16, 0.9);
}

.hud-meta {
  font-size: 12px;
  color: var(--t3);
  white-space: nowrap;
}

.hud-meta b {
  font-weight: 500;
  color: var(--t2);
}

/* Meter values, kept in the stylesheet (the CSP allows no inline styles) */
.fill-84 { width: 84%; }
.fill-61 { width: 61%; }
.tick-25 { left: 25%; }

/* The hero's HUD: docked at the top right of the screen, a little larger than life. It is drawn in px
   and the table in em, so it steps down with the frame (below) to stay clear of Theo's seat, whose right
   edge is at 70.7em: as the extension places it, the HUD covers no seat */
.frame .hud {
  position: absolute;
  top: 5.5%;
  right: 3.2%;
  z-index: 3;
  transform: scale(var(--hud-scale, 1.18));
  transform-origin: top right;
}

/* ===== Features ===== */
.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.feature {
  display: flex;
  flex-direction: column;
  padding: 8px 8px 26px;
  border-radius: 26px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    var(--glass-shadow);
}

/* The demo film: the real HUD on a PokerNow table, framed in the page glass */

.demo {
  margin: 0 auto;
  max-width: 1040px;
  padding: 8px;
  border-radius: 26px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    var(--glass-shadow);
}

.demo-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 1200;
  border-radius: 19px;
  background: var(--bg);
}

/* A piece of felt with the HUD's own glass on it */
.feature-shot {
  position: relative;
  display: grid;
  place-items: center;
  height: 232px;
  padding: 20px;
  border-radius: 19px;
  overflow: hidden;
  background:
    radial-gradient(80% 70% at 50% 0%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(ellipse at 50% 40%, #185c42 0%, #114631 50%, #0b3324 100%);
  box-shadow:
    inset 0 0 3em rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.feature-shot::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

/* Fragments sit in a glass card already: no second backdrop blur (Chrome draws a band) */
.feature-shot .hud {
  width: 248px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02) 55%),
    rgba(12, 16, 15, 0.86);
}

.feature > h3 {
  margin: 22px 18px 6px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.feature > p {
  margin: 0 18px;
  color: var(--t2);
  font-size: 15px;
  line-height: 1.5;
  text-wrap: pretty;
}

/* Fragment 1: equity against the price */
.hud-row--flush {
  margin-top: 0;
}

.need-label {
  font-size: 12px;
  color: var(--t3);
}

.hud-meta + .hud-meta {
  margin-top: 3px;
}

.hud-meta--soft {
  color: var(--t4);
}

/* The expanded HUD's board row */
.mini-board {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}

.mini-card.is-slot {
  background: var(--slot);
  box-shadow: none;
}

/* Fragment 2: one suggestion per row */
.why-list {
  display: grid;
  gap: 12px;
  list-style: none;
}

.why-list li {
  display: grid;
  gap: 2px;
}

.why-list .hud-act {
  font-size: 17px;
}

.why-list span:last-child {
  font-size: 12px;
  color: var(--t3);
  white-space: nowrap;
}

/* Fragment 3: outs and final-hand odds */
.outs {
  margin-bottom: 11px;
  font-size: 12px;
  color: var(--t2);
}

.outs b {
  font-weight: 600;
  color: var(--t1);
}

.odds {
  display: grid;
  gap: 8px;
  list-style: none;
}

.odds li {
  display: grid;
  grid-template-columns: 62px 1fr 34px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.odds-name {
  color: var(--t2);
}

.odds .is-made .odds-name {
  color: var(--mint);
}

.odds-bar {
  height: 3px;
  border-radius: 999px;
  background: var(--track);
  overflow: hidden;
}

.odds-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.32);
}

.odds .is-made .odds-bar i {
  background: linear-gradient(90deg, var(--green) 0%, var(--green-line) 100%);
}

.odds-pct {
  font-weight: 600;
  text-align: right;
}

.w-35 { width: 35%; }
.w-30 { width: 30%; }
.w-27 { width: 27.5%; }
.w-5 { width: 5%; }


/* ===== How it works ===== */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  list-style: none;
  counter-reset: none;
}

.step {
  position: relative;
  padding: 28px 26px 30px;
  border-radius: 22px;
  background: var(--glass);
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    var(--glass-shadow);
}

.step-num {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 20px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--mint-pale);
  background: rgba(11, 181, 126, 0.16);
  box-shadow: inset 0 0 0 1px rgba(63, 224, 166, 0.35);
}

.step h3,
.more h3,
.trust-item h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.3;
}

.step p,
.more p,
.trust-item p {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--t2);
  text-wrap: pretty;
}

/* ===== More features: a quiet list under the three cards ===== */
.more {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 40px;
  margin-top: 56px;
  padding: 0 8px;
  list-style: none;
}

.more li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.more svg,
.trust-item svg {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 8px;
  border-radius: 11px;
  color: var(--mint);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.more h3 {
  font-size: 16px;
  margin-top: 1px;
}

.more p {
  margin-top: 4px;
  font-size: 14.5px;
}

.keys {
  white-space: nowrap;
}

kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 5px;
  border-radius: 6px;
  font: 500 12.5px/1.6 var(--font);
  text-align: center;
  color: var(--t1);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}

/* ===== Privacy and fair play ===== */
.trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-radius: 24px;
  overflow: hidden;
  background: var(--glass);
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    var(--glass-shadow);
}

.trust-item {
  padding: 30px 28px 32px;
}

.trust-item + .trust-item {
  border-left: 1px solid var(--line);
}

.trust-item svg {
  margin-bottom: 18px;
}

.trust-note {
  margin-top: 24px;
  text-align: center;
  font-size: 14px;
  color: var(--t3);
}

.trust-note a,
.pricing-foot a {
  margin-left: 4px;
  color: var(--mint);
  text-decoration-color: rgba(127, 247, 204, 0.4);
  text-underline-offset: 3px;
}

.trust-note a:hover {
  text-decoration-color: currentColor;
}

/* ===== Pricing ===== */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 384px));
  justify-content: center;
  align-items: stretch;
  gap: 20px;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px 24px 16px;
  border-radius: 26px;
  overflow: hidden;
  isolation: isolate;
  font-weight: 600;
}

/* Free: the panel's glass */
.plan-free {
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%),
    rgba(18, 22, 21, 0.5);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 18px 48px rgba(0, 0, 0, 0.45);
}

/* Pro: gold glass with a bright rim and a soft top band */
.plan-pro {
  color: var(--gold-ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 22%),
    linear-gradient(180deg, rgba(255, 243, 183, 0.94) 0%, rgba(246, 217, 107, 0.92) 24%, rgba(215, 169, 59, 0.92) 62%, rgba(193, 140, 40, 0.94) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 246, 205, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(255, 238, 190, 0.5),
    inset 0 -14px 24px rgba(126, 80, 12, 0.14),
    0 18px 48px rgba(0, 0, 0, 0.55);
}

.plan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 46px;
  margin-bottom: 22px;
}

.plan-head {
  padding-left: 4px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--t1);
}

.plan-pro .plan-head {
  color: var(--gold-ink);
}

/* Plan toggle: native radios under a sliding white thumb */
.plan-toggle {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  flex: 0 1 276px;
  height: 46px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.38),
    inset 0 1px 3px rgba(90, 55, 0, 0.25),
    inset 0 -1px 0 rgba(255, 255, 255, 0.35);
}

.plan-toggle::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 3);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.92) 100%);
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -1px 1px rgba(90, 55, 0, 0.08),
    0 2px 8px rgba(90, 58, 0, 0.25);
  transform: translateX(100%);
  transition: transform 0.28s var(--spring);
}

.plan-toggle:has([value="month"]:checked)::before { transform: translateX(0); }
.plan-toggle:has([value="lifetime"]:checked)::before { transform: translateX(200%); }

.plan-toggle label {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 14.5px;
  color: rgba(42, 33, 7, 0.62);
  cursor: pointer;
  transition: color 0.15s ease;
}

.plan-toggle label:hover,
.plan-toggle label:has(:checked) {
  color: var(--gold-ink);
}

.plan-toggle label:has(:focus-visible) {
  outline: 2px solid var(--gold-ink);
  outline-offset: 1px;
}

.plan-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.plan-price {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.plan-was {
  justify-self: end;
  margin-right: 10px;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(42, 33, 7, 0.56);
  text-decoration-thickness: 1.5px;
}

.plan-per {
  justify-self: start;
  margin-left: 3px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(42, 33, 7, 0.6);
}

.plan-free .plan-per {
  color: var(--t3);
}

.plan-billed {
  min-height: 20px;
  margin: 8px 0 18px;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  color: rgba(42, 33, 7, 0.62);
}

.plan-free .plan-billed {
  color: var(--t3);
}

.plan-cta {
  width: 100%;
  min-height: 52px;
  font-size: 16px;
}

/* Pro's button: smoked glass on gold */
.plan-pro .plan-cta {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 50%),
    rgba(14, 13, 10, 0.92);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 6px 16px rgba(60, 35, 0, 0.3);
}

.plan-pro .plan-cta:hover {
  background-color: rgba(44, 40, 30, 0.94);
}

.plan-pro .plan-cta:focus-visible {
  outline-color: var(--gold-ink);
}

.plan-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 18px;
  margin: 12px 0 16px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--t3);
}

.plan-pro .plan-note {
  color: rgba(42, 33, 7, 0.64);
}

.plan-note svg {
  margin-top: -1px;
}

.plan-features {
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 8px;
}

.plan-pro .plan-features {
  border-top-color: rgba(42, 33, 7, 0.12);
}

.plan-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--t1);
}

.plan-pro .plan-features li {
  color: #1f1905;
}

.plan-features svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  color: var(--green-line);
}

.plan-pro .plan-features svg {
  color: var(--gold-ink);
}

.pricing-foot {
  margin-top: 28px;
  text-align: center;
  font-size: 14px;
  color: var(--t3);
}

/* ===== FAQ ===== */
.faq {
  max-width: 760px;
  margin: 0 auto;
  border-radius: 22px;
  overflow: hidden;
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    var(--glass-shadow);
}

.faq details + details {
  border-top: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font-size: 16px;
  font-weight: 600;
  color: var(--t1);
  list-style: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary:hover {
  background: rgba(255, 255, 255, 0.03);
}

.faq summary:focus-visible {
  outline-offset: -3px;
  border-radius: 14px;
}

.faq summary svg {
  flex-shrink: 0;
  color: var(--t3);
  transition: transform 0.3s var(--out), color 0.15s ease;
}

.faq details[open] summary svg {
  transform: rotate(180deg);
  color: var(--t2);
}

.faq-answer {
  padding: 0 24px 22px;
  max-width: 680px;
  color: var(--t2);
  font-size: 15px;
  line-height: 1.65;
}

.faq-answer a {
  color: var(--mint);
  text-decoration-color: rgba(127, 247, 204, 0.4);
  text-underline-offset: 3px;
}

.faq-answer a:hover {
  text-decoration-color: currentColor;
}

/* Opens to its height where the browser can animate it */
.faq details::details-content {
  block-size: 0;
  overflow-y: clip;
  transition: block-size 0.32s var(--out), content-visibility 0.32s allow-discrete;
}

.faq details[open]::details-content {
  block-size: auto;
}

/* ===== Closing call to action ===== */
.cta {
  padding: 24px 24px 112px;
}

.cta-panel {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 72px 32px;
  border-radius: 30px;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(11, 181, 126, 0.2) 0%, rgba(11, 181, 126, 0) 70%),
    var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    var(--glass-shadow);
}

.cta-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    url(../images/topo.svg) center top / max(100%, 1200px) auto no-repeat,
    url(../images/topo.svg) center top / max(100%, 1200px) auto no-repeat;
  -webkit-mask-image: radial-gradient(80% 100% at 50% 0%, #000 0%, transparent 75%);
  mask-image: radial-gradient(80% 100% at 50% 0%, #000 0%, transparent 75%);
}

.cta-panel .marble {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5));
}

.cta-panel h2 {
  margin-bottom: 30px;
  font-family: var(--font-display);
  font-size: clamp(32px, 4.4vw, 52px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.cta-note {
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--t3);
}

/* ===== Footer ===== */
.footer {
  position: relative;
  padding: 56px 24px 32px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(8, 11, 10, 0.4) 0%, rgba(8, 11, 10, 0.9) 100%);
}

.footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px 64px;
}

.footer-brand .brand {
  display: inline-flex;
  gap: 10px;
}

.footer-brand .marble {
  width: 28px;
  height: 28px;
}

.footer-brand .wordmark {
  font-size: 16px;
}

.footer-brand p {
  max-width: 300px;
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--t3);
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, auto));
  gap: 32px 56px;
}

.footer-head {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--t1);
}

.footer-nav ul {
  display: grid;
  gap: 8px;
  list-style: none;
}

.footer-nav a {
  font-size: 14px;
  color: var(--t3);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-nav a:hover,
.footer-nav a[aria-current="page"] {
  color: var(--t1);
}

.footer-bottom {
  max-width: 1120px;
  margin: 48px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  font-size: 13px;
  color: var(--t3);
}

/* ===== Toast (?checkout=canceled) ===== */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 300;
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--t1);
  white-space: nowrap;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03) 55%),
    rgba(16, 20, 19, 0.84);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  border: 0.5px solid rgba(255, 255, 255, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 12px 28px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.is-open {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ===== Simple pages: legal, contact, uninstall, success, 404 ===== */
.page {
  padding: 148px 24px 112px;
}

.page-narrow {
  max-width: 760px;
  margin: 0 auto;
}

.page-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.6vw, 52px);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.06;
  text-wrap: balance;
}

.page-sub {
  margin-top: 14px;
  font-size: 17px;
  color: var(--t2);
}

.page-meta {
  margin-top: 12px;
  font-size: 14px;
  color: var(--t3);
}

.center {
  text-align: center;
}

.panel {
  border-radius: 24px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    var(--glass-shadow);
}

/* Legal text */
.legal {
  margin-top: 40px;
  padding: 44px clamp(22px, 5vw, 52px);
  line-height: 1.7;
}

.legal-summary {
  margin-bottom: 36px;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(11, 181, 126, 0.08);
  box-shadow: inset 0 0 0 1px rgba(63, 224, 166, 0.2);
  color: var(--t1);
  font-size: 15.5px;
}

.legal h2 {
  margin: 36px 0 10px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.legal h2:first-of-type {
  margin-top: 0;
}

.legal h3 {
  margin: 20px 0 6px;
  font-size: 16px;
  font-weight: 600;
}

.legal p,
.legal li {
  color: var(--t2);
  font-size: 15.5px;
}

.legal p + p {
  margin-top: 10px;
}

.legal ul {
  margin: 10px 0 0;
  padding-left: 20px;
}

.legal li + li {
  margin-top: 6px;
}

.legal li::marker {
  color: var(--t4);
}

.legal strong {
  font-weight: 600;
  color: var(--t1);
}

.legal a {
  color: var(--mint);
  text-decoration-color: rgba(127, 247, 204, 0.4);
  text-underline-offset: 3px;
}

.legal a:hover {
  text-decoration-color: currentColor;
}

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
}

.contact-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px;
}

.contact-card svg {
  width: 36px;
  height: 36px;
  margin-bottom: 10px;
  padding: 8px;
  border-radius: 11px;
  color: var(--mint);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.contact-card h2 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.contact-card p {
  color: var(--t2);
  font-size: 14.5px;
  line-height: 1.5;
}

.contact-card p a {
  color: var(--t1);
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.35);
}

.contact-card > a {
  margin-top: auto;
  padding-top: 8px;
  color: var(--mint);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  word-break: break-all;
}

.contact-card > a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Uninstall */
.un {
  max-width: 560px;
  margin: 0 auto;
}

.un-form {
  margin-top: 36px;
  padding: 26px;
  text-align: left;
}

.un-field {
  border: 0;
  min-inline-size: 0;
}

.un-field legend {
  margin-bottom: 14px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.un-options {
  display: grid;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line);
}

.un-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 16px;
  font-size: 15px;
  color: var(--t2);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.un-option + .un-option {
  border-top: 1px solid var(--line);
}

.un-option:hover {
  background: rgba(255, 255, 255, 0.03);
}

.un-option:has(:checked) {
  color: var(--t1);
  background: rgba(11, 181, 126, 0.1);
}

.un-option input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--green);
}

.un-label {
  display: block;
  margin: 24px 0 8px;
  font-size: 15px;
  font-weight: 600;
}

.un-label span {
  font-weight: 500;
  color: var(--t3);
}

.un-form textarea {
  display: block;
  width: 100%;
  min-height: 112px;
  padding: 12px 14px;
  border: 0;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 3px rgba(0, 0, 0, 0.3);
  color: var(--t1);
  font-size: 16px;
  line-height: 1.5;
  resize: vertical;
  transition: box-shadow 0.15s ease;
}

.un-form textarea::placeholder {
  color: var(--t4);
}

.un-form textarea:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(63, 224, 166, 0.6), 0 0 0 3px rgba(63, 224, 166, 0.15);
}

.un-error {
  min-height: 22px;
  margin: 12px 0 4px;
  font-size: 14px;
  color: var(--fold);
}

.un-note {
  margin: 12px 0 4px;
  font-size: 14px;
  color: var(--t2);
}

.un-note a {
  color: var(--t1);
}

.un-error:empty {
  min-height: 0;
  margin: 8px 0 0;
}

.un-submit {
  width: 100%;
  min-height: 50px;
  margin-top: 12px;
}

.un-submit[disabled] {
  cursor: progress;
  opacity: 0.7;
}

.un-done {
  margin-top: 36px;
  padding: 40px 28px;
}

.un-done:focus {
  outline: none;
}

.un-done h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.un-done p {
  margin-top: 8px;
  color: var(--t2);
}

.un-back {
  margin-top: 28px;
  font-size: 14px;
  color: var(--t3);
}

.un-back a {
  color: var(--t2);
}

.un-back a:hover {
  color: var(--t1);
}

/* Success and 404 */
.status {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.status-mark {
  position: relative;
  width: 88px;
  height: 88px;
  margin: 0 auto 28px;
}

.status-mark .marble {
  width: 88px;
  height: 88px;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.5));
}

.pro-pill {
  position: absolute;
  right: -10px;
  bottom: -2px;
  display: grid;
  place-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--gold-ink);
  font-size: 13px;
  font-weight: 600;
  box-shadow:
    inset 0 1px 0 rgba(255, 249, 217, 0.75),
    0 2px 8px rgba(214, 165, 48, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.35);
}

.status .page-sub {
  margin-top: 12px;
}

.status-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 32px;
}

.nf-code {
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: clamp(88px, 14vw, 132px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  color: transparent;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.06) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Light along the contour lines near Add to Chrome (main.js): a canvas kept over the screen as
   the page scrolls, clipped to the page */
.topo-light-frame {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.topo-light {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
}

main,
.footer {
  position: relative;
  z-index: 1;
}

main {
  flex: 1 0 auto;
}

/* ===== Responsive ===== */
@media (max-width: 1020px) {
  .steps,
  .more {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .steps .step:last-child {
    grid-column: 1 / -1;
  }

  .trust {
    grid-template-columns: minmax(0, 1fr);
  }

  .trust-item + .trust-item {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .features {
    grid-template-columns: minmax(0, 560px);
    justify-content: center;
  }

  .feature-shot {
    height: 220px;
  }

  .frame .hud {
    --hud-scale: 1.02;
  }
}

@media (max-width: 900px) {
  .frame .hud {
    --hud-scale: 0.92;
  }
}

@media (max-width: 820px) {
  .frame .hud {
    --hud-scale: 0.86;
  }
}

@media (max-width: 900px) {
  .nav-menu li:nth-child(-n+2) {
    display: none;
  }
}

@media (max-width: 760px) {
  .section {
    padding: 72px 20px;
  }

  .section + .section {
    padding-top: 32px;
  }

  .section-title {
    margin-bottom: 36px;
  }

  .section-head {
    margin-bottom: 32px;
  }

  .section-lead {
    font-size: 16px;
  }

  .hero-lead {
    font-size: 16.5px;
  }

  .steps,
  .more {
    grid-template-columns: minmax(0, 1fr);
  }

  .more {
    gap: 24px;
    margin-top: 40px;
    padding: 0;
  }

  .footer-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 16px;
  }

  .hero {
    padding: 120px 20px 24px;
  }

  .stage {
    margin-top: 44px;
  }

  .frame .hud {
    --hud-scale: 0.74;
  }

  .pricing-grid {
    grid-template-columns: minmax(0, 420px);
  }

  .plan {
    padding: 20px 18px 12px;
  }

  .plan-price {
    font-size: 38px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .cta {
    padding: 8px 16px 80px;
  }

  .cta-panel {
    padding: 56px 22px;
    border-radius: 24px;
  }

  .page {
    padding: 120px 20px 80px;
  }
}

@media (max-width: 660px) {
  .frame .hud {
    --hud-scale: 0.62;
  }
}

/* Phones: a taller crop around the table, the HUD docked above the pot. The crop shows the board, the
   pot, the bet and the hero; the other seats would be cut in half by its edges (or sit under the HUD) */
@media (max-width: 560px) {
  .frame {
    aspect-ratio: 10 / 13;
    border-radius: 20px;
  }

  .seat--top,
  .seat--tl,
  .seat--tr,
  .seat--bl,
  .seat--br,
  .seat-cards--tl,
  .seat-cards--tr,
  .dealer--tr {
    display: none;
  }

  .scene {
    --fx: 43em;
    top: 0;
    font-size: calc(100cqw / 50);
    transform: translate(calc(-1 * var(--fx)), 7.2em);
  }

  .frame .hud {
    --hud-scale: 0.92;
    top: 14px;
    right: 50%;
    transform: translateX(50%) scale(var(--hud-scale));
    transform-origin: top center;
  }

  .actions {
    display: none;
  }

  .legal {
    margin-top: 32px;
    padding: 28px 20px;
    border-radius: 20px;
  }

  .legal-summary {
    margin-bottom: 28px;
    padding: 14px 16px;
  }
}

@media (max-width: 360px) {
  .frame .hud {
    --hud-scale: 0.8;
  }
}

@media (max-width: 640px) {
  .header {
    padding: 0 10px;
  }

  .nav {
    transform: translateY(10px);
  }

  .header.is-scrolled .nav {
    transform: translateY(8px);
  }

  .nav-menu li:not(:last-child) {
    display: none;
  }

  .nav-menu li:last-child {
    margin-left: 0;
  }

  .nav-menu .btn {
    min-height: 36px;
    padding: 0 14px;
    font-size: 13.5px;
  }

  .marble {
    width: 32px;
    height: 32px;
  }

  .wordmark {
    font-size: 16px;
  }

}

@media (max-width: 380px) {
  .nav-menu .btn svg {
    display: none;
  }

  .wordmark {
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .frame {
    transform: none;
  }

  .btn-chrome:hover svg {
    transform: none;
  }

  .nav,
  .nav::before,
  .nav::after,
  .plan-toggle::before,
  .faq summary svg,
  .faq details::details-content,
  .tip,
  .toast {
    transition: none;
  }
}

@media (max-width: 480px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    max-width: 320px;
    margin-inline: auto;
  }

  .hero-facts {
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    margin-inline: auto;
    gap: 8px;
  }

  .trust-item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 16px;
    padding: 22px 20px;
  }

  .trust-item svg {
    grid-row: span 2;
    margin-bottom: 0;
  }

  .trust-item p {
    grid-column: 2;
  }

  .step {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 16px;
    padding: 22px 20px;
  }

  .step-num {
    grid-row: span 2;
    margin-bottom: 0;
  }

  .step p {
    grid-column: 2;
  }
}