/* Rise Ultra — runner fundraising guide (/fundraising).
   Loads after tokens.css, which supplies the brand palette. This file adds the
   warm paper scale the guide needs: tokens.css has a single --card (#FCFAF6,
   almost white) which is right for the sales pages but leaves a reference
   document of this length with no way to nest a box inside a card. Three
   graded paper tones plus two clay washes are defined below and used
   throughout; nothing here changes a shared token. */

:root{
  /* Paper scale: page -> card -> box inside a card. */
  --paper:#F5F1E8;
  --paper-2:#EFE9DB;
  --paper-3:#E7DFCC;
  --line:#D8D0C0;
  --line-2:#C9BFA9;
  /* Clay. --clay is 4.39:1 on cream, under AA, so it is a surface colour only;
     small clay TEXT on paper must use --clay-ink (5.7:1). */
  --clay-ink:#9A4526;
  --clay-wash:#F6E7DF;
  --dark:#16130F;
  --dark-2:#241F19;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-size:17px;line-height:1.62;font-weight:400}
img{max-width:100%;display:block}
[hidden]{display:none!important}

h1,h2,.eyebrow,.secno,.cardk{font-family:'Archivo',system-ui,sans-serif}
a{color:var(--clay-ink)}
p{margin:0 0 15px}
p:last-child{margin-bottom:0}

/* Focus: one visible ring everywhere, including inside dark cards. */
:focus-visible{outline:3px solid var(--clay);outline-offset:2px;border-radius:4px}
.dark :focus-visible,.nav :focus-visible{outline-color:var(--light-clay)}

.wrap{max-width:1000px;margin:0 auto;padding:0 24px}
.rd{max-width:660px}          /* reading measure for long prose */

/* ---------------------------------------------------------------- header */
.top{background:var(--paper);border-bottom:1px solid var(--line)}
.top-in{max-width:1000px;margin:0 auto;padding:12px 24px;
  display:flex;align-items:center;gap:16px}
.top .back{font-size:14.5px;font-weight:600;text-decoration:none;color:var(--ink);
  display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 2px}
.top .back:hover{color:var(--clay-ink)}
.top .mark{margin:0 auto;display:block}
.top .mark img{width:104px;height:auto}
.top .tools{display:flex;align-items:center;gap:9px}

/* ------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:44px;padding:0 18px;border-radius:9px;cursor:pointer;
  font-family:'Hanken Grotesk',system-ui,sans-serif;font-weight:600;font-size:15px;
  line-height:1.2;text-decoration:none;border:1.5px solid transparent;
  background:transparent;color:var(--ink);transition:background .15s,color .15s}
.btn svg{width:17px;height:17px;fill:currentColor;flex:none}
.btn--primary{background:var(--clay);border-color:var(--clay);color:#fff}
.btn--primary:hover{background:var(--clay-dark);border-color:var(--clay-dark)}
.btn--out{border-color:var(--ink);color:var(--ink)}
.btn--out:hover{background:var(--paper-2)}
.btn--quiet{border-color:var(--line-2);color:var(--ink);background:var(--paper);
  font-size:14px;min-height:40px;padding:0 14px}
.btn--quiet:hover{background:var(--paper-3)}
.btn--big{min-height:52px;font-size:16px;padding:0 24px}
.btn--wa{background:#1f7a4d;border-color:#1f7a4d;color:#fff}
.btn--wa:hover{background:#176139;border-color:#176139}
.btn--icon{width:44px;min-height:44px;padding:0;border-color:var(--line-2)}
.btn--icon svg{width:19px;height:19px}
/* On dark cards */
.dark .btn--out{border-color:rgba(245,241,232,.45);color:var(--paper)}
.dark .btn--out:hover{background:rgba(245,241,232,.1)}
/* .dark a (below) is (0,1,1) and beats .btn--primary (0,1,0), which turned
   the Stuck? button's label light-clay ON clay — 1.88:1. Restore it. */
.dark a.btn--primary{color:#fff}

/* ---------------------------------------------------------------- hero */
/* padding-top/bottom, NOT the shorthand: .hero shares its element with .wrap
   (<div class="wrap hero">), and a `padding:40px 0 4px` here wins on source
   order at equal specificity and zeroes .wrap's 24px side padding — which is
   invisible on desktop, where max-width centres the column anyway, and puts
   the hero hard against the screen edge on a phone. */
.hero{padding-top:40px;padding-bottom:4px}
.eyebrow{margin:0 0 16px;font-size:11.5px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--clay-ink)}
.hero h1{margin:0 0 18px;font-size:60px;font-weight:800;line-height:1.02;
  letter-spacing:-.005em;text-transform:uppercase;color:var(--ink);
  max-width:15ch;text-wrap:balance}
.hero h1 .h1-sub{display:block;max-width:26ch;margin-top:12px;font-size:28px;font-weight:700;
  line-height:1.2;letter-spacing:0;text-transform:none;color:var(--ink)}
.hero .lead{margin:0 0 26px;font-size:18px;line-height:1.55;color:var(--muted);max-width:52ch}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 34px}


