/* =========================================================
   SHOW ME THE PHYSICS — SHARED STYLESHEET
   Plain, hand-written CSS. No external CSS framework or CDN
   dependency, so styling can never fail to load site-wide.
   ========================================================= */

/* ---------- Shared variables & base ---------- */
:root {
    --brand-blue: #4491c3;
    --gray-900: #111827;
    --gray-800: #1f2937;
    --gray-700: #374151;
    --gray-600: #4b5563;
    --gray-500: #6b7280;
    --gray-200: #e5e7eb;
    --gray-100: #f3f4f6;
    --gray-50: #f9fafb;
    --blue-50: #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-600: #2563eb;
    --indigo-100: #e0e7ff;
    --indigo-600: #4f46e5;
    --indigo-800: #3730a3;
    --indigo-900: #312e81;
    --red-600: #dc2626;
    --red-800: #991b1b;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: #f8fafc;
    color: var(--gray-800);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
::selection { background-color: var(--blue-200); }
a { text-decoration: none; color: inherit; }

.classic-link { color: #0000ee; font-weight: 600; transition: color 0.2s; }
.classic-link:visited { color: #551a8b; }
.classic-link:hover { text-decoration: underline; color: #3b82f6; }

/* Generic hover-lift, reused across pages */
.hover-scale { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.hover-scale:hover { transform: translateY(-4px); box-shadow: 0 12px 20px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05); }

/* Sticky-footer page layout */
.flex-page { display: flex; flex-direction: column; min-height: 100vh; }
.flex-grow { flex: 1 1 auto; }

/* Shared responsive container */
.container-main { max-width: 80rem; margin: 0 auto; padding: 2rem 1rem; width: 100%; }

/* 16:9 responsive video embed */
.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.video-container.featured { border: 4px solid var(--gray-800); box-shadow: 0 25px 50px rgba(0,0,0,.25); }


/* =========================================================
   HOMEPAGE COMPONENTS
   ========================================================= */
.site-header {
    position: relative; background-color: var(--brand-blue); overflow: hidden;
    padding: 2.5rem 0; box-shadow: inset 0 2px 4px rgba(0,0,0,.06);
}
.canvas-wrap { position: absolute; inset: 0; z-index: 0; }
.canvas-wrap canvas { width: 100%; height: 100%; display: block; }
.canvas-fill { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.canvas-fill canvas { width: 100%; height: 100%; display: block; }
.header-text {
    position: relative; z-index: 10; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center; color: #fff;
    padding: 1rem; pointer-events: none;
}
.header-text h1 {
    font-size: 3.75rem; font-weight: 800; letter-spacing: -0.025em; margin: 0 0 .5rem; line-height: 1.1;
    text-shadow: 0 10px 15px rgba(0,0,0,.25), 0 4px 6px rgba(0,0,0,.15);
}
.header-text p.subtitle { font-size: 1.5rem; font-weight: 500; margin: 0 0 .25rem; text-shadow: 0 4px 6px rgba(0,0,0,.2); }
.header-text p.est { font-size: 1.125rem; opacity: .9; margin: 0; text-shadow: 0 1px 2px rgba(0,0,0,.2); }
@media (min-width: 768px) {
    .header-text h1 { font-size: 4.5rem; }
    .header-text p.subtitle { font-size: 1.875rem; }
    .header-text p.est { font-size: 1.25rem; }
}
@media (min-width: 1024px) { .header-text h1 { font-size: 6rem; } }

.top-card {
    background: #fff; border-radius: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,.05);
    border: 1px solid var(--gray-100); padding: 1.5rem; margin-bottom: 2rem;
    display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1.5rem;
}
@media (min-width: 1024px) { .top-card { flex-direction: row; } }

.top-card-section { flex: 1; width: 100%; }
.top-card-section h3 {
    font-size: 1.125rem; font-weight: 700; color: var(--gray-500);
    text-transform: uppercase; letter-spacing: .05em; margin: 0 0 .75rem; text-align: center;
}
@media (min-width: 1024px) { .top-card-section h3 { text-align: left; } }

.agenda-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .75rem; }
.agenda-btn {
    background: var(--blue-50); color: var(--brand-blue); font-size: 1.5rem; font-weight: 900;
    padding: 1rem 0; border-radius: .75rem; box-shadow: 0 1px 2px rgba(0,0,0,.05);
    border: 2px solid var(--brand-blue); text-align: center; transition: all .2s; display: block;
}
.agenda-btn:hover { background: var(--blue-100); transform: scale(1.05); }

.top-divider { display: none; width: 1px; height: 6rem; background: var(--gray-200); }
@media (min-width: 1024px) { .top-divider { display: block; } }

.quicklinks-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem; }
@media (min-width: 640px) { .quicklinks-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }

.quick-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .375rem;
    font-size: 1.0625rem; font-weight: 700; padding: 1rem 0; border-radius: .75rem;
    border: none; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: filter .15s ease, transform .1s ease;
}
.quick-btn:hover { filter: brightness(0.96); transform: translateY(-.25rem); }
.quick-btn:active { transform: scale(.97); }
.quick-icon { width: 22px; height: 22px; }

.quick-labs { background: #FAECE7; color: #712B13; }
.quick-sims { background: #E1F5EE; color: #085041; }
.quick-videos { background: #EEEDFE; color: #3C3489; }
.quick-review { background: #FAEEDA; color: #633806; }

.lessons-title { font-size: 3rem; font-weight: 800; text-align: center; color: var(--gray-800); margin: 0 0 2.5rem; }

.lessons-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 4rem; }
@media (min-width: 640px) { .lessons-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 768px) { .lessons-grid { grid-template-columns: repeat(3,1fr); } }

.lesson-card {
    display: block; background: #fff; border-radius: .75rem; box-shadow: 0 4px 6px rgba(0,0,0,.07);
    overflow: hidden; transition: all .3s; border: 1px solid var(--gray-100);
}
.lesson-card:hover { box-shadow: 0 20px 25px rgba(0,0,0,.1); transform: translateY(-.25rem); }
.lesson-thumb { height: 12rem; background: #fff; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.lesson-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .5s; }
.lesson-card:hover .lesson-thumb img { transform: scale(1.05); }
.lesson-label { padding: 1.5rem; text-align: center; border-top: 1px solid var(--gray-100); }
.lesson-label h3 { font-size: 1.5rem; font-weight: 800; color: var(--gray-800); margin: 0; transition: color .2s; }
.lesson-card:hover .lesson-label h3 { color: var(--blue-600); }

.resource-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; margin-bottom: 4rem; }
@media (min-width: 768px) { .resource-grid { grid-template-columns: repeat(2,1fr); } }
.resource-box { background: #fff; padding: 2rem; border-radius: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); border: 1px solid var(--gray-100); }
.resource-box.comm { display: flex; flex-direction: column; }
.resource-box h2 { font-size: 1.875rem; font-weight: 700; border-bottom: 2px solid var(--gray-200); padding-bottom: .75rem; margin: 0 0 1.5rem; color: var(--gray-800); }
.resource-list { list-style: none; margin: 0 0 2.5rem; padding: 0; font-size: 1.125rem; }
.resource-list li { margin-top: 1rem; }
.resource-list li:first-child { margin-top: 0; }
.resource-list a { font-size: 1.25rem; display: flex; align-items: center; }
.comm-links { display: flex; flex-direction: column; gap: 1.25rem; font-size: 1.125rem; }
.comm-links a { font-size: 1.25rem; display: flex; align-items: center; }

.site-footer { text-align: center; padding: 2rem 0; border-top: 1px solid var(--gray-200); color: var(--gray-600); font-size: 1.5rem; }
.site-footer p { margin: .75rem 0; }
.site-footer p:first-child { margin-top: 0; }


/* =========================================================
   LABS PAGE COMPONENTS
   ========================================================= */
.labs-header {
    position: relative; background-color: #4392ca; overflow: hidden;
    padding: 4rem 0; box-shadow: inset 0 2px 4px rgba(0,0,0,.06);
}
.labs-header canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.labs-header-text {
    position: relative; z-index: 10; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center; color: #fff;
    padding: 0 1rem; user-select: none;
}
.labs-header-text h1 {
    font-size: 3rem; font-weight: 800; letter-spacing: -0.025em; margin: 0 0 .5rem;
    text-shadow: 0 10px 15px rgba(0,0,0,.25), 0 4px 6px rgba(0,0,0,.15);
}
.labs-header-text p.subtitle { font-size: 1.5rem; font-weight: 500; margin: 0 0 .25rem; text-shadow: 0 4px 6px rgba(0,0,0,.2); }
.labs-header-text p.tagline {
    font-size: .875rem; font-weight: 600; letter-spacing: .1em; color: var(--blue-200);
    text-transform: uppercase; margin-top: .5rem; opacity: .8; transition: color .3s;
}
@media (min-width: 768px) {
    .labs-header-text h1 { font-size: 3.75rem; }
    .labs-header-text p.subtitle { font-size: 1.875rem; }
}
@media (min-width: 1024px) { .labs-header-text h1 { font-size: 4.5rem; } }

.gif-showcase { display: flex; justify-content: center; margin-bottom: 2.5rem; width: 100%; }
.gif-showcase img { width: 12rem; height: auto; mix-blend-mode: multiply; }
@media (min-width: 768px) { .gif-showcase img { width: 18rem; } }
@media (min-width: 1024px) { .gif-showcase img { width: 375px; } }

.lab-nav-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; margin-bottom: 4rem; max-width: 72rem; margin-left: auto; margin-right: auto; }
@media (min-width: 768px) { .lab-nav-grid { grid-template-columns: repeat(4,1fr); } }

.lab-nav-card {
    border-radius: .75rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); padding: 1.5rem;
    display: flex; align-items: center; justify-content: center; text-align: center;
    transition: all .2s; background: #fff; border: 1px solid var(--gray-200);
}
.lab-nav-card:hover { background: var(--blue-50); border-color: #93c5fd; }
.lab-nav-card.active { background: var(--blue-50); border-color: var(--blue-200); }
.lab-nav-card.active:hover { background: var(--blue-100); border-color: #60a5fa; }
.lab-nav-card span { font-size: 1.25rem; font-weight: 700; color: #1e3a8a; }

.labs-section { padding-top: 3rem; border-top: 1px solid var(--gray-200); margin-top: 2rem; margin-bottom: 4rem; scroll-margin-top: 1.5rem; }
.labs-section h2 { font-size: 1.875rem; font-weight: 800; text-align: center; color: var(--gray-800); letter-spacing: -0.025em; margin: 0; }

.lab-cards-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin: 2rem 0 2.5rem; }
@media (min-width: 768px) { .lab-cards-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .lab-cards-grid { grid-template-columns: repeat(3,1fr); } }

.lab-card { background: var(--gray-50); border-radius: 1rem; padding: 1.5rem; border: 1px solid var(--gray-200); display: flex; flex-direction: column; }
.lab-card > * + * { margin-top: .75rem; }
.lab-card h3 { font-size: 1.5rem; font-weight: 700; color: var(--indigo-900); border-bottom: 2px solid var(--indigo-100); padding-bottom: .5rem; margin: 0 0 .5rem; }
.lab-card a { font-size: 1.125rem; font-weight: 600; color: var(--gray-700); transition: color .2s; }
.lab-card a:hover { color: var(--indigo-600); }
.lab-card a.quiz-link { color: var(--indigo-600); padding-top: .5rem; }
.lab-card a.quiz-link:hover { color: var(--indigo-800); }
.lab-card a.video-link { color: var(--red-600); }
.lab-card a.video-link:hover { color: var(--red-800); }
.lab-card .video-links { padding-top: .5rem; display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }

.featured-video {
    margin-top: 4rem; text-align: center; width: 100%; max-width: 56rem; margin-left: auto; margin-right: auto;
    background: var(--gray-900); border-radius: 1.5rem; padding: 2rem; box-shadow: 0 20px 25px rgba(0,0,0,.15); margin-bottom: 3rem;
}
.featured-video h3 { color: #fff; font-size: 1.5rem; font-weight: 700; margin: 0 0 1.5rem; }

.labs-footer {
    background: #fff; text-align: center; padding: 2.5rem 0 2rem; border-top: 1px solid var(--gray-200);
    color: var(--gray-700); font-size: 1.5rem; margin-top: 3rem; width: 100%; box-shadow: inset 0 2px 4px rgba(0,0,0,.06);
}
.labs-footer-nav { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-bottom: 2rem; max-width: 64rem; margin-left: auto; margin-right: auto; font-size: 1.6875rem; }
.labs-footer-nav .home-link { font-weight: 700; font-size: 1.875rem; transition: color .2s; }
.labs-footer-nav .home-link:hover { color: var(--blue-600); }
.labs-footer-links { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 1.5rem; row-gap: .75rem; }
.labs-footer-links a { font-weight: 600; transition: color .2s; }
.labs-footer-links a:hover { color: var(--blue-600); }
.labs-footer-links a.active { color: var(--blue-600); }

.labs-agenda-row {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2rem; margin-bottom: 2rem;
    border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); padding: 1.5rem 0;
    max-width: 48rem; margin-left: auto; margin-right: auto;
}
.labs-agenda-row .label { font-weight: 700; color: var(--gray-600); text-transform: uppercase; letter-spacing: .05em; font-size: 1.875rem; }
@media (min-width: 768px) { .labs-agenda-row .label { font-size: 2.0625rem; } }
.labs-agenda-row a { font-weight: 900; font-size: 2.0625rem; transition: color .2s; }
.labs-agenda-row a:hover { color: var(--blue-600); }
@media (min-width: 768px) { .labs-agenda-row a { font-size: 2.4375rem; } }

.labs-footer-bottom p { margin: .5rem 0; }
.labs-footer-bottom p:first-child { margin-top: 0; }
.labs-footer-bottom .divider { margin: 0 .5rem; }
.footer-extra-row a { transition: color .2s; }
.footer-extra-row a:hover { color: var(--blue-600); }


/* =========================================================
   FORCE & MOTION LABS PAGE COMPONENTS
   (also reusable by other "tall header w/ overlay" lab pages)
   ========================================================= */
.fm-header {
    position: relative; background-color: #4392ca; overflow: hidden;
    padding: 2rem 0 8rem; box-shadow: inset 0 2px 4px rgba(0,0,0,.06);
    min-height: 350px; display: flex; align-items: flex-start; justify-content: center;
}
.fm-header canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.fm-header .overlay { position: absolute; inset: 0; background: rgba(0,0,0,.15); z-index: 0; pointer-events: none; }
.fm-header-text {
    position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center;
    text-align: center; color: #fff; padding: 0 1rem; user-select: none;
    text-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.fm-header-text h1 { font-size: 3rem; font-weight: 800; letter-spacing: -0.025em; margin: 0 0 .5rem; }
.fm-header-text p.subtitle { font-size: 1.5rem; font-weight: 500; margin: 0 0 .25rem; color: var(--blue-100, #dbeafe); }
.fm-header-text p.tagline {
    font-size: .875rem; font-weight: 600; letter-spacing: .1em; color: #eff6ff;
    text-transform: uppercase; margin-top: .5rem; opacity: .9; transition: color .3s;
}
@media (min-width: 768px) {
    .fm-header-text h1 { font-size: 3.75rem; }
    .fm-header-text p.subtitle { font-size: 1.875rem; }
}
@media (min-width: 1024px) { .fm-header-text h1 { font-size: 4.5rem; } }

/* Generic section wrapper (heading styled separately per page) */
.content-section { padding-top: 2rem; border-top: 1px solid var(--gray-200); margin-top: 2rem; margin-bottom: 4rem; scroll-margin-top: 1.5rem; }

.fm-section-title { font-size: 2.25rem; font-weight: 800; text-align: center; color: var(--gray-800); letter-spacing: -0.025em; margin: 1rem 0 2rem; }
@media (min-width: 768px) { .fm-section-title { font-size: 3rem; } }

.pill-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: 2rem; }
.pill { border-radius: 9999px; padding: .5rem 1.5rem; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: background-color .2s; border: 1px solid; display: inline-block; }
.pill.emerald { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.pill.emerald:hover { background: #d1fae5; }
.pill.blue { background: var(--blue-50); color: #1d4ed8; border-color: var(--blue-200); }
.pill.blue:hover { background: var(--blue-100); }

.fm-cards-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 2.5rem; }
@media (min-width: 768px) { .fm-cards-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .fm-cards-grid { grid-template-columns: repeat(3,1fr); } }

.fm-card { background: var(--gray-50); border-radius: 1rem; padding: 1.5rem; border: 1px solid var(--gray-200); display: flex; flex-direction: column; }
.fm-card > * + * { margin-top: 1rem; }
.fm-card h3 { font-size: 1.875rem; font-weight: 700; color: var(--indigo-900); border-bottom: 2px solid var(--indigo-100); padding-bottom: .5rem; margin: 0 0 .25rem; }
.fm-card > a.main-link, .fm-card .sub-links-wrap > a.main-link { font-size: 1.25rem; font-weight: 600; color: var(--gray-700); transition: color .2s; display: block; }
.fm-card a.main-link:hover { color: var(--indigo-600); }
.fm-card .sub-links-wrap { display: flex; flex-direction: column; }
.fm-card .sub-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }
.fm-card .sub-links a { font-size: .875rem; font-weight: 500; }
.fm-card .sub-links a.prelab { color: #3b82f6; }
.fm-card .sub-links a.prelab:hover { text-decoration: underline; }
.fm-card .sub-links a.equipment { color: #059669; }
.fm-card .sub-links a.equipment:hover { text-decoration: underline; }


/* =========================================================
   ENERGY LABS PAGE COMPONENTS
   ========================================================= */
.pill.lg { padding: .75rem 2rem; font-size: 1.125rem; font-weight: 700; }
.lab-nav-card.lg span { font-size: 1.5rem; }

.energy-card { background: var(--gray-50); border-radius: 1rem; padding: 1.5rem; border: 1px solid var(--gray-200); display: flex; flex-direction: column; }
.energy-card > * + * { margin-top: 1rem; }
.energy-card h3 { font-size: 2.25rem; font-weight: 700; color: #d97706; border-bottom: 2px solid #fef3c7; padding-bottom: .5rem; margin: 0 0 .25rem; }
.energy-card a.main-link { font-size: 1.5rem; font-weight: 700; color: var(--gray-700); transition: color .2s; display: block; }
.energy-card a.main-link:hover { color: #d97706; }
.energy-card .sub-links-wrap { display: flex; flex-direction: column; }
.energy-card .sub-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }
.energy-card .sub-links a { font-size: 1rem; font-weight: 600; }
.energy-card .sub-links a.prelab { color: #3b82f6; }
.energy-card .sub-links a.prelab:hover { text-decoration: underline; }
.energy-card .sub-links a.equipment { color: #059669; }
.energy-card .sub-links a.equipment:hover { text-decoration: underline; }

.energy-visual { display: flex; justify-content: center; margin: 4rem 0 2.5rem; width: 100%; padding: 0 1rem; }
.energy-visual img { border-radius: 1rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); border: 1px solid var(--gray-200); max-width: 100%; height: auto; max-height: 500px; }

.video-container.dark-bg { background: #000; }


/* =========================================================
   ELECTRICITY & MAGNETISM LABS PAGE COMPONENTS
   ========================================================= */
.emag-card { background: var(--gray-50); border-radius: 1rem; padding: 1.5rem; border: 1px solid var(--gray-200); display: flex; flex-direction: column; }
.emag-card > * + * { margin-top: 1rem; }
.emag-card h3 { font-size: 1.875rem; font-weight: 700; color: var(--blue-600); border-bottom: 2px solid var(--blue-100); padding-bottom: .5rem; margin: 0 0 .25rem; }
.emag-card a.main-link { font-size: 1.5rem; font-weight: 700; color: var(--gray-700); transition: color .2s; display: block; }
.emag-card a.main-link:hover { color: var(--blue-600); }
.emag-card .sub-links-wrap { display: flex; flex-direction: column; }
.emag-card .sub-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }
.emag-card .sub-links a { font-size: 1rem; font-weight: 600; color: #059669; }
.emag-card .sub-links a:hover { text-decoration: underline; }
.emag-card .general-row {
    border-top: 1px solid var(--gray-200); padding-top: .75rem; margin-top: .75rem;
    display: flex; flex-wrap: wrap; gap: .5rem;
}
.emag-card .general-row a { font-size: .875rem; font-weight: 600; color: #3b82f6; }
.emag-card .general-row a:hover { text-decoration: underline; }


/* =========================================================
   WAVE LABS PAGE COMPONENTS
   ========================================================= */
.fm-header.short { padding-bottom: 160px; min-height: 250px; }

.wave-card { background: var(--gray-50); border-radius: 1rem; padding: 1.5rem; border: 1px solid var(--gray-200); display: flex; flex-direction: column; }
.wave-card > * + * { margin-top: 1rem; }
.wave-card h3 { font-size: 1.875rem; font-weight: 700; color: var(--blue-600); border-bottom: 2px solid var(--blue-100); padding-bottom: .5rem; margin: 0 0 .25rem; }
.wave-card a.main-link { font-size: 1.25rem; font-weight: 700; color: var(--gray-700); transition: color .2s; display: block; }
.wave-card a.main-link:hover { color: var(--blue-600); }
.wave-card .sub-links-wrap { display: flex; flex-direction: column; }
.wave-card .sub-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; align-items: center; }
.wave-card .sub-links a, .wave-card .sub-links span.note { font-size: .875rem; font-weight: 600; }
.wave-card .sub-links a.equipment { color: #059669; }
.wave-card .sub-links a.equipment:hover { text-decoration: underline; }
.wave-card .sub-links a.video { color: #e11d48; }
.wave-card .sub-links a.video:hover { text-decoration: underline; }
.wave-card .sub-links span.note { color: var(--gray-500); font-weight: 500; }
.wave-card .general-row { border-top: 1px solid var(--gray-200); padding-top: .75rem; margin-top: .75rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.wave-card .general-row a { font-size: .875rem; font-weight: 600; color: #3b82f6; }
.wave-card .general-row a:hover { text-decoration: underline; }

.teacher-resources {
    background: #fff; border-radius: 1rem; padding: 1.5rem; border: 1px solid var(--gray-200);
    box-shadow: 0 1px 2px rgba(0,0,0,.05); margin-top: 2rem; width: 100%; max-width: 72rem; margin-left: auto; margin-right: auto;
}
@media (min-width: 768px) { .teacher-resources { padding: 2rem; } }
.teacher-resources h3 {
    font-size: 1.5rem; font-weight: 800; color: var(--gray-800); letter-spacing: -0.025em;
    border-bottom: 2px solid var(--gray-100); padding-bottom: .75rem; margin: 0 0 1.5rem;
}
@media (min-width: 768px) { .teacher-resources h3 { font-size: 1.875rem; } }
.teacher-resources-grid { display: grid; grid-template-columns: 1fr; column-gap: 1.5rem; row-gap: 1rem; }
@media (min-width: 640px) { .teacher-resources-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 768px) { .teacher-resources-grid { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1024px) { .teacher-resources-grid { grid-template-columns: repeat(4,1fr); } }
.teacher-resources-grid a { font-size: 1rem; color: var(--gray-600); }
.teacher-resources-grid a:hover { color: var(--blue-600); text-decoration: underline; }


/* =========================================================
   MODERN PHYSICS LABS PAGE COMPONENTS
   ========================================================= */
.fm-header.left { align-items: flex-start; justify-content: flex-start; padding-top: .75rem; }
.fm-header-text.left { align-items: flex-start; text-align: left; width: 100%; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 768px) { .fm-header-text.left { padding-left: 1.5rem; padding-right: 1.5rem; } }

.lab-nav-grid.cols3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 768px) { .lab-nav-grid.cols3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.fm-cards-grid.cols2 { grid-template-columns: 1fr; max-width: 64rem; margin-left: auto; margin-right: auto; }
@media (min-width: 768px) { .fm-cards-grid.cols2 { grid-template-columns: repeat(2,1fr); } }

.wave-card .subsection { border-top: 1px solid var(--gray-200); padding-top: .75rem; margin-top: .75rem; display: flex; flex-direction: column; }
.wave-card .subsection .label { color: var(--gray-500); font-weight: 700; margin-bottom: .25rem; }
.wave-card .subsection .links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }
.wave-card .subsection .links a.web { color: #3b82f6; font-size: .875rem; font-weight: 600; }
.wave-card .subsection .links a.web:hover { text-decoration: underline; }
.wave-card .subsection .links a.pdf { color: #f43f5e; font-size: .875rem; font-weight: 600; }
.wave-card .subsection .links a.pdf:hover { text-decoration: underline; }


/* =========================================================
   PLOTTING LABS PAGE COMPONENTS
   ========================================================= */
html.smooth-scroll { scroll-behavior: smooth; }
.cursor-crosshair { cursor: crosshair; }

.site-header.tall { padding: 4rem 0; }

.plot-nav-card { background: #fff; border-radius: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); border: 1px solid var(--gray-100); padding: 1.5rem; margin-bottom: 2rem; }
.plot-nav-card .all-lessons { display: block; text-align: center; margin-bottom: 1.25rem; }
.plot-nav-card .all-lessons a { font-size: 1.5rem; font-weight: 900; color: var(--brand-blue); text-decoration: none; text-transform: uppercase; letter-spacing: .05em; }
.plot-nav-card .all-lessons a:hover { text-decoration: underline; }
@media (min-width: 768px) { .plot-nav-card .all-lessons a { font-size: 1.875rem; } }

.plot-quicklinks { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; max-width: 64rem; margin: 0 auto; }
@media (min-width: 768px) { .plot-quicklinks { grid-template-columns: repeat(5,1fr); } }
.plot-quick-btn { display: flex; align-items: center; justify-content: center; background: var(--gray-50); color: var(--gray-700); font-weight: 700; font-size: 1.125rem; padding: .75rem 1rem; border-radius: .75rem; border: 1px solid var(--gray-200); box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: all .2s; text-align: center; }
.plot-quick-btn:hover { background: var(--gray-100); transform: translateY(-2px); }
.plot-quick-btn.active { background: var(--blue-50); color: var(--brand-blue); border-color: var(--blue-200); }
.plot-quick-btn.active:hover { background: var(--blue-100); }

.cta-wrap { max-width: 56rem; margin: 0 auto 4rem; text-align: center; }
.gradient-cta { display: inline-flex; align-items: center; justify-content: center; padding: 1rem 2rem; font-size: 1.125rem; font-weight: 700; color: #fff; background: linear-gradient(to right, var(--brand-blue), #3b82f6); border-radius: 9999px; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); transition: all .3s; text-decoration: none; }
.gradient-cta:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,.1); transform: translateY(-4px); }
.gradient-cta svg { width: 1.5rem; height: 1.5rem; margin-right: .75rem; }

.plot-section-title { font-size: 2.25rem; font-weight: 800; text-align: center; color: var(--gray-800); margin: 0 0 2.5rem; }
.plot-section-title.spaced { margin-top: 5rem; }
.plot-section-title.left { text-align: left; font-size: 1.875rem; margin-bottom: 2rem; }

.plot-cat-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 4rem; }
@media (min-width: 640px) { .plot-cat-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .plot-cat-grid { grid-template-columns: repeat(4,1fr); } }

.plot-cat-card { display: block; background: #fff; border-radius: .75rem; box-shadow: 0 4px 6px rgba(0,0,0,.07); overflow: hidden; transition: all .3s; border: 1px solid var(--gray-100); }
.plot-cat-card:hover { box-shadow: 0 20px 25px rgba(0,0,0,.1); transform: translateY(-.25rem); }
.plot-cat-card.current { border-bottom: 4px solid var(--brand-blue); }
.plot-cat-icon { height: 10rem; background: var(--blue-50); display: flex; align-items: center; justify-content: center; padding: 1rem; color: var(--brand-blue); }
.plot-cat-icon.muted { background: var(--gray-50); color: #9ca3af; }
.plot-cat-card:hover .plot-cat-icon { color: var(--blue-600); }
.plot-cat-card:hover .plot-cat-icon.muted { color: var(--gray-600); }
.plot-cat-icon svg { width: 5rem; height: 5rem; transition: transform .3s; }
.plot-cat-card:hover .plot-cat-icon svg { transform: scale(1.1); }
.plot-cat-label { padding: 1.25rem; text-align: center; border-top: 1px solid var(--gray-100); }
.plot-cat-label h3 { font-size: 1.25rem; font-weight: 700; color: var(--gray-800); margin: 0; }
.plot-cat-label h3.current { color: var(--brand-blue); }

.plot-resource-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 4rem; }
@media (min-width: 640px) { .plot-resource-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .plot-resource-grid { grid-template-columns: repeat(4,1fr); } }

.plot-resource-card { display: flex; flex-direction: column; background: #fff; border-radius: .75rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: box-shadow .2s; border: 1px solid var(--gray-200); padding: 1.5rem; }
.plot-resource-card:hover { box-shadow: 0 4px 6px rgba(0,0,0,.07); }
.plot-resource-card .head { display: flex; align-items: center; margin-bottom: .75rem; color: var(--brand-blue); }
.plot-resource-card .head svg { width: 2rem; height: 2rem; margin-right: .75rem; flex-shrink: 0; }
.plot-resource-card .head.green { color: #16a34a; }
.plot-resource-card h3 { font-size: 1.125rem; font-weight: 700; margin: 0; transition: color .2s; }
.plot-resource-card:hover h3 { color: var(--brand-blue); }
.plot-resource-card:hover .head.green ~ h3 { color: #15803d; }
.plot-resource-card p { color: var(--gray-500); font-size: .875rem; margin: 0; }
.plot-resource-card p a { color: #3b82f6; }
.plot-resource-card p a:hover { text-decoration: underline; }

.guidelines-box { background: var(--blue-50); border-radius: 1rem; padding: 2rem; border: 1px solid var(--blue-100); margin-bottom: 4rem; box-shadow: inset 0 2px 4px rgba(0,0,0,.06); }
.guidelines-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .guidelines-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .guidelines-grid { grid-template-columns: repeat(3,1fr); } }
.guideline-link { display: flex; align-items: center; background: #fff; padding: 1rem; border-radius: .5rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: box-shadow .2s; color: var(--brand-blue); font-weight: 700; font-size: 1.125rem; border: 1px solid var(--gray-200); }
.guideline-link:hover { box-shadow: 0 4px 6px rgba(0,0,0,.07); }
.guideline-link .num { background: var(--blue-100); color: var(--brand-blue); width: 2rem; height: 2rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; margin-right: .75rem; flex-shrink: 0; }

.stem-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 4rem; }
@media (min-width: 1024px) { .stem-grid { grid-template-columns: repeat(2,1fr); } }

.book-card { background: #fff; border-radius: .75rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); border: 1px solid var(--gray-200); padding: 1.5rem; }
.book-card h3 { font-size: 1.25rem; font-weight: 700; color: var(--gray-800); margin: 0 0 1rem; border-bottom: 1px solid var(--gray-200); padding-bottom: .5rem; }
.book-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.book-list li { display: flex; align-items: flex-start; }
.book-list svg { width: 1.5rem; height: 1.5rem; color: var(--brand-blue); margin-right: .75rem; flex-shrink: 0; }
.book-list .title { font-weight: 700; color: var(--gray-800); display: block; }
.book-list .author { color: var(--gray-500); font-size: .875rem; }
.book-links { display: flex; align-items: center; padding-top: 1rem; gap: 1rem; flex-wrap: wrap; }
.book-links a { padding: .5rem 1rem; background: var(--gray-100); color: var(--gray-700); border-radius: .5rem; font-weight: 700; transition: background-color .2s; }
.book-links a:hover { background: var(--gray-200); }

.video-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.video-card { background: var(--gray-50); border-radius: .75rem; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.05); border: 1px solid var(--gray-200); }
.video-card iframe { width: 100%; aspect-ratio: 16/9; border: 0; display: block; }
.video-card .caption { padding: 1rem; text-align: center; }
.video-card .caption a { font-weight: 700; color: var(--brand-blue); }
.video-card .caption a:hover { text-decoration: underline; }

.subscribe-wrap { text-align: center; margin-bottom: 4rem; }
.subscribe-btn { display: inline-flex; align-items: center; justify-content: center; padding: .75rem 1.5rem; background: #dc2626; color: #fff; font-weight: 700; border-radius: .5rem; box-shadow: 0 4px 6px rgba(0,0,0,.07); transition: all .2s; text-decoration: none; }
.subscribe-btn:hover { background: #b91c1c; transform: translateY(-2px); }
.subscribe-btn svg { width: 1.5rem; height: 1.5rem; margin-right: .5rem; }

.plot-footer { text-align: center; padding: 2rem 0 1rem; border-top: 1px solid var(--gray-200); color: var(--gray-600); font-size: .875rem; }
.plot-footer p { margin: .25rem 0; }
.plot-footer p:first-child { margin-top: 0; }


/* =========================================================
   OUTSIDE LABS PAGE COMPONENTS
   ========================================================= */
.plot-hr { border: none; border-top: 1px solid var(--gray-200); margin: 3rem 0; }

.alert-box {
    background: #fefce8; border: 1px solid #fef08a; border-radius: 1rem; padding: 1.5rem;
    margin-bottom: 3rem; box-shadow: 0 1px 2px rgba(0,0,0,.05);
    display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem;
}
@media (min-width: 768px) { .alert-box { flex-direction: row; } }
.alert-box h3 { font-size: 1.25rem; font-weight: 700; color: #854d0e; margin: 0; }
.alert-box p { color: #a16207; font-size: .875rem; margin: .25rem 0 0; }
.alert-box .actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.alert-btn { background: #fef9c3; color: #854d0e; font-weight: 600; padding: .625rem 1.25rem; border-radius: .75rem; border: 1px solid #fde047; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: background-color .2s; }
.alert-btn:hover { background: #fef08a; }
.alert-btn.white { background: #fff; color: var(--gray-800); border-color: var(--gray-200); display: inline-flex; align-items: center; gap: .5rem; }
.alert-btn.white:hover { background: var(--gray-50); }
.alert-btn.white svg { width: 1.25rem; height: 1.25rem; color: #16a34a; }

.plot-cat-icon.tall { height: 11rem; position: relative; }
.plot-cat-icon.tall img { height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; transition: transform .3s; position: relative; z-index: 1; }
.plot-cat-card:hover .plot-cat-icon.tall img { transform: scale(1.05); }
.plot-cat-icon.tall svg.fallback { position: absolute; inset: 0; margin: auto; width: 4rem; height: 4rem; z-index: 0; }

.guide-cards-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 4rem; }
@media (min-width: 640px) { .guide-cards-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .guide-cards-grid { grid-template-columns: repeat(5,1fr); } }
.guide-card { background: #fff; border-radius: .75rem; padding: 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); border: 1px solid var(--gray-200); text-align: center; transition: transform .2s, box-shadow .2s; }
.guide-card:hover { box-shadow: 0 4px 6px rgba(0,0,0,.07); transform: translateY(-.25rem); }
.guide-card .badge { width: 3rem; height: 3rem; background: var(--indigo-100); border-radius: 9999px; display: flex; align-items: center; justify-content: center; margin: 0 auto .75rem; transition: background-color .2s; }
.guide-card:hover .badge { background: #c7d2fe; }
.guide-card .badge span { color: #4f46e5; font-weight: 700; font-size: 1.25rem; }
.guide-card h4 { font-weight: 700; color: var(--gray-800); margin: 0; }

.ext-resources-wrap { display: flex; flex-direction: column; gap: 3rem; margin-bottom: 4rem; }
@media (min-width: 1024px) { .ext-resources-wrap { flex-direction: row; } }
.ext-resources-main { flex: 1; }
.ext-resources-main h3 { font-size: 1.5rem; font-weight: 800; color: var(--gray-800); margin: 0 0 1.5rem; }
.ext-links-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: .75rem; }
@media (min-width: 768px) { .ext-links-grid { grid-template-columns: repeat(3,1fr); } }
.ext-link-chip { background: #fff; border: 1px solid var(--gray-200); padding: .75rem; border-radius: .5rem; font-size: .875rem; font-weight: 600; text-align: center; color: var(--gray-700); transition: all .2s; }
.ext-link-chip:hover { color: var(--blue-600); border-color: #93c5fd; box-shadow: 0 1px 2px rgba(0,0,0,.05); }

.ext-resources-side { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 1024px) { .ext-resources-side { width: 33.333%; } }
.manuals-box { background: #fff; border-radius: .75rem; padding: 1.5rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); border: 1px solid var(--gray-200); }
.manuals-box h3 { font-size: 1.25rem; font-weight: 700; color: var(--gray-800); margin: 0 0 1rem; }
.manuals-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; color: var(--gray-600); }
.manuals-list li { display: flex; align-items: flex-start; gap: .5rem; }
.manuals-list .bullet { color: #3b82f6; margin-top: .25rem; }
.manuals-list strong { color: var(--gray-800); }

.stem-box { background: var(--blue-50); border-radius: .75rem; padding: 1.5rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); border: 1px solid var(--blue-100); }
.stem-box h3 { font-size: 1.25rem; font-weight: 700; color: #1e3a8a; margin: 0 0 1rem; }
.stem-box .links { display: flex; flex-direction: column; gap: .75rem; }
.stem-box .links a { display: flex; align-items: center; justify-content: space-between; background: #fff; padding: .75rem; border-radius: .5rem; border: 1px solid var(--blue-200); font-weight: 600; color: #1e40af; transition: background-color .2s; }
.stem-box .links a:hover { background: var(--blue-100); }
.stem-box .links a svg { width: 1rem; height: 1rem; }

.demo-videos { margin-bottom: 4rem; }
.demo-videos .heading { text-align: center; margin-bottom: 2rem; }
.demo-videos .heading h2 { font-size: 1.875rem; font-weight: 800; color: var(--gray-800); margin: 0 0 .5rem; }
.demo-videos .heading a { color: var(--blue-600); font-weight: 500; }
.demo-videos .heading a:hover { text-decoration: underline; }
.demo-videos-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .demo-videos-grid { grid-template-columns: repeat(2,1fr); } }
.demo-video-item { display: flex; flex-direction: column; }
.demo-video-frame { position: relative; padding-bottom: 56.25%; height: 0; border-radius: .75rem; overflow: hidden; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); border: 1px solid var(--gray-200); background: #111827; margin-bottom: 1rem; }
.demo-video-frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.demo-video-item h4 { font-size: 1.125rem; font-weight: 700; text-align: center; color: var(--gray-800); margin: 0; }


/* =========================================================
   MOTION SIMULATIONS PAGE COMPONENTS
   ========================================================= */
.site-header.simhero { height: 450px; padding: 0; }
@media (min-width: 768px) { .site-header.simhero { height: 550px; } }

.svg-bg-wrap { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.svg-bg-wrap svg { width: 100%; height: 100%; opacity: .95; }

.header-text.absolute-top { position: absolute; top: 2rem; left: 0; right: 0; pointer-events: none; }

.sim-nav-card { background: #fff; border-radius: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); border: 1px solid var(--gray-100); padding: 1.5rem; margin-bottom: 1.5rem; }
.sim-nav-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; max-width: 72rem; margin: 0 auto; }
@media (min-width: 768px) { .sim-nav-grid { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1024px) { .sim-nav-grid { grid-template-columns: repeat(6,1fr); } }
.sim-nav-btn { display: flex; align-items: center; justify-content: center; background: var(--gray-50); color: var(--gray-700); font-weight: 700; font-size: 1.25rem; padding: .75rem 1rem; border-radius: .75rem; border: 1px solid var(--gray-200); box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: all .2s; text-align: center; }
.sim-nav-btn:hover { background: var(--gray-100); transform: translateY(-2px); }
.sim-nav-btn.active { background: var(--blue-50); color: var(--brand-blue); border-color: var(--blue-200); }
.sim-nav-btn.active:hover { background: var(--blue-100); }

.sim-subnav { background: #006699; border-radius: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); border: 1px solid var(--gray-100); padding: 1rem; margin-bottom: 3rem; }
.sim-subnav-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; max-width: 64rem; margin: 0 auto; }
.sim-subnav-pill { padding: .625rem 1.5rem; background: rgba(255,255,255,.1); color: #fff; font-weight: 700; font-size: 1.125rem; border-radius: .75rem; backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: all .2s; text-align: center; display: flex; align-items: center; justify-content: center; }
.sim-subnav-pill:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); box-shadow: 0 4px 6px rgba(0,0,0,.07); }

.sim-section { margin-bottom: 4rem; padding-top: 2rem; border-top: 1px solid var(--gray-200); }
.sim-section-head { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 2.5rem; gap: 1.5rem; text-align: center; }
@media (min-width: 768px) { .sim-section-head { flex-direction: row; } }
.sim-section-head h2 { font-size: 2.25rem; font-weight: 800; color: var(--gray-800); margin: 0; text-align: center; }
@media (min-width: 768px) { .sim-section-head h2 { font-size: 3rem; text-align: right; } }
.sim-section-head img { height: 12rem; object-fit: contain; mix-blend-mode: multiply; filter: drop-shadow(0 1px 2px rgba(0,0,0,.05)); }
@media (min-width: 768px) { .sim-section-head img { height: 18rem; } }

.sim-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .sim-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .sim-grid { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 640px) and (max-width: 1023px) { .sim-card.wide-sm { grid-column: span 2; } }

.sim-card { display: block; background: #fff; border-radius: .75rem; box-shadow: 0 4px 6px rgba(0,0,0,.07); overflow: hidden; transition: all .3s; border: 1px solid var(--gray-100); }
.sim-card:hover { box-shadow: 0 20px 25px rgba(0,0,0,.1); transform: translateY(-.25rem); }
.sim-card-inner { padding: 1.25rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--gray-50); background: var(--gray-50); height: 100%; gap: .75rem; }
.sim-card h3 { font-size: 1.25rem; font-weight: 700; color: var(--gray-800); margin: 0; transition: color .2s; }
.sim-card:hover h3 { color: var(--blue-600); }
.sim-card h3.game { color: #e11d48; display: flex; align-items: center; gap: .375rem; }
.sim-card:hover h3.game { color: #e11d48; }
.sim-badge { display: inline-block; font-size: .75rem; font-weight: 700; padding: .25rem .5rem; border-radius: 9999px; white-space: nowrap; flex-shrink: 0; }
.sim-badge.v26 { background: var(--blue-100); color: #1e40af; }
.sim-badge.html5 { background: #dcfce7; color: #166534; }
.sim-badge.old { background: var(--gray-200); color: var(--gray-600); }

.ping-dot { position: relative; display: inline-flex; height: .5rem; width: .5rem; }
.ping-dot .ping { position: absolute; display: inline-flex; height: 100%; width: 100%; border-radius: 9999px; background: #fb7185; opacity: .75; animation: ping-dot-anim 1.5s cubic-bezier(0,0,0.2,1) infinite; }
.ping-dot .dot { position: relative; display: inline-flex; border-radius: 9999px; height: .5rem; width: .5rem; background: #f43f5e; }
@keyframes ping-dot-anim { 75%, 100% { transform: scale(2); opacity: 0; } }

.sim-utility-box { background: #fff; border-radius: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); border: 1px solid var(--gray-100); padding: 1.5rem; margin-top: 2rem; margin-bottom: 1rem; }
.sim-utility-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; max-width: 64rem; margin: 0 auto; }
.sim-utility-btn { font-size: 1.125rem; font-weight: 700; color: var(--gray-700); background: var(--gray-50); padding: .75rem 1.5rem; border-radius: .75rem; border: 1px solid var(--gray-200); box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: all .2s; display: inline-flex; align-items: center; }
.sim-utility-btn:hover { color: var(--blue-600); box-shadow: 0 4px 6px rgba(0,0,0,.07); transform: translateY(-2px); }
.sim-utility-btn img { height: 1.25rem; width: 1.25rem; margin-right: .5rem; object-fit: contain; }

.sim-final-text { text-align: center; color: var(--gray-600); font-weight: 700; font-size: 1.125rem; padding: 1.5rem 0 3rem; }
@media (min-width: 768px) { .sim-final-text { font-size: 1.25rem; } }
.sim-final-text p { margin: 0 0 .5rem; }
.sim-final-text a { color: var(--blue-600); }
.sim-final-text a:hover { text-decoration: underline; }


/* =========================================================
   FORCE & MOTION SIMULATIONS PAGE COMPONENTS
   ========================================================= */
.fm-hero {
    position: relative; background-color: #5a8fbe; overflow: hidden;
    padding: 2rem 0 1rem; box-shadow: inset 0 2px 4px rgba(0,0,0,.06);
    height: 320px; display: flex; flex-direction: column; justify-content: flex-start;
}
@media (min-width: 768px) { .fm-hero { height: 350px; } }
.fm-hero .svg-track-wrap { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; margin-top: 3rem; }
@media (min-width: 768px) { .fm-hero .svg-track-wrap { margin-top: 4rem; } }
.fm-hero .svg-track-wrap svg { width: 100%; height: 100%; opacity: .95; }

.fm-hero-text {
    position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center;
    justify-content: flex-start; text-align: center; color: #fff; padding: .5rem 1rem 0;
    user-select: none; pointer-events: none;
}
@media (min-width: 768px) { .fm-hero-text { padding-top: 1rem; } }
.fm-hero-text h1 { font-size: 3rem; font-weight: 800; letter-spacing: -0.025em; margin: 0 0 .5rem; text-shadow: 0 10px 15px rgba(0,0,0,.25), 0 4px 6px rgba(0,0,0,.15); }
@media (min-width: 768px) { .fm-hero-text h1 { font-size: 3.75rem; } }
@media (min-width: 1024px) { .fm-hero-text h1 { font-size: 4.5rem; } }
.fm-hero-text p.subtitle { font-size: 1.5rem; font-weight: 500; text-shadow: 0 4px 6px rgba(0,0,0,.2); margin: 0; }
@media (min-width: 768px) { .fm-hero-text p.subtitle { font-size: 1.875rem; } }

.fm-nav-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; max-width: 64rem; margin: 0 auto; }
@media (min-width: 768px) { .fm-nav-grid { grid-template-columns: repeat(5,1fr); } }

.fm-subnav-pill { padding: .5rem 1rem; color: #fff; font-weight: 700; font-size: 1.125rem; border-radius: .5rem; transition: background-color .2s; }
.fm-subnav-pill:hover { background: rgba(255,255,255,.2); }
.fm-subnav-pill.active { background: rgba(255,255,255,.2); }

.sim-section.no-border { border-top: none; padding-top: 0; }

.fm-section-head { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 2.5rem; gap: 1.5rem; text-align: center; }
@media (min-width: 768px) { .fm-section-head { flex-direction: row; } }
.fm-section-head h2 { font-size: 2.25rem; font-weight: 800; color: var(--gray-800); margin: 0; text-align: center; }
@media (min-width: 768px) { .fm-section-head h2 { font-size: 3rem; } }
.fm-section-head img { height: 14rem; object-fit: contain; mix-blend-mode: multiply; filter: drop-shadow(0 1px 2px rgba(0,0,0,.05)); }
@media (min-width: 768px) { .fm-section-head img { height: 20rem; } }

.dark-footer { background: #0f172a; color: #cbd5e1; padding: 2.5rem 0; border-top: 1px solid #1e293b; text-align: center; user-select: none; }
.dark-footer .inner { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
.dark-footer p.copyright { font-size: .875rem; letter-spacing: .05em; text-transform: uppercase; margin: 0 0 .5rem; font-weight: 600; color: #cbd5e1; }
@media (min-width: 768px) { .dark-footer p.copyright { font-size: 1rem; } }
.dark-footer p.desc { font-size: .875rem; color: #94a3b8; line-height: 1.6; max-width: 42rem; margin: 0 auto; }
@media (min-width: 768px) { .dark-footer p.desc { font-size: 1rem; } }


/* =========================================================
   ELECTROMAGNETISM SIMULATIONS PAGE COMPONENTS
   ========================================================= */
.sim-badge.v26-emerald { background: #d1fae5; color: #065f46; }
.sim-card:hover h3.emerald { color: #059669; }

.fm-section-head a.head-link { display: block; text-decoration: none; }
.fm-section-head a.head-link h2 { transition: color .2s; }
.fm-section-head a.head-link:hover h2 { color: #059669; }

.sim-subnav-pill.active { background: rgba(255,255,255,.3); border-color: rgba(255,255,255,.4); box-shadow: 0 4px 6px rgba(0,0,0,.07); }
.sim-subnav-pill.active:hover { background: rgba(255,255,255,.4); }

.emag-hero {
    position: relative; background-color: #568cbf; overflow: hidden;
    padding: 4rem 0; box-shadow: inset 0 2px 4px rgba(0,0,0,.06);
    height: 480px;
}
@media (min-width: 768px) { .emag-hero { height: 580px; } }
.emag-hero .canvas-fill { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.emag-hero .canvas-fill canvas { width: 100%; height: 100%; opacity: .95; display: block; }

.emag-hero-text {
    position: absolute; top: 2rem; left: 0; right: 0; z-index: 10;
    display: flex; flex-direction: column; align-items: flex-start; text-align: left;
    padding: 0 1rem; max-width: 80rem; margin: 0 auto; user-select: none; pointer-events: none;
}
@media (min-width: 768px) { .emag-hero-text { padding: 0 2rem; } }
.emag-hero-text h1 {
    font-size: 2.25rem; font-weight: 800; letter-spacing: -0.025em; margin: 0 0 .75rem;
    color: #fff; text-transform: uppercase; line-height: 1.15;
    text-shadow: 0 10px 15px rgba(0,0,0,.25), 0 4px 6px rgba(0,0,0,.15);
}
@media (min-width: 768px) { .emag-hero-text h1 { font-size: 3rem; } }
@media (min-width: 1024px) { .emag-hero-text h1 { font-size: 3.75rem; } }
.emag-hero-text p.subtitle {
    font-size: 1.25rem; font-weight: 600; letter-spacing: .025em; margin: 0;
    color: var(--blue-100, #dbeafe); opacity: .9; text-shadow: 0 4px 6px rgba(0,0,0,.2);
}
@media (min-width: 768px) { .emag-hero-text p.subtitle { font-size: 1.5rem; } }

.control-panel {
    position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 20;
    display: flex; flex-direction: column; gap: .75rem;
    background: rgba(15,23,42,.9); backdrop-filter: blur(8px);
    padding: .75rem 1.25rem; border-radius: 1rem; border: 1px solid rgba(51,65,85,.5);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,.15); align-items: center; color: #fff;
    width: 90%; max-width: 32rem;
}
@media (min-width: 640px) { .control-panel { flex-direction: row; gap: 1.5rem; border-radius: 9999px; width: auto; } }
.control-panel .controls-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; width: 100%; justify-content: center; }
@media (min-width: 640px) { .control-panel .controls-row { flex-wrap: nowrap; gap: 1.5rem; width: auto; } }
.control-item { display: flex; align-items: center; gap: .5rem; }
.control-item .ctrl-label { font-size: .75rem; font-weight: 600; color: #cbd5e1; }
.control-item .ctrl-label.charge-label { width: 3rem; text-align: right; }
.control-item input[type="range"] { width: 5rem; height: .375rem; background: #334155; border-radius: .5rem; appearance: none; cursor: pointer; accent-color: #3b82f6; }
@media (min-width: 768px) { .control-item input[type="range"] { width: 6rem; } }
#chargeIndicator { font-size: .75rem; font-weight: 700; color: #60a5fa; width: 1rem; }

.toggle-switch-wrap { position: relative; display: inline-block; width: 3rem; margin-right: .5rem; vertical-align: middle; user-select: none; }
.toggle-checkbox {
    position: absolute; display: block; width: 1.5rem; height: 1.5rem; border-radius: 9999px;
    background: #fff; border: 4px solid #3b82f6; right: 4px; appearance: none; cursor: pointer;
    transition: all .3s; z-index: 10;
}
.toggle-checkbox:checked { right: 0; border-color: #ef4444; }
.toggle-label { display: block; overflow: hidden; height: 1.5rem; border-radius: 9999px; background: #3b82f6; cursor: pointer; transition: background-color .3s; }
.toggle-checkbox:checked + .toggle-label { background: #ef4444; }

.emag-utility-box { background: #fff; border-radius: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); border: 1px solid var(--gray-100); padding: 1.5rem; margin-top: 2rem; margin-bottom: 1rem; }
.emag-utility-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; max-width: 64rem; margin: 0 auto; }
.emag-utility-btn { font-size: .875rem; font-weight: 600; color: var(--gray-600); background: var(--gray-50); padding: .5rem 1rem; border-radius: .5rem; border: 1px solid var(--gray-200); transition: color .2s; display: inline-flex; align-items: center; }
.emag-utility-btn:hover { color: #059669; }
.emag-utility-btn img { height: 1rem; width: 1rem; margin-right: .375rem; object-fit: contain; }

.emag-footer { text-align: center; padding: 2rem 0 1rem; border-top: 1px solid var(--gray-200); color: var(--gray-700); font-size: 1.125rem; font-weight: 500; }
.emag-footer p { margin: .25rem 0; }
.emag-footer p:first-child { margin-top: 0; }


/* =========================================================
   ENERGY & FLUIDS SIMULATIONS PAGE COMPONENTS
   ========================================================= */
.sim-card:hover h3.emerald { color: #059669; }
.sim-card:hover h3.amber { color: #d97706; }
.sim-badge.v2 { background: #fef3c7; color: #92400e; }

.emoji-visual { height: 12rem; display: flex; align-items: center; justify-content: center; font-size: 5rem; filter: drop-shadow(0 4px 6px rgba(0,0,0,.1)); opacity: .9; user-select: none; }
@media (min-width: 768px) { .emoji-visual { font-size: 6rem; } }

/* Reuses .emag-hero for the header box, but this page's SVG needs draggable cursors */
#massLeft, #massRight { cursor: grab; transition: filter .2s, opacity .2s; }
#massLeft:hover, #massRight:hover { filter: brightness(1.15) drop-shadow(0 10px 15px rgba(0,0,0,.4)); opacity: .95; }
#massLeft:active, #massRight:active { cursor: grabbing; }

@keyframes chart-enter { 0% { opacity: 0; transform: scale(0.85); } 100% { opacity: 1; transform: scale(1); } }
.energy-chart { opacity: 0; transform-origin: 600px 500px; animation: chart-enter 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards; }

.energy-control-panel {
    position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 20;
    display: flex; flex-direction: column; gap: .75rem;
    background: rgba(15,23,42,.9); backdrop-filter: blur(8px);
    padding: .75rem 1.25rem; border-radius: 1rem; border: 1px solid rgba(51,65,85,.5);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,.15); align-items: center; color: #fff;
    width: 90%; max-width: 32rem;
}
@media (min-width: 640px) { .energy-control-panel { flex-direction: row; gap: 1.5rem; border-radius: 9999px; width: auto; } }
.energy-control-panel .disturb-buttons { display: flex; gap: .5rem; }
.disturb-btn { padding: .375rem .75rem; color: #fff; font-weight: 700; font-size: .75rem; border-radius: 9999px; transition: all .2s; box-shadow: 0 1px 2px rgba(0,0,0,.05); border: none; cursor: pointer; }
.disturb-btn:active { transform: scale(.95); }
.disturb-btn.left { background: #d97706; }
.disturb-btn.left:hover { background: #f59e0b; }
.disturb-btn.right { background: #475569; }
.disturb-btn.right:hover { background: #64748b; }
.energy-control-panel .divider-v { display: none; height: 1.5rem; width: 1px; background: #334155; }
@media (min-width: 640px) { .energy-control-panel .divider-v { display: block; } }
.damping-control { display: flex; align-items: center; gap: .5rem; width: 100%; justify-content: space-between; }
@media (min-width: 640px) { .damping-control { width: auto; justify-content: flex-start; } }
.damping-control .ctrl-label { font-size: .75rem; font-weight: 600; color: #cbd5e1; }
.damping-control .extreme-label { font-size: .625rem; color: #94a3b8; }
.damping-control input[type="range"] { width: 6rem; height: .375rem; background: #334155; border-radius: .5rem; appearance: none; cursor: pointer; accent-color: #3b82f6; }
@media (min-width: 768px) { .damping-control input[type="range"] { width: 8rem; } }

.es-utility-box { background: var(--gray-50); border-radius: 1rem; box-shadow: 0 4px 6px rgba(0,0,0,.07); border: 2px solid var(--gray-200); padding: 2rem; margin-top: 3rem; margin-bottom: 2rem; }
@media (min-width: 768px) { .es-utility-box { padding: 3rem; } }
.es-utility-box h3 { font-size: 1.5rem; font-weight: 800; text-align: center; color: var(--gray-800); margin: 0 0 1.5rem; }
@media (min-width: 768px) { .es-utility-box h3 { font-size: 1.875rem; margin-bottom: 2rem; } }
.es-utility-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; max-width: 64rem; margin: 0 auto; }
@media (min-width: 768px) { .es-utility-row { gap: 1.5rem; } }
.es-utility-btn { font-size: 1.125rem; font-weight: 700; color: var(--gray-700); background: #fff; padding: .75rem 1.5rem; border-radius: .75rem; border: 2px solid var(--gray-200); box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: all .2s; }
@media (min-width: 768px) { .es-utility-btn { font-size: 1.25rem; padding: 1rem 2rem; } }
.es-utility-btn:hover { color: #047857; background: #ecfdf5; border-color: #a7f3d0; box-shadow: 0 4px 6px rgba(0,0,0,.07); transform: translateY(-.25rem); }
.es-utility-btn.blue-hover:hover { color: #1d4ed8; background: var(--blue-50); border-color: #93c5fd; }
.es-utility-btn.contact { color: #fff; background: #4f46e5; border-color: #4338ca; box-shadow: 0 1px 3px rgba(0,0,0,.1); display: inline-flex; align-items: center; }
.es-utility-btn.contact:hover { background: #4338ca; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); transform: translateY(-.25rem); }
.es-utility-btn.contact img { height: 1.5rem; width: 1.5rem; margin-right: .75rem; object-fit: contain; filter: brightness(0) invert(1); }


/* =========================================================
   MODERN PHYSICS SIMULATIONS PAGE COMPONENTS
   ========================================================= */
.emag-hero-text.center { align-items: center; text-align: center; }

.sim-badge.sim { background: var(--blue-100); color: #1e40af; }

.spectra-sublink-card { display: block; background: #fff; border-radius: .75rem; box-shadow: 0 4px 6px rgba(0,0,0,.07); overflow: hidden; border: 1px solid var(--gray-100); }
.spectra-sublink-card .inner { padding: 1.25rem; display: flex; flex-direction: column; justify-content: center; height: 100%; gap: .75rem; background: var(--gray-50); border-bottom: 1px solid var(--gray-50); }
.spectra-sublink-card h3 { font-size: 1.125rem; font-weight: 700; color: var(--gray-800); margin: 0; }
.spectra-sublink-card .btn-row { display: flex; gap: .5rem; }
.spectra-sublink-card .btn-row a { flex: 1; text-align: center; font-weight: 600; padding: .5rem .75rem; border-radius: .5rem; transition: background-color .2s; }
.spectra-sublink-card .btn-row a.hydrogen { background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe; }
.spectra-sublink-card .btn-row a.hydrogen:hover { background: #e0e7ff; }
.spectra-sublink-card .btn-row a.helium { background: #faf5ff; color: #7e22ce; border: 1px solid #e9d5ff; }
.spectra-sublink-card .btn-row a.helium:hover { background: #f3e8ff; }

/* Enlarged per request: Quick Links buttons and footer text, noticeably bigger than other pages */
.modphys-utility-box { background: #fff; border-radius: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); border: 1px solid var(--gray-100); padding: 1.5rem; margin-top: 2rem; margin-bottom: 1rem; }
.modphys-utility-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; max-width: 64rem; margin: 0 auto; }
.modphys-utility-btn { font-size: 1.375rem; font-weight: 700; color: var(--gray-800); background: var(--gray-100); padding: .75rem 1.5rem; border-radius: .5rem; border: 1px solid var(--gray-300, #d1d5db); transition: color .2s; display: inline-flex; align-items: center; }
@media (min-width: 768px) { .modphys-utility-btn { font-size: 1.625rem; } }
.modphys-utility-btn:hover { color: #047857; }
.modphys-utility-btn img { height: 1.5rem; width: 1.5rem; margin-right: .5rem; object-fit: contain; }

.modphys-footer { text-align: center; padding: 2rem 0 1rem; border-top: 1px solid var(--gray-300, #d1d5db); color: var(--gray-800); font-weight: 500; font-size: 1.75rem; }
@media (min-width: 768px) { .modphys-footer { font-size: 2.25rem; } }
.modphys-footer p { margin: .5rem 0; }
.modphys-footer p:first-child { margin-top: 0; }
.modphys-footer a.classic-link { color: #1d4ed8; font-weight: 700; }


/* =========================================================
   REVIEW QUIZZES PAGE COMPONENTS
   ========================================================= */
.review-nav-card .hero-gif { width: 12rem; height: auto; margin-bottom: 1.5rem; mix-blend-mode: multiply; filter: drop-shadow(0 1px 2px rgba(0,0,0,.05)); transition: transform .3s; }
@media (min-width: 768px) { .review-nav-card .hero-gif { width: 14rem; } }
.review-nav-card .hero-gif:hover { transform: scale(1.05); }

.review-nav-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; max-width: 72rem; margin: 0 auto; }
@media (min-width: 768px) { .review-nav-grid { grid-template-columns: repeat(6,1fr); } }

.review-cards-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 4rem; }
@media (min-width: 768px) { .review-cards-grid { grid-template-columns: repeat(3,1fr); } }

.review-card { background: #fff; border-radius: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); border: 1px solid var(--gray-100); padding: 2rem; display: flex; flex-direction: column; }
.review-card > * + * { margin-top: 1rem; }
.review-card h3 { font-size: 1.5rem; font-weight: 700; color: #1e3a8a; border-bottom: 2px solid var(--blue-100); padding-bottom: .75rem; margin: 0 0 .5rem; }
.review-card a { font-size: 1.25rem; font-weight: 600; color: var(--gray-700); transition: color .2s; }
.review-card a:hover { color: var(--blue-600); }

.review-subtitle { font-size: 1.875rem; font-weight: 800; text-align: center; color: var(--gray-800); letter-spacing: -0.025em; margin: 0 0 2.5rem; }

.resources-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 2.5rem; }
@media (min-width: 1024px) { .resources-grid { grid-template-columns: repeat(3,1fr); } }

.resource-card { border-radius: 1rem; padding: 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.resource-card.purple { background: #faf5ff; border: 1px solid #e9d5ff; }
.resource-card.gray { background: var(--gray-50); border: 1px solid var(--gray-200); }
.resource-card.red { background: #fef2f2; border: 1px solid #fee2e2; gap: 1rem; }

.quiz-master-brand { font-size: 1.875rem; font-weight: 800; color: #9900CC; display: block; margin-bottom: .25rem; filter: drop-shadow(0 1px 1px rgba(0,0,0,.05)); }
.quiz-master-sub { font-size: 1.5rem; font-weight: 700; color: var(--gray-800); display: block; text-decoration: underline; text-decoration-color: #d8b4fe; text-underline-offset: 4px; }

.watchface-label { font-weight: 700; font-size: 1.25rem; color: var(--gray-800); margin: 0 0 1.5rem; text-align: center; }
.watchface-img { width: 12rem; height: auto; border-radius: 9999px; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); border: 4px solid #fff; }
@media (min-width: 768px) { .watchface-img { width: 13rem; } }

.youtube-btn { display: block; width: 91.67%; max-width: 260px; background: #dc2626; color: #fff; font-size: 1rem; font-weight: 700; padding: .75rem 1rem; border-radius: .75rem; box-shadow: 0 4px 6px rgba(0,0,0,.07); transition: all .2s; line-height: 1.25; text-align: center; }
@media (min-width: 1024px) { .youtube-btn { font-size: 1.125rem; } }
.youtube-btn:hover { background: #b91c1c; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); transform: translateY(-2px); }

.featured-video .video-link { display: inline-block; margin-top: 1.5rem; font-size: 1.125rem; font-weight: 600; color: #d1d5db; transition: color .2s; }
.featured-video .video-link:hover { color: #fff; }

.review-agenda-row {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem; margin-bottom: 2rem;
    border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); padding: 1rem 0;
    max-width: 48rem; margin-left: auto; margin-right: auto;
}
.review-agenda-row .label { font-weight: 600; color: var(--gray-600); text-transform: uppercase; letter-spacing: .05em; font-size: 1.3125rem; }
.review-agenda-row a { font-weight: 700; font-size: 1.6875rem; transition: color .2s; }
.review-agenda-row a:hover { color: var(--blue-600); }


/* =========================================================
   KINEMATICS LESSON PAGE COMPONENTS
   ========================================================= */
.kine-header {
    position: relative; background-color: #4392ca; overflow: hidden;
    padding: 3rem 0 10rem; min-height: 300px; display: flex; align-items: flex-start; justify-content: center;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.06);
}
@media (min-width: 640px) { .kine-header { padding: 4rem 0 12rem; min-height: 400px; } }

.kine-canvas-wrap { position: absolute; inset: 0; z-index: 0; }
.kine-canvas-wrap canvas { width: 100%; height: 100%; display: block; }

.kine-title-wrap {
    position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center;
    justify-content: center; text-align: center; color: #fff; padding: 0 1rem; user-select: none;
    pointer-events: none; width: 100%;
}
.kine-title-inner { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; }
.kine-title-inner h1 {
    font-size: 3.75rem; font-weight: 800; letter-spacing: -0.025em; margin: 0 0 1rem;
    text-shadow: 0 10px 15px rgba(0,0,0,.25), 0 4px 6px rgba(0,0,0,.15);
}
@media (min-width: 768px) { .kine-title-inner h1 { font-size: 4.5rem; } }
@media (min-width: 1024px) { .kine-title-inner h1 { font-size: 6rem; } }
.kine-title-inner p { font-size: 1.875rem; font-weight: 500; margin: 0 0 .25rem; text-shadow: 0 4px 6px rgba(0,0,0,.2); }
@media (min-width: 768px) { .kine-title-inner p { font-size: 2.25rem; } }

.kine-nav-card { background: #fff; border-radius: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); border: 1px solid var(--gray-100); padding: 1.5rem; margin-bottom: 3rem; position: relative; z-index: 10; }
.all-lessons-pill {
    display: inline-flex; align-items: center; justify-content: center; background: var(--blue-600); color: #fff;
    font-size: 1.25rem; font-weight: 900; padding: 1rem 2.5rem; border-radius: 9999px; box-shadow: 0 4px 6px rgba(0,0,0,.07);
    transition: all .2s; text-transform: uppercase; letter-spacing: .05em; text-decoration: none;
}
@media (min-width: 768px) { .all-lessons-pill { font-size: 1.5rem; } }
.all-lessons-pill:hover { background: #1d4ed8; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); transform: translateY(-4px); }
.all-lessons-pill svg { width: 1.5rem; height: 1.5rem; margin-right: .75rem; }

.kine-nav-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: .75rem; max-width: 72rem; margin: 0 auto; }
@media (min-width: 768px) { .kine-nav-grid { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1024px) { .kine-nav-grid { grid-template-columns: repeat(5,1fr); } }

.kine-cards-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 4rem; max-width: 80rem; margin-left: auto; margin-right: auto; }
@media (min-width: 640px) { .kine-cards-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .kine-cards-grid { grid-template-columns: repeat(3,1fr); } }

.kine-card { display: block; background: #fff; border-radius: .75rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); overflow: hidden; border: 1px solid var(--blue-200); position: relative; height: 100%; }
.kine-card-inner { position: relative; padding: 1rem; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 340px; }
@media (min-width: 640px) { .kine-card-inner { padding: 1.5rem; } }
.kine-card-media { margin-bottom: 1rem; height: 14rem; display: flex; align-items: center; justify-content: center; transition: transform .3s; }
.kine-card:hover .kine-card-media { transform: scale(1.1); }
.kine-card-media img { width: 14rem; height: 14rem; object-fit: contain; filter: drop-shadow(0 4px 3px rgba(0,0,0,.07)); border-radius: 9999px; background: rgba(255,255,255,.1); padding: .25rem; }
.kine-card-media svg { width: 14rem; height: 14rem; overflow: visible; color: #60a5fa; transition: color .3s; }
.kine-card:hover .kine-card-media svg { color: #fff; }
.kine-card h3 { font-size: 1.25rem; font-weight: 700; color: var(--gray-800); letter-spacing: .025em; transition: color .3s; margin: 0; }
.kine-card:hover h3 { color: var(--blue-600); }
.kine-card.gradient-hover:hover h3 { color: #fff; }
.kine-card .ap-badge { display: inline-block; margin-top: .75rem; padding: .25rem .75rem; background: var(--blue-100); color: #1d4ed8; font-size: .75rem; font-weight: 700; border-radius: 9999px; transition: background-color .2s; pointer-events: auto; }
.kine-card .ap-badge:hover { background: var(--blue-200); }
.kine-card-bg { position: absolute; inset: 0; background: linear-gradient(to bottom right, #2563eb, #1e40af); opacity: 0; transition: opacity .3s; }
.kine-card.gradient-hover:hover .kine-card-bg { opacity: .95; }

.kine-footer { text-align: center; padding: 2rem 0; border-top: 1px solid var(--gray-200); color: var(--gray-500); font-size: 1rem; }
@media (min-width: 768px) { .kine-footer { font-size: 1.125rem; } }
.kine-footer-links { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 1.5rem; row-gap: .75rem; margin-bottom: 2rem; max-width: 56rem; margin-left: auto; margin-right: auto; font-size: 1.125rem; }
@media (min-width: 768px) { .kine-footer-links { font-size: 1.25rem; } }
.kine-footer-links a { font-weight: 500; transition: color .2s; }
.kine-footer-links a:hover { color: #4f46e5; }

.kine-quarters-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem; margin-bottom: 2rem; border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); padding: 1rem 0; max-width: 42rem; margin-left: auto; margin-right: auto; }
.kine-quarters-row .label { font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; font-size: .875rem; }
@media (min-width: 768px) { .kine-quarters-row .label { font-size: 1rem; } }
.kine-quarters-row a { font-weight: 700; transition: color .2s; }
.kine-quarters-row a:hover { color: #4f46e5; }

.kine-footer-bottom p { margin: .5rem 0; }
.kine-footer-bottom p:first-child { margin-top: 0; }
.kine-footer-bottom .classic-link { margin-left: .25rem; }
.kine-footer-bottom .email-link { color: var(--brand-blue); font-weight: 500; }
.kine-footer-bottom .email-link:hover { text-decoration: underline; }


/* =========================================================
   DYNAMICS LESSON PAGE COMPONENTS
   ========================================================= */
.header-text.abs-top6 { position: absolute; top: 1.5rem; left: 0; width: 100%; }

.dyn-header { position: relative; background-color: #4392ca; overflow: hidden; min-height: 320px; box-shadow: inset 0 2px 4px rgba(0,0,0,.06); }
.dyn-header .canvas-fill canvas { cursor: pointer; }

.dyn-nav-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; max-width: 64rem; margin: 0 auto; }
@media (min-width: 768px) { .dyn-nav-grid { grid-template-columns: repeat(5,1fr); } }

.dyn-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 4rem; }
@media (min-width: 640px) { .dyn-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .dyn-grid { grid-template-columns: repeat(3,1fr); } }

.dyn-card { display: block; background: #fff; border-radius: .75rem; box-shadow: 0 4px 6px rgba(0,0,0,.07); overflow: hidden; transition: all .3s; border: 1px solid var(--gray-100); }
.dyn-card:hover { box-shadow: 0 20px 25px rgba(0,0,0,.1); transform: translateY(-.25rem); }
.dyn-card-media { height: 12rem; background: var(--blue-50); display: flex; align-items: center; justify-content: center; color: var(--brand-blue); transition: transform .3s; }
.dyn-card:hover .dyn-card-media { transform: scale(1.1); }
.dyn-card-media img { height: 10rem; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.dyn-card-label { padding: 1.25rem; text-align: center; border-top: 1px solid var(--gray-100); }
.dyn-card-label h3 { font-size: 1.25rem; font-weight: 700; color: var(--gray-800); margin: 0; }
.dyn-card-label h3 a { color: inherit; transition: color .2s; }
.dyn-card-label h3 a:hover { color: var(--brand-blue); }
.dyn-card-label h3 a.notes-link { color: var(--brand-blue); }
.dyn-card-label h3 a.notes-link:hover { text-decoration: underline; }
.dyn-card-label .sub-row { margin-top: .5rem; font-size: .875rem; font-weight: 700; color: var(--gray-700); }
.dyn-card-label .divider-pipe { color: #9ca3af; font-weight: 400; margin: 0 .25rem; }
.dyn-card-label a.pipe-link { color: var(--brand-blue); }
.dyn-card-label a.pipe-link:hover { text-decoration: underline; }

.dyn-footer { text-align: center; padding: 2.5rem 0 3rem; border-top: 1px solid var(--gray-200); color: var(--gray-800); font-size: 1.875rem; font-weight: 600; }
@media (min-width: 768px) { .dyn-footer { font-size: 2.25rem; } }
.dyn-footer p { margin: 1rem 0; }
.dyn-footer p:first-child { margin-top: 0; }
.dyn-footer p.est { color: var(--gray-600); }


/* =========================================================
   CIRCUIT ELECTRICITY LESSON PAGE COMPONENTS
   ========================================================= */
.site-header.circ { padding: 6rem 0; cursor: pointer; }

.circ-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-bottom: 4rem; }
@media (min-width: 768px) { .circ-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .circ-grid { grid-template-columns: repeat(3,1fr); } }

.circ-card { display: block; background: #fff; border-radius: .75rem; box-shadow: 0 4px 6px rgba(0,0,0,.07); overflow: hidden; transition: all .3s; border: 1px solid var(--gray-100); }
.circ-card:hover { box-shadow: 0 20px 25px rgba(0,0,0,.1); transform: translateY(-.25rem); }
.circ-card-media { height: 14rem; background: var(--blue-50); display: flex; align-items: center; justify-content: center; padding: 1.5rem; position: relative; }
.circ-card-media img { height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .3s; }
.circ-card:hover .circ-card-media img { transform: scale(1.05); }
.circ-card-label { padding: 1.25rem; text-align: center; border-top: 1px solid var(--gray-100); }
.circ-card-label h3 { font-size: 1.5rem; font-weight: 700; color: var(--gray-800); margin: 0; }

.circ-footer { text-align: center; padding: 3rem 0 2rem; border-top: 1px solid #9ca3af; color: #030712; font-size: 1.5rem; font-weight: 900; }
.circ-footer p { margin: .75rem 0; }
.circ-footer p:first-child { margin-top: 0; }


/* =========================================================
   FORCES LESSON PAGE COMPONENTS
   ========================================================= */
.site-header.compact { padding: 3rem 0; }

.frc-card-footer { padding: 1.25rem; border-top: 1px solid var(--gray-100); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; }
.frc-card-footer .title-link { font-size: 1.25rem; font-weight: 700; color: var(--gray-800); transition: color .2s; }
.frc-card-footer .title-link:hover { color: var(--brand-blue); }
.frc-notes-btn { background: #3b82f6; color: #fff; font-size: .75rem; font-weight: 700; padding: .375rem .75rem; border-radius: .25rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: background-color .15s; }
.frc-notes-btn:hover { background: #2563eb; }


/* =========================================================
   PROJECTILE MOTION LESSON PAGE COMPONENTS
   (mostly reuses .kine-* classes from the Kinematics page)
   ========================================================= */
.kine-card-media.plain-img img { border-radius: 0; background: none; padding: 0; filter: none; width: 14rem; height: 14rem; }
.kine-card-bg.red { background: linear-gradient(to bottom right, #dc2626, #991b1b); }
.kine-card-media svg.red-icon { color: #ef4444; width: 8rem; height: 8rem; }
.kine-card .badge-row { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.kine-card .badge-row .ap-badge.green { background: #dcfce7; color: #15803d; }
.kine-card .badge-row .ap-badge.green:hover { background: #bbf7d0; }


/* =========================================================
   CIRCULAR MOTION LESSON PAGE COMPONENTS
   ========================================================= */
.plot-nav-card .all-lessons.small a { font-size: 1.125rem; }

.cm-nav-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; max-width: 56rem; margin: 0 auto; }
@media (min-width: 768px) { .cm-nav-grid { grid-template-columns: repeat(4,1fr); } }

.cm-card { display: block; background: #fff; border-radius: .75rem; box-shadow: 0 4px 6px rgba(0,0,0,.07); overflow: hidden; transition: all .3s; border: 1px solid var(--gray-100); }
.cm-card:hover { box-shadow: 0 20px 25px rgba(0,0,0,.1); transform: translateY(-.25rem); }
.cm-card-media { height: 11rem; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; }
.cm-card-media img { width: 100%; height: 100%; object-fit: contain; padding: .5rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,.05)); transition: transform .3s; }
.cm-card:hover .cm-card-media img { transform: scale(1.1); }
.cm-card-label { padding: 1.25rem; text-align: center; border-top: 1px solid var(--gray-100); }
.cm-card-label h3 { font-size: 1.25rem; font-weight: 700; color: var(--gray-800); margin: 0; }

.cm-card-footer { padding: 1.25rem; display: flex; align-items: center; justify-content: center; gap: .75rem; border-top: 1px solid var(--gray-100); flex-wrap: wrap; }
.cm-card-footer .title-link { font-size: 1.25rem; font-weight: 700; color: var(--gray-800); transition: color .2s; }
.cm-card-footer .title-link:hover { color: var(--brand-blue); }
.cm-notes-btn { font-size: .875rem; font-weight: 700; color: #fff; background: var(--brand-blue); padding: .25rem .75rem; border-radius: 9999px; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: background-color .2s; }
.cm-notes-btn:hover { background: #2563eb; }

.cm-footer { text-align: center; padding: 2rem 0 1rem; border-top: 1px solid var(--gray-200); color: #111827; font-size: 1.125rem; font-weight: 500; }
.cm-footer p { margin: .5rem 0; }
.cm-footer p:first-child { margin-top: 0; }


/* =========================================================
   REFRACTION LESSON PAGE COMPONENTS
   ========================================================= */
.plot-nav-card.emphasis { box-shadow: 0 4px 6px rgba(0,0,0,.07); border-color: var(--gray-200); }
.plot-nav-card .all-lessons.medium a { font-size: 1.25rem; }

.rf-nav-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; max-width: 64rem; margin: 0 auto; }
.rf-nav-pill { background: var(--blue-50); color: #1e3a8a; font-weight: 700; font-size: 1rem; padding: .75rem 1.5rem; border-radius: 9999px; border: 1px solid var(--blue-200); box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: all .2s; }
.rf-nav-pill:hover { background: var(--blue-100); transform: translateY(-2px); }

.rf-card-media { height: 11rem; background: #0f172a; display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; position: relative; }
.rf-card-media canvas { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.dyn-card:hover .rf-card-media canvas { transform: scale(1.05); }

.rf-footer { text-align: center; padding: 2.5rem 0 2rem; border-top: 1px solid #9ca3af; color: #000; font-size: 1.125rem; font-weight: 500; }
@media (min-width: 640px) { .rf-footer { font-size: 1.25rem; } }
.rf-footer p { margin: .75rem 0; }
.rf-footer p:first-child { margin-top: 0; }
.rf-footer .est { color: var(--gray-800); }
.rf-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: 2rem; max-width: 56rem; margin-left: auto; margin-right: auto; font-weight: 700; font-size: 1.25rem; color: #1e3a8a; }
@media (min-width: 640px) { .rf-footer-links { gap: 2rem; } }
.rf-footer-links a { transition: color .2s; }
.rf-footer-links a:hover { color: #1d4ed8; }


/* =========================================================
   MOTION PLANE REVIEW PAGE COMPONENTS
   ========================================================= */
.header-text.compact h1 { font-size: 2.25rem; }
@media (min-width: 768px) { .header-text.compact h1 { font-size: 3rem; } }
@media (min-width: 1024px) { .header-text.compact h1 { font-size: 3.75rem; } }
.header-text.compact p.subtitle { font-size: 1.25rem; }
@media (min-width: 768px) { .header-text.compact p.subtitle { font-size: 1.5rem; } }

.plot-nav-card .dashboard-label { color: var(--gray-500); font-weight: 500; text-align: center; margin-top: .5rem; }

.review-topics-head { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 2.5rem; }
.review-topics-head img { width: 12rem; height: auto; margin-bottom: 1rem; mix-blend-mode: multiply; filter: drop-shadow(0 1px 2px rgba(0,0,0,.05)); transition: transform .3s; }
@media (min-width: 768px) { .review-topics-head img { width: 14rem; } }
.review-topics-head img:hover { transform: scale(1.05); }
.review-topics-head h2 { font-size: 2.25rem; font-weight: 800; text-align: center; color: var(--gray-800); letter-spacing: -0.025em; margin: 0; }

.resources-grid.two-col { grid-template-columns: 1fr; max-width: 56rem; margin-left: auto; margin-right: auto; }
@media (min-width: 768px) { .resources-grid.two-col { grid-template-columns: repeat(2,1fr); } }
.resource-card .pre-label { font-size: .875rem; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .5rem; display: block; }
.resource-card .video-label { font-weight: 700; font-size: 1.25rem; color: var(--gray-800); margin-bottom: .5rem; }

.review-card .deco-img { width: 8rem; height: auto; margin: 0 auto .5rem; mix-blend-mode: multiply; filter: drop-shadow(0 1px 2px rgba(0,0,0,.05)); display: block; }
@media (min-width: 768px) { .review-card .deco-img { width: 10rem; } }
.review-card h3.icon-head { display: flex; align-items: center; gap: .5rem; }
.review-card h4 { font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; font-size: .75rem; margin: 1rem 0 0; }
.review-card h4.first { margin-top: .5rem; }
.review-card .version-tag { font-size: .75rem; background: #fef9c3; color: #854d0e; padding: 0 .25rem; border-radius: .25rem; margin-left: .25rem; }
.review-card .sub-link { font-size: .875rem; font-weight: 500; color: #3b82f6; }
.review-card .sub-link:hover { text-decoration: underline; }
.review-card .attribution { font-size: .875rem; font-weight: 400; color: var(--gray-500); }
.review-card .crossword-link { font-size: 1rem; font-weight: 600; }
.review-card .view-all { font-size: .75rem; font-weight: 700; color: #3b82f6; }
.review-card .view-all:hover { text-decoration: underline; }
.review-card .thumb-row { display: flex; flex-direction: row; align-items: center; gap: 1rem; padding: .5rem 0; }
.review-card .thumb-row img { height: 5rem; width: auto; border-radius: .25rem; border: 1px solid var(--gray-200); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.review-card .comet-block { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--gray-100); display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.review-card .comet-block img { height: 6rem; width: auto; border-radius: .25rem; border: 2px solid #d1d5db; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.review-card .comet-label { font-size: .75rem; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: .05em; }
.review-card .img-break { padding: 1rem 0 .5rem; border-bottom: 1px solid #f9fafb; display: flex; justify-content: center; }
.review-card .img-break img { width: 6rem; height: auto; mix-blend-mode: multiply; filter: drop-shadow(0 1px 2px rgba(0,0,0,.05)); }
.review-card .fa-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: .25rem; }

.review-card .note-box { margin-top: 1rem; padding: 1rem .75rem .75rem; border-top: 1px solid var(--gray-100); background: rgba(254,252,232,.5); border-radius: .5rem; font-size: .875rem; color: var(--gray-600); }
.review-card .note-box .highlight { color: #a16207; font-weight: 700; }
.review-card .moon-block { margin-top: auto; padding-top: 1.5rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.review-card .moon-block img { width: 10rem; height: auto; border-radius: 9999px; border: 1px solid var(--gray-200); box-shadow: 0 4px 6px rgba(0,0,0,.07); }
.review-card .moon-label { font-size: .75rem; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .1em; margin-top: .5rem; }

.review-card .divider-block { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--gray-100); }
.review-card .divider-block a { font-size: 1rem; font-weight: 500; color: var(--gray-600); }
.review-card .divider-block a:hover { color: var(--blue-600); }
.review-card a.fuchsia { color: #c026d3; }
.review-card a.fuchsia:hover { color: #a21caf; }
.review-card .photo-block { margin-top: 1rem; padding-top: 1rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.review-card .photo-block img { width: 10rem; height: auto; border-radius: .25rem; border: 2px solid var(--gray-200); box-shadow: 0 4px 6px rgba(0,0,0,.07); }
.review-card .push-img { margin-top: auto; padding-top: 1.5rem; display: flex; justify-content: center; }
.review-card .push-img img { width: 8rem; height: auto; mix-blend-mode: multiply; filter: drop-shadow(0 1px 2px rgba(0,0,0,.05)); }

.review-card .misc-link { font-size: 1rem; font-weight: 500; color: var(--gray-600); }
.review-card .misc-link:hover { color: var(--blue-600); }
.review-card .new-tag { font-size: .75rem; background: #fee2e2; color: #dc2626; padding: 0 .25rem; border-radius: .25rem; margin-left: .25rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.review-card .photo-block.full img { width: 100%; height: auto; border-radius: .25rem; border: 1px solid var(--gray-200); box-shadow: 0 1px 2px rgba(0,0,0,.05); }

.review-card .device-tag { font-size: .75rem; background: var(--gray-100); color: var(--gray-600); padding: .125rem .375rem; border-radius: .25rem; margin-left: .25rem; }
.review-card .full-img { width: 100%; height: auto; border-radius: .5rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); margin-bottom: .5rem; display: block; }
.review-card .attribution-caption { font-size: .625rem; color: #9ca3af; line-height: 1.25; text-align: center; margin-bottom: 1rem; }
.review-card .attribution-caption .cap-label { font-weight: 700; color: var(--gray-500); text-transform: uppercase; }
.review-card .attribution-caption a { color: inherit; }
.review-card .attribution-caption a:hover { text-decoration: underline; }
.review-card a.main-link.sm { font-size: 1rem; }
.review-card .device-tag.plain { text-transform: lowercase; font-weight: 400; }

.review-card .deco-img.bordered { mix-blend-mode: normal; filter: none; border: 1px solid var(--gray-200); border-radius: .25rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.review-card .fun-tag { font-size: .75rem; font-weight: 700; color: #16a34a; background: #dcfce7; padding: .125rem .375rem; border-radius: .25rem; margin-left: .25rem; text-transform: uppercase; }

.dual-video-section { margin-top: 4rem; width: 100%; max-width: 64rem; margin-left: auto; margin-right: auto; background: #111827; border-radius: 1.5rem; padding: 2rem; box-shadow: 0 20px 25px rgba(0,0,0,.15); }
.dual-video-section h3 { text-align: center; font-size: 1.5rem; font-weight: 700; color: #fff; margin: 0 0 1.5rem; }
.dual-video-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .dual-video-grid { grid-template-columns: repeat(2,1fr); } }
.dual-video-item { display: flex; flex-direction: column; align-items: center; }
.dual-video-item .video-container { width: 100%; box-shadow: 0 25px 50px rgba(0,0,0,.25); border: 4px solid #1f2937; margin-bottom: 1rem; }
.dual-video-item p { font-size: 1rem; font-weight: 600; color: #d1d5db; text-align: center; margin: 0; }
.dual-video-footer { text-align: center; padding-top: 1rem; border-top: 1px solid #1f2937; }
.dual-video-footer a { font-size: 1.125rem; font-weight: 600; color: #60a5fa; transition: color .2s; }
.dual-video-footer a:hover { color: #fff; }

.review-card h4.md { font-size: .875rem; }
.review-card .indent-link { font-size: 1rem; font-weight: 500; color: var(--gray-500); margin-left: .5rem; }
.review-card .indent-link:hover { color: var(--blue-600); }
.review-card .xray-block { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--gray-100); display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.review-card .xray-block img { width: 6rem; height: auto; border-radius: .25rem; border: 1px solid var(--gray-200); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.review-card .xray-block .caption { font-size: .75rem; color: #9ca3af; text-align: center; line-height: 1.25; font-weight: 500; }

.standalone-purple-wrap { display: flex; justify-content: center; margin: 3rem 0 1rem; }
.standalone-purple-wrap .resource-card { max-width: 28rem; width: 100%; }

.vdl-header { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 2.5rem; text-align: center; }
.vdl-header i { font-size: 2.25rem; color: #ef4444; margin-bottom: .5rem; }
.vdl-header h2 { font-size: 1.875rem; font-weight: 800; color: var(--gray-800); letter-spacing: -0.025em; margin: 0; }
.vdl-header p { color: var(--gray-500); margin-top: .5rem; max-width: 42rem; font-size: 1.125rem; }

.vdl-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .vdl-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .vdl-grid { grid-template-columns: repeat(4,1fr); } }

.vdl-card { background: var(--gray-50); border-radius: .75rem; padding: 1.25rem; border: 1px solid var(--gray-200); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.vdl-card h4 { font-weight: 700; color: #1e3a8a; border-bottom: 1px solid #d1d5db; padding-bottom: .5rem; margin: 0 0 .75rem; font-size: 1.125rem; }
.vdl-card h4 i { margin-right: .5rem; color: var(--blue-600); }
.vdl-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; font-size: 1rem; }
.vdl-card ul li.divider-item { border-top: 1px solid var(--gray-200); padding-top: .75rem; margin-top: 0; }
.vdl-card ul li.img-item { padding-top: 1rem; }
.vdl-card a { color: var(--gray-700); font-weight: 500; transition: color .2s; }
.vdl-card a:hover { color: var(--blue-600); }
.vdl-card a.sub-note { color: var(--gray-500); font-size: .875rem; font-weight: 400; }
.vdl-card .cap-block { margin-top: 1rem; text-align: center; }
.vdl-card .cap-block img { width: 8rem; margin: 0 auto; display: block; border-radius: .25rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); border: 1px solid var(--gray-200); }
.vdl-card .cap-block p { font-size: .75rem; color: var(--gray-500); margin-top: .5rem; line-height: 1.25; font-weight: 500; }
.vdl-card .cap-img { width: 8rem; margin: 0 auto; display: block; mix-blend-mode: multiply; opacity: .8; }

.vdl-grid.cols3 { grid-template-columns: 1fr; max-width: 72rem; margin-left: auto; margin-right: auto; }
@media (min-width: 768px) { .vdl-grid.cols3 { grid-template-columns: repeat(3,1fr); } }
.vdl-card a.block-link { display: block; }
.vdl-card a.block-link:hover { opacity: .8; }

.review-card .inline-quiz { margin-top: auto; padding-top: 1.5rem; border-top: 1px solid var(--gray-100); }
.review-card .inline-quiz .resource-card.purple { padding: 1rem; transition: background-color .2s; }
.review-card .inline-quiz .resource-card.purple:hover { background: #f3e8ff; }

.dual-media-section { margin-top: 4rem; width: 100%; max-width: 64rem; margin-left: auto; margin-right: auto; background: #111827; border-radius: 1.5rem; padding: 2rem; box-shadow: 0 20px 25px rgba(0,0,0,.15); }
.dual-media-section h3 { text-align: center; font-size: 1.5rem; font-weight: 700; color: #fff; margin: 0 0 1.5rem; }
.presentation-container { position: relative; padding-bottom: 60%; height: 0; overflow: hidden; border-radius: .75rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); background: #000; margin-bottom: 2rem; border: 4px solid #1f2937; }
.presentation-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.dual-media-section .video-container { margin-bottom: 1.5rem; border: 4px solid #1f2937; }
.dual-media-section .footer-link { text-align: center; padding-top: 1rem; border-top: 1px solid #1f2937; }
.dual-media-section .footer-link a { font-size: 1.25rem; font-weight: 600; color: #60a5fa; transition: color .2s; }
.dual-media-section .footer-link a:hover { color: #fff; }

.review-card .video-badge { font-size: .75rem; background: var(--gray-100); padding: .125rem .375rem; border-radius: .25rem; margin-left: .25rem; font-weight: 400; }
.review-card .video-badge a { color: var(--gray-600); }
.review-card .video-badge a:hover { text-decoration: underline; }
.review-card .full-photo-block { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--gray-100); display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.review-card .full-photo-block img { width: 100%; height: auto; border-radius: .25rem; border: 1px solid var(--gray-200); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.review-card .full-photo-block .caption { font-size: .75rem; color: #9ca3af; text-align: center; line-height: 1.25; font-weight: 500; }

.stacked-video-section { margin-top: 4rem; width: 100%; max-width: 64rem; margin-left: auto; margin-right: auto; background: #111827; border-radius: 1.5rem; padding: 2rem; box-shadow: 0 20px 25px rgba(0,0,0,.15); }
.stacked-video-section h3 { text-align: center; font-size: 1.5rem; font-weight: 700; color: #fff; margin: 0 0 1.5rem; }
.stacked-video-list { display: flex; flex-direction: column; gap: 3rem; margin-bottom: 1.5rem; max-width: 48rem; margin-left: auto; margin-right: auto; }
.stacked-video-item { display: flex; flex-direction: column; align-items: center; }
.stacked-video-item .video-container { width: 100%; box-shadow: 0 25px 50px rgba(0,0,0,.25); border: 4px solid #1f2937; margin-bottom: 1rem; }
.stacked-video-item a { font-size: 1.125rem; font-weight: 600; color: #d1d5db; text-align: center; transition: color .2s; }
.stacked-video-item a:hover { color: #fff; }
.stacked-video-cta { text-align: center; padding-top: 1.5rem; border-top: 1px solid #1f2937; margin-top: 1rem; display: flex; flex-direction: column; align-items: center; }
.stacked-video-cta p { color: #9ca3af; margin-bottom: .5rem; }
.stacked-video-cta .cta-btn { display: inline-block; background: #dc2626; color: #fff; font-weight: 700; padding: .5rem 1.5rem; border-radius: 9999px; transition: all .2s; box-shadow: 0 4px 6px rgba(0,0,0,.07); }
.stacked-video-cta .cta-btn:hover { background: #b91c1c; transform: translateY(-2px); }

.cw-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 4rem; }
@media (min-width: 768px) { .cw-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .cw-grid { grid-template-columns: repeat(3,1fr); } }

.cw-card-media { display: flex; justify-content: center; gap: 2rem; margin-bottom: 1.5rem; margin-top: .5rem; flex-wrap: wrap; }
.cw-card-media img { height: 10rem; width: auto; object-fit: contain; mix-blend-mode: multiply; filter: drop-shadow(0 1px 2px rgba(0,0,0,.05)); transition: transform .3s; }
.cw-card-media img:hover { transform: scale(1.1); }

.cw-item { display: flex; flex-direction: column; border-bottom: 1px solid #f9fafb; padding-bottom: .75rem; }
.cw-item:last-child { border-bottom: none; padding-bottom: 0; }
.cw-item .sub-row { display: flex; justify-content: space-between; align-items: center; margin-top: .25rem; font-size: .875rem; color: var(--gray-500); }
.cw-item .sub-row a, .cw-item .link-row a { color: var(--brand-blue); font-weight: 700; }
.cw-item .sub-row a:hover, .cw-item .link-row a:hover { text-decoration: underline; }
.cw-item .link-row { display: flex; gap: 1rem; align-items: center; margin-top: .25rem; font-size: .875rem; }

.single-video-box { margin-top: 4rem; text-align: center; width: 100%; max-width: 56rem; margin-left: auto; margin-right: auto; background: #111827; border-radius: 1.5rem; padding: 2rem; box-shadow: 0 20px 25px rgba(0,0,0,.15); }
.single-video-box .video-container { margin-bottom: 1.5rem; box-shadow: 0 25px 50px rgba(0,0,0,.25); border: 4px solid #1f2937; }
.single-video-box a { font-size: 1.125rem; font-weight: 600; color: #d1d5db; transition: color .2s; }
.single-video-box a:hover { color: #fff; }