@font-face {
  font-family: "Source Sans 3";
  src: url("brand/SourceSans3-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("brand/SourceSans3-Semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Booster Baton tokens */
  --boosterbaton-brand-primary: #604581;
  --boosterbaton-background: #FAF8F4;
  --boosterbaton-surface-soft: #EEE8F4;
  --boosterbaton-text: #302B38;
  --boosterbaton-accent: #E6B58C;
  --boosterbaton-surface: #FFFFFF;

  --ink: var(--boosterbaton-text);
  --muted: #5c5566;
  --paper: var(--boosterbaton-background);
  --card: var(--boosterbaton-surface);
  --accent: var(--boosterbaton-brand-primary);
  --accent-soft: var(--boosterbaton-surface-soft);
  --warn: #8a5a00;
  --warn-bg: #fff6e0;
  --line: #e0d8e8;
  --money: var(--boosterbaton-brand-primary);
  --shadow: 0 8px 24px rgba(48, 43, 56, 0.08);
  --radius: 14px;
  --apricot: var(--boosterbaton-accent);
  font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}

#site-navigation { margin-bottom: 1.5rem; }
#navigation-links { display: flex; gap: .4rem; flex-wrap: wrap; padding: .6rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
#navigation-links a { color: var(--ink); text-decoration: none; padding: .75rem 1rem; border-radius: 9px; font-weight: 600; }
#navigation-links a:hover, #navigation-links a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }
#navigation-links a:focus-visible, .navigation-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.navigation-toggle { display: none; }
.navigation-section-hidden { display: none !important; }
.portal-layout #btn-refresh, .portal-layout #dash-status { display: none; }
@media (min-width: 1000px) {
  body.portal-layout .shell { max-width: 1440px; padding-left: 255px; position: relative; }
  .portal-layout #site-navigation { position: absolute; left: 20px; top: 230px; width: 215px; }
  .portal-layout #navigation-links { flex-direction: column; }
  .portal-layout .brand-wordmark .muted, .portal-layout .kill-list { display: none; }
}
@media (max-width: 700px) {
  .navigation-toggle { display: block; border: 1px solid var(--line); background: var(--card); color: var(--accent); padding: .8rem 1rem; border-radius: 9px; font: inherit; font-weight: 600; }
  #navigation-links { display: none; margin-top: .5rem; flex-direction: column; }
  .menu-open #navigation-links { display: flex; }
}

.brand-story-hero { display: grid; grid-template-columns: 1.1fr 1fr; column-gap: 2rem; align-items: center; margin-bottom: 2rem; }
.brand-story-hero > :not(figure) { grid-column: 1; }
.brand-story-hero > .btn { justify-self: start; }
.brand-hero-art { grid-column: 2; grid-row: 1 / 4; margin: 0; }
.brand-hero-art img { display: block; width: 100%; height: auto; border-radius: 24px; animation: steady-welcome 1.2s ease-out both; }
.about-story { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2rem; align-items: center; }
.about-story img { width: 100%; max-height: 420px; object-fit: contain; border-radius: 24px; }
.about-story h2 { font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1.15; }
@keyframes steady-welcome { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .brand-hero-art img { animation: none; } }
@media (max-width: 700px) { .brand-story-hero, .about-story { display: flex; flex-direction: column; gap: 1rem; } .brand-hero-art img { max-height: 300px; object-fit: contain; } }

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(ellipse at top, #ffffff 0%, var(--paper) 55%, var(--accent-soft) 100%);
  min-height: 100vh;
}

.watermark-banner {
  background: var(--warn-bg);
  color: var(--warn);
  text-align: center;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid #f0dfb0;
  font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
}

.shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}
.shell:has(.pack-card) {
  max-width: 1280px;
}

header.brand {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}
header.brand h1 {
  margin: 0;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
header.brand .tagline {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 1.05rem;
}
.kill-list {
  font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  font-size: 0.78rem;
  color: var(--muted);
  max-width: 16rem;
  text-align: right;
  line-height: 1.35;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
}

.hero {
  text-align: center;
  padding: 2.5rem 1.5rem;
}
.hero p { color: var(--muted); max-width: 36rem; margin: 0.75rem auto 1.5rem; }

.marketing-panel {
  margin-bottom: 1.5rem;
  padding: 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(135deg, #fff 0%, #f6f1fa 100%);
  box-shadow: var(--shadow);
}
.marketing-intro { max-width: 46rem; }
.marketing-intro h2 { margin: 0.25rem 0 0.75rem; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.08; }
.marketing-intro p { color: var(--muted); font-size: 1.08rem; line-height: 1.5; }
.eyebrow { margin: 0; color: var(--accent); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; }
.marketing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.marketing-card { padding: 1.15rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.marketing-card-accent { border-color: var(--accent); background: var(--accent-soft); }
.marketing-card h3, .marketing-includes h3 { margin: 0.35rem 0; font-size: 1.15rem; }
.marketing-card p:not(.eyebrow), .marketing-includes p { margin-bottom: 0; color: var(--muted); }
.marketing-includes { padding-top: 1.1rem; border-top: 1px solid var(--line); }
.marketing-includes ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem 1.5rem; padding-left: 1.2rem; line-height: 1.4; }
.marketing-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.25rem; font-weight: 600; color: var(--muted); }
.demo-cta { font-size: 1.08rem; padding: 1rem 1.8rem; }
.prospect-demo { display: grid; gap: 1rem; }
.demo-tour-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.5rem 0 0; }
.demo-tour-header h2 { margin: 0.25rem 0; font-size: clamp(1.8rem, 4vw, 2.5rem); }
.demo-tour-header p:not(.eyebrow), .demo-tour-disclaimer { color: var(--muted); }
/* Club Overview: the club's own year, sharing the demo's vocabulary */
.metric .value.is-empty { color: var(--muted); font-size: 1.1rem; font-weight: 600; }
.metric-hint { margin-top: 0.3rem; font-size: 0.82rem; color: var(--muted); }
.metric-hint a { color: var(--accent); font-weight: 600; }
.club-flag { margin: 0.75rem 0 0; padding: 0.6rem 0.8rem; border-radius: 10px; background: var(--warn-bg); color: var(--warn); font-weight: 600; }
.club-note { margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px solid var(--line); font-size: 0.85rem; }
.club-check-list { list-style: none; padding-left: 0; gap: 0.6rem; }
.club-check-list li { display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; align-items: baseline; color: var(--ink); }
.club-check-confirmed { color: var(--money); }
.club-check-attention { color: var(--warn); }
.club-check-na, .club-check-missing { color: var(--muted); }
.club-due { margin: 0 0 1rem; }
.demo-minutes .minutes-body { margin-top: 0.6rem; }
.demo-minutes .minutes-fade { background: linear-gradient(to bottom, rgba(255,255,255,0), var(--card)); }

/* Event results */
.event-result { margin: 0.4rem 0 0.6rem; padding: 0.85rem; border: 1px solid var(--line); border-radius: 12px; background: var(--accent-soft); }
.event-result summary { font-weight: 700; cursor: pointer; }
.event-result-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; margin: 0.75rem 0; }
.event-net { margin: 0.2rem 0 0.75rem; font-size: 1.05rem; }
.event-net strong { color: var(--money); font-variant-numeric: tabular-nums; }

/* Recorded money periods */
.money-entry { margin-bottom: 1rem; }
.money-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; margin: 0.9rem 0 0; }
.money-figures div { background: var(--accent-soft); border-radius: 10px; padding: 0.6rem 0.7rem; }
.money-figures dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.money-figures dd { margin: 0.2rem 0 0; font-weight: 700; color: var(--money); font-variant-numeric: tabular-nums; }
.money-form input[type="text"] { font-variant-numeric: tabular-nums; }