/* ----------------------------------------------------------- section nav
   Sticky strip, same idea as /training: dark bar, horizontal scroll on phone.
   An IntersectionObserver is NOT used to light the current chip — see the
   comment in fundraising.js. */
.nav{position:sticky;top:0;z-index:40;background:var(--dark);
  border-top:1px solid rgba(245,241,232,.1)}
.nav-in{max-width:1000px;margin:0 auto;padding:0 12px;display:flex;gap:2px;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.nav-in::-webkit-scrollbar{display:none}
.nav a{flex:none;display:inline-flex;align-items:center;gap:7px;
  min-height:46px;padding:0 13px;text-decoration:none;white-space:nowrap;
  font-size:13px;font-weight:600;color:rgba(245,241,232,.66);
  border-bottom:2px solid transparent;transition:color .15s}
.nav a:hover{color:var(--paper)}
.nav a .n{font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-size:10.5px;
  letter-spacing:.1em;color:rgba(245,241,232,.4)}
.nav a.is-here{color:var(--paper);border-bottom-color:var(--clay)}
.nav a.is-here .n{color:var(--light-clay)}

/* ------------------------------------------------------------- sections */
.sec{border-top:1px solid var(--line);scroll-margin-top:60px}
.sec:first-of-type{border-top:0}
.sec-head{display:flex;align-items:baseline;gap:14px;width:100%;
  margin:0;padding:38px 0 4px;background:none;border:0;text-align:left;
  font-family:inherit;color:inherit}
.secno{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--clay-ink);
  flex:none;padding-top:8px}
.sec-head h2{margin:0;font-size:36px;font-weight:800;line-height:1.04;
  text-transform:uppercase;color:var(--ink)}
.sec-head .chev{display:none}
.sec-body{padding:0 0 46px}
.sec-intro{margin:10px 0 24px;font-size:17px;color:var(--muted);max-width:58ch}

h3{font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:19px;
  line-height:1.25;margin:0 0 8px;color:var(--ink);text-transform:none}
.h-sm{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--clay-ink);margin:34px 0 14px;font-family:'Archivo',system-ui,sans-serif}

/* --------------------------------------------------------- numbered list */
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps > li{display:flex;gap:15px;padding:17px 0;border-top:1px solid var(--line)}
.steps > li:first-child{border-top:0;padding-top:4px}
.steps .num{flex:none;width:27px;height:27px;border-radius:50%;background:var(--clay);
  color:#fff;font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-size:13px;
  display:flex;align-items:center;justify-content:center;margin-top:1px}
.steps .sbody{flex:1;min-width:0}
.steps .sbody > p{margin:0;color:var(--muted);font-size:16px}
.steps .sbody h3{margin:0 0 3px;font-size:17px}

/* Quoted / copyable text block */
.box{background:var(--paper-3);border:1px solid var(--line);border-radius:10px;
  padding:15px 17px;margin:12px 0 0;font-size:15.5px;line-height:1.6}
