/* Carry the selected-work living room into the case study. */
.myko-case .myko-hero-visual { right:1%;top:50%;width:53%;height:auto;aspect-ratio:3/2;transform:translateY(-43%); }
.myko-hero-room { display:block;width:100%;height:auto; }
@media(max-width:760px) {
 .myko-case .myko-case-hero { min-height:0;padding-top:4rem;padding-bottom:2rem;flex-direction:column;gap:1rem; }
 .myko-case .myko-hero-copy { max-width:100%; }
 .myko-case .myko-hero-visual { position:relative;inset:auto;transform:none;width:110%;height:auto;aspect-ratio:3/2;margin:0 -5%; }
}

/* Myko coordinates the five devices through coloured signals. */
.network-track { opacity:.25;stroke-dasharray:1 11; }
.network-signal { stroke-dasharray:.1 4.9;stroke-dashoffset:0;animation:network-flow 6s linear infinite;animation-delay:var(--signal-delay); }
.network-signal-glow { display:none; }
.network-hub { transform-box:fill-box;transform-origin:center;animation:network-hub 6s ease-in-out infinite; }
@keyframes network-flow { to { stroke-dashoffset:-100; } }
@keyframes network-hub { 0%,100% {transform:scale(1)} 50% {transform:scale(1.035)} }
@media(prefers-reduced-motion:reduce) {
 .myko-hero-room :is(.network-signal,.network-hub) {animation:none;}
 .network-signal {opacity:.25;}
 .network-signal-glow {display:none;}
}

.device-connection .network-track { opacity:.4;stroke-dasharray:1 11; }

.myko-hero-copy .myko-text-heading { font-size:clamp(4.5rem,8vw,8rem);line-height:.95;margin:2rem 0;max-width:none; }

/* Keep the expansion collage inside the mobile story column. */
@media(max-width:760px) {
 .myko-case .rebuild-product-ac { left:0;width:48%; }
 .myko-case .rebuild-product-bulb { right:5%;width:44%; }
}

/* Contain animated artwork without disabling the nested product carousel. */
@media(max-width:760px) {
 .myko-case > main { min-width:0;max-width:100%;overflow-x:clip; }
}

/* The Myko tour is mobile-only; shared/guided-tour.css owns its appearance. */
@media(min-width:761px) {
 .future-tour-toggle,.future-tour { display:none!important; }
}
@media(max-width:760px) {
 .myko-case .future-preview { gap:1rem; }
 .myko-case .future-preview-instruction { font-size:.85rem; }
 .myko-case .future-annotations { display:none; }
 .myko-case .future-tour-toggle { order:1;align-self:center; }
 .myko-case .future-preview .future-phone { order:2;position:relative;width:min(100%,20rem); }
}

.story-demo-arrows { display:none; }
@media(max-width:760px) {
 .myko-case .supporting-examples :is(.automation-steps,.matter-steps) { display:none; }
 .myko-case .supporting-examples .automation-demo { display:grid;grid-template-columns:2.75rem minmax(0,18rem) 2.75rem;align-items:center;justify-content:center;gap:1rem .5rem;width:min(100%,25rem);justify-self:center; }
 .myko-case .supporting-examples .automation-demo > .phone-frame { grid-column:2;grid-row:2;width:100%;min-width:0; }
 .story-demo-arrows { display:contents; }
 .story-demo-arrows > div { display:grid;grid-column:1 / -1;grid-row:1;gap:.25rem;text-align:center; }
 .story-demo-arrows small { font-size:.75rem;color:#686270; }
 .story-demo-arrows strong { font-size:1.1rem; }
 .story-demo-arrows > button:first-child { grid-column:1;grid-row:2; }
 .story-demo-arrows > button:last-child { grid-column:3;grid-row:2; }
 .story-demo-arrows button { display:grid;place-items:center;width:2.75rem;height:2.75rem;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);font-size:1.25rem;cursor:pointer; }
 .story-demo-arrows button:disabled { opacity:.3;cursor:default; }
 .story-demo-arrows button:focus-visible { outline:2px solid #7540b0;outline-offset:3px; }
}

@media(max-width:760px) {
 .myko-case .automation-demo > .automation-details { grid-column:1 / -1;grid-row:3;width:min(100%,28ch);justify-self:center;margin-top:.25rem;padding-top:1rem;text-align:center; }
}

.notion-mobile-controls { display:none; }
@media(max-width:760px) {
 .myko-case .notion-gallery { overflow:clip; }
 .myko-case .notion-relations { display:block; }
 .myko-case .notion-map { display:none; }
 .notion-mobile-controls { position:sticky;top:.5rem;z-index:5;display:flex;align-items:center;gap:.65rem;padding:.75rem 0;background:var(--ink);margin-bottom:1rem; }
 .notion-mobile-stage { display:grid;gap:.35rem;flex:1;min-width:0;text-align:center; }
 .notion-mobile-stage small { font-size:.7rem;color:#ccc7d3; }
 .notion-mobile-stage strong { font-size:1rem;color:white; }
 .notion-mobile-controls select { width:100%;min-width:0;border:1px solid #67616e;border-radius:.5rem;background:#29262d;color:white;padding:.55rem;font:inherit;font-size:.9rem; }
 .notion-mobile-controls button { flex:none;width:2.75rem;height:2.75rem;border:1px solid #67616e;border-radius:50%;background:transparent;color:white;font-size:1.2rem;cursor:pointer; }
 .notion-mobile-controls button:disabled { opacity:.3;cursor:default; }
 .notion-mobile-controls :is(button,select):focus-visible { outline:2px solid #bfa0ff;outline-offset:3px; }
 .myko-case .notion-map-detail { display:flex;flex-direction:column;border:0;padding:0; }
 .myko-case .notion-map-detail > .eyebrow { display:none; }
 .myko-case .notion-map-detail > h3 { order:0;font-size:1.1rem;margin:0 0 1rem; }
 .myko-case .notion-selected-evidence,.myko-case .notion-run-excerpt { order:1;margin:0 0 1rem; }
 .myko-case .notion-evidence-viewport { max-height:45svh;overflow:auto;overscroll-behavior:contain; }
 .myko-case .notion-map-detail > p { order:2;font-size:.9rem; }
 .myko-case .notion-record-examples { order:3; }
}