/* ClubhouseOS marketing site: shared styles.
 *
 * Palette comes from the course at first light and the paper a golf shop runs
 * on: clubhouse green for the chrome, starter-sheet paper for surfaces, pencil
 * gray for secondary text. Two state colors carry meaning and nothing else:
 * fairway green = done / checked in, flag yellow = needs attention.
 * Type is one family (Archivo) used at three widths: wide for headlines,
 * normal for reading, condensed for operational data (tee sheets, ledgers).
 */
/* Archivo (SIL Open Font License, assets/fonts/OFL.txt), self-hosted so a
 * phone fetches it from this site's own connection instead of two more
 * domains. One variable file covers every weight and width used here. */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --green-900: #12352a;
  --green-800: #1b4332;
  --green-700: #245a44;
  --paper: #f0f2ec;
  --sheet: #fafbf7;
  --ink: #14231c;
  --pencil: #53625a;
  --rule: #d3d9d0;
  --rule-dark: rgba(240, 242, 236, 0.16);
  --on-dark: #f0f2ec;
  --on-dark-2: #b9cbbf;
  --fairway: #1f6a40;
  --fairway-bg: #e1efe5;
  --flag: #e4b21c;
  --flag-ink: #6f5000;
  --flag-bg: #fbf1cf;
  --focus: #1b4332;
  --w-wide: 100;
  --w-data: 84;
  --max: 1200px;
  --gutter: 24px;
}
@media (max-width: 600px) { :root { --gutter: 16px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.55;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: var(--green-800); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--green-700); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.on-dark :focus-visible, .board__bar :focus-visible { outline-color: var(--flag); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btn:disabled { cursor: default; opacity: 1; }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 16px; top: 12px; z-index: 100; background: var(--sheet); padding: 10px 14px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.data { font-variation-settings: "wdth" var(--w-data); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }

/* ---- Headings --------------------------------------------------------- */
h1, h2, h3 { margin: 0; font-weight: 750; color: inherit; text-wrap: balance; }
h1 {
  font-variation-settings: "wdth" var(--w-wide);
  font-size: clamp(2.25rem, 4.4vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-weight: 750;
}
h2 {
  font-variation-settings: "wdth" var(--w-wide);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
h3 { font-size: 1.25rem; line-height: 1.25; font-weight: 700; }
p { margin: 0; }
.lede { font-size: 1.2rem; line-height: 1.5; color: var(--pencil); max-width: 36em; }
.section { padding: 88px 0; }
.section + .section { border-top: 1px solid var(--rule); }
.section__head { max-width: 46rem; margin-bottom: 48px; }
.section__head h2 + * { margin-top: 18px; }
@media (max-width: 700px) {
  .section { padding: 72px 0; }
  .section__head { margin-bottom: 32px; }
  .lede { font-size: 1.08rem; }
}

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px;
  border-radius: 4px; border: 1px solid transparent;
  font: inherit; font-size: 1rem; font-weight: 650; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn--solid { background: var(--green-800); color: var(--on-dark); }
.btn--solid:hover { background: var(--green-700); color: var(--on-dark); }
.btn--line { border-color: currentColor; color: var(--green-800); background: transparent; }
.btn--line:hover { background: rgba(27, 67, 50, .06); }
.on-dark .btn--solid { background: var(--paper); color: var(--green-900); }
.on-dark .btn--solid:hover { background: #fff; color: var(--green-900); }
.on-dark .btn--line { color: var(--on-dark); border-color: rgba(240, 242, 236, .5); }
.on-dark .btn--line:hover { background: rgba(240, 242, 236, .08); border-color: var(--on-dark); }

/* ---- Header ----------------------------------------------------------- */
.site-head { background: var(--green-900); color: var(--on-dark); position: relative; z-index: 20; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
/* The logo lockup for dark grounds (website/brand/, wiki/brand.md); the
   header is always dark green, where its lifted green reads at 5.6:1. */
.brand { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.brand img { display: block; height: 46px; width: auto; }
@media (max-width: 420px) { .brand img { height: 30px; } }
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a:not(.btn) { color: var(--on-dark-2); text-decoration: none; font-size: 0.98rem; padding: 12px 0; }
.site-nav a:not(.btn):hover, .site-nav a[aria-current="page"] { color: var(--on-dark); }
.site-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--on-dark); }
.site-nav .btn { min-height: 44px; padding: 0 16px; font-size: .95rem; }
.menu-btn { display: none; }
/* The collapsed menu needs JavaScript; without it the links stay visible. */
@media (max-width: 760px) {
  .site-nav { gap: 8px; }
  .js .site-nav a:not(.btn) { display: none; }
  .js .menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 4px; cursor: pointer;
    border: 1px solid var(--rule-dark); background: transparent; color: var(--on-dark);
  }
  .menu-btn svg { width: 22px; height: 22px; }
}
.mobile-menu { display: none; background: var(--green-900); border-top: 1px solid var(--rule-dark); }
@media (max-width: 760px) { .mobile-menu.is-open { display: block; } }
.mobile-menu a { display: block; padding: 16px var(--gutter); color: var(--on-dark); text-decoration: none; font-size: 1.1rem; border-bottom: 1px solid var(--rule-dark); }
.mobile-menu a span { display: block; color: var(--on-dark-2); font-size: .92rem; }

/* ---- Hero ------------------------------------------------------------- */
.hero { background: var(--green-900); color: var(--on-dark); padding: 48px 0 64px; }
.hero__top { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 20px 56px; align-items: end; margin-bottom: 36px; }
.hero__top h1 { max-width: 13em; }
.hero__top .lede { font-size: 1.1rem; }
.hero__top .lede { color: var(--on-dark-2); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.hero__proof { margin-top: 36px; color: var(--on-dark-2); font-size: .95rem; max-width: 60rem; }
.hero__proof strong { color: var(--on-dark); font-weight: 650; }
@media (max-width: 1100px) {
  .hero__top { grid-template-columns: 1fr; gap: 16px; margin-bottom: 28px; }
  .hero__top .lede { max-width: 42em; }
}
@media (max-width: 600px) { .hero { padding: 36px 0 48px; } .hero__ctas .btn { flex: 1 1 auto; } }

/* ---- The operating board (hero) --------------------------------------- */
.board { margin: 0; background: var(--sheet); color: var(--ink); border-radius: 6px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .28); }
.board__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  padding: 10px 18px; background: var(--green-800); color: var(--on-dark);
  font-size: .95rem;
}
.board__bar b { font-weight: 700; }
.board__clock { font-weight: 700; min-width: 5.2em; }
.board__sample { margin-left: auto; color: var(--on-dark); background: rgba(240, 242, 236, .12); padding: 4px 10px; border-radius: 3px; font-size: .88rem; }
.board__replay {
  font: inherit; font-size: .88rem; color: var(--on-dark); background: transparent;
  border: 1px solid rgba(240, 242, 236, .45); border-radius: 3px; padding: 6px 12px; min-height: 44px; cursor: pointer;
}
.board__replay:hover { border-color: var(--on-dark); }
.board__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); }
.pane { padding: 16px 18px 18px; min-width: 0; }
.pane + .pane { border-left: 1px solid var(--rule); }
.pane h3 { font-size: .95rem; font-weight: 700; color: var(--pencil); margin-bottom: 10px; }
.pane h3 + .pane__sub { margin-top: -8px; margin-bottom: 10px; font-size: .88rem; color: var(--pencil); }

.sheet { width: 100%; border-collapse: collapse; font-size: .95rem; }
.sheet th:last-child, .sheet td:last-child { text-align: right; padding-right: 0; }
.sheet .p, .sheet th:nth-child(3) { text-align: center; }
.sheet th { text-align: left; font-weight: 600; font-size: .82rem; color: var(--pencil); padding: 0 8px 6px 0; border-bottom: 1px solid var(--rule); }
.sheet td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--rule); vertical-align: middle; white-space: nowrap; }
.sheet td.sheet__who { white-space: normal; }
.sheet tr:last-child td { border-bottom: 0; }
.sheet .t { font-weight: 700; width: 4.2em; }
.sheet .p { color: var(--pencil); width: 4.5em; }
.state { display: inline-block; font-size: .9rem; font-weight: 600; padding: 2px 8px; border-radius: 3px; line-height: 1.35; }
.state--out { color: var(--pencil); padding-left: 0; }
.state--tee { background: var(--green-800); color: var(--on-dark); }
.state--in { background: var(--fairway-bg); color: var(--fairway); }
.state--booked { color: var(--pencil); box-shadow: inset 0 0 0 1px var(--rule); }
.sheet tr.is-featured td { background: #eef3ea; }
.sheet tr.is-featured td:first-child { box-shadow: inset 3px 0 0 var(--green-800); padding-left: 8px; }

.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: 3.4em minmax(0, 1fr) auto; gap: 2px 10px; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: .95rem; }
.feed li:last-child { border-bottom: 0; }
.feed .t { color: var(--pencil); }
.feed .what b { font-weight: 650; display: block; }
.feed .what span { color: var(--pencil); font-size: .92rem; }
.feed .amt { font-weight: 650; text-align: right; }
.feed li[hidden] { display: none; }