.box p{margin:0 0 11px}
.box p:last-child{margin:0}
.box--quote p:first-child{margin-top:0}
/* The subject is its own <p>, not a span inside the greeting: plainText()
   in fundraising.js joins paragraphs with blank lines, and as a span it
   copied as "Subject: ...Hi [name]," with nothing between them. */
p.subject{font-weight:700;color:var(--ink);margin:0 0 11px}
.rowbtns{display:flex;flex-wrap:wrap;gap:9px;margin:13px 0 0}
.hint{margin:11px 0 0;font-size:13.5px;color:var(--muted)}

/* Callout */
.callout{display:flex;gap:12px;background:var(--clay-wash);
  border:1px solid #E7C9B8;border-radius:10px;padding:15px 17px;margin:26px 0 0}
.callout svg{width:19px;height:19px;fill:var(--clay-ink);flex:none;margin-top:2px}
.callout p{margin:0;font-size:15.5px;line-height:1.55}
.callout b{color:var(--ink)}

/* Card grids */
.grid{display:grid;gap:14px;margin:14px 0 0}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--paper-2);border:1px solid var(--line);border-radius:11px;padding:17px 18px}
.card h3{font-size:16.5px;margin:0 0 5px}
.card p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.card .cnum{display:flex;align-items:center;justify-content:center;
  width:25px;height:25px;border-radius:50%;background:var(--clay);color:#fff;
  font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-size:12.5px;margin:0 0 10px}
.card .src{font-size:12.5px;color:var(--clay-ink);text-decoration:none;
  border-bottom:1px solid rgba(154,69,38,.35)}

/* Dark cards */
.dark{background:var(--dark);color:var(--paper);border-radius:12px;padding:22px 24px}
.dark h3{color:var(--paper);font-size:22px;font-weight:800;text-transform:uppercase;
  letter-spacing:.01em;margin:0 0 8px}
.dark p{color:rgba(245,241,232,.82);font-size:15.5px}
.dark a{color:var(--light-clay)}
.dark .big{font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-size:30px;
  line-height:1.05;color:var(--paper);margin:0 0 6px;text-transform:uppercase}

/* ------------------------------------------------------------ 02 messages */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.tab{min-height:40px;padding:0 15px;border-radius:100px;cursor:pointer;
  border:1.5px solid var(--line-2);background:var(--paper);color:var(--ink);
  font-family:'Hanken Grotesk',system-ui,sans-serif;font-weight:600;font-size:14px;
  line-height:1.2;transition:background .15s,color .15s,border-color .15s}
.tab:hover{background:var(--paper-3)}
.tab[aria-pressed="true"]{background:var(--dark);border-color:var(--dark);color:var(--paper)}
.msg{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:20px 22px}
.msg h3{margin:0 0 3px;font-size:19px}
.msg .when{margin:0;font-size:14px;color:var(--muted)}

/* -------------------------------------------------------------- timeline */
.tl{list-style:none;margin:6px 0 0;padding:0 0 0 26px;position:relative}
.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;
  width:2px;background:var(--line)}
.tl li{position:relative;padding:0 0 22px}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:"";position:absolute;left:-26px;top:6px;width:12px;height:12px;
  border-radius:50%;background:var(--clay);border:2px solid var(--paper)}
.tl .tlh{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0 0 2px}
.tl .tlh b{font-size:16.5px;font-weight:700;color:var(--ink)}
.chip{font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--clay-ink);
  background:var(--clay-wash);border:1px solid #E7C9B8;border-radius:100px;padding:3px 9px}
.tl p{margin:0;font-size:15.5px;color:var(--muted)}

/* ---------------------------------------------------------------- lists */
.ticks{list-style:none;margin:12px 0 0;padding:0}
.ticks li{position:relative;padding:0 0 9px 25px;font-size:15.5px;color:var(--muted)}
.ticks li::before{content:"";position:absolute;left:3px;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--clay)}
.dark .ticks li{color:rgba(245,241,232,.82)}
.dark .ticks li::before{background:var(--light-clay)}

