/* ─────────────────────────────────────────────────────────────────────────────────────────────
   /agentforce · the Agentforce workforce (v3.33.0). Loaded with mcp.css on this page only.
   The page is the MCP section's own world: its sections, windows, tracks and rules. What is new
   here is the workforce: five portraits, each ringed in its agent's hue (Leilani cyan, Kai blue,
   Malia teal, Koa green, Nohea sun), the hue sampled from the portrait's own disc. Like the
   platform inks, the hues show only on the colour themes (Mono and Daylight keep one ink), and
   only on rings, dots and edges, never on text, so every word keeps the site's AAA contrast.
   Motion is gated on html[data-motion=on]; without it every figure stands finished.
   ───────────────────────────────────────────────────────────────────────────────────────────── */
.af-page{--ink-leilani:var(--fg-muted);--ink-kai:var(--fg-muted);--ink-malia:var(--fg-muted);--ink-koa:var(--fg-muted);--ink-nohea:var(--fg-muted)}
html.theme-color .af-page{--ink-leilani:#22BFE6;--ink-kai:#4F8BE8;--ink-malia:#34AEA3;--ink-koa:#4FBF7A;--ink-nohea:#F2B447}

/* ── A portrait: round, ringed in its hue ── */
.af-av{--s:2.5rem;position:relative;display:inline-grid;flex:none;inline-size:var(--s);block-size:var(--s);border-radius:50%;
  box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px color-mix(in oklab,var(--c) 85%,transparent);background:color-mix(in oklab,var(--c) 18%,var(--bg-elev))}
.af-av img{display:block;inline-size:100%;block-size:100%;border-radius:50%;object-fit:cover}
.af-av--xs{--s:1.35rem;box-shadow:0 0 0 1.5px var(--bg-elev),0 0 0 2.5px color-mix(in oklab,var(--c) 80%,transparent)}
.af-av--sm{--s:2.35rem}
.af-av--tab{--s:2.6rem}
.af-av--md{--s:3.2rem}
.af-av--lg{--s:clamp(5.5rem,4rem + 4vw,8.5rem);box-shadow:0 0 0 3px var(--card),0 0 0 5px color-mix(in oklab,var(--c) 85%,transparent),0 18px 40px -18px color-mix(in oklab,var(--c) 70%,transparent)}

/* ── Hero: the Ohana stage (v3.34.0; the v3.33.0 sphere retired). It wears the home stage's chrome
   (mcp.css .mcp-show: the navy stage, the pause button, the chapter tabs with their progress bars),
   with the page's head above it and the chapter's words always beneath it: the circle fills the
   stage, so nothing reads over the scene. ── */
.mcp-hearts--eyebrow{font-size:1.05rem}
.af-show{padding-block:clamp(2.75rem,6vw,6rem) clamp(3.5rem,6vw,6rem)}
.af-show__head{max-inline-size:60rem}
/* the accent is its own line: the promise under the statement, never a stranded word before it */
.af-show__h{text-wrap:balance}
.af-show__h .v2-hero__accent{display:block}
.af-show__lede{max-inline-size:48rem}
.af-show .mcp-show__stage{margin-block-start:clamp(2rem,4vw,3rem)}
.af-show .mcp-show__chapters{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:40rem){.af-show .mcp-show__chapters{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:80rem){
  .af-show.is-live .mcp-show__view{max-block-size:44rem}
  .af-show.is-live .mcp-show__panels{position:static;inline-size:auto;margin:1.5rem 0 0;padding:0;pointer-events:auto}
  .af-show.is-live .mcp-show__panels::before{content:none}
  .af-show.is-live .mcp-show__ph{font-size:clamp(1.35rem,1.05rem + 1vw,1.9rem)}
}
/* under a wide stage the chapter reads in two columns: its name and heading, then its words and link */
@media (min-width:64rem){
  .af-show.is-live .mcp-show__panel.is-on{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    grid-template-areas:"k p" "h p" "h l";column-gap:clamp(2rem,4vw,4.5rem);align-items:start}
  .af-show .mcp-show__pk{grid-area:k}
  .af-show .mcp-show__ph{grid-area:h;text-wrap:balance}
  .af-show .mcp-show__pp{grid-area:p;margin:0;max-inline-size:44rem}
  .af-show .mcp-show__pl{grid-area:l;justify-self:start}
}
/* on a phone the stage stands a little taller than square (the circle and its places need the height),
   and the pause button takes the bottom right, under the circle, since the source sits top left */
@media (max-width:37.5rem){
  .af-show .mcp-show__view{aspect-ratio:4 / 5}
  .af-show .mcp-show__pause{inset-inline-start:auto;inset-block-start:auto;inset-inline-end:.75rem;inset-block-end:.75rem}
}
/* Japanese labels break between words, never inside one (キャ|プテン) */
html[lang="ja"] :is(.af-tab__r,.af-hello__who span,.af-spec__c,.af-crm__agent,.af-way__g,.mcp-show__k){word-break:keep-all;overflow-wrap:anywhere}

/* ── Everything, on one page: an index of hairline rows, two columns on a wide screen ── */
.af-index{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);column-gap:clamp(1.5rem,4vw,3.5rem);border-top:var(--rule)}
@media (min-width:52rem){.af-index{grid-template-columns:repeat(2,minmax(0,1fr))}}
.af-index > li{border-bottom:var(--rule)}
.af-index__a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ico t go" "ico p go";column-gap:1rem;row-gap:.15rem;
  align-items:center;padding:1rem .25rem;color:inherit;text-decoration:none;border-radius:var(--r-sm)}
