/* Design tokens, from Maria's Pool UX artboards (see DESIGN_UPDATE_PLAN.md §2).
   Every component reads these, so the palette carries pages the designs never covered. */
:root {
  /* Brand. Maria's green is #0a6347 against our previous #0A6346 — the same colour,
     one hex digit apart, so the identity was already right. */
  --pool-primary: #0a6347;
  --pool-primary-darken: #07422f;
  --pool-primary-lighten: #0d825b;
  --pool-accent: #458471;

  /* Text. A three-step ramp replaces the single muted grey, so secondary and
     tertiary text can differ instead of everything non-primary sharing one value. */
  --pool-ink: #14181a;
  --pool-muted: #4c534f;          /* 7.3:1 on the page — safe for body text */
  --pool-muted-soft: #6b716d;     /* 4.6:1 — passes, but only just; use for secondary text */
  /* 2.5:1 on the page. Below the 3:1 floor even for non-text, so this step is for
     decoration and disabled states only — dividers, inactive icons. Never text. */
  --pool-muted-faint: #9a9f9b;

  /* Surfaces. The designs layer tonal creams rather than white cards on white, so the
     page, raised panels and sunken wells are three steps of one warm family. This is the
     change that does most of the visual work — and the reason --pool-surface now exists
     separately from --pool-bg, which previously served as both page and card. */
  --pool-bg: #f7f6f2;
  --pool-surface: #fdfcf8;
  --pool-bg-alt: #eceae2;
  --pool-border: #e3e0d6;
  --pool-border-strong: #dedcd4;

  /* Shape. A scale replaces the single radius; components can adopt it piecemeal. */
  --pool-radius: 12px;
  --pool-radius-sm: 9px;
  --pool-radius-lg: 16px;
  --pool-radius-pill: 999px;

  /* Positive-signal green for text on the pale green tint (#e6f4ec). The obvious #15803d
     measures 4.42:1 there — under AA for the small bold text it's always used for. This is the
     nearest darker step that clears it, at 5.52:1. Kept as a token because the pair appears in
     more than one component and drifted once already. */
  --pool-good-on-tint: #146f36;

  --pool-shadow: 0 6px 24px rgba(10, 99, 70, 0.08);
  --pool-font: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: var(--pool-font);
  color: var(--pool-ink);
  background: var(--pool-bg);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1 0 auto; }

a { color: var(--pool-primary); text-decoration: none; }
a:hover { color: var(--pool-primary-darken); text-decoration: underline; }

h1, h2, h3, h4 { color: var(--pool-ink); line-height: 1.2; margin: 0 0 .5em; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(253, 252, 248, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--pool-border);
}
.header-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: inline-flex; align-items: center; }
.brand:hover { text-decoration: none; }
.brand-logo { height: 34px; width: auto; display: block; }

.site-nav .nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.nav-item { display: flex; align-items: center; }
.nav-link {
  color: var(--pool-ink);
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
}
.nav-link:hover { color: var(--pool-primary); text-decoration: none; background: var(--pool-bg-alt); }
.nav-link-button {
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
}
.form-inline { margin: 0; }

/* ---------- Buttons ---------- */
.btn-pool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--pool-font);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  padding: 12px 22px;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
  text-decoration: none;
}
.btn-pool:hover { text-decoration: none; }
.btn-pool:active { transform: translateY(1px); }
.btn-lg { padding: 15px 28px; font-size: 1.05rem; }
.btn-nav { padding: 9px 18px; }
.btn-block { width: 100%; }

