/* ==========================================================================
   Halfcourt — halfcourt.app
   One stylesheet for the whole site. No framework, no build step.

   Source of truth: design/site/README.md (tokens, type scale, geometry).
   The .dc.html reference boards style everything inline because of how the
   design tool works — that is deliberately NOT carried over here.

   Order:
     1. Reset + tokens
     2. Type scale
     3. Layout primitives
     4. Components (buttons, badges, fields, cards, chips, FAQ, placeholders)
     5. Chrome (header, footer)
     6. Landing page
     7. Document pages (privacy, support, delete)
     8. 404
     9. Responsive
   ========================================================================== */

/* 1. Reset + tokens ======================================================= */

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

/* `hidden` must actually hide. The attribute's UA default is `display: none`, which loses to any
   class rule setting a display — so `<div class="btn-row" hidden>` still laid out as a flex row
   (found on /invite in 7.20, where an "Open in Halfcourt" button with no game id to open showed
   anyway). Any component whose class sets `display` needs this to stay hideable. */
[hidden] {
  display: none !important;
}

:root {
  /* Brand */
  --grad: linear-gradient(180deg, #f7b733, #fc4a1a);
  --grad-btn: linear-gradient(165deg, #f7b733, #fc4a1a);
  --grad-btn-hover: linear-gradient(165deg, #f0a81f, #e23f10);
  --accent: #ff8300;
  --accent-dark: #ff9a3d;

  /* Surfaces */
  --dark: #0a0a0c;
  --dark-alt: #080809;
  --dark-panel: #141416;
  --light: #fbfaf8;
  --card: #ffffff;
  --beta-tint: #fff4e6;

  /* Text */
  --ink: #1a1916;
  --body: #46423b;
  --muted: #8a857c;
  --ink-d: #f3f1ec;
  --body-d: #d8d4cc;
  --muted-d: #9a958c;

  /* Meaning */
  --link: #c2410c;
  --link-hover: #fc4a1a;
  --success: #1fc974;
  --error: #ed1e1e;
  --live: #ff8300;

  /* Lines */
  --hair: #ece9e2;
  --hair-d: rgba(255, 255, 255, 0.08);

  /* Mockups */
  --frame: #26262a;
  --fill-1: #3a3a40;
  --fill-2: #4a4a52;
  --fill-3: #61616c;

  /* Placeholder hatches */
  --hatch: repeating-linear-gradient(135deg, #efece5, #efece5 12px, #e7e3da 12px, #e7e3da 24px);
  --hatch-d: repeating-linear-gradient(135deg, #1c1c20, #1c1c20 12px, #232328 12px, #232328 24px);

  /* Geometry */
  --gutter: 72px;
  --rhythm: 116px;
  --r-lg: 26px;
  --r-md: 22px;
  --r-sm: 20px;
  --r-btn: 15px;
  --r-xs: 14px;
  --r-pill: 999px;

  /* Type */
  --sans: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.7;
  color: var(--body);
  background: var(--light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--link-hover);
}

/* Focus: 3px outline, 3px offset. Never removed. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.on-dark a:focus-visible,
.on-dark button:focus-visible,
.on-dark summary:focus-visible,
.on-dark input:focus-visible {
  outline-color: var(--accent-dark);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 14px 20px;
  border-radius: 0 0 var(--r-btn) 0;
  font-weight: 800;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
  color: #fff;
}

/* 2. Type scale =========================================================== */

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 900;
  color: var(--ink);
}

.on-dark h1,
.on-dark h2,
.on-dark h3,
.on-dark h4 {
  color: var(--ink-d);
}

.t-hero {
  font-size: 82px;
  line-height: 1;
  letter-spacing: -2.4px;
}

.t-page {
  font-size: 56px;
  line-height: 1.04;
  letter-spacing: -1.8px;
}

.t-section {
  font-size: 46px;
  line-height: 1.06;
  letter-spacing: -1.4px;
}

.t-sub {
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.8px;
}

.t-card {
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.6px;
}

.t-lead {
  font-size: 21px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--body);
}

.on-dark .t-lead {
  color: var(--body-d);
}

.t-lead-in {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.4;
}

.t-body {
  font-size: 18px;
  line-height: 1.7;
}

.t-small {
  font-size: 17px;
  line-height: 1.6;
}

.t-caption {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.on-dark .t-caption {
  color: var(--muted-d);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 18px;
}

.eyebrow--accent {
  color: var(--accent-dark);
}

.micro {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.measure {
  max-width: 70ch;
}

/* 3. Layout primitives ==================================================== */

.wrap {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--rhythm);
}

.section--light {
  background: var(--light);
}

.section--dark {
  background: var(--dark);
}

.on-dark {
  color: var(--body-d);
}

:where(.on-dark) a {
  color: var(--accent-dark);
}

:where(.on-dark) a:hover {
  color: #ffb469;
}

.section-head {
  max-width: 760px;
  margin-bottom: 64px;
}

:where(.section-head) p {
  margin: 20px 0 0;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.split {
  display: grid;
  grid-template-columns: 620px 1fr;
  gap: 72px;
  align-items: start;
}

.stack-12 > * + * {
  margin-top: 12px;
}

.stack-16 > * + * {
  margin-top: 16px;
}

/* 4. Components =========================================================== */

/* --- Brand lockup --- */

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  color: inherit;
}

.lockup__mark {
  display: block;
  width: 38px;
  height: 38px;
  flex: none;
}

.lockup__word {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.4px;
  color: var(--ink);
}

.on-dark .lockup__word {
  color: var(--ink-d);
}

/* --- Buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--r-btn);
  font-family: inherit;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.btn--primary {
  background: var(--grad-btn);
  color: #fff;
}

.btn--primary:hover {
  background: var(--grad-btn-hover);
  color: #fff;
}

.btn--secondary {
  background: var(--card);
  border: 1px solid var(--hair);
  color: var(--ink);
  font-weight: 700;
}

.btn--secondary:hover {
  border-color: #d9d5cc;
  color: var(--ink);
}

.on-dark .btn--secondary {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--ink-d);
}

.on-dark .btn--secondary:hover {
  background: rgba(255, 255, 255, 0.09);
  color: var(--ink-d);
}

.btn--dark {
  background: var(--ink);
  color: #fff;
}

.btn--dark:hover {
  background: #322f2a;
  color: #fff;
}

.btn[aria-disabled="true"],
.btn:disabled {
  background: #e8e5df;
  color: #a9a49a;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* --- Store badges --- */
/* Official artwork, downloaded from Apple and Google and served locally.
   Apple's SVG has no padding, so 60px tall is 60px of badge. Google's PNG bakes
   in its required clear space (41 of 250px, all four sides), so 89px total is a
   60px badge — which is why the two heights differ. Do not crop or recolour
   either file; both vendors treat that as a guideline violation. */

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.badge {
  display: inline-flex;
  border-radius: 10px;
}

.badge img {
  display: block;
  height: 60px;
  width: auto;
}

.badge--google img {
  height: 89px;
}

/* --- Form field --- */

.field {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 18px;
  border: 1px solid var(--hair);
  border-radius: var(--r-btn);
  background: #fff;
  font-family: inherit;
  font-size: 17px;
  color: var(--ink);
}

.field::placeholder {
  color: var(--muted);
}

.field:focus {
  border-color: var(--ink);
}

/* --- Cards --- */

.card {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  padding: 28px;
}

.on-dark .card {
  background: var(--dark-panel);
  border-color: var(--hair-d);
}

.card--lg {
  border-radius: var(--r-lg);
}

.card--sm {
  border-radius: var(--r-xs);
  padding: 20px;
}

/* --- Chips --- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hair);
  background: var(--light);
  font-size: 14px;
  font-weight: 700;
  color: var(--body);
}

.on-dark .chip {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--hair-d);
  color: var(--body-d);
}

/* --- Avatar stack --- */

.avatars {
  display: flex;
  align-items: center;
}

.avatars span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--fill-2);
  border: 2px solid #fff;
  margin-left: -9px;
}

.avatars span:first-child {
  margin-left: 0;
}

.avatars span:nth-child(2) {
  background: var(--fill-3);
}

.avatars span:nth-child(3) {
  background: var(--fill-1);
}

.avatars span:nth-child(4) {
  background: var(--fill-3);
}

.on-dark .avatars span {
  border-color: var(--dark-panel);
}

.avatar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar-row__count {
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
}

.on-dark .avatar-row__count {
  color: var(--muted-d);
}

/* --- FAQ (native <details>) --- */

.faq {
  max-width: 1000px;
}

.faq__item {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--r-sm);
  padding: 24px 26px;
}

.faq__item + .faq__item {
  margin-top: 14px;
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1.35;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

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

.faq__sign {
  flex: none;
  width: 22px;
  text-align: center;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  color: var(--muted);
}

.faq__sign::after {
  content: "+";
}

.faq__item[open] .faq__sign::after {
  content: "\2212"; /* minus */
}

.faq__answer {
  max-width: 66ch;
  margin: 14px 0 0;
  font-size: 17px;
  line-height: 1.7;
}

/* --- Placeholder imagery --- */

.placeholder {
  display: flex;
  align-items: flex-start;
  background: var(--hatch);
  border-radius: var(--r-xs);
  padding: 12px;
}

.placeholder--dark {
  background: var(--hatch-d);
}

.placeholder__tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.82);
  border-radius: var(--r-pill);
  padding: 4px 10px;
}

