.connected-story{--story-bg:#0b1015;--story-fg:#edf1f2;--story-muted:#9ca9b5;--story-accent:#759fff;--story-line:#303945;background:var(--story-bg);color:var(--story-fg);padding:clamp(88px,11vw,164px) max(24px,6vw)}.connected-story__intro{max-width:920px;margin-bottom:clamp(72px,9vw,128px)}.connected-story__intro>p,.connected-story__step>p:first-child{color:var(--story-accent);letter-spacing:.11em;text-transform:uppercase;font-size:12px}.connected-story__intro h2{font-family:var(--font-display), "IBM Plex Sans", sans-serif;letter-spacing:-.045em;text-wrap:balance;margin:22px 0 0;font-size:clamp(36px,4.5vw,68px);font-weight:400;line-height:1.08}.connected-story__intro h2 span{color:var(--story-muted)}.connected-story__layout{grid-template-columns:minmax(260px,.72fr) minmax(560px,1.28fr);align-items:start;gap:clamp(48px,8vw,132px);display:grid}.connected-story__steps{min-width:0}.connected-story__step{border-top:1px solid var(--story-line);flex-direction:column;justify-content:center;max-width:430px;min-height:clamp(320px,42svh,440px);transition:border-color .18s;display:flex}.connected-story__step:last-child{border-bottom:1px solid var(--story-line)}.connected-story__step[data-active=true]{border-top-color:var(--story-accent)}.connected-story__step h3{font-family:var(--font-display), "IBM Plex Sans", sans-serif;letter-spacing:-.035em;text-wrap:balance;margin:20px 0 18px;font-size:clamp(28px,3vw,40px);font-weight:400;line-height:1}.connected-story__step>p:last-child{max-width:390px;color:var(--story-muted);margin:0;font-size:16px;line-height:1.75}.connected-story__visual-wrap{min-width:0;position:sticky;top:110px}.connected-story__controls{border:1px solid var(--story-line);border-bottom:0;grid-template-columns:repeat(3,1fr);display:grid}.connected-story__controls button{border:0;border-right:1px solid var(--story-line);min-height:52px;color:var(--story-muted);text-align:left;cursor:pointer;background:#10171e;padding:10px 14px;font:500 13px/1.2 IBM Plex Sans,sans-serif;transition:background-color .18s,color .18s}.connected-story__controls button:last-child{border-right:0}.connected-story__controls button span{color:var(--story-accent);font-variant-numeric:tabular-nums;margin-bottom:4px;font-size:12px;display:block}.connected-story__controls button:hover,.connected-story__controls button[aria-current=step]{color:var(--story-fg);background:#17212b}.connected-story__controls button:focus-visible{z-index:2;outline:2px solid var(--story-accent);outline-offset:-3px;position:relative}.connected-story__comparison{border:1px solid var(--story-line);color:var(--story-muted);border-bottom:0;grid-template-columns:1fr 1fr;font-size:12px;line-height:1.5;display:grid}.connected-story__comparison span{padding:12px 14px}.connected-story__comparison span+span{border-left:1px solid var(--story-line);color:var(--story-fg)}.connected-story__artboard{border:1px solid var(--story-line);isolation:isolate;background:#10171e;min-height:550px;position:relative;overflow:hidden;container-type:inline-size}.connected-story__bar{z-index:5;border-bottom:1px solid var(--story-line);color:var(--story-muted);justify-content:space-between;gap:24px;padding:14px 18px;font-size:12px;line-height:1.35;display:flex;position:relative}.connected-story__bar span:last-child{text-align:right}.connected-story__stage{opacity:0;visibility:hidden;pointer-events:none;transition:transform .26s;position:absolute;inset:45px 0 0;transform:translateY(8px)}.connected-story__artboard[data-step="0"] .connected-story__stage--website,.connected-story__artboard[data-step="1"] .connected-story__stage--inquiry,.connected-story__artboard[data-step="2"] .connected-story__stage--approval{opacity:1;visibility:visible;transform:translateY(0)}.connected-story__stage--website{grid-template-columns:minmax(250px,.86fr) 1.14fr;display:grid}.connected-story__site-copy{z-index:2;background:linear-gradient(90deg,#10171e 88%,#0000);flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(28px,4vw,64px);display:flex;position:relative}.connected-story__site-copy>span:first-child,.connected-story__inquiry-head span,.connected-story__stage--approval>div:first-child>span{color:var(--story-accent);letter-spacing:.08em;text-transform:uppercase;font-size:12px}.connected-story__site-copy strong{max-width:420px;font-family:var(--font-display), "IBM Plex Sans", sans-serif;letter-spacing:-.045em;margin-top:22px;font-size:clamp(30px,4.8cqw,48px);font-weight:500;line-height:.98}.connected-story__site-copy p{max-width:330px;color:var(--story-muted);margin:22px 0 28px;font-size:16px;line-height:1.65}.connected-story__mock-action{border-bottom:1px solid var(--story-accent);color:var(--story-fg);padding-bottom:7px;font-size:14px}.connected-story__stage--website img{object-fit:cover;opacity:.7;filter:saturate(.72)contrast(1.08)brightness(.72);width:100%;min-width:0;height:100%}.connected-story__stage--inquiry{flex-direction:column;padding:clamp(32px,5vw,72px);display:flex}.connected-story__inquiry-head{border-bottom:1px solid var(--story-line);gap:12px;padding-bottom:30px;display:grid}.connected-story__inquiry-head strong{font-family:var(--font-display), "IBM Plex Sans", sans-serif;letter-spacing:-.035em;font-size:clamp(32px,4vw,58px);font-weight:500;line-height:1}.connected-story__stage--inquiry dl{margin:0}.connected-story__stage--inquiry dl>div{border-bottom:1px solid var(--story-line);grid-template-columns:minmax(90px,.35fr) 1fr;gap:24px;padding:22px 0;display:grid}.connected-story__stage--inquiry dt{color:var(--story-muted);font-size:13px}.connected-story__stage--inquiry dd{margin:0;font-size:16px}.connected-story__status{color:var(--story-accent);margin:auto 0 0;padding-top:30px;font-size:14px}.connected-story__stage--approval{grid-template-columns:1.15fr .85fr;align-items:center;gap:clamp(28px,5vw,72px);padding:clamp(32px,5vw,72px);display:grid}.connected-story__stage--approval>div:first-child strong{max-width:560px;font-family:var(--font-display), "IBM Plex Sans", sans-serif;letter-spacing:-.045em;margin-top:20px;font-size:clamp(30px,5cqw,48px);font-weight:500;line-height:.96;display:block}.connected-story__stage--approval>div:first-child p{max-width:520px;color:var(--story-muted);margin:24px 0 0;font-size:16px;line-height:1.7}.connected-story__approval-state{border-top:2px solid var(--story-accent);background:#17212b;padding:24px}.connected-story__approval-state>span{color:var(--story-accent);font-variant-numeric:tabular-nums;font-size:12px}.connected-story__approval-state p{color:var(--story-muted);margin:28px 0 0;font-size:14px;line-height:1.6}.connected-story__approval-state strong{color:var(--story-fg);margin-bottom:6px;font-size:16px;display:block}@media (max-width:980px){.connected-story__layout{grid-template-columns:1fr;gap:44px}.connected-story__steps{order:2;grid-template-columns:repeat(3,1fr);gap:24px;display:grid}.connected-story__step{min-height:0;padding:28px 0}.connected-story__visual-wrap{position:relative;top:auto}}@media (max-width:650px){.connected-story{padding-inline:20px}.connected-story__intro{margin-bottom:52px}.connected-story__intro h2{font-size:clamp(36px,11.5vw,52px)}.connected-story__controls button{min-height:52px;padding-inline:9px;font-size:12px}.connected-story__comparison{grid-template-columns:1fr}.connected-story__comparison span+span{border-top:1px solid var(--story-line);border-left:0}.connected-story__artboard{min-height:620px}.connected-story__bar{align-items:flex-start;min-height:64px;padding:12px}.connected-story__stage{inset-block-start:64px}.connected-story__stage--website,.connected-story__stage--approval{grid-template-columns:1fr}.connected-story__site-copy{background:linear-gradient(#10171e 82%,#0000);justify-content:flex-start;padding:30px 24px}.connected-story__site-copy strong{font-size:clamp(42px,13vw,58px)}.connected-story__stage--website img{min-height:220px}.connected-story__stage--inquiry,.connected-story__stage--approval{padding:30px 24px}.connected-story__stage--inquiry dl>div{grid-template-columns:1fr;gap:7px;padding:17px 0}.connected-story__stage--approval{align-content:space-between;gap:30px}.connected-story__stage--approval>div:first-child strong{font-size:clamp(42px,13vw,58px)}.connected-story__steps{grid-template-columns:1fr;gap:0}.connected-story__step{padding:42px 0}.connected-story__step h3{font-size:38px}}@media (prefers-reduced-motion:reduce){.connected-story__step,.connected-story__controls button,.connected-story__stage{transition:none}.connected-story__stage{transform:none}}