:root{--bg:#F6F3EC;--ink:#14171F;--gold:#C9A24B;--gold2:#e2c176;--mut:#5B5F69;--line:#E3DDCB;--card:#fff;--dk:#14171F;--dk2:#1d212b;--r:16px}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-top:70px}
ol,ul{list-style:none}
ol::marker,ul::marker,ol li::marker,ul li::marker{content:'';display:none}
body{font:16px/1.65 Inter,system-ui,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}ul{list-style:none}
h1,h2,h3,.big,.logo{font-family:Fraunces,Cambria,Georgia,serif;line-height:1.15}
h1{font-size:clamp(2.2rem,6vw,4.1rem);font-weight:700}h1 em{color:var(--gold);font-style:normal}
h2{font-size:clamp(1.7rem,4vw,2.7rem);font-weight:700}h3{font-size:1.2rem}.h3{font-size:1.5rem;margin-bottom:.5rem}
.wrap{width:min(1160px,92%);margin:0 auto}.muted{color:var(--mut)}.dark .muted{color:#AEB2BC}
.lead{font-size:1.1rem;color:var(--mut);max-width:60ch;margin-top:1rem}.dark .lead,.hero .lead{color:#AEB2BC}
.eyebrow{display:inline-block;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:.9rem}
.sec{padding:clamp(3.5rem,9vw,7rem) 0}.dark{background:var(--dk);color:var(--bg)}.head{margin-bottom:2.5rem}
small{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:.3rem;font-weight:600}
/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:50;background:rgba(20,23,31,.88);backdrop-filter:blur(12px);border-bottom:1px solid #ffffff14}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{color:#fff;font-weight:700;letter-spacing:.08em}.logo span{color:var(--gold)}
nav{display:flex;gap:1.6rem;align-items:center}nav a{color:#d8d9de;font-size:.92rem}nav a:hover{color:var(--gold)}
.burger{display:none;background:none;border:0;width:40px;height:40px;cursor:pointer}.burger i{display:block;height:2px;background:#fff;margin:6px 8px;transition:.3s}
.btn{display:inline-block;background:var(--gold);color:var(--ink)!important;font-weight:600;padding:.85rem 1.7rem;border-radius:999px;border:0;cursor:pointer;font-size:1rem;transition:.25s;box-shadow:0 6px 24px #c9a24b40}
.btn:hover{background:var(--gold2);transform:translateY(-2px)}.btn-sm{padding:.5rem 1.1rem;font-size:.88rem}
.btn-ghost{background:transparent;color:#fff!important;border:1px solid #ffffff44;box-shadow:none}.btn-ghost:hover{background:#ffffff14}
/* hero */
.hero{position:relative;background:var(--dk);color:#fff;padding:9rem 0 5rem;overflow:hidden}
.glow{position:absolute;width:700px;height:700px;right:-200px;top:-200px;background:radial-gradient(circle,#c9a24b40,transparent 65%);animation:float 9s ease-in-out infinite}
@keyframes float{50%{transform:translate(-40px,40px)}}
.hero-in{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.cta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem}.cta.center{justify-content:center;margin-top:3rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}.chips li{font-size:.78rem;padding:.3rem .8rem;border:1px solid #ffffff2a;border-radius:99px;color:#AEB2BC}
.brief{background:linear-gradient(160deg,#1f2430,#171a22);border:1px solid #ffffff1c;border-radius:20px;padding:1.5rem;box-shadow:0 30px 80px #0008}
.brief-top{display:flex;align-items:center;gap:.6rem;font-size:.85rem;color:#AEB2BC;margin-bottom:1rem}.brief-top em{margin-left:auto;font-size:.7rem;color:var(--gold)}
.dot{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 0 #4ade80aa;animation:pulse 2s infinite}@keyframes pulse{70%{box-shadow:0 0 0 10px #0000}}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}.kpis div{background:#ffffff0a;border-radius:12px;padding:.8rem}.kpis b{font-size:1.6rem;font-family:Fraunces,serif;color:#fff}
.insight{margin-top:1rem;background:#ffffff08;border-left:3px solid var(--gold);border-radius:12px;padding:1rem;transition:opacity .4s}.insight.fade{opacity:0}
.tag{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:600}.insight p{margin-top:.4rem}.ev{font-size:.85rem;color:#AEB2BC}
.conf{display:flex;align-items:center;gap:.6rem;font-size:.75rem;color:#AEB2BC;margin-top:.8rem}.conf i{flex:1;height:5px;background:#ffffff1c;border-radius:9px;overflow:hidden}.conf u{display:block;height:100%;background:var(--gold);transition:width .8s}
/* cards & grids */
.grid{display:grid;gap:1.2rem}.g3{grid-template-columns:repeat(3,1fr)}.areas{margin-top:3rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;transition:.3s}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px #14171f18;border-color:var(--gold)}.card h3{margin-bottom:.4rem}.card p{color:var(--mut)}
.dark .card{background:var(--dk2);border-color:#ffffff14}.dark .card p{color:#AEB2BC}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:2rem}.compare>div{padding:1.6rem;border-radius:var(--r);border:1px dashed var(--line)}.compare .hi{background:var(--dk);color:#fff;border:0}
/* tabs */
.tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.2rem}
.tab{background:transparent;color:inherit;border:1px solid #ffffff30;padding:.55rem 1.2rem;border-radius:99px;cursor:pointer;font:inherit;font-size:.9rem;transition:.2s}
.tab:hover{border-color:var(--gold)}.tab.on{background:var(--gold);color:var(--ink);border-color:var(--gold);font-weight:600}
.panel{background:var(--dk2);border:1px solid #ffffff14;border-radius:var(--r);padding:2rem;min-height:130px}.panel p{color:#AEB2BC;margin-top:.6rem;max-width:62ch}
.split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:4rem;align-items:start}
.state-note{background:var(--dk2);padding:1.2rem;border-radius:12px;border-left:3px solid var(--gold);min-height:80px}
.profile{background:var(--dk2);border:1px solid #ffffff14;border-radius:var(--r);padding:1.5rem;color:#fff}.profile-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.pill{font-size:.72rem;padding:.25rem .7rem;border-radius:99px}.warn{background:#c9a24b2e;color:var(--gold2)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.cols li{font-size:.9rem;color:#d3d5da;padding:.25rem 0;border-bottom:1px solid #ffffff10}
.next{margin-top:1rem;background:var(--gold);color:var(--ink);border-radius:12px;padding:1rem;font-weight:500}.next small{color:#14171fb0}
/* stepper */
.stepper{display:grid;grid-template-columns:.8fr 1.2fr;gap:2rem;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:1.5rem}
.rail{display:flex;flex-direction:column;gap:.5rem}.step{display:flex;align-items:center;gap:.8rem;background:none;border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem;cursor:pointer;font:inherit;text-align:left;transition:.2s}
.step b{width:28px;height:28px;border-radius:50%;background:var(--line);display:grid;place-items:center;font-size:.85rem;flex:none}.step.on{background:var(--dk);color:#fff;border-color:var(--dk)}.step.on b{background:var(--gold);color:var(--ink)}
.step-view{display:flex;flex-direction:column;justify-content:center;padding:1rem}.big{font-size:clamp(1.3rem,3vw,1.9rem);transition:opacity .25s}.step-view .muted{margin-top:1rem}
/* roi */
.roi{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.calc{background:var(--dk2);border:1px solid #ffffff14;border-radius:20px;padding:1.8rem;display:grid;gap:1.1rem}
.calc label{display:block;font-size:.9rem;color:#d3d5da}.calc output{float:right;color:var(--gold);font-weight:600}
input[type=range]{width:100%;accent-color:var(--gold);margin-top:.4rem}
.result{border-top:1px solid #ffffff1c;padding-top:1.2rem}.result b{display:block;font:700 clamp(1.8rem,5vw,2.6rem) Fraunces,serif;color:var(--gold)}
/* roadmap */
.road{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;counter-reset:x}
.road li{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.3rem;position:relative;transition:.3s;color:var(--ink)}.road li:hover{border-color:var(--gold);transform:translateY(-5px)}
.road b{font:700 2rem Fraunces,serif;color:var(--gold)}.road h3{font-size:1.02rem;margin:.4rem 0}.road p{font-size:.88rem;color:var(--mut)}
.brain{margin-top:4rem;text-align:center}.stack{display:flex;flex-direction:column;align-items:center;gap:.4rem;margin-top:1.4rem}
.stack span{width:var(--w);background:var(--dk);color:#fff;padding:.7rem;border-radius:10px;font-size:.92rem;transition:.3s}.stack span:first-child{background:var(--gold);color:var(--ink);font-weight:600}.stack span:hover{transform:scale(1.02)}
/* contact */
.contact{display:grid;grid-template-columns:1fr 1.1fr;gap:3rem}.info{margin-top:2rem;display:grid;gap:1rem}.info a{font-size:1.05rem}.info a:hover{color:var(--gold)}
.form{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:1.8rem;display:grid;gap:1rem}
.form label{font-size:.85rem;font-weight:500;display:block}.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
input,select,textarea{width:100%;margin-top:.3rem;padding:.75rem .9rem;border:1px solid var(--line);border-radius:10px;font:inherit;background:#fbfaf6}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);border-color:transparent}.hp{position:absolute;left:-9999px}
.status{font-size:.92rem;min-height:1.4em}.status.ok{color:#15803d}.status.err{color:#b91c1c}
.foot{background:#0d0f14;color:#AEB2BC;padding:3rem 0 1.5rem}.foot-in{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}.foot a:hover{color:var(--gold)}
.copy{margin-top:2rem;padding-top:1rem;border-top:1px solid #ffffff14;font-size:.8rem}
/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--d,0ms),transform .7s var(--d,0ms)}.reveal.in{opacity:1;transform:none}
@media(max-width:960px){.hero-in,.split,.roi,.contact,.stepper{grid-template-columns:1fr}.g3{grid-template-columns:1fr 1fr}.road{grid-template-columns:1fr 1fr}.hero{padding-top:7rem}}
@media(max-width:720px){
 .burger{display:block}
 nav{position:fixed;inset:64px 0 auto;background:#14171Ffa;flex-direction:column;padding:1.5rem;gap:1.2rem;transform:translateY(-130%);transition:.35s;border-bottom:1px solid #ffffff14}
 nav.open{transform:none}.g3,.compare,.road,.row2,.cols{grid-template-columns:1fr}.stack span{width:100%!important}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
/* ---------- shared additions ---------- */
.g4{grid-template-columns:repeat(4,1fr)}.tagp{display:inline-block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;background:#c9a24b26;color:#8a6a1c;padding:.2rem .7rem;border-radius:99px;margin-bottom:.8rem;font-weight:600}
.brand{display:block}.brand .go{display:inline-block;margin-top:1rem;font-weight:600;color:var(--ink)}.brand:hover .go{color:var(--gold)}
.fly{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.5rem;counter-reset:f}
.fly li{counter-increment:f;background:var(--dk);color:#fff;border-radius:var(--r);padding:1.2rem;font-size:.95rem;position:relative}.fly li:before{content:counter(f);display:block;font:700 1.6rem Fraunces,serif;color:var(--gold)}
.chips.big li{font-size:.95rem;padding:.5rem 1.2rem;color:#fff}
/* ---------- NIFU App theme (green #00674F, gold #FFD700) ---------- */
:root{--bg:#F3F8F5;--ink:#0b1f19;--gold:#FFD700;--gold2:#ffe44d;--green:#00674F;--dk:#00674F;--dk2:#087a60;--line:#d8e6df;--mut:#4d6259}
.nav{background:rgba(0,90,70,.92)}.hero{background:linear-gradient(155deg,#00674F,#004736)}.glow{background:radial-gradient(circle,#ffd70055,transparent 65%)}
.eyebrow,small{color:var(--green)}.dark .eyebrow,.dark small,.hero .eyebrow{color:var(--gold)}
.lead{color:var(--mut)}.dark .lead,.hero .lead,.dark .muted{color:#cfe8df}.foot{background:#003327}.card h3{color:var(--green)}
.chips li{color:#cfe8df;border-color:#ffffff44}
.five{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}.five .card b{font:700 2rem Fraunces,serif;color:var(--gold);background:var(--green);width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:.8rem}
.phone{width:min(290px,100%);margin:0 auto;background:#0b1f19;border-radius:38px;padding:10px;box-shadow:0 30px 80px #0008,0 0 0 2px #ffffff22;transform:rotate(-2deg);transition:transform .4s,opacity .7s}
.phone:hover{transform:none}.screen{background:#F3F8F5;color:#0b1f19;border-radius:30px;height:520px;overflow:hidden;position:relative}
.scr{position:absolute;inset:0;padding:1.4rem 1rem 4.5rem;opacity:0;transform:translateY(12px);transition:.35s;pointer-events:none}.scr.on{opacity:1;transform:none;pointer-events:auto}
.hi{font-size:.85rem;color:#4d6259;margin-bottom:.6rem}.sub{font-weight:600;font-size:.85rem;margin:1rem 0 .5rem}
.pcard{background:#00674F;color:#fff;border-radius:18px;padding:1rem;position:relative;overflow:hidden}.pcard:after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:#FFD70033}
.pcard small{color:#FFD700!important}.pcard b{display:block;font:700 2rem Fraunces,serif}.pcard span{font-size:.8rem;color:#cfe8df}
.mrow{display:flex;gap:.7rem;align-items:center;background:#fff;border:1px solid #d8e6df;border-radius:14px;padding:.6rem .7rem;margin-bottom:.5rem}
.mrow i{width:34px;height:34px;border-radius:10px;background:#00674F;color:#FFD700;display:grid;place-items:center;font-style:normal;font-weight:700;flex:none}
.mrow b{display:block;font-size:.85rem}.mrow span{font-size:.75rem;color:#4d6259}.mrow em{margin-left:auto;font-style:normal;font-size:.78rem;font-weight:600;color:#00674F;white-space:nowrap}
.prog i{display:block;height:8px;background:#d8e6df;border-radius:9px;overflow:hidden;margin-top:.4rem}.prog u{display:block;height:100%;width:0;background:#FFD700;border-radius:9px;transition:width 1.4s .3s}.in .prog u{width:var(--p)}.prog span{font-size:.75rem;color:#4d6259}
.prog.tier{margin-top:1.8rem;background:#ffffff14;padding:1rem;border-radius:14px}.prog.tier span{color:#fff;font-size:.9rem}.prog.tier i{background:#ffffff26;height:10px}
.pnav{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;background:#fff;border-top:1px solid #d8e6df;padding:.4rem}
.pnav button{flex:1;background:none;border:0;padding:.6rem 0;font:inherit;font-size:.78rem;color:#4d6259;cursor:pointer;border-radius:10px}.pnav button.on{color:#00674F;font-weight:700;background:#00674F14}
.ticks{margin-top:1.2rem;display:grid;grid-template-columns:1fr 1fr;gap:.4rem}.ticks li:before{content:"\2713  ";color:var(--gold)}
.bd{border-top:1px solid #ffffff26;padding-top:.6rem}.bd li{display:flex;justify-content:space-between;padding:.45rem 0;border-bottom:1px solid #ffffff14;color:#e6f2ed}.bd b{color:#fff}
.bd .tot{border:0;font-weight:600;font-size:1.1rem;color:var(--gold)}.bd .tot b{color:var(--gold);font-family:Fraunces,serif;font-size:1.5rem}
.calc .tabs{margin:.4rem 0 0}
@media(max-width:960px){.g4,.five{grid-template-columns:1fr 1fr}.fly{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.g4,.five,.fly,.ticks{grid-template-columns:1fr}.phone{transform:none}}

/* ---------- corporate theme fixes ---------- */
:root{--bg:#F3F8F5}.tagp{background:#00674F1a;color:#00674F}.road b{color:var(--green)}
.dark .card h3{color:var(--gold)}.compare .hi small{color:var(--gold)}
.brief{background:linear-gradient(160deg,#08856a,#004d3b)}.brief-wrap{max-width:560px;margin:0 auto 3rem}
.btn-ghost.dk{color:var(--green)!important;border-color:var(--green)}.btn-ghost.dk:hover{background:#00674F14}
.mid{text-align:center;display:block;margin-top:1.6rem}
.cats{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:.6rem}.cats li{background:#fff;border:1px solid var(--line);padding:.4rem 1rem;border-radius:99px;font-size:.88rem}
.rel{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:center;margin-top:3rem}
.rel-c{background:var(--green);color:#fff;border-radius:50%;width:150px;height:150px;display:grid;place-content:center;text-align:center;box-shadow:0 0 0 10px #00674F1f}.rel-c b{font:700 1.3rem Fraunces,serif;color:var(--gold)}.rel-c span{font-size:.75rem}
.rel-m{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.pills{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.6rem}.pills span{font-size:.72rem;background:#00674F14;color:var(--green);padding:.2rem .6rem;border-radius:99px}
.plan{margin-top:4rem;background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(1.2rem,3vw,2.2rem)}.plan .tab{border-color:var(--line)}.plan .tab.on{border-color:var(--gold)}
.plan .state-note{background:#F3F8F5;color:var(--ink)}.plan .road{margin-top:1.8rem}
.arch{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:1.2rem 0}.arch span{background:#F3F8F5;border:1px solid var(--line);padding:.55rem 1rem;border-radius:12px;font-size:.88rem;font-weight:500}.arch i{font-style:normal;color:var(--green)}
.arch .sw{background:var(--green);color:#fff;border-color:var(--green)}
@media(max-width:960px){.rel{grid-template-columns:1fr;justify-items:center}.rel-m{grid-template-columns:1fr 1fr;width:100%}}
@media(max-width:720px){nav{background:#00503efa}.rel-m{grid-template-columns:1fr}}

/* ---------- multi-page additions ---------- */
nav a.act{color:var(--gold)}
.phead{position:relative;background:linear-gradient(155deg,#00674F,#004736);color:#fff;padding:8.5rem 0 3.5rem;overflow:hidden}.phead .wrap{position:relative}
.phead h1{font-size:clamp(2rem,5vw,3.3rem)}.phead .lead{color:#cfe8df}.phead .eyebrow{color:var(--gold)}
.subnav{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.8rem}.subnav .tab{display:inline-block}
.narrow{max-width:820px;margin:0 auto}.center-t{text-align:center}
.statement{font:600 clamp(1.4rem,3.4vw,2.3rem)/1.3 Fraunces,Cambria,serif;margin-bottom:1.2rem}
.ft{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;text-align:center;transition:.3s}.ft:hover{border-color:var(--gold);transform:translateY(-6px)}
.ft s{display:block;font-size:1.1rem;color:var(--mut);text-decoration-color:var(--gold)}.ft i{display:block;font-style:normal;font-size:1.6rem;color:var(--gold);margin:.2rem 0}
.ft b{display:block;font:700 1.6rem Fraunces,serif;color:var(--green)}
.fly li b{color:var(--gold)}.fly li:before{font-size:1.2rem}
.empty{text-align:center;background:#fff;border:1px dashed var(--line);border-radius:var(--r);padding:3rem 1.5rem}

/* ---------- GREEN-FIRST THEME: NIFU Green #00674F is the main colour, Gold #FFD700 the accent ---------- */
:root{--bg:#EAF4EF;--green:#00674F;--dk:#00674F;--dk2:#0a7b60;--line:#c9e0d5;--mut:#456358}
body{background:var(--bg)}
.nav{background:#00674F;border-bottom:1px solid #ffffff26;backdrop-filter:none}
.hero,.phead{background:linear-gradient(135deg,#00674F 0%,#008562 100%)}
.dark{background:#00674F}
.foot{background:#005a44}
/* buttons: green on light sections, gold on green */
.sec:not(.dark) .btn:not(.btn-ghost){background:#00674F;color:#fff!important;box-shadow:0 8px 24px #00674f45}
.sec:not(.dark) .btn:not(.btn-ghost):hover{background:#008562}
.form .btn{background:#00674F;color:#fff!important}.form .btn:hover{background:#008562}
/* headings and accents */
.sec:not(.dark) h2,.sec:not(.dark) .h3,.sec:not(.dark) .statement{color:var(--green)}
.head h2:after{content:"";display:block;width:56px;height:4px;border-radius:4px;background:var(--gold);margin-top:.9rem}
.center-t .statement:after{display:none}
.card,.road li,.ft{border-top:4px solid var(--green)}
.dark .card{border-top-color:var(--gold)}
.card:hover,.road li:hover,.ft:hover{box-shadow:0 18px 40px #00674f26;border-color:var(--green)}
.brand:hover .go,.info a:hover,.foot a:hover{color:var(--green)}.foot a:hover{color:var(--gold)}
.plan .tab.on{background:var(--green);color:#fff;border-color:var(--green)}
.form{border-top:4px solid var(--green)}input:focus,select:focus,textarea:focus{outline:2px solid var(--green)}
.tagp{background:#00674F1f;color:#00674F}.pills span{background:#00674F1a}
.compare>div{border-color:#00674f55}
@media(max-width:720px){nav{background:#00674F}}

/* ================= FINAL LAYER: green-dominant + consistent spacing ================= */
:root{--bg:#DCEEE5;--ink:#0a2a20;--mut:#3f5f52;--line:#b9d6c8}
.foot{background:#004536}
/* spacing system */
.wrap{width:min(1160px,calc(100% - 2.5rem))}
.sec{padding:clamp(3.25rem,7vw,5.5rem) 0}
.head{margin-bottom:2.25rem}
.hero{padding:8rem 0 4.5rem}.phead{padding:7.5rem 0 3.25rem}
.grid{gap:1.25rem}.card{padding:1.5rem}
.sec>.wrap>*:last-child{margin-bottom:0}
@media(max-width:960px){nav{gap:1rem}nav a{font-size:.85rem}}
@media(max-width:720px){.wrap{width:calc(100% - 2rem)}.hero{padding:6.5rem 0 3rem}.phead{padding:6.25rem 0 2.5rem}.sec{padding:3rem 0}.head{margin-bottom:1.6rem}}
/* components that own their background keep readable text in ANY section */
.calc,.panel,.profile,.brief,.state-note{color:#fff}.next{color:var(--ink)}
.calc .muted{color:#cfe8df}.panel h3,.profile b{color:#fff}
.calc small,.panel small,.profile small,.brief small{color:var(--gold)}.next small{color:#0a2a20b0}
.stepper{color:var(--ink)}.dark .stepper .muted{color:var(--mut)}
/* light sections: controls that were designed for dark */
.sec:not(.dark) .tabs .tab{border-color:var(--line);color:var(--ink);background:#fff}
.sec:not(.dark) .tabs .tab.on{background:var(--green);color:#fff;border-color:var(--green)}
.sec:not(.dark) .prog.tier{background:#00674f14}.sec:not(.dark) .prog.tier span{color:var(--ink)}.sec:not(.dark) .prog.tier i{background:#00674f26}
.sec:not(.dark) .ticks li:before{color:var(--green)}
.calc .tabs .tab{background:transparent;color:#fff;border-color:#ffffff40}.calc .tabs .tab.on{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.panel + .split .tabs .tab{}
.state-note{background:var(--dk2)}
/* green sections: components designed for light */
.dark .fly li{background:#ffffff1a;border:1px solid #ffffff33}
.dark .brand .go{color:var(--gold)}.dark .tagp{background:#ffffff26;color:#fff}
.dark .compare>div{background:#ffffff14;color:#fff;border:0}
.dark .compare .hi{background:var(--gold);color:var(--ink)}.dark .compare .hi small{color:#00674F}
.dark .rel-c{background:var(--gold);color:var(--ink)}.dark .rel-c b{color:var(--ink)}
.dark .ft{border-top-color:var(--gold)}
/* hero & page headers are always the boldest green */
.hero,.phead{background:linear-gradient(135deg,#00674F 0%,#00805f 100%)}
.sec.dark{background:#00674F}

/* ================= GREEN-DOMINANT FINAL PASS ================= */
:root{--bg:#CFE9DD;--ink:#0a2a20;--mut:#3c5c50;--line:#a9d3c0;--card:#F6FBF8;--green:#00674F;--dk:#00674F;--dk2:#00805f;--gold:#FFD700;--gold2:#ffe451}
body{background:var(--bg)}
.sec.dark,.dark{background:var(--dk);color:#fff}
.hero,.phead{background-color:#00674F;position:relative}
.hero:before,.phead:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#00674Fee,#008562dd)}
.hero .wrap,.phead .wrap{position:relative;z-index:1}
.hero{background-image:linear-gradient(135deg,#00674fee,#008562dd),url('https://images.unsplash.com/photo-1521791136064-7986c2920216?auto=format&fit=crop&w=1800&q=60');background-size:cover;background-position:center}
.hero:before{display:none}
.foot{background:#00402f}
.nav{background:#00674F}
/* cards & images */
.card{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--green)}
.dark .card{background:#ffffff14;border:1px solid #ffffff2a;border-top:4px solid var(--gold);color:#fff}
.dark .card p{color:#dff3ea}.dark .card h3{color:#fff}
.bimg,.res img{width:100%;height:140px;object-fit:cover;border-radius:10px;margin:-1.6rem -1.6rem 1rem;width:calc(100% + 3.2rem)}
.res{display:block}
/* jobs */
.job{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--green);border-radius:var(--r);padding:1.8rem;margin-bottom:1.2rem}
.job-h{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:.6rem}
.job h4{margin:1rem 0 .3rem;font-size:.95rem;color:var(--green)}.job ul{padding-left:1.2rem}.job li{margin:.2rem 0;color:var(--mut)}
/* empty state on dark or light */
.empty{background:#ffffffcc;border:1px dashed var(--green);border-radius:var(--r);padding:3rem 1.5rem;text-align:center}
.dark .empty{background:#ffffff14;border-color:#ffffff44}.dark .empty p{color:#dff3ea}
/* misc: keep light sections readable, but clearly green-tinted */
.sec:not(.dark){background:var(--bg)}
.compare>div{background:#fff}
.brief-wrap .brief{background:linear-gradient(160deg,#0a7b5f,#004d3b)}
@media(max-width:720px){.bimg,.res img{margin:-1.4rem -1.4rem .9rem;width:calc(100% + 2.8rem)}}

/* ================================================================
   RESPONSIVENESS + IMAGE SAFETY + TRUE GREEN — authoritative pass
   ================================================================ */
html{overflow-x:hidden}
img{max-width:100%;height:auto;display:block;border-style:none}
:root{--cardpad:1.6rem}

/* ---- deepen & unify the green presence (this wins over earlier, weaker tints) ---- */
:root{--bg:#BFE3D0;--card:#F7FBF9;--line:#a3d2ba;--mut:#345347}
body{background:var(--bg)}
.sec:not(.dark){background:var(--bg)}
.card{padding:var(--cardpad)}
.card{border-top-width:5px}
.dark .card{border-top-width:5px}
/* contact page: colour the info column so the page never reads "all white" */
.contact>div:first-child{background:linear-gradient(160deg,#00674F,#00503c);color:#fff;border-radius:20px;padding:2rem}
.contact>div:first-child .eyebrow{color:var(--gold)}
.contact>div:first-child .lead{color:#cfe8df}
.contact>div:first-child .info a{color:#fff}.contact>div:first-child .info a:hover{color:var(--gold)}
.contact>div:first-child .info small{color:var(--gold)}

/* ---- nav: give 7 links + CTA real room before switching to burger ---- */
.nav-in{flex-wrap:nowrap}
nav{gap:1.1rem}
nav a{font-size:.88rem;white-space:nowrap}
@media(max-width:1280px){nav{gap:.8rem}nav a{font-size:.83rem}}
@media(max-width:1180px){nav{gap:.55rem}nav a{font-size:.8rem}}
@media(max-width:1040px){
  .burger{display:block}
  nav{position:fixed;inset:64px 0 auto;background:#00503efa;flex-direction:column;align-items:flex-start;padding:1.5rem;gap:1.1rem;transform:translateY(-130%);transition:.35s;border-bottom:1px solid #ffffff22;max-height:calc(100vh - 64px);overflow-y:auto}
  nav.open{transform:none}
  nav a{font-size:1rem;width:100%}
  nav a.btn{width:auto}
}

/* ---- full responsive coverage for every component, consolidated ---- */
@media(max-width:1040px){
  .g4{grid-template-columns:1fr 1fr}
  .five{grid-template-columns:repeat(3,1fr)}
  .rel-m{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .hero-in,.split,.roi,.contact,.stepper,.rel,.acols{grid-template-columns:1fr!important}
  .g3{grid-template-columns:1fr 1fr}
  .road{grid-template-columns:1fr 1fr}
  .five{grid-template-columns:1fr 1fr}
  .job-h{flex-direction:column;align-items:flex-start}
  .job-h .btn{width:100%;text-align:center}
  .arch{gap:.6rem}
  .arch span{font-size:.82rem;padding:.5rem .8rem}
  .subnav{gap:.4rem}
  .rel-c{width:120px;height:120px}
}
@media(max-width:640px){
  :root{--cardpad:1.25rem}
  .g3,.g4,.five,.fly,.ticks,.road,.rel-m,.cols,.row2{grid-template-columns:1fr!important}
  .hero{padding:6.5rem 0 3rem}
  .phead{padding:6.25rem 0 2.5rem}
  .sec{padding:2.5rem 0}
  .head{margin-bottom:1.4rem}
  .wrap{width:calc(100% - 2rem)}
  h1{font-size:clamp(1.9rem,8vw,2.6rem)}
  h2{font-size:clamp(1.5rem,7vw,2rem)}
  .stack span{width:100%!important}
  .cta,.cta.center{flex-direction:column;align-items:stretch}
  .cta .btn,.cta .btn-ghost{width:100%;text-align:center}
  .kpis{grid-template-columns:1fr 1fr}
  .compare{grid-template-columns:1fr}
  .phone{transform:none;margin:0 auto}
  .job{padding:1.2rem}
  .bimg,.res img{width:calc(100% + 2.5rem);margin:calc(-1 * var(--cardpad)) calc(-1 * var(--cardpad)) 1rem}
  .contact>div:first-child{padding:1.5rem}
}
@media(max-width:420px){
  .kpis{grid-template-columns:1fr}
  .btn{padding:.75rem 1.3rem;font-size:.95rem}
  .job-h h3{font-size:1.05rem}
}

/* ---- invisible-text fixes: self-contained light components must not inherit ambient dark-section text ---- */
.dark .pills span{background:#ffffff26;color:#fff}
.stepper{color:var(--ink)}
.job{color:var(--ink)}
.compare>div:not(.hi){color:var(--ink)}

/* ---- Discover / Gift-card phone screen extras ---- */
.chiprow{display:flex;flex-wrap:wrap;gap:.4rem}.chiprow span{background:#fff;border:1px solid #d8e6df;color:#00674F;font-size:.75rem;font-weight:600;padding:.35rem .8rem;border-radius:99px}
.pcard.search b{font-size:1.3rem}

/* ---- CRM "browser window" chrome on the customer-profile card ---- */
.profile{position:relative;padding-top:2.6rem;overflow:hidden}
.chrome{position:absolute;top:0;left:0;right:0;height:2.4rem;background:#ffffff10;border-bottom:1px solid #ffffff1c;display:flex;align-items:center;gap:.35rem;padding:0 1rem}
.chrome i{width:9px;height:9px;border-radius:50%;background:#ffffff30;display:block}
.chrome span{margin-left:.6rem;font-size:.72rem;color:#cfe8df;letter-spacing:.02em}

/* ---- full-width photo banner with caption (About, Partner) ---- */
.photobanner{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 24px 60px #0005}
.photobanner img{width:100%;height:clamp(240px,42vw,420px);object-fit:cover}
.pb-cap{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,#00201880,transparent);padding:2rem 1.6rem 1.4rem;color:#fff}
.pb-cap b{display:block;font:600 1.3rem Fraunces,serif;margin-bottom:.3rem}
.pb-cap span{font-size:.9rem;color:#dff3ea}
@media(max-width:640px){.pb-cap{padding:1.4rem 1.1rem 1rem}.pb-cap b{font-size:1.1rem}}

/* ================= WEB DASHBOARD MOCKUP (CRM / Marketing / Intelligence) ================= */
.dash{background:#0b1f19;border-radius:18px;overflow:hidden;box-shadow:0 30px 70px #0006}
.dash-top{background:#0b1f19;display:flex;align-items:center;gap:.4rem;padding:.7rem 1rem;border-bottom:1px solid #ffffff14}
.dash-top i{width:9px;height:9px;border-radius:50%;background:#ffffff30}
.dash-top span{margin-left:.6rem;font-size:.75rem;color:#9fc4b3;background:#ffffff0d;padding:.2rem .8rem;border-radius:6px}
.dash-body{display:grid;grid-template-columns:170px 1fr;background:#F7FBF9;min-height:360px}
.dash-side{background:#00503e;padding:1.2rem 1rem;color:#fff}
.dash-side b{display:block;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.dash-side a{display:block;padding:.55rem .7rem;border-radius:8px;font-size:.85rem;color:#cfe8df;margin-bottom:.2rem;cursor:default}
.dash-side a.on{background:#ffffff1a;color:#fff;font-weight:600}
.dash-main{padding:1.2rem}
.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-bottom:1.1rem}
.dash-stats div{background:#fff;border:1px solid var(--line);border-radius:10px;padding:.8rem .9rem}
.dash-stats small{color:var(--mut);text-transform:none;letter-spacing:0;font-size:.72rem}
.dash-stats b{display:block;font:700 1.3rem Fraunces,serif;color:var(--green)}
.dash-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:.85rem}
.dash-table th{text-align:left;background:#EAF4EF;color:var(--green);padding:.6rem .8rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}
.dash-table td{padding:.6rem .8rem;border-top:1px solid var(--line);color:var(--ink)}
.dash-table .pill{font-size:.7rem;padding:.15rem .6rem;border-radius:99px;background:#00674F14;color:var(--green);font-weight:600}
.dash-table .pill.gold{background:#FFD70030;color:#8a6a1c}
.dash-cards{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.dash-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:.9rem}
.dash-card .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem}
.dash-card b{font-size:.9rem}
.dash-card .bar{height:6px;background:#e3f0e9;border-radius:9px;overflow:hidden;margin-top:.5rem}
.dash-card .bar u{display:block;height:100%;background:var(--green);border-radius:9px}
.dash-card small{color:var(--mut);font-size:.72rem}
@media(max-width:720px){.dash-body{grid-template-columns:1fr}.dash-side{display:flex;gap:.4rem;overflow-x:auto;padding:.8rem}.dash-side b{display:none}.dash-side a{white-space:nowrap;margin-bottom:0}.dash-stats{grid-template-columns:1fr 1fr}.dash-cards{grid-template-columns:1fr}.dash-table{display:block;overflow-x:auto}}

.g2{grid-template-columns:1fr 1fr}
@media(max-width:720px){.g2{grid-template-columns:1fr}}

/* ---- framed photo mockup for hero right-columns without an app screen ---- */
.framephoto{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 30px 70px #0006;max-width:420px;margin:0 auto}
.framephoto img{width:100%;height:clamp(260px,32vw,380px);object-fit:cover}
.fp-cap{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,#00201880,transparent);padding:1.6rem 1.3rem 1.1rem;color:#fff}
.fp-cap b{display:block;font:600 1.15rem Fraunces,serif}
.fp-cap span{font-size:.85rem;color:#dff3ea}

/* ---- compact teaser-card mockup for lighter pages (Careers, Resources, Newsroom, Contact) ---- */
.teaser{background:linear-gradient(160deg,#0a7b5f,#004d3b);border:1px solid #ffffff1c;border-radius:20px;padding:1.6rem;box-shadow:0 30px 70px #0006;max-width:380px;margin:0 auto;color:#fff}
.teaser-top{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:#AEB2BC;margin-bottom:1.1rem}
.teaser-top .dot{width:8px;height:8px;border-radius:50%;background:#4ade80}
.teaser b.big{display:block;font:700 2.4rem Fraunces,serif;color:var(--gold)}
.teaser .row{display:flex;justify-content:space-between;align-items:center;padding:.65rem 0;border-bottom:1px solid #ffffff14;font-size:.9rem}
.teaser .row:last-child{border:0}
.teaser .row span:last-child{color:var(--gold);font-weight:600}
.teaser .row{gap:.6rem}.teaser .row span:last-child{text-align:right;overflow-wrap:anywhere;font-size:.85rem}

/* ================= Trusted-by bar, Partners grid, Integrations grid ================= */
.trustbar{padding:2.5rem 0}
.tb-label{text-align:center;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-bottom:1.4rem}
.tb-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2.2rem}
.tb-item{display:flex;flex-direction:column;align-items:center;gap:.5rem;opacity:.85;transition:.25s}
.tb-item:hover{opacity:1;transform:translateY(-2px)}
.tb-item span{font-size:.78rem;color:var(--mut);font-weight:500}
.tb-logo{height:40px;max-width:120px;object-fit:contain;filter:grayscale(1);opacity:.8;transition:.25s}
.tb-item:hover .tb-logo{filter:grayscale(0);opacity:1}
.wordmark{display:grid;place-items:center;height:40px;width:64px;border-radius:10px;background:#00674F14;color:var(--green);font:700 .95rem Inter,sans-serif;letter-spacing:.03em}
.dark .wordmark{background:#ffffff1a;color:#fff}

/* logo cards (partners & integrations) */
.logo-card{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--green);border-radius:var(--r);padding:1.5rem;text-align:center;color:var(--ink)}
.dark .logo-card{background:#ffffff14;border:1px solid #ffffff2a;border-top:4px solid var(--gold);color:#fff}
.dark .logo-card p{color:#dff3ea}
.logo-card .logo-box{height:52px;max-width:100%;object-fit:contain;margin:0 auto 1rem}
.logo-card .wordmark{height:52px;width:84px;margin:0 auto 1rem;font-size:1.05rem}
.logo-card h3{margin-bottom:.4rem}
.logo-card small{display:inline-block;margin-bottom:.6rem}

/* partner category filters */
.filterbar{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:2rem}
.filterbar button{background:transparent;border:1px solid var(--line);color:var(--ink);padding:.5rem 1.1rem;border-radius:99px;cursor:pointer;font:inherit;font-size:.88rem;transition:.2s}
.dark .filterbar button{border-color:#ffffff30;color:#fff}
.filterbar button:hover{border-color:var(--green)}
.filterbar button.on{background:var(--green);border-color:var(--green);color:#fff;font-weight:600}
.dark .filterbar button.on{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.partner-item{transition:opacity .25s,transform .25s}
.partner-item.hide{display:none}

@media(max-width:640px){.tb-row{gap:1.4rem}.tb-logo{height:32px;max-width:90px}}