:root{
  --bg:#f7f7f2;
  --ink:#1f1f1f;
  --ink-soft:#4a4d4a;
  --teal:#0fb5a6;        /* decorative accent only */
  --teal-text:#0b7a70;   /* AA on --bg and tints */
  --teal-deep:#0a5f58;   /* CTA band, white text AA */
  --tint-teal:#dff3f0;
  --tint-mint:#e6f5ea;
  --tint-sage:#eceee4;
  --line:#dcdcd2;
  --radius:18px;
  --head:'Sora','Manrope',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding-left:clamp(1.25rem,4vw,2.5rem);padding-right:clamp(1.25rem,4vw,2.5rem)}
h1,h2,h3{font-family:var(--head);margin:0;text-wrap:balance;letter-spacing:-0.02em;color:var(--ink)}
p{margin:0 0 1em;max-width:62ch}
a{color:var(--teal-text)}
:focus-visible{outline:3px solid var(--teal-text);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:10}
.skip:focus{left:1rem;top:1rem}

/* HERO */
.hero{padding-top:clamp(2rem,5vw,3.5rem);padding-bottom:clamp(2.25rem,5vw,4rem)}
.name{font-family:var(--head);font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin:0;color:var(--ink-soft)}
.role{font-size:.85rem;margin:.2rem 0 clamp(1.5rem,4vw,2.5rem);color:var(--teal-text);font-weight:500;letter-spacing:.04em}
.hero h1{font-size:clamp(1.9rem,5.2vw,3.5rem);line-height:1.1;font-weight:800;max-width:19em}
.hero-body{margin-top:clamp(1.5rem,3.5vw,2.5rem);padding-top:clamp(1.25rem,3vw,2rem);border-top:1px solid var(--line);display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.5rem,5vw,4rem);align-items:start}
.hero-rest p:last-child,.hero-lead p:last-child{margin-bottom:0}
.hero-body p{font-size:1rem}
.lede{font-weight:500;color:var(--ink-soft);margin-bottom:.5em!important}
.pull{font-family:var(--head);font-weight:700;font-size:clamp(1.35rem,3vw,1.95rem)!important;line-height:1.25;letter-spacing:-0.015em;margin:0 0 1.1em;max-width:24em;text-wrap:balance}
.pull span,.pull-sm span{background:linear-gradient(transparent 62%,rgba(15,181,166,.32) 62%,rgba(15,181,166,.32) 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .1em}

/* SECTIONS */
.section{padding-top:clamp(2.5rem,6vw,4.5rem);padding-bottom:clamp(.5rem,2vw,1.5rem)}
.section.divider{position:relative;margin-top:clamp(1.5rem,4vw,3rem)}
.section.divider::before{content:"";position:absolute;top:0;left:clamp(1.25rem,4vw,2.5rem);right:clamp(1.25rem,4vw,2.5rem);height:1px;background:var(--line)}
.section h2{font-size:clamp(1.55rem,3.6vw,2.4rem);line-height:1.15;font-weight:700;max-width:22em;margin-bottom:clamp(1.25rem,3vw,2rem)}
.eyebrow{display:inline-block;font-family:var(--head);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-text);background:#fff;border:1px solid var(--line);border-radius:999px;padding:.3rem .8rem;margin:0 0 1rem}

/* CARDS */
.card{border-radius:var(--radius);padding:clamp(1.25rem,2.5vw,1.75rem);position:relative;overflow:hidden;border:1px solid rgba(31,31,31,.06);box-shadow:0 1px 0 rgba(31,31,31,.04),0 10px 24px -14px rgba(11,95,88,.28)}
.card::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:linear-gradient(90deg,var(--teal),rgba(15,181,166,.25))}
.card h3{font-size:1.15rem;line-height:1.25;font-weight:700;margin-bottom:.6rem}
.card p{font-size:.975rem;margin:0;color:#2c2f2c}
.tint-teal{background:var(--tint-teal)}
.tint-mint{background:var(--tint-mint)}
.tint-sage{background:var(--tint-sage)}

/* PROMISE */
.promise{padding:clamp(1.75rem,4vw,3rem)}
.promise h2{font-size:clamp(1.55rem,3.6vw,2.4rem);line-height:1.15;font-weight:700;max-width:20em;margin-bottom:1.25rem}
.promise p{font-size:1rem;color:var(--ink)}
.promise p+p{margin-top:1em}
.promise .strong{font-weight:600}
.promise .strong+.strong{margin-top:.4em}
.promise .strong:last-of-type{margin-bottom:1.75rem}
.promise .eyebrow{margin-bottom:1rem}

/* BUTTONS */
.btn{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;font-family:var(--head);font-weight:600;font-size:.95rem;padding:.85rem 1.5rem;border-radius:999px;transition:transform .15s,background .15s;border:2px solid var(--ink)}
.btn:hover{background:var(--teal-deep);border-color:var(--teal-deep);transform:translateY(-1px)}
.btn-light{background:#fff;color:var(--teal-deep);border-color:#fff}
.btn-light:hover{background:var(--tint-mint);color:var(--teal-deep);border-color:var(--tint-mint)}
.btn-light:focus-visible{outline-color:#fff}

/* PROBLEM */
.prose p{font-size:1.0625rem}
.pull-sm{font-family:var(--head);font-weight:700;font-size:clamp(1.15rem,2.2vw,1.45rem);line-height:1.35;margin-top:1.5rem;letter-spacing:-0.01em}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:2rem;max-width:none}
.two-col p{max-width:56ch}

/* STEPS: 6-col grid, 3 + 2 balanced */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:1.1rem}
.steps li{grid-column:span 2}
.steps li:nth-child(4){grid-column:2 / span 2}
.steps li:nth-child(5){grid-column:4 / span 2}
.step .num{display:inline-flex;align-items:center;justify-content:center;font-family:var(--head);font-weight:700;font-size:.85rem;color:#fff;background:var(--teal-deep);border-radius:999px;min-width:2.4rem;height:2rem;padding:0 .7rem;margin:.35rem 0 .9rem;letter-spacing:.04em}
.control{font-family:var(--head);font-weight:700;font-size:clamp(1.2rem,2.6vw,1.65rem);line-height:1.3;letter-spacing:-0.015em;margin:2.25rem 0 0;max-width:30em;padding-left:1.1rem;border-left:5px solid var(--teal);text-wrap:balance}

/* WHAT I CAN TAKE OFF */
.grid6{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.scope{margin:2rem 0 0;color:var(--ink-soft);max-width:62ch}

/* EXAMPLE */
.grid4{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.ex .pill{display:inline-block;font-family:var(--head);font-size:.72rem;font-weight:700;letter-spacing:.1em;color:var(--teal-text);background:#fff;border-radius:999px;padding:.15rem .7rem;margin:.35rem 0 .8rem;max-width:none}
.ex p+p{margin-top:.8em}
.ex-diff{background:#fff;border:1.5px solid var(--teal)}
.ex-diff p:nth-of-type(2){font-weight:600}

/* CTA BAND */
.cta-wrap{padding-top:clamp(3rem,7vw,5.5rem);padding-bottom:clamp(2.5rem,6vw,4rem)}
.cta{background:var(--teal-deep);background-image:radial-gradient(circle at 90% 0%,rgba(15,181,166,.55),transparent 55%);color:#fff;border-radius:24px;padding:clamp(2rem,6vw,4rem)}
.cta h2{color:#fff;font-size:clamp(1.6rem,4vw,2.7rem);line-height:1.15;font-weight:800;max-width:18em;margin-bottom:1.1rem}
.cta p{color:#eaf7f5;font-size:1.05rem}
.cta .btn{margin-top:.5rem}
.cta .cta-note{margin:1.1rem 0 0;font-size:.95rem;color:#d4efeb}

/* FOOTER */
.footer{display:flex;gap:1.75rem;flex-wrap:wrap;padding-top:1.5rem;padding-bottom:3rem}
.footer a{color:var(--ink);font-weight:500;text-underline-offset:4px}
.footer a:hover{color:var(--teal-text)}

/* RESPONSIVE */
@media (max-width:900px){
  .grid6{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .steps li,.steps li:nth-child(4),.steps li:nth-child(5){grid-column:auto}
  .steps li:nth-child(5){grid-column:1 / -1}
  .two-col{grid-template-columns:1fr;gap:0}
  .hero-body{grid-template-columns:1fr;gap:1.75rem;max-width:44rem}
}
@media (max-width:640px){
  body{font-size:1rem}
  .grid6,.steps,.grid4{grid-template-columns:1fr}
  .steps li:nth-child(5){grid-column:auto}
  .card{padding:1.25rem}
  .promise{padding:1.5rem 1.25rem}
  .btn{display:block;text-align:center}
  .footer{flex-direction:column;gap:.75rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}
.ex-diff .pill{background:var(--tint-teal)}

/* ---------- ILLUSTRATIONS ---------- */
.art{display:block;width:100%;height:auto;overflow:visible}
.art *{vector-effect:non-scaling-stroke}
.halo{transform-box:fill-box;transform-origin:center;animation:breathe 8s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.15;transform:scale(.85)}50%{opacity:.7;transform:scale(1.25)}}
@media (prefers-reduced-motion:reduce){
  .halo{animation:none;opacity:.4}
  .pulse{display:none}
}

/* HERO two-column */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.hero h1{font-size:clamp(1.9rem,3.2vw,2.6rem);max-width:none}
.hero-body{display:block;border-top:1px solid var(--line);max-width:none}
.hero-body .btn{margin-top:.75rem}
.hero-art{position:relative;margin-right:-1.5rem;-webkit-mask-image:radial-gradient(ellipse 75% 75% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 75% 75% at 50% 50%,#000 60%,transparent 100%)}
.art-hero{aspect-ratio:560/460}

/* PROMISE with network on left */
.promise{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.5rem,4vw,3rem);align-items:center}
.promise-art{padding:0}
.promise-copy h2{max-width:none}

/* split (problem) */
.split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.split .section h2,.split h2{max-width:none}

/* example header */
.head-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:clamp(1rem,4vw,3rem);align-items:end}
.head-row h2{margin-bottom:0;max-width:none}
.head-art{padding-bottom:.25rem}
.head-row{margin-bottom:clamp(1.25rem,3vw,2rem)}

/* pipeline */
.pipe-wrap{max-width:720px;margin-top:2.25rem}

/* CTA fan */
.cta{position:relative;overflow:hidden}
.cta-art{position:absolute;right:clamp(0rem,3vw,3.5rem);top:50%;transform:translateY(-50%);width:clamp(200px,30%,330px);pointer-events:none}
.cta-copy{position:relative;max-width:38rem}
.cta-copy h2{max-width:none}
.cta .halo{stroke:#7fe3d8}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:1.75rem}
  .hero-art{margin-right:0;height:210px;overflow:hidden;-webkit-mask-image:none;mask-image:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
  .art-hero{height:100%;aspect-ratio:auto;width:100%}
  .promise{grid-template-columns:1fr}
  .promise-art{max-width:340px;margin:0 auto}
  .split{grid-template-columns:1fr}
  .split-art{max-width:320px}
  .head-row{grid-template-columns:1fr}
  .head-art{max-width:340px}
  .cta-copy{max-width:none}
  .cta-art{opacity:.35;width:220px;right:-3rem;top:auto;bottom:-1rem;transform:none}
}
@media (max-width:640px){
  .hero-art{height:180px}
}

/* ---------- HERO HIERARCHY v2 ---------- */
.hero{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);padding-top:clamp(1.25rem,3vw,2rem);padding-bottom:clamp(1.5rem,3vw,2.5rem);gap:clamp(1.25rem,3vw,2.5rem);align-items:center}
.hero .name{margin:0}
.hero .role{margin:.15rem 0 0;padding-bottom:clamp(.8rem,1.6vw,1.1rem);border-bottom:1px solid var(--line);max-width:none}
.audience{font-family:var(--head);font-size:clamp(.95rem,1.35vw,1.1rem);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-text);margin:clamp(.9rem,1.8vw,1.25rem) 0 clamp(.6rem,1.2vw,.85rem);max-width:none}
.lead{font-family:var(--head);font-size:clamp(1.3rem,2.6vw,1.6rem);font-weight:600;line-height:1.3;letter-spacing:-0.01em;color:var(--ink);margin:0 0 .5rem;max-width:none}
.hero h1{font-size:clamp(2rem,3.9vw,3.2rem);line-height:1.17;font-weight:800;letter-spacing:-0.025em;max-width:14em;margin:0 0 clamp(.8rem,1.6vw,1.1rem)}
.method{font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.55;color:var(--ink-soft);max-width:46ch;margin:0 0 clamp(1rem,2vw,1.4rem)}
.hero-art{margin-right:-2rem}

/* ---------- CHALLENGE SECTION ---------- */
.challenge{padding-top:clamp(1.5rem,4vw,3rem);padding-bottom:clamp(1rem,2vw,1.5rem)}
.pull-h{font-family:var(--head);font-weight:700;font-size:clamp(1.5rem,3.4vw,2.35rem);line-height:1.22;letter-spacing:-0.02em;max-width:22em;margin:0 0 clamp(1.1rem,2.5vw,1.75rem);text-wrap:balance}
.pull-h span{background:linear-gradient(transparent 62%,rgba(15,181,166,.32) 62%,rgba(15,181,166,.32) 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .1em}
.challenge .prose{max-width:62ch}
.challenge .prose p{font-size:1.0625rem}

/* promise card without h2 */
.promise-copy>p:first-child{font-family:var(--head);font-size:clamp(1.3rem,2.2vw,1.55rem);font-weight:700;line-height:1.3;letter-spacing:-0.015em;color:var(--ink);margin-bottom:.9rem}
.promise .promise-copy .strong:last-of-type{font-family:var(--head);font-size:1.15rem;font-weight:600;letter-spacing:-0.01em}

/* signal map ripples */
.ripple{transform-box:fill-box;transform-origin:center;animation:ripple 9s ease-out infinite}
@keyframes ripple{0%{transform:scale(.6);opacity:.0}25%{opacity:.55}100%{transform:scale(1.25);opacity:0}}
@media (prefers-reduced-motion:reduce){.ripple{animation:none}}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:1rem;gap:1rem}
  .hero-art{margin-right:0}
  .hero h1{max-width:none}
}
@media (max-width:640px){
  .hero-art{height:150px}
  .hero .btn{display:inline-block}
}

/* CTA fan: continuous, stronger motion (2026-10-28) */
.cta .fan-arc{animation:fanwave 3.2s ease-in-out infinite}
@keyframes fanwave{0%,100%{stroke-width:1.3px}18%{stroke-width:3px;opacity:1;stroke:#d9f7f3}40%{stroke-width:1.3px}}
.cta .fan-node{transform-box:fill-box;transform-origin:center;animation:fannode 3.2s ease-in-out infinite}
@keyframes fannode{0%,100%{transform:scale(1);fill:#0a5f58}18%{transform:scale(1.55);fill:#0fb5a6}40%{transform:scale(1);fill:#0a5f58}}
.cta .fan-spine{animation:fanspine 3.2s linear infinite}
@keyframes fanspine{from{stroke-dashoffset:0}to{stroke-dashoffset:-340}}
.cta .fan-ripple{transform-box:fill-box;transform-origin:center;opacity:0;animation:fanripple 3.9s ease-out infinite}
@keyframes fanripple{0%{transform:scale(.5);opacity:0}12%{opacity:.85}100%{transform:scale(3.2);opacity:0}}
@media (max-width:900px){.cta-art{opacity:.55}}
@media (prefers-reduced-motion:reduce){.cta .fan-arc,.cta .fan-node,.cta .fan-spine,.cta .fan-ripple{animation:none}.cta .fan-ripple,.cta .fan-spine{display:none}}

/* How it works: control line moved under the headline */
.control.control-top{margin:0 0 clamp(1.5rem,3vw,2.25rem);max-width:34em}

/* Example label: more prominent */
.eyebrow.eyebrow-strong{font-size:.85rem;font-weight:700;color:#fff;background:var(--teal-deep);border-color:var(--teal-deep);padding:.42rem 1rem;letter-spacing:.16em}

/* The difference: subtle no / yes markers */
.vs{display:flex;gap:.7rem;align-items:flex-start;padding:.75rem .85rem;border-radius:12px;margin:0 0 .6rem}
.vs-no{background:#f8efed;color:#6e4a45}
.vs-yes{background:#e8f4ec;font-weight:600;color:var(--ink)}
.ex-diff p.vs:nth-of-type(2){font-weight:600}
.ex-diff p.vs-no{font-weight:400}
.mark{flex:0 0 auto;width:1.35rem;height:1.35rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;margin-top:.1rem}
.mark svg{width:.85rem;height:.85rem;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mark-no{background:#ecd5d1}.mark-no svg{stroke:#a4483f}
.mark-yes{background:#cfe8d8}.mark-yes svg{stroke:#2e7a4f}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Footer as a mini CTA: X + email as buttons */
.footer.footer-cta{justify-content:center;gap:1rem;padding-top:clamp(2rem,5vw,3rem);padding-bottom:clamp(3rem,7vw,4.5rem)}
.footer.footer-cta a{text-decoration:none}
.footer.footer-cta .btn{color:#fff}
.footer.footer-cta .btn-outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.footer.footer-cta .btn-outline:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.footer.footer-cta .btn:hover{color:#fff}
@media (max-width:640px){.footer.footer-cta{flex-direction:column;align-items:stretch;gap:.75rem}}

/* Footer mini CTA: three filled buttons */
.footer.footer-cta .btn-green{background:var(--teal-deep);border-color:var(--teal-deep);color:#fff}
.footer.footer-cta .btn-green:hover{background:#084c46;border-color:#084c46;color:#fff}
.footer.footer-cta .btn-mint{background:#cfeae3;border-color:#cfeae3;color:var(--teal-deep)}
.footer.footer-cta .btn-mint:hover{background:#bfe2d9;border-color:#bfe2d9;color:var(--teal-deep)}
.footer.footer-cta .btn-black{background:#000;border-color:#000;color:#fff}
.footer.footer-cta .btn-black:hover{background:#222;border-color:#222;color:#fff}

/* Tighter gap between CTA band and the pipeline section that follows it */
.cta-wrap{padding-bottom:clamp(1rem,2.5vw,1.5rem)}
.cta-wrap + .section{padding-top:clamp(1.75rem,4vw,2.75rem)}

/* 2026-10-29: scroll entrance for promise card + problem section; stronger promise-card halos; funnel motion */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.js .reveal.reveal-d1{transition-delay:.18s}
.js .reveal.is-in{opacity:1;transform:none}
.art-net .halo,.art-funnel .halo{animation-name:breathe2}
@keyframes breathe2{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:.95;transform:scale(1.5)}}
.art-net circle[fill="#0fb5a6"]{transform-box:fill-box;transform-origin:center;animation:netcore 4.5s ease-in-out infinite}
@keyframes netcore{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.art-funnel .fl{stroke-dasharray:4 4;animation:funnelflow 2.8s linear infinite;opacity:.45}
@keyframes funnelflow{from{stroke-dashoffset:16}to{stroke-dashoffset:0}}
.art-funnel .fin{animation:funnelin 4.8s ease-in-out infinite}
@keyframes funnelin{0%,100%{opacity:.25}30%{opacity:.9}60%{opacity:.25}}
/* CTA to pipeline gap, a little tighter again */
.cta-wrap + .section{padding-top:clamp(1.5rem,3vw,2.25rem)}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}.art-net .halo,.art-funnel .halo,.art-net circle[fill="#0fb5a6"],.art-funnel .fl,.art-funnel .fin{animation:none}}