/* Public WingWorks landing page. The product preview below hosts the real
   initialized app, so every rule in this file stays scoped to landing mode. */
#landingPage{
  --lpMax:1440px;
  display:none;
  min-height:100vh;
  overflow:hidden;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--mono);
}
html.landing-boot,
html.landing,
body.landing-boot,
body.landing{
  height:auto;
  min-height:100%;
  overflow:auto;
  scroll-behavior:smooth;
}
body.landing-boot #landingPage,
body.landing #landingPage{display:block}
body.landing-boot #app,
body.landing #app,
body.landing-boot #designsView,
body.landing #designsView{
  position:fixed;
  inset:0;
  visibility:hidden;
  pointer-events:none;
}
body.landing #authModal{
  z-index:100;
  background:rgba(4,6,10,.76);
  backdrop-filter:blur(6px);
}

#landingPage a{color:inherit}
#landingDesigner,
#landingWorkflow,
#landingClassroom,
#landingAccess{scroll-margin-top:82px}
.lpSkip{
  position:fixed;
  top:10px;
  left:10px;
  z-index:80;
  padding:10px 14px;
  border-radius:3px;
  background:var(--acc);
  color:var(--accDark)!important;
  font-size:11px;
  font-weight:600;
  text-decoration:none;
  transform:translateY(-150%);
}
.lpSkip:focus{transform:none}

/* ---------- navigation ---------- */
.lpNav{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  align-items:center;
  gap:34px;
  min-height:64px;
  padding-inline:max(24px,calc((100vw - var(--lpMax))/2));
  border-bottom:1px solid var(--line);
  background:rgba(16,20,28,.96);
}
.lpBrand{
  display:flex;
  flex:none;
  align-items:center;
  gap:11px;
  text-decoration:none;
}
.lpBrand img{
  display:block;
  width:44px;
  height:28px;
  object-fit:contain;
}
.lpBrandText{display:flex;flex-direction:column;line-height:1}
.lpBrandText b{
  font-family:var(--display);
  font-size:20px;
  font-weight:700;
  letter-spacing:2.2px;
  text-transform:uppercase;
}
.lpBrandText b em{color:var(--accText);font-style:normal}
.lpBrandText small{
  margin-top:4px;
  color:var(--faint);
  font-size:8.5px;
  letter-spacing:1.5px;
  text-transform:uppercase;
}
.lpLinks{display:flex;align-items:center;gap:25px}
.lpLinks a{
  color:var(--dim);
  font-size:10.5px;
  letter-spacing:1px;
  text-decoration:none;
}
.lpLinks a:hover{color:var(--txt)}
.lpNavActions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
}
.lpButton,
.lpGhost,
.lpTextButton{
  appearance:none;
  min-height:44px;
  border-radius:3px;
  cursor:pointer;
  font-family:var(--display)!important;
  font-size:14px!important;
  font-weight:600;
  letter-spacing:1.4px;
  text-transform:uppercase;
  transition:background .12s,border-color .12s,color .12s;
}
.lpButton{
  padding:0 20px;
  border:1px solid var(--acc);
  background:var(--acc);
  color:var(--accDark);
  font-weight:700;
}
.lpButton:hover{filter:brightness(1.08)}
.lpGhost{
  padding:0 20px;
  border:1px solid var(--line2);
  background:var(--panel2);
  color:var(--txt);
}
.lpGhost:hover{border-color:var(--acc);color:var(--accText)}
.lpTextButton{
  padding:0 14px;
  border:1px solid transparent;
  background:transparent;
  color:var(--dim);
}
.lpTextButton:hover{color:var(--txt)}
.lpButton:focus-visible,
.lpGhost:focus-visible,
.lpTextButton:focus-visible,
.lpLinks a:focus-visible,
.lpBrand:focus-visible{
  outline:2px solid var(--acc);
  outline-offset:3px;
}

/* ---------- hero ---------- */
.lpHero{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);
  gap:72px;
  align-items:end;
  width:min(var(--lpMax),100%);
  margin:0 auto;
  padding:96px 28px 76px;
}
.lpKicker{
  margin:0 0 16px;
  color:var(--accText);
  font-size:10px;
  font-weight:600;
  letter-spacing:1.7px;
  text-transform:uppercase;
}
.lpHero h1{
  max-width:940px;
  margin:0;
  font-family:var(--display);
  font-size:clamp(50px,5.3vw,70px);
  font-weight:700;
  letter-spacing:-.5px;
  line-height:.98;
  text-wrap:balance;
}
.lpHeroIntro>p:first-child{
  margin:0;
  color:#B3BBC5;
  font-family:var(--display);
  font-size:20px;
  line-height:1.55;
  text-wrap:pretty;
}
.lpActions{display:flex;flex-wrap:wrap;gap:10px;margin-top:27px}
.lpHeroNote{
  margin:18px 0 0!important;
  color:var(--faint)!important;
  font-family:var(--mono)!important;
  font-size:10.5px!important;
  line-height:1.65!important;
}