/* Meeting minutes */
.club-minutes .minutes-summary-body { max-height: 12rem; overflow: hidden; }
.minutes-meta { margin: 0 0 0.6rem; }
.club-flag-inline { color: var(--warn); font-weight: 600; }
.minutes-entry { margin-bottom: 1rem; }
.minutes-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.minutes-head h4 { margin: 0 0 0.2rem; font-size: 1.05rem; }
.minutes-head p { margin: 0; font-size: 0.88rem; }
.minutes-status { flex: 0 0 auto; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.2rem 0.6rem; border-radius: 999px; }
.minutes-status.is-approved { background: var(--accent-soft); color: var(--accent); }
.minutes-status.is-draft { background: var(--warn-bg); color: var(--warn); }
.minutes-body { position: relative; margin: 0.9rem 0; line-height: 1.55; }
.minutes-body p { margin: 0 0 0.75rem; }
.minutes-body p:last-child { margin-bottom: 0; }
.minutes-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 3.5rem; margin: 0; background: linear-gradient(to bottom, rgba(255,255,255,0), var(--card)); pointer-events: none; }
.minutes-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.minutes-form { display: grid; gap: 0.9rem; }
.minutes-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.9rem; }
.minutes-form label { display: grid; gap: 0.3rem; font-weight: 600; }
.minutes-form input, .minutes-form textarea { font: inherit; font-weight: 400; padding: 0.6rem 0.7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); }
.minutes-form textarea { resize: vertical; min-height: 12rem; line-height: 1.5; }
.minutes-counter { margin: 0; font-size: 0.85rem; }
.minutes-counter.is-over { color: var(--warn); font-weight: 600; }
.minutes-message { margin-top: 0.8rem; font-weight: 600; }
@media (max-width: 620px) { .minutes-head { flex-direction: column; } }

/* Club Overview lays its rows out on one rhythm, the way the public demo does.
   Its children carry no margins of their own by design, so without a gap here
   the rail, its caption, the due band, the money tiles and the cards all sit
   flush against each other. The gap is the single source of vertical spacing
   on this page: add a row and it is spaced like every other row. */
