:root {
  --navy: #07386f;
  --navy-deep: #082a52;
  --blue: #0879b8;
  --teal: #0598a8;
  --green: #62a91e;
  --orange: #f47a0b;
  --yellow: #f8b917;
  --pink: #ef3262;
  --purple: #6d49a8;
  --ink: #18304c;
  --muted: #607086;
  --cream: #fff8e8;
  --paper: #ffffff;
  --line: rgba(24, 48, 76, .12);
  --shadow: 0 22px 55px rgba(20, 52, 84, .13);
  --round: 28px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { color: var(--ink); background: var(--cream); font-family: "Trebuchet MS", "Avenir Next", "Segoe UI", Arial, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.section { padding: 110px 0; position: relative; }

.announcement { min-height: 34px; padding: 8px 20px; display: flex; align-items: center; justify-content: center; gap: 13px; color: #fff; background: var(--navy-deep); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; }
.announcement span { color: #ffd450; }
.announcement i { width: 4px; height: 4px; background: var(--orange); border-radius: 50%; }
.site-nav { position: relative; z-index: 30; background: rgba(255,248,232,.95); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.nav-row { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand-link { display: flex; align-items: center; gap: 14px; }
.brand-link b { padding-left: 14px; border-left: 1px solid var(--line); color: var(--muted); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
.scolatio-brand { display: inline-flex; align-items: baseline; color: var(--navy); font-size: 27px; line-height: 1; font-weight: 900; letter-spacing: -.055em; white-space: nowrap; }
.scolatio-brand .brand-dot { color: var(--pink); }
.scolatio-brand small { font-size: .55em; letter-spacing: -.03em; }
.nav-menu { display: flex; align-items: center; gap: 29px; font-size: 12px; font-weight: 800; }
.nav-menu > a:not(.nav-cta) { position: relative; }
.nav-menu > a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 3px; border-radius: 10px; background: var(--orange); transition: right .2s ease; }
.nav-menu > a:not(.nav-cta):hover::after { right: 0; }
.nav-cta { padding: 12px 19px; color: #fff; background: var(--navy); border-radius: 999px; box-shadow: 0 8px 20px rgba(7,56,111,.18); }

.hero { min-height: 750px; position: relative; overflow: hidden; background: radial-gradient(circle at 92% 10%, rgba(248,185,23,.28), transparent 26%), radial-gradient(circle at 5% 95%, rgba(5,152,168,.1), transparent 29%), var(--cream); }
.hero::before { content: ""; position: absolute; width: 550px; height: 550px; right: -260px; bottom: -260px; border: 75px solid rgba(8,121,184,.07); border-radius: 50%; }
.hero-layout { min-height: 750px; padding: 66px 0 72px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 58px; position: relative; z-index: 2; }
.overline, .section-label { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); font-size: 10px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.overline { padding: 8px 13px; background: #fff; border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 8px 22px rgba(20,52,84,.07); }
.overline b { color: var(--orange); }
h1, h2, h3 { line-height: 1.06; letter-spacing: -.045em; }
h1 { margin: 24px 0; max-width: 690px; font-size: clamp(46px, 5.1vw, 72px); font-weight: 900; -webkit-text-stroke: .35px currentColor; }
h1 > span { color: var(--navy); }
h1 em, h2 em { color: var(--pink); font-style: normal; position: relative; }
h1 em { white-space: nowrap; }
h1 em::after { content: ""; height: 9px; position: absolute; left: 1%; right: -1%; bottom: 1px; z-index: -1; background: var(--yellow); border-radius: 20px; opacity: .7; transform: rotate(-1deg); }
.hero-copy > p { max-width: 680px; color: var(--muted); font-size: clamp(16px, 1.6vw, 19px); }
.hero-copy > p strong { color: var(--navy); }
.hero-checks { margin: 26px 0 32px; display: flex; flex-wrap: wrap; gap: 11px 20px; }
.hero-checks span { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 750; }
.hero-checks b { width: 21px; height: 21px; display: grid; place-items: center; color: #fff; background: var(--green); border-radius: 50%; font-size: 10px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.teacher-promo { max-width: 590px; margin-top: 22px; padding: 12px 15px; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 11px; color: var(--navy-deep); border: 1px solid rgba(244,122,11,.2); border-radius: 15px; background: linear-gradient(110deg,#fff7d7,#fff0dc); box-shadow: 0 12px 30px rgba(7,56,111,.08); transition: transform .25s ease, box-shadow .25s ease; }
.teacher-promo:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(7,56,111,.13); }
.teacher-promo-icon { width: 36px; height: 36px; display: grid; place-items: center; color: #fff; background: var(--orange); border-radius: 50%; font-size: 17px; }
.teacher-promo > span:nth-child(2) { font-size: 10px; font-weight: 700; line-height: 1.45; }
.teacher-promo strong { display: block; color: var(--orange); font-size: 12px; }
.teacher-promo b { padding: 2px 6px; color: #fff; background: var(--navy); border-radius: 5px; letter-spacing: .08em; }
.teacher-promo em { color: var(--blue); font-size: 9px; font-style: normal; font-weight: 900; white-space: nowrap; }
.button { min-height: 58px; padding: 16px 27px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; border-radius: 999px; font-size: 14px; font-weight: 900; letter-spacing: .01em; transition: transform .25s ease, box-shadow .25s ease; }
.button:hover { transform: translateY(-3px); }
.button > span { font-size: 22px; line-height: 1; }
.button-blue { color: #fff; background: linear-gradient(115deg, var(--navy), var(--blue)); box-shadow: 0 16px 34px rgba(7,56,111,.26); }
.text-link { display: inline-flex; gap: 9px; align-items: center; color: var(--navy); font-size: 12px; font-weight: 850; border-bottom: 2px solid rgba(7,56,111,.18); }
.text-link span { color: var(--orange); }

.cover-collage { min-height: 580px; position: relative; }
.collage-halo { width: 430px; height: 430px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 35px rgba(248,185,23,.12), 0 0 0 70px rgba(248,185,23,.055); }
.collage-card { width: 195px; aspect-ratio: .704; position: absolute; object-fit: cover; border: 7px solid #fff; border-radius: 18px; box-shadow: 0 24px 45px rgba(13,44,76,.22); transition: transform .3s ease; }
.collage-card:hover { z-index: 10; transform: rotate(0) translateY(-10px) scale(1.04); }
.card-main { width: 252px; left: 50%; top: 50%; z-index: 6; transform: translate(-50%,-50%) rotate(-1deg); border-width: 9px; box-shadow: 0 30px 58px rgba(13,44,76,.3),0 0 0 5px rgba(255,193,7,.18); }
.card-main:hover { transform: translate(-50%,-50%) rotate(0) translateY(-10px) scale(1.035); }
.card-one { width: 168px; left: 2%; top: 38px; z-index: 2; transform: rotate(-11deg); }
.card-two { width: 174px; right: 0; top: 48px; z-index: 3; transform: rotate(10deg); }
.card-three { width: 158px; left: 7%; bottom: 23px; z-index: 4; transform: rotate(8deg); }
.card-four { width: 160px; right: 6%; bottom: 18px; z-index: 5; transform: rotate(-8deg); }
.collage-seal { width: 104px; height: 104px; position: absolute; right: -1%; bottom: 218px; z-index: 8; display: grid; align-content: center; justify-items: center; color: #fff; background: var(--pink); border: 6px solid #fff; border-radius: 50%; box-shadow: var(--shadow); transform: rotate(-7deg); }
.collage-seal strong { font-size: 42px; line-height: .8; }
.collage-seal span { max-width: 65px; margin-top: 8px; font-size: 9px; line-height: 1.1; text-transform: uppercase; text-align: center; font-weight: 900; letter-spacing: .05em; }
.hero-scribble { position: absolute; opacity: .4; }
.scribble-one { width: 20px; height: 20px; left: 4%; top: 18%; background: var(--green); border-radius: 50%; box-shadow: 36px -28px 0 var(--orange), 62px 15px 0 var(--pink); }
.scribble-two { width: 55px; height: 14px; left: 46%; bottom: 8%; border-top: 5px dashed var(--teal); transform: rotate(18deg); }

.format-strip { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.format-grid { min-height: 112px; display: grid; grid-template-columns: repeat(4, 1fr); }
.format-grid > div { display: flex; align-items: center; justify-content: center; gap: 13px; padding: 20px; border-right: 1px solid var(--line); }
.format-grid > div:last-child { border: 0; }
.format-grid strong { color: var(--orange); font-size: 31px; line-height: 1; letter-spacing: -.04em; }
.format-grid > div:nth-child(2) strong { color: var(--green); }.format-grid > div:nth-child(3) strong { color: var(--blue); }.format-grid > div:nth-child(4) strong { color: var(--purple); }
.format-grid span { max-width: 105px; color: var(--muted); font-size: 9px; line-height: 1.35; text-transform: uppercase; font-weight: 850; letter-spacing: .1em; }

h2 { font-size: clamp(38px, 4.4vw, 59px); }
.section-label { margin-bottom: 20px; }
.section-label.light { color: #ffd451; }
.distinction { background: #fff; }
.distinction-layout { display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 90px; }
.distinction-copy h2 { max-width: 650px; }
.distinction-copy > p { max-width: 640px; margin-top: 25px; color: var(--muted); font-size: 17px; }
.distinction-copy ul { margin-top: 35px; display: grid; gap: 13px; list-style: none; }
.distinction-copy li { padding: 17px 19px; display: grid; grid-template-columns: 42px 1fr; gap: 15px; align-items: center; background: var(--cream); border: 1px solid var(--line); border-radius: 16px; }
.distinction-copy li > b { width: 40px; height: 40px; display: grid; place-items: center; color: #fff; background: var(--navy); border-radius: 12px; font-size: 10px; }
.distinction-copy li:nth-child(2) > b { background: var(--orange); }.distinction-copy li:nth-child(3) > b { background: var(--green); }
.distinction-copy li span { color: var(--muted); font-size: 12px; }
.distinction-copy li strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: 15px; }
.file-visual { min-height: 565px; position: relative; display: grid; place-items: center; border-radius: 38px; background: radial-gradient(circle at 50% 50%, rgba(248,185,23,.43), transparent 38%), linear-gradient(145deg,#e8f7f5,#f4fbff); overflow: hidden; }
.file-visual::before { content: "PDF · PDF · PDF · PDF · PDF"; position: absolute; left: -20px; top: 20px; color: rgba(7,56,111,.045); font-size: 76px; font-weight: 900; letter-spacing: .08em; transform: rotate(-9deg); white-space: nowrap; }
.file-stack { width: 205px; position: absolute; border: 6px solid #fff; border-radius: 16px; box-shadow: 0 24px 45px rgba(13,44,76,.19); overflow: hidden; }
.file-stack img { width: 100%; aspect-ratio: .704; object-fit: cover; }
.stack-back { left: 15%; top: 68px; transform: rotate(-13deg); opacity: .82; }
.stack-middle { right: 12%; top: 70px; transform: rotate(12deg); opacity: .9; }
.stack-front { width: 230px; z-index: 4; top: 91px; }
.pdf-tab { position: absolute; right: 9px; top: 9px; padding: 6px 10px; color: #fff; background: var(--pink); border-radius: 8px; font-size: 9px; font-weight: 900; letter-spacing: .12em; box-shadow: 0 4px 10px rgba(0,0,0,.15); }
.file-caption { min-width: 290px; padding: 17px 21px; position: absolute; z-index: 8; left: 50%; bottom: 35px; transform: translateX(-50%); display: grid; grid-template-columns: 35px 1fr; color: var(--ink); background: #fff; border-radius: 17px; box-shadow: var(--shadow); }
.file-caption > span { width: 30px; height: 30px; grid-row: span 2; display: grid; place-items: center; align-self: center; color: #fff; background: var(--green); border-radius: 50%; font-weight: 900; }
.file-caption strong { font-size: 14px; }.file-caption small { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }

.problem-section { overflow: hidden; color: #fff; background: var(--navy-deep); }
.problem-section::before { content: ""; width: 500px; height: 500px; position: absolute; left: -270px; top: -250px; border: 80px solid rgba(255,255,255,.025); border-radius: 50%; }
.problem-head { max-width: 900px; }
.problem-head h2 { color: #fff; }.problem-head h2 em { color: var(--yellow); }
.problem-cards { margin-top: 55px; display: grid; grid-template-columns: repeat(4,1fr); gap: 15px; }
.problem-cards article { --problem-color: var(--yellow); --problem-rgb: 255,193,7; position: relative; min-height: 240px; padding: 28px 25px; border: 1px solid rgba(var(--problem-rgb),.27); border-radius: 20px; background: linear-gradient(150deg,rgba(var(--problem-rgb),.105),rgba(255,255,255,.045) 48%); box-shadow: inset 0 1px 0 rgba(255,255,255,.06),0 20px 45px rgba(0,0,0,.12); overflow: hidden; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.problem-cards article::after { content: ""; position: absolute; width: 150px; height: 150px; top: -85px; right: -70px; border-radius: 50%; background: rgba(var(--problem-rgb),.12); filter: blur(3px); pointer-events: none; }
.problem-cards article:hover { transform: translateY(-5px); border-color: rgba(var(--problem-rgb),.48); box-shadow: 0 25px 55px rgba(0,0,0,.2),0 0 32px rgba(var(--problem-rgb),.08); }
.problem-cards article:nth-child(2) { --problem-color: var(--orange); --problem-rgb: 246,123,29; }.problem-cards article:nth-child(3) { --problem-color: var(--green); --problem-rgb: 104,166,49; }.problem-cards article:nth-child(4) { --problem-color: var(--pink); --problem-rgb: 236,52,101; }
.problem-cards article > span { position: relative; z-index: 1; width: 58px; height: 58px; display: grid; place-items: center; color: var(--navy-deep); background: linear-gradient(145deg,#fff3a5 0%,var(--problem-color) 62%,#efa900 100%); border: 2px solid rgba(255,255,255,.65); border-radius: 18px; box-shadow: 0 13px 28px rgba(var(--problem-rgb),.32),inset 0 1px 1px rgba(255,255,255,.7); font-size: 15px; font-weight: 900; letter-spacing: .04em; transform: rotate(-3deg); }
.problem-cards article:nth-child(n+2) > span { color: #fff; background: linear-gradient(145deg,rgba(255,255,255,.35),var(--problem-color) 38%,rgba(var(--problem-rgb),.72)); text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.problem-cards h3 { position: relative; z-index: 1; margin: 25px 0 10px; color: #fff; font-size: 19px; font-weight: 900; letter-spacing: -.025em; }
.problem-cards p { color: rgba(255,255,255,.62); font-size: 13px; }
.problem-close { max-width: 850px; margin: 38px auto 0; padding-top: 30px; color: rgba(255,255,255,.68); text-align: center; border-top: 1px solid rgba(255,255,255,.1); }
.problem-close strong { color: #fff; }

.pathways-section { background: var(--cream); }
.center-title { max-width: 830px; margin: 0 auto 58px; text-align: center; }
.center-title > p { max-width: 650px; margin: 20px auto 0; color: var(--muted); }
.pathway-list { display: grid; gap: 18px; }
.pathway { --path-accent: var(--blue); --path-rgb: 20,111,176; position: relative; min-height: 330px; padding: 24px 32px 24px 24px; display: grid; grid-template-columns: 60px 245px 1fr; gap: 28px; align-items: center; background: linear-gradient(112deg,rgba(var(--path-rgb),.065),#fff 32%,#fff); border: 1px solid rgba(var(--path-rgb),.22); border-radius: 26px; overflow: hidden; box-shadow: 0 16px 42px rgba(24,48,76,.08); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.pathway::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 7px; background: linear-gradient(180deg,var(--path-accent),rgba(var(--path-rgb),.35)); }
.pathway:hover { transform: translateY(-5px); border-color: rgba(var(--path-rgb),.38); box-shadow: 0 25px 58px rgba(24,48,76,.15); }
.path-orange { --path-accent: var(--orange); --path-rgb: 246,123,29; }.path-green { --path-accent: var(--green); --path-rgb: 104,166,49; }.path-pink { --path-accent: var(--pink); --path-rgb: 236,52,101; }.path-purple { --path-accent: var(--purple); --path-rgb: 109,75,161; }
.pathway:nth-child(even) { grid-template-columns: 60px 1fr 245px; }
.pathway:nth-child(even) .pathway-image { grid-column: 3; grid-row: 1; }.pathway:nth-child(even) .pathway-copy { grid-column: 2; grid-row: 1; }
.pathway-index { width: 58px; height: 72px; display: grid; place-items: center; color: var(--path-accent); background: rgba(var(--path-rgb),.1); border: 1px solid rgba(var(--path-rgb),.18); border-radius: 17px; box-shadow: inset 0 1px 0 rgba(255,255,255,.9),0 10px 24px rgba(var(--path-rgb),.12); font-size: 30px; font-weight: 900; letter-spacing: -.06em; align-self: start; }
.pathway-image { height: 280px; overflow: hidden; border: 4px solid #fff; border-radius: 20px; background: var(--cream); box-shadow: 0 24px 44px -16px rgba(var(--path-rgb),.48),0 10px 22px rgba(24,48,76,.14); transform: rotate(-.7deg); transition: transform .3s ease, box-shadow .3s ease; }
.pathway:nth-child(even) .pathway-image { transform: rotate(.7deg); }
.pathway:hover .pathway-image { transform: rotate(0) scale(1.018); box-shadow: 0 28px 52px -14px rgba(var(--path-rgb),.58),0 12px 26px rgba(24,48,76,.18); }
.pathway-image img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pathway-copy > span { display: inline-block; margin-bottom: 9px; padding: 5px 9px; color: var(--path-accent); background: rgba(var(--path-rgb),.09); border-radius: 999px; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .15em; }
.path-orange .pathway-copy > span { color: var(--orange); }.path-green .pathway-copy > span { color: var(--green); }.path-pink .pathway-copy > span { color: var(--pink); }.path-purple .pathway-copy > span { color: var(--purple); }
.pathway-copy h3 { color: var(--navy); font-size: 32px; font-weight: 900; }
.pathway-copy p { max-width: 650px; margin-top: 11px; color: var(--muted); font-size: 14px; }
.pathway-copy ul { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.pathway-copy li { padding: 7px 11px; color: var(--ink); background: rgba(var(--path-rgb),.065); border: 1px solid rgba(var(--path-rgb),.1); border-radius: 999px; font-size: 10px; font-weight: 800; }

.collection-showcase { padding: 105px 0 92px; color: #fff; background: linear-gradient(145deg,var(--blue),var(--teal)); overflow: hidden; }
.showcase-heading { display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; gap: 70px; }
.showcase-heading h2 { color: #fff; }.showcase-heading h2 em { color: var(--yellow); }
.showcase-heading > p { color: rgba(255,255,255,.75); }
.cover-marquee { width: min(1480px, calc(100% - 30px)); margin: 55px auto 0; display: grid; grid-template-columns: repeat(12, minmax(170px,1fr)); gap: 14px; overflow-x: auto; padding: 15px 15px 30px; scrollbar-color: rgba(255,255,255,.5) transparent; }
.cover-tile { min-width: 170px; transition: transform .25s ease; }
.cover-tile:hover { transform: translateY(-9px) rotate(0); }
.cover-tile img { width: 100%; aspect-ratio: .704; object-fit: cover; border: 5px solid #fff; border-radius: 15px; box-shadow: 0 18px 34px rgba(0,28,58,.23); }
.cover-tile figcaption { margin-top: 11px; color: #fff; font-size: 10px; line-height: 1.25; font-weight: 800; text-align: center; }
.tile-1 { transform: rotate(-2deg); }.tile-2 { transform: rotate(2deg); }.tile-3 { transform: rotate(-1deg); }.tile-4 { transform: rotate(1.5deg); }
.showcase-note { margin-top: 23px; display: flex; justify-content: center; align-items: center; gap: 10px; color: rgba(255,255,255,.8); font-size: 13px; font-weight: 750; }
.showcase-note span { width: 29px; height: 29px; display: grid; place-items: center; background: var(--yellow); color: var(--navy); border-radius: 50%; }

.sample-section { background: #fff; }
.sample-layout { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 80px; }
.sample-copy > p { margin-top: 24px; color: var(--muted); font-size: 16px; }.sample-copy > p strong { color: var(--navy); }
.sample-features { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sample-features span { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 12px; font-weight: 700; }
.sample-features b { width: 22px; height: 22px; flex: 0 0 22px; display: grid; place-items: center; color: #fff; background: var(--green); border-radius: 50%; font-size: 10px; }
.sample-copy .sample-note { margin-top: 27px; padding: 19px 20px; color: var(--navy); background: rgba(248,185,23,.14); border-left: 4px solid var(--yellow); border-radius: 0 14px 14px 0; font-size: 12px; font-weight: 750; }
.sample-pages { min-height: 645px; position: relative; display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, rgba(248,185,23,.4), transparent 43%), var(--cream); border-radius: 34px; overflow: hidden; }
.sample-pages img { position: absolute; object-fit: cover; object-position: top; background: #fff; border: 5px solid #fff; border-radius: 10px; box-shadow: 0 24px 45px rgba(20,52,84,.2); }
.sample-cover { width: 245px; height: 540px; left: 36px; top: 50px; z-index: 3; transform: rotate(-5deg); }
.sample-inside { width: 240px; height: 445px; right: 36px; }
.inside-one { top: 38px; z-index: 2; transform: rotate(5deg); }.inside-two { bottom: 26px; right: 92px; z-index: 4; transform: rotate(1deg); }
.sample-zoom { position: absolute; right: 25px; bottom: 24px; z-index: 7; padding: 10px 15px; color: #fff; background: var(--pink); border: 4px solid #fff; border-radius: 999px; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; transform: rotate(-5deg); }

.anatomy-section { background: var(--cream); }
.anatomy-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.anatomy-grid article { min-height: 235px; padding: 29px; background: #fff; border: 1px solid var(--line); border-radius: 21px; }
.anatomy-grid article > span { width: 42px; height: 42px; display: grid; place-items: center; color: var(--blue); background: rgba(8,121,184,.1); border-radius: 13px; font-size: 10px; font-weight: 900; }
.anatomy-grid article:nth-child(2n) > span { color: var(--orange); background: rgba(244,122,11,.11); }.anatomy-grid article:nth-child(3n) > span { color: var(--green); background: rgba(98,169,30,.11); }
.anatomy-grid h3 { margin: 24px 0 10px; font-size: 19px; letter-spacing: -.02em; }
.anatomy-grid p { color: var(--muted); font-size: 13px; }

.use-section { background: #fff; }
.use-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 88px; align-items: center; }
.use-image { min-height: 530px; position: relative; display: grid; place-items: center; background: linear-gradient(145deg,#ebf7fc,#fff5d8); border-radius: 34px; overflow: hidden; }
.use-image::after { content: ""; width: 220px; height: 220px; position: absolute; right: -90px; bottom: -90px; border: 45px solid rgba(5,152,168,.13); border-radius: 50%; }
.use-image img { width: 275px; height: 455px; object-fit: cover; object-position: top; border: 7px solid #fff; border-radius: 18px; box-shadow: var(--shadow); transform: rotate(3deg); }
.use-image > span { position: absolute; left: 36px; bottom: 35px; padding: 10px 15px; color: #fff; background: var(--orange); border: 4px solid #fff; border-radius: 999px; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; transform: rotate(-6deg); }
.use-copy > p { margin-top: 25px; color: var(--muted); font-size: 17px; }
.use-moments { margin-top: 29px; display: flex; flex-wrap: wrap; gap: 9px; }
.use-moments span { padding: 9px 13px; color: var(--navy); background: var(--cream); border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 800; }
.use-copy blockquote { margin-top: 30px; padding: 21px 24px; color: var(--navy); background: rgba(8,121,184,.075); border-left: 4px solid var(--blue); border-radius: 0 14px 14px 0; font-weight: 850; }

.audience-section { background: var(--cream); }
.audience-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.audience-cards article { padding: 37px; border-radius: 26px; border: 1px solid var(--line); background: #fff; }
.audience-icon { width: 46px; height: 46px; display: grid; place-items: center; color: #fff; background: var(--green); border-radius: 50%; font-size: 22px; font-weight: 900; }
.audience-no .audience-icon { background: var(--orange); }
.audience-cards h3 { margin: 21px 0 22px; font-size: 24px; }
.audience-cards ul { display: grid; list-style: none; }
.audience-cards li { padding: 13px 4px 13px 24px; position: relative; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 13px; }
.audience-cards li:last-child { border: 0; }
.audience-cards li::before { content: "•"; position: absolute; left: 7px; color: var(--green); font-weight: 900; }.audience-no li::before { color: var(--orange); }

.offer-section { background: #eaf6f7; }
.offer-card { padding: 0; display: grid; grid-template-columns: 1.05fr .95fr; overflow: hidden; color: #fff; background: var(--navy-deep); border-radius: 34px; box-shadow: 0 32px 70px rgba(7,42,82,.22); }
.offer-gallery { min-height: 560px; position: relative; overflow: hidden; background: radial-gradient(circle at 50% 50%, rgba(248,185,23,.4), transparent 34%), linear-gradient(145deg,var(--blue),var(--teal)); }
.offer-orbit { --orbit-radius: 184px; width: 425px; height: 425px; position: absolute; left: 50%; top: 50%; border: 1px dashed rgba(255,255,255,.3); border-radius: 50%; transform: translate(-50%,-50%) rotate(0deg); }
.offer-orbit::after { content: ""; position: absolute; inset: 49px; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; }
.orbit-card { --angle: 0deg; position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%,-50%) rotate(var(--angle)) translateY(calc(var(--orbit-radius) * -1)); transform-origin: center; }
.orbit-card img { width: 84px; aspect-ratio: .704; display: block; object-fit: cover; object-position: top; border: 4px solid #fff; border-radius: 9px; box-shadow: 0 14px 25px rgba(0,28,58,.32); transition: filter .25s ease, box-shadow .25s ease; }
.offer-gallery:hover .offer-orbit { animation: orbit-spin 9s linear infinite; }
.offer-gallery:hover .orbit-card img { box-shadow: 0 18px 31px rgba(0,28,58,.42); }
@keyframes orbit-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.offer-count { width: 134px; height: 134px; position: absolute; left: 50%; top: 50%; z-index: 5; transform: translate(-50%,-50%) rotate(-5deg); display: grid; align-content: center; justify-items: center; color: var(--navy); background: radial-gradient(circle at 35% 25%,#fff8bd 0%,var(--yellow) 42%,#ff9f1c 100%); border: 7px solid #fff; border-radius: 50%; box-shadow: 0 20px 42px rgba(0,28,58,.34),0 0 0 5px rgba(255,193,7,.22),inset 0 2px 1px rgba(255,255,255,.8),inset 0 -7px 14px rgba(230,110,0,.18); filter: drop-shadow(0 0 20px rgba(255,193,7,.25)); }
.offer-count::before { content: ""; position: absolute; inset: -17px; border: 2px dashed rgba(255,255,255,.72); border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,255,255,.08); }
.offer-count::after { content: "✦"; width: 26px; height: 26px; position: absolute; right: -9px; top: -8px; display: grid; place-items: center; color: #fff; background: var(--pink); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 7px 15px rgba(0,28,58,.24); font-size: 11px; }
.offer-count small { margin-bottom: 2px; color: rgba(8,50,93,.7); font-size: 7px; font-weight: 900; letter-spacing: .16em; }
.offer-count strong { color: var(--navy); font-size: 56px; font-weight: 900; line-height: .7; letter-spacing: -.08em; text-shadow: 0 2px 0 rgba(255,255,255,.7); -webkit-text-stroke: .45px currentColor; }
.offer-count > span { margin-top: 8px; padding: 4px 12px; color: #fff; background: var(--navy); border-radius: 999px; box-shadow: 0 5px 11px rgba(8,50,93,.22); font-size: 11px; font-weight: 900; letter-spacing: .13em; }
.offer-gallery:hover .offer-count { animation: seal-vigor 1.7s ease-in-out infinite; }
.offer-gallery:hover .offer-count::before { animation: seal-ring 7s linear infinite; }
@keyframes seal-vigor { 0%,100% { transform: translate(-50%,-50%) rotate(-5deg) scale(1); } 50% { transform: translate(-50%,-50%) rotate(-2deg) scale(1.055); } }
@keyframes seal-ring { to { transform: rotate(360deg); } }
.offer-copy { padding: 38px 43px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.offer-copy .scolatio-brand { margin-bottom: 15px; color: #fff; font-size: 29px; }.offer-copy .scolatio-brand .brand-dot { color: var(--yellow); }
.offer-kicker { color: var(--yellow); font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.offer-copy h2 { margin: 10px 0 12px; color: #fff; font-size: clamp(31px,3.3vw,42px); }
.offer-copy > p { color: rgba(255,255,255,.67); }
.offer-copy ul { width: 100%; margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px 13px; list-style: none; }
.offer-copy li { display: flex; gap: 7px; color: rgba(255,255,255,.84); font-size: 11px; font-weight: 700; }
.offer-copy li b { color: var(--yellow); }
.offer-price { width: 100%; margin: 18px 0 14px; padding: 13px 16px 12px; text-align: center; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: rgba(255,255,255,.045); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.offer-price > small { display: block; margin-bottom: 8px; color: var(--yellow); font-size: 9px; font-weight: 900; letter-spacing: .15em; }
.regular-line { color: rgba(255,255,255,.45); font-size: 10px; font-weight: 750; }
.regular-line span { position: relative; margin-left: 5px; color: rgba(255,255,255,.68); font-size: 15px; font-weight: 900; }
.regular-line span::after { content: ""; position: absolute; left: -3px; right: -3px; top: 50%; height: 2px; border-radius: 4px; background: var(--pink); transform: rotate(-5deg); }
.launch-price { margin: 2px 0 8px; display: flex; justify-content: center; align-items: flex-start; color: #fff; line-height: .82; filter: drop-shadow(0 9px 14px rgba(0,0,0,.18)); }
.launch-price > span { margin: 10px 6px 0 0; color: var(--yellow); font-size: 13px; font-weight: 900; letter-spacing: .06em; }
.launch-price strong { font-size: 63px; font-weight: 900; letter-spacing: -.08em; -webkit-text-stroke: .45px currentColor; }
.launch-price sup { margin-top: 7px; font-size: 29px; font-weight: 900; letter-spacing: -.06em; }
.saving-pill { display: inline-block; padding: 7px 11px; color: var(--navy-deep); background: var(--yellow); border-radius: 999px; box-shadow: 0 8px 18px rgba(255,193,7,.18); font-size: 8px; font-weight: 900; letter-spacing: .07em; }
.coupon-card { width: 100%; margin: 0 0 14px; padding: 13px 15px; color: var(--navy-deep); border: 2px dashed rgba(255,193,7,.9); border-radius: 16px; background: linear-gradient(120deg,#fff9dc,#ffe9bc); box-shadow: 0 13px 25px rgba(0,0,0,.12); text-align: center; }
.coupon-kicker { display: block; color: var(--orange); font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.coupon-main { margin: 8px 0 6px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 7px; font-size: 10px; font-weight: 800; }
.coupon-main strong { padding: 6px 10px; color: #fff; background: var(--navy); border: 2px dashed rgba(255,255,255,.65); border-radius: 8px; box-shadow: 0 6px 13px rgba(7,56,111,.17); font-size: 15px; letter-spacing: .12em; }
.coupon-main em { color: var(--green); font-size: 15px; font-style: normal; font-weight: 900; }
.coupon-card > small { display: block; color: rgba(8,42,82,.62); font-size: 7px; line-height: 1.35; }
.coupon-reminder { width: 100%; margin-top: 9px; color: rgba(255,255,255,.72); font-size: 8px; font-weight: 700; text-align: center; }
.coupon-reminder b { margin-left: 4px; color: var(--yellow); }
.button-orange { color: #fff; background: var(--orange); box-shadow: 0 16px 31px rgba(244,122,11,.24); }
.offer-copy .button-orange { align-self: stretch; justify-content: center; font-size: 14px; }
.instant-access { width: 100%; margin-top: 11px; display: flex; justify-content: center; align-items: center; gap: 9px; text-align: left; }
.instant-access > span { width: 35px; height: 35px; display: grid; place-items: center; color: var(--navy-deep); background: var(--yellow); border-radius: 50%; box-shadow: 0 8px 18px rgba(255,193,7,.18); font-size: 19px; font-weight: 900; }
.instant-access strong,.instant-access small { display: block; }.instant-access strong { color: #fff; font-size: 12px; }.instant-access small { margin-top: 2px; color: rgba(255,255,255,.52); font-size: 9px; }
.offer-micro { width: 100%; margin-top: 8px; color: rgba(255,255,255,.47); font-size: 9px; text-align: center; }
.guarantee-section { padding: 0 0 82px; background: #fff; }
.guarantee-card { padding: 25px 32px; display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 25px; color: var(--navy); border: 1px solid rgba(104,166,49,.26); border-radius: 25px; background: linear-gradient(115deg,#fff 0%,#f5ffe9 100%); box-shadow: 0 18px 42px rgba(7,42,82,.1); }
.guarantee-seal { width: 86px; height: 86px; display: grid; align-content: center; justify-items: center; color: #fff; background: linear-gradient(145deg,#82c73c,var(--green)); border: 5px solid #fff; outline: 2px dashed rgba(104,166,49,.5); border-radius: 50%; box-shadow: 0 13px 27px rgba(104,166,49,.28); transform: rotate(-5deg); }
.guarantee-seal strong { font-size: 39px; line-height: .78; }.guarantee-seal span { margin-top: 8px; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.guarantee-kicker { color: var(--green); font-size: 9px; font-weight: 900; letter-spacing: .15em; }
.guarantee-card h3 { margin-top: 5px; color: var(--navy); font-size: 24px; font-weight: 900; }.guarantee-card p { max-width: 720px; margin-top: 7px; color: var(--muted); font-size: 13px; }
.guarantee-card > b { min-width: 105px; color: var(--green); font-size: 30px; text-align: center; line-height: 1; }.guarantee-card > b small { display: block; margin-top: 6px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .09em; }

.faq-section { background: #fff; }
.faq-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 85px; align-items: start; }
.faq-title { position: sticky; top: 35px; }.faq-title h2 { font-size: clamp(38px,4vw,52px); }.faq-title p { margin-top: 20px; color: var(--muted); }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { min-height: 76px; padding: 22px 3px; display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; font-weight: 850; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { width: 29px; height: 29px; flex: 0 0 29px; display: grid; place-items: center; color: var(--blue); background: rgba(8,121,184,.09); border-radius: 50%; font-size: 18px; transition: transform .2s ease; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { padding: 0 45px 24px 3px; color: var(--muted); font-size: 13px; }

.final-section { padding: 115px 0 100px; position: relative; overflow: hidden; text-align: center; color: #fff; background: linear-gradient(145deg,var(--navy),var(--blue)); }
.final-section::before { content: ""; width: 500px; height: 500px; position: absolute; left: 50%; top: -340px; transform: translateX(-50%); border: 75px solid rgba(255,255,255,.06); border-radius: 50%; }
.final-inner { max-width: 920px; position: relative; z-index: 2; }
.final-inner .scolatio-brand { margin-bottom: 29px; color: #fff; font-size: 38px; }.final-inner .brand-dot { color: var(--yellow); }
.final-inner .section-label { display: flex; justify-content: center; }
.final-inner h2 { color: #fff; }.final-inner h2 em { color: var(--yellow); }
.final-inner > p { max-width: 700px; margin: 25px auto 0; color: rgba(255,255,255,.72); font-size: 17px; }
.button-yellow { margin-top: 34px; color: var(--navy); background: var(--yellow); box-shadow: 0 16px 35px rgba(0,0,0,.16); }
.final-inner > small { margin-top: 20px; display: block; color: rgba(255,255,255,.45); font-size: 9px; }
.final-confetti { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--yellow); box-shadow: 45px 30px 0 var(--orange), 86px -17px 0 var(--green), 128px 35px 0 var(--pink); opacity: .8; }
.confetti-left { left: 4%; top: 23%; }.confetti-right { right: 14%; bottom: 18%; transform: rotate(160deg); }

footer { padding: 38px 0; color: #fff; background: var(--navy-deep); }
.footer-row { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.footer-row .scolatio-brand { color: #fff; font-size: 25px; }.footer-row .brand-dot { color: var(--pink); }
.footer-row p { margin-top: 8px; color: rgba(255,255,255,.5); font-size: 10px; }
.footer-legal { display: grid; justify-items: end; gap: 12px; }
.footer-legal nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 18px; }
.footer-legal a { color: rgba(255,255,255,.78); font-size: 10px; font-weight: 800; text-decoration: none; transition: color .2s ease; }
.footer-legal a:hover { color: var(--yellow); }
.footer-legal > span { color: rgba(255,255,255,.42); font-size: 9px; }

@media (max-width: 1040px) {
  .hero-layout { grid-template-columns: 1fr; padding-top: 60px; }
  .hero-copy { text-align: center; }.hero-copy h1,.hero-copy > p,.teacher-promo { margin-left: auto; margin-right: auto; }.hero-checks,.hero-actions { justify-content: center; }.teacher-promo { text-align: left; }
  .cover-collage { min-height: 585px; max-width: 650px; width: 100%; margin: auto; }
  .distinction-layout,.sample-layout,.use-layout,.faq-layout { grid-template-columns: 1fr; gap: 58px; }
  .distinction-copy { max-width: 820px; }.file-visual { max-width: 650px; width: 100%; margin: auto; }
  .problem-cards { grid-template-columns: 1fr 1fr; }.problem-cards article { min-height: 200px; }
  .sample-copy { max-width: 760px; }.sample-pages { max-width: 700px; width: 100%; margin: auto; }
  .use-image { max-width: 620px; width: 100%; margin: auto; }
  .faq-title { position: static; max-width: 760px; }
}

@media (max-width: 800px) {
  .shell { width: min(100% - 28px,1180px); }
  .section { padding: 78px 0; }
  .announcement { font-size: 7px; gap: 8px; letter-spacing: .09em; }
  .nav-row { min-height: 66px; }.brand-link b { display: none; }.nav-menu a:not(.nav-cta) { display: none; }.nav-cta { font-size: 10px; padding: 10px 14px; }
  .scolatio-brand { font-size: 23px; }
  h1 { font-size: clamp(42px,12vw,59px); } h2 { font-size: clamp(35px,10vw,48px); }
  .hero-layout { min-height: auto; gap: 20px; }.hero-checks { display: grid; justify-content: center; text-align: left; }.hero-actions { flex-direction: column; }.teacher-promo { grid-template-columns: 34px 1fr; }.teacher-promo em { display: none; }
  .cover-collage { min-height: 490px; transform: scale(.84); margin: -20px auto; }
  .format-grid { grid-template-columns: 1fr 1fr; }.format-grid > div:nth-child(2) { border-right: 0; }.format-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .distinction-layout { gap: 45px; }.file-visual { min-height: 500px; }.file-stack { width: 175px; }.stack-front { width: 205px; }.file-caption { min-width: 265px; }
  .problem-cards { grid-template-columns: 1fr; }.problem-cards article { min-height: auto; }
  .pathway,.pathway:nth-child(even) { padding: 17px; grid-template-columns: 35px 115px 1fr; gap: 13px; min-height: 230px; }.pathway:nth-child(even) .pathway-image { grid-column: 2; }.pathway:nth-child(even) .pathway-copy { grid-column: 3; }.pathway-image { height: 190px; }.pathway-index { width: 35px; height: 48px; border-radius: 11px; font-size: 18px; }.pathway-copy h3 { font-size: 22px; }.pathway-copy p { font-size: 11px; }.pathway-copy ul { display: none; }
  .showcase-heading { grid-template-columns: 1fr; gap: 22px; }.cover-marquee { grid-template-columns: repeat(12,150px); }
  .sample-pages { min-height: 560px; }.sample-cover { width: 200px; height: 455px; left: 20px; }.sample-inside { width: 190px; height: 385px; right: 20px; }.inside-two { right: 58px; }
  .sample-features,.anatomy-grid,.audience-cards { grid-template-columns: 1fr; }.anatomy-grid article { min-height: 200px; }
  .offer-card { grid-template-columns: 1fr; }.offer-gallery { min-height: 520px; }.offer-orbit { --orbit-radius: 160px; width: 385px; height: 385px; }.orbit-card img { width: 72px; }.offer-copy { padding: 38px 26px; }
  .guarantee-card { grid-template-columns: 82px 1fr; }.guarantee-card > b { display: none; }
  .footer-row { flex-direction: column; text-align: center; }.footer-legal { justify-items: center; }.footer-legal nav { justify-content: center; }
}

@media (max-width: 520px) {
  .announcement span { display: none; }
  .cover-collage { min-height: 440px; transform: scale(.72); margin: -45px auto; }
  .format-grid > div { justify-content: flex-start; padding: 17px 12px; }.format-grid strong { font-size: 25px; }
  .distinction-copy li { grid-template-columns: 36px 1fr; padding: 14px; }.distinction-copy li > b { width: 34px; height: 34px; }
  .file-visual { min-height: 450px; }.stack-back { left: 7%; }.stack-middle { right: 5%; }.stack-front { width: 185px; }.file-stack { width: 145px; }.file-caption { min-width: 245px; padding: 14px; }
  .pathway,.pathway:nth-child(even) { grid-template-columns: 28px 92px 1fr; padding: 12px; }.pathway-image { height: 160px; border-width: 3px; }.pathway-index { width: 28px; height: 42px; border-radius: 9px; font-size: 15px; }.pathway-copy h3 { font-size: 19px; }.pathway-copy p { font-size: 10px; }
  .sample-pages { min-height: 480px; }.sample-cover { width: 165px; height: 375px; left: 10px; top: 50px; }.sample-inside { width: 155px; height: 330px; right: 10px; }.inside-two { right: 34px; }
  .use-image { min-height: 460px; }.use-image img { width: 230px; height: 390px; }
  .offer-gallery { min-height: 420px; }.offer-orbit { --orbit-radius: 125px; width: 305px; height: 305px; }.orbit-card img { width: 56px; border-width: 3px; border-radius: 7px; }.offer-count { width: 96px; height: 96px; border-width: 6px; }.offer-count strong { font-size: 40px; }.offer-copy ul { grid-template-columns: 1fr; }
  .guarantee-card { padding: 22px 18px; grid-template-columns: 1fr; justify-items: center; text-align: center; }.guarantee-seal { width: 78px; height: 78px; }.guarantee-card h3 { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .offer-gallery:hover .offer-orbit,.offer-gallery:hover .offer-count,.offer-gallery:hover .offer-count::before { animation: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .collage-seal { animation: gentle 4s ease-in-out infinite; }
  @keyframes gentle { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }
}