/* V8.5.2: isolated hero and video. No shared layout or legacy hero overrides. */
.twx-hero { --path-gold:#d7bc7e; --path-muted:#bccada; position:relative; isolation:isolate; overflow:hidden; color:#fff; background:radial-gradient(ellipse at 82% 40%,#1d3954 0,transparent 60%),#0d223a; }
.twx-hero::before { content:""; position:absolute; inset:0; background:url('../images/patterns/teachwiz-geometry-pattern.png') center right/auto 100% no-repeat; filter:invert(1); mix-blend-mode:screen; opacity:.16; mask-image:linear-gradient(125deg,transparent 30%,#000); pointer-events:none; }
.twx-hero::after { content:""; position:absolute; inset:auto 0 0; height:1px; background:linear-gradient(90deg,transparent,#bda06480,transparent); }
.twx-motes { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.72; }
.twx-shell { position:relative; display:grid; grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr); align-items:center; gap:clamp(40px,5.5vw,88px); padding-block:132px 68px; }
.twx-copy { padding-bottom:12px; }
.twx-copy .eyebrow { color:#dcc68f; margin:0 0 28px; font-size:.8125rem; line-height:1.65; letter-spacing:.12em; }
.twx-hero h1 { margin:0; color:#fff; font-size:clamp(2.8rem,4.4vw,4.5rem); line-height:1.07; letter-spacing:-.048em; font-weight:600; text-wrap:balance; }
.twx-hero h1 > span { display:block; color:#b9c8d8; margin-bottom:.24em; }
.twx-lead { max-width:48ch; margin:28px 0 30px; color:#c4d1de; font-size:1.0625rem; line-height:1.75; }
.twx-actions { display:flex; align-items:center; flex-wrap:wrap; gap:16px 24px; }
.twx-hero .btn { color:#13283f; background:#ecd69d; border:1px solid #ecd69d; box-shadow:none; }
.twx-hero .btn:hover { background:#f6e4b5; border-color:#f6e4b5; }
.twx-secondary { display:inline-flex; align-items:center; gap:12px; min-height:44px; font-size:.9375rem; line-height:1.4; color:#e4ebf3; text-decoration:underline; text-decoration-color:#718095; text-underline-offset:5px; }
.twx-hero :where(a,button):focus-visible { outline:2px solid #f2d594; outline-offset:5px; }
.twx-heading { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px 18px; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid #a9bbc32b; }
.twx-heading h2 { margin:0; font-size:.9375rem; line-height:1.5; font-weight:500; color:#e2eaf2; }
.twx-heading > span { font-size:.75rem; color:#adbed0; letter-spacing:.1em; text-transform:uppercase; }
.twx-body { position:relative; --rail:76px; }
.twx-route { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.twx-route-base { fill:none; stroke:#d7bc7e; stroke-width:1.15; opacity:.47; }
.twx-route-trace { display:none; }
/* Five active step stars: 01 → 02 → 03 → 04 → impact. */
.twx-impact { --step:4; }
:is(.twx-step,.twx-impact) > .twx-anchor::before,
:is(.twx-step,.twx-impact) > .twx-anchor::after {
  content:""; position:absolute; left:50%; top:50%; pointer-events:none;
  transform:translate(-50%,-50%) scale(.8);
  animation:twx-star-breathe 7.5s ease-in-out infinite;
  animation-delay:calc(var(--step) * 1.5s); animation-play-state:paused;
}
:is(.twx-step,.twx-impact) > .twx-anchor::before {
  width:14px; height:14px;
  background:#e5cd91;
  clip-path:polygon(50% 0,59% 40%,100% 50%,59% 60%,50% 100%,41% 60%,0 50%,41% 40%);
  opacity:.5;
  filter:drop-shadow(0 0 2px #eed69655);
}
:is(.twx-step,.twx-impact) > .twx-anchor::after {
  width:30px; height:30px; border-radius:50%;
  background:radial-gradient(circle,#ffe9af80 0,#ebc97835 30%,transparent 70%);
  opacity:0;
  filter:blur(.2px);
}
.twx-step > .twx-anchor, .twx-impact > .twx-anchor { background:transparent; border:0; box-shadow:none; }
.twx-hero[data-motion="on"] :is(.twx-step,.twx-impact) > .twx-anchor::before,
.twx-hero[data-motion="on"] :is(.twx-step,.twx-impact) > .twx-anchor::after { animation-play-state:running; }
@keyframes twx-star-breathe {
  0%,32%,100% { opacity:.5; transform:translate(-50%,-50%) scale(.8); }
  9% { opacity:1; transform:translate(-50%,-50%) scale(1.3); }
  20% { opacity:.62; transform:translate(-50%,-50%) scale(.94); }
}
.twx-source,.twx-step,.twx-impact { position:relative; padding-left:var(--rail); }
.twx-source { padding-block:0 22px; }
.twx-label { display:block; margin-bottom:8px; color:#dcc68f; font-size:.8125rem; line-height:1.5; letter-spacing:.09em; text-transform:uppercase; }
.twx-source strong { display:block; font-size:1.375rem; line-height:1.35; letter-spacing:-.02em; font-weight:600; }
.twx-source p { margin:7px 0 0; color:#c4d1de; font-size:1rem; line-height:1.55; }
.twx-anchor { position:absolute; z-index:1; left:28px; top:40px; width:8px; height:8px; background:#d3b677; border:2px solid #203952; border-radius:50%; box-shadow:0 0 0 1px #bca36d88; }
.twx-anchor-source { width:18px; height:18px; top:28px; left:21px; background:#e5cd91; border:0; box-shadow:none; clip-path:polygon(50% 0,59% 40%,100% 50%,59% 60%,50% 100%,41% 60%,0 50%,41% 40%); filter:drop-shadow(0 0 2px #eed69655); }
.twx-steps { list-style:none; padding:0; margin:0; }
.twx-step:nth-child(1) .twx-anchor { left:12px; }
.twx-step:nth-child(2) .twx-anchor { left:38px; }
.twx-step:nth-child(3) .twx-anchor { left:21px; }
.twx-step:nth-child(4) .twx-anchor { left:40px; }
.twx-step a { display:grid; grid-template-columns:28px 1fr 18px; gap:14px; align-items:start; padding:19px 0 20px; border-top:1px solid #a9bbc326; color:inherit; border-radius:2px; transition:background .2s; }
.twx-number { padding-top:3px; color:#d8bf86; font-size:.875rem; font-weight:500; font-variant-numeric:tabular-nums; }
.twx-step h3 { margin:0; color:#f8fafc; font-size:1.3125rem; font-weight:550; line-height:1.35; letter-spacing:-.018em; }
.twx-step p { margin:5px 0 0; color:#bfcede; font-size:1rem; line-height:1.55; }
.twx-link-mark { color:#9db2c8; font-size:1.125rem; transition:color .2s,transform .2s; }
.twx-step a:hover { background:#ffffff04; }
.twx-step a:hover .twx-link-mark { color:#f1d48b; transform:translate(2px,-2px); }
.twx-impact { padding-top:10px; }
.twx-anchor-impact { top:47px; left:24px; width:12px; height:12px; background:#f1d699; border:3px solid #203952; box-shadow:0 0 0 1px #c7a867; }
.twx-impact-copy { padding:19px 22px 21px; background:#ede8db; color:#183054; border-radius:3px 16px 16px 16px; border-left:3px solid #ceb477; }
.twx-impact .twx-label { color:#725820; margin-bottom:5px; font-size:.75rem; font-weight:600; }
.twx-impact strong { display:block; font-size:1.1875rem; line-height:1.45; font-weight:600; letter-spacing:-.02em; }
/* Keep the existing admin source selection. Only the empty state is new. */
body.v84 #video.twx-video { background:#f7f8fa; }
#video.twx-video::after { display:none; }
body.v84 #video.twx-video .video-container { max-width:1180px!important; }
#video.twx-video .video-frame { padding:0; aspect-ratio:auto; border:1px solid #c9d1d8; border-radius:14px; box-shadow:0 16px 50px #18305412; }
#video.twx-video .video-frame :where(video,iframe) { aspect-ratio:16/9; height:auto; border-radius:0; object-fit:contain; }
.twx-video-empty { position:relative; isolation:isolate; display:flex; flex-direction:column; justify-content:space-between; aspect-ratio:16/7.5; min-height:260px; padding:28px 32px; overflow:hidden; background:#fdfdfc; color:#183054; }
.twx-video-empty::before { content:""; position:absolute; z-index:-1; inset:0; background:url('../images/patterns/teachwiz-geometry-pattern.png') center/cover; opacity:.27; mask-image:linear-gradient(120deg,#000,transparent 45%,#000); }
.twx-video-brand { font-size:.9375rem; font-weight:600; letter-spacing:-.02em; }
.twx-video-message { display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:20px 0; }
.twx-video-symbol { display:grid; place-items:center; width:60px; height:60px; background:#183054; border-radius:50%; margin-bottom:6px; }
.twx-video-symbol svg { width:30px; height:30px; stroke:#eed69e; stroke-width:1.3; }
.twx-video-message strong { font-size:clamp(1.5rem,2.4vw,2rem); line-height:1.25; font-weight:550; letter-spacing:-.035em; }
.twx-video-message small { color:#536276; font-size:1rem; }
.twx-video-caption { color:#536276; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; }
@media (max-width:1150px) and (min-width:901px) { .twx-shell { gap:38px; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); padding-block:120px 52px; } .twx-hero h1 { font-size:2.8rem; } .twx-body { --rail:62px; } .twx-step a { gap:10px; grid-template-columns:24px 1fr 16px; } .twx-step h3 { font-size:1.2rem; } }
@media (max-width:900px) { .twx-shell { grid-template-columns:1fr; padding-block:116px 54px; gap:44px; } .twx-copy { max-width:660px; padding:0; } .twx-hero h1 { font-size:clamp(2.4rem,6.2vw,3.8rem); max-width:650px; } .twx-lead { max-width:60ch; } .twx-flow { max-width:660px; width:100%; } .twx-hero::before { background-size:auto 70%; background-position:bottom right; mask-image:linear-gradient(180deg,transparent 15%,#000); } }
@media (max-width:650px) { .twx-shell { padding-block:109px 42px; gap:36px; } .twx-copy .eyebrow { margin-bottom:22px; font-size:.75rem; letter-spacing:.07em; } .twx-hero h1 { font-size:clamp(2.1rem,8.7vw,3rem); line-height:1.12; } .twx-lead { margin:23px 0; font-size:1rem; line-height:1.65; } .twx-actions { flex-direction:column; align-items:stretch; gap:8px; } .twx-secondary { justify-content:center; } .twx-heading { margin-bottom:21px; padding-bottom:14px; } .twx-heading > span { font-size:.6875rem; } .twx-body { --rail:40px; } .twx-source strong { font-size:1.25rem; } .twx-source p { font-size:1rem; } .twx-anchor { left:12px!important; width:7px; height:7px; top:34px; } .twx-anchor-source { left:6px!important; width:18px; height:18px; top:28px; } .twx-anchor-impact { left:9px!important; width:12px; height:12px; top:45px; } .twx-step a { grid-template-columns:1fr 16px; gap:5px 8px; padding-block:16px 18px; } .twx-number { grid-column:1; padding:0; font-size:.8125rem; } .twx-step a > div { grid-column:1; } .twx-link-mark { grid-column:2; grid-row:1/3; } .twx-step h3 { font-size:1.1875rem; } .twx-step p { font-size:1rem; line-height:1.55; margin-top:6px; } .twx-impact-copy { padding:18px; } .twx-impact strong { font-size:1.125rem; } .twx-video-empty { padding:20px; min-height:300px; aspect-ratio:auto; } .twx-video-message small { font-size:.9375rem; } }
@media (prefers-reduced-motion:reduce) { .twx-motes,.twx-route-trace { display:none; } .twx-hero *, .twx-hero *::before, .twx-hero *::after { animation:none!important; transition:none!important; } }
@media print { .twx-motes,.twx-actions { display:none; } .twx-hero { print-color-adjust:exact; } }