/* Home page. Layout: a guided scroll journey. One 3D Weber tab stays on screen through the student
   story; then one scene shows the website and the app together, and the parents chapter runs its own scene.
   Palette "night study desk": ink ground, electric blue, violet for AI. Light mode mirrors it. */
:root {
    --bg: #F5F7FD;
    --bg-2: #EAEFFB;
    --fg: #0D1430;
    --muted: #4A5578;
    --line: rgba(13, 20, 48, .12);
    --surface: #FFFFFF;
    --blue: #1F6FEB;
    --violet: #7A45F0;
    --mint: #0E9F75;
    --amber: #B97800;
    --rose: #D93458;
    --glow-a: rgba(31, 111, 235, .18);
    --glow-b: rgba(122, 69, 240, .14);
    --screen: #FFFFFF;
    --screen-2: #F1F4FD;
    --screen-fg: #0D1430;
    --screen-muted: #5A668C;
    --bezel: linear-gradient(145deg, #FFFFFF, #CDD5EA 60%, #F2F5FC);
    --shadow: 0 30px 60px rgba(20, 30, 70, .14);
    --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    --body: "Figtree", "Segoe UI", system-ui, sans-serif;
    color-scheme: light;
}
[data-bs-theme="dark"] {
    --bg: #070B1A;
    --bg-2: #0D1430;
    --fg: #EEF2FF;
    --muted: #A3AECD;
    --line: rgba(163, 174, 205, .16);
    --surface: #10183A;
    --blue: #4D94FF;
    --violet: #A57BFF;
    --mint: #34D3A0;
    --amber: #FFC14D;
    --rose: #FF6D88;
    --glow-a: rgba(61, 139, 255, .3);
    --glow-b: rgba(155, 107, 255, .24);
    --screen: #0E1530;
    --screen-2: #151E40;
    --screen-fg: #EEF2FF;
    --screen-muted: #93A0C4;
    --bezel: linear-gradient(145deg, #2A3354, #0B1024 60%, #1C2443);
    --shadow: 0 30px 60px rgba(0, 0, 0, .45);
    color-scheme: dark;
}
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }

* { box-sizing: border-box; }
html { scroll-padding-top: 90px; }
html, body { overflow-x: clip; }
body { background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 16px; line-height: 1.55; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 3000; padding: 10px 16px; border-radius: 10px; background: var(--blue); color: #fff; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; color: #fff; }
.wrap-x { max-width: 1240px; margin: 0 auto; padding-inline: 16px; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.03em; line-height: 1.04; text-wrap: balance; color: var(--fg); }
h1 { font-size: clamp(44px, 6.4vw, 92px); font-weight: 800; margin: 0 0 18px; }
h2 { font-size: clamp(32px, 4.2vw, 58px); font-weight: 800; margin: 0 0 16px; }
h3 { font-size: 21px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 6px; }
.grad { background: linear-gradient(120deg, var(--blue), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; }
.kicker.ai { color: var(--violet); } .kicker.ok { color: var(--mint); } .kicker.warm { color: var(--amber); }
.lede { color: var(--muted); font-size: clamp(16px, 1.35vw, 19px); max-width: 34em; margin: 0 0 24px; }
.muted { color: var(--muted); }
main, section { position: relative; z-index: 1; }

.glow { position: fixed; inset: -20vmax; z-index: 0; pointer-events: none;
    background: radial-gradient(40vmax 40vmax at var(--gx, 72%) var(--gy, 38%), var(--glow-a), transparent 70%),
                radial-gradient(36vmax 36vmax at calc(100% - var(--gx, 72%)) calc(100% - var(--gy, 38%)), var(--glow-b), transparent 70%); }

/* ---------- Buttons ---------- */
.btn-x { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 14px;
    font: 600 15px/1 var(--body); text-decoration: none; border: 1px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.btn-x:hover { transform: translateY(-2px); color: var(--fg); }
.btn-x.primary { border: 0; color: #fff; background: linear-gradient(135deg, var(--blue), var(--violet)); box-shadow: 0 14px 30px var(--glow-a); }
.btn-x.primary:hover { color: #fff; box-shadow: 0 18px 36px var(--glow-a); }
.btn-x svg { width: 18px; height: 18px; }

/* ---------- Navbar ---------- */
.site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 12px 16px 0; }
.site-nav .nav-shell { max-width: 1240px; margin: 0 auto; border: 1px solid var(--line); border-radius: 18px; padding: 8px 10px 8px 16px;
    background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-weight: 800; font-size: 21px; color: var(--fg); }
.brand img { height: 34px; width: auto; }
.site-nav .nav-link { color: var(--muted); font-weight: 500; padding: 8px 12px !important; border-radius: 10px; white-space: nowrap; }
.site-nav .nav-link:hover, .site-nav .nav-link:focus-visible { color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.site-nav .navbar-toggler { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; }
[data-bs-theme="dark"] .site-nav .navbar-toggler-icon { filter: invert(1); }
.site-nav .dropdown-menu { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.site-nav .dropdown-item { color: var(--fg); white-space: normal; border-radius: 10px; }
.site-nav .dropdown-item:hover, .site-nav .dropdown-item:focus { background: color-mix(in srgb, var(--blue) 10%, transparent); color: var(--fg); }
.site-nav .dropdown-item small { color: var(--muted); }
.site-nav .btn-x { min-height: 42px; padding: 0 16px; }
.landing-switcher { display: flex; align-items: center; }
.landing-switch .nav-link { width: 42px; height: 42px; display: flex; justify-content: center; color: var(--fg); }
.landing-switch .dropdown-item.active, .landing-switch .dropdown-item:active { background: var(--blue); color: #fff; }
@media (max-width: 1199.98px) {
    .site-nav .navbar-collapse { padding: 10px 0 6px; }
    .site-nav .nav-actions .btn-x, .site-nav .nav-actions .dropdown { width: 100%; }
}

/* ---------- Student story: tall track + sticky stage ---------- */
.story { position: relative; z-index: 1; height: 860vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 24px;
    max-width: 1240px; margin: 0 auto; padding: 90px 16px 24px; }
.copy { position: relative; height: 100%; min-width: 0; }
/* Centred with flex, not a transform: GSAP owns the chapters' transforms while they animate. */
.chapter { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; }
.js-on .chapter:not(.hero-copy) { opacity: 0; visibility: hidden; }
.facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.facts li { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 14px; font-weight: 500; color: var(--muted); }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.paths { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; align-items: center; }
.paths > span { font-size: 14px; color: var(--muted); margin-right: 4px; }
.paths a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 14px;
    border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.paths a:hover { border-color: var(--blue); color: var(--blue); }
.paths a i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.rail { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: grid; gap: 12px; z-index: 5; }
.rail a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; text-decoration: none; color: var(--muted); font-size: 12px; font-weight: 600; }
.rail a b { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: transform .3s, background .3s; }
.rail a span { opacity: 0; transition: opacity .3s; white-space: nowrap; }
.rail a.on { color: var(--fg); } .rail a.on b { background: var(--blue); transform: scale(1.6); }
.rail:hover a span, .rail a:focus-visible span { opacity: 1; }

/* The 3D tab */
.scene { position: relative; height: 100%; min-width: 0; display: grid; place-items: center; }
.rig { position: relative; width: min(100%, 720px); transform-style: preserve-3d; will-change: transform; }
.tab { position: relative; border-radius: 34px; padding: 16px; background: var(--bezel);
    box-shadow: 0 50px 90px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .25); }
.tab::before { content: ""; position: absolute; top: 50%; left: 7px; width: 5px; height: 5px; margin-top: -2px; border-radius: 50%; background: rgba(0, 0, 0, .45); }
.screen { position: relative; width: 100%; height: 100%; border-radius: 20px; overflow: hidden; background: var(--screen); color: var(--screen-fg); }
.screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .12), transparent 35%); }
.floor { position: absolute; left: 10%; right: 10%; bottom: -60px; height: 40px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .3), transparent); filter: blur(6px); }

.pop { position: absolute; opacity: 0; pointer-events: none; z-index: 3; }
.card-pop { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 18px; white-space: nowrap; color: var(--fg);
    background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow); font-weight: 600; }