/* ---------- shared section headers ---------- */
.lpSectionIntro{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(340px,.72fr);
  gap:70px;
  align-items:end;
  margin-bottom:30px;
}
.lpSectionIntro h2,
.lpClassroom h2,
.lpAccess h2{
  margin:0;
  font-family:var(--display);
  font-size:clamp(36px,4vw,48px);
  font-weight:700;
  line-height:1.02;
}
.lpSectionIntro>p{
  margin:0;
  color:var(--dim);
  font-family:var(--display);
  font-size:17px;
  line-height:1.55;
}

/* ---------- real embedded designer ---------- */
.lpDesigner{
  width:min(var(--lpMax),100%);
  margin:0 auto;
  padding:0 28px 104px;
}
.lpPreviewShell{
  overflow:hidden;
  border:1px solid var(--line2);
  border-radius:4px;
  background:var(--panel);
  box-shadow:0 28px 70px rgba(0,0,0,.28);
}
.lpPreviewBar{
  display:flex;
  min-height:42px;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 14px;
  border-bottom:1px solid var(--line);
  color:var(--faint);
  font-size:10px;
  letter-spacing:.5px;
}
.lpPreviewBar b{color:var(--txt);font-weight:600}
#landingDesignerHost{
  min-height:700px;
  overflow:hidden;
  background:var(--bg);
}
body.landing #app.lpLandingPreviewApp{
  position:relative;
  inset:auto;
  display:flex;
  width:100%;
  height:700px;
  visibility:visible;
  pointer-events:auto;
}
body.landing #app.lpLandingPreviewApp #main{visibility:visible}
body.landing #app.lpLandingPreviewApp #topbar .readout,
body.landing #app.lpLandingPreviewApp #topbar .chip,
body.landing #app.lpLandingPreviewApp #topbar #tweakBtn{visibility:visible}
body.landing #app.lpLandingPreviewApp #libBtn,
body.landing #app.lpLandingPreviewApp #panelToggle,
body.landing #app.lpLandingPreviewApp #statsToggle{display:none}
body.landing.panel-collapsed #app.lpLandingPreviewApp #panel{display:block}
body.landing.stats-collapsed #app.lpLandingPreviewApp #stats{display:flex}
body.landing #app.lpLandingPreviewApp #panel{
  width:310px;
  min-width:310px;
}
body.landing #app.lpLandingPreviewApp #stats{
  width:290px;
  min-width:290px;
}
.lpViewportGate,
.lpViewportExit{
  position:absolute;
  z-index:18;
  appearance:none;
  border:1px solid var(--line2);
  border-radius:3px;
  background:rgba(16,20,28,.94);
  color:var(--txt);
  cursor:pointer;
  font-family:var(--mono);
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}
.lpViewportGate{
  top:16px;
  left:16px;
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:196px;
  padding:12px 14px;
}
.lpViewportGate b{
  color:var(--accText);
  font-family:var(--display);
  font-size:16px;
  letter-spacing:1px;
  text-transform:uppercase;
}
.lpViewportGate span{color:var(--dim);font-size:10px}
.lpViewportExit{
  top:14px;
  right:14px;
  padding:9px 11px;
  color:var(--accText);
  font-size:9px;
  letter-spacing:.5px;
  text-transform:uppercase;
}
.lpViewportGate:hover,
.lpViewportExit:hover{border-color:var(--acc)}
.lpViewportGate:focus-visible,
.lpViewportExit:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.lpViewportGate[hidden],
.lpViewportExit[hidden]{display:none}
body:not(.landing) .lpViewportGate,
body:not(.landing) .lpViewportExit{display:none}
body.landing #app.lpLandingPreviewApp #hud{display:none}
body.landing #app.lpLandingPreviewApp.lpViewportInteracting #hud{display:block}
.lpPreviewLegend{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  border-left:1px solid var(--line);
}
.lpPreviewLegend>div{
  display:grid;
  grid-template-columns:32px 1fr;
  gap:3px 10px;
  padding:20px 18px 22px;
  border-right:1px solid var(--line);
}
.lpPreviewLegend>div:last-child{border-right:0}
.lpPreviewLegend span{
  grid-row:1/3;
  color:var(--accText);
  font-size:9.5px;
  font-weight:600;
}
.lpPreviewLegend b{
  font-family:var(--display);
  font-size:16px;
  letter-spacing:.6px;
  text-transform:uppercase;
}
.lpPreviewLegend p{
  margin:4px 0 0;
  color:var(--dim);
  font-family:var(--display);
  font-size:14px;
  line-height:1.45;
}

