:root{
  --green:#0F4D3A; --green-2:#2E7D4F; --sprout:#7BC47F; --mint:#E3F3E1;
  --cream:#FFF8EE; --sky:#CFE6FA; --mist:#EEF6FD; --lock:#121A17;
  --ink:#0E1F1A; --slate:#4F5B57; --muted:#8A9490;
  --gold:#F2B632; --gold-text:#8A5A00; --gold-bg:#FDF0CF;
  --violet:#5B4BD1; --coral:#C23D2B;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Nunito",ui-rounded,system-ui,-apple-system,"Segoe UI",sans-serif;
  --measure:64ch;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--cream);font-size:17px;line-height:1.6}
img,svg{max-width:100%;display:block}
a{color:var(--green-2);text-underline-offset:3px}
a:hover{color:var(--green)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}

/* Top bar */
.bar{display:flex;align-items:center;justify-content:space-between;padding:22px 0}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:600;font-size:22px;color:var(--green);text-decoration:none}
.brand svg{width:34px;height:34px}
.bar nav{display:flex;gap:22px;font-weight:700;font-size:15px}
.bar nav a{color:var(--green);text-decoration:none}
.bar nav a:hover{text-decoration:underline}

/* Buttons & form */
.btn{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 26px;border-radius:999px;border:0;
  background:var(--green);color:var(--cream);font:800 17px/1 var(--sans);cursor:pointer;text-decoration:none;transition:transform .12s,background .2s}