.btn-pool-primary { background: var(--pool-primary); color: #fff; border-color: var(--pool-primary); }
.btn-pool-primary:hover { background: var(--pool-primary-darken); border-color: var(--pool-primary-darken); color: #fff; }

.btn-pool-ghost { background: transparent; color: var(--pool-primary); border-color: var(--pool-primary); }
.btn-pool-ghost:hover { background: var(--pool-primary); color: #fff; }

.btn-pool-light { background: #fff; color: var(--pool-primary); border-color: #fff; }
.btn-pool-light:hover { background: var(--pool-bg-alt); color: var(--pool-primary-darken); }

/* ---------- Hero ---------- */
.hero {
  background-image: url('/images/wave-pattern.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 96px 24px 88px;
}
.hero-inner { max-width: 820px; margin: 0 auto; text-align: center; }
.hero-title {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}
.hero-subtitle {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  color: #fff;
  max-width: 640px;
  margin: 0 auto 32px;
}
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-actions .btn-pool-ghost { color: #fff; border-color: #fff; }
.hero-actions .btn-pool-ghost:hover { background: #fff; color: var(--pool-primary); }

/* ---------- Sections ---------- */
.section { padding: 80px 24px; }
.section-alt { background: var(--pool-bg-alt); }
.section-inner { max-width: 1120px; margin: 0 auto; }
.section-title {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 800;
  text-align: center;
  margin-bottom: 48px;
  color: var(--pool-ink);
}

/* Feature grid (3-up) */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.feature-card {
  background: var(--pool-surface);
  border: 1px solid var(--pool-border);
  border-radius: var(--pool-radius);
  padding: 36px 28px;
  text-align: center;
  box-shadow: var(--pool-shadow);
}
.feature-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pool-bg-alt);
  border-radius: 50%;
}
.feature-icon img { width: 32px; height: 32px; }
.feature-card h3 { font-size: 1.25rem; font-weight: 700; }
.feature-card p { color: var(--pool-muted); margin: 0; }

/* Value list */
.value-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 620px;
  display: grid;
  gap: 16px;
}
.value-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 1.15rem;
  font-weight: 600;
  background: var(--pool-surface);
  border: 1px solid var(--pool-border);
  border-radius: 10px;
  padding: 16px 20px;
}
.value-list .check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  background: var(--pool-primary);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
}

/* Benefit grid (4-up) */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.benefit { text-align: center; }
.benefit-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.benefit-icon img { width: 44px; height: 44px; }
.benefit h4 { font-size: 1.1rem; font-weight: 700; margin-bottom: 6px; }
.benefit p { color: var(--pool-muted); margin: 0; font-size: 0.98rem; }

/* Closing CTA band */
.cta-band {
  background: var(--pool-primary);
  color: #fff;
  padding: 72px 24px;
  text-align: center;
}
.cta-inner { max-width: 720px; margin: 0 auto; }
.cta-band h2 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 800; }
.cta-band p { color: rgba(255, 255, 255, 0.9); font-size: 1.15rem; margin-bottom: 28px; }

/* ---------- Footer ---------- */
.site-footer {
  flex-shrink: 0;
  background: var(--pool-surface);
  border-top: 1px solid var(--pool-border);
  padding: 40px 24px;
}
.footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-tagline { font-weight: 700; color: var(--pool-primary); }
.footer-links { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; flex-wrap: wrap; }
.footer-links a { color: var(--pool-muted); font-weight: 600; }
.footer-links a:hover { color: var(--pool-primary); text-decoration: none; }
.footer-copy { color: var(--pool-muted); font-size: 0.9rem; }

/* ---------- Auth + forms ---------- */
.auth-card {
  max-width: 460px;
  margin: 56px auto;
  background: var(--pool-surface);
  border: 1px solid var(--pool-border);
  border-radius: 16px;
  box-shadow: var(--pool-shadow);
  padding: 40px 36px;
}
.auth-card-wide { max-width: 720px; }
.auth-title { font-size: 1.7rem; font-weight: 800; color: var(--pool-primary); margin-bottom: 6px; }
.auth-subtitle { color: var(--pool-muted); margin-bottom: 26px; }
.auth-alt { text-align: center; margin-top: 22px; color: var(--pool-muted); }

.form-field { margin-bottom: 18px; display: flex; flex-direction: column; }
.form-field label { font-weight: 600; margin-bottom: 6px; font-size: 0.95rem; }
.form-control {
  width: 100%;
  font-family: var(--pool-font);
  font-size: 1rem;
  padding: 11px 14px;
  border: 1px solid var(--pool-border);
  border-radius: 10px;
  background: var(--pool-surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus {
  outline: none;
  border-color: var(--pool-primary);
  box-shadow: 0 0 0 3px rgba(10, 99, 70, 0.12);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-check-row { margin-bottom: 18px; }
.checkbox-inline { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }

/* .form-field defaults to a label-above-input column layout; a checkbox needs its
   label beside it instead, and Bootstrap's .form-check-input float/negative-margin
   indent needs resetting inside the flex container. */
.form-field.form-check {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-left: 0;
}
.form-field.form-check .form-check-input {
  float: none;
  margin-left: 0;
  flex-shrink: 0;
}
.form-field.form-check .form-check-label {
  margin-bottom: 0;
}
.form-field.form-check .form-hint {
  flex-basis: 100%;
  margin-left: 0;
}

.form-section-title { font-size: 1.05rem; font-weight: 700; margin: 8px 0 16px; }
.optional { font-weight: 600; color: var(--pool-muted); font-size: 0.85em; }

.social-block {
  border: 1px dashed var(--pool-border);
  border-radius: 12px;
  padding: 8px 16px;
  margin-bottom: 22px;
}
.social-block summary {
  cursor: pointer;
  font-weight: 700;
  padding: 8px 0;
  color: var(--pool-primary);
}
.social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }

.status-banner {
  /* Warmed to sit on the cream page; the old #e6f0eb was the one cold surface left. */
  background: #e8efe9;
  color: var(--pool-primary-darken);
  border: 1px solid #cfdfd5;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-weight: 600;
}
.status-banner-error {
  background: #fcebec;
  color: #8a1020;
  border-color: #f3c6cb;
}
.validation-summary:empty { display: none; }
.text-danger { color: #b00020; font-size: 0.9rem; }

/* ---------- Simple content pages ---------- */
/* The `min(…, 100%)` is load-bearing, not belt-and-braces. `body` is a flex column, which makes
   these containers flex items that size to their content rather than to the viewport — a wide
   table inside one stretched it to 1040px in a 375px window and dragged every child out with it.
   Clamping against the viewport is what contains it; min-width:0 and display:block both do
   nothing here. See MOBILE_AUDIT.md §1. */
.page-container { max-width: min(760px, 100%); margin: 48px auto; padding: 0 24px; }

/* ---------- Admin ---------- */
.admin-container { max-width: min(920px, 100%); }
.admin-container-wide { max-width: min(1040px, 100%); }
/* For pages that are a data grid rather than a document. A four-column table with long ad names
   and an inline select needs about 1,200px; capped at 1,040 it scrolled sideways on a desktop with
   room to spare. Not applied to the narrower containers above, where the limit is readable line
   length rather than available space — and kept to 1,440 because past that a table row is a long
   way for the eye to track from first column to last.

   The min(…, 100%) form matters and isn't decorative: `body` is a flex column, so a bare max-width
   lets the container size to its content and drag the page sideways on a phone. See MOBILE_AUDIT.md §1. */
.admin-container-grid { max-width: min(1440px, 100%); }
.admin-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.admin-header h1 { margin: 0; font-size: 1.9rem; font-weight: 800; }
.admin-header .admin-back { margin-left: auto; font-weight: 600; }
.admin-badge {
  display: inline-block;
  background: var(--pool-primary);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
}
/* Recorded but not transferred. Deliberately not the green "Paid" badge — the amber reads as
   "in progress", so a member scanning the column can't mistake an owed payout for a settled one. */
.admin-badge-pending { background: #8a5a06; }

.role-member { color: var(--pool-muted); font-weight: 600; }
.reconcile-flag {
  display: block;
  color: #8a1020;
  font-size: 0.82rem;
  font-weight: 600;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}
.stat-card {
  background: var(--pool-surface);
  border: 1px solid var(--pool-border);
  border-radius: var(--pool-radius);
  padding: 24px;
  text-align: center;
  box-shadow: var(--pool-shadow);
}
.stat-value { font-size: 2.2rem; font-weight: 800; color: var(--pool-primary); line-height: 1; }
.stat-label { color: var(--pool-muted); font-weight: 600; margin-top: 8px; }

.admin-nav { display: flex; gap: 12px; }

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--pool-surface);
  border: 1px solid var(--pool-border);
  border-radius: var(--pool-radius);
  overflow: hidden;
}
.admin-table th, .admin-table td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--pool-border);
}
.admin-table thead th {
  background: var(--pool-bg-alt);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--pool-muted);
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table .col-actions { text-align: right; }
.admin-table form { margin: 0; display: inline; }
.admin-table .muted { color: var(--pool-muted); font-weight: 600; }
.btn-sm { padding: 7px 14px; font-size: 0.88rem; }

/* Per-ad breakdown row shown under a member with more than one contributing ad. */
/* Must come after any author rule that could set a display on this row. The browser hides
   [hidden] with its own display:none, but ANY author display wins over the user-agent sheet — that
   is exactly how .ad-detail-overlay ended up permanently covering the ad screen in 50056fd. There
   is no such rule today; this is here so adding one later can't silently break the toggle. */
.ad-breakdown[hidden] { display: none; }
.ad-breakdown > td { background: var(--pool-bg-alt); padding: 8px 16px 12px; }

/* Per-member expander for the ad breakdown. Sits under the email rather than beside it, so a long
   address doesn't push the control out of the column. */
.row-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 3px 9px 3px 6px;
  background: none;
  border: 1px solid var(--pool-border);
  border-radius: var(--pool-radius-pill);
  font-family: var(--pool-font);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--pool-muted);
  cursor: pointer;
}
.row-toggle:hover { border-color: var(--pool-accent); color: var(--pool-primary); }
.row-toggle:focus-visible { outline: 2px solid var(--pool-primary); outline-offset: 2px; }

