:root{
  --bg:#F5F2EA; --surface:#FFFFFF; --ink:#1F2A24; --muted:#5E635C; --line:#DDD8CC;
  --green:#2C5A3F; --green-dark:#1F4330; --sage:#DCE6DD; --rust:#C0462D; --rust-dark:#A23A24; --blush:#F9E3DC;
  --serif:'Newsreader','Georgia',serif; --sans:'Lato','Helvetica Neue',Arial,sans-serif;
  --text-xs:clamp(.75rem,.72rem + .15vw,.8125rem);
  --text-sm:clamp(.875rem,.85rem + .12vw,.9375rem);
  --text-base:clamp(1rem,.97rem + .15vw,1.0625rem);
  --text-lg:clamp(1.125rem,1.05rem + .35vw,1.3125rem);
  --text-xl:clamp(1.75rem,1.4rem + 1.4vw,2.5rem);
  --text-hero:clamp(2.6rem,1.6rem + 4vw,4.6rem);
  --r:14px; --pad:clamp(4rem,9vw,7.5rem);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:var(--sans);font-size:var(--text-base);line-height:1.6;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
img,svg{display:block}
a{color:inherit}
ul,ol{list-style:none}
.wrap{width:min(1160px,100% - 2.5rem);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.5rem 1rem;z-index:100}
.skip:focus{left:1rem}
:focus-visible{outline:3px solid var(--rust);outline-offset:3px;border-radius:6px}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.site-header.scrolled{border-color:var(--line)}
.header-inner{display:flex;align-items:center;gap:2rem;height:68px}
.wordmark{font-family:var(--serif);font-weight:600;font-size:1.45rem;letter-spacing:-.01em;text-decoration:none;color:var(--green)}
.wordmark span{color:var(--rust);font-family:var(--sans);font-weight:900;font-size:.8em;letter-spacing:.04em;margin-left:1px}
.wordmark.light{color:#fff}
nav{margin-left:auto}
.nav-links{display:flex;gap:1.75rem}
.nav-links a{font-size:var(--text-sm);text-decoration:none;color:var(--muted);font-weight:700}
.nav-links a:hover{color:var(--ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--sans);font-weight:700;font-size:var(--text-sm);text-decoration:none;padding:.85rem 1.35rem;border-radius:999px;border:1.5px solid transparent;transition:background .18s,color .18s,border-color .18s,transform .18s;cursor:pointer;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-dark)}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-wa{background:var(--rust);color:#fff}
.btn-wa:hover{background:var(--rust-dark)}
.btn-sm{padding:.55rem 1.05rem}

/* type */
.eyebrow{font-size:var(--text-xs);font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:1rem}
h1,.section-title,blockquote p{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;line-height:1.08;color:var(--ink)}
h1{font-size:var(--text-hero);max-width:13ch}
.section-title{font-size:var(--text-xl);max-width:22ch;margin-bottom:1.25rem}
.center{text-align:center;margin-inline:auto}
h3{font-size:var(--text-lg);line-height:1.3}
h4{font-size:var(--text-base)}
.lead{font-size:var(--text-lg);color:var(--muted);max-width:46ch;margin-top:1.5rem;line-height:1.55}
.meta{font-size:var(--text-xs);color:var(--muted);margin-top:1.1rem}

/* hero */
.hero{padding:clamp(3rem,7vw,6rem) 0 clamp(4rem,8vw,6.5rem)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.hero-visual{position:relative;justify-self:center;width:min(100%,380px)}
.doc{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:2rem 2rem 2.2rem;box-shadow:0 30px 60px -30px rgba(31,42,36,.35);transform:rotate(-2deg);display:flex;flex-direction:column;gap:.7rem}
.doc-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.8rem}
.doc-title{font-weight:900;letter-spacing:.12em;color:var(--green);font-size:1.05rem;padding-top:.6rem}
.doc-flag{width:38px;height:54px}
.ln{display:block;height:8px;border-radius:4px;background:#E7E4DC}
.ln.g{background:#C9D6CB;margin-top:.6rem}
.w40{width:40%}.w45{width:45%}.w50{width:50%}.w55{width:55%}.w60{width:60%}.w70{width:70%}.w80{width:80%}.w85{width:85%}.w90{width:90%}
.doc-sign{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.2rem;padding-top:1.1rem;border-top:1px dashed var(--line)}
.doc-sign div{display:flex;flex-direction:column;gap:.5rem}
.lbl{font-weight:900;font-size:.8rem;color:var(--green)}
.lbl.a{color:var(--rust)}
.chip{position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.5rem .95rem;font-size:var(--text-xs);font-weight:700;box-shadow:0 10px 24px -14px rgba(31,42,36,.4);display:flex;align-items:center;gap:.45rem;white-space:nowrap}
.chip b{color:var(--rust);font-size:1rem}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--green)}
.chip-1{top:18%;left:-14%}
.chip-2{bottom:9%;right:-10%;background:var(--blush);border-color:#F1CBBE}

/* flag check */
.flagcheck{background:var(--green);color:#fff;padding:clamp(3.5rem,7vw,5.5rem) 0}
.flagcheck .section-title{color:#fff}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.5rem}
.three li{border-top:1px solid rgba(255,255,255,.3);padding-top:1.25rem}
.three .num{font-family:var(--serif);font-size:2.4rem;line-height:1;color:#F0B9A6;display:block;margin-bottom:.6rem}
.three p{color:rgba(255,255,255,.8);margin-top:.25rem}
.kicker-line{text-align:center;margin-top:2.75rem;font-weight:700;color:#fff}

/* sections */
.section{padding:var(--pad) 0}
.tinted{background:#EEEADF}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.split-intro p{color:var(--muted);max-width:52ch}
.extras{margin:1.75rem 0 2rem;display:grid;gap:.9rem}
.extras li{padding-left:1.1rem;border-left:3px solid var(--sage);color:var(--muted)}
.extras b{color:var(--ink)}
.sections-list{counter-reset:s;display:grid;gap:.5rem}
.sections-list li{counter-increment:s;display:grid;grid-template-columns:2.2rem 1fr;column-gap:.6rem;align-items:baseline;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:.8rem 1.1rem}
.sections-list li::before{content:counter(s,decimal-leading-zero);grid-row:span 2;font-weight:900;font-size:var(--text-xs);color:var(--green);letter-spacing:.05em}
.sections-list b{font-size:var(--text-base)}
.sections-list span{font-size:var(--text-sm);color:var(--muted)}
.sections-list li.hl{background:var(--blush);border-color:#F1CBBE}
.sections-list li.hl::before,.sections-list li.hl b{color:var(--rust-dark)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:.75rem;margin-top:2.5rem}
.steps li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.25rem 1.1rem 1.4rem}
.steps .n{font-family:var(--serif);font-size:1.7rem;color:var(--green);line-height:1}
.steps h3{font-size:var(--text-base);margin:.6rem 0 .35rem}
.steps p{font-size:var(--text-sm);color:var(--muted);line-height:1.5}
.steps li.key{background:var(--green);border-color:var(--green);color:#fff}
.steps li.key .n{color:#F0B9A6}
.steps li.key p{color:rgba(255,255,255,.82)}
.sub{font-family:var(--serif);font-weight:500;font-size:clamp(1.35rem,1.2rem + .6vw,1.75rem);margin:4rem 0 1.5rem}
.gates{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.gate{padding:1.3rem 1.15rem;border-right:1px solid var(--line);position:relative}
.gate:last-child{border-right:0}
.gate .g{font-size:var(--text-xs);font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--rust)}
.gate h4{margin:.35rem 0 .3rem}
.gate p{font-size:var(--text-sm);color:var(--muted);line-height:1.45}
.ra{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:3rem}
.ra-card{display:flex;gap:1rem;background:var(--sage);border-radius:var(--r);padding:1.4rem 1.5rem}
.ra-card p{color:#3E4A42;font-size:var(--text-sm);margin-top:.25rem}
.ra-tag{flex:none;width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#fff;font-weight:900}
.ra-tag.a{background:var(--rust)}
.rule{margin-top:1.5rem;font-weight:700}
.rule::before{content:"Our rule: ";color:var(--rust)}

/* quote */
.quote-band{background:var(--ink);color:#fff;padding:clamp(4rem,9vw,7rem) 0;text-align:center}
blockquote p{color:#fff;font-size:clamp(1.9rem,1.3rem + 2.6vw,3.4rem);max-width:22ch;margin-inline:auto}
.quote-note{color:rgba(255,255,255,.72);max-width:56ch;margin:1.75rem auto 0}

/* community */
.community{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.community-copy>p{color:var(--muted);max-width:52ch}
.asks{margin:1.5rem 0 .5rem;display:grid;gap:.6rem}
.asks li{font-family:var(--serif);font-size:var(--text-lg);padding-left:1.6rem;position:relative}
.asks li::before{content:"";position:absolute;left:0;top:.62em;width:.8rem;height:2px;background:var(--rust)}
.wa-note{margin-top:1rem;font-size:var(--text-sm);background:var(--blush);color:var(--rust-dark);padding:.7rem 1rem;border-radius:10px;display:inline-block}
.wa-note[hidden]{display:none}
.community-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:2rem}
.community-card h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.3rem,1.2rem + .4vw,1.55rem)}
.community-card .mt{margin-top:2rem}
.ticks{margin-top:1rem;display:grid;gap:.85rem}
.ticks li{padding-left:2rem;position:relative;color:var(--muted);font-size:var(--text-sm)}
.ticks li b{color:var(--ink);display:block;font-size:var(--text-base)}
.ticks li::before{content:"";position:absolute;left:0;top:.2rem;width:1.25rem;height:1.25rem;border-radius:50%;border:1.5px solid var(--green);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%232C5A3F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat}
.rules{margin-top:.85rem;display:grid;gap:.5rem}
.rules li{font-size:var(--text-sm);color:var(--muted);padding-left:1rem;border-left:2px solid var(--line)}

/* footer */
.site-footer{background:var(--green-dark);color:rgba(255,255,255,.78);padding:3.5rem 0 2.5rem;font-size:var(--text-sm)}
.footer-inner{display:grid;grid-template-columns:1.2fr 1fr;gap:1.5rem 3rem}
.footer-inner p{margin-top:.6rem;max-width:52ch}
.footer-inner a:not(.wordmark){color:#fff}
.credits{font-size:var(--text-xs)}
.copy{grid-column:1/-1;font-size:var(--text-xs);border-top:1px solid rgba(255,255,255,.15);padding-top:1.25rem;margin-top:.5rem}

/* responsive */
@media (max-width:1000px){
  .steps{grid-template-columns:repeat(3,1fr)}
  .gates{grid-template-columns:1fr}
  .gate{border-right:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:5.5rem 1fr;column-gap:1rem}
  .gate:last-child{border-bottom:0}
  .gate .g{grid-row:span 2;padding-top:.15rem}
  .gate h4{margin:0}
}
@media (max-width:860px){
  .hero-grid,.split,.community,.ra,.footer-inner{grid-template-columns:1fr}
  .hero-visual{width:min(100%,320px);margin-top:1rem}
  .chip-1{left:-6%}.chip-2{right:-4%}
  .nav-links{display:none}
  .three{grid-template-columns:1fr;gap:1.5rem}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr 1fr}
  .btn{white-space:normal}
  .hero-actions .btn{width:100%;justify-content:center}
  .chip-1{left:-2%;top:12%}.chip-2{right:-2%}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* landing page context tag */
.page-tag{font-size:var(--text-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-left:1rem;margin-left:-1rem;border-left:1px solid var(--line)}
.brand-line{color:#fff;font-weight:700}
@media (max-width:860px){.page-tag{display:none}}

/* polish */
h1,.section-title,blockquote p,.sub{text-wrap:balance}
.footer-inner .copy{max-width:none}
.chip-1{top:30%}
@media (max-width:860px){
  .hero-visual{margin-top:2rem;margin-bottom:1rem}
  .chip-1{top:-1rem;left:.5rem}
  .chip-2{bottom:-1rem;right:.5rem}
}