/* Outliv public site — senior-legibility design system.
 *
 * Requirements baked in here (see CLAUDE.md + 01-customer-app.md §1):
 *   - Body text 18px, absolute floor 16px.
 *   - Tap targets >= 48x48px, >= 8px spacing.
 *   - Contrast >= 4.5:1 (aim 7:1) for body text.
 *   - Buttons say what they do in words; never icon-only.
 *   - No hover-dependent info, no auto-advancing carousels.
 *   - Fixed WhatsApp button bottom-right on every page.
 */

:root {
  /* Outliv brand type: Open Sans for headings, Lora for body (see BRAND_SPEC).
     System fallbacks keep the page legible if the web fonts fail to load. */
  --font: "Lora", Georgia, "Times New Roman", serif;
  --font-head: "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Arial, sans-serif;

  /* Charcoal ink on warm cream paper (~15:1, well above 7:1). */
  --ink: #1c1b23;
  --ink-soft: #55535e; /* still >= 7:1 on --paper */
  --paper: #f6f3eb;    /* brand cream */
  --surface: #ffffff;  /* white cards */
  --line: #e7e2d6;     /* warm card border */

  /* Brand: rust / terracotta is the single strong primary.
     White text on --brand clears 4.5:1; --brand-dark is used for links/text on cream. */
  --brand: #c34921;      /* rust primary (buttons, active states) */
  --brand-dark: #a83a19; /* darker rust — links & text on cream (>= 5.7:1) */
  --brand-tint: #f6e3da; /* soft rust wash */

  /* Accents (used sparingly, never as body text): green, blue, pale yellow. */
  --accent-green: #c6d874;
  --accent-green-soft: #eef3d5;
  --accent-blue: #aecde9;
  --accent-blue-soft: #e6f0f9;
  --accent-yellow: #feffc4;

  /* WhatsApp brand green (its own recognisable colour). */
  --wa: #128c4a;
  --wa-dark: #0e6f3a;

  --warn-bg: #fdeede;
  --warn-ink: #7a3d00;
  --danger: #a11c1c;

  --radius: 14px;
  --shadow: 0 2px 10px rgba(28, 27, 35, 0.08);
  --tap: 48px; /* minimum tap target */
  --maxw: 960px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f3efe6;
    --ink-soft: #cbc6bb;
    --paper: #201f26;
    --surface: #2a2932;
    --line: #3d3b46;
    --brand: #e06a42;      /* brighter rust so it reads on the dark surface */
    --brand-dark: #ec8a68; /* links on dark (light rust) */
    --brand-tint: #3a2a24;
    --accent-green-soft: #2f3320;
    --accent-blue-soft: #23303c;
    --warn-bg: #3a2a12;
    --warn-ink: #f0c98a;
    --danger: #f2a1a1;
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 18px;          /* body floor: 18px */
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

a { color: var(--brand-dark); }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.01em;
}
h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 0.5em; }
h2 { font-size: 1.55rem; line-height: 1.3; margin: 1.4em 0 0.5em; }
h3 { font-size: 1.25rem; font-weight: 600; margin: 1.2em 0 0.4em; }
p  { margin: 0 0 1em; }
small, .fine { font-size: 1rem; }  /* 18px base => "small" never below 16px floor */

img { max-width: 100%; height: auto; display: block; }

/* ---------- Skip link (keyboard / screen reader) ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand-dark);
  color: #fff;
  padding: 12px 16px;
  z-index: 200;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- Header ---------- */
