/* ============================================================
   WITH GOOD HUMANS, shared stylesheet
   ------------------------------------------------------------
   Used by every page. Linked as:  styles.css?v=1

   IMPORTANT: every time you edit this file, bump the number in
   the link tag on EVERY page (?v=1 -> ?v=2 -> ?v=3). Browsers
   cache stylesheets aggressively. Without the bump you will
   edit this, hard-refresh, see no change, and lose an hour.

   Colour values are AAA verified. Do not lighten these without
   re-checking contrast:
     --text-helper  #4A4A4A  is at the AAA floor (7.02:1 on cream-mid)
     --gold-mid     #524114  7.83:1 on cream-mid
     --border-light #757575  4.61:1 on white (3:1 minimum for UI)

   SECTIONS
     1. Tokens
     2. Reset and base
     3. Typography
     4. Buttons
     5. Site header and nav
     6. Media placeholders (remove once real photos are in)
     7. Hero
     8. Who this is for
     9. How it works and comparison table
    10. What to expect, invite, donation flow
    11. Interest form
    12. Upcoming dates
    13. Testimonials
    14. Founder
    15. Closer and footer
   ============================================================ */
/* ============================================================
   TOKENS, taken from the live index.html
============================================================ */
:root{
  --dark:#2A2118;
  --dark-2:#3A2E20;
  --cream:#F2EFE6;
  --cream-mid:#EDE5C8;
  --gold:#E3C66A;
  --gold-deep:#6B5420;
  --gold-mid:#524114;
  --ft-mid:#D4C9A8;
  --text-dark:#3D3D3D;
  --text-helper:#4A4A4A;
  --border-light:#757575;
  --border-strong:#7A6A4A;
  --border-input:#8A8A8A;
  --yes:#1E6B3C;
  --no:#A03028;
  --section-gap:60px;
  --section-gap-mobile:40px;
  --max-content:960px;
  --max-form:640px;
  --max-mid:720px;
  --max-wide:880px;
  --gutter:24px;
  --gutter-mobile:16px;
  --radius-input:10px;
  --radius-btn:999px;
  --radius-card:12px;
  --focus-ring:3px solid var(--gold-deep);
  --touch-min:44px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{font-family:'DM Sans',-apple-system,sans-serif;background:var(--cream);
  color:var(--text-dark);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
/* HTML width/height attributes must never fix an image's height */
img[width][height]{height:auto}
a{color:var(--gold-mid)}
:focus-visible{outline:var(--focus-ring);outline-offset:3px;border-radius:4px}
.on-dark :focus-visible,.hero :focus-visible,.wte :focus-visible,
footer :focus-visible,.site-head :focus-visible,.closer :focus-visible{outline-color:var(--gold)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;top:-100px;left:16px;background:var(--gold);color:var(--dark);
  padding:12px 24px;border-radius:var(--radius-btn);font-weight:700;font-size:14px;
  z-index:9999;text-decoration:none;transition:top .2s}
.skip-link:focus{top:16px}

.wrap{max-width:var(--max-content);margin:0 auto;padding:0 var(--gutter-mobile)}
@media(min-width:600px){.wrap{padding:0 var(--gutter)}}
.narrow{max-width:var(--max-form);margin:0 auto}
section{padding:var(--section-gap-mobile) 0}
@media(min-width:768px){section{padding:var(--section-gap) 0}}

h1{font-size:clamp(28px,5.4vw,36px);font-weight:700;line-height:1.2;margin-bottom:14px;
  letter-spacing:-.01em;text-wrap:balance}
h2{font-size:clamp(22px,3.4vw,26px);font-weight:600;line-height:1.3;margin-bottom:14px}
h3{font-size:18px;font-weight:600;line-height:1.3;margin-bottom:10px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--gold-mid);margin-bottom:10px}
.eyebrow.gold{color:var(--gold)}
.lead{font-size:clamp(17px,2.4vw,19px);line-height:1.65;color:var(--text-dark)}
.lead + .lead{margin-top:20px}
.helper{font-size:14px;color:var(--text-helper)}
.center{text-align:center}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--touch-min);padding:13px 28px;border-radius:var(--radius-btn);
  border:none;font-family:inherit;font-size:16px;font-weight:700;cursor:pointer;
  text-decoration:none;background:var(--gold);color:var(--dark);transition:background .15s}
