/* Selected shared motion; each project supplies its own restrained color family. */
.case-experience{--f-muted:#485965}.case-experience .f-dark{--f-muted:#cbd7df;background:var(--case-dark);color:#f8f9fa}.case-experience h1 em{color:var(--case-accent)}.case-experience .eyebrow{color:var(--case-ink)}.case-experience .f-dark .eyebrow{color:var(--case-accent)}
.case-experience .f-hero,.case-experience .f-platform{position:relative;background:radial-gradient(ellipse at 50% 75%,var(--case-glow),var(--case-dark) 72%)}.case-experience .f-hero:before{content:'';position:absolute;inset:0;opacity:.16;pointer-events:none;background-image:radial-gradient(var(--case-accent) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(transparent 25%,#000)}.case-experience[data-pattern=grid] .f-hero:before{background-image:linear-gradient(var(--case-accent) 1px,transparent 1px),linear-gradient(90deg,var(--case-accent) 1px,transparent 1px);background-size:70px 70px;opacity:.075}.case-experience[data-pattern=arcs] .f-hero:before{background:repeating-radial-gradient(ellipse at 80% 85%,transparent 0 95px,var(--case-accent) 96px 97px,transparent 98px 160px);opacity:.10}.case-experience .f-hero>.wrap{position:relative}
.case-experience .f-connected .f-intro{padding:6px 0 12px}.case-experience h1{font-size:clamp(48px,5.6vw,80px)}.case-experience .f-intro .f-lead{margin:20px auto;max-width:840px;font-size:17px}.case-experience .f-scene{padding:22px 85px 45px;margin-top:0}.case-experience .f-scene .v-image img,.case-experience .f-scene video{max-height:590px;object-fit:contain}.case-experience .f-orbit span{background:var(--case-dark);border-color:var(--case-accent);color:#eaf0f6}.case-experience .f-connectors{stroke:var(--case-accent)}
.case-experience .f-paper{background:#f7f8f7}.case-experience .f-sage,.case-experience .f-patient,.case-experience .f-journey{background:var(--case-light)}.case-experience .f-product-chapter .v-image{background:color-mix(in srgb,var(--case-light),white 30%);border-color:color-mix(in srgb,var(--case-ink),transparent 80%)}.case-experience .f-chapters{background:color-mix(in srgb,var(--case-light),white 30%);color:var(--case-ink);border-color:var(--case-accent)}.case-experience .f-chapter-links a[aria-current]{color:var(--case-ink);box-shadow:inset 0 -2px var(--case-ink)}.case-experience .f-reading-progress{background:var(--case-ink)}.case-experience .f-number{color:var(--case-ink)}.case-experience .f-dark .f-number{color:var(--case-accent)}
.case-experience .case-context{padding:50px 0}.case-experience .case-context h2{font-size:clamp(30px,3vw,44px)}.case-experience .case-context .v-facts{margin-top:25px}.case-context-details{margin-top:18px;border-top:1px solid #acbac4;padding-top:12px}.case-context-details summary{font-size:13px;cursor:pointer;min-height:44px;align-content:center}.case-context-details[open]>p:first-of-type{margin-top:15px}.case-experience .case-context .f-prose>p{font-size:16px;line-height:1.7}.case-experience .f-product-chapter .f-reveal:first-child{grid-row:auto}
.case-experience .v-image img,.case-experience .v-image video{display:block;width:100%;height:auto}.case-experience .v-image figcaption{font-size:12px}.case-experience .v-image figcaption:empty{display:none}.case-experience .f-platform-reveal{margin-bottom:45px}.case-experience .f-platform-reveal video{max-height:740px;object-fit:contain}.case-demo-controls{display:flex;align-items:center;justify-content:center;margin-top:16px}.case-demo-controls button{min-height:44px;padding:8px 18px;border:1px solid currentColor;border-radius:30px;font:inherit;font-size:12px;background:rgba(255,255,255,.78);color:#22323b;cursor:pointer}.case-demo-controls button:hover{background:#fff}.case-demo-controls button:disabled{opacity:.65;cursor:default}
/* Reconstructed plot overlays only the chart area of the published interface artwork. */
.case-graph-frame{position:relative}.case-graph-frame>img{width:100%;height:auto}.case-graph-vector{display:none;position:absolute;inset:0;width:100%;height:100%;overflow:visible}.case-graph.is-enhanced .case-graph-vector{display:block}.case-graph .graph-line{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--draw,1))}.case-graph .graph-point{opacity:var(--draw,1)}.case-graph-controls{display:flex;gap:20px;align-items:center;justify-content:space-between;margin-top:24px;flex-wrap:wrap}.case-graph-controls label{display:flex;align-items:center;gap:15px;flex:1;font-size:13px;min-width:220px}.case-graph-controls input{accent-color:#275692;min-width:100px;flex:1;height:44px}.case-graph-controls output{min-width:80px;font-size:13px;font-weight:600}.case-graph-controls[hidden],.case-demo-controls[hidden]{display:none}.case-experience .has-programmable-graph .f-product-chapter{grid-template-columns:1fr;gap:35px;max-width:1120px}.case-experience .has-programmable-graph .f-product-chapter>div:not(.f-reveal){grid-row:1;max-width:850px}.case-experience .has-programmable-graph .f-product-chapter>.f-reveal{grid-row:2}.case-experience .has-programmable-graph .v-image{padding:30px;background:transparent;border:0}.case-experience .has-programmable-graph .v-image img{max-height:none}.case-graph-note{font-size:11px!important;margin:16px 0 0!important}.case-graph [data-graph-cursor]{pointer-events:none}
@media(max-width:760px){.case-experience h1{font-size:45px}.case-experience .f-intro .f-lead{margin:18px 0;font-size:16px}.case-experience .f-scene{padding:10px 0 35px}.case-experience .f-orbit{margin-bottom:20px}.case-experience .case-context{padding:35px 0}.case-experience .case-context .f-two{gap:18px}.case-experience .case-context .v-facts{gap:15px}.case-experience .has-programmable-graph .v-image{padding:0}.case-graph-controls{gap:10px}.case-graph-controls label{min-width:100%;font-size:12px}.case-experience .f-product-chapter>.f-reveal:first-child{grid-row:1}.case-experience .has-programmable-graph .f-product-chapter>.f-reveal{grid-row:2}}
@media(max-width:380px){.case-experience h1{font-size:38px}.case-experience .case-context h2{font-size:30px}}
@media(prefers-reduced-motion:reduce){.case-experience .f-scene,.case-experience .f-platform-reveal{transform:none!important}.case-graph .graph-line{stroke-dashoffset:0!important}}

/* Restored evidence gets its own row; portrait demos retain a human-scale size. */
.case-experience .case-restored-gallery{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:28px;align-items:start;margin-top:28px}
.case-experience .case-restored-gallery .v-image{margin:0;padding:20px;background:transparent;border:0}
.case-experience .case-restored-gallery img{max-height:570px;object-fit:contain}
.case-experience .case-phone{padding:20px!important;background:transparent!important;border:0!important;text-align:center}
.case-experience .case-phone>video,.case-experience .case-phone>img{width:auto!important;max-width:100%;height:auto;max-height:530px!important;margin-inline:auto;object-fit:contain}
.case-experience .case-phone-bezel>video{clip-path:inset(.5% 2% round 14% / 7%)}
.case-experience .f-two>.f-journey{grid-column:1/-1;padding:28px 0 0;margin:0;background:transparent}
.case-experience .f-patient .f-two{row-gap:20px}
.case-experience .f-section:has(.f-product-chapter:not(:has(img,video,svg))){padding-block:54px}
.case-experience .f-product-chapter:not(:has(img,video,svg)){display:block;max-width:1000px}
.case-experience .f-product-chapter:not(:has(img,video,svg)) h2{max-width:850px}
.case-experience .f-product-chapter:not(:has(img,video,svg)) .f-prose{max-width:820px}
.case-experience .case-partner{display:flex;align-items:center;gap:25px;flex-wrap:wrap;margin-top:28px;padding:24px;background:#fff;color:#182e29;border-radius:12px}
.case-experience .case-partner img{width:220px;height:auto;max-width:100%}
.case-experience .case-evidence-note{font-size:13px;max-width:800px;line-height:1.6}
@media(max-width:760px){.case-experience .case-restored-gallery{gap:18px}.case-experience .case-restored-gallery .v-image{padding:0}.case-experience .case-phone>video{max-height:460px!important}.case-experience .f-section:has(.f-product-chapter:not(:has(img,video,svg))){padding-block:36px}}
/* DevSwarm leads with the working product; customization belongs later in the story. */
.case-devswarm .swarm-product-first{display:grid;grid-template-columns:.8fr 1.3fr;gap:42px;align-items:center;padding:24px 0 64px}.case-devswarm .swarm-product-first .f-intro{text-align:left;margin:0;padding:0}.case-devswarm .swarm-product-first h1{font-size:clamp(40px,4.2vw,62px);line-height:1.07}.case-devswarm .swarm-product-first .f-lead{font-size:17px;margin:24px 0;max-width:540px}.case-devswarm .swarm-product-first .f-scene{padding:0;margin:0;min-width:0;width:100%}.case-devswarm .swarm-product-first video{border-radius:12px;box-shadow:0 25px 65px #07021155}.case-devswarm .swarm-product-first figcaption{margin-top:20px;text-align:left}.case-devswarm .swarm-theme-matrix{max-width:800px;margin:50px auto 0}.case-devswarm #release-25{padding-block:60px}
@media(max-width:900px){.case-devswarm .swarm-product-first{grid-template-columns:1fr;gap:30px;padding:10px 0 40px}.case-devswarm .swarm-product-first h1{font-size:clamp(37px,7vw,58px)}.case-devswarm .swarm-product-first .f-lead{font-size:16px;margin:18px 0}.case-devswarm .swarm-product-first .f-scene{transform:none!important}}

/* Product evidence chooses the opening: phone experiences sit beside the story;
   wide interfaces get space without a surrounding feature-box diagram. */
.case-experience .f-artifact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:48px;padding:28px 0 54px}
.case-experience .f-artifact .f-intro{text-align:left;min-width:0}
.case-experience .f-artifact h1{font-size:clamp(40px,4.1vw,60px);line-height:1.1}
.case-experience .f-artifact .f-lead{margin:24px 0;max-width:540px}
.case-experience .f-artifact .f-scene{width:100%;min-width:0;padding:0;margin:0;transform:none}
.case-experience .f-artifact .v-image img{max-height:560px}
.case-experience .f-unframed .f-scene{padding:24px 0 46px;max-width:1100px}
@media(prefers-reduced-motion:no-preference){html[data-motion=on] .case-experience .f-hero.is-ready .f-scene>.v-image{animation-duration:.55s}html[data-motion=on] .case-experience .f-hero.is-ready .f-orbit span{animation-duration:.35s}html[data-motion=on] .case-experience .f-hero.is-ready .f-connectors path{animation-duration:.6s}}
@media(max-width:900px){.case-experience .f-artifact{grid-template-columns:1fr;gap:26px;padding:12px 0 36px}.case-experience .f-artifact h1{font-size:clamp(38px,6vw,56px)}.case-experience .f-artifact .f-lead{max-width:720px;margin:18px 0}.case-experience .f-artifact .v-image img{max-height:490px}.case-experience .f-unframed .f-scene{padding:14px 0 35px}}
@media(max-width:380px){.case-experience .f-artifact h1{font-size:35px}}