.facts { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 0; font-size: .95rem; }
.facts dt { color: var(--pencil); padding: 5px 0; border-bottom: 1px solid var(--rule); }
.facts dd { margin: 0; padding: 5px 0 5px 12px; text-align: right; font-weight: 650; border-bottom: 1px solid var(--rule); }
.facts dt:last-of-type, .facts dd:last-of-type { border-bottom: 0; }
.facts + h3 { margin-top: 22px; }
.facts dd.total { font-weight: 800; }

/* A state change the visitor just saw: a brief highlight, never a loop. */
.just-changed { animation: changed 1.6s ease-out; }
@keyframes changed { from { background-color: var(--flag-bg); } to { background-color: transparent; } }
.feed li.just-changed { animation-name: changed; }
.state.just-changed { animation-name: changed-ring; }
@keyframes changed-ring { from { box-shadow: 0 0 0 3px var(--flag); } to { box-shadow: 0 0 0 3px transparent; } }
@media (prefers-reduced-motion: reduce) { .just-changed { animation: none; } }

.board__note { padding: 10px 18px; font-size: .88rem; color: var(--pencil); border-top: 1px solid var(--rule); background: var(--paper); }

@media (max-width: 1060px) {
  .board__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pane--record { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
  .pane--record .facts + h3 { margin-top: 0; }
  .pane--record > :nth-child(3) { grid-column: 2; grid-row: 1; }
  .pane--record > :nth-child(4) { grid-column: 2; grid-row: 2; }
}
@media (max-width: 700px) {
  .board__bar { padding: 10px 14px; gap: 4px 12px; }
  .board__sample { margin-left: 0; order: 5; }
  .board__replay { order: 6; }
  .board__grid { grid-template-columns: 1fr; }
  .pane { padding: 14px; }
  .pane + .pane { border-left: 0; border-top: 1px solid var(--rule); }
  .pane--record { display: block; }
  .pane--record .facts + h3 { margin-top: 20px; }
  .sheet tr.m-hide { display: none; }
  .sheet td { padding: 10px 6px 10px 0; }
}

/* ---- Status markers (what is live, built, or in development) ------------ */
.st { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--green-800); vertical-align: -1px; flex: none; }
.st--live { background: var(--green-800); }
.st--built { background: linear-gradient(90deg, var(--green-800) 50%, transparent 50%); }
.st--dev { background: transparent; border-style: dotted; }
.on-dark .st { border-color: var(--on-dark); }
.on-dark .st--live { background: var(--on-dark); }
.on-dark .st--built { background: linear-gradient(90deg, var(--on-dark) 50%, transparent 50%); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; font-size: .95rem; color: var(--pencil); }
.legend li { display: flex; align-items: center; gap: 8px; }

