/* ============================================================
   Trackara Education marketing site, v2 design (Oct 2026)
   Built from the approved mockup (mockups/site-redesign-oct2026/edu.html + shared.css).
   Light paper backgrounds, Inter Tight headings + Inter body, teal accents,
   flat cards with 1px borders. Flat fills only: no gradients, no glows.

   Generated into the site by tools/site-v2/build_edu.py. Edit THIS source file
   (tools/site-v2/edu-src/edu-site.css), then re-run the build.

   Sections:
     1. Tokens (new) + legacy variable remap (old dark-theme names -> light palette)
     2. Base + typography
     3. Buttons
     4. Nav, mega menus, mobile menu
     5. Footer
     6. Device frames (iPhone, browser) + feature explorer
     7. Homepage sections (index.html only, scoped by class)
     8. Legacy shared components (cards, lists, trust bar, timeline, compliance...)
     9. FAQ, blog articles, legal pages
    10. Responsive
   ============================================================ */

/* ── 1. Tokens ─────────────────────────────────────────────── */
:root {
    --teal: #17afa5; --teal-d: #0d8b82; --teal-soft: rgba(23,175,165,0.10);
    --ink: #0a0a0a; --ink-2: #1a1a1a; --mist: #d4d4d4;
    --paper: #f7f8f8; --white: #ffffff; --line: #e5e7e6; --line-2: #d4d7d6;
    --t1: #0a0a0a; --t2: #525252; --t3: #737373;
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Legacy names used by every page's own <style> and inline styles.
       Remapping them is what turns the old dark pages light. */
    --primary:        #17afa5;
    --primary-dark:   #0d8b82;
    --primary-light:  #0d8b82;
    --primary-ink:    #0d8b82;   /* teal for TEXT on light backgrounds (contrast) */
    --primary-subtle: rgba(23, 175, 165, 0.08);
    --primary-border: rgba(23, 175, 165, 0.30);

    --bg:        #f7f8f8;
    --bg-2:      #ffffff;
    --bg-3:      #f1f2f3;
    --bg-card:   #ffffff;
    --bg-raised: #f7f8f8;

    --border:    #e5e7e6;
    --border-2:  #d4d7d6;

    --text-1:    #0a0a0a;
    --text-2:    #525252;
    --text-3:    #737373;

    --green:  #0f9f6e;
    --orange: #b45309;
    --red:    #dc2626;
    --blue:   #2563eb;

    --radius-sm:  8px;
    --radius:     16px;
    --radius-lg:  20px;
    --radius-btn: 10px;

    --section-pad: 104px;
    --container:   1180px;
}

/* ── 2. Base + typography ──────────────────────────────────── */
/* Same universal reset as the old edu-marketing.css: every page's own CSS relies on it */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--t1);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 6px; }
[id] { scroll-margin-top: 88px; }

h1, h2, h3 { font-family: 'Inter Tight', 'Inter', sans-serif; letter-spacing: -0.035em; line-height: 1.08; color: var(--t1); }
h4, h5, h6 { font-family: 'Inter', sans-serif; letter-spacing: -0.01em; line-height: 1.25; color: var(--t1); }

