/* VIOSCANS - Canonical Robotic Violet homepage v1.
   Scoped overrides only. Shared /assets/css/vioscans.css remains unchanged.
   Existing Violet PNG pixels are re-used unmodified.
   Every image starts at the very top of its own colored/bordered panel.
*/
.vio-home-canonical .vio-main { min-width:0; }
.vio-home-canonical .vio-main, .vio-home-canonical .vio-main * { box-sizing:border-box; }
.vio-home-canonical .vio-robot-visual {
  position:relative; isolation:isolate; display:flex;
  flex-direction:column; justify-content:flex-start; align-items:center;
  padding:0!important; margin-top:0; min-width:0; min-height:0;
  overflow:visible;
}
.vio-home-canonical .vio-robot-picture {
  position:relative; z-index:2;
  display:block; line-height:0; width:100%; max-width:100%;
  margin:0!important; padding:0!important; flex:0 0 auto;
}
.vio-home-canonical .vio-robot-picture .vio-robot-image {
  position:static!important; display:block!important;
  transform:none!important; inset:auto!important;
  width:100%!important; max-width:100%!important;
  height:auto!important; max-height:none!important;
  object-fit:contain!important;
  margin:0!important; padding:0!important;
  vertical-align:top; filter:drop-shadow(0 18px 26px rgba(50,24,78,.13));
}
/* Hero: an upper cable anchor, not the old bottom-cropped sorceress. */
.vio-home-canonical .vio-hero {
  min-height:0!important; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(24px,4vw,66px); align-items:center;
  padding-top:34px; padding-bottom:30px;
}
.vio-home-canonical .vio-hero-art {
  min-height:0!important; align-self:center; width:100%; max-width:620px;
  border:1px solid rgba(111,54,216,.14); border-radius:28px;
  background:radial-gradient(ellipse at 52% 42%,rgba(232,217,255,.82),transparent 67%),
             linear-gradient(135deg,#fcfaff 5%,#f2edff 65%,#fff2e7 100%);
  box-shadow:0 16px 45px rgba(60,35,95,.07);
  overflow:hidden!important;
}
.vio-home-canonical .vio-hero-art::before { display:none!important; }
.vio-home-canonical .vio-hero-art .vio-robot-picture { max-width:560px; }
.vio-home-canonical .vio-hero-art .vio-art-glow { inset:0; opacity:.35; }
.vio-home-canonical .vio-hero-art .vio-orbit {opacity:.3;z-index:0;pointer-events:none;}
.vio-home-canonical .vio-hero-art .vio-float-note { z-index:4;max-width:155px;pointer-events:none; }
/* Never obstruct an eye, finger, or tool at intermediate widths. */
@media(max-width:1279px){.vio-home-canonical .vio-hero-art .vio-float-note{display:none!important;}}
/* Diagnostic story: the instrument lives at the top edge, never a 1050px figure crop. */
.vio-home-canonical .vio-cloak-story {
  grid-template-columns:minmax(0,.89fr) minmax(0,1.11fr);
  gap:clamp(18px,4vw,52px); align-items:stretch;
  padding:22px; margin-top:72px;
}
.vio-home-canonical .vio-cloak-column {
  min-height:0!important; border-radius:24px; align-self:stretch;
  background:linear-gradient(180deg,#f1e8ff 0%,#f7f0ff 60%,#fff2e8 100%)!important;
  box-shadow:inset 0 0 0 1px rgba(111,54,216,.1);
  overflow:hidden!important;
}
.vio-home-canonical .vio-cloak-column .vio-robot-picture { max-width:100%; }
.vio-home-canonical .vio-cloak-column .vio-cloak-halo {pointer-events:none; opacity:.26; }
.vio-home-canonical .vio-cloak-caption {
  position:relative;z-index:3;left:auto;bottom:auto;
  display:inline-block;margin:8px auto 15px;text-align:center;
}
.vio-home-canonical .vio-cloak-copy { padding:20px 0; }
/* Investigation graphic; old 'bottom:-30%' was cutting off Violet's tools. */
.vio-home-canonical .vio-how-grid { grid-template-columns:minmax(0, .93fr) minmax(0,1.07fr); gap:clamp(20px,4vw,56px); }
.vio-home-canonical .vio-how-enchanted .vio-how-art {
  min-height:0!important; align-self:stretch;
  border-radius:25px;
  background:linear-gradient(155deg,#f8f3ff,#eee6ff 58%,#fff1e3)!important;
  overflow:hidden!important;
}
.vio-home-canonical .vio-how-art .vio-robot-picture { max-width:100%; }
.vio-home-canonical .vio-how-art .vio-how-halo {opacity:.28;pointer-events:none;z-index:0;}
/* Welcome art: no waist crop and no overlays on robot's eye or hands. */
.vio-home-canonical .vio-why-layout {grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr);gap:22px;}
.vio-home-canonical .vio-friendly-art {
  min-height:0!important;align-self:stretch; border-radius:26px;
  background:linear-gradient(155deg,#f5edff,#fff9f1)!important;
  overflow:hidden!important;
}
.vio-home-canonical .vio-friendly-art .vio-robot-picture {max-width:100%;}
.vio-home-canonical .vio-friendly-note {
  position:relative;z-index:3;top:auto;right:auto;
  align-self:center;margin:8px 12px 15px;text-align:center;
}
/* Basement vignette: entire precision-maintenance station must remain visible. */
.vio-home-canonical .vio-basement-band {grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);min-height:0!important;align-items:center;}
.vio-home-canonical .vio-basement-copy {padding:42px 24px 42px 42px;}
.vio-home-canonical .vio-basement-art {min-height:0!important;align-self:stretch;justify-content:center;align-items:flex-start;overflow:hidden!important;}
.vio-home-canonical .vio-basement-art .vio-robot-picture {max-width:390px;}
/* Narrow phone fix for the original code-versus-code demo cards. */
.vio-home-canonical .vio-demo-grid {grid-template-columns:repeat(3,minmax(0,1fr));}
.vio-home-canonical .vio-demo-card,.vio-home-canonical .vio-compare-lines,.vio-home-canonical .vio-demo-card pre {min-width:0;max-width:100%;}
.vio-home-canonical .vio-compare-lines > div {grid-template-columns:minmax(0,90px) minmax(0,1fr);}
.vio-home-canonical .vio-compare-lines code {min-width:0;overflow-wrap:anywhere;word-break:break-word;}
.vio-home-canonical .vio-sql-after,.vio-home-canonical .vio-sql-before {white-space:pre-wrap;overflow-wrap:anywhere;}
@media(max-width:900px){.vio-home-canonical .vio-demo-grid{grid-template-columns:1fr;}}
@media(max-width:400px){
  .vio-home-canonical .vio-compare-lines > div{grid-template-columns:minmax(0,70px) minmax(0,1fr);gap:5px;}
  .vio-home-canonical .vio-demo-card{padding:16px;}
}
/* Distinct responsive layouts: content first for reading; Violet remains anchored to art panel top. */
@media(max-width:1000px){
  .vio-home-canonical .vio-hero{grid-template-columns:1fr;gap:22px;}
  .vio-home-canonical .vio-hero-art{max-width:540px;margin-inline:auto;}
  .vio-home-canonical .vio-cloak-story{grid-template-columns:1fr;}
  .vio-home-canonical .vio-cloak-column{order:0;max-width:620px;width:100%;margin-inline:auto;}
  .vio-home-canonical .vio-cloak-copy{order:1;padding:14px 0;}
  .vio-home-canonical .vio-how-grid{grid-template-columns:1fr;}
  .vio-home-canonical .vio-how-art{max-width:540px;width:100%;margin-inline:auto;}
  .vio-home-canonical .vio-why-layout{grid-template-columns:1fr;}
  .vio-home-canonical .vio-friendly-art{max-width:560px;width:100%;margin-inline:auto;}
  .vio-home-canonical .vio-basement-band{grid-template-columns:1fr;}
  .vio-home-canonical .vio-basement-copy{padding:34px 28px 8px;}
  .vio-home-canonical .vio-basement-art{width:100%;}
}
@media(max-width:599px){
  .vio-home-canonical .vio-hero{padding-top:16px;gap:14px;}
  .vio-home-canonical .vio-hero-art {border-radius:20px;max-width:100%;}
  .vio-home-canonical .vio-cloak-story{padding:12px;margin-top:52px;gap:14px;}
  .vio-home-canonical .vio-cloak-column{min-height:0!important;}
  .vio-home-canonical .vio-cloak-copy h2{font-size:clamp(33px,9vw,42px);}
  .vio-home-canonical .vio-cloak-lead{font-size:16px;}
  .vio-home-canonical .vio-how-art {min-height:0!important;}
  .vio-home-canonical .vio-friendly-art {min-height:0!important;}
  .vio-home-canonical .vio-basement-band {margin-top:54px;}
  .vio-home-canonical .vio-basement-copy{padding:26px 22px 6px;}
  .vio-home-canonical .vio-basement-art .vio-robot-picture{max-width:320px;}
  .vio-home-canonical .vio-basement-copy h2{font-size:clamp(34px,8vw,43px);}
}
@media(prefers-reduced-motion:reduce){.vio-home-canonical .vio-robot-image{transition:none!important;}}