.row-toggle-chevron {
  display: inline-block;
  font-size: 0.7rem;
  line-height: 1;
  transition: transform .12s ease;
}
.row-toggle[aria-expanded="true"] .row-toggle-chevron { transform: rotate(90deg); }
.row-toggle[aria-expanded="true"] { color: var(--pool-primary); border-color: var(--pool-accent); }

/* The rotation is decoration; expanded state is carried by aria-expanded, which the chevron only
   mirrors. Respect a reduced-motion preference by snapping rather than sweeping. */
@media (prefers-reduced-motion: reduce) {
  .row-toggle-chevron { transition: none; }
}
.sub-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.sub-table th, .sub-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--pool-border); }
.sub-table thead th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--pool-muted); }
.sub-table tbody tr:last-child td { border-bottom: none; }

/* ---------- CMS (Pages) ---------- */
.pill {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 3px 10px;
  border-radius: 999px;
}
.pill-published { background: #e6f0eb; color: var(--pool-primary-darken); }
.pill-draft { background: var(--pool-bg-alt); color: var(--pool-muted); }

.row-actions { white-space: nowrap; }
.row-actions a, .row-actions button { font-weight: 600; font-size: 0.9rem; }
.row-actions > * + * { margin-left: 14px; }
.link-danger {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #b00020;
  font-family: inherit;
}
.link-danger:hover { text-decoration: underline; }

.form-hint { display: block; margin-top: 6px; color: var(--pool-muted); font-size: 0.85rem; }

/* Blog index */
.blog-index { max-width: 760px; }
.blog-heading { font-size: 2.2rem; font-weight: 800; margin-bottom: 32px; }
.blog-list { list-style: none; margin: 0; padding: 0; }
.blog-item {
  padding: 24px 0;
  border-bottom: 1px solid var(--pool-border);
}
.blog-item:first-child { padding-top: 0; }
.blog-item:last-child { border-bottom: none; }
.blog-item-title {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--pool-ink);
  text-decoration: none;
  line-height: 1.3;
}
.blog-item-title:hover { color: var(--pool-primary); }
.blog-item-date { color: var(--pool-muted); font-size: 0.9rem; margin: 4px 0 10px; }
.blog-item-excerpt { color: var(--pool-ink); line-height: 1.6; margin: 0 0 10px; }
.blog-item-more { color: var(--pool-primary); font-weight: 600; text-decoration: none; }
.blog-item-more:hover { text-decoration: underline; }

/* Rendered Markdown */
.content-page { max-width: 760px; }
.markdown-body { line-height: 1.7; color: var(--pool-ink); }
.markdown-body h1, .markdown-body h2, .markdown-body h3 {
  font-weight: 800;
  line-height: 1.25;
  margin: 1.6em 0 0.5em;
}
.markdown-body h1 { font-size: 2rem; margin-top: 0; }
.markdown-body h2 { font-size: 1.5rem; }
.markdown-body h3 { font-size: 1.2rem; }
.markdown-body p { margin: 0 0 1em; }
.markdown-body ul, .markdown-body ol { margin: 0 0 1em; padding-left: 1.5em; }
.markdown-body li { margin-bottom: 0.35em; }
.markdown-body a { color: var(--pool-primary); }
.markdown-body img { max-width: 100%; height: auto; border-radius: var(--pool-radius); }
.markdown-body blockquote {
  margin: 0 0 1em;
  padding: 0.4em 1.2em;
  border-left: 4px solid var(--pool-border);
  color: var(--pool-muted);
}
.markdown-body pre {
  background: var(--pool-bg-alt);
  border: 1px solid var(--pool-border);
  border-radius: var(--pool-radius);
  padding: 16px;
  overflow-x: auto;
}
.markdown-body code {
  background: var(--pool-bg-alt);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.92em;
}
.markdown-body pre code { background: none; padding: 0; }
.markdown-body table { border-collapse: collapse; margin-bottom: 1em; }
.markdown-body th, .markdown-body td {
  border: 1px solid var(--pool-border);
  padding: 8px 12px;
}
.markdown-body hr { border: none; border-top: 1px solid var(--pool-border); margin: 2em 0; }