.btn:hover{background:#0b3d2e;color:var(--cream)}
.btn:active{transform:scale(.98)}
.join{display:flex;gap:10px;max-width:480px;flex-wrap:wrap}
.join input[type=email]{flex:1 1 220px;height:54px;border-radius:999px;border:2px solid rgba(15,77,58,.18);padding:0 22px;
  font:600 17px var(--sans);color:var(--ink);background:#fff}
.join input[type=email]:focus{outline:none;border-color:var(--green)}
.hp{position:absolute;left:-9999px}
.note{font-size:14px;color:var(--slate);margin:12px 0 0}
.status{min-height:24px;font-weight:700;margin:12px 0 0}
.status.ok{color:var(--green-2)} .status.err{color:var(--coral)}

/* Hero */
.hero{background:linear-gradient(180deg,var(--sky) 0%,var(--mist) 70%,var(--cream) 100%);padding-bottom:80px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding-top:40px}
h1{font-family:var(--serif);font-weight:600;font-size:clamp(46px,7vw,86px);line-height:1.02;letter-spacing:-.02em;color:var(--green);margin:0}
.lede{font-size:clamp(18px,2vw,21px);color:var(--slate);max-width:34ch;margin:22px 0 32px}

/* Phone */
.phone{justify-self:center;width:300px;aspect-ratio:9/18.5;border-radius:46px;background:var(--lock);padding:14px;
  box-shadow:0 30px 60px -20px rgba(15,77,58,.45),0 0 0 2px #2a332f inset;position:relative}
.screen{height:100%;border-radius:34px;background:radial-gradient(120% 70% at 50% 0%,#1d3b31 0%,var(--lock) 60%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;color:var(--cream)}
.shield{width:78px;height:78px;border-radius:24px;background:rgba(123,196,127,.14);display:grid;place-items:center;margin-bottom:22px}
.shield svg{width:40px;height:40px}
.screen h2{font-family:var(--serif);font-weight:600;font-size:26px;line-height:1.15;margin:0 0 8px}
.screen p{font-size:15px;color:#b9c4bf;margin:0 0 26px}
.ring{position:relative;width:132px;height:132px;margin:0 auto 22px}
.ring svg{width:132px;height:132px;transform:rotate(-90deg)}
.ring .count{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);font-size:34px;font-weight:600}
.ring .count small{display:block;font:700 12px var(--sans);color:#b9c4bf;margin-top:-6px}
.pill{background:var(--sprout);color:var(--lock);border-radius:999px;padding:14px 22px;font-weight:800;font-size:15px;width:100%}
.arc{stroke-dasharray:377;stroke-dashoffset:377;animation:fill 2.6s cubic-bezier(.2,0,0,1) .4s forwards}
@keyframes fill{to{stroke-dashoffset:75}}
@media (prefers-reduced-motion:reduce){.arc{animation:none;stroke-dashoffset:75}}

/* Loop */
.section{padding:96px 0}
h2.title{font-family:var(--serif);font-weight:600;font-size:clamp(32px,4.4vw,52px);line-height:1.08;color:var(--green);margin:0 0 14px;max-width:18ch}
.sub{color:var(--slate);max-width:52ch;margin:0 0 48px;font-size:19px}
.loop{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:s;position:relative}
.loop li{counter-increment:s;padding:0 18px 0 0;position:relative}
.loop li::before{content:counter(s);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--green);color:var(--cream);font:600 20px var(--serif);margin-bottom:18px;position:relative;z-index:1}
.loop li::after{content:"";position:absolute;top:21px;left:44px;right:0;height:2px;background:rgba(15,77,58,.15)}
.loop li:last-child::after{display:none}
.loop h3{font:800 18px/1.3 var(--sans);margin:0 0 6px;color:var(--ink)}
.loop p{margin:0;color:var(--slate);font-size:15.5px}
.loop li:nth-child(3)::before{background:var(--gold);color:var(--lock)}

/* Rules band */
.band{background:var(--green);color:var(--cream)}
.band h2.title{color:var(--cream)}
.band .sub{color:#c9ddd3}
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.rules div{border-top:2px solid rgba(255,248,238,.25);padding-top:18px}
.rules strong{display:block;font-family:var(--serif);font-weight:600;font-size:24px;margin-bottom:6px;color:#fff}
.rules p{margin:0;color:#c9ddd3}

/* Privacy promise */
.promise{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.promise ul{list-style:none;margin:0;padding:0}
.promise li{padding:18px 0;border-bottom:1px solid rgba(15,77,58,.12)}
.promise li b{display:block;color:var(--green);font-size:18px}
.promise li span{color:var(--slate)}

/* Join */
.cta{background:var(--sky);border-radius:40px;padding:64px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.cta h2.title{margin:0}

/* Footer */
footer{padding:48px 0 60px;color:var(--slate);font-size:15px}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid rgba(15,77,58,.12);padding-top:28px}
footer nav{display:flex;gap:20px;flex-wrap:wrap}

/* Document pages */
.doc{padding:32px 0 80px}
.doc article{max-width:var(--measure)}
.doc h1{font-size:clamp(40px,6vw,64px);margin:12px 0 8px}
.doc .meta{color:var(--muted);margin:0 0 36px}
.doc h2{font-family:var(--serif);font-weight:600;color:var(--green);font-size:27px;margin:44px 0 10px;line-height:1.2}
.doc h3{font-size:18px;margin:26px 0 6px}
.doc p,.doc li{color:#27352f}
.doc ul{padding-left:22px}
.doc li{margin:6px 0}
.doc .callout{background:var(--mint);border-radius:20px;padding:20px 24px;margin:24px 0}
.doc table{border-collapse:collapse;width:100%;font-size:15.5px;margin:16px 0}
.doc th,.doc td{text-align:left;padding:10px 12px;border-bottom:1px solid rgba(15,77,58,.14);vertical-align:top}
.doc th{color:var(--green)}
.tablewrap{overflow-x:auto}
details{border-bottom:1px solid rgba(15,77,58,.14);padding:4px 0}
summary{cursor:pointer;font-weight:800;font-size:18px;padding:14px 0;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:600 24px/1 var(--serif);color:var(--green)}
details[open] summary::after{content:"–"}
details p{margin:0 0 16px}

@media (max-width:900px){
  .hero-grid,.promise,.cta{grid-template-columns:1fr}
  .phone{width:260px}
  .loop{grid-template-columns:1fr;gap:28px}
  .loop li{padding:0 0 0 64px}
  .loop li::before{position:absolute;left:0;top:0;margin:0}
  .loop li::after{top:44px;bottom:-28px;left:21px;right:auto;width:2px;height:auto}
  .rules{grid-template-columns:1fr;gap:28px}
  .cta{padding:40px 28px;border-radius:32px}
  .bar nav{gap:16px;font-size:14px}
  .section{padding:72px 0}
}