/* ==========================================================================
   9 Card Golf — txlabs.iksydk.com
   Arcade theme. Every colour below is lifted from the app's own design system:
   ui/.../board/BoardSkin.kt, ui/.../theme/GolfColors.kt, docs/DESIGN-SYSTEM.md
   ========================================================================== */

:root {
  /* surfaces */
  --canvas: #F4F1EA;
  --panel: #FBF7EE;
  --card: #FFFFFF;
  --card-lip: #E3DCCA;
  --dark: #26241F;
  --dark-lip: #131210;
  --footer: #0E1B16;
  --felt-lip: #0A3F24;

  /* seat 0 — green */
  --green: #1FBF74;
  --green-lip: #16794A;
  --green-ink: #06281B;
  --green-tint: #DCEEE4;
  --green-tint-ink: #0E5A3A;
  --green-tint-lip: #B6D8C6;

  /* seat 1 — blue */
  --blue: #4DA8FF;
  --blue-lip: #2E6FB0;
  --blue-ink: #06283F;
  --blue-tint: #DDEBFB;
  --blue-tint-ink: #1E5488;
  --blue-tint-lip: #BED5EC;

  /* seat 2 — purple (#8A4CE8 is the one accent dark enough for white ink) */
  --purple: #8A4CE8;
  --purple-lip: #5C3499;
  --purple-tint: #EDDFFF;

  /* seat 3 — coral */
  --coral: #FF6B5C;
  --coral-lip: #C2452F;
  --coral-ink: #4A1108;
  --coral-tint: #FFE1DC;
  --coral-tint-ink: #8A2F1F;
  --coral-tint-lip: #EFC3BB;

  /* gold — rank */
  --gold: #FFB23E;
  --gold-lip: #D18E22;
  --gold-ink: #4A3005;

  /* ink. #8A928B and #7D776C are deliberately absent: both fail AA here. */
  --ink: #26241F;
  --ink-body: #4A5750;
  --ink-muted: #5D6660;
  --on-felt: #E4F6EC;
  --on-felt-dim: #CFEEDD;
  --on-felt-faint: #CDEBDB;
  --on-felt-hi: #8FFFD1;
  --on-dark: #B8B2A5;
  --on-dark-warm: #C9C3B6;

  --display: "Fredoka", "Trebuchet MS", sans-serif;
  --body: "Nunito", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* --- ARCADE type: Fredoka (display) + Nunito (body), both self-hosted as
   variable woff2 under assets/fonts/. Both are OFL; licence text is at
   assets/fonts/OFL.txt. Note Fredoka tops out at 700 — display rules asking
   for 800 resolve to 700, which is intended. --- */

@font-face {
    font-family: "Fredoka";
    src: url("fonts/fredoka.woff2") format("woff2");
    font-weight: 300 700;
    font-display: swap;
}

@font-face {
    font-family: "Nunito";
    src: url("fonts/nunito.woff2") format("woff2");
    font-weight: 200 1000;
    font-display: swap;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--green-tint-ink); text-decoration: none; }