.site-header {
  background: var(--surface);
  border-bottom: 2px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header .container {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  min-height: 64px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  /* Comfortable tap target height for the logo link. */
  min-height: var(--tap);
}
.brand-logo {
  height: 38px;
  width: auto;
  display: block;
}
@media (max-width: 420px) {
  .brand-logo { height: 32px; }
}
.site-nav {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-left: auto;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 8px 14px;
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}
.site-nav a:hover,
.site-nav a:focus { background: var(--brand-tint); }
.site-nav a[aria-current="page"] {
  color: var(--brand-dark);
  background: var(--brand-tint);
}

/* Language toggle */
.lang-toggle { display: inline-flex; gap: 4px; margin-left: 4px; }
.lang-toggle a {
  min-width: 52px;
  justify-content: center;
  border: 2px solid var(--line);
  font-weight: 700;
  padding: 8px 12px;
}
.lang-toggle a[aria-current="true"] {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 12px 22px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.2;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover,
.btn-primary:focus { background: var(--brand-dark); }
.btn-secondary {
  background: var(--surface);
  color: var(--brand-dark);
  border-color: var(--brand);
}
.btn-secondary:hover,
.btn-secondary:focus { background: var(--brand-tint); }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover,
.btn-wa:focus { background: var(--wa-dark); }
.btn-block { display: flex; width: 100%; }
.btn[aria-disabled="true"] { opacity: 0.55; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;              /* > 8px spacing between adjacent buttons */
  margin: 1.2em 0;
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(160deg, var(--brand-tint), var(--paper) 65%);
  padding: 56px 0 60px;
  border-bottom: 1px solid var(--line);
}
.hero h1 { font-size: 2.4rem; max-width: 20ch; }
.hero p { font-size: 1.25rem; max-width: 60ch; color: var(--ink-soft); }
.tagline {
  font-style: italic;
  font-weight: 600;
  color: var(--brand-dark);
  font-size: 1.2rem;
}

/* ---------- Sections ---------- */
.section { padding: 44px 0; }
.section-alt { background: var(--surface); border-block: 1px solid var(--line); }
.section-lede { font-size: 1.2rem; max-width: 62ch; color: var(--ink-soft); }

/* ---------- Pillars (three brand pillars) ---------- */
.pillar-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 1.4em;
}
@media (min-width: 720px) {
  .pillar-grid { grid-template-columns: repeat(3, 1fr); }
}
.pillar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 5px solid var(--brand);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}
.pillar:nth-child(2) { border-top-color: var(--accent-green); }
.pillar:nth-child(3) { border-top-color: var(--accent-blue); }
.pillar h3 { margin-top: 0; }
.pillar p { margin-bottom: 0; color: var(--ink-soft); }

/* ---------- Programs ---------- */
.program-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 1.4em;
}
@media (min-width: 640px) {
  .program-grid { grid-template-columns: repeat(2, 1fr); }
}
.program {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.program h3 { margin-top: 0; }
.program p { margin-bottom: 0; color: var(--ink-soft); }
.program .tag {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--accent-yellow);
  color: #5a4a12;
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 600;
}

/* ---------- Testimonials ---------- */
.quote-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 1.4em;
}
@media (min-width: 720px) {
  .quote-grid { grid-template-columns: repeat(2, 1fr); }
}
.quote {
  background: var(--accent-blue-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}
.quote blockquote {
  margin: 0 0 14px;
  font-size: 1.2rem;
  line-height: 1.6;
}
.quote .who {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--ink);
}
.quote .who .meta { display: block; font-weight: 400; color: var(--ink-soft); font-size: 1rem; }

/* ---------- Cards / schedule ---------- */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

