/*
  V3 compatibility layer for the established standalone pages.
  Scope: shared navigation, spacing, typography, surfaces, CTA bands, and footer.
  Reason: preserve each page's working content and product-specific hero while the
  launch candidate moves onto one maintainable Magic AI Labs visual system.
*/
:root{
  --mai-black:#000;
  --mai-surface:#080909;
  --mai-surface-2:#101111;
  --mai-line:rgba(255,255,255,.1);
  --mai-line-strong:rgba(255,255,255,.18);
  --mai-text:#f5f7f8;
  --mai-muted:rgba(255,255,255,.68);
  --mai-quiet:rgba(255,255,255,.44);
  --mai-cyan:#22d3ee;
  --mai-blue:#3b82f6;
  --mai-amber:#fbbf24;
  --mai-gutter:clamp(16px,4.45vw,64px);
  --mai-max:1280px;
  --mai-font:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
}

body.legacy-v3{
  background:#000;
  color:var(--mai-text);
  font-family:var(--mai-font);
}
body.legacy-v3 a:focus-visible,
body.legacy-v3 button:focus-visible{
  outline:2px solid var(--mai-cyan);
  outline-offset:4px;
}
body.legacy-v3 .grain{
  opacity:.08;
  background-size:120px 120px,120px 120px;
}

/* The legacy header becomes the same restrained, aligned brand rail as V3. */
body.legacy-v3 .nav{
  position:sticky;
  inset:0 auto auto;
  width:min(var(--mai-max),calc(100% - (var(--mai-gutter) * 2)));
  min-height:92px;
  margin-inline:auto;
  padding:0;
  border-bottom:1px solid var(--mai-line);
  background:rgba(0,0,0,.84);
  box-shadow:none;
  backdrop-filter:blur(18px);
  z-index:80;
}
body.legacy-v3 .nav.is-scrolled{
  min-height:72px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:14px;
  background:rgba(5,7,7,.94);
  box-shadow:0 18px 48px rgba(0,0,0,.34);
}
body.legacy-v3 .nav .brand{
  gap:0;
  letter-spacing:0;
  text-transform:none;
}
body.legacy-v3 .nav .brand>span,
body.legacy-v3 .footer .brand>span{
  display:none;
}
body.legacy-v3 .brand-logo{
  width:210px;
  height:auto;
  filter:none;
}
body.legacy-v3 .nav.is-scrolled .brand-logo{width:154px}
body.legacy-v3 .nav-links{
  margin-left:auto;
  gap:3px;
  padding:4px;
  border:1px solid rgba(255,255,255,.085);
  background:rgba(255,255,255,.018);
  font-size:9px;
  font-weight:650;
  letter-spacing:.13em;
  color:#9aa3a5;
}
body.legacy-v3 .nav-links a{padding:9px 12px}
body.legacy-v3 .nav-links a::after{display:none}
body.legacy-v3 .nav-links a:hover,
body.legacy-v3 .nav-links a.active{
  color:#fff;
  background:rgba(255,255,255,.055);
}
body.legacy-v3 .nav>.cta{
  min-height:44px;
  margin-left:16px;
  padding:0 15px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:0;
  background:rgba(255,255,255,.02);
  box-shadow:none;
  color:#fff;
  font-size:9px;
  font-weight:650;
  letter-spacing:.12em;
}
body.legacy-v3 .nav>.cta::after{content:" ↗";color:var(--mai-cyan)}
body.legacy-v3 .nav>.cta:hover{
  border-color:rgba(34,211,238,.48);
  background:rgba(34,211,238,.055);
}
.legacy-menu-toggle,.legacy-mobile-nav{display:none}

