@charset "UTF-8";
/*
 * LastiKadi — lastikadi.com landing page
 * ---------------------------------------------------------------------------
 * Token provenance. Nothing here is invented; every colour is either an existing
 * Kadi client design token or a value sampled directly from the canonical mark.
 *
 *   Carried over from the Kadi client design system (the in-app token set):
 *     --paper #f4f6f0   --ink #17231f   --muted #718079  --line #dbe1d9
 *     --green #245a49   --felt #123f37  --red #b94943    --lime #d8e86e
 *     plus the on-felt ramp the app already used: #2c6555 #355e51 #6a9180
 *     #8aaa9c #9db7a3 #a3bead #c7d8c6 #e8efc7 #eff4d7
 *
 *   Sampled from the canonical mark (assets/brand/):
 *     gold ramp #FAD220 -> #FBB702 -> #F89C02 ; near-black tile #070808
 *
 * Full provenance, including the reuse constraints on the mark, is recorded in
 * docs/brand-provenance.md, which is deliberately outside the web root.
 *
 * Type: Manrope + DM Mono, self-hosted (assets/css/fonts.css).
 */

/* ============================================================ tokens === */
:root {
  /* Brand ramp, straight from the mark. */
  --gold-bright: #fad220;
  --gold: #fbb702;
  --gold-deep: #f89c02;
  --tile: #070808;

  /* Existing app tokens. */
  --paper: #f4f6f0;
  --paper-2: #eef1e9;
  --ink: #17231f;
  --muted: #718079;
  --line: #dbe1d9;
  --green: #245a49;
  --felt: #123f37;
  --red: #b94943;
  --lime: #d8e86e;

  /* Dark surfaces, derived from --tile and --felt. */
  --night: #0b0f0d;
  --night-2: #101714;
  --night-3: #16201c;
  --felt-2: #16493f;

  /* On-dark text ramp, from the app's existing on-felt colours. */
  --on-dark: #eff4d7;
  --on-dark-2: #c7d8c6;
  --on-dark-3: #9db7a3;
  --on-dark-4: #6a9180;

  /*
   * Body text on the light paper surfaces.
   *
   * The app's --muted (#718079) is a 3.8:1 match against --paper and 4.2:1
   * against white. Both fall short of WCAG AA for body text, which needs 4.5:1.
   * It is kept for the hairline and de-emphasised roles it was designed for, and
   * this darker descendant of the same hue carries every paragraph on a light
   * background. Measured: 5.8:1 on --paper, 6.3:1 on white.
   */
  --muted-ink: #55635c;
  --muted-ink-2: #647269;

  /* Gold that is legible as text on the light paper background.
     #fbb702 on #f4f6f0 is roughly 1.9:1, so text uses this darkened
     descendant of the same hue instead of the display gold. */
  --gold-ink: #6f4a00;
  --gold-ink-2: #8a5c00;

  --shadow-sm: 0 1px 2px rgb(7 8 8 / 0.08), 0 2px 8px rgb(7 8 8 / 0.06);
  --shadow: 0 18px 50px -12px rgb(7 8 8 / 0.28);
  --shadow-deep: 0 30px 80px -20px rgb(0 0 0 / 0.6);

  --sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* All type is rem-based so the page survives 200% text scaling. */
  --step--1: clamp(0.8rem, 0.77rem + 0.15vw, 0.875rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --step-1: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --step-2: clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem);
  --step-3: clamp(1.5rem, 1.32rem + 0.9vw, 2rem);
  --step-4: clamp(1.875rem, 1.55rem + 1.6vw, 2.75rem);
  --step-5: clamp(2.25rem, 1.7rem + 2.7vw, 3.75rem);
  /* Capped at 5rem rather than 5.25rem: the hero headline is the largest type
     on the page and it is the element most likely to force an awkward rag. */
  --step-6: clamp(2.75rem, 1.9rem + 4.1vw, 5rem);

  /* 48px minimum target, matching the app's own accessibility commitment. */
  --tap: 3rem;
  --r-sm: 0.5rem;
  --r: 0.875rem;
  --r-lg: 1.5rem;

  --gutter: clamp(1.125rem, 0.85rem + 1.4vw, 2.5rem);
  --section-y: clamp(3.75rem, 2.5rem + 6vw, 8rem);
  --shell: 74rem;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchors must not land under the sticky masthead. */
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--night);
  color: var(--on-dark);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  /*
   * Deliberately NO overflow-x:hidden here.
   *
   * It is a common safety net, and it was in the first draft of this sheet. On
   * <body> it propagates to the viewport, so it does not make the page look
   * fixed — it silently *clips* whatever is too wide. Clipping is a worse
   * failure than a scrollbar: at 200% text on a 320px phone it was hiding 89px
   * of content, and no reviewer would see it, because there was nothing to
   * scroll. Removing it means an overflow is visible in review and fixable.
   * The one element that genuinely needs clipping, the hero's decorative glow,
   * clips itself.
   */
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
  /* Long single words must break rather than widen the viewport. */
  overflow-wrap: break-word;
}