/* ---- Departments ------------------------------------------------------ */
.depts { border-top: 2px solid var(--ink); }
.dept { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.dept h3 { font-size: 1.35rem; font-variation-settings: "wdth" var(--w-wide); }
.dept h3 small { display: block; font-size: .95rem; font-weight: 450; color: var(--pencil); margin-top: 6px; font-variation-settings: "wdth" 100; }
.jobs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px 28px; }
.jobs li { display: flex; gap: 10px; align-items: baseline; }
.jobs li .st { transform: translateY(1px); }
.jobs li span:last-child { min-width: 0; }
.jobs li em { font-style: normal; color: var(--pencil); font-size: .92rem; display: block; }
.depts__foot { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: center; }
@media (max-width: 700px) {
  .dept { grid-template-columns: 1fr; gap: 12px; padding: 20px 0; }
  .jobs { grid-template-columns: 1fr; }
}

/* ---- Event change (workflow) ----------------------------------------- */
.change { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.change__steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.change__steps li { counter-increment: step; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.change__steps li::before { content: counter(step); font-weight: 700; color: var(--pencil); font-variant-numeric: tabular-nums; }
.change__steps b { display: block; font-weight: 650; }
.change__steps span { color: var(--pencil); font-size: .98rem; }
.beo { background: var(--sheet); border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
.beo__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--rule); }
.beo__head h3 { font-size: 1.1rem; }
.beo__head p { color: var(--pencil); font-size: .95rem; }
.seg { display: inline-flex; border: 1px solid var(--green-800); border-radius: 4px; overflow: hidden; }
.seg button { font: inherit; font-size: .95rem; border: 0; background: transparent; color: var(--green-800); padding: 0 14px; min-height: 44px; cursor: pointer; }
.seg button:focus-visible { outline-offset: -4px; }
/* Controls that only work with JavaScript stay out of the way without it. */
.seg, [data-personalized], .board__replay { display: none; }
.js .seg { display: inline-flex; }
.js [data-personalized] { display: inline-flex; }
.js .board__replay:not([hidden]) { display: inline-block; }
.seg button[aria-pressed="true"] { background: var(--green-800); color: var(--on-dark); }
.beo__body { display: grid; grid-template-columns: 1fr 1fr; }
.beo__col { padding: 16px 20px 20px; min-width: 0; }
.beo__col + .beo__col { border-left: 1px solid var(--rule); }
.beo__col h4 { margin: 0 0 8px; font-size: .95rem; color: var(--pencil); font-weight: 650; }
.ack { list-style: none; margin: 0; padding: 0; }
.ack li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: .98rem; }
.ack li:last-child { border-bottom: 0; }
.ack .ok { color: var(--fairway); font-weight: 600; }
.ack .wait { color: var(--flag-ink); font-weight: 650; }
.delta { color: var(--flag-ink); font-weight: 650; }
.beo__foot { padding: 12px 20px; border-top: 1px solid var(--rule); background: var(--flag-bg); color: var(--flag-ink); font-size: .95rem; }
.beo__foot[hidden] { display: none; }
.status-note { margin-top: 16px; font-size: .95rem; color: var(--pencil); display: flex; gap: 10px; align-items: baseline; }
@media (max-width: 900px) {
  .change { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 600px) {
  .beo__body { grid-template-columns: 1fr; }
  .beo__col + .beo__col { border-left: 0; border-top: 1px solid var(--rule); }
}

/* ---- Golfer journey --------------------------------------------------- */
.journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.journey li { padding: 16px 16px 0 0; position: relative; }
.journey li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
.journey .t { display: block; font-weight: 700; margin-top: 4px; }
.journey .place { display: block; color: var(--pencil); font-size: .92rem; margin-bottom: 6px; }
.journey p { font-size: .98rem; font-variation-settings: "wdth" 100; }
.journey + .caption { margin-top: 28px; }
.journey .amt { display: block; font-weight: 650; margin-top: 6px; }
@media (max-width: 1000px) {
  .journey { grid-template-columns: 1fr; border-top: 0; border-left: 2px solid var(--ink); margin-left: 6px; }
  .journey li { padding: 0 0 22px 22px; }
  .journey li::before { top: 4px; left: -8px; }
  .journey .t { margin-top: 0; }
}

/* ---- Management + agent ---------------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 960px) { .split { grid-template-columns: 1fr; } }
.panel { background: var(--sheet); border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
.panel__head { padding: 14px 20px; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.panel__head h3 { font-size: 1.05rem; }
.panel__head p { color: var(--pencil); font-size: .92rem; }
.attn { list-style: none; margin: 0; padding: 0; }
.attn li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--rule); }
.attn li:last-child { border-bottom: 0; }
.attn .mark { width: 12px; height: 12px; margin-top: 6px; border-radius: 2px; background: var(--flag); }
.attn .mark--ok { background: transparent; border: 2px solid var(--rule); }
.attn b { font-weight: 650; display: block; }
.attn li > div > span { color: var(--pencil); font-size: .96rem; }

.agent { padding: 18px 20px 20px; display: grid; gap: 16px; }
.msg { max-width: 92%; }
.msg__who { font-size: .85rem; color: var(--pencil); margin-bottom: 4px; font-weight: 600; }
.msg--gm { justify-self: end; text-align: left; }
.msg--gm .msg__body { background: var(--green-800); color: var(--on-dark); padding: 10px 14px; border-radius: 6px; }
.msg--os .msg__body { border-left: 3px solid var(--green-800); padding: 2px 0 2px 14px; }
.msg--os ul { margin: 8px 0 0; padding-left: 1.1em; }
.msg--os li { margin-bottom: 6px; }
.cite { display: block; color: var(--pencil); font-size: .88rem; }
.mode { display: inline-block; font-size: .8rem; font-weight: 650; padding: 2px 8px; border-radius: 3px; margin-left: 6px; vertical-align: 1px; }
.mode--read { background: var(--fairway-bg); color: var(--fairway); }
.mode--propose { background: var(--flag-bg); color: var(--flag-ink); }
.proposal { border: 1px dashed var(--pencil); border-radius: 6px; padding: 14px 16px; background: var(--paper); }
.proposal h4 { margin: 0 0 8px; font-size: 1rem; }
.proposal ol { margin: 0 0 12px; padding-left: 1.2em; }
.proposal li { margin-bottom: 6px; }
.proposal__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.proposal__actions .btn { min-height: 40px; font-size: .95rem; }
.proposal__actions .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.proposal__note { font-size: .9rem; color: var(--pencil); margin-top: 10px; }
.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; border-top: 1px solid var(--rule); padding-top: 24px; }
.modes h3 { font-size: 1.05rem; margin-bottom: 6px; }
.modes p { color: var(--pencil); font-size: .98rem; }
@media (max-width: 800px) { .modes { grid-template-columns: 1fr; gap: 16px; } }

/* ---- Adoption --------------------------------------------------------- */
.systems { width: 100%; border-collapse: collapse; font-size: 1rem; }
.systems th { text-align: left; font-size: .9rem; color: var(--pencil); font-weight: 600; padding: 0 16px 10px 0; border-bottom: 2px solid var(--ink); }
.systems td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.systems td:first-child { font-weight: 650; width: 24%; }

.kind { font-weight: 600; }
@media (max-width: 760px) {
  .systems thead { position: absolute; left: -9999px; }
  .systems tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .systems td { display: block; border: 0; padding: 2px 0; width: auto !important; white-space: normal !important; }
}
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; }
.steps li { counter-increment: s; border-top: 2px solid var(--ink); padding-top: 12px; }
.steps li::before { content: counter(s); display: block; font-weight: 700; color: var(--pencil); margin-bottom: 4px; }
.steps b { display: block; font-weight: 650; margin-bottom: 4px; }
.steps span { color: var(--pencil); font-size: .98rem; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; gap: 20px; } }