/* Standard content rails remove the competing 1400px/54px legacy rhythm. */
body.legacy-v3 .hero-grid,
body.legacy-v3 .section-shell,
body.legacy-v3 .foot-grid{
  width:min(var(--mai-max),100%);
  margin-inline:auto;
}
body.legacy-v3 .section{
  padding:112px var(--mai-gutter);
  border-top:1px solid var(--mai-line);
}
body.legacy-v3 .section-label,
body.legacy-v3 .eyebrow,
body.legacy-v3 .atag{
  color:var(--mai-cyan);
  font-size:10px;
  font-weight:650;
  letter-spacing:.2em;
}
body.legacy-v3 .section h2{
  max-width:1020px;
  font-size:clamp(2.2rem,5vw,4.7rem);
  font-weight:620;
  letter-spacing:-.052em;
  line-height:1.01;
}
body.legacy-v3 .section-lead,
body.legacy-v3 .section p,
body.legacy-v3 .footer p{color:var(--mai-muted)}
body.legacy-v3 .panel,
body.legacy-v3 .feature-list,
body.legacy-v3 .feature-item,
body.legacy-v3 .meta-card{
  border-color:var(--mai-line);
  border-radius:0;
  background:linear-gradient(145deg,rgba(34,211,238,.025),transparent 44%),var(--mai-surface);
  box-shadow:none;
}
body.legacy-v3 .feature-item:hover,
body.legacy-v3 .panel:hover{
  border-color:rgba(34,211,238,.3);
  background:linear-gradient(135deg,rgba(34,211,238,.06),transparent 70%),var(--mai-surface);
}
body.legacy-v3 .icon,
body.legacy-v3 .kicker{color:var(--mai-cyan)}
body.legacy-v3 .cta{
  border-radius:0;
  font-size:9px;
  font-weight:650;
  letter-spacing:.13em;
}
body.legacy-v3 .cta.primary{
  border-color:#fff;
  background:#fff;
  color:#000;
  box-shadow:none;
}
body.legacy-v3 .cta.primary:hover{
  border-color:var(--mai-cyan);
  background:var(--mai-cyan);
  box-shadow:none;
}

/* Only the repeated legacy hero receives this editorial V3 treatment. */
body.legacy-v3 .hero:not(.voice-hero):not(.parking-hero)>.hero-grid{
  min-height:calc(100vh - 92px);
  padding-block:clamp(76px,8vw,116px);
}
body.legacy-v3 .hero:not(.voice-hero):not(.parking-hero) h1{
  max-width:920px;
  font-size:clamp(3.5rem,7.4vw,7rem);
  font-weight:650;
  letter-spacing:-.055em;
  line-height:.97;
}
body.legacy-v3 .hero:not(.voice-hero):not(.parking-hero) p{
  max-width:720px;
  color:var(--mai-muted);
  font-size:clamp(1.05rem,1.7vw,1.28rem);
  line-height:1.68;
}
body.legacy-v3 .hero-visual{
  border-color:var(--mai-line);
  border-radius:0;
  background:linear-gradient(135deg,rgba(34,211,238,.06),transparent 52%),#070808;
  box-shadow:none;
}

/* The closing stripe is the shared conversion signature on legacy pages. */
body.legacy-v3 .cta-band{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid rgba(34,211,238,.28);
  border-radius:0;
  background:#080a0b;
  box-shadow:none;
}
body.legacy-v3 .cta-band::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-40% -8% -40% 48%;
  transform:skewX(-12deg);
  background:repeating-linear-gradient(135deg,rgba(34,211,238,.22) 0 34px,rgba(59,130,246,.12) 34px 68px,rgba(251,191,36,.14) 68px 102px,transparent 102px 136px);
  mask-image:linear-gradient(90deg,transparent,#000 22%,#000);
}

body.legacy-v3 .footer{
  padding:64px var(--mai-gutter) 30px;
  border-top:1px solid var(--mai-line);
  background:#010101;
}
body.legacy-v3 .footer .brand-logo{width:210px}
body.legacy-v3 .footer-title{
  color:var(--mai-quiet);
  font-size:9px;
  font-weight:650;
  letter-spacing:.15em;
}
body.legacy-v3 .footer-links a{color:var(--mai-muted)}
body.legacy-v3 .footer-links a:hover{color:var(--mai-cyan)}
body.legacy-v3 .footer-note{
  color:var(--mai-quiet);
  letter-spacing:.11em;
}