p, ul, ol, dl, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
b, strong { font-weight: 800; }
button { font: inherit; color: inherit; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}
.section--paper :focus-visible,
.section--play :focus-visible { outline-color: var(--gold-ink); }

/* ========================================================= utilities === */
.u-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -150%;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 1.25rem;
  background: var(--gold);
  color: var(--tile);
  font-weight: 800;
  text-decoration: none;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  transition: translate 0.18s var(--ease);
}
.skip:focus { translate: -50% 0; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: 48rem; }

.kicker {
  margin: 0 0 1rem;
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.kicker--dark { color: var(--gold-ink); }
.kicker--ink { color: var(--ink); }

/* ============================================================= buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: var(--tap);
  padding: 0.75rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: var(--step-0);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease),
    border-color 0.18s var(--ease), translate 0.18s var(--ease);
}
.btn__arrow { transition: translate 0.18s var(--ease); }
.btn:hover .btn__arrow { translate: 0.2rem 0; }

.btn--gold { background: var(--gold); color: var(--tile); }
.btn--gold:hover { background: var(--gold-bright); translate: 0 -2px; }

.btn--ghost {
  background: transparent;
  color: var(--on-dark);
  border-color: color-mix(in srgb, var(--on-dark) 30%, transparent);
}
.btn--ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
  translate: 0 -2px;
}

.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: #000; translate: 0 -2px; }

.btn--sm { padding: 0.5rem 1.1rem; font-size: var(--step--1); }
.btn--lg { min-height: 3.5rem; padding: 1rem 2rem; font-size: var(--step-1); }

/* ============================================================ masthead === */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--night) 82%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--on-dark) 12%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
}
.masthead__inner {
  display: flex;
  align-items: center;
  gap: 0.5rem 1rem;
  /* Wrapping is what lets the header reflow instead of overflowing when the
     reader raises their text size on a narrow phone. At 100% this is a single
     row; at 200% the menu button drops to a second line rather than pushing
     the brand off screen. */
  flex-wrap: wrap;
  min-height: 4.25rem;
  padding-block: 0.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  /* The wordmark link is a real control, so it gets the real target size too. */
  min-height: var(--tap);
  min-width: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.brand__mark { flex: none; border-radius: 0.5rem; }
.brand__word { font-size: var(--step-1); }

.nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.nav__list {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.nav__list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  /* Short labels like "Access" are under 48px wide without this, and the page
     commits to a 48px minimum target in the Access section. */
  min-width: 3.25rem;
  padding-inline: 0.25rem;
  color: var(--on-dark-2);
  font-size: var(--step--1);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s var(--ease);
}
.nav__list a:hover { color: var(--gold); }

.burger {
  display: none;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  min-height: var(--tap);
  /* The icon-only variant below 30rem would otherwise be narrower than it is
     tall, and the page commits to a 48px minimum target in every direction. */
  min-width: var(--tap);
  padding: 0 0.875rem;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--on-dark) 22%, transparent);
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 800;
  cursor: pointer;
}
.burger__box {
  display: grid;
  gap: 4px;
  width: 1.125rem;
}
.burger__box i {
  display: block;
  height: 2px;
  background: currentcolor;
  border-radius: 2px;
  transition: translate 0.2s var(--ease), rotate 0.2s var(--ease), opacity 0.15s;
}
.burger[aria-expanded="true"] .burger__box i:nth-child(1) { translate: 0 6px; rotate: 45deg; }
.burger[aria-expanded="true"] .burger__box i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__box i:nth-child(3) { translate: 0 -6px; rotate: -45deg; }