/* ---------- workflow ---------- */
.lpWorkflow{
  width:min(var(--lpMax),100%);
  margin:0 auto;
  padding:96px 28px 110px;
  border-top:1px solid var(--line);
}
.lpWorkflowRows{border-bottom:1px solid var(--line)}
.lpWorkflowRow{
  display:grid;
  grid-template-columns:56px minmax(0,1.15fr) minmax(280px,.72fr);
  gap:28px;
  padding:34px 0 36px;
  border-top:1px solid var(--line);
}
.lpRowNo{
  color:var(--accText);
  font-size:10px;
  font-weight:600;
  padding-top:5px;
}
.lpWorkflowRow h3{
  margin:0;
  font-family:var(--display);
  font-size:27px;
  font-weight:600;
  line-height:1.08;
}
.lpWorkflowRow p{
  max-width:700px;
  margin:10px 0 0;
  color:var(--dim);
  font-family:var(--display);
  font-size:16px;
  line-height:1.55;
}
.lpWorkflowRow ul{
  display:grid;
  align-content:start;
  gap:9px;
  margin:4px 0 0;
  padding:0;
  color:#AAB2BD;
  font-size:10.5px;
  line-height:1.5;
  list-style:none;
}
.lpWorkflowRow li{position:relative;padding-left:15px}
.lpWorkflowRow li::before{
  content:"";
  position:absolute;
  top:.55em;
  left:0;
  width:5px;
  height:5px;
  background:var(--acc);
}

/* ---------- classroom ---------- */
.lpClassroom{
  display:grid;
  grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);
  gap:90px;
  width:min(var(--lpMax),100%);
  margin:0 auto;
  padding:104px 28px 112px;
  border-top:1px solid var(--line);
}
.lpClassroomCopy>p:not(.lpKicker){
  margin:18px 0 26px;
  color:var(--dim);
  font-family:var(--display);
  font-size:17px;
  line-height:1.55;
}
.lpClassroomList{margin:0;border-bottom:1px solid var(--line)}
.lpClassroomList>div{
  display:grid;
  grid-template-columns:190px 1fr;
  gap:28px;
  padding:22px 0;
  border-top:1px solid var(--line);
}
.lpClassroomList dt{
  color:var(--txt);
  font-family:var(--display);
  font-size:17px;
  font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase;
}
.lpClassroomList dd{
  margin:0;
  color:var(--dim);
  font-family:var(--display);
  font-size:15px;
  line-height:1.5;
}

/* ---------- access + footer ---------- */
.lpAccess{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:50px;
  align-items:center;
  width:min(calc(var(--lpMax) - 56px),calc(100% - 56px));
  margin:0 auto 96px;
  padding:38px 40px;
  border:1px solid var(--line2);
  border-left:3px solid var(--acc);
  border-radius:3px;
  background:var(--panel);
}
.lpAccess h2{font-size:38px}
.lpAccess>div>p:not(.lpKicker){
  max-width:680px;
  margin:12px 0 0;
  color:var(--dim);
  font-family:var(--display);
  font-size:16px;
  line-height:1.5;
}
.lpAccessActions{display:flex;gap:9px}
.lpFooter{
  padding:28px max(24px,calc((100vw - var(--lpMax))/2));
  border-top:1px solid var(--line);
  background:var(--panel);
}
.lpFooterInner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
}
.lpFooter .lpBrandText b{font-size:16px}
.lpFooterMeta{
  color:var(--faint);
  font-size:9px;
  letter-spacing:1px;
  text-align:right;
  text-transform:uppercase;
}

