/* OD-LAYOUT-PRIMITIVES v1 — structure only: display, flex/grid, overflow, wrapping, ratio. */
@layer od-layout {
  :where(.od-stack,.od-row,.od-row-top,.od-cluster,.od-grid,.od-field,.od-stat,.od-cell,.od-tile) > :where(*) { min-width: 0; }
  .od-stack { display: flex; flex-direction: column; gap: var(--od-gap, 8px); }
  .od-row { display: flex; align-items: center; gap: var(--od-gap, 8px); }
  .od-row-top { display: flex; align-items: flex-start; gap: var(--od-gap, 8px); }
  .od-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--od-gap, 8px); }
  .od-fill { flex: 1 1 0; min-width: 0; }
  .od-fixed { flex: none; }
  .od-grid { display: grid; gap: var(--od-gap, 12px); grid-template-columns: repeat(var(--od-cols, 3), minmax(0, 1fr)); }
  .od-stat, .od-field, .od-cell { display: grid; gap: var(--od-gap, 2px); }
  :where(.od-stat,.od-field,.od-cell) > :where(*) { display: block; }
  .od-tile { display: grid; grid-template-rows: auto 1fr; }
  :where(.od-tile) > :where(*) { display: block; }
  .od-media { display: block; width: 100%; height: auto; aspect-ratio: var(--od-ratio, auto); }
  .od-media-cover { object-fit: cover; }
  .od-truncate { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .od-clamp-2, .od-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .od-clamp-2 { -webkit-line-clamp: 2; }
  .od-clamp-3 { -webkit-line-clamp: 3; }
  .od-lines-2 { min-height: calc(2 * 1.4em); }
  .od-nowrap { white-space: nowrap; }
  .od-keep { word-break: keep-all; overflow-wrap: anywhere; }
  .od-screen { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 100%; }
  .od-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
  .od-rail { display: flex; gap: var(--od-gap, 8px); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-inline: var(--od-rail-pad, 16px); scroll-padding-inline: var(--od-rail-pad, 16px); }
  .od-rail::-webkit-scrollbar { display: none; }
  :where(.od-rail) > :where(*) { flex: none; scroll-snap-align: start; }
  :where(.od-rail) > :where(:last-child) { margin-inline-end: var(--od-rail-pad, 16px); }
  .od-spacer { flex: none; visibility: hidden; pointer-events: none; }
  .od-touch { min-width: 44px; min-height: 44px; }
}
/* /OD-LAYOUT-PRIMITIVES v1 */
:root {
 --bg:#fdf3ec; --surface:#ffffff; --surface-warm:#fff4ea; --fg:#1a1a1f; --fg-2:#54545a; --muted:#8c8c93; --meta:var(--muted); --border:#ece5db; --border-soft:#f6f0e8;
 --accent:#ff5f5f; --accent-on:#ffffff; --accent-hover:color-mix(in oklab,var(--accent),black 8%); --accent-active:color-mix(in oklab,var(--accent),black 14%);
 --success:#48bb78; --warn:#f6ad55; --danger:#f56565;
 --font-display:"Argent CF","Source Serif Pro",Georgia,serif; --font-body:"Inter",system-ui,-apple-system,BlinkMacSystemFont,sans-serif; --font-mono:"Berkeley Mono",ui-monospace,Menlo,Consolas,monospace;
 --text-xs:12px; --text-sm:13px; --text-base:15px; --text-lg:18px; --text-xl:22px; --text-2xl:32px; --text-3xl:40px; --text-4xl:72px;
 --leading-body:1.55; --leading-tight:1.05; --tracking-display:-.03em;
 --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-12:48px;
 --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-pill:9999px;
 --elev-flat:none; --elev-ring:0 0 0 1px var(--border); --elev-raised:0 8px 32px rgba(0,0,0,.08);
 --focus-ring:0 0 0 4px color-mix(in oklab,var(--accent),transparent 80%);
 --motion-fast:200ms; --motion-base:320ms; --ease-standard:cubic-bezier(.32,.72,0,1);
 /* Page aliases shared with dashboard.html; every color stays derived from the tokens above. */
 --action:color-mix(in oklab,var(--accent),var(--fg) 38%); --focus:var(--action);
 --green-ink:color-mix(in oklab,var(--success),var(--fg) 48%); --danger-ink:color-mix(in oklab,var(--danger),var(--fg) 35%);
 --glass:color-mix(in oklab,var(--surface),transparent 18%); --line:color-mix(in oklab,var(--fg),transparent 88%);
 --page-width:1360px; --body-size:16px; --control-height:48px; --title-size:clamp(28px,3vw,40px);
 color-scheme:light;
}