/* =============================================================== hero === */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3rem, 1.5rem + 7vw, 6.5rem) clamp(2.5rem, 1.5rem + 4vw, 4rem);
  background-color: var(--night);
  background-image: linear-gradient(180deg, var(--night-2) 0%, var(--night) 100%);
  /* The glow is a wide decorative circle that deliberately extends past the
     viewport. Clipping it here is what keeps it from adding a horizontal
     scrollbar, and overflow:hidden on an ancestor is the only thing that does. */
  overflow: hidden;
}
.hero__glow {
  position: absolute;
  z-index: -1;
  top: -22rem;
  right: -14rem;
  width: 46rem;
  height: 46rem;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold) 20%, transparent) 0%, transparent 66%);
  filter: blur(12px);
  pointer-events: none;
}

.hero__inner {
  display: grid;
  /* The copy column gets the larger share: at 84px display type the headline
     needs the room, and a three-line rag read as a mistake rather than a
     deliberate break. */
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(2.5rem, 1rem + 5vw, 5rem);
}

.hero h1 {
  font-size: var(--step-6);
  letter-spacing: -0.045em;
  margin-bottom: 1.5rem;
  text-wrap: balance;
}

.lede {
  max-width: 34rem;
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--on-dark-2);
}
.lede--muted {
  margin-top: 0.875rem;
  color: var(--on-dark-3);
  font-size: var(--step-0);
}
.lede b { color: var(--gold); }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block: 1.75rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.25rem 0.75rem;
  background: color-mix(in srgb, var(--on-dark) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-dark) 16%, transparent);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--on-dark-2);
}
.chip--live {
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
  color: var(--gold);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.fineprint {
  max-width: 30rem;
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--on-dark-4);
}

/* ---- hero table visual ---- */
.hero__table { min-width: 0; }

.felt {
  position: relative;
  padding: clamp(1.25rem, 0.8rem + 1.6vw, 2rem);
  background:
    linear-gradient(155deg, #18493e 0%, var(--felt) 48%, #0d332c 100%);
  border: 1px solid color-mix(in srgb, var(--lime) 14%, transparent);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-deep), inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
}
.felt::after {
  content: "";
  position: absolute;
  inset: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--lime) 9%, transparent);
  border-radius: calc(var(--r-lg) - 0.5rem);
  pointer-events: none;
}
.felt__label {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-3);
}
.felt__label span { color: var(--on-dark-4); }

.fan {
  display: flex;
  justify-content: center;
  gap: clamp(0.25rem, -0.15rem + 1.1vw, 0.75rem);
  min-height: 9.5rem;
  align-items: flex-end;
}
.playcard {
  position: relative;
  flex: 0 1 5.5rem;
  aspect-ratio: 5 / 7;
  min-width: 0;
  background: linear-gradient(170deg, #fff 0%, #f2f4ef 100%);
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1.25rem rgb(0 0 0 / 0.35);
  transform-origin: 50% 120%;
  rotate: -9deg;
  translate: 0 0.35rem;
}
.playcard--7 { rotate: -4.5deg; }
.playcard--8 { rotate: 0deg; translate: 0; }
.playcard--j { rotate: 4.5deg; }
.playcard--k { rotate: 9deg; }

.playcard__c, .playcard__g {
  position: absolute;
  z-index: 1;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}
.playcard__c { top: 0.3rem; left: 0.375rem; font-size: 1rem; }
.playcard__g { top: 0.28rem; left: 0.9rem; font-size: 0.95rem; }
.playcard__c--b { top: auto; bottom: 0.3rem; left: auto; right: 0.375rem; rotate: 180deg; }
.playcard__g--b { top: auto; bottom: 0.28rem; left: auto; right: 0.9rem; rotate: 180deg; }
.playcard--red { color: var(--red); }

/* Centre pip, matching the specials cards. */
.playcard__pip {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(1.5rem, 1rem + 2.4vw, 2.75rem);
  line-height: 1;
  color: var(--ink);
}

.playcard--k {
  background: linear-gradient(165deg, #2b2b2b 0%, #101010 100%);
  box-shadow: 0 0.5rem 1.25rem rgb(0 0 0 / 0.5), inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent);
}
.playcard__pip--joker { color: var(--gold); }

.felt__names {
  display: grid;
  grid-auto-flow: column;
  gap: clamp(0.25rem, -0.15rem + 1.1vw, 0.75rem);
  margin-top: 0.875rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--on-dark-4);
}