.af-index__ico{grid-area:ico;display:grid;place-items:center;inline-size:2.5rem;block-size:2.5rem;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent-text)}
.af-index__t{grid-area:t;font-size:1.02rem;font-weight:600;color:var(--fg)}
.af-index__p{grid-area:p;font-size:.92rem;line-height:1.5;color:var(--fg-muted)}
.af-index__go{grid-area:go;font-size:1.05rem;color:var(--fg-subtle);transition:transform var(--micro) var(--ease-out),color var(--micro) var(--ease-out)}
.af-index__a:hover .af-index__t{color:var(--accent-text)}
.af-index__a:hover .af-index__go{transform:translateY(3px);color:var(--accent-text)}
.af-index__a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ── The roster: a tab per agent, one panel each ── */
.af-roster__tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.6rem;margin-block-end:clamp(1rem,2vw,1.4rem)}
.af-roster:not(.is-js) .af-roster__tabs{display:none}
.af-roster:not(.is-js) .af-panel + .af-panel{margin-block-start:var(--gap)}
.af-tab{position:relative;display:flex;align-items:center;gap:.75rem;min-block-size:3.9rem;padding:.65rem .8rem;border:var(--rule);border-radius:var(--card-r);
  background:var(--card);color:var(--fg);font:inherit;text-align:start;cursor:pointer;
  transition:border-color var(--micro) var(--ease-out),background-color var(--micro) var(--ease-out)}
.af-tab::after{content:'';position:absolute;inset-inline:.8rem;inset-block-end:-1px;block-size:2px;border-radius:2px;background:var(--c);transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--panel) var(--ease-out)}
.af-tab:hover{border-color:var(--line-edge)}
.af-tab[aria-selected="true"]{border-color:color-mix(in oklab,var(--c) 55%,var(--line));background:color-mix(in oklab,var(--c) 7%,var(--card))}
.af-tab[aria-selected="true"]::after{transform:none}
.af-tab:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.af-tab__txt{display:grid;gap:.12rem;min-inline-size:0}
.af-tab__n{font-size:1rem;font-weight:700;letter-spacing:-.005em}
.af-tab__r{font-size:.76rem;line-height:1.3;color:var(--fg-muted);overflow-wrap:anywhere}
@media (max-width:62rem){
  .af-roster__tabs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(12.5rem,1fr);overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;padding-block-end:.5rem;scrollbar-width:thin}
  .af-tab{scroll-snap-align:start}
}
.af-panel{display:grid;gap:clamp(1.4rem,3vw,2.75rem);padding:clamp(1.25rem,3vw,2.4rem);border:1px solid color-mix(in oklab,var(--c) 34%,var(--line));border-radius:var(--card-r);
  background:linear-gradient(180deg,color-mix(in oklab,var(--c) 7%,var(--card)) 0,var(--card) 11rem)}
