/* ══════════════════════════════════════════════════════════════════════════
   Platform page, 11 Sep 2026.
   The page borrows the home page's own parts: the Control accordion with its
   green stage, the Conversational mock, the Impact figures and the closing
   card. Everything here is either a layout for a part that only this page
   uses, or a size that the shared sheets left off the scale. Nothing in the
   shared sheets is touched.
   Scale: 11/12/14/16/18/20/32/48 + the hero display. Colour: the sixteen
   tokens. One hairline per ground. Radii 4/3/2. One easing.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Hero ──────────────────────────────────────────────────────────────
   The label sits where the home page's counter does, so the two openings
   line up. */
.home-refresh .hero .hero__copy > .kicker{margin:0}
.home-refresh .hero .hero__copy > .kicker i{display:none}

/* ── 2 · Type the shared sheets left off the scale ─────────────────────────
   The accordion row read at 19px and its button at 17px; both are steps that
   exist nowhere else. The row title takes 20, the button 16. */
.home-refresh #platform .stk__row > button{font-size:16px!important}
.home-refresh #platform .stk__row > button b{font-size:20px!important;line-height:28px!important}

/* ── 3 · Workflows: the record on the green stage ──────────────────────────
   Five rows instead of the home page's three, so the record's last line has
   to close on the card's own edge rather than on a rule with nothing under it. */
.home-refresh #platform .aud__list{padding-bottom:4px}
.home-refresh #platform .aud__list li:last-child{border-bottom:0!important}

/* The mock's footer line is the only pair on the page that landed on 12.5. */
.home-refresh #platform .live__foot span,
.home-refresh #platform .live__foot b{font-size:12px!important}

/* ── 4 · Channels: the four channels beside the mock ───────────────────────
   The mock says which channel is live; the list beside it says what the
   channel does. Same .caps part the use cases use. */
.home-refresh .caps--chan{margin-top:26px;width:100%;border-top:1px solid var(--line)}
.home-refresh .caps--chan li:first-child{border-top:0;padding-top:16px}

/* Phosphor mark in the .caps box: a mask, so the mark takes the text colour */
.home-refresh .cap__ico--ph{position:relative;background-image:none!important;
  background-color:#fff;border:1px solid var(--line);border-radius:2px}
.home-refresh .cap__ico--ph::after{content:"";position:absolute;inset:0;margin:auto;
  width:19px;height:19px;background:var(--ink);opacity:.72;
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}

/* ── 5 · Escalation and Built for scale: two more tiles in the same road ───
   Same geometry as the Conversational and Agentic tiles: one hairline on top,
   copy on the left, the work on the right. */
.home-refresh .platform .tile--wide.esc,
.home-refresh .platform .tile--wide.psc{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;
  padding:48px 0!important;border:0;border-top:1px solid var(--line);
  border-radius:0!important;background:transparent!important;min-height:0;overflow:visible}

.home-refresh .esc__cols{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;align-self:center;min-width:0}
.home-refresh .esc__col{min-width:0}
.home-refresh .esc__col .t-eyebrow{margin:0 0 6px;color:#007a57}
.home-refresh .esc__col + .esc__col .t-eyebrow{color:var(--muted)}

.home-refresh .caps--flat li{grid-template-columns:22px 1fr;gap:14px;padding:15px 0}
.home-refresh .caps--flat li:first-child{padding-top:15px;border-top:1px solid var(--line)}
.home-refresh .caps--flat .cap__ico{width:22px;height:22px;flex-basis:22px;
  background-color:transparent;border:0;background-size:22px 22px}

.home-refresh .caps--2{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;
  align-self:center;min-width:0;width:100%}
.home-refresh .caps--2 li{padding:18px 0}
.home-refresh .caps--2 li:nth-child(1),
.home-refresh .caps--2 li:nth-child(2){border-top:0;padding-top:0}
.home-refresh .caps--2 li:first-child{padding-top:0}

/* ── 6 · Visibility: the Impact figures, six of them ───────────────────────
   Three to a row, the same thin bar under each. At six the display step is
   too loud, so the figure takes the 48 head step and the unit sits under it. */
.home-refresh #impact .figs{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 48px;
  border-top:1px solid var(--line)}
.home-refresh #impact .fig{padding:32px 0 36px!important;border:0!important}
.home-refresh #impact .fig:nth-child(n+4){border-top:1px solid var(--line)!important}
.home-refresh #impact .fig__index{margin:0 0 22px}
.home-refresh #impact .fig__num{font-size:48px!important;line-height:1.05!important;
  letter-spacing:-1.4px!important;margin:0}
.home-refresh #impact .fig__unit{display:block;margin-top:6px;
  font-size:20px;line-height:26px;font-weight:400;letter-spacing:-.2px;color:var(--ink2)}
.home-refresh #impact .fig__seg{margin:22px 0 0!important}
.home-refresh #impact .fig__cap{margin-top:16px!important;max-width:30ch}
.home-refresh #impact .fig__delta{margin:10px 0 0;font-size:14px;line-height:20px;color:var(--muted);
  display:flex;align-items:center;gap:8px}
.home-refresh #impact .fig__delta::before{content:"";width:5px;height:5px;background:var(--green);flex:0 0 5px}
.home-refresh #impact .results__link{justify-self:start}

/* ── 7 · Deployment ───────────────────────────────────────────────────────
   The tile keeps its label here: this page has no other name for the section.
   The browser mock belongs to the home page, so the four commitments take the
   right-hand side instead. */
.home-refresh #deployment .noapi .t-eyebrow{display:flex!important;margin:0 0 14px}
.home-refresh #deployment .noapi__title::before{content:none!important;display:none!important}
.home-refresh #deployment .noapi{align-items:flex-start;gap:64px!important;padding:40px 44px!important;
  border-radius:3px!important;box-shadow:none!important}
.home-refresh #deployment .noapi__copy{flex:1 1 42%;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.home-refresh #deployment .noapi__title{margin:0 0 14px}
.home-refresh #deployment .noapi__copy>p{margin:0;max-width:40ch}
.home-refresh #deployment .noapi__copy .btn{margin-top:26px}
.home-refresh .caps--dep{flex:1 1 58%;min-width:0;border-top:1px solid var(--line)}
.home-refresh .caps--dep li:first-child{border-top:0;padding-top:16px}

/* ── 8 · Between phone and desktop ────────────────────────────────────────
   Below 1000px every two-column part goes to one, the way the home page's
   tiles do. */
