/* GREENBOX · premium foundation · dark deep-space · green is the ONLY signal color (canon) · no orange */
:root{
  --void:#060708; --bg:#08090b; --bg2:#0b0c0e; --panel:#101114; --panel2:#131418;
  --line:rgba(80,200,120,.1); --line2:rgba(80,200,120,.17);
  --green:#50c878; --green-bright:#74e89a; --green-dim:#2f9c57; --green-deep:#154f31;
  --tan:#c8a98a; --ink:#e7ebe8; --ink-dim:#9aa4a0; --ink-faint:#5c6663;
  --glow: 0 0 32px rgba(80,200,120,.34), 0 0 80px rgba(80,200,120,.11);
  --glow-soft: 0 0 24px rgba(80,200,120,.18);
  --glow-red: 0 0 26px rgba(229,72,77,.32), 0 0 62px rgba(229,72,77,.1);
  --glow-white: 0 0 26px rgba(255,255,255,.15);
  --ease:cubic-bezier(.2,.7,.2,1);
  --maxw:1160px;
  --r-sm:12px; --r-md:16px; --r-lg:20px;   /* card radius family */
  --t-fast:.3s; --t-base:.4s; --t-slow:.6s;
  --fs-display: clamp(46px,6.4vw,86px);   /* hero */
  --fs-h2: clamp(30px,3.7vw,46px);        /* every section headline */
  --fs-h3: clamp(20px,1.9vw,23px);        /* card / verb titles */
  --fs-lede: clamp(17px,1.7vw,20px);      /* every subtitle / intro / lede */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(80,200,120,.06), transparent 60%),
    radial-gradient(900px 600px at 85% 20%, rgba(80,200,120,.04), transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:"Hanken Grotesk","Work Sans",system-ui,sans-serif;
  font-size:17px; line-height:1.55; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
/* fine grain for depth */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.025;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
h1,h2,h3,.display{font-family:"Satoshi","Hanken Grotesk",system-ui,sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.02;text-wrap:balance}
/* no single-word orphans anywhere */
h1,h2,h3,.dom,.vtxt,.hero .sub,.stage .sub{text-wrap:balance}
p,.lede,.lede-c,.sub,.vsub,.dt-pain,.dt-deliver,.out,.bio,.step p,.card p,.verb p,.qa p,.person .bio{text-wrap:pretty}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.kicker{font-family:"JetBrains Mono",monospace;font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--green);opacity:.85;display:block;margin-bottom:20px}
.dim{color:var(--ink-dim)} .faint{color:var(--ink-faint)}
.green{color:var(--green-bright)}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:20px 32px;backdrop-filter:blur(14px);background:linear-gradient(180deg,rgba(8,9,11,.7),transparent);border-bottom:1px solid transparent;transition:border-color .3s}
nav.scrolled{border-bottom:1px solid var(--line);background:rgba(8,9,11,.82)}
.brand{display:flex;align-items:flex-start;gap:11px}
.brand .mk{width:11px;height:11px;border-radius:3px;background:var(--green);box-shadow:var(--glow-soft)}
.brand .logo{height:36px;width:auto;display:block}
.brand-lock{display:flex;flex-direction:column;line-height:1;transition:opacity .35s var(--ease)}
.brand-tag{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--green-bright);margin-top:7px;white-space:nowrap}
nav.scrolled .brand-lock{opacity:0}
@media(max-width:560px){.brand-tag{display:none}}
.watermark{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);width:min(620px,74vw);opacity:.04;pointer-events:none;z-index:0}
.inst,.hero,.stage{position:relative}
.inst .wrap-z,.inst > *{position:relative;z-index:1}
.navlinks{display:flex;gap:30px;align-items:center;font-size:15px;color:var(--ink-dim)}
/* mobile: align the top-right controls (message icon + mode) with the LEFT logo, not the taller brand block */
@media(max-width:600px){nav{align-items:flex-start}.navlinks{margin-top:1px}}
.navlinks a:hover{color:var(--ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;padding:12px 22px;border-radius:var(--r-sm);
  border:1px solid var(--green-deep);color:var(--ink);background:linear-gradient(180deg,rgba(80,200,120,.12),rgba(80,200,120,.04));
  transition:.3s var(--ease);cursor:pointer}
.btn:hover{border-color:var(--green);box-shadow:var(--glow-soft);transform:translateY(-1px);background:linear-gradient(180deg,rgba(80,200,120,.2),rgba(80,200,120,.06))}
.btn-ghost{border-color:var(--line2);background:transparent}
.btn-ghost:hover{border-color:var(--ink-dim);box-shadow:none}
.btn .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}

/* hero */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:120px 0 60px;position:relative}
.hero h1{font-size:var(--fs-display);max-width:15ch;line-height:1.0}
.hero .sub{margin-top:22px;font-size:var(--fs-lede);color:var(--ink-dim);max-width:54ch;line-height:1.6}
.hero .cta-row{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap}

/* the reel */
.reel-sec{padding:60px 0 90px}
.reel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px;flex-wrap:wrap}
.reel-head h2{font-size:clamp(22px,3vw,30px)}
.reel-nav{display:flex;gap:10px}
.arrow{width:44px;height:44px;border-radius:var(--r-sm);border:1px solid var(--line2);background:var(--panel);color:var(--ink-dim);
  font-size:18px;cursor:pointer;transition:.3s var(--ease);display:grid;place-items:center}
