/* ONE / three contrasted chapters. Existing images, interactions and motion preferences preserved. */
.after-story {
  --paper:#f7f8fc; --ink:#111526; --muted:#59657b; --line:#dce2ef; --after-accent:#3157ff;
  position:relative; isolation:isolate; background:var(--paper); color:var(--ink);
  font:400 15px/1.65 'DM Sans',sans-serif;
}
.after-story *, .after-story *::before, .after-story *::after { box-sizing:border-box; }
.after-story h2, .after-story h3, .after-story p, .after-story figure { margin:0; }
.after-story a { text-decoration:none; }
.after-story a:not(.one-install) { color:inherit; }
.after-story button, .after-story summary { -webkit-tap-highlight-color:transparent; font:inherit; }
.after-story button { cursor:pointer; }
.after-story :is(a,button,summary):focus-visible { outline:2px solid #3157ff; outline-offset:5px; }
.after-story [hidden] { display:none!important; }
.after-section { max-width:1440px; padding:100px 6.5%; margin:0 auto; scroll-margin-top:98px; }
.after-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:60px; margin-bottom:42px; }
.after-story .after-kicker { color:#3157ff; font-size:10px; font-weight:500; line-height:1.7; letter-spacing:.14em; margin-bottom:23px; }
.after-title { font:600 clamp(43px,4.65vw,67px)/1.08 'Manrope',sans-serif; letter-spacing:-.055em; color:#111526; }
.after-title > span { color:#3157ff; }
.after-story .after-intro { max-width:310px; font-size:15px; line-height:1.8; color:#59657b; margin-bottom:5px; }
.benefit-visual { width:100%; max-width:100%; min-width:0; position:relative; isolation:isolate; overflow:hidden; border-radius:8px; background:#e1e5ef; }
.benefit-visual > img { display:block; width:100%; height:100%; object-fit:cover; }
.benefit-clarity { height:590px; }
.benefit-clarity > img { object-position:50% 50%; }
.benefit-team { height:570px; }
.benefit-team > img { object-position:50% 55%; }
.benefit-clarity::after, .benefit-team::after { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(180deg,transparent 65%,#02061244); }
.benefit-overlay {
  position:absolute; z-index:2; width:310px; padding:24px 25px 18px; border:1px solid #dce2ef;
  border-radius:8px; background:#ffffff;
  color:#111526; border-left:3px solid #3157ff; backdrop-filter:none; box-shadow:0 16px 45px #030a2426;
}
.clarity-overlay { right:4%; bottom:36px; }
.benefit-overlay-brand { display:flex; align-items:baseline; gap:12px; margin-bottom:25px; }
.benefit-overlay-brand > span { font:600 20px/1 'Manrope',sans-serif; letter-spacing:-.065em; color:#111526; }
.benefit-overlay-brand > small { font-size:8px; letter-spacing:.09em; color:#59657b; }
.benefit-overlay-brand > i { margin-left:auto; display:block; width:4px; height:4px; border-radius:50%; background:#3157ff; align-self:center; }
.benefit-overlay .benefit-overlay-kicker { color:#59657b; font-size:9px; letter-spacing:.075em; line-height:1.6; margin-bottom:13px; }
.benefit-overlay h3 { font:550 28px/1.16 'Manrope',sans-serif; letter-spacing:-.045em; color:#111526; }
.phase-content { display:none; visibility:hidden; min-height:222px; }
.phase-content-0 { display:block; visibility:visible; }
.clarity-figures { display:flex; gap:28px; margin-top:23px; }
.clarity-figures > span { color:#111526; font:550 25px/1.25 'Manrope',sans-serif; letter-spacing:-.04em; }
.clarity-figures small { display:block; color:#59657b; font:400 10px/1.6 'DM Sans',sans-serif; letter-spacing:0; margin-top:5px; }
.benefit-overlay .clarity-impact { display:flex; gap:13px; align-items:baseline; margin-top:20px; padding-top:14px; border-top:1px solid #dce2ef; }
.clarity-impact strong { font:550 21px/1.3 'Manrope',sans-serif; color:#a35e12; letter-spacing:-.04em; }
.clarity-impact > span { font-size:10px; color:#59657b; }
.benefit-overlay .phase-note { font-size:13px; line-height:1.75; color:#59657b; margin-top:24px; max-width:240px; }
.phase-status { display:flex; align-items:center; gap:7px; font-size:10px; line-height:1.7; color:#59657b; border-top:1px solid #dce2ef; padding-top:17px; margin-top:22px; }
.phase-status > i { display:block; width:4px; height:4px; border-radius:50%; background:#3157ff; }
.phase-status > b { margin-left:auto; font-weight:400; font-size:21px; color:#3157ff; }
.phase-assignee { display:flex; align-items:center; gap:12px; margin-top:24px; }
.phase-assignee > span { display:grid; place-items:center; width:33px; height:33px; flex-shrink:0; border-radius:50%; background:#e8edff; color:#59657b; font-size:10px; }
.phase-assignee > p { color:#59657b; font-size:12px; line-height:1.65; }
.phase-assignee small { display:block; color:#59657b; font-size:10px; line-height:1.6; margin-top:4px; }
.phase-checkpoints { margin-top:20px; }
.phase-checkpoints p { display:flex; gap:8px; align-items:center; padding:12px 0; border-top:1px solid #dce2ef; font-size:12px; color:#59657b; }
.phase-checkpoints i { width:4px; height:4px; border-radius:50%; background:#3157ff; }
.phase-checkpoints span { margin-left:auto; font-size:10px; color:#59657b; }
.benefit-photo-label { position:absolute; z-index:1; bottom:27px; left:32px; color:#f7f8fc; font-size:9px; letter-spacing:.13em; }
.loop-explorer { margin-top:0; }
.loop-install { display:flex; justify-content:flex-end; margin-top:32px; }
.loop-install .one-install { min-height:58px; padding:18px 24px; gap:30px; border-radius:8px; font-size:13px; font-weight:600; }
.loop-track { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-bottom:1px solid var(--line); }
.loop-track > li { min-width:0; }
.loop-step { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:9px; position:relative; width:100%; padding:23px 24px 23px 0; text-align:left; border:0; background:transparent; color:#69758a; min-height:91px; }
.loop-number { grid-column:1/-1; font-size:9px; color:#3157ff; letter-spacing:.06em; }
.loop-step > span:nth-child(2) { font:500 clamp(14px,1.5vw,20px)/1.35 'Manrope',sans-serif; letter-spacing:-.035em; }
.loop-step > i { font-style:normal; font-size:18px; line-height:1; color:#3157ff; }
.loop-step::after { content:''; position:absolute; left:0; right:22px; bottom:-1px; height:3px; background:#3157ff; transform:scaleX(0); transform-origin:left; transition:transform .2s; }
.loop-step[aria-pressed=true], .loop-step:hover { color:#3157ff; }
.loop-step[aria-pressed=true] .loop-number { color:#3157ff; }
.loop-step[aria-pressed=true]::after { transform:scaleX(1); }
.loop-explanation { display:grid; grid-template-columns:53px minmax(0,1fr) 40px; align-items:center; gap:25px; padding-top:29px; min-height:95px; }
.loop-detail-index { font:400 43px/1 'Manrope',sans-serif; letter-spacing:-.06em; color:#3157ff; }
.loop-explanation h3 { font:550 17px/1.5 'Manrope',sans-serif; letter-spacing:-.025em; color:#111526; margin-bottom:5px; }
.loop-explanation p { color:#59657b; font-size:14px; line-height:1.7; }
.loop-return { font:300 38px/1 'Manrope',sans-serif; color:#3157ff; text-align:right; }
@supports selector(:has(*)) {
  .loop-section:has(.loop-step[aria-pressed=true]) .phase-content { display:none; visibility:hidden; }
  .loop-section:has(.loop-step[data-loop="0"][aria-pressed=true]) .phase-content-0,
  .loop-section:has(.loop-step[data-loop="1"][aria-pressed=true]) .phase-content-1,
  .loop-section:has(.loop-step[data-loop="2"][aria-pressed=true]) .phase-content-2,
  .loop-section:has(.loop-step[data-loop="3"][aria-pressed=true]) .phase-content-3,
  .loop-section:has(.loop-step[data-loop="4"][aria-pressed=true]) .phase-content-4 { display:block; visibility:visible; }
}

/* An existing team, with a visible rule between a request and an action. */
.system-section { --line:#aeb8cf26; max-width:none; padding:110px max(6%,calc((100% - 1250px)/2)); background:#0b1020; color:#f7f8fc; }
.approval-overlay { left:4%; bottom:35px; width:305px; }
.approval-overlay .benefit-overlay-brand { margin-bottom:24px; }
.approval-values { display:flex; align-items:center; gap:22px; margin-top:23px; }
.approval-values strong { font:550 39px/1.15 'Manrope',sans-serif; letter-spacing:-.055em; color:#3157ff; }
.approval-values strong > span { font-size:23px; color:inherit; margin-left:2px; }
.approval-values small { display:block; margin-top:5px; font-size:10px; color:#59657b; }
.approval-separator { font:300 28px/1 'Manrope',sans-serif; color:#c8d0df; padding-bottom:20px; }
.approval-overlay .approval-state { display:flex; gap:8px; align-items:center; border-top:1px solid #dce2ef; padding-top:16px; margin-top:21px; font-size:12px; color:#a35e12; }
.approval-state > span { font-size:18px; color:#b66b20; }
.approval-overlay .approval-next { color:#59657b; font-size:11px; line-height:1.7; margin-top:13px; }
.benefit-team .benefit-photo-label { left:auto; right:31px; max-width:320px; text-align:right; }
.system-connections { display:flex; align-items:center; flex-wrap:wrap; gap:15px 29px; padding:25px 0 27px; border-bottom:1px solid var(--line); }
.system-connections > p { font-size:12px; color:#59657b; }
.system-tool-list { display:flex; flex-wrap:wrap; gap:9px 20px; list-style:none; padding:0; margin:0; color:#59657b; font-size:11px; }
.system-tool-list li { display:flex; align-items:center; gap:12px; }
.system-tool-list li + li::before { content:''; width:2px; height:2px; background:#61718e; border-radius:50%; }
.system-connections > span { font-size:10px; color:#59657b; margin-left:auto; }
.system-rules { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:29px; margin-top:31px; }
.system-rule { min-width:0; }
.system-rule h3 { margin:0; font:550 17px/1.45 'Manrope',sans-serif; color:#111526; letter-spacing:-.02em; }
.system-rule > p { font-size:13px; line-height:1.8; color:#59657b; padding:11px 0 5px; max-width:260px; }

/* The last chapter moves from the scene to the accompanied installation. */
.setup-section { --line:#ffffff36; max-width:none; padding:110px max(6%,calc((100% - 1250px)/2)); background:#3157ff; color:#ffffff; }
.setup-layout { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center; gap:9%; }
.benefit-partnership { width:100%; aspect-ratio:.85; }
.benefit-partnership > img { object-position:45% 50%; }
.benefit-partnership::after { content:''; position:absolute; inset:55% 0 0; background:linear-gradient(transparent,#050a1640); pointer-events:none; }
.benefit-partnership > figcaption { position:absolute; z-index:1; bottom:29px; left:30px; color:#f7f8fc; font-size:9px; letter-spacing:.13em; }
.setup-content .after-title { font-size:clamp(39px,3.6vw,52px); }
.setup-content .after-intro { max-width:360px; margin-top:24px; font-size:14px; }
.setup-steps { list-style:none; margin:32px 0 0; padding:0; border-top:1px solid var(--line); }
.setup-steps > li { display:flex; align-items:start; gap:18px; padding:19px 0; border-bottom:1px solid var(--line); }
.setup-number { font-size:10px; color:#3157ff; letter-spacing:.03em; line-height:2.2; flex-shrink:0; }
.setup-steps h3 { font:550 18px/1.45 'Manrope',sans-serif; letter-spacing:-.03em; color:#111526; }
.setup-steps p { font-size:12px; line-height:1.8; color:#59657b; margin-top:7px; }
.setup-action { margin-top:29px; }
.setup-cta { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:20px 23px; min-height:64px; background:#ffffff; color:#111526!important; font-size:14px; font-weight:600; border-radius:8px; box-shadow:0 10px 28px #091a801c; transition:background .2s; }
.setup-cta > span { font:300 24px/1 'DM Sans',sans-serif; color:#111526; }
.setup-cta:hover { background:#edf1ff; }
.setup-action > p { color:#59657b; font-size:10px; line-height:1.8; margin-top:15px; }
.after-footer { max-width:none; margin:0 auto; padding:38px max(6%,calc((100% - 1250px)/2)); background:#080d19; border-top:1px solid #aeb8cf14; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.after-wordmark { font:600 31px/1 'Manrope',sans-serif; letter-spacing:-.075em; display:inline-flex; align-items:baseline; gap:10px; color:#111526!important; white-space:nowrap; }
.after-wordmark > span { font:400 10px/1.4 'DM Sans',sans-serif; letter-spacing:0; color:#59657b; }
.after-footer > p { font-size:11px; color:#59657b; }
.after-footer nav { display:flex; align-items:center; gap:26px; font-size:11px; color:#59657b; }
.after-footer nav a { display:inline-flex; align-items:center; gap:14px; min-height:44px; }
.after-footer nav a:hover { text-decoration:underline; text-underline-offset:5px; }

/* Full-width color fields keep the content on the same editorial grid. */
.system-section .after-title { color:#f7f8fc; }
.system-section .after-title > span { color:#9cadff; }
.system-section .after-kicker { color:#8ea4ff; }
.system-section .after-intro { color:#aeb8cf; }
.system-section .system-connections > p { color:#e0e6f3; }
.system-section .system-tool-list { color:#aeb8cf; }
.system-section .system-connections > span { color:#9aa8c1; }
.system-section .system-rule h3 { color:#f7f8fc; }
.system-section .system-rule > p { color:#aeb8cf; }
.system-section :is(a,button,summary):focus-visible { outline-color:#9cadff; }
.approval-values > div:first-child strong { color:#b96916; }
.approval-values > div:last-child strong { color:#3157ff; }
.approval-overlay .approval-state { border:0; border-left:2px solid #d68a36; padding:10px 11px; background:#fff3e4; border-radius:0 4px 4px 0; }
.setup-section .after-title, .setup-section .after-title > span { color:#ffffff; }
.setup-section .after-title > span { opacity:.82; }
.setup-section .after-kicker { color:#f7f8fc; }
.setup-section .after-intro { color:#f7f8fc; }
.setup-section .setup-number { color:#e7ebff; font-weight:500; }
.setup-section .setup-steps h3 { color:#ffffff; }
.setup-section .setup-steps p { color:#f7f8fc; }
.setup-section .setup-action > p { color:#f7f8fc; }
.setup-section :is(a,button,summary):focus-visible { outline-color:#ffffff; }
.after-footer .after-wordmark { color:#f7f8fc!important; }
.after-footer .after-wordmark > span, .after-footer > p { color:#8d9bb4; }
.after-footer nav { color:#b0bdd3; }

@media (min-width:1500px) { .benefit-clarity { height:625px; } .benefit-team { height:600px; } }
@media (max-width:1100px) {
  .after-section { padding:80px 6%; }
  .after-heading { gap:40px; margin-bottom:35px; }
  .after-title { font-size:46px; }
  .after-story .after-intro { max-width:260px; font-size:14px; }
  .benefit-clarity { height:530px; }
  .benefit-team { height:520px; }
  .benefit-overlay { width:280px; padding:22px 22px 17px; }
  .clarity-overlay { right:28px; bottom:29px; }
  .approval-overlay { left:28px; bottom:29px; width:280px; }
  .benefit-overlay h3 { font-size:27px; }
  .benefit-photo-label { left:25px; bottom:23px; font-size:8px; }
  .benefit-team .benefit-photo-label { right:24px; max-width:245px; }
  .loop-step { padding-right:15px; }
  .loop-step > span:nth-child(2) { font-size:15px; }
  .system-connections { gap:13px 22px; }
  .system-connections > span { margin-left:0; }
  .system-rules { gap:22px; }
  .system-rule h3 { font-size:14px; }
  .setup-layout { gap:6%; }
  .setup-content .after-title { font-size:38px; }
  .setup-content .after-intro { margin-top:20px; font-size:13px; }
  .setup-steps { margin-top:25px; }
  .setup-steps > li { gap:14px; padding:16px 0; }
  .setup-steps h3 { font-size:16px; }
  .setup-steps p { font-size:11px; }
  .setup-cta { padding:18px 20px; font-size:13px; gap:18px; }
  .after-footer { padding-left:6%; padding-right:6%; gap:20px; }
}
@media (max-width:700px) {
  .after-section { padding:65px 24px; scroll-margin-top:94px; }
  .after-heading { display:block; margin-bottom:28px; }
  .after-story .after-kicker { margin-bottom:19px; font-size:9px; }
  .after-title { font-size:clamp(37px,8.9vw,48px); }
  .after-story .after-intro { max-width:330px; margin-top:20px; font-size:14px; line-height:1.8; }
  .benefit-visual { border-radius:8px; }
  .benefit-clarity, .benefit-team { height:auto; background:#f7f8fc; }
  .benefit-clarity > img, .benefit-team > img { height:295px; }
  .benefit-clarity > img { object-position:30% 46%; }
  .benefit-team > img { object-position:64% 57%; }
  .benefit-clarity::after, .benefit-team::after { display:none; }
  .benefit-overlay { position:relative; inset:auto; width:100%; border:0; border-top:3px solid #3157ff; border-radius:0; box-shadow:none; padding:24px 26px 21px; background:#ffffff; backdrop-filter:none; }
  .benefit-overlay-brand { margin-bottom:21px; }
  .benefit-overlay-brand > span { font-size:20px; }
  .benefit-overlay-brand > small { font-size:8px; }
  .benefit-overlay .benefit-overlay-kicker { margin-bottom:11px; font-size:9px; }
  .benefit-overlay h3 { font-size:27px; }
  .phase-content { min-height:205px; }
  .clarity-figures { gap:32px; margin-top:20px; }
  .clarity-figures > span { font-size:27px; }
  .clarity-figures small { font-size:11px; }
  .benefit-overlay .clarity-impact { margin-top:17px; padding-top:13px; }
  .clarity-impact strong { font-size:22px; }
  .clarity-impact > span { font-size:11px; }
  .benefit-overlay .phase-note { font-size:13px; max-width:270px; margin-top:20px; }
  .phase-assignee p { font-size:13px; }
  .phase-assignee small { font-size:11px; }
  .phase-checkpoints p { font-size:13px; }
  .phase-checkpoints span { font-size:11px; }
  .phase-status { font-size:11px; margin-top:18px; padding-top:14px; }
  .benefit-photo-label { display:none; }
  .loop-track { gap:11px; }
  .loop-step { padding:19px 0 18px; gap:9px; min-height:78px; grid-template-columns:1fr; }
  .loop-step > span:nth-child(2) { font-size:11px; letter-spacing:-.02em; }
  .loop-step > i { display:none; }
  .loop-step::after { right:0; }
  .loop-number { font-size:9px; }
  .loop-explanation { grid-template-columns:32px minmax(0,1fr); gap:18px; padding-top:24px; min-height:120px; align-items:start; }
  .loop-detail-index { font-size:33px; margin-top:4px; }
  .loop-explanation h3 { font-size:16px; margin-bottom:7px; }
  .loop-explanation p { font-size:13px; line-height:1.75; }
  .loop-return { display:none; }
  .loop-install { justify-content:flex-start; margin-top:26px; }
  .loop-install .one-install { width:100%; min-height:60px; padding:18px 20px; gap:18px; }
  .system-section { padding-top:65px; }
  .approval-overlay { width:100%; }
  .approval-overlay h3 br { display:none; }
  .approval-values { margin-top:21px; gap:29px; }
  .approval-values strong { font-size:39px; }
  .approval-values small { font-size:11px; }
  .approval-overlay .approval-state { margin-top:19px; font-size:13px; }
  .approval-overlay .approval-next { font-size:12px; }
  .system-connections { display:block; padding:23px 0; }
  .system-connections > p { font-size:13px; }
  .system-tool-list { gap:11px 17px; margin-top:17px; font-size:12px; }
  .system-tool-list li { gap:9px; }
  .system-connections > span { display:block; margin-top:18px; font-size:10px; }
  .system-rules { display:block; margin-top:13px; }
  .system-rule { border-bottom:1px solid var(--line); padding:19px 0; }
  .system-rule h3 { font-size:17px; }
  .system-rule > p { font-size:13px; max-width:100%; padding:9px 0 4px; }
  .setup-section { padding-top:65px; padding-bottom:66px; }
  .setup-layout { display:flex; flex-direction:column; gap:34px; }
  .benefit-partnership { aspect-ratio:1.07; width:100%; }
  .benefit-partnership > img { object-position:45% 46%; }
  .benefit-partnership > figcaption { bottom:22px; left:23px; font-size:8px; }
  .setup-content { width:100%; }
  .setup-content .after-title { font-size:clamp(37px,8.9vw,48px); }
  .setup-content .after-intro { font-size:14px; max-width:360px; margin-top:21px; }
  .setup-steps { margin-top:29px; }
  .setup-steps > li { padding:19px 0; gap:18px; }
  .setup-steps h3 { font-size:18px; }
  .setup-steps p { font-size:13px; line-height:1.7; margin-top:7px; }
  .setup-number { font-size:10px; line-height:2.4; }
  .setup-action { margin-top:28px; }
  .setup-cta { font-size:13px; min-height:64px; padding:19px 20px; gap:16px; }
  .setup-action > p { font-size:11px; line-height:1.8; margin-top:15px; }
  .after-footer { display:block; padding:32px 24px; }
  .after-wordmark { font-size:30px; }
  .after-footer > p { margin-top:17px; font-size:11px; }
  .after-footer nav { justify-content:space-between; margin-top:14px; gap:22px; font-size:11px; }
}
@media (max-width:370px) {
  .after-section { padding-left:20px; padding-right:20px; }
  .after-title, .setup-content .after-title { font-size:34px; }
  .benefit-clarity > img, .benefit-team > img { height:265px; }
  .benefit-overlay { padding-left:23px; padding-right:23px; }
  .loop-track { gap:8px; }
  .loop-step > span:nth-child(2) { font-size:10px; }
  .setup-cta { font-size:12px; padding:18px; }
}
@media (prefers-reduced-motion:reduce) {
  .after-story *, .after-story *::before, .after-story *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}