#club-overview-panel { display: grid; gap: 1rem; align-content: start; }
#club-overview-panel > h2, #club-overview-panel > p { margin: 0; }
.club-sections { margin-top: 0; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.club-sections h3 { margin: 0 0 0.9rem; }
.club-activity { grid-column: 1 / -1; }
.demo-columns a:not(.btn) { color: var(--accent); font-weight: 600; }
/* readiness.js and the club dashboard both use `btn small`; it had no rule until now. */
.btn.small { font-size: 0.9rem; padding: 0.55rem 1.1rem; box-shadow: 0 2px 8px rgba(96, 69, 129, 0.25); }

/* Public surface: three pages, one ask, no back-office chrome */
body.no-demo-banner .watermark-banner { display: none; }
.header-right { display: flex; align-items: center; gap: 0.6rem; }
/* Buttons rendered as links must not carry link underlines. */
a.btn, a.btn:hover { text-decoration: none; display: inline-block; }
.marketing-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; font-weight: 600; color: var(--muted); }
.marketing-includes .marketing-grid { margin-top: 1.4rem; }
.pricing-panel { background: linear-gradient(135deg, #fff 0%, var(--accent-soft) 100%); }
.pricing-panel h3 { margin-top: 0; }
.pricing-headline { font-size: 1.3rem; line-height: 1.4; margin: 0.35rem 0 0.9rem; }
.pricing-headline strong { color: var(--money); }
.pricing-sentence { padding: 0.85rem 1rem; border-left: 4px solid var(--apricot); background: var(--card); border-radius: 0 10px 10px 0; }
.marketing-close { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.marketing-close h3 { margin: 0 0 0.35rem; }
.marketing-close p { margin: 0; color: var(--muted); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin-bottom: 0.6rem; font-weight: 600; }
.footer-links a { color: var(--accent); }
@media (max-width: 620px) { .marketing-close { flex-direction: column; align-items: stretch; } }

.demo-tour-action { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.demo-tour-action h3, .demo-tour-action p { margin: 0; }
.demo-tour-action p { color: var(--muted); margin-top: 0.35rem; max-width: 46ch; }

/* Demo: the club year in motion */
#demo-year { display: grid; gap: 1rem; }
.demo-rail { display: flex; gap: 0.35rem; overflow-x: auto; padding: 0.4rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); scrollbar-width: thin; }
.demo-month { flex: 0 0 auto; display: grid; gap: 0.15rem; justify-items: center; min-width: 4.6rem; padding: 0.6rem 0.7rem; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.demo-month:hover { background: var(--accent-soft); }
.demo-month:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.demo-month.is-selected { background: var(--accent); color: #fff; }
.demo-month.is-handoff .demo-month-label { text-decoration: underline; text-decoration-color: var(--apricot); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.demo-month-label { font-size: 0.88rem; white-space: nowrap; }
/* The rail reads past -> now -> ahead. A month that has not arrived is
   reachable but visibly lighter, so an empty spring does not look like a
   club that is behind. */
.demo-month.is-ahead { opacity: 0.62; }
.demo-month.is-ahead:hover, .demo-month.is-ahead:focus-visible { opacity: 1; }
.demo-month.is-ahead.is-selected { opacity: 1; }
.demo-month.is-now .demo-month-label { font-weight: 700; }
.demo-month-flag { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--warn); }
.demo-month.is-selected .demo-month-flag { color: var(--apricot); }
.demo-rail-hint { margin: 0; color: var(--muted); }
.demo-metrics { margin: 0; }
/* The due band leads Club Overview, above the money. A late obligation has
   to be the first thing a volunteer meets, not something they go looking for. */
/* A button that has to read as the link it replaced: the target panel is
   already on this screen, so it scrolls rather than routing. */
/* The readiness panel is long; its status line sits at the top so a refused
   action is seen rather than scrolled past. */
.readiness-message:empty { display: none; }
.readiness-message { margin: 0 0 0.8rem; padding: 0.6rem 0.8rem; border-radius: 10px;
  background: var(--warn-bg); color: var(--warn); font-weight: 600; }
.btn-link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent);
  font-weight: 600; cursor: pointer; text-decoration: underline; }
.btn-link:hover { text-decoration: none; }
.club-band { margin: 0; border-left: 4px solid var(--accent); }
.club-band.is-late { border-left-color: var(--warn, #b25a00); }
.club-band h3 { margin-top: 0; }
.club-band .demo-commitments { margin-bottom: 0.5rem; }
.club-starters { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--line); }
.club-starters .demo-commitment-meta { display: block; }
.demo-money-note { margin: 0; padding: 0.7rem 0.9rem; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 8px 8px 0; font-size: 0.92rem; }
.demo-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .demo-columns { grid-template-columns: 1fr; } }
.demo-columns .card h3 { margin-top: 0; }
.demo-changed { background: linear-gradient(135deg, #fff 0%, var(--accent-soft) 100%); }
.demo-changes { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.55rem; line-height: 1.45; }
.demo-changes li::marker { color: var(--accent); }
.demo-commitments { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.85rem; }
.demo-commitments li { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 0.75rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--line); }
.demo-commitments li:last-child { padding-bottom: 0; border-bottom: none; }
.demo-commitment-name { font-weight: 700; }
.demo-commitment-meta, .demo-commitment-note { grid-column: 1 / -1; color: var(--muted); font-size: 0.92rem; }
.demo-commitment-note { font-style: italic; }
.demo-status { align-self: start; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
.demo-status-awaiting-approval { background: var(--warn-bg); color: var(--warn); }
.demo-check-done, .demo-check-open { margin: 0 0 0.6rem; }
.demo-check-open { color: var(--warn); }
.demo-check-list { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.4rem; color: var(--muted); line-height: 1.4; }
.demo-activity { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.7rem; }
.demo-activity li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.15rem 0.75rem; line-height: 1.4; }
.demo-activity-date { color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.demo-activity-actor { grid-column: 2; color: var(--muted); font-size: 0.85rem; }
@media (max-width: 620px) {
  .marketing-panel { padding: 1.35rem; }
  .marketing-grid, .marketing-includes ul, .demo-columns { grid-template-columns: 1fr; }
  .demo-tour-header, .demo-tour-action { align-items: stretch; flex-direction: column; }
  .demo-activity li { grid-template-columns: 1fr; }
  .demo-activity-actor { grid-column: 1; }
}

.btn {
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 999px;
  padding: 0.85rem 1.5rem;
  background: var(--accent);
  color: #fff;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  box-shadow: 0 4px 14px rgba(96, 69, 129, 0.35);
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: 0.55; cursor: wait; transform: none; }
.btn.secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  box-shadow: none;
}
.btn.ghost {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: none;
}

.grid {
  display: grid;
  gap: 1rem;
}
.grid.two { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid.money { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

.metric {
  background: var(--accent-soft);
  border-radius: 12px;
  padding: 1rem;
}
.metric .label {
  font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.metric .value {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--money);
  margin-top: 0.25rem;
}

.section-title {
  font-size: 1.15rem;
  margin: 0 0 0.85rem;
  font-weight: 700;
}

.officer {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem;
  background: #fff;
}
.officer .role {
  font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.officer .name { font-size: 1.1rem; margin-top: 0.2rem; font-weight: 600; }
.officer.highlight {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--accent-soft), #fff);
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0.5rem 0 1.25rem;
}
.meta-row strong { color: var(--ink); font-weight: 600; }

.status-pill {
  display: inline-block;
  font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
}

.error {
  background: #fdecea;
  color: #8a1f11;
  border: 1px solid #f5c6c0;
  border-radius: 10px;
  padding: 0.85rem 1rem;
  margin: 1rem 0;
  font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  font-size: 0.9rem;
}

.upload-panel {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--line);
}
.upload-panel label {
  display: block;
  font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
  color: var(--muted);
}
.upload-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.muted { color: var(--muted); font-size: 0.9rem; }
.hidden { display: none !important; }
.toolbar { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1rem 0; }
footer {
  margin-top: 2.5rem;
  text-align: center;
  font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  font-size: 0.8rem;
  color: var(--muted);
}

.header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.65rem;
}
.role-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  font-size: 0.85rem;
}
.role-badge {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
}
.role-badge[data-role="customer"] {
  background: #4a3666;
}
.role-switcher, .create-row select, .create-row input, #set-status,
table select {
  font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  font-size: 0.85rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.btn-sm {
  padding: 0.4rem 0.85rem;
  font-size: 0.85rem;
}
.btn-sub {
  display: block;
  font-weight: 500;
  font-size: 0.75rem;
  opacity: 0.9;
  margin-top: 0.25rem;
}
.login-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  max-width: 36rem;
  margin: 0 auto;
}
.create-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
  align-items: center;
}
.create-row input { flex: 1; min-width: 10rem; }
.table-wrap { overflow-x: auto; }
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  font-size: 0.88rem;
}
.data-table th, .data-table td {
  text-align: left;
  padding: 0.55rem 0.4rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.data-table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.data-table .actions { white-space: nowrap; }

.public-filing-summary { margin-top: 0.9rem; }
.public-filing-summary h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.public-filing-table { width: 100%; max-width: 760px; border-collapse: collapse; margin: 0.45rem 0 0.9rem; font-size: 0.9rem; }
.public-filing-table th, .public-filing-table td { padding: 0.38rem 0.5rem; border-bottom: 1px solid var(--line, #e5dceb); text-align: left; }
.public-filing-table td { text-align: right; font-variant-numeric: tabular-nums; }
.public-filing-table thead th { background: #f6f1fa; }
.audit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  font-size: 0.85rem;
}
.audit-list li {
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--line);
}
.audit-at { color: var(--muted); margin-right: 0.5rem; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82em;
}


/* Auth / bootstrap forms */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 420px;
  margin: 1.25rem auto 0;
  text-align: left;
  font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}
.auth-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.auth-form input,
.auth-form textarea {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
}
.auth-form button {
  margin-top: 0.35rem;
}


/* Danger ghost — destructive admin actions (Remove customer) */
.btn.ghost.danger,
.btn.danger {
  color: #b42318;
  border-color: #fecdca;
}
.btn.ghost.danger:hover,
.btn.danger:hover {
  background: #fef3f2;
  border-color: #f97066;
  color: #912018;
}

.config-warning {
  background: #7f1d1d;
  color: #fee2e2;
  border: 1px solid #b91c1c;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin: 0.75rem 0;
  font-weight: 600;
}
.audit-list .audit-error { color: #b91c1c; font-weight: 600; }
.audit-list .audit-level-error { color: #b91c1c; }
.audit-list .audit-level-warn { color: #b45309; }

/* Handoff pack section tabs */
.pack-watermark {
  background: #7c2d12;
  color: #ffedd5;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  margin-bottom: 0.75rem;
  border: 1px dashed #fdba74;
}
.pack-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.75rem 0 1rem;
}
.pack-tab {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.pack-tab.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.pack-panel { margin-top: 0.25rem; }
.pack-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.pack-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin: 0.55rem 0 0.2rem;
}
.pack-input,
.pack-panel input[type="text"],
.pack-panel input[type="number"],
.pack-panel input[type="date"],
.pack-panel select,
.pack-panel textarea {
  width: 100%;
  max-width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.95rem;
  box-sizing: border-box;
}
.pack-table-wrap,
#cred-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  margin: 0.35rem 0 0.5rem;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
#cred-table-wrap {
  /* Outer credentials host; inner .pack-table-wrap also scrolls. */
  border: none;
  background: transparent;
  margin: 0;
}
.pack-table {
  width: max-content;
  min-width: max(100%, 56rem);
  border-collapse: collapse;
  font-size: 0.9rem;
  table-layout: auto;
}
.pack-table th,
.pack-table td {
  border-bottom: 1px solid var(--line);
  padding: 0.45rem 0.5rem;
  text-align: left;
  vertical-align: top;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 7.5rem;
  max-width: 18rem;
}
.pack-table th:first-child,
.pack-table td:first-child {
  min-width: 11rem;
  max-width: 22rem;
}
.pack-table .pack-table-actions {
  min-width: 4.5rem;
  max-width: none;
  white-space: nowrap;
  width: 1%;
  position: sticky;
  right: 0;
  background: #fff;
}
.pack-table input,
.pack-table select,
.pack-table textarea,
.pack-table .pack-cell-input {
  min-width: 8rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  resize: vertical;
  line-height: 1.35;
  font: inherit;
}
.pack-table textarea,
.pack-table .pack-cell-input {
  min-height: 2.4rem;
  field-sizing: content;
}
.pack-empty-state {
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--accent-soft);
  padding: 1rem 1.1rem;
  margin: 0.5rem 0 0.75rem;
  text-align: left;
}
.pack-empty-title {
  margin: 0 0 0.25rem;
  font-weight: 600;
  font-size: 0.95rem;
}
.pack-empty-state .btn-row-add {
  margin-top: 0.55rem;
}
.pack-checklist-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.5rem;
  align-items: start;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
}
.pack-owner {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 700;
}
.pack-owner-group { margin: 1rem 0; }
.pack-owner-group h3 {
  font-size: 0.95rem;
  margin: 0 0 0.35rem;
}
.pack-sig-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}
@media (max-width: 700px) {
  .pack-sig-grid { grid-template-columns: 1fr; }
}
.pack-callout {
  background: var(--accent-soft);
  border: 1px solid #d5c9e4;
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  margin: 0.5rem 0 0.85rem;
  font-size: 0.9rem;
}
.pack-danger-note {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  font-size: 0.88rem;
  margin-bottom: 0.75rem;
}
.btn-row-add {
  margin-top: 0.5rem;
}



