:root {
  --navy: #0e244f;
  --ink: #20345a;
  --muted: #5e6e89;
  --cream: #fffaf4;
  --peach: #fbeee4;
  --peach-deep: #f8dfd2;
  --mint: #dff6eb;
  --mint-deep: #1c9b72;
  --green: #14866a;
  --yellow: #f5c64f;
  --coral: #f28b72;
  --blue-soft: #e8f1fb;
  --white: #ffffff;
  --shadow: 0 24px 70px rgba(32, 52, 90, 0.1);
  --radius-lg: 2rem;
  --radius-md: 1.25rem;
  --container: 1100px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
.container { width: min(calc(100% - 3rem), var(--container)); margin-inline: auto; }
.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; left: 1rem; top: -5rem; z-index: 100; padding: .7rem 1rem; color: var(--white); background: var(--navy); border-radius: .75rem; }
.skip-link:focus { top: 1rem; }

.site-header { position: sticky; top: 0; z-index: 20; padding: 1rem 0; background: rgba(255, 250, 244, .86); backdrop-filter: blur(18px); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: .75rem 1rem; border: 1px solid rgba(14, 36, 79, .06); border-radius: 1.25rem; background: rgba(255, 255, 255, .92); box-shadow: 0 8px 25px rgba(14, 36, 79, .04); }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--navy); font-size: 1.18rem; font-weight: 800; letter-spacing: -.04em; white-space: nowrap; }
.brand-logo-image { display: block; width: auto; max-width: 12rem; height: 2.7rem; object-fit: contain; }
.main-navigation { display: flex; align-items: center; gap: 1.7rem; color: var(--navy); font-size: .95rem; font-weight: 600; }
.main-navigation a:not(.button) { opacity: .86; transition: color .2s ease, opacity .2s ease; }
.main-navigation a:not(.button):hover, .main-navigation a:not(.button):focus-visible { color: var(--green); opacity: 1; }
.main-navigation a[aria-current="page"] { color: var(--green); opacity: 1; }
.menu-toggle { display: none; border: 0; background: transparent; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; min-height: 3.2rem; padding: .8rem 1.25rem; border: 1px solid transparent; border-radius: 999px; font-weight: 750; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover, .button:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(14, 36, 79, .13); }
.button-primary { color: var(--white); background: var(--green); box-shadow: 0 12px 24px rgba(20, 134, 106, .2); }
.button-primary:hover, .button-primary:focus-visible { background: #0e725a; }
.button-ghost { color: var(--navy); border-color: rgba(14, 36, 79, .12); background: rgba(255, 255, 255, .75); }
.button-soft { color: var(--navy); background: var(--mint); }
.button-small { min-height: 2.7rem; padding: .55rem 1rem; font-size: .88rem; }
.nav-try-link { box-shadow: 0 8px 22px rgba(20, 134, 106, .16); animation: navTryGlow 3.8s ease-in-out infinite; }
.nav-try-link:hover, .nav-try-link:focus-visible { animation-play-state: paused; box-shadow: 0 12px 28px rgba(20, 134, 106, .26); }
@keyframes navTryGlow { 0%, 100% { box-shadow: 0 8px 22px rgba(20, 134, 106, .14); } 50% { box-shadow: 0 10px 28px rgba(20, 134, 106, .28); } }

.hero { position: relative; overflow: hidden; padding: 3.7rem 0 3.8rem; background: var(--peach); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 3rem; }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(1px); opacity: .55; }
.hero-orb-left { width: 26rem; height: 26rem; left: -17rem; bottom: -12rem; background: #f8d7cb; }
.hero-orb-right { width: 34rem; height: 20rem; right: -12rem; top: 7rem; background: linear-gradient(135deg, #fbe8dd, #e6f5e9); transform: rotate(-12deg); }
.eyebrow { display: flex; align-items: center; gap: .55rem; margin: 0 0 1rem; color: var(--green); font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.eyebrow-dot { width: .65rem; height: .65rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 .28rem rgba(20, 134, 106, .12); }
.eyebrow-dot.coral { background: var(--coral); box-shadow: 0 0 0 .28rem rgba(242, 139, 114, .15); }
.eyebrow-dot.yellow { background: var(--yellow); box-shadow: 0 0 0 .28rem rgba(245, 198, 79, .18); }
.eyebrow-dot.teal { background: #2eb6a1; box-shadow: 0 0 0 .28rem rgba(46, 182, 161, .15); }
.hero h1, .section-heading h2, .contact-card h2 { max-width: 700px; margin: 0; color: var(--navy); font-size: clamp(2.45rem, 4.2vw, 4.2rem); line-height: .98; letter-spacing: -.075em; }
.hero-lead { max-width: 540px; margin: 1.35rem 0 0; color: #405271; font-size: clamp(1.05rem, 1.25vw, 1.2rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.hero-note { display: flex; align-items: center; gap: .5rem; margin-top: 1.6rem; color: var(--muted); font-size: .88rem; }
.note-icon { color: var(--yellow); font-size: 1.3rem; }

.hero-demo { position: relative; padding: 1rem 0 0; }
.demo-glow { position: absolute; width: 70%; height: 70%; right: 5%; top: 15%; border-radius: 45%; background: radial-gradient(circle, rgba(74, 202, 143, .22), rgba(74, 202, 143, 0)); filter: blur(20px); }
.demo-card { position: relative; isolation: isolate; min-height: 31rem; padding: 2rem; overflow: hidden; border: 1px solid rgba(14, 36, 79, .07); border-radius: 2rem; background: rgba(255, 255, 255, .93); box-shadow: var(--shadow); transform: rotate(1deg); }
.demo-card::before { position: absolute; z-index: -1; width: 19rem; height: 16rem; right: -5rem; top: 2rem; border-radius: 47% 53% 42% 58%; background: linear-gradient(140deg, #22b17a, #d7df35); content: ""; opacity: .85; }
.demo-header { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: .82rem; font-weight: 750; }
.demo-progress { color: var(--green); }
.demo-path { position: relative; display: flex; justify-content: space-between; width: 68%; margin: 1.3rem 0 2.2rem; }
.path-line { position: absolute; top: .5rem; left: .5rem; right: .5rem; height: 2px; background: #d9ebe2; }
.path-dot { position: relative; z-index: 1; width: 1rem; height: 1rem; border: 3px solid var(--white); border-radius: 50%; background: #cfe5dc; box-shadow: 0 0 0 1px #cfe5dc; }
.path-dot.active { background: var(--green); box-shadow: 0 0 0 1px var(--green), 0 0 0 .25rem rgba(20, 134, 106, .11); }
.demo-question { display: flex; align-items: flex-start; gap: 1rem; max-width: 70%; }
.question-number { display: grid; flex: 0 0 auto; width: 2.3rem; height: 2.3rem; place-items: center; color: var(--white); border-radius: 50%; background: var(--green); font-weight: 800; }
.question-kicker { margin: 0 0 .2rem; color: var(--muted); font-size: .85rem; }
.demo-question h2 { margin: 0; color: var(--navy); font-size: clamp(1.45rem, 2.4vw, 2.1rem); line-height: 1.1; letter-spacing: -.045em; }
.demo-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; max-width: 79%; margin-top: 1.7rem; }
.option-chip { display: flex; align-items: center; gap: .45rem; min-height: 3rem; padding: .55rem .7rem; color: var(--ink); border: 1px solid rgba(14, 36, 79, .1); border-radius: .9rem; background: rgba(255,255,255,.84); cursor: pointer; font-size: .86rem; font-weight: 700; transition: border .2s ease, background .2s ease, transform .2s ease; }
.option-chip:hover, .option-chip:focus-visible { transform: translateY(-2px); border-color: var(--green); }
.option-chip.selected { border-color: #62cba0; background: var(--mint); }
.chip-icon { display: inline-grid; width: 1.25rem; height: 1.25rem; place-items: center; color: var(--green); font-weight: 900; }
.demo-hint { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; color: var(--muted); font-size: .76rem; font-weight: 700; }
.hint-dot { width: .48rem; height: .48rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 .28rem rgba(20, 134, 106, .1); animation: hint-pulse 1.8s ease-in-out infinite; }
.demo-next { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.5rem; padding: .7rem 1rem; color: var(--white); border: 0; border-radius: 999px; background: var(--navy); cursor: pointer; font-weight: 750; transition: transform .2s ease, background .2s ease; }
.demo-next:hover, .demo-next:focus-visible { transform: translateY(-2px); background: var(--green); }
.assistant-shape { position: absolute; z-index: -1; right: 1.25rem; top: 4.3rem; width: 9.4rem; height: 8.7rem; border-radius: 44% 56% 52% 48% / 48% 42% 58% 52%; background: linear-gradient(145deg, #2db477 15%, #c8d72a 100%); box-shadow: 0 18px 35px rgba(38, 163, 111, .2); animation: float 5s ease-in-out infinite; }
.assistant-shape::before { position: absolute; inset: 2rem 2.1rem; border-radius: 1.25rem; background: rgba(255,255,255,.92); content: ""; }
.assistant-shape span::before, .assistant-shape span::after { position: absolute; z-index: 1; top: 3.55rem; width: .55rem; height: .85rem; border-radius: 999px; background: var(--navy); content: ""; }
.assistant-shape span::before { left: 3.55rem; }
.assistant-shape span::after { left: 5.05rem; }
.cursor-shape { position: absolute; z-index: 3; left: 70%; top: 75%; color: var(--navy); font-size: 3.2rem; pointer-events: none; filter: drop-shadow(0 4px 3px rgba(255,255,255,.9)); transform: translate(-12%, -18%) rotate(-18deg); transition: left 1s cubic-bezier(.22, 1, .36, 1), top 1s cubic-bezier(.22, 1, .36, 1); animation: cursor-bob 1.5s ease-in-out infinite; }
.cursor-shape.cursor-hover { animation: cursor-click .9s ease-in-out both; }
.demo-caption { margin: 1.1rem 0 0; color: var(--navy); font-size: 1.2rem; font-weight: 800; letter-spacing: -.03em; text-align: center; }

/* Elevens perspektiv: en lille animeret forklaring af udvidelsen. */
.story-demo { min-height: 28.5rem; padding: 1.05rem; transform: rotate(1deg); }
.story-demo::before { display: none; }
.story-windowbar { display: flex; align-items: center; gap: .75rem; padding: .15rem .25rem .95rem; color: var(--muted); font-size: .7rem; font-weight: 800; }
.window-dots { display: inline-flex; gap: .3rem; }
.window-dots i { width: .5rem; height: .5rem; border-radius: 50%; background: #e8b09f; }
.window-dots i:nth-child(2) { background: var(--yellow); }
.window-dots i:nth-child(3) { background: #8bd4ad; }
.story-window-title { flex: 1; }
.story-live { display: inline-flex; align-items: center; gap: .3rem; color: var(--green); font-size: .65rem; }
.story-live span { width: .4rem; height: .4rem; border-radius: 50%; background: var(--green); animation: hint-pulse 1.8s ease-in-out infinite; }
.story-viewport { position: relative; min-height: 21rem; overflow: hidden; border: 1px solid rgba(14, 36, 79, .08); border-radius: 1.3rem; background: linear-gradient(145deg, #f8fbfa, #fff); }
.story-frame { position: absolute; inset: 0; padding: 1.45rem; opacity: 0; pointer-events: none; transform: translateX(1.2rem) scale(.98); transition: opacity .65s ease, transform .65s ease; }
.story-frame::after { position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 83% 16%, rgba(200, 215, 42, .22), transparent 25%), radial-gradient(circle at 8% 93%, rgba(167, 215, 193, .3), transparent 24%); content: ""; }
.story-viewport[data-state="detect"] .story-frame-detect,
.story-viewport[data-state="ask"] .story-frame-ask,
.story-viewport[data-state="choices"] .story-frame-choices { opacity: 1; pointer-events: auto; transform: translateX(0) scale(1); }
.assignment-sheet { position: absolute; left: 1.5rem; right: 1.5rem; top: 4.25rem; bottom: 1.4rem; padding: 1.25rem; border: 1px solid rgba(14, 36, 79, .08); border-radius: 1rem; background: rgba(255, 255, 255, .88); box-shadow: 0 10px 30px rgba(32, 52, 90, .07); }
.assignment-meta { display: flex; gap: .45rem; color: var(--slate-blue, #4f7ca8); font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.assignment-meta span + span::before { margin-right: .45rem; color: #b6c1d2; content: "/"; }
.assignment-sheet h2 { max-width: 66%; margin: .65rem 0 .45rem; color: var(--navy); font-size: clamp(1.45rem, 2.5vw, 2rem); line-height: 1.05; letter-spacing: -.055em; }
.assignment-lead { max-width: 74%; margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.45; }
.assignment-lead.math-equation { margin-top: .85rem; color: var(--navy); font-size: 1.7rem; font-weight: 800; letter-spacing: -.04em; }
.assignment-line { display: block; height: .48rem; margin-top: .72rem; border-radius: 99px; background: #e7edf0; }
.assignment-line.long { width: 78%; margin-top: 1.35rem; }
.assignment-line.medium { width: 64%; }
.assignment-line.short { width: 43%; }
.assignment-highlight { display: inline-block; margin-top: 1.3rem; padding: .4rem .55rem; color: var(--green); border-radius: .45rem; background: var(--mint); font-size: .7rem; font-weight: 800; }
.found-card { position: absolute; z-index: 3; top: 1rem; right: 1.2rem; left: 1.2rem; display: flex; align-items: center; gap: .65rem; padding: .65rem .8rem; border: 1px solid rgba(20, 134, 106, .2); border-radius: .85rem; background: rgba(239, 252, 245, .96); box-shadow: 0 9px 20px rgba(20, 134, 106, .13); animation: found-pop 3.8s ease-in-out infinite; }
.found-icon { display: grid; flex: 0 0 auto; width: 1.75rem; height: 1.75rem; place-items: center; color: var(--white); border-radius: 50%; background: var(--green); font-weight: 900; }
.found-card strong, .found-card small { display: block; }
.found-card strong { color: var(--navy); font-size: .76rem; }
.found-card small { margin-top: .12rem; color: var(--muted); font-size: .63rem; }
.story-assistant-shape { position: absolute; z-index: 2; top: 5rem; right: 1.45rem; width: 5.7rem; height: 5.3rem; border-radius: 44% 56% 52% 48% / 48% 42% 58% 52%; background: linear-gradient(145deg, #2db477 15%, #c8d72a 100%); box-shadow: 0 14px 24px rgba(38, 163, 111, .18); animation: float 5s ease-in-out infinite; }
.story-assistant-shape::before { position: absolute; inset: 1.25rem 1.3rem; border-radius: .9rem; background: rgba(255, 255, 255, .93); content: ""; }
.story-assistant-shape span::before, .story-assistant-shape span::after { position: absolute; z-index: 1; top: 2.35rem; width: .4rem; height: .62rem; border-radius: 999px; background: var(--navy); content: ""; }
.story-assistant-shape span::before { left: 2.32rem; }
.story-assistant-shape span::after { left: 3.45rem; }
.extension-panel { position: relative; height: 100%; min-height: 21rem; padding: 1.15rem; border: 1px solid rgba(15, 81, 50, .14); border-radius: 1.1rem; background: rgba(248, 247, 244, .95); box-shadow: 0 14px 32px rgba(31, 46, 39, .1); }
.panel-topline { display: flex; align-items: center; justify-content: space-between; color: #1f2e27; }
.panel-brand { display: inline-flex; align-items: center; gap: .45rem; }
.panel-mark { display: grid; width: 1.55rem; height: 1.55rem; place-items: center; color: var(--white); border-radius: .5rem; background: var(--green); font-size: .75rem; }
.panel-brand strong { font-size: .84rem; letter-spacing: -.03em; }
.panel-menu { color: var(--muted); letter-spacing: .12em; }
.panel-status { display: flex; align-items: center; gap: .5rem; margin-top: 1.1rem; padding: .65rem .7rem; color: var(--green); border-radius: .7rem; background: var(--mint); font-size: .71rem; }
.panel-status > span { display: grid; width: 1.2rem; height: 1.2rem; place-items: center; color: var(--white); border-radius: 50%; background: var(--green); font-size: .7rem; }
.panel-bubble { display: grid; gap: .25rem; max-width: 88%; margin-top: 1.25rem; padding: .8rem .9rem; border-radius: .9rem .9rem .9rem .2rem; background: var(--white); box-shadow: 0 6px 18px rgba(31, 46, 39, .06); }
.panel-bubble strong { color: var(--navy); font-size: .8rem; }
.panel-bubble small { color: var(--muted); font-size: .68rem; }
.student-question { display: flex; align-items: center; gap: .3rem; margin-top: 1.1rem; padding: .8rem .85rem; color: var(--ink); border: 1px solid rgba(79, 124, 168, .3); border-radius: .9rem; background: var(--white); font-size: .76rem; }
.student-question i { width: 1px; height: 1rem; background: var(--green); animation: caret-blink 1s step-end infinite; }
.story-send { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: .6rem; padding: .7rem .85rem; color: var(--white); border: 0; border-radius: 999px; background: var(--green); cursor: pointer; font-size: .76rem; font-weight: 800; box-shadow: 0 8px 16px rgba(15, 81, 50, .18); }
.story-send:hover, .story-send:focus-visible { background: #0b432a; }
.choices-panel { padding-bottom: .8rem; }
.choices-panel .panel-bubble { margin-top: 1.3rem; }
.story-choices { display: grid; gap: .48rem; margin-top: .85rem; }
.story-choice { display: grid; grid-template-columns: 1.45rem 1fr auto; align-items: center; gap: .45rem; padding: .58rem .65rem; color: var(--ink); border: 1px solid rgba(31, 46, 39, .1); border-radius: .7rem; background: var(--white); cursor: pointer; font-size: .68rem; font-weight: 800; text-align: left; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.story-choice:hover, .story-choice:focus-visible { border-color: var(--green); box-shadow: 0 7px 16px rgba(15, 81, 50, .1); transform: translateX(3px); }
.story-choice.selected { border-color: var(--green); background: var(--mint); }
.story-choice > span { display: grid; width: 1.35rem; height: 1.35rem; place-items: center; color: var(--green); border-radius: .4rem; background: var(--mint); font-size: .7rem; }
.story-choice:nth-child(2) > span { color: #6850aa; background: #ece7ff; }
.story-choice:nth-child(3) > span { color: #926b13; background: #fff2c8; }
.story-choice:nth-child(4) > span { color: #2877a3; background: #ddf0fa; }
.story-choice b { color: var(--green); font-size: .85rem; }
.story-pointer { position: absolute; z-index: 8; top: 54%; left: 33%; width: 2.3rem; height: 2.75rem; pointer-events: none; filter: drop-shadow(0 4px 2px rgba(255, 255, 255, .95)) drop-shadow(0 5px 4px rgba(14, 36, 79, .2)); transition: top .65s cubic-bezier(.22, 1, .36, 1), left .65s cubic-bezier(.22, 1, .36, 1); animation: pointer-float 1.7s ease-in-out infinite; }
.story-pointer svg { display: block; width: 100%; height: 100%; overflow: visible; }
.story-pointer path { fill: var(--white); stroke: var(--navy); stroke-linejoin: round; stroke-width: 2.25; }
.story-pointer i { position: absolute; left: 50%; top: 50%; width: .6rem; height: .6rem; border: 2px solid rgba(20, 134, 106, .5); border-radius: 50%; opacity: 0; transform: translate(-50%, -50%) scale(.4); }
.story-viewport[data-state="detect"] .story-pointer { top: 71%; left: 80%; }
.story-viewport[data-state="ask"] .story-pointer { top: 78%; left: 78%; animation: pointer-click 1.1s ease-in-out 1; }
.story-viewport[data-state="choices"] .story-pointer { top: 35%; left: 78%; animation: pointer-float 1.7s ease-in-out infinite; }
.story-viewport[data-state="ask"] .story-pointer i { animation: click-ring 1.1s ease-out 1; }
.story-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem .2rem .05rem; color: var(--muted); font-size: .72rem; font-weight: 800; }
.story-steps { display: inline-flex; gap: .35rem; }
.story-steps i { width: .42rem; height: .42rem; border-radius: 50%; background: #d5e4dc; transition: width .3s ease, background .3s ease; }
.story-steps i.active { width: 1.15rem; border-radius: 99px; background: var(--green); }
@keyframes found-pop { 0%, 100% { transform: translateY(0); } 12%, 24% { transform: translateY(-3px); } 34% { transform: translateY(0); } }
@keyframes caret-blink { 0%, 45% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes pointer-float { 0%, 100% { transform: translate(-50%, -50%) rotate(-8deg); } 50% { transform: translate(-50%, calc(-50% - 5px)) rotate(-3deg); } }
@keyframes pointer-click { 0%, 100% { transform: translate(-50%, -50%) rotate(-8deg) scale(1); } 45% { transform: translate(-50%, -50%) rotate(-8deg) scale(.86); } }
@keyframes click-ring { 0% { opacity: .9; transform: translate(-50%, -50%) scale(.4); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(3.2); } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(3deg); } }
@keyframes cursor-bob { 0%, 100% { transform: translate(-12%, -18%) rotate(-18deg); } 50% { transform: translate(-12%, -25%) rotate(-12deg); } }
@keyframes cursor-click { 0%, 100% { transform: translate(-12%, -18%) rotate(-18deg) scale(1); } 50% { transform: translate(-12%, -18%) rotate(-18deg) scale(.88); } }
@keyframes hint-pulse { 0%, 100% { opacity: .65; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.2); } }

.proof-strip { padding: 1.2rem 0; background: var(--navy); color: var(--white); }
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.proof-grid div { display: grid; gap: .15rem; padding: .7rem 0; }
.proof-grid strong { font-size: 1rem; }
.proof-grid span { color: #c3d0e3; font-size: .88rem; }
.home-page #sadan,
.home-page #fag,
.home-page #skoler,
.home-page #laerere,
.home-page #sikkerhed,
.home-page #faq { display: none; }
.audience-portal { padding-top: 5.25rem; padding-bottom: 5.5rem; background: #fffaf5; }
.audience-intro { max-width: 760px; }
.audience-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 2.6rem; }
.audience-card { display: flex; min-height: 17rem; flex-direction: column; padding: 1.55rem; color: var(--ink); border: 1px solid rgba(14, 36, 79, .1); border-radius: var(--radius-md); background: var(--white); box-shadow: 0 14px 32px rgba(32, 52, 90, .06); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.audience-card:hover, .audience-card:focus-visible { border-color: rgba(20, 134, 106, .38); box-shadow: 0 18px 38px rgba(32, 52, 90, .1); transform: translateY(-.3rem); }
.audience-card-primary { border-color: rgba(20, 134, 106, .25); background: var(--mint); }
.audience-card-muted { background: #fff; }
.audience-card-top { display: flex; align-items: center; gap: .85rem; min-height: 3.1rem; }
.audience-icon { display: grid; width: 3.6rem; height: 3.6rem; flex: 0 0 auto; place-items: center; color: var(--green); border: 1px solid rgba(20, 134, 106, .1); border-radius: 1rem; background: rgba(255,255,255,.78); box-shadow: 0 8px 18px rgba(20, 134, 106, .08); font-size: 1.55rem; font-weight: 900; }
.audience-label { color: var(--green); font-size: .74rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.audience-card h3 { margin: 1.25rem 0 .5rem; color: var(--navy); font-size: 1.16rem; line-height: 1.12; letter-spacing: -.035em; }
.audience-card p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.audience-card-link { display: inline-flex; align-items: center; gap: .45rem; margin-top: auto; padding-top: 1.3rem; color: var(--green); font-size: .84rem; font-weight: 850; }
.home-pilot { padding-top: 5rem; padding-bottom: 5rem; color: var(--white); background: var(--navy); }
.home-pilot-inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(22rem, 1.1fr); align-items: center; gap: 3rem; }
.home-pilot .section-heading h2 { color: var(--white); font-size: clamp(2.2rem, 3.8vw, 3.6rem); }
.home-pilot .section-heading > p:not(.eyebrow) { color: #c8d4e5; }
.home-pilot .eyebrow { color: #8be1bc; }.home-pilot .eyebrow-dot { background: #8be1bc; box-shadow: 0 0 0 .28rem rgba(139, 225, 188, .15); }
.home-pilot .button { margin-top: 1rem; color: var(--navy); background: var(--white); }
.home-pilot .button:hover, .home-pilot .button:focus-visible { color: var(--white); background: var(--green); }
.home-pilot-steps { display: grid; gap: .75rem; padding: 0; margin: 0; list-style: none; }
.home-pilot-steps li { display: flex; align-items: flex-start; gap: .9rem; padding: 1rem 1.1rem; border: 1px solid rgba(255,255,255,.16); border-radius: 1rem; background: rgba(255,255,255,.07); }
.home-pilot-steps li > span { display: grid; width: 2.2rem; height: 2.2rem; flex: 0 0 auto; place-items: center; color: var(--navy); border-radius: .7rem; background: #8be1bc; font-size: .75rem; font-weight: 900; }
.home-pilot-steps strong { display: block; color: var(--white); line-height: 1.2; }.home-pilot-steps p { margin: .3rem 0 0; color: #c8d4e5; font-size: .84rem; line-height: 1.4; }

.section-intro { max-width: 690px; margin-bottom: 2.6rem; }
.section-intro h2 { max-width: 650px; margin: 0; color: var(--navy); font-size: clamp(2.3rem, 4vw, 4rem); line-height: .98; letter-spacing: -.07em; }
.section-intro > p:not(.eyebrow) { max-width: 590px; margin: 1.2rem 0 0; color: var(--muted); font-size: 1.08rem; }
.student-journey { display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; }
.journey-step { position: relative; display: grid; align-content: start; min-height: 16rem; padding: 1.35rem; overflow: hidden; border-radius: var(--radius-md); }
.journey-step::after { position: absolute; right: -2.5rem; bottom: -3.5rem; width: 9rem; height: 9rem; border-radius: 50%; background: rgba(255,255,255,.45); content: ""; }
.journey-step-green { background: var(--mint); }
.journey-step-blue { background: var(--blue-soft); }
.journey-step-peach { background: #fee8df; }
.journey-step-yellow { background: #fff2c8; }
.journey-number { display: inline-grid; width: 2.2rem; height: 2.2rem; place-items: center; color: var(--green); border-radius: .75rem; background: rgba(255,255,255,.75); font-size: .76rem; font-weight: 900; }
.journey-step h3 { max-width: 15rem; margin: 1.25rem 0 .5rem; color: var(--navy); font-size: 1.2rem; line-height: 1.05; letter-spacing: -.04em; }
.journey-kicker { margin: 1.05rem 0 0; color: var(--green); font-size: .72rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.journey-step > div > p:last-child { position: relative; z-index: 1; max-width: 16rem; margin: 0; color: var(--muted); font-size: .88rem; }
.journey-arrow { position: absolute; z-index: 1; right: 1.25rem; top: 1.35rem; color: var(--green); font-size: 1.35rem; font-weight: 900; }
.student-perspective-note { display: flex; align-items: center; gap: .6rem; margin-top: 1.35rem; color: var(--muted); font-size: .9rem; }
.student-perspective-note > span { color: var(--yellow); font-size: 1.2rem; }
.student-perspective-note strong { color: var(--navy); }
.intro-action { margin-top: 1.5rem; }

.try-grid { display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: 5rem; }
.teacher-grid { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 5rem; }
.teacher-page-heading { max-width: 760px; }
.teacher-workspace { margin-top: 3.2rem; padding: clamp(1.15rem, 2.5vw, 2rem); border: 1px solid rgba(14, 36, 79, .09); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .9); box-shadow: var(--shadow); }
.teacher-workspace-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; }
.teacher-workspace-head h2 { display: flex; align-items: baseline; gap: .5rem; margin: .3rem 0 .35rem; color: var(--navy); font-size: clamp(1.5rem, 3vw, 2.35rem); letter-spacing: -.06em; }
.teacher-workspace-head p { max-width: 41rem; margin: 0; color: var(--muted); font-size: .9rem; }
.teacher-workspace-divider { color: var(--mint); font-weight: 500; }
.teacher-workspace-actions { display: grid; justify-items: end; gap: .75rem; }
.teacher-class-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin-top: 1.8rem; padding-top: 1rem; border-top: 1px solid rgba(14, 36, 79, .08); }
.teacher-class-tab { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem .85rem; color: var(--muted); border: 1px solid rgba(14, 36, 79, .08); border-radius: .8rem; background: var(--white); cursor: pointer; font: inherit; text-align: left; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.teacher-class-tab:hover, .teacher-class-tab:focus-visible { border-color: rgba(20, 134, 106, .4); transform: translateY(-1px); }
.teacher-class-tab.active { color: var(--green); border-color: rgba(20, 134, 106, .4); background: #f1fbf6; box-shadow: 0 6px 14px rgba(20, 134, 106, .07); }
.teacher-class-tab strong { color: var(--navy); font-size: .86rem; }
.teacher-class-tab span { font-size: .68rem; }
.teacher-tools { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.2rem 0 0; }
.teacher-search { display: flex; align-items: center; gap: .55rem; min-width: min(22rem, 100%); padding: .65rem .8rem; color: var(--muted); border: 1px solid rgba(14, 36, 79, .1); border-radius: .75rem; background: var(--white); }
.teacher-search input { width: 100%; padding: 0; color: var(--navy); border: 0; outline: 0; background: transparent; font: inherit; font-size: .76rem; }
.teacher-search input::placeholder { color: #93a0af; }
.teacher-filters { display: inline-flex; gap: .2rem; padding: .2rem; border-radius: .75rem; background: #f1f5f3; }
.teacher-filter { padding: .42rem .65rem; color: var(--muted); border: 0; border-radius: .55rem; background: transparent; cursor: pointer; font-size: .68rem; font-weight: 800; }
.teacher-filter:hover, .teacher-filter:focus-visible { color: var(--navy); }
.teacher-filter.active { color: var(--green); background: var(--white); box-shadow: 0 3px 9px rgba(32, 52, 90, .08); }
.teacher-workspace .teacher-metrics { grid-template-columns: repeat(4, 1fr); margin: 1.45rem 0; }
.teacher-dashboard-columns { display: grid; grid-template-columns: 1.05fr .95fr; gap: 1rem; align-items: start; }
.teacher-focus-list { min-width: 0; }
.teacher-dashboard-columns .teacher-detail { margin-top: 0; }
.teacher-detail-link { display: inline-flex; align-items: center; justify-content: space-between; gap: .7rem; margin-top: .35rem; padding-top: .7rem; color: var(--green); border-top: 1px solid rgba(14, 36, 79, .08); font-size: .72rem; font-weight: 850; text-decoration: none; }
.teacher-detail-link:hover, .teacher-detail-link:focus-visible { color: var(--navy); }
.teacher-list-item[hidden] { display: none; }
.teacher-overview-bottom { display: grid; grid-template-columns: 1.1fr .9fr; gap: .75rem; margin-top: 1rem; }
.teacher-signal-card, .teacher-privacy-card { display: flex; align-items: flex-start; gap: .7rem; padding: .9rem; border: 1px solid rgba(14, 36, 79, .07); border-radius: .85rem; background: #f8fbfa; }
.teacher-bottom-icon { display: grid; flex: 0 0 auto; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: .55rem; font-weight: 900; }
.teacher-bottom-icon.green { color: var(--green); background: var(--mint); }
.teacher-bottom-icon.blue { color: #2877a3; background: #ddf0fa; }
.teacher-signal-card > div, .teacher-privacy-card > div { display: grid; gap: .18rem; min-width: 0; }
.teacher-signal-card small, .teacher-privacy-card small { color: var(--green); font-size: .62rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.teacher-signal-card strong, .teacher-privacy-card strong { color: var(--navy); font-size: .75rem; line-height: 1.25; }
.teacher-signal-card p, .teacher-privacy-card p { margin: 0; color: var(--muted); font-size: .67rem; line-height: 1.35; }
.teacher-signal-time { margin-left: auto; color: var(--muted); font-size: .62rem; white-space: nowrap; }
.teacher-points { display: grid; gap: .7rem; margin-top: 1.7rem; color: var(--navy); font-size: .9rem; font-weight: 750; }
.teacher-points span { display: flex; align-items: center; gap: .65rem; }
.teacher-points b { display: inline-grid; width: 1.55rem; height: 1.55rem; place-items: center; color: var(--white); border-radius: 50%; background: var(--green); font-size: .75rem; }
.teacher-dashboard { padding: 1.5rem; border: 1px solid rgba(14, 36, 79, .08); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .9); box-shadow: var(--shadow); }
.teacher-dashboard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.teacher-dashboard-top strong, .dashboard-kicker { display: block; }
.dashboard-kicker { color: var(--green); font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.teacher-dashboard-top strong { margin-top: .2rem; color: var(--navy); font-size: 1.25rem; letter-spacing: -.04em; }
.teacher-dashboard-actions { display: grid; justify-items: end; gap: .6rem; }
.teacher-periods { display: inline-flex; padding: .2rem; border-radius: .7rem; background: #f1f5f3; }
.teacher-period { padding: .38rem .55rem; color: var(--muted); border: 0; border-radius: .5rem; background: transparent; cursor: pointer; font-size: .66rem; font-weight: 800; }
.teacher-period:hover, .teacher-period:focus-visible { color: var(--navy); }
.teacher-period.active { color: var(--green); background: var(--white); box-shadow: 0 3px 9px rgba(32, 52, 90, .08); }
.concept-pill { padding: .4rem .6rem; color: var(--green); border-radius: 999px; background: var(--mint); font-size: .68rem; font-weight: 800; white-space: nowrap; }
.teacher-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; margin: 1.5rem 0; }
.teacher-metrics div { display: grid; gap: .15rem; padding: .85rem; border-radius: .9rem; background: #f8fbfa; }
.teacher-metrics small { color: var(--muted); font-size: .68rem; }
.teacher-metrics strong { color: var(--navy); font-size: 1.65rem; line-height: 1; }
.teacher-metrics span { color: var(--muted); font-size: .66rem; line-height: 1.25; }
.teacher-list-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: .6rem; color: var(--navy); font-size: .82rem; }
.teacher-list-heading span { color: var(--muted); font-size: .68rem; }
.teacher-list { display: grid; gap: .55rem; }
.teacher-list > div, .teacher-list > button { display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; gap: .65rem; padding: .7rem; border: 1px solid rgba(14, 36, 79, .07); border-radius: .8rem; background: var(--white); }
.teacher-list > button { width: 100%; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.teacher-list > button:hover, .teacher-list > button:focus-visible { border-color: rgba(20, 134, 106, .35); box-shadow: 0 8px 18px rgba(32, 52, 90, .07); transform: translateY(-1px); }
.teacher-list > button.active { border-color: rgba(20, 134, 106, .4); background: #f1fbf6; box-shadow: 0 8px 18px rgba(20, 134, 106, .08); }
.teacher-list-icon { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .6rem; font-weight: 900; }
.teacher-list-icon.green { color: var(--green); background: var(--mint); }
.teacher-list-icon.blue { color: #2877a3; background: #ddf0fa; }
.teacher-list-icon.peach { color: #be624c; background: #fee8df; }
.teacher-list p { display: grid; gap: .1rem; margin: 0; }
.teacher-list p strong { color: var(--navy); font-size: .78rem; }
.teacher-list p small { color: var(--muted); font-size: .67rem; }
.teacher-list em { color: var(--green); font-size: .66rem; font-style: normal; font-weight: 800; white-space: nowrap; }
.teacher-dashboard-note { margin: 1rem 0 0; color: var(--muted); font-size: .7rem; text-align: right; }
.teacher-detail { display: grid; gap: .55rem; margin-top: .8rem; padding: 1rem; border-radius: .9rem; background: #f8fbfa; }
.teacher-detail-top { display: flex; align-items: center; gap: .65rem; }
.teacher-detail-icon { display: grid; width: 1.9rem; height: 1.9rem; place-items: center; color: var(--green); border-radius: .55rem; background: var(--mint); font-weight: 900; }
.teacher-detail h3 { margin: 0; color: var(--navy); font-size: .85rem; }
.teacher-detail p { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.4; }
.teacher-detail-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--navy); font-size: .68rem; }
.teacher-detail-bar i { display: block; flex: 1; height: .45rem; overflow: hidden; border-radius: 999px; background: #dcece5; }
.teacher-detail-bar i::after { display: block; width: var(--detail-width, 60%); height: 100%; border-radius: inherit; background: var(--green); content: ""; }
.teacher-next-step { display: grid; gap: .2rem; padding-top: .65rem; border-top: 1px solid rgba(14, 36, 79, .08); }
.teacher-next-step small { color: var(--green); font-size: .64rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.teacher-next-step strong { color: var(--navy); font-size: .76rem; line-height: 1.35; }
.try-principles { display: grid; gap: .65rem; margin-top: 1.7rem; color: var(--navy); font-size: .9rem; font-weight: 750; }
.try-principles span { display: flex; align-items: center; gap: .7rem; }
.try-principles b { display: inline-grid; width: 1.9rem; height: 1.9rem; place-items: center; color: var(--green); border-radius: .6rem; background: var(--mint); font-size: .7rem; }
.try-demo { padding: 1rem; border: 1px solid rgba(14, 36, 79, .08); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .82); box-shadow: var(--shadow); }
.try-demo-top { display: flex; align-items: center; gap: .65rem; padding: .3rem .35rem .9rem; color: var(--muted); font-size: .7rem; }
.try-demo-top > span { display: inline-flex; gap: .25rem; }
.try-demo-top > span i { width: .5rem; height: .5rem; border-radius: 50%; background: #e8b09f; }
.try-demo-top > span i:nth-child(2) { background: var(--yellow); }
.try-demo-top > span i:nth-child(3) { background: #8bd4ad; }
.try-demo-top strong { flex: 1; color: var(--navy); font-size: .75rem; }
.try-demo-top em { color: var(--green); font-size: .66rem; font-style: normal; font-weight: 800; }
.try-panel { min-height: 20rem; padding: 1.55rem; border: 1px solid rgba(15, 81, 50, .13); border-radius: 1.2rem; background: var(--surface, #f8f7f4); box-shadow: 0 14px 32px rgba(31, 46, 39, .08); }
.try-state-heading { display: flex; align-items: center; gap: .8rem; }
.try-state-number { display: grid; flex: 0 0 auto; width: 2.4rem; height: 2.4rem; place-items: center; color: var(--white); border-radius: .8rem; background: var(--green); font-weight: 900; }
.try-state-kicker { display: block; color: var(--green); font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.try-state-title { margin: .15rem 0 0; color: var(--navy); font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.05; letter-spacing: -.05em; }
.try-state-copy { max-width: 500px; margin: 1.2rem 0 0; color: var(--muted); font-size: .95rem; }
.try-equation { display: inline-flex; margin-top: 1.2rem; padding: .7rem .95rem; color: var(--navy); border: 1px solid rgba(79, 124, 168, .2); border-radius: .85rem; background: var(--white); font-size: 1.35rem; font-weight: 850; letter-spacing: -.04em; }
.try-option-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; margin-top: 1.4rem; }
.try-option { display: flex; align-items: center; justify-content: space-between; gap: .7rem; min-height: 3rem; padding: .7rem .85rem; color: var(--ink); border: 1px solid rgba(31, 46, 39, .1); border-radius: .85rem; background: var(--white); cursor: pointer; font-size: .82rem; font-weight: 800; text-align: left; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.try-option:hover, .try-option:focus-visible { border-color: var(--green); box-shadow: 0 8px 16px rgba(15, 81, 50, .1); transform: translateY(-2px); }
.try-option span { display: inline-grid; width: 1.45rem; height: 1.45rem; place-items: center; color: var(--green); border-radius: .45rem; background: var(--mint); font-size: .72rem; }
.try-option b { color: var(--green); font-size: 1rem; }
.try-step-controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; margin-top: .8rem; }
.try-step-control { display: grid; gap: .15rem; padding: .65rem .45rem; color: var(--muted); border: 1px solid transparent; border-radius: .7rem; background: transparent; cursor: pointer; font-size: .68rem; font-weight: 800; text-align: left; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.try-step-control span { color: #95a4b8; font-size: .63rem; }
.try-step-control:hover, .try-step-control:focus-visible { color: var(--navy); border-color: rgba(20, 134, 106, .18); background: rgba(223, 246, 235, .55); }
.try-step-control.active { color: var(--navy); border-color: rgba(20, 134, 106, .22); background: var(--mint); }
.try-step-control.active span { color: var(--green); }

.section { padding: 7rem 0; }
.section-light { background: var(--cream); }
.section-cream { background: #fff3e9; }
.two-column { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 5rem; }
.section-heading h2, .contact-card h2 { font-size: clamp(2.3rem, 4vw, 4rem); }
.section-heading > p:not(.eyebrow), .municipality-copy > p:not(.eyebrow) { max-width: 570px; margin: 1.4rem 0; color: var(--muted); font-size: 1.1rem; }
.text-link { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1rem; color: var(--green); font-weight: 800; }
.text-link:hover, .text-link:focus-visible { text-decoration: underline; }
.feature-stack { display: grid; gap: 1rem; }
.feature-card { display: grid; grid-template-columns: 3.3rem 1fr; gap: 1rem; padding: 1.35rem; border-radius: var(--radius-md); }
.feature-card h3 { margin: .1rem 0 .25rem; color: var(--navy); font-size: 1.15rem; }
.feature-card p { margin: 0; color: var(--muted); font-size: .92rem; }
.feature-icon { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: 1rem; color: var(--green); background: rgba(255,255,255,.78); font-size: 1.45rem; font-weight: 800; }
.feature-card-green { background: var(--mint); }
.feature-card-peach { background: #fee8df; }
.feature-card-blue { background: var(--blue-soft); }
.portal-note { display: flex; align-items: flex-start; gap: .8rem; max-width: 560px; margin-top: 1.8rem; padding: 1rem; border: 1px solid rgba(20, 134, 106, .12); border-radius: 1rem; background: rgba(223, 246, 235, .55); }
.portal-note-icon { display: grid; flex: 0 0 auto; width: 2rem; height: 2rem; place-items: center; color: var(--green); border-radius: .65rem; background: var(--white); font-weight: 900; }
.portal-note strong { display: block; color: var(--navy); font-size: .86rem; }
.portal-note p { margin: .2rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.4; }

.municipality-panel { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 5rem; }
.municipality-points { display: grid; gap: .85rem; margin-top: 1.8rem; color: var(--ink); font-weight: 700; }
.municipality-points span { display: flex; align-items: center; gap: .75rem; }
.municipality-points b { display: inline-grid; width: 2rem; height: 2rem; place-items: center; color: var(--green); border-radius: .65rem; background: var(--mint); font-size: .75rem; }
.mini-dashboard { padding: 1.5rem; border: 1px solid rgba(14, 36, 79, .07); border-radius: var(--radius-lg); background: rgba(255,255,255,.9); box-shadow: var(--shadow); }
.mini-dashboard-top { display: flex; justify-content: space-between; gap: 1rem; align-items: center; color: var(--navy); font-size: .9rem; font-weight: 800; }
.status-pill { padding: .42rem .65rem; color: var(--green); border-radius: 999px; background: var(--mint); font-size: .72rem; }
.mini-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; margin: 1.5rem 0; }
.mini-metrics span { display: grid; gap: .15rem; padding: 1rem; border-radius: 1rem; background: #f8fbfa; }
.mini-metrics small { color: var(--muted); font-size: .76rem; }
.mini-metrics strong { color: var(--navy); font-size: 1.8rem; line-height: 1; }
.journey-bar { display: grid; grid-template-columns: 6.3rem 1fr 2.7rem; align-items: center; gap: .8rem; margin-top: 1rem; color: var(--muted); font-size: .8rem; }
.journey-bar b { color: var(--navy); text-align: right; }
.journey-track { height: .75rem; overflow: hidden; border-radius: 999px; background: #e9f1ee; }
.journey-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #84dab1, var(--green)); }
.dashboard-footnote { margin: 1.5rem 0 0; color: var(--muted); font-size: .78rem; text-align: right; }

.safety-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 5rem; }
.safety-illustration { position: relative; min-height: 18rem; border-radius: 2rem; background: linear-gradient(145deg, #e0f6e9, #fff0dc); }
.shield { position: absolute; left: 50%; top: 50%; display: grid; width: 8rem; height: 9rem; place-items: center; color: var(--white); background: var(--green); clip-path: polygon(50% 0, 91% 15%, 84% 68%, 50% 100%, 16% 68%, 9% 15%); font-size: 3rem; transform: translate(-50%, -50%); box-shadow: 0 0 0 1rem rgba(255,255,255,.55); }
.safety-spark { position: absolute; color: var(--yellow); font-size: 2rem; }
.spark-one { left: 17%; top: 22%; }
.spark-two { right: 18%; bottom: 22%; color: var(--coral); }
.safety-list { display: grid; gap: .7rem; margin-top: 1.6rem; color: var(--navy); font-weight: 750; }
.safety-list b { display: inline-grid; width: 1.55rem; height: 1.55rem; margin-right: .5rem; place-items: center; color: var(--white); border-radius: 50%; background: var(--green); font-size: .8rem; }

.faq-grid { display: grid; grid-template-columns: .85fr 1.15fr; align-items: start; gap: 5rem; }
.faq-list { display: grid; gap: .7rem; }
.faq-list details { border: 1px solid rgba(14, 36, 79, .09); border-radius: 1rem; background: rgba(255, 255, 255, .82); transition: border-color .2s ease, box-shadow .2s ease; }
.faq-list details[open] { border-color: rgba(20, 134, 106, .28); box-shadow: 0 12px 28px rgba(32, 52, 90, .06); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.25rem; color: var(--navy); cursor: pointer; font-weight: 800; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { color: var(--green); content: "+"; font-size: 1.35rem; line-height: 1; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { max-width: 650px; margin: -.3rem 1.25rem 1.2rem; color: var(--muted); font-size: .94rem; }

.contact-section { padding-top: 2rem; padding-bottom: 7rem; background: var(--cream); }
.contact-card { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(20rem, .88fr); align-items: center; gap: clamp(2.5rem, 6vw, 5rem); overflow: hidden; isolation: isolate; padding: clamp(2.5rem, 5vw, 4.5rem); border-radius: var(--radius-lg); background: var(--navy); box-shadow: 0 25px 60px rgba(14, 36, 79, .2); }
.contact-card::before { position: absolute; left: -9rem; bottom: -14rem; width: 25rem; height: 25rem; border-radius: 50%; background: rgba(91, 208, 163, .1); content: ""; }
.contact-card::after { position: absolute; left: -2rem; bottom: -3rem; width: min(42%, 34rem); height: 8rem; border: .35rem solid rgba(139, 225, 188, .72); border-left: 0; border-bottom: 0; border-radius: 50%; content: ""; opacity: .7; transform: rotate(-10deg); }
.contact-card > * { position: relative; z-index: 1; }
.contact-card h2 { color: var(--white); font-size: clamp(2rem, 3.5vw, 3.35rem); }
.contact-card p:not(.eyebrow) { max-width: 560px; margin: 1rem 0 0; color: #c8d4e5; }
.contact-card .eyebrow { color: #8be1bc; }
.contact-card .eyebrow-dot { background: #8be1bc; box-shadow: 0 0 0 .28rem rgba(139, 225, 188, .15); }
.contact-card .button { flex: 0 0 auto; color: var(--navy); background: var(--white); }
.contact-card .button:hover, .contact-card .button:focus-visible { color: var(--white); background: var(--green); }
.page-hero { padding: 5rem 0 4rem; background: var(--peach); }
.page-hero h1 { max-width: 850px; margin: 0; color: var(--navy); font-size: clamp(2.8rem, 5.4vw, 4.8rem); line-height: 1.04; letter-spacing: -.08em; }
.page-hero-lead { max-width: 680px; margin: 1.5rem 0 0; color: #405271; font-size: 1.15rem; }
.page-content { padding: 5rem 0 7rem; }
.page-content .section-heading { max-width: 760px; }
.page-content .section-heading h2 { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.05; }
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 3rem; }
.info-card { min-height: 14rem; padding: 1.5rem; border: 1px solid rgba(14, 36, 79, .08); border-radius: var(--radius-md); background: var(--white); box-shadow: 0 14px 32px rgba(32, 52, 90, .06); }
.info-card h3 { margin: 1.1rem 0 .45rem; color: var(--navy); font-size: 1.15rem; letter-spacing: -.035em; }
.info-card p { margin: 0; color: var(--muted); font-size: .94rem; }
.info-card-icon { display: grid; width: 2.4rem; height: 2.4rem; place-items: center; color: var(--green); border-radius: .75rem; background: var(--mint); font-weight: 900; }
.page-link-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.page-callout { margin-top: 3rem; padding: 1.5rem 1.7rem; border-left: 4px solid var(--green); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--mint); }
.page-callout strong { color: var(--navy); }
.page-callout p { margin: .35rem 0 0; color: var(--ink); }
.page-content .teacher-grid { margin-top: 0; }
.pilot-page .page-hero { padding: 4.25rem 0 3.5rem; }
.pilot-page .page-content,
.schools-page .page-content { padding: 4.25rem 0 5.25rem; }
.pilot-page .page-content .section-heading h2,
.schools-page .page-content .section-heading h2 { max-width: 720px; font-size: clamp(2rem, 3.25vw, 3.15rem); }
.pilot-page .page-content + .page-content { padding-top: 4.25rem; }
.classroom-mockup-section { padding-top: 5rem; padding-bottom: 5rem; }
.classroom-mockup-card { margin: 0; padding: .75rem; border: 1px solid rgba(14, 36, 79, .08); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow); transform: rotate(1deg); }
.classroom-mockup-card img { display: block; width: 100%; height: auto; border-radius: calc(var(--radius-lg) - .55rem); }
.classroom-mockup-card figcaption { padding: .75rem .35rem .15rem; color: var(--muted); font-size: .72rem; font-weight: 700; text-align: center; }
.classroom-section { padding: 5rem 0 6rem; background: var(--blue-soft); }
.classroom-copy { max-width: 740px; }
.classroom-copy h2 { margin: 0; color: var(--navy); font-size: clamp(2rem, 4vw, 3.5rem); line-height: .98; letter-spacing: -.07em; }
.classroom-copy p:not(.eyebrow) { margin: 1.2rem 0 0; color: var(--muted); font-size: 1.05rem; }
.classroom-visual { margin-top: 2.8rem; padding: 1rem; border: 1px solid rgba(14, 36, 79, .08); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .82); box-shadow: var(--shadow); }
.classroom-stage { position: relative; min-height: 31rem; overflow: hidden; border: 1px solid rgba(14, 36, 79, .07); border-radius: 1.35rem; background: linear-gradient(160deg, #fffaf4 0%, #f2f8f4 55%, #e7f1fb 100%); }
.classroom-stage::after { position: absolute; right: -5%; bottom: -12%; left: -5%; height: 42%; border-top: 1px solid rgba(14, 36, 79, .08); background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .32) 0, rgba(255, 255, 255, .32) 6rem, rgba(214, 229, 225, .2) 6rem, rgba(214, 229, 225, .2) 6.1rem); content: ""; transform: perspective(18rem) rotateX(52deg); transform-origin: top; }
.classroom-board { position: absolute; z-index: 1; top: 1.2rem; left: 50%; display: grid; gap: .2rem; width: 17rem; padding: .8rem 1rem; border: .6rem solid #d7b495; border-radius: .7rem; background: #274f56; box-shadow: 0 8px 18px rgba(32, 52, 90, .12); transform: translateX(-50%); }
.classroom-board small { color: #bde6d1; font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.classroom-board strong { color: var(--white); font-size: 1.2rem; letter-spacing: .02em; }
.classroom-shelf { position: absolute; z-index: 1; right: 2rem; top: 2rem; display: flex; align-items: end; gap: .35rem; width: 6rem; height: 3.3rem; padding: .45rem; border-bottom: .35rem solid #c89f7f; background: rgba(255, 255, 255, .34); }
.classroom-shelf i { width: .85rem; height: 1.8rem; border-radius: .18rem .18rem 0 0; background: #f0b269; }
.classroom-shelf i:nth-child(2) { height: 2.35rem; background: #8ccdb1; }
.classroom-shelf i:nth-child(3) { height: 1.55rem; background: #8faed0; }
.classroom-queue-label { position: absolute; z-index: 2; left: 1.8rem; top: 8.3rem; color: var(--navy); font-size: .78rem; font-weight: 850; }
.classroom-queue-label::after { display: block; width: 2.8rem; height: .2rem; margin-top: .35rem; border-radius: 999px; background: var(--green); content: ""; }
.classroom-queue-line { position: absolute; z-index: 1; left: 7%; right: 25%; bottom: 6.8rem; border-top: 2px dashed rgba(20, 134, 106, .28); }
.classroom-queue-line::before { position: absolute; left: 0; top: -.45rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 .3rem rgba(20, 134, 106, .12); content: ""; }
.classroom-student { position: absolute; z-index: 3; bottom: 6.95rem; display: grid; justify-items: center; gap: .2rem; color: var(--navy); font-size: .68rem; font-weight: 800; }
.classroom-student strong { display: block; }
.classroom-student-one { left: 53%; animation: classroom-student-one 8s ease-in-out infinite; }
.classroom-student-two { left: 39%; animation: classroom-student-two 8s ease-in-out infinite; }
.classroom-student-three { left: 25%; animation: classroom-student-three 8s ease-in-out infinite; }
.classroom-student-four { left: 11%; animation: classroom-student-four 8s ease-in-out infinite; }
.student-person { position: relative; display: block; width: 2.8rem; height: 3.6rem; }
.student-person i { position: absolute; z-index: 1; top: 0; left: .75rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #d99970; }
.student-person b { position: absolute; left: .4rem; bottom: .1rem; width: 2rem; height: 2.15rem; border-radius: 1rem 1rem .45rem .45rem; background: var(--green); box-shadow: -.35rem 1.95rem 0 -.55rem var(--navy), .35rem 1.95rem 0 -.55rem var(--navy); }
.classroom-student-two .student-person b { background: #f28b72; }
.classroom-student-three .student-person b { background: #7faad4; }
.classroom-student-four .student-person b { background: #e2b94d; }
.classroom-student-two .student-person i { background: #8f5a43; }
.classroom-student-three .student-person i { background: #c57f5c; }
.classroom-student-four .student-person i { background: #5e443c; }
.classroom-teacher { position: absolute; z-index: 4; right: 4%; bottom: 1.25rem; display: grid; justify-items: center; width: 10rem; animation: teacher-breathe 3s ease-in-out infinite; }
.teacher-speech { position: absolute; right: 1.2rem; bottom: 9rem; width: 12rem; padding: .75rem .9rem; color: var(--navy); border: 1px solid rgba(14, 36, 79, .09); border-radius: 1rem 1rem 1rem .2rem; background: rgba(255, 255, 255, .95); box-shadow: 0 9px 18px rgba(32, 52, 90, .08); font-size: .68rem; font-weight: 800; animation: teacher-speech 8s ease-in-out infinite; }
.teacher-speech::after { position: absolute; bottom: -.45rem; left: 1.1rem; width: .8rem; height: .8rem; border-right: 1px solid rgba(14, 36, 79, .09); border-bottom: 1px solid rgba(14, 36, 79, .09); background: var(--white); content: ""; transform: rotate(45deg); }
.teacher-person { position: relative; display: block; width: 3.4rem; height: 4.2rem; }
.teacher-person i { position: absolute; z-index: 1; top: 0; left: .9rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #b87355; }
.teacher-person b { position: absolute; left: .35rem; bottom: .1rem; width: 2.7rem; height: 2.65rem; border-radius: 1.2rem 1.2rem .45rem .45rem; background: var(--navy); box-shadow: -.45rem 2.45rem 0 -.65rem #334c6d, .45rem 2.45rem 0 -.65rem #334c6d; }
.teacher-desk { position: relative; z-index: 2; display: block; width: 10rem; height: 2.2rem; margin-top: -.1rem; border: 1px solid rgba(14, 36, 79, .1); border-radius: .6rem .6rem 1rem 1rem; background: #c89f7f; box-shadow: 0 12px 18px rgba(32, 52, 90, .13); }
.teacher-desk::after { position: absolute; left: 1.2rem; right: 1.2rem; bottom: -.8rem; height: .8rem; border-left: 3px solid #9e785f; border-right: 3px solid #9e785f; content: ""; }
.teacher-desk span { position: absolute; left: 1rem; top: .55rem; width: 2.6rem; height: .35rem; border-radius: 99px; background: #f5e4d2; }
.teacher-desk i { position: absolute; right: 1rem; top: .5rem; width: .8rem; height: .8rem; border-radius: .18rem; background: #dff6eb; }
.classroom-chairs { position: absolute; z-index: 2; right: 25%; bottom: 3.2rem; display: flex; gap: 1.5rem; }
.classroom-chairs i { display: block; width: 2.2rem; height: 1.35rem; border: 2px solid #b7cdd1; border-radius: .35rem; background: rgba(255, 255, 255, .5); }
.classroom-caption { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .9rem; padding: .3rem .25rem 0; }
.classroom-caption strong { color: var(--navy); font-size: .78rem; }
.classroom-caption span { color: var(--muted); font-size: .67rem; }
@keyframes classroom-student-one {
  0%, 18% { left: 53%; transform: translateX(0); }
  30%, 60% { left: 66%; transform: translateX(0) scale(1.03); }
  74%, 100% { left: 53%; transform: translateX(0); }
}
@keyframes classroom-student-two {
  0%, 22% { left: 39%; }
  34%, 70% { left: 53%; }
  82%, 100% { left: 39%; }
}
@keyframes classroom-student-three {
  0%, 22% { left: 25%; }
  34%, 70% { left: 39%; }
  82%, 100% { left: 25%; }
}
@keyframes classroom-student-four {
  0%, 22% { left: 11%; }
  34%, 70% { left: 25%; }
  82%, 100% { left: 11%; }
}
@keyframes teacher-breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-.2rem); }
}
@keyframes teacher-speech {
  0%, 18% { opacity: .55; transform: translateY(.3rem) scale(.97); }
  26%, 72% { opacity: 1; transform: translateY(0) scale(1); }
  82%, 100% { opacity: .55; transform: translateY(.3rem) scale(.97); }
}

/* Læreroverblik: app-lignende koncept, inspireret af lærerens arbejdsflow. */
.teacher-dashboard-main { background: #f4f6f4; }
.teacher-app-section { padding: 2rem 1.5rem 4.5rem; }
.teacher-app-shell { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); width: min(100%, 1360px); min-height: 54rem; margin: 0 auto; overflow: hidden; border: 1px solid rgba(14, 36, 79, .1); border-radius: 1.35rem; background: var(--white); box-shadow: 0 22px 58px rgba(32, 52, 90, .12); }
.teacher-app-sidebar { display: flex; flex-direction: column; gap: 1.4rem; padding: 1.35rem 1rem; border-right: 1px solid #e5eae7; background: #fbfcfb; }
.teacher-app-brand { display: block; padding: .2rem .35rem; }
.teacher-app-brand img { display: block; width: 10.5rem; height: auto; object-fit: contain; }
.teacher-app-search { display: flex; align-items: center; gap: .45rem; padding: .58rem .65rem; color: #789083; border: 1px solid #dce5df; border-radius: .65rem; background: var(--white); }
.teacher-app-search input { width: 100%; min-width: 0; color: var(--navy); border: 0; outline: 0; background: transparent; font: inherit; font-size: .73rem; }
.teacher-app-search input::placeholder { color: #82948a; }
.teacher-app-nav { display: grid; gap: .25rem; }
.teacher-nav-item { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .68rem .75rem; color: var(--muted); border: 0; border-radius: .65rem; background: transparent; cursor: pointer; font-size: .76rem; font-weight: 750; text-align: left; }
.teacher-nav-item:hover, .teacher-nav-item:focus-visible { color: var(--navy); background: #eff6f1; }
.teacher-nav-item.active { color: var(--green); background: #e7f5ed; }
.teacher-class-list { display: grid; gap: .3rem; }
.teacher-class-list > p { margin: 0 0 .35rem; padding: 0 .65rem; color: #7a8a84; font-size: .64rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.teacher-class-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; padding: .65rem .7rem; color: var(--muted); border: 1px solid transparent; border-radius: .7rem; background: transparent; cursor: pointer; text-align: left; transition: border-color .2s ease, background .2s ease; }
.teacher-class-row:hover, .teacher-class-row:focus-visible { border-color: #d2e7da; background: var(--white); }
.teacher-class-row.active { color: var(--green); border-color: #c5e5d2; background: var(--white); box-shadow: 0 5px 12px rgba(34, 70, 52, .06); }
.teacher-class-row span { display: grid; gap: .08rem; }
.teacher-class-row strong { color: var(--navy); font-size: .78rem; }
.teacher-class-row small { color: var(--muted); font-size: .65rem; }
.teacher-class-row b { color: #8da598; font-size: 1.15rem; font-weight: 500; }
.teacher-sidebar-privacy { display: flex; align-items: flex-start; gap: .45rem; margin-top: auto; padding: .75rem; color: #557065; border-radius: .75rem; background: #edf7f0; }
.teacher-sidebar-privacy > span { display: grid; flex: 0 0 auto; width: 1.1rem; height: 1.1rem; place-items: center; color: var(--white); border-radius: 50%; background: var(--green); font-size: .62rem; font-weight: 900; }
.teacher-sidebar-privacy p { margin: 0; font-size: .64rem; line-height: 1.4; }
.teacher-sidebar-privacy strong { display: block; color: var(--green); }
.teacher-app-content { padding: clamp(1.4rem, 3vw, 2.6rem); background: #fdfefd; }
.teacher-app-kicker { margin: 0 0 .5rem; color: var(--green); font-size: .65rem; font-weight: 900; letter-spacing: .1em; }
.teacher-app-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; }
.teacher-app-header h1 { margin: 0; color: var(--navy); font-size: clamp(2rem, 3vw, 3rem); line-height: 1; letter-spacing: -.065em; }
.teacher-app-header p { margin: .6rem 0 0; color: var(--muted); font-size: .9rem; }
.teacher-app-header p strong { color: var(--navy); }
.teacher-app-actions { display: flex; align-items: center; gap: .5rem; }
.teacher-report-button { display: inline-flex; align-items: center; gap: .45rem; padding: .7rem .85rem; color: var(--white); border: 0; border-radius: .7rem; background: var(--green); cursor: pointer; font-size: .73rem; font-weight: 850; box-shadow: 0 8px 18px rgba(15, 81, 50, .16); }
.teacher-report-button:hover, .teacher-report-button:focus-visible { background: #0d6249; transform: translateY(-1px); }
.teacher-icon-button { display: grid; width: 2.4rem; height: 2.4rem; place-items: center; color: var(--muted); border: 1px solid #dce5df; border-radius: .7rem; background: var(--white); cursor: pointer; }
.teacher-icon-button:hover, .teacher-icon-button:focus-visible { color: var(--navy); border-color: #b7c9be; }
.teacher-app-notice { display: flex; align-items: flex-start; gap: .55rem; margin-top: 1.3rem; padding: .75rem .85rem; color: #4b665a; border: 1px solid #d8e9dd; border-radius: .7rem; background: #f1f8f3; }
.teacher-app-notice > span { display: grid; flex: 0 0 auto; width: 1.1rem; height: 1.1rem; place-items: center; color: var(--white); border-radius: 50%; background: var(--green); font-size: .67rem; font-weight: 800; }
.teacher-app-notice p { margin: 0; font-size: .71rem; line-height: 1.45; }
.teacher-app-notice strong { color: var(--green); }
.teacher-app-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; }
.teacher-concept-label { color: #83928b; font-size: .65rem; font-weight: 750; }
.teacher-app-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin: 1.15rem 0; }
.teacher-app-metrics article { display: grid; gap: .28rem; min-height: 6rem; padding: .95rem; border: 1px solid #e2e9e5; border-radius: .8rem; background: var(--white); }
.teacher-app-metrics strong { color: var(--navy); font-size: 1.75rem; line-height: 1; letter-spacing: -.06em; }
.teacher-app-metrics span { color: var(--muted); font-size: .67rem; line-height: 1.3; }
.teacher-insight-grid, .teacher-distribution-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: .85rem; margin-top: .85rem; }
.teacher-app-panel { min-width: 0; padding: 1.05rem; border: 1px solid #e2e9e5; border-radius: .9rem; background: var(--white); }
.teacher-app-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; }
.teacher-app-panel h2 { margin: 0; color: var(--navy); font-size: .94rem; letter-spacing: -.025em; }
.teacher-app-panel header p { margin: .15rem 0 0; color: var(--muted); font-size: .67rem; }
.teacher-app-panel header > span { padding: .24rem .4rem; color: var(--green); border-radius: .35rem; background: #e7f5ed; font-size: .6rem; font-weight: 850; }
.teacher-topic-list { display: grid; gap: .35rem; }
.teacher-topic-row { display: grid; grid-template-columns: 1.8rem 1fr auto; align-items: center; gap: .6rem; width: 100%; padding: .6rem; color: var(--ink); border: 1px solid transparent; border-radius: .65rem; background: #fbfcfb; cursor: pointer; text-align: left; transition: border-color .2s ease, background .2s ease; }
.teacher-topic-row:hover, .teacher-topic-row:focus-visible { border-color: #c8e5d2; background: #f5fbf7; }
.teacher-topic-row.active { border-color: #bde0ca; background: #eff8f2; }
.teacher-topic-count { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; color: var(--green); border-radius: .5rem; background: var(--mint); font-size: .7rem; font-weight: 900; }
.teacher-topic-row > span:nth-child(2) { display: grid; gap: .08rem; }
.teacher-topic-row strong { color: var(--navy); font-size: .74rem; }
.teacher-topic-row small { color: var(--muted); font-size: .63rem; }
.teacher-topic-row > b { color: #8ca196; font-size: 1.1rem; font-weight: 500; }
.teacher-panel-note { display: flex; align-items: flex-start; gap: .35rem; margin: .75rem 0 0; padding-top: .65rem; color: var(--muted); border-top: 1px solid #edf0ee; font-size: .62rem; line-height: 1.35; }
.teacher-focus-panel { margin: 0; padding: 1.05rem; border: 1px solid #cde6d7; border-radius: .9rem; background: linear-gradient(145deg, #f1fbf5, #fbfffc); }
.teacher-focus-label { color: var(--green); font-size: .6rem; font-weight: 900; letter-spacing: .08em; }
.teacher-focus-panel .teacher-detail-top { margin-top: .65rem; }
.teacher-focus-panel .teacher-detail-icon { width: 2rem; height: 2rem; }
.teacher-focus-panel .teacher-detail h3, .teacher-focus-panel h3 { font-size: .85rem; }
.teacher-focus-panel .teacher-detail-copy { font-size: .72rem; }
.teacher-distribution-panel .teacher-donut-wrap { display: flex; align-items: center; gap: 1rem; }
.teacher-donut { position: relative; display: grid; flex: 0 0 auto; width: 7.25rem; height: 7.25rem; place-content: center; border-radius: 50%; background: conic-gradient(var(--green) 0 40%, #5d8fc5 40% 65%, var(--coral) 65% 85%, #e8d7b2 85% 100%); text-align: center; }
.teacher-donut::before { position: absolute; inset: 1rem; border-radius: 50%; background: var(--white); content: ""; }
.teacher-donut strong, .teacher-donut span { position: relative; z-index: 1; display: block; }
.teacher-donut strong { color: var(--navy); font-size: 1rem; letter-spacing: -.04em; }
.teacher-donut span { color: var(--muted); font-size: .58rem; }
.teacher-legend { display: grid; flex: 1; gap: .38rem; padding: 0; margin: 0; list-style: none; }
.teacher-legend li { display: flex; align-items: center; gap: .38rem; color: var(--muted); font-size: .64rem; }
.teacher-legend i { width: .45rem; height: .45rem; border-radius: 50%; }
.teacher-legend b { margin-left: auto; color: var(--navy); font-size: .65rem; }
.legend-green { background: var(--green); }.legend-blue { background: #5d8fc5; }.legend-peach { background: var(--coral); }.legend-sand { background: #e8d7b2; }
.teacher-usage-bars { display: grid; gap: .72rem; }
.teacher-usage-bars > div { display: grid; grid-template-columns: 7.4rem 1fr 1.3rem; align-items: center; gap: .5rem; color: var(--muted); font-size: .64rem; }
.teacher-usage-bars i { display: block; height: .42rem; overflow: hidden; border-radius: 99px; background: #eaf0ec; }
.teacher-usage-bars b { display: block; width: var(--usage-width); height: 100%; border-radius: inherit; background: var(--green); }
.teacher-usage-bars strong { color: var(--navy); font-size: .65rem; text-align: right; }
.teacher-report-panel { margin-top: .85rem; padding: 1.2rem; border: 1px solid #c6e5d2; border-radius: .95rem; background: linear-gradient(130deg, #eff9f2, #ffffff 54%, #fbf7ee); box-shadow: 0 10px 24px rgba(29, 86, 58, .06); }
.teacher-report-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.teacher-report-kicker { color: var(--green); font-size: .62rem; font-weight: 900; letter-spacing: .08em; }
.teacher-report-panel h2 { margin: .25rem 0 0; color: var(--navy); font-size: 1.15rem; letter-spacing: -.04em; }
.teacher-report-panel header p { margin: .2rem 0 0; color: var(--muted); font-size: .67rem; }
.teacher-report-refresh { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .65rem; color: var(--green); border: 1px solid #bcdcca; border-radius: .6rem; background: var(--white); cursor: pointer; font-size: .66rem; font-weight: 850; white-space: nowrap; }
.teacher-report-refresh:hover, .teacher-report-refresh:focus-visible { color: var(--white); background: var(--green); }
.teacher-report-summary { max-width: 56rem; margin: .9rem 0; color: var(--ink); font-size: .78rem; line-height: 1.55; }
.teacher-differentiation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.teacher-differentiation-card { display: flex; align-items: flex-start; gap: .55rem; min-height: 8rem; padding: .8rem; border: 1px solid rgba(14, 36, 79, .08); border-radius: .75rem; background: rgba(255, 255, 255, .86); }
.teacher-differentiation-card > span { display: grid; flex: 0 0 auto; width: 1.5rem; height: 1.5rem; place-items: center; border-radius: .45rem; font-size: .66rem; font-weight: 900; }
.teacher-differentiation-card.shared > span { color: var(--green); background: var(--mint); }.teacher-differentiation-card.support > span { color: #3f6d9c; background: #e0effe; }.teacher-differentiation-card.extend > span { color: #a65c48; background: #ffe6dd; }
.teacher-differentiation-card div { display: grid; gap: .18rem; }
.teacher-differentiation-card small { color: var(--muted); font-size: .58rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.teacher-differentiation-card h3 { margin: 0; color: var(--navy); font-size: .71rem; line-height: 1.35; }
.teacher-differentiation-card p { margin: 0; color: var(--muted); font-size: .63rem; line-height: 1.35; }
.teacher-report-footnote { display: flex; gap: .35rem; margin: .85rem 0 0; padding-top: .7rem; color: #557065; border-top: 1px solid rgba(14, 36, 79, .08); font-size: .65rem; }
.teacher-report-footnote > span:first-child { color: var(--green); font-weight: 900; }
.teacher-report-panel.is-generating { opacity: .72; }
.teacher-report-panel.is-generated { animation: report-ready .55s ease both; }
@keyframes report-ready { from { transform: translateY(.4rem); opacity: .55; } to { transform: translateY(0); opacity: 1; } }
.login-link { padding: .45rem .7rem; border: 1px solid rgba(20, 134, 106, .28); border-radius: 999px; color: var(--green) !important; opacity: 1 !important; }
.login-link:hover, .login-link:focus-visible { color: var(--navy) !important; border-color: var(--green); background: var(--mint); }
.subject-section { background: #f8fbfa; }
.subject-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 3rem; }
.subject-choice { display: grid; gap: .7rem; }
.subject-option { display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: center; gap: .8rem; width: 100%; padding: .9rem 1rem; color: var(--ink); border: 1px solid rgba(14, 36, 79, .1); border-radius: 1rem; background: var(--white); cursor: pointer; text-align: left; box-shadow: 0 8px 18px rgba(14, 36, 79, .04); transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.subject-option:hover, .subject-option:focus-visible, .subject-option.is-selected { border-color: #8bd4ad; background: var(--mint); transform: translateX(4px); }
.subject-option strong, .subject-option small { display: block; }
.subject-option strong { color: var(--navy); font-size: .95rem; }
.subject-option small { margin-top: .1rem; color: var(--muted); font-size: .72rem; }
.subject-option > b { color: var(--green); font-size: 1.1rem; }
.subject-icon { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; color: var(--green); border-radius: .7rem; background: #c9f1df; font-weight: 900; }
.subject-icon-blue { color: #3f6d9c; background: #e0effe; }.subject-icon-peach { color: #a65c48; background: #ffe6dd; }.subject-icon-yellow { color: #926b13; background: #fff2c8; }
.contact-card { grid-template-columns: minmax(0, 1fr) minmax(18rem, .72fr); }
.contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem .8rem; width: min(100%, 31rem); padding: 1.45rem; border: 1px solid rgba(14, 36, 79, .08); border-radius: 1.35rem; background: var(--white); box-shadow: 0 18px 40px rgba(4, 20, 52, .16); }
.form-field { display: grid; gap: .35rem; }
.form-field-wide, .contact-form > .button, .contact-form > .form-note, .contact-form > .contact-helper { grid-column: 1 / -1; }
.contact-form label, .login-card label { color: var(--navy); font-size: .75rem; font-weight: 750; }
.contact-form label span { color: var(--muted); font-weight: 500; }
.contact-form input, .contact-form textarea, .login-card input { width: 100%; padding: .78rem .8rem; color: var(--ink); border: 1px solid rgba(14, 36, 79, .16); border-radius: .72rem; background: #fbfcfd; font: inherit; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--green); outline: 3px solid rgba(20, 134, 106, .14); }
.contact-form textarea { resize: vertical; }
.contact-form .button { width: 100%; margin-top: .65rem; color: var(--white); background: var(--green); }
.contact-form .button:hover, .contact-form .button:focus-visible { color: var(--white); background: #0f795f; }
.contact-form .form-note { min-height: 1.1rem; margin: .25rem 0 0 !important; color: var(--green) !important; font-size: .75rem !important; }
.contact-helper { margin: 0; color: var(--muted); font-size: .72rem; text-align: center; }
.pilot-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 1.25rem; margin-top: 2.35rem; }
.pilot-step { display: flex; min-height: 13rem; flex-direction: column; align-items: flex-start; padding: 1.5rem; border: 1px solid rgba(14, 36, 79, .1); border-radius: 1.2rem; background: var(--white); box-shadow: 0 12px 30px rgba(14, 36, 79, .05); }
.pilot-step > span { display: inline-grid; width: 2.3rem; height: 2.3rem; flex: 0 0 auto; place-items: center; color: var(--green); border-radius: .7rem; background: var(--mint); font-weight: 900; }
.pilot-step h3 { margin: 1rem 0 .45rem; color: var(--navy); font-size: 1.1rem; line-height: 1.15; }
.pilot-step p { max-width: 28rem; margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.journey-grid { grid-template-columns: repeat(4, 1fr); }
.visibility-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 2rem; }
.visibility-grid > article { padding: 1.35rem; border: 1px solid rgba(20, 134, 106, .15); border-radius: 1.1rem; background: #f5fbf7; }
.visibility-grid > article + article { border-color: rgba(242, 139, 114, .2); background: #fff8f5; }
.visibility-grid h3 { margin: .25rem 0 .75rem; color: var(--navy); }
.visibility-grid ul { display: grid; gap: .5rem; padding-left: 1.1rem; margin: 0; color: var(--muted); font-size: .9rem; }
.section-navy { color: var(--white); background: var(--navy); }
.pilot-invite .section-heading h2 { color: var(--white); }
.pilot-invite .section-heading p:not(.eyebrow) { color: #c8d4e5; }
.pilot-invite .eyebrow { color: #8be1bc; }.pilot-invite .eyebrow-dot { background: #8be1bc; box-shadow: 0 0 0 .28rem rgba(139, 225, 188, .15); }
.pilot-invite { padding-top: 4.5rem !important; padding-bottom: 4.75rem !important; }
.pilot-invite-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; }
.pilot-invite-head .button { flex: 0 0 auto; margin-top: .15rem; white-space: nowrap; }
.pilot-mini-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 1.25rem; margin-top: 2.25rem; }
.pilot-mini-steps article { display: flex; min-height: 8.5rem; flex-direction: column; align-items: flex-start; padding: 1.2rem; border: 1px solid rgba(255,255,255,.16); border-radius: 1rem; background: rgba(255,255,255,.07); }
.pilot-mini-steps span { display: inline-grid; width: 2rem; height: 2rem; place-items: center; color: var(--navy); border-radius: .6rem; background: #8be1bc; font-size: .75rem; font-weight: 900; }
.pilot-mini-steps strong, .pilot-mini-steps p { display: block; }.pilot-mini-steps strong { margin-top: .75rem; line-height: 1.2; }.pilot-mini-steps p { margin: .35rem 0 0; color: #c8d4e5; font-size: .8rem; line-height: 1.45; }
.classroom-mockup-animated { position: relative; overflow: hidden; }
.classroom-mockup-animated img { display: block; width: 100%; transform: scale(1.03); transform-origin: center; animation: classroom-photo-drift 10s ease-in-out infinite alternate; }
.classroom-motion-note { position: absolute; right: 1.1rem; bottom: 1.1rem; display: inline-flex; align-items: center; gap: .5rem; padding: .6rem .75rem; color: var(--navy); border: 1px solid rgba(20, 134, 106, .18); border-radius: 999px; background: rgba(239, 252, 245, .94); box-shadow: 0 8px 20px rgba(14, 36, 79, .12); font-size: .72rem; font-weight: 800; animation: classroom-note-fade 10s ease-in-out infinite alternate; }
.motion-pulse { width: .55rem; height: .55rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 .25rem rgba(20, 134, 106, .14); animation: hint-pulse 1.8s ease-in-out infinite; }
@keyframes classroom-photo-drift { 0% { transform: scale(1.03) translateX(-.5%); } 50% { transform: scale(1.07) translateX(1%); } 100% { transform: scale(1.04) translateX(-.25%); } }
@keyframes classroom-note-fade { 0%, 24% { opacity: .55; transform: translateY(.2rem); } 38%, 78% { opacity: 1; transform: translateY(0); } 100% { opacity: .7; transform: translateY(-.1rem); } }
.login-section { padding: 5rem 0; background: var(--peach); }
.login-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, .72fr); align-items: center; gap: 4rem; }
.login-grid h1 { max-width: 650px; margin: 0; color: var(--navy); font-size: clamp(2.8rem, 5vw, 4.6rem); line-height: .96; letter-spacing: -.08em; }
.login-benefits { display: grid; gap: .65rem; margin-top: 2rem; color: var(--green); font-weight: 750; }
.login-card { display: grid; gap: .55rem; padding: 1.7rem; border: 1px solid rgba(14, 36, 79, .08); border-radius: 1.35rem; background: var(--white); box-shadow: var(--shadow); }
.login-card .eyebrow { margin-bottom: .2rem; }.login-card h2 { margin: 0 0 .6rem; color: var(--navy); font-size: 1.7rem; letter-spacing: -.05em; }
.login-card label { color: var(--ink); }.login-card input { border-color: rgba(14, 36, 79, .14); }.login-card .button { margin-top: .7rem; }.login-card .form-note { color: var(--green) !important; }.login-note { margin: .5rem 0; color: var(--muted); font-size: .72rem; line-height: 1.45; }
.site-footer { padding: 1.4rem 0; color: #cad4e2; background: #0a1b3d; font-size: .82rem; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.footer-inner .brand { color: var(--white); font-size: 1rem; }
.footer-inner p { margin: 0; }
.footer-login-link { color: #dbe7f2; font-size: .78rem; font-weight: 750; }
.footer-login-link:hover, .footer-login-link:focus-visible { color: #8be1bc; }

@media (max-width: 1000px) {
  .main-navigation { gap: 1rem; font-size: .88rem; }
  .hero-grid, .two-column, .municipality-panel, .safety-grid, .faq-grid, .try-grid, .teacher-grid, .subject-grid, .login-grid { grid-template-columns: 1fr; gap: 3rem; }
  .hero-copy { max-width: 700px; }
  .hero-demo { max-width: 750px; width: 100%; margin: 0 auto; }
  .two-column .section-heading, .municipality-copy { max-width: 700px; }
  .student-journey, .journey-grid { grid-template-columns: repeat(2, 1fr); }
  .audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-pilot-inner { grid-template-columns: 1fr; gap: 2rem; }
  .pilot-steps { grid-template-columns: 1fr; }
  .teacher-dashboard-columns { grid-template-columns: 1fr; }
  .teacher-app-shell { grid-template-columns: 1fr; }
  .teacher-app-sidebar { display: grid; grid-template-columns: auto minmax(12rem, 1fr) auto; align-items: center; border-right: 0; border-bottom: 1px solid #e5eae7; }
  .teacher-app-nav { display: none; }
  .teacher-class-list { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); }
  .teacher-class-list > p, .teacher-sidebar-privacy { display: none; }
  .teacher-insight-grid, .teacher-distribution-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .container { width: min(calc(100% - 2rem), var(--container)); }
  .site-header { padding: .5rem 0; }
  .header-inner { padding: .7rem .8rem; }
  .brand-logo-image { max-width: 9.5rem; height: 2.25rem; }
  .menu-toggle { display: grid; gap: .25rem; width: 2.7rem; padding: .65rem; cursor: pointer; }
  .menu-toggle span:not(.sr-only) { display: block; height: 2px; background: var(--navy); border-radius: 99px; }
  .main-navigation { position: absolute; top: calc(100% + .4rem); left: 1rem; right: 1rem; display: none; align-items: stretch; padding: .7rem; border: 1px solid rgba(14,36,79,.08); border-radius: 1rem; background: var(--white); box-shadow: var(--shadow); }
  .main-navigation.open { display: grid; }
  .main-navigation a { padding: .65rem .75rem; }
  .hero { padding: 3.7rem 0 3rem; }
  .hero h1 { font-size: clamp(2.7rem, 13vw, 4rem); }
  .hero-actions { display: grid; }
  .hero-actions .button { width: 100%; }
  .demo-card { min-height: 34rem; padding: 1.25rem; transform: none; }
  .demo-question { max-width: 100%; }
  .demo-options { max-width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .assistant-shape { right: -1rem; top: 4.1rem; opacity: .78; transform: scale(.8); }
  .cursor-shape { font-size: 2.7rem; }
  .student-journey { grid-template-columns: 1fr; }
  .audience-grid { grid-template-columns: 1fr; }
  .home-pilot { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .journey-grid, .visibility-grid { grid-template-columns: 1fr; }
  .journey-step { min-height: 13rem; }
  .try-option-list { grid-template-columns: 1fr; }
  .try-step-controls { grid-template-columns: repeat(2, 1fr); }
  .teacher-metrics, .info-grid { grid-template-columns: 1fr; }
  .teacher-dashboard-top { align-items: stretch; flex-direction: column; }
  .teacher-dashboard-actions { justify-items: stretch; }
  .teacher-periods { justify-content: center; }
  .teacher-workspace-head { flex-direction: column; gap: 1.25rem; }
  .teacher-workspace-actions { width: 100%; align-items: stretch; justify-items: stretch; }
  .teacher-class-tabs { grid-template-columns: 1fr; }
  .teacher-tools { align-items: stretch; flex-direction: column; }
  .teacher-search { width: 100%; min-width: 0; }
  .teacher-filters { justify-content: center; }
  .teacher-workspace .teacher-metrics { grid-template-columns: repeat(2, 1fr); }
  .teacher-overview-bottom { grid-template-columns: 1fr; }
  .teacher-signal-time { margin-left: auto; }
  .teacher-app-section { padding: 1rem 0 3rem; }
  .teacher-app-shell { border-right: 0; border-left: 0; border-radius: 0; }
  .teacher-app-sidebar { grid-template-columns: 1fr; }
  .teacher-app-brand { justify-self: start; }
  .teacher-class-list { grid-template-columns: 1fr; }
  .teacher-app-content { padding: 1.35rem 1rem; }
  .teacher-app-header { flex-direction: column; }
  .teacher-app-actions { width: 100%; }
  .teacher-report-button { flex: 1; justify-content: center; }
  .teacher-app-toolbar { align-items: stretch; flex-direction: column; }
  .teacher-concept-label { text-align: center; }
  .teacher-app-metrics { grid-template-columns: repeat(2, 1fr); }
  .teacher-distribution-panel .teacher-donut-wrap { align-items: flex-start; flex-direction: column; }
  .teacher-differentiation-grid { grid-template-columns: 1fr; }
  .teacher-report-panel > header { flex-direction: column; }
  .proof-grid { grid-template-columns: 1fr; gap: .25rem; }
  .section { padding: 4.5rem 0; }
  .contact-card { grid-template-columns: 1fr; align-items: start; padding: 2rem 1.35rem; }
  .contact-form { grid-template-columns: 1fr; width: 100%; }
  .pilot-invite-head { align-items: flex-start; flex-direction: column; }
  .pilot-invite-head .button { width: 100%; }
  .pilot-mini-steps { grid-template-columns: 1fr; }
  .contact-card .button { width: 100%; }
  .footer-inner { align-items: flex-start; flex-direction: column; }
  .classroom-section { padding: 4.5rem 0; }
  .classroom-stage { min-height: 34rem; }
  .classroom-board { width: 13rem; padding: .65rem .8rem; border-width: .45rem; }
  .classroom-board strong { font-size: 1rem; }
  .classroom-shelf, .classroom-chairs { display: none; }
  .classroom-queue-label { left: 1rem; top: 8rem; }
  .classroom-queue-line { left: 5%; right: 18%; bottom: 7rem; }
  .classroom-student { bottom: 7.1rem; transform: scale(.84); transform-origin: bottom center; }
  .classroom-student-one { left: 51%; }
  .classroom-student-two { left: 36%; }
  .classroom-student-three { left: 21%; }
  .classroom-student-four { left: 6%; }
  .classroom-teacher { right: .7rem; bottom: 1rem; transform: scale(.78); transform-origin: bottom right; }
  .teacher-speech { right: .2rem; bottom: 8.5rem; }
  .classroom-caption { align-items: flex-start; flex-direction: column; gap: .25rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}