@media (min-width:62rem){.af-panel{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.af-roster.is-js .af-panel[hidden]{display:none}
.af-panel:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.af-panel__id{display:flex;align-items:center;gap:clamp(1rem,2.4vw,1.5rem)}
.af-panel__n{margin:0;display:grid;gap:.3rem;font-size:clamp(1.65rem,1.2rem + 1.3vw,2.3rem);font-weight:600;letter-spacing:-.018em;line-height:1.05;color:var(--fg)}
.af-panel__r{font-size:.78rem;font-weight:700;letter-spacing:.08em;line-height:1.3;text-transform:uppercase;color:var(--fg-muted)}
.af-panel__pers{margin:clamp(1rem,2vw,1.4rem) 0 0;font-size:1.06rem;line-height:1.55;color:var(--fg);text-wrap:pretty}
.af-panel__focus{margin:.6rem 0 0;font-size:.95rem;line-height:1.6;color:var(--fg-muted);text-wrap:pretty}
.af-quote{margin:1.3rem 0 0;padding:1rem 1.1rem 1.05rem;border:var(--rule);border-radius:var(--card-r);background:color-mix(in oklab,var(--c) 6%,var(--bg-elev))}
.af-quote blockquote{margin:0}
.af-quote p{margin:0;font-size:1rem;line-height:1.6;color:var(--fg)}
.af-quote figcaption{margin-block-start:.6rem;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-subtle)}
.af-panel__meta{display:grid;gap:1.1rem;margin-block-start:1.3rem}
@media (min-width:36rem){.af-panel__meta{grid-template-columns:repeat(2,minmax(0,1fr))}}
.af-label{margin:0 0 .55rem;font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-subtle)}
.af-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.af-chips li{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;border:var(--rule);border-radius:var(--r-pill);font-size:.8rem;color:var(--fg-body)}
.af-chips--sm li{padding:.2rem .6rem .2rem .25rem;font-size:.78rem}
.af-tasks{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.af-tasks li{display:flex;align-items:center;gap:.55rem;font-size:.9rem;color:var(--fg)}
.af-tasks .mcp-ico{flex:none;color:var(--c)}
.af-specs{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;counter-reset:af-spec}
.af-spec{position:relative;display:grid;gap:.32rem;padding:.9rem 1rem .95rem 3.1rem;border:var(--rule);border-radius:var(--card-r);background:var(--bg-elev)}
.af-spec::before{counter-increment:af-spec;content:counter(af-spec,decimal-leading-zero);position:absolute;inset-inline-start:1rem;inset-block-start:.98rem;
  font-size:.74rem;font-weight:700;letter-spacing:.1em;color:var(--fg-subtle);font-variant-numeric:tabular-nums}
.af-spec::after{content:'';position:absolute;inset-inline-start:1.2rem;inset-block-start:2.2rem;inline-size:6px;block-size:6px;border-radius:50%;background:var(--c)}
.af-spec__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .6rem}
.af-spec__n{font-size:1rem;font-weight:600;color:var(--fg)}
.af-spec__c{padding:.1rem .5rem;border:var(--rule);border-radius:var(--r-pill);font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-muted)}
.af-spec__d{font-size:.92rem;line-height:1.55;color:var(--fg-muted)}
html[data-motion="on"] .af-roster.is-js .af-panel.is-in{animation:af-panel-in .42s var(--ease-out) both}
html[data-motion="on"] .af-roster.is-js .af-panel.is-in .af-spec{animation:af-rise .45s var(--ease-out) both;animation-delay:calc(90ms + var(--k) * 45ms)}
@keyframes af-panel-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes af-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── Hello, Agentforce: the roll call ── */
.af-split{align-items:center}
.af-hello,.af-helpfig,.af-eng{margin:0;border:var(--rule-strong);border-radius:var(--card-r);background:var(--card);overflow:hidden;box-shadow:var(--shadow-card)}
.af-hello__title{display:inline-flex;align-items:center;gap:.5rem}
.af-hello__mark{inline-size:1.15rem;block-size:auto;color:var(--accent-text)}
.af-hello__body,.af-helpfig__body{display:grid;gap:.85rem;padding:clamp(1rem,2.4vw,1.35rem)}
.af-hello__q,.af-helpfig__q{justify-self:end;max-inline-size:90%;margin:0;padding:.6rem .85rem;border-radius:var(--r-sm) var(--r-sm) 2px var(--r-sm);
  background:var(--accent);color:var(--accent-contrast);font-size:.93rem;font-weight:600;line-height:1.45}
