/* The approved case composition shares the site's stage; application styles stay in their frames. */
#connections[data-cases] { --case-muted:#707889; --case-line:#e4e8f1; }
#connections[data-cases] .cases-stage { display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:24px; padding:100px var(--pad) 76px; height:100svh; min-height:0; overflow:hidden; }
#connections[data-cases] [hidden] { display:none!important; }
#connections[data-cases] .cases-defs { position:absolute; width:0; height:0; overflow:hidden; }
#connections[data-cases] .section-top { display:flex; align-items:end; justify-content:space-between; gap:24px; min-width:0; }
#connections[data-cases] .eyebrow { font-size:11px; line-height:1.4; letter-spacing:.07em; margin:0 0 12px; }
#connections[data-cases] #connections-title { font-size:clamp(27px,2.8vw,50px); line-height:1.18; letter-spacing:-.06em; margin:0; }
#connections[data-cases] button { background:none; font:inherit; color:inherit; cursor:pointer; padding:0; }
#connections[data-cases] button:focus-visible,#connections[data-cases] [tabindex]:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
#connections[data-cases] .case-tabs { display:flex; align-self:end; gap:7px; border-bottom:1px solid var(--case-line); }
#connections[data-cases] .case-tabs button { min-height:44px; padding:12px 13px 15px; position:relative; white-space:nowrap; font-size:13px; color:var(--case-muted); }
#connections[data-cases] .case-tabs button[aria-selected=true] { color:var(--blue); }
#connections[data-cases] .case-tabs button[aria-selected=true]::after { content:''; height:2px; background:var(--blue); position:absolute; left:13px; right:13px; bottom:-1px; }
#connections[data-cases] .case-tabs button:hover { color:var(--blue); }
#connections[data-cases] .showcase { display:grid; grid-template-columns:minmax(210px,.9fr) minmax(0,2.65fr); gap:5%; min-height:0; }
#connections[data-cases] .case-story { display:flex; flex-direction:column; padding:12px 0 0; min-width:0; min-height:0; }
#connections[data-cases] .case-index { color:var(--blue); font-size:10px; letter-spacing:.07em; display:block; margin-bottom:18px; }
#connections[data-cases] #case-title { font-family:'Unbounded',sans-serif; font-size:clamp(22px,2.15vw,36px); font-weight:500; line-height:1.25; letter-spacing:-.065em; margin:0 0 20px; }
#connections[data-cases] .story-copy>p { font-size:clamp(13px,1vw,18px); line-height:1.6; max-width:330px; color:#515968; margin:0; }
#connections[data-cases][data-active-case=guests] .showcase { grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr); }
#connections[data-cases][data-active-case=guests] #case-title { font-size:clamp(44px,5.2vw,92px); line-height:1.12; }
#connections[data-cases][data-active-case=guests] .story-copy>p { max-width:470px; }
#connections[data-cases] .try-note { display:flex; gap:12px; margin-top:24px; font-size:12px; line-height:1.6; color:var(--case-muted); }
#connections[data-cases] .try-note p { margin:0; }
#connections[data-cases] .try-arrow { font-size:25px; line-height:1.2; color:var(--blue); }
#connections[data-cases] .zero-wrap { position:relative; margin-top:auto; width:min(240px,90%); align-self:center; text-align:center; }
#connections[data-cases] .brand-zero { display:block; width:100%; height:auto; overflow:visible; stroke:none; }
#connections[data-cases] .zero-body { transform-origin:155px 135px; animation:cases-float 7s ease-in-out infinite; }
body.has-3d:not(.motion-off) #connections[data-cases] .zero-body { visibility:hidden; }
#connections[data-cases] .zero-dot { animation:cases-bead 4s ease-in-out infinite; }
#connections[data-cases] .zero-aura { transform-origin:157px 137px; animation:cases-aura 4s ease-out infinite; }
#connections[data-cases] .zero-caption { position:relative; top:-8px; display:block; color:var(--case-muted); font-size:9px; line-height:1.4; }
#connections[data-cases] .zero-wrap.pulse .brand-zero { animation:cases-hit .5s ease-out; }
#connections[data-cases] .zero-wrap.pulse .zero-aura { animation:cases-hit .5s ease-out; }
#connections[data-cases] .workbench,#connections[data-cases] .boss-showcase { min-width:0; min-height:0; height:100%; }
#connections[data-cases] iframe { display:block; width:100%; min-width:0; border:0; }
#connections[data-cases] #boss-frame { height:100%; border:1px solid var(--case-line); border-radius:12px; background:#fff; }
#connections[data-cases] .guest-showcase { display:flex; align-items:center; justify-content:center; height:100%; min-height:0; min-width:0; }
#connections[data-cases] .mini-phone-slot { position:relative; width:100%; max-width:390px; height:100%; min-width:0; min-height:0; justify-self:center; }
#connections[data-cases] .mini-phone { display:flex; flex-direction:column; width:390px; height:780px; min-height:0; border:5px solid #292a2f; border-radius:34px; overflow:hidden; background:#080808; box-shadow:0 15px 40px #1d28551a,0 2px 3px #0002; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(var(--phone-scale,1)); transform-origin:center; color:#f5f5f5; }
#connections[data-cases] .phone-status { display:flex; flex-shrink:0; justify-content:space-between; align-items:center; height:28px; padding:4px 20px 0; font:500 11px/1.3 'Golos Text',sans-serif; background:#171717; }
#connections[data-cases] .phone-hardware svg { width:39px; height:15px; stroke:#f5f5f5; stroke-width:1.2; fill:#f5f5f5; }
#connections[data-cases] .telegram-toolbar { display:flex; flex-shrink:0; align-items:center; justify-content:space-between; gap:15px; background:#171717; height:51px; padding:2px 16px 7px; font-family:'Golos Text',sans-serif; }
#connections[data-cases] .telegram-toolbar>div { text-align:center; }
#connections[data-cases] .telegram-toolbar strong { display:block; font-size:13px; font-weight:600; }
#connections[data-cases] .telegram-toolbar small { font-size:10px; color:#a1a1a1; display:block; margin-top:2px; }
#connections[data-cases] .telegram-close { font-size:25px; line-height:1; font-weight:400; color:#b0b0b0; }
#connections[data-cases] .telegram-menu { font-size:25px; letter-spacing:1px; line-height:1; transform:translateY(-3px); }
#connections[data-cases] #guest-frame { flex:1 1 0; min-height:0; height:0; background:#080808; color-scheme:dark; }
#connections[data-cases] .phone-bottom { flex-shrink:0; height:20px; background:#080808; display:grid; place-items:center; }
#connections[data-cases] .phone-bottom>span { height:4px; width:105px; background:#ddd; border-radius:5px; }
#connections[data-cases] .case-footer { position:static; display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0; padding:0; border:0; font-size:10px; line-height:1.6; color:var(--case-muted); }
#connections[data-cases] .case-footer p { margin:0; display:flex; align-items:center; gap:7px; max-width:none; }
#connections[data-cases] .data-dot { display:inline-block; width:5px; height:5px; border-radius:50%; border:1px solid #abb7d0; flex-shrink:0; }
#connections[data-cases] .reset { display:flex; align-items:center; gap:7px; color:var(--case-muted); font-size:10px; white-space:nowrap; min-height:32px; }
#connections[data-cases] .reset svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
#connections[data-cases] .reset:hover { color:var(--blue); }
#connections[data-cases] .case-notice { position:absolute; bottom:35px; left:50%; transform:translate(-50%,12px); padding:10px 16px; border-radius:9px; background:#191b1f; color:#fff; font-size:12px; line-height:1.4; box-shadow:0 5px 25px #0001; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; z-index:5; max-width:90%; margin:0; text-align:center; }
#connections[data-cases] .case-notice.visible { opacity:1; transform:translate(-50%,0); }
#connections[data-cases][inert] :is(.zero-body,.zero-dot,.zero-aura) { animation-play-state:paused; }
@keyframes cases-float { 0%,100%{transform:translateY(0) rotate(-23deg)}50%{transform:translateY(-5px) rotate(-20deg)} }
@keyframes cases-bead { 0%,100%{transform:translateY(-4px)}50%{transform:translateY(4px)} }
@keyframes cases-aura { 0%,100%{opacity:.2;transform:scale(.85)}50%{opacity:.65;transform:scale(1.2)} }
@keyframes cases-hit { 0%{transform:scale(.95)}50%{transform:scale(1.055)}100%{transform:scale(1)} }
@media(min-width:1600px) {
  #connections[data-cases] .cases-stage { padding-top:110px; padding-bottom:80px; gap:30px; }
  #connections[data-cases] .zero-wrap { width:270px; }
}
@media(max-width:1200px) {
  #connections[data-cases] .showcase { grid-template-columns:minmax(180px,.85fr) minmax(0,2.65fr); gap:4%; }
  #connections[data-cases] .case-tabs button { padding-inline:8px; font-size:12px; }
}
@media(min-width:801px) and (max-height:780px) {
  #connections[data-cases] .cases-stage { padding-top:91px; padding-bottom:65px; gap:17px; }
  #connections[data-cases] #connections-title { font-size:32px; }
  #connections[data-cases] .eyebrow { font-size:10px; margin-bottom:8px; }
  #connections[data-cases] .case-story { padding-top:4px; }
  #connections[data-cases] .case-index { margin-bottom:12px; }
  #connections[data-cases] #case-title { font-size:25px; margin-bottom:14px; }
  #connections[data-cases][data-active-case=guests] #case-title { font-size:clamp(36px,4.6vw,60px); }
  #connections[data-cases][data-active-case=guests] .case-story { position:relative; }
  #connections[data-cases][data-active-case=guests] .zero-wrap { position:absolute; right:0; bottom:0; width:min(150px,30%); }
  #connections[data-cases] .try-note { margin-top:16px; font-size:11px; }
  #connections[data-cases] .zero-wrap { width:min(160px,80%); }
}
body:is(.motion-off,:not(.motion-ready)) #connections[data-cases]>.cases-stage { height:auto; min-height:100svh; overflow:visible; grid-template-rows:auto auto auto; }
body:is(.motion-off,:not(.motion-ready)) #connections[data-cases] .showcase { min-height:650px; }
body:is(.motion-off,:not(.motion-ready)) #connections[data-cases] .workbench { height:760px; }
@media(max-width:800px),(max-width:1100px) and (max-height:500px) {
  #connections[data-cases]>.cases-stage,body:is(.motion-off,:not(.motion-ready)) #connections[data-cases]>.cases-stage { height:auto!important; min-height:0!important; overflow:visible; display:block; padding:96px var(--pad) 36px; }
  #connections[data-cases] .section-top { flex-wrap:wrap; gap:18px; margin-bottom:25px; }
  #connections[data-cases] #connections-title { font-size:clamp(27px,6.5vw,40px); line-height:1.2; }
  #connections[data-cases] .eyebrow { font-size:10px; margin-bottom:12px; }
  #connections[data-cases] .case-tabs { width:100%; }
  #connections[data-cases] .case-tabs button { flex:1; padding:12px 4px 14px; font-size:12px; }
  #connections[data-cases] .showcase { display:flex; flex-direction:column; gap:24px; min-height:0!important; }
  #connections[data-cases] .case-story { display:block; position:relative; padding:0 110px 0 0; min-height:180px; }
  #connections[data-cases] .case-index { font-size:9px; margin-bottom:12px; }
  #connections[data-cases] #case-title { font-size:24px; margin-bottom:12px; }
  #connections[data-cases][data-active-case=guests] #case-title { font-size:clamp(26px,6vw,34px); }
  #connections[data-cases] .story-copy>p { font-size:13px; line-height:1.6; max-width:440px; }
  #connections[data-cases] .try-note { margin-top:14px; font-size:11px; gap:8px; }
  #connections[data-cases] .zero-wrap { position:absolute; width:112px; right:-5px; top:8px; margin:0; }
  #connections[data-cases][data-active-case=guests] .zero-wrap { right:-5px; bottom:auto; width:112px; }
  #connections[data-cases] .zero-caption { font-size:8px; line-height:1.4; }
  #connections[data-cases] .workbench,body:is(.motion-off,:not(.motion-ready)) #connections[data-cases] .workbench { width:100%; height:auto; }
  #connections[data-cases] .boss-showcase { height:840px; }
  #connections[data-cases] #boss-frame { border-radius:9px; }
  #connections[data-cases] .guest-showcase { display:flex; height:auto; padding:0 0 8px; }
  #connections[data-cases] .mini-phone-slot { width:390px; max-width:100%; height:710px; }
  #connections[data-cases] .mini-phone { position:relative; left:auto; top:auto; transform:none; width:100%; height:710px; max-height:none; border-width:3px; border-radius:28px; }
  #connections[data-cases] .case-footer { margin-top:18px; font-size:9px; align-items:start; gap:12px; }
  #connections[data-cases] .case-footer p { max-width:230px; }
  #connections[data-cases] .reset { font-size:9px; min-height:32px; }
  #connections[data-cases] .case-notice { bottom:8px; font-size:11px; }
}
@media(max-width:400px) {
  #connections[data-cases] .case-story { padding-right:90px; }
  #connections[data-cases] #case-title { font-size:21px; }
  #connections[data-cases] .story-copy>p { font-size:12px; }
  #connections[data-cases] .zero-wrap { width:91px; }
  #connections[data-cases][data-active-case=guests] .zero-wrap { width:91px; }
  #connections[data-cases] .case-footer p { max-width:190px; }
}
@media(prefers-reduced-motion:reduce) {
  #connections[data-cases] *,#connections[data-cases] *::before,#connections[data-cases] *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}