/* The case studies share the site's type, palette and header. */
body.twoi-cases{padding-top:72px;min-width:0;color:var(--ink,#111723);background:var(--paper,#f8f9fc);overflow-x:clip}
.case-shell{width:min(1280px,100% - 80px);margin-inline:auto}
.case-main{padding-bottom:88px}
.case-main *,.case-footer *{box-sizing:border-box}
.case-main :is(h1,h2,h3,p,ul,ol){margin:0}
.case-main p{line-height:1.65}
.case-main :is(a,button,input,summary):focus-visible{outline:3px solid #2d50e7;outline-offset:5px}
.case-main button,.case-main input{font:inherit}
.case-main button{cursor:pointer}
.case-skip{position:fixed;top:8px;left:16px;z-index:100;padding:12px 20px;background:white;border-radius:10px;transform:translateY(-150%)}
.case-skip:focus{transform:none}
.case-back{display:inline-flex;align-items:center;gap:10px;margin-top:38px;color:var(--muted);font-size:13px}
.case-back:hover{color:var(--accent)}
.case-kicker{display:block;color:var(--accent);font-size:11px;font-family:"IBM Plex Mono",monospace;font-weight:500;letter-spacing:.09em;text-transform:uppercase}
.case-hero{display:grid;grid-template-columns:1.08fr 1fr;align-items:center;gap:54px;padding:54px 0 72px;min-width:0}
.case-hero-copy{position:relative;z-index:1}
.case-hero h1{font-size:clamp(42px,4.4vw,64px);font-weight:600;line-height:1.04;letter-spacing:-.05em;text-wrap:balance;margin:22px 0}
.case-lead{color:var(--muted);font-size:18px;max-width:560px;text-wrap:pretty}
.case-audience{color:var(--muted);font-size:12px;display:flex;gap:10px;align-items:center;margin-top:24px!important}

.case-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.case-actions :is(.button-primary,.button-secondary){min-height:50px;padding-inline:20px}
.case-stack{border-block:1px solid var(--line);display:grid;gap:22px;padding:26px 0}
.case-stack-group{display:grid;grid-template-columns:190px minmax(0,1fr);gap:12px 26px;align-items:center;min-width:0}
.case-stack-label{font-size:12px;color:var(--muted);line-height:1.5}
.case-integrations{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;list-style:none;padding:0}
.case-integration{display:flex;gap:10px;align-items:center;font-size:13px;font-weight:600}
.case-integration img{width:32px;height:32px;object-fit:contain;padding:4px;background:white;border:1px solid var(--line);border-radius:9px}
.case-feature{display:flex;gap:7px;align-items:center;font-size:12px;color:var(--muted)}
.case-feature .case-feature-icon{width:17px;height:17px;color:var(--accent);flex:none}
.case-section{padding-top:100px;scroll-margin-top:108px}
.case-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:36px;margin-bottom:36px}
.case-section-heading h2,.case-estimate h2{font-size:clamp(32px,3.5vw,46px);line-height:1.08;letter-spacing:-.045em;font-weight:600;margin-top:16px;text-wrap:balance}
.case-section-heading>p{font-size:14px;color:var(--muted);max-width:380px}
.case-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:white}
.case-metric{padding:30px 30px 26px}
.case-metric+.case-metric{border-left:1px solid var(--line)}
.case-metric-value{display:block;font-size:clamp(39px,4vw,60px);font-weight:600;letter-spacing:-.06em;line-height:1.05;margin-bottom:17px;color:var(--accent)}
.case-metric h3{font-size:17px;line-height:1.35;font-weight:600;margin-bottom:9px}
.case-metric p{font-size:13px;color:var(--muted)}
.case-metric-note{font-size:11px;color:var(--muted);margin-top:17px!important}
.case-source-link{font-size:12px;color:var(--muted);margin-top:19px!important}
.case-source-link a{text-decoration:underline;text-underline-offset:4px;color:var(--accent)}
.case-before-after{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:56px}
.case-comparison{padding-top:20px;border-top:2px solid var(--line-strong)}
.case-comparison--after{border-color:var(--accent)}
.case-comparison h3{font-size:20px;font-weight:600;letter-spacing:-.02em;margin-bottom:22px;display:flex;gap:12px;align-items:center}
.case-comparison h3 span{font-size:10px;font-family:"IBM Plex Mono",monospace;font-weight:500;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:3px 7px;letter-spacing:0}
.case-comparison--after h3 span{color:var(--accent);border-color:#c9d2fc;background:#eef1ff}
.case-comparison ul{list-style:none;padding:0;display:grid;gap:14px}
.case-comparison li{padding-left:22px;position:relative;font-size:15px;line-height:1.65;color:var(--muted)}
.case-comparison li::before{content:"−";position:absolute;left:0;color:#9099a9}
.case-comparison--after li::before{content:"✓";color:var(--accent)}
.case-workflow{display:grid;grid-template-columns:1fr 1.1fr;gap:44px}
.case-flow-tabs{display:grid;align-content:start;gap:9px}
.case-flow-tab{border:1px solid var(--line);border-radius:12px;padding:19px;text-align:left;display:flex;align-items:center;gap:17px;background:white;color:var(--ink);transition:background .18s,border-color .18s}
.case-flow-tab:hover{border-color:#aebcff}
.case-flow-tab[aria-selected="true"]{border-color:#b4c2ff;background:#eef1ff}
.case-flow-number{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;font-family:"IBM Plex Mono",monospace;font-size:12px;background:#f2f4f8;color:var(--muted)}
.case-flow-tab[aria-selected="true"] .case-flow-number{background:var(--accent);color:white}
.case-flow-label{font-size:15px;font-weight:600;line-height:1.4}
.case-flow-panels{border:1px solid var(--line);border-radius:20px;background:white;padding:36px;min-height:330px;display:grid;align-items:center;position:relative;overflow:hidden}
.case-flow-panel[hidden]{display:none}
.case-flow-panel h3{font-size:28px;line-height:1.16;letter-spacing:-.04em;font-weight:600;margin:25px 0 16px}
.case-flow-panel>p{color:var(--muted);font-size:16px;line-height:1.75}
.case-flow-result{margin-top:28px;border-top:1px solid var(--line);padding-top:19px;font-size:13px;display:flex;align-items:flex-start;gap:10px;color:var(--ink)}
.case-flow-result .case-feature-icon{color:var(--accent);flex-shrink:0;margin-top:3px}
.case-flow-controls{display:flex;gap:10px;margin-top:26px}
.case-flow-controls button{border:1px solid var(--line);border-radius:8px;background:var(--paper);padding:9px 14px;font-size:12px;color:var(--muted)}
.case-flow-controls button:hover{color:var(--accent);border-color:#b4c2ff}
.case-nojs-flow .case-flow-panel{border-top:1px solid var(--line);padding:24px 0}
.case-nojs-flow .case-flow-panel:first-child{border:0;padding-top:0}
.case-flow-tabs,.case-flow-controls{display:none}
.case-workflow.is-enhanced .case-flow-tabs{display:grid}
.case-workflow.is-enhanced .case-flow-controls{display:flex}
.case-workflow:not(.is-enhanced){grid-template-columns:1fr}
.case-estimate{display:grid;grid-template-columns:1fr 1fr;gap:72px;padding:48px;background:#edf1fc;border:1px solid #dfe6fb;border-radius:24px;align-items:center}
.case-estimate-copy>p{font-size:15px;color:var(--muted);margin-top:20px;max-width:420px}
.case-estimate-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px}
.case-field{display:grid;gap:9px;font-size:12px;color:var(--muted)}
.case-field input{width:100%;min-width:0;border:1px solid #cad3eb;background:white;border-radius:9px;padding:13px;color:var(--ink);font-size:18px}
.case-field small{font-size:10px;line-height:1.4}
.case-estimate-output{border:1px solid #d9e1f5;border-radius:17px;padding:30px;background:white;min-height:275px;display:flex;flex-direction:column;justify-content:center}
.case-estimate-tag{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-family:"IBM Plex Mono",monospace}
.case-estimate-percent{font-size:clamp(54px,5.5vw,76px);font-weight:600;line-height:1.05;letter-spacing:-.06em;color:var(--accent);margin:17px 0 7px}
.case-estimate-output>p{font-size:14px;color:var(--muted)}
.case-estimate-hours{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:14px;color:var(--ink)}
.case-estimate-hours strong{font-weight:600}
.case-estimate-note{font-size:11px!important;line-height:1.6!important;margin-top:20px!important;color:var(--muted)}
.case-estimate-error{font-size:12px;color:#a63645;margin-top:14px;min-height:19px}
.case-method{margin-top:26px;border:1px solid var(--line);border-radius:14px;padding:0 22px;background:white;scroll-margin-top:100px}
.case-method summary{display:flex;justify-content:space-between;gap:20px;align-items:center;list-style:none;cursor:pointer;padding:21px 0;font-size:14px;font-weight:600}
.case-method summary::-webkit-details-marker{display:none}
.case-method summary::after{content:"+";font-size:22px;font-weight:400;color:var(--accent);line-height:1}
.case-method[open] summary::after{content:"−"}
.case-method-body{border-top:1px solid var(--line);padding:24px 0;display:grid;grid-template-columns:1fr 1fr;gap:30px;font-size:13px;color:var(--muted)}
.case-method-body h3{font-size:14px;color:var(--ink);margin-bottom:10px;font-weight:600}
.case-method-body p+p{margin-top:12px}
.case-method-body ul{padding-left:18px;display:grid;gap:9px}
.case-cta{padding:48px;border-radius:24px;background:#152345;color:white;display:flex;align-items:center;justify-content:space-between;gap:44px;margin-top:96px;position:relative;overflow:hidden}
.case-cta>div{position:relative;z-index:1}
.case-cta .case-kicker{color:#a9bcff}
.case-cta h2{font-size:clamp(32px,3.4vw,45px);line-height:1.12;letter-spacing:-.045em;font-weight:600;max-width:630px;margin-top:15px}
.case-cta p{color:#b2bdd3;font-size:15px;max-width:590px;margin-top:18px}
.case-cta .button-primary{flex-shrink:0;min-height:54px;padding-inline:24px}
.case-related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.case-related-card{display:grid;grid-template-columns:136px 1fr;gap:24px;align-items:center;background:white;border:1px solid var(--line);border-radius:16px;padding:19px;transition:transform .2s,border-color .2s}
.case-related-card:hover{transform:translateY(-3px);border-color:#b4c2ff}
.case-related-card>img{aspect-ratio:1;width:100%;object-fit:cover;border-radius:10px}
.case-related-card h3{font-size:19px;letter-spacing:-.025em;line-height:1.2;font-weight:600;margin:10px 0}
.case-related-card p{font-size:12px;color:var(--muted)}
.case-footer{display:flex;gap:25px;flex-wrap:wrap;align-items:center;font-size:11px;color:var(--muted);padding-block:28px;border-top:1px solid var(--line)}
.case-footer img{width:43px;height:auto}
.case-footer a:last-child{margin-left:auto}
.case-index-hero{padding:80px 0 54px;max-width:890px}
.case-index-hero h1{font-size:clamp(48px,6.5vw,86px);font-weight:600;line-height:1.03;letter-spacing:-.055em;margin:22px 0}
.case-index-hero h1 em{font-style:normal;color:var(--accent)}
.case-index-hero p{font-size:19px;color:var(--muted);max-width:620px}
.case-index-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px}
.case-index-card{border:1px solid var(--line);border-radius:20px;background:white;overflow:hidden;transition:transform .22s,border-color .22s;display:flex;flex-direction:column}
.case-index-card:hover{transform:translateY(-4px);border-color:#b4c2ff}
.case-index-art{aspect-ratio:1.6;position:relative;overflow:hidden;background:#eef2fc}
.case-index-art>img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.case-index-card:hover .case-index-art>img{transform:scale(1.025)}
.case-index-copy{padding:25px;display:flex;flex-direction:column;flex:1}
.case-index-copy h2{font-size:26px;font-weight:600;line-height:1.14;letter-spacing:-.035em;margin:14px 0}
.case-index-copy>p{color:var(--muted);font-size:14px;margin-bottom:23px}
.case-index-value{margin-top:auto;display:flex;align-items:baseline;gap:12px;border-top:1px solid var(--line);padding-top:19px}
.case-index-value strong{font-size:30px;letter-spacing:-.045em;font-weight:600;color:var(--accent);white-space:nowrap}
.case-index-value span{font-size:11px;color:var(--muted);line-height:1.4}
.case-index-open{color:var(--accent);font-size:12px;font-weight:600;display:block;margin-top:20px}
.case-missing{padding:100px 0}
.case-missing h1{font-size:48px;font-weight:600;letter-spacing:-.04em;margin:20px 0}
.case-missing p{color:var(--muted);margin-bottom:28px}
@media(prefers-reduced-motion:no-preference){.case-reveal.is-pending{opacity:0;transform:translateY(17px);transition:opacity .65s,transform .65s}.case-reveal.is-visible{opacity:1;transform:none}.case-workflow.is-enhanced .case-flow-panel:not([hidden]){animation:case-appear .25s ease-out}@keyframes case-appear{from{opacity:.2;transform:translateY(5px)}to{opacity:1;transform:none}}}
@media(min-width:1100px){.case-index-card:first-child{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr}.case-index-card:first-child .case-index-art{aspect-ratio:auto;min-height:350px}.case-index-card:first-child .case-index-copy{padding:35px}.case-index-card:first-child h2{font-size:34px}}
@media(max-width:1000px){.case-shell{width:calc(100% - 48px)}.case-hero{gap:32px}.case-hero h1{font-size:43px}.case-estimate{gap:35px;padding:32px}.case-cta{padding:36px}.case-metric{padding:24px}.case-related-card{grid-template-columns:100px 1fr;gap:16px}.case-index-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.case-stack{align-items:flex-start}.case-flow-panels{padding:27px}}
@media(max-width:700px){body.twoi-cases{padding-top:64px}.case-shell{width:calc(100% - 36px)}.case-main{padding-bottom:54px}.case-back{margin-top:24px}.case-hero{grid-template-columns:1fr;padding:32px 0 38px;gap:32px}.case-hero h1{font-size:44px;max-width:540px}.case-lead{font-size:16px}.case-stack{display:block;padding-block:22px}.case-stack-label{max-width:none;margin-bottom:17px}.case-integrations{gap:14px 17px}.case-integration{font-size:12px}.case-section{padding-top:66px;scroll-margin-top:90px}.case-section-heading{display:block;margin-bottom:25px}.case-section-heading h2{font-size:34px}.case-section-heading>p{margin-top:18px}.case-metrics{grid-template-columns:1fr}.case-metric{display:grid;grid-template-columns:130px 1fr;column-gap:18px;padding:25px}.case-metric+.case-metric{border-left:0;border-top:1px solid var(--line)}.case-metric-value{grid-row:span 3;align-self:start;font-size:43px;margin:0}.case-metric h3{font-size:16px}.case-metric p{font-size:12px}.case-metric-note{margin-top:10px!important}.case-before-after{grid-template-columns:1fr;gap:33px;margin-top:35px}.case-workflow{grid-template-columns:1fr;gap:18px}.case-flow-tabs{grid-template-columns:1fr 1fr;gap:8px}.case-flow-tab{padding:13px;gap:10px;align-items:flex-start}.case-flow-number{width:25px;height:25px;border-radius:6px;font-size:10px}.case-flow-label{font-size:12px}.case-flow-panels{padding:25px;min-height:340px}.case-flow-panel h3{font-size:28px;margin-top:20px}.case-flow-panel>p{font-size:15px}.case-estimate{grid-template-columns:1fr;padding:25px;gap:27px;border-radius:18px}.case-estimate h2{font-size:34px}.case-estimate-copy>p{font-size:14px}.case-estimate-output{padding:24px;min-height:230px}.case-estimate-percent{font-size:62px}.case-method{padding-inline:18px}.case-method summary{font-size:13px}.case-method-body{grid-template-columns:1fr;gap:22px}.case-cta{margin-top:66px;display:block;padding:30px 25px;border-radius:18px}.case-cta h2{font-size:34px}.case-cta p{font-size:14px}.case-cta .button-primary{margin-top:25px}.case-related-grid{grid-template-columns:1fr;gap:14px}.case-related-card{grid-template-columns:98px 1fr}.case-related-card h3{font-size:20px}.case-related-card p{font-size:12px}.case-footer{gap:18px}.case-footer a:last-child{width:100%;margin:0}.case-index-hero{padding:48px 0 36px}.case-index-hero h1{font-size:52px}.case-index-hero p{font-size:16px}.case-index-grid{grid-template-columns:1fr;gap:20px}.case-index-art{aspect-ratio:1.7}.case-index-copy{padding:24px}.case-index-copy h2{font-size:28px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.twoi-cases{scroll-behavior:auto}.case-main *{animation:none!important;transition:none!important;scroll-behavior:auto!important}.case-reveal{opacity:1!important;transform:none!important}}
/* A long measurement must not squeeze its explanation on a phone. */
.case-implementation{margin-top:24px;padding:0 26px;border-block:1px solid var(--line);border-radius:0}
.case-implementation>summary{cursor:pointer;padding:25px 0;list-style:none;font-size:14px;color:var(--muted);display:flex;align-items:center;justify-content:space-between;gap:20px}
.case-implementation>summary::-webkit-details-marker{display:none}
.case-implementation>summary::after{content:"+";font-size:23px;color:var(--accent)}
.case-implementation[open]>summary::after{content:"−"}
.case-implementation[open]{padding-bottom:30px}
.case-implementation .case-section-heading h2{font-size:30px}
.case-method-body{grid-template-columns:1fr 1fr}
.case-measurement-list{grid-column:1/-1;display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr));padding-bottom:25px;border-bottom:1px solid var(--line)}
.case-measurement-list h3{grid-column:1/-1;margin:0}
.case-measurement-list strong{font-size:13px;font-weight:500;display:block;color:var(--ink);margin-bottom:8px;line-height:1.5}
.case-measurement-list p{font-size:11px;line-height:1.65}
@media(max-width:600px){.case-implementation{padding-inline:0;margin-top:10px}.case-implementation>summary{font-size:13px}.case-implementation .case-section-heading h2{font-size:27px}.case-measurement-list{grid-template-columns:1fr;gap:16px}.case-measurement-list p{font-size:12px}.case-measurement-list strong{font-size:13px}}
@media(max-width:370px){.case-estimate-fields{grid-template-columns:1fr}.case-hero .case-audience{font-size:11px}}

/* Hero and story art float on the page like the home "how it works" scenes: no frames, no nested cards. */
.case-main{--case-ease:cubic-bezier(.22,1,.36,1);--case-fade:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(transparent,#000 8%,#000 92%,transparent)}
/* Allow button shadows and focus outlines to extend beyond the hero column. */
.case-hero{gap:48px;padding-block:52px 64px;overflow:visible}
.case-hero .case-lead{max-width:520px;font-size:17px}
.case-hero-result{display:flex;align-items:baseline;gap:16px;max-width:520px;margin-top:28px!important;padding-top:22px;border-top:1px solid var(--line)}
.case-hero-result strong{font-size:clamp(40px,4.2vw,58px);font-weight:600;line-height:1;letter-spacing:-.055em;color:var(--accent);white-space:nowrap}
.case-hero-result span{font-size:14px;line-height:1.45;color:var(--muted);max-width:230px}
.case-art{position:relative;isolation:isolate;min-width:0;aspect-ratio:3/2}
.case-art-glow,.case-story-visual::before{content:"";position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle,rgba(93,124,255,.17),rgba(235,239,255,.08) 48%,transparent 72%);filter:blur(26px);z-index:-1;pointer-events:none}
.case-art-main{--case-fade:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.case-art-main,.case-story-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;-webkit-mask-image:var(--case-fade);-webkit-mask-composite:source-in;mask-image:var(--case-fade);mask-composite:intersect}
.case-float{position:absolute;height:auto;aspect-ratio:1;object-fit:cover;pointer-events:none;-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent);mask-image:radial-gradient(closest-side,#000 62%,transparent)}
.case-float--hero-bead{width:14%;left:0;bottom:4%}
.case-art-tile{position:absolute;width:clamp(44px,4.4vw,60px);aspect-ratio:1;display:grid;place-items:center;border-radius:28%;background:#fff;box-shadow:0 18px 30px -18px rgba(40,68,134,.4),inset 0 -2px 0 rgba(45,80,231,.06)}
.case-art-tile img{width:60%;height:60%;object-fit:contain}
.case-art-tile:nth-of-type(1){left:6%;top:12%}
.case-art-tile:nth-of-type(2){right:5%;top:56%}
.case-art-tile:nth-of-type(3){left:28%;bottom:0}

/* Story: one line down the middle, nodes light up as the reader passes them. */
.case-story{padding-top:104px;scroll-margin-top:96px;overflow-x:clip}
.case-story-heading{max-width:760px;margin:0 auto 28px;text-align:center}
.case-story-heading h2{font-size:clamp(32px,3.6vw,50px);font-weight:600;line-height:1.08;letter-spacing:-.045em;margin-top:18px;text-wrap:balance}
.case-story-track{position:relative}
.case-story-line{position:absolute;left:50%;top:var(--line-top,0);height:var(--line-height,0);border-left:1px dashed var(--line-strong);display:none}
.case-story-line>i{position:absolute;left:-1px;top:0;width:1px;height:100%;background:var(--accent);transform:scaleY(var(--story-progress,0));transform-origin:top}
.case-story-track.is-enhanced .case-story-line{display:block}
.case-story-chapter{display:grid;grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr);align-items:center;min-height:clamp(460px,76svh,700px);padding-block:28px;scroll-margin-top:90px}
.case-story-node{grid-column:2;grid-row:1;justify-self:center;position:relative;z-index:1;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:500;box-shadow:0 0 0 10px var(--paper);transition:background .4s var(--case-ease),box-shadow .4s var(--case-ease)}
.case-story-chapter.is-reached .case-story-node{background:var(--accent);box-shadow:0 0 0 10px var(--paper),0 0 0 16px #edf1ff}
.case-story-visual{grid-row:1;position:relative;isolation:isolate;width:min(100%,480px);aspect-ratio:1;justify-self:center}
.case-story-copy{grid-row:1;min-width:0;max-width:470px;padding-inline:clamp(8px,2.4vw,36px)}
.case-story-chapter:nth-of-type(odd) .case-story-visual{grid-column:1}
.case-story-chapter:nth-of-type(odd) .case-story-copy{grid-column:3}
.case-story-chapter:nth-of-type(even) .case-story-visual{grid-column:3}
.case-story-chapter:nth-of-type(even) .case-story-copy{grid-column:1;justify-self:end}
.case-chapter-label{display:block;color:var(--accent);font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.case-story-copy h3{font-size:clamp(28px,2.8vw,40px);font-weight:600;line-height:1.08;letter-spacing:-.04em;margin-top:18px;text-wrap:balance}
.case-title-line{display:block;text-wrap:balance}
.case-hub-tile img[src$="/headhunter.png"],.case-hub-tile img[src$="/headhunter.svg"]{border-radius:28%}
.case-story-copy>p{font-size:16px;line-height:1.75;color:var(--muted);margin-top:20px;text-wrap:pretty}
.case-story-copy>.case-chapter-takeaway{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;color:#3150ad;line-height:1.5;margin-top:22px}
.case-chapter-takeaway::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:var(--accent)}
.case-story-copy>.case-calculation-source{font-size:12px;line-height:1.6;margin-top:18px}
.case-story-links{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;font-size:13px;font-weight:600}
.case-story-links a{color:var(--accent)}
.case-story-links a:not(.case-inline-link){color:var(--muted);font-weight:500;text-decoration:underline;text-underline-offset:4px}
.case-inline-link{display:inline-flex;gap:8px;align-items:center;padding-block:6px;border-bottom:1px solid #c7d1f8}
.case-inline-link:hover{border-color:var(--accent)}

/* Stage 1: systems plug into the 2И hub. Socket centres are measured on core-hub.webp. */
.case-hub{position:absolute;inset:0}
.case-hub-system{position:absolute;left:var(--x);top:var(--y);width:0;height:0}
.case-hub-system:nth-of-type(1){--x:16.7%;--y:18.5%}
.case-hub-system:nth-of-type(2){--x:85%;--y:18.5%}
.case-hub-system:nth-of-type(3){--x:13.3%;--y:71.5%}
.case-hub-system:nth-of-type(4){--x:86.7%;--y:71.5%}
.case-hub-tile{position:absolute;left:0;top:0;width:clamp(48px,14.5cqi,72px);aspect-ratio:1;display:grid;place-items:center;border-radius:28%;background:#fff;box-shadow:0 18px 30px -16px rgba(40,68,134,.42),inset 0 -2px 0 rgba(45,80,231,.07);transform:translate(-50%,-62%)}
.case-hub-tile img{width:58%;height:58%;object-fit:contain}
.case-hub-name{position:absolute;left:0;top:calc(clamp(48px,14.5cqi,72px) * .45);transform:translateX(-50%);white-space:nowrap;text-align:center;font-size:11px;line-height:1.3;color:#56627a;font-weight:500;background:rgba(248,249,252,.9);padding:2px 7px;border-radius:6px}
.case-hub-name b{display:block;font-size:10px;font-weight:500;color:var(--accent)}
.case-hub-system--spare .case-hub-tile{background:rgba(255,255,255,.55);border:1.5px dashed #c4cde6;box-shadow:none;color:#9aa7c7;font-size:24px;font-weight:300;line-height:1}
.case-story-visual--1{container-type:inline-size}
/* Stage 2: the command is typed, then the agreed steps light up. */
.case-story-visual--2,.case-story-visual--4{display:grid;place-items:center}
.case-command{position:relative;z-index:1;width:min(100%,480px)}
.case-launch-label{display:block;margin:0 0 14px;color:var(--muted);font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.case-command .case-launch-label{margin-left:20px}
.case-command-bar{display:flex;align-items:center;gap:14px;padding:10px 10px 10px 20px;border-radius:30px;background:rgba(255,255,255,.84);border:1px solid #e1e7f5;box-shadow:0 26px 50px -30px rgba(40,68,134,.4);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.case-command-bar>img{width:30px;height:auto;flex:none}
.case-command-text{flex:1;min-width:0;min-height:1.5em;font-size:15px;font-weight:500;line-height:1.5;color:var(--ink)}
.case-command-send{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:#fff;transition:transform .3s var(--case-ease)}
.case-main .case-command-flow{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:28px 0 0;padding:0 12px}
.case-command-flow li{position:relative;padding:22px 10px 0 0;overflow-wrap:anywhere;font-size:12px;line-height:1.4;color:var(--muted)}
.case-command-flow li::before{content:"";position:absolute;left:0;top:0;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--line-strong);z-index:1;transition:background .35s,border-color .35s;transition-delay:calc(var(--step) * .45s)}
.case-command-flow li:not(:last-child)::after{content:"";position:absolute;left:14px;right:4px;top:6px;height:1px;background:var(--line-strong);transition:background .35s;transition-delay:calc(var(--step) * .45s + .2s)}
.case-story-visual--2.is-typed .case-command-flow li::after{background:#9fb0f3}
.case-story-visual--2.is-typed .case-command-flow li{color:var(--ink)}
.case-story-visual--2.is-typed .case-command-flow li::before{background:var(--accent);border-color:var(--accent)}
.case-float--glass{width:44%;right:-4%;top:2%;opacity:.9}
.case-float--bead{width:30%;left:0;bottom:4%}

/* Stages 0 and 3: before and after share one scene. */
.case-float--sheet{width:20%;right:2%;top:6%;transform:rotate(14deg)}
.case-float--sheet-2{width:15%;right:auto;top:auto;left:4%;bottom:6%;transform:rotate(-18deg)}
.case-float--check{width:22%;right:2%;top:4%}

/* Stage 4: the result is the largest thing on the page. */
.case-result{position:relative;z-index:1;width:min(100%,420px)}
.case-result-value{display:block;font-size:clamp(60px,7vw,104px);font-weight:600;line-height:.95;letter-spacing:-.06em;color:var(--accent);white-space:nowrap}
.case-result-value sup{font-size:.3em;margin-left:1px;color:var(--muted);vertical-align:top;letter-spacing:0}
.case-result-label{display:block;font-size:14px;line-height:1.5;color:var(--muted);margin-top:16px}
.case-result-bars{display:grid;gap:18px;margin-top:32px}
.case-result-bars>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:baseline}
.case-result-bars span{font-size:12px;color:var(--muted);line-height:1.4}
.case-result-bars b{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap}
.case-result-bars .is-2i b{color:var(--accent)}
.case-result-bars i{grid-column:1/-1;position:relative;height:6px;border-radius:6px;background:#e4e8f2;overflow:hidden}
.case-result-bars i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--bar);border-radius:inherit;background:#aeb8cd;transform-origin:left;transition:transform 1.2s var(--case-ease) .2s}
.case-result-bars .is-2i i::after{background:var(--accent)}
.case-main .case-result-extra{display:flex;align-items:baseline;gap:14px;margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}
.case-result-extra b{font-size:30px;font-weight:600;letter-spacing:-.04em;white-space:nowrap}
.case-result-extra span{font-size:13px;line-height:1.45;color:var(--muted)}
.case-float--result{width:20%;right:0;top:6%}
.case-float--result-bead{width:22%;left:-2%;bottom:2%}

/* Motion only after JS has taken over, and only when the system allows it. */
@media(prefers-reduced-motion:no-preference){
 .case-story-track.is-enhanced .case-story-visual,.case-story-track.is-enhanced .case-story-copy{transition:opacity .8s var(--case-ease),transform 1s var(--case-ease)}
 .case-story-track.is-enhanced .case-story-chapter:not(.is-seen) .case-story-visual{opacity:0;transform:translateY(32px) scale(.97)}
 .case-story-track.is-enhanced .case-story-chapter:not(.is-seen) .case-story-copy{opacity:0;transform:translateY(24px)}
 .case-story-track.is-enhanced .case-story-copy{transition-delay:.08s}
 .case-story-track.is-enhanced .case-story-chapter:not(.is-seen) .case-hub-system{opacity:0;transform:translate(calc(-50% + (50% - var(--x)) * -.6),calc(-34% + (50% - var(--y)) * -.6)) scale(.7)}
 .case-hub-system{transition:opacity .7s var(--case-ease),transform 1s var(--case-ease);transition-delay:calc(.35s + var(--socket) * .14s)}
 .case-story-track.is-enhanced .case-story-chapter:not(.is-seen) .case-result-bars i::after{transform:scaleX(0)}
 .case-story-chapter.is-active .case-command-text.is-typing::after{content:"";display:inline-block;width:2px;height:1.1em;margin-left:2px;vertical-align:-.15em;background:var(--accent);animation:case-caret .8s steps(1) infinite}
 .case-story-visual--2.is-typed .case-command-send{transform:scale(.9)}
 .case-art-main,.case-story-art{animation:case-bob 7s ease-in-out infinite}
 /* Move the hub, sockets, captions and travelling signals as one assembly. */
 .case-hub{animation:case-bob 7s ease-in-out infinite}
 .case-hub>.case-story-art{animation:none}
 .case-float,.case-art-tile{animation:case-drift 6s ease-in-out infinite}
 .case-float--bead,.case-art-tile:nth-of-type(2){animation-duration:8s;animation-delay:-2s}
 .case-float--sheet-2,.case-float--glass,.case-art-tile:nth-of-type(3){animation-duration:9s;animation-delay:-4s}
 .case-story-chapter.is-active .case-story-node::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);animation:case-pulse 1.8s ease-out infinite;z-index:-1}
 @keyframes case-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
 @keyframes case-drift{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -10px;rotate:3deg}}
 @keyframes case-pulse{from{transform:scale(1);opacity:.35}to{transform:scale(1.75);opacity:0}}
 @keyframes case-caret{50%{opacity:0}}
}

@media(max-width:1100px){.case-story-chapter{grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr)}.case-story-copy>p{font-size:15px}.case-command-text{font-size:15px}}
/* Phones and short screens: art sits above its own text, no sticky or side-by-side layout. */
@media(max-width:899px),(max-height:500px){
 .case-story{padding-top:64px}
 .case-story-heading{text-align:left;margin-bottom:8px}
 .case-story-heading h2{font-size:clamp(28px,6vw,40px)}
 .case-story-track.is-enhanced .case-story-line{display:none}
 .case-story-chapter{grid-template-columns:minmax(0,1fr);min-height:0;padding-block:36px;gap:20px}
 /* Reserve 16px for the 40px marker's pulse at its maximum scale (1.75).
    The story clips decorative overflow, so the halo must stay inside it. */
 .case-story-chapter .case-story-node{grid-column:1;grid-row:1;justify-self:start;margin-inline-start:16px;width:40px;height:40px;font-size:11px;box-shadow:none}
 .case-story-chapter.is-reached .case-story-node{box-shadow:0 0 0 6px #edf1ff}
 .case-story-chapter:nth-of-type(n) .case-story-visual{grid-column:1;grid-row:2;width:min(100%,420px)}
 .case-story-chapter:nth-of-type(n) :is(.case-story-visual--2,.case-story-visual--4){aspect-ratio:auto;min-height:280px;padding-block:48px}
 .case-story-visual--2 .case-float--bead{display:none}
 .case-story-chapter:nth-of-type(n) .case-story-copy{grid-column:1;grid-row:3;justify-self:start;padding:0;max-width:560px}
}
@media(max-width:700px){.case-art{width:100%;max-width:520px;margin-inline:auto}.case-hero-result strong{font-size:44px}}
@media(max-width:600px){
 .case-hero{gap:28px;padding-block:32px 40px}.case-hero h1{font-size:40px;line-height:1.06}.case-hero .case-lead{font-size:16px}
 .case-hero-result{gap:12px}.case-hero-result span{font-size:13px}
 .case-story-copy h3{font-size:28px}
 .case-command-bar{padding:8px 8px 8px 16px;gap:10px}.case-command-text{font-size:14px}.case-command-send{width:36px;height:36px}
 .case-command-flow li{font-size:11px}
 .case-result-value{font-size:clamp(52px,17vw,76px)}
 .case-hub-name{font-size:10px}
}
@media(max-width:370px){.case-hero h1{font-size:34px}.case-hero-result{display:block}.case-hero-result span{display:block;margin-top:8px;max-width:none}.case-command .case-launch-label{margin-left:12px}}
@media(prefers-reduced-motion:reduce){.case-main *,.case-main *::before,.case-main *::after{animation:none!important;transition:none!important}}
/* Case numbers: every measured value next to what it does and does not mean. */
.case-numbers{padding-top:96px;scroll-margin-top:96px}
.case-numbers-head h2{font-size:clamp(30px,3.2vw,44px);font-weight:600;line-height:1.1;letter-spacing:-.045em;margin-top:16px;text-wrap:balance}
.case-numbers-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 44px;margin-top:40px}
.case-number{padding-top:22px;border-top:1px solid var(--line-strong)}
.case-number:first-child{border-top:2px solid var(--accent);padding-top:21px}
.case-number strong{display:block;font-size:clamp(38px,3.8vw,54px);font-weight:600;line-height:1;letter-spacing:-.055em;color:var(--accent);white-space:nowrap}
.case-number h3{font-size:16px;font-weight:600;line-height:1.35;margin-top:14px}
.case-number p{font-size:14px;line-height:1.65;color:var(--muted);margin-top:10px}
.case-main .case-numbers-source{max-width:880px;margin-top:36px;font-size:13px;line-height:1.7;color:var(--muted)}
.case-numbers-source span{color:var(--ink);font-weight:500}
.case-numbers+.case-implementation{margin-top:48px}
@media(max-width:800px){.case-numbers{padding-top:64px}.case-numbers-list{grid-template-columns:1fr;gap:30px;margin-top:28px}}

/* Launch scenes: each case starts its work its own way. Final state is the default; motion only runs after JS. */
.case-launch{position:relative;z-index:1;width:min(100%,420px)}
.case-schedule,.case-sift{text-align:center}
.case-schedule-time{display:block;font-size:clamp(84px,9vw,128px);font-weight:500;line-height:1;letter-spacing:-.06em;color:var(--ink)}
.case-schedule-time i{font-style:normal;color:var(--accent)}
.case-main .case-schedule-days{list-style:none;display:flex;justify-content:center;gap:8px;margin:28px 0 0;padding:0}
.case-schedule-days li{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;font-size:12px;font-weight:600;background:var(--accent);color:#fff;box-shadow:0 12px 22px -14px rgba(45,80,231,.7);transition:background .35s,color .35s,box-shadow .35s;transition-delay:calc(var(--step) * .12s)}
.case-schedule-days li.is-off{background:transparent;color:#aab3c5;box-shadow:none}
.case-main :is(.case-schedule-jobs,.case-sift-criteria){list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:24px 0 0;padding:0}
:is(.case-schedule-jobs,.case-sift-criteria) li{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.88);border:1px solid #e1e7f5;font-size:13px;font-weight:500;color:var(--ink);box-shadow:0 14px 28px -22px rgba(40,68,134,.45);transition:opacity .5s var(--case-ease),transform .6s var(--case-ease);transition-delay:calc(.9s + var(--step) * .15s)}
.case-sift-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;width:min(100%,320px);margin:0 auto}
.case-sift-grid i{aspect-ratio:1;border-radius:50%;background:#cfd7ea;opacity:.35;transform:scale(.7);transition:background .5s,opacity .5s,transform .6s var(--case-ease);transition-delay:calc(1.2s + var(--d) * 14ms)}
.case-sift-grid i.is-picked{background:var(--accent);opacity:1;transform:scale(1.15);box-shadow:0 6px 12px -6px rgba(45,80,231,.8)}
.case-main .case-sift-caption{font-size:14px;color:var(--muted);margin-top:18px}
.case-sift-caption b{color:var(--accent);font-weight:600}
.case-main .case-ledger ul{list-style:none;display:grid;gap:14px;margin:0;padding:0}
.case-ledger li{display:grid;grid-template-columns:128px minmax(0,1fr);align-items:center;gap:14px;font-size:13px;font-weight:500;color:var(--ink)}
.case-ledger li i{position:relative;height:10px;border-radius:6px;background:#e4e8f2;overflow:hidden}
.case-ledger li i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--fill);border-radius:inherit;background:linear-gradient(90deg,#9db0f7,var(--accent));transform-origin:left;transition:transform .9s var(--case-ease);transition-delay:calc(var(--step) * .15s)}
.case-main .case-ledger-note{font-size:12px;color:var(--muted);margin-top:22px}
.case-command-stamp{display:inline-flex;align-items:center;gap:8px;margin:18px 0 0 12px;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--accent)}
.case-command-stamp::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* Result scenes: one idea per case, drawn from the case numbers. */
.case-morning{margin-top:32px}
.case-morning-track{position:relative;height:14px;border-radius:8px;background:#e4e8f2;overflow:hidden}
.case-morning-track i{position:absolute;inset:0 auto 0 0;border-radius:inherit;transform-origin:left;transition:transform 1.1s var(--case-ease)}
.case-morning-manual{width:100%;background:repeating-linear-gradient(135deg,#cdd4e4 0 6px,#e4e8f2 6px 12px)}
.case-morning-2i{width:var(--bar);min-width:12px;background:var(--accent);transition-delay:.5s!important}
.case-morning-scale{display:flex;justify-content:space-between;margin-top:10px;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted)}
.case-main .case-morning p{font-size:13px;line-height:1.5;color:var(--muted);margin-top:14px}
.case-morning b{color:var(--accent);font-weight:600}
.case-narrow{display:flex;align-items:center;gap:14px;margin-top:32px}
.case-narrow>div{display:grid;gap:4px;flex:none}
.case-narrow b{font-size:26px;font-weight:600;letter-spacing:-.03em;white-space:nowrap}
.case-narrow span{font-size:12px;color:var(--muted)}
.case-narrow .is-2i b{color:var(--accent)}
.case-narrow>i{flex:1;min-width:40px;height:44px;background:linear-gradient(90deg,#dde3f1,#9fb1f5);clip-path:polygon(0 0,100% 38%,100% 62%,0 100%);transform-origin:left;transition:transform 1s var(--case-ease) .3s}
.case-main .case-result-note{font-size:13px;line-height:1.5;color:var(--muted);margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.case-result-note b{color:var(--ink);font-weight:600}
.case-merge{display:flex;align-items:center;gap:14px;margin-top:34px}
.case-merge-dots{display:grid;grid-template-columns:repeat(7,14px);gap:6px;flex:none}
.case-merge-dots i{width:14px;height:14px;border-radius:4px;background:#c3cdf0;transition:transform .5s var(--case-ease),opacity .5s;transition-delay:calc(var(--d) * 70ms)}
.case-merge-line{flex:1;min-width:24px;height:2px;background:linear-gradient(90deg,#c3cdf0,var(--accent));transform-origin:left;transition:transform .8s var(--case-ease) .6s}
.case-merge-report,.case-sources-result{flex:none;padding:9px 14px;border-radius:999px;background:var(--accent);color:#fff;font-size:12px;font-weight:600;white-space:nowrap;box-shadow:0 14px 26px -16px rgba(45,80,231,.8);transition:opacity .5s,transform .6s var(--case-ease);transition-delay:1.1s}
.case-sources{display:flex;align-items:center;gap:10px;margin-top:32px}
.case-sources-tile{width:52px;height:52px;flex:none;display:grid;place-items:center;border-radius:28%;background:#fff;box-shadow:0 16px 28px -18px rgba(40,68,134,.5);transition:transform .7s var(--case-ease),opacity .5s}
.case-sources-tile img{width:60%;height:60%;object-fit:contain}
.case-sources-plus{color:#9aa7c7;font-size:18px}
.case-sources-line{flex:1;min-width:24px;height:2px;background:linear-gradient(90deg,#c3cdf0,var(--accent));transform-origin:left;transition:transform .8s var(--case-ease) .5s}

@media(prefers-reduced-motion:no-preference){
 .case-story-track.is-enhanced .case-story-visual--2:not(.is-typed) .case-schedule-days li:not(.is-off){background:#fff;color:var(--ink);box-shadow:0 10px 20px -16px rgba(40,68,134,.5)}
 .case-story-track.is-enhanced .case-story-visual--2:not(.is-typed) :is(.case-schedule-jobs,.case-sift-criteria) li{opacity:0;transform:translateY(10px)}
 .case-story-track.is-enhanced .case-story-visual--2:not(.is-typed) .case-sift-grid i{background:#cfd7ea;opacity:1;transform:none;box-shadow:none}
 .case-story-track.is-enhanced .case-story-visual--2:not(.is-typed) .case-ledger li i::after{transform:scaleX(0)}
 .case-story-visual--2.is-typed .case-schedule-time i{animation:case-caret 1.2s steps(1) 3}
 .case-story-visual--2.is-typed .case-command--refresh .case-command-send svg{animation:case-spin 1s var(--case-ease) 2}
 .case-story-track.is-enhanced .case-story-chapter:not(.is-seen) :is(.case-morning-track i,.case-narrow>i,.case-merge-line,.case-sources-line){transform:scaleX(0)}
 .case-story-track.is-enhanced .case-story-chapter:not(.is-seen) .case-merge-dots i{transform:scale(.3);opacity:0}
 .case-story-track.is-enhanced .case-story-chapter:not(.is-seen) :is(.case-merge-report,.case-sources-result){opacity:0;transform:translateX(-12px)}
 .case-story-track.is-enhanced .case-story-chapter:not(.is-seen) .case-sources-tile:first-child{transform:translateX(-24px);opacity:0}
 .case-story-track.is-enhanced .case-story-chapter:not(.is-seen) .case-sources-tile:nth-child(3){transform:translateY(18px);opacity:0}
 @keyframes case-spin{to{transform:rotate(360deg)}}
}
@media(max-width:600px){
 .case-schedule-days li{width:34px;height:34px;font-size:11px}
 .case-main .case-schedule-days{gap:6px}
 .case-ledger li{grid-template-columns:110px minmax(0,1fr);font-size:12px}
 .case-narrow b{font-size:22px}
 .case-merge{flex-wrap:wrap}.case-merge-line{min-width:40px}
 .case-sources-tile{width:44px;height:44px}
}
.case-story-visual--2 .case-float--glass{width:28%;right:-8%;top:-6%;opacity:.8}

/* Scale pass: scenes were too small for a full-screen chapter. */
.case-stack-label{max-width:none}
@media(min-width:900px) and (min-height:501px){.case-story-chapter{grid-template-columns:minmax(0,1.12fr) 96px minmax(0,1fr);min-height:clamp(540px,82svh,780px)}.case-story-visual{width:min(100%,600px)}.case-story-chapter .case-story-visual--1{width:min(100%,540px)}}
.case-story-copy{max-width:500px}
.case-story-copy h3{font-size:clamp(30px,3.3vw,48px)}
.case-story-copy>p{font-size:17px}
.case-story-copy>.case-chapter-takeaway{font-size:14px}
.case-launch,.case-command{width:min(100%,500px)}
.case-launch-label{font-size:12px}
.case-command-bar{padding:14px 12px 14px 22px}
.case-command-text{font-size:17px}
.case-command-send{width:48px;height:48px}
.case-command-flow li{font-size:14px}
.case-command-reply{display:flex;align-items:center;gap:14px;margin-top:26px;margin-left:auto;width:fit-content;max-width:100%;padding:14px 20px 14px 16px;border-radius:20px 20px 6px 20px;background:var(--accent);color:#fff;box-shadow:0 22px 40px -22px rgba(45,80,231,.85);transition:opacity .5s,transform .7s var(--case-ease);transition-delay:1.6s}
.case-command-reply img{width:22px;height:22px;filter:brightness(0) invert(1)}
.case-command-reply span{display:grid;gap:2px;font-size:13px;line-height:1.35;color:#dfe5ff}
.case-command-reply b{font-size:16px;font-weight:600;color:#fff}
.case-schedule-time{font-size:clamp(96px,10vw,148px)}
.case-schedule-days li{width:48px;height:48px;font-size:14px}
:is(.case-schedule-jobs,.case-sift-criteria) li{font-size:15px;padding:10px 16px}
.case-sift-grid{width:min(calc(100% - 16px),400px);gap:12px}
.case-main .case-sift-caption{font-size:16px}
.case-main .case-ledger ul{gap:20px}
.case-ledger li{grid-template-columns:160px minmax(0,1fr);font-size:16px}
.case-ledger li i{height:16px;border-radius:9px}
.case-main .case-ledger-note{font-size:14px;margin-top:26px}
.case-result{width:min(100%,500px)}
.case-result-value{font-size:clamp(68px,8vw,120px)}
.case-result-value sup{margin-left:0;vertical-align:.9em}
.case-result-label{font-size:16px}
.case-result-bars span{font-size:14px}.case-result-bars b{font-size:16px}.case-result-bars i{height:10px}
.case-morning-track{height:18px}.case-morning-scale{font-size:13px}.case-main .case-morning p{font-size:15px}
.case-narrow b{font-size:32px}.case-narrow span{font-size:14px}.case-narrow>i{height:56px}
.case-main .case-result-note{font-size:15px}
.case-merge-dots{grid-template-columns:repeat(7,18px);gap:7px}.case-merge-dots i{width:18px;height:18px;border-radius:5px}
.case-merge-report,.case-sources-result{font-size:14px;padding:11px 18px}
.case-sources-tile{width:62px;height:62px}
.case-hub-name{font-size:13px}.case-hub-name b{font-size:12px}
.case-hub-tile{width:clamp(56px,15cqi,84px)}
.case-hub-system:not(.case-hub-system--spare) .case-hub-tile{background:transparent;border-radius:0;box-shadow:none;transform:translate(-50%,-82%)}
.case-hub-system:not(.case-hub-system--spare) .case-hub-tile img{width:64%;height:64%;filter:drop-shadow(0 5px 10px rgba(45,80,231,.12))}
.case-hub-system:not(.case-hub-system--spare) .case-hub-tile img[src$="/1c.png"]{background:#fff;border-radius:28%;box-shadow:0 8px 20px -12px rgba(40,68,134,.28);filter:none}
/* Data runs along each connected channel into the hub. Socket positions as plain numbers for container units. */
.case-hub-system:nth-of-type(1){--xn:16.7;--yn:18.5}.case-hub-system:nth-of-type(2){--xn:85;--yn:18.5}.case-hub-system:nth-of-type(3){--xn:13.3;--yn:71.5}.case-hub-system:nth-of-type(4){--xn:86.7;--yn:71.5}
.case-hub-flow{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(45,80,231,.16),0 0 16px 2px rgba(80,110,255,.7);opacity:0}
@media(prefers-reduced-motion:no-preference){
 .case-story-chapter.is-active .case-hub-system:not(.case-hub-system--spare) .case-hub-flow{animation:case-flow 2.6s cubic-bezier(.45,0,.25,1) infinite;animation-delay:calc(1.2s + var(--socket) * .45s)}
 .case-story-chapter.is-active .case-hub-flow--late{animation-delay:calc(2.5s + var(--socket) * .45s)!important}
 @keyframes case-flow{0%{opacity:0;transform:translate(0,0) scale(.6)}15%{opacity:1}80%{opacity:1;transform:translate(calc((50 - var(--xn)) * 1cqi),calc((47 - var(--yn)) * 1cqi)) scale(1)}100%{opacity:0;transform:translate(calc((50 - var(--xn)) * 1cqi),calc((47 - var(--yn)) * 1cqi)) scale(.4)}}
 .case-story-track.is-enhanced .case-story-visual--2:not(.is-typed) .case-command-reply{opacity:0;transform:translateY(14px) scale(.96)}
}
@media(max-width:899px),(max-height:500px){.case-story-chapter{min-height:0}.case-story-chapter:nth-of-type(n) .case-story-visual{width:min(100%,460px)}}
@media(max-width:600px){
 .case-command-text{font-size:15px}.case-command-send{width:40px;height:40px}.case-command-flow li{font-size:12px}
 .case-schedule-time{font-size:84px}.case-schedule-days li{width:36px;height:36px;font-size:12px}
 :is(.case-schedule-jobs,.case-sift-criteria) li{font-size:13px;padding:8px 13px}
 .case-ledger li{grid-template-columns:118px minmax(0,1fr);font-size:14px}
 .case-result-value{font-size:clamp(56px,17vw,80px)}
 .case-narrow b{font-size:24px}.case-narrow>i{height:44px}
 .case-merge-dots{grid-template-columns:repeat(7,14px);gap:5px}.case-merge-dots i{width:14px;height:14px}
 .case-sources-tile{width:48px;height:48px}
 .case-hub-name{font-size:11px}.case-hub-name b{font-size:10px}
}
/* One centred caption geometry for every logo, including narrow scenes.
   Tile bottom is 38% of its height below the socket; leave a consistent gap. */
.case-hub-name{top:calc(clamp(56px,15cqi,84px) * .38 + 10px);width:min(144px,26cqi);max-width:none;white-space:normal;text-align:center;transform:translateX(-50%);font-size:clamp(10px,2.4cqi,13px);line-height:1.4;background:none;padding:0;border-radius:0}
.case-hub-name b{margin-top:4px;font-size:clamp(10px,2.2cqi,12px);line-height:1.3}
:is(.case-hub--three,.case-hub--two) .case-hub-system:nth-of-type(1){--x:15%;--y:15%;--xn:15;--yn:15}
:is(.case-hub--three,.case-hub--two) .case-hub-system:nth-of-type(2){--x:85%;--y:15%;--xn:85;--yn:15}
:is(.case-hub--three,.case-hub--two) .case-hub-system:nth-of-type(3){--x:50%;--y:78%;--xn:50;--yn:78}
:is(.case-hub--three,.case-hub--two) .case-hub-name{top:calc(clamp(56px,15cqi,84px) * .38 + 10px + 4cqi)}
.case-hub-brand{position:absolute;left:50%;top:36%;width:8.92%;height:auto;transform:translate(-50%,-50%) scaleY(.82);filter:brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,25,130,.3));pointer-events:none}
:is(.case-hub--three,.case-hub--two)>.case-story-art{filter:saturate(.65) contrast(.9) brightness(1.04)}
/* Trace the visible connector centre lines, from socket joint to hub joint. */
:is(.case-hub--three,.case-hub--two) .case-hub-system:nth-of-type(1){--flow-x1:21.8;--flow-y1:20.3;--flow-x2:36.8;--flow-y2:31.7}
:is(.case-hub--three,.case-hub--two) .case-hub-system:nth-of-type(2){--flow-x1:78.2;--flow-y1:20.3;--flow-x2:63.2;--flow-y2:31.7}
:is(.case-hub--three,.case-hub--two) .case-hub-system:nth-of-type(3){--flow-x1:50;--flow-y1:69.3;--flow-x2:50;--flow-y2:52}
:is(.case-hub--three,.case-hub--two) .case-hub-flow{width:1cqi;height:1cqi;left:-.5cqi;top:-.5cqi;box-shadow:0 0 0 .3cqi rgba(45,80,231,.16),0 0 1cqi rgba(80,110,255,.65)}
@media(prefers-reduced-motion:no-preference){
 .case-story-chapter.is-active :is(.case-hub--three,.case-hub--two) .case-hub-system:not(.case-hub-system--spare) .case-hub-flow{animation-name:case-channel-flow;animation-timing-function:linear}
 @keyframes case-channel-flow{
  0%{opacity:0;transform:translate(calc((var(--flow-x1) - var(--xn)) * 1cqi),calc((var(--flow-y1) - var(--yn)) * 1cqi))}
  12%,85%{opacity:1}
  100%{opacity:0;transform:translate(calc((var(--flow-x2) - var(--xn)) * 1cqi),calc((var(--flow-y2) - var(--yn)) * 1cqi))}
 }
}

/* Responsive layout shared by standalone cases and the home-page overlay.
   Keep this after the scene scale rules so desktop sizes do not override phones. */
body.twoi-cases{padding-top:72px}
.case-shell{width:min(1280px,calc(100% - clamp(32px,6vw,80px)))}
.case-main :is(h1,h2,h3,p,li,a,summary){overflow-wrap:break-word}
.case-main :is(.case-hero-copy,.case-metric,.case-number,.case-result,.case-launch,.case-command,.case-flow-tab,.case-flow-panel,.case-related-card>div,.case-index-copy){min-width:0}
.case-hero{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(24px,4vw,48px)}
.case-hero-result{flex-wrap:wrap;gap:10px 16px}
.case-hero-result strong{font-size:clamp(32px,4.2vw,58px)}
.case-hero-result span{flex:1 1 150px}
.case-actions :is(.button-primary,.button-secondary),.case-cta .button-primary{max-width:100%;white-space:normal;text-align:center}
.case-integration img,.case-command-reply img{flex-shrink:0}
.case-integration,.case-feature{min-width:0;max-width:100%}
.case-story-visual{min-width:0}
.case-story-visual--2 .case-float--glass{right:0;top:0}
.case-result,.case-number{container-type:inline-size}
.case-result-value{font-size:clamp(44px,18cqi,120px)}
.case-number strong{font-size:clamp(30px,12cqi,54px)}
.case-main .case-result-extra{flex-wrap:wrap}
.case-command-bar{gap:clamp(8px,1.2vw,14px);padding:12px;border-radius:24px}
.case-command-text{overflow-wrap:break-word}
.case-command-reply{max-width:100%;padding:12px 16px;gap:10px}
.case-command-reply span{min-width:0}
.case-command-reply b{overflow-wrap:anywhere}
.case-main .case-schedule-days{gap:clamp(4px,1vw,8px)}
.case-schedule-days li{flex:0 1 48px;min-width:0;width:auto;height:auto;aspect-ratio:1}
.case-sources{display:grid;grid-template-columns:auto auto auto minmax(12px,1fr);gap:10px}
.case-sources-result{grid-column:1/-1;justify-self:end;max-width:100%;white-space:normal;text-align:center}
.case-merge{flex-wrap:wrap}
.case-narrow{gap:10px}
.case-narrow>i{min-width:16px}
.case-index-value{flex-wrap:wrap;gap:8px 12px}
.case-index-value span{flex:1 1 130px}
.case-method-body{grid-template-columns:repeat(2,minmax(0,1fr))}
.case-flow-controls{flex-wrap:wrap}
.case-flow-controls button{min-height:44px}
.case-related-card{grid-template-columns:minmax(64px,100px) minmax(0,1fr)}
.case-footer a{overflow-wrap:anywhere}
.mobile-menu{max-height:calc(100vh - 73px);max-height:calc(100dvh - 73px);overflow-y:auto;overscroll-behavior:contain;padding-bottom:max(20px,env(safe-area-inset-bottom))}

/* Home cards are also rendered alongside this shared, unbundled stylesheet. */
.home-case-card{container:case-card / inline-size}
.home-case-art{width:clamp(64px,28cqi,120px);height:auto;aspect-ratio:3/2}
.home-case-metric strong{font-size:clamp(22px,8.5cqi,30px)}
.home-case-bottom{flex-wrap:wrap}
.home-case-tools{flex-wrap:wrap}
.home-cases-filters button{min-height:44px}
.home-case-link{overflow-wrap:break-word}
@container case-card (max-width:300px){
 .home-case-link{padding:18px}
 .home-case-top{gap:8px}
 .home-case-art{margin-left:-8px}
 .home-case-metric span{font-size:11px}
}
@media(min-width:900px) and (min-height:501px){
 .case-story-chapter{grid-template-columns:minmax(0,1fr) clamp(64px,7vw,96px) minmax(0,1fr)}
}
@media(max-width:1099px){
 .case-cta{flex-wrap:wrap;gap:24px}
 .case-numbers-list{gap:28px}
}
@media(max-width:899px){
 .case-hero{grid-template-columns:minmax(0,1fr);padding-block:36px 44px;gap:24px}
 .case-hero-copy,.case-hero .case-lead,.case-hero-result{max-width:680px}
 .case-hero h1{font-size:clamp(34px,6vw,52px);max-width:680px}
 .case-art{width:min(100%,520px);margin-inline:auto}
 .case-story-copy>p{font-size:16px}
 .case-estimate{grid-template-columns:minmax(0,1fr)}
 .case-workflow{grid-template-columns:minmax(0,1fr)}
 .case-method-body{grid-template-columns:minmax(0,1fr)}
 .case-measurement-list{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:700px){
 .case-stack{display:grid;gap:26px}
 .case-stack-group{grid-template-columns:minmax(0,1fr);gap:12px}
 .case-stack-label{margin-bottom:0}
 .case-hero-result strong{font-size:clamp(32px,8vw,44px)}
 .case-flow-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
 .case-story-copy h3{font-size:clamp(28px,6vw,36px)}
 .case-section-heading h2,.case-cta h2,.case-estimate h2{font-size:clamp(28px,6vw,34px)}
 .case-index-hero h1{font-size:clamp(36px,8vw,52px)}
 .case-index-copy h2{font-size:clamp(24px,5.5vw,28px)}
 .case-command-send{width:40px;height:40px}
 .case-command-bar>img{width:24px}
 .case-narrow b{font-size:clamp(20px,5.8vw,28px)}
 .case-narrow span{font-size:12px}
}
@media(max-width:480px){
 .case-hero h1{font-size:clamp(32px,8.5vw,40px)}
 .case-hero-result{display:flex}
 .case-hero-result span{margin-top:0}
 .case-flow-tabs{grid-template-columns:minmax(0,1fr)}
 .case-flow-tab{min-height:52px;align-items:center}
 .case-flow-label{font-size:14px}
 .case-flow-panels{padding:20px;min-height:0}
 .case-metric{grid-template-columns:minmax(0,1fr);gap:12px;padding:22px}
 .case-metric-value{grid-row:auto;font-size:38px}
 .case-command-text{font-size:14px}
 .case-related-card{padding:16px;gap:14px;grid-template-columns:72px minmax(0,1fr)}
 .case-related-card h3{font-size:18px}
 .case-estimate,.case-cta{padding:24px 20px}
 .case-main .case-command-flow{padding-inline:0;gap:6px}
 .case-sources-tile{width:44px;height:44px}
 .case-index-value strong{font-size:28px}
}
@media(max-height:500px) and (min-width:600px){
 .case-hero{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;padding-block:28px}
 .case-hero h1{font-size:clamp(30px,4vw,44px)}
 .case-art{max-width:380px}
 .case-story-chapter{padding-block:28px}
 .case-story-chapter:nth-of-type(n) .case-story-visual{width:min(100%,340px)}
}

/* Match icons and particles to the diagonal two-connection illustration. */
.case-hub--two .case-hub-brand{top:40.5%}
.case-hub--two .case-hub-system:nth-of-type(1){--x:18%;--y:16.5%;--xn:18;--yn:16.5;--flow-x1:25;--flow-y1:22;--flow-x2:39;--flow-y2:34}
.case-hub--two .case-hub-system:nth-of-type(2){--x:82.8%;--y:69%;--xn:82.8;--yn:69;--flow-x1:75.2;--flow-y1:63.5;--flow-x2:59;--flow-y2:49}

.case-story-copy h3.case-title-pair{font-size:clamp(24px,2.6vw,36px)}

/* Keep continuous case effects idle when their scene cannot be seen. */
.case-motion-scene{--case-motion-state:running}
.case-motion-scene:not(.case-motion-visible),.case-motion-scene.case-motion-suspended{--case-motion-state:paused}
.case-motion-scene :is(.case-art-main,.case-story-art,.case-hub,.case-float,.case-art-tile,.case-hub-flow),
.case-motion-scene .case-story-node::after,.case-motion-scene .case-command-text::after{animation-play-state:var(--case-motion-state,running)!important}