/* Page Raisers
   Built from the Page Raisers design system.
   teal #086B6E  magenta #A2155E  yellow #F2C231
   ink #1D1F23   cream #FBF6E9    paper #FFFDF7 */

:root {
  --teal: #086B6E;
  --teal-dark: #055053;
  --magenta: #A2155E;
  --yellow: #F2C231;
  --ink: #1D1F23;
  --cream: #FBF6E9;
  --paper: #FFFDF7;
  --teal-wash: #D8EFEE;
  --magenta-wash: #F9DFEB;
  --yellow-wash: #FDF0C4;
  --rule: #C3DEDD;
  --muted: #4A5560;

  --sp-2: 8px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  --wrap: 1080px;
  --narrow: 720px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--sp-6); }
.narrow { max-width: var(--narrow); }

h1, h2, h3 { font-weight: 700; line-height: 1.2; margin: 0 0 var(--sp-4); }
h1 { font-size: clamp(32px, 6vw, 52px); line-height: 1.1; }
h2 { font-size: clamp(24px, 4vw, 32px); color: var(--teal); }
h3 { font-size: 22px; }
p  { margin: 0 0 var(--sp-4); max-width: 68ch; }
a  { color: var(--teal); }
a:hover { color: var(--teal-dark); }

.accent { color: var(--magenta); }
.lede { font-size: clamp(19px, 2.4vw, 22px); }
.small { font-size: 15px; color: var(--muted); }

/* ---------- header ---------- */

