/* ═══════════════ TOKENS ═══════════════ */
:root{
  --bg:#FAFAFA;
  --surface:#FFFFFF;
  --panel:#F5F8F7;
  --ink:#212121;
  --ink-2:#535353;
  --ink-3:#727272;
  --line:#E7EAE8;
  --line-soft:#EFF1F0;
  --g-900:#1E2B27;
  --g-800:#243430;
  --g-700:#2E423E;
  --g-500:#47645E;
  --g-300:#8FA8A2;
  --olive:#3F6B1E;
  --lime:#A4D614;

  --font:'Chillax','Neue Montreal',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --maxw:1280px;
  --gut:clamp(1.25rem,4vw,3.5rem);
  --r-card:14px;
  --r-pill:999px;
  --nav-h:64px;
}

/* ═══════════════ BASE ═══════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font);background:var(--bg);color:var(--ink);
  font-size:16px;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--g-500);outline-offset:3px;border-radius:3px}

h1,h2,h3,h4{font-weight:400;letter-spacing:-.03em;line-height:1.06}
h1{font-size:clamp(1.6rem,3.35vw,3.05rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.5rem)}
h3{font-size:clamp(1.05rem,1.6vw,1.3rem);letter-spacing:-.02em;line-height:1.25}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);width:100%}

/* the faint page rails the reference runs down both edges of the content column */
.rails{position:fixed;inset:0;z-index:0;pointer-events:none}
.rails i{position:absolute;top:0;bottom:0;width:1px;background:var(--line-soft)}
@media (max-width:900px){.rails{display:none}}

/* ── eyebrow: mono, uppercase, asterisk marker ── */
.eyebrow{
  display:flex;align-items:center;gap:.55rem;
  font-family:var(--mono);font-size:.6875rem;font-weight:400;
  letter-spacing:.06em;color:var(--ink-3);text-transform:none;
}
.eyebrow::before{content:"✳";font-size:.75rem;color:var(--g-300);line-height:1}

/* ── buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-size:.8125rem;font-weight:500;letter-spacing:-.005em;
  padding:.72rem 1.15rem;border-radius:6px;white-space:nowrap;
  transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease;
}
.btn:active{transform:translateY(1px)}
.btn--dark{background:var(--g-900);color:#fff}
.btn--dark:hover{background:var(--g-700)}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn--ghost:hover{border-color:var(--g-300);background:var(--surface)}
.btn--olive{background:var(--olive);color:#fff}
.btn--olive:hover{filter:brightness(1.08)}
.btn--lg{padding:.85rem 1.4rem;font-size:.875rem}

/* ═══════════════ NAV ═══════════════ */
#nav{
  position:sticky;top:0;z-index:60;height:var(--nav-h);
  background:rgba(250,250,250,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:border-color .25s ease,background .25s ease;
}
#nav.on{border-bottom-color:var(--line);background:rgba(250,250,250,.94)}
.nav-in{display:flex;align-items:center;gap:1rem;height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:.5rem;font-size:.95rem;font-weight:500;letter-spacing:-.02em}
.brand svg{width:20px;height:20px;flex:none}
.nav-links{display:flex;align-items:center;gap:.25rem;margin-inline:auto}
.nav-links a{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.8125rem;color:var(--ink-2);padding:.5rem .7rem;border-radius:6px;
  transition:color .18s,background .18s;
}
.nav-links a:hover{color:var(--ink);background:var(--panel)}
.nav-links .caret{width:9px;height:9px;opacity:.5}
.nav-cta{display:flex;align-items:center;gap:.5rem}
#burger{display:none;width:38px;height:38px;align-items:center;justify-content:center;border-radius:6px}
#burger span{position:relative;display:block;width:16px;height:1.5px;background:var(--ink);transition:transform .25s}
#burger span::before,#burger span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--ink);transition:transform .25s,top .25s}
#burger span::before{top:-5px}#burger span::after{top:5px}
#burger[aria-expanded="true"] span{background:transparent}
#burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
#burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
#mnav{
  position:fixed;top:var(--nav-h);left:0;right:0;z-index:59;
  background:var(--bg);border-bottom:1px solid var(--line);
  padding:1rem var(--gut) 1.5rem;display:none;flex-direction:column;gap:.2rem;
}
#mnav.open{display:flex}
#mnav a{padding:.8rem 0;font-size:1rem;border-bottom:1px solid var(--line-soft)}
#mnav .btn,#mnav .afbtn{margin-top:1rem;justify-content:center}
@media (max-width:900px){
  .nav-links{display:none}
  .nav-cta .btn,.nav-cta .afbtn{display:none}
  /* with the CTA hidden the container has nothing to push against, so the auto
     margin has to move to the container itself or the burger floats mid-header */
  .nav-cta{margin-inline-start:auto}
  #burger{display:flex}
}