@media(max-width:1140px){
  body.legacy-v3 .nav-links{display:none}
  .legacy-menu-toggle{
    display:grid;
    place-content:center;
    gap:6px;
    width:42px;
    height:42px;
    margin-left:auto;
    border:1px solid var(--mai-line);
    background:rgba(255,255,255,.018);
    color:#fff;
    cursor:pointer;
  }
  .legacy-menu-toggle span{display:block;width:17px;height:1px;background:currentColor;transition:.2s}
  body.legacy-v3.legacy-menu-open .legacy-menu-toggle span:first-child{transform:translateY(3.5px) rotate(45deg)}
  body.legacy-v3.legacy-menu-open .legacy-menu-toggle span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .legacy-mobile-nav{
    position:fixed;
    z-index:79;
    top:82px;
    left:var(--mai-gutter);
    right:var(--mai-gutter);
    display:none;
    padding:10px 18px 18px;
    border:1px solid var(--mai-line);
    background:rgba(3,3,3,.98);
    box-shadow:0 24px 60px rgba(0,0,0,.5);
  }
  body.legacy-v3.legacy-menu-open .legacy-mobile-nav{display:grid}
  .legacy-mobile-nav a{
    padding:14px 0;
    border-bottom:1px solid var(--mai-line);
    color:var(--mai-muted);
    font-size:10px;
    letter-spacing:.13em;
    text-transform:uppercase;
  }
  .legacy-mobile-nav a:last-child{border-bottom:0;color:#fff}
}

@media(max-width:720px){
  body.legacy-v3 .nav{
    width:calc(100% - 32px);
    min-height:80px;
  }
  body.legacy-v3 .nav.is-scrolled{
    width:calc(100% - 20px);
    min-height:62px;
    padding:0 11px;
  }
  body.legacy-v3 .nav .brand-logo{width:182px}
  body.legacy-v3 .nav.is-scrolled .brand-logo{width:140px}
  body.legacy-v3 .nav>.cta{display:none}
  .legacy-mobile-nav{top:72px;left:10px;right:10px}
  body.legacy-v3 .section{padding:78px 16px}
  body.legacy-v3 .hero:not(.voice-hero):not(.parking-hero)>.hero-grid{
    min-height:auto;
    padding-block:60px 76px;
  }
  body.legacy-v3 .hero:not(.voice-hero):not(.parking-hero) h1{
    font-size:clamp(3rem,15vw,5rem);
  }
  body.legacy-v3 .cta-band{padding:28px 24px}
  body.legacy-v3 .cta-band::before{inset:36% -30% -45% 20%;opacity:.72}
  body.legacy-v3 .footer{padding:54px 16px 26px}
  /* Park Scan Go keeps its cinematic canvas, but phone copy and status occupy separate vertical zones so they never collide. */
  body.legacy-v3 .parking-hero .hero-content{
    top:44%;
    width:calc(100% - 32px);
    transform:translate(-50%,-50%);
  }
  body.legacy-v3 .parking-hero::after{
    content:"";
    position:absolute;
    z-index:1;
    inset:0;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.72) 26%,rgba(0,0,0,.6) 68%,rgba(0,0,0,.06) 100%);
  }
  body.legacy-v3 .parking-hero .sub{margin-inline:auto;color:rgba(255,255,255,.68)}
  body.legacy-v3 .parking-hero .stag{color:rgba(255,255,255,.84)}
  body.legacy-v3 .parking-hero .btns{justify-content:center}
  body.legacy-v3 .parking-hero .flow-label{display:none}
  body.legacy-v3 .parking-mode{
    left:50%;
    right:auto;
    bottom:7%;
    transform:translateX(-50%);
  }
}

@media(prefers-reduced-motion:reduce){
  body.legacy-v3 .nav,
  body.legacy-v3 .brand-logo,
  .legacy-menu-toggle span{transition:none}
}