/* ═══════════════════════════════════════════════════════════
   PharmGrowth v7 — design system (from scratch)
   Green brand · light canvases · product-UI led
   ═══════════════════════════════════════════════════════════ */
@font-face{font-family:'Geist';src:url('/assets/fonts/geist-latin-wght-normal.woff2') format('woff2-variations');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Geist';src:url('/assets/fonts/geist-latin-ext-wght-normal.woff2') format('woff2-variations');font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist Mono';src:url('/assets/fonts/geist-mono-latin-wght-normal.woff2') format('woff2-variations');font-weight:100 900;font-display:swap}

:root{
  /* brand */
  --forest:#0B2815; --forest-2:#123F22; --forest-3:#1B5A31;
  --green:#1F7A45; --green-2:#2E9E5B; --mint:#35D07F; --mint-2:#7BE7AE;
  /* neutrals */
  --ink:#0F1D16; --slate:#54655B; --mute:#7C8B83;
  --cream:#F7F6F1; --paper:#FFFFFF; --sage:#EAF4EE; --sage-2:#DBEBE1;
  --line:#E4EAE6; --line-2:#EFF3F0;
  /* type */
  --sans:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,monospace;
  /* layout */
  --max:1240px; --wide:1400px; --read:700px; --gut:clamp(1.15rem,4vw,2.5rem);
  --sec:clamp(4.5rem,8vw,8rem); --sec-sm:clamp(3rem,5vw,5rem);
  /* radius / depth */
  --r-xs:8px; --r-sm:12px; --r:16px; --r-lg:22px; --r-pill:999px;
  --sh-sm:0 6px 18px -10px rgba(11,40,21,.18);
  --sh:0 24px 60px -32px rgba(11,40,21,.34);
  --sh-lg:0 50px 110px -50px rgba(11,40,21,.55);
  --ease:cubic-bezier(.2,.7,.2,1); --fast:170ms; --slow:600ms;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,video{max-width:100%;display:block}
img{height:auto}
.card-img .im img,.work a img,.case7 .cover img,.ed .im img{height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.03em;line-height:1.08;color:var(--ink)}
h1{font-size:clamp(2.6rem,5.6vw,4.6rem);letter-spacing:-.04em;line-height:1.02}
h2{font-size:clamp(1.9rem,3vw,2.7rem)}
h3{font-size:clamp(1.15rem,1.5vw,1.4rem);letter-spacing:-.02em;line-height:1.25}
h4{font-size:1rem;letter-spacing:-.01em}
p{margin:0;color:var(--slate)}
.lede{font-size:clamp(1.05rem,1.25vw,1.25rem);line-height:1.55;color:var(--slate)}
.small{font-size:.875rem}
.eyebrow{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--green);display:inline-block}
.on-dark .eyebrow{color:var(--mint)}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.wrap-wide{width:100%;max-width:var(--wide);margin:0 auto;padding-inline:var(--gut)}
section{position:relative}
.sec{padding-block:var(--sec)}
.sec-sm{padding-block:var(--sec-sm)}
.sec-xs{padding-block:clamp(1.8rem,3vw,2.8rem)}
.center{text-align:center}
.center .eyebrow{margin-inline:auto}
.hd{max-width:46rem}
.hd.center{margin-inline:auto}
.hd .eyebrow{margin-bottom:1.1rem}
.step[open] .n,.step:hover .n{background:var(--green);color:#fff}
.step summary::-webkit-details-marker{display:none}
.step[open] summary span:last-child svg{transform:rotate(180deg)}
a.step:hover h3{color:var(--green)}
.hd p{margin-top:1rem}
.on-dark{color:#fff}
.on-dark:not(.cta):not(.stage):not(.sec-forest):not(.sec-ink):not(.ft){color:inherit}
.on-dark h2,.on-dark h3,.on-dark h4{color:#fff}
.on-dark p,.on-dark .lede{color:rgba(255,255,255,.72)}

/* ── buttons ── */
.btn{position:relative;display:inline-flex;align-items:center;gap:.5rem;border:0;cursor:pointer;font-family:inherit;font-size:.95rem;font-weight:600;letter-spacing:-.01em;padding:.85rem 1.4rem;border-radius:var(--r-pill);overflow:hidden;isolation:isolate;transition:transform var(--fast) var(--ease),background var(--fast),color var(--fast),box-shadow var(--fast)}
.btn>*{position:relative;z-index:2}
.btn::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.42) 48%,transparent 66%);transform:translateX(-130%);transition:none;pointer-events:none}
.btn:hover::before{animation:polish 720ms var(--ease) forwards}
@keyframes polish{to{transform:translateX(130%)}}
@media(prefers-reduced-motion:reduce){.btn:hover::before{animation:none}}
.btn i{font-style:normal;transition:transform var(--fast) var(--ease)}
.btn:hover i{transform:translateX(3px)}
.btn-pri{background:var(--green);color:#fff;box-shadow:0 10px 26px -14px rgba(31,122,69,.8)}
.btn-pri:hover{background:var(--forest-3);color:#fff;transform:translateY(-1px)}
.btn-mint{background:var(--mint);color:var(--forest);box-shadow:0 12px 28px -16px rgba(53,208,127,.8)}
.btn-mint:hover{background:var(--mint-2);color:var(--forest);transform:translateY(-1px)}
.btn-white{background:#fff;color:var(--forest);box-shadow:0 10px 30px -16px rgba(0,0,0,.4)}
.btn-white:hover{background:#fff;color:var(--forest);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink)}
/* any dark surface: ghost + text buttons go white */
.hero .btn-ghost,.cta .btn-ghost,.sec-forest .btn-ghost,.sec-ink .btn-ghost,.stage.forest .btn-ghost,.ft .btn-ghost,.art-cta7 .btn-ghost,.plan.feat .btn-ghost,.aside .cta .btn-ghost,.deck-sec .btn-ghost{
  color:#fff;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.32)}
.hero .btn-ghost:hover,.cta .btn-ghost:hover,.sec-forest .btn-ghost:hover,.sec-ink .btn-ghost:hover,.stage.forest .btn-ghost:hover,.ft .btn-ghost:hover,.art-cta7 .btn-ghost:hover,.plan.feat .btn-ghost:hover{
  color:#fff;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px #fff}
.cta .tlink,.sec-forest .tlink,.sec-ink .tlink,.stage.forest .tlink,.art-cta7 .tlink,.ft .tlink{color:var(--mint)}
.art-cta7 .btn-mint,.cta .btn-mint{color:var(--forest)}
.on-dark .btn-ghost{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.on-dark .btn-ghost:hover{box-shadow:inset 0 0 0 1px #fff}
.btn-sm{padding:.6rem 1.05rem;font-size:.88rem}
.tlink{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:.95rem;color:var(--green)}
.tlink::after{content:"→";transition:transform var(--fast) var(--ease)}
.tlink:hover::after{transform:translateX(4px)}
.on-dark .tlink{color:var(--mint)}

/* ── navigation ── */
.ann{background:linear-gradient(90deg,#14512B 0%,#1F7A45 38%,#2E9E5B 62%,#1B6238 100%);color:rgba(255,255,255,.9);font-size:.82rem;text-align:center;padding:.62rem 1rem;letter-spacing:-.005em}
.ann b{color:#fff}
.ann a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.45)}
.ann a:hover{text-decoration-color:#fff}
.nav{position:sticky;top:0;z-index:80;background:transparent;transition:background 140ms linear,box-shadow 140ms linear}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.14);opacity:0;transition:opacity 140ms linear}
.nav-in{max-width:var(--wide);margin-inline:auto;width:100%;height:76px;display:flex;align-items:center;gap:clamp(.6rem,1.4vw,1.5rem);padding-inline:var(--gut);transition:height 200ms var(--ease)}
/* scrolled: solid full-width bar */
.nav.stuck{background:rgba(11,40,21,.72);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);box-shadow:0 14px 40px -28px rgba(0,0,0,.6)}
.nav.light.stuck{background:rgba(255,255,255,.82)}
.nav.light.stuck::after{background:rgba(11,40,21,.1)}
.nav.light .nlink,.nav.light .brand,.nav.light .nlogin{color:var(--ink)}
.nav.light .nlogin{color:var(--slate)}
.nav.light .brand b{color:var(--green)}
.nav.light .nlink:hover{color:var(--green)}
.nav.light .nlink::after{background:var(--green)}
.nav.light .nlink[aria-expanded=true]{background:var(--sage);color:var(--green)}
.nav.light .btn-pri,.nav.light .btn-pri:hover{color:#fff}
.nav.light .btn-pri{background:var(--green)}
.nav.light .btn-pri:hover{background:var(--forest-3)}
.nav.light .burger{background:var(--sage)}
.nav.light .burger span,.nav.light .burger::before,.nav.light .burger::after{background:var(--ink)}
.nav.stuck::after{opacity:1}
.nav.stuck .nav-in{height:66px}
.nav .brand b{color:var(--mint)}
.nav .nlink[aria-expanded=true]{background:rgba(255,255,255,.14);color:#fff}
.nav .btn-pri,.nav .btn-pri:hover{color:var(--forest)}
.nav .btn-pri{background:#fff;box-shadow:none}
.nav .btn-pri:hover{background:var(--mint)}
.nav .burger{background:rgba(255,255,255,.16)}
.nav .burger span,.nav .burger::before,.nav .burger::after{background:#fff}
/* light-hero pages: tinted bar from the start so white type reads */
body:not(.hero-dark) .nav{background:rgba(255,255,255,.86);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
body:not(.hero-dark) .nav::after{opacity:1}
/* hero sits under the transparent bar */
body.hero-dark .hero{margin-top:-76px;padding-top:calc(76px + clamp(3rem,7vw,6rem))}
body.hero-dark .hero-sub{padding-top:calc(76px + clamp(2rem,4vw,3.4rem))}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:700;font-size:1.08rem;letter-spacing:-.03em;color:#fff;transition:color 140ms linear}
.brand b{color:var(--green);font-weight:700}
.brand img{width:30px;height:30px}
.nlinks{display:flex;align-items:center;gap:clamp(.4rem,1.1vw,1.1rem);margin-left:.6rem}
.nlink{position:relative;display:inline-flex;align-items:center;gap:.3rem;font-size:.92rem;font-weight:500;color:#fff;transition:color 140ms linear;padding:.5rem .5rem;border-radius:var(--r-xs);background:none;border:0;font-family:inherit;cursor:pointer}
.nlink svg{width:12px;height:12px;opacity:.6;transition:transform var(--fast) var(--ease)}
.nlink:hover{color:var(--mint)}
.nlink[aria-expanded=true] svg{transform:rotate(180deg)}
.nlink[aria-expanded=true]{background:var(--sage);color:var(--green)}
.nright{margin-left:auto;display:flex;align-items:center;gap:.6rem}
.nlogin{font-size:.88rem;font-weight:500;color:rgba(255,255,255,.78);transition:color 140ms linear}
.nlogin:hover{color:#fff}
.burger{display:none;margin-left:auto;width:42px;height:42px;border:0;background:var(--sage);border-radius:var(--r-pill);cursor:pointer;position:relative}
.burger span,.burger::before,.burger::after{content:"";position:absolute;left:12px;right:12px;height:2px;background:var(--ink);border-radius:2px;transition:transform var(--fast) var(--ease),opacity var(--fast)}
.burger span{top:20px}.burger::before{top:14px}.burger::after{top:26px}
body.mnav-open .burger span{opacity:0}
body.mnav-open .burger::before{transform:translateY(6px) rotate(45deg)}
body.mnav-open .burger::after{transform:translateY(-6px) rotate(-45deg)}
/* mega menu */
.mega{position:absolute;top:calc(100% - .35rem);left:50%;transform:translate(-50%,-8px);width:min(calc(100vw - 2*var(--gut)),760px);
  background:linear-gradient(180deg,rgba(12,44,24,.86),rgba(9,32,17,.9));backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);
  border:1px solid rgba(255,255,255,.1);border-radius:18px;box-shadow:0 40px 80px -40px rgba(0,0,0,.7);padding:1.1rem 1.1rem .9rem;opacity:0;visibility:hidden;
  transition:opacity 180ms var(--ease),transform 180ms var(--ease),visibility 180ms}
.mega::after{content:attr(data-label);position:absolute;left:1.5rem;top:.85rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.38)}
.mega-grid{padding-top:1.6rem}
.mega::before{content:"";position:absolute;left:0;right:0;top:-.6rem;height:.6rem}
.mega.open{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mega-grid{display:grid;gap:.15rem}
.mcard{display:flex;gap:.7rem;align-items:flex-start;padding:.6rem .65rem;border-radius:10px;transition:background var(--fast)}
.mcard:hover{background:rgba(255,255,255,.08)}
.mcard .ic{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.08);color:var(--mint);display:grid;place-items:center;flex:none}
.mcard .ic svg{width:16px;height:16px}
.mcard:hover .ic{background:rgba(53,208,127,.16)}
.mcard b{display:block;margin-bottom:.1rem;color:#fff;font-size:.88rem;font-weight:600;line-height:1.25}
.mcard:hover .ic{background:#fff}
.mcard b{font-size:.95rem;font-weight:600}
.mcard s{text-decoration:none;font-size:.76rem;color:rgba(255,255,255,.55);line-height:1.4;display:block}
.mega-foot{margin-top:.5rem;padding-top:.75rem;padding-inline:.65rem;border-top:1px solid rgba(255,255,255,.1);display:flex;gap:1.2rem;font-size:.78rem;color:rgba(255,255,255,.62)}
.mega-foot a{font-weight:500}
.mega-foot a:hover{color:var(--mint)}
/* mobile nav */
.mnav{position:fixed;inset:0;z-index:90;background:var(--cream);transform:translateY(-100%);transition:transform 380ms var(--ease);overflow-y:auto;display:flex;flex-direction:column;padding:1rem var(--gut) 2rem}
body.mnav-open .mnav{transform:none}
.mnav-hd{display:flex;align-items:center;height:64px}
.mnav-hd button{margin-left:auto;width:42px;height:42px;border:0;border-radius:var(--r-pill);background:var(--sage);font-size:1.4rem;cursor:pointer;line-height:1}
.mnav h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:1.6rem 0 .6rem;font-weight:500}
.mnav .ml{display:flex;align-items:center;gap:.85rem;padding:.85rem 0;border-bottom:1px solid var(--line);font-size:1.05rem;font-weight:500}
.mnav .ml .ic{width:34px;height:34px;border-radius:10px;background:var(--sage);color:var(--green);display:grid;place-items:center;flex:none}
.mnav .ml s{text-decoration:none;display:block;font-size:.8rem;color:var(--mute);font-weight:400}
.mnav .btn{margin-top:1.6rem;justify-content:center}
@media(max-width:1040px){.nlinks,.nright .nlogin,.nright .btn{display:none}.burger{display:block}.nav-in{height:66px}.nav.stuck .nav-in{height:60px}body.hero-dark .hero{margin-top:-66px;padding-top:calc(66px + clamp(2.5rem,7vw,5rem))}body.hero-dark .hero-sub{padding-top:calc(66px + 2rem)}}

/* ── hero ── */
.hero{position:relative;background:linear-gradient(180deg,#0A2413 0%,#0E3A1E 34%,#12481F 62%,#14512B 100%);color:#fff;padding-top:clamp(3rem,7vw,6rem);padding-bottom:clamp(3rem,6vw,5rem);overflow:hidden;isolation:isolate}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(180deg,rgba(247,246,241,0) 0%,rgba(247,246,241,.06) 24%,rgba(247,246,241,.18) 42%,rgba(247,246,241,.42) 60%,rgba(247,246,241,.72) 76%,rgba(247,246,241,.93) 90%,var(--cream) 100%);z-index:3;pointer-events:none}
.hero::before{content:"";position:absolute;left:50%;top:-16%;width:min(1200px,120vw);height:700px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(53,208,127,.22),rgba(53,208,127,0));pointer-events:none;z-index:1}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-bg i{position:absolute;display:block;border-radius:50%;filter:blur(80px);opacity:.55;mix-blend-mode:screen}
.hero-bg .b1{width:58vw;height:44vw;left:-14%;top:-16%;background:radial-gradient(closest-side,rgba(46,158,91,.62),transparent);animation:drift1 26s var(--ease) infinite alternate}
.hero-bg .b2{width:46vw;height:38vw;right:-10%;top:6%;background:radial-gradient(closest-side,rgba(53,208,127,.42),transparent);animation:drift2 32s var(--ease) infinite alternate}
.hero-bg .b3{width:52vw;height:34vw;left:22%;bottom:-18%;background:radial-gradient(closest-side,rgba(27,90,49,.85),transparent);animation:drift3 38s var(--ease) infinite alternate}
.hero-bg .mesh{position:absolute;inset:-20%;background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);background-size:30px 30px;mask-image:radial-gradient(120% 80% at 50% 20%,#000 10%,transparent 72%);-webkit-mask-image:radial-gradient(120% 80% at 50% 20%,#000 10%,transparent 72%);animation:meshDrift 44s linear infinite;opacity:.5}
@keyframes drift1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(7vw,4vw,0) scale(1.18)}}
@keyframes drift2{from{transform:translate3d(0,0,0) scale(1.1)}to{transform:translate3d(-6vw,6vw,0) scale(.92)}}
@keyframes drift3{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-8vw,-4vw,0) scale(1.22)}}
@keyframes meshDrift{to{transform:translate3d(30px,30px,0)}}
@media(prefers-reduced-motion:reduce){.hero-bg i,.hero-bg .mesh{animation:none}}
.hero .wrap{position:relative;z-index:5}
.hero-top{text-align:center;max-width:56rem;margin-inline:auto}
.hero h1{color:#fff}
.hero h1 em{font-style:normal;color:var(--mint)}
.ai-badge{display:inline-flex;align-items:center;gap:.55rem;padding:.45rem .95rem .45rem .7rem;border-radius:var(--r-pill);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);font-size:.8rem;font-weight:600;letter-spacing:-.005em;color:#fff;margin-bottom:1.4rem}
.ai-badge .sp{width:20px;height:20px;display:grid;place-items:center;position:relative;flex:none}
.ai-badge .sp svg{width:20px;height:20px;position:relative;z-index:2}
.ai-badge .sp::after{content:"";position:absolute;inset:-6px;border-radius:50%;background:radial-gradient(closest-side,rgba(53,208,127,.5),transparent);animation:pulseGlow 2.8s var(--ease) infinite}
.ai-badge .sp .g1{animation:sparkA 3.2s var(--ease) infinite}
.ai-badge .sp .g2{animation:sparkB 3.2s .5s var(--ease) infinite}
@keyframes sparkA{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.75;transform:scale(.9)}}
@keyframes sparkB{0%,100%{opacity:.55;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}
.hero .lede{color:rgba(255,255,255,.76);max-width:40rem;margin:1.3rem auto 0}
.hero .btn-ghost{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);background:rgba(255,255,255,.06)}
.hero .btn-ghost:hover{box-shadow:inset 0 0 0 1px #fff;background:rgba(255,255,255,.06)}
.hero-cta{display:flex;gap:.7rem;justify-content:center;margin-top:2rem;flex-wrap:wrap}
.hero-note{margin-top:1.1rem;font-size:.84rem;color:rgba(255,255,255,.72)}
.hero-stage{position:relative;z-index:4;margin-top:clamp(2.5rem,5vw,4rem);height:clamp(240px,26vw,340px);align-items:flex-start;display:flex;justify-content:center;align-items:flex-start;gap:clamp(.8rem,2vw,2rem);perspective:1800px}
.hero-stage .pane{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg);transform-style:preserve-3d;transition:transform var(--slow) var(--ease)}
.hero-stage img{width:100%;height:auto}
.hero-stage .p-phone{width:clamp(190px,20vw,272px);border-radius:38px;background:#fff;transform:rotateY(10deg) rotateX(2deg) translateY(2.2rem)}
.hero-stage .p-mid{width:clamp(230px,25vw,340px);border-radius:24px;background:#fff;z-index:3}
.hero-stage .p-right{width:clamp(190px,20vw,272px);border-radius:38px;background:#fff;transform:rotateY(-10deg) rotateX(2deg) translateY(2.2rem)}
.hero-stage .p-flat{width:clamp(230px,24vw,330px);border-radius:20px;background:#fff}
@media(max-width:900px){.hero-stage{gap:.6rem}.hero-stage .p-phone,.hero-stage .p-right{display:none}.hero-stage .p-mid{width:min(320px,78vw);transform:none}}

/* ── logo strip ── */
.logos{display:flex;align-items:center;gap:clamp(1.2rem,3.2vw,3rem);flex-wrap:wrap;justify-content:center;padding-block:.5rem}
.logos .lbl{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);background:var(--sage);border-radius:var(--r-pill);padding:.4rem .8rem}
.logos img{height:clamp(24px,2.4vw,34px);width:auto;opacity:.62;filter:grayscale(1);transition:opacity var(--fast),filter var(--fast)}
.logos img:hover{opacity:1;filter:none}
.logos span.wm{font-size:clamp(.95rem,1.4vw,1.15rem);font-weight:600;letter-spacing:-.02em;color:var(--mute)}

/* ── generic layouts ── */
.split{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split.rev>*:first-child{order:2}
.split.narrow{grid-template-columns:1fr 1fr}
@media(max-width:900px){.split,.split.narrow{grid-template-columns:1fr}.split.rev>*:first-child{order:0}}
.steps{display:grid;gap:.5rem;margin-top:2rem}
.step{border-top:1px solid var(--line);padding:1.15rem .25rem;display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.step:last-child{border-bottom:1px solid var(--line)}
.step .n{width:26px;height:26px;border-radius:50%;background:var(--sage);color:var(--green);font-size:.78rem;font-weight:700;display:grid;place-items:center;font-family:var(--mono)}
.step.on .n{background:var(--green);color:#fff}
.step h3{font-size:1.05rem}
.step p{margin-top:.35rem;font-size:.93rem;line-height:1.55}
.step .body{display:none}
.step.on .body{display:block}
.on-dark .step{border-color:rgba(255,255,255,.14)}
.on-dark .step .n{background:rgba(255,255,255,.12);color:#fff}
.on-dark .step.on .n{background:var(--mint);color:var(--forest)}
.ticks{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.65rem}
.ticks li{display:flex;gap:.65rem;align-items:flex-start;font-size:.97rem;color:var(--slate);line-height:1.5}
.ticks svg{width:19px;height:19px;flex:none;margin-top:.15rem;color:var(--green)}
.on-dark .ticks li{color:rgba(255,255,255,.76)}
.on-dark .ticks svg{color:var(--mint)}

/* ── product framing ── */
.shot{border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);background:#fff;border:1px solid rgba(11,40,21,.08)}
.shot img{width:100%;height:auto}
.shot-bleed{border-radius:var(--r) var(--r) 0 0;margin-bottom:calc(var(--sec) * -1);position:relative;z-index:2}
.stage{position:relative;border-radius:var(--r-lg);padding:clamp(1.5rem,3.5vw,3rem);overflow:hidden}
.stage.sage{background:var(--sage)}
.stage.forest{background:linear-gradient(160deg,var(--forest-2),var(--forest))}
.stage.cream{background:var(--cream)}
.phones{display:flex;justify-content:center;align-items:flex-start;gap:clamp(.7rem,2vw,1.8rem)}
.phones .ph{width:clamp(170px,18vw,240px);border-radius:32px;overflow:hidden;box-shadow:var(--sh-lg);flex:none;background:#fff;transition:transform var(--slow) var(--ease);max-height:clamp(340px,40vw,520px)}
.phones .ph img{display:block;width:100%;height:auto}
.phones .ph:nth-child(2){z-index:2}
.phones .ph:nth-child(odd){margin-top:clamp(.8rem,2.2vw,2rem)}
.phones .ph:hover{transform:translateY(-8px)}
.phone-lbl{display:flex;justify-content:center;gap:clamp(.7rem,2vw,1.8rem);margin-top:1.1rem}
.phone-lbl span{width:clamp(170px,18vw,240px);text-align:center;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.on-dark .phone-lbl span{color:rgba(255,255,255,.5)}
@media(max-width:760px){.phones{overflow-x:auto;justify-content:flex-start;scroll-snap-type:x mandatory;padding-bottom:.5rem}.phones .ph{width:210px;scroll-snap-align:center}.phones .ph:nth-child(odd){margin-top:0}.phone-lbl{display:none}}
.chip{position:absolute;display:flex;align-items:center;gap:.6rem;background:#fff;border-radius:var(--r-sm);padding:.7rem .9rem;box-shadow:var(--sh);font-size:.85rem;font-weight:600;z-index:4}
.chip s{text-decoration:none;display:block;font-weight:400;font-size:.76rem;color:var(--mute)}
.chip .dot{width:9px;height:9px;border-radius:50%;background:var(--mint);flex:none}
@media(max-width:760px){.chip{display:none}}

/* ── cards ── */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.6vw,1.2rem)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,1.6vw,1.2rem)}
@media(max-width:980px){.grid-3,.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.grid-3,.grid-4{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;display:flex;flex-direction:column;transition:transform var(--fast) var(--ease),box-shadow var(--fast)}
a.card:hover{transform:translateY(-3px);box-shadow:var(--sh-sm)}
.card .ic{width:42px;height:42px;border-radius:12px;background:var(--sage);color:var(--green);display:grid;place-items:center;margin-bottom:1rem}
.card h3{margin-bottom:.45rem}
.card p{font-size:.92rem;line-height:1.55}
.card .tlink{margin-top:auto;padding-top:1rem}
.card-img{padding:0;overflow:hidden}
.card-img .im{aspect-ratio:16/10;overflow:hidden;background:var(--sage)}
.card-img .im img{width:100%;height:100%;object-fit:cover;object-position:top}
.card-img .tx{padding:1.35rem 1.5rem 1.5rem;display:flex;flex-direction:column;flex:1}
.badge{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--green);margin-bottom:.6rem}

/* ── quote ── */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.6vw,1.2rem)}
@media(max-width:900px){.quotes{grid-template-columns:1fr}}
.quote{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);padding:1.6rem;display:flex;flex-direction:column}
.quote .stars{color:var(--mint);letter-spacing:.15em;font-size:.8rem;margin-bottom:.9rem}
.quote p{color:#fff;font-size:1.02rem;line-height:1.55}
.quote .who{margin-top:auto;padding-top:1.2rem;font-size:.83rem;color:rgba(255,255,255,.55)}

/* ── pricing preview ── */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.6vw,1.2rem);align-items:start}
@media(max-width:900px){.plans{grid-template-columns:1fr}}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.7rem}
.plan.feat{background:var(--forest);color:#fff;border-color:var(--forest)}
.plan.feat h3,.plan.feat .price{color:#fff}
.plan.feat p,.plan.feat .ticks li{color:rgba(255,255,255,.75)}
.plan.feat .ticks svg{color:var(--mint)}
.plan .price{font-size:2.4rem;font-weight:600;letter-spacing:-.04em;margin:.9rem 0 .2rem}
.plan .price small{font-size:.9rem;font-weight:500;color:var(--mute);letter-spacing:0}
.plan.feat .price small{color:rgba(255,255,255,.6)}
.plan .btn{margin-top:1.4rem;width:100%;justify-content:center}
.plan .ticks{margin-top:1.2rem}
.plan .ticks li{font-size:.9rem}

/* ── CTA + footer ── */
.cta{background:radial-gradient(110% 130% at 15% 0%,#1B5A31 0%,#0F3D20 45%,#0B2815 100%);color:#fff;border-radius:var(--r-lg);padding:clamp(2.5rem,6vw,4.5rem);display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;overflow:hidden;position:relative}
.cta h2{color:#fff;max-width:14em}
@media(max-width:860px){.cta{grid-template-columns:1fr}}
.ft{position:relative;background:linear-gradient(180deg,#0E3319 0%,#0B2815 55%,#092011 100%);color:#fff;padding-block:clamp(3rem,6vw,5rem) 2rem;margin-top:var(--sec);overflow:hidden;isolation:isolate}
.ft>.wrap-wide{position:relative;z-index:2}
.ft-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.ft-bg .dots{display:none}
.ft-bg .glow{position:absolute;border-radius:50%;filter:blur(90px)}
.ft-bg .g1{width:60vw;height:38vw;max-width:900px;max-height:520px;left:-10%;top:-45%;background:radial-gradient(closest-side,rgba(46,158,91,.30),transparent);animation:ftfloat1 28s var(--ease) infinite alternate}
.ft-bg .g2{width:46vw;height:32vw;max-width:700px;max-height:440px;right:-8%;bottom:-45%;background:radial-gradient(closest-side,rgba(53,208,127,.16),transparent);animation:ftfloat2 34s var(--ease) infinite alternate}
.ft-bg::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(123,231,174,.32),transparent)}
@keyframes ftfloat1{from{transform:translate3d(0,0,0)}to{transform:translate3d(6vw,2vw,0)}}
@keyframes ftfloat2{from{transform:translate3d(0,0,0)}to{transform:translate3d(-5vw,-2vw,0)}}
@media(prefers-reduced-motion:reduce){.ft-bg .glow{animation:none}}
.ft-top{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:clamp(1.5rem,3vw,2.5rem);padding-bottom:clamp(2rem,4vw,3.5rem);border-bottom:1px solid rgba(255,255,255,.1)}
.ft-brand .brand{color:#fff;margin-bottom:1rem}
.ft-brand .brand b{color:var(--mint)}
.ft-brand p{color:rgba(255,255,255,.68);font-size:.9rem;max-width:26rem;line-height:1.6}
.ft h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:500;margin-bottom:1rem}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.ft ul a{font-size:.88rem;color:rgba(255,255,255,.8);transition:color var(--fast)}
.ft ul a:hover{color:#fff}
.ft-btm{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center;padding-top:1.5rem;margin-top:1.5rem;border-top:1px solid rgba(255,255,255,.09);font-size:.8rem;color:rgba(255,255,255,.55)}
.ft-btm a{color:rgba(255,255,255,.55)}
.ft-btm a:hover{color:#fff}
.ft-btm .sp{margin-left:auto}
@media(max-width:960px){.ft-top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ft-top{grid-template-columns:1fr}}

/* ── reveal ── */
[data-rev]{opacity:0;transform:translateY(20px);transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease)}
[data-rev].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){[data-rev]{opacity:1;transform:none;transition:none}.hero-stage .pane{transform:none!important}}
/* mobile containment */
@media(max-width:760px){
  .hero-stage{height:clamp(220px,60vw,300px);gap:.5rem;padding-inline:0}
  .cta,.stage{padding:1.4rem}
  .quotes{gap:.8rem}
  .chip{display:none}
  .split{gap:2rem}
  .step{padding:1rem .1rem}
  h1{font-size:clamp(2.1rem,8.5vw,3rem)}
  h2{font-size:clamp(1.6rem,6.4vw,2.1rem)}
  .logos{gap:.9rem}
  .logos .wm{font-size:.9rem}
  .plans .plan{padding:1.3rem}
}
.wrap,.wrap-wide,.hero,.hero-stage,.stage,.cta,section{max-width:100vw}
.hero-stage>.pane{flex:none}
@media(max-width:1040px){.mega{display:none}}

/* ── sub-page hero ── */
.hero-sub{padding-top:clamp(2.4rem,5vw,4rem);padding-bottom:clamp(4rem,7vw,6.5rem)}
.hero-sub::after{height:clamp(120px,13vw,190px);background:linear-gradient(180deg,rgba(247,246,241,0) 0%,rgba(247,246,241,.12) 26%,rgba(247,246,241,.38) 50%,rgba(247,246,241,.72) 72%,rgba(247,246,241,.94) 88%,var(--cream) 100%)}
.hero-sub.has-media{padding-bottom:clamp(3rem,6vw,5rem)}
.hero-sub.has-media::after{height:clamp(200px,26vw,380px)}
/* the section after a hero should not start with another big gap */
.hero + section,.hero + .sec-sm,.hero + .sec{padding-top:clamp(1.6rem,3vw,2.6rem)}
.hero-sub::before{opacity:.7}
.hero-sub .hero-top{text-align:left;margin-inline:0;max-width:52rem}
.hero-sub .hero-cta{justify-content:flex-start}
.hero-sub .lede{margin-inline:0}
.hero-sub h1{font-size:clamp(2.2rem,4.4vw,3.8rem)}
.hero-sub .crumb{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:1.1rem}
.hero-sub .crumb a{color:rgba(255,255,255,.72)}
.hero-sub .crumb a:hover{color:#fff}
.hero-media{position:relative;z-index:4;margin-top:clamp(2rem,4vw,3.2rem)}
.hero-media .shot{max-width:min(920px,100%);margin-inline:auto}
.hero-media .phones{margin-top:0}
/* faq accordion */
.faqs summary{cursor:pointer;list-style:none;display:flex;gap:1rem;align-items:center}
.faqs summary::-webkit-details-marker{display:none}
.faqs h3{flex:1;font-size:1.02rem}
.faqs .fchev{color:var(--mute);display:flex}
.faqs .fchev svg{width:18px;height:18px;transition:transform var(--fast) var(--ease)}
.faqs details[open] .fchev svg{transform:rotate(180deg)}
.faqs details[open] .n{background:var(--green);color:#fff}
.faqs p{margin:.7rem 0 .3rem 2.6rem;max-width:44rem;font-size:.96rem}
/* prose (articles, legal) */
.prose7{max-width:var(--read);margin-inline:auto}
.prose7 p,.prose7 li{font-size:1.06rem;line-height:1.75;color:#2B3A32;margin:0 0 1.15rem}
.prose7 .lead{font-size:1.2rem;line-height:1.6;color:var(--ink)}
.prose7 h2{font-size:clamp(1.5rem,2.3vw,2rem);margin:2.8rem 0 1rem;scroll-margin-top:6rem}
.prose7 h3{font-size:1.2rem;margin:2rem 0 .7rem}
.prose7 ul,.prose7 ol{padding-left:1.25rem;margin-bottom:1.3rem}
.prose7 li{margin-bottom:.5rem}
.prose7 a{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.prose7 strong{color:var(--ink);font-weight:600}
.prose7 code{font-family:var(--mono);font-size:.85em;background:var(--sage);padding:.1em .35em;border-radius:5px}
.prose7 figure{margin:1.8rem 0}
.prose7 img{width:auto;max-width:100%;height:auto;border-radius:12px;border:1px solid var(--line);margin:1.8rem auto;display:block;box-shadow:0 20px 44px -30px rgba(11,40,21,.4)}
.prose7 img[src*="phone"],.prose7 img[src*="tab-"]{max-width:min(340px,100%)}
.prose7 figure img{margin:0}
.prose7 figcaption{font-size:.82rem;color:var(--mute);margin-top:.6rem}
.prose7 table{width:100%;border-collapse:collapse;font-size:.95rem;margin:1.4rem 0;display:block;overflow-x:auto}
.prose7 th,.prose7 td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--line);vertical-align:top}
.prose7 th{background:var(--sage);font-weight:600}
.prose7 h2.src{font-family:var(--mono);font-size:.9rem;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);margin-top:3rem}
.prose7 ul.src{list-style:none;padding-left:1rem;border-left:2px solid var(--sage-2)}
.prose7 ul.src li{font-size:.9rem;color:var(--slate)}
.callout7{border-left:3px solid var(--mint);background:var(--sage);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:1.1rem 1.3rem;margin:1.6rem 0}
.callout7 p{margin:0;font-size:1rem}
/* article header */
.art-hd7{padding-block:clamp(2.2rem,4.5vw,4rem) clamp(1.4rem,3vw,2.4rem)}
.art-hd7 .wrap{max-width:calc(var(--read) + 2*var(--gut))}
.art-hd7 h1{font-size:clamp(2rem,3.8vw,3.2rem);margin:1rem 0 1.1rem}
.art-hd7 .meta{display:flex;flex-wrap:wrap;gap:.3rem 0;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-top:1rem}
.art-hd7 .meta span+span::before{content:"·";margin:0 .6rem;color:var(--sage-2)}
.by7{display:flex;align-items:center;gap:1rem;padding:1rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:1.4rem}
.by7 img{width:40px;height:40px;border-radius:11px}
.by7 b{display:block;font-size:.94rem}
.by7 s{text-decoration:none;font-size:.84rem;color:var(--mute)}
.by7 a{margin-left:auto;font-size:.84rem;color:var(--green);font-weight:600;white-space:nowrap}
.art-cta7{max-width:var(--read);margin:3rem auto 0;background:var(--forest);color:#fff;border-radius:var(--r-lg);padding:clamp(1.6rem,3.5vw,2.4rem);display:grid;grid-template-columns:1.4fr auto;gap:1.4rem;align-items:center}
.art-cta7 h3{color:#fff;margin-bottom:.4rem}
.art-cta7 p{color:rgba(255,255,255,.72);font-size:.95rem}
.art-cta7 .b{display:flex;flex-direction:column;gap:.5rem}
@media(max-width:640px){.art-cta7{grid-template-columns:1fr}}
/* hub */
.feat7{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(1.6rem,4vw,3rem);align-items:center;padding-block:clamp(1.6rem,3vw,2.6rem)}
@media(max-width:860px){.feat7{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.4rem}
.chips a,.chips button{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line);background:#fff;border-radius:var(--r-pill);padding:.5rem .8rem;color:var(--slate);cursor:pointer}
.chips a:hover,.chips button:hover,.chips .on{background:var(--forest);color:#fff;border-color:var(--forest)}
.hub-list{display:grid;grid-template-columns:1fr 1fr;gap:.4rem 2rem}
.hub-list a{display:flex;gap:1rem;align-items:baseline;padding:.85rem 0;border-bottom:1px solid var(--line);font-size:1rem;font-weight:500}
.hub-list a:hover{color:var(--green)}
.hub-list u{text-decoration:none;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);min-width:6rem;flex:none}
@media(max-width:800px){.hub-list{grid-template-columns:1fr}}
/* forms */
.form7{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.4rem,3vw,2.2rem);box-shadow:var(--sh-sm)}
.form7 .fld{margin-bottom:1rem}
.form7 label{display:block;font-size:.8rem;font-weight:600;letter-spacing:.02em;margin-bottom:.4rem}
.form7 label span{font-weight:400;color:var(--mute)}
.form7 input,.form7 select,.form7 textarea{width:100%;font-family:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:.8rem .9rem;transition:border-color var(--fast),box-shadow var(--fast)}
.form7 input:focus,.form7 select:focus,.form7 textarea:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 3px rgba(46,158,91,.15)}
.form7 textarea{min-height:110px;resize:vertical}
.form7 .btn{width:100%;justify-content:center;margin-top:.4rem}
.form7 .err{display:none;background:#FDECEA;color:#9F2D20;border-radius:var(--r-sm);padding:.7rem .9rem;font-size:.9rem;margin-bottom:.9rem}
.form7 .err.on{display:block}
.form7 .ok{display:none;background:var(--sage);color:#14532D;border-radius:var(--r-sm);padding:.9rem 1rem;font-size:.95rem;margin-bottom:.9rem}
.form7 .ok.on{display:block}
.form7 .hint{font-size:.78rem;color:var(--mute);margin-top:.8rem}
/* pricing table */
.ptable{width:100%;border-collapse:collapse;font-size:.95rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ptable th,.ptable td{padding:.85rem 1rem;border-bottom:1px solid var(--line-2);text-align:left}
.ptable th{background:var(--sage);font-weight:600;font-size:.85rem}
.ptable td:first-child{font-weight:500;color:var(--ink)}
.ptable td.y{color:var(--green);font-weight:600}
.ptable td.n{color:var(--mute)}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* work */
.work7{display:grid;gap:clamp(2.5rem,6vw,5rem)}
.case7{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(1.5rem,3.5vw,3rem);align-items:center}
.case7.rev>*:first-child{order:2}
@media(max-width:900px){.case7,.case7.rev>*:first-child{grid-template-columns:1fr;order:0}}
.dgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2vw,1.6rem)}
.dfig{margin:0}
.dfig figcaption{font-size:.84rem;color:var(--mute);margin-top:.6rem}
@media(max-width:700px){.dgrid{grid-template-columns:1fr}}
.shot-phone{border:0;box-shadow:var(--sh-lg);border-radius:32px;overflow:hidden;max-width:280px;margin-inline:auto}
.hero-media .phones .ph{box-shadow:var(--sh-lg)}
/* v7 mobile containment (site-wide) */
@media(max-width:900px){
  .split>*{min-width:0}
  .steps,.step,.step>div{min-width:0}
  .step h3{overflow-wrap:anywhere}
  .hero-media .phones{overflow-x:auto;justify-content:flex-start;scroll-snap-type:x mandatory;padding-inline:var(--gut);margin-inline:calc(var(--gut) * -1)}
  .hero-media .phones .ph{width:200px;scroll-snap-align:center;margin-top:0}
  .phone-lbl{display:none}
  .case7 img{width:100%}
  .work7{gap:2.5rem}
}
.tbl-scroll{max-width:100%}
main{overflow-x:clip}

/* ── motion details ── */
@media(prefers-reduced-motion:no-preference){
  .hero-stage .p-phone{animation:floatA 9s var(--ease) infinite alternate}
  .hero-stage .p-mid{animation:floatB 11s var(--ease) infinite alternate}
  .hero-stage .p-right{animation:floatA 10s .8s var(--ease) infinite alternate}
  @keyframes floatA{from{transform:rotateY(10deg) rotateX(2deg) translate3d(0,2.2rem,0)}to{transform:rotateY(10deg) rotateX(2deg) translate3d(0,1.4rem,0)}}
  @keyframes floatB{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-.7rem,0)}}
  .hero-stage .p-right{animation-name:floatC}
  @keyframes floatC{from{transform:rotateY(-10deg) rotateX(2deg) translate3d(0,2.2rem,0)}to{transform:rotateY(-10deg) rotateX(2deg) translate3d(0,1.4rem,0)}}
}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,1.6vw,1.2rem)}
@media(max-width:820px){.stat-row{grid-template-columns:1fr 1fr}}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.4rem 1.5rem}
.stat b{display:block;font-size:clamp(2rem,3.2vw,2.8rem);font-weight:600;letter-spacing:-.04em;color:var(--forest);line-height:1}
.stat s{text-decoration:none;display:block;font-size:.88rem;color:var(--slate);margin-top:.5rem;line-height:1.45}
.on-dark .stat{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.on-dark .stat b{color:#fff}
.on-dark .stat s{color:rgba(255,255,255,.62)}
/* AI orbit */
.orbit{position:relative;aspect-ratio:1;max-width:460px;margin-inline:auto;display:grid;place-items:center}
.orbit .ring{position:absolute;inset:4%;border:1px dashed rgba(46,158,91,.32);border-radius:50%}
.orbit .ring.r2{inset:20%;border-style:solid;border-color:rgba(46,158,91,.14)}
@media(prefers-reduced-motion:no-preference){.orbit .ring{animation:spin 46s linear infinite}.orbit .ring.r2{animation:spin 34s linear infinite reverse}}
@keyframes spin{to{transform:rotate(360deg)}}
.orbit .core{width:34%;aspect-ratio:1;border-radius:28%;position:relative;z-index:3;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(155deg,#4FDD97 0%,#2E9E5B 34%,#17683A 74%,#0B3D22 100%);
  box-shadow:0 40px 80px -34px rgba(15,80,44,.75),0 2px 0 rgba(255,255,255,.55) inset,0 -18px 34px -18px rgba(0,0,0,.5) inset}
.orbit .core b{position:relative;z-index:3;color:#fff;font-weight:600;font-size:clamp(1.5rem,2.8vw,2.2rem);letter-spacing:-.04em;text-shadow:0 2px 12px rgba(0,0,0,.28)}
.orbit .core .sheen{position:absolute;inset:-45%;background:conic-gradient(from 0deg,transparent 0deg,rgba(255,255,255,.30) 26deg,transparent 72deg,transparent 360deg);z-index:1;mix-blend-mode:soft-light}
.orbit .core::before{content:"";position:absolute;left:10%;right:10%;top:6%;height:38%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0));z-index:2;filter:blur(3px)}
.orbit .core::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 1px rgba(255,255,255,.28) inset;z-index:4}
.orbit .halo{position:absolute;width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(46,158,91,.38),rgba(53,208,127,.10) 60%,transparent);filter:blur(10px);z-index:1}
@media(prefers-reduced-motion:no-preference){
  .orbit .core .sheen{animation:spin 7s linear infinite}
  .orbit .halo{animation:haloPulse 3.6s var(--ease) infinite}
}
@keyframes haloPulse{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.16);opacity:1}}
@keyframes pulseGlow{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
.orbit .node{position:absolute;display:flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:.55rem .9rem;font-size:.85rem;font-weight:600;box-shadow:var(--sh-sm);white-space:nowrap}
.orbit .node i{width:8px;height:8px;border-radius:50%;background:var(--green-2);flex:none}
.orbit .n1{top:2%;left:50%;transform:translateX(-50%)}
.orbit .n2{top:44%;left:-6%}
.orbit .n3{top:44%;right:-6%}
.orbit .n4{bottom:2%;left:50%;transform:translateX(-50%)}
@media(prefers-reduced-motion:no-preference){.orbit .node{animation:nodeFloat 6s var(--ease) infinite alternate}.orbit .n2{animation-delay:.7s}.orbit .n3{animation-delay:1.4s}.orbit .n4{animation-delay:2.1s}}
@keyframes nodeFloat{from{margin-top:0}to{margin-top:-8px}}
@media(max-width:600px){.orbit .node{font-size:.75rem;padding:.45rem .7rem}.orbit .n2{left:-2%}.orbit .n3{right:-2%}}
/* marquee */
.mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;gap:2.5rem;width:max-content;animation:mq 38s linear infinite}
@media(prefers-reduced-motion:reduce){.mq-track{animation:none}}
@keyframes mq{to{transform:translateX(-50%)}}
.mq span{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:.6rem}
.mq span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint)}

.ai-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.ai-chips span{display:inline-flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:.5rem .9rem;font-size:.86rem;font-weight:600;color:var(--ink)}
.ai-chips span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green-2)}

/* ── cursor glow (pointer devices only) ── */
.cglow{position:fixed;top:0;left:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:1;opacity:0;
  background:radial-gradient(closest-side,rgba(53,208,127,.20),rgba(53,208,127,.07) 45%,transparent 72%);
  transition:opacity 400ms var(--ease);will-change:transform;mix-blend-mode:screen}
.cglow.on{opacity:1}
.cglow.lite{background:radial-gradient(closest-side,rgba(46,158,91,.16),rgba(46,158,91,.05) 45%,transparent 72%);mix-blend-mode:multiply}
@media(hover:none),(prefers-reduced-motion:reduce){.cglow{display:none}}
/* ── sparkle motif ── */
.spark{display:inline-flex;align-items:center;justify-content:center;flex:none;position:relative}
.spark svg{width:100%;height:100%;display:block}
.spark .g1{animation:sparkA 3.2s var(--ease) infinite}
.spark .g2{animation:sparkB 3.2s .5s var(--ease) infinite}
@media(prefers-reduced-motion:reduce){.spark .g1,.spark .g2{animation:none}}
.eyebrow .spark{width:15px;height:15px;margin-right:.1rem;vertical-align:-2px}
.eyebrow.ai::before{display:none}
/* AI mark: sparkle inside the core */
.orbit .core .mark{position:relative;z-index:3;display:grid;place-items:center;filter:drop-shadow(0 3px 10px rgba(0,0,0,.3))}
.orbit .core .mark .spark svg path{fill:#fff!important}
.ai-badge .spark{margin-right:.15rem}

/* ── framed product imagery ── */
.shot{position:relative;background:#fff;border:1px solid rgba(11,40,21,.1);border-radius:14px;overflow:hidden;box-shadow:0 30px 70px -38px rgba(11,40,21,.5),0 2px 6px -2px rgba(11,40,21,.08)}
.shot::before{content:"";display:block;height:30px;background:linear-gradient(180deg,#F6F7F4,#EFF1ED);border-bottom:1px solid rgba(11,40,21,.07)}
.shot::after{content:"";position:absolute;left:14px;top:11px;width:8px;height:8px;border-radius:50%;background:#E5776A;box-shadow:14px 0 0 #E9B94C,28px 0 0 #62C27A}
.shot.bare::before,.shot.bare::after{display:none}
.shot img{display:block;width:100%;height:auto}
.split .shot,.feat7 .shot{max-width:100%}
.dgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.2rem,2.4vw,2rem)}
.dfig .shot{max-width:100%}
.dfig figcaption{font-size:.8rem;color:var(--mute);margin-top:.7rem;display:flex;align-items:center;gap:.5rem}
.dfig figcaption::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sage-2);flex:none}
.story .shot,.stage .shot{box-shadow:0 26px 60px -34px rgba(11,40,21,.55)}
/* case-study frames already carry their own chrome */
.case7 .shot::before,.case7 .shot::after{display:none}

/* ── article layout with sidebar ── */
.artwrap{max-width:var(--wide);margin-inline:auto;padding-inline:var(--gut);display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(2rem,4vw,4rem);align-items:start}
.aside{position:sticky;top:96px;display:grid;gap:1.4rem}
.aside .box{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.15rem}
.aside h4{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);font-weight:500;margin-bottom:.8rem}
.aside .srch{display:flex;align-items:center;gap:.55rem;border:1px solid var(--line);border-radius:10px;padding:.6rem .7rem;background:#fff;transition:border-color var(--fast),box-shadow var(--fast)}
.aside .srch:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(46,158,91,.14)}
.aside .srch svg{width:15px;height:15px;color:var(--mute);flex:none}
.aside .srch input{border:0;outline:0;font-family:inherit;font-size:.88rem;width:100%;background:transparent;color:var(--ink)}
.aside nav{display:grid;gap:.1rem}
.aside nav a{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border-radius:9px;font-size:.88rem;font-weight:500;color:var(--slate);transition:background var(--fast),color var(--fast)}
.aside nav a:hover{background:var(--sage);color:var(--ink)}
.aside nav a.on{background:var(--forest);color:#fff}
.aside nav a em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:.66rem;color:var(--mute)}
.aside nav a.on em{color:rgba(255,255,255,.6)}
.aside .cta{display:block;background:linear-gradient(160deg,var(--forest-2),var(--forest));color:#fff;border-radius:var(--r);padding:1.2rem;text-align:left}
.aside .cta b{display:block;font-family:var(--sans);font-size:1rem;font-weight:600;margin-bottom:.35rem}
.aside .cta p{color:rgba(255,255,255,.7);font-size:.82rem;line-height:1.5;margin-bottom:.9rem}
.aside .cta .btn{padding:.6rem 1rem;font-size:.85rem}
.toc{display:grid;gap:.15rem}
.toc a{font-size:.84rem;color:var(--slate);padding:.34rem 0;line-height:1.4;border-left:2px solid var(--line);padding-left:.7rem}
.toc a:hover{color:var(--green);border-color:var(--green)}
.artwrap .prose7{margin-inline:0;max-width:var(--read)}
.artwrap .art-cta7,.artwrap .art-author7{margin-inline:0}
@media(max-width:1080px){.artwrap{grid-template-columns:1fr}.aside{position:static;order:2;grid-template-columns:1fr 1fr;display:grid}.aside .cta{grid-column:1/-1}}
@media(max-width:620px){.aside{grid-template-columns:1fr}}
.srch.gsrch{display:flex;align-items:center;gap:.6rem;border:1px solid var(--line);background:#fff;border-radius:var(--r-pill);padding:.7rem 1.1rem;min-width:min(420px,100%)}
.srch.gsrch:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(46,158,91,.14)}
.srch.gsrch svg{width:16px;height:16px;color:var(--mute);flex:none}
.srch.gsrch input{border:0;outline:0;background:transparent;font-family:inherit;font-size:.92rem;width:100%;color:var(--ink)}

/* button text colour is non-negotiable */
.btn-pri,.btn-pri:hover,.btn-pri:focus,.btn-pri:visited{color:#fff}
.btn-mint,.btn-mint:hover,.btn-white,.btn-white:hover{color:var(--forest)}
.nav .btn-pri,.nav .btn-pri:hover{color:var(--forest)}
.nav.light .btn-pri,.nav.light .btn-pri:hover{color:#fff}
.toolbox .btn,.toolbox .btn:hover{color:#fff}
.toolbox .btn-out,.toolbox .btn-ghost,.toolbox .btn-out:hover{color:var(--ink)}
.toolbox .no{color:var(--ink)}
/* buttons inside prose must keep button styling, not link styling */
.prose7 a.btn,.aside a.btn,.hub-list a.btn{text-decoration:none}
.prose7 .btn-pri,.prose7 .btn-pri:hover{color:#fff}
.prose7 .btn-mint,.prose7 .btn-white{color:var(--forest)}
.prose7 .btn-ghost,.prose7 .btn-ghost:hover{color:var(--ink)}
.prose7 .btn-out{color:var(--ink)}
/* guides index */
.gsec{padding-block:clamp(2rem,3.6vw,3rem);border-top:1px solid var(--line)}
.gsec:first-of-type{border-top:0}
.ghead{display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;margin-bottom:1.4rem}
.ghead h2{font-size:clamp(1.35rem,1.9vw,1.7rem)}
.ghead p{font-size:.95rem;margin-top:.4rem;max-width:44rem}
.ghead .tlink{white-space:nowrap;flex:none;margin-top:.3rem}
.gempty{display:none;padding:2rem 0;color:var(--mute)}
.artwrap .feat7{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(1.4rem,3vw,2.4rem);align-items:center;padding-block:0 clamp(1.6rem,3vw,2.4rem)}
.artwrap .feat7:hover h2{color:var(--green)}
.artwrap .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1240px){.artwrap .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){.artwrap .feat7,.artwrap .grid-3{grid-template-columns:1fr}.ghead{flex-direction:column;gap:.6rem}}
/* review marquee */
.qmarquee{overflow:hidden;margin-top:2.4rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.qtrack{display:flex;gap:clamp(.8rem,1.4vw,1.2rem);width:max-content;animation:qslide 90s linear infinite}
.qmarquee:hover .qtrack{animation-play-state:paused}
@keyframes qslide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.qtrack{animation:none;overflow-x:auto}}
.qtrack .quote{width:clamp(280px,26vw,360px);flex:none;margin:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);padding:1.5rem;display:flex;flex-direction:column}
.qtrack .quote blockquote{margin:0;color:#fff;font-size:1rem;line-height:1.55}
.qtrack .quote .stars{color:var(--mint);letter-spacing:.15em;font-size:.78rem;margin-bottom:.9rem}
.qtrack .quote .who{margin-top:auto;padding-top:1.1rem;font-size:.82rem;color:rgba(255,255,255,.55);font-style:normal}
/* mega menu adapts to the bar, like the header */
.nav.light .mega{background:rgba(255,255,255,.94);border-color:rgba(11,40,21,.1);box-shadow:0 40px 80px -44px rgba(11,40,21,.4)}
.nav.light .mega::after{color:var(--mute)}
.nav.light .mcard b{color:var(--ink)}
.nav.light .mcard s{color:var(--mute)}
.nav.light .mcard:hover{background:var(--sage)}
.nav.light .mcard .ic{background:var(--sage);color:var(--green)}
.nav.light .mcard:hover .ic{background:#fff}
.nav.light .mega-foot{border-color:var(--line);color:var(--slate)}
.nav.light .mega-foot a:hover{color:var(--green)}
/* hero product rail */
.prodrail{position:relative;z-index:5;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(.6rem,1.1vw,1rem);margin-top:clamp(2.4rem,5vw,3.6rem)}
.prodrail .pcardx{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.85rem;text-align:center;
  padding:clamp(1.1rem,2vw,1.6rem) .8rem;border-radius:var(--r);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform var(--fast) var(--ease),background var(--fast),border-color var(--fast),box-shadow var(--fast)}
.prodrail .pcardx:hover{transform:translateY(-4px);background:rgba(255,255,255,.11);border-color:rgba(123,231,174,.45);box-shadow:0 18px 40px -24px rgba(0,0,0,.6)}
.prodrail .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:var(--mint);background:rgba(255,255,255,.08);transition:background var(--fast),color var(--fast)}
.prodrail .ic svg{width:22px;height:22px}
.prodrail .pcardx:hover .ic{background:var(--mint);color:var(--forest)}
.prodrail b{font-size:.92rem;font-weight:600;color:#fff;letter-spacing:-.01em;line-height:1.25}
@media(max-width:1000px){.prodrail{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.prodrail{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}.prodrail .pcardx{padding:1rem .6rem;gap:.6rem}.prodrail .ic{width:38px;height:38px;border-radius:11px}.prodrail .ic svg{width:19px;height:19px}.prodrail b{font-size:.84rem}}
/* website showcase carousel */
.carousel{position:relative;height:clamp(280px,42vw,620px);perspective:2200px;overflow:hidden;margin-top:clamp(1.5rem,3vw,2.5rem)}
.ctrack{position:absolute;inset:0}
.cslide{position:absolute;left:50%;top:50%;margin:0;width:min(760px,68vw);
  transform:translate(-50%,-50%) translateX(calc(var(--d) * 58%)) scale(calc(1 - (0.16 * max(var(--d), -1 * var(--d))))) rotateY(calc(var(--d) * -14deg));
  transition:transform 700ms var(--ease),opacity 700ms var(--ease),filter 700ms var(--ease);
  opacity:calc(1 - (0.42 * max(var(--d), -1 * var(--d))));filter:saturate(.75);cursor:pointer}
.cslide.on{opacity:1;filter:none;cursor:default}
.cslide img{width:100%;height:auto;border-radius:12px;border:1px solid rgba(11,40,21,.12);box-shadow:0 40px 80px -40px rgba(11,40,21,.6)}
.cslide figcaption{position:absolute;left:0;right:0;bottom:-2.2rem;text-align:center;font-size:.86rem;opacity:0;transition:opacity 400ms var(--ease)}
.cslide.on figcaption{opacity:1}
.cslide figcaption b{font-weight:600;color:var(--ink)}
.cslide figcaption span{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-left:.6rem}
.cnav{position:absolute;top:50%;transform:translateY(-50%);z-index:30;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  background:rgba(255,255,255,.9);backdrop-filter:blur(8px);color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:background var(--fast),transform var(--fast) var(--ease)}
.cnav:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.cnav.prev{left:clamp(.5rem,3vw,3rem)}
.cnav.next{right:clamp(.5rem,3vw,3rem)}
.cdots{display:flex;justify-content:center;gap:.5rem;margin-top:3rem}
.cdots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:var(--sage-2);cursor:pointer;transition:background var(--fast),width var(--fast)}
.cdots button.on{background:var(--green);width:24px;border-radius:4px}
@media(max-width:760px){.carousel{height:clamp(220px,58vw,320px)}.cslide{width:82vw}.cnav{width:38px;height:38px;font-size:1.2rem}}
/* product tab bar (sits inside the hero) */
.ptabs{position:relative;z-index:6;display:flex;justify-content:center;gap:.25rem;flex-wrap:wrap;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-radius:var(--r-pill);padding:.35rem;width:fit-content;margin:0 auto clamp(1.6rem,3vw,2.6rem)}
.ptab{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border-radius:var(--r-pill);
  font-size:.88rem;font-weight:600;color:rgba(255,255,255,.72);transition:background var(--fast),color var(--fast)}
.ptab svg{width:17px;height:17px;opacity:.85}
.ptab:hover{color:#fff;background:rgba(255,255,255,.09)}
.ptab.on{background:#fff;color:var(--forest)}
.ptab.on svg{opacity:1}
@media(max-width:900px){.ptabs{width:100%;overflow-x:auto;justify-content:flex-start;border-radius:var(--r);flex-wrap:nowrap}.ptab{white-space:nowrap}.ptab span{font-size:.82rem}}
/* hero: tighter so the product rail lands above the fold */
.hero-h1{font-size:clamp(2.3rem,4.4vw,3.9rem)}
.hero{padding-top:clamp(2rem,4vw,3.2rem)}
body.hero-dark .hero{padding-top:calc(76px + clamp(1.4rem,3vw,2.4rem))}
.hero .lede{margin-top:1rem}
.hero-cta{margin-top:1.5rem}
.hero-note{margin-top:.9rem}
.prodrail{margin-top:clamp(1.6rem,3vw,2.4rem)}
/* sub-page hero with tabs keeps its own rhythm */
.hero-sub .ptabs{margin-bottom:clamp(1.4rem,2.6vw,2.2rem)}

/* carousel sits straight under the hero fade */
.hero-sub + .sec-sm .carousel{margin-top:0}
.hero-sub + .sec-sm{padding-top:0}
/* tab bar inside the hero */
.hero .ptabs{margin-top:0}
.hero-sub{padding-top:clamp(1.6rem,3vw,2.4rem)}
body.hero-dark .hero-sub{padding-top:calc(76px + clamp(1rem,2vw,1.6rem))}