.navitem{position:relative}
.navtrig{
  display:inline-flex;align-items:center;gap:.3rem;font-size:.8125rem;color:var(--ink-2);
  padding:.5rem .7rem;border-radius:6px;transition:color .18s,background .18s;
}
.navtrig:hover,.navitem.open .navtrig{color:var(--ink);background:var(--panel)}
.navtrig .caret{transition:transform .22s ease}
.navitem.open .navtrig .caret{transform:rotate(180deg)}
.dropdown{
  position:absolute;top:calc(100% + 10px);left:-90px;z-index:70;
  width:min(660px,92vw);display:grid;grid-template-columns:300px 1fr;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:0 24px 60px rgba(30,43,39,.13),0 3px 10px rgba(30,43,39,.06);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
}
.navitem.open .dropdown{opacity:1;visibility:visible;transform:none}
/* the gradient plate that fronts the menu */
.dd-vis{
  position:relative;padding:1.25rem;display:flex;flex-direction:column;justify-content:flex-end;
  gap:.35rem;color:#fff;min-height:270px;
  background:
    radial-gradient(90% 120% at 46% 6%,  #93B694 0%, rgba(147,182,148,0) 62%),
    radial-gradient(70% 90%  at 12% 88%, #6E977E 0%, rgba(110,151,126,0) 70%),
    linear-gradient(168deg,#7FA684 0%,#77A07E 52%,#6F9A7B 100%);
}
.dd-vis::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:
    repeating-linear-gradient(to right, rgba(255,255,255,.045) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.045) 0 1px, transparent 1px 7px);
}
.dd-vis--alt{background:
    radial-gradient(90% 120% at 58% 8%,  #8FB492 0%, rgba(143,180,146,0) 62%),
    radial-gradient(70% 90%  at 88% 86%, #6B9480 0%, rgba(107,148,128,0) 70%),
    linear-gradient(168deg,#7CA382 0%,#749D7C 52%,#6C9779 100%);}
.dd-vis b{position:relative;z-index:2;font-size:.9375rem;font-weight:500;letter-spacing:-.02em}
.dd-vis span{position:relative;z-index:2;font-size:.75rem;line-height:1.5;color:rgba(255,255,255,.82)}
.dd-links{padding:.85rem;display:grid;gap:.1rem;align-content:start}
.dd-links a{display:grid;gap:.12rem;padding:.5rem .7rem;border-radius:8px;transition:background .18s}
.dd-links a:hover{background:var(--panel)}
.dd-links b{font-size:.8125rem;font-weight:500;color:var(--ink)}
.dd-links em{font-style:normal;font-size:.75rem;color:var(--ink-3);line-height:1.45}
@media (max-width:1100px){.dropdown{left:-40px;width:min(560px,92vw);grid-template-columns:220px 1fr}
  .dd-vis{min-height:230px}}

/* ═══════════════ HERO ═══════════════ */
#hero{position:relative;z-index:1;padding-top:clamp(3rem,8.5vw,6rem);padding-bottom:clamp(1.75rem,3.4vw,2.75rem)}
.hero-grid{display:grid;grid-template-columns:1fr;gap:1.75rem;align-items:end}
@media (min-width:900px){.hero-grid{grid-template-columns:1.35fr .65fr;gap:2.5rem}}
#hero h1{max-width:none}
/* one sentence, one line, only wrap where the viewport genuinely cannot hold it */
@media (min-width:900px){ #hero h1{white-space:nowrap} }
/* the rotating word changes width; reserve the longest so the line never jitters */
.swap{
  color:#4E6F62;                       /* the mid green out of the banner gradient */
  display:inline-block;white-space:nowrap;overflow:hidden;vertical-align:bottom;
  transition:width .42s cubic-bezier(.22,1,.36,1);   /* the full stop travels with it */
}
#hero .sub{margin-top:1.35rem;color:var(--ink-2);font-size:clamp(.9375rem,1.1vw,1rem);max-width:46ch;line-height:1.6}
.hero-actions{display:flex;flex-wrap:wrap;gap:.6rem}
@media (min-width:900px){.hero-actions{justify-content:flex-end}}

.swap{display:inline-block;position:relative}
.swap>i{display:inline-block;font-style:normal;transition:opacity .3s ease,transform .3s ease}
.swap.out>i{opacity:0;transform:translateY(-.22em)}

/* ═══════════════ GRADIENT BANNER ═══════════════ */
#banner{position:relative;z-index:1;padding-bottom:clamp(3rem,7vw,6rem)}
.banner-box{
  position:relative;overflow:hidden;border-radius:2px;
  height:clamp(260px,34vw,470px);display:grid;place-items:center;
  background:
    radial-gradient(90% 120% at 46% 6%,  #93B694 0%, rgba(147,182,148,0) 62%),
    radial-gradient(70% 90%  at 12% 88%, #6E977E 0%, rgba(110,151,126,0) 70%),
    linear-gradient(168deg,#7FA684 0%,#77A07E 52%,#6F9A7B 100%);
  isolation:isolate;
}
.banner-box::before{ /* the fine measurement grid the reference lays over the gradient */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.55;
  background-image:
    repeating-linear-gradient(to right, rgba(255,255,255,.045) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.045) 0 1px, transparent 1px 7px);
}
.banner-dots{position:absolute;inset:0;z-index:1;pointer-events:none}
.banner-dots i{
  position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.16);
  animation:bdrift var(--d,9s) ease-in-out var(--dl,0s) infinite alternate;
}
@keyframes bdrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--dx,8px),var(--dy,-10px),0)}}
.banner-stage{position:relative;z-index:3;display:grid;place-items:center;width:100%;padding:clamp(1rem,2.4vw,2rem)}
.banner-stage>*{grid-area:1/1}
/* one cell, five states. The swap is deliberately theatrical, the outgoing
   state pulls back and defocuses while the incoming one rushes forward. */
.bstate{
  opacity:0;pointer-events:none;
  transform:scale(1.10) translateY(20px);filter:blur(10px);
  transition:opacity .62s cubic-bezier(.22,1,.36,1),
             transform .72s cubic-bezier(.22,1,.36,1),
             filter .55s ease;
}
.bstate.is-on{opacity:1;transform:none;filter:blur(0)}
.bstate.is-out{opacity:0;transform:scale(.90) translateY(-16px);filter:blur(9px)}

/* ── the dashboard, drawn so every bar can arrive on its own ── */
/* it earns a longer look than the other states: the numbers need reading, so it
   settles in slowly and clears out quickly. The duration a transition uses comes
   from the state being entered, so the slow one lives on the base rule and the
   fast one on .is-out. */
.bdash{width:min(700px,92%);
  transition:opacity 2.20s cubic-bezier(.22,1,.36,1),
             transform 2.50s cubic-bezier(.22,1,.36,1),
             filter 1.80s ease}
.bdash.is-out{
  transition:opacity .30s cubic-bezier(.4,0,1,1),
             transform .34s cubic-bezier(.4,0,1,1),
             filter .24s ease}
.wf{width:100%;height:auto;display:block;background:#fff;border-radius:10px;
  box-shadow:0 22px 60px rgba(16,32,26,.30),0 2px 8px rgba(16,32,26,.16)}
.wt{font-family:var(--font);font-size:11px;font-weight:600;fill:#2A2A2A;letter-spacing:.04em}
.wst{font-family:var(--font);font-size:10px;fill:#6B6B6B}
.wc{font-family:var(--font);font-size:8.5px;fill:#3A4A40}
.wax text{font-family:var(--font);font-size:8.5px;fill:#9AA39D}
.wl{font-family:var(--font);font-size:8.5px;fill:#7A837D}
.wv{font-family:var(--font);font-size:10px;font-weight:600;fill:#2A2A2A}
.wp{font-family:var(--font);font-size:8px;fill:#8A928C}
.wleg text{font-family:var(--font);font-size:8.5px;fill:#6B6B6B}
/* start collapsed; the sequencer flips .is-live and they build left to right */
/* start collapsed; the sequencer flips .is-live and they build left to right.
   fill-box origins the scale on each bar's own base so it is Safari-safe. */
.wb--g{transform:scaleY(0);transform-origin:50% 100%;transform-box:fill-box}
.wb--f{opacity:0;transform:translateX(-10px);transform-box:fill-box}
.wv,.wp{opacity:0}
.bdash.is-live .wb--g{animation:wgrow .80s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(var(--i) * .20s)}
.bdash.is-live .wb--f{animation:wslide .66s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(var(--i) * .20s)}
.bdash.is-live .wv,.bdash.is-live .wp{animation:wfade .55s ease forwards;animation-delay:calc(var(--i) * .20s + .30s)}
@keyframes wgrow{to{transform:scaleY(1)}}
@keyframes wslide{to{opacity:1;transform:none}}
@keyframes wfade{to{opacity:1}}

/* ── the ask screen ── */
.bask{width:min(560px,94%);display:grid;gap:.9rem;justify-items:center}
.ask-greet{color:#fff;font-size:clamp(1rem,1.9vw,1.45rem);letter-spacing:-.02em;text-align:center;
  text-shadow:0 2px 14px rgba(12,26,20,.35)}
.ask-box{
  width:100%;display:flex;align-items:center;gap:.5rem;
  background:rgba(255,255,255,.96);border-radius:10px;padding:.6rem .6rem .6rem .9rem;
  box-shadow:0 14px 38px rgba(16,32,26,.26);
}
.ask-text{font-size:.8125rem;color:var(--ink);white-space:nowrap;overflow:hidden}
.ask-caret{width:1.5px;height:15px;background:var(--g-700);margin-inline-start:1px;
  animation:askblink 1s steps(1,end) infinite}
@keyframes askblink{0%,49%{opacity:1}50%,100%{opacity:0}}
.ask-send{
  margin-inline-start:auto;flex:none;width:30px;height:26px;border-radius:5px;
  background:var(--olive);color:#fff;display:grid;place-items:center;
  transition:transform .2s ease,filter .2s ease;
}
.ask-send svg{width:15px;height:15px}
.ask-send.fire{transform:scale(.86);filter:brightness(1.35)}

/* ── the answer's inline chart ── */
.msg-chart{width:100%;height:auto;margin-top:.6rem;display:block}
.mc-bars rect{fill:var(--lime);opacity:.85;transform:scaleY(0);transform-origin:50% 54px}
.bchat.is-on .mc-bars rect{animation:mcgrow .55s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:calc(var(--i) * .07s + .35s)}
@keyframes mcgrow{to{transform:scaleY(1)}}
.banner-cta.is-on{pointer-events:auto}
.bshot{width:min(760px,88%);border-radius:9px;overflow:hidden;background:#fff;
  box-shadow:0 22px 60px rgba(16,32,26,.30),0 2px 8px rgba(16,32,26,.18)}
.bshot img{width:100%;height:auto;display:block}
.bchat{width:min(520px,92%);display:grid;gap:.5rem}
.bchat .msg{font-size:.8125rem;line-height:1.55;padding:.7rem .9rem;border-radius:12px;text-align:left}
.bchat .msg--in{justify-self:end;max-width:82%;background:rgba(255,255,255,.92);color:var(--ink);
  border-bottom-right-radius:4px;box-shadow:0 6px 18px rgba(16,32,26,.16)}
.bchat .msg--out{justify-self:start;max-width:92%;background:rgba(18,34,28,.82);color:#fff;
  border-bottom-left-radius:4px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 6px 18px rgba(16,32,26,.22)}
.bchat .who{display:block;font-family:var(--mono);font-size:.5625rem;letter-spacing:.08em;
  color:var(--lime);margin-bottom:.2rem}
.bchat .msg--out b{color:#fff;font-weight:500}
@media (max-width:640px){ .bchat .msg{font-size:.75rem} }
.banner-cta{
  display:inline-flex;align-items:center;gap:.75rem;background:#fff;color:var(--ink);
  font-family:var(--mono);font-size:.8125rem;padding:.5rem .5rem .5rem 1.15rem;border-radius:2px;
  box-shadow:0 6px 20px rgba(20,40,32,.16);
}
.banner-cta.is-on{opacity:1;transform:none;pointer-events:auto}
.banner-cta i{display:grid;place-items:center;width:34px;height:30px;border-radius:1px;background:#9DC08C}
.banner-cta i svg{width:15px;height:15px}
/* three words stacked: the first is lit, the rest fall away into the haze */
.banner-words{text-align:center;display:grid;gap:.15rem;position:relative}
.banner-words span{
  display:block;font-size:clamp(1.4rem,3vw,2.1rem);letter-spacing:-.03em;line-height:1.22;
  color:#fff;transition:opacity .5s ease,filter .5s ease,transform .6s cubic-bezier(.19,1,.22,1);
}
.banner-words span:nth-child(1){opacity:1}
.banner-words span:nth-child(2){opacity:.42;filter:blur(.4px)}
.banner-words span:nth-child(3){opacity:.2;filter:blur(1.1px)}
.banner-words.s1 span:nth-child(1){opacity:.2;filter:blur(1.1px)}
.banner-words.s1 span:nth-child(2){opacity:1;filter:none}
.banner-words.s1 span:nth-child(3){opacity:.42;filter:blur(.4px)}
.banner-words.s2 span:nth-child(1){opacity:.42;filter:blur(.4px)}
.banner-words.s2 span:nth-child(2){opacity:.2;filter:blur(1.1px)}
.banner-words.s2 span:nth-child(3){opacity:1;filter:none}
/* the payoff sits over the word stack and only resolves once they have gone */
.banner-words em{
  position:absolute;inset:0;display:grid;place-items:center;margin:0;
  font-style:normal;font-size:clamp(1.45rem,3.2vw,2.35rem);
  letter-spacing:-.035em;line-height:1.1;color:#fff;
  opacity:0;filter:blur(16px);transform:scale(1.16);
  text-shadow:0 0 22px rgba(164,214,20,.55);
  transition:opacity .75s ease,filter .85s ease,
    transform 1.05s cubic-bezier(.19,1,.22,1),text-shadow 1.2s ease .25s;
}
.banner-words.is-done span{opacity:0;filter:blur(8px);transform:translateY(-9px) scale(.96)}
.banner-words.is-done em{opacity:1;filter:blur(0);transform:none;text-shadow:0 0 0 rgba(164,214,20,0)}

/* ═══════════════ SECTION SHELL ═══════════════ */
.sec{position:relative;z-index:1;padding-block:clamp(3.25rem,7.2vw,7rem);border-top:1px solid var(--line)}
.sec-head{display:grid;grid-template-columns:1fr;gap:1rem;margin-bottom:clamp(1.75rem,3.2vw,2.75rem)}
@media (min-width:900px){
  .sec-head{grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}
  .sec-head.stack{grid-template-columns:1fr}
}
.sec-head h2{max-width:20ch}
.sec-head .lede{color:var(--ink-2);font-size:.9375rem;max-width:42ch;line-height:1.6}
.eyebrow{margin-bottom:1.1rem}
.sec-head--loop{display:block}
.sec-head--loop .eyebrow{margin-bottom:clamp(1rem,2vw,1.4rem)}
.sec-head--loop .sh-pair{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:900px){.sec-head--loop .sh-pair{grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}}
.sec-head--loop h2{max-width:24ch}

/* ═══════════════ BENTO ═══════════════ */
.bento{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
@media (min-width:720px){.bento{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.bento{grid-template-columns:repeat(3,1fr)}}
.cell{background:var(--surface);padding:clamp(1.25rem,2.1vw,1.75rem);display:flex;flex-direction:column;gap:.8rem;min-height:225px;overflow:hidden}
.cell--wide{grid-column:span 1}
@media (min-width:1040px){.cell--wide{grid-column:span 2}}
.cell .stat{font-size:clamp(2.1rem,3.8vw,3rem);letter-spacing:-.04em;line-height:1;margin:auto 0}
.cell p{font-size:.8125rem;color:var(--ink-2);line-height:1.6}
.cell .src{font-family:var(--mono);font-size:.625rem;color:var(--ink-3);letter-spacing:.02em}
.cell--quote{background:var(--panel)}
.cell--quote .qm{font-size:2.4rem;line-height:.8;color:var(--g-300);margin-bottom:auto}
.cell--quote p{font-size:.875rem;color:var(--g-700)}
.cell--tint{background:var(--panel)}

/* mini bar chart */
.bars{display:flex;align-items:flex-end;gap:5px;height:74px;margin-top:auto}
.bars i{flex:1;height:var(--h);background:var(--line);border-radius:2px 2px 0 0;transition:height .9s cubic-bezier(.16,1,.3,1)}
.bars i.hi{background:linear-gradient(180deg,var(--g-500),var(--g-700))}
.chip{
  display:inline-flex;align-items:center;gap:.35rem;align-self:flex-start;
  font-family:var(--mono);font-size:.625rem;color:var(--g-700);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-pill);padding:.2rem .5rem;
}
/* radial node diagram */
.radar{position:relative;width:min(100%,250px);aspect-ratio:1;margin:auto;flex:none}
.radar-rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.radar-hub{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--g-900);color:#fff;font-family:var(--font);font-size:.8125rem;
  font-weight:500;letter-spacing:-.02em;padding:.32rem .7rem;border-radius:999px;
  animation:rpulse 4.5s ease-in-out infinite;z-index:2;
}
/* every logo sits in an identical tile, same box, same padding, same optical size */
/* the whole constellation turns around the hub; each logo counter-turns by the
   same amount so it never ends up on its head */
.radar-orbit{position:absolute;inset:0;animation:orbit 64s linear infinite}
.ring{transform-origin:100px 100px}
.ring--a{animation:orbit 48s linear infinite}
.ring--b{animation:orbit-rev 72s linear infinite}
.ring--c{animation:orbit 96s linear infinite}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes orbit-rev{to{transform:rotate(-360deg)}}
.rnode{
  position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  width:30px;height:30px;border-radius:50%;background:#fff;
  border:1px solid var(--line);display:grid;place-items:center;
  box-shadow:0 2px 6px rgba(30,43,39,.06);
  transition:box-shadow .25s ease;
}
.rnode img{width:15px;height:15px;object-fit:contain;display:block;
  animation:orbit-rev 64s linear infinite}
.rnode:hover{box-shadow:0 6px 16px rgba(30,43,39,.14);z-index:3}
@media (prefers-reduced-motion:reduce){
  .radar-orbit,.rnode img,.ring{animation:none}
}
@keyframes rpulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.05)}}
@media (prefers-reduced-motion:reduce){.rnode,.radar-hub{animation:none}}
/* generative artifact - one system, three states, morphing per message */
.car-art{width:100%;max-width:236px;height:120px;margin:0 auto}
.car-art canvas{display:block;width:100%;height:100%}

.cell--carousel{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.55rem;text-align:center}
.cell--carousel .slides{position:relative;display:grid;place-items:center;width:100%;min-height:2.6rem}
.cell--carousel .slide{
  grid-area:1/1;display:flex;flex-direction:column;align-items:center;gap:1rem;
  opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease;
}
.cell--carousel .slide.is-on{opacity:1;transform:none}
.cell--carousel .icons{margin:0;justify-content:center;padding:0;border:none;border-radius:0;background:transparent}
.cell--carousel p{font-size:.8125rem}
.dots{display:flex;gap:.3rem;justify-content:center;margin-top:.9rem}
.dots b{width:14px;height:3px;border-radius:2px;background:var(--line);transition:background .3s,width .3s}
.dots b.is-on{background:var(--g-500);width:20px}



/* ═══════════════ WHAT SEAL IS · signal storm ═══════════════ */
#storm{position:relative;z-index:1;height:300vh}
.storm-pin{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:grid;place-items:center;isolation:isolate;
}
.storm-bg{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(120% 95% at 22% 12%, #33513F 0%, transparent 62%),
    radial-gradient(105% 85% at 82% 88%, #1D2E25 0%, transparent 58%),
    #24382C;
}
.storm-bg::after{                       /* the same fine texture as the plates */
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:
    repeating-linear-gradient(to right, rgba(255,255,255,.04) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.04) 0 1px, transparent 1px 7px);
}
/* the sentence writes itself as you scroll; the haze clears as it lands */
.storm-h{
  position:relative;z-index:3;max-width:22ch;text-align:center;
  font-size:clamp(1.35rem,3.2vw,2.6rem);line-height:1.18;color:#F2F6EE;
  letter-spacing:-.025em;font-weight:400;
  filter:blur(calc((1 - var(--pIntro,1)) * 11px));
  padding-inline:var(--gut);
}
.storm-h .ch{opacity:0;font-style:normal}
.storm-h .ch.on{opacity:1}
.storm-h .hl{color:#A4D614}
.storm-h .caret{
  position:absolute;left:0;top:0;width:.055em;height:1em;background:#A4D614;
  opacity:0;pointer-events:none;will-change:transform;
}
.storm-h .caret.writing{animation:cblink 1.05s steps(1,end) infinite}
@keyframes cblink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* the cards scatter OUTWARD from the sentence as the storm resolves */
.scard{
  position:absolute;left:var(--x);top:var(--y);z-index:2;--amp:78px;--s:1;
  /* one composed transform: centering + scatter + scale.
     never add a second transform declaration, it would kill the animation */
  transform:
    translate3d(-50%, calc(-50% + var(--scatter,0) * var(--d,1) * var(--dir,-1) * var(--amp)), 0)
    scale(var(--s));
  will-change:transform;
}
/* --x/--y are card CENTERS, kept inside the pin at every width */
.s1{--x:12%;--y:20%}  .s2{--x:9%;--y:47%}   .s3{--x:13%;--y:74%}
.s4{--x:87%;--y:22%}  .s5{--x:30%;--y:85%}  .s6{--x:88%;--y:76%}
.s7{--x:91%;--y:50%}
/* top row is anchored to the nav, not to a %, so it never tucks under it */
.s8{--x:20%;--y:calc(var(--nav-h) + 3rem)}
.s9{--x:78%;--y:calc(var(--nav-h) + 3rem)}
.s10{--x:17%;--y:92%} .s11{--x:72%;--y:92%}
.scard--raw{
  padding:.7rem .9rem;border:1px solid rgba(242,246,238,.10);
  background:rgba(255,255,255,.03);border-radius:5px;min-width:150px;
}
.scard--raw::before,.scard--raw::after{
  content:"";position:absolute;width:9px;height:9px;
  border-color:rgba(242,246,238,.32);border-style:solid;
}
.scard--raw::before{top:-1px;left:-1px;border-width:1px 0 0 1px}
.scard--raw::after{bottom:-1px;right:-1px;border-width:0 1px 1px 0}
.scard--raw .k{
  font-family:var(--mono);font-size:.5625rem;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(242,246,238,.42);display:block;margin-bottom:.3rem;
}
.scard--raw .k i{color:#A4D614;font-style:normal;margin-inline-end:.35em}
.scard--raw .v{font-family:var(--mono);font-size:.6875rem;color:rgba(242,246,238,.62);line-height:1.45}
.scard--rich{
  display:flex;align-items:center;gap:.7rem;padding:.6rem .85rem;border-radius:8px;
  background:#16240F;border:1px solid rgba(242,246,238,.13);
  box-shadow:0 10px 26px rgba(0,0,0,.34);
}
.scard--rich .ic{width:26px;height:26px;border-radius:6px;flex-shrink:0;display:grid;place-items:center}
.ic--lime{background:#A4D614}.ic--amber{background:#E8C766}.ic--rust{background:#E0915A}
.scard--rich .ic svg{width:14px;height:14px}
.scard--rich .t{font-size:.6875rem;font-weight:500;color:#F2F6EE;line-height:1.25;white-space:nowrap}
.scard--rich .s{font-family:var(--mono);font-size:.5625rem;color:rgba(242,246,238,.5)}
.scard--rich .amt{margin-inline-start:auto;padding-inline-start:1rem;font-family:var(--mono);
  font-size:.8125rem;font-weight:500;color:#F2F6EE}
/* ── storm breakpoints: reposition, never re-declare transform ── */
@media (max-width:1039px){
  .scard{--s:.92;--amp:64px}
  .s1{--x:14%;--y:18%}  .s2{--x:12%;--y:46%}  .s3{--x:15%;--y:74%}
  .s4{--x:86%;--y:20%}  .s5{--x:32%;--y:87%}  .s6{--x:87%;--y:74%}
  .s7{--x:88%;--y:48%}  .s8{--x:22%}  .s9{--x:78%}
  .s10{--x:21%;--y:93%} .s11{--x:74%;--y:93%}
}
@media (max-width:820px){
  #storm{height:240vh}
  .scard{--s:.84;--amp:56px}
  /* thin the field so the remaining cards stay legible, not hidden wholesale */
  .s2,.s5,.s7,.s9,.s10{display:none}
  .s1{--x:23%;--y:21%}  .s3{--x:23%;--y:79%}
  .s4{--x:77%;--y:21%}  .s6{--x:77%;--y:79%}
  .s8{--x:50%}          .s11{--x:50%;--y:93%}
}
@media (max-width:560px){
  .scard{--s:.78;--amp:46px}
  .scard--raw{min-width:0;width:144px}
  .scard--rich{padding:.55rem .7rem;gap:.55rem}
  .scard--rich .amt{padding-inline-start:.7rem;font-size:.75rem}
  .s1{--x:25%;--y:20%}  .s3{--x:25%;--y:80%}
  .s4{--x:75%;--y:20%}  .s6{--x:75%;--y:80%}
}
@media (prefers-reduced-motion:reduce){
  .storm-h{filter:none}
  .storm-h .ch{opacity:1}
}

.cell--reach{grid-column:span 1;display:grid;gap:1.5rem;align-items:center}
@media (min-width:1040px){
  .cell--reach{grid-column:span 2;grid-template-columns:minmax(0,1fr) minmax(0,290px);gap:2.5rem}
}
.cell--reach .reach-copy p{font-size:.9375rem;line-height:1.7;color:var(--ink-2);max-width:38ch}
.reach-vis{display:grid;place-items:center}
.reach-vis .radar{width:min(100%,290px)}

/* ═══════════════ DAY ONE ═══════════════ */
.day-grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem)}
@media (min-width:1040px){.day-grid{grid-template-columns:minmax(0,330px) 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}}
/* eyebrow, heading and paragraph read as one block, not three loose pieces */
.day-copy .eyebrow{margin-bottom:1rem}
.day-copy h2{margin-bottom:1rem}
.day-copy p{color:var(--ink-2);font-size:.9375rem;line-height:1.65;max-width:42ch}

.day-vis{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
@media (min-width:900px){
  .day-vis{grid-template-columns:minmax(0,210px) minmax(0,150px) minmax(0,1fr);gap:clamp(1.25rem,3vw,2.5rem)}
}
/* two columns, three rows, the reference layout */
.tools{position:relative;display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(1.1rem,2.4vw,1.9rem);width:100%}
.tools-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.tl-base{fill:none;stroke:var(--line);stroke-width:.8}
.tl-flow{fill:none;stroke:var(--g-500);stroke-width:1.2;stroke-linecap:round;
  stroke-dasharray:9 91;animation:tlflow 3.6s linear infinite;
  animation-delay:calc(var(--i,0) * -.6s)}
@keyframes tlflow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.tool{
  position:relative;z-index:1;aspect-ratio:1;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 2px 8px rgba(30,43,39,.05);
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease;
}
.js .tool{opacity:0;transform:scale(.82)}
.js .tools.lit .tool{animation:toolIn .55s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:calc(var(--t) * .09s)}
@keyframes toolIn{to{opacity:1;transform:scale(1)}}
.tool img{width:26px;height:26px;object-fit:contain}
.tool:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(30,43,39,.12)}

.brandcard{
  border-radius:14px;background:linear-gradient(155deg,var(--g-500),var(--g-900));
  color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.45rem;text-align:center;padding:1.4rem 1rem;aspect-ratio:1;
  box-shadow:0 16px 40px rgba(30,43,39,.22);
  animation:cardGlow 5s ease-in-out infinite;
}
@keyframes cardGlow{0%,100%{box-shadow:0 16px 40px rgba(30,43,39,.22)}
  50%{box-shadow:0 18px 52px rgba(46,66,62,.34)}}
.brandcard b{font-size:1.25rem;font-weight:500;letter-spacing:-.025em}
.brandcard span{font-family:var(--mono);font-size:.5625rem;line-height:1.7;opacity:.72;letter-spacing:.03em}
@media (max-width:899px){.brandcard{aspect-ratio:auto;max-width:210px}}

.kpis{display:grid;gap:.65rem;align-content:center;width:100%}
.kpi{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:.8rem .95rem}
.js .kpi{opacity:0;transform:translateX(18px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.js .kpi.in{opacity:1;transform:none}
.kpi .k{display:flex;align-items:center;gap:.35rem;font-family:var(--mono);font-size:.5625rem;color:var(--ink-3)}
.kpi .v{font-size:1.3rem;letter-spacing:-.03em;margin-top:.25rem}
.kpi .v small{font-size:.6875rem;color:var(--ink-3);letter-spacing:0}
@media (prefers-reduced-motion:reduce){
  .js .tool{opacity:1;transform:none}.js .kpi{opacity:1;transform:none}
  .tl-flow,.brandcard{animation:none}
}

/* ═══════════════ VIDEO ═══════════════ */
.video{
  position:relative;border-radius:var(--r-card);overflow:hidden;background:var(--g-900);
  aspect-ratio:16/8.2;display:grid;place-items:center;isolation:isolate;
}
.video::before{ /* scan-line texture behind the mark */
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 2px,transparent 2px 9px);
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000 20%,transparent 78%);
  mask-image:radial-gradient(70% 70% at 50% 50%,#000 20%,transparent 78%);
}
.video-mark{position:relative;z-index:2;display:flex;align-items:center;gap:clamp(.5rem,1.1vw,.9rem);color:#fff}
.video-mark .vm-logo{width:clamp(30px,4vw,54px);height:auto}
.video-mark span{font-size:clamp(1.6rem,4.6vw,3.4rem);letter-spacing:.04em;font-weight:300}
.play{
  position:relative;z-index:3;flex:none;
  width:clamp(38px,4.4vw,56px);height:clamp(38px,4.4vw,56px);border-radius:50%;
  background:rgba(255,255,255,.9);display:grid;place-items:center;
  transition:transform .25s ease,background .25s ease;
}
.play:hover{transform:scale(1.07);background:#fff}
.play svg{width:16px;height:16px;fill:var(--g-900);margin-left:2px}

/* ═══════════════ THE LOOP ═══════════════ */
.loop{display:grid;grid-template-columns:1fr;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--surface)}
@media (min-width:900px){.loop{grid-template-columns:.82fr 1.5fr}}
.loop-rail{display:flex;flex-direction:column;gap:1.4rem;padding:clamp(1.3rem,2.2vw,2rem);border-bottom:1px solid var(--line)}
@media (min-width:900px){.loop-rail{border-bottom:0;border-right:1px solid var(--line)}}
.loop-steps{display:flex;flex-direction:column;gap:.1rem;position:relative}
.loop-steps button{position:relative;display:flex;align-items:baseline;gap:.7rem;text-align:left;padding:.6rem .1rem;transition:color .2s}
.loop-steps .ls-n{font-family:var(--mono);font-size:.6875rem;color:var(--g-300);letter-spacing:.06em;transition:color .2s}
.loop-steps .ls-t{font-size:1rem;letter-spacing:-.02em;color:var(--ink-3);transition:color .2s}
.loop-steps button:hover .ls-t{color:var(--ink)}
.loop-steps button[aria-selected="true"] .ls-t{color:var(--ink)}
.loop-steps button[aria-selected="true"] .ls-n{color:var(--olive)}
.loop-steps button[aria-selected="true"]::before{content:"";position:absolute;left:-.9rem;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:2px;background:var(--olive)}
.loop-copy{display:flex;flex-direction:column;gap:1rem;margin-top:auto}
.loop-copy p{font-size:.9rem;line-height:1.7;color:var(--ink-2);min-height:5.1em}

.loop-screen{position:relative;background:linear-gradient(168deg,var(--panel),var(--surface));min-height:400px;overflow:hidden}
@media (min-width:900px){.loop-screen{min-height:486px}}
.jscene{position:absolute;inset:0;padding:clamp(.9rem,1.7vw,1.4rem);display:flex;flex-direction:column;gap:.65rem;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease}
.jscene.on{opacity:1;visibility:visible;transform:none}

.jcard{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:.8rem .9rem;display:flex;flex-direction:column;gap:.55rem}
.jc-h{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.jc-h b{font-size:.8125rem;font-weight:400;letter-spacing:-.01em}
.jc-h span{font-family:var(--mono);font-size:.5625rem;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase}

/* scene 0 - visibility */
.jv-top{display:grid;grid-template-columns:1fr;gap:.65rem}
@media (min-width:560px){.jv-top{grid-template-columns:.82fr 1fr}}
.jbars{display:flex;align-items:flex-end;justify-content:space-around;gap:.5rem;height:100px;padding-top:.2rem}
.jbcol{display:flex;flex-direction:column;align-items:center;gap:.5rem;flex:0 0 auto}
.jbcol>span{font-family:var(--mono);font-size:.5rem;color:var(--ink-3);letter-spacing:.03em;white-space:nowrap}
.jbar{display:flex;flex-direction:column-reverse;width:24px;gap:2px}
.sg{width:100%;border-radius:2px;height:var(--h);transform:scaleY(0);transform-origin:bottom;transition:transform .6s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--d,0)*.12s)}
.jscene.on .sg{transform:scaleY(1)}
.sg-a{background:#CB6B52}.sg-b{background:#E0A06E}.sg-c{background:#E8CE85}.sg-d{background:#A7C06B}
.jcats{display:flex;flex-direction:column;gap:.48rem;list-style:none}
.jcats li{display:grid;grid-template-columns:58px 1fr auto;align-items:center;gap:.5rem;font-size:.6875rem}
.jcats li span{color:var(--ink-2)}
.jcats li b{font-family:var(--mono);font-size:.5875rem;color:var(--ink-2);font-weight:400;text-align:right}
.bh{height:7px;border-radius:4px;background:#DDE7CF;position:relative;overflow:hidden}
.bh::after{content:"";position:absolute;inset:0;width:var(--w);background:#5B9245;border-radius:4px;transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--d,0)*.1s + .1s)}
.jscene.on .bh::after{transform:scaleX(1)}
.jtiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.jtile{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:.55rem .65rem;display:flex;flex-direction:column;gap:.25rem;opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s;transition-delay:calc(var(--d,0)*.1s + .28s)}
.jscene.on .jtile{opacity:1;transform:none}
.jtile>span{font-size:.5625rem;color:var(--ink-3);line-height:1.2}
.jt-r{display:flex;align-items:baseline;gap:.35rem}
.jt-r b{font-size:.875rem;font-weight:500;letter-spacing:-.02em}
.jt-r em,.jkt em{font-family:var(--mono);font-size:.5rem;font-style:normal;padding:.05rem .22rem;border-radius:3px}
.up{color:#B4432F;background:rgba(193,90,63,.1)}
.down{color:#4E7D32;background:rgba(91,146,69,.12)}
.spark{width:100%;height:22px}
.spark .sp{fill:none;stroke-width:1.3;stroke-linecap:round;stroke:#C15A3F;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .9s ease;transition-delay:calc(var(--d,0)*.1s + .42s)}
.jtile--good .sp,.spark.good .sp{stroke:#5B9245}
.spark.bad .sp{stroke:#C15A3F}
.jscene.on .spark .sp{stroke-dashoffset:0}

/* scene 1 - impact */
.jsk-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.jsk-eye{display:block;font-family:var(--mono);font-size:.5625rem;color:var(--ink-3);letter-spacing:.05em;text-transform:uppercase;margin-bottom:.22rem}
.jsk-head b{font-size:1.05rem;font-weight:500;letter-spacing:-.02em}
.jsk-badge{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--mono);font-size:.5625rem;color:var(--g-500);border:1px solid var(--line);border-radius:20px;padding:.2rem .55rem;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.jsk-badge i{width:6px;height:6px;border-radius:50%;background:#5B9245}
.jsk-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;border-block:1px solid var(--line);padding:.65rem 0}
.jsk-meta div{display:flex;flex-direction:column;gap:.15rem}
.jsk-meta span{font-size:.5rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.03em}
.jsk-meta b{font-size:.8125rem;font-weight:400}
.jsk-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.jkt{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:.55rem .6rem;display:flex;flex-direction:column;gap:.18rem;opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s;transition-delay:calc(var(--d,0)*.09s)}
.jscene.on .jkt{opacity:1;transform:none}
.jkt>span{font-size:.5rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.03em}
.jkt>b{font-size:.9375rem;font-weight:500;letter-spacing:-.02em}
.jkt em{align-self:flex-start}
.spark--sm{height:16px}
.jsk-trend{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:.65rem .8rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.jtrend{width:100%;height:78px;flex:1}
.jt-area{fill:rgba(91,146,69,.13);opacity:0;transition:opacity .8s ease .45s}
.jscene.on .jt-area{opacity:1}
.jt-line{fill:none;stroke:#5B9245;stroke-width:1.4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.1s ease .2s}
.jscene.on .jt-line{stroke-dashoffset:0}

/* scene 2 - control (dark) */
.jscene--dark{background:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1.4px) 0 0/17px 17px,linear-gradient(158deg,#1E2B27,#131E1A)}
.jwf-top{display:flex;gap:.5rem;flex-wrap:wrap}
.jwf-chip{font-family:var(--mono);font-size:.5625rem;letter-spacing:.03em;padding:.32rem .6rem;border-radius:6px}
.jwf-chip--tr{color:#CFE0C8;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.jwf-chip--ai{color:#16231E;background:#CFE6B8;font-weight:500}
.jwf-flow{flex:1;display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.wnode{flex:1 1 130px;min-width:118px;position:relative;background:rgba(255,255,255,.97);border-radius:7px;padding:.5rem .55rem;display:flex;flex-direction:column;gap:.1rem;box-shadow:0 5px 14px -8px rgba(0,0,0,.6);opacity:0;transform:translateY(10px) scale(.96);transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--d,0)*.62s)}
.jscene.on .wnode{opacity:1;transform:none}
.wnode b{font-size:.6rem;color:#16231E;font-weight:400;line-height:1.25}
.wnode span{font-size:.5rem;color:#6B7A72}
.wdot{width:7px;height:7px;border-radius:2px;flex:none;margin-bottom:.12rem}
.wdot.tr{background:#B48CD0}.wdot.q{background:#5B8FD0}.wdot.l{background:#D0A44A}.wdot.a{background:#7FBF57}
.wnode--tr{border-left:2px solid #B48CD0}.wnode--q{border-left:2px solid #5B8FD0}.wnode--l{border-left:2px solid #D0A44A}.wnode--a{border-left:2px solid #7FBF57}
.wconn{flex:0 0 16px;height:2px;border-radius:2px;background:rgba(255,255,255,.14);position:relative;overflow:hidden;transform:scaleX(0);transform-origin:left;transition:transform .4s ease;transition-delay:calc(var(--i,0)*.62s + .34s)}
.jscene.on .wconn{transform:scaleX(1)}
.wconn::after{content:"";position:absolute;top:0;left:-45%;width:45%;height:100%;background:linear-gradient(90deg,transparent,#A9D08C,transparent);animation:wconn 1.9s linear infinite;animation-delay:calc(var(--i,0)*.32s)}
@keyframes wconn{to{left:120%}}
.jwf-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem;margin-top:.2rem}
.jwf-tmpl{font-size:.625rem;color:#CFE0C8}
.jwf-leg{display:flex;align-items:center;gap:.28rem;font-family:var(--mono);font-size:.5rem;color:rgba(207,224,200,.72)}
.jwf-leg .wdot{margin:0 0 0 .35rem}

/* scene 3 - prevention */
.jca-head{display:flex;flex-direction:column;gap:.65rem}
.jca-title b{display:block;font-size:1.05rem;font-weight:500;letter-spacing:-.02em;margin-top:.15rem}
.jca-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.jca-time{position:relative;display:flex;flex-direction:column;gap:.42rem;flex:1;padding-left:1rem;margin-top:.15rem}
.jca-time::before{content:"";position:absolute;left:3px;top:8px;bottom:8px;width:1px;background:var(--line)}
.jca-rec{position:relative;border:1px solid rgba(63,107,30,.3);background:rgba(91,146,69,.06);border-radius:8px;padding:.6rem .8rem;display:flex;flex-direction:column;gap:.26rem;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s;transition-delay:calc(var(--d,0)*.13s)}
.jscene.on .jca-rec{opacity:1;transform:none}
.jca-rec::before{content:"";position:absolute;left:calc(-1rem - 4px);top:1rem;width:9px;height:9px;border-radius:50%;background:var(--olive);box-shadow:0 0 0 3px var(--surface)}
.jca-tag{font-family:var(--mono);font-size:.5rem;color:var(--olive);letter-spacing:.05em;text-transform:uppercase}
.jca-rec>b{font-size:.8125rem;font-weight:500;letter-spacing:-.01em}
.jca-rec p{font-size:.6875rem;color:var(--ink-2);line-height:1.5}
.jca-act{display:flex;align-items:center;gap:.7rem;margin-top:.15rem}
.jca-btn{background:var(--olive);color:#fff;font-size:.625rem;font-weight:500;padding:.4rem .7rem;border-radius:5px;cursor:pointer;transition:background .2s}
.jca-btn:hover{background:#345818}
.jca-act>span{font-family:var(--mono);font-size:.5rem;color:var(--ink-3)}
.jca-item{position:relative;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:.48rem .8rem;display:flex;gap:.5rem;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s;transition-delay:calc(var(--d,0)*.13s)}
.jscene.on .jca-item{opacity:1;transform:none}
.jca-dot{position:absolute;left:calc(-1rem - 4px);top:.9rem;width:9px;height:9px;border-radius:50%;background:var(--g-300);box-shadow:0 0 0 3px var(--surface);flex:none}
.jca-item b{font-size:.6875rem;font-weight:400;color:var(--ink);line-height:1.4}
.jca-item span{display:block;font-family:var(--mono);font-size:.5rem;color:var(--ink-3);margin-top:.25rem}
@media (prefers-reduced-motion:reduce){
  .jscene,.sg,.bh::after,.jtile,.jkt,.jt-area,.jt-line,.jca-rec,.jca-item,.wnode{transition:none!important}
  .wconn{transition:none;transform:none}.wconn::after{animation:none;display:none}
  .spark .sp{transition:none;stroke-dashoffset:0}
}
.j-more{display:inline-flex;align-items:center;gap:.4rem;font-size:.8125rem;color:var(--g-700);align-self:flex-start}
.j-more:hover{gap:.6rem}
.j-more svg{width:13px;height:13px;transition:transform .25s}


/* the loop - added detail + live pulses */
.jrates{display:flex;align-items:center;gap:.9rem;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:.5rem .8rem}
.jrates>div{display:flex;flex-direction:column;gap:.08rem}
.jrates>div span{font-size:.5rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.03em}
.jrates>div b{font-size:.8125rem;font-weight:500;letter-spacing:-.01em}
.jlive{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.5rem;color:var(--g-500);letter-spacing:.05em;text-transform:uppercase}
.jlive i{width:6px;height:6px;border-radius:50%;background:#5B9245;animation:blip 1.9s ease-out infinite}
@keyframes blip{0%{box-shadow:0 0 0 0 rgba(91,146,69,.5)}70%{box-shadow:0 0 0 6px rgba(91,146,69,0)}100%{box-shadow:0 0 0 0 rgba(91,146,69,0)}}
.jsk-lower{display:grid;grid-template-columns:1fr;gap:.55rem;flex:1}
@media (min-width:560px){.jsk-lower{grid-template-columns:1.5fr 1fr}}
.jsk-chan{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:.65rem .8rem;display:flex;flex-direction:column;gap:.55rem}
.jcats--chan li{grid-template-columns:52px 1fr auto}
.jwf-stat{display:inline-flex;align-items:center;gap:.4rem;margin-left:auto;font-family:var(--mono);font-size:.5rem;color:rgba(207,224,200,.82);letter-spacing:.02em}
.wlive{width:6px;height:6px;border-radius:50%;background:#8FD06A;animation:blip 1.9s ease-out infinite}
.jca-item--q b{color:var(--ink-2)}
.sp-dot{opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .3s ease;transition-delay:calc(var(--d,0)*.1s + 1.05s)}
.spark .sp-dot{fill:#C15A3F}
.jtile--good .sp-dot,.spark.good .sp-dot{fill:#5B9245}
.spark.bad .sp-dot{fill:#C15A3F}
.jscene.on .sp-dot{opacity:1;animation:livedot 1.7s ease-in-out infinite;animation-delay:calc(var(--d,0)*.1s + 1.05s)}
@keyframes livedot{0%,100%{opacity:.55;transform:scale(.72)}50%{opacity:1;transform:scale(1.22)}}
@media (prefers-reduced-motion:reduce){.jlive i,.wlive{animation:none}.sp-dot{opacity:1;animation:none}}


/* the loop - loss-by-vertical grid + risk profile */
.jverts{display:flex;flex-direction:column;gap:.5rem;flex:1}
.jvgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;flex:1}
@media (min-width:560px){.jvgrid{grid-template-columns:repeat(4,1fr)}}
.jvc{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:.55rem .6rem;display:flex;flex-direction:column;gap:.3rem;justify-content:space-between;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s;transition-delay:calc(var(--d,0)*.055s + .2s)}
.jscene.on .jvc{opacity:1;transform:none}
.jvc>span{font-size:.5rem;color:var(--ink-3);line-height:1.2}
.jvc-r{display:flex;align-items:baseline;gap:.3rem;flex-wrap:wrap}
.jvc-r b{font-size:.8125rem;font-weight:500;letter-spacing:-.02em}
.jvc-r em{font-family:var(--mono);font-size:.45rem;font-style:normal;padding:.03rem .18rem;border-radius:3px}
.spark--mini{height:15px}

.jsk-sub{font-size:.6875rem;color:var(--ink-3);margin-top:.25rem}
.jrisk{border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,var(--panel),var(--surface));padding:.9rem 1rem;display:grid;grid-template-columns:1fr;gap:.7rem}
@media (min-width:560px){.jrisk{grid-template-columns:auto 1fr;gap:1.5rem;align-items:center}}
.jrisk-l{display:flex;flex-direction:column;gap:.18rem}
.jrisk-l .jsk-eye{margin-bottom:.1rem}
.jrisk-num{display:flex;align-items:baseline;gap:.25rem}
.jrisk-num b{font-size:2.1rem;font-weight:400;letter-spacing:-.03em;line-height:.9;color:var(--ink)}
.jrisk-num span{font-family:var(--mono);font-size:.625rem;color:var(--ink-3)}
.jrisk-lvl{display:inline-flex;align-items:center;gap:.4rem;font-size:.6875rem;color:var(--g-500)}
.jrisk-lvl i{width:8px;height:8px;border-radius:50%;background:#5B9245;animation:blip 2s ease-out infinite}
.jrisk-r{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.jrisk-bar{position:relative;height:8px;border-radius:5px;background:linear-gradient(90deg,#5B9245 0%,#A7C06B 26%,#E8CE85 52%,#E0A06E 76%,#CB6B52 100%)}
.jrisk-mark{position:absolute;top:-3px;bottom:-3px;width:3px;border-radius:2px;background:var(--ink);left:0;box-shadow:0 0 0 3px var(--surface);transition:left 1.1s cubic-bezier(.22,1,.36,1) .25s}
.jscene.on .jrisk-mark{left:var(--p)}
.jrisk-scale{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.5rem;color:var(--ink-3);letter-spacing:.01em}
.jrisk-scale .on{color:var(--olive);font-weight:500}
.jrisk-note{font-size:.625rem;color:var(--ink-2);line-height:1.45}


/* ═══════════════ ARROW-FILL BUTTON ═══════════════ */
/* fill sweeps out from the arrow circle on hover; text wipes to green; arrow slides */
.afbtn{--af-bg:#5B9245;--af-fg:#fff;--af-fill:#fff;--af-fillfg:#2E4A24;--af-circle:1.75rem;--af-gap:.55rem;--af-px:1.05rem;
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:.6rem var(--af-px);padding-right:calc(var(--af-circle) + var(--af-gap) + var(--af-px));
  border-radius:999px;background:var(--af-bg);color:var(--af-fg);
  font-size:.8125rem;font-weight:500;letter-spacing:-.01em;line-height:1;white-space:nowrap;
  overflow:hidden;isolation:isolate;cursor:pointer;border:1px solid var(--af-bg)}
.af-txt{position:relative;z-index:1}
.af-fill{position:absolute;z-index:2;inset:.28rem .16rem .28rem .28rem;border-radius:999px;background:var(--af-fill);pointer-events:none;
  clip-path:inset(0 0 0 calc(100% - var(--af-circle)) round 999px);
  transition:clip-path .45s cubic-bezier(.785,.135,.15,.86)}
.af-txt--fill{position:absolute;z-index:3;inset:0;display:flex;align-items:center;justify-content:center;
  padding:.6rem var(--af-px);padding-right:calc(var(--af-circle) + var(--af-gap) + var(--af-px));
  color:var(--af-fillfg);pointer-events:none;
  clip-path:inset(0 0 0 calc(100% - var(--af-circle)));
  transition:clip-path .45s cubic-bezier(.785,.135,.15,.86)}
.af-ico{position:absolute;z-index:4;right:.16rem;top:50%;transform:translateY(-50%);
  width:var(--af-circle);height:var(--af-circle);border-radius:50%;background:var(--af-fill);
  display:grid;place-items:center;color:var(--af-fillfg);overflow:hidden;pointer-events:none}
.af-ico svg{position:absolute;width:.95rem;height:.95rem;transition:transform .45s cubic-bezier(.785,.135,.15,.86)}
.af-a1{transform:translateX(-170%) scale(0)}
.af-a2{transform:translateX(0) scale(1)}
.afbtn:hover .af-fill{clip-path:inset(0 0 0 0 round 999px)}
.afbtn:hover .af-txt--fill{clip-path:inset(0 0 0 0)}
.afbtn:hover .af-a1{transform:translateX(0) scale(1)}
.afbtn:hover .af-a2{transform:translateX(70%) scale(0)}
.afbtn:focus-visible{outline:2px solid var(--g-500);outline-offset:3px}
/* larger CTA variant */
.afbtn--lg{--af-circle:2.1rem;--af-px:1.35rem;font-size:.9375rem;padding-top:.72rem;padding-bottom:.72rem}
.afbtn--lg .af-txt--fill{padding-top:.72rem;padding-bottom:.72rem}
/* dark variant (offBlack pill, green fill) for headers over light nav */
.afbtn--dark{--af-bg:#0f1012;--af-fg:#fff;--af-fill:#5B9245;--af-fillfg:#fff}
@media (prefers-reduced-motion:reduce){.af-fill,.af-txt--fill,.af-ico svg{transition:none}}


/* ═══════════════ VISIBILITY PAGE ═══════════════ */
#vhero{padding-top:clamp(6rem,10vw,9rem)}
.vhero-head{max-width:52rem}
.vhero-head h1{font-size:clamp(2.2rem,6vw,4.4rem);letter-spacing:-.03em;line-height:1.02;margin:.8rem 0 0}
.vhero-head .lede{margin-top:1.4rem;max-width:46ch;font-size:clamp(.95rem,1.2vw,1.0625rem);color:var(--ink-2);line-height:1.65}
.vhero-cta{margin-top:1.8rem}
.radar-wrap{position:relative;margin-top:clamp(1rem,3vw,2rem)}
.radar3d{position:relative;width:100%;max-width:1120px;margin:0 auto;height:clamp(380px,48vw,660px)}
.radar3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.radar-leads{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.radar-labels{position:absolute;inset:0;pointer-events:none}
.rlab{position:absolute;transform:translateY(-50%);font-family:var(--mono);font-size:.6875rem;line-height:1.32;color:var(--g-700);background:rgba(223,236,211,.78);border:1px solid rgba(91,146,69,.28);border-radius:5px;padding:.32rem .5rem;max-width:160px;opacity:0;transition:opacity .5s ease}
.rlab.in{opacity:1}
.radar-status{position:absolute;left:50%;bottom:.4rem;transform:translateX(-50%);display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--g-500)}
.radar-status i{width:6px;height:6px;border-radius:50%;background:#5B9245;animation:blip 1.9s ease-out infinite}

.vcards{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line);margin-top:clamp(1.5rem,3vw,2.5rem)}
@media (min-width:760px){.vcards{grid-template-columns:1fr 1fr}}
.vcard{position:relative;display:flex;flex-direction:column;gap:.5rem;padding:clamp(1.5rem,2.8vw,2.3rem) 0;border-bottom:1px solid var(--line)}
@media (min-width:760px){.vcard{padding:clamp(1.7rem,2.6vw,2.4rem) clamp(1.6rem,2.8vw,2.6rem)}.vcard:nth-child(odd){border-right:1px solid var(--line);padding-left:0}.vcard:nth-child(even){padding-right:0}}
.vcard .vk{font-family:var(--mono);font-size:.8125rem;color:var(--g-300);letter-spacing:.1em;margin-bottom:.4rem}
.vcard h3{font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.3;letter-spacing:-.015em;max-width:24ch;font-weight:400}
.vcard p{font-size:.9rem;line-height:1.72;color:var(--ink-2);max-width:44ch}
@media (prefers-reduced-motion:reduce){.radar-status i{animation:none}}

/* ═══════════════ FAQ ═══════════════ */
.faq{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media (min-width:900px){.faq{grid-template-columns:.75fr 1.25fr;gap:3rem}}
.faq-list{display:grid;gap:.5rem}
.qa{border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden}


/* the closing wordmark rises out of the footer */
.js .rv-rise{opacity:0;transform:translateY(28%);
  transition:opacity 1s ease,transform 1.2s cubic-bezier(.22,1,.36,1)}
.js .rv-rise.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .js .rv,.js .rv-mask,.js .rv-zoom,.js .rv-screen,.js .rv-wipe,.js .rv-rise,
  .js .rv-mask > .mask-in{
    opacity:1;transform:none;filter:none;clip-path:none;transition:none}
  .js .bento .cell,.js .faq-list .qa{opacity:1;transform:none;filter:none;animation:none}
}

/* ═══════════════ REVEAL ═══════════════ */
.rv{opacity:1;transform:none}
.js .rv.d1{transition-delay:.06s}.js .rv.d2{transition-delay:.12s}.js .rv.d3{transition-delay:.18s}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .banner-words span{transition:none}
}


/* ═══════════════ THE AGENTIC LAYER ═══════════════ */
.stellar{
  position:relative;border-radius:16px;overflow:hidden;isolation:isolate;
  width:100%;aspect-ratio:1000/420;
  background:
    radial-gradient(120% 120% at 50% 40%, #2C4438 0%, transparent 62%),
    radial-gradient(90% 90% at 12% 96%, #1B2A22 0%, transparent 60%),
    #17241D;
  box-shadow:0 26px 70px rgba(16,32,26,.28);
}
.stellar-sky{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.stellar-web{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}
.stellar-web .wl{fill:none;stroke:rgba(164,214,20,.16);stroke-width:1}
.stellar-web .wp{fill:none;stroke:#A4D614;stroke-width:1.4;stroke-linecap:round;
  stroke-dasharray:6 94;animation:wpflow 4s linear infinite;
  animation-delay:calc(var(--i,0) * -.5s)}
@keyframes wpflow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}

/* the hands read as the human ⟷ machine handshake, sized to frame the field
   rather than dominate it */
.stellar-hand{
  position:absolute;z-index:2;pointer-events:none;
  width:clamp(160px,23%,310px);height:auto;
}
/* the human hand sits bottom-left, its mask anchored to the same corner.
   The placement was lost when a DOTALL regex rewrote these two blocks. */
.stellar-hand--h{
  left:-1.5%;bottom:-6%;transform:rotate(-8deg);
  -webkit-mask-image:radial-gradient(150% 150% at 2% 98%, #000 58%, rgba(0,0,0,.9) 74%, transparent 96%);
  mask-image:radial-gradient(150% 150% at 2% 98%, #000 58%, rgba(0,0,0,.9) 74%, transparent 96%);
}
.stellar-hand--r{
  right:-1.5%;top:-6%;transform:rotate(8deg);
  -webkit-mask-image:radial-gradient(150% 150% at 98% 2%, #000 58%, rgba(0,0,0,.9) 74%, transparent 96%);
  mask-image:radial-gradient(150% 150% at 98% 2%, #000 58%, rgba(0,0,0,.9) 74%, transparent 96%);
}


/* ═══════════════ AGENTIC LAYER · one flow, left to right ═══════════════ */
.stellar{border-radius:16px 16px 0 0}
.flow-label{
  position:absolute;z-index:4;font-family:var(--mono);font-size:.5625rem;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(242,246,238,.42);
}
.flow-label--in{left:clamp(1rem,3vw,2.25rem);top:clamp(1rem,3vw,1.75rem)}
.flow-label--out{right:clamp(1rem,3vw,2.25rem);top:clamp(1rem,3vw,1.75rem)}
/* the signal chips orbiting the core. The base rule and the core card were lost
   with the same DOTALL regex that took the hand masks; rebuilt from the render. */
.agent{
  position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;z-index:3;
  display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
  padding:.34rem .62rem;border-radius:var(--r-pill);
  background:rgba(20,34,26,.78);border:1px solid rgba(164,214,20,.22);
  font-family:var(--mono);font-size:.625rem;letter-spacing:.04em;
  color:rgba(242,246,238,.86);
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  opacity:0;transform:scale(.9);
  transition:opacity .5s ease,transform .6s cubic-bezier(.19,1,.22,1)}
.agent i{width:5px;height:5px;border-radius:50%;background:#A4D614;flex:none;
  box-shadow:0 0 0 3px rgba(164,214,20,.14)}
.rv.in .agent,.stellar.in .agent{opacity:1;transform:scale(1);transition-delay:var(--d,.4s)}
.agent--out{border-color:rgba(164,214,20,.30);background:rgba(24,42,26,.72)}
.agent--out i{background:#CDE87A}

.stellar-core{
  position:absolute;left:50%;top:49.8%;translate:-50% -50%;z-index:3;
  display:grid;justify-items:center;gap:.15rem;text-align:center;
  padding:.85rem 1.5rem;border-radius:11px;
  background:rgba(12,22,16,.92);border:1px solid rgba(164,214,20,.28);
  box-shadow:0 0 0 6px rgba(164,214,20,.05),0 18px 44px rgba(0,0,0,.42);
  animation:coreBreathe 5s ease-in-out infinite}
.stellar-core b{font-size:1.0625rem;font-weight:500;letter-spacing:-.02em;color:#F2F6EE}
.stellar-core span{font-family:var(--mono);font-size:.5625rem;letter-spacing:.08em;color:#A4D614}
@media (max-width:760px){
  .stellar{aspect-ratio:1000/560}
  .agent{font-size:.5rem;padding:.26rem .48rem}
  .stellar-core{padding:.6rem 1rem}
  .stellar-core b{font-size:.875rem}
}
@media (prefers-reduced-motion:reduce){
  .agent{opacity:1;transform:none;transition:none}
  .stellar-core{animation:none}
  .stellar-web .wp{animation:none}
}

/* the cards continue the panel rather than starting a new visual world */
/* numbered narrative - the section's primary content, editorial hairline grid */
.agrid{margin-top:clamp(1.5rem,3vw,2.6rem);display:grid;grid-template-columns:1fr;border-top:1px solid var(--line)}
@media (min-width:760px){.agrid{grid-template-columns:1fr 1fr}}
.acard{position:relative;display:flex;flex-direction:column;gap:.55rem;padding:clamp(1.5rem,2.8vw,2.3rem) 0;border-bottom:1px solid var(--line)}
@media (min-width:760px){
  .acard{padding:clamp(1.7rem,2.6vw,2.4rem) clamp(1.6rem,2.8vw,2.6rem)}
  .acard:nth-child(odd){border-right:1px solid var(--line);padding-left:0}
  .acard:nth-child(even){padding-right:0}
}
.acard .ak{font-family:var(--mono);font-size:.8125rem;color:var(--g-300);letter-spacing:.1em;margin-bottom:.4rem}
.acard h3{font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.3;letter-spacing:-.015em;max-width:22ch}
.acard p{font-size:.9rem;line-height:1.72;color:var(--ink-2);max-width:42ch}


/* ═══════════════ AGENTIC FLOW (day-one component, dark) ═══════════════ */
.aflow{
  position:relative;border-radius:16px 16px 0 0;overflow:hidden;isolation:isolate;
  aspect-ratio:1000/430;min-height:340px;
  background:
    radial-gradient(120% 120% at 50% 40%, #2C4438 0%, transparent 62%),
    radial-gradient(90% 90% at 12% 96%, #1B2A22 0%, transparent 60%),
    #17241D;
  box-shadow:0 26px 70px rgba(16,32,26,.28);
}
.aflow-links{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
.aflow .tl-base{stroke:rgba(164,214,20,.18);stroke-width:.5}
.aflow .tl-flow{stroke:#A4D614;stroke-width:.7}
.aflow-grid{
  position:relative;z-index:3;height:100%;display:grid;
  grid-template-columns:minmax(0,31%) minmax(0,1fr) minmax(0,26%);
  align-items:center;padding:clamp(1rem,2.6vw,2rem);gap:1rem;
}
.aflow-cap{font-family:var(--mono);font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(242,246,238,.4);margin-bottom:.7rem}
.aflow-cap--r{text-align:right}
.asig-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.45rem}
.aout{display:grid;gap:.55rem;justify-items:stretch}
/* the same tile as day one, themed for the dark panel */
.atile{
  display:grid;place-items:center;text-align:center;
  padding:.6rem .4rem;border-radius:9px;
  font-family:var(--mono);font-size:.5625rem;letter-spacing:.03em;
  color:rgba(242,246,238,.88);
  background:rgba(20,34,26,.72);border:1px solid rgba(242,246,238,.13);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .25s ease;
}
.js .atile{opacity:0;transform:translateY(10px)}
.js .aflow.in .atile{animation:toolIn .5s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:calc(var(--t) * .06s)}
.atile:hover{transform:translateY(-2px);border-color:rgba(164,214,20,.42)}
.atile--out{border-color:rgba(164,214,20,.30);color:#DCEFAE}
.acore{
  justify-self:center;display:grid;justify-items:center;gap:.15rem;text-align:center;
  background:rgba(12,22,16,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(164,214,20,.34);border-radius:12px;padding:.9rem 1.3rem;
  box-shadow:0 0 0 6px rgba(164,214,20,.06),0 14px 40px rgba(0,0,0,.4);
  animation:coreBreathe 5s ease-in-out infinite;
}
.acore b{font-size:1rem;font-weight:500;color:#F2F6EE;letter-spacing:-.02em}
.acore span{font-family:var(--mono);font-size:.5625rem;color:#A4D614;letter-spacing:.08em}
@media (max-width:820px){
  .aflow{aspect-ratio:auto;height:auto;min-height:0;padding-block:1.25rem}
  .aflow-links{display:none}
  .aflow-grid{grid-template-columns:1fr;gap:1.25rem;height:auto}
  .aflow-cap--r{text-align:left}
  .atile{font-size:.5rem}
}

/* ═══════════════════════════════════════════════════════════════
   RESTORED BLOCK
   A DOTALL regex deleted 264 lines from here. Everything below is
   rebuilt. Append only to this file; never regex-delete across it.
   ═══════════════════════════════════════════════════════════════ */

/* ── disclosure rows ── */
.qa{border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden;
  transition:border-color .25s ease,box-shadow .25s ease}
.qa.is-open{border-color:var(--g-300);box-shadow:0 8px 26px rgba(30,43,39,.06)}
.qa-h{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;
  padding:.95rem 1.1rem;font-size:.875rem;font-weight:400;color:var(--ink);cursor:pointer}
.qa-n{font-family:var(--mono);font-size:.6875rem;color:var(--ink-3);flex:none}
.qa-t{flex:1}
.qa-h .x{flex:none;width:13px;height:13px;position:relative}
.qa-h .x::before,.qa-h .x::after{content:"";position:absolute;inset:0;margin:auto;background:var(--ink-3);
  transition:transform .3s cubic-bezier(.4,0,.2,1),background .25s}
.qa-h .x::before{width:11px;height:1.2px}
.qa-h .x::after{width:1.2px;height:11px}
.qa.is-open .qa-h .x::after{transform:rotate(90deg)}
.qa.is-open .qa-h .x::before,.qa.is-open .qa-h .x::after{background:var(--g-700)}
.qa-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1)}
.qa.is-open .qa-b{grid-template-rows:1fr}
.qa-b > .a{overflow:hidden;min-height:0;font-size:.8125rem;color:var(--ink-2);line-height:1.7;
  padding-inline:1.1rem;opacity:0;transition:opacity .24s ease,padding .3s cubic-bezier(.4,0,.2,1)}
.qa.is-open .qa-b > .a{opacity:1;padding-bottom:1.05rem}

/* ── entrances ── */
.rv-mask{display:block;perspective:900px}
.js .rv-mask > .mask-in{display:block}
.js .rv-mask .w{display:inline-block;transform-origin:50% 100%;
  transform:translateY(112%) rotateX(-78deg);opacity:0;
  transition:transform .95s cubic-bezier(.19,1,.22,1),opacity .55s ease;
  transition-delay:calc(var(--w,0) * .055s)}
.js .rv-mask.in .w{transform:none;opacity:1}
.js .lift{opacity:0;filter:blur(9px);
  transform:perspective(1200px) rotateX(7deg) translateY(70px) scale(.965);
  transform-origin:50% 0%;
  transition:opacity .9s ease,filter .8s ease,transform 1.15s cubic-bezier(.19,1,.22,1)}
.js .lift.in{opacity:1;filter:blur(0);transform:none}
.js .lift .cell,.js .lift .acard,.js .lift .car-v,.js .lift .val,.js .lift .ben,.js .lift .sol{
  opacity:0;transform:translateY(34px) scale(.97);
  transition:opacity .7s ease,transform .8s cubic-bezier(.19,1,.22,1);
  transition-delay:calc(.18s + var(--c,0) * .08s)}
.js .lift.in .cell,.js .lift.in .acard,.js .lift.in .car-v,
.js .lift.in .val,.js .lift.in .ben,.js .lift.in .sol{opacity:1;transform:none}

/* ── footer ── */
footer{position:relative;z-index:1;background:var(--g-900);color:#fff;
  padding-top:clamp(2.5rem,5vw,4rem);overflow:hidden}
.f-grid{display:grid;grid-template-columns:1fr;gap:2rem}
@media (min-width:760px){.f-grid{grid-template-columns:1.5fr repeat(4,1fr);gap:1.5rem}}
.f-lead .eyebrow{color:rgba(255,255,255,.5);opacity:1;transform:none}
.f-lead .eyebrow::before{color:var(--lime)}
.f-lead p{font-size:clamp(1rem,1.5vw,1.15rem);letter-spacing:-.02em;line-height:1.35;
  max-width:26ch;margin-bottom:1.2rem}
.f-col h4{font-family:var(--mono);font-size:.625rem;font-weight:400;color:rgba(255,255,255,.45);
  letter-spacing:.06em;margin-bottom:.9rem}
.f-col ul{display:grid;gap:.55rem;list-style:none}
.f-col a{font-size:.8125rem;color:rgba(255,255,255,.72);transition:color .18s}
.f-col a:hover{color:#fff}
.f-social{display:flex;gap:.5rem;flex-wrap:wrap}
.f-social a{width:30px;height:30px;border-radius:7px;background:rgba(255,255,255,.07);
  display:grid;place-items:center;transition:background .2s;flex:none}
.f-social a:hover{background:rgba(255,255,255,.15)}
.f-social svg{width:14px;height:14px;fill:rgba(255,255,255,.8);display:block}
.f-bot{margin-top:2.5rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.1);
  font-size:.6875rem;color:rgba(255,255,255,.45);font-family:var(--mono)}
.f-mark{margin-top:clamp(1.5rem,3vw,3rem);font-size:38vw;line-height:.74;font-weight:600;
  letter-spacing:-.05em;text-indent:.09em;text-align:center;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.22);
  user-select:none;margin-bottom:-.14em;width:100%;max-width:100%;overflow:hidden}
.is-soon{display:inline-flex;align-items:center;gap:.4rem}
.is-soon span{font-family:var(--mono);font-size:.5rem;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.38);border:1px solid rgba(255,255,255,.18);border-radius:3px;padding:.06rem .26rem}
.nav-soon{display:inline-flex;align-items:center;gap:.4rem}
.nav-soon span{font-family:var(--mono);font-size:.5rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid var(--line);border-radius:3px;padding:.04rem .26rem;line-height:1.4}
.dd-soon b{display:inline-flex;align-items:center;gap:.4rem}
.dd-soon b span{font-family:var(--mono);font-size:.5rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid var(--line);border-radius:3px;padding:.04rem .26rem}

/* ── CTA ── */
#cta h2{max-width:20ch;font-size:clamp(1.9rem,4.6vw,3.2rem)}
#cta p{color:var(--ink-2);font-size:.9375rem;max-width:44ch;line-height:1.7}
.cta-grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3rem);align-items:center}
@media (min-width:960px){.cta-grid{grid-template-columns:1fr .85fr}}
.cta-copy h2{margin-bottom:1.1rem}
.cta-copy p{margin-top:0;margin-bottom:1.75rem}

/* ── outbound signal from the Seal card ── */
.day-out{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;overflow:visible}
.brandcard{position:relative}
@media (max-width:899px){.day-out{display:none}}

/* ── abstract art ── */
.art-duo{display:grid;grid-template-columns:1.62fr 1fr;gap:0;border-radius:14px;
  overflow:hidden;aspect-ratio:16/9;min-height:240px}
.art-duo__orbs{position:relative;overflow:hidden;
  background:linear-gradient(176deg,#DCE8D6 0%,#9DBE93 26%,#6F9078 58%,#43584F 100%)}
.art-duo__orbs svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.art-duo__orbs circle{fill:none;stroke:rgba(255,255,255,.62);stroke-width:.7}
.art-duo__col{display:grid;grid-template-rows:1fr 1.24fr}
.art-duo__grad{background:linear-gradient(148deg,#8FB185 0%,#63887A 46%,#3E5750 100%)}
.art-duo__lines{position:relative;overflow:hidden;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.72) 0 2px, transparent 2px 7px),
    linear-gradient(176deg,#7C9E86 0%,#55766A 62%,#3C534B 100%)}
.art-duo__lines::after{content:"";position:absolute;left:50%;bottom:0;translate:-50% 0;
  width:58%;aspect-ratio:2/1;border-radius:100% 100% 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0))}
@media (max-width:700px){.art-duo{aspect-ratio:3/2;min-height:200px}}
.cta-grid .art-duo,.mission-grid .art-duo{aspect-ratio:4/3;min-height:0}
.art-arcs{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.art-arcs svg{position:absolute;width:min(760px,86%);height:auto;overflow:visible}
.art-arcs circle{fill:none;stroke:var(--line);stroke-width:.6}
.art-arcs--tr svg{right:-6%;top:-42%}
.art-arcs--bl svg{left:-10%;bottom:-46%}
.has-art{position:relative}
.has-art > .wrap{position:relative;z-index:1}

/* ── contact ── */
#c-hero{position:relative;overflow:hidden;
  padding-top:calc(var(--nav-h) + clamp(3rem,7vw,5.5rem));
  padding-bottom:clamp(2.5rem,5vw,4rem)}
#c-hero h1{font-size:clamp(2rem,5vw,3.4rem);letter-spacing:-.035em;line-height:1.04}
#c-hero h1 em{font-style:italic;color:var(--g-700)}
#c-hero p{font-size:.9375rem;color:var(--ink-2);line-height:1.7;max-width:44ch}
.c-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr;
  gap:1.5rem;align-items:end}
@media (min-width:900px){.c-hero-grid{grid-template-columns:1.35fr 1fr}}
/* .c-arcs is the <svg> itself, not a wrapper */
svg.c-arcs{position:absolute;right:-3%;top:-52%;width:min(600px,58%);height:auto;
  z-index:0;pointer-events:none;overflow:visible}
@media (max-width:899px){svg.c-arcs{right:-18%;top:-30%;width:78%;opacity:.6}}
.c-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.75rem,4vw,3rem);align-items:start}
@media (min-width:960px){.c-grid{grid-template-columns:1.45fr .8fr}}
.c-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(1.35rem,3vw,2.1rem);display:grid;gap:1.05rem}
.f-row{display:grid;grid-template-columns:1fr;gap:1.05rem}
@media (min-width:620px){.f-row{grid-template-columns:1fr 1fr}}
/* label text, the required *, and (optional) share one baseline row;
   the field drops to a full-width row beneath them */
.c-form label{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .35rem;
  font-family:var(--mono);font-size:.625rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.c-form label > b{color:var(--olive);font-weight:400;line-height:1}
.c-form label > span{text-transform:none;letter-spacing:0;opacity:.72}
.c-form label > input,.c-form label > select,.c-form label > textarea{flex:1 0 100%;margin-top:.42rem}
.c-form label > .err{flex:1 0 100%;margin-top:.32rem}
.c-form input,.c-form select,.c-form textarea{
  font-family:var(--font);font-size:.875rem;color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:9px;padding:.72rem .85rem;width:100%;
  transition:border-color .18s,background .18s,box-shadow .18s}
.c-form textarea{resize:vertical;min-height:118px;line-height:1.6}
.c-form select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 17px) 51%,calc(100% - 12px) 51%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.2rem}
.c-form input:focus,.c-form select:focus,.c-form textarea:focus{
  outline:none;border-color:var(--g-500);background:var(--surface);
  box-shadow:0 0 0 3px rgba(71,100,94,.11)}
.c-form input[aria-invalid="true"],.c-form select[aria-invalid="true"]{border-color:#B3402F}
.err{font-family:var(--mono);font-size:.5625rem;letter-spacing:.04em;color:#B3402F;
  text-transform:none;min-height:0;display:none}
.err.on{display:block}
.c-submit{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:.25rem}
.c-submit .fine{font-size:.6875rem;color:var(--ink-3);line-height:1.55;max-width:38ch}
.c-ok{display:none;align-items:flex-start;gap:.7rem;padding:.9rem 1rem;border-radius:10px;
  background:rgba(63,107,30,.07);border:1px solid rgba(63,107,30,.2);
  font-size:.8125rem;color:var(--g-900);line-height:1.6}
.c-ok.on{display:flex}
/* .c-plate is an <a> holding svg + b + span + i */
.c-plate{position:relative;display:block;border-radius:var(--r-card);overflow:hidden;
  padding:1.5rem 1.4rem;color:#fff;margin-top:.7rem;
  background:linear-gradient(158deg,#8FB185 0%,#5A7F72 44%,#2E423E 100%);
  transition:transform .3s cubic-bezier(.19,1,.22,1),box-shadow .3s ease}
.c-plate:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(30,43,39,.18)}
.c-plate-ico{display:block;width:48px;height:26px;margin-bottom:1.05rem}
.c-plate b{display:block;font-size:1.05rem;font-weight:500;
  letter-spacing:-.02em;line-height:1.25;margin-bottom:.45rem}
.c-plate > span{display:block;font-size:.8125rem;color:rgba(255,255,255,.8);
  line-height:1.65;max-width:34ch}
.c-plate-cta{display:inline-flex;align-items:center;gap:.35rem;margin-top:1.05rem;
  font-family:var(--mono);font-style:normal;font-size:.6875rem;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px;transition:border-color .2s}
.c-plate:hover .c-plate-cta{border-color:#fff}
.c-plate-cta svg{width:13px;height:13px;transition:transform .25s ease}
.c-plate:hover .c-plate-cta svg{transform:translateX(3px)}
/* .c-loc is svg + b + span; the bare svg needs an explicit size or it fills the card */
.c-locs{display:grid;gap:.7rem;margin-top:.7rem}
.c-loc{border:1px solid var(--line);border-radius:11px;background:var(--surface);
  padding:.95rem 1.1rem;display:grid;grid-template-columns:auto 1fr;
  column-gap:.8rem;row-gap:.05rem;align-items:center;transition:border-color .25s}
.c-loc:hover{border-color:var(--g-300)}
.c-loc svg{width:18px;height:18px;grid-row:span 2;align-self:center}
.c-loc b{font-size:.9375rem;font-weight:500;letter-spacing:-.015em;align-self:end}
.c-loc span{font-size:.8125rem;color:var(--ink-3);align-self:start}
.c-close-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.75rem,4vw,3rem);align-items:center}
@media (min-width:900px){.c-close-grid{grid-template-columns:1fr .9fr}}
.c-close-cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.5rem}

/* ── legal ── */
.legal-hero{padding-top:calc(var(--nav-h) + clamp(3rem,7vw,5.5rem));
  padding-bottom:clamp(2rem,4vw,3rem);border-bottom:1px solid var(--line)}
.legal-hero h1{font-size:clamp(2rem,5vw,3.4rem);letter-spacing:-.035em;line-height:1.02}
.legal-meta{display:flex;gap:1.5rem;flex-wrap:wrap;margin-top:1.1rem;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3)}
.legal-grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start;
  padding-block:clamp(2.5rem,5vw,4rem);position:relative;z-index:1}
@media (min-width:960px){.legal-grid{grid-template-columns:230px 1fr}}
.legal-toc{position:sticky;top:calc(var(--nav-h) + 1.5rem);display:grid;gap:.5rem;align-content:start}
.legal-toc h4{font-family:var(--mono);font-size:.5625rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.35rem}
.legal-toc a{font-size:.8125rem;color:var(--ink-2);line-height:1.45;
  padding-left:.7rem;border-left:1px solid var(--line);transition:color .18s,border-color .18s}
.legal-toc a:hover{color:var(--ink);border-color:var(--g-500)}
@media (max-width:959px){.legal-toc{position:static}}
.legal-body{max-width:72ch}
.legal-body h2{font-size:clamp(1.05rem,2vw,1.35rem);letter-spacing:-.02em;
  margin-top:2.4rem;margin-bottom:.7rem;scroll-margin-top:calc(var(--nav-h) + 1.5rem)}
.legal-body h2:first-child{margin-top:0}
.legal-body h3{font-size:.9375rem;letter-spacing:-.015em;margin-top:1.4rem;margin-bottom:.45rem}
.legal-body p,.legal-body li{font-size:.875rem;color:var(--ink-2);line-height:1.75}
.legal-body p{margin-bottom:.85rem}
.legal-body ul,.legal-body ol{padding-left:1.15rem;margin-bottom:.95rem;display:grid;gap:.4rem}
.legal-body li{padding-left:.15rem}
.legal-body strong{color:var(--ink);font-weight:500}
.legal-body a{color:var(--olive);border-bottom:1px solid rgba(63,107,30,.3)}
.legal-note{border:1px solid rgba(63,107,30,.24);background:rgba(63,107,30,.05);
  border-radius:10px;padding:.9rem 1.05rem;margin-bottom:2rem;
  font-size:.8125rem;color:var(--g-900);line-height:1.65}
.legal-note b{font-weight:500}

/* ── careers ── */
.car-hero{padding-top:calc(var(--nav-h) + clamp(3.5rem,8vw,6.5rem));
  padding-bottom:clamp(2.5rem,5vw,4rem);position:relative;overflow:hidden}
.car-hero h1{font-size:clamp(2.2rem,6vw,4.2rem);letter-spacing:-.038em;line-height:1;max-width:15ch}
.car-pill{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);
  font-size:.625rem;letter-spacing:.07em;text-transform:uppercase;color:var(--g-700);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:.34rem .8rem;margin-bottom:1.2rem}
.car-pill::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--lime)}
.mission-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.75rem,4vw,3rem);align-items:center}
@media (min-width:900px){.mission-grid{grid-template-columns:1fr .82fr}}
.mission-grid p{font-size:clamp(.9375rem,1.5vw,1.05rem);color:var(--ink-2);line-height:1.75;max-width:52ch}
.mission-grid p + p{margin-top:.9rem}

/* ── values ── */
.vgrid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
@media (min-width:680px){.vgrid{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.vgrid{grid-template-columns:repeat(3,1fr)}}
.val{background:var(--surface);padding:clamp(1.3rem,2.5vw,1.85rem);
  display:grid;align-content:start;gap:.55rem;transition:background .25s}
.val:hover{background:var(--panel)}
.val-n{font-family:var(--mono);font-size:.625rem;letter-spacing:.08em;color:var(--g-300)}
.val h3{font-size:1.0625rem;letter-spacing:-.022em;line-height:1.25}
.val p{font-size:.8125rem;color:var(--ink-2);line-height:1.7}
.val .under{font-size:.75rem;color:var(--ink-3);line-height:1.65;
  padding-top:.6rem;border-top:1px solid var(--line-soft);margin-top:.25rem}

/* ── benefits ── */
.bgrid{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:680px){.bgrid{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.bgrid{grid-template-columns:repeat(4,1fr)}}
.ben{border:1px solid var(--line);border-radius:12px;background:var(--surface);
  padding:1.25rem 1.2rem;display:grid;align-content:start;gap:.5rem;
  transition:transform .3s cubic-bezier(.19,1,.22,1),box-shadow .3s,border-color .25s}
.ben:hover{transform:translateY(-3px);border-color:var(--g-300);box-shadow:0 12px 30px rgba(30,43,39,.07)}
.ben > svg{width:20px;height:20px;margin-bottom:.5rem}
.ben h3{font-size:.9375rem;letter-spacing:-.018em}
.ben p{font-size:.8125rem;color:var(--ink-2);line-height:1.65}

/* ── open roles empty state ── */
.roles-empty{border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);
  padding:clamp(1.8rem,4vw,3rem);text-align:center;display:grid;gap:.85rem;justify-items:center}
.re-lead{font-size:clamp(1.05rem,2.2vw,1.4rem);letter-spacing:-.025em;
  font-weight:400;color:var(--ink);max-width:30ch;line-height:1.3}
.roles-empty p{font-size:.875rem;color:var(--ink-2);line-height:1.7;max-width:52ch}
.roles-empty .btn{margin-top:.35rem}

/* ── misc ── */
.asig{display:grid;gap:.55rem;align-content:center;min-width:0}
.no-js .rv,.no-js .rv-mask,.no-js .lift{opacity:1!important;transform:none!important;filter:none!important}

/* the Day One connectors are drawn for the 3-column layout only; below that
   their paths run past the viewBox and force the whole page to scroll sideways */
@media (max-width:899px){
  .tools-links{display:none}
}

/* Soon items are placeholders, not navigable */
.nav-soon,.dd-soon,.is-soon{pointer-events:none;cursor:default}

/* ═══════════════ THE MISSING HALF · puzzle ═══════════════
   State machine, driven by classes on #puzzle:
     (none)     two pieces float loose, dashed; right cards read untracked
     .is-lock   loose pieces fly home, ghost cross-fades to solid
     .is-wired  the right connectors draw and their nodes appear
     .is-on     the right cards flip to tracked
   =========================================================== */
.sec--pz{background:var(--panel)}
.pz{position:relative}
.pz-stage{position:relative;width:100%}
@media (min-width:900px){.pz-stage{aspect-ratio:1200/640}}
.pz-art{display:block;width:100%;height:100%;overflow:visible}

/* ── pieces ── */
.pz-p{transform-box:fill-box;transform-origin:center;
  transition:transform 1.25s cubic-bezier(.22,1.02,.32,1)}
.pz-solid{fill:url(#pzg);stroke:#FFFFFF;stroke-width:1.5;stroke-linejoin:round;
  transition:opacity .5s ease}
.pz-ghost{fill:#DEE9D9;fill-opacity:.55;stroke:#A6BE9E;stroke-width:1.5;
  stroke-dasharray:6 5;stroke-linejoin:round;opacity:0;transition:opacity .45s ease}
/* the untracked half starts adrift and hollow */
.pz-p--loose{transform:translate(var(--lx),var(--ly)) rotate(var(--lr))}
.js .pz-p--loose .pz-solid{opacity:0}
.js .pz-p--loose .pz-ghost{opacity:1}
.pz-p--c{--lx:120px;--ly:-105px;--lr:11deg;transition-delay:.05s}
.pz-p--d{--lx:85px;--ly:118px;--lr:-13deg;transition-delay:.19s}
.is-lock .pz-p--loose{transform:none}
.is-lock .pz-p--loose .pz-solid{opacity:1;transition-delay:.72s;
  animation:pzSnap .75s ease-out .98s}
/* the seam flares lime the instant the piece seats */
@keyframes pzSnap{
  0%  {stroke:#A4D614;stroke-width:3;filter:drop-shadow(0 0 8px rgba(164,214,20,.8))}
  55% {stroke:#A4D614;stroke-width:2.1;filter:drop-shadow(0 0 4px rgba(164,214,20,.35))}
  100%{stroke:#FFFFFF;stroke-width:1.5;filter:none}
}
.is-lock .pz-p--d .pz-solid{animation-delay:1.12s}
.is-lock .pz-p--loose .pz-ghost{opacity:0;transition-delay:.72s}
/* the whole board settles once it is one shape */
.pz-grid{transform-box:fill-box;transform-origin:center}
.is-lock .pz-grid{animation:pzSettle 5.5s ease-in-out 1.5s infinite}
@keyframes pzSettle{0%,100%{scale:1}50%{scale:1.012}}

/* ── connectors ── */
.pz-w{fill:none;stroke:#9FB3AB;stroke-width:1.5;stroke-dasharray:1.5 3.4;
  stroke-linecap:round;transition:opacity .55s ease,stroke .55s ease}
.pz-w--l{opacity:.85}
/* the untracked half is wired to a slot that holds nothing yet */
.pz-w--r{opacity:.3;stroke:#B9C4BE}
.is-wired .pz-w--r{opacity:.85;stroke:var(--g-300)}
.pz-pulse{fill:none;stroke:var(--olive);stroke-width:2.2;stroke-linecap:round;
  stroke-dasharray:7 93;stroke-dashoffset:100;opacity:0}
.pz-pulse--l{opacity:1;animation:pzFlow 3.4s linear infinite;
  animation-delay:calc(var(--i,0) * -1.1s)}
.is-wired .pz-pulse--r{opacity:1;animation:pzFlow 3.4s linear infinite;
  animation-delay:calc(var(--i,0) * -1.1s)}
@keyframes pzFlow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.pz-node{fill:var(--g-900);stroke:rgba(255,255,255,.55);stroke-width:1.6;
  opacity:0;transition:opacity .35s ease}
.pz-node--l{opacity:1}
.is-wired .pz-node--r{opacity:1;transition-delay:.3s}

/* ── cards ── */
.pzc{background:linear-gradient(180deg,#F2F7F0 0%,#E6EFE6 100%);
  border:1px solid #D9E4DA;border-radius:9px;padding:.85rem .95rem;
  box-shadow:0 1px 2px rgba(30,43,39,.04)}
@media (min-width:900px){
  .pzc{position:absolute;width:23.4%;transform:translateY(-50%)}
  .pzc--tl{left:3.3%;top:28.1%}
  .pzc--bl{left:3.3%;top:84.4%}
  .pzc--tr{left:75%;top:29.7%}
  .pzc--br{left:75%;top:84.4%}
}
.pzc-h{display:flex;align-items:center;justify-content:space-between;
  gap:.5rem;margin-bottom:.7rem}
.pzc-t{font-family:var(--mono);font-size:.6875rem;color:var(--ink);letter-spacing:-.01em}
.pzc-b{display:grid;gap:.42rem}
.pzc-r{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.5rem}
.pzc-ig{display:grid;place-items:center;width:15px;height:15px;color:var(--g-700);flex:none}
.pzc-i{width:15px;height:15px;display:block}
.pzc-l{font-size:.75rem;color:var(--ink-2)}
.pzc-l--wide{grid-column:1/3}
.pzc-v{font-size:.75rem;font-weight:500;color:var(--ink);white-space:nowrap}
.pzc-d{display:inline-flex;align-items:center;gap:.2rem;color:var(--ink-3);
  transition:color .5s ease}
.pzc-d .ar{font-size:.8125rem;line-height:1}
.is-on .pzc-d--d{color:#B3402F}
.is-on .pzc-d--u{color:var(--olive)}
/* the attribution card */
.pzc-b--big{grid-template-columns:1fr auto;align-items:center;gap:.55rem .6rem}
.pzc-big b{display:block;font-size:1.35rem;font-weight:500;letter-spacing:-.03em;
  color:var(--ink);line-height:1.1}
.pzc-big span{display:block;font-size:.6875rem;color:var(--ink-2);margin-top:.1rem}
.pz-sw{position:relative;display:grid}
.pz-sw > span{grid-area:1/1;transition:opacity .45s ease,transform .55s cubic-bezier(.19,1,.22,1)}
.pz-sw .sa{color:#B3402F}
.pz-sw .sb{color:var(--olive);opacity:0;transform:translateY(8px)}
.is-on .pz-sw .sa{opacity:0;transform:translateY(-8px)}
.is-on .pz-sw .sb{opacity:1;transform:none}

/* ── pills and tags ── */
.pz-pill{display:inline-flex;align-items:center;gap:.32rem;white-space:nowrap;
  font-family:var(--mono);font-size:.5625rem;letter-spacing:.02em;
  border-radius:var(--r-pill);padding:.2rem .48rem .2rem .3rem;border:1px solid}
.pz-pill svg{width:11px;height:11px;flex:none;display:block}
.pz-pill--ok{color:#2E7D32;background:#E6F3E4;border-color:#BFE0BC}
.pz-pill--no{color:#B3402F;background:#FBEAE6;border-color:#F0C8BF}
.pz-pill--warn{color:#B4711B;background:#FDF1E0;border-color:#F2D8AE}
.pz-flip{position:relative;display:grid}
.pz-flip > .pz-pill{grid-area:1/1;justify-self:end;
  transition:opacity .4s ease,transform .5s cubic-bezier(.19,1,.22,1)}
.pz-flip .fb{opacity:0;transform:translateY(7px) scale(.94)}
.is-on .pz-flip .fa{opacity:0;transform:translateY(-7px) scale(.94)}
.is-on .pz-flip .fb{opacity:1;transform:none}
.pz-tag{font-family:var(--mono);font-size:.5rem;letter-spacing:.02em;
  border-radius:var(--r-pill);padding:.16rem .42rem;border:1px solid;white-space:nowrap}
.pz-tag--ok{color:#2E7D32;background:#E6F3E4;border-color:#BFE0BC}
.pz-tag--flip{position:relative;display:grid;color:#B3402F;
  background:#FBEAE6;border-color:#F0C8BF;transition:color .45s,background .45s,border-color .45s}
.pz-tag--flip > span{grid-area:1/1;text-align:center;transition:opacity .4s ease}
.pz-tag--flip .sb{opacity:0}
.is-on .pz-tag--flip{color:#2E7D32;background:#E6F3E4;border-color:#BFE0BC}
.is-on .pz-tag--flip .sa{opacity:0}
.is-on .pz-tag--flip .sb{opacity:1}

/* ── stacked layout: no connectors to draw, so the cards carry the story ── */
@media (max-width:899px){
  .pz-wires,.pz-nodes{display:none}      /* no room to route wires; nodes would be orphan specks */
  .pz-art{height:320px;margin-bottom:1.2rem}
  .pz-stage{display:grid;grid-template-columns:1fr;gap:.7rem}
  /* shorter throw so both states stay inside the cropped viewBox */
  .pz-p--c{--lx:70px;--ly:-64px}
  .pz-p--d{--lx:52px;--ly:72px}
}
@media (min-width:560px) and (max-width:899px){
  .pz-stage{grid-template-columns:1fr 1fr}
  .pz-art{grid-column:1/-1;height:380px}
}
@media (prefers-reduced-motion:reduce){
  .pz-p,.pz-solid,.pz-ghost,.pz-w,.pz-node,.pz-flip > .pz-pill,.pz-sw > span{transition:none}
  .pz-pulse,.is-lock .pz-grid{animation:none}
}

/* ═══════════════ THE COST OF THE CABINET · glass ═══════════════
   Scroll scrubbed, two progress vars set on .gl-pin from JS:
     --pc  0 to 1  cracks propagate outward from the impact
     --pf  0 to 1  shards let go and travel, impact pane first
   Everything below is a pure function of those two numbers, so the
   whole sequence scrubs forward and backward with the scrollbar.
   =============================================================== */
#glass{position:relative;z-index:1;height:306vh;background:#0C1512}
.gl-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.gl-stage{position:absolute;inset:0;
  perspective:1500px;perspective-origin:50% 46%;
  background:radial-gradient(122% 104% at 30% 38%,#22322C 0%,#16211C 54%,#0C1512 100%)}

/* ── the content, sitting behind the glass ── */
.gl-under{position:absolute;inset:0;z-index:0;display:grid;align-content:center}
.gl-eb{color:rgba(242,246,238,.5);margin-bottom:1.15rem}
.gl-eb::before{color:var(--lime)}
.gl-h{font-size:clamp(1.85rem,4.4vw,3.9rem);line-height:1.06;letter-spacing:-.038em;
  font-weight:400;color:#F2F6EE;max-width:26ch;text-wrap:balance}
.gl-h em{font-style:normal;color:var(--lime);display:block}
/* the supporting copy only earns its place once the barrier is gone */
.gl-lede{margin-top:1.5rem;max-width:46ch;font-size:.9375rem;line-height:1.7;
  color:rgba(242,246,238,.74);
  opacity:clamp(0,calc((var(--pf,0) - .52) / .26),1);
  transform:translateY(calc((1 - clamp(0,calc((var(--pf,0) - .52) / .26),1)) * 14px))}
.gl-stats{display:grid;grid-template-columns:1fr;gap:1.1rem;margin-top:2.2rem;max-width:56rem}
@media (min-width:760px){.gl-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:2.2rem}}
.gl-stat{--o:clamp(0,calc((var(--pf,0) - .62 - var(--s) * .05) / .24),1);
  opacity:var(--o);transform:translateY(calc((1 - var(--o)) * 18px));
  border-top:1px solid rgba(242,246,238,.16);padding-top:.75rem}
.gl-stat b{display:block;font-size:clamp(1.3rem,2.4vw,1.9rem);font-weight:400;
  letter-spacing:-.03em;color:var(--lime);margin-bottom:.3rem}
.gl-stat span{display:block;font-size:.75rem;line-height:1.55;color:rgba(242,246,238,.66)}

/* ── the pane: always 16/9 and always covering, so shard geometry never distorts ── */
.gl-pane{position:absolute;top:50%;left:50%;z-index:2;
  width:calc(max(100vw, 100svh * 16 / 9));
  height:calc(max(100svh, 100vw * 9 / 16));
  transform:translate(-50%,-50%);transform-style:preserve-3d}
.gsh{position:absolute;inset:0;clip-path:var(--c);
  /* clear glass barely blurs, it DISPLACES. The url() pass is the real refraction;
     the plain declaration above it stands where filter references are unsupported. */
  -webkit-backdrop-filter:blur(2px) brightness(.9) saturate(1.2);
  backdrop-filter:blur(2px) brightness(.9) saturate(1.2);
  backdrop-filter:url(#glassR) blur(1.6px) brightness(.9) saturate(1.2);
  background:
    linear-gradient(var(--ang), rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 26%,
      rgba(255,255,255,0) 68%, rgba(255,255,255,.07) 100%),
    linear-gradient(calc(var(--ang) + 62deg), rgba(180,225,196,.05), rgba(255,255,255,0) 46%);
  /* each shard runs its own clock: the impact pane has no lag, the rim has most */
  --pi:clamp(0,calc((var(--pf,0) - var(--lag)) / (1 - var(--lag))),1);
  transform:
    translate3d(calc(var(--fx) * var(--pi)),calc(var(--fy) * var(--pi)),calc(var(--fz) * var(--pi)))
    rotate3d(var(--rax),var(--ray),.35,calc(var(--rr) * var(--pi)));
  opacity:calc(1 - var(--pi) * var(--pi) * .94);
  will-change:transform,opacity}
/* the shard's own clip keeps only the inner half of this stroke, so it reads as a
   rim light on the edge and travels with the piece once the cracks have faded */
/* three stacked strokes, inner-half clipped: pane thickness, the green a real
   float-glass edge carries, then a hard specular core */
.ge{position:absolute;inset:0;width:100%;height:100%;
  opacity:calc(.82 * clamp(0,calc((var(--pc,0) - var(--rim)) / .3),1))}
.ge path{fill:none;vector-effect:non-scaling-stroke}
.ge .b1{stroke:rgba(150,214,176,.30);stroke-width:9}
.ge .b2{stroke:rgba(214,240,220,.42);stroke-width:3.4}
.ge .b3{stroke:rgba(255,255,255,.92);stroke-width:1.1}
/* shards cast onto the content once they lift off it */
.gl-shadows{position:absolute;inset:0;z-index:1;transform-style:preserve-3d;
  filter:blur(16px);opacity:clamp(0,calc(var(--pf,0) * 2.1),.85);pointer-events:none}
.gsd{position:absolute;inset:0;clip-path:var(--c);background:rgba(2,9,6,.62);
  --pi:clamp(0,calc((var(--pf,0) - var(--lag)) / (1 - var(--lag))),1);
  transform:translate3d(calc(var(--fx) * var(--pi) * .82 + 14px),
                        calc(var(--fy) * var(--pi) * .82 + 20px),0);
  will-change:transform}
/* drawn cracks own the propagation, then hand off to the rim lights */
.gl-crk{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  opacity:clamp(0,calc(1 - var(--pf,0) * 3.4),1)}
.gl-crk line{stroke:rgba(236,250,238,.8);stroke-width:1;fill:none;
  stroke-dasharray:100;
  stroke-dashoffset:calc(100 - 100 * clamp(0,calc((var(--pc,0) - var(--d) * .55) / .45),1));
  filter:drop-shadow(0 0 1.4px rgba(190,235,205,.55))}
/* one unbroken sheet: a specular sweep and a rim, so the pane reads as glass
   before a single crack exists. It clears as the shards start to travel. */
.gl-sheen{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(104deg, rgba(255,255,255,0) 34%, rgba(255,255,255,.05) 45%,
      rgba(255,255,255,.10) 50%, rgba(255,255,255,.03) 56%, rgba(255,255,255,0) 66%),
    radial-gradient(64% 46% at 80% 8%, rgba(226,246,232,.13), transparent 62%),
    radial-gradient(70% 52% at 10% 98%, rgba(164,214,20,.05), transparent 64%);
  box-shadow:inset 0 0 0 1px rgba(226,246,232,.17);
  opacity:clamp(0,calc(1 - var(--pf,0) * 2.8),1)}
.gl-defs{position:absolute;width:0;height:0;overflow:hidden}

@media (max-width:759px){
  #glass{height:270vh}
  .gsh{-webkit-backdrop-filter:blur(4px) brightness(.86) saturate(1.1);
    backdrop-filter:blur(4px) brightness(.86) saturate(1.1)}
  .gl-stat{padding-top:.6rem}
}
@media (prefers-reduced-motion:reduce){
  #glass{height:auto}
  .gl-pin{position:static;height:auto;padding-block:clamp(4rem,10vw,8rem)}
  .gl-stage{position:relative;inset:auto}
  .gl-under{position:relative;inset:auto}
  .gl-pane,.gl-shadows{display:none}
  .gl-lede,.gl-stat{opacity:1;transform:none}
}
.gl-lite .gsh{backdrop-filter:none;-webkit-backdrop-filter:none}
.gl-lite .gl-shadows{filter:none;opacity:0}

/* ═══════════════ WHO IS THIS FOR · visibility ═══════════════ */
#vwho .wrap{position:relative}
/* the column rules run the full section, behind the heading too */
/* inset by the wrap padding so the rules land on the grid's column edges */
.qrules{position:absolute;top:0;bottom:0;left:var(--gut);right:var(--gut);
  pointer-events:none;z-index:0;
  background:repeating-linear-gradient(to right,var(--line) 0 1px,transparent 1px 25%);
  border-right:1px solid var(--line);display:none}
@media (min-width:900px){.qrules{display:block}}
#vwho .sec-head,.qgrid{position:relative;z-index:1}
.qgrid{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:640px){.qgrid{grid-template-columns:1fr 1fr;gap:0}}
@media (min-width:900px){.qgrid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:640px){.qcol{padding:clamp(1rem,2vw,1.6rem)}}
.qcard{height:100%;border:1px solid var(--line);border-radius:10px;background:var(--surface);
  padding:clamp(1.1rem,2vw,1.5rem);display:grid;align-content:start;gap:.55rem;
  transition:transform .35s cubic-bezier(.19,1,.22,1),box-shadow .35s ease,border-color .3s}
.qcard:hover{transform:translateY(-4px);border-color:var(--g-300);
  box-shadow:0 16px 38px rgba(30,43,39,.08)}
.qi{width:clamp(46px,4.4vw,62px);height:clamp(46px,4.4vw,62px);color:#B7D49A;
  margin-bottom:clamp(1.5rem,3vw,2.6rem);transition:color .3s}
.qcard:hover .qi{color:var(--olive)}
.qcard h3{font-size:.9375rem;font-weight:500;letter-spacing:-.015em;color:var(--ink)}
.qcard p{font-size:.8125rem;line-height:1.6;color:var(--ink-2)}

/* ═══════════════ ASK SEAL · assistant ═══════════════ */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.chat{max-width:56rem;margin-inline:auto;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  box-shadow:0 20px 60px rgba(30,43,39,.07)}
.chat-top{display:flex;align-items:center;gap:.6rem;padding:.85rem 1.1rem;
  border-bottom:1px solid var(--line);background:var(--panel)}
.chat-av{width:22px;height:22px;color:var(--g-700);flex:none}
.chat-av svg{width:100%;height:100%;display:block}
.chat-name{font-size:.875rem;font-weight:500;letter-spacing:-.015em;color:var(--ink)}
.chat-live{margin-inline-start:auto;display:inline-flex;align-items:center;gap:.38rem;
  font-family:var(--mono);font-size:.5625rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3)}
.chat-live i{width:6px;height:6px;border-radius:50%;background:var(--green,#00b982);
  box-shadow:0 0 0 3px rgba(0,185,130,.14);animation:chatPulse 2.4s ease-in-out infinite}
@keyframes chatPulse{0%,100%{opacity:1}50%{opacity:.45}}

.chat-thread{min-height:16rem;max-height:26rem;overflow-y:auto;overscroll-behavior:contain;
  padding:1.3rem 1.1rem;display:flex;flex-direction:column;gap:1.15rem;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.chat-thread::-webkit-scrollbar{width:8px}
.chat-thread::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.chat .msg{display:flex;gap:.7rem;max-width:100%;
  animation:msgIn .42s cubic-bezier(.19,1,.22,1) both}
@keyframes msgIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.chat .msg-av{width:24px;height:24px;flex:none;border-radius:7px;display:grid;place-items:center;
  background:var(--panel);color:var(--g-700);border:1px solid var(--line)}
.chat .msg-av svg{width:13px;height:13px;display:block}
.chat .msg-b{font-size:.875rem;line-height:1.72;color:var(--ink-2);padding-top:.1rem;min-width:0}
.chat .msg-b a{color:var(--olive);border-bottom:1px solid rgba(63,107,30,.35)}
/* the visitor's turn is the only bubble, so the thread reads as a transcript */
.chat .msg--me{justify-content:flex-end}
.chat .msg--me .msg-b{background:var(--g-900);color:#F2F6EE;border-radius:12px 12px 3px 12px;
  padding:.6rem .85rem;max-width:min(30rem,82%)}
.chat .msg-cite{display:block;margin-top:.5rem;font-family:var(--mono);font-size:.5625rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.chat .dots{display:inline-flex;gap:4px;align-items:center;height:1.2em}
.chat .dots i{width:5px;height:5px;border-radius:50%;background:var(--g-300);
  animation:dot 1.25s ease-in-out infinite}
.chat .dots i:nth-child(2){animation-delay:.16s}
.chat .dots i:nth-child(3){animation-delay:.32s}
@keyframes dot{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.chat .cursr{display:inline-block;width:.5em;height:1em;vertical-align:-.14em;
  background:var(--olive);margin-inline-start:2px;animation:chatPulse .9s steps(1,end) infinite}

.chat-chips{display:flex;flex-wrap:wrap;gap:.45rem;padding:0 1.1rem 1rem}
.chat-chips:empty{display:none}
.chat-chips button{font-size:.75rem;color:var(--ink-2);background:var(--surface);
  border:1px solid var(--line);border-radius:8px;padding:.42rem .7rem;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s,transform .2s;
  animation:msgIn .4s cubic-bezier(.19,1,.22,1) both;animation-delay:calc(var(--i,0) * .05s)}
.chat-chips button:hover{border-color:var(--g-300);color:var(--ink);
  background:var(--panel);transform:translateY(-1px)}

/* one slim pill: the field and the send button share a single border */
.chat-bar{display:flex;gap:.35rem;align-items:center;margin:0 1.1rem 1.1rem;
  padding:.22rem .22rem .22rem .85rem;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-pill);
  transition:border-color .2s,box-shadow .2s}
.chat-bar:focus-within{border-color:var(--g-500);box-shadow:0 0 0 3px rgba(71,100,94,.10)}
.chat-bar input{flex:1;min-width:0;font-family:var(--font);font-size:.8125rem;color:var(--ink);
  background:transparent;border:0;padding:.42rem 0}
.chat-bar input::placeholder{color:var(--ink-3)}
.chat-bar input:focus{outline:none}
.chat-send{flex:none;width:29px;height:29px;border-radius:50%;display:grid;place-items:center;
  background:var(--g-900);color:#fff;cursor:pointer;border:0;
  transition:background .2s,transform .2s,opacity .2s}
.chat-send svg{width:14px;height:14px}
.chat-send:hover{background:var(--olive)}
.chat-send:disabled{opacity:.4;cursor:default;background:var(--g-900)}
@media (prefers-reduced-motion:reduce){
  .chat .msg,.chat-chips button{animation:none}
  .chat .dots i,.chat-live i,.chat .cursr{animation:none}
}

/* ═══════════════ CONTROL · workflow builder ═══════════════
   A native recreation of the product canvas, driven by data-st="0..4" on .wf.
   JS toggles .on for [data-at] <= stage and shows [data-only] lists.
   =========================================================== */
#chero h1{font-size:clamp(2.1rem,5.4vw,4.1rem);letter-spacing:-.038em;line-height:1.03;
  max-width:22ch}
#chero .lede{max-width:56ch;margin-top:1.4rem}
/* the seam between the last beat and the first is dissolved, not cut */
.wf.no-anim *,.wf.no-anim *::before,.wf.no-anim *::after{
  transition:none !important;animation:none !important}
.wf{--wt:#A78BC8;--wq:#3B7FC4;--wl:#B08A2E;--wa:#3E9B45;
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  background:var(--surface);box-shadow:0 24px 70px rgba(30,43,39,.10)}
.wf-top{display:flex;align-items:center;gap:1rem;padding:.7rem 1rem;
  border-bottom:1px solid var(--line);background:var(--panel)}
.wf-tabs{display:flex;gap:1.1rem}
.wf-tabs i{font-style:normal;font-size:.75rem;color:var(--ink-3);position:relative;padding-bottom:.3rem}
.wf-tabs i.on{color:var(--ink)}
.wf-tabs i.on::after{content:"";position:absolute;left:0;right:0;bottom:-.72rem;height:2px;background:var(--olive)}
.wf-name{margin-inline-start:auto;font-size:.75rem;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wf-state{font-family:var(--mono);font-size:.5625rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-pill);padding:.14rem .45rem;
  transition:color .4s,border-color .4s,background .4s}
.wf[data-st="4"] .wf-state{color:#2E7D32;background:#E6F3E4;border-color:#BFE0BC}

.wf-body{display:grid;grid-template-columns:1fr}
@media (min-width:900px){.wf-body{grid-template-columns:minmax(0,208px) minmax(0,1fr)}}
.wf-rail{padding:1rem;border-bottom:1px solid var(--line);background:var(--bg);min-height:0}
@media (min-width:900px){.wf-rail{border-bottom:0;border-right:1px solid var(--line)}}
.wf-rk,.wf-fk{font-family:var(--mono);font-size:.5625rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.6rem}
.wf-fk{margin-top:.9rem}
.wf-pick{border:1px dashed var(--line);border-radius:9px;padding:1.1rem .9rem;text-align:center}
.wf-pick b{display:block;font-size:.875rem;font-weight:500;margin-bottom:.3rem;color:var(--ink)}
.wf-pick span,.wf-sel span{font-size:.75rem;line-height:1.55;color:var(--ink-3)}
.wf-sel b{display:block;font-size:.9375rem;font-weight:500;color:var(--ink);margin-bottom:.2rem}
.wf-fake{border:1px solid var(--line);border-radius:8px;background:var(--surface);
  padding:.5rem .6rem;font-size:.75rem;color:var(--ink-2)}
/* :not(.on) outranks each element's own display rule, so they keep their
   natural display (grid/block) when shown and vanish cleanly when not */
[data-only]:not(.on){display:none}

/* ── the canvas ── */
.wf-canvas{position:relative;aspect-ratio:1000/560;min-height:270px;overflow:hidden;
  background-color:#16241A;
  background-image:radial-gradient(rgba(226,244,228,.10) 1px,transparent 1px);
  background-size:19px 19px}
.wf-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ww{fill:none;stroke:rgba(214,238,216,.5);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .45s ease var(--d,0s)}
.ww.on{stroke-dashoffset:0}
.wflow{fill:none;stroke:var(--lime);stroke-width:2.2;stroke-linecap:round;
  stroke-dasharray:6 94;stroke-dashoffset:100;opacity:0}
.wflow.on{opacity:.9;animation:wfFlow 2.6s linear infinite}
@keyframes wfFlow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}

/* ── a step on the canvas ── */
.wn{position:absolute;left:var(--l);top:var(--t);width:19.5%;min-height:5.1rem;
  background:var(--surface);border-radius:8px;padding:.55rem .6rem .45rem;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  display:grid;gap:.14rem;
  opacity:0;transform:translateY(12px) scale(.95);
  transition:opacity .38s ease var(--d,0s),transform .52s cubic-bezier(.22,1,.3,1) var(--d,0s)}
.wn.on{opacity:1;transform:none}
.wn::before{content:"";position:absolute;left:0;top:.4rem;bottom:.4rem;width:3px;
  border-radius:3px;background:var(--kc)}
.wn--trigger{--kc:var(--wt)} .wn--query{--kc:var(--wq)}
.wn--logic{--kc:var(--wl)}   .wn--action{--kc:var(--wa)}
.wn b{font-size:.6875rem;font-weight:500;letter-spacing:-.01em;color:var(--ink);line-height:1.25}
.wn-s{font-size:.5625rem;line-height:1.4;color:var(--ink-3)}
.wn-f{display:flex;align-items:center;gap:.28rem;margin-top:.25rem;
  font-family:var(--mono);font-size:.5rem;color:var(--ink-3);letter-spacing:.02em}
.wn-k{width:6px;height:6px;border-radius:1px;background:var(--kc);flex:none}
.wn-f em{margin-inline-start:auto;font-style:italic;font-size:.4375rem;opacity:.75}
.wp{position:absolute;top:50%;width:6px;height:6px;border-radius:50%;
  background:#0F1A12;border:1px solid rgba(226,244,228,.55);translate:0 -50%}
.wp--i{left:-3px} .wp--o{right:-3px}
@media (max-width:620px){
  .wn b{font-size:.5625rem}.wn-s{display:none}.wn-f{font-size:.4375rem}
}

/* ── empty state and the two modals ── */
.wf-empty{position:absolute;inset:8% 7%;border:1px dashed rgba(226,244,228,.28);border-radius:10px;
  display:grid;place-content:center;justify-items:center;gap:.45rem;text-align:center;padding:1rem}
.wf-empty b{font-size:.9375rem;font-weight:500;color:#F2F6EE}
.wf-empty span{font-size:.75rem;color:rgba(242,246,238,.6);max-width:34ch;line-height:1.55}
.wf-cta{margin-top:.7rem;background:var(--olive);color:#fff !important;font-size:.75rem;
  border-radius:8px;padding:.5rem .9rem}
.wf-modal{position:absolute;inset:0;display:grid;place-items:center;padding:5%;
  background:rgba(10,18,12,.45);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.wf-m{width:min(100%,26rem);background:var(--surface);border-radius:12px;
  padding:clamp(.9rem,2vw,1.25rem);box-shadow:0 30px 70px rgba(0,0,0,.4);
  animation:wfPop .4s cubic-bezier(.19,1,.22,1) both}
@keyframes wfPop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.wf-m > b{display:block;font-size:.9375rem;font-weight:500;color:var(--ink);margin-bottom:.4rem}
.wf-m > p{font-size:.75rem;line-height:1.55;color:var(--ink-2);margin-bottom:.8rem}
.wf-mk{font-family:var(--mono);font-size:.5625rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:.5rem}
.wo{display:flex;gap:.6rem;align-items:flex-start;border:1px solid var(--line);border-radius:9px;
  padding:.55rem .65rem;margin-bottom:.45rem;transition:border-color .3s,box-shadow .3s}
.wo.is-pick{border-color:var(--olive);box-shadow:0 0 0 3px rgba(63,107,30,.12)}
.wo-i{width:18px;height:18px;color:var(--g-500);flex:none;margin-top:.1rem}
.wo-i svg{width:100%;height:100%;display:block}
.wo b{display:block;font-size:.75rem;font-weight:500;color:var(--ink)}
.wo em{display:block;font-style:normal;font-size:.625rem;line-height:1.45;color:var(--ink-3);margin-top:.1rem}
.wf-ask{display:flex;align-items:center;gap:.5rem;background:var(--g-700);border-radius:9px;
  padding:.62rem .7rem;margin-bottom:.7rem;min-height:2.6rem}
.wf-typed{font-size:.75rem;color:#F2F6EE;line-height:1.4}
/* the caret was a flex sibling of the text, so once the sentence wrapped it
   parked to the right of the whole block. As a pseudo-element on the text it
   sits after the last character, wherever that lands. */
.wf-car{display:none}
.wf[data-st="2"] .wf-typed::after{content:"";display:inline-block;
  width:1.6px;height:.95rem;background:var(--lime);
  vertical-align:-.16em;margin-inline-start:2px;
  animation:wfCar 1s steps(1,end) infinite}
.wf-typed{min-width:0}
@keyframes wfCar{0%,100%{opacity:1}50%{opacity:0}}
.wf-go{margin-inline-start:auto;flex:none;background:#C9DDA6;color:#20301A;font-size:.6875rem;
  border-radius:7px;padding:.4rem .65rem;animation:wfGo 1.6s ease-in-out infinite}
@keyframes wfGo{0%,100%{box-shadow:0 0 0 0 rgba(164,214,20,0)}50%{box-shadow:0 0 0 5px rgba(164,214,20,.22)}}
.wf-qs{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.wq{background:var(--panel);border-radius:7px;padding:.45rem .55rem;
  font-size:.625rem;line-height:1.4;color:var(--ink-2)}
@media (max-width:620px){.wf-qs{grid-template-columns:1fr}.wq:nth-child(n+3){display:none}}

.wf-foot{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;
  padding:.5rem .7rem;pointer-events:none}
.wf-zoom{font-family:var(--mono);font-size:.5rem;color:rgba(242,246,238,.45)}
.wf-leg{margin-inline-start:auto;display:flex;gap:.6rem}
.wl{display:inline-flex;align-items:center;gap:.24rem;font-family:var(--mono);
  font-size:.4375rem;letter-spacing:.06em;color:rgba(242,246,238,.55)}
.wl::before{content:"";width:5px;height:5px;border-radius:1px}
.wl--trigger::before{background:var(--wt)} .wl--query::before{background:var(--wq)}
.wl--logic::before{background:var(--wl)}   .wl--action::before{background:var(--wa)}
@media (max-width:620px){.wl--logic,.wl--action{display:none}}

/* ── caption and stage dots ── */
.wf-bar{display:flex;align-items:center;gap:1rem;padding:.7rem 1rem;
  border-top:1px solid var(--line);background:var(--panel)}
.wf-cap{font-size:.75rem;color:var(--ink-2);line-height:1.5}
.wf-dots{margin-inline-start:auto;display:flex;gap:.35rem;flex:none}
.wd{width:26px;height:4px;border-radius:2px;background:var(--line);border:0;cursor:pointer;
  padding:0;transition:background .3s}
.wd:hover{background:var(--g-300)}
.wd.on{background:var(--olive)}

/* ── the four capabilities ── */
.cgrid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
@media (min-width:700px){.cgrid{grid-template-columns:1fr 1fr}}
.ccap{background:var(--surface);padding:clamp(1.3rem,2.6vw,2rem);
  display:grid;align-content:start;gap:.5rem;transition:background .3s}
.ccap:hover{background:var(--panel)}
.ccap-n{font-family:var(--mono);font-size:.625rem;letter-spacing:.08em;color:var(--g-300)}
.ccap h3{font-size:1.0625rem;letter-spacing:-.022em}
.ccap p{font-size:.8125rem;line-height:1.7;color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){
  .wn,.ww{transition:none}.wflow.on,.wf-go,.wf-car{animation:none}
}

/* ═══════════════ THE ICEBERG · what never surfaces ═══════════════ */
.berg{margin-bottom:clamp(2rem,4vw,3.5rem)}
.berg-stage{position:relative;width:100%;aspect-ratio:1400/780;max-width:66rem;margin-inline:auto}
.berg-svg{position:absolute;inset:0;width:100%;height:100%}
/* the waterline stays a hairline; the mass is what carries the weight */
.bg-line{stroke:#C6D3C9;stroke-width:1;fill:none}
/* stepped circuit traces across the full field, barely there */
.bg-traces,.bg-haze{pointer-events:none}
.bg-tr{fill:none;stroke:#EDF1EE;stroke-width:.9;stroke-linejoin:round;
  opacity:0;transition:opacity .8s ease calc(.15s + var(--i) * .045s)}
.berg.in .bg-tr{opacity:.72}

.bg-mass polygon{opacity:0;transform:translateY(20px);stroke-width:.7;
  transition:opacity .7s ease,transform .95s cubic-bezier(.19,1,.22,1)}
.bg-mass--a polygon{stroke:rgba(255,255,255,.55)}
.bg-mass--b polygon{stroke:rgba(255,255,255,.20)}
.bg-mass--a polygon{transition-delay:calc(.35s + var(--i) * .08s)}
.bg-mass--b polygon{transition-delay:calc(.75s + var(--i) * .07s)}
.berg.in .bg-mass--a polygon{opacity:1;transform:none}
/* translucent, but it must sit clearly darker than the page behind it */
.berg.in .bg-mass--b polygon{opacity:.95;transform:none}
.bg-mass{transform-box:fill-box;transform-origin:center}
.berg.in .bg-mass--a{animation:bgBob 8s ease-in-out infinite}
.berg.in .bg-mass--b{animation:bgBob 8s ease-in-out infinite}
@keyframes bgBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

.bg-rail,.bg-tick{fill:none;stroke:#93A89A;stroke-width:1.15;stroke-dasharray:2 3;
  stroke-linecap:round;opacity:0;transition:opacity .5s ease}
.berg.in .bg-rail{opacity:1;transition-delay:1.15s}
.berg.in .bg-tick{opacity:1;transition-delay:1.3s}
.bg-node{fill:var(--g-700);opacity:0;transition:opacity .4s ease 1.25s}
.berg.in .bg-node{opacity:1}

.bgl{position:absolute;left:var(--x);top:var(--y);translate:0 -50%;
  font-family:var(--mono);font-size:clamp(.5rem,.86vw,.6875rem);letter-spacing:-.01em;
  white-space:nowrap;padding:.22rem .5rem;border-radius:3px;
  background:linear-gradient(90deg,rgba(230,240,228,.85),rgba(243,247,241,.5));
  color:var(--g-900);border-left:2px solid #96B87C;
  opacity:0;transition:opacity .55s ease,translate .75s cubic-bezier(.19,1,.22,1)}
.bgl--t{translate:12px -50%;transition-delay:calc(1.35s + var(--i) * .09s)}
.bgl--b{translate:-12px -50%;transform:translateX(-100%);
  border-left:0;border-right:2px solid #93AC9C;
  background:linear-gradient(270deg,rgba(226,236,228,.85),rgba(243,247,241,.5));
  transition-delay:calc(1.62s + var(--i) * .09s)}
.berg.in .bgl{opacity:1;translate:0 -50%}
.berg-key{display:flex;gap:1.4rem;flex-wrap:wrap;justify-content:center;margin-top:.4rem}
.bgk{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);
  font-size:.625rem;color:var(--ink-3)}
.bgk i{width:9px;height:9px;border-radius:2px}
.bgk--a{background:#CFE1C4} .bgk--b{background:#A2BCAC}
@media (max-width:760px){
  .bg-wires,.bgl{display:none}
}
@media (prefers-reduced-motion:reduce){
  .bg-mass polygon,.bgl,.bg-tr{transition:none}
  .berg.in .bg-mass--a,.berg.in .bg-mass--b{animation:none}
}

/* ═══════════════ CONTROL · the solution cards ═══════════════ */
.solgrid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media (min-width:720px){.solgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){
  .solgrid{grid-template-columns:repeat(6,1fr)}
  .sol{grid-column:span 2}
  .sol--w{grid-column:span 3}
}
.sol{background:var(--bg);padding:clamp(1.2rem,2.4vw,1.9rem);display:grid;
  align-content:start;gap:.55rem}
.sol h3{font-size:1.0625rem;letter-spacing:-.022em;margin-top:.35rem}
.sol p{font-size:.8125rem;line-height:1.7;color:var(--ink-2)}
.sol-vis{position:relative;margin-bottom:.9rem;min-height:190px;display:grid;
  align-items:center;justify-items:stretch;
  border-radius:10px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,#F2F6F0 0%,var(--bg) 70%)}
.sol--w .sol-vis{min-height:236px;place-items:center}
.sol--w .mv{width:100%;margin:1rem}

/* ── the miniature product surfaces ── */
.mv{background:var(--surface);border:1px solid var(--line);border-radius:9px;
  margin:.85rem;padding:.6rem .7rem;box-shadow:0 6px 20px rgba(30,43,39,.07);
  transition:transform .45s cubic-bezier(.19,1,.22,1)}
.sol:hover .mv{transform:translateY(-3px)}
.mv-h{display:flex;align-items:baseline;gap:.4rem;font-size:.6875rem;font-weight:500;
  color:var(--ink);margin-bottom:.5rem}
.mv-h em{font-style:normal;font-size:.5625rem;color:var(--ink-3);margin-inline-start:auto}
.mv-r{display:flex;align-items:center;gap:.4rem;font-size:.5625rem;color:var(--ink-2);margin-top:.45rem}
.mv-t{min-width:4.4rem}
.mv-r b{margin-inline-start:auto;font-weight:500;color:var(--ink);font-size:.5625rem}
.mv-p{font-family:var(--mono);font-size:.4375rem;letter-spacing:.04em;border-radius:var(--r-pill);
  padding:.08rem .34rem;border:1px solid}
.mv-p--ok{color:#2E7D32;background:#E9F4E7;border-color:#C4E0C0}
.mv-p--warn{color:#B4711B;background:#FDF2E2;border-color:#F0D9B0}
.mv-bar{display:block;height:3px;border-radius:3px;background:var(--line-soft);margin-top:.22rem;overflow:hidden}
.mv-bar s{display:block;height:100%;width:0;border-radius:3px;text-decoration:none;
  transition:width 1.1s cubic-bezier(.19,1,.22,1) calc(.2s + var(--c,0) * .1s)}
.lift.in .mv-bar s{width:var(--w)}
.mv-bar--ok{background:var(--olive)} .mv-bar--warn{background:#D69A2C}
.mv-f{display:flex;align-items:center;margin-top:.7rem;padding-top:.5rem;
  border-top:1px solid var(--line-soft);font-size:.5625rem;color:var(--ink-3)}
.mv-f b{margin-inline-start:auto;color:var(--ink);font-weight:500}
/* roles */
.mv-roles{display:grid;grid-template-columns:5.4rem 1fr;gap:.6rem}
.sr-list{display:grid;gap:.1rem;border-right:1px solid var(--line-soft);padding-right:.5rem}
.sr{font-size:.5rem;color:var(--ink-3);padding:.2rem .3rem;border-radius:4px}
.sr.on{background:#E9F2E4;color:var(--g-900);font-weight:500}
.sr-body b{display:block;font-size:.625rem;color:var(--ink)}
.sr-body > span{display:block;font-size:.5rem;line-height:1.45;color:var(--ink-3);margin:.15rem 0 .4rem}
.mv-m{display:flex;align-items:center;gap:.35rem;margin-top:.3rem}
.mv-m i{font-style:normal;font-size:.4375rem;color:var(--ink-3);min-width:3.2rem}
.mv-m u{flex:1;height:3px;border-radius:3px;background:var(--line-soft);text-decoration:none;overflow:hidden}
.mv-m s{display:block;height:100%;width:0;background:var(--olive);text-decoration:none;
  transition:width 1s cubic-bezier(.19,1,.22,1) .35s}
.lift.in .mv-m s{width:var(--w)}
.mv-m em{font-style:normal;font-family:var(--mono);font-size:.4375rem;color:var(--ink-3)}
/* alerts */
.mv--alerts{display:grid;gap:.35rem}
.mv-al{display:flex;gap:.45rem;align-items:flex-start;border:1px solid var(--line);
  border-radius:7px;padding:.4rem .5rem;background:var(--surface)}
.mv-al i{width:14px;height:14px;border-radius:4px;flex:none;margin-top:.05rem}
.mv-al--bad i{background:#F4DDD6} .mv-al--warn i{background:#FBEBD2}
.mv-al b{display:block;font-size:.5625rem;font-weight:500}
.mv-al--bad b{color:#B3402F} .mv-al--warn b{color:#B4711B}
.mv-al em{display:block;font-style:normal;font-size:.5rem;line-height:1.4;color:var(--ink-3);margin-top:.08rem}
/* routing */
.mv--route svg{width:100%;height:auto;display:block}
.rt{fill:none;stroke:var(--line);stroke-width:1.2}
.rt--pick{stroke:var(--olive);stroke-width:1.5;opacity:0;
  stroke-dasharray:100;stroke-dashoffset:100;
  transition:stroke-dashoffset .7s ease .35s,opacity .3s ease .35s}
.lift.in .rt--pick{opacity:1;stroke-dashoffset:0}
/* a detached lime dash on the beam reads as a defect, so the chosen route is
   simply a solid olive line that draws itself in */
@keyframes rtFlow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.rn{fill:var(--surface);stroke:var(--line);stroke-width:1}
.rn--src{fill:var(--g-900);stroke:none}
.rn--pick{stroke:var(--olive);stroke-width:1.4}
.rx{fill:#F2F6EE;font-size:8px;text-anchor:middle;dominant-baseline:central;font-family:var(--font)}
.rt2{fill:var(--ink-2);font-size:8px;dominant-baseline:central;font-family:var(--font)}
.rt2--on{fill:var(--g-900);font-weight:500}
.rok{fill:var(--olive)} .rck{fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* audit */
.mv--audit{position:relative;background:transparent;border:0;box-shadow:none;padding:0;margin:0;
  width:100%;height:100%;min-height:236px;display:grid;place-items:center}
.au-g{position:absolute;left:0;right:0;bottom:0;width:100%;height:58%}
.au-a{fill:rgba(120,170,140,.16)} .au-l{fill:none;stroke:#8FB185;stroke-width:1.4}
.au-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:9px;
  padding:.6rem .7rem;min-width:min(15rem,72%);box-shadow:0 10px 26px rgba(30,43,39,.10)}
.au-r{display:flex;align-items:center;gap:.4rem;font-size:.5625rem;color:var(--ink-2);margin-top:.3rem}
.au-r b{margin-inline-start:auto;font-family:var(--mono);font-size:.5rem;color:var(--ink-3);font-weight:400}
.au-d{width:7px;height:7px;border-radius:2px;flex:none}
.au-d--a{background:var(--olive)} .au-d--b{background:#3B7FC4} .au-d--c{background:#2E7D32}


/* ── the solution cards come alive as they arrive ── */
.sol-vis > *{opacity:0;transform:translateY(14px) scale(.985);
  transition:opacity .55s ease,transform .75s cubic-bezier(.19,1,.22,1)}
.lift.in .sol-vis > *{opacity:1;transform:none;
  transition-delay:calc(.28s + var(--c,0) * .09s)}
/* each row inside a surface lands on its own beat */
.mv-al{opacity:0;transform:translateX(-10px);
  transition:opacity .5s ease,transform .6s cubic-bezier(.19,1,.22,1)}
.lift.in .mv-al{opacity:1;transform:none}
.lift.in .mv-al:nth-child(1){transition-delay:.55s}
.lift.in .mv-al:nth-child(2){transition-delay:.68s}
.lift.in .mv-al:nth-child(3){transition-delay:.81s}
.mv--alerts .mv-al{transition-property:opacity,transform,box-shadow}
.lift.in .mv-al--bad{box-shadow:0 0 0 0 rgba(179,64,47,0);animation:alPing 3.4s ease-out 1.2s}
@keyframes alPing{0%{box-shadow:0 0 0 0 rgba(179,64,47,.28)}40%,100%{box-shadow:0 0 0 7px rgba(179,64,47,0)}}
.au-r{opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .55s ease}
.lift.in .au-r{opacity:1;transform:none}
.lift.in .au-r:nth-of-type(1){transition-delay:.6s}
.lift.in .au-r:nth-of-type(2){transition-delay:.74s}
.lift.in .au-r:nth-of-type(3){transition-delay:.88s}
.au-l{stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset 1.6s ease .35s}
.lift.in .au-l{stroke-dashoffset:0}
.au-a{opacity:0;transition:opacity .9s ease .7s}
.lift.in .au-a{opacity:1}
.rn,.rx,.rt2,.rok,.rck{opacity:0;transition:opacity .5s ease}
.lift.in .rn,.lift.in .rx,.lift.in .rt2{opacity:1;transition-delay:.4s}
.lift.in .rn--src,.lift.in .rx{transition-delay:.3s}
.lift.in .rok,.lift.in .rck{opacity:1;transition-delay:1.15s}
.rn--pick{transition:opacity .5s ease,stroke-width .4s ease}
.lift.in .rn--pick{stroke-width:1.8}
.sr{opacity:0;transform:translateX(-6px);transition:opacity .4s ease,transform .5s ease}
.lift.in .sr{opacity:1;transform:none}
.lift.in .sr:nth-child(1){transition-delay:.45s} .lift.in .sr:nth-child(2){transition-delay:.55s}
.lift.in .sr:nth-child(3){transition-delay:.65s} .lift.in .sr:nth-child(4){transition-delay:.75s}
.mv-r{opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .55s ease}
.lift.in .mv-r{opacity:1;transform:none}
.lift.in .mv-r:nth-of-type(1){transition-delay:.5s}
.lift.in .mv-r:nth-of-type(2){transition-delay:.62s}
.lift.in .mv-r:nth-of-type(3){transition-delay:.74s}
@media (prefers-reduced-motion:reduce){
  .sol-vis > *,.mv-al,.au-r,.rn,.rx,.rt2,.rok,.rck,.sr,.mv-r,.au-l,.au-a{
    transition:none;opacity:1;transform:none;stroke-dashoffset:0}
  .lift.in .mv-al--bad{animation:none}
}

/* ═══════════ WORKFLOW BUILDER · the parse, the scan, the dry run ═══════════ */
/* the fragments Seal resolved, lit in the order the flow will run them */
.pk{font-style:normal;position:relative;border-radius:3px;padding:.06em .24em;
  color:#F2F6EE;background:transparent;transition:background .5s ease,color .5s ease}
.wf[data-st="3"] .pk--query {background:rgba(74,144,226,.30);transition-delay:.35s}
.wf[data-st="3"] .pk--logic {background:rgba(214,166,42,.30);transition-delay:.95s}
.wf[data-st="3"] .pk--action{background:rgba(120,170,60,.32);transition-delay:1.55s}

.wf-go--busy{display:inline-flex;align-items:center;gap:4px;padding:.5rem .95rem}
.wf-go--busy i{width:5px;height:5px;border-radius:50%;background:#E8EFDF;
  animation:wfdot 1.1s ease-in-out infinite}
.wf-go--busy i:nth-child(2){animation-delay:.15s}
.wf-go--busy i:nth-child(3){animation-delay:.3s}
@keyframes wfdot{0%,65%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* each resolved step announces itself before any of them reach the canvas */
.wf-parse{display:grid;gap:.4rem;margin-top:.9rem}
/* the modal is a light surface, so these read dark */
.pc{display:flex;align-items:center;gap:.55rem;padding:.5rem .65rem;border-radius:6px;
  background:var(--panel);border:1px solid var(--line);
  font-family:var(--mono);font-size:.5625rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);
  opacity:0;transform:translateX(-14px) scale(.97);
  transition:opacity .5s ease,transform .6s cubic-bezier(.19,1,.22,1)}
.wf[data-st="3"] .pc{opacity:1;transform:none;
  transition-delay:calc(.5s + var(--i) * .42s)}
.pc i{width:7px;height:7px;border-radius:2px;flex:none}
.pc--trigger i{background:#A78BFA} .pc--query i{background:#4A90E2}
.pc--logic i{background:#D6A62A}   .pc--action i{background:#78AA3C}
.pc em{font-style:normal;font-family:var(--font);font-size:.75rem;letter-spacing:-.01em;
  text-transform:none;color:var(--ink);margin-inline-start:auto;text-align:right}
.pc u{text-decoration:none;font-size:.5rem;opacity:.5;margin-inline-start:.5rem}

/* a pass of light across the canvas as the steps are placed */
.wf-scan{position:absolute;inset:0;pointer-events:none;z-index:4;opacity:0;
  background:linear-gradient(100deg,transparent 42%,rgba(164,214,20,.10) 50%,transparent 58%)}
.wf[data-st="4"] .wf-scan{opacity:1;animation:wfScan 1.5s cubic-bezier(.45,0,.2,1) .15s 2 forwards}
@keyframes wfScan{from{transform:translateX(-100%);opacity:1}
  85%{opacity:1}to{transform:translateX(110%);opacity:0}}

.wf-dry,.wf-live{position:absolute;z-index:6;opacity:0;pointer-events:none;
  transform:translateY(16px) scale(.97);
  transition:opacity .55s ease,transform .8s cubic-bezier(.19,1,.22,1)}
.wf[data-st="5"] .wf-dry,.wf[data-st="6"] .wf-live{opacity:1;transform:none;transition-delay:.3s}
.wf-dry{right:3.5%;bottom:8%;width:min(272px,34%);display:grid;gap:.3rem;
  padding:.9rem 1rem;border-radius:10px;
  background:rgba(12,21,17,.93);border:1px solid rgba(242,246,238,.13);
  box-shadow:0 18px 46px rgba(0,0,0,.45)}
.wfd-k{font-family:var(--mono);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(242,246,238,.42)}
.wfd-n{font-size:1.65rem;font-weight:400;letter-spacing:-.03em;color:#F2F6EE;line-height:1.05}
.wfd-s{font-family:var(--mono);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--lime);margin-bottom:.35rem}
.wfd-r{display:flex;justify-content:space-between;gap:1rem;font-size:.6875rem;
  color:rgba(242,246,238,.55);padding-top:.28rem;border-top:1px solid rgba(242,246,238,.07)}
.wfd-r em{font-style:normal;color:#F2F6EE}
.wfd-f{font-size:.5625rem;color:rgba(242,246,238,.34);margin-top:.4rem}

.wf-live{left:50%;top:87%;translate:-50% -50%;display:inline-flex;align-items:center;gap:.6rem;
  padding:.7rem 1.2rem;border-radius:var(--r-pill);
  background:rgba(164,214,20,.12);border:1px solid rgba(164,214,20,.4);
  font-size:.9375rem;letter-spacing:-.02em;color:#F2F6EE;white-space:nowrap}
.wf-live em{font-style:normal;font-family:var(--mono);font-size:.625rem;
  color:rgba(242,246,238,.55);letter-spacing:.04em}
.wfl-p{width:9px;height:9px;border-radius:50%;background:var(--lime);flex:none;
  box-shadow:0 0 0 0 rgba(164,214,20,.6);animation:wfLive 2s ease-out infinite}
@keyframes wfLive{0%{box-shadow:0 0 0 0 rgba(164,214,20,.55)}70%,100%{box-shadow:0 0 0 12px rgba(164,214,20,0)}}
/* the whole board acknowledges activation */
.wf[data-st="6"] .wf-canvas{animation:wfFlash 1.5s ease-out .1s}
@keyframes wfFlash{0%{box-shadow:inset 0 0 0 0 rgba(164,214,20,0)}
  22%{box-shadow:inset 0 0 90px 0 rgba(164,214,20,.16)}
  100%{box-shadow:inset 0 0 0 0 rgba(164,214,20,0)}}

/* steps arrive out of focus and resolve, rather than simply appearing */
.wn{filter:blur(10px);transform:translateY(24px) scale(.9)}
.wn.on{filter:blur(0);transform:none}
@media (max-width:760px){
  .wf-dry{left:4%;right:4%;width:auto;bottom:5%}
  .wf-live{font-size:.8125rem;padding:.55rem .9rem}
  .pc em{display:none}
}
@media (prefers-reduced-motion:reduce){
  .wf-scan,.wfl-p{animation:none}
  .wf[data-st="6"] .wf-canvas{animation:none}
  .wn{filter:none;transform:none}
  .pc{opacity:1;transform:none}
}


/* ═══════════ SEAL GUARDRAILS · the lane ═══════════
   Built to sit at the same weight as the radar on Seal Radar, but it is its own
   object: a lane in perspective with a rail down each side. Findings run the lane
   toward you, drift, and get put back on course. Shares the radar's label chips,
   dotted leads and status line so the two pages read as one family. */
.lane-wrap{position:relative;margin-top:clamp(1rem,3vw,2rem)}
.lane3d{position:relative;width:100%;max-width:1120px;margin:0 auto;
  height:clamp(330px,38vw,520px)}
.lane3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ═══════════ AGENTIC LAYER · the verticals, stacked ═══════════
   An exploded isometric: one plane per loss vertical, every one labelled, and
   they arrive one at a time from the bottom of the stack upward. Uses the same
   dotted lead + square node language as the iceberg. */
.iso{margin-top:clamp(.75rem,1.6vw,1.5rem)}
.iso-stage{position:relative;width:100%;aspect-ratio:1400/880;max-width:74rem;margin-inline:auto}
.iso-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.iso-stack{isolation:isolate}
.iso-wires{pointer-events:none}

.iso-l{opacity:0;transform:translateY(26px);
  transition:opacity .6s ease,transform .85s cubic-bezier(.19,1,.22,1)}
/* the deepest plane lands first, then each one settles on top of it */
.iso.in .iso-l{opacity:1;transform:none;
  transition-delay:calc((7 - var(--i)) * .13s)}
.iso-face{fill:#E4EDE0;fill-opacity:.55;stroke:none}
.iso-edge{fill:none;stroke:rgba(46,66,62,.46);stroke-width:1.2;stroke-linejoin:round}
/* the top plane is the summary surface, so it reads brightest */
.iso-l[style*="--i:0"] .iso-face{fill:url(#isoTop);fill-opacity:.95}
.iso-l[style*="--i:0"] .iso-edge{stroke:rgba(46,66,62,.5);stroke-width:1.3}
.iso-l[style*="--i:1"] .iso-face{fill-opacity:0.52}
.iso-l[style*="--i:2"] .iso-face{fill-opacity:0.47}
.iso-l[style*="--i:3"] .iso-face{fill-opacity:0.43}
.iso-l[style*="--i:4"] .iso-face{fill-opacity:0.39}
.iso-l[style*="--i:5"] .iso-face{fill-opacity:0.35}
.iso-l[style*="--i:6"] .iso-face{fill-opacity:0.32}
.iso-l[style*="--i:7"] .iso-face{fill-opacity:0.29}
/* a signal runs down the stack, plane to plane, and keeps running */
.iso.in .iso-l .iso-edge{animation:isoRun 5.2s ease-in-out infinite;
  animation-delay:calc(1.4s + (7 - var(--i)) * .16s)}
@keyframes isoRun{
  0%,72%,100%{stroke:rgba(46,66,62,.34)}
  78%{stroke:rgba(126,178,40,.85)}
  86%{stroke:rgba(46,66,62,.34)}}

.iso-lead{fill:none;stroke:#A3B6AA;stroke-width:1.1;stroke-dasharray:2 3;stroke-linecap:round;
  opacity:0;transition:opacity .5s ease}
.iso-node{fill:var(--g-700);opacity:0;transition:opacity .4s ease}
.iso.in .iso-lead,.iso.in .iso-node{opacity:1;
  transition-delay:calc(.9s + (7 - var(--i)) * .13s)}

.iso-lab{position:absolute;top:var(--y);left:var(--x);translate:0 -50%;
  width:max-content;max-width:15rem;
  opacity:0;transition:opacity .55s ease,translate .7s cubic-bezier(.19,1,.22,1)}
.iso-lab--l{translate:-100% -50%;text-align:right;padding-right:1.1rem}
.iso-lab--r{padding-left:1.1rem}
.iso.in .iso-lab{opacity:1;transition-delay:calc(1s + (7 - var(--i)) * .13s)}
.iso-lab b{display:block;font-family:var(--mono);font-size:.6875rem;font-weight:400;
  letter-spacing:.02em;color:var(--g-900);background:rgba(226,238,220,.75);
  border-radius:3px;padding:.2rem .45rem;margin-bottom:.22rem}
.iso-lab--l b{border-right:2px solid #7EB228}
.iso-lab--r b{border-left:2px solid #7EB228}
.iso-lab em{display:block;font-style:normal;font-size:.6875rem;line-height:1.45;
  color:var(--ink-3);padding-inline:.45rem}

/* the figure lies on the top plane, in its isometric frame, as the reference does */
.iso-total{opacity:0;transition:opacity .8s ease 1.9s}
.iso.in .iso-total{opacity:1}
.iso-total text{text-anchor:middle;dominant-baseline:middle}
.isot-k{font-family:var(--mono);font-size:12px;letter-spacing:1px;fill:rgba(46,66,62,.62)}
.isot-n{font-family:var(--font);font-size:56px;font-weight:400;letter-spacing:-2px;fill:var(--g-900)}
.isot-s{font-family:var(--mono);font-size:13px;fill:rgba(46,66,62,.62)}

.iso-key{display:flex;justify-content:center;margin-top:clamp(.5rem,1.5vw,1.2rem)}
.isok{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);
  font-size:.625rem;color:var(--ink-3)}
.isok i{width:7px;height:7px;border-radius:2px;background:var(--lime);flex:none}

@media (max-width:900px){
  .iso-stage{aspect-ratio:1400/1000}
  .iso-lab{max-width:8.5rem}
  .iso-lab em{display:none}
}
@media (prefers-reduced-motion:reduce){
  .iso-l,.iso-lab,.iso-lead,.iso-node,.iso-total{opacity:1;transform:none;translate:0 -50%;transition:none}
  .iso-lab--l{translate:-100% -50%}
  .iso.in .iso-l .iso-edge{animation:none}
}

/* the flanking labels have nowhere to go on a narrow screen, so below 900px the
   stack keeps the artwork and the verticals become a list underneath it */
.iso-list{display:none}
@media (max-width:900px){
  .iso-stage{aspect-ratio:1400/780}
  .iso-lab,.iso-wires{display:none}
  .iso-list{display:grid;grid-template-columns:1fr;gap:.5rem;
    margin-top:clamp(1rem,3vw,1.6rem)}
  .isol{display:grid;gap:.1rem;padding:.55rem .7rem;border-radius:6px;
    background:rgba(226,238,220,.5);border-left:2px solid #7EB228;
    opacity:0;transform:translateX(-8px);
    transition:opacity .45s ease,transform .55s cubic-bezier(.19,1,.22,1)}
  .iso.in .isol{opacity:1;transform:none;transition-delay:calc(.5s + var(--i) * .09s)}
  .isol b{font-family:var(--mono);font-size:.6875rem;font-weight:400;color:var(--g-900)}
  .isol em{font-style:normal;font-size:.6875rem;line-height:1.45;color:var(--ink-3)}
  .isot-k{font-size:18px} .isot-n{font-size:76px} .isot-s{font-size:18px}
}
@media (min-width:560px) and (max-width:900px){
  .iso-list{grid-template-columns:1fr 1fr;gap:.5rem .9rem}
}
@media (prefers-reduced-motion:reduce){ .isol{opacity:1;transform:none;transition:none} }

/* ═══════════════ PRODUCT RISK SCORE ═══════════════
   Scroll scrubbed. --p (0 to 1) is set on .pr-pin from JS and drives the arc
   fill, the needle, the band that is lit, and which signals have landed. */
#prhero{position:relative;z-index:1;height:240vh}
/* the pin sticks flush under the nav (top:var(--nav-h)) so its resting position and its
   stuck position are identical: the gauge locks in place from the very first pixel of
   scroll (no upward slide) and the fill completes right as the section releases */
.pr-pin{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));height:calc(100svh - var(--nav-h));
  display:grid;align-items:start;padding-top:clamp(2.5rem,7.4vw,6.5rem);overflow:hidden}
.pr-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,3vw,2.5rem);align-items:center}
@media (min-width:1000px){.pr-grid{grid-template-columns:1fr .92fr;gap:clamp(2rem,4vw,4rem)}}
.pr-copy h1{font-size:clamp(1.85rem,3.5vw,3.05rem);letter-spacing:-.035em;line-height:1.06}
.pr-copy .lede{max-width:44ch;margin-top:clamp(1.1rem,2.2vw,1.75rem)}

/* the signals land one at a time as the score climbs past each threshold */
.pr-sigs{display:grid;gap:.4rem;margin-top:clamp(1.25rem,2.5vw,2rem);max-width:30rem}
.gg-sig{display:flex;align-items:center;gap:.6rem;padding:.42rem .6rem;border-radius:6px;
  background:var(--panel);border:1px solid var(--line);
  opacity:.5;
  transition:opacity .4s ease,border-color .4s ease,background .4s ease}
.gg-sig i{width:6px;height:6px;border-radius:50%;background:var(--g-300);flex:none;
  transition:background .4s ease,box-shadow .4s ease}
.gg-sig b{font-family:var(--mono);font-size:.625rem;font-weight:400;letter-spacing:.03em;color:var(--ink-2)}
.gg-sig em{font-style:normal;font-family:var(--mono);font-size:.625rem;color:var(--ink);
  margin-inline-start:auto}
/* --at is the score at which this signal is proven; JS adds .on when it lands */
.gg-sig.on{opacity:1;border-color:rgba(63,107,30,.32);background:#F3F8EE}
.gg-sig.on i{background:var(--olive);box-shadow:0 0 0 3px rgba(63,107,30,.14)}

.gg{position:relative;width:100%;max-width:34rem;margin-inline:auto;aspect-ratio:600/416}
.gg-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gg-track{fill:none;stroke:var(--line);stroke-width:24;stroke-linecap:round}
.gg-band{fill:none;stroke-width:6;stroke-linecap:round;opacity:.26;
  transition:opacity .35s ease,stroke-width .35s ease}
/* the band the needle is sitting in comes up */
.gg-bands .gg-band{--lit:clamp(0,calc((var(--p,0) * 5 - var(--i)) * 1000),1)}
.gg-fill{fill:none;stroke:var(--olive);stroke-width:24;stroke-linecap:round;
  /* draw p*100 of the path rather than offsetting a full-length dash: at p=0 the
     round cap of an offset dash still painted a dot at the far end of the arc */
  stroke-dasharray:calc(var(--p,0) * 100) 100;
  stroke-opacity:clamp(0,calc(var(--p,0) * 60),1);
  transition:stroke .45s ease}
.gg-tick{stroke:var(--line);stroke-width:1.5}
.gg-bl{font-family:var(--mono);font-size:11px;fill:var(--ink-3);text-anchor:middle;
  letter-spacing:.6px}
/* the marker rides the leading edge of the fill instead of sweeping from the
   middle, so it never crosses the readout */
.gg-needle{transform-origin:300px 316px;
  transform:rotate(calc(150deg + var(--p,0) * 240deg))}
.gg-needle line{stroke:var(--g-900);stroke-width:3.5;stroke-linecap:round}

/* the readout centres on the dial (600x416 viewBox, centre 300,316), so it needs
   a true -50%/-50% about that point rather than an eyeballed offset */
.gg-read{position:absolute;left:50%;top:67.79%;translate:-50% -50%;text-align:center;
  display:grid;justify-items:center;gap:.1rem;width:max-content}
.gg-k{font-family:var(--mono);font-size:.5625rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3)}
.gg-read b{font-size:clamp(2.6rem,6vw,4.4rem);font-weight:400;letter-spacing:-.04em;
  line-height:1;color:var(--g-900);font-variant-numeric:tabular-nums}
.gg-state{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;color:var(--olive);
  transition:color .35s ease}
.gg-sku{font-family:var(--mono);font-size:.5625rem;color:var(--ink-3);margin-top:.35rem}

/* ── the zoom down to a single SKU ── */
.zoom{display:grid;gap:.5rem}
.zoom-row{display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem;align-items:baseline;
  padding:clamp(.9rem,1.8vw,1.35rem) clamp(1rem,2vw,1.6rem);border-radius:10px;
  border:1px solid var(--line);background:var(--surface);
  margin-inline:calc(var(--c) * clamp(0px,2.4vw,34px))}
/* each step down the hierarchy pulls in, so the eye travels toward the SKU */
.zoom-row--1{opacity:.72}
.zoom-row--2{opacity:.82}
.zoom-row--3{opacity:.92}
.zoom-row--4{border-color:var(--olive);background:linear-gradient(100deg,#F2F7EC,var(--surface))}
.zk{font-family:var(--mono);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3)}
.zv{font-size:clamp(.9375rem,1.6vw,1.15rem);letter-spacing:-.02em;color:var(--ink)}
.zoom-row--4 .zv{color:var(--g-900)}
.zoom-row em{grid-column:2;font-style:normal;font-size:.75rem;color:var(--ink-3)}
.zoom-row--4 em{color:var(--olive)}

@media (max-width:999px){
  #prhero{height:auto}
  .pr-pin{position:static;height:auto;padding-block:clamp(3rem,8vw,6rem)}
  .gg{max-width:26rem;margin-top:2rem}
}
@media (prefers-reduced-motion:reduce){
  .gg-fill{stroke-dashoffset:22}
  .gg-needle{transform:rotate(337deg)}
  .gg-sig{opacity:1}
}

/* ── the five states ── */
.rscale{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
@media (min-width:820px){.rscale{grid-template-columns:repeat(5,1fr)}}
.rs{background:var(--surface);padding:clamp(1.1rem,2.2vw,1.6rem);display:grid;
  align-content:start;gap:.4rem;transition:background .25s}
.rs:hover{background:var(--panel)}
.rs-bar{display:block;height:4px;border-radius:2px;background:var(--c);
  width:0;transition:width .8s cubic-bezier(.19,1,.22,1)}
.lift.in .rs-bar{width:100%;transition-delay:calc(.2s + var(--i) * .1s)}
.rs b{font-size:1.0625rem;letter-spacing:-.02em;color:var(--c);font-weight:400}
.rs-n{font-family:var(--mono);font-size:.625rem;letter-spacing:.06em;color:var(--ink-3)}
.rs em{font-style:normal;font-size:.8125rem;line-height:1.6;color:var(--ink-2)}

/* ── the catalog, as a compact panel rather than a full grid ── */
.clist{max-width:40rem;margin-inline:auto;border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--surface);overflow:hidden;box-shadow:0 18px 48px rgba(30,43,39,.07)}
.cl-top{display:flex;align-items:baseline;gap:.7rem;padding:.8rem 1rem;
  border-bottom:1px solid var(--line);background:var(--panel)}
.cl-t{font-size:.875rem;font-weight:500;letter-spacing:-.015em;color:var(--ink)}
.cl-seg{font-family:var(--mono);font-size:.5625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--olive);background:#EFF5E8;border-radius:3px;padding:.12rem .4rem}
.cl-c{margin-inline-start:auto;font-family:var(--mono);font-size:.5625rem;color:var(--ink-3)}
.cl-r{display:grid;grid-template-columns:auto 1fr auto auto auto;align-items:center;
  gap:.75rem;padding:.6rem 1rem;border-bottom:1px solid var(--line-soft);
  opacity:0;transform:translateY(8px);
  transition:opacity .45s ease,transform .55s cubic-bezier(.19,1,.22,1),background .2s}
.lift.in .cl-r{opacity:1;transform:none;transition-delay:calc(.12s + var(--i) * .07s)}
.cl-r:last-of-type{border-bottom:0}
.cl-r:hover{background:var(--panel)}
/* small enough that the source resolution is never the limit */
/* contain, not cover: cover was slicing the edges off every product */
.cl-th{width:38px;height:38px;border-radius:6px;object-fit:contain;
  background:#fff;border:1px solid var(--line-soft);flex:none;padding:2px}
.cl-n{display:grid;gap:.05rem;font-size:.8125rem;letter-spacing:-.012em;color:var(--ink);min-width:0}
.cl-n em{font-style:normal;font-family:var(--mono);font-size:.5625rem;color:var(--ink-3)}
.cl-bar{width:52px;height:4px;border-radius:2px;background:var(--line-soft);overflow:hidden}
.cl-bar s{display:block;height:100%;width:0;background:var(--c);border-radius:2px;
  transition:width .8s cubic-bezier(.19,1,.22,1)}
.lift.in .cl-bar s{width:var(--w);transition-delay:calc(.35s + var(--i) * .07s)}
.cl-st{font-family:var(--mono);font-size:.5rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--c);width:4.6rem;text-align:right}
.cl-r b{font-size:1rem;font-weight:400;letter-spacing:-.03em;color:var(--c);
  font-variant-numeric:tabular-nums;width:1.9rem;text-align:right}
.cl-foot{padding:.7rem 1rem;border-top:1px solid var(--line);background:var(--panel);
  font-family:var(--mono);font-size:.5625rem;color:var(--ink-3);text-align:center}
@media (max-width:560px){
  .cl-r{grid-template-columns:auto 1fr auto;gap:.6rem}
  .cl-bar,.cl-st{display:none}
}

/* the quiet partner to .afbtn, so a secondary CTA still reads as this site */
.afq{display:inline-flex;align-items:center;gap:.45rem;padding:.72rem 1.35rem;
  border-radius:999px;border:1px solid var(--line);background:var(--surface);
  font-size:.9375rem;font-weight:500;letter-spacing:-.01em;color:var(--ink);
  transition:border-color .2s,background .2s,transform .2s}
.afq:hover{border-color:var(--g-300);background:var(--panel);transform:translateY(-1px)}

/* ── keyword handwriting ──
   The word is ordinary text until the font parses, so it is readable and selectable
   even if the parser or the font never arrives. */
.hw{font-style:normal;color:var(--olive)}
.hw-on{display:inline-block;vertical-align:baseline;line-height:1}
/* Caveat has a much smaller x-height than Chillax, so it runs larger to read as the
   same size. Height and vertical-align are set per word from the glyph metrics. */
/* the word space belongs before the word; the sentence punctuation after it should
   sit tight, so the margins are not symmetric */
.hw-svg{display:inline-block;overflow:visible;margin-inline-start:.18em}
.hw-fill{fill:currentColor;stroke:none;opacity:0}
.hw-done .hw-fill{opacity:1}
.hw-ink{fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){
  .hw-fill{opacity:1}
  .hw-ink{stroke-dashoffset:0!important}
}


/* ── responsive audit fixes ──────────────────────────────────────────────
   Found by sweeping 8 pages across 15 widths from 320 to 2560. */

/* Thumb targets. The footer and nav links were 17 to 24px tall, well under the
   ~28px a finger can reliably hit. Padding grows the hit area without moving the
   type, so the layout is unchanged. */
@media (hover:none),(max-width:900px){
  .f-col a,.f-bot a,#mnav a{display:inline-flex;align-items:center;min-height:32px}
  .brand{min-height:38px}
  .j-more,.nav-soon,.is-soon{min-height:32px;display:inline-flex;align-items:center}
  .legal-toc a{min-height:30px;display:flex;align-items:center}
}
/* the legal pages set their meta line at 10px, which is below readable */
.legal-meta{font-size:.6875rem}
@media (max-width:560px){ .legal-meta{font-size:.75rem;gap:.35rem 1rem} }

/* The workflow builder's node names were clipped to 24px of a 226px label on a
   320 screen. Below the canvas breakpoint the builder needs to stop pretending
   it is a canvas. */
@media (max-width:620px){
  .wf-name{max-width:none;overflow:visible;text-overflow:clip;white-space:normal}
  .wf-top{flex-wrap:wrap;row-gap:.35rem}
}
/* decorative arcs bleed past their box by design; make sure they can never be the
   thing that creates a scrollbar on a narrow screen */
.art-arcs,.c-arcs{max-width:100vw}
@media (max-width:480px){ .art-arcs{display:none} }

/* The puzzle's svg is overflow:visible so its tabs can escape the viewBox. On a
   narrow screen that put ~40px of the artwork outside the viewport, where the
   body's overflow-x:hidden silently cropped it. Give it room instead of losing it. */
@media (max-width:620px){
  .pz-art{overflow:hidden}
  .pz-stage{padding-inline:4%}
  /* the loose pieces fly out by a fixed 120px, which is a third of a 360 screen.
     Scale the throw with the viewport so the composition still reads. */
  .pz-p--c{--lx:8vw;--ly:-7vw;--lr:11deg}
  .pz-p--d{--lx:6vw;--ly:8vw;--lr:-13deg}
}

/* the storm's mock signal cards ran their micro-labels at 9px, which is below
   comfortable even for atmosphere */
.scard--rich .s{font-size:.625rem}
.k{font-size:.625rem}
@media (max-width:620px){ .rlab{max-width:min(150px,44vw)} }