/* Example story: home section and full page */
.cs-sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cs-eyebrow{display:flex;align-items:center;gap:12px;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#536A70;margin:0}
.cs-eyebrow::before{content:"";width:10px;height:10px;background:#F2643B;display:block;flex-shrink:0}
.cs-onink .cs-eyebrow,.cs-onink.cs-eyebrow{color:#A7BAB5}
.cs-mono{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.cs-textlink{color:#142B31;font-weight:600;font-size:17px;text-decoration:underline;text-decoration-color:#F2643B;text-decoration-thickness:2px;text-underline-offset:5px}
.cs-textlink:hover{text-decoration-color:#142B31}
.cs-onink .cs-textlink{color:#F4F2EB}
.cs-onink .cs-textlink:hover{text-decoration-color:#F4F2EB}

/* ---------- home section ---------- */
.csh{background:#ECE9E0;border-top:1px solid #A7BAB5;border-bottom:1px solid #A7BAB5}
.csh-wrap{max-width:1312px;margin:0 auto;padding:112px 64px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:72px;align-items:start}
.csh-head{display:flex;flex-direction:column;gap:22px}
.csh-copy{display:flex;flex-direction:column;gap:22px}
.csh-head h2{margin:0;font-weight:600;font-size:48px;line-height:1.06;letter-spacing:-.025em;color:#142B31;text-wrap:balance;max-width:680px}
.csh-copy p{margin:0}
.csh-body{font-size:19px;line-height:1.6;color:#536A70;max-width:640px}
.csh-outcome{display:flex;flex-direction:column;gap:6px;padding:16px 0 16px 18px;border-left:3px solid #F2643B;max-width:640px}
.csh-outcome .cs-mono{color:#536A70}
.csh-outcome p{font-weight:600;font-size:18px;line-height:1.5;color:#142B31}
.csh-cta{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;background:#142B31;color:#F4F2EB;text-decoration:none;font-weight:600;font-size:17px;padding:16px 24px;min-height:56px}
.csh-cta:hover{background:#0B1D21}
.csh-cta span{color:#F2643B}
.csh-attr{font-size:15px;line-height:1.5;color:#536A70}
.csh-prog{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.csh-prog li{position:relative;display:flex;flex-direction:column;gap:6px;padding:20px 22px;border:1.5px solid #142B31;background:#FBFAF6}
.csh-prog li + li{margin-top:34px}
.csh-prog li + li::before{content:"";position:absolute;left:32px;top:-35px;width:1.5px;height:26px;background:#536A70}
.csh-prog li + li::after{content:"";position:absolute;left:28px;top:-10px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid #536A70}
.csh-prog .cs-mono{color:#536A70;font-size:11px}
.csh-prog .t{font-weight:600;font-size:21px;line-height:1.3;color:#142B31}
.csh-prog li.is-end{background:#142B31;border-color:#142B31}
.csh-prog li.is-end .t{color:#F4F2EB}
.csh-prog li.is-end .cs-mono{color:#A7BAB5}
.csh-done{display:inline-flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#F4F2EB}
.csh-done::before{content:"";width:10px;height:10px;background:#F2643B;display:block}
@media (max-width:960px){
 .csh-wrap{grid-template-columns:1fr;gap:22px;padding:72px 20px}
 .csh-head h2{font-size:34px;line-height:1.1}
 .csh-body{font-size:18px}
}

/* ---------- full page ---------- */
.csp-hero{background:#142B31;color:#F4F2EB}
.csp-hero-in{max-width:1312px;margin:0 auto;padding:56px 64px 104px;display:flex;flex-direction:column;gap:26px}
.csp-back{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;color:#A7BAB5;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:8px 0;margin-bottom:28px}
.csp-back:hover{color:#F4F2EB}
.csp-hero h1{margin:0;font-weight:600;font-size:60px;line-height:1.05;letter-spacing:-.03em;color:#F4F2EB;text-wrap:balance;max-width:940px}
.csp-intro{margin:0;font-size:20px;line-height:1.6;color:#A7BAB5;max-width:760px}
.csp-attr{margin:0;font-size:15px;line-height:1.55;color:#A7BAB5;max-width:760px}
.csp-outcome{align-self:flex-start;display:flex;align-items:center;gap:14px;margin-top:8px;padding:16px 22px;border:1.5px solid rgba(167,186,181,.45)}
.csp-outcome::before{content:"";width:12px;height:12px;background:#F2643B;display:block;flex-shrink:0}
.csp-outcome p{margin:0;font-size:18px;line-height:1.4;color:#F4F2EB}
.csp-outcome strong{font-weight:600}

.csp-story{background:#F4F2EB;scroll-margin-top:72px}
.csp-jump{align-self:flex-start;margin-top:4px}
.csp-hero-in .csp-intro + .csp-intro{margin-top:-10px}
.csp-story-in{max-width:1312px;margin:0 auto;padding:96px 64px 112px}
.csp-story-head{display:flex;flex-direction:column;gap:14px;margin-bottom:40px}
.csp-story-head h2{margin:0;font-weight:600;font-size:36px;line-height:1.15;letter-spacing:-.02em;color:#142B31}
.cs-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:48px;align-items:start}
.cs-tabs{display:flex;flex-direction:column;border-top:1px solid #A7BAB5;position:sticky;top:100px}
.cs-tab{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:14px;padding:16px 14px 16px 12px;border-bottom:1px solid #A7BAB5;border-left:3px solid transparent;cursor:pointer;color:#536A70;font-size:17px;line-height:1.35}
.cs-tab .n{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #A7BAB5;color:#536A70;flex-shrink:0}
.cs-tab:hover{color:#142B31;background:#ECE9E0}
.cs-tab[aria-selected="true"]{color:#142B31;font-weight:600;border-left-color:#F2643B;background:#FBFAF6}
.cs-tab[aria-selected="true"] .n{background:#142B31;border-color:#142B31;color:#F4F2EB}
.cs-tab:focus-visible{outline:2px solid #F2643B;outline-offset:-2px}
.cs-stages{min-width:0}
.cs-stage{border:1.5px solid #142B31;background:#FBFAF6}
.cs-acc-h{margin:0}
.cs-acc{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:14px;padding:18px 18px;cursor:pointer;font-weight:600;font-size:18px;line-height:1.35;color:#142B31}
.cs-acc .n{font-family:'IBM Plex Mono',monospace;font-size:12px;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #A7BAB5;color:#536A70;flex-shrink:0;font-weight:500}
.cs-acc[aria-expanded="true"] .n{background:#142B31;border-color:#142B31;color:#F4F2EB}
.cs-acc .chev{margin-left:auto;width:12px;height:12px;flex-shrink:0;position:relative}
.cs-acc .chev::before,.cs-acc .chev::after{content:"";position:absolute;left:0;top:5px;width:12px;height:2px;background:#142B31}
.cs-acc .chev::after{transform:rotate(90deg);transition:transform .2s}
.cs-acc[aria-expanded="true"] .chev::after{transform:rotate(0)}
.cs-acc:focus-visible{outline:2px solid #F2643B;outline-offset:-2px}
.cs-panel{padding:40px 44px 44px;display:flex;flex-direction:column;gap:24px}
.cs-panel:focus-visible{outline:2px solid #F2643B;outline-offset:2px}
.cs-kicker{margin:0;color:#536A70}
.cs-h{margin:0;font-weight:600;font-size:32px;line-height:1.15;letter-spacing:-.02em;color:#142B31;text-wrap:balance}
.cs-main{margin:0;font-size:18px;line-height:1.65;color:#2F474D;max-width:700px}
.cs-facts{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0;border-top:1px solid #A7BAB5}
.cs-facts div{padding:18px 20px 4px 0}
.cs-facts div + div{padding-left:20px;border-left:1px solid #A7BAB5}
.cs-facts dt{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#536A70;margin-bottom:6px}
.cs-facts dd{margin:0;font-size:16px;line-height:1.55;color:#142B31}
.cs-note{margin:0;font-size:15px;line-height:1.55;color:#536A70;max-width:700px}

/* visuals */
.cs-fig{margin:0;padding:28px;background:#F4F2EB;border:1px solid #A7BAB5;display:flex;flex-direction:column;gap:16px}
.cs-fig-tag{margin:0;display:flex;align-items:center;gap:10px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#142B31}
.cs-fig-tag::before{content:"";width:8px;height:8px;background:#F2643B;display:block}
.cs-callout{margin:0;display:flex;flex-direction:column;gap:6px;padding:16px 18px;background:#142B31;color:#F4F2EB;font-weight:600;font-size:17px;line-height:1.5}
.cs-callout .cs-mono{color:#A7BAB5;font-size:11px;font-weight:500}
.cs-fig figcaption{font-size:15px;line-height:1.5;color:#536A70}
.cs-flow{list-style:none;margin:0;padding:0;display:flex;align-items:stretch;gap:0}
.cs-flow > li{display:flex;align-items:center}
.cs-node{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:14px 16px;border:1.5px solid #142B31;background:#FBFAF6;font-weight:600;font-size:16px;line-height:1.3;color:#142B31;min-height:64px;flex:1 1 0}
.cs-node .cs-mono{font-size:10px;color:#536A70;font-weight:500}
.cs-node.is-key{background:#142B31;color:#F4F2EB;border-color:#142B31}
.cs-node.is-key .cs-mono{color:#A7BAB5}
.cs-flow > li.cs-step{flex:1 1 0;min-width:0;align-items:stretch}
.cs-flow > li.cs-step .cs-node{width:100%}
.cs-flow > li.cs-join{flex:0 0 auto;justify-content:center;width:44px;font-family:'IBM Plex Mono',monospace;font-size:18px;color:#536A70}
.cs-arrow{display:block;position:relative;width:28px;height:2px;background:#536A70}
.cs-arrow::after{content:"";position:absolute;right:-1px;top:-4px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid #536A70}
.cs-merge{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);align-items:center}
.cs-pair{display:flex;flex-direction:column;gap:12px}
.cs-pair .cs-node{flex:none}
.cs-merge > .cs-node{flex:none}
.cs-pair .cs-plus{align-self:center;font-family:'IBM Plex Mono',monospace;font-size:16px;color:#536A70;line-height:1}
.cs-merge .cs-join{display:flex;justify-content:center}
.cs-doors{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cs-door{display:flex;flex-direction:column;gap:8px;padding:14px 16px 16px;border:1.5px solid #A7BAB5;background:#FBFAF6}
.cs-door .cs-mono{font-size:10px;color:#536A70}
.cs-door-name{font-weight:600;font-size:16px;line-height:1.3;color:#142B31}
.cs-door.is-start{border-color:#142B31;box-shadow:inset 0 0 0 1px #142B31}
.cs-roles{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.cs-roles li{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#2F474D;border:1px solid #A7BAB5;padding:3px 7px;background:#F4F2EB}
.cs-door-start{display:inline-flex;align-items:center;gap:8px;margin-top:4px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#142B31;font-weight:500}
.cs-door-start::before{content:"";width:8px;height:8px;background:#F2643B;display:block}
.cs-exchange{margin:0;border:1.5px dashed #536A70;background:#F4F2EB}
.cs-exchange figcaption{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1.5px dashed #536A70;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#142B31}
.cs-exchange figcaption::before{content:"";width:8px;height:8px;background:#F2643B;display:block}
.cs-exchange dl{margin:0;padding:6px 18px 10px}
.cs-exchange dl div{display:grid;grid-template-columns:190px minmax(0,1fr);gap:16px;padding:12px 0}
.cs-exchange dl div + div{border-top:1px solid #A7BAB5}
.cs-exchange dt{font-weight:600;font-size:16px;color:#142B31}
.cs-exchange dl div:not(.is-opening) dt{font-weight:500;color:#536A70}
.cs-exchange dl div:not(.is-opening) dd{color:#536A70}
.cs-exchange dl div.is-opening{background:#DCE6E3;border-top:0;border-left:4px solid #F2643B;margin:6px -18px -10px;padding:16px 18px 16px 14px}
.cs-exchange dl div.is-opening dt{color:#142B31;font-weight:600}
.cs-exchange dl div.is-opening dt::before{content:"";display:inline-block;width:8px;height:8px;background:#F2643B;margin-right:8px;vertical-align:1px}
.cs-exchange dl div.is-opening dd{color:#142B31;font-weight:500}
.cs-exchange dd{margin:0;font-size:16px;line-height:1.55;color:#2F474D}
.cs-checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cs-checks li{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid #A7BAB5;background:#F4F2EB;font-weight:600;font-size:16px;color:#142B31}
.cs-checks li svg{flex-shrink:0}
.cs-status{margin:0;display:flex;flex-direction:column;gap:6px;padding:16px 18px;background:#ECE9E0}
.cs-status .cs-mono{color:#536A70;font-size:11px}
.cs-status p{margin:0;font-size:16px;line-height:1.55;color:#142B31}
.cs-insight{margin:0;padding:4px 0 4px 18px;border-left:3px solid #F2643B;font-weight:600;font-size:21px;line-height:1.45;color:#142B31;max-width:700px}

.cs-pager{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px}
.cs-pbtn{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:12px 20px;border:1.5px solid #142B31;font-weight:600;font-size:16px;color:#142B31;cursor:pointer;background:transparent}
.cs-pbtn:hover{background:#142B31;color:#F4F2EB}
.cs-pbtn:focus-visible{outline:2px solid #F2643B;outline-offset:3px}
.cs-pbtn[disabled]{opacity:.35;cursor:default;background:transparent;color:#142B31}
.cs-count{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#536A70}

.csp-cta{background:#142B31;color:#F4F2EB}
.csp-cta-in{max-width:1312px;margin:0 auto;padding:112px 64px 120px;display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.csp-cta h2{margin:0;font-weight:600;font-size:52px;line-height:1.06;letter-spacing:-.03em;color:#F4F2EB;text-wrap:balance;max-width:860px}
.csp-cta p{margin:0;font-size:19px;line-height:1.6;color:#A7BAB5;max-width:720px}
.csp-cta-row{display:flex;flex-wrap:wrap;gap:20px 28px;align-items:center;margin-top:6px}
.csp-btn{background:#F2643B;color:#142B31;text-decoration:none;font-weight:600;font-size:17px;padding:17px 28px;display:inline-flex;align-items:center;min-height:58px}
.csp-btn:hover{background:#E0532B}
.csp-cta .csp-back{margin:28px 0 0}

/* modes: without script every stage shows in order; with script, desktop uses the selector and mobile the accordion */
.cs-tabs,.cs-pager{display:none}
.cs-js .cs-stage + .cs-stage{margin-top:-1.5px}
html:not(.cs-js) .cs-stage + .cs-stage{margin-top:16px}
html:not(.cs-js) .cs-acc .chev{display:none}
.cs-js .cs-panel[hidden]{display:none}
@media (min-width:861px){
 .cs-js .cs-tabs{display:flex}
 .cs-js .cs-pager{display:flex}
 .cs-js .cs-acc-h{display:none}
 .cs-js .cs-stage{display:none}
 .cs-js .cs-stage.is-active{display:block}
 .cs-js .cs-stage + .cs-stage{margin-top:0}
 html:not(.cs-js) .cs-layout{grid-template-columns:1fr}
}
@media (max-width:860px){
 .cs-layout{grid-template-columns:1fr}
 .cs-kicker{display:none}
 .cs-panel{padding:4px 18px 26px;gap:20px}
 .cs-h{font-size:24px}
 .cs-main{font-size:17px}
 .cs-facts{grid-template-columns:1fr}
 .cs-facts div + div{padding-left:0;border-left:0;border-top:1px solid #A7BAB5;padding-top:14px}
 .cs-fig{padding:18px}
 .cs-flow{flex-direction:column}
 .cs-flow > li.cs-join{width:auto;height:34px}
 .cs-flow .cs-arrow{width:2px;height:22px}
 .cs-flow .cs-arrow::after{right:-4px;top:auto;bottom:-1px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid #536A70;border-bottom:0}
 .cs-merge{grid-template-columns:1fr;gap:0}
 .cs-merge .cs-join{height:34px;align-items:center}
 .cs-merge .cs-arrow{width:2px;height:22px}
 .cs-merge .cs-arrow::after{right:-4px;top:auto;bottom:-1px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid #536A70;border-bottom:0}
 .cs-exchange dl div{grid-template-columns:1fr;gap:4px}
 .cs-checks{grid-template-columns:1fr}
 .cs-doors{grid-template-columns:1fr}
 .cs-insight{font-size:19px}
 .csp-hero-in{padding:28px 20px 72px}
 .csp-back{margin-bottom:12px}
 .csp-hero h1{font-size:38px;line-height:1.08}
 .csp-intro{font-size:18px}
 .csp-story-in{padding:64px 20px 72px}
 .csp-story-head h2{font-size:28px}
 .csp-cta-in{padding:72px 20px 80px}
 .csp-cta h2{font-size:34px;line-height:1.1}
 .csp-btn{width:100%;justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:no-preference){
 .cs-js .cs-panel:not([hidden]){animation:cs-in .18s ease-out}
 @keyframes cs-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){.cs-acc .chev::after{transition:none}}