/* --------------------------------------------------------------- sources */
.sources{margin:8px 0 0;border-top:1px solid var(--line);padding-top:20px}
.sources summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:7px;
  min-height:44px;font-size:14px;font-weight:600;color:var(--clay-ink)}
.sources summary::-webkit-details-marker{display:none}
.sources summary::before{content:"\25B8";transition:transform .15s;display:inline-block}
.sources[open] summary::before{transform:rotate(90deg)}
.sources ol{margin:4px 0 0;padding-left:20px;font-size:14px;color:var(--muted)}
.sources li{padding:0 0 7px}

/* ---------------------------------------------------------------- footer */
.foot{background:var(--paper-2);border-top:1px solid var(--line);margin-top:10px;
  padding:26px 0 34px}
.foot p{margin:0;font-size:13px;line-height:1.6;color:var(--muted)}
.foot .fm{font-weight:600;color:var(--ink);margin-bottom:5px}

/* ============================================================ >= 768px */
@media (min-width:768px){
  .top .tools .lbl{display:inline}
  .m-only{display:none!important}
}

/* ============================================================= < 768px
   Sections become accordions. Everything below is the phone layout; the
   accordion state lives on .sec (is-open), set by fundraising.js. */
@media (max-width:767.98px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .top-in{padding:8px 14px;gap:10px}
  .top .mark img{width:92px}
  .d-only{display:none!important}

  .hero{padding-top:26px;padding-bottom:2px}
  .hero h1{font-size:31px;line-height:1.08;max-width:none}
  .hero h1 .h1-sub{font-size:19px;margin-top:8px;max-width:none}
  .hero .lead{font-size:16px;margin-bottom:22px}
  .hero .cta{flex-direction:column;gap:10px;margin-bottom:26px}
  .hero .cta .btn{width:100%}



  .nav-in{padding:0 8px}
  .nav a{font-size:12.5px;padding:0 11px}

  /* Accordion head */
  .sec{scroll-margin-top:52px}
  .sec-head{padding:0;min-height:58px;align-items:center;gap:12px;cursor:pointer;
    border-top:0}
  .sec-head h2{font-size:16px;letter-spacing:.02em;flex:1}
  .secno{padding-top:0;font-size:11px}
  .sec-head .chev{display:block;flex:none;width:18px;height:18px;
    fill:var(--muted);transition:transform .18s}
  .sec.is-open .sec-head .chev{transform:rotate(180deg)}
  .sec-body{display:none;padding:2px 0 30px}
  .sec.is-open .sec-body{display:block}

  .sec-intro{font-size:15.5px;margin:6px 0 18px}
  h3{font-size:17px}

  .grid--3,.grid--4,.grid--2{grid-template-columns:1fr}
  /* 44px minimum tap target on phone. .btn--quiet and .tab are 40px on
     desktop, where a mouse makes that fine; width:auto on the icon button
     has to be re-pinned to 44 or the 100% rule above collapses it to its
     content (22px). */
  .btn{width:100%}
  .tab{width:auto;min-height:44px}
  .btn--quiet{min-height:44px}
  .btn--icon{width:44px;min-width:44px;flex:none}
  .rowbtns .btn{width:100%}
  .dark{padding:19px 18px}
  .dark .big{font-size:24px}
  .msg{padding:17px 16px}
  .box{padding:14px 15px;font-size:15px}
  .tabs{gap:7px;margin-bottom:17px}
  .foot{padding:22px 0 30px}
}

/* =====================================================================
   PERSONAL MESSAGES AS THE SPINE
   Ask maths, the two-jobs note, grouped tabs, and the ask tracker. Uses the
   page's own tokens; clay text is --clay-ink throughout, since --clay on paper
   is under AA at text size.
   ===================================================================== */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- ask maths, under the hero stats ---- */
