:root { --blue:#254ce0; --blue-dark:#1537b8; --ink:#10213f; --muted:#52617a; --aqua:#0874ab; --fog:#f4f7fc; --line:#dce5f0; }
* { box-sizing:border-box; }
html { scroll-padding-top:24px; }
body { margin:0; color:var(--ink); background:#fff; font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; line-height:1.65; }
a { color:var(--blue); text-underline-offset:4px; }
a:focus-visible,summary:focus-visible { outline:3px solid var(--blue); outline-offset:5px; border-radius:4px; }
[id] { scroll-margin-top:24px; }
.wrap { width:min(1120px,calc(100% - 48px)); margin-inline:auto; }
.skip-link { position:absolute; inset-inline-start:20px; top:-90px; padding:12px 18px; background:#fff; z-index:20; }
.skip-link:focus { top:12px; }
.hero { position:relative; overflow:hidden; background:linear-gradient(130deg,#fff 25%,#f1f6ff 100%); }
.hero::after { content:""; position:absolute; inset-inline-end:-130px; top:130px; width:560px; height:560px; border-radius:50%; background:#e8f0ff; z-index:0; pointer-events:none; }
nav { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:28px; }
.mark { display:inline-flex; align-items:center; gap:10px; font-size:1.04rem; letter-spacing:-.035em; font-weight:800; text-decoration:none; }
.mark i { display:block; position:relative; overflow:hidden; width:30px; height:30px; border-radius:9px 18px 18px 9px; background:var(--blue); }
.mark i::after { content:""; position:absolute; width:29px; height:29px; inset-inline-end:-13px; border-radius:50%; background:#1a9bd7; }
.mark span { font-weight:500; }
.nav-links { display:flex; gap:24px; align-items:center; }
.nav-links a { font-size:.88rem; color:var(--muted); }
.hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:1.25fr 1fr; gap:64px; align-items:center; padding-block:66px 94px; }
.kicker { margin:0 0 20px; color:var(--aqua); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; font-weight:800; }
h1,h2,h3,p { overflow-wrap:break-word; }
h1 { margin:0; color:var(--blue); font-size:clamp(3.1rem,6.1vw,5.5rem); line-height:1.03; letter-spacing:-.065em; font-weight:800; }
.lead { margin:28px 0 30px; max-width:535px; color:var(--muted); font-size:1.08rem; }
.button { display:inline-flex; min-height:54px; align-items:center; justify-content:center; padding:14px 25px; border-radius:10px; color:#fff; background:var(--blue); font-weight:750; text-align:center; text-decoration:none; box-shadow:0 5px 0 var(--blue-dark); }
.button:focus-visible { outline-color:var(--ink); }
.nav-links .button { color:#fff; font-size:.85rem; min-height:44px; padding:10px 18px; box-shadow:0 3px 0 var(--blue-dark); }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:18px 24px; }
.lesson-link { display:inline-flex; align-items:center; min-height:44px; font-weight:700; font-size:.9rem; }
.section-action { margin:32px 0 0; }
.trust { margin:22px 0 0; color:var(--muted); font-size:.8rem; }
.study-card { position:relative; padding:32px; border:1px solid #d9e3f3; border-radius:22px; background:#fff; box-shadow:0 22px 60px #10213f10; }
.card-eyebrow { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-block-end:24px; color:var(--muted); font-size:.75rem; }
.pill { padding:5px 10px; color:var(--blue-dark); background:#edf2ff; border-radius:30px; font-weight:700; }
.study-card h2 { max-width:320px; font-size:1.8rem; line-height:1.2; letter-spacing:-.045em; }
.example-claim { margin:22px 0; padding:19px 20px; background:var(--fog); border-radius:12px; font-size:1.03rem; }
.example-claim span { display:block; margin-block-end:7px; font-size:.75rem; color:var(--muted); }
.checklist { margin:0; padding:0; list-style:none; }
.checklist li { display:flex; align-items:flex-start; gap:12px; padding-block:10px; color:var(--muted); font-size:.9rem; }
.checklist b { display:grid; flex:0 0 24px; height:24px; place-items:center; border-radius:50%; color:var(--blue); background:#edf2ff; font-size:.73rem; }
.card-bottom { margin:23px 0 0; padding-block-start:19px; border-block-start:1px solid var(--line); color:var(--muted); font-size:.78rem; }
main { padding-block:78px 0; }
.intro { display:grid; grid-template-columns:1fr 1.1fr; gap:80px; align-items:start; }
h2 { margin:0; font-size:clamp(2rem,3.8vw,3rem); line-height:1.1; letter-spacing:-.05em; }
.intro p { margin:0; color:var(--muted); }
.section { margin-block-start:88px; }
.section-heading { margin-block-end:32px; max-width:670px; }
.section-heading>p:last-child:not(.kicker) { color:var(--muted); margin:20px 0 0; }
.curriculum { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.module { display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding:28px; border:1px solid var(--line); border-radius:16px; }
.number { display:grid; place-items:center; width:38px; height:38px; margin-block-end:30px; border-radius:11px; background:#eaf0ff; color:var(--blue); font-size:.78rem; font-weight:800; }
h3 { margin:0 0 10px; font-size:1.12rem; line-height:1.35; letter-spacing:-.025em; }
.module p { margin:0 0 22px; color:var(--muted); font-size:.93rem; }
.module a { margin-block-start:auto; font-weight:700; padding-block:8px; }
.lesson-section { padding-block:72px; background:var(--fog); }
.lesson-section .section-heading { margin-block-end:40px; }
.lessons { display:grid; gap:24px; }
.lesson { padding:34px; background:#fff; border:1px solid var(--line); border-radius:16px; }
.lesson-meta { margin:0 0 10px; color:var(--aqua); font-size:.76rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.lesson h3 { font-size:1.5rem; margin-block-end:20px; }
.lesson-body { display:grid; grid-template-columns:1.2fr 1fr; gap:38px; }
.lesson-body p { margin:0 0 15px; color:var(--muted); }
.lesson-body p:last-child { margin-block-end:0; }
.example { padding:22px; border-radius:12px; background:var(--fog); }
.example strong { display:block; margin-block-end:10px; }
.example p { font-size:.92rem; }
.example .equation { color:var(--ink); font-size:1.02rem; font-weight:700; font-variant-numeric:tabular-nums; }
.knowledge { margin-block-start:25px; border-block-start:1px solid var(--line); }
summary { min-height:44px; padding-block:18px; cursor:pointer; font-weight:700; }
.knowledge p { max-width:800px; margin:0; padding-block-end:4px; color:var(--muted); }
.sources { margin-block-start:42px; max-width:850px; }
.sources h3 { font-size:1rem; }
.sources ul { margin:12px 0 0; padding-inline-start:20px; color:var(--muted); }
.sources li { margin-block:10px; font-size:.86rem; }
.faq { display:grid; grid-template-columns:1fr 1.1fr; gap:80px; }
.faq-list details { border-block-end:1px solid var(--line); }
.faq-list details:first-child summary { padding-block-start:0; }
.faq-list p { margin:0; padding-block-end:22px; color:var(--muted); }
.intro p.bot-next { margin-block:24px; }
.intro p.bot-note { font-size:.78rem; }
.human-check { width:min(416px,calc(100% - 32px)); max-height:calc(100dvh - 32px); padding:32px; border:1px solid var(--line); border-radius:20px; color:var(--ink); background:#fff; box-shadow:0 24px 64px #00000029; }
.human-check::backdrop { background:#10213f7a; }
.human-check h2 { padding-inline-end:24px; font-size:1.75rem; }
.human-check p { color:var(--muted); font-size:.92rem; margin-block:16px; }
.human-check .check-note { font-size:.76rem; }
.check-close { position:absolute; inset-block-start:12px; inset-inline-end:12px; width:44px; height:44px; border:0; border-radius:10px; color:var(--ink); background:transparent; font-size:1.8rem; cursor:pointer; }
.check-widget { display:flex; justify-content:center; min-height:70px; margin-block:20px; }
#check-error { color:#9b2638; }
.check-retry { min-height:44px; padding:10px 16px; border:1px solid var(--line); border-radius:9px; background:var(--fog); color:var(--ink); font:inherit; font-weight:700; cursor:pointer; }
button:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
body:has(.human-check[open]) { overflow:hidden; }
.closing { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:32px; padding:38px; margin-block:72px; background:#edf3ff; border-radius:16px; }
.closing h2 { font-size:2rem; }
.closing p { margin:14px 0 0; color:var(--muted); }
footer { padding-block:34px; background:var(--ink); color:#d6dfed; font-size:.8rem; }
.footer-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:50px; }
footer p { margin:0; }
footer .brand { color:#fff; font-weight:800; margin-block-end:8px; }
@media (hover:hover) { .button:hover { background:var(--blue-dark); } summary:hover { color:var(--blue); } }
@media (prefers-reduced-motion:no-preference) { html { scroll-behavior:smooth; } .button { transition:background-color 150ms ease; } }
@media(max-width:1000px) { .hero-grid { gap:36px; } .study-card { padding:26px; } .intro,.faq { gap:40px; } }
@media(max-width:760px) { .hero-grid { grid-template-columns:1fr; padding-block:45px 64px; gap:45px; } h1 { font-size:clamp(3.1rem,9vw,4.7rem); } .hero-copy { max-width:600px; } .study-card { max-width:560px; width:100%; } .intro,.faq,.lesson-body,.footer-grid { grid-template-columns:1fr; gap:24px; } .curriculum { grid-template-columns:1fr; } .module { padding:25px; } .module .number { margin-block-end:20px; } .module p { margin-block-end:14px; } .section { margin-block-start:60px; } main { padding-block-start:60px; } .lesson-section { padding-block:52px; } .lesson { padding:26px; } .closing { flex-direction:column; align-items:flex-start; padding:28px; margin-block:60px; } }
@media(max-width:420px) { .wrap { width:calc(100% - 32px); } nav { flex-wrap:wrap; gap:14px; padding-block:22px; } .nav-links { gap:20px; } h1 { font-size:3.1rem; } .lesson,.study-card { padding:22px; } .example { padding:18px; } .lesson h3 { font-size:1.35rem; } }
@media(forced-colors:active) { .button { border:2px solid ButtonText; } .number,.pill { border:1px solid CanvasText; } }