.piles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.pile {
  padding: 0.75rem 0.875rem;
  background: color-mix(in srgb, var(--night) 45%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-dark) 10%, transparent);
  border-radius: var(--r-sm);
}
.pile dt {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-4);
}
.pile dd {
  margin: 0.2rem 0 0;
  font-size: var(--step-0);
  font-weight: 800;
  color: var(--on-dark);
}

.factbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  background: color-mix(in srgb, var(--on-dark) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-dark) 10%, transparent);
  border-radius: var(--r);
  overflow: hidden;
}
.factbar > div {
  padding: 1.125rem 1.25rem;
  background: var(--night-2);
}
.factbar dt {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-4);
}
.factbar dd {
  margin: 0.35rem 0 0;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--on-dark-2);
}

/* ============================================================ sections === */
.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.8); }
.section--paper { background-color: var(--paper); background-image: none; color: var(--ink); }
.section--felt {
  /* The flat colour is declared first, before the gradient, on purpose. It is
     the fallback for a renderer that cannot paint the gradient, and it is what
     lets automated contrast tooling resolve the real backdrop instead of
     walking past a transparent background to the page colour. */
  background-color: var(--felt);
  background-image: linear-gradient(180deg, #14443b 0%, #0e362e 100%);
  color: var(--on-dark);
}
.section--play {
  background-color: var(--gold);
  background-image: linear-gradient(150deg, var(--gold-bright) 0%, var(--gold) 46%, var(--gold-deep) 100%);
  color: var(--tile);
}

.section__head { max-width: 46rem; margin-bottom: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); }
.section__head h2 { font-size: var(--step-5); text-wrap: balance; }
.section__lede {
  margin-top: 1.125rem;
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--muted-ink);
}
.section--felt .section__lede { color: var(--on-dark-2); }
.section--play .section__lede { color: color-mix(in srgb, var(--tile) 78%, transparent); }
.section__lede b { color: var(--gold-ink); }
.section--felt .section__lede b { color: var(--gold); }

/* ============================================================= status === */
.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.25rem;
}
.status {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}
.status h3 { margin-bottom: 0.625rem; font-size: var(--step-2); letter-spacing: -0.02em; }
.status p:not(.status__state) { color: var(--muted-ink); font-size: var(--step-0); }
.status__state {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-ink);
}
.dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  /* Shape and text both encode state, so this is not colour-only. */
  box-shadow: 0 0 0 3px color-mix(in srgb, currentcolor 20%, transparent);
}
.dot--done { background: var(--green); color: var(--green); }
.dot--building { background: var(--gold); color: var(--gold); }
.dot--planned {
  background: transparent;
  color: var(--muted-ink);
  border: 2px dashed currentcolor;
}

/* =============================================================== steps === */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1px;
  background: color-mix(in srgb, var(--on-dark) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-dark) 12%, transparent);
  border-radius: var(--r);
  overflow: hidden;
}
.step {
  display: flex;
  gap: 1.25rem;
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  background: color-mix(in srgb, var(--night) 26%, transparent);
}
.step__num {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--gold);
  padding-top: 0.35rem;
}
.step h3 { margin-bottom: 0.5rem; font-size: var(--step-2); }
.step p { color: var(--on-dark-2); font-size: var(--step-0); }

