/* Sports Club OS: the content pages (/club-system/, /product/<area>/, /pricing/, /trust/ and the rest).
   Loaded after style.css, hero-concepts.css and claude-mobile.css, so the header, footer, type, colours,
   buttons and form fields are the home page's own. This file adds only the page pieces the home page has no
   class for. The pages are made by SportClubOSWebsite/pages-src/build.mjs: edit that, not the HTML. */

.pg main { overflow-x: clip; }

/* The yellow underline accent, as on the home page's headings. */
.pg .ul { position: relative; white-space: nowrap; }
.pg .ul:after { content: ''; position: absolute; left: 0; right: 0; bottom: -8px; background: var(--yellow); height: 5px; border-radius: 50%; transform: rotate(-1deg); }
@media (max-width: 650px) { .pg .ul:after { height: 4px; bottom: -6px; } .pg .ul { white-space: normal; } }

/* ---------- page hero ---------- */
.page-hero { background: #faf9f3; position: relative; overflow: hidden; border-bottom: 1px solid #1b1a170b; }
.page-hero .hero-orbit { width: 620px; height: 620px; right: -360px; top: -300px; box-shadow: 0 0 0 45px #f9d67b, 0 0 0 90px #fae3a8; }
.page-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; padding: 80px 0 90px; }
.page-hero-grid.solo { grid-template-columns: minmax(0, 860px); }
.page-hero h1 { font-size: clamp(44px, 5.2vw, 76px); line-height: 1.04; letter-spacing: -.06em; text-wrap: balance; }
.page-hero .lede { font-size: 19px; line-height: 1.65; max-width: 590px; margin-top: 28px; color: #55554d; }
.page-hero .actions { flex-wrap: wrap; }
.page-hero .actions .text-link { font-size: 13px; gap: 14px; }
.page-hero .eyebrow { display: flex; align-items: center; gap: 9px; }
.page-hero-visual { min-width: 0; }
.crumb { font-size: 12px; color: var(--muted); margin-bottom: 22px; }
.crumb a { text-decoration: underline; text-underline-offset: 4px; }
.crumb a:hover { color: var(--ink); }

/* ---------- a framed product screen ---------- */
.shot { margin: 0; min-width: 0; }
.shot-frame { background: #fff; border: 1px solid #ddd7c9; border-radius: 10px; overflow: hidden; box-shadow: 0 28px 60px #66502024; }
.shot-bar { height: 30px; display: flex; align-items: center; gap: 5px; padding: 0 12px; border-bottom: 1px solid #efece4; }
.shot-bar i { width: 6px; height: 6px; border-radius: 50%; background: #ddd; }
.shot img { width: 100%; }
.shot figcaption, .demo-caption { font-size: 11px; line-height: 1.5; color: #737168; margin-top: 12px; }
.shot.tilt .shot-frame { transform: perspective(1400px) rotateY(-6deg) rotateZ(-1.5deg); }
.shot.phone-shot { max-width: 300px; margin-inline: auto; }
.shot.phone-shot .shot-frame { border: 7px solid var(--ink); border-radius: 30px; }
.shot.phone-shot .shot-bar { display: none; }

/* ---------- headings for a section ---------- */
.sec-head { max-width: 760px; margin-bottom: 48px; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head h2 { text-wrap: balance; }
.sec-head > p:not(.eyebrow) { font-size: 17px; margin-top: 22px; }
.section.cream { background: var(--cream); }
.section.tight { padding: 80px 0; }
.section + .section.flush { padding-top: 0; }

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 28px 28px 26px; min-width: 0; }
.cream .card { border-color: #e6e1d4; }
.card > img.card-icon { width: 28px; height: 28px; margin-bottom: 20px; }
.card h3 { font-size: 22px; margin-bottom: 12px; text-wrap: balance; }
.card p { font-size: 14px; }
.card .text-link { margin-top: auto; padding-top: 20px; align-self: flex-start; font-size: 13px; gap: 14px; border-bottom: 0; }
.card .text-link > em { font-style: normal; border-bottom: 1px solid var(--ink); padding-bottom: 4px; }
a.card { transition: border-color .2s, transform .2s, box-shadow .2s; }
a.card:hover { border-color: #e9c14e; transform: translateY(-2px); box-shadow: 0 14px 30px #66502014; }
a.card:hover h3 { color: #976800; }
.card.planned { background: #fbfaf6; }
.chip { display: inline-block; font-size: 10px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: #8b7746; background: #f3ead0; padding: 3px 7px; border-radius: 3px; vertical-align: middle; margin-left: 6px; }
.card.feature-card { padding: 34px; }
.card.feature-card h3 { font-size: 28px; }

/* ---------- a list of short points ---------- */
.points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.points.one { grid-template-columns: 1fr; }
.points li { position: relative; padding: 18px 0 18px 40px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink); line-height: 1.55; }
.points li:before { content: ''; position: absolute; left: 0; top: 19px; width: 24px; height: 24px; border-radius: 50%; background: var(--yellow); }
.points li:after { content: ''; position: absolute; left: 8px; top: 25px; width: 8px; height: 5px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }
.points li strong { display: block; font-weight: 600; margin-bottom: 2px; }
.points li span { color: var(--muted); font-size: 14px; }

/* ---------- copy beside a picture ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.split.wide-pic { grid-template-columns: .85fr 1.15fr; }
.split.flip > :first-child { order: 2; }
.split-copy > p:not(.eyebrow) { font-size: 16px; margin-top: 20px; }
.split-copy h2 { text-wrap: balance; }
.split-copy .points { margin-top: 30px; }
.split-copy .text-link { margin-top: 28px; }

/* ---------- numbered steps ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 22px; counter-reset: step; }
.steps li { counter-increment: step; position: relative; border-top: 2px solid var(--ink); padding-top: 22px; min-width: 0; }
.steps li:before { content: '0' counter(step); display: block; font-size: 44px; font-weight: 250; line-height: 1; letter-spacing: -.06em; color: #aaa89f; margin-bottom: 18px; }
.steps h3 { font-size: 20px; margin-bottom: 10px; }
.steps p { font-size: 14px; }

/* ---------- an honest line about what is coming ---------- */
.coming { display: flex; gap: 18px; align-items: flex-start; background: #fff8e2; border: 1px solid #f0d78a; border-radius: 7px; padding: 22px 26px; max-width: 900px; }
.coming > b { flex-shrink: 0; font-size: 10px; font-weight: 650; letter-spacing: .12em; background: var(--ink); color: var(--yellow); padding: 5px 8px; border-radius: 3px; margin-top: 2px; }
.coming p { font-size: 14px; color: #4b411f; }
.coming p + p { margin-top: 6px; }

/* ---------- "works with" links ---------- */
.works { display: flex; flex-wrap: wrap; gap: 12px; }
.works a { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 30px; background: #fff; font-size: 14px; font-weight: 550; }
.works a img { width: 22px; height: 22px; }
.works a:hover { border-color: #e9c14e; background: #fffaf0; }

/* ---------- the demo player on a feature page ---------- */
.demo-box { background: #eeeadf; border-radius: 10px; padding: 26px 0 8px; min-width: 0; }
.demo-box .demo-caption { padding: 0 36px 14px; margin: 0; }
@media (max-width: 650px) { .demo-box .demo-caption { padding: 0 20px 12px; } }

/* ---------- the closing band ---------- */
.band { background: var(--yellow); padding: 100px 0; }
.band-inner { display: grid; grid-template-columns: 1.2fr .8fr; gap: 60px; align-items: center; }
.band h2 { font-size: clamp(36px, 4.2vw, 61px); text-wrap: balance; }
.band p { color: #4b411f; font-size: 18px; margin-top: 22px; max-width: 560px; }
.band-act { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.band-act .button { min-width: 280px; }
.band-act small { font-size: 13px; color: #4b411f; }
.band-act .text-link { font-size: 13px; }

/* ---------- questions ---------- */
.qa-list { max-width: 900px; }
.qa-list details > p, .qa-list details > div { font-size: 15px; padding: 0 40px 24px 0; }
.qa-list details > div p { font-size: 15px; }
.qa-list details > div p + p { margin-top: 10px; }
.qa-list summary { font-size: 17px; }
.qa-group + .qa-group { margin-top: 64px; }
.qa-group > h2 { font-size: clamp(28px, 3vw, 38px); margin-bottom: 24px; }
.faqs a, .prose a, .coming a, .card p a, .split-copy p a { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- reading pages (Trust Centre, privacy, terms, checklists) ---------- */
.read-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 72px; align-items: start; }
.toc { position: sticky; top: 112px; font-size: 13px; }
.toc p { font-size: 11px; font-weight: 650; letter-spacing: .14em; color: var(--ink); margin-bottom: 14px; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 7px 0 7px 16px; color: var(--muted); line-height: 1.4; }
.toc a:hover { color: var(--ink); }
.toc a { position: relative; transition: color .2s; }
/* Scroll-spy (pages.js, aside.toc[data-toc-spy]): the section being read. */
.toc a.is-current { color: var(--ink); font-weight: 600; }
.toc a.is-current::before { content: ''; position: absolute; left: -1px; top: 5px; bottom: 5px; width: 3px; background: var(--yellow); border-radius: 2px; }
.toc[data-toc-spy] ol { max-height: calc(100vh - 190px); overflow-y: auto; overscroll-behavior: contain; }
@media (prefers-reduced-motion: reduce) { .toc a { transition: none; } }
/* Scroll-spy, where the list is no longer a side column (1150px and under): pages.js turns the list into a bar that
   sticks under the site's header (current section + chevron) and opens the full list as a panel dropping from it.
   Without the script none of this applies and the static list shows as before. */
.toc-bar-btn { display: none; }
@media (max-width: 1150px) {
  .toc.toc-js { position: sticky; top: var(--toc-top, 70px); z-index: 15; margin-left: calc(-1 * var(--toc-gut, 0px)); margin-right: calc(-1 * var(--toc-gut, 0px)); padding: 0 var(--toc-gut, 0px); background: #faf9f3; border-bottom: 1px solid var(--line); }
  .toc.toc-js > p { display: none; }
  .toc.toc-js .toc-bar-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0; border: 0; background: transparent; text-align: left; font-size: 14px; color: var(--ink); }
  .toc-bar-btn small { flex-shrink: 0; font-size: 10px; font-weight: 650; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
  .toc-bar-btn b { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .toc-bar-btn i { flex-shrink: 0; width: 8px; height: 8px; margin: 0 4px 3px 0; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); transition: transform .2s; }
  .toc-bar-btn[aria-expanded="true"] i { transform: rotate(-135deg); margin-bottom: -3px; }
  .toc.toc-js ol { display: none; position: absolute; left: 0; right: 0; top: 100%; columns: 1; max-height: calc(100vh - var(--toc-top, 70px) - 48px - 16px); max-height: calc(100dvh - var(--toc-top, 70px) - 48px - 16px); overflow-y: auto; padding: 4px var(--toc-gut, 0px) 8px; background: #faf9f3; border-left: 0; border-bottom: 1px solid var(--line); box-shadow: 0 10px 22px -14px #1b1a1740; }
  .toc.toc-js.is-open ol { display: block; }
  .toc.toc-js ol a { display: flex; align-items: center; min-height: 44px; padding: 6px 16px; font-size: 15px; }
  .toc.toc-js ol a.is-current::before { left: 0; }
}
@media (prefers-reduced-motion: reduce) { .toc-bar-btn i { transition: none; } }
.prose { max-width: 780px; }
.prose > section + section { margin-top: 64px; padding-top: 56px; border-top: 1px solid var(--line); }
.prose h2 { font-size: clamp(28px, 3vw, 40px); margin-bottom: 20px; scroll-margin-top: 110px; }
.prose h3 { font-size: 20px; margin: 30px 0 10px; }
.prose p { font-size: 16px; line-height: 1.7; }
.prose p + p { margin-top: 14px; }
.prose ul, .prose ol { margin: 14px 0 0; padding-left: 22px; color: var(--muted); }
.prose li { margin: 8px 0; line-height: 1.65; }
.prose li strong, .prose p strong { color: var(--ink); font-weight: 600; }
.prose .points { margin-top: 18px; }
.prose .lead { font-size: 19px; color: #55554d; }
.prose table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 14px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-top: 1px solid var(--line); }
.prose th { font-weight: 600; color: var(--ink); }
.prose td { color: var(--muted); }
.table-scroll { overflow-x: auto; }
.updated { font-size: 13px; color: var(--muted); margin-top: 24px; }
.callout { background: var(--cream); border-radius: 7px; padding: 22px 26px; margin-top: 22px; }
.callout p { font-size: 15px; }

/* The checklists and templates carried over from Marketing/site (same words). */
.read ul.check { list-style: none; padding: 0; margin: 14px 0 0; }
.read ul.check li { position: relative; padding: 13px 0 13px 38px; border-top: 1px solid var(--line); color: var(--ink); font-size: 15px; }
.read ul.check li:before { content: ''; position: absolute; left: 0; top: 13px; width: 20px; height: 20px; border: 1.5px solid var(--ink); border-radius: 4px; }
.read h2 { margin-top: 56px; }
.read h2:first-child { margin-top: 0; }
.read .aside { background: #fff8e2; border-radius: 6px; padding: 18px 22px; margin-top: 20px; font-size: 14px; color: #4b411f; }
.read .sheet { overflow-x: auto; margin-top: 18px; }
.read .sheet table { min-width: 560px; }
.read .sheet th, .read .sheet td { border: 1px solid #cfccc2; padding: 14px 10px; height: 46px; }
.read .sheet th { background: var(--cream); }

/* ---------- forms (the fields are style.css's) ---------- */
.form-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: start; }
.form-card { background: #fff; border-radius: 10px; padding: 36px; box-shadow: 0 20px 50px #5a46181a; min-width: 0; }
.cream .form-card, .band .form-card { box-shadow: none; }
.form-card h2 { font-size: 30px; margin-bottom: 22px; }
.form-card form > .button { width: 100%; margin-top: 6px; }
.form-card .form-note { color: var(--muted); font-size: 12px; }
.form-card .form-note a { text-decoration: underline; text-underline-offset: 3px; }
.form-result { padding: 18px 20px; background: #fff8e7; border-radius: 6px; margin-top: 18px; }
.form-result p { font-size: 13px; margin: 8px 0; }
.form-result textarea { font-size: 13px; }
.form-result .text-link { font-size: 12px; margin-top: 8px; }
.fallback { font-size: 14px; margin-top: 16px; }
.fallback a { text-decoration: underline; text-underline-offset: 4px; font-weight: 550; color: var(--ink); }
.optional { font-weight: 400; color: var(--muted); }

/* ---------- pricing ---------- */
.pg .pricing-grid { margin-top: 0; }
.included { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; list-style: none; margin: 0; padding: 0; }
.included li { padding: 16px 0 16px 30px; border-top: 1px solid var(--line); position: relative; color: var(--ink); font-size: 15px; }
.included li:before { content: '✓'; position: absolute; left: 0; color: #976800; font-weight: 700; }

/* ---------- a day at the club (How it works) ---------- */
.day-story .longer { margin-top: 14px; }
.day-story .longer + .longer { margin-top: 10px; }
.pg .day-story p { max-width: 360px; }

/* ---------- the trust centre's summary tiles ---------- */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts > div { padding: 26px 24px 26px 0; min-width: 0; }
.facts > div + div { border-left: 1px solid var(--line); padding-left: 24px; }
.facts b { display: block; font-size: 20px; letter-spacing: -.03em; line-height: 1.25; margin-bottom: 8px; color: var(--ink); }
.facts span { font-size: 13px; color: var(--muted); line-height: 1.5; display: block; }

/* ---------- printing (checklists, templates, legal pages) ---------- */
@media print {
  header, footer, .band, .no-print, .page-hero .actions, .toc, .hero-orbit { display: none !important; }
  .page-hero { background: none; border: 0; }
  .page-hero-grid { padding: 0 0 20px; }
  .section { padding: 10px 0; }
  .read-layout { display: block; }
  body { font-size: 12pt; }
}


/* ---------- a sport page's benefits (pages-src/build.mjs, sportBenefits): an index of the benefits, then a panel for each,
   its words on one side and a collage of real screens on the other (the main screen, a phone and a detail), sides alternating ---------- */
.bf-section > .wrap { border-top: 1px solid var(--line); padding-top: 100px; }
.bf-section { padding-top: 0; }
.bf-section .section-top > p { max-width: 380px; }
.bf-index { list-style: none; margin: 0 0 36px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; }
.bf-index a { display: flex; align-items: baseline; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.bf-index a span { flex: none; width: 22px; font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: .04em; }
.bf-index a:hover b, .bf-index a:focus-visible b { text-decoration: underline; text-underline-offset: 5px; }
.bf-index b { font-weight: 600; }
.bf-list { display: grid; gap: 22px; }
.bf { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border-radius: 14px; background: var(--cream); border: 1px solid #ebe7dc; overflow: hidden; scroll-margin-top: 110px; }
.bf.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.bf.flip > .bf-copy { order: 2; }
.bf-copy { align-self: center; padding: 52px 40px 52px 52px; }
.bf.flip > .bf-copy { padding: 52px 52px 52px 40px; }
.bf-num { display: block; font-size: 44px; font-weight: 250; line-height: 1; letter-spacing: -.06em; color: #aaa89f; margin-bottom: 18px; }
.bf-copy h3 { font-size: 28px; line-height: 1.15; margin-bottom: 16px; text-wrap: balance; }
.bf-lead { font-size: 16px; line-height: 1.6; color: #3d3b34; margin-bottom: 20px; }
.bf-copy .points li { padding: 11px 0 11px 32px; font-size: 14px; }
.bf-copy .points li:before { top: 13px; width: 20px; height: 20px; }
.bf-copy .points li:after { left: 7px; top: 19px; width: 7px; height: 4px; }
.bf-copy .points li span { font-size: 13.5px; }
.bf-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 24px; }
.bf-links .text-link { margin: 0; }
.bf-copy .coming { margin-top: 20px; padding: 16px 18px; }
.bf-copy .coming p { font-size: 13.5px; }
/* The screens: a desktop screen, a detail of it and a phone, together. On a wide screen each is placed for its own benefit
   by the page's own CSS, from pages-src/sport-layouts.json (the layout editor sets it); narrower, by the rules below. */
.bf-art { position: relative; min-height: 580px; }
.bf-art img { display: block; width: 100%; height: auto; }
.bf-main, .bf-card { position: absolute; margin: 0; overflow: hidden; background: #fff; border-radius: 10px; box-shadow: 0 0 0 1px rgba(27, 26, 23, .08), 0 18px 44px rgba(27, 26, 23, .14); }
.bf-card { border-radius: 8px; box-shadow: 0 0 0 1px rgba(27, 26, 23, .08), 0 14px 34px rgba(27, 26, 23, .24); }
/* The phone: a thin bezel and a small corner, so nothing at the screen's corners is cut off. */
.bf-phone { position: absolute; border: 3px solid var(--ink); border-radius: 15px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 22px 46px rgba(27, 26, 23, .3); }
/* Tones: the dark panel and the yellow one. */
.bf-dark { background: var(--ink); border-color: var(--ink); }
.bf-dark h3 { color: #fff; }
.bf-dark .bf-num { color: #6b6960; }
.bf-dark .bf-lead { color: #e6e3da; }
.bf-dark .points li { color: #fff; border-top-color: rgba(255, 255, 255, .14); }
.bf-dark .points li span { color: #c4c1b6; }
.bf-dark .text-link { color: #fff; border-bottom-color: #fff; }
.bf-sun { background: #f8cb55; border-color: #efbd3c; }
.bf-sun .bf-num { color: #a0801f; }
.bf-sun .bf-lead, .bf-sun .points li span { color: #4b411f; }
.bf-sun .points li { border-top-color: rgba(27, 26, 23, .16); }
.bf-sun .points li:before { background: var(--ink); }
.bf-sun .points li:after { border-color: var(--yellow); }
.bf-section .who-tail { margin-top: 22px; }
@media (max-width: 1150px) {
  .bf-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bf-copy, .bf.flip > .bf-copy { padding: 44px 32px; }
  .bf-copy h3 { font-size: 25px; }
}
@media (max-width: 900px) {
  .bf, .bf.flip, .bf-coaching { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .bf.flip > .bf-copy { order: 0; }
  .bf-copy, .bf.flip > .bf-copy { padding: 36px 32px 8px; }
  .bf .bf-art { min-height: 440px; }
  .bf .bf-art .bf-main { left: 6%; right: auto; top: 26px; width: 100%; }
  .bf .bf-art .bf-card, .bf .bf-art .bf-phone-more { display: none; }
  .bf .bf-art .bf-phone { left: auto; right: 5%; top: auto; bottom: -110px; width: 30%; max-width: 200px; }
  /* A panel with no phone: only as tall as its screen, so no gap is left where a phone would sit. */
  .bf .bf-art:not(:has(.bf-phone)) { min-height: 0; padding: 26px 0 36px; }
  .bf .bf-art:not(:has(.bf-phone)) .bf-main { position: relative; top: 0; }
}
@media (max-width: 650px) {
  .bf-index { grid-template-columns: minmax(0, 1fr); }
  .bf-index a { padding: 13px 0; }
  .bf-section > .wrap { padding-top: 65px; }
  .bf-copy, .bf.flip > .bf-copy { padding: 28px 22px 4px; }
  .bf-num { font-size: 36px; margin-bottom: 14px; }
  .bf-copy h3 { font-size: 23px; }
  .bf-lead { font-size: 15px; }
  .bf .bf-art .bf-main { left: 5%; top: 20px; width: 108%; }
  .bf .bf-art { min-height: 400px; }
  .bf .bf-art .bf-phone { right: 4%; bottom: -90px; width: 36%; }
}

/* ---------- widths ---------- */
@media (max-width: 1150px) {
  .page-hero-grid { gap: 36px; padding: 64px 0 72px; }
  .cards.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { gap: 44px; }
  .read-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 44px; }
  .form-layout { gap: 44px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .facts > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .page-hero-grid, .split, .split.wide-pic, .band-inner, .form-layout { grid-template-columns: minmax(0, 1fr); }
  .split.flip > :first-child { order: 0; }
  .page-hero-visual { max-width: 640px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .read-layout { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; }
  .toc ol { columns: 2; column-gap: 24px; }
  .included { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band { padding: 80px 0; }
}
@media (max-width: 650px) {
  .page-hero-grid { padding: 44px 0 56px; gap: 34px; }
  .page-hero h1 { font-size: clamp(38px, 11.5vw, 54px); }
  .page-hero .lede { font-size: 17px; margin-top: 22px; }
  .page-hero .hero-orbit { width: 380px; height: 380px; right: -250px; top: -190px; box-shadow: 0 0 0 30px #f9d67b, 0 0 0 60px #fae3a8; }
  .cards, .cards.two, .cards.four, .points, .steps, .included { grid-template-columns: minmax(0, 1fr); }
  .card, .card.feature-card { padding: 24px 22px; }
  .card h3, .card.feature-card h3 { font-size: 22px; }
  .sec-head { margin-bottom: 32px; }
  .sec-head > p:not(.eyebrow) { font-size: 16px; }
  .section.tight { padding: 60px 0; }
  .band { padding: 64px 0; }
  .band p { font-size: 16px; }
  .band-act, .band-act .button { width: 100%; min-width: 0; }
  .coming { flex-direction: column; gap: 10px; padding: 20px; }
  .form-card { padding: 24px 20px; }
  .toc ol { columns: 1; }
  .prose p { font-size: 15px; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts > div, .facts > div + div { border-left: 0; padding-left: 0; }
  .facts > div + div { border-top: 1px solid var(--line); }
  .qa-list details > p, .qa-list details > div { padding-right: 0; }
  .qa-list summary { font-size: 15px; }
  .works a { width: 100%; }
  .shot.tilt .shot-frame { transform: none; }
}
@media (prefers-reduced-motion: reduce) { a.card { transition: none; } a.card:hover { transform: none; } }

/* Headings beside copy are a step smaller than a section's own heading. */
.split-copy h2, .split > div > h2 { font-size: clamp(32px, 3.3vw, 48px); }
.walkthrough-section .steps li:before { color: #8a6d1c; }

/* ================= L2: the club system, every feature with its demo ================= */
/* Landing on #<area> or #<area>-<part> clears the site header (97px tall here, 81px on a phone; style.css's
   scroll-padding-top of 95px / 75px falls a little short, and these margins add to it). */
.pg .l2-feature { padding: 96px 0; scroll-margin-top: 8px; }
.l2-anchors { position: relative; height: 0; }
.l2-anchors [id] { position: absolute; left: 0; top: -26px; width: 1px; height: 1px; scroll-margin-top: 8px; }
@media (max-width: 650px) { .pg .l2-feature { scroll-margin-top: 10px; } .l2-anchors [id] { scroll-margin-top: 10px; } }
.l2-head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: end; margin-bottom: 36px; }
.l2-head h2 { font-size: clamp(34px, 3.8vw, 54px); text-wrap: balance; }
.l2-head p:not(.eyebrow) { font-size: 16px; max-width: 520px; }
.l2-head .text-link { margin-top: 20px; }
.l2-tag { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.l2-tag img { width: 22px; height: 22px; }
.l2-feature .demo-box { background: #eeeadf; }
.l2-feature.cream .demo-box { background: #e9e4d6; }
/* The part being shown, one line above the player's own row of parts (which is the one control for choosing). */
.l2-now { margin: 0 36px 14px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.l2-now b { color: var(--ink); font-weight: 600; margin-right: 4px; }
.l2-more { font-size: 15px; }
.l2-still { display: grid; grid-template-columns: 1.6fr .6fr; gap: 40px; align-items: start; }
.l2-still-pic { position: relative; min-width: 0; }
.soon { position: absolute; z-index: 2; top: 44px; left: 14px; font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; background: var(--ink); color: var(--yellow); padding: 7px 11px; border-radius: 4px; }
.l2-items { list-style: none; margin: 0; padding: 0; }
.l2-items li { padding: 14px 0 14px 28px; border-top: 1px solid var(--line); position: relative; font-size: 15px; font-weight: 550; }
.l2-items li:before { content: '✓'; position: absolute; left: 0; color: #976800; }
/* Explore features: quick links to every section of the page, under the hero. The tiles are the menu's own
   (.mega-group in a .mega-groups-grid: three columns, two from 1100px, one from 650px, in style.css), a size up. */
.pg .l2-explore { padding: 64px 0 72px; border-bottom: 1px solid var(--line); scroll-margin-top: 8px; }
.l2-explore-head { margin-bottom: 22px; }
.l2-explore-head .eyebrow { margin-bottom: 14px; }
.l2-explore-head h2 { font-size: clamp(30px, 3.2vw, 44px); }
.l2-explore .mega-groups-grid { gap: 0 40px; }
.l2-explore .mega-group { gap: 14px; padding: 20px 0 22px; }
.l2-explore .mega-group > img { width: 30px; height: 30px; margin-top: 1px; }
.l2-explore .mega-group strong { font-size: 17px; line-height: 1.4; }
.l2-explore .mega-group small { font-size: 13px; line-height: 1.7; margin-top: 4px; color: #7a776e; }
.l2-explore .mega-group > b { font-size: 18px; align-self: center; }
@media (max-width: 1100px) { .l2-explore .mega-groups-grid { gap: 0 28px; } }
@media (max-width: 650px) {
  .pg .l2-explore { padding: 44px 0 48px; scroll-margin-top: 10px; }
  .l2-explore .mega-group { min-height: 0; padding: 16px 0 17px; }
  .l2-explore .mega-group strong { font-size: 16px; }
  .l2-explore .mega-group small { font-size: 13px; }
}

/* ================= L3: a feature's full page ================= */
.walk-slot { display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: center; border: 2px dashed #d9cfae; border-radius: 10px; padding: 36px 40px; background: #fffdf6; }
.walk-slot h2 { font-size: clamp(26px, 2.6vw, 36px); margin-bottom: 12px; text-wrap: balance; }
.walk-slot p:not(.eyebrow) { font-size: 15px; max-width: 620px; }
.doc .prose { max-width: 900px; }
.caps { margin: 6px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.caps > div { padding: 16px 0; border-top: 1px solid var(--line); }
.caps dt { font-weight: 600; color: var(--ink); font-size: 15px; margin-bottom: 4px; }
.caps dd { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.6; }
.doc-steps { list-style: none; counter-reset: s; padding: 0 !important; }
.doc-steps li { counter-increment: s; position: relative; padding: 12px 0 12px 48px !important; margin: 0 !important; border-top: 1px solid var(--line); }
.doc-steps li:before { content: counter(s); position: absolute; left: 0; top: 11px; width: 30px; height: 30px; border-radius: 50%; background: var(--yellow); color: var(--ink); font-weight: 650; font-size: 14px; display: grid; place-items: center; }
.doc-steps b { color: var(--ink); font-weight: 600; }
.doc-shots { display: grid; gap: 40px; margin-top: 22px; }
.doc-phones { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 260px)); gap: 28px; margin-top: 40px; }
.doc-phones .shot.phone-shot { max-width: none; margin: 0; }
.doc .prose .faqs { margin-top: 8px; }
.doc .prose .works { margin-top: 8px; }

@media (max-width: 900px) {
  .l2-head, .l2-still, .walk-slot { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 650px) {
  .pg .l2-feature { padding: 64px 0; }
  .l2-now { margin: 0 20px 10px; font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .caps { grid-template-columns: minmax(0, 1fr); }
  .walk-slot { padding: 24px 20px; }
  .doc-phones { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .doc-phones .shot.phone-shot { max-width: 280px; }
}
/* A demo's room is kept before its player is made, so the page does not move as players load. */
[data-demo]:not(.cd) { aspect-ratio: 900 / 640; }
@media (max-width: 650px) { [data-demo]:not(.cd) { aspect-ratio: 340 / 620; } }
/* L2 headings: the feature's name large with its icon, its tagline small underneath (Adam, 17 October 2026). */
.pg .l2-name { display: flex; align-items: center; gap: 16px; font-size: clamp(32px, 3.6vw, 52px); text-wrap: balance; }
.l2-name > img { width: clamp(30px, 3vw, 42px); height: auto; flex-shrink: 0; }
.l2-name .chip { font-size: 11px; letter-spacing: .08em; vertical-align: middle; }
.l2-tagline { margin-top: 14px; font-size: 18px !important; font-weight: 550; color: #55554d; letter-spacing: -.01em; }
@media (max-width: 650px) { .pg .l2-name { gap: 12px; font-size: clamp(28px, 8.4vw, 34px); } .l2-tagline { font-size: 16px !important; margin-top: 10px; } }

/* ================= About us ================= */
/* Sections reached by an anchor (/about/#team) land just under the header (97px; style.css pads 95px). */
.pg main > section[id] { scroll-margin-top: 8px; }
@media (max-width: 650px) { .pg main > section[id] { scroll-margin-top: 10px; } }
.team-split { align-items: start; }
.team-grid { display: grid; gap: 22px; min-width: 0; }
.person { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 28px; align-items: start; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 30px; }
.person-photo { width: 120px; height: 120px; border-radius: 50%; background: var(--yellow); display: grid; place-items: center; overflow: hidden; }
.person-photo span { font-size: 40px; font-weight: 600; letter-spacing: -.04em; color: var(--ink); }
.person-photo img { width: 100%; height: 100%; object-fit: cover; }
.person h3 { font-size: 26px; }
.person-role { font-size: 13px !important; font-weight: 600; color: #8b7746 !important; letter-spacing: .02em; margin-top: 6px; }
.person p:not(.person-role) { font-size: 15px; margin-top: 14px; }
.person .text-link { margin-top: 20px; font-size: 13px; }
.story-split { align-items: start; }
.story-split .shot img { width: 100%; }
@media (max-width: 650px) {
  .person { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 22px; }
  .person-photo { width: 88px; height: 88px; }
  .person-photo span { font-size: 30px; }
  .person h3 { font-size: 23px; }
}

/* ================= /for/members/ and /for/coaches-and-conveners/: one screen on a computer and a phone ================= */
/* .duo: a browser frame and a phone frame side by side, showing the same screen. The phone column is 0.289 of the
   desktop's, so a 1720 x 1075 desktop picture and a 780 x 1688 phone picture come out the same height. On a phone only
   the phone picture shows. .duo.flip puts the phone first. .duo.hero-duo overlaps the two, for a page hero. */
.duo { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .289fr); gap: 26px; align-items: end; }
.duo.flip { grid-template-columns: minmax(0, .289fr) minmax(0, 1fr); }
.duo.flip .duo-desk { order: 2; }
.duo .shot.phone-shot { max-width: none; margin: 0; }
.duo .shot.phone-shot .shot-frame { border-width: 6px; border-radius: 26px; }
.duo img { display: block; width: 100%; height: auto; }
.duo figcaption { grid-column: 1 / -1; order: 3; font-size: 11px; line-height: 1.5; color: #737168; margin-top: -8px; }
.duo-wrap { max-width: 1120px; margin: 44px auto 0; }
.duo.hero-duo { display: block; position: relative; padding-bottom: 7%; }
@media (min-width: 901px) { .duo.hero-duo { width: 116%; } }
.duo.hero-duo .duo-desk { width: 84%; }
.duo.hero-duo .duo-phone { position: absolute; right: 0; bottom: 0; width: 27%; }
.duo.hero-duo .duo-phone .shot-frame { box-shadow: 0 28px 60px #6650203d; }
.duo.hero-duo figcaption { margin-top: 14px; }
.who-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.who-head h2 { font-size: clamp(32px, 3.3vw, 48px); text-wrap: balance; }
.who-head > div > p:not(.eyebrow) { font-size: 16px; margin-top: 18px; }
.who-head .points { margin-top: 0; }
.who-head .text-link { margin-top: 22px; }
.who-still { max-width: 1040px; margin: 44px auto 0; }
.who-still img { display: block; width: 100%; height: auto; border-radius: 12px; }
.who-still figcaption { font-size: 11px; line-height: 1.5; color: #737168; margin-top: 12px; }
.who-jump { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.who-jump > div { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 30px; }
.who-jump h3 { font-size: 26px; }
.who-jump p { font-size: 15px; margin-top: 12px; }
.who-jump .text-link { margin-top: 20px; font-size: 13px; }
.who-part { padding-bottom: 0; }
.who-part h2 { font-size: clamp(40px, 4.4vw, 60px); }
@media (max-width: 900px) {
  .who-head { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .duo { gap: 16px; }
}
@media (max-width: 650px) {
  .duo, .duo.flip { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .duo .duo-desk { display: none; }
  .duo .shot.duo-phone { width: 100%; max-width: 260px; }
  .duo figcaption { margin-top: 4px; text-align: center; }
  .duo.hero-duo { padding-bottom: 0; display: grid; }
  .duo.hero-duo .shot.duo-phone { position: static; width: 100%; max-width: 240px; }
  .duo-wrap, .who-still { margin-top: 30px; }
  .who-jump { grid-template-columns: minmax(0, 1fr); }
  .who-jump > div { padding: 22px; }
}
.who-head > div:last-child > :first-child { margin-top: 0; }