.af-hello__list{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.af-hello__r{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7rem;align-items:start}
.af-hello__say{min-inline-size:0}
.af-hello__who{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .55rem;margin:.1rem 0 0}
.af-hello__who b{font-size:.92rem;color:var(--fg)}
.af-hello__who span{font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-subtle)}
.af-hello__hi{margin:.3rem 0 0;padding:.55rem .75rem;border:var(--rule);border-radius:2px var(--r-sm) var(--r-sm) var(--r-sm);background:var(--bg-elev);
  font-size:.9rem;line-height:1.5;color:var(--fg)}
.af-hello__team{list-style:none;margin:.45rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem}
.af-hello__team li{padding:.14rem .5rem;border:1px solid color-mix(in oklab,var(--c) 40%,var(--line));border-radius:var(--r-pill);font-size:.7rem;color:var(--fg-body)}
.af-hello__r{transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.af-hello.is-armed .af-hello__r:not(.is-on){opacity:0;transform:translateY(10px)}

/* ── One-click engage ── */
.af-eng__card{padding:clamp(1.1rem,2.6vw,1.6rem);background:linear-gradient(180deg,color-mix(in oklab,var(--c) 9%,var(--card)) 0,var(--card) 8rem)}
.af-eng__top{display:flex;align-items:center;gap:.9rem}
.af-eng__id{display:grid;gap:.12rem;flex:1 1 auto;min-inline-size:0;margin:0}
.af-eng__id b{font-size:1.15rem;color:var(--fg)}
.af-eng__id span{font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-muted)}
.af-eng__state{display:grid;margin:0}
.af-eng__s{grid-area:1/1;justify-self:end;display:inline-flex;align-items:center;gap:.4rem;padding:.28rem .7rem;border:var(--rule);border-radius:var(--r-pill);
  font-size:.74rem;font-weight:700;color:var(--fg);white-space:nowrap;opacity:0;transition:opacity .3s var(--ease-out)}
.af-eng__s::before{content:'';inline-size:7px;block-size:7px;border-radius:50%;background:var(--fg-subtle)}
.af-eng__s--busy::before{background:var(--accent-text)}
.af-eng__s--on{border-color:color-mix(in oklab,var(--c) 55%,var(--line));background:color-mix(in oklab,var(--c) 12%,transparent)}
.af-eng__s--on::before{background:var(--c)}
.af-eng:not(.is-armed) .af-eng__s--on,.af-eng.is-stowed .af-eng__s--stowed,.af-eng.is-busy .af-eng__s--busy,.af-eng.is-on .af-eng__s--on{opacity:1}
html[data-motion="on"] .af-eng.is-busy .af-eng__s--busy::before{animation:af-blink 1s ease-in-out infinite}
.af-eng__steps{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.5rem}
.af-eng__step{display:flex;align-items:center;gap:.65rem;font-size:.93rem;color:var(--fg);transition:opacity .35s var(--ease-out)}
.af-eng__tick{display:grid;place-items:center;flex:none;inline-size:2rem;block-size:2rem;border-radius:50%;border:1px solid color-mix(in oklab,var(--c) 55%,var(--line));
  background:color-mix(in oklab,var(--c) 12%,transparent);color:var(--fg)}
