/* Connect STI case composition. Velora motion remains the shared foundation. */
@layer connect.components {
 .md-story {--md-ease:var(--vl-connect-ease,cubic-bezier(.16,1,.3,1))}
 .md-opening {padding-block:clamp(4rem,10vw,10rem) 3rem}
 .md-opening h1 {font:clamp(4.5rem,12vw,12rem)/.9 var(--display);letter-spacing:-.055em;margin:2.5rem 0 4rem}
 .md-story em {font-style:normal;color:var(--red)}
 .md-opening__bottom {display:flex;align-items:end;justify-content:space-between;gap:3rem}
 .md-opening__bottom>p {max-width:580px;font-size:clamp(1.2rem,2vw,1.7rem);line-height:1.5;margin:0}
 .md-opening__bottom>a {color:inherit;white-space:nowrap;text-decoration:none;padding-bottom:.5rem;border-bottom:1px solid var(--red)}
 .md-editorial {font-size:10px;color:var(--muted);border-top:1px solid var(--line);padding-top:2rem;margin-top:3rem;line-height:1.7}
 .md-chapters {border-block:1px solid var(--line);background:var(--ink)}
 .md-chapters>.frame {display:flex;gap:2rem;overflow-x:auto;padding-block:1.25rem}
 .md-chapters a {color:var(--muted);text-decoration:none;white-space:nowrap;font:11px var(--mono)}.md-chapters a span {color:var(--red);margin-right:.4rem}
 .md-scene {padding-block:clamp(4rem,9vw,9rem);scroll-margin-top:100px;border-bottom:1px solid var(--line);view-timeline-name:--md-scene;view-timeline-axis:block}
 .md-scene--paper {background:var(--surface)}
 .md-scene__layout {display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,6rem);align-items:start}
 .md-copy {position:sticky;top:125px}
 .md-copy h2 {font:clamp(2.5rem,4.2vw,5rem)/1.04 var(--display);letter-spacing:-.035em;margin:1.75rem 0 2rem}
 .md-copy>p:last-child {font-size:1.05rem;line-height:1.8;max-width:540px;color:var(--muted)}
 .md-scene__visual {min-width:0}
 .md-slot {margin:0}
 .md-slot__canvas {position:relative;isolation:isolate;overflow:hidden;aspect-ratio:3/2;min-height:330px;border:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb,var(--red) 8%,var(--ink)),var(--ink));display:flex;flex-direction:column;justify-content:space-between;padding:clamp(1.5rem,3vw,3rem)}
 .md-slot__canvas:before {content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;opacity:.35}
 .md-slot__id {font-size:10px;color:var(--muted)}
 .md-slot__label {position:relative;z-index:1;max-width:90%}
 .md-slot__label>span {display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--line);border-radius:50%;font-size:1.6rem;color:var(--red);margin-bottom:1.25rem}
 .md-slot__label h3 {font:clamp(1.8rem,3vw,3rem)/1.1 var(--display);margin:0 0 .75rem}.md-slot__label p {font:11px/1.7 var(--mono);color:var(--muted);margin:0}
 .md-slot__diagram {position:absolute;right:-8%;top:5%;width:62%;height:70%;z-index:0;opacity:.3}
 .md-slot__diagram i {position:absolute;inset:10%;border:1px solid var(--red);border-radius:50%;transform:rotate(-25deg)}.md-slot__diagram i:nth-child(2) {inset:20% 0;border-radius:8px;transform:rotate(15deg)}.md-slot__diagram i:nth-child(3) {inset:0 25%;transform:rotate(45deg)}
 .md-slot figcaption {border:1px solid var(--line);border-top:0;padding:1.1rem 1.5rem}
 .md-slot summary {cursor:pointer;display:flex;gap:1rem;justify-content:space-between;font:11px/1.7 var(--mono);list-style:none}.md-slot summary::-webkit-details-marker {display:none}
 .md-slot details p {line-height:1.7;color:var(--muted);font-size:.9rem;margin:1.25rem 0}.md-slot details>.mono {font-size:9px;color:var(--red)}
 .md-scene--1 .md-scene__layout {grid-template-columns:1fr}.md-scene--1 .md-copy {position:static;display:grid;grid-template-columns:1fr 1fr;column-gap:4rem}.md-scene--1 .md-copy>.eyebrow {grid-column:1/-1}.md-scene--1 .md-copy>p:last-child {align-self:center}
 .md-scene--1 .md-slot__canvas {aspect-ratio:16/9;min-height:400px}
 .md-scene--2 .md-slot__canvas {aspect-ratio:4/5}
 .md-scene--3 {min-height:120vh}.md-scene--3 .md-slot__canvas {aspect-ratio:1}
 .md-layer-list {list-style:none;padding:0;margin:2rem 0 0}.md-layer-list li {display:flex;gap:1.5rem;padding:1.5rem;border:1px solid var(--line);margin-top:.75rem;background:var(--ink);font:clamp(1.2rem,2vw,1.8rem) var(--display)}.md-layer-list .mono {font-size:11px;color:var(--red);align-self:center}
 .md-patterns {display:grid;gap:.75rem;margin-top:2rem}.md-patterns details {border:1px solid var(--line);padding:1.5rem;background:var(--ink)}.md-patterns summary {list-style:none;cursor:pointer;display:flex;gap:1rem;align-items:center}.md-patterns summary::-webkit-details-marker {display:none}.md-patterns strong {font:1.7rem var(--display)}.md-patterns summary>span:last-child {margin-left:auto;color:var(--red)}.md-patterns p {line-height:1.7;color:var(--muted)}
 .md-engine {display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:2rem 0;border-block:1px solid var(--line);margin-top:2rem;font-size:11px}.md-engine b {color:var(--red);font-size:1.7rem;font-weight:400}
 .md-scene--6 .md-scene__layout {grid-template-columns:1fr}.md-scene--6 .md-copy {position:static;max-width:850px}.md-scene--6 .md-slot__canvas {aspect-ratio:21/9}
 .md-validation {display:grid;gap:1rem;margin-top:2rem}.md-validation>div {border-top:1px solid var(--line);padding:1.5rem 0;display:grid;gap:.75rem}.md-validation .mono {font-size:10px;color:var(--red)}.md-validation strong {font:1.7rem var(--display)}
 .md-end {padding-block:6rem 8rem}.md-end h2 {font:clamp(3rem,6vw,7rem)/1.05 var(--display);letter-spacing:-.04em;margin:2rem 0}.md-end>p:not(.eyebrow) {max-width:670px;line-height:1.8;color:var(--muted)}.md-end .button {margin-top:2rem}
}
@layer connect.motion {
 @media(prefers-reduced-motion:no-preference) {
  @supports(animation-timeline:view()) {
   .md-scene--3 .md-slot__diagram {animation:md-layers linear both;animation-timeline:--md-scene;animation-range:entry 0% exit 100%}
   .md-layer-list li {animation:md-layer-entry linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
   .md-scene--5 .md-slot__diagram {animation:md-layers linear both;animation-timeline:--md-scene;animation-range:entry 0% exit 100%}
  }
  .md-slot summary span {transition:transform .3s}.md-slot details[open] summary span {transform:rotate(45deg)}
 }
 @keyframes md-layers {from {transform:translateY(25px) rotate(-15deg)}to {transform:translateY(-25px) rotate(25deg)}}
 @keyframes md-layer-entry {from {transform:translateX(20px);opacity:.55}to {transform:translateX(0);opacity:1}}
 @media(max-width:900px) {
  .md-scene__layout {grid-template-columns:1fr}.md-copy {position:static}.md-scene--1 .md-copy {display:block}.md-scene--3 {min-height:0}
  .md-opening__bottom {align-items:start;flex-direction:column;gap:2rem}.md-slot__canvas {min-height:300px}.md-scene--2 .md-slot__canvas {aspect-ratio:3/2}.md-scene--6 .md-slot__canvas {aspect-ratio:16/9}
 }
 @media(max-width:500px) {
  .md-opening h1 {font-size:clamp(3.5rem,17vw,5rem)}.md-slot__canvas,.md-scene--1 .md-slot__canvas,.md-scene--6 .md-slot__canvas {aspect-ratio:4/5;min-height:310px}.md-slot__id {font-size:9px}.md-slot figcaption {padding:1rem}
  .md-copy h2 {font-size:clamp(2.3rem,10vw,3.5rem)}.md-scene {scroll-margin-top:100px}
 }
 @media(prefers-reduced-motion:reduce) {.md-story *, .md-story *:before,.md-story *:after {animation:none!important;transition:none!important}}
}