/* ==========================================================================
   Page: Home  (reviewed draft + Thomas / Amir fixes)
   ========================================================================== */
.center{text-align:center}

/* --- Hero ----------------------------------------------------------------- */
.hero{min-height:calc(100vh - var(--banner-h) - var(--nav-h));min-height:calc(100dvh - var(--banner-h) - var(--nav-h));padding:96px var(--pad-x) 120px;justify-content:center;background:var(--bg)}
.hero .waves--hero{
  height:58%;bottom:0;opacity:.9;
  /* dissolve at both ends so the field never meets a hard edge */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#101010 30%,#101010 72%,transparent 99%);
          mask-image:linear-gradient(180deg,transparent 0,#101010 30%,#101010 72%,transparent 99%);
}
.hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:64px;align-items:center}
.hero__copy{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.hero__lead{max-width:560px}

/* ── Hero animation:stacking cards that scroll up (Framer reference) ───── */
.ha{position:relative;width:100%}
.ha__viewport{
  position:relative;height:430px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#101010 26px,#101010 100%);
          mask-image:linear-gradient(180deg,transparent 0,#101010 26px,#101010 100%);
  transition:opacity .6s var(--ease);
}
.ha.is-out .ha__viewport{opacity:0}
.ha__track{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;gap:10px;
}

.ha__card{
  /* same surface as every other card on the page: white, one hairline, 16px */
  border-radius:var(--r-lg);padding:22px 24px;background:#ffffff;border:1px solid var(--line);
  opacity:0;transform:translateY(22px) scale(.985);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
}
.ha__card.is-in{opacity:1;transform:none}
.ha__card.is-swap>*{opacity:0;transition:opacity .15s var(--ease)}

.ha__track.is-light .ha__card,
.ha__track.is-paper .ha__card{background:#ffffff}
.ha__track.is-paper .ha__card--win{padding:0;overflow:hidden}

/* message card */
.ha__who{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.ha__who b{font-weight:400;font-size:17px;line-height:22px;color:var(--ink)}
.ha__avatar{position:relative;width:32px;height:32px;border-radius:50%;overflow:hidden;background:#7a7a7a;color:#ffffff;display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px}
.ha__avatar i{font-style:normal;font-weight:450;font-size:13px}
.ha__avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ha__quote{margin:0;font-weight:400;font-size:17px;line-height:29px;letter-spacing:-.15px;color:var(--ink)}

/* strada mark, cropped to the circle */
.ha__mark{width:24px;height:24px;flex:0 0 24px;overflow:hidden;display:inline-flex;align-items:center}
.ha__mark img{height:24px;width:auto;max-width:none;object-fit:none;object-position:left center}

/* head row */
.ha__head{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.ha__head b{font-weight:400;font-size:17px;line-height:22px;color:var(--ink)}
.ha__head--split{justify-content:space-between;gap:16px}
.ha__ico{width:21px;height:21px;flex:0 0 21px;fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ha__tick{width:21px;height:21px;flex:0 0 21px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ha__sync{width:21px;height:21px;flex:0 0 21px;fill:none;stroke:#4a4842;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;animation:haSpin 4s linear infinite}
@keyframes haSpin{to{transform:rotate(360deg)}}

/* status / working line */
.ha__card--status{display:flex;align-items:center;gap:11px}
.ha__working{font-weight:400;font-size:17px;line-height:22px;color:var(--ink)}
.ha__dots{display:inline-flex;align-items:flex-end;gap:3px;margin-left:5px;padding-bottom:3px}
.ha__dots i{width:3.5px;height:3.5px;border-radius:50%;background:#7a7a7a;animation:haDot 1.3s infinite}
.ha__dots i:nth-child(2){animation-delay:.18s}
.ha__dots i:nth-child(3){animation-delay:.36s}
@keyframes haDot{0%,65%,100%{opacity:.28}25%{opacity:1}}

/* checklist rows */
.ha__rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.ha__rows li{
  display:flex;align-items:center;gap:11px;
  font-weight:400;font-size:16px;line-height:24px;color:#7a7a7a;
  opacity:0;transform:translateX(-6px);animation:haRow .3s var(--ease-out) forwards;
}
.ha__rows li:nth-child(1){animation-delay:.10s}
.ha__rows li:nth-child(2){animation-delay:.26s}
.ha__rows li:nth-child(3){animation-delay:.42s}
@keyframes haRow{to{opacity:1;transform:none}}
.ha__ok{
  width:19px;height:19px;flex:0 0 19px;border-radius:50%;border:0;background-color:currentColor;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.2 10.4l2.6 2.5 5.2-5.4' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position:center;background-size:100%;background-repeat:no-repeat;
}
.ha__rows--green li{color:var(--green)}
.ha__rows--green li{color:#7a7a7a}
.ha__rows--green .ha__ok{color:#00b585}
.ha__rows--panel{gap:8px}
.ha__rows--panel li{background:var(--bg);border-radius:var(--r-md);padding:11px 14px;color:#7a7a7a}
.ha__rows--panel .ha__ok{color:#7a7a7a;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.2 10.4l2.6 2.5 5.2-5.4' fill='none' stroke='%237a7a7a' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* progress bar */
.ha__bar{height:7px;border-radius:var(--r-sm);background:rgba(16,16,16,.07);overflow:hidden;margin:2px 0 14px}
.ha__bar i{display:block;height:100%;border-radius:var(--r-sm);background:var(--green-deep);transition:width 1.4s var(--ease-out)}

/* browser window */
.ha__bar-os{display:flex;align-items:center;gap:9px;height:34px;padding:0 16px;background:#c9c6bf}
.ha__bar-os i{width:11px;height:11px;border-radius:50%;background:#c9c6bf}
.ha__winbody{padding:18px 20px 20px}
.ha__panel{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px}
.ha__panel p{margin:0;font-weight:400;font-size:16px;line-height:26px;color:#7a7a7a}
.ha__panel--work{position:relative;display:flex;align-items:center;min-height:58px;padding-left:22px}
.ha__cursor{position:absolute;right:56px;top:50%;width:19px;height:19px;fill:#7a7a7a;animation:haCursor 3.4s var(--ease) infinite}
@keyframes haCursor{0%,100%{transform:translate(0,-6px)}50%{transform:translate(-10px,4px)}}

/* --- Stories link ----------------------------------------------------------- */
.stories-link{display:flex;justify-content:center;padding:36px var(--pad-x) 0}
.tlink{
  display:inline-flex;align-items:center;gap:7px;
  font-weight:450;font-size:14.5px;line-height:20px;letter-spacing:.1px;
  color:var(--muted);text-decoration:none;
  transition:color .15s var(--ease);
}
.tlink i{font-style:normal;transition:transform .15s var(--ease)}
.tlink:hover{color:var(--ink)}
.tlink:hover i{transform:translateX(3px)}
.btn--paper{
  background:transparent;color:var(--ink-nav);
  border:1px solid rgba(16,16,16,.28);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.btn--paper:hover{background:var(--ink-nav);color:#ffffff;border-color:var(--ink-nav)}

/* --- Segments / tabs -------------------------------------------------------- */
.segments .shell{display:flex;flex-direction:column;gap:56px}
.tabs{display:flex;flex-direction:column;gap:40px}
.tabs__bar{position:relative;display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.tabs__tab{padding:16px 8px 18px;text-align:center;cursor:pointer;font-weight:400;font-size:18px;line-height:22px;letter-spacing:-.2px;color:var(--muted);transition:color .15s var(--ease)}
.tabs__tab:hover,.tabs__tab[aria-selected="true"]{color:var(--ink-nav)}
.tabs__ink{position:absolute;left:0;bottom:-1px;height:2px;background:var(--ink-nav);transition:transform .3s var(--ease),width .3s var(--ease)}
.tabs__panel{animation:panelIn .3s var(--ease-out)}
@keyframes panelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.seg__kicker{color:var(--green-deep);font-size:12px;letter-spacing:1.4px}
.seg__lines{
  grid-column:1/-1;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:-4px;padding:18px 32px;background:var(--card);border:1px solid var(--line);
}
.seg__lines::before{content:"";width:20px;height:1px;background:var(--green-deep);opacity:.55;flex:0 0 20px}
.seg__lines-label{font-weight:450;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--green-deep);white-space:nowrap}
.checklist{display:flex;flex-direction:column;gap:18px}
.checklist li{position:relative;padding-left:36px;font-weight:400;font-size:18px;line-height:26px;letter-spacing:-.2px;color:#4a4842}
.checklist li::before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;border:1.5px solid #4a4842;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.5l3 3L15.5 8' fill='none' stroke='%234a4842' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.checklist--spark li::before{border:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M11 2v6M11 14v6M2 11h6M14 11h6M5 5l3 3M14 14l3 3M17 5l-3 3M8 14l-3 3' fill='none' stroke='%23007a57' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/100% no-repeat}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0}
.chips li{padding:7px 13px;border:1px solid var(--line);background:#ffffff;font-weight:400;font-size:14px;line-height:16px;color:#4a4842}
.chips--quiet li{background:transparent}

/* --- Results ---------------------------------------------------------------- */
.results .shell{display:flex;flex-direction:column;gap:56px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.stat{position:relative;background:var(--card);border:1px solid var(--line);padding:32px 32px 36px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.stat::after{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--green);transition:width .7s var(--ease-out) .2s}
.stat.is-in::after{width:100%}
.stat__icon{width:48px;height:48px;border-radius:50%;background:rgba(0,181,133,.12);display:inline-flex;align-items:center;justify-content:center;margin-bottom:28px}
.stat__icon svg{width:24px;height:24px;fill:none;stroke:var(--green-deep);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.stat__num{font-weight:300;font-size:64px;line-height:64px;letter-spacing:-2.4px;color:var(--ink);font-variant-numeric:tabular-nums}
.stat__title{font-weight:400;font-size:26px;line-height:30px;letter-spacing:-.5px;margin-top:20px}
.stat__sub{font-weight:400;font-size:16px;line-height:24px;color:var(--muted)}

/* --- Statement -------------------------------------------------------------- */
.statement{padding:140px var(--pad-x)}
.statement__text{max-width:1000px;font-weight:300;font-size:56px;line-height:64px;letter-spacing:-2px;color:var(--ink)}
.statement__text span{color:var(--muted)}

/* --- Platform bento --------------------------------------------------------- */
.platform .shell{display:flex;flex-direction:column;gap:56px}
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tile{background:var(--card);border:1px solid var(--line);padding:32px;display:flex;flex-direction:column;gap:24px;min-height:260px}
.tile__title{font-weight:400;font-size:28px;line-height:32px;letter-spacing:-.56px}
.tile--flow{grid-column:span 2}
.tile--wide{grid-column:1/-1}
.tile__head{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.bullets{display:flex;flex-direction:column;gap:14px}
.bullets li{position:relative;padding-left:20px;font-weight:400;font-size:18px;line-height:24px;letter-spacing:-.2px;color:#4a4842}
.bullets li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;background:var(--green-deep)}
.bullets--2col{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
.channels-mini{display:grid;grid-template-columns:1fr 1fr;gap:28px 20px}
.channels-mini li{display:flex;flex-direction:column;gap:6px}
.channels-mini svg{width:26px;height:26px;fill:none;stroke:var(--green-deep);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:8px}
.channels-mini strong{font-weight:450;font-size:18px;line-height:22px;color:var(--ink)}
.channels-mini span{font-weight:400;font-size:15px;line-height:21px;color:var(--muted)}

/* product UI mock (agent builder) */
.ui{margin-top:auto;border:1px solid var(--line);background:#ffffff;font-family:var(--ui);font-size:12px;color:#101010;overflow:hidden}
.ui__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 14px;border-bottom:1px solid var(--line);color:#7a7a7a}
.ui__crumb b{color:#101010;font-weight:600}
.ui__tabs{display:flex;gap:14px}
.ui__tabs b{color:#101010;font-weight:600;border-bottom:2px solid var(--green);padding-bottom:6px;margin-bottom:-11px}
.ui__body{display:grid;grid-template-columns:1.25fr 1fr}
.ui__list{padding:12px;display:flex;flex-direction:column;gap:8px;border-right:1px solid var(--line)}
.ui__row{display:grid;grid-template-columns:24px 1fr;grid-template-rows:auto auto;column-gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:#ffffff}
.ui__row i{grid-row:span 2;width:24px;height:24px;border-radius:var(--r-sm);background:rgba(0,181,133,.14)}
.ui__row b{font-weight:600;font-size:12.5px}
.ui__row small{color:#7a7a7a;font-size:12px}
.ui__row.is-open{border-color:rgba(0,181,133,.6);box-shadow:0 0 0 2px rgba(0,181,133,.12)}
.ui__flow{padding:16px;display:flex;flex-direction:column;align-items:center;background:radial-gradient(rgba(16,16,16,.16) 1px,transparent 1px) 0 0/14px 14px}
.ui__node{width:100%;background:#ffffff;border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;display:flex;flex-direction:column;gap:3px}
.ui__node b{font-weight:600;font-size:12.5px}
.ui__node small{color:#7a7a7a;font-size:12px}
.ui__node code{font-size:10.5px;background:#f2f1ed;padding:1px 4px;border-radius:var(--r-sm)}
.ui__node--done{border-color:rgba(0,181,133,.7)}
.ui__link{width:2px;height:18px;background:var(--green-deep);opacity:.7}

.tile--noapi{flex-direction:row;align-items:center;gap:56px;background:var(--card);border-color:rgba(0,181,133,.3)}
.noapi__copy{flex:1 1 0;display:flex;flex-direction:column;gap:14px}
.noapi__copy .t-lead{max-width:520px}
.noapi__steps{flex:1 1 0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;list-style:none;padding:0}
.noapi__steps li{display:flex;flex-direction:column;gap:8px;padding:20px;background:#ffffff;border:1px solid var(--line)}
.noapi__steps span{width:28px;height:28px;border-radius:50%;background:var(--green);color:#ffffff;display:inline-flex;align-items:center;justify-content:center;font-weight:450;font-size:13px}
.noapi__steps b{font-weight:450;font-size:16px;margin-top:6px}
.noapi__steps small{font-weight:400;font-size:14px;line-height:20px;color:var(--muted)}

/* --- Testimonial carousel (draft layout: arrows top-right, side cards peek) -- */
.quotes{overflow:hidden}
.quotes .shell{display:flex;flex-direction:column;gap:32px}
.quotes__head{display:flex;align-items:center;justify-content:space-between;gap:24px}
.tcar{position:relative;display:flex;flex-direction:column;gap:20px}
.tcar__viewport{position:relative;overflow:visible}
.tcar__track{display:flex;gap:16px;list-style:none;padding:0;margin:0;transition:transform .6s var(--ease-out);will-change:transform}
.tcard{flex:0 0 944px;display:grid;grid-template-columns:296px 1fr;background:var(--card);border:1px solid var(--line);height:380px}

.tcard__photo{overflow:hidden}
.tcard__photo img{width:100%;height:100%;object-fit:cover}
.tcard__body{display:grid;grid-template-rows:1fr auto;gap:24px;padding:28px 28px 26px;min-height:0}
.tcard__quote{margin:0;font-weight:400;font-size:22px;line-height:1.45;letter-spacing:-.25px;color:var(--ink);max-width:46ch}
.tcard__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.tcard__who{display:flex;flex-direction:column;gap:6px}
.tcard__avatar{width:36px;height:36px;border-radius:var(--r-sm);object-fit:cover;margin-bottom:8px}
.tcard__who strong{display:block;font-weight:400;font-size:17px;line-height:22px;color:var(--ink)}
.tcard__who span{display:block;font-weight:300;font-size:13px;line-height:18px;color:#4a4842}
.tcard__logo{height:22px;width:auto;max-width:137px;object-fit:contain;object-position:left center;margin-top:6px}
.tcar__btns{display:flex;gap:8px}
.tcar__btn{width:44px;height:44px;border-radius:50%;background:#ffffff;color:var(--green-deep);border:0;display:inline-flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;transition:background .15s}
.tcar__btn:hover{background:var(--card)}
.tcar__dots{display:flex;justify-content:center;gap:8px;list-style:none;padding:0;margin:0}
.tcar__dots li{width:6px;height:6px;border-radius:50%;background:rgba(16,16,16,.18);transition:background .15s}
.tcar__dots li.is-active{background:#ffffff;box-shadow:0 0 0 1px rgba(16,16,16,.25)}

/* --- Logo rows -------------------------------------------------------------- */
.logorow{padding:56px var(--pad-x);background:var(--bg)}
.logorow__inner{display:flex;align-items:center;gap:48px}
.logorow__label{font-weight:450;font-size:13px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.logorow ul{display:flex;align-items:center;justify-content:space-around;flex:1;gap:40px;flex-wrap:wrap;list-style:none;padding:0}
.logorow img{filter:grayscale(1);opacity:.8}
.wordmark{font-weight:800;font-size:22px;letter-spacing:.4px;color:#4a4842;text-transform:uppercase}
.wordmark--serif{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:1px;font-size:20px}

/* --- Why -------------------------------------------------------------------- */
.why .shell{display:flex;flex-direction:column;gap:56px}
/* Ramp-style: plain columns on the paper ground, no boxes */
.why__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 64px}
.why__card{background:none;border:0;padding:0;display:flex;flex-direction:column;gap:0}
.why__num{display:none}
.why__card .t-h3{
  margin:0;padding:0;border:0;min-height:0;
  font-weight:450;font-size:20px;line-height:27px;letter-spacing:-.3px;color:var(--ink);
}
.why__card .checklist{margin-top:14px;gap:11px}
.why__card .checklist li{
  padding-left:0;font-size:16.5px;line-height:25px;letter-spacing:-.1px;color:var(--muted);
}
.why__card .checklist li::before{display:none}

/* --- Security --------------------------------------------------------------- */
.security .shell{display:flex;flex-direction:column;gap:56px}
.security__head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end}
.security__head .t-lead{max-width:480px;justify-self:end}
.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.badge{background:var(--card);border:1px solid var(--line);padding:32px;display:flex;flex-direction:column;gap:12px}
.badge img{width:64px;height:64px;object-fit:contain;margin-bottom:12px;filter:grayscale(1);opacity:.85}
.badge__seal{width:64px;height:64px;margin-bottom:12px;display:inline-flex}
.badge__seal svg{width:64px;height:64px;fill:none;stroke:#4a4842;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.badge h3{font-weight:450;font-size:18px;line-height:24px}
.badge p{font-weight:400;font-size:15px;line-height:22px;color:var(--muted)}

/* --- FAQ -------------------------------------------------------------------- */
.faq .shell{display:flex;flex-direction:column;gap:40px}
.faq__shell{max-width:960px}
.faq__head h2{max-width:12ch}
.acc{display:flex;flex-direction:column}
.acc__item{border-top:1px solid var(--line)}
.acc__item:last-child{border-bottom:1px solid var(--line)}
.acc__head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 4px;cursor:pointer;text-align:left;font-weight:400;font-size:22px;line-height:28px;letter-spacing:-.3px;color:var(--ink)}
.acc__plus{position:relative;width:18px;height:18px;flex:0 0 18px}
.acc__plus::before,.acc__plus::after{content:"";position:absolute;background:var(--ink)}
.acc__plus::before{top:8px;height:2px;left:0;right:0}
.acc__plus::after{left:8px;width:2px;top:0;bottom:0;transition:transform .3s var(--ease)}
.acc__item.is-open .acc__plus::after{transform:scaleY(0)}
.acc__body{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.acc__body p{padding:0 4px 24px;font-weight:400;font-size:17px;line-height:26px;color:var(--muted);max-width:70ch}

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (max-width:1199.98px){
  /* stacked hero: trim the chrome so it still lands close to one screen */
  .hero{padding:clamp(40px,5vh,72px) var(--pad-x) clamp(44px,6vh,80px)}
  .hero__grid{grid-template-columns:1fr;gap:clamp(24px,4vh,44px)}
  .hero__copy{gap:clamp(16px,2.4vh,26px)}
  .ha{max-width:560px}
  .ha__viewport{height:min(430px,42vh)}
  .segments,.results,.platform,.why,.security,.quotes,.faq{padding:80px var(--pad-x)}
  .statement{padding:96px var(--pad-x)}
  .statement__text{font-size:44px;line-height:52px;letter-spacing:-1.5px}
  .stats,.why__grid{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr 1fr}
  .badges{grid-template-columns:1fr 1fr}
  .security__head{grid-template-columns:1fr}
  .security__head .t-lead{justify-self:start}
  .intgrid{grid-template-columns:repeat(6,1fr)}
  .tile--noapi{flex-direction:column;align-items:stretch;gap:32px}
  .tcard{flex-basis:min(944px,calc(100vw - 2*var(--pad-x)));grid-template-columns:240px 1fr}
}
@media (max-width:809.98px){
  .hero{min-height:calc(100svh - var(--banner-h) - var(--nav-h));padding:56px 20px 72px}
  .hero__copy{gap:20px}
  .ha__viewport{height:min(390px,40vh)}
  .ha__card{padding:18px 20px}
  .ha__quote,.ha__head b,.ha__working{font-size:16px;line-height:25px}
  .ha__rows li,.ha__panel p{font-size:15px;line-height:23px}
  .segments,.results,.platform,.why,.security,.quotes,.faq{padding:56px 20px}
  .tabs__tab{font-size:15px;padding:12px 4px 14px}
  .seg{grid-template-columns:1fr}
  .seg__card,.seg__lines,.stat,.tile,.badge{padding:22px}
  .seg__lines{flex-direction:column;align-items:flex-start;gap:12px}
  .seg__lines::before{display:none}
  .checklist li,.bullets li{font-size:16px;line-height:24px}
  .stat__num{font-size:48px;line-height:48px}
  .stat__title{font-size:22px;line-height:26px}
  .statement{padding:64px 20px}
  .statement__text{font-size:30px;line-height:38px;letter-spacing:-.9px}
  .bento{grid-template-columns:1fr}
  .tile--flow{grid-column:auto}
  .bullets--2col{grid-template-columns:1fr}
  .ui__body{grid-template-columns:1fr}
  .ui__list{border-right:0;border-bottom:1px solid var(--line)}
  .intgrid{grid-template-columns:repeat(4,1fr)}
  .noapi__steps{grid-template-columns:1fr}
  .logorow{padding:40px 20px}
  .logorow__inner{flex-direction:column;align-items:flex-start;gap:24px}
  .logorow ul{justify-content:flex-start;gap:24px}
  .badges{grid-template-columns:1fr}
  .stories-link{padding:26px 20px 0}
  .quotes__head{flex-direction:column;align-items:flex-start;gap:16px}
  .tcard{grid-template-columns:1fr;height:auto}
  .tcard__photo{height:200px}
  .tcard__body{padding:20px}
  .tcard__quote{font-size:17px}
  .tcard__foot{flex-direction:column;align-items:flex-start;gap:16px}
  .acc__head{font-size:18px;line-height:24px;padding:18px 4px}
  .acc__body p{font-size:15px;line-height:22px;padding-bottom:18px}
}

/* --- NO API: browser-agent workflow mock (Amir's example) ------------------ */
.wf{flex:1.2 1 0;background:#ffffff;border:1px solid var(--line);font-family:var(--ui);font-size:12px;color:#101010;display:flex;flex-direction:column}
.wf__head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);color:#7a7a7a;font-weight:500}
.wf__ok{color:var(--green-deep);font-weight:600}
.wf__chain{list-style:none;margin:0;padding:14px;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;background:radial-gradient(rgba(16,16,16,.16) 1px,transparent 1px) 0 0/14px 14px;position:relative}
.wf__chain::before{content:"";position:absolute;left:14px;right:14px;top:50%;height:2px;background:var(--green-deep);opacity:.5}
.wf__chain li{position:relative;background:#ffffff;border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px;display:flex;flex-direction:column;gap:4px;min-width:0}
.wf__chain li.is-live{border-color:rgba(0,181,133,.8);box-shadow:0 0 0 2px rgba(0,181,133,.12)}
.wf__chain span{font-size:12px;color:#4a4842;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf__tag{display:inline-block;font-size:10.5px;font-weight:600;padding:2px 6px;border-radius:var(--r-sm);border:1px solid;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf__tag--trigger{color:var(--green-deep);border-color:#8fe3c6;background:rgba(0,181,133,.10)}
.wf__tag--code{color:#7a7a7a;border-color:var(--line);background:#ffffff}
.wf__tag--browser{color:#4a4842;border-color:#e9e0ce;background:#f7f6f2}
.wf__tag--strada{color:#007a57;border-color:#dce7e0;background:#eef3ef}
.wf__steps{list-style:none;margin:0;padding:6px 14px;display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;border-top:1px solid var(--line)}
.wf__steps li{display:grid;grid-template-columns:14px auto 1fr;gap:8px;align-items:center;padding:6px 0;color:#7a7a7a;font-size:11.5px}
.wf__steps i{font-style:normal;color:#c9c6bf}
.wf__steps em{font-style:normal;font-weight:600;color:#7a7a7a;background:#ffffff;padding:1px 6px;border-radius:var(--r-sm)}
.wf__steps li:nth-child(2) em{color:#7a7a7a;background:#f2f1ed}
.wf__steps li:nth-child(n+3) em{color:var(--green-deep);background:rgba(0,181,133,.10)}
.wf__steps span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf__foot{display:flex;align-items:center;gap:8px;padding:8px 14px;border-top:1px solid var(--line);color:#7a7a7a}
.wf__rec{width:8px;height:8px;border-radius:50%;background:#7a7a7a;animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(122,122,122,.6)}70%{box-shadow:0 0 0 8px rgba(122,122,122,0)}100%{box-shadow:0 0 0 0 rgba(122,122,122,0)}}
@media (max-width:1199.98px){.wf__chain{grid-template-columns:repeat(3,1fr)}.wf__chain::before{display:none}}
@media (max-width:809.98px){.wf__chain{grid-template-columns:1fr 1fr}.wf__steps{grid-template-columns:1fr}}

/* ==========================================================================
   Visual polish — rhythm, depth, contrast
   ========================================================================== */

/* --- Section eyebrow ------------------------------------------------------- */
.kicker{
  display:flex;align-items:center;gap:12px;margin-bottom:20px;
  font-weight:450;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--green-deep);
}
.kicker i{display:block;width:28px;height:1px;background:currentColor;opacity:.5;flex:0 0 28px}
.kicker--center{justify-content:center}
.segments .shell,.results .shell,.platform .shell,.why .shell,.quotes .shell,.security .shell{position:relative}
.results .kicker,.platform .kicker,.segments .kicker,.why .kicker{margin-bottom:-36px}
.quotes .kicker,.security .kicker,.faq .kicker{margin-bottom:-24px}

/* --- Headline weight mix --------------------------------------------------- */
.t-h2 br+*,.t-h2{font-weight:400}
.segments h2,.results h2,.platform h2,.why h2,.security h2,.quotes h2,.faq h2{letter-spacing:-1px}

/* --- Statement: deep-green break in the middle of the page ----------------- */
.statement{
  position:relative;overflow:hidden;
  background:radial-gradient(120% 140% at 12% 0%,#0f4a38 0%,#06251c 62%,#06251c 100%);
}
.statement .waves--dark{
  position:absolute;inset:0;height:100%;opacity:.7;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#101010 24%,#101010 76%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#101010 24%,#101010 76%,transparent 100%);
}
.statement .shell{position:relative;z-index:1}
.statement__text{color:#f2f1ed}
.statement__text span{color:rgba(242,241,237,.52)}

/* --- Shared card polish: accent line on hover ------------------------------ */
.seg__card,.stat,.tile,.badge,.channel{position:relative;overflow:hidden}

/* --- Stats: bigger numbers, corner wash ------------------------------------ */
.stat{padding:36px 32px 40px;background:var(--card)}
.stat__icon{width:52px;height:52px;border-radius:0;background:#ffffff;border:1px solid var(--line);margin-bottom:36px}
.stat__icon svg{width:24px;height:24px}
.stat__num{font-size:84px;line-height:76px;letter-spacing:-4px;font-weight:250}
.stat__title{font-size:24px;line-height:28px;margin-top:24px;letter-spacing:-.4px}
.stat__sub{font-size:15px;line-height:23px}

/* --- Why: ghost numerals --------------------------------------------------- */

.why__card .t-h3{position:relative;z-index:1}
.why__card .checklist{position:relative;z-index:1}

/* --- Marquee edge fade ----------------------------------------------------- */
.marquee{
  -webkit-mask-image:linear-gradient(90deg,transparent,#101010 9%,#101010 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#101010 9%,#101010 91%,transparent);
}

/* --- Tabs: a touch more presence ------------------------------------------- */
.tabs__tab{font-size:19px}
.tabs__ink{height:2px;box-shadow:0 0 0 0 rgba(0,181,133,0)}
.tabs__bar{border-bottom-color:rgba(16,16,16,.14)}

/* --- Channel / platform icons: square chips -------------------------------- */
.channels-mini svg{
  box-sizing:content-box;width:22px;height:22px;padding:10px;
  background:#ffffff;border:1px solid var(--line);margin-bottom:12px;
}

/* --- Section spacing rhythm ------------------------------------------------ */
.results{padding-top:120px}
.platform{padding-bottom:120px}
.why{padding:110px var(--pad-x)}

@media (max-width:1199.98px){
  .stat__num{font-size:64px;line-height:60px;letter-spacing:-2.6px}
  .results,.platform,.why{padding:80px var(--pad-x)}
}
@media (max-width:809.98px){
  .kicker{margin-bottom:16px}
  .results .kicker,.platform .kicker,.segments .kicker,.why .kicker{margin-bottom:-32px}
  .stat__num{font-size:54px;line-height:52px;letter-spacing:-2px}
  .stat{padding:24px}
  .results,.platform,.why{padding:56px 20px}
}

/* --- kicker placement fixes ------------------------------------------------ */
.security__head{align-items:end}
.security__title{display:flex;flex-direction:column}
.security__title .kicker{margin-bottom:18px}
.quotes__head>div:not(.tcar__btns){display:flex;flex-direction:column}
.quotes__head .kicker{margin-bottom:14px}
.faq__head .kicker{margin-bottom:16px}
.security .kicker,.faq .kicker{margin-bottom:14px}
@media (max-width:1199.98px){
  .security__head{align-items:start}
}

/* ==========================================================================
   Workflows tab — richer capability rows, asymmetric layout, stat filler
   ========================================================================== */
.seg{display:grid;grid-template-columns:1.32fr 1fr;gap:20px;align-items:start}
.seg__card{
  position:relative;background:var(--card);border:1px solid var(--line);
  padding:30px 30px 32px;display:flex;flex-direction:column;gap:22px;
}
.seg__side{display:flex;flex-direction:column;gap:20px;align-self:stretch}
.seg__side .seg__card{flex:1 1 auto}

/* capability rows */
.caps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.caps li{
  position:relative;display:grid;grid-template-columns:34px 1fr;gap:16px;align-items:start;
  padding:16px 12px 16px 0;border-top:1px solid rgba(16,16,16,.07);
}
.caps li:first-child{border-top:0;padding-top:4px}

.cap__ico{
  width:34px;height:34px;flex:0 0 34px;background:#ffffff;border:1px solid var(--line);
  background-repeat:no-repeat;background-position:center;background-size:19px 19px;
}
.cap__ico--check{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='9' fill='none' stroke='%234a4842' stroke-width='1.4'/%3E%3Cpath d='M7 11.3l2.8 2.7L15 8.6' fill='none' stroke='%234a4842' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.cap__ico--spark{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M11 2.5v6M11 13.5v6M2.5 11h6M13.5 11h6M5.2 5.2l3.4 3.4M13.4 13.4l3.4 3.4M16.8 5.2l-3.4 3.4M8.6 13.4l-3.4 3.4' fill='none' stroke='%23007a57' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")}
.cap__txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.cap__txt b{font-weight:400;font-size:19px;line-height:26px;letter-spacing:-.25px;color:var(--ink)}
.cap__txt em{font-style:normal;font-weight:400;font-size:15px;line-height:22px;color:var(--muted)}

/* stat filler under the backoffice card */
.seg__stat{
  position:relative;overflow:hidden;flex:0 0 auto;
  padding:28px 30px 30px;color:#f2f1ed;
  background:radial-gradient(120% 150% at 8% 0%,#0f4a38 0%,#06251c 70%,#06251c 100%);
}
.seg__stat b{display:block;font-weight:250;font-size:64px;line-height:60px;letter-spacing:-2.8px}
.seg__stat span{display:block;margin-top:12px;font-weight:400;font-size:15px;line-height:22px;color:rgba(242,241,237,.6);max-width:30ch}

/* tabs get more presence */
.tabs__tab{font-size:20px;padding:18px 8px 20px;transition:color .15s var(--ease),background .3s var(--ease)}
.tabs__tab:hover{background:rgba(16,16,16,.028)}
.tabs__tab[aria-selected="true"]{font-weight:450}
.tabs__ink{height:2px;background:var(--ink-nav)}

@media (max-width:1199.98px){
  .seg{grid-template-columns:1fr}
  .seg__stat b{font-size:52px;line-height:50px}
}
@media (max-width:809.98px){
  .seg__card{padding:22px}
  .seg__stat{padding:22px}
  .seg__stat b{font-size:44px;line-height:44px;letter-spacing:-1.6px}
  .caps li{grid-template-columns:28px 1fr;gap:12px;padding:14px 0}
  .cap__ico{width:28px;height:28px;flex:0 0 28px;background-size:16px 16px}
  .cap__txt b{font-size:17px;line-height:24px}
  .cap__txt em{font-size:14px;line-height:20px}
  .tabs__tab{font-size:15px;padding:12px 4px 14px}
}

.hero .waves--hero{z-index:0}
.hero__grid{z-index:1}

/* ==========================================================================
   Motion + texture layer  (Ramp-inspired: grid, ticker, arrows, line reveals)
   ========================================================================== */

/* --- Hero grid texture ----------------------------------------------------- */
.gridlines{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(rgba(16,16,16,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,16,16,.05) 1px, transparent 1px);
  background-size:26px 26px, 160px 100%;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 42%, #101010 0%, rgba(16,16,16,.45) 46%, transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 42%, #101010 0%, rgba(16,16,16,.45) 46%, transparent 78%);
  opacity:.55;
  animation:gridDrift 34s linear infinite;
}
@keyframes gridDrift{to{background-position:26px 26px, 160px 0}}
@media (prefers-reduced-motion:reduce){.gridlines{animation:none}}

/* --- Live ticker ----------------------------------------------------------- */
.ticker{
  display:flex;align-items:center;gap:14px;margin-bottom:26px;
  font-weight:450;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);
}
.ticker span{display:inline-flex;align-items:center;gap:1px}
.ticker b{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:15px;padding:3px 0;background:rgba(16,16,16,.055);
  font-weight:450;font-size:12px;letter-spacing:0;color:var(--ink-nav);
  font-variant-numeric:tabular-nums;
  animation:tickIn .3s var(--ease);
}
.ticker u{text-decoration:none;color:var(--muted);padding:0 2px}
@keyframes tickIn{from{opacity:.35}to{opacity:1}}

/* --- Headings: line-by-line reveal ------------------------------------------ */
[data-lines] .ln{display:block;overflow:hidden}
[data-lines] .ln i{
  display:block;font-style:inherit;
  transform:translateY(105%);opacity:0;
  transition:transform .7s var(--ease-out),opacity .6s var(--ease);
}
[data-lines].is-lit .ln i{transform:none;opacity:1}
[data-lines].is-lit .ln:nth-child(2) i{transition-delay:.09s}
[data-lines].is-lit .ln:nth-child(3) i{transition-delay:.18s}

/* --- Corner arrows on cards ------------------------------------------------- */
.tile{position:relative}
.arrow{
  position:absolute;right:22px;top:20px;font-size:15px;line-height:1;color:var(--muted);
  opacity:0;transform:translate(-5px,5px);
  transition:opacity .3s var(--ease),transform .3s var(--ease-out),color .3s var(--ease);
}

/* --- Section rhythm: Ramp-style generous vertical space --------------------- */
.segments,.results,.platform,.quotes,.why,.security,.faq{padding-top:128px;padding-bottom:128px}
.statement{padding-top:150px;padding-bottom:150px}
.t-h2{letter-spacing:-1.2px}

/* --- Reveal: a touch more travel and a softer curve -------------------------- */
.reveal{transform:translateY(26px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}

@media (max-width:1199.98px){
  .segments,.results,.platform,.quotes,.why,.security,.faq{padding-top:88px;padding-bottom:88px}
  .statement{padding-top:104px;padding-bottom:104px}
}
@media (max-width:809.98px){
  .segments,.results,.platform,.quotes,.why,.security,.faq{padding-top:64px;padding-bottom:64px}
  .statement{padding-top:72px;padding-bottom:72px}
  .ticker{margin-bottom:18px;font-size:10px;letter-spacing:1.1px;flex-wrap:wrap;gap:8px}
  .gridlines{background-size:20px 20px, 110px 100%}
  .arrow{right:16px;top:14px}
}

/* ==========================================================================
   Integrations — Ramp-style: copy on the left, tile grid on the right
   ========================================================================== */
.tile--ints{padding:0;background:transparent;border:0;min-height:0}
.ints{display:grid;grid-template-columns:0.82fr 1.18fr;gap:64px;align-items:center}
.ints__copy{display:flex;flex-direction:column;gap:18px;max-width:30ch}
.ints__title{font-weight:400;font-size:34px;line-height:41px;letter-spacing:-.8px;color:var(--ink)}
.ints__copy .t-lead{font-size:17px;line-height:27px}
.linkarrow{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;margin-top:4px;
  font-weight:450;font-size:16px;color:var(--ink-nav);
}
.linkarrow span{transition:transform .3s var(--ease-out)}
.linkarrow:hover span{transform:translateX(5px)}

/* the grid reads as one panel divided by hairlines */
.lgrid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--line);gap:1px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
.lgrid li{
  position:relative;background:#ffffff;min-height:118px;
  display:flex;align-items:center;justify-content:center;padding:24px;
  transition:background .3s var(--ease);
}
.lgrid li:hover{background:#f7f6f2}
.lgrid img{max-width:96px;max-height:40px;object-fit:contain;filter:grayscale(1);opacity:.62;transition:filter .3s var(--ease),opacity .3s var(--ease)}
.lgrid li:hover img{filter:none;opacity:1}
.lg__go{
  position:absolute;right:14px;top:14px;width:26px;height:26px;border-radius:50%;
  background:rgba(16,16,16,.05);color:var(--ink-nav);
  display:flex;align-items:center;justify-content:center;font-size:12px;
  opacity:0;transform:scale(.85);transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.lgrid li:hover .lg__go{opacity:1;transform:none}

/* the stat cell breaks the grid, like Ramp's photo card */
.lgrid__stat{
  grid-column:span 1;flex-direction:column;align-items:flex-start!important;justify-content:center;
  gap:8px;padding:22px 20px!important;
  background:radial-gradient(130% 150% at 8% 0%,#0f4a38 0%,#06251c 70%,#06251c 100%)!important;
  color:#f2f1ed;
}
.lgrid__stat:hover{background:radial-gradient(130% 150% at 8% 0%,#0f4a38 0%,#06251c 70%,#06251c 100%)!important}
.lgrid__stat b{font-weight:250;font-size:38px;line-height:36px;letter-spacing:-1.6px}
.lgrid__stat span{font-weight:400;font-size:12.5px;line-height:18px;color:rgba(242,241,237,.6)}

@media (max-width:1199.98px){
  .ints{grid-template-columns:1fr;gap:36px}
  .ints__copy{max-width:none}
  .ints__title{font-size:28px;line-height:35px}
}
@media (max-width:809.98px){
  .lgrid{grid-template-columns:repeat(2,1fr);border-radius:var(--r-md)}
  .lgrid li{min-height:104px;padding:18px}
  .lgrid img{max-width:78px;max-height:32px}
  .lgrid__stat b{font-size:36px;line-height:36px}
  .ints__title{font-size:24px;line-height:31px}
}

/* ==========================================================================
   No-API banner — Ramp-style: copy left, button right, gradient wash
   ========================================================================== */
.noapi{
  position:relative;overflow:hidden;flex-direction:row!important;align-items:center;
  gap:48px;padding:40px 44px!important;border-radius:var(--r-lg);
  background:#ffffff;border:1px solid var(--line);
}
.noapi__wash{
  position:absolute;right:0;top:0;bottom:0;width:52%;pointer-events:none;
  background:
    repeating-linear-gradient(112deg,
      rgba(16,16,16,.07) 0px, rgba(16,16,16,.07) 1px,
      rgba(16,16,16,0) 1px, rgba(16,16,16,0) 13px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#101010 78%);
          mask-image:linear-gradient(90deg,transparent,#101010 78%);
  opacity:.9;
}
.noapi__copy{position:relative;flex:1 1 auto;display:flex;flex-direction:column;gap:12px;max-width:62ch}
.noapi__title{font-weight:400;font-size:30px;line-height:36px;letter-spacing:-.7px;color:var(--ink)}
.noapi__copy>p{font-weight:400;font-size:17px;line-height:27px;color:var(--muted)}
.noapi__flow{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px}
.noapi__flow li{
  position:relative;display:flex;align-items:center;gap:10px;
  font-weight:400;font-size:15px;color:var(--ink-nav);
}
.noapi__flow li+li::before{
  content:"";position:absolute;left:-18px;top:50%;width:8px;height:1px;background:rgba(16,16,16,.25);
}
.noapi__flow i{
  font-style:normal;font-weight:450;font-size:12px;letter-spacing:.8px;color:var(--green-deep);
}
.btn--ink{background:var(--ink-nav);color:#ffffff;padding:14px 26px;white-space:nowrap;position:relative}
.btn--ink:hover{background:#101010}

@media (max-width:1199.98px){
  .noapi{flex-direction:column!important;align-items:flex-start;gap:28px;padding:32px!important}
  .noapi__wash{width:100%;height:46%;top:auto;bottom:0;
    -webkit-mask-image:linear-gradient(0deg,#101010,transparent 82%);
            mask-image:linear-gradient(0deg,#101010,transparent 82%)}
}
@media (max-width:809.98px){
  .noapi{padding:24px!important;gap:22px}
  .noapi__title{font-size:24px;line-height:30px}
  .noapi__copy>p{font-size:15px;line-height:24px}
  .noapi__flow{gap:8px 22px}
}

/* ==========================================================================
   Platform bento — Ramp card language
   ========================================================================== */
.bento .tile{
  background:#f2f1ed;border:0;border-radius:var(--r-lg);
  padding:34px 34px 36px;
  transition:background .3s var(--ease);
}
.bento .tile:hover{background:#f2f1ed}
.tile__title{
  font-weight:400;font-size:27px;line-height:34px;letter-spacing:-.6px;
  color:var(--muted);max-width:22ch;
}
.tile__title b{font-weight:400;color:var(--ink)}
.tile__go{
  position:absolute;right:22px;top:22px;width:38px;height:38px;border-radius:var(--r-md);
  background:#ffffff;color:var(--ink-nav);display:flex;align-items:center;justify-content:center;
  font-size:15px;box-shadow:0 2px 8px -6px rgba(16,16,16,.5);
  transition:transform .3s var(--ease-out),background .3s var(--ease);
}
.bento .tile:hover .tile__go{transform:translate(2px,-2px);background:var(--ink-nav);color:#ffffff}
.bento .tile__head{align-items:flex-start}
.bento .bullets li,.bento .channels-mini strong{color:var(--ink)}
.bento .bullets li{font-size:17px}
.channels-mini svg{background:#ffffff;border:0;box-shadow:0 2px 8px -6px rgba(16,16,16,.4);border-radius:var(--r-md)}

/* integrations panel keeps the same card language */
.tile--ints{padding:0!important;background:transparent!important}
.tile--ints:hover{background:transparent!important}

@media (max-width:809.98px){
  .bento .tile{padding:24px;border-radius:var(--r-md)}
  .tile__title{font-size:22px;line-height:29px}
  .tile__go{width:32px;height:32px;right:16px;top:16px;font-size:13px}
}

/* ==========================================================================
   Bento visuals — animation instead of bullet lists
   ========================================================================== */
.viz{margin-top:auto;background:#ffffff;border-radius:var(--r-md);padding:20px;box-shadow:0 1px 3px -2px rgba(16,16,16,.25)}

/* 1 · channels: an active pill travels, waveform reacts */

/* 2 · workflow: a pulse runs down the chain, each step ticks */

@keyframes flowLit{0%,8%{border-color:var(--line);background:#ffffff}14%,52%{border-color:rgba(0,181,133,.55);background:rgba(0,181,133,.045)}62%,100%{border-color:var(--line);background:#ffffff}}

@keyframes flowTick{0%,12%{background-size:0;border-color:rgba(16,16,16,.2)}22%,100%{background-size:100%;border-color:var(--green)}}

/* 3 · governance: role toggles switch on in sequence */

@keyframes govBg{0%,10%{background:rgba(16,16,16,.14)}20%,78%{background:var(--green)}88%,100%{background:rgba(16,16,16,.14)}}
@keyframes govKnob{0%,10%{transform:translateX(0)}20%,78%{transform:translateX(16px)}88%,100%{transform:translateX(0)}}

/* 4 · observability: bars breathe */

/* 5 · QA: suites go from running to passed */

@keyframes qaRun{0%,6%{transform:translateX(-100%)}30%,82%{transform:translateX(0)}94%,100%{transform:translateX(-100%)}}
@keyframes qaLabel{0%,26%{opacity:0}34%,82%{opacity:1}92%,100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .chan li,.chan svg,.chan b,.wavebar i,.flow li,.flow i,.gov i,.gov i::after,.bars i,.qa i::before,.qa i::after{animation:none}
  .flow i{background-size:100%;border-color:var(--green)}
  .gov i{background:var(--green)} .gov i::after{transform:translateX(16px)}
  .qa i::before{transform:none} .qa i::after{opacity:1}
}
@media (max-width:809.98px){
  .viz{padding:16px}
  .chan li{padding:10px 2px}
  .chan b{font-size:12px}
  .bars{height:92px}
}

/* --- Bento contrast fix: white cards on beige, grey visual panels ---------- */
.bento .tile{background:#ffffff;border:1px solid rgba(16,16,16,.08)}
.bento .tile:hover{background:#ffffff}
.viz{background:#f7f6f2;border:1px solid var(--line);box-shadow:none}

@keyframes govBg{0%,10%{background:rgba(16,16,16,.16)}20%,78%{background:var(--green)}88%,100%{background:rgba(16,16,16,.16)}}
.tile--ints{border:0!important}

/* --- Hero stack: Pallet-style spring in, older cards recede ---------------- */
.ha__card{
  transform:translateY(30px) scale(.97);
  transition:opacity .6s var(--ease-out),transform .7s var(--ease-out);
}
.ha__card.is-in{opacity:1;transform:none}
.ha__track .ha__card:not(:last-child){opacity:.55;transform:scale(.985);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.ha__track .ha__card:nth-last-child(3){opacity:.3}
.ha__track .ha__card:nth-last-child(n+4){opacity:.16}

/* ==========================================================================
   Platform bento v2 — packed but pretty (Thomas: don't trim, make it nicer)
   Borrowed from Ramp: dotted texture, two-tone heads, visuals bleeding off
   the card edge; from Cooper: dense capability lists that show breadth.
   ========================================================================== */
.bento .tile{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  padding:32px 32px 0;gap:20px;
}
/* dotted texture, Ramp-style */
.bento .tile::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(16,16,16,.16) 1px,transparent 1px);
  background-size:19px 19px;
  -webkit-mask-image:radial-gradient(120% 80% at 78% 6%,#101010 0%,transparent 62%);
          mask-image:radial-gradient(120% 80% at 78% 6%,#101010 0%,transparent 62%);
  opacity:.5;
}
.bento .tile>*{position:relative}

/* capability lists — the breadth signal */
.caplist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.caplist li{display:flex;flex-direction:column;gap:2px}
.caplist b{font-weight:450;font-size:15px;line-height:21px;color:var(--ink)}
.caplist em{font-style:normal;font-weight:400;font-size:13.5px;line-height:19px;color:var(--muted)}
.caplist--2{display:flex;flex-direction:column;gap:0}
.caplist--2 li{padding:0 0 0 24px;border-top:1px solid var(--line);
  grid-template-rows:0fr;display:grid;opacity:0;
  transition:grid-template-rows .7s var(--ease-out),opacity .3s linear}
.caplist--2 li>b{overflow:hidden;padding:11px 0;font-size:15.5px;line-height:22px}
.caplist--2 li:first-child{border-top:0}
.reveal.is-in .caplist--2 li,.is-lit .caplist--2 li{grid-template-rows:1fr;opacity:1}
.caplist--2 li:nth-child(1){transition-delay:.00s}
.caplist--2 li:nth-child(2){transition-delay:.07s}
.caplist--2 li:nth-child(3){transition-delay:.14s}
.caplist--2 li:nth-child(4){transition-delay:.21s}
.caplist--2 li:nth-child(5){transition-delay:.28s}
.caplist--2 li:nth-child(6){transition-delay:.35s}
.caplist--tight{gap:9px}
.caplist--tight b{font-size:14.5px}
.caplist--tight li::before{
  content:"";width:5px;height:5px;background:var(--green-deep);border-radius:1px;
  position:absolute;margin-left:-14px;margin-top:8px;
}
.caplist--2 li::before{
  content:"";width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.4 7.4l3 2.9 6.2-6.6' fill='none' stroke='%23007a57' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
  position:absolute;left:0;top:15px;
}
.caplist--tight li{padding-left:14px;position:relative}
.caplist--2 li{position:relative}

/* visuals bleed past the card edge instead of sitting in a box */
.viz--bleed{
  margin:auto -32px 0;border-radius:0;border:0;border-top:1px solid rgba(16,16,16,.07);
  background:#f7f6f2;padding:20px 32px 24px;
}
.wf2{display:grid;grid-template-columns:0.92fr 1.08fr;gap:28px;align-items:start;padding-bottom:32px}
.wf2 .viz{margin:0;background:#f7f6f2;border:1px solid var(--line);border-radius:var(--r-md)}

.tile--conv .caplist{margin-bottom:2px}
.tile--conv .viz--bleed .chan{margin-bottom:14px}

.viz--gov,.viz--qa{padding-bottom:26px}

@media (max-width:1199.98px){
  .wf2{grid-template-columns:1fr;gap:22px}
}
@media (max-width:809.98px){
  .bento .tile{padding:22px 22px 0;border-radius:var(--r-md)}
  .viz--bleed{margin:4px -22px 0;padding:16px 22px 20px}
  .caplist--2{grid-template-columns:1fr}
  .wf2{padding-bottom:22px}
}

/* ==========================================================================
   Hero backdrop — soft mist + dashed arcs (Ramp-style, in Strada's palette)
   ========================================================================== */
.mist{
  position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#101010 18%,#101010 74%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#101010 18%,#101010 74%,transparent 100%);
}
.mist i{position:absolute;display:block;border-radius:50%;filter:blur(72px)}
.mist i:nth-child(1){
  width:54vw;height:40vw;left:-10vw;top:-12vw;opacity:.9;
  background:radial-gradient(circle at 40% 40%,rgba(222,220,214,.95),rgba(222,220,214,0) 68%);
  animation:mistA 34s var(--ease) infinite;
}
.mist i:nth-child(2){
  width:46vw;height:38vw;right:-8vw;top:-6vw;opacity:.8;
  background:radial-gradient(circle at 50% 50%,rgba(201,198,191,.85),rgba(201,198,191,0) 70%);
  animation:mistB 41s var(--ease) infinite;
}
.mist i:nth-child(3){
  width:60vw;height:34vw;left:22%;bottom:-16vw;opacity:.85;
  background:radial-gradient(circle at 50% 40%,rgba(201,198,191,.9),rgba(201,198,191,0) 70%);
  animation:mistC 37s var(--ease) infinite;
}
.mist i:nth-child(4){
  width:34vw;height:30vw;right:14%;bottom:-6vw;opacity:.7;
  background:radial-gradient(circle at 50% 50%,rgba(201,198,191,.85),rgba(201,198,191,0) 70%);
  animation:mistD 29s var(--ease) infinite;
}
.mist i:nth-child(5){
  width:30vw;height:26vw;left:8%;top:34%;opacity:.75;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%);
  animation:mistE 45s var(--ease) infinite;
}
@keyframes mistA{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(6vw,3vw,0) scale(1.16)}}
@keyframes mistB{0%,100%{transform:translate3d(0,0,0) scale(1.08)}50%{transform:translate3d(-5vw,5vw,0) scale(.92)}}
@keyframes mistC{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-7vw,-3vw,0) scale(1.2)}}
@keyframes mistD{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(4vw,-4vw,0) scale(1.25)}}
@keyframes mistE{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(8vw,4vw,0) scale(1.3)}}

/* dashed concentric arcs, bottom-right */
.arcs{
  position:absolute;right:0;bottom:0;width:62%;height:78%;z-index:0;pointer-events:none;
  color:rgba(16,16,16,.22);
  -webkit-mask-image:radial-gradient(90% 90% at 100% 100%,#101010 12%,transparent 76%);
          mask-image:radial-gradient(90% 90% at 100% 100%,#101010 12%,transparent 76%);
  animation:arcsDrift 26s var(--ease) infinite;
}
@keyframes arcsDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(-14px,-10px)}}

@media (prefers-reduced-motion:reduce){.mist i,.arcs{animation:none}}
@media (max-width:809.98px){
  .arcs{width:100%;height:56%}
  .mist i{filter:blur(52px)}
}

/* --- Hero: the Routes pattern replaces the plain contour band ------------- */
.routefield{
  position:absolute;left:0;right:0;bottom:0;height:74%;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#101010 26%,#101010 76%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#101010 26%,#101010 76%,transparent 100%);
}
.routefield canvas{display:block;width:100%;height:100%}
@media (max-width:809.98px){.routefield{height:56%}}

/* statement band uses the same pattern, light on deep green */
.routefield--dark{position:absolute;inset:0;height:100%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#101010 22%,#101010 78%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#101010 22%,#101010 78%,transparent 100%);
}

/* --- Results as a table of figures (label left, number right) --------------- */
.figs{display:flex;flex-direction:column}
.fig{display:grid;grid-template-columns:1fr auto;align-items:center;gap:40px;
  padding:38px 0 34px;border-top:1px solid var(--line);position:relative}
.fig:last-child{border-bottom:1px solid var(--line)}
.fig__label h3{font-weight:400;font-size:22px;line-height:28px;letter-spacing:-.4px;color:var(--ink)}
.fig__label p{margin-top:6px;font-weight:400;font-size:16px;line-height:24px;color:var(--muted)}
.fig__num{font-weight:250;font-size:88px;line-height:80px;letter-spacing:-4px;color:var(--ink);
  font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
@media (max-width:809.98px){
  .fig{grid-template-columns:1fr;gap:14px;padding:26px 0 24px}
  .fig__num{text-align:left;font-size:60px;line-height:56px;letter-spacing:-2.4px}
}

/* --- Agentic workflow: a run that actually completes, on a loop ------------- */

.wfrun__top{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.wfrun__top b{font-weight:450;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.wfrun__live{display:inline-flex;align-items:center;gap:8px;font-weight:450;font-size:12.5px;color:var(--green-deep)}
.wfrun__live i{position:relative;width:7px;height:7px;border-radius:50%;background:var(--green);flex:0 0 7px}
.wfrun__live i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--green);
  animation:wfPing 2.4s var(--ease-out) infinite}

.wfrun__steps{list-style:none;margin:0;padding:16px 0 4px 26px;position:relative;
  display:flex;flex-direction:column;gap:0;flex:1 1 auto}
/* the rail the request runs down */
.wfrun__steps::before{content:"";position:absolute;left:6px;top:24px;bottom:22px;width:1px;background:var(--line)}
.wfrun__steps::after{content:"";position:absolute;left:6px;top:24px;width:1px;height:0;
  background:linear-gradient(180deg,rgba(0,181,133,0),var(--green));
  animation:wfRail 9s var(--ease) infinite}

.wfrun__steps li{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:9px 0;animation:wfStep 9s linear infinite;animation-delay:calc(var(--i) * 1.25s)}
.wfrun__steps li em{font-style:normal;font-weight:450;font-size:14px;line-height:20px;color:var(--ink)}
.wfrun__steps li span{font-weight:400;font-size:12px;line-height:18px;color:var(--muted);white-space:nowrap}
.wfrun__steps li::before{content:"";position:absolute;left:-23px;top:12px;width:9px;height:9px;border-radius:50%;
  background:#ffffff;border:1px solid var(--line);box-shadow:0 0 0 3px #ffffff}
.wfrun__steps li::after{content:"";position:absolute;left:-23px;top:12px;width:9px;height:9px;border-radius:50%;
  background:var(--green);transform:scale(0);box-shadow:0 0 0 3px #ffffff;
  animation:wfDot 9s var(--ease-out) infinite;animation-delay:calc(var(--i) * 1.25s)}

.wfrun__foot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:13px;border-top:1px solid var(--line)}
.wfrun__foot span{font-weight:400;font-size:12.5px;color:var(--muted)}
.wfrun__foot b{font-weight:450;font-size:12.5px;color:var(--green-deep);font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .wfrun__steps li,.wfrun__steps li::after,.wfrun__steps::after,.wfrun__live i::after{animation:none}
  .wfrun__steps li{opacity:1}
  .wfrun__steps li::after{transform:scale(1)}
  .wfrun__steps::after{height:calc(100% - 46px)}
}

/* --- Agent graph: the run assembles itself, then clears --------------------- */
.agraph{position:relative;display:flex;flex-direction:column;align-items:center;
  padding:6px 0 2px;--loop:9.5s}
.agraph [style*="--d"]{animation-delay:var(--d)}

.agraph__node,.agraph__lead,.agraph__subs>div,.agraph__io{
  opacity:0;transform:translateY(8px);animation:agIn var(--loop) var(--ease-out) infinite}
@keyframes agIn{0%,3%{opacity:0;transform:translateY(8px)}9%,88%{opacity:1;transform:none}
  94%,100%{opacity:0;transform:translateY(8px)}}

.agraph__trig{background:var(--ink-nav);color:#ffffff;border-radius:var(--r-sm);padding:7px 14px;
  font-weight:450;font-size:12.5px;letter-spacing:.1px}

.agraph__wire{display:block;width:1px;border-left:1px dashed rgba(16,16,16,.28);
  height:0;animation:agWire var(--loop) var(--ease) infinite}
.agraph__wire--a{--h:20px}
.agraph__wire--b{--h:18px}
@keyframes agWire{0%,3%{height:0}10%,88%{height:var(--h)}94%,100%{height:0}}

.agraph__lead{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;
  background:#ffffff;border:1px solid var(--line);border-radius:var(--r-md);padding:12px 22px;min-width:190px}
.agraph__lead b{font-weight:450;font-size:14px;line-height:19px;color:var(--ink)}
.agraph__lead em{font-style:normal;font-weight:400;font-size:11.5px;line-height:16px;color:var(--muted)}
.agraph__mark{width:22px;height:22px;border-radius:var(--r-sm);margin-bottom:4px;
  background:radial-gradient(120% 120% at 30% 20%,#0f4a38,#06251c)}

.agraph__bar{display:block;width:74%;height:1px;border-top:1px dashed rgba(16,16,16,.28);
  transform:scaleX(0);animation:agBar var(--loop) var(--ease) infinite}
@keyframes agBar{0%,3%{transform:scaleX(0)}12%,88%{transform:scaleX(1)}94%,100%{transform:scaleX(0)}}

.agraph__subs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;margin-top:2px}
.agraph__subs>div{display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  background:#ffffff;border:1px solid var(--line);border-radius:var(--r-md);padding:10px 11px}
.agraph__subs b{font-weight:450;font-size:12.5px;line-height:17px;color:var(--ink)}
.agraph__subs em{font-style:normal;font-weight:400;font-size:12px;line-height:15px;color:var(--muted)}
.agraph__dot{width:7px;height:7px;border-radius:50%;background:var(--line);margin-bottom:6px;
  animation:agDone var(--loop) var(--ease-out) infinite;animation-delay:inherit}
@keyframes agDone{0%,26%{background:rgba(16,16,16,.16);transform:scale(1)}
  32%,88%{background:#00b585;transform:scale(1.18)}94%,100%{background:rgba(16,16,16,.16);transform:scale(1)}}

.agraph__io{display:flex;align-items:center;gap:7px;margin-top:16px;padding-top:14px;
  width:100%;border-top:1px solid var(--line);justify-content:center}
.agraph__io span{width:26px;height:26px;border-radius:var(--r-sm);background:var(--bg);border:1px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:450;font-size:10px;letter-spacing:.3px;color:var(--muted)}
.agraph__io b{font-weight:450;font-size:11.5px;color:var(--muted);margin-left:4px}

@media (max-width:809.98px){
  .agraph__subs{grid-template-columns:1fr;gap:6px}
  .agraph__drops,.agraph__bar{display:none}
}
@media (prefers-reduced-motion:reduce){
  .agraph *,.agraph{animation:none!important}
  .agraph__node,.agraph__lead,.agraph__subs>div,.agraph__io{opacity:1;transform:none}
  .agraph__wire--a{height:20px}.agraph__wire--b{height:18px}
  .agraph__bar{transform:scaleX(1)}.agraph__drops i{height:14px}
  .agraph__dot{background:#00b585}
}

/* restored: the branch drops in the agent graph */
.agraph__drops{width:74%;display:flex;justify-content:space-between;height:14px}
.agraph__drops i{display:block;width:1px;border-left:1px dashed rgba(16,16,16,.28);height:0;
  animation:agDrop var(--loop) var(--ease) infinite;animation-delay:inherit}
@keyframes agDrop{0%,3%{height:0}13%,88%{height:14px}94%,100%{height:0}}

/* ═══ Bento visuals, all on one 9.5s breath and two greens ═══════════════════ */
.live,.perm,.chart,.run{--loop:9.5s;display:flex;flex-direction:column;height:100%}

/* --- 1 · Conversational: a call being answered ------------------------------ */
.live__tabs{position:relative;display:grid;grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--line);margin-bottom:20px}
.live__tabs span{display:flex;flex-direction:column;align-items:center;gap:7px;padding:4px 0 13px;
  font-weight:450;font-size:12.5px;color:var(--muted);
  animation:liveTab var(--loop) linear infinite;animation-delay:calc(var(--i) * 2.375s)}
.live__tabs svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@keyframes liveTab{0%,1%{color:var(--muted)}3%,24%{color:var(--green-deep)}26%,100%{color:var(--muted)}}
.live__ink{position:absolute;left:0;bottom:-1px;width:25%;height:2px;background:var(--green);
  animation:liveInk var(--loop) var(--ease) infinite}
@keyframes liveInk{0%,22%{transform:translateX(0)}25%,47%{transform:translateX(100%)}
  50%,72%{transform:translateX(200%)}75%,97%{transform:translateX(300%)}100%{transform:translateX(0)}}

.live__wave{display:flex;align-items:center;gap:3px;height:44px;flex:1 1 auto}
.live__wave i{flex:1;border-radius:1px;background:rgba(0,181,133,.32);height:16%;
  transform-origin:center;animation:liveWave 2.6s var(--ease) infinite;
  animation-delay:calc(var(--i) * -0.108s)}
@keyframes liveWave{0%,100%{height:16%;background:rgba(0,181,133,.32)}
  46%{height:88%;background:var(--green)}}
.live__foot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-top:16px;padding-top:13px;border-top:1px solid var(--line)}
.live__foot span{font-weight:400;font-size:12.5px;color:var(--muted)}
.live__foot b{font-weight:450;font-size:12.5px;color:var(--green-deep);font-variant-numeric:tabular-nums}

/* --- 2 · Governance: who may do what --------------------------------------- */
.perm__head,.perm__row{display:grid;grid-template-columns:1fr repeat(3,44px);align-items:center;gap:8px}
.perm__head{padding-bottom:11px;border-bottom:1px solid var(--line)}
.perm__head b{font-weight:450;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--muted);text-align:center}
.perm__row{padding:13px 0;border-bottom:1px solid var(--line);
  opacity:0;animation:permRow var(--loop) var(--ease-out) infinite;
  animation-delay:calc(var(--i) * .28s)}
@keyframes permRow{0%,4%{opacity:0;transform:translateY(6px)}10%,90%{opacity:1;transform:none}
  96%,100%{opacity:0;transform:translateY(6px)}}
.perm__row span{font-weight:450;font-size:14px;color:var(--ink)}
.perm__row i{justify-self:center;width:16px;height:16px;border-radius:50%;
  background:rgba(16,16,16,.06);position:relative}
.perm__row i::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:rgba(16,16,16,.22);width:6px;height:1.5px;margin:auto;border-radius:1px}
.perm__row i.is-on{background:var(--green)}
.perm__row i.is-on::after{width:100%;height:100%;margin:0;border-radius:50%;background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.8 8.3l2.1 2 4.3-4.4' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.perm__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:15px}
.perm__foot span{font-weight:400;font-size:12.5px;color:var(--muted)}
.perm__foot b{font-weight:450;font-size:11.5px;letter-spacing:.2px;color:var(--green-deep);
  background:rgba(0,181,133,.12);border-radius:var(--r-sm);padding:5px 12px;
  opacity:0;animation:permPill var(--loop) var(--ease-out) infinite}
@keyframes permPill{0%,26%{opacity:0;transform:translateY(5px)}33%,90%{opacity:1;transform:none}
  96%,100%{opacity:0;transform:translateY(5px)}}

/* --- 3 · Observability: a chart being read --------------------------------- */
.chart__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:18px}
.chart__top span{font-weight:400;font-size:12.5px;color:var(--muted)}
.chart__top b{font-weight:450;font-size:20px;letter-spacing:-.4px;color:var(--ink);font-variant-numeric:tabular-nums}
.chart__plot{display:flex;align-items:flex-end;gap:5px;height:104px;flex:1 1 auto;
  border-bottom:1px solid var(--line);padding-bottom:1px}
.chart__plot i{flex:1;border-radius:2px 2px 0 0;height:calc(var(--h) * 100%);
  background:rgba(0,181,133,.26);
  animation:chartScan var(--loop) linear infinite;animation-delay:calc(var(--i) * .22s)}
@keyframes chartScan{0%,3%{background:rgba(0,181,133,.26)}6%,10%{background:var(--green)}
  14%,100%{background:rgba(0,181,133,.26)}}
.chart__axis{display:flex;justify-content:space-between;margin-top:11px}
.chart__axis span{font-weight:400;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}

/* --- 4 · Testing & QA: a suite that finishes -------------------------------- */
.run__top{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:13px;border-bottom:1px solid var(--line)}
.run__top b{font-weight:450;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.run__live{display:inline-flex;align-items:center;gap:8px;font-weight:450;font-size:12.5px;color:var(--green-deep)}
.run__live i{position:relative;width:7px;height:7px;border-radius:50%;background:var(--green);flex:0 0 7px}
.run__live i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--green);
  animation:runPing 2.4s var(--ease-out) infinite}
@keyframes runPing{0%{transform:scale(.6);opacity:.9}70%{transform:scale(2);opacity:0}100%{opacity:0}}
.run__list{list-style:none;margin:0;padding:0;flex:1 1 auto}
.run__list li{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 0;border-bottom:1px solid var(--line)}
.run__list em{font-style:normal;font-weight:400;font-size:14px;color:#4a4842}
.run__st{position:relative;width:52px;height:20px;border-radius:var(--r-sm);flex:0 0 52px;
  background:rgba(16,16,16,.05);
  animation:runChip var(--loop) var(--ease-out) infinite;animation-delay:calc(var(--i) * 1.1s)}
.run__st::after{content:"PASS";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-weight:450;font-size:9.5px;letter-spacing:.7px;color:#ffffff;opacity:0;
  animation:runChipTxt var(--loop) linear infinite;animation-delay:calc(var(--i) * 1.1s)}
@keyframes runChip{0%,18%{background:rgba(16,16,16,.05)}24%,90%{background:var(--green)}
  96%,100%{background:rgba(16,16,16,.05)}}
@keyframes runChipTxt{0%,20%{opacity:0}26%,90%{opacity:1}96%,100%{opacity:0}}
.run__foot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:auto;padding-top:15px}
.run__foot span{font-weight:400;font-size:12.5px;color:var(--muted)}
.run__foot b{font-weight:450;font-size:12.5px;color:var(--green-deep);font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .live__tabs span,.live__ink,.live__wave i,.perm__row,.perm__foot b,
  .chart__plot i,.run__st,.run__st::after,.run__live i::after{animation:none!important}
  .perm__row,.perm__foot b{opacity:1;transform:none}
  .live__wave i{height:44%}
  .run__st{background:var(--green)}.run__st::after{opacity:1}
}

/* --- Integrations: the five kinds of system, then who they are -------------- */
.ints__kinds{list-style:none;margin:4px 0 4px;padding:0;display:flex;flex-direction:column}
.ints__kinds li{padding:10px 0;border-top:1px solid var(--line);
  font-weight:400;font-size:15px;line-height:21px;color:#4a4842}
.ints__kinds li:first-child{border-top:0;padding-top:0}
.lg--name{display:flex;align-items:center;justify-content:center}
.lg--name b{font-weight:450;font-size:15px;letter-spacing:-.1px;color:#4a4842;white-space:nowrap}
@media (max-width:809.98px){
  .ints__kinds li{font-size:14px;padding:8px 0}
}

/* the channel description lives in the animation, so the list above can go */
.live__say{position:relative;height:52px;margin-bottom:6px}
.live__say span{position:absolute;left:0;top:0;right:0;opacity:0;
  font-weight:400;font-size:15px;line-height:22px;color:var(--muted);
  animation:liveSay var(--loop) var(--ease-out) infinite;
  animation-delay:calc(var(--i) * 2.375s)}
.live__say b{display:block;font-weight:450;font-size:19px;line-height:25px;letter-spacing:-.2px;color:var(--ink);margin-bottom:3px}
@keyframes liveSay{0%{opacity:0;transform:translateY(6px)}
  3%,22%{opacity:1;transform:none}25%,100%{opacity:0;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){
  .live__say span{animation:none;opacity:0;transform:none}
  .live__say span:first-child{opacity:1}
}

/* --- caplists: hairline rows that cascade, same as the workflow tile ------- */
.caplist--tight{gap:0}
.caplist--tight li{display:grid;grid-template-rows:0fr;padding:0;opacity:0;
  border-top:1px solid var(--line);
  transition:grid-template-rows .7s var(--ease-out),opacity .3s linear}
.caplist--tight li:first-child{border-top:0}
.caplist--tight li::before{display:none}
.caplist--tight li>div{overflow:hidden;padding:12px 0;
  font-weight:400;font-size:15px;line-height:22px;color:#4a4842}
.reveal.is-in .caplist--tight li{grid-template-rows:1fr;opacity:1}
.caplist--tight li:nth-child(1){transition-delay:0s}
.caplist--tight li:nth-child(2){transition-delay:.07s}
.caplist--tight li:nth-child(3){transition-delay:.14s}
.caplist--tight li:nth-child(4){transition-delay:.21s}
@media (prefers-reduced-motion:reduce){
  .caplist--tight li{grid-template-rows:1fr;opacity:1;transition:none}
}

/* --- No API: a browser agent working a carrier portal ---------------------- */
.noapi{gap:56px!important;align-items:stretch!important}
.noapi__copy{flex:1 1 52%;justify-content:center;gap:14px!important;max-width:none!important}
.noapi__copy .btn{align-self:flex-start;margin-top:6px}
.noapi__say{position:relative;height:26px;margin-top:4px}
.noapi__say span{position:absolute;left:0;top:0;display:flex;align-items:baseline;gap:10px;opacity:0;
  font-weight:450;font-size:15px;line-height:22px;color:var(--ink);white-space:nowrap}
.noapi__say i{font-style:normal;font-weight:450;font-size:12px;letter-spacing:1.2px;color:var(--green-deep)}
.noapi__say .s1{animation:say1 var(--nl) var(--ease-out) infinite}
.noapi__say .s2{animation:say2 var(--nl) var(--ease-out) infinite}
.noapi__say .s3{animation:say3 var(--nl) var(--ease-out) infinite}
@keyframes say1{0%{opacity:0;transform:translateY(5px)}3%,22%{opacity:1;transform:none}26%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes say2{0%,26%{opacity:0;transform:translateY(5px)}30%,50%{opacity:1;transform:none}55%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes say3{0%,55%{opacity:0;transform:translateY(5px)}59%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateY(-4px)}}

.noapi{--nl:9.5s}
.brw{flex:1 1 48%;display:flex;flex-direction:column;min-width:0;
  background:#ffffff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.brw__bar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--bg)}
.brw__bar i{width:8px;height:8px;border-radius:50%;background:rgba(16,16,16,.14)}
.brw__bar span{margin-left:10px;font-weight:400;font-size:11.5px;color:var(--muted)}
.brw__body{position:relative;flex:1 1 auto;padding:18px 18px 20px;display:flex;flex-direction:column;gap:12px}
.brw__body label{display:flex;flex-direction:column;gap:6px;
  font-weight:400;font-size:11.5px;color:var(--muted)}
.brw__body label b{display:block;height:30px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:linear-gradient(90deg,rgba(16,16,16,.13) 0 100%) no-repeat 10px center/0 8px}
.brw__body .f1{animation:brwType var(--nl) steps(14) infinite}
.brw__body .f2{animation:brwType2 var(--nl) steps(12) infinite}
@keyframes brwType{0%,7%{background-size:0 8px}19%,92%{background-size:96px 8px}97%,100%{background-size:0 8px}}
@keyframes brwType2{0%,27%{background-size:0 8px}38%,92%{background-size:72px 8px}97%,100%{background-size:0 8px}}

.brw__btn{align-self:flex-start;margin-top:2px;background:var(--ink-nav);color:#ffffff;border-radius:var(--r-sm);
  padding:9px 18px;font-weight:450;font-size:12.5px;
  animation:brwPress var(--nl) var(--ease-out) infinite}
@keyframes brwPress{0%,46%{transform:scale(1)}49%{transform:scale(.94)}53%,100%{transform:scale(1)}}

.brw__cursor{position:absolute;left:0;top:0;width:13px;height:17px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 17'%3E%3Cpath d='M1 1l10.5 8-4.6.7 2.6 5-2.2 1-2.6-5L1 14V1Z' fill='%23ffffff' stroke='%23101010' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
  animation:brwCursor var(--nl) var(--ease) infinite}
@keyframes brwCursor{
  0%,8%{transform:translate(88px,46px)}
  22%{transform:translate(88px,46px)}
  30%,40%{transform:translate(74px,110px)}
  48%,92%{transform:translate(58px,168px)}
  100%{transform:translate(88px,46px)}}

.brw__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 16px;border-top:1px solid var(--line);
  opacity:0;animation:brwFoot var(--nl) var(--ease-out) infinite}
@keyframes brwFoot{0%,54%{opacity:0}60%,92%{opacity:1}97%,100%{opacity:0}}
.brw__foot b{font-weight:450;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.brw__rec{display:inline-flex;align-items:center;gap:8px;font-weight:450;font-size:11.5px;color:var(--green-deep)}
.brw__rec i{width:7px;height:7px;border-radius:50%;background:var(--green);flex:0 0 7px}

@media (max-width:1199.98px){
  .noapi{flex-direction:column!important;gap:32px!important}
  .noapi__copy,.brw{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){
  .noapi__say span,.brw__body b,.brw__btn,.brw__cursor,.brw__foot{animation:none!important}
  .noapi__say span{opacity:0}.noapi__say .s1{opacity:1}
  .brw__body b{background-size:96px 8px}
  .brw__cursor{transform:translate(58px,168px)}
  .brw__foot{opacity:1}
}

/* ═══ Control: numbered rows that open, one stage that answers them ═════════ */
.stk{flex-direction:row!important;align-items:stretch!important;gap:56px!important;padding:40px 44px!important}
.stk__copy{flex:1 1 46%;display:flex;flex-direction:column;gap:0;min-width:0}
.stk__title{font-weight:400;font-size:32px;line-height:38px;letter-spacing:-.8px;color:var(--ink);
  margin:14px 0 26px;max-width:20ch}
.stk__rows{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.stk__row{border-bottom:1px solid var(--line)}
.stk__row > button{display:flex;align-items:center;gap:16px;width:100%;padding:18px 0;
  background:none;border:0;text-align:left;cursor:pointer;font-family:inherit;
  transition:opacity .15s var(--ease-out)}
.stk__row > button:hover{opacity:.62}
.stk__row i{font-style:normal;font-weight:450;font-size:12px;letter-spacing:.6px;color:var(--green-deep);
  flex:0 0 26px;font-variant-numeric:tabular-nums}
.stk__row > button b{flex:1 1 auto;font-weight:450;font-size:19px;line-height:25px;letter-spacing:-.3px;color:var(--ink)}
.stk__row > button u{position:relative;flex:0 0 16px;width:16px;height:16px;text-decoration:none}
.stk__row > button u::before,.stk__row > button u::after{content:"";position:absolute;inset:0;margin:auto;
  background:var(--ink);transition:transform .3s var(--ease),opacity .3s linear}
.stk__row > button u::before{width:14px;height:1px}
.stk__row > button u::after{width:1px;height:14px}
.stk__row.is-open > button u::after{transform:rotate(90deg);opacity:0}
.stk__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.stk__row.is-open .stk__body{grid-template-rows:1fr}
.stk__body>div{overflow:hidden}
.stk__body p{padding:0 0 12px 42px;font-weight:400;font-size:15px;line-height:23px;color:var(--muted);max-width:46ch}
.stk__body ul{list-style:none;margin:0;padding:0 0 20px 42px;display:flex;flex-direction:column;gap:7px}
.stk__body li{position:relative;padding-left:22px;font-weight:400;font-size:14px;line-height:21px;color:#4a4842}
.stk__body li::before{content:"";position:absolute;left:0;top:4px;width:13px;height:13px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.4 7.4l3 2.9 6.2-6.6' fill='none' stroke='%23007a57' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}

.stk__stage{flex:1 1 54%;display:grid;min-width:0;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:26px}
.stk__panel{grid-area:1/1;align-self:center;opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .3s linear,transform .6s var(--ease-out)}
.stk__panel.is-on{opacity:1;transform:none;pointer-events:auto}

/* --- the audit record ------------------------------------------------------ */
.aud,.trace,.gap{background:#ffffff;border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px}
.aud__top,.trace__top,.gap__top{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:13px;border-bottom:1px solid var(--line)}
.aud__top span,.trace__top span{font-weight:450;font-size:12.5px;color:var(--green-deep)}
.aud__top b,.trace__top b,.gap__top b{font-weight:450;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.aud__list{list-style:none;margin:0;padding:6px 0 0}
.aud__list li{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.aud__list em{flex:1 1 auto;font-style:normal;font-weight:400;font-size:14px;line-height:20px;color:#4a4842}
.aud__list span{font-weight:400;font-size:11.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.aud__list i{flex:0 0 15px;width:15px;height:15px;border-radius:50%;background:var(--green);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.8 8.3l2.1 2 4.3-4.4' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:100%;background-position:center;background-repeat:no-repeat}
.aud__list li:last-child i{background-color:rgba(16,16,16,.14);background-image:none}
.aud__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px}
.aud__foot span{font-weight:400;font-size:12.5px;color:var(--muted)}
.aud__foot b{font-weight:450;font-size:13px;color:var(--green-deep)}

/* --- one conversation, traced --------------------------------------------- */
.trace__list{list-style:none;margin:0;padding:14px 0 2px 20px;position:relative}
.trace__list::before{content:"";position:absolute;left:4px;top:22px;bottom:20px;width:1px;background:var(--line)}
.trace__list li{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:9px 0}
.trace__list li::before{content:"";position:absolute;left:-20px;top:14px;width:9px;height:9px;border-radius:50%;
  background:var(--green);box-shadow:0 0 0 3px #ffffff}
.trace__list li:last-child::before{background:var(--green-deep)}
.trace__list em{font-style:normal;font-weight:400;font-size:14px;line-height:20px;color:#4a4842}
.trace__list span{font-weight:450;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}

/* --- a gap the suite found ------------------------------------------------- */
.gap__flag{display:inline-flex;align-items:center;font-weight:450;font-size:12px;letter-spacing:.6px;
  text-transform:uppercase;color:var(--green-deep);background:rgba(0,181,133,.12);border-radius:var(--r-sm);padding:5px 11px}
.gap__q{margin-top:16px;font-weight:400;font-size:18px;line-height:26px;letter-spacing:-.2px;color:var(--ink)}
.gap__a{margin-top:8px;font-weight:400;font-size:13.5px;line-height:20px;color:var(--muted)}
.gap__fix{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.gap__fix span{font-weight:400;font-size:12.5px;color:var(--muted)}
.gap__fix b{font-weight:450;font-size:13px;color:var(--green-deep)}

@media (max-width:1199.98px){
  .stk{flex-direction:column!important;gap:32px!important}
  .stk__copy,.stk__stage{flex:1 1 auto}
}
@media (max-width:809.98px){
  .stk{padding:28px 20px!important}
  .stk__title{font-size:26px;line-height:32px;letter-spacing:-.5px}
  .stk__row > button b{font-size:17px}
  .stk__body p,.stk__body ul{padding-left:26px}
  .stk__stage{padding:18px}
}

/* ═══ Integrations as a connection diagram: systems feed into the layer ═════ */
.hub{--cols:8;--loop:9.5s;position:relative;display:flex;flex-direction:column;align-items:center;min-width:0}
.hub__row{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:10px;width:100%}
.hub__card{display:flex;align-items:center;justify-content:center;min-height:82px;padding:14px 10px;
  background:#ffffff;border:1px solid var(--line);border-radius:var(--r-md);
  transition:border-color .3s var(--ease-out),transform .3s var(--ease-out)}
.hub__card b{font-weight:450;font-size:13px;line-height:17px;letter-spacing:-.1px;color:#4a4842;text-align:center}
.hub__card img{max-width:78px;max-height:26px;object-fit:contain;filter:grayscale(1);opacity:.6}

/* the wires */
.hub__wires{position:relative;width:100%;height:76px}
.hub__drops{position:absolute;inset:0 0 auto;height:34px;
  display:grid;grid-template-columns:repeat(var(--cols),1fr)}
.hub__drops i{position:relative;justify-self:center;width:1px;height:100%;background:var(--line)}
.hub__drops i::after{content:"";position:absolute;left:0;top:0;width:1px;height:14px;
  background:linear-gradient(180deg,rgba(0,181,133,0),var(--green));
  opacity:0;animation:hubDrop var(--loop) var(--ease) infinite;
  animation-delay:calc(var(--i) * .42s)}
@keyframes hubDrop{0%{transform:translateY(-14px);opacity:0}
  4%{opacity:1}14%{transform:translateY(34px);opacity:1}18%,100%{transform:translateY(34px);opacity:0}}

.hub__bus{position:absolute;left:calc(50% / var(--cols));right:calc(50% / var(--cols));top:34px;
  height:1px;background:var(--line)}
.hub__riser{position:absolute;left:50%;top:34px;width:1px;height:42px;background:var(--line);overflow:hidden}
.hub__riser u{position:absolute;left:0;top:0;width:1px;height:18px;text-decoration:none;
  background:linear-gradient(180deg,rgba(0,181,133,0),var(--green));
  animation:hubRise var(--loop) var(--ease) infinite}
@keyframes hubRise{0%,10%{transform:translateY(-18px)}22%{transform:translateY(42px)}
  26%,100%{transform:translateY(42px)}}

/* the layer everything lands in */
.hub__core{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;
  background:#ffffff;border:1px solid var(--line);border-radius:var(--r-md);padding:16px 30px;min-width:210px;
  box-shadow:0 1px 0 rgba(16,16,16,.03)}
.hub__mark{width:30px;height:30px;overflow:hidden;display:flex;align-items:center;margin-bottom:6px}
.hub__mark img{height:30px;width:auto;max-width:none;object-fit:none;object-position:left center}
.hub__core b{font-weight:450;font-size:16px;line-height:21px;color:var(--ink)}
.hub__core em{font-style:normal;font-weight:400;font-size:12.5px;line-height:18px;color:var(--muted)}
.hub__note{margin-top:20px;font-weight:400;font-size:13.5px;line-height:20px;color:var(--muted)}
.hub__note b{font-weight:450;color:var(--ink);font-variant-numeric:tabular-nums}

@media (max-width:1199.98px){
  .hub{--cols:4}
  .hub__row{gap:8px}
  .hub__card:nth-child(n+5){display:none}
}
@media (max-width:809.98px){
  .hub{--cols:3}
  .hub__card:nth-child(n+4){display:none}
  .hub__card{min-height:66px}
  .hub__wires{height:60px}
  .hub__riser{height:26px}
}
@media (prefers-reduced-motion:reduce){
  .hub__drops i::after,.hub__riser u{animation:none;opacity:1;transform:translateY(20px)}
}

/* --- Integrations: copy on top, the diagram across the whole tile ---------- */
.ints{display:flex!important;flex-direction:column;gap:52px;align-items:stretch!important;grid-template-columns:none!important}
.ints__head{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.ints__title{max-width:18ch}
.ints__side{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.ints__side .ints__kinds{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin:0;width:100%}
.ints__side .ints__kinds li{padding:9px 0;border-top:1px solid var(--line)}
.ints__side .ints__kinds li:nth-child(-n+2){border-top:0;padding-top:0}
.linkarrow{overflow:visible}

/* the diagram gets the full width, so seven systems breathe */
.hub__row{gap:14px}
.hub__card{min-height:96px;padding:18px 12px}
.hub__card img{max-width:96px;max-height:30px}
.hub__wires{height:88px}
.hub__drops{height:40px}
.hub__bus,.hub__riser{top:40px}
.hub__riser{height:48px}
@keyframes hubDrop{0%{transform:translateY(-14px);opacity:0}
  4%{opacity:1}14%{transform:translateY(40px);opacity:1}18%,100%{transform:translateY(40px);opacity:0}}
@keyframes hubRise{0%,10%{transform:translateY(-18px)}22%{transform:translateY(48px)}
  26%,100%{transform:translateY(48px)}}

@media (max-width:1199.98px){
  .ints{gap:36px}
  .ints__head{grid-template-columns:1fr;gap:24px}
  .hub{--cols:4}
  .hub__card:nth-child(n+5){display:none}
}
@media (max-width:809.98px){
  .ints__side .ints__kinds{grid-template-columns:1fr}
  .ints__side .ints__kinds li:nth-child(2){border-top:1px solid var(--line);padding-top:9px}
  .hub{--cols:3}
  .hub__card:nth-child(n+4){display:none}
  .hub__card{min-height:72px}
}

/* integrations block gets air above it, and the mark crops to the glyph only */
.tile--ints{padding:64px 0 0!important}
.hub__mark{width:29px;height:30px;flex:0 0 29px;overflow:hidden;display:inline-flex;align-items:center;justify-content:flex-start;margin-bottom:8px}
.hub__mark img{flex:0 0 auto;height:30px;width:auto;max-width:none;object-fit:none;object-position:left center;filter:none;opacity:1}

/* the two full-width blocks under the bento get room to breathe */
.noapi{margin-top:44px}
.noapi__copy{gap:12px!important}
.noapi__say{height:24px;margin:2px 0 0}
.noapi__copy .btn{margin-top:14px}
.brw__body{padding:18px 18px 14px;gap:11px}
.brw__body label b{height:28px}

/* the five kinds read as one even legend row, not a ragged two-column list */
.ints{gap:36px}
.ints__head{display:flex!important;align-items:flex-end;justify-content:space-between;gap:48px;grid-template-columns:none!important}
.ints__title{max-width:22ch;margin:0}
.ints__head .linkarrow{flex:0 0 auto;white-space:nowrap;padding-bottom:6px}
.ints__kinds{display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:0 24px!important;margin:0!important;width:100%}
.ints__kinds li{padding:12px 0 0!important;border-top:1px solid var(--line)!important;
  font-weight:400;font-size:14.5px;line-height:21px;color:#4a4842}
@media (max-width:1199.98px){
  .ints__head{flex-direction:column!important;align-items:flex-start;gap:18px}
  .ints__kinds{grid-template-columns:repeat(3,1fr)!important;gap:0 20px!important}
  .ints__kinds li:nth-child(n+4){margin-top:12px}
}
@media (max-width:809.98px){
  .ints__kinds{grid-template-columns:1fr 1fr!important}
  .ints__kinds li{font-size:13.5px}
  .ints__kinds li:nth-child(n+3){margin-top:10px}
}

/* the No API block is a helper aside, not another content card */
.noapi{
  margin-top:72px!important;
  background:transparent!important;border:0!important;border-top:1px solid var(--line)!important;
  border-radius:0!important;padding:56px 0 8px!important;gap:64px!important;
}
.noapi__copy{padding-right:20px}
.brw{background:#ffffff;box-shadow:0 1px 3px -2px rgba(16,16,16,.2)}
@media (max-width:1199.98px){.noapi{margin-top:52px!important;padding:40px 0 0!important}}

/* the five kinds carry a check instead of a bare rule */
.ints__kinds{gap:14px 20px!important}
.ints__kinds li{position:relative;padding:0 0 0 26px!important;border-top:0!important;
  font-weight:450;font-size:15px;line-height:22px;color:var(--ink);margin-top:0!important}
.ints__kinds li::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;
  background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.8 8.3l2.1 2 4.3-4.4' fill='none' stroke='%23ffffff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}

/* more air between the bento and the integrations diagram */
.tile--ints{padding:120px 0 0!important}
@media (max-width:1199.98px){.tile--ints{padding:80px 0 0!important}}
@media (max-width:809.98px){.tile--ints{padding:56px 0 0!important}}

/* the helper banner should be compact, not a full-height block */
.noapi{align-items:center!important;padding:48px 0 4px!important;gap:56px!important}
.noapi__copy{gap:10px!important;justify-content:flex-start}
.noapi__copy>p{max-width:46ch}
.noapi__say{height:22px;margin:6px 0 0}
.noapi__copy .btn{margin-top:16px}
.brw{flex:0 1 46%;align-self:center}
.brw__body{flex:0 0 auto;padding:16px 16px 14px;gap:10px}
.brw__body label b{height:26px}
.brw__btn{padding:8px 16px}

/* ═══ Testimonials, Harvey-style but light: media cards, quote over the photo ═ */
.tcar__track{gap:24px}
.tcard{
  position:relative;display:block!important;grid-template-columns:none!important;
  flex:0 0 min(1040px,72vw);height:min(560px,62vh);min-height:440px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  cursor:pointer;
  opacity:.34;transform:scale(.965);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
}
.tcard.is-active{opacity:1;transform:none;cursor:default}

.tcard__photo{position:absolute;inset:0;overflow:hidden}
.tcard__photo img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.55) brightness(1.06);transform:scale(1.02)}
.tcard__photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(242,241,237,.90) 0%,rgba(242,241,237,.82) 46%,rgba(242,241,237,.94) 100%)}

.tcard__body{position:relative;z-index:1;display:flex!important;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:0!important;
  height:100%;padding:56px 8% 48px!important;grid-template-rows:none!important}
.tcard__quote{margin:0 0 34px;max-width:20ch!important;
  font-weight:300;font-size:clamp(26px,2.5vw,40px);line-height:1.24;letter-spacing:-1.2px;color:var(--ink)}

.tcard__foot{flex-direction:column!important;align-items:center!important;gap:18px!important}
.tcard__who{align-items:center;gap:0!important}
.tcard__logo{height:26px;max-width:170px;object-position:center;margin:0 0 16px!important;
  filter:grayscale(1);opacity:.72;order:-1}
.tcard__avatar{width:34px;height:34px;margin:0 0 9px!important}
.tcard__who strong{font-weight:450;font-size:15px;line-height:20px;color:var(--ink)}
.tcard__who span{font-weight:400;font-size:13px;line-height:19px;color:var(--muted)}
.tcard__cta{background:transparent!important;color:var(--ink-nav)!important;
  border:1px solid rgba(16,16,16,.28);padding:10px 22px;font-size:14px;border-radius:var(--r-sm)}
.tcard__cta:hover{background:rgba(16,16,16,.05)!important}
.tcard:not(.is-active) .tcard__cta{pointer-events:none}

/* the viewport bleeds past the shell so neighbours peek, like Harvey */
.tcar__viewport{overflow:visible}
.tcar{gap:28px}

@media (max-width:809.98px){
  .tcard{flex:0 0 86vw;height:auto;min-height:0}
  .tcard__body{padding:40px 24px 34px!important}
  .tcard__quote{font-size:23px;letter-spacing:-.6px;margin-bottom:26px;max-width:24ch!important}
  .tcar__track{gap:14px}
}
@media (prefers-reduced-motion:reduce){
  .tcard{transition:none}
}

/* the section closes on its own link, centred under the count */
.ints__head{display:block!important}
.ints__title{max-width:26ch;margin:0}
.hub__more{margin-top:18px;align-self:center}

/* --- the two cards read as one flow: front office hands off to back office -- */
.seg{position:relative}
.seg__card--main{position:relative}
.seg__bridge{display:none}
@media (min-width:1200px){
  /* the columns split (100% - gap) as 1.32 : 1, so the bridge fills exactly the gap */
  .seg__bridge{display:block;position:absolute;left:calc((100% - 20px) * 0.56897);width:20px;top:124px;
    height:1px;background:var(--line);z-index:2;pointer-events:none}
  .seg__bridge::before,.seg__bridge::after{content:"";position:absolute;top:-3px;width:7px;height:7px;border-radius:50%}
  .seg__bridge::before{left:-3px;background:var(--line)}
  .seg__bridge::after{left:-3px;background:var(--green);
    animation:segHop 4.4s var(--ease) infinite}
  @keyframes segHop{0%,8%{transform:translateX(0);opacity:0}
    14%{opacity:1}46%{transform:translateX(20px);opacity:1}
    54%,100%{transform:translateX(20px);opacity:0}}
}

/* capability rows arrive in sequence, so the list reads as work being done */
.tabs__panel .caps li{opacity:0;transform:translateY(8px);
  transition:opacity .3s linear,transform .6s var(--ease-out)}
.tabs__panel:not([hidden]) .caps li{opacity:1;transform:none}
.tabs__panel .caps li:nth-child(1){transition-delay:.04s}
.tabs__panel .caps li:nth-child(2){transition-delay:.12s}
.tabs__panel .caps li:nth-child(3){transition-delay:.20s}
.tabs__panel .caps li:nth-child(4){transition-delay:.28s}

/* the check fills green as its row lands */
.cap__ico--check{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10' fill='%2300b585'/%3E%3Cpath d='M7 11.3l2.8 2.7L15 8.6' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* the headline figure counts up with the rest */
.seg__stat b{font-variant-numeric:tabular-nums}

/* quote lines were breaking too short */
.tcard__quote{max-width:26ch!important}
@media (prefers-reduced-motion:reduce){
  .tabs__panel .caps li{opacity:1;transform:none;transition:none}
  .seg__bridge::after{animation:none}
}

/* --- full-colour media, quote on a paper panel over it --------------------- */
.tcard__photo{inset:0;width:52%;right:auto}
.tcard__photo img{filter:none;transform:none}
.tcard__photo::after{display:none}

.tcard__body{position:absolute!important;right:0;top:0;bottom:0;width:52%;
  background:var(--bg);
  align-items:flex-start!important;text-align:left!important;justify-content:center;
  padding:52px 52px 46px!important}
.tcard__quote{margin:0 0 auto;max-width:22ch!important;text-align:left;
  font-weight:400;font-size:clamp(21px,1.7vw,27px);line-height:1.4;letter-spacing:-.5px}
.tcard__foot{align-items:flex-start!important;gap:22px!important;margin-top:34px}
.tcard__who{align-items:flex-start}
.tcard__logo{order:0;margin:14px 0 0!important;object-position:left center;filter:none;opacity:1;height:24px}
.tcard__avatar{margin:0 0 10px!important}
.tcard__cta{align-self:flex-start}

@media (max-width:1199.98px){
  .tcard{height:auto;min-height:0}
  .tcard__photo{position:relative;width:100%;height:240px}
  .tcard__body{position:relative!important;width:100%;padding:32px 28px 30px!important}
  .tcard__quote{font-size:21px}
}

/* --- final: quote over a full-colour still, paper wash only under the text -- */
.tcard__photo{position:absolute!important;inset:0!important;width:100%!important;right:0!important}
.tcard__photo img{filter:none;transform:none}
.tcard__photo::after{display:block;content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(242,241,237,.96) 0%,rgba(242,241,237,.93) 34%,rgba(242,241,237,.72) 52%,rgba(242,241,237,.18) 74%,rgba(242,241,237,.06) 100%)}

.tcard__body{position:absolute!important;inset:0!important;width:100%!important;
  display:flex!important;flex-direction:column;align-items:flex-start!important;justify-content:center;
  text-align:left!important;padding:56px 8% 52px 56px!important}
.tcard__quote{margin:0;max-width:17ch!important;
  font-weight:300;font-size:clamp(24px,2.35vw,38px);line-height:1.22;letter-spacing:-1.1px;color:var(--ink)}
.tcard__foot{margin-top:36px;flex-direction:column!important;align-items:flex-start!important;gap:20px!important}
.tcard__who{align-items:flex-start;gap:0!important}
.tcard__avatar{width:38px;height:38px;margin:0 0 10px!important;box-shadow:0 0 0 3px rgba(242,241,237,.9)}
.tcard__who strong{font-weight:450;font-size:16px;line-height:21px}
.tcard__who span{font-size:13.5px;line-height:19px}
.tcard__logo{order:0;height:24px;max-width:150px;margin:14px 0 0!important;
  object-position:left center;filter:none;opacity:1}
.tcard__cta{background:var(--ink-nav)!important;color:#ffffff!important;border:0;padding:11px 24px}
.tcard__cta:hover{background:#101010!important}

@media (max-width:1199.98px){
  .tcard{height:min(520px,58vh);min-height:400px}
  .tcard__photo,.tcard__body{position:absolute!important}
  .tcard__body{padding:36px 28px 34px!important}
  .tcard__photo::after{background:linear-gradient(115deg,rgba(242,241,237,.97) 0%,rgba(242,241,237,.9) 46%,rgba(242,241,237,.5) 74%,rgba(242,241,237,.15) 100%)}
  .tcard__quote{max-width:20ch!important}
}

/* card sizing that survives short viewports, and more of the photo showing */
.tcard{height:clamp(430px,56vh,560px)!important}
.tcard__quote{max-width:20ch!important;font-size:clamp(22px,2.05vw,34px)}
.tcard__photo::after{
  background:linear-gradient(100deg,rgba(242,241,237,.95) 0%,rgba(242,241,237,.88) 30%,rgba(242,241,237,.58) 48%,rgba(242,241,237,.12) 70%,rgba(242,241,237,0) 100%)}
.tcard__body{padding:44px 8% 40px 48px!important}
.tcard__foot{margin-top:28px;gap:16px!important}

/* ═══ Testimonials, final: colour portrait left, quote on the page ground ═══ */
.tcard{
  display:flex!important;align-items:stretch;gap:0;
  background:transparent!important;border:0!important;border-radius:0!important;
  height:clamp(420px,54vh,520px)!important;padding:0;overflow:visible;
}
.tcard__photo{position:relative!important;inset:auto!important;flex:0 0 44%;width:44%!important;height:100%;
  border-radius:var(--r-lg);overflow:hidden;background:#dedcd6}
.tcard__photo img{width:100%;height:100%;object-fit:cover;filter:none;transform:none}
.tcard__photo::after{display:none!important}

.tcard__body{position:relative!important;inset:auto!important;flex:1 1 auto;width:auto!important;
  display:flex!important;flex-direction:column;justify-content:center;align-items:flex-start!important;
  text-align:left!important;padding:8px 0 8px 64px!important;background:transparent}
.tcard__quote{margin:0;max-width:26ch!important;
  font-weight:400;font-size:clamp(21px,1.95vw,31px);line-height:1.34;letter-spacing:-.7px;color:var(--ink)}
.tcard__foot{margin-top:32px;flex-direction:column!important;align-items:flex-start!important;gap:22px!important}
.tcard__who{align-items:flex-start;gap:0!important}
.tcard__avatar{display:none}
.tcard__who strong{font-weight:450;font-size:17px;line-height:23px;color:var(--ink)}
.tcard__who span{font-weight:400;font-size:14.5px;line-height:21px;color:var(--muted)}
.tcard__logo{order:0;height:22px;max-width:140px;margin:12px 0 0!important;
  object-position:left center;filter:none;opacity:1}
.tcard__cta{background:transparent!important;color:var(--ink)!important;border:0!important;
  padding:0!important;border-radius:0!important;font-weight:450;font-size:15px;
  border-bottom:1px solid rgba(16,16,16,.28)!important;padding-bottom:3px!important}
.tcard__cta:hover{background:transparent!important;border-bottom-color:var(--ink)!important}
.tcard__cta::after{content:" \2192"}

@media (max-width:1199.98px){
  .tcard{flex-direction:column;height:auto!important}
  .tcard__photo{flex:0 0 auto;width:100%!important;height:280px}
  .tcard__body{padding:26px 0 0!important}
  .tcard__quote{font-size:21px;max-width:32ch!important}
}

/* --- Ramp-style name badge burned into the portrait ------------------------ */
.tcard__photo{position:relative!important}
.tcard__tag{position:absolute;left:26px;right:26px;bottom:24px;display:flex;flex-direction:column;gap:2px;
  z-index:1;pointer-events:none;text-shadow:0 1px 18px rgba(16,16,16,.35)}
.tcard__tag b{font-weight:400;font-size:clamp(30px,3.2vw,52px);line-height:1;letter-spacing:-1.8px;color:var(--green)}
.tcard__tag em{font-style:normal;font-weight:450;font-size:14px;line-height:20px;color:#ffffff}
.tcard__photo::before{content:"";position:absolute;inset:auto 0 0 0;height:52%;z-index:0;
  background:linear-gradient(180deg,rgba(16,16,16,0),rgba(16,16,16,.62))}

/* --- Harvey-style segment slider instead of dots --------------------------- */
.tcar__dots{display:grid!important;grid-template-columns:repeat(4,1fr);gap:24px;
  justify-content:stretch!important;margin-top:8px!important}
.tcar__dots li{width:auto!important;height:1px!important;border-radius:0!important;
  background:rgba(16,16,16,.16)!important;box-shadow:none!important;
  transition:background .3s var(--ease-out)}
.tcar__dots li.is-active{background:var(--ink)!important;height:1px!important}

/* --- the portrait gives way to a co-brand card, the way Ramp's video does --- */
.tcard__lockup{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:20px;
  background:var(--bg);opacity:0;pointer-events:none}
.tcard__lockup i{font-style:normal;font-weight:300;font-size:22px;color:var(--muted)}
.tcard__lockmark{width:38px;height:38px;object-fit:none;object-position:left center;max-width:none;flex:0 0 38px}
.tcard__lockco{height:26px;width:auto;max-width:130px;object-fit:contain}
.tcard.is-active .tcard__lockup{animation:tLock 11s var(--ease-out) infinite}
@keyframes tLock{0%,52%{opacity:0}58%,76%{opacity:1}82%,100%{opacity:0}}
.tcard.is-active .tcard__tag{animation:tTag 11s var(--ease-out) infinite}
@keyframes tTag{0%,52%{opacity:1}58%,76%{opacity:0}82%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .tcard.is-active .tcard__lockup,.tcard.is-active .tcard__tag{animation:none}
}

/* the card opens on the co-brand card, then reveals the photo */
@keyframes tLock{0%,18%{opacity:1}26%,100%{opacity:0}}
@keyframes tTag{0%,26%{opacity:0}34%,100%{opacity:1}}
.tcard.is-active .tcard__lockup{animation:tLock 11s var(--ease-out) infinite}
.tcard.is-active .tcard__tag{animation:tTag 11s var(--ease-out) infinite}
.tcard__tag b{font-size:clamp(26px,2.6vw,42px);letter-spacing:-1.4px}

/* a real customer video plays in the card, same frame as the photos */
.tcard__photo video{display:block;width:100%;height:100%;object-fit:cover}

/* the media panel carries the section, so give it real size */
.tcard{height:clamp(470px,64vh,620px)!important;flex:0 0 min(1120px,76vw)!important}
.tcard__photo{flex:0 0 49%!important;width:49%!important}
.tcard__body{padding:8px 0 8px 72px!important}
.tcard__quote{font-size:clamp(22px,2.05vw,33px);max-width:24ch!important}
.tcard__tag{left:30px;right:30px;bottom:28px}
@media (max-width:1199.98px){
  .tcard{height:auto!important;flex:0 0 88vw!important}
  .tcard__photo{flex:0 0 auto!important;width:100%!important;height:320px}
  .tcard__body{padding:26px 0 0!important}
}

/* --- Watch pill on the media, and the full view it opens ------------------- */
.tcard__watch{position:absolute;right:22px;bottom:24px;z-index:3;
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  background:rgba(16,16,16,.62);color:#ffffff;border:0;border-radius:var(--r-sm);padding:11px 20px 11px 16px;
  font-family:inherit;font-weight:450;font-size:14px;letter-spacing:.1px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .15s var(--ease-out)}
.tcard__watch:hover{background:rgba(16,16,16,.82)}
.tcard__watch i{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;
  border-color:transparent transparent transparent #ffffff}
.tcard:not(.is-active) .tcard__watch{opacity:0;pointer-events:none}

.vmodal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:5vh 5vw;background:rgba(16,16,16,.86);
  opacity:0;transition:opacity .3s var(--ease-out)}
.vmodal.is-open{opacity:1}
.vmodal__frame{width:100%;max-width:1180px;border-radius:var(--r-md);overflow:hidden;background:#101010;
  box-shadow:0 30px 90px -40px rgba(16,16,16,.8)}
.vmodal__frame video{display:block;width:100%;height:auto;max-height:88vh}
.vmodal__close{position:absolute;top:22px;right:26px;width:44px;height:44px;border-radius:50%;
  background:rgba(242,241,237,.14);color:#f2f1ed;border:0;cursor:pointer;font-size:26px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s var(--ease-out)}
.vmodal__close:hover{background:rgba(242,241,237,.28)}
body.is-vlocked{overflow:hidden}
@media (max-width:809.98px){
  .tcard__watch{right:16px;bottom:18px;padding:9px 16px 9px 13px;font-size:13px}
  .vmodal{padding:0}
  .vmodal__frame{border-radius:0}
}

/* the lockup images sit inside .tcard__photo, so they need the same specificity */
.tcard__photo .tcard__lockmark{width:36px;height:36px;flex:0 0 36px;max-width:none;
  object-fit:none;object-position:left center}
.tcard__photo .tcard__lockco{width:auto;height:26px;max-width:130px;flex:0 0 auto;object-fit:contain}

/* --- the quote column gets a kicker, a rule and a proper attribution row --- */
.tcard__kicker{display:flex;align-items:center;gap:12px;margin:0 0 20px;
  font-weight:450;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--green-deep)}
.tcard__kicker i{width:26px;height:1px;background:currentColor;opacity:.5;flex:0 0 26px}

.tcard__foot{width:100%;margin-top:auto!important;gap:18px!important}
.tcard__who{display:grid!important;grid-template-columns:1fr auto;grid-template-rows:auto auto;
  column-gap:28px;align-items:center;width:100%;
  padding-top:22px;border-top:1px solid var(--line)}
.tcard__who strong{grid-column:1;grid-row:1;align-self:end}
.tcard__who span{grid-column:1;grid-row:2;align-self:start}
.tcard__body .tcard__logo{grid-column:2;grid-row:1 / 3;justify-self:end;margin:0!important;
  height:26px;max-width:150px;object-position:right center}

/* the quote holds the top of the column, attribution sits at the bottom */
.tcard__body{justify-content:flex-start!important;padding-top:36px!important;padding-bottom:36px!important}
.tcard__quote{margin-bottom:0}

/* no intro card: the media shows straight away, the badge just sits there */
.tcard.is-active .tcard__lockup,.tcard.is-active .tcard__tag{animation:none!important}
.tcard__tag{opacity:1}

/* --- carousel arrows: a pair of outlined circles, aligned with the heading -- */
.quotes__head{align-items:flex-end}
.tcar__btns{display:flex!important;flex-direction:row!important;gap:10px;flex:0 0 auto;padding-bottom:4px}
.tcar__btn{width:46px;height:46px;border-radius:50%;flex:0 0 46px;
  background:transparent;border:1px solid rgba(16,16,16,.2);color:var(--ink);
  font-size:17px;line-height:1;
  transition:background .15s var(--ease-out),border-color .15s var(--ease-out)}
.tcar__btn:hover{background:rgba(16,16,16,.05);border-color:rgba(16,16,16,.45)}
.tcar__btn:active{transform:translateY(1px)}

/* the author rule beat [hidden], leaving an invisible full-screen layer that
   swallowed every click and blocked scrolling */
.vmodal[hidden]{display:none!important}
.vmodal{pointer-events:none}
.vmodal.is-open{pointer-events:auto}

/* --- the customer logo sits white at the foot of the media ----------------- */
.tcard__tag{left:28px;right:28px;bottom:26px;gap:10px}
.tcard__photo .tcard__taglogo{width:auto;height:26px;max-width:150px;flex:0 0 auto;
  object-fit:contain;object-position:left center;
  filter:brightness(0) invert(1);opacity:.96}
.tcard__tag em{font-style:normal;font-weight:450;font-size:12px;letter-spacing:.6px;
  text-transform:uppercase;color:rgba(255,255,255,.72)}
.tcard__photo::before{height:46%;
  background:linear-gradient(180deg,rgba(16,16,16,0),rgba(16,16,16,.66))}
@media (max-width:809.98px){
  .tcard__photo .tcard__taglogo{height:22px}
  .tcard__tag{left:20px;right:20px;bottom:20px}
}

/* the logo already sits on the media, so the column keeps just name and role */
.tcard__body .tcard__logo{display:none!important}
.tcard__who{grid-template-columns:1fr!important;padding-top:0!important;border-top:0!important}

/* the case study link reads as a button */
.tcard__cta{display:inline-flex;align-items:center;gap:9px;
  background:transparent!important;color:var(--ink-nav)!important;
  border:1px solid rgba(16,16,16,.28)!important;border-radius:var(--r-sm)!important;
  padding:11px 24px!important;font-weight:450;font-size:14.5px;
  transition:background .15s var(--ease-out),border-color .15s var(--ease-out)}
.tcard__cta:hover{background:rgba(16,16,16,.05)!important;border-color:rgba(16,16,16,.5)!important}
.tcard__cta::after{content:"\2192";font-size:15px;line-height:1}
.tcard__foot{gap:24px!important}

/* --- the media is 16:9, so the frame is too ------------------------------- */
.tcard{height:auto!important;min-height:0!important;align-items:center!important}
.tcard__photo{flex:0 0 60%!important;width:60%!important;height:auto!important;
  aspect-ratio:16 / 9}
.tcard__photo img,.tcard__photo video{width:100%;height:100%;object-fit:cover}
.tcard__body{padding:0 0 0 56px!important;justify-content:center!important;align-self:center}
.tcard__quote{font-size:clamp(19px,1.55vw,25px);line-height:1.4;letter-spacing:-.4px;max-width:28ch!important}
.tcard__kicker{margin-bottom:16px}
.tcard__foot{margin-top:26px!important;gap:20px!important}
@media (max-width:1199.98px){
  .tcard{flex-direction:column;align-items:stretch!important}
  .tcard__photo{flex:0 0 auto!important;width:100%!important;aspect-ratio:16 / 9}
  .tcard__body{padding:24px 0 0!important}
  .tcard__quote{max-width:none!important}
}

/* --- before the video starts: a line and a play button over the still ------ */
.tcard__pre{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
  justify-content:center;gap:26px;padding:0 8% 0 44px;
  background:linear-gradient(90deg,rgba(16,16,16,.72) 0%,rgba(16,16,16,.5) 52%,rgba(16,16,16,.28) 100%);
  transition:opacity .3s var(--ease-out)}
.tcard__pre.is-gone{opacity:0;pointer-events:none}
.tcard__pretitle{margin:0;max-width:18ch;color:#f2f1ed;
  font-weight:300;font-size:clamp(20px,1.75vw,30px);line-height:1.24;letter-spacing:-.8px}
.tcard__play{width:62px;height:62px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(242,241,237,.22);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  transition:background .15s var(--ease-out),transform .15s var(--ease-out)}
.tcard__play:hover{background:rgba(242,241,237,.34);transform:scale(1.05)}
.tcard__play i{width:0;height:0;margin-left:4px;border-style:solid;
  border-width:9px 0 9px 15px;border-color:transparent transparent transparent #ffffff}
@media (max-width:809.98px){
  .tcard__pre{padding:0 24px;gap:18px}
  .tcard__play{width:52px;height:52px}
}

/* the loop keeps running behind the overlay, so the scrim stays put */
.tcard__pre{background:linear-gradient(90deg,rgba(16,16,16,.66) 0%,rgba(16,16,16,.42) 50%,rgba(16,16,16,.16) 100%)}
.tcard:not(.is-active) .tcard__pre{opacity:0}

/* --- the quote now lives on the media, the column carries the attribution -- */
.tcard__pre{justify-content:flex-end;gap:22px;padding:0 8% 88px 44px;
  background:linear-gradient(180deg,rgba(16,16,16,.10) 0%,rgba(16,16,16,.42) 44%,rgba(16,16,16,.80) 100%)}
.tcard__pretitle{max-width:26ch;font-weight:400;font-size:clamp(17px,1.42vw,23px);
  line-height:1.4;letter-spacing:-.35px;color:#f2f1ed}
.tcard__play{position:absolute;right:26px;bottom:26px;width:54px;height:54px}
.tcard__photo::before{display:none}
.tcard__tag{bottom:26px;z-index:4}
.tcard:not(.is-active) .tcard__pre{opacity:1}

/* the column: kicker, who, button */
.tcard__body{justify-content:center!important}
.tcard__kicker{margin-bottom:22px}
.tcard__foot{margin-top:0!important}
@media (max-width:809.98px){
  .tcard__pre{padding:0 24px 74px;gap:16px}
  .tcard__play{right:18px;bottom:18px;width:46px;height:46px}
}

/* --- text sits under the video, not on it --------------------------------- */
.tcard{flex-direction:column!important;align-items:stretch!important;gap:0}
.tcard__photo{flex:0 0 auto!important;width:100%!important;aspect-ratio:16 / 9}
.tcard__body{display:grid!important;grid-template-columns:1.25fr .75fr;gap:44px;
  align-items:start!important;padding:30px 0 0!important}
.tcard__kicker{grid-column:1 / -1;margin:0 0 18px}
.tcard__quote{grid-column:1;margin:0;max-width:34ch!important;
  font-weight:400;font-size:clamp(18px,1.5vw,25px);line-height:1.42;letter-spacing:-.4px;color:var(--ink)}
.tcard__foot{grid-column:2;margin:0!important;align-items:flex-start!important;gap:18px!important}
.tcard__play{right:22px;bottom:22px}
@media (max-width:809.98px){
  .tcard__body{grid-template-columns:1fr;gap:22px;padding-top:22px!important}
  .tcard__quote,.tcard__foot{grid-column:1}
  .tcard__quote{max-width:none!important}
}

/* --- back to the quote on the media, attribution beside it ---------------- */
.tcard{flex-direction:row!important;align-items:center!important}
.tcard__photo{flex:0 0 66%!important;width:66%!important;aspect-ratio:16 / 9}
.tcard__pre{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
  justify-content:flex-end;padding:0 16% 92px 44px;
  background:linear-gradient(180deg,rgba(16,16,16,.06) 0%,rgba(16,16,16,.34) 42%,rgba(16,16,16,.74) 100%)}
.tcard__pretitle{margin:0;max-width:24ch;color:#f2f1ed;
  font-weight:400;font-size:clamp(17px,1.42vw,24px);line-height:1.42;letter-spacing:-.35px}
.tcard__body{display:flex!important;grid-template-columns:none!important;
  flex-direction:column;justify-content:center;align-items:flex-start!important;
  padding:0 0 0 48px!important;gap:0}
.tcard__kicker{margin:0 0 18px}
.tcard__foot{margin:0!important;align-items:flex-start!important;gap:20px!important}
@media (max-width:1199.98px){
  .tcard{flex-direction:column!important;align-items:stretch!important}
  .tcard__photo{flex:0 0 auto!important;width:100%!important}
  .tcard__body{padding:24px 0 0!important}
}

/* --- the media is the card, centred on the page; attribution sits under it - */
.tcard{flex-direction:column!important;align-items:stretch!important;gap:0;
  flex:0 0 min(1000px,68vw)!important}
.tcard__photo{flex:0 0 auto!important;width:100%!important;aspect-ratio:16 / 9}
.tcard__body{display:flex!important;flex-direction:row!important;align-items:center!important;
  justify-content:space-between!important;gap:28px;padding:20px 4px 0!important;width:100%}
.tcard__kicker{display:none}
.tcard__foot{flex-direction:row!important;align-items:center!important;gap:24px!important;
  width:100%;justify-content:space-between}
.tcard__who{display:flex!important;flex-direction:column;align-items:flex-start;gap:1px;width:auto;
  grid-template-columns:none!important}
.tcard__who strong{font-size:15.5px;line-height:21px}
.tcard__who span{font-size:13.5px;line-height:19px}
.tcard__cta{flex:0 0 auto;padding:10px 20px!important;font-size:14px}
@media (max-width:809.98px){
  .tcard{flex:0 0 88vw!important}
  .tcard__body{padding:16px 0 0!important}
  .tcard__foot{flex-direction:column!important;align-items:flex-start!important;gap:14px!important}
}

/* the row under the media spans the card: name left, button right */
.tcard__foot{flex:1 1 auto!important;width:100%!important}
.tcard__body{padding:22px 2px 0!important}

/* align-self:center from the old side-by-side layout was shrinking this row */
.tcard__body{align-self:stretch!important;width:100%!important}

/* the ghost is a peek only */
.tcard--ghost{pointer-events:none}
.tcard--ghost .tcard__play,.tcard--ghost .tcard__cta{pointer-events:none}

/* the segment indicator goes: the arrows are enough */
.tcar__dots{display:none!important}

/* --- clickable customer logos under the carousel -------------------------- */
.tnav{list-style:none;margin:36px 0 0;padding:0;
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap}
.tnav li{display:flex;align-items:center}
.tnav li + li::before{content:"";width:1px;height:26px;background:var(--line);margin:0 26px;flex:0 0 1px}
.tnav button{background:none;border:0;padding:8px 4px;cursor:pointer;line-height:0;
  transition:opacity .3s var(--ease-out)}
.tnav img{height:26px;width:auto;max-width:132px;object-fit:contain;
  filter:grayscale(1);opacity:.34;
  transition:filter .3s var(--ease-out),opacity .3s var(--ease-out)}
.tnav button:hover img{opacity:.62}
.tnav button.is-on img{filter:none;opacity:1}
.tnav button.is-on{cursor:default}
@media (max-width:809.98px){
  .tnav{margin-top:26px;gap:8px 0}
  .tnav li + li::before{margin:0 14px;height:20px}
  .tnav img{height:20px;max-width:98px}
}

/* the quote runs wider and larger on the media */
.tcard__pre{padding:0 8% 96px 46px}
.tcard__pretitle{max-width:36ch;font-size:clamp(19px,1.72vw,29px);line-height:1.38;letter-spacing:-.5px}
@media (max-width:809.98px){
  .tcard__pretitle{max-width:none;font-size:17px;line-height:1.42}
  .tcard__pre{padding:0 22px 72px}
}

/* align-self from the old grid layout was pushing the name off the left edge */
.tcard__who strong,.tcard__who span{align-self:flex-start!important;justify-self:start!important;text-align:left}

/* --- Awards and press, as on the live site -------------------------------- */
.awards .t-h2{margin-bottom:44px}
.awards__row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;gap:26px 56px}
.awards__row--badges li img{height:48px;width:auto;object-fit:contain}
.awards__row--press{margin-top:44px;padding-top:36px;border-top:1px solid var(--line);gap:22px 52px}
.awards__row--press li img{width:auto;object-fit:contain;filter:grayscale(1);opacity:.55;
  transition:filter .3s var(--ease-out),opacity .3s var(--ease-out)}
.awards__row--press li:hover img{filter:none;opacity:1}
@media (max-width:809.98px){
  .awards__row{gap:20px 30px}
  .awards__row--badges li img{height:34px}
  .awards__row--press{margin-top:32px;padding-top:26px}
}

/* --- CTA band on the same deep green as the rest of the dark surfaces ------ */
.ctacard{position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:radial-gradient(120% 150% at 12% 0%,#0f4a38 0%,#06251c 58%,#06251c 100%)}
.ctacard__field{position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#101010 26%,#101010 74%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#101010 26%,#101010 74%,transparent 100%)}
.ctacard__field canvas{display:block;width:100%;height:100%}
.ctacard__body{position:relative;z-index:1}
.ctacard__body .t-h2{color:#f2f1ed}
.ctacard__body .t-lead{color:rgba(242,241,237,.68)}
.ctacard__btn{position:relative;z-index:1;
  background:#f2f1ed!important;color:#06251c!important;border-radius:var(--r-sm);
  padding:14px 30px;font-weight:450;font-size:15.5px;letter-spacing:.1px}
.ctacard:hover .ctacard__btn{background:#ffffff!important}

/* one icon family across all four trust badges */
.badge__seal svg{width:44px;height:44px;fill:none;stroke:var(--green-deep);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.badge__seal{display:inline-flex;align-items:center;justify-content:center;margin-bottom:20px}

/* trust icons: one family, each with its own meaning, in a tile like the rest */
.badge__seal{width:46px;height:46px;border-radius:var(--r-md);background:var(--bg);
  border:1px solid var(--line);margin-bottom:22px}
.badge__seal svg{width:23px;height:23px;fill:none;stroke:var(--green-deep);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* --- Awards and press as a card grid, like the integrations wall ----------- */
.awards__head{margin-bottom:36px}
.awards__head .t-h2{margin-top:14px}
.awgrid{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--line);gap:1px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.awgrid__cell{position:relative;background:#ffffff;min-height:150px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:26px 24px;
  transition:background .3s var(--ease-out)}
.awgrid__cell:hover{background:#f7f6f2}
.awgrid__cell img{max-width:170px;max-height:46px;object-fit:contain}
.awgrid__cap{font-weight:400;font-size:12.5px;line-height:18px;color:var(--muted);text-align:center}
.awgrid__cell--press{min-height:112px}
.awgrid__cell--press img{filter:grayscale(1);opacity:.5;max-height:26px;
  transition:filter .3s var(--ease-out),opacity .3s var(--ease-out)}
.awgrid__cell--press:hover img{filter:none;opacity:1}
@media (max-width:1199.98px){.awgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:809.98px){
  .awgrid{grid-template-columns:1fr}
  .awgrid__cell{min-height:112px}
  .awgrid__cell--press{min-height:92px}
}

/* --- compliance seals: outlined rings with the standard named inside ------- */
.badge__seal{width:auto;height:auto;border:0;background:transparent;border-radius:0;
  display:inline-flex;margin-bottom:20px}
.badge__seal .seal{width:62px;height:62px;overflow:visible}
.badge__seal .seal circle,.badge__seal .seal path{fill:none;stroke:#7a7a7a;stroke-width:1;stroke-linecap:round}
.badge__seal .seal polygon{fill:#7a7a7a;stroke:none}
.badge__seal .seal text{fill:#7a7a7a;font-family:inherit;font-weight:450;font-size:8.4px;
  letter-spacing:.3px;text-anchor:middle}
.badge:hover .badge__seal .seal circle,.badge:hover .badge__seal .seal path{stroke:var(--green-deep)}
.badge:hover .badge__seal .seal polygon{fill:var(--green-deep)}
.badge:hover .badge__seal .seal text{fill:var(--green-deep)}
.badge__seal .seal circle,.badge__seal .seal path,.badge__seal .seal polygon,.badge__seal .seal text{
  transition:stroke .3s var(--ease-out),fill .3s var(--ease-out)}

/* --- a dense logo wall, the way Ramp does it ------------------------------- */
.awgrid{grid-template-columns:repeat(6,1fr)}
.awgrid__cell{min-height:0;aspect-ratio:1 / 1;padding:22px 18px;gap:0}
.awgrid__cell img{max-width:78%;max-height:34px}
.awgrid__cell--press{min-height:0}
.awgrid__cell--press img{max-height:22px;filter:grayscale(1);opacity:.42}
@media (max-width:1199.98px){
  .awgrid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:809.98px){
  .awgrid{grid-template-columns:repeat(2,1fr)}
  .awgrid__cell img{max-height:26px}
}

/* --- CTA in white, so the deep green footer closes the page on its own ----- */
.ctacard{background:#ffffff;border:1px solid var(--line)}
.ctacard__body .t-h2{color:var(--ink)}
.ctacard__body .t-lead{color:var(--muted)}
.ctacard__btn{background:var(--green)!important;color:#ffffff!important;
  padding:15px 32px;font-size:16px}
.ctacard:hover .ctacard__btn{background:var(--green-deep)!important}
.ctacard__field{-webkit-mask-image:linear-gradient(180deg,transparent 0,#101010 24%,#101010 76%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#101010 24%,#101010 76%,transparent 100%)}

/* one treatment across the whole wall: grey at rest, colour on hover */
.awgrid__cell img,
.awgrid__cell--press img{filter:grayscale(1);opacity:.46;
  transition:filter .3s var(--ease-out),opacity .3s var(--ease-out)}
.awgrid__cell:hover img,
.awgrid__cell--press:hover img{filter:none;opacity:1}

/* the white CTA sits lower and tighter */
.ctacard{gap:26px!important}
.ctacard__body{gap:14px!important}

/* --- the wall sits on the page ground, dividers only ---------------------- */
.awgrid{background:transparent;gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.awgrid__cell{background:transparent;border-left:1px solid var(--line)}
.awgrid__cell:hover{background:rgba(16,16,16,.02)}
.awgrid__cell:nth-child(6n+1){border-left:0}
.awgrid__cell img,.awgrid__cell--press img{filter:grayscale(1);opacity:.42}
.awgrid__cell:hover img,.awgrid__cell--press:hover img{filter:none;opacity:1}
@media (max-width:1199.98px){
  .awgrid__cell{border-left:1px solid var(--line)}
  .awgrid__cell:nth-child(6n+1){border-left:1px solid var(--line)}
  .awgrid__cell:nth-child(3n+1){border-left:0}
  .awgrid__cell:nth-child(n+4){border-top:1px solid var(--line)}
}
@media (max-width:809.98px){
  .awgrid__cell:nth-child(3n+1){border-left:1px solid var(--line)}
  .awgrid__cell:nth-child(2n+1){border-left:0}
  .awgrid__cell:nth-child(n+3){border-top:1px solid var(--line)}
  .awgrid__cell:nth-child(n+4){border-top:1px solid var(--line)}
}

/* even gaps instead of equal columns, which left ragged space between labels */
.ints__kinds{display:flex!important;flex-wrap:wrap;gap:14px 40px!important;
  grid-template-columns:none!important;justify-content:flex-start}
.ints__kinds li{flex:0 0 auto}
@media (max-width:809.98px){.ints__kinds{gap:12px 24px!important}}

/* a drawn avatar: a face without standing in for a real person */
.ha__avatar{background:transparent}
.ha__avatar svg{width:32px;height:32px;display:block}
.ha__av-bg{fill:#dedcd6}
.ha__av-fg{fill:none;stroke:#7a7a7a;stroke-width:2.1;stroke-linecap:round}
.ha__avatar svg circle.ha__av-fg{fill:#7a7a7a;stroke:none}

/* --- seals, cleaned up ---------------------------------------------------- */
/* an earlier icon rule was stroking every child of the svg, including the
   text, which made the lettering blobby */
.badge__seal svg{stroke:none;stroke-width:0}
.badge__seal .seal{width:64px;height:64px;overflow:visible}
.badge__seal .seal circle,
.badge__seal .seal path{fill:none;stroke:#c9c6bf;stroke-width:1;stroke-linecap:butt}
.badge__seal .seal polygon{fill:#c9c6bf;stroke:none}
.badge__seal .seal text{stroke:none!important;fill:#7a7a7a;
  font-family:inherit;font-weight:450;font-size:7.6px;letter-spacing:.9px;text-anchor:middle}
.badge:hover .badge__seal .seal circle,
.badge:hover .badge__seal .seal path{stroke:var(--green-deep)}
.badge:hover .badge__seal .seal polygon{fill:var(--green-deep)}
.badge:hover .badge__seal .seal text{fill:var(--green-deep)}

/* larger seals */
.badge__seal .seal{width:82px;height:82px}
.badge__seal{margin-bottom:24px}
@media (max-width:809.98px){.badge__seal .seal{width:68px;height:68px}}

/* the column direction survived from the earlier hairline-row version */
.ints__kinds{flex-direction:row!important;align-items:center}
.ints__kinds li{flex:0 0 auto;width:auto!important;
  opacity:0;transform:translateY(7px);
  transition:opacity .3s linear,transform .6s var(--ease-out)}
.reveal.is-in .ints__kinds li,.ints.is-in .ints__kinds li{opacity:1;transform:none}
.ints__kinds li:nth-child(1){transition-delay:.02s}
.ints__kinds li:nth-child(2){transition-delay:.10s}
.ints__kinds li:nth-child(3){transition-delay:.18s}
.ints__kinds li:nth-child(4){transition-delay:.26s}
.ints__kinds li:nth-child(5){transition-delay:.34s}
@media (prefers-reduced-motion:reduce){
  .ints__kinds li{opacity:1;transform:none;transition:none}
}

/* --- one visual per channel, not a voice waveform for all four ------------- */
.live__viz{position:relative;height:46px;flex:1 1 auto;margin-top:2px}
.lv{position:absolute;inset:0;display:flex;align-items:center;opacity:0;
  animation:lvOn var(--loop) var(--ease-out) infinite;
  animation-delay:calc(var(--i) * 2.375s)}
@keyframes lvOn{0%{opacity:0}3%,22%{opacity:1}25%,100%{opacity:0}}

/* Voice — speech, so a waveform is right here */
.lv--voice{gap:3px}
.lv--voice i{flex:1;border-radius:1px;background:rgba(0,181,133,.3);height:18%;
  animation:lvWave 2.4s var(--ease) infinite;
  animation-delay:calc(var(--i) * -0.1s)}
@keyframes lvWave{0%,100%{height:18%;background:rgba(0,181,133,.3)}46%{height:92%;background:var(--green)}}

/* SMS — short messages, back and forth */
.lv--sms{flex-direction:column;justify-content:center;gap:6px;align-items:stretch}
.lv--sms b{height:11px;border-radius:var(--r-sm);opacity:0;
  animation:lvPop var(--loop) var(--ease-out) infinite;
  animation-delay:calc(2.375s + var(--i) * .34s)}
.lv--sms .lv__in{width:46%;background:rgba(16,16,16,.10);align-self:flex-start}
.lv--sms .lv__out{width:38%;background:var(--green);align-self:flex-end}
@keyframes lvPop{0%,4%{opacity:0;transform:translateY(4px)}9%,22%{opacity:1;transform:none}25%,100%{opacity:0}}

/* Email — a thread with attachments */
.lv--email{flex-direction:column;justify-content:center;gap:7px;align-items:stretch}
.lv--email u{display:flex;align-items:center;gap:9px;text-decoration:none;opacity:0;
  animation:lvPop var(--loop) var(--ease-out) infinite;
  animation-delay:calc(4.75s + var(--i) * .3s)}
.lv--email s{flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:var(--green);text-decoration:none}
.lv--email u:nth-child(n+2) s{background:rgba(16,16,16,.14)}
.lv--email em{flex:1 1 auto;height:6px;border-radius:var(--r-sm);background:rgba(16,16,16,.10)}
.lv--email u:nth-child(1) em{width:70%;flex:0 0 auto}
.lv--email u:nth-child(2) em{width:52%;flex:0 0 auto}
.lv--email u:nth-child(3) em{width:61%;flex:0 0 auto}

/* Chat — a live exchange with the agent typing */
.lv--chat{flex-direction:column;justify-content:center;gap:6px;align-items:stretch}
.lv--chat b{height:12px;border-radius:var(--r-sm);opacity:0;
  animation:lvPop var(--loop) var(--ease-out) infinite;
  animation-delay:calc(7.125s + var(--i) * .36s)}
.lv--chat .lv__in{width:44%;background:rgba(16,16,16,.10);align-self:flex-start}
.lv--chat .lv__out{width:auto;min-width:44px;background:var(--green);align-self:flex-end;
  display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:0 10px}
.lv--chat .lv__typing s{width:4px;height:4px;border-radius:50%;background:#ffffff;text-decoration:none;
  animation:lvDot 1.2s var(--ease) infinite}
.lv--chat .lv__typing s:nth-child(2){animation-delay:.16s}
.lv--chat .lv__typing s:nth-child(3){animation-delay:.32s}
@keyframes lvDot{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}

@media (prefers-reduced-motion:reduce){
  .lv,.lv *{animation:none!important}
  .lv{opacity:0}.lv--voice{opacity:1}
  .lv--voice i{height:48%}
  .lv--sms b,.lv--email u,.lv--chat b{opacity:1;transform:none}
}

/* --- kickers: grey, no leading rule --------------------------------------- */
.kicker{color:var(--muted)}
.kicker i{display:none}
.eyebrow{color:var(--muted)}
.eyebrow i{display:none}

/* --- seals keep a green accent -------------------------------------------- */
.badge__seal .seal text{fill:var(--green-deep)}
.badge__seal .seal polygon{fill:var(--green-deep)}
.badge__seal .seal circle{stroke:#c9c6bf}
.badge__seal .seal path{stroke:#c9c6bf}
.badge:hover .badge__seal .seal circle,
.badge:hover .badge__seal .seal path{stroke:var(--green-deep)}

/* the mask on each line was clipping ascenders and descenders */
[data-lines] .ln{padding:.12em 0 .18em;margin:-.12em 0 -.18em}
.tcard__pretitle,.m-rise .ln{padding:0;margin:0}

/* each seal gets its own ring, so the four read as a family, not a repeat */
.badge__seal .seal .dot{fill:var(--green-deep);stroke:none}
.badge__seal .seal circle[stroke-dasharray]{stroke:var(--green-deep)}

/* the wires animated `height`, which resized the tile and made the row jump;
   reserve the space and scale a child instead */
.agraph__wire{position:relative;height:var(--h);border-left:0;background:none;
  animation:none!important}
.agraph__wire::after{content:"";position:absolute;inset:0;
  border-left:1px dashed rgba(16,16,16,.28);transform-origin:top center;transform:scaleY(0);
  animation:agWireY var(--loop) var(--ease) infinite;animation-delay:inherit}
@keyframes agWireY{0%,3%{transform:scaleY(0)}10%,88%{transform:scaleY(1)}94%,100%{transform:scaleY(0)}}

.agraph__drops i{position:relative;height:14px;border-left:0;background:none;animation:none!important}
.agraph__drops i::after{content:"";position:absolute;inset:0;
  border-left:1px dashed rgba(16,16,16,.28);transform-origin:top center;transform:scaleY(0);
  animation:agWireY var(--loop) var(--ease) infinite;animation-delay:inherit}

/* the same for the hub risers on the integrations diagram */
.hub__riser u{animation-name:hubRise}
@media (prefers-reduced-motion:reduce){
  .agraph__wire::after,.agraph__drops i::after{animation:none;transform:scaleY(1)}
}

/* --- lines of business: a quiet footnote row, not a white bar -------------- */
.seg__lines{background:transparent!important;border:0!important;
  border-top:1px solid var(--line)!important;
  margin-top:32px!important;padding:20px 0 0!important;gap:26px!important;align-items:baseline}
.seg__lines::before{display:none}
.seg__lines-label{color:var(--muted);letter-spacing:1.5px}
.seg__lines .chips{gap:0 24px;align-items:baseline}
.seg__lines .chips li{padding:0;border:0;background:transparent;
  font-weight:400;font-size:15px;line-height:22px;color:#4a4842;position:relative}
.seg__lines .chips li + li::before{content:"";position:absolute;left:-12px;top:.42em;
  width:1px;height:.9em;background:var(--line)}
@media (max-width:809.98px){
  .seg__lines{gap:14px!important}
  .seg__lines .chips{gap:0 16px}
  .seg__lines .chips li + li::before{left:-8px}
}

/* --- No API block back to a white card ------------------------------------ */
.noapi{
  background:#ffffff!important;border:1px solid var(--line)!important;border-radius:var(--r-lg)!important;
  padding:44px 44px!important;margin-top:56px!important;
}
@media (max-width:1199.98px){.noapi{padding:32px 24px!important;margin-top:44px!important}}

/* the pattern must not run under the words: clear the centre so the lines
   read as continuous at the edges instead of breaking across the headline */
.ctacard__field{
  -webkit-mask-image:
    radial-gradient(58% 62% at 50% 50%,transparent 0,transparent 42%,#101010 78%),
    linear-gradient(180deg,transparent 0,#101010 22%,#101010 78%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:
    radial-gradient(58% 62% at 50% 50%,transparent 0,transparent 42%,#101010 78%),
    linear-gradient(180deg,transparent 0,#101010 22%,#101010 78%,transparent 100%);
          mask-composite:intersect;
}

/* the page's own buttons follow the same system */
.ctacard__btn{background:var(--green)!important;color:#ffffff!important;padding:14px 28px!important}
.ctacard:hover .ctacard__btn{background:var(--green-deep)!important}
.footer__cta{background:#f2f1ed!important;color:#06251c!important;padding:13px 24px!important}
.footer__cta:hover{background:#ffffff!important}
.tcard__cta{background:transparent!important;color:var(--ink-nav)!important;
  border:0!important;box-shadow:inset 0 0 0 1px rgba(16,16,16,.24);padding:12px 22px!important;font-size:14.5px}
.tcard__cta:hover{background:rgba(16,16,16,.05)!important;box-shadow:inset 0 0 0 1px rgba(16,16,16,.42)}
.tcard__watch{background:rgba(16,16,16,.62)!important;color:#ffffff!important;padding:11px 18px!important;font-size:14px}
.tcard__watch:hover{background:rgba(16,16,16,.82)!important}
.brw__btn{background:var(--ink-nav)!important;color:#ffffff!important;padding:9px 16px!important;font-size:12.5px}

/* ═══ Segments: label left, content right, hairlines between ═══════════════ */
.seg{display:block!important;grid-template-columns:none!important;position:relative}
.seg__bridge{display:none!important}
.segrow{display:grid;grid-template-columns:220px 1fr;gap:48px;
  padding:34px 0;border-top:1px solid var(--line);align-items:start}
.segrow:first-child{border-top:0;padding-top:8px}
.segrow__label{font-weight:450;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--muted);padding-top:4px}
.segrow .caps{display:grid;grid-template-columns:1fr 1fr;gap:26px 44px}
.segrow .caps li{display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start;
  padding:0;border:0}
.segrow .cap__ico{margin-top:2px}
.segrow .cap__txt b{font-weight:450;font-size:17px;line-height:24px;letter-spacing:-.2px;color:var(--ink)}
.segrow .cap__txt em{font-size:14.5px;line-height:21px}

/* the outcome figure, on the page ground rather than in a green block */
.segrow--stat{align-items:baseline}
.segfig{display:flex;align-items:baseline;gap:22px}
.segfig b{font-weight:250;font-size:64px;line-height:60px;letter-spacing:-2.8px;color:var(--ink);
  font-variant-numeric:tabular-nums}
.segfig span{font-weight:400;font-size:16px;line-height:24px;color:var(--muted);max-width:32ch}

@media (max-width:1199.98px){
  .segrow{grid-template-columns:1fr;gap:20px;padding:28px 0}
  .segrow .caps{gap:22px 32px}
}
@media (max-width:809.98px){
  .segrow .caps{grid-template-columns:1fr}
  .segfig{flex-direction:column;gap:8px}
  .segfig b{font-size:48px;line-height:46px;letter-spacing:-1.8px}
}

/* --- No API: keep the two columns down to tablet, stack cleanly below ------ */
.noapi{flex-direction:row!important;align-items:center!important;gap:48px!important}
.noapi__copy{flex:1 1 52%;min-width:0}
.brw{flex:1 1 48%;max-width:none;min-width:0}
@media (max-width:1023.98px){
  .noapi{flex-direction:column!important;align-items:stretch!important;gap:28px!important}
  .noapi__copy,.brw{flex:1 1 auto}
  .brw{max-width:520px}
}

/* --- bento: never leave a half-width tile beside empty space --------------- */
@media (max-width:1199.98px){
  .bento{grid-template-columns:1fr 1fr}
  .tile--flow{grid-column:1 / -1}
  .tile--conv{grid-column:1 / -1}
  .tile--flow .wf2{grid-template-columns:1fr 1fr}
}
@media (max-width:899.98px){
  .bento{grid-template-columns:1fr}
  .tile--flow,.tile--conv,.tile--wide{grid-column:auto}
  .tile--flow .wf2{grid-template-columns:1fr;gap:24px}
}

/* the row numbers go; the title carries the row on its own */
.stk__row i{display:none}
.stk__row > button{gap:0}
.stk__body p,.stk__body ul{padding-left:0}

/* hero cards stay fully opaque, no pattern showing through */
.ha__card,.ha__winbody,.ha__panel{background-color:#ffffff}
.ha__viewport{-webkit-mask-image:none;mask-image:none}

/* --- Control rows: a real step between title, caption and content ---------- */
.stk__row > button b{font-weight:450;font-size:20px;line-height:26px;letter-spacing:-.35px;color:var(--ink)}
.stk__body p{font-weight:400;font-size:14.5px;line-height:21px;color:var(--muted);
  padding:0 0 16px;max-width:44ch}
.stk__body ul{gap:11px;padding-bottom:22px}
.stk__body li{font-weight:400;font-size:15.5px;line-height:23px;color:var(--ink);padding-left:24px}
.stk__body li::before{top:5px;width:14px;height:14px}

/* ═══ Segments, take two: two equal columns, real headings, no boxes ═══════ */
.seg{display:grid!important;grid-template-columns:1fr 1fr;gap:0 64px;align-items:start}
.segrow{display:block;grid-template-columns:none;padding:0;border-top:0;
  border-bottom:1px solid var(--line);padding-bottom:36px;margin-bottom:36px}
.segrow:first-child{padding-top:0}
.segrow__label{font-weight:450;font-size:20px;line-height:26px;letter-spacing:-.35px;
  text-transform:none;color:var(--ink);padding:0;margin-bottom:22px}
.segrow .caps{display:flex;flex-direction:column;gap:0}
.segrow .caps li{display:grid;grid-template-columns:20px 1fr;gap:13px;align-items:start;
  padding:14px 0;border-top:1px solid var(--line)}
.segrow .caps li:first-child{border-top:0;padding-top:0}
.segrow .cap__ico{width:18px;height:18px;margin-top:3px;border:0;background-color:transparent;
  background-size:100%;background-position:center;background-repeat:no-repeat}
.segrow .cap__txt b{font-weight:450;font-size:16px;line-height:23px;color:var(--ink)}
.segrow .cap__txt em{font-size:14.5px;line-height:21px;color:var(--muted)}

/* the outcome and the lines run the full width, under both columns */
.segrow--stat{grid-column:1 / -1;border-bottom:1px solid var(--line);
  padding-bottom:32px;margin-bottom:32px}
.segrow--stat .segrow__label{margin-bottom:14px}
.seg__lines{grid-column:1 / -1;margin-top:0!important;border-top:0!important;padding-top:0!important}

@media (max-width:899.98px){
  .seg{grid-template-columns:1fr;gap:0}
  .segrow{padding-bottom:28px;margin-bottom:28px}
}

/* an earlier !important was forcing this back to a single column */
.seg{display:grid!important;grid-template-columns:1fr 1fr!important;gap:0 64px!important}
.segrow--stat,.seg__lines{grid-column:1 / -1!important}
@media (max-width:899.98px){
  .seg{grid-template-columns:1fr!important}
}

/* hero cards slide in fully opaque: no frame where the pattern shows through */
.ha__card{opacity:1!important;transform:translateY(22px);
  transition:transform .6s var(--ease-out)}
.ha__card.is-in{transform:none}
.ha__card.is-swap>*{opacity:0;transition:opacity .15s var(--ease)}
.ha__viewport{overflow:hidden}

/* the quote and the customer logo share one left edge */
.tcard__pre{padding-left:44px}
.tcard__tag{left:44px;right:44px}
@media (max-width:809.98px){
  .tcard__pre{padding-left:22px}
  .tcard__tag{left:22px;right:22px}
}

/* --- the outcome becomes the section's visual anchor ----------------------- */
.segrow--stat{
  background:radial-gradient(130% 160% at 8% 0%,#0f4a38 0%,#06251c 62%,#06251c 100%);
  border-radius:var(--r-lg);border-bottom:0!important;
  padding:36px 40px!important;margin:8px 0 32px!important;
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:36px}
.segrow--stat .segrow__label{grid-column:1 / -1;color:rgba(242,241,237,.5);
  font-size:12px;letter-spacing:1.6px;text-transform:uppercase;margin:0 0 6px}
.segrow--stat .segfig{display:contents}
.segrow--stat .segfig b{font-weight:250;font-size:76px;line-height:70px;letter-spacing:-3.4px;color:#f2f1ed}
.segrow--stat .segfig span{font-size:17px;line-height:26px;color:rgba(242,241,237,.68);max-width:34ch}
@media (max-width:809.98px){
  .segrow--stat{grid-template-columns:1fr;gap:14px;padding:28px 24px!important}
  .segrow--stat .segfig b{font-size:56px;line-height:52px;letter-spacing:-2.2px}
}

/* --- the conversational tile: the panel fills the space instead of leaving it */
.tile--conv .viz{margin-top:22px!important;flex:1 1 auto;display:flex}
.tile--conv .live{width:100%;height:100%}
.tile--conv .live__viz{height:auto;min-height:64px}
.tile--conv .live__say{margin-top:4px}

/* --- No API: a quiet pattern at the edges so the block holds the eye ------- */
.noapi{position:relative;overflow:hidden}
.noapi__field{position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-mask-image:
    radial-gradient(66% 78% at 50% 50%,transparent 0,transparent 46%,#101010 88%),
    linear-gradient(180deg,transparent 0,#101010 18%,#101010 82%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:
    radial-gradient(66% 78% at 50% 50%,transparent 0,transparent 46%,#101010 88%),
    linear-gradient(180deg,transparent 0,#101010 18%,#101010 82%,transparent 100%);
          mask-composite:intersect;opacity:.7}
.noapi__field canvas{display:block;width:100%;height:100%}
.noapi__copy,.brw{position:relative;z-index:1}
.noapi .seg__kicker,.noapi .t-eyebrow{color:var(--green-deep)!important}

/* --- hero card headers: icon in a tile, label at the system's weight ------- */
.ha__head{gap:12px;margin-bottom:16px;align-items:center}
.ha__head b{font-weight:450;font-size:15.5px;line-height:21px;letter-spacing:-.1px;color:var(--ink)}
.ha__ico,.ha__tick,.ha__sync{
  width:30px;height:30px;flex:0 0 30px;padding:6px;border-radius:var(--r-sm);
  background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);
  stroke-width:1.6;stroke:var(--ink)}
.ha__mark{width:30px;height:30px;flex:0 0 30px;border-radius:var(--r-sm);
  background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);
  justify-content:flex-start;padding:6px;overflow:hidden}
.ha__mark img{height:18px}
.ha__who{gap:12px;margin-bottom:14px}
.ha__who b{font-weight:450;font-size:15.5px;line-height:21px;color:var(--ink)}
.ha__quote{font-size:16px;line-height:26px}

/* --- balance the two columns: the outcome fills the short right one -------- */
.seg{grid-template-rows:auto 1fr auto}
.segrow:nth-of-type(1){grid-column:1;grid-row:1 / 3}
.segrow:nth-of-type(2){grid-column:2;grid-row:1}
.segrow--stat{grid-column:2!important;grid-row:2;align-self:stretch;
  margin:0 0 32px!important;display:flex!important;flex-direction:column;justify-content:center;
  gap:6px;padding:32px 34px!important}
.segrow--stat .segfig{display:flex!important;flex-direction:column;align-items:flex-start;gap:10px}
.segrow--stat .segfig b{font-size:66px;line-height:60px;letter-spacing:-2.8px}
.segrow--stat .segfig span{font-size:16px;line-height:24px;max-width:30ch}
.seg__lines{grid-column:1 / -1!important;grid-row:3}

/* both icon families carry the same weight */
.segrow .cap__ico--spark{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10' fill='%2300b585'/%3E%3Cpath d='M11 5.6v10.8M5.6 11h10.8' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}

@media (max-width:899.98px){
  .seg{grid-template-rows:none}
  .segrow:nth-of-type(1),.segrow:nth-of-type(2),.segrow--stat,.seg__lines{
    grid-column:1!important;grid-row:auto!important}
  .segrow--stat{margin:0 0 28px!important}
}

/* the outcome panel reads left-aligned like everything else */
.segrow--stat{align-items:flex-start!important;text-align:left}
.segrow--stat .segrow__label{width:100%;text-align:left;margin:0 0 10px}

/* --- channel visuals: real UI fragments, not abstract bars ----------------- */
.live__viz{height:auto;min-height:76px;position:relative}
.lv{flex-direction:column;justify-content:center;gap:8px;align-items:stretch}
.lv__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.lv__top b{font-weight:450;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.lv__live{display:inline-flex;align-items:center;gap:7px;font-weight:450;font-size:12.5px;color:var(--green-deep)}
.lv__live i{width:7px;height:7px;border-radius:50%;background:var(--green);flex:0 0 7px;
  animation:lvPulse 2s var(--ease-out) infinite}
@keyframes lvPulse{0%,100%{opacity:1}50%{opacity:.35}}
.lv__from{font-weight:450;font-size:13px;color:var(--ink)}
.lv__line{font-weight:400;font-size:13.5px;line-height:20px;color:#4a4842}
.lv__att{display:inline-block;margin-left:8px;font-style:normal;font-weight:450;font-size:11.5px;
  color:var(--green-deep);background:rgba(0,181,133,.12);border-radius:var(--r-sm);padding:2px 7px}

.lv__bub{max-width:82%;border-radius:var(--r-md);padding:8px 12px;
  font-weight:400;font-size:13px;line-height:19px}
.lv__bub--in{align-self:flex-start;background:var(--bg);color:#4a4842;
  box-shadow:inset 0 0 0 1px var(--line)}
.lv__bub--out{align-self:flex-end;background:var(--green);color:#ffffff}
.lv--sms,.lv--chat{gap:7px}

/* each fragment still arrives with its channel */
.lv>*{opacity:0;animation:lvPop var(--loop) var(--ease-out) infinite}
.lv--voice>*:nth-child(1){animation-delay:.1s}
.lv--voice>*:nth-child(2){animation-delay:.34s}
.lv--sms>*:nth-child(1){animation-delay:2.48s}
.lv--sms>*:nth-child(2){animation-delay:2.86s}
.lv--email>*:nth-child(1){animation-delay:4.85s}
.lv--email>*:nth-child(2){animation-delay:5.15s}
.lv--chat>*:nth-child(1){animation-delay:7.22s}
.lv--chat>*:nth-child(2){animation-delay:7.6s}
@media (prefers-reduced-motion:reduce){.lv>*{opacity:1;animation:none}}

/* --- the segment content sits on a white card ----------------------------- */
.seg{background:#ffffff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:40px 44px!important;gap:0 56px!important}
.segrow{padding-bottom:0;margin-bottom:0}
.segrow:nth-of-type(1),.segrow:nth-of-type(2){border-bottom:0}
.segrow--stat{margin:28px 0 0!important}
.seg__lines{margin-top:32px!important;padding-top:20px!important;
  border-top:1px solid var(--line)!important}
@media (max-width:899.98px){
  .seg{padding:28px 24px!important}
  .segrow:nth-of-type(1){border-bottom:1px solid var(--line);padding-bottom:28px;margin-bottom:28px}
}

/* --- segmented control instead of an underline ---------------------------- */
.tabs__bar{position:relative;display:inline-flex;align-self:center;
  background:#ffffff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:5px;gap:0;margin:0 auto 36px;border-bottom:1px solid var(--line)}
.tabs__tab{position:relative;z-index:1;background:none;border:0;cursor:pointer;
  padding:11px 30px;border-radius:var(--r-md);font-family:inherit;
  font-weight:450;font-size:15px;line-height:20px;letter-spacing:.1px;color:var(--muted);
  transition:color .3s var(--ease-out)}
.tabs__tab[aria-selected="true"]{color:var(--ink)}
.tabs__tab:hover{color:var(--ink)}
.tabs__ink{position:absolute;left:5px;top:5px;bottom:5px;height:auto!important;
  background:var(--bg)!important;border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .3s var(--ease),width .3s var(--ease)}
.tabs{display:flex;flex-direction:column}
@media (max-width:809.98px){
  .tabs__bar{width:100%;padding:4px}
  .tabs__tab{flex:1;padding:10px 8px;font-size:14px}
}

/* --- a hairline down the gap so the two groups read as separate ------------ */
.segrow:nth-of-type(2){border-left:1px solid var(--line);
  padding-left:28px;margin-left:-28px}
@media (max-width:899.98px){
  .segrow:nth-of-type(2){border-left:0;padding-left:0;margin-left:0;
    border-top:1px solid var(--line);padding-top:28px;margin-top:28px}
}

/* --- the active segment must read at a glance ----------------------------- */
.tabs__bar{background:var(--bg);border:1px solid var(--line);margin-bottom:20px}
.tabs__ink{background:#ffffff!important;box-shadow:0 1px 2px rgba(16,16,16,.06),0 0 0 1px var(--line)}
.tabs__tab{color:#7a7a7a}
.tabs__tab[aria-selected="true"]{color:var(--ink);font-weight:450}

/* the vertical divider goes; the gap alone separates the two groups */
.segrow:nth-of-type(2){border-left:0!important;padding-left:0!important;margin-left:0!important}
@media (max-width:899.98px){
  .segrow:nth-of-type(2){border-top:1px solid var(--line);padding-top:28px;margin-top:28px}
}

/* the mark is 25.7 wide in a 103x30 viewBox, so the crop must be 0.857 of the
   rendered height, not the full tile width, or the next glyph creeps in */
.ha__mark{padding:6px 7px 6px 6px;justify-content:flex-start;align-items:center}
.ha__mark img{height:18px;width:auto;max-width:none;object-fit:none;object-position:left center}

/* the No API card: copy hard against the left padding, no pattern artefacts */
.noapi{justify-content:flex-start!important;align-items:center!important}
.noapi__copy{flex:1 1 52%;padding-right:24px;align-items:flex-start;text-align:left}
.noapi__copy>*{margin-left:0}

/* a real standalone mark, so nothing has to be cropped out of the wordmark */
.ha__mark{padding:6px;justify-content:center}
.ha__mark img{height:18px;width:18px;object-fit:contain;object-position:center}
.hub__mark{width:30px;height:30px;flex:0 0 30px;justify-content:center;overflow:visible}
.hub__mark img{height:26px;width:26px;object-fit:contain;object-position:center}
.tcard__photo .tcard__lockmark{object-fit:contain;object-position:center}

/* the old abstract-bar rules still matched the new markup's <em> and <u> */
.lv--email em,.lv--email u,.lv--sms b,.lv--chat b{
  height:auto;width:auto;flex:0 0 auto;background:none;border-radius:0;
  display:inline;animation:none}
.lv__att{display:inline-block!important;margin-left:8px;font-style:normal;font-weight:450;
  font-size:11.5px;line-height:17px;color:var(--green-deep)!important;
  background:rgba(0,181,133,.12)!important;border-radius:var(--r-sm)!important;padding:2px 8px!important}
.lv__bub{display:block!important;max-width:82%;border-radius:var(--r-md)!important;padding:8px 12px!important;
  font-weight:400;font-size:13px;line-height:19px;height:auto!important;width:auto!important}
.lv__bub--in{align-self:flex-start;background:var(--bg)!important;color:#4a4842!important;
  box-shadow:inset 0 0 0 1px var(--line)}
.lv__bub--out{align-self:flex-end;background:var(--green)!important;color:#ffffff!important}
.lv>*{opacity:0;animation:lvPop var(--loop) var(--ease-out) infinite}

/* pending rows: an outlined mark, not a grey disc with a grey tick on it */
.ha__rows--panel .ha__ok{
  background-color:transparent!important;
  box-shadow:inset 0 0 0 1.4px rgba(16,16,16,.22);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.2 10.4l2.6 2.5 5.2-5.4' fill='none' stroke='%237a7a7a' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important}
.ha__rows--green .ha__ok{background-color:var(--green)!important;box-shadow:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.2 10.4l2.6 2.5 5.2-5.4' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important}

/* --- hub wires: the pulse must run inside the line, not float beside it ---- */
.hub__drops i{position:relative;overflow:hidden;width:1px;height:100%;
  background:var(--line);border-left:0}
.hub__drops i::after{content:"";position:absolute;left:0;top:0;width:1px;height:18px;
  background:linear-gradient(180deg,rgba(0,181,133,0),var(--green));opacity:1;
  transform:translateY(-18px);
  animation:hubDropY var(--loop) var(--ease) infinite;
  animation-delay:calc(var(--i) * .42s)}
@keyframes hubDropY{0%{transform:translateY(-18px)}
  16%{transform:translateY(40px)}18%,100%{transform:translateY(40px)}}

.hub__riser{position:absolute;left:50%;top:40px;width:1px;height:48px;
  background:var(--line);overflow:hidden}
.hub__riser u{position:absolute;left:0;top:0;width:1px;height:20px;text-decoration:none;
  background:linear-gradient(180deg,rgba(0,181,133,0),var(--green));
  transform:translateY(-20px);
  animation:hubRiseY var(--loop) var(--ease) infinite}
@keyframes hubRiseY{0%,12%{transform:translateY(-20px)}
  26%{transform:translateY(48px)}28%,100%{transform:translateY(48px)}}

@media (prefers-reduced-motion:reduce){
  .hub__drops i::after,.hub__riser u{animation:none;transform:translateY(0)}
}

/* the stack fades out at the very top edge, but a settled card stays opaque */
.ha__viewport{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(16,16,16,.5) 16px,#101010 40px,#101010 100%);
          mask-image:linear-gradient(180deg,transparent 0,rgba(16,16,16,.5) 16px,#101010 40px,#101010 100%);
}

/* the backoffice mark means "written into your system", not a generic plus */
.segrow .cap__ico--spark,.cap__ico--spark{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10' fill='%2300b585'/%3E%3Cpath d='M11 5.4v7.2M8.1 9.9 11 12.8l2.9-2.9M6.6 15.6h8.8' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-color:transparent!important;background-size:100%;background-repeat:no-repeat;background-position:center}

/* a bigger avatar in the hero card */
.ha__avatar{width:44px;height:44px;flex:0 0 44px}
.ha__avatar svg{width:44px;height:44px}
.ha__who{gap:14px}

/* the panel shares the card's white, no off-white band */
.viz--bleed{background:#ffffff}
.wf2 .viz{background:#ffffff}

/* the quote overlay must never swallow the play button's clicks */
.tcard__pre{pointer-events:none;z-index:2}
.tcard__play{z-index:5;pointer-events:auto;cursor:pointer}
.tcard.is-active .tcard__play{pointer-events:auto}
.tcard:not(.is-active) .tcard__play{pointer-events:none}
.tcard__tag{pointer-events:none;z-index:3}

/* the real portrait fills the avatar */
.ha__avatar{overflow:hidden;border-radius:50%;background:#dedcd6}
.ha__avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* --- the signal must travel the whole path: down, along the bus, then in --- */
.hub__bus{position:absolute;overflow:hidden;
  left:calc(50% / var(--cols));right:calc(50% / var(--cols));top:40px;height:1px;
  background:var(--line)}
.hub__bus::before,.hub__bus::after{content:"";position:absolute;top:0;height:1px;width:74px}
.hub__bus::before{left:0;
  background:linear-gradient(90deg,rgba(0,181,133,0),var(--green));
  transform:translateX(-74px);
  animation:hubBusL var(--loop) var(--ease) infinite}
.hub__bus::after{right:0;
  background:linear-gradient(270deg,rgba(0,181,133,0),var(--green));
  transform:translateX(74px);
  animation:hubBusR var(--loop) var(--ease) infinite}
@keyframes hubBusL{0%,14%{transform:translateX(-74px)}
  28%{transform:translateX(calc(50vw))}30%,100%{transform:translateX(calc(50vw))}}
@keyframes hubBusR{0%,14%{transform:translateX(74px)}
  28%{transform:translateX(calc(-50vw))}30%,100%{transform:translateX(calc(-50vw))}}

/* the riser fires after the bus has reached the middle */
@keyframes hubRiseY{0%,26%{transform:translateY(-20px)}
  40%{transform:translateY(48px)}42%,100%{transform:translateY(48px)}}
@media (prefers-reduced-motion:reduce){
  .hub__bus::before,.hub__bus::after{animation:none;opacity:0}
}

/* grow the pulse to exactly half the bus, so both ends meet at the centre */
.hub__bus::before,.hub__bus::after{width:0;transform:none!important;
  animation:hubBusGrow var(--loop) var(--ease) infinite}
.hub__bus::before{left:0;background:linear-gradient(90deg,rgba(0,181,133,0),var(--green))}
.hub__bus::after{right:0;background:linear-gradient(270deg,rgba(0,181,133,0),var(--green))}
@keyframes hubBusGrow{0%,14%{width:0;opacity:1}
  28%{width:50%;opacity:1}34%{width:50%;opacity:0}35%,100%{width:0;opacity:0}}

/* --- craft details: soft lift on the cards, nodes where the wires meet ----- */
.hub__card{box-shadow:0 1px 2px rgba(16,16,16,.04),0 8px 20px -14px rgba(16,16,16,.18)}
.hub__core{box-shadow:0 1px 2px rgba(16,16,16,.05),0 14px 34px -20px rgba(16,16,16,.24)}
.agraph__lead,.agraph__subs>div{box-shadow:0 1px 2px rgba(16,16,16,.04),0 8px 20px -14px rgba(16,16,16,.16)}
.brw,.stk__panel .aud,.stk__panel .trace,.stk__panel .gap{
  box-shadow:0 1px 2px rgba(16,16,16,.04),0 10px 26px -18px rgba(16,16,16,.18)}

/* a small node where each drop meets the bus, and at both ends of the riser */
.hub__drops{position:relative}
.hub__drops i::before{content:"";position:absolute;left:-1.5px;bottom:-2px;
  width:4px;height:4px;border-radius:1px;background:var(--line);z-index:1}
.hub__riser::before,.hub__riser::after{content:"";position:absolute;left:-1.5px;
  width:4px;height:4px;border-radius:1px;background:var(--line)}
.hub__riser::before{top:-2px}
.hub__riser::after{bottom:-2px}

/* the travelling pulse carries a crisp head, no blur */
.hub__drops i::after,.hub__riser u{box-shadow:0 0 0 1px rgba(0,181,133,.18)}

/* the caller's message sits in a soft bubble, the way a real thread reads */
.ha__quote{background:var(--bg);border-radius:var(--r-md);
  padding:14px 16px;margin:0;font-size:15.5px;line-height:24px;color:#4a4842}
.ha__who{margin-bottom:12px}

/* --- the graph's nodes stay put; only the wires and dots keep cycling ------ */
.agraph__node,.agraph__lead,.agraph__subs>div,.agraph__io{
  opacity:1!important;transform:none!important;animation:none!important}
.reveal .agraph__node,.reveal .agraph__lead,
.reveal .agraph__subs>div,.reveal .agraph__io{
  opacity:0!important;transform:translateY(8px)!important;
  transition:opacity .3s linear,transform .6s var(--ease-out);
  transition-delay:var(--d,0s)}
.reveal.is-in .agraph__node,.reveal.is-in .agraph__lead,
.reveal.is-in .agraph__subs>div,.reveal.is-in .agraph__io{
  opacity:1!important;transform:none!important}

/* no rule above the channel panel; the card already ends there */
.viz--bleed{border-top:0}

/* --- the mark reads grey and turns slowly, like the agent is working ------- */
.ha__mark img{opacity:.45;animation:markTurn 14s linear infinite;transform-origin:50% 50%}
@keyframes markTurn{to{transform:rotate(360deg)}}
/* while a card is actively working it turns faster and darkens a little */
.ha__card:has(.ha__dots) .ha__mark img{opacity:.62;animation-duration:5s}
@media (prefers-reduced-motion:reduce){
  .ha__mark img{animation:none}
}

/* more room around the channel row */
.live__tabs span{padding:10px 0 18px;gap:9px;font-size:13px}
.live__tabs svg{width:21px;height:21px}
.live__tabs{margin-bottom:24px}

/* the agent graph panel is white like the card it sits in */
.viz,.viz--flow,.wf2 .viz{background:#ffffff!important}
.agraph__io span{background:#ffffff;box-shadow:inset 0 0 0 1px var(--line);border:0}

/* no tile behind the card-header icons: the marks stand on their own */
.ha__mark,.ha__ico,.ha__tick,.ha__sync{
  background:none!important;box-shadow:none!important;border-radius:0!important;padding:0!important}
.ha__mark{width:24px;height:24px;flex:0 0 24px}
.ha__mark img{height:24px;width:24px}
.ha__ico,.ha__tick,.ha__sync{width:22px;height:22px;flex:0 0 22px}

/* the mark reads larger and stays grey */
.ha__mark{width:30px;height:30px;flex:0 0 30px}
.ha__mark img{height:30px;width:30px;opacity:.42}
.ha__card:has(.ha__dots) .ha__mark img{opacity:.55}

/* --- agent rows in the Cofounder key: name, muted detail, status chip ------ */
.ha__card--status{display:flex;align-items:center;gap:12px}
.ha__working{flex:1 1 auto;font-weight:450;font-size:15px;line-height:21px;color:var(--ink)}
.ha__chip{flex:0 0 auto;margin-left:auto;
  font-weight:450;font-size:11.5px;line-height:16px;letter-spacing:.2px;
  color:var(--green-deep);background:rgba(0,181,133,.12);
  border-radius:var(--r-sm);padding:4px 9px}
.ha__head .ha__chip{margin-left:auto}
.ha__dots{flex:0 0 auto}

/* --- the Control stage reads like a canvas, and the artefact fills it ------ */
.stk__stage{padding:22px;
  background:var(--bg);
  background-image:radial-gradient(rgba(16,16,16,.09) 1px,transparent 1px);
  background-size:14px 14px;background-position:0 0}
.stk__panel{align-self:stretch;display:flex;align-items:center}
.stk__panel>*{width:100%}
.aud,.trace,.gap{padding:20px 22px}
.aud__list li,.trace__list li{padding:13px 0}
.aud__list em,.trace__list em{font-size:14.5px;line-height:21px}
@media (max-width:809.98px){.stk__stage{padding:16px}}

/* --- completed rows read as done: hairline row, filled green check --------- */
.ha__rows--panel li{
  background:#ffffff!important;box-shadow:inset 0 0 0 1px var(--line);
  border-radius:var(--r-md);padding:11px 14px;
  display:flex;align-items:center;gap:11px;
  font-weight:450;font-size:14.5px;line-height:21px;color:var(--ink)!important}
.ha__rows--panel{display:flex;flex-direction:column;gap:8px}
.ha__rows--panel .ha__ok{
  flex:0 0 18px;width:18px;height:18px;border-radius:50%;
  background-color:var(--green)!important;box-shadow:none!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.2 10.4l2.6 2.5 5.2-5.4' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-size:100%;background-position:center;background-repeat:no-repeat}

/* --- the pattern stays continuous; it just fades where the words sit ------- */
.ctacard__field{
  opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#101010 22%,#101010 78%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#101010 22%,#101010 78%,transparent 100%);
  -webkit-mask-composite:add;mask-composite:add}
.ctacard__body{position:relative;z-index:1}
.ctacard__body::before{content:"";position:absolute;inset:-28px -44px;z-index:-1;
  background:radial-gradient(60% 70% at 50% 50%,rgba(255,255,255,.94) 0,rgba(255,255,255,.86) 55%,rgba(255,255,255,0) 100%)}

/* --- the email card reads as a message, not a form ------------------------- */
.ha__when{flex:0 0 auto;font-weight:400;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.ha__panel{background:var(--bg)!important;border:0!important;box-shadow:none!important;
  border-radius:var(--r-md);padding:13px 15px}
.ha__panel p{font-weight:400;font-size:14.5px;line-height:22px;color:#4a4842;margin:0}

/* --- the channel row is labels only ---------------------------------------- */
.live__tabs svg{display:none}
.live__tabs span{padding:12px 0 16px;gap:0;font-size:14.5px;font-weight:450}

/* the agent graph sits on the same canvas as the Control stage */
.viz--flow,.wf2 .viz{background:var(--bg)!important;
  background-image:radial-gradient(rgba(16,16,16,.09) 1px,transparent 1px)!important;
  background-size:14px 14px!important;background-position:0 0!important;
  border:1px solid var(--line);border-radius:var(--r-lg)}
.agraph__io span{background:#ffffff;box-shadow:inset 0 0 0 1px var(--line)}

/* --- the agent marker is quiet; the content leads ------------------------- */
.ha__mark{width:20px;height:20px;flex:0 0 20px}
.ha__mark img{width:20px;height:20px;opacity:.32}
.ha__card:has(.ha__dots) .ha__mark img{opacity:.45}
.ha__head b{font-weight:450;font-size:15px;line-height:21px;letter-spacing:-.1px}
.ha__rows li{font-size:14.5px;line-height:22px}
.ha__ok{width:17px;height:17px;flex:0 0 17px}

/* the backoffice mark is an agent cursor, not a download arrow */
.cap__ico--spark,.segrow .cap__ico--spark{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10' fill='%2300b585'/%3E%3Cpath d='M7.9 5.6 15.2 11l-3.4.4 1.4 2.9-1.6.8-1.4-3-2.3 2z' fill='%23ffffff'/%3E%3C/svg%3E")!important;
  background-color:transparent!important;background-size:100%;background-repeat:no-repeat;background-position:center}

/* the card header is a header: its own line, then the rows */
.ha__head{padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.ha__card--status .ha__head{padding-bottom:0;margin-bottom:0;border-bottom:0}
.ha__who{padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line)}

/* --- the hero card, one notch smaller all round --------------------------- */
.ha__card{padding:18px 20px}
.ha__avatar{width:36px;height:36px;flex:0 0 36px}
.ha__avatar svg,.ha__avatar img{width:36px;height:36px}
.ha__who{gap:11px;padding-bottom:10px;margin-bottom:12px}
.ha__who b{font-size:14.5px;line-height:20px}
.ha__quote{padding:11px 13px;font-size:14.5px;line-height:22px}
.ha__head{padding-bottom:10px;margin-bottom:12px;gap:10px}
.ha__head b{font-size:14.5px;line-height:20px}
.ha__mark{width:18px;height:18px;flex:0 0 18px}
.ha__mark img{width:18px;height:18px}
.ha__rows li{font-size:14px;line-height:21px}
.ha__ok{width:16px;height:16px;flex:0 0 16px}
.ha__rows--panel li{padding:9px 12px;font-size:14px;line-height:20px}
.ha__winbody{padding:16px 18px 18px}
.ha__panel{padding:11px 13px}
.ha__panel p{font-size:14px;line-height:21px}
.ha__working{font-size:14.5px;line-height:20px}
.ha__track{gap:9px}

/* --- Control rows: the open one is the darkest, the rest step back --------- */
.stk__row > button b{color:#7a7a7a;transition:color .15s var(--ease-out)}
.stk__row.is-open > button b{color:var(--ink)}
.stk__row > button:hover b{color:var(--ink)}
.stk__row i{color:#7a7a7a}
.stk__row.is-open i{color:var(--green-deep)}
.stk__body p{color:#7a7a7a}
.stk__body li{color:#4a4842}
.stk__row > button u::before,.stk__row > button u::after{background:#7a7a7a}
.stk__row.is-open > button u::before,.stk__row.is-open > button u::after{background:var(--ink)}

/* the divider runs the full width of the card */
.ha__who,.ha__head{
  margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}
.ha__card--status .ha__head{margin:0;padding:0}
.ha__winbody .ha__head{margin-left:-18px;margin-right:-18px;padding-left:18px;padding-right:18px}

/* --- the statement band gets a quieter cousin of the pattern --------------- */
.statement{position:relative;overflow:hidden}
.statement__field{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.85;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#101010 18%,#101010 82%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#101010 18%,#101010 82%,transparent 100%)}
.statement__field canvas{display:block;width:100%;height:100%}
.statement .shell{position:relative;z-index:1}
.statement__text{position:relative}

/* ==========================================================================
   Customer wall — Ramp-style logo grid with a featured case study
   ========================================================================== */
.cwall{padding:96px var(--pad-x) 104px;background:var(--card)}
.cwall .shell{display:flex;flex-direction:column;align-items:flex-start}
.cwall__head{
  margin:0;max-width:30ch;
  font-weight:400;font-size:clamp(26px,2.6vw,36px);line-height:1.22;letter-spacing:-1px;
  color:var(--ink);
}
.cwall__head span{color:var(--muted)}
.cwall__link{margin-top:22px}
.cwall__grid{
  width:100%;margin-top:52px;
  display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:136px;
  gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
.cwall__cell{
  position:relative;background:#f2f1ed;
  display:flex;align-items:center;justify-content:center;padding:20px;
  text-decoration:none;transition:background .3s var(--ease);
}
.cwall__cell img{max-width:100%;max-height:38px;height:auto;object-fit:contain;
  filter:grayscale(1);opacity:.46;transition:filter .3s var(--ease),opacity .3s var(--ease)}
.cwall__cell--link{cursor:pointer}
.cwall__cell--link:hover{background:#f2f1ed}
.cwall__cell--link:hover img{filter:none;opacity:1}
.cwall__go{
  position:absolute;top:14px;right:14px;
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#ffffff;color:var(--muted);
  font-size:13px;line-height:1;
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease-out);
}
.cwall__cell--link:hover .cwall__go{background:var(--ink-nav);color:#ffffff;transform:translate(2px,-2px)}

/* featured story tile */
.cwall__story{
  grid-column:5/7;grid-row:1/3;position:relative;overflow:hidden;
  background:#101010;text-decoration:none;cursor:pointer;display:block;
}
.cwall__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease-out)}
.cwall__story::after{content:"";position:absolute;inset:auto 0 0 0;height:72%;
  background:linear-gradient(180deg,rgba(16,16,16,0),rgba(16,16,16,.74))}
.cwall__story:hover .cwall__photo{transform:scale(1.04)}
.cwall__go--light{background:rgba(255,255,255,.22);color:#ffffff;backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);z-index:2}
.cwall__story:hover .cwall__go--light{background:#ffffff;color:var(--ink-nav)}
.cwall__badge{
  position:absolute;left:26px;bottom:112px;z-index:2;
  display:inline-flex;align-items:center;height:28px;padding:0 10px;
  background:#ffffff;border-radius:var(--r-sm);
}
.cwall__badge img{height:14px;width:auto}
.cwall__fig{
  position:absolute;left:26px;bottom:56px;z-index:2;
  font-weight:400;font-size:clamp(34px,3.4vw,50px);line-height:1;letter-spacing:-2px;color:#ffffff;
}
.cwall__cap{
  position:absolute;left:26px;right:26px;bottom:26px;z-index:2;
  font-weight:450;font-size:14px;line-height:20px;color:rgba(255,255,255,.82);
}
@media (max-width:1099.98px){
  .cwall__grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:124px}
  .cwall__story{grid-column:1/5;grid-row:3/5}
}
@media (max-width:809.98px){
  .cwall{padding:64px 20px 72px}
  .cwall__grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:104px;margin-top:36px}
  .cwall__cell img{max-height:30px}
  .cwall__story{grid-column:1/3;grid-row:auto;min-height:280px}
  .cwall__badge{bottom:104px}
}
@media (prefers-reduced-motion:reduce){
  .cwall__photo,.cwall__go{transition:none}
}

/* ==========================================================================
   Hero cards — one more pass on the UI itself (Cofounder's product surface:
   a soft shadow, a live meta line, quieter rows)
   ========================================================================== */
.ha__card{
  padding:18px 20px 20px;
  box-shadow:0 1px 2px rgba(16,16,16,.04),0 14px 34px -22px rgba(16,16,16,.22);
}
.ha__who{align-items:center}
.ha__who b{font-size:15px}
.ha__who .ha__when{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:12px}
.ha__pulse{
  width:6px;height:6px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 0 rgba(0,181,133,.45);animation:haPulse 2.2s ease-out infinite;
}
@keyframes haPulse{
  0%{box-shadow:0 0 0 0 rgba(0,181,133,.45)}
  70%{box-shadow:0 0 0 6px rgba(0,181,133,0)}
  100%{box-shadow:0 0 0 0 rgba(0,181,133,0)}
}
.ha__quote{font-size:15px;line-height:23px;padding:13px 15px}
.ha__avatar{width:34px;height:34px;flex:0 0 34px}
.ha__avatar svg{width:34px;height:34px}

/* the running pill is quiet, the way a status pill should be */
.ha__chip{
  color:#4a4842;background:rgba(16,16,16,.05);
  box-shadow:inset 0 0 0 1px var(--line);
  font-size:12px;letter-spacing:.3px;padding:3px 8px;
}
.ha__card:has(.ha__dots) .ha__chip{color:var(--green-deep);background:rgba(0,181,133,.10);
  box-shadow:inset 0 0 0 1px rgba(0,181,133,.16)}

/* completed rows lose the box; a hairline between them is enough */
.ha__rows--green li{gap:10px;padding:1px 0}
.ha__bar{height:5px;margin:0 0 12px}
@media (prefers-reduced-motion:reduce){.ha__pulse{animation:none}}

/* the portal's own button is a neutral control, not our brand black */
.brw__btn{
  background:#dedcd6!important;color:#4a4842!important;
  box-shadow:inset 0 0 0 1px rgba(16,16,16,.10);
}

/* ==========================================================================
   Why Strada — three cards you can actually open
   ========================================================================== */
.why__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.why__card{
  display:flex;flex-direction:column;align-items:flex-start;gap:0;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px 28px 24px;text-decoration:none;cursor:pointer;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease-out),transform .3s var(--ease-out);
}
.why__card:hover{
  border-color:rgba(16,16,16,.22);transform:translateY(-3px);
  box-shadow:0 1px 2px rgba(16,16,16,.04),0 22px 44px -28px rgba(16,16,16,.30);
}
.why__num{
  display:inline-flex;align-items:center;justify-content:center;
  height:24px;padding:0 9px;border-radius:var(--r-sm);
  background:rgba(0,181,133,.10);color:var(--green-deep);
  font-weight:450;font-size:11.5px;line-height:1;letter-spacing:.6px;
}
.why__title{
  margin:18px 0 0;font-weight:450;font-size:20px;line-height:27px;letter-spacing:-.3px;color:var(--ink);
}
.why__list{
  list-style:none;margin:20px 0 0;padding:20px 0 0;width:100%;
  border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:0;
}
.why__list li{
  display:flex;align-items:flex-start;gap:11px;padding:12px 0;
  font-weight:400;font-size:15px;line-height:23px;letter-spacing:-.1px;color:#4a4842;
}
.why__list li+li{border-top:1px solid var(--line)}
.why__list li i{
  flex:0 0 16px;width:16px;height:16px;margin-top:4px;border-radius:50%;
  background-color:var(--green);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.2 10.4l2.6 2.5 5.2-5.4' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:100%;background-position:center;background-repeat:no-repeat;
}
.why__cta{
  margin-top:auto;padding-top:22px;
  display:inline-flex;align-items:center;gap:7px;
  font-weight:450;font-size:14px;line-height:20px;color:var(--muted);
  transition:color .15s var(--ease);
}
.why__cta i{font-style:normal;transition:transform .3s var(--ease-out)}
.why__card:hover .why__cta{color:var(--ink)}
.why__card:hover .why__cta i{transform:translateX(4px)}
@media (max-width:1199.98px){
  .why__grid{grid-template-columns:1fr;gap:16px}
}
@media (prefers-reduced-motion:reduce){
  .why__card,.why__cta i{transition:none}
  .why__card:hover{transform:none}
}

/* ==========================================================================
   Hero, second look: the stack sits high and dissolves instead of cutting
   ========================================================================== */
.hero__grid{align-items:center}
.ha{align-self:start}
.ha__viewport{
  height:min(500px,54vh);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(16,16,16,.28) 9%,#101010 26%,#101010 100%);
          mask-image:linear-gradient(180deg,transparent 0,rgba(16,16,16,.28) 9%,#101010 26%,#101010 100%);
}
@media (max-width:1199.98px){
  .ha{align-self:center}
  .ha__viewport{height:min(430px,42vh)}
}
@media (max-width:809.98px){
  .ha__viewport{height:min(390px,40vh)}
}

/* ==========================================================================
   Hero cards, macOS key: vibrancy surfaces and grouped lists
   ========================================================================== */
.ha__card{
  background:rgba(255,255,255,.80);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
          backdrop-filter:saturate(180%) blur(22px);
  border:1px solid rgba(16,16,16,.07);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 1px 2px rgba(16,16,16,.05),
    0 18px 40px -26px rgba(16,16,16,.34);
}
.ha__track.is-light .ha__card,
.ha__track.is-paper .ha__card{background:rgba(255,255,255,.80)}

/* one grouped list with hairline separators, the way a settings pane reads */
.ha__rows--panel{
  gap:0;background:#ffffff;border-radius:var(--r-md);
  box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;
}
.ha__rows--panel li{
  background:transparent!important;border-radius:0;
  box-shadow:none;padding:11px 14px;
}
.ha__rows--panel li+li{box-shadow:inset 0 1px 0 var(--line)}

/* the inner field is inset, not floating */
.ha__panel{
  background:rgba(16,16,16,.035)!important;
  box-shadow:inset 0 1px 2px rgba(16,16,16,.05)!important;
}
.ha__bar-os{background:rgba(16,16,16,.05);box-shadow:inset 0 -1px 0 var(--line)}
.ha__bar-os i{background:rgba(16,16,16,.16)}

/* the hero block rides high: both columns start at the same line */
.hero{padding-top:clamp(48px,7vh,84px);padding-bottom:clamp(72px,13vh,140px)}
.hero__copy{align-self:start}
@media (max-width:1199.98px){.hero__copy{align-self:auto}}

/* the pattern runs behind the words, so the words get their own ground */
.hero__copy{position:relative}
.hero__copy::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  /* runs off the left edge of the viewport, so it only ever fades to the right */
  inset:-72px -240px -72px -50vw;
  /* not a blackout: the lanes still read through, they just stop competing */
  background:linear-gradient(90deg,
    rgba(242,241,237,.82) 0%, rgba(242,241,237,.82) 70%,
    rgba(242,241,237,.64) 84%, rgba(242,241,237,0) 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#101010 16%,#101010 84%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#101010 16%,#101010 84%,transparent 100%);
}
@media (max-width:809.98px){
  .hero__copy::before{inset:-40px -60px -40px -50vw}
}

/* the customer's mark sits straight on the photo, in white, no plate */
.cwall__badge{background:none!important;padding:0!important;height:auto!important;border-radius:0!important}
.cwall__badge img{
  height:22px;width:auto;
  filter:drop-shadow(0 1px 10px rgba(16,16,16,.40));
}

/* one left edge: the header mark and the row marks line up */
.ha__rows--panel{background:none;box-shadow:none;border-radius:0;overflow:visible}
.ha__rows--panel li{padding:11px 0}
.ha__rows--panel li+li{box-shadow:inset 0 1px 0 var(--line)}

/* the first message opens in the middle of the frame; the stack grows from there
   (min-height + centring collapses to bottom-anchored once it fills the frame) */
.ha__track{min-height:100%;justify-content:center}

/* ==========================================================================
   Customer wall v2 — one line of logos, a live case-study preview,
   and the brand pattern running along the bottom of the section
   ========================================================================== */
.cwall{position:relative;overflow:hidden;padding-bottom:132px}
.cwall .shell{position:relative;z-index:1}
.cwall__field{
  position:absolute;left:0;right:0;bottom:0;height:280px;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#101010 58%,#101010 100%);
          mask-image:linear-gradient(180deg,transparent 0,#101010 58%,#101010 100%);
}
.cwall__field canvas{display:block;width:100%;height:100%}

.cwall__row{
  width:100%;margin-top:52px;
  display:grid;grid-template-columns:repeat(8,1fr);
  gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
.cwall__row .cwall__cell{height:132px;padding:16px}
.cwall__row .cwall__cell img{
  width:var(--w,90px);max-width:78%;max-height:30px;height:auto;object-fit:contain;
}

/* preview panel under the row */
.cwall__prev{
  position:relative;width:100%;margin-top:20px;height:330px;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#f2f1ed;
}
.cprev{
  position:absolute;inset:0;display:grid;grid-template-columns:1.1fr .9fr;
  text-decoration:none;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s var(--ease-out),visibility .3s;
}
.cprev.is-on{opacity:1;visibility:visible;pointer-events:auto}
.cprev__media{position:relative;overflow:hidden;background:#101010}
.cprev__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease-out);
}
.cprev:hover .cprev__media img{transform:scale(1.04)}
.cprev__body{
  background:#ffffff;padding:40px 44px;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;
}
.cprev__logo{height:24px;width:auto;max-width:150px;object-fit:contain;opacity:.9}
.cprev__title{
  margin-top:22px;font-weight:400;font-size:clamp(20px,1.7vw,25px);line-height:1.28;
  letter-spacing:-.5px;color:var(--ink);
}
.cprev__who{margin-top:14px;font-weight:400;font-size:14px;line-height:20px;color:var(--muted)}
.cprev__cta{
  margin-top:26px;display:inline-flex;align-items:center;gap:8px;
  font-weight:450;font-size:14.5px;line-height:20px;color:var(--ink);
}
.cprev__cta i{font-style:normal;transition:transform .3s var(--ease-out)}
.cprev:hover .cprev__cta i{transform:translateX(4px)}

@media (max-width:1099.98px){
  .cwall__row{grid-template-columns:repeat(4,1fr)}
  .cwall__row .cwall__cell{height:118px}
  .cwall__prev{height:auto}
  .cprev{position:relative;grid-template-columns:1fr;display:none}
  .cprev.is-on{display:grid}
  .cprev__media{height:220px}
  .cprev__body{padding:28px}
}
@media (max-width:809.98px){
  .cwall{padding-bottom:88px}
  .cwall__row{grid-template-columns:repeat(2,1fr)}
  .cwall__field{height:200px}
}
@media (prefers-reduced-motion:reduce){
  .cprev,.cprev__media img,.cprev__cta i{transition:none}
}

/* the cards sit further off the ground: blur what shows through */
.ha__card{
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:saturate(180%) blur(44px);
          backdrop-filter:saturate(180%) blur(44px);
}
.ha__track.is-light .ha__card,
.ha__track.is-paper .ha__card{background:rgba(255,255,255,.88)}

/* A masked ancestor becomes its own backdrop root, which killed the cards'
   backdrop blur. Clip with overflow instead and fade with an overlay. */
.ha{position:relative}
.ha__viewport{-webkit-mask-image:none!important;mask-image:none!important;overflow:hidden}
.ha::before{
  content:"";position:absolute;left:0;right:0;top:0;height:64px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(242,241,237,.96) 0%, rgba(242,241,237,.80) 42%, rgba(242,241,237,0) 100%);
}
.ha__card{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(170%) blur(30px);
          backdrop-filter:saturate(170%) blur(30px);
}
.ha__track.is-light .ha__card,
.ha__track.is-paper .ha__card{background:rgba(255,255,255,.72)}

/* the header sits centred in its own band: equal air above and below the rule */
.ha__card{padding:16px 20px 18px}
.ha__head,.ha__who{padding-bottom:16px;margin-bottom:14px}
.ha__card--status{padding:16px 20px}

/* ==========================================================================
   Hero logo line + cursor-following case-study preview
   ========================================================================== */
.hero__logos{
  position:relative;z-index:1;
  width:100%;max-width:var(--shell);
  margin-top:clamp(36px,5.5vh,68px);
}
.hero__logos .cwall__row{margin-top:0;background:var(--line)}
.hero__logos .cwall__cell{height:104px;background:rgba(242,241,237,.72);
  -webkit-backdrop-filter:saturate(160%) blur(18px);backdrop-filter:saturate(160%) blur(18px)}
.hero__logos .cwall__cell--link:hover{background:rgba(255,255,255,.88)}
.hero__logos .cwall__go{background:rgba(255,255,255,.85)}

/* the featured story goes back to being one wide tile */
.cwall__story{
  position:relative;display:block;width:100%;height:340px;margin-top:44px;
  grid-column:auto;grid-row:auto;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:#101010;text-decoration:none;cursor:pointer;
}

/* floating preview that follows the pointer */
.fprev{
  position:fixed;top:0;left:0;z-index:80;width:330px;pointer-events:none;
  border-radius:var(--r-lg);overflow:hidden;background:#ffffff;
  border:1px solid var(--line);
  box-shadow:0 2px 6px rgba(16,16,16,.06),0 30px 60px -28px rgba(16,16,16,.45);
  opacity:0;transform:translate3d(0,0,0) scale(.96);
  transition:opacity .3s var(--ease-out),transform .3s var(--ease-out);
  will-change:transform;
}
.fprev.is-on{opacity:1}
.fprev__media{position:relative;display:block;width:100%;aspect-ratio:16/10;background:#101010;overflow:hidden}
.fprev__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fprev__body{display:flex;flex-direction:column;gap:12px;padding:18px 20px 20px}
.fprev__logo{height:19px;width:auto;max-width:120px;object-fit:contain}
.fprev__title{font-weight:400;font-size:16px;line-height:23px;letter-spacing:-.2px;color:var(--ink)}
@media (max-width:1099.98px){.fprev{display:none}}
@media (prefers-reduced-motion:reduce){.fprev{transition:none}}

/* Removing the mask left older cards sitting there as ghost boxes.
   Put the dissolve back; mute the ground with opacity instead of a backdrop. */
.ha::before{display:none}
.ha__viewport{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(16,16,16,.25) 8%,#101010 26%,#101010 100%)!important;
          mask-image:linear-gradient(180deg,transparent 0,rgba(16,16,16,.25) 8%,#101010 26%,#101010 100%)!important;
}
.ha__card,
.ha__track.is-light .ha__card,
.ha__track.is-paper .ha__card{
  background:rgba(255,255,255,.955);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}

/* the logo line rides at the very bottom of the hero */
.hero{padding-bottom:clamp(26px,3.6vh,46px)}
.hero__logos{margin-top:auto;padding-top:clamp(32px,5vh,64px)}

/* no blur on the logo line: flat cells */
.hero__logos .cwall__cell{
  background:#f2f1ed;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
.hero__logos .cwall__cell--link:hover{background:#f2f1ed}
.hero__logos .cwall__go{background:#ffffff}

/* the lanes ride higher: their waist sits with the copy, not under it */
.hero .routefield{top:2%;bottom:auto;height:76%}
@media (max-width:1199.98px){.hero .routefield{top:6%;height:66%}}

/* logo line: no frame, just the cells */
.hero__logos .cwall__row{border:0;border-radius:0;background:transparent;gap:1px}
.hero__logos .cwall__cell{box-shadow:none}

/* logo line sits straight on the hero ground */
.hero__logos .cwall__row{gap:0;background:transparent}
.hero__logos .cwall__cell{background:transparent!important}
.hero__logos .cwall__cell--link:hover{background:transparent!important}
.hero__logos .cwall__cell--link:hover img{filter:none;opacity:1}
.hero__logos .cwall__go{background:rgba(255,255,255,.9);box-shadow:inset 0 0 0 1px var(--line)}

/* the hover preview is a hint, not a panel */
.fprev{width:252px;border-radius:var(--r-md)}
.fprev__media{aspect-ratio:16/11}
.fprev__body{gap:9px;padding:13px 15px 15px}
.fprev__logo{height:15px;max-width:96px}
.fprev__title{font-size:13.5px;line-height:19px;letter-spacing:-.1px}

/* the agent cursor: a proper pointer with a motion streak behind it */
.cap__ico--spark,.segrow .cap__ico--spark{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%2300b585'/%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' opacity='.62'%3E%3Cpath d='M6.2 6.6 4.6 5'/%3E%3Cpath d='M5.6 10.1 3.4 9.6'/%3E%3Cpath d='M9.9 6.1 9.4 3.9'/%3E%3C/g%3E%3Cpath d='M8.6 7.4 17 13.1l-4.05.42 1.86 3.62-1.9.98-1.86-3.63-2.45 2.4z' fill='%23ffffff'/%3E%3C/svg%3E")!important;
  background-color:transparent!important;background-size:100%;background-repeat:no-repeat;background-position:center;
}

/* the hero block drops a little; the logo line stays pinned to the bottom */
.hero{padding-top:clamp(66px,10.5vh,124px)}

/* the agent cursor stands on its own: no disc, and bigger than the checkmark */
.segrow .cap__ico--spark,.cap__ico--spark{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%2300b585' stroke-width='1.7' stroke-linecap='round' opacity='.45'%3E%3Cpath d='M6.4 5.6 4.3 3.5'/%3E%3Cpath d='M5.3 9.8 2.4 9.2'/%3E%3Cpath d='M10.1 4.9 9.5 2'/%3E%3C/g%3E%3Cpath d='M7.6 6.4 19.4 14.4l-5.7.6 2.6 5.1-2.66 1.37-2.6-5.1-3.44 3.36z' fill='%2300b585'/%3E%3C/svg%3E")!important;
  background-color:transparent!important;background-size:100%;background-repeat:no-repeat;background-position:center;
}
.segrow .cap__ico--spark{width:23px;height:23px;flex:0 0 23px;margin-top:1px}

/* segmented control: a recessed track, the active tab raised on it */
.tabs__bar{
  background:#f2f1ed!important;border:0!important;padding:4px;
  border-radius:var(--r-lg);
  box-shadow:inset 0 1px 2px rgba(16,16,16,.06),inset 0 0 0 1px rgba(16,16,16,.05);
}
.tabs__tab{border-radius:var(--r-md);transition:color .15s var(--ease)}
.tabs__tab[aria-selected="true"]{
  background:#ffffff;
  box-shadow:0 1px 1px rgba(16,16,16,.06),0 4px 10px -6px rgba(16,16,16,.28),inset 0 1px 0 #ffffff;
}
.tabs__tab:hover{background:transparent}
.tabs__tab[aria-selected="true"]:hover{background:#ffffff}

/* only the sliding indicator is raised; the tab itself stays flat
   (a background on the selected tab fought the slide) */
.tabs__tab[aria-selected="true"],
.tabs__tab[aria-selected="true"]:hover,
.tabs__tab:hover{background:transparent!important;box-shadow:none!important}
.tabs__ink{
  background:#ffffff!important;
  box-shadow:0 1px 1px rgba(16,16,16,.06),0 4px 10px -6px rgba(16,16,16,.28),
             inset 0 1px 0 #ffffff,0 0 0 1px rgba(16,16,16,.06)!important;
  border-radius:var(--r-md);
}

/* the graph reads as a run in a console: action names, then the system */
.agraph__trig,.agraph__subs b{letter-spacing:.1px}
.agraph__subs b{font-variant-numeric:tabular-nums}
.agraph__lead em{font-variant-numeric:tabular-nums}

/* run metadata reads as data: tabular, quiet, ahead of the label */
.aud__list em u,.trace__list em u{
  display:inline-block;min-width:62px;margin-right:12px;
  font-family:var(--ui);font-variant-numeric:tabular-nums;
  font-weight:450;font-size:12.5px;letter-spacing:.3px;
  color:var(--muted);text-decoration:none;
}
.trace__list em u{min-width:26px}
.trace__list em{font-variant-numeric:tabular-nums;letter-spacing:.1px}
@media (max-width:809.98px){
  .aud__list em u{min-width:0;margin-right:8px;font-size:11.5px}
}

/* the tab already names the channel: the caption doesn't repeat it */
.live__say b{display:none}
.live__say span{font-weight:400}

/* slower channel rotation: 4s a channel instead of 2.4 */
.live{--loop:16s;--step:4s}
.live__tabs span{animation-delay:calc(var(--i) * var(--step))}
.live__say span{animation-delay:calc(var(--i) * var(--step))}
.lv{animation-delay:calc(var(--i) * var(--step))}

/* Why Strada sits on the same dotted stage as the Control block */
.why{background:var(--card)}
.why__grid{
  background:var(--bg);
  background-image:radial-gradient(rgba(16,16,16,.09) 1px,transparent 1px);
  background-size:14px 14px;background-position:0 0;
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px;gap:20px;
}
.why__card{box-shadow:0 1px 2px rgba(16,16,16,.04)}
.why__card:hover{
  box-shadow:0 1px 2px rgba(16,16,16,.05),0 22px 44px -28px rgba(16,16,16,.30);
}
@media (max-width:809.98px){.why__grid{padding:16px}}

/* results rows: a small label and a quiet sub against one very large figure */
.fig{padding:30px 0 28px;gap:48px}
.fig__label h3{font-weight:450;font-size:19px;line-height:26px;letter-spacing:-.2px;color:var(--ink)}
.fig__label p{margin-top:5px;font-weight:400;font-size:14.5px;line-height:21px;
  letter-spacing:-.05px;color:var(--muted)}
.fig__num{font-size:76px;line-height:70px;letter-spacing:-3.2px;font-variant-numeric:tabular-nums}
@media (max-width:809.98px){
  .fig{padding:22px 0 20px;gap:10px}
  .fig__num{font-size:52px;line-height:48px;letter-spacing:-2px}
}

/* the channel caption drops to the bottom, just above the proof line */
.live__tabs{order:1}
.live__viz{order:2}
.live__say{order:3;height:22px;margin:0 0 10px}
.live__foot{order:4}
.live__say span{font-size:14px;line-height:21px}

/* ==========================================================================
   Results, Harvey key: the heading holds the left column, the figures stack
   on the right, each under a full-width hairline with its caption beneath
   ========================================================================== */
.results .shell{display:grid!important;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:64px;align-items:start;flex-direction:unset}
.results__head{position:sticky;top:calc(var(--banner-h) + var(--nav-h) + 48px)}
.results .kicker{margin-bottom:18px!important}
.results__head h2{text-align:left}
.figs{display:flex;flex-direction:column;gap:0}
.fig{display:block!important;padding:44px 0 52px;border-top:1px solid var(--line);border-bottom:0!important}
.fig:last-child{border-bottom:0!important}
.fig__num{margin:0;font-weight:250;font-size:clamp(56px,6.2vw,92px);line-height:1;
  letter-spacing:-4px;color:var(--ink);text-align:left;font-variant-numeric:tabular-nums}
.fig__cap{margin:20px 0 0;max-width:34ch;
  font-weight:400;font-size:16px;line-height:24px;letter-spacing:-.1px;color:#4a4842}
@media (max-width:1099.98px){
  .results .shell{grid-template-columns:1fr;gap:40px}
  .results__head{position:static}
}
@media (max-width:809.98px){
  .fig{padding:28px 0 34px}
  .fig__num{letter-spacing:-2.4px}
  .fig__cap{margin-top:14px;font-size:15px;line-height:22px}
}

/* the arrow discs are grey, not white */
.hero__logos .cwall__go{
  background:#dedcd6;box-shadow:none;color:#4a4842;
}
.hero__logos .cwall__cell--link:hover .cwall__go{background:var(--ink-nav);color:#ffffff}

/* Why Strada uses the Control layout; the dotted panel and cards are gone */
.why{background:var(--bg)}
.why .shell{display:flex;flex-direction:column;gap:0}
.why__grid{display:none}
.why .stk .aud__list em u{min-width:76px}

/* ==========================================================================
   Hero, another pass: the logo line gets a label, the arrows stop floating
   ========================================================================== */
.hero__logos-cap{
  margin:0 0 18px;text-align:center;
  font-weight:450;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--muted);
}
/* the disc only appears when you point at a logo */
.hero__logos .cwall__go{
  opacity:0;transform:translate(-4px,4px) scale(.9);
  transition:opacity .3s var(--ease),transform .3s var(--ease-out),
             background .3s var(--ease),color .3s var(--ease);
}
.hero__logos .cwall__cell--link:hover .cwall__go,
.hero__logos .cwall__cell--link:focus-visible .cwall__go{
  opacity:1;transform:translate(0,0) scale(1);
}
/* the stack fills the band the copy leaves empty */
.ha__viewport{height:min(560px,58vh)}
.hero{padding-top:clamp(56px,8.5vh,104px)}
@media (max-width:1199.98px){.ha__viewport{height:min(430px,42vh)}}
@media (max-width:809.98px){
  .ha__viewport{height:min(390px,40vh)}
  .hero__logos-cap{margin-bottom:12px;font-size:10.5px}
}

/* the certification cards follow the same radius as every other card */
.badge{border-radius:var(--r-lg)}

/* the Why block sits on a grey field, not a white card */
.why{background:var(--card)}
.why .stk{background:var(--bg)!important;border:1px solid var(--line)}
.why .stk__stage{background-color:transparent!important}

/* ==========================================================================
   Surface system, made consistent
   Paper zone  (hero → quotes): white cards on the paper ground
   White band  (why → faq):     paper cards on white
   One seam, not a lone white island.
   ========================================================================== */
.why,.awards,.security,.faq{background:var(--card)}

/* inside the white band the surfaces invert so nothing is white on white */
.awards .awgrid__cell{background:var(--bg)}
.awards .awgrid__cell:hover{background:#f2f1ed}
.security .badge{background:var(--bg)}
.faq__item{background:transparent}

/* the Why block lost its radius when it went grey */
.why .stk{border-radius:var(--r-lg);overflow:hidden}

/* one hairline colour everywhere */
.bento .tile{border-color:var(--line)}

/* the story cards follow the same radius as every other card */
.tcard{border-radius:var(--r-lg);overflow:hidden}

/* the heading column carries its own weight while the figures scroll past it */
.results__head{display:flex;flex-direction:column;align-items:flex-start}
.results__lead{
  margin:24px 0 0;max-width:38ch;
  font-weight:400;font-size:16px;line-height:25px;letter-spacing:-.1px;color:var(--muted);
}
.results__link{margin-top:26px}
.fig:first-child{padding-top:0;border-top:0}
@media (max-width:1099.98px){
  .results__lead{margin-top:18px}
  .results__link{margin-top:20px}
}

/* on the white band the cells carry no fill: the hairline grid is the frame */
.awards .awgrid__cell{background:transparent}
.awards .awgrid__cell:hover{background:rgba(16,16,16,.025)}

/* the Why block has no card of its own: it sits flat on the white band */
.why .stk{
  background:transparent!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;padding:0!important;
}

/* the workflow list needs no rules between its rows */
.caplist--2 li{border-top:0!important}
.caplist--2{gap:2px}

/* the stage is a grey field again; the white panel needs it to read */
.why .stk__stage{background-color:var(--bg)!important;border-radius:var(--r-lg)}

/* ==========================================================================
   Certification seals: green, and the outer rings turn slowly
   ========================================================================== */
.badge__seal .seal circle,
.badge__seal .seal path{stroke:var(--green-deep);opacity:.55}
.badge__seal .seal polygon{fill:var(--green-deep);opacity:.55}
.badge__seal .seal text{fill:var(--green-deep)}

.badge__seal .seal path,
.badge__seal .seal circle{
  transform-box:view-box;transform-origin:32px 32px;
  animation:sealTurn 34s linear infinite;
}
.badge__seal .seal polygon{
  transform-box:view-box;transform-origin:32px 32px;
  animation:sealTurn 52s linear infinite reverse;
}
@keyframes sealTurn{to{transform:rotate(360deg)}}

.badge:hover .badge__seal .seal circle,
.badge:hover .badge__seal .seal path,
.badge:hover .badge__seal .seal polygon{opacity:1}
.badge__seal .seal circle,.badge__seal .seal path,.badge__seal .seal polygon{
  transition:opacity .3s var(--ease-out)}

@media (prefers-reduced-motion:reduce){
  .badge__seal .seal path,.badge__seal .seal circle,.badge__seal .seal polygon{animation:none}
}

/* the workflow list sits tighter now that the rules are gone */
.caplist--2{gap:0}
.caplist--2 li>b{padding:7px 0}
@media (max-width:809.98px){.caplist--2 li>b{padding:6px 0}}

/* the channel widget ends with its caption; the proof line goes */
.live__foot{display:none}

/* the accordion rows go straight to the points */
.stk__body p{display:none}
.stk__body ul{margin-top:0}

/* the points are supporting copy: secondary, not ink */
.stk__body ul li{color:var(--muted)}

/* the caption sits on the bottom edge of the channel card */
.live__say{margin-top:auto;margin-bottom:0}
.live__viz{margin-bottom:0}

/* the channel visual sits in its own grey field */
.live__viz{
  background:var(--bg);border-radius:var(--r-md);
  padding:20px 22px;min-height:132px;display:flex;align-items:center;
}
.live__viz .lv{position:absolute;inset:20px 22px}
@media (max-width:809.98px){
  .live__viz{padding:16px;min-height:108px}
  .live__viz .lv{inset:16px}
}

/* ==========================================================================
   Channel widget: lean panel, and the channels overlap so it is never blank
   ========================================================================== */
@keyframes lvOn{0%{opacity:0}1.5%,24%{opacity:1}26%,100%{opacity:0}}
@keyframes liveSay{0%{opacity:0;transform:translateY(5px)}
  1.5%,24%{opacity:1;transform:none}26%,100%{opacity:0;transform:translateY(-3px)}}
@keyframes liveTab{0%{color:var(--muted)}1.5%,24%{color:var(--green-deep)}26%,100%{color:var(--muted)}}

.live__viz{
  flex:0 0 auto;min-height:112px;height:112px;
  padding:18px 20px;background:var(--bg);border-radius:var(--r-md);
}
.live__viz .lv{inset:18px 20px}
.live__tabs{margin-bottom:16px}
@media (max-width:809.98px){
  .live__viz{min-height:96px;height:96px;padding:14px 16px}
  .live__viz .lv{inset:14px 16px}
}

/* ==========================================================================
   Channel fragments were still on the old 2.375s clock, so the email and chat
   content popped in while their panel was hidden. Derive every delay from
   --step, the same variable the tabs, caption and panels use.
   ========================================================================== */
@keyframes lvPop{0%{opacity:0;transform:translateY(4px)}
  3%,22.5%{opacity:1;transform:none}25%,100%{opacity:0}}

.lv>*{animation-delay:calc(var(--i) * var(--step) + .10s)!important}
.lv>*:nth-child(2){animation-delay:calc(var(--i) * var(--step) + .32s)!important}
.lv>*:nth-child(3){animation-delay:calc(var(--i) * var(--step) + .54s)!important}

/* the caption rides the bottom edge of the card */
.live{height:100%}
.live__say{margin-top:auto!important}

/* ==========================================================================
   The panel was outliving its content: it stayed up from 24% to 26% while the
   fragments had already faded at 22.5%, which is the empty grey box.
   Content now outlasts its panel, and the panel fills the card.
   ========================================================================== */
@keyframes lvPop{0%{opacity:0;transform:translateY(4px)}
  2.5%,24.5%{opacity:1;transform:none}26.5%,100%{opacity:0}}

.live__viz{flex:1 1 auto;height:auto;min-height:112px;display:flex;align-items:center}
.live__viz .lv{inset:18px 20px;display:flex;align-items:center}
@media (max-width:809.98px){
  .live__viz{min-height:96px}
  .live__viz .lv{inset:14px 16px}
}

/* ==========================================================================
   Looping visuals start when their block arrives, not on page load.
   Before this, a 9.5-16s loop was already half over by the time you
   scrolled to it, so the block looked static.
   ========================================================================== */
.tile--conv .live *,
.tile--flow .agraph *,
.tile--ints .hub *,
.badge .badge__seal *,
.noapi .brw *{animation-play-state:paused}

.tile--conv.is-in .live *,
.tile--flow.is-in .agraph *,
.tile--ints.is-in .hub *,
.badge.is-in .badge__seal *,
.noapi.is-in .brw *{animation-play-state:running}

/* and the loops themselves are quicker */
.live{--loop:11s;--step:2.75s}
.agraph{--loop:7.5s}
.hub{--loop:7s}

/* the reveal itself lands sooner, so the block feels alive on arrival */
.reveal{transform:translateY(18px);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}

@media (prefers-reduced-motion:reduce){
  .tile--conv .live *,.tile--flow .agraph *,.tile--ints .hub *,
  .badge .badge__seal *,.noapi .brw *{animation-play-state:running}
}

/* my centring rule flattened the fragments into a row: they are columns */
.live__viz .lv{
  display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:8px;
}
.live__viz .lv__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.live__viz .lv__att{display:inline-block;margin-left:8px}

/* ==========================================================================
   Channel panel gets the brand's line language: a hairline bus along the
   bottom with a green request running it, the same idea as the hub bus.
   ========================================================================== */
.live__viz{position:relative;overflow:hidden}
.live__viz::before{
  content:"";position:absolute;left:20px;right:20px;bottom:14px;height:1px;
  background:var(--line);
}
.live__viz::after{
  content:"";position:absolute;left:20px;right:20px;bottom:14px;height:1px;
  background:linear-gradient(90deg,rgba(0,181,133,0),var(--green) 55%,rgba(0,181,133,0))
    0 0/88px 100% no-repeat;
  animation:vizRun var(--loop) linear infinite;
  animation-play-state:paused;
}
.tile--conv.is-in .live__viz::after{animation-play-state:running}
@keyframes vizRun{from{background-position:-88px 0}to{background-position:100% 0}}
@media (max-width:809.98px){
  .live__viz::before,.live__viz::after{left:16px;bottom:11px}
  .live__viz::before{right:16px}
}
@media (prefers-reduced-motion:reduce){
  .live__viz::after{animation:none;opacity:.45}
}

/* Voice carries its own signal line: the request running the wire */
.lv__sig{
  display:block;height:1px;margin-top:10px;
  background:
    linear-gradient(90deg,rgba(0,181,133,0),var(--green) 50%,rgba(0,181,133,0))
      0 0/72px 100% no-repeat,
    var(--line);
  animation:sigRun 2.6s linear infinite;
  animation-play-state:paused;
}
.tile--conv.is-in .lv__sig{animation-play-state:running}
@keyframes sigRun{from{background-position:-72px 0,0 0}to{background-position:100% 0,0 0}}
@media (prefers-reduced-motion:reduce){.lv__sig{animation:none}}

/* the No API card is plainly white: the dotted texture was muddying it */
.bento .tile--wide.noapi::before{display:none}
.tile--wide.noapi{background:var(--card)}

/* ==========================================================================
   Seals: all four fully green. Only one turns at a time, in sequence,
   and any seal turns on hover.
   ========================================================================== */
.badge__seal .seal circle,
.badge__seal .seal path{stroke:var(--green-deep);opacity:1}
.badge__seal .seal polygon{fill:var(--green-deep);opacity:1}
.badge__seal .seal text{fill:var(--green-deep)}

.badge__seal .seal circle,
.badge__seal .seal path,
.badge__seal .seal polygon{
  transform-box:view-box;transform-origin:32px 32px;
  animation:sealCycle 16s linear infinite!important;
}
.badges .badge:nth-child(1) .seal *{animation-delay:0s!important}
.badges .badge:nth-child(2) .seal *{animation-delay:4s!important}
.badges .badge:nth-child(3) .seal *{animation-delay:8s!important}
.badges .badge:nth-child(4) .seal *{animation-delay:12s!important}
@keyframes sealCycle{
  0%{transform:rotate(0deg)}
  17%{transform:rotate(360deg)}
  100%{transform:rotate(360deg)}
}
.badge:hover .seal circle,
.badge:hover .seal path,
.badge:hover .seal polygon{
  animation:sealTurn 7s linear infinite!important;animation-delay:0s!important;
}
@media (prefers-reduced-motion:reduce){
  .badge__seal .seal circle,.badge__seal .seal path,.badge__seal .seal polygon{animation:none!important}
}

/* the heading sits on the top line, level with the first figure */
.results__head{position:static;align-self:start;top:auto}

/* ==========================================================================
   Logo line: the arrow disc becomes a quiet "Case study" hint under the
   logos that actually have one.
   ========================================================================== */
.hero__logos .cwall__go{display:none}
.hero__logos .cwall__cell--link::after{
  content:"Case study \2192";
  position:absolute;left:0;right:0;bottom:12px;
  text-align:center;
  font-weight:450;font-size:10px;line-height:14px;letter-spacing:.7px;
  text-transform:uppercase;color:var(--muted);opacity:.55;
  transition:opacity .3s var(--ease),color .3s var(--ease),transform .3s var(--ease-out);
}
.hero__logos .cwall__cell--link:hover::after{opacity:1;color:var(--ink-nav);transform:translateY(-1px)}
.hero__logos .cwall__cell{padding-bottom:26px}
@media (max-width:809.98px){
  .hero__logos .cwall__cell--link::after{font-size:9px;bottom:9px;letter-spacing:.5px}
  .hero__logos .cwall__cell{padding-bottom:20px}
}

/* ==========================================================================
   The moving line belongs to Voice only: a waveform that jumps while
   someone is talking. Every other channel keeps a still panel.
   ========================================================================== */
.live__viz::before,.live__viz::after{display:none}

.lv__wave2{
  display:flex;align-items:center;gap:2px;height:22px;margin-top:12px;
}
.lv__wave2 i{
  flex:1 1 auto;min-width:1px;height:12%;border-radius:1px;
  background:var(--green);opacity:.55;
  transform-origin:center;
  animation:vwave 1.15s var(--ease) infinite;
  animation-delay:calc(var(--b) * -0.055s);
  animation-play-state:paused;
}
.lv__wave2 i:nth-child(3n){animation-duration:.86s}
.lv__wave2 i:nth-child(4n){animation-duration:1.42s}
.lv__wave2 i:nth-child(5n){opacity:.35}
.tile--conv.is-in .lv__wave2 i{animation-play-state:running}
@keyframes vwave{
  0%,100%{height:12%}
  25%{height:74%}
  50%{height:30%}
  75%{height:96%}
}
@media (prefers-reduced-motion:reduce){
  .lv__wave2 i{animation:none;height:38%}
}

/* the changing caption is centred in the space under the panel, not pinned */
.live__viz{flex:0 0 auto;height:auto;min-height:112px}
.live__say{margin-top:auto!important;margin-bottom:auto!important}

/* ==========================================================================
   Integrations hub: the wires carry traffic continuously instead of one
   pulse every seven seconds.
   ========================================================================== */
.hub{--loop:2.9s}
.hub__drops i::after{animation-delay:calc(var(--i) * .33s)!important}
@keyframes hubDrop{
  0%{transform:translateY(-14px);opacity:0}
  7%{opacity:1}
  62%{transform:translateY(34px);opacity:1}
  74%,100%{transform:translateY(34px);opacity:0}
}
@keyframes hubRise{
  0%,5%{transform:translateY(-18px)}
  60%{transform:translateY(42px)}
  72%,100%{transform:translateY(42px)}
}
@keyframes hubBusGrow{
  0%,5%{width:0;opacity:1}
  58%{width:50%;opacity:1}
  70%{width:50%;opacity:0}
  71%,100%{width:0;opacity:0}
}

/* ==========================================================================
   Why panels, each in its own form: a timeline, a permissions list,
   a certification grid. They were three copies of the same audit card.
   ========================================================================== */
.tline{padding:22px 24px}
.tline__top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:22px}
.tline__top span{font-weight:450;font-size:13px;letter-spacing:.2px;color:var(--green-deep)}
.tline__top b{font-weight:400;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.tline__bar{position:relative;height:3px;border-radius:2px;background:rgba(16,16,16,.08);overflow:hidden}
.tline__bar i{position:absolute;inset:0 auto 0 0;width:0;border-radius:2px;background:var(--green);
  animation:tlineFill 2.4s var(--ease-out) forwards;animation-play-state:paused}
.why .stk.is-in .tline__bar i,.reveal.is-in .tline__bar i{animation-play-state:running}
@keyframes tlineFill{from{width:0}to{width:62%}}
.tline__steps{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.tline__steps li{display:flex;flex-direction:column;gap:5px;padding-top:12px;
  border-top:1px solid var(--line)}
.tline__steps b{font-weight:450;font-size:11.5px;letter-spacing:.6px;color:var(--muted)}
.tline__steps em{font-style:normal;font-weight:400;font-size:13px;line-height:18px;color:#4a4842}
.tline__steps li.is-done{border-top-color:var(--green)}
.tline__steps li.is-done b{color:var(--green-deep)}
.tline__steps li.is-now{border-top-color:rgba(0,181,133,.45)}
.tline__steps li.is-now b{color:var(--ink)}
.tline__steps li.is-now em{color:var(--ink)}

.certs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.cert{background:#ffffff;padding:22px 20px;display:flex;flex-direction:column;gap:7px}
.cert i{
  display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;
  height:26px;padding:0 11px;border-radius:999px;
  border:1px solid rgba(0,181,133,.4);color:var(--green-deep);background:rgba(0,181,133,.07);
  font-style:normal;font-weight:450;font-size:11.5px;letter-spacing:.6px;
}
.cert em{font-style:normal;font-weight:400;font-size:13px;line-height:19px;color:var(--muted)}
@media (max-width:809.98px){
  .tline{padding:16px}
  .tline__steps{grid-template-columns:1fr 1fr}
  .cert{padding:16px}
}

/* the waveform was being flex-shrunk to nothing */
.lv__wave2{flex:0 0 22px}
.live__viz{min-height:126px}

/* the caption sits in the card's bottom padding, not floating mid-card */
.live__say{margin-top:auto!important;margin-bottom:0!important}

/* ==========================================================================
   When the wires land, the Strada mark lights green
   ========================================================================== */
.hub__core{
  animation:hubLand var(--loop) var(--ease) infinite;
  animation-play-state:paused;
}
.hub__mark img{
  animation:hubMarkLand var(--loop) var(--ease) infinite;
  animation-play-state:paused;
}
.tile--ints.is-in .hub__core,
.tile--ints.is-in .hub__mark img{animation-play-state:running}
@keyframes hubLand{
  0%,52%{border-color:var(--line);box-shadow:0 1px 2px rgba(16,16,16,.05),0 14px 34px -20px rgba(16,16,16,.24)}
  62%{border-color:rgba(0,181,133,.55);box-shadow:0 0 0 3px rgba(0,181,133,.10),0 14px 34px -20px rgba(16,16,16,.24)}
  86%,100%{border-color:var(--line);box-shadow:0 1px 2px rgba(16,16,16,.05),0 14px 34px -20px rgba(16,16,16,.24)}
}
@keyframes hubMarkLand{
  0%,52%{filter:none}
  62%,74%{filter:brightness(0) saturate(100%) invert(58%) sepia(64%) saturate(548%) hue-rotate(118deg) brightness(94%) contrast(92%)}
  86%,100%{filter:none}
}
@media (prefers-reduced-motion:reduce){
  .hub__core,.hub__mark img{animation:none}
}

/* the timeline gets its own white card on the dotted stage */
.tline{background:#ffffff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 1px 2px rgba(16,16,16,.04),0 10px 26px -18px rgba(16,16,16,.18)}

/* certifications use the seals we drew, in grey */
.certs{background:var(--line)}
.cert{gap:12px;align-items:flex-start}
.cert__seal{display:inline-flex}
.cert__seal .seal{width:44px;height:44px;overflow:visible}
.cert__seal .seal circle,.cert__seal .seal path{fill:none;stroke:#7a7a7a;stroke-width:1;
  stroke-linecap:round;animation:none!important}
.cert__seal .seal polygon{fill:#7a7a7a;stroke:none;animation:none!important}
.cert__seal .seal text{fill:#7a7a7a;font-family:inherit;font-weight:450;font-size:8.4px;
  text-anchor:middle;letter-spacing:.4px}
.cert em{font-style:normal;font-weight:400;font-size:13px;line-height:19px;color:var(--muted)}

/* the mark stays the mark: no green tint on arrival */
.hub__mark img{animation:none!important;filter:none!important}

/* the seals hand the turn to each other: one every 2s, so the sequence reads */
.badge__seal .seal circle,
.badge__seal .seal path,
.badge__seal .seal polygon{animation-duration:8s!important}
.badges .badge:nth-child(1) .seal *{animation-delay:0s!important}
.badges .badge:nth-child(2) .seal *{animation-delay:2s!important}
.badges .badge:nth-child(3) .seal *{animation-delay:4s!important}
.badges .badge:nth-child(4) .seal *{animation-delay:6s!important}
@keyframes sealCycle{
  0%{transform:rotate(0deg)}
  30%{transform:rotate(360deg)}
  100%{transform:rotate(360deg)}
}

/* the panel is tall enough for the tallest channel: SMS was being clipped */
.live__viz{min-height:152px}
.lv__bub{max-width:78%}
@media (max-width:809.98px){.live__viz{min-height:132px}}

/* .tile--conv .live__viz min-height:64px was outranking the plain selector */
.tile--conv .live__viz{min-height:152px;height:auto;flex:0 0 auto}
@media (max-width:809.98px){.tile--conv .live__viz{min-height:132px}}

/* ==========================================================================
   Voice: thin lines reacting to speech, not blocks
   ========================================================================== */
.lv__wave2{
  gap:0;justify-content:space-between;align-items:center;
  height:26px;flex:0 0 26px;margin-top:12px;
}
.lv__wave2 i{
  flex:0 0 2px;min-width:2px;width:2px;border-radius:1px;
  background:var(--green);opacity:.7;
  animation-duration:.9s;
}
/* speech is loudest in the middle of a phrase, quiet at its edges */
.lv__wave2 i:nth-child(-n+4),
.lv__wave2 i:nth-child(n+27){--amp:.32;opacity:.4}
.lv__wave2 i:nth-child(n+5):nth-child(-n+9),
.lv__wave2 i:nth-child(n+22):nth-child(-n+26){--amp:.62;opacity:.55}
.lv__wave2 i:nth-child(n+10):nth-child(-n+21){--amp:1}
.lv__wave2 i:nth-child(3n){animation-duration:.62s}
.lv__wave2 i:nth-child(4n){animation-duration:1.18s}
.lv__wave2 i:nth-child(7n){animation-duration:.78s}
@keyframes vwave{
  0%,100%{height:calc(10% + 6% * var(--amp,.7))}
  22%{height:calc(10% + 72% * var(--amp,.7))}
  46%{height:calc(10% + 26% * var(--amp,.7))}
  70%{height:calc(10% + 90% * var(--amp,.7))}
  88%{height:calc(10% + 40% * var(--amp,.7))}
}
@media (prefers-reduced-motion:reduce){
  .lv__wave2 i{animation:none;height:calc(10% + 40% * var(--amp,.7))}
}

/* 64 lines: dense enough to read as a waveform at card width */
.lv__wave2 i:nth-child(-n+9),
.lv__wave2 i:nth-child(n+56){--amp:.30;opacity:.38}
.lv__wave2 i:nth-child(n+10):nth-child(-n+20),
.lv__wave2 i:nth-child(n+45):nth-child(-n+55){--amp:.60;opacity:.55}
.lv__wave2 i:nth-child(n+21):nth-child(-n+44){--amp:1;opacity:.75}
.lv__wave2 i{animation-delay:calc(var(--b) * -0.031s)}
.lv__wave2 i:nth-child(3n){animation-duration:.66s}
.lv__wave2 i:nth-child(5n){animation-duration:1.05s}
.lv__wave2 i:nth-child(7n){animation-duration:.82s}

/* ==========================================================================
   Email reads as an actual message: sender, subject, preview, attachment
   ========================================================================== */
.lv--email{gap:7px!important}
.lv--email .lv__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lv__from{display:inline-flex;align-items:center;gap:9px;
  font-weight:450;font-size:13px;line-height:18px;color:var(--ink)}
.lv__ava{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;flex:0 0 22px;border-radius:var(--r-sm);
  background:rgba(16,16,16,.07);color:#4a4842;
  font-weight:450;font-size:9.5px;letter-spacing:.4px;
}
.lv--email .lv__top b{font-weight:400;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.lv__subj{margin:0;font-weight:450;font-size:13.5px;line-height:19px;letter-spacing:-.1px;color:var(--ink)}
.lv__prev{margin:0;font-weight:400;font-size:12.5px;line-height:18px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv--email .lv__att{
  display:inline-flex!important;align-items:center;gap:7px;align-self:flex-start;
  margin:2px 0 0!important;padding:4px 9px 4px 7px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:#ffffff;
  font-style:normal;font-weight:450;font-size:11.5px;line-height:16px;color:#4a4842;
}
.lv--email .lv__att i{
  width:11px;height:13px;flex:0 0 11px;border-radius:1px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M7.2.6H2.4A1.4 1.4 0 0 0 1 2v10a1.4 1.4 0 0 0 1.4 1.4h7.2A1.4 1.4 0 0 0 11 12V4.4z' fill='none' stroke='%237a7a7a' stroke-width='1'/%3E%3Cpath d='M7.2.6v3.8H11' fill='none' stroke='%237a7a7a' stroke-width='1'/%3E%3C/svg%3E") center/100% no-repeat;
}
.lv--email .lv__att em{font-style:normal;font-weight:400;color:var(--muted);font-size:12px}
.lv--email>*:nth-child(4){animation-delay:calc(var(--i) * var(--step) + .74s)!important}

/* ==========================================================================
   Agent graph: it spent 85% of the loop frozen in the assembled state, so it
   looked static. The run now builds, holds briefly, and resets on a 5.2s beat.
   ========================================================================== */
.agraph{--loop:5.2s}
@keyframes agIn{0%{opacity:0;transform:translateY(8px)}
  16%,68%{opacity:1;transform:none}82%,100%{opacity:0;transform:translateY(8px)}}
@keyframes agWire{0%{height:0}18%,68%{height:var(--h)}82%,100%{height:0}}
@keyframes agWireY{0%{transform:scaleY(0)}18%,68%{transform:scaleY(1)}82%,100%{transform:scaleY(0)}}
@keyframes agBar{0%{transform:scaleX(0)}22%,68%{transform:scaleX(1)}82%,100%{transform:scaleX(0)}}
@keyframes agDrop{0%{height:0}24%,68%{height:14px}82%,100%{height:0}}
@keyframes agDone{
  0%,30%{background:rgba(16,16,16,.16);transform:scale(1)}
  42%,68%{background:#00b585;transform:scale(1.18)}
  82%,100%{background:rgba(16,16,16,.16);transform:scale(1)}
}

/* the panel animates in each time it becomes the active one */
.stk__panel.is-on.is-fresh>*{
  animation:stkPanelIn .6s var(--ease-out) both;
}
@keyframes stkPanelIn{
  from{opacity:0;transform:translateY(10px) scale(.99)}
  to{opacity:1;transform:none}
}
/* its rows cascade in behind it */
.stk__panel.is-on.is-fresh .aud__list li,
.stk__panel.is-on.is-fresh .trace__list li,
.stk__panel.is-on.is-fresh .tline__steps li,
.stk__panel.is-on.is-fresh .cert{
  animation:stkRowIn .3s var(--ease-out) both;
  animation-delay:calc(.16s + var(--i,0) * .07s);
}
.stk__panel.is-on.is-fresh .aud__list li:nth-child(1),
.stk__panel.is-on.is-fresh .tline__steps li:nth-child(1),
.stk__panel.is-on.is-fresh .cert:nth-child(1){--i:0}
.stk__panel.is-on.is-fresh .aud__list li:nth-child(2),
.stk__panel.is-on.is-fresh .tline__steps li:nth-child(2),
.stk__panel.is-on.is-fresh .cert:nth-child(2){--i:1}
.stk__panel.is-on.is-fresh .aud__list li:nth-child(3),
.stk__panel.is-on.is-fresh .tline__steps li:nth-child(3),
.stk__panel.is-on.is-fresh .cert:nth-child(3){--i:2}
.stk__panel.is-on.is-fresh .tline__steps li:nth-child(4),
.stk__panel.is-on.is-fresh .cert:nth-child(4){--i:3}
@keyframes stkRowIn{
  from{opacity:0;transform:translateX(-8px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .stk__panel.is-on.is-fresh>*,
  .stk__panel.is-on.is-fresh .aud__list li,
  .stk__panel.is-on.is-fresh .cert{animation:none}
}

/* panel labels are quiet, not green */
.aud__top span,.trace__top span,.tline__top span{color:var(--muted)!important}
.gap__flag{color:var(--muted)!important}

/* the seal carries a small green check, the way it did originally */
.cert__seal{position:relative}
.cert__seal::after{
  content:"";position:absolute;right:-3px;bottom:-1px;
  width:17px;height:17px;border-radius:50%;
  background:#ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.3l2.7 2.6L14.2 7' fill='none' stroke='%23007a57' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 12px no-repeat;
  box-shadow:0 1px 3px rgba(16,16,16,.14);
}

/* ==========================================================================
   The 62px gap above the tabs was doing nothing: hand it to the animation.
   ========================================================================== */
.tile--conv .live__tabs{margin-top:0}
.tile--conv .tile__title{margin-bottom:20px}
.tile--conv .live__viz{
  flex:1 1 auto;height:auto;min-height:152px;max-height:260px;
}
@media (max-width:809.98px){
  .tile--conv .live__viz{min-height:132px;max-height:200px}
  .tile--conv .tile__title{margin-bottom:14px}
}

/* the air above the tabs came from three stacked offsets; keep one */
.tile--conv .tile__title{margin-bottom:0}
.tile--conv .viz--chan{margin-top:0;padding-top:10px}
.tile--conv .viz--chan,.tile--conv .live{flex:1 1 auto;min-height:0}

/* ==========================================================================
   Security section: the same seal treatment as the Why panel — grey stamp,
   small green check. The turn-by-turn animation stays.
   ========================================================================== */
.badge__seal .seal circle,
.badge__seal .seal path{stroke:#7a7a7a!important}
.badge__seal .seal polygon{fill:#7a7a7a!important}
.badge__seal .seal text{fill:#7a7a7a!important}

.badge__seal{position:relative}
.badge__seal::after{
  content:"";position:absolute;right:-2px;bottom:0;
  width:20px;height:20px;border-radius:50%;
  background:#ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.3l2.7 2.6L14.2 7' fill='none' stroke='%23007a57' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px 13px no-repeat;
  box-shadow:0 1px 3px rgba(16,16,16,.14);
}

/* the promise that lived in the security section now sits under the grid */
.certs__note{
  margin:14px 0 0;font-weight:400;font-size:12.5px;line-height:19px;color:var(--muted);
}

/* ==========================================================================
   FIX: gating every loop on .is-in left blocks frozen whenever the reveal
   observer had not fired for that tile — 99 visible elements stuck paused.
   The loops run unconditionally again.
   ========================================================================== */
.tile--conv .live *,
.tile--flow .agraph *,
.tile--ints .hub *,
.noapi .brw *,
.tile--conv .live__viz::after,
.tile--conv .lv__wave2 i,
.lv__wave2 i,
.hub__core,
.hub__mark img,
.tline__bar i,
.badge__seal .seal circle,
.badge__seal .seal path,
.badge__seal .seal polygon,
.cert__seal .seal *{animation-play-state:running!important}

/* the dashed arcs in the hero backdrop are gone */
.hero .arcs{display:none}

/* ── Strada review (amir): trusted-by logos — one size, one grey ───────── */
.hero__logos .cwall__row .cwall__cell img{
  width:auto!important;height:24px;max-height:24px;max-width:116px;
  filter:grayscale(1) brightness(0);opacity:.4;
}
.hero__logos .cwall__cell--link:hover img{filter:none!important;opacity:1!important}
@media (max-width:767.98px){
  .hero__logos .cwall__row .cwall__cell img{height:20px;max-height:20px}
}

/* ── Strada review (amir): stop the spinning Strada mark in hero cards ──── */
.ha__mark img{animation:none!important}

/* ── Strada review (amir): trusted-by logos as a slow left marquee ─────── */
.hero__logos .cwall__row{
  display:block!important;overflow:hidden;position:relative;background:transparent!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#101010 7%,#101010 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#101010 7%,#101010 93%,transparent 100%);
}
.hero__logos .cwall__track{display:flex;width:max-content;will-change:transform;animation:cwallScroll 60s linear infinite}
.hero__logos .cwall__row:hover .cwall__track{animation-play-state:paused}
.hero__logos .cwall__track .cwall__cell{flex:0 0 auto;width:clamp(150px,15vw,190px);background:transparent!important}
.hero__logos .cwall__track .cwall__cell--dup{pointer-events:none}
@keyframes cwallScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .hero__logos .cwall__track{animation:none;justify-content:center;width:100%}
  .hero__logos .cwall__track .cwall__cell--dup{display:none}
}

/* ── Strada review (amir): compact the IMPACT "Strada by the numbers" ──── */
.results{padding-top:82px!important;padding-bottom:82px!important}
.results .shell{column-gap:48px}
.fig{padding:26px 0 30px!important}
.fig__num{font-size:clamp(52px,5.2vw,78px)!important}
.fig__cap{margin-top:14px!important}
@media (max-width:767.98px){
  .results{padding-top:56px!important;padding-bottom:56px!important}
  .fig{padding:20px 0 22px!important}
}

/* ── Strada review (amir): Observability panel = the real product call trace ── */
.trace--call{padding:16px 18px 14px!important}
.tc__head{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.tc__ico{flex:0 0 30px;width:30px;height:30px;border-radius:8px;background:#ffffff;color:#7a7a7a;display:inline-flex;align-items:center;justify-content:center}
.tc__ico svg{width:15px;height:15px}
.tc__who{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.tc__who u{text-decoration:none;font-weight:450;font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:#7a7a7a}
.tc__who b{font-weight:450;font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.tc__meta{display:inline-flex;align-items:center;gap:6px;margin-left:2px;padding:3px 8px;border-radius:999px;background:#f2f1ed;font-weight:450;font-size:12px;color:#4a4842;white-space:nowrap}
.tc__dot{width:6px;height:6px;border-radius:50%;background:var(--green)}
.tc__qa{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-weight:450;font-size:11.5px;color:#4a4842;white-space:nowrap}
.tc__qa em{font-style:normal}
.tc__toggle{position:relative;width:26px;height:15px;border-radius:999px;background:#dedcd6}
.tc__toggle::after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:#ffffff;box-shadow:0 1px 2px rgba(16,16,16,.18)}
.tc__player{display:flex;align-items:center;gap:10px;padding:12px 0 6px}
.tc__play{flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:var(--green);position:relative}
.tc__play::after{content:"";position:absolute;left:8px;top:6px;border-left:7px solid #ffffff;border-top:5px solid transparent;border-bottom:5px solid transparent}
.tc__bar{flex:1;height:4px;border-radius:999px;background:#dedcd6;overflow:hidden;position:relative}
.tc__bar i{display:block;height:100%;width:0;background:var(--green);border-radius:inherit}
.tc__player b{font-weight:450;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.tc__steps{list-style:none;margin:6px 0 0;padding:0}
.tc__step{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:9px 0;align-items:start}
.tc__step+.tc__step{border-top:1px solid var(--line)}
.tc__step>u{text-decoration:none;font-weight:450;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:2px}
.tc__agent{display:block;font-weight:450;font-size:13px;line-height:18px;color:#7a7a7a}
.tc__step em{display:block;font-style:normal;font-size:13px;line-height:18px;color:var(--ink);margin-top:2px}
.tc__tool{display:flex;align-items:center;gap:8px;margin:0}
.tc__check{flex:0 0 14px;width:14px;height:14px;border-radius:50%;border:1.5px solid var(--green);position:relative}
.tc__check::after{content:"";position:absolute;left:3.5px;top:1.5px;width:3.5px;height:6.5px;border-right:1.5px solid var(--green);border-bottom:1.5px solid var(--green);transform:rotate(45deg)}
.tc__tool code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--ink)}
.tc__badge{margin-left:2px;padding:2px 8px;border-radius:999px;background:#eef3ef;color:#007a57;font-weight:450;font-size:10.5px;line-height:14px}
.tc__io{margin-top:8px}
.tc__io span{display:block;font-weight:450;font-size:12px;color:var(--muted);margin-bottom:5px}
.tc__io pre{margin:0;padding:9px 11px;border-radius:8px;background:#f2f1ed;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:16px;color:#4a4842;white-space:pre;overflow:hidden}
/* live: scrubber fills, steps land one by one, badges pop */
.stk__panel.is-on .tc__bar i{animation:tcFill 6s linear .2s both}
.stk__panel.is-on .tc__step{opacity:0;transform:translateY(6px);animation:tcIn .6s var(--ease-out) both;animation-delay:calc(.35s + var(--i) * .9s)}
.stk__panel.is-on .tc__badge,.stk__panel.is-on .tc__check{opacity:0;transform:scale(.7);animation:tcPop .3s var(--ease-out) both;animation-delay:calc(.85s + var(--i) * .9s)}
@keyframes tcFill{to{width:100%}}
@keyframes tcIn{to{opacity:1;transform:none}}
@keyframes tcPop{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .stk__panel.is-on .tc__bar i{animation:none;width:38%}
  .stk__panel.is-on .tc__step,.stk__panel.is-on .tc__badge,.stk__panel.is-on .tc__check{animation:none;opacity:1;transform:none}
}
@media (max-width:809.98px){.tc__qa{display:none}}

/* ── Strada review: NO API tile on tablet — keep two columns until 880px, then full-width mockup ── */
@media (min-width:880px) and (max-width:1199.98px){
  .noapi{flex-direction:row!important;align-items:stretch!important;gap:32px!important;padding:32px!important}
  .noapi__copy{flex:1 1 52%;max-width:none!important}
  .brw{flex:1 1 48%;align-self:stretch!important;max-width:none!important}
}
@media (max-width:879.98px){
  .noapi{flex-direction:column!important;gap:24px!important}
  .noapi__copy{max-width:none!important}
  .brw{flex:1 1 auto;align-self:stretch!important;width:100%;max-width:none!important}
}
@media (max-width:879.98px){
  .noapi{align-items:stretch!important}
  .noapi__copy{width:100%;align-self:stretch}
}

/* ── Strada review (thomas): statement lights up word by word on scroll ──── */
.statement__text.is-words,.statement__text.is-words span{color:rgba(242,241,237,.3)}
.statement__text .w{color:rgba(242,241,237,.3);transition:color .3s var(--ease-out)}
.statement__text .w.is-lit{color:#f2f1ed}
@media (prefers-reduced-motion:reduce){.statement__text .w{transition:none}}
.statement__text .w{font-style:normal}

/* ── Strada review: hub wires — hide the drops of hidden cards so the bus never wraps ── */
@media (max-width:1199.98px){.hub__drops i:nth-child(n+5){display:none}}
@media (max-width:809.98px){.hub__drops i:nth-child(n+4){display:none}}

/* ── Strada review, round 4 ─────────────────────────────────────────────── */
/* hero cells are plain logos again (no case-study link) */
.hero__logos .cwall__cell{cursor:default}
/* IMPACT head accent (amir "accent color for this") */
.results__head h2 .ln:last-child{color:var(--green-deep)}
/* footer: less padding (amir) */
.footer{padding-top:64px!important}
.footer__inner{padding-bottom:64px!important;gap:48px!important}
@media (max-width:809.98px){.footer__inner{padding-bottom:56px!important}}
/* CTA card: less empty (amir) */
.ctacard{padding:56px 64px!important;gap:22px!important}
.ctacard__body{gap:10px!important}
.ctacard__body .t-lead{max-width:46ch}
@media (max-width:809.98px){.ctacard{padding:36px 24px!important}}
/* memberships + press rows (thomas) */
.awgrid--members{grid-template-columns:repeat(4,1fr)!important}
.awgrid--press{grid-template-columns:repeat(3,1fr)!important;margin-top:12px}
.awgrid--members .awgrid__cell,.awgrid--press .awgrid__cell{aspect-ratio:auto!important;min-height:112px!important}
.awgrid__cell--text b{font-weight:450;font-size:17px;letter-spacing:-.2px;color:#7a7a7a}
@media (max-width:809.98px){.awgrid--members{grid-template-columns:repeat(2,1fr)!important}.awgrid--press{grid-template-columns:1fr!important}}
/* security seals bigger + note tidied (thomas) */
.cert__seal .seal{width:64px!important;height:64px!important}
.cert{gap:14px!important;padding:22px 20px!important}
.certs__note{margin:16px 0 0!important;max-width:52ch;font-size:13.5px!important;line-height:20px!important;color:var(--muted)!important}
/* testimonial headshots read as headshots (amir) */
.tcard__avatar{width:48px!important;height:48px!important;border-radius:50%!important}
.live__tabs > span{cursor:pointer}
/* hero email scene: envelope mark before "Broker message" */
.ha__mail{display:inline-block;width:14px;height:11px;margin:0 8px -1px 0;border:1.5px solid currentColor;border-radius:2px;position:relative;opacity:.7}
.ha__mail::after{content:"";position:absolute;left:1px;right:1px;top:0;height:5px;border-left:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:skewX(0);border-bottom:1.5px solid currentColor;clip-path:polygon(0 0,50% 100%,100% 0,100% 40%,50% 100%,0 40%)}
/* amir "Let's add their headshots here?" — they were hidden by an old rule */
.tcard__avatar{display:block!important}

/* ── Security panel: seals in one row, note below (was glued to the grid's side) ── */
.stk__panel[data-stage="sec"]{flex-direction:column!important;align-items:stretch!important;gap:0}
.stk__panel[data-stage="sec"] .certs{grid-template-columns:repeat(4,1fr)!important;width:100%}
.stk__panel[data-stage="sec"] .cert{align-items:center!important;text-align:center;padding:24px 14px 22px!important}
.stk__panel[data-stage="sec"] .cert em{max-width:14ch}
.stk__panel[data-stage="sec"] .certs__note{margin:18px 4px 0!important;padding-top:14px;border-top:1px solid var(--line);max-width:none!important;text-align:left}
@media (max-width:809.98px){
  .stk__panel[data-stage="sec"] .certs{grid-template-columns:repeat(2,1fr)!important}
}

/* ── Observability panel, friendlier wording (her note: customers are not technical) ── */
.tc__name{font-weight:450;font-size:14px;line-height:20px;color:var(--ink)}
.tc__facts{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0;padding:10px 12px;border-radius:8px;background:#f2f1ed}
.tc__facts dt{font-weight:400;font-size:12.5px;line-height:18px;color:var(--muted)}
.tc__facts dd{margin:0;font-weight:450;font-size:12.5px;line-height:18px;color:var(--ink)}
.tc__step em{color:#4a4842}

/* ── Observability panel: no blue on the site — grey tile, muted label, green agent ── */
.tc__ico{background:#f2f1ed!important;color:#4a4842!important}
.tc__who u{color:var(--muted)!important}
.tc__agent{color:var(--green-deep)!important}

/* ── Deployment plan: four weeks in a row, a detail line per week, fuller card ── */
.tline{padding:24px 26px 22px!important}
.tline__steps{margin-top:18px!important;gap:14px!important}
.tline__steps li{gap:6px!important;padding-top:14px!important}
.tline__steps em{font-size:15px;line-height:21px}
.tline__steps small{display:block;font-weight:400;font-size:12.5px;line-height:18px;color:var(--muted)}
@media (min-width:640px) and (max-width:809.98px){.tline__steps{grid-template-columns:repeat(4,1fr)!important}}
@media (max-width:639.98px){.tline__steps{grid-template-columns:1fr 1fr!important}}
.trace--call{padding-bottom:10px!important}
.tc__step{padding:8px 0}

/* ── Agentic graph: solid hairlines, bar scales from the centre (dashed scaleX crawled) ── */
.agraph__wire::after,.agraph__drops i::after{border-left:1px solid rgba(16,16,16,.18)!important}
.agraph__bar{position:relative;height:14px!important;border-top:0!important;background:none;transform:none!important;animation:none!important;overflow:visible}
.agraph__bar::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(16,16,16,.18);
  transform-origin:center;transform:scaleX(0);animation:agBar var(--loop) var(--ease) infinite;animation-delay:inherit}
@media (prefers-reduced-motion:reduce){.agraph__bar::after{animation:none;transform:scaleX(1)}}

/* ── Memberships / press rows: dividers for 4 and 3 columns (old rules assumed 6/3/2) ── */
.awgrid--members .awgrid__cell,.awgrid--press .awgrid__cell{border-top:0!important;border-left:1px solid var(--line)!important}
.awgrid--members .awgrid__cell:first-child,.awgrid--press .awgrid__cell:first-child{border-left:0!important}
@media (max-width:809.98px){
  .awgrid--members .awgrid__cell:nth-child(2n+1){border-left:0!important}
  .awgrid--members .awgrid__cell:nth-child(n+3){border-top:1px solid var(--line)!important}
  .awgrid--press .awgrid__cell{border-left:0!important}
  .awgrid--press .awgrid__cell:nth-child(n+2){border-top:1px solid var(--line)!important}
}

/* ═══ Marketing website 2.0 (Sept 2026) — visual direction from the reference doc ═══ */
:root{--grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* Pallet / Federato: the bottom CTA is a textured, slowly moving dark surface */
.ctacard{background:radial-gradient(120% 150% at 12% 0%,#0f4a38 0%,#06251c 58%,#06251c 100%)!important;border:0!important;overflow:hidden}
.ctacard::before{content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 46% at 24% 68%,rgba(0,181,133,.42) 0,rgba(0,181,133,0) 70%),
    radial-gradient(30% 40% at 78% 30%,rgba(143,227,198,.22) 0,rgba(143,227,198,0) 70%);
  animation:ctaDrift 18s var(--ease) infinite alternate}
.ctacard::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:var(--grain);background-size:160px 160px;opacity:.22;mix-blend-mode:soft-light}
.ctacard__field{opacity:.28!important}
.ctacard__body,.ctacard__btn{position:relative;z-index:1}
.ctacard__body .t-h2{color:#f2f1ed!important}
.ctacard__body .t-lead{color:rgba(242,241,237,.72)!important}
.ctacard__body::before{display:none!important}
@keyframes ctaDrift{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(3%,3%,0) scale(1.06)}}

/* Federato: a whisper of grain on the hero ground */
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:var(--grain);background-size:160px 160px;opacity:.10;mix-blend-mode:multiply}
.hero>.shell,.hero .hero__logos{position:relative;z-index:1}

/* Pallet KEY FEATURES: product mockups sit on a tinted, textured ground instead of plain dots */
.stk__stage,.viz--flow,.wf2 .viz{position:relative;background-color:#eef3ef!important;background-image:linear-gradient(160deg,#eef3ef 0%,#f2f1ed 100%)!important;background-size:auto!important}
.stk__stage::before,.viz--flow::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background-image:var(--grain),radial-gradient(60% 70% at 70% 20%,rgba(0,181,133,.10) 0,rgba(0,181,133,0) 70%);background-size:160px 160px,auto;opacity:.9;mix-blend-mode:multiply}
.stk__stage>*,.viz--flow>*{position:relative;z-index:1}
.stk__panel>*{box-shadow:0 1px 2px rgba(16,16,16,.05),0 18px 40px -26px rgba(16,16,16,.35)}

/* Thomas: fewer rounded corners on the hero workflow cards */
.ha__card{border-radius:var(--r-md)!important}
.ha__panel{border-radius:var(--r-sm)!important}

/* Reducto: icons throughout — one line icon per accordion row */
.stk__row > button{gap:12px!important}
.stk__row > button::before{content:"";flex:0 0 20px;width:20px;height:20px;background:currentColor;color:var(--green-deep);
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.stk__row[data-stage="aud"]{--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l8 3v6c0 4.4-3.4 8.2-8 9-4.6-.8-8-4.6-8-9V6l8-3z'/><path d='M9 12l2 2 4-4'/></svg>")}
.stk__row[data-stage="trace"]{--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12h4l3-7 4 14 3-7h4'/></svg>")}
.stk__row[data-stage="gap"]{--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M9 3h6M10 3v6l-5.5 9.5A2 2 0 0 0 6.2 21h11.6a2 2 0 0 0 1.7-2.5L14 9V3'/></svg>")}
.stk__row[data-stage="sec"]{--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='10' width='16' height='11' rx='1.5'/><path d='M8 10V7a4 4 0 0 1 8 0v3'/></svg>")}
.stk__row[data-stage="fde"]{--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='3.5'/><path d='M3 20a6 6 0 0 1 12 0'/><path d='M16 4.5a3.5 3.5 0 0 1 0 7M21 20a6 6 0 0 0-4-5.7'/></svg>")}
.stk__row[data-stage="gov"]{--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v18M5 7h14M7 7l-3 6a3 3 0 0 0 6 0L7 7zM17 7l-3 6a3 3 0 0 0 6 0l-3-6z'/></svg>")}
@media (prefers-reduced-motion:reduce){.ctacard::before{animation:none}}

/* ── Her review of pack 1: one texture only (the CTA). Flat tinted grounds, no grain on paper ── */
.hero::after{display:none}
.stk__stage::before,.viz--flow::before{display:none}
.stk__stage,.viz--flow,.wf2 .viz{background-image:none!important;background-color:#f2f1ed!important}
.stk__panel[data-stage="sec"] .certs__note{background:#ffffff;border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px!important;margin-top:14px!important;border-top:1px solid var(--line)}
.ctacard::after{opacity:.16}

/* ── Her direction: sites without big radii. Tighten the radius tokens site-wide ── */
:root{--r-lg:4px;--r-md:3px;--r-sm:2px}
.btn,.nav__cta .btn,.ctacard__btn,.tcard__cta,.footer__cta{border-radius:3px!important}
.tile,.stk__stage,.tcard,.brw,.aud,.trace,.gap,.tline,.ctacard,.awgrid,.certs,.hub__card,.hub__core,.seg,.noapi{border-radius:4px!important}
.tc__ico,.tc__io pre,.tc__facts{border-radius:3px!important}
.tc__meta,.tc__badge{border-radius:2px!important}
/* bar box back to 1px so the drops sit right under the line */
.agraph__bar{height:1px!important;margin:0}
/* pseudo-lines take the step's own delay (the element's animation is off, so inherit gave 0s) */
.agraph__wire::after,.agraph__drops i::after,.agraph__bar::after{animation-delay:var(--d,0s)!important}

/* ═══ Pack 2 — block styles carried over from the references ═══════════════ */

/* Pallet hero: the agent workflow runs as dark glass cards on a deep-green field, sharp corners */
.hero .ha{padding:26px 24px 0;border-radius:4px;overflow:hidden;
  background:radial-gradient(120% 140% at 8% 0%,#0f4a38 0%,#06251c 56%,#06251c 100%)}
.hero .ha__viewport{-webkit-mask-image:linear-gradient(180deg,transparent 0,#101010 34px,#101010 100%);mask-image:linear-gradient(180deg,transparent 0,#101010 34px,#101010 100%)}
.hero .ha__card,.hero .ha__winbody,.hero .ha__track.is-paper .ha__card,.hero .ha__track.is-light .ha__card{
  background:rgba(255,255,255,.075)!important;border:1px solid rgba(255,255,255,.14)!important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#f2f1ed;
  box-shadow:0 18px 40px -28px rgba(16,16,16,.6)}
.hero .ha__winbody{border:0!important;background:transparent!important}
.hero .ha__panel{background:rgba(255,255,255,.06)!important;border-color:var(--rule-dark)!important}
.hero .ha__who b,.hero .ha__quote,.hero .ha__head b,.hero .ha__working,.hero .ha__rows li,.hero .ha__panel p{color:#f2f1ed!important}
.hero .ha__rows li{color:rgba(242,241,237,.86)!important}
.hero .ha__when,.hero .ha__winbody .ha__when{color:rgba(242,241,237,.58)!important}
.hero .ha__bar{background:rgba(255,255,255,.14)!important}
.hero .ha__bar i{background:var(--green)!important}
.hero .ha__bar-os i{background:rgba(255,255,255,.28)!important}
.hero .ha__dots i{background:rgba(242,241,237,.6)!important}
.hero .ha__mark img{filter:brightness(0) invert(1);opacity:.75!important}
.hero .ha [class*="chip"],.hero .ha [class*="status"] > span:last-child{background:rgba(0,181,133,.16)!important;color:#8fe3c6!important;border-color:transparent!important}
.hero .ha__rows--panel .ha__ok{filter:brightness(0) invert(1);opacity:.7}
.hero .ha__avatar img{filter:none}

/* Pallet KEY FEATURES: product mockups on a saturated brand ground, the panel floats with a real shadow */
.stk__stage,.viz--flow,.wf2 .viz{background-color:#0f4a38!important;background-image:linear-gradient(160deg,#0f4a38 0%,#06251c 100%)!important}
.stk__panel>*,.viz--flow .agraph{box-shadow:0 2px 4px rgba(16,16,16,.18),0 30px 60px -30px rgba(16,16,16,.55)!important}
.agraph__wire::after,.agraph__drops i::after,.agraph__bar::after{border-color:rgba(255,255,255,.28)!important;background:rgba(255,255,255,.28)!important}
.agraph__node,.agraph__lead,.agraph__subs>div,.agraph__io{background:#ffffff}
.agraph__trig{background:#f2f1ed!important;color:var(--ink)!important}
.agraph__io span,.agraph__io b{background:#ffffff}

/* Reducto "Enterprise-ready": Why Strada becomes the dark band, icon-led rows on the left */
.why .stk{background:#06251c!important;border-color:rgba(255,255,255,.08)!important}
.why .stk__stage{background-color:transparent!important;background-image:none!important}
.why .seg__kicker{color:var(--green)!important}
.why .stk__title,.why .stk__row > button b,.why .stk__row > button u{color:#f2f1ed!important}
.why .stk__body p{color:rgba(242,241,237,.72)!important}
.why .stk__body li{color:rgba(242,241,237,.86)!important}
.why .stk__row{border-color:rgba(255,255,255,.10)!important}
.why .stk__row > button::before{color:var(--green)}
.why .stk__row > button:hover b{color:#ffffff!important}
.why .stk__row > button u::before,.why .stk__row > button u::after{background:rgba(242,241,237,.8)!important}

/* Reducto: a line icon in front of every tile title */
.tile__title::before,.ints__title::before,.noapi__title::before{content:"";display:inline-block;width:22px;height:22px;margin:0 10px -3px 0;background:var(--green-deep);
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.tile--conv .tile__title{--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1.1-4.4A8 8 0 1 1 21 12Z'/></svg>")}
.tile--flow .tile__title{--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='5' r='2.5'/><circle cx='18' cy='19' r='2.5'/><circle cx='6' cy='19' r='2.5'/><path d='M6 7.5v9M6 12h8a4 4 0 0 1 4 4v.5'/></svg>")}
.ints__title{--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M9 3v4M15 3v4M7 7h10v4a5 5 0 0 1-10 0V7zM12 16v5'/></svg>")}
.noapi__title{--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='16' rx='1.5'/><path d='M3 9h18M7 6.5h.01M10 6.5h.01'/></svg>")}
.hero .ha__quote{background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.10)}

/* ═══ Colour composition (her note: the refs use a palette, not one colour) ═══════
   paper #f2f1ed · forest #06251c→#0f4a38 · strada green #00b585 · mint #8fe3c6 (on dark)
   sand #e9e0ce (warm second ground) · sage #dce7e0 (soft tint for chips/plates) */
:root{--forest:#06251c;--forest-2:#0f4a38;--mint:#8fe3c6;--sand:#e9e0ce;--sand-2:#e9e0ce;--sage:#dce7e0;--sage-2:#dce7e0}

/* alternate the product grounds like Pallet alternates blue/orange: warm sand, then forest */
.tile--conv .viz--chan,.tile--conv .viz--bleed{background:linear-gradient(160deg,var(--sand) 0%,var(--sand-2) 100%)!important;border-radius:4px;padding:18px}
.tile--conv .live{background:#ffffff;border:1px solid rgba(16,16,16,.08);border-radius:4px;padding:14px 16px 12px;box-shadow:0 2px 4px rgba(16,16,16,.06),0 24px 48px -30px rgba(16,16,16,.45)}
/* hub core stays white: the mark PNG carries a white disc */
.noapi .brw{box-shadow:0 2px 4px rgba(16,16,16,.06),0 24px 48px -30px rgba(16,16,16,.45)}

/* soft sage plates for the small tags, so green stays the accent and sage carries the tint */
.seg__lines .chips li{background:var(--sage);color:#0f4a38;border:0;border-radius:2px;padding:4px 9px}
.seg__lines .chips li+li::before{display:none}
.lv__att,.tc__meta{background:var(--sage)!important;color:#0f4a38!important}

/* impact numbers pick up the forest tone; the caption stays muted */
.fig__num{color:var(--forest)!important}
.segrow--stat{background:linear-gradient(160deg,var(--forest-2) 0%,var(--forest) 100%)!important}
.segrow--stat .segfig{background:transparent!important;box-shadow:none!important;border:0!important}
.segrow--stat .segfig b{color:var(--mint)!important}
/* the dark Why band is a box again, so it needs its inset back */
.why .stk{padding:40px 44px!important;border-radius:4px!important}
@media (max-width:1199.98px){.why .stk{padding:32px 28px!important}}
@media (max-width:809.98px){.why .stk{padding:24px 18px!important}}

/* ── Glass effect studied from the Pallet reference: frosted cards need shapes behind them ── */
.hero .ha{position:relative}
.hero .ha::before{content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(42% 48% at 22% 72%,rgba(0,181,133,.55) 0,rgba(0,181,133,0) 70%),
    radial-gradient(34% 44% at 80% 24%,rgba(143,227,198,.32) 0,rgba(143,227,198,0) 70%),
    radial-gradient(28% 36% at 60% 88%,rgba(255,255,255,.10) 0,rgba(255,255,255,0) 70%);
  animation:ctaDrift 22s var(--ease) infinite alternate}
.hero .ha__viewport{position:relative;z-index:1}
.hero .ha__card,.hero .ha__track.is-paper .ha__card,.hero .ha__track.is-light .ha__card{
  background:linear-gradient(180deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.05) 100%)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 24px 48px -30px rgba(16,16,16,.65)!important}
.hero .ha__panel,.hero .ha__quote{background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.hero .ha__chip{background:rgba(0,181,133,.18)!important;color:#8fe3c6!important;border:1px solid rgba(143,227,198,.35)!important}
/* the Strada mark PNG has a light disc behind the rings; invert + screen keeps only the rings */
.hero .ha__mark img{filter:invert(1);mix-blend-mode:screen;opacity:.85!important}
@media (prefers-reduced-motion:reduce){.hero .ha::before{animation:none}}
/* hero glass: every check reads mint on dark (the SVGs carry a hard-coded dark stroke) */
.hero .ha__rows .ha__ok,.hero .ha__rows--green .ha__ok,.hero .ha__rows--panel .ha__ok{filter:none!important;color:#8fe3c6!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.2 10.4l2.6 2.5 5.2-5.4' fill='none' stroke='%238fe3c6' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;background-color:transparent!important}
.hero .ha__head .ha__tick,.hero .ha svg{color:#8fe3c6}
/* agentic graph on forest: the systems row is light chips on the ground, not a white bar */
.viz--flow .agraph__io{background:transparent!important;border:0!important;box-shadow:none!important}
.viz--flow .agraph__io span{background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.18)!important;color:#dce7e0!important}
.viz--flow .agraph__io b{background:transparent!important;color:rgba(242,241,237,.7)!important}

/* ═══ Pallet, closer: canopy-like field behind the glass, mocks bleeding off their ground ═══ */
.hero .ha{background:
  radial-gradient(58% 46% at 18% 28%,#0f4a38 0,rgba(15,74,56,0) 62%),
  radial-gradient(46% 58% at 82% 72%,#0f4a38 0,rgba(15,74,56,0) 60%),
  radial-gradient(36% 38% at 62% 16%,#0f4a38 0,rgba(15,74,56,0) 56%),
  radial-gradient(30% 34% at 36% 84%,#0f4a38 0,rgba(15,74,56,0) 58%),
  linear-gradient(160deg,#0f4a38 0%,#06251c 100%)!important}
.hero .ha::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--grain);background-size:140px 140px;opacity:.26;mix-blend-mode:overlay}

/* KEY FEATURES: the product panel sits bottom-right and runs off the ground, like Pallet */
.stk__stage{padding:32px 0 0 32px!important;overflow:hidden}
.stk__panel{align-items:flex-end!important;justify-content:flex-end}
.stk__panel>*{position:relative;left:22px;top:22px;border-radius:4px 0 0 0!important}
.tile--flow .viz--flow{padding:28px 0 0 28px!important;overflow:hidden;display:flex;align-items:flex-end;justify-content:flex-end}
.viz--flow .agraph{position:relative;left:18px;top:18px;border-radius:4px 0 0 0!important}
.tile--conv .viz--chan,.tile--conv .viz--bleed{padding:24px 0 0 24px!important;overflow:hidden}
.tile--conv .live{position:relative;left:16px;top:16px;border-radius:4px 0 0 0!important}
@media (max-width:809.98px){
  .stk__stage{padding:20px 0 0 20px!important}.stk__panel>*{left:12px;top:12px}
  .viz--flow .agraph,.tile--conv .live{left:10px;top:10px}
}

/* ═══ CTA, closer to Pallet "Put AI to work": centred, label headline, heavy grain, dark drift below ═══ */
.ctaband{padding-left:0!important;padding-right:0!important}
.ctacard{flex-direction:column!important;align-items:center!important;justify-content:center;text-align:center;
  min-height:520px;padding:120px 40px!important;gap:28px!important;border-radius:0!important;
  background:
    radial-gradient(70% 60% at 30% 20%,#0f4a38 0,rgba(15,74,56,0) 60%),
    radial-gradient(50% 50% at 85% 30%,#0f4a38 0,rgba(15,74,56,0) 60%),
    linear-gradient(170deg,#0f4a38 0%,#0f4a38 55%,#06251c 100%)!important}
.ctacard::before{background:
    radial-gradient(52% 46% at 50% 104%,rgba(16,16,16,.62) 0,rgba(16,16,16,0) 70%),
    radial-gradient(34% 40% at 22% 96%,rgba(16,16,16,.45) 0,rgba(16,16,16,0) 70%),
    radial-gradient(36% 46% at 80% 40%,rgba(143,227,198,.16) 0,rgba(143,227,198,0) 70%)!important;
  animation-duration:16s!important}
.ctacard::after{opacity:.30!important;mix-blend-mode:overlay!important;background-size:120px 120px!important}
.ctacard__body{display:flex;flex-direction:column;align-items:center;gap:18px!important;max-width:720px}
.ctacard__body .t-h2{display:inline;background:#06251c;color:#f2f1ed!important;padding:.06em .22em .1em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:1.15;letter-spacing:-1.2px}
.ctacard__body .t-lead{max-width:44ch;margin:0 auto;color:rgba(242,241,237,.8)!important}
.ctacard__btn{margin:6px auto 0}
@media (max-width:809.98px){.ctacard{min-height:420px;padding:80px 22px!important}}

/* ═══ Reducto "Features": use-case items as clean grid cells, icon inline with the title ═══ */
.tabs__panel .caps{display:grid!important;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line)}
.tabs__panel .caps li{display:flex!important;flex-direction:column;gap:8px;padding:22px 20px 24px!important;border-bottom:1px solid var(--line);border-right:1px solid var(--line);grid-template-columns:none!important}
.tabs__panel .caps li:nth-child(2n){border-right:0}
.tabs__panel .caps li:nth-last-child(-n+2):nth-child(odd),.tabs__panel .caps li:last-child{border-bottom:0}
.tabs__panel .cap__ico{width:18px;height:18px;flex:0 0 18px;background-size:18px 18px;margin:0}
.tabs__panel .cap__txt{gap:6px}
.tabs__panel .cap__txt b{display:flex;align-items:center;gap:8px;font-size:16px;line-height:22px;font-weight:450}
.tabs__panel .cap__txt em{font-size:14.5px;line-height:21px;max-width:34ch}
/* icon moves onto the title line */
.tabs__panel .caps li{position:relative}
.tabs__panel .caps li .cap__ico{position:absolute;left:20px;top:24px}
.tabs__panel .caps li .cap__txt{padding-left:26px}
.segrow__label{font-size:12px!important;letter-spacing:.6px;text-transform:uppercase;color:var(--green-deep)!important;font-weight:450!important}
@media (max-width:809.98px){.tabs__panel .caps{grid-template-columns:1fr}.tabs__panel .caps li{border-right:0}}

/* ═══ Reducto "Enterprise-ready": pixel-grid field behind the seals in the dark Why band ═══ */
.why .stk__stage{padding:28px!important;overflow:visible;
  background-image:radial-gradient(rgba(255,255,255,.10) 1.6px,transparent 1.7px)!important;background-size:22px 22px!important;background-position:center!important}
.why .stk__panel>*{left:0!important;top:0!important;border-radius:4px!important}
.why .stk__panel{align-items:center!important;justify-content:center!important}
.why .stk__panel[data-stage="sec"] .certs{border:1px solid rgba(255,255,255,.16)!important;background:rgba(255,255,255,.10)!important;gap:1px}
.why .stk__panel[data-stage="sec"] .cert{background:#06251c!important;color:#f2f1ed}
.why .stk__panel[data-stage="sec"] .cert em{color:rgba(242,241,237,.72)!important}
.why .stk__panel[data-stage="sec"] .cert__seal .seal circle,.why .stk__panel[data-stage="sec"] .cert__seal .seal path,.why .stk__panel[data-stage="sec"] .cert__seal .seal polygon{stroke:#8fe3c6!important}
.why .stk__panel[data-stage="sec"] .cert__seal .seal text{fill:#f2f1ed!important}
.why .stk__panel[data-stage="sec"] .certs__note{background:transparent!important;border:0!important;border-top:1px solid rgba(255,255,255,.12)!important;color:rgba(242,241,237,.72)!important}
/* Pallet's CTA runs edge to edge */
.ctaband{max-width:none!important;padding:0!important;margin:0!important}
.ctacard{max-width:none!important;width:100%;margin:0!important}
/* the agentic graph is a diagram, not a window: centred on the ground, no bleed, no inner box */
.tile--flow .viz--flow{padding:28px 24px 22px!important;align-items:center!important;justify-content:center!important;overflow:visible!important}
.viz--flow .agraph{left:0!important;top:0!important;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;width:100%;max-width:520px}

/* ═══ SYSTEM: where each tone lives, and one hairline per ground ═══════════════
   forest = product working + trust + close (hero field, agentic graph, Why band, CTA)
   sand   = human moments (statement band, conversational agent)
   sage   = control (Control stage, chips)   ·   paper = everything else, incl. footer */

/* statement band: sand, words light up from muted to forest */
.statement{background:linear-gradient(160deg,var(--sand) 0%,var(--sand-2) 100%)!important}
.statement__field{opacity:.35}
.statement__text.is-words,.statement__text.is-words span,.statement__text .w{color:rgba(6,37,28,.30)!important}
.statement__text .w.is-lit{color:var(--forest)!important}

/* Control stage: sage, not forest */
#platform .tile--wide.stk .stk__stage{background-color:var(--sage)!important;background-image:linear-gradient(160deg,#dce7e0 0%,#dce7e0 100%)!important}
#platform .tile--wide.stk .stk__panel>*{box-shadow:0 1px 2px rgba(16,16,16,.06),0 24px 48px -30px rgba(16,16,16,.45)!important}

/* footer back to paper so the dark CTA stands alone */
.footer{background:var(--bg)!important;color:var(--ink)!important;border-top:1px solid rgba(16,16,16,.10)}
.footer__logo img{filter:none!important;opacity:1!important}
.footer__tag,.footer__copy{color:var(--muted)!important}
.footer__col h4{color:var(--ink)!important}
.footer__col a,.footer__col button{color:#4a4842!important}
.footer__col a:hover{color:var(--ink)!important}
.footer__cta{background:var(--ink)!important;color:#ffffff!important}
.footer__ghost span{color:rgba(16,16,16,.05)!important;-webkit-text-fill-color:rgba(16,16,16,.05)}

/* hairlines: one tone per ground */
.tcar__btn{border-color:rgba(16,16,16,.10)!important}
.tile--conv .live{border-color:rgba(16,16,16,.10)!important}
.hero .ha__card,.hero .ha__track.is-paper .ha__card,.hero .ha__track.is-light .ha__card,.hero .ha__panel,.hero .ha__quote,.hero .ha__chip,
.why .stk,.why .stk__row,.why .stk__panel[data-stage="sec"] .certs,.viz--flow .agraph__io span{border-color:rgba(255,255,255,.14)!important}
.agraph__wire::after,.agraph__drops i::after,.agraph__bar::after{border-color:rgba(255,255,255,.24)!important;background:rgba(255,255,255,.24)!important}

/* Security note: a solid panel like the seal cards, no dots through the text */
.why .stk__panel[data-stage="sec"] .certs__note{background:#06251c!important;border:1px solid rgba(255,255,255,.14)!important;padding:14px 16px!important;color:rgba(242,241,237,.8)!important}
/* CTA back inside the shell, label hugs each headline line (motion.js splits lines into .ln > i) */
.ctaband{max-width:calc(var(--shell) + 80px)!important;margin:0 auto!important;padding:0 40px 0!important}
.ctacard{border-radius:4px!important;min-height:460px;padding:104px 40px!important}
.ctacard__body .t-h2{background:none!important;padding:0!important;display:block}
.ctacard__body .t-h2 .ln{display:block;text-align:center}
.ctacard__body .t-h2 .ln i{display:inline;background:#06251c;color:#f2f1ed;padding:.04em .2em .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ctacard__body .t-h2:not(:has(.ln)){display:inline!important;background:#06251c!important;padding:.06em .22em .1em!important}
@media (max-width:809.98px){.ctaband{padding:0 20px!important}.ctacard{min-height:380px;padding:72px 22px!important}}
/* flex items are blockified: make the CTA body a plain block so the inline headline gets per-line plates */
.ctacard__body{display:block!important;text-align:center}
.ctacard__body .t-h2{display:inline!important;background:#06251c!important;padding:.06em .22em .1em!important;line-height:1.28!important;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.ctacard__body .t-lead{margin:22px auto 0!important}
/* use-case grid: one hairline, not two stacked (cells kept their old border-top) */
.tabs__panel .caps li,.tabs__panel .caps li:first-child{border-top:0!important;padding-top:22px!important}
.tabs__panel .caps{border-top:1px solid rgba(16,16,16,.10)!important}
.tabs__panel .caps li{border-color:rgba(16,16,16,.10)!important}
/* statement: a contained sand card, not a full-width band */
.statement{background:transparent!important;padding-left:40px!important;padding-right:40px!important}
.statement .shell{position:relative;z-index:1;max-width:var(--shell);margin:0 auto;background:linear-gradient(160deg,var(--sand) 0%,var(--sand-2) 100%);border-radius:4px;padding:88px 72px;overflow:hidden}
.statement__field{left:auto;right:auto;width:auto;inset:0;max-width:var(--shell);margin:0 auto;border-radius:4px;opacity:.3;z-index:1;pointer-events:none}
.statement__text{position:relative;z-index:2}
@media (max-width:809.98px){.statement{padding-left:20px!important;padding-right:20px!important}.statement .shell{padding:48px 24px}}
/* CTA may run edge to edge (her call) */
.ctaband{max-width:none!important;padding:0!important}
.ctacard{border-radius:0!important}
/* statement back to the full-width forest band (her call), words light up to paper-white */
.statement{background:radial-gradient(120% 150% at 8% 0%,#0f4a38 0%,#06251c 58%,#06251c 100%)!important;padding-left:var(--pad-x)!important;padding-right:var(--pad-x)!important}
.statement .shell{background:none!important;border-radius:0!important;padding:0!important;overflow:visible!important}
.statement__field{inset:0!important;max-width:none!important;border-radius:0!important;opacity:1!important}
.statement__text.is-words,.statement__text.is-words span,.statement__text .w{color:rgba(242,241,237,.3)!important}
.statement__text .w.is-lit{color:#f2f1ed!important}
@media (max-width:809.98px){.statement{padding-left:20px!important;padding-right:20px!important}}