/* Jordan calm PDF primary + toast */
.pdf-panel .pdf-lead {
  margin-bottom: 0.85rem;
  max-width: 42rem;
}
.pdf-primary-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1rem;
  margin-bottom: 0.85rem;
}
.btn.btn-primary-action {
  font-size: 1.05rem;
  padding: 0.95rem 1.75rem;
  box-shadow: 0 6px 18px rgba(96, 69, 129, 0.42);
}
.pdf-toast {
  font-weight: 600;
}
.pdf-toast.pdf-toast-ok {
  color: var(--accent);
}
.pdf-panel details.logo-settings {
  margin-top: 0.25rem;
}
.pdf-panel details.logo-settings > summary.logo-label {
  cursor: pointer;
  list-style: none;
}
.pdf-panel details.logo-settings > summary.logo-label::-webkit-details-marker {
  display: none;
}
.pdf-panel details.logo-settings > summary.logo-label::before {
  content: "▸ ";
  color: var(--muted);
  font-weight: 400;
}
.pdf-panel details.logo-settings[open] > summary.logo-label::before {
  content: "▾ ";
}

/* CSV template downloads + PDF panel */
.template-downloads {
  margin: 0.75rem 0 1rem;
  padding: 0.75rem;
  border: 1px dashed var(--border, #ccc);
  border-radius: 8px;
  background: var(--panel-muted, rgba(0, 0, 0, 0.02));
}
.template-help {
  margin-top: 0;
}
.template-btns {
  flex-wrap: wrap;
  gap: 0.5rem;
}
.pdf-panel .upload-row {
  align-items: center;
  gap: 0.75rem;
}

.logo-settings {
  margin: 0.75rem 0 0.25rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--accent-soft);
}
.logo-label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
  color: var(--ink);
}
.logo-preview-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.6rem;
}
.club-logo-preview {
  max-height: 56px;
  max-width: 160px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 4px;
}


.pack-nav-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: flex-start;
}
.pack-nav-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--accent-soft);
}
.pack-nav-group-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  margin-right: 0.25rem;
}
.pack-subhead {
  margin: 1rem 0 0.4rem;
  font-size: 0.95rem;
  color: var(--accent);
}
.pack-fields { margin-bottom: 0.75rem; }
.pack-check { display: flex; align-items: center; gap: 0.4rem; }


/* Booster Baton brand chrome */
.brand-mark {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.brand-logo {
  display: block;
  width: min(260px, 68vw);
  height: auto;
}
.brand-logo-compact {
  width: 48px;
  height: auto;
  display: none;
}
.brand-wordmark h1 {
  margin: 0;
  font-size: 1.65rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--accent);
}
@media (max-width: 640px) {
  .brand-logo { display: none; }
  .brand-logo-compact { display: block; }
}
.footer-brand {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.4;
}
.footer-brand .footer-logo {
  width: 56px;
  height: auto;
  opacity: 0.95;
  flex-shrink: 0;
}
.footer-copy { flex: 1; }
.footer-pricing { margin-top: 0.25rem; }

.pack-nav-group-label {
  color: var(--accent);
}
.pack-subhead {
  color: var(--accent);
}
.logo-label {
  color: var(--ink);
}
.accent-rule {
  height: 3px;
  width: 3.5rem;
  background: var(--apricot);
  border-radius: 999px;
  margin: 0.65rem auto 0;
}