.placeholder--dark .placeholder__tag {
  color: var(--muted-d);
  background: rgba(0, 0, 0, 0.55);
}

/* --- Notices --- */

.notice {
  border-radius: var(--r-xs);
  padding: 16px 18px;
  font-size: 15px;
  line-height: 1.6;
}

.notice--beta {
  background: var(--beta-tint);
  color: #8a5a12;
}

/* 5. Chrome =============================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--hair);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 84px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--r-btn);
  font-size: 16px;
  font-weight: 700;
  color: var(--body);
  text-decoration: none;
}

.site-nav a:hover {
  background: var(--light);
  color: var(--ink);
}

.site-nav a[aria-current="page"] {
  color: var(--ink);
  background: var(--light);
}

/* Footer — load-bearing: store reviewers follow these links. */

.site-footer {
  background: var(--dark-alt);
  color: var(--body-d);
  padding-block: 72px 56px;
}

.site-footer a {
  color: var(--body-d);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--accent-dark);
}

.footer__top {
  display: flex;
  justify-content: space-between;
  gap: 64px;
  flex-wrap: wrap;
}

.footer__cols {
  display: flex;
  gap: 72px;
  flex-wrap: wrap;
}

.footer__col h2 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--muted-d);
  margin: 0 0 14px;
}