/* ---- Demo request ----------------------------------------------------- */
.demo { background: var(--green-900); color: var(--on-dark); }
.demo .lede { color: var(--on-dark-2); }
.demo__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "intro form" "second form"; gap: 0 56px; align-items: start; }
.demo__intro { grid-area: intro; }
.demo__form { grid-area: form; }
.demo__grid > .second { grid-area: second; }
@media (max-width: 900px) { .demo__grid { grid-template-columns: 1fr; grid-template-areas: "intro" "form" "second"; } .demo__form { margin-top: 32px; } }
.form { display: grid; gap: 16px; }
.form label { display: block; font-size: .95rem; font-weight: 600; margin-bottom: 6px; }
.form input, .form textarea {
  width: 100%; font: inherit; font-size: 1.05rem; color: var(--ink); background: var(--sheet);
  border: 1px solid var(--rule); border-radius: 4px; padding: 12px 14px; min-height: 50px;
}
.form textarea { min-height: 96px; resize: vertical; }
.form input:focus-visible, .form textarea:focus-visible { outline: 3px solid var(--flag); outline-offset: 1px; }
.form .btn { width: 100%; min-height: 52px; font-size: 1.05rem; }
.form__meta { font-size: .95rem; color: var(--on-dark-2); }
.form__hp { position: absolute; left: -9999px; }
.form__error { color: #ffd98a; font-weight: 600; }
.form__error[hidden], .form[hidden], .form-done[hidden] { display: none; }
.form-done { border-top: 2px solid var(--on-dark); padding-top: 16px; }
.form-done b { display: block; font-size: 1.25rem; margin-bottom: 6px; }
.second { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--rule-dark); }
.second h3 { margin-bottom: 8px; }
.second p { color: var(--on-dark-2); }
.second p + p { margin-top: 10px; }
.second .btn { margin-top: 16px; }
.on-dark a { color: var(--on-dark); }