/* Jordan eval UX: first 30 / privacy / progress / footer pricing */
.first30-card .first30-steps {
  margin: 0.35rem 0 0;
  padding-left: 1.25rem;
  color: var(--ink);
  line-height: 1.45;
}
.first30-card .first30-steps li {
  margin: 0.35rem 0;
}
.privacy-note {
  border-left: 3px solid var(--accent);
}
.pack-progress {
  background: var(--accent-soft);
  border-color: #d5c9e4;
}
.pack-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.pack-progress a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pack-progress-badge {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--warn);
  white-space: nowrap;
}
.pack-progress-badge.is-complete {
  color: #166534;
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.artifact-list {
  margin: 0.35rem 0 0.5rem;
  padding-left: 1.2rem;
}

/* Jordan r2: pricing prominence + home pre-pack cards */
.pricing-callout {
  border-left: 4px solid var(--apricot, #e8a87c);
  background: #fff8f2;
}
.pricing-callout .pricing-amount,
.footer-pricing .pricing-amount,
.pricing-callout-inline .pricing-amount {
  color: var(--accent, #5b2c6f);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.footer-pricing {
  margin-top: 0.35rem;
  font-size: 0.98rem;
  line-height: 1.4;
}
.footer-pricing.pricing-callout-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  background: #fff8f2;
  border: 1px solid #f0d7c2;
  color: var(--ink);
}
.footer-pricing .pricing-label {
  font-weight: 600;
}
.home-prepack-card {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}
.view-customer-home-pricing,
#home-pricing-callout {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

#officers label { display:block; margin-bottom:.6rem; }
#officers input { display:block; width:100%; box-sizing:border-box; margin-top:.25rem; }

#readiness-panel form {display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem;margin:1rem 0}
#readiness-panel label {display:block;margin:.7rem 0} #readiness-panel input,#readiness-panel select {display:block;width:100%;box-sizing:border-box}
#readiness-panel .card {margin:1rem 0} #readiness-brief {border:1px solid var(--line);padding:1rem;margin:1rem 0}
@media print {body.printing-readiness * {visibility:hidden} body.printing-readiness #readiness-brief,body.printing-readiness #readiness-brief * {visibility:visible} body.printing-readiness #readiness-brief {position:absolute;left:0;top:0;width:95%;font-size:10pt;border:0} }

#readiness-panel input,#readiness-panel select {padding:.65rem .75rem;border:1px solid var(--line);border-radius:.5rem;background:#fff;font:inherit;color:inherit;min-height:42px} #readiness-panel button {margin:.25rem .4rem .25rem 0} #readiness-panel summary {cursor:pointer;padding:.5rem 0;font-weight:600}

@media print {
  body.printing-readiness *:not(:has(#readiness-brief)):not(#readiness-brief):not(#readiness-brief *) {display:none!important}
  body.printing-readiness *:has(#readiness-brief) {display:block!important;margin:0!important;padding:0!important;min-height:0!important;width:auto!important}
  body.printing-readiness #readiness-brief {position:static!important;width:auto!important;padding:0!important;margin:0!important}
}

#repositories-panel form,#fundraising-links-panel form {display:grid;gap:.8rem;margin:1rem 0;max-width:650px}
#repositories-panel input,#repositories-panel textarea,#fundraising-links-panel input,#fundraising-links-panel textarea {display:block;width:100%;box-sizing:border-box;padding:.65rem;border:1px solid var(--line);border-radius:.5rem;font:inherit}
.saved-link-list article {margin:1rem 0}.saved-link-list button,.saved-link-list a.btn {margin:.5rem .5rem .5rem 0}.saved-link-list [data-qr-preview] {overflow-wrap:anywhere}.saved-link-list canvas {display:block;margin-top:1rem}

.workspace-shortcuts {margin-bottom:1rem}.workspace-shortcuts a {margin:.3rem .4rem .3rem 0}

#inventory-references-panel form {display:grid;gap:.8rem;margin:1rem 0;max-width:650px} #inventory-references-panel input:not([type=checkbox]),#inventory-references-panel textarea {display:block;width:100%;box-sizing:border-box;padding:.65rem;border:1px solid var(--line);border-radius:.5rem;font:inherit}

#committees-panel label,#helpful-links-panel label {display:block;margin:.7rem 0} #committees-panel input,#committees-panel textarea,#helpful-links-panel input,#helpful-links-panel textarea {display:block;width:100%;box-sizing:border-box;padding:.6rem;border:1px solid var(--line);border-radius:.5rem;font:inherit} #committees-panel article {margin:1rem 0} #committees-panel button {margin:.5rem .5rem .5rem 0}

.fundraising-filters { display:flex; flex-wrap:wrap; gap:1rem; }
#fundraising-ideas-panel label { display:block; margin:0.65rem 0; }
#fundraising-ideas-panel input, #fundraising-ideas-panel textarea { display:block; width:100%; box-sizing:border-box; }
#fundraising-ideas-panel summary { cursor:pointer; font-weight:600; }
#fundraising-ideas-panel [data-preview] a { display:block; margin:0.5rem 0; }

.club-overview-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:1rem; }
.overview-card { display:block; color:inherit; text-decoration:none; margin:0; }
.overview-card:hover, .overview-card:focus-visible { outline:2px solid #604586; }
.overview-card span { color:#604586; font-weight:600; }

#view-pilot label {display:block;margin:0.7rem 0;}
#view-pilot input:not([type=checkbox]), #view-pilot textarea, #view-pilot select {display:block;width:100%;box-sizing:border-box;}
#view-pilot article p {white-space:pre-wrap;overflow-wrap:anywhere;}

body.pilot-layout .watermark-banner {display:none;}

/* Quickstart: a calm, readable guide that works as a shared handout too. */
#view-quickstart { --qs-purple:#614581; --qs-line:#ded3eb; color:#30283a; max-width:1120px; margin-inline:auto; }
.qs-hero { display:grid; grid-template-columns:1.3fr 1fr; gap:2rem; align-items:center; padding:clamp(1.4rem,4vw,3rem); background:linear-gradient(125deg,#f5f0fa,#fff8eb); border:1px solid var(--qs-line); border-radius:24px; }
.qs-hero h2 { font-size:clamp(2rem,4vw,3.4rem); line-height:1.08; color:var(--qs-purple); margin:.5rem 0 1.2rem; letter-spacing:-.025em; }
.qs-hero p { max-width:56ch; }
.qs-lead { font-size:1.2rem; line-height:1.5; }
.qs-hero img { width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:24px; }
.qs-actions { display:flex; gap:.65rem; flex-wrap:wrap; align-items:center; margin-top:1.2rem; }
.qs-actions .btn { white-space:normal; text-align:center; }
.qs-section { margin:2.25rem 0; }
#view-quickstart h3 { color:var(--qs-purple); font-size:1.5rem; margin:0 0 .75rem; }
#view-quickstart h4 { font-size:1.2rem; margin:.6rem 0; }
#view-quickstart p, #view-quickstart li { line-height:1.6; }
.qs-doors, .qs-roles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.qs-doors article { background:white; padding:1.4rem; border:1px solid var(--qs-line); border-radius:16px; display:flex; flex-direction:column; }
.qs-doors article>a { margin-top:auto; font-weight:650; }
.qs-tag { color:var(--qs-purple); font-size:.85rem; font-weight:700; }
.qs-note { background:#f2edf8; border-left:4px solid #a58cbf; padding:1rem 1.3rem; border-radius:0 12px 12px 0; }
.qs-roles p { margin:0; padding:1.2rem; background:#faf8fc; border-radius:12px; border:1px solid var(--qs-line); }
.qs-roles strong { display:inline-block; color:var(--qs-purple); margin-bottom:.35rem; }
#qs-steps { scroll-margin-top:2rem; }
.qs-steps { display:grid; gap:.85rem; margin-top:1.5rem; }
.qs-step { border:1px solid var(--qs-line); background:white; border-radius:16px; overflow:hidden; }
.qs-step summary { display:flex; align-items:center; gap:1rem; padding:1.25rem; cursor:pointer; list-style:none; }
.qs-step summary::-webkit-details-marker { display:none; }
.qs-step summary::after { content:'+'; font-size:1.6rem; color:var(--qs-purple); }
.qs-step[open] summary::after { content:'−'; }
.qs-step summary>span:nth-child(2) { flex:1; }
.qs-step summary strong { font-size:1.15rem; color:var(--qs-purple); }
.qs-step summary small { display:block; margin-top:.2rem; font-size:.95rem; line-height:1.4; }
.qs-number { flex:0 0 2.6rem; width:2.6rem; height:2.6rem; display:grid; place-items:center; border-radius:50%; background:#eee7f5; color:var(--qs-purple); font-size:1.1rem; font-weight:700; }
.qs-time { font-size:.85rem; white-space:nowrap; color:#65586e; }
.qs-step[open] summary { background:#faf8fc; border-bottom:1px solid var(--qs-line); }
.qs-step-body { padding:1.2rem 1.6rem 1.6rem; max-width:85ch; }
.qs-step-body li { padding-left:.2rem; margin-bottom:.65rem; }
.qs-back { margin:1.4rem 0 0; padding:1rem 1.2rem; background:#f2edf8; border:1px solid var(--qs-line); border-radius:12px; }
.qs-back .eyebrow { margin:0 0 .4rem; font-size:.72rem; letter-spacing:.14em; font-weight:700; color:var(--qs-purple); }
.qs-back p { margin:.4rem 0; }
.qs-back p:last-child { margin-bottom:0; }

/* First-session returns: the answer half of the four passes. Severity is
   carried by a left rule and a pill, never by color alone. */
.returns { margin:1.5rem 0 2rem; }
.returns-head h3 { margin:0 0 .25rem; }
.returns-head p { margin:0 0 1rem; max-width:70ch; }
.returns-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem; }
.returns-card { background:var(--card); border:1px solid var(--line); border-left:4px solid var(--line);
  border-radius:var(--radius); padding:1rem 1.1rem; }
.returns-card.tone-ok { border-left-color:#2c6350; }
.returns-card.tone-warn { border-left-color:var(--warn); }
.returns-card.tone-late { border-left-color:#8e2a34; }
.returns-card header { display:flex; flex-wrap:wrap; gap:.4rem .75rem; align-items:baseline;
  justify-content:space-between; margin-bottom:.6rem; }
.returns-card h4 { margin:0; font-size:1.02rem; }
.returns-pill { font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.15rem .5rem; border-radius:6px; border:1px solid var(--line); color:var(--muted); white-space:nowrap; }
.returns-pill.tone-ok { background:#e7f1ec; border-color:#b9d6c9; color:#2c6350; }
.returns-pill.tone-warn { background:var(--warn-bg); border-color:#e8ce92; color:var(--warn); }
.returns-pill.tone-late { background:#fbedee; border-color:#e5b9bd; color:#8e2a34; }
.returns-card ul { list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.returns-card li { font-size:.93rem; line-height:1.45; padding-left:1.1rem; position:relative; }
.returns-card li::before { content:""; position:absolute; left:0; top:.5em; width:.5rem; height:.5rem;
  border-radius:50%; background:var(--line); }
.returns-card li.sev-ok::before { background:#2c6350; }
.returns-card li.sev-warn::before { background:var(--warn); }
.returns-card li.sev-late::before { background:#8e2a34; }
.returns-card li.sev-info::before { background:transparent; border:1px solid var(--muted); }
.returns-card li a { color:var(--accent); font-weight:600; white-space:nowrap; }
@media (max-width:700px) { .returns-grid { grid-template-columns:1fr; } }

/* Quick capture: the two fields that are true the moment you think of the
   task, with owners and recurrence one click away but still in the form. */
.resp-add > summary { font-weight:600; }
.resp-more { margin:.25rem 0 .75rem; border:1px dashed var(--line); border-radius:10px; padding:.5rem .75rem; }
.resp-more > summary { cursor:pointer; font-size:.92rem; font-weight:600; color:var(--accent); }
.resp-more[open] > summary { margin-bottom:.5rem; }
.resp-more .muted { font-weight:400; }

/* Pilot marks the CLUB, not the person looking at it — one officer can belong
   to a pilot club and an ordinary one, so this sits beside the club name. */
/* Club switcher: names the club on every page, and picks between them when
   there is more than one. Sits with the account controls because it answers
   "who and where am I", not "what am I looking at". */
.club-switcher { display:flex; align-items:center; gap:.4rem; }
.club-switcher.hidden { display:none; }
.club-current { font-weight:600; font-size:.9rem; color:var(--accent); background:var(--accent-soft);
  border:1px solid var(--line); border-radius:999px; padding:.25rem .7rem; max-width:30ch;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.club-switch-label { font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600; }
.club-switch { font:inherit; font-size:.9rem; font-weight:600; color:var(--accent); background:var(--card);
  border:1px solid var(--line); border-radius:9px; padding:.28rem 1.6rem .28rem .6rem; max-width:28ch; cursor:pointer; }
.club-switch:hover { border-color:var(--accent); }
.club-switch:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
@media (max-width:700px) { .club-switch-label { display:none; } .club-current, .club-switch { max-width:14ch; } }

.pilot-badge { display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:.1rem .45rem; border-radius:5px; vertical-align:.1em;
  background:var(--accent-soft); color:var(--accent); border:1px solid var(--line); }
.resp-quick label, .resp-full label { display:grid; gap:.2rem; margin-bottom:.7rem; font-weight:600; font-size:.9rem; }
.resp-quick input, .resp-quick select, .resp-full input, .resp-full select { font:inherit; font-weight:400; padding:.45rem .6rem;
  border:1px solid var(--line); border-radius:8px; max-width:26rem; width:100%; }

/* CSV import is the shortcut, not the front door: typing one balance is the
   default path, so the import apparatus folds away until it is wanted. */
.csv-import { margin:1.25rem 0 .5rem; border:1px solid var(--line); border-radius:12px; padding:.6rem .9rem; background:var(--accent-soft); }
.csv-import > summary { cursor:pointer; font-weight:600; color:var(--accent); }
.csv-import[open] > summary { margin-bottom:.6rem; }
.csv-import label { display:block; font-weight:600; font-size:.9rem; margin:.6rem 0 .2rem; }

/* The guide, once a club is loaded: the written promise is replaced by what
   that club's record actually says, tinted by how the pass is doing. */
.qs-progress { margin:.6rem 0 1rem; font-size:1.05rem; }
.qs-back-live { border-left:4px solid var(--qs-line); }
.qs-back-live.tone-ok { border-left-color:#2c6350; }
.qs-back-live.tone-warn { border-left-color:#8a5a00; }
.qs-back-live.tone-late { border-left-color:#8e2a34; }
.qs-back .returns-pill { margin-left:.4rem; vertical-align:baseline; }
.qs-back .returns-findings { list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.qs-back .returns-findings li { padding-left:1.1rem; position:relative; }
.qs-back .returns-findings li::before { content:""; position:absolute; left:0; top:.55em; width:.5rem; height:.5rem;
  border-radius:50%; background:var(--qs-line); }
.qs-back .returns-findings li.sev-ok::before { background:#2c6350; }
.qs-back .returns-findings li.sev-warn::before { background:#8a5a00; }
.qs-back .returns-findings li.sev-late::before { background:#8e2a34; }
.qs-back .returns-findings li.sev-info::before { background:transparent; border:1px solid #65586e; }
.qs-back .returns-findings a { font-weight:600; white-space:nowrap; }
.qs-cadence { display:grid; grid-template-columns:180px 1fr; gap:2rem; align-items:center; padding:2rem; background:#fff8ee; border-radius:20px; margin:2rem 0; }
.qs-cadence img { width:100%; height:250px; object-fit:cover; border-radius:15px; }
.qs-boundary { border:1px solid var(--qs-line); background:#f3eef8; padding:1.6rem; border-radius:16px; }
.qs-glossary { padding:1.2rem 0; }
.qs-glossary summary { cursor:pointer; font-weight:650; color:var(--qs-purple); }
.qs-glossary dt { font-weight:700; margin-top:.9rem; }
.qs-glossary dd { margin-left:0; line-height:1.5; }
#view-quickstart :is(a,button,summary):focus-visible { outline:3px solid #946eb4; outline-offset:4px; }
@media(max-width:700px) {
 .qs-hero { grid-template-columns:1fr; gap:1rem; }
 .qs-hero img { max-height:200px; aspect-ratio:2; }
 .qs-doors,.qs-roles { grid-template-columns:1fr; }
 .qs-cadence { grid-template-columns:1fr; padding:1.3rem; }
 .qs-cadence img { display:none; }
 .qs-time { display:none; }
 .qs-step summary { padding:1rem; gap:.65rem; }
 .qs-step-body { padding:1rem; }
}
@media print {
 body.printing-quickstart { background:white!important; }
 body.printing-quickstart #site-navigation, body.printing-quickstart .role-bar, body.printing-quickstart .demo-banner { display:none!important; }
 body.printing-quickstart #view-quickstart { max-width:none; margin:0; font-size:10pt; }
 body.printing-quickstart .qs-actions, body.printing-quickstart [data-qs-status] { display:none!important; }
 body.printing-quickstart .qs-hero { padding:1rem; grid-template-columns:2fr 1fr; }
 body.printing-quickstart .qs-hero h2 { font-size:25pt; }
 body.printing-quickstart .qs-step { break-inside:avoid; }
 body.printing-quickstart .qs-back { break-inside:avoid; background:#f6f3fa; }
 body.printing-quickstart .qs-step-body { max-width:none; }
 body.printing-quickstart .qs-section { margin:1rem 0; }
 body.printing-quickstart .qs-cadence { grid-template-columns:1fr; }
 body.printing-quickstart .qs-cadence img { display:none; }
 body.printing-quickstart details::details-content { content-visibility:visible!important; }
}

body.quickstart-layout .watermark-banner { display:none; }
[data-qs-status] { overflow-wrap:anywhere; }
@media print {
 body.printing-quickstart .shell { max-width:none!important; padding:0!important; margin:0!important; }
 body.printing-quickstart .watermark-banner { display:none!important; }
}

/* ---- Trust & privacy ---------------------------------------------------
   Long-form public page. Reads like a document, not a dashboard: one column,
   generous measure, and the "never stored" block visually separated because
   it is the part a board actually needs to find. */
#view-trust { max-width: 62rem; margin: 0 auto; }
#view-trust h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.2; margin: .3rem 0 0; }
.trust-lead { max-width: 46rem; color: var(--muted); font-size: 1.05rem; margin: .9rem 0 0; }
.trust-block { margin: 2.2rem 0 0; padding: 0; border: 0; }
.trust-block + .trust-block { border-top: 1px solid var(--line); padding-top: 1.8rem; }
.trust-block h3 { font-size: 1.15rem; margin: 0 0 .6rem; }
.trust-block p { max-width: 46rem; margin: 0 0 .8rem; line-height: 1.6; }
.trust-list { max-width: 46rem; margin: 0 0 .9rem; padding-left: 1.2rem; }
.trust-list li { margin: 0 0 .4rem; line-height: 1.55; }
.trust-never {
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
}
.trust-never + .trust-block { border-top: 0; padding-top: 0; }
.trust-caveat {
  background: var(--warn-bg);
  border-radius: 10px;
  padding: .9rem 1rem;
  margin-top: 1rem;
  color: var(--warn);
}
.trust-status { color: var(--muted); }
.trust-status h3 { color: var(--ink); }
.trust-contact { font-weight: 600; }
@media (max-width: 700px) {
  .trust-never { padding: 1.1rem; }
}

/* ── Home page (bb-*) ─────────────────────────────────────────────────────
   Full-bleed marketing bands for #view-marketing. Everything here reuses the
   existing brand tokens; nothing new is invented. Bands escape .shell's
   1120px column with a negative inline margin and matching padding, which
   keeps content aligned to the column while the background spans the window.
   ------------------------------------------------------------------------ */
/* The bands bleed with a negative inline margin measured in vw, which counts
   the scrollbar; clip the overflow rather than let it scroll sideways. */
html:has(body.public-layout), body.public-layout { overflow-x: clip; }

/* The logo already carries the name; repeating it above the hero headline
   read as saying the same thing twice. Portal pages keep the wordmark. */
body.public-layout .brand-wordmark { display: none; }
body.public-layout .brand { margin-bottom: 0.75rem; }

.bb-home { margin-bottom: 0; }
.bb-band { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); }
.bb-band-hero { background: radial-gradient(ellipse at 70% -20%, #ffffff 0%, var(--paper) 52%, var(--accent-soft) 100%); border-bottom: 1px solid var(--line); }
.bb-band-white { background: var(--card); border-bottom: 1px solid var(--line); }
.bb-band-paper { background: var(--paper); }
.bb-band-dark { background: var(--ink); }
.bb-band-plum { background: var(--accent); }

.bb-wrap { max-width: 1120px; margin: 0 auto; padding: 6.5rem 0; }
.bb-wrap.bb-narrow { max-width: 62rem; }
.bb-wrap.bb-tight { max-width: 46rem; }
.bb-center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }

.bb-display { font-size: clamp(2.4rem, 4.6vw, 3.9rem); line-height: 1.04; letter-spacing: -0.02em; margin: 0.4rem 0 0; }
.bb-h2 { font-size: clamp(1.7rem, 3vw, 2.45rem); line-height: 1.14; letter-spacing: -0.015em; margin: 0; }
.bb-lead { font-size: 1.15rem; line-height: 1.58; color: var(--muted); margin: 0; max-width: 54ch; }
.bb-center .bb-lead { max-width: 56ch; }
.bb-small { font-size: 0.87rem; color: var(--muted); margin: 0; }
.bb-smallstrong { font-size: 0.95rem; font-weight: 600; color: var(--muted); margin: 0; }
.bb-micro { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; color: var(--accent); margin: 0; }
.bb-figure { font-size: 1.45rem; font-weight: 700; margin: 0.15rem 0 0; }
.bb-name { font-size: 1.05rem; font-weight: 600; margin: 0; }
.bb-dim { color: #c9c0d4; font-size: 0.95rem; margin: 0; }
.bb-more { font-weight: 600; }
/* styles.css sets no global link colour, so anything not covered by a
   component rule falls back to browser blue. Scope a brand link here. */
.bb-home a:not(.btn) { color: var(--accent); text-decoration-color: rgba(96, 69, 129, 0.35); text-underline-offset: 3px; }
.bb-home a:not(.btn):hover { text-decoration-color: currentColor; }

/* hero -------------------------------------------------------------------- */
/* .brand-story-hero (kept for the public-surface test) forces every non-figure
   child into column 1 — undo that here so the frame can sit beside the copy. */
.bb-hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4.5rem; align-items: center; }
.bb-hero > :not(figure) { grid-column: auto; }
.bb-hero-copy { display: flex; flex-direction: column; gap: 1.15rem; }
.bb-hero .marketing-actions { margin-top: 0.5rem; }

/* the drawn product frame ------------------------------------------------- */
.bb-frame { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 24px 60px rgba(48, 43, 56, 0.14); overflow: hidden; }
.bb-frame-bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--line); background: var(--paper); }
.bb-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--line); }
.bb-frame-title { font-size: 0.78rem; font-weight: 600; color: var(--muted); margin-left: 0.25rem; }
.bb-frame-body { padding: 1.3rem 1.2rem 1.4rem; display: flex; flex-direction: column; gap: 0.75rem; }
.bb-months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.42rem; }
.bb-months span { text-align: center; padding: 0.55rem 0; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 0.72rem; font-weight: 700; }
.bb-months span.is-on { background: var(--accent); color: #fff; }
.bb-months span.is-off { background: #f6f3fa; color: var(--muted); font-weight: 600; }
.bb-rowcard { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: 10px; }
.bb-right { text-align: right; }
.bb-line { display: flex; align-items: center; gap: 0.7rem; padding: 0.8rem 1rem; border: 1px solid var(--line); border-radius: 10px; }
.bb-line-text { font-size: 0.92rem; flex-grow: 1; }
.bb-pip { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); flex-shrink: 0; }
.bb-pip-apricot { background: var(--apricot); }

/* problem trio ------------------------------------------------------------ */
.bb-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.15rem; width: 100%; text-align: left; margin-top: 1rem; }
.bb-quote { display: flex; flex-direction: column; gap: 0.55rem; padding: 1.5rem 1.4rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.bb-quote p { margin: 0; color: var(--muted); font-size: 0.97rem; line-height: 1.5; }
.bb-quote-q { font-size: 1.05rem; font-weight: 600; color: var(--ink) !important; }

/* alternating rows -------------------------------------------------------- */
.bb-rows { display: flex; flex-direction: column; gap: 6rem; padding: 6.5rem 0; }
.bb-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4.5rem; align-items: center; }
.bb-row-copy { display: flex; flex-direction: column; gap: 1rem; }
.bb-row-flip .bb-row-copy { order: 2; }
.bb-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.7rem; }
.bb-panel-head { display: flex; align-items: baseline; justify-content: space-between; }
.bb-task { display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1rem; border-radius: 10px; border: 1px solid var(--line); }
.bb-task.is-on { background: var(--accent-soft); border-color: transparent; }
.bb-mon { font-size: 0.76rem; font-weight: 700; color: var(--muted); width: 2.7rem; flex-shrink: 0; }
.bb-task.is-on .bb-mon { color: var(--accent); }
.bb-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.bb-stat { padding: 0.95rem 1rem; border-radius: 10px; background: var(--paper); }
.bb-note { margin: 0; padding: 0.8rem 1rem; border-left: 4px solid var(--apricot); background: var(--paper); border-radius: 0 10px 10px 0; font-size: 0.92rem; line-height: 1.5; color: var(--muted); }
.bb-handoff { display: flex; flex-direction: column; gap: 0.85rem; }
.bb-pass { display: flex; align-items: center; gap: 1.1rem; }
.bb-person { flex-grow: 1; padding: 1.15rem 1.25rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.bb-person.is-on { background: var(--accent-soft); border-color: var(--accent); }
.bb-person.is-on .bb-name, .bb-person.is-on .bb-small { color: var(--accent); }
.bb-arrow { color: var(--accent); flex-shrink: 0; }
.bb-bars { display: flex; flex-direction: column; gap: 0.45rem; margin: 0.25rem 0; }
.bb-bars span { height: 7px; border-radius: 999px; background: var(--accent-soft); }
.bb-bars span:nth-child(2) { width: 88%; }
.bb-bars span:nth-child(3) { width: 62%; }

/* video ------------------------------------------------------------------- */
.bb-band-dark .bb-h2 { color: #fff; }
.bb-video { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45); display: block; }

/* closing ask ------------------------------------------------------------- */
.bb-band-plum .bb-h2, .bb-band-plum p { color: #fff; }
.bb-priceblock { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.bb-priceblock .pricing-panel { width: 100%; text-align: left; margin-top: 1rem; padding: 2rem 2.25rem; }
.bb-priceblock .pricing-headline { font-size: 1.45rem; }
.bb-close { gap: 1.2rem; }
.bb-close p { color: #e3daec !important; font-size: 1.1rem; line-height: 1.55; max-width: 52ch; margin: 0; }
.bb-btn-invert { background: #fff; color: var(--accent); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); margin-top: 0.4rem; }
.bb-btn-invert:hover { background: #fff; }

/* reveals — the hiding rule only applies once the script opts in ---------- */
body.bb-anim .bb-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1); }
body.bb-anim .bb-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  body.bb-anim .bb-reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 900px) {
  .bb-wrap { padding: 3.6rem 0; }
  .bb-rows { padding: 3.6rem 0; gap: 3.6rem; }
  .bb-hero, .bb-row { display: grid; grid-template-columns: 1fr; gap: 2.2rem; }
  .bb-row-flip .bb-row-copy { order: 0; }
  .bb-three { grid-template-columns: 1fr; }
  .bb-display { font-size: clamp(2.05rem, 8vw, 2.6rem); }
  .bb-months { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bb-months span:nth-child(n + 5) { display: none; }
  .bb-close p, .bb-lead { font-size: 1.02rem; }
}

/* Help & support ---------------------------------------------------------
   Reuses the card and button system; only the article disclosure, the form
   fields and the subscription badge are new. */
.help-intro, .help-articles, .help-form-card { margin-bottom: 1rem; }
.help-intro p { max-width: 62ch; }

.help-article { border-bottom: 1px solid var(--line); }
.help-article:last-of-type { border-bottom: 0; }
.help-article > summary {
  cursor: pointer; padding: 0.95rem 0; font-weight: 600; font-size: 1rem;
  list-style: none; display: flex; align-items: baseline; gap: 0.65rem;
}
.help-article > summary::-webkit-details-marker { display: none; }
.help-article > summary::before {
  content: "+"; color: var(--accent); font-weight: 700; width: 0.9rem; flex-shrink: 0;
}
.help-article[open] > summary::before { content: "\2212"; }
.help-article > summary:hover { color: var(--accent); }
.help-article > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.help-answer { padding: 0 0 1.05rem 1.55rem; max-width: 66ch; }
.help-answer p, .help-answer ul { margin: 0 0 0.7rem; line-height: 1.6; }
.help-answer ul { padding-left: 1.15rem; }
.help-answer li { margin-bottom: 0.35rem; }
.help-answer a { color: var(--accent); }

.help-label { display: block; font-weight: 600; font-size: 0.92rem; margin: 1rem 0 0.35rem; }
.help-optional { font-weight: 400; color: var(--muted); }
.help-input {
  width: 100%; max-width: 46rem; padding: 0.6rem 0.7rem; font: inherit;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink);
}
.help-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
textarea.help-input { resize: vertical; min-height: 7.5rem; }
.help-count { font-size: 0.8rem; color: var(--muted); margin: 0.35rem 0 0; }
.help-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.1rem; }
.help-status { font-size: 0.92rem; color: var(--muted); }
.help-status.is-error { color: #a1343a; font-weight: 600; }
.help-sent { margin: 0; padding: 1rem 1.15rem; border-left: 4px solid var(--accent); background: var(--paper); border-radius: 0 10px 10px 0; line-height: 1.55; }

/* Admin: is the support address actually receiving anything? */
.support-state { font-size: 0.9rem; font-weight: 600; margin: 0.55rem 0 0.2rem; }
.support-state.is-ok { color: #2f6b46; }
.support-state.is-warn { color: #8a5a12; }

@media (max-width: 700px) {
  .help-answer { padding-left: 0; }
  .help-actions { align-items: flex-start; flex-direction: column; gap: 0.6rem; }
}

/* Site settings ----------------------------------------------------------
   Its own route, not a card on the admin home: configuration and daily work
   are different jobs. Reuses the help form controls where they match. */
.settings-intro, .settings-section { margin-bottom: 1rem; }
.settings-intro p, .settings-section > .muted { max-width: 64ch; }
.settings-label { display: block; font-weight: 600; font-size: 0.92rem; margin: 1.1rem 0 0.35rem; }
.settings-row { display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; max-width: 46rem; }
.settings-input {
  flex: 1 1 22rem; min-width: 0; padding: 0.6rem 0.7rem; font: inherit;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink);
}
.settings-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.settings-msg { margin: 0.45rem 0 0; max-width: 64ch; line-height: 1.5; }
.settings-extra {
  margin: 0.75rem 0 0; padding: 0.75rem 0.95rem; border-left: 4px solid var(--apricot);
  background: var(--paper); border-radius: 0 10px 10px 0; font-size: 0.9rem; line-height: 1.5;
  color: var(--muted); max-width: 64ch;
}
.settings-note { margin-top: 1.25rem; max-width: 64ch; }
.settings-note > summary { cursor: pointer; font-size: 0.88rem; font-weight: 600; color: var(--muted); }
.settings-note > summary:hover { color: var(--accent); }
.settings-note > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.settings-note p { margin: 0.6rem 0 0; font-size: 0.9rem; line-height: 1.6; color: var(--muted); }

@media (max-width: 700px) {
  .settings-row { flex-direction: column; align-items: stretch; }
  .settings-row .btn { width: 100%; }
}

/* Pilot page (signed out) ------------------------------------------------
   A reading page, not a product pitch — the home page does the pitch. One
   measured column, generous spacing between blocks, and the form treated as
   the last section rather than the point of the page. */
.pilot-page { max-width: 44rem; margin: 0 auto; }
.pilot-lede { margin-bottom: 2.6rem; }
.pilot-headline {
  font-size: clamp(1.8rem, 3.6vw, 2.5rem); line-height: 1.12; letter-spacing: -0.015em;
  margin: 0.45rem 0 0;
}
.pilot-intro { font-size: 1.1rem; line-height: 1.6; color: var(--muted); margin: 1rem 0 0; }

.pilot-block { margin-bottom: 2.6rem; }
.pilot-block + .pilot-block { border-top: 1px solid var(--line); padding-top: 2.2rem; }
.pilot-h3 { font-size: 1.12rem; font-weight: 700; margin: 0 0 1rem; }
.pilot-block p { margin: 0 0 1rem; line-height: 1.62; }
.pilot-block p:last-child { margin-bottom: 0; }
.pilot-block strong { color: var(--ink); }

/* The one-line ask, given the weight it deserves. */
.pilot-ask {
  font-size: 1.15rem; font-weight: 600; color: var(--accent);
  border-left: 4px solid var(--accent); padding-left: 1rem; margin: 0 0 1.1rem !important;
}
.pilot-contact a { color: var(--accent); font-weight: 600; }

/* form ------------------------------------------------------------------- */
.pilot-form { margin-top: 0.4rem; }
#view-pilot .pilot-field { display: block; margin: 0 0 1.25rem; }
#view-pilot .pilot-field-label { display: block; font-weight: 600; font-size: 0.95rem; }
#view-pilot .pilot-field-help {
  display: block; font-size: 0.85rem; color: var(--muted); line-height: 1.45;
  font-weight: 400; margin-top: 0.15rem;
}
#view-pilot .pilot-field input {
  margin-top: 0.4rem; padding: 0.62rem 0.7rem; font: inherit;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink);
}
.pilot-field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.pilot-form .btn { align-self: flex-start; margin-top: 0.3rem; }
.pilot-under { font-size: 0.88rem; color: var(--muted); margin: 0.8rem 0 0 !important; }
.pilot-under a { color: var(--accent); }
.pilot-sent p { font-size: 1.05rem; }
.pilot-sent a { color: var(--accent); }

@media (max-width: 700px) {
  .pilot-block { margin-bottom: 2rem; }
  .pilot-block + .pilot-block { padding-top: 1.7rem; }
  .pilot-form .btn { align-self: stretch; text-align: center; }
}