/* Saving Black Hearts brand system — extracted verbatim from colleague's prototype.
   Edit here to restyle the public site. Wagtail admin UI is unaffected. */

/* ============================================================
     SAVING BLACK HEARTS — brand system from activation deck
     Crimson #A4161A · Ink Black #0A0A0A · Heritage Gold #C9A961
     Cream #FBF7F2 · Light Gold #E6C77A · Warm Gray #5C5C5C
     Display: Georgia · Body: Calibri/system sans
     ============================================================ */
  :root{
    --crimson:#A4161A;
    --crimson-dark:#7E1013;
    --ink:#0A0A0A;
    --charcoal:#1C1C1C;
    --gold:#C9A961;
    --gold-light:#E6C77A;
    --cream:#FBF7F2;
    --sand:#E8E4DE;
    --gray:#5C5C5C;
    --serif:Georgia,'Times New Roman',serif;
    --sans:Calibri,'Segoe UI',-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--sans);
    font-size:19px;
    line-height:1.6;
    color:var(--charcoal);
    background:var(--cream);
  }
  img{max-width:100%;}
  a{color:var(--crimson);}

  /* ---------- Wordmark ---------- */
  .wordmark{font-family:var(--serif);line-height:1.05;}
  .wordmark .saving{font-style:italic;font-weight:400;display:block;}
  .wordmark .bh{font-weight:700;letter-spacing:.04em;text-transform:uppercase;display:block;}
  .wordmark .bh .dot{color:var(--gold);}

  /* ============================================================
     GATE / CRM SIGN-UP SCREEN
     ============================================================ */
  #gate{
    position:fixed;inset:0;z-index:1000;
    background:var(--ink);
    overflow-y:auto;
    display:flex;flex-direction:column;
  }
  #gate.hidden{display:none;}
  .gate-inner{
    flex:1;
    display:grid;grid-template-columns:1fr 1fr;
    max-width:1100px;margin:0 auto;width:100%;
    gap:48px;padding:48px 32px 32px;
    align-items:center;
  }
  .gate-info{color:var(--cream);}
  .gate-eyebrow{
    font-size:14px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--gold);margin-bottom:24px;font-weight:600;
  }
  .gate-info .wordmark{font-size:46px;margin-bottom:20px;color:#fff;}
  .gate-headline{
    font-family:var(--serif);font-size:26px;font-weight:400;
    line-height:1.35;margin-bottom:18px;color:var(--cream);
  }
  .gate-body{font-size:19px;color:#D8D3CC;margin-bottom:24px;max-width:46ch;}
  .gate-list{list-style:none;margin-bottom:28px;}
  .gate-list li{
    padding:10px 0 10px 36px;position:relative;
    color:var(--cream);font-size:19px;
  }
  .gate-list li::before{
    content:"♥";color:var(--gold);position:absolute;left:4px;top:10px;font-size:18px;
  }
  .gate-trust{font-size:16px;color:#A39D94;max-width:44ch;}
  .gate-info .mini-ekg{width:280px;max-width:80%;margin:2px 0 20px;}

  .gate-form-wrap{
    background:var(--cream);border-radius:14px;
    padding:36px 32px;box-shadow:0 12px 40px rgba(0,0,0,.45);
  }
  .gate-form-wrap h2{
    font-family:var(--serif);font-size:26px;color:var(--ink);
    margin-bottom:6px;line-height:1.25;
  }
  .gate-form-wrap .form-sub{font-size:17px;color:var(--gray);margin-bottom:22px;}
  .field{margin-bottom:16px;}
  .field label{
    display:block;font-size:16px;font-weight:600;color:var(--charcoal);margin-bottom:6px;
  }
  .field label .opt{font-weight:400;color:var(--gray);}
  .field input[type=text],.field input[type=email],.field input[type=tel]{
    width:100%;padding:14px 14px;font-size:18px;font-family:var(--sans);
    border:2px solid var(--sand);border-radius:8px;background:#fff;color:var(--ink);
  }
  .field input:focus{outline:3px solid var(--gold-light);border-color:var(--gold);}
  .radio-row{display:flex;gap:12px;flex-wrap:wrap;}
  .radio-pill{flex:1;min-width:130px;position:relative;}
  .radio-pill input{position:absolute;opacity:0;}
  .radio-pill span{
    display:block;text-align:center;padding:12px 10px;font-size:17px;
    border:2px solid var(--sand);border-radius:8px;background:#fff;cursor:pointer;
  }
  .radio-pill input:checked + span{
    border-color:var(--crimson);background:#FDF1F1;font-weight:700;color:var(--crimson);
  }
  .radio-pill input:focus-visible + span{outline:3px solid var(--gold-light);}
  .consent{
    display:flex;gap:12px;align-items:flex-start;
    font-size:16px;color:var(--charcoal);margin:20px 0 22px;
  }
  .consent input{width:22px;height:22px;margin-top:3px;flex-shrink:0;accent-color:var(--crimson);}
  .btn{
    display:inline-block;width:100%;padding:18px 24px;
    font-size:20px;font-weight:700;font-family:var(--sans);
    border:none;border-radius:10px;cursor:pointer;text-align:center;text-decoration:none;
  }
  .btn-primary{background:var(--crimson);color:#fff;}
  .btn-primary:hover{background:var(--crimson-dark);}
  .skip-row{text-align:center;padding:8px 0 26px;}
  .btn-skip{
    background:none;border:none;cursor:pointer;
    font-family:var(--sans);font-size:18px;color:var(--cream);
    text-decoration:underline;text-underline-offset:4px;padding:12px 20px;
  }
  .btn-skip:hover{color:var(--gold-light);}

  /* Emergency strip — never gated */
  .emergency-strip{
    background:var(--crimson);color:#fff;text-align:center;
    padding:12px 20px;font-size:16.5px;
  }
  .emergency-strip strong{font-weight:700;}
  .emergency-strip a{color:#fff;font-weight:700;}

  /* Gate thank-you state */
  #gate-thanks{display:none;text-align:center;padding:20px 10px;}
  #gate-thanks h2{font-family:var(--serif);font-size:28px;color:var(--ink);margin-bottom:12px;}
  #gate-thanks p{font-size:18px;color:var(--gray);margin-bottom:24px;}

  /* ============================================================
     MAIN SITE — header & nav
     ============================================================ */
  header.site{
    background:var(--ink);color:var(--cream);
    padding:14px 24px;position:sticky;top:0;z-index:50;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
  }
  header.site .wordmark{font-size:30px;color:#fff;line-height:1.05;cursor:pointer;}
  nav.main-nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center;}
  nav.main-nav a{
    color:var(--cream);text-decoration:none;font-size:16px;
    padding:10px 12px;border-radius:6px;cursor:pointer;
  }
  nav.main-nav a:hover{background:rgba(201,169,97,.18);color:var(--gold-light);}
  nav.main-nav a.active{color:var(--gold-light);box-shadow:inset 0 -2px 0 var(--gold);border-radius:6px 6px 0 0;}
  .nav-signup{
    background:var(--crimson);color:#fff !important;font-weight:700;
  }
  .nav-signup:hover{background:var(--crimson-dark) !important;}

  /* ---------- Views (in-file pages) ---------- */
  .view{display:none;}
  .view.active{display:block;}

  section{padding:72px 24px;}
  .wrap{max-width:980px;margin:0 auto;}
  .eyebrow{
    font-size:14px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--crimson);font-weight:700;margin-bottom:14px;
  }
  h1,h2.section-title{font-family:var(--serif);color:var(--ink);}
  h2.section-title{font-size:clamp(28px,4vw,40px);line-height:1.2;margin-bottom:18px;}
  .lede{font-size:21px;max-width:62ch;}

  /* ============================================================
     CINEMATIC HERO
     Layered: deep crimson-to-ink gradient with slow drift,
     pulsing radial glow, animated gold EKG heartbeat line,
     staggered text reveal. Honors prefers-reduced-motion.
     ============================================================ */
  .hero{
    position:relative;overflow:hidden;
    color:var(--cream);text-align:center;
    padding:110px 24px 130px;
    background:
      radial-gradient(130% 110% at 75% -10%, #4A1012 0%, rgba(74,16,18,0) 55%),
      radial-gradient(120% 130% at 12% 110%, #2A1208 0%, rgba(42,18,8,0) 50%),
      linear-gradient(165deg, #1A0B0B 0%, var(--ink) 60%, #120D08 100%);
  }
  /* slow drifting warm light */
  .hero::before{
    content:"";position:absolute;inset:-30%;
    background:
      radial-gradient(40% 35% at 30% 40%, rgba(164,22,26,.32) 0%, rgba(164,22,26,0) 70%),
      radial-gradient(32% 30% at 72% 60%, rgba(201,169,97,.13) 0%, rgba(201,169,97,0) 70%);
    animation:drift 22s ease-in-out infinite alternate;
    pointer-events:none;
  }
  /* heartbeat glow behind headline */
  .hero::after{
    content:"";position:absolute;left:50%;top:46%;
    width:680px;height:680px;transform:translate(-50%,-50%);
    background:radial-gradient(circle, rgba(164,22,26,.30) 0%, rgba(164,22,26,0) 62%);
    animation:heartbeat 2.6s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes drift{
    0%{transform:translate(0,0) scale(1);}
    100%{transform:translate(5%,4%) scale(1.12);}
  }
  @keyframes heartbeat{
    0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.75;}
    12%{transform:translate(-50%,-50%) scale(1.07);opacity:1;}
    24%{transform:translate(-50%,-50%) scale(1);opacity:.8;}
    36%{transform:translate(-50%,-50%) scale(1.05);opacity:.95;}
    52%{transform:translate(-50%,-50%) scale(1);opacity:.75;}
  }
  .hero-content{position:relative;z-index:2;}
  .hero .hero-wordmark{
    font-size:clamp(40px,8vw,82px);color:#fff;margin:0 auto 26px;
    line-height:1.02;text-shadow:0 2px 30px rgba(0,0,0,.55);
  }
  .hero .hero-wordmark .saving{font-size:0.55em;}
  .hero .eyebrow{color:var(--gold);}
  .hero h1{
    font-size:clamp(36px,6.4vw,62px);color:#fff;line-height:1.13;
    max-width:18ch;margin:0 auto 24px;
    text-shadow:0 2px 30px rgba(0,0,0,.5);
  }
  .hero h1 em{font-style:italic;color:var(--gold-light);}
  .hero p.sub{font-size:21px;max-width:54ch;margin:0 auto 30px;color:#E2DCD3;}
  .hero .tagline{
    font-family:var(--serif);font-size:clamp(19px,2.6vw,25px);color:var(--gold);
    letter-spacing:.02em;margin-top:6px;
  }
  /* staggered reveal */
  .rise{opacity:0;transform:translateY(26px);animation:rise 1s cubic-bezier(.2,.7,.3,1) forwards;}
  .rise.d1{animation-delay:.15s;} .rise.d2{animation-delay:.4s;}
  .rise.d3{animation-delay:.7s;} .rise.d4{animation-delay:1s;}
  @keyframes rise{to{opacity:1;transform:translateY(0);}}

  /* EKG heartbeat line */
  .ekg-wrap{
    position:absolute;left:0;right:0;bottom:34px;z-index:1;
    height:130px;pointer-events:none;
  }
  .ekg-wrap svg{width:100%;height:100%;display:block;}
  .ekg-line{
    fill:none;stroke:var(--gold);stroke-width:2.5;
    stroke-linecap:round;stroke-linejoin:round;
    filter:drop-shadow(0 0 6px rgba(230,199,122,.85));
    stroke-dasharray:1000;stroke-dashoffset:1000;
    animation:ekgdraw 6s linear infinite;
  }
  .ekg-line.echo{
    stroke:rgba(164,22,26,.55);filter:none;stroke-width:2;
    animation-delay:3s;
  }
  @keyframes ekgdraw{
    0%{stroke-dashoffset:1000;opacity:0;}
    6%{opacity:1;}
    62%{stroke-dashoffset:0;opacity:1;}
    78%{opacity:0;}
    100%{stroke-dashoffset:0;opacity:0;}
  }
  .scroll-cue{
    position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
    z-index:2;color:var(--gold-light);font-size:26px;text-decoration:none;
    animation:cue 2.2s ease-in-out infinite;
  }
  @keyframes cue{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,8px);}}

  @media (prefers-reduced-motion: reduce){
    .hero::before,.hero::after,.ekg-line,.scroll-cue{animation:none;}
    .ekg-line{stroke-dashoffset:0;opacity:.9;}
    .rise{opacity:1;transform:none;animation:none;}
  }

  /* ---------- Sub-page hero (tips / family guide) ---------- */
  .page-hero{
    background:
      radial-gradient(110% 130% at 80% -20%, #3C0E10 0%, rgba(60,14,16,0) 55%),
      linear-gradient(165deg,#1A0B0B 0%, var(--ink) 70%);
    color:var(--cream);padding:72px 24px 64px;
  }
  .page-hero .eyebrow{color:var(--gold);}
  .page-hero h1{font-size:clamp(30px,5vw,48px);color:#fff;line-height:1.18;max-width:24ch;margin-bottom:16px;}
  .page-hero p{font-size:20px;max-width:58ch;color:#D8D3CC;}

  /* Stat cards */
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;}
  .stat{
    background:#fff;border-radius:12px;padding:28px 24px;
    border-top:5px solid var(--crimson);box-shadow:0 3px 14px rgba(10,10,10,.06);
  }
  .stat .num{
    font-family:var(--serif);font-size:44px;font-weight:700;color:var(--crimson);
    line-height:1;margin-bottom:10px;
  }
  .stat p{font-size:17.5px;color:var(--charcoal);}

  /* Alternating bands */
  .band-cream{background:var(--cream);}
  .band-sand{background:var(--sand);}
  .band-ink{background:var(--ink);color:var(--cream);}
  .band-ink .section-title{color:#fff;}
  .band-ink .eyebrow{color:var(--gold);}
  .band-ink .lede{color:#D8D3CC;}

  .two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start;margin-top:8px;}
  .plain-points{list-style:none;margin-top:22px;}
  .plain-points li{
    padding:14px 0 14px 44px;position:relative;font-size:19px;
    border-bottom:1px solid rgba(92,92,92,.18);
  }
  .plain-points li:last-child{border-bottom:none;}
  .plain-points li::before{
    content:"";position:absolute;left:6px;top:20px;width:14px;height:14px;
    background:var(--gold);border-radius:50%;
  }
  .band-ink .plain-points li{border-color:rgba(232,228,222,.16);}

  .ask-card{
    background:#fff;border-radius:14px;padding:32px 28px;
    border-left:6px solid var(--gold);box-shadow:0 6px 24px rgba(10,10,10,.08);
  }
  .ask-card .say{
    font-family:var(--serif);font-style:italic;font-size:24px;color:var(--ink);
    line-height:1.4;margin:14px 0 18px;
  }
  .ask-card .small{font-size:16.5px;color:var(--gray);}
  .ask-label{
    font-size:13.5px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--crimson);font-weight:700;
  }

  /* Habits grid */
  .habits{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px;}
  .habit{
    background:#fff;border-radius:12px;padding:22px 18px;text-align:center;
    box-shadow:0 3px 12px rgba(10,10,10,.05);
  }
  .habit .icon{font-size:30px;display:block;margin-bottom:10px;}
  .habit h3{font-family:var(--serif);font-size:19px;color:var(--ink);margin-bottom:6px;}
  .habit p{font-size:15.5px;color:var(--gray);line-height:1.45;}
  .habit-note{
    margin-top:28px;background:#FDF6E8;border:1.5px solid var(--gold-light);
    border-radius:10px;padding:18px 22px;font-size:17.5px;max-width:75ch;
  }
  .more-link{
    display:inline-block;margin-top:26px;font-size:18px;font-weight:700;
    color:var(--crimson);text-decoration:none;border-bottom:2px solid var(--gold);
    padding-bottom:2px;cursor:pointer;
  }
  .more-link:hover{color:var(--crimson-dark);}

  /* Warning signs */
  .warn-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px;}
  .warn-card{
    background:rgba(251,247,242,.06);border:1.5px solid rgba(201,169,97,.4);
    border-radius:12px;padding:28px 26px;
  }
  .warn-card h3{
    font-family:var(--serif);font-size:23px;color:var(--gold-light);margin-bottom:14px;
  }
  .warn-card ul{list-style:none;}
  .warn-card li{padding:8px 0 8px 30px;position:relative;font-size:18px;color:var(--cream);}
  .warn-card li::before{content:"›";position:absolute;left:6px;color:var(--gold);font-weight:700;}
  .warn-card li strong{color:var(--gold-light);}
  .call911{
    margin-top:32px;background:var(--crimson);border-radius:12px;
    padding:26px 28px;text-align:center;
  }
  .call911 p{font-size:21px;color:#fff;font-weight:700;max-width:60ch;margin:0 auto;}

  /* Bottom sign-up */
  .bottom-cta{text-align:center;}
  .bottom-cta .btn-primary{width:auto;padding:18px 48px;margin-top:24px;}

  /* ============================================================
     TIPS PAGE
     ============================================================ */
  .tip-group{margin-top:48px;}
  .tip-group:first-of-type{margin-top:8px;}
  .tip-group h2{
    font-family:var(--serif);font-size:28px;color:var(--ink);
    margin-bottom:6px;
  }
  .tip-group .group-sub{font-size:18px;color:var(--gray);margin-bottom:22px;max-width:62ch;}
  .tip-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .tip{
    background:#fff;border-radius:12px;padding:22px 24px;
    box-shadow:0 3px 12px rgba(10,10,10,.05);
    border-left:5px solid var(--gold);
  }
  .tip h3{font-family:var(--serif);font-size:20px;color:var(--ink);margin-bottom:6px;}
  .tip p{font-size:17px;color:var(--charcoal);}
  .tip .why{font-size:15.5px;color:var(--gray);margin-top:8px;font-style:italic;}

  /* ============================================================
     FAMILY GUIDE PAGE
     ============================================================ */
  .guide-steps{counter-reset:step;margin-top:12px;}
  .gstep{
    position:relative;background:#fff;border-radius:14px;
    padding:30px 30px 30px 88px;margin-bottom:22px;
    box-shadow:0 4px 16px rgba(10,10,10,.06);
  }
  .gstep::before{
    counter-increment:step;content:counter(step);
    position:absolute;left:26px;top:28px;
    width:44px;height:44px;border-radius:50%;
    background:var(--crimson);color:#fff;
    font-family:var(--serif);font-size:24px;font-weight:700;
    display:flex;align-items:center;justify-content:center;
  }
  .gstep h3{font-family:var(--serif);font-size:23px;color:var(--ink);margin-bottom:8px;}
  .gstep p{font-size:18px;margin-bottom:10px;}
  .gstep p:last-child{margin-bottom:0;}
  .gstep .script{
    background:#FDF6E8;border-left:4px solid var(--gold);
    border-radius:0 8px 8px 0;padding:14px 18px;
    font-family:var(--serif);font-style:italic;font-size:18.5px;color:var(--charcoal);
    margin:12px 0;
  }
  .gstep ul{list-style:none;margin:10px 0;}
  .gstep ul li{padding:6px 0 6px 28px;position:relative;font-size:18px;}
  .gstep ul li::before{content:"›";position:absolute;left:6px;color:var(--crimson);font-weight:700;}
  .checklist-card{
    background:var(--ink);color:var(--cream);border-radius:14px;
    padding:32px 30px;margin-top:40px;
  }
  .checklist-card h3{font-family:var(--serif);font-size:24px;color:var(--gold-light);margin-bottom:14px;}
  .checklist-card p{color:#D8D3CC;margin-bottom:14px;}
  .checklist-card ul{list-style:none;}
  .checklist-card li{padding:9px 0 9px 36px;position:relative;font-size:18px;}
  .checklist-card li::before{
    content:"";position:absolute;left:4px;top:14px;width:18px;height:18px;
    border:2px solid var(--gold);border-radius:4px;
  }

  /* ============================================================
     MOTION SYSTEM — dynamism throughout
     Scroll-reveal (staggered), card hover lifts, mini EKG
     dividers, FAQ accordions. All disabled for reduced-motion.
     ============================================================ */
  .reveal{opacity:0;transform:translateY(26px);
    transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1);}
  .reveal.in{opacity:1;transform:none;}
  .stat,.habit,.tip,.gstep,.warn-card,.ask-card,.res-card{
    transition:transform .28s ease,box-shadow .28s ease,opacity .7s ease;
  }
  .stat:hover,.habit:hover,.tip:hover,.res-card:hover{
    transform:translateY(-6px);box-shadow:0 14px 30px rgba(10,10,10,.13);
  }
  .stat.reveal,.habit.reveal,.tip.reveal,.gstep.reveal,.warn-card.reveal,.res-card.reveal{
    transform:translateY(26px);
  }
  .stat.reveal.in,.habit.reveal.in,.tip.reveal.in,.gstep.reveal.in,.warn-card.reveal.in,.res-card.reveal.in{
    transform:none;
  }
  .btn-primary{transition:background .2s ease,transform .2s ease,box-shadow .2s ease;}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(164,22,26,.35);}
  .more-link{transition:color .2s ease;position:relative;}
  .more-link::after{
    content:"";position:absolute;left:0;bottom:-4px;height:2px;width:0;
    background:var(--crimson);transition:width .3s ease;
  }
  .more-link:hover::after{width:100%;}

  /* Mini EKG divider — reusable heartbeat accent */
  .mini-ekg{width:220px;max-width:60%;margin:20px auto 0;height:40px;}
  .mini-ekg.left{margin:20px 0 0;}
  .mini-ekg svg{width:100%;height:100%;display:block;overflow:visible;}
  .mini-ekg path{
    fill:none;stroke:var(--gold);stroke-width:2.2;
    stroke-linecap:round;stroke-linejoin:round;
    filter:drop-shadow(0 0 4px rgba(230,199,122,.7));
    stroke-dasharray:100;stroke-dashoffset:100;
    animation:miniekg 4.5s linear infinite;
  }
  @keyframes miniekg{
    0%{stroke-dashoffset:100;opacity:0;}
    8%{opacity:1;}
    60%{stroke-dashoffset:0;opacity:1;}
    80%{opacity:0;}
    100%{stroke-dashoffset:0;opacity:0;}
  }

  /* FAQ accordion */
  .faq{margin-top:36px;}
  .faq details{
    background:#fff;border-radius:10px;margin-bottom:12px;
    box-shadow:0 3px 12px rgba(10,10,10,.05);overflow:hidden;
    border-left:5px solid var(--gold);
  }
  .faq summary{
    cursor:pointer;padding:18px 54px 18px 22px;list-style:none;
    font-family:var(--serif);font-weight:700;font-size:19.5px;color:var(--ink);
    position:relative;
  }
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary::after{
    content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
    font-size:26px;color:var(--crimson);font-family:var(--sans);font-weight:400;
    transition:transform .25s ease;
  }
  .faq details[open] summary::after{content:"–";}
  .faq .a{padding:0 22px 20px;font-size:18px;color:var(--charcoal);}
  .faq .a p{margin-bottom:10px;}
  .faq .a p:last-child{margin-bottom:0;}

  /* ============================================================
     RESOURCES PAGE
     ============================================================ */
  .res-note{
    background:#FDF6E8;border:1.5px solid var(--gold-light);border-radius:10px;
    padding:16px 20px;font-size:16.5px;color:var(--charcoal);
    max-width:75ch;margin-top:24px;
  }
  .res-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:36px;}
  .res-card{
    background:#fff;border-radius:14px;padding:26px 24px;
    box-shadow:0 4px 16px rgba(10,10,10,.06);
    display:flex;flex-direction:column;gap:12px;
  }
  .res-head{display:flex;align-items:center;gap:16px;}
  .res-logo{
    width:58px;height:58px;border-radius:12px;flex-shrink:0;
    background:var(--crimson);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--serif);font-weight:700;font-size:15px;letter-spacing:.02em;
  }
  .res-logo.gold{background:var(--gold);color:var(--ink);}
  .res-logo.ink{background:var(--ink);color:var(--gold-light);}
  .res-card h3{font-family:var(--serif);font-size:20.5px;color:var(--ink);line-height:1.25;}
  .res-card .domain{font-size:14.5px;color:var(--gray);letter-spacing:.02em;}
  .res-card p.desc{font-size:17px;color:var(--charcoal);flex:1;}
  .res-card .res-visit{
    align-self:flex-start;font-size:16.5px;font-weight:700;color:var(--crimson);
    text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:2px;
  }
  .res-card .res-visit:hover{color:var(--crimson-dark);}

  @media (prefers-reduced-motion: reduce){
    .reveal,.stat,.habit,.tip,.gstep,.warn-card,.ask-card,.res-card{
      opacity:1 !important;transform:none !important;transition:none !important;
    }
    .mini-ekg path{animation:none;stroke-dashoffset:0;opacity:.9;}
    .btn-primary:hover,.stat:hover,.habit:hover,.tip:hover,.res-card:hover{transform:none;}
  }

  /* ============================================================
     PRIVACY POLICY PAGE
     ============================================================ */
  .legal{max-width:72ch;}
  .legal .updated{font-size:15.5px;color:var(--gray);margin-bottom:28px;}
  .legal h2{font-family:var(--serif);font-size:25px;color:var(--ink);margin:38px 0 10px;}
  .legal h2:first-of-type{margin-top:8px;}
  .legal p{margin-bottom:14px;font-size:18px;}
  .legal ul{margin:0 0 14px 0;list-style:none;}
  .legal li{padding:6px 0 6px 28px;position:relative;font-size:18px;}
  .legal li::before{content:"›";position:absolute;left:6px;color:var(--crimson);font-weight:700;}
  .legal .plain-box{
    background:#FDF6E8;border:1.5px solid var(--gold-light);border-radius:10px;
    padding:16px 20px;margin:0 0 14px;font-size:17.5px;
  }
  .form-privacy{text-align:center;margin-top:14px;font-size:15.5px;}
  .form-privacy a{color:var(--gray);cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
  .form-privacy a:hover{color:var(--crimson);}

  /* Footer */
  footer{
    background:#121110;color:#A39D94;padding:48px 24px 40px;font-size:15.5px;
  }
  footer .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;}
  footer .wordmark{font-size:22px;color:var(--cream);margin-bottom:14px;}
  footer h4{
    color:var(--gold);font-size:13px;letter-spacing:.16em;
    text-transform:uppercase;margin-bottom:12px;
  }
  footer ul{list-style:none;}
  footer li{margin-bottom:8px;}
  footer a{color:#D8D3CC;text-decoration:none;}
  footer a:hover{color:var(--gold-light);text-decoration:underline;}
  .disclaimer{
    margin-top:18px;padding-top:18px;border-top:1px solid rgba(232,228,222,.14);
    max-width:62ch;
  }

  /* ---------- Mobile ---------- */
  @media (max-width:860px){
    .gate-inner{grid-template-columns:1fr;gap:32px;padding:36px 20px 20px;}
    .gate-info .wordmark{font-size:38px;}
    .two-col{grid-template-columns:1fr;gap:32px;}
    .stats{grid-template-columns:1fr;}
    .habits{grid-template-columns:1fr 1fr;}
    .warn-grid{grid-template-columns:1fr;}
    .tip-cards{grid-template-columns:1fr;}
    footer .wrap{grid-template-columns:1fr;}
    nav.main-nav a:not(.nav-signup){display:none;}
    section{padding:56px 20px;}
    .hero{padding:88px 20px 120px;}
    .gstep{padding:26px 22px 26px 78px;}
    .gstep::before{left:18px;top:24px;}
  }

/* ============================================================
   CMS richtext normalisation
   Wagtail RichTextField emits its own <p>/<ul>/<li>; these rules
   make that output sit correctly inside the prototype's styled
   containers (which originally used hand-written markup).
   ============================================================ */
.sbh-entered #gate{display:none;}

.rich > :first-child{margin-top:0;}
.rich > :last-child{margin-bottom:0;}

/* Lede paragraphs coming from richtext */
.lede.rich p{font-size:inherit;margin:0 0 14px;}
.lede.rich p:last-child{margin-bottom:0;}

/* .plain-points used as a wrapper div around a richtext <ul> */
.plain-points.rich{margin-top:22px;}
.plain-points.rich ul{list-style:none;margin:0;padding:0;}

/* Ask-card body from richtext */
.ask-card .small.rich p{margin:0 0 10px;}
.ask-card .small.rich p:last-child{margin-bottom:0;}

/* Habit note / resource note / matters note from richtext */
.habit-note.rich p, .res-note.rich p{margin:0 0 10px;}
.habit-note.rich p:last-child, .res-note.rich p:last-child{margin-bottom:0;}

/* FAQ answer paragraphs already styled via .faq .a p */
/* Guide step body lists inherit .gstep ul styling (descendant selectors) */

/* Hero heading rendered from a RichTextField (wraps content in <p>) */
.hero .hero-heading p{
  font-size:clamp(36px,6.4vw,62px);color:#fff;line-height:1.13;
  max-width:18ch;margin:0 auto 24px;font-family:var(--serif);
  text-shadow:0 2px 30px rgba(0,0,0,.5);
}
.hero .hero-heading em{font-style:italic;color:var(--gold-light);}
.emergency-strip p{margin:0;}

/* Gate list rendered from richtext: kill default bullets/indent so the ♥ marker stands alone */
.gate-list.rich ul{list-style:none;margin:0;padding:0;}

/* Header wordmark is now a link; strip the default underline/colour */
a.wordmark{text-decoration:none;color:inherit;}