/* ============================================================ specials === */
.specials {
  display: grid;
  /* Five canonical special cards, so the wide layout is five across. Letting
     auto-fit choose produced four plus a single orphan on the second row, which
     read as a mistake rather than a rhythm. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
@media (width >= 60rem) {
  .specials { grid-template-columns: repeat(5, 1fr); }
}
.special { display: flex; flex-direction: column; align-items: flex-start; }

.scard {
  position: relative;
  width: 100%;
  max-width: 13rem;
  aspect-ratio: 5 / 7;
  margin-bottom: 1.125rem;
  background: linear-gradient(168deg, #fff 0%, #f0f3ed 100%);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  box-shadow: var(--shadow);
  /* A gentle lift on hover only, and only when motion is welcome. */
  transition: translate 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.special:hover .scard {
  translate: 0 -6px;
  box-shadow: var(--shadow), 0 0 0 3px var(--gold);
}
.scard__c,
.scard__g {
  position: absolute;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}
.scard__c { top: 0.55rem; left: 0.7rem; font-size: 1.5rem; }
.scard__g { top: 0.5rem; left: 1.65rem; font-size: 1.4rem; }
.scard__c--b { top: auto; bottom: 0.55rem; left: auto; right: 0.7rem; rotate: 180deg; }
.scard__g--b { top: auto; bottom: 0.5rem; left: auto; right: 1.65rem; rotate: 180deg; }
.scard--red { border-color: color-mix(in srgb, var(--red) 30%, var(--line)); }
.scard--red .scard__c,
.scard--red .scard__g,
.scard--red .scard__pip { color: var(--red); }

/*
 * Centre pip. Without it a 5:7 card with only corner indices reads as an empty
 * rectangle; the pip is what makes it legibly a playing card at a glance.
 */
.scard__pip {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(3rem, 2rem + 4vw, 4.75rem);
  line-height: 1;
  color: var(--ink);
  /* Sits above the corner indices but below the face gradient's sheen. */
  z-index: 0;
}
.scard__c, .scard__g { z-index: 1; }

.scard--joker {
  background: linear-gradient(165deg, #2f2f2f 0%, #0d0d0d 100%);
  border-color: color-mix(in srgb, var(--gold) 40%, transparent);
}
.scard__pip--joker {
  /* The star is nudged up so the wordmark has room beneath it. */
  align-content: start;
  padding-top: 12%;
  font-size: clamp(2.75rem, 1.75rem + 3.5vw, 4rem);
  color: var(--gold);
}
.scard__jokerword {
  position: absolute;
  inset: auto 0 14% 0;
  z-index: 1;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--gold) 78%, #fff);
}

.special__name {
  margin-bottom: 0.375rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.special h3 { margin-bottom: 0.5rem; font-size: var(--step-2); }
.special p { color: var(--muted-ink); font-size: var(--step-0); }

/* =============================================================== table === */
.table-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
}
.tcard {
  padding: 1.5rem;
  background: color-mix(in srgb, var(--night) 30%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-dark) 12%, transparent);
  border-radius: var(--r);
}
.tcard h3 { margin-bottom: 0.5rem; font-size: var(--step-2); color: var(--gold); }
.tcard p { color: var(--on-dark-2); font-size: var(--step-0); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 1rem + 3vw, 3rem);
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 3.5rem);
  padding-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  border-top: 1px solid color-mix(in srgb, var(--on-dark) 12%, transparent);
}
.split__art {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.split__phones { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.split__phone {
  display: grid;
  place-items: center;
  gap: 0.35rem;
  /* flex-basis, not width, so the row reflows instead of overflowing when the
     user raises their text size. */
  flex: 0 1 4.25rem;
  min-width: 0;
  padding: 0.6rem 0.25rem;
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--on-dark-3);
  background: var(--night);
  border: 1px solid color-mix(in srgb, var(--on-dark) 20%, transparent);
  border-radius: 0.5rem;
}
.split__phone i {
  width: 1.75rem;
  height: 2.4rem;
  background: linear-gradient(170deg, #fff, #e8ece4);
  border-radius: 0.2rem;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08);
}
.split__link {
  flex: 1 1 2rem;
  min-width: 1.5rem;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 6px, transparent 6px 12px);
}
.split__screen {
  flex: 1 1 12rem;
  /* A flex item defaults to min-width:auto, which lets its content push the row
     wider than the viewport. This is the line that makes the diagram reflow
     instead of scrolling sideways at 200% text. */
  min-width: 0;
  padding: 1.125rem 1.25rem;
  background: linear-gradient(160deg, #1a5347, #0f3a32);
  border: 1px solid color-mix(in srgb, var(--lime) 20%, transparent);
  border-radius: 0.75rem;
}
.split__screenlabel {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 0.5rem;
}
.split__screenbody {
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--on-dark);
  line-height: 1.4;
}
.split__screenbody span {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--on-dark-3);
}
.split__screenwarn {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid color-mix(in srgb, var(--on-dark) 15%, transparent);
  font-size: 0.75rem;
  color: var(--on-dark-3);
}
.split figcaption {
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--on-dark-2);
  max-width: 30rem;
}

/* ============================================================ families === */
.families {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(50%, 9rem), 1fr));
  gap: 0.875rem;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.family {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 1.75rem 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}
.family__g { font-size: 2.75rem; line-height: 1; color: var(--red); }
.family[data-id="heart"] .family__g,
.family[data-id="mavi"] .family__g,
.family[data-id="spade"] .family__g { color: var(--ink); }
.family__n {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.langs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding: 1.5rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.langs__label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-ink);
}
.langs__list { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.langs__list li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step-1);
  font-weight: 800;
  color: var(--ink);
}
.langs__code {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  color: var(--paper);
  background: var(--green);
  border-radius: 0.375rem;
}
.langs__note { flex: 1 1 18rem; font-size: var(--step--1); color: var(--muted-ink); }