.twojobs-k{margin:0 0 5px;font-family:'Archivo',system-ui,sans-serif;font-weight:800;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--clay-ink)}

/* ---- the two jobs, above the tabs ---- */
.twojobs{margin:0 0 20px;padding:14px 16px;background:var(--paper-2);
  border:1px solid var(--line);border-radius:10px}
.twojobs p:last-child{margin:0;font-size:15px;line-height:1.6;color:var(--ink)}

/* ---- two tab groups, equal weight ---- */
.tabgroups{display:grid;gap:14px;margin:0 0 20px}
@media (min-width:900px){.tabgroups{grid-template-columns:1fr 1fr;gap:22px}}
.tabgroup-k{margin:0 0 8px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.tabgroup-k b{color:var(--ink);font-weight:700}
.tabgroups .tabs{margin:0}

/* ---- "this is not pestering" ---- */
.note-ok{margin:0 0 12px;padding:10px 13px;background:#EEF3EA;border:1px solid #CBDDC0;
  border-radius:8px;font-size:14px;line-height:1.55;color:#2f4a24}
.note-ok b{color:#2f4a24}

/* ---- timeline: the event week is where half the money lands ---- */
.tl li.tl-key::before{width:16px;height:16px;left:-28px;top:4px;box-shadow:0 0 0 4px var(--clay-wash)}
.tl li.tl-key .tlh b{color:var(--clay-ink)}

/* ---- the ask tracker ---- */
.tracker{margin:26px 0 0;padding:18px;background:var(--paper-2);
  border:1px solid var(--line);border-radius:12px}
.tracker h3{margin:0 0 4px}
/* Stacked by default: on a phone the page's .btn goes full width, which crushed
   the textarea to a sliver beside it. Side by side only where there is room. */
.tr-add{display:flex;flex-direction:column;gap:9px;margin:12px 0 0}
.tr-add textarea{width:100%}
.tr-add .btn{width:100%}
@media (min-width:560px){
  .tr-add{flex-direction:row;align-items:flex-start}
  .tr-add textarea{width:auto}
  .tr-add .btn{width:auto;padding:0 22px}
}
.tr-add textarea{flex:1 1 auto;min-height:46px;padding:11px 13px;resize:vertical;
  font:inherit;font-size:15.5px;line-height:1.4;color:var(--ink);background:#fff;
  border:1px solid var(--line-2);border-radius:8px}
.tr-add textarea:focus{outline:3px solid var(--clay);outline-offset:1px;border-color:var(--clay)}
.tr-add .btn{flex:0 0 auto;min-height:46px}
.tr-count{margin:12px 0 0;font-family:'Archivo',system-ui,sans-serif;font-weight:800;
  font-size:14px;letter-spacing:.02em;color:var(--ink)}
.tr-list{list-style:none;margin:10px 0 0;padding:0}
.tr-row{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;
  padding:10px 0;border-top:1px solid var(--line)}
.tr-name{grid-column:1;font-weight:600;font-size:15.5px;color:var(--ink);overflow-wrap:anywhere}
.tr-del{grid-column:2;grid-row:1;width:36px;height:36px;border-radius:50%;cursor:pointer;
  border:1px solid transparent;background:transparent;color:var(--muted);font-size:20px;line-height:1}
.tr-del:hover{border-color:var(--line-2);color:var(--ink)}
.tr-del:focus-visible{outline:3px solid var(--clay);outline-offset:1px}
.tr-ticks{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:6px}
.tr-tick{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 11px;
  border:1px solid var(--line-2);border-radius:100px;background:#fff;cursor:pointer;
  font-size:13.5px;font-weight:600;color:var(--muted);user-select:none}
.tr-tick input{margin:0;width:16px;height:16px;accent-color:var(--clay)}
.tr-tick:has(input:checked){border-color:var(--dark);background:var(--dark);color:var(--paper)}
.tr-tick:has(input:focus-visible){outline:3px solid var(--clay);outline-offset:1px}
.tr-row.is-gave .tr-name::after{content:"  \2713";color:#2f4a24}
.tr-note{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.tr-note.is-warn{color:var(--clay-ink);font-weight:600}
@media (min-width:640px){
  .tr-row{grid-template-columns:minmax(0,1fr) auto auto}
  .tr-ticks{grid-column:2;grid-row:1}
  .tr-del{grid-column:3}
}

/* ------------------------------------------------ streamlined page, 28 Sep
   Hero now runs H1 -> lead -> maths -> buttons -> Start today, so the maths
   sits directly under the claim it backs up. */

/* "Once it's live": three plain lines instead of three cards */
.live{margin:8px 0 0;padding-left:22px;max-width:660px}
.live li{padding:0 0 8px;font-size:15.5px;line-height:1.55;color:var(--muted)}
.live li::marker{color:var(--clay-ink);font-weight:800}
.live b{color:var(--ink)}

/* the one "before you send" line under whichever message is showing */
.hint--send{margin-top:14px;max-width:660px}
.hint--send b{color:var(--ink)}

/* tax line and the FAQ link, now at the foot of Photos, film and help */
.tax{margin:20px 0 0;font-size:15px;color:var(--muted)}
.tax b{color:var(--ink)}
.tax .src{font-size:12.5px;text-decoration:none;font-weight:700}
.faq-more{margin:18px 0 0;font-size:14px}
.faq-more a{display:inline-block;padding:10px 0;color:var(--clay-dark);font-weight:700}

/* Why it matters: facts as a list rather than seven cards */
.facts li{padding-bottom:12px;line-height:1.6}
.facts .src{font-size:12.5px;text-decoration:none;font-weight:700;margin-left:2px}

/* On desktop every section is open, so a 120-name list would run to several
   thousand pixels. Cap it there only: on a phone the accordion already holds
   it, and a scroll box inside a scrolling page traps swipes. */
@media (min-width:768px){ .tr-list{max-height:520px;overflow-y:auto} }

/* -------------------------------------------------------- the four steps
   Replaces the maths box and the Start today checklist (28 Sep): one numbered
   path, set-up first. Step 1 carries the clay; the rest are quieter so the
   order reads at a glance. */
.howto{list-style:none;margin:6px 0 30px;padding:0;display:grid;gap:12px;max-width:760px}
.howto-step{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start;
  padding:18px 20px;background:var(--paper-2);border:1px solid var(--line);border-radius:14px}
.howto-step.is-first{background:var(--clay-wash);border:2px solid var(--clay);padding:20px 22px}
.howto-n{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-size:20px;
  background:var(--paper);color:var(--ink);border:1.5px solid var(--line-2)}
.is-first .howto-n{background:var(--clay);border-color:var(--clay);color:#fff}
.howto-first{margin:0 0 4px;font-family:'Archivo',system-ui,sans-serif;font-size:11.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--clay-ink)}
.howto-body h2{margin:0;font-size:21px;font-weight:800;line-height:1.2;color:var(--ink)}
.is-first .howto-body h2{font-size:24px}
.howto-body p{margin:6px 0 0;font-size:15.5px;line-height:1.55;color:var(--muted)}
.is-first .howto-body > p:not(.howto-first){color:var(--ink)}
.howto-body .btn{margin-top:14px}
@media (max-width:767.98px){
  .howto{margin-bottom:24px}
  .howto-step{grid-template-columns:36px minmax(0,1fr);gap:12px;padding:16px}
  .howto-step.is-first{padding:17px 16px}
  .howto-n{width:36px;height:36px;font-size:17px}
  .howto-body h2{font-size:19px}
  .is-first .howto-body h2{font-size:21px}
  .howto-body .btn{width:100%}
}

/* ------------------------------------------------------------ ask list
   Its own section since 28 Sep, and deliberately the loudest block on the
   page after the hero: a tinted band (so it stands out even as a collapsed
   accordion on a phone) holding a white card with a scoreboard and a bar.
   These rules come after the original .tracker ones and override them. */
.sec--list{background:var(--clay-wash);border-top:0;border-radius:16px;
  margin:28px -20px;padding:0 20px}
.sec--list + .sec{border-top:0}
.sec--list .sec-head h2{color:var(--clay-ink)}
.sec--list .sec-body{padding-bottom:30px}
.sec--list .sec-intro{color:var(--ink)}
.tracker{margin:0;padding:22px 24px;background:#fff;border:2px solid var(--clay);
  border-radius:14px;box-shadow:0 16px 36px -24px rgba(120,50,20,.5)}
.tr-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.tr-stat{padding:0 14px}
.tr-stat:first-child{padding-left:0}
.tr-stat + .tr-stat{border-left:1px solid var(--line)}
.tr-stat b{display:block;font-family:'Archivo',system-ui,sans-serif;font-weight:800;
  font-size:38px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.tr-stat span{display:block;margin-top:6px;font-size:11.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.tr-stat--gave b{color:#2F4A24}
.tr-tick--g:has(input:checked){border-color:#2F4A24;background:#2F4A24}
.tr-bar{position:relative;height:12px;margin:20px 0 0;border-radius:100px;
  background:var(--paper-2);overflow:hidden}
.tr-bar span{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:100px;
  transition:width .35s ease}
.tr-bar-n{background:rgba(181,83,46,.28)}
.tr-bar-a{background:var(--clay)}
.tr-bar-g{background:#2F4A24}
.tracker .tr-count{margin:10px 0 0;font-size:14.5px}
.tracker .tr-add{margin-top:18px}
.tracker .tr-add textarea{min-height:52px;font-size:16px;border-width:1.5px}
.tracker .tr-add .btn{min-height:52px}
@media (prefers-reduced-motion:reduce){ .tr-bar span{transition:none} }
@media (max-width:767.98px){
  .sec--list{margin:18px -10px;padding:0 10px;border-radius:14px}
  .tracker{padding:18px 16px}
  .tr-stat{padding:0 8px}
  .tr-stat b{font-size:27px}
  .tr-stat span{font-size:10px;letter-spacing:.05em}
}

/* ------------------------------------------------------------------ print
   The "Download PDF" pack is this page printed (tools/build-fundraising-pdf.sh),
   so the PDF can never drift from the guide. Print shows every message at once,
   drops everything that only works on screen (buttons, tabs, the tracker, the
   nav) and spells out the two links a reader needs. */
.print-only{display:none}
@media print{
  @page{size:A4;margin:14mm 15mm 16mm}
  html,body{background:#fff}
  body{font-size:10.5pt}
  .print-only{display:block}
  .top{position:static;border:0}
  #list,
  .top .back,.top .tools,.nav,.hero .cta,.rowbtns,.tabgroups,.tracker,
  .sec-head .chev,.faq-more,.sources,.btn{display:none!important}
  .msg[hidden]{display:block!important}
  .sec-body{display:block!important}
  .hero{padding-top:6mm}
  .hero h1{font-size:34pt}
  .hero h1 .h1-sub{font-size:15pt}
  .sec-head{padding:8mm 0 2mm;border:0}
  .sec-head h2{font-size:20pt}
  .sec-body{padding-bottom:4mm}
  .msg{margin-top:4mm}
  .msg,.box,.callout,.howto-step,.twojobs,.dark,.card,.steps li,.tl li,.live li,.facts li,.print-links{break-inside:avoid}
  #messages{break-before:page}
  .tax,.facts li,#why .grid--2 .dark{break-inside:avoid}
  a{color:inherit;text-decoration:none}
  .dark,.howto-step,.twojobs,.msg,.box,.callout,.card{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .print-links{margin:4mm 0 0;padding:3mm 4mm;border:1px solid var(--line);border-radius:8px;font-size:10pt;color:var(--muted)}
  .print-links b{color:var(--ink)}
  footer.foot{display:none}   /* the pack is for runners; the legal line would sit alone on a page */
  #why .grid--2{margin-top:3mm!important}
}