/* ---- Footer ----------------------------------------------------------- */
.site-foot { background: var(--green-900); color: var(--on-dark-2); border-top: 1px solid var(--rule-dark); padding: 36px 0 44px; font-size: .95rem; }
.site-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-foot a { color: var(--on-dark); text-decoration: none; padding: 12px 0; display: inline-block; }
.site-foot a:hover { text-decoration: underline; }
.site-foot p { max-width: 38rem; }

/* ---- Prose pages (how it works, coach) -------------------------------- */
.page-hero { background: var(--green-900); color: var(--on-dark); padding: 64px 0 72px; }
.page-hero h1 { font-size: clamp(2.1rem, 4vw, 3.25rem); max-width: 20ch; }
.page-hero .lede { color: var(--on-dark-2); margin-top: 20px; }
.page-hero .by { color: var(--on-dark-2); font-size: 1rem; margin-bottom: 14px; }
.toc { list-style: none; padding: 0; margin: 32px 0 0; display: flex; flex-wrap: wrap; gap: 4px 28px; }
.toc a { color: var(--on-dark); text-decoration: underline; text-decoration-color: rgba(240,242,236,.35); padding: 8px 0; display: inline-block; font-size: .98rem; }
.toc a:hover { text-decoration: underline; }
.prose { max-width: 40rem; }
.prose p + p { margin-top: 14px; }
.two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; gap: 28px; } }
.stations { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.stations li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.stations b { font-weight: 650; }
.stations span { color: var(--pencil); }
.stations .where { display: flex; gap: 8px; align-items: baseline; font-size: .95rem; color: var(--pencil); }
@media (max-width: 760px) { .stations li { grid-template-columns: 1fr; gap: 4px; } }
.day { list-style: none; margin: 0; padding: 0; }
.day li { display: grid; grid-template-columns: 5.5em minmax(0, 2fr) minmax(0, 5fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.day .t { font-weight: 700; }
.day .dept-name { color: var(--pencil); }
@media (max-width: 700px) { .day li { grid-template-columns: 5em minmax(0, 1fr); } .day li > :last-child { grid-column: 2; } }
.ledger { width: 100%; border-collapse: collapse; font-size: 1rem; }
.ledger th, .ledger td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--rule); text-align: right; white-space: nowrap; }
.ledger th:first-child, .ledger td:first-child { text-align: left; }
.ledger thead th { font-size: .88rem; font-weight: 600; color: var(--pencil); border-bottom: 2px solid var(--ink); }
.ledger tfoot td { font-weight: 800; border-bottom: 0; }
.ledger tfoot tr:first-child td { border-top: 2px solid var(--ink); }
.ledger--text th, .ledger--text td { text-align: left; white-space: normal; }
.ledger--text th:last-child, .ledger--text td:last-child { text-align: right; white-space: nowrap; }
.ledger--all-left th, .ledger--all-left td { text-align: left !important; white-space: normal; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.caption { font-size: .92rem; color: var(--pencil); margin-top: 12px; }

/* ---- Small page-level pieces ----------------------------------------- */
.depts { margin-top: 20px; }
.steps-h { margin: 64px 0 24px; font-size: 1.5rem; }
.steps-foot { margin-top: 28px; }
.demo__lede { margin-top: 18px; }
.carts { color: var(--pencil); font-weight: 450; }
.carts[hidden] { display: none; }
.panel__foot { padding: 12px 20px; border-top: 1px solid var(--rule); font-size: .9rem; color: var(--pencil); background: var(--paper); }
@media (min-width: 901px) { .sticky-lg { position: sticky; top: 24px; } }
.points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; border-top: 2px solid var(--ink); padding-top: 20px; }
.points b { display: block; font-weight: 650; margin-bottom: 6px; font-size: 1.1rem; }
.points span { color: var(--pencil); }
@media (max-width: 800px) { .points { grid-template-columns: 1fr; gap: 20px; } }
.steps.steps--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .steps.steps--four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps.steps--four { grid-template-columns: 1fr; } }