.heading-xl { font-size: clamp(38px, 4.6vw, 56px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.03; text-wrap: balance; }
.heading-lg { font-size: clamp(30px, 3.4vw, 42px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; text-wrap: balance; }
.heading-md { font-size: clamp(25px, 2.6vw, 32px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; text-wrap: balance; }
.heading-sm { font-size: clamp(20px, 2vw, 24px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }

.body-lg { font-size: 18px; line-height: 1.6; color: var(--t2); }
.body-md { font-size: 16px; line-height: 1.65; color: var(--t2); }
.body-sm { font-size: 14px; line-height: 1.6; color: var(--t2); }
.caption { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--teal-d); }
.accent { color: var(--teal-d); }
.lede { font-size: 18px; line-height: 1.6; color: var(--t2); max-width: 620px; margin: 16px 0 0; }

.container, .wrap { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.section { padding: var(--section-pad) 0; }
.section-sm { padding: 72px 0; }
.section-lg { padding: 136px 0; }
.page-main { padding-top: 0; display: block; }
.divider { border: none; border-top: 1px solid var(--line); }

/* Alternating white bands get the mockup's hairline edges */
.page-main > section[style*="--bg-2"] { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ── 3. Buttons ────────────────────────────────────────────── */
.btn, .btn-primary, .btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 20px; border-radius: var(--radius-btn);
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 0; line-height: 1.2;
    text-decoration: none; border: 1px solid transparent; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s; white-space: nowrap; touch-action: manipulation;
}
.btn-teal, .btn-primary { background: var(--teal); color: #fff; }
.btn-teal:hover, .btn-primary:hover { background: var(--teal-d); color: #fff; }
.btn.btn-ghost, .btn-secondary { background: var(--white); border-color: var(--line-2); color: var(--t1); }
.btn.btn-ghost:hover, .btn-secondary:hover { border-color: var(--t3); color: var(--t1); }
.btn-light { background: #fff; color: var(--ink); } .btn-light:hover { background: #eef2f1; }
.btn-ghost-dark { color: #fff; border-color: rgba(255,255,255,0.3); } .btn-ghost-dark:hover { border-color: #fff; }
/* Legacy text-link button (teal text with arrow) */
.btn-ghost:not(.btn) { display: inline-flex; align-items: center; gap: 6px; color: var(--teal-d); font-size: 15px; font-weight: 600; text-decoration: none; }
.btn-ghost:not(.btn):hover { text-decoration: underline; }
.btn-sm { padding: 9px 16px; font-size: 14px; }
.btn-lg { padding: 14px 22px; font-size: 15px; }
.btn-primary:disabled, .submit-btn:disabled { opacity: .6; cursor: not-allowed; }

/* ── 4. Nav ────────────────────────────────────────────────── */
.nav { background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.nav > .wrap { display: flex; align-items: center; gap: 26px; height: 68px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: 'Inter Tight', sans-serif; font-weight: 800; font-size: 19px; letter-spacing: -0.03em; flex: none; }
.logo img { width: 30px; height: 30px; border-radius: 8px; display: block; }
.logo .wm { color: var(--t1); white-space: nowrap; } .logo .wm span { color: var(--teal); }
.logo em { font-style: normal; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--teal-d); background: var(--teal-soft); padding: 3px 8px; border-radius: 6px; }
.nav-links { display: flex; gap: 22px; margin-right: auto; align-items: center; }
.nav-links > a, .nav-links .mega-btn { text-decoration: none; font-size: 14px; font-weight: 500; color: var(--t2); }
.nav-links > a:hover, .nav-links .mega-btn:hover, .nav-links > a[aria-current="page"] { color: var(--t1); }
.nav-links > a[aria-current="page"] { font-weight: 600; }
.nav-right { display: flex; gap: 10px; align-items: center; margin-left: auto; }
.nav-right .btn { padding: 9px 16px; font-size: 14px; }
.mega-in.edu { grid-template-columns: 1fr 1fr 1.1fr; max-width: 1180px; }
.mega-in.schools { grid-template-columns: 1fr 1fr; max-width: 1180px; }

/* Mega menu (shared.css). Real <a href> links in the HTML for crawlers. */
.has-mega { position: static; }
.mega-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; padding: 0; }
.mega-btn i { font-size: 10px; transition: transform 200ms ease; }
.has-mega.open .mega-btn i { transform: rotate(180deg); }
.mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; display: none; background: #fff; color: #0a0a0a;
    border-top: 1px solid #e7e5e4; border-bottom: 1px solid #e7e5e4; box-shadow: 0 30px 50px -30px rgba(10, 10, 10, 0.35); }
.has-mega.open .mega { display: block; animation: mega-in 200ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes mega-in { from { opacity: 0; transform: translateY(-6px); } }
.mega-in { max-width: 1200px; margin: 0 auto; padding: 28px 32px 30px; display: grid; gap: 28px; }
.mega-col h4 { margin: 0 0 10px; font: 700 12.5px/1.2 'Inter', sans-serif; color: #737373; }
.mega-col a { display: grid; grid-template-columns: 30px 1fr; gap: 2px 10px; align-items: start; text-decoration: none; color: inherit; padding: 8px; margin: 0 -8px; border-radius: 10px; }
.mega-col a i { grid-row: span 2; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: rgba(23, 175, 165, 0.1); color: #0d8b82; font-size: 13px; }
.mega-col a b { font: 600 14px/1.3 'Inter', sans-serif; }
.mega-col a span { font: 400 12.5px/1.4 'Inter', sans-serif; color: #525252; }
.mega-col a:hover, .mega-col a:focus-visible { background: #f5f5f4; }
.mega-col a:hover b { color: #0d8b82; }
.mega-feature { align-self: start; background: #0a0a0a; color: #fff; border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 12px; text-decoration: none; }
.mega-feature b { font: 700 16px/1.3 'Inter Tight', sans-serif; letter-spacing: -0.02em; }
.mega-feature span { font-size: 13px; color: #d4d4d4; line-height: 1.45; }
.mega-feature img { width: 100%; height: auto; border-radius: 8px; display: block; }

/* Mobile menu: same links, as an accordion */
.burger { display: none; background: none; border: 0; color: inherit; font-size: 20px; cursor: pointer; padding: 6px; width: 40px; height: 40px; align-items: center; justify-content: center; }
.mnav { display: none; }

/* ── 5. Footer ─────────────────────────────────────────────── */
.site-foot { border-top: 1px solid var(--line); background: var(--white); font-size: 14px; color: var(--t2); }
.site-foot .foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; padding-top: 52px; padding-bottom: 40px; }
.site-foot h4 { color: var(--t1); margin: 0 0 12px; font-size: 14px; font-weight: 700; }
.site-foot .foot-grid a:not(.logo) { display: block; text-decoration: none; padding: 4px 0; }
.site-foot .foot-grid a:not(.logo):hover { color: var(--t1); }
.site-foot .foot-tag { max-width: 320px; line-height: 1.6; margin-top: 14px; }
.site-foot .foot-bottom { position: relative; padding-top: 20px; padding-bottom: 28px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--t3); }
.site-foot .foot-bottom::before { content: ''; position: absolute; top: 0; left: 32px; right: 32px; height: 1px; background: var(--line); }
.site-foot .foot-bottom a { text-decoration: none; } .site-foot .foot-bottom a:hover { color: var(--t1); }

/* ── 6. Device frames (shared.css) ─────────────────────────── */
.iphone { --w: 300px; position: relative; width: var(--w); max-width: 100%; flex: none; margin: 0;
    padding: calc(var(--w) * 0.032); border-radius: calc(var(--w) * 0.165);
    background: #1c1f24; box-shadow: inset 0 0 0 1.5px #474c55, inset 0 0 0 calc(var(--w) * 0.012) #2b2f36, 0 24px 48px -28px rgba(10, 10, 10, 0.55); }
.iphone img { display: block; width: 100%; height: auto; border-radius: calc(var(--w) * 0.135); background: #000; }
.iphone .island { position: absolute; left: 50%; transform: translateX(-50%);
    top: calc(var(--w) * 0.032 + var(--w) * 0.936 * 11 / 440); width: calc(var(--w) * 0.936 * 0.286); height: calc(var(--w) * 0.936 * 37 / 440);
    border-radius: 999px; background: #000; }
.iphone .btn-r, .iphone .btn-l, .iphone .btn-l2 { position: absolute; width: 3px; background: #2b2f36; border-radius: 2px; }
.iphone .btn-r { right: -2px; top: 26%; height: 11%; }
.iphone .btn-l { left: -2px; top: 21%; height: 7%; }
.iphone .btn-l2 { left: -2px; top: 30%; height: 7%; }
.browser { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid #d6d3d1; background: #fff;
    box-shadow: 0 30px 60px -36px rgba(10, 10, 10, 0.45); }
.browser .bar { height: 38px; display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; padding: 0 12px; background: #f1f2f3; border-bottom: 1px solid #e3e4e6; }
.browser .dots { display: flex; gap: 7px; }
.browser .dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.browser .dots i:nth-child(2) { background: #febc2e; } .browser .dots i:nth-child(3) { background: #28c840; }
.browser .url { justify-self: center; display: inline-flex; align-items: center; gap: 7px; max-width: 100%; overflow: hidden; white-space: nowrap;
    background: #fff; border: 1px solid #e3e4e6; border-radius: 8px; padding: 4px 14px; font: 500 12px/1.3 'Inter', sans-serif; color: #525252; }
.browser .url i { font-size: 10px; color: #8a8a8a; }
.browser img { display: block; width: 100%; height: auto; }
.browser.dark { border-color: #2a2a2a; } .browser.dark .bar { background: #1a1a1a; border-bottom-color: #2a2a2a; }
.browser.dark .url { background: #0a0a0a; border-color: #2a2a2a; color: #d4d4d4; }
.devices { position: relative; }
.devices .browser { width: 100%; }
.devices .iphone { position: absolute; right: -4%; bottom: -12%; }

/* Feature explorer */
.explorer-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 36px; }
.explorer-tabs button { font: 600 14px/1 'Inter', sans-serif; padding: 11px 16px; border-radius: 999px; border: 1px solid #d6d3d1; background: #fff; color: #525252; cursor: pointer; }
.explorer-tabs button:hover { border-color: #8a8a8a; color: #0a0a0a; }
.explorer-tabs button[aria-selected="true"] { background: #0a0a0a; border-color: #0a0a0a; color: #fff; }
.explorer-panel { display: none; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; margin-top: 28px; }
.explorer-panel.on { display: grid; animation: mega-in 260ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.feature-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.feature-card { display: block; text-decoration: none; color: inherit; background: #fff; border: 1px solid #e7e5e4; border-radius: 16px; padding: 18px; transition: border-color .15s; }
.feature-card:hover, .feature-card:focus-visible { border-color: #17afa5; }
.feature-card > i { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: rgba(23,175,165,.1); color: #0d8b82; font-size: 14px; margin-bottom: 12px; }
.feature-card > b { display: block; font: 700 16px/1.3 'Inter Tight', sans-serif; letter-spacing: -0.02em; }
.feature-card > span { display: block; font-size: 14px; line-height: 1.5; color: #525252; margin-top: 6px; }
.feature-card > u { display: inline-block; margin-top: 10px; text-decoration: none; font-size: 13px; font-weight: 600; color: #0d8b82; }
.explorer-visual { display: flex; justify-content: center; }

/* ── 7. Homepage sections (index.html) ─────────────────────── */
.home h2 { font-size: 42px; line-height: 1.08; font-weight: 800; text-wrap: balance; max-width: 760px; }
.hero { padding: 72px 0 72px; overflow: hidden; }
.hero .wrap { display: block; }
.hero-copy { max-width: 780px; }
.hero h1 { font-size: 56px; line-height: 1.02; font-weight: 800; text-wrap: balance; }
.hero p.lede { font-size: 18px; }
.hero-ctas { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.respond { font-size: 13px; color: var(--t3); margin-top: 12px; }
.cap { font-size: 12.5px; color: var(--t3); margin-top: 18px; }

/* Hero fan: the live site's old layout (one large device in the middle, smaller ones stepping back
   and down on each side, fading out at the bottom), rebuilt with REAL screens. Sizes are in container
   units (cqw) so the whole fan scales with its width; 5 devices on desktop and tablet, 3 on phones.
   THE FADE IS A MASK, NOT A PAINTED GRADIENT: mask-image only sets how opaque the devices are near the
   bottom edge, so the light page background shows through. Nothing is filled with a gradient colour,
   which is why it is the one place gradient syntax appears in this stylesheet (the build's
   no-gradient guard skips mask-image declarations only). */
.fan-wrap { container-type: inline-size; margin-top: 52px; }
.fan {
    position: relative; height: 36cqw; overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 64%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 64%, transparent 100%);
}
.fan-item { position: absolute; top: 0; }
.fan-item .iphone { margin: 0; }
.fan-center { left: 23cqw; width: 54cqw; z-index: 3; }
.fan-center .browser { box-shadow: 0 30px 60px -30px rgba(10, 10, 10, 0.45); }
.fan-inner { top: 5cqw; z-index: 2; }
.fan-inner .iphone { --w: 16cqw; }
.fan-inner.fan-l { left: 10.5cqw; } .fan-inner.fan-r { right: 10.5cqw; }
.fan-outer { top: 10.5cqw; z-index: 1; }
.fan-outer .iphone { --w: 13cqw; }
.fan-outer.fan-l { left: 1cqw; } .fan-outer.fan-r { right: 1cqw; }
/* One entrance moment: the side devices settle into place once on load (no scroll triggers). */
@keyframes fan-settle-l { from { opacity: 0; transform: translate(3cqw, 2cqw); } }
@keyframes fan-settle-r { from { opacity: 0; transform: translate(-3cqw, 2cqw); } }
@media (prefers-reduced-motion: no-preference) {
    .fan-inner.fan-l { animation: fan-settle-l 700ms var(--ease) 150ms both; }
    .fan-inner.fan-r { animation: fan-settle-r 700ms var(--ease) 150ms both; }
    .fan-outer.fan-l { animation: fan-settle-l 700ms var(--ease) 260ms both; }
    .fan-outer.fan-r { animation: fan-settle-r 700ms var(--ease) 260ms both; }
}
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
.trust .wrap { display: flex; flex-wrap: wrap; gap: 14px 34px; padding-top: 22px; padding-bottom: 22px; font-size: 14px; color: var(--t2); }
.trust span { display: inline-flex; gap: 8px; align-items: center; } .trust i { color: var(--teal); }
.gap { padding: 104px 0; }
.gap-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 44px; border-top: 2px solid var(--t1); }
.gap-grid div { padding: 24px 28px 0 0; }
.gap-grid div + div { padding-left: 28px; border-left: 1px solid var(--line); }
.gap-grid h3 { font-size: 20px; letter-spacing: -0.02em; font-weight: 700; }
.gap-grid p { color: var(--t2); line-height: 1.6; font-size: 15px; margin: 10px 0 0; }
.path { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 104px 0; }
.path-list { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: p; position: relative; }
.path-list::before { content: ''; position: absolute; top: 17px; left: 18px; right: 18px; height: 2px; background: var(--line); }
.path-list li { position: relative; padding-right: 28px; counter-increment: p; }
.path-list li::before { content: counter(p); position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--white); border: 2px solid var(--teal); color: var(--teal-d); font-weight: 700; font-size: 15px; margin-bottom: 18px; }
.path-list li:last-child::before { background: var(--teal); color: #fff; }
.path-list small { display: block; font-size: 12.5px; font-weight: 600; color: var(--t3); margin-bottom: 6px; }
.path-list h3 { font-size: 19px; letter-spacing: -0.02em; font-weight: 700; }
.path-list p { color: var(--t2); line-height: 1.55; font-size: 14.5px; margin: 8px 0 0; }
.feat { padding: 104px 0; }
.feat .explorer-visual .iphone { --w: 290px; }
.grad { background: var(--ink); color: #fff; padding: 96px 0; }
.grad .wrap { display: grid; grid-template-columns: auto 1fr; gap: 64px; align-items: center; }
.grad .six { font-family: 'Inter Tight', sans-serif; font-size: 200px; font-weight: 800; letter-spacing: -0.06em; line-height: 0.8; color: var(--teal); }
.home .grad h2 { color: #fff; }
.grad p { color: var(--mist); font-size: 17px; line-height: 1.6; margin: 16px 0 22px; max-width: 560px; }
.grad ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 15px; }
.grad li { display: flex; gap: 10px; align-items: baseline; color: #e5e5e5; } .grad li i { color: #5FD3CA; }
.aud { padding: 104px 0; }
.aud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.aud-card { background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 34px; display: flex; flex-direction: column; }
.aud-card small { font-size: 13px; font-weight: 600; color: var(--teal-d); }
.aud-card h3 { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; margin: 8px 0 10px; }
.aud-card p { color: var(--t2); line-height: 1.6; margin: 0 0 20px; font-size: 15px; }
.aud-card ul { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; font-size: 15px; }
.aud-card li { display: flex; gap: 10px; } .aud-card li i { color: var(--teal); margin-top: 4px; }
.aud-card .note { font-size: 13.5px; color: var(--t3); margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); margin-bottom: 18px; }
.aud-card .btn { align-self: flex-start; }
.lms-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.lms-row span { font-size: 13px; font-weight: 600; border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 10px; }
.faq { background: var(--white); border-top: 1px solid var(--line); padding: 96px 0; }
.faq .wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 2px solid var(--t1); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 36px 20px 0; font-weight: 600; font-size: 16.5px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 16px; font-size: 22px; font-weight: 400; color: var(--t3); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 20px; color: var(--t2); line-height: 1.65; font-size: 15px; max-width: 640px; }
.closer { padding: 96px 0; }
.closer-box { background: var(--teal); color: #fff; border-radius: 24px; padding: 56px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.home .closer-box h2 { color: #fff; font-size: 38px; }
.closer-box p { margin: 12px 0 0; font-size: 17px; line-height: 1.55; color: #e8fbf9; max-width: 560px; }
.closer-box .btns { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── 8. Legacy shared components (inner pages) ─────────────── */
/* Cards */
.card, .card-feature, .card-accent { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; transition: border-color .15s; }
.card:hover, .card-feature:hover { border-color: var(--teal); }
.card-accent { border-color: var(--primary-border); }
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--teal-d); margin-bottom: 16px; }

/* Check list */
.check-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.check-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--t2); line-height: 1.5; }
.check-list li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: var(--teal); font-size: 12px; margin-top: 3px; flex-shrink: 0; }

.step-num { width: 36px; height: 36px; border-radius: 50%; background: var(--teal); color: #fff; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: 'Inter', sans-serif; }

.grad-callout { background: var(--ink); color: #fff; border-radius: var(--radius-lg); padding: 64px 48px; text-align: center; }

/* Highlight box */
.highlight-box { background: var(--teal-soft); border: 1px solid var(--primary-border); border-radius: 12px; padding: 16px 20px; font-size: 15px; line-height: 1.6; color: var(--t1); margin-top: 24px; }
.highlight-box strong { color: var(--teal-d); }

/* Trust bar (mockup .trust line) */
.trust-bar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
.trust-bar-inner { max-width: var(--container); margin: 0 auto; padding: 20px 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.trust-signal { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 400; color: var(--t2); letter-spacing: 0; }
.trust-signal i { font-size: 13px; color: var(--teal); }
.trust-signal strong { color: var(--t2); font-weight: 500; }

/* Old browser frame wrapper around screenshots: flat light chrome */
.device-frame { background: var(--white); border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -36px rgba(10, 10, 10, 0.35); }
.device-frame-bar { height: 34px; background: #f1f2f3; border-bottom: 1px solid #e3e4e6; display: flex; align-items: center; padding: 0 12px; gap: 7px; }
.device-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; flex-shrink: 0; }
.device-dot + .device-dot { background: #febc2e; } .device-dot + .device-dot + .device-dot { background: #28c840; }
.device-url-bar { flex: 1; height: 20px; background: #fff; border-radius: 6px; margin: 0 10px; border: 1px solid #e3e4e6; }
.device-frame img { width: 100%; height: auto; display: block; }
.device-frame-phone { background: #1c1f24; border-radius: 32px; padding: 8px; overflow: hidden; position: relative; }
.device-frame-phone img { width: 100%; height: auto; display: block; border-radius: 26px; }
.device-frame-phone-bar { display: none; }

/* Timeline (for-schools onboarding) */
.timeline-wrap { display: flex; flex-direction: column; position: relative; }
.timeline-wrap::before { content: ''; position: absolute; left: 17px; top: 28px; bottom: 28px; width: 2px; background: var(--line); z-index: 0; }
.timeline-step { display: flex; gap: 20px; align-items: flex-start; padding: 20px 0; position: relative; z-index: 1; }
.timeline-step:last-child { padding-bottom: 0; }
.timeline-num { width: 36px; height: 36px; border-radius: 50%; background: var(--white); border: 2px solid var(--teal); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; font-weight: 700; color: var(--teal-d); font-family: 'Inter', sans-serif; }
.timeline-num.active { background: var(--teal); border-color: var(--teal); color: #fff; }
.timeline-label { font-size: 12.5px; font-weight: 600; color: var(--t3); margin-bottom: 4px; }
.timeline-title { font-family: 'Inter Tight', 'Inter', sans-serif; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--t1); margin-bottom: 6px; }
.timeline-desc { font-size: 14.5px; line-height: 1.6; color: var(--t2); }

/* Stat row */
.stat-row { display: grid; gap: 1px; background: var(--line); }
.stat-cell { background: var(--white); padding: 28px; }
.stat-cell-value { font-family: 'Inter Tight', 'Inter', sans-serif; font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -0.04em; color: var(--t1); line-height: 1; margin-bottom: 6px; }
.stat-cell-label { font-size: 13px; color: var(--t3); line-height: 1.5; }

/* Quote */
.quote-block { padding: 28px; border-left: 3px solid var(--teal); background: var(--white); border-radius: 0 var(--radius) var(--radius) 0; }
.quote-text { font-size: 16px; line-height: 1.7; color: var(--t2); font-style: italic; margin-bottom: 16px; }
.quote-author { font-size: 13px; font-weight: 600; color: var(--t1); }
.quote-role { font-size: 12px; color: var(--t3); margin-top: 2px; }

/* Compliance grid */
.compliance-grid { display: grid; gap: 12px; background: none; }
.compliance-cell { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: flex; gap: 16px; align-items: flex-start; }
.compliance-icon { width: 36px; height: 36px; border-radius: 9px; background: var(--teal-soft); border: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--teal-d); flex-shrink: 0; }
.compliance-title { font-size: 15px; font-weight: 600; color: var(--t1); margin-bottom: 4px; }
.compliance-desc { font-size: 14px; color: var(--t2); line-height: 1.55; }

/* Forms */
.form-group { margin-bottom: 18px; }
.form-label { display: block; font-size: 13px; font-weight: 600; color: var(--t1); margin-bottom: 7px; }
.form-input, .form-select, .form-textarea {
    width: 100%; background: var(--white); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
    color: var(--t1); font-size: 15px; font-family: 'Inter', sans-serif; padding: 11px 14px; outline: none;
    transition: border-color .15s; appearance: none; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.form-input::placeholder, .form-textarea::placeholder { color: #a3a3a3; }
.form-textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
.form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7280' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.form-select option { background: #fff; color: var(--t1); }

/* Badge used by login.html */
.edu-badge, .edu-badge-sm { font-style: normal; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--teal-d); background: var(--teal-soft); border: 0; padding: 3px 8px; border-radius: 6px; vertical-align: middle; }

/* ── 9. FAQ, blog articles, legal ─────────────────────────── */
/* FAQ lists on inner pages (static Q and A, mockup look) */
.faq-list, .faq-section { border-top: 2px solid var(--t1); }
.faq-item { padding: 20px 0; border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-q { font-size: 16.5px; font-weight: 600; color: var(--t1); margin-bottom: 8px; line-height: 1.4; letter-spacing: -0.005em; }
.faq-a { font-size: 15px; color: var(--t2); line-height: 1.65; margin: 0; }
.faq-a a, .faq-sub a { color: var(--teal-d); }
.faq-section { margin-top: 56px; padding-top: 0; }
.faq-section > h2:first-child { margin-top: 28px !important; }

/* Blog article typography */
.article-wrap { max-width: 760px; margin: 0 auto; padding: 64px 32px 104px; }
.breadcrumb { font-size: 13px; color: var(--t3); margin-bottom: 24px; }
.breadcrumb a { color: var(--t3); text-decoration: none; } .breadcrumb a:hover { color: var(--teal-d); }
.breadcrumb span { margin: 0 8px; }
.article-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 36px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.article-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--teal-d); background: var(--teal-soft); border: 0; border-radius: 6px; padding: 4px 10px; }
.article-date, .article-read-time { font-size: 13px; color: var(--t3); }
.article-wrap h1 { font-family: 'Inter Tight', 'Inter', sans-serif; font-size: clamp(32px, 4.2vw, 46px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.06; color: var(--t1); margin-bottom: 20px; text-wrap: balance; }
.article-lede { font-size: 19px; line-height: 1.65; color: var(--t2); margin-bottom: 44px; border-left: 3px solid var(--teal); padding-left: 20px; }
.article-wrap h2 { font-family: 'Inter Tight', 'Inter', sans-serif; font-size: 27px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; color: var(--t1); margin-top: 52px; margin-bottom: 14px; }
.article-wrap h3 { font-family: 'Inter Tight', 'Inter', sans-serif; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--t1); margin-top: 32px; margin-bottom: 10px; }
.article-wrap p { font-size: 17px; line-height: 1.75; color: #404040; margin-bottom: 20px; }
.article-wrap ul, .article-wrap ol { padding-left: 22px; margin-bottom: 20px; }
.article-wrap li { font-size: 17px; line-height: 1.7; color: #404040; margin-bottom: 8px; }
.article-wrap a { color: var(--teal-d); text-decoration: underline; text-decoration-color: rgba(13,139,130,.35); text-underline-offset: 2px; }
.article-wrap a:hover { text-decoration-color: var(--teal-d); }
.article-wrap a.btn-primary, .article-wrap a.btn-secondary { text-decoration: none; }
.article-wrap a.btn-primary { color: #fff; }
.article-wrap a.btn-secondary { color: var(--t1); }
.article-wrap strong { color: var(--t1); }
.article-callout { background: var(--teal-soft); border: 1px solid var(--primary-border); border-radius: 14px; padding: 22px 26px; margin: 32px 0; }
.article-callout strong { display: block; font-size: 13px; font-weight: 700; color: var(--teal-d); text-transform: none; letter-spacing: 0; margin-bottom: 8px; }
.article-callout p, .article-callout li { font-size: 16px; }
.article-callout p:last-child, .article-callout ul:last-child { margin-bottom: 0; }
.checklist-box { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 26px 30px; margin: 32px 0; }
.checklist-box h4 { font-size: 13px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--t3); margin-bottom: 12px; }
.checklist-box ul { padding-left: 0; list-style: none; margin: 0; }
.checklist-box li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--t2); padding: 9px 0; margin: 0; border-bottom: 1px solid var(--line); }
.checklist-box li:last-child { border-bottom: none; }
.checklist-box li i { color: var(--teal); font-size: 12px; margin-top: 5px; flex-shrink: 0; }
.article-cta { background: var(--ink); color: #fff; border: 0; border-radius: 20px; padding: 40px 36px; text-align: left; margin-top: 64px; }
.article-cta h3 { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; color: #fff; margin-top: 0; margin-bottom: 10px; }
.article-cta p { font-size: 16px; color: var(--mist); max-width: 520px; margin: 0 0 24px; }
.article-cta-btns { display: flex; gap: 10px; justify-content: flex-start; flex-wrap: wrap; }
.article-wrap .article-cta a.btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); }
.article-wrap .article-cta a.btn-secondary:hover { border-color: #fff; color: #fff; }
.article-cta .btn-primary { color: #fff; }

/* Legal pages */
.legal-wrap { max-width: 760px; margin: 0 auto; padding: 64px 32px 104px; }
.legal-wrap h1 { font-family: 'Inter Tight', 'Inter', sans-serif; font-size: clamp(34px, 4vw, 46px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.06; color: var(--t1); margin-bottom: 12px; }
.legal-meta { font-size: 14px; color: var(--t3); margin-bottom: 40px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.legal-wrap h2 { font-family: 'Inter Tight', 'Inter', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--t1); margin-top: 40px; margin-bottom: 12px; }
.legal-wrap h3 { font-size: 17px; font-weight: 700; color: var(--t1); margin-top: 24px; margin-bottom: 8px; }
.legal-wrap p, .legal-wrap li { font-size: 15.5px; line-height: 1.75; color: #404040; }
.legal-wrap p { margin-bottom: 16px; }
.legal-wrap ul { padding-left: 22px; margin-bottom: 16px; }
.legal-wrap li { margin-bottom: 6px; }
.legal-wrap a { color: var(--teal-d); }
.legal-wrap strong { color: var(--t1); }


/* Page heroes (first section of inner pages, tagged .page-hero by the build): left-aligned like the homepage */
.page-hero, .page-hero * { text-align: left !important; }
.page-hero .container > div, .page-hero .hero-inner, .page-hero h1, .page-hero p { margin-left: 0 !important; margin-right: 0 !important; }
.page-hero h1 { max-width: 860px; }
.page-hero p.body-lg { max-width: 640px; }
.page-hero .hero-ctas, .page-hero .hero-cta, .page-hero .cta-row { justify-content: flex-start !important; align-items: flex-start !important; }
.page-main > .page-hero { padding-top: 88px; padding-bottom: 88px; }

/* Closing CTA band (last section of inner pages, tagged .cta-band by the build): ink band.
   Re-scoping the palette variables also recolours the page's inline styles inside it. */
.page-main > .cta-band {
    --t1: #fff; --t2: #d4d4d4; --t3: #a3a3a3; --text-1: #fff; --text-2: #d4d4d4; --text-3: #a3a3a3;
    --bg: var(--ink); --bg-2: var(--ink); --bg-card: var(--ink-2); --bg-raised: var(--ink-2);
    --border: rgba(255,255,255,0.14); --border-2: rgba(255,255,255,0.22);
    background: var(--ink) !important; color: #fff; border: 0 !important;
}
.cta-band h2, .cta-band h3 { color: #fff; }
.cta-band .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); }
.cta-band .btn-secondary:hover { border-color: #fff; color: #fff; }
.cta-band .caption, .cta-band .accent { color: #5FD3CA; }
.cta-band a:not(.btn-primary):not(.btn-secondary) { color: #5FD3CA; }

/* features.html bento: flat cards with 1px borders instead of a dark mosaic */
.page-main .bento { background: none; gap: 12px; border-radius: 0; overflow: visible; }
.page-main .bento-cell { background: var(--white); border: 1px solid var(--line); border-radius: 20px; }
.page-main .bento .bento-dark { background: var(--ink); border-color: var(--ink);
    --t1: #fff; --text-1: #fff; --text-2: #d4d4d4; --text-3: #a3a3a3; --border: rgba(255,255,255,0.14); }
.page-main .bento .bento-dark .caption.accent { color: #5FD3CA; }
.page-main .bento .bento-teal { background: var(--teal-soft); border-color: var(--primary-border); }
/* Real EDU portal screenshots in the browser frame */
.page-main .device-frame img { background: #0a0a0a; }
.page-main .bento-cell-two-col:has(> :only-child) { grid-template-columns: 1fr; }
.page-main .bento-cell-two-col:has(> :only-child) > div { max-width: 640px; }
/* features.html gallery: two per row so the portal screens are legible; one uniform 16:10 frame (taller crops are cut at the bottom) */
.page-main .screenshot-gallery-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 36px 28px !important; }
.page-main .screenshot-gallery-grid .device-frame img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.page-main .screenshot-gallery-grid .screenshot-caption { font-size: 14px; color: var(--t2); margin-top: 12px; }
@media (max-width: 700px) { .page-main .screenshot-gallery-grid { grid-template-columns: 1fr !important; } }

/* Inner pages: section heads, notes and closing CTAs left-aligned (the pages' own CSS centred them) */
.page-main :is(.faq-header, .bottom-cta, .bottom-cta-inner, .pricing-callout, .journey-heading, .model-note, .included-header, .timeline-section-head, .compliance-section-head) { text-align: left; }
.page-main :is(.faq-header, .bottom-cta, .bottom-cta-inner, .pricing-callout, .journey-heading, .model-note) > * { margin-left: 0; margin-right: 0; }
.page-main :is(.bottom-cta-row, .bottom-cta-btns, .cta-row, .pricing-callout .hero-ctas) { justify-content: flex-start; }
.page-main :is(.faq-list, .pricing-callout) { margin-left: 0; margin-right: 0; }
/* A ruled list reads better than four boxed cards for the data-privacy points */
.page-main .compliance-grid { gap: 0 40px; }
.page-main .compliance-cell { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 20px 0; }

/* ── 10. Responsive ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .has-mega.open .mega, .explorer-panel.on { animation: none; }
}
@media (max-width: 1000px) {
    :root { --section-pad: 80px; }
    .nav-links, .nav-right .btn-ghost { display: none; }
    .burger { display: inline-flex; }
    .mnav.open { display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: #fff; color: #0a0a0a; border-top: 1px solid #e7e5e4; max-height: calc(100vh - 68px); overflow: auto; padding: 8px 16px 20px; box-shadow: 0 30px 50px -30px rgba(10, 10, 10,.35); }
    .mnav details { border-bottom: 1px solid #e7e5e4; }
    .mnav summary { list-style: none; padding: 14px 0; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; }
    .mnav summary::-webkit-details-marker { display: none; }
    .mnav summary::after { content: '+'; color: #8a8a8a; }
    .mnav details[open] summary::after { content: '\2212'; }
    .mnav details a, .mnav > a { display: block; padding: 9px 0; text-decoration: none; color: #0a0a0a; font-size: 15px; }
    .mnav > a { border-bottom: 1px solid #e7e5e4; padding: 14px 0; font-weight: 600; }
    .mnav > a.mnav-cta { color: var(--teal-d); border-bottom: 0; }
    .mnav details a { color: #525252; padding-left: 4px; }
    .explorer-panel.on { grid-template-columns: 1fr; }
    .hero .wrap, .faq .wrap, .aud-grid, .grad .wrap, .closer-box { grid-template-columns: 1fr; }
    .fan-wrap { margin-left: -32px; margin-right: -32px; }
    .hero h1 { font-size: 44px; } .home h2 { font-size: 34px; }
    .gap-grid { grid-template-columns: 1fr; } .gap-grid div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 20px; }
    .path-list { grid-template-columns: 1fr 1fr; gap: 32px 0; } .path-list::before { display: none; }
    .grad .six { font-size: 140px; }
    .site-foot .foot-grid { grid-template-columns: 1fr 1fr; }
    .site-foot .foot-grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    :root { --section-pad: 64px; }
    .wrap, .container, .trust-bar-inner { padding-left: 16px; padding-right: 16px; }
    .nav > .wrap { gap: 10px; } .logo { font-size: 17px; gap: 8px; } .logo em { font-size: 11px; padding: 2px 6px; }
    .nav-right .btn-teal { display: none; }
    .hero { padding-top: 40px; padding-bottom: 56px; } .hero h1 { font-size: 36px; }
    /* Phones: three devices (dashboard plus one phone each side), large enough to read the shapes */
    .fan-wrap { margin: 36px -16px 0; }
    /* Too narrow for phones tucked behind the dashboard to be seen, so here they come forward over its
       lower corners, still smaller and lower than the centre, still symmetric. */
    .fan { height: 70cqw; }
    .fan-outer { display: none; }
    .fan-center { left: 8cqw; width: 84cqw; z-index: 1; }
    .fan-inner { top: 25cqw; z-index: 2; }
    .fan-inner .iphone { --w: 27cqw; }
    .fan-inner.fan-l { left: 2cqw; } .fan-inner.fan-r { right: 2cqw; }
    .home h2 { font-size: 30px; } .home .closer-box h2 { font-size: 30px; }
    .path-list { grid-template-columns: 1fr; }
    .aud-card, .closer-box { padding: 26px 20px; }
    .feature-cards { grid-template-columns: 1fr; }
    .gap, .path, .feat, .aud { padding: 72px 0; } .grad, .faq, .closer { padding: 64px 0; }
    .article-wrap, .legal-wrap { padding: 40px 16px 72px; }
    .article-wrap p, .article-wrap li { font-size: 16px; }
    .article-cta { padding: 28px 22px; }
    .checklist-box { padding: 22px 20px; }
    .btn-lg { padding: 13px 20px; }
    .site-foot .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
    .site-foot .foot-bottom::before { left: 16px; right: 16px; }
    .page-main > .page-hero { padding-top: 56px; padding-bottom: 56px; }
}
@media (max-width: 700px) {
    .compliance-grid[style] { grid-template-columns: 1fr !important; }
}