/* ============================================================= formats === */
.formats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1.25rem;
}
.format {
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  background: color-mix(in srgb, var(--night) 32%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-dark) 14%, transparent);
  border-radius: var(--r-lg);
}
.format h3 { margin-block: 0.75rem 0.625rem; font-size: var(--step-3); }
.format p:not(.format__tag) { color: var(--on-dark-2); font-size: var(--step-0); }
.format__tag {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  background: var(--gold);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tile);
}
.format__tag--quiet {
  background: transparent;
  color: var(--on-dark-3);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-dark) 25%, transparent);
}

/* =============================================================== games === */
.game {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  background: color-mix(in srgb, var(--night) 32%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-dark) 14%, transparent);
  border-radius: var(--r-lg);
}
.gcard {
  position: relative;
  width: 100%;
  max-width: 16rem;
  aspect-ratio: 5 / 7;
  margin: 0 auto 1.125rem;
  background: linear-gradient(168deg, #fff 0%, #f0f3ed 100%);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  box-shadow: var(--shadow);
}
.gcard__badge {
  position: absolute;
  top: -0.625rem;
  left: 50%;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 1.75rem;
  padding: 0.1875rem 0.75rem;
  background: var(--gold);
  color: var(--tile);
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: var(--shadow);
  z-index: 1;
}
.gcard__art {
  display: flex;
  justify-content: center;
  gap: clamp(0.25rem, -0.15rem + 1.1vw, 0.75rem);
  padding: 0.75rem;
  min-height: 11rem;
  align-items: flex-end;
}
.game h3,
.game h4 {
  margin-bottom: 0.375rem;
  font-size: var(--step-3);
  text-align: center;
}
.game__tag {
  display: inline-block;
  margin: 0 auto 0.75rem;
  padding: 0.25rem 0.75rem;
  background: var(--gold);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tile);
  text-align: center;
}
.game > p {
  text-align: center;
  color: var(--on-dark-2);
  font-size: var(--step-0);
  line-height: 1.6;
}
.game__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--on-dark) 14%, transparent);
  font-size: var(--step--1);
  color: var(--on-dark-3);
  text-align: center;
}
.game__meta li { display: flex; align-items: center; gap: 0.5rem; }
.state {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
}
.state--experimental {
  background: color-mix(in srgb, var(--gold) 18%, transparent);
  color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
}
/* A game that can be played now reads differently from one that is still a
   preview, so the badge is not the only thing distinguishing them. */