/* ---- Short home: what it runs --------------------------------------- */
.runs { margin: 0; border-top: 2px solid var(--ink); }
.runs > div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.runs dt { font-weight: 700; font-size: 1.1rem; }
.runs dd { margin: 0; color: var(--pencil); }
@media (max-width: 700px) { .runs > div { grid-template-columns: 1fr; gap: 4px; } }
.more { margin-top: 24px; }
.demo__note { margin-top: 20px; color: var(--on-dark-2); }
.linkbtn { font: inherit; color: var(--on-dark); background: none; border: 0; padding: 10px 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; }
.second .linkbtn { margin-top: 0; }
.journey-wrap { margin-top: 56px; }

/* ---- Product menu -------------------------------------------------- */
.prod { position: relative; }
.prod summary { list-style: none; cursor: pointer; color: var(--on-dark-2); font-size: .98rem; padding: 12px 0; min-height: 44px; display: flex; align-items: center; gap: 6px; }
.prod summary::-webkit-details-marker { display: none; }
.prod summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.prod[open] summary, .prod summary:hover { color: var(--on-dark); }
.prod__menu { position: absolute; top: calc(100% + 6px); left: -16px; width: 340px; background: var(--sheet); border-radius: 6px; box-shadow: 0 18px 48px rgba(0,0,0,.28); padding: 8px; z-index: 30; }
.prod__menu a { display: block; padding: 10px 12px; border-radius: 4px; color: var(--ink); text-decoration: none; font-weight: 650; }
.prod__menu a span { display: block; font-weight: 450; font-size: .9rem; color: var(--pencil); }
.prod__menu a:hover, .prod__menu a[aria-current="page"] { background: var(--paper); }
@media (max-width: 760px) { .js .site-nav .prod { display: none; } }

