.student-story {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(ellipse at 90% 12%, rgba(74, 87, 149, .11), transparent 42%), #07121f;
}
.student-story[hidden] { display: none !important; }
.student-story::before { position: absolute; z-index: -1; inset: 0; content: ""; pointer-events: none; background-image: linear-gradient(rgba(117, 237, 240, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(117, 237, 240, .025) 1px, transparent 1px); background-size: 70px 70px; mask-image: linear-gradient(transparent, #000 35%, transparent); }
.student-story-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .34fr); align-items: end; gap: 48px; margin-bottom: clamp(32px, 5vw, 64px); }
.student-story .student-story-heading h2 { max-width: 900px; margin-bottom: 0; font-size: clamp(2rem, 3.7vw, 4.2rem); line-height: 1.17; letter-spacing: -.026em; }
.student-story-heading > p { margin: 0 0 5px; color: #adc4d1; font-size: 1rem; line-height: 1.8; }
.student-disclosure { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); border-block: 1px solid rgba(117, 237, 240, .23); background: linear-gradient(115deg, rgba(12, 32, 47, .8), rgba(15, 27, 42, .55)); }
.student-message { position: relative; padding: clamp(26px, 4vw, 52px); }
.student-message-header { display: flex; align-items: center; gap: 12px; margin-bottom: 27px; }
.student-avatar { display: grid; place-items: center; flex: none; width: 43px; height: 43px; border: 1px solid rgba(117, 237, 240, .4); border-radius: 50%; background: #103640; color: #a8f9f4; font-size: 1rem; font-weight: 750; }
.student-message-header strong { display: block; font-size: .86rem; font-weight: 650; }
.student-message-header small { display: block; margin-top: 3px; color: #819eaf; font-size: .72rem; }
.student-message-symbol { margin-left: auto; color: #7d9cad; font-size: 1.45rem; }
.student-message blockquote { margin: 0; color: #e3eff3; font-size: clamp(1.05rem, 1.5vw, 1.32rem); font-weight: 450; line-height: 1.9; letter-spacing: -.012em; }
.student-message mark { padding: .13em .08em; border-radius: 3px; background: rgba(117, 237, 240, .07); box-decoration-break: clone; -webkit-box-decoration-break: clone; color: #9aebeb; }
.student-message-caption { margin: 30px 0 0; padding-top: 22px; border-top: 1px solid rgba(117, 237, 240, .14); color: #9ab5c5; font-size: .82rem; line-height: 1.75; }
.student-message-caption strong { color: #c2d5df; font-weight: 550; }
.student-cloud-panel { position: relative; padding: clamp(26px, 4vw, 52px); border-left: 1px solid rgba(117, 237, 240, .15); background: radial-gradient(ellipse at 95% 0, rgba(184, 165, 255, .07), transparent 65%); }
.student-cloud-heading { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.student-cloud-icon { width: 66px; height: 49px; flex: none; color: #c6b6ff; }
.student-kicker { margin: 0 0 7px; color: #94b5c6; font: 550 .65rem/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.student-cloud-heading h3 { margin: 0; color: #ecedff; font-size: clamp(1.15rem, 1.8vw, 1.6rem); line-height: 1.3; letter-spacing: -.015em; }
.student-details { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.student-details li { position: relative; display: flex; align-items: baseline; gap: 19px; margin: 0; padding: 14px 0; border-bottom: 1px solid rgba(117, 237, 240, .11); }
.student-details li:last-child { border-bottom: 0; }
.student-detail-number { flex: none; color: #647d96; font: 400 .69rem/1.5 var(--mono); }
.student-details li div { min-width: 0; }
.student-details li div > span { display: block; margin-bottom: 4px; color: #92aebe; font-size: .74rem; line-height: 1.45; }
.student-details strong { display: block; color: #e0eff4; font-size: .9rem; font-weight: 580; line-height: 1.5; }
.student-cloud-note { margin: 22px 0 0; padding-left: 14px; border-left: 2px solid #b8a5ff; color: #a7b9ce; font-size: .8rem; line-height: 1.7; }
.student-cloud-note strong { color: #d3cbf4; font-weight: 600; }
.student-local { position: relative; display: grid; grid-template-columns: 133px minmax(0, 1fr); align-items: center; gap: 30px; margin-top: 27px; padding: 29px 37px 29px 20px; border: 1px solid rgba(202, 255, 142, .2); background: radial-gradient(ellipse at 12% 45%, rgba(101, 172, 103, .08), transparent 54%), rgba(13, 35, 35, .6); scroll-margin-top: 100px; }
.student-local-visual { color: #caff8e; }
.student-local-visual svg { display: block; width: 100%; overflow: visible; }
.student-school-shield { fill: rgba(202, 255, 142, .025); }
.student-school-orbit { opacity: .5; transform-origin: center; }
.student-local-copy .student-kicker { color: #b5d8a6; }
.student-local-copy h3 { margin: 0 0 12px; color: #edf9ef; font-size: clamp(1.25rem, 2.3vw, 2rem); font-weight: 650; line-height: 1.3; letter-spacing: -.02em; }
.student-local-copy h3 em { color: #caff8e; font-style: normal; }
.student-local-copy > p:not(.student-kicker) { max-width: 560px; margin: 0; color: #abc9bf; font-size: .87rem; line-height: 1.75; }
.student-local-copy > p + p { margin-top: 12px; }
.student-local-copy > p strong { color: #e0f3df; font-weight: 650; }

@media (prefers-reduced-motion: no-preference) {
  .student-message.is-in-view mark { animation: student-word-light 1.6s calc(var(--detail) * .62s + .2s) ease-in-out both; }
  .student-cloud-panel.is-in-view .student-details li { animation: student-detail-light 1.6s calc(var(--detail) * .62s + .4s) ease-in-out both; }
  .student-cloud-panel.is-in-view .student-cloud-icon { animation: student-cloud-arrival 1.8s 3.3s ease-in-out; }
  .student-local.is-in-view .student-school-shield { animation: student-school-light 2.3s .25s ease-out both; }
  .student-local.is-in-view .student-school-orbit { animation: student-school-arrive 2.4s .25s ease-out both; }
}
@keyframes student-word-light { 0%, 100% { background: rgba(117, 237, 240, .07); color: #9aebeb; } 40% { background: rgba(117, 237, 240, .24); color: #e4ffff; box-shadow: 0 0 17px rgba(117, 237, 240, .1); } }
@keyframes student-detail-light { 0%, 100% { background: transparent; transform: translateX(0); } 45% { background: rgba(184, 165, 255, .065); transform: translateX(4px); } }
@keyframes student-cloud-arrival { 0%, 100% { filter: none; } 45% { filter: drop-shadow(0 0 10px rgba(184, 165, 255, .7)); } }
@keyframes student-school-light { 0% { stroke-dasharray: 360; stroke-dashoffset: 360; fill: transparent; } 75% { stroke-dashoffset: 0; fill: rgba(202, 255, 142, .1); } 100% { stroke-dasharray: 360; stroke-dashoffset: 0; fill: rgba(202, 255, 142, .025); } }
@keyframes student-school-arrive { from { transform: rotate(-20deg) scale(.9); } to { transform: rotate(0) scale(1); } }
@media (max-width: 1050px) {
  .student-story-heading { grid-template-columns: 1fr; gap: 22px; }
  .student-story-heading > p { max-width: 560px; }
  .student-local { grid-template-columns: 110px minmax(0, 1fr); gap: 20px 26px; }
}
@media (max-width: 760px) {
  .student-disclosure { grid-template-columns: 1fr; }
  .student-cloud-panel { border-left: 0; border-top: 1px solid rgba(117, 237, 240, .15); }
  .student-message, .student-cloud-panel { padding: 27px; }
  .student-message blockquote { font-size: 1.09rem; }
  .student-local { grid-template-columns: 80px minmax(0, 1fr); padding: 24px 20px; gap: 17px; }
  .student-local-visual { align-self: start; grid-row: auto; }
  .student-local-copy { display: contents; }
  .student-local-copy .student-kicker { grid-column: 1 / -1; grid-row: 1; margin: 0; }
  .student-local-copy h3 { margin: 0; align-self: center; }
  .student-local-copy > p:not(.student-kicker) { grid-column: 1 / -1; }
  .student-local-copy > p + p { margin-top: 0; }
}
@media (max-width: 380px) {
  .student-message, .student-cloud-panel { padding: 22px 18px; }
  .student-message blockquote { font-size: 1rem; }
  .student-cloud-heading { gap: 12px; }
  .student-cloud-icon { width: 49px; }
  .student-details li { gap: 13px; }
  .student-details strong { font-size: .82rem; }
  .student-local { grid-template-columns: 65px minmax(0, 1fr); padding: 22px 17px; gap: 16px 12px; }
  .student-local-copy h3 { font-size: 1.13rem; }
}

/* Stagger delays stay in the stylesheet to respect the local-only CSP. */
.student-story [data-detail="0"] { --detail: 0; }
.student-story [data-detail="1"] { --detail: 1; }
.student-story [data-detail="2"] { --detail: 2; }
.student-story [data-detail="3"] { --detail: 3; }
.student-story [data-detail="4"] { --detail: 4; }