/* ============================================================
     GREEN LIFE SCHOOL — brand tokens extracted from the live
     greenlifeguardian.com (Wix) on 2026-06-23.
     Forest green #002A1A headings · #004D30 accent buttons ·
     #43311F earth secondary · #C9A227 gold · white on cream.
     ============================================================ */
  :root{
    --forest:#002A1A;        /* deep forest — headings, dark sections */
    --green:#004D30;         /* accent / buttons / links */
    --green-700:#013D26;     /* button hover */
    --earth:#43311F;         /* secondary body ink / warm brown */
    --gold:#C9A227;          /* gold accent (toned from Wix #FFD700 for AA on cream) */
    --gold-soft:#E7D9A8;
    --cream:#F6F3EA;        /* page background warmth */
    --paper:#FFFFFF;
    --ink:#1A211C;           /* default body text */
    --muted:#5C6660;         /* secondary text */
    --line:#E4E0D2;          /* hairlines on cream */
    --line-dk:rgba(255,255,255,.14);
    --shadow:0 10px 30px rgba(0,42,26,.10);
    --shadow-sm:0 4px 14px rgba(0,42,26,.08);
    --r:16px;                /* card radius */
    --r-btn:14px;            /* button radius (matches Wix ~14px) */
    --maxw:1160px;
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    color:var(--ink);
    background:var(--cream);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4,h5{
    font-family:"Archivo","Inter",system-ui,sans-serif;
    color:var(--forest);
    font-weight:800;
    line-height:1.05;
    letter-spacing:-.01em;
    margin:0 0 .4em;
  }
  h1{font-size:clamp(2.4rem,5.2vw,4rem)}
  h2{font-size:clamp(1.8rem,3.6vw,2.9rem)}
  h3{font-size:clamp(1.15rem,1.8vw,1.45rem)}
  p{margin:0 0 1rem}
  a{color:var(--green);text-decoration:none}
  a:hover{text-decoration:underline}
  img{max-width:100%;display:block}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  .eyebrow{
    font-family:"Archivo",sans-serif;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;font-size:.74rem;color:var(--green);margin:0 0 .9rem;
  }
  .lead{font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--earth);max-width:46ch}

  /* ---------- Buttons (match Wix: solid forest-green, ~14px radius) ---------- */
  .btn{
    display:inline-flex;align-items:center;gap:.5rem;
    font-family:"Archivo",sans-serif;font-weight:700;font-size:.95rem;
    letter-spacing:.02em;
    padding:16px 30px;border-radius:var(--r-btn);
    background:var(--green);color:#fff;border:2px solid var(--green);
    cursor:pointer;transition:transform .15s ease,background .15s ease,box-shadow .15s ease;
    box-shadow:var(--shadow-sm);
  }
  .btn:hover{background:var(--green-700);border-color:var(--green-700);text-decoration:none;transform:translateY(-1px)}
  .btn.ghost{background:transparent;color:var(--forest);border-color:rgba(0,42,26,.22);box-shadow:none}
  .btn.ghost:hover{background:rgba(0,77,48,.06);border-color:var(--green)}
  .btn.on-dark{border-color:rgba(255,255,255,.35)}
  .btn.gold{background:var(--gold);border-color:var(--gold);color:var(--forest)}
  .btn.gold:hover{background:#b8911f;border-color:#b8911f}
  .btn.lg{padding:18px 38px;font-size:1.02rem}

  /* ---------- Top nav ---------- */
  header.nav{
    position:sticky;top:0;z-index:50;
    background:rgba(246,243,234,.86);backdrop-filter:saturate(140%) blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;height:84px}
  .brand{display:flex;align-items:center;gap:12px;font-family:"Archivo",sans-serif;font-weight:800;
    color:var(--forest);font-size:1.18rem;letter-spacing:-.01em}
  .brand{gap:0}
  .brand .logo{display:block;height:52px;width:auto}          /* nav logo (stacked lockup) */
  .foot-brand .brand{display:inline-flex;background:#f6f3ea;padding:12px 16px;border-radius:14px;box-shadow:var(--shadow-sm)}
  .foot-brand .brand .logo{height:58px}                        /* footer: on a light chip so dark-green lockup stays legible */
  @media(max-width:560px){ .brand .logo{height:34px} }
  .brand small{display:block;font-weight:600;font-size:.66rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--green);margin-top:1px;font-family:"Archivo",sans-serif}
  nav.links{display:flex;align-items:center;gap:26px}
  nav.links a{color:var(--earth);font-weight:600;font-size:.94rem}
  nav.links a:hover{color:var(--forest);text-decoration:none}
  .nav-cta{display:flex;align-items:center;gap:12px}
  .nav-toggle{display:none;background:none;border:0;cursor:pointer;color:var(--forest)}
  @media(max-width:860px){
    nav.links{display:none}
    .nav-toggle{display:grid;place-items:center}
    .nav-cta .btn.ghost{display:none}
  }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;overflow:hidden;
    background:
      radial-gradient(1100px 500px at 78% -10%,rgba(0,77,48,.55),transparent 60%),
      radial-gradient(900px 600px at 8% 110%,rgba(10,106,67,.45),transparent 55%),
      linear-gradient(160deg,#06291b 0%,var(--forest) 55%,#031b12 100%);
    color:#fff;
  }
  .hero .wrap{padding-top:84px;padding-bottom:92px;position:relative;z-index:2}
  .hero h1{color:#fff;max-width:16ch}
  .hero .lead{color:rgba(255,255,255,.86);max-width:52ch;margin-bottom:2rem}
  .hero .eyebrow{color:var(--gold-soft)}
  .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:2.4rem}
  .hero-foot{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;
    color:rgba(255,255,255,.7);font-size:.9rem;font-weight:500}
  .hero-foot b{color:#fff;font-weight:700}
  .leaf-field{position:absolute;inset:0;z-index:1;opacity:.5;pointer-events:none}

  /* ---------- Generic section ---------- */
  section.block{padding:84px 0}
  section.tint{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .section-head{max-width:60ch;margin:0 auto 48px;text-align:center}
  .section-head.left{margin-left:0;text-align:left}
  .section-head p{color:var(--muted)}

  /* ---------- Login / My Library spotlight ---------- */
  .spotlight{
    display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;
    background:linear-gradient(155deg,#06291b,var(--forest));
    color:#fff;border-radius:24px;padding:46px;box-shadow:var(--shadow);
  }
  .spotlight h2{color:#fff}
  .spotlight .lead{color:rgba(255,255,255,.85)}
  .login-card{
    background:var(--paper);color:var(--ink);border-radius:18px;padding:30px;
    box-shadow:0 20px 50px rgba(0,0,0,.28);
  }
  .login-card h3{color:var(--forest);margin-bottom:.3rem}
  .login-card .field{margin:14px 0}
  .login-card label{display:block;font-weight:600;font-size:.82rem;color:var(--earth);margin-bottom:6px}
  .login-card input{
    width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:11px;
    font-size:1rem;font-family:inherit;background:#fcfbf7;
  }
  .login-card input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(0,77,48,.12)}
  .login-card .btn{width:100%;justify-content:center;margin-top:6px}
  .login-card .row{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;margin-top:14px}
  .login-card .muted{color:var(--muted)}

  /* ---------- Cards grid ---------- */
  .grid{display:grid;gap:24px}
  .grid.c3{grid-template-columns:repeat(3,1fr)}
  .grid.c4{grid-template-columns:repeat(4,1fr)}
  .card{
    background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
    padding:30px;box-shadow:var(--shadow-sm);transition:transform .16s ease,box-shadow .16s ease;
  }
  .card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
  .card .ic{
    width:50px;height:50px;border-radius:13px;display:grid;place-items:center;margin-bottom:18px;
    background:rgba(0,77,48,.10);color:var(--green);
  }
  .card .ic svg{width:26px;height:26px}
  .card h3{margin-bottom:.4rem}
  .card p{color:var(--muted);font-size:.96rem;margin:0}

  /* ---------- Daily rhythm timeline ---------- */
  .rhythm{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .slot{
    background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--green);
    border-radius:12px;padding:18px 20px;
  }
  .slot .t{font-family:"Archivo",sans-serif;font-weight:800;color:var(--green);font-size:.82rem;letter-spacing:.04em}
  .slot h4{margin:.2rem 0 .2rem;color:var(--forest);font-family:"Archivo",sans-serif;font-size:1.05rem}
  .slot p{margin:0;color:var(--muted);font-size:.9rem}

  /* ---------- Steps ---------- */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:s}
  .step{position:relative;padding-left:8px}
  .step .n{
    font-family:"Archivo",sans-serif;font-weight:900;font-size:2.2rem;color:var(--gold);
    line-height:1;margin-bottom:.4rem;
  }
  .step h3{font-size:1.2rem;margin-bottom:.3rem}
  .step p{color:var(--muted);margin:0}

  /* ---------- CTA band ---------- */
  .cta-band{
    background:
      radial-gradient(800px 400px at 90% 0,rgba(201,162,39,.18),transparent 60%),
      linear-gradient(150deg,#06291b,var(--forest));
    color:#fff;border-radius:24px;padding:54px;text-align:center;box-shadow:var(--shadow);
  }
  .cta-band h2{color:#fff}
  .cta-band p{color:rgba(255,255,255,.85);max-width:50ch;margin:0 auto 1.8rem}

  /* ---------- Footer ---------- */
  footer.site{background:var(--forest);color:rgba(255,255,255,.78);padding:60px 0 34px}
  footer.site a{color:rgba(255,255,255,.78)}
  footer.site a:hover{color:#fff}
  .foot-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:32px;margin-bottom:36px}
  .foot-grid h5{color:#fff;font-family:"Archivo",sans-serif;font-size:.8rem;letter-spacing:.12em;
    text-transform:uppercase;margin:0 0 14px}
  .foot-grid ul{list-style:none;margin:0;padding:0}
  .foot-grid li{margin:9px 0;font-size:.92rem}
  .foot-brand .brand{color:#fff}
  .foot-brand .brand small{color:var(--gold-soft)}
  .foot-brand p{font-size:.9rem;color:rgba(255,255,255,.6);max-width:32ch;margin-top:14px}
  .foot-bot{border-top:1px solid var(--line-dk);padding-top:22px;display:flex;
    justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.84rem;color:rgba(255,255,255,.55)}

  /* ---------- Responsive ---------- */
  @media(max-width:900px){
    .spotlight{grid-template-columns:1fr;padding:32px}
    .grid.c3,.grid.c4,.rhythm,.steps{grid-template-columns:1fr 1fr}
    .foot-grid{grid-template-columns:1fr 1fr}
  }
  @media(max-width:560px){
    .grid.c3,.grid.c4,.rhythm,.steps,.foot-grid{grid-template-columns:1fr}
    .hero .wrap{padding-top:60px;padding-bottom:64px}
    section.block{padding:60px 0}
    .cta-band,.spotlight{padding:30px 22px}
  }
  @media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

  /* ===== Inner-page shared helpers ===== */
  .page-hero{
    background:radial-gradient(900px 420px at 82% -20%,rgba(0,77,48,.5),transparent 60%),
      linear-gradient(160deg,#06291b 0%,var(--forest) 60%,#031b12 100%);
    color:#fff;padding:70px 0 64px;
  }
  .page-hero h1{color:#fff;max-width:18ch}
  .page-hero .lead{color:rgba(255,255,255,.86);max-width:56ch}
  .page-hero .eyebrow{color:var(--gold-soft)}
  .crumbs{font-size:.85rem;color:rgba(255,255,255,.6);margin-bottom:1rem;font-weight:600}
  .crumbs a{color:rgba(255,255,255,.75)}
  .prose{max-width:70ch}
  .prose h2{margin-top:2.2rem}
  .prose h3{margin-top:1.6rem}
  .prose ul{padding-left:1.1rem}
  .prose li{margin:.4rem 0;color:var(--earth)}
  .two-col{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
  .panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:30px;box-shadow:var(--shadow-sm)}
  .pill{display:inline-block;background:rgba(0,77,48,.10);color:var(--green);font-family:"Archivo",sans-serif;
    font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:999px;margin-bottom:14px}
  table.rhythm-tbl{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line);
    border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)}
  table.rhythm-tbl th,table.rhythm-tbl td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
  table.rhythm-tbl th{background:rgba(0,42,26,.04);font-family:"Archivo",sans-serif;color:var(--forest);font-size:.85rem;letter-spacing:.04em}
  table.rhythm-tbl td:first-child{font-family:"Archivo",sans-serif;font-weight:800;color:var(--green);white-space:nowrap}
  table.rhythm-tbl tr:last-child td{border-bottom:0}
  details.faq{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:4px 20px;margin:12px 0;box-shadow:var(--shadow-sm)}
  details.faq summary{cursor:pointer;font-family:"Archivo",sans-serif;font-weight:700;color:var(--forest);padding:16px 0;list-style:none}
  details.faq summary::-webkit-details-marker{display:none}
  details.faq summary::after{content:"+";float:right;color:var(--green);font-size:1.3rem;line-height:1}
  details.faq[open] summary::after{content:"–"}
  details.faq p{color:var(--muted);padding-bottom:16px;margin:0}
  .lib-row{display:flex;align-items:center;gap:18px;background:var(--paper);border:1px solid var(--line);
    border-radius:14px;padding:18px 20px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
  .lib-row .thumb{width:54px;height:54px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center;
    background:rgba(0,77,48,.10);color:var(--green)}
  .lib-row .meta{flex:1}
  .lib-row .meta b{color:var(--forest);font-family:"Archivo",sans-serif}
  .lib-row .meta span{display:block;color:var(--muted);font-size:.88rem}
  @media(max-width:760px){.two-col{grid-template-columns:1fr}}


  /* ===== Light-green hero variant (About page) — matches the green call-out boxes ===== */
  .page-hero.lightgreen{
    background:linear-gradient(165deg,#dff0e2 0%,#cfe7d4 55%,#bfdcc6 100%);
    color:var(--forest);
  }
  .page-hero.lightgreen h1{color:var(--forest)}
  .page-hero.lightgreen .lead{color:var(--earth)}
  .page-hero.lightgreen .eyebrow{color:var(--green)}
  .page-hero.lightgreen .crumbs{color:rgba(0,42,26,.55)}
  .page-hero.lightgreen .crumbs a{color:var(--green)}

  /* ===== Stat / engagement callout ===== */
  .statbar{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:30px 0}
  .statbar .stat{background:var(--green);color:#fff;border-radius:var(--r);padding:26px;text-align:center}
  .statbar .stat .big{font-family:"Archivo",sans-serif;font-weight:900;font-size:2.4rem;line-height:1;color:var(--gold-soft)}
  .statbar .stat .lbl{font-size:.92rem;color:rgba(255,255,255,.85);margin-top:8px}
  .callout-green{background:var(--green);color:#fff;border-radius:24px;padding:40px;box-shadow:var(--shadow)}
  .callout-green h2{color:#fff}
  .callout-green p{color:rgba(255,255,255,.88)}

  /* ===== Arc cards ===== */
  .arc{background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--green);border-radius:14px;padding:24px;margin-bottom:16px}
  .arc h3{margin:0 0 .3rem;color:var(--forest)}
  .arc .tag{display:inline-block;font-family:"Archivo",sans-serif;font-weight:700;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green);background:rgba(0,77,48,.10);padding:4px 10px;border-radius:999px;margin-bottom:10px}
  .arc.soon{border-left-color:var(--gold);opacity:.92}
  .arc.soon .tag{color:#8a6d12;background:rgba(201,162,39,.16)}

  /* ===== Login chooser + tabs ===== */
  .login-wrap{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:880px;margin:0 auto}
  .login-choose{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:34px;text-align:center;box-shadow:var(--shadow-sm);transition:transform .16s ease,box-shadow .16s ease}
  .login-choose:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
  .login-choose .big-ic{width:64px;height:64px;border-radius:16px;margin:0 auto 18px;display:grid;place-items:center;background:rgba(0,77,48,.10);color:var(--green)}
  .login-choose .big-ic svg{width:34px;height:34px}
  @media(max-width:680px){.login-wrap{grid-template-columns:1fr}}
  .auth-card{max-width:440px;margin:0 auto;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:34px;box-shadow:var(--shadow)}
  .auth-card h2{margin-top:0}
  .role-switch{display:flex;gap:8px;background:rgba(0,42,26,.05);border-radius:12px;padding:5px;margin-bottom:22px}
  .role-switch a{flex:1;text-align:center;padding:10px;border-radius:9px;font-family:"Archivo",sans-serif;font-weight:700;font-size:.9rem;color:var(--earth)}
  .role-switch a.active{background:var(--green);color:#fff;text-decoration:none}

  /* ===== Waitlist counter ===== */
  .counter-card{background:linear-gradient(155deg,#06291b,var(--forest));color:#fff;border-radius:24px;padding:44px;text-align:center;box-shadow:var(--shadow)}
  .counter-card h2{color:#fff}
  .counter-num{font-family:"Archivo",sans-serif;font-weight:900;font-size:clamp(3rem,8vw,5.5rem);line-height:1;color:var(--gold-soft);letter-spacing:-.02em;margin:10px 0}
  .counter-card .sub{color:rgba(255,255,255,.8)}
  .wait-form{display:flex;gap:10px;max-width:480px;margin:26px auto 0;flex-wrap:wrap}
  .wait-form input{flex:1;min-width:200px;padding:14px 16px;border-radius:12px;border:1.5px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font-size:1rem;font-family:inherit}
  .wait-form input::placeholder{color:rgba(255,255,255,.6)}
  .wait-form input:focus{outline:none;border-color:var(--gold-soft);background:rgba(255,255,255,.14)}

  /* ===== Dashboard preview ===== */
  .dash-shell{background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
  .dash-top{background:var(--forest);color:#fff;padding:14px 20px;display:flex;align-items:center;gap:10px;font-family:"Archivo",sans-serif;font-weight:700}
  .dash-dots{display:flex;gap:6px;margin-right:8px}
  .dash-dots span{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.3)}
  .dash-body{padding:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;background:#eef4f0}
  .dash-tile{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--shadow-sm)}
  .dash-tile .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:rgba(0,77,48,.10);color:var(--green);margin-bottom:14px}
  .dash-tile h4{margin:0 0 .3rem;color:var(--forest);font-family:"Archivo",sans-serif}
  .dash-tile p{margin:0;color:var(--muted);font-size:.88rem}
  .dash-tile .climb{height:7px;border-radius:4px;background:rgba(0,77,48,.12);margin-top:14px;overflow:hidden}
  .dash-tile .climb i{display:block;height:100%;background:var(--green);border-radius:4px}
  @media(max-width:760px){.dash-body{grid-template-columns:1fr}}

  /* ===== Hero color variants (added 2026-06-23 round 2) ===== */
  /* Index: a medium light-green — lighter than the dark forest, deeper than About's pale green.
     Keeps white text for contrast. */
  .hero.midgreen{
    /* original dark-forest, nudged just slightly lighter */
    background:
      radial-gradient(1100px 500px at 78% -10%,rgba(0,77,48,.55),transparent 60%),
      radial-gradient(900px 600px at 8% 110%,rgba(10,106,67,.45),transparent 55%),
      linear-gradient(160deg,#0a3a26 0%,#063826 55%,#04261a 100%);
  }
  /* About: golden tone (warm cream→gold), dark forest ink for contrast (AA). */
  /* About hero reverted to green (same as the other page heroes) */
  .page-hero.gold{ /* class kept for stability; now green, not gold */
    background:radial-gradient(900px 420px at 82% -20%,rgba(0,77,48,.5),transparent 60%),
      linear-gradient(160deg,#06291b 0%,var(--forest) 60%,#031b12 100%);
    color:#fff;
  }
  .page-hero.gold h1{color:#fff}
  .page-hero.gold .lead{color:rgba(255,255,255,.86)}
  .page-hero.gold .eyebrow{color:var(--gold-soft)}

  /* ===== Bigger brand wordmark, no tagline ===== */

  /* ============================================================
     WHITE / GUARDIAN-STYLE REDESIGN (2026-06-23 round 3)
     Mimic greenlifeguardian.com: white-dominant, airy, big
     forest-green headline, generous whitespace, lighter sections.
     ============================================================ */
  body{background:#ffffff}                      /* page is white, not cream */
  .nav{background:rgba(255,255,255,.9)!important;border-bottom:1px solid #eef0ec}

  /* Bigger, confident logo like Guardian's top-left (≈2× — doubled per request) */
  .brand .logo{height:120px!important}
  .nav-inner{height:136px!important}
  .foot-brand .brand .logo{height:64px!important}
  @media(max-width:560px){ .brand .logo{height:76px!important} .nav-inner{height:96px!important} }

  /* WHITE HERO — clean type, no dark slab, no photo */
  .hero.white{
    background:#ffffff!important;color:var(--forest);overflow:visible;
  }
  .hero.white .wrap{padding-top:96px;padding-bottom:80px}
  .hero.white .eyebrow{color:var(--green)}
  .hero.white h1{
    color:var(--forest);max-width:18ch;
    font-size:clamp(2.8rem,6.4vw,5.2rem);line-height:1.02;letter-spacing:-.02em;
  }
  .hero.white .lead{color:var(--earth);max-width:60ch;font-size:clamp(1.1rem,1.6vw,1.35rem)}
  .hero.white .hero-foot{color:var(--muted)}
  .hero.white .hero-foot b{color:var(--forest)}
  .hero.white .btn.lg.gold{background:var(--green);border-color:var(--green);color:#fff}      /* primary = solid green like Guardian's button */
  .hero.white .btn.lg.gold:hover{background:var(--green-700);border-color:var(--green-700)}
  .hero.white .btn.on-dark.ghost{color:var(--forest)!important;border-color:rgba(0,42,26,.22)}
  .hero.white .btn.on-dark.ghost:hover{background:rgba(0,77,48,.06);border-color:var(--green)}
  .hero.white .leaf-field{display:none}                                                      /* drop the leaf flourish on white */

  /* Lighter section rhythm: white default, faint-green tint for alternating bands */
  section.block{background:#ffffff}
  section.tint{background:#f5f8f4!important;border-color:#e8efe7!important}                   /* very soft green wash, not paper */
  .card{background:#ffffff;border-color:#e9ece7}
  .section-head h2{color:var(--forest)}

  /* Soften the login spotlight: was a heavy dark slab → lighter framed card */
  .spotlight{
    background:#f5f8f4!important;color:var(--ink)!important;
    border:1px solid #e3ebe2;box-shadow:var(--shadow-sm)!important;
  }
  .spotlight h2{color:var(--forest)!important}
  .spotlight .lead{color:var(--earth)!important}
  .spotlight .eyebrow{color:var(--green)!important}
  .spotlight p[style*="rgba(255,255,255"]{color:var(--muted)!important}
  .spotlight a[style*="gold-soft"]{color:var(--green)!important}
  .login-card{box-shadow:var(--shadow)!important}

  /* CTA band: keep ONE green moment near the bottom (Guardian-style accent), but lighter */
  .cta-band{background:linear-gradient(150deg,#0a3a26,var(--forest))!important}