.class-card {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.class-card h3 { margin: 0; font-size: 1.3rem; }
.class-card .when { font-weight: 700; color: var(--ink); }
.class-card .meta { color: var(--ink-soft); margin: 0; }
.class-card .price { font-weight: 800; font-size: 1.15rem; }
.class-card.is-full { opacity: 0.78; }
.class-card.is-cancelled { border-color: var(--danger); }
.class-card .card-actions { margin-top: auto; padding-top: 6px; }

/* Chips / badges */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  background: var(--brand-tint);
  color: var(--brand-dark);
}
.chip-format { background: #eae4d6; color: #5a4a2a; }
.chip-spots { background: #e5f2e9; color: #14603a; }
.chip-full { background: #eee; color: #555; }
.chip-cancelled { background: #f6dede; color: var(--danger); }

.banner {
  padding: 12px 16px;
  border-radius: 10px;
  font-weight: 700;
}
.banner-cancelled { background: #f6dede; color: var(--danger); }
.banner-warn { background: var(--warn-bg); color: var(--warn-ink); }

/* Empty state */
.empty {
  text-align: center;
  padding: 40px 20px;
  background: var(--surface);
  border: 2px dashed var(--line);
  border-radius: var(--radius);
}
.empty p { font-size: 1.2rem; color: var(--ink-soft); }

/* Definition-style detail rows */
.detail-list { display: grid; gap: 14px; margin: 1.2em 0; }
.detail-list .row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.detail-list .label { color: var(--ink-soft); font-weight: 700; }
.detail-list .value { font-size: 1.1rem; }

/* Locations */
.loc-list { display: grid; gap: 16px; }
@media (min-width: 640px) { .loc-list { grid-template-columns: 1fr 1fr; } }
.loc {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}

/* ---------- Forms ---------- */
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 700; font-size: 1.1rem; margin-bottom: 6px; }
.field input {
  width: 100%;
  min-height: var(--tap);
  font-size: 1.1rem;
  padding: 10px 14px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
}
.field input:focus { outline: 3px solid var(--brand); border-color: var(--brand); }
.field select {
  width: 100%;
  min-height: var(--tap);
  font-size: 1.1rem;
  padding: 10px 12px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
}
.field select:focus { outline: 3px solid var(--brand); border-color: var(--brand); }
.form-narrow { max-width: 460px; }

/* International phone input: country dropdown + national number. Stacks on small screens
   (each control stays a full-width, easy tap target), side-by-side once there's room. */
.phone-input { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 480px) {
  .phone-input { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; }
}
.phone-region,
.phone-national {
  width: 100%;
  min-height: var(--tap);
  font-size: 1.1rem;
  padding: 10px 12px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
}
.phone-region:focus,
.phone-national:focus { outline: 3px solid var(--brand); border-color: var(--brand); }

/* Field-level error: plain Bahasa, right under the field, in words (not a red border alone). */
.field-error {
  margin: 8px 0 0;
  color: var(--danger);
  font-weight: 700;
}

.banner-ok { background: var(--brand-tint); color: var(--brand-dark); }

/* ---------- Fixed WhatsApp float (every page) ---------- */
.wa-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Icon-only circular button, comfortably above the 48px minimum tap target. */
  width: 60px;
  height: 60px;
  border-radius: 999px;
  background: var(--wa);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
}
.wa-float:hover,
.wa-float:focus { background: var(--wa-dark); }
.wa-float .wa-icon { display: block; }
/* Keep page content clear of the float on small screens. */
main { padding-bottom: 96px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--surface);
  border-top: 2px solid var(--line);
  padding: 28px 0;
  color: var(--ink-soft);
}
.site-footer a { color: var(--brand-dark); font-weight: 600; }
.footer-links { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; }

/* Focus visibility everywhere (keyboard users). */
a:focus-visible,
.btn:focus-visible,
button:focus-visible { outline: 3px solid var(--brand-dark); outline-offset: 2px; }

/* Respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Customer area (M5) ---------- */

/* Plain, roomy lists for upcoming classes, drafts and notes. */
.plain-list { list-style: none; padding: 0; margin: 12px 0; }
.plain-list > li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.plain-list > li:last-child { border-bottom: 0; }

/* Notes: each note reads as a calm card. */
.notes-list .note-item { padding: 16px 0; }
.notes-list .note-item p { margin: 0 0 6px; }

/* Radio rows in the booking flow: whole row is a >=48px tap target. */
.radio-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--tap);
  padding: 10px 12px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 18px;
}
.radio-row input { width: 24px; height: 24px; }

/* Day toggle chips in settings — large, legible, wrap on mobile. */
.day-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.day-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 10px 14px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 17px;
}
.day-chip input { width: 22px; height: 22px; }
.day-chip:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-tint);
  font-weight: 600;
}

