/* ════════════════════════════════════════════════════════════════════════════
   Club Sporting Clays — marketing site
   Colours: deep field green, clay orange, warm off-white. Text contrast is at
   least 4.5:1 throughout (headings and buttons included).
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  --green: #1f4d36; --green-2: #2f6f4f; --green-3: #e7f0ea;
  --clay: #c4512b; --clay-2: #e2683c; --clay-3: #fdeee6;
  --ink: #1b2620; --ink-2: #44524a; --line: #dfe5df; --bg: #fbfaf6; --card: #fff;
  --radius: 14px; --shadow: 0 2px 14px rgba(31, 77, 54, 0.08);
  --max: 1120px;
}
*, *::before, *::after { box-sizing: border-box; }
/* Size text in rem so it follows the phone's own text-size setting (Android font size, browser text size). */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { margin: 0; font-size: 1.0625rem; line-height: 1.6; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--ink); background: var(--bg); }
img, svg { max-width: 100%; height: auto; }
a { color: var(--green-2); text-underline-offset: 2px; }
a:hover { color: var(--green); }
:focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { line-height: 1.2; color: var(--green); margin: 0 0 0.5em; }
h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -0.01em; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 22px; }
.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; background: var(--green); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 100; }
.skip:focus { top: 12px; color: #fff; }
.mt { margin-top: 14px; }
.todo { background: #fff4c2; outline: 1px dashed #b38600; padding: 0 4px; border-radius: 4px; }

/* ── Header ─────────────────────────────────────────────── */
.site-head { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--green); font-weight: 800; font-size: 1.15rem; }
.brand img { width: 40px; height: 40px; }
.nav ul { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; align-items: center; }
.nav a { display: block; padding: 8px 12px; border-radius: 8px; text-decoration: none; color: var(--ink-2); font-weight: 600; }
.nav a:hover { background: var(--green-3); color: var(--green); }
.nav a[aria-current="page"] { color: var(--green); background: var(--green-3); }
.nav .btn { margin-left: 6px; }
.nav-toggle { display: none; background: none; border: 1.5px solid var(--line); border-radius: 8px; padding: 8px 12px; font: inherit; font-weight: 700; color: var(--green); cursor: pointer; }

/* ── Buttons ────────────────────────────────────────────── */
.btn { display: inline-block; padding: 12px 22px; border-radius: 10px; font-weight: 700; text-decoration: none; border: 2px solid transparent; cursor: pointer; font: inherit; font-weight: 700; line-height: 1.2; }
.btn-primary { background: var(--clay); color: #fff; }
.btn-primary:hover { background: #a9431f; color: #fff; }
.btn-ghost { background: transparent; color: var(--green); border-color: var(--green-2); }
.btn-ghost:hover { background: var(--green-3); }
.nav .btn-primary { color: #fff; padding: 9px 16px; }

/* ── Hero ───────────────────────────────────────────────── */
.hero { background: linear-gradient(180deg, #fff 0%, var(--green-3) 100%); padding: 64px 0 56px; }
.hero .wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; align-items: center; }
.eyebrow { display: inline-block; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--clay); margin-bottom: 10px; }
.lede { font-size: 1.2rem; color: var(--ink-2); max-width: 36em; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.hero .mock, .hero .app { margin: 0; }   /* drop the default figure margins so the card fills its column */
.hero-side { min-width: 0; }             /* let the column shrink on phones instead of growing to fit the score table */
.hero-demo { display: flex; justify-content: center; margin-top: 18px; }   /* Try the demo, centred under the card */
.hero-note { font-size: 0.92rem; color: var(--ink-2); margin-top: 14px; }

/* A drawn "screen" of the scoring page (no screenshots of real members) */
.mock { background: #fff; border-radius: 16px; box-shadow: 0 12px 40px rgba(31, 77, 54, 0.18); overflow: hidden; border: 1px solid var(--line); }
.mock-bar { background: var(--green); color: #fff; padding: 10px 16px; font-weight: 700; font-size: 0.95rem; display: flex; justify-content: space-between; }
.mock-body { padding: 16px; }
.mock-row { display: grid; grid-template-columns: 92px 1fr 40px; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.mock-row:last-child { border-bottom: 0; }
.mock-row strong { color: var(--green); text-align: right; }
.birds { display: flex; gap: 4px; flex-wrap: wrap; }
.bird { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid #c9d3cc; background: #f3f5f2; }
.bird.hit { background: #16a34a; border-color: #16a34a; }
.bird.miss { background: #dc2626; border-color: #dc2626; }
.mock-foot { font-size: 0.82rem; color: var(--ink-2); padding: 10px 16px; background: #f6f8f5; }

/* ── Sections ───────────────────────────────────────────── */
section.band { padding: 64px 0; }
section.band.alt { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 44em; margin-bottom: 30px; }
.section-head p { color: var(--ink-2); font-size: 1.08rem; }
.grid { display: grid; gap: 18px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 22px 18px; border: 1px solid var(--line); }
.card h3 { display: flex; align-items: center; gap: 10px; }
.card p { color: var(--ink-2); }
.icon { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: var(--clay-3); color: var(--clay); display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.card .more { font-weight: 700; text-decoration: none; }
.ticks { list-style: none; padding: 0; margin: 0 0 0.6em; }
.ticks li { position: relative; padding-left: 26px; margin: 6px 0; color: var(--ink-2); }
.ticks li::before { content: ""; position: absolute; left: 4px; top: 0.55em; width: 11px; height: 6px; border-left: 2.5px solid var(--green-2); border-bottom: 2.5px solid var(--green-2); transform: rotate(-45deg); }
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.steps li { counter-increment: step; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.steps li::before { content: counter(step); display: inline-flex; width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: #fff; font-weight: 800; align-items: center; justify-content: center; margin-bottom: 10px; }
.steps h3 { margin-bottom: 6px; }
.steps p { color: var(--ink-2); margin: 0; }

/* Feature page: alternating sections */
.feature { display: grid; grid-template-columns: 1fr 1.2fr; gap: 36px; align-items: start; padding: 42px 0; border-bottom: 1px solid var(--line); }
.feature:last-of-type { border-bottom: 0; }
.feature > .ticks { align-self: center; }   /* list sits halfway down beside the text and card */
.feature .tag { display: inline-block; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--clay); margin-bottom: 6px; }
.feature-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.feature-nav a { padding: 7px 14px; border-radius: 99px; border: 1.5px solid var(--line); background: #fff; text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.feature-nav a:hover { border-color: var(--green-2); }

/* Feature page: mocked app cards, styled after the club site's screens (made-up data) */
.app { margin: 20px 0 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 28px rgba(31, 77, 54, 0.12); overflow: hidden; font-size: 0.82rem; color: #1e293b; }
.app-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 2px solid #eef0dd; font-weight: 700; color: #2f6f4f; font-size: 0.9rem; }
.app-head .app-side { margin-left: auto; font-weight: 600; font-size: 0.75rem; color: #64748b; }
.app-body { padding: 12px 14px; }
.app-foot { padding: 8px 14px; background: #f5f6ea; font-size: 0.75rem; color: #475569; }
.app table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.app th { background: #2f6f4f; color: #fff; font-weight: 700; padding: 6px 6px; text-align: center; white-space: nowrap; }
.app th:first-child, .app td:first-child { text-align: left; }
.app td { padding: 6px; border-bottom: 1px solid #e2e8f0; text-align: center; white-space: nowrap; }
.app tr:last-child td { border-bottom: 0; }
.app .avg { background: #f5f6ea; font-weight: 700; }
.app .top { background: #dcfce7; color: #15803d; font-weight: 700; }
.app .num { text-align: right; }
.app .muted { color: #64748b; }
.pill { display: inline-block; font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.pill-ok { background: #dcfce7; color: #15803d; }
.pill-warn { background: #fef3c7; color: #92400e; }
.pill-bad { background: #fee2e2; color: #b91c1c; }
.pill-info { background: #dbeafe; color: #1d4ed8; }
.pill-group { background: #e0f2fe; color: #075985; }
.app-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid #eef0dd; }
.app-row:last-child { border-bottom: 0; }
.app-row-head { border-bottom-width: 2px; margin-bottom: 4px; }
.app-row-gap { margin-top: 8px; }
.app td.wrap-cell, .app td:first-child { white-space: normal; }
.app-row .k { color: #64748b; }
.app-row .v { font-weight: 600; text-align: right; }
.v.ok { color: #16a34a; } .v.warn { color: #d97706; } .v.bad { color: #dc2626; }

/* Live scoring */
.app-tabs { display: flex; gap: 4px; padding: 8px 10px 0; background: #f5f6ea; border-bottom: 1.5px solid #dfe3cc; overflow: hidden; }
.app-tab { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: #eef0dd; border: 1.5px solid #dfe3cc; border-bottom: 0; border-top: 3px solid transparent; border-radius: 8px 8px 0 0; font-weight: 600; color: #475569; white-space: nowrap; margin-bottom: -1.5px; }
.app-tab.on { background: #fff; border-top-color: #2f6f4f; color: #2f6f4f; }
.app-tab b { font-weight: 700; color: #64748b; }
.stand { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr) 2.6rem; align-items: center; gap: 6px; padding: 4px 0; }
.stand .lbl { font-size: 0.72rem; font-weight: 600; color: #64748b; }
.stand .tot { font-size: 0.72rem; font-weight: 700; color: #475569; text-align: right; }
.dots { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; max-width: 15rem; }
.dot { width: 100%; max-width: 1.3rem; height: auto; aspect-ratio: 1; border-radius: 50%; border: 2px solid #cbd5e1; background: #fff; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 0.68rem; font-weight: 800; line-height: 1; }
.dot.hit { background: #16a34a; border-color: #16a34a; }
.dot.miss { background: #dc2626; border-color: #dc2626; }
.shooter-total { font-size: 1rem; font-weight: 800; color: #2f6f4f; margin-left: auto; }

/* Live standings (leaderboard) */
.app .lb { list-style: none; margin: 0; padding: 0; }
.lb-row { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid #eef0dd; }
.lb-row:last-child { border-bottom: 0; }
.lb-pos { font-weight: 600; color: #64748b; }
.lb-who { display: flex; flex-direction: column; min-width: 0; }
.lb-name { font-weight: 600; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-detail { font-size: 0.72rem; color: #64748b; }
.lb-val { font-size: 0.95rem; font-weight: 700; color: #1e293b; }
.lb-first .lb-pos, .lb-first .lb-name, .lb-first .lb-val { color: #15803d; }

/* Calendar */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; font-size: 0.7rem; }
.cal .dow { background: #2f6f4f; color: #fff; font-weight: 700; text-align: center; padding: 3px 0; border-radius: 3px; }
.cal .d { min-height: 2.6rem; background: #fff; border: 1px solid #e7e8cf; border-radius: 3px; padding: 2px 3px; color: #475569; overflow: hidden; }
.cal .d.out { background: #f4f5e9; color: #a0a8a3; }
.cal .d.today { outline: 2px solid #2f6f4f; outline-offset: -2px; }
.cal .ev { display: block; margin-top: 2px; padding: 1px 3px; border-radius: 3px; font-size: 0.6rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #f5f6ea; border-left: 3px solid #2f6f4f; color: #1e293b; }
.cal .ev.shoot { background: #2f6f4f; color: #fff; font-weight: 700; border-left-color: #2f6f4f; }
.upcoming { margin-top: 10px; }
.upcoming .app-row .k { color: #2f6f4f; font-weight: 700; min-width: 4.6rem; }
.upcoming .app-row .v { flex: 1; text-align: left; font-weight: 500; }

/* Dashboard tabs */
.app-dtabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 8px 10px 0; background: #f5f6ea; border-bottom: 1.5px solid #dfe3cc; }
.app-dtab { position: relative; text-align: center; padding: 5px 2px 6px; font-size: 0.72rem; font-weight: 600; color: #64748b; background: #eef0dd; border: 1.5px solid #dfe3cc; border-bottom: 0; border-radius: 8px 8px 0 0; margin-bottom: -1.5px; line-height: 1.2; }
.app-dtab.on { background: #fff; color: #2f6f4f; }
.app-dtab .flag { position: absolute; top: 4px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: #d97706; }

/* Treasurer tiles */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.tile { background: #f5f6ea; border-radius: 8px; padding: 6px 8px; }
.tile span { display: block; font-size: 0.66rem; color: #64748b; font-weight: 600; }
.tile strong { font-size: 0.85rem; color: #1e293b; white-space: nowrap; }
.tile.in strong { color: #15803d; } .tile.out strong { color: #b91c1c; } .tile.warn strong { color: #92400e; }

/* Committee */
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.person { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid #eef0dd; border-radius: 10px; }
.avatar { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%; background: #2f6f4f; color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; }
.person strong { display: block; font-size: 0.8rem; }
.person span { display: block; font-size: 0.7rem; color: #64748b; }

/* FAQ */
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 0 18px; margin-bottom: 10px; }
.faq summary { cursor: pointer; font-weight: 700; padding: 14px 0; color: var(--green); list-style-position: outside; }
.faq details[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.faq details p { color: var(--ink-2); }

/* CTA band */
.cta { background: var(--green); color: #fff; border-radius: 18px; padding: 38px; display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cta h2 { color: #fff; margin-bottom: 6px; }
.cta p { color: #d9e8de; margin: 0; }
.cta .btn-primary { background: #fff; color: var(--green); }
.cta .btn-primary:hover { background: var(--clay-3); color: var(--green); }

/* ── Forms ──────────────────────────────────────────────── */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.field { margin-bottom: 16px; }
.field label, .field .label { display: block; font-weight: 700; margin-bottom: 6px; }
.field .hint { display: block; font-size: 0.9rem; color: var(--ink-2); margin: -2px 0 6px; font-weight: 400; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea {
  width: 100%; padding: 11px 13px; border: 1.5px solid #b7c2ba; border-radius: 10px; font: inherit; color: var(--ink); background: #fff;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green-2); outline: 3px solid rgba(47, 111, 79, 0.25); outline-offset: 0; }
.field [aria-invalid="true"] { border-color: #b42318; }
.field .error { display: block; color: #b42318; font-weight: 600; font-size: 0.92rem; margin-top: 6px; }
.field .error:empty { display: none; }
.check { display: flex; gap: 10px; align-items: flex-start; }
.check input { width: 20px; height: 20px; margin-top: 3px; flex: 0 0 auto; accent-color: var(--green-2); }
.check label { font-weight: 400; margin: 0; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Enquiries switched off on the server: hide the form, show the email instead */
.enquiries-off #enquiry-form, .enquiries-off #form-status { display: none; }
.enquiries-off .form-off[hidden] { display: block; }
.form-off h2 { font-size: 1.3rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alert { border-radius: 12px; padding: 14px 18px; margin-bottom: 18px; font-weight: 600; }
.alert-ok { background: #e6f4ea; color: #14532d; border: 1px solid #b6dfc3; }
.alert-bad { background: #fdecea; color: #8a1c13; border: 1px solid #f3c2bc; }
.alert:empty, .alert[hidden] { display: none; }
.req { color: #b42318; }
.aside-list { list-style: none; padding: 0; margin: 0; }
.aside-list li { padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.aside-list li:last-child { border-bottom: 0; }

/* Prose pages (privacy) */
.prose { max-width: 46em; }
.prose h2 { font-size: 1.35rem; margin-top: 1.6em; }
.prose ul { padding-left: 1.2em; }
.page-head { padding: 48px 0 18px; }
.page-head p { color: var(--ink-2); font-size: 1.12rem; max-width: 44em; }

/* ── Footer ─────────────────────────────────────────────── */
.site-foot { margin-top: 64px; background: #13261c; color: #c8d6cd; padding: 40px 0 28px; font-size: 0.95rem; }
.site-foot a { color: #fff; }
.site-foot .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.site-foot ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 18px; flex-wrap: wrap; }
.site-foot .brand { color: #fff; }
.site-foot .copyright { flex-basis: 100%; margin: 12px 0 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.15); font-size: 0.85rem; color: #c8d6cd; }

/* ── Small screens ──────────────────────────────────────── */
@media (max-width: 900px) {
  .hero .wrap, .feature, .grid-2 { grid-template-columns: 1fr; }
  .grid-3, .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  body { font-size: 1rem; }
  /* Centre-aligned content on phones */
  .hero .wrap > div:first-child, .section-head, .page-head, .card, .steps li, .cta, .site-foot .wrap { text-align: center; }
  .hero-cta, .card h3, .cta, .site-foot .wrap, .site-foot ul, .feature-nav { justify-content: center; }
  .lede, .section-head, .page-head p { margin-left: auto; margin-right: auto; }
  .steps li::before { margin-left: auto; margin-right: auto; }
  .site-foot .brand { justify-content: center; }
  /* Running text stays left-aligned; headings, buttons and links stay centred */
  p, li, summary, figcaption { text-align: left; }
  .site-foot .copyright { text-align: center; }
  /* Free text matches the card text size (Scores and seasons card) */
  p, .lede, .hero-note, .section-head p, .page-head p, .ticks li, .aside-list li, .faq summary, .faq details p { font-size: 0.95rem; }
  /* Scoring card 25% smaller on phones */
  .mock { width: 100%; margin: 0; border-radius: var(--radius); }
  .mock-bar { padding: 8px 12px; font-size: 0.72rem; gap: 8px; }
  .mock-body { padding: 12px; }
  .mock-row { grid-template-columns: 3.4rem 1fr 1.4rem; gap: 5px; padding: 6px 0; font-size: 0.7rem; }
  .mock-foot { padding: 8px 12px; font-size: 0.62rem; }
  /* Feature mock cards on phones */
  .app { font-size: 0.75rem; }
  .app table { font-size: 0.7rem; }
  .app th, .app td { padding: 5px 4px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people { grid-template-columns: 1fr; }
  /* Live scoring card scales to the screen width, like the calendar */
  .app-head { flex-wrap: wrap; row-gap: 4px; }
  .app-tabs { gap: 3px; padding: 6px 6px 0; }
  .app-tab { flex: 1 1 0; min-width: 0; padding: 5px 6px; gap: 4px; font-size: 0.68rem; overflow: hidden; }
  .app-tab .pill { display: none; }                 /* the tab name already says Guest */
  .app-tab b { margin-left: auto; }
  .stand { grid-template-columns: 2.9rem minmax(0, 1fr) 2.2rem; gap: 4px; }
  .dots { gap: 2px; max-width: none; }
  .dot { max-width: 1.25rem; font-size: 0.55rem; border-width: 1.5px; }
  .app-row-head { flex-wrap: wrap; }
  .cal .d { min-height: 2.2rem; }
  .cal .ev { font-size: 0.55rem; }
  .app, .app * { text-align: left; }
  .app th, .app td, .cal .dow, .app-dtab { text-align: center; }
  .app th:first-child, .app td:first-child { text-align: left; }
  .app .num, .app-row .v, .stand .tot { text-align: right; }
  .upcoming .app-row .v { text-align: left; }
  /* Smaller cards on phones */
  .grid { gap: 12px; }
  .card, .steps li { padding: 14px 16px 12px; }
  .card h3, .steps h3 { font-size: 1.05rem; margin-bottom: 0.35em; }
  .card p, .steps p { font-size: 0.95rem; margin-bottom: 0.6em; }
  .icon { width: 30px; height: 30px; font-size: 0.95rem; border-radius: 8px; }
  .steps li::before { width: 28px; height: 28px; margin-bottom: 6px; }
  .form-card { padding: 18px; }
  .nav-toggle { display: inline-block; order: -1; }
  .site-head .wrap { justify-content: flex-start; }
  .nav { position: absolute; top: 68px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); display: none; padding: 10px 16px 16px; box-shadow: 0 10px 20px rgba(0,0,0,0.06); }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; }
  .nav .btn { margin: 6px 0 0; text-align: center; }
  .grid-3, .steps, .row-2 { grid-template-columns: 1fr; }
  .hero { padding: 40px 0; }
  section.band { padding: 44px 0; }
  .cta { padding: 26px; }
  .bird { width: 0.56rem; height: 0.56rem; border-width: 1px; }
  .birds { gap: 2px; flex-wrap: nowrap; }
}

/* iPhone: follow the Dynamic Type size chosen in Settings > Display & Brightness > Text Size */
@supports (font: -apple-system-body) {
  @media (max-width: 720px) { body { font: -apple-system-body; line-height: 1.5; } }
}