.af-eng.is-armed .af-eng__step:not(.is-done):not(.is-now){opacity:.42}
html[data-motion="on"] .af-eng .af-eng__step.is-now .af-eng__tick{animation:af-ping 1.1s var(--ease-out) infinite}
.af-eng__done{display:flex;align-items:center;gap:.5rem;margin:1.05rem 0 0;font-size:.92rem;font-weight:600;color:var(--fg);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}
.af-eng__done .mcp-ico{color:var(--c)}
.af-eng.is-armed:not(.is-on) .af-eng__done{opacity:0;transform:translateY(4px)}
.af-eng__btns{display:flex;flex-wrap:wrap;gap:.5rem;margin-block-start:1.15rem}
.af-eng__btn{display:inline-flex;align-items:center;min-block-size:2.3rem;padding:0 .95rem;border:var(--rule);border-radius:var(--r-sm);font-size:.85rem;font-weight:600;color:var(--fg-muted);
  transition:transform var(--press,.12s) var(--ease-out),box-shadow .3s var(--ease-out)}
.af-eng__btn--go{border-color:var(--accent);background:var(--accent);color:var(--accent-contrast)}
.af-eng.is-press .af-eng__btn--go{transform:scale(.95);box-shadow:0 0 0 4px var(--accent-soft)}
@keyframes af-blink{50%{opacity:.25}}
@keyframes af-ping{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--c) 55%,transparent)}100%{box-shadow:0 0 0 10px transparent}}
.af-steps{list-style:none;margin:clamp(1.3rem,2.6vw,1.8rem) 0 0;padding:0;display:grid;gap:.95rem}
.af-steps__s{display:grid;grid-template-columns:2.2rem minmax(0,1fr);column-gap:.6rem;row-gap:.15rem}
.af-steps__n{grid-row:span 2;padding-block-start:.18rem;font-size:.75rem;font-weight:700;letter-spacing:.12em;color:var(--accent-text);font-variant-numeric:tabular-nums}
.af-steps__t{font-size:1.02rem;font-weight:600;color:var(--fg)}
.af-steps__b{font-size:.93rem;line-height:1.55;color:var(--fg-muted)}
.af-dis{margin-block-start:clamp(1.3rem,2.6vw,1.8rem);padding-block-start:1.2rem;border-top:var(--rule)}
.af-dis__t{display:flex;align-items:center;gap:.5rem;margin:0;font-size:1.02rem;font-weight:600;color:var(--fg)}
.af-dis__t .mcp-ico{color:var(--accent-text)}
.af-dis__b{margin:.4rem 0 0;font-size:.93rem;line-height:1.55;color:var(--fg-muted)}
.af-dis__rec{display:flex;align-items:center;gap:.5rem;margin:.85rem 0 0;font-size:.86rem;color:var(--fg-muted)}
.af-dis__rec .mcp-ico{color:var(--accent-text)}

/* ── Grounded: topic, action, answer, with a light crossing each in turn ── */
.af-flow{margin:0}
.af-flow__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--gap);grid-template-columns:minmax(0,1fr)}
@media (min-width:56rem){.af-flow__list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.af-flow__step{position:relative;display:grid;align-content:start;gap:.5rem;padding:clamp(1.2rem,2.2vw,1.7rem);border:var(--rule);border-radius:var(--card-r);background:var(--card)}
.af-flow__step::after{content:'';position:absolute;inset:-1px -1px auto;block-size:2px;border-radius:var(--card-r) var(--card-r) 0 0;background:var(--accent-text);transform-origin:0 50%}
html[data-motion="on"] .af-flow .af-flow__step::after{transform:scaleX(0)}
html[data-motion="on"] .af-flow.is-live .af-flow__step::after{animation:af-lit 4.8s var(--ease-out) infinite}
html[data-motion="on"] .af-flow.is-live .af-flow__step:nth-child(2)::after{animation-delay:1.2s}
html[data-motion="on"] .af-flow.is-live .af-flow__step:nth-child(3)::after{animation-delay:2.4s}
@keyframes af-lit{0%{transform:scaleX(0);opacity:1}18%{transform:scaleX(1);opacity:1}62%{transform:scaleX(1);opacity:1}78%,100%{transform:scaleX(1);opacity:0}}
@media (min-width:56rem){
  /* the connector between two steps, drawn in the gap */
  .af-flow__step + .af-flow__step::before{content:'';position:absolute;inset-inline-start:calc(-1 * var(--gap) - 1px);inset-block-start:2.95rem;inline-size:var(--gap);block-size:2px;background:var(--line-strong)}
}
.af-flow__ico{display:grid;place-items:center;inline-size:2.75rem;block-size:2.75rem;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent-text)}
.af-flow__h{margin:.35rem 0 0;font-size:1.14rem;font-weight:600;color:var(--fg)}
.af-flow__p{margin:0;font-size:.95rem;line-height:1.6;color:var(--fg-muted)}
.af-flow .af-chips{margin-block-start:.5rem}
.af-note{display:flex;align-items:center;gap:.55rem;margin:clamp(1.2rem,2.4vw,1.8rem) 0 0;font-size:.97rem;line-height:1.55;color:var(--fg-muted)}
.af-note .mcp-ico{flex:none;color:var(--accent-text)}

