:root{--bg: #f4efe7;--paper: rgba(255, 251, 245, .82);--paper-strong: #fffaf2;--line: rgba(56, 42, 24, .12);--ink: #1c160f;--muted: #675847;--brand: #173a63;--brand-soft: #dde8f7;--accent: #d96c2f;--accent-soft: #fde6d8;--success: #2d6c4a;--shadow-lg: 0 26px 80px rgba(36, 23, 7, .12);--shadow-sm: 0 10px 30px rgba(36, 23, 7, .08);--radius-xl: 30px;--radius-lg: 22px;--radius-md: 16px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:radial-gradient(circle at top left,rgba(232,195,145,.55),transparent 24%),radial-gradient(circle at 88% 12%,rgba(126,172,223,.28),transparent 20%),linear-gradient(180deg,#fcf8f2,#f5eee5 52%,#efe5d8);color:var(--ink);font-family:Aptos,Segoe UI,sans-serif}button,input,textarea{font:inherit}a{color:inherit}#root{min-height:100vh}.shell{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:24px 0 56px}.hero,.lessonBanner{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,.8fr);gap:24px;padding:30px;border-radius:var(--radius-xl);background:linear-gradient(145deg,#102b48f5,#183a63ed 48%,#2a6295e6),#173a63;color:#fff8f0;box-shadow:var(--shadow-lg)}.lessonBanner{grid-template-columns:1fr}.hero:after,.lessonBanner:after{content:"";position:absolute;inset:auto -8% -25% auto;width:280px;height:280px;border-radius:999px;background:radial-gradient(circle,rgba(255,199,151,.35),transparent 66%);pointer-events:none}.heroCopy,.heroPanel{position:relative;z-index:1}.label,.miniLabel,.phaseTag{margin:0 0 10px;text-transform:uppercase;letter-spacing:.14em;font-size:.73rem;font-weight:700}.label,.miniLabel{color:#eadbc2}.phaseTag{color:var(--accent)}h1,h2,h3,p,ul,ol{margin-top:0}h1,h2,h3{font-family:Constantia,Georgia,serif;line-height:1.04}h1{margin-bottom:16px;font-size:clamp(2.7rem,5vw,5rem);max-width:10ch}h2{margin-bottom:10px;font-size:clamp(2rem,3vw,2.8rem)}h3{margin-bottom:8px;font-size:1.25rem}.subcopy{color:#fff8f0d1;max-width:62ch;font-size:1.03rem;line-height:1.6}.heroActions,.lessonActions,.formRow{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}button,.ghostLink{border:0;border-radius:999px;padding:14px 22px;background:var(--accent);color:#fff9f3;font-weight:700;cursor:pointer;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;box-shadow:0 16px 32px #d96c2f38}button:hover,.ghostLink:hover{transform:translateY(-2px)}.ghostLink,.ghostAction{background:transparent;color:inherit;border:1px solid rgba(255,248,240,.3);box-shadow:none}.ghostAction{color:var(--brand);border-color:#173a6333}.ghostAction.compact{width:fit-content}.heroStats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:26px}.heroStats div,.progressCard{padding:16px;border-radius:var(--radius-md);background:#fff8f01a;border:1px solid rgba(255,248,240,.14);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.heroStats strong{display:block;font-size:1.5rem}.heroStats span{display:block;margin-top:4px;color:#fff8f0b8}.checkList{padding-left:18px;margin-bottom:0;line-height:1.65}.sectionGrid,.ctaGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:20px}.panelCard{padding:24px;border-radius:var(--radius-lg);background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-sm);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.sectionHeader{display:flex;justify-content:space-between;gap:16px;align-items:end;margin-bottom:18px}.phaseGrid,.pillarGrid,.roadmapGrid,.offerGrid,.lessonGrid,.vocabGrid{display:grid;gap:16px}.phaseGrid,.pillarGrid{grid-template-columns:repeat(4,minmax(0,1fr))}.roadmapGrid,.offerGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.lessonGrid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:20px}.vocabGrid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.phaseCard,.pillarCard,.roadmapCard,.offerCard,.vocabCard,.quizCard,.responseCard,.tipBox,.scoreBox{border-radius:var(--radius-md);background:var(--paper-strong);border:1px solid rgba(56,42,24,.09);padding:18px}.offerCard.featured{background:linear-gradient(180deg,#fff7ef,#fdeadd);border-color:#d96c2f3d}.price{margin:14px 0;font-size:2rem;font-weight:800;color:var(--brand)}.roadmapCard span,.statusText,.pronunciation,.exampleText{color:var(--muted)}.tipBox,.scoreBox{margin-top:16px}.answerBox,input,textarea{width:100%;border-radius:16px;border:1px solid rgba(56,42,24,.12);background:#fffdfa;padding:14px 16px;color:var(--ink)}.answerBox{min-height:128px;resize:vertical}.formStack{display:grid;gap:10px}.choiceStack{display:grid;gap:8px}.choiceRow{display:flex;gap:10px;align-items:center;color:var(--muted)}.quizStack{display:grid;gap:12px}.roleplayList{padding-left:18px;margin-bottom:0;color:var(--muted);line-height:1.75}.statusText{margin-top:12px}@media (max-width: 980px){.hero,.sectionGrid,.ctaGrid,.lessonGrid,.phaseGrid,.pillarGrid,.roadmapGrid,.offerGrid,.heroStats{grid-template-columns:1fr}}@media (max-width: 640px){.shell{width:min(100% - 20px,1180px);padding-top:10px}.hero,.lessonBanner,.panelCard{padding:20px;border-radius:22px}h1{font-size:2.45rem}.heroActions,.lessonActions,.formRow{flex-direction:column}button,.ghostLink,.ghostAction{width:100%;text-align:center}}