/* ---------- Pools ---------- */
.muted { color: var(--pool-muted); }
.empty-state {
  text-align: center;
  padding: 56px 24px;
  background: var(--pool-bg-alt);
  border: 1px solid var(--pool-border);
  border-radius: var(--pool-radius);
}
.empty-state p { color: var(--pool-muted); margin-bottom: 18px; }

.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 8px 0 28px;
}
.detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--pool-surface);
  border: 1px solid var(--pool-border);
  border-radius: 10px;
  padding: 14px 16px;
}
.detail-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--pool-muted);
  font-weight: 700;
}
.detail-item span:last-child { font-size: 1.15rem; font-weight: 700; color: var(--pool-ink); }

.invite-form { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 6px; }
.invite-form .form-control { flex: 1; }
.invite-form .btn-pool { white-space: nowrap; }

.form-actions { display: flex; gap: 12px; margin-top: 8px; align-items: center; }

/* Inline loading indicator (e.g. while a long import POST is in flight) */
.loading-inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--pool-muted);
  font-weight: 600;
}
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--pool-border);
  border-top-color: var(--pool-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.assign-form { display: flex; gap: 8px; align-items: center; margin: 0; }
.account-bar { margin: 0 0 22px; }
.account-bar .form-control { max-width: 320px; }
.assign-form .form-control { min-width: 200px; }
select.form-control { background: var(--pool-surface); cursor: pointer; }

.admin-table tfoot .totals-row td { border-top: 2px solid var(--pool-primary); background: var(--pool-bg-alt); font-weight: 700; }

/* Wide tables scroll inside their own box instead of pushing the whole page sideways. The report
   is eleven columns and lays out at ~1120px, so on a phone it dragged everything with it.
   A wrapper element is required rather than `display: block` on the table itself, which breaks
   thead/tbody/tr layout and leaves the page overflowing anyway. See MOBILE_AUDIT.md §2.
   This keeps the table usable, not good — the report ultimately wants a card-per-row layout. */
.table-scroll {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
  .detail-grid { grid-template-columns: 1fr 1fr; }
  .invite-form { flex-direction: column; }
  .invite-form .form-control { width: 100%; }
  /* The only grid with no responsive rule at all: three cards have a combined minimum of
     518px, so it overflowed anything narrower than about 550. */
  .admin-stats { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  /* Two columns of detail at phone width leaves ~150px a cell, which truncates dates and
     money. The grid previously floored at two and never reached one. */
  .detail-grid { grid-template-columns: 1fr; }
}

/* ---------- Phone tab bar ----------
   Replaces the wrapping-header stopgap from the mobile audit. The header nav overflowed at
   531px because a signed-in row is Blog + Pools + Billing + [Admin] + a full email address +
   Sign out; wrapping it stopped the overflow but stacked into rows with the brand stranded
   mid-stack. The app's own screens now navigate from the bottom, as the artboards do, and the
   header keeps only what the bar doesn't carry. Markup: Pages/Shared/_MobileNav.cshtml. */

.mobile-tabs { display: none; }
.mobile-tabs-spacer { display: none; }

@media (max-width: 640px) {
  .mobile-tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;             /* over the page, under the ad detail overlay at 100 */
    display: flex;
    background: var(--pool-surface);
    border-top: 1px solid var(--pool-border);
    /* Keeps the labels clear of the home indicator on an iPhone; resolves to 0 elsewhere. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -2px 14px rgba(10, 99, 70, .07);
  }

  .mobile-tab {
    flex: 1 1 0;
    min-width: 0;            /* five tabs at 375px are 75px each; without this they refuse to shrink */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    /* 56px, so the target clears the ~44px minimum with the label inside it rather than beside. */
    min-height: 56px;
    padding: 7px 2px;
    color: var(--pool-muted);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: .01em;
    text-decoration: none;
  }
  .mobile-tab:hover { text-decoration: none; color: var(--pool-primary); }
  .mobile-tab span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-tab svg {
    width: 23px;
    height: 23px;
    flex: 0 0 auto;
    fill: currentColor;      /* the icons carry no colour of their own, so the tab state drives them */
  }
  .mobile-tab.is-current { color: var(--pool-primary); }

  /* Focus ring inside the bar rather than on its edge, where the fixed bar would clip it. */
  .mobile-tab:focus-visible { outline: 2px solid var(--pool-primary); outline-offset: -3px; }

  /* Reserves the bar's height at the end of the document so the footer isn't sitting under it. */
  .mobile-tabs-spacer {
    display: block;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    flex-shrink: 0;          /* body is a flex column; without this it collapses to nothing */
  }

  /* Hidden, not removed: these are the links the bar now carries. Blog and Sign out stay in the
     header, which is why it still fits — two short items beside the wordmark. */
  .nav-item-app { display: none; }
  /* Still wrapping as a backstop for a long localised label, but with two items it shouldn't. */
  .nav-links { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .feature-grid { grid-template-columns: 1fr; }
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .form-row, .social-grid { grid-template-columns: 1fr; }
  .benefit-grid { grid-template-columns: 1fr; }
  .auth-card { margin: 32px 16px; padding: 28px 22px; }
  .footer-inner { flex-direction: column; text-align: center; }
}

/* ---------------------------------------------------------------------------
   Ad performance cards (Pools/Ads)
   --------------------------------------------------------------------------- */

.ad-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 22px;
  margin-top: 20px;
}

.ad-card {
  background: var(--pool-surface);
  border: 1px solid var(--pool-border);
  border-radius: var(--pool-radius);
  box-shadow: var(--pool-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Media: square crop so cards line up whatever the creative's aspect ratio. */
.ad-card-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #10151a;
}
.ad-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ad-card-media-empty {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1d2830, #10151a);
}

.ad-card-type,
.ad-card-rank {
  position: absolute;
  top: 10px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 4px 8px;
  border-radius: 5px;
  line-height: 1;
}
.ad-card-type {
  left: 10px;
  background: rgba(0, 0, 0, .72);
  color: #fff;
}
.ad-card-rank {
  right: 10px;
  background: #3730a3;
  color: #fff;
}

.ad-card-body { padding: 16px 18px 18px; }

.ad-card-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ad-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: .09em;
}
.ad-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.ad-status.is-active { color: #15803d; }
.ad-status.is-idle { color: var(--pool-muted); }

.ad-card-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--pool-ink);
  margin: 0 0 14px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* 2x2 metric grid. The 1px gap over a border colour draws the dividing rules,
   so cells share hairlines instead of doubling up. */
.ad-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--pool-border);
  border: 1px solid var(--pool-border);
  border-radius: 8px;
  overflow: hidden;
}
.ad-metric {
  background: var(--pool-surface);
  padding: 11px 13px 13px;
}
.ad-metric-label {
  display: block;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pool-muted);
  margin-bottom: 5px;
}
.ad-metric-value {
  display: block;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--pool-ink);
  line-height: 1.15;
}

