:root{
    --paper:#F4F6F0;
    --card:#FDFEFB;
    --ink:#1C362F;
    --ink-soft:#3D564D;
    --moss:#5C7A6E;
    --line:#D8E0D4;
    --pine:#1C362F;
    --pine-deep:#122420;
    --marigold:#F3AC2E;
    --gold-deep:#C28A12;
    --gold-wash:#F8ECC8;
    --on-pine:#EDF2EA;
    --shadow:0 18px 40px -18px rgba(28,54,47,.28);
    --serif:"Palatino Linotype","Iowan Old Style",Palatino,"Book Antiqua",Georgia,serif;
    --sans:"Avenir Next","Segoe UI","Helvetica Neue",Arial,sans-serif;
    --mono:"Cascadia Code","SF Mono",Consolas,"Liberation Mono",monospace;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --paper:#0F1B18;
      --card:#16261F;
      --ink:#E8EEE4;
      --ink-soft:#B9C8BC;
      --moss:#8FAA9B;
      --line:#27392F;
      --pine:#132521;
      --pine-deep:#0B1512;
      --marigold:#F6B93F;
      --gold-deep:#E2A83A;
      --gold-wash:#2E2713;
      --on-pine:#EDF2EA;
      --shadow:0 18px 40px -18px rgba(0,0,0,.6);
    }
  }
  :root[data-theme="dark"]{
    --paper:#0F1B18;
    --card:#16261F;
    --ink:#E8EEE4;
    --ink-soft:#B9C8BC;
    --moss:#8FAA9B;
    --line:#27392F;
    --pine:#132521;
    --pine-deep:#0B1512;
    --marigold:#F6B93F;
    --gold-deep:#E2A83A;
    --gold-wash:#2E2713;
    --on-pine:#EDF2EA;
    --shadow:0 18px 40px -18px rgba(0,0,0,.6);
  }
  :root[data-theme="light"]{
    --paper:#F4F6F0;
    --card:#FDFEFB;
    --ink:#1C362F;
    --ink-soft:#3D564D;
    --moss:#5C7A6E;
    --line:#D8E0D4;
    --pine:#1C362F;
    --pine-deep:#122420;
    --marigold:#F3AC2E;
    --gold-deep:#C28A12;
    --gold-wash:#F8ECC8;
    --on-pine:#EDF2EA;
    --shadow:0 18px 40px -18px rgba(28,54,47,.28);
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:var(--paper);color:var(--ink);
    font-family:var(--sans);font-size:17px;line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit}
  a:focus-visible,button:focus-visible{outline:3px solid var(--marigold);outline-offset:3px;border-radius:4px}
  .wrap{max-width:1160px;margin:0 auto;padding:0 28px}

  /* ---------- Nav ---------- */
  header.site{
    position:sticky;top:0;z-index:50;
    background:color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav{display:flex;align-items:center;gap:36px;padding-block:16px}
  .brand{display:flex;align-items:baseline;gap:10px;text-decoration:none}
  .brand .word{font-family:var(--serif);font-size:1.5rem;font-weight:700;letter-spacing:-.01em}
  .brand .word em{font-style:normal;color:var(--gold-deep)}
  .brand .by{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--moss)}
  nav.links{display:flex;gap:26px;margin-left:auto}
  nav.links a{text-decoration:none;font-size:.92rem;color:var(--ink-soft)}
  nav.links a:hover{color:var(--ink)}
  .nav-cta{display:flex;gap:12px;align-items:center}
  .btn{
    display:inline-block;padding:.72em 1.4em;border-radius:6px;border:1.5px solid transparent;
    font-family:var(--sans);font-size:.95rem;font-weight:600;text-decoration:none;cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .btn:hover{transform:translateY(-1px)}
  .btn-solid{background:var(--pine);color:var(--on-pine)}
  .btn-solid:hover{box-shadow:var(--shadow)}
  :root[data-theme="dark"] .btn-solid, .dark-btn-fix{background:var(--marigold);color:#20180a}
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .btn-solid{background:var(--marigold);color:#20180a} }
  :root[data-theme="light"] .btn-solid{background:var(--pine);color:var(--on-pine)}
  .btn-ghost{border-color:var(--line);color:var(--ink)}
  .btn-ghost:hover{border-color:var(--moss)}
  .btn-gold{background:var(--marigold);color:#241a08}
  .btn-gold:hover{box-shadow:0 10px 24px -10px var(--gold-deep)}

  /* ---------- Hero ---------- */
  .hero{padding:72px 0 84px;position:relative;overflow:hidden}
  .hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center}
  .eyebrow{
    font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--gold-deep);display:flex;align-items:center;gap:10px;margin:0 0 20px;
  }
  .eyebrow::before{content:"";width:34px;height:2px;background:var(--marigold);display:inline-block}
  h1{
    font-family:var(--serif);font-weight:700;font-size:clamp(2.6rem,5.4vw,4.2rem);
    line-height:1.04;letter-spacing:-.015em;margin:0 0 24px;text-wrap:balance;
  }
  h1 .mark{
    background:linear-gradient(transparent 62%, var(--gold-wash) 62%);
    padding:0 .06em;
  }
  .hero p.lede{font-size:1.16rem;color:var(--ink-soft);max-width:34em;margin:0 0 34px}
  .hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
  .hero-note{font-size:.85rem;color:var(--moss);margin-top:16px}

  /* Night-of console card */
  .console{
    background:var(--pine-deep);color:var(--on-pine);border-radius:14px;box-shadow:var(--shadow);
    padding:26px 26px 20px;position:relative;
    border:1px solid color-mix(in srgb, var(--on-pine) 12%, transparent);
  }
  .console .chead{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
  .console .ctitle{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;opacity:.75}
  .live{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;color:var(--marigold)}
  .live .dot{width:8px;height:8px;border-radius:50%;background:var(--marigold);animation:pulse 1.8s infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
  .tally-label{font-size:.85rem;opacity:.7;margin:0}
  .tally{
    font-family:var(--serif);font-size:clamp(2.4rem,4.5vw,3.3rem);font-weight:700;letter-spacing:-.02em;
    margin:2px 0 4px;font-variant-numeric:tabular-nums;
  }
  .goalbar{height:8px;border-radius:99px;background:color-mix(in srgb, var(--on-pine) 14%, transparent);overflow:hidden;margin:10px 0 6px}
  .goalbar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--gold-deep),var(--marigold));border-radius:99px;transition:width 1.6s cubic-bezier(.2,.7,.2,1)}
  .goal-meta{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.72rem;opacity:.75;font-variant-numeric:tabular-nums}
  .feed{list-style:none;margin:20px 0 0;padding:14px 0 0;border-top:1px dashed color-mix(in srgb, var(--on-pine) 25%, transparent)}
  .feed li{
    display:flex;justify-content:space-between;gap:14px;padding:7px 0;
    font-size:.9rem;border-bottom:1px solid color-mix(in srgb, var(--on-pine) 7%, transparent);
  }
  .feed li:last-child{border-bottom:0}
  .feed .who{opacity:.9}
  .feed .what{opacity:.55;font-size:.78rem;display:block}
  .feed .amt{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--marigold);white-space:nowrap}
  .feed li.new{animation:slidein .5s ease}
  @keyframes slidein{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

  /* ---------- Trust strip ---------- */
  .strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;background:var(--card)}
  .strip .wrap{display:flex;gap:18px 44px;align-items:center;justify-content:space-between;flex-wrap:wrap}
  .strip .label{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--moss)}
  .strip .orgs{display:flex;gap:34px;flex-wrap:wrap;font-family:var(--serif);font-size:1.02rem;color:var(--ink-soft)}

  /* ---------- Sections ---------- */
  section{padding:20px 0}
  .sec-head{max-width:640px;margin-bottom:52px}
  .sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
  h2{font-family:var(--serif);font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.12;letter-spacing:-.01em;margin:0 0 16px;text-wrap:balance}
  .sec-head p{color:var(--ink-soft);margin:0;font-size:1.05rem}

  /* Capabilities */
  .caps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .cap{
    background:var(--card);border:1px solid var(--line);border-radius:10px;padding:26px 24px;
    display:flex;flex-direction:column;gap:10px;transition:border-color .2s ease, transform .2s ease;
  }
  .cap:hover{border-color:var(--moss);transform:translateY(-2px)}
  .cap .glyph{
    width:40px;height:40px;border-radius:8px;background:var(--gold-wash);color:var(--gold-deep);
    display:grid;place-items:center;margin-bottom:6px;
  }
  .cap .glyph svg{width:20px;height:20px}
  .cap h3{font-family:var(--serif);font-size:1.22rem;margin:0}
  .cap p{margin:0;font-size:.94rem;color:var(--ink-soft)}
  .cap .more{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);text-decoration:none;margin-top:auto;padding-top:8px}
  .cap .more:hover{text-decoration:underline}

  /* Night-of sequence */
  .seq-band{background:var(--pine);color:var(--on-pine)}
  .seq-band .sec-head p{color:color-mix(in srgb, var(--on-pine) 75%, transparent)}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;counter-reset:step}
  .step{position:relative;padding-top:18px}
  .step::before{
    counter-increment:step;content:"0" counter(step);
    font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;color:var(--marigold);
  }
  .step h3{font-family:var(--serif);font-size:1.35rem;margin:10px 0 10px}
  .step p{margin:0;font-size:.95rem;color:color-mix(in srgb, var(--on-pine) 78%, transparent)}
  .step + .step::after{
    content:"";position:absolute;top:26px;left:-24px;width:14px;height:1px;background:var(--marigold);opacity:.5;
  }

  /* GCF band */
  .gcf{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
  .gcf-seal{
    aspect-ratio:1;max-width:340px;border-radius:50%;margin:0 auto;
    border:1.5px solid var(--line);display:grid;place-items:center;position:relative;background:var(--card);
  }
  .gcf-seal .inner{
    width:74%;aspect-ratio:1;border-radius:50%;background:var(--gold-wash);
    display:grid;place-items:center;text-align:center;padding:26px;
  }
  .gcf-seal .inner b{font-family:var(--serif);font-size:1.28rem;line-height:1.25;display:block;color:var(--ink)}
  .gcf-seal .inner span{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);display:block;margin-top:8px}
  .gcf-seal svg.ring{position:absolute;inset:0;width:100%;height:100%}
  .gcf-seal svg.ring text{
    font-family:var(--mono);font-size:6.8px;letter-spacing:.12em;text-transform:uppercase;fill:var(--moss);
  }
  .gcf-copy h2{margin-bottom:18px}
  .gcf-copy p{color:var(--ink-soft);margin:0 0 16px;max-width:36em}
  .gcf-points{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
  .gcf-points li{display:flex;gap:14px;align-items:flex-start;font-size:.97rem}
  .gcf-points .tick{
    flex:none;width:22px;height:22px;border-radius:50%;background:var(--gold-wash);color:var(--gold-deep);
    display:grid;place-items:center;font-size:.72rem;margin-top:2px;
  }

  /* Stats */
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;border-top:1px solid var(--line);padding-top:44px}
  .stat b{font-family:var(--serif);font-size:2.2rem;font-weight:700;display:block;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
  .stat b small{font-size:1.3rem;color:var(--gold-deep)}
  .stat span{font-size:.85rem;color:var(--moss)}

  /* Testimonial */
  .quote{
    background:var(--card);border:1px solid var(--line);border-left:4px solid var(--marigold);
    border-radius:10px;padding:40px 44px;max-width:820px;margin:0 auto;
  }
  .quote blockquote{
    margin:0;font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.5rem);line-height:1.45;font-style:italic;
  }
  .quote figcaption{margin-top:20px;font-size:.9rem;color:var(--moss)}
  .quote figcaption b{color:var(--ink);font-style:normal}

  /* CTA */
  .cta-band{background:var(--pine-deep);color:var(--on-pine);text-align:center}
  .cta-band h2{color:var(--on-pine)}
  .cta-band p{color:color-mix(in srgb, var(--on-pine) 72%, transparent);max-width:34em;margin:0 auto 32px}
  .cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  .cta-band .btn-ghost{border-color:color-mix(in srgb, var(--on-pine) 35%, transparent);color:var(--on-pine)}
  .cta-band .fine{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;margin-top:22px;opacity:.55}

  /* Footer */
  footer.site{border-top:1px solid var(--line);padding:44px 0 56px;font-size:.88rem;color:var(--ink-soft)}
  .foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
  .foot nav{display:flex;gap:22px;flex-wrap:wrap}
  .foot nav a{text-decoration:none;color:var(--ink-soft)}
  .foot nav a:hover{color:var(--ink)}
  .foot .gcf-line{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--moss);margin-top:10px}

  /* ---------- Donor band ---------- */
  .donor-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:56px;align-items:center}
  .donor-copy p{color:var(--ink-soft);margin:0 0 16px;max-width:36em}
  .donor-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
  .statement{
    background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
    padding:22px 24px;font-family:var(--mono);font-size:.82rem;
  }
  .statement .st-head{
    display:flex;justify-content:space-between;letter-spacing:.14em;text-transform:uppercase;
    font-size:.62rem;color:var(--moss);border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:6px;
  }
  .statement table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
  .statement td{padding:8px 4px;border-bottom:1px dashed var(--line);color:var(--ink-soft);white-space:nowrap}
  .statement tr:last-child td{border-bottom:0}
  .statement td.amt{text-align:right}
  .statement tr.hl td{background:var(--gold-wash);color:var(--ink);font-weight:600}
  .statement .st-note{margin:12px 0 0;font-family:var(--sans);font-size:.8rem;color:var(--moss)}

  /* ---------- Charge lookup page ---------- */
  
  .back-link{
    font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
    color:var(--moss);text-decoration:none;display:inline-block;margin-bottom:34px;
  }
  .back-link:hover{color:var(--ink)}
  .page-main h1{font-size:clamp(2rem,4vw,2.7rem);margin-bottom:16px}
  .page-main .intro{color:var(--ink-soft);margin:0 0 12px}
  .descriptors{
    background:var(--card);border:1px solid var(--line);border-radius:8px;padding:14px 18px;
    font-family:var(--mono);font-size:.8rem;color:var(--ink-soft);margin:20px 0 36px;
  }
  .descriptors b{color:var(--ink)}
  .form-card{display:grid;gap:20px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:30px 28px}
  .field{display:grid;gap:7px;align-content:start}
  .field label{font-size:.85rem;font-weight:600}
  .field .hint{font-size:.78rem;color:var(--moss);font-weight:400}
  .field input{
    font-family:var(--sans);font-size:1rem;color:var(--ink);background:var(--paper);
    border:1.5px solid var(--line);border-radius:6px;padding:.7em .9em;width:100%;
  }
  .field input:focus-visible{outline:3px solid var(--marigold);outline-offset:1px;border-color:var(--gold-deep)}
  .field.error input{border-color:#B4423A}
  .field .err{display:none;font-size:.78rem;color:#B4423A}
  .field.error .err{display:block}
  .form-card .btn{justify-self:start}
  .result{margin-top:32px}
  .result-card{
    background:var(--card);border:1px solid var(--line);border-left:4px solid var(--marigold);
    border-radius:10px;padding:26px 28px;
  }
  .result-card .badge{
    display:inline-block;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
    background:var(--gold-wash);color:var(--gold-deep);border-radius:99px;padding:.35em 1em;margin-bottom:14px;
  }
  .result-card h2{font-size:1.4rem;margin:0 0 6px}
  .result-card .sub{color:var(--ink-soft);margin:0 0 18px;font-size:.95rem}
  .result-rows{display:grid;gap:9px;font-size:.93rem}
  .result-rows div{display:flex;justify-content:space-between;gap:18px;border-bottom:1px dashed var(--line);padding-bottom:9px}
  .result-rows div:last-child{border-bottom:0}
  .result-rows dt{color:var(--moss)}
  .result-rows dd{margin:0;font-variant-numeric:tabular-nums;text-align:right}
  .result-help{margin-top:20px;font-size:.85rem;color:var(--moss)}
  .result-help a{color:var(--gold-deep)}

  /* Reveal on scroll */
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
  .reveal.in{opacity:1;transform:none}
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1;transform:none;transition:none}
    .live .dot{animation:none}
    .feed li.new{animation:none}
    html{scroll-behavior:auto}
  }

  /* Responsive */
  @media (max-width: 980px){
    .hero-grid,.gcf,.donor-grid{grid-template-columns:1fr}
    .caps{grid-template-columns:1fr 1fr}
    .stats{grid-template-columns:1fr 1fr;row-gap:34px}
    .steps{grid-template-columns:1fr;gap:28px}
    .step + .step::after{display:none}
    nav.links{display:none}
  }
  @media (max-width: 620px){
    .caps{grid-template-columns:1fr}
    .quote{padding:28px 24px}
    section{padding:64px 0}
  }