a:hover { color: var(--purple-lip); text-decoration: underline; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -0.025em; margin: 0; text-wrap: pretty; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

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

/* ---------- chunky buttons: a solid lip, never a blurred shadow ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 15px 28px;
  border: 0; border-radius: 16px;
  font-family: var(--display); font-weight: 700; font-size: 17px;
  cursor: pointer;
  transition: transform 90ms ease, box-shadow 90ms ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(4px); }
.btn--store { background: var(--purple); color: #fff; box-shadow: 0 6px 0 var(--purple-lip); }
.btn--store:active { box-shadow: 0 2px 0 var(--purple-lip); }
.btn--appstore { background: var(--blue); color: var(--blue-ink); box-shadow: 0 6px 0 var(--blue-lip); }
.btn--appstore:active { box-shadow: 0 2px 0 var(--blue-lip); }
/* Both stores now use official badge artwork (the .badge-link images in
   index.html's hero), not .btn--store — that class powers the 404 page's
   generic buttons and the Get started band. .store-badge carries the Apple
   badge, whose SVG has no intrinsic size the way the Play PNG does.

   54px is not cosmetic, and it is not comparable to the Play badge's 70px
   either. Google's PNG is 646×250 but its ink is only 564×168 — it ships with
   16.4% transparent padding — so at height:70px it shows just 157.9×47 of
   actual badge. Apple's SVG has no such padding, so it renders ink-to-edge.
   Apple's guidelines require their badge be at least as large as any other
   store's, which means comparing ink, not box: at 54px Apple's 119.664×40
   artwork is 161.5×54, clearing 157.9×47 on both axes. 52px looks right and
   is not — it comes out 155.6 wide, 2px narrower than the Play badge. If the
   Play artwork is ever replaced, re-measure its alpha bounding box first. */
.store-badge { height: 54px; width: auto; }

.pill {
  display: inline-flex; align-items: center;
  border-radius: 999px;
  font-family: var(--body); font-weight: 800; font-size: 11px;
  letter-spacing: 0.12em; padding: 7px 13px;
}
.pill--gold { background: var(--gold); color: var(--gold-ink); box-shadow: 0 3px 0 var(--gold-lip); }
.pill--coral { background: var(--coral); color: var(--coral-ink); box-shadow: 0 3px 0 var(--coral-lip); transform: rotate(-2deg); }
.pill--green { background: var(--green-tint); color: var(--green-tint-ink); }
.pill--blue { background: var(--blue-tint); color: var(--blue-tint-ink); }

.eyebrow {
  display: inline-block; font-weight: 800; font-size: 11px;
  letter-spacing: 0.14em; padding: 7px 13px; border-radius: 999px;
}

/* ---------- header ---------- */
.site-header { background: var(--panel); position: sticky; top: 0; z-index: 20; }

/* The masthead is sticky, so jumping to an anchor parks that section's first
   line behind it. Applies to all four targets — the nav's three section links
   and the Get started band the masthead pill points at. Measured header
   height is 86px here and 146px once the nav wraps at the mobile breakpoint,
   so the value has to change with it; a single figure strands one or the
   other. Re-measure if the masthead's padding or nav ever change. */
section[id] { scroll-margin-top: 96px; }
.site-header__inner {
  max-width: 1120px; margin: 0 auto; padding: 18px 36px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand img { width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 2px 6px rgba(16, 80, 47, 0.22); }
.brand span { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }

.site-nav { display: flex; align-items: center; gap: 8px; }
.site-nav a {
  color: var(--ink-body); font-weight: 600; font-size: 14px;
  padding: 13px 15px; border-radius: 999px; min-height: 44px;
  display: inline-flex; align-items: center;
}
.site-nav a:hover { background: #F1EDE2; text-decoration: none; }
.site-nav a[aria-current="page"] { background: var(--purple-tint); color: var(--purple-lip); font-weight: 700; }
.nav-cta {
  background: var(--purple); color: #fff; font-family: var(--display); font-weight: 700;
  font-size: 14px; padding: 14px 20px; border-radius: 999px; min-height: 44px;
  display: inline-flex; align-items: center; box-shadow: 0 4px 0 var(--purple-lip);
  flex: none;
}
.nav-cta:hover { background: var(--purple); text-decoration: none; }

/* ---------- hero ---------- */
.hero { padding: 14px 20px 20px; }
.felt {
  border-radius: 30px; padding: 52px 44px; color: #fff;
  /* Do not lighten these stops: at #26A469 no body-weight text reaches AA. */
  background: radial-gradient(130% 120% at 20% 0%, #187244 0%, #14663C 48%, #0E5230 100%);
  box-shadow: 0 10px 0 var(--felt-lip), 0 24px 44px rgba(10, 63, 36, 0.34);
  max-width: 1120px; margin: 0 auto;
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 36px; align-items: center; }
.hero__copy, .hero__shots { min-width: 0; }
.hero__copy { display: flex; flex-direction: column; gap: 20px; }
.hero__badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hero h1 { font-weight: 600; font-size: 58px; line-height: 0.99; letter-spacing: -0.03em; }
.hero h1 em { font-style: normal; color: var(--on-felt-hi); }
.hero__lead { font-size: 18px; line-height: 1.5; color: var(--on-felt); max-width: 44ch; }
/* error.html only: .hero__lead's max-width leaves it left-aligned inside a
   centered section, since a block box isn't centered by text-align alone. */
.hero__lead--center { margin-left: auto; margin-right: auto; }
/* error.html only: plain .wrap has no vertical padding, unlike .hero on the
   other pages, so the felt panel would sit flush against the header and
   footer. Longhand and scoped to the element so it does not touch .wrap's
   own (horizontal-only) padding declarations. */
main.error-main { padding-top: 14px; padding-bottom: 20px; }
.hero__ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.hero__proof { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--on-felt-dim); flex-wrap: wrap; }
/* Separator is a ::before on the FOLLOWING item, so a wrap moves it to the
   start of the next line rather than leaving it dangling at the end of the
   previous one. This does not prevent an orphan — measured, the separator
   still starts a line alone at 320, 360, 721, 760 and 800px. */
.hero__proof > span + span::before { content: "·"; opacity: 0.5; margin-right: 10px; }
.hero__shots { display: flex; gap: 14px; align-items: center; justify-content: flex-end; }
/* Fan of two frames, each exactly phone() size. Only at >=1081px is there room. */
@media (min-width: 1081px) {
  .hero__shots { position: relative; width: 520px; height: 820px; flex: none; margin-left: auto; }
  .shot--back { position: absolute; left: 0; top: 0; transform: rotate(-6deg); z-index: 1; }
  .shot--main { position: absolute; left: 160px; top: 0; z-index: 2; }
}
/* 721-1080px: one frame. Two would floor the track at 520px and squeeze the copy. */
@media (min-width: 721px) and (max-width: 1080.98px) { .hero__shots { min-width: 300px; } }
@media (max-width: 1080.98px) { .shot--back { display: none; } }
.device, .shot {
  box-sizing: content-box; background: #E4E1D9; padding: 5px;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.4), inset 0 0 0 2px #D3D0C7;
}
.device img, .shot img {
  display: block; width: 100%; height: 100%; border-radius: 10px;
  object-fit: cover; object-position: top;
}
.device--sm { width: 210px; margin: 18px auto 0; }
/* Section thumbnails: show the top of a LARGER phone and fade it into the panel,
   so the difficulty rows / hand-off beat / mode list are actually readable. */
.mode .device--sm {
  width: calc(100% - 10px); aspect-ratio: 100 / 175; height: auto; overflow: hidden;
  border-radius: 20px 20px 0 0;
  box-shadow: inset 0 0 0 2px #D3D0C7;
  -webkit-mask-image: linear-gradient(to bottom,
    #000 82%, rgba(0,0,0,.94) 85%, rgba(0,0,0,.80) 88%,
    rgba(0,0,0,.56) 91.5%, rgba(0,0,0,.28) 95%, rgba(0,0,0,.08) 98%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    #000 82%, rgba(0,0,0,.94) 85%, rgba(0,0,0,.80) 88%,
    rgba(0,0,0,.56) 91.5%, rgba(0,0,0,.28) 95%, rgba(0,0,0,.08) 98%, transparent 100%);
}
.mode .device--sm img { width: 100%; height: auto; object-fit: fill; border-radius: 13px 13px 0 0; }

.shot--main, .shot--back { flex: none; aspect-ratio: 340 / 800; width: 340px; padding: 10px; border-radius: 32px; }
.shot--main img, .shot--back img { border-radius: 18px; }
.shot--main { transform: rotate(2deg); }

/* ---------- generic section furniture ---------- */
.section { padding: 52px 0 56px; }
.section--panel { background: var(--panel); }
.section h2 { font-weight: 600; font-size: 38px; }
.section__lead { margin-top: 10px; font-size: 16px; color: var(--ink-muted); max-width: 62ch; }
.section__note { margin-top: 18px; font-size: 13px; color: var(--ink-muted); }

.grid { display: grid; gap: 16px; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--card); border-radius: 22px; padding: 24px;
  box-shadow: 0 6px 0 var(--card-lip);
}
.card h3 { font-weight: 600; font-size: 19px; margin-bottom: 4px; }
.card p { font-size: 14.5px; line-height: 1.55; color: var(--ink-muted); }

/* number / glyph badges — saturated fill always takes DARK ink, never white */

.badge {
  width: 38px; height: 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 600; font-size: 17px;
  flex: 0 0 auto;
}
.badge--lg { width: 46px; height: 46px; border-radius: 15px; font-size: 16px; }
.badge--green { background: var(--green); color: var(--green-ink); box-shadow: 0 4px 0 var(--green-lip); }
.badge--blue { background: var(--blue); color: var(--blue-ink); box-shadow: 0 4px 0 var(--blue-lip); }
.badge--purple { background: var(--purple); color: #fff; box-shadow: 0 4px 0 var(--purple-lip); }
.badge--coral { background: var(--coral); color: var(--coral-ink); box-shadow: 0 4px 0 var(--coral-lip); }
.badge--gold { background: var(--gold); color: var(--gold-ink); box-shadow: 0 4px 0 var(--gold-lip); }
.badge--lg.badge--green { box-shadow: 0 5px 0 var(--green-lip); }
.badge--lg.badge--blue { box-shadow: 0 5px 0 var(--blue-lip); }
.badge--lg.badge--coral { box-shadow: 0 5px 0 var(--coral-lip); }

.step { display: flex; flex-direction: column; gap: 12px; }

/* ---------- card values ---------- */
.values { background: var(--panel); border-radius: 24px; padding: 30px 32px; margin-top: 26px; }
.values__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.values__head h3 { font-weight: 600; font-size: 24px; letter-spacing: -0.02em; }
.values__head p { font-size: 13.5px; color: var(--ink-muted); }
.values__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.value {
  background: var(--card); border-radius: 16px; padding: 18px 16px;
  box-shadow: 0 4px 0 var(--card-lip);
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.value dt { font-weight: 800; font-size: 10px; letter-spacing: 0.12em; color: var(--ink-muted); }
.value dd { margin: 0; font-family: var(--display); font-weight: 600; font-size: 32px; letter-spacing: -0.03em; }
.value dd.is-text { font-size: 20px; letter-spacing: -0.02em; padding-top: 9px; }
.value--jack { background: var(--purple); box-shadow: 0 4px 0 var(--purple-lip); color: #fff; }
.value--jack dt { color: #fff; }
.value--king { background: var(--green); box-shadow: 0 4px 0 var(--green-lip); color: var(--green-ink); }
.value--king dt { color: var(--green-ink); }
.values__note { margin-top: 18px; font-size: 13px; line-height: 1.6; color: var(--ink-muted); }

/* ---------- boards ---------- */
.board { border-radius: 26px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.board__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.board__name { font-family: var(--display); font-weight: 600; font-size: 28px; letter-spacing: -0.03em; white-space: nowrap; }
.board__target { font-family: var(--body); font-weight: 800; font-size: 10px; letter-spacing: 0.1em; padding: 7px 12px; border-radius: 999px; white-space: nowrap; }
.board__desc { font-size: 15px; line-height: 1.55; }
.board__rule { margin-top: auto; background: var(--card); border-radius: 14px; padding: 15px; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.board__rule strong { font-family: var(--display); }
.mini { display: grid; gap: 7px; }
.mini i { display: block; border-radius: 9px; height: 48px; }
.mini--4 { grid-template-columns: repeat(2, 36px); }
.mini--6 { grid-template-columns: repeat(3, 36px); }
.mini--9 { grid-template-columns: repeat(3, 36px); }
.mini--9 i { height: 29px; border-radius: 8px; }

.board--4 { background: var(--coral-tint); box-shadow: 0 6px 0 var(--coral-tint-lip); }
.board--4 .board__name, .board--4 .board__desc { color: var(--coral-tint-ink); }
.board--4 .board__desc { color: #7A3223; }
.board--4 .board__target { background: var(--coral); color: var(--coral-ink); box-shadow: 0 3px 0 var(--coral-lip); }
.board--4 .mini i { background: var(--coral); box-shadow: 0 3px 0 var(--coral-lip); }

.board--6 { background: var(--blue-tint); box-shadow: 0 6px 0 var(--blue-tint-lip); }
.board--6 .board__name { color: var(--blue-tint-ink); }
.board--6 .board__desc { color: #245079; }
.board--6 .board__target { background: var(--blue); color: var(--blue-ink); box-shadow: 0 3px 0 var(--blue-lip); }
.board--6 .mini i { background: var(--blue); box-shadow: 0 3px 0 var(--blue-lip); }

.board--9 { background: var(--green-tint); box-shadow: 0 6px 0 var(--green-tint-lip); }
.board--9 .board__name { color: var(--green-tint-ink); }
.board--9 .board__desc { color: #155C3C; }
.board--9 .board__target { background: var(--green); color: var(--green-ink); box-shadow: 0 3px 0 var(--green-lip); }
.board--9 .mini i { background: var(--green); box-shadow: 0 3px 0 var(--green-lip); }

/* ---------- ways to play ---------- */
.mode { display: flex; flex-direction: column; gap: 12px; }
.mode h3 { font-weight: 600; font-size: 21px; letter-spacing: -0.015em; }
.mode p { font-size: 15px; line-height: 1.6; color: var(--ink-muted); }
.mode .device--sm { margin-top: auto; }
.mode { padding-bottom: 0; }

/* ---------- why ---------- */
.why { display: flex; gap: 16px; align-items: flex-start; background: var(--card); border-radius: 20px; padding: 24px; box-shadow: 0 5px 0 var(--card-lip); }
.why i { width: 10px; height: 44px; border-radius: 99px; flex: 0 0 10px; }
.why h3 { font-weight: 600; font-size: 19px; margin-bottom: 5px; }
.why p { font-size: 15px; line-height: 1.6; color: var(--ink-muted); }

/* ---------- dark band ---------- */
.band {
  background: var(--dark); color: #fff; border-radius: 26px; padding: 38px 36px;
  box-shadow: 0 8px 0 var(--dark-lip);
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center;
  max-width: 1040px; margin: 0 auto 52px;
}
.band__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.band h2 { font-weight: 600; font-size: 32px; margin: 10px 0 0; }
.band p { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--on-dark); max-width: 56ch; }

/* ---------- faq ---------- */
.faq { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.faq > div { background: var(--card); border-radius: 18px; padding: 22px; }
.faq h3 { font-weight: 600; font-size: 17px; margin-bottom: 6px; }
.faq p { font-size: 15px; line-height: 1.6; color: var(--ink-muted); }

/* ---------- footer ---------- */
.site-footer { background: var(--footer); color: #9FB3A8; font-size: 14px; }
.site-footer__inner {
  max-width: 1120px; margin: 0 auto; padding: 34px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.site-footer img { width: 38px; height: 38px; border-radius: 10px; }
.site-footer__brand { display: flex; align-items: center; gap: 14px; }
.site-footer__brand strong { font-family: var(--display); font-weight: 700; font-size: 16px; color: #EAFFF5; display: block; margin-bottom: 4px; }
.site-footer a { color: #9FB3A8; }
.site-footer a.email { color: var(--on-felt-hi); }
.site-footer nav { display: flex; gap: 24px; flex-wrap: wrap; }

/* ==========================================================================
   Support / what's-new
   ========================================================================== */
.page-head { padding: 52px 0 44px; }
.page-head h1 { font-weight: 600; font-size: 46px; line-height: 1.02; letter-spacing: -0.03em; margin: 16px 0 0; }
.page-head p { margin-top: 16px; font-size: 17px; line-height: 1.6; color: var(--ink-body); max-width: 52ch; }
.page-head--split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 36px; align-items: start; }

.contact { background: var(--dark); border-radius: 24px; padding: 28px; color: #fff; box-shadow: 0 8px 0 var(--dark-lip); }
.contact__label { font-weight: 800; font-size: 11px; letter-spacing: 0.14em; color: var(--on-dark); }
.contact__email { display: block; margin: 14px 0; font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; color: var(--on-felt-hi); }
.contact p { font-size: 14.5px; line-height: 1.6; color: var(--on-dark-warm); }
.contact hr { border: 0; border-top: 1px solid #3D3A33; margin: 18px 0; }
.contact strong { color: #fff; }

.answers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.answers > div { background: var(--card); border-radius: 20px; padding: 24px; box-shadow: 0 5px 0 var(--card-lip); display: flex; flex-direction: column; gap: 9px; }
.answers .badge { width: 34px; height: 34px; border-radius: 11px; font-size: 15px; }
.answers h3 { font-weight: 600; font-size: 18px; }
.answers p { font-size: 15px; line-height: 1.6; color: var(--ink-muted); }

.rows { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: start; }
.rows h2 { font-weight: 600; font-size: 30px; }
.rows > div > p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--ink-muted); }
.rowlist > div { padding: 18px 0; border-top: 1px solid #E7E1D2; }
.rowlist > div:last-child { border-bottom: 1px solid #E7E1D2; }
.rowlist h3 { font-weight: 600; font-size: 17px; margin-bottom: 5px; }
.rowlist p { font-size: 15px; line-height: 1.6; color: var(--ink-muted); }

/* release notes */
.release { background: var(--card); border-radius: 24px; padding: 30px 32px; box-shadow: 0 6px 0 var(--card-lip); }
.release + .release { margin-top: 18px; }
.release__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.release__version { font-family: var(--display); font-weight: 600; font-size: 28px; letter-spacing: -0.03em; }
.release__date { color: var(--ink-muted); font-size: 14px; }
.release h2 { font-weight: 600; font-size: 21px; letter-spacing: -0.02em; margin-bottom: 16px; }
/* An entry with more than one themed group: h2 and ul are both margin:0 in the reset,
   so a second heading would otherwise sit flush against the last bullet. */
.release ul + h2 { margin-top: 24px; }
.release li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; font-size: 15.5px; line-height: 1.6; color: var(--ink-body); }
.release li + li { margin-top: 12px; }
.release li::before { content: "—"; font-weight: 800; }
.release--green li::before { color: var(--green); }
.release--blue li::before { color: var(--blue); }
.release--purple li::before { color: var(--purple); }

/* ==========================================================================
   Responsive — one column < 720, two 720–1080, full desktop >= 1080
   ========================================================================== */
@media (max-width: 1080.98px) {
  .wrap { padding: 0 28px; }
  .felt { padding: 40px 32px; }
  .hero h1 { font-size: 46px; }
  .section h2 { font-size: 32px; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  /* Drop the fan to a single shrinkable frame: two fixed frames floor the
     track at 540px and squeeze the copy to ~244px at the low end of the band. */
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 28px; }
  .values__grid { grid-template-columns: repeat(3, 1fr); }
  .rows, .page-head--split { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 720.98px) {
  .wrap { padding: 0 20px; }

  /* nav: five chips that scroll, not a hamburger. They no longer fit even at
     390px, so the order in the HTML decides what survives the clip — What's new
     sits before Support deliberately. */
  .site-header__inner { padding: 12px 16px; flex-wrap: wrap; }
  section[id] { scroll-margin-top: 156px; }
  .brand img { width: 36px; height: 36px; border-radius: 10px; }
  .brand span { font-size: 16px; }
  .site-nav { order: 3; width: 100%; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { flex: 0 0 auto; background: #F1EDE2; font-size: 13.5px; }

  .hero { padding: 12px; }
  .felt { border-radius: 24px; padding: 28px 22px; box-shadow: 0 8px 0 var(--felt-lip); }
  .hero__grid { grid-template-columns: 1fr; gap: 16px; }
  .hero h1 { font-size: 36px; line-height: 1; }
  .hero__lead { font-size: 15.5px; line-height: 1.55; max-width: none; }
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { width: 100%; }
  .hero__proof { justify-content: center; font-size: 13px; }
  /* one screenshot on mobile, not a fan of two */
  .hero__shots { justify-content: center; }
  .shot--main { width: calc(100% - 20px); max-width: 340px; transform: none; }

  .section { padding: 32px 0; }
  .section h2 { font-size: 28px; }
  .grid, .grid--2, .grid--3, .grid--4, .faq, .answers { grid-template-columns: 1fr; gap: 12px; }

  /* steps: numeral beside text, so four steps aren't four screens */
  .step { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; border-radius: 18px; padding: 18px; }
  .step .badge { width: 34px; height: 34px; border-radius: 11px; font-size: 15px; }
  /* Grid auto-placement would wrap the p under the badge's 34px column; pin
     both text children to column 2 so the badge is the only col-1 occupant. */
  .step h3, .step p { grid-column: 2; }
  .step h3 { font-size: 17px; }

  .values { padding: 22px 18px; border-radius: 20px; }
  .values__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .value { padding: 14px; border-radius: 14px; }
  .value dd { font-size: 26px; }
  .value dd.is-text { font-size: 18px; padding-top: 6px; }
  /* King spans both columns — "completely free" is the one worth landing */
  .value--king { grid-column: 1 / -1; flex-direction: row; align-items: baseline; justify-content: space-between; }

  /* boards: mini grid beside the title to keep the rule above the fold */
  .board { border-radius: 20px; padding: 20px; }
  .board__head { flex-direction: row-reverse; justify-content: flex-end; gap: 14px; }
  .board__head .board__target { margin-left: auto; }
  .mini--4 { grid-template-columns: repeat(2, 22px); }
  .mini--6, .mini--9 { grid-template-columns: repeat(3, 22px); }
  .mini i { height: 30px; border-radius: 6px; }
  .mini--9 i { height: 20px; border-radius: 5px; }
  .board__name { font-size: 22px; }
  .board__desc { font-size: 14.5px; }
  .board__rule { font-size: 13px; padding: 13px; }

  .band { grid-template-columns: 1fr; padding: 26px 22px; border-radius: 22px; margin: 0 20px 32px; }
  .band h2 { font-size: 24px; }
  .band p { font-size: 14.5px; }
  .band__ctas { flex-direction: column; }
  .band .btn { width: 100%; }

  .page-head { padding: 28px 0 20px; }
  .page-head h1 { font-size: 34px; }
  .page-head p { font-size: 15.5px; }

  .release { padding: 22px 20px; border-radius: 20px; }
  .release__version { font-size: 24px; }

  .site-footer__inner { flex-direction: column; align-items: flex-start; padding: 26px 20px; }
  .site-footer nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}