/* ---------- responsive product preview ---------- */
@media (max-width:1220px){
  body.landing #app.lpLandingPreviewApp #panel{
    width:270px;
    min-width:270px;
  }
  body.landing #app.lpLandingPreviewApp #stats{
    width:260px;
    min-width:260px;
  }
  .lpHero{gap:48px}
}
@media (max-width:1000px){
  .lpHero,
  .lpSectionIntro{
    grid-template-columns:1fr;
    gap:28px;
  }
  .lpHero{padding-top:74px}
  .lpHeroIntro{max-width:680px}
  .lpSectionIntro>p{max-width:720px}
  body.landing #app.lpLandingPreviewApp #stats,
  body.landing.stats-collapsed #app.lpLandingPreviewApp #stats{display:none}
  .lpWorkflowRow{
    grid-template-columns:48px 1fr;
  }
  .lpWorkflowRow ul{
    grid-column:2;
    grid-template-columns:repeat(3,1fr);
  }
  .lpClassroom{
    grid-template-columns:1fr;
    gap:42px;
  }
  .lpClassroomCopy{max-width:700px}
}
@media (max-width:780px){
  .lpNav{padding-inline:18px}
  .lpLinks{display:none}
  .lpBrandText small{display:none}
  .lpHero,
  .lpDesigner,
  .lpWorkflow,
  .lpClassroom{padding-right:18px;padding-left:18px}
  .lpHero{padding-top:60px;padding-bottom:58px}
  .lpHero h1{font-size:clamp(44px,11vw,58px)}
  .lpDesigner{padding-bottom:80px}
  .lpPreviewBar span:last-child{display:none}
  #landingDesignerHost{min-height:500px}
  body.landing #app.lpLandingPreviewApp{height:500px}
  body.landing #app.lpLandingPreviewApp #panel,
  body.landing.panel-collapsed #app.lpLandingPreviewApp #panel,
  body.landing #app.lpLandingPreviewApp #stats,
  body.landing.stats-collapsed #app.lpLandingPreviewApp #stats{display:none}
  body.landing #app.lpLandingPreviewApp #topbar{
    gap:8px;
    padding:0 12px;
  }
  body.landing #app.lpLandingPreviewApp #topbar .readout,
  body.landing #app.lpLandingPreviewApp #topbar .chip,
  body.landing #app.lpLandingPreviewApp #panelToggle,
  body.landing #app.lpLandingPreviewApp #statsToggle,
  body.landing #app.lpLandingPreviewApp #tweakBtn{display:none}
  body.landing #app.lpLandingPreviewApp.lpViewportInteracting #hud{display:none}
  .lpPreviewDesktopCopy{display:none}
  .lpPreviewLegend{grid-template-columns:1fr}
  .lpPreviewLegend>div{
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .lpPreviewLegend>div:last-child{border-bottom:0}
  .lpWorkflow{padding-top:76px;padding-bottom:86px}
  .lpWorkflowRow{
    grid-template-columns:34px 1fr;
    gap:18px;
  }
  .lpWorkflowRow ul{
    grid-template-columns:1fr;
    gap:7px;
  }
  .lpClassroom{padding-top:80px;padding-bottom:88px}
  .lpClassroomList>div{grid-template-columns:1fr;gap:7px}
  .lpAccess{
    grid-template-columns:1fr;
    width:calc(100% - 36px);
    margin-bottom:72px;
    padding:30px 26px;
  }
  .lpAccessActions{flex-wrap:wrap}
}
@media (max-width:520px){
  .lpNavActions .lpTextButton{display:none}
  .lpNavActions .lpButton{padding:0 14px;font-size:12px!important}
  .lpBrand img{width:38px}
  .lpHero h1{font-size:43px}
  .lpHeroIntro>p:first-child{font-size:18px}
  .lpActions{display:grid}
  .lpActions button{width:100%}
  .lpSectionIntro h2,
  .lpClassroom h2{font-size:36px}
  .lpPreviewBar{font-size:9px;line-height:1.4}
  #landingDesignerHost{min-height:430px}
  body.landing #app.lpLandingPreviewApp{height:430px}
  body.landing #app.lpLandingPreviewApp #topbar .brand .tagline,
  body.landing #app.lpLandingPreviewApp #placard{display:none}
  body.landing #app.lpLandingPreviewApp #hud{display:none}
  .lpAccessActions{display:grid}
  .lpAccessActions button{width:100%}
  .lpFooterInner{align-items:flex-start;flex-direction:column}
  .lpFooterMeta{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  html.landing-boot,
  html.landing,
  body.landing-boot,
  body.landing{scroll-behavior:auto}
  .lpButton,
  .lpGhost,
  .lpTextButton{transition:none}
}

.lpFooterLink{background:none;border:0;padding:0;color:var(--faint);cursor:pointer;
  font-size:9px;letter-spacing:1px;text-transform:inherit;text-decoration:underline;
  text-underline-offset:2px;font-family:inherit}
.lpFooterLink:hover{color:var(--dim)}