.btn:hover{background:#D4B55A}

/* ── HEADER ── */
.site-head{background:var(--dark);position:sticky;top:0;z-index:100;
  border-bottom:3px solid var(--gold)}
.head-inner{display:flex;align-items:center;justify-content:space-between;
  max-width:var(--max-content);margin:0 auto;padding:10px var(--gutter-mobile)}
@media(min-width:600px){.head-inner{padding:10px var(--gutter)}}
.brand{font-size:13px;font-weight:700;letter-spacing:3px;color:var(--gold);text-decoration:none}
.burger{display:flex;flex-direction:column;justify-content:center;gap:5px;
  min-width:var(--touch-min);min-height:var(--touch-min);background:none;border:none;cursor:pointer;padding:10px}
.burger span{display:block;height:2px;width:24px;background:var(--cream);border-radius:2px;transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-panel{display:none;position:absolute;right:12px;top:calc(100% + 8px);
  width:min(290px,calc(100vw - 24px));background:var(--dark);
  border:2px solid var(--gold-deep);border-radius:12px;
  box-shadow:0 14px 36px rgba(10,8,5,.45);z-index:300;overflow:hidden}
@media(min-width:600px){.nav-panel{right:20px}}
.nav-panel.open{display:block}
.nav-panel ul{list-style:none;padding:6px 0}
.nav-panel a{display:flex;align-items:center;min-height:var(--touch-min);
  padding:0 18px;color:var(--cream);text-decoration:none;font-weight:600;font-size:16px;
  border-bottom:1px solid #4A3A28}
.nav-panel a:hover{color:var(--gold);background:#3A2E20}
.nav-panel a[aria-current="page"]{color:var(--gold)}
.nav-panel a[aria-current="page"]::after{content:"";width:7px;height:7px;
  border-radius:50%;background:var(--gold);margin-left:9px}
.nav-panel li:last-child a{border-bottom:0}

/* ── PLACEHOLDERS ── */
.ph{position:relative;background:var(--cream-mid);border:2px dashed var(--border-strong);
  border-radius:var(--radius-card);display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:16px;gap:6px;color:var(--text-helper)}
.ph.dk{background:var(--dark-2);border-color:#6B5A40;color:var(--ft-mid)}
.ph-kind{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold-mid)}
.ph.dk .ph-kind{color:var(--gold)}
.ph-note{font-size:13px;line-height:1.45;max-width:30ch}
.ph-spec{font-size:11px;font-family:ui-monospace,Menlo,monospace;opacity:.9}
.ar-9-16{aspect-ratio:9/16}
.ar-1-1{aspect-ratio:1/1}
.ar-4-3{aspect-ratio:4/3}

/* play badge */
.play-badge{min-width:60px;min-height:60px;border-radius:50%;border:2px solid var(--gold);
  background:rgba(42,33,24,.7);color:var(--gold);display:flex;align-items:center;
  justify-content:center;cursor:pointer;margin-bottom:4px}
.play-badge:hover{background:rgba(42,33,24,.9)}

/* ══ HERO ══ */
.hero{background:var(--dark);color:var(--cream);position:relative;overflow:hidden}
.hero-copy{position:relative;z-index:3}
.hero h1{color:#fff}
.hero-sub{font-size:clamp(19px,2.8vw,23px);font-weight:600;color:var(--gold);
  margin-bottom:14px;line-height:1.35}
.hero-body{font-size:16px;color:var(--ft-mid);margin-bottom:18px;max-width:46ch}
.hero-away{font-size:15px;color:var(--ft-mid);margin-bottom:24px}
.hero-away a{color:var(--gold);font-weight:600;text-underline-offset:2px}

/* MOBILE: media is full-bleed behind the copy, with a heavy scrim */
@media(max-width:767px){
  .hero-grid{display:block;padding:0}
  .hero-media{position:absolute;inset:0;z-index:1;margin:0;max-width:none}
  .hero-vid{display:none}
  .hero-poster-bg{display:block;position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:center 28%}
  .hero-play{display:flex}
  .hero-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(to bottom,
      rgba(42,33,24,.35) 0%, rgba(42,33,24,.60) 34%,
      rgba(42,33,24,.95) 62%, rgba(42,33,24,.99) 100%)}
  .hero-copy{padding:150px 0 44px}
}
/* DESKTOP: side by side, no scrim */
@media(min-width:768px){
  .hero-scrim{display:none}
  .hero-poster-bg,.hero-play{display:none}
  .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;
    align-items:center;padding:64px 0}
  .hero-media{position:static;max-width:300px;width:100%;margin:0 auto}
}

/* ══ WHO ══ */
.who-grid{display:grid;gap:20px}
@media(min-width:760px){.who-grid{grid-template-columns:1fr 1fr;gap:26px}}
.who-card{background:#fff;border:2px solid var(--border-light);
  border-radius:var(--radius-card);padding:26px 22px;text-align:center}
.who-icon{width:56px;height:56px;border-radius:50%;background:var(--cream-mid);
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:var(--gold-mid)}
.who-card ul{list-style:none;margin-top:12px;text-align:left;display:inline-block}
.who-card li{position:relative;padding-left:26px;margin-bottom:9px;font-size:15px;color:var(--text-helper)}
.who-card li svg{position:absolute;left:0;top:4px;color:var(--gold-mid)}

/* ══ STEPS ══ */
.steps{display:grid;gap:26px;max-width:var(--max-wide);margin:0 auto;padding:0 6px}
.step{padding-left:6px;border-left:3px solid var(--cream-mid)}
@media(min-width:800px){.step{padding-left:0;border-left:0}}
@media(min-width:800px){.steps{grid-template-columns:repeat(3,1fr);gap:36px}}
.step{display:grid;grid-template-columns:38px 1fr;gap:0 14px;align-items:start}
.step-num{width:38px;height:38px;border-radius:50%;background:var(--gold);color:var(--dark);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;
  grid-row:1 / span 2}
.step h3{margin-bottom:4px;align-self:center}
.step p{margin:0}
@media(min-width:800px){
  .step{display:block}
  .step-num{margin-bottom:12px}
  .step h3{margin-bottom:8px}
}
.step p{font-size:15px;line-height:1.55;color:var(--text-helper);max-width:34ch}
.divider{width:260px;height:3px;background:var(--gold-deep);border:0;border-radius:2px;margin:44px auto 34px}

/* ══ TABLE ══ */
.cmp-wrap{max-width:var(--max-wide);margin:0 auto}
.cmp{width:100%;border-collapse:collapse;background:#fff;
  border:2px solid var(--border-strong);border-radius:var(--radius-card);overflow:hidden}
.cmp thead th{font-size:14px;font-weight:700;padding:14px 12px;background:#fff;
  color:var(--gold-mid);border-bottom:2px solid var(--border-strong);vertical-align:middle}
.cmp thead th.c-vs{font-size:15px;font-weight:700;color:var(--text-helper);
  text-transform:lowercase;letter-spacing:1px;text-align:center}
.cmp thead th.c-left{text-align:right}
.cmp thead th.c-right{text-align:left}
.cmp tbody tr+tr{border-top:1px solid var(--border-input)}
.cmp td{padding:14px 12px;font-size:12.5px;line-height:1.4;vertical-align:middle}
.cmp td.c-left{text-align:right;color:var(--text-helper);width:40%}
.cmp td.c-icon{text-align:center;width:12%;color:var(--gold-mid);line-height:0}
.cmp td.c-right{text-align:left;font-weight:600;color:var(--text-dark);width:48%}
@media(max-width:639px){
  /* Stays a real table so the header row keeps explaining each column.
     Turning cells into blocks destroys the semantics and forces the
     labels to carry meaning they cannot. */
  .cmp{border-width:2px}
  .cmp thead th{font-size:14px;padding:12px 10px;line-height:1.25}
  .cmp thead th.c-left,.cmp thead th.c-right{text-align:left}
  .cmp thead th.c-vs{display:none}
  .cmp td.c-icon{display:none}
  .cmp td{padding:12px 8px;font-size:12.5px;line-height:1.4}
  .cmp td.c-left{text-align:left;width:50%}
  .cmp td.c-right{text-align:left;width:50%}
}

/* ══ WHAT TO EXPECT (dark) ══ */
.wte{background:var(--cream-mid);color:var(--text-dark)}
.wte h2,.wte h3{color:var(--dark)}
.carousel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;align-items:stretch}
.carousel > *{flex:0 0 68%;scroll-snap-align:start}
@media(min-width:700px){.carousel > *{flex:0 0 31%}}
#testCar > *{flex:0 0 68%}
@media(min-width:760px){#testCar > *{flex:0 0 22%}}
.photo-card{background:#fff;border:2px solid var(--border-light);
  border-radius:var(--radius-card);overflow:hidden}
.photo-card .ph{border-radius:0;border-width:0 0 2px}
.photo-cap{padding:12px 14px;font-size:14px;color:var(--text-helper);line-height:1.45}
.ig-tile{background:#fff;border:2px solid var(--border-light);border-radius:var(--radius-card);
  overflow:hidden;display:flex;flex-direction:column;text-decoration:none}
.ig-face{aspect-ratio:1/1;background:var(--cream-mid);display:flex;
  align-items:center;justify-content:center;color:var(--dark);
  border-bottom:2px solid var(--border-light)}
.ig-tile span{background:var(--dark);color:var(--cream);padding:10px 14px;
  font-size:14px;font-weight:700;line-height:1.35;display:flex;align-items:center;
  flex:1 1 auto;min-height:46px}
.car-nav{display:flex;gap:10px;margin-top:12px;justify-content:center}
.car-btn{min-width:var(--touch-min);min-height:var(--touch-min);border-radius:50%;
  border:2px solid var(--border-light);background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--gold-mid)}
.car-btn:hover{border-color:var(--gold-deep);background:rgba(107,84,32,.08)}
.car-btn.dk{background:transparent;border-color:var(--border-light);color:var(--gold-mid)}

.inv-grid{display:grid;gap:30px;align-items:start;margin-top:14px}
@media(min-width:900px){.inv-grid{grid-template-columns:1.05fr .95fr;gap:44px}}
.inv-card{position:relative;background:#FFFDF7;border:2px solid var(--border-light);
  border-radius:16px;padding:24px 22px;overflow:hidden;
  box-shadow:0 6px 20px rgba(42,33,24,.10)}
.sample-band{position:absolute;top:40px;right:-70px;width:280px;transform:rotate(38deg);
  background:var(--gold);color:var(--dark);text-align:center;font-size:15px;
  font-weight:700;letter-spacing:5px;padding:8px 0;pointer-events:none;z-index:2}
.inv-card h3{font-size:20px;margin-bottom:4px;color:var(--dark)}
.inv-intro{font-size:14px;color:var(--text-helper);margin-bottom:16px;max-width:22ch}
.inv-line{display:flex;gap:11px;align-items:flex-start;margin-bottom:11px;font-size:15px;color:var(--text-helper)}
.inv-line svg{flex:0 0 19px;margin-top:3px;color:var(--gold-mid)}
.inv-line strong{color:var(--dark);font-weight:600}
.rsvp-row{display:flex;gap:10px;margin:20px 0 12px;flex-wrap:wrap}
.rsvp{display:inline-flex;align-items:center;gap:7px;min-height:var(--touch-min);
  padding:10px 18px;border-radius:8px;border:1.5px solid;background:transparent;
  font-family:inherit;font-size:14px;font-weight:700;cursor:pointer}
.rsvp-yes{color:#175831;border-color:#175831}
.rsvp-no{color:#A03028;border-color:#A03028}
.inv-fine{font-size:13px;color:var(--text-helper);line-height:1.5}

.flow-v{display:grid;gap:10px;margin:16px 0 18px;max-width:380px}
.flow-node{background:#fff;border:2px solid var(--border-light);border-radius:var(--radius-card);
  padding:16px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.flow-node svg{width:34px;height:34px;color:var(--gold-mid)}
.flow-node strong{display:block;font-size:16px;color:var(--dark)}
.flow-node span{font-size:14px;color:var(--text-helper)}
.flow-arrow{display:flex;justify-content:center;color:var(--gold-mid);line-height:0;max-width:380px}
.wte .helper{color:var(--text-helper);max-width:380px}
.wte a{color:var(--gold-mid);font-weight:600}

/* ══ FORM ══ */
.form-card{background:#fff;border:2px solid var(--border-light);border-radius:16px;padding:24px 20px}
@media(min-width:768px){.form-card{padding:32px 34px}}
.form-field{margin-bottom:18px}
.field-label{display:block;font-size:14px;font-weight:600;color:var(--text-dark);margin-bottom:6px}
.field-note{font-weight:400;color:#555555}
input[type=text],input[type=email]{width:100%;min-height:var(--touch-min);padding:12px 14px;
  border:1.5px solid var(--border-input);border-radius:var(--radius-input);
  font-family:inherit;font-size:16px;color:var(--text-dark);background:#fff}
input::placeholder{color:var(--text-helper)}
fieldset{border:0}
.avail-toggle{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.avail-btn{min-height:var(--touch-min);padding:11px 20px;border-radius:var(--radius-btn);
  border:1.5px solid var(--border-input);background:#fff;font-family:inherit;
  font-size:14px;font-weight:600;color:var(--text-dark);cursor:pointer}
.avail-btn[aria-pressed="true"]{background:var(--cream-mid);border-color:var(--gold-deep);color:var(--gold-mid)}
.day-grid{width:100%;border-collapse:collapse}
.day-grid th{font-size:12px;font-weight:600;color:var(--text-helper);padding:0 5px 6px}
.day-grid th[scope=row]{text-align:left;font-size:14px;color:var(--text-dark);
  width:62px;padding:0 8px 0 0}
.day-grid td{padding:5px}
.day-grid tbody tr{border-bottom:1px solid var(--border-light)}
.day-grid tbody tr:last-child{border-bottom:0}
.slot{width:100%;min-height:var(--touch-min);border:1.5px solid var(--border-input);
  border-radius:10px;background:#fff;cursor:pointer}
.slot{position:relative}
.slot[aria-pressed="true"]{background:var(--gold);border-color:var(--gold-deep);border-width:2px}
.slot[aria-pressed="true"]::after{content:"";position:absolute;top:50%;left:50%;
  width:12px;height:7px;margin:-6px 0 0 -6px;
  border-left:2.5px solid var(--dark);border-bottom:2.5px solid var(--dark);
  transform:rotate(-45deg)}

/* ══ DATES ══ */
.dates{border:2px solid var(--border-light);border-radius:var(--radius-card);background:#fff;overflow:hidden}
.date-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 18px;border-bottom:1px solid var(--border-light);flex-wrap:wrap}
.date-row:last-child{border-bottom:0}
.date-when{font-size:15px;color:var(--text-helper);line-height:1.5}
.date-when strong{font-size:16px;color:var(--text-dark)}
.date-pick{display:inline-flex;align-items:center;gap:7px;min-height:var(--touch-min);
  padding:10px 20px;border-radius:var(--radius-btn);border:1.5px solid var(--gold-deep);
  background:#fff;font-family:inherit;font-size:14px;font-weight:700;color:var(--gold-mid);cursor:pointer}
.date-pick:hover{background:var(--cream-mid)}

/* ══ TESTIMONIALS ══ */
.t-card{background:#fff;border:2px solid var(--border-light);border-radius:var(--radius-card);
  overflow:hidden;display:flex;flex-direction:column}
.t-pic{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;
  background:var(--cream-mid);flex:0 0 auto}
.t-card blockquote{font-size:14.5px;line-height:1.55;color:var(--text-dark);
  padding:14px 15px;flex:1 1 auto;margin:0}
.t-bar{background:var(--dark);color:var(--cream);font-size:14px;line-height:1.35;
  padding:10px 15px;margin-top:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-bar strong{font-weight:700;color:#fff}

/* ══ FOUNDER ══ */
.f-grid{display:grid;gap:24px;align-items:center}
.f-grid .founder-photo{max-width:190px;margin:0 auto}
@media(min-width:760px){.f-grid{grid-template-columns:.5fr 1.5fr;gap:36px}
  .f-grid .founder-photo{max-width:none}}

/* ══ CLOSER / FOOTER ══ */
.closer{background:var(--dark);color:var(--cream);text-align:center}
.closer h2{color:#fff}
.closer p{color:var(--ft-mid);margin-bottom:22px}
footer{background:var(--dark);color:var(--ft-mid);padding:34px 0 42px;font-size:14px}
footer a{color:var(--cream)}
.f-links{display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:center;
  padding-bottom:18px;border-bottom:1px solid var(--dark-2);margin-bottom:18px}
.f-links a{min-height:var(--touch-min);display:inline-flex;align-items:center;font-weight:600;text-decoration:none}
.f-links a:hover{text-decoration:underline}
.f-bottom{text-align:center}
.f-contact{margin-bottom:12px}
.f-contact a{font-weight:600}
.socials{display:flex;gap:10px;justify-content:center;margin:14px 0 18px}
.social{min-width:var(--touch-min);min-height:var(--touch-min);border-radius:50%;
  border:1.5px solid var(--ft-mid);display:flex;align-items:center;justify-content:center;color:var(--cream)}
.social:hover{border-color:var(--gold);color:var(--gold)}
.tagline{color:var(--ft-mid);line-height:1.7;margin-bottom:10px}
.brandmark{font-size:13px;font-weight:700;letter-spacing:3px;color:var(--gold)}

/* ============================================================
   16. PROFILE PAGE
   ============================================================ */
.p-intro{max-width:var(--max-form);margin:0 auto 26px}
.p-intro .lead{font-size:17px;color:var(--text-helper);line-height:1.6}
.p-card{background:#fff;border:2px solid var(--border-light);border-radius:16px;
  padding:22px 18px;margin-bottom:18px}
@media(min-width:768px){.p-card{padding:28px 30px}}
.p-card h2{font-size:20px;margin-bottom:4px}
.p-card .p-sub{font-size:14px;color:var(--text-helper);margin-bottom:18px}
.p-step{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--gold-mid);margin-bottom:6px}

.p-field{margin-bottom:20px}
.p-field:last-child{margin-bottom:0}
.p-label{display:block;font-size:15px;font-weight:600;color:var(--text-dark);margin-bottom:8px}
.p-note{font-weight:400;color:#555}
.p-help{display:block;font-size:13px;color:var(--text-helper);margin:-4px 0 8px}

.p-pills{display:flex;flex-wrap:wrap;gap:8px}
.p-pill{min-height:var(--touch-min);padding:11px 18px;border-radius:var(--radius-btn);
  border:1.5px solid var(--border-input);background:#fff;font-family:inherit;
  font-size:14px;font-weight:500;color:var(--text-dark);cursor:pointer}
.p-pill:hover{border-color:var(--gold-deep);background:#FBF8EF}
.p-pill[aria-checked="true"],.p-pill[aria-pressed="true"]{
  background:var(--cream-mid);border-color:var(--gold-deep);color:var(--gold-mid);font-weight:700}
.p-pill[aria-checked="true"]::before,.p-pill[aria-pressed="true"]::before{content:"\2713 "}

.p-scale{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:520px){.p-scale{grid-template-columns:repeat(3,1fr)}}
.p-scale button{min-height:var(--touch-min);padding:12px 10px;border-radius:10px;
  border:1.5px solid var(--border-input);background:#fff;font-family:inherit;
  font-size:14px;font-weight:500;color:var(--text-dark);cursor:pointer;text-align:center}
.p-scale button:hover{border-color:var(--gold-deep);background:#FBF8EF}
.p-scale button[aria-checked="true"]{background:var(--cream-mid);
  border-color:var(--gold-deep);color:var(--gold-mid);font-weight:700}
.p-cause{padding:16px 0;border-bottom:1px solid var(--border-light)}
.p-cause:last-of-type{border-bottom:0;padding-bottom:0}

.p-role{border:1.5px solid var(--border-input);border-radius:10px;padding:14px;
  margin-bottom:10px;background:#fff;cursor:pointer;display:flex;gap:12px;align-items:flex-start;
  min-height:var(--touch-min);width:100%;text-align:left;font-family:inherit}
.p-role:hover{border-color:var(--gold-deep);background:#FBF8EF}
.p-role[aria-checked="true"]{border-color:var(--gold-deep);background:var(--cream-mid)}
.p-radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--border-input);
  flex:0 0 20px;margin-top:2px;display:flex;align-items:center;justify-content:center}
.p-role[aria-checked="true"] .p-radio{border-color:var(--gold-deep)}
.p-role[aria-checked="true"] .p-radio::after{content:"";width:8px;height:8px;
  border-radius:50%;background:var(--gold-deep)}
.p-role-t{font-size:15px;font-weight:600;color:var(--text-dark);display:block}
.p-role-d{font-size:14px;color:var(--text-helper);display:block;margin-top:2px}

textarea.p-input{min-height:88px;resize:vertical}
.p-input{width:100%;min-height:var(--touch-min);padding:12px 14px;
  border:1.5px solid var(--border-input);border-radius:var(--radius-input);
  font-family:inherit;font-size:16px;color:var(--text-dark);background:#fff}
.p-input:focus{border-color:var(--focus)}

.p-actions{max-width:var(--max-form);margin:0 auto;text-align:center;padding-top:8px}
.p-skip{display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch-min);
  margin-top:14px;font-size:15px;color:var(--text-helper);text-decoration:underline}
.p-skip:hover{color:var(--text-dark)}
.p-err{color:#8C231A;font-size:14px;font-weight:600;margin-top:8px}

.p-done{max-width:var(--max-form);margin:0 auto;text-align:center;
  background:#fff;border:2px solid var(--border-light);border-radius:16px;padding:36px 24px}
.p-done .tick{width:56px;height:56px;border-radius:50%;background:var(--cream-mid);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:var(--gold-mid)}

/* ============================================================
   17. UPCOMING DATES PAGE
   ============================================================ */
.d-intro{max-width:var(--max-form);margin:0 auto 22px}
.d-filters{display:flex;flex-wrap:wrap;gap:8px;max-width:var(--max-form);
  margin:0 auto 16px}
.d-chip{min-height:var(--touch-min);padding:10px 18px;border-radius:var(--radius-btn);
  border:1.5px solid var(--border-input);background:#fff;font-family:inherit;
  font-size:14px;font-weight:600;color:var(--text-dark);cursor:pointer}
.d-chip:hover{border-color:var(--gold-deep);background:#FBF8EF}
.d-chip[aria-pressed="true"]{background:var(--cream-mid);border-color:var(--gold-deep);color:var(--gold-mid)}
.d-wrap{max-width:var(--max-form);margin:0 auto}
.date-pick.saved{background:var(--cream-mid);border-color:var(--gold-deep);cursor:default}
.d-msg{padding:22px 16px;text-align:center;color:var(--text-helper);font-size:15px;
  border:2px dashed var(--border-light);border-radius:var(--radius-card)}
.d-notify{text-align:right;margin-top:14px}
.d-notify a{font-weight:700;display:inline-flex;align-items:center;gap:7px;min-height:var(--touch-min)}
.d-banner{background:var(--cream-mid);border:2px solid var(--gold-deep);
  border-radius:var(--radius-card);padding:14px 16px;font-size:15px;margin-bottom:16px}
.d-banner a{font-weight:700}

#toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);max-width:92%;
  background:#fff;color:var(--text-dark);border:2px solid var(--gold-deep);
  border-radius:var(--radius-card);padding:14px 18px;font-size:15px;display:none;
  align-items:center;gap:12px;box-shadow:0 8px 26px rgba(42,33,24,.22);z-index:200}
#toast.show{display:flex}
#toast button{background:none;border:none;font-family:inherit;font-size:15px;
  font-weight:700;color:var(--gold-mid);text-decoration:underline;cursor:pointer;
  min-height:var(--touch-min);padding:0 4px}

.w-card{background:#fff;border:2px solid var(--border-light);border-radius:16px;
  padding:24px 20px;max-width:var(--max-form);margin:0 auto}
@media(min-width:768px){.w-card{padding:30px 32px}}
.w-card h2{font-size:20px;margin-bottom:4px}
.w-sub{font-size:15px;color:var(--text-helper);margin-bottom:20px}
.w-field{margin-bottom:18px}
.w-row{display:grid;gap:14px}
@media(min-width:520px){.w-row{grid-template-columns:1fr 1fr}}

/* ============================================================
   18. ABOUT / QUESTIONS / NONPROFITS
   ============================================================ */
.a-hero{max-width:var(--max-mid);margin:0 auto}
.a-body{max-width:var(--max-mid);margin:0 auto}
.a-body h2:first-child{margin-top:0;margin-bottom:22px}
.a-body p{font-size:17px;line-height:1.7;color:var(--text-dark);margin-bottom:20px}
.a-body h2{margin-top:34px}
.a-pull{border-left:4px solid var(--gold-deep);padding:4px 0 4px 18px;
  margin:26px 0;font-size:19px;line-height:1.5;color:var(--text-dark);font-weight:600}

.faq{max-width:var(--max-form);margin:0 auto}
.faq details{background:none;border:0;border-bottom:1px solid var(--border-light);
  border-radius:0;margin-bottom:0}
.faq details:last-of-type{border-bottom:0}
.faq summary{list-style:none;cursor:pointer;padding:14px 2px 14px 22px;font-size:16px;
  font-weight:600;color:var(--text-dark);display:flex;align-items:center;
  justify-content:space-between;gap:12px;min-height:var(--touch-min);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold-mid)}
.faq summary:focus-visible{outline:var(--focus-ring);outline-offset:2px;border-radius:4px}
.faq summary::after{content:"";flex:0 0 12px;width:12px;height:12px;
  border-right:2.5px solid var(--gold-mid);border-bottom:2.5px solid var(--gold-mid);
  transform:rotate(45deg);margin-top:-4px;transition:transform .18s}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.faq .ans{padding:0 2px 18px 22px;font-size:16px;line-height:1.65;color:var(--text-helper)}
.faq .ans p{margin-bottom:12px}
.faq .ans p:last-child{margin-bottom:0}
.faq .ans ul{margin:0 0 12px 20px}
.faq .ans li{margin-bottom:6px}
.faq h2{margin:32px 0 12px}
.faq h2:first-of-type{margin-top:0}

.n-list{max-width:var(--max-form);margin:0 auto 28px;background:#fff;
  border:2px solid var(--border-light);border-radius:var(--radius-card);padding:22px 20px}
.n-list li{list-style:none;position:relative;padding-left:30px;margin-bottom:14px;
  font-size:16px;color:var(--text-dark)}
.n-list li:last-child{margin-bottom:0}
.n-list li svg{position:absolute;left:0;top:3px;color:var(--gold-mid)}
.n-list li span{display:block;font-size:14px;color:var(--text-helper);margin-top:2px}

/* ============================================================
   19. REAL MEDIA (replaces placeholders)
   ============================================================ */
.hero-vid{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:var(--radius-card);
  background:var(--dark-2);display:block}
@media(max-width:767px){
  .hero-vid{border-radius:0;height:100%;position:absolute;inset:0;aspect-ratio:auto}
}
.photo-card img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;
  border-bottom:2px solid var(--border-light)}
.founder-photo{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border-radius:var(--radius-card);border:2px solid var(--border-light)}


/* ============================================================
   20. MOBILE HERO PLAY BUTTON, and the fullscreen video layer
   ============================================================ */
.hero-poster-bg{display:none}
.hero-play{display:none;position:absolute;top:14px;left:var(--gutter-mobile);z-index:6;
  align-items:center;gap:8px;min-height:var(--touch-min);padding:8px 16px;
  border-radius:999px;border:2px solid var(--gold);background:rgba(42,33,24,.88);
  color:var(--gold);font-family:inherit;font-size:14px;font-weight:700;
  letter-spacing:.5px;cursor:pointer}
.hero-play:hover{background:var(--dark)}
.hero-play svg{flex:0 0 14px}

.vid-layer{display:none;position:fixed;inset:0;z-index:900;background:#000}
.vid-layer.open{display:flex;align-items:center;justify-content:center}
.vid-layer video{width:100%;height:100%;object-fit:contain;background:#000}
.vid-close{position:absolute;top:14px;right:14px;z-index:910;
  min-width:var(--touch-min);min-height:var(--touch-min);border-radius:50%;
  border:2px solid var(--cream);background:rgba(0,0,0,.6);color:var(--cream);
  display:flex;align-items:center;justify-content:center;cursor:pointer}

/* ============================================================
   21. CREED BAND
   ============================================================ */
.creed{background:var(--dark);color:var(--cream);text-align:center;
  padding:34px 20px;margin-top:44px}
.creed p{font-size:clamp(18px,3vw,24px);font-weight:600;line-height:1.45;
  max-width:22ch;margin:0 auto}
.creed strong{color:var(--gold);font-weight:700;display:block}

/* ============================================================
   22. NEIGHBOURHOOD AUTOCOMPLETE
   ============================================================ */
.ac-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:60;
  list-style:none;margin:0;padding:4px 0;background:#fff;
  border:2px solid var(--border-input);border-radius:var(--radius-input);
  box-shadow:0 10px 26px rgba(42,33,24,.16);max-height:260px;overflow-y:auto}
.ac-item{padding:11px 14px;font-size:15px;color:var(--text-dark);cursor:pointer;
  min-height:var(--touch-min);display:flex;align-items:center}
.ac-item:hover,.ac-item.on{background:var(--cream-mid);color:var(--gold-mid);font-weight:600}

/* ============================================================
   23. CLOSER TAGLINE and FOOTER SOCIAL LEAD
   ============================================================ */
.closer-tag{font-size:16px;font-style:italic;color:var(--ft-mid);
  line-height:1.6;margin-bottom:24px}
.social-lead{font-size:14px;color:var(--ft-mid);margin-bottom:4px}

/* date-pick works as a link as well as a button */
a.date-pick{text-decoration:none}
.p-linkbtn{background:none;border:0;padding:0;font-family:inherit;font-size:14px;
  font-weight:700;color:var(--gold-mid);text-decoration:underline;cursor:pointer;
  min-height:var(--touch-min);display:inline-flex;align-items:center}
.p-linkbtn:hover{color:var(--gold-deep)}


/* ============================================================
   24. LATE OVERRIDES
   These must sit after section 20, which sets the base state for
   the mobile hero controls. Same specificity, so order decides.
   ============================================================ */
@media(max-width:767px){
  .hero-poster-bg{display:block}
  .hero-play{display:flex}
  .hero-vid{display:none}
}
@media(min-width:768px){
  .hero-poster-bg{display:none}
  .hero-play{display:none}
}

/* photo captions match the testimonial bars */
.photo-cap{background:var(--dark);color:var(--cream);padding:10px 14px;
  font-size:14px;line-height:1.35;
  display:flex;align-items:center;flex:1 1 auto;min-height:46px}
.photo-card{display:flex;flex-direction:column}

/* sample invite buttons are a picture of buttons, not buttons */
.rsvp{pointer-events:none;cursor:default}

/* donation flow, narrower and centred */
.flow-v{margin-left:auto;margin-right:auto}
.flow-arrow{margin-left:auto;margin-right:auto}
.wte .don-col{text-align:center}
.wte .don-col .helper{margin-left:auto;margin-right:auto}

/* the returning-member greeting should be findable */
.greet{font-size:clamp(19px,3vw,23px);font-weight:700;color:var(--dark);
  margin-bottom:6px}

/* ============================================================
   25. ABOUT PAGE
   ============================================================ */
/* The story runs the full measure and the portrait floats into it, so the
   text wraps around the photo and then continues at full width. A two column
   grid made the text half as wide and twice as tall, which for nine
   paragraphs is a very long thin column. */
.a-founder{max-width:var(--max-mid);margin:0 auto 10px}
.a-founder::after{content:"";display:block;clear:both}
@media(min-width:760px){
  .a-founder .a-portrait{float:left;width:280px;margin:4px 30px 18px 0}
}
.a-founder-text p{font-size:17px;line-height:1.7;color:var(--text-dark);margin-bottom:20px}
.a-founder-text p:last-child{margin-bottom:0}
.a-portrait{position:relative;width:280px;max-width:100%;margin:0 auto 24px;
  border-radius:var(--radius-card);overflow:hidden;border:2px solid var(--border-light)}
.a-portrait img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block}
.a-portrait-cap{position:absolute;left:0;right:0;bottom:0;padding:16px 14px 12px;
  color:#fff;font-size:14px;line-height:1.3;font-weight:600;
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 12px rgba(0,0,0,.7);
  background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0))}
.a-portrait-cap strong{font-weight:800;display:block;font-size:18px;margin-bottom:1px}
.a-point{font-size:18px;font-weight:700;color:var(--dark);margin:24px 0 4px}

/* ============================================================
   26. CAUSE SLIDERS
   Ported from the live signup form so the profile page uses the
   same control people already know.
   ============================================================ */
.cause-section{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
@media(max-width:560px){.cause-section{grid-template-columns:1fr;gap:0}}
.cause-row{padding:14px 0;border-bottom:1px solid var(--border-light)}
.cause-row:last-child{border-bottom:none}
.cause-label{font-size:14px;font-weight:600;color:var(--dark);margin-bottom:8px;display:block}
.cause-slider-wrap{display:flex;align-items:center;gap:6px;width:100%;max-width:280px}
.cause-scale-label{font-size:13px;color:var(--text-helper);width:60px;flex-shrink:0;line-height:1.3}
.cause-scale-label.end{text-align:right}
.cause-slider-track{flex:1;min-width:80px;position:relative;height:24px;
  display:flex;align-items:center;justify-content:space-between;padding:0 4px}
.cause-slider-bg{position:absolute;top:50%;left:8px;right:8px;height:3px;
  background:rgba(0,0,0,.16);border-radius:2px;transform:translateY(-50%)}
.cause-dot{width:18px;height:18px;min-width:18px;border-radius:50%;position:relative;z-index:2;
  border:1.5px solid var(--border-input);background:#fff;cursor:pointer;transition:all .15s;
  display:flex;align-items:center;justify-content:center;padding:0}
.cause-dot:hover{border-color:var(--gold-deep)}
/* a 44px hit area without a 44px dot */
.cause-dot::before{content:'';position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:44px;height:44px}
.cause-dot.active{width:22px;height:22px;min-width:22px;background:var(--gold);
  border:1px solid var(--gold-deep);box-shadow:0 0 0 3px rgba(227,198,106,.28)}
.cause-dot:focus-visible{outline:var(--focus-ring);outline-offset:2px}


/* ============================================================
   27. NONPROFIT PAGE, scannable version
   ============================================================ */
.n-dark{background:var(--dark);color:var(--cream)}
.n-dark h1,.n-dark h2{color:#fff}
.n-dark .lead{color:var(--ft-mid)}
.n-dark .eyebrow{color:var(--gold)}

.n-points{max-width:var(--max-mid);margin:0 auto;list-style:none;padding:0}
.n-points li{padding:0 0 22px 0;margin-bottom:22px;border-bottom:1px solid var(--border-light)}
.n-points li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.n-points b{display:block;font-size:18px;font-weight:700;color:var(--dark);margin-bottom:6px}
.n-points span{display:block;font-size:16px;line-height:1.65;color:var(--text-helper);
  padding-left:18px;border-left:3px solid var(--cream-mid)}

.n-spot{max-width:var(--max-mid);margin:0 auto;list-style:none;padding:0}
.n-spot li{position:relative;padding:0 0 14px 20px;font-size:16px;color:var(--text-dark)}
.n-spot li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:7px;
  border-radius:50%;background:var(--gold-deep)}
.n-spot li b{font-weight:700}
.n-spot li span{display:block;font-size:15px;color:var(--text-helper);margin-top:2px}

/* ============================================================
   28. SHARED PAST EVENTS STRIP
   ============================================================ */
.strip{max-width:var(--max-content);margin:0 auto}
.strip-head{font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--gold-mid);margin-bottom:12px}
.strip .carousel > *{flex:0 0 46%}
@media(min-width:700px){.strip .carousel > *{flex:0 0 23%}}


/* ============================================================
   29. CLOSER, tightened
   ============================================================ */
.closer-q{font-size:clamp(17px,2.4vw,20px);font-weight:600;color:#fff;
  line-height:1.4;margin-bottom:20px;max-width:38ch;margin-left:auto;margin-right:auto}
.closer-after{font-size:16px;font-style:italic;color:var(--ft-mid);
  line-height:1.7;margin-top:22px}

/* ============================================================
   30. PARTNER TESTIMONIALS, logo left, quote right
   ============================================================ */
.pt-rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:10px;max-width:var(--max-mid);margin:0 auto}
.pt-rail > *{flex:0 0 100%;scroll-snap-align:center}
.pt-card{background:#fff;border:2px solid var(--border-light);border-radius:var(--radius-card);
  padding:22px;display:grid;gap:18px;align-items:center}
@media(min-width:620px){.pt-card{grid-template-columns:140px 1fr;gap:24px;padding:26px}}
.pt-logo{width:140px;height:140px;margin:0 auto;border-radius:var(--radius-card);
  object-fit:contain;background:#fff;padding:10px;border:2px solid var(--border-light);
  display:block}
.pt-quote{font-size:17px;line-height:1.6;color:var(--text-dark);margin-bottom:12px}
.pt-who{font-size:15px;color:var(--text-helper)}
.pt-who strong{display:block;color:var(--dark);font-weight:700}
.pt-nav{display:flex;gap:10px;justify-content:center;margin-top:12px}

/* about page bullets */

.a-signoff{font-size:19px;line-height:1.6;color:var(--text-dark);margin-top:26px}
.a-signoff strong{display:block;font-weight:800;color:var(--dark);margin-top:2px}

.pt-section[hidden]{display:none}
.faq-group{font-size:19px;font-weight:700;color:var(--dark);
  margin:30px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--border-light)}
.faq-group:first-of-type{margin-top:0}


/* ============================================================
   31. DARK SECTION, used for the signup form
   ============================================================ */
.sec-dark{background:var(--dark);color:var(--cream)}
.sec-dark > .wrap > .narrow > h2,
.sec-dark > .wrap > h2{color:#fff}
.sec-dark > .wrap > .narrow > .eyebrow,
.sec-dark > .wrap > .eyebrow{color:var(--gold)}
.sec-dark > .wrap > .narrow > .helper,
.sec-dark > .wrap > .helper{color:var(--ft-mid)}

/* Anything on the white card inside a dark section resets to dark-on-light.
   Without this the section colour cascades in and lands near 1.3 to 1. */
.sec-dark .form-card{color:var(--text-dark)}
.sec-dark .form-card h2,
.sec-dark .form-card h3{color:var(--dark)}
.sec-dark .form-card .eyebrow{color:var(--gold-mid)}
.sec-dark .form-card .helper,
.sec-dark .form-card .field-note{color:var(--text-helper)}
.sec-dark .form-card label,
.sec-dark .form-card legend,
.sec-dark .form-card .field-label{color:var(--text-dark)}
.sec-dark .form-card .p-skip{color:var(--text-helper)}
.sec-dark .form-card .p-skip:hover{color:var(--text-dark)}

/* donation flow narrower on a phone */
@media(max-width:520px){
  .flow-v{max-width:262px}
  .flow-arrow{max-width:262px}
  .flow-node{padding:12px}
  .flow-node svg{width:28px;height:28px}
}


/* ============================================================
   32. ABOUT, dark opening and a beige middle
   ============================================================ */
.a-dark{background:var(--dark);color:var(--cream)}
.a-dark h1{color:#fff}
.a-dark .eyebrow{color:var(--gold)}
.a-dark .lead{color:var(--ft-mid)}
.a-beige{background:var(--cream-mid)}
.brandmark-inline{font-weight:800;letter-spacing:2px;color:var(--gold-mid);
  display:block;margin-top:2px}

/* ============================================================
   33. CAPACITY LABELS
   Soft signal only. A full date still records interest.
   ============================================================ */
.date-tag{display:inline-block;margin-left:8px;padding:3px 9px;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.5px;
  background:var(--cream-mid);color:var(--gold-mid);border:1px solid var(--gold-deep);
  vertical-align:middle}
.date-tag.is-full{background:var(--dark);color:var(--cream);border-color:var(--dark)}

/* ============================================================
   34. SPAM NOTE
   Wherever we promise an email. On a young sending domain a real
   share land in spam, and someone who never sees the first has no
   reason to expect a second. Asking them to mark it as not spam
   also improves delivery for everyone after them.
   ============================================================ */
.spam-note{display:flex;gap:10px;align-items:flex-start;background:var(--cream-mid);
  border-radius:10px;padding:13px 15px;font-size:14px;line-height:1.5;
  color:var(--text-helper);margin:16px 0}
.spam-note svg{flex:0 0 17px;margin-top:3px;color:var(--gold-mid)}
.spam-note b{color:var(--dark);font-weight:700}
.sec-dark .form-card .spam-note{background:var(--cream-mid);color:var(--text-helper)}

/* ============================================================
   35. WHO WE THINK YOU ARE
   A token in the link is this person. A token in storage is
   whoever used this device last. Only the second needs saying.
   ============================================================ */
.whobar{background:var(--cream-mid);border-radius:10px;padding:11px 15px;
  font-size:15px;color:var(--text-helper);margin-bottom:16px}
.whobar strong{color:var(--dark);font-weight:700}
.whobar button{background:none;border:0;padding:0 0 0 2px;font-family:inherit;
  font-size:15px;font-weight:700;color:var(--gold-mid);text-decoration:underline;
  cursor:pointer;min-height:44px}
.whobar button:hover{color:var(--gold-deep)}

/* ============================================================
   36. THE DECK
   One date at a time. A calendar asks you to compare; this asks
   you to decide. The front card sits in normal flow so it grows
   with its content and the buttons never fall below the fold.
   Only the cards behind are positioned absolutely.
   ============================================================ */
.wrap-narrow{max-width:600px}
.d-intro .greet{font-size:15px;font-weight:700;color:var(--gold-mid);margin-bottom:6px}

.prog{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.prog-track{flex:1;height:6px;background:var(--cream-mid);border-radius:3px;overflow:hidden}
.prog-fill{height:100%;background:var(--gold-deep);border-radius:3px;transition:width .3s}
.prog-text{font-size:13px;font-weight:700;color:var(--text-helper);white-space:nowrap}

.deck{position:relative;margin-bottom:14px}
.deck.has-stack{padding-left:46px}
.card{background:#fff;border:2px solid var(--border-light);border-radius:18px;
  padding:24px 24px 26px;box-shadow:0 10px 30px rgba(42,33,24,.10);
  transition:transform .32s ease,opacity .32s ease}
.card.front{position:relative;z-index:5}
.card.behind1,.card.behind2,.card.behind3{position:absolute;left:0;right:0;top:0;bottom:0;
  overflow:hidden}
.card.behind1{transform:translateX(-14px) scale(.98);z-index:3}
.card.behind2{transform:translateX(-28px) scale(.96);z-index:2}
.card.behind3{transform:translateX(-42px) scale(.94);z-index:1}
.card.gone-yes{transform:translateX(115%) rotate(8deg);opacity:0}
.card.gone-no{transform:translateX(-115%) rotate(-8deg);opacity:0}
/* the summary is the one card that is not a question */
.card.summary{border-left:10px solid var(--gold-deep)}
.card.summary.front{box-shadow:0 12px 34px rgba(107,84,32,.16)}

.c-when{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--gold-mid);margin-bottom:14px}
.c-date{font-size:clamp(26px,6vw,33px);font-weight:800;line-height:1.15;
  color:var(--dark);margin-bottom:10px;letter-spacing:-.01em}
.c-hood{display:inline-flex;align-items:center;gap:8px;font-size:19px;font-weight:700;
  color:var(--dark);background:var(--cream-mid);border-radius:999px;padding:10px 18px;
  margin-bottom:16px}
.c-hood svg{color:var(--gold-mid);flex:0 0 18px}
.c-time{font-size:18px;font-weight:600;color:var(--text-helper);margin-bottom:22px}
.c-foot{font-size:14px;color:var(--text-helper);line-height:1.5;padding-top:16px;
  border-top:1px solid var(--border-light)}
.c-answers{display:flex;gap:12px;margin-top:18px}
.c-answers .btn{flex:1;justify-content:center}
/* Same size as the body copy above the cards. The break between the two
   sentences only applies where there is room for it. */
.hint{font-size:16px;line-height:1.6;color:var(--text-helper);text-align:center}
.wide-break{display:none}
@media(min-width:600px){ .wide-break{display:inline} }

.btn-no{background:#fff;color:var(--text-helper);border:2px solid var(--border-strong)}
.btn-no:hover{background:var(--cream-mid);color:var(--dark)}

/* ---- the summary ---- */
.e-title{font-size:clamp(22px,4.8vw,27px);font-weight:800;line-height:1.2;
  color:var(--dark);margin-bottom:10px}
.e-title:focus{outline:none}
.e-sub{font-size:16px;line-height:1.6;color:var(--text-dark);margin-bottom:16px}
.e-sub b{color:var(--dark)}
.e-sub.friend a{font-weight:700}

.conf-top{background:#FDF8EA;border:2px solid var(--gold);border-radius:14px;
  padding:20px;margin-bottom:22px}
.conf-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;color:var(--gold-mid);margin-bottom:12px}
.yes-list{list-style:none}
.yes-list li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;
  border-bottom:1px solid #EADCB8}
.yes-list li:last-child{border-bottom:0;padding-bottom:0}
.yes-list li:first-child{padding-top:0}
/* gold, not brown. This is the one thing worth celebrating, and the tick
   inside carries the meaning at 9.44:1. */
.yes-tick{flex:0 0 26px;height:26px;border-radius:50%;background:var(--gold);
  color:var(--dark);display:flex;align-items:center;justify-content:center;margin-top:2px}
.yes-d{font-size:17px;font-weight:400;color:var(--text-helper);line-height:1.4}
.yes-d b{font-weight:700;color:var(--dark)}
/* the same line as the card, without the pill: the only colour on this
   screen should be the one thing we want them to act on */
.yes-hood{display:flex;align-items:center;gap:7px;font-size:16px;font-weight:700;
  color:var(--dark);margin-top:3px}
.yes-hood svg{color:var(--gold-mid);flex:0 0 15px}
.yes-m{font-size:16px;font-weight:400;color:var(--text-helper)}

.passed{margin-bottom:18px}
.passed-h{font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--text-helper);margin-bottom:8px}
.passed ul{list-style:none}
.passed li{padding:8px 0;line-height:1.45;border-bottom:1px solid var(--border-light);
  font-size:15px;color:var(--text-helper)}
.passed li:last-child{border-bottom:0}
.passed li b{font-weight:700;color:var(--dark)}

.mind{display:block;margin-left:auto;background:none;border:0;padding:8px 2px;
  font-family:inherit;font-size:15px;font-weight:700;color:var(--gold-mid);
  text-decoration:underline;cursor:pointer;min-height:44px}
.mind:hover{color:var(--gold-deep)}

.editor{display:none;border:2px solid var(--border-light);border-radius:12px;
  padding:14px 16px 16px;margin:6px 0 22px}
.editor.open{display:block}
.ed-head{display:grid;grid-template-columns:1fr 62px 62px;gap:8px;align-items:end;
  padding-bottom:9px;border-bottom:2px solid var(--border-light);margin-bottom:4px}
.ed-head span{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:var(--text-helper);text-align:center;line-height:1.25}
.ed-row{display:grid;grid-template-columns:1fr 62px 62px;gap:8px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--border-light)}
.ed-row:last-of-type{border-bottom:0}
.ed-lab{font-size:15px;color:var(--dark);line-height:1.35;min-width:0}
.ed-lab b{font-weight:700}
.ed-lab span{display:block;font-size:13px;color:var(--text-helper)}
.ed-box{justify-self:center;width:28px;height:28px;border-radius:8px;
  border:2px solid var(--border-strong);background:#fff;cursor:pointer;display:flex;
  align-items:center;justify-content:center;padding:0;color:transparent}
.ed-box[aria-checked="true"]{background:var(--gold);border-color:var(--gold-deep);color:var(--dark)}
.ed-box.no[aria-checked="true"]{background:var(--cream-mid);border-color:var(--text-helper);color:var(--dark)}
.ed-box:focus-visible{outline:3px solid var(--gold-deep);outline-offset:2px}
.ed-save{margin-top:14px;display:flex;justify-content:flex-end}

.spam{display:flex;gap:10px;align-items:flex-start;background:var(--cream-mid);
  border-radius:10px;padding:14px 16px;font-size:14px;line-height:1.5;
  color:var(--text-helper);margin-bottom:20px}
.spam svg{flex:0 0 17px;margin-top:3px;color:var(--gold-mid)}
.spam b{color:var(--dark);font-weight:700}

.ask-email{margin-bottom:18px}
.ask-l{display:block;font-size:14px;font-weight:700;color:var(--dark);margin-bottom:7px}
.ask,.ask-i{width:100%;background:#fff;border:2px solid var(--border-strong);
  border-radius:10px;padding:12px 14px;font-family:inherit;font-size:15px;
  color:var(--text-dark);line-height:1.5}
.ask{margin-bottom:16px;resize:vertical}
.ask::placeholder,.ask-i::placeholder{color:#595959}
.ask:focus,.ask-i:focus{outline:none;border-color:var(--gold-deep);
  box-shadow:0 0 0 3px rgba(107,84,32,.18)}

/* Sized to fit, never edge to edge. A button that fills its container reads
   as a bar, and on a phone that is most of the screen width. */
.stack-btns{display:flex;flex-direction:column;align-items:center;gap:12px;
  margin-bottom:22px}
.stack-btns .btn{width:auto;min-width:190px;max-width:300px;justify-content:center}
.link-back{background:none;border:0;padding:6px 4px;font-family:inherit;font-size:15px;
  font-weight:600;color:var(--gold-mid);text-decoration:underline;cursor:pointer;
  min-height:44px;justify-self:center}
.link-back:hover{color:var(--gold-deep)}

@media(max-width:430px){
  /* reversed, so the primary sits at the top of the stack rather than the
     bottom, where a thumb lands first */
  /* stacked, still sized to fit rather than edge to edge */
  .c-answers{flex-direction:column-reverse;align-items:center}
  .c-answers .btn{flex:none;width:auto;min-width:220px;max-width:100%}
  .stack-btns .btn{min-width:220px;max-width:100%}
  .deck.has-stack{padding-left:34px}
  .card.behind1{transform:translateX(-11px) scale(.98)}
  .card.behind2{transform:translateX(-22px) scale(.96)}
  .card.behind3{transform:translateX(-33px) scale(.94)}
}

/* ============================================================
   37. CONTEXT FOR A COLD ARRIVAL
   A list looks like a listing, so people fill in the blanks. A
   single card demands a yes or no, and someone who has never heard
   of us cannot give one. Shown only when we have no history.
   ============================================================ */
.d-context{background:var(--cream-mid);border-radius:12px;padding:16px 18px;
  margin:0 0 18px}
.d-context p{font-size:16px;line-height:1.6;color:var(--text-dark);margin-bottom:10px}
.d-context p:last-child{margin-bottom:0}
.d-context strong{color:var(--dark);font-weight:700}

/* ============================================================
   39. WHY NOT
   Checkboxes rather than a single button, because "these dates do
   not work" and "these locations are not convenient" are different
   problems with different answers, and someone browsing is neither.
   ============================================================ */
.reasons{display:grid;gap:10px;margin-bottom:16px}
.reason{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:#fff;border:2px solid var(--border-light);border-radius:12px;
  padding:13px 15px;font-family:inherit;font-size:16px;color:var(--dark);
  cursor:pointer;min-height:44px}
.reason:hover{border-color:var(--gold-deep);background:var(--cream-mid)}
.reason[aria-checked="true"]{border-color:var(--gold-deep);background:#FBF3DC}
.reason:focus-visible{outline:3px solid var(--gold-deep);outline-offset:2px}
.reason-box{flex:0 0 24px;height:24px;border-radius:6px;border:2px solid var(--border-light);
  background:#fff;display:flex;align-items:center;justify-content:center;color:transparent}
.reason[aria-checked="true"] .reason-box{background:var(--gold);
  border-color:var(--gold-deep);color:var(--dark)}
.reason-back{text-align:center;margin-bottom:16px}

/* ============================================================
   40. BRING SOMEONE
   People are already doing this unprompted. The mechanic matters:
   nobody can be brought, they set up their own profile, so the
   copy hands over a link rather than a promise.
   ============================================================ */
.invite{background:#FDF8EA;border:2px solid var(--gold);border-radius:14px;
  padding:20px;margin:0 0 22px}
.invite-h{font-size:17px;font-weight:700;color:var(--dark);margin-bottom:8px}
.invite-b{font-size:15px;line-height:1.55;color:var(--text-dark);margin-bottom:14px}
.invite-line{margin:0;text-align:center}
/* A rounded rectangle, not a pill: pills on this site are tappable, and this
   is a message. */
.invite-done{display:block;font-size:15px;font-weight:700;color:var(--gold-mid);
  background:#fff;border:2px solid var(--gold);border-radius:10px;padding:11px 14px;
  margin-top:12px;line-height:1.5}
.invite textarea{margin-top:12px}
.conf-top.plain{background:var(--cream-mid);border-color:var(--cream-mid);padding:16px 18px}
.e-sub.before-cta{background:var(--cream-mid);border-radius:10px;padding:14px 16px;
  font-size:15px;margin:0 0 20px}

/* the list is a recap after submitting, not the news, so it loses the panel */
.conf-top.plain-list{background:transparent;border:0;padding:0}
/* Once submitted the ticks are a record, not news. Brown recedes; gold here
   would compete with the invite, which is the only thing left to act on. */
.conf-top.plain-list .yes-list li{border-bottom-color:var(--border-light)}
.conf-top.plain-list .yes-tick{background:var(--gold-deep);color:#fff}

/* one quiet link rather than a second block competing with the CTA */
.invite-line{margin:18px 0 4px}
.invite-link{display:inline-flex;align-items:center;gap:9px;background:none;border:0;
  padding:8px 2px;font-family:inherit;font-size:16px;font-weight:700;color:var(--gold-mid);
  text-decoration:underline;cursor:pointer;min-height:44px}
.invite-link svg{flex:0 0 18px}
.invite-link:hover{color:var(--gold-deep)}
.invite-link:focus-visible{outline:3px solid var(--gold-deep);outline-offset:3px;border-radius:4px}

/* ============================================================
   41. FIELDS IN THEIR OWN PANEL
   On the no dates screen the email and name are the only things
   to fill in, with checkboxes above and a button below. A panel
   separates the writing from the choosing.
   ============================================================ */
.ask-email.boxed{background:#FDF8EA;border:2px solid var(--gold);border-radius:14px;
  padding:18px 20px;margin-bottom:18px}
.ask-email.boxed .ask-i{background:#fff}

/* ============================================================
   42. DID YOU MEAN
   A bounce is invisible to the person and costs us sender
   reputation. Always a suggestion, never a block: unusual domains
   are real, and being told your own address is wrong is
   infuriating. A second press uses what they typed.
   ============================================================ */
.typo-fix{background:none;border:0;padding:0 2px;font-family:inherit;font-size:inherit;
  font-weight:700;color:var(--gold-mid);text-decoration:underline;cursor:pointer}
.typo-fix:hover{color:var(--gold-deep)}
.typo-fix:focus-visible{outline:3px solid var(--gold-deep);outline-offset:2px;border-radius:3px}


/* ============================================================
   43. THE DIFFERENTIATOR CARDS
   Five claims that used to be a bulleted list. Wide and stacked so
   each one gets a full line of measure, numbered so the set reads
   as a sequence rather than five unrelated points.

   The numbers come from a CSS counter, so they cannot drift out of
   order if a card is added or moved.
   ============================================================ */
.a-cards{list-style:none;max-width:var(--max-mid);margin:0 auto;padding:0;
  counter-reset:diff}
.a-card{counter-increment:diff;background:#fff;border:2px solid var(--border-light);
  border-radius:14px;padding:20px 22px;margin-bottom:14px;
  display:flex;gap:18px;align-items:flex-start}
.a-card:last-child{margin-bottom:0}

.a-card-icon{flex:0 0 46px;display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:12px;background:var(--cream-mid);
  color:var(--gold-mid);margin-top:2px}
.a-card-icon svg{width:24px;height:24px}

.a-card-body{min-width:0}
.a-card h3{font-size:18px;font-weight:700;color:var(--dark);line-height:1.35;
  margin:0 0 6px}
.a-card h3::before{content:counter(diff) ". ";color:var(--gold-mid);font-weight:800}
.a-card p{font-size:16px;line-height:1.6;color:var(--text-dark);margin:0}

@media(max-width:520px){
  .a-card{gap:14px;padding:18px}
  .a-card-icon{flex:0 0 38px;width:38px;height:38px;border-radius:10px}
  .a-card-icon svg{width:20px;height:20px}
}