:root{--hero-size:clamp(40px,5.2vw,72px);--dark-ink:var(--fg);--sunset-start:#ff7e5f;--sunset-end:#feb47b;--body-size:16px}

:root{--landing-width:1280px;--landing-gap:96px;--landing-ink:#292322;--landing-peach:#f7d6c3;--landing-sage:#426952;--landing-sage-soft:#e8eee6;--landing-line:#d6c8be;--landing-panel:#f8e9df;--landing-white:#ffffff;--landing-dark:#242427;--landing-dark-text:#f8eee8;--landing-dark-muted:#c4bab4;--landing-gold:#e9c49e}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.65 var(--font-body);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.18}button:disabled{cursor:not-allowed}svg{display:block;flex:none}a,button,summary{outline-offset:5px}:focus-visible{outline:3px solid var(--action)}[hidden]{display:none!important}.lp{max-width:var(--landing-width);width:calc(100% - 80px);margin:auto}.icon{width:20px;height:20px}.skip{position:fixed;top:8px;left:16px;z-index:100;transform:translateY(-200%);background:var(--surface);padding:12px}.skip:focus{transform:none}.eyebrow{font:600 11px/1.5 var(--font-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--action)}.muted{color:var(--fg-2)}.note{font-size:12px;line-height:1.6;color:var(--fg-2)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;padding:14px 24px;min-height:52px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--fg);font-size:14px;font-weight:650;white-space:nowrap}.btn.primary{background:var(--fg);color:var(--bg);border-color:var(--fg)}.text-link{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:14px;font-weight:650}.actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}.site-nav{background:var(--bg);border-bottom:1px solid var(--border)}.nav-inner{min-height:88px;display:flex;align-items:center;gap:32px}.brand{display:flex;gap:12px;align-items:center;font-size:18px;font-weight:750;letter-spacing:-.04em;white-space:nowrap}.brand-mark{display:grid;place-items:center;background:var(--fg);color:var(--bg);width:36px;height:36px;border-radius:10px}.nav-links{display:flex;gap:28px;margin:auto;font-size:13px;font-weight:550}.nav-actions{display:flex;align-items:center;gap:24px}.nav-actions .btn{min-height:44px;padding:10px 16px;font-size:13px}.hero{display:grid;grid-template-columns:1.12fr 1fr;gap:64px;align-items:center;padding:80px 0 64px}.hero h1{font:400 clamp(44px,4.8vw,68px)/1.08 var(--font-display);letter-spacing:-.045em;margin:24px 0}.hero h1 em{color:var(--action);font-weight:400}.hero .intro{font-size:17px;line-height:1.8;max-width:48ch;color:var(--fg-2)}.hero .actions{margin-top:32px;gap:20px}.trustline{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;font-size:11px;margin-top:20px;color:var(--fg-2)}.trustline span{display:flex;align-items:center;gap:6px}.trustline .icon{width:14px;height:14px}.preview-wrap{padding:24px 0 0 24px;background:var(--landing-peach);border-radius:16px;min-width:0}.lesson-preview{padding:28px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--elev-raised);margin-right:24px;display:grid;gap:24px}.preview-top{display:flex;justify-content:space-between;gap:12px;font-size:10px;letter-spacing:.08em;font-weight:650;color:var(--fg-2)}.preview-title{font-size:20px;line-height:1.4;letter-spacing:-.02em}.mode-row{display:flex;gap:20px;font-size:12px;border-bottom:1px solid var(--border);padding-bottom:12px}.mode-row span{display:flex;gap:6px;align-items:center}.mode-row .current{color:var(--action);font-weight:650}.word-row{display:flex;justify-content:space-between;align-items:center;gap:16px}.word{font:400 40px/1.1 var(--font-display);letter-spacing:-.035em}.phonetic{font-family:var(--font-mono);font-size:12px;color:var(--fg-2);margin-top:8px}.sound{width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--border);background:var(--surface-warm);border-radius:50%;color:var(--action)}.sound[aria-pressed=true]{background:var(--action);color:var(--surface)}.meaning{font-size:14px;color:var(--fg-2);margin-top:8px}.sentence{margin:0;background:var(--surface-warm);padding:16px;border-radius:8px;font-size:17px;line-height:1.7}.sentence mark{background:none;color:var(--action);font-weight:650}.preview-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}.preview-bottom .text-link{color:var(--action)}.preview-caption{font-size:11px;color:var(--landing-ink);padding:16px 24px 16px 0;display:flex;justify-content:space-between;gap:16px}.hero-bottom{display:flex;justify-content:space-between;gap:24px;padding:24px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);font:11px/1.6 var(--font-mono);color:var(--fg-2)}.hero-bottom span:last-child{text-align:right}.section{padding:var(--landing-gap) 0;border-bottom:1px solid var(--border)}.section-head{display:grid;grid-template-columns:1.25fr 1fr;gap:80px;align-items:end;margin-bottom:40px}.section h2,.section-title{font:400 clamp(32px,3.3vw,46px)/1.14 var(--font-display);letter-spacing:-.035em;margin-top:16px}.section-head>p{max-width:46ch;color:var(--fg-2)}.problems{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}.problem{border-top:1px solid var(--landing-line);padding-top:24px}.problem-number{font:12px var(--font-mono);color:var(--action)}.problem h3{font-size:16px;margin:20px 0 12px}.problem p{font-size:14px;line-height:1.8;color:var(--fg-2)}.solution{display:flex;align-items:center;gap:24px;margin-top:40px}.solution:before{content:'';height:1px;flex:1;background:var(--border)}.solution p{font-family:var(--font-display);font-size:24px;max-width:70%}.path-card{display:grid;grid-template-columns:1.15fr 1fr;background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:clip}.path-main{padding:40px}.path-top{display:flex;justify-content:space-between;gap:16px;align-items:center}.code-mark{display:grid;place-items:center;width:48px;height:48px;background:var(--surface-warm);border-radius:12px;color:var(--action);font:20px var(--font-mono)}.tag{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border:1px solid var(--border);border-radius:999px;font-size:11px;color:var(--fg-2)}.tag.free{color:var(--landing-sage);background:var(--landing-sage-soft);border-color:transparent}.path-main h3{font-size:30px;letter-spacing:-.035em;margin:24px 0 12px}.path-meta{display:flex;gap:20px;margin:24px 0;font-size:12px;color:var(--fg-2)}.topics{display:grid;grid-template-columns:1fr 1fr;gap:12px;list-style:none;padding:0;margin:24px 0 32px;font-size:13px}.topics li{display:flex;align-items:center;gap:8px}.topics .icon{width:14px;height:14px;color:var(--action)}.path-syllabus{padding:32px;background:var(--surface-warm);border-left:1px solid var(--border)}.path-syllabus details+details{border-top:1px solid var(--border)}.path-syllabus summary{cursor:pointer;display:flex;align-items:center;gap:16px;padding:20px 0;font-size:14px;list-style:none}.path-syllabus summary:after{content:'+';margin-left:auto;font-size:20px}.path-syllabus details[open] summary:after{content:'−'}.module-n{font:12px var(--font-mono);color:var(--action)}.path-syllabus summary .od-field{gap:4px}.path-syllabus summary small{font-size:11px;color:var(--fg-2);font-weight:400}.module-copy{font-size:13px;color:var(--fg-2);padding:0 0 20px 32px}.module-copy a{color:var(--action);display:inline-flex;min-height:44px;align-items:center;font-weight:600}.upcoming{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px}.upcoming article{display:flex;align-items:center;gap:16px;padding:20px 0}.upcoming h3{font-size:14px}.upcoming p{font-size:11px;color:var(--fg-2);margin-top:4px}.upcoming .icon{color:var(--fg-2);width:24px;height:24px}.transformation{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}.transformation h2{max-width:16ch}.outcome-list{display:grid;grid-template-columns:1fr 1fr;gap:16px;list-style:none;padding:0;margin:28px 0;font-size:14px}.outcome-list li{display:flex;gap:8px;align-items:start}.outcome-list .icon{width:16px;height:16px;margin-top:4px;color:var(--action)}.before-after{padding:32px;background:var(--surface);border:1px solid var(--border);border-radius:16px}.before{padding-bottom:20px}.sample-label{font:11px var(--font-mono);letter-spacing:.08em;color:var(--fg-2);text-transform:uppercase}.before p{font-size:20px;color:var(--fg-2);margin-top:12px}.change-arrow{color:var(--action);padding:12px 0}.after{background:var(--surface-warm);padding:24px;border-radius:12px}.after p{font:400 27px/1.5 var(--font-display);margin-top:12px}.before-after>.note{margin-top:16px}.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin:40px 0}.flow article{border-top:1px solid var(--border);padding-top:20px}.flow-label{display:flex;align-items:center;justify-content:space-between;font:12px var(--font-mono);color:var(--action)}.flow h3{font-size:20px;margin:20px 0 12px}.flow p{font-size:14px;color:var(--fg-2)}.wide-note{max-width:70ch;color:var(--fg-2)}.experience{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.experience-copy h2{margin-bottom:24px}.experience-copy p{color:var(--fg-2);margin-bottom:24px}.experience-points{display:grid;gap:12px;font-size:14px}.experience-points span{display:flex;align-items:center;gap:12px}.experience-points .icon{color:var(--action)}.journey{background:var(--landing-panel);padding:32px;border-radius:16px}.journey-card{background:var(--surface);padding:24px;border-radius:12px;box-shadow:var(--elev-raised);display:grid;gap:20px}.journey-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.journey h3{font-size:20px;margin-top:8px}.progress-line{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;font:12px var(--font-mono)}.progress-line progress{width:100%;height:6px;border:0;accent-color:var(--action);border-radius:8px;overflow:clip}.progress-line progress::-webkit-progress-bar{background:var(--border)}.progress-line progress::-webkit-progress-value{background:var(--action)}.continue{padding:16px;background:var(--surface-warm);border-radius:8px;display:flex;justify-content:space-between;align-items:center;gap:16px}.continue strong{font-size:14px;line-height:1.5}.words{border-top:1px solid var(--border);padding-top:20px}.words strong{font-size:13px}.words p{font-size:12px;color:var(--fg-2);line-height:1.8;margin-top:8px}.journey>.note{margin-top:16px}.personalization{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:40px;align-items:start}.goal-options{border:0;padding:0;margin:0}.goal-options legend{font-size:18px;font-weight:600;margin-bottom:20px}.goal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.goal{display:flex;align-items:center;gap:8px;min-height:52px;padding:12px 16px;border:1px solid var(--border);background:var(--surface);color:var(--fg-2);border-radius:8px;text-align:left;font-size:13px}.goal .icon{width:16px;height:16px}.goal[aria-pressed=true]{background:var(--surface-warm);border-color:var(--action);color:var(--action)}.recommendation{border-left:1px solid var(--border);padding-left:40px}.recommendation h3{font-size:20px;margin:12px 0}.recommendation ol{padding:0;list-style:none;counter-reset:goals;margin:20px 0}.recommendation li{counter-increment:goals;display:flex;gap:16px;padding:12px 0;border-bottom:1px solid var(--border);font-size:14px}.recommendation li:before{content:'0' counter(goals);color:var(--action);font:12px var(--font-mono);padding-top:4px}.pricing-head{text-align:center;max-width:720px;margin:0 auto 40px}.pricing-head p{margin-top:20px;color:var(--fg-2)}.plans{max-width:960px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:24px}.plan{padding:32px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}.plan.pro{background:var(--surface-warm)}.plan-name{font-size:20px}.plan-description{font-size:14px;color:var(--fg-2);margin-top:8px}.price{font:400 44px/1.2 var(--font-display);margin:24px 0 8px;letter-spacing:-.035em}.plan ul{list-style:none;padding:24px 0;margin:24px 0 0;border-top:1px solid var(--border);display:grid;gap:12px;font-size:14px}.plan li{display:flex;gap:12px;align-items:start}.plan li .icon{color:var(--action);width:16px;height:16px;margin-top:4px}.plan .btn{width:100%;margin-top:12px}.planned{margin:16px 0;padding:16px;border-radius:8px;border:1px dashed var(--landing-line);font-size:12px;color:var(--fg-2)}.principles{display:grid;grid-template-columns:1.1fr 1.5fr;gap:64px}.principles-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}.principles-grid h3{font-size:15px;margin-bottom:12px}.principles-grid p{font-size:14px;color:var(--fg-2)}.closing{background:var(--landing-dark);color:var(--landing-dark-text);padding:80px 0;margin-top:0}.closing-inner{display:grid;grid-template-columns:1.4fr 1fr;align-items:center;gap:64px}.closing h2{font:400 clamp(36px,4vw,52px)/1.15 var(--font-display);letter-spacing:-.035em}.closing h2 em{color:var(--landing-gold);font-weight:400}.closing p{color:var(--landing-dark-muted);margin-bottom:24px}.closing .btn{background:var(--landing-dark-text);color:var(--landing-dark);border:0}.closing .text-link{color:var(--landing-dark-text);margin-top:12px}.footer{padding:32px 0}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}.footer nav{display:flex;gap:24px;font-size:12px}.footer .brand{font-size:16px}.footer .note{width:100%;border-top:1px solid var(--border);padding-top:20px;font-size:11px}.audio-feedback{font-size:11px;color:var(--fg-2);min-height:18px}.audio-feedback:empty{display:none}
html[data-theme=dark]{--landing-peach:#614338;--landing-panel:#322a29;--landing-line:#514744;--landing-sage:#a8d7b8;--landing-sage-soft:#293b30;--landing-ink:#fae6da}html[data-theme=dark] .btn.primary{background:var(--fg);color:var(--bg)}
@media(hover:hover){.text-link:hover,.nav-links a:hover,.footer a:hover{text-decoration:underline;text-underline-offset:5px}.btn:hover{box-shadow:var(--elev-ring);transform:translateY(-1px)}.goal:hover,.sound:hover{border-color:var(--action)}summary:hover{color:var(--action)}}
@media(min-width:1440px){.hero{padding-top:96px;padding-bottom:80px}}@media(max-width:1100px){.hero{gap:32px}.hero .actions{gap:12px}.hero .btn{padding:12px 16px}.section-head{gap:40px}.nav-links{gap:16px}.nav-actions{gap:16px}.path-main,.path-syllabus{padding:24px}.experience{gap:40px}.hero h1{font-size:52px}.hero .text-link{font-size:13px}}
@media(max-width:1023px){.lp{width:calc(100% - 48px)}.nav-links{display:none}.nav-actions{margin-left:auto}.hero{grid-template-columns:1fr 1fr;padding:56px 0}.hero h1{font-size:44px}.hero .intro{font-size:16px}.lesson-preview{padding:20px;margin-right:16px}.preview-wrap{padding:16px 0 0 16px}.preview-bottom{align-items:start;flex-direction:column;gap:0}.preview-top{font-size:9px}.preview-title{font-size:18px}.problems{grid-template-columns:1fr 1fr}.section{padding:64px 0}.transformation{gap:32px}.outcome-list{grid-template-columns:1fr}.experience{gap:32px}.journey{padding:20px}.personalization{gap:32px}.recommendation{padding-left:24px}.principles{gap:40px}.closing-inner{gap:40px}}
@media(max-width:767px){.lp{width:calc(100% - 32px)}.nav-inner{min-height:76px;gap:12px}.brand{font-size:16px;gap:8px}.brand-mark{width:32px;height:32px}.nav-actions .btn{display:none}.nav-actions .text-link{font-size:12px}.hero{grid-template-columns:1fr;gap:40px;padding:40px 0}.hero h1{font-size:clamp(42px,9vw,60px);max-width:15ch}.hero .intro{max-width:55ch}.hero .actions{gap:16px}.hero .btn{padding:14px 20px}.trustline{font-size:11px}.lesson-preview{padding:24px;margin-right:20px}.preview-wrap{padding:20px 0 0 20px}.preview-title{font-size:20px}.preview-top{font-size:10px}.preview-bottom{flex-direction:row;align-items:center}.preview-caption{font-size:10px;flex-wrap:wrap;gap:4px}.hero-bottom{font-size:10px;gap:16px;align-items:center}.hero-bottom span{max-width:50%}.section{padding:48px 0}.section-head{grid-template-columns:1fr;gap:20px;margin-bottom:32px}.section h2{font-size:36px}.problems{gap:28px 20px}.problem h3{font-size:15px}.problem p{font-size:13px}.solution{gap:16px}.solution p{font-size:22px;max-width:82%}.path-card{grid-template-columns:1fr}.path-main{padding:24px}.path-main h3{font-size:26px}.path-syllabus{border-left:0;border-top:1px solid var(--border);padding:24px}.topics{font-size:12px;gap:12px 8px}.path-meta{gap:16px;font-size:11px}.upcoming{grid-template-columns:1fr;gap:0}.upcoming article{border-bottom:1px solid var(--border)}.transformation,.experience,.personalization,.principles,.closing-inner{grid-template-columns:1fr;gap:32px}.transformation h2{max-width:19ch}.outcome-list{grid-template-columns:1fr 1fr;font-size:12px;gap:16px}.before-after{padding:24px}.after p{font-size:25px}.flow{grid-template-columns:1fr 1fr;gap:32px 24px;margin:32px 0}.recommendation{border-left:0;padding:24px 0 0;border-top:1px solid var(--border)}.plans{grid-template-columns:1fr}.plan{padding:24px}.principles-grid{gap:28px 20px}.closing{padding:48px 0}.closing h2{font-size:40px}.footer-inner{gap:20px}.footer nav{gap:20px;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* ── Section rhythm: full-bleed bands so neighbouring sections read as distinct ── */
:root{--section-y:128px;--section-y-compact:88px}
.section{padding:var(--section-y) 0;border-bottom:0}
.section.compact{padding:var(--section-y-compact) 0}
.band{background:var(--band);box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax)}
.band-white{--band:var(--surface)}.band-sage{--band:var(--landing-sage-soft)}.band-panel{--band:var(--landing-panel)}
.hero-bottom{border-bottom:0}
.section-head{margin-bottom:56px}
.problems{gap:32px}.problem{border-top-color:var(--border)}
.flow{gap:20px;margin:48px 0 40px}.flow article{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px}
.before-after{box-shadow:var(--elev-raised);border-color:transparent}
.goal{background:var(--surface)}.recommendation{border-left-color:var(--landing-line)}

/* ── Hero role chips ── */
.hero-roles{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:32px;padding-top:24px;border-top:1px solid var(--border)}
.role-chips{display:flex;flex-wrap:wrap;gap:8px}
.role-chip{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface);font-size:13px;font-weight:600;transition:border-color var(--motion-fast) var(--ease-standard)}
.role-chip.more{background:transparent;color:var(--fg-2)}

/* ── Path switcher ── */
.paths-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:32px;align-items:start}
.path-tabs{display:grid;gap:4px;position:sticky;top:24px}
.path-tab{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 12px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--fg-2);text-align:left;transition:background-color var(--motion-fast) var(--ease-standard),border-color var(--motion-fast) var(--ease-standard)}
.path-tab strong{font-size:14px;color:var(--fg)}.path-tab small{font-size:12px}
.path-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--surface);border:1px solid var(--border);color:var(--fg-2)}
.path-tab[aria-selected=true]{background:var(--surface);border-color:var(--border);box-shadow:var(--elev-raised)}
.path-tab[aria-selected=true] .path-ico{background:var(--fg);border-color:var(--fg);color:var(--bg)}
#path-panel{min-width:0;border-radius:16px}
.path-card{box-shadow:var(--elev-raised)}
.code-mark .icon{width:24px;height:24px}
.path-main .eyebrow{margin-top:8px}
.module-list{list-style:none;padding:0;margin:16px 0 0}
.module-list li+li{border-top:1px solid var(--border)}
.module-list a,.module-list div{display:flex;align-items:center;gap:16px;min-height:64px;padding:12px 0;font-size:14px}
.module-list a{color:var(--fg)}.module-list a .icon{color:var(--action);width:18px;height:18px}
.module-list .od-field{gap:4px}.module-list small{font-size:12px;color:var(--fg-2)}

