styles.css

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');
:root {
  color-scheme: light;
  --deep: #163e2e; --deep2: #245941; --green: #2f8058; --mint: #ddecdd;
  --olive: #87a46e; --lime: #def0a7; --text: #25392f; --muted: #758179;
  --border: #e7eae3; --canvas: #f8f9f5; --white: #fff; --radius: 20px;
  --shadow: 0 10px 30px rgba(33, 60, 43, .045);
  font-family: 'DM Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text); background: var(--canvas); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: not-allowed; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
svg.icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }
:focus-visible { outline: 3px solid #98c25e; outline-offset: 3px; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.skip-link { position: fixed; left: 20px; top: -60px; z-index: 1000; background: #fff; padding: 12px 18px; border-radius: 8px; }
.skip-link:focus { top: 14px; }
.app-shell { min-height: 100vh; display: flex; }
.sidebar { position: fixed; z-index: 35; width: 257px; inset: 0 auto 0 0; background: #fff; border-right: 1px solid #e9eee9; padding: 30px 20px 20px; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 0; min-width:0; }
.brand-emblem { width: 43px; height: 43px; flex: 0 0 43px; color: #fff; border-radius: 13px; background: #256a49; display: flex; justify-content: center; align-items: center; box-shadow: 0 6px 12px rgba(41,107,75,.17); }
.brand-type strong { font: 700 21px/1.1 'Outfit', sans-serif; letter-spacing: -.85px; color: #1b3c2b; display:block; white-space:nowrap; }
.brand-type strong span { color: #68a06b; }
.brand-type small { display:block; margin-top: 5px; font-size: 8px; letter-spacing: 1.95px; color: #99a49a; font-weight:800; }
.sidebar-main { margin-top: 54px; }
.nav-section-label { margin: 0 13px 14px; color:#acb5ac; font-size: 10px; letter-spacing: 1.55px; font-weight:800; text-transform: uppercase; }
.side-nav { display: flex; flex-direction: column; gap: 6px; }
.nav-link { display:flex; align-items:center; gap:14px; border-radius:12px; color:#738179; padding:12px 13px; font-weight:700; min-height:47px; transition: background .2s,color .2s; }
.nav-link:hover { color:var(--deep); background:#f6f8f2; }
.nav-link .nav-icon { width: 24px; height: 24px; display:flex; align-items:center; justify-content:center; }
.nav-link.is-active { background:#ecf5e9; color:#2e7750; }
.nav-active-dot { width:6px; height:6px; background:#4e9b63; border-radius:50%; margin-left:auto; }
.sidebar-bottom { margin-top:auto; background:linear-gradient(154deg,#f3f8ec 0%,#eaf3e5 100%); border:1px solid #e7efdf; padding:20px 18px; border-radius:19px; }
.sidebar-help-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; background:#deebd4; color:#3d8155; margin-bottom:12px; }
.sidebar-bottom strong { font: 700 16px/1.35 'Outfit', sans-serif; display:block; color:#274b32; }
.sidebar-bottom p { margin: 7px 0 13px; font-size:12px; line-height:1.6; color:#718172; }
.sidebar-bottom-link { color:#388354; display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:800; }
.sidebar-footer { margin:21px 10px 1px; color:#97a49a; font-size:11px; display:flex; gap:6px; align-items:center; }
.sidebar-footer span { margin-left:auto; }
.main-column { margin-left:257px; width:calc(100% - 257px); min-width:0; display:flex; flex-direction:column; min-height:100vh; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:19px 44px; background:rgba(255,255,255,.78); border-bottom:1px solid #ebeee8; min-height:75px; position:sticky; top:0; z-index:20; backdrop-filter:blur(14px); }
.topbar-left,.topbar-right { display:flex; align-items:center; gap:22px; }
.topbar-context { display:flex; align-items:center; gap:10px; color:#6c7f70; font-size:13px; font-weight:600; }
.context-dot { width:8px; height:8px; border-radius:50%; background:#9cbd80; box-shadow:0 0 0 4px #edf5e9; }
.topbar-demo { display:flex; align-items:center; gap:7px; background:#f0f5ec; color:#68866c; padding:7px 12px; border-radius:100px; font-size:11px; font-weight:700; white-space:nowrap; }
.language-switch { display:flex; align-items:center; gap:3px; padding:4px; background:#eef2e9; border-radius:11px; }
.language-switch button { border:0; color:#8a978b; padding:7px 11px; border-radius:8px; font-weight:800; font-size:11px; background:transparent; }
.language-switch button.selected { background:#fff; color:#2f7250; box-shadow:0 1px 5px rgba(17,67,37,.09); }
.menu-trigger { display:none!important; }
.page-content { width:100%; max-width:1590px; margin:0 auto; padding:29px 44px 58px; flex:1; }
.main-footer { padding:19px 44px; border-top:1px solid #e9ece5; display:flex; justify-content:space-between; gap:20px; color:#9caaa0; font-size:11px; }
.mobile-bottom-nav { display:none; }
.welcome-strip { display:flex; align-items:center; gap:10px; color:#8a998c; font-size:12px; margin:0 0 16px 3px; font-weight:700; }
.welcome-strip span:first-child { color:#466f55; }
.welcome-separator { width:4px; height:4px; background:#a7baab; border-radius:50%; }
.hero-banner { min-height:345px; display:grid; grid-template-columns:55% 45%; position:relative; isolation:isolate; background:linear-gradient(115deg,#174532 3%, #1c533b 67%,#256448 100%); border-radius:26px; overflow:hidden; box-shadow:0 16px 36px rgba(19,67,43,.13); }
.hero-copy { padding:47px 0 44px 47px; z-index:2; position:relative; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:9px; color:#c7e6ae; font-size:10px; letter-spacing:2px; font-weight:800; margin-bottom:12px; }
.hero-copy h1 { font: 700 clamp(30px,3.4vw,48px)/1.09 'Outfit', sans-serif; letter-spacing:-1.9px; color:#fff; margin:0 0 14px; max-width:530px; }
.hero-copy p { color:#d4e2d5; font-size:13px; line-height:1.8; margin:0; max-width:440px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:11px; margin-top:25px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:11px 16px; border:1px solid transparent; border-radius:11px; min-height:42px; font-size:12px; font-weight:800; line-height:1.25; transition:transform .2s, background .2s, box-shadow .2s; white-space:nowrap; }
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:#286a4a; color:#fff; border-color:#286a4a; box-shadow:0 3px 10px rgba(30,81,54,.10); }
.btn-primary:hover { background:#21583c; }
.btn-ivory { background:#e7f2dd; color:#245640; }
.btn-ivory:hover { background:#fff; }
.btn-glass { border-color:rgba(255,255,255,.26); background:rgba(255,255,255,.09); color:#fff; }
.btn-glass:hover { background:rgba(255,255,255,.18); }
.btn-secondary { background:#fff; color:#2f6f4e; border-color:#d8e5d9; }
.btn-secondary:hover { background:#f2f8ef; }
.btn-small { padding:9px 12px; min-height:36px; font-size:11px; }
.btn-block { display:flex; width:100%; }
.btn-danger-ghost { background:#fff; color:#a94e48; border-color:#f0dad7; }
.btn-danger-ghost:hover { background:#fff5f2; }
.hero-art { align-self:end; justify-self:end; position:relative; z-index:1; width: min(100%,535px); margin-right: -10px; }
.hero-art img { width:100%; height:auto; filter:drop-shadow(0 6px 11px rgba(12,43,24,.09)); }
.hero-art-decoration { position:absolute; border:1px solid rgba(255,255,255,.08); width:290px; height:290px; border-radius:50%; right:-116px; top:-128px; pointer-events:none; }
.decoration-b { right:190px; top:165px; width:280px; height:280px; }
.quick-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:22px; }
.stat-card { display:flex; align-items:center; gap:14px; padding:19px 19px; background:#fff; border:1px solid #edf0e9; border-radius:17px; box-shadow:var(--shadow); min-width:0; }
.stat-symbol { width:50px; height:50px; border-radius:14px; display:grid; place-items:center; flex:0 0 auto; }
.stat-sage { background:#e9f3e4; color:#5c965f; }.stat-peach { background:#fbefdd; color:#d39b4a; }.stat-blue { background:#e7f0fa; color:#6998c2; }
.stat-card > div { display:flex; flex-direction:column; min-width:0; }
.stat-value { font:700 25px/1.1 'Outfit', sans-serif; letter-spacing:-1px; color:#263e2f; }
.stat-value small { font:500 13px 'DM Sans'; color:#a2aea4; }
.stat-label { font-size:11px; font-weight:600; color:#89988c; margin-top:4px; }
.stat-arrow { color:#c3d1c5; margin-left:auto; align-self:flex-start; }
.home-content-grid { display:grid; grid-template-columns:minmax(0, 1fr) 295px; gap:24px; margin-top:33px; }
.home-primary,.home-side { min-width:0; }
.section-block { margin-bottom:39px; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.section-head h2 { font:700 23px/1.18 'Outfit', sans-serif; letter-spacing:-.6px; margin:4px 0 3px; color:#253d2e; }
.section-head p { color:#8b978e; font-size:12px; margin:0; }
.section-kicker { display:inline-block; font-size:10px; letter-spacing:1.8px; color:#88a28e; font-weight:800; }
.text-link { display:inline-flex; align-items:center; gap:7px; color:#40835a; font-size:12px; font-weight:800; white-space:nowrap; }
.text-link:hover { color:#245439; }
.learning-progress-panel { display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--border); border-radius:13px; padding:13px 16px; margin-bottom:16px; }
.learning-progress-panel > div:first-child { display:flex; gap:11px; align-items:center; white-space:nowrap; }
.learning-progress-panel strong { color:#2c8154; font:700 16px 'Outfit'; }
.learning-progress-panel > span { white-space:nowrap; color:#8a998d; font-size:11px; }
.muted-label { color:#667d6e; font-size:11px; font-weight:700; }
.progress-track { border-radius:50px; background:#e6eee2; height:7px; width:100%; min-width:30px; overflow:hidden; }
.progress-track span { display:block; height:100%; border-radius:50px; background:linear-gradient(90deg,#61a56e,#a8cb7b); transition:width .4s; }
.learning-progress-panel > .progress-track { flex:1; }
.lesson-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.lesson-card { border:1px solid #e7ebe4; border-radius:17px; background:#fff; overflow:hidden; min-width:0; display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s; }
.lesson-card:hover { transform:translateY(-3px); box-shadow:0 12px 28px rgba(33,73,45,.08); }
.lesson-card-art { min-height:126px; display:flex; justify-content:center; align-items:center; position:relative; overflow:hidden; }
.art-sage { background:#e9f2e5; color:#6d9f68; }.art-pink { background:#f8e9e8; color:#ca8c91; }.art-blue { background:#e9f0f8; color:#7d9ac5; }.art-gold { background:#fbf0db; color:#cc9b55; }.art-peach { background:#faede0; color:#cd9569; }
.lesson-card-art:before,.lesson-card-art:after { content:''; position:absolute; width:170px; height:170px; border:2px solid currentColor; opacity:.12; border-radius:50%; top:45%; left:55%; }
.lesson-card-art:after { width:110px; height:110px; top:-59px; left:-42px; }
.lesson-art-glow { position:absolute; background:rgba(255,255,255,.38); width:100px; height:100px; border-radius:50%; }
.lesson-illustration { width:75px; height:75px; border-radius:20px; background:rgba(255,255,255,.57); box-shadow:0 9px 16px rgba(44,87,51,.055); display:grid; place-items:center; position:relative; transform:rotate(-8deg); }
.lesson-illustration svg { transform:rotate(8deg); }
.lesson-number { position:absolute; right:14px; top:10px; font:800 10px 'Outfit'; opacity:.45; }
.lesson-card-body { padding:17px 16px 15px; display:flex; flex-direction:column; flex:1; }
.lesson-card-meta { display:flex; align-items:center; gap:5px; justify-content:space-between; min-height:22px; }
.lesson-card-meta > span:last-child { display:flex; align-items:center; gap:4px; font-size:10px; color:#a0aaa0; white-space:nowrap; }
.category-pill { display:inline-flex; gap:6px; align-items:center; background:#f1f5ee; padding:4px 9px; border-radius:50px; color:#53845b; font-size:10px; font-weight:800; line-height:1.4; }
.category-pill.nutrition { color:#ba7c7b; background:#fdf0ed; }
.category-dot { height:6px; width:6px; background:#7ab781; border-radius:50%; display:inline-block; }
.category-dot.category-nutrition { background:#d99d9b; }
.lesson-card h3 { font:700 17px/1.25 'Outfit', sans-serif; letter-spacing:-.25px; margin:13px 0 7px; }
.lesson-card p { margin:0 0 18px; color:#819084; font-size:11.5px; line-height:1.7; flex:1; }
.lesson-card-action { display:flex; align-items:center; justify-content:space-between; gap:7px; width:100%; border:0; border-top:1px solid #eff1ec; padding:12px 0 0; background:transparent; color:#3d8457; font-size:11.5px; font-weight:800; text-align:left; }
.lesson-card-action:hover { color:#17432e; }
.pathways-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.pathway-card { position:relative; overflow:hidden; padding:23px; min-height:218px; border:1px solid; border-radius:17px; display:flex; flex-direction:column; align-items:flex-start; }
.pathway-card:after { content:''; position:absolute; width:145px; height:145px; border:1px solid currentColor; border-radius:50%; opacity:.14; right:-20px; top:-35px; }
.pathway-farming { background:#e9f2e4; border-color:#e1eadb; color:#467f4c; }
.pathway-nutrition { background:#f9ece9; border-color:#f1e4e2; color:#b87f79; }
.pathway-icon { width:44px; height:44px; display:grid; place-items:center; background:#ffffffaa; border-radius:12px; margin-bottom:10px; }
.pathway-overline { font-weight:800; font-size:10px; text-transform:uppercase; letter-spacing:1px; opacity:.8; }
.pathway-card h3 { font:700 20px 'Outfit'; letter-spacing:-.5px; color:#2c4b34; margin:6px 0 5px; }
.pathway-card p { font-size:11.5px; line-height:1.65; color:#6b816d; max-width:270px; margin:0; }
.pathway-nutrition p { color:#8d7776; }
.pathway-link { display:flex; gap:8px; align-items:center; font-size:11.5px; font-weight:800; margin-top:auto; padding-top:16px; }
.home-side { padding-top:0; }
.next-lesson-box { padding:23px; background:#fff; border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow); }
.next-icon { width:70px; height:70px; margin:20px 0; display:grid; place-items:center; border-radius:19px; background:#e8f3e3; color:#569962; }
.next-lesson-box h3 { font:700 23px/1.18 'Outfit'; letter-spacing:-.5px; margin:0 0 8px; }
.next-lesson-box p { color:#819084; font-size:12px; line-height:1.75; margin:0; }
.next-meta { color:#8a9b8d; margin:18px 0; display:flex; align-items:center; gap:7px; font-size:11px; font-weight:700; }
.meta-divider { width:4px; height:4px; border-radius:50%; background:#bbcbbc; margin:0 3px; }
.field-note-box { margin-top:17px; padding:23px; background:linear-gradient(145deg,#fff5dd,#fff8e8); border:1px solid #f2e9d4; border-radius:20px; }
.field-note-top { display:flex; align-items:center; gap:12px; }
.field-note-sun { color:#dca760; width:42px; height:42px; display:grid; place-items:center; background:#f8e9c7; border-radius:13px; }
.field-note-box h3 { margin:17px 0 8px; font:700 21px/1.2 'Outfit'; letter-spacing:-.5px; }
.field-note-box p { color:#938774; font-size:12px; line-height:1.75; margin:0 0 17px; }
.mini-notice { display:flex; align-items:flex-start; gap:10px; margin-top:20px; padding:14px 4px; color:#9aab9d; }
.mini-notice p { margin:0; font-size:11px; line-height:1.6; }
/* Shared inner pages */
.inner-page { padding-top:12px; }
.page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:10px; font-weight:800; color:#71a079; letter-spacing:1.8px; }
.eyebrow-line { width:16px; height:2px; background:#7eaf7c; border-radius:2px; }
.page-heading h1 { font:700 clamp(29px,3vw,39px)/1.14 'Outfit'; letter-spacing:-1.2px; margin:11px 0 6px; color:#243e2e; }
.page-heading p { color:#88978b; font-size:13px; line-height:1.7; margin:0; max-width:660px; }
.heading-action { margin-bottom:5px; }
.learning-summary { background:#edf5e9; border:1px solid #e1eede; border-radius:17px; padding:17px 22px; display:flex; align-items:center; gap:17px; margin-bottom:23px; }
.learning-summary-icon { width:49px; height:49px; border-radius:14px; background:#dcecd6; color:#548e62; display:grid; place-items:center; }
.learning-summary-copy { display:flex; flex-direction:column; gap:3px; }
.learning-summary-copy strong { font:700 16px 'Outfit'; }
.learning-summary-copy span { color:#718d77; font-size:11px; }
.learning-summary-progress { width:min(35%,260px); display:flex; align-items:center; gap:13px; margin-left:auto; font-weight:800; color:#438059; }
.catalog-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin:23px 0 19px; }
.filter-tabs { display:flex; align-items:center; gap:5px; padding:4px; background:#edf1e9; border-radius:11px; }
.filter-tabs button { background:none; border:0; color:#8a968c; border-radius:8px; font-weight:800; font-size:11px; min-height:35px; padding:8px 14px; white-space:nowrap; }
.filter-tabs button:hover { color:#34754f; }
.filter-tabs button.active { color:#377c52; background:#fff; box-shadow:0 2px 7px rgba(34,68,45,.07); }
.search-field { border:1px solid #e0e9df; background:#fff; border-radius:11px; padding:0 13px; display:flex; align-items:center; gap:9px; color:#97a89a; min-height:42px; width:min(100%,270px); }
.search-field:focus-within { outline:2px solid #b3d5b2; outline-offset:0; }
.search-field input { min-width:0; border:0; outline:none; background:none; color:#3d5a43; height:40px; width:100%; font-size:12px; }
.search-field input::placeholder { color:#a5b0a6; }
.catalog-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.catalog-grid .lesson-card-art { min-height:150px; }
.catalog-grid .lesson-card-body { padding:18px; }
.catalog-grid .lesson-card h3 { font-size:18px; }
.educational-note { display:flex; align-items:flex-start; gap:9px; font-size:11px; color:#98a69a; padding:21px 5px 5px; }
.resource-feature { background:#eaf3e5; border:1px solid #e4eedf; border-radius:16px; display:flex; align-items:center; gap:17px; padding:21px 23px; color:#547d56; margin-bottom:20px; position:relative; overflow:hidden; }
.resource-feature-icon { width:55px; height:55px; flex-shrink:0; border-radius:14px; background:#d8eacb; display:grid; place-items:center; color:#508459; }
.resource-feature strong { font:700 16px 'Outfit'; display:block; color:#36543d; }
.resource-feature p { color:#779078; margin:4px 0 0; font-size:12px; }
.resource-feature-sparkle { margin-left:auto; color:#a1c39a; }
.resource-toolbar { align-items:center; }
.toolbar-side { display:flex; align-items:center; gap:10px; }
.saved-filter { display:flex; align-items:center; gap:6px; padding:10px 12px; border-radius:11px; border:1px solid #dfe9dc; background:#fff; font-size:11px; color:#667a6b; font-weight:700; white-space:nowrap; }
.saved-filter.active { color:#27754b; background:#eaf6e5; border-color:#bedab9; }
.resource-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; }
.resource-card { display:flex; flex-direction:column; min-width:0; padding:20px 19px 17px; background:#fff; border:1px solid var(--border); border-radius:18px; min-height:255px; box-shadow:var(--shadow); transition:transform .2s, box-shadow .2s; }
.resource-card:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(33,73,45,.07); }
.resource-card-top { display:flex; align-items:flex-start; justify-content:space-between; }
.resource-icon { display:grid; place-items:center; width:58px; height:58px; border-radius:15px; }
.bookmark-button { border:0; width:34px; height:34px; display:grid; place-items:center; background:#f6f8f4; color:#abb8ac; border-radius:10px; }
.bookmark-button:hover,.bookmark-button.is-saved { color:#3c8558; background:#e7f4e6; }
.bookmark-button.is-saved svg { fill:#a5d8ae; }
.resource-card-body { flex:1; }
.resource-meta { display:flex; align-items:center; gap:7px; color:#829487; font-size:10px; font-weight:800; margin:16px 0 9px; }
.resource-dot { display:inline-block; background:#bed0be; width:3px; height:3px; border-radius:50%; }
.resource-card h3 { font:700 19px/1.25 'Outfit'; margin:0 0 8px; letter-spacing:-.28px; }
.resource-card p { color:#879589; font-size:12px; line-height:1.7; margin:0 0 18px; }
.resource-card-bottom { display:flex; justify-content:space-between; align-items:center; border-top:1px solid #f0f2ec; padding-top:13px; gap:10px; }
.resource-cta { display:inline-flex; align-items:center; gap:7px; border:0; padding:0; background:transparent; color:#357b54; font-weight:800; font-size:11.5px; text-align:left; }
.resource-cta:hover { color:#1a5234; }
.resource-source { padding:3px 8px; border-radius:6px; color:#74897a; background:#eef4eb; font-size:9px; font-weight:800; }
/* Community */
.privacy-ribbon { display:flex; align-items:center; gap:15px; padding:17px 19px; background:#fff4e3; border:1px solid #f0e3ce; color:#b18851; border-radius:15px; margin-bottom:31px; }
.privacy-ribbon > svg { flex:0 0 auto; }
.privacy-ribbon strong { color:#8d6f46; font-size:12px; }
.privacy-ribbon p { margin:2px 0 0; color:#a29377; font-size:11px; }
.mint-ribbon { background:#eef6eb; border-color:#e1eedf; color:#5e946a; }
.mint-ribbon strong { color:#416b4a; }.mint-ribbon p { color:#77977d; }
.prompt-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; margin-bottom:34px; }
.prompt-card { text-align:left; padding:23px; min-height:230px; border:1px solid #e6ede2; border-radius:17px; background:#fff; display:flex; flex-direction:column; align-items:flex-start; transition:transform .2s; }
.prompt-card:hover { transform:translateY(-2px); }
.prompt-icon { width:49px; height:49px; display:grid; place-items:center; border-radius:13px; background:#edf5e9; color:#5a9767; margin-bottom:15px; }
.prompt-card:nth-child(2) .prompt-icon { background:#faece9; color:#c28b88; }.prompt-card:nth-child(3) .prompt-icon { background:#f8efdf; color:#bb9b61; }
.prompt-card h3 { font:700 19px/1.23 'Outfit'; letter-spacing:-.2px; margin:0 0 6px; }
.prompt-card p { font-size:11.5px; color:#8d998e; line-height:1.7; margin:0 0 18px; }
.prompt-link { display:flex; align-items:center; gap:7px; color:#347a4f; font-weight:800; font-size:11px; margin-top:auto; }
.discussion-section { padding-bottom:10px; }
.discussion-header { margin-bottom:16px; }
.compact-tabs button { padding:7px 10px; min-height:31px; }
.post-stack { display:grid; grid-template-columns:1fr; gap:15px; max-width:840px; }
.post-card { background:#fff; border:1px solid var(--border); border-radius:18px; padding:23px 26px; box-shadow:var(--shadow); }
.post-author-row { display:flex; align-items:center; gap:11px; }
.avatar-avatar { width:43px; height:43px; border-radius:50%; display:grid; place-items:center; color:#2d6b42; background:#e6f0e2; font-weight:800; }
.post-author { display:flex; flex-direction:column; gap:0; }.post-author strong { font-size:12px; }.post-author span { color:#9ca99f; font-size:10px; }
.post-author-row > .category-pill { margin-left:auto; }
.post-card h3 { font:700 20px 'Outfit'; margin:17px 0 7px; }.post-body { font-size:13px; color:#697d6c; line-height:1.8; white-space:pre-wrap; overflow-wrap:anywhere; margin:0 0 18px; }
.post-replies { display:flex; gap:8px; align-items:center; border-top:1px solid #edf1eb; padding:12px 0; color:#76947e; font-weight:700; font-size:11px; }
.post-reply { display:flex; align-items:flex-start; gap:10px; background:#f7faf5; border-radius:13px; padding:12px; margin-bottom:10px; }
.reply-avatar { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#e3f0dd; color:#568462; flex-shrink:0; }
.post-reply strong { font-size:11px; }.post-reply p { margin:3px 0 0; color:#6c7e72; font-size:12px; white-space:pre-wrap; overflow-wrap:anywhere; }
.reply-form { display:flex; align-items:center; gap:6px; background:#f6f9f4; border:1px solid #e8f0e5; border-radius:12px; padding:4px; }
.reply-form input { flex:1; min-width:0; background:transparent; border:0; padding:9px 12px; outline:none; color:#344b3c; font-size:12px; }
.reply-form input::placeholder { color:#a1afa2; }
.reply-form button { border:0; width:36px; height:36px; flex:0 0 36px; color:#fff; background:#317950; border-radius:9px; display:grid; place-items:center; }
/* Impact */
.impact-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; margin:20px 0 22px; }
.impact-metric { display:flex; flex-direction:column; align-items:flex-start; padding:22px 23px; background:#fff; border:1px solid var(--border); border-radius:18px; }
.impact-metric-icon { width:48px; height:48px; border-radius:13px; display:grid; place-items:center; margin-bottom:17px; }
.impact-metric > span { color:#8a988b; font-size:11px; font-weight:700; }
.impact-metric > strong { font:700 30px/1.3 'Outfit'; color:#294733; letter-spacing:-1px; margin-top:3px; }.impact-metric small { font:600 14px 'DM Sans'; color:#91a190; }
.chart-card,.records-card,.milestones-card { background:#fff; border:1px solid var(--border); border-radius:18px; padding:23px; min-width:0; }
.chart-card .section-head { margin-bottom:10px; }.chart-card .section-head h2 { font-size:21px; }
.impact-chart { width:100%; height:auto; max-height:330px; display:block; overflow:visible; }
.chart-empty { display:flex; align-items:center; justify-content:center; gap:12px; flex-direction:column; color:#99b29a; min-height:220px; background:linear-gradient(#fff,#fbfdfb); }
.chart-empty span { font-size:12px; color:#93a495; }
.impact-lower-grid { display:grid; grid-template-columns:1.35fr .85fr; gap:18px; margin-top:19px; }
.record-table-wrap { overflow-x:auto; }.record-table { border-collapse:collapse; width:100%; text-align:left; min-width:390px; }
.record-table th { text-transform:uppercase; letter-spacing:1px; color:#9caba0; font-weight:800; font-size:10px; border-bottom:1px solid #eef1ea; padding:12px 11px; }
.record-table td { font-size:12px; color:#718174; border-bottom:1px solid #f0f3ed; padding:12px 11px; }.record-table td strong { color:#395c44; }
.record-table tr:last-child td { border-bottom:0; }
.table-icon-button { border:0; color:#a2aea5; background:transparent; display:grid; place-items:center; padding:7px; border-radius:8px; }.table-icon-button:hover { background:#fff0ee; color:#b15e56; }
.milestone-list { display:flex; flex-direction:column; gap:11px; margin-top:17px; }
.milestone-item { display:flex; align-items:center; gap:12px; color:#a3b0a5; font-weight:700; font-size:12px; padding:11px 0; border-bottom:1px solid #f0f2ed; }.milestone-item:last-child { border-bottom:0; }
.milestone-item > svg { margin-left:auto; color:#c0cfc0; }.milestone-item.achieved { color:#3f6b4a; }.milestone-item.achieved > svg { color:#54a36d; }
.milestone-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:#f4f7f2; color:#acb9ac; }.achieved .milestone-icon { background:#eaf4e8; color:#64a06d; }
.milestone-empty { margin-left:auto; width:7px; height:7px; border-radius:50%; background:#d5ded3; }
.milestone-note { padding:14px; background:#fafbf7; border-radius:12px; margin:20px 0 0; color:#9ba89c; font-size:11px; line-height:1.6; }
/* Support */
.support-hero { background:linear-gradient(105deg,#eaf4e5,#f2f9ed); border-radius:20px; padding:32px; display:flex; justify-content:space-between; gap:15px; align-items:center; border:1px solid #e3eede; }
.support-hero h2 { font:700 26px 'Outfit'; letter-spacing:-.7px; margin:6px 0 8px; }
.support-hero p { font-size:12px; line-height:1.8; color:#6a8870; max-width:670px; margin:0 0 18px; }
.support-hero-art { display:grid; place-items:center; flex:0 0 150px; height:150px; background:rgba(255,255,255,.6); color:#84ae81; border-radius:40% 60% 54% 46%; transform:rotate(-7deg); }
.support-hero-art svg { transform:rotate(7deg); }
.support-section { margin-top:32px; }.support-section .section-head { margin-bottom:15px; }
.specialty-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.specialty-card { padding:22px; background:#fff; border:1px solid var(--border); border-radius:18px; display:flex; flex-direction:column; align-items:flex-start; }
.specialty-icon { display:grid; place-items:center; width:55px; height:55px; border-radius:15px; margin-bottom:14px; }
.specialty-card h3 { font:700 19px 'Outfit'; letter-spacing:-.4px; margin:0 0 7px; }.specialty-card p { color:#8a998d; font-size:11.5px; line-height:1.75; margin:0 0 18px; flex:1; }
.specialty-cta { color:#397c51; font-size:11px; font-weight:800; border:0; background:none; padding:0; display:flex; gap:6px; align-items:center; text-align:left; }
.organizations-grid { display:grid; grid-template-columns:1fr; gap:10px; }
.organization-row { display:flex; align-items:center; gap:15px; background:#fff; border:1px solid var(--border); border-radius:14px; padding:15px 18px; transition:background .2s; }
.organization-row:hover { background:#f9fcf7; }.organization-icon { display:grid; place-items:center; background:#eef5ea; color:#5e9668; border-radius:12px; width:47px; height:47px; flex:0 0 47px; }
.organization-detail { display:flex; flex-direction:column; gap:3px; flex:1; }.organization-detail strong { color:#31513a; font-size:13px; }.organization-detail span { color:#94a094; font-size:11px; }
.organization-row > svg { color:#86a78c; }
.privacy-panel { border:1px solid #e0e9df; background:#f3f7f0; border-radius:19px; padding:22px; margin-top:31px; }
.privacy-panel-header { display:flex; align-items:center; gap:14px; }.privacy-panel-header h2 { font:700 21px 'Outfit'; margin:0 0 4px; }.privacy-panel-header p { margin:0; color:#849487; font-size:12px; }
.privacy-icon { display:grid; place-items:center; width:47px; height:47px; background:#e0edde; color:#519266; border-radius:12px; }
.privacy-controls { display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
/* Empty and dialog */
.empty-state { border:1px dashed #dce8db; background:#fff; border-radius:18px; min-height:225px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:35px; text-align:center; }
.empty-illustration { display:grid; place-items:center; background:#edf5e9; border-radius:18px; color:#86a788; width:66px; height:66px; margin-bottom:13px; }
.empty-state h3 { font:700 19px 'Outfit'; margin:0 0 5px; }.empty-state p { font-size:12px; color:#8e9e90; margin:0; max-width:310px; }
body.has-dialog { overflow:hidden; }
.dialog-backdrop { position:fixed; z-index:100; inset:0; background:rgba(12,39,23,.55); backdrop-filter:blur(5px); display:flex; align-items:center; justify-content:center; padding:24px; }
.dialog-window { position:relative; width:min(100%,570px); max-height:min(90vh,900px); overflow:auto; background:#fff; border-radius:21px; box-shadow:0 22px 90px rgba(12,36,18,.30); outline:none; }
.dialog-large { width:min(100%,740px); }
.dialog-header { display:flex; justify-content:space-between; align-items:flex-start; gap:15px; padding:26px 28px 20px; border-bottom:1px solid #edf0e9; }
.dialog-header h2 { font:700 27px/1.18 'Outfit'; letter-spacing:-.75px; margin:6px 0 0; }
.icon-button { display:grid; place-items:center; width:39px; height:39px; color:#637b67; background:#f1f5ef; border:0; border-radius:10px; flex-shrink:0; }
.icon-button:hover { background:#e4eee1; color:#265f3d; }
.dialog-body { padding:22px 28px 28px; }
.dialog-footer { border-top:1px solid #eef1ea; padding:15px 28px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; position:sticky; bottom:0; background:#fff; }
.dialog-footer-space { flex:1; }
.dialog-lesson-top { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.dialog-lesson-top > span:nth-child(2) { display:inline-flex; gap:5px; align-items:center; color:#90a191; font-size:11px; }
.lesson-done-badge { display:inline-flex; align-items:center; gap:6px; color:#378459; background:#eaf6e9; border-radius:7px; padding:6px 8px; font-size:10px; font-weight:800; }
.lesson-intro { margin:17px 0 18px; font-size:14px; color:#748576; line-height:1.75; }
.lesson-goal { background:#eff7ec; border-radius:13px; color:#4e9562; padding:14px 16px; display:flex; gap:12px; align-items:flex-start; }
.lesson-goal strong { color:#356646; font-size:12px; }.lesson-goal p { color:#64866d; font-size:12px; line-height:1.6; margin:3px 0 0; }
.lesson-steps { margin-top:24px; }.lesson-steps h3 { font:700 19px 'Outfit'; margin:0 0 13px; }
.lesson-step { display:flex; gap:15px; padding:16px 0; border-top:1px solid #eef2ed; }
.lesson-step-number { width:34px; height:34px; flex:0 0 34px; background:#f0f5ec; border-radius:10px; display:grid; place-items:center; font:800 11px 'Outfit'; color:#589163; }
.lesson-step h4 { font:700 15px 'Outfit'; margin:1px 0 6px; }.lesson-step p { color:#758679; font-size:12.5px; line-height:1.75; margin:0; }
.quiz { margin-top:17px; padding:21px; border:1px solid #eee8db; background:#fffaf0; border-radius:15px; }
.quiz-header { display:flex; gap:9px; align-items:center; color:#b28e4c; }.quiz-header h3 { margin:0; font:700 18px 'Outfit'; color:#4e4c39; }.quiz-question { font-weight:700; font-size:12.5px; color:#585e4e; margin:11px 0 13px; }
.quiz-options { display:grid; gap:8px; }.quiz-option { display:flex; align-items:center; gap:10px; padding:11px; border:1px solid #ede8dd; border-radius:10px; background:#fff; cursor:pointer; font-size:12px; color:#667368; }
.quiz-option.selected { background:#f0f6e8; border-color:#acd1a9; }.quiz-option input { accent-color:#348354; width:16px; height:16px; }
.quiz-result-row { display:flex; gap:12px; align-items:center; margin-top:14px; flex-wrap:wrap; }
.quiz-feedback { display:inline-flex; align-items:center; gap:5px; color:#ad7c52; font-size:11px; font-weight:700; }.quiz-feedback.right { color:#3e8757; }
.dialog-description { margin:0 0 20px; font-size:12.5px; line-height:1.8; color:#7f8e81; }
.guide-illustration { height:102px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.guide-intro { font-size:12px; color:#738779; line-height:1.8; }
.guide-checklist { padding:0; list-style:none; margin:14px 0 20px; display:grid; gap:8px; }
.guide-checklist li { display:flex; align-items:flex-start; gap:12px; border:1px solid #edf1e9; border-radius:11px; padding:12px; }
.guide-checklist li span { color:#5c9869; background:#ecf5e7; width:28px; height:28px; border-radius:9px; display:grid; place-items:center; flex-shrink:0; }
.guide-checklist li p { font-size:12px; color:#657c6a; margin:3px 0 0; }
.guide-disclaimer { padding:12px; border-radius:10px; background:#f9f7ef; font-size:11px; line-height:1.6; color:#978970; }
.dialog-form { display:flex; flex-direction:column; gap:17px; }
.form-two-col { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.form-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.form-field label { color:#4c6653; font-size:11px; font-weight:800; }
.form-field input,.form-field select,.form-field textarea { width:100%; background:#fbfdf9; border:1px solid #dfe8dd; border-radius:11px; color:#34523e; padding:11px 13px; outline:none; font-size:12px; }
.form-field input:focus,.form-field select:focus,.form-field textarea:focus { border-color:#8dbb95; box-shadow:0 0 0 3px rgba(94,151,97,.12); }
.form-field textarea { resize:vertical; min-height:85px; }
.form-field input::placeholder,.form-field textarea::placeholder { color:#acb8ad; }
.form-help { display:flex; align-items:flex-start; gap:6px; margin:0; color:#9ca89e; font-size:11px; }
.toast-region { position:fixed; bottom:23px; right:24px; z-index:130; pointer-events:none; }
.toast { display:flex; align-items:center; gap:11px; padding:13px 17px; background:#1e593d; color:#fff; border-radius:12px; font-size:12px; font-weight:700; box-shadow:0 10px 30px rgba(20,60,32,.22); max-width:340px; }
.nav-scrim { display:none; }
/* Tablet and smaller laptops */
@media (max-width:1390px) {
  .page-content { padding-left:32px; padding-right:32px; }
  .topbar,.main-footer { padding-left:32px; padding-right:32px; }
  .home-content-grid { grid-template-columns:minmax(0,1fr) 260px; gap:18px; }
  .hero-copy { padding-left:34px; }
  .lesson-grid { gap:12px; }
  .catalog-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .home-lessons .lesson-card-art { min-height:108px; }
  .home-lessons .lesson-card-body { padding:13px; }
  .home-lessons .lesson-card h3 { font-size:15px; }
}
@media (max-width:1100px) {
  .sidebar { width:218px; padding-left:13px; padding-right:13px; }
  .main-column { margin-left:218px; width:calc(100% - 218px); }
  .brand-type strong { font-size:18px; }.brand-type small { letter-spacing:1.25px; }.brand-emblem { width:40px; height:40px; flex-basis:40px; }
  .home-content-grid { grid-template-columns:1fr; }.home-side { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.home-side .mini-notice { grid-column:1 / -1; }
  .field-note-box { margin-top:0; }
  .hero-banner { min-height:310px; }
  .hero-copy h1 { font-size:36px; }
  .resource-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:800px) {
  .sidebar { transform:translateX(-101%); transition:transform .25s ease; width:270px; box-shadow:0 10px 70px rgba(22,60,42,.08); }
  .sidebar.sidebar-open { transform:translateX(0); }
  .nav-scrim { display:block; position:fixed; z-index:30; inset:0; background:rgba(18,43,27,.40); border:0; border-radius:0; width:100%; height:100%; }
  .main-column { margin-left:0; width:100%; }
  .menu-trigger { display:grid!important; }
  .page-content { padding:22px 24px 52px; }
  .topbar { padding:13px 24px; min-height:64px; }
  .topbar-left { gap:12px; }
  .main-footer { padding:18px 24px; }
  .hero-banner { min-height:320px; }
  .hero-copy { padding:37px 0 35px 33px; }
  .home-content-grid { grid-template-columns:1fr; }
  .home-side { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .catalog-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .lesson-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .prompt-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .specialty-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .impact-lower-grid { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .page-content { padding:19px 16px 90px; }
  .topbar { padding:11px 15px; }
  .topbar-context { font-size:11px; }
  .topbar-demo { display:none; }
  .topbar-right { gap:8px; }
  .language-switch button { padding:7px 9px; }
  .welcome-strip { font-size:11px; }
  .hero-banner { grid-template-columns:1fr; min-height:auto; padding-bottom:0; border-radius:21px; }
  .hero-copy { padding:29px 25px 5px; }
  .hero-copy h1 { font-size:34px; line-height:1.08; max-width:460px; }
  .hero-copy p { font-size:12px; }
  .hero-actions { margin-top:19px; }
  .hero-art { width:100%; max-width:390px; margin-top:-17px; margin-right:0; }
  .quick-stats { grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:13px; }
  .stat-card { flex-direction:column; align-items:flex-start; gap:8px; border-radius:13px; padding:12px; min-height:126px; }
  .stat-symbol { width:35px; height:35px; border-radius:10px; }.stat-symbol svg { width:19px; height:19px; }
  .stat-value { font-size:23px; }.stat-value small { font-size:10px; }
  .stat-label { font-size:9.5px; line-height:1.3; margin-top:3px; }
  .stat-arrow { display:none!important; }
  .home-content-grid { margin-top:27px; gap:4px; }
  .section-head h2 { font-size:21px; }.section-head p { font-size:11px; }.section-kicker { font-size:9px; }
  .learning-progress-panel { gap:11px; padding:12px; flex-wrap:wrap; }
  .learning-progress-panel > .progress-track { flex-basis:100%; order:3; }
  .learning-progress-panel > span { margin-left:auto; }
  .lesson-grid, .catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
  .home-lessons .lesson-card:last-child { display:none; }
  .lesson-card-art,.catalog-grid .lesson-card-art { min-height:102px; }
  .lesson-illustration { width:62px; height:62px; }.lesson-illustration svg { width:34px; height:34px; }
  .lesson-card-body,.catalog-grid .lesson-card-body { padding:13px; }
  .lesson-card h3,.catalog-grid .lesson-card h3 { font-size:16px; }
  .lesson-card p { font-size:10.5px; line-height:1.55; }
  .lesson-card-meta { flex-wrap:wrap; gap:5px; }.lesson-card-meta > span:last-child { font-size:9px; }
  .pathways-grid { gap:10px; }.pathway-card { padding:16px; min-height:206px; }.pathway-card h3 { font-size:17px; }.pathway-card p { font-size:10.5px; }
  .home-side { grid-template-columns:1fr; gap:12px; }.next-lesson-box { padding:21px; }.next-icon { margin:14px 0; }.field-note-box { padding:19px; }.home-side .mini-notice { margin-top:0; }
  .page-heading { align-items:flex-start; flex-direction:column; gap:15px; margin-bottom:20px; }.page-heading h1 { font-size:30px; }.page-heading p { font-size:12px; }.heading-action { margin-bottom:0; }
  .learning-summary { padding:14px; gap:11px; flex-wrap:wrap; }.learning-summary-progress { min-width:130px; width:100%; margin-left:0; }.learning-summary-copy strong { font-size:14px; }
  .catalog-toolbar { align-items:stretch; }.filter-tabs { overflow-x:auto; max-width:100%; }.filter-tabs button { font-size:10.5px; }
  .search-field { width:100%; }
  .resource-feature { padding:15px; }.resource-feature strong { font-size:14px; }.resource-feature-icon { width:42px; height:42px; }.resource-feature-sparkle { display:none!important; }
  .resource-toolbar .toolbar-side { width:100%; }.toolbar-side .search-field { flex:1; width:auto; }.saved-filter { font-size:10px; }
  .resource-grid { grid-template-columns:1fr; gap:12px; }.resource-card { min-height:230px; padding:17px; }.resource-card p { margin-bottom:13px; }
  .privacy-ribbon { padding:13px 15px; gap:9px; }.privacy-ribbon p { font-size:10px; }
  .prompt-grid { grid-template-columns:1fr; gap:10px; }.prompt-card { min-height:0; padding:16px 18px; }.prompt-icon { margin-bottom:9px; width:42px; height:42px; }.prompt-card h3 { font-size:17px; }.prompt-card p { margin-bottom:10px; }
  .discussion-header { align-items:stretch; flex-direction:column; }.post-card { padding:16px; }.post-card h3 { font-size:18px; }
  .impact-stats { gap:9px; }.impact-metric { padding:11px; }.impact-metric-icon { width:36px; height:36px; margin-bottom:9px; }.impact-metric-icon svg { width:20px; height:20px; }.impact-metric > span { font-size:9.5px; line-height:1.3; }.impact-metric > strong { font-size:21px; }.impact-metric small { font-size:10px; }
  .chart-card,.records-card,.milestones-card { padding:15px; }.chart-card .section-head h2 { font-size:19px; }
  .support-hero { padding:20px; }.support-hero-art { display:none; }.support-hero h2 { font-size:22px; }
  .specialty-grid { grid-template-columns:1fr; gap:11px; }.specialty-card { padding:18px; }.specialty-icon { margin-bottom:9px; }
  .privacy-panel { padding:16px; }.privacy-controls .btn { width:100%; }
  .main-footer { padding:17px 15px; flex-direction:column; gap:4px; font-size:10px; }
  .mobile-bottom-nav { display:flex; z-index:25; position:fixed; bottom:0; left:0; right:0; justify-content:space-around; gap:0; background:rgba(255,255,255,.96); backdrop-filter:blur(16px); border-top:1px solid #e8eee5; padding:7px 6px max(8px, env(safe-area-inset-bottom)); box-shadow:0 -4px 30px rgba(33,65,42,.06); }
  .mobile-bottom-nav .mobile-link { flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; border-radius:9px; gap:2px; min-height:46px; font-size:9px; font-weight:700; padding:5px 0; }
  .mobile-bottom-nav .nav-icon { width:auto; height:auto; }.mobile-bottom-nav .mobile-link.is-active { background:#eef6e9; }
  .dialog-backdrop { padding:0; align-items:flex-end; }.dialog-window { width:100%; max-height:94dvh; border-radius:20px 20px 0 0; }
  .dialog-header { padding:19px 19px 14px; }.dialog-header h2 { font-size:23px; }.dialog-body { padding:18px 19px 24px; }.dialog-footer { padding:12px 19px max(16px, env(safe-area-inset-bottom)); }.dialog-footer .btn { font-size:11px; }
  .form-two-col { grid-template-columns:1fr; gap:14px; }.toast-region { left:15px; right:15px; bottom:83px; }.toast { max-width:100%; }
}
@media (max-width:380px) {
  .hero-copy h1 { font-size:31px; }.hero-copy { padding-left:19px; padding-right:19px; }
  .hero-actions .btn { font-size:10.5px; padding:10px; }.lesson-grid,.catalog-grid { grid-template-columns:1fr; }.home-lessons .lesson-card:last-child { display:flex; }
  .lesson-card { flex-direction:row; }.lesson-card-art,.catalog-grid .lesson-card-art { width:37%; min-height:150px; flex-shrink:0; }.lesson-card-body { padding:13px; }.lesson-card p { margin-bottom:10px; }
  .pathways-grid { grid-template-columns:1fr; }.quick-stats { gap:6px; }.stat-card { padding:9px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; animation:none!important; } }
@media print {
  .sidebar,.topbar,.main-footer,.mobile-bottom-nav,.dialog-header .dialog-close,.dialog-footer,.toast-region,.nav-scrim { display:none!important; }
  .main-column { margin:0; width:100%; }.page-content { padding:0; }
  body.has-dialog .app-shell { display:none!important; }
  .dialog-backdrop { display:block; position:static; background:none; backdrop-filter:none; padding:0; }
  .dialog-window { width:100%; max-height:none; border-radius:0; box-shadow:none; overflow:visible; }
  .dialog-body { padding:0 14px; }.dialog-header { padding:0 14px 14px; }
  .guide-checklist li { break-inside:avoid; }.guide-illustration { height:70px; }
}