.site-head {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 50;
}
.site-head .wrap {
  display: flex; align-items: center; gap: var(--sp-6);
  min-height: 72px; flex-wrap: wrap;
  /* Wider than the 1080px body column. Seven nav items plus the button
     need about 1073px beside the brand, which does not fit in 1032. The
     header is the one strip on the page that is allowed to be wider than
     the text it sits above. */
  max-width: 1220px;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand img { width: 48px; height: auto; display: block; flex: none; }
.brand .txt { display: flex; flex-direction: column; gap: 2px; }
.site-foot .brand img { width: 54px; }
.site-foot .brand { margin-bottom: var(--sp-2); }
.wordmark {
  font-family: "Fredoka", "Atkinson Hyperlegible", system-ui, sans-serif;
  font-weight: 600; font-size: 26px; color: var(--teal); line-height: 1;
}
.rally { font-size: 13px; font-weight: 700; color: var(--magenta); }
nav { margin-left: auto; display: flex; gap: var(--sp-6); align-items: center; flex-wrap: wrap; }
.navlinks { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
/* Nav links were 17px tall, which is the text and nothing else. WCAG
   2.5.8 puts the floor at 24px and both Apple and Google say 44px for a
   thumb. The padding makes the hit area 44px without moving the type. */
nav a { text-decoration: none; font-weight: 700; font-size: 16px;
        display: inline-flex; align-items: center; min-height: 44px; }
nav a[aria-current="page"] { box-shadow: inset 0 -2.5px 0 var(--magenta); }

/* ---------- buttons ---------- */

.btn {
  display: inline-block; text-decoration: none; font-weight: 700;
  padding: 14px 26px; border-radius: var(--r-pill);
  background: var(--teal); color: #fff; border: 2px solid var(--teal);
  font-size: 17px;
}
.btn:hover { background: var(--teal-dark); border-color: var(--teal-dark); color: #fff; }
.btn.ghost { background: transparent; color: var(--teal); }
.btn.ghost:hover { background: var(--teal-wash); color: var(--teal-dark); }
.btn.mag { background: var(--magenta); border-color: var(--magenta); }
.btn.mag:hover { background: #7d1049; border-color: #7d1049; }
.btn-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-6); }

/* ---------- sections ---------- */

section { padding: var(--sp-16) 0; }
section.tight { padding: var(--sp-12) 0; }
section.paper { background: var(--paper); }
section.tealwash { background: var(--teal-wash); }

.hero { padding: var(--sp-24) 0 var(--sp-16); }
.hero h1 { max-width: 16ch; }
.hero p { font-size: clamp(19px, 2.4vw, 23px); max-width: 54ch; }

/* Hero with the product beside it. The words carried the whole page
   before this and the first question a visitor has is what the thing is.
   The picture answers it faster than the paragraph can. */
.hero .wrap.split {
  max-width: 1220px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
  gap: var(--sp-12); align-items: center;
}
.hero .shot { margin: 0; }
.hero .shot img { width: 100%; height: auto; display: block; }
.hero .shot figcaption {
  margin-top: var(--sp-4); font-size: 15px; color: var(--muted);
  text-align: center;
}
@media (max-width: 880px) {
  .hero { padding-top: var(--sp-12); }
  .hero .wrap.split { grid-template-columns: 1fr; gap: var(--sp-8); }
  /* The headline stays first on a phone. Leading with the picture pushed
     "Turn the page on fundraising" below the fold, which is the one line
     that has to be read. */
  .hero h1, .hero p { max-width: none; }
}

/* ---------- cards ---------- */

.cards { display: grid; gap: var(--sp-6); margin-top: var(--sp-8); }
.cards.three { grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); }
.cards.two   { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

.card {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: var(--sp-6);
}
.card.pick { border: 2.5px solid var(--teal); }
.card h3 { color: var(--teal); margin-bottom: var(--sp-2); }
.card p:last-child { margin-bottom: 0; }

.tag {
  display: inline-block; background: var(--yellow); color: var(--ink);
  font-size: 13px; font-weight: 700; padding: 3px 12px;
  border-radius: var(--r-pill); margin-bottom: var(--sp-2);
}

.money { font-size: 34px; font-weight: 700; color: var(--magenta); line-height: 1; }
.money small { display: block; font-size: 14px; font-weight: 400; color: var(--muted); margin-top: 4px; }

/* ---------- steps ---------- */

ol.steps { list-style: none; counter-reset: s; padding: 0; margin: var(--sp-8) 0 0; }
ol.steps li {
  counter-increment: s; position: relative;
  padding-left: 56px; margin-bottom: var(--sp-6); max-width: 64ch;
}
ol.steps li::before {
  content: counter(s); position: absolute; left: 0; top: -2px;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--teal); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px;
}
ol.steps strong { display: block; }

/* ---------- table ---------- */

.tablewrap { overflow-x: auto; margin-top: var(--sp-8); }
table { width: 100%; border-collapse: collapse; min-width: 560px; }
th {
  text-align: left; font-weight: 700; color: var(--teal);
  padding: 12px 16px 12px 0; border-bottom: 2px solid var(--teal); vertical-align: bottom;
}
td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
th.num, td.num { text-align: right; padding-right: 0; }
tr.best td { background: var(--magenta-wash); }
tr.best td.num { font-weight: 700; color: var(--magenta); }
td .mname { font-weight: 700; display: block; }

/* ---------- note ---------- */

.note {
  border-left: 4px solid var(--teal); background: var(--teal-wash);
  padding: var(--sp-4) var(--sp-6); border-radius: 0 var(--r-md) var(--r-md) 0;
  margin: var(--sp-6) 0;
}
.note.warm { border-left-color: var(--magenta); background: var(--magenta-wash); }
.note p:last-child { margin-bottom: 0; }

/* ---------- faq ---------- */

.faq { margin-top: var(--sp-8); }
.faq details {
  border-bottom: 1px solid var(--rule); padding: var(--sp-4) 0;
}
.faq summary {
  font-weight: 700; font-size: 19px; cursor: pointer; color: var(--teal);
  list-style: none; display: flex; justify-content: space-between; gap: var(--sp-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 24px; line-height: 1; color: var(--magenta); }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin-top: var(--sp-4); }
.faq details p:last-child { margin-bottom: 0; }

/* ---------- group page ---------- */

.grouphero { background: var(--paper); border-bottom: 1px solid var(--rule); }
.grouphero .wrap { display: grid; gap: var(--sp-12); align-items: center;
                   grid-template-columns: 1fr; padding-top: var(--sp-16); padding-bottom: var(--sp-16); }
@media (min-width: 860px) { .grouphero .wrap { grid-template-columns: 1.1fr 0.9fr; } }
.coverimg {
  width: 100%; max-width: 380px; border-radius: var(--r-md);
  border: 1px solid var(--rule); display: block;
  box-shadow: 0 10px 30px rgba(8,107,110,0.13);
}
.progress { margin-top: var(--sp-6); max-width: 440px; }
.bar { height: 16px; border-radius: var(--r-pill); background: var(--teal-wash); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--magenta); border-radius: var(--r-pill); }
.progress .small { margin-top: var(--sp-2); }