@media (max-width:1199.98px){
  .home-refresh .platform .tile--wide.esc,
  .home-refresh .platform .tile--wide.psc{gap:32px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .home-refresh #impact .figs{gap:0 32px}
}
@media (max-width:999.98px){
  .home-refresh .platform .tile--wide.esc,
  .home-refresh .platform .tile--wide.psc{display:flex;flex-direction:column;gap:24px;padding:32px 0!important}
  /* Once the tile stacks, the lists are still shrink-to-fit inside a column
     flex box, so they floated centred with a ragged indent. They take the
     full width and start on the copy's left edge, like every other list. */
  .home-refresh .esc__cols,
  .home-refresh .caps--2,
  .home-refresh .caps--chan,
  .home-refresh .caps--flat{align-self:stretch!important;width:100%!important}
  .home-refresh #deployment .noapi{flex-direction:column!important;gap:32px!important;padding:32px 28px!important}
  .home-refresh #platform .tile--wide.stk .stk__stage{min-height:0}
}
@media (max-width:809.98px){
  .home-refresh #impact .figs{grid-template-columns:1fr}
  .home-refresh #impact .fig,
  .home-refresh #impact .fig:nth-child(n+4){padding:24px 0 28px!important;border-top:1px solid var(--line)!important}
  .home-refresh #impact .fig:first-child{border-top:0!important;padding-top:0!important}
  .home-refresh .esc__cols{grid-template-columns:1fr;gap:28px}
  .home-refresh .caps--2{grid-template-columns:1fr;gap:0}
  .home-refresh .caps--2 li:nth-child(2){border-top:1px solid rgba(16,16,16,.07);padding-top:18px}
}
@media (max-width:599.98px){
  .home-refresh #deployment .noapi{padding:28px 20px!important}
}

/* ── 9 · Phones: the two-up lists become one column ───────────────────────*/
@media (max-width:699.98px){
  .home-refresh .esc__cols{grid-template-columns:minmax(0,1fr);gap:32px 0}
  .home-refresh .caps--2{grid-template-columns:minmax(0,1fr);gap:0}
  .home-refresh .caps--2 li:nth-child(2){border-top:1px solid var(--line);padding-top:18px}
}

/* ── 11 · The stage panel keeps its inset ─────────────────────────────────
   review-0910.css zeroes the padding of every direct child of .stk__panel
   with !important, so the panel needs a selector of its own weight. */
.home-refresh #platform .tile--wide.stk .stk__panel > .stgx{padding:24px 26px!important}
@media (max-width:999.98px){
  .home-refresh #platform .tile--wide.stk .stk__panel > .stgx{padding:20px!important}
}

/* ── 12 · Escalation and Built for scale: head above, work below ──────────
   Both tiles put a short heading in a 40% column beside a tall list, so most
   of the left half was empty. The heading now runs across the top the way
   the Impact section's does — title left, the sentence right — and the work
   takes the full width underneath. Nothing is added or removed, it is the
   same parts in the order they are read. */
.home-refresh .platform .tile--wide.esc,
.home-refresh .platform .tile--wide.psc{
  display:block!important;padding:48px 0!important;
}
.home-refresh .platform .tile--wide.esc .feature-copy,
.home-refresh .platform .tile--wide.psc .feature-copy{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:64px;row-gap:0;align-items:start;margin-bottom:clamp(32px,4vh,44px);
}
.home-refresh .platform .tile--wide.esc .t-eyebrow,
.home-refresh .platform .tile--wide.psc .t-eyebrow{grid-column:1/-1;margin:0 0 10px}
.home-refresh .platform .tile--wide.esc .tile__title,
.home-refresh .platform .tile--wide.psc .tile__title{grid-column:1;margin:0}
.home-refresh .platform .tile--wide.esc .feature-description,
.home-refresh .platform .tile--wide.psc .feature-description{
  grid-column:2;margin:0;align-self:end;max-width:46ch;
}
.home-refresh .esc__cols,
.home-refresh .platform .tile--wide.psc .caps--2{width:100%;align-self:auto}

@media (max-width:809.98px){
  .home-refresh .platform .tile--wide.esc .feature-copy,
  .home-refresh .platform .tile--wide.psc .feature-copy{grid-template-columns:minmax(0,1fr);row-gap:16px}
  .home-refresh .platform .tile--wide.esc .feature-description,
  .home-refresh .platform .tile--wide.psc .feature-description{grid-column:1}
}

/* ══════════════════════════════════════════════════════════════════════════
   13 · Workflows: five windows, one family
   Every row used to open the same checklist with different words. Each stage
   is now its own small product window — the same frame the home page's mocks
   use (chrome rail, paper body, status rail at the foot) so they read as one
   set, and a different instrument inside, because the five workflows are not
   the same work: a record being changed, an intake becoming a claim, a claim
   moving along its track, a renewal sequence closing on a payment, a rule
   being composed. One green accent each. Each draws itself on .is-fresh.
   ══════════════════════════════════════════════════════════════════════════ */
.home-refresh #platform .stgx{
  width:100%;min-height:310px;display:flex;flex-direction:column;
  background:#ffffff;border:1px solid var(--line);border-radius:2px;
  box-shadow:0 20px 50px #4a484224;overflow:hidden;
}
.home-refresh #platform .tile--wide.stk .stk__panel > .stgx{padding:0!important}

/* the chrome rail every window carries */
.home-refresh #platform .stgx__bar{
  display:flex;align-items:center;gap:8px;margin:0;
  padding:13px 18px;border-bottom:1px solid var(--line);background:var(--surface,#f7f6f2);
  font-size:12px;line-height:18px;color:var(--muted);
}
.home-refresh #platform .stgx__bar i{
  width:7px;height:7px;border-radius:50%;border:1px solid var(--line-strong,#c9c6bf);flex:0 0 7px;
}
.home-refresh #platform .stgx__bar i + i{margin-left:-2px}
.home-refresh #platform .stgx__bar span{margin-left:8px}
.home-refresh #platform .stgx__chip{
  margin-left:auto;font-weight:450;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:#0f4a38;border:1px solid var(--line);border-radius:2px;padding:3px 8px;background:#fff;
}
.home-refresh #platform .stgx__body{
  flex:1 1 auto;display:flex;flex-direction:column;gap:14px;padding:18px 20px;min-width:0;
}
.home-refresh #platform .stgx__foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0;
  padding:13px 20px;border-top:1px solid var(--line);background:var(--surface,#f7f6f2);
  font-size:12px;line-height:18px;color:var(--muted);
}
.home-refresh #platform .stgx__foot b{font-weight:450;color:var(--ink)}
.home-refresh #platform .stgx__ok{display:inline-flex;align-items:center;gap:8px}
.home-refresh #platform .stgx__ok i{
  width:14px;height:14px;flex:0 0 14px;border-radius:50%;background:#00b585;position:relative;
}
/* the tick is drawn from two borders, so its own box is not its optical
   centre: it is nudged by half a stroke on each axis inside the disc */
.home-refresh #platform .stgx__ok i::after{
  content:"";position:absolute;left:50%;top:50%;width:6px;height:3px;
  border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;
  transform:translate(-50%,-50%) rotate(-45deg) translate(.5px,-.5px);
}

/* ── 1 · the record, one field under edit ─────────────────────────────────*/
.home-refresh #platform .stgx__rec{margin:0;display:flex;flex-direction:column}
.home-refresh #platform .stgx__rec > div{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:16px;align-items:baseline;
  padding:10px 10px 10px 12px;border-bottom:1px solid var(--line);
}
.home-refresh #platform .stgx__rec > div:last-child{border-bottom:0}
.home-refresh #platform .stgx__rec--tight > div{padding:8px 10px 8px 12px}
.home-refresh #platform .stgx__rec dt{margin:0;font-size:13px;line-height:20px;color:var(--muted)}
.home-refresh #platform .stgx__rec dd{margin:0;font-size:14px;line-height:20px;color:var(--ink)}
.home-refresh #platform .stgx__rec dd i{font-style:normal;color:var(--muted)}
.home-refresh #platform .stgx__rec dd s{color:var(--muted);text-decoration-color:var(--line-strong,#c9c6bf);margin-right:10px}
.home-refresh #platform .stgx__rec dd em{
  font-style:normal;color:#0f4a38;background:rgba(0,181,133,.10);
  border-radius:2px;padding:1px 6px;margin-left:-2px;
}
/* the row being changed carries the green rail, the way the platform marks work */
.home-refresh #platform .stgx__rec .is-edit{position:relative;background:rgba(0,181,133,.05)}
.home-refresh #platform .stgx__rec .is-edit::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:#00b585;
}
.home-refresh #platform .stgx__note{
  display:flex;align-items:center;gap:10px;margin:auto 0 0;
  font-size:12px;line-height:18px;color:var(--muted);
}
.home-refresh #platform .stgx__tag{
  font-size:11px;letter-spacing:.04em;color:var(--ink2,#4a4842);
  border:1px solid var(--line);border-radius:2px;padding:2px 7px;
}

