

.devops-story .ignite-feature{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr);gap:45px;align-items:center;padding:38px;background:#eef1f4;border-radius:16px;margin:50px 0 85px}.devops-story .ignite-feature h2{font-size:clamp(30px,3.2vw,44px);line-height:1.15;letter-spacing:-.04em;font-weight:400;margin:18px 0}.devops-story .ignite-feature p:not(.eyebrow){font-size:15px;line-height:1.75;color:#62675f}.devops-story .ignite-feature .case-figure{margin:0}.devops-story .ignite-feature .case-figure img{border-radius:8px}.devops-story .ignite-feature figcaption{font-size:11px}.devops-story .ignite-feature figcaption span{display:none}@media(max-width:750px){.devops-story .ignite-feature{grid-template-columns:1fr;padding:22px;gap:20px}}

.devops-story .preview-showcase{margin:32px 0 55px}.devops-story .showcase-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}.devops-story .showcase-heading>span{font-size:12px;color:var(--muted)}.devops-story .showcase-stage{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:28px;padding:42px;background:linear-gradient(140deg,#dce8f3 0%,#e9edf2 50%,#dce1eb 100%);border-radius:18px;align-items:start;overflow:hidden}.devops-story .showcase-stage a{display:block;min-width:0;background:#fff;border:1px solid #d4dce5;border-radius:8px;overflow:hidden;box-shadow:0 14px 35px #203b581c;transition:transform .2s}.devops-story .showcase-stage a:hover{transform:translateY(-4px)}.devops-story .showcase-stage img{display:block;width:100%;height:auto}.devops-story .showcase-stage a>span{display:block;padding:14px 18px;font-size:12px;color:#43596d;border-top:1px solid #e3e8ef;background:#fff}.devops-story .showcase-support{display:grid;gap:26px;padding-top:28px}.devops-story .showcase-caption{font-size:13px;line-height:1.7;color:var(--muted);max-width:820px;margin-top:18px}.devops-story .case-hero{padding-bottom:0}.devops-story .case-hero h1{font-size:clamp(44px,5.7vw,76px);letter-spacing:-.055em;margin:22px 0 24px}.devops-story .case-hero .case-deck{font-size:18px;line-height:1.7}.devops-story .case-hero{padding-top:32px}.devops-story .case-hero .case-deck{max-width:920px}.devops-story main>.case-facts{margin:0 0 35px;padding-top:25px;border-top:1px solid var(--line)}@media(max-width:750px){.devops-story .showcase-stage{grid-template-columns:1fr;padding:20px;gap:20px}.devops-story .showcase-support{grid-template-columns:1fr 1fr;gap:14px;padding:0}.devops-story .showcase-heading{display:block}.devops-story .showcase-heading>span{display:none}.devops-story .showcase-stage a>span{font-size:11px;padding:10px}.devops-story .showcase-support img{height:140px;object-fit:cover;object-position:top}.devops-story .preview-showcase{margin-top:20px}}@media(prefers-reduced-motion:reduce){.devops-story .showcase-stage a{transition:none}}
.devops-story{--paper:#f7f6f2}.devops-story .case-deck{max-width:850px}.devops-story h1{max-width:1100px}.devops-story .story-nav{display:flex;flex-wrap:wrap;gap:12px 25px;border-block:1px solid var(--line);padding:20px 0;margin:35px 0 50px;font-size:13px}.devops-story .story-nav a:hover{text-decoration:underline}.devops-story .case-facts{grid-template-columns:repeat(3,minmax(0,1fr))}.devops-story .case-figure img{display:block;width:100%;height:auto;max-height:none;object-fit:contain}.devops-story .case-figure figcaption{display:flex;justify-content:space-between;gap:20px;font-size:13px;line-height:1.6;margin-top:14px;color:var(--muted)}.devops-story .case-figure figcaption span{white-space:nowrap}.devops-story .story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin:40px 0 60px}.devops-story .story-grid article{padding:24px 0;border-top:1px solid var(--line)}.devops-story h3{font-size:25px;letter-spacing:-.7px;font-weight:400;line-height:1.25}.devops-story .story-grid p,.devops-story .decision-note p,.devops-story .story-note{font-size:15px;line-height:1.75;color:#62675f}.devops-story .story-grid h3{margin:17px 0}.devops-story .decision-note{border-left:2px solid #718294;padding:8px 0 8px 26px;margin:30px 0 40px;max-width:830px}.devops-story .decision-note h3{font-size:22px;margin:10px 0}.devops-story .decision-note p{margin:0}.devops-story .walkthrough{background:#eeeee9;padding:24px;border-radius:12px;margin:35px 0 55px}.devops-story .walkthrough figure{margin:20px 0}.devops-story .walk-controls{display:flex;align-items:center;justify-content:space-between;gap:15px}.devops-story button{font:inherit;color:inherit;border:1px solid #ccd0c8;background:transparent;padding:11px 18px;border-radius:5px;cursor:pointer}.devops-story button:hover{background:#fff}.devops-story button:disabled{opacity:.35;cursor:default}.devops-story button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.devops-story .walk-label{font-size:16px;line-height:1.5}.devops-story .walk-count{font-size:12px;color:var(--muted)}.devops-story .walk-screen[hidden]{display:none}.devops-story .walk-screen h3{font-size:24px;margin-bottom:10px}.devops-story .walk-screen p{font-size:15px;line-height:1.7;color:#62675f;max-width:800px}.devops-story details{border-block:1px solid var(--line);padding:22px 0;margin:35px 0}.devops-story summary{cursor:pointer;font-size:17px;line-height:1.5}.devops-story .case-metrics{margin:40px 0 25px}.devops-story .case-metrics strong{font-size:60px}.devops-story .story-note{max-width:850px}.devops-story .case-cover img{width:100%;height:auto}.devops-story .paired{display:grid;grid-template-columns:1fr 1fr;gap:25px}.devops-story .paired figure{margin:20px 0}.devops-story .paired figcaption span{display:none}@media(max-width:750px){.devops-story .story-grid,.devops-story .case-facts,.devops-story .paired{grid-template-columns:1fr}.devops-story .story-grid{gap:0;margin:20px 0 40px}.devops-story .walkthrough{padding:16px}.devops-story .walk-controls{flex-wrap:wrap}.devops-story .walk-label{flex-basis:100%}.devops-story .case-figure figcaption{display:block}.devops-story .case-figure figcaption span{display:block;margin-top:8px}.devops-story .case-metrics strong{font-size:45px}}
/* Native case-study components. Original UI remains in the product gallery. */
.devops-story .product-gallery{border:1px solid #d5dce4;border-radius:14px;overflow:hidden;background:#e9edf2;box-shadow:0 20px 60px #24364b0c}
.devops-story .gallery-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#f1f3f5;border-bottom:1px solid #d5dce4;padding:0 22px;gap:16px}
.devops-story .gallery-tabs button{border:0;border-radius:0;padding:20px 8px;font-size:13px;text-align:left;color:#727c88;border-bottom:2px solid transparent;background:none}
.devops-story .gallery-tabs button[aria-selected=true]{color:#234d73;border-bottom-color:#234d73;font-weight:600}
.devops-story .gallery-tabs button:hover{background:none;color:#234d73}
.devops-story .gallery-panel[hidden]{display:none}
.devops-story .gallery-image{height:580px;overflow-y:auto;overscroll-behavior:contain;margin:28px 28px 0;border:1px solid #d2dae4;border-radius:7px;background:white;scrollbar-width:thin;scrollbar-color:#a8b8c9 #e9edf2}
.devops-story .gallery-image img{display:block;width:100%;height:auto}
.devops-story .gallery-caption{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:24px 28px 28px}
.devops-story .gallery-caption h3{font-size:21px;margin:0 0 8px;letter-spacing:-.035em;color:#253a4e}
.devops-story .gallery-caption p{font-size:14px;color:#647284;line-height:1.6;margin:0}
.devops-story .gallery-caption>a{font-size:12px;white-space:nowrap;color:#345573}
.devops-story .native-section-head{max-width:850px;margin:0 0 32px}
.devops-story .native-section-head h2{font-size:clamp(30px,3.2vw,43px);line-height:1.15;letter-spacing:-.045em;font-weight:400;margin:18px 0}
.devops-story .native-section-head>p:not(.eyebrow){font-size:16px;line-height:1.75;color:#68716d}
.devops-story :is(.people-section,.pain-section,.leadership-native){margin:65px 0 85px}
.devops-story .persona-pair{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.devops-story .persona-native{border:1px solid #dce1e4;border-radius:14px;background:#f1f3f4;padding:32px}
.devops-story .persona-native:nth-child(2){background:#f1f1ed;border-color:#dce0d6}
.devops-story .persona-top{display:flex;align-items:center;gap:15px;margin-bottom:30px}
.devops-story .persona-top .eyebrow{font-size:10px;letter-spacing:1.2px;line-height:1.6;margin:0}
.devops-story .role-mark{width:38px;height:38px;display:grid;place-items:center;background:#e0e7ed;color:#38536c;border:1px solid #d3dde6;border-radius:50%;font-size:15px;flex:none}
.devops-story .persona-native:nth-child(2) .role-mark{background:#e5e8df;border-color:#d9dfd0;color:#52604b}
.devops-story .persona-native h3{font-size:30px;letter-spacing:-.04em;margin:0 0 16px}
.devops-story .persona-purpose{font-size:16px;line-height:1.75;color:#5e696f;max-width:460px;margin:0 0 30px}
.devops-story .persona-native dl{margin:0}
.devops-story .persona-native dl>div{border-top:1px solid #d7dfe2;padding:18px 0}
.devops-story .persona-native dt{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:#64717a;margin:0 0 9px}
.devops-story .persona-native dd{font-size:14px;line-height:1.75;color:#4b555a;margin:0}
.devops-story .reframe-band{display:grid;grid-template-columns:1fr 1.2fr;gap:15px 50px;border-bottom:1px solid #d9dfdc;padding:34px 0}
.devops-story .reframe-band>.eyebrow{grid-column:1/-1;margin:0}
.devops-story .reframe-band h3{font-size:28px;letter-spacing:-.04em;line-height:1.25;margin:0}
.devops-story .reframe-band>p:last-child{font-size:15px;line-height:1.75;color:#64706b;margin:0}
.devops-story .pain-header{display:grid;grid-template-columns:1fr 1fr;gap:50px;padding:16px 0;border-bottom:1px solid #cbd5dc;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:#647585}
.devops-story .pain-row{display:grid;grid-template-columns:1fr 1fr;gap:50px;padding:27px 0;border-bottom:1px solid #dde2df;align-items:center}
.devops-story .pain-row>div{display:flex;gap:20px;align-items:baseline}
.devops-story .native-index{color:#84909a;font-size:12px;letter-spacing:.05em;flex:none}
.devops-story .pain-row h3{font-size:23px;letter-spacing:-.03em;margin:0 0 9px}
.devops-story .pain-row p{font-size:14px;line-height:1.7;color:#65706b;margin:0;max-width:420px}
.devops-story .pain-row>a{display:flex;align-items:center;justify-content:space-between;gap:25px;color:#36536d;font-size:16px;line-height:1.6;padding:18px 23px;background:#edf1f3;border-radius:9px;min-height:95px}
.devops-story .pain-row>a:hover{background:#e3eaf0}
.devops-story .pain-row>a>span{flex:none;color:#6b8499}
.devops-story .process-native{list-style:none!important;padding:0!important;margin:35px 0 45px!important;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px}
.devops-story .process-native li{padding:22px 0;border-top:2px solid #a2b4c3}
.devops-story .process-native li>span{font-size:10px;letter-spacing:1px;color:#72818b}
.devops-story .process-native h3{font-size:21px;line-height:1.3;letter-spacing:-.025em;margin:20px 0 13px}
.devops-story .process-native p{font-size:13px;line-height:1.7;color:#65706b;margin:0}
.devops-story .alignment-native{display:grid;grid-template-columns:1fr 40px 1fr;gap:32px;align-items:center;padding:36px;background:#eeefeb;border:1px solid #dce0d8;border-radius:12px;margin:35px 0 65px}
.devops-story .alignment-native h3{font-size:25px;letter-spacing:-.035em;line-height:1.3;margin:18px 0}
.devops-story .alignment-native p:not(.eyebrow){font-size:14px;line-height:1.75;color:#65706b;margin:0}
.devops-story .alignment-center{font-size:28px;color:#88998f;text-align:center}
.devops-story .leadership-native{display:grid;grid-template-columns:1fr 1.25fr;gap:70px;border-top:1px solid #d9dfdc;padding-top:44px}
.devops-story .leadership-list article{display:flex;gap:20px;padding:25px 0;border-bottom:1px solid #d9dfdc}
.devops-story .leadership-list article:first-child{padding-top:0}
.devops-story .leadership-list h3{font-size:23px;letter-spacing:-.035em;margin:0 0 13px}
.devops-story .leadership-list p{font-size:15px;line-height:1.75;color:#65706b;margin:0}
.devops-story .decision-matrix{margin:0 0 65px;border:1px solid #d7dfe4;border-radius:12px;overflow:hidden}
.devops-story .matrix-row{display:grid;grid-template-columns:.8fr 1.2fr 1fr;gap:30px;padding:23px 28px;border-bottom:1px solid #e0e5e7;background:#f8f9f7}
.devops-story .matrix-row:last-child{border-bottom:0}
.devops-story .matrix-head{background:#eaf0f3;color:#536a7b;font-size:10px;text-transform:uppercase;letter-spacing:1.2px}
.devops-story .matrix-row h3{font-size:19px;line-height:1.4;letter-spacing:-.03em;margin:0}
.devops-story .matrix-row p{font-size:14px;line-height:1.7;color:#65706b;margin:0}
.devops-story .validation-native{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:30px 0 70px}
.devops-story .validation-native article{padding:24px 0;border-top:1px solid #cbd8df}
.devops-story .validation-native h3{font-size:25px;margin:20px 0 14px;letter-spacing:-.035em}
.devops-story .validation-native p{font-size:15px;line-height:1.75;color:#65706b}
@media(max-width:950px){.devops-story .process-native{grid-template-columns:repeat(3,minmax(0,1fr))}.devops-story .leadership-native{grid-template-columns:1fr;gap:20px}.devops-story .gallery-image{height:440px}}
@media(max-width:650px){.devops-story .persona-pair,.devops-story .reframe-band,.devops-story .pain-row,.devops-story .alignment-native,.devops-story .validation-native{grid-template-columns:1fr}.devops-story .persona-native{padding:25px}.devops-story .persona-native h3{font-size:27px}.devops-story .reframe-band{gap:18px}.devops-story .pain-header{display:none}.devops-story .pain-row{gap:20px}.devops-story .pain-row>a{margin-left:35px;min-height:0;padding:17px;font-size:15px}.devops-story .process-native{grid-template-columns:1fr 1fr;gap:20px}.devops-story .alignment-native{padding:25px;gap:15px}.devops-story .alignment-center{text-align:left}.devops-story .matrix-head{display:none}.devops-story .matrix-row{grid-template-columns:1fr;gap:12px;padding:23px}.devops-story .matrix-row p:last-child:before{content:'Evaluation: ';color:#36536d}.devops-story .gallery-tabs{padding:0 12px;gap:8px}.devops-story .gallery-tabs button{font-size:11px;line-height:1.5;padding:15px 3px}.devops-story .gallery-image{height:350px;margin:15px 15px 0}.devops-story .gallery-caption{align-items:flex-start;flex-direction:column;padding:20px;gap:15px}.devops-story .gallery-caption h3{font-size:20px}.devops-story :is(.people-section,.pain-section,.leadership-native){margin:45px 0 60px}}
.devops-story .scope-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:30px 0 45px}.devops-story .scope-grid article{padding-top:23px;border-top:1px solid #ced8df}.devops-story .scope-grid h3{font-size:24px;letter-spacing:-.035em;margin:18px 0 12px}.devops-story .scope-grid p:not(.eyebrow){font-size:14px;line-height:1.8;color:#64706a}
.devops-story .release-strip{list-style:none;padding:25px 28px;margin:30px 0 65px;background:#edf1f3;border-radius:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}.devops-story .release-strip span{font-size:10px;letter-spacing:1px;color:#657d8f}.devops-story .release-strip h3{font-size:20px;margin:15px 0 9px}.devops-story .release-strip p{font-size:13px;line-height:1.7;color:#64706a;margin:0}.devops-story .compact-personas{margin:30px 0 45px}.devops-story .compact-personas h3{font-size:27px}.devops-story .compact-personas p:last-child{font-size:15px;line-height:1.8;color:#64706a;margin-bottom:0}
.devops-story .dashboard-step{padding:35px 0 45px;border-top:1px solid #d4dde3}.devops-story .step-intro{display:flex;align-items:baseline;gap:20px;margin-bottom:25px}.devops-story .step-intro .eyebrow{margin:0 0 12px}.devops-story .step-intro h3{font-size:29px;letter-spacing:-.04em;margin:0}.devops-story .comparison-body{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:38px;align-items:start}.devops-story .comparison-body figure{margin:0;min-width:0}.devops-story .comparison-crop{display:block;position:relative;aspect-ratio:1.75;overflow:hidden;border:1px solid #d5dce0;border-radius:9px;background:#fff}.devops-story .comparison-crop img{position:absolute;width:315%;height:auto;max-width:none;top:-25%;display:block}.devops-story .crop-0 img{left:-1%}.devops-story .crop-1 img{left:-104%}.devops-story .crop-2 img{left:-207%}.devops-story .comparison-body figcaption{font-size:13px;line-height:1.7;color:#6a777e;margin-top:14px}.devops-story .comparison-reason>div{padding:17px 0;border-top:1px solid #dbe1e4}.devops-story .comparison-reason>div:first-child{padding-top:0;border-top:0}.devops-story .comparison-reason span{font-size:10px;letter-spacing:1.1px;color:#637d90}.devops-story .comparison-reason p{font-size:16px;line-height:1.75;margin:10px 0 0;color:#4d5b62}.devops-story .dashboard-next{margin:50px 0 65px}.devops-story .later-dashboard-detail{max-height:580px;overflow:auto;border:1px solid #d3dce3;border-radius:12px;background:#eaf0f4;padding:24px}.devops-story .later-dashboard-detail img{display:block;width:100%;height:auto}.devops-story .case-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:800px){.devops-story .comparison-body{grid-template-columns:1fr;gap:22px}.devops-story .comparison-reason{display:grid;grid-template-columns:1fr 1fr;gap:25px}.devops-story .comparison-reason>div{padding:17px 0!important;border-top:1px solid #dbe1e4!important}.devops-story .scope-grid{gap:22px}.devops-story .release-strip{gap:20px;padding:22px}.devops-story .step-intro h3{font-size:26px}}
@media(max-width:600px){.devops-story .scope-grid,.devops-story .release-strip,.devops-story .comparison-reason{grid-template-columns:1fr}.devops-story .release-strip li+li{padding-top:20px;border-top:1px solid #d5dfe4}.devops-story .scope-grid{gap:5px}.devops-story .comparison-reason{gap:0}.devops-story .comparison-reason p{font-size:15px}.devops-story .later-dashboard-detail{padding:12px;max-height:400px}.devops-story .step-intro{gap:13px}}

.devops-story .devops-access{padding:48px 40px;margin:40px 0 70px;border:1px solid #d5dfe5;border-radius:14px;background:#edf1f3;max-width:850px}.devops-story .devops-access h2{font-size:36px;letter-spacing:-.04em;font-weight:400}.devops-story .devops-access>p:not(.eyebrow){font-size:16px;line-height:1.7;color:#63717c}.devops-story .devops-access form{margin-top:30px}.devops-story .devops-access label{display:block;font-size:13px;margin-bottom:10px}.devops-story .devops-access form>div{display:flex;gap:12px}.devops-story .devops-access input{min-width:0;flex:1;font:inherit;padding:14px;border:1px solid #bfcdd7;border-radius:5px;background:#fff}.devops-story .devops-access button{background:#344f67;color:white;border-color:#344f67}.devops-story .devops-lock{margin:35px 0}.devops-story .gate-error{color:#a13c30;font-size:14px}@media(max-width:600px){.devops-story .devops-access{padding:28px 22px}.devops-story .devops-access form>div{flex-direction:column}.devops-story .devops-access h2{font-size:30px}}

/* Center the case-study access panel. */
.devops-story .devops-access{margin:55px auto 75px;text-align:center}.devops-story .devops-access>.eyebrow{justify-content:center}.devops-story .devops-access>p:not(.eyebrow){max-width:580px;margin-left:auto;margin-right:auto}.devops-story .devops-access form{max-width:560px;margin:30px auto 0}.devops-story .devops-access label{text-align:center}

/* Match the first project: centered card, left-aligned contents. */
.devops-story .devops-access{max-width:740px;margin:35px auto 90px;padding:42px;background:#e8edf0;border-radius:5px;text-align:left}.devops-story .devops-access>.eyebrow{justify-content:flex-start}.devops-story .devops-access h2{font-size:34px;line-height:1.2;letter-spacing:-.8px;margin:22px 0}.devops-story .devops-access>p:not(.eyebrow){font-size:15px;line-height:1.8;max-width:560px;margin-left:0;margin-right:0}.devops-story .devops-access form{max-width:none;margin:28px 0 0}.devops-story .devops-access label{text-align:left;font-size:12px}.devops-story .devops-access input{background:var(--paper);border-radius:3px;padding:13px;font-size:17px}.devops-story .devops-access button{background:var(--accent);border-color:var(--accent);border-radius:3px;font-size:12px;padding:14px 20px}@media(max-width:600px){.devops-story .devops-access{padding:25px;margin-bottom:50px}.devops-story .devops-access h2{font-size:28px}.devops-story .devops-access button{align-self:flex-start}}