/* ── Pricing: three plans ── */
.plans{max-width:1120px;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.plan{display:flex;flex-direction:column}.plan ul{flex:1}
.plan.best{border:2px solid var(--action);box-shadow:var(--elev-raised)}
.plan-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tag.save{color:var(--action);border-color:currentColor;font-weight:650;white-space:nowrap}

@media(hover:hover){.role-chip:hover{border-color:var(--action)}.path-tab:hover{background:var(--surface)}.module-list a:hover strong{color:var(--action)}}
@media(max-width:1100px){.paths-layout{grid-template-columns:240px minmax(0,1fr)}.plans{gap:16px}.plan{padding:24px}}
@media(max-width:1023px){:root{--section-y:88px;--section-y-compact:64px}.paths-layout{grid-template-columns:1fr}.path-tabs{position:static;display:flex;overflow-x:auto;scrollbar-width:none;padding-bottom:12px;margin-inline:-24px;padding-inline:24px}.path-tabs::-webkit-scrollbar{display:none}.path-tab{flex:none}.path-tab small{display:none}.plans{grid-template-columns:1fr;max-width:560px}}
@media(max-width:767px){:root{--section-y:64px;--section-y-compact:48px}.section{padding:var(--section-y) 0}.section.compact{padding:var(--section-y-compact) 0}.section-head{margin-bottom:32px}.path-tabs{margin-inline:-16px;padding-inline:16px}.flow{grid-template-columns:1fr;gap:12px}.hero-roles{margin-top:24px}}

/* Shared semantic aliases: the lesson and outer app use the same theme. */
html[data-theme="dark"]:root{
 color-scheme:dark;--bg:#17171c;--surface:#222229;--surface-warm:#2b2528;--surface-subtle:#2b2528;--surface-raised:#303038;
 --fg:#fafafa;--text:#fafafa;--fg-2:#c6c6cd;--text-2:#c6c6cd;--muted:#b2adb8;--meta:var(--muted);
 --border:#45454f;--border-soft:#37373f;--border-strong:#696975;--accent:#ff9292;--accent-2:#ffa783;--accent-on:#17171c;
 --accent-soft:#462c32;--action:#ff9292;--focus:#ff9292;--success:#8cdda9;--danger:#ffaaaa;--warn:#ffd197;
 --green-ink:#8cdda9;--danger-ink:#ffaaaa;--success-soft:#20392a;--danger-soft:#462b32;
 --vocab-ink:#80dcff;--reading-ink:#cbb2ff;--listening-ink:#82e9c6;
 --glass:color-mix(in oklab,var(--surface),transparent 12%);--line:var(--border);
 --shadow:0 12px 32px rgba(0,0,0,.18);--elev-raised:0 8px 32px rgba(0,0,0,.18);
}
html[data-theme="dark"] body{background-color:var(--bg);color:var(--fg)}
html[data-theme="dark"] .btn-primary,html[data-theme="dark"] .primary{color:var(--bg)}
.daily-reminder{position:fixed;bottom:24px;right:24px;z-index:100;display:flex;flex-wrap:wrap;align-items:center;gap:16px;max-width:min(520px,calc(100vw - 32px));padding:20px;background:var(--surface);color:var(--fg,var(--text));border:1px solid var(--border);border-radius:16px;box-shadow:var(--elev-raised);font:16px/1.5 var(--font-body,system-ui)}
.daily-reminder strong,.daily-reminder p{display:block;margin:0}.daily-reminder p{font-size:14px;color:var(--fg-2,var(--text-2))}.daily-reminder a{color:var(--action,var(--accent));font-weight:650}.daily-reminder button{min-width:44px;min-height:44px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:inherit;font-size:24px;cursor:pointer}
.daily-reminder :focus-visible{outline:3px solid var(--focus);outline-offset:4px}

/* Syllabus scrolls instead of stretching the card: desktop height follows the left column, mobile shows ~4 modules. */
.path-syllabus{scrollbar-width:thin;overscroll-behavior:contain}
@media(min-width:768px){.path-syllabus{contain:size;overflow-y:auto}}
@media(max-width:767px){.path-syllabus .module-list{max-height:280px;overflow-y:auto;overscroll-behavior:contain}}