/* ── 2 · intake: the channel rail and what it opened ──────────────────────*/
.home-refresh #platform .stgx__tabs{
  position:relative;display:grid;grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--line);
}
.home-refresh #platform .stgx__tabs span{
  padding:0 0 10px;text-align:center;font-size:13px;line-height:20px;color:var(--muted);
}
.home-refresh #platform .stgx__tabs .is-on{color:#0f4a38}
.home-refresh #platform .stgx__tabs i{
  position:absolute;left:25%;bottom:-1px;width:25%;height:2px;background:#00b585;
}
.home-refresh #platform .stgx__said{
  margin:0;font-size:15px;line-height:22px;color:var(--ink);
}
.home-refresh #platform .stgx__stamp{
  font-style:normal;color:#0f4a38;letter-spacing:.06em;
  background:rgba(0,181,133,.10);border-radius:2px;padding:1px 7px;
}
.home-refresh #platform .stgx__files{display:flex;flex-wrap:wrap;gap:8px;margin:auto 0 0}
.home-refresh #platform .stgx__files span{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;line-height:18px;color:var(--ink2,#4a4842);
  border:1px solid var(--line);border-radius:2px;padding:5px 9px;
}
.home-refresh #platform .stgx__files i{
  width:11px;height:14px;flex:0 0 11px;border:1px solid var(--line-strong,#c9c6bf);border-radius:1px;
  position:relative;
}
.home-refresh #platform .stgx__files i::after{
  content:"";position:absolute;right:-1px;top:-1px;width:4px;height:4px;
  background:#fff;border-left:1px solid var(--line-strong,#c9c6bf);border-bottom:1px solid var(--line-strong,#c9c6bf);
}

/* ── 3 · status: the claim on its track ───────────────────────────────────*/
.home-refresh #platform .stgx__bub{
  align-self:flex-start;margin:0;max-width:80%;
  background:var(--surface,#f7f6f2);border:1px solid var(--line);border-radius:2px;
  padding:10px 14px;font-size:14px;line-height:20px;color:var(--ink);
}
.home-refresh #platform .stgx__rail{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:2px}
.home-refresh #platform .stgx__rail span{height:2px;background:var(--line)}
.home-refresh #platform .stgx__rail .is-done{background:var(--line-strong,#c9c6bf)}
.home-refresh #platform .tile--wide.stk .stgx__rail .is-now{background:#00b585}
.home-refresh #platform .stgx__steps{
  list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
}
.home-refresh #platform .stgx__steps li{display:flex;flex-direction:column;gap:3px;min-width:0}
.home-refresh #platform .stgx__steps em{
  font-style:normal;font-size:12.5px;line-height:17px;color:var(--muted);
}
.home-refresh #platform .stgx__steps b{font-weight:400;font-size:11px;line-height:16px;color:var(--muted)}
.home-refresh #platform .stgx__steps .is-done em{color:var(--ink2,#4a4842)}
.home-refresh #platform .tile--wide.stk .stgx__steps .is-now em,
.home-refresh #platform .tile--wide.stk .stgx__steps .is-now b{color:#0f4a38}

/* ── 4 · renewals: the sequence, and the call inside it ───────────────────*/
.home-refresh #platform .stgx__seq{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.home-refresh #platform .stgx__seq li{
  position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;
  padding:12px 0 12px 22px;
}
.home-refresh #platform .stgx__seq li::before{
  content:"";position:absolute;left:4px;top:18px;width:9px;height:9px;border-radius:50%;
  border:1px solid var(--line-strong,#c9c6bf);background:#fff;
}
/* the sequence reads by its own rows, without a line joining them */
.home-refresh #platform .stgx__seq .is-done::before{background:var(--line-strong,#c9c6bf);border-color:var(--line-strong,#c9c6bf)}
.home-refresh #platform .tile--wide.stk .stgx__seq .is-now::before{background:#00b585;border-color:#00b585}
.home-refresh #platform .stgx__t{font-size:12px;line-height:20px;color:var(--muted);letter-spacing:.02em}
.home-refresh #platform .stgx__ev{display:flex;flex-direction:column;gap:3px;min-width:0}
.home-refresh #platform .stgx__ev em{font-style:normal;font-size:14px;line-height:20px;color:var(--ink)}
.home-refresh #platform .stgx__ev b{font-weight:400;font-size:12.5px;line-height:18px;color:var(--muted)}
.home-refresh #platform .tile--wide.stk .stgx__paid{
  align-self:flex-start;color:#0f4a38!important;border:1px solid #00b585;border-radius:2px;
  padding:2px 8px;font-size:11.5px!important;letter-spacing:.02em;
}
.home-refresh #platform .stgx__wave{display:flex;align-items:flex-end;gap:2px;height:14px;margin-top:5px}
.home-refresh #platform .tile--wide.stk .stgx__wave i{
  width:2px;background:#8fe3c6;border-radius:1px;
  height:calc(4px + 10px * abs(sin(var(--b) * 1rad)));
}

/* ── 5 · build your own: the rule on the board ────────────────────────────*/
/* No graph paper inside the card: the stage behind it is already drawn on
   squares, and a second grid inside the window is one grid too many. */
.home-refresh #platform .stgx__body--board{gap:0;justify-content:center}
.home-refresh #platform .stgx__rule{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.home-refresh #platform .stgx__rule li{
  position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:12px;
  background:#fff;border:1px solid var(--line);border-radius:2px;padding:9px 12px;
  font-size:14px;line-height:20px;color:var(--ink);
}
/* no connector between the rule's blocks */
.home-refresh #platform .stgx__kw{
  font-size:11px;font-weight:450;letter-spacing:.08em;text-transform:uppercase;color:#007a57;
}
.home-refresh #platform .stgx__rule em{font-style:normal}
.home-refresh #platform .stgx__rule .is-picked{border-color:#00b585;box-shadow:0 0 0 3px rgba(0,181,133,.12)}
.home-refresh #platform .stgx__cur{
  position:absolute;right:12px;top:50%;width:12px;height:16px;background:var(--ink);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'><path d='M1 1l9 7-4 .6 2 4.4-2 .9-2-4.4-3 2.5z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'><path d='M1 1l9 7-4 .6 2 4.4-2 .9-2-4.4-3 2.5z'/></svg>") center/contain no-repeat;
}

