@import url('https://fonts.googleapis.com/css2?family=Titan+One&display=swap');

:root {
  --ink: #000;
  --paper: #fffdf0;
  --white: #fff;
  --lavender: #d0bcff;
  --purple: #8b5cf6;
  --lime: #a3e635;
  --yellow: #ffd166;
  --blue: #3a86ff;
  --crimson: #ff006e;
  --career-red: #e63946;
  --orange: #ff5a05;
  --teal: #00d9b2;
  --border: 3px solid var(--ink);
  --shadow: 7px 7px 0 var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--paper); }
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.fa-solid { color: #00f5d4; -webkit-text-stroke: 2px #000000; paint-order: stroke fill; filter: drop-shadow(3px 3px 0 #000000); }
body.modal-open { overflow: hidden; }

.site-nav { position: sticky; top: 0; z-index: 30; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px max(24px, calc((100vw - 1240px) / 2)); border-bottom: var(--border); background: #fdf6c9; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-size: 20px; font-weight: 950; letter-spacing: -.04em; }
.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 9px; color: var(--white); background: var(--purple); box-shadow: 3px 3px 0 var(--ink); font-size: 22px; font-weight: 1000; line-height: 1; transform: rotate(-3deg); }
.brand-flame { font-size: 24px; }
.premium-button, .start-button, .filter-chip { border: 2px solid var(--ink); color: var(--ink); font-weight: 900; cursor: pointer; box-shadow: 4px 4px 0 var(--ink); transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease; }
.premium-button { padding: 12px 18px; border-radius: 9px; color: var(--white); background: var(--purple); }
.premium-button:hover, .premium-button:active, .start-button:hover, .start-button:active, .filter-chip:hover, .filter-chip.active { color: var(--ink); background: var(--teal); transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.premium-button:focus-visible, .start-button:focus-visible, .filter-chip:focus-visible, .carousel-arrow:focus-visible, .modal-close:focus-visible { outline: 4px solid var(--purple); outline-offset: 3px; }

.library-shell { width: min(1240px, calc(100% - 40px)); margin: 0 auto; padding: 70px 0 90px; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, 290px); align-items: center; gap: 38px; padding-bottom: 54px; }
.hero-content { min-width: 0; }
.hero-mascot { width: 100%; height: auto; justify-self: end; border: var(--border); border-radius: 24px; background: var(--lavender); box-shadow: 9px 9px 0 var(--ink); transform: rotate(2deg); }
.kicker { display: inline-block; margin: 0 0 20px; padding: 8px 12px; border: 2px solid var(--ink); background: var(--lime); box-shadow: 4px 4px 0 var(--ink); font-size: 12px; font-weight: 950; letter-spacing: .16em; transform: rotate(-1deg); }
.hero h1 { margin: 0; font-size: clamp(48px, 7vw, 92px); line-height: .9; letter-spacing: -.075em; font-weight: 1000; text-shadow: 4px 4px 0 var(--yellow); }
.hero h1 span { color: var(--purple); -webkit-text-stroke: 2px var(--ink); text-shadow: 4px 4px 0 var(--yellow); }
#filter-heading { margin: 0; font-size: clamp(28px, 3.4vw, 42px); line-height: .95; letter-spacing: -.05em; font-weight: 1000; text-shadow: 3px 3px 0 var(--yellow); }
.sticker-anchor { position: relative; display: inline-block; width: 0; overflow: visible; vertical-align: middle; }
.hero h1 span.hero-sticker { position: absolute; top: -38px; left: 18px; white-space: nowrap; transform: rotate(6deg); padding: 8px 16px; background: var(--blue); color: #fff; font-size: 18px; font-weight: 900; line-height: 1.2; letter-spacing: 0; -webkit-text-stroke: 0; text-shadow: none; border: 3px solid var(--ink); border-radius: 8px; box-shadow: 4px 4px 0 var(--ink); }
.sticker-row { position: relative; height: 0; overflow: visible; }
.sticker-row .hero-sticker-2 { position: absolute; top: 104px; right: 10px; z-index: 10; white-space: nowrap; transform: rotate(-8deg); padding: 8px 16px; background: var(--teal); color: #fff; font-size: 18px; font-weight: 900; line-height: 1.2; border: 3px solid var(--ink); border-radius: 8px; box-shadow: 4px 4px 0 var(--ink); }
@media (max-width: 1100px) { .hero-sticker, .hero-sticker-2 { display: none; } }
.hero-copy { max-width: 670px; margin: 28px 0 0; font-size: clamp(17px, 2vw, 22px); font-weight: 650; line-height: 1.45; }

.filter-bar { padding: 28px; border: var(--border); background: var(--lavender); box-shadow: var(--shadow); }
.section-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.section-label-row h2 { margin: 0; font-size: 26px; letter-spacing: -.04em; }
#resultCount { font-size: 13px; font-weight: 850; }
.filter-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 20px; }
.filter-chip { display: flex; align-items: center; justify-content: center; text-align: center; white-space: normal; line-height: 1.2; font-size: 12.5px; min-height: 52px; padding: 6px 14px; border-radius: 99px; background: #fff3c4; text-decoration: none; filter: saturate(1.9) contrast(1.05); }
.filter-chip.active { background: var(--purple); color: #fff; }
.filter-chip.active .chip-count { background: transparent; color: inherit; }
.filter-chip.chip-hidden { display: none; }
.chip-icon { font-size: 19px; line-height: 1; margin-right: 6px; filter: saturate(2.4) contrast(1.15); }
.chips-toggle { background: #b8e2ff; color: var(--ink); border: var(--border); font-weight: 850; font-family: inherit; }
.chips-toggle:hover { background: var(--teal); color: var(--ink); }
.chips-toggle-arrow { display: flex; align-items: center; justify-content: flex-start; padding-left: 18px; line-height: 0; animation: arrow-pulse 1s ease-in-out infinite; }
@keyframes arrow-pulse { 0%, 100% { transform: translateX(6px); } 50% { transform: translateX(0); } }
.category-stat { font-weight: 800; margin-top: 6px; opacity: .85; }
.vault-unlocked .premium-lock { display: none; }
.paywall-restore { display: block; margin: 10px auto 0; background: none; border: none; font-family: inherit; font-weight: 800; font-size: 13px; text-decoration: underline; cursor: pointer; color: var(--ink); }
.vault-toast { position: fixed; top: 90px; left: 50%; transform: translateX(-50%); z-index: 999; background: var(--green, #8ac926); color: var(--ink); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); border-radius: 14px; padding: 14px 22px; font-weight: 900; }
.category-emoji { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 190px; height: 190px; border-radius: 24px; border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); flex-shrink: 0; }
.category-emoji-icon { font-size: 78px; line-height: 1; filter: drop-shadow(3px 3px 0 rgba(0,0,0,.25)); }
.category-emoji-label { padding: 3px 12px; background: var(--ink); color: #fff; border-radius: 99px; font-size: 13px; font-weight: 900; letter-spacing: .02em; text-align: center; max-width: 160px; }
@media (max-width: 720px) { .category-emoji { width: 130px; height: 130px; gap: 6px; } .category-emoji-icon { font-size: 48px; } .category-emoji-label { font-size: 11px; max-width: 110px; } }

.category-hero { grid-template-columns: minmax(0, 1fr) minmax(150px, 210px); padding-bottom: 34px; }
.category-hero .lesson-breadcrumb { margin-bottom: 18px; }

.lesson-page-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 170px); align-items: center; gap: 30px; margin-bottom: 26px; }
.lesson-page-mascot { transform: rotate(2deg); }
@media (max-width: 720px) { .lesson-page-header { grid-template-columns: 1fr; } .lesson-page-mascot { display: none; } }

.card-title-link { color: inherit; text-decoration: none; }
.card-title-link:hover { text-decoration: underline; }

.lesson-page h1 { margin: 14px 0 6px; font-size: clamp(34px, 5vw, 58px); line-height: 1; letter-spacing: -.05em; font-weight: 1000; }
.lesson-breadcrumb { font-weight: 800; font-size: 14px; }
.lesson-breadcrumb a { color: inherit; }
.lesson-page-meta { margin: 0 0 30px; font-weight: 800; opacity: .75; }
.lesson-page-card { margin-bottom: 22px; padding: 22px 24px; border: var(--border); background: var(--white); box-shadow: var(--shadow); }
.lesson-page-card h2 { margin: 0 0 10px; font-size: 19px; letter-spacing: -.02em; }
.lesson-page-card p { margin: 0; line-height: 1.55; font-weight: 600; }
.lesson-page-locked { background: var(--lavender); }
.lesson-page-locked .start-button { display: inline-block; margin-top: 16px; text-decoration: none; padding: 12px 18px; }
.lesson-page-footer-link { margin-top: 34px; }
.lesson-page-footer-link .start-button { display: inline-block; text-decoration: none; padding: 12px 18px; }

.course-library { display: grid; gap: 62px; margin-top: 66px; }
.library-section h2 { display: inline-block; margin: 0 0 24px; font-size: clamp(28px, 4vw, 42px); letter-spacing: -.055em; border-bottom: 7px solid #a3e635; }
.course-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 24px; }
.course-card { height: auto; min-height: 340px; display: flex; flex-direction: column; justify-content: space-between; position: relative; padding: 17px; border: var(--border); background: var(--yellow); box-shadow: var(--shadow); overflow: hidden; }
.course-card::after { content: ""; position: absolute; width: 86px; height: 86px; right: -32px; top: -32px; border: var(--border); border-bottom: 3px solid var(--ink); border-radius: 50%; background: var(--category-accent-color, var(--teal)); }
.premium-lock { position: absolute; z-index: 3; top: 9px; right: 8px; width: 31px; height: 31px; display: grid; place-items: center; }
.premium-lock .fa-lock { color: var(--ink); -webkit-text-stroke: 0; filter: none; font-size: 17px; }
.course-card-1 { background: var(--lime); }
.course-card-2 { background: var(--lavender); }
.course-card.category-ai-skills,
.course-card.category-tech-basics { background: var(--blue); }
.course-card.category-adulting { background: var(--yellow); }
.course-card.category-side-hustles { background: #fb5607; }
.course-card.category-social-skills { background: var(--lavender); }
.course-card.category-money { background: var(--lime); }
.course-card.category-investing { background: #4361ee; }
.course-card.category-career { background: var(--career-red); }
.course-card.category-mindset { background: var(--lavender); }
.course-card.category-living-alone { background: var(--lavender); }
.course-card.category-creator-economy { background: #4361ee; }
.course-card.category-food-cooking { background: #f72585; }
.course-card.category-dating-relationships { background: #ff5733; }
.course-card.category-health-body { background: #00f5d4; }
.course-card.category-travel-hacks { background: #8338ec; }
.empty-category-note { font-size: 1.15rem; font-weight: 700; text-align: center; padding: 48px 16px; opacity: 0.75; }
.course-card.category-home-property { background: #06d6a0; }
.course-card.category-legal-literacy { background: #fca311; }
.course-card.category-negotiation { background: #48cae4; }
.course-card.category-cyber-security { background: #b5179e; }
.course-card.category-public-speaking { background: #ff70a6; }
.course-card.category-digital-org { background: #48cae4; }
.course-card.category-high-performance { background: #ffd166; }
.course-card.category-consumer-defense { background: #e63946; }
.course-card.category-mental-models { background: #a3e635; }
.course-card.category-crisis-mgmt { background: #fb5607; }
.course-card.category-networking { background: #ffd166; }
.course-card.category-project-mgmt { background: #3a86ff; }
.course-card.category-copywriting { background: #d0bcff; }
.course-card.category-auto-essentials { background: #06d6a0; }
.course-card.category-visual-literacy { background: #f72585; }
.course-card.category-smart-consumer-habits { background: #ffbe0b; }
.course-card.category-home-maintenance { background: #e07a5f; }
.course-card.category-social-media-etiquette { background: #9b5de5; }
.course-card.category-be-your-best-self { background: #ffca3a; }
.course-card.category-digital-organization { background: #00bbf9; }
.course-card.category-keep-calm-and-carry-on { background: #ff595e; }
.course-tag { align-self: flex-start; padding: 6px 9px; border: 2px solid var(--ink); background: var(--white); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.course-count { position: absolute; top: 26px; right: 22px; z-index: 1; font-size: 10px; font-weight: 950; letter-spacing: .12em; }
.course-card .start-button { align-self: flex-end; }
.chip-count { flex-shrink: 0; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: transparent; color: var(--ink, #111); font-family: 'Titan One', cursive; font-size: 14px; font-weight: 400; letter-spacing: 0.5px; }
.social-icons { white-space: nowrap; }
.social-icons .fa-brands { font-size: 28px; vertical-align: -4px; margin-left: 6px; }
.social-icons .fa-facebook { color: #1877f2; }
.social-icons .fa-instagram { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.social-icons .fa-tiktok { color: #010101; }
.star-button { position: absolute; left: 16px; bottom: 16px; width: 36px; height: 36px; display: grid; place-items: center; border: var(--border); border-radius: 50%; background: #fff; box-shadow: 3px 3px 0 var(--ink); cursor: pointer; z-index: 2; padding: 0; }
.star-button .fa-star { color: #cbd5e1; font-size: 16px; }
.star-button.starred { background: var(--yellow); }
.star-button.starred .fa-star { color: #f59e0b; -webkit-text-stroke: 1px var(--ink); }
.star-button:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.my-slides-chip { margin-left: auto; min-width: 220px; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 20px; border-radius: 99px; font-size: 14px; font-weight: 850; font-family: inherit; background: #a3e635; border: var(--border); box-shadow: 3px 3px 0 var(--ink); cursor: pointer; white-space: nowrap; }
.my-slides-chip:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.my-slides-chip.active { background: var(--purple); color: #fff; }
.my-slides-chip.active .chip-count { background: transparent; color: inherit; }
.my-slides-empty { padding: 32px; font-weight: 700; font-size: 16px; }
.completed-badge { position: absolute; left: 60px; bottom: 18px; width: 32px; height: 32px; display: grid; place-items: center; border: var(--border); border-radius: 50%; background: #22c55e; box-shadow: 3px 3px 0 var(--ink); z-index: 1; }
.completed-badge .fa-check { color: var(--white); font-size: 15px; -webkit-text-stroke: 1px var(--ink); filter: none; }
.course-category-icon { align-self: flex-start; margin-top: 25px; color: var(--category-icon-color, #00f5d4); font-size: 24px; line-height: 1; }
.course-card h3 { margin: 9px 0 8px; max-width: 90%; font-size: 24px; line-height: 1; letter-spacing: -.055em; }
.course-card p { display: -webkit-box; margin: 0 0 18px; overflow: hidden; font-size: 14px; font-weight: 600; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.start-button { align-self: flex-start; margin-top: auto; padding: 11px 14px; border-radius: 7px; background: var(--white); }
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; padding: 28px max(24px, calc((100vw - 1240px) / 2)); background: var(--paper); color: var(--ink); }
.site-footer .footer-brand { color: var(--purple); }
.site-footer .footer-tagline { color: var(--crimson); font-weight: 900; }
.nav-tagline { transform: rotate(-4deg); display: inline-block; padding: 6px 14px; background: var(--crimson); color: #fff; font-weight: 900; font-size: 15px; border: 3px solid var(--ink); border-radius: 6px; box-shadow: 4px 4px 0 var(--ink); }
@media (max-width: 720px) { .nav-tagline { display: none; } }
.footer-contact { flex-basis: 100%; margin: 0; font-size: 13px; font-weight: 800; color: var(--ink); }
.footer-contact a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.footer-contact a:hover { color: var(--crimson); }
.footer-links { flex-basis: 100%; font-size: 13px; font-weight: 800; }
.footer-links a { color: var(--purple); text-decoration: underline; text-underline-offset: 3px; }
.footer-links a:hover { color: var(--crimson); }
.footer-note { flex-basis: 100%; margin: 26px 0 0; padding: 12px 14px; color: var(--ink); background: var(--lavender); font-size: 11px; font-weight: 650; line-height: 1.45; }
.footer-copyright { flex-basis: 100%; margin: 0; font-size: 12px; font-weight: 700; opacity: .8; }

.lesson-modal[hidden] { display: none; }
.lesson-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 18px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); }
.modal-panel { position: relative; z-index: 1; }
.modal-close { position: absolute; z-index: 5; top: -12px; right: -18px; width: 48px; height: 48px; display: grid; place-items: center; border: var(--border); border-radius: 50%; color: var(--ink); background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); font-size: 31px; font-weight: 950; line-height: 1; cursor: pointer; transition: transform .15s ease, background-color .15s ease; }
.modal-close:hover { background: var(--teal); transform: rotate(8deg) scale(1.05); }

.phone { width: min(375px, calc(100vw - 36px)); height: min(812px, calc(100dvh - 36px)); min-height: 620px; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto auto; border: var(--border); border-radius: 30px; color: var(--ink); background: var(--white); box-shadow: 10px 10px 0 var(--ink); }
.phone-header { padding: 11px 20px 12px; border-bottom: var(--border); background: var(--yellow); }
.status-bar { display: flex; justify-content: space-between; padding: 0 5px 13px; font-size: 11px; font-weight: 900; }
.app-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.eyebrow, .lesson-tag { font-size: 10px; letter-spacing: .16em; font-weight: 950; }
.app-heading h2 { margin: 3px 0 0; max-width: 245px; font-size: 19px; line-height: 1.05; letter-spacing: -.04em; }
.avatar { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 10px; color: var(--white); font-size: 20px; font-weight: 1000; line-height: 1; background: var(--purple); box-shadow: 3px 3px 0 var(--ink); }
.progress-row { display: flex; justify-content: space-between; margin-top: 15px; font-size: 11px; font-weight: 850; }
.progress-track { height: 8px; overflow: hidden; margin-top: 6px; border: 2px solid var(--ink); border-radius: 99px; background: var(--white); }
.progress-track span { display: block; width: 20%; height: 100%; background: var(--purple); transition: width .35s ease; }
.carousel { min-height: 0; overflow: hidden; padding: 15px 16px 13px; touch-action: pan-y; background: var(--paper); }
.carousel-track { height: 100%; display: flex; transition: transform .42s cubic-bezier(.22,.8,.22,1); }
.lesson-card { position: relative; min-width: 100%; height: calc(100% - 8px); overflow: hidden; display: flex; flex-direction: column; padding: 23px; border: var(--border); border-radius: 18px; background: var(--lavender); box-shadow: var(--shadow); }
.lesson-card:nth-child(2) { background: var(--lime); }
.lesson-card:nth-child(3) { background: var(--yellow); }
.lesson-card:nth-child(4) { background: var(--blue); }
.lesson-card:nth-child(5) { background: #d0bcff; }
.lesson-card::before { content: ""; position: absolute; right: -31px; bottom: -35px; width: 112px; height: 112px; border: var(--border); border-radius: 50%; background: rgba(255,255,255,.35); }
.lesson-card::after { content: ""; position: absolute; right: 31px; bottom: 32px; width: 28px; height: 28px; border: var(--border); background: var(--white); transform: rotate(14deg); }
.card-number { position: absolute; top: 15px; right: 20px; font-size: 43px; font-weight: 1000; letter-spacing: -.09em; opacity: .16; }
.lesson-content { max-height: calc(100% - 44px); margin: auto 0; padding: 4px 6px 4px 0; position: relative; z-index: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ink) transparent; }
.lesson-icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 21px; border: var(--border); border-radius: 10px; background: var(--white); box-shadow: 4px 4px 0 var(--ink); font-size: 23px; font-weight: 900; transform: rotate(-3deg); }
.lesson-content h3 { margin: 0; font-size: 23px; line-height: 1.06; letter-spacing: -.045em; }
.lesson-content p { margin: 13px 0 0; font-size: 13.5px; font-weight: 650; line-height: 1.48; }
.lesson-content .cheat-sheet-text { padding: 12px; border: 2px solid var(--ink); border-radius: 6px; background: rgba(255,255,255,.78); box-shadow: 3px 3px 0 var(--ink); font-size: 12.5px; line-height: 1.48; }
.lesson-footer { position: relative; z-index: 1; display: flex; justify-content: space-between; padding-top: 12px; border-top: 2px solid var(--ink); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.carousel-controls { display: grid; grid-template-columns: 45px 1fr 45px; align-items: center; gap: 12px; padding: 10px 18px 12px; border-top: var(--border); background: var(--lavender); }
.carousel-arrow { width: 45px; height: 42px; border: 2px solid var(--ink); border-radius: 8px; background: var(--white); box-shadow: 4px 4px 0 var(--ink); font-size: 20px; font-weight: 950; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.carousel-arrow:hover:not(:disabled) { background: var(--teal); transform: translate(3px,3px); box-shadow: 1px 1px 0 var(--ink); }
.carousel-arrow:disabled { opacity: .38; cursor: not-allowed; box-shadow: 2px 2px 0 var(--ink); }
.carousel-dots { display: flex; justify-content: center; gap: 7px; }
.carousel-dot { width: 10px; height: 10px; padding: 0; border: 2px solid var(--ink); border-radius: 2px; background: var(--white); cursor: pointer; transition: width .18s ease, background-color .18s ease; }
.carousel-dot:hover { background: var(--teal); }
.carousel-dot.active { width: 28px; background: var(--purple); }
.share-control { padding: 0 18px 12px; background: var(--lavender); }
.copy-pack-button { width: 100%; padding: 11px 12px; border: 2px solid var(--ink); border-radius: 8px; color: var(--ink); background: var(--white); box-shadow: 4px 4px 0 var(--ink); font-size: 12px; font-weight: 950; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.copy-pack-button:hover, .copy-pack-button:active { background: var(--blue); transform: translate(3px,3px); box-shadow: 1px 1px 0 var(--ink); }
.copy-pack-button:focus-visible { outline: 4px solid var(--orange); outline-offset: 3px; }
#downloadCardsButton { margin-top: 10px; background: var(--lime); }
#downloadCardsButton:hover, #downloadCardsButton:active { background: var(--teal); }
#downloadCardsButton:disabled { cursor: wait; opacity: .8; transform: none; box-shadow: 4px 4px 0 var(--ink); }
.home-indicator { width: 115px; height: 6px; margin: 0 auto 8px; border: 2px solid var(--ink); border-radius: 99px; background: var(--ink); }

.paywall-modal[hidden] { display: none; }
.paywall-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; }
.paywall-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.74); backdrop-filter: blur(3px); }
.paywall-panel { position: relative; z-index: 1; width: min(560px, calc(100vw - 36px)); padding: 38px; border: var(--border); border-radius: 22px; background: var(--lavender); box-shadow: 11px 11px 0 var(--ink); }
.paywall-close { position: absolute; top: -14px; right: -14px; width: 46px; height: 46px; display: grid; place-items: center; border: var(--border); border-radius: 50%; color: var(--ink); background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); font-size: 28px; font-weight: 1000; line-height: 1; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.paywall-close:hover { background: var(--teal); transform: translate(2px,2px) rotate(6deg); box-shadow: 2px 2px 0 var(--ink); }
.paywall-icon { width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 20px; border: var(--border); border-radius: 14px; background: var(--orange); box-shadow: 5px 5px 0 var(--ink); transform: rotate(-3deg); }
.paywall-icon .fa-lock { color: var(--white); font-size: 28px; -webkit-text-stroke: 2px var(--ink); filter: drop-shadow(2px 2px 0 var(--ink)); }
.paywall-kicker { display: inline-block; margin: 0 0 12px; padding: 6px 9px; border: 2px solid var(--ink); background: var(--lime); box-shadow: 3px 3px 0 var(--ink); font-size: 11px; font-weight: 950; letter-spacing: .14em; }
.paywall-panel h2 { margin: 0; font-size: clamp(30px, 6vw, 47px); line-height: .98; letter-spacing: -.055em; }
.paywall-subtitle { margin: 18px 0; font-size: 16px; font-weight: 700; line-height: 1.45; }
.paywall-benefits { display: grid; gap: 10px; margin: 22px 0 26px; padding: 0; list-style: none; }
.paywall-benefits li { padding: 11px 13px; border: 2px solid var(--ink); background: rgba(255,255,255,.7); box-shadow: 3px 3px 0 var(--ink); font-size: 14px; font-weight: 850; line-height: 1.35; }
.paywall-action { width: 100%; padding: 17px 18px; border: var(--border); border-radius: 10px; color: var(--ink); background: var(--teal); box-shadow: 6px 6px 0 var(--ink); font-size: clamp(15px, 3vw, 20px); font-weight: 1000; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.paywall-action:hover, .paywall-action:active { background: var(--yellow); transform: translate(5px,5px); box-shadow: 1px 1px 0 var(--ink); }
.paywall-close:focus-visible, .paywall-action:focus-visible { outline: 4px solid var(--blue); outline-offset: 3px; }
.paywall-note { margin: 14px 0 0; text-align: center; font-size: 11px; font-weight: 750; }
.paywall-secure { margin: 8px 0 0; text-align: center; font-size: 11px; font-weight: 750; opacity: .75; }

@media (max-width: 920px) { .course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) {
  .site-nav { min-height: 68px; padding: 10px 14px; }
  .brand { font-size: 16px; }
  .brand-mark { width: 34px; height: 34px; }
  .premium-button { padding: 9px 10px; font-size: 11px; }
  .library-shell { width: min(100% - 28px, 1240px); padding: 46px 0 70px; }
  .hero { grid-template-columns: minmax(0, 1fr) 105px; align-items: start; gap: 12px; padding-bottom: 40px; }
  .hero-mascot { margin-top: 6px; border-radius: 15px; box-shadow: 5px 5px 0 var(--ink); }
  .hero h1 { font-size: clamp(45px, 15vw, 66px); }
  .hero h1 span { -webkit-text-stroke: 1px var(--ink); text-shadow: 3px 3px 0 var(--yellow); }
  .filter-bar { padding: 20px; }
  .section-label-row { align-items: flex-start; flex-direction: column; gap: 5px; }
  .filter-chips { gap: 9px; }
  .filter-chip { padding: 8px 11px; font-size: 12px; }
  .course-grid { grid-template-columns: 1fr; }
  .site-footer { flex-direction: column; font-size: 13px; }
  .modal-close { top: -8px; right: -8px; width: 43px; height: 43px; }
  .paywall-panel { padding: 28px 22px 24px; }
  .paywall-icon { width: 52px; height: 52px; margin-bottom: 16px; }
  .paywall-benefits { margin-block: 18px 21px; }
}

@media (max-height: 700px) {
  .phone { min-height: 0; border-radius: 23px; }
  .phone-header { padding-block: 8px; }
  .status-bar { padding-bottom: 5px; }
  .progress-row { margin-top: 7px; }
  .carousel { padding-top: 10px; }
  .lesson-card { padding: 18px; }
  .lesson-content { margin: 12px 0 auto; }
  .lesson-icon { width: 42px; height: 42px; margin-bottom: 12px; }
  .lesson-content h3 { font-size: 22px; }
  .lesson-content p { margin-top: 9px; font-size: 13px; }
  .carousel-controls { padding-block: 6px 8px; }
  .carousel-arrow { height: 36px; }
  .share-control { padding-bottom: 7px; }
  .copy-pack-button { padding-block: 8px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }

/* Static lesson pages (lessons/<slug>.html) */
.lesson-page { max-width: 860px; }
.lesson-article h1 { margin: 12px 0 10px; font-size: clamp(30px, 5vw, 48px); line-height: 1.08; letter-spacing: -.02em; }
.lesson-breadcrumb { margin: 0 0 22px; font-size: 13px; font-weight: 800; }
.lesson-breadcrumb a { color: var(--ink); text-decoration: underline; }
.lesson-meta { margin: 0 0 30px; font-size: 14px; font-weight: 800; opacity: .75; }
.lesson-slide { margin: 0 0 22px; padding: 24px 26px; border: var(--border, 3px solid var(--ink)); border-radius: 14px; background: #fff; box-shadow: 6px 6px 0 var(--ink); }
.lesson-slide-tag { display: inline-block; margin: 0 0 10px; padding: 5px 10px; border: 2px solid var(--ink); background: var(--yellow, #FFD166); font-size: 11px; font-weight: 950; letter-spacing: .14em; }
.lesson-slide h2 { margin: 0 0 10px; font-size: clamp(19px, 3vw, 24px); }
.lesson-slide-text { margin: 0; font-size: 16px; line-height: 1.6; }
.lesson-premium-pitch { margin: 30px 0 22px; padding: 28px; border: 3px solid var(--ink); border-radius: 14px; background: var(--lime, #A3E635); box-shadow: 6px 6px 0 var(--ink); }
.lesson-premium-pitch h2 { margin: 8px 0 10px; }
.lesson-premium-pitch ul { margin: 14px 0 20px; padding-left: 18px; font-weight: 700; }
.lesson-unlock-link { display: inline-block; width: auto; padding: 15px 26px; text-decoration: none; text-align: center; }
.lesson-back { margin-top: 34px; font-weight: 800; }
.lesson-back a { color: var(--ink); }


.nav-blog-link { margin-left: auto; margin-right: 14px; padding: 8px 30px; background: #ff69b4; color: #fff; font-weight: 900; font-size: 15px; text-decoration: none; border: 3px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink); white-space: nowrap; }
.nav-blog-link:hover { background: var(--lime); }
.site-nav .premium-button { margin-left: 0; }
@media (max-width: 720px) { .nav-blog-link { display: none; } }

.blog-page { max-width: none; }
#soro-blog { max-width: none; text-align: left; margin-top: 26px; }
#soro-blog > div, #soro-blog article, #soro-blog a { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }

/* Phone portrait: category pills two per row to cut scrolling */
@media (max-width: 600px) {
  .filter-chips { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .filter-chip { min-height: 46px; padding: 6px 8px; font-size: 11px; }
  .chip-icon { font-size: 16px; margin-right: 4px; }
  .chip-count { font-size: 12px; margin-left: 4px; padding: 1px 4px; }
}