/* ── They step in: the helper card and the ask box ── */
.af-helpfig__a{display:flex;gap:.6rem;align-items:flex-start;margin:0;font-size:.93rem;line-height:1.55;color:var(--fg)}
.af-helpfig__mark{flex:none;inline-size:1.35rem;block-size:auto;margin-block-start:.12rem;color:var(--accent-text)}
.af-helper{display:flex;gap:.75rem;align-items:flex-start;padding:.85rem .95rem;border:1px solid color-mix(in oklab,var(--c) 45%,var(--line));border-radius:var(--card-r);
  background:color-mix(in oklab,var(--c) 8%,var(--bg-elev))}
.af-helper__txt{min-inline-size:0}
.af-helper__txt p{margin:0;font-size:.9rem;line-height:1.5;color:var(--fg)}
.af-helper__task{display:inline-flex;align-items:center;gap:.4rem;margin-block-start:.6rem;padding:.35rem .75rem;border:var(--rule);border-radius:var(--r-pill);font-size:.82rem;color:var(--fg)}
.af-helper__task .mcp-ico{color:var(--c)}
.af-ask{display:flex;align-items:center;gap:.65rem;margin:0;padding:.65rem .8rem;border:var(--rule-strong);border-radius:var(--r-sm);background:var(--bg);font-size:.88rem;color:var(--fg-muted)}
.af-ask__faces{display:inline-flex;flex:none;padding-inline-start:.15rem}
.af-ask__faces .af-av + .af-av{margin-inline-start:-.3rem}

/* ── The promises: six, in threes on a wide screen ── */
@media (min-width:62rem){
  .mcp-rules.af-rules{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mcp-rules.af-rules > *{grid-column:auto}
}

/* the ask box wears Agentforce's hearts and stars, as the portal's does */
.mcp-hearts--ask{font-size:1.2rem}

/* ── The ohana way (v3.34.0): five Hawaiian values, one lived by each agent. Cards in the home page's
   inked style: a 2px top edge in the agent's hue that draws in as the row arrives and a soft light of
   that hue from the top (colour themes only; Mono and Daylight keep the hairline). Five cards: one
   row on a wide screen, three over two (the two centred) on a tablet, one column on a phone. ── */
.af-way{list-style:none;margin:0;padding:0;display:grid;gap:var(--gap);grid-template-columns:minmax(0,1fr)}
@media (min-width:44rem) and (max-width:71.99rem){
  .af-way{grid-template-columns:repeat(6,minmax(0,1fr))}
  .af-way__v{grid-column:span 2}
  .af-way__v:nth-child(4){grid-column:2 / span 2}
}
@media (min-width:72rem){.af-way{grid-template-columns:repeat(5,minmax(0,1fr))}}
.af-way__v{position:relative;display:flex;flex-direction:column;gap:.5rem;padding:1.4rem 1.25rem 1.2rem;
  border:var(--rule);border-radius:var(--card-r);background:var(--card);overflow:hidden}
html.theme-color .af-way__v{background:radial-gradient(90% 60% at 18% 0%,color-mix(in oklab,var(--c) 15%,transparent),transparent 72%),var(--card)}
.af-way__v::before{content:'';position:absolute;inset:0 0 auto;block-size:2px;background:var(--line-edge,rgba(255,255,255,.38))}
html.theme-color .af-way__v::before{background:var(--c)}
html[data-motion='on'] .v2-reveal .af-way__v::before{transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--ease-out) calc(.15s + var(--i,0) * 90ms)}
html[data-motion='on'] .v2-reveal.is-in .af-way__v::before{transform:none}
.af-way__w{margin:0;font-size:clamp(1.75rem,1.25rem + 1.2vw,2.35rem);font-weight:500;line-height:1.05;letter-spacing:-.015em;color:var(--fg)}
.af-way__g{margin:0;font-size:.95rem;font-weight:600;line-height:1.35;color:var(--accent-text);text-wrap:balance}
.af-way__p{flex:1;margin:.25rem 0 0;font-size:.95rem;line-height:1.6;color:var(--fg-body)}
.af-way__who{display:flex;align-items:center;gap:.55rem;margin:.55rem 0 0;padding-block-start:.8rem;border-block-start:var(--rule);font-size:.86rem;font-weight:600;color:var(--fg)}
.af-way__note{max-inline-size:52rem}