.card-pop small { display: block; color: var(--muted); font-weight: 500; font-size: 13px; }
.badge-ic, .ic { display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.badge-ic { width: 40px; height: 40px; border-radius: 12px; }
.ic { width: 46px; height: 46px; border-radius: 14px; }
.ic svg, .badge-ic svg { width: 22px; height: 22px; }
.g-blue { background: linear-gradient(150deg, #6FB0FF, #2F6FE0); } .g-violet { background: linear-gradient(150deg, #C1A6FF, #7A45F0); }
.g-mint { background: linear-gradient(150deg, #7BEBC6, #0E9F75); } .g-amber { background: linear-gradient(150deg, #FFD98A, #E59A00); }
.g-rose { background: linear-gradient(150deg, #FF9BB0, #D93458); }

/* Shared bits still used by the parents and institutes scenes */
.s-top { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.s-title { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -.01em; }
.s-sub { color: var(--screen-muted); font-size: 14px; }
.bar { height: 8px; border-radius: 6px; background: color-mix(in srgb, var(--screen-muted) 25%, transparent); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--blue), var(--violet)); }

/* ---------- The app screens: the new ExamBash app design (Aurora Frost in light mode, Aurora Glass in dark),
   drawn at the app's tablet-landscape size 1194x834 and scaled to the tab. ---------- */
.app {
    aspect-ratio: 1194 / 834; height: auto;
    --a-bg: #F3F1FA; --a-fg: #1B1733; --a-muted: #5E5980; --a-glass: rgba(255, 255, 255, .6);
    --a-glass-hi: linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .5)); --a-border: rgba(255, 255, 255, .95);
    --a-shadow: 0 20px 44px rgba(80, 60, 160, .16); --a-soft: 0 10px 24px rgba(80, 60, 160, .08);
    --a-orb1: rgba(160, 140, 255, .5); --a-orb2: rgba(255, 120, 160, .35); --a-orb3: rgba(120, 210, 255, .35);
    --a-grad: linear-gradient(135deg, #E51A4B, #6A55F0); --a-glow: rgba(106, 85, 240, .32);
    --a-chip: rgba(27, 23, 51, .06); --a-track: rgba(27, 23, 51, .1); --a-nav: rgba(255, 255, 255, .65); --a-menu: #3E3960; --a-accent: #C8103F;
    --a-ok: #12A37D; --a-ok-fg: #FFFFFF; --a-bad: #E51A4B; --a-rev: #6A55F0; --a-partial: #F2A40C; --a-unans: #A99BE0; --a-timer: #F2A40C;
    --a-idle: rgba(255, 255, 255, .8); --a-idle-bd: rgba(27, 23, 51, .12); --a-idle-fg: #5E5980; --a-inner: #FFFFFF;
    --a-donut-inner: radial-gradient(circle at 35% 28%, #FFFFFF, #F1EEFF 70%);
    --a-sel-bg: linear-gradient(135deg, rgba(229, 26, 75, .08), rgba(106, 85, 240, .14)); --a-sel-bd: #6A55F0;
    --a-opt-bg: rgba(255, 255, 255, .7); --a-opt-bd: rgba(27, 23, 51, .1); --a-dot: rgba(27, 23, 51, .3);
    --a-rev-soft: rgba(106, 85, 240, .08); --a-rev-bd: rgba(106, 85, 240, .4); --a-rev-fg: #4B37B8;
    --a-restrict-bg: linear-gradient(135deg, rgba(229, 26, 75, .1), rgba(255, 255, 255, .6)); --a-restrict-bd: rgba(229, 26, 75, .3); --a-restrict-fg: #B0123A;
    --a-paper: #FFFFFF; --a-paper-fg: #2B2840; --a-hl: rgba(255, 196, 0, .45); --a-sticky: #FFF1B8; --a-sticky-fg: #3A2E00;
    --a-sphere: radial-gradient(circle at 30% 26%, #FFFFFF 0%, #FFD1E0 22%, #C9B8FF 55%, #8FD6FF 85%, #7A8CF0 100%);
    --a-sphere-shade: inset -16px -20px 36px rgba(90, 70, 200, .3), inset 10px 12px 24px rgba(255, 255, 255, .8);
    background: var(--a-bg); color: var(--a-fg);
}
[data-bs-theme="dark"] .app {
    --a-bg: #0A0918; --a-fg: #F4F2FF; --a-muted: #B7B3D6; --a-glass: rgba(255, 255, 255, .06);
    --a-glass-hi: linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)); --a-border: rgba(255, 255, 255, .14);
    --a-shadow: 0 24px 50px rgba(0, 0, 0, .45); --a-soft: none;
    --a-orb1: rgba(140, 124, 255, .42); --a-orb2: rgba(255, 77, 122, .28); --a-orb3: rgba(80, 160, 255, .16);
    --a-grad: linear-gradient(135deg, #FF4D7A, #8C7CFF); --a-glow: rgba(255, 77, 122, .38);
    --a-chip: rgba(255, 255, 255, .1); --a-track: rgba(255, 255, 255, .12); --a-nav: rgba(20, 18, 40, .72); --a-menu: #C9C5E8; --a-accent: #FFB3C7;
    --a-ok: #2FBF8F; --a-ok-fg: #04241A; --a-bad: #FF4D7A; --a-rev: #8C7CFF; --a-partial: #FFC857; --a-unans: #8C7CFF; --a-timer: #FFC857;
    --a-idle: rgba(255, 255, 255, .08); --a-idle-bd: rgba(255, 255, 255, .14); --a-idle-fg: #A9A5C7; --a-inner: #16132C;
    --a-donut-inner: radial-gradient(circle at 35% 30%, #2A2550, #120F26 70%);
    --a-sel-bg: linear-gradient(135deg, rgba(255, 77, 122, .22), rgba(140, 124, 255, .28)); --a-sel-bd: #A99CFF;
    --a-opt-bg: rgba(255, 255, 255, .04); --a-opt-bd: rgba(255, 255, 255, .14); --a-dot: rgba(255, 255, 255, .35);
    --a-rev-soft: rgba(140, 124, 255, .14); --a-rev-bd: rgba(140, 124, 255, .5); --a-rev-fg: #D2CBFF;
    --a-restrict-bg: linear-gradient(135deg, rgba(255, 77, 122, .18), rgba(255, 77, 122, .05)); --a-restrict-bd: rgba(255, 77, 122, .35); --a-restrict-fg: #FFB3C7;
    --a-paper: #F7F5EE; --a-paper-fg: #2B2840; --a-hl: rgba(255, 196, 0, .5); --a-sticky: #FFE68A; --a-sticky-fg: #3A2E00;
    --a-sphere: radial-gradient(circle at 32% 28%, #FFB3C7 0%, #FF4D7A 38%, #7A2BD6 78%, #2A1060 100%);
    --a-sphere-shade: inset -20px -26px 44px rgba(20, 8, 60, .55);
}
.app .view { position: absolute; left: 0; top: 0; width: 1194px; height: 834px; transform: scale(var(--k, .58)); transform-origin: 0 0;
    font-family: "Manrope", system-ui, sans-serif; font-size: 15px; line-height: 1.4; overflow: hidden; background: var(--a-bg); }
.app > .view ~ .view { opacity: 0; }
.app b, .app h4 { font-weight: 700; }
.app svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.app .orb { position: absolute; border-radius: 50%; pointer-events: none; }
.app .o1 { width: 620px; height: 620px; left: 100px; top: -300px; background: radial-gradient(circle, var(--a-orb1), transparent 70%); }
.app .o2 { width: 560px; height: 560px; right: -160px; bottom: -240px; background: radial-gradient(circle, var(--a-orb2), transparent 70%); }
.app .o3 { width: 460px; height: 460px; left: 420px; bottom: -260px; background: radial-gradient(circle, var(--a-orb3), transparent 70%); }
.app .glass { background: var(--a-glass); border: 1px solid var(--a-border); box-shadow: var(--a-soft); }
.app .glass-hi { background: var(--a-glass-hi); border: 1px solid var(--a-border); box-shadow: var(--a-shadow); }
.app .mut { color: var(--a-muted); }
.app .grow { flex-grow: 1; min-width: 0; }
.app .num, .app .a-brand, .app .hc-who b, .app .sec-t, .app .st b, .app .tb-name b, .app .r-title, .app .marks b, .app .sc b, .app .dn, .app .qn, .app .btn-g { font-family: "Sora", "Manrope", sans-serif; }
.app .chip { padding: 7px 14px; border-radius: 999px; background: var(--a-chip); font-size: 13px; font-weight: 700; }
.app .btn-g { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 16px; background: var(--a-grad); color: #fff; font-weight: 600; font-size: 15px; box-shadow: 0 10px 22px var(--a-glow); white-space: nowrap; }
.app .btn-g svg { width: 16px; height: 16px; }
.app .btn-g.sm { height: 40px; font-size: 14px; border-radius: 13px; }
.app .pill { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--a-border); background: var(--a-glass); font-weight: 700; font-size: 13px; }
.app .pill.big { height: 46px; border-radius: 15px; font-size: 14px; }
.app .sq { width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--a-border); background: var(--a-glass); display: grid; place-items: center; flex-shrink: 0; }
.app .sq svg { width: 18px; height: 18px; }
.app .seg { display: inline-flex; padding: 4px; border-radius: 16px; background: var(--a-glass); border: 1px solid var(--a-border); }
.app .seg span { padding: 10px 20px; border-radius: 12px; font-weight: 600; font-size: 14px; color: var(--a-muted); }
.app .seg span.on { background: var(--a-grad); color: #fff; font-weight: 700; }
.app .tag { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--a-chip); color: var(--a-fg); }
.app .tag.on { background: var(--a-grad); color: #fff; }
/* App-style 3D icon tiles */
.app .gi { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; color: #fff; flex-shrink: 0; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5); }
.app .gi svg { width: 22px; height: 22px; stroke-width: 2; }
.app .gi.sm { width: 36px; height: 36px; border-radius: 12px; }
.app .gi.sm svg { width: 18px; height: 18px; }
.app .g3-orange { background: linear-gradient(160deg, #FFD37A, #FF7A45); color: #3A1400; box-shadow: 0 8px 18px rgba(255, 122, 69, .35), inset 0 2px 0 rgba(255, 255, 255, .5); }
.app .g3-teal { background: linear-gradient(160deg, #8CF0D4, #1FAE8A); color: #06291F; box-shadow: 0 8px 18px rgba(31, 174, 138, .35), inset 0 2px 0 rgba(255, 255, 255, .5); }
.app .g3-violet { background: linear-gradient(160deg, #B4A9FF, #6A55F0); box-shadow: 0 8px 18px rgba(106, 85, 240, .35), inset 0 2px 0 rgba(255, 255, 255, .5); }
.app .g3-lilac { background: linear-gradient(160deg, #C3B6FF, #7258E8); box-shadow: 0 8px 18px rgba(114, 88, 232, .35), inset 0 2px 0 rgba(255, 255, 255, .5); }
.app .g3-blue { background: linear-gradient(160deg, #8FD0FF, #2D7FE0); box-shadow: 0 8px 18px rgba(45, 127, 224, .35), inset 0 2px 0 rgba(255, 255, 255, .5); }
.app .g3-pink { background: linear-gradient(160deg, #FF8FAB, #E51A4B); box-shadow: 0 8px 18px rgba(229, 26, 75, .35), inset 0 2px 0 rgba(255, 255, 255, .5); }
.app .g3-amber { background: linear-gradient(160deg, #FFE08A, #F2A40C); color: #3A2600; box-shadow: 0 8px 18px rgba(242, 164, 12, .32), inset 0 2px 0 rgba(255, 255, 255, .5); }
.app .g3-coral { background: linear-gradient(160deg, #FFB3A0, #F0603C); box-shadow: 0 8px 18px rgba(240, 96, 60, .35), inset 0 2px 0 rgba(255, 255, 255, .5); }

/* Home */
.v-home { display: flex; }
.a-nav { position: relative; width: 250px; flex-shrink: 0; padding: 26px 16px 18px; background: var(--a-nav); border-right: 1px solid var(--a-border); display: flex; flex-direction: column; gap: 3px; }
.a-brand { display: flex; align-items: center; gap: 10px; padding: 0 8px; font-size: 16px; font-weight: 700; letter-spacing: .08em; }
.a-brand .eb { width: 36px; height: 36px; border-radius: 12px; background: var(--a-grad); color: #fff; font-size: 13px; letter-spacing: 0; display: grid; place-items: center; }
.a-org { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; margin-bottom: 6px; border-bottom: 1px solid var(--a-border); font-size: 13px; }
.a-org span { font-size: 12px; color: var(--a-muted); }
.mi { height: 36px; padding: 0 10px; border-radius: 12px; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--a-menu); }
.mi svg { width: 17px; height: 17px; }
.mi span { flex-grow: 1; }
.mi.on { background: var(--a-grad); color: #fff; font-weight: 700; box-shadow: 0 8px 18px var(--a-glow); }
.mi em { font-style: normal; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: #E51A4B; color: #fff; }
.a-main { position: relative; flex-grow: 1; min-width: 0; padding: 30px 32px 28px; display: flex; flex-direction: column; gap: 14px; }
.hero-card { position: relative; border-radius: 32px; padding: 26px 28px; display: flex; gap: 24px; overflow: hidden; margin-bottom: 8px; }
.hero-card .sphere { position: absolute; right: 250px; top: -90px; width: 220px; height: 220px; border-radius: 50%; background: var(--a-sphere); box-shadow: var(--a-sphere-shade); opacity: .8; }
.hc-left { position: relative; flex-grow: 1; display: flex; flex-direction: column; gap: 16px; }
.hc-who { display: flex; align-items: center; gap: 16px; }
.hc-who > div { display: flex; flex-direction: column; gap: 2px; }
.hc-who b { font-size: 28px; }
.av { width: 68px; height: 68px; border-radius: 50%; background: var(--a-grad); color: #fff; font: 700 28px "Sora", sans-serif; display: grid; place-items: center; box-shadow: 0 12px 26px var(--a-glow); }
.chips { display: flex; gap: 8px; }
.hc-right { position: relative; width: 210px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; }
.mini-card { border-radius: 22px; padding: 14px 16px; display: flex; flex-direction: column; font-size: 13px; }
.mini-card.row { flex-direction: row; align-items: center; gap: 12px; }
.mini-card .num { font-size: 26px; }
.ring { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--a-ok) calc(var(--r) * 1%), var(--a-track) 0); }
.ring b { width: 36px; height: 36px; border-radius: 50%; background: var(--a-inner); display: grid; place-items: center; font: 700 14px "Sora", sans-serif; }
.sec-t { font-size: 20px; font-weight: 600; }
.stats4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 8px; }
.st { border-radius: 24px; padding: 16px; display: flex; align-items: center; gap: 14px; background: var(--a-glass); border: 1px solid var(--a-border); box-shadow: var(--a-soft); }
.st b { display: block; font-size: 26px; line-height: 1.1; }
.st small { font-size: 13px; color: var(--a-muted); }
.tiles7 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.tl { height: 150px; border-radius: 26px; padding: 16px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; font-size: 14px; font-weight: 700;
    background: var(--a-glass); border: 1px solid var(--a-border); box-shadow: var(--a-soft); }
.tl .gi { width: 62px; height: 62px; border-radius: 20px; }
.tl .gi svg { width: 28px; height: 28px; stroke-width: 1.9; }

/* Test solve */
.v-test { display: flex; flex-direction: column; gap: 16px; padding: 22px 26px; }
.topbar { position: relative; border-radius: 24px; padding: 12px 14px 12px 20px; display: flex; align-items: center; gap: 16px; font-size: 13px; }
.tb-name { display: flex; flex-direction: column; font-size: 12px; }
.tb-name b { font-size: 18px; font-weight: 600; }
.subj-dd { text-transform: uppercase; height: 38px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--a-border); background: var(--a-chip); font-weight: 700; letter-spacing: .06em; display: flex; align-items: center; gap: 8px; }
.subj-dd svg { width: 12px; height: 12px; stroke-width: 2.6; }
.tring { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: conic-gradient(var(--a-timer) calc(var(--t) * 100%), var(--a-track) 0); }
.tring b { width: 52px; height: 52px; border-radius: 50%; background: var(--a-inner); display: grid; place-items: center; font: 700 10px "Sora", sans-serif; font-variant-numeric: tabular-nums; }
.solve { position: relative; flex-grow: 1; display: flex; gap: 18px; min-height: 0; }
.s-left { flex-grow: 1; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.s-tools { display: flex; gap: 8px; }
.qcard-a { flex-grow: 1; border-radius: 28px; padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.qhead { display: flex; align-items: center; gap: 12px; }
.qn { width: 40px; height: 40px; border-radius: 50%; background: var(--a-grad); color: #fff; font-weight: 700; display: grid; place-items: center; }
.qtext { margin: 0 0 auto; font-size: 19px; line-height: 1.6; }
.opts2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.app .opt { position: relative; min-height: 64px; border-radius: 18px; border: 1px solid var(--a-opt-bd); background: var(--a-opt-bg); display: flex; align-items: center; gap: 12px; padding: 0 16px; font-size: 18px; font-weight: 500; overflow: hidden; }
.app .opt > span { position: relative; }
.app .opt .hl { position: absolute; inset: 0; border-radius: inherit; border: 1.5px solid var(--a-sel-bd); background: var(--a-sel-bg); box-shadow: 0 10px 24px var(--a-glow); }
.app .opt .k { color: var(--a-muted); font-weight: 700; }
.app .opt .rd { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--a-dot); display: grid; place-items: center; flex-shrink: 0; }
.app .opt .rd i { width: 11px; height: 11px; border-radius: 50%; }
.app #optB { font-weight: 700; }
.app #optB .rd { border-color: var(--a-sel-bd); }
.app #optB .rd i { background: var(--a-sel-bd); }
.s-btns { display: flex; gap: 12px; }
.s-btns > span { height: 56px; border-radius: 18px; display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.b-clear { width: 140px; border: 1px solid var(--a-border); background: var(--a-glass); }
.b-rev { flex-grow: 1; border: 1px solid var(--a-rev-bd); background: var(--a-rev-soft); color: var(--a-rev-fg); }
.s-btns .btn-g { width: 180px; height: 56px; border-radius: 18px; font-size: 16px; }
.pal { width: 340px; flex-shrink: 0; border-radius: 28px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; font-size: 12px; color: var(--a-muted); }
.legend span { display: flex; align-items: center; gap: 7px; }
.lg { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.lg.a { background: var(--a-ok); } .lg.n { background: var(--a-bad); } .lg.r { background: var(--a-rev); } .lg.v { background: var(--a-idle); border: 1px solid var(--a-idle-bd); }
.pgrid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 5px; }
/* --on runs 0 -> 1 as the student answers, so the colours follow whichever theme is showing. */
.pc { --on: 1; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--a-idle-fg); background: var(--a-idle); border: 1px solid var(--a-idle-bd); }
.pc.a, .pc.m { background: color-mix(in srgb, var(--a-ok) calc(var(--on) * 100%), var(--a-idle)); color: color-mix(in srgb, var(--a-ok-fg) calc(var(--on) * 100%), var(--a-idle-fg)); }
.pc.n { background: color-mix(in srgb, var(--a-bad) calc(var(--on) * 100%), var(--a-idle)); color: color-mix(in srgb, #fff calc(var(--on) * 100%), var(--a-idle-fg)); }
.pc.r { background: color-mix(in srgb, var(--a-rev) calc(var(--on) * 100%), var(--a-idle)); color: color-mix(in srgb, #fff calc(var(--on) * 100%), var(--a-idle-fg)); }
.pc.m { background: color-mix(in srgb, var(--a-rev) calc(var(--on) * 100%), var(--a-idle)); color: color-mix(in srgb, #fff calc(var(--on) * 100%), var(--a-idle-fg)); }
.pc.cur { box-shadow: 0 0 0 3px var(--a-fg); }

/* Result */
.v-result { display: flex; flex-direction: column; gap: 16px; padding: 24px 28px 26px; }
.r-head, .r-bar { position: relative; display: flex; align-items: center; gap: 14px; }
.r-title { font-size: 22px; }
.restrict { border-radius: 16px; padding: 8px 14px 8px 8px; background: var(--a-restrict-bg); border: 1px solid var(--a-restrict-bd); display: flex; align-items: center; gap: 10px; }
.restrict .ri { width: 32px; height: 32px; border-radius: 10px; background: var(--a-bad); color: #fff; display: grid; place-items: center; }
.restrict .ri svg { width: 16px; height: 16px; }
.restrict b { display: block; font-size: 13px; color: var(--a-restrict-fg); }
.restrict small { font-size: 11px; color: var(--a-muted); }
.online { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-left: 8px; }
.online i { width: 8px; height: 8px; border-radius: 50%; background: var(--a-ok); }
.online b { color: var(--a-fg); }
.r-body { position: relative; flex-grow: 1; display: flex; gap: 18px; min-height: 0; }
.r-left { width: 400px; flex-shrink: 0; border-radius: 30px; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
/* Donut: --p (0-100) sweeps it open; --c, --pc, --w are where correct, partial and wrong end. */
.dn { --p: 100; width: 230px; height: 230px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 26px 56px var(--a-glow);
    background: conic-gradient(var(--a-ok) 0 calc(var(--p) * var(--c) * 1%), var(--a-partial) 0 calc(var(--p) * var(--pc) * 1%), var(--a-bad) 0 calc(var(--p) * var(--w) * 1%), var(--a-unans) 0 calc(var(--p) * 1%), var(--a-track) 0); }
.dn .dv, .dn .sv { border-radius: 50%; background: var(--a-donut-inner); display: grid; place-content: center; text-align: center; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .2), inset 0 -12px 26px rgba(0, 0, 0, .2); }
.dn .dv { width: 140px; height: 140px; }
.dn .dv b { font-size: 38px; line-height: 1; }
.dn .dv small { font: 500 13px "Manrope", sans-serif; color: var(--a-muted); }
.dn.sm { width: 130px; height: 130px; box-shadow: 0 14px 30px var(--a-glow); }
.dn .sv { width: 82px; height: 82px; font-size: 22px; font-weight: 700; }
.marks { align-self: stretch; border-radius: 20px; padding: 14px 18px; background: var(--a-grad); color: #fff; display: flex; align-items: baseline; justify-content: space-between; box-shadow: 0 12px 26px var(--a-glow); font-weight: 600; }
.marks b { font-size: 34px; }
.marks small { font-size: 18px; opacity: .85; }
.r-legend { align-self: stretch; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 14px; }
.r-legend span { display: flex; align-items: center; gap: 8px; }
.r-legend i { width: 12px; height: 12px; border-radius: 50%; }
.r-right { flex-grow: 1; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pctl { border-radius: 24px; padding: 18px 22px; display: flex; align-items: center; gap: 22px; }
.pctl > div:first-child { display: flex; flex-direction: column; font-size: 14px; }
.pctl .num { font-size: 30px; }
.pbar { display: flex; gap: 4px; height: 14px; margin-bottom: 8px; }
.pbar i { flex: 1; }
.pbar i:first-child { border-radius: 8px 0 0 8px; }
.pbar .rest { border-radius: 0 8px 8px 0; background: var(--a-track); }
.pe { display: flex; justify-content: space-between; font-size: 13px; color: var(--a-muted); }
.subj3 { flex-grow: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sc { border-radius: 26px; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: space-around; }
.sc > b { align-self: flex-start; font-size: 18px; font-weight: 600; }

/* Reader: Bash AI and Books */
.v-ai, .v-book { display: flex; flex-direction: column; gap: 16px; padding: 22px 26px; }
.rd-top { position: relative; display: flex; align-items: center; gap: 12px; font-size: 18px; }
.rd-top b { font-family: "Sora", sans-serif; font-weight: 600; }
.rd-top .tag { padding: 9px 16px; font-size: 13px; }
.rd-body { position: relative; flex-grow: 1; display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; min-height: 0; }
.paper { position: relative; border-radius: 22px; padding: 30px 34px; background: var(--a-paper); color: var(--a-paper-fg); font-family: Georgia, "Times New Roman", serif; font-size: 23px; line-height: 1.75; box-shadow: var(--a-shadow); }
.paper .ch { display: block; font: 700 12px "Manrope", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #C8103F; margin-bottom: 6px; }
.paper h4 { font: 700 32px "Sora", sans-serif; color: #2D2A8C; margin: 0 0 14px; }
.paper mark { background: var(--a-hl); color: inherit; border-radius: 3px; padding: 0 2px; }
/* Highlighter: a band that grows under the words, so it always follows the text lines. */
.pen { background: linear-gradient(var(--a-hl), var(--a-hl)) no-repeat 0 88% / 100% 60%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.toolbar { position: absolute; left: 50%; bottom: 74px; transform: translateX(-50%); display: flex; gap: 6px; padding: 8px; border-radius: 16px; background: #fff; box-shadow: 0 12px 30px rgba(30, 20, 80, .22); }
.tool { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #3E3960; }
.tool.on { background: linear-gradient(135deg, #E51A4B, #6A55F0); color: #fff; }
.pg { position: absolute; left: 34px; right: 34px; bottom: 22px; display: flex; justify-content: space-between; align-items: center; font: 600 13px "Manrope", sans-serif; color: #C8103F; }
.pg .tag { background: rgba(229, 26, 75, .1); color: #C8103F; }
.chat-a { border-radius: 26px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.chat-h { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.chat-h b { font-size: 17px; font-family: "Sora", sans-serif; }
.msgs { flex-grow: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; }
.app .msg { max-width: 92%; padding: 13px 15px; border-radius: 18px; font-size: 15px; line-height: 1.5; }
.app .msg.me { align-self: flex-end; background: var(--a-chip); border-bottom-right-radius: 6px; }
.app .msg.bot { align-self: flex-start; color: #fff; background: var(--a-grad); border-bottom-left-radius: 6px; }
.ask-a { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 52px; border-radius: 16px; background: var(--a-glass); border: 1px solid var(--a-border); color: var(--a-muted); justify-content: space-between; }
.warn { font-size: 12px; }
.side-col { display: flex; flex-direction: column; gap: 16px; }
.sticky-n { border-radius: 18px; padding: 20px; background: var(--a-sticky); color: var(--a-sticky-fg); font-size: 16px; line-height: 1.5; box-shadow: 0 16px 30px rgba(120, 90, 0, .18); transform: rotate(-1.5deg); }
.sticky-n b { display: block; margin-bottom: 4px; }
.dict { border-radius: 24px; padding: 20px 22px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.dict b { font: 700 24px "Sora", sans-serif; color: var(--a-accent); }
.dict em { font-style: italic; color: var(--a-muted); }
.dict p { margin: 6px 0 0; font-size: 15px; line-height: 1.5; }

/* Study planner */
.v-plan { display: flex; flex-direction: column; gap: 16px; padding: 22px 26px; }
.pl-head { position: relative; border-radius: 24px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; }
.pl-head > div { display: flex; flex-direction: column; font-size: 13px; }
.pl-head b { font: 600 20px "Sora", sans-serif; }
.pl-body { position: relative; flex-grow: 1; display: grid; grid-template-columns: 1fr 1.25fr; gap: 18px; min-height: 0; }
.pl-left { display: flex; flex-direction: column; gap: 16px; }
.diag { border-radius: 26px; padding: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.diag > b { font: 600 22px "Sora", sans-serif; margin-bottom: 10px; }
.mb { display: grid; grid-template-columns: 130px 1fr 44px; gap: 12px; align-items: center; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.mb em { font-style: normal; text-align: right; color: var(--a-muted); }
.mbar { height: 12px; border-radius: 8px; background: var(--a-track); overflow: hidden; }
.mbar i { display: block; height: 100%; border-radius: 8px; background: var(--a-grad); }
.synopsis { border-radius: 26px; padding: 20px; display: flex; gap: 14px; align-items: flex-start; }
.synopsis b { font-family: "Sora", sans-serif; }
.synopsis p { margin: 4px 0 0; font-size: 15px; line-height: 1.55; color: var(--a-muted); }
.days { display: flex; flex-direction: column; gap: 10px; }
.day-a { border-radius: 20px; padding: 14px 16px; display: flex; gap: 14px; align-items: flex-start; background: var(--a-glass); border: 1px solid var(--a-border); }
.day-a b { display: block; font-size: 15px; }
.day-a small { color: var(--a-muted); font-size: 13px; }
.day-a .tick { --on: 1; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; color: #fff;
    background: color-mix(in srgb, var(--a-ok) calc(var(--on) * 100%), transparent); border: 2px solid color-mix(in srgb, var(--a-ok) calc(var(--on) * 100%), var(--a-dot)); }
.day-a .tick svg { width: 16px; height: 16px; stroke-width: 2.6; opacity: var(--on); }
.day-a.cur { border-radius: 24px; padding: 18px; }
.day-a.cur .tick { --on: 0; }
.day-a ul { list-style: none; padding: 0; margin: 10px 0 14px; display: grid; gap: 10px; }
.day-a li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.day-a li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--a-rev); margin-right: 4px; }
.day-a li .tag:first-of-type { margin-left: auto; }
.day-a.locked { opacity: .6; }
.day-a.locked .tick { background: var(--a-chip); border-color: var(--a-dot); color: var(--a-muted); }
.day-a.locked .tick svg { opacity: 1; }

/* ---------- Proof ---------- */
.proof { padding: 40px 0 90px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stat { padding: 26px 22px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.stat b { display: block; font: 800 clamp(36px, 4.4vw, 56px)/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-weight: 500; }
.marquee { margin-top: 28px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee .track { display: flex; gap: 14px; width: max-content; animation: marquee 32s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
.marquee span { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); font-weight: 600; color: var(--muted); white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Feature cards ---------- */
.block { padding: 90px 0; }
.head { max-width: 760px; margin-bottom: 40px; }
.feat { position: relative; padding: 26px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); transition: box-shadow .35s; overflow: hidden; }
.feat:hover { box-shadow: var(--shadow); }
.feat p { color: var(--muted); margin: 0; }
.feat .ic { margin-bottom: 18px; }
.feat .shine { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
    background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--blue) 14%, transparent), transparent 60%); }
.feat:hover .shine { opacity: 1; }

/* ---------- Website + app: one pinned scene, the test travels from the website to the tab and back ---------- */
.flow-track { position: relative; z-index: 1; height: 620vh; }
.flow-stage, .par-stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; gap: 32px; align-items: center;
    max-width: 1240px; margin: 0 auto; padding: 90px 16px 24px; overflow: hidden; }
.flow-stage { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.flow-copy h2 { font-size: clamp(28px, 3.1vw, 44px); margin-bottom: 10px; }
.steps { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 4px; }
.steps li { display: flex; gap: 14px; padding: 10px 14px; border-radius: 16px; border: 1px solid transparent; transition: background .3s, border-color .3s, box-shadow .3s; }
.steps li.on { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); }
.steps .sn { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-weight: 700; font-size: 14px; border: 1px solid var(--line); color: var(--muted); }
.steps li.on .sn { border: 0; color: #fff; background: linear-gradient(135deg, var(--blue), var(--violet)); }
.steps b { display: block; font-size: 16px; line-height: 30px; }
.steps li:not(.on) b { color: var(--muted); font-weight: 600; }
.steps p { margin: 2px 0 4px; color: var(--muted); font-size: 15px; display: none; }
.steps li.on p { display: block; }
.flow-scene { position: relative; height: 100%; min-width: 0; display: grid; place-items: center; }
.flow-rig { position: relative; width: min(100%, 760px); aspect-ratio: 760 / 560; }
.dev-label { position: absolute; z-index: 3; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.l-web { left: 4px; top: -26px; }
.l-app { right: 4px; bottom: -28px; }

/* The website, drawn at 1100x740 and scaled */
.bw { position: absolute; left: 0; top: 0; width: 84%; aspect-ratio: 1100 / 740; border-radius: 16px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow); }
.bw-canvas { position: absolute; left: 0; top: 0; width: 1100px; height: 740px; transform: scale(var(--k, .58)); transform-origin: 0 0; font-family: var(--body); color: var(--fg); background: var(--bg); line-height: 1.4; }
.bw-chrome { height: 50px; display: flex; align-items: center; gap: 8px; padding: 0 18px; background: var(--surface); border-bottom: 1px solid var(--line); }
.bw-chrome i { width: 12px; height: 12px; border-radius: 50%; background: #FF6B6B; }
.bw-chrome i:nth-child(2) { background: #FBBF24; } .bw-chrome i:nth-child(3) { background: #34D399; }
.bw-chrome span { margin-left: 14px; flex-grow: 1; height: 30px; border-radius: 10px; background: var(--bg-2); display: flex; align-items: center; padding: 0 14px; font-size: 14px; color: var(--muted); }
.bw-body { position: absolute; left: 0; right: 0; top: 50px; bottom: 0; }
.bw-body > .view { position: absolute; inset: 0; display: flex; background: var(--bg); }
.bw-body > .view ~ .view { opacity: 0; }
.bw svg { width: 18px; height: 18px; flex-shrink: 0; }
.w-side { width: 220px; flex-shrink: 0; padding: 18px 12px; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.w-brand { display: flex; align-items: center; gap: 8px; font: 800 18px var(--display); padding: 4px 8px 14px; }
.wi { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--muted); }
.wi.on { background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue); font-weight: 700; }
.w-main { flex-grow: 1; min-width: 0; padding: 18px 24px; display: flex; flex-direction: column; gap: 16px; }
.w-top { display: flex; justify-content: space-between; align-items: center; }
.w-crumb { font: 700 20px var(--display); }
.w-user { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.w-user i { font-style: normal; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--blue), var(--violet)); }
.w-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.w-row { flex-grow: 1; display: grid; grid-template-columns: 1fr 1.1fr; gap: 16px; min-height: 0; }
.w-form { display: flex; flex-direction: column; gap: 14px; }
.w-form label, .w-grid2 label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); margin: 0; }
.w-input { height: 42px; border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; display: flex; align-items: center; font-size: 15px; font-weight: 500; color: var(--fg); background: var(--bg); }
.w-drop { flex-grow: 1; border: 2px dashed var(--line); border-radius: 14px; display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; font-size: 15px; color: var(--muted); }
.w-drop svg { width: 34px; height: 34px; color: var(--rose); }
.w-drop b { color: var(--fg); font-size: 16px; }
.w-bar { width: 220px; height: 8px; border-radius: 6px; background: var(--bg-2); overflow: hidden; }
.w-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--blue), var(--violet)); }
.w-review { display: flex; flex-direction: column; gap: 12px; }
.w-q { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; font-size: 14px; color: var(--muted); box-shadow: var(--shadow); }
.w-qh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; color: var(--fg); }
.w-ai { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, var(--blue), var(--violet)); }
.w-ai svg { width: 12px; height: 12px; }
.w-opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.w-opts span { padding: 6px 8px; border-radius: 8px; background: var(--bg-2); font-size: 13px; font-weight: 500; text-align: center; }
.w-opts .ok { background: color-mix(in srgb, var(--mint) 18%, transparent); color: var(--mint); font-weight: 700; }
.w-btn { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 20px; border-radius: 10px; font-weight: 700; font-size: 14px; color: #fff; background: linear-gradient(135deg, var(--blue), var(--violet)); align-self: flex-end; }
.w-btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--fg); }
.w-modal { width: 100%; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; box-shadow: var(--shadow); }
.w-steps { display: flex; gap: 8px; }
.w-steps span { flex: 1; text-align: center; padding: 9px; border-radius: 10px; background: var(--bg-2); font-size: 13px; font-weight: 600; color: var(--muted); }
.w-steps .done { color: var(--mint); }
.w-steps .on { color: #fff; background: linear-gradient(135deg, var(--blue), var(--violet)); }
.w-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sw2 { --on: 1; position: relative; width: 52px; height: 30px; border-radius: 999px; background: color-mix(in srgb, var(--blue) calc(var(--on) * 100%), var(--bg-2)); }
.sw2 i { position: absolute; top: 4px; left: calc(4px + var(--on) * 22px); width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.w-foot { display: flex; justify-content: flex-end; gap: 10px; }
.w-kpis { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; }
.w-kpis small { display: block; color: var(--muted); font-size: 13px; }
.w-kpis b { font: 800 24px var(--display); font-variant-numeric: tabular-nums; }
.w-table { padding: 4px 18px; display: flex; flex-direction: column; }
.w-th, .w-tr.fr { display: grid; grid-template-columns: 70px 1fr 90px 100px; gap: 10px; padding: 12px 0; font-size: 15px; border-bottom: 1px solid var(--line); }
.w-th { font-weight: 700; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.w-tr:last-child { border-bottom: 0; }
.w-tr.fm { display: flex; align-items: center; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 600; }
.w-tr.fm svg { width: 20px; height: 20px; color: var(--blue); }
.w-tr.fm > span:first-of-type { flex-grow: 1; }
.w-tag { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--bg-2); color: var(--muted); }
.w-ok { font-size: 13px; font-weight: 700; color: var(--mint); }

/* The student tab, in the new app design */
.ftab { position: absolute; right: 0; bottom: 0; width: 47%; z-index: 2; border-radius: 22px; padding: 9px; background: var(--bezel); box-shadow: 0 40px 70px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .25); }
.ftab-screen { border-radius: 14px; }
.t-pad { position: relative; height: 100%; padding: 36px 40px; display: flex; flex-direction: column; gap: 26px; }
.t-hello { display: flex; align-items: center; gap: 18px; }
.t-hello > div { display: flex; flex-direction: column; font-size: 18px; }
.t-hello b { font: 700 34px "Sora", sans-serif; }
.t-home .tiles7 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.t-home .tl { height: 190px; font-size: 18px; }
.t-h { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.t-h b { font: 700 34px "Sora", sans-serif; }
.t-h .seg span { font-size: 16px; }
.t-list { display: flex; flex-direction: column; gap: 16px; }
.t-test, .t-note { display: flex; align-items: center; gap: 18px; padding: 22px 26px; border-radius: 24px; background: var(--a-glass); border: 1px solid var(--a-border); box-shadow: var(--a-soft); }
.t-test { justify-content: space-between; }
.t-test b, .t-note b { display: block; font-size: 24px; }
.t-test small, .t-note small { font-size: 17px; color: var(--a-muted); }
.t-when { font-weight: 700; font-size: 17px; color: var(--a-muted); white-space: nowrap; }
.t-test.fresh { border: 2px solid var(--a-sel-bd); background: var(--a-sel-bg); box-shadow: 0 16px 36px var(--a-glow); }
.t-test.fresh .t-when { color: var(--a-accent); }
.t-note .gi.sm { width: 56px; height: 56px; border-radius: 18px; }
.t-note .gi.sm svg { width: 26px; height: 26px; }
.t-solve .t-pad { gap: 18px; padding: 26px 30px; }
.t-solve-body { flex-grow: 1; display: flex; gap: 18px; min-height: 0; }
.t-solve .qtext { font-size: 26px; }
.t-solve .pal { width: 380px; }
.t-pg { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.t-pg .pc { height: 46px; font-size: 16px; border-radius: 12px; }
.t-res { flex-direction: row; align-items: center; gap: 44px; }
.t-res .dn { width: 340px; height: 340px; flex-shrink: 0; }
.t-res .dv { width: 206px; height: 206px; }
.t-res .dv b { font-size: 54px; }
.t-res-r { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.t-res-r .r-title { font-size: 28px; }
.t-res-r .marks b { font-size: 46px; }
.t-res-r .r-legend { font-size: 18px; }
.t-res-r .btn-g { align-self: flex-start; height: 58px; font-size: 18px; }

/* The connection between the two screens */
.link { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; pointer-events: none; }
.link path { fill: none; stroke-width: 3; stroke-linecap: round; }
#flink { stroke: var(--violet); }
#fback { stroke: var(--mint); }
.fly { position: absolute; left: 40%; top: 48%; z-index: 4; opacity: 0; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; white-space: nowrap;
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); font-weight: 600; font-size: 14px; color: var(--fg); }
.fly small { display: block; color: var(--muted); font-weight: 500; font-size: 12px; }
.fly .badge-ic { width: 34px; height: 34px; border-radius: 10px; }
.fly .badge-ic svg { width: 18px; height: 18px; }

/* ---------- Features: the website and the app side by side ---------- */
.lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.lane { display: flex; flex-direction: column; gap: 12px; }
.lane-h { display: flex; align-items: center; gap: 14px; padding: 0 4px 8px; }
.lane-h b { display: block; font: 700 22px var(--display); }
.lane-h div span { color: var(--muted); font-size: 14px; }
.lanes .feat { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border-radius: 18px; }
.lanes .feat .ic { margin: 0; width: 42px; height: 42px; border-radius: 12px; }
.lanes .feat .ic svg { width: 20px; height: 20px; }
.lanes .feat h3 { font-size: 17px; margin: 0 0 2px; }
.lanes .feat p { font-size: 15px; }
.count-strip { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.count-strip b { font: 800 44px/1 var(--display); letter-spacing: -.03em; }

.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.svc { padding: 26px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.svc ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.svc li { display: flex; gap: 10px; align-items: center; font-weight: 500; }
.svc li svg { width: 18px; height: 18px; color: var(--mint); flex-shrink: 0; }

/* ---------- Guide videos: compact cards that open the video on YouTube ---------- */
.video-wrap { padding: 40px 0 90px; }
.vid-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 40px; align-items: center; }
.vids { display: grid; gap: 14px; }
.vcard { display: flex; align-items: center; gap: 16px; width: 100%; padding: 10px; border-radius: 20px; text-align: left; cursor: pointer; color: var(--fg); font: inherit;
    border: 1px solid var(--line); background: var(--surface); transition: transform .2s, box-shadow .2s, border-color .2s; }
.vcard:hover, .vcard:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--blue); }
.vcard .thumb { position: relative; width: 200px; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; flex-shrink: 0; background: linear-gradient(135deg, var(--blue), var(--violet)); }
.vcard img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vcard .play { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: #fff; color: #0B1024; display: grid; place-items: center; box-shadow: 0 8px 20px rgba(0, 0, 0, .3); transition: transform .2s; }
.vcard:hover .play { transform: scale(1.1); }
.vtext b { display: block; font-size: 17px; }
.vtext small { color: var(--muted); font-size: 14px; }
.vcard { text-decoration: none; }
.vcard[hidden] { display: none; }
.vcard:hover { color: var(--fg); }
.vtext { flex-grow: 1; min-width: 0; overflow-wrap: anywhere; }
.vtext small { display: block; }
.vtext .yt-note { font-size: 12px; font-weight: 600; color: var(--blue); margin-top: 2px; }
.vcard .ext { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; margin-right: 6px; color: var(--muted); border: 1px solid var(--line); transition: transform .2s, color .2s; }
.vcard .ext svg { width: 16px; height: 16px; transform: rotate(-45deg); }
.vcard:hover .ext { color: var(--blue); transform: translateX(3px); }

/* ---------- Parents ---------- */
.par-track { position: relative; z-index: 1; height: 230vh; }
.par-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
/* One row exactly the screen's height, so a tall scene never pushes the text below the fold. */
.flow-stage, .par-stage { grid-template-rows: minmax(0, 100%); }
.ptab { max-width: calc((100svh - 150px) * .72); }
@media (max-height: 760px) { .ptab .ctl small { display: none; } .ptab .ctl { padding: 9px 12px; } }
.checks { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 10px; }
.checks li { display: flex; gap: 12px; align-items: center; font-weight: 500; }
.checks li svg { width: 20px; height: 20px; color: var(--mint); flex-shrink: 0; }
.par-scene { display: grid; place-items: center; min-width: 0; min-height: 0; height: 100%; }
.ptab { width: min(100%, 420px); border-radius: 34px; padding: 14px; background: var(--bezel); box-shadow: 0 50px 90px rgba(0, 0, 0, .28); }
.ptab .screen { padding: 22px; }
.ctl { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--screen-2); margin-bottom: 10px; }
.ctl .ic { width: 38px; height: 38px; border-radius: 11px; }
.ctl .ic svg { width: 18px; height: 18px; }
.ctl .grow { flex-grow: 1; font-weight: 600; font-size: 15px; min-width: 0; }
.ctl .grow small { display: block; color: var(--screen-muted); font-weight: 500; font-size: 13px; }
.sw { width: 48px; height: 28px; border-radius: 999px; background: color-mix(in srgb, var(--screen-muted) 30%, transparent); position: relative; flex-shrink: 0; }
.sw i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.sw.on { background: var(--blue); }
.sw.on i { left: 23px; }

/* ---------- About ---------- */
.about { padding: 110px 0; }
.statement { font: 800 clamp(28px, 4vw, 54px)/1.15 var(--display); letter-spacing: -.03em; max-width: 22em; margin: 0 0 30px; text-wrap: balance; }
.about-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 980px; }

/* ---------- Three doors ---------- */
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.door { display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 26px; text-decoration: none; background: var(--surface); border: 1px solid var(--line); transition: transform .3s, box-shadow .3s, border-color .3s; }
.door:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--blue); color: var(--fg); }
.door p { color: var(--muted); margin: 0; flex-grow: 1; }
.door .go { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--blue); }
.door .go svg { width: 18px; height: 18px; transition: transform .2s; }
.door:hover .go svg { transform: translateX(4px); }

/* ---------- Contact ---------- */
.contact { padding: 90px 0; }
.form-card { padding: 30px; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.form-card .form-label { font-weight: 600; font-size: 14px; color: var(--fg); }
.form-card .form-control, .form-card .form-select { background: var(--bg); border: 1px solid var(--line); color: var(--fg); border-radius: 12px; padding: 12px 14px; }
.form-card .form-control:focus, .form-card .form-select:focus { border-color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 18%, transparent); background: var(--bg); color: var(--fg); }
.info { display: grid; gap: 22px; }
.info > div { display: flex; gap: 14px; align-items: flex-start; }
.info h3 { font-size: 17px; margin: 2px 0 4px; }
.info p { margin: 0; color: var(--muted); }

/* ---------- Footer ---------- */
.footer { position: relative; z-index: 1; padding: 64px 0 28px; border-top: 1px solid var(--line); background: var(--bg-2); }
.footer h2 { font: 700 15px var(--body); letter-spacing: 0; margin: 0 0 14px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer a { color: var(--muted); text-decoration: none; }
.footer a:hover, .footer a:focus-visible { color: var(--fg); text-decoration: underline; }
.footer .brand { color: var(--fg); }
.social { display: flex; gap: 8px; flex-wrap: wrap; }
.social a { width: 44px; height: 44px; border-radius: 12px; display: inline-grid; place-items: center; border: 1px solid var(--line); background: var(--surface); }
.social svg { width: 19px; height: 19px; }

/* ---------- Languages ----------
   Indian scripts set wider and taller than Latin at the same size (long words, stacked vowel marks), so their
   display sizes step down and their line-heights open up. Chinese keeps the sizes but drops the negative tracking.
   landing-home.js then checks every pinned chapter fits its screen and trims the heading if it still does not. */
h1, h2, h3, .statement { overflow-wrap: break-word; }
/* Set by landing-home.js only when a chapter cannot fit even with a smaller heading. */
.tight .facts, .tight .paths, .tight .checks { display: none; }
.tighter .lede, .tighter .steps li.on p { display: none; }
:lang(zh) :is(h1, h2, h3, .statement) { letter-spacing: 0; line-height: 1.2; }
html:is([lang="hi"], [lang="te"], [lang="mr"], [lang="ta"], [lang="bn"], [lang="gu"]) :is(h1, h2, h3, .statement) { line-height: 1.32; letter-spacing: 0; }
html:is([lang="hi"], [lang="te"], [lang="mr"], [lang="ta"], [lang="bn"], [lang="gu"]) h1 { font-size: clamp(34px, 4.4vw, 62px); }
html:is([lang="hi"], [lang="te"], [lang="mr"], [lang="ta"], [lang="bn"], [lang="gu"]) h2 { font-size: clamp(26px, 3vw, 42px); }
html:is([lang="hi"], [lang="te"], [lang="mr"], [lang="ta"], [lang="bn"], [lang="gu"]) .flow-copy h2 { font-size: clamp(22px, 2.3vw, 32px); }
html:is([lang="hi"], [lang="te"], [lang="mr"], [lang="ta"], [lang="bn"], [lang="gu"]) .statement { font-size: clamp(24px, 3vw, 40px); line-height: 1.4; }
html:is([lang="hi"], [lang="te"], [lang="mr"], [lang="ta"], [lang="bn"], [lang="gu"]) .lede { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.65; }
html:is([lang="hi"], [lang="te"], [lang="mr"], [lang="ta"], [lang="bn"], [lang="gu"]) .kicker { letter-spacing: .04em; }
html:is([lang="hi"], [lang="te"], [lang="mr"], [lang="ta"], [lang="bn"], [lang="gu"]) .steps p, html:is([lang="hi"], [lang="te"], [lang="mr"], [lang="ta"], [lang="bn"], [lang="gu"]) .feat p { line-height: 1.6; }
html:is([lang="ta"], [lang="te"], [lang="mr"]) .site-nav .nav-link { font-size: 14px; padding: 8px 8px !important; }

/* ---------- Phones and small tablets: the scene on top, the words below ---------- */
@media (max-width: 991.98px) {
    .stage, .flow-stage, .par-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 12px; align-items: stretch; padding-top: 84px; }
    .scene, .flow-scene, .par-scene { grid-row: 1; min-height: 0; }
    .copy { grid-row: 2; height: 46svh; }
    .chapter { justify-content: flex-start; }
    .flow-copy, .par-copy { grid-row: 2; }
    .par-copy .checks { display: none; }
    .flow-copy h2 { font-size: clamp(22px, 5.6vw, 32px); }
    .steps li:not(.on) { display: none; }
    .steps li.on { box-shadow: none; }
    .steps { margin-top: 6px; }
    .flow-track { height: 560vh; }
    .flow-rig { width: min(100%, 560px); }
    .dev-label { display: none; }
    .fly { left: 22%; font-size: 12px; padding: 8px 10px; }
    .fly .badge-ic { width: 28px; height: 28px; }
    .ftab { width: 54%; }
    .lanes, .vid-grid { grid-template-columns: minmax(0, 1fr); }
    .rig { width: min(100%, 520px); }
    .ptab { width: min(64%, 300px); }
    .ptab .ctl small { display: none; }
    .ptab .ctl { padding: 9px 10px; margin-bottom: 8px; }
    .par-scene { min-height: 0; overflow: hidden; }
    .rail { display: none; }
    .stats, .services, .doors, .about-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .card-pop { font-size: 13px; padding: 10px 12px; }
    .card-pop .badge-ic { width: 32px; height: 32px; }
    .story { height: 760vh; }
}
@media (max-width: 575.98px) {
    h1 { font-size: clamp(36px, 10.5vw, 52px); }
    h2 { font-size: clamp(27px, 8vw, 40px); }
    html:is([lang="hi"], [lang="te"], [lang="mr"], [lang="ta"], [lang="bn"], [lang="gu"]) h1 { font-size: clamp(28px, 8vw, 38px); }
    html:is([lang="hi"], [lang="te"], [lang="mr"], [lang="ta"], [lang="bn"], [lang="gu"]) h2 { font-size: clamp(22px, 6.2vw, 30px); }
    html:is([lang="hi"], [lang="te"], [lang="mr"], [lang="ta"], [lang="bn"], [lang="gu"]) .flow-copy h2 { font-size: clamp(19px, 5.4vw, 26px); }
    .lede { font-size: 16px; margin-bottom: 16px; }
    .stats { gap: 10px; } .stat { padding: 18px 16px; }
    .services, .doors, .about-cols { grid-template-columns: minmax(0, 1fr); }
    .vcard .thumb { width: 112px; }
    .vcard { gap: 12px; }
    .vcard .ext { display: none; }
    .vtext b { font-size: 15px; }
    .flow-copy .kicker { margin-bottom: 6px; }
    .paths { margin-top: 14px; }
    .hero-copy .lede { display: none; }
    .ptab .screen { padding: 14px; }
}

/* Without the animation library the scroll stories become ordinary stacked sections. */
.js-off .story, .js-off .flow-track, .js-off .par-track { height: auto; }
.js-off .stage, .js-off .flow-stage, .js-off .par-stage { position: relative; height: auto; }
.js-off .stage { display: block; }
.js-off .copy { height: auto; }
.js-off .chapter { position: relative; inset: auto; margin-bottom: 56px; }
.js-off .scene { height: 60vh; }
.js-off .rail { display: none; }
.js-off .steps li { display: flex; }
.js-off .steps p { display: block; }
.js-off .fly { display: none; }

@media (prefers-reduced-motion: reduce) {
    .marquee .track { animation: none; }
    .door, .btn-x { transition: none; }
}