.ad-roas,
.ad-ctr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 11px 13px;
  border: 1px solid var(--pool-border);
  border-radius: 8px;
}
.ad-roas .ad-metric-label,
.ad-ctr .ad-metric-label { margin-bottom: 0; }

.ad-roas-value {
  margin-left: auto;
  font-size: 1.1rem;
  font-weight: 800;
}
.roas-good { color: #15803d; }
.roas-warn { color: #b45309; }
.roas-bad { color: #b00020; }

.ad-tag {
  display: inline-block;
  border: 1px solid var(--pool-border);
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 0.58rem;
  letter-spacing: .06em;
  color: var(--pool-muted);
  margin-left: 4px;
}

.ad-spark {
  flex: 1;
  height: 26px;
  min-width: 50px;
}
.ad-spark polyline {
  fill: none;
  stroke: #15803d;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.ad-chip {
  font-size: 0.66rem;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 5px;
  white-space: nowrap;
  line-height: 1;
}
.chip-good { background: #e6f4ec; color: var(--pool-good-on-tint); }
.chip-bad { background: #fdecec; color: #b00020; }
.chip-flat { background: var(--pool-bg-alt); color: var(--pool-muted); }

.ad-metric .ad-chip {
  display: inline-block;
  margin-top: 6px;
}

/* Screen-reader-only text. Used to append "(opens in a new tab)" to links that do, without
   putting it on screen — the arrow glyph carries that for sighted readers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* "View ad" on the card. Sits above .ad-card-open — which covers the whole card at z-index 2 to
   open the detail dialog — so it needs its own stacking context or it simply cannot be clicked. */
.ad-card-view {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  padding: 7px 12px;
  border: 1px solid var(--pool-border);
  border-radius: var(--pool-radius-pill);
  background: var(--pool-surface);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--pool-primary);
  text-decoration: none;
}
.ad-card-view:hover {
  background: var(--pool-primary);
  border-color: var(--pool-primary);
  color: #fff;
  text-decoration: none;
}
.ad-card-view:focus-visible { outline: 2px solid var(--pool-primary); outline-offset: 2px; }
/* At its natural size the pill is ~35px tall, under the ~44px a finger needs. Raised on touch
   widths only, so it stays a compact chip on a desktop card where the pointer is precise. */
@media (max-width: 640px) {
  .ad-card-view { min-height: 44px; padding-left: 16px; padding-right: 16px; }
}

/* Same control inside the dialog, on the dark header. */
.ad-detail-view {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  padding: 6px 12px;
  border-radius: var(--pool-radius-pill);
  background: rgba(255, 255, 255, .14);
  font-size: 0.76rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}
.ad-detail-view:hover { background: rgba(255, 255, 255, .28); color: #fff; text-decoration: none; }

.ad-card-footer {
  margin-top: 13px;
  font-size: 0.72rem;
  color: var(--pool-muted);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Ad detail: full-card click target, then the expanded dialog. */

.ad-card { position: relative; }
.ad-card-open {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--pool-radius);
}
.ad-card:hover { box-shadow: 0 10px 30px rgba(10, 99, 70, .16); }
.ad-card:has(.ad-card-open:focus-visible) { outline: 2px solid var(--pool-primary); outline-offset: 2px; }

.ad-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(16, 21, 26, .55);
  display: flex;
  justify-content: center;
  padding: 28px 16px;
  overflow-y: auto;
}
/* Must come after the rule above. The browser hides [hidden] elements with its own
   `display: none`, but any author `display` wins over the user-agent stylesheet — so without
   this the overlay is permanently on, covering the page and eating every click. */
.ad-detail-overlay[hidden] { display: none; }
.ad-detail-shell {
  width: 100%;
  max-width: 520px;
  align-self: flex-start;
  background: var(--pool-surface);
  border-radius: var(--pool-radius);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}
.ad-detail-loading { padding: 40px; text-align: center; color: var(--pool-muted); }

.ad-detail-head { background: #10151a; color: #fff; padding: 16px 20px 18px; }
.ad-detail-head-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ad-status.on-dark.is-idle { color: #9aa8a2; }
.ad-detail-score { font-size: .78rem; font-weight: 700; color: #9aa8a2; }
.ad-detail-close {
  margin-left: auto;
  background: rgba(255, 255, 255, .12);
  border: 0;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.ad-detail-close:hover { background: rgba(255, 255, 255, .25); }
/* Colour stated explicitly: the global `h1, h2, h3, h4` rule sets --pool-ink, and a direct rule
   beats the white inherited from .ad-detail-head — which leaves the title unreadable on the dark
   header. */
.ad-detail-head h2 { margin: 0; font-size: 1.15rem; font-weight: 800; color: #fff; overflow-wrap: anywhere; }
.ad-detail-path { margin: 6px 0 0; font-size: .74rem; color: #9aa8a2; overflow-wrap: anywhere; }

.ad-detail-body { padding: 18px 20px 22px; }

.ad-detail-verdict {
  margin: 0 0 18px;
  padding-left: 13px;
  border-left: 3px solid var(--pool-primary);
  font-weight: 700;
  font-size: 1rem;
  color: var(--pool-ink);
}

.ad-detail-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--pool-border);
  border: 1px solid var(--pool-border);
  border-radius: 8px;
  overflow: hidden;
}
.ad-detail-metrics .ad-metric-label { text-transform: none; letter-spacing: .04em; }

.ad-detail-section {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--pool-muted);
  margin: 22px 0 10px;
}
.ad-detail-reasons { margin: 0 0 20px; padding-left: 18px; }
.ad-detail-reasons li { font-size: .86rem; line-height: 1.55; margin-bottom: 7px; }

.ad-detail-panel {
  border: 1px solid var(--pool-border);
  border-radius: 8px;
  padding: 13px 15px 11px;
  margin-bottom: 12px;
}
.ad-detail-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.ad-detail-panel-title { font-weight: 700; font-size: .92rem; }
.ad-detail-panel-head .ad-chip { margin-left: auto; }
.ad-detail-panel-desc { margin: 0 0 8px; font-size: .76rem; color: var(--pool-muted); }

.ad-detail-spark { width: 100%; height: 58px; display: block; }
.ad-detail-spark polyline {
  fill: none;
  stroke: var(--pool-primary);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.ad-detail-halves {
  display: flex;
  justify-content: space-between;
  font-size: .72rem;
  color: var(--pool-muted);
  margin-top: 4px;
}

.ad-detail-score-build {
  border: 1px solid var(--pool-border);
  border-radius: 8px;
  padding: 14px 15px;
  margin-top: 18px;
}
.ad-detail-score-total { margin-left: auto; font-weight: 800; }
.ad-detail-score-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.ad-detail-score-table td {
  border-top: 1px solid var(--pool-border);
  padding: 9px 0;
  vertical-align: top;
  font-size: .78rem;
}
.ad-detail-comp-name { font-weight: 700; }
.ad-detail-comp-score { color: var(--pool-muted); font-size: .72rem; margin-top: 1px; }
.ad-detail-comp-bar {
  height: 3px;
  background: var(--pool-bg-alt);
  border-radius: 2px;
  margin-top: 5px;
  max-width: 150px;
}
.ad-detail-comp-bar span { display: block; height: 100%; background: var(--pool-primary); border-radius: 2px; }
.ad-detail-comp-right { text-align: right; white-space: nowrap; }
.ad-detail-comp-right .muted { font-size: .72rem; }
.ad-detail-footnote {
  margin: 12px 0 0;
  font-size: .72rem;
  color: var(--pool-muted);
  line-height: 1.5;
}

@media (max-width: 480px) {
  .ad-detail-metrics { grid-template-columns: repeat(2, 1fr); }
  .ad-detail-overlay { padding: 0; }
  .ad-detail-shell { border-radius: 0; min-height: 100%; }
}

/* Lookback picker on the ad performance page. */
.ad-window-picker {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 6px;
}
.ad-window-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--pool-muted);
  margin-right: 4px;
}
.ad-window-option {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--pool-border);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pool-muted);
  text-decoration: none;
  background: var(--pool-surface);
}
.ad-window-option:hover { border-color: var(--pool-accent); color: var(--pool-primary); }
.ad-window-option.is-selected {
  background: var(--pool-primary);
  border-color: var(--pool-primary);
  color: #fff;
}

/* Freshness — the design's framing for the fatigue score, inverted so it reads as
   "how much life is left" rather than "how worn out this creator's work is". */
.ad-freshness {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--pool-muted);
  white-space: nowrap;
}
.ad-freshness strong { color: var(--pool-ink); font-weight: 800; }
.ad-detail-score strong { color: #fff; }

/* ---------------------------------------------------------------------------
   Auth screens (Sign in / Register) — split layout from Maria's artboards.
   Photography with a green wash and the wordmark on one side, form on the other.
   --------------------------------------------------------------------------- */

.auth-body { display: block; }

.auth-split {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;   /* the artboards' ratio */
  min-height: 100vh;
}

/* Visual panel. Each page sets its own photograph via --auth-image; this default only shows if
   one is ever missing, so the panel is never an empty green block. */
.auth-visual {
  --auth-image: url('/images/auth-signin.jpg');
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px;
  /* Graded rather than flat: light enough at the top that the photograph reads, deepening toward
     the bottom where the tagline sits so white type stays legible over whatever is behind it. */
  background-image:
    linear-gradient(180deg,
      rgba(7, 66, 47, .42) 0%,
      rgba(7, 66, 47, .52) 45%,
      rgba(10, 99, 71, .88) 100%),
    var(--auth-image);
  background-size: cover;
  background-position: center;
  color: #fff;
  overflow: hidden;
}
/* The wordmark here is already the white artwork, so no filter is needed to recolour it. */
.auth-visual-brand img { height: 38px; width: auto; display: block; }
.auth-visual-tagline {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
}
.auth-visual-subtext {
  margin: 14px 0 0;
  max-width: 34ch;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, .82);
}

/* Form panel. */
.auth-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px clamp(24px, 5vw, 72px) 28px;
  background: var(--pool-surface);
}
.auth-panel-inner { width: 100%; max-width: 420px; margin: auto; padding: 24px 0; }
/* The shared .auth-title is green; the artboards set these headings in ink, with the green
   reserved for the primary action. Scoped here rather than changed globally, so the auth pages
   Maria didn't draw keep their current treatment until they're revisited. */
.auth-panel-inner .auth-title { font-size: 1.7rem; font-weight: 800; margin: 0 0 6px; color: var(--pool-ink); }
.auth-panel-inner .auth-subtitle { color: var(--pool-muted); margin: 0 0 26px; }

.auth-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: 0.78rem;
  color: var(--pool-muted);
  padding-top: 20px;
}
.auth-footer a { color: var(--pool-muted); }
.auth-footer a:hover { color: var(--pool-primary); }

/* The Show / Hide control the designs put inside the password field. */
.form-reveal-wrap { position: relative; display: block; }
.form-field.has-reveal .form-control { padding-right: 68px; }
.form-reveal {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 4px;
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  /* Stretched to the input's full height rather than sized to its text: at 29px it was well
     under the ~44px a finger needs, and this is a control people use on a phone. */
  padding: 0 12px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--pool-primary);
  cursor: pointer;
  border-radius: 8px;
}
.form-reveal:hover { background: var(--pool-bg-alt); }