/* ── A Salesforce CRM move, with the whole ohana (v3.34.0): five steps, each with the agent who steps
   in, the thread between them in the agents' hues (the circle's hand-off, unrolled). A timeline down
   the page on smaller screens; five columns in a row on a wide one. ── */
.af-crm{--crm-gap:1.75rem;list-style:none;margin:0;padding:0;display:grid;gap:var(--crm-gap)}
.af-crm__s{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1.15rem}
.af-crm__who{display:flex;flex-direction:column;align-items:center;gap:.4rem}
.af-crm__n{font-size:.72rem;font-weight:700;letter-spacing:.1em;color:var(--accent-text);font-variant-numeric:tabular-nums}
.af-crm__s:not(:last-child) .af-crm__who::after{content:'';flex:1 1 auto;inline-size:1px;min-block-size:1.25rem;margin-block-end:calc(-1 * var(--crm-gap));
  background:linear-gradient(var(--c),color-mix(in oklab,var(--c) 25%,transparent))}
.af-crm__t{margin:.35rem 0 0;font-size:1.12rem;font-weight:600;line-height:1.3;color:var(--fg);text-wrap:balance}
.af-crm__agent{display:block;margin-block-start:.25rem;font-size:.8rem;font-weight:600;letter-spacing:.01em;color:var(--fg-muted)}
.af-crm__b{margin:.55rem 0 0;font-size:.97rem;line-height:1.6;color:var(--fg-body)}
.af-crm__asks{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin:.8rem 0 0}
.af-crm__ask-l{font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--fg-subtle)}
.af-crm__ask{display:inline-flex;align-items:center;gap:.45rem;min-block-size:2rem;padding:.4rem .75rem;border:var(--rule);border-radius:var(--r-btn,6px);
  font-size:.84rem;line-height:1.35;color:var(--fg);background:var(--bg-elev)}
.af-crm__ask .mcp-ico{flex:none;color:var(--accent-text)}
@media (min-width:80rem){
  .af-crm{--crm-gap:clamp(1.25rem,2vw,2.25rem);grid-template-columns:repeat(5,minmax(0,1fr))}
  .af-crm__s{grid-template-columns:minmax(0,1fr);row-gap:.4rem;align-content:start}
  .af-crm__who{flex-direction:row;gap:.6rem}
  .af-crm__s:not(:last-child) .af-crm__who::after{inline-size:auto;block-size:1px;min-block-size:0;margin-block-end:0;margin-inline-end:calc(-1 * var(--crm-gap));
    background:linear-gradient(90deg,var(--c),color-mix(in oklab,var(--c) 25%,transparent))}
  .af-crm__asks{flex-direction:column;align-items:flex-start}
}
.af-crm__more{margin:clamp(1.5rem,3vw,2.25rem) 0 0}

@media (prefers-reduced-motion:reduce){.af-tab,.af-tab::after,.af-index__go,.af-eng__btn{transition:none}}