/* ---- Player Pass card (customers page) ---------------------------------- */
.pass { background: var(--green-800); color: var(--on-dark); border-radius: 14px; padding: 22px 24px; max-width: 360px; box-shadow: 0 18px 40px rgba(0,0,0,.18); }
.pass__top { display: flex; justify-content: space-between; font-size: .9rem; color: var(--on-dark-2); }
.pass__top b { color: var(--flag); font-weight: 700; }
.pass__name { font-size: 1.6rem; font-weight: 750; margin: 18px 0 14px; }
.pass__row { display: flex; gap: 24px; font-size: .95rem; }
.pass__row span { display: block; color: var(--on-dark-2); font-size: .82rem; }
.pass__code { display: block; width: 132px; height: 132px; margin: 22px auto 0; padding: 10px; background: #fff; color: var(--green-900); border-radius: 6px; }
.runs dt a { color: inherit; text-decoration-color: var(--rule); }
.runs dt a:hover { text-decoration-color: currentColor; }
.narrow { max-width: 760px; }
.day--two li { grid-template-columns: 7.5em minmax(0, 1fr); }
@media (max-width: 700px) { .day--two li { grid-template-columns: 1fr; gap: 2px; } .day--two li > :last-child { grid-column: auto; } }
.site-nav .prod__menu a { display: block; color: var(--ink); padding: 10px 12px; font-size: 1rem; }
.site-nav .prod__menu a:hover, .site-nav .prod__menu a[aria-current="page"] { color: var(--ink); }
.prod__menu { left: 50%; transform: translateX(-50%); }

/* The demo form needs the page's script; without it, say so instead of a
   form that can't send. */
html:not(.js) .demo__form .form { display: none; }
html:not(.js) .demo__form::before { content: "Turn on JavaScript to send a demo request."; display: block; color: var(--on-dark-2); }