.footer__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__col li + li {
  margin-top: 2px;
}

.footer__col a,
.footer__col span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 16px;
  font-weight: 600;
}

.footer__col .is-email {
  color: var(--accent-dark);
}

.footer__col .is-entity {
  color: var(--muted-d);
}

.footer__base {
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid var(--hair-d);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--muted-d);
}

/* 6. Landing ============================================================== */

/* --- Hero --- */

.hero {
  position: relative;
  background: var(--dark);
  overflow: hidden;
  min-height: 720px;
  display: flex;
  flex-direction: column;
}

.hero__court {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.16;
  pointer-events: none;
}

.hero__body {
  position: relative;
  z-index: 2;
  flex: 1;
  padding-top: 100px;
  padding-bottom: 80px;
}

.hero__copy {
  max-width: 712px;
}

.hero__headline {
  margin: 0;
}

.hero__flip {
  display: block;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@keyframes flip-in {
  from {
    opacity: 0;
    transform: translateY(0.18em);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero__flip.is-in {
  animation: flip-in 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.hero__sub {
  max-width: 34ch;
  margin: 28px 0 40px;
  font-size: 21px;
  line-height: 1.6;
  color: var(--body-d);
}

.hero__free {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--muted-d);
}

/* Phone frame — bleeds off the bottom-right on desktop. */

.phone {
  width: 372px;
  height: 700px;
  border: 8px solid var(--frame);
  border-radius: 46px;
  background: var(--dark-panel);
  overflow: hidden;
  position: relative;
  flex: none;
}

.hero__phone {
  position: absolute;
  right: var(--gutter);
  bottom: -140px;
  z-index: 1;
}

/* The phone hangs 140px past the hero's bottom edge, so the court card has to
   sit higher inside the frame than it does in a full-height mockup or the crop
   line cuts through it. */
.hero__phone .phone__card {
  bottom: 190px;
}

.phone__map {
  position: absolute;
  inset: 0;
  background: #101014;
}

.phone__map svg {
  width: 100%;
  height: 100%;
  display: block;
}

.phone__pin {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 12px rgba(255, 131, 0, 0.18);
}

.phone__card {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 22px;
  background: var(--dark-panel);
  border: 1px solid var(--hair-d);
  border-radius: var(--r-sm);
  padding: 18px;
}

.live-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--live);
}

.live-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live);
}