/* ---------- Shared page container ---------- */
.page-main{max-width:1160px;margin:0 auto;padding:56px 28px 80px}
.page-main.page-medium{max-width:640px}
.page-main.page-narrow{max-width:460px}
/* .page-main h1 / .page-main .intro sizing defined above with the lookup styles */

/* ---------- Shared form components ----------
   .form-card = card-styled form container (grid + gap)
   .field     = label + input + error unit (defined above)
   .form-alert= server message (info/error) above a form            */
.auth-links{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.form-alert{background:var(--gold-wash);border:1px solid var(--gold-deep);color:var(--ink);border-radius:8px;padding:12px 16px;margin:0 0 18px;font-size:.95rem}

/* ---------- Pricing cards ---------- */
.price-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:28px}
.price-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:28px 26px;display:flex;flex-direction:column;gap:12px}
.price-card.featured{border-color:var(--gold-deep);box-shadow:var(--shadow)}
.price-card h2{font-family:var(--serif);font-size:1.3rem;margin:0}
.price-card .price{font-family:var(--serif);font-size:2rem;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.price-card .price small{font-family:var(--sans);font-size:.85rem;font-weight:400;color:var(--moss)}
.price-card ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.93rem;color:var(--ink-soft)}
.price-card ul li{padding-left:22px;position:relative}
.price-card ul li::before{content:"\2713";position:absolute;left:0;color:var(--gold-deep);font-weight:700}
.price-card .btn{margin-top:auto;align-self:start}
.price-notes{font-size:.85rem;color:var(--moss);max-width:52em}
@media (max-width:900px){.price-cards{grid-template-columns:1fr}}.page-main .sub{font-size:1.15rem;color:var(--ink-soft);max-width:40em;margin:0 0 44px}
.field select{font-family:var(--sans);font-size:1rem;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:6px;padding:.7em .9em;width:100%}
.field select:focus-visible{outline:3px solid var(--marigold);outline-offset:1px;border-color:var(--gold-deep)}
.page-main.page-form{max-width:860px}

/* ---------- Mobile header ---------- */
@media (max-width: 700px){
  .nav{gap:14px}
  .brand{flex-direction:column;align-items:flex-start;gap:2px}
  .brand .word{font-size:1.25rem;line-height:1.05}
  .brand .by{font-size:.55rem}
  .nav-cta{gap:8px;margin-left:auto}
  .nav-cta .btn{padding:.5em .8em;font-size:.8rem;white-space:nowrap}
  .brand .by{font-size:.5rem;letter-spacing:.08em;white-space:nowrap}
}