.arrow:hover{border-color:var(--green);color:var(--green-bright);box-shadow:var(--glow-soft)}
.reel{display:flex;gap:24px;will-change:transform}
.reel::-webkit-scrollbar{display:none}
.tile{scroll-snap-align:center;flex:0 0 344px;height:410px;border-radius:var(--r-lg);position:relative;backface-visibility:hidden;
  border:1px solid var(--line);
  background:
    linear-gradient(165deg,rgba(19,20,24,.92),rgba(15,16,19,.96)),
    repeating-linear-gradient(0deg,transparent 0 19px,rgba(255,255,255,.014) 19px 20px),
    repeating-linear-gradient(90deg,transparent 0 19px,rgba(255,255,255,.014) 19px 20px);
  padding:26px 24px;display:flex;flex-direction:column;justify-content:flex-start;gap:8px;
  transition:transform .6s var(--ease),opacity .6s var(--ease),border-color .6s var(--ease),box-shadow .6s var(--ease);
  opacity:.4;transform:scale(.88);cursor:pointer;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.tile .top{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.tile .glyph{display:none}
.tile .rid{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.16em;color:var(--ink-faint);text-transform:uppercase;display:flex;align-items:center;gap:7px}
.tile .rid::before{content:"";width:5px;height:5px;border-radius:1px;border:1px solid var(--ink-faint);transition:.6s var(--ease)}
.tile.active .rid::before{background:var(--green);border-color:var(--green);box-shadow:0 0 8px var(--green)}
.tile.active .rid{color:var(--green)}
.tile.active .rid{color:var(--green)}
.bvz{position:relative;margin:2px 0 6px}
.bvz svg{width:100%;height:44px;display:block;overflow:visible}
.bvz .band{fill:rgba(80,200,120,.05);stroke:rgba(80,200,120,.14);stroke-width:1;stroke-dasharray:2 3;transition:1s var(--ease);vector-effect:non-scaling-stroke}
.bvz .curve{fill:none;stroke:var(--green-dim);stroke-width:1.4;opacity:.42;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  transition:stroke 1.1s var(--ease),opacity 1.1s var(--ease),filter 1.1s var(--ease)}
.bvz .eps{position:absolute;left:1px;bottom:-4px;font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.05em;color:var(--ink-faint);transition:color 1s var(--ease)}
.tile.active .bvz .band{fill:rgba(80,200,120,.12);stroke:rgba(80,200,120,.38)}
.tile.active .bvz .curve{stroke:var(--green-bright);opacity:1;filter:drop-shadow(0 0 6px rgba(80,200,120,.42))}
.tile.active .bvz .eps{color:var(--green)}
.tile::before{content:"";position:absolute;inset:0;border-radius:var(--r-lg);padding:1px;background:linear-gradient(160deg,rgba(80,200,120,.0),transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:.5s}
.tile .glyph{width:56px;height:56px;border-radius:var(--r-sm);border:1px solid var(--line2);display:grid;place-items:center;
  font-size:24px;color:var(--ink-dim);background:var(--void);transition:.5s}
.tile .dom{font-family:"Satoshi",sans-serif;font-weight:700;font-size:30px;letter-spacing:-.02em;line-height:1.02;color:var(--ink)}
.tile.active .dom{color:#fff}
.tile .out{margin-top:2px}
.tile .out{color:var(--green-bright);font-size:15px;font-weight:500;margin-top:6px}
.tile .tstake{color:var(--ink-dim);font-size:15px;margin-top:6px;line-height:1.35}
.tile.active .tstake{color:var(--ink)}
/* big stakes band: makes HOW BIG obvious immediately */
.stakes-band{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stakes-band .stat{padding:38px 26px;text-align:center;border-right:1px solid var(--line)}
.stakes-band .stat:last-child{border-right:none}
.snum{font-family:"Satoshi",sans-serif;font-weight:700;font-size:clamp(30px,4.4vw,50px);letter-spacing:-.025em;color:#fff;line-height:1}
.snum .u{color:var(--green-bright)}
.slab{color:var(--ink-dim);font-size:15px;margin-top:12px}
@media(max-width:820px){.stakes-band{grid-template-columns:1fr}.stakes-band .stat{border-right:none;border-bottom:1px solid var(--line)}}
.tile .seal{font-family:"JetBrains Mono",monospace;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);display:flex;align-items:center;gap:8px;margin-top:auto}
.tile .seal .chk{opacity:0;transition:.5s}
.tile.active{opacity:1;transform:scale(1);border-color:var(--green);border-width:2px;box-shadow:var(--glow),inset 0 0 0 1px rgba(80,200,120,.35);
  background:linear-gradient(165deg,rgba(21,79,49,.35),var(--panel))}
.tile.active::before{background:linear-gradient(160deg,rgba(80,200,120,.95),rgba(80,200,120,.1) 60%)}
.tile.active .glyph{color:var(--green-bright);border-color:var(--green);box-shadow:inset 0 0 20px rgba(80,200,120,.25),0 0 20px rgba(80,200,120,.2)}
.tile.active .seal{color:var(--green)}
.tile.active .seal .chk{opacity:1}
.tile.active .dom{color:#fff}

/* sections */
section.blk{padding:132px 0}
.blk h2{font-size:var(--fs-h2);max-width:20ch;line-height:1.05}
.lede{color:var(--ink-dim);font-size:var(--fs-lede);max-width:62ch;margin-top:22px;line-height:1.6}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.card{border:1px solid var(--line);border-radius:var(--r-md);padding:26px;background:linear-gradient(165deg,var(--panel2),var(--panel));transition:.4s var(--ease)}
.card:hover{border-color:var(--line2);transform:translateY(-3px)}
.card .n{font-family:"JetBrains Mono",monospace;color:var(--green);font-size:13px;letter-spacing:.1em}
.card h3{font-size:var(--fs-h3);margin:14px 0 8px}
.card p{color:var(--ink-dim);font-size:16px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px;counter-reset:s}
.step{border-left:1px solid var(--line2);padding:6px 0 6px 20px;position:relative}
.step::before{counter-increment:s;content:"0" counter(s);font-family:"JetBrains Mono",monospace;color:var(--green);font-size:13px}
.step h4{font-size:17px;margin:8px 0 6px;font-family:"Satoshi",sans-serif}
.step p{color:var(--ink-dim);font-size:15px}

/* team */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.person{border:1px solid var(--line);border-radius:var(--r-md);padding:26px;background:var(--panel);text-align:center}
.person .av{width:76px;height:76px;border-radius:50%;margin:0 auto 16px;background:radial-gradient(circle at 30% 30%,var(--green-deep),var(--void));border:1px solid var(--green-deep);display:grid;place-items:center;font-family:"Satoshi",sans-serif;font-weight:700;font-size:26px;color:var(--green-bright)}
.person .pface{width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:center top;margin:0 auto 18px;display:block;border:1px solid var(--line2);filter:grayscale(.15) contrast(1.02)}
.person{text-align:center;transition:.4s var(--ease)}
.person:hover .pface{border-color:var(--green-dim)}
.person .nm{font-family:"Satoshi",sans-serif;font-weight:700;font-size:18px}
.person .rl{color:var(--ink-dim);font-size:15px;margin-top:4px}
.person .bio{color:var(--ink-faint);font-size:14px;margin-top:10px}
.advline{margin-top:26px;text-align:center;color:var(--green);font-size:14px;font-family:"JetBrains Mono",monospace;font-weight:500;line-height:1.7;letter-spacing:.01em}
@media(max-width:620px){.advline br{display:none}}
.teamshot{max-width:780px;margin:0 auto;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:0 50px 100px -60px rgba(0,0,0,.85);aspect-ratio:16/10}
.teamshot img{width:100%;height:100%;object-fit:cover;object-position:center 32%;display:block;filter:saturate(.92) contrast(1.02)}
.teamnames{display:none}   /* mobile only: an equidistant names row under the photo */
@media(max-width:620px){
  #team .teamshot{margin-bottom:18px !important}   /* clear gap so the names row is never clipped by the photo */
  .teamnames{display:flex;justify-content:space-around;align-items:flex-start;gap:8px;margin:0 0 36px;text-align:center}
  .teamnames .tn{flex:1;min-width:0}
  .teamnames .tn b{display:block;font-family:"Satoshi",sans-serif;font-weight:500;font-size:12px;color:var(--ink);line-height:1.25}
  .teamnames .tn i{display:block;font-style:normal;font-family:"JetBrains Mono",monospace;font-size:8.5px;letter-spacing:.02em;text-transform:uppercase;color:var(--green);margin-top:3px;line-height:1.25}
  .fname{display:none}   /* on mobile the names live in the row below, not on the faces */
}
.teamnames span{position:relative}
.teamnames span:not(:last-child)::after{content:"·";position:absolute;right:-19px;color:var(--ink-faint)}
#team{text-align:center}
#team .lede{margin-left:auto;margin-right:auto}
#team h2{margin-left:auto;margin-right:auto}

/* cta band */
.cta-band{padding:148px 0;text-align:center}
.cta-band h2{font-size:var(--fs-h2)}
.cta-band p{color:var(--ink-dim);margin:22px auto 34px;max-width:48ch;font-size:var(--fs-lede)}

footer{position:relative;padding:72px 0 160px;color:var(--ink-faint);font-size:13.5px}
footer::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(1100px,88%);height:1px;background:linear-gradient(90deg,transparent,rgba(80,200,120,.22),transparent)}
.foot-row{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
.foot-copy{color:var(--ink-faint);letter-spacing:.015em}

/* consent banner */
/* consent card · resembles the domain problem cards (paneled, hairline border, soft green glow) */
.consent{position:fixed;bottom:20px;left:20px;right:20px;max-width:540px;margin:0 auto;z-index:200;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(19,20,24,.96),rgba(11,12,14,.96));backdrop-filter:blur(16px);
  padding:18px 20px;display:flex;flex-direction:column;gap:13px;
  box-shadow:var(--glow-soft),0 24px 70px rgba(0,0,0,.55),inset 0 0 0 1px rgba(80,200,120,.05);transition:.5s var(--ease)}
.consent.hide{transform:translateY(140%);opacity:0;pointer-events:none}
.consent strong{display:block;font-family:"Satoshi",sans-serif;font-size:15px;font-weight:600;color:var(--ink);margin-bottom:6px}
.consent p{font-size:13px;color:var(--ink-dim);line-height:1.5}
.consent p a{color:var(--green-bright);text-decoration:none}
/* options in a single row · reject · essential · accept all */
.consent-act{display:flex;gap:8px;align-items:stretch;flex-wrap:nowrap}
.consent .btn{flex:1 1 0;min-width:0;justify-content:center;text-align:center;padding:10px 8px;font-size:11.5px;letter-spacing:.03em;line-height:1.2;white-space:normal}
/* Accept all · the encouraged primary (filled green + a resting glow), rightmost */
.consent .btn-accent{border-color:var(--green);background:linear-gradient(180deg,rgba(80,200,120,.26),rgba(80,200,120,.08));color:var(--ink);box-shadow:var(--glow-soft)}
.consent .btn-accent:hover{border-color:var(--green);background:linear-gradient(180deg,rgba(80,200,120,.36),rgba(80,200,120,.16));box-shadow:var(--glow)}
@media(max-width:600px){.consent{left:12px;right:12px;padding:16px 15px}.consent .btn{font-size:11px;padding:9px 6px;letter-spacing:.02em}}
/* subtle "Cookie settings" reopen control (policy contact box) */
.cookie-cog{display:inline-flex;align-items:center;gap:6px;margin-left:14px;padding:5px 12px;border:1px solid var(--line2);border-radius:999px;background:transparent;color:var(--ink-dim);font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.03em;cursor:pointer;transition:.25s var(--ease);vertical-align:middle;white-space:nowrap}
.cookie-cog:hover{border-color:var(--green);color:var(--green-bright)}
.cookie-cog svg{width:13px;height:13px;flex-shrink:0}

@media(max-width:820px){.grid3,.steps,.team-grid{grid-template-columns:1fr}.navlinks{display:none}.tile{flex-basis:260px}}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ===== coverflow: viewport-CENTERED selection (active tile dead-center, neighbors peek) ===== */
.coverflow{position:relative;width:100vw;left:50%;margin-left:-50vw;overflow:hidden;padding:72px 0;perspective:1900px;perspective-origin:50% 46%}
.coverflow .reel{gap:28px;transform-style:preserve-3d}
.coverflow .tile{filter:saturate(.72);transition:transform .6s var(--ease),opacity .6s var(--ease),box-shadow .6s var(--ease),border-color .6s var(--ease)}
.coverflow .tile.active{filter:none;box-shadow:var(--glow),0 46px 90px -34px rgba(0,0,0,.85)}
.coverflow .tile:not(.active){box-shadow:0 30px 60px -40px rgba(0,0,0,.7)}
@keyframes breathe{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.78)}}
/* domain detail panel (updates on selection = the depth) */
.detail{max-width:640px;margin:34px auto 0;text-align:center;min-height:118px;transition:.5s var(--ease)}
.detail .dt-pain{color:var(--ink-dim);font-size:17px;max-width:52ch;margin:0 auto}
.detail .dt-deliver{margin-top:14px;font-family:"Satoshi",sans-serif;font-weight:500;font-size:18px;color:#fff}
.detail .dt-deliver .g{color:var(--green-bright)}
.detail .dt-tag{font-family:"JetBrains Mono",monospace;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--green);margin-bottom:12px;display:inline-block}
.detail.swap{opacity:0;transform:translateY(8px)}

/* deeper: verbs, deliverable, faq */
.verbs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.verb{border:none;border-radius:var(--r-lg);padding:30px;background:linear-gradient(180deg,rgba(255,255,255,.038),rgba(255,255,255,.012));box-shadow:inset 0 0 0 1px rgba(80,200,120,.08);position:relative;overflow:hidden;transition:box-shadow .4s var(--ease),transform .4s var(--ease)}
.verb .vk{font-family:"JetBrains Mono",monospace;font-size:14px;letter-spacing:.16em;color:var(--green);text-transform:uppercase}
.verb h3{font-size:var(--fs-h3);margin:12px 0 10px}
.verb p{color:var(--ink-dim);font-size:16px}
.verb .tagm{margin-top:16px;font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--ink-faint);letter-spacing:.12em;text-transform:uppercase}
.verb.lead{box-shadow:inset 0 0 0 1px rgba(80,200,120,.08)}
.deliverable{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px}
.chip{border:1px solid var(--line2);border-radius:var(--r-sm);padding:14px 18px;background:var(--panel);font-size:15px;display:flex;align-items:center;gap:10px}
.chip .fx{font-family:"JetBrains Mono",monospace;color:var(--green);font-size:13px}
.faq{margin-top:32px}
.qa{border-bottom:1px solid var(--line);padding:22px 0;cursor:pointer}
.qa:first-child{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:none}
.qa summary{font-family:"Satoshi",sans-serif;font-weight:500;font-size:19px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";color:var(--green);font-size:24px;transition:.3s}
.qa[open] summary::after{transform:rotate(45deg)}
.qa p{color:var(--green-bright);font-size:17px;margin-top:14px;max-width:66ch}
.qa p strong{color:inherit;font-weight:700}
@media(max-width:820px){.verbs{grid-template-columns:1fr}.coverflow .reel{padding-inline:calc(50vw - 130px)}}

/* value up front: who / what / outcome */
.vchips{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.vchip{border:1px solid var(--line2);border-radius:999px;padding:10px 20px;font-size:14.5px;color:var(--ink-dim);display:flex;align-items:center;gap:9px;background:rgba(16,17,20,.5)}
.vchip .d{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.valuebar{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin:44px auto 0;max-width:960px;background:linear-gradient(180deg,var(--panel),var(--bg2))}
.vb{padding:26px 28px;border-right:1px solid var(--line);text-align:left}
.vb:last-child{border-right:none}
.vb .vlab{font-family:"JetBrains Mono",monospace;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.vb .vtxt{margin-top:14px;color:#fff;font-size:clamp(19px,2.1vw,25px);font-weight:600;font-family:"Satoshi",sans-serif;line-height:1.2;letter-spacing:-.01em}
.vb .vsub{color:var(--ink-dim);font-size:15px;margin-top:6px}
@media(max-width:820px){.valuebar{grid-template-columns:1fr}.vb{border-right:none;border-bottom:1px solid var(--line)}}
/* header/subtext rhythm */
.inst .kicker{letter-spacing:.18em}
.lede-c{max-width:56ch;margin:22px auto 0;text-align:center;color:var(--ink-dim);font-size:var(--fs-lede);line-height:1.6;text-wrap:balance}

/* inline inquiry (unfolds from the CTA: identify domain -> collect required info) */
.inquiry{max-width:640px;margin:0 auto;text-align:left;overflow:hidden;max-height:0;opacity:0;transition:max-height .6s var(--ease),opacity .5s var(--ease),margin .6s var(--ease)}
.inquiry.open{max-height:660px;opacity:1;margin-top:40px}
.inq-step{display:none}
.inq-step.on{display:flex;flex-direction:column;gap:14px;animation:inqin .4s var(--ease)}
@keyframes inqin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.inq-q{font-family:"Satoshi",sans-serif;font-weight:500;font-size:19px;text-align:center;margin-bottom:2px;color:var(--ink)}
.inq-domains{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.idom{border:1px solid var(--line2);background:var(--panel);color:var(--ink-dim);border-radius:var(--r-sm);padding:12px 21px;font-size:15px;font-family:inherit;cursor:pointer;transition:.3s var(--ease)}
.idom:hover{border-color:var(--green-dim);color:var(--ink);transform:translateY(-1px)}
.idom.sel{border-color:var(--green);color:#fff;box-shadow:var(--glow-soft);background:linear-gradient(180deg,rgba(80,200,120,.14),rgba(80,200,120,.03))}
.inq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.inquiry input,.inquiry textarea{width:100%;background:var(--panel);border:1px solid var(--line2);border-radius:var(--r-sm);padding:14px 16px;color:var(--ink);font-family:inherit;font-size:15px;transition:.3s var(--ease)}
.inquiry input::placeholder,.inquiry textarea::placeholder{color:var(--ink-faint)}
.inquiry input:focus,.inquiry textarea:focus{outline:none;border-color:var(--green);box-shadow:var(--glow-soft)}
.inquiry input.err{border-color:var(--danger)}
.inquiry textarea{resize:vertical;min-height:88px}
.inquiry button.sending{opacity:.6;pointer-events:none}
.inq-fallback{display:none;margin:4px 0 0;font-size:13.5px;color:var(--danger)}
.inq-fallback.on{display:block;animation:inqin .4s var(--ease)}
.inq-fallback a{color:var(--green-bright)}
.inq-actions{display:flex;justify-content:space-between;gap:12px;margin-top:18px}
.inq-dom-tag,.inq-dom-tag2{color:var(--green-bright)}
.inq-done{display:none;text-align:center;padding:16px 0}
.inq-done.on{display:block;animation:inqin .5s var(--ease)}
.inq-check{width:58px;height:58px;border-radius:50%;border:1px solid var(--green);color:var(--green-bright);display:grid;place-items:center;font-size:25px;margin:0 auto 18px;box-shadow:var(--glow-soft)}
.inq-done-t{font-family:"Satoshi",sans-serif;font-weight:500;font-size:19px;color:var(--ink)}
/* referral · share-it-yourself block on the thank-you screen */
.inq-refer{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.inq-refer-h{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:14px}
.inq-refer-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.inq-refer-btn{font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;padding:9px 16px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--ink);text-decoration:none;transition:border-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease);white-space:nowrap}
.inq-refer-btn:hover{border-color:var(--green);color:var(--green-bright);box-shadow:var(--glow-soft)}
.inq-refer-note{font-size:12.5px;color:var(--green);margin-top:12px;min-height:16px;opacity:0;transition:opacity .3s var(--ease)}
.inq-refer-note.on{opacity:1}
@media(max-width:600px){.inq-grid{grid-template-columns:1fr}.inq-refer-actions{flex-direction:column}.inq-refer-btn{width:100%;text-align:center}}

/* tile: explicit Today -> Certified (before vs after), unmistakable */
.tile .dom{margin-bottom:4px}
.ba{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.ba-row{display:flex;flex-direction:column;gap:4px}
.ba-lab{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.ba-txt{font-size:15px;line-height:1.3}
.before .ba-lab{color:var(--ink-faint)}
.before .ba-txt{color:var(--ink-dim)}
.after{position:relative;padding-left:14px}
.after::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:2px;border-radius:2px;background:var(--green-deep);transition:.6s var(--ease)}
.after .ba-lab{color:var(--green)}
.after .ba-txt{color:#fff;font-weight:500}
.tile.active .after::before{background:var(--green);box-shadow:0 0 10px var(--green)}

/* .teamnames is MOBILE-ONLY (row under the photo) · base display:none is set above, shown only in
   @media(max-width:620px). On web the names live in the hover .flabel. Guarded by responsive-guard. */
.tperson{display:inline-flex;flex-direction:column;align-items:center;gap:0;color:var(--ink);transition:color .3s var(--ease)}
.tperson .tn{font-family:"Satoshi",sans-serif;font-weight:500;font-size:17px;display:inline-flex;align-items:center;gap:8px}
.tperson .tn .li{width:15px;height:15px;color:var(--green);opacity:.4;transition:.3s var(--ease)}
.tperson .tr{font-size:12px;color:var(--ink-faint);max-height:0;opacity:0;overflow:hidden;transition:.3s var(--ease);font-family:"JetBrains Mono",monospace;letter-spacing:.04em;text-transform:uppercase}
.tperson:hover{color:#fff}
.tperson:hover .tn .li{opacity:1;transform:translateY(-1px)}
.tperson:hover .tr{max-height:24px;opacity:1;margin-top:5px}

/* interactive team photo: faces reveal name/title, link to LinkedIn */
.teamshot{position:relative}
.face{position:absolute;width:13%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:var(--r-md);cursor:pointer;display:block;-webkit-tap-highlight-color:transparent}
@supports not (aspect-ratio:1){.face{height:0;padding-bottom:13%}}
.fring{position:absolute;inset:0;border:1.5px solid rgba(80,200,120,.9);border-radius:var(--r-md);opacity:0;transform:scale(.82);transition:.3s var(--ease);box-shadow:0 0 22px rgba(80,200,120,.35),inset 0 0 14px rgba(80,200,120,.12)}
.face:hover .fring,.face:focus .fring,.face:focus-visible .fring,.face:active .fring{opacity:1;transform:scale(1)}
.face:hover,.face:focus,.face:focus-visible,.face:active{z-index:6;outline:none}
.flabel{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px);background:rgba(9,13,11,.94);border:1px solid rgba(80,200,120,.34);border-radius:var(--r-sm);padding:9px 13px;white-space:nowrap;opacity:0;pointer-events:none;transition:.3s var(--ease);display:flex;flex-direction:column;gap:3px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center;box-shadow:0 12px 34px rgba(0,0,0,.5)}
.flabel b{font-family:"Satoshi",sans-serif;font-weight:500;font-size:15px;color:#fff}
.flabel i{font-style:normal;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.face:hover .flabel,.face:focus .flabel,.face:focus-visible .flabel,.face:active .flabel{opacity:1;transform:translateX(-50%) translateY(0)}
/* touch: first tap reveals the label (JS adds .show), second tap opens LinkedIn */
.face.show{z-index:6}
.face.show .fring{opacity:1;transform:scale(1)}
.face.show .flabel{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:600px){.wrap{padding:0 20px}
  /* names live in the always-on roster below the photo; hide the overlay label so it can't clip */
  .face .flabel{display:none}
  .teamcap{gap:14px 0}.teamcap .tcp{flex-basis:100%}}
.teamhint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);background:rgba(0,0,0,.34);padding:5px 12px;border-radius:var(--r-lg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;transition:.4s var(--ease)}
.teamshot:hover .teamhint{opacity:0}
/* static name pinned under each face · always visible · no link */
.flabel-li{width:15px;height:15px;flex:none;color:var(--green);margin:3px auto 0;display:block;opacity:.9}
@media(max-width:600px){.fname{font-size:9.5px;padding:2px 6px}}
.teamcap{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 40px;margin-top:24px;text-align:center}
.teamcap .tcp{text-decoration:none;transition:.2s var(--ease)}
.teamcap b{display:block;font-family:"Satoshi",sans-serif;font-weight:500;font-size:17px;color:var(--ink)}
.teamcap i{display:block;font-style:normal;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--green);margin-top:3px}
.teamcap .tcp:hover b{color:#fff}

/* stakes stat: label on top, number below (reads "One failed batch -> $1M-$9M") */
.stakes-band .slab{margin:0 0 10px;font-family:"JetBrains Mono",monospace;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.stakes-band .snum{margin:0}

/* hover glow for mouse: green default, white on the photo (problem section = red, set inline) */
.card:hover{border-color:var(--green);box-shadow:var(--glow-soft);transform:translateY(-3px)}
.verb{transition:.4s var(--ease)}
.verb:hover{box-shadow:inset 0 0 0 1px rgba(80,200,120,.5),var(--glow);transform:translateY(-3px)}
.person:hover{border-color:var(--green);box-shadow:var(--glow-soft);transform:translateY(-3px)}
.qa{transition:box-shadow .3s var(--ease),padding .3s var(--ease)}
.qa summary{transition:color .3s var(--ease)}
.qa:hover summary{color:#fff}
.qa:hover summary::after{color:var(--green-bright)}
.chip{transition:.3s var(--ease)}
.chip:hover{border-color:var(--green);box-shadow:var(--glow-soft);color:var(--ink)}
.vchip{transition:.3s var(--ease)}
.vchip:hover{border-color:var(--green);box-shadow:var(--glow-soft);color:var(--ink)}
.valuebar{transition:.4s var(--ease)}
.valuebar:hover{box-shadow:var(--glow-soft)}
.teamshot{transition:box-shadow .4s var(--ease)}
.teamshot:hover{box-shadow:0 50px 100px -60px rgba(0,0,0,.85),var(--glow-white)}

/* journey: scroll-progress spine at top (green) */
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:300;background:linear-gradient(90deg,var(--green-dim),var(--green-bright));box-shadow:0 0 10px rgba(80,200,120,.6);transition:width .12s linear;pointer-events:none}

/* footer social links */
.foot-links{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.foot-links a{color:var(--ink-dim);transition:color .3s var(--ease)}
.foot-links a:hover{color:var(--green)}
.foot-links .soc-link{display:inline-flex;align-items:center}
.foot-links .soc{width:18px;height:18px;display:block}

/* domain tile: problem sentence moved inside the box */
.tprob{color:var(--ink-faint);font-size:13.5px;line-height:1.44;margin:2px 0 2px}
.tile.active .tprob{color:var(--ink-dim)}
.tile .ba{margin-top:auto}
.tile .seal{margin-top:16px}
/* static, non-changing line beneath the reel */
.reel-static{text-align:center;margin-top:30px;color:var(--ink-dim);font-family:"Satoshi",sans-serif;font-weight:500;font-size:var(--fs-lede)}

/* value-bar: equal-height rows, big + clean */
.vb{padding:30px 30px}
.vb .vtxt{min-height:2.4em;display:flex;align-items:flex-start}
.vdomains{text-align:center;margin-top:20px;color:var(--ink-dim);font-size:16px;letter-spacing:.02em}

/* ===== Proof of Process visual (pharma example) ===== */
.pop-card{max-width:880px;margin:46px auto 0;border-radius:var(--r-lg);background:linear-gradient(165deg,var(--panel2),var(--panel));padding:24px 32px 24px;position:relative;overflow:visible;box-shadow:var(--glow-soft),0 46px 96px -54px rgba(0,0,0,.85)}
.pop-head{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.pop-dom{font-family:"Satoshi",sans-serif;font-weight:700;font-size:15px;color:#fff;background:linear-gradient(180deg,rgba(80,200,120,.2),rgba(80,200,120,.05));border:1px solid rgba(80,200,120,.4);border-radius:var(--r-sm);padding:4px 12px}
.pop-meta{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.pop-live{margin-left:auto;display:flex;align-items:center;gap:7px;font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.pop-live .pulse{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:breathe 3.6s var(--ease) infinite}
.pop-svg{width:100%;height:auto;display:block}
.pgrid{stroke:rgba(80,200,120,.09);stroke-width:1}
.pax,.pay{fill:var(--ink-faint);font-family:"JetBrains Mono",monospace;font-size:11px}
.pax{text-anchor:middle}.pay{text-anchor:end}
.paxtitle,.paytitle{fill:var(--ink-dim);font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;text-anchor:middle}
.pop-band{fill:rgba(80,200,120,.14);stroke:rgba(80,200,120,.4);stroke-width:1}
.pop-curve{fill:none;stroke:var(--green-bright);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(80,200,120,.5));stroke-dasharray:1;stroke-dashoffset:1}
.pop-curve-ext{fill:none;stroke:var(--green-dim);stroke-width:2;stroke-dasharray:4 4;opacity:.5}
.pop-dot{fill:#fff;stroke:var(--void);stroke-width:2;opacity:0}
.pop-spec{stroke:var(--ink-dim);stroke-width:1.3;stroke-dasharray:5 5;opacity:.6}
.pspec{fill:var(--ink-dim);font-family:"JetBrains Mono",monospace;font-size:10.5px;text-anchor:end}
.pop-beyond{fill:rgba(255,255,255,.02)}
.pbeyond{fill:var(--ink-faint);font-family:"JetBrains Mono",monospace;font-size:9.5px;text-anchor:middle;letter-spacing:.04em}
.pop-legend{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;margin-top:14px;font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--ink-dim)}
.pl{display:flex;align-items:center;gap:8px}
.pl-dot{width:9px;height:9px;border-radius:50%;background:#fff}
.pl-line{width:18px;height:2.6px;background:var(--green-bright);border-radius:2px}
.pl-band{width:18px;height:11px;background:rgba(80,200,120,.2);border:1px solid rgba(80,200,120,.4);border-radius:3px}
.pl-spec{width:18px;border-top:1.4px dashed var(--ink-dim)}
.pop-verdict{display:flex;flex-wrap:wrap;gap:12px 22px;justify-content:center;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.pv{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);display:flex;align-items:center;gap:6px}
.pv.ok{color:var(--green)}.pv .chk{color:var(--green);font-weight:700}
.pop-note{text-align:center;margin-top:16px;font-size:12.5px;color:var(--ink-faint);line-height:1.5;text-wrap:balance;max-width:60ch;margin-left:auto;margin-right:auto}
.pop-card.in .pop-curve{animation:popdraw 1.7s var(--ease) .3s forwards}
.pop-card.in .pop-band{animation:popfade .9s var(--ease) .15s backwards}
.pop-card.in .pop-dot{animation:poppop .5s var(--ease) 1.4s backwards;opacity:1}
@keyframes popdraw{to{stroke-dashoffset:0}}
@keyframes popfade{from{opacity:0}to{opacity:1}}
@keyframes poppop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.pop-curve{stroke-dashoffset:0}.pop-band,.pop-dot{opacity:1;animation:none}.pop-card.in .pop-curve{animation:none}}
@media(max-width:600px){.pop-card{padding:18px 14px}.pop-legend{gap:8px 14px;font-size:11px}}

/* dead-simple PoP: only band + dots + tiny hints */
.pop-band{fill:rgba(80,200,120,.16);stroke:rgba(80,200,120,.45);stroke-width:1.5}
.pop-dot{fill:#fff;stroke:var(--void);stroke-width:2.5;opacity:0}
.pop-inband{fill:rgba(116,232,154,.75);font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-anchor:middle}
.pop-axhint{fill:var(--ink-faint);font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.pop-axend{text-anchor:end}
.pop-verdict{border-top:none;padding-top:6px}
.pv{font-size:14px}

/* PoP smart visual: bad batch (red) caught leaving the proven range */
.pop-badline{fill:none;stroke:#e5484d;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:2 6;opacity:.9}
.pop-baddot{fill:#e5484d;stroke:var(--void);stroke-width:2.5;opacity:0}
.pop-flag{fill:none;stroke:#e5484d;stroke-width:2;opacity:0}
.pop-tag-bad{fill:#e5484d;font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;text-anchor:middle;font-weight:600}
.pop-tag-ok{fill:var(--green);font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;text-anchor:middle;font-weight:600}
.pv.bad{color:#e5484d}.pv.bad .chk{color:#e5484d}
.pop-card.in .pop-baddot{animation:poppop .5s var(--ease) 1.6s backwards;opacity:1}
.pop-card.in .pop-flag{animation:popfade .6s var(--ease) 1.9s backwards;opacity:1}

/* PoP spec-line chart (demo-proven): limit line + pass/fail zones + good/bad toggle */
.pop-zone-pass{fill:var(--green);opacity:.06}
.pop-zone-fail{fill:#e5484d;opacity:.06}
.pop-limit{stroke:var(--ink-dim);stroke-width:1.5;stroke-dasharray:6 5;opacity:.85}
.pop-limit-lab{fill:var(--ink-dim);font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.pop-zone-lab{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;text-anchor:end;opacity:.8}
.pop-zpass{fill:var(--green)}.pop-zfail{fill:#e5484d}
.pop-goodline{fill:none;stroke:var(--green-bright);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px rgba(80,200,120,.45))}
.pop-badline{fill:none;stroke:#e5484d;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(229,72,77,.5))}
.pop-flag{fill:none;stroke:#e5484d;stroke-width:2.4}
.pop-tag-bad{fill:#e5484d;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-anchor:middle;font-weight:700}
.pop-ylab{fill:var(--ink-faint);font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;text-anchor:middle}
.pop-toggle{margin-left:auto;display:inline-flex;padding:3px;gap:3px;border-radius:999px;background:var(--panel);box-shadow:inset 0 0 0 1.5px rgba(80,200,120,.14)}
.pop-tog{font-family:"Satoshi",sans-serif;font-weight:600;font-size:13px;padding:7px 16px;border-radius:999px;border:none;cursor:pointer;color:var(--ink-dim);background:transparent;transition:.3s var(--ease)}
.pop-tog.on{color:#04220f;background:linear-gradient(180deg,var(--green-bright),var(--green-dim))}
.pop-tog.on[data-mode="bad"]{color:#fff;background:linear-gradient(180deg,#e5675c,#c8392f)}

.pop-verdict{border-top:none;padding-top:8px;min-height:26px}

/* PoP causal trace: root-cause chain that lights up on a bad batch */
.pop-cause{margin-top:18px;text-align:center}
.pcx-lab{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:12px}
.pcx-chain{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.pcx-node{font-family:"JetBrains Mono",monospace;font-size:12.5px;letter-spacing:.02em;padding:9px 16px;border-radius:var(--r-sm);background:rgba(80,200,120,.07);box-shadow:inset 0 0 0 1.5px rgba(80,200,120,.14);color:var(--ink-dim);transition:.4s var(--ease)}
.pcx-arw{color:var(--ink-faint);font-size:16px;transition:.4s var(--ease)}
.pcx-cap{max-width:52ch;margin:14px auto 0;font-size:14px;line-height:1.55;color:var(--ink-dim)}
/* good mode (default): calm */
.pop-card .pcx-bad-lab,.pop-card .pcx-bad{display:none}
.pop-card.bad .pcx-good-lab,.pop-card.bad .pcx-good{display:none}
.pop-card.bad .pcx-bad-lab{display:block}
.pop-card.bad .pcx-bad{display:block}
/* bad mode: light the chain red, root pulses */
.pop-card.bad .pcx-node{background:rgba(229,72,77,.12);box-shadow:inset 0 0 0 1px rgba(229,72,77,.4);color:#f2c9c7}
.pop-card.bad .pcx-arw{color:#e5484d}
.pop-card.bad .pcx-root{background:rgba(229,72,77,.22);box-shadow:inset 0 0 0 1px rgba(229,72,77,.75),0 0 20px rgba(229,72,77,.4);color:#fff;animation:pcxpulse 1.8s var(--ease) infinite}
.pop-card.bad .pcx-out{color:#fff}
@keyframes pcxpulse{0%,100%{box-shadow:inset 0 0 0 1px rgba(229,72,77,.75),0 0 20px rgba(229,72,77,.35)}50%{box-shadow:inset 0 0 0 1px rgba(229,72,77,.9),0 0 30px rgba(229,72,77,.6)}}

/* ===== live bioreactor visual ===== */
.bio-stage{display:flex;align-items:center;gap:26px;flex-wrap:wrap;justify-content:center;margin:8px 0 4px}
.bio-svg{width:232px;height:auto;flex-shrink:0}
.bio-vessel{fill:rgba(255,255,255,.02);stroke:rgba(80,200,120,.4);stroke-width:2}
.bio-broth{fill:rgba(47,156,87,.5);transition:fill .5s var(--ease)}
.bio-surface{fill:rgba(116,232,154,.5);transition:fill .5s var(--ease)}
.bio-bubble{fill:rgba(180,240,205,.7);animation:brise 2.8s linear infinite}
@keyframes brise{0%{transform:translateY(0);opacity:0}12%{opacity:.85}100%{transform:translateY(-130px);opacity:0}}
.bio-shaft{stroke:var(--ink-dim);stroke-width:3;stroke-linecap:round}
.bio-impeller{fill:var(--ink-dim);transform-box:fill-box;transform-origin:center;animation:bstir 1.15s ease-in-out infinite;transition:fill .5s var(--ease)}
@keyframes bstir{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.32)}}
.bio-motor{fill:var(--panel2);stroke:var(--ink-dim);stroke-width:1.4}
.bio-rotor{stroke:var(--green-bright);stroke-width:2.6;stroke-linecap:round;transform-box:fill-box;transform-origin:center;animation:bspin .6s linear infinite}
@keyframes bspin{to{transform:rotate(360deg)}}
.bio-alarm{fill:none;stroke:#e5484d;stroke-width:2;opacity:0}
.bio-sensors{display:flex;flex-direction:column;gap:12px}
.bio-chip{display:flex;align-items:center;gap:12px;padding:11px 16px;border-radius:var(--r-sm);background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(80,200,120,.14);min-width:186px;transition:.4s var(--ease)}
.bio-dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 9px var(--green);flex-shrink:0;transition:.4s}
.bio-txt{display:flex;flex-direction:column;gap:2px}
.bio-nm{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.bio-v{font-family:"Satoshi",sans-serif;font-weight:600;font-size:15px;color:#fff}
.bio-bv{display:none;color:#e5484d}
.pop-card.bad .bio-gv{display:none}
.pop-card.bad .bio-bv{display:inline}
.pop-card.bad .bio-dot{background:#e5484d;box-shadow:0 0 9px #e5484d}
.pop-card.bad .bio-chip{box-shadow:inset 0 0 0 1px rgba(229,72,77,.4)}
.pop-card.bad .bio-broth{fill:rgba(120,92,58,.45)}
.pop-card.bad .bio-surface{fill:rgba(150,120,78,.4)}
.pop-card.bad .bio-bubble{opacity:0;animation:none}
.pop-card.bad .bio-impeller{fill:#e5484d;animation-duration:3.6s}
.pop-card.bad .bio-rotor{stroke:#e5484d;animation-duration:2.8s}
.pop-card.bad .bio-alarm{opacity:1;animation:bpulse 1.6s ease-in-out infinite}
@keyframes bpulse{0%,100%{opacity:.45}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.bio-bubble,.bio-impeller,.bio-rotor{animation:none}}
@media(max-width:600px){.bio-stage{gap:16px}.bio-svg{width:184px}.bio-chip{min-width:160px}}

/* ===== live instrument: physics signal vs proven bound ===== */
.inst-svg{width:100%;height:auto;display:block;margin:6px 0 2px}
.inst-band{fill:rgba(80,200,120,.13);stroke:rgba(80,200,120,.32);stroke-width:1}
.inst-model{fill:none;stroke:rgba(80,200,120,.5);stroke-width:1.4;stroke-dasharray:3 4}
.inst-lab{fill:var(--ink-faint);font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
.inst-ylab{fill:var(--ink-faint);font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;text-anchor:middle}
.inst-trace{fill:none;stroke:var(--green-bright);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px rgba(80,200,120,.45));stroke-dasharray:1;stroke-dashoffset:1;animation:instdraw 2.6s var(--ease) forwards}
.inst-trace-r{fill:none;stroke:#e5484d;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(229,72,77,.5));stroke-dasharray:1;stroke-dashoffset:1;animation:instdraw 1s var(--ease) 1.75s backwards;animation-fill-mode:forwards}
@keyframes instdraw{to{stroke-dashoffset:0}}
.inst-live{fill:var(--green-bright);animation:instpulse 1.6s var(--ease) infinite}
@keyframes instpulse{0%,100%{opacity:1}50%{opacity:.35}}
.inst-flag{fill:none;stroke:#e5484d;stroke-width:2.4;animation:bpulse 1.6s ease-in-out infinite}
.inst-flag-lab{fill:#e5484d;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-anchor:start;font-weight:700}
.inst-bad{display:none}
.pop-card.bad .inst-good{display:none}
.pop-card.bad .inst-bad{display:block}
/* sensors as a row under the trace */
.bio-sensors{flex-direction:row;justify-content:center;flex-wrap:wrap;margin-top:12px}
/* cause only exists on a fault */
.pop-cause{display:none}
.pop-card.bad .pop-cause{display:block}
@media(prefers-reduced-motion:reduce){.inst-trace,.inst-trace-r{animation:none;stroke-dashoffset:0}.inst-live,.inst-flag{animation:none}}

/* real-data instrument: aerobic floor + agitator-drop cause marker */
.inst-floor{stroke:var(--ink-dim);stroke-width:1.4;stroke-dasharray:6 5;opacity:.8}
.inst-floor-lab{fill:var(--ink-dim);font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
.inst-cause{stroke:rgba(229,72,77,.5);stroke-width:1.3;stroke-dasharray:3 4}
.inst-cause-lab{fill:#e5675c;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.05em;text-transform:uppercase;text-anchor:end}

/* ===== PROCESS PROOF: proof drives through the process, stage by stage ===== */
.pp{padding:36px 0 28px;display:flex;justify-content:center}
.pp-row{display:flex;align-items:flex-start;justify-content:center}
.pp-node{display:flex;flex-direction:column;align-items:center;gap:12px;width:76px;opacity:.4;transition:opacity .4s var(--ease);flex-shrink:0}
.pp-ring{width:50px;height:50px;border-radius:var(--r-md);box-shadow:inset 0 0 0 1.5px rgba(80,200,120,.22);background:rgba(255,255,255,.02);display:grid;place-items:center;transition:box-shadow .5s var(--ease),background .5s var(--ease)}
.pp-nm{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-faint);transition:color .3s;text-align:center;line-height:1.3}
.pp-node.lit{opacity:1}
.pp-node.lit .pp-ring{box-shadow:inset 0 0 0 1.5px var(--green),0 0 26px 3px rgba(80,200,120,.32);background:rgba(80,200,120,.1)}
.pp-node.lit .pp-ring::after{content:"\2713";color:var(--green-bright);font-size:21px;font-weight:800}

.pp-node.lit .pp-nm{color:var(--green)}
.pp-node.lit-bad{opacity:1}
.pp-node.lit-bad .pp-ring{box-shadow:inset 0 0 0 1.5px #e5484d,0 0 28px 3px rgba(229,72,77,.38);background:rgba(229,72,77,.14);animation:bpulse 1.5s ease-in-out infinite}
.pp-node.lit-bad .pp-ring::after{content:"\2717";color:#ff6b60;font-size:21px;font-weight:800}

.pp-node.lit-bad .pp-nm{color:#e5675c}
.pp-link{width:42px;height:2px;border-radius:2px;background:rgba(80,200,120,.14);margin-top:24px;flex-shrink:0;transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.pp-link.lit{background:var(--green);box-shadow:0 0 11px rgba(80,200,120,.5)}
/* THE SEAL · the certification medallion (guilloché · the earned payoff of the pipeline) */
.pp-seal{display:flex;flex-direction:column;align-items:center;gap:9px;width:76px;opacity:.4;transition:opacity .5s var(--ease);flex-shrink:0}
.pp-seal-ic{width:62px;height:62px;display:grid;place-items:center;line-height:0;margin-top:-6px}
.pp-medal{width:100%;height:100%;display:block;opacity:.3;filter:grayscale(1) brightness(.75);transition:opacity .6s var(--ease),filter .6s var(--ease),transform .55s cubic-bezier(.16,1,.3,1)}
/* EARNED · the seal stamps in, green (no text under the seal · the centered verdict carries the words) */
.pp-seal.seal-good{opacity:1}
.pp-seal.seal-good .pp-medal{opacity:1;filter:drop-shadow(0 0 16px rgba(80,200,120,.5));animation:seal-stamp .55s cubic-bezier(.16,1,.3,1)}
/* NOT EARNED · no seal forms · un-struck ghost (never red · green is our only signal) */
.pp-seal.seal-bad{opacity:1}
.pp-seal.seal-bad .pp-medal{opacity:.16;filter:grayscale(1) brightness(.7)}
@keyframes seal-stamp{0%{transform:scale(1.16);opacity:.15}55%{opacity:1}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.pp-seal.seal-good .pp-medal{animation:none}}
/* WEB only · drop the box-filling green drop-shadow (outer ring sits near the medallion edge so its
   glow read as a faint square) · outside the seal stays fully transparent. Mobile keeps its glow. */
@media(min-width:661px){.pp-seal.seal-good .pp-medal{filter:none}}
@media(max-width:660px){.pp{padding:26px 0}.pp-node{width:58px}.pp-link{width:20px}.pp-seal{width:58px}.pp-nm{font-size:9px;white-space:normal}}

.lede-lead{font-size:clamp(21px,2.5vw,27px);color:#fff;font-weight:500;max-width:26ch;margin-left:auto;margin-right:auto;line-height:1.28;text-wrap:balance}

/* verdict appears only AFTER the proof resolves: status headline over explanation */
.pop-verdict .pv-line{display:none;flex-direction:column;align-items:center;gap:9px}
.pop-card.pp-good .pop-verdict .pv-line.pv-good{display:flex;animation:popfade .5s var(--ease)}
.pop-card.pp-bad .pop-verdict .pv-line.pv-bad{display:flex;animation:popfade .5s var(--ease)}
.pop-verdict{min-height:3.6em}

/* status headline (the moved GREENBOX Certified / Not Certified) */
.pv-status{font-family:"JetBrains Mono",monospace;font-size:15px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;line-height:1}
.pv-line.pv-good .pv-status{color:var(--green-bright)}
.pv-line.pv-bad .pv-status{color:#ff6b60}

/* illustrative-fault disclaimer only when viewing the bad batch */
.pop-note-fault{display:none}
.pop-card.bad .pop-note-fault{display:inline}

/* explanation reads as a plain sentence beneath the headline */
.pop-verdict .pv-line .pv{align-items:center;justify-content:center;text-align:center;text-wrap:balance;max-width:60ch;line-height:1.5;margin:0 auto;text-transform:none;font-family:inherit;font-size:14.5px;letter-spacing:normal;color:var(--ink-dim)}

/* fixed-nav offset so anchored sections are not cut off */
#reel,#uses,#team,#faq,#contact,#situation,#pop{scroll-margin-top:100px}

/* footer padding must beat .wrap (class > element); longhand, high specificity */
footer.wrap{padding-top:72px;padding-bottom:150px}

/* closing statement before the CTA */
.closing-line{max-width:24ch;margin:0 auto 16px;font-family:"Satoshi",sans-serif;font-weight:500;font-size:clamp(20px,2.6vw,28px);color:#fff;line-height:1.3;text-wrap:balance}

/* verify-it-yourself glimpse */
.verify-strip{max-width:700px;margin:30px auto 0;padding:18px 22px;border-radius:var(--r-md);background:rgba(255,255,255,.02);box-shadow:inset 0 0 0 1.5px rgba(80,200,120,.14);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 4px}
.vs-step{font-family:"JetBrains Mono",monospace;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-dim);display:inline-flex;align-items:center;gap:6px}
.vs-ok{color:var(--green)}
.vs-ok .chk{color:var(--green);font-weight:700}
.vs-arw{color:var(--ink-faint);margin:0 10px}
.vs-note{flex-basis:100%;text-align:center;margin-top:8px;font-size:12.5px;color:var(--ink-faint)}

/* ===== mobile pass ===== */
@media(max-width:820px){
  .navlinks{display:flex;gap:12px;align-items:center}   /* keep the CTA button visible on phones */
  .navlinks a:not(.btn){display:none}
  .inst{padding:150px 0 60px}
  section.blk{padding:86px 0}
  .cta-band{padding:96px 0}
}
@media(max-width:660px){
  /* wrap the proof flow so every stage AND the seal show (no clip after Penicillin) ·
     uniform circles, aligned at the top so the seal lines up with the boxes */
  .pp{overflow:visible;padding:22px 0}
  /* ONE row · the 6 stages distribute evenly across the full width (flex) → as large as the screen
     allows, capped at desktop size, always balanced/centered, never wraps, never tiny */
  .pp-row{flex-wrap:nowrap;justify-content:center;align-items:flex-start;gap:0 clamp(4px,1.4vw,10px);width:100%;min-width:0}
  .pp-link{display:none}
  .pp-node{flex:1 1 0;width:auto;min-width:0;max-width:60px;gap:8px}
  .pp-ring{width:100%;height:auto;aspect-ratio:1;max-width:50px;margin-inline:auto}
  .pp-seal{flex:1 1 0;flex-basis:0;width:auto;min-width:0;max-width:60px;margin-top:0}
  .pp-seal-ic{width:100%;height:auto;aspect-ratio:1;max-width:50px;margin-inline:auto;margin-top:0}   /* clear the desktop -6px nudge so the seal aligns level with the square rings on mobile */
  .pp-nm{font-size:clamp(7.5px,2.3vw,10.5px)}
  .pp-seal-prov{max-width:74px}
  footer.wrap{padding-bottom:120px}
  .foot-row{justify-content:center;text-align:center;gap:16px}
  .vs-arw{margin:0 4px}
}

/* "Today" is the problem state -> soft red; "Certified" stays green */
.before .ba-lab{color:rgba(229,72,77,.75)}
/* clear separation so landing on Team doesn't still show Uses */
#team{padding-top:172px;scroll-margin-top:58px}   /* 58 (not 100) compensates for #team's larger 172px top padding so a nav click lands level with the other sections · photo layout untouched */
#uses{padding-bottom:150px}

/* graph-paper grid, faded to the corners · sleek math cool again */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(80,200,120,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80,200,120,.075) 1px, transparent 1px),
    linear-gradient(rgba(80,200,120,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80,200,120,.04) 1px, transparent 1px);
  background-size:190px 190px,190px 190px,38px 38px,38px 38px;
  background-position:center;
  -webkit-mask:radial-gradient(120% 105% at 50% 38%, transparent 34%, #000 100%);
          mask:radial-gradient(120% 105% at 50% 38%, transparent 34%, #000 100%);
}

/* logo: just the mark (hide the off-vibe wordmark text); wordmark lives in the nav */
.brand-txt{font-family:"Satoshi",sans-serif;font-size:18px;letter-spacing:.01em;color:var(--ink);white-space:nowrap;line-height:1}
.brand-txt b{font-weight:800}
.brand-txt .lt{font-weight:400;opacity:.82;margin-left:.5px}
.foot-home{color:inherit;text-decoration:none;transition:color .3s var(--ease)}
.foot-home:hover{color:var(--green-bright)}
/* nav brand fades as a unit on scroll (.brand-lock opacity) · no width/transform reflow */
.navlinks a.nav-wordmark{font-family:"JetBrains Mono",monospace;font-weight:500;font-size:14px;letter-spacing:.16em;color:var(--ink)}
.navlinks a.nav-wordmark:hover{color:var(--green)}

/* credibility block: precise claim + standards + quantum-safe seal */
.cred{max-width:780px;margin:38px auto 0;text-align:center}
.cred-claim{font-size:15.5px;line-height:1.65;color:var(--ink-dim);max-width:62ch;margin:0 auto}
.cred-claim b{color:#fff;font-weight:600}
.cred-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:22px}
.cred-chip{display:inline-flex;align-items:center;gap:9px;font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.03em;color:var(--ink-dim);padding:10px 17px;border-radius:999px;background:rgba(255,255,255,.02);box-shadow:inset 0 0 0 1.5px rgba(80,200,120,.14);transition:.3s var(--ease)}
.cred-chip:hover{color:var(--ink);box-shadow:inset 0 0 0 1px rgba(80,200,120,.4),var(--glow-soft)}
.cred-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);flex-shrink:0}

/* domain cards: bigger readable text + cooler 3D/4D motion */
.tprob{font-size:15px}
.ba-txt{font-size:16.5px}
.ba-lab{font-size:12.5px}
.tile .dom{font-size:33px}
.tile.active::after{content:"";position:absolute;top:-45%;left:0;width:36%;height:190%;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse at center, rgba(116,232,154,.045), rgba(116,232,154,0) 66%);
  filter:blur(28px);will-change:transform,opacity;
  animation:tilesheen 10s ease-in-out infinite}
@keyframes tilesheen{0%{transform:translateX(-80%) rotate(24deg);opacity:0}24%{opacity:1}76%{opacity:1}100%{transform:translateX(340%) rotate(24deg);opacity:0}}
.coverflow .tile.active{animation:tilebreathe 4.5s ease-in-out infinite}
@keyframes tilebreathe{0%,100%{box-shadow:var(--glow),0 46px 90px -34px rgba(0,0,0,.85)}50%{box-shadow:0 0 42px rgba(80,200,120,.42),0 0 96px rgba(80,200,120,.16),0 46px 90px -34px rgba(0,0,0,.85)}}



/* domains marquee ribbon · slow, seamless, tasteful */
.dom-ribbon{position:relative;overflow:hidden;margin:16px auto 26px;max-width:820px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent);
          mask:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent)}
.dom-track{display:flex;align-items:center;width:max-content;animation:domscroll 42s linear infinite}
.dom-ribbon:hover .dom-track{animation-play-state:paused}
.dom-item{font-family:"JetBrains Mono",monospace;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:#fff;white-space:nowrap;padding:0 5px}
.dom-sep{color:var(--green);opacity:.75;padding:0 16px;font-size:15px}
@keyframes domscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.dom-track{animation:none}}
@media(max-width:600px){.dom-item{font-size:12px;letter-spacing:.08em}.dom-sep{padding:0 10px}}

.inquiry button[type="submit"]{width:100%;justify-content:center;margin-top:6px}

/* ============ domain swapper · problem rotation · cursor grid · a11y · mobile nav ============ */
/* What-We-Do domain toggle */
.dom-tabs{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;max-width:var(--maxw);margin:18px auto 2px;padding:0 24px}
.dom-tab{font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-dim);background:transparent;border:1px solid var(--line2);border-radius:999px;padding:8px 15px;cursor:pointer;white-space:nowrap;transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.dom-tab:hover{color:var(--ink);border-color:var(--green-dim);transform:translateY(-1px)}
.dom-tab.on{color:#08090b;background:var(--green);border-color:var(--green);box-shadow:var(--glow-soft)}
/* Problem-section domain chip + rotation fade */
.kicker .prob-dom{color:var(--ink-dim)}
#situation .stakes-band,#situation [data-prob-blurb]{transition:opacity .34s var(--ease)}
#situation .stakes-band.rotating,#situation [data-prob-blurb].rotating{opacity:.05}
/* Q&A: whole row is the click target, not just the text or the + */
.qa{padding:0}
.qa summary{padding:22px 2px}
/* cursor grid glow · a subtle grid revealed only around the pointer (fine pointers only) */
.cursor-grid{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s var(--ease);
  background-image:linear-gradient(rgba(80,200,120,.24) 1px,transparent 1px),linear-gradient(90deg,rgba(80,200,120,.24) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask:radial-gradient(200px circle at var(--mx,-600px) var(--my,-600px),#000,rgba(0,0,0,.1) 42%,transparent 70%);
  mask:radial-gradient(200px circle at var(--mx,-600px) var(--my,-600px),#000,rgba(0,0,0,.1) 42%,transparent 70%)}
.cursor-grid.on{opacity:.3}
@media(hover:none),(pointer:coarse){.cursor-grid{display:none}}
/* mobile: whole nav slides away on scroll; tagline stays visible at the top */
@media(max-width:820px){
  nav{transition:transform .4s var(--ease),border-color .3s,background .3s}
  nav.scrolled{transform:translateY(-102%)}
}
@media(max-width:600px){.wrap{padding-left:24px;padding-right:24px}}
@media(max-width:560px){
  .brand-tag{display:block;white-space:normal;font-size:9px;letter-spacing:.03em;line-height:1.35;max-width:212px;margin-top:5px}
}

/* ============ FAQ spacing · problem stepper · #pop seal · theme toggle · mobile ============ */
/* FAQ: question→answer gap tighter than the gap between items */
.qa p{margin-top:7px}
/* Problem: manual domain stepper (no auto-rotate) */
.prob-nav{display:inline-flex;gap:5px;margin-left:11px;vertical-align:middle}
.prob-nav button{font-family:inherit;font-size:15px;line-height:1;color:var(--ink-dim);background:transparent;border:1px solid var(--line2);border-radius:8px;width:25px;height:22px;cursor:pointer;padding:0;transition:color .25s var(--ease),border-color .25s var(--ease)}
.prob-nav button:hover{color:var(--green-bright);border-color:var(--green-dim)}
/* #pop: text left, animated seal right */
.pop-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.pop-visual{display:flex;justify-content:center}
.pop-pillars{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.pop-pill{font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--green-bright);border:1px solid var(--line2);border-radius:999px;padding:8px 14px}
.std-seal{position:relative;width:min(320px,66vw);aspect-ratio:1;display:grid;place-items:center}
.std-medal{width:66%;height:auto;position:relative;z-index:3;filter:drop-shadow(0 0 22px rgba(80,200,120,.3));animation:sealbreathe 5.5s var(--ease) infinite}
.std-ring{position:absolute;inset:2%;border-radius:50%;border:1px solid var(--line2)}
.std-ring::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid transparent;border-top-color:var(--green);border-right-color:var(--green-dim);animation:spin 9s linear infinite}
.std-sweep{position:absolute;inset:8%;border-radius:50%;z-index:2;background:conic-gradient(from 0deg,transparent 0turn,rgba(80,200,120,0) .5turn,rgba(80,200,120,.28) .8turn,rgba(116,232,154,.6) .96turn,transparent 1turn);-webkit-mask:radial-gradient(closest-side,transparent 73%,#000 75%);mask:radial-gradient(closest-side,transparent 73%,#000 75%);animation:spin 6.5s cubic-bezier(.45,0,.25,1) infinite}
.std-glow{position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle,rgba(80,200,120,.2),transparent 66%);animation:sealpulse 5.5s ease-in-out infinite}
@keyframes spin{to{transform:rotate(1turn)}}
@keyframes sealbreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@keyframes sealpulse{0%,100%{opacity:.45}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.std-medal,.std-sweep,.std-glow,.std-ring::after{animation:none}}
/* light / dark toggle button */
.theme-tog{width:34px;height:34px;border-radius:9px;border:1px solid var(--line2);background:transparent;color:var(--ink-dim);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:color .25s var(--ease),border-color .25s var(--ease)}
.theme-tog:hover{color:var(--ink);border-color:var(--green-dim)}
.theme-tog::before{content:"\2600";font-size:15px;line-height:1}
html.light .theme-tog::before{content:"\263E"}
/* LIGHT THEME (opt-in · default dark) */
html.light{
  --void:#e8ebe3; --bg:#f4f6f0; --bg2:#ecefe6; --panel:#ffffff; --panel2:#f5f8f2;
  --line:rgba(20,90,50,.14); --line2:rgba(20,90,50,.22);
  --green:#2f9c57; --green-bright:#146236; --green-dim:#3aa862; --green-deep:#bfdcc9;
  --ink:#1f2a1e; --ink-dim:#54604f; --ink-faint:#8b948a;
  --glow:0 0 24px rgba(20,120,60,.12); --glow-soft:0 0 16px rgba(20,120,60,.08); --glow-white:0 0 20px rgba(20,120,60,.1);
}
html.light body{background:radial-gradient(1100px 720px at 50% -10%,rgba(80,200,120,.08),transparent 60%),var(--bg);color:var(--ink)}
html.light nav{background:linear-gradient(180deg,rgba(244,246,240,.85),transparent)}
html.light nav.scrolled{background:rgba(244,246,240,.92);border-bottom-color:var(--line)}
html.light .brand-txt,html.light .brand-txt b{color:var(--ink)}
html.light .dom-tab.on{color:#f4f6f0}
html.light #situation .stakes-band .stat{background:linear-gradient(180deg,rgba(20,90,50,.05),rgba(20,90,50,.015));box-shadow:inset 0 0 0 1px rgba(20,90,50,.1)}
html.light .flabel{background:rgba(244,246,240,.96);border-color:rgba(20,90,50,.3)}
html.light .consent{background:rgba(255,255,255,.96)}
/* MOBILE cleanup: cards not pills, centered console, balanced square CTA, comfortable padding, compressed boxes */
@media(max-width:820px){
  .dom-tabs{display:none}
  .cbar2{flex-wrap:wrap;justify-content:center;gap:8px 18px;text-align:center}
  .pop-grid{grid-template-columns:1fr;gap:30px}
}
@media(max-width:600px){
  .wrap{padding-left:26px;padding-right:26px}
  .navlinks{gap:10px}
  .navlinks .btn{white-space:normal;text-align:right;line-height:1.12;padding:9px 13px;border-radius:12px;max-width:96px}
  .navlinks .btn .dot{display:none}
  .stakes-band{gap:12px !important}
  .stakes-band .stat{padding:22px 22px !important}
  #uses .verbs{gap:14px}
}

/* ---- Q&A: no dividers · question hugs its answer · bigger gap between pairs ---- */
.qa{padding:0;border-top:none;border-bottom:none}
.qa:first-child{border-top:none}
.qa:last-child{border-bottom:none}
.qa summary{padding:17px 2px 0}     /* space sits ABOVE the question (between pairs), not below it */
.qa p{margin-top:6px;margin-bottom:19px}   /* 6px question→answer (tight) · 19px below answer (loose) */

/* ===== coverflow domain name: white→green gradient so prior/next cards read on gray ===== */
.tile .dom,.tile.active .dom{background:linear-gradient(160deg,#ffffff 0%,#93e7af 50%,var(--green) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#e7ebe8}
/* softer, more elegant active-card shadow · no hard cutoff below */
.coverflow .tile.active{box-shadow:var(--glow),0 34px 62px -38px rgba(0,0,0,.7),0 12px 30px -20px rgba(0,0,0,.48)}

/* ===== LIGHT THEME fixes: white cards + rescue hardcoded-white text ===== */
html.light .tile{background:linear-gradient(165deg,#ffffff,#f3f6f0);border-color:rgba(20,90,50,.16);box-shadow:0 1px 0 rgba(255,255,255,.7)}
html.light .tile .tprob{color:var(--ink-dim)}
html.light .after .ba-txt{color:var(--ink)}
html.light .tile .dom,html.light .tile.active .dom{background:linear-gradient(160deg,var(--ink) 0%,var(--green) 128%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html.light .coverflow .tile.active{box-shadow:0 26px 58px -34px rgba(18,60,38,.4),0 10px 24px -16px rgba(18,60,38,.2),var(--glow-soft)}
html.light .snum,html.light .vb .vtxt,html.light .lede-lead,html.light .bio-v,html.light .detail .dt-deliver,html.light .flabel b{color:var(--ink)}
html.light .qa:hover summary{color:var(--green-bright)}
html.light .tperson:hover,html.light .teamcap .tcp:hover b{color:var(--ink)}

/* ===== fixes: light legend/logo · card-shadow clip · verb contrast · team line · theme icon · mobile ===== */
/* light-mode scrolling legend was white-on-white */
html.light .dom-item{color:var(--ink)}
html.light .dom-sep{color:var(--green-dim)}
/* light-mode logo: white SVG → black so it reads on paper */
html.light .brand .logo{filter:brightness(0)}
/* active-card shadow no longer hard-clipped above the arrows (give the clip box room) + softer */
.coverflow{padding-bottom:106px}
.coverflow .tile.active{box-shadow:var(--glow),0 30px 56px -40px rgba(0,0,0,.6),0 14px 34px -22px rgba(0,0,0,.42)}
.reel-arrows{margin-top:-16px}
/* WHAT WE DO boxes: more presence at rest */
.verb{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(80,200,120,.16)}
.verb.lead{box-shadow:inset 0 0 0 1px rgba(80,200,120,.22)}
html.light .verb{background:linear-gradient(180deg,#ffffff,#f4f7f0);box-shadow:0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(20,90,50,.12),0 12px 30px -22px rgba(18,60,38,.22)}
/* team photo: kill the sub-pixel white line on the bottom edge */
.teamshot{background:#0b0c0e}
.teamshot img{margin-bottom:-1px}
html.light .teamshot{background:#e9ece3}
/* theme toggle: monochrome CSS icon (sun dot / moon crescent), not a yellow emoji */
.theme-tog::before{content:"";width:15px;height:15px;border-radius:50%;background:currentColor;box-shadow:none}
html.light .theme-tog::before{content:"";background:transparent;box-shadow:inset -5px -4px 0 0 currentColor;transform:rotate(-16deg)}
/* mobile: real side buffer + aligned, smaller titles */
@media(max-width:600px){
  .wrap{padding-left:28px;padding-right:28px}
  .blk h2,.cta-band h2,#reel h2,#pop h2{font-size:clamp(25px,6.6vw,31px) !important;max-width:none}
  .inst h1{font-size:clamp(33px,8.6vw,42px)}
  h1,h2,h3,.lede,p,.dom-item{overflow-wrap:break-word}
}

/* ===== more mobile polish + light-mode grid ===== */
/* logo vertically centered against the GREENBOX + tagline lock */
.brand{align-items:center}
/* cursor grid works in light mode too (green-ink lines on paper) */
html.light .cursor-grid{background-image:linear-gradient(rgba(20,90,50,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(20,90,50,.2) 1px,transparent 1px)}
html.light .cursor-grid.on{opacity:.42}
@media(max-width:600px){
  /* larger, centered logo on phones */
  .brand .logo{height:40px}
  .brand-tag{max-width:190px}
  /* Get In Touch: narrower, not a wide slab */
  .navlinks .btn{max-width:78px;padding:8px 11px;font-size:13px;border-radius:11px}
  /* compact everything vertically */
  section.blk{padding:64px 0}
  .reel-strip{padding:22px 0 38px}
  #situation .prob-head{margin-bottom:30px}
  #situation .close-line{margin-top:26px}
  .stakes-band{gap:10px !important}
  .stakes-band .stat{padding:18px 18px !important}
  .verbs{gap:12px;margin-top:26px}
  .verb{padding:22px}
  .faq{margin-top:20px}
  .valuebar{margin-top:32px}
  #team .teamshot{margin-bottom:16px !important}
}

/* ===== theme toggle: naked single icon (no box) · lightbulb / crescent moon ===== */
.theme-tog{width:26px;height:30px;border:none;background:transparent;border-radius:0;color:var(--ink-dim);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:color .25s var(--ease),transform .25s var(--ease)}
.theme-tog:hover{color:var(--ink);border:none;background:transparent;transform:translateY(-1px)}
.theme-tog::before{content:"";width:19px;height:19px;border-radius:0;background:currentColor;box-shadow:none;transform:none;
  -webkit-mask:var(--tic) center/contain no-repeat;mask:var(--tic) center/contain no-repeat;
  --tic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a7 7 0 0 0-4 12.7V16a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-1.3A7 7 0 0 0 12 2Z'/%3E%3Crect fill='black' x='9.2' y='18' width='5.6' height='1.7' rx='.85'/%3E%3Crect fill='black' x='10' y='20.4' width='4' height='1.6' rx='.8'/%3E%3C/svg%3E")}
html.light .theme-tog::before{--tic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M15 2a10 10 0 1 0 7 17A8 8 0 0 1 15 2Z'/%3E%3C/svg%3E")}

/* ===== seal → checkmark morph (hover desktop · tap mobile · reverts when scrolled out) ===== */
.std-medal{transition:opacity .32s var(--ease)}
.std-check{position:absolute;z-index:4;width:44%;height:44%;background:var(--green-bright);opacity:0;transform:scale(.82);pointer-events:none;transition:opacity .3s var(--ease),transform .35s var(--ease);filter:drop-shadow(0 0 12px rgba(80,200,120,.5));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.6 17.6 3.9 11.9l1.7-1.7 4 4L18.4 4.9 20.1 6.6z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.6 17.6 3.9 11.9l1.7-1.7 4 4L18.4 4.9 20.1 6.6z'/%3E%3C/svg%3E") center/contain no-repeat}
.std-seal:hover .std-medal,.std-seal.checked .std-medal{opacity:0}
.std-seal:hover .std-check,.std-seal.checked .std-check{opacity:1;transform:scale(1)}
/* card titles: give the white→green gradient text room so p/g descenders aren't clipped */
.tile .dom,.tile.active .dom{line-height:1.18;padding-bottom:3px}

/* ===== light-mode fixes: moon fill · team hairline · graceful white-card shadow ===== */
/* theme icon: the mask needs a solid fill in BOTH themes (a stale rule had zeroed it in light) */
.theme-tog::before{background:currentColor;box-shadow:none;transform:none;border-radius:0}
html.light .theme-tog::before{background:currentColor;box-shadow:none;transform:none}
/* team photo: guarantee the image fully covers (no white hairline), soft border in light */
.teamshot img{margin-bottom:0;height:calc(100% + 2px)}
html.light .teamshot{background:#e9ece3;border-color:rgba(20,90,50,.18)}
/* light cards: soft, grounded shadow that blends (no hard patch) */
html.light .tile{box-shadow:0 1px 0 rgba(255,255,255,.7),0 14px 34px -24px rgba(20,55,38,.18)}
html.light .coverflow .tile.active{box-shadow:0 26px 54px -30px rgba(20,55,38,.28),0 10px 24px -14px rgba(20,55,38,.14)}

/* ===== seal tick-dial ring: ticks the lines around on hover, then fades gracefully ===== */
.std-ticks{position:absolute;inset:0;border-radius:50%;z-index:1;opacity:0;transition:opacity .45s var(--ease);
  background:repeating-conic-gradient(from -90deg, var(--green) 0deg .8deg, transparent .8deg 15deg);
  -webkit-mask:radial-gradient(closest-side,transparent 87%,#000 88%,#000 97%,transparent 98%);
  mask:radial-gradient(closest-side,transparent 87%,#000 88%,#000 97%,transparent 98%)}
.std-seal:hover .std-ticks,.std-seal.checked .std-ticks{opacity:.85;animation:tickspin 8s steps(24) infinite}
@keyframes tickspin{to{transform:rotate(1turn)}}
@media(prefers-reduced-motion:reduce){.std-seal:hover .std-ticks,.std-seal.checked .std-ticks{animation:none}}

/* ===== value flow (replaces the value rectangles) ===== */
.valueflow{display:flex;align-items:center;justify-content:center;gap:6px;max-width:1000px;margin:52px auto 0}
.vf{flex:1 1 0;min-width:0;text-align:center;padding:6px 18px}
.vf .vlab{font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--green);margin-bottom:13px}
.vf .vtxt{font-family:"Satoshi",sans-serif;font-weight:600;font-size:clamp(17px,1.85vw,21px);color:var(--ink);line-height:1.28;letter-spacing:-.01em;text-wrap:balance}
.vf-arrow{flex:0 0 auto;width:22px;height:22px;position:relative;opacity:.55}
.vf-arrow::before{content:"";position:absolute;left:5px;top:6px;width:8px;height:8px;border-top:2px solid var(--green);border-right:2px solid var(--green);transform:rotate(45deg)}
@media(max-width:760px){.valueflow{flex-direction:column;gap:2px;max-width:340px;margin-top:34px}.vf{padding:13px 10px}.vf-arrow{transform:rotate(90deg);margin:0 auto}}
/* ===== problem stepper: pinned right · prev / play / next ===== */
.prob-kicker{display:flex;align-items:center;justify-content:space-between;gap:14px}
.prob-label{flex:0 1 auto;min-width:0}
.prob-nav{flex:0 0 auto;margin-left:0}
.pn-play::before{content:"";display:inline-block;width:0;height:0;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px}
.pn-play.playing::before{width:8px;height:9px;border:none;border-left:3px solid currentColor;border-right:3px solid currentColor;margin-left:0}
/* ===== reel arrows: play button ===== */
.arrow-play::before{content:"";display:inline-block;width:0;height:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:2px}
.arrow-play.playing::before{width:9px;height:11px;border:none;border-left:3.5px solid currentColor;border-right:3.5px solid currentColor;margin-left:0}
/* ===== coverflow: clip horizontally only so card shadows blend down (no hard line above arrows) ===== */
.coverflow{overflow:visible;overflow-x:clip;overflow-clip-margin:0;padding-bottom:64px}
.reel-arrows{margin-top:8px}
/* ===== mobile: center everything to the middle of the screen ===== */
@media(max-width:760px){
  #situation .prob-head-r,#situation .close-line,#uses .verb,#pop .pop-copy,.blk h2,.blk .lede,.cta-band p{text-align:center}
  #situation .prob-kicker{justify-content:center;gap:12px}
  #situation .stakes-band .stat{text-align:center}
  #situation .stakes-band .slab{justify-content:center}
  #situation .stakes-band .snum{text-align:center}
  #uses .verbs{justify-items:center}
  #pop .pop-grid{justify-items:center}
  .pop-pillars{justify-content:center}
}

/* ===== problem stats fit one line · button + footer type consistency · nav CTA no box ===== */
/* smaller stat value so it stays on one line */
#situation .stakes-band .snum{font-size:clamp(22px,3vw,34px);white-space:nowrap}
/* button text: all-caps JetBrains Mono for consistency */
.btn{font-family:"JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:.08em;font-weight:500;font-size:12.5px}
/* nav Get In Touch: naked mono link, no box (fixes the mobile balance) */
.nav-cta{font-family:"JetBrains Mono",monospace;text-transform:uppercase;font-size:12px;letter-spacing:.12em;color:var(--ink-dim);text-decoration:none;font-weight:500;white-space:nowrap;transition:color .25s var(--ease)}
.nav-cta:hover{color:var(--green-bright)}
@media(max-width:600px){.navlinks a.nav-cta{display:inline-flex}}
/* all footer text in JetBrains Mono */
footer,footer a,.foot-copy,.foot-links a,.foot-row{font-family:"JetBrains Mono",monospace;letter-spacing:.02em}
footer{font-size:12.5px}
/* mobile: center section titles + box content */
@media(max-width:760px){
  section h2,.wrap h2{text-align:center}
  #situation .stakes-band .snum{white-space:normal}
}

/* ===== play buttons same size in both places ===== */
.pn-play::before,.arrow-play::before{content:"";display:inline-block;width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:2px}
.pn-play.playing::before,.arrow-play.playing::before{width:9px;height:11px;border:none;border-left:3px solid currentColor;border-right:3px solid currentColor;margin-left:0}
/* ===== mobile: actually center the section-title box (not just its text) ===== */
@media(max-width:760px){
  section h2,.wrap h2,.blk h2{text-align:center;margin-left:auto;margin-right:auto}
}

/* ===== play sized to match ITS OWN group's arrows (reel glyphs are 18px, stepper are small) ===== */
.arrow-play::before{border-left:12px solid currentColor;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px}
.arrow-play.playing::before{width:12px;height:16px;border:none;border-left:4px solid currentColor;border-right:4px solid currentColor;margin-left:0}
.pn-play::before{border-left:7px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px}
.pn-play.playing::before{width:7px;height:10px;border:none;border-left:2.5px solid currentColor;border-right:2.5px solid currentColor;margin-left:0}
/* ===== graceful problem rotation: fade + slide, content swaps while invisible ===== */
#situation .stakes-band,#situation [data-prob-blurb]{transition:opacity .26s var(--ease),transform .3s var(--ease)}
#situation .stakes-band.rotating,#situation [data-prob-blurb].rotating{opacity:0;transform:translateY(8px)}

/* ===== problem controls: top-right on desktop, centered under the blurb on mobile ===== */
.prob-head{position:relative}
.prob-nav{position:absolute;top:2px;right:0;display:inline-flex;gap:6px}
@media(max-width:820px){.prob-nav{position:static;justify-content:center;margin:16px auto 0}}
/* reinforce: problem stat content centered on mobile */
@media(max-width:760px){
  #situation .stakes-band .stat{text-align:center !important}
  #situation .stakes-band .slab{justify-content:center !important}
  #situation .stakes-band .snum{text-align:center !important}
  #situation .kicker{text-align:center}
}

/* ===== mobile nav: GET IN TOUCH green, theme toggle becomes text under it ===== */
@media(max-width:600px){
  .navlinks{flex-direction:column;align-items:flex-end;gap:6px}
  .navlinks .nav-cta{order:1;color:var(--green-bright)}
  .navlinks .theme-tog{order:2;width:auto;height:auto}
  .theme-tog::before{display:none}
  .theme-tog::after{content:"Light Mode";font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
  html.light .theme-tog::after{content:"Dark Mode"}
}

/* ===== problem trio == reel card buttons (identical size), positioned in the problem section ===== */
.prob-nav{gap:14px}
.prob-nav .pn-btn{width:44px;height:44px;border-radius:var(--r-sm);border:1px solid var(--line2);background:var(--panel);color:var(--ink-dim);font-size:18px;display:inline-flex;align-items:center;justify-content:center;transition:.3s var(--ease)}
.prob-nav .pn-btn:hover{border-color:var(--green);color:var(--green-bright);box-shadow:var(--glow-soft)}
.prob-nav .pn-play::before{border-left:12px solid currentColor;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px}
.prob-nav .pn-play.playing::before{width:12px;height:16px;border:none;border-left:4px solid currentColor;border-right:4px solid currentColor;margin-left:0}
/* ===== much nicer swap: staggered fade + lift across the stat cards + blurb ===== */
#situation .stakes-band.rotating{opacity:1;transform:none}
#situation .stakes-band .stat{transition:opacity .26s var(--ease),transform .38s var(--ease)}
#situation .stakes-band.rotating .stat{opacity:0;transform:translateY(13px) scale(.984)}
#situation .stakes-band .stat:nth-child(2){transition-delay:.06s}
#situation .stakes-band .stat:nth-child(3){transition-delay:.12s}
#situation [data-prob-blurb]{transition:opacity .26s var(--ease),transform .38s var(--ease)}
#situation [data-prob-blurb].rotating{opacity:0;transform:translateY(11px)}

/* ===== mobile nav: bottom-align right stack with the logo · mode text same size as GET IN TOUCH ===== */
@media(max-width:600px){
  nav{align-items:flex-end}
  .theme-tog::after{font-size:12px;letter-spacing:.12em}
}
/* ===== problem swap: a real card FLIP (rotateX), synchronized ===== */
#situation .stakes-band{perspective:1100px}
#situation .stakes-band .stat{transition:transform .36s cubic-bezier(.45,0,.25,1),opacity .3s var(--ease)}
#situation .stakes-band .stat:nth-child(2),#situation .stakes-band .stat:nth-child(3){transition-delay:0s}
#situation .stakes-band.rotating .stat{transform:rotateX(-90deg);opacity:.25}
#situation [data-prob-blurb]{transition:opacity .3s var(--ease),transform .3s var(--ease)}
#situation [data-prob-blurb].rotating{opacity:0;transform:translateY(6px)}
@media(prefers-reduced-motion:reduce){#situation .stakes-band.rotating .stat{transform:none}}

/* ===== problem swap: clean melt · fully invisible during the swap so no resize flash ===== */
#situation .stakes-band{perspective:none}
#situation .stakes-band .stat{transition:opacity .24s var(--ease),transform .34s var(--ease),filter .34s var(--ease)}
#situation .stakes-band .stat:nth-child(2),#situation .stakes-band .stat:nth-child(3){transition-delay:0s}
#situation .stakes-band.rotating .stat{opacity:0;transform:translateY(8px) scale(.978);filter:blur(4px)}
#situation [data-prob-blurb]{transition:opacity .24s var(--ease),transform .34s var(--ease),filter .34s var(--ease)}
#situation [data-prob-blurb].rotating{opacity:0;transform:translateY(6px);filter:blur(3px)}
@media(prefers-reduced-motion:reduce){#situation .stakes-band.rotating .stat,#situation [data-prob-blurb].rotating{filter:none;transform:none}}

/* ===== smooth, reflow-proof problem swap ===== */
#situation .prob-head-r{min-height:3.6em}
#situation .stakes-band .snum{white-space:nowrap}
#situation .stakes-band .stat,#situation [data-prob-blurb]{transition:opacity .32s cubic-bezier(.33,0,.2,1),transform .32s cubic-bezier(.33,0,.2,1);filter:none !important}
#situation .stakes-band.rotating .stat,#situation [data-prob-blurb].rotating{opacity:0;transform:translateY(6px);filter:none !important}
@media(max-width:760px){
  #situation .stakes-band .snum{font-size:clamp(19px,5.6vw,28px);white-space:nowrap}
  /* center section header kickers on mobile (the questions/section labels) */
  section .kicker,.blk .kicker{text-align:center}
}

/* ===== FIX: .blk.wrap sections had 0 horizontal padding (section.blk beat .wrap on specificity) ===== */
.blk.wrap,.cta-band.wrap,.inst.wrap{padding-left:32px;padding-right:32px}
@media(max-width:600px){.blk.wrap,.cta-band.wrap,.inst.wrap,.wrap{padding-left:28px;padding-right:28px}}
/* ===== problem stats: slide like cards (directional) + more box glow ===== */
#situation .stakes-band .stat{transition:transform .36s cubic-bezier(.4,0,.2,1),opacity .3s var(--ease),box-shadow .35s var(--ease);box-shadow:inset 0 0 0 1px rgba(80,200,120,.16),0 0 26px -10px rgba(80,200,120,.22)}
#situation .stakes-band.rot-out-left .stat{opacity:0;transform:translateX(-30px)}
#situation .stakes-band.rot-out-right .stat{opacity:0;transform:translateX(30px)}
#situation .stakes-band.enter-right .stat{opacity:0;transform:translateX(30px);transition:none}
#situation .stakes-band.enter-left .stat{opacity:0;transform:translateX(-30px);transition:none}

/* ================= PROBLEM CAROUSEL (coverflow-style: peek + dimensional cards) ================= */
.prob-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:24px 0 22px}
.prob-domname{font-family:"Satoshi",sans-serif;font-weight:700;font-size:clamp(21px,2.6vw,32px);letter-spacing:-.015em;color:var(--ink);line-height:1}
#situation .prob-nav{position:static;display:inline-flex;gap:12px;flex:0 0 auto}
.stakes-viewport{overflow:visible;overflow-x:clip;overflow-clip-margin:0;width:100%}
.stakes-track{display:flex;gap:22px;position:relative;will-change:transform}
.stakes-slide{flex:0 0 86%;opacity:.4;transition:opacity .55s var(--ease)}
.stakes-slide.active{opacity:1}
.stakes-slide .stakes-blurb{color:var(--ink-dim);font-size:var(--fs-lede);line-height:1.5;margin:0 0 22px;max-width:52ch}
#situation .stakes-slide .stat{border:1px solid var(--line2);box-shadow:0 26px 52px -34px rgba(0,0,0,.7),inset 0 0 0 1px rgba(80,200,120,.16)}
html.light #situation .stakes-slide .stat{box-shadow:0 22px 44px -32px rgba(18,60,38,.26),inset 0 0 0 1px rgba(20,90,50,.12)}
@media(max-width:760px){
  .prob-bar{flex-direction:column;gap:14px;align-items:center}
  .stakes-slide{flex:0 0 84%}
  .stakes-slide .stakes-blurb{text-align:center;margin-left:auto;margin-right:auto}
}
/* anchored sections land below the fixed nav (Team / Domains no longer scroll too high) */
html{scroll-padding-top:122px}

/* ===== balanced, centered problem header + domain/arrows front-and-center ===== */
#situation .kicker,#situation h2{text-align:center;margin-left:auto;margin-right:auto}
.prob-bar{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
/* ===== stat cards: RED stakes glow ON by default · hover calms it OFF ===== */
#situation .stakes-slide .stat{border:1px solid rgba(229,72,77,.34);box-shadow:0 26px 52px -34px rgba(0,0,0,.7),inset 0 0 0 1px rgba(229,72,77,.42),0 0 26px -12px rgba(229,72,77,.5)}
#situation .stakes-slide .stat:hover{border-color:var(--line2);box-shadow:0 26px 52px -34px rgba(0,0,0,.6),inset 0 0 0 1px rgba(80,200,120,.2);transform:translateY(-3px)}
html.light #situation .stakes-slide .stat{box-shadow:0 22px 44px -32px rgba(18,60,38,.2),inset 0 0 0 1px rgba(229,72,77,.32),0 0 22px -12px rgba(229,72,77,.34)}
html.light #situation .stakes-slide .stat:hover{box-shadow:0 22px 44px -32px rgba(18,60,38,.22),inset 0 0 0 1px rgba(20,90,50,.16);transform:translateY(-3px)}

/* ===== fix carousel jitter at rest: stable clip (padding gives shadows room) + no permanent will-change ===== */
.stakes-viewport{overflow:hidden;padding:46px 0;margin:-46px 0}
.stakes-track{will-change:auto;backface-visibility:hidden;transform:translateZ(0)}
.stakes-slide{backface-visibility:hidden}

/* ===== problem header LEFT on desktop (centered mobile) · domain+arrows right-aligned ===== */
#situation .kicker,#situation h2{text-align:left;margin-left:0;margin-right:0}
.prob-bar{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
@media(max-width:760px){
  #situation .kicker,#situation h2{text-align:center;margin-left:auto;margin-right:auto}
  .prob-bar{align-items:center}
}
/* ===== red stakes glow ON at rest · hover REMOVES it (!important beats the inline hover rule) ===== */
#situation .stakes-slide .stat{border:1px solid rgba(229,72,77,.34)!important;box-shadow:0 24px 50px -34px rgba(0,0,0,.6),inset 0 0 0 1px rgba(229,72,77,.5),0 0 30px rgba(229,72,77,.3),0 0 66px rgba(229,72,77,.1)!important}
#situation .stakes-slide .stat:hover{border-color:var(--line2)!important;box-shadow:0 24px 50px -34px rgba(0,0,0,.6),inset 0 0 0 1px rgba(80,200,120,.22)!important;transform:translateY(-3px)}
html.light #situation .stakes-slide .stat{box-shadow:0 20px 42px -32px rgba(18,60,38,.2),inset 0 0 0 1px rgba(229,72,77,.42),0 0 26px rgba(229,72,77,.24),0 0 58px rgba(229,72,77,.08)!important}
html.light #situation .stakes-slide .stat:hover{box-shadow:0 20px 42px -32px rgba(18,60,38,.22),inset 0 0 0 1px rgba(20,90,50,.18)!important;transform:translateY(-3px)}

/* ===================== cert-band (ribbon + GREENBOX CERTIFIED) · top + closer ===================== */
.cert-band{display:flex;flex-direction:column;align-items:center;gap:16px;margin:6px auto 30px;text-align:center}
.cert-label{font-family:"JetBrains Mono",monospace;font-size:clamp(20px,2.5vw,26px);letter-spacing:.24em;text-transform:uppercase;color:var(--green);font-weight:500;white-space:nowrap}
/* top + closer cert-labels: nowrap keeps BOTH on one identical line at the larger web size; mobile scales the text down so it still fits one line */
@media(max-width:600px){.cert-label{font-size:clamp(12px,4.3vw,18px);letter-spacing:.14em}}
.cert-band .dom-ribbon{max-width:min(1100px,94%);margin:0 auto}
.dom-track{will-change:transform;backface-visibility:hidden}
@keyframes domscroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.cert-closer{padding:66px 0 18px}
.cert-closer .cert-band{margin:0 auto}
footer::before{display:none}   /* remove the stray green line above the footer */
/* ===================== problem: h2 + domain/arrows on one row (arrows bottom-aligned) ===================== */
.prob-top{display:flex;align-items:flex-end;justify-content:space-between;gap:34px;margin-bottom:10px}
.prob-top h2{margin:0}
.prob-bar{flex:0 0 auto}
.prob-domname{font-size:clamp(26px,3.6vw,42px);letter-spacing:-.02em}
@media(max-width:760px){
  .prob-top{flex-direction:column;align-items:center;gap:16px}
  .prob-bar{align-items:center}
}
/* ===================== glow ONLY on the active/featured slide cards ===================== */
#situation .stakes-slide:not(.active) .stat{border-color:var(--line2)!important;box-shadow:0 22px 46px -34px rgba(0,0,0,.5),inset 0 0 0 1px rgba(80,200,120,.1)!important}
html.light #situation .stakes-slide:not(.active) .stat{box-shadow:0 18px 40px -32px rgba(18,60,38,.16),inset 0 0 0 1px rgba(20,90,50,.1)!important}

/* ===== fix reel card jitter at rest: box-shadow animation forced per-frame repaints on the 3D tile ===== */
.coverflow .tile.active{animation:none}

/* ===== reel jitter, real cause: a 28px-blurred sheen element animated (translate) across the active tile every frame ===== */
.tile.active::after{display:none}

/* ===== reel arrows must win hit-testing over the 3D-transformed active tile (overflow-y:visible lets it overlap) ===== */
.reel-arrows{position:relative;z-index:30}

/* ===== the lead (Verify) box wasn't glowing on hover: .verb.lead outranked .verb:hover ===== */
.verb.lead:hover{box-shadow:inset 0 0 0 1px rgba(80,200,120,.5),var(--glow);transform:translateY(-3px)}

/* ===== light theme: restore hover glow on all verb boxes (html.light .verb outranked .verb:hover) ===== */
html.light .verb:hover,html.light .verb.lead:hover{box-shadow:inset 0 0 0 1px rgba(20,90,50,.38),0 18px 44px -24px rgba(18,60,38,.3),0 0 22px rgba(47,156,87,.2);transform:translateY(-3px)}

/* ===== problem carousel: cap slide width so wider windows reveal more of the neighboring domains (like the coverflow) ===== */
.stakes-slide{flex:0 0 min(86%,820px)}
@media(max-width:760px){.stakes-slide{flex:0 0 84%}}

/* ===== nav Get In Touch: classy envelope icon (accessible label kept) ===== */
.nav-cta{width:34px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:0;letter-spacing:0;color:var(--ink-dim);text-decoration:none;transition:color .25s var(--ease),transform .25s var(--ease)}
.nav-cta:hover{color:var(--green-bright);transform:translateY(-1px)}
.nav-cta::before{content:"";width:21px;height:21px;background:currentColor;
  -webkit-mask:var(--gbx-mail) center/contain no-repeat;mask:var(--gbx-mail) center/contain no-repeat;
  --gbx-mail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 6 10 7L22 6'/%3E%3C/svg%3E")}
@media(max-width:600px){.navlinks .nav-cta::before{width:24px;height:24px}}

/* ===== problem carousel spans the full window (like the coverflow) so neighbor trios populate to the edges + fade ===== */
.stakes-viewport{position:relative;width:100vw;left:50%;margin-left:-50vw;margin-top:-46px;margin-bottom:-46px;padding:46px 0;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
          mask:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}

/* ===== align the problem header (kicker/tagline/domain/arrows) to the centered active trio, not the full column ===== */
#situation .kicker{width:min(86vw,820px);margin-left:auto;margin-right:auto}
.prob-top{width:min(86vw,820px);max-width:none;margin-left:auto;margin-right:auto}

/* ===== close-line ("We make your process provable") aligned to the same centered trio width ===== */
#situation .close-line{width:min(86vw,820px);max-width:none;margin-left:auto;margin-right:auto}