.phone__card h3 {
  margin: 10px 0 6px;
  font-size: 21px;
  letter-spacing: -0.4px;
}

.phone__card p {
  margin: 0;
  font-size: 14px;
  color: var(--muted-d);
}

/* --- How it works --- */

.how__col {
  display: flex;
  flex-direction: column;
}

.how__mock {
  min-height: 562px;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 26px;
  background: var(--card);
  border: 1px solid var(--hair);
}

.how__col h3 {
  font-size: 26px;
  letter-spacing: -0.6px;
  margin-bottom: 12px;
}

:where(.how__col) p {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
}

/* --- App mockups ---------------------------------------------------------
   These mirror the real screens (src/app/(tabs)/index.tsx, CourtSheet,
   CourtDetailBody, game/[id].tsx) rather than inventing a UI: the map is the
   default LIGHT Google map with no custom style, the court sheet peeks as a
   white card with an 88px thumb, and the RSVP is a green "I'm in" with two
   quiet secondaries — not an equal three-way control. Colours are the app's
   own tokens. They are illustrations, not screenshots; when the UI moves,
   these do not, so re-check them at L5.
   ------------------------------------------------------------------------ */

.mk {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.mk__map {
  position: absolute;
  inset: 0;
}

.mk__map svg {
  width: 100%;
  height: 100%;
  display: block;
}

.mk__chrome {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mk__brand {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  flex: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.mk__search {
  flex: 1;
  height: 42px;
  border-radius: 13px;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  font-size: 15px;
  font-weight: 700;
  color: #a8a298;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.mk__filters {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 68px;
  display: flex;
  gap: 8px;
}

.mk__fchip {
  height: 32px;
  padding: 0 13px;
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--body);
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mk__fchip--on {
  background: var(--accent);
  color: #fff;
}

/* The map pin: #FC4A1A with a 1.5px white ring, as in the app. */
.mk__pin {
  position: absolute;
  left: 46%;
  top: 45%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: #fc4a1a;
  border: 2px solid #fff;
  box-shadow: 0 0 0 10px rgba(252, 74, 26, 0.16);
}

.mk__peek {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  background: #fff;
  border-radius: var(--r-md);
  padding: 16px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.14);
}

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

.mk__thumb {
  width: 88px;
  height: 88px;
  border-radius: 16px;
  flex: none;
  background: var(--hatch);
}

.mk__actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}

.mk__view {
  flex: 1;
  height: 46px;
  border-radius: var(--r-xs);
  background: var(--grad-btn);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mk__heart {
  width: 46px;
  height: 46px;
  border-radius: var(--r-xs);
  border: 1px solid var(--hair);
  display: grid;
  place-items: center;
  color: var(--muted);
  flex: none;
}

/* Screen-style mockups (court detail, game detail) */

.mk__hero {
  height: 132px;
  flex: none;
}

.mk__hero--game {
  position: relative;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, #2b2b31, #17171b);
  overflow: hidden;
}

.mk__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px;
}

.mk__name {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.4px;
  color: var(--ink);
  line-height: 1.15;
}

.mk__meta {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin-top: 4px;
}

.mk__namerow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.mk__weekly {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--beta-tint);
  border-radius: var(--r-pill);
  padding: 4px 9px;
}

.mk__card {
  background: #f1efe9;
  border-radius: var(--r-xs);
  padding: 14px;
  margin-top: 16px;
}

.mk__cardrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.mk__count {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.8px;
  color: var(--ink);
}

.mk__count i {
  font-style: normal;
  font-size: 17px;
  font-weight: 800;
  color: var(--muted);
}

.mk__track {
  height: 6px;
  border-radius: var(--r-pill);
  background: #eceae3;
  margin: 12px 0 8px;
  overflow: hidden;
}

.mk__track span {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--success);
}

.mk__sub {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.mk__checkin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #f1efe9;
  border-radius: var(--r-xs);
  padding: 12px 14px;
  margin-top: 16px;
}

.mk__checkinbtn {
  height: 36px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--grad-btn);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  flex: none;
}

.mk__section {
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.3px;
  color: var(--ink);
  margin-top: 20px;
}

.mk__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hair);
}

.mk__dot {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--fill-2);
  flex: none;
}

/* RSVP: one prominent green "I'm in", two quiet secondaries. */
.mk__rsvp {
  margin-top: auto;
  padding-top: 18px;
}