/* ---------- footer ---------- */

.site-foot {
  background: var(--teal); color: #fff; padding: var(--sp-12) 0; margin-top: var(--sp-16);
}
.site-foot a { color: #fff; }
.site-foot .wrap { display: flex; gap: var(--sp-8); flex-wrap: wrap; justify-content: space-between; }
.site-foot .wordmark { color: #fff; }
.site-foot .rally { color: var(--yellow); }
.site-foot p { font-size: 15px; margin: var(--sp-4) 0 0; opacity: 0.92; }
.site-foot nav { margin: 0; gap: var(--sp-6); }
.site-foot nav a { font-size: 15px; min-height: 44px; }

/* ---------- a11y ---------- */

.skip {
  position: absolute; left: -9999px; background: var(--paper); color: var(--teal);
  padding: 12px 20px; border-radius: var(--r-sm); font-weight: 700; z-index: 100;
}
.skip:focus { left: var(--sp-6); top: var(--sp-2); }
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}


/* ---------- leader kit ---------- */

.kitgrid { display: grid; gap: var(--sp-6); margin-top: var(--sp-8);
           grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.kititem { background: var(--paper); border: 1px solid var(--rule);
           border-radius: var(--r-md, 12px); padding: var(--sp-5);
           display: flex; flex-direction: column; }
.kititem img { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; object-position: top center;
               display: block; border: 1px solid var(--rule);
               border-radius: 6px; background: #fff; margin-bottom: var(--sp-4); padding: 6px; }
.kititem h3 { color: var(--teal); margin: 0 0 6px; font-size: 19px; }
.kititem p { font-size: 15.5px; margin: 0 0 var(--sp-4); }
/* 23px tall, one pixel under the WCAG 2.5.8 floor, and it is a standalone
   download link rather than one inside a sentence, so the exception does
   not cover it. */
.kititem .dl { margin-top: auto; font-weight: 700; text-decoration: none;
               font-size: 15.5px; display: inline-flex; align-items: center;
               min-height: 44px; }
.kititem .dl::after { content: " \2193"; }
.kitnote { font-size: 15px; color: var(--muted); margin-top: var(--sp-4); }


/* ---------- before / after samples ---------- */

.bagrid { display: grid; gap: var(--sp-6); margin-top: var(--sp-8);
          grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.bacard { background: var(--paper); border: 1px solid var(--rule);
          border-radius: 12px; padding: var(--sp-4); }
.bapair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bapair figure { margin: 0; }
.bapair img { width: 100%; aspect-ratio: 1/1; object-fit: contain; display: block;
              background: #fff; border: 1px solid var(--rule); border-radius: 6px; }
.bapair figcaption { font-size: 12.5px; font-weight: 700; letter-spacing: 0.4px;
                     text-transform: uppercase; color: var(--muted);
                     margin-top: 6px; text-align: center; }
.bacard .nm { font-weight: 700; color: var(--teal); margin: var(--sp-4) 0 0;
              display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.bacard .nm span { font-size: 13px; font-weight: 700; color: var(--teal);
                   border: 1.5px solid var(--teal); border-radius: 999px;
                   padding: 2px 10px; white-space: nowrap; }

/* ---------- age bands ---------- */

.bands { width: 100%; border-collapse: collapse; margin-top: var(--sp-6); }
.bands th { text-align: left; color: var(--teal); font-size: 15px;
            border-bottom: 2px solid var(--teal); padding: 8px 10px 8px 0; }
.bands td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--rule);
            vertical-align: top; }
.bands td:first-child { font-weight: 700; white-space: nowrap; }
.bands td.n { text-align: right; white-space: nowrap; font-weight: 700; color: var(--magenta); }

/* ---------- quick view ---------- */
/* The kit thumbnails are unreadable at card size, and downloading a PDF to
   find out whether it is worth downloading is backwards. */

.kititem { position: relative; cursor: zoom-in; }
.kititem img { transition: transform .12s ease; }
.kititem:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

.qv-badge {
  position: absolute; top: 10px; right: 10px;
  background: rgba(8,107,110,.94); color: #fff;
  font-size: 13px; font-weight: 700; padding: 6px 11px;
  border-radius: var(--r-pill); pointer-events: none;
  opacity: 0; transform: translateY(-3px); transition: opacity .12s, transform .12s;
}
/* hover is a desktop nicety, never the only way in */
@media (hover: hover) and (pointer: fine) {
  .kititem:hover .qv-badge, .kititem:focus-visible .qv-badge {
    opacity: 1; transform: none;
  }
  .kititem:hover img { transform: scale(1.012); }
}
@media (hover: none) { .qv-badge { opacity: 1; transform: none; } }

body.qv-open { overflow: hidden; }

.qv {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(21,32,32,.975);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; flex-direction: column;
  padding: 14px clamp(12px, 3vw, 28px) 18px;
}
.qv[hidden] { display: none; }

.qv-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; color: #fff; margin-bottom: 10px;
}
.qv-title {
  margin: 0; font-weight: 700; font-size: clamp(16px, 2.2vw, 20px);
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.qv-pg { font-weight: 400; font-size: 14px; color: #BBD4D3; }
.qv-acts { display: flex; gap: 10px; align-items: center; }
.qv-dl, .qv-x {
  font: inherit; font-size: 15px; font-weight: 700;
  padding: 9px 16px; border-radius: var(--r-pill);
  border: 2px solid rgba(255,255,255,.55); background: transparent;
  color: #fff; text-decoration: none; cursor: pointer;
}
.qv-dl { background: #fff; color: var(--teal); border-color: #fff; }
.qv-x:hover, .qv-dl:hover { filter: brightness(.92); }
.qv-dl:focus-visible, .qv-x:focus-visible, .qv-nav:focus-visible {
  outline: 3px solid var(--yellow, #F2C231); outline-offset: 2px;
}

.qv-stage {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.qv-img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; background: #fff; border-radius: 4px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.qv-nav {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.5); background: rgba(0,0,0,.25);
  color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
}
.qv-nav:hover { background: rgba(0,0,0,.5); }
.qv-note {
  color: #D8EFEE; text-align: center; margin: 10px auto 0;
  max-width: 62ch; font-size: 15px;
}

@media (max-width: 620px) {
  /* A letter page scaled to fit a phone's height is 390px wide and nobody
     can read it. Fill the width instead and let the page scroll, the way
     every document viewer on a phone behaves. */
  .qv { padding: 12px 10px 0; }
  .qv-stage { display: block; overflow: auto; -webkit-overflow-scrolling: touch; }
  .qv-img {
    width: 100%; max-width: none; max-height: none; height: auto;
    margin: 0 auto 86px; display: block;
  }
  .qv-nav {
    position: fixed; bottom: 16px; width: 52px; height: 52px; font-size: 26px;
    background: rgba(8,107,110,.95); border-color: rgba(255,255,255,.7);
  }
  .qv-prev { left: 14px; }
  .qv-next { right: 14px; }
  .qv-note { display: none; }
  .qv-acts { width: 100%; }
  .qv-dl, .qv-x { flex: 1; text-align: center; }
}

/* ---------- raise calculator ---------- */

.calc { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: start; }
.calc-in { display: grid; gap: var(--sp-6); }

.field label { display: block; font-weight: 700; font-size: 18px; margin-bottom: 2px; }
.field .hint { color: var(--muted); font-size: 15px; margin: 0 0 10px; }
.field input[type=range] { width: 100%; accent-color: var(--teal); height: 28px; }
.field input[type=range]:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
.field .val { display: block; font-weight: 700; color: var(--teal); font-size: 17px; }

.calc-out {
  background: var(--teal); color: #fff; border-radius: var(--r-lg);
  padding: var(--sp-8); position: sticky; top: 90px;
}
.calc-k { margin: 0; font-size: 16px; color: #BBD4D3; font-weight: 700;
          letter-spacing: .4px; text-transform: none; }
.calc-big {
  font-family: "Fredoka", "Atkinson Hyperlegible", sans-serif; font-weight: 600;
  font-size: clamp(48px, 8vw, 76px); line-height: 1; margin: 6px 0 4px;
}
.calc-sub { margin: 0 0 var(--sp-6); color: #D8EFEE; font-size: 17px; }
.calc-rows { display: grid; gap: 1px; background: rgba(255,255,255,.22);
             border-radius: var(--r-sm); overflow: hidden; }
.calc-rows > div {
  background: var(--teal); display: flex; justify-content: space-between;
  align-items: baseline; gap: 12px; padding: 11px 14px; font-size: 16px;
}
.calc-rows span { color: #D8EFEE; }
.calc-rows strong { font-size: 18px; }
.calc-nudge {
  margin: var(--sp-6) 0 0; background: rgba(255,255,255,.14);
  border-radius: var(--r-sm); padding: 13px 15px; font-size: 16px; line-height: 1.45;
}
.calcnote { margin-top: var(--sp-6); }

@media (max-width: 820px) {
  .calc { grid-template-columns: 1fr; }
  .calc-out { position: static; }
}

/* ---------- kit email gate ---------- */

body.gate-open { overflow: hidden; }
.gate {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(21,32,32,.72);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
}
.gate[hidden] { display: none; }
.gate-box {
  position: relative; background: var(--cream); color: var(--ink);
  border-radius: var(--r-lg); padding: var(--sp-8);
  width: min(480px, 100%); max-height: 92vh; overflow: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
}
.gate-box h2 { margin: 0 0 8px; font-size: clamp(22px, 3.4vw, 28px); }
.gate-lede { color: var(--muted); margin: 0 0 var(--sp-6); font-size: 16px; }
.gate-x {
  position: absolute; top: 10px; right: 12px; border: 0; background: none;
  font-size: 30px; line-height: 1; color: var(--muted); cursor: pointer;
  padding: 4px 8px; border-radius: var(--r-sm);
}
.gate-x:hover { color: var(--ink); }
.gf { margin-bottom: var(--sp-4); }
.gf label { display: block; font-weight: 700; margin-bottom: 5px; }
.gf label span { font-weight: 400; color: var(--muted); }
.gf input, .gf select {
  width: 100%; font: inherit; font-size: 17px; padding: 11px 13px;
  border: 2px solid var(--rule); border-radius: var(--r-sm);
  background: #fff; color: var(--ink);
}
.gf input:focus, .gf select:focus,
.gate-x:focus-visible, .gate-go:focus-visible {
  outline: 3px solid var(--teal); outline-offset: 2px; border-color: var(--teal);
}
.gf-err { color: #9A1B1B; font-size: 15px; margin: 6px 0 0; font-weight: 700; }
.gate-go { width: 100%; margin-top: var(--sp-2); cursor: pointer; }
.gate-go[disabled] { opacity: .6; cursor: progress; }
.gate-fine { font-size: 14px; color: var(--muted); margin: var(--sp-4) 0 0; }

/* model picker */
.models { border: 0; padding: 0; margin: 0 0 var(--sp-6); }
.models legend { font-weight: 700; font-size: 18px; padding: 0; margin-bottom: 2px; }
.model {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  background: var(--paper); border: 2px solid var(--rule);
  border-radius: var(--r-md); padding: 13px 15px; margin-bottom: 9px;
}
.model:hover { border-color: var(--teal); }
.model input { margin: 3px 0 0; accent-color: var(--teal); width: 20px; height: 20px; flex: none; }
.model:has(input:checked) { border-color: var(--teal); background: var(--teal-wash); }
.model:has(input:focus-visible) { outline: 3px solid var(--teal); outline-offset: 2px; }
.m-body { display: block; }
.m-name { display: block; font-weight: 700; font-size: 17px; }
.m-note { display: block; color: var(--muted); font-size: 15px; line-height: 1.4; margin-top: 2px; }
.calc-compare {
  margin: var(--sp-4) 0 0; font-size: 15px; line-height: 1.45;
  color: #FDF0C4; border-left: 3px solid var(--yellow, #F2C231); padding-left: 12px;
}

/* ---------- leader dashboard mockup ----------
   Drawn in CSS rather than shipped as a screenshot. A PNG of a dashboard
   goes blurry on a retina phone, cannot be read by a screen reader, and
   goes stale the moment the real screen changes. This is live text, so it
   scales, it reads out, and it reflows on a 360px phone.
   Every name and number inside it is invented. The "Example" badge says
   so on the face of it, because a reader should never have to wonder
   whether they are looking at a real group's buyers. */

.dashshot {
  margin: var(--sp-8) 0 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 1px 0 var(--rule);
}

.dashshot .dashtop {
  background: var(--teal);
  color: #fff;
  padding: 14px var(--sp-6);
  display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap;
}
.dashshot .dashtop .who { font-weight: 700; font-size: 18px; }
.dashshot .dashtop .what { font-size: 15px; opacity: 0.92; }
.dashshot .dashtop .sample {
  margin-left: auto; background: var(--yellow); color: var(--ink);
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  padding: 3px 11px; border-radius: var(--r-pill);
}

.dashshot .body { padding: var(--sp-6); }

.dashtiles {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}
.dashtile {
  border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: var(--sp-4); background: var(--cream);
}
.dashtile .n {
  font-size: 30px; font-weight: 700; line-height: 1.05; color: var(--teal);
  display: block;
}
.dashtile.cash .n { color: var(--magenta); }
.dashtile .l {
  display: block; margin-top: 4px; font-size: 14px; color: var(--muted);
  font-weight: 700;
}

.dashbar { margin-top: var(--sp-6); }
.dashbar .track {
  height: 20px; border-radius: var(--r-pill);
  background: var(--teal-wash); border: 1px solid var(--rule);
  overflow: hidden;
}
.dashbar .fill { height: 100%; background: var(--teal); }
.dashbar .cap {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  font-size: 14px; font-weight: 700; color: var(--muted); margin-top: 6px;
}

.dashneeds {
  margin-top: var(--sp-6); padding: var(--sp-4) var(--sp-6);
  background: var(--magenta-wash); border-radius: var(--r-md);
}
.dashneeds h4 {
  margin: 0 0 var(--sp-2); font-size: 15px; color: var(--magenta);
  text-transform: none; letter-spacing: 0.01em;
}
.dashneeds ul { margin: 0; padding-left: 20px; }
.dashneeds li { font-size: 15px; margin-bottom: 4px; }
.dashneeds li:last-child { margin-bottom: 0; }

.dashtable { margin-top: var(--sp-6); overflow-x: auto; }
.dashtable table { min-width: 420px; font-size: 15px; }
.dashtable th { padding: 8px 14px 8px 0; font-size: 14px; }
.dashtable td { padding: 9px 14px 9px 0; }
.dashtable td:last-child, .dashtable th:last-child { padding-right: 0; }
.pill {
  display: inline-block; font-size: 13px; font-weight: 700;
  padding: 2px 10px; border-radius: var(--r-pill);
  background: var(--teal-wash); color: var(--teal-dark);
}
.pill.owed { background: var(--yellow-wash); color: #7a5a00; }

.dashfoot {
  border-top: 1px solid var(--rule); background: var(--cream);
  padding: 12px var(--sp-6); font-size: 14px; color: var(--muted);
}

@media (max-width: 560px) {
  .dashshot .dashtop .sample { margin-left: 0; }
  .dashshot .body { padding: var(--sp-4); }
  .dashtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashtile .n { font-size: 26px; }
}

/* ---------- what the dashboard does for you ---------- */

.autolist { list-style: none; padding: 0; margin: var(--sp-8) 0 0; }
.autolist li {
  position: relative; padding-left: 38px; margin-bottom: var(--sp-4);
  max-width: 64ch;
}
.autolist li::before {
  content: ""; position: absolute; left: 0; top: 5px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--teal);
}
.autolist li::after {
  content: ""; position: absolute; left: 7px; top: 11px;
  width: 7px; height: 11px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.autolist strong { display: block; }


/* ---------- header nav on a phone ----------
   The header is sticky, so whatever it costs in height it costs on every
   screen of every page, forever. Six links plus a button wrapped onto
   three rows at 390px and ate more than half the viewport.
   Below 860px the links become one row that scrolls sideways and the
   button stays put beside them, which puts the header back to two rows.
   The next link is always half visible at the right edge, which is what
   tells a thumb there is more to swipe to. */

/* Below 1180px the brand, seven links and the button stop fitting on one
   line, so the nav drops to a row of its own. It stays a single
   non-wrapping row that scrolls sideways if it has to, which keeps the
   sticky header at two rows instead of three. The next link is always
   half visible at the right edge, which is what tells a thumb there is
   more to swipe to. */

@media (max-width: 1180px) {
  .site-head .wrap { gap: var(--sp-4); min-height: 0; padding-top: 10px; padding-bottom: 10px; }

  .site-head nav {
    width: 100%; margin-left: 0; gap: var(--sp-4);
    flex-wrap: nowrap; align-items: center;
  }
  .site-head .navlinks {
    flex: 1 1 auto; min-width: 0;
    flex-wrap: nowrap; gap: var(--sp-4);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .site-head .navlinks::-webkit-scrollbar { display: none; }
  .site-head .navlinks a {
    flex: none; white-space: nowrap; scroll-snap-align: start;
  }
  .site-head nav .btn { flex: none; padding: 10px 18px; font-size: 15px; }
}

/* The wordmark only needs to shrink once the screen is actually small. */
@media (max-width: 860px) {
  .site-head .brand img { width: 40px; }
  .site-head .wordmark { font-size: 22px; }
  .site-head .rally { font-size: 12px; }
}

@media (max-width: 420px) {
  /* At this width the button and the links are fighting over the same
     row. The button wins on the words, not the padding. */
  .site-head nav .btn { padding: 10px 14px; font-size: 14px; }
  .site-head .navlinks a { font-size: 15px; }
}

/* ---------- live data: order form, leader dashboard ----------
   Shared by the group order pages and /g/dashboard.html. Everything
   here is fed by Supabase at runtime, so each block has to look
   deliberate while it is still empty. */

/* .btn is written for <a>. These put a real <button> on the same
   footing rather than making every form use a link that is not one. */
button.btn { font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; }
button.btn[disabled] { opacity: .55; cursor: progress; }

.gf textarea {
  width: 100%; font: inherit; font-size: 17px; padding: 11px 13px;
  border: 2px solid var(--rule); border-radius: var(--r-sm);
  background: #fff; color: var(--ink); resize: vertical; min-height: 76px;
}
.gf textarea:focus { outline: 3px solid var(--teal); outline-offset: 2px;
                     border-color: var(--teal); }
.gfrow { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 620px) { .gfrow { grid-template-columns: 1fr 1fr; } }

.formcard {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: var(--sp-6); max-width: 560px;
}

/* One place for every "it worked" and "it did not". role=status so a
   screen reader is told without the focus being yanked away. */
.msg { border-radius: var(--r-md); padding: var(--sp-4) var(--sp-6);
       margin: var(--sp-4) 0 0; font-weight: 700; }
.msg.ok   { background: var(--teal-wash);    color: var(--teal-dark); }
.msg.bad  { background: #FBE3E3;             color: #8A1A1A; }
.msg.wait { background: var(--yellow-wash);  color: #6B4E00; }
.msg p { margin: 6px 0 0; font-weight: 400; }
.msg p:first-child { margin-top: 0; }

/* skeleton, so an empty dashboard does not read as a broken one */
.loading { color: var(--muted); font-weight: 700; }

/* signed in strip */
.whoami {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  font-size: 15px; color: var(--muted); margin-bottom: var(--sp-6);
}
.whoami strong { color: var(--ink); }
.linkbtn {
  background: none; border: 0; padding: 8px 0; font: inherit; font-size: 15px;
  font-weight: 700; color: var(--teal); cursor: pointer;
  text-decoration: underline; min-height: 44px;
}
.linkbtn:hover { color: var(--teal-dark); }

/* group switcher, only shown when a leader has more than one */
.grouppick { display: flex; gap: var(--sp-2); flex-wrap: wrap;
             margin-bottom: var(--sp-6); }
.grouppick button {
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  background: var(--paper); color: var(--teal);
  border: 2px solid var(--rule); border-radius: var(--r-pill);
  padding: 10px 18px; min-height: 44px;
}
.grouppick button[aria-pressed="true"] {
  background: var(--teal); border-color: var(--teal); color: #fff;
}

/* the paid toggle in the orders table */
.paidbtn {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  border-radius: var(--r-pill); padding: 6px 14px; min-height: 36px;
  border: 2px solid transparent;
}
.paidbtn.is-paid { background: var(--teal-wash); color: var(--teal-dark); }
.paidbtn.is-owed { background: var(--yellow-wash); color: #7a5a00; }
.paidbtn:hover { border-color: var(--teal); }
.paidbtn:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.paidbtn[disabled] { opacity: .5; cursor: progress; }

.dashtable td .sub { display: block; font-size: 13px; color: var(--muted); }