.state--playable {
  background: color-mix(in srgb, var(--green, #5AA469) 18%, transparent);
  color: var(--green, #5AA469);
  border: 1px solid color-mix(in srgb, var(--green, #5AA469) 40%, transparent);
}
/* A shared-room surface is neither playable nor experimental, and it must not look
   like either. The neutral treatment is the third state, not a missing one. */
.state--planned {
  background: color-mix(in srgb, var(--on-dark) 10%, transparent);
  color: var(--on-dark-2);
  border: 1px solid color-mix(in srgb, var(--on-dark) 30%, transparent);
}

/* ---- the portfolio shape ----
   The section is a family, not a grid of equals: a flagship, the portfolio titles
   underneath it, and the shared-room surface last. The grouping is carried by the
   role heading and by a left rule on the flagship, so the hierarchy survives in
   greyscale and at 200% zoom, not only through size. */
.games {
  display: block;
}
.games__group + .games__group {
  margin-top: clamp(2rem, 1rem + 3vw, 3.5rem);
}
.games__role {
  margin: 0 0 0.25rem;
  font-family: var(--mono);
  font-size: var(--step-0);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.games__role-note {
  max-width: 46ch;
  margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem);
  font-size: var(--step--1);
  color: var(--on-dark-3);
}
.games__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.game--flagship {
  border-left: 4px solid var(--gold);
}
.game--flagship h4 {
  font-size: var(--step-4);
}
/* The story strip is the "one product" statement: the sentences that are true of
   every title above it. A left rule rather than a box, so it reads as a footnote to
   the whole family instead of a fifth card. */
.games__story {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
  margin-top: clamp(2rem, 1rem + 3vw, 3rem);
  padding-top: clamp(1.5rem, 1rem + 2vw, 2rem);
  border-top: 1px solid color-mix(in srgb, var(--on-dark) 16%, transparent);
  font-size: var(--step--1);
  color: var(--on-dark-2);
}
.games__story li {
  padding-left: 1.25rem;
  border-left: 2px solid color-mix(in srgb, var(--gold) 45%, transparent);
}

/* ============================================================== access === */
.access-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.25rem;
}
.access {
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
}
.access h3 { margin-bottom: 0.5rem; font-size: var(--step-1); letter-spacing: -0.02em; }
.access p { color: var(--muted-ink); font-size: var(--step-0); }

/* ============================================================ playtest === */
.playtest {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
}
.playtest h2 { font-size: var(--step-5); letter-spacing: -0.04em; }
.playtest__copy > p {
  margin-top: 1.125rem;
  max-width: 36rem;
  font-size: var(--step-1);
  line-height: 1.6;
  color: color-mix(in srgb, var(--tile) 82%, transparent);
}
.playtest__meta {
  font-family: var(--mono);
  font-size: var(--step--1) !important;
  line-height: 1.7 !important;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--tile) 68%, transparent) !important;
}
.playtest__action { display: flex; flex-direction: column; align-items: flex-start; gap: 0.875rem; }
.playtest__small { font-size: var(--step--1); color: color-mix(in srgb, var(--tile) 70%, transparent); max-width: 24rem; }

/* ================================================================= faq === */
.faq { display: grid; gap: 0.625rem; }
.faq__item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* The summary is a real control, so it needs a real target. */
  min-height: var(--tap);
  padding: 1.125rem 1.375rem;
  font-size: var(--step-1);
  font-weight: 800;
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
  transition: background-color 0.18s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border-right: 2.5px solid var(--gold-ink);
  border-bottom: 2.5px solid var(--gold-ink);
  rotate: 45deg;
  translate: 0 -0.15rem;
  transition: rotate 0.22s var(--ease);
}
.faq__item[open] summary::after { rotate: 225deg; translate: 0 0.15rem; }
.faq__item summary:hover { background: var(--paper-2); }
.faq__item p {
  padding: 0 1.375rem 1.375rem;
  color: var(--muted-ink);
  font-size: var(--step-0);
  max-width: 44rem;
}

/* ============================================================== footer === */
.foot {
  padding-block: clamp(2.5rem, 2rem + 2vw, 4rem);
  background: var(--night);
  border-top: 1px solid color-mix(in srgb, var(--on-dark) 10%, transparent);
  color: var(--on-dark-3);
}
.foot__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2.5rem;
}
.foot__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 800;
  color: var(--on-dark);
}
.foot__brand img { border-radius: 0.4rem; }
.foot__note { flex: 1 1 24rem; max-width: 40rem; font-size: var(--step--1); line-height: 1.65; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.foot__nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--on-dark-2);
  text-decoration: none;
}
.foot__nav a:hover { color: var(--gold); }

/* ========================================================= responsive === */
@media (width <= 62rem) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__table { max-width: 34rem; }
  .playtest, .split { grid-template-columns: 1fr; }
  .factbar { grid-template-columns: repeat(2, 1fr); }
}

/*
 * Between roughly 750px and 1080px the full navigation does not fit: six links
 * plus a call to action overflow the masthead and push the whole page sideways.
 * Rather than switching to a burger that early, which reads as a phone layout on
 * a tablet, the masthead sheds the redundant call to action (the hero carries one
 * immediately below) and tightens its spacing.
 */
@media (width <= 68rem) {
  .nav { gap: 1rem; }
  .nav__list { gap: 0.875rem; }
  .nav__cta { display: none; }
  .brand__word { font-size: var(--step-0); }
}

/*
 * The phone/TV diagram is a row of three hands, a connector and a screen. Below
 * 46rem it stacks, so it reflows rather than scrolling at 320px and at large
 * text sizes.
 */
@media (width <= 46rem) {
  .split__art { flex-direction: column; align-items: stretch; }
  .split__link {
    align-self: flex-start;
    width: 2px;
    height: 1.5rem;
    min-width: 0;
    background: repeating-linear-gradient(180deg, var(--gold) 0 6px, transparent 6px 12px);
  }
  .split__screen { flex: 1 1 auto; }
}