/* ── each window draws itself when its row opens ──────────────────────────*/
@media (prefers-reduced-motion:no-preference){
  .home-refresh #platform .stk__panel.is-fresh.is-on .stgx__rec > div,
  .home-refresh #platform .stk__panel.is-fresh.is-on .stgx__steps li,
  .home-refresh #platform .stk__panel.is-fresh.is-on .stgx__seq li,
  .home-refresh #platform .stk__panel.is-fresh.is-on .stgx__rule li,
  .home-refresh #platform .stk__panel.is-fresh.is-on .stgx__files span{
    animation:stgxRow .42s var(--ease,cubic-bezier(.22,.61,.36,1)) both;
  }
  .home-refresh #platform .stgx__rec > div:nth-child(1),
  .home-refresh #platform .stgx__steps li:nth-child(1),
  .home-refresh #platform .stgx__seq li:nth-child(1),
  .home-refresh #platform .stgx__rule li:nth-child(1),
  .home-refresh #platform .stgx__files span:nth-child(1){animation-delay:.02s}
  .home-refresh #platform .stgx__rec > div:nth-child(2),
  .home-refresh #platform .stgx__steps li:nth-child(2),
  .home-refresh #platform .stgx__seq li:nth-child(2),
  .home-refresh #platform .stgx__rule li:nth-child(2),
  .home-refresh #platform .stgx__files span:nth-child(2){animation-delay:.08s}
  .home-refresh #platform .stgx__rec > div:nth-child(3),
  .home-refresh #platform .stgx__steps li:nth-child(3),
  .home-refresh #platform .stgx__seq li:nth-child(3),
  .home-refresh #platform .stgx__rule li:nth-child(3),
  .home-refresh #platform .stgx__files span:nth-child(3){animation-delay:.14s}
  .home-refresh #platform .stgx__rec > div:nth-child(4),
  .home-refresh #platform .stgx__steps li:nth-child(4),
  .home-refresh #platform .stgx__rule li:nth-child(4){animation-delay:.20s}
  .home-refresh #platform .stgx__rule li:nth-child(5){animation-delay:.26s}

  .home-refresh #platform .stk__panel.is-fresh.is-on .stgx__rec dd em,
  .home-refresh #platform .stk__panel.is-fresh.is-on .stgx__stamp,
  .home-refresh #platform .stk__panel.is-fresh.is-on .stgx__paid,
  .home-refresh #platform .stk__panel.is-fresh.is-on .stgx__foot .stgx__ok{
    animation:stgxLand .5s var(--ease,cubic-bezier(.22,.61,.36,1)) .3s both;
  }
  .home-refresh #platform .stk__panel.is-fresh.is-on .stgx__rail .is-now{
    animation:stgxGrow .6s var(--ease,cubic-bezier(.22,.61,.36,1)) .26s both;transform-origin:left center;
  }
  .home-refresh #platform .stk__panel.is-fresh.is-on .stgx__cur{
    animation:stgxCur .6s var(--ease,cubic-bezier(.22,.61,.36,1)) .34s both;
  }
  .home-refresh #platform .stk__panel.is-on .stgx__wave i{
    animation:stgxWave 1.1s var(--ease,cubic-bezier(.22,.61,.36,1)) infinite alternate;
    animation-delay:calc(var(--b) * .035s);
  }
}
@keyframes stgxRow{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes stgxLand{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes stgxGrow{from{transform:scaleX(0)}to{transform:none}}
@keyframes stgxCur{from{opacity:0;transform:translate(10px,-40%)}to{opacity:1;transform:translate(0,-50%)}}
@keyframes stgxWave{from{transform:scaleY(.45)}to{transform:scaleY(1)}}

@media (max-width:999.98px){
  .home-refresh #platform .stgx{min-height:0}
  .home-refresh #platform .stgx__body{padding:16px}
  .home-refresh #platform .stgx__bar,
  .home-refresh #platform .stgx__foot{padding:11px 16px}
  .home-refresh #platform .stgx__steps{grid-template-columns:repeat(2,1fr);gap:10px}
  .home-refresh #platform .stgx__rail{grid-template-columns:repeat(2,1fr)}
}

/* ══════════════════════════════════════════════════════════════════════════
   14 · The two colours carry through (her call)
   The home page tells the halves apart by colour: green is the conversation,
   lilac is the agent working in the back office. The same split runs here.
   Workflows is the agent's section, so its marks — the window's chip, the
   claim number it stamps, the rule's keywords, the step it is on — take the
   lilac. Green stays what it means everywhere: a thing that is done.
   Channels, which is the conversation, keeps green throughout.
   ══════════════════════════════════════════════════════════════════════════ */
.home-refresh #platform .stgx__chip{color:var(--violet,#1e5aa8);border-color:rgba(30,90,168,.35)}
.home-refresh #platform .stgx__stamp{color:var(--violet,#1e5aa8);background:rgba(30,90,168,.12)}
.home-refresh #platform .stgx__kw{color:var(--violet,#1e5aa8)}
.home-refresh #platform .stgx__rule .is-picked{border-color:var(--violet,#1e5aa8);box-shadow:0 0 0 3px rgba(30,90,168,.14)}
.home-refresh #platform .stgx__tabs .is-on{color:var(--violet,#1e5aa8)}
.home-refresh #platform .stgx__tabs i{background:var(--violet,#1e5aa8)}
.home-refresh #platform .stgx__rec .is-edit::before{background:var(--violet,#1e5aa8)}
.home-refresh #platform .stgx__rec .is-edit{background:rgba(30,90,168,.07)}
.home-refresh #platform .stgx__rec dd em{color:var(--violet,#1e5aa8);background:rgba(30,90,168,.12)}
/* the section's own label and the open row follow it */
.home-refresh #platform .stk__copy .seg__kicker{color:var(--violet,#1e5aa8)!important}
.home-refresh #platform .stk__row.is-open > button b{color:var(--violet,#1e5aa8)}

/* ══════════════════════════════════════════════════════════════════════════
   15 · Escalation: the handoff is shown, not listed
   Two bare lists said what Strada keeps and what it passes on, but not the
   thing that matters — that what it passes on arrives complete. The section
   is now the two outcomes side by side in the same window the workflows use:
   on the left the work that ends with Strada, on the right one real handoff
   with the context attached to it and the person it landed on.
   ══════════════════════════════════════════════════════════════════════════ */
.home-refresh .esc2{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:24px;width:100%;
}
.home-refresh .esc2__card{
  display:flex;flex-direction:column;overflow:hidden;
  background:#ffffff;border:1px solid var(--line);border-radius:2px;box-shadow:var(--lift);
}
.home-refresh .esc2__list{list-style:none;margin:0;padding:8px 20px;flex:1 1 auto}
.home-refresh .esc2__list li{
  display:flex;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);
  font-size:16px;line-height:24px;color:var(--ink);
}
.home-refresh .esc2__list li:last-child{border-bottom:0}

/* the handoff itself */
.home-refresh .esc2__hand{padding:20px;display:flex;flex-direction:column;gap:14px}
.home-refresh .esc2__reason{
  display:flex;align-items:baseline;gap:12px;margin:0;
  font-size:18px;line-height:26px;letter-spacing:-.2px;color:var(--ink);
}
.home-refresh .esc2__why{
  font-size:11px;font-weight:450;letter-spacing:.06em;text-transform:uppercase;
  color:var(--violet,#1e5aa8);border:1px solid rgba(30,90,168,.35);border-radius:2px;padding:3px 8px;
}
.home-refresh .esc2__ctx{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.home-refresh .esc2__ctx span{
  font-size:12px;line-height:18px;color:var(--ink2,#4a4842);
  border:1px solid var(--line);border-radius:2px;padding:5px 10px;background:var(--surface,#f7f6f2);
}
.home-refresh .esc2__to{
  display:flex;align-items:center;gap:12px;margin:0;padding-top:14px;border-top:1px solid var(--line);
}
.home-refresh .esc2__ava{
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(30,90,168,.12);color:var(--violet,#1e5aa8);
  font-size:12px;font-weight:450;letter-spacing:.02em;
}
.home-refresh .esc2__to em{font-style:normal;display:flex;flex-direction:column;font-size:14px;line-height:20px;color:var(--ink)}
.home-refresh .esc2__to em b{font-weight:400;font-size:12px;line-height:18px;color:var(--muted)}
.home-refresh .esc2__got{
  margin-left:auto;font-size:11px;font-weight:450;letter-spacing:.06em;text-transform:uppercase;
  color:#0f4a38;border:1px solid #00b585;border-radius:2px;padding:3px 8px;
}
.home-refresh .esc2__more{list-style:none;margin:0;padding:0 20px 4px;display:flex;flex-direction:column}
.home-refresh .esc2__more li{
  position:relative;padding:12px 0 12px 22px;border-top:1px solid var(--line);
  font-size:15px;line-height:22px;color:var(--muted);
}
.home-refresh .esc2__more li::before{
  content:"";position:absolute;left:4px;top:20px;width:8px;height:1px;background:var(--line-strong,#c9c6bf);
}

@media (max-width:999.98px){
  .home-refresh .esc2{grid-template-columns:minmax(0,1fr);gap:16px}
}

/* ── 16 · The hero has its own drawing ────────────────────────────────────
   The home hero is the routes field; repeating it here made the two pages
   open the same way. Platform takes the contour painter instead — the same
   line weight and the same one green request riding it, but topographic
   rings rather than lanes, so the page has its own opening image. */
.home-refresh .hero .routefield--contours{opacity:.9}

/* ══════════════════════════════════════════════════════════════════════════
   17 · The icons match the home page's (Thomas)
   The capability icons here sat in white tiles with a hairline round them,
   which read as small logos on a wall. They now take the home page's
   treatment: the bare glyph in the section's own colour, standing inside
   the four construction ticks the use cases use.
   ══════════════════════════════════════════════════════════════════════════ */
.home-refresh #platform .cap__ico--ph,
.home-refresh #deployment .cap__ico--ph{
  position:relative!important;overflow:visible;
  background-color:transparent!important;border:0!important;border-radius:0!important;
  width:22px!important;height:22px!important;flex-basis:22px!important;
}
.home-refresh #platform .cap__ico--ph::after,
.home-refresh #deployment .cap__ico--ph::after{
  width:22px;height:22px;opacity:1;background:currentColor;
}
/* No construction ticks on this page: they belong to the use cases on the
   home page, and repeating them down three lists turned a quiet mark into a
   pattern. The glyph carries the row on its own. */
/* Channels is the conversation, Deployment is your team: green and ink */
.home-refresh #platform .caps--chan .cap__ico--ph{color:#007a57}
.home-refresh #deployment .cap__ico--ph{color:var(--ink)}

/* ── 18 · Workflows is an agentic block, so it is violet throughout ───────
   Same rule as the home page: the section's colour runs through everything
   inside it, including the marks that mean a step is done. Channels, the
   conversation, keeps green.
   ══════════════════════════════════════════════════════════════════════════ */
/* only inside the Workflows tile: the escalation card is not an agentic
   block, so its "completed by Strada" checks stay green */
.home-refresh #platform .tile--wide.stk .stgx__ok i{background:var(--violet,#1e5aa8)!important}
.home-refresh .esc2 .stgx__ok i{background:#00b585!important}
.home-refresh #platform .tile--wide.stk .stgx__rail .is-now{background:var(--violet,#1e5aa8)!important}
.home-refresh #platform .tile--wide.stk .stgx__steps .is-now em,
.home-refresh #platform .tile--wide.stk .stgx__steps .is-now b{color:var(--violet,#1e5aa8)!important}
.home-refresh #platform .tile--wide.stk .stgx__seq .is-now::before{
  background:var(--violet,#1e5aa8)!important;border-color:var(--violet,#1e5aa8)!important;
}
.home-refresh #platform .tile--wide.stk .stgx__paid{
  color:var(--violet,#1e5aa8)!important;border-color:var(--violet,#1e5aa8)!important;
}
.home-refresh #platform .tile--wide.stk .stgx__wave i{background:rgba(30,90,168,.55)!important}
.home-refresh #platform .stgx__foot b{color:var(--ink)}

/* the tick frame needs room: it sits 8px outside the glyph, so the row opens
   with enough space for the frame to clear the hairline above it */
.home-refresh #platform .caps--chan li,
.home-refresh #deployment .caps--dep li{padding-top:24px;padding-bottom:20px}
.home-refresh #platform .caps--chan li:first-child,
.home-refresh #deployment .caps--dep li:first-child{padding-top:22px}
.home-refresh #platform .caps--chan .cap__ico--ph,
.home-refresh #deployment .caps--dep .cap__ico--ph{margin-top:2px}

/* ══════════════════════════════════════════════════════════════════════════
   19 · Built for scale, the way their own platform page does it
   Her reference: the heading and its sentence hold the left column while the
   capabilities run down the right, one under the other, each with its glyph
   in a quiet tile and a hairline between them. The head stays put as the
   list passes it, and every item arrives on its own as it reaches the fold —
   so the section reads as a list being gone through, not a grid dropped in.
   ══════════════════════════════════════════════════════════════════════════ */
.home-refresh .platform .tile--wide.psc{
  display:grid!important;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  column-gap:clamp(48px,7vw,120px);align-items:start;
  padding:64px 0!important;background:none!important;border:0!important;box-shadow:none!important;
}
.home-refresh .platform .tile--wide.psc .feature-copy{
  display:block;position:sticky;top:calc(var(--banner-h,0px) + var(--nav-h,72px) + 56px);
  margin:0;
}
.home-refresh .platform .tile--wide.psc .tile__title{margin:0 0 18px}
.home-refresh .platform .tile--wide.psc .feature-description{margin:0;max-width:42ch}

.home-refresh .scl{list-style:none;margin:0;padding:0}
.home-refresh .scl__item{
  display:grid;grid-template-columns:56px minmax(0,1fr);gap:22px;align-items:start;
  padding:30px 0;border-top:1px solid var(--line);
}
.home-refresh .scl__item:first-child{border-top:0;padding-top:0}
.home-refresh .scl__ico{
  position:relative;display:block;width:48px;height:48px;
  background:var(--surface,#f7f6f2);border:1px solid var(--line);border-radius:2px;color:var(--ink);
}
.home-refresh .scl__ico::after{
  content:"";position:absolute;inset:0;margin:auto;width:22px;height:22px;background:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;
}
.home-refresh .scl__txt{display:block;min-width:0;padding-top:2px}
.home-refresh .scl__txt b{
  display:block;font-weight:400;font-size:20px;line-height:28px;letter-spacing:-.3px;color:var(--ink);
}
.home-refresh .scl__txt em{
  display:block;margin-top:8px;font-style:normal;font-size:15px;line-height:23px;color:var(--muted);
  max-width:52ch;
}
/* the glyph settles a beat after its row, the way the home page's cards do */
.home-refresh .scl__item.is-in .scl__ico{animation:sclIco .45s var(--ease,cubic-bezier(.22,.61,.36,1)) .12s both}
@keyframes sclIco{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (max-width:999.98px){
  .home-refresh .platform .tile--wide.psc{grid-template-columns:minmax(0,1fr);row-gap:40px}
  .home-refresh .platform .tile--wide.psc .feature-copy{position:static}
}
@media (max-width:599.98px){
  .home-refresh .scl__item{grid-template-columns:40px minmax(0,1fr);gap:16px;padding:24px 0}
  .home-refresh .scl__ico{width:40px;height:40px}
  .home-refresh .scl__ico::after{width:19px;height:19px}
  .home-refresh .scl__txt b{font-size:18px;line-height:26px}
}

/* ══════════════════════════════════════════════════════════════════════════
   20 · Visibility is one dashboard, not six loose figures
   Six numbers floating on the paper had no construction and no relation to
   each other. The section is the product's dashboard, so it is drawn as the
   window this site already uses everywhere else: the chrome rail on top, a
   hairline grid of metrics inside it, a status rail at the foot. Same frame
   as the workflow windows and the escalation cards, same weights.
   ══════════════════════════════════════════════════════════════════════════ */
.home-refresh .vizwin{
  grid-column:1/-1;display:flex;flex-direction:column;overflow:hidden;
  background:#ffffff;border:1px solid var(--line);border-radius:var(--r-lg,4px);
  box-shadow:var(--lift);
}
.home-refresh .vizwin__bar{
  display:flex;align-items:center;gap:8px;margin:0;
  padding:14px 20px;border-bottom:1px solid var(--line);background:var(--surface,#f7f6f2);
  font-size:12px;line-height:18px;color:var(--muted);
}
.home-refresh .vizwin__bar i{
  width:7px;height:7px;border-radius:50%;border:1px solid var(--line-strong,#c9c6bf);flex:0 0 7px;
}
.home-refresh .vizwin__bar i + i{margin-left:-2px}
.home-refresh .vizwin__bar span{margin-left:8px}
.home-refresh .vizwin__bar b{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  font-weight:450;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#0f4a38;
}
.home-refresh .vizwin__bar b::before{
  content:"";width:7px;height:7px;border-radius:50%;background:#00b585;
}
.home-refresh .vizwin__foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0;
  padding:14px 20px;border-top:1px solid var(--line);background:var(--surface,#f7f6f2);
  font-size:12px;line-height:18px;color:var(--muted);
}
.home-refresh .vizwin__foot b{font-weight:450;color:var(--ink)}

/* the metrics sit in the window's own grid, split by hairlines */
.home-refresh .vizwin__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  background:var(--line);gap:1px;
}
/* One tile, three levels and nothing else: the name of the metric with its
   change beside it, the value, and the evidence. The per-tile sentence is
   gone — six of them was the wall of text that made the section unreadable,
   and the section's own lead already says what the dashboard is. */
.home-refresh .vm{background:none;padding:26px 26px 22px;display:flex;flex-direction:column;min-width:0}
.home-refresh .vm__top{
  display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0;
  font-size:11px;font-weight:450;line-height:1.6;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
}
.home-refresh .vm__chip{
  font-size:11px;font-weight:450;letter-spacing:.04em;text-transform:none;color:#0f4a38;
  white-space:nowrap;
}
.home-refresh .vm__chip::before{content:"▲ ";font-size:8px;vertical-align:1px}
.home-refresh .vm__num{
  margin:14px 0 0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-size:40px;line-height:1;letter-spacing:-1.6px;color:var(--ink);
}
.home-refresh .vm__num span{font-size:14px;letter-spacing:0;color:var(--muted)}
.home-refresh .vm .fig__viz{display:block;margin:auto 0 0;padding-top:22px}
.home-refresh .vm .fig__viz svg{width:100%;height:auto;display:block}

/* flat: the dashboard is drawn with hairlines, not with a card and a shadow */
.home-refresh .vizwin{
  background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;
}
.home-refresh .vizwin__bar,
.home-refresh .vizwin__foot{background:none!important;padding-left:0;padding-right:0}
.home-refresh .vizwin__bar i{display:none}
.home-refresh .vizwin__bar span{margin-left:0}
.home-refresh .vizwin__grid{background:var(--line);gap:1px}
.home-refresh .vm{background:var(--paper,#f2f1ed)}

/* ── The charts are drawn, on the blueprint's own clock ───────────────────
   Same hand as the shield on the home page: the paper and the rules come up
   first, then the construction line-work traces itself, then the data, and
   the numbers land last. The timings are the ones in trust-blueprint.svg —
   .7s for the grid, 1.1s per stroke, the labels at 1.5s — so the two
   drawings feel like one set. */
@media (prefers-reduced-motion:no-preference){
  .home-refresh .vizwin .bp-grid{opacity:0}
  .home-refresh .vizwin.is-in .bp-grid{animation:bpGrid .7s cubic-bezier(.4,0,.2,1) both}

  .home-refresh .vizwin .bp-fig > *{stroke-dasharray:1;stroke-dashoffset:1}
  .home-refresh .vizwin.is-in .bp-fig > *{animation:bpDraw 1.1s cubic-bezier(.4,0,.2,1) both}
  .home-refresh .vizwin .bp-fig > :nth-child(1){animation-delay:.30s}
  .home-refresh .vizwin .bp-fig > :nth-child(2){animation-delay:.38s}
  .home-refresh .vizwin .bp-fig > :nth-child(3){animation-delay:.46s}
  .home-refresh .vizwin .bp-fig > :nth-child(4){animation-delay:.54s}
  .home-refresh .vizwin .bp-fig > :nth-child(5){animation-delay:.62s}
  .home-refresh .vizwin .bp-fig > :nth-child(6){animation-delay:.70s}
  .home-refresh .vizwin .bp-fig > :nth-child(7){animation-delay:.78s}

  /* the data: bars grow from the axis, lines and the ring trace */
  .home-refresh .vizwin .bp-bar{transform-box:fill-box;transform-origin:bottom center;scale:1 0}
  .home-refresh .vizwin.is-in .bp-bar{animation:bpBar .6s cubic-bezier(.22,.61,.36,1) both}
  .home-refresh .vizwin .bp-bar:nth-of-type(1){animation-delay:.80s}
  .home-refresh .vizwin .bp-bar:nth-of-type(2){animation-delay:.86s}
  .home-refresh .vizwin .bp-bar:nth-of-type(3){animation-delay:.92s}
  .home-refresh .vizwin .bp-bar:nth-of-type(4){animation-delay:.98s}
  .home-refresh .vizwin .bp-bar:nth-of-type(5){animation-delay:1.04s}
  .home-refresh .vizwin .bp-bar:nth-of-type(6){animation-delay:1.10s}
  .home-refresh .vizwin :is(.bp-line,.bp-ring){stroke-dashoffset:1}
  .home-refresh .vizwin .bp-line{stroke-dasharray:1}
  .home-refresh .vizwin.is-in .bp-line{animation:bpDraw 1.2s cubic-bezier(.4,0,.2,1) .8s both}
  .home-refresh .vizwin.is-in .bp-ring{animation:bpDraw 1.2s cubic-bezier(.4,0,.2,1) .8s both}
  .home-refresh .vizwin :is(.bp-fill,.bp-node,.bp-halo,.bp-seg,.bp-rule){opacity:0}
  .home-refresh .vizwin.is-in .bp-fill{animation:bpFill .5s ease .9s both}
  .home-refresh .vizwin.is-in .bp-rule{animation:bpIn .5s ease .9s both}
  .home-refresh .vizwin.is-in .bp-seg{animation:bpIn .5s ease .85s both}
  .home-refresh .vizwin.is-in :is(.bp-node,.bp-halo){animation:bpIn .45s ease 1.5s both}

  .home-refresh .vizwin .bp-label{opacity:0}
  .home-refresh .vizwin.is-in .bp-label{animation:bpIn .5s cubic-bezier(.4,0,.2,1) 1.5s both}
}
@keyframes bpGrid{to{opacity:1}}
@keyframes bpDraw{to{stroke-dashoffset:0}}
@keyframes bpIn{to{opacity:1}}
@keyframes bpFill{to{opacity:.10}}
@keyframes bpBar{to{scale:1 1}}

/* the section head keeps its own column, the window takes the rest */
.home-refresh .results__grid:has(.vizwin){display:block}
.home-refresh .results__grid:has(.vizwin) .results__head{margin-bottom:clamp(32px,4vh,48px);position:static}

@media (max-width:1099.98px){
  .home-refresh .vizwin__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:699.98px){
  .home-refresh .vizwin__grid{grid-template-columns:minmax(0,1fr)}
  .home-refresh .vm{padding:20px 18px}
}

/* ══════════════════════════════════════════════════════════════════════════
   21 · Deployment is a plan, drawn as one
   The section's whole claim is about time — weeks, not months — and it was
   set as four bullets beside half a column of air. It is a four-week rail
   now: the head runs across the top the way the other sections' heads do,
   and the four things the FDE team does are the four stages under it, in
   order, on one line. Flat: no card, no shadow, one hairline rail.
   ══════════════════════════════════════════════════════════════════════════ */
.home-refresh .platform .tile--wide.dplan{
  display:block!important;padding:48px 0!important;
  background:none!important;border:0!important;box-shadow:none!important;
}
.home-refresh .dplan .feature-copy{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:64px;row-gap:0;align-items:start;margin-bottom:clamp(44px,6vh,72px);
}
.home-refresh .dplan .t-eyebrow{grid-column:1/-1;margin:0 0 10px}
.home-refresh .dplan .noapi__title{grid-column:1;margin:0;color:var(--ink)}
.home-refresh .dplan .feature-description{grid-column:2;margin:0;max-width:46ch;align-self:end}
.home-refresh .dplan .btn{grid-column:2;justify-self:start;margin-top:24px}

.home-refresh .dplan__rail{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px;
}
.home-refresh .dplan__step{position:relative;padding-top:26px}
/* the rail itself: one hairline across the top of the row, with the marks on it */
.home-refresh .dplan__step::before{
  content:"";position:absolute;top:5px;left:0;right:-32px;height:1px;background:var(--line);
}
.home-refresh .dplan__step:last-child::before{right:0}
.home-refresh .dplan__mark{
  position:absolute;top:0;left:0;width:11px;height:11px;border-radius:50%;
  border:1px solid var(--line-strong,#c9c6bf);background:var(--paper,#f2f1ed);
}
.home-refresh .dplan__step.is-done .dplan__mark{background:#00b585;border-color:#00b585}
.home-refresh .dplan__step.is-done::before{background:#00b585}
.home-refresh .dplan__step.is-now .dplan__mark{background:#00b585;border-color:#00b585}
.home-refresh .dplan__step.is-now .dplan__mark::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(0,181,133,.45);
}
.home-refresh .dplan__week{
  display:flex;align-items:baseline;gap:10px;margin:0;
  font-size:11px;font-weight:450;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.home-refresh .dplan__week b{font-weight:450;color:#0f4a38;letter-spacing:.04em}
.home-refresh .dplan__title{
  margin:14px 0 0;font-size:18px;line-height:26px;letter-spacing:-.2px;color:var(--ink);
}
.home-refresh .dplan__desc{margin:8px 0 0;font-size:14px;line-height:21px;color:var(--muted);max-width:30ch}

@media (prefers-reduced-motion:no-preference){
  .home-refresh .dplan__step{opacity:0;translate:0 10px}
  .home-refresh .dplan.is-in .dplan__step{animation:pscIn .5s var(--ease,cubic-bezier(.22,.61,.36,1)) both}
  .home-refresh .dplan.is-in .dplan__step:nth-child(1){animation-delay:.02s}
  .home-refresh .dplan.is-in .dplan__step:nth-child(2){animation-delay:.10s}
  .home-refresh .dplan.is-in .dplan__step:nth-child(3){animation-delay:.18s}
  .home-refresh .dplan.is-in .dplan__step:nth-child(4){animation-delay:.26s}
}

@media (max-width:999.98px){
  .home-refresh .dplan .feature-copy{grid-template-columns:minmax(0,1fr);row-gap:16px}
  .home-refresh .dplan .noapi__title,
  .home-refresh .dplan .feature-description,
  .home-refresh .dplan .btn{grid-column:1}
  .home-refresh .dplan__rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 32px}
  .home-refresh .dplan__step:nth-child(2)::before{right:0}
}
@media (max-width:599.98px){
  .home-refresh .dplan__rail{grid-template-columns:minmax(0,1fr);gap:28px}
  .home-refresh .dplan__step::before{right:0}
}

/* ══════════════════════════════════════════════════════════════════════════
   22 · The platform page gets a rhythm (her note: it is beige all the way)
   The home page alternates its grounds; this page ran five sections on the
   same paper, so nothing separated one idea from the next. The sections now
   step between the paper and the surface tone — the two lightest values we
   own — so the page has a pulse without adding another dark band to a site
   she already finds dark.
   ══════════════════════════════════════════════════════════════════════════ */
.home-refresh #platform{background:var(--surface,#f7f6f2)!important}
.home-refresh #impact{background:var(--paper,#f2f1ed)!important}
.home-refresh #deployment{background:var(--surface,#f7f6f2)!important}
/* the windows stay white so they still read as product against either ground */
.home-refresh #platform .tile--wide.stk .stk__panel > .stgx,
.home-refresh .esc2__card{background:#ffffff!important}
/* the dashboard's tiles take the page's paper, one step off the section */
.home-refresh #impact .vm{background:var(--surface,#f7f6f2)!important}

/* the closing band continues the ground of the section above it, so the two
   tones do not meet as a line right over the card */
.home-refresh #deployment + .ctaband{background:var(--surface,#f7f6f2)!important}

/* ══════════════════════════════════════════════════════════════════════════
   23 · Visibility sits on the deep green (her call, restored)
   She asked for both: the blueprint graphic AND the green section. The
   drawing keeps the hand it has — construction lines, graph paper, traced
   strokes — and inverts onto the green: hairlines in paper at low alpha,
   mint for the data, exactly the pair the Why blueprints use. No extra
   grain layer this time; the page's own one is enough.
   ══════════════════════════════════════════════════════════════════════════ */
.home-refresh #impact{
  background:#06251c!important;
  padding-top:clamp(88px,11vh,140px)!important;
  padding-bottom:clamp(88px,11vh,140px)!important;
}
.home-refresh #impact .kicker{color:#8fe3c6!important}
.home-refresh #impact .kicker i{background:#8fe3c6!important}
.home-refresh #impact .t-h2,
.home-refresh #impact .t-h2 .ln{color:#f2f1ed!important}
.home-refresh #impact .t-h2 .ln:last-child{color:#8fe3c6!important}
.home-refresh #impact .results__lead{color:rgba(242,241,237,.72)!important}
.home-refresh #impact .results__cta{
  background:transparent!important;color:#f2f1ed!important;
  border:1px solid rgba(242,241,237,.34)!important;
}
.home-refresh #impact .results__cta:hover{background:#f2f1ed!important;color:#06251c!important}
.home-refresh #impact .vizwin__grid{background:rgba(242,241,237,.14)!important;gap:1px}
.home-refresh #impact .vm{background:#06251c!important}
.home-refresh #impact .vizwin__bar,
.home-refresh #impact .vizwin__foot{
  color:rgba(242,241,237,.55)!important;border-color:rgba(242,241,237,.16)!important;
}
.home-refresh #impact .vizwin__foot b{color:#f2f1ed!important}
.home-refresh #impact .vizwin__bar b{color:#8fe3c6!important}
.home-refresh #impact .vizwin__bar b::before{background:#8fe3c6!important}
.home-refresh #impact .vm__label{color:rgba(242,241,237,.55)!important}
.home-refresh #impact .vm__num{color:#f2f1ed!important}
.home-refresh #impact .vm__num span{color:rgba(242,241,237,.62)!important}
.home-refresh #impact .vm__chip{color:#8fe3c6!important}

/* pscIn went out with the old tile grid it belonged to, and the bus stops
   still animate with it — without the keyframes they stayed at opacity 0 */
@keyframes pscIn{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}

/* the bus stops use the page's masked icons, so they need the mask rules */
.home-refresh .bus__ico{
  position:relative;display:block;width:22px;height:22px;color:#007a57;
  background:none!important;border:0!important;
}
.home-refresh .bus__ico::after{
  content:"";position:absolute;inset:0;background:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;
}

/* the agentic window: his blue on the plates and rails, the deeper step only
   where type has to read */
/* every blue that is not type is his colour itself; only text goes deeper,
   and only as far as legibility needs */
.home-refresh #platform .tile--wide.stk .stgx__rec .is-edit{background:rgba(102,197,237,.13)!important}
.home-refresh #platform .tile--wide.stk .stgx__rec .is-edit::before{
  background:var(--blue-light,#66c5ed)!important;width:3px!important;
}
.home-refresh #platform .tile--wide.stk .stgx__rec dd em{
  color:var(--blue-type,#1e7fbf)!important;background:rgba(102,197,237,.28)!important;
}
.home-refresh #platform .tile--wide.stk .stgx__chip{
  color:var(--blue-type,#1e7fbf)!important;border-color:rgba(102,197,237,.7)!important;
}
.home-refresh #platform .tile--wide.stk .stgx__stamp{
  color:var(--blue-type,#1e7fbf)!important;background:rgba(102,197,237,.28)!important;
}
.home-refresh #platform .tile--wide.stk .stgx__ok i{background:var(--blue-light,#66c5ed)!important}
.home-refresh #platform .tile--wide.stk .stgx__kw{color:var(--blue-mark,#1f93d6)!important}
.home-refresh #platform .tile--wide.stk .stgx__tabs i{background:var(--blue-light,#66c5ed)!important}
.home-refresh #platform .tile--wide.stk .stgx__rail .is-now,
.home-refresh #platform .tile--wide.stk .stgx__seq .is-now::before{
  background:var(--blue-light,#66c5ed)!important;border-color:var(--blue-light,#66c5ed)!important;
}
.home-refresh #platform .tile--wide.stk .stgx__wave i{background:var(--blue-light,#66c5ed)!important}

/* Thomas's note, applied here too: the bright green is the call to action's
   colour. Everything else on this page that was green takes the deep green. */
.home-refresh #impact .vizwin__bar b{color:#06251c!important}
.home-refresh #impact .vizwin__bar b::before{background:#06251c!important}
.home-refresh #impact .vm__chip{color:#06251c!important}

/* Escalation is not an agentic block — it hands work to a person — so its
   chips carry no accent at all: ink on the hairline, like the rails around them */
.home-refresh .esc2 .stgx__chip{
  color:var(--ink2,#4a4842)!important;border-color:var(--line)!important;background:#fff!important;
}

/* ── The list reads itself ────────────────────────────────────────────────
   A rail down the left of the items fills with the section, and the row at
   the reading line lights its glyph. Nothing resizes: the tile's border and
   its ground carry the state, so the list never shifts under the cursor. */
.home-refresh .scl{position:relative;padding-left:34px}
.home-refresh .scl::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line);
}
.home-refresh .scl::after{
  content:"";position:absolute;left:0;top:0;width:1px;height:calc(var(--p,0) * 100%);
  background:var(--green,#00b585);transition:height .12s linear;
}
.home-refresh .scl__item{position:relative}
/* the mark on the rail for the row being read */
.home-refresh .scl__item::before{
  content:"";position:absolute;left:-34px;top:32px;width:7px;height:7px;border-radius:50%;
  background:var(--paper,#f2f1ed);border:1px solid var(--line-strong,#c9c6bf);
  transform:translateX(-3px);transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.home-refresh .scl__item:first-child::before{top:2px}
.home-refresh .scl__item.is-active::before{
  background:var(--green,#00b585);border-color:var(--green,#00b585);transform:translateX(-3px) scale(1.25);
}
.home-refresh .scl__ico{
  transition:border-color .35s var(--ease),background .35s var(--ease),color .35s var(--ease);
}
.home-refresh .scl__item.is-active .scl__ico{
  border-color:var(--green,#00b585);background:#fff;color:var(--green-deep,#0f4a38);
}
.home-refresh .scl__txt b{transition:color .35s var(--ease)}
.home-refresh .scl__item:not(.is-active) .scl__txt b{color:var(--ink2,#4a4842)}
@media (max-width:599.98px){
  .home-refresh .scl{padding-left:26px}
  .home-refresh .scl__item::before{left:-26px;top:26px}
}

/* ══════════════════════════════════════════════════════════════════════════
   24 · The channels mock is a window, like the one above it
   The Workflows tile shows a white product window standing on the graph
   paper; this one was a flat panel with a grey field under its tabs, so the
   two halves of the page did not match. Same frame here: white card, one
   hairline, the tabs as its top rail, the conversation inside it, and the
   caption as the foot.
   ══════════════════════════════════════════════════════════════════════════ */
.home-refresh #platform .tile--conv .live{
  background:#ffffff!important;border:1px solid var(--line)!important;border-radius:2px!important;
  box-shadow:0 20px 50px #4a484224!important;padding:0!important;overflow:hidden;
}
.home-refresh #platform .tile--conv .live__tabs{
  margin:0!important;padding:0 18px!important;background:var(--surface,#f7f6f2);
  border-bottom:1px solid var(--line)!important;
}
.home-refresh #platform .tile--conv .live__tabs span{padding:14px 0 13px!important;font-size:12.5px!important}
.home-refresh #platform .tile--conv .live__say{
  margin:0!important;padding:18px 20px 0!important;height:auto!important;
}
.home-refresh #platform .tile--conv .live__viz{
  background:transparent!important;border:0!important;
  padding:8px 20px 18px!important;min-height:210px!important;
}
.home-refresh #platform .tile--conv .live__viz .lv{inset:8px 20px 18px!important}
.home-refresh #platform .tile--conv .live__foot{
  margin:0!important;padding:13px 20px!important;
  border-top:1px solid var(--line)!important;background:var(--surface,#f7f6f2);
  font-size:12px!important;color:var(--muted)!important;
}
.home-refresh #platform .tile--conv .live__foot b{font-weight:450;color:var(--ink)}

/* ══════════════════════════════════════════════════════════════════════════
   25 · Grain on the whole band, not only under the mock
   Her note: the texture on this page sat inside one rectangle, the graph
   paper behind the animation, so the band around it read as a flat sheet.
   The grain now covers the whole section, copy side included. The two paper
   bands take the page's own dark noise a step up from the site-wide layer;
   the deep-green Visibility band takes the light noise the other dark
   sections on the site take, which it was missing entirely.
   ══════════════════════════════════════════════════════════════════════════ */
.home-refresh #platform,
.home-refresh #deployment,
.home-refresh #impact{position:relative;isolation:isolate}
.home-refresh #platform::after,
.home-refresh #deployment::after{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background-image:var(--grain);background-size:180px 180px;
  opacity:.26;filter:contrast(2);mix-blend-mode:normal;
}
.home-refresh #impact::after{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background-image:var(--grain-light);background-size:160px 160px;
  opacity:.27;filter:contrast(2);mix-blend-mode:normal;
}

/* ══════════════════════════════════════════════════════════════════════════
   26 · The channels window is the size of what it holds
   The conversation pane was stretching to the full height of the tile, so a
   two-line call sat in a 530px field of nothing. The pane is a fixed height
   now and the window is only as tall as its own three parts, standing on
   the graph paper the way the workflow window above it does. The caption
   closes it as a foot rail instead of floating off the bottom edge.
   ══════════════════════════════════════════════════════════════════════════ */
.home-refresh #platform .tile--conv .viz--chan{
  align-items:center!important;padding:48px 0 48px 48px!important;
}
.home-refresh #platform .tile--conv .live{
  height:auto!important;min-height:0!important;align-self:center!important;
}
.home-refresh #platform .tile--conv .live__viz{
  flex:0 0 auto!important;height:252px!important;min-height:252px!important;
  padding:10px 20px 16px!important;
}
.home-refresh #platform .tile--conv .live__viz .lv{inset:10px 20px 16px!important}
.home-refresh #platform .tile--conv .live__say{
  order:3;margin:0!important;padding:13px 20px!important;height:auto!important;
  min-height:46px!important;flex:0 0 auto!important;
  border-top:1px solid var(--line)!important;background:var(--surface,#f7f6f2);
}
.home-refresh #platform .tile--conv .live__say span{font-size:12.5px!important;line-height:20px!important;color:var(--muted)!important}