/* EncorAI v18: site look brought in line with the locked video style (video/kit/STYLE.md).
   Loaded last. Palette: bg #040817, lift #0E1A36, panel #111B2C, text #EFF4FC, muted #91A2BE,
   green #74E7B4, purple #AD8CFA, yellow #F6D875, lines #34465F. */
:root{--lift:#0E1A36;--display:"Segoe UI","Segoe UI Variable Display",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif}

/* Deep background: radial lift, vignette, drifting stars */
html{background:#040817 radial-gradient(1200px 820px at 70% -40px,#0E1A36 0%,#0a1330 38%,transparent 72%) no-repeat!important}
body{background:transparent!important;font-family:var(--display)!important}
button,input,select,summary{font-family:var(--display)}
body::before{opacity:.8}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 40%,transparent 52%,#02040cc7 100%)}

/* Big confident type */
h1,.home-hero h1,.explore-intro h1,.detail-intro h1,.lab-intro h1{font-family:var(--display)!important;font-weight:700!important;font-size:clamp(36px,5.2vw,66px)!important;line-height:1.05!important;letter-spacing:-.022em!important;max-width:16em!important;margin:18px 0 20px!important;text-wrap:balance}
.home-hero h1{font-size:clamp(34px,4.3vw,56px)!important;max-width:none!important}
h1 em{font-style:normal;filter:drop-shadow(0 0 22px #74e7b440)}
h2,[data-layout-panel] h2{font-family:var(--display)!important;font-weight:700!important;letter-spacing:-.012em!important}
[data-layout-panel] h2{font-size:clamp(24px,2.6vw,32px)!important;line-height:1.2!important}
h3,[data-layout-panel] h3{font-weight:700!important}
.lead,.home-hero .lead,.explore-intro .lead{font-size:clamp(16px,1.35vw,18px)!important;line-height:1.7!important;color:#c3cfe2!important}
p{text-wrap:pretty}

/* Tagline: the payoff line */
.tagline{margin:16px 0 0!important;font-size:clamp(22px,2.6vw,32px)!important;font-weight:700!important;letter-spacing:-.01em!important;line-height:1.1;color:#74E7B4!important;text-shadow:0 0 26px #74e7b466}
.footer-tag{margin:18px 0 4px;font-size:20px;font-weight:700;color:#74E7B4;text-shadow:0 0 22px #74e7b455}

/* Chapter pills (video chapter() pill) */
.eyebrow,.chapter-pill{display:flex!important;width:fit-content;align-items:center;gap:9px;max-width:100%;box-sizing:border-box;margin:0;padding:8px 15px!important;border:1px solid #34465F;border-radius:999px;background:#111B2Cd9;color:#EFF4FC!important;font-size:12px!important;font-weight:700!important;letter-spacing:.13em!important;line-height:1.35!important;text-transform:uppercase}
.pill-dot,.eyebrow>span:empty{flex:none;width:8px!important;height:8px!important;border-radius:50%;background:#74E7B4!important;box-shadow:0 0 12px #74E7B4}

/* Header */
header{border-color:#34465F80!important}
header nav a{font-size:14px!important;font-weight:600}
nav a[aria-current="page"]{color:#74E7B4!important}

/* Buttons */
.button.primary{border-radius:999px!important;padding:15px 24px!important;font-size:15px!important;font-weight:700!important;box-shadow:0 0 0 1px #74e7b4,0 0 34px #74e7b459!important;min-height:48px}
.button.primary:hover,.button.primary:focus-visible{background:#8ff0c6!important;box-shadow:0 0 0 1px #8ff0c6,0 0 46px #74e7b480!important}
.text-link{font-size:14px!important;font-weight:700}

/* Panels with depth and glow */
[data-layout-panel].wrap,.follow-block{background:linear-gradient(180deg,#15233d 0%,#111B2C 34%,#0c1526 100%)!important;border:1px solid #34465F!important;border-radius:22px!important;box-shadow:inset 0 1px 0 #ffffff12,0 30px 70px -40px #000,0 0 90px -60px #ad8cfa!important}
[data-layout-panel] article,.lesson-card,.theme-door,.inside-links a,.follow-card,.faq-list details{border-radius:16px!important;border-color:#34465F!important;transition:border-color .2s,box-shadow .2s,transform .2s}
.lesson-card:hover,a.theme-door:hover,.inside-links a:hover,.follow-card:hover,.pub-card:hover,.route-chip:hover,.lesson-card:focus-within,a.theme-door:focus-visible,.inside-links a:focus-visible,.follow-card:focus-visible,.pub-card:focus-visible,.route-chip:focus-visible{border-color:#74E7B4!important;box-shadow:0 0 0 1px #74E7B4,0 0 30px #74e7b440}
.tag{font-weight:700!important;letter-spacing:.12em!important}

/* Home hero: copy left, featured video right */
.home-hero{position:relative;display:grid!important;align-items:start!important;gap:44px!important;padding-block:54px 40px!important;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr)!important}
.feature-video{position:relative;min-width:0;padding:18px 18px 16px;border:1px solid #34465F;border-radius:24px;background:linear-gradient(180deg,#15233d,#0c1526);box-shadow:inset 0 1px 0 #ffffff14,0 0 110px -30px #ad8cfa8c,0 0 70px -40px #74e7b4,0 40px 80px -50px #000}
.feature-video .yt-facade{max-width:none;margin:14px 0 14px;border-radius:14px}
.feature-video .yt-play img{opacity:.92}
.feature-video h2{margin:0 0 8px;font-size:clamp(21px,2.1vw,27px);line-height:1.18;color:#EFF4FC}
.feature-desc{margin:0 0 10px;color:#c3cfe2;font-size:15px;line-height:1.6}
.feature-video .yt-note{margin:0 0 10px}
.model-note{margin:0;padding-top:10px;border-top:1px solid #34465F;font-size:12px;line-height:1.55;color:#91A2BE}
.model-note b{margin-right:8px;color:#AD8CFA;letter-spacing:.12em}
.yt-btn{box-shadow:0 0 0 8px #74e7b426,0 0 40px #74e7b4a6}
.yt-label{border-radius:999px!important;padding:7px 13px!important}
.route-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.route-chip{display:inline-flex;flex-flow:row nowrap!important;align-items:center;gap:9px;min-height:44px;padding:0 15px;border:1px solid #34465F;border-radius:999px;background:#0a1222;color:#EFF4FC;font-size:13px;font-weight:700;text-decoration:none;transition:border-color .2s,box-shadow .2s}
.route-chip svg{display:block;width:20px!important;height:20px!important;min-width:20px;flex:none;align-self:center}
.route-chip span{white-space:nowrap}

/* Band under the hero: isometric scene + the concept map */
.system-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center;padding:6px 0 34px}
.system-band .system-visual{margin-top:0!important}
.iso-art{display:block;width:100%;height:auto;max-width:720px;pointer-events:none;user-select:none}

/* Learn: intro art and one card per published lesson */
.explore-intro{position:relative}
.intro-art{position:absolute;right:0;top:34px;width:46%;z-index:-1}
.published{margin:0 auto 30px}
.pub-head{margin-bottom:20px}
.pub-head h2{margin:14px 0 6px;font-size:clamp(28px,3.4vw,44px);line-height:1.08;color:#EFF4FC}
.pub-head p:last-child{margin:0;color:#91A2BE;font-size:15px}
.pub-grid{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:16px}
.pub-card{grid-column:span 6;display:flex;flex-direction:column;gap:10px;min-width:0;padding:16px;border:1px solid #34465F;border-radius:18px;background:linear-gradient(180deg,#15233d,#0c1526);color:#EFF4FC;text-decoration:none;box-shadow:inset 0 1px 0 #ffffff10;transition:border-color .2s,box-shadow .2s}
.pub-card.full{grid-column:span 15;padding:14px 14px 18px}
.pub-thumb{display:block;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:#040817}
.pub-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.pub-kind{font-size:12px;font-weight:700;letter-spacing:.13em;color:#F6D875}
.pub-card.short .pub-kind{color:#AD8CFA}
.pub-card b{font-size:16px;font-weight:700;line-height:1.28;overflow-wrap:anywhere}
.pub-card.full b{font-size:clamp(19px,1.9vw,24px);line-height:1.2}
.pub-go{margin-top:auto;padding-top:6px;font-size:13px;font-weight:700;color:#74E7B4}
.pub-card.short::before{content:"\25B6";display:grid;place-items:center;height:74px;border-radius:12px;background:radial-gradient(circle at 28% 18%,#ad8cfa4d,transparent 62%),radial-gradient(circle at 80% 90%,#74e7b426,transparent 60%),#0a1222;border:1px solid #34465F;color:#EFF4FC;font-size:20px}

/* Footer */
footer.wrap{border-top:1px solid #34465F80}

@media(max-width:1000px){
  .pub-card{grid-column:span 10}
  .pub-card.full{grid-column:span 15}
  .pub-card.short:nth-of-type(n+6){grid-column:span 15}
}
@media(max-width:950px){
  .home-hero{display:flex!important;flex-direction:column;align-items:stretch!important;gap:0!important;padding-block:26px 22px!important}
  .hero-v3-copy{display:contents}
  .home-hero .eyebrow{order:1;align-self:flex-start}.home-hero .tagline{order:2}.home-hero h1{order:3}.feature-video{order:4;margin:6px 0 26px}.home-hero .lead{order:5}.home-hero .hero-actions{order:6}.route-chips{order:7}

  .system-band{display:block;padding-bottom:22px}
  .system-band .iso-art{display:none}
  .intro-art{position:static;width:100%;margin-top:18px}
}
@media(max-width:650px){
  h1,.home-hero h1,.explore-intro h1,.detail-intro h1,.lab-intro h1{font-size:clamp(34px,10.4vw,44px)!important}
  .home-hero h1{font-size:clamp(32px,9.6vw,40px)!important}
  .eyebrow,.chapter-pill{border-radius:16px;letter-spacing:.1em!important}
  [data-layout-panel].wrap,.follow-block{border-radius:18px!important}
  .feature-video{padding:12px 12px 14px;border-radius:20px}
  .route-chips{display:grid;grid-template-columns:1fr 1fr}
  .route-chip .h{display:none}
  .button.primary{font-size:14px!important;padding:14px 20px!important}
  .pub-grid{gap:12px}
  .pub-card,.pub-card.short:nth-of-type(n+6){grid-column:span 15}
  .pub-card.full,.pub-card.short:last-child{grid-column:span 30}
  .pub-card.short::before{height:56px}
  .pub-card b{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.pub-card,.route-chip,.lesson-card,.theme-door{transition:none}}

/* ---- v18b: more visuals ---- */
/* Hero stage: isometric server row with glow, spans the hero under the copy and video */
.hero-stage{grid-column:1/-1;display:block;width:100%;height:auto;margin-top:-6px;pointer-events:none;user-select:none}
.system-band{display:block;padding:0 0 34px}
.system-band .system-visual{max-width:780px;margin-inline:auto}

/* "Watch the 50-second version" tile */
.short-tile{display:flex;align-items:center;gap:14px;margin:4px 0 14px;padding:10px 14px 10px 10px;border:1px solid #34465F;border-radius:16px;background:#0a1222;color:#EFF4FC;text-decoration:none;transition:border-color .2s,box-shadow .2s}
.short-tile:hover,.short-tile:focus-visible{border-color:#AD8CFA;box-shadow:0 0 0 1px #AD8CFA,0 0 30px #ad8cfa55}
.short-tile img{flex:none;width:54px;height:96px;object-fit:cover;border-radius:9px;border:1px solid #34465F}
.short-copy{flex:1;min-width:0}
.short-copy b{display:block;font-size:clamp(17px,1.6vw,20px);font-weight:700;line-height:1.2}
.short-copy small{display:block;margin-top:4px;font-size:13px;color:#91A2BE}
.short-go{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#AD8CFA;color:#04121a;font-size:16px;box-shadow:0 0 26px #ad8cfa80}

/* One visual per lesson card */
.pub-card.short::before{content:none}
.pub-svg{display:block;width:100%;height:100%}
.pub-card.short .pub-thumb{border:1px solid #34465F}

/* Follow block: bigger icons, bigger words */
.follow-copy h2{font-size:clamp(28px,3.2vw,40px)!important;line-height:1.1!important}
.follow-card{min-height:68px!important;padding:12px 16px!important;border-radius:16px!important}
.follow-card svg{width:36px!important;height:36px!important}
.follow-card b{font-size:17px!important}
.follow-card small{font-size:13px!important}

@media(max-width:950px){
  .hero-stage{order:8;height:120px;object-fit:cover;margin-top:18px}
}
@media(prefers-reduced-motion:reduce){.short-tile{transition:none}}