/* Review with Thomas and Amir, 10 Sep 2026. Loaded last. */

/* ═══ Blueprint: one style for every product visual (her pick, 10 Sep) ═══════
   Same language as the Security drawing in Why Strada, on light grounds:
   the page paper with a dot grid, a thin frame, "+" marks on two corners;
   windows and cards are paper with a thin outline, no shadow, no tinted
   grounds (sand / sage / green are gone from the mocks). ─────────────────── */
.home-refresh{--bp-paper:#f2f1ed;--bp-ink:rgba(16,16,16,.30);--bp-line:rgba(16,16,16,.14);--bp-dot:rgba(16,16,16,.14);--bp-accent:#007a57}

/* grounds: Conversational, Agentic, Control */
.home-refresh .platform .tile--conv .viz{position:relative;
  background-color:#f2f1ed!important;background-image:radial-gradient(var(--bp-dot) 1px,transparent 1.3px)!important;
  background-size:20px 20px!important;background-position:10px 10px!important;
  border:1px solid var(--bp-line)!important;border-radius:2px!important;box-shadow:none!important}
.home-refresh .platform .tile--conv .viz::before,
.home-refresh .platform .tile--conv .viz::after{content:"";display:block;position:absolute;inset:auto;width:13px;height:13px;z-index:2;
  pointer-events:none;opacity:1;mix-blend-mode:normal;filter:none;animation:none;
  background:linear-gradient(var(--bp-accent),var(--bp-accent)) center/100% 1px no-repeat,linear-gradient(var(--bp-accent),var(--bp-accent)) center/1px 100% no-repeat!important}
.home-refresh .platform .tile--conv .viz::before{left:12px;top:12px}
.home-refresh .platform .tile--conv .viz::after{right:12px;bottom:12px}

/* windows and panels: paper, thin outline, no shadow */
.home-refresh .platform .tile--conv .live,
.home-refresh #platform .tile--wide.stk .stk__panel>*,
.home-refresh .noapi .brw{background:var(--bp-paper)!important;border:1px solid var(--bp-ink)!important;border-radius:2px!important;box-shadow:none!important}
.home-refresh .platform .live__tabs{border-color:var(--bp-line)!important}
.home-refresh .platform .live__viz{background:transparent!important;border:1px dashed var(--bp-line)!important;border-radius:0!important}
.home-refresh .platform .lv__bub--in{background:transparent!important;border:1px solid var(--bp-ink)!important}
.home-refresh .platform .lv__bub--out,.home-refresh .platform .lv__att{background:transparent!important;border:1px solid var(--bp-accent)!important;color:var(--bp-accent)!important}
.home-refresh #platform .tc__facts,.home-refresh #platform .tc__io pre{background:transparent!important;border:1px dashed var(--bp-line);border-radius:0!important}
.home-refresh #platform .tc__ico{background:transparent!important;border:1px solid var(--bp-ink)}
.home-refresh #platform .tc__meta,.home-refresh #platform .tc__badge,.home-refresh #platform .gap__flag{background:transparent!important;border:1px solid var(--bp-accent)!important;color:var(--bp-accent)!important}
.home-refresh #platform .tc__head,.home-refresh #platform .tc__step,.home-refresh #platform .aud__top,.home-refresh #platform .gap__top{border-color:var(--bp-line)!important}
.home-refresh .noapi .brw__bar{background:transparent!important;border-bottom:1px solid var(--bp-line)!important}
.home-refresh .noapi .brw__body label b{border:1px solid var(--bp-line)!important;background-color:transparent}
.home-refresh .noapi .brw__foot{border-top:1px dashed var(--bp-line)!important}

/* Reducto, closer (her reference): warm hairlines, data the agent found or
   wrote is outlined in the accent with a pale tint, panel heads sit on a
   quiet grey band. Square corners, flat, no shadow anywhere. */
.home-refresh{--bp-ink:#c9c6bf;--bp-line:#dedcd6;--bp-tint:rgba(0,122,87,.06)}
.home-refresh #platform .tc__facts,
.home-refresh .platform .lv__bub--out,
.home-refresh .platform .lv__att{background:var(--bp-tint)!important;border:1px solid var(--bp-accent)!important;border-radius:0!important}
.home-refresh #platform :is(.aud__top,.tc__head,.gap__top){background:#f2f1ed;margin:-26px -26px 18px!important;padding:12px 26px!important;border-bottom:1px solid var(--bp-line)!important;font-weight:450}
.home-refresh #platform .trace--call .tc__head{margin:-16px -16px 14px!important;padding:12px 16px!important}
.home-refresh .platform .live__tabs{background:#f2f1ed;margin:-24px -24px 16px!important;padding:0 12px;border-bottom:1px solid var(--bp-line)!important}
.home-refresh .noapi .brw__bar{background:#f2f1ed!important}
.home-refresh :is(.hero .ha,.ha--flow) .ha__bar-os{background:#f2f1ed!important}
.home-refresh :is(.hero .ha,.ha--flow) .ha__rows--green li{padding:2px 6px;margin-left:-6px;border-left:2px solid transparent}
.home-refresh :is(.hero .ha,.ha--flow) .ha__card--actions .ha__rows li:last-child{background:var(--bp-tint);border-left-color:var(--bp-accent)}

/* window chrome dots are drawn, not filled */
.home-refresh .noapi .brw__bar i,
.home-refresh .ha__bar-os i{background:transparent!important;border:1px solid var(--ring);box-sizing:border-box}

/* ── Running card stacks (hero + Agentic): blueprint cards. In the hero the
      page ground and the Routes animation stay behind, nothing else. ── */
.home-refresh .hero .ha{background:none!important;box-shadow:none!important;overflow:visible}
.home-refresh .hero .ha::before,.home-refresh .hero .ha::after{display:none!important}
.home-refresh :is(.hero .ha,.ha--flow) .ha__card,
.home-refresh :is(.hero .ha,.ha--flow) .ha__track.is-light .ha__card,
.home-refresh :is(.hero .ha,.ha--flow) .ha__track.is-paper .ha__card{
  background:rgba(247,246,242,.94)!important;border:1px solid var(--bp-ink)!important;border-radius:2px!important;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none!important;color:var(--ink)}
.home-refresh :is(.hero .ha,.ha--flow) .ha__card+.ha__card::before{background:none!important;border-left:1px dashed var(--bp-ink)}
.home-refresh :is(.hero .ha,.ha--flow) .ha__bar-os{background:transparent!important;box-shadow:none!important;border-bottom:1px solid var(--bp-line)!important}
.home-refresh :is(.hero .ha,.ha--flow) .ha__winbody{background:transparent!important;border:0!important;box-shadow:none!important}
.home-refresh :is(.hero .ha,.ha--flow) :is(.ha__who b,.ha__quote,.ha__head b,.ha__working,.ha__panel p){color:var(--ink)!important;text-shadow:none}
.home-refresh :is(.hero .ha,.ha--flow) .ha__rows li{color:#4a4842!important}
.home-refresh :is(.hero .ha,.ha--flow) :is(.ha__when,.ha__winbody .ha__when){color:var(--muted)!important}
.home-refresh :is(.hero .ha,.ha--flow) :is(.ha__quote,.ha__panel){background:transparent!important;border:0!important;box-shadow:none!important}
.home-refresh :is(.hero .ha,.ha--flow) :is(.ha__who,.ha__head){border-color:var(--bp-line)!important}
.home-refresh :is(.hero .ha,.ha--flow) .ha__bar{background:var(--bp-line)!important}
.home-refresh :is(.hero .ha,.ha--flow) .ha__bar i{background:var(--bp-accent)!important}
.home-refresh :is(.hero .ha,.ha--flow) .ha__dots i{background:rgba(16,16,16,.4)!important}
.home-refresh :is(.hero .ha,.ha--flow) :is(.ha__chip,[class*="chip"]){background:transparent!important;color:var(--bp-accent)!important;border:1px solid var(--bp-accent)!important}
/* the old dark-glass rule `.hero .ha [class*="status"] > span:last-child` paints the
   chip mint-on-mint and outranks the line above; beat it on its own selector */
.home-refresh :is(.hero .ha,.ha--flow) [class*="status"] > span.ha__chip:last-child,
.home-refresh :is(.hero .ha,.ha--flow) [class*="status"] > span:last-child{background:transparent!important;color:var(--bp-accent)!important;border:1px solid var(--bp-accent)!important}
.home-refresh :is(.hero .ha,.ha--flow) .ha__mark img{filter:none!important;mix-blend-mode:normal!important;opacity:1!important}
.home-refresh :is(.hero .ha,.ha--flow) :is(.ha__head .ha__tick,svg){stroke:var(--bp-accent);color:var(--bp-accent)}
.home-refresh :is(.hero .ha,.ha--flow) :is(.ha__rows .ha__ok,.ha__rows--green .ha__ok){filter:none!important;background-color:transparent!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='%23007a57' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important}

/* Agentic tile layout: the hero's card stack inside the tile */
.home-refresh .platform .tile--flow .viz{padding:28px!important;align-items:stretch!important;justify-content:flex-start!important;min-height:520px}
.ha--flow{position:relative;z-index:1;width:100%;display:flex;flex-direction:column}
.ha--flow .ha__viewport{position:relative;height:460px;overflow:visible;-webkit-mask-image:none;mask-image:none}
.ha--flow .ha__track{position:relative;bottom:auto;min-height:100%;justify-content:center;gap:14px}
.ha--flow .ha__card{position:relative;padding:16px 18px}
.ha--flow .ha__track.is-paper .ha__card--win{padding:0}
.ha--flow .ha__card+.ha__card::before{content:"";position:absolute;left:29px;top:-15px;height:14px;width:0}
.ha--flow .ha__winbody{padding:16px 18px}
.ha--flow .ha__bar-os{padding:9px 18px}
.ha--flow .ha__head{width:auto;max-width:100%;margin:0 0 12px;padding:0 0 12px;gap:10px}
.ha--flow .ha__head b,.ha--flow .ha__working{font-size:14px;line-height:20px}
.ha--flow .ha__working{flex:1;min-width:0}
.ha--flow .ha__panel{padding:0!important}
.ha--flow .ha__panel p{font-size:14px;line-height:21px}
.ha--flow .ha__when{font-size:12px;white-space:nowrap}
.ha--flow .ha__rows{gap:6px}
.ha--flow .ha__rows li{font-size:13px;line-height:19px;align-items:flex-start}
.ha--flow .ha__rows .ha__ok{width:16px;height:19px;flex-basis:16px}
.ha--flow .ha__card--status,.ha--flow .ha__card--status2{display:flex;align-items:center;gap:10px}
.ha--flow .ha__chip{font-size:12px;padding:4px 7px;border-radius:2px!important;white-space:nowrap}
.ha--flow .ha__dots{display:none}
.ha--flow .ha__bar{height:3px;margin:10px 0}
@media (max-width:799.98px){
  .home-refresh .platform .tile--flow .viz{padding:18px 14px!important;min-height:0}
  .ha--flow .ha__viewport{height:480px}
}

/* ── Integrations (call 10 Sep, her note): one column, nothing switches.
      Title, categories in a row, a 3×3 wall of the top systems on the
      blueprint ground. Cells share hairlines; on scroll each cell is
      revealed once by a thin line crossing it, one after another. ── */
.home-refresh .platform .tile--ints{display:block!important;margin-top:0!important;padding:48px 0!important;
  background:transparent!important;border:0!important;border-top:1px solid var(--line)!important;border-radius:0!important;box-shadow:none!important}
.ints__head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:24px}
.home-refresh .ints__head .ints__title{max-width:22ch;margin:0}
.ints__note{margin:0 0 6px;font-size:14px;line-height:20px;color:var(--muted);white-space:nowrap}
.ints__note b{font-weight:450;color:var(--ink)}
.home-refresh .ints__kinds{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px;margin:0 0 20px;padding:14px 0;list-style:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.home-refresh .ints__kinds li{display:flex;align-items:center;gap:8px;padding:0;font-size:14px;line-height:22px;color:var(--ink);opacity:1;transform:none}
.home-refresh .ints__kinds li::before{content:"";width:5px;height:5px;background:var(--bp-accent)}
.home-refresh .iwall{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:24px;
  background-color:#f2f1ed;background-image:radial-gradient(var(--bp-dot) 1px,transparent 1.3px);background-size:20px 20px;background-position:10px 10px;
  border:1px solid var(--bp-line);border-radius:2px}
.home-refresh .iwall::before,.home-refresh .iwall::after{content:"";position:absolute;width:13px;height:13px;pointer-events:none;
  background:linear-gradient(var(--bp-accent),var(--bp-accent)) center/100% 1px no-repeat,linear-gradient(var(--bp-accent),var(--bp-accent)) center/1px 100% no-repeat}
.home-refresh .iwall::before{left:8px;top:8px}
.home-refresh .iwall::after{right:8px;bottom:8px}
.itile{position:relative;overflow:hidden;min-height:124px;border-right:1px solid var(--bp-ink);border-bottom:1px solid var(--bp-ink)}
.itile:nth-child(-n+3){border-top:1px solid var(--bp-ink)}
.itile:nth-child(3n+1){border-left:1px solid var(--bp-ink)}
.itile:nth-last-child(-n+3){border-bottom:1px solid var(--bp-ink)}
.itile__face{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:100%;padding:20px 16px;text-align:center}
.itile__face b{font-weight:450;font-size:16px;line-height:22px;color:var(--ink)}
.itile__face span{font-size:12px;line-height:16px;color:var(--muted)}
.itile--more .itile__face b{font-weight:300;font-size:32px;line-height:1;letter-spacing:-.04em}
.itile--more .itile__face span{max-width:22ch}

@media (max-width:799.98px){
  .home-refresh .platform .tile--ints{padding:32px 0!important}
  .ints__head{flex-direction:column;align-items:flex-start;gap:10px}
  .home-refresh .ints__kinds{gap:6px 20px}
  .home-refresh .iwall{padding:16px}
}
@media (max-width:559.98px){
  .home-refresh .iwall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .itile{min-height:104px;border-left:0!important;border-top:0!important}
  .itile:nth-child(-n+2){border-top:1px solid var(--bp-ink)!important}
  .itile:nth-child(2n+1){border-left:1px solid var(--bp-ink)!important}
  .itile:nth-child(3n){border-right:1px solid var(--bp-ink)}
  .itile:nth-child(2n){border-right:1px solid var(--bp-ink)}
  .itile--more{grid-column:1/-1}
}

/* ── Use cases: every segment has its own tone (light green, sand, forest),
      the rows come in one by one and the outcome counts up on each switch ── */
.tabs__panel--carriers{--tone:#007a57;--plate:#dce7e0;--plate-2:#dce7e0;--fig:#0f4a38;--fig-cap:#0f4a38;--bar:rgba(15,74,56,.12)}
.tabs__panel--tpas{--tone:#4a4842;--plate:#e9e0ce;--plate-2:#e9e0ce;--fig:#4a4842;--fig-cap:#4a4842;--bar:rgba(74,72,66,.14)}
:is(.tabs__panel--brokers,.tabs__panel--mgas){--tone:#0f4a38;--plate:#0f4a38;--plate-2:#06251c;--fig:#8fe3c6;--fig-cap:rgba(242,241,237,.78);--bar:rgba(255,255,255,.16)}
.home-refresh .tabs__panel .cap__ico{color:var(--tone)!important}
.home-refresh .tabs__panel .segrow--stat{background:linear-gradient(160deg,var(--plate) 0%,var(--plate-2) 100%)!important}
.home-refresh .tabs__panel .segrow--stat .segfig b{color:var(--fig)!important}
.home-refresh .tabs__panel .segrow--stat .segfig span,.home-refresh .tabs__panel .segrow--stat .segrow__label{color:var(--fig-cap)!important}
.home-refresh .tabs__panel .segrow--stat .segrow__label::before{background:var(--tone)}
.home-refresh :is(.tabs__panel--brokers,.tabs__panel--mgas) .segrow--stat .segrow__label::before{background:#8fe3c6}
.home-refresh :is(.tabs__panel--brokers,.tabs__panel--mgas) .segrow--stat:after{background:radial-gradient(rgba(143,227,198,.2) .8px,transparent 1px) 0 0/9px 9px}
.home-refresh .tabs:has(.tabs__tab:nth-child(1)[aria-selected="true"]) .tabs__ink{background:#007a57!important}
.home-refresh .tabs:has(.tabs__tab:nth-child(2)[aria-selected="true"]) .tabs__ink{background:#4a4842!important}
.home-refresh .tabs:has(.tabs__tab:nth-child(3)[aria-selected="true"]) .tabs__ink{background:#0f4a38!important}
.home-refresh .tabs__tab:nth-child(1)[aria-selected="true"]{color:#007a57!important}
.home-refresh .tabs__tab:nth-child(2)[aria-selected="true"]{color:#4a4842!important}
.home-refresh .tabs__tab:nth-child(3)[aria-selected="true"]{color:#0f4a38!important}
.segfig__bar{display:block;width:100%;max-width:240px;height:2px;margin:2px 0 4px;background:var(--bar);overflow:hidden}
.segfig__bar i{display:block;height:100%;width:var(--v,0%);background:var(--tone);transform-origin:left center;transform:scaleX(1)}
:is(.tabs__panel--brokers,.tabs__panel--mgas) .segfig__bar i{background:#8fe3c6}
.tabs__panel.is-live .segfig__bar i{animation:segBar .7s var(--ease-out) both}
.tabs__panel.is-live .caps li{animation:segIn .6s var(--ease-out) both;animation-delay:calc(var(--k,0) * 70ms)}
.tabs__panel.is-live .segrow--stat{animation:segIn .7s var(--ease-out) both;animation-delay:.12s}
@keyframes segBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes segIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tabs__panel.is-live .caps li,.tabs__panel.is-live .segrow--stat,.tabs__panel.is-live .segfig__bar i{animation:none}}

/* ── CTA: today's centred composition, but the white card with the Routes
      lines running across it, inside the content width (not edge to edge). ── */
.home-refresh .ctaband{max-width:calc(var(--shell) + 80px)!important;margin:0 auto!important;padding:0 40px!important}
.home-refresh .ctacard{max-width:none!important;border-radius:4px!important;background:#ffffff!important;border:1px solid rgba(16,16,16,.10)!important}
.home-refresh .ctacard::before,.home-refresh .ctacard::after{display:none!important}
.home-refresh .ctacard__field{display:block!important;opacity:1!important}
.home-refresh .ctacard__body .t-h2,.home-refresh .ctacard__body .t-h2 .ln i,.home-refresh .ctacard__body .t-h2:not(:has(.ln)){background:none!important;color:var(--ink)!important;padding:0!important}
.home-refresh .ctacard__body .t-lead{color:var(--muted)!important}
.home-refresh .ctacard .ctacard__btn{background:var(--green)!important;color:#ffffff!important;border:0!important;box-shadow:none!important}
.home-refresh .ctacard:hover .ctacard__btn{background:var(--green-deep)!important}
@media (max-width:809.98px){.home-refresh .ctaband{padding:0 20px!important}}

/* ── Footer: back to the deep green ground (her call, 10 Sep); values are
      site.css's own, undoing home.css's "footer back to paper" block. ── */
.home-refresh .footer{background:radial-gradient(120% 150% at 8% 0%,#0f4a38 0%,#06251c 58%,#06251c 100%)!important;color:#f2f1ed!important;border-top:0!important}
.home-refresh .footer__logo img{filter:brightness(0) invert(1)!important;opacity:.94!important}
.home-refresh .footer__tag{color:rgba(242,241,237,.6)!important}
.home-refresh .footer__copy{color:rgba(242,241,237,.4)!important}
.home-refresh .footer__col h4{color:rgba(242,241,237,.42)!important}
.home-refresh .footer__col a,.home-refresh .footer__col button{color:rgba(242,241,237,.86)!important}
.home-refresh .footer__col a:hover,.home-refresh .footer__col button:hover{color:#ffffff!important}
.home-refresh .footer__cta{background:#f2f1ed!important;color:#06251c!important}
.home-refresh .footer__cta:hover{background:#ffffff!important}
.home-refresh .footer__ghost span{color:rgba(242,241,237,.055)!important;-webkit-text-fill-color:rgba(242,241,237,.055)}

/* ── FAQ: one hairline above the questions, not the list's plus the first item's ── */
.home-refresh .faq .acc{border-top:0!important}

/* ── Why Strada: the stage inherited the light-ground hairline, which reads
      as a ghost frame on the charcoal band; the drawings stand free ── */
.home-refresh #enterprise .stk__stage{border:0!important;box-shadow:none!important}

/* ── Governance: role permissions read as a small table, not as checkboxes
      that look clickable. Role is a tag, status a pill with a dot. ── */
.home-refresh #enterprise .stk__panel[data-stage="gov"] .aud__list{display:grid;gap:0;border-top:1px solid var(--rule-dark)}
.home-refresh #enterprise .stk__panel[data-stage="gov"] .aud__list li{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;
  padding:14px 0!important;border-bottom:1px solid var(--rule-dark)!important}
.home-refresh #enterprise .stk__panel[data-stage="gov"] .aud__list li i{display:none!important}
.home-refresh #enterprise .stk__panel[data-stage="gov"] .aud__list li em{display:flex!important;align-items:center;gap:14px;min-width:0;font-size:14px;line-height:20px;color:#eef3ef}
.home-refresh #enterprise .stk__panel[data-stage="gov"] .aud__list li em u{display:inline-flex!important;justify-content:center;flex:0 0 84px;margin:0!important;padding:3px 0;
  border:1px solid var(--rule-dark);border-radius:2px;text-decoration:none;font-size:12px;line-height:18px;color:#dce7e0}
.home-refresh #enterprise .stk__panel[data-stage="gov"] .aud__list li span{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:2px;
  font-size:12px;line-height:18px;white-space:nowrap;background:rgba(143,227,198,.12);color:#8fe3c6!important}
.home-refresh #enterprise .stk__panel[data-stage="gov"] .aud__list li span::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.home-refresh #enterprise .stk__panel[data-stage="gov"] .aud__list li:last-child span{background:rgba(233,224,206,.12);color:#e9e0ce!important}
.home-refresh #enterprise .stk__panel[data-stage="gov"] .aud__foot{padding-top:16px}
@media (max-width:599.98px){
  .home-refresh #enterprise .stk__panel[data-stage="gov"] .aud__list li em{flex-direction:column;align-items:flex-start;gap:6px}
  .home-refresh #enterprise .stk__panel[data-stage="gov"] .aud__list li em u{flex:0 0 auto;padding:2px 8px}
}

/* ═══ Type: one family, three weights, one short scale (Thomas + her note) ═══
   Family  TWK Lausanne only (no mono, no Inter anywhere on the page)
   Weights 300 display and figures · 400 text · 450 medium
   Sizes   display · 48 section heads · 32 tile heads · 20 · 18 lead ·
           16 body · 15 list · 14 / 13 / 12 in mocks · 11 labels ─────────── */
.home-refresh *{font-family:inherit!important}
.home-refresh :is(.t-eyebrow,.seg__kicker){font-weight:450!important}
/* section heads: 48 */
.home-refresh :is(.quotes__head .t-h2,.faq__head .t-h2,.ctacard__body .t-h2,.why .stk__title){font-size:48px!important;line-height:1.1!important;letter-spacing:-1.4px!important}
.home-refresh .statement__text{font-size:48px!important;line-height:1.2!important;letter-spacing:-1.4px!important}
/* tile heads: 32 */
.home-refresh .noapi__title{font-size:32px!important;line-height:1.2!important;letter-spacing:-.7px!important}
/* figures: display weight, not the hairline 250 */
.home-refresh :is(.fig__num,.fig__num span,.segfig b){font-weight:300!important;letter-spacing:-.04em!important}
.home-refresh .segrow--stat .segfig b{font-size:48px!important;line-height:1!important;letter-spacing:-1.9px}
/* 18 / 16 / 15 */
.home-refresh .faq .acc__head{font-size:18px!important}
.home-refresh :is(.feature-description,.noapi__copy>p:not(.t-eyebrow),.cap__txt b,.awgrid__cell b,.tcar__btn){font-size:16px!important}
/* no 15 and no 13 (her note: "a million text variations"): lists, buttons and
   names go to 16, secondary lines and mock text to 14 */
.home-refresh :is(.btn,.stk__body li,.stk__body p,.tcard__who strong,.acc__body p,.footer__col a,.footer__col button,.footer__tag,.icats button){font-size:16px!important}
.home-refresh :is(.cap__txt em,.results__lead,.fig__cap,.segfig span,.ints__note,.ints__note b,.linkarrow,.tcard__who span,.certs__note,.hub__note,.hub__note b,.live__say,.live__foot,.lv__line,.lv__subj,.lv__bub,.lv__prev){font-size:14px!important}
.home-refresh :is(.noapi__say span,.footer__cta){font-size:16px!important}
.home-refresh :is(.seg__lines .chips li,.caplist li b,.lv__from,.tc__agent){font-size:14px!important}
.home-refresh :is(.aud__foot b,.tc__player b,.gap__fix span,.gap__fix b){font-size:12px!important}
.home-refresh .gap__q{font-size:20px!important}
/* mocks: 14 / 12 */
.home-refresh :is(.aud__list li em,.tcard__cta,.ha__rows li,.ha__quote,.ha__panel p,.tc__step em,.tc__name,.gap__a,.tline__steps em,.tline__top span,.itile b){font-size:14px!important}
.home-refresh :is(.tline__steps small,.tc__step u,.tc__who u,.tc__facts dt,.tc__facts dd,.tc__badge,.tc__meta,.tc__qa em,.tc__io span,.aud__list li u,.gap__fix,.gap__top b,.cert em,.itile span){font-size:12px!important}
.home-refresh :is(.aud__top span,.aud__list li em u,.aud__list li span,.aud__foot span,.hub__core em,.brw__bar span,.brw__body label,.brw__btn,.brw__rec,.brw__foot b,.footer__copy,.footer__col h4){font-size:12px!important}
/* labels: 11, uppercase, the site font */
.home-refresh :is(.ticker,.ticker u,.ticker b){font-size:12px!important}
.home-refresh :is(.segrow__label,.fig__index,.tline__top b,.tline__steps b,.aud__top b,.noapi .t-eyebrow){font-size:12px!important;line-height:16px!important;letter-spacing:.08em!important;text-transform:uppercase;font-weight:450!important}
.home-refresh .tcard__pretitle{font-size:20px!important}
.home-refresh :is(.hero .ha,.ha--flow) :is(.ha__when,.ha__chip){font-size:12px!important}
.home-refresh .platform :is(.lv__live,.lv__att,.lv__top b){font-size:12px!important}
.home-refresh .platform .lv__ava{font-size:12px!important}

/* ═══ Motion, detailed like Reducto: one easing, three durations ═══════════
   150ms hover · 300ms colour / fade · 600ms movement · 700ms ease-out reveal */
.home-refresh{--ease:cubic-bezier(.4,0,.2,1);--ease-out:cubic-bezier(0,0,.2,1);--t-fast:.15s;--t-mid:.3s;--t-slow:.6s}
.home-refresh .reveal{transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)!important}
.home-refresh .ha__card{transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease),height .3s var(--ease)!important}
.home-refresh .ha__card.is-swap>*{transition:opacity var(--t-mid) var(--ease)!important}
.home-refresh .ha__bar i{transition:width var(--t-slow) var(--ease)!important}
.home-refresh .tabs__ink{transition:transform var(--t-slow) var(--ease),width var(--t-slow) var(--ease),background-color var(--t-mid) var(--ease)!important}
.home-refresh :is(.btn,.linkarrow,.tabs__tab,.stk__row button,.acc__head,.footer__col a,.nav__links a,.tcar__btn,.ctacard__btn){transition-duration:var(--t-fast)!important;transition-timing-function:var(--ease)!important}
.home-refresh .tabs__panel.is-live :is(.caps li,.segrow--stat){animation-timing-function:var(--ease)!important;animation-duration:var(--t-slow)!important}
/* the agent works down its list: each finished row lights in turn, the last stays lit */
.home-refresh :is(.hero .ha,.ha--flow) .ha__card--actions .ha__rows li{animation:rowPass .7s var(--ease) both;transition:background-color var(--t-slow) var(--ease),border-color var(--t-slow) var(--ease)}
.home-refresh :is(.hero .ha,.ha--flow) .ha__card--actions .ha__rows li:nth-child(2){animation-delay:.45s}
.home-refresh :is(.hero .ha,.ha--flow) .ha__card--actions .ha__rows li:nth-child(3){animation-delay:.9s;animation-name:rowStay}
.home-refresh :is(.hero .ha,.ha--flow) .ha__card--actions .ha__rows li:last-child{background:transparent;border-left-color:transparent}
@keyframes rowPass{0%{opacity:0;background-color:transparent;border-left-color:transparent}25%{opacity:1;background-color:var(--bp-tint);border-left-color:var(--bp-accent)}100%{opacity:1;background-color:transparent;border-left-color:transparent}}
@keyframes rowStay{0%{opacity:0;background-color:transparent;border-left-color:transparent}40%,100%{opacity:1;background-color:var(--bp-tint);border-left-color:var(--bp-accent)}}
@media (prefers-reduced-motion:reduce){.home-refresh :is(.hero .ha,.ha--flow) .ha__card--actions .ha__rows li{animation:none}}

/* ── Press: AM Best joins the row (text plate until the logo file arrives) ── */
.awgrid--press{grid-template-columns:repeat(4,1fr)!important}
.awgrid--press .awgrid__cell--text b{font-weight:450;font-size:20px;letter-spacing:-.3px;color:rgba(16,16,16,.5)}
@media (max-width:809.98px){
  .awgrid--press{grid-template-columns:repeat(2,1fr)!important}
  .awgrid--press .awgrid__cell{border-left:0!important;border-top:0!important}
  .awgrid--press .awgrid__cell:nth-child(2n){border-left:1px solid var(--line)!important}
  .awgrid--press .awgrid__cell:nth-child(n+3){border-top:1px solid var(--line)!important}
}

/* ═══ Platform tiles told apart (her note: the three read as one). Flat grounds
   from the palette, the animation standing on them, after rollups.com:
   Conversational = paper + dot grid · Agentic = deep green + grain, visual on
   the LEFT · Control = sand + grain · Integrations = no ground at all. ═══════ */
.home-refresh .platform .tile--flow .viz,
.home-refresh #platform .tile--wide.stk .stk__stage{position:relative;overflow:hidden;background-image:none!important;border:0!important;border-radius:2px!important;box-shadow:none!important}
.home-refresh .platform .tile--flow .viz::before,
.home-refresh #platform .tile--wide.stk .stk__stage::before{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}
.home-refresh .platform .tile--flow .viz::after,
.home-refresh #platform .tile--wide.stk .stk__stage::after{display:none}
/* Agentic: deep green, paper cards on it, dashed connectors in the light line tone */
.home-refresh .platform .tile--flow .viz{background-color:#06251c!important}
.home-refresh .platform .tile--flow{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.home-refresh .platform .tile--flow .wf2{order:1}
.home-refresh .platform .tile--flow .feature-copy{order:2}
.home-refresh .ha--flow .ha__card+.ha__card::before{border-left-color:var(--rule-dark)}
.home-refresh .ha--flow .ha__card,.home-refresh .ha--flow .ha__track.is-paper .ha__card,.home-refresh .ha--flow .ha__track.is-light .ha__card{background:var(--paper)!important;border-color:var(--line)!important}
/* Control: sand */
.home-refresh #platform .tile--wide.stk .stk__stage{background-color:#e9e0ce!important}
/* Integrations: cells on the page itself, no frame, no dots, no corner marks */
.home-refresh .iwall{padding:0;background:none;border:0;border-radius:0}
.home-refresh .iwall::before,.home-refresh .iwall::after{display:none}
.itile{border-color:var(--line)!important}
@media (max-width:799.98px){
  .home-refresh .platform .tile--flow .wf2{order:2}
  .home-refresh .platform .tile--flow .feature-copy{order:1}
}

/* ── Impact: off the sand (her note: sand + black + green together). Page paper,
      no grain; the green second line and the hairline stay. ── */
.home-refresh .results{background:var(--bg)!important}
.home-refresh .results::before{display:none}

/* ── Agentic stack: no fade at the top of the cards (the hero's viewport mask
      and paper haze were leaking in; on the dark ground they read as a smear) ── */
.home-refresh .ha--flow .ha__viewport{-webkit-mask-image:none!important;mask-image:none!important}
.home-refresh .ha--flow::before,.home-refresh .ha--flow::after{display:none!important}

/* ── Impact figures (her "show this block better"): a scale under every
      figure, ticks every 10, the green line fills to the value as the number
      counts up. Labels carry the small green mark used elsewhere. ── */
.home-refresh .figs{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.home-refresh .fig{padding:36px 32px 40px!important;border-left:1px solid var(--line)}
.home-refresh .fig:first-child{padding-left:0!important;border-left:0}
.home-refresh .fig__index{display:flex;align-items:center;gap:8px;margin:0 0 28px}
.home-refresh .fig__index::before{content:"";width:5px;height:5px;background:var(--green)}
.home-refresh .fig__num{font-size:clamp(64px,7vw,104px)!important;line-height:.95!important;color:var(--ink)!important}
.fig__bar{position:relative;display:block;height:10px;margin:22px 0 0;
  background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 10%) 0 0/100% 100% no-repeat,linear-gradient(var(--line),var(--line)) 0 100%/100% 1px no-repeat}
.fig__bar::after{content:"";position:absolute;right:0;top:0;bottom:0;width:1px;background:var(--line)}
.fig__bar i{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--green);transition:width .7s var(--ease)}
.fig.is-in .fig__bar i{width:var(--v,0%)}
.home-refresh .fig__cap{margin-top:16px!important;max-width:26ch}
@media (max-width:599px){
  .home-refresh .fig,.home-refresh .fig:first-child{padding:24px 0 28px!important;border-left:0}
  .home-refresh .fig__num{font-size:64px!important}
}
@media (prefers-reduced-motion:reduce){.fig__bar i{transition:none;width:var(--v,0%)}}

/* ── Control: on the page paper (her call), no sand, no grain; the window
      keeps its outline so it still reads as a panel ── */
.home-refresh #platform .tile--wide.stk .stk__stage{background-color:var(--bg)!important;border:1px solid var(--line)!important}
.home-refresh #platform .tile--wide.stk .stk__stage::before{display:none}

/* ── Integrations categories: plain words in a row, no marks, no lines of
      their own (the row's bottom rule sat on the wall's top rule) ── */
.home-refresh .ints__kinds{justify-content:flex-start;gap:8px 32px;margin:0 0 28px;padding:0;border:0!important}
.home-refresh .ints__kinds li{color:var(--muted);gap:0}
.home-refresh .ints__kinds li::before{display:none}

/* ── CTA: on the page paper, half the height, and air before the footer ── */
.home-refresh .ctaband{padding:0 40px 104px!important}
.home-refresh .ctacard{background:var(--bg)!important;min-height:0!important;padding:72px 40px!important}
.home-refresh .ctacard__body .t-lead{margin-top:14px!important}
.home-refresh .ctacard__btn{margin-top:6px!important}
@media (max-width:809.98px){.home-refresh .ctaband{padding:0 20px 64px!important}.home-refresh .ctacard{padding:56px 22px!important}}

/* ── Use cases: one tone for all three segments (no per-tab colours). Tab ink
      is the primary green, the active label is ink. ── */
.tabs__panel--carriers,.tabs__panel--tpas,:is(.tabs__panel--brokers,.tabs__panel--mgas){--tone:#007a57;--plate:#eef3ef;--plate-2:#dce7e0;--fig:#06251c;--fig-cap:#4a4842;--bar:rgba(16,16,16,.12)}
.home-refresh :is(.tabs__panel--brokers,.tabs__panel--mgas) .segrow--stat .segrow__label::before{background:var(--tone)}
.home-refresh :is(.tabs__panel--brokers,.tabs__panel--mgas) .segrow--stat:after{background:radial-gradient(rgba(16,16,16,.14) .8px,transparent 1px) 0 0/9px 9px}
:is(.tabs__panel--brokers,.tabs__panel--mgas) .segfig__bar i{background:var(--tone)}
.home-refresh .tabs .tabs__ink{background:var(--green)!important}
.home-refresh .tabs__tab[aria-selected="true"]{color:var(--ink)!important}
.home-refresh .tabs__tab{color:var(--muted)}
.home-refresh .tabs__tab:hover{color:var(--ink)}

/* ── Use cases: the switcher is a column on the left (her ask), the panel on
      the right. Active segment: ink label + green mark; no underline. ── */
.home-refresh #use-cases .tabs{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr);gap:48px;align-items:start}
.home-refresh #use-cases .tabs__bar{display:flex;flex-direction:column;width:100%;gap:0;padding:0;margin:0;border-top:1px solid var(--line)}
.home-refresh #use-cases .tabs__ink{display:none}
.home-refresh #use-cases .tabs__tab{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;min-height:0;padding:18px 0 18px 20px;position:relative;
  text-align:left;border-bottom:1px solid var(--line);border-radius:0;color:var(--muted)!important;transition:color var(--t-fast) var(--ease)}
.home-refresh #use-cases .tabs__tab b{font-weight:400;font-size:20px;line-height:26px;color:inherit}
.home-refresh #use-cases .tabs__tab small{font-size:14px;line-height:20px;color:var(--muted)}
.home-refresh #use-cases .tabs__tab::before{content:"";position:absolute;left:0;top:27px;width:5px;height:5px;background:var(--green);opacity:0;transition:opacity var(--t-mid) var(--ease)}
.home-refresh #use-cases .tabs__tab:hover,.home-refresh #use-cases .tabs__tab[aria-selected="true"]{color:var(--ink)!important}
.home-refresh #use-cases .tabs__tab[aria-selected="true"]::before{opacity:1}
.home-refresh #use-cases .tabs__tab:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.home-refresh #use-cases .tabs__panel{min-width:0}
@media (max-width:799.98px){
  .home-refresh #use-cases .tabs{display:flex;flex-direction:column;gap:24px}
  .home-refresh #use-cases .tabs__bar{flex-direction:row;border-top:0;border-bottom:1px solid var(--line)}
  .home-refresh #use-cases .tabs__tab{flex:1 1 0;padding:12px 0 14px;border-bottom:0}
  .home-refresh #use-cases .tabs__tab::before{top:auto;bottom:-1px;left:0;width:100%;height:2px}
  .home-refresh #use-cases .tabs__tab b{font-size:16px;line-height:22px}
  .home-refresh #use-cases .tabs__tab small{display:none}
}

/* ── Two line problems she caught:
      1. the categories row inherited a 26px left padding from the old check-icon
         style, so it started indented and the gaps read uneven;
      2. in Conversational the window runs off the ground, and its right and
         bottom borders sat 1px inside the ground's own border: two lines. ── */
.home-refresh .ints__kinds li{padding:0!important}
.home-refresh .ints__head{margin-bottom:32px}
.home-refresh .ints__note{margin-top:12px}
.home-refresh .platform .tile--conv .live{border-right:0!important;border-bottom:0!important;border-bottom-right-radius:0!important}

/* ── CTA (her notes): the lines clear the middle so the words sit on plain
      paper, and the card gets the same air above as below ── */
.home-refresh .ctaband{padding:20px 40px 120px!important}
.home-refresh .ctacard__field{
  -webkit-mask-image:radial-gradient(ellipse 40% 60% at 50% 50%,transparent 0,transparent 58%,#000 100%),linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%)!important;
  -webkit-mask-composite:source-in!important;
  mask-image:radial-gradient(ellipse 40% 60% at 50% 50%,transparent 0,transparent 58%,#000 100%),linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%)!important;
  mask-composite:intersect!important}
@media (max-width:809.98px){.home-refresh .ctaband{padding:12px 20px 80px!important}}

/* ── Integrations: the categories row is gone; each tile already carries its
      category, the 200+ tile covers the rest ── */
.home-refresh .ints__kinds{display:none!important}
.home-refresh .ints__head{margin-bottom:28px}

/* ── Card stacks: older cards were scaled to .985 (old "settle" style), so the
      newest read wider. All cards keep full size. ── */
.home-refresh :is(.hero .ha,.ha--flow) .ha__card.is-in{transform:none!important}

/* ── Control rows (her "too many colours"): ink for titles and icons, muted for
      body and checks, green only on the small CONTROL label ── */
.home-refresh #platform .stk__row button b,
.home-refresh #platform .stk__row.is-open button b,
.home-refresh #platform .stk__row button:hover b{color:var(--ink)!important}
.home-refresh #platform .stk__row button::before,
.home-refresh #platform .stk__row.is-open button::before{color:var(--ink)!important;background:var(--ink)}
.home-refresh #platform .stk__body li::before{background:var(--muted)!important}
.home-refresh #platform .stk__row > button u::before,.home-refresh #platform .stk__row > button u::after{background:var(--muted)!important}
.home-refresh #platform .stk__body li::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='m2.5 7 3 3 6-6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='m2.5 7 3 3 6-6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* ── Why Strada rows (her note): one primary colour, paper-white, for the row
      titles; everything else is the same white at lower opacity: body text
      .72, icons, checks and the plus/minus .5. No green in the rows. ── */
.home-refresh #enterprise .stk__row button b{color:#f2f1ed!important}
.home-refresh #enterprise .stk__row button::before,
.home-refresh #enterprise .stk__row.is-open button::before{color:rgba(242,241,237,.5)!important}
.home-refresh #enterprise .stk__row > button u::before,.home-refresh #enterprise .stk__row > button u::after{background:rgba(242,241,237,.5)!important}
.home-refresh #enterprise .stk__body p,.home-refresh #enterprise .stk__body li{color:rgba(242,241,237,.72)!important}
.home-refresh #enterprise .stk__body li::before{background:rgba(242,241,237,.5)!important}
.home-refresh #enterprise .seg__kicker{color:rgba(242,241,237,.5)!important}

/* ═══ Control panels in the rollups language (her reference, again): dark flat
   ground with grain, one paper card standing on it with a soft shadow and a
   faint top light; inside, one ink at three strengths (1 / .6 / .4), thin
   hairlines, outlined badges in ink, green only on the scrubber. ═══════════ */
.home-refresh #platform .tile--wide.stk .stk__stage{background-color:#06251c!important;border:0!important;padding:40px!important}
.home-refresh #platform .tile--wide.stk .stk__stage::before{display:block;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}
.home-refresh #platform .tile--wide.stk .stk__panel>*{background:var(--paper)!important;border:1px solid var(--line)!important;border-radius:3px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 30px 60px -30px rgba(0,0,0,.65),0 2px 6px rgba(0,0,0,.18)!important}
/* heads: no grey band, a hairline only */
.home-refresh #platform :is(.aud__top,.tc__head,.gap__top){background:transparent!important;border-bottom:1px solid rgba(16,16,16,.10)!important}
/* text: one ink, three strengths */
.home-refresh #platform .trace--call :is(.tc__who b,.tc__name,.tc__step em,.tc__facts dd,.gap__q,.aud__list li em){color:var(--ink)!important}
.home-refresh #platform .trace--call :is(.tc__agent,.tc__who u,.tc__player b,.tc__step u,.tc__facts dt,.tc__io span,.tc__qa em){color:rgba(16,16,16,.55)!important}
.home-refresh #platform .trace--call .tc__agent{font-weight:450}
/* badges and the found-data block: quiet, outlined in ink, no green */
.home-refresh #platform :is(.tc__meta,.tc__badge,.gap__flag){background:transparent!important;border:1px solid rgba(16,16,16,.22)!important;color:rgba(16,16,16,.7)!important;border-radius:2px!important}
.home-refresh #platform .tc__meta .tc__dot{background:var(--green)}
.home-refresh #platform .tc__facts{background:rgba(16,16,16,.035)!important;border:0!important;border-radius:2px!important}
.home-refresh #platform .tc__ico{border-color:rgba(16,16,16,.18)!important;color:rgba(16,16,16,.6)}
.home-refresh #platform .tc__check{color:rgba(16,16,16,.55)!important;border-color:rgba(16,16,16,.35)!important}
.home-refresh #platform .tc__step{border-color:var(--line)!important}
/* the scrubber keeps the green */
.home-refresh #platform .tc__bar{background:rgba(16,16,16,.10)!important}
.home-refresh #platform .tc__bar i,.home-refresh #platform .tc__play{background:var(--green)!important}
/* audit + gap panels follow the same strengths */
.home-refresh #platform .aud__list li span,.home-refresh #platform .aud__top span,.home-refresh #platform .aud__foot span,.home-refresh #platform .gap__a,.home-refresh #platform .gap__fix span{color:rgba(16,16,16,.55)!important}
.home-refresh #platform .aud__list li i{border-color:var(--ring)!important;background-color:transparent!important}
@media (max-width:1199.98px){.home-refresh #platform .tile--wide.stk .stk__stage{padding:24px!important}}

/* ── Integrations: real logos where the export has them, grey; the name stays
      for screen readers. Tiles without a file keep the text name. ── */
.itile__face--logo img{height:28px;width:auto;max-width:140px;filter:grayscale(1) brightness(.55);opacity:.7;transition:filter var(--t-mid) var(--ease),opacity var(--t-mid) var(--ease)}

/* Amir review 16 Sep: show integration marks in their original brand colors. */
.home-refresh .itile__face--logo img{filter:none!important;opacity:1!important}
.itile__face--logo b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* marks sit beside the name, so every tile reads the same */
.itile__face--logo{gap:6px}
.itile__face--logo b{position:static;width:auto;height:auto;overflow:visible;clip:auto;display:inline-flex;align-items:center;gap:10px}
.itile__face--logo img{height:22px;max-width:60px;order:-1}

/* ── Observability card, stripped to the reference's economy: a narrow paper
      card centred on the dark ground, four timed lines, found data as one
      muted line. No badges, no toggle, no icon tile, no "Found" box. ── */
.home-refresh #platform .tile--wide.stk .stk__panel{justify-content:center!important;align-items:center!important}
.home-refresh #platform .tile--wide.stk .stk__panel>*{max-width:440px;width:100%;padding:0!important}
.home-refresh #platform .trace--call .tc__head{margin:0!important;padding:16px 20px!important;gap:12px}
.home-refresh #platform .trace--call :is(.tc__ico,.tc__qa,.tc__badge,.tc__io>span,.tc__check){display:none!important}
.home-refresh #platform .trace--call .tc__who u{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.home-refresh #platform .trace--call .tc__who b{font-size:16px;font-weight:450}
.home-refresh #platform .trace--call .tc__meta{margin-left:auto;padding:3px 8px}
.home-refresh #platform .trace--call .tc__player{padding:14px 20px 4px}
.home-refresh #platform .trace--call .tc__steps{padding:4px 20px 16px}
.home-refresh #platform .trace--call .tc__step{grid-template-columns:40px 1fr;padding:12px 0;gap:0 8px}
.home-refresh #platform .trace--call .tc__step:last-child{border-bottom:0!important}
.home-refresh #platform .trace--call .tc__tool{margin:0}
.home-refresh #platform .trace--call .tc__name{font-weight:450}
.home-refresh #platform .trace--call .tc__io{margin-top:4px}
.home-refresh #platform .trace--call .tc__facts{display:flex!important;flex-wrap:wrap;gap:0;padding:0!important;background:transparent!important}
.home-refresh #platform .trace--call .tc__facts dt{display:none}
.home-refresh #platform .trace--call .tc__facts dd{color:rgba(16,16,16,.55)!important;font-weight:400}
.home-refresh #platform .trace--call .tc__facts dd+dd::before{content:"·";margin:0 6px}
.home-refresh #platform .trace--call .tc__agent{display:block;margin-bottom:2px}

/* ── Integrations wall, shorter (her note) ── */
.itile{min-height:88px!important}
.itile__face{padding:14px 16px;gap:4px}
.itile--more .itile__face b{font-size:24px}

/* ── Integrations wall: light, as it was (her call); grey marks beside the
      names; each cell revealed once by a thin line ── */
.itile{min-height:112px!important}
.itile__face--logo img[alt="NiCE"]{height:14px;max-width:50px}

/* ── No dots, no corner marks anywhere (her note). Conversational stands on a
      flat paper ground with a hairline, like the other tiles. ── */
.home-refresh .platform .tile--conv .viz{background-image:none!important;background-color:#f2f1ed!important}
.home-refresh .platform .tile--conv .viz::before,.home-refresh .platform .tile--conv .viz::after{display:none!important}
.home-refresh .why .stk__stage{background-image:none!important}
.home-refresh .segrow--stat::after,.home-refresh :is(.tabs__panel--brokers,.tabs__panel--mgas) .segrow--stat:after{display:none!important}
.home-refresh .hub{background-image:none!important}

/* ═══ Icons: Phosphor (Light) everywhere, one family (her ask). Titles and row
   heads carry 24px icons in the text colour; list checks are 14px and muted,
   so the hierarchy reads. Source: @phosphor-icons/core 2.1.1, MIT. ═══════ */
.home-refresh .stk__row[data-stage="aud"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M208,42H48A14,14,0,0,0,34,56v56c0,51.94,25.12,83.4,46.2,100.64,22.73,18.6,45.27,24.89,46.22,25.15a6,6,0,0,0,3.16,0c.95-.26,23.49-6.55,46.22-25.15C196.88,195.4,222,163.94,222,112V56A14,14,0,0,0,208,42Zm2,70c0,37.76-13.94,68.39-41.44,91.06A131.17,131.17,0,0,1,128,225.72a130.94,130.94,0,0,1-40.56-22.66C59.94,180.39,46,149.76,46,112V56a2,2,0,0,1,2-2H208a2,2,0,0,1,2,2ZM172.24,99.76a6,6,0,0,1,0,8.48l-56,56a6,6,0,0,1-8.48,0l-24-24a6,6,0,0,1,8.48-8.48L112,151.51l51.76-51.75A6,6,0,0,1,172.24,99.76Z'/%3E%3C/svg%3E")}
.home-refresh .stk__row[data-stage="trace"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M238,128a6,6,0,0,1-6,6H203.71l-38.34,76.68A6,6,0,0,1,160,214h-.3a6,6,0,0,1-5.31-3.85L95.51,55.57,61.46,130.48A6,6,0,0,1,56,134H24a6,6,0,0,1,0-12H52.14l38.4-84.48a6,6,0,0,1,11.07.34L160.74,193.1l33.89-67.78A6,6,0,0,1,200,122h32A6,6,0,0,1,238,128Z'/%3E%3C/svg%3E")}
.home-refresh .stk__row[data-stage="gap"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M220,200.8,158,97.48V38h10a6,6,0,0,0,0-12H88a6,6,0,0,0,0,12H98V97.48L36,200.8A14,14,0,0,0,48,222H208a14,14,0,0,0,12-21.2ZM109.15,102.23a6,6,0,0,0,.85-3.09V38h36V99.14a6,6,0,0,0,.85,3.09l39.65,66.08c-12.41,3.16-30.86,3-55.79-9.66-16.94-8.58-33-12.8-47.83-12.64ZM209.72,209a2,2,0,0,1-1.74,1H48a2,2,0,0,1-1.71-3l29-48.41c14.89-2.08,31.68,1.55,49.94,10.79C144,178.8,159.67,182,172.42,182A67.89,67.89,0,0,0,192.89,179l16.8,28A2,2,0,0,1,209.72,209Z'/%3E%3C/svg%3E")}
.home-refresh .stk__row[data-stage="sec"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M208,82H174V56a46,46,0,0,0-92,0V82H48A14,14,0,0,0,34,96V208a14,14,0,0,0,14,14H208a14,14,0,0,0,14-14V96A14,14,0,0,0,208,82ZM94,56a34,34,0,0,1,68,0V82H94ZM210,208a2,2,0,0,1-2,2H48a2,2,0,0,1-2-2V96a2,2,0,0,1,2-2H208a2,2,0,0,1,2,2Zm-72-56a10,10,0,1,1-10-10A10,10,0,0,1,138,152Z'/%3E%3C/svg%3E")}
.home-refresh .stk__row[data-stage="fde"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M112.6,158.43a58,58,0,1,0-57.2,0A93.83,93.83,0,0,0,5.21,196.72a6,6,0,0,0,10.05,6.56,82,82,0,0,1,137.48,0,6,6,0,0,0,10-6.56A93.83,93.83,0,0,0,112.6,158.43ZM38,108a46,46,0,1,1,46,46A46.06,46.06,0,0,1,38,108Zm211,97a6,6,0,0,1-8.3-1.74A81.8,81.8,0,0,0,172,166a6,6,0,0,1,0-12,46,46,0,1,0-17.08-88.73,6,6,0,1,1-4.46-11.14,58,58,0,0,1,50.14,104.3,93.83,93.83,0,0,1,50.19,38.29A6,6,0,0,1,249,205Z'/%3E%3C/svg%3E")}
.home-refresh .stk__row[data-stage="gov"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M237.57,133.77l-32-80h0a6,6,0,0,0-6.86-3.63L134,64.52V40a6,6,0,0,0-12,0V67.19l-67.3,15a6,6,0,0,0-4.27,3.63h0v0l-32,80A6.1,6.1,0,0,0,18,168c0,21.86,23.31,30,38,30s38-8.14,38-30a6.1,6.1,0,0,0-.43-2.23L64.19,92.33,122,79.48V210H104a6,6,0,0,0,0,12h48a6,6,0,0,0,0-12H134V76.81l56.21-12.49-27.78,69.45A6.1,6.1,0,0,0,162,136c0,21.86,23.31,30,38,30s38-8.14,38-30A6.1,6.1,0,0,0,237.57,133.77ZM56,186a36.89,36.89,0,0,1-17.48-4.56c-5.37-3.13-8.15-7.18-8.49-12.37l26-64.91,26,64.91C81.06,182.85,62.58,186,56,186Zm144-32a36.89,36.89,0,0,1-17.48-4.56c-5.37-3.13-8.15-7.18-8.49-12.37l26-64.91,26,64.91C225.06,150.85,206.58,154,200,154Z'/%3E%3C/svg%3E")}
.home-refresh .stk__row button::before{width:24px!important;height:24px!important;flex-basis:24px!important;
  -webkit-mask:var(--ico) center/contain no-repeat!important;mask:var(--ico) center/contain no-repeat!important;background:currentColor!important}
.home-refresh #platform .stk__row button::before{color:var(--ink)!important}
.home-refresh #enterprise .stk__row button::before{color:#f2f1ed!important}
.home-refresh .tile--conv .tile__title{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M128,26A102,102,0,0,0,38.35,176.69L26.73,211.56a14,14,0,0,0,17.71,17.71l34.87-11.62A102,102,0,1,0,128,26Zm0,192a90,90,0,0,1-45.06-12.08,6.09,6.09,0,0,0-3-.81,6.2,6.2,0,0,0-1.9.31L40.65,217.88a2,2,0,0,1-2.53-2.53L50.58,178a6,6,0,0,0-.5-4.91A90,90,0,1,1,128,218Z'/%3E%3C/svg%3E")}
.home-refresh .tile--flow .tile__title{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M244.24,75.76l-32-32a6,6,0,0,0-8.48,8.48L225.51,74H208c-48,0-59.44,27.46-69.54,51.69-9.43,22.64-17.66,42.33-53,44.16a38,38,0,1,0,.06,12c43.34-2.06,54.29-28.29,64-51.55C159.44,106.53,168,86,208,86h17.51l-21.75,21.76a6,6,0,1,0,8.48,8.48l32-32A6,6,0,0,0,244.24,75.76ZM48,202a26,26,0,1,1,26-26A26,26,0,0,1,48,202Z'/%3E%3C/svg%3E")}
.home-refresh .ints__title{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M236.24,19.76a6,6,0,0,0-8.48,0L173.94,73.57l-6.79-6.78a30,30,0,0,0-42.42,0L100,91.51l-7.76-7.75a6,6,0,0,0-8.48,8.48L91.51,100,66.79,124.73a30,30,0,0,0,0,42.42l6.78,6.79L19.76,227.76a6,6,0,1,0,8.48,8.48l53.82-53.81,6.79,6.78a30,30,0,0,0,42.42,0L156,164.49l7.76,7.75a6,6,0,0,0,8.48-8.48L164.49,156l24.72-24.73a30,30,0,0,0,0-42.42l-6.78-6.79,53.81-53.82A6,6,0,0,0,236.24,19.76Zm-113.45,161a18,18,0,0,1-25.46,0L75.27,158.67a18,18,0,0,1,0-25.46L100,108.49,147.51,156Zm57.94-57.94L156,147.51,108.49,100l24.72-24.73a18,18,0,0,1,25.46,0l22.06,22.06a18,18,0,0,1,0,25.46ZM90.43,34.23a6,6,0,0,1,11.14-4.46l8,20a6,6,0,1,1-11.14,4.46Zm-64,59.54a6,6,0,0,1,7.8-3.34l20,8a6,6,0,1,1-4.46,11.14l-20-8A6,6,0,0,1,26.43,93.77Zm203.14,68.46a6,6,0,0,1-7.8,3.34l-20-8a6,6,0,0,1,4.46-11.14l20,8A6,6,0,0,1,229.57,162.23Zm-64,59.54a6,6,0,1,1-11.14,4.46l-8-20a6,6,0,0,1,11.14-4.46Z'/%3E%3C/svg%3E")}
.home-refresh .noapi__title{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M216,42H40A14,14,0,0,0,26,56V200a14,14,0,0,0,14,14H216a14,14,0,0,0,14-14V56A14,14,0,0,0,216,42ZM40,54H216a2,2,0,0,1,2,2V90H38V56A2,2,0,0,1,40,54ZM216,202H40a2,2,0,0,1-2-2V102H218v98A2,2,0,0,1,216,202Z'/%3E%3C/svg%3E")}
.home-refresh .feature-copy .tile__title::before{width:28px;height:28px;background:var(--ink)!important;color:var(--ink)!important}
.home-refresh .tabs__panel .caps li .cap__ico{width:22px;height:22px;flex-basis:22px;top:22px;color:var(--ink)!important}
.home-refresh .cap__ico svg{width:22px;height:22px}
.home-refresh .tabs__panel .caps li .cap__txt{padding-left:32px}
/* list checks: Phosphor check, small and muted */
.home-refresh #platform .stk__body li::before,.home-refresh #enterprise .stk__body li::before{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E") center/contain no-repeat!important;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E") center/contain no-repeat!important;width:14px!important;height:14px!important}
.home-refresh .feature-copy .caplist li::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E") center/contain no-repeat;background:var(--muted)}

/* ═══ Icons: Phosphor (Light) everywhere, one family (her ask). Titles and row
   heads carry 24px icons in the text colour; list checks are 14px and muted,
   so the hierarchy reads. Source: @phosphor-icons/core 2.1.1, MIT. ═══════ */
.home-refresh .stk__row[data-stage="aud"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M208,42H48A14,14,0,0,0,34,56v56c0,51.94,25.12,83.4,46.2,100.64,22.73,18.6,45.27,24.89,46.22,25.15a6,6,0,0,0,3.16,0c.95-.26,23.49-6.55,46.22-25.15C196.88,195.4,222,163.94,222,112V56A14,14,0,0,0,208,42Zm2,70c0,37.76-13.94,68.39-41.44,91.06A131.17,131.17,0,0,1,128,225.72a130.94,130.94,0,0,1-40.56-22.66C59.94,180.39,46,149.76,46,112V56a2,2,0,0,1,2-2H208a2,2,0,0,1,2,2ZM172.24,99.76a6,6,0,0,1,0,8.48l-56,56a6,6,0,0,1-8.48,0l-24-24a6,6,0,0,1,8.48-8.48L112,151.51l51.76-51.75A6,6,0,0,1,172.24,99.76Z'/%3E%3C/svg%3E")}
.home-refresh .stk__row[data-stage="trace"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M238,128a6,6,0,0,1-6,6H203.71l-38.34,76.68A6,6,0,0,1,160,214h-.3a6,6,0,0,1-5.31-3.85L95.51,55.57,61.46,130.48A6,6,0,0,1,56,134H24a6,6,0,0,1,0-12H52.14l38.4-84.48a6,6,0,0,1,11.07.34L160.74,193.1l33.89-67.78A6,6,0,0,1,200,122h32A6,6,0,0,1,238,128Z'/%3E%3C/svg%3E")}
.home-refresh .stk__row[data-stage="gap"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M220,200.8,158,97.48V38h10a6,6,0,0,0,0-12H88a6,6,0,0,0,0,12H98V97.48L36,200.8A14,14,0,0,0,48,222H208a14,14,0,0,0,12-21.2ZM109.15,102.23a6,6,0,0,0,.85-3.09V38h36V99.14a6,6,0,0,0,.85,3.09l39.65,66.08c-12.41,3.16-30.86,3-55.79-9.66-16.94-8.58-33-12.8-47.83-12.64ZM209.72,209a2,2,0,0,1-1.74,1H48a2,2,0,0,1-1.71-3l29-48.41c14.89-2.08,31.68,1.55,49.94,10.79C144,178.8,159.67,182,172.42,182A67.89,67.89,0,0,0,192.89,179l16.8,28A2,2,0,0,1,209.72,209Z'/%3E%3C/svg%3E")}
.home-refresh .stk__row[data-stage="sec"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M208,82H174V56a46,46,0,0,0-92,0V82H48A14,14,0,0,0,34,96V208a14,14,0,0,0,14,14H208a14,14,0,0,0,14-14V96A14,14,0,0,0,208,82ZM94,56a34,34,0,0,1,68,0V82H94ZM210,208a2,2,0,0,1-2,2H48a2,2,0,0,1-2-2V96a2,2,0,0,1,2-2H208a2,2,0,0,1,2,2Zm-72-56a10,10,0,1,1-10-10A10,10,0,0,1,138,152Z'/%3E%3C/svg%3E")}
.home-refresh .stk__row[data-stage="fde"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M112.6,158.43a58,58,0,1,0-57.2,0A93.83,93.83,0,0,0,5.21,196.72a6,6,0,0,0,10.05,6.56,82,82,0,0,1,137.48,0,6,6,0,0,0,10-6.56A93.83,93.83,0,0,0,112.6,158.43ZM38,108a46,46,0,1,1,46,46A46.06,46.06,0,0,1,38,108Zm211,97a6,6,0,0,1-8.3-1.74A81.8,81.8,0,0,0,172,166a6,6,0,0,1,0-12,46,46,0,1,0-17.08-88.73,6,6,0,1,1-4.46-11.14,58,58,0,0,1,50.14,104.3,93.83,93.83,0,0,1,50.19,38.29A6,6,0,0,1,249,205Z'/%3E%3C/svg%3E")}
.home-refresh .stk__row[data-stage="gov"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M237.57,133.77l-32-80h0a6,6,0,0,0-6.86-3.63L134,64.52V40a6,6,0,0,0-12,0V67.19l-67.3,15a6,6,0,0,0-4.27,3.63h0v0l-32,80A6.1,6.1,0,0,0,18,168c0,21.86,23.31,30,38,30s38-8.14,38-30a6.1,6.1,0,0,0-.43-2.23L64.19,92.33,122,79.48V210H104a6,6,0,0,0,0,12h48a6,6,0,0,0,0-12H134V76.81l56.21-12.49-27.78,69.45A6.1,6.1,0,0,0,162,136c0,21.86,23.31,30,38,30s38-8.14,38-30A6.1,6.1,0,0,0,237.57,133.77ZM56,186a36.89,36.89,0,0,1-17.48-4.56c-5.37-3.13-8.15-7.18-8.49-12.37l26-64.91,26,64.91C81.06,182.85,62.58,186,56,186Zm144-32a36.89,36.89,0,0,1-17.48-4.56c-5.37-3.13-8.15-7.18-8.49-12.37l26-64.91,26,64.91C225.06,150.85,206.58,154,200,154Z'/%3E%3C/svg%3E")}
.home-refresh .stk__row button::before{width:24px!important;height:24px!important;flex-basis:24px!important;
  -webkit-mask:var(--ico) center/contain no-repeat!important;mask:var(--ico) center/contain no-repeat!important;background:currentColor!important}
.home-refresh #platform .stk__row button::before{color:var(--ink)!important}
.home-refresh #enterprise .stk__row button::before{color:#f2f1ed!important}
.home-refresh .tile--conv .tile__title{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M128,26A102,102,0,0,0,38.35,176.69L26.73,211.56a14,14,0,0,0,17.71,17.71l34.87-11.62A102,102,0,1,0,128,26Zm0,192a90,90,0,0,1-45.06-12.08,6.09,6.09,0,0,0-3-.81,6.2,6.2,0,0,0-1.9.31L40.65,217.88a2,2,0,0,1-2.53-2.53L50.58,178a6,6,0,0,0-.5-4.91A90,90,0,1,1,128,218Z'/%3E%3C/svg%3E")}
.home-refresh .tile--flow .tile__title{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M244.24,75.76l-32-32a6,6,0,0,0-8.48,8.48L225.51,74H208c-48,0-59.44,27.46-69.54,51.69-9.43,22.64-17.66,42.33-53,44.16a38,38,0,1,0,.06,12c43.34-2.06,54.29-28.29,64-51.55C159.44,106.53,168,86,208,86h17.51l-21.75,21.76a6,6,0,1,0,8.48,8.48l32-32A6,6,0,0,0,244.24,75.76ZM48,202a26,26,0,1,1,26-26A26,26,0,0,1,48,202Z'/%3E%3C/svg%3E")}
.home-refresh .ints__title{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M236.24,19.76a6,6,0,0,0-8.48,0L173.94,73.57l-6.79-6.78a30,30,0,0,0-42.42,0L100,91.51l-7.76-7.75a6,6,0,0,0-8.48,8.48L91.51,100,66.79,124.73a30,30,0,0,0,0,42.42l6.78,6.79L19.76,227.76a6,6,0,1,0,8.48,8.48l53.82-53.81,6.79,6.78a30,30,0,0,0,42.42,0L156,164.49l7.76,7.75a6,6,0,0,0,8.48-8.48L164.49,156l24.72-24.73a30,30,0,0,0,0-42.42l-6.78-6.79,53.81-53.82A6,6,0,0,0,236.24,19.76Zm-113.45,161a18,18,0,0,1-25.46,0L75.27,158.67a18,18,0,0,1,0-25.46L100,108.49,147.51,156Zm57.94-57.94L156,147.51,108.49,100l24.72-24.73a18,18,0,0,1,25.46,0l22.06,22.06a18,18,0,0,1,0,25.46ZM90.43,34.23a6,6,0,0,1,11.14-4.46l8,20a6,6,0,1,1-11.14,4.46Zm-64,59.54a6,6,0,0,1,7.8-3.34l20,8a6,6,0,1,1-4.46,11.14l-20-8A6,6,0,0,1,26.43,93.77Zm203.14,68.46a6,6,0,0,1-7.8,3.34l-20-8a6,6,0,0,1,4.46-11.14l20,8A6,6,0,0,1,229.57,162.23Zm-64,59.54a6,6,0,1,1-11.14,4.46l-8-20a6,6,0,0,1,11.14-4.46Z'/%3E%3C/svg%3E")}
.home-refresh .noapi__title{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M216,42H40A14,14,0,0,0,26,56V200a14,14,0,0,0,14,14H216a14,14,0,0,0,14-14V56A14,14,0,0,0,216,42ZM40,54H216a2,2,0,0,1,2,2V90H38V56A2,2,0,0,1,40,54ZM216,202H40a2,2,0,0,1-2-2V102H218v98A2,2,0,0,1,216,202Z'/%3E%3C/svg%3E")}
.home-refresh .feature-copy .tile__title::before{width:28px;height:28px;background:var(--ink)!important;color:var(--ink)!important}
.home-refresh .tabs__panel .caps li .cap__ico{width:22px;height:22px;flex-basis:22px;top:22px;color:var(--ink)!important}
.home-refresh .cap__ico svg{width:22px;height:22px}
.home-refresh .tabs__panel .caps li .cap__txt{padding-left:32px}
/* list checks: Phosphor check, small and muted */
.home-refresh #platform .stk__body li::before,.home-refresh #enterprise .stk__body li::before{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E") center/contain no-repeat!important;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E") center/contain no-repeat!important;width:14px!important;height:14px!important}
.home-refresh .feature-copy .caplist li::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E") center/contain no-repeat;background:var(--muted)}

/* ── Integrations reveal (her notes): the line scans the logo row, from the
      mark's left edge to the name's right edge; the content waits, then shows
      all at once right after the line has passed, blur falling off in .35s. ── */
.itile__face{clip-path:none!important;animation:none!important;opacity:0;filter:blur(5px);transition:opacity .3s var(--ease),filter .3s var(--ease)}
.itile.is-done .itile__face{opacity:1;filter:blur(0)}
.itile__edge{position:absolute;left:0;top:0;width:1px;height:0;background:var(--green);opacity:0;pointer-events:none}

/* ═══ Icons: Phosphor (Light) everywhere, one family (her ask). Titles and row
   heads carry 24px icons in the text colour; list checks are 14px and muted,
   so the hierarchy reads. Source: @phosphor-icons/core 2.1.1, MIT. ═══════ */
.home-refresh .stk__row[data-stage="aud"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M208,42H48A14,14,0,0,0,34,56v56c0,51.94,25.12,83.4,46.2,100.64,22.73,18.6,45.27,24.89,46.22,25.15a6,6,0,0,0,3.16,0c.95-.26,23.49-6.55,46.22-25.15C196.88,195.4,222,163.94,222,112V56A14,14,0,0,0,208,42Zm2,70c0,37.76-13.94,68.39-41.44,91.06A131.17,131.17,0,0,1,128,225.72a130.94,130.94,0,0,1-40.56-22.66C59.94,180.39,46,149.76,46,112V56a2,2,0,0,1,2-2H208a2,2,0,0,1,2,2ZM172.24,99.76a6,6,0,0,1,0,8.48l-56,56a6,6,0,0,1-8.48,0l-24-24a6,6,0,0,1,8.48-8.48L112,151.51l51.76-51.75A6,6,0,0,1,172.24,99.76Z'/%3E%3C/svg%3E")}
.home-refresh .stk__row[data-stage="trace"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M238,128a6,6,0,0,1-6,6H203.71l-38.34,76.68A6,6,0,0,1,160,214h-.3a6,6,0,0,1-5.31-3.85L95.51,55.57,61.46,130.48A6,6,0,0,1,56,134H24a6,6,0,0,1,0-12H52.14l38.4-84.48a6,6,0,0,1,11.07.34L160.74,193.1l33.89-67.78A6,6,0,0,1,200,122h32A6,6,0,0,1,238,128Z'/%3E%3C/svg%3E")}
.home-refresh .stk__row[data-stage="gap"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M220,200.8,158,97.48V38h10a6,6,0,0,0,0-12H88a6,6,0,0,0,0,12H98V97.48L36,200.8A14,14,0,0,0,48,222H208a14,14,0,0,0,12-21.2ZM109.15,102.23a6,6,0,0,0,.85-3.09V38h36V99.14a6,6,0,0,0,.85,3.09l39.65,66.08c-12.41,3.16-30.86,3-55.79-9.66-16.94-8.58-33-12.8-47.83-12.64ZM209.72,209a2,2,0,0,1-1.74,1H48a2,2,0,0,1-1.71-3l29-48.41c14.89-2.08,31.68,1.55,49.94,10.79C144,178.8,159.67,182,172.42,182A67.89,67.89,0,0,0,192.89,179l16.8,28A2,2,0,0,1,209.72,209Z'/%3E%3C/svg%3E")}
.home-refresh .stk__row[data-stage="sec"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M208,82H174V56a46,46,0,0,0-92,0V82H48A14,14,0,0,0,34,96V208a14,14,0,0,0,14,14H208a14,14,0,0,0,14-14V96A14,14,0,0,0,208,82ZM94,56a34,34,0,0,1,68,0V82H94ZM210,208a2,2,0,0,1-2,2H48a2,2,0,0,1-2-2V96a2,2,0,0,1,2-2H208a2,2,0,0,1,2,2Zm-72-56a10,10,0,1,1-10-10A10,10,0,0,1,138,152Z'/%3E%3C/svg%3E")}
.home-refresh .stk__row[data-stage="fde"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M112.6,158.43a58,58,0,1,0-57.2,0A93.83,93.83,0,0,0,5.21,196.72a6,6,0,0,0,10.05,6.56,82,82,0,0,1,137.48,0,6,6,0,0,0,10-6.56A93.83,93.83,0,0,0,112.6,158.43ZM38,108a46,46,0,1,1,46,46A46.06,46.06,0,0,1,38,108Zm211,97a6,6,0,0,1-8.3-1.74A81.8,81.8,0,0,0,172,166a6,6,0,0,1,0-12,46,46,0,1,0-17.08-88.73,6,6,0,1,1-4.46-11.14,58,58,0,0,1,50.14,104.3,93.83,93.83,0,0,1,50.19,38.29A6,6,0,0,1,249,205Z'/%3E%3C/svg%3E")}
.home-refresh .stk__row[data-stage="gov"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M237.57,133.77l-32-80h0a6,6,0,0,0-6.86-3.63L134,64.52V40a6,6,0,0,0-12,0V67.19l-67.3,15a6,6,0,0,0-4.27,3.63h0v0l-32,80A6.1,6.1,0,0,0,18,168c0,21.86,23.31,30,38,30s38-8.14,38-30a6.1,6.1,0,0,0-.43-2.23L64.19,92.33,122,79.48V210H104a6,6,0,0,0,0,12h48a6,6,0,0,0,0-12H134V76.81l56.21-12.49-27.78,69.45A6.1,6.1,0,0,0,162,136c0,21.86,23.31,30,38,30s38-8.14,38-30A6.1,6.1,0,0,0,237.57,133.77ZM56,186a36.89,36.89,0,0,1-17.48-4.56c-5.37-3.13-8.15-7.18-8.49-12.37l26-64.91,26,64.91C81.06,182.85,62.58,186,56,186Zm144-32a36.89,36.89,0,0,1-17.48-4.56c-5.37-3.13-8.15-7.18-8.49-12.37l26-64.91,26,64.91C225.06,150.85,206.58,154,200,154Z'/%3E%3C/svg%3E")}
.home-refresh .stk__row button::before{width:24px!important;height:24px!important;flex-basis:24px!important;
  -webkit-mask:var(--ico) center/contain no-repeat!important;mask:var(--ico) center/contain no-repeat!important;background:currentColor!important}
.home-refresh #platform .stk__row button::before{color:var(--ink)!important}
.home-refresh #enterprise .stk__row button::before{color:#f2f1ed!important}
.home-refresh .tile--conv .tile__title{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M128,26A102,102,0,0,0,38.35,176.69L26.73,211.56a14,14,0,0,0,17.71,17.71l34.87-11.62A102,102,0,1,0,128,26Zm0,192a90,90,0,0,1-45.06-12.08,6.09,6.09,0,0,0-3-.81,6.2,6.2,0,0,0-1.9.31L40.65,217.88a2,2,0,0,1-2.53-2.53L50.58,178a6,6,0,0,0-.5-4.91A90,90,0,1,1,128,218Z'/%3E%3C/svg%3E")}
.home-refresh .tile--flow .tile__title{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M244.24,75.76l-32-32a6,6,0,0,0-8.48,8.48L225.51,74H208c-48,0-59.44,27.46-69.54,51.69-9.43,22.64-17.66,42.33-53,44.16a38,38,0,1,0,.06,12c43.34-2.06,54.29-28.29,64-51.55C159.44,106.53,168,86,208,86h17.51l-21.75,21.76a6,6,0,1,0,8.48,8.48l32-32A6,6,0,0,0,244.24,75.76ZM48,202a26,26,0,1,1,26-26A26,26,0,0,1,48,202Z'/%3E%3C/svg%3E")}
.home-refresh .ints__title{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M236.24,19.76a6,6,0,0,0-8.48,0L173.94,73.57l-6.79-6.78a30,30,0,0,0-42.42,0L100,91.51l-7.76-7.75a6,6,0,0,0-8.48,8.48L91.51,100,66.79,124.73a30,30,0,0,0,0,42.42l6.78,6.79L19.76,227.76a6,6,0,1,0,8.48,8.48l53.82-53.81,6.79,6.78a30,30,0,0,0,42.42,0L156,164.49l7.76,7.75a6,6,0,0,0,8.48-8.48L164.49,156l24.72-24.73a30,30,0,0,0,0-42.42l-6.78-6.79,53.81-53.82A6,6,0,0,0,236.24,19.76Zm-113.45,161a18,18,0,0,1-25.46,0L75.27,158.67a18,18,0,0,1,0-25.46L100,108.49,147.51,156Zm57.94-57.94L156,147.51,108.49,100l24.72-24.73a18,18,0,0,1,25.46,0l22.06,22.06a18,18,0,0,1,0,25.46ZM90.43,34.23a6,6,0,0,1,11.14-4.46l8,20a6,6,0,1,1-11.14,4.46Zm-64,59.54a6,6,0,0,1,7.8-3.34l20,8a6,6,0,1,1-4.46,11.14l-20-8A6,6,0,0,1,26.43,93.77Zm203.14,68.46a6,6,0,0,1-7.8,3.34l-20-8a6,6,0,0,1,4.46-11.14l20,8A6,6,0,0,1,229.57,162.23Zm-64,59.54a6,6,0,1,1-11.14,4.46l-8-20a6,6,0,0,1,11.14-4.46Z'/%3E%3C/svg%3E")}
.home-refresh .noapi__title{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M216,42H40A14,14,0,0,0,26,56V200a14,14,0,0,0,14,14H216a14,14,0,0,0,14-14V56A14,14,0,0,0,216,42ZM40,54H216a2,2,0,0,1,2,2V90H38V56A2,2,0,0,1,40,54ZM216,202H40a2,2,0,0,1-2-2V102H218v98A2,2,0,0,1,216,202Z'/%3E%3C/svg%3E")}
.home-refresh .feature-copy .tile__title::before{width:28px;height:28px;background:var(--ink)!important;color:var(--ink)!important}
.home-refresh .tabs__panel .caps li .cap__ico{width:22px;height:22px;flex-basis:22px;top:22px;color:var(--ink)!important}
.home-refresh .cap__ico svg{width:22px;height:22px}
.home-refresh .tabs__panel .caps li .cap__txt{padding-left:32px}
/* list checks: Phosphor check, small and muted */
.home-refresh #platform .stk__body li::before,.home-refresh #enterprise .stk__body li::before{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E") center/contain no-repeat!important;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E") center/contain no-repeat!important;width:14px!important;height:14px!important}
.home-refresh .feature-copy .caplist li::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E") center/contain no-repeat;background:var(--muted)}

/* ── Integrations reveal, the way rollups does it (her notes): the line is only
      as tall as the logo row and travels from the left edge of the mark to the
      right edge of the name; the content opens behind it, soft only at the
      edge. Geometry per cell comes from review-0910.js (--ex/--ew/--ey/--eh). ── */
.itile__face{clip-path:none!important;animation:none!important;
  -webkit-mask-image:linear-gradient(90deg,#000 var(--wx),transparent var(--wx));mask-image:linear-gradient(90deg,#000 var(--wx),transparent var(--wx))}
.itile__face--soft{position:absolute;inset:0;filter:blur(4px);opacity:.9;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent calc(var(--wx) - 44px),#000 calc(var(--wx) - 18px),#000 var(--wx),transparent var(--wx));
  mask-image:linear-gradient(90deg,transparent calc(var(--wx) - 44px),#000 calc(var(--wx) - 18px),#000 var(--wx),transparent var(--wx))}
.itile.is-done .itile__face{-webkit-mask-image:none;mask-image:none}
.itile.is-done .itile__face--soft{display:none}
.itile__edge{position:absolute;left:0;top:0;width:1px;height:0;background:var(--green);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.itile__face{-webkit-mask-image:none!important;mask-image:none!important}.itile__face--soft,.itile__edge{display:none}}

/* ═══ Icons: Phosphor (Light) everywhere, one family (her ask). Titles and row
   heads carry 24px icons in the text colour; list checks are 14px and muted,
   so the hierarchy reads. Source: @phosphor-icons/core 2.1.1, MIT. ═══════ */
.home-refresh .stk__row[data-stage="aud"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M208,42H48A14,14,0,0,0,34,56v56c0,51.94,25.12,83.4,46.2,100.64,22.73,18.6,45.27,24.89,46.22,25.15a6,6,0,0,0,3.16,0c.95-.26,23.49-6.55,46.22-25.15C196.88,195.4,222,163.94,222,112V56A14,14,0,0,0,208,42Zm2,70c0,37.76-13.94,68.39-41.44,91.06A131.17,131.17,0,0,1,128,225.72a130.94,130.94,0,0,1-40.56-22.66C59.94,180.39,46,149.76,46,112V56a2,2,0,0,1,2-2H208a2,2,0,0,1,2,2ZM172.24,99.76a6,6,0,0,1,0,8.48l-56,56a6,6,0,0,1-8.48,0l-24-24a6,6,0,0,1,8.48-8.48L112,151.51l51.76-51.75A6,6,0,0,1,172.24,99.76Z'/%3E%3C/svg%3E")}
.home-refresh .stk__row[data-stage="trace"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M238,128a6,6,0,0,1-6,6H203.71l-38.34,76.68A6,6,0,0,1,160,214h-.3a6,6,0,0,1-5.31-3.85L95.51,55.57,61.46,130.48A6,6,0,0,1,56,134H24a6,6,0,0,1,0-12H52.14l38.4-84.48a6,6,0,0,1,11.07.34L160.74,193.1l33.89-67.78A6,6,0,0,1,200,122h32A6,6,0,0,1,238,128Z'/%3E%3C/svg%3E")}
.home-refresh .stk__row[data-stage="gap"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M220,200.8,158,97.48V38h10a6,6,0,0,0,0-12H88a6,6,0,0,0,0,12H98V97.48L36,200.8A14,14,0,0,0,48,222H208a14,14,0,0,0,12-21.2ZM109.15,102.23a6,6,0,0,0,.85-3.09V38h36V99.14a6,6,0,0,0,.85,3.09l39.65,66.08c-12.41,3.16-30.86,3-55.79-9.66-16.94-8.58-33-12.8-47.83-12.64ZM209.72,209a2,2,0,0,1-1.74,1H48a2,2,0,0,1-1.71-3l29-48.41c14.89-2.08,31.68,1.55,49.94,10.79C144,178.8,159.67,182,172.42,182A67.89,67.89,0,0,0,192.89,179l16.8,28A2,2,0,0,1,209.72,209Z'/%3E%3C/svg%3E")}
.home-refresh .stk__row[data-stage="sec"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M208,82H174V56a46,46,0,0,0-92,0V82H48A14,14,0,0,0,34,96V208a14,14,0,0,0,14,14H208a14,14,0,0,0,14-14V96A14,14,0,0,0,208,82ZM94,56a34,34,0,0,1,68,0V82H94ZM210,208a2,2,0,0,1-2,2H48a2,2,0,0,1-2-2V96a2,2,0,0,1,2-2H208a2,2,0,0,1,2,2Zm-72-56a10,10,0,1,1-10-10A10,10,0,0,1,138,152Z'/%3E%3C/svg%3E")}
.home-refresh .stk__row[data-stage="fde"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M112.6,158.43a58,58,0,1,0-57.2,0A93.83,93.83,0,0,0,5.21,196.72a6,6,0,0,0,10.05,6.56,82,82,0,0,1,137.48,0,6,6,0,0,0,10-6.56A93.83,93.83,0,0,0,112.6,158.43ZM38,108a46,46,0,1,1,46,46A46.06,46.06,0,0,1,38,108Zm211,97a6,6,0,0,1-8.3-1.74A81.8,81.8,0,0,0,172,166a6,6,0,0,1,0-12,46,46,0,1,0-17.08-88.73,6,6,0,1,1-4.46-11.14,58,58,0,0,1,50.14,104.3,93.83,93.83,0,0,1,50.19,38.29A6,6,0,0,1,249,205Z'/%3E%3C/svg%3E")}
.home-refresh .stk__row[data-stage="gov"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M237.57,133.77l-32-80h0a6,6,0,0,0-6.86-3.63L134,64.52V40a6,6,0,0,0-12,0V67.19l-67.3,15a6,6,0,0,0-4.27,3.63h0v0l-32,80A6.1,6.1,0,0,0,18,168c0,21.86,23.31,30,38,30s38-8.14,38-30a6.1,6.1,0,0,0-.43-2.23L64.19,92.33,122,79.48V210H104a6,6,0,0,0,0,12h48a6,6,0,0,0,0-12H134V76.81l56.21-12.49-27.78,69.45A6.1,6.1,0,0,0,162,136c0,21.86,23.31,30,38,30s38-8.14,38-30A6.1,6.1,0,0,0,237.57,133.77ZM56,186a36.89,36.89,0,0,1-17.48-4.56c-5.37-3.13-8.15-7.18-8.49-12.37l26-64.91,26,64.91C81.06,182.85,62.58,186,56,186Zm144-32a36.89,36.89,0,0,1-17.48-4.56c-5.37-3.13-8.15-7.18-8.49-12.37l26-64.91,26,64.91C225.06,150.85,206.58,154,200,154Z'/%3E%3C/svg%3E")}
.home-refresh .stk__row button::before{width:24px!important;height:24px!important;flex-basis:24px!important;
  -webkit-mask:var(--ico) center/contain no-repeat!important;mask:var(--ico) center/contain no-repeat!important;background:currentColor!important}
.home-refresh #platform .stk__row button::before{color:var(--ink)!important}
.home-refresh #enterprise .stk__row button::before{color:#f2f1ed!important}
.home-refresh .tile--conv .tile__title{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M128,26A102,102,0,0,0,38.35,176.69L26.73,211.56a14,14,0,0,0,17.71,17.71l34.87-11.62A102,102,0,1,0,128,26Zm0,192a90,90,0,0,1-45.06-12.08,6.09,6.09,0,0,0-3-.81,6.2,6.2,0,0,0-1.9.31L40.65,217.88a2,2,0,0,1-2.53-2.53L50.58,178a6,6,0,0,0-.5-4.91A90,90,0,1,1,128,218Z'/%3E%3C/svg%3E")}
.home-refresh .tile--flow .tile__title{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M244.24,75.76l-32-32a6,6,0,0,0-8.48,8.48L225.51,74H208c-48,0-59.44,27.46-69.54,51.69-9.43,22.64-17.66,42.33-53,44.16a38,38,0,1,0,.06,12c43.34-2.06,54.29-28.29,64-51.55C159.44,106.53,168,86,208,86h17.51l-21.75,21.76a6,6,0,1,0,8.48,8.48l32-32A6,6,0,0,0,244.24,75.76ZM48,202a26,26,0,1,1,26-26A26,26,0,0,1,48,202Z'/%3E%3C/svg%3E")}
.home-refresh .ints__title{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M236.24,19.76a6,6,0,0,0-8.48,0L173.94,73.57l-6.79-6.78a30,30,0,0,0-42.42,0L100,91.51l-7.76-7.75a6,6,0,0,0-8.48,8.48L91.51,100,66.79,124.73a30,30,0,0,0,0,42.42l6.78,6.79L19.76,227.76a6,6,0,1,0,8.48,8.48l53.82-53.81,6.79,6.78a30,30,0,0,0,42.42,0L156,164.49l7.76,7.75a6,6,0,0,0,8.48-8.48L164.49,156l24.72-24.73a30,30,0,0,0,0-42.42l-6.78-6.79,53.81-53.82A6,6,0,0,0,236.24,19.76Zm-113.45,161a18,18,0,0,1-25.46,0L75.27,158.67a18,18,0,0,1,0-25.46L100,108.49,147.51,156Zm57.94-57.94L156,147.51,108.49,100l24.72-24.73a18,18,0,0,1,25.46,0l22.06,22.06a18,18,0,0,1,0,25.46ZM90.43,34.23a6,6,0,0,1,11.14-4.46l8,20a6,6,0,1,1-11.14,4.46Zm-64,59.54a6,6,0,0,1,7.8-3.34l20,8a6,6,0,1,1-4.46,11.14l-20-8A6,6,0,0,1,26.43,93.77Zm203.14,68.46a6,6,0,0,1-7.8,3.34l-20-8a6,6,0,0,1,4.46-11.14l20,8A6,6,0,0,1,229.57,162.23Zm-64,59.54a6,6,0,1,1-11.14,4.46l-8-20a6,6,0,0,1,11.14-4.46Z'/%3E%3C/svg%3E")}
.home-refresh .noapi__title{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M216,42H40A14,14,0,0,0,26,56V200a14,14,0,0,0,14,14H216a14,14,0,0,0,14-14V56A14,14,0,0,0,216,42ZM40,54H216a2,2,0,0,1,2,2V90H38V56A2,2,0,0,1,40,54ZM216,202H40a2,2,0,0,1-2-2V102H218v98A2,2,0,0,1,216,202Z'/%3E%3C/svg%3E")}
.home-refresh .feature-copy .tile__title::before{width:28px;height:28px;background:var(--ink)!important;color:var(--ink)!important}
.home-refresh .tabs__panel .caps li .cap__ico{width:22px;height:22px;flex-basis:22px;top:22px;color:var(--ink)!important}
.home-refresh .cap__ico svg{width:22px;height:22px}
.home-refresh .tabs__panel .caps li .cap__txt{padding-left:32px}
/* list checks: Phosphor check, small and muted */
.home-refresh #platform .stk__body li::before,.home-refresh #enterprise .stk__body li::before{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E") center/contain no-repeat!important;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E") center/contain no-repeat!important;width:14px!important;height:14px!important}
.home-refresh .feature-copy .caplist li::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E") center/contain no-repeat;background:var(--muted)}

/* ── Integrations reveal, the way rollups does it (her note): the line crosses
      the logo, only the edge right behind it is soft; what is already open
      stays sharp. Two layers: a sharp face masked up to the line, and a
      blurred twin masked to a 48px band behind it. ── */
.itile__face{clip-path:none!important;
  -webkit-mask-image:linear-gradient(90deg,#000 var(--wx),transparent var(--wx));mask-image:linear-gradient(90deg,#000 var(--wx),transparent var(--wx))}
.itile__face--soft{position:absolute;inset:0;filter:blur(4px);opacity:.9;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent calc(var(--wx) - 14%),#000 calc(var(--wx) - 6%),#000 var(--wx),transparent var(--wx));
  mask-image:linear-gradient(90deg,transparent calc(var(--wx) - 14%),#000 calc(var(--wx) - 6%),#000 var(--wx),transparent var(--wx))}
.tile--ints.is-in .itile__face,.tile--ints.is-in .itile__face--soft{animation:iWipe .7s var(--ease) both;animation-delay:calc(var(--k,0) * 120ms)}
.tile--ints.is-in .itile__face--soft{animation-name:iWipeSoft}
@keyframes iWipe{from{--wx:0%}to{--wx:100%}}
@keyframes iWipeSoft{0%{--wx:0%;opacity:.9}90%{opacity:.9}100%{--wx:114%;opacity:0}}
@media (prefers-reduced-motion:reduce){.itile__face{-webkit-mask-image:none;mask-image:none}.itile__face--soft{display:none}}

/* ── Use-case switcher, tidier (her note): a 240px rail, Phosphor icon per
      segment, the active one marked by a 2px green line on the left; the
      panel takes the rest, so capability text stops wrapping word by word ── */
.home-refresh #use-cases .tabs{grid-template-columns:240px minmax(0,1fr);gap:40px}
.home-refresh #use-cases .tabs__tab{padding:16px 0 16px 40px;gap:2px}
.home-refresh #use-cases .tabs__tab::before{top:auto;left:0;width:2px;height:calc(100% - 24px);top:12px;background:var(--green);opacity:0}
.home-refresh #use-cases .tabs__tab::after{content:"";position:absolute;left:8px;top:18px;width:22px;height:22px;background:currentColor;opacity:.75;
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.home-refresh #use-cases .tabs__tab:nth-child(1){--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M240,210H222V96a14,14,0,0,0-14-14H142V32a14,14,0,0,0-21.77-11.64l-80,53.33A14,14,0,0,0,34,85.34V210H16a6,6,0,0,0,0,12H240a6,6,0,0,0,0-12ZM208,94a2,2,0,0,1,2,2V210H142V94ZM46,85.34a2,2,0,0,1,.89-1.66l80-53.34A2,2,0,0,1,130,32V210H46ZM110,112v16a6,6,0,0,1-12,0V112a6,6,0,0,1,12,0Zm-32,0v16a6,6,0,0,1-12,0V112a6,6,0,0,1,12,0Zm0,56v16a6,6,0,0,1-12,0V168a6,6,0,0,1,12,0Zm32,0v16a6,6,0,0,1-12,0V168a6,6,0,0,1,12,0Z'/%3E%3C/svg%3E")}
.home-refresh #use-cases .tabs__tab:nth-child(2){--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M166,152a6,6,0,0,1-6,6H96a6,6,0,0,1,0-12h64A6,6,0,0,1,166,152Zm-6-38H96a6,6,0,0,0,0,12h64a6,6,0,0,0,0-12Zm54-66V216a14,14,0,0,1-14,14H56a14,14,0,0,1-14-14V48A14,14,0,0,1,56,34H93.17a45.91,45.91,0,0,1,69.66,0H200A14,14,0,0,1,214,48ZM94,64v2h68V64a34,34,0,0,0-68,0ZM202,48a2,2,0,0,0-2-2H170.33A45.77,45.77,0,0,1,174,64v8a6,6,0,0,1-6,6H88a6,6,0,0,1-6-6V64a45.77,45.77,0,0,1,3.67-18H56a2,2,0,0,0-2,2V216a2,2,0,0,0,2,2H200a2,2,0,0,0,2-2Z'/%3E%3C/svg%3E")}
.home-refresh #use-cases .tabs__tab:nth-child(3){--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M112.6,158.43a58,58,0,1,0-57.2,0A93.83,93.83,0,0,0,5.21,196.72a6,6,0,0,0,10.05,6.56,82,82,0,0,1,137.48,0,6,6,0,0,0,10-6.56A93.83,93.83,0,0,0,112.6,158.43ZM38,108a46,46,0,1,1,46,46A46.06,46.06,0,0,1,38,108Zm211,97a6,6,0,0,1-8.3-1.74A81.8,81.8,0,0,0,172,166a6,6,0,0,1,0-12,46,46,0,1,0-17.08-88.73,6,6,0,1,1-4.46-11.14,58,58,0,0,1,50.14,104.3,93.83,93.83,0,0,1,50.19,38.29A6,6,0,0,1,249,205Z'/%3E%3C/svg%3E")}
.home-refresh #use-cases .tabs__tab[aria-selected="true"]::after{opacity:1}
.home-refresh .tabs__panel .cap__txt em{max-width:none}
@media (max-width:799.98px){
  .home-refresh #use-cases .tabs{display:flex}
  .home-refresh #use-cases .tabs__tab{padding:12px 0 14px}
  .home-refresh #use-cases .tabs__tab::after{display:none}
  .home-refresh #use-cases .tabs__tab::before{top:auto;bottom:-1px;left:0;width:100%;height:2px}
}

/* ── Control: the audit and knowledge-gap cards follow the Observability card:
      20px inside, the head inside the card, height from the content ── */
.home-refresh #platform .stk__panel .gap,.home-refresh #platform .stk__panel .aud{padding:0!important;min-height:0!important;display:block}
.home-refresh #platform :is(.gap__top,.aud__top){margin:0!important;padding:16px 20px!important}
.home-refresh #platform .gap__q{margin:18px 20px 0;font-size:18px!important;line-height:1.4;max-width:none}
.home-refresh #platform .gap__a{margin:10px 20px 18px}
.home-refresh #platform .gap__fix{margin:0;padding:14px 20px;border-top:1px solid var(--line)}
.home-refresh #platform .aud__list{padding:4px 20px 0}
.home-refresh #platform .aud__foot{margin:0;padding:14px 20px;border-top:1px solid var(--line)}
.home-refresh #platform .gap__flag{font-size:12px;letter-spacing:.06em}

/* ── Integrations cells: content sits left; the category line pinned at the
      bottom on the same left edge as the name (her note) ── */
.itile__face{align-items:flex-start!important;justify-content:flex-start!important;text-align:left;padding:18px 20px!important;gap:0!important}
.itile__face b{display:inline-flex;align-items:center;gap:10px}
.itile__face span{margin-top:auto;padding-top:14px}
.itile--more .itile__face b{font-size:24px}
.itile--more .itile__face span{max-width:none}

/* ── Integrations cells: back to centred (her note); category stays on its
      own line under the name ── */
.itile__face{align-items:center!important;justify-content:center!important;text-align:center;gap:6px!important}
.itile__face span{margin-top:0;padding-top:0}

/* ── Audit trail: the step check was white on paper (her note); drawn in muted
      ink through a mask, the pending step keeps an empty dashed ring ── */
.home-refresh #platform .aud__list li i{border:0!important;background:rgba(16,16,16,.55)!important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E") center/12px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E") center/12px no-repeat}
.home-refresh #platform .aud__list li:last-child i{-webkit-mask:none;mask:none;background:transparent!important;border:1px dashed rgba(16,16,16,.35)!important;border-radius:50%}

/* ── Why Strada: left rows and the right illustration no longer share lines.
      The stage becomes its own plate (a shade lighter, thin outline), and the
      rules above and below the seals go, the plate frames them instead. ── */
.home-refresh .why .stk{gap:72px!important}
.home-refresh .why .stk__stage{background:rgba(255,255,255,.035)!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:4px!important;padding:36px 32px!important;min-height:0}
.home-refresh .why .stk__panel[data-stage="sec"] .certs{border:0!important}
.home-refresh .why .stk__panel[data-stage="sec"] .certs__note{border:0!important;padding-top:4px!important}
.home-refresh #enterprise .tline,.home-refresh #enterprise .aud{border-top:0!important;padding-top:8px!important}
.home-refresh .why .stk__panel{gap:20px}
@media (max-width:999.98px){.home-refresh .why .stk{gap:40px!important}.home-refresh .why .stk__stage{padding:24px 20px!important}}

/* cells: content centred (a stray absolute rule pulled it to the corner) */
.itile__face{position:relative!important;inset:auto!important;height:100%;display:flex;flex-direction:column;align-items:center!important;justify-content:center!important;transition-duration:.3s}

/* ── Impact (her notes): no scales, no frame lines. Three open columns, each a
      label, a segmented ring beside the figure, the caption. The ring fills to
      the value on reveal. ── */
.home-refresh .figs{border:0!important;gap:0 48px}
.home-refresh .fig,.home-refresh .fig:first-child{border:0!important;padding:8px 0 0!important}
.home-refresh .fig__bar{display:none!important}
.fig__row{display:flex;align-items:center;gap:20px;margin-top:20px}
.fig__ring{width:72px;height:72px;flex:0 0 72px}
.fig__ring-track{stroke:rgba(16,16,16,.14)}
.fig__ring-fill{stroke:var(--green)}
.fig__ring mask circle{transition:stroke-dasharray .7s var(--ease)}
.fig.is-in .fig__ring mask circle{stroke-dasharray:var(--v) 100}
.home-refresh .fig__num{font-size:clamp(56px,6vw,88px)!important}
.home-refresh .fig__cap{margin-top:18px!important}
@media (max-width:599px){.fig__ring{width:56px;height:56px;flex-basis:56px}.fig__row{gap:14px}}

/* rings, after the rollups arc: a thin barcode-like track, value segments in
   green, and a faint wedge inside */
.fig__ring-track{stroke:rgba(16,16,16,.18)}
.fig__ring-wedge{stroke:rgba(0,181,133,.10)}
.fig__ring-fill{stroke:var(--green)}
.fig__ring{width:80px;height:80px;flex-basis:80px}

/* ── Control cards, her two notes: smaller call header; no doubled line under
      the last audit step ── */
.home-refresh #platform .trace--call .tc__who u{font-size:10px!important;letter-spacing:.06em}
.home-refresh #platform .trace--call .tc__who b{font-size:14px!important;font-weight:400}
.home-refresh #platform .trace--call .tc__head{padding:12px 20px!important}
.home-refresh #platform .aud__list li:last-child{border-bottom:0!important}

/* ═══ Grain, the rollups way: ONE fixed layer over the whole page, above
   everything, pointer-events none; a dark low-alpha noise with contrast(2)
   so it reads as fine dark grit on paper and light grit on green. The
   per-section grains go, this layer covers them. ═══════════════════════════ */
.home-refresh::after{content:"";position:fixed;inset:0;z-index:2;pointer-events:none;
  background-image:var(--grain);background-size:180px 180px;opacity:.16;filter:contrast(2);mix-blend-mode:multiply}
.home-refresh .platform .tile--flow .viz::before,
.home-refresh #platform .tile--wide.stk .stk__stage::before,
.home-refresh .results::before{display:none!important}
.home-refresh .navwrap,.home-refresh .nav{position:relative;z-index:3}

/* ═══ Conversational (her notes): slower, messages animate in, contrast ═════ */
.home-refresh .live{--loop:24s;--step:6s}
.home-refresh .platform .live__viz{background:#eef3ef!important;border:0!important}
.home-refresh .platform .lv__bub--in{background:#fff!important;border:1px solid rgba(16,16,16,.14)!important;color:var(--ink)!important}
.home-refresh .platform .lv__bub--out{background:#e2efe8!important;border:1px solid rgba(0,122,87,.35)!important;color:#0b3d2e!important}
.home-refresh .platform .live__viz .lv>*{animation:lvIn var(--loop) linear infinite!important;animation-delay:calc(var(--i) * var(--step) + var(--j,0) * .55s + .2s)!important;opacity:0}
.home-refresh .platform .live__viz .lv>:nth-child(1){--j:0}
.home-refresh .platform .live__viz .lv>:nth-child(2){--j:1}
.home-refresh .platform .live__viz .lv>:nth-child(3){--j:2}
.home-refresh .platform .live__viz .lv>:nth-child(4){--j:3}
.home-refresh .platform .live__viz .lv>:nth-child(5){--j:4}
@keyframes lvIn{0%{opacity:0;transform:translateY(10px)}2.5%{opacity:1;transform:none}22%{opacity:1}24%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.home-refresh .platform .live__viz .lv>*{animation:none!important;opacity:1}}

/* ═══ Integrations reveal, the ONE definition (older versions removed; two of
   them fought and broke it). A 2px green line, taller than the logo block,
   runs from its left edge to its right edge; the content is revealed under
   the line with a 14px soft edge and a blurred band trailing behind it. ═══ */
@property --wx{syntax:"<length>";inherits:false;initial-value:-9999px}
.itile__face{position:relative!important;inset:auto!important;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:1!important;filter:none;clip-path:none!important;animation:none!important;transition:none;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(var(--wx) - 14px),transparent var(--wx));mask-image:linear-gradient(90deg,#000 calc(var(--wx) - 14px),transparent var(--wx))}
.itile__face--soft{position:absolute!important;inset:0!important;height:auto;filter:blur(5px);opacity:.95!important;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent calc(var(--wx) - 70px),#000 calc(var(--wx) - 30px),#000 calc(var(--wx) + 2px),transparent calc(var(--wx) + 2px));
  mask-image:linear-gradient(90deg,transparent calc(var(--wx) - 70px),#000 calc(var(--wx) - 30px),#000 calc(var(--wx) + 2px),transparent calc(var(--wx) + 2px))}
.itile.is-done .itile__face{-webkit-mask-image:none!important;mask-image:none!important}
.itile.is-done .itile__face--soft{display:none}
.itile__edge{position:absolute;left:0;top:0;width:2px;height:0;opacity:0;pointer-events:none;background:var(--green);
  box-shadow:0 0 10px 2px rgba(0,181,133,.35),0 0 2px rgba(0,181,133,.8)}
@media (prefers-reduced-motion:reduce){.itile__face{-webkit-mask-image:none!important;mask-image:none!important}.itile__face--soft,.itile__edge{display:none}}

/* ── Impact: line chart instead of the ring ── */
.fig__ring{display:none!important}
.fig__row{display:flex;align-items:flex-end;gap:22px}
.fig__chart{width:120px;height:44px;flex:0 0 120px;margin-bottom:10px;overflow:visible}
.fig__chart-base{stroke:rgba(16,16,16,.22);stroke-width:1;stroke-dasharray:1 3}
.fig__chart-line{fill:none;stroke:var(--green);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease) .1s}
.fig__chart-dot{fill:var(--green);opacity:0;transition:opacity .3s var(--ease) 1.4s}
.fig.is-in .fig__chart-line{stroke-dashoffset:0}
.fig.is-in .fig__chart-dot{opacity:1}
@media (prefers-reduced-motion:reduce){.fig__chart-line{stroke-dashoffset:0;transition:none}.fig__chart-dot{opacity:1}}

/* ── Observability card: one hierarchy (her note). Primary = what was said or
      done, 15px ink. Secondary = who / found data, 13px muted. Tertiary =
      timestamps and header label, 12px muted. Nothing else. ── */
.home-refresh #platform .trace--call .tc__step{grid-template-columns:44px 1fr;padding:14px 0}
.home-refresh #platform .trace--call .tc__step u{font-size:12px!important;color:rgba(16,16,16,.45)!important;padding-top:2px}
.home-refresh #platform .trace--call .tc__agent{font-size:13px!important;font-weight:400;color:rgba(16,16,16,.55)!important;margin-bottom:4px}
.home-refresh #platform .trace--call .tc__step em{font-size:15px!important;line-height:22px;color:var(--ink)!important;font-style:normal}
.home-refresh #platform .trace--call .tc__name{font-size:15px!important;line-height:22px;font-weight:400!important;color:var(--ink)!important}
.home-refresh #platform .trace--call .tc__io{margin-top:4px}
.home-refresh #platform .trace--call .tc__facts dd{font-size:13px!important;color:rgba(16,16,16,.55)!important}
.home-refresh #platform .trace--call .tc__who u{font-size:12px!important;letter-spacing:.04em;color:rgba(16,16,16,.45)!important;text-transform:none}
.home-refresh #platform .trace--call .tc__who b{font-size:15px!important;color:var(--ink)!important}
.home-refresh #platform .trace--call .tc__meta{font-size:12px!important;color:rgba(16,16,16,.6)!important}
.home-refresh #platform .trace--call .tc__player b{font-size:12px!important;color:rgba(16,16,16,.45)!important}
/* Impact charts: a little more presence next to the figures */
.fig__chart{width:140px;height:48px;flex-basis:140px}
.fig__chart-line{stroke-width:1.75}
.home-refresh #platform .trace--call .tc__facts{display:flex!important;flex-wrap:wrap;gap:0!important;margin:0}
.home-refresh #platform .trace--call .tc__facts dd{margin:0}
.home-refresh #platform .trace--call .tc__facts dd+dd::before{content:"·";margin:0 7px;color:rgba(16,16,16,.35)}

/* ═══ Depth rule (her principle): the page is flat, drawn like a blueprint;
   only the components that matter get a soft lift. One shadow token. ═══════ */
.home-refresh{--lift:0 1px 2px rgba(16,16,16,.06),0 14px 30px -14px rgba(16,16,16,.28);--lift-dark:0 1px 2px rgba(0,0,0,.2),0 24px 48px -22px rgba(0,0,0,.6)}
.home-refresh .platform .lv__bub,.home-refresh .platform .lv__att{box-shadow:var(--lift)!important;border-color:var(--line)!important}
.home-refresh .platform .lv__bub--out{border-color:rgba(0,122,87,.25)!important}
.home-refresh .hero .ha__card,.home-refresh .hero .ha__track.is-light .ha__card,.home-refresh .hero .ha__track.is-paper .ha__card{box-shadow:var(--lift)!important;background:#fff!important;border-color:var(--line)!important}
.home-refresh .ha--flow .ha__card,.home-refresh .ha--flow .ha__track.is-paper .ha__card,.home-refresh .ha--flow .ha__track.is-light .ha__card{box-shadow:var(--lift-dark)!important;border-color:var(--line)!important}
.home-refresh #platform .tile--wide.stk .stk__panel>*{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),var(--lift-dark)!important}
.home-refresh .noapi .brw{box-shadow:var(--lift)!important;border-color:var(--line)!important}
.home-refresh .why .stk__panel[data-stage="sec"] .cert{box-shadow:none}

/* grain on dark sections too: normal blend, like rollups (multiply hid it on green) */
.home-refresh::after{mix-blend-mode:normal;opacity:.13}

/* ── Impact: the rollups bar (her reference), not the sparkline ── */
.fig__chart,.fig__row{display:none!important}
.fig__seg{display:block;width:100%;max-width:260px;height:8px;margin:22px 0 0}
.fig__seg-track{fill:rgba(16,16,16,.08)}
.fig__seg-fill{fill:var(--green);transform:scaleX(0);transform-origin:left center;transition:transform .7s var(--ease) .1s}
.fig.is-in .fig__seg-fill{transform:scaleX(1)}
.fig__seg-cut{fill:var(--bg)}
@media (prefers-reduced-motion:reduce){.fig__seg-fill{transform:none;transition:none}}
/* nav: only stacked above the grain layer, positioning untouched */
.home-refresh .navwrap,.home-refresh .nav{position:sticky;z-index:3}

/* ═══ Card stacks lifted off the section (her reference: the rollups cap-table
   card). Cards are lighter than the ground and carry a wide soft shadow; the
   newest card sits highest and lightest, older ones a shade darker. ═══════ */
.home-refresh :is(.hero .ha,.ha--flow) .ha__card,
.home-refresh :is(.hero .ha,.ha--flow) .ha__track.is-light .ha__card,
.home-refresh :is(.hero .ha,.ha--flow) .ha__track.is-paper .ha__card{
  background:#f3f2ec!important;border:1px solid var(--line)!important;border-radius:4px!important;
  box-shadow:0 1px 2px rgba(16,16,16,.05),0 18px 40px -16px rgba(16,16,16,.30)!important}
.home-refresh :is(.hero .ha,.ha--flow) .ha__card:last-child{background:#fbfaf6!important;
  box-shadow:0 2px 4px rgba(16,16,16,.06),0 28px 56px -20px rgba(16,16,16,.42)!important}
.home-refresh .ha--flow .ha__card{box-shadow:0 2px 4px rgba(0,0,0,.25),0 22px 44px -16px rgba(0,0,0,.7)!important}
.home-refresh .ha--flow .ha__card:last-child{box-shadow:0 3px 6px rgba(0,0,0,.3),0 34px 64px -20px rgba(0,0,0,.8)!important}
.home-refresh :is(.hero .ha,.ha--flow) .ha__bar-os{background:rgba(16,16,16,.035)!important;border-bottom:1px solid rgba(16,16,16,.07)!important}
.home-refresh :is(.hero .ha,.ha--flow) :is(.ha__who,.ha__head){border-color:var(--line)!important}
.home-refresh :is(.hero .ha,.ha--flow) .ha__card+.ha__card::before{border-left-color:rgba(16,16,16,.25)}
.home-refresh :is(.hero .ha,.ha--flow) :is(.ha__chip,[class*="chip"]),
.home-refresh :is(.hero .ha,.ha--flow) [class*="status"] > span:last-child{background:rgba(0,181,133,.12)!important;border-color:rgba(0,181,133,.35)!important;color:#0b3d2e!important;border-radius:3px!important}
/* grain above every section (the statement band and others create their own
   stacking contexts and were covering it); stays below the video modal */
.home-refresh::after{z-index:900}
.home-refresh .vmodal{z-index:2000}

/* ── Chat bubbles: a cleaner lift (her note), and the attachment as a white
      document chip like the bubbles ── */
.home-refresh{--lift:0 1px 1px rgba(16,16,16,.04),0 10px 24px -12px rgba(16,16,16,.20)}
.home-refresh .platform .lv__bub,.home-refresh .platform .lv__att{border:1px solid var(--line)!important;box-shadow:var(--lift)!important}
.home-refresh .platform .lv__att{background:#fff!important;color:var(--ink)!important;border-radius:3px!important;padding:6px 10px}
.home-refresh .platform .lv__att i{background:var(--ink);opacity:.7}
.home-refresh .platform .lv__att em{color:rgba(16,16,16,.5)}

/* ── Hero / Agentic cards: whiter, cleaner shadow (her note) ── */
.home-refresh :is(.hero .ha,.ha--flow) .ha__card,
.home-refresh :is(.hero .ha,.ha--flow) .ha__track.is-light .ha__card,
.home-refresh :is(.hero .ha,.ha--flow) .ha__track.is-paper .ha__card{background:#ffffff!important;border:1px solid var(--line)!important;
  box-shadow:0 1px 1px rgba(16,16,16,.03),0 12px 28px -14px rgba(16,16,16,.18)!important}
.home-refresh :is(.hero .ha,.ha--flow) .ha__card:last-child{background:#fff!important;
  box-shadow:0 1px 2px rgba(16,16,16,.04),0 18px 36px -16px rgba(16,16,16,.24)!important}
.home-refresh .ha--flow .ha__card{box-shadow:0 1px 2px rgba(0,0,0,.18),0 18px 40px -16px rgba(0,0,0,.55)!important}
.home-refresh .ha--flow .ha__card:last-child{box-shadow:0 2px 4px rgba(0,0,0,.22),0 26px 52px -18px rgba(0,0,0,.65)!important}
.home-refresh :is(.hero .ha,.ha--flow) .ha__card--actions .ha__rows li:last-child{background:rgba(0,181,133,.08)}

/* ═══ Observability as a call flow (rollups cap-table idiom). Steps stacked on
   the dark ground; the current step is a lifted paper card with a check pill
   and a segmented bar; done steps are light tints, next steps faint. ═══════ */
.home-refresh #platform .stk__panel[data-stage="trace"]{align-items:stretch!important;justify-content:flex-start!important}
.home-refresh #platform .stk__panel[data-stage="trace"]>.cflow{background:transparent!important;border:0!important;box-shadow:none!important;max-width:520px;width:100%;margin:0 auto;padding:0!important}
.cflow__head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 18px;padding:0 4px;font-size:12px;line-height:18px;color:rgba(242,241,237,.6)}
.cflow__live{display:inline-flex;align-items:center;gap:7px;color:rgba(242,241,237,.8)}
.cflow__live i{width:6px;height:6px;border-radius:50%;background:var(--green)}
.cflow__steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cflow__step{position:relative;display:grid;grid-template-columns:44px 1fr;grid-template-areas:"t who" "t txt" "t sub" "t bar";column-gap:12px;row-gap:3px;
  padding:14px 18px;border-radius:4px;background:rgba(242,241,237,.08);color:rgba(242,241,237,.55);
  transition:background .6s var(--ease),color .6s var(--ease),transform .6s var(--ease),box-shadow .6s var(--ease),margin .6s var(--ease)}
.cflow__t{grid-area:t;font-size:12px;line-height:20px;color:inherit;opacity:.8}
.cflow__who{grid-area:who;font-size:12px;line-height:16px;color:inherit;opacity:.8}
.cflow__txt{grid-area:txt;display:flex;align-items:center;gap:10px;font-size:14px;line-height:20px;color:inherit}
.cflow__txt::before{content:"";width:18px;height:18px;flex:0 0 18px;border-radius:50%;background:currentColor;opacity:0;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='128' fill='black'/%3E%3Cpath d='M172.24 99.76a6 6 0 0 1 0 8.48l-56 56a6 6 0 0 1-8.48 0l-24-24a6 6 0 0 1 8.48-8.48L112 151.51l51.76-51.75a6 6 0 0 1 8.48 0Z' fill='white'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='128' fill='black'/%3E%3Cpath d='M172.24 99.76a6 6 0 0 1 0 8.48l-56 56a6 6 0 0 1-8.48 0l-24-24a6 6 0 0 1 8.48-8.48L112 151.51l51.76-51.75a6 6 0 0 1 8.48 0Z' fill='white'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask-composite:xor;mask-composite:exclude;transition:opacity .3s var(--ease)}
.cflow__sub{grid-area:sub;font-size:12px;line-height:18px;color:inherit;opacity:.75;max-height:0;overflow:hidden;transition:max-height .6s var(--ease),margin .6s var(--ease)}
.cflow__bar{grid-area:bar;position:relative;display:block;height:8px;margin-top:0;background:rgba(16,16,16,.10);border-radius:1px;overflow:hidden;max-height:0;transition:max-height .6s var(--ease),margin .6s var(--ease)}
.cflow__bar i{position:absolute;inset:0;width:100%;background:var(--green-deep,#007a57);transform:scaleX(0);transform-origin:left center;transition:transform 1.4s var(--ease)}
.cflow__bar b{position:absolute;top:0;bottom:0;width:1.5px;background:#F2F1ED}
/* states */
.cflow__step.is-done{background:rgba(242,241,237,.72);color:#1c3a2b}
.cflow__step.is-done .cflow__txt::before{opacity:.8}
.cflow__step.is-now{background:#F2F1ED;color:var(--ink);margin:0 -14px;padding:16px 32px;box-shadow:0 2px 4px rgba(0,0,0,.18),0 24px 48px -18px rgba(0,0,0,.6);z-index:1}
.cflow__step.is-now .cflow__txt::before{opacity:1;color:var(--green-deep,#007a57)}
.cflow__step.is-now .cflow__sub{max-height:24px;margin-top:2px}
.cflow__step.is-now .cflow__bar{max-height:8px;margin-top:10px}
.cflow__step.is-now .cflow__bar i{transform:scaleX(1)}
.cflow__step.is-now .cflow__t,.cflow__step.is-now .cflow__who{color:rgba(16,16,16,.5)}
/* the bracket from the current card down to the next steps */
.cflow__step.is-next{background:rgba(242,241,237,.06);margin-left:24px}
.cflow__step.is-next::before{content:"";position:absolute;left:-18px;top:-8px;bottom:50%;width:12px;border-left:1px solid rgba(242,241,237,.35);border-bottom:1px solid rgba(242,241,237,.35);border-bottom-left-radius:6px}
.cflow__step.is-next+.cflow__step.is-next::before{top:-16px}
@media (max-width:599.98px){.cflow__step{grid-template-columns:36px 1fr;padding:12px 14px}.cflow__step.is-now{margin:0 -6px;padding:14px 20px}}
@media (prefers-reduced-motion:reduce){.cflow__step,.cflow__bar i,.cflow__sub,.cflow__bar{transition:none}}

/* ═══ Text selection sweep (her ask): a phrase gets highlighted the way a
   cursor selects text, left to right, once the block scrolls in ═══════════ */
mark.sel{background:linear-gradient(rgba(0,181,133,.22),rgba(0,181,133,.22)) left center/0% 100% no-repeat;color:inherit;padding:1px 0;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .7s var(--ease) .3s}
.is-in mark.sel,.reveal.is-in mark.sel{background-size:100% 100%}
@media (prefers-reduced-motion:reduce){mark.sel{background-size:100% 100%;transition:none}}

/* ═══ Grain inside the dark sections (her note): the page layer is too quiet
   on the deepest green, so dark grounds get their own light noise ════════ */
.home-refresh .statement,.home-refresh .why,.home-refresh .footer,.home-refresh .platform .tile--flow .viz,.home-refresh #platform .tile--wide.stk .stk__stage{position:relative}
.home-refresh .statement::after,.home-refresh .why::after,.home-refresh .footer::after,
.home-refresh .platform .tile--flow .viz::after,.home-refresh #platform .tile--wide.stk .stk__stage::after{content:"";display:block!important;position:absolute;inset:0;z-index:0;pointer-events:none;
  width:auto;height:auto;background:none;background-image:var(--grain);background-size:160px 160px;opacity:.22;mix-blend-mode:screen;filter:contrast(1.6)}
.home-refresh .statement>*,.home-refresh .why>*,.home-refresh .footer>*{position:relative;z-index:1}
.home-refresh .footer__ghost{z-index:0}

/* ── Hero cards: cleaner still (no border, lighter lift) ── */
.home-refresh .hero .ha__card,.home-refresh .hero .ha__track.is-light .ha__card,.home-refresh .hero .ha__track.is-paper .ha__card{border-color:transparent!important;
  box-shadow:0 1px 1px rgba(16,16,16,.03),0 10px 26px -16px rgba(16,16,16,.14)!important}
.home-refresh .hero .ha__card:last-child{box-shadow:0 1px 2px rgba(16,16,16,.04),0 16px 34px -18px rgba(16,16,16,.20)!important}

/* ── Call flow, tidier (her notes): slower; the check is a toggle pill with a
      knob (rollups), not a green ball; the brackets draw themselves in ── */
.cflow__txt{position:relative}
.cflow__txt::before{width:30px;height:16px;flex-basis:30px;border-radius:8px;background:rgba(0,181,133,.22);-webkit-mask:none;mask:none;opacity:0;transition:opacity .3s var(--ease)}
.cflow__txt::after{content:"";position:absolute;left:15px;top:50%;width:13px;height:13px;margin-top:-6.5px;border-radius:50%;background:#0f4a38;opacity:0;transition:opacity .3s var(--ease);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='128' fill='black'/%3E%3Cpath d='M172.24 99.76a6 6 0 0 1 0 8.48l-56 56a6 6 0 0 1-8.48 0l-24-24a6 6 0 0 1 8.48-8.48L112 151.51l51.76-51.75a6 6 0 0 1 8.48 0Z' fill='white' stroke='white' stroke-width='10'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='128' fill='black'/%3E%3Cpath d='M172.24 99.76a6 6 0 0 1 0 8.48l-56 56a6 6 0 0 1-8.48 0l-24-24a6 6 0 0 1 8.48-8.48L112 151.51l51.76-51.75a6 6 0 0 1 8.48 0Z' fill='white' stroke='white' stroke-width='10'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask-composite:xor;mask-composite:exclude}
.cflow__step.is-done .cflow__txt::before,.cflow__step.is-done .cflow__txt::after{opacity:.55}
.cflow__step.is-now .cflow__txt::before,.cflow__step.is-now .cflow__txt::after{opacity:1}
.cflow__step.is-next::before{animation:bracketIn .7s var(--ease) both}
.cflow__step.is-next+.cflow__step.is-next::before{animation-delay:.15s}
.cflow__step.is-next+.cflow__step.is-next+.cflow__step.is-next::before{animation-delay:.3s}
@keyframes bracketIn{from{clip-path:inset(0 100% 100% 0)}50%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.cflow__step.is-now{background:#F2F1ED;box-shadow:0 1px 2px rgba(0,0,0,.14),0 20px 44px -18px rgba(0,0,0,.5)}
.cflow__step{transition-duration:.7s}
.cflow__bar i{transition-duration:2.4s}
/* the statement's fan canvas must stay a full-bleed absolute layer (the grain
   rule above had made every child relative) */
.home-refresh .statement__field{position:absolute!important;inset:0!important;z-index:0!important;max-width:none!important;width:auto!important}
.home-refresh .statement::after{z-index:0}
.home-refresh .statement .shell{position:relative;z-index:1}

/* ── Call flow rail: one continuous line from the current card down past the
      next steps, with a rounded branch into each one ── */
.cflow__step.is-next::before{content:"";position:absolute;left:-18px;top:-9px;bottom:50%;width:12px;
  border-left:1px solid rgba(242,241,237,.35);border-bottom:1px solid rgba(242,241,237,.35);border-bottom-left-radius:6px;border-top:0;border-right:0}
.cflow__step.is-next::after{content:"";position:absolute;left:-18px;top:50%;bottom:-9px;width:1px;background:rgba(242,241,237,.35)}
.cflow__step.is-next:last-child::after{display:none}
.cflow__step.is-next+.cflow__step.is-next::before{top:-9px}
.cflow__step.is-next::after{animation:railIn .7s var(--ease) both}
@keyframes railIn{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}

/* ── NO API (her notes): the tile is the page colour, not white; the portal
      animation waits until the selection sweep has finished ── */
.home-refresh .noapi{background:var(--bg)!important;border:1px solid var(--line)!important;box-shadow:none!important}
.home-refresh .noapi .brw,.home-refresh .noapi .brw *,.home-refresh .noapi .noapi__say span{animation-play-state:paused!important}
.home-refresh .noapi.is-go .brw,.home-refresh .noapi.is-go .brw *,.home-refresh .noapi.is-go .noapi__say span{animation-play-state:running!important}
.home-refresh .noapi .brw{opacity:.55;transition:opacity .6s var(--ease)}
.home-refresh .noapi.is-go .brw{opacity:1}

/* ── Selection sweep with a text caret riding the edge (her ask) ── */
@property --selp{syntax:"<percentage>";inherits:true;initial-value:0%}
mark.sel{position:relative;transition:none;background-size:var(--selp) 100%}
.is-in mark.sel,.reveal.is-in mark.sel{animation:selSweep .7s var(--ease) .3s both}
mark.sel::after{content:"";position:absolute;top:.04em;left:var(--selp);width:1.5px;height:1.05em;margin-left:-1px;background:var(--ink);opacity:0}
.is-in mark.sel::after,.reveal.is-in mark.sel::after{animation:selCaret 3s steps(1,end) .3s both}
@keyframes selSweep{from{--selp:0%}to{--selp:100%}}
@keyframes selCaret{0%{opacity:1}37%{opacity:1}44%{opacity:0}51%{opacity:1}58%{opacity:0}65%{opacity:1}72%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){mark.sel{animation:none;--selp:100%}mark.sel::after{display:none}}

/* ── NO API steps: all three shown at once, static (her note) ── */
.home-refresh .noapi__say{height:auto!important;display:flex;flex-direction:column;gap:8px;margin:14px 0 4px!important}
.home-refresh .noapi__say span{position:static!important;opacity:1!important;transform:none!important;animation:none!important;font-size:14px;line-height:20px;color:var(--ink)}
.home-refresh .noapi__say i{width:18px;font-size:12px;color:rgba(16,16,16,.45)}

/* ── Agent bubble: deep green, not pale green (her note) ── */
.home-refresh .platform .lv__bub--out{background:#0f4a38!important;color:#f2f1ed!important;border-color:transparent!important;box-shadow:0 1px 1px rgba(16,16,16,.06),0 10px 24px -12px rgba(15,74,56,.45)!important}
.home-refresh .platform .lv__att{background:#fff!important}

/* ── Grain, stronger on light surfaces (her note): the page layer at .22 with
      more contrast, so white cards carry visible dark grit too ── */
.home-refresh::after{opacity:.22;filter:contrast(2.4);background-size:140px 140px}

/* ── Wall reveal line: thicker and blurred, with a wide soft glow; the twin
      behind it is a light haze, not a dark smear (her notes) ── */
.itile__edge{width:3px;filter:blur(.7px);background:rgba(0,181,133,.9);
  box-shadow:0 0 6px 2px rgba(0,181,133,.45),0 0 18px 6px rgba(0,181,133,.22)}
.itile__face--soft{filter:blur(7px);opacity:.38!important}

/* ═══ Grain for dark grounds: a thresholded noise, sparse light specks, so the
   green sections carry the same grit the paper does ═══════════════════════ */
.home-refresh{--grain-dark:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 .96  0 0 0 2.2 -1.15'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.home-refresh .statement::after,.home-refresh .why::after,.home-refresh .footer::after,
.home-refresh .platform .tile--flow .viz::after,.home-refresh #platform .tile--wide.stk .stk__stage::after{
  background-image:var(--grain-dark);background-size:200px 200px;opacity:.5;mix-blend-mode:normal;filter:none}
.home-refresh .ctacard{position:relative}

/* ── Call flow rail: the vertical run only continues into another next step ── */
.cflow__step.is-next::after{display:none}
.cflow__step.is-next:has(+ .cflow__step.is-next)::after{display:block}

/* ── Wall line: thin and crisp, like a text cursor (her note) ── */
.itile__edge{width:1px;filter:none;background:var(--green);box-shadow:0 0 4px rgba(0,181,133,.5)}
.itile__face--soft{opacity:.3!important}

/* ── NO API: no eyebrow (it lives in the highlighted sentence now), a lower
      tile with tighter padding ── */
.home-refresh .noapi .t-eyebrow{display:none!important}
.home-refresh .noapi{padding:32px 40px!important;gap:40px!important;margin-top:40px!important}
.home-refresh .noapi__copy{gap:10px!important}
.home-refresh .noapi__title{margin:0}
.home-refresh .noapi__say{margin:8px 0 2px!important;gap:6px}
.home-refresh .noapi__copy .btn{margin-top:10px!important}
.home-refresh .noapi .brw{align-self:center}
@media (max-width:1199.98px){.home-refresh .noapi{padding:28px 24px!important}}

/* ── One grain everywhere: the dark sections use the same noise as the page
      layer, same scale, screened so it reads on green (her note) ── */
.home-refresh .statement::after,.home-refresh .why::after,.home-refresh .footer::after,
.home-refresh .platform .tile--flow .viz::after,.home-refresh #platform .tile--wide.stk .stk__stage::after{
  background-image:var(--grain);background-size:140px 140px;opacity:.42;mix-blend-mode:screen;filter:contrast(2.4)}

/* ── Grain: the earlier page texture is back (her call); the dark sections
      carry the same noise, screened so it shows on green ── */
.home-refresh::after{opacity:.16;filter:contrast(2);background-size:180px 180px;mix-blend-mode:normal}
.home-refresh .statement::after,.home-refresh .why::after,.home-refresh .footer::after,
.home-refresh .platform .tile--flow .viz::after,.home-refresh #platform .tile--wide.stk .stk__stage::after{
  background-image:var(--grain);background-size:180px 180px;opacity:.34;mix-blend-mode:screen;filter:contrast(2)}

/* ── Integrations cells: logo and name only, lower cells (her note) ── */
.itile__face span{display:none!important}
.itile{min-height:84px!important}
.itile__face{padding:14px 16px!important}
.itile--more .itile__face b{font-size:16px;font-weight:450;letter-spacing:0}

/* ── Selection sweep in the primary green (her note) ── */
mark.sel{background-image:linear-gradient(var(--green),var(--green));color:var(--ink)}
mark.sel::after{background:var(--ink)}

/* ── Selection sweep, final form (her notes): the line passes over the phrase
      and the text behind it turns white on the primary green. A white twin of
      the phrase is clipped to the swept width; the caret is a thin light line. ── */
mark.sel{background:none!important;color:var(--ink);white-space:nowrap;display:inline-block}
mark.sel::before{content:attr(data-t);position:absolute;left:0;top:0;padding:1px 0;color:#fff;background:var(--green);white-space:nowrap;
  clip-path:inset(0 calc(100% - var(--selp)) 0 0)}
mark.sel::after{background:#fff;width:1px;box-shadow:0 0 4px rgba(0,181,133,.6)}
.is-in mark.sel,.reveal.is-in mark.sel{animation-duration:1.8s}
@media (max-width:599.98px){mark.sel{white-space:normal;display:inline}mark.sel::before{display:none}mark.sel{background:linear-gradient(var(--green),var(--green)) left/var(--selp) 100% no-repeat!important}}

/* ── Why Strada: the grain goes on the dark tile itself (the section layer
      sat under the tile's own background) ── */
.home-refresh .why::after{display:none!important}
.home-refresh .why .stk{position:relative;overflow:hidden}
.home-refresh .why .stk::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:var(--grain);background-size:180px 180px;opacity:.34;mix-blend-mode:screen;filter:contrast(2)}
.home-refresh .why .stk__copy,.home-refresh .why .stk__stage{position:relative;z-index:1}
/* selection: pale green plate, deep green text (her note) */
mark.sel::before{background:rgba(0,181,133,.22);color:#0f4a38}
mark.sel::after{background:#0f4a38;box-shadow:none}
/* audit trail: the pending step is a plain faint ring, not a dashed one */
.home-refresh #platform .aud__list li:last-child i{border:1px solid rgba(16,16,16,.28)!important;border-style:solid!important}

/* ── Attachment chip: a real document icon (Phosphor file-text), not a square ── */
.home-refresh .platform .lv__att i{width:14px;height:14px;flex:0 0 14px;border-radius:0;background:rgba(16,16,16,.7)!important;opacity:1;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M212.24,83.76l-56-56A6,6,0,0,0,152,26H56A14,14,0,0,0,42,40V216a14,14,0,0,0,14,14H200a14,14,0,0,0,14-14V88A6,6,0,0,0,212.24,83.76ZM158,46.48,193.52,82H158ZM200,218H56a2,2,0,0,1-2-2V40a2,2,0,0,1,2-2h90V88a6,6,0,0,0,6,6h50V216A2,2,0,0,1,200,218Zm-34-82a6,6,0,0,1-6,6H96a6,6,0,0,1,0-12h64A6,6,0,0,1,166,136Zm0,32a6,6,0,0,1-6,6H96a6,6,0,0,1,0-12h64A6,6,0,0,1,166,168Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M212.24,83.76l-56-56A6,6,0,0,0,152,26H56A14,14,0,0,0,42,40V216a14,14,0,0,0,14,14H200a14,14,0,0,0,14-14V88A6,6,0,0,0,212.24,83.76ZM158,46.48,193.52,82H158ZM200,218H56a2,2,0,0,1-2-2V40a2,2,0,0,1,2-2h90V88a6,6,0,0,0,6,6h50V216A2,2,0,0,1,200,218Zm-34-82a6,6,0,0,1-6,6H96a6,6,0,0,1,0-12h64A6,6,0,0,1,166,136Zm0,32a6,6,0,0,1-6,6H96a6,6,0,0,1,0-12h64A6,6,0,0,1,166,168Z'/%3E%3C/svg%3E") center/contain no-repeat}

/* ── Audit trail: the pending ring breathes ── */
.home-refresh #platform .aud__list li:last-child i{animation:ringWait 1.8s var(--ease) infinite}
@keyframes ringWait{0%,100%{border-color:rgba(16,16,16,.22);transform:scale(1)}50%{border-color:rgba(0,181,133,.7);transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){.home-refresh #platform .aud__list li:last-child i{animation:none}}

/* attachment chip: the PDF icon (Phosphor file-pdf) */
.home-refresh .platform .lv__att i{width:16px;height:16px;flex-basis:16px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M222%2C152a6%2C6%2C0%2C0%2C1-6%2C6H190v20h18a6%2C6%2C0%2C0%2C1%2C0%2C12H190v18a6%2C6%2C0%2C0%2C1-12%2C0V152a6%2C6%2C0%2C0%2C1%2C6-6h32A6%2C6%2C0%2C0%2C1%2C222%2C152ZM90%2C172a26%2C26%2C0%2C0%2C1-26%2C26H54v10a6%2C6%2C0%2C0%2C1-12%2C0V152a6%2C6%2C0%2C0%2C1%2C6-6H64A26%2C26%2C0%2C0%2C1%2C90%2C172Zm-12%2C0a14%2C14%2C0%2C0%2C0-14-14H54v28H64A14%2C14%2C0%2C0%2C0%2C78%2C172Zm84%2C8a34%2C34%2C0%2C0%2C1-34%2C34H112a6%2C6%2C0%2C0%2C1-6-6V152a6%2C6%2C0%2C0%2C1%2C6-6h16A34%2C34%2C0%2C0%2C1%2C162%2C180Zm-12%2C0a22%2C22%2C0%2C0%2C0-22-22H118v44h10A22%2C22%2C0%2C0%2C0%2C150%2C180ZM42%2C112V40A14%2C14%2C0%2C0%2C1%2C56%2C26h96a6%2C6%2C0%2C0%2C1%2C4.25%2C1.76l56%2C56A6%2C6%2C0%2C0%2C1%2C214%2C88v24a6%2C6%2C0%2C0%2C1-12%2C0V94H152a6%2C6%2C0%2C0%2C1-6-6V38H56a2%2C2%2C0%2C0%2C0-2%2C2v72a6%2C6%2C0%2C0%2C1-12%2C0ZM158%2C82h35.52L158%2C46.48Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M222%2C152a6%2C6%2C0%2C0%2C1-6%2C6H190v20h18a6%2C6%2C0%2C0%2C1%2C0%2C12H190v18a6%2C6%2C0%2C0%2C1-12%2C0V152a6%2C6%2C0%2C0%2C1%2C6-6h32A6%2C6%2C0%2C0%2C1%2C222%2C152ZM90%2C172a26%2C26%2C0%2C0%2C1-26%2C26H54v10a6%2C6%2C0%2C0%2C1-12%2C0V152a6%2C6%2C0%2C0%2C1%2C6-6H64A26%2C26%2C0%2C0%2C1%2C90%2C172Zm-12%2C0a14%2C14%2C0%2C0%2C0-14-14H54v28H64A14%2C14%2C0%2C0%2C0%2C78%2C172Zm84%2C8a34%2C34%2C0%2C0%2C1-34%2C34H112a6%2C6%2C0%2C0%2C1-6-6V152a6%2C6%2C0%2C0%2C1%2C6-6h16A34%2C34%2C0%2C0%2C1%2C162%2C180Zm-12%2C0a22%2C22%2C0%2C0%2C0-22-22H118v44h10A22%2C22%2C0%2C0%2C0%2C150%2C180ZM42%2C112V40A14%2C14%2C0%2C0%2C1%2C56%2C26h96a6%2C6%2C0%2C0%2C1%2C4.25%2C1.76l56%2C56A6%2C6%2C0%2C0%2C1%2C214%2C88v24a6%2C6%2C0%2C0%2C1-12%2C0V94H152a6%2C6%2C0%2C0%2C1-6-6V38H56a2%2C2%2C0%2C0%2C0-2%2C2v72a6%2C6%2C0%2C0%2C1-12%2C0ZM158%2C82h35.52L158%2C46.48Z'/%3E%3C/svg%3E") center/contain no-repeat}
/* Why Strada: the tile is transparent, the section paints the green, so the
   section's grain layer is back, above the content like the page layer */
.home-refresh .why::after{display:block!important;z-index:5}
.home-refresh .why .stk::after{display:none}
/* One icon set: the envelope in the message windows is the Phosphor Light one,
   like every other icon on the page, not a CSS-drawn box */
.ha__mail{width:15px;height:15px;margin:0 7px -2px 0;border:0;opacity:.75;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M224,50H32a6,6,0,0,0-6,6V192a14,14,0,0,0,14,14H216a14,14,0,0,0,14-14V56A6,6,0,0,0,224,50ZM208.58,62,128,135.86,47.42,62ZM216,194H40a2,2,0,0,1-2-2V69.64l86,78.78a6,6,0,0,0,8.1,0L218,69.64V192A2,2,0,0,1,216,194Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M224,50H32a6,6,0,0,0-6,6V192a14,14,0,0,0,14,14H216a14,14,0,0,0,14-14V56A6,6,0,0,0,224,50ZM208.58,62,128,135.86,47.42,62ZM216,194H40a2,2,0,0,1-2-2V69.64l86,78.78a6,6,0,0,0,8.1,0L218,69.64V192A2,2,0,0,1,216,194Z'/%3E%3C/svg%3E") center/contain no-repeat}
.ha__mail::after{display:none}
/* "200+ more systems": the categories roll under the title, one at a time,
   the way Reducto's "everything else" list rolls (0.6s, the page easing) */
.itile__tick{display:block;height:16px;margin-top:4px;overflow:hidden;font-style:normal;font-size:12px;line-height:16px;color:rgba(255,255,255,.55);text-align:center}
.itile__tick i{display:block;font-style:normal;transform:translateY(calc(var(--i,0) * -16px));transition:transform .6s var(--ease),opacity .6s var(--ease);opacity:.35}
.itile__tick i.is-on{opacity:1}
/* Testimonial video: the same grain the dark sections carry sits on top of the
   footage (the page layer alone is too faint over a picture) */
.home-refresh .tcard__photo{position:relative;overflow:hidden}
.home-refresh .tcard__photo::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background-image:var(--grain);background-size:180px 180px;opacity:.34;mix-blend-mode:screen;filter:contrast(2)}
.itile__tick{color:var(--muted)}
.itile__tick i{opacity:.3}
/* "Running" is a live state, not a boxed label: a thin arc turning in front
   of the word, and a light sweep running through the letters */
.home-refresh :is(.hero .ha,.ha--flow) .ha__chip,
.home-refresh :is(.hero .ha,.ha--flow) [class*="status"] > span.ha__chip:last-child{display:inline-flex!important;align-items:center;gap:7px;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;color:#0f4a38!important;font-size:12px!important;letter-spacing:.2px;
  background-image:linear-gradient(90deg,#0f4a38 0 40%,#00b585 50%,#0f4a38 60% 100%)!important;background-size:250% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent;animation:chipSweep 2.4s var(--ease) infinite}
.home-refresh :is(.hero .ha,.ha--flow) .ha__chip::before{content:"";width:11px;height:11px;flex:0 0 11px;border-radius:50%;border:1px solid rgba(0,181,133,.25);border-top-color:#00b585;animation:chipTurn .7s linear infinite}
@keyframes chipTurn{to{transform:rotate(360deg)}}
@keyframes chipSweep{0%{background-position:120% 0}100%{background-position:-20% 0}}
@media (prefers-reduced-motion:reduce){.home-refresh :is(.hero .ha,.ha--flow) .ha__chip,.home-refresh :is(.hero .ha,.ha--flow) .ha__chip::before{animation:none}}
/* CTA card: white, lifted with the hero-card shadow, less tall */
.home-refresh .ctacard{background:#fff!important;border:0!important;border-radius:6px;padding:52px 40px!important;box-shadow:0 1px 1px rgba(16,16,16,.03),0 10px 26px -16px rgba(16,16,16,.14)!important}
.home-refresh .ctacard__body .t-lead{margin-top:12px!important}
@media (max-width:809.98px){.home-refresh .ctacard{padding:40px 22px!important}}
.ha__mail{width:18px;height:18px;margin:0 8px -4px 0}
/* Memberships: five marks in one row, all greyed the same way */
.home-refresh .awgrid--members{grid-template-columns:repeat(5,1fr)!important}
.home-refresh .awgrid--members .awgrid__cell img{max-height:34px;max-width:150px;width:auto;object-fit:contain}
@media (max-width:809.98px){.home-refresh .awgrid--members{grid-template-columns:repeat(2,1fr)!important}}
/* Grain on the green sections: stronger, her call */
.home-refresh .statement::after,.home-refresh .why::after,.home-refresh .footer::after,
.home-refresh .platform .tile--flow .viz::after,.home-refresh #platform .tile--wide.stk .stk__stage::after{opacity:.5}
/* CTA band: same light ground as the FAQ above it, so the two read as one */
.home-refresh .ctaband{background:var(--surface,var(--paper))!important}
/* Control: its own white card, so it reads apart from the Agentic tile above
   (both carry a green stage); the hero-card shadow, no border */
.home-refresh #platform .tile--wide.stk{background:#fff!important;border-radius:6px;padding:48px 40px!important;margin-top:24px;box-shadow:0 1px 1px rgba(16,16,16,.03),0 10px 26px -16px rgba(16,16,16,.14)}
@media (max-width:809.98px){.home-refresh #platform .tile--wide.stk{padding:32px 20px!important}}
/* the light ground runs edge to edge; only the card is capped */
.home-refresh .ctaband{max-width:none!important;margin:0!important;width:100%}
.home-refresh .ctacard{max-width:1200px;margin:0 auto!important}
/* Control stage: one fixed height across the three states (292 / 410 / 268
   made the green plate jump on every switch); panels centred in it */
.home-refresh #platform .tile--wide.stk .stk__stage{height:410px!important;min-height:410px!important;display:flex;align-items:center;justify-content:center}
.home-refresh #platform .tile--wide.stk .stk__stage > *{width:100%}
.home-refresh .ctacard{max-width:1200px!important}
/* Observability: the bracket rail beside the upcoming steps is gone; the
   steps read by their own tone (lifted current, faded next) */
.home-refresh .cflow__step.is-next::before,.home-refresh .cflow__step.is-next::after,
.home-refresh .cflow__step:has(+ .is-next)::after{display:none!important}
/* Green sections: grain clearly visible (her second ask) */
.home-refresh .statement::after,.home-refresh .why::after,.home-refresh .footer::after,
.home-refresh .platform .tile--flow .viz::after,.home-refresh #platform .tile--wide.stk .stk__stage::after{opacity:.8;background-size:160px 160px}
/* wide white cards: only the soft shadow, no hairline under the bottom edge */
.home-refresh .ctacard,.home-refresh #platform .tile--wide.stk{box-shadow:0 10px 26px -16px rgba(16,16,16,.14)!important}
/* The page grain is BLACK noise (rgb 0, alpha from turbulence): screened over
   dark green it adds nothing, which is why the green sections looked flat.
   Dark sections get the same turbulence in white. */
.home-refresh{--grain-light: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 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.home-refresh .statement::after,.home-refresh .why::after,.home-refresh .footer::after,
.home-refresh .platform .tile--flow .viz::after,.home-refresh #platform .tile--wide.stk .stk__stage::after,
.home-refresh .tcard__photo::after{background-image:var(--grain-light);mix-blend-mode:normal;opacity:.22;filter:contrast(2);background-size:160px 160px}
/* Control stage on narrow screens: grows with the panel (the 410px lock made
   the audit card spill out of the plate on phones); card uses the full width */
@media (max-width:809.98px){
  .home-refresh #platform .tile--wide.stk .stk__stage{height:auto!important;min-height:0!important;padding:20px 14px}
  .home-refresh #platform .tile--wide.stk .stk__stage .aud{max-width:none}
}
/* Testimonial video: grain above the dark pre-overlay and the tag, well below
   the play button; heavier than on flat green because the footage is busy */
.home-refresh .tcard__photo::after{z-index:4;opacity:.45;filter:contrast(2.4);background-size:140px 140px}
/* Control stage: the three panels stay in flow (they cross-fade), so they
   stack in one grid cell instead of sharing a flex row */
.home-refresh #platform .tile--wide.stk .stk__stage{display:grid!important;place-items:center;justify-content:stretch}
.home-refresh #platform .tile--wide.stk .stk__stage > .stk__panel{grid-area:1/1;width:100%;justify-content:center}
.home-refresh #platform .tile--wide.stk .stk__stage > .stk__panel:not(.is-on){pointer-events:none}
/* ── Use cases: three segments told apart by the three call colours
      (light green / sand / dark green), one lifted white panel ── */
.home-refresh #use-cases .tabs__panel{--seg:#00b585;--seg-ink:#06251c;--seg-tint:rgba(0,181,133,.10);--seg-track:rgba(16,16,16,.10)}
.home-refresh #use-cases .tabs__panel--tpas{--seg:#0f4a38;--seg-ink:#06251c;--seg-tint:#f2ece0;--seg-track:rgba(16,16,16,.12)}
.home-refresh #use-cases :is(.tabs__panel--brokers,.tabs__panel--mgas){--seg:#8fe3c6;--seg-ink:#f2f1ed;--seg-tint:#06251c;--seg-track:rgba(255,255,255,.18)}
.home-refresh #use-cases .seg{background:#fff!important;border:0!important;border-radius:6px!important;box-shadow:0 10px 26px -16px rgba(16,16,16,.14)}
.home-refresh #use-cases .tabs__panel .caps li .cap__ico{color:var(--seg)!important}
.home-refresh #use-cases .tabs__panel--tpas .caps li .cap__ico{color:#0f4a38!important}
.home-refresh #use-cases :is(.tabs__panel--brokers,.tabs__panel--mgas) .caps li .cap__ico{color:#007a57!important}
.home-refresh #use-cases .segrow--stat{background:var(--seg-tint)!important;border-radius:4px!important}
.home-refresh #use-cases .segrow--stat::before,.home-refresh #use-cases .segrow--stat::after{display:none!important}
.home-refresh #use-cases .segrow--stat .segrow__label,.home-refresh #use-cases .segrow--stat .segfig b,.home-refresh #use-cases .segrow--stat .segfig span{color:var(--seg-ink)!important}
.home-refresh #use-cases .segrow--stat .segrow__label::before{background:var(--seg)!important}
.home-refresh #use-cases :is(.tabs__panel--brokers,.tabs__panel--mgas) .segrow--stat .segfig span{opacity:.78}
.home-refresh #use-cases .segfig__bar{background:var(--seg-track)!important}
.home-refresh #use-cases .segfig__bar i{background:var(--seg)!important}
/* the rail carries the same colour: bar + icon of the selected segment */
.home-refresh #use-cases .tabs__tab:nth-child(1){--seg:#00b585}
.home-refresh #use-cases .tabs__tab:nth-child(2){--seg:#0f4a38}
.home-refresh #use-cases .tabs__tab:nth-child(3){--seg:#007a57}
.home-refresh #use-cases .tabs__tab::before{background:var(--seg)!important}
.home-refresh #use-cases .tabs__tab[aria-selected="true"]::after{background:var(--seg);opacity:1}
.home-refresh #use-cases .tabs__tab[aria-selected="true"] b{color:var(--ink)}
/* the dark Brokers plate carries the same grain as the other green grounds */
.home-refresh #use-cases :is(.tabs__panel--brokers,.tabs__panel--mgas) .segrow--stat{position:relative;overflow:hidden}
.home-refresh #use-cases :is(.tabs__panel--brokers,.tabs__panel--mgas) .segrow--stat::after{display:block!important;content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:var(--grain-light);background-size:160px 160px;opacity:.22;filter:contrast(2)}
.home-refresh #use-cases :is(.tabs__panel--brokers,.tabs__panel--mgas) .segrow--stat > *{position:relative;z-index:1}
/* ── Use-case rail: three segment cards, each in its own colour; the selected
      one is the lifted white card, the others sit flat on the page ── */
.home-refresh #use-cases .tabs__bar{border:0!important;gap:8px;padding:0}
.home-refresh #use-cases .tabs__tab{--tint:rgba(0,181,133,.12);--ico-c:#00b585;display:grid!important;grid-template-columns:38px 1fr auto;grid-template-rows:auto auto;column-gap:14px;row-gap:2px;align-items:start;padding:16px 16px 16px 14px!important;border:0!important;border-radius:6px;background:transparent;transition:background var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease)}
.home-refresh #use-cases .tabs__tab:nth-child(2){--tint:#e9e0ce;--ico-c:#0f4a38}
.home-refresh #use-cases .tabs__tab:nth-child(3){--tint:#06251c;--ico-c:#8fe3c6}
.home-refresh #use-cases .tabs__tab::before{display:none!important}
.home-refresh #use-cases .tabs__tab::after{position:static!important;grid-row:1/3;grid-column:1;width:38px;height:38px;border-radius:4px;background:var(--tint)!important;opacity:1!important;-webkit-mask:none!important;mask:none!important;content:""}
.home-refresh #use-cases .tabs__tab i.tabs__ico{grid-row:1/3;grid-column:1;width:38px;height:38px;display:grid;place-items:center}
.home-refresh #use-cases .tabs__tab b{grid-column:2;grid-row:1;font-size:18px!important;line-height:24px!important;color:var(--ink2)}
.home-refresh #use-cases .tabs__tab small{grid-column:2;grid-row:2;font-size:14px;line-height:19px;color:var(--muted)}
.home-refresh #use-cases .tabs__fig{grid-column:3;grid-row:1;font-style:normal;font-weight:450;font-size:14px;line-height:24px;color:var(--ico-c);opacity:0;transform:translateX(4px);transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease)}
.home-refresh #use-cases .tabs__tab:nth-child(3) .tabs__fig{color:#007a57}
.home-refresh #use-cases .tabs__tab:hover{background:rgba(16,16,16,.03)}
.home-refresh #use-cases .tabs__tab[aria-selected="true"]{background:#fff;box-shadow:0 10px 26px -16px rgba(16,16,16,.18),0 1px 2px rgba(16,16,16,.04)}
.home-refresh #use-cases .tabs__tab[aria-selected="true"] b{color:var(--ink)}
.home-refresh #use-cases .tabs__tab[aria-selected="true"] .tabs__fig{opacity:1;transform:none}
/* the icon sits on the tinted square: painted by a second layer of ::after */
.home-refresh #use-cases .tabs__tab::after{background-color:var(--tint)!important;background-image:none}
.home-refresh #use-cases .tabs__tab > .tabs__mark{grid-row:1/3;grid-column:1;width:38px;height:38px;position:relative}
.home-refresh #use-cases .tabs__tab > .tabs__mark::before{content:"";position:absolute;inset:0;border-radius:4px;background:var(--tint)}
.home-refresh #use-cases .tabs__tab > .tabs__mark::after{content:"";position:absolute;inset:8px;background:var(--ico-c);-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.home-refresh #use-cases .tabs__tab::after{display:none!important}
@media (max-width:809.98px){
  .home-refresh #use-cases .tabs__bar{flex-direction:row;gap:6px}
  .home-refresh #use-cases .tabs__tab{grid-template-columns:1fr;padding:10px 12px!important}
  .home-refresh #use-cases .tabs__tab > .tabs__mark,.home-refresh #use-cases .tabs__tab small,.home-refresh #use-cases .tabs__fig{display:none}
  .home-refresh #use-cases .tabs__tab b{grid-column:1;font-size:16px!important}
}
/* ── Use cases, composition: the three segments sit in one row above the
      panel as equal cards (icon square, name, line, outcome); the chosen one
      is the lifted white card. The panel below gets the full width. ── */
.home-refresh #use-cases .tabs{display:flex!important;flex-direction:column;gap:16px}
.home-refresh #use-cases .tabs__bar{flex-direction:row!important;gap:12px;border:0!important}
.home-refresh #use-cases .tabs__tab{flex:1 1 0;min-width:0;grid-template-columns:38px 1fr auto!important;grid-template-rows:auto auto;column-gap:14px;row-gap:2px;padding:16px 18px 18px 16px!important;border-radius:6px}
.home-refresh #use-cases .tabs__tab b{grid-column:2;grid-row:1;font-size:18px!important;line-height:24px!important}
.home-refresh #use-cases .tabs__tab small{grid-column:2/4;grid-row:2;font-size:14px;line-height:19px;display:block!important;white-space:normal}
.home-refresh #use-cases .tabs__fig{grid-column:3;grid-row:1;font-size:16px}
.home-refresh #use-cases .tabs__tab > .tabs__mark{display:block!important;grid-row:1/3;grid-column:1}
.home-refresh #use-cases .tabs__tab[aria-selected="true"]{background:#fff;box-shadow:0 10px 26px -16px rgba(16,16,16,.18),0 1px 2px rgba(16,16,16,.04)}
.home-refresh #use-cases .tabs__tab:not([aria-selected="true"]) .tabs__fig{opacity:.55;transform:none;color:var(--muted)}
@media (max-width:809.98px){
  .home-refresh #use-cases .tabs__bar{gap:6px}
  .home-refresh #use-cases .tabs__tab{grid-template-columns:1fr!important;padding:10px 12px!important}
  .home-refresh #use-cases .tabs__tab > .tabs__mark,.home-refresh #use-cases .tabs__tab small,.home-refresh #use-cases .tabs__fig{display:none!important}
  .home-refresh #use-cases .tabs__tab b{grid-column:1;font-size:16px!important}
}
/* Control on tablet: when the tile stacks, the stage spans the full card */
@media (max-width:1199.98px){.home-refresh #platform .tile--wide.stk .stk__stage{max-width:none!important;width:100%!important}}
/* Use-case segment cards, simpler: icon in the segment colour on the line of
   the name, one line under it, the outcome figure on the right; no squares */
.home-refresh #use-cases .tabs__tab{grid-template-columns:24px 1fr auto!important;column-gap:10px;row-gap:4px;padding:16px 18px!important;align-items:center}
.home-refresh #use-cases .tabs__tab > .tabs__mark{width:24px;height:24px;grid-row:1;grid-column:1;align-self:center}
.home-refresh #use-cases .tabs__tab > .tabs__mark::before{display:none}
.home-refresh #use-cases .tabs__tab > .tabs__mark::after{inset:1px;background:var(--seg-ico,#00b585)}
.home-refresh #use-cases .tabs__tab:nth-child(1){--seg-ico:#00b585}
.home-refresh #use-cases .tabs__tab:nth-child(2){--seg-ico:#0f4a38}
.home-refresh #use-cases .tabs__tab:nth-child(3){--seg-ico:#007a57}
.home-refresh #use-cases .tabs__tab small{grid-column:1/4;grid-row:2}
.home-refresh #use-cases .tabs__tab .tabs__fig{align-self:center}
.home-refresh #use-cases .tabs__tab:not([aria-selected="true"]) > .tabs__mark::after{background:var(--muted)}
/* the dark Brokers plate: flat, the grain on a plate this small only read as a seam */
.home-refresh #use-cases :is(.tabs__panel--brokers,.tabs__panel--mgas) .segrow--stat::after{display:none!important}
/* Use cases: the segment strip is the top of the white card, one piece with
   the panel; the chosen segment is underlined in its colour */
.home-refresh #use-cases .tabs{gap:0;background:#fff;border-radius:4px;box-shadow:0 10px 26px -16px rgba(16,16,16,.14)}
.home-refresh #use-cases .tabs__bar{gap:0;padding:0 24px;border-bottom:1px solid var(--line)!important;border-radius:4px 4px 0 0}
.home-refresh #use-cases .tabs__tab{padding:20px 16px 18px!important;border-radius:0;background:transparent!important;box-shadow:none!important;position:relative}
.home-refresh #use-cases .tabs__tab::before{display:block!important;content:"";position:absolute;left:16px;right:16px;bottom:-1px;top:auto;width:auto;height:2px;background:var(--seg-ico)!important;opacity:0;transition:opacity var(--t-mid) var(--ease)}
.home-refresh #use-cases .tabs__tab[aria-selected="true"]::before{opacity:1}
.home-refresh #use-cases .tabs__tab:hover{background:transparent!important}
.home-refresh #use-cases .tabs__tab:hover b{color:var(--ink)}
.home-refresh #use-cases .seg{box-shadow:none!important;border-radius:0 0 6px 6px!important}
@media (max-width:809.98px){.home-refresh #use-cases .tabs__bar{padding:0 8px}.home-refresh #use-cases .tabs__tab{padding:14px 10px!important}}
/* segment strip without icons */
.home-refresh #use-cases .tabs__tab{grid-template-columns:1fr auto!important}
.home-refresh #use-cases .tabs__tab > .tabs__mark{display:none!important}
.home-refresh #use-cases .tabs__tab b{grid-column:1}
.home-refresh #use-cases .tabs__tab .tabs__fig{grid-column:2}
.home-refresh #use-cases .tabs__tab small{grid-column:1/3}
.home-refresh #use-cases .tabs__fig{display:none!important}
.home-refresh #use-cases .tabs__tab{grid-template-columns:1fr!important}
.home-refresh #use-cases .tabs__tab small{grid-column:1}
/* capability cells: icon above the text, both on the same left edge */
.home-refresh .tabs__panel .caps li{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.home-refresh .tabs__panel .caps li .cap__ico{position:static!important;top:auto!important;left:auto!important}
.home-refresh .tabs__panel .caps li .cap__txt{padding-left:0!important}
/* Use-case panel: right column is one flex column, the outcome card sits on
   the bottom line of the left column, its height that of a capability row */
.home-refresh #use-cases .seg{grid-template-rows:auto auto!important}
.home-refresh #use-cases .seg > .segrow:first-child{grid-row:1;grid-column:1}
.home-refresh #use-cases .seg__right{grid-row:1;grid-column:2;display:flex;flex-direction:column;min-width:0}
.home-refresh #use-cases .seg__right .segrow--stat{margin-top:auto!important;padding:22px 24px!important;align-self:stretch}
.home-refresh #use-cases .seg__right .segrow--stat .segfig b{font-size:44px;line-height:1}
.home-refresh #use-cases .seg__lines{grid-row:2;grid-column:1/3}
/* left column fills the panel height, its two rows equal, so the row line
   meets the top of the outcome card and both columns end together */
.home-refresh #use-cases .seg > .segrow:first-child{display:flex;flex-direction:column;align-self:stretch}
.home-refresh #use-cases .seg > .segrow:first-child .caps{flex:1;grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
.home-refresh #use-cases .seg > .segrow:first-child{justify-content:flex-start;gap:0}
.home-refresh #use-cases .seg > .segrow:first-child > .segrow__label{flex:0 0 auto;margin:0 0 22px}
.home-refresh #use-cases .seg__right{align-self:stretch}
/* Use-case panel entrance in two beats: Conversational AI first (label,
   then its cells), then Agentic backoffice, then the outcome */
.home-refresh #use-cases .tabs__panel .segrow__label,.home-refresh #use-cases .tabs__panel .segrow--stat{opacity:0}
.home-refresh #use-cases .tabs__panel.is-live .seg > .segrow .segrow__label{animation:segIn .6s var(--ease) both;animation-delay:0ms}
.home-refresh #use-cases .tabs__panel.is-live .seg > .segrow .caps li{animation-delay:calc(120ms + var(--k,0) * 90ms)!important}
.home-refresh #use-cases .tabs__panel.is-live .seg__right .segrow__label{animation:segIn .6s var(--ease) both;animation-delay:700ms}
.home-refresh #use-cases .tabs__panel.is-live .seg__right .caps li{animation-delay:calc(820ms + (var(--k,0) - 4) * 90ms)!important}
.home-refresh #use-cases .tabs__panel.is-live .segrow--stat{animation:segIn .7s var(--ease) both;animation-delay:1150ms}
.home-refresh #use-cases .tabs__panel.is-live .seg__lines{animation:segIn .6s var(--ease) both;animation-delay:1400ms}
@media (prefers-reduced-motion:reduce){.home-refresh #use-cases .tabs__panel .segrow__label,.home-refresh #use-cases .tabs__panel .segrow--stat{opacity:1;animation:none!important}}
/* Use-case panel on phones and small tablets: one column, Conversational
   block, then Agentic block, then the outcome card */
@media (max-width:809.98px){
  .home-refresh #use-cases .seg{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto auto!important;gap:0!important;padding:24px 20px!important}
  .home-refresh #use-cases .seg > .segrow:first-child{grid-row:1;grid-column:1;display:block}
  .home-refresh #use-cases .seg > .segrow:first-child .caps{grid-template-rows:auto auto}
  .home-refresh #use-cases .seg__right{grid-row:2;grid-column:1;margin-top:28px}
  .home-refresh #use-cases .seg__right .segrow--stat{margin-top:24px!important}
  .home-refresh #use-cases .seg__lines{grid-row:3;grid-column:1}
  .home-refresh #use-cases .caps{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
}
@media (max-width:519.98px){.home-refresh #use-cases .caps{grid-template-columns:minmax(0,1fr)!important}}
/* Control stage: the blueprint construction lines from the Why Strada
   drawings sit faintly behind the card (frame, inner frame, diagonals,
   dashed circle and axes) */
.home-refresh #platform .tile--wide.stk .stk__stage{position:relative}
.home-refresh #platform .tile--wide.stk .stk__stage::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.32;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 270' fill='none' stroke='%238fe3c6' stroke-width='.7'%3E%3Cpath d='M95 40V22h18M327 22h18v18M345 230v18h-18M113 248H95v-18'/%3E%3Ccircle cx='220' cy='135' r='84'/%3E%3Cpath d='M220 0v46M220 224v46' stroke-dasharray='2 5'/%3E%3Cpath d='M28 70h58M28 65v10M86 65v10M354 70h58M354 65v10M412 65v10'/%3E%3Cpath d='M28 200h58M28 195v10M86 195v10M354 200h58M354 195v10M412 195v10'/%3E%3C/svg%3E") center/auto 100% no-repeat}
.home-refresh #platform .tile--wide.stk .stk__stage > .stk__panel{position:relative;z-index:1}
.home-refresh #platform .tile--wide.stk .stk__stage::before{display:block!important}
.home-refresh #platform .tile--wide.stk .stk__stage::before{mix-blend-mode:normal;opacity:.34}
/* Observability state: the call flow fills the stage, so the blueprint lines
   stay only at the left and right edges, not behind the steps */
.home-refresh #platform .tile--wide.stk:has(.stk__row[data-stage="trace"].is-open) .stk__stage::before{-webkit-mask:linear-gradient(90deg,#000 0,#000 10%,transparent 20%,transparent 80%,#000 90%,#000 100%);mask:linear-gradient(90deg,#000 0,#000 10%,transparent 20%,transparent 80%,#000 90%,#000 100%)}
/* one drawing per Control state: Governance keeps the frame + circle,
   Observability gets timeline rails at the edges, Testing & QA a grid sheet
   with crosshairs */
.home-refresh #platform .tile--wide.stk:has(.stk__row[data-stage="trace"].is-open) .stk__stage::before{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 270' fill='none' stroke='%238fe3c6' stroke-width='.7'%3E%3Cpath d='M0 75h440M0 135h440M0 195h440' stroke-dasharray='2 5'/%3E%3Cpath d='M0 105h440M0 165h440' opacity='.5'/%3E%3Cpath d='M20 70v10M40 70v10M60 70v10M80 70v10M20 130v10M40 130v10M60 130v10M80 130v10M20 190v10M40 190v10M60 190v10M80 190v10 M360 70v10M380 70v10M400 70v10M420 70v10M360 130v10M380 130v10M400 130v10M420 130v10M360 190v10M380 190v10M400 190v10M420 190v10'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.home-refresh #platform .tile--wide.stk:has(.stk__row[data-stage="gap"].is-open) .stk__stage::before{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 270' fill='none' stroke='%238fe3c6' stroke-width='.7'%3E%3Cpath d='M95 22H345V248H95z'/%3E%3Cpath d='M137 22v226M178 22v226M220 22v226M262 22v226M303 22v226 M95 60h250M95 97h250M95 135h250M95 173h250M95 210h250' opacity='.45' stroke-dasharray='2 4'/%3E%3Cpath d='M220 0v22M220 248v22M77 135h18M345 135h18'/%3E%3Ccircle cx='220' cy='135' r='6'/%3E%3Ccircle cx='220' cy='135' r='1.2' fill='%23c9c6bf'/%3E%3Cpath d='M85 12l10 10M355 12l-10 10M85 258l10-10M355 258l-10-10' opacity='.6'/%3E%3C/svg%3E") center/auto 100% no-repeat;-webkit-mask:none;mask:none}
.home-refresh .awgrid--press .awgrid__cell img[alt="AM Best"]{max-height:30px;width:auto}

/* ============================================================
   Round 2026-09-11: who is the customer, who is Strada
   ============================================================ */

/* 1 · Chat and SMS: name the two sides, so it is never a guess.
   The panes are aria-hidden mock visuals, so the words live in CSS. */
.home-refresh .platform :is(.lv--sms,.lv--chat) .lv__bub{position:relative;margin-top:22px}
.home-refresh .platform :is(.lv--sms,.lv--chat) .lv__bub::after{
  content:"Customer";position:absolute;left:1px;top:-16px;
  font-size:12px;line-height:1;letter-spacing:.3px;color:var(--muted);white-space:nowrap}
.home-refresh .platform :is(.lv--sms,.lv--chat) .lv__bub--out::after{
  content:"Strada";left:auto;right:1px;color:#0f4a38}

/* 2 · Card stack: Strada's own cards carry a green edge, the cards that
   come in from a person do not. The mark alone was not enough to tell
   them apart. */
.home-refresh :is(.hero .ha,.ha--flow) :is(.ha__card--status,.ha__card--status2,
.ha__card--actions,.ha__card--progress,.ha__card--progress2){
  border-left:2px solid var(--bp-accent)!important}

/* 3 · No hairline above the lines-of-business row, and that row is on
   the text scale (was 13px). */
.home-refresh .seg__lines{border-top:0!important}
.home-refresh .seg__lines .chips li{font-size:14px!important}

/* 4 · Phone: the capability list is one column, so no item wraps. */
@media (max-width:560px){
  .home-refresh .feature-copy .caplist{grid-template-columns:1fr!important;gap:10px 0!important}
}

/* 5 · Use-case grid: the rules between cells are dashed, like the rest of
   the blueprint line work. */
.home-refresh .tabs__panel .caps{border-top:1px dashed var(--detail-rule)!important}
.home-refresh .tabs__panel .caps li{
  border-right-style:dashed!important;border-bottom-style:dashed!important;
  border-color:var(--detail-rule)!important}

/* 6 · Use-case segments read as folder tabs: the open one is the same white
   as the panel and joins it, the closed ones sit behind on the grey. */
.home-refresh #use-cases .tabs__bar{
  background:var(--bp-paper)!important;border-radius:4px 4px 0 0;
  padding:10px 24px 0!important;align-items:flex-end}
.home-refresh #use-cases .tabs__tab{
  padding:15px 18px 16px!important;border-radius:3px 3px 0 0;
  border:1px solid transparent!important;border-bottom:0!important;
  margin-bottom:-1px;position:relative;z-index:0}
.home-refresh #use-cases .tabs__tab[aria-selected="true"]{
  background:#fff!important;border-color:var(--line)!important;z-index:2}
.home-refresh #use-cases .tabs__tab:not([aria-selected="true"]):hover{
  background:rgba(255,255,255,.55)!important}
/* the accent marks the top edge of the open folder */
.home-refresh #use-cases .tabs__tab::before{
  top:-1px;bottom:auto;left:-1px;right:-1px;height:2px;border-radius:3px 3px 0 0}

/* 7 · The two sides get a face: the customer their photo, Strada its mark.
   The mark is drawn as a mask off the lockup SVG, so it takes one colour and
   carries no white disc. */
.home-refresh .platform :is(.lv--sms,.lv--chat) .lv__bub{margin-top:30px}
.home-refresh .platform :is(.lv--sms,.lv--chat) .lv__bub::after{top:-20px;left:24px}
.home-refresh .platform :is(.lv--sms,.lv--chat) .lv__bub--out::after{left:auto;right:24px}
.home-refresh .platform :is(.lv--sms,.lv--chat) .lv__bub::before{
  content:"";position:absolute;top:-25px;left:1px;width:17px;height:17px;
  border-radius:50%;background:url("../img/sarah.avif") center/cover no-repeat;
  border:1px solid rgba(16,16,16,.10)}
.home-refresh .platform :is(.lv--sms,.lv--chat) .lv__bub--out::before{
  left:auto;right:1px;width:15px;height:15px;top:-24px;
  border:0;border-radius:0;background:#0f4a38;
  -webkit-mask:url("../img/logos/strada-mark.svg") left center/auto 15px no-repeat;
  mask:url("../img/logos/strada-mark.svg") left center/auto 15px no-repeat}

/* 8 · The first folder sits flush with the card's left edge, so there is no
   step where its hairline meets the panel. */
.home-refresh #use-cases .tabs__bar{padding-left:0!important}
.home-refresh #use-cases .tabs__tab:first-child{padding-left:24px!important}
.home-refresh #use-cases .tabs__tab:first-child[aria-selected="true"]{
  border-left-color:transparent!important;border-top-left-radius:4px}
.home-refresh #use-cases .tabs__tab:first-child::before{left:0}
@media (max-width:809.98px){
  .home-refresh #use-cases .tabs__tab:first-child{padding-left:12px!important}
}
/* the folder label sits close to the panel it opens */
.home-refresh #use-cases .tabs__tab{padding-bottom:8px!important}
@media (max-width:809.98px){.home-refresh #use-cases .tabs__tab{padding-bottom:8px!important}}

/* 9 · Folder tabs carry the segment name only. */
.home-refresh #use-cases .tabs__tab small{display:none!important}
.home-refresh #use-cases .tabs__tab{padding-top:14px!important;padding-bottom:12px!important}

/* 10 · The green edge on Strada's own cards has to out-rank the card border
   set on `.ha__track.is-paper .ha__card`, hence the doubled classes. */
.home-refresh.home-refresh :is(.hero .ha,.ha--flow) .ha__track.ha__track
:is(.ha__card--status,.ha__card--status2,.ha__card--actions,.ha__card--progress,.ha__card--progress2){
  border-left:2px solid var(--bp-accent)!important}

/* 11 · A closed folder is a folder too: the same pale fill and hairline on
   three sides for every segment that is not open, so TPAs and Brokers match.
   They sit 1px higher than the open one, so the bar's line runs in front of
   them the way a folder behind the front sheet does. */
.home-refresh #use-cases .tabs__tab:not([aria-selected="true"]){
  background:rgba(255,255,255,.55)!important;
  border-color:var(--line)!important;border-bottom:0!important;
  margin-bottom:0;padding-top:10px!important}
.home-refresh #use-cases .tabs__tab:not([aria-selected="true"]):hover{
  background:rgba(255,255,255,.82)!important}
/* On the deep green ground the #007a57 edge sinks into the ground and stops
   telling anyone anything, so Strada's cards there use the light green. */
.home-refresh.home-refresh .ha--flow.ha--flow .ha__track.ha__track
:is(.ha__card--status,.ha__card--status2,.ha__card--actions,.ha__card--progress,.ha__card--progress2){
  border-left-color:#8fe3c6!important}

/* 12 · Folder set, finished: neighbours share one hairline instead of two,
   the open folder sits in front of them, and its white fill is the only thing
   that breaks the line the panel hangs from. */
.home-refresh #use-cases .tabs__tab+.tabs__tab{margin-left:-1px}
.home-refresh #use-cases .tabs__tab[aria-selected="true"]{z-index:2}
.home-refresh #use-cases .tabs__tab:not([aria-selected="true"]){z-index:1}
.home-refresh #use-cases .tabs__bar{border-bottom-color:var(--line)!important}

/* 13 · Card heads draw the mark as a mask off the lockup SVG. The PNG carries
   a white disc behind the rings and was painted at .45 opacity, which read as
   a grey smudge on a paper card. */
.home-refresh :is(.hero .ha,.ha--flow) .ha__mark{
  width:18px!important;height:18px!important;flex:0 0 18px!important;
  padding:0!important;overflow:visible!important;background:none!important;
  border:0!important;box-shadow:none!important;border-radius:0!important}
.home-refresh :is(.hero .ha,.ha--flow) .ha__mark img{display:none!important}
.home-refresh :is(.hero .ha,.ha--flow) .ha__mark::before{
  content:"";display:block;width:18px;height:18px;background:#0f4a38;
  -webkit-mask:url("../img/logos/strada-mark.svg") left center/auto 18px no-repeat;
  mask:url("../img/logos/strada-mark.svg") left center/auto 18px no-repeat}
/* hover must never look like the open folder */
.home-refresh #use-cases .tabs__tab:not([aria-selected="true"]):hover{
  background:rgba(255,255,255,.7)!important}

/* ============================================================
   Detail layer, after her pallet.com and rollups references:
   every row is a record (what happened + the value), every card
   head carries its count, and the ground carries the label of the
   thing being worked on. Our tokens, our one font, no mono.
   ============================================================ */

/* the record detail at the end of a row */
.home-refresh :is(.hero .ha,.ha--flow) .ha__rows li{
  display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:baseline;gap:0 10px}
.home-refresh :is(.hero .ha,.ha--flow) .ha__rows li .ha__ok{align-self:center}
.home-refresh :is(.hero .ha,.ha--flow) .ha__rowmeta{
  font-style:normal;font-size:12px;line-height:1.5;letter-spacing:.2px;
  color:var(--muted);white-space:nowrap;text-align:right}

/* the count beside a card title, regular weight, never bold */
.home-refresh :is(.hero .ha,.ha--flow) .ha__count{
  margin-left:8px;font-size:14px;font-weight:400;color:var(--muted)}

/* the check is a filled badge, so each row has an anchor of its own */
.home-refresh :is(.hero .ha,.ha--flow) .ha__rows--green .ha__ok{
  width:16px!important;height:16px!important;flex:0 0 16px!important;
  border-radius:50%!important;background-color:rgba(0,181,133,.16)!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.8 10.4l2.8 2.7 5.6-5.8' fill='none' stroke='%230f4a38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-size:13px 13px!important;background-position:center!important;
  background-repeat:no-repeat!important;box-shadow:none!important}


/* 15 · One green line per card, not three. The highlighted row keeps only its
   pale tint; the card's left edge stays the Strada cue and the check badges
   stay the done cue. */
.home-refresh :is(.hero .ha,.ha--flow) .ha__card--actions .ha__rows li{
  border-left:0!important}
@keyframes rowPass{0%{opacity:0;background-color:transparent}25%{opacity:1;background-color:var(--bp-tint)}100%{opacity:1;background-color:transparent}}
@keyframes rowStay{0%{opacity:0;background-color:transparent}40%,100%{opacity:1;background-color:var(--bp-tint)}}

/* 16 · The head mark and the row badges sit on one axis. The lockup SVG is
   103x30 with the mark at x 1.5..27.2, so to fill a 16px box the mask is
   scaled 16/25.7 (=64x18.6) and pulled back 0.9px; the head gap matches the
   row gap so the title and the row labels start on the same x too. */
.home-refresh :is(.hero .ha,.ha--flow) .ha__mark{
  width:16px!important;height:16px!important;flex:0 0 16px!important}
.home-refresh :is(.hero .ha,.ha--flow) .ha__mark::before{
  width:16px;height:16px;
  -webkit-mask:url("../img/logos/strada-mark.svg") -0.9px center/64px 18.6px no-repeat;
  mask:url("../img/logos/strada-mark.svg") -0.9px center/64px 18.6px no-repeat}
.home-refresh :is(.hero .ha,.ha--flow) .ha__head{gap:10px!important}
/* the rows were pulled 6px left of the head so their tint could bleed; that
   put the badges off the head mark's axis, so they sit flush instead */
.home-refresh :is(.hero .ha,.ha--flow) .ha__rows li{
  margin-left:0!important;padding-left:0!important}
/* the rows keep the -6px start transform of the haRow animation they no longer
   run, which is what pushed them off the head's axis */
.home-refresh :is(.hero .ha,.ha--flow) .ha__rows li{transform:none!important}

/* 17 · The actor badge carries the same weight as the customer's face: a 34px
   disc with the mark inside and the same 10px gap to the name, so a card says
   who is speaking the same way whoever is speaking. */
.home-refresh :is(.hero .ha,.ha--flow) .ha__mark{
  width:28px!important;height:28px!important;flex:0 0 28px!important;
  background:#0f4a38!important;border-radius:50%!important}
.home-refresh :is(.hero .ha,.ha--flow) .ha__mark::before{
  width:18px;height:18px;margin:5px;background:#f2f1ed;
  -webkit-mask:url("../img/logos/strada-mark.svg") -1.05px center/72.1px 21px no-repeat;
  mask:url("../img/logos/strada-mark.svg") -1.05px center/72.1px 21px no-repeat}

/* 18 · The row check is the glyph alone; the pale disc behind it was one more
   green shape in a card that already has the edge and the actor badge. */
.home-refresh :is(.hero .ha,.ha--flow) .ha__rows--green .ha__ok{
  background-color:transparent!important;border-radius:0!important;
  background-size:15px 15px!important}

/* ── The route through the platform section ──────────────────────────────
   One consistent gap between the platform tiles, and the road lives in it:
   hairline lanes, a routed step, and the green request. Nothing sits behind
   copy. */
.home-refresh #platform .proute{
  position:relative;height:76px;display:flex;justify-content:center;
  pointer-events:none}
.home-refresh #platform .proute svg{display:block;overflow:visible}
.home-refresh #platform .proute__lane{stroke:var(--lineStrong,#c9c6bf);stroke-width:1}
.home-refresh #platform .proute__ghost{stroke:#dedcd6;stroke-width:1;opacity:.55}
.home-refresh #platform .proute__req{
  fill:var(--bp-accent);opacity:0;transition:opacity .3s var(--ease)}
/* the tiles' own gaps step aside: the connector is the gap now */
.home-refresh #platform .bento > .tile{margin-top:0!important;margin-bottom:0!important}
@media (max-width:809.98px){
  .home-refresh #platform .proute{height:56px}
}
/* the tiles' own divider lines step aside where the road crosses into them */
.home-refresh #platform .proute + .tile{border-top:0!important}

/* ============================================================
   One line. The hairline is the brand's own device, so it gets
   a single value per ground and every token that used to hold a
   near-miss now points at it. The strong drawing line lives only
   inside the blueprint SVGs.
   ============================================================ */
:root,.home-refresh{
  --line:rgba(16,16,16,.10);
  --detail-rule:rgba(16,16,16,.10);
  --bp-line:rgba(16,16,16,.10);
  --rule-dark:rgba(242,241,237,.16);
  --ring:rgba(16,16,16,.32);
  --outline:rgba(16,16,16,.28);
}
/* ghost buttons carry the one outline, which is deliberately stronger than
   the hairline because it is a control, not a divider */
.home-refresh :is(.btn--paper,.tcard__cta){border-color:var(--outline)!important}
/* the live panel and the section's first tile take the one line too */
.home-refresh #platform .live{border-color:var(--line)!important}
.home-refresh #platform .bento > .tile:first-child{border-top-color:var(--line)!important}
/* dark grounds: one line for the whole enterprise band and the dark mocks */
.home-refresh #enterprise :is(.stk__row,.stk__row+.stk__row,.aud__list,.aud__list li,.aud__top,.aud__foot){
  border-color:var(--rule-dark)!important}

/* ── Use cases between phone and desktop ─────────────────────────────────
   Two groups side by side need 1100px. Below that the panel became four
   columns of about 200px and every title broke over two or three lines, so
   the groups stack and keep two comfortable columns each. */
@media (min-width:810px) and (max-width:1099.98px){
  .home-refresh #use-cases .tabs{grid-template-columns:1fr!important}
  .home-refresh #use-cases .seg{
    display:grid!important;grid-template-columns:1fr!important;
    grid-template-rows:auto auto auto!important;gap:0!important}
  .home-refresh #use-cases .seg > .segrow:first-child{grid-row:1;grid-column:1}
  .home-refresh #use-cases .seg__right{
    grid-row:2;grid-column:1;display:flex;flex-direction:column}
  .home-refresh #use-cases .seg__lines{grid-row:3;grid-column:1}
  .home-refresh #use-cases .seg__right .segrow--stat{
    margin-top:24px!important;align-self:stretch}
  .home-refresh #use-cases .caps{grid-template-columns:1fr 1fr!important}
}

/* ── Three section steps ─────────────────────────────────────────────────
   The page had seven vertical rhythms (140, 120, 100, 90, 82, 70, 20), which
   read as seven separate decisions. Three steps now carry everything:
   L for the statement band, M for the content sections, S for the supporting
   bands and the close. The hero keeps its own fluid opening: it is the top of
   the page, not a step in the rhythm. */
.home-refresh{--sec-l:140px;--sec-m:100px;--sec-s:70px}
.home-refresh :is(.segments,.platform,.quotes,.why,.faq){
  padding-top:var(--sec-m)!important;padding-bottom:var(--sec-m)!important}
.home-refresh .statement{
  padding-top:var(--sec-l)!important;padding-bottom:var(--sec-l)!important}
.home-refresh :is(.results,.awards){
  padding-top:var(--sec-s)!important;padding-bottom:var(--sec-s)!important}
.home-refresh .ctaband{
  padding-top:var(--sec-s)!important;padding-bottom:var(--sec-s)!important}
.home-refresh .footer{padding-top:var(--sec-s)!important;padding-bottom:var(--sec-s)!important}
@media (max-width:1099.98px){
  .home-refresh{--sec-l:104px;--sec-m:76px;--sec-s:56px}
}
@media (max-width:809.98px){
  .home-refresh{--sec-l:80px;--sec-m:60px;--sec-s:44px}
}

/* ── One label ───────────────────────────────────────────────────────────
   The small uppercase label is one role, so it gets one look per ground:
   deep green on light, light green on dark. Twelve renderings before this,
   with seven different letter spacings. Counters and timestamps that happen
   to be uppercase (the audit clock, the week badges) are not labels and stay
   out of the rule. */
.home-refresh :is(.t-eyebrow,.seg__kicker,.kicker,.segrow__label,
.seg__lines-label,.fig__index,.hero__logos-cap,.ticker){
  font-size:12px!important;line-height:16px!important;font-weight:450!important;
  letter-spacing:.08em!important;text-transform:uppercase!important;
  color:#007a57!important}
.home-refresh #enterprise :is(.t-eyebrow,.seg__kicker,.kicker,.segrow__label,
.seg__lines-label,.fig__index){color:#8fe3c6!important}
/* the counter's digits are not part of the label */
.home-refresh .ticker :is(b,span){color:var(--ink)!important;letter-spacing:normal!important}
.home-refresh .ticker u{color:#007a57!important}

/* the last folder reaches the card's right edge, the way the first one
   reaches the left */
.home-refresh #use-cases .tabs__bar{padding-right:0!important}
.home-refresh #use-cases .tabs__tab:last-child{padding-right:24px!important}
@media (max-width:809.98px){
  .home-refresh #use-cases .tabs__tab:last-child{padding-right:12px!important}
}
/* the Outcome label follows its own card's ground, not the segment's ink */
.home-refresh #use-cases .segrow--stat .segrow__label{color:#007a57!important}
.home-refresh #use-cases :is(.tabs__panel--brokers,.tabs__panel--mgas) .segrow--stat .segrow__label{color:#8fe3c6!important}

/* ── Two shadows ─────────────────────────────────────────────────────────
   One card shadow and one green reveal glow. Everything else that was a
   box-shadow was not a shadow at all: rings, outlines and a hairline drawn
   the wrong way, so they become a border or an outline and stop counting.
   The live dot's pulse keeps its own animated ring, which is motion, not a
   surface. */
.home-refresh{
  --lift:0 0 0 4px rgba(16,16,16,.03),0 1px 1px rgba(16,16,16,.07);
  --glow:0 0 4px rgba(0,181,133,.5);
}
/* every lifted surface takes the one shadow */
.home-refresh :is(.hero .ha,.ha--flow) .ha__card,
.home-refresh .platform :is(.lv__bub,.lv__att),
.home-refresh #platform .tile--wide.stk .stk__panel>*,
.home-refresh #use-cases .tabs,
.home-refresh .ctacard{box-shadow:var(--lift)!important}
/* the wall's reveal line is the only glow */
.home-refresh .itile__edge{box-shadow:var(--glow)!important}

/* rings and lines stop pretending to be shadows */
.home-refresh .nav{box-shadow:none!important;border-bottom:1px solid var(--line)}
.home-refresh .tcard__cta{box-shadow:none!important;border:1px solid var(--outline)!important}
.home-refresh .tcard__cta:hover{border-color:var(--ink)!important}
.home-refresh .tcard__avatar{box-shadow:none!important;outline:3px solid var(--paper);outline-offset:0}
.home-refresh .brw__btn{box-shadow:none!important}
/* the same one shadow, at a specificity that beats the earlier per-card
   variants; the open folder tab takes none because it is part of the card
   that already lifts */
.home-refresh.home-refresh :is(.hero .ha,.ha--flow) .ha__track.ha__track .ha__card,
.home-refresh.home-refresh :is(.hero .ha,.ha--flow) .ha__card:last-child,
.home-refresh.home-refresh #platform .tile--wide.stk,
.home-refresh.home-refresh #use-cases .seg,
.home-refresh.home-refresh #use-cases .tabs,
.home-refresh.home-refresh .ctacard{box-shadow:var(--lift)!important}
.home-refresh.home-refresh #use-cases .tabs__tab[aria-selected="true"]{box-shadow:none!important}
/* the card stack rides up when it outgrows its frame */
.home-refresh :is(.hero .ha,.ha--flow) .ha__track{
  transition:transform var(--t-slow) var(--ease)}

/* The figure captions in Impact are not section labels: they caption a
   number. So they lose the square and the accent and read as plain text,
   while the section's own label keeps the one label look. */
.home-refresh #impact .fig__index{color:var(--muted)!important}
.home-refresh #impact .fig__index::before{display:none!important}

/* ── Graph paper under the product visuals ───────────────────────────────
   Her blueprint reference: a fine grid ground with the document on top. The
   grid is drawn in the page hairline, so it adds no new colour, and it sits
   only under product visuals, never under copy. */
.home-refresh.home-refresh .platform .tile--conv .viz.viz--chan{
  background-color:var(--bp-paper)!important;
  background-image:
    radial-gradient(115% 88% at 50% 46%, rgba(247,246,242,0) 34%, var(--paper) 100%),
    linear-gradient(to right, rgba(15,74,56,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,74,56,.07) 1px, transparent 1px)!important;
  background-size:auto, 10px 10px, 10px 10px!important;
  background-position:0 0, -1px -1px, -1px -1px!important;
  background-repeat:no-repeat, repeat, repeat!important}
/* the grid lives in one place only, and that place is the product visual.
   The hero's own dot grid goes: it is a dots pattern, and two grids on one
   page read as texture rather than as a drawing. */
.home-refresh .hero .gridlines{display:none!important}

/* Observability: the rails drawing read as debris behind the call, so the
   ground is the same graph paper as the conversational visual, inverted for
   the dark stage and barely there. It fades at the edges the same way. */
.home-refresh #platform .tile--wide.stk:has(.stk__row[data-stage="trace"].is-open) .stk__stage::before{
  background:
    radial-gradient(66% 58% at 50% 50%, #06251c 0%, #06251c 52%, rgba(6,37,28,0) 100%),
    linear-gradient(to right, rgba(242,241,237,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(242,241,237,.05) 1px, transparent 1px);
  background-size:auto, 10px 10px, 10px 10px;
  background-position:0 0, -1px -1px, -1px -1px;
  background-repeat:no-repeat, repeat, repeat;
  -webkit-mask:none!important;mask:none!important;
  opacity:1}
.home-refresh .fprev{box-shadow:var(--lift)!important}

/* The agentic tile's ground was bare. It takes the same graph paper as the
   other product visuals, inverted for the dark ground and fading out before
   the tile's edge, so the cards sit on a drawn surface rather than a void. */
.home-refresh.home-refresh .platform .tile--flow .viz.viz--flow{
  background-image:
    radial-gradient(108% 86% at 50% 50%, rgba(6,37,28,0) 26%, #06251c 100%),
    linear-gradient(to right, rgba(242,241,237,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(242,241,237,.05) 1px, transparent 1px)!important;
  background-size:auto, 10px 10px, 10px 10px!important;
  background-position:0 0, -1px -1px, -1px -1px!important;
  background-repeat:no-repeat, repeat, repeat!important}



/* ── The call flow on a light stage ──────────────────────────────────────
   The steps were drawn as translucent light fills for a dark ground, which
   on paper turned into grey mush. On the light stage they are proper cards:
   white for the step being written, paper for the ones behind it, and the
   one still to come only outlined. */
.home-refresh #platform .cflow__head{color:var(--muted)!important}
.home-refresh #platform .cflow__live{color:var(--ink2)!important}
.home-refresh #platform .cflow__step{color:var(--ink2)!important;border-radius:3px}
.home-refresh #platform .cflow__step.is-done{
  background:#f2f1ed!important;color:var(--ink2)!important;border:1px solid var(--line)}
.home-refresh #platform .cflow__step.is-now{
  background:#ffffff!important;color:var(--ink)!important;
  border:1px solid var(--line);box-shadow:var(--lift)!important}
.home-refresh #platform .cflow__step.is-next{
  background:transparent!important;color:var(--muted)!important;
  border:1px solid var(--line)}
.home-refresh #platform .cflow__step.is-now :is(.cflow__t,.cflow__who){color:var(--muted)!important}

/* ── The dark is spent once ──────────────────────────────────────────────
   The platform's two grounds are light, on the same green graph paper as the
   conversational visual. The dark is left to the statement band, the Why
   Strada section and the close. */
.home-refresh.home-refresh .platform .tile--flow .viz.viz--flow,
.home-refresh.home-refresh #platform .tile--wide.stk .stk__stage{
  background-color:var(--paper)!important;
  background-image:
    radial-gradient(112% 88% at 50% 50%, rgba(247,246,242,0) 30%, var(--paper) 100%),
    linear-gradient(to right, rgba(15,74,56,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,74,56,.07) 1px, transparent 1px)!important;
  background-size:auto, 10px 10px, 10px 10px!important;
  background-position:0 0, -1px -1px, -1px -1px!important;
  background-repeat:no-repeat, repeat, repeat!important}
.home-refresh.home-refresh #platform .tile--wide.stk .stk__stage::before,
.home-refresh.home-refresh #platform .tile--wide.stk:has(.stk__row[data-stage="trace"].is-open) .stk__stage::before,
.home-refresh.home-refresh #platform .tile--wide.stk:has(.stk__row[data-stage="gap"].is-open) .stk__stage::before{
  background:none;opacity:0}
.home-refresh.home-refresh .ha--flow.ha--flow .ha__track.ha__track
:is(.ha__card--status,.ha__card--status2,.ha__card--actions,.ha__card--progress,.ha__card--progress2){
  border-left-color:var(--bp-accent)!important}

/* ── The wordmark drawn, not filled ──────────────────────────────────────
   Zeroma's footer letters are outlined and hatched rather than solid. Ours
   takes the same treatment in our own line: a hairline outline with a fine
   diagonal hatch inside, which is the same drafting language as the grid. */
.home-refresh .footer__ghost span{
  color:transparent!important;-webkit-text-fill-color:transparent!important;
  -webkit-text-stroke:1px rgba(242,241,237,.16);
  background-image:repeating-linear-gradient(
    -45deg,
    rgba(242,241,237,.085) 0 1px,
    rgba(242,241,237,0) 1px 7px);
  -webkit-background-clip:text;background-clip:text}

/* ── The knowledge gap closes ────────────────────────────────────────────
   The card was the same paper as its stage and did nothing but slide in, so
   the state had no point to make. It is white now, and it makes one: the
   suggested source is attached, the answer line changes and the week's
   count drops by one. */
.home-refresh #platform .stk__panel[data-stage="gap"] .gap{
  background:#ffffff!important;border:1px solid var(--line)!important;
  box-shadow:var(--lift)!important}
.home-refresh #platform .gap__a{position:relative;display:grid}
.home-refresh #platform .gap__a > span{
  grid-area:1/1;transition:opacity var(--t-mid) var(--ease)}
.home-refresh #platform .gap__a-next{opacity:0;color:var(--ink)!important}
.home-refresh #platform .gap.is-closed .gap__a-now{opacity:0}
.home-refresh #platform .gap.is-closed .gap__a-next{opacity:1}
.home-refresh #platform .gap__fix b{transition:color var(--t-mid) var(--ease)}
.home-refresh #platform .gap.is-closed .gap__fix b{color:var(--muted)!important}
.home-refresh #platform .gap__n{
  display:inline-block;min-width:.7em;transition:opacity var(--t-fast) var(--ease)}
/* the chat answer says where it came from, the way every other step does */
.home-refresh .platform .lv--chat .lv__src{
  margin:8px 1px 0 0;text-align:right;font-size:12px;line-height:16px;color:var(--muted)}

/* ═══ Review 09-11 ════════════════════════════════════════════════════════
   Three notes from her, answered as rules rather than one-off patches.

   1. The outcome is a GREEN CARD ON WHITE. It was a 10% wash on white, which
      is not a card at all. One rendering for all three segments: the figure
      is the loudest thing in the section, so it gets the deep green plate
      and the mint number, and the per-segment tone stays where it belongs,
      on the tab ink and the row icons.
   2. One shadow, and it has to be VISIBLE. The ring is the shadow: 4px of
      the surface's own colour at a low alpha plus a 1px drop. On a light
      surface the ring is ink; on a dark or coloured surface an ink ring is
      invisible, so it is drawn in that surface's colour instead.
   3. Everything that shows the product takes it: message bubbles, cards in
      the hero stack, the call-flow step, the audit panel, the browser mock.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. the outcome card ── */
.home-refresh #use-cases .tabs__panel.tabs__panel .segrow--stat{
  background:linear-gradient(160deg,#0f4a38 0%,#06251c 100%)!important;
  border:0!important;border-radius:4px!important;
  box-shadow:0 0 0 4px rgba(15,74,56,.06),0 1px 1px rgba(16,16,16,.10)!important}
.home-refresh #use-cases .tabs__panel.tabs__panel .segrow--stat .segfig b{color:#8fe3c6!important}
.home-refresh #use-cases .tabs__panel.tabs__panel .segrow--stat .segfig span{color:rgba(242,241,237,.72)!important}
.home-refresh #use-cases .tabs__panel.tabs__panel .segrow--stat .segrow__label{color:rgba(242,241,237,.62)!important}
.home-refresh #use-cases .tabs__panel.tabs__panel .segrow--stat .segrow__label::before{background:#8fe3c6!important}
.home-refresh #use-cases .tabs__panel.tabs__panel .segrow--stat:after{
  background:radial-gradient(rgba(143,227,198,.16) .8px,transparent 1px) 0 0/9px 9px!important}
.home-refresh #use-cases .tabs__panel.tabs__panel .segfig__bar{background:rgba(255,255,255,.16)!important}
.home-refresh #use-cases .tabs__panel.tabs__panel .segfig__bar i{background:#8fe3c6!important}

/* ── 2. one shadow, simple ───────────────────────────────────────────────
   Same shadow everywhere. On a dark surface the black ring is invisible, so
   there it is drawn in green. Nothing else changes: no borders removed, no
   buttons touched. */
.home-refresh.home-refresh .platform .lv__bub--out{
  box-shadow:0 0 0 4px rgba(15,74,56,.10),0 1px 1px rgba(16,16,16,.10)!important}
.home-refresh.home-refresh :is(.aud,.cflow,.noapi .brw,.fprev){
  box-shadow:var(--lift)!important}

/* ── The call flow, plain ────────────────────────────────────────────────
   Her note: the grid showing through and the ring around it. Both go. The
   ground is flat, the list has no frame, the steps are rows split by one
   hairline, and only the step happening now is a card. One box on the
   screen instead of six. */
.home-refresh #platform .tile--wide.stk .stk__stage:has(.cflow){
  background-image:none!important;background-color:var(--paper)!important}
.home-refresh #platform .tile--wide.stk .stk__stage:has(.cflow)::after{display:none!important}
.home-refresh.home-refresh .cflow{box-shadow:none!important;border:0!important;background:transparent!important}
.home-refresh.home-refresh .cflow__step{
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.home-refresh.home-refresh .cflow__step+.cflow__step{border-top:1px solid rgba(16,16,16,.08)!important}
.home-refresh.home-refresh .cflow__step.is-next{margin-left:0!important}
.home-refresh.home-refresh .cflow__step.is-next::before{display:none!important}
.home-refresh.home-refresh .cflow__step.is-now{
  background:#ffffff!important;border-radius:3px!important;border-top:0!important;
  box-shadow:0 0 0 4px rgba(16,16,16,.03),0 1px 1px rgba(16,16,16,.07)!important}
.home-refresh.home-refresh .cflow__step.is-now+.cflow__step{border-top:0!important}

/* ── Audit trail on a green ground (her ask) ─────────────────────────────
   The stage under the audit panel goes deep green, the grid comes off, and
   the panel stays a light card so the trail is the only thing you read. */
.home-refresh #platform .tile--wide.stk .stk__stage:has(.aud){
  background-color:#06251c!important;
  background-image:linear-gradient(160deg,#0f4a38 0%,#06251c 100%)!important}
.home-refresh #platform .tile--wide.stk .stk__stage:has(.aud)::before{display:none!important}
.home-refresh.home-refresh .aud{
  background:var(--paper)!important;border:0!important;
  box-shadow:0 0 0 4px rgba(6,37,28,.20),0 1px 2px rgba(6,37,28,.30)!important}

/* ── The call flow reads on the green ground ─────────────────────────────
   The rows were coloured for a light stage. On green they go light: the
   step that already happened is legible, the ones still coming are quiet,
   and the separator is a white hairline. Only the current step is a card. */
.home-refresh.home-refresh .cflow__head{color:rgba(242,241,237,.62)!important}
.home-refresh.home-refresh .cflow__step{color:rgba(242,241,237,.72)!important}
.home-refresh.home-refresh .cflow__step.is-next{color:rgba(242,241,237,.42)!important}
.home-refresh.home-refresh .cflow__step.is-done{color:rgba(242,241,237,.78)!important}
.home-refresh.home-refresh .cflow__step.is-now{color:var(--ink)!important}
.home-refresh.home-refresh .cflow__step+.cflow__step{border-top-color:rgba(255,255,255,.12)!important}
.home-refresh.home-refresh .cflow__step .cflow__t,
.home-refresh.home-refresh .cflow__step .cflow__who{color:rgba(242,241,237,.45)!important}
.home-refresh.home-refresh .cflow__step.is-now .cflow__t,
.home-refresh.home-refresh .cflow__step.is-now .cflow__who{color:rgba(16,16,16,.5)!important}

/* ── Cards on the green stage ────────────────────────────────────────────
   A black ring on a dark green ground reads as a smudge. On this stage the
   ring is light, and the current step stops bleeding past the stage edge. */
.home-refresh.home-refresh #platform .tile--wide.stk .stk__stage .stk__panel>*,
.home-refresh.home-refresh .aud,
.home-refresh.home-refresh .gap,
.home-refresh.home-refresh .cflow__step.is-now{
  box-shadow:0 0 0 4px rgba(255,255,255,.05),0 1px 2px rgba(6,37,28,.35)!important}
.home-refresh.home-refresh .cflow__step.is-now{margin:0!important;padding:16px 18px!important}

/* ── The call flow, rebuilt as one panel ─────────────────────────────────
   It was a stack of plates: a grey one, a white one and four transparent
   rows, all on green. Three materials for one list. Now it is the same
   object as the audit trail: ONE light panel on the green ground, a header,
   and rows split by a hairline. The step happening now is marked by a green
   rule on its left edge, not by a second card.
   The selectors carry #platform and the data-stage attribute because the
   earlier trace rules do, and a shorter selector loses to them. */
.home-refresh #platform .stk__panel[data-stage="trace"] > .cflow{
  background:var(--paper)!important;border-radius:3px!important;overflow:hidden!important;
  box-shadow:0 0 0 4px rgba(255,255,255,.05),0 1px 2px rgba(6,37,28,.35)!important;
  padding:0!important;border:0!important}
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__head{
  color:rgba(16,16,16,.55)!important;padding:14px 20px!important;margin:0!important;
  border-bottom:1px solid rgba(16,16,16,.10)!important}
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__steps{padding:0!important;margin:0!important;gap:0!important}
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__step{
  position:relative!important;background:transparent!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;margin:0!important;padding:14px 20px!important;color:var(--ink)!important;z-index:auto!important}
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__step+.cflow__step{
  border-top:1px solid rgba(16,16,16,.08)!important}
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__step.is-done{color:rgba(16,16,16,.72)!important}
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__step.is-next{color:rgba(16,16,16,.40)!important}
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__step.is-now{color:var(--ink)!important;background:transparent!important}
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__step.is-now::after{
  content:""!important;position:absolute!important;left:0;top:0;bottom:0;width:2px;height:auto;
  background:var(--green,#00b585)!important;opacity:1!important;margin:0!important;border-radius:0!important;
  -webkit-mask:none!important;mask:none!important}
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__step .cflow__t,
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__step .cflow__who{color:rgba(16,16,16,.42)!important}
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__step.is-now .cflow__t{color:rgba(16,16,16,.55)!important}
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__step.is-next::before{display:none!important}

/* ── The whole sequence is visible from the start ────────────────────────
   Her note: you cannot see the sequence in advance. The upcoming steps were
   at 40% and read as not-there. Now every step is legible from the first
   frame, the list does not move, and the only thing that changes is which
   row is marked: a green rule on the left and a white row. */
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__step{
  border-left:2px solid transparent!important}
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__step.is-next{color:rgba(16,16,16,.62)!important}
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__step.is-done{color:rgba(16,16,16,.68)!important}
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__step.is-now{
  color:var(--ink)!important;background:#ffffff!important;
  border-left:2px solid var(--green,#00b585)!important}
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__step.is-now::after{display:none!important}
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__step .cflow__t{color:rgba(16,16,16,.45)!important}
/* the sub line no longer collapses, so the rows keep their height and the
   list stops jumping as the marker moves */
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__sub{
  max-height:none!important;opacity:.62;margin-top:2px!important}
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__step.is-now .cflow__sub{opacity:.8}

/* ── Shadow belongs to big surfaces, not to small parts ──────────────────
   Her rule. The attachment chip is a part of a message, not a surface, so
   it drops the shadow and keeps a hairline. The channel body is the big
   surface in that mock and it was the one thing with none, so it takes it. */
.home-refresh.home-refresh .platform .lv__att{
  box-shadow:none!important;border:1px solid var(--line)!important}
.home-refresh.home-refresh .platform :is(.lv__ava,.lv__live,.lv__src,.lv__top b){
  box-shadow:none!important}
.home-refresh.home-refresh .platform .live__viz{
  box-shadow:0 0 0 4px rgba(16,16,16,.03),0 1px 1px rgba(16,16,16,.07)!important;
  border-radius:3px!important}

/* ── A message is a message, not a card ──────────────────────────────────
   The 4px halo is what made the bubbles read as cards. It comes off. A
   bubble keeps one soft drop so it sits on the ground, nothing more. The
   halo stays on the things that really are surfaces: panels and mocks. */
.home-refresh.home-refresh .platform .lv__bub--in{
  box-shadow:0 1px 2px rgba(16,16,16,.07)!important}
.home-refresh.home-refresh .platform .lv__bub--out{
  box-shadow:0 1px 2px rgba(6,37,28,.22)!important}

/* ── The card carries the shadow, nothing inside it does ─────────────────
   Her rule, stated plainly: the SMS / email / chat card gets the shadow and
   none of its contents do. So the bubbles, the attachment chip and the
   conversation area are flat, and the card they sit in is the only thing
   that lifts off the ground. */
.home-refresh.home-refresh .platform :is(.lv__bub,.lv__bub--in,.lv__bub--out,.lv__att,.live__viz){
  box-shadow:none!important}
.home-refresh.home-refresh .platform .live{
  box-shadow:0 0 0 4px rgba(16,16,16,.03),0 1px 1px rgba(16,16,16,.07)!important;
  border-radius:3px!important}

/* ── It is a flow, so the left column counts steps, not seconds ──────────
   Her note: the seconds on the left say nothing. One, two, three, four is
   what the block is actually showing. The number is a plain figure in a
   fixed column so the rows line up, and it turns green on the step that is
   running. The call timer in the header still carries the time. */
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__t{
  font-variant-numeric:tabular-nums;font-size:12px!important;line-height:18px!important;
  color:rgba(16,16,16,.38)!important;text-align:left!important}
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__step.is-now .cflow__t{
  color:var(--green-deep,#007a57)!important}

/* ── The open FAQ question stays ink ─────────────────────────────────────
   An open question was turning green. Green is the accent, not a state for
   running text; the open item is already marked by the sign on the right
   and by the answer below it. */
.home-refresh.home-refresh .acc__item.is-open > .acc__head,
.home-refresh.home-refresh .acc__item.is-open > .acc__head > span{color:var(--ink)!important}

/* ── The green stage takes the same grain as the Why band ────────────────
   Her note: identical grain on both. The earlier rule that stripped the
   grid off this stage also switched its grain layer off, so the ground was
   flat green next to a grained one. Same layer, same values as .why. */
.home-refresh #platform .tile--wide.stk .stk__stage:has(.cflow)::after,
.home-refresh #platform .tile--wide.stk .stk__stage::after{
  content:""!important;display:block!important;position:absolute;inset:0;z-index:0;pointer-events:none;
  background:none;background-image:var(--grain)!important;background-size:160px 160px!important;
  opacity:.22!important;mix-blend-mode:normal!important;filter:contrast(2)!important}
.home-refresh #platform .tile--wide.stk .stk__stage > *{position:relative;z-index:1}

/* ── One shadow, and it falls down ───────────────────────────────────────
   Her note: the ring reads as a strange band running all the way around.
   It does, because a 4px halo is an outline pretending to be light. The
   shadow now falls downward like light from above: a 1px contact edge and
   one soft spread. Two values, one for light grounds and one for the green
   ones, and nothing else in the page carries a box-shadow. */
.home-refresh{
  --lift:0 1px 2px rgba(16,16,16,.05),0 12px 28px -14px rgba(16,16,16,.22);
  --lift-green:0 1px 2px rgba(6,37,28,.24),0 18px 40px -18px rgba(6,37,28,.55);
}
.home-refresh.home-refresh :is(
  #use-cases .tabs,.ctacard,.platform .live,.noapi .brw,.fprev,
  .hero .ha__card,.ha--flow .ha__card
){box-shadow:var(--lift)!important}
.home-refresh.home-refresh :is(.aud,.gap,.cflow),
.home-refresh #platform .stk__panel[data-stage="trace"] > .cflow,
.home-refresh.home-refresh #platform .tile--wide.stk .stk__stage .stk__panel>*{
  box-shadow:var(--lift-green)!important}
.home-refresh.home-refresh #use-cases .tabs__panel .segrow--stat,
.home-refresh #use-cases .tabs__panel.tabs__panel .segrow--stat{
  box-shadow:0 1px 2px rgba(6,37,28,.18),0 14px 30px -16px rgba(6,37,28,.45)!important}

/* ── The flow reads left to right: rail, then step, then its switch ──────
   Her layout: the numbers run down a line on the left, and the switches sit
   on the right edge of each row. So the row is three columns, the rail
   carries a hairline through the numbers, and the toggle leaves the text
   and moves to the right, vertically centred on the row. */
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__step{
  grid-template-columns:36px minmax(0,1fr) 44px!important;
  grid-template-areas:"t who ." "t txt sw" "t sub ." !important;
  column-gap:14px!important;align-items:center!important;padding:14px 20px 14px 16px!important}
/* the rail: one hairline running behind the numbers, broken at the ends */
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__steps{position:relative}
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__steps::before{
  content:"";position:absolute;left:36px;top:18px;bottom:18px;width:1px;
  background:rgba(16,16,16,.12);z-index:0}
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__t{
  position:relative;z-index:1;background:var(--paper);padding:2px 0!important;text-align:center!important;
  grid-area:t;align-self:center}
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__step.is-now .cflow__t{background:#ffffff}
/* the switch moves to the right column */
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__txt{
  grid-area:txt;position:static!important;padding-left:0!important}
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__txt::before{
  position:absolute!important;right:20px;top:50%;margin-top:-8px;left:auto!important;
  width:30px;height:16px;flex-basis:auto;border-radius:8px}
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__txt::after{
  position:absolute!important;right:34px;top:50%;margin-top:-6.5px;left:auto!important}

/* ── Only the tool steps have a switch ───────────────────────────────────
   A line the agent says is not a thing you can switch on. The two speech
   rows lose the toggle and keep the rail and the number; the two tool rows
   keep it. The rail reads a touch darker so it actually joins the steps. */
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__step:not(.cflow__step--tool) .cflow__txt::before,
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__step:not(.cflow__step--tool) .cflow__txt::after{
  display:none!important}
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__steps::before{
  background:rgba(16,16,16,.16)}

/* ── The accordion rows lose their icons ─────────────────────────────────
   Her call. A shield, a pulse line and a flask were three metaphors doing
   the job the row title already does, and the flask read as a lab beaker
   next to two abstract marks. The title carries the meaning; the plus and
   minus on the right carries the state. */
.home-refresh #platform .stk__row button::before,
.home-refresh #platform .stk__row.is-open button::before,
.home-refresh #enterprise .stk__row button::before,
.home-refresh #enterprise .stk__row.is-open button::before{display:none!important}

/* ── The outcome card takes the grain too ────────────────────────────────
   Same layer and same values as the Why band and the green stage, so every
   deep-green surface on the page has one texture. The dot pattern that used
   to sit in this corner goes: grain and dots on one card is two textures. */
.home-refresh #use-cases .tabs__panel.tabs__panel .segrow--stat{
  position:relative!important;overflow:hidden!important}
.home-refresh #use-cases .tabs__panel.tabs__panel .segrow--stat::after{
  content:""!important;display:block!important;position:absolute!important;inset:0!important;
  z-index:0!important;pointer-events:none;width:auto;height:auto;
  background:none!important;background-image:var(--grain)!important;background-size:160px 160px!important;
  mask-image:none!important;-webkit-mask-image:none!important;
  opacity:.22!important;mix-blend-mode:normal!important;filter:contrast(2)!important}
.home-refresh #use-cases .tabs__panel.tabs__panel .segrow--stat > *{position:relative;z-index:1}

/* ── The top edge of the tab bar carries one line, not two ───────────────
   Her note about the strange shadow line. Three things met at the same
   pixel: a 1px top border on every tab, a 2px green marker on the selected
   one sitting a pixel above it, and the card's own contact shadow. The tab
   borders on top go, so the only thing on that edge is the green marker
   telling you which tab is open. */
.home-refresh.home-refresh #use-cases .tabs__tab{border-top:0!important}
.home-refresh.home-refresh #use-cases .tabs__tab[aria-selected="true"]::before{top:0!important}

/* ── Message bubbles are round, the way messages are ─────────────────────
   Her call, and the one place the page's square radii give way: a chat
   bubble is a real object people recognise. Rounded on three corners, with
   the corner nearest its sender cut back, so you read who is speaking from
   the shape alone. */
.home-refresh.home-refresh .platform .lv__bub{border-radius:14px!important}
.home-refresh.home-refresh .platform .lv__bub--in{border-radius:14px 14px 14px 4px!important}
.home-refresh.home-refresh .platform .lv__bub--out{border-radius:14px 14px 4px 14px!important}
.home-refresh.home-refresh .platform .lv__att{border-radius:12px!important}

/* ── Thin graphic on the green ground ────────────────────────────────────
   She asked for something quiet behind the panel and left the choice to me.
   The answer is the drawing the page already owns: the same 10px graph
   paper that sits under the light product mocks, inverted to white at 5% on
   the green. Not a new pattern, the same one in the other tone, so the dark
   stage reads as the same paper rather than as a different material.
   A veil of the ground colour covers the middle, so the grid only shows in
   the margin around the panel and never behind text. It was already built
   for the observability state and gated to it; it now belongs to the stage
   in all three states, which is why the ground looked empty. */
.home-refresh #platform .tile--wide.stk .stk__stage{position:relative}
.home-refresh #platform .tile--wide.stk .stk__stage::before,
.home-refresh #platform .tile--wide.stk .stk__stage:has(.aud)::before,
.home-refresh #platform .tile--wide.stk .stk__stage:has(.cflow)::before{
  content:""!important;display:block!important;position:absolute!important;inset:0!important;
  z-index:0!important;pointer-events:none;width:auto;height:auto;
  background:
    radial-gradient(70% 62% at 50% 50%, #06251c 0%, #06251c 46%, rgba(6,37,28,0) 100%),
    linear-gradient(to right, rgba(242,241,237,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(242,241,237,.05) 1px, transparent 1px)!important;
  background-size:auto, 10px 10px, 10px 10px!important;
  background-position:0 0, -1px -1px, -1px -1px!important;
  background-repeat:no-repeat, repeat, repeat!important;
  -webkit-mask:none!important;mask:none!important;opacity:1!important}

/* ── Routes on the green stage, and the dark blob goes ───────────────────
   Two things. First, the veil that hid the grid in the middle was a solid
   #06251C disc painted over a ground that is a gradient, so it read as a
   stain rather than as depth. It is gone. The grid is now masked instead:
   the cells simply fade out toward the centre, no second colour involved.
   Second, the hero's own lines come to this stage. Same painter, same
   pattern, light on dark, sitting behind the panel and fading before it. */
.home-refresh #platform .tile--wide.stk .stk__stage::before,
.home-refresh #platform .tile--wide.stk .stk__stage:has(.aud)::before,
.home-refresh #platform .tile--wide.stk .stk__stage:has(.cflow)::before{
  background:
    linear-gradient(to right, rgba(242,241,237,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(242,241,237,.055) 1px, transparent 1px)!important;
  background-size:10px 10px, 10px 10px!important;
  background-position:-1px -1px, -1px -1px!important;
  background-repeat:repeat, repeat!important;
  -webkit-mask-image:radial-gradient(76% 68% at 50% 50%, transparent 0%, transparent 38%, #000 100%)!important;
  mask-image:radial-gradient(76% 68% at 50% 50%, transparent 0%, transparent 38%, #000 100%)!important}
/* the pattern field: behind the panel, under the grain, clipped to the stage */
.home-refresh #platform .tile--wide.stk .stk__stage{overflow:hidden}
.home-refresh #platform .tile--wide.stk .stkfield{
  position:absolute!important;inset:0!important;z-index:0!important;pointer-events:none;
  opacity:.5;
  -webkit-mask-image:radial-gradient(64% 58% at 50% 50%, transparent 0%, transparent 30%, #000 92%)!important;
  mask-image:radial-gradient(64% 58% at 50% 50%, transparent 0%, transparent 30%, #000 92%)!important}
.home-refresh #platform .tile--wide.stk .stkfield canvas{display:block;width:100%;height:100%}

/* ── The call flow matches its two siblings ──────────────────────────────
   Her note: this panel looks different from the other two on the same
   stage. It did: the audit trail and the knowledge gap are flat panels with
   rows of equal weight, and this one had a white plate and a green bar
   sliding down it. Both go. Every row is the same surface, the running step
   is told by its switch being on and by its text being ink, the same way
   the audit trail tells you a line is done by its check. */
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__step.is-now{
  background:transparent!important;border-left:2px solid transparent!important}
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__step.is-now .cflow__t{
  background:transparent!important;color:rgba(16,16,16,.45)!important}
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__step .cflow__t{
  background:var(--paper)!important}
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__step,
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__step.is-done,
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__step.is-next{
  color:rgba(16,16,16,.68)!important}
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__step.is-now{
  color:var(--ink)!important}

/* ── One graphic and one animation for the three panels ──────────────────
   Her ask. The three panels on this stage now share a chrome and a motion:
   same ground, same radius, same header and footer rhythm, same hairline
   between rows, and the same cascade the audit trail already used. The call
   flow's own moving marker is gone; nothing on this stage animates twice. */
.home-refresh.home-refresh :is(.aud,.cflow,.gap){
  background:var(--paper)!important;border-radius:3px!important;overflow:hidden!important}
.home-refresh.home-refresh :is(.aud__top,.cflow__head,.gap__top){
  padding:15px 20px!important;margin:0!important;
  border-bottom:1px solid rgba(16,16,16,.10)!important}
.home-refresh.home-refresh :is(.aud__foot,.gap__fix){
  padding:14px 20px!important;margin:0!important;
  border-top:1px solid rgba(16,16,16,.10)!important}
.home-refresh.home-refresh .aud__list{padding:0 20px!important;margin:0!important}
.home-refresh.home-refresh .aud__list li{padding:14px 0!important}
.home-refresh.home-refresh .aud__list li:last-child{border-bottom:0!important}
.home-refresh.home-refresh .gap__q,.home-refresh.home-refresh .gap__a{
  padding-left:20px!important;padding-right:20px!important}
/* the same cascade the audit rows use */
.home-refresh .stk__panel.is-on.is-fresh .cflow__step,
.home-refresh .stk__panel.is-on.is-fresh .gap__q,
.home-refresh .stk__panel.is-on.is-fresh .gap__a,
.home-refresh .stk__panel.is-on.is-fresh .gap__fix{
  animation:stkRowIn .3s var(--ease-out) both!important;
  animation-delay:calc(.16s + var(--i,0) * .07s)!important}
.home-refresh .stk__panel.is-on.is-fresh .gap__q{--i:0}
.home-refresh .stk__panel.is-on.is-fresh .gap__a{--i:1}
.home-refresh .stk__panel.is-on.is-fresh .gap__fix{--i:2}
/* every step reads as done, so the row colour is one value */
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__step,
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__step.is-done{
  color:rgba(16,16,16,.72)!important;background:transparent!important;border-left:0!important}
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__step .cflow__txt{color:var(--ink)!important}

/* ── Carriers, TPAs and Brokers, told apart without repainting ───────────
   Her first note: the three read as one screen with the words swapped. Her
   second: repainting a whole section is not an option. So the ground stays
   the same on all three and the difference is carried by the accent only.
   Each segment owns one colour, and it appears in exactly three places:
   the two column labels, the eight row icons, and the tab that is open.
     Carriers  Strada green
     TPAs      clay
     Brokers   forest
   The outcome card is deep green on all three. It is the same claim every
   time, so it must not change. */
.home-refresh #use-cases .tabs__panel--carriers{--seg-tone:#007a57}
.home-refresh #use-cases .tabs__panel--tpas{--seg-tone:#8a6d3f}
.home-refresh #use-cases :is(.tabs__panel--brokers,.tabs__panel--mgas){--seg-tone:#0f4a38}
.home-refresh #use-cases .tabs__panel .segrow__label,
.home-refresh #use-cases .tabs__panel .cap__ico{color:var(--seg-tone)!important}
.home-refresh #use-cases .tabs__panel .segrow__label::before{background:var(--seg-tone)!important}
.home-refresh.home-refresh #use-cases .tabs__tab:nth-child(1)[aria-selected="true"]{color:#007a57!important}
.home-refresh.home-refresh #use-cases .tabs__tab:nth-child(2)[aria-selected="true"]{color:#8a6d3f!important}
.home-refresh.home-refresh #use-cases .tabs__tab:nth-child(3)[aria-selected="true"]{color:#0f4a38!important}
.home-refresh.home-refresh #use-cases .tabs__tab:nth-child(1)[aria-selected="true"]::before{background:#007a57!important}
.home-refresh.home-refresh #use-cases .tabs__tab:nth-child(2)[aria-selected="true"]::before{background:#8a6d3f!important}
.home-refresh.home-refresh #use-cases .tabs__tab:nth-child(3)[aria-selected="true"]::before{background:#0f4a38!important}

/* ── A fragment of the wordmark, with a light running its contour ───────
   Two of her notes in one object. First: not the whole word in the middle,
   but a piece of it, as though the stage were a window cut out of a much
   larger logo. The word is set far wider than the stage and anchored left,
   so its letters run past every edge and you read the middle, "tra".
   Second: a light that travels the outline. That needs real letter paths,
   so the mark is SVG now rather than a styled span. Three copies of the
   same text sit on top of each other:
     fill  the diagonal hatch, clipped to the glyphs
     line  the standing hairline outline
     beam  one short dash of mint that runs along every contour and loops
   The dash follows each glyph's own outline, so the light goes around the
   letters rather than sweeping across them. */
.home-refresh #platform .tile--wide.stk .stkmark{
  position:absolute!important;inset:0!important;z-index:0!important;
  display:block;overflow:hidden;pointer-events:none;user-select:none}
.home-refresh #platform .tile--wide.stk .stkmark__svg{display:block;width:100%;height:100%;overflow:hidden}
.home-refresh #platform .tile--wide.stk .stkmark text{
  font-family:inherit;font-weight:300;font-size:760px;letter-spacing:-.055em;
  dominant-baseline:middle}
.home-refresh #platform .tile--wide.stk .stkmark__fill{fill:url(#stkHatch);stroke:none}
.home-refresh #platform .tile--wide.stk .stkmark__line{fill:none;stroke:rgba(242,241,237,.13);stroke-width:1.5}
.home-refresh #platform .tile--wide.stk .stkmark__beam{
  fill:none;stroke:#00b585;stroke-width:1.6;stroke-linecap:round}
/* ONE light, not one per letter. A dash pattern restarts on every glyph
   contour, so it lit six places at once. Instead a single soft window
   travels left to right and the bright outline shows only inside it. The
   light still reads as running the contour, because that is the only place
   there is anything to light. */
.home-refresh #platform .tile--wide.stk .stkmark__win{
  animation:stkBeam 9s linear infinite}
/* the travel is trimmed to the word itself. It used to start 410px before
   the first letter and finish 240px after the last, so a quarter of every
   cycle was dead air and the light felt slow to arrive. Now the head enters
   on the "s" and the tail leaves on the "a", and the speed drops with it,
   so it reads smoother AND shows up sooner. */
@keyframes stkBeam{
  from{transform:translateX(210px)}
  to{transform:translateX(2258px)}
}
@media (max-width:809.98px){
  .home-refresh #platform .tile--wide.stk .stkmark text{font-size:460px}
}
@media (prefers-reduced-motion:reduce){
  .home-refresh #platform .tile--wide.stk .stkmark__beam{animation:none;opacity:0}
}

/* ── One ground, three states ────────────────────────────────────────────
   Her ask: the same green stage, but a different drawing under each panel.
   The assignment is not random, each one says what its panel is about.

     Governance   the wordmark fragment   trust is where we sign our name
     Observability the Routes lines       a request travelling through steps
     Knowledge gap the bare grid          a question with nothing behind it

   The grid is the constant underneath all three, so the stage stays one
   surface; only the drawing on top of it changes. Both layers stay mounted
   and cross-fade, so switching panels does not restart a canvas. */
.home-refresh #platform .tile--wide.stk :is(.stkmark,.stkfield){
  opacity:0;transition:opacity .5s var(--ease,cubic-bezier(.4,0,.2,1))}
.home-refresh #platform .tile--wide.stk .stk__stage:has(.stk__panel[data-stage="aud"].is-on) .stkmark{opacity:1}
.home-refresh #platform .tile--wide.stk .stk__stage:has(.stk__panel[data-stage="trace"].is-on) .stkfield{opacity:.5}
/* the gap panel gets neither: the grid alone, and it reads a touch stronger
   because nothing else is competing with it */
.home-refresh #platform .tile--wide.stk .stk__stage:has(.stk__panel[data-stage="gap"].is-on)::before{
  background:
    linear-gradient(to right, rgba(242,241,237,.075) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(242,241,237,.075) 1px, transparent 1px)!important;
  background-size:10px 10px, 10px 10px!important;
  background-position:-1px -1px, -1px -1px!important}
@media (prefers-reduced-motion:reduce){
  .home-refresh #platform .tile--wide.stk :is(.stkmark,.stkfield){transition:none}
}

/* ── The outcome plate follows its segment ───────────────────────────────
   Her call, and it reverses my earlier one. The plate now carries the same
   colour as the segment's accent, so the card and the labels above it agree
   instead of the card being the one thing that never changes.
   Three families, all from the palette, each dark enough for a mint or sand
   figure to sit on it:
     Carriers  forest green   figure mint
     TPAs      clay           figure sand
     Brokers   dark sage      figure sage light
   The construction does not change, only the hue: same gradient angle, same
   radius, same shadow, same grain. */
.home-refresh #use-cases .tabs__panel--carriers{--plate-a:#0f4a38;--plate-b:#06251c;--plate-fig:#8fe3c6;--plate-cap:rgba(242,241,237,.72);--plate-lab:rgba(242,241,237,.62)}
.home-refresh #use-cases .tabs__panel--tpas{--plate-a:#4a3b24;--plate-b:#2a2114;--plate-fig:#e9e0ce;--plate-cap:rgba(242,241,237,.72);--plate-lab:rgba(233,224,206,.62)}
.home-refresh #use-cases :is(.tabs__panel--brokers,.tabs__panel--mgas){--plate-a:#24362e;--plate-b:#121e19;--plate-fig:#dce7e0;--plate-cap:rgba(242,241,237,.72);--plate-lab:rgba(220,231,224,.62)}
.home-refresh #use-cases .tabs__panel.tabs__panel .segrow--stat{
  background:linear-gradient(160deg,var(--plate-a) 0%,var(--plate-b) 100%)!important}
.home-refresh #use-cases .tabs__panel.tabs__panel .segrow--stat .segfig b{color:var(--plate-fig)!important}
.home-refresh #use-cases .tabs__panel.tabs__panel .segrow--stat .segfig span{color:var(--plate-cap)!important}
.home-refresh #use-cases .tabs__panel.tabs__panel .segrow--stat .segrow__label{color:var(--plate-lab)!important}
.home-refresh #use-cases .tabs__panel.tabs__panel .segrow--stat .segrow__label::before{background:var(--plate-fig)!important}
.home-refresh #use-cases .tabs__panel.tabs__panel .segfig__bar i{background:var(--plate-fig)!important}

/* ── The grid steps back where something else is drawing ─────────────────
   Her note on the Observability state: the grid is too loud there. It is,
   because the Routes lines are faint by design and the grid was set at one
   weight for all three states. The grid now carries the weight its state
   can afford: barely there under the lines, light under the wordmark, and
   at full strength only where it is the whole drawing. */
.home-refresh #platform .tile--wide.stk .stk__stage:has(.stk__panel[data-stage="trace"].is-on)::before{
  background:
    linear-gradient(to right, rgba(242,241,237,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(242,241,237,.028) 1px, transparent 1px)!important;
  background-size:10px 10px, 10px 10px!important;
  background-position:-1px -1px, -1px -1px!important}
.home-refresh #platform .tile--wide.stk .stk__stage:has(.stk__panel[data-stage="aud"].is-on)::before{
  background:
    linear-gradient(to right, rgba(242,241,237,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(242,241,237,.045) 1px, transparent 1px)!important;
  background-size:10px 10px, 10px 10px!important;
  background-position:-1px -1px, -1px -1px!important}
/* the lines carry the state instead, so they come up a little */
.home-refresh #platform .tile--wide.stk .stk__stage:has(.stk__panel[data-stage="trace"].is-on) .stkfield{opacity:.68}

/* ── The blueprints are drawn by the same light ──────────────────────────
   Her ask: the drawings in this section get the beam too. They are external
   SVG files, so their paths cannot be animated from the page. Instead each
   drawing is stacked twice: a quiet base and a bright copy revealed only
   through a narrow window that travels across it. The effect is the line
   work lighting up as the beam passes, which is the same idea as the
   wordmark and runs at the same speed. */
.home-refresh #enterprise .bpwrap{
  position:relative;display:block;width:440px;max-width:100%;margin:0 auto}
.home-refresh #enterprise .bpwrap .trust-blueprint{display:block;width:100%;height:auto}
.home-refresh #enterprise .bpwrap .trust-blueprint:first-child{opacity:.45}
.home-refresh #enterprise .trust-blueprint--beam{
  position:absolute!important;left:0;top:0;opacity:1;pointer-events:none;
  -webkit-mask-image:linear-gradient(96deg,
    transparent 0%, transparent 40%,
    rgba(0,0,0,.55) 47%, #000 50%, rgba(0,0,0,.55) 53%,
    transparent 60%, transparent 100%);
  mask-image:linear-gradient(96deg,
    transparent 0%, transparent 40%,
    rgba(0,0,0,.55) 47%, #000 50%, rgba(0,0,0,.55) 53%,
    transparent 60%, transparent 100%);
  -webkit-mask-size:260% 100%;mask-size:260% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:bpBeam 9s linear infinite}
@keyframes bpBeam{
  from{-webkit-mask-position:-160% 0;mask-position:-160% 0}
  to{-webkit-mask-position:260% 0;mask-position:260% 0}
}
@media (prefers-reduced-motion:reduce){
  .home-refresh #enterprise .trust-blueprint--beam{animation:none;opacity:0}
  .home-refresh #enterprise .bpwrap .trust-blueprint:first-child{opacity:1}
}

/* ── One more ground: the enterprise stage ───────────────────────────────
   Her ask. This stage was flat green with grain and nothing drawn on it,
   while the platform stage next door has a grid under everything. It gets
   the same 10px graph paper at the quietest weight, on ::after because
   ::before here is already carrying the grain. It stays under the blueprint
   rather than competing with it: the blueprint is the drawing, this is the
   paper it is drawn on. */
.home-refresh #enterprise .stk__stage{position:relative;overflow:hidden}
.home-refresh #enterprise .stk__stage::after{
  content:""!important;display:block!important;position:absolute!important;inset:0!important;
  z-index:0!important;pointer-events:none;width:auto;height:auto;
  background:
    linear-gradient(to right, rgba(242,241,237,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(242,241,237,.03) 1px, transparent 1px)!important;
  background-size:10px 10px, 10px 10px!important;
  background-position:-1px -1px, -1px -1px!important;
  -webkit-mask-image:radial-gradient(78% 70% at 50% 50%, transparent 0%, transparent 34%, #000 100%)!important;
  mask-image:radial-gradient(78% 70% at 50% 50%, transparent 0%, transparent 34%, #000 100%)!important}
.home-refresh #enterprise .stk__stage > *{position:relative;z-index:1}

/* ── No box under the blueprint ──────────────────────────────────────────
   Her note: a shadow around it. There is no box-shadow anywhere here; what
   reads as one is the stage's own edge. It was a panel: a 1px light border
   with a 3.5% white fill, so where it ended the ground stepped down and the
   eye called that a shadow. The panel goes. The blueprint now sits straight
   on the section, and the graph paper is the only thing marking the area. */
.home-refresh .why .stk__stage,
.home-refresh #enterprise .stk__stage{
  background:transparent!important;border:0!important;box-shadow:none!important}

/* ── The light drifts instead of passing ─────────────────────────────────
   Her note: it goes by too fast. Speed drops from 228 to 146 pixels a
   second. The travel stays trimmed to the drawing itself, so it is slower
   without going back to the long wait before it arrives. */
.home-refresh #platform .tile--wide.stk .stkmark__win{animation-duration:14s}
.home-refresh #enterprise .trust-blueprint--beam{animation-duration:14s}

/* ── The blueprint wrapper casts nothing ─────────────────────────────────
   Found it: wrapping the drawing in .bpwrap for the beam made it the direct
   child of the panel, so it inherited that slot's card shadow, 30px of
   blur at 55% black under a 440px box. That is the dark band she saw. The
   drawing is line work on a ground, not a card, so it carries no shadow. */
.home-refresh #enterprise .bpwrap,
.home-refresh #enterprise .bpwrap img{box-shadow:none!important;filter:none!important}

/* ── One paper ───────────────────────────────────────────────────────────
   The page carried two papers, #F2F1ED and var(--paper), five units of lightness
   apart. Nobody can name that difference, but it shows as a faint seam
   wherever two sections meet: hero was lighter than segments, results
   lighter than platform, awards lighter than faq. Same illness as the
   second near-black we already cured.
   #F2F1ED wins because it is already the brand's light value: it is what
   light text is drawn in on every green ground. Now the same colour means
   paper whether it is a ground or ink on green.
   The white cards keep #FFFFFF and read a touch stronger against it, which
   is the point: a card should be lighter than its ground. */
.home-refresh{--paper:#f2f1ed}
.home-refresh :is(
  .section.segments,.section.platform,.section.quotes,.section.faq,
  .ctaband,.tabs__bar,
  .platform .viz.viz--chan,.platform .viz.viz--flow,.platform .live,
  .aud,.cflow,.noapi .brw
){background-color:var(--paper)!important}
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__step .cflow__t{
  background:var(--paper)!important}

/* the blueprint paper token was the second paper's other name, so it folds
   into the one value too, and the three light panels follow at a weight
   that beats their own earlier rules */
.home-refresh{--bp-paper:#f2f1ed}
.home-refresh.home-refresh :is(.aud,.cflow,.gap){background-color:var(--paper)!important}
.home-refresh #use-cases .tabs__bar{background:var(--paper)!important}

/* the two light mock grounds spelled the old paper literally, at a weight
   that outranks the token, so they are named again here */
.home-refresh.home-refresh .platform .tile--conv .viz.viz--chan,
.home-refresh.home-refresh .platform .tile--flow .viz.viz--flow{
  background-color:var(--paper)!important}

.home-refresh #platform .stk__panel .aud,
.home-refresh #platform .stk__panel .cflow,
.home-refresh #platform .stk__panel .gap{background:var(--paper)!important}

/* ── The outcome card uses its width ─────────────────────────────────────
   Her note: a lot of empty space on the right. There was: the card is 490
   wide and everything sat in a 255 column, so 235 pixels did nothing.
   The card is now three bands instead of one stack.
     label     across the top
     figure    left, caption to its right, both sitting on one baseline
     bar       the full inner width, filled to the number
   The bar is the part that gains most. At 255 it was decoration; running
   the whole card it is a real measure, and 80 per cent of the width is
   what 80 per cent looks like. */
.home-refresh #use-cases .tabs__panel.tabs__panel .segfig{
  display:grid!important;width:100%;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"fig cap" "bar bar";
  column-gap:28px;row-gap:0;align-items:end}
.home-refresh #use-cases .tabs__panel.tabs__panel .segfig b{
  grid-area:fig;align-self:end;margin:0}
.home-refresh #use-cases .tabs__panel.tabs__panel .segfig > span:not(.segfig__bar){
  grid-area:cap;align-self:end;max-width:none!important;padding-bottom:6px}
.home-refresh #use-cases .tabs__panel.tabs__panel .segfig__bar{
  grid-area:bar;max-width:none!important;width:100%;margin:20px 0 0}
@media (max-width:899.98px){
  .home-refresh #use-cases .tabs__panel.tabs__panel .segfig{
    grid-template-columns:1fr;grid-template-areas:"fig" "cap" "bar";row-gap:10px}
  .home-refresh #use-cases .tabs__panel.tabs__panel .segfig > span:not(.segfig__bar){padding-bottom:0}
  .home-refresh #use-cases .tabs__panel.tabs__panel .segfig__bar{margin-top:14px}
}

/* ── 11 Sep, evening round ───────────────────────────────────────────────── */

/* The wordmark fragment sits on its baseline below the stage, so the letters
   leave through the bottom edge too; there was a band of empty green under
   them */
.home-refresh #platform .tile--wide.stk .stkmark text{dominant-baseline:alphabetic!important}

/* No icon over the two platform tile titles (her call on the bubble; the
   flow tile's arrow goes with it, same component) */
.home-refresh .feature-copy .tile__title::before{display:none!important}

/* Blueprint icons: every capability icon stands inside four construction
   ticks, the corner marks of the drawings; same tone as the icon, faint */
.home-refresh .tabs__panel .caps li .cap__ico{position:relative!important;overflow:visible}
.home-refresh .tabs__panel .caps li .cap__ico::before{content:"";position:absolute;inset:-9px;pointer-events:none;background:currentColor;opacity:.45;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M.5 8V.5H8M32 .5h7.5V8M39.5 32v7.5H32M8 39.5H.5V32'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M.5 8V.5H8M32 .5h7.5V8M39.5 32v7.5H32M8 39.5H.5V32'/%3E%3C/svg%3E") center/contain no-repeat}

/* Segment labels are selected like text: the same sweep the NO API line
   uses, Conversational first, Agentic on the second beat */
.home-refresh #use-cases .segrow__label mark.sel{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;animation:none}
.home-refresh #use-cases .segrow__label mark.sel::before{font:inherit;letter-spacing:inherit;text-transform:inherit;padding:1px 0}
.home-refresh #use-cases .segrow__label mark.sel::after{animation:none}
.home-refresh #use-cases .tabs__panel.is-live .seg > .segrow .segrow__label mark.sel{animation:selSweep 1.1s var(--ease) both}
.home-refresh #use-cases .tabs__panel.is-live .seg > .segrow .segrow__label mark.sel::after{animation:selCaret 2s steps(1,end) both}
.home-refresh #use-cases .tabs__panel.is-live .seg__right .segrow__label mark.sel{animation:selSweep 1.1s var(--ease) .7s both}
.home-refresh #use-cases .tabs__panel.is-live .seg__right .segrow__label mark.sel::after{animation:selCaret 2s steps(1,end) .7s both}

/* Agentic tile: after the first card, every card is drawn on the paper
   before it exists. The dashed road comes down from the card above, a line
   traces the card's outline along the grid, then the paper fills in and the
   content appears on it */
.home-refresh .ha--flow .ha__card+.ha__card{transform:none!important;opacity:1!important;background:transparent!important;box-shadow:none!important;border-color:transparent!important;
  transition:background .35s var(--ease) .95s,box-shadow .35s var(--ease) .95s,border-color .35s var(--ease) .95s!important}
.home-refresh .ha--flow .ha__card+.ha__card.is-in{background:#fff!important}
.home-refresh .ha--flow .ha__card+.ha__card > :not(.ha__trace){opacity:0;transition:opacity .35s var(--ease) 1.05s}
.home-refresh .ha--flow .ha__card+.ha__card.is-in > :not(.ha__trace){opacity:1}
.home-refresh .ha--flow .ha__card+.ha__card::before{height:0!important;transition:height .2s var(--ease)}
.home-refresh .ha--flow .ha__card+.ha__card.is-in::before{height:14px!important}
.home-refresh .ha--flow .ha__trace{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3;opacity:1}
.home-refresh .ha--flow .ha__trace rect{x:.5px;y:.5px;width:calc(100% - 1px);height:calc(100% - 1px);rx:4px;fill:none;stroke:#00b585;stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1;opacity:1;
  transition:stroke-dashoffset .8s var(--ease) .2s,opacity .4s var(--ease) 1.3s}
.home-refresh .ha--flow .ha__card.is-in .ha__trace rect{stroke-dashoffset:0;opacity:0}
@media (prefers-reduced-motion:reduce){.home-refresh .ha--flow .ha__trace{display:none}.home-refresh .ha--flow .ha__card+.ha__card,.home-refresh .ha--flow .ha__card+.ha__card > *{transition:none!important}}
.home-refresh .ha--flow .ha__trace[data-late] rect{transition:none}
/* the tick frame, not the glyph, sits on the text's left edge */
.home-refresh .tabs__panel .caps li .cap__ico{margin:9px 0 2px 9px!important}
/* flow-card trace: the same selectors the chrome rules use, so these win */
.home-refresh.home-refresh.home-refresh .ha--flow.ha--flow .ha__track.ha__track .ha__card.ha__card+.ha__card.ha__card{transform:none!important;opacity:1!important;background:transparent!important;box-shadow:none!important;border-color:transparent!important;
  transition:background .35s var(--ease) .95s,box-shadow .35s var(--ease) .95s,border-color .35s var(--ease) .95s!important}
.home-refresh.home-refresh.home-refresh .ha--flow.ha--flow .ha__track.ha__track .ha__card.ha__card+.ha__card.ha__card.is-in{background:#fff!important;border-color:var(--green)!important;box-shadow:0 1px 2px rgba(0,0,0,.18),0 18px 40px -16px rgba(0,0,0,.55)!important}
.home-refresh.home-refresh.home-refresh .ha--flow.ha--flow .ha__track.ha__track .ha__card.ha__card+.ha__card.ha__card > :not(.ha__trace){opacity:0!important;transition:opacity .35s var(--ease) 1.05s!important}
.home-refresh.home-refresh.home-refresh .ha--flow.ha--flow .ha__track.ha__track .ha__card.ha__card+.ha__card.ha__card.is-in > :not(.ha__trace){opacity:1!important}
/* Flow-card trace, second pass (her note: the green frame and the empty
   white stage were wrong). The line is a pencil hairline in the paper's own
   ink, it becomes the card's edge, and the fill, the shadow and the content
   arrive together the moment the outline closes. */
.home-refresh.home-refresh.home-refresh .ha--flow.ha--flow .ha__track.ha__track .ha__card.ha__card+.ha__card.ha__card{
  transition:background .3s var(--ease) .85s,box-shadow .3s var(--ease) .85s,border-color .3s var(--ease) .85s!important}
.home-refresh.home-refresh.home-refresh .ha--flow.ha--flow .ha__track.ha__track .ha__card.ha__card+.ha__card.ha__card.is-in{border-color:rgba(16,16,16,.10)!important;border-left-color:var(--green)!important}
.home-refresh.home-refresh.home-refresh .ha--flow.ha--flow .ha__track.ha__track .ha__card.ha__card+.ha__card.ha__card > :not(.ha__trace){transition:opacity .3s var(--ease) .85s!important}
.home-refresh .ha--flow .ha__trace rect{stroke:rgba(16,16,16,.32);stroke-width:1;transition:stroke-dashoffset .65s var(--ease) .2s,opacity .25s var(--ease) .9s}
.home-refresh .ha--flow .ha__card.is-in .ha__trace rect{opacity:0}
/* Use-case grid, her note: no rules between the cells, and the cells sit
   tighter; the blueprint marks around the icons carry the line work now */
.home-refresh .tabs__panel .caps{border-top:0!important}
.home-refresh .tabs__panel .caps li{border:0!important;padding:14px 18px 16px!important;gap:10px}
.home-refresh .tabs__panel .caps li .cap__ico{margin:6px 0 0 9px!important}
.home-refresh #use-cases .segrow__label{margin-bottom:10px!important}
.home-refresh #use-cases .seg__right{margin-top:0}
/* Observability rail runs through the middle of the numbers */
.home-refresh #platform .stk__panel[data-stage="trace"] .cflow__steps::before{left:34px}
/* OUTCOME: the label alone, the square before it was one mark too many */
.home-refresh #use-cases .tabs__panel.tabs__panel .segrow--stat .segrow__label::before{display:none!important}
.home-refresh #use-cases .tabs__panel .segrow--stat .segrow__label{padding-left:0!important}
/* Conversational mock sits whole inside its tile, no bleed off the right edge */
.home-refresh .tile--conv .viz.viz--bleed{padding:48px!important}
.home-refresh .tile--conv .viz.viz--bleed .live{border-radius:4px}
@media (max-width:809.98px){.home-refresh .tile--conv .viz.viz--bleed{padding:24px!important}}
/* Integrations: the categories come back as a ruler above the wall. The
   wall's column lines run up through the band, as a pencil overshoots the
   line, and one hairline through the middle carries the seven categories */
.home-refresh .ints__kinds{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr));align-items:center;position:relative;height:46px;margin:0!important;padding:0!important;list-style:none;border:0!important;
  background:
    linear-gradient(90deg,var(--line) 0 1px,transparent 1px) 0 0/33.3333% 100% repeat-x,
    linear-gradient(90deg,transparent calc(100% - 1px),var(--line) 0) 0 0/100% 100% no-repeat}
.home-refresh .ints__kinds::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line);z-index:0}
.home-refresh .ints__kinds li{position:relative;z-index:1;justify-self:center;margin:0;padding:2px 8px;background:var(--bg,#f2f1ed);font-size:11px;line-height:14px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);white-space:nowrap;border:0;cursor:default}
.home-refresh .ints__kinds li::before,.home-refresh .ints__kinds li::after{display:none!important}
.home-refresh .ints__kinds li.is-on,.home-refresh .ints__kinds li:hover{color:var(--muted);background:var(--bg,#f2f1ed)}
@media (max-width:809.98px){.home-refresh .ints__kinds{display:none!important}}
/* grain, a touch more (her note) */
.home-refresh::after{opacity:.2}
.home-refresh .statement::after,.home-refresh .why::after,.home-refresh .footer::after,
.home-refresh .platform .tile--flow .viz::after,.home-refresh #platform .tile--wide.stk .stk__stage::after{opacity:.27}
.home-refresh .tcard__photo::after{opacity:.5}
.home-refresh #integrations .ints__kinds.ints__kinds{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;grid-template-rows:auto!important;grid-auto-flow:column!important;width:100%}
.home-refresh #integrations .ints__kinds.ints__kinds > li{grid-row:1!important;grid-column:auto!important;display:inline-flex!important;width:auto!important}
/* the first window is drawn the same way, where the route line arrives */
.home-refresh.home-refresh.home-refresh .ha--flow.ha--flow .ha__track.ha__track .ha__card.ha__card:first-child{transform:none!important;opacity:1!important;background:transparent!important;box-shadow:none!important;border-color:transparent!important;
  transition:background .3s var(--ease) .85s,box-shadow .3s var(--ease) .85s,border-color .3s var(--ease) .85s!important}
.home-refresh.home-refresh.home-refresh .ha--flow.ha--flow .ha__track.ha__track .ha__card.ha__card:first-child.is-in{background:#fff!important;border-color:rgba(16,16,16,.10)!important;box-shadow:0 1px 2px rgba(0,0,0,.18),0 18px 40px -16px rgba(0,0,0,.55)!important}
.home-refresh.home-refresh.home-refresh .ha--flow.ha--flow .ha__track.ha__track .ha__card.ha__card:first-child > :not(.ha__trace){opacity:0!important;transition:opacity .3s var(--ease) .85s!important}
.home-refresh.home-refresh.home-refresh .ha--flow.ha--flow .ha__track.ha__track .ha__card.ha__card:first-child.is-in > :not(.ha__trace){opacity:1!important}
/* the ruler is one line with the categories on it, nothing ties them to a column */
.home-refresh #integrations .ints__kinds.ints__kinds{background:none!important;height:40px}
/* wordmark fragment: letters stand on the bottom edge, a size that keeps
   the light on contours that are actually inside the window */
.home-refresh #platform .tile--wide.stk .stkmark text{font-size:640px!important}
/* NO API tile: the top hairline is back, the frame was open at the top */
.home-refresh .noapi.noapi{border-top:1px solid var(--line)!important}
/* NO API frame closed at the top */
#browser-agents.noapi.noapi.noapi{border-top:1px solid var(--line)!important}
/* Agentic: the road comes down into the first window before it is drawn */
.home-refresh .ha--flow .ha__card:first-child::before{content:"";position:absolute;left:29px;top:-64px;width:0;height:0;border-left:1px dashed rgba(16,16,16,.28);transition:height .25s var(--ease)}
.home-refresh .ha--flow .ha__card:first-child.is-in::before{height:62px}
/* Impact bars in the page's line language: one hairline track, a green
   line to the value, no blocks and cuts */
.home-refresh .fig__seg{height:2px!important;width:100%;max-width:240px;display:block}
.home-refresh .fig__seg-track{fill:rgba(16,16,16,.12)}
.home-refresh .fig__seg-fill{fill:var(--green)}
.home-refresh .fig__seg-cut{display:none}
/* the card is filled first, then it lifts: the shadow comes a beat after the paper */
.home-refresh.home-refresh.home-refresh .ha--flow.ha--flow .ha__track.ha__track .ha__card.ha__card+.ha__card.ha__card,
.home-refresh.home-refresh.home-refresh .ha--flow.ha--flow .ha__track.ha__track .ha__card.ha__card:first-child{
  transition:background .3s var(--ease) .85s,border-color .3s var(--ease) .85s,box-shadow .45s var(--ease) 1.15s!important}
/* Only the first window is drawn. The cards after it arrive the way they
   did before: a short rise on the road that comes down to them. */
.home-refresh.home-refresh.home-refresh .ha--flow.ha--flow .ha__track.ha__track .ha__card.ha__card+.ha__card.ha__card{
  background:#fff!important;border-color:rgba(16,16,16,.10)!important;border-left-color:var(--green)!important;
  opacity:0!important;transform:translateY(14px)!important;transition:opacity .45s var(--ease) .2s,transform .5s var(--ease) .2s!important}
.home-refresh.home-refresh.home-refresh .ha--flow.ha--flow .ha__track.ha__track .ha__card.ha__card+.ha__card.ha__card.is-in{opacity:1!important;transform:none!important}
.home-refresh.home-refresh.home-refresh .ha--flow.ha--flow .ha__track.ha__track .ha__card.ha__card+.ha__card.ha__card > :not(.ha__trace),
.home-refresh.home-refresh.home-refresh .ha--flow.ha--flow .ha__track.ha__track .ha__card.ha__card+.ha__card.ha__card.is-in > :not(.ha__trace){opacity:1!important;transition:none!important}
.home-refresh .ha--flow .ha__card+.ha__card .ha__trace{display:none}
/* The shadow is its own layer under the first window, so it can wait: the
   line is drawn, the paper fills, then the card lifts */
.home-refresh.home-refresh.home-refresh .ha--flow.ha--flow .ha__track.ha__track .ha__card.ha__card:first-child,
.home-refresh.home-refresh.home-refresh .ha--flow.ha--flow .ha__track.ha__track .ha__card.ha__card:first-child.is-in{box-shadow:none!important}
.home-refresh .ha--flow .ha__card:first-child::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;box-shadow:var(--lift);opacity:0;transition:opacity .45s var(--ease) 1.15s}
.home-refresh .ha--flow .ha__card:first-child.is-in::after{opacity:1}
/* the cards after the first keep the lift always (their own shadow) */
.home-refresh.home-refresh.home-refresh .ha--flow.ha--flow .ha__track.ha__track .ha__card.ha__card+.ha__card.ha__card,
.home-refresh.home-refresh.home-refresh .ha--flow.ha--flow .ha__track.ha__track .ha__card.ha__card+.ha__card.ha__card.is-in{box-shadow:var(--lift)!important}
/* the road from the route to the first window, and the outline path that
   starts where the road lands */
.home-refresh .tile--flow{position:relative}
.home-refresh .ha__road{position:absolute;width:0;border-left:1px solid rgba(16,16,16,.28);z-index:2;pointer-events:none;transition:height .3s var(--ease)}
.home-refresh .ha--flow .ha__card:first-child::before{display:none!important}
.home-refresh .ha--flow .ha__trace path{fill:none;stroke:rgba(16,16,16,.32);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;opacity:1;transition:stroke-dashoffset .65s var(--ease) .3s,opacity .25s var(--ease) 1s}
.home-refresh .ha--flow .ha__card.is-in .ha__trace path{stroke-dashoffset:0;opacity:0}
/* Chat mock: no light green on grey. The ground is the page's grey paper
   and Strada's bubble is the deep green. */
.home-refresh.home-refresh .live__viz{background:#eceae4!important}
.home-refresh.home-refresh .lv__bub--out{background:#0f4a38!important;color:#f2f1ed!important}
/* the wordmark scales with the stage and the light stays on contours that
   are inside the window: it fades out over the top 22% and the right edge,
   where the letters leave */
.home-refresh #platform .tile--wide.stk .stkmark text{font-size:clamp(300px,52vw,640px)!important}
.home-refresh #platform .tile--wide.stk .stkmark__beam{-webkit-mask:linear-gradient(to bottom,transparent 0,#000 22%,#000 100%);mask:linear-gradient(to bottom,transparent 0,#000 22%,#000 100%)}
@media (max-width:809.98px){.home-refresh #platform .tile--wide.stk .stkmark text{font-size:clamp(220px,70vw,460px)!important}}
.home-refresh .tile--flow.tile--flow{position:relative!important}
.home-refresh .ha__road{z-index:1}
/* the light window on the wordmark is the SVG mask again (a CSS mask had
   replaced it and lit every contour at once) */
.home-refresh #platform .tile--wide.stk .stkmark__beam{-webkit-mask:url(#stkBeamMask);mask:url(#stkBeamMask)}
/* ruler: room between the line and the words, and an entrance: the line is
   drawn left to right, the categories settle onto it one after another */
.home-refresh #integrations .ints__kinds.ints__kinds > li{padding:0 14px!important;margin:0!important}
.home-refresh #integrations .ints__kinds::before{transform:scaleX(0);transform-origin:left center;transition:transform .9s var(--ease) .1s}
.home-refresh #integrations .tile--ints.is-in .ints__kinds::before{transform:scaleX(1)}
.home-refresh #integrations .ints__kinds.ints__kinds > li{opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .5s var(--ease)}
.home-refresh #integrations .tile--ints.is-in .ints__kinds.ints__kinds > li{opacity:1;transform:none}
.home-refresh #integrations .tile--ints.is-in .ints__kinds > li:nth-child(1){transition-delay:.15s}
.home-refresh #integrations .tile--ints.is-in .ints__kinds > li:nth-child(2){transition-delay:.27s}
.home-refresh #integrations .tile--ints.is-in .ints__kinds > li:nth-child(3){transition-delay:.39s}
.home-refresh #integrations .tile--ints.is-in .ints__kinds > li:nth-child(4){transition-delay:.51s}
.home-refresh #integrations .tile--ints.is-in .ints__kinds > li:nth-child(5){transition-delay:.63s}
.home-refresh #integrations .tile--ints.is-in .ints__kinds > li:nth-child(6){transition-delay:.75s}
.home-refresh #integrations .tile--ints.is-in .ints__kinds > li:nth-child(7){transition-delay:.87s}
@media (prefers-reduced-motion:reduce){.home-refresh #integrations .ints__kinds::before,.home-refresh #integrations .ints__kinds.ints__kinds > li{transition:none;transform:none;opacity:1}}
/* the drawn window: no shadow while the pencil works; when the outline is
   closed the whole card appears at once, paper, content and shadow */
.home-refresh .ha--flow .ha__card:first-child::after{transition:opacity .3s var(--ease) .85s}
.home-refresh .tile--flow .viz.viz{position:relative}
/* Wordmark fragment back to its original cut (middle of the word, letters
   through every edge). On phones the stage is taller than 410, so the word
   is set larger there instead of leaving a band under the letters. */
.home-refresh #platform .tile--wide.stk .stkmark text{dominant-baseline:middle!important;font-size:760px!important}
@media (max-width:809.98px){.home-refresh #platform .tile--wide.stk .stkmark text{font-size:900px!important}}
/* the categories tile IS #integrations: the entrance selectors above never
   matched, so the labels stayed hidden */
.home-refresh #integrations.is-in .ints__kinds::before{transform:scaleX(1)}
.home-refresh #integrations.is-in .ints__kinds.ints__kinds > li{opacity:1;transform:none}
.home-refresh #integrations.is-in .ints__kinds > li:nth-child(1){transition-delay:.15s}
.home-refresh #integrations.is-in .ints__kinds > li:nth-child(2){transition-delay:.27s}
.home-refresh #integrations.is-in .ints__kinds > li:nth-child(3){transition-delay:.39s}
.home-refresh #integrations.is-in .ints__kinds > li:nth-child(4){transition-delay:.51s}
.home-refresh #integrations.is-in .ints__kinds > li:nth-child(5){transition-delay:.63s}
.home-refresh #integrations.is-in .ints__kinds > li:nth-child(6){transition-delay:.75s}
.home-refresh #integrations.is-in .ints__kinds > li:nth-child(7){transition-delay:.87s}
/* Use-case panel, less on it: green stays for the selected label and the
   outcome; the icons and their tick frames go to ink, the LINES OF BUSINESS
   label to grey */
.home-refresh #use-cases .tabs__panel.tabs__panel .caps li .cap__ico{color:var(--ink)!important}
.home-refresh #use-cases .tabs__panel.tabs__panel .caps li .cap__ico::before{opacity:.28}
.home-refresh #use-cases .seg__lines-label{color:var(--muted)!important}
/* the road runs under the cards, never over them */
.home-refresh .ha__road{z-index:0!important;transition:none}
.home-refresh .ha--flow [data-track]{position:relative;z-index:1}
.home-refresh .ha__road{display:none!important}
/* TPAs in the palette: no clay. Warm grey tone for its labels and tab, a
   sand plate with deep-green figure for its outcome */
.home-refresh #use-cases .tabs__panel--tpas{--seg-tone:#4a4842;--plate-a:#e9e0ce;--plate-b:#e9e0ce;--plate-fig:#06251c;--plate-cap:rgba(16,16,16,.72);--plate-lab:rgba(16,16,16,.55)}
.home-refresh.home-refresh #use-cases .tabs__tab:nth-child(2)[aria-selected="true"]{color:var(--ink)!important}
.home-refresh.home-refresh #use-cases .tabs__tab:nth-child(2)[aria-selected="true"]::before{background:#4a4842!important}
.home-refresh #use-cases .tabs__panel--tpas.tabs__panel .segfig__bar{background:rgba(16,16,16,.12)!important}
.home-refresh #use-cases .tabs__panel--tpas.tabs__panel .segfig__bar i{background:#0f4a38!important}
.home-refresh #use-cases .tabs__panel--tpas.tabs__panel .segrow--stat{box-shadow:0 1px 2px rgba(16,16,16,.06),0 14px 30px -16px rgba(16,16,16,.22)!important}
/* Three segments, three greens from the palette and nothing else:
   Carriers Strada green, TPAs green700 on a green700→800 plate, Brokers
   green800 on the dark sage plate */
.home-refresh #use-cases .tabs__panel--carriers{--seg-tone:#00b585}
.home-refresh.home-refresh #use-cases .tabs__tab:nth-child(1)[aria-selected="true"]::before{background:#00b585!important}
.home-refresh #use-cases .tabs__panel--tpas{--seg-tone:#007a57;--plate-a:#007a57;--plate-b:#0f4a38;--plate-fig:#dce7e0;--plate-cap:rgba(242,241,237,.8);--plate-lab:rgba(242,241,237,.62)}
.home-refresh.home-refresh #use-cases .tabs__tab:nth-child(2)[aria-selected="true"]{color:#007a57!important}
.home-refresh.home-refresh #use-cases .tabs__tab:nth-child(2)[aria-selected="true"]::before{background:#007a57!important}
.home-refresh #use-cases .tabs__panel--tpas.tabs__panel .segfig__bar{background:rgba(242,241,237,.18)!important}
.home-refresh #use-cases .tabs__panel--tpas.tabs__panel .segfig__bar i{background:#8fe3c6!important}
.home-refresh #use-cases .tabs__panel--tpas.tabs__panel .segrow--stat{box-shadow:0 1px 2px rgba(6,37,28,.18),0 14px 30px -16px rgba(6,37,28,.45)!important}
/* Brokers plate light: green100, deep-green figure, so the three plates read
   dark / mid / light */
.home-refresh #use-cases :is(.tabs__panel--brokers,.tabs__panel--mgas){--plate-a:#dce7e0;--plate-b:#dce7e0;--plate-fig:#06251c;--plate-cap:rgba(16,16,16,.72);--plate-lab:rgba(16,16,16,.55)}
.home-refresh #use-cases :is(.tabs__panel--brokers,.tabs__panel--mgas).tabs__panel .segfig__bar{background:rgba(16,16,16,.12)!important}
.home-refresh #use-cases :is(.tabs__panel--brokers,.tabs__panel--mgas).tabs__panel .segfig__bar i{background:#00b585!important}
.home-refresh #use-cases :is(.tabs__panel--brokers,.tabs__panel--mgas).tabs__panel .segrow--stat{box-shadow:0 1px 2px rgba(16,16,16,.06),0 14px 30px -16px rgba(16,16,16,.22)!important}
.home-refresh #use-cases :is(.tabs__panel--brokers,.tabs__panel--mgas).tabs__panel .segrow--stat::after{display:none!important}
/* the light Brokers plate lifts like every other card */
.home-refresh #use-cases :is(.tabs__panel--brokers,.tabs__panel--mgas).tabs__panel.tabs__panel .segrow--stat{box-shadow:0 1px 2px rgba(16,16,16,.08),0 18px 40px -16px rgba(16,16,16,.32)!important}
/* one shadow on the use-case card: the panel inside carries none */
.home-refresh.home-refresh.home-refresh #use-cases .tabs__panel .seg.seg{box-shadow:none!important}
/* Flow cards, by class not position. Every card: white, lifted, rises in.
   The one marked --draw: outlined in pencil first, no shadow at all while
   that happens, then paper, content and shadow arrive together. */
.home-refresh.home-refresh.home-refresh .ha--flow.ha--flow .ha__track.ha__track .ha__card.ha__card.ha__card{
  background:#fff!important;border-color:rgba(16,16,16,.10)!important;box-shadow:var(--lift)!important;
  opacity:0!important;transform:translateY(14px)!important;transition:opacity .45s var(--ease) .2s,transform .5s var(--ease) .2s!important}
.home-refresh.home-refresh.home-refresh .ha--flow.ha--flow .ha__track.ha__track .ha__card.ha__card.ha__card.is-in{opacity:1!important;transform:none!important}
.home-refresh.home-refresh.home-refresh .ha--flow.ha--flow .ha__track.ha__track .ha__card.ha__card.ha__card > :not(.ha__trace){opacity:1!important;transition:none!important}
.home-refresh .ha--flow .ha__card .ha__trace{display:none}
.home-refresh .ha--flow .ha__card::after{display:none}
/* the drawn one */
.home-refresh.home-refresh.home-refresh .ha--flow.ha--flow .ha__track.ha__track .ha__card.ha__card.ha__card--draw{
  opacity:1!important;transform:none!important;background:transparent!important;border-color:transparent!important;box-shadow:none!important;
  transition:background .3s var(--ease) .85s,border-color .3s var(--ease) .85s,box-shadow .3s var(--ease) .85s!important}
.home-refresh.home-refresh.home-refresh .ha--flow.ha--flow .ha__track.ha__track .ha__card.ha__card.ha__card--draw.is-in{background:#fff!important;border-color:rgba(16,16,16,.10)!important;box-shadow:var(--lift)!important}
.home-refresh.home-refresh.home-refresh .ha--flow.ha--flow .ha__track.ha__track .ha__card.ha__card.ha__card--draw > :not(.ha__trace){opacity:0!important;transition:opacity .3s var(--ease) .85s!important}
.home-refresh.home-refresh.home-refresh .ha--flow.ha--flow .ha__track.ha__track .ha__card.ha__card.ha__card--draw.is-in > :not(.ha__trace){opacity:1!important}
.home-refresh .ha--flow .ha__card--draw .ha__trace{display:block}
/* the lift rule carries an id (#use-cases) in its :is(), so the drawn card
   needs one too to lose its shadow while the pencil works */
.home-refresh #platform .ha--flow .ha__card.ha__card--draw{box-shadow:none!important;transition:background .3s var(--ease) .85s,border-color .3s var(--ease) .85s,box-shadow .3s var(--ease) .85s!important}
.home-refresh #platform .ha--flow .ha__card.ha__card--draw.is-in{box-shadow:var(--lift)!important}
/* Drawn window, timing: the pencil finishes first (0.2→0.85s), and only
   then the paper, the content and the shadow arrive together. The shadow is
   a layer under the card, faded in, so nothing can leak it early. */
.home-refresh #platform .ha--flow .ha__card.ha__card--draw,
.home-refresh #platform .ha--flow .ha__card.ha__card--draw.is-in{box-shadow:none!important;transition:background .3s var(--ease) .9s,border-color .3s var(--ease) .9s!important}
.home-refresh #platform .ha--flow .ha__card.ha__card--draw::after{content:"";display:block;position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;box-shadow:var(--lift);opacity:0;transition:opacity .3s var(--ease) .9s}
.home-refresh #platform .ha--flow .ha__card.ha__card--draw.is-in::after{opacity:1}
.home-refresh.home-refresh.home-refresh .ha--flow.ha--flow .ha__track.ha__track .ha__card.ha__card.ha__card--draw > :not(.ha__trace){transition:opacity .3s var(--ease) .9s!important}
.home-refresh .ha--flow .ha__trace path{transition:stroke-dashoffset .65s var(--ease) .2s,opacity .25s var(--ease) 1s}
.home-refresh #platform .tile--wide.stk .stkmark text{font-size:var(--stk-fs,760px)!important}
@media (max-width:809.98px){.home-refresh #platform .tile--wide.stk .stkmark text{font-size:var(--stk-fs,900px)!important}}
/* Read their story: the page's arrow link, not a boxed button */
.home-refresh .tcard__cta.btn{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;color:var(--green-deep,#0f4a38)!important;font-size:16px;font-weight:450;border-radius:0}
.home-refresh .tcard__cta.btn::after{content:"→";margin-left:8px;display:inline-block;transition:transform var(--t-fast) var(--ease)}
.home-refresh .tcard__cta.btn:hover::after{transform:translateX(3px)}
/* Email mock: the sender gets a face, not initials */
.home-refresh .platform .lv__ava{background:url("../img/sarah.avif") center/cover no-repeat!important;color:transparent!important;border-radius:50%!important;width:22px;height:22px;flex:0 0 22px;overflow:hidden}
/* Capability cells: on the same left edge as the column label, and air
   between the tick frame and the title */
.home-refresh .tabs__panel .caps li{padding-left:0!important;padding-right:24px!important}
.home-refresh .tabs__panel .caps li .cap__ico{margin:6px 0 10px 9px!important}
.home-refresh .platform .lv__ava{background-image:url("../img/sarah.avif")!important}
/* scale hygiene: the caplist stays 14px on tablet (13 is not a step); the
   typed field bars in the NO API mock carry no bold weight */
.home-refresh .feature-copy .caplist li{font-size:14px!important}
.home-refresh .brw__body .f1,.home-refresh .brw__body .f2{font-weight:400}
/* tile titles sit on the 32 step of the scale (28 and 30 were not steps) */
.home-refresh .tile__title,.home-refresh .feature-copy .tile__title{font-size:32px!important;line-height:1.2!important;letter-spacing:-.9px!important}
@media (max-width:809.98px){.home-refresh .tile__title,.home-refresh .feature-copy .tile__title{font-size:32px!important}}
.home-refresh #platform .stk__title{font-size:32px!important;line-height:1.2!important;letter-spacing:-.9px!important}
/* scale: the smallest step is 10, not 11 (her call) */
.home-refresh #integrations .ints__kinds.ints__kinds > li{font-size:10px!important}
/* the light on the wordmark starts when the stage comes into view, from the
   first letter, and stops when it leaves; it no longer runs from page load */
.home-refresh #platform .tile--wide.stk .stkmark__win{animation:none}
.home-refresh #platform .tile--wide.stk .stk__stage.is-seen .stkmark__win{animation:stkBeam 7s linear .2s infinite}
/* the light Brokers plate sits flat, no shadow (her call) */
.home-refresh #use-cases :is(.tabs__panel--brokers,.tabs__panel--mgas).tabs__panel.tabs__panel .segrow--stat{box-shadow:none!important}
/* First Connect photo: keep her hand and the diagram in the portrait crop */
.home-refresh .tcard__photo img[src*="photo-3c"]{object-position:62% 50%}
/* Foxquilt photo: the man on the phone sits right of centre */
.home-refresh .tcard__photo img[src*="photo-2b"]{object-position:72% 50%}
/* Testimonial photos: a darker scrim everywhere so the quote always reads,
   deepest behind the text at the bottom, the faces still visible above */
.home-refresh .tcard__photo img{filter:brightness(.78) saturate(.92)!important}
.home-refresh .tcard__pre{background:linear-gradient(180deg,rgba(6,18,14,.18) 0%,rgba(6,18,14,.42) 42%,rgba(6,18,14,.78) 100%)!important}
/* the darkening is for the footage only: the video gets it too, the white
   customer logo inside the quote overlay does not */
.home-refresh .tcard__photo img{filter:none!important}
.home-refresh .tcard__photo > img,.home-refresh .tcard__photo > video{filter:brightness(.78) saturate(.92)!important}
.home-refresh .tcard__photo img[src*="photo-2b"]{object-position:66% 50%}
/* customer logos on the testimonial footage are white, one tone for all four */
.home-refresh .tcard__photo .tcard__taglogo{filter:brightness(0) invert(1)!important;opacity:.95}

/* ── The footer wordmark runs the full width ──────────────────────────────
   It was set to the content shell, so the word stopped short of both page
   edges and read as a stray graphic. It is the page's baseline: the "s"
   starts on the left edge and the last "a" ends on the right one. 41.125vw
   is the size at which this face sets "strada" to exactly 100vw at the
   letter-spacing below; the box still clips, so a rounding error never
   opens a scrollbar. */
.home-refresh .footer__ghost{
  /* it lines up with the page, not with the screen: the ink starts on the
     same left edge as the footer's logo and ends on the same right edge as
     the last column, so the word is the width of the content column.
     2.39932em is the measured ink width of "strada" at this weight and
     letter-spacing, so dividing the column by it gives the size. */
  max-width:var(--shell,1200px)!important;padding:0!important;
  margin:0 auto!important;
  justify-content:flex-start!important;
  /* measured, not guessed: at this weight and letter-spacing the ink of
     "strada" is 2.39932em wide and starts .0322em right of the text origin,
     so 41.68vw sets it to exactly 100vw and the span is pulled back by that
     .0322em to put the s on the left edge. */
  font-size:calc(min(100vw - 2 * var(--pad-x,40px), var(--shell,1200px)) / 2.39932)!important;
}
.home-refresh .footer__ghost span{letter-spacing:-.055em!important;margin-left:-.0322em}

/* The wordmark is the footer's bottom edge: the section padding under it only
   left a band of empty green. */
.home-refresh .footer{padding-bottom:0!important}

/* ── The wordmark stays drawn and cut (her call) ──────────────────────────
   Thomas read the hatched outline as a mistake and asked for the solid fill
   back; she prefers the drafted one, cut through by the page edge, and that
   is the version the whole site keeps. The band is .4em of a 41.68vw
   setting, so the letters are sliced at their waist and run edge to edge. */
.home-refresh .footer__ghost{height:.4em!important}
.home-refresh .footer__ghost span{
  color:transparent!important;-webkit-text-fill-color:transparent!important;
  -webkit-text-stroke:1px rgba(242,241,237,.16);
  background-image:repeating-linear-gradient(-45deg,
    rgba(242,241,237,.085) 0 1px,
    rgba(242,241,237,0) 1px 7px)!important;
  -webkit-background-clip:text;background-clip:text;
}

/* ── Recognition: the marks that only exist on white ──────────────────────
   WSIA and INA ship on a white plate. Multiplied against the paper the white
   drops out, so they sit on the wall like the others: grey at rest, their
   own colour on hover, the same as InsurTech NY. */
.home-refresh .awgrid__blend{mix-blend-mode:multiply}
.home-refresh .awgrid--members .awgrid__cell img[alt="Insurance Networks Alliance"]{max-height:30px}

/* ── The browser mock's Continue is part of the picture ───────────────────
   It read as a real call to action sitting in the middle of the page. It is
   the target the automation cursor presses, so it stays visible, but as a
   drawn control: paper, one hairline, no fill and nothing to click. */
.home-refresh .brw__btn{
  background:var(--surface,#f7f6f2)!important;color:var(--ink2,#4a4842)!important;
  border:1px solid var(--line)!important;box-shadow:none!important;
  pointer-events:none;cursor:default;
}

/* ── The closing card takes the second colour (Thomas) ────────────────────
   Two green blocks in a row was the objection to green; white was the answer
   and it read as nothing. Sand is the one warm token in the palette, so the
   card is a sand plate on paper: the page's last block is the only one that
   is not paper or green. */
.home-refresh .ctacard{
  /* the sand token itself, not a new shade of it */
  background:var(--sand,#e9e0ce)!important;
  border:1px solid rgba(12,10,8,.10)!important;
}
.home-refresh .ctacard__field{opacity:.5}

/* ── Use cases: the two halves are told apart (Thomas, then her call) ─────
   Conversational and Agentic looked identical: same green mark, same green
   icons, so the split carried no meaning. The back office half now takes a
   plum — the first colour outside the sixteen tokens, added on her word
   because it separates the two halves faster than a second green could.
   It is kept quiet: a light plum plate under the label, a deep plum for the
   label and the icons, nothing else on the page changes.
   The sweep is painted by mark.sel::before, not by the mark's background. */
 /* one violet, not a family: the same dark value for type, icons and marks,
    and the plate is that value at low alpha so it never turns pink */
.home-refresh{--violet:#4b3a8f;--plum:#4b3a8f;--plum-deep:#4b3a8f;--plum-plate:rgba(30,90,168,.15)}
.home-refresh #use-cases .tabs__panel .seg__right .segrow__label{color:var(--plum-deep)!important}
.home-refresh #use-cases .tabs__panel .seg__right .segrow__label mark.sel{color:var(--plum-deep)!important}
.home-refresh #use-cases .tabs__panel .seg__right .segrow__label mark.sel::before{
  background-color:var(--plum-plate)!important;
}
.home-refresh #use-cases .tabs__panel.tabs__panel .seg .caps li .cap__ico{color:#007a57!important}
.home-refresh #use-cases .tabs__panel.tabs__panel .seg__right .caps li .cap__ico{color:var(--plum)!important}

/* ── The channel mocks play a whole exchange (Thomas) ─────────────────────
   Two lines each read as a fragment; the point is that Strada finishes the
   job, so every channel now runs to its resolution. Same parts, more of
   them: the call is a short transcript with Strada's turns in green, the
   two messaging channels run four bubbles, and the email carries the reply
   that closed it. */
.home-refresh .lv--voice .lv__line{margin:0 0 7px}
.home-refresh .lv--voice .lv__line:last-of-type{margin-bottom:0}
.home-refresh .lv__line--ai{color:#0f4a38!important;padding-left:12px;position:relative}
.home-refresh .lv__line--ai::before{
  content:"";position:absolute;left:0;top:.45em;width:3px;height:calc(100% - .9em);
  background:#00b585;border-radius:2px;
}
.home-refresh .lv__reply{
  margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line);
  font-size:13.5px!important;line-height:20px;color:var(--muted);
}
.home-refresh .lv__replytag{
  display:inline-block;margin-right:8px;
  font-size:11px;font-weight:450;letter-spacing:.06em;text-transform:uppercase;color:#0f4a38;
}
/* the messaging panels hold four bubbles now */
.home-refresh :is(.lv--sms,.lv--chat){gap:0}
.home-refresh .platform :is(.lv--sms,.lv--chat) .lv__bub{margin-top:16px}
.home-refresh .platform :is(.lv--sms,.lv--chat) .lv__bub:first-child{margin-top:0}
.home-refresh .lv__src{margin-top:14px}

/* ── The channels run long enough to be read ──────────────────────────────
   Four tabs on an 11s loop gave each channel 2.75s, which is not enough for
   a four-line exchange. The loop is 18s, so every channel holds for 4.5s,
   and the fourth and fifth fragments get their own step on the stagger —
   without them they arrived on the first fragment's delay. */
.home-refresh .live{--loop:18s;--step:4.5s}
.home-refresh .lv>*:nth-child(4){animation-delay:calc(var(--i) * var(--step) + .76s)!important}
.home-refresh .lv>*:nth-child(5){animation-delay:calc(var(--i) * var(--step) + .98s)!important}

/* ── The complementary colour, used as one (her call) ─────────────────────
   Rather than a third beige or a fifth green, the page's second accent is
   the lilac the use cases introduced. It carries the closing card, which
   was the one block that had no colour of its own. */
/* The lilac is the use cases' accent, not a ground: on the closing plate it
   reads as pale pink. The card keeps the cooler sand. */

/* ── The channel mock, driven (convo-0911.js) ─────────────────────────────
   With the driver in place the CSS loops step aside: the script decides what
   is on screen, so the tab, the caption, the panel and every fragment are
   states, not keyframes. */
.home-refresh .live.js-convo :is(.live__tabs span,.live__ink,.live__say span,.lv,.lv>*){animation:none!important}
.home-refresh .live.js-convo .live__tabs span{color:var(--muted);transition:color .3s var(--ease)}
.home-refresh .live.js-convo .live__tabs span.is-on{color:var(--green-deep,#0f4a38)}
.home-refresh .live.js-convo .live__ink{transform:translateX(calc(var(--tab,0) * 100%));transition:transform .45s var(--ease)}
.home-refresh .live.js-convo .live__say span{opacity:0;transform:translateY(6px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.home-refresh .live.js-convo .live__say span.is-on{opacity:1;transform:none}
.home-refresh .live.js-convo .lv{opacity:0}
.home-refresh .live.js-convo .lv.is-on{opacity:1}
.home-refresh .live.js-convo .lv>*{opacity:0;transform:translateY(5px)}
.home-refresh .live.js-convo .lv>*.is-in{
  opacity:1;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease);
}

/* someone is typing: the same bubble, three dots in it */
.home-refresh .lv__typing-bub{display:inline-flex!important;align-items:center;gap:5px;min-height:0;
  padding:11px 14px!important;width:auto!important;max-width:none!important}
.home-refresh .lv__typing-bub s{
  width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.45;text-decoration:none;
  animation:convoDot 1.1s var(--ease) infinite;
}
.home-refresh .lv__typing-bub s:nth-child(2){animation-delay:.15s}
.home-refresh .lv__typing-bub s:nth-child(3){animation-delay:.3s}
@keyframes convoDot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

/* the email is picked up before it is answered */
.home-refresh .lv__working{
  display:flex;align-items:center;gap:6px;margin:10px 0 0;
  font-size:12.5px!important;line-height:18px;color:#0f4a38;
}
.home-refresh .lv__working s{
  width:5px;height:5px;border-radius:50%;background:#00b585;text-decoration:none;
  animation:convoDot 1.1s var(--ease) infinite;
}
.home-refresh .lv__working s:nth-child(2){animation-delay:.15s}
.home-refresh .lv__working s:nth-child(3){animation-delay:.3s;margin-right:4px}

/* the channel tabs are switched by hand as well as by the loop */
.home-refresh .live.js-convo .live__tabs span{cursor:pointer}
.home-refresh .live.js-convo .live__tabs span:hover{color:var(--ink)}
.home-refresh .live.js-convo .live__tabs span.is-on:hover{color:var(--green-deep,#0f4a38)}
.home-refresh .live.js-convo .live__tabs span:focus-visible{outline:2px solid #00b585;outline-offset:2px;border-radius:2px}

/* ── No connectors between blocks. Her instruction, permanent. ────────────
   The routed line that ran from one tile to the next is gone: the JS that
   built it returns early, and anything left over is hidden here so it can
   never come back through a cached script. */
.home-refresh .proute{display:none!important}

/* the line between the hero cards goes too: no connectors anywhere */
.home-refresh :is(.hero .ha,.ha--flow) .ha__card + .ha__card::before{
  content:none!important;display:none!important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Palette lock (her call)
   The site had drifted to sixty distinct colours. It runs on four and their
   neutrals: the bright green, the deep green, the dark violet for the
   agentic half, and paper/ink/muted/line. Everything that had wandered off
   is mapped back here rather than left to accumulate — the near-greens
   (#eef3ef, #dce7e0) become the one quiet surface, the odd greys become the
   two line values, and the violet is a single value everywhere.
   Green and violet are never decoration: green is Strada acting or a thing
   that is done, violet is the agentic back office. Nothing else is tinted.
   ══════════════════════════════════════════════════════════════════════════ */
.home-refresh{
  --green:#00b585;        /* the bright one */
  --green-mid:#007a57;
  --green-deep:#0f4a38;
  --green-darkest:#06251c;
  --mint:#8fe3c6;         /* only on the dark grounds */
  --violet:#4b3a8f;       /* the agentic accent, one value */
  --violet-plate:rgba(30,90,168,.15);
}
/* the two near-greens collapse into one quiet surface */
.home-refresh :is(.tline,.tline__bar,.perm,.chart){background-color:var(--surface,#f7f6f2)!important}
.home-refresh .ha__avatar{background-color:var(--line-strong,#c9c6bf)!important}

/* ══════════════════════════════════════════════════════════════════════════
   Where green goes and where violet goes
   One rule, so a visitor never has to work it out:
     GREEN  — the conversation. Anything the customer hears, reads or writes,
              and anything Strada says back: voice, SMS, email, chat, the
              live call, the replies, the Conversational half of the use
              cases. A green check also means one thing everywhere: done.
     VIOLET — the work inside your systems. What the agent does after the
              conversation: records changed, claims opened, rules composed,
              policy admin updated — the Agentic half of the use cases and
              the Workflows section of the platform page.
     NEITHER — a handoff to a person. Escalation is a human moment, so it
              stays in ink, with green only on what Strada already finished.
   Nothing else on the site is tinted.
   ══════════════════════════════════════════════════════════════════════════ */

/* the agentic tile on the home page is work in your systems */
.home-refresh .tile--flow .tile__title b{color:var(--violet,#1e5aa8)}
.home-refresh .tile--flow .caplist .cap__ico,
.home-refresh .tile--flow .caplist li::before{color:var(--violet,#1e5aa8)}
.home-refresh .tile--flow .agraph__io b,
.home-refresh .tile--flow .agraph__tag{color:var(--violet,#1e5aa8)}

/* escalation hands work to a person: ink, not a category colour */
.home-refresh .esc2__why{color:var(--ink)!important;border-color:var(--line-strong,#c9c6bf)!important}
.home-refresh .esc2__ava{background:rgba(16,16,16,.06)!important;color:var(--ink2,#4a4842)!important}

/* ── The rule, applied inside the block as well ───────────────────────────
   A block is either the conversation or the work in your systems, and
   everything inside it takes that block's colour. The agentic tile was
   violet on the outside and green on the inside, which is what made it read
   as a mistake: its checks, its rail, its mark and its chips are violet too.
   The only green left in an agentic block is nothing at all. */
.home-refresh .tile--flow .ha--flow svg{color:var(--violet,#1e5aa8)!important}
.home-refresh .tile--flow .ha__card--status{border-left-color:var(--violet,#1e5aa8)!important}
.home-refresh .tile--flow .ha__mark{background:var(--violet,#1e5aa8)!important}
.home-refresh .tile--flow .ha__chip{
  color:var(--violet,#1e5aa8)!important;border-color:var(--violet,#1e5aa8)!important;
}
.home-refresh .tile--flow :is(.ha__rows,.ha__panel) svg,
.home-refresh .tile--flow .ha__row i{color:var(--violet,#1e5aa8)!important}

/* ── The agentic tile is violet all the way through ───────────────────────
   Naming the parts one by one left green in the mock: the running chip, the
   check discs, the Strada mark, the card's left rail and the svg strokes.
   The block sets its own colour on every mark inside it. */
.home-refresh .tile--flow{--green:#1e5aa8;--green-deep:#1e5aa8;--accent-ink:#1e5aa8}
.home-refresh .tile--flow :is(.ha__ok,.ha__chip,.ha__mark,.ha__card,.caplist li,.caplist li::before){
  --green:#1e5aa8;--green-deep:#1e5aa8;
}
.home-refresh .tile--flow .ha__mark{background:var(--violet,#1e5aa8)!important}
.home-refresh .tile--flow .ha__card{border-left-color:var(--violet,#1e5aa8)!important}
.home-refresh .tile--flow :is(.ha__ok,.ha__chip){
  color:var(--violet,#1e5aa8)!important;border-color:var(--violet,#1e5aa8)!important;
}
.home-refresh .tile--flow .ha__ok::before,
.home-refresh .tile--flow .ha__ok::after,
.home-refresh .tile--flow .ha__chip::before,
.home-refresh .tile--flow .ha__chip::after{
  color:var(--violet,#1e5aa8)!important;border-color:var(--violet,#1e5aa8)!important;
}
.home-refresh .tile--flow svg{stroke:var(--violet,#1e5aa8)!important}
.home-refresh .tile--flow svg [fill]:not([fill="none"]){fill:var(--violet,#1e5aa8)!important}
/* the capability ticks beside the copy belong to the same block */
.home-refresh .tile--flow .caplist li::before{background-color:var(--violet,#1e5aa8)!important}

/* ── Two violets, mirroring the two greens ────────────────────────────────
   The palette works in pairs: a bright mark colour and a deep type colour.
   Green is #00b585 for marks and #0f4a38 for type; the violet answers it at
   the same two levels — #2a6bb8 for marks, #1e5aa8 for type — so the accent
   sits with the bright green instead of fighting it. */
.home-refresh{--violet-bright:#2a6bb8}
.home-refresh .tile--flow .ha__mark,
.home-refresh .tile--flow span.ha__mark,
.home-refresh .tile--flow .ha__card .ha__mark{background:var(--violet-bright)!important}
.home-refresh .tile--flow :is(.ha__ok,.ha__chip){
  color:var(--violet)!important;border-color:var(--violet-bright)!important;
}
.home-refresh .tile--flow .ha__card{border-left-color:var(--violet-bright)!important}
.home-refresh .tile--flow li{background-color:transparent!important}
.home-refresh .tile--flow .caplist li::before{background-color:var(--violet-bright)!important}
/* the same pairing in the platform's agentic windows */
.home-refresh #platform .tile--wide.stk .stgx__ok i{background:var(--violet-bright)!important}
.home-refresh #platform .tile--wide.stk .stgx__rail .is-now{background:var(--violet-bright)!important}
.home-refresh #platform .tile--wide.stk .stgx__seq .is-now::before{
  background:var(--violet-bright)!important;border-color:var(--violet-bright)!important;
}
.home-refresh #platform .tile--wide.stk .stgx__wave i{background:rgba(42,107,184,.5)!important}
.home-refresh #platform .tile--wide.stk .stgx__rule .is-picked{
  border-color:var(--violet-bright)!important;box-shadow:0 0 0 3px rgba(42,107,184,.14)!important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Amir's comments, 13 Sep
   ══════════════════════════════════════════════════════════════════════════ */

/* 16 · 17 · his two notes on this block read together: the title is the line
   he wrote, and "Strada still works" is the green line under it, ahead of
   the description. The title goes back to ink, because the green now sits
   where he asked for it. */
.home-refresh .noapi__title{color:var(--ink)}
.home-refresh .noapi__lead{
  margin:14px 0 0!important;font-size:20px!important;line-height:28px!important;
  letter-spacing:-.2px;color:var(--green-deep,#0f4a38)!important;
}
.home-refresh .noapi__lead + p{margin-top:12px!important}

/* 13 · the stories link is the section's action, so it is a button — the
   ghost one, because the green button belongs to the closing card and this
   should not compete with it. The arrow goes: our buttons do not carry one. */
.home-refresh .results__cta{
  /* the head is a grid, so it needs justify-self, not align-self, or the
     button stretches the whole column */
  justify-self:start;align-self:start;width:-moz-fit-content;width:fit-content;margin-top:26px;
  padding:12px 24px!important;font-size:15px!important;line-height:22px!important;font-weight:450;
}

/* 2 · 10 · 26 · the customer logos carry the hero: half again as large, in
   their own colours, and one optical size across the recognition wall so
   WSIA stops looking like an afterthought */
.home-refresh .hero__logos .cwall__cell img{
  max-height:51px!important;max-width:222px!important;
  filter:none!important;opacity:1!important;
}
.home-refresh .hero__logos .cwall__row{gap:72px}
.home-refresh .awgrid--members .awgrid__cell img{max-height:40px!important;max-width:168px!important}
.home-refresh .awgrid--press .awgrid__cell img{max-height:30px!important}

/* ══════════════════════════════════════════════════════════════════════════
   The agentic accent becomes Amir's blue (comments 8 and 27)
   He asked for #66C5ED and said himself it might be too light — it is: on
   our paper it lands at 1.7:1, so it cannot carry type or a mark. It is kept
   where it works, as the highlight plate, and the same hue is taken deeper
   for everything that has to read: #1a7fa8 for marks, #146283 for type
   (4.0:1 and 6.0:1 on paper). The closing card takes the palest wash of the
   same family, which answers his other note — it is no longer beige.
   The violet values stay defined above; flipping these four lines back is
   all it takes to return to it.
   ══════════════════════════════════════════════════════════════════════════ */
.home-refresh{
  /* his hue sat at 198, which next to our green still reads teal, so the two
     working values move to 214 — unmistakably blue, and still his family */
  --blue:#1e5aa8;--blue-bright:#2a6bb8;
  --blue-plate:rgba(102,197,237,.40);--blue-wash:#e9f2f7;
  /* the agentic half now reads in blue */
  --violet:#1e5aa8;--violet-bright:#2a6bb8;--plum:#1e5aa8;--plum-deep:#1e5aa8;
  --plum-plate:rgba(102,197,237,.40);
}
/* the label you see is the pseudo-element's own text (content:attr(data-t)),
   so colouring the mark itself changed nothing visible — the glyphs take
   their colour here, and they were still the deep green from line 1122 */
.home-refresh #use-cases .tabs__panel .seg__right .segrow__label mark.sel::before{
  background-color:var(--blue-plate)!important;
  color:var(--blue,#1e5aa8)!important;
}
.home-refresh .ctacard{
  background:var(--blue-wash)!important;
  border:1px solid rgba(20,98,131,.16)!important;
}

/* ── The messaging panels stopped cutting their first avatar (comment 7) ──
   The sender's picture sits 25px above its bubble, and the stack was centred
   in the panel, so the very first avatar was sliced by the panel's top edge.
   The two messaging channels now start from the top with room for it, and
   the gap between bubbles gives back what the padding took.
   The customer is a different person on each channel, as he asked. */
.home-refresh .live__viz :is(.lv--sms,.lv--chat){align-items:flex-start!important;padding-top:30px}
.home-refresh .platform :is(.lv--sms,.lv--chat) .lv__bub{margin-top:13px}
.home-refresh .platform :is(.lv--sms,.lv--chat) .lv__bub:first-child{margin-top:0}
.home-refresh :is(.lv--sms,.lv--chat) .lv__bub:first-child{margin-top:0}
/* The customer in every mock is Sarah, the same face the home page hero
   uses. The testimonial photos are real customers of theirs — putting them
   into a product animation would show named people saying things they never
   said, so they never appear outside their own quote. */
.home-refresh .platform :is(.lv--sms,.lv--chat) .lv__bub--in::before{
  background-image:url("../img/sarah.avif")!important;
}
.home-refresh .lv--email .lv__ava{background-image:url("../img/sarah.avif")!important}

/* the third tab's plate already carries no shadow (line ~2883); the two dark
   plates keep theirs, where a shadow is what lifts them off the paper */

/* ── The closing block is beige again (her call, 13 Sep) ──────────────────
   It has been green, lilac, a pale blue wash and the bright green; she has
   settled on the sand token. Ink type, the green button, and the plate is
   shorter than it was — it was a full section of green for four lines. */
.home-refresh .ctacard{
  /* the same ground the channel mock already stands on, #ECEAE4: one step
     darker than the paper and with no yellow in it, so the closing block
     matches the other grounds on the site instead of introducing a beige */
  background:#eceae4!important;
  border:1px solid rgba(12,10,8,.10)!important;
}
.home-refresh .ctacard .t-h2,
.home-refresh .ctacard .t-h2 .ln{color:var(--ink)!important}
.home-refresh .ctacard .t-lead{color:var(--muted)!important}
.home-refresh .ctacard__field{opacity:.5;color:var(--ink)}
.home-refresh .ctacard .ctacard__btn{
  background:var(--green,#00b585)!important;color:#ffffff!important;border:0!important;
}
.home-refresh .ctacard:hover .ctacard__btn{background:var(--green-deep,#0f4a38)!important;color:#ffffff!important}

/* ── The messaging panels stopped cutting their first avatar (comment 7) ──
   The sender's picture sits 25px above its bubble, and the stack was centred
   in the panel, so the very first avatar was sliced by the panel's top edge.
   The two messaging channels now start from the top with room for it, and
   the gap between bubbles gives back what the padding took.
   The customer is a different person on each channel, as he asked. */
.home-refresh .live__viz :is(.lv--sms,.lv--chat){align-items:flex-start!important;padding-top:30px}
.home-refresh .platform :is(.lv--sms,.lv--chat) .lv__bub{margin-top:13px}
.home-refresh .platform :is(.lv--sms,.lv--chat) .lv__bub:first-child{margin-top:0}
.home-refresh :is(.lv--sms,.lv--chat) .lv__bub:first-child{margin-top:0}
/* The customer in every mock is Sarah, the same face the home page hero
   uses. The testimonial photos are real customers of theirs — putting them
   into a product animation would show named people saying things they never
   said, so they never appear outside their own quote. */
.home-refresh .platform :is(.lv--sms,.lv--chat) .lv__bub--in::before{
  background-image:url("../img/sarah.avif")!important;
}
.home-refresh .lv--email .lv__ava{background-image:url("../img/sarah.avif")!important}

/* the third tab's plate already carries no shadow (line ~2883); the two dark
   plates keep theirs, where a shadow is what lifts them off the paper */

/* (the bright-green close was tried and dropped: she settled on the sand) */

/* the bubbles ease in rather than snap, at the same pace as the driver */
.home-refresh .live.js-convo .lv>*{transform:translateY(7px)}
.home-refresh .live.js-convo .lv>*.is-in{
  transition:opacity .42s var(--ease),transform .42s var(--ease);
}
.home-refresh .lv__typing-bub{transition:width .3s var(--ease)}

/* ── The conversation grows, it does not sit inside its own empty frame ───
   Every bubble was in the layout from the start at opacity 0, so the panel
   was always full height with holes in it, and each new message landed in a
   gap instead of after the last one — which is what made the spacing open
   and close. Bubbles that have not been said yet are out of the flow now,
   the stack builds from the top, and the entrance is an animation rather
   than a transition because display flips from none to block. */
.home-refresh .live.js-convo :is(.lv--sms,.lv--chat){justify-content:flex-start!important}
/* home.css sets .lv__bub{display:block!important}, so the hide has to match it */
.home-refresh .live.js-convo .lv>*:not(.is-in){display:none!important}
.home-refresh .live.js-convo .lv>*.is-in{display:block;animation:convoIn .42s var(--ease) both;transform:none}
.home-refresh .live.js-convo .lv--voice>*.is-in,
.home-refresh .live.js-convo .lv--email>*.is-in{display:block}
.home-refresh .live.js-convo .lv__typing-bub{display:inline-flex!important;width:auto!important}
.home-refresh .live.js-convo .lv__wave2,
.home-refresh .live.js-convo .lv__att{display:none}
.home-refresh .live.js-convo .lv__wave2.is-in{display:flex}
.home-refresh .live.js-convo .lv__att.is-in{display:inline-flex}
@keyframes convoIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* the dots bubble is the size of three dots, not of a sentence */
.home-refresh .lv__typing-bub{
  padding:12px 14px!important;min-width:0!important;max-width:56px!important;gap:5px;
}


/* the closing block is trimmed: it was a full section of green for four
   lines of copy */
.home-refresh .ctacard{padding-top:clamp(48px,6vh,72px)!important;padding-bottom:clamp(48px,6vh,72px)!important}
/* the closing card needs room above it: with no top padding it sat 10px
   under the section before it and the two grounds met right at its edge */
.home-refresh .ctaband{
  padding-top:clamp(64px,8vh,104px)!important;
  padding-bottom:clamp(56px,7vh,96px)!important;
}

/* the trusted-by caption is a label, not an accent: grey, like the other
   quiet captions on the page */
.home-refresh .hero__logos-cap{color:var(--muted)!important}

/* (the dark green sections stay exactly as they were — reverted on her word) */
.home-refresh .why .stk__stage{background:#12553f!important}

/* ══════════════════════════════════════════════════════════════════════════
   The blue works the way the green works (her call)
   Amir's #66C5ED is the light end of a scale, not a colour on its own, so it
   gets the same four steps the green has and the same jobs at each step.
   Measured against our paper:

     role              green                 blue
     light accent      mint    #8FE3C6 1.3   #66C5ED 1.7   ← his
     bright mark       green   #00B585 2.3   #2A8FD4 3.1
     deep type         forest  #0F4A38 9.0   #17548F 6.9
     darkest ground    #06251C        14.4   #0D2B47 12.8

   Green is the conversation, blue is the agentic back office, and each side
   uses its own step for the same job: light for plates and grounds, bright
   for marks, deep for type, darkest for a dark band.
   ══════════════════════════════════════════════════════════════════════════ */
.home-refresh{
  --blue-light:#66c5ed;   /* his colour: plates, tints, fills, accents */
  --blue-mark:#1f93d6;    /* his hue, one step down so a mark holds its shape */
  --blue-type:#1e7fbf;    /* his hue, deep enough to read: 4.3:1 on white */
  --blue-dark:#0d2b47;    /* the answer to #06251C */
  --blue-plate:rgba(102,197,237,.40);
  --blue-wash:#eaf4fb;    /* the lightest ground, for an agentic block */
  /* the agentic half now runs on that scale: the visible colour is his, not a
   navy. #17548F read as a different colour entirely and she called it three
   times, so the working values stay in his hue (198-204) and only go as deep
   as legibility needs. */
  --violet:var(--blue-type);--violet-bright:var(--blue-mark);
  --plum:var(--blue-type);--plum-deep:var(--blue-type);
  --blue:var(--blue-type);--blue-bright:var(--blue-mark);
}
/* the two halves of the use cases read as two systems, not two labels */
.home-refresh #use-cases .tabs__panel .seg__right .segrow__label mark.sel::before{
  background-color:var(--blue-plate)!important;
}
.home-refresh #use-cases .tabs__panel .seg__right .segrow__label mark.sel::before,
.home-refresh #use-cases .tabs__panel .seg__right .segrow__label mark.sel{
  color:var(--blue-type)!important;
}
.home-refresh #use-cases .tabs__panel.tabs__panel .seg__right .caps li .cap__ico{color:var(--blue-type)!important}

/* the agentic tile on the home page stands on the lightest step of the blue,
   the way the conversational tile stands on sand */
.home-refresh .tile--flow{background:var(--blue-wash)!important}
.home-refresh .tile--flow .ha__mark{background:var(--blue-mark)!important}
.home-refresh .tile--flow .ha__card{border-left-color:var(--blue-mark)!important}
.home-refresh .tile--flow :is(.ha__ok,.ha__chip){
  color:var(--blue-type)!important;border-color:var(--blue-mark)!important;
}
.home-refresh .tile--flow .caplist li::before{background-color:var(--blue-mark)!important}


/* ── Layout stability ──────────────────────────────────────────────────── */
/* Images now carry their intrinsic width and height so the browser can hold
   their space before they load. height:auto keeps the aspect ratio whenever
   CSS constrains only the width. Any rule that sets a height of its own is
   more specific and still wins. */
img{height:auto}