/* Row holding "Remember me" against "Forgot your password?". */
.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}
.auth-row .form-field { margin: 0; }

/* Mobile-first fallback: the photo panel is decorative, so it becomes a slim banner
   above the form rather than competing with it for a phone's screen. */
@media (max-width: 860px) {
  .auth-split { grid-template-columns: 1fr; min-height: 0; }
  .auth-visual {
    min-height: 190px;
    padding: 22px;
    gap: 18px;
  }
  .auth-visual-tagline { font-size: 1.45rem; }
  .auth-panel { padding: 28px 20px 20px; }
  .auth-panel-inner { padding: 0; max-width: none; }
}

/* Shown when an administrator is working on a pool they don't own. Deliberately distinct from
   .status-banner — that reports what just happened, this reports whose data you're changing. */
.acting-banner {
  background: #fdf3e3;
  border: 1px solid #e8d5ac;
  color: #6b4a12;
  border-radius: var(--pool-radius-sm);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 0.92rem;
}

/* ---------------------------------------------------------------------------
   Homepage — eight sections from Maria's Homepage v2 artboard.
   --------------------------------------------------------------------------- */

.home-inner { max-width: min(1120px, 100%); margin: 0 auto; padding: 0 24px; }
.home-inner-narrow { max-width: min(760px, 100%); }
.home-section { padding: clamp(56px, 8vw, 104px) 0; }

