/* v3-app-cfo.css */
/* CFO-only additions to the shared app kit. Amounts are US$m throughout. */
.ap-cfo button{font:inherit;letter-spacing:inherit;border:0;cursor:pointer}
.ap-cfo button:focus-visible{outline:2px solid var(--ap-blue);outline-offset:3px}
.ap-cfo .ap-top{gap:8px}
.ap-cfo .ap-live{flex-shrink:0}
.ap-cfo .ap-kpi{padding:10px 14px}
.ap-cfo .ap-chip.loss{background:#fbece7;color:var(--bad)}
.ap-cfo .ap-chip.gain{background:#e6f4ef;color:var(--good)}
.ap-cfo .ap-cfo-bridge{margin-top:16px}
.ap-cfo-bridge > .ap-zone{margin:0 0 10px}
.ap-cfo-bridge-grid{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:20px}
/* A labelled 30–44 axis keeps the small movements legible, without implying zero. */
.ap-cfo-waterfall{height:274px;display:grid;grid-template-columns:26px repeat(5,minmax(0,1fr));gap:8px;padding:16px 0 28px}
.ap-cfo-axis{position:relative;color:var(--ap-head);font-size:11px}
.ap-cfo-axis span{position:absolute;bottom:0;transform:translateY(50%)}
.ap-cfo-axis span:nth-child(1){bottom:238px}.ap-cfo-axis span:nth-child(2){bottom:170px}.ap-cfo-axis span:nth-child(3){bottom:85px}
.ap-cfo-column{position:relative;box-shadow:0 1px 0 var(--ap-line)}
.ap-cfo-column::after{content:"";position:absolute;bottom:var(--level);left:calc(50% + 23px);width:calc(50% - 15px);border-top:1px dashed var(--ap-icon)}
.ap-cfo-column:last-child::after{display:none}
.ap-cfo-bar{position:absolute;bottom:var(--bottom);height:var(--height);left:50%;width:46px;transform:translateX(-50%) scaleY(0);transform-origin:bottom;border-radius:6px;background:var(--data-1);transition:transform .4s var(--ap-ease);overflow:hidden}
.ap-cfo-gain{background:var(--gain-fill)}.ap-cfo-loss,.ap-cfo-markets{background:var(--loss-fill)}
.ap-cfo-column > b{position:absolute;left:50%;bottom:calc(var(--bottom) + var(--height) + 5px);transform:translateX(-50%);font-size:13px;opacity:0;transition:opacity .3s;white-space:nowrap}
.ap-cfo-column > span{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12px;color:var(--ap-muted)}
.ap-cfo-markets{padding:0;display:flex;flex-direction:column}
.ap-cfo-markets i{width:100%;opacity:0;transition:opacity .3s;background:var(--data-1);flex:29}
.ap-cfo-markets i:nth-child(2){background:var(--data-2);flex:4}.ap-cfo-markets i:nth-child(3){background:var(--data-3);flex:6}
.ap-cfo [data-role="k1"].s1 .ap-cfo-column:nth-child(2) .ap-cfo-bar,
.ap-cfo [data-role="k1"].s2 .ap-cfo-column:nth-child(3) .ap-cfo-bar,
.ap-cfo [data-role="k1"].s3 .ap-cfo-column:nth-child(4) .ap-cfo-bar,
.ap-cfo [data-role="k1"].s4 .ap-cfo-column:nth-child(5) .ap-cfo-bar,
.ap-cfo [data-role="k1"].s5 .ap-cfo-column:nth-child(6) .ap-cfo-bar{transform:translateX(-50%) scaleY(1)}
.ap-cfo [data-role="k1"].s1 .ap-cfo-column:nth-child(2) > b,
.ap-cfo [data-role="k1"].s2 .ap-cfo-column:nth-child(3) > b,
.ap-cfo [data-role="k1"].s3 .ap-cfo-column:nth-child(4) > b,
.ap-cfo [data-role="k1"].s4 .ap-cfo-column:nth-child(5) > b,
.ap-cfo [data-role="k1"].s5 .ap-cfo-column:nth-child(6) > b{opacity:1}
.ap-cfo-market-list{padding:8px 12px;background:var(--ap-side);border-radius:8px;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s var(--ap-ease)}
.ap-cfo-market-list .ap-zone{margin:0 0 8px}
.ap-cfo-market-row{padding:10px 0;opacity:0;transition:opacity .3s}
.ap-cfo-market-row > div{display:flex;align-items:center;gap:6px}
.ap-cfo-market-row b{margin-left:auto}
.ap-cfo-market-row i{width:6px;height:6px;border-radius:50%;background:var(--data-1)}
.ap-cfo-market-row:nth-child(3) i{background:var(--data-2)}.ap-cfo-market-row:nth-child(4) i{background:var(--data-3)}
.ap-cfo-market-row > span{display:block;margin-left:12px;font-size:12px;color:var(--ap-muted)}
.ap-cfo-reconciled{margin:10px 0 0;font-size:12px;color:var(--ap-muted);opacity:0;transition:opacity .3s}
.ap-cfo [data-role="k1"].s6 .ap-cfo-market-list{opacity:1;transform:none}
.ap-cfo [data-role="k1"].s6 .ap-cfo-markets i,
.ap-cfo [data-role="k1"].s6 .ap-cfo-market-row:nth-child(2),
.ap-cfo [data-role="k1"].s7 .ap-cfo-market-row:nth-child(3),
.ap-cfo [data-role="k1"].s8 .ap-cfo-market-row:nth-child(4),
.ap-cfo [data-role="k1"].s8 .ap-cfo-reconciled{opacity:1}
/* A reserved trace column leaves every business choice in view. */
.ap-cfo-trace-grid{display:grid;grid-template-columns:minmax(0,1fr) 272px;gap:20px;margin-top:18px}
.ap-cfo-traces{mask-image:none;-webkit-mask-image:none;overflow:visible}
.ap-cfo-traces .ap-tr{grid-template-columns:174px minmax(0,1fr);gap:12px;margin:0;padding:10px;height:auto;min-height:72px}
.ap-cfo-traces .ap-th{min-height:32px;font-size:11px;padding:0 10px;line-height:16px}
.ap-cfo-trace-row{width:100%;background:transparent;text-align:left;color:var(--ap-body);opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s var(--ap-ease),background .3s}
.ap-cfo-trace-row .ap-chip{justify-self:start}
.ap-cfo [data-role="k2"].s1 .ap-cfo-trace-row:nth-child(2),
.ap-cfo [data-role="k2"].s2 .ap-cfo-trace-row:nth-child(3),
.ap-cfo [data-role="k2"].s3 .ap-cfo-trace-row:nth-child(4),
.ap-cfo [data-role="k2"].s4 .ap-cfo-trace-row:nth-child(5),
.ap-cfo [data-role="k2"].s5 .ap-cfo-trace-row:nth-child(6){opacity:1;transform:none}
.ap-cfo [data-role="k2"].s6 [data-germany]{background:var(--ap-sel)}
.ap-cfo .ap-cfo-trace-drawer{position:relative;inset:auto;width:auto;min-height:420px;border-radius:12px;box-shadow:var(--ap-s2);opacity:0;transform:translateX(12px);visibility:hidden;transition:opacity .35s,transform .35s var(--ap-ease),visibility .35s}
.ap-cfo [data-role="k2"].s7 .ap-cfo-trace-drawer{opacity:1;transform:none;visibility:visible}
.ap-cfo-trace-drawer .ap-dh .ap-chip{font-size:11px;color:var(--ap-muted)}
.ap-cfo-trace-detail .ap-zone{margin:14px 0 6px}
.ap-cfo-trace-detail p,.ap-cfo-trace-drawer .ap-ev p{margin:4px 0;font-size:13px;line-height:20px}
.ap-cfo [data-role="k2"] .ap-ev{opacity:0;transform:translateY(6px)}
.ap-cfo [data-role="k2"].s8 .ap-ev{opacity:1;transform:none}
/* Board actions use the kit card, figure, owner chip and button. */
.ap-cfo-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ap-cfo .ap-cfo-action{margin:6px 0 0;padding:16px;display:flex;flex-direction:column;align-items:flex-start;min-height:272px;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s var(--ap-ease)}
.ap-cfo-action :is(h5,.ap-h5){font:inherit;line-height:20px;color:var(--ap-ink);margin:14px 0 22px;min-height:60px}
.ap-cfo-action .ap-fig{margin-top:auto}
.ap-cfo-action:last-child .ap-fig strong{font-family:var(--sans);font-size:20px}
.ap-cfo-owner{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:18px;font-size:12px;color:var(--ap-muted)}
.ap-cfo-board-actions{opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.ap-cfo [data-role="k3"].s2 .ap-cfo-action:nth-child(1),
.ap-cfo [data-role="k3"].s3 .ap-cfo-action:nth-child(2),
.ap-cfo [data-role="k3"].s4 .ap-cfo-action:nth-child(3){opacity:1;transform:none}
.ap-cfo [data-role="k3"].s5 .ap-cfo-board-actions{opacity:1;visibility:visible}
.ap-cfo [data-role="k3"] .ap-toast{opacity:0;visibility:hidden}
.ap-cfo [data-role="k3"].s6 .ap-toast{opacity:1;visibility:visible;transform:translate(-50%,0);white-space:nowrap}
/* Keep the app legible on smaller screens rather than scaling its text. */
@media(max-width:1100px){
  .ap-cfo-wrap::before{inset:0}
  .ap-cfo .ap-screen{grid-template-columns:180px 1fr}
  .ap-cfo .v3-scene{padding:18px 20px 0}
  .ap-cfo-bridge-grid{grid-template-columns:minmax(0,1fr) 210px;gap:12px}
  .ap-cfo-trace-grid{grid-template-columns:minmax(0,1fr) 240px;gap:12px}
  .ap-cfo-traces .ap-tr{grid-template-columns:1fr;gap:4px;min-height:78px}
  .ap-cfo-traces .ap-th{min-height:36px;display:block}
  .ap-cfo-traces .ap-th span{display:block}
  .ap-cfo-column > span{font-size:11px}
}
@media(max-width:900px){
  .ap-cfo .ap-screen{grid-template-columns:1fr;min-height:600px}
  .ap-cfo .ap-side{display:none}
}
@media(max-width:600px){
  .ap-cfo[data-role="k2"] .ap-screen{height:1140px;min-height:1140px}
  .ap-cfo .ap-screen{height:1000px;min-height:1000px}
  .ap-cfo .ap-main{grid-template-rows:78px 1fr}
  .ap-cfo .ap-top{padding:10px 14px;flex-wrap:wrap;align-content:center;gap:6px}
  .ap-cfo .ap-top .ap-live{order:2;max-width:100%;width:100%}
  .ap-cfo .ap-top > .ap-chip:last-child{display:none}
  .ap-cfo .v3-scene{padding:18px 14px 0}
  .ap-cfo .ap-title{align-items:flex-start;flex-wrap:wrap;gap:8px}
  .ap-cfo .ap-title :is(h4,.ap-h4){font-size:20px}
  .ap-cfo .ap-kpis{gap:6px}
  .ap-cfo .ap-kpi{padding:10px 8px}.ap-cfo .ap-kpi strong{font-size:18px}
  .ap-cfo-bridge-grid,.ap-cfo-trace-grid,.ap-cfo-actions{grid-template-columns:1fr}
  .ap-cfo .ap-cfo-bridge{padding:12px 8px}
  .ap-cfo-waterfall{gap:4px;grid-template-columns:20px repeat(5,minmax(0,1fr))}
  .ap-cfo-bar{width:30px}.ap-cfo-column::after{left:calc(50% + 15px);width:calc(50% - 11px)}
  .ap-cfo-column > span{white-space:normal;text-align:center;line-height:14px}
  .ap-cfo-traces .ap-tr{grid-template-columns:1fr;min-height:66px;padding:6px 8px}
  .ap-cfo-traces .ap-th{min-height:36px}
  .ap-cfo .ap-cfo-trace-drawer{min-height:0}
  .ap-cfo-trace-drawer .ap-path{padding-top:8px}
  .ap-cfo-trace-drawer .ap-dbody{padding:10px 16px}
  .ap-cfo .ap-cfo-action{min-height:0;padding:12px 14px;display:grid;grid-template-columns:1fr auto;gap:8px}
  .ap-cfo-action > .ap-chip{justify-self:start}
  .ap-cfo-action :is(h5,.ap-h5){grid-column:1;min-height:0;margin:0}
  .ap-cfo-action .ap-fig{grid-column:2;grid-row:1/3;align-self:center;margin:0;text-align:right}
  .ap-cfo-action .ap-fig strong,.ap-cfo-action:last-child .ap-fig strong{font-size:18px}
  .ap-cfo-action .ap-fig em{display:block;max-width:96px;line-height:16px}
  .ap-cfo-owner{grid-column:1/-1;margin:0}
  .ap-cfo-board-actions{align-items:flex-start;flex-direction:column}
  .ap-cfo [data-role="k3"].s6 .ap-toast{white-space:normal;bottom:24px;width:calc(100% - 28px);max-width:none}
}

/* v3-app-funds.css */
/* Funds hero: Treasury's app kit, with class attribution and a 90–100% band. */
.ap-funds .ap-main{grid-template-rows:76px 1fr}
.ap-funds .ap-crumb{grid-column:1;grid-row:1}
.ap-funds .ap-chip.loss{background:#fbece7;color:var(--bad)}
.ap-funds .ap-chip.gain{background:#e6f4ef;color:var(--good)}
.ap-funds .ap-funds-zone{margin-top:0}
.ap-funds .ap-drawer{width:376px}
.ap-funds .ap-dh{flex-shrink:0}
.ap-funds .ap-funds-classes{mask-image:none;-webkit-mask-image:none}
.ap-funds .ap-funds-classes .ap-tr{grid-template-columns:1.5fr 1fr 1fr}
.ap-funds .ap-funds-classes .ap-tr > :nth-child(2){text-align:right}
.ap-funds .ap-funds-classes .ap-funds-group{grid-column:2/4;color:var(--ap-muted);font-size:12px}
.ap-funds .ap-share u b{background:var(--loss-fill)}
.ap-funds .ap-part u b::after{background:var(--loss-fill)}
.ap-funds .ap-funds-copy{opacity:0;visibility:hidden;transition:opacity .35s;margin-top:12px}
.ap-funds .s4 .ap-funds-copy{opacity:1;visibility:visible}
.ap-funds .s2 .ap-stepA{pointer-events:auto}
.ap-funds .s3 .ap-stepA{pointer-events:none;visibility:hidden}
.ap-funds .s3 .ap-stepB{pointer-events:auto}
.ap-funds .ap-table-drv .ap-tr{grid-template-columns:2fr .6fr 1fr 1fr}
.ap-funds .s2 .ap-split .m{width:33.333%}
.ap-funds .s2 .ap-split .b{width:66.667%}
.ap-funds .ap-funds-conclusion{display:flex;align-items:center;gap:10px;margin-top:18px;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s var(--ap-ease)}
.ap-funds .s3 .ap-funds-conclusion{opacity:1;transform:none}
.ap-funds .ap-bhead,.ap-funds .ap-brow{grid-template-columns:155px 1fr 140px}
.ap-funds .ap-btrack .band{left:81.8%;width:9.1%}
.ap-funds .ap-funds-target{position:absolute;left:86.4%;top:-6px;bottom:-6px;width:1px;background:var(--good)}
.ap-funds .ap-funds-class .fill{background:var(--loss-fill)}
.ap-funds .ap-funds-class .now,.ap-funds .ap-funds-class .in{display:none}
.ap-funds .s2 .ap-funds-class{background:var(--loss-fill-2)}
.ap-funds .s4 .ap-funds-class{background:transparent}
.ap-funds .s4 .ap-funds-class .fill{width:var(--w2);background:var(--data-1)}
.ap-funds .s4 .ap-funds-class .was,.ap-funds .s4 .ap-funds-class .off,.ap-funds .s4 .ap-funds-class small{display:none}
.ap-funds .s4 .ap-funds-class .now,.ap-funds .s4 .ap-funds-class .in{display:inline-flex}
.ap-funds .ap-funds-ready{margin-top:18px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .4s,transform .4s var(--ap-ease)}
.ap-funds .s4 .ap-funds-ready{opacity:1;visibility:visible;transform:none}
/* The trade drawer closes before the coverage result and copy action. */
.ap-funds [data-role="f3"].s4 .ap-drawer-tp{transform:translateX(104%)}
.ap-funds .v3-cursor{transition:transform .45s var(--ap-ease),opacity .3s}
.ap-funds .ap-toast{white-space:nowrap}
.ap-funds [data-role="f1"] .ap-toast{left:calc((100% - 376px)/2)}
/* Keep the screen readable on narrow pages without scaling down UI type. */
@media(max-width:1000px){
  .ap-funds .ap-screen{grid-template-columns:170px 1fr}
  .ap-funds .v3-scene{padding:18px 18px 0}
  .ap-funds .ap-title{align-items:flex-start;gap:8px}
  .ap-funds .ap-title p{max-width:250px}
  .ap-funds .ap-scope{flex-wrap:wrap;justify-content:flex-end}
  .ap-funds .ap-bhead,.ap-funds .ap-brow{grid-template-columns:140px 1fr 120px;gap:8px}
  .ap-funds .ap-kpi{padding:10px}
  .ap-funds .ap-kpi strong{font-size:19px}
}
@media(max-width:760px){
  .ap-funds .ap-screen{grid-template-columns:1fr}
  .ap-funds .ap-side{display:none}
  .ap-funds .ap-top{padding:6px 12px;grid-template-columns:1fr auto}
  .ap-funds .ap-live{grid-column:2;max-width:230px}
  .ap-funds .ap-crumb{font-size:11px}
  .ap-funds .ap-top > .ap-chip.loss{display:none}
  .ap-funds .ap-top > .ap-chip.plain{justify-self:start}
  .ap-funds .ap-top > .ap-chip:last-child{justify-self:end}
  .ap-funds .ap-title{flex-wrap:wrap}
  .ap-funds .ap-title :is(h4,.ap-h4){font-size:20px}
  .ap-funds .ap-title p{max-width:none}
  .ap-funds .ap-drawer{width:min(376px,100%)}
  .ap-funds [data-role="f1"] .ap-toast{left:50%;bottom:6px}
  .ap-funds .ap-funds-copy{margin-top:6px}
  .ap-funds .ap-kpis{gap:6px;margin-top:12px}
  .ap-funds .ap-kpi small{font-size:11px}
  .ap-funds .ap-kpi strong{font-size:16px;white-space:nowrap}
  .ap-funds .ap-kpi em{line-height:14px}
  .ap-funds .ap-share{padding-left:8px;gap:4px}
  .ap-funds .ap-funds-classes .ap-tr{grid-template-columns:1.6fr 1fr .6fr;font-size:12px}
  .ap-funds .ap-funds-classes .ent i{display:none}
  .ap-funds .ap-funds-classes .ap-funds-group{font-size:11px}
  .ap-funds .ap-table-drv .ap-tr{grid-template-columns:1.7fr .6fr 1fr;height:46px;font-size:12px;gap:6px}
  .ap-funds .ap-table-drv .ap-share{display:none}
  .ap-funds .ap-split-scale{gap:12px}
  .ap-funds .ap-bhead,.ap-funds .ap-brow{grid-template-columns:125px 1fr 65px;gap:8px}
  .ap-funds .ap-brow{height:56px}
  .ap-funds .ap-bval{flex-direction:column;gap:1px}
  .ap-funds .ap-bval .ap-chip{font-size:11px;padding:0 4px}
  .ap-funds .ap-board .ap-zone{align-items:flex-start;gap:8px}
  .ap-funds .ap-funds-ready{flex-wrap:wrap}
  .ap-funds .ap-funds-conclusion{font-size:12px;gap:6px}
}
@media(prefers-reduced-motion:reduce){
  .ap-funds [data-role="f3"].s5 .ap-drawer-tp{transform:translateX(104%)}
}

/* one-line top bar, like the other heroes (reviewed 2026-10-08) */
.ap-funds .ap-live.on{max-width:300px}
.ap-funds .ap-live em{overflow:hidden;text-overflow:ellipsis}

/* Phone pass 3 (2026-10-13): the conclusion pill above its sentence, not squeezed beside it */
@media (max-width:600px){
  .ap-funds .ap-funds-conclusion{flex-direction:column;align-items:flex-start;gap:8px}
}

/* v3-app-home.css */
/* Homepage hero: one frame that becomes each role page's first screen. */
.ap-home .ap-side[data-side="funds"],
.ap-home[data-role="f3"] .ap-side[data-side="corp"]{display:none}
.ap-home[data-role="f3"] .ap-side[data-side="funds"]{display:flex}
.ap-home .ap-top [data-for]{display:none}
.ap-home[data-role="k1"] .ap-top [data-for~="k1"],
.ap-home[data-role="a1"] .ap-top [data-for~="a1"],
.ap-home[data-role="f3"] .ap-top [data-for~="f3"]{display:inline-flex}
.v3-hero-home .v3-tabs-roles{max-width:none;margin:0 auto 26px}
.v3-hero-home .v3-tabs-roles .v3-tab span{font-size:16px}
/* one top-bar height for all three seats, so switching tabs never jumps */
.ap-home.ap-funds .ap-main{grid-template-rows:52px 1fr}

/* Finance leaders door: a small plan-to-actual bridge that matches the CFO hero */
.ch-viz.ap .cb{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;height:128px;margin:16px 4px 0;padding-bottom:18px;box-shadow:inset 0 -1px 0 var(--ap-line)}
.cb-c{position:relative}
.cb-c i{position:absolute;left:12%;right:12%;display:flex;flex-direction:column;border-radius:3px;background:var(--data-1);overflow:hidden;transition:opacity .3s}
.cb-c i.up{background:var(--gain-fill,#7fc9b5)}
.cb-c i.dn{background:var(--loss-fill,#ec9c86)}
.cb-c b{display:block;flex:none;transition:background .35s}
.cb-m b:nth-child(2){background:#f0ae9c}
.cb-m b:nth-child(3){background:#f6cfc4}
.cb-c em{position:absolute;left:0;right:0;font-style:normal;font-size:11px;text-align:center;color:var(--ap-ink);transform:translateY(-15px)}
.cb-c small{position:absolute;left:-4px;right:-4px;bottom:-18px;font-size:11px;text-align:center;color:var(--ap-muted);white-space:nowrap}
.cb-c em.neg{color:var(--bad)}.cb-c em.pos{color:var(--good)}
.cb-tags{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.cb-tags span{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:6px;background:var(--ap-sunk);font-size:11px;color:var(--ap-body);white-space:nowrap;transition:background .3s}
.cb-tags i{width:7px;height:7px;border-radius:2px;background:#ec9c86}
.cb-tags span:nth-child(2) i{background:#f0ae9c}.cb-tags span:nth-child(3) i{background:#f6cfc4}
.cb-tags b{font-weight:400;color:var(--bad)}
.ch-door:hover .cb-c:not(.cb-m) i,.ch-door:focus-visible .cb-c:not(.cb-m) i{opacity:.45}
.ch-door:hover .cb-tags span,.ch-door:focus-visible .cb-tags span{background:#fbece7}

/* v3-sec.css */
/* Section system (2026-10-08): every section below the hero shows real
   product cards (the .ap kit) on a quiet dot-grid stage, with one layout
   rhythm: kicker, headline, one line, then the stage. Prefix sx-. */

.sx .sx-copy{max-width:520px}
.sx .sx-copy-wide{max-width:none;margin-bottom:36px}
.sx .sx-copy-wide .v3-p{margin-top:12px}
.sx-split{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:center}

/* the stage: a soft panel with a dot grid; cards float on it */
.sx-stage{position:relative;padding:32px;border-radius:24px;background:
  radial-gradient(circle,rgba(56,115,145,.18) 1px,transparent 1.4px) 0 0/16px 16px,
  linear-gradient(180deg,#f8fbfd,#f3f8fb);
  box-shadow:inset 0 0 0 1px rgba(56,115,145,.08)}
.v3-sec-tint .sx-stage{background:radial-gradient(circle,rgba(56,115,145,.18) 1px,transparent 1.4px) 0 0/16px 16px,#fff}
.sx .ap-card{margin-top:0;padding:18px 20px;border-radius:14px;box-shadow:var(--ap-s2)}
.sx-ch{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.sx-ch b{font-weight:600;color:var(--ap-ink);font-size:14px}
.sx-ch strong{font-family:var(--mono);font-weight:400;font-size:18px;color:var(--ap-ink)}
.sx .num.neg,.sx .neg{color:var(--bad)}
.sx .num.pos{color:var(--good)}
.sw{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none}
.sw.h,.sx-stack .h{background:var(--data-1)}
.sw.o1,.sx-stack .o1{background:repeating-linear-gradient(135deg,#cfe6f1 0 5px,#a9d2e4 5px 10px)}
.sw.o2,.sx-stack .o2{background:repeating-linear-gradient(135deg,#fbe5de 0 5px,#f0b6a6 5px 10px)}

/* ---- the gap: problem cards with product fragments ---- */
.sx-pb .pb-item[aria-expanded="true"]{background:linear-gradient(180deg,#eef6fa,#e5f0f6)}
.sx-viz{display:block;width:420px;max-width:100%;margin:0 auto;text-align:left}
.sx-pb .pb-body{gap:22px}
.sx-ledger,.sx-tie,.sx-msg{display:block;padding:14px 16px;border-radius:14px;background:#fff;box-shadow:var(--ap-s2)}
.sx-lh{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.sx-lh b{font-family:var(--mono);font-weight:400;font-size:11px;color:var(--ap-muted)}
.sx-lrows{display:block;height:112px;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent)}
.sx-lscroll{display:block;animation:sx-scroll 7s linear infinite}
.sx-lscroll > span{display:grid;grid-template-columns:52px 1fr auto;gap:8px;height:28px;align-items:center;font-size:12px;color:var(--ap-body)}
.sx-lscroll i{font-style:normal;font-size:11px;color:var(--ap-head)}
.sx-lscroll b{font-family:var(--mono);font-weight:400;font-size:11px;color:var(--ap-ink)}
@keyframes sx-scroll{to{transform:translateY(-168px)}}
.sx-lsum{display:flex;justify-content:space-between;margin-top:6px;padding-top:10px;box-shadow:inset 0 1px 0 var(--ap-line);font-size:13px;color:var(--ap-ink)}
.sx-lsum b{font-family:var(--mono);font-weight:400}
.sx-tie small{display:block;font-size:12px;color:var(--ap-muted)}
.sx-tie strong{display:block;margin:4px 0 12px;font-family:var(--mono);font-weight:400;font-size:30px;line-height:36px}
.sx-tie-row{display:flex;justify-content:space-between;padding:10px 12px;margin-bottom:12px;border-radius:10px;background:var(--ap-sunk);font-size:12px;color:var(--ap-body)}
.sx-tie-row b{font-family:var(--mono);font-weight:400;color:var(--ap-ink)}
.sx-mh{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.sx-mh span{display:grid;line-height:16px}
.sx-mh b{font-size:13px;color:var(--ap-ink);font-weight:600}
.sx-mh small{font-size:11px;color:var(--ap-muted)}
.sx-mt{display:block;font-size:14px;line-height:21px;color:var(--ap-ink);margin-bottom:12px}
.sx-file{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--ap-sunk)}
.sx-file i,.sx-files i{display:grid;place-items:center;width:34px;height:26px;border-radius:6px;background:#e6f4ef;color:#2c7867;font-family:var(--mono);font-size:11px;font-weight:500}
.sx-file span{display:grid;line-height:17px;font-size:12px;color:var(--ap-ink)}
.sx-file small{font-size:11px;color:var(--bad)}
.sx-pb .pb-body > b{font-size:26px}

/* ---- what the total hides ---- */
.sx-seg span{cursor:pointer}
.sx-gap .sx-seg span:first-child{background:#fff;color:var(--ap-ink);box-shadow:var(--ap-s1)}
.sx-gap .sx-seg span:last-child{background:none;color:var(--ap-muted);box-shadow:none}
.sx-gap.is-actual .sx-seg span:first-child{background:none;color:var(--ap-muted);box-shadow:none}
.sx-gap.is-actual .sx-seg span:last-child{background:#fff;color:var(--ap-ink);box-shadow:var(--ap-s1)}
.sx-big{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sx-big small{display:block;font-size:12px;color:var(--ap-muted)}
.sx-big strong{display:block;font-family:var(--mono);font-weight:400;font-size:22px;line-height:30px;color:var(--ap-ink)}
.sx-big i{font-style:normal}
.sx-gap .a,.sx-big i.a{display:none}
.sx-gap.is-actual .a{display:block}
.sx-gap.is-actual .sx-big i.a{display:inline}
.sx-gap.is-actual .sx-big i.r{display:none}
.sx-gap.is-actual .sx-legend .a{display:flex}
.sx-gbar{display:flex;gap:3px;height:14px;margin:16px 0 14px;border-radius:7px;overflow:hidden;background:var(--ap-sunk)}
.sx-gbar i{display:block;height:100%;transition:width .9s var(--ap-ease)}
.sx-gbar .h{width:100%;background:var(--data-1)}
.sx-gbar .o{width:0;background:repeating-linear-gradient(135deg,#fbe5de 0 5px,#f0b6a6 5px 10px)}
.sx-gap.is-actual .sx-gbar .h{width:64.6%}
.sx-gap.is-actual .sx-gbar .o{width:35.4%}
.sx-legend{display:grid;gap:2px}
.sx-legend > div{display:flex;align-items:center;gap:10px;height:32px;font-size:13px;color:var(--ap-ink)}
.sx-legend span{flex:1}
.sx-legend b{font-family:var(--mono);font-weight:400;font-size:12px}
.sx-legend .a b{color:var(--bad)}
.sx-pl{margin-top:14px;padding-top:14px;box-shadow:inset 0 1px 0 var(--ap-line)}
.sx-pl small{font-size:12px;color:var(--ap-muted)}
.sx-plb{display:flex;gap:28px;height:92px;margin-top:22px;box-shadow:inset 0 1px 0 var(--ap-sunk-2)}
.sx-plb span{position:relative;width:48px}
.sx-plb span::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--h) * .7);border-radius:0 0 4px 4px;background:var(--loss-fill);transform-origin:top;animation:sx-drop .7s var(--ap-ease) both}
.sx-plb b{position:absolute;left:-6px;right:-6px;top:calc(var(--h) * .7 + 4px);text-align:center;font-size:11px;color:var(--bad)}
.sx-plb em{position:absolute;left:0;right:0;top:-18px;text-align:center;font-style:normal;font-size:11px;color:var(--ap-muted)}
@keyframes sx-drop{from{transform:scaleY(0)}}

/* ---- worked example: driver list + source pane ---- */
.sx-ex{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0!important;overflow:hidden}
.sx-ex-l{padding:20px 22px}
.sx-ex-r{padding:20px 22px;background:#fbfbfc;box-shadow:inset 1px 0 0 var(--ap-line);display:flex;flex-direction:column}
.sx-stack{display:flex;gap:2px;height:8px;border-radius:4px;overflow:hidden;background:var(--ap-sunk)}
.sx-stack .m{background:var(--data-1)}.sx-stack .b{background:var(--data-2)}
.sx-key{display:flex;gap:18px;margin:8px 0 14px;font-size:12px;color:var(--ap-muted)}
.sx-key span{display:inline-flex;align-items:center;gap:6px}
.sx-key i{width:8px;height:8px;border-radius:2px}.sx-key i.m{background:var(--data-1)}.sx-key i.b{background:var(--data-2)}
.sx-rows{display:grid;gap:2px}
.sx-rows button{display:grid;grid-template-columns:1fr auto 110px;align-items:center;gap:12px;height:42px;padding:0 12px;margin:0 -12px;border:0;border-radius:8px;background:none;font:inherit;color:var(--ap-ink);text-align:left;cursor:pointer;transition:background .25s}
.sx-rows button:hover{background:var(--ap-sunk)}
.sx-rows button[aria-selected="true"]{background:var(--ap-sel)}
.sx-rows button:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.sx-rows b{font-family:var(--mono);font-weight:400;font-size:13px;text-align:right}
.sx-total{display:flex;justify-content:space-between;margin-top:6px;padding:12px 0 0;box-shadow:inset 0 2px 0 var(--ap-ink);font-weight:600;color:var(--ap-ink)}
.sx-total b{font-family:var(--mono);font-weight:400}
.sx-src{animation:sx-in .4s var(--ap-ease)}
.sx-src small{display:block;font-size:12px;color:var(--ap-muted);margin-bottom:8px}
.sx-srow{display:flex;justify-content:space-between;gap:16px;padding:11px 0;box-shadow:inset 0 -1px 0 var(--ap-line);font-size:13px;color:var(--ap-ink)}
.sx-srow span{display:grid;line-height:18px}
.sx-srow em{font-style:normal;font-size:11px;color:var(--ap-muted)}
.sx-srow b{font-family:var(--mono);font-weight:400;font-size:13px;align-self:center}
.sx-ev{margin:auto 0 0;padding-top:16px;font-size:12px;color:var(--good)}
.sx-ev::before{content:"✓ "}
@keyframes sx-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- the fix ---- */
.sx-fix{display:grid;grid-template-columns:1fr 1.15fr;gap:20px;align-items:stretch}
.sx-stack-3{height:14px;border-radius:7px;margin-bottom:10px}
.sx-state{display:grid;grid-template-columns:12px 1fr auto;gap:12px;align-items:center;height:48px;box-shadow:inset 0 -1px 0 var(--ap-line);font-size:13px;color:var(--ap-ink)}
.sx-state:last-child{box-shadow:none}
.sx-state span b{font-family:var(--mono);font-weight:400;margin-left:8px}
.sx-tl{position:relative;height:150px;margin-top:6px}
.sx-tl-axis{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--ap-head)}
.sx-tl-track{position:absolute;left:0;right:0;bottom:22px;height:2px;background:var(--ap-sunk-2)}
.sx-tl-track .gap{position:absolute;top:-44px;height:44px;background:linear-gradient(180deg,rgba(236,156,134,.08),rgba(236,156,134,.22));border-radius:6px 6px 0 0;transform-origin:left;transform:scaleX(0);transition:transform 1.1s var(--ap-ease) .3s}
.is-in .sx-tl-track .gap{transform:none}
.sx-tl-track .ev{position:absolute;top:-4px;width:10px;height:10px;margin-left:-5px;border-radius:50%;box-shadow:0 0 0 3px #fff}
.sx-tl-track .ev.in{background:var(--gain-fill)}.sx-tl-track .ev.out{background:var(--loss-fill)}
.sx-tl-cards span{position:absolute;top:0;display:grid;transform:translateX(-12px);padding:8px 10px;border-radius:10px;background:#fff;box-shadow:var(--ap-s1);font-size:11px;line-height:15px;white-space:nowrap}
.sx-tl-cards span.r{transform:translateX(calc(-100% + 12px))}
.sx-tl-cards b{font-family:var(--mono);font-weight:400;font-size:12px;color:var(--ap-ink)}
.sx-tl-cards small{font-size:11px;color:var(--ap-muted)}
.sx-tl-gap{position:absolute;bottom:34px;text-align:center;font-size:12px;color:var(--bad);opacity:0;transition:opacity .5s 1.2s}
.is-in .sx-tl-gap{opacity:1}
.sx-tl-foot{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:12px;box-shadow:inset 0 1px 0 var(--ap-line);font-size:12px;color:var(--ap-muted)}
.sx-tl-foot b{font-family:var(--mono);font-weight:400;color:var(--ap-ink);margin-right:auto}
.sx-kinds{margin-top:20px}

/* ---- who asks ---- */
.sx-who{display:grid;grid-template-columns:.9fr 1.1fr;gap:20px;align-items:start}
.sx-roles{display:grid;gap:6px}
.sx-roles button{display:flex;align-items:center;gap:12px;padding:12px 14px;border:0;border-radius:12px;background:rgba(255,255,255,.6);font:inherit;text-align:left;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(23,25,28,.05);transition:background .25s,box-shadow .25s}
.sx-roles button[aria-selected="true"]{background:#fff;box-shadow:var(--ap-s2)}
.sx-roles span{display:grid;line-height:19px}
.sx-roles b{font-weight:600;color:var(--ap-ink);font-size:13px}
.sx-roles em{font-style:normal;font-size:13px;color:var(--ap-muted)}
.sx-roles button[aria-selected="true"] em{color:var(--ap-ink)}
.sx-ans{min-height:230px}
.sx-a{animation:sx-in .4s var(--ap-ease)}
.sx-bars{display:grid;gap:10px}
.sx-bars div{display:grid;grid-template-columns:110px 1fr 56px;gap:12px;align-items:center;font-size:13px;color:var(--ap-ink)}
.sx-bars i{height:8px;width:var(--w);border-radius:4px;background:var(--loss-fill)}
.sx-bars i.g{background:var(--gain-fill)}
.sx-bars b{font-family:var(--mono);font-weight:400;font-size:12px;text-align:right}
.sx-doc{display:grid;gap:8px}
.sx-doc span{padding:11px 12px;border-radius:10px;background:var(--ap-sunk);font-size:13px;color:var(--ap-ink)}
.sx-stack-lg{height:52px;border-radius:10px}
.sx-stack-lg i{display:flex;align-items:center;padding:0 14px;font-style:normal;font-size:13px}
.sx-stack-lg .m{color:#fff}.sx-stack-lg .b{color:var(--ap-ink)}

/* ---- your stack ---- */
.sx-flow{display:grid;grid-template-columns:230px 1fr 190px 36px 230px;align-items:center;min-height:240px}
.sx-files{display:grid;gap:18px}
.sx-files .ap-card{display:flex;align-items:center;gap:10px;padding:12px 14px!important;font-size:13px;color:var(--ap-ink);box-shadow:var(--ap-s1)!important}
.sx-files span span{display:grid;line-height:17px}
.sx-files small{font-family:var(--mono);font-size:11px;color:var(--ap-muted)}
.sx-wires{width:100%;height:240px;overflow:visible}
.sx-wires path{fill:none;stroke:rgba(56,115,145,.35);stroke-width:1.5;vector-effect:non-scaling-stroke}
.sx-wires circle{fill:var(--data-1)}
.sx-orbit{display:grid;justify-items:center;gap:4px;padding:22px 14px;border-radius:18px;background:#fff;box-shadow:var(--ap-s2);text-align:center}
.sx-mark svg{width:34px;height:22px;color:var(--ap-ink)}
.sx-orbit b{font-family:'Space Grotesk',var(--sans);font-weight:500;font-size:17px;color:var(--ap-ink)}
.sx-orbit small{font-size:11px;line-height:15px;color:var(--ap-muted)}
.sx-arrow{height:1.5px;background:var(--data-1);margin:0 4px;position:relative}
.sx-arrow::after{content:"";position:absolute;right:-1px;top:-3px;border:4px solid transparent;border-left:6px solid var(--data-1);border-right:0}
.sx-out{display:grid;gap:6px;justify-items:start}
.sx-out small{font-size:12px;color:var(--ap-muted)}
.sx-out strong{font-family:var(--mono);font-weight:400;font-size:24px}
.sx-princ{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:36px}
.sx-princ div{display:grid;gap:4px;padding-top:16px;box-shadow:inset 0 2px 0 var(--data-1)}
.sx-princ b{font-weight:600;font-size:17px;color:var(--ink)}
.sx-princ span{font-size:15px;color:var(--muted)}

/* ---- getting started ---- */
.sx-steps{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.sx-steps li{display:grid;gap:6px;align-content:start}
.sx-steps small{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--accent-2);margin-top:16px}
.sx-steps h3{margin:0;color:var(--ink)}
.sx-steps p{margin:0;font-size:15px;color:var(--muted)}
.sx-sv{height:136px;display:grid;align-content:center;gap:4px}
.sx-pick{display:block;padding:7px 10px;border-radius:8px;font-size:13px;color:var(--ap-muted)}
.sx-pick.on{background:var(--ap-sel);color:var(--ap-ink);box-shadow:inset 0 0 0 1px var(--data-2)}
.sx-sv-files{grid-auto-flow:column;justify-content:center;align-items:center;gap:8px}
.sx-sv-files i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--ap-body);background:var(--ap-sunk);border-radius:8px;padding:8px 10px;opacity:0;transform:translateY(-12px);transition:opacity .5s,transform .6s var(--ap-ease)}
.sx-sv-files i:nth-child(2){transition-delay:.2s}.sx-sv-files i:nth-child(3){transition-delay:.4s}
.is-in .sx-sv-files i{opacity:1;transform:none}
.sx-sv-trace{grid-template-columns:auto 1fr auto;align-items:center;gap:12px}
.sx-sv-trace strong{font-family:var(--mono);font-weight:400;font-size:20px}
.sx-sv-trace > i{height:1.5px;background:var(--data-2);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ap-ease) .6s}
.is-in .sx-sv-trace > i{transform:none}

@media (prefers-reduced-motion: reduce){
  .sx-lscroll,.sx-plb span::before{animation:none}
  .sx-tl-track .gap,.sx-sv-files i,.sx-sv-trace > i{transition:none;transform:none;opacity:1}
  .sx-tl-gap{opacity:1}
}
@media (max-width:900px){
  .sx-split,.sx-ex,.sx-fix,.sx-who,.sx-flow,.sx-princ,.sx-steps{grid-template-columns:1fr}
  .sx-wires,.sx-arrow{display:none}
}

/* the problem strip's headline styles must not reach the product cards */
.pb .sx-viz b,.pb .sx-viz span,.pb .sx-viz small,.pb .sx-viz em{font-size:inherit;line-height:inherit;letter-spacing:inherit;font-weight:inherit;color:inherit}
.pb .sx-viz{font-size:13px;line-height:20px;letter-spacing:-.01em;font-weight:500;color:var(--ap-body)}
.pb .sx-viz .sx-lh b{font-family:var(--mono);font-weight:400;font-size:11px;color:var(--ap-muted)}
.pb .sx-viz .ap-chip{font-size:11px;line-height:16px;color:var(--ap-muted)}
.pb .sx-viz .ap-chip.gain{color:#2c7867}
.pb .sx-viz .sx-lscroll > span{font-size:12px;color:var(--ap-body)}
.pb .sx-viz .sx-lscroll i{font-size:11px;color:var(--ap-head)}
.pb .sx-viz .sx-lscroll b{font-family:var(--mono);font-weight:400;font-size:11px;color:var(--ap-ink);text-align:right}
.pb .sx-viz .sx-lsum{font-size:13px;color:var(--ap-ink)}
.pb .sx-viz .sx-lsum b{font-family:var(--mono);font-weight:400;font-size:14px;color:var(--bad)}
.pb .sx-viz .sx-tie small{font-size:12px;color:var(--ap-muted)}
.pb .sx-viz .sx-tie-row{font-size:12px;color:var(--ap-body)}
.pb .sx-viz .sx-tie-row b{font-family:var(--mono);font-weight:400;font-size:12px;color:var(--ap-ink)}
.pb .sx-viz .sx-mh b{font-size:13px;font-weight:600;color:var(--ap-ink)}
.pb .sx-viz .sx-mh small{font-size:11px;color:var(--ap-muted)}
.pb .sx-viz .sx-mt{font-size:14px;line-height:21px;color:var(--ap-ink)}
.pb .sx-viz .sx-file span{font-size:12px;color:var(--ap-ink)}
.pb .sx-viz .sx-file small{font-size:11px;color:var(--bad)}
.pb .sx-viz .ap-av{font-size:11px;font-weight:600;color:var(--ap-blue)}

/* ---------- CFO page sections ---------- */
/* try it: a working scenario card */
.sx-sl{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;padding:10px 0;box-shadow:inset 0 -1px 0 var(--ap-line);font-size:13px;color:var(--ap-ink)}
.sx-sl output{font-family:var(--mono);font-size:12px;color:var(--ap-ink);padding:2px 8px;border-radius:6px;background:var(--ap-sunk)}
.sx-sl input{grid-column:1/-1;width:100%;margin:2px 0 0;accent-color:var(--data-1);height:18px;cursor:pointer}
.sx-try-out{display:flex;align-items:flex-end;justify-content:space-between;margin-top:16px}
.sx-try-out small{display:block;font-size:12px;color:var(--ap-muted)}
.sx-try-out strong{display:block;font-family:var(--mono);font-weight:400;font-size:28px;line-height:34px;color:var(--bad);transition:color .3s}
.sx-try-out strong.up{color:var(--good)}
.sx-try-plan{text-align:right}
.sx-try-plan b{font-family:var(--mono);font-weight:400;font-size:13px;color:var(--ap-ink)}
.sx-try-list{display:flex;flex-direction:column;gap:2px;margin-top:14px}
.sx-try-list > div{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;margin:0 -10px;border-radius:8px;font-size:13px;color:var(--ap-ink);transition:background .3s}
.sx-try-list > div:first-child{background:var(--ap-sel)}
.sx-try-list span{display:grid;line-height:18px}
.sx-try-list em{font-style:normal;font-size:11px;color:var(--ap-muted)}
.sx-try-list b{font-family:var(--mono);font-weight:400;font-size:13px;color:var(--bad)}
.sx-try-list b.up{color:var(--good)}
.sx-try-note{margin:12px 0 0;font-size:11px;color:var(--ap-muted)}

/* what you take into the room */
.sx-rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.sx-rooms article{display:grid;gap:8px;align-content:start}
.sx-rooms h3{margin:14px 0 0}
.sx-rooms > article > p{margin:0;font-size:15px;line-height:1.5;color:var(--muted)}
.sx-stage-sm{padding:20px;min-height:220px;display:grid;align-content:center}
.sx-note p{margin:0;font-size:13px;line-height:21px;color:var(--ap-ink)}
.sx-note p b{font-family:var(--mono);font-weight:400}
.sx-ot{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;padding:8px 0;box-shadow:inset 0 -1px 0 var(--ap-line);font-size:13px;color:var(--ap-ink)}
.sx-ot:last-child{box-shadow:none}
.sx-ot em{grid-column:1;font-style:normal;font-size:11px;color:var(--ap-muted)}
.sx-ot i{grid-row:1/3;grid-column:2;font-style:normal}
.sx-alert p{margin:0 0 10px;font-size:13px;color:var(--ap-ink)}
.sx-spark{display:grid;gap:6px}
.sx-spark svg{width:100%;height:48px;overflow:visible}
.sx-spark path{fill:none;stroke:var(--data-1);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 1.6s var(--ap-ease) .3s}
.is-in .sx-spark path{stroke-dashoffset:0}
.sx-spark span{font-size:12px;color:var(--bad)}

/* proof: a budget-to-actual waterfall with figures withheld */
.sx-wfc{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;height:200px;align-items:end;padding:0 4px;box-shadow:inset 0 -1px 0 var(--ap-sunk-2)}
.sx-wfc span{position:relative;height:100%}
.sx-wfc i{position:absolute;left:0;right:0;bottom:var(--b);height:var(--h);border-radius:5px;transform:scaleY(0);transform-origin:bottom;transition:transform .7s var(--ap-ease)}
.sx-wfc .t i{background:var(--data-1)}
.sx-wfc .d i{background:var(--loss-fill);transform-origin:top}
.sx-wfc .u i{background:var(--gain-fill)}
.sx-wfc span:nth-child(2) i{transition-delay:.25s}.sx-wfc span:nth-child(3) i{transition-delay:.5s}.sx-wfc span:nth-child(4) i{transition-delay:.75s}.sx-wfc span:nth-child(5) i{transition-delay:1s}
.is-in .sx-wfc i{transform:none}
.sx-wfc em{position:absolute;left:-8px;right:-8px;bottom:-24px;text-align:center;font-style:normal;font-size:12px;color:var(--ap-muted)}
.sx-wf-n{margin:34px 0 0;font-size:12px;color:var(--ap-muted)}

/* where Orbit sits */
.sx-map-plot{position:relative;height:300px;margin:6px 4px 4px 22px;box-shadow:inset 1px 0 0 var(--ap-sunk-2),inset 0 -1px 0 var(--ap-sunk-2);background:linear-gradient(45deg,transparent 60%,rgba(142,200,224,.12))}
.sx-ax{position:absolute;font-size:11px;color:var(--ap-muted);white-space:nowrap}
.sx-ax.x{right:0;bottom:-22px}
.sx-ax.y{left:-14px;top:0;transform-origin:left top;transform:rotate(-90deg) translateX(-100%)}
.sx-dot{position:absolute;transform:translate(-50%,50%);padding:5px 10px;border-radius:999px;background:#fff;box-shadow:var(--ap-s1);font-style:normal;font-size:12px;color:var(--ap-muted);white-space:nowrap;opacity:0;transition:opacity .5s,transform .6s var(--ap-ease)}
.is-in .sx-dot{opacity:1}
.sx-dot:nth-of-type(2){transition-delay:.1s}.sx-dot:nth-of-type(3){transition-delay:.2s}.sx-dot:nth-of-type(4){transition-delay:.3s}.sx-dot:nth-of-type(5){transition-delay:.4s}
.sx-me{padding:8px 16px;background:var(--ap-ink);color:#fff;font-family:'Space Grotesk',var(--sans);font-weight:500;font-size:14px;box-shadow:0 12px 28px -12px rgba(23,25,28,.45);transition-delay:.7s}

/* design partners: step fragments */
.sx-peers{gap:10px}
.sx-peers span{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:center;font-size:12px;color:var(--ap-muted)}
.sx-peers em{font-style:normal}
.sx-peers i{height:8px;width:var(--w);border-radius:4px;background:var(--data-2)}
.sx-peers span:first-child i{background:var(--data-1)}
.sx-run{justify-items:start;gap:8px}

@media (prefers-reduced-motion: reduce){
  .sx-wfc i,.sx-dot,.sx-spark path{transition:none;transform:none;opacity:1;stroke-dashoffset:0}
}
@media (max-width:900px){.sx-rooms{grid-template-columns:1fr}}
.sx-rooms .sx-stage-sm{height:268px;min-height:0}

/* ---------- homepage sections ---------- */
.sx-trust{padding:30px 0;border-top:1px solid #efeeeb;border-bottom:1px solid #efeeeb}
.sx-trust-row{display:grid;grid-template-columns:1fr 1.3fr .9fr}
.sx-trust-row > div{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:0 24px;font-size:13px;color:var(--ink-2)}
.sx-trust-row > div + div{box-shadow:inset 1px 0 0 #ecebe8}
.sx-trust-row > div:first-child{padding-left:0}
.sx-trust-row small{width:100%;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sx-faces{display:inline-flex}
.sx-faces img{width:26px;height:26px;border-radius:50%;object-fit:cover;filter:grayscale(1);border:2px solid #fff;margin-left:-7px}
.sx-faces img:first-child{margin-left:0}
.sx-soc{height:20px}
/* doors: the mini picture is a small product card */
.ch-viz.ap{height:auto;min-height:170px;padding:10px 12px 12px;border-radius:12px;background:#fff;border:0;box-shadow:var(--ap-s2);font-size:12px}
.ch-vh{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:11px;color:var(--ap-muted)}
.ch-vh b{font-weight:600;color:var(--ap-ink)}
.ch-vh .num{color:var(--bad)}
.ch-viz.ap .v-bridge{position:relative;inset:auto;height:120px;margin-top:4px}
.ch-viz.ap .v-tags{top:38px}
.ch-viz.ap .v-trace{position:relative;inset:auto;gap:4px}
.ch-viz.ap .v-line{font-size:12px;border:0;background:var(--ap-sunk);border-radius:8px;padding:5px 9px}
.ch-viz.ap .v-cov{position:relative;inset:auto;width:100%;height:120px}
.ch-door{background:#fff;box-shadow:inset 0 0 0 1px rgba(23,25,28,.06)}
.ch-sec .ch-doors{padding:28px;border-radius:24px;background:radial-gradient(circle,rgba(56,115,145,.16) 1px,transparent 1.4px) 0 0/16px 16px,linear-gradient(180deg,#f8fbfd,#f3f8fb)}
/* reproducible: run log + stats */
.sx-runs{display:grid;gap:22px}
.sx-runlog .sx-run{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center;padding:12px 0;box-shadow:inset 0 -1px 0 var(--ap-line);font-size:13px;color:var(--ap-ink)}
.sx-run span{display:grid;line-height:18px}
.sx-run small{font-size:11px;color:var(--ap-muted)}
.sx-run code{font-family:var(--mono);font-size:11px;color:var(--ap-muted);background:var(--ap-sunk);border-radius:6px;padding:2px 8px}
.sx-run > b{font-family:var(--mono);font-weight:400}
.sx-runnote{margin:12px 0 0;font-size:12px;color:var(--ap-muted)}
.sx-stats{margin-top:0;gap:18px 24px}
.sx-stats b{font-family:var(--mono)!important;font-size:36px!important}
/* CTA ladder */
.sx-ladder{list-style:none;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin:36px 0 0;padding:0}
.sx-ladder li{display:grid;grid-template-columns:auto auto;gap:0 10px;align-items:center;padding:12px 18px;border-radius:14px;background:#fff;box-shadow:var(--ap-s1,0 0 0 1px rgba(23,25,28,.06));text-align:left}
.sx-ladder small{grid-row:1/3;font-family:var(--mono);font-size:11px;color:var(--accent-2)}
.sx-ladder b{font-weight:600;color:var(--ink);font-size:14px}
.sx-ladder span{font-size:13px;color:var(--muted)}
@media (max-width:900px){.sx-trust-row{grid-template-columns:1fr;gap:16px}.sx-trust-row > div{padding:0;box-shadow:none!important}}
.ch-viz.ap .v-line{opacity:1;transform:none;transition:background .3s,box-shadow .3s}
.ch-door:hover .ch-viz.ap .v-line:nth-child(2),.ch-door:focus-visible .ch-viz.ap .v-line:nth-child(2){background:var(--ap-sel);box-shadow:inset 0 0 0 1px var(--data-2)}
.ch-viz.ap .v-cov{height:130px}

/* ---------- worked example v2: clickable bar, traced path, why, what to do ---------- */
.sx-ex2{grid-template-columns:.95fr 1.05fr}
.sx-ex2 .sx-ex-l{display:flex;flex-direction:column}
.sx-ex2 .sx-ev{margin-top:auto;padding-top:14px}
.sw.m,.sx-bseg.m{background:var(--data-1)}
.sw.b1,.sx-bseg.b1{background:#6aa9c6}
.sw.b2,.sx-bseg.b2{background:var(--data-2)}
.sw.b3,.sx-bseg.b3{background:#c3e0ec}
.sw.g,.sx-bseg.g{background:var(--gain-fill)}
.sx-segbar{display:flex;gap:3px;height:30px;margin-bottom:10px}
.sx-bseg{position:relative;width:var(--w);min-width:22px;border:0;border-radius:7px;padding:0;cursor:pointer;transition:opacity .25s,transform .25s var(--ap-ease),box-shadow .25s}
.sx-bseg span{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-size:11px;font-weight:500;color:#fff;white-space:nowrap;pointer-events:none}
.sx-bseg.b2 span,.sx-bseg.b3 span,.sx-bseg.g span{color:var(--ap-ink)}
.sx-bseg[style*="--w:9%"] span{display:none}
.sx-segbar:has(.on) .sx-bseg:not(.on){opacity:.42}
.sx-bseg.on{transform:translateY(-2px);box-shadow:0 8px 16px -10px rgba(23,25,28,.45)}
.sx-bseg:hover{opacity:1!important}
.sx-bseg:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.sx-key i.b{background:#6aa9c6}
.sx-ex2 .sx-rows button{grid-template-columns:12px 1fr auto 104px}
.sx-ex2 .sx-rows .sw{width:9px;height:9px;border-radius:3px}
.sx-ex2 .sx-ex-r{padding:22px 24px}
.sx-sh{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.sx-sh span{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:var(--ap-ink)}
.sx-sh b{font-family:var(--mono);font-weight:400;font-size:15px}
.sx-lbl{display:block;margin:0 0 8px;font-size:11px;font-weight:500;letter-spacing:.02em;color:var(--ap-head)}
.sx-path{position:relative;list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.sx-path::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1.5px;background:var(--data-2);transform-origin:top;animation:sx-drawy .9s var(--ap-ease) both}
.sx-path li{position:relative;display:flex;justify-content:space-between;gap:12px;padding-left:22px;font-size:13px;color:var(--ap-body);animation:sx-in .4s var(--ap-ease) both}
.sx-path li::before{content:"";position:absolute;left:1px;top:6px;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px var(--data-2)}
.sx-path li:last-child{color:var(--ap-ink);font-weight:500}
.sx-path li:last-child::before{background:var(--data-1);box-shadow:none}
.sx-path li:nth-child(2){animation-delay:.12s}.sx-path li:nth-child(3){animation-delay:.24s}
.sx-path b{font-family:var(--mono);font-weight:400;color:var(--bad)}
@keyframes sx-drawy{from{transform:scaleY(0)}}
.sx-why{margin:0 0 16px;font-size:13px;line-height:20px;color:var(--ap-ink)}
.sx-do{padding:12px 14px;border-radius:12px;background:#fff;box-shadow:var(--ap-s1)}
.sx-do small{display:block;margin-bottom:4px;font-size:11px;font-weight:500;color:var(--accent-2)}
.sx-do p{margin:0;font-size:13px;line-height:20px;color:var(--ap-ink)}
.sx-own{display:flex;gap:18px;margin-top:10px;padding-top:10px;box-shadow:inset 0 1px 0 var(--ap-line);font-size:12px;color:var(--ap-ink)}
.sx-own span{display:grid;line-height:16px}
.sx-own em{font-style:normal;font-size:11px;color:var(--ap-muted)}
.sx-do-none{background:#fbfbfc;box-shadow:inset 0 0 0 1px var(--ap-line)}
.sx-do-none small{color:var(--ap-head)}
.sx-do-none p .ap-chip{margin-right:8px;vertical-align:1px}
@media (prefers-reduced-motion: reduce){.sx-path::before,.sx-path li{animation:none}}

/* aim line, credibility strip on role pages, fairness answer */
.sx-aim{display:flex;gap:14px;align-items:baseline;max-width:760px;margin:22px 0 0;padding-left:14px;box-shadow:inset 2px 0 0 var(--data-1);font-size:16px;line-height:1.5;color:var(--ink)}
.sx-aim b{flex:none;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2)}
.sx-trust-role{background:#fff}
.sx-fair{display:grid;gap:2px}
.sx-fair div{display:grid;grid-template-columns:1fr 56px 130px;align-items:center;gap:12px;height:44px;box-shadow:inset 0 -1px 0 var(--ap-line);font-size:13px;color:var(--ap-ink)}
.sx-fair b{font-family:var(--mono);font-weight:400;text-align:right}
.sx-fair em{justify-self:end}
.sx-fair-n{margin:12px 0 0;font-size:12px;color:var(--ap-muted)}
.sx-princ div{align-content:start}
.sx-trust-row{align-items:start}
.sx-trust-row > div{align-content:flex-start;min-height:72px}
.sx-trust-row > div small{margin-bottom:2px}
.sx-trust-row .sx-faces + span{flex:1 1 0;min-width:0}
.sx-sv.sx-run span{display:inline-flex}
.c4-chart{max-width:900px;margin:0 auto}

/* Wide pages (1280 content, 2026-10-08): keep centred strips at reading width,
   spread small charts across their card, and match card heights side by side. */
.sx-pb{max-width:1120px;margin-left:auto;margin-right:auto}
.sx-plb{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.sx-plb span{width:auto}
.sx-plb span::before{left:50%;right:auto;width:56px;margin-left:-28px}
.sx-who{align-items:stretch}
.sx-orbit small{text-wrap:balance}
.sx-who .sx-bars{gap:22px;margin-top:6px}
.sx-who .sx-bars i{height:10px;border-radius:5px}

/* ---- 2026-10-09: what the total hides, same height in both views (sx-gap2) ----
   Every row is there in both views; "Reported" shows what the report believes
   (offsets netted to zero, the unreported exposure absent, no P&L expected),
   "Actual" fills the same rows from the books. The toggle phases by itself
   while in view, with a fill line under the next view, until the first click. */
.sx-seg button{position:relative;overflow:hidden;height:24px;padding:0 10px;border:0;border-radius:6px;background:none;font:inherit;font-size:12px;line-height:24px;white-space:nowrap;color:var(--ap-muted);cursor:pointer;transition:background .3s,color .3s,box-shadow .3s}
.sx-seg button:hover{color:var(--ap-ink)}
.sx-seg button:focus-visible{outline:2px solid var(--accent-2);outline-offset:1px}
.sx-seg button[aria-pressed="true"]{background:#fff;color:var(--ap-ink);box-shadow:var(--ap-s1)}
.sx-seg button::after{content:"";position:absolute;left:10px;right:10px;bottom:3px;height:2px;border-radius:1px;background:var(--accent-2);opacity:.55;transform:scaleX(0);transform-origin:left}
.sx-seg button.is-next::after{animation:sx-next var(--sx-dur,4.5s) linear forwards}
.sx-seg.is-paused button.is-next::after{animation-play-state:paused}
@keyframes sx-next{to{transform:scaleX(1)}}
.sx-gap2 .r{display:inline}.sx-gap2 .a{display:none}
.sx-gap2.is-actual .r{display:none}.sx-gap2.is-actual .a{display:inline}
.sx-gap2.is-actual .sx-legend .a,.sx-gap2.is-actual .sx-pl-h .a{display:inline}
.sx-gap2 .sx-legend .g2{display:flex}
.sx-gap2 .sx-legend .g2 span{color:var(--ap-muted);transition:color .4s}
.sx-gap2 .sx-legend .g2 .sw{background:none;box-shadow:inset 0 0 0 1.2px rgba(23,25,28,.22);transition:box-shadow .4s}
.sx-gap2 .sx-legend .g2 .sw.o1{box-shadow:inset 0 0 0 1.2px #a9d2e4}
.sx-gap2 .sx-legend .g2 .sw.o2{box-shadow:inset 0 0 0 1.2px #f0b6a6}
.sx-gap2.is-actual .sx-legend .g2 span{color:var(--ap-ink)}
.sx-gap2.is-actual .sx-legend .g2 .sw.o1{background:repeating-linear-gradient(135deg,#cfe6f1 0 5px,#a9d2e4 5px 10px);box-shadow:none}
.sx-gap2.is-actual .sx-legend .g2 .sw.o2{background:repeating-linear-gradient(135deg,#fbe5de 0 5px,#f0b6a6 5px 10px);box-shadow:none}
.sx-gap2 .sx-legend .g2 b{color:var(--bad)}
.sx-gap2 .sx-legend .ap-chip{height:22px;font-style:normal;background:var(--ap-sunk);color:var(--ap-muted)}
.sx-gap2 .sx-legend .ap-chip::before{display:none}
.sx-gap2 .sx-pl{display:block}
.sx-pl-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sx-pl-h small{font-size:12px;color:var(--ap-muted)}
.sx-pl-h b{font-family:var(--mono);font-weight:400;font-size:13px;color:var(--ap-ink)}
.sx-pl-h i{font-style:normal}
.sx-gap2 .sx-plb span::before{animation:none;transition:height .7s var(--ap-ease)}
.sx-gap2 .sx-plb b{transition:top .7s var(--ap-ease)}
.sx-gap2 .sx-plb b i{font-style:normal}
.sx-gap2:not(.is-actual) .sx-plb span{--h:0% !important}
.sx-gap2:not(.is-actual) .sx-plb b{color:var(--ap-muted)}
.sx-gap2:not(.is-actual) .sx-plb span::before{height:2px;background:#cfd4d9}
.sx-gap2 .sx-big strong .r{color:var(--ap-ink)}
@media (prefers-reduced-motion: reduce){.sx-gap2 .sx-plb span::before,.sx-gap2 .sx-plb b{transition:none}.sx-seg button::after{display:none}}
.sx-gap2 .sx-plb{position:relative}
.sx-pl-note{position:absolute;left:0;right:0;top:44px;text-align:center;font-style:normal;font-size:12px;color:var(--ap-muted)}
.sx-gap2:not(.is-actual) .sx-pl-note{display:block}
.sx-gap2:not(.is-actual) .sx-legend em.r{display:inline-flex;align-items:center}
.sx-seg button::after{opacity:.8}

/* ---- 2026-10-09: who asks, one frame for every answer (sx-ans2) ----
   Same height whichever role is picked: heading + figure, the answer's own
   picture, then a footer that proves it is one answer (the same run). */
.sx-ans2{display:grid}
.sx-ans2 .sx-a{display:grid;grid-template-rows:auto 1fr auto;min-height:100%}
.sx-ans2 .sx-a[hidden]{display:none}
.sx-ans2 .sx-ch{margin-bottom:16px}
.sx-a-body{display:grid;align-content:center;gap:20px}
.sx-ans2 .sx-bars{gap:16px;margin:0}
.sx-a-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;padding-top:14px;box-shadow:inset 0 1px 0 var(--ap-line);font-size:12px;color:var(--ap-muted)}
.sx-a-key{display:flex;gap:16px}
.sx-a-key > span{display:inline-flex;align-items:center;gap:6px;color:var(--ap-body)}
.sx-a-key .sw{width:9px;height:9px}
.sw.b{background:var(--data-2)}
.sx-a-note{color:var(--ap-body)}
.sx-run2{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:6px;background:#e6f4ef;color:#27705f;font-size:11px;white-space:nowrap}
.sx-run2 i{width:6px;height:6px;border-radius:50%;background:#7fc9b5}
.sx-run2 code{font-family:var(--mono);font-size:11px}
.sx-slide{display:grid;gap:10px;padding:16px 18px;border-radius:12px;background:var(--ap-sunk)}
.sx-slide > b{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ap-ink)}
.sx-slide p{display:flex;gap:10px;margin:0;font-size:12px;line-height:18px;color:var(--ap-body)}
.sx-slide p span{flex:none;width:64px;color:var(--ap-muted)}
.sx-stack-sm{height:26px;border-radius:7px}
.sx-stack-sm i,.sx-ents-bar i{display:flex;align-items:center;padding:0 10px;font-style:normal;font-size:11px;white-space:nowrap;overflow:hidden}
.sx-stack-sm .m{color:#fff}.sx-stack-sm .b{color:var(--ap-ink)}
.sx-copy-btn{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 10px;border-radius:8px;background:#fff;box-shadow:var(--ap-s1);font-size:12px;color:var(--ap-ink)}
.sx-copy-btn svg{width:14px;height:14px;fill:none;stroke:var(--ap-icon);stroke-width:1.4;stroke-linecap:round}
.sx-ents{display:grid;gap:8px}
.sx-ents small{font-size:12px;color:var(--ap-muted)}
.sx-ents-bar{display:flex;gap:2px;height:30px;border-radius:8px;overflow:hidden}
.sx-ents-bar i{width:var(--w);background:var(--ap-sunk);color:var(--ap-muted)}
.sx-ents-bar i.on{background:#fbece7;color:#a0432c}
.sx-mu{display:grid;grid-template-columns:66fr 34fr;gap:2px}
.sx-mu > div{display:grid;align-content:start;justify-items:start;gap:4px;padding:0 14px 0 0}
.sx-mu > div + div{padding-left:14px;box-shadow:inset 1px 0 0 var(--ap-line)}
.sx-mu b{font-size:13px;font-weight:600;color:var(--ap-ink)}
.sx-mu span{font-size:12px;line-height:18px;color:var(--ap-body)}
.sx-mu .ap-chip{margin-top:4px;font-style:normal}
.sx-who:has(.sx-ans2) .sx-roles button{padding:16px}
.sx-mu > div{grid-template-rows:auto 1fr auto;align-content:stretch}
.sx-mu .ap-chip{align-self:end}

/* ---- 2026-10-09: your stack as a pick-a-file explorer (sx-pick) ----
   Left: the exports you already have (plus the market rates Orbit adds).
   Middle: the picked file as it arrives, the line Orbit traces outlined, what
   Orbit reads from it and what it adds. Right: the result, with the parts this
   file explains lit. Cycles while in view until the first click; hover holds.
   ?sits=old shows the previous diagram for comparison. */
.sx-flow-old{display:none!important}
.sits-old .sx-flow-old{display:grid!important}.sits-old .sx-pick{display:none}
.sx-pick{display:grid;grid-template-columns:260px minmax(0,1fr) 280px;gap:16px;align-items:stretch;padding:16px;border-radius:20px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(23,25,28,.05)}
.sx-pk-list{display:grid;align-content:start;gap:8px}
.sx-pk-list > small,.sx-pk-ra small{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ap-head)}
.sx-pk-list > small{padding:8px 4px 4px}
.sx-pk-list button{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;min-height:60px;padding:12px 14px;border:0;border-radius:12px;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(23,25,28,.05);font:inherit;text-align:left;cursor:pointer;transition:background .25s,box-shadow .25s}
.sx-pk-list button:hover{background:#fff}
.sx-pk-list button:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.sx-pk-list button[aria-selected="true"]{background:#fff;box-shadow:var(--ap-s2)}
.sx-pk-list button > i,.sx-pk-ph i{flex:none;display:grid;place-items:center;width:36px;height:26px;border-radius:6px;background:#e6f4ef;color:#27705f;font-family:var(--mono);font-style:normal;font-size:11px}
.sx-pk-list span{display:grid;line-height:18px;min-width:0}
.sx-pk-list b{font-size:13px;font-weight:600;color:var(--ap-ink)}
.sx-pk-list small{font-family:var(--mono);font-size:11px;color:var(--ap-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-pk-list button::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;border-radius:1px;background:var(--accent-2);opacity:.7;transform:scaleX(0);transform-origin:left}
.sx-pk-list button.is-run::after{animation:sx-next var(--sx-dur,5s) linear forwards}
.sx-pick.is-held .sx-pk-list button.is-run::after{animation-play-state:paused}
.sx-pk-mkt{display:flex;align-items:center;gap:12px;margin-top:8px;padding:12px 14px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(56,115,145,.25);background:repeating-linear-gradient(135deg,rgba(207,230,241,.35) 0 6px,transparent 6px 12px)}
.sx-pk-mkt > i{flex:none;width:36px;height:26px;border-radius:6px;background:#e8f2f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M2 12l5-5 4 3 6-7 5 4' fill='none' stroke='%23387391' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px 14px no-repeat}
.sx-pk-mkt span{display:grid;line-height:18px}
.sx-pk-mkt b{font-size:13px;font-weight:600;color:var(--ap-ink)}
.sx-pk-mkt small{font-size:12px;color:var(--ap-blue)}
.sx-pk-mid{display:grid;min-width:0}
.sx-pk-p{display:grid;grid-template-rows:auto auto 1fr;gap:16px;padding:20px;border-radius:14px;background:#fff;box-shadow:var(--ap-s2);animation:sx-in .4s var(--ap-ease)}
.sx-pk-p[hidden]{display:none}
.sx-pk-ph{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sx-pk-ph > span{display:flex;align-items:center;gap:10px;min-width:0}
.sx-pk-ph b{font-family:var(--mono);font-weight:400;font-size:12px;color:var(--ap-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-pk-t{position:relative;display:grid;gap:2px}
.sx-pk-th,.sx-pk-tr{display:grid;grid-template-columns:60px minmax(0,1.6fr) 56px 64px minmax(0,1.1fr);gap:10px;align-items:center;padding:0 10px}
.sx-pk-th{height:26px;font-size:11px;color:var(--ap-head)}
.sx-pk-th span:last-child,.sx-pk-tr span:last-child{text-align:right}
.sx-pk-tr{height:34px;border-radius:8px;font-family:var(--mono);font-size:11px;color:var(--ap-body);white-space:nowrap}
.sx-pk-tr span{overflow:hidden;text-overflow:ellipsis}
.sx-pk-tr span:nth-child(2){font-family:var(--sans);font-size:12px;color:var(--ap-ink)}
.sx-pk-tr span:first-child{color:var(--ap-muted)}
.sx-pk-tr.on{background:#f1f6f9;box-shadow:inset 0 0 0 1.5px var(--ap-blue)}
.sx-pk-flag{justify-self:end;margin:6px 0 0;padding:0 8px;height:22px;display:inline-flex;align-items:center;border-radius:6px;background:#e8f2f7;color:var(--ap-blue);font-size:11px}
.sx-pk-ra{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-content:end;padding-top:16px;box-shadow:inset 0 1px 0 var(--ap-line)}
.sx-pk-ra > div{display:grid;align-content:start;gap:8px}
.sx-pk-reads{display:flex;flex-wrap:wrap;gap:6px}
.sx-pk-reads code{height:22px;display:inline-flex;align-items:center;padding:0 7px;border-radius:6px;background:var(--ap-sunk);font-family:var(--mono);font-size:11px;color:var(--ap-body)}
.sx-pk-adds{display:grid;gap:6px}
.sx-pk-adds span{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:18px;color:var(--ap-ink)}
.sx-pk-adds span::before{content:"+";flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:5px;background:#e8f2f7;color:var(--ap-blue);font-family:var(--mono);font-size:12px}
.sx-pk-out{display:grid;grid-template-rows:auto auto 1fr auto;padding:20px;border-radius:14px;background:#fff;box-shadow:var(--ap-s2)}
.sx-pk-out .sx-ch{margin-bottom:18px}
.sx-pk-out .sx-ch strong{font-family:var(--mono);font-weight:400;font-size:18px}
.sx-pk-drv{display:grid;gap:14px}
.sx-pk-drv div{display:grid;grid-template-columns:62px 1fr 44px;gap:10px;align-items:center;font-size:12px;color:var(--ap-ink);transition:opacity .4s}
.sx-pk-drv i{height:8px;width:var(--w);border-radius:4px;background:var(--loss-fill);transition:background .4s}
.sx-pk-drv i.g{background:var(--gain-fill)}
.sx-pk-drv b{font-family:var(--mono);font-weight:400;font-size:12px;text-align:right}
.sx-pk-drv div.dim{opacity:.32}
.sx-pk-drv div.lit span{font-weight:600}
.sx-pk-fed{display:flex;align-items:center;gap:8px;margin:16px 0 0;font-size:11px;color:var(--ap-muted);align-self:start}
.sx-pk-fed i{width:16px;height:8px;border-radius:4px;background:var(--loss-fill)}
.sx-pk-out > .ap-chip{justify-self:start;margin-top:16px}
@media (max-width:1100px){.sx-pick{grid-template-columns:1fr}.sx-pk-list{grid-template-columns:repeat(3,1fr)}.sx-pk-list > small,.sx-pk-mkt{grid-column:1/-1}}
@media (prefers-reduced-motion: reduce){.sx-pk-list button::after{display:none}.sx-pk-p{animation:none}}
.sx-pick{padding:0;background:none;box-shadow:none}
.sx-pk-mkt small{font-family:var(--sans);font-size:12px}
.sx-pk-out{grid-template-rows:auto auto auto 1fr auto}
.sx-pk-why{align-self:end;display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:14px;border-radius:12px;background:#f1f6f9;box-shadow:inset 2px 0 0 var(--ap-blue);animation:sx-in .4s var(--ap-ease)}
.sx-pk-why[hidden]{display:none}
.sx-pk-why small{grid-column:1/-1;font-size:11px;color:var(--ap-muted)}
.sx-pk-why span{font-size:12px;line-height:18px;color:var(--ap-ink)}
.sx-pk-why b{font-family:var(--mono);font-weight:400;font-size:13px;align-self:end}
/* systems, not files (2026-10-09): logo tiles instead of CSV/XLSX badges */
.sx-pk-list button > i.lg,.sx-pk-ph i.lg{width:52px;background:#f3f5f7}
.sx-pk-list i.lg img,.sx-pk-ph i.lg img{display:block;filter:grayscale(1);opacity:.75}
.sx-pk-list i.lg img.mono,.sx-pk-ph i.lg img.mono{filter:brightness(0);opacity:.6}
.sx-pk-list small{font-family:var(--sans);font-size:12px}
.sx-pk-ph b{font-family:var(--sans);font-weight:600;font-size:13px}
/* 2026-10-09: the credibility chip and the walled-off point link to the Security page, quietly */
a.sx-soc{text-decoration:none;transition:background .2s}
a.sx-soc i{font-style:normal;margin-left:2px;transition:transform .2s}
a.sx-soc:hover{background:#d8efe7}a.sx-soc:hover i{transform:translateX(2px)}
a.sx-soc:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.sx-princ-a{justify-self:start;margin-top:6px;font-size:14px;color:var(--accent-2);text-decoration:none}
.sx-princ-a i{font-style:normal;display:inline-block;transition:transform .2s}
.sx-princ-a:hover{text-decoration:underline;text-underline-offset:3px}.sx-princ-a:hover i{transform:translateX(3px)}

/* 2026-10-09 Kestrel story: "left open by policy" is a plain pale ice; the euro gap card
   shows cover, not just size — on paper 75% hedged, in the books 42% */
.sw.o0,.sx-stack .o0{background:#cfe6f1}
.sx-gap-eur .sx-gbar .h{width:75%}
.sx-gap-eur .sx-gbar .o{width:25%;background:#cfe6f1}
.sx-gap-eur.is-actual .sx-gbar .h{width:42%}
.sx-gap-eur.is-actual .sx-gbar .o{width:58%;background:repeating-linear-gradient(135deg,#fbe5de 0 5px,#f0b6a6 5px 10px)}
.sx-gap2:not(.is-actual) .sx-plb span{--h:var(--hr,0%) !important}
.sx-gap-eur:not(.is-actual) .sx-plb span::before{height:calc(var(--h) * .7);background:#d9dde0}
.sx-gap-eur .sx-pl-note{top:auto;bottom:-6px}

/* ===== Section colour (Mingze 10-09) =====
   A few sections per page sit in the hero's own inset ice panel; the app window and
   the results fill the content width with no plate behind them (ruled 10-09); the
   proof numbers sit in an ice box; the footer carries a very light blue rising from
   the bottom. Text on tints uses a darker grey (AA). */
:root{--tone-dot:radial-gradient(circle,rgba(56,115,145,.18) 1px,transparent 1.4px) 0 0/16px 16px}
.v3-sec.v3-sec-tint,.v4-home #how{margin:12px clamp(12px,1.4vw,24px);border-radius:14px;background:#eef5f9;border-top:0;--muted:#5d6269}
.v4-home #how .v4-fviz.ap{box-shadow:0 0 0 1px rgba(56,115,145,.10),0 12px 28px -22px rgba(23,25,28,.28)}
.v4-home .v4-band.v4-results{background:#fff}
.v4-home #trust{background:#fff}
.v4-home #trust .v4-stats{padding:28px 32px;border-radius:20px;background:#eef5f9;box-shadow:none;--muted:#5d6269}
.v4-surf .ap-bezel{box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 0 0 1px rgba(23,25,28,.04),0 0 40px -10px rgba(23,25,28,.22)}
.v4-surf .v4-show-win::before{display:none}
.v3-foot{background:linear-gradient(180deg,#fff 0%,#fff 35%,#f7fbfd 75%,#eff6fa 100%)}

/* Contrast pass (10-09): every text label reaches 4.5:1. Dimmed bar segments wash
   their fill instead of fading the label; dimmed drivers grey their words, fade their bar. */
.sx-bseg.b1 span{color:var(--ap-ink)}
.sx-segbar:has(.on) .sx-bseg:not(.on){opacity:1;box-shadow:inset 0 0 0 99px rgba(255,255,255,.58)}
.sx-segbar:has(.on) .sx-bseg:not(.on) span{color:var(--ap-body)}
.sx-segbar:has(.on) .sx-bseg:not(.on):hover{box-shadow:none}
.sx-pk-drv div.dim{opacity:1}
.sx-pk-drv div.dim i{opacity:.3}
.sx-pk-drv div.dim :is(span,b){color:var(--ap-muted)}
.sx-pk-mkt small{color:var(--accent-2)}
.sx-bseg:is([style*="--w:6%"],[style*="--w:5%"],[style*="--w:4%"]) span{display:none}   /* too narrow for a label; the rows below name it */
.sx-tl-cards > span[style="left:0"]{transform:none}   /* a card at the very start sits on the padding, not past it */

/* ---------- Phone pass (2026-10-09) ---------- */
@media (max-width:900px){
  .sx-ex2{grid-template-columns:1fr}                       /* the .95fr/1.05fr rule above came after the 900 px stack */
  .pb-item{align-items:stretch;min-width:0}
  .pb-item .pb-n{align-self:center}
  .pb-item[aria-expanded="true"] .pb-body{width:100%;max-width:none;min-width:0;grid-template-columns:minmax(0,1fr);text-align:center}
  .pb .sx-viz{min-width:0;max-width:100%}
  .sx-ex2 .sx-ex-r{box-shadow:inset 0 1px 0 var(--ap-line)}
}
@media (max-width:900px){
  .sx-split,.sx-ex,.sx-fix,.sx-who,.sx-flow,.sx-princ,.sx-steps,.sx-pick{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .sx-stage{padding:12px}
  .sx-ex2 .sx-ex-l,.sx-ex2 .sx-ex-r{padding:18px 16px}
  .sx-pk-list{grid-template-columns:minmax(0,1fr)}
  .sx-pk-mid{grid-template-columns:minmax(0,1fr)}
  .sx-pk-p{min-width:0}
  .sx-pk-ph{flex-wrap:wrap;row-gap:8px}
  .sx-pk-ra{grid-template-columns:minmax(0,1fr);gap:20px}
  .sx-try-out{flex-direction:column;align-items:flex-start;gap:8px}
  .sx-try-out .sx-try-plan{display:flex;gap:6px;align-items:baseline;text-align:left}
  .sx-map-plot{height:400px}
  .sx-dot{padding:4px 8px;font-size:11px}
  .sx-tl-foot{flex-wrap:wrap;row-gap:8px}.sx-tl-foot > *{white-space:nowrap}
  .sx-tl:not(.ap-funds-timeline){height:196px}
  .sx-tl:not(.ap-funds-timeline) .sx-tl-cards > span.r{top:56px}           /* stagger, as Funds does, so the two cards never overlap */
  .sx-pk-th,.sx-pk-tr{grid-template-columns:minmax(0,1fr) auto auto;gap:10px}
  .sx-pk-th span:is(:first-child,:nth-child(3)),.sx-pk-tr span:is(:first-child,:nth-child(3)){display:none}   /* ids and the first date; the last two columns carry each table's point */
  .sx-state{grid-template-columns:12px minmax(0,1fr);height:auto;padding:12px 0;row-gap:8px}
  .sx-state > .ap-chip,.sx-state > em{grid-column:2;justify-self:start}
  .sx-ex2 .sx-rows button,.ap-funds-sec .sx-ex2 .sx-rows button{grid-template-columns:10px minmax(0,1fr) auto auto;gap:8px;margin:0 -8px;padding:0 8px}
  .sx-ex2 .sx-rows button > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sx-ex2 .sx-rows .ap-chip{font-size:11px;padding:0 6px}
  .sx-ex2 .sx-rows b{font-size:12px}
  .sx-bseg:is([style*="--w:18%"],[style*="--w:16%"],[style*="--w:12%"]) span{display:none}   /* the rows below name them */
  .sx-key{flex-direction:column;gap:6px}
  .pb .sx-viz .sx-ledger .sx-lscroll > span{grid-template-columns:48px minmax(0,1fr);white-space:nowrap}
  .pb .sx-viz .sx-ledger .sx-lscroll b{display:none}               /* amounts don't fit a phone row; the total does */
}

/* "Getting started" step 01 list (Treasury, Funds): its items share the .sx-pick name with the
   systems picker above, whose rules (no padding, grid) were squeezing them. Scoped back here. */
.sx-sv{gap:6px;height:152px}
.sx-sv > .sx-pick{display:block;padding:8px 12px;border-radius:8px;background:none;box-shadow:none;font-size:13px;line-height:18px;color:var(--ap-muted)}
.sx-sv > .sx-pick.on{background:var(--ap-sel);color:var(--ap-ink);box-shadow:inset 0 0 0 1px var(--data-2)}

/* No hairline under an inset blue panel (Mingze 10-09): the next section's top border
   read as a stray line once the tinted sections became inset panels. */
:is(.v3-sec.v3-sec-tint,.v4-home #how) + *{border-top-color:transparent}

/* Where Orbit sits, redrawn (Mingze 10-09: "ugly and stale"): a quiet two-by-two. Midlines
   split the plot; the top-right quadrant is tinted and named; axis labels read flat at the
   ends, no rotated text; the other tools spread so none touch; Orbit carries a soft halo. */
.sx-map2{padding:22px 22px 18px}
.sx-map2 .sx-map-plot{height:340px;margin:22px 0 26px;box-shadow:none;background:linear-gradient(90deg,transparent calc(50% - .5px),var(--ap-sunk-2) calc(50% - .5px),var(--ap-sunk-2) calc(50% + .5px),transparent calc(50% + .5px)),linear-gradient(0deg,transparent calc(50% - .5px),var(--ap-sunk-2) calc(50% - .5px),var(--ap-sunk-2) calc(50% + .5px),transparent calc(50% + .5px));border-radius:12px;outline:1px solid var(--ap-line)}
.sx-q{position:absolute;left:50%;right:0;top:0;bottom:50%;border-radius:0 12px 0 0;background:radial-gradient(circle,rgba(56,115,145,.14) 1px,transparent 1.4px) 0 0/14px 14px,#eef5f9}
.sx-q small{position:absolute;left:14px;top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#2f6c8c}
.sx-ax2{position:absolute;font-size:11px;line-height:16px;color:var(--ap-muted);white-space:nowrap}
.sx-ax2.yt{left:0;top:-22px}.sx-ax2.yb{left:0;bottom:-22px}
.sx-ax2.xl{display:none}.sx-ax2.xr{right:0;bottom:-22px}
.sx-ax2.yt::before{content:"↑ "}
.sx-map2 .sx-dot{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;font-size:12px;color:var(--ap-body)}
.sx-map2 .sx-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:#b9bec5}
.sx-map2 .sx-me{padding:9px 16px;font-size:15px;color:#fff;box-shadow:0 0 0 8px rgba(56,115,145,.12),0 0 0 18px rgba(56,115,145,.06),0 14px 28px -12px rgba(23,25,28,.45)}
.sx-map2 .sx-me::before{background:#8ec8e0}
@media (max-width:600px){.sx-map2 .sx-map-plot{height:300px}.sx-map2 .sx-dot{font-size:11px;padding:4px 8px}.sx-q small{font-size:11px;left:10px;right:10px;white-space:normal}}
@media (max-width:600px){
  .sx-map2 i.sx-dot:nth-of-type(2){left:4%!important;bottom:5%!important}
  .sx-map2 i.sx-dot:nth-of-type(3){left:4%!important;bottom:18%!important}
  .sx-map2 i.sx-dot:nth-of-type(4){left:54%!important;bottom:12%!important}
  .sx-map2 i.sx-dot:nth-of-type(5){left:4%!important;bottom:66%!important}
  .sx-map2 i.sx-dot:nth-of-type(6){left:4%!important;bottom:31%!important}
  .sx-map2 b.sx-me{left:58%!important;bottom:56%!important;padding:7px 12px;font-size:13px}
}
.sx-map2 .sx-dot{transform:none}   /* left/bottom place the pill edge in every mode (the base rule centres it only when motion is on) */
.sx-ax2{color:#5d6269}   /* axis labels at 4.5:1 on the card (audit 10-09) */

/* ---------- Phone pass 2, role-page review fixes (2026-10-09) ---------- */
@media (max-width:600px){
  .v3-sec{padding:56px 0}
  .v3-sec.v3-sec-tint{margin:8px!important}
  /* role-page heroes: left-aligned like the homepage, a sensible headline, full-width chapter tabs */
  .v3-hero-cfo{padding-top:40px;text-align:left}
  .v3-hero-cfo .v3-h1{font-size:clamp(32px,9.4vw,38px);line-height:1.08}
  .v3-hero-cfo .v3-lede{margin-left:0;font-size:17px}
  .v3-hero-cfo .v3-eyebrow{display:flex;align-items:flex-start;line-height:16px}
  .v3-hero-cfo .v3-eyebrow::before{flex:none;margin-top:5px}
  .v3-hero-cfo .v3-hero-ctas{display:grid;grid-template-columns:1fr;gap:10px;justify-content:stretch}
  .v3-hero-cfo .v3-hero-ctas .v3-btn{justify-content:center;padding:0 10px;height:48px}
  .v3-tabs.v3-tabs-chapters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:32px;align-items:start}
  .v3-tabs-chapters .v3-tab,.v3-tabs-chapters .v3-tab:last-child{flex-direction:column;align-items:flex-start;gap:8px;padding:6px 0;min-height:56px}
  .v3-tabs-chapters .v3-tab span{white-space:normal;font-size:13px;line-height:17px;text-align:left}
  /* proof strip: label above the quote */
  :is(.tq-proof,.ap-funds-proof){text-align:left;padding:20px 0}
  :is(.tq-proof,.ap-funds-proof) b{display:block;margin:0 0 6px}
  /* the problem strip heading on the left edge like every other section */
  #problem .v3-wrap > :is(.v3-kicker,.v3-h2){text-align:left;margin-left:0}
  .pb-item .pb-body > b{text-wrap:balance}
  /* exposure legend rows grow with two-line labels; copy buttons stay on one line */
  .sx-legend > div{height:auto;min-height:32px;padding:4px 0}
  .sx-copy-btn{white-space:nowrap;height:36px}
  /* steps: cards size to content */
  .sx-sv{height:auto;padding:22px 16px!important}
  /* chips with longer words wrap inside their pill neatly */
  .sx-stage .ap-chip{white-space:nowrap}
  /* each picture sits with its own step: more room between steps than inside one (10-13) */
  .sx-steps{gap:64px}
  .sx-steps > li{display:grid;gap:12px}
  .sx-steps small{margin-top:4px}
  .v3-hero-cfo .v3-eyebrow{letter-spacing:.08em;font-size:11px}
  /* problem strip on a phone: compact numbered cards, words left, visual beneath */
  .sx-pb .pb-item,.sx-pb .pb-item[aria-expanded="true"]{flex-direction:column;align-items:stretch;gap:14px;padding:20px 18px;border-radius:20px}
  .sx-pb .pb-item .pb-n{align-self:flex-start;width:32px;height:32px;font-size:13px;order:0}
  .sx-pb .pb-item[aria-expanded="true"] .pb-body{display:flex;flex-direction:column-reverse;gap:14px;text-align:left}
  .sx-pb .pb-body > b{font-size:20px;line-height:1.25;text-align:left}
  .v3-hero ~ * :is(.tq-proof,.ap-funds-proof),:is(.tq-proof,.ap-funds-proof){text-align:left!important}
}

/* Accessibility pass (10-09). A part of the bar under the pointer drops its white wash, so its label goes
   to full ink (graphite on the mid blue was 4.2:1). The "Uncovered" label on the coral band was 3.7:1
   in the shared terracotta; this deeper terracotta is 4.8:1 there. */
.sx-segbar:has(.on) .sx-bseg:not(.on):hover span{color:var(--ap-ink)}
.sx-tl-gap{color:#8f4431}

/* v4-orbit.css */
/* Homepage v4 test: split hero. Words left; on the right a particle planet with
   two rings of the systems finance teams already run, feeding it data. */
.v4-hero{position:relative;padding:8px 0 48px;background:#fff;overflow:hidden;overflow:clip;isolation:isolate}
.v4-hero-row{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:24px;align-items:center;min-height:600px}
.v4-hero .ch-eyebrow{margin-bottom:20px}
.v4-h1{font-family:var(--display);font-weight:600;font-size:64px;line-height:1.02;letter-spacing:-.027em;color:var(--ink);margin:0;text-wrap:balance}
.v4-h1 span{color:var(--accent-2)}
.v4-lede{font-size:18px;line-height:1.5;color:var(--muted);max-width:40ch;margin:20px 0 0}
.v4-ctas{display:flex;gap:10px;margin-top:30px}

/* the scene */
.v4-sys{position:relative;height:660px;margin-left:-64px;margin-right:calc(min(-40px,calc((1280px - 100vw) / 2 + 60px)) + 64px)}   /* shifted towards the words; on wide screens it still runs into the empty right margin */
.v4-hero-row > div:first-child{position:relative;z-index:3}
.v4-sys canvas{position:absolute;inset:0;width:100%;height:100%}
.v4-tile{position:absolute;left:0;top:0;display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 15px;border-radius:11px;background:#fff;box-shadow:0 4px 12px -8px rgba(23,25,28,.4),0 0 0 1px rgba(23,25,28,.06);will-change:transform,opacity;transition:box-shadow .3s;cursor:default;z-index:2}
.v4-tile img{display:block;width:auto;filter:grayscale(1);opacity:.72;transition:opacity .3s}
.v4-tile.v4-mono img{filter:brightness(0);opacity:.62}
.v4-tile.on{box-shadow:0 6px 16px -8px rgba(23,25,28,.45),0 0 0 1.5px rgba(23,25,28,.55)}
.v4-tile.on img{opacity:1}
.v4-tile.back{z-index:1}


@media (max-width:1100px){.v4-hero-row{grid-template-columns:1fr}.v4-sys{margin-right:0;height:560px}}
.v4-see{background:#fff;padding:110px 0 70px;border-top:1px solid #efeeeb}
.v4-see .v3-kicker{text-align:center}
.v4-see .v3-h2{max-width:none}


/* First screen (Mingze 10-08): menu + hero + credibility strip = exactly one
   screen. The hero takes whatever the menu and strip leave, centres its
   content, and the scene grows or shrinks with it. --v4-nav and --v4-strip
   are measured by v4-orbit.js. Short screens fall back to natural height. */
.v4-fold{display:flex;flex-direction:column;min-height:calc(100svh - var(--v4-nav,69px))}
.v4-fold .v4-hero{flex:1;display:flex;align-items:center;padding:0}
.v4-fold .v4-hero > .v3-wrap{width:100%}
.v4-fold .v4-hero-row{min-height:0}
.v4-fold .v4-sys{height:clamp(460px,calc(100svh - var(--v4-nav,69px) - var(--v4-strip,134px) - 24px),780px)}
@media (max-height:640px){.v4-fold{min-height:0}.v4-fold .v4-hero{padding:24px 0 40px}}

/* Light-blue background, two tests (switch with ?bg=glow | wash | none).
   glow: a soft atmosphere centred on the planet (--glow-x/y/r set by v4-orbit.js).
   wash: the earlier homepage's band, white behind the words' top, ice through the middle. */
.v4-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .8s;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 140px,#000 calc(100% - 60px),transparent);mask-image:linear-gradient(180deg,transparent 0,#000 140px,#000 calc(100% - 60px),transparent)}
.v4-hero.bg-glow::before{opacity:1;background:radial-gradient(circle var(--glow-r,560px) at var(--glow-x,70%) var(--glow-y,50%),rgba(142,200,224,.38) 0%,rgba(190,222,237,.30) 38%,rgba(225,240,247,.18) 66%,rgba(255,255,255,0) 100%)}
.v4-hero.bg-wash::before{opacity:1;background:linear-gradient(180deg,#fff 0%,#f4f9fc 18%,#e3f0f7 46%,#dcedf6 62%,#eef6fa 84%,#fff 100%)}


/* ---------- 02 credibility strip: four kinds of proof ---------- */
.v4-strip{padding:26px 0}
.v4-strip-row{display:flex;justify-content:space-between;align-items:stretch;gap:32px}   /* content-sized cells, spare room shared evenly between them */
.v4-div{flex:none;width:1px;background:#efeeeb}
.v4-cell{display:grid;grid-template-rows:auto 44px;align-content:center;gap:14px}
.v4-cell > small{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.v4-backers{display:flex;align-items:center;gap:36px;min-height:36px}
.v4-backers img{width:auto;filter:grayscale(1) brightness(.35);opacity:.85;transition:opacity .25s,filter .25s}
.v4-backers img:hover{filter:none;opacity:1}
.v4-advs{display:flex;align-items:center;flex-wrap:nowrap;gap:0;min-height:36px}
.v4-adv{position:relative;width:36px;height:36px;margin-right:-8px;padding:0;border:0;border-radius:50%;background:none;cursor:default;transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.v4-adv img{width:36px;height:36px;border-radius:50%;box-shadow:0 0 0 2px #fff;filter:grayscale(1)}
.v4-adv:hover,.v4-adv:focus-visible{transform:translateY(-3px);z-index:3}
.v4-adv:hover img,.v4-adv:focus-visible img{filter:none}
.v4-advnote{margin-left:22px;font-size:13px;line-height:18px;color:var(--ink);white-space:nowrap}
.v4-pop{position:absolute;left:50%;bottom:calc(100% + 10px);z-index:6;display:grid;gap:2px;min-width:170px;padding:10px 12px;border-radius:10px;background:#fff;box-shadow:0 14px 34px -14px rgba(23,25,28,.4),0 0 0 1px rgba(23,25,28,.06);text-align:left;white-space:nowrap;opacity:0;visibility:hidden;transform:translate(-50%,4px);transition:opacity .2s,transform .25s cubic-bezier(.22,.61,.36,1),visibility 0s .2s;pointer-events:none}
.v4-pop b{font-size:13px;font-weight:600;color:var(--ink)}
.v4-pop small{font-size:12px;color:var(--muted)}
.v4-pop-wide{white-space:normal;width:240px;font-size:13px;line-height:19px;color:var(--ink)}
:is(.v4-adv,.v4-ind):is(:hover,:focus-visible) .v4-pop{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .2s,transform .25s cubic-bezier(.22,.61,.36,1)}
.v4-inds{display:flex;flex-wrap:wrap;gap:6px}
.v4-ind{position:relative;display:inline-flex;align-items:center;height:28px;padding:0 11px;border:0;border-radius:999px;background:#f3f4f5;font:inherit;font-size:12.5px;color:var(--ink);white-space:nowrap}
.v4-ind.has{cursor:default;padding-right:24px}
.v4-ind.has::after{content:"";position:absolute;right:10px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#8ec8e0}
.v4-ind.has:hover,.v4-ind.has:focus-visible{background:#e6f1f7}
.v4-seal{display:flex;align-items:center;gap:12px;min-height:36px}
.v4-seal img{flex:none;width:46px;height:46px;object-fit:cover;object-position:0 50%;filter:grayscale(1) contrast(1.1);opacity:.8}   /* the AICPA file holds two seals; show the SOC 2 one */
.v4-seal-old{flex:none;width:34px;height:34px;border-radius:50%;background:#e6f4ef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l7 3v5c0 4.4-3 8-7 9.5C8 19 5 15.4 5 11V6z' fill='none' stroke='%232e7d6b' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M8.8 11.8l2.2 2.2 4.2-4.4' fill='none' stroke='%232e7d6b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}
.v4-seal span{display:grid;line-height:18px}
.v4-seal b{font-size:13.5px;font-weight:600;color:var(--ink)}
.v4-seal em{font-style:normal;font-size:12px;color:var(--muted)}

/* ---------- 03 the platform: tabs over one window ---------- */
.v4-show{padding:110px 0 80px;background:#fff}
.v4-show-head{text-align:center;max-width:720px;margin:0 auto 30px}
.v4-show-head .v3-h2{margin:0 auto}
.v4-tabs{display:flex;justify-content:center;gap:4px;width:max-content;max-width:100%;margin:0 auto 22px;padding:4px;border-radius:14px;background:#f3f4f5}
.v4-tab{position:relative;height:38px;padding:0 18px;border:0;border-radius:10px;background:none;font:inherit;font-size:14px;color:var(--muted);cursor:pointer;overflow:hidden;transition:background .25s,color .25s,box-shadow .25s}
.v4-tab:hover{color:var(--ink)}
.v4-tab[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(23,25,28,.08),0 0 0 1px rgba(23,25,28,.05)}
.v4-tab:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.v4-tprog{position:absolute;left:18px;right:18px;bottom:5px;height:2px;border-radius:1px;overflow:hidden}
.v4-tprog b{display:block;height:100%;width:0;background:var(--accent-2);opacity:.7}
.v4-tab[aria-selected="false"] .v4-tprog{display:none}
.v4-show-win{position:relative;max-width:1180px;margin:0 auto}
.v4-show-win::before{content:"";position:absolute;inset:-40px -80px -30px;z-index:-1;background:radial-gradient(circle,rgba(56,115,145,.22) 1px,transparent 1.5px) 0 0/16px 16px;-webkit-mask-image:radial-gradient(75% 70% at 50% 50%,#000 45%,transparent 100%);mask-image:radial-gradient(75% 70% at 50% 50%,#000 45%,transparent 100%)}
.v4-show .v3-window.ap-screen{height:620px}
.v4-caps{max-width:720px;margin:22px auto 0;min-height:52px;text-align:center}
.v4-cap{display:grid;gap:4px;animation:v4cap .4s cubic-bezier(.22,.61,.36,1)}
.v4-cap[hidden]{display:none}
.v4-show .ap-toast{display:none}   /* no 'copied' messages without a click */
.v4-cap b{font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.v4-cap span{font-size:15px;color:var(--muted)}
@keyframes v4cap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.v4-show .v3-note{text-align:center;margin-top:10px}
@media (prefers-reduced-motion: reduce){.v4-cap{animation:none}}
.ap-home .ap-side[data-side="funds"],.ap-home[data-role="f3"] .ap-side[data-side="corp"]{display:none}
.ap-home[data-role="f3"] .ap-side[data-side="funds"]{display:flex}
.ap-home .ap-top [data-for]{display:none}
.ap-home[data-role="k1"] .ap-top [data-for~="k1"],.ap-home[data-role="a1"] .ap-top [data-for~="a1"],.ap-home[data-role="a2"] .ap-top [data-for~="a2"],
.ap-home[data-role="a3"] .ap-top [data-for~="a3"],.ap-home[data-role="f3"] .ap-top [data-for~="f3"]{display:inline-flex}
.ap-home.ap-funds .ap-main{grid-template-rows:52px 1fr}

/* ---------- 04 doors: fan-out on scroll (v4-doors.js sets translate/rotate/scale) ---------- */
#doors .ch-door{transform-origin:50% 100%;will-change:translate,rotate,scale}

/* ---------- 05 results: a grid of three different cards ---------- */
.v4-bento{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;gap:20px;margin-top:40px}
.v4-card{display:grid;align-content:start;gap:14px;padding:26px 28px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px rgba(23,25,28,.06),0 24px 48px -36px rgba(23,25,28,.35)}
.v4-card-big{grid-row:span 2;display:flex;flex-direction:column;background:linear-gradient(180deg,#f3f9fc,#fff 60%)}
.v4-card-big .v4-dbs{margin-top:auto}
.v4-card > small{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2)}
.v4-card p{margin:0;font-size:15px;line-height:1.5;color:var(--muted)}
.v4-big{display:grid;gap:4px}
.v4-big strong{font-family:var(--mono);font-weight:400;font-size:72px;line-height:1;letter-spacing:-.04em;color:#2c7867}
.v4-big > span{font-size:16px;color:var(--ink)}
.v4-dbs{display:grid;gap:10px;margin-top:10px}
.v4-dbh{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.v4-dbh i{display:inline-block;width:8px;height:8px;border-radius:50%;margin:0 5px 0 12px;vertical-align:0}
.v4-dbh i.was,.v4-db em{background:#ec9c86}.v4-dbh i.now,.v4-db u{background:#2c7867}
.v4-db{display:grid;grid-template-columns:60px 1fr 92px;align-items:center;gap:14px;font-size:13px;color:var(--ink)}
.v4-db i{position:relative;height:20px;background:linear-gradient(#eceef0,#eceef0) center/100% 2px no-repeat}
.v4-db s{position:absolute;top:50%;height:2px;margin-top:-1px;left:var(--b);width:calc(var(--a) - var(--b));background:#cfe6f1}
.v4-db u,.v4-db em{position:absolute;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%}
.v4-db u{left:var(--b)}.v4-db em{left:var(--a)}
.v4-db b{font-weight:400;font-size:12px;text-align:right;color:var(--muted)}
.v4-fine{font-size:12px!important}
.v4-card blockquote{margin:0;font-family:var(--display);font-size:24px;line-height:1.25;letter-spacing:-.02em;color:var(--ink)}
.v4-card blockquote b{font-weight:600}
.v4-trail{list-style:none;display:flex;align-items:center;gap:0;margin:0;padding:0}
.v4-trail li{font-size:12px;color:var(--ink);padding:5px 10px;border-radius:999px;background:#f3f4f5;white-space:nowrap}
.v4-trail li + li{margin-left:22px;position:relative}
.v4-trail li + li::before{content:"";position:absolute;right:100%;top:50%;width:22px;height:1px;background:repeating-linear-gradient(90deg,#9aa0a6 0 2px,transparent 2px 5px)}
.v4-trail li:last-child{background:#17191c;color:#fff}
.v4-drv{display:grid;gap:9px}
.v4-drv div{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:12px;font-size:13px;color:var(--ink)}
.v4-drv i{height:9px;width:var(--w);border-radius:5px;background:#ec9c86;transform-origin:left;transform:scaleX(0);transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.v4-drv i.g{background:#7fc9b5}
.v4-results.is-in .v4-drv i{transform:none}
.v4-results.is-in .v4-drv div:nth-child(2) i{transition-delay:.1s}.v4-results.is-in .v4-drv div:nth-child(3) i{transition-delay:.2s}.v4-results.is-in .v4-drv div:nth-child(4) i{transition-delay:.3s}
@media (prefers-reduced-motion: reduce){.v4-drv i{transform:none}}

/* ---------- 04 doors: three visuals the same height, each filled ---------- */
#doors .ch-viz.ap{display:flex;flex-direction:column;min-height:252px}
#doors .ch-viz.ap .v-trace{flex:none}
#doors .ch-viz.ap .v-cov{flex:1;height:auto;min-height:150px}
.ch-vfoot{margin-top:auto;padding-top:10px;box-shadow:inset 0 1px 0 var(--ap-line);font-size:11.5px;color:#2c7867}
.ch-vleg{display:flex;justify-content:space-between;gap:8px;margin-top:8px;font-size:11px;color:var(--ap-muted);white-space:nowrap}
.ch-vleg i{display:inline-block;width:10px;height:7px;margin-right:5px;border-radius:2px;background:#c9eae0;vertical-align:0}

/* ---------- headings: no single word left on the second line ---------- */
.v4-show .v3-h2,#doors .v3-h2,.v4-results .v3-h2,.v4-trust .v3-h2,.v3-cta .v3-h2{text-wrap:balance}

/* ---------- 05 results: the band behind it, and a fuller big card ---------- */
.v4-band{background:linear-gradient(180deg,#fff 0,#f2f8fb 18%,#eaf4f9 60%,#f2f8fb 86%,#fff 100%);border-top:0}
.v4-band .v4-card{background:#fff}
.v4-band .v4-card-big{background:linear-gradient(180deg,#f7fbfd,#fff 60%)}
.v4-card-big .v4-dbs{margin-top:28px}
.v4-card-big .v4-fine{margin-top:auto!important;padding-top:16px}
.v4-db{grid-template-columns:60px 1fr 92px;min-height:30px}
.v4-dbs{gap:14px}

/* ---------- 06 trust: run log beside the words, the four figures in one row below ---------- */
.v4-trust .v3-split2{align-items:center}
.v4-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:56px;padding-top:32px;box-shadow:inset 0 1px 0 rgba(23,25,28,.08)}
.v4-stats div{display:grid;gap:6px}
.v4-stats b{font-family:var(--mono);font-weight:400;font-size:40px;line-height:1;letter-spacing:-.03em;color:var(--ink)}
.v4-stats span{font-size:14px;color:var(--muted)}
@media (max-width:900px){.v4-stats{grid-template-columns:1fr 1fr}}

/* the platform and doors headings fit on one line at desktop widths */
.v4-show .v3-h2,#doors .v3-h2{max-width:none}
#doors .ch-viz.ap .v-trace{gap:8px}

/* ---------- first screen as a framed panel (Mingze 10-08, after Spade) ----------
   The hero becomes a rounded ice panel set in from the screen edges; the menu
   stays on white above it and the strip sits on white below, after a clear gap.
   Still exactly one screen: the gap is part of the sum (--v4-gap). */
.has-v4-panel{--v4-gap:40px}
.v4-hero.v4-panel{margin:6px clamp(12px,1.4vw,24px) 0;border-radius:14px;overflow:hidden;background:#eef5f9}
.v4-hero.v4-panel.bg-glow::before{opacity:0}
/* edge detail test (?edge=corners default | ticks | none), our own take on Spade's ruler:
   corners: four small L-shaped marks inside the panel's corners, like a viewfinder;
   ticks: hairline ruler ticks along both side edges, a longer one every fifth. */
.v4-cm,.v4-tick{position:absolute;z-index:0;pointer-events:none;display:none}
.v4-panel.edge-corners .v4-cm{display:block;width:24px;height:24px}   /* four whole dots per arm */
/* round dots, in the planet's language, light enough to recede */
.v4-cm{--d:radial-gradient(circle,rgba(56,115,145,.5) 1.1px,transparent 1.7px);--s:6px 6px}
.v4-cm.tl{top:14px;left:14px;background:var(--d) 0 0/var(--s) repeat-x,var(--d) 0 0/var(--s) repeat-y}
.v4-cm.tr{top:14px;right:14px;background:var(--d) 0 0/var(--s) repeat-x,var(--d) 100% 0/var(--s) repeat-y}
.v4-cm.bl{bottom:14px;left:14px;background:var(--d) 0 100%/var(--s) repeat-x,var(--d) 0 0/var(--s) repeat-y}
.v4-cm.br{bottom:14px;right:14px;background:var(--d) 0 100%/var(--s) repeat-x,var(--d) 100% 0/var(--s) repeat-y}
.v4-panel.edge-ticks .v4-tick{display:block;top:0;bottom:0;width:14px;
  -webkit-mask-image:linear-gradient(180deg,transparent 3%,#000 18%,#000 82%,transparent 97%);mask-image:linear-gradient(180deg,transparent 3%,#000 18%,#000 82%,transparent 97%)}
.v4-tick.l{left:0;background:repeating-linear-gradient(180deg,rgba(56,115,145,.5) 0 1px,transparent 1px 120px) 0 6px/14px 100% no-repeat,repeating-linear-gradient(180deg,rgba(56,115,145,.32) 0 1px,transparent 1px 24px) 0 6px/7px 100% no-repeat}
.v4-tick.r{right:0;background:repeating-linear-gradient(180deg,rgba(56,115,145,.5) 0 1px,transparent 1px 120px) 100% 6px/14px 100% no-repeat,repeating-linear-gradient(180deg,rgba(56,115,145,.32) 0 1px,transparent 1px 24px) 100% 6px/7px 100% no-repeat}
.has-v4-panel .v4-fold .v4-strip{margin-top:var(--v4-gap);border-top:0;border-bottom:0;padding-top:0;padding-bottom:54px}
.has-v4-panel .v4-fold .v4-sys{height:clamp(390px,calc(100svh - var(--v4-nav,69px) - var(--v4-strip,134px) - var(--v4-gap) - 30px),860px)}
.has-v4-panel .v4-tile{box-shadow:0 6px 16px -10px rgba(23,25,28,.35),0 0 0 1px rgba(23,25,28,.05)}
/* short laptop screens: a slightly smaller headline keeps air inside the panel */
@media (max-height:740px){.v4-h1{font-size:54px}.v4-lede{margin-top:14px}.v4-ctas{margin-top:22px}.v4-hero .ch-eyebrow{margin-bottom:14px}}

/* ---------- spacing system (audit 2026-10-08, .context/spacing/AUDIT.md) ----------
   4 px base: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128. Homepage only.
   Sections 96/96 · kicker→heading 16 · heading→content 48 · card padding 24 (doors) / 32 (results)
   · grid gap 24 · in-card stack 16 · controls 44 high. */
.v4-home{--sp-section:96px}
/* G1 one section padding */
.v4-home :is(.v3-sec,.ch-sec,.v4-show){padding-top:var(--sp-section);padding-bottom:var(--sp-section)}
/* G2 two-line headings breathe a little */
.v4-home .v3-h2{line-height:1.12}
/* G3 + C1 one control height */
.v4-home .v3-btn{height:44px;padding:0 20px}
.v4-home .v3-nav .v3-btn{height:40px;padding:0 18px}
.v4-home .v3-input{height:44px;padding:0 16px}
/* H1 one left edge at every width (hero text, logo and strip) */
.has-v4-panel{--pm:clamp(12px,1.4vw,24px)}
.has-v4-panel .v3-wrap:not(.v4-hero-row){padding-inline:max(40px,calc(40px + var(--pm) - max(0px,(100vw - 1360px)/2)))}
/* W3 + W4 the product window runs the full grid and loses its dead space */
.v4-home .v4-show-win{max-width:1280px}
.v4-home .v4-show .v3-window.ap-screen{height:592px}
/* D1–D7 the role doors: one card system, aligned visuals, proper buttons */
.v4-home .ch-sec .v3-h2{margin-bottom:48px}
.v4-home .ch-sec .ch-doors{padding:24px;gap:24px}
.v4-home .ch-door{padding:24px;gap:16px}
.v4-home #doors .ch-q{min-height:80px}
.v4-home #doors .ch-viz.ap{min-height:232px}
.v4-home .ch-go{margin-top:16px;gap:8px;height:44px;padding:0 16px}
/* R1 + R2 results: heading-to-grid 48, grid gap 24, feature-card padding 32 */
.v4-home .v4-bento{margin-top:48px;gap:24px}
.v4-home .v4-card{padding:32px;gap:16px}
/* T1 the run log sits centred on the text beside it */
.v4-home .v4-trust .sx-runlog{margin-top:0}

/* ---------- spacing polish (audit Low items; H5 skipped by ruling, H7 and R5 left as designed) ---------- */
/* G4 + G5 one label size, one kicker gap */
.v4-home .v3-kicker{margin-bottom:16px}
.v4-home :is(.v4-cell > small,.v4-card > small,.ch-role,.v3-foot-row small){font-size:11px;line-height:16px}
/* H2–H4 hero stack */
.v4-home .v4-hero .ch-eyebrow{margin-bottom:24px}
.v4-home .v4-h1{line-height:1.08}
.v4-home .v4-lede{margin-top:24px}
.v4-home .v4-ctas{margin-top:32px;gap:12px}
@media (max-height:740px){.v4-home .v4-lede{margin-top:16px}.v4-home .v4-ctas{margin-top:24px}.v4-home .v4-hero .ch-eyebrow{margin-bottom:16px}}
/* H6 logo tiles on the scale */
.v4-home .v4-tile{height:40px;padding:0 16px;border-radius:12px}
/* S1–S4 strip: centred in its band, one gap family */
.v4-home.has-v4-panel,.has-v4-panel .v4-home{--v4-gap:48px}
.has-v4-panel .v4-home .v4-fold .v4-strip{padding-bottom:46px}
.v4-home .v4-cell{gap:16px}
.v4-home .v4-seal{gap:16px}
.v4-home .v4-seal img{width:44px;height:44px}
.v4-home .v4-advnote{margin-left:24px}
.v4-home .v4-backers{gap:32px}
/* W1, W2, W5 the platform */
.v4-home .v4-show-head{margin-bottom:32px}
.v4-home .v4-tabs{margin-bottom:24px}
.v4-home .v4-tab{height:36px}
.v4-home .v4-caps{margin-top:24px}
.v4-home .v4-show .v3-note{margin-top:16px}
/* D8, D9 doors */
.v4-home .ch-viz.ap .cb{margin-left:0;margin-right:0}
.v4-home .ch-neutral{margin-top:24px}
/* R3, R4 results */
.v4-home .v4-card-big .v4-dbs{margin-top:32px}
.v4-home .v4-card-big .v4-fine{padding-top:16px}
.v4-home .v4-drv{gap:8px}
.v4-home .v4-trail li + li{margin-left:24px}
.v4-home .v4-trail li + li::before{width:24px}
/* T2, T3 trust: the run log's edge lands on the third stat column */
.v4-home .v4-trust .v3-split2{grid-template-columns:minmax(0,1fr) 628px;gap:64px}
.v4-home .v4-stats{margin-top:64px}
.v4-home .v4-stats div{gap:8px}
@media (max-width:900px){.v4-home .v4-trust .v3-split2{grid-template-columns:1fr}}
/* C2, C3 final call */
.v4-home .v3-cta .v3-or{margin-top:32px}
.v4-home .sx-ladder{display:grid;grid-template-columns:repeat(3,160px);justify-content:center;gap:16px;margin-top:32px}
@media (max-width:600px){.v4-home .sx-ladder{grid-template-columns:1fr}}
/* F1, F2 footer */
.v4-home .v3-foot{padding:80px 0 32px}
.v4-home .v3-foot-row div{gap:12px}
.v4-home .v3-foot-legal{margin-top:64px}

/* ---------- 04a How it works: connect → overlay → attribute ---------- */
.v4-how .v3-p{max-width:560px;margin:16px auto 0;text-align:center}
.v4-flow{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin:48px 0 0;padding:0}
.v4-fstep{position:relative;display:grid;align-content:start;gap:8px;opacity:.35;transition:opacity .6s cubic-bezier(.22,.61,.36,1)}
.v4-fstep.is-on{opacity:1}
.v4-fstep small{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2)}
.v4-fstep h3{margin:0;font-family:var(--display);font-weight:600;font-size:22px;line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.v4-fstep p{margin:0;font-size:15px;line-height:1.5;color:var(--muted)}
/* the dotted link to the next step, with a dot travelling along it */
.v4-fstep:not(:last-child)::after{content:"";position:absolute;top:196px;left:calc(100% + 6px);width:36px;height:2px;background:radial-gradient(circle,rgba(56,115,145,.55) 1px,transparent 1.5px) 0 0/6px 2px repeat-x;opacity:0;transition:opacity .4s .6s}
.v4-fstep.is-on:not(:last-child)::after{opacity:1}
.v4-fviz.ap{display:grid;gap:8px;align-content:start;min-height:172px;margin-top:16px;padding:16px;border-radius:12px;background:#fff;box-shadow:var(--ap-s1),0 0 0 1px rgba(23,25,28,.04)}
.v4-file{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;height:40px;padding:0 10px;border-radius:8px;background:var(--ap-sunk);font-size:12px;color:var(--ap-ink);opacity:0;transform:translateX(-8px);transition:opacity .4s,transform .5s cubic-bezier(.22,.61,.36,1)}
.v4-file img{width:auto;filter:grayscale(1);opacity:.75}.v4-file img.mono{filter:brightness(0);opacity:.6}
.v4-file code{font-family:var(--mono);font-size:11.5px;color:var(--ap-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v4-file b{font-weight:400;font-size:11.5px;color:var(--ap-muted)}
.v4-fstep.is-on .v4-file{opacity:1;transform:none}
.v4-fstep.is-on .v4-file:nth-child(2){transition-delay:.15s}.v4-fstep.is-on .v4-file:nth-child(3){transition-delay:.3s}
.v4-mkt{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--ap-muted)}
.v4-mkt b{font-family:var(--mono);font-weight:400;font-size:20px;color:var(--bad)}
.v4-spark{width:100%;height:64px}
.v4-spark path{fill:none;stroke:#387391;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke;transition:stroke-dashoffset 1.2s cubic-bezier(.22,.61,.36,1) .2s}
.v4-fstep.is-on .v4-spark path{stroke-dashoffset:0}
.v4-mchips{display:flex;gap:6px}
.v4-mchips span{height:24px;display:inline-flex;align-items:center;padding:0 9px;border-radius:6px;background:#e8f2f7;font-size:11.5px;color:var(--ap-blue)}
.v4-asplit{display:flex;gap:3px;height:44px;margin-top:4px;border-radius:8px;overflow:hidden}
.v4-asplit i{display:flex;flex-direction:column;justify-content:center;padding:0 10px;font-style:normal;white-space:nowrap;overflow:hidden;width:0;transition:width .8s cubic-bezier(.22,.61,.36,1) .2s}
.v4-asplit i span{font-size:11px;line-height:13px}.v4-asplit i b{font-family:var(--mono);font-weight:400;font-size:13px}
.v4-asplit .m{background:var(--data-1);color:#fff}.v4-asplit .b{background:var(--data-2,#8ec8e0);color:var(--ap-ink)}
.v4-fstep.is-on .v4-asplit .m{width:66%}.v4-fstep.is-on .v4-asplit .b{width:34%}
.v4-atrace{display:flex;align-items:center;gap:8px;height:32px;margin-top:4px;padding:0 10px;border-radius:8px;background:#e6f4ef;font-size:11.5px;color:#2c7867;opacity:0;transition:opacity .4s 1s}
.v4-atrace i{flex:1;height:2px;background:radial-gradient(circle,#2c7867 1px,transparent 1.5px) 0 0/6px 2px repeat-x}
.v4-atrace em{font-style:normal;font-weight:600}
.v4-fstep.is-on .v4-atrace{opacity:1}
@media (max-width:900px){.v4-flow{grid-template-columns:1fr}.v4-fstep::after{display:none}}
@media (prefers-reduced-motion: reduce){.v4-fstep,.v4-file,.v4-spark path,.v4-asplit i,.v4-atrace{transition:none!important}}

/* ---------- 04b What it surfaces: corporate | funds, four questions, risk legend ---------- */
.v4-surf-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;max-width:1280px;margin:0 auto 16px}
.v4-seg{display:inline-flex;padding:4px;border-radius:14px;background:#f3f4f5}
.v4-seg button{height:36px;padding:0 18px;border:0;border-radius:10px;background:none;font:inherit;font-size:14px;color:var(--muted);cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.v4-seg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(23,25,28,.08),0 0 0 1px rgba(23,25,28,.05)}
.v4-seg button:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.v4-risks{display:flex;align-items:center;gap:6px}
.v4-risks small{margin-right:6px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.v4-risks span{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:8px;background:#f3f4f5;font-size:13px;color:#a2a6ac;transition:background .3s,color .3s}
.v4-risks span::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.6}
.v4-risks span.on{background:#e8f2f7;color:var(--ink)}
.v4-risks span[data-r="fx"].on{background:#dcedf6}
.v4-qtabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:1280px;margin:0 auto 24px}
.v4-qt{position:relative;display:grid;gap:2px;justify-items:start;padding:12px 16px 14px;border:0;border-radius:14px;background:#f6f7f8;font:inherit;text-align:left;cursor:pointer;overflow:hidden;transition:background .25s,box-shadow .25s}
.v4-qt b{font-size:16px;font-weight:600;color:var(--muted)}
.v4-qt span{font-size:13px;color:#6b6f76}
.v4-qt:hover b{color:var(--ink)}
.v4-qt[aria-selected="true"]{background:#fff;box-shadow:0 1px 2px rgba(23,25,28,.08),0 0 0 1px rgba(23,25,28,.07)}
.v4-qt[aria-selected="true"] b{color:var(--ink)}.v4-qt[aria-selected="true"] span{color:var(--muted)}
.v4-qt:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.v4-qt .v4-tprog{left:16px;right:16px;bottom:6px}
.v4-qt[aria-selected="false"] .v4-tprog{display:none}
.v4-surf .v4-show-win{max-width:1280px}
.v4-surf .v3-window.ap-screen{height:600px}
.v4-surf .ap-toast{display:none}
.ap-surf .ap-side[data-side="funds"],.ap-surf[data-seg="funds"] .ap-side[data-side="corp"]{display:none}
.ap-surf[data-seg="funds"] .ap-side[data-side="funds"]{display:flex}
.ap-surf .ap-top [data-seg-chip]{display:none}
.ap-surf[data-seg="corp"] .ap-top [data-seg-chip="corp"],.ap-surf[data-seg="funds"] .ap-top [data-seg-chip="funds"]{display:inline-flex}
.ap-surf.ap-funds .ap-main{grid-template-rows:52px 1fr}
.v4-surf .v4-xt .ap-tr{grid-template-columns:1.9fr .8fr .8fr 1.1fr}
.v4-surf .v4-xt .ap-tr .ap-chip{height:20px}
.v4-surf .v4-mark span{width:auto;text-align:left;font-size:12px;color:var(--ap-muted)}
.v4-surf :is([data-role="ce"],[data-role="fe"]) .ap-share u b{transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.v4-surf :is([data-role="ce"],[data-role="fe"]).s2 .ap-share u b{transform:none}
.v4-surf [data-role="ci"] .ap-table{margin-top:4px}
@media (max-width:900px){.v4-surf-bar{flex-direction:column;align-items:flex-start}.v4-qtabs{grid-template-columns:1fr 1fr}}

/* review marker between the new sections and the old showcase */
.v4-was{display:flex;align-items:center;gap:14px;max-width:1280px;margin:0 auto;padding:0 40px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#a9523b}
.v4-was::before,.v4-was::after{content:"";flex:1;border-top:1px dashed rgba(180,87,63,.45)}
.v4-surf .v4-xt{-webkit-mask-image:none;mask-image:none}
.v4-surf :is([data-role="ce"],[data-role="fe"]) .ap-share u b{background:#387391}   /* hedged is cover, not a loss */
.v4-surf .v4-more .ent{color:var(--ap-muted)}

.v4-trust-soc{display:block;width:72px;height:72px;margin-top:24px;object-fit:cover;object-position:0 50%;filter:grayscale(1) contrast(1.1);opacity:.8}   /* the AICPA file holds two seals; show SOC 2 */
.v4-trust-soc,.ab-band .v4-seal img{mix-blend-mode:multiply}   /* the seal file has a white ground */

/* the platform: the answer strip under the window. One key figure lifted from
   the screen (large mono), a hairline, then the answer. Re-enters on each change. */
.v4-ans{max-width:1280px;margin:32px auto 0}
.v4-an{display:grid;grid-template-columns:minmax(0,320px) 1px minmax(0,1fr);align-items:center;gap:40px;padding:28px 40px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px rgba(23,25,28,.06),0 24px 48px -36px rgba(23,25,28,.35)}
.v4-an::before{content:"";grid-column:2;grid-row:1;align-self:stretch;width:1px;background:rgba(23,25,28,.1)}
.v4-an-fig{grid-column:1;grid-row:1;display:grid;gap:6px}
.v4-an-fig b{font-family:var(--mono);font-weight:400;font-size:44px;line-height:1;letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
.v4-an-fig b.neg{color:#a9523b}
.v4-an-fig small{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.v4-an-txt{grid-column:3;grid-row:1;display:grid;gap:6px}
.v4-an-txt strong{font-family:var(--display);font-size:26px;font-weight:600;line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.v4-an-txt span{font-size:16px;line-height:1.5;color:var(--muted)}
.v4-an:not([hidden]) .v4-an-fig{animation:v4an-in .55s cubic-bezier(.22,.61,.36,1) both}
.v4-an:not([hidden]) .v4-an-txt{animation:v4an-in .55s cubic-bezier(.22,.61,.36,1) .08s both}
@keyframes v4an-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.v4-an[hidden]{display:none}
@media (max-width:900px){.v4-an{grid-template-columns:1fr;gap:16px;padding:24px}.v4-an::before{display:none}.v4-an-txt{grid-column:1;grid-row:2}}
@media (prefers-reduced-motion: reduce){.v4-an-fig,.v4-an-txt{animation:none!important}}

/* answer strip, quieter (Mingze 10-08): type at the cards' own scale, no shadow,
   clear of the window's shadow, sitting above it */
.v4-ans{position:relative;z-index:1;margin-top:48px}
.v4-an{grid-template-columns:minmax(0,200px) 1px minmax(0,1fr);gap:24px;padding:16px 24px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(23,25,28,.07)}
.v4-an-fig{gap:4px}
.v4-an-fig b{font-size:20px;letter-spacing:-.02em}
.v4-an-fig small{font-size:11px}
.v4-an-txt{gap:2px}
.v4-an-txt strong{font-family:var(--sans);font-size:16px;font-weight:600;line-height:1.35;letter-spacing:-.01em}
.v4-an-txt span{font-size:14px;line-height:1.5}
/* answer strip sized to its content, centred under the window; one line each */
.v4-an{width:fit-content;max-width:100%;margin:0 auto;grid-template-columns:auto 1px auto;gap:28px;padding:16px 28px}
.v4-an-fig b,.v4-an-fig small,.v4-an-txt strong{white-space:nowrap}
/* the explanation wraps inside the strip's fixed width; it ran past the card's edge (Mingze 10-13) */
.v4-an-txt span{text-wrap:pretty}
/* the platform window's shadow: shorter and softer so it clears the strip */
.v4-surf .ap-bezel{box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 0 3px rgba(255,255,255,.35),0 22px 44px -26px rgba(23,25,28,.26)}
.v4-surf .v4-ans{margin-top:40px}
/* one steady width so the strip does not resize between screens; the divider stays put */
.v4-an{width:800px;grid-template-columns:200px 1px minmax(0,1fr)}   /* 800: the longest line fits on one row (10-13) */

/* ---- How it works, 2026-10-09: systems not files in 01; knowledge graph in 02 ----
   The three cards line up whatever the copy length (subgrid), the dotted link
   sits on each card's middle, and 02's chart carries one flagged point. */
.v4-file span{font-size:12px;color:var(--ap-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@supports (grid-template-rows:subgrid){
  .v4-flow{grid-template-rows:auto auto auto 1fr;row-gap:0}
  .v4-fstep{grid-row:span 4;grid-template-rows:subgrid;gap:0}
  .v4-fstep h3{margin-top:8px}.v4-fstep p{margin-top:8px}
  .v4-fstep:not(:last-child)::after{display:none}
  .v4-fviz.ap{position:relative}
  .v4-fstep:not(:last-child) .v4-fviz::after{content:"";position:absolute;top:50%;left:calc(100% + 6px);width:36px;height:2px;background:radial-gradient(circle,rgba(56,115,145,.55) 1px,transparent 1.5px) 0 0/6px 2px repeat-x;opacity:0;transition:opacity .4s .6s}
  .v4-fstep.is-on:not(:last-child) .v4-fviz::after{opacity:1}
}
.v4-kg{position:relative;height:80px}
.v4-kg .v4-spark{position:absolute;inset:0;height:100%}
.v4-kg-dot{position:absolute;left:25%;top:25%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2.5px #a9523b,0 0 0 4px rgba(236,156,134,.25);opacity:0;transform:scale(.4);transition:opacity .3s 1.3s,transform .4s cubic-bezier(.22,.61,.36,1) 1.3s}
.v4-kg-dot::after{content:"";position:absolute;left:4px;top:12px;width:2px;height:34px;background:radial-gradient(circle,rgba(180,87,63,.6) 1px,transparent 1.4px) 0 0/2px 5px repeat-y}
.v4-kg-flag{position:absolute;left:0;bottom:0;display:grid;gap:1px;padding:6px 10px;border-radius:8px;background:#fbece7;font-size:11px;line-height:15px;color:#a0432c;opacity:0;transform:translateY(4px);transition:opacity .4s 1.6s,transform .4s cubic-bezier(.22,.61,.36,1) 1.6s}
.v4-kg-flag b{font-weight:600}
.v4-fstep.is-on .v4-kg-dot{opacity:1;transform:none}
.v4-fstep.is-on .v4-kg-flag{opacity:1;transform:none}
.v4-mchips span.kg{background:#fbece7;color:#a0432c}
@media (prefers-reduced-motion: reduce){.v4-kg-dot,.v4-kg-flag{transition:none!important}}
.v4-file{grid-template-columns:72px 1fr auto}
.v4-kg .v4-spark{width:100%}
/* the line stopped at ~70%: with a non-scaling stroke the 1-unit dash came out short; a 3-unit dash covers the whole path */
.v4-spark path{stroke-dasharray:3;stroke-dashoffset:3}
.v4-fstep.is-on .v4-spark path{stroke-dashoffset:0}

/* ---- 2026-10-09: doors with more air; buttons bold and full width (it is a choice) ---- */
.v4-home #doors .ch-door{gap:0;padding:32px}
.v4-home #doors .ch-role{margin-bottom:16px}
.v4-home #doors .ch-q{margin-bottom:24px}
.v4-home #doors .ch-viz.ap{margin-bottom:28px}
.v4-home #doors .ch-a{margin-bottom:24px}
.v4-home #doors .ch-go{display:flex;width:100%;margin-top:0;height:48px;padding:0 18px;font-weight:600;font-size:15px}
/* "not sure where you fit": a wide card under the doors — a blank map with your
   name on it, one line, and the way in */
.ch-alt{display:grid;grid-template-columns:260px 1fr auto;align-items:center;gap:40px;margin-top:24px;padding:24px 32px 24px 24px;border-radius:24px;background:linear-gradient(90deg,#eef6fa,#f6fafc 55%,#fff);box-shadow:inset 0 0 0 1px rgba(56,115,145,.14);text-decoration:none;text-align:left;transition:box-shadow .3s,transform .3s cubic-bezier(.22,.61,.36,1)}
.ch-alt:hover,.ch-alt:focus-visible{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(56,115,145,.24),0 24px 48px -32px rgba(23,25,28,.35)}
.ch-alt:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}
.ch-alt-viz.ap{display:grid;gap:12px;padding:16px;border-radius:14px;background:#fff;box-shadow:var(--ap-s2)}
.ch-alt-h{display:flex;justify-content:space-between;align-items:center}
.ch-alt-h b{font-size:13px;font-weight:600;color:var(--ap-ink)}
.ch-alt-h em{height:22px;display:inline-flex;align-items:center;padding:0 8px;border-radius:6px;background:#e8f2f7;font-style:normal;font-size:11px;color:var(--ap-blue)}
.ch-alt-rows{display:grid;gap:8px}
.ch-alt-rows > span{display:grid;grid-template-columns:32px 1fr;align-items:center;gap:10px}
.ch-alt-rows i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--ap-muted)}
.ch-alt-rows u{display:block;height:8px;width:var(--w);border-radius:4px;background:repeating-linear-gradient(90deg,#cfe6f1 0 6px,#e3f0f7 6px 12px);transition:width .8s cubic-bezier(.22,.61,.36,1)}
.ch-alt:hover .ch-alt-rows u{background:var(--data-1)}
.ch-alt-txt{display:grid;gap:4px}
.ch-alt-txt small{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2)}
.ch-alt-txt b{font-family:var(--display);font-size:24px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.ch-alt-txt > span{font-size:15px;line-height:1.5;color:var(--muted)}
.ch-alt-go{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 20px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px rgba(23,25,28,.14);font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap}
.ch-alt-go span{transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.ch-alt:hover .ch-alt-go span{transform:translateX(4px)}
@media (max-width:900px){.ch-alt{grid-template-columns:1fr;gap:20px}}
@media (prefers-reduced-motion: reduce){.ch-alt,.ch-alt-rows u{transition:none}}
/* the three doors line up row by row (question, picture, answer, button) at any width */
@supports (grid-template-rows:subgrid){
  .v4-home #doors .ch-doors{grid-template-rows:auto auto auto 1fr}
  .v4-home #doors .ch-door{grid-row:span 4;grid-template-rows:subgrid}
  .v4-home #doors .ch-door > div:last-child{display:flex;flex-direction:column;justify-content:space-between}
}
.v4-home #doors .cb-tags{flex-wrap:nowrap;gap:6px}
@media (max-width:1360px){.v4-home #doors .ch-door{padding:28px 24px}.v4-home #doors .cb-tags span{padding:0 7px}}

/* ---- 2026-10-09: quiet links to the Security page where SOC 2 or data handling comes up ---- */
a.v4-seal-a{text-decoration:none;border-radius:12px;transition:opacity .2s}
.v4-seal-go{font-style:normal;font-size:13px;color:var(--muted);opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .25s cubic-bezier(.22,.61,.36,1)}
a.v4-seal-a:hover .v4-seal-go,a.v4-seal-a:focus-visible .v4-seal-go{opacity:1;transform:none}
a.v4-seal-a:hover b{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a.v4-seal-a:focus-visible{outline:2px solid var(--accent-2);outline-offset:4px}
.v4-trust-sec{display:inline-flex;flex-direction:column;align-items:flex-start;gap:10px;text-decoration:none}
.v4-trust-sec .v4-trust-soc{margin-top:24px}
.v4-trust-sec span{font-size:14px;color:var(--muted);transition:color .2s}
.v4-trust-sec i{font-style:normal;display:inline-block;transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.v4-trust-sec:hover span{color:var(--ink)}.v4-trust-sec:hover i{transform:translateX(3px)}
.v4-trust-sec:focus-visible{outline:2px solid var(--accent-2);outline-offset:4px;border-radius:8px}
/* About: the industries as small boxed chips */
.ab-inds{display:flex;flex-wrap:wrap;gap:8px}
.ab-inds span{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px rgba(56,115,145,.14),0 6px 16px -12px rgba(23,25,28,.3);font-size:14px;color:var(--ink);white-space:nowrap}
.ab-inds svg{width:16px;height:16px;fill:none;stroke:var(--accent-2);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.ab-inds{display:grid;grid-template-columns:repeat(2,max-content);gap:8px}
.ab-inds span{height:34px;font-size:13.5px}
.ab-band .v4-seal em,.ab-band .v4-seal b{white-space:nowrap}
a.v4-seal-a{position:relative}
.v4-seal-go{position:absolute;right:-18px;top:50%;margin-top:-10px}
.v4-adv{display:block;text-decoration:none;cursor:pointer}

/* Phone pass (2026-10-09) ------------------------------------------------------------
   Phone only: everything below sits inside max-width:900px, so desktop is untouched.
   4 px scale; section padding 64; card padding 20; 11 px minimum text. */
@media (max-width:900px){
  .v4-home{--sp-section:64px}

  /* 1 hero: a plain stack that sizes to its content (no one-screen fold on a phone) */
  .v4-fold{min-height:0}
  .v4-fold .v4-hero,.v4-fold .v4-hero.v4-panel{display:block;flex:none;padding:0}
  .v4-fold .v4-hero-row{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start;min-height:0;padding:64px 24px 0}
  .v4-home .v4-hero .ch-eyebrow{margin-bottom:16px;letter-spacing:.08em;text-wrap:balance}
  .v4-home .v4-h1{font-size:42px;line-height:1.08}
  .v4-home .v4-lede{font-size:17px;margin-top:16px}
  .v4-home .v4-ctas{margin-top:24px;flex-wrap:wrap}
  /* the scene is a little wider than the panel (the empty margins are clipped) so the rings run edge to edge */
  .has-v4-panel .v4-fold .v4-sys,.v4-fold .v4-sys{height:clamp(264px,50vw,440px);margin:-8px -40px 0}
  .v4-hero.v4-panel{padding-bottom:16px}

  /* 2 credibility strip: three stacked rows with dividers */
  .has-v4-panel .v4-home .v4-fold .v4-strip{margin-top:32px;padding-bottom:32px}
  .v4-strip-row{flex-direction:column;align-items:stretch;gap:0}
  .v4-strip-row .v4-div{width:auto;height:1px;margin:20px 0}
  .v4-cell{grid-template-rows:auto auto;gap:12px}
  .v4-advs{flex-wrap:wrap;row-gap:8px}
  .v4-home .v4-advnote{flex:0 0 100%;margin:4px 0 0;white-space:normal}

  /* 3 risk chips: wrap onto lines, never wrap inside a chip */
  .v4-risks{flex-wrap:wrap;gap:8px}
  .v4-risks small{flex:0 0 100%;margin:0 0 0}
  .v4-risks span{white-space:nowrap}

  /* 4 how it works: plain stack; the desktop connector and shared rows go */
  .v4-flow{grid-template-rows:none;row-gap:48px}
  .v4-fstep{grid-row:auto;grid-template-rows:none;gap:8px}
  .v4-fstep h3,.v4-fstep p{margin-top:0}
  .v4-fstep:not(:last-child)::after,.v4-fstep:not(:last-child) .v4-fviz::after{display:none}
  .v4-file{grid-template-columns:64px minmax(0,1fr);grid-template-areas:"l s" "l b";align-content:center;gap:0 8px;height:auto;min-height:48px;padding:6px 10px}
  .v4-file img{grid-area:l}
  .v4-file span{grid-area:s}
  .v4-file b{grid-area:b}

  /* 5 role doors: tighter cards, readable charts */
  .v4-home .ch-sec .ch-doors{padding:12px;gap:16px}
  .v4-home #doors .ch-door{padding:20px}
  .v4-home #doors .ch-q{min-height:0}
  .v4-home #doors .ch-viz.ap{min-height:0}
  .v4-home #doors .ch-go{white-space:nowrap;padding:0 16px}
  .ch-viz.ap .cb{gap:6px}
  .cb-c small{left:-6px;right:-6px;font-size:11px}
  .cb-c em{font-size:11px}
  .v4-home #doors .cb-tags{flex-wrap:wrap}
  .cb-tags span{white-space:nowrap}
  .ch-viz.ap .v-line{gap:12px}
  .ch-viz.ap .v-line b{flex:none}
  .ch-vh{flex-wrap:wrap;gap:2px 8px}
  .ch-vh b,.ch-vh span{white-space:nowrap}
  .ch-vleg{flex-wrap:wrap;justify-content:flex-start;gap:4px 12px;white-space:normal}
  .ch-vleg span{white-space:nowrap}
  .ch-alt{padding:20px}
  .ch-alt-txt b{text-wrap:balance}

  /* 6 results: legend items stay whole (dot + label) and wrap as units */
  .v4-home .v4-bento{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:16px}
  .v4-card-big{grid-row:auto}
  .v4-home .v4-card{padding:20px}
  .v4-db{grid-template-columns:48px minmax(0,1fr) 84px;gap:12px}
  .v4-trail{flex-wrap:wrap;gap:8px}
  .v4-home .v4-trail li + li{margin-left:0}
  .v4-home .v4-trail li + li::before{content:"\2192";position:static;display:inline-block;width:auto;height:auto;margin-right:6px;background:none;color:#9aa0a6}
  .v4-trail li:last-child::before{color:#c9ccd0}
  .v4-dbh{flex-wrap:wrap;gap:6px 16px}
  .v4-dbh > span:last-child{white-space:nowrap}
  .v4-dbh > span:last-child i:first-child{margin-left:0}
  .v4-big strong{font-size:64px}

  /* 7 free map ladder: step text left-aligned with its number; stats block closer */
  .v4-home .sx-ladder li{justify-content:start;justify-items:start;text-align:left;grid-template-columns:32px minmax(0,1fr)}
  .v4-home .v4-stats{margin-top:40px;padding-top:24px}
  /* neighbouring sections share one 64 px gap, not two */
  .v4-home #results{padding-top:0}
  .v4-home #trust{padding-bottom:0}
  .v4-home .v4-trust .v3-split2{gap:40px}
}
@media (max-width:600px){
  /* the role doors use the width: the cards run closer to the screen edge so the charts keep their room */
  .v4-home #doors > .v3-wrap{padding-inline:16px}
  .v4-home #doors .ch-door{padding:20px 16px}
}
@media (max-width:400px){
  .ch-viz.ap .cb{gap:4px}
}

/* The platform: CFO & Finance view (2026-10-09); the screens' styles live in v3-app-fin.css */
.ap-surf .ap-side[data-side="cfo"],.ap-surf[data-seg="cfo"] .ap-side[data-side="corp"]{display:none}
.ap-surf[data-seg="cfo"] .ap-side[data-side="cfo"]{display:flex}
.ap-surf[data-seg="cfo"] .ap-top [data-seg-chip="cfo"]{display:inline-flex}

/* Results: the semiconductor card as an earnings bridge, budget to actual (2026-10-09). Same
   real claim; figures withheld, so the bars carry shape, not numbers. */
.v4-card-br blockquote{font-size:22px}
.v4-br{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;height:132px;margin-top:6px;padding-bottom:22px;box-shadow:inset 0 -1px 0 #eceef0}
.v4-br div{position:relative}
.v4-br i{position:absolute;left:14%;right:14%;bottom:var(--b);height:var(--h);border-radius:5px;transform:scaleY(0);transform-origin:bottom;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.v4-br i.t{background:#387391}.v4-br i.l{background:#ec9c86;transform-origin:top}.v4-br i.g{background:#7fc9b5}
.v4-br span{position:absolute;left:-4px;right:-4px;bottom:-22px;text-align:center;font-size:11px;line-height:16px;color:var(--muted)}
.v4-results.is-in .v4-br i{transform:none}
.v4-results.is-in .v4-br div:nth-child(2) i{transition-delay:.12s}.v4-results.is-in .v4-br div:nth-child(3) i{transition-delay:.24s}.v4-results.is-in .v4-br div:nth-child(4) i{transition-delay:.36s}.v4-results.is-in .v4-br div:nth-child(5) i{transition-delay:.48s}.v4-results.is-in .v4-br div:nth-child(6) i{transition-delay:.6s}
@media (prefers-reduced-motion: reduce){.v4-br i{transform:none}}
.v4-card .v4-br-note{margin-top:8px;font-size:13px}
@media (max-width:600px){
  .v4-br span{font-size:10px}
}

/* Results, the big case card (Mingze 10-09: too much white at the bottom): the dumbbell rows
   share the card's height, and an all-funds summary sits in an ice box above the footnote. */
.v4-home .v4-card-big .v4-dbs{flex:1;display:flex;flex-direction:column;justify-content:space-evenly;gap:0;margin-top:24px;min-height:0}
.v4-sum{display:flex;align-items:baseline;gap:14px;margin-top:20px;padding:16px 20px;border-radius:14px;background:#eef5f9}
.v4-sum b{font-family:var(--mono);font-weight:400;font-size:24px;line-height:1;letter-spacing:-.02em;color:#2c7867;white-space:nowrap}
.v4-sum span{font-size:14px;color:var(--ink)}
.v4-home .v4-card-big .v4-fine{margin-top:12px!important;padding-top:0}
@media (max-width:600px){.v4-sum{flex-direction:column;gap:6px}.v4-home .v4-card-big .v4-dbs{min-height:0;gap:14px}}
/* risks not on this screen: readable (4.5:1) but plainly off — no fill, a hairline, a grey dot */
.v4-risks span:not(.on){background:none;color:#6b6f76;box-shadow:inset 0 0 0 1px #eceef0}
.v4-risks span:not(.on)::before{background:#c3c7cc;opacity:1}

/* ---------- Phone pass 2 (2026-10-09): the homepage on the shared 24 px gutter ---------- */
@media (max-width:600px){
  .has-v4-panel{--pm:8px}
  .v4-hero.v4-panel{margin:6px 8px 0}
  .has-v4-panel .v3-wrap:not(.v4-hero-row){padding-inline:var(--gut)}
  .v4-home #how{margin:8px}
  .v4-home #how > .v3-wrap{padding-inline:calc(var(--gut) - 8px)}
  .v4-fold .v4-hero-row{padding:56px calc(var(--gut) - 8px) 0}
  .v4-home #doors > .v3-wrap{padding-inline:var(--gut)}
  /* hero: three balanced lines, two equal buttons, the still orbit kept inside the panel */
  .v4-home .v4-h1{font-size:clamp(32px,9.6vw,40px);line-height:1.08}
  .v4-fold .v4-h1 span{white-space:nowrap}
  .v4-home .v4-ctas{display:grid;grid-template-columns:1fr;gap:10px}
  .v4-home .v4-ctas .v3-btn{justify-content:center;padding:0 12px;height:48px}
  .has-v4-panel .v4-fold .v4-sys,.v4-fold .v4-sys{height:clamp(250px,72vw,300px);margin:4px -4px 0}
  .v4-home .v4-tile{height:30px;padding:0 10px;border-radius:9px}
  .v4-home .v4-tile img{max-height:13px}
  .v4-backers img{max-height:22px}
  /* platform controls on a phone: a full-width three-way selector, then four underline tabs
     (the question shows as the window's title, so the tabs carry the names only); the risk
     legend is desktop-only */
  .v4-surf-bar{display:block;margin-bottom:0}
  .v4-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .v4-seg button{padding:0 6px;font-size:14px;white-space:nowrap}
  .v4-risks{display:none}
  .v4-qtabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:16px 0 20px;box-shadow:inset 0 -1px 0 #eceef0}
  .v4-qt{justify-items:center;padding:12px 2px 14px;border-radius:0;background:none!important;box-shadow:none!important;overflow:visible}
  .v4-qt b{font-size:14px;font-weight:500;color:#6b6f76}
  .v4-qt .v4-qq{display:none}
  .v4-qt[aria-selected="true"] b{color:var(--ink);font-weight:600}
  .v4-qt[aria-selected="true"]::after{content:"";position:absolute;left:8px;right:8px;bottom:0;height:2px;border-radius:1px;background:#d7dde2}
  .v4-qt .v4-tprog{left:8px;right:8px;bottom:0;height:2px;z-index:1}
  .v4-qt .v4-tprog b{opacity:1}
}

/* ---------- Phone pass 2, homepage review fixes (2026-10-09) ---------- */
@media (max-width:600px){
  .v4-home .v4-tile img[src*="360t"]{height:13px!important;width:39px!important;max-height:none}
  .v4-home .v3-sec:not(.v4-how):not(.v3-sec-tint){padding-top:56px;padding-bottom:56px}
  .v4-home .v4-show-head,.v4-home #how .v4-show-head,.v4-home .ch-sec .v3-wrap > :is(.v3-kicker,.v3-h2,.v3-p),.v4-home .v3-cta :is(.v3-h2,.v3-p){text-align:left}
  .v4-home .v4-show-head .v3-h2,.v4-home .ch-sec .v3-h2{margin-left:0;margin-right:0}
  .v4-home .v4-show-head{margin-bottom:24px}
  .v4-home .ch-sec .ch-doors{padding:0;gap:16px;background:none}
  .v4-home .v4-asplit i{padding:0 8px}.v4-home .v4-asplit i b{font-size:12px}
  .v4-seg button{height:44px;font-size:13px}
  .v4-home .v4-adv,.v4-home .v4-adv img{width:44px;height:44px}
  .v4-home .v4-lede,.v4-home .ch-a,.v4-an-txt span{text-wrap:pretty}
  .v4-fold .v4-sys,.has-v4-panel .v4-fold .v4-sys{margin-top:-20px}
  .v4-an{width:100%;grid-template-columns:1fr;padding:18px 20px;gap:12px}
  .v4-an-txt{grid-column:1;grid-row:2}
  .v4-an::before{display:none}
  .v4-home .v3-cta .v3-or{display:grid;grid-template-columns:1fr;gap:10px;justify-items:stretch}
  .v4-home .v3-cta .v3-or .v3-input{min-width:0;width:100%;height:48px}
  .v4-home .v3-cta .v3-or .v3-btn{height:48px;justify-content:center}
  .v4-home .v4-stats{grid-template-columns:1fr 1fr;gap:28px 16px;margin-top:40px}
  .v4-home .v4-stats div{align-content:start}
  .v4-home .v4-stats b{font-size:32px}
  .v4-home #doors .v3-wrap > :is(.v3-kicker,.v3-h2){text-align:left!important;margin-left:0!important}
  .v4-home #how .v4-show-head .v3-p{text-align:left;margin-left:0}
}

/* phones, every page with a hero panel (review 10-09): room under the content for the corner
   marks; heroes left-aligned like the role pages */
@media (max-width:600px){
  .v4-hero.v4-panel{padding-bottom:40px}
  .v4-hero.v4-panel :is(.ch-eyebrow,.v4-h1,.v4-lede){text-align:left;margin-left:0;margin-right:0;justify-content:flex-start}
  .v4-hero.v4-panel .v4-ctas{justify-content:flex-start}
  .v4-hero.v4-panel,.v4-hero.v4-panel *{text-align:left}
  .v4-hero.v4-panel :is(h1,p,.gl-search,.gl-chips,.ab-facts,.ab-stats){margin-left:0;margin-right:0;justify-items:start;justify-content:flex-start}
  .v4-hero.v4-panel .v3-wrap{justify-items:start}
  .v4-hero.v4-panel .v3-wrap > *{justify-self:stretch}
  .v4-hero.v4-panel .v3-wrap > .ch-eyebrow{justify-self:start}
}
@media (max-width:600px){.v4-home .v4-hero .v4-cm{display:none!important}}   /* phones: no dotted corner marks on the homepage hero panel (Mingze 10-09) */

/* ---------- 05 results: the case card rotates CFO & Finance / Treasury / Funds (Ujwal's idea, 10-12) ----------
   The three cases share one grid cell, so the card is as tall as the tallest and never jumps. The
   switch sits in the card's top-right corner (it only changes this card); a hairline under the
   chosen tab fills while the case is on show, then the next one comes in. */
.v4-sw{grid-row:span 2;position:relative;display:grid;min-width:0}
.v4-sw-stack{display:grid;min-width:0}
.v4-case{grid-area:1/1;transition:opacity .45s cubic-bezier(.22,.61,.36,1),transform .45s cubic-bezier(.22,.61,.36,1),visibility 0s}
.v4-case:not(.on){opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none;transition:opacity .25s,transform .25s,visibility 0s .25s}
.v4-case > small{display:flex;align-items:center;min-height:36px;margin-top:-10px;padding-right:300px}
.v4-case :is(strong,.v4-sum b) em{font-family:var(--sans);font-style:normal;font-size:.42em;letter-spacing:0;color:var(--muted);vertical-align:.5em;margin:0 .35em}
.v4-case .v4-sum{align-items:center}
.v4-case .v4-sum b em{font-size:14px;vertical-align:0;margin:0 .3em}
.v4-rsw{position:absolute;z-index:2;top:22px;right:32px;display:inline-flex;padding:3px;border-radius:12px;background:#f3f4f5}
.v4-rsw button{position:relative;height:30px;padding:0 13px;border:0;border-radius:9px;background:none;font:inherit;font-size:13px;color:var(--muted);cursor:pointer;white-space:nowrap;transition:background .2s,color .2s,box-shadow .2s}
.v4-rsw button:hover{color:var(--ink)}
.v4-rsw button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(23,25,28,.08),0 0 0 1px rgba(23,25,28,.05)}
.v4-rsw button:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.v4-rsw i{position:absolute;left:13px;right:13px;bottom:4px;height:2px;border-radius:1px;background:var(--accent-2);opacity:0;transform:scaleX(0);transform-origin:left}
.v4-sw.is-auto .v4-rsw button[aria-selected="true"] i{opacity:.55;animation:v4rsw var(--rsw-step,9s) linear forwards}
.v4-sw.is-held .v4-rsw i{animation-play-state:paused!important}
@keyframes v4rsw{to{transform:scaleX(1)}}

/* the two new cases: a row per finding, a bar for its share, the figure on the right */
.v4-rows{flex:1;display:flex;flex-direction:column;justify-content:space-evenly;gap:6px;margin-top:24px}
.v4-row{display:grid;grid-template-columns:minmax(0,1fr) 88px 64px;align-items:center;gap:16px;min-height:52px}
.v4-row > span{font-size:14px;line-height:20px;color:var(--ink)}
.v4-row small{display:block;width:fit-content;margin-top:6px;padding:2px 8px;border-radius:6px;background:#f3f4f5;font-size:11.5px;line-height:16px;color:#4f535a}
.v4-rows-ice .v4-row small{display:block;padding:0;background:none;font-size:12.5px;line-height:18px;color:var(--muted)}
.v4-row i{position:relative;height:8px;border-radius:4px;background:#f1f3f4;overflow:hidden}
.v4-row i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:4px;background:#ec9c86;transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.v4-rows-ice .v4-row i::after{background:#8ec8e0}
.v4-results.is-in .v4-case.on .v4-row i::after{transform:none}
.v4-results.is-in .v4-case.on .v4-row:nth-child(3) i::after{transition-delay:.1s}
.v4-results.is-in .v4-case.on .v4-row:nth-child(4) i::after{transition-delay:.2s}
.v4-results.is-in .v4-case.on .v4-row:nth-child(5) i::after{transition-delay:.3s}
.v4-row b{font-family:var(--mono);font-weight:400;font-size:13px;text-align:right;color:var(--ink);white-space:nowrap}
.v4-rows .v4-dbh{margin-bottom:2px}
@media (prefers-reduced-motion: reduce){.v4-row i::after{transform:none;transition:none}.v4-case,.v4-case:not(.on){transition:none;transform:none}}

/* 901–1200 px the card is too narrow to share its top line: the switch sits on it, the label below */
@media (min-width:901px) and (max-width:1200px){
  .v4-rsw{left:32px;right:auto;top:28px}
  .v4-home .v4-case{padding-top:84px}
  .v4-case > small{min-height:0;margin-top:0;padding-right:0}
}
/* below 900 px the bento is one column: the switch moves above the card, full width */
@media (max-width:900px){
  .v4-sw{grid-row:auto;gap:12px}
  .v4-rsw{position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .v4-rsw button{height:40px;font-size:13px}
  .v4-case > small{min-height:0;margin-top:0;padding-right:0}
}
@media (max-width:600px){
  .v4-row{grid-template-columns:minmax(0,1fr) 64px;row-gap:6px}
  .v4-row i{grid-column:1/-1;grid-row:2}
  .v4-case .v4-sum{align-items:flex-start}
}

/* v4-contact.css */
/* Contact page (v3 system). Rhythm: the form in the hero panel; three steps on
   one line; two columns of ways and questions. Homepage spacing scale. */

/* 01 hero: words left, form card right, inside the panel */
.ct-hero{padding:72px 0}
.ct-hero-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:64px;align-items:center}
.ct-copy .ch-eyebrow{margin-bottom:24px}
.ct-copy .v4-h1{font-size:60px;line-height:1.08}
.ct-copy .v4-lede{max-width:40ch;margin-top:24px}
.ct-direct{display:flex;align-items:center;gap:12px;margin-top:32px;font-size:15px;color:var(--muted)}
.ct-copy-btn{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 6px 0 14px;border:0;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(23,25,28,.08);font:inherit;cursor:pointer;transition:box-shadow .2s}
.ct-copy-btn:hover{box-shadow:0 0 0 1px rgba(23,25,28,.16)}
.ct-copy-btn:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.ct-copy-btn b{font-weight:500;font-size:15px;color:var(--ink)}
.ct-copy-btn em{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:10px;background:#f3f4f5;font-style:normal;font-size:12px;color:var(--muted);transition:background .2s,color .2s}
.ct-copy-btn.is-copied em{background:#e6f4ef;color:#2c7867}

.ct-card{position:relative;padding:32px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px rgba(23,25,28,.06),0 30px 60px -36px rgba(23,25,28,.35)}
.ct-form{display:grid;gap:16px}
.ct-topics{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px;padding:0;border:0}
.ct-topics legend{width:100%;margin-bottom:12px;padding:0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ct-chip{position:relative;cursor:pointer}
.ct-chip input{position:absolute;opacity:0;pointer-events:none}
.ct-chip span{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:12px;background:#f3f4f5;font-size:14px;color:var(--ink-2,#3a3d42);transition:background .2s,color .2s,box-shadow .2s}
.ct-chip:hover span{background:#eaecee}
.ct-chip input:checked + span{background:#e8f2f7;color:var(--ink);box-shadow:inset 0 0 0 1.5px #387391}
.ct-chip input:focus-visible + span{outline:2px solid var(--accent-2);outline-offset:2px}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ct-field{display:grid;gap:8px}
.ct-field span{font-size:13px;font-weight:500;color:var(--ink)}
.ct-field input,.ct-field textarea{width:100%;box-sizing:border-box;height:44px;padding:0 14px;border:0;border-radius:12px;background:#f6f7f8;box-shadow:inset 0 0 0 1px rgba(23,25,28,.08);font:inherit;font-size:15px;color:var(--ink);transition:box-shadow .2s,background .2s}
.ct-field textarea{height:auto;min-height:112px;padding:12px 14px;line-height:1.5;resize:vertical}
.ct-field input:focus,.ct-field textarea:focus{outline:none;background:#fff;box-shadow:inset 0 0 0 1.5px #387391}
.ct-field.is-bad input,.ct-field.is-bad textarea{box-shadow:inset 0 0 0 1.5px #a9523b}
.ct-trap{position:absolute;left:-9999px;width:1px;height:1px}
.ct-send{display:flex;align-items:center;gap:16px;margin-top:8px}
.ct-send .v3-btn{flex:none}
.ct-fine{margin:0;font-size:12px;line-height:1.5;color:var(--muted)}
.ct-fine a{color:var(--muted)}
.ct-err{margin:0;padding:12px 14px;border-radius:12px;background:#fbece7;font-size:14px;color:#a9523b}
.ct-err a{color:inherit}
.ct-sent{display:grid;justify-items:start;gap:12px;min-height:420px;align-content:center}
.ct-sent:focus{outline:none}
.ct-sent i{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#e6f4ef;font-style:normal;font-size:22px;color:#2c7867}
.ct-sent b{font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.ct-sent p{margin:0 0 8px;max-width:38ch;font-size:15px;line-height:1.5;color:var(--muted)}

/* 02 next: three steps joined by a dotted line that draws in */
.ct-next{border-top:0}
.ct-steps{position:relative;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:48px 0 0;padding:0}
.ct-steps::before{content:"";position:absolute;left:24px;right:calc(33.333% - 24px);top:23px;height:2px;background:radial-gradient(circle,rgba(56,115,145,.5) 1px,transparent 1.5px) 0 0/8px 2px repeat-x;transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.22,.61,.36,1)}
.ct-steps.is-on::before{transform:none}
.ct-steps li{position:relative;display:grid;gap:8px;align-content:start}
.ct-steps small{display:grid;place-items:center;width:48px;height:48px;margin-bottom:16px;border-radius:14px;background:#eef5f9;font-family:var(--mono);font-size:13px;color:var(--accent-2);box-shadow:0 0 0 6px #fff}
.ct-steps b{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.ct-steps span{max-width:32ch;font-size:15px;line-height:1.5;color:var(--muted)}

/* 03 ways and questions */
.ct-more{background:linear-gradient(180deg,#fff 0,#f2f8fb 18%,#eaf4f9 60%,#f2f8fb 86%,#fff 100%);border-top:0}
.ct-more-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.ct-more .v3-h2{margin-bottom:32px}
.ct-ways{display:grid;gap:12px}
.ct-ways .v3-kicker,.ct-ways .v3-h2{margin-left:0}
.ct-way{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:16px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(23,25,28,.06);text-decoration:none;transition:box-shadow .25s,transform .25s cubic-bezier(.22,.61,.36,1)}
.ct-way:hover,.ct-way:focus-visible{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(23,25,28,.06),0 20px 40px -28px rgba(23,25,28,.4)}
.ct-way:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}
.ct-way i{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#eef5f9;color:#387391}
.ct-way svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ct-way span{display:grid;gap:2px}.ct-way b{font-size:15px;font-weight:600;color:var(--ink)}.ct-way small{font-size:14px;color:var(--muted)}
.ct-way em{font-style:normal;color:var(--muted);transition:transform .2s}
.ct-way:hover em{transform:translateX(3px)}
.ct-qs{display:grid;gap:8px}
.ct-q{border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(23,25,28,.06)}
.ct-q summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;list-style:none;cursor:pointer;font-size:16px;font-weight:600;color:var(--ink)}
.ct-q summary::-webkit-details-marker{display:none}
.ct-q summary:focus-visible{outline:2px solid var(--accent-2);outline-offset:-2px;border-radius:16px}
.ct-q summary i{position:relative;flex:none;width:12px;height:12px}
.ct-q summary i::before,.ct-q summary i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.6px;margin-top:-.8px;border-radius:1px;background:var(--muted);transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.ct-q summary i::after{transform:rotate(90deg)}
.ct-q[open] summary i::after{transform:rotate(0)}
.ct-q p{margin:0;padding:0 24px 20px;max-width:56ch;font-size:15px;line-height:1.55;color:var(--muted)}

@media (max-width:1000px){.ct-hero-row,.ct-more-row{grid-template-columns:1fr}.ct-copy .v4-h1{font-size:44px}}
@media (max-width:700px){.ct-row,.ct-steps{grid-template-columns:1fr}.ct-steps::before{display:none}}
@media (prefers-reduced-motion: reduce){.ct-steps::before{transition:none;transform:none}}
.ct-sent[hidden],.ct-form[hidden],.ct-err[hidden]{display:none}
.ct-ways{gap:0}
.ct-way + .ct-way{margin-top:12px}

/* ---------- audit pass (2026-10-08, .context/contact/audit/AUDIT.md) ---------- */
/* Contact page overrides (audit 2026-10-08). Load after v4-contact.css.
   Section numbers below are local; the AUDIT.md appendix maps each section to its items. */

/* 1 hero: 96/96 like every other section and the About hero; the row's side padding is
   40 (the panel's own margin already sits outside it), so copy and card line up with the
   logo and the nav button at every width (at 1280 they were 17.9 px inside) */
.ct-hero{padding:96px 0}
.has-v4-panel .ct-hero .v3-wrap.ct-hero-row{padding-inline:40px}

/* 2 headline: "We read every message." stays on one line from 1241 px up (it was three lines at
   1280); the size follows the width so it never outgrows its column. Stacking is in the last block. */
.ct-copy .v4-h1{font-size:clamp(44px,calc((100vw - 760px) / 10.9),60px)}
@media (max-width:1359px){.ct-hero-row{gap:48px}}

/* 3 controls on the 44 / 14 scale: copy chip, topic chips, inputs */
.ct-copy-btn{height:44px;padding:0 6px 0 16px}
.ct-copy-btn em{height:32px;padding:0 12px;border-radius:10px}
.ct-chip span{height:44px;border-radius:14px}
.ct-field input,.ct-field textarea{border-radius:14px}

/* 4 legend reads like the field labels (one label style inside the card) */
.ct-topics legend{margin-bottom:8px;font-family:inherit;font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink)}
.ct-topics{margin-bottom:8px}

/* 5 field boundaries and placeholder reach 3:1 and 4.5:1 (were 1.18:1 and 4.3:1) */
.ct-field input,.ct-field textarea{background:#fff;box-shadow:inset 0 0 0 1px rgba(23,25,28,.5)}
.ct-field input:hover,.ct-field textarea:hover{box-shadow:inset 0 0 0 1px rgba(23,25,28,.7)}
.ct-field input::placeholder,.ct-field textarea::placeholder{color:#6b6f76;opacity:1}
.ct-field input:focus,.ct-field textarea:focus{box-shadow:inset 0 0 0 1.5px #387391,0 0 0 4px rgba(56,115,145,.16)}
.ct-chip span{box-shadow:inset 0 0 0 1px rgba(23,25,28,.12)}
.ct-chip input:checked + span{box-shadow:inset 0 0 0 1.5px #387391}

/* 6 errors say what is wrong in words, not only by a red ring (CSS-only text; the HTML fix in
   AUDIT.md item 1 replaces it with real messages tied by aria-describedby) */
.ct-field.is-bad input,.ct-field.is-bad textarea{box-shadow:inset 0 0 0 1.5px #a0432c}
.ct-field{align-content:start}
.ct-field.is-bad::after{content:"Required";font-size:13px;line-height:16px;color:#a0432c}
.ct-field.is-bad:has([type=email])::after{content:"Enter a valid work email"}
.ct-field.is-bad span{color:#a0432c}
.ct-err{color:#8f3b26}

/* 7 send row: fine print at 13 px */
.ct-fine{font-size:13px}

/* 8 the thank-you card keeps the form's height, so the page does not jump when it appears */
@media (min-width:1241px){.ct-sent{min-height:486px}}

/* 9 contrast: kicker, step numbers */
.v4-contact .v3-kicker{color:#387391}
.ct-steps small{color:#2f6784}

/* 10 what happens next: one balanced line, as the About headings */
.ct-next .v4-show-head{max-width:none}
.ct-next .v3-h2{max-width:none;text-wrap:balance}

/* 11 ways + questions: equal columns so both headings fit one line at 1280, 48 under the
   heading, cards padded 24 / radius 20, lists 16 apart */
.ct-more-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ct-more .v3-h2{margin-bottom:48px;max-width:none}
.ct-way{padding:24px;border-radius:20px}
.ct-way i{border-radius:14px}
.ct-way + .ct-way{margin-top:16px}
.ct-qs{gap:16px}
.ct-q{border-radius:20px}
.ct-q summary{padding:24px;border-radius:20px}
.ct-q p{padding:0 24px 24px}

/* 12 trust line under the email chip (needs the HTML block in AUDIT.md item 8) */
.ct-trust{display:flex;align-items:center;flex-wrap:wrap;gap:16px 32px;margin-top:32px;padding-top:32px;border-top:1px solid rgba(23,25,28,.1)}
.ct-trust .v4-seal img{width:44px;height:44px;mix-blend-mode:multiply}   /* the PNG has a white ground; multiply lets the ice panel through */
.ct-trust .v4-backers{gap:16px}
.ct-trust .v4-backers small{font-size:12px;color:var(--muted)}
.ct-trust .v4-backers img{height:20px}

/* narrow screens (kept last so they beat the rules above)
   hero stacks below 1241 (copy first, card under it; at 1024 the headline was five lines);
   ways + questions stack below 1181 (the headings no longer fit side by side) */
@media (max-width:1240px){
  .ct-hero{padding:64px 0}
  .ct-hero-row{grid-template-columns:1fr}
  .ct-card{max-width:560px}
  .ct-copy .v4-h1{font-size:52px}
}
@media (max-width:1180px){.ct-more-row{grid-template-columns:1fr;gap:48px}}
@media (max-width:700px){
  .ct-hero{padding:48px 0}
  .has-v4-panel .ct-hero .v3-wrap.ct-hero-row{padding-inline:16px}
  .ct-copy .v4-h1{font-size:40px}
  .ct-card{padding:24px}
  .ct-field input,.ct-field textarea{font-size:16px}
  .ct-send{flex-wrap:wrap}
  .ct-way{padding:16px}
  .ct-q summary{padding:20px 16px}
  .ct-q p{padding:0 16px 20px}
}
/* item 1: real per-field messages replace the CSS stopgap */
.ct-field.is-bad::after{content:none}
.ct-msg{display:none;font-size:13px;line-height:16px;color:#a0432c}
.ct-field.is-bad .ct-msg{display:block}
.ct-req{margin:0 0 4px;font-size:13px;color:var(--muted)}
.ct-field.is-bad:has(input[type=email])::after{content:none}
.ct-q p a{color:var(--accent-2);text-underline-offset:3px;white-space:nowrap}
#contact-form{scroll-margin-top:24px}

/* Phone pass (2026-10-09) */
@media (max-width:900px){
  .v4-contact .v3-wrap:not(.v4-hero-row){padding-inline:var(--gut,32px)}
  .v4-contact .v4-panel .v3-wrap:not(.v4-hero-row),
  .has-v4-panel .ct-hero .v3-wrap.ct-hero-row{padding-inline:calc(var(--gut,32px) - var(--pm))}
  /* 44 px tap target for the email copy button */
  .ct-direct{flex-wrap:wrap;gap:8px 12px}
  .ct-copy-btn{height:44px}
  .ct-copy-btn em{height:32px}
}

@media (max-width:600px){.ct-send .v3-btn{flex:1 1 100%;justify-content:center;height:48px}}
.ct-opt{font-style:normal;font-weight:400;color:var(--muted)}