/* Space out the per-member settings forms. */
.member-settings {
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

fieldset.field { border: 0; padding: 0; margin: 0 0 18px; }
fieldset.field legend { font-weight: 600; margin-bottom: 8px; padding: 0; }

/* ==========================================================================
   Header — pinned LIGHT in every colour scheme.
   The wordmark logo (outliv-logo.png) is dark ink with a transparent
   background, so it MUST sit on a light bar or it disappears. We therefore
   hardcode a white header + charcoal text even in dark mode.
   ========================================================================== */
.site-header {
  background: #ffffff;
  border-bottom: 1px solid #e7e2d6;
  box-shadow: 0 1px 6px rgba(28, 27, 35, 0.06);
}
.brand-logo { height: 46px; }
@media (max-width: 767px) {
  .brand-logo { height: 38px; }
}
.site-nav a { color: #1c1b23; }
.site-nav a:hover,
.site-nav a:focus { background: #f6e3da; color: #a83a19; }
.site-nav a[aria-current="page"] { color: #a83a19; background: #f6e3da; }
.site-header .lang-toggle a { color: #1c1b23; border-color: #e0dccf; background: #fff; }
.site-header .lang-toggle a[aria-current="true"] {
  background: var(--brand); color: #fff; border-color: var(--brand);
}

/* Hamburger toggle — hidden on desktop, shown on mobile. */
.nav-toggle {
  display: none;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border: 2px solid #e0dccf;
  border-radius: 12px;
  background: #fff;
  color: #1c1b23;
  cursor: pointer;
}
.nav-toggle:hover,
.nav-toggle:focus { background: #f6e3da; border-color: var(--brand); color: #a83a19; }

/* Below the breakpoint: swap the inline nav for the hamburger + drawer. */
@media (max-width: 767px) {
  .site-nav { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* Backdrop behind the open drawer. */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(28, 27, 35, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 150;
}
.nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* The slide-in drawer itself — pinned light like the header. */
.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(84vw, 340px);
  background: #ffffff;
  border-left: 1px solid #e7e2d6;
  box-shadow: -6px 0 24px rgba(28, 27, 35, 0.22);
  transform: translateX(105%);
  transition: transform 0.25s ease;
  visibility: hidden;
  z-index: 160;
  display: flex;
  flex-direction: column;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  overflow-y: auto;
}
.nav-drawer.is-open { transform: none; visibility: visible; }
.nav-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e7e2d6;
}
.nav-drawer-head .brand-logo { height: 36px; }
.nav-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border: 2px solid #e0dccf;
  border-radius: 12px;
  background: #fff;
  color: #1c1b23;
  cursor: pointer;
  flex: 0 0 auto;
}
.nav-close:hover,
.nav-close:focus { background: #f6e3da; border-color: var(--brand); color: #a83a19; }
.nav-drawer-links { display: flex; flex-direction: column; gap: 4px; }
.nav-drawer-links a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 12px 14px;
  border-radius: 10px;
  color: #1c1b23;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
}
.nav-drawer-links a:hover,
.nav-drawer-links a:focus,
.nav-drawer-links a[aria-current="page"] { background: #f6e3da; color: #a83a19; }
.nav-drawer-lang { margin-top: 14px; padding-top: 14px; border-top: 1px solid #e7e2d6; }
.nav-drawer-lang .lang-toggle a { color: #1c1b23; border-color: #e0dccf; background: #fff; }
.nav-drawer-lang .lang-toggle a[aria-current="true"] {
  background: var(--brand); color: #fff; border-color: var(--brand);
}

/* ---------- WhatsApp icon on green CTA buttons ---------- */
/* Every .btn-wa gets the recognisable WhatsApp glyph before its label (white bubble,
   green handset that reads as a cutout against the button). Self-contained data URI. */
.btn-wa::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23ffffff' d='M16.004 0h-.008C7.174 0 0 7.176 0 16c0 3.5 1.128 6.744 3.048 9.38L1.05 31.32l6.142-1.964A15.9 15.9 0 0 0 16.004 32C24.826 32 32 24.822 32 16S24.826 0 16.004 0z'/%3E%3Cpath fill='%23128c4a' d='M25.32 22.594c-.386 1.09-1.918 1.994-3.14 2.258-.836.178-1.928.32-5.604-1.204-4.702-1.948-7.73-6.726-7.966-7.036-.226-.31-1.9-2.53-1.9-4.826s1.166-3.42 1.636-3.9c.386-.394.836-.574 1.114-.574.14 0 .266.006.38.012.328.014.492.034.708.55.268.646.922 2.242 1 2.406.08.164.16.386.05.596-.102.216-.192.31-.356.5-.164.19-.32.336-.484.54-.15.176-.32.366-.13.69.19.316.844 1.392 1.812 2.254 1.25 1.114 2.288 1.458 2.646 1.608.266.11.582.084.776-.124.246-.266.55-.708.86-1.144.22-.312.498-.35.79-.24.298.104 1.888.89 2.21 1.05.322.16.536.238.616.372.08.14.08.806-.306 1.896z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ---------- Sign-up: participant cards + intake sections ---------- */
.member-card {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin: 18px 0;
}
.member-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.member-title { margin: 0 0 0.4em; }
.btn-small { min-height: 40px; padding: 8px 14px; font-size: 0.98rem; }

.intake-details {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 14px;
  margin: 14px 0;
  background: var(--paper);
}
.intake-details > summary {
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 700;
  padding: 12px 4px;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  list-style-position: inside;
}
.intake-details[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 12px; }

.check-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 520px) { .check-grid { grid-template-columns: 1fr 1fr; } }
.check-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--tap);
  padding: 8px 12px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  font-size: 1.05rem;
}
.check-row input { width: 22px; height: 22px; flex: 0 0 auto; }
.check-row:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }

.field textarea {
  width: 100%;
  font-size: 1.1rem;
  font-family: var(--font);
  padding: 10px 14px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
}
.field textarea:focus { outline: 3px solid var(--brand); border-color: var(--brand); }
.field input[type="date"] { max-width: 320px; }

/* ---------- Mobile hero + overflow guards (375px audit) ---------- */
@media (max-width: 480px) {
  .hero { padding: 36px 0 40px; }
  .hero h1 { font-size: 1.9rem; }
  .hero p { font-size: 1.12rem; }
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.35rem; }
  .section { padding: 32px 0; }
}
/* Never let a long word or wide element push the page sideways. */
body { overflow-x: hidden; }
h1, h2, h3, p, li, .member-title { overflow-wrap: break-word; }