/* The platform's own public pages: the front page, the policies, and the
   staff pages for setting clubs up. The look of a large online shop (owner's
   picture, 4 Nov 2026, Pick n Pay's site): a white header with a search pill, a plain
   panel with a big heading in two weights, the photo behind a slanted edge and a
   round badge on the seam. The layout and feel only, in the platform's own colours
   and mark. Barlow for headings and buttons, as near that heading as an open font
   comes, Open Sans for everything else. */
/* The fonts these pages use (static/fonts/fonts.css has why), here so a slow
   line waits on one stylesheet rather than two. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/barlow-latin-500-normal.woff2) format("woff2"); 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; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/barlow-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/barlow-latin-600-normal.woff2) format("woff2"); 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; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/barlow-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/barlow-latin-700-normal.woff2) format("woff2"); 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; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/barlow-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/open-sans-latin-wght.woff2) format("woff2");
  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;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/open-sans-latin-ext-wght.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #15201a;
  --muted: #4c5a52;
  --line: #dbe2dc;
  --line-field: #84918a;
  --bg: #ffffff;
  --panel: #ffffff;
  --tint: #f2f4f0;
  --slab: #ebedea;
  --head-ink: #0f3d2a;
  --brand: #1f5f4a;
  --brand-deep: #0f2a20;
  --brand-ink: #ffffff;
  --band: #1b7a4e;
  --band-deep: #146341;
  --band-ink: #ffffff;
  --gold: #e6c46a;
  --gold-ink: #1d1a10;
  --gold-deep: #7a5a10;
  --ok: #1e6b4a;
  --ok-tint: #e3f1e9;
  --warn: #8a5a00;
  --warn-tint: #fbf0dc;
  --error: #b3261e;
  --font-display: "Barlow", "Arial Narrow", "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Open Sans", "Segoe UI", Roboto, Arial, sans-serif;
  --radius: 4px;
  --radius-lg: 6px;
  --section-y: clamp(72px, 11vw, 136px);
  --shadow: 0 24px 48px -32px rgba(15, 42, 32, .45), 0 8px 18px -14px rgba(15, 42, 32, .25);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #edf1ee; --muted: #b3bdb6; --line: #34403a; --line-field: #7d8a82; --bg: #111613; --panel: #19211d; --tint: #151d19; --slab: #1c2520; --head-ink: #edf1ee;
    --brand: #74cfa9; --brand-deep: #0b1712; --brand-ink: #0f1a14; --gold-deep: #e6c46a;
    --ok: #8fe0b7; --ok-tint: #193126; --warn: #f0c46b; --warn-tint: #33291a; --error: #ffb4ab;
  }
}
:root[data-theme="dark"] {
  --ink: #edf1ee; --muted: #b3bdb6; --line: #34403a; --line-field: #7d8a82; --bg: #111613; --panel: #19211d; --tint: #151d19; --slab: #1c2520; --head-ink: #edf1ee;
  --brand: #74cfa9; --brand-deep: #0b1712; --brand-ink: #0f1a14; --gold-deep: #e6c46a;
  --ok: #8fe0b7; --ok-tint: #193126; --warn: #f0c46b; --warn-tint: #33291a; --error: #ffb4ab;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
/* Something marked hidden stays hidden, whatever display its class gives it. */
[hidden] { display: none !important; }
a { color: var(--brand); }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.08; margin: 0; text-wrap: balance; color: var(--head-ink); }
/* One scale: the page's h1 is always the largest thing on it. */
h1, .hero-title { font-size: clamp(2.8rem, 5.6vw, 5.2rem); font-weight: 700; }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); font-weight: 700; }
h3 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); font-weight: 700; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--panel); color: var(--ink); padding: 10px 16px; border-radius: 4px; font-weight: 700; }
.skip:focus { top: 12px; }

.eyebrow {
  font-family: var(--font-body); font-size: .75rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold-deep);
}
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.narrow { max-width: 760px; }
.section { padding-block: var(--section-y); }
.section.tint { background: var(--tint); }
.section-head { max-width: 46rem; margin: 0 auto; text-align: center; display: grid; gap: 14px; justify-items: center; }
.section-head .lead { color: var(--muted); font-size: 1.1rem; max-width: 38rem; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 26px; border-radius: 999px; border: 0; cursor: pointer;
  font: 700 1rem/1.2 var(--font-body); text-decoration: none;
  background: var(--brand); color: var(--brand-ink);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn:active { transform: none; }
.btn.ghost { background: transparent; color: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand); }
.btn[aria-disabled="true"] { opacity: .7; cursor: progress; }

/* ---- Header: white, the logo, where you are, search, the way in --------- */
.site-head { position: relative; z-index: 20; background: var(--panel); color: var(--ink); }
.site-top { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 10px max(20px, 2vw, env(safe-area-inset-right, 0px)) 10px max(20px, 2vw, env(safe-area-inset-left, 0px)); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--head-ink); text-decoration: none; min-height: 32px; flex: none; }
.brand-mark { width: 40px; height: 40px; flex: none; }
.brand-name { font: 700 1.7rem/1 var(--font-display); }
.head-chips { display: flex; flex: none; border-radius: 4px; background: var(--slab); margin-left: 8px; }
.head-chip { display: grid; align-content: center; min-height: 54px; padding: 4px 16px; font-size: .84rem; line-height: 1.3; color: var(--ink); text-decoration: none; white-space: nowrap; }
.head-chip + .head-chip { border-left: 1px solid var(--panel); }
.head-chip b { font-weight: 700; font-size: .92rem; }
a.head-chip b { text-decoration: underline; text-underline-offset: 3px; }
.head-search { position: relative; flex: 1 1 200px; min-width: 0; margin: 0; }
.head-search input { margin: 0; min-height: 54px; padding: 0 60px 0 22px; border-radius: 999px; border: 1px solid var(--line-field); background: var(--panel); }
.head-search button { position: absolute; top: 6px; right: 6px; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--brand); color: var(--brand-ink); cursor: pointer; }
.head-search svg { width: 20px; height: 20px; }
.head-login { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 54px; padding: 0 16px; border-radius: 4px; background: var(--slab); color: var(--ink); font-weight: 600; font-size: .95rem; text-decoration: none; white-space: nowrap; }
.head-login svg { width: 20px; height: 20px; }
.head-login:hover { filter: brightness(.96); }
.head-start { flex: none; min-height: 54px; padding: 0 20px; border-radius: 4px; }
.menu-btn { display: none; width: 44px; height: 44px; flex: none; padding: 0; place-items: center; border: 0; border-radius: 4px; background: var(--slab); color: var(--ink); cursor: pointer; }
.menu-btn svg { width: 26px; height: 26px; }
.site-nav { display: flex; align-items: center; gap: 2px; padding: 0 max(12px, 1.4vw); border-bottom: 1px solid var(--line); }
.site-nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 8px; color: var(--ink); font-weight: 600; font-size: .98rem; text-decoration: none; white-space: nowrap; }
.site-nav a:hover { background: var(--slab); }
.site-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--brand); border-radius: 8px 8px 0 0; font-weight: 700; }
.site-nav .nav-right { margin-left: auto; }
@media (max-width: 1240px) { .head-chips { display: none; } }
@media (max-width: 900px) {
  .site-top { flex-wrap: wrap; }
  .site-top .brand { margin-right: auto; }
  .head-search { order: 5; flex-basis: 100%; }
  .head-start { display: none; }
  .head-login { min-height: 44px; padding: 0 12px; }
  .menu-btn { display: grid; }
  .site-nav:not(.is-staff) {
    display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
    flex-direction: column; align-items: stretch; padding: 10px 16px 18px;
    background: var(--panel); border-top: 1px solid var(--line); box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .4);
  }
  .site-nav.is-open { display: flex; }
  .site-nav .nav-right { margin-left: 0; }
  /* Without script the links simply sit under the logo. */
  html:not(.js) .menu-btn { display: none; }
  html:not(.js) .site-nav:not(.is-staff) { display: flex; position: static; flex-direction: row; flex-wrap: wrap; box-shadow: none; }
}
@media (max-width: 400px) {
  .brand-name { font-size: 1.45rem; }
  .brand-mark { width: 34px; height: 34px; }
  .head-login span { display: none; }
}