@media (width <= 46rem) {
  html { scroll-padding-top: 4.75rem; }

  .masthead__inner { min-height: 3.875rem; }
  .burger { display: inline-flex; }

  .nav {
    position: absolute;
    inset: 100% 0 auto;
    display: grid;
    justify-items: stretch;
    gap: 0.5rem;
    padding: 1rem var(--gutter) 1.5rem;
    background: var(--night);
    border-bottom: 1px solid color-mix(in srgb, var(--on-dark) 14%, transparent);
    box-shadow: var(--shadow);
    /* A short landscape phone can be shorter than six rows plus a button. The
       panel scrolls rather than running off the bottom of the screen. */
    max-height: calc(100dvh - 4.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Hidden rather than display:none so the toggle state is observable. */
    visibility: hidden;
    opacity: 0;
    translate: 0 -0.5rem;
    transition: opacity 0.2s var(--ease), translate 0.2s var(--ease), visibility 0.2s;
  }
  .nav[data-open="true"] { visibility: visible; opacity: 1; translate: 0; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list a { min-height: var(--tap); border-bottom: 1px solid color-mix(in srgb, var(--on-dark) 8%, transparent); }
  .nav__cta { display: inline-flex; justify-content: center; margin-top: 0.75rem; }

  /*
   * Scrim behind the open panel.
   *
   * The masthead sets z-index, so it forms a stacking context and a child at
   * z-index:-1 still paints above the page while sitting behind the masthead's
   * own content. That is exactly a scrim, with no extra element in the markup.
   * Guarded on :has() so a browser without it simply gets the panel with no
   * dimming, which is still usable.
   */
  @supports selector(:has(*)) {
    .masthead:has(.nav[data-open="true"])::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      background: rgb(4 8 6 / 0.62);
      /* A slight blur as well as a dim, so the panel's bottom edge reads as a
         deliberate boundary rather than a line that happens to cut a line of
         text in half. */
      backdrop-filter: blur(3px);
      animation: scrim-in 0.2s var(--ease);
    }
  }
  @keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }

  .section__head h2 { font-size: var(--step-4); }
  .piles { grid-template-columns: 1fr; }
  .playcard { flex-basis: 4.25rem; }
  .langs { flex-direction: column; align-items: flex-start; }
}

@media (width <= 30rem) {
  .factbar { grid-template-columns: 1fr; }
  .brand__word { font-size: var(--step-0); }
  /* Below this width the word "Menu" costs more horizontal room than the icon
     needs, and the header has to coexist with the wordmark. The button keeps an
     accessible name via aria-label, so nothing is lost. */
  .burger__text {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .burger { padding: 0 0.75rem; }
  .fan { gap: 0.2rem; }
  .playcard { flex-basis: 3.4rem; }
  .playcard__c { font-size: 0.85rem; left: 0.28rem; }
  .playcard__g { font-size: 0.8rem; left: 0.75rem; }
  .playcard__c--b { right: 0.28rem; }
  .playcard__g--b { right: 0.75rem; }
  .playcard--joker .playcard__c { font-size: 2rem; }
}

/* Coarse pointers get larger targets, since a finger is not a cursor. */
@media (pointer: coarse) {
  .nav__list a, .foot__nav a { padding-block: 0.25rem; }
}

/* ======================================================= user settings === */
/* Honours the OS "reduce motion" setting. Nothing on this page autoplays, but
   the card lift and the panel slide are the only motion present, so this is
   sufficient to make the page effectively still. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .special:hover .scard { translate: none; }
  .btn:hover .btn__arrow { translate: none; }
}

@media (prefers-contrast: more) {
  :root {
    --on-dark-2: #e8f0e2;
    --on-dark-3: #cfdcd2;
    --on-dark-4: #b3c4ba;
    --line: #b9c2b7;
  }
  .card, .scard, .playcard { border-width: 2px; }
}

@media (forced-colors: active) {
  .btn, .chip, .tcard, .status, .access, .faq__item, .special, .family {
    border: 1px solid CanvasText;
  }
  .dot { forced-color-adjust: none; }
  .playcard, .scard { forced-color-adjust: none; }
}

@media print {
  .masthead, .nav, .burger, .hero__table, .split__art, .btn, .skip { display: none !important; }
  body { background: #fff; color: #000; }
  .section, .hero { background: #fff !important; color: #000 !important; }
  .section__lede, .step p, .tcard p, .lede, .foot__note { color: #333 !important; }
}

/* Feedback instrument: reuses the button and type tokens above. */
.feedback__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1rem 0 1.5rem;
}
.feedback__counts {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.feedback__note {
  font-size: var(--step--1);
  color: var(--muted-ink);
}