.mk__in {
  height: 52px;
  border-radius: var(--r-btn);
  background: var(--success);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.mk__quiet {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.mk__quiet span {
  flex: 1;
  height: 44px;
  border-radius: var(--r-btn);
  border: 1px solid var(--hair);
  color: var(--body);
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mk__chat {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f1efe9;
  border-radius: var(--r-xs);
  padding: 13px 14px;
  margin-top: 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.mk__chat svg {
  flex: none;
}

/* --- Austin beta --- */

.beta {
  max-width: 720px;
}

:where(.beta__copy) p {
  margin: 24px 0 0;
}

/* 7. Document pages ======================================================= */

.doc-title {
  padding-block: 88px 56px;
  background: var(--light);
}

.doc-title .t-lead {
  max-width: 62ch;
  margin: 22px 0 0;
}

.doc-body {
  padding-bottom: var(--rhythm);
  background: var(--light);
}

.doc-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 780px);
  gap: 72px;
  align-items: start;
}

/* Table of contents */

.toc {
  position: sticky;
  top: 116px;
}

.toc h2 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}

.toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.toc a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 14px;
  border-radius: var(--r-btn);
  font-size: 16px;
  font-weight: 600;
  color: var(--body);
  text-decoration: none;
}

.toc a:hover {
  color: var(--ink);
  background: rgba(0, 0, 0, 0.03);
}

.toc a.is-current {
  background: #fff;
  border: 1px solid var(--hair);
  color: var(--ink);
  font-weight: 800;
}

.doc-article > section {
  scroll-margin-top: 108px;
}

.doc-article > section + section {
  margin-top: 48px;
}

.doc-article h2 {
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.8px;
  margin-bottom: 18px;
}

.doc-article p {
  margin: 0 0 16px;
  max-width: 68ch;
}

.doc-article p:last-child {
  margin-bottom: 0;
}

.doc-article ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Definition-style rows used by "What we collect" / "Who we share it with" */

.rows {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.row-card {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--r-xs);
  padding: 18px 20px;
}

.row-card b {
  display: block;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.2px;
}

.row-card span {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.6;
}

.tick-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  font-size: 17px;
  line-height: 1.6;
}

.tick-list li + li {
  border-top: 1px solid var(--hair);
}

.tick-list .mark {
  flex: none;
  font-weight: 900;
  line-height: 1.5;
}

.mark--yes {
  color: var(--success);
}

.mark--no {
  color: var(--error);
}

.mark--keep {
  color: var(--muted);
}

.callout {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  padding: 26px 28px;
}

.callout p {
  margin: 0;
}

/* Support page */

.contact-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: 34px;
}

.contact-card__email {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.8px;
  color: var(--link);
  text-decoration: none;
  word-break: break-word;
}

:where(.contact-card) p {
  margin: 14px 0 0;
  font-size: 17px;
  line-height: 1.6;
  max-width: 56ch;
}

/* Delete page */

.delete-cards {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 24px;
  align-items: start;
}

.delete-card {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: 32px;
  height: 100%;
}

.tag-row {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  padding: 6px 12px;
  background: var(--light);
  border: 1px solid var(--hair);
  color: var(--muted);
}

.tag--hot {
  background: var(--grad-btn);
  border-color: transparent;
  color: #fff;
}

.delete-card h2 {
  font-size: 32px;
  line-height: 1.12;
  letter-spacing: -0.9px;
}

:where(.delete-card) > p {
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 1.65;
}

.steps {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  counter-increment: step;
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 13px 0;
  font-size: 17px;
  color: var(--ink);
  font-weight: 600;
}

.steps li + li {
  border-top: 1px solid var(--hair);
}

.steps li::before {
  content: counter(step);
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--light);
  border: 1px solid var(--hair);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.soft-card {
  margin-top: 24px;
  background: var(--light);
  border: 1px solid var(--hair);
  border-radius: var(--r-xs);
  padding: 18px 20px;
  font-size: 16px;
  line-height: 1.6;
}

.outcome-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 56px;
}

.outcome-cols h2 {
  font-size: 30px;
  letter-spacing: -0.8px;
  margin-bottom: 10px;
}

.outcome-cols li b {
  display: block;
  color: var(--ink);
  font-weight: 800;
}

/* 8. 404 ================================================================== */

.page-404 .four04 {
  flex: 1;
}