/* ---- Footer, centred ------------------------------------------------------ */
/* A landing page's footer (owner, 6 Nov 2026): the brand, then three columns, the
   way in, help, and the rules, then the fine print. Centred, as asked on 3 Nov. */
.site-foot { background: var(--brand-deep); color: #c9d6cf; text-align: center; padding-block: clamp(48px, 7vw, 72px) 0; }
.site-foot .wrap { display: grid; gap: 22px; justify-items: center; }
.foot-brand { display: grid; gap: 12px; justify-items: center; }
.site-foot .brand { color: #fff; }
.site-foot .brand-name, .site-foot .brand { font: 700 1.5rem/1 var(--font-display); }
.site-foot .by { font-size: .95rem; max-width: 34rem; text-wrap: balance; }
.foot-cols { width: 100%; max-width: 880px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; padding-block: 30px; border-block: 1px solid rgba(255, 255, 255, .12); }
.site-foot .foot-col h2 { margin: 0 0 10px; font: 700 .78rem/1.3 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.site-foot a { color: #e7efe9; }
.foot-col a, .foot-bar a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 8px; text-decoration: none; font-weight: 600; font-size: .95rem; border-radius: 8px; }
.foot-col a:hover, .foot-bar a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-foot :focus-visible { outline-color: var(--gold); }
.site-foot .fine { font-size: .85rem; color: #a9bbb1; }
.site-foot .fine a { display: inline-block; padding-block: 4px; text-underline-offset: 3px; }
.foot-bar { width: 100%; max-width: 880px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 16px; padding-block: 12px 22px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .85rem; color: #a9bbb1; }
.foot-bar a { font-size: .85rem; }
@media (max-width: 640px) {
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-col:last-child { grid-column: 1 / -1; }
}

/* ---- The first screen: a panel, a heading, the photo behind a slanted edge */
.hero { position: relative; background: var(--slab); }
.hero-main { position: relative; display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); min-height: clamp(460px, 64vh, 640px); }
/* Every slideshow sits in a frame: a white mount with a fine edge and a soft
   shadow, so it reads as a feature of the page, not the page itself (owner,
   6 Nov 2026: "inside a portrait with good borders ... for more professionalism"). */
.frame { position: relative; padding: 8px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px rgba(15, 42, 32, .1), 0 30px 50px -30px rgba(15, 42, 32, .55), 0 10px 20px -14px rgba(15, 42, 32, .3); }
.frame-stage { position: relative; border-radius: 6px; background: linear-gradient(180deg, #f6f8f5, #e6ece7); overflow: hidden; }
/* The first screen's right half: the towns on top, the photo in its frame under them. */
.hero-side { grid-column: 2; grid-row: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: clamp(16px, 2.2vw, 30px) max(20px, 2.4vw, env(safe-area-inset-right, 0px)) clamp(20px, 2.6vw, 36px) 0; }
.hero-frame { flex: 1; display: flex; min-height: 0; }
.hero-photo { position: relative; flex: 1; min-height: 340px; overflow: hidden; border-radius: 6px; background: linear-gradient(160deg, #24604b, #0f2a20); isolation: isolate; }
.hero-slides { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.hero-slide.is-on { opacity: 1; }
/* The stand-in: a few hundred bytes that came with the page, blurred. */
.hero-slide .preview { position: absolute; inset: -24px; background-size: cover; background-position: center; filter: blur(18px) saturate(1.1); transform: scale(1.04); }
.hero-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Only script holds a picture back until it has arrived, so without it the first still shows. */
.js .hero-slide img { opacity: 0; transition: opacity .8s ease; }
.js .hero-slide img.is-in { opacity: 1; }
.hero-loading { position: absolute; inset: 0 0 auto; height: 3px; overflow: hidden; z-index: 2; }
.hero-loading::after { content: ""; position: absolute; inset: 0; width: 30%; background: var(--gold); animation: hero-loading 1.2s ease-in-out infinite; }
@keyframes hero-loading { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
/* The photo's name, on its own dark chip, so it reads over any picture. */
.hero-caption { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: grid; min-height: 28px; padding: 6px 12px; border-radius: 8px; background: rgba(12, 20, 16, .78); color: #fff; text-align: right; text-decoration: none; font-size: .78rem; line-height: 1.35; }
.hero-caption strong { font-weight: 700; font-size: .84rem; }
.hero-caption:hover span { text-decoration: underline; }
.hero-caption:focus-visible { outline-color: #fff; }
/* The badge on the seam. */
.hero-badge { position: absolute; z-index: 3; left: 0; top: 50%; width: clamp(96px, 8.5vw, 136px); transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .25)); }
.hero-badge svg { display: block; width: 100%; height: auto; }
.hero-inner { position: relative; z-index: 1; grid-column: 1; grid-row: 1; align-self: center; min-width: 0; padding: clamp(28px, 4vw, 56px) clamp(56px, 7.4vw, 110px) clamp(28px, 4vw, 56px) max(20px, 3.4vw, env(safe-area-inset-left, 0px)); }
/* Every town's words sit in one grid cell, only the current one shown, so
   nothing moves when the town changes. */
.hero-stage { display: grid; min-width: 0; }
.hero-words { grid-area: 1 / 1; display: grid; gap: 16px; justify-items: start; align-content: center; min-width: 0; visibility: hidden; opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s; }
.hero-words.is-on { visibility: visible; opacity: 1; transform: none; transition-delay: .15s, .15s, 0s; }
.hero-title { margin: 0; font-family: var(--font-display); line-height: 1.04; letter-spacing: .005em; color: var(--head-ink); overflow-wrap: anywhere; text-wrap: wrap; }
.hero-title b { display: inline-block; font-weight: 700; }
.hero-title span { font-weight: 400; }
.hero .eyebrow { color: var(--gold-deep); letter-spacing: .14em; }
.hero .lead { margin: 0; font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--ink); max-width: 30rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
/* The towns: a bar under the first screen, one line that slides sideways on a
   phone, wrapped with more room. */
.hero-foot, .kenya-foot { min-width: 0; display: flex; align-items: center; gap: 10px; }
.hero-foot { scroll-margin-top: 12px; }
/* One line of towns that moves along with them, the town showing first. It
   fades at the far end, where the next towns come in. */
.place-rail { position: relative; flex: 1; display: flex; gap: 6px; min-width: 0; padding: 4px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.place-rail::-webkit-scrollbar { display: none; }
.place-rail button { flex: none; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-field); background: var(--panel); color: var(--ink); font: 600 .9rem/1 var(--font-body); cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.place-rail button:hover { background: var(--slab); }
.place-rail button[aria-current="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.hero-pause { flex: none; min-width: 28px; min-height: 36px; border-radius: 999px; border: 1px solid var(--line-field); background: var(--panel); color: var(--ink); font: 600 .84rem/1 var(--font-body); padding: 0 14px; cursor: pointer; }

/* A woven band, a different cloth or craft for each part of the country. Plain
   geometry in the spirit of each one, drawn here. Kenya's flag and shield stay
   out of it: the law restricts using those in trade. */
.weave { height: 12px; background-repeat: repeat-x; background-size: 48px 12px; }
.weave[data-pattern="city"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12'%3E%3Crect width='48' height='12' fill='%2314110f'/%3E%3Cpath d='M0 12L12 0h6L6 12zM24 12L36 0h6L30 12z' fill='%23ffd43b'/%3E%3Cpath d='M9 12L21 0h3L12 12zM33 12L45 0h3L36 12z' fill='%23f03e8a'/%3E%3Cpath d='M15 12L27 0h2L17 12zM39 12L51 0h2L41 12z' fill='%2322d3ee'/%3E%3C/svg%3E"); }
.weave[data-pattern="coast"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12'%3E%3Crect width='48' height='12' fill='%230b3b40'/%3E%3Cpath d='M0 12L8 2l8 10zM16 12l8-10 8 10zM32 12l8-10 8 10z' fill='%23f5c542'/%3E%3Ccircle cx='8' cy='9' r='1.6' fill='%230b3b40'/%3E%3Ccircle cx='24' cy='9' r='1.6' fill='%230b3b40'/%3E%3Ccircle cx='40' cy='9' r='1.6' fill='%230b3b40'/%3E%3Ccircle cx='16' cy='3' r='1.5' fill='%23fff'/%3E%3Ccircle cx='32' cy='3' r='1.5' fill='%23fff'/%3E%3Ccircle cx='0' cy='3' r='1.5' fill='%23fff'/%3E%3Ccircle cx='48' cy='3' r='1.5' fill='%23fff'/%3E%3C/svg%3E"); }
.weave[data-pattern="lake"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12'%3E%3Crect width='48' height='12' fill='%230c2f66'/%3E%3Cpath d='M0 5q6-6 12 0t12 0 12 0 12 0' fill='none' stroke='%237ec8ff' stroke-width='2'/%3E%3Cpath d='M0 10q6-6 12 0t12 0 12 0 12 0' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E"); }
.weave[data-pattern="basket"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12'%3E%3Crect width='48' height='12' fill='%236b3f16'/%3E%3Cpath d='M0 12L12 3l12 9 12-9 12 9' fill='none' stroke='%23f2b544' stroke-width='3'/%3E%3Cpath d='M0 6L12-3l12 9 12-9 12 9' fill='none' stroke='%23e8650a' stroke-width='3'/%3E%3C/svg%3E"); }
.weave[data-pattern="beads"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12'%3E%3Crect width='48' height='12' fill='%23111'/%3E%3Cg fill='%23e03131'%3E%3Crect x='1' y='1' width='4' height='4'/%3E%3Crect x='19' y='1' width='4' height='4'/%3E%3Crect x='37' y='1' width='4' height='4'/%3E%3Crect x='7' y='7' width='4' height='4'/%3E%3Crect x='25' y='7' width='4' height='4'/%3E%3Crect x='43' y='7' width='4' height='4'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Crect x='7' y='1' width='4' height='4'/%3E%3Crect x='25' y='1' width='4' height='4'/%3E%3Crect x='43' y='1' width='4' height='4'/%3E%3Crect x='13' y='7' width='4' height='4'/%3E%3Crect x='31' y='7' width='4' height='4'/%3E%3C/g%3E%3Cg fill='%231c7ed6'%3E%3Crect x='13' y='1' width='4' height='4'/%3E%3Crect x='1' y='7' width='4' height='4'/%3E%3Crect x='37' y='7' width='4' height='4'/%3E%3C/g%3E%3Cg fill='%23f59f00'%3E%3Crect x='31' y='1' width='4' height='4'/%3E%3Crect x='19' y='7' width='4' height='4'/%3E%3C/g%3E%3C/svg%3E"); }
.weave[data-pattern="drum"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12'%3E%3Crect width='48' height='12' fill='%23123d24'/%3E%3Cg fill='none' stroke-width='2'%3E%3Ccircle cx='8' cy='6' r='4' stroke='%23f4e9c9'/%3E%3Ccircle cx='24' cy='6' r='4' stroke='%2351cf66'/%3E%3Ccircle cx='40' cy='6' r='4' stroke='%23f4e9c9'/%3E%3C/g%3E%3C/svg%3E"); }
.weave[data-pattern="stone"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12'%3E%3Crect width='48' height='12' fill='%23ecd2e2'/%3E%3Cpath d='M0 6l6-6 6 6-6 6zM24 6l6-6 6 6-6 6z' fill='%23a2478f'/%3E%3Cpath d='M12 6l6-6 6 6-6 6zM36 6l6-6 6 6-6 6z' fill='%23fff'/%3E%3C/svg%3E"); }
.weave[data-pattern="stripes"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12'%3E%3Crect width='48' height='12' fill='%230b4f8a'/%3E%3Crect y='4' width='48' height='4' fill='%23f5f0e6'/%3E%3Cpath d='M8 6l4-4 4 4-4 4zM32 6l4-4 4 4-4 4z' fill='%23e8850c'/%3E%3C/svg%3E"); }
.weave[data-pattern="rows"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12'%3E%3Crect width='48' height='12' fill='%230f5a2a'/%3E%3Cpath d='M0 4c8-5 16-5 24 0s16 5 24 0' fill='none' stroke='%237ad36b' stroke-width='3'/%3E%3Cpath d='M0 10c8-5 16-5 24 0s16 5 24 0' fill='none' stroke='%23b2f2a0' stroke-width='2'/%3E%3C/svg%3E"); }

@media (max-width: 760px) {
  .hero-main { display: block; min-height: 0; }
  .hero-side { padding: 12px max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); gap: 10px; }
  .frame { padding: 6px; border-radius: 6px; }
  .frame-stage, .hero-photo { border-radius: 6px; }
  .hero-photo { min-height: 0; height: min(calc((100vw - 44px) / 1.4074), 420px); }
  .hero-badge { left: auto; top: auto; right: -2px; bottom: -34px; width: 92px; transform: none; }
  .hero-caption { right: auto; left: 10px; bottom: auto; top: 10px; text-align: left; }
  .hero-inner { padding: 18px max(20px, env(safe-area-inset-right, 0px)) 26px max(20px, env(safe-area-inset-left, 0px)); }
  .hero .eyebrow { padding-right: 104px; }
  .hero-words { gap: 12px; }
}

/* ---- The front page is a landing page (owner, 6 Nov 2026): every section a
   heading of two or three words, things shown rather than explained. -------- */
.landing .section, .landing-more .section { padding-block: clamp(56px, 8vw, 104px); }
.landing .section-head h2, .landing-more .section-head h2, .page-head h1, .page-head .lead, .cta-band p, .feat p { text-wrap: balance; }

/* ---- The front page in the footer's look (owner, 6 Nov 2026: "the footer is
   what i would like to be the entire landing home page"): one dark green page,
   centred, the slideshows in white frames as its features. Inside a frame the
   light colours come back, so its buttons and words read on the white. ------ */
.landing {
  background: var(--brand-deep); color: #c9d6cf;
  --ink: #eef3ef; --muted: #b9c9bf; --line: rgba(255, 255, 255, .16); --line-field: #8fa598;
  --panel: #163628; --tint: #12301f; --slab: #1d4031; --head-ink: #ffffff;
  --brand: #7fd6ae; --brand-ink: #0b1f16; --gold-deep: #e6c46a;
}
.landing .frame {
  --ink: #15201a; --muted: #4c5a52; --line: #dbe2dc; --line-field: #84918a; --panel: #ffffff;
  --tint: #f2f4f0; --slab: #ebedea; --head-ink: #0f3d2a; --brand: #1f5f4a; --brand-ink: #ffffff;
  color: var(--ink);
}
.landing .hero { background: transparent; }
/* The mark and the name side by side, the line under them, as in the footer. */
.land-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: clamp(18px, 3svh, 30px); }
.land-brand .brand-mark { width: 46px; height: 46px; }
.land-brand .land-line { flex-basis: 100%; }
.land-name { font: 700 clamp(1.7rem, 2.6vw, 2.2rem)/1 var(--font-display); color: #fff; }
.land-line { font-size: 1.02rem; color: #c9d6cf; }
/* The first screen fits one screen (owner, 6 Nov 2026: "the entire first section,
   and even the rest, will fit directly on each screen"): under the header, about
   150px, it takes the rest of the window and no more. The words take the larger
   half, so the photo is part of the page, not all of it. */
.landing .hero-main { grid-template-columns: minmax(0, 52%) minmax(0, 1fr); min-height: clamp(420px, calc(100svh - 196px), 760px); }
.landing .hero-photo { min-height: 0; }
.landing .hero-title { font-size: clamp(2.4rem, min(5.2vw, 9svh), 4.8rem); }
.landing .hero-inner { padding-block: clamp(20px, 4svh, 48px); }
.landing .hero-words { gap: clamp(10px, 1.8svh, 16px); }
.landing .rules { padding-bottom: clamp(28px, 4vw, 48px); }
/* What a chama gets, running along under the header (owner, 7 Nov 2026). Two
   copies of the list slide together, so the run never has a gap. It stops for a
   pointer, for keyboard focus, for Pause, and for anyone who asked for less motion. */
.value-strip { background: #0a1f17; color: #e7efe9; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.value-strip .weave { height: 6px; background-size: 24px 6px; }
.strip-row { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 max(10px, 1.6vw); }
.strip-track { flex: 1; min-width: 0; display: flex; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.strip-list { flex: none; display: flex; gap: 30px; margin: 0; padding: 0 15px; list-style: none; animation: strip-run 46s linear infinite; }
.strip-list li { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; font: 600 .95rem/1 var(--font-body); }
.strip-list svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--gold); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@keyframes strip-run { to { transform: translateX(-100%); } }
.strip-track:hover .strip-list, .strip-track:focus-within .strip-list, .value-strip.is-paused .strip-list { animation-play-state: paused; }
.strip-pause { flex: none; min-height: 32px; min-width: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: transparent; color: #fff; font: 600 .8rem/1 var(--font-body); cursor: pointer; }
.strip-pause:focus-visible { outline-color: var(--gold); }
@media (prefers-reduced-motion: reduce) {
  .strip-list { animation: none; }
  .strip-list[aria-hidden="true"] { display: none; }
  .strip-track { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
}
/* A phone gets no photo and no town buttons: the brand, the town's words and the
   way in, centred, on one screen. The page fetches no photo there at all. */
@media (max-width: 760px) {
  .landing .hero-side { display: none; }
  .landing .hero-inner { text-align: center; padding-block: 28px 36px; }
  .landing .land-brand { justify-content: center; }
  .landing .hero-words { justify-items: center; }
  .landing .hero .eyebrow { padding-right: 0; }
  .landing .hero-actions { justify-content: center; }
  .landing .hero-title { font-size: clamp(2.3rem, 11vw, 3rem); }
  .landing .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
  .landing .promise { padding: 18px 12px; gap: 8px; }
  .landing .promise h3 { font-size: 1rem; }
  .landing .promise p { font-size: .86rem; }
  .landing .promise .get-icon { width: 42px; height: 42px; }
}
/* Four facts under the first screen, no sentences. */
.facts { background: var(--panel); border-bottom: 1px solid var(--line); }
.facts ul { list-style: none; margin: 0 auto; padding-block: 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 20px; }
.facts li { display: flex; align-items: center; justify-content: center; gap: 12px; font: 700 1.12rem/1.2 var(--font-display); color: var(--head-ink); }
.fact-icon { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 11%, var(--panel)); color: var(--brand); }
.fact-icon svg { width: 22px; height: 22px; }
@media (max-width: 900px) { .facts ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .facts li { justify-content: flex-start; } }
@media (max-width: 380px) { .facts li { font-size: 1rem; gap: 10px; } .fact-icon { width: 38px; height: 38px; } }
/* Four cards: the top of a real screen, a short title, one line. White with a
   fine edge, in the look of a large online shop. */
.feats { list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.feat { display: grid; align-content: start; gap: 8px; padding: 0 0 22px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; text-align: center; }
.feat-shot { height: 200px; margin-bottom: 14px; padding: 26px 18% 0; overflow: hidden; background: var(--tint); }
.feat-shot img[data-lazy] { visibility: hidden; }
.feat-shot img { width: 100%; height: auto; border-radius: 18px 18px 0 0; box-shadow: 0 0 0 6px #17241d, 0 18px 30px -14px rgba(15, 42, 32, .5); }
.feat h3, .feat p { padding-inline: 20px; }
.feat h3 { font-size: 1.35rem; }
.feat p { color: var(--muted); font-size: .97rem; }
/* One way in, at the foot of the page. */
.cta-band { background: var(--brand-deep); color: #e7efe9; text-align: center; padding-block: clamp(56px, 8vw, 96px); }
.cta-band .wrap { display: grid; gap: 14px; justify-items: center; }
.cta-band h2 { color: #fff; }
.cta-band p { font-size: 1.08rem; }
.cta-actions { margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.btn.gold { background: var(--gold); color: var(--gold-ink); }
.btn.ghost-light { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8); }
.cta-band :focus-visible { outline-color: var(--gold); }

/* ---- See it work: the words, a member's phone in each town, the map ------- */
.kenya { position: relative; overflow: hidden; color: var(--ink); background-color: var(--tint); }
.kenya .wrap { max-width: 1320px; }
.kenya > .weave { position: absolute; inset: 0 0 auto; }
.kenya-stage { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr) minmax(0, .8fr); gap: clamp(16px, 2.4vw, 36px); align-items: center; }
.kenya-map { position: relative; width: 100%; max-width: 300px; justify-self: center; aspect-ratio: 100 / 127.5; cursor: pointer; }
.kenya-map svg { display: block; width: 100%; height: 100%; }
.kenya-map path { fill: #dfe7df; stroke: #7f9a8b; stroke-width: .6; stroke-linejoin: round; }
.map-dot, .map-pin { position: absolute; border-radius: 50%; }
.map-dot { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: rgba(15, 61, 42, .34); }
.map-pin { width: 10px; height: 10px; margin: -5px 0 0 -5px; background: var(--brand); box-shadow: 0 0 0 2px #fff; }
.map-pin b { display: none; }
.map-pin.is-on { z-index: 2; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--place, var(--brand)); box-shadow: 0 0 0 3px #fff; animation: map-pin 2s ease-out infinite; }
.map-pin.is-on b { display: block; position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); padding: 3px 9px; border-radius: 999px; background: var(--head-ink); color: #fff; font: 700 .8rem/1.3 var(--font-body); white-space: nowrap; }
@keyframes map-pin { 0% { box-shadow: 0 0 0 3px #fff, 0 0 0 3px rgba(15, 61, 42, .4); } 100% { box-shadow: 0 0 0 3px #fff, 0 0 0 18px rgba(15, 61, 42, 0); } }

/* The phones: the current one centred, a neighbour either side. */
.kenya-phones { min-width: 0; }
.phone-row { --cell: clamp(150px, min(60vw, calc((100svh - 360px) / 2.05)), 272px); position: relative; display: flex; overflow-x: auto; overflow-y: hidden; padding: 18px calc(50% - var(--cell) / 2); scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.phone-row::-webkit-scrollbar { display: none; }
.kenya-show { min-width: 0; }
.kenya-show .kenya-foot { padding: 14px 14px 0; }
.kenya-phones { -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.phone-cell { flex: 0 0 var(--cell); display: grid; justify-items: center; scroll-snap-align: center; scroll-snap-stop: always; transform: scale(.84); opacity: .42; transition: transform .6s ease, opacity .6s ease; }
.phone-cell.is-on { transform: none; opacity: 1; }
.phone-cell .phone { width: calc(100% - 10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 46px -26px rgba(15, 42, 32, .7); }
.phone-screen { background: #101815; isolation: isolate; }
.phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; user-select: none; -webkit-user-drag: none; }
.phone-screen img:not([src]) { visibility: hidden; }
.phone-screen .shimmer { position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, #18221d 30%, #223029 50%, #18221d 70%); background-size: 200% 100%; animation: shimmer 1.6s ease-in-out infinite; }

.kenya-words { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.kenya-words .points { margin: 18px 0 26px; }
/* Whose phone it is: every town's in one grid cell, so nothing moves. */
.kenya-side { display: grid; gap: 18px; justify-items: center; min-width: 0; text-align: center; }
.who-stack { display: grid; min-width: 0; }
.who { grid-area: 1 / 1; display: grid; gap: 2px; min-width: 0; visibility: hidden; opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s; }
.who.is-on { visibility: visible; opacity: 1; transform: none; transition-delay: .15s, .15s, 0s; }
.who b { font: 700 1.2rem/1.2 var(--font-display); color: var(--head-ink); }
.who span { color: var(--muted); font-size: .92rem; }
.who-note { font-size: .82rem; color: var(--muted); }
@media (max-width: 1040px) {
  .kenya-stage { grid-template-columns: minmax(0, 1fr); }
  .kenya-words { justify-items: center; text-align: center; }
  .kenya-words .points { text-align: left; }
  .kenya-map { display: none; }
}

/* ---- What a club gets ----------------------------------------------------- */
.gets { margin-top: 56px; display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .gets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .gets { grid-template-columns: 1fr; } }
.get { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 26px; display: grid; gap: 10px; align-content: start; box-shadow: 0 1px 0 rgba(15, 42, 32, .03); transition: transform .2s ease, box-shadow .2s ease; }
.get:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.get-icon { width: 48px; height: 48px; border-radius: 4px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 11%, var(--panel)); color: var(--brand); }
.get-icon svg { width: 24px; height: 24px; }
.get h3 { font-size: 1.25rem; }
.get p { color: var(--muted); font-size: .97rem; }

/* ---- The product, shown: tabs, a phone that slides, the words ----------- */
.showcase-tabs { margin-top: 36px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
@media (max-width: 640px) {
  .showcase-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-inline: -20px; padding: 4px 20px 8px; scroll-padding-inline: 20px; }
  .showcase-tabs::-webkit-scrollbar { display: none; }
}
.showcase-tab {
  position: relative; overflow: hidden; flex: none;
  min-height: 44px; padding: 0 20px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--muted);
  font: 650 .95rem/1 var(--font-body); text-decoration: none; display: inline-flex; align-items: center;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.showcase-tab:hover { border-color: color-mix(in srgb, var(--brand) 45%, transparent); color: var(--brand); }
.showcase-tab[aria-selected="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); box-shadow: 0 12px 22px -14px rgba(15, 42, 32, .7); }
.showcase-progress { position: absolute; inset: auto 0 0 0; height: 3px; transform-origin: left center; background: rgba(255, 255, 255, .6); transform: scaleX(0); }
.showcase-tab[aria-selected="true"] .showcase-progress.run { animation: showcase-progress linear forwards; }
@keyframes showcase-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.showcase-body { margin-top: clamp(40px, 6vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.showcase.flip .showcase-device { order: 2; }
@media (max-width: 860px) {
  .showcase-body { grid-template-columns: 1fr; }
  .showcase.flip .showcase-device { order: 0; }
}
.showcase-device { min-width: 0; width: 100%; max-width: 460px; justify-self: center; }
.showcase-device .frame-stage { display: grid; justify-items: center; gap: 18px; padding: clamp(22px, 3vw, 34px) 16px 18px; }
.showcase-device .phone { width: clamp(160px, calc((100svh - 400px) / 2), 300px); max-width: 100%; }
.showcase-device .frame-stage { padding-block: clamp(14px, 2.6svh, 30px) clamp(12px, 2svh, 18px); gap: clamp(10px, 1.8svh, 18px); }
.showcase .section-head h2 { font-size: clamp(1.7rem, min(3vw, 5svh), 2.5rem); }
/* Sections with a slideshow keep their padding to the window's height, so each fits one screen. */
.landing-more .kenya.section { padding-block: clamp(28px, 5svh, 64px); }
@media (max-width: 860px) {
  /* On a phone the words sit beside a small phone, so a set fits one screen. */
  .showcase-body { grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
  .showcase.flip .showcase-device { order: 0; }
  .showcase-device { width: auto; max-width: none; }
  .showcase-device .frame { padding: 5px; border-radius: 20px; }
  .showcase-device .frame-stage { padding: 12px 8px 10px; border-radius: 16px; }
  .showcase-device .phone { width: clamp(118px, min(40vw, calc((100svh - 420px) / 2)), 220px); padding: 6px; border-radius: 26px; }
  .showcase-device .phone::before { top: 11px; width: 40px; margin-left: -20px; height: 4px; }
  .showcase-device .phone-screen { border-radius: 21px; }
  .showcase-controls { gap: 6px; }
  .showcase-controls .round-btn { width: 32px; height: 32px; }
  .showcase-count { min-width: 3rem; font-size: .78rem; }
  .showcase-words-col { width: auto; max-width: none; margin: 0; }
  .phone-row { --cell: clamp(146px, min(48vw, calc((100svh - 550px) / 2.05)), 240px); }
  .showcase .words h3 { font-size: 1.05rem; }
  .showcase .points { margin-top: 10px; gap: 8px; }
  .showcase .points li { font-size: .88rem; grid-template-columns: 18px 1fr; gap: 8px; }
  .showcase .points svg { width: 18px; height: 18px; }
  .showcase-note { margin-top: 12px; }
  .showcase-cta { margin-top: 16px; }
  .showcase-cta .btn { min-height: 40px; padding: 8px 16px; font-size: .9rem; white-space: nowrap; }
}
/* The narrowest phones have no room for a phone and its words side by side. */
@media (max-width: 380px) {
  .showcase-body { grid-template-columns: minmax(0, 1fr); }
  .showcase-device { justify-self: center; }
}
/* The four cards two by two on a phone, so they fit one screen. */
@media (max-width: 560px) {
  .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
  .feat { gap: 4px; padding-bottom: 14px; }
  .feat-shot { height: 112px; padding: 14px 14% 0; margin-bottom: 8px; }
  .feat h3 { font-size: 1.02rem; padding-inline: 10px; }
  .feat p { font-size: .84rem; padding-inline: 10px; }
}
.showcase { padding-block: clamp(40px, 6svh, 72px); }
.showcase-tabs { margin-top: clamp(18px, 3svh, 30px); }
.showcase-body { margin-top: clamp(20px, 3.4svh, 40px); }

/* The phone: a frame, and inside it a row of screens that slides sideways. */
.phone {
  position: relative; width: clamp(236px, 64vw, 340px); padding: 9px; border-radius: 40px;
  background: linear-gradient(155deg, #26392f 0%, #0d1611 55%, #1a2a21 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 44px 70px -36px rgba(14, 47, 31, .65), 0 14px 28px -18px rgba(14, 47, 31, .4);
}
.phone::before { content: ""; position: absolute; top: 17px; left: 50%; width: 64px; height: 6px; margin-left: -32px; border-radius: 999px; background: rgba(255, 255, 255, .14); z-index: 2; }
.phone-screen { position: relative; border-radius: 31px; overflow: hidden; background: #f3f5f0; aspect-ratio: 1 / 2; }
.track {
  display: flex; height: 100%; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
.track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; position: relative; isolation: isolate; }
.slide img { width: 100%; height: 100%; object-fit: cover; object-position: top; user-select: none; -webkit-user-drag: none; }
/* An image with no src yet would show its alt text over the shimmer. */
.slide img:not([src]) { visibility: hidden; }
.slide .shimmer { position: absolute; inset: 0; background: linear-gradient(100deg, #eef2ef 30%, #e2e9e5 50%, #eef2ef 70%); background-size: 200% 100%; animation: shimmer 1.6s ease-in-out infinite; z-index: -1; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.showcase-controls { display: flex; align-items: center; gap: 10px; }
.round-btn {
  width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); background: var(--panel); color: var(--brand);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.round-btn:hover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, var(--panel)); }
.round-btn:active { transform: scale(.96); }
.round-btn svg { width: 18px; height: 18px; }
.showcase-count { min-width: 4.5rem; text-align: center; font-size: .85rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }

/* The words: every tab's in one grid cell, only the current one shown, so
   nothing below moves when the tab changes. */
.showcase-words-col { min-width: 0; }
.showcase-words { display: grid; max-width: 30rem; min-width: 0; }
@media (max-width: 860px) { .showcase-words-col { width: 100%; max-width: 30rem; margin: 0 auto; } }
.words { grid-area: 1 / 1; visibility: hidden; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s; }
.words.is-current { visibility: visible; opacity: 1; transform: none; transition-delay: .1s, .1s, 0s; }
.words h3 { color: var(--ink); }
.points { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 14px; }
.points li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; color: var(--muted); font-size: 1.02rem; }
.points svg { width: 24px; height: 24px; color: var(--brand); margin-top: 1px; }
.showcase-note { margin-top: 26px; font-size: .85rem; color: var(--muted); }
.showcase-cta { margin-top: 30px; }

/* ---- Starting, in three steps --------------------------------------------- */
.steps { list-style: none; padding: 0; margin: 56px auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; counter-reset: step; position: relative; }
.steps::before { content: ""; position: absolute; top: 27px; left: 16.6%; right: 16.6%; height: 2px; background: repeating-linear-gradient(90deg, var(--line-field) 0 6px, transparent 6px 12px); opacity: .5; }
.steps li { counter-increment: step; text-align: center; display: grid; gap: 10px; justify-items: center; position: relative; }
.steps li::before { content: counter(step); width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--brand-ink); font: 700 1.5rem/1 var(--font-display); box-shadow: 0 0 0 8px var(--bg); }
.section.tint .steps li::before { box-shadow: 0 0 0 8px var(--tint); }
.steps strong { font-size: 1.12rem; }
.steps span { color: var(--muted); max-width: 18rem; }
@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; gap: 34px; }
  .steps::before { top: 28px; bottom: 28px; left: 50%; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--line-field) 0 6px, transparent 6px 12px); }
  .steps li { background: transparent; }
}

/* ---- Who saves together --------------------------------------------------- */
.chips { margin: 40px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 54rem; list-style: none; padding: 0; }
.chips li { padding: 9px 18px; border-radius: 999px; background: var(--slab); font-weight: 600; font-size: .95rem; }
.counties { margin: 30px auto 0; max-width: 54rem; text-align: center; }
.counties summary { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; font-weight: 700; color: var(--brand); cursor: pointer; }
.counties ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; color: var(--muted); font-size: .92rem; }

/* ---- Your data: four promises --------------------------------------------- */
.promises { margin-top: 52px; display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .promises { grid-template-columns: 1fr; } }
.promise { text-align: center; display: grid; gap: 10px; justify-items: center; padding: 26px 20px; border-radius: var(--radius-lg); background: var(--panel); border: 1px solid var(--line); }
.promise .get-icon { width: 52px; height: 52px; border-radius: 50%; }
.promise h3 { font-size: 1.15rem; }
.promise p { color: var(--muted); font-size: .95rem; }
.policy-links { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ---- Start your club: the form -------------------------------------------- */
.start-card { margin: 48px auto 0; max-width: 760px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: clamp(22px, 5vw, 44px); box-shadow: var(--shadow); }
.fields { display: grid; gap: 18px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fields .full { grid-column: 1 / -1; }
@media (max-width: 600px) { .fields { grid-template-columns: 1fr; } }
label { display: block; font-weight: 650; font-size: .95rem; }
label small, .help { display: block; font-weight: 400; color: var(--muted); font-size: .85rem; margin-top: 4px; }
/* On the start form, Optional sits beside its label so paired fields line up. */
.fields label > small:first-of-type { display: inline; margin: 0 0 0 6px; }
input, select, textarea {
  display: block; width: 100%; max-width: 100%; margin-top: 7px; min-height: 48px; padding: 10px 14px;
  font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line-field); border-radius: 4px;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 1px; border-color: var(--brand); }
[aria-invalid="true"] { border-color: var(--error); }
.error { color: var(--error); font-size: .88rem; font-weight: 600; margin-top: 6px; display: block; }
.agree-box { margin-top: 28px; padding: 20px 22px; border-radius: 6px; background: var(--tint); border: 1px solid var(--line); display: grid; gap: 14px; }
.agree-box h2 { font-size: 1.15rem; }
.sent h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); }
.start { padding-bottom: var(--section-y); }
.start .start-card { margin-top: 0; }
.agree-box ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--muted); font-size: .94rem; }
.agree-check { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; font-weight: 600; cursor: pointer; }
.agree-check input { width: 22px; height: 22px; min-height: 0; margin: 2px 0 0; accent-color: var(--brand); }
.agree-links { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .92rem; }
.agree-links a { display: inline-flex; align-items: center; min-height: 28px; font-weight: 600; }
.form-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; }
.form-actions .help { margin: 0; }
.sent { text-align: center; display: grid; gap: 14px; justify-items: center; }
.sent-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-tint); color: var(--ok); }
.sent ol { text-align: left; margin: 6px 0 0; padding-left: 22px; display: grid; gap: 8px; color: var(--muted); }
.hidden-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Policy pages ----------------------------------------------------------- */
.page-head { padding-block: clamp(56px, 9vw, 104px) clamp(28px, 5vw, 48px); text-align: center; }
.page-head .wrap { display: grid; gap: 14px; justify-items: center; }
.page-head .lead { color: var(--muted); font-size: 1.1rem; max-width: 40rem; }
.legal { padding-bottom: var(--section-y); }
.legal-card { max-width: 780px; margin: 0 auto; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: clamp(22px, 5vw, 52px); }
.legal-card section + section { margin-top: 40px; padding-top: 34px; border-top: 1px solid var(--line); }
.legal-card h2 { font-size: clamp(1.45rem, 3vw, 1.85rem); margin-bottom: 12px; }
.legal-card p, .legal-card li { color: var(--ink); }
.legal-card p + p, .legal-card p + ul, .legal-card ul + p { margin-top: 12px; }
.legal-card ul { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.legal-card .meta { color: var(--muted); font-size: .92rem; }
.legal-toc { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.legal-toc a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-weight: 600; font-size: .9rem; text-decoration: none; }
.legal-toc a[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
/* The help centre. */
.help-search { display: block; font-weight: 650; }
.help-none { margin-top: 16px; color: var(--muted); }
.faqs { margin-top: 20px; }
.faq { border-top: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; min-height: 54px; padding: 8px 0; font-weight: 700; cursor: pointer; }
.faq p { padding: 0 0 16px; color: var(--muted); }
/* Log in / Register: two doors, side by side with the room. */
.door-grid { display: grid; gap: 18px; max-width: 880px; margin: 0 auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .door-grid { grid-template-columns: minmax(0, 1fr); } }
.door { display: grid; gap: 14px; align-content: start; justify-items: start; padding: clamp(22px, 4vw, 36px); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
.door h2 { font-size: 1.4rem; }
.door p { color: var(--muted); }
.door form { display: grid; gap: 14px; width: 100%; justify-items: start; }
.door form label { width: 100%; }
.door-more a { display: inline-flex; align-items: center; min-height: 32px; font-weight: 600; }
.draft-note { max-width: 780px; margin: 0 auto 20px; padding: 14px 18px; border-radius: 4px; background: var(--warn-tint); color: var(--ink); font-size: .94rem; }
.credits { display: grid; gap: 18px; }
.credit { display: grid; grid-template-columns: 160px 1fr; gap: 18px; align-items: center; }
.credit img { width: 160px; height: 100px; object-fit: cover; border-radius: 4px; }
@media (max-width: 520px) { .credit { grid-template-columns: 1fr; } .credit img { width: 100%; height: 160px; } }

/* ---- Staff pages (set up a club, a club's summary) ------------------------ */
main.staff { padding-block: 40px 80px; }
main.staff h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 10px; }
main.staff h2 { font-size: 1.35rem; margin: 32px 0 12px; }
p.lead { color: var(--muted); font-size: 1.08rem; margin: 0 0 24px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin: 16px 0; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.flash { padding: 12px 16px; border-radius: 4px; background: var(--ok-tint); margin: 0 0 16px; }
.flash.warning, .flash.error { background: var(--warn-tint); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--ok-tint); color: var(--ok); }
.pill.wait { background: var(--warn-tint); color: var(--warn); }
.officials-row { display: grid; gap: 10px; grid-template-columns: 1.3fr 1.5fr 1.2fr 1fr; align-items: end; padding: 12px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 720px) {
  .officials-row { grid-template-columns: 1fr; }
  /* A phone gets cards, not a table (owner, 7 Nov 2026), as in the clubs'
     own pages: the first cell the card's title, the rest a label and a value. */
  .stack-on-mobile thead { display: none; }
  .stack-on-mobile, .stack-on-mobile tbody { display: block; }
  .stack-on-mobile tbody { display: grid; gap: 10px; }
  .stack-on-mobile tr { display: block; padding: 12px 14px 6px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
  .stack-on-mobile td { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 14px; border: 0; padding: 6px 0; text-align: right; overflow-wrap: anywhere; min-width: 0; }
  .stack-on-mobile td + td { border-top: 1px dashed var(--line); }
  .stack-on-mobile td[data-label]::before { content: attr(data-label); text-align: left; color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .stack-on-mobile td:first-child { display: block; text-align: left; font-weight: 700; padding-bottom: 8px; }
  .stack-on-mobile td:first-child::before { content: none; }
  .panel:has(> .stack-on-mobile) { background: transparent; border: 0; padding: 0; }
}
.desk { padding-block: 40px 8px; }
.desk h2 { font-size: 1.35rem; margin: 24px 0 10px; }

/* Things that rise into place as they're scrolled to: visible at rest
   without script, and never for anyone who asked for less motion. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; animation-delay: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---- Start a chama, as a service (apps/clubs/starter.py) ------------------- */
.start-ways { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin: 0 auto; }
@media (max-width: 700px) { .start-ways { grid-template-columns: 1fr; } }
.start-way { display: grid; gap: 12px; align-content: start; justify-items: start; padding: clamp(22px, 4vw, 32px);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.start-way h2 { font-size: 1.5rem; }
.start-way p { color: var(--muted); }
.start-talk { text-align: center; margin-top: 22px; color: var(--muted); }
.start-count { font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); }
.start-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.start-steps li { padding: 4px 12px; border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--muted); background: var(--slab); }
.start-steps li.is-done { color: var(--brand); }
.start-steps li.is-on { background: var(--brand); color: var(--brand-ink); }
@media (max-width: 640px) { .start-steps li:not(.is-on) { display: none; } }
.start-from { margin: 0 0 18px; padding: 12px 16px; border-radius: 4px; background: var(--ok-tint); color: var(--ink); font-size: .94rem; }
.said { margin-top: 6px; font-size: .84rem; color: var(--muted); font-style: italic; }
.said span { display: block; font-style: normal; color: var(--warn); }
.choice-set { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.choice-set legend { font-weight: 650; font-size: .95rem; margin-bottom: 6px; padding: 0; }
.choice-set ul, .choice-set div { list-style: none; margin: 0; padding: 0; display: contents; }
.choice { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: center; padding: 10px 14px; border: 1px solid var(--line);
  border-radius: 4px; background: var(--panel); font-weight: 500; cursor: pointer; }
.choice input { width: 24px; height: 24px; min-height: 0; margin: 0; padding: 0; accent-color: var(--brand); }
.choice:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.start-add { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); }
.btn.small { min-height: 40px; padding: 8px 16px; font-size: .9rem; }
.start-actions { justify-content: space-between; }
.start-h2 { font-size: 1.5rem; margin: 34px 0 6px; text-align: center; }
.start-table { max-width: 760px; margin: 0 auto 28px; }
.start-local { margin-top: 10px; padding: 10px 14px; border-radius: 4px; background: var(--warn-tint); }
.constitution { max-width: 780px; margin: 0 auto 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: clamp(22px, 5vw, 48px); }
.constitution h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: 18px; }
.constitution h3 { font-size: 1.2rem; margin: 26px 0 10px; }
.constitution p { margin: 0 0 10px; }
.constitution ul { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 4px; }
.constitution-get { margin-top: 20px; }
.read-bar { height: 8px; border-radius: 999px; background: var(--slab); overflow: hidden; }
.read-bar span { display: block; height: 100%; background: var(--brand); transition: width .5s ease; }
.read-count { margin: 10px 0 14px; font-weight: 650; }
.read-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.read-list li { display: grid; gap: 2px; padding: 10px 14px; border-radius: 4px; border: 1px solid var(--line); color: var(--muted); }
.read-list li.is-now { border-color: var(--brand); color: var(--ink); }
.read-list li.is-read { color: var(--ink); background: var(--tint); }
.read-list li.is-read strong::before { content: "\2713\00a0\00a0"; color: var(--brand); }
.read-found { font-size: .9rem; color: var(--muted); }

/* While the platform is new (owner, 8 Nov 2026): a small label beside the name. */
.pilot-chip { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 4px; background: var(--gold); color: var(--gold-ink); font: 700 .72rem/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
/* Making a chama (the confirm link): a bar that keeps moving while it's made. */
.making-list { margin: 18px 0 0; padding-left: 22px; display: grid; gap: 8px; color: var(--ink); }
.read-bar.is-busy span { width: 35%; animation: making 1.4s ease-in-out infinite; }
@keyframes making { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
@media (prefers-reduced-motion: reduce) { .read-bar.is-busy span { animation: none; width: 100%; opacity: .5; } }