@font-face {
  font-family: "Kalam";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/kalam/kalam-regular-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Kalam";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/kalam/kalam-regular-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Kalam";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./assets/fonts/kalam/kalam-bold-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Kalam";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./assets/fonts/kalam/kalam-bold-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --navy: #132b4d;
  --navy-deep: #081e3b;
  --navy-soft: #1c416c;
  --burgundy: #8b1e2d;
  --burgundy-dark: #6e1421;
  --gold: #c49a6c;
  --ivory: #f7f3ec;
  --paper: #fffdf9;
  --white: #fff;
  --ink: #1e1e1e;
  --muted: #667085;
  --line: #e4ddd3;
  --success: #16634a;
  --danger: #9b1c31;
  --shadow: 0 16px 46px rgba(19, 43, 77, .09);
  --radius-sm: 8px;
  --radius-md: 13px;
  --radius-lg: 20px;
  --container: 1180px;
  --header-height: 82px;
  --serif: "Iowan Old Style", "Baskerville", "Times New Roman", Georgia, serif;
  --sans: Montserrat, Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --handwritten: "Kalam", "Noteworthy", "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 16px); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); line-height: 1.65; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #e0ad5e; outline-offset: 3px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--navy); font-family: var(--serif); line-height: 1.08; }
h1 { font-size: clamp(2.7rem, 7vw, 5.4rem); letter-spacing: -.045em; }
h2 { font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: -.03em; }
h3 { font-size: 1.6rem; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 1000; padding: 10px 16px; background: var(--white); color: var(--navy); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.eyebrow { display: inline-block; color: var(--burgundy); font-size: .76rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow.light { color: #f2d4ae; }
.eyebrow.gold { color: var(--gold); }
.section { width: min(var(--container), calc(100% - 40px)); margin: 0 auto; padding: 84px 0; }
.section-lead { max-width: 740px; color: var(--muted); font-size: 1.08rem; }
.section-heading { max-width: 720px; }

.brand-masthead { width: min(1520px, calc(100% - 20px)); margin: 10px auto 0; overflow: hidden; border: 1px solid rgba(19,43,77,.35); border-bottom: 0; border-radius: 18px 18px 0 0; background: var(--white); box-shadow: 0 9px 28px rgba(19,43,77,.08); }
.brand-cover { position: relative; height: clamp(260px, 24vw, 360px); overflow: hidden; }
.brand-cover-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.brand-cover-logo { display: none; }
.is-inner-masthead .brand-cover-logo { position: absolute; z-index: 2; top: 50%; left: clamp(18px, 2.2vw, 34px); width: clamp(248px, 19vw, 288px); height: auto; display: block; filter: drop-shadow(0 16px 26px rgba(5,31,65,.34)); transform: translateY(-50%); }
.cover-identity { position: absolute; z-index: 1; top: 44%; left: 51%; width: min(660px, 58%); display: grid; justify-items: center; color: var(--navy); text-align: center; transform: translate(-50%, -50%); }
.cover-identity > strong { color: var(--navy); font: clamp(2.15rem, 4.4vw, 4.7rem)/1 var(--serif); font-weight: 500; letter-spacing: .15em; text-transform: uppercase; white-space: nowrap; }
.cover-identity > strong em { color: var(--burgundy); font-style: normal; }
.cover-identity > small { color: var(--navy); font-size: clamp(.7rem, 1.25vw, 1rem); font-weight: 750; letter-spacing: .32em; text-transform: uppercase; }
.cover-divider { width: min(410px, 72%); margin: 14px 0 12px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; color: var(--burgundy); }
.cover-divider i { height: 2px; background: var(--burgundy); }
.cover-divider b { font-size: 1.3rem; font-weight: 500; }
.site-header { position: sticky; top: 0; z-index: 100; color: var(--navy); background: rgba(255,255,255,.97); border-bottom: 1px solid rgba(19,43,77,.14); box-shadow: 0 5px 18px rgba(19,43,77,.06); backdrop-filter: blur(12px); }
.public-site-header { width: min(1520px, calc(100% - 20px)); margin: 0 auto; border-right: 1px solid rgba(19,43,77,.35); border-left: 1px solid rgba(19,43,77,.35); box-shadow: 0 9px 28px rgba(19,43,77,.08); transition: width .22s ease, box-shadow .22s ease; }
.public-site-header:not(.is-condensed) .header-inner { justify-content: flex-end; }
.public-site-header:not(.is-condensed) .brand { width: 0; max-width: 0; overflow: hidden; opacity: 0; pointer-events: none; transform: translateY(-8px); }
.public-site-header.is-condensed { width: 100%; border-right: 0; border-left: 0; box-shadow: 0 7px 22px rgba(19,43,77,.12); }
.public-site-header.is-condensed .brand { width: auto; max-width: 310px; opacity: 1; transform: translateY(0); }
.header-inner { width: min(1280px, calc(100% - 32px)); min-height: var(--header-height); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; transition: max-width .22s ease, opacity .18s ease, transform .22s ease; }
.brand img { width: 62px; height: 62px; object-fit: contain; filter: drop-shadow(0 5px 9px rgba(19,43,77,.18)); }
.brand-wordmark { font-family: var(--serif); color: var(--white); font-size: 1.3rem; letter-spacing: .045em; white-space: nowrap; }
.brand-wordmark strong { color: #d05a68; font-weight: 600; }
.site-header .brand-wordmark { color: var(--navy); }
.main-nav { display: flex; align-items: center; gap: 5px; }
.nav-link { position: relative; padding: 12px 9px; font-size: .79rem; font-weight: 700; color: #3d4654; }
.nav-link::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 5px; height: 2px; background: var(--burgundy); transform: scaleX(0); transition: transform .18s ease; }
.nav-link:hover, .nav-link.is-active { color: var(--navy); }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }
.nav-search { padding: 8px; color: var(--navy); font-size: 1.4rem; }
.nav-actions, .button-row, .table-actions { display: flex; align-items: center; gap: 10px; }
.nav-logout { display: flex; align-items: center; gap: 8px; }
.site-header .button-ghost { color: var(--navy); border-color: rgba(19,43,77,.45); }
.site-header .button-ghost:hover { color: var(--white); border-color: var(--navy); background: var(--navy); }
.menu-toggle { display: none; width: 46px; height: 42px; border: 0; color: var(--navy); background: transparent; }
.menu-toggle span:not(.sr-only) { display: block; width: 25px; height: 2px; margin: 5px auto; background: currentColor; }

.button { display: inline-flex; min-height: 46px; padding: 11px 20px; align-items: center; justify-content: center; border: 1px solid var(--burgundy); border-radius: var(--radius-sm); color: var(--white); background: var(--burgundy); font-size: .82rem; font-weight: 800; letter-spacing: .035em; cursor: pointer; transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
.button:hover { background: var(--burgundy-dark); transform: translateY(-2px); box-shadow: 0 10px 25px rgba(139,30,45,.2); }
.button-small { min-height: 38px; padding: 8px 14px; font-size: .72rem; }
.button-outline { color: var(--navy); border-color: var(--navy); background: transparent; }
.button-outline:hover { color: var(--white); background: var(--navy); box-shadow: none; }
.button-ghost { min-height: 38px; padding: 8px 13px; border-color: rgba(255,255,255,.5); background: transparent; }
.button-ghost:hover { border-color: var(--white); background: rgba(255,255,255,.08); box-shadow: none; }
.button-ghost-light { color: var(--white); border-color: rgba(255,255,255,.62); background: transparent; }
.button-light { color: var(--navy); border-color: var(--white); background: var(--white); }
.button-light:hover { color: var(--white); border-color: var(--burgundy); background: var(--burgundy); }
.button-full { width: 100%; }
.text-link, .text-button { color: var(--burgundy); font-weight: 750; }
.text-button { padding: 5px 0; border: 0; background: transparent; cursor: pointer; }
.text-button-danger { color: var(--danger); }
.text-button-danger:hover { color: var(--burgundy-dark); text-decoration: underline; }
.table-actions { flex-wrap: wrap; }

.floating-signup { --magnet-x: 0px; --magnet-y: 0px; --drift-x: 0px; --lift-y: -3px; --button-scale: 1; --button-rotate: 0deg; --floor-shadow-opacity: .26; --floor-shadow-scale: .9; position: fixed; right: 24px; bottom: 24px; z-index: 190; min-height: 54px; padding: 15px 25px; display: inline-flex; align-items: center; justify-content: center; isolation: isolate; color: var(--white); border: 1px solid rgba(255,255,255,.25); border-radius: 14px; background: var(--burgundy); box-shadow: 0 8px 18px rgba(116,22,36,.22), inset 0 1px 0 rgba(255,255,255,.13); font-size: .92rem; font-weight: 850; letter-spacing: .01em; transform: translate3d(calc(var(--magnet-x) + var(--drift-x)), calc(var(--magnet-y) + var(--lift-y)), 0) rotate(var(--button-rotate)) scale(var(--button-scale)); transform-origin: center; will-change: transform; transition: color .18s ease, background .18s ease; }
.floating-signup::before { content: ""; position: absolute; z-index: -1; right: 10%; bottom: -18px; left: 10%; height: 17px; border-radius: 50%; background: rgba(28,24,30,.7); filter: blur(9px); opacity: var(--floor-shadow-opacity); transform: scaleX(var(--floor-shadow-scale)); transform-origin: center; will-change: opacity, transform; pointer-events: none; }
.floating-signup:hover { color: var(--white); background: #851c2c; }
.floating-signup:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

.flash { position: fixed; z-index: 200; top: calc(var(--header-height) + 12px); left: 50%; width: min(520px, calc(100% - 32px)); padding: 13px 18px; border-radius: 10px; color: var(--white); background: var(--navy); box-shadow: var(--shadow); transform: translateX(-50%); }
.flash-success { background: var(--success); }

.hero { position: relative; min-height: 620px; overflow: hidden; display: grid; grid-template-columns: minmax(320px, 1fr) minmax(280px, .78fr); align-items: center; gap: 70px; padding: 80px max(6vw, calc((100vw - var(--container))/2)); color: var(--white); background: radial-gradient(circle at 72% 48%, rgba(38,81,126,.58), transparent 31%), linear-gradient(115deg, var(--navy-deep), #113b68 67%, #0b294c); }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .09; background-image: linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to right, transparent 12%, black 60%, transparent); }
.math-stream-canvas { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .8s ease; }
.math-stream-canvas.is-active { opacity: 1; }
.math-stream-canvas.is-active + .hero-math { opacity: 0; }
.hero-copy { position: relative; z-index: 2; max-width: 690px; }
.hero h1 { margin: 10px 0 23px; color: var(--white); }
.hero h1 em { color: #f8e9d7; font-weight: 400; }
.hero-copy p { max-width: 570px; color: rgba(255,255,255,.82); font-size: 1.18rem; }
.hero-copy p strong { color: var(--white); }
.hero-mark { position: relative; z-index: 2; display: grid; place-items: center; }
.hero-mark img { width: min(430px, 35vw); filter: drop-shadow(0 24px 35px rgba(0,0,0,.28)); animation: floatMark 6s ease-in-out infinite; }
.hero-math { position: absolute; z-index: 1; inset: 0; pointer-events: none; color: var(--gold); font: italic 1.2rem var(--serif); opacity: .35; transition: opacity .4s ease; }
.hero-math span { position: absolute; }
.hero-math span:nth-child(1) { top: 16%; right: 10%; }
.hero-math span:nth-child(2) { top: 29%; right: 30%; }
.hero-math span:nth-child(3) { bottom: 18%; left: 42%; }
.hero-line { position: absolute; right: -5%; bottom: -120px; width: 60%; height: 250px; border: 2px solid rgba(196,154,108,.24); border-radius: 50%; transform: rotate(-8deg); }
@keyframes floatMark { 50% { transform: translateY(-8px); } }

.quick-strip { position: relative; z-index: 5; width: min(1240px, calc(100% - 32px)); margin: -42px auto 0; display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid #e6e8ec; border-radius: 16px; background: var(--white); box-shadow: var(--shadow); }
.quick-link { min-height: 112px; padding: 23px 18px; display: flex; align-items: center; gap: 13px; border-right: 1px solid #e7e9ed; }
.quick-link:last-child { border-right: 0; }
.quick-link:hover { background: var(--ivory); }
.line-icon { width: 33px; height: 33px; object-fit: contain; }
.quick-link strong, .quick-link small { display: block; }
.quick-link strong { color: var(--navy); font-size: .84rem; text-transform: uppercase; }
.quick-link small { color: var(--muted); font-size: .72rem; line-height: 1.4; }

.intro-section { display: flex; align-items: end; justify-content: space-between; gap: 40px; padding-bottom: 25px; }
.intro-section h2 { margin: 8px 0 14px; }
.math-sketch { color: var(--gold); font: 2.2rem var(--serif); letter-spacing: .3em; opacity: .65; }
.course-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-top: 20px; }
.course-card, .info-card, .feature-card, .article-card, .task-card, .formula-card, .portal-card, .form-card { border: 1px solid #e5e1da; border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow); }
.course-card { position: relative; min-height: 470px; padding: 29px; display: flex; flex-direction: column; }
.course-card h3 { margin: 10px 0 4px; }
.course-card p { color: var(--muted); }
.course-card .course-subtitle { color: var(--navy); font-weight: 750; }
.course-card .button { margin-top: auto; }
.course-card-featured { color: var(--white); border-color: var(--burgundy); background: linear-gradient(150deg, #9b2233, #761724); transform: translateY(-8px); }
.course-card-featured h3, .course-card-featured p, .course-card-featured .course-subtitle { color: var(--white); }
.course-card-signup h3 { margin: 26px 0 22px; font-size: clamp(1.9rem, 2.35vw, 2.55rem); line-height: 1.08; }
.course-card-signup p { font-size: 1.02rem; }
.course-location { display: block; font-size: clamp(.98rem, 1.2vw, 1.14rem); line-height: 1.35; letter-spacing: .11em; }
.signup-date strong { margin-bottom: 4px; display: block; color: var(--white); text-wrap: balance; }
.signup-countdown { padding: 16px; margin: 2px 0 22px; border: 1px solid rgba(226,180,124,.35); border-radius: 13px; background: rgba(4,25,52,.2); }
.countdown-status { display: block; margin-bottom: 11px; color: var(--white); font-size: .76rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.countdown-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.countdown-grid > span { min-width: 0; padding: 9px 3px 7px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.1); }
.countdown-grid strong { color: var(--white); font: 1.45rem var(--serif); line-height: 1; }
.countdown-grid small { margin-top: 5px; color: #e3bc86; font-size: .62rem; font-weight: 800; text-transform: uppercase; }
.signup-countdown.is-open .countdown-grid { display: none; }
.signup-countdown.is-open .countdown-status { margin: 0; color: #f0c995; font-size: .94rem; }
.check-list { padding: 0; margin: 7px 0 26px; list-style: none; font-size: .86rem; }
.check-list li { margin: 8px 0; }
.check-list li::before { content: "✓"; margin-right: 8px; color: var(--gold); font-weight: 900; }

.navy-section { width: 100%; padding: 88px max(6vw, calc((100vw - var(--container))/2)); color: var(--white); background: var(--navy-deep); }
.navy-section h2 { color: var(--white); }
.navy-section p { color: rgba(255,255,255,.72); }
.steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; padding: 45px 0 0; margin: 0; list-style: none; }
.steps li { position: relative; padding: 0 22px; text-align: center; }
.steps li:not(:last-child)::after { content: ""; position: absolute; top: 21px; right: -12%; width: 24%; height: 1px; background: var(--gold); }
.steps span { width: 44px; height: 44px; margin: 0 auto 14px; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); font-family: var(--serif); font-size: 1.25rem; }
.steps strong { display: block; color: var(--white); font-size: .83rem; }

.split-feature { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 70px; }
.practice-card { position: relative; min-height: 330px; padding: 50px; overflow: hidden; color: var(--white); border-radius: 24px; background: var(--navy); }
.practice-card .practice-formula { position: absolute; right: 20px; bottom: -65px; color: rgba(255,255,255,.08); font: 15rem var(--serif); }
.practice-card strong { position: relative; display: block; margin-bottom: 12px; font: 2rem var(--serif); }
.practice-card p, .practice-card a { position: relative; }
.practice-card a { color: #f0c995; font-weight: 750; }
.two-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 10px; }
.feature-card { padding: 46px; }
.challenge-card { color: var(--white); border-color: var(--burgundy); background: var(--burgundy); }
.challenge-card h2, .challenge-card p { color: var(--white); }
.sos-section { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 30px; margin-bottom: 80px; padding: 42px; border: 1px solid rgba(139,30,45,.22); border-radius: 22px; background: #fff8f5; }
.sos-icon { width: 74px; height: 74px; display: grid; place-items: center; border-radius: 50%; background: var(--white); box-shadow: var(--shadow); }
.sos-icon .line-icon { width: 42px; height: 42px; }
.sos-brand-wheel { width: 112px; height: 112px; background: transparent; box-shadow: none; }
.sos-logo { width: 112px; height: 112px; object-fit: contain; filter: drop-shadow(0 9px 15px rgba(18,36,63,.17)); }
.sos-class8-badge { width: 132px; height: 134px; }
.sos-class8-logo { width: 132px; height: auto; }
.sos-class8-section { column-gap: 14px; }
.sos-section h2 { margin: 5px 0 8px; }
.sos-section p { margin: 0; color: var(--muted); }
.final-cta { width: min(var(--container), calc(100% - 40px)); margin-top: 80px; margin-bottom: 80px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 30px; padding: 44px; color: var(--white); border-radius: 24px; background: linear-gradient(120deg, var(--navy), #1b4775); }
.final-cta img { object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0,0,0,.2)); }
.final-cta h2, .final-cta p { color: var(--white); margin-bottom: 8px; }

.page-hero { position: relative; min-height: 360px; padding: 90px max(6vw, calc((100vw - var(--container))/2)); overflow: hidden; color: var(--white); background: linear-gradient(125deg, var(--navy-deep), var(--navy-soft)); }
.page-hero::after { content: "x² + y² = r²   ∆   π   √2"; position: absolute; right: 6%; bottom: 10%; color: rgba(196,154,108,.28); font: 2.4rem var(--serif); letter-spacing: .2em; }
.page-hero.has-math-stream { background: radial-gradient(ellipse at 78% 42%, rgba(39,84,129,.4), transparent 38%), linear-gradient(125deg, var(--navy-deep), var(--navy-soft)); }
.page-hero.has-math-stream::after { content: ""; z-index: 0; inset: 0; opacity: .1; background-image: linear-gradient(rgba(255,255,255,.34) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.34) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(to right, transparent 8%, black 45%, transparent 97%); pointer-events: none; }
.page-hero.has-math-stream > :not(.math-stream-canvas) { position: relative; z-index: 2; }
.page-hero h1 { max-width: 850px; margin: 10px 0 16px; color: var(--white); }
.page-hero p { position: relative; z-index: 1; max-width: 720px; color: rgba(255,255,255,.78); font-size: 1.1rem; }
.page-hero.compact { min-height: 270px; padding-top: 70px; padding-bottom: 60px; }
.page-hero .course-promo-lead { max-width: 850px; font-size: clamp(1.06rem, 1.25vw, 1.18rem); line-height: 1.8; }
.course-promo-copy .course-promo-lead { margin: 0 0 12px; }
.course-promo-copy .course-promo-lead strong { color: var(--white); }
.course-promo-benefits { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 24px 0 26px; list-style: none; }
.course-promo-benefits li { padding: 9px 13px; border: 1px solid rgba(228,189,143,.34); border-radius: 999px; color: var(--white); background: rgba(10,29,54,.35); font-size: .82rem; font-weight: 700; }
.course-promo-benefits li::before { content: "✓"; margin-right: 7px; color: var(--gold); font-weight: 900; }
.course-promo-actions .button { min-height: 49px; padding-right: 24px; padding-left: 24px; }
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.info-card { padding: 32px; }
.info-card h2 { margin-top: 12px; font-size: 1.7rem; }
.formula-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--burgundy); background: #fbe9e9; font-weight: 900; }
.filter-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.filter { padding: 9px 16px; border: 1px solid #d5d9e1; border-radius: 999px; color: var(--navy); background: var(--white); cursor: pointer; }
.filter.is-active { color: var(--white); border-color: var(--navy); background: var(--navy); }
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.article-card { padding: 34px; }
.article-card[hidden] { display: none; }
.article-card h2 { margin: 9px 0 13px; font-size: 1.8rem; }
.article-lead { color: var(--navy); font-weight: 700; }
.task-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.task-card { padding: 34px; }
.task-meta { display: flex; gap: 8px; margin-bottom: 12px; }
.task-meta span, .status-pill { padding: 5px 10px; border-radius: 999px; color: var(--navy); background: var(--ivory); font-size: .72rem; font-weight: 800; }
details { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 18px; }
summary { color: var(--burgundy); font-weight: 750; cursor: pointer; }
.quiz-section { margin-bottom: 80px; border-radius: 24px; background: var(--ivory); }
.quiz-form { display: grid; gap: 22px; }
.quiz-form fieldset { padding: 25px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.quiz-form legend { padding: 0 8px; color: var(--navy); font-family: var(--serif); font-size: 1.3rem; font-weight: 700; }
.quiz-option { display: block; margin: 8px 0; cursor: pointer; }
.quiz-option input { margin-right: 9px; accent-color: var(--burgundy); }
.result-panel { max-width: 850px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 50px; }
.score-ring { --score: 0; width: 190px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--burgundy) calc(var(--score) * 1%), #eadfd8 0); }
.score-ring::before { content: ""; position: absolute; width: 142px; aspect-ratio: 1; border-radius: 50%; background: var(--white); }
.score-ring strong { position: relative; z-index: 1; color: var(--navy); font: 2.2rem var(--serif); }
.search-field { max-width: 600px; display: grid; gap: 8px; color: var(--navy); font-weight: 750; }
.search-field input, .hero-search input { width: 100%; padding: 14px 16px; border: 1px solid #cfd5df; border-radius: 9px; background: var(--white); }
.formula-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 30px; }
.formula-card { min-width: 0; padding: 32px; }
.formula-card.is-interactive { grid-column: 1 / -1; }
.formula-card[hidden] { display: none; }
.formula-card h2 { margin: 8px 0 16px; font-size: 1.55rem; }
.formula-mode, .notebook-caption { display: block; margin-bottom: 7px; color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.formula { padding: 18px; margin-bottom: 18px; border-left: 3px solid var(--gold); color: var(--navy); background: var(--ivory); font: 1.25rem var(--serif); }
.notebook-panel, .calculator-result, .geometry-sketch { position: relative; overflow: hidden; border: 1px solid #ddd6c7; border-radius: 9px; background-color: #fffef8; background-image: linear-gradient(to right, transparent 43px, rgba(190,74,74,.25) 43px, rgba(190,74,74,.25) 45px, transparent 45px), repeating-linear-gradient(to right, transparent 0, transparent 31px, rgba(78,139,190,.17) 31px, rgba(78,139,190,.17) 32px), repeating-linear-gradient(to bottom, transparent 0, transparent 31px, rgba(78,139,190,.17) 31px, rgba(78,139,190,.17) 32px); box-shadow: 0 8px 18px rgba(38,48,64,.07); }
.notebook-panel { min-height: 145px; padding: 20px 22px 22px 64px; transform: rotate(-.15deg); }
.notebook-caption { position: relative; z-index: 1; color: #7b6551; font-family: var(--handwritten); font-size: 1.02rem; font-weight: 700; letter-spacing: .025em; text-transform: none; }
.notebook-formula, .notebook-calculation { position: relative; z-index: 1; color: #173961; font-family: var(--handwritten); font-size: clamp(1.75rem, 3.2vw, 2.35rem); font-weight: 700; letter-spacing: .012em; line-height: 1.48; font-variant-numeric: lining-nums; }
.notebook-formula sup, .notebook-calculation sup { font-size: .62em; vertical-align: .65em; }
.notebook-formula sub, .notebook-calculation sub { font-size: .62em; vertical-align: -.2em; }
.notebook-fraction { min-width: 2.4em; display: inline-grid; grid-template-rows: auto auto; align-items: center; margin: 0 .14em; vertical-align: middle; text-align: center; line-height: 1.12; }
.notebook-fraction > span:first-child { padding: 0 .2em .08em; border-bottom: 2px solid currentColor; }
.notebook-fraction > span:last-child { padding-top: .08em; }
.notebook-dot { display: inline-block; margin: 0 .08em; }
.notebook-overline { display: inline-block; text-decoration: overline; }
.geometry-sketch { padding: 22px 24px 18px 64px; margin: 22px 0 0; transform: rotate(.12deg); }
.geometry-sketch figcaption strong { display: block; color: var(--navy); font: 700 clamp(1.35rem, 2.2vw, 1.6rem)/1.35 var(--handwritten); }
.geometry-sketch canvas { width: min(100%, 700px); height: auto; margin: 5px auto 0; display: block; }
.diagram-interactive-stage { position: relative; width: min(100%, 700px); margin: 5px auto 0; }
.diagram-interactive-stage canvas { width: 100%; margin: 0; }
.diagram-hand-field { position: absolute; z-index: 2; left: var(--diagram-x, 52%); top: var(--diagram-y, 50%); display: flex; align-items: center; gap: .11em; min-height: 39px; transform: translate(-50%, -50%); font-family: var(--handwritten); font-size: clamp(1.08rem, 2.3vw, 1.8rem); font-weight: 700; line-height: 1.15; white-space: nowrap; cursor: text; }
.diagram-hand-field-a { color: #9b2233; }
.diagram-hand-field-b { color: #173961; }
.diagram-hand-field-h { color: #c18a49; transform: translate(0, -50%); }
.diagram-hand-field-r { color: #173961; transform: translate(0, -50%); }
.diagram-hand-field-d { color: #c18a49; }
.diagram-hand-field-prism-area { color: #9b2233; }
.diagram-hand-field-prism-height { color: #c18a49; transform: translate(0, -50%); }
.diagram-hand-field input { width: calc(var(--diagram-digits, 2ch) + .55em); min-width: 1.95em; max-width: 5.8em; min-height: 37px; padding: .06em .12em .02em; border: 0; border-bottom: 2px dashed currentColor; border-radius: 4px 4px 0 0; outline: none; color: inherit; background: rgba(255,254,248,.78); font: inherit; text-align: center; transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease; }
.diagram-hand-field input:hover { background: rgba(255,254,248,.98); }
.diagram-hand-field input:focus { border-bottom-style: solid; background: #fffef8; box-shadow: 0 0 0 3px rgba(193,138,73,.18); }
.circumference-stage { width: min(100%, 560px); }
.circumference-sketch canvas { width: min(100%, 560px); }
.circumference-stage canvas.is-resize-ready { cursor: grab; }
.circumference-stage.is-dragging canvas, .circumference-stage.is-dragging .circle-resize-handle { cursor: grabbing; }
.circle-resize-handle { position: absolute; z-index: 3; left: var(--diagram-x, 70%); top: var(--diagram-y, 53%); width: 35px; height: 35px; display: grid; place-items: center; padding: 0; border: 2px solid #9b2233; border-radius: 50%; color: #9b2233; background: #fffef8; box-shadow: 0 4px 11px rgba(35,42,56,.17); transform: translate(-50%, -50%); font: 700 1.25rem/1 var(--handwritten); cursor: grab; touch-action: none; transition: box-shadow .18s ease, background-color .18s ease; }
.circle-resize-handle:hover { background: #fff; box-shadow: 0 5px 15px rgba(35,42,56,.24); }
.circle-resize-handle:focus-visible { outline: 3px solid rgba(193,138,73,.55); outline-offset: 3px; }
.prism-sketch canvas { cursor: grab; touch-action: none; contain: paint; }
.prism-sketch canvas:active { cursor: grabbing; }
.prism-sketch canvas:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.prism-controls { margin: 4px 0 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.prism-controls [data-prism-status] { color: #526378; font-size: .8rem; font-weight: 650; }
.diagram-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; color: #334c69; font-family: var(--handwritten); font-size: 1.18rem; line-height: 1.5; }
.diagram-legend b { color: var(--burgundy); font-size: 1.28rem; }
.geometry-sketch > p { margin: 8px 0 0; color: #526378; font-family: var(--handwritten); font-size: 1.14rem; line-height: 1.5; }
.geometry-sketch > p strong { color: var(--burgundy); }
.trapezoid-sketch [data-trapezoid-description] { padding: 8px 11px; border-left: 3px solid transparent; transition: color .18s ease, border-color .18s ease, background .18s ease; }
.trapezoid-sketch [data-trapezoid-description].is-special-shape { color: var(--navy); border-left-color: var(--gold); background: rgba(193,138,73,.1); font-weight: 750; }
.formula-example { margin: 20px 0 0; color: var(--muted); }
.formula-example strong { color: var(--navy); }
.formula-calculator { margin-top: 30px; padding-top: 28px; display: grid; grid-template-columns: minmax(220px, .75fr) minmax(360px, 1.25fr); gap: 20px 34px; border-top: 1px solid var(--line); }
.formula-calculator.has-diagram-inputs { grid-template-columns: 1fr; gap: 13px; }
.formula-calculator.has-diagram-inputs .calculator-form { display: none; }
.formula-calculator.has-diagram-inputs > small { grid-column: 1; margin-top: -4px; }
.calculator-intro h3 { margin: 6px 0 8px; }
.calculator-intro p { margin-bottom: 0; color: var(--muted); }
.calculator-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); align-items: end; gap: 12px; }
.calculator-form label { display: grid; gap: 6px; color: var(--navy); font-size: .8rem; font-weight: 800; }
.calculator-form input { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #b8c0cb; border-radius: 8px; color: var(--ink); background: var(--white); font-size: 1rem; }
.calculator-form input:focus { border-color: var(--navy); outline: 3px solid rgba(224,173,94,.35); }
.formula-calculator > small { grid-column: 2; margin-top: -12px; color: var(--muted); }
.calculator-result { grid-column: 1 / -1; min-height: 155px; padding: 23px 24px 22px 64px; }
.calculator-result .notebook-caption { margin-bottom: 3px; }
.calculator-result p { position: relative; z-index: 1; margin: 9px 0 0; color: #526378; font-family: var(--handwritten); font-size: 1.17rem; line-height: 1.5; }
.notebook-calculation strong { color: var(--burgundy); }
.notebook-calculation.is-error { color: var(--burgundy); font-size: 1.35rem; }
.challenge-work { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; }
.hint { padding: 18px 20px; margin: 0 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.weekly-shell { display: grid; grid-template-columns: .72fr 1.28fr; gap: 55px; align-items: start; }
.weekly-meta { position: sticky; top: calc(var(--header-height) + 24px); padding: 30px; border-left: 4px solid var(--gold); background: var(--ivory); }
.weekly-meta h2 { margin: 7px 0 15px; }
.weekly-question { padding: 38px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow); }
.weekly-question h2 { font-size: clamp(1.65rem, 3vw, 2.45rem); }
.weekly-question fieldset { display: grid; gap: 12px; padding: 0; margin: 25px 0; border: 0; }
.weekly-option { min-height: 62px; padding: 12px 16px; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 13px; border: 1px solid #d6dbe3; border-radius: 12px; cursor: pointer; transition: border-color .18s ease, background .18s ease; }
.weekly-option:hover { border-color: var(--navy); background: #f7f9fc; }
.weekly-option input { width: 18px; height: 18px; accent-color: var(--burgundy); }
.weekly-letter { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--navy); background: var(--ivory); font-weight: 900; }
.weekly-option.is-correct { border-color: var(--success); background: #eefaf5; }
.weekly-option.is-wrong { border-color: var(--danger); background: #fff3f5; }
.weekly-feedback { padding: 20px 22px; margin-top: 22px; border-left: 4px solid var(--navy); background: var(--ivory); }
.weekly-feedback strong { display: block; color: var(--navy); font-family: var(--serif); font-size: 1.35rem; }
.weekly-feedback p { margin: 5px 0 0; }
.weekly-feedback.is-correct { border-color: var(--success); background: #eefaf5; }
.weekly-feedback.is-wrong { border-color: var(--danger); background: #fff3f5; }
.standard-intro > div { max-width: 950px; }
.official-sources { padding-top: 0; }
.official-sources > div { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.official-sources a { padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--navy); background: var(--white); font-weight: 700; text-decoration: none; }
.official-sources a:hover, .official-sources a:focus-visible { border-color: var(--gold); color: var(--burgundy); }
.story-grid { display: grid; grid-template-columns: 1fr .75fr; align-items: center; gap: 80px; }
.story-grid img { max-height: 520px; margin: auto; object-fit: contain; filter: drop-shadow(0 14px 24px rgba(19,43,77,.15)); }
.contact-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 60px; align-items: start; }
.contact-simple { max-width: 760px; grid-template-columns: minmax(0, 1fr); }
.contact-simple > .form-card { display: grid; gap: 17px; }
.contact-note, .notice { padding: 19px 22px; border-left: 3px solid var(--gold); background: var(--ivory); }
.contact-note p, .notice p { margin: 4px 0 0; }
.form-card { padding: 36px; }
.form-card form { display: grid; gap: 17px; }
.form-card label { display: grid; gap: 7px; color: var(--navy); font-weight: 750; }
.form-card input, .form-card textarea, .form-card select { width: 100%; padding: 13px 14px; border: 1px solid #cbd2dc; border-radius: 9px; color: var(--ink); background: var(--white); }
.form-card small { color: var(--muted); font-weight: 500; }
.field-error, .form-alert { color: var(--danger) !important; }
.form-alert { padding: 13px 15px; margin-bottom: 17px; border: 1px solid #efc4cb; border-radius: 9px; background: #fff3f5; }
.form-alert ul { margin: 0; padding-left: 18px; }
.honeypot { position: absolute !important; left: -10000px !important; }
.form-success, .error-page { max-width: 700px; text-align: center; }
.success-mark { width: 72px; height: 72px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 50%; color: var(--white); background: var(--success); font-size: 2rem; }
.hero-search { max-width: 720px; display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.search-results { display: grid; gap: 13px; }
.search-result { padding: 22px 25px; border: 1px solid var(--line); border-radius: 13px; background: var(--white); }
.search-result span { color: var(--burgundy); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.search-result strong { display: block; color: var(--navy); font: 1.35rem var(--serif); }
.search-result p { margin: 4px 0 0; color: var(--muted); }
.prose { max-width: 800px; font-size: 1.05rem; }
.legal-note { color: var(--muted); }
.empty-state { padding: 38px; border: 1px dashed #c9ced7; border-radius: 16px; text-align: center; background: rgba(255,255,255,.65); }
.error-code { display: block; color: var(--burgundy); font: 5rem var(--serif); }

.course-detail { display: grid; grid-template-columns: 1.2fr .62fr; align-items: start; gap: 55px; }
.lesson-list { padding: 0; margin: 25px 0 0; list-style: none; }
.lesson-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 15px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.lesson-row.is-done { opacity: .68; }
.lesson-number { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--navy); }
.lesson-row strong { display: block; }
.course-side { position: sticky; top: calc(var(--header-height) + 20px); padding: 32px; border-radius: 18px; color: var(--white); background: var(--navy); }
.course-side h2 { color: var(--white); }
.course-side p { color: rgba(255,255,255,.82); }
.course-side-lead { margin-bottom: 22px; }
.course-side .button, .course-side form { width: 100%; }
.signup-availability { padding: 16px 0; margin: 22px 0 12px; display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(255,255,255,.17); border-bottom: 1px solid rgba(255,255,255,.17); }
.signup-availability strong, .signup-availability span { display: block; }
.signup-availability span { color: var(--gold); text-align: right; }
.course-side .signup-countdown { background: rgba(255,255,255,.045); }
.course-progress-section { padding-top: 25px; margin-top: 28px; border-top: 1px solid rgba(255,255,255,.17); }
.course-progress { margin: 25px 0; }
.course-progress > div:first-child { display: flex; justify-content: space-between; }
.progress-track { height: 8px; overflow: hidden; border-radius: 999px; background: #e6e9ee; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--burgundy), #bd4a59); }

.signup-hero p { max-width: 880px; }
.signup-shell { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(520px, 1.28fr); align-items: start; gap: 52px; }
.signup-summary { position: sticky; top: calc(var(--header-height) + 24px); }
.signup-summary h2 { margin: 8px 0 12px; }
.signup-summary dl { margin: 28px 0; }
.signup-summary dl > div { padding: 11px 0; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); }
.signup-summary dt { color: var(--muted); }
.signup-summary dd { margin: 0; color: var(--navy); font-weight: 800; text-align: right; }
.signup-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow); }
.signup-card h2 { margin: 8px 0 24px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.privacy-choices, .account-choice { padding: 22px; display: grid; gap: 15px; border: 1px solid var(--line); border-radius: 14px; }
.privacy-choices legend, .account-choice legend { padding: 0 8px; color: var(--navy); font-family: var(--serif); font-size: 1.2rem; font-weight: 800; }
.privacy-first-layer { padding: 17px; border-radius: 10px; color: var(--ink); background: var(--ivory); }
.privacy-first-layer p { margin: 5px 0 0; font-size: .86rem; }
.privacy-first-layer a { color: var(--burgundy); font-weight: 750; }
.form-card .check-field { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.form-card .check-field > input { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--burgundy); }
.check-field span, .check-field strong, .check-field small { display: block; }
.check-field small { margin-top: 3px; }
.account-fields { display: grid; gap: 15px; padding-top: 6px; }
.account-fields[hidden] { display: none; }
.form-footnote { display: block; text-align: center; }
.signup-success .notice { margin: 24px 0; text-align: left; }

.auth-page { background: var(--ivory); }
.auth-shell { min-height: calc(100vh - var(--header-height)); display: grid; grid-template-columns: 1fr 1fr; }
.auth-brand { min-height: 650px; padding: 70px max(6vw, calc((100vw - var(--container))/2)); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; color: var(--white); background: linear-gradient(140deg, var(--navy-deep), #174976); }
.auth-brand img { width: 230px; margin-bottom: 24px; object-fit: contain; filter: drop-shadow(0 15px 25px rgba(0,0,0,.2)); }
.auth-brand h1 { color: var(--white); }
.auth-brand p { max-width: 520px; color: rgba(255,255,255,.78); }
.auth-card { width: min(520px, calc(100% - 48px)); margin: auto; padding: 45px; border-radius: 22px; background: var(--white); box-shadow: var(--shadow); }
.auth-card h2 { margin: 8px 0 25px; }
.auth-card form { display: grid; gap: 18px; }
.auth-card label { display: grid; gap: 7px; color: var(--navy); font-weight: 750; }
.auth-card input { width: 100%; padding: 14px; border: 1px solid #cbd2dc; border-radius: 9px; }
.platform-section { padding-top: 72px; padding-bottom: 78px; }
.platform-grid { margin-top: 28px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.platform-feature { min-width: 0; padding: 24px 18px; display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 14px; border: 1px solid #e1e4ea; border-radius: 14px; background: var(--white); box-shadow: 0 7px 18px rgba(19,43,77,.045); }
.platform-feature .line-icon { width: 42px; height: 42px; }
.platform-feature h3 { margin: 2px 0 8px; color: var(--navy); font: 800 .82rem/1.25 var(--sans); letter-spacing: .035em; text-transform: uppercase; }
.platform-feature p { margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.55; }
.feature-status { display: inline-flex; margin-top: 9px; padding: 3px 7px; color: var(--burgundy); border-radius: 999px; background: #fff1f2; font-size: .62rem; font-weight: 800; text-transform: uppercase; }
.values-section { padding-top: 20px; }
.value-grid { margin-top: 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.value-feature { min-height: 132px; padding: 26px 22px; display: flex; align-items: center; gap: 18px; border: 1px solid #eadfd7; border-radius: 16px; background: #fffaf6; }
.value-feature .line-icon { width: 49px; height: 49px; flex: 0 0 49px; }
.value-feature h3 { margin: 0; color: var(--navy); font: 800 .88rem/1.45 var(--sans); letter-spacing: .035em; text-transform: uppercase; }
.password-wrap { position: relative; display: block; }
.password-toggle { position: absolute; right: 8px; top: 50%; padding: 7px; border: 0; color: var(--burgundy); background: transparent; transform: translateY(-50%); cursor: pointer; }
.auth-help { margin: 20px 0 0; color: var(--muted); font-size: .84rem; }
.narrow-section { max-width: 700px; }
.narrow-section .notice { margin-bottom: 22px; }

.portal-page { background: #f4f6f9; }
.portal-shell { min-height: calc(100vh - var(--header-height)); display: grid; grid-template-columns: 250px 1fr; }
.portal-sidebar { padding: 28px 18px; color: var(--white); background: linear-gradient(180deg, var(--navy-deep), var(--navy)); }
.portal-user { display: flex; align-items: center; gap: 12px; padding: 8px 8px 27px; border-bottom: 1px solid rgba(255,255,255,.12); }
.avatar { width: 42px; height: 42px; flex: 0 0 auto; overflow: hidden; display: grid; place-items: center; border-radius: 50%; color: var(--navy); background: var(--gold); font-weight: 900; }
.avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.avatar-link { transition: transform .18s ease, box-shadow .18s ease; }
.avatar-link:hover { transform: translateY(-1px); box-shadow: 0 0 0 3px rgba(255,255,255,.2); }
.portal-user small, .portal-user strong { display: block; }
.portal-user small { color: rgba(255,255,255,.6); }
.portal-sidebar nav { display: grid; gap: 5px; margin-top: 24px; }
.portal-sidebar nav a, .portal-settings { padding: 11px 13px; border-radius: 8px; color: rgba(255,255,255,.78); font-size: .87rem; }
.portal-sidebar nav a:hover, .portal-sidebar nav a.is-active { color: var(--white); background: rgba(255,255,255,.12); }
.portal-settings { display: block; margin-top: 30px; border-top: 1px solid rgba(255,255,255,.12); border-radius: 0; }
.portal-settings-links { margin-top: 30px; border-top: 1px solid rgba(255,255,255,.12); }
.portal-settings-links .portal-settings { margin-top: 0; border-top: 0; }
.admin-sidebar { background: linear-gradient(180deg, #4d101b, var(--burgundy)); }
.portal-main { min-width: 0; padding: 38px clamp(20px, 4vw, 55px) 70px; }
.portal-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.portal-top h1 { margin: 3px 0 0; font-size: clamp(2.2rem, 4vw, 3.4rem); }
.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px; margin-bottom: 20px; }
.metric-card { padding: 24px; border: 1px solid #e0e4ea; border-radius: 15px; background: var(--white); box-shadow: 0 8px 24px rgba(19,43,77,.05); }
.metric-card span, .metric-card small { display: block; color: var(--muted); }
.metric-card span { font-size: .77rem; font-weight: 800; text-transform: uppercase; }
.metric-card strong { display: block; margin: 7px 0 4px; color: var(--navy); font: 2.2rem var(--serif); }
.portal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.portal-card { padding: 25px; box-shadow: 0 8px 25px rgba(19,43,77,.045); }
.portal-card h2 { font-size: 1.55rem; }
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 20px; }
.card-heading h2, .card-heading p { margin: 0; }
.card-heading a { color: var(--burgundy); font-size: .82rem; font-weight: 750; }
.card-heading a.button { color: var(--white); }
.card-heading a.button:hover { color: var(--white); }
.progress-course { display: grid; grid-template-columns: minmax(130px, .8fr) 1fr auto; align-items: center; gap: 15px; padding: 14px 0; border-top: 1px solid var(--line); }
.progress-course strong, .progress-course span { display: block; }
.progress-course span { color: var(--muted); font-size: .77rem; }
.progress-course b { color: var(--navy); }
.progress-chart svg { width: 100%; }
.progress-chart line { stroke: #d8dde5; stroke-width: 1; }
.progress-chart polyline { fill: none; stroke: var(--navy); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.activity-list, .attempt-list { padding: 0; margin: 0; list-style: none; }
.activity-list li { display: flex; gap: 13px; padding: 12px 0; border-top: 1px solid var(--line); }
.activity-list strong, .activity-list small { display: block; }
.activity-list small { color: var(--muted); }
.activity-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; color: var(--white); background: var(--success); }
.notification-card { grid-column: 1 / -1; }
.notification-list { padding: 0; margin: 0; list-style: none; }
.notification-list li { padding: 16px 18px; border-top: 1px solid var(--line); }
.notification-list li.is-unread { border-left: 4px solid var(--burgundy); background: #fff9f5; }
.notification-list strong, .notification-list small { display: block; }
.notification-list small { color: var(--muted); }
.notification-list p { margin: 7px 0; }
.notification-list a { color: var(--burgundy); font-size: .84rem; font-weight: 800; }
.gold-bg { color: var(--navy); background: var(--gold); }
.plan-card { color: var(--white); background: var(--navy); }
.plan-card h2, .plan-card p { color: var(--white); }
.portal-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.course-progress-card .progress-track { margin: 20px 0 10px; }
.course-progress-footer { display: flex; justify-content: space-between; margin-bottom: 20px; }
.course-progress-footer span { color: var(--muted); }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 14px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { color: var(--navy); font-size: .75rem; text-transform: uppercase; }
td small { display: block; color: var(--muted); }
.attempt-list li { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.material-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 17px; }
.material-card h2 { margin: 0; }
.material-card p { margin: 4px 0 0; color: var(--muted); }
.quick-admin { display: flex; flex-wrap: wrap; gap: 12px; }
.profile-grid { display: grid; grid-template-columns: minmax(250px, .62fr) minmax(430px, 1.38fr); align-items: start; gap: 20px; }
.profile-summary { position: sticky; top: calc(var(--header-height) + 24px); text-align: center; }
.profile-summary h2 { margin: 8px 0 22px; }
.profile-avatar-wrap { margin: 3px auto 20px; display: grid; place-items: center; }
.profile-avatar { width: 156px; height: 156px; font-size: 3.2rem; box-shadow: 0 14px 32px rgba(19,43,77,.16); }
.profile-account-data { margin: 0 0 24px; text-align: left; }
.profile-account-data > div { padding: 10px 0; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); }
.profile-account-data dt { color: var(--muted); font-size: .75rem; font-weight: 750; }
.profile-account-data dd { margin: 0; color: var(--navy); font-weight: 750; text-align: right; }
.profile-details { min-width: 0; }
.profile-photo-card { min-width: 0; grid-column: 2; }
.profile-photo-workspace { margin: 24px 0; display: grid; grid-template-columns: 142px 1fr; align-items: center; gap: 24px; }
.profile-photo-preview { width: 142px; height: 142px; display: grid; place-items: center; }
.profile-photo-preview .profile-avatar { width: 142px; height: 142px; font-size: 2.8rem; }
.profile-photo-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.profile-photo-actions small { width: 100%; }
.profile-file-button { position: relative; overflow: hidden; cursor: pointer; }
.profile-file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.profile-camera { padding: 18px; margin-bottom: 20px; border: 1px solid #d8dde5; border-radius: 15px; background: #eef2f6; }
.profile-camera video { width: min(100%, 620px); max-height: 470px; margin: 0 auto 14px; display: block; object-fit: cover; border-radius: 13px; background: var(--navy-deep); transform: scaleX(-1); }
.profile-camera .button-row { justify-content: center; }
.profile-photo-card [data-avatar-form] { display: flex; align-items: center; gap: 12px; }
.profile-photo-card [data-avatar-submit]:disabled { opacity: .48; cursor: not-allowed; transform: none; }
.profile-photo-status { margin: 13px 0 0; color: var(--muted); font-size: .82rem; }
.profile-avatar-remove { margin-top: 6px !important; }
.profile-avatar-remove .text-button { color: #7a2633; }
.status-list { margin: 0; }
.status-list > div { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); }
.status-dot { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; background: #1f9d6a; }
.admin-form { max-width: 720px; }
.credential-card { max-width: 760px; text-align: center; }
.credential-card dl { display: grid; gap: 10px; margin: 25px 0; text-align: left; }
.credential-card dl > div { display: grid; grid-template-columns: 180px 1fr; gap: 14px; padding: 12px; border-radius: 9px; background: var(--ivory); }
.credential-card dt { color: var(--muted); }
.credential-card code { word-break: break-all; }
.temporary-password { color: var(--burgundy); font-size: 1.05rem; font-weight: 900; }
.message-folders { margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.message-folder { min-height: 46px; padding: 10px 15px; display: inline-flex; align-items: center; gap: 10px; border: 1px solid #dce2ea; border-radius: 11px; color: var(--navy); background: var(--white); font-weight: 750; }
.message-folder.is-active { border-color: var(--navy); color: var(--white); background: var(--navy); }
.message-folder-count { min-width: 26px; height: 26px; display: grid; place-items: center; border-radius: 999px; background: rgba(19,43,77,.08); font-size: .78rem; }
.message-folder.is-active .message-folder-count { background: rgba(255,255,255,.16); }
.message-list { display: grid; gap: 16px; }
.message-card { padding: 25px; border: 1px solid #e0e4ea; border-radius: 15px; background: var(--white); }
.message-card.is-new { border-left: 5px solid var(--burgundy); }
.message-card.is-deleted { border-left: 5px solid #a0a8b5; }
.message-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: .75rem; }
.message-card h2 { margin: 8px 0; }
.message-body { padding: 18px; margin: 15px 0; white-space: pre-wrap; border-radius: 10px; background: var(--ivory); }
.message-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.signup-admin-intro { margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.signup-admin-intro h2, .signup-admin-intro p { margin: 5px 0; }
.metric-inline { min-width: 130px; text-align: center; }
.metric-inline strong, .metric-inline small { display: block; }
.metric-inline strong { color: var(--navy); font: 2.6rem var(--serif); }
.metric-inline small { color: var(--muted); }
.signup-admin-list { display: grid; gap: 17px; }
.signup-admin-card { padding: 26px; border: 1px solid #e0e4ea; border-radius: 15px; background: var(--white); box-shadow: 0 8px 25px rgba(19,43,77,.045); }
.signup-admin-card.is-new { border-left: 5px solid var(--burgundy); }
.signup-admin-head { display: flex; justify-content: space-between; gap: 20px; }
.signup-admin-head h2 { margin: 4px 0; }
.signup-admin-head p { margin: 0; color: var(--muted); }
.status-new { color: var(--white); background: var(--burgundy); }
.status-contacted { background: #fff0cd; }
.status-accepted { color: #126143; background: #dff5eb; }
.status-closed { color: var(--muted); background: #eceff3; }
.signup-data { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 24px; margin: 22px 0; }
.signup-data > div { padding: 10px 0; border-top: 1px solid var(--line); }
.signup-data dt { color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.signup-data dd { margin: 3px 0 0; word-break: break-word; }
.signup-data a { color: var(--burgundy); font-weight: 750; }
.signup-admin-actions { padding-top: 18px; display: grid; grid-template-columns: minmax(360px, 1fr) minmax(220px, .65fr); align-items: end; gap: 25px; border-top: 1px solid var(--line); }
.signup-admin-actions > form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px; }
.signup-admin-actions label { display: grid; gap: 5px; }
.signup-admin-actions label span { color: var(--muted); font-size: .75rem; font-weight: 800; }
.signup-admin-actions select { min-height: 43px; padding: 8px 10px; border: 1px solid #cbd2dc; border-radius: 8px; background: var(--white); }
.mail-state strong, .mail-state small { display: block; }
.mail-state small { margin-top: 3px; color: var(--muted); }
.signup-admin-controls { margin-top: 16px; padding-top: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; border-top: 1px solid var(--line); }

.analytics-intro { margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.analytics-intro h2, .analytics-intro p { margin: 5px 0; }
.analytics-live { min-width: 145px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 9px; }
.analytics-live i { width: 12px; height: 12px; grid-row: 1 / 3; border-radius: 50%; background: #1f9d6a; box-shadow: 0 0 0 6px rgba(31,157,106,.13); }
.analytics-live strong, .analytics-live small { display: block; }
.analytics-live small { color: var(--muted); }
.analytics-metrics { grid-template-columns: repeat(6, minmax(125px, 1fr)); }
.analytics-metrics .metric-card { padding: 20px; }
.analytics-metrics .metric-card strong { font-size: 2rem; }
.analytics-timeline { margin-bottom: 20px; }
.analytics-timeline ol { min-height: 225px; padding: 18px 0 0; margin: 0; display: grid; grid-template-columns: repeat(14, minmax(46px, 1fr)); align-items: end; gap: 9px; list-style: none; overflow-x: auto; }
.analytics-timeline li { min-width: 46px; display: grid; gap: 5px; color: var(--muted); text-align: center; font-size: .7rem; }
.analytics-day-bars { height: 155px; display: flex; align-items: flex-end; justify-content: center; gap: 4px; border-bottom: 1px solid #d8dde5; background: repeating-linear-gradient(to top, transparent 0, transparent 38px, rgba(19,43,77,.06) 38px, rgba(19,43,77,.06) 39px); }
.analytics-day-bars i, .analytics-day-bars b { width: 13px; min-height: 3px; display: block; border-radius: 4px 4px 0 0; }
.analytics-day-bars i { background: var(--burgundy); }
.analytics-day-bars b { background: var(--navy); }
.analytics-timeline li > strong { color: var(--navy); }
.analytics-timeline li > small { white-space: nowrap; }
.analytics-summary-grid { margin-bottom: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.analytics-summary-grid > .portal-card:first-child { grid-row: span 2; }
.analytics-breakdown ol { padding: 0; margin: 0; list-style: none; }
.analytics-breakdown li { padding: 8px 0; }
.analytics-breakdown li > div { display: flex; justify-content: space-between; gap: 14px; font-size: .82rem; }
.analytics-breakdown li > div span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.analytics-breakdown li > i { height: 5px; margin-top: 5px; display: block; overflow: hidden; border-radius: 10px; background: #e8ebef; }
.analytics-breakdown li > i b { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--burgundy), #c45c6b); }
.analytics-empty { color: var(--muted); }
.analytics-recent { margin-bottom: 20px; }
.analytics-recent table { min-width: 1220px; }
.analytics-recent td { max-width: 240px; font-size: .79rem; }
.analytics-recent td strong, .analytics-recent td small { display: block; }
.analytics-recent td code { color: var(--burgundy); white-space: nowrap; }
.analytics-recent details summary { color: var(--burgundy); cursor: pointer; font-weight: 800; }
.analytics-recent details span { max-width: 360px; margin-top: 8px; display: block; color: var(--muted); word-break: break-word; }
.analytics-privacy-note { padding: 16px 20px; border: 1px solid #d9dee6; border-radius: 12px; color: var(--muted); background: #eef2f6; font-size: .82rem; }

.site-footer { padding: 0 0 20px; color: rgba(255,255,255,.76); background: var(--navy-deep); }
.footer-art { width: 100%; overflow: hidden; border-top: 1px solid rgba(225,184,126,.3); border-bottom: 1px solid rgba(225,184,126,.3); background: #04234e; }
.footer-art-inner { width: min(100%, 1180px); min-height: 177px; padding: 0 26px; margin: 0 auto; display: grid; grid-template-columns: 180px minmax(330px, 1fr) 160px; align-items: center; justify-items: center; gap: 28px; }
.footer-art-filters { position: absolute; pointer-events: none; }
.footer-art-visual { position: relative; height: 177px; overflow: hidden; display: block; }
.footer-art-visual img { position: absolute; top: 0; width: 1024px; max-width: none; height: 177px; display: block; filter: url(#footer-art-cutout); }
.footer-art-geometry { width: 168px; }
.footer-art-geometry img { left: -166px; }
.footer-art-ship { width: 150px; }
.footer-art-ship img { left: -690px; }
.footer-art-copy { color: #e4bd8f; text-align: center; }
.footer-art-copy p { margin: 0; font: 1.72rem/1.42 var(--serif); letter-spacing: .025em; }
.footer-art-copy p span { display: block; }
.footer-art-copy strong { display: block; margin-top: 9px; color: #e8c7a0; font-size: .72rem; line-height: 1.4; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; }
.footer-grid, .footer-bottom { width: min(var(--container), calc(100% - 40px)); margin-right: auto; margin-left: auto; }
.footer-grid { padding-top: 60px; display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 50px; }
.footer-brand img { width: 112px; height: 112px; display: block; object-fit: contain; margin-bottom: 10px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.2)); }
.footer-brand p { color: var(--gold); font-family: var(--serif); }
.site-footer h2 { color: var(--white); font-family: var(--sans); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.site-footer a { display: block; margin: 7px 0; font-size: .84rem; }
.site-footer a:hover { color: var(--white); }
.footer-bottom { margin-top: 42px; padding-top: 18px; display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.12); font-size: .75rem; }

@media (max-width: 1220px) {
  .main-nav { position: fixed; top: var(--header-height); right: 0; left: 0; max-height: 0; overflow: hidden; display: block; border-bottom: 1px solid rgba(19,43,77,.14); background: var(--white); box-shadow: 0 14px 25px rgba(19,43,77,.1); transition: max-height .22s ease; }
  .main-nav.is-open { max-height: calc(100vh - var(--header-height)); overflow-y: auto; padding: 15px 20px 25px; }
  .nav-link { display: block; padding: 11px 4px; }
  .nav-link::after { left: 4px; right: auto; width: 50px; }
  .nav-search { display: none; }
  .nav-actions { padding-top: 14px; }
  .menu-toggle { display: block; }
  .public-site-header:not(.is-condensed) .main-nav { position: absolute; top: 100%; }
  .quick-strip { grid-template-columns: repeat(3, 1fr); }
  .quick-link:nth-child(3) { border-right: 0; }
  .quick-link:nth-child(n+4) { border-top: 1px solid #e7e9ed; }
  .course-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 30px 0; }
  .steps li:nth-child(3)::after { display: none; }
  .info-grid, .formula-grid { grid-template-columns: repeat(2, 1fr); }
  .portal-shell { grid-template-columns: 210px 1fr; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .metrics-grid.analytics-metrics { grid-template-columns: repeat(3, 1fr); }
  .platform-grid { grid-template-columns: repeat(2, 1fr); }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  :root { --header-height: 82px; }
  .brand-masthead { width: 100%; margin-top: 0; border-right: 0; border-left: 0; border-radius: 0; }
  .brand-cover { height: 215px; }
  .brand-cover-art { object-position: right center; }
  .brand-cover-logo { position: absolute; z-index: 2; top: auto; left: 14px; bottom: 12px; width: clamp(82px, 23vw, 104px); height: auto; display: block; filter: drop-shadow(0 8px 13px rgba(5,31,65,.28)); transform: none; }
  .is-inner-masthead .brand-cover-logo { top: auto; left: 4px; bottom: 10px; width: clamp(166px, 46vw, 184px); filter: drop-shadow(0 10px 17px rgba(5,31,65,.34)); transform: none; }
  .is-inner-masthead .cover-identity { top: 29%; left: 72%; width: 54%; }
  .is-inner-masthead .cover-identity > strong { font-size: clamp(1.18rem, 5.2vw, 1.48rem); letter-spacing: .055em; }
  .is-inner-masthead .cover-identity > small { font-size: .47rem; letter-spacing: .13em; }
  .is-inner-masthead .cover-divider { width: 66%; margin: 8px 0 6px; }
  .cover-identity { top: 35%; left: 50%; width: 82%; }
  .cover-identity > strong { font-size: clamp(1.55rem, 7.3vw, 2.1rem); letter-spacing: .08em; }
  .cover-identity > small { font-size: .57rem; letter-spacing: .2em; }
  .cover-divider { width: 72%; margin: 10px 0 8px; }
  .public-site-header { width: 100%; border-right: 0; border-left: 0; }
  .brand img { width: 62px; height: 62px; }
  .floating-signup { right: 14px; bottom: 14px; min-height: 50px; padding: 13px 20px; border-radius: 13px; font-size: .84rem; }
  .section { width: min(100% - 28px, var(--container)); padding: 60px 0; }
  .hero { min-height: 720px; grid-template-columns: 1fr; gap: 28px; padding: 65px 20px 85px; text-align: center; }
  .hero-copy p { margin-right: auto; margin-left: auto; }
  .hero .button-row { justify-content: center; }
  .hero-mark img { width: min(270px, 68vw); }
  .quick-strip { margin-top: -28px; grid-template-columns: 1fr; }
  .quick-link { min-height: 86px; border-right: 0; border-bottom: 1px solid #e7e9ed; }
  .quick-link:last-child { border-bottom: 0; }
  .intro-section, .split-feature, .contact-grid, .story-grid, .course-detail, .challenge-work, .weekly-shell, .signup-shell { grid-template-columns: 1fr; display: grid; gap: 35px; }
  .math-sketch { display: none; }
  .course-grid, .article-grid, .task-grid, .formula-grid, .two-cards, .info-grid { grid-template-columns: 1fr; }
  .formula-calculator { grid-template-columns: 1fr; }
  .calculator-form { grid-template-columns: 1fr 1fr; }
  .calculator-form .button { grid-column: 1 / -1; }
  .formula-calculator > small { grid-column: 1; margin-top: -10px; }
  .course-card-featured { transform: none; }
  .steps { grid-template-columns: 1fr 1fr; }
  .steps li::after { display: none; }
  .sos-section, .final-cta { grid-template-columns: 1fr; text-align: center; }
  .sos-icon, .final-cta img { margin: auto; }
  .sos-class8-section { row-gap: 15px; }
  .sos-class8-badge { width: 116px; height: 118px; }
  .sos-class8-logo { width: 116px; }
  .page-hero { min-height: 310px; padding: 70px 20px; }
  .page-hero::after { font-size: 1.5rem; }
  .course-side { position: static; }
  .signup-summary { position: static; }
  .weekly-meta { position: static; }
  .result-panel { grid-template-columns: 1fr; text-align: center; }
  .score-ring { margin: auto; position: relative; }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-brand { min-height: 430px; padding: 50px 28px; text-align: center; align-items: center; }
  .auth-brand img { width: 175px; }
  .auth-card { margin: 35px auto; padding: 30px; }
  .platform-grid, .value-grid { grid-template-columns: 1fr; }
  .profile-grid { grid-template-columns: 1fr; }
  .profile-summary { position: static; }
  .profile-photo-card { grid-column: 1; }
  .platform-feature, .value-feature { min-height: 0; }
  .portal-shell { display: block; }
  .portal-sidebar { padding: 14px; }
  .portal-user { padding-bottom: 14px; }
  .portal-sidebar nav { display: flex; gap: 5px; margin-top: 12px; overflow-x: auto; }
  .portal-sidebar nav a { white-space: nowrap; }
  .portal-settings { margin-top: 10px; padding-top: 10px; }
  .portal-main { padding: 28px 14px 60px; }
  .portal-top { align-items: flex-start; }
  .portal-grid, .portal-card-grid { grid-template-columns: 1fr; }
  .analytics-intro { align-items: flex-start; flex-direction: column; }
  .analytics-summary-grid { grid-template-columns: 1fr; }
  .analytics-summary-grid > .portal-card:first-child { grid-row: auto; }
  .signup-data { grid-template-columns: 1fr 1fr; }
  .signup-admin-actions { grid-template-columns: 1fr; }
  .progress-course { grid-template-columns: 1fr auto; }
  .progress-course .progress-track { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-art-inner { grid-template-columns: 108px minmax(0, 1fr) 98px; min-height: 126px; padding: 8px 10px; gap: 6px; }
  .footer-art-visual { height: 110px; }
  .footer-art-visual img { width: 636px; height: 110px; }
  .footer-art-geometry { width: 104px; }
  .footer-art-geometry img { left: -103px; }
  .footer-art-ship { width: 94px; }
  .footer-art-ship img { left: -428px; }
  .footer-art-copy p { font-size: 1rem; line-height: 1.45; }
  .footer-art-copy strong { margin-top: 7px; font-size: .52rem; letter-spacing: .14em; }
}

@media (max-width: 480px) {
  .brand-wordmark { font-size: 1.05rem; }
  .header-inner { gap: 12px; }
  .hero { min-height: 680px; }
  .hero h1 { font-size: 3.2rem; }
  .button-row { flex-direction: column; align-items: stretch; }
  .steps { grid-template-columns: 1fr; }
  .feature-card, .form-card, .task-card, .article-card, .portal-card { padding: 23px; }
  .formula-card { padding: 23px; }
  .calculator-form { grid-template-columns: 1fr; }
  .calculator-form .button { grid-column: 1; }
  .notebook-panel, .calculator-result, .geometry-sketch { padding-left: 52px; }
  .diagram-hand-field { min-height: 33px; font-size: clamp(.9rem, 4.3vw, 1.16rem); }
  .diagram-hand-field input { min-height: 31px; }
  .circle-resize-handle { width: 31px; height: 31px; font-size: 1.05rem; }
  .metrics-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .metrics-grid.analytics-metrics { grid-template-columns: 1fr 1fr; }
  .metric-card { padding: 17px; }
  .metric-card strong { font-size: 1.7rem; }
  .portal-top { display: block; }
  .portal-top .text-link { display: inline-block; margin-top: 8px; }
  .hero-search { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { display: grid; gap: 4px; }
  .credential-card dl > div { grid-template-columns: 1fr; }
  .form-row, .signup-data, .signup-admin-actions > form { grid-template-columns: 1fr; }
  .profile-photo-workspace { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .profile-photo-actions { justify-content: center; }
  .signup-admin-intro, .signup-admin-head { align-items: flex-start; flex-direction: column; }
  .signup-availability { display: grid; gap: 4px; }
  .signup-availability span { text-align: left; }
  .cover-identity { left: 55%; width: 80%; }
  .cover-identity > strong { font-size: 1.48rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .math-stream-canvas { transition: none; }
}