/* The /invite page (7.20) reuses the 404 hero wholesale — same dark full-bleed panel, same
   centred body — so it shares these rules rather than duplicating them. Its only addition is
   the gap above the store badges, which sit under an "Open in Halfcourt" button that is absent
   whenever the URL carries no game id; putting the space on the badges keeps both states even. */
.page-invite,
.page-404 {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--dark-alt);
}

.page-invite .four04 {
  flex: 1;
}

.page-invite .badges {
  margin-top: 28px;
}

.four04 {
  position: relative;
  background: var(--dark);
  overflow: hidden;
  min-height: 640px;
  display: flex;
  flex-direction: column;
}

.four04__court {
  position: absolute;
  right: -80px;
  bottom: -120px;
  width: 640px;
  height: 640px;
  opacity: 0.16;
  pointer-events: none;
}

.four04__body {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 96px;
}

.four04__head {
  font-size: 72px;
  line-height: 1;
  letter-spacing: -2.2px;
}

:where(.four04) p {
  max-width: 52ch;
  margin: 24px 0 40px;
  font-size: 21px;
  line-height: 1.6;
  color: var(--body-d);
}

/* 9. Responsive =========================================================== */

@media (max-width: 1200px) {
  .hero__phone {
    right: 24px;
    bottom: -220px;
  }

  .split {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }

  .doc-layout {
    gap: 48px;
  }
}

@media (max-width: 960px) {
  :root {
    --gutter: 24px;
    --rhythm: 60px;
  }

  .t-hero {
    font-size: 46px;
    line-height: 1.02;
    letter-spacing: -1.4px;
  }

  .t-page {
    font-size: 38px;
    line-height: 1.06;
    letter-spacing: -1.1px;
  }

  .t-section {
    font-size: 34px;
    line-height: 1.08;
    letter-spacing: -0.9px;
  }

  .t-sub {
    font-size: 25px;
    letter-spacing: -0.6px;
  }

  .t-lead {
    font-size: 19px;
  }

  .grid-3,
  .split,
  .delete-cards,
  .outcome-cols {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .hero {
    min-height: 0;
  }

  .hero__body {
    padding-top: 44px;
    padding-bottom: 0;
  }

  .hero__sub {
    max-width: none;
    margin: 22px 0 30px;
  }

  /* Phone bleeds off the bottom on mobile, not the corner. */
  .hero__phone {
    position: relative;
    right: auto;
    bottom: auto;
    margin: 48px auto -180px;
    max-width: 100%;
  }

  .phone {
    width: 320px;
    height: 600px;
  }

  .how__mock {
    min-height: 0;
  }

  /* The map mockup is entirely absolutely-positioned children, so it collapses
     to nothing once the shared desktop min-height is dropped. */
  .how__mock--map {
    min-height: 460px;
  }

  .doc-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* TOC becomes a horizontal chip row above the body. */
  .toc {
    position: static;
    top: auto;
  }

  .toc ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .toc a {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--hair);
    background: #fff;
    font-size: 15px;
  }

  .contact-card {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 26px;
  }

  .contact-card__email {
    font-size: 24px;
  }

  .delete-card {
    padding: 26px;
  }

  .delete-card h2 {
    font-size: 26px;
    letter-spacing: -0.7px;
  }

  .four04 {
    min-height: 0;
  }

  .four04__head {
    font-size: 52px;
    letter-spacing: -1.6px;
  }

  :where(.four04) p {
    font-size: 19px;
  }

  .site-nav a {
    padding: 0 10px;
    font-size: 15px;
  }

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

  .lockup__word {
    font-size: 18px;
  }
}

@media (max-width: 720px) {
  .footer__top,
  .footer__cols {
    flex-direction: column;
    gap: 32px;
  }

  .footer__base {
    flex-direction: column;
    gap: 8px;
  }

  .badges {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* Stacked, the two badges share a left edge — but Google's baked-in clear space (41 of every
     250px, 14.6px at 89px tall) pushed its logo right of Apple's (L4c-3 #3). Pulling the element
     back by that transparent margin lines the logos up without cropping either file; clear space
     is spacing to neighbours, so both vendors' guidelines still hold. */
  .badge--google {
    margin-left: calc(89px * -41 / 250);
  }
}

@media (prefers-reduced-motion: reduce) {
  *:not(.hero__flip) {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Keep the phrase's cross-fade legible; drop the translate. */
  .hero__flip.is-in {
    animation-name: flip-in-flat;
  }
}

@keyframes flip-in-flat {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}