.home-title {
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0 0 14px;
}
.home-title-left { text-align: left; }
.home-title-invert { color: #fff; }
.home-subtitle {
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  font-weight: 800;
  text-align: center;
  margin: clamp(40px, 6vw, 72px) 0 6px;
}
.home-eyebrow {
  text-align: center;
  font-weight: 700;
  color: var(--pool-muted);
  margin: 0 0 4px;
}
.home-lede { font-size: 1.05rem; color: var(--pool-muted); line-height: 1.7; }
.home-lede-centred { max-width: 62ch; margin-left: auto; margin-right: auto; text-align: center; }
.home-note { text-align: center; color: var(--pool-muted); margin: 0 0 34px; }

/* 1. Hero ------------------------------------------------------------------ */
.home-hero {
  position: relative;
  min-height: clamp(520px, 76vh, 760px);
  display: flex;
  overflow: hidden;
  background: var(--pool-primary-darken);
}
.home-hero-media {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(7, 66, 47, .72), rgba(7, 66, 47, .88)),
    url('/images/wave-pattern.png');
  background-size: cover;
  background-position: center;
}
/* The video fades in only once it can actually play, so a slow fetch never shows a black box. */
.home-hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease;
}
.home-hero-media.is-playing video { opacity: 1; }
.home-hero-media.is-playing::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 66, 47, .62), rgba(7, 66, 47, .82));
}
.home-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) 24px clamp(40px, 6vw, 72px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.home-hero-logo { width: clamp(84px, 8.4vw, 132px); height: auto; display: block; }
.home-hero-copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.home-hero-copy h1 {
  margin: 0;
  font-size: clamp(1.9rem, 4.7vw, 4.2rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #fff;
  max-width: 18ch;
}
.home-hero-copy p {
  margin: clamp(16px, 1.7vw, 28px) 0 0;
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, .9);
  max-width: 58ch;
}
.home-hero-copy .btn-pool { margin-top: clamp(24px, 3vw, 40px); }
.home-hero-alt {
  margin-top: 18px;
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.home-hero-alt:hover { color: #fff; }

/* 2. Steps ----------------------------------------------------------------- */
.home-steps { background: var(--pool-bg-alt); }
.home-step-grid {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.home-step {
  background: var(--pool-surface);
  border: 1px solid var(--pool-border);
  border-radius: var(--pool-radius-lg);
  padding: 30px 26px;
}
.home-step img { width: 40px; height: 40px; display: block; margin-bottom: 16px; }
.home-step-num {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--pool-accent);
  margin-bottom: 6px;
}
.home-step h3, .home-structure-grid h4, .home-example-grid h4 {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 8px;
}
.home-step p { margin: 0; color: var(--pool-muted); }

/* 3. Audience -------------------------------------------------------------- */
.home-audience {
  background-image:
    linear-gradient(180deg, rgba(7, 66, 47, .93), rgba(7, 66, 47, .97)),
    url('/images/home-audience.jpg');
  background-size: cover;
  background-position: center;
  color: #fff;
}
.home-audience-inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
/* Headings inherit --pool-ink from the base h1–h4 rule, which is invisible on this dark panel.
   Setting `color` on the section isn't enough, because that rule targets the elements directly. */
.home-audience .home-title { color: #fff; }
.home-audience .home-lede { color: rgba(255, 255, 255, .84); }
.home-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.home-benefits li {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--pool-radius);
  padding: 20px 22px;
}
.home-benefits h3 { font-size: 1.05rem; font-weight: 800; margin: 0 0 6px; color: #fff; }
.home-benefits p { margin: 0; color: rgba(255, 255, 255, .78); font-size: 0.95rem; }

/* 4. What is a Pool -------------------------------------------------------- */
.home-what { background: var(--pool-bg); }
.home-structure-grid, .home-example-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
}
.home-structure-grid { grid-template-columns: repeat(4, 1fr); }
.home-example-grid { grid-template-columns: repeat(3, 1fr); margin-top: 32px; }
.home-structure-grid li, .home-example-grid li {
  background: var(--pool-surface);
  border: 1px solid var(--pool-border);
  border-radius: var(--pool-radius);
  padding: 24px 22px;
}
.home-structure-grid p, .home-example-grid p { margin: 0; color: var(--pool-muted); font-size: 0.95rem; }

/* 5. Contributors ---------------------------------------------------------- */
.home-providers { background: var(--pool-bg-alt); text-align: center; }
.home-providers .home-note { margin-top: 26px; margin-bottom: 0; }

/* 6. Trust ----------------------------------------------------------------- */
.home-trust { background: var(--pool-bg); }
.home-trust-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.home-trust-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.home-trust-list li {
  position: relative;
  padding-left: 30px;
  font-weight: 600;
}
.home-trust-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .45em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--pool-primary);
}
.home-trust-image {
  min-height: 340px;
  border-radius: var(--pool-radius-lg);
  background-image: url('/images/home-trust.jpg');
  background-size: cover;
  background-position: center;
}

/* 7. Vision ---------------------------------------------------------------- */
.home-future {
  background-image:
    linear-gradient(180deg, rgba(10, 99, 71, .92), rgba(7, 66, 47, .96)),
    url('/images/home-future.jpg');
  background-size: cover;
  background-position: center;
  color: #fff;
}
.home-quote {
  margin: 0 auto;
  max-width: 44ch;
  text-align: center;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 600;
  line-height: 1.5;
  color: rgba(255, 255, 255, .93);
  font-style: italic;
}
.home-quote::before { content: '\201C'; }
.home-quote::after { content: '\201D'; }
.home-future-grid {
  list-style: none;
  margin: clamp(36px, 5vw, 60px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.home-future-grid li { text-align: center; }
.home-future-grid img { width: 40px; height: 40px; margin: 0 auto 12px; display: block; }
.home-future-grid p { margin: 0; color: rgba(255, 255, 255, .88); font-weight: 600; }

/* 8. Closing --------------------------------------------------------------- */
.home-close { background: var(--pool-bg-alt); }
.home-close-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.home-close-card {
  border-radius: var(--pool-radius-lg);
  padding: clamp(32px, 4vw, 52px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  background-size: cover;
  background-position: center;
}
.home-close-card h2 { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.85rem); font-weight: 800; }
.home-close-card-owner {
  background-image: linear-gradient(180deg, rgba(7, 66, 47, .86), rgba(7, 66, 47, .94)), url('/images/home-cta-1.jpg');
  color: #fff;
}
.home-close-card-owner h2 { color: #fff; }
.home-close-card-provider {
  background-image: linear-gradient(180deg, rgba(253, 252, 248, .9), rgba(253, 252, 248, .96)), url('/images/home-cta-2.jpg');
  border: 1px solid var(--pool-border);
}

@media (max-width: 900px) {
  .home-step-grid { grid-template-columns: 1fr; }
  .home-audience-inner, .home-trust-inner, .home-close-grid { grid-template-columns: 1fr; }
  .home-structure-grid { grid-template-columns: repeat(2, 1fr); }
  .home-example-grid { grid-template-columns: repeat(2, 1fr); }
  .home-future-grid { grid-template-columns: repeat(2, 1fr); }
  .home-title-left { text-align: center; }
  .home-trust-image { min-height: 220px; }
}

@media (max-width: 560px) {
  .home-structure-grid, .home-example-grid, .home-future-grid { grid-template-columns: 1fr; }
  .home-hero { min-height: 0; }
}

/* ---------------------------------------------------------------------------
   Participant dashboard (Pools/Dashboard) — from Maria's Creator Dashboard
   artboard. Mobile-first: the artboard is an iOS frame, and this is the screen
   a participant is most likely to open on a phone.
   --------------------------------------------------------------------------- */

.dash { max-width: min(560px, 100%); }

.dash-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.dash-eyebrow {
  margin: 0 0 2px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--pool-muted);
}
.dash-title { margin: 0; font-size: clamp(1.4rem, 5vw, 1.9rem); font-weight: 800; }

.dash-pace {
  margin-left: auto;
  flex: 0 0 auto;
  align-self: center;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 5px 11px;
  border-radius: var(--pool-radius-pill);
}
.pace-up { background: #e6f4ec; color: var(--pool-good-on-tint); }
.pace-down { background: #fdecec; color: #b00020; }
.pace-flat { background: var(--pool-bg-alt); color: var(--pool-muted); }

/* The headline card. Deep green, because on the artboard this is the one thing
   the eye lands on before anything else. */
.dash-hero {
  background: linear-gradient(160deg, var(--pool-primary), var(--pool-primary-darken));
  color: #fff;
  border-radius: var(--pool-radius-lg);
  padding: clamp(24px, 6vw, 34px) clamp(20px, 5vw, 30px);
  box-shadow: var(--pool-shadow);
}
.dash-hero-figure {
  margin: 0;
  font-size: clamp(2.6rem, 13vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}
.dash-hero-label {
  margin: 8px 0 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .88);
}
.dash-hero-sub {
  margin: 16px 0 0;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, .78);
}

.dash-progress {
  margin-top: 16px;
  height: 7px;
  border-radius: var(--pool-radius-pill);
  background: rgba(255, 255, 255, .22);
  overflow: hidden;
}
.dash-progress-bar {
  height: 100%;
  border-radius: inherit;
  background: #fff;
  /* A pool at 0% would otherwise render as nothing at all, which reads as broken
     rather than as "not started". */
  min-width: 3px;
}
.dash-hero-meta {
  margin: 9px 0 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .9);
}

.dash-basis {
  margin: 16px 0 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--pool-muted);
}
.dash-caveat {
  margin: 8px 0 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--pool-muted);
}
.dash-caveat strong { color: var(--pool-ink); }

.dash-links { display: grid; gap: 10px; margin-top: 26px; }
.dash-link {
  display: block;
  background: var(--pool-surface);
  border: 1px solid var(--pool-border);
  border-radius: var(--pool-radius);
  padding: 15px 17px;
  text-decoration: none;
}
.dash-link:hover { border-color: var(--pool-accent); text-decoration: none; }
.dash-link-title { display: block; font-weight: 700; color: var(--pool-ink); }
.dash-link-sub { display: block; margin-top: 2px; font-size: 0.82rem; color: var(--pool-muted); }