:root { color-scheme: light; --blue:#456b4b; --navy:#294435; --ink:#334337; --muted:#697363; --line:#c9cbb0; --pink:#f3e4d9; --yellow:#f2e7c5; --sky:#e0e7d8; --green:#476b4b; --red:#a34f40; --paper:#f7f3e5; --terracotta:#ae664c; --gold:#ad883d; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background-color:#efeddd; background-image:url("../../assets/arts-and-crafts-botanical.svg"),radial-gradient(ellipse at 16% 0%,#f9f6e9 0,transparent 47%); background-size:180px 180px,100% 100%; color:var(--ink); }
button,input { font:inherit; }
a { color:inherit; }
.skip-link { position:fixed; top:8px; left:8px; z-index:20; transform:translateY(-160%); padding:10px 14px; border-radius:10px; background:#fff; color:var(--navy); }
.skip-link:focus { transform:none; }
.site-header { display:flex; align-items:center; justify-content:space-between; max-width:1180px; margin:auto; padding:20px 24px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--navy); }
.brand span { display:grid; width:42px; height:42px; place-items:center; border-radius:13px; background:var(--blue); color:#fff; font-weight:900; }
.site-header nav { display:flex; gap:24px; }
.site-header nav a { color:#496276; font-weight:750; text-decoration:none; }
main, footer { max-width:1180px; margin:auto; padding-inline:24px; }
.hero { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr); gap:28px; align-items:stretch; padding:38px 0 72px; }
.hero-copy,.hero-card { border:1px solid var(--line); border-radius:30px; }
.hero-copy { padding:clamp(34px,6vw,70px); background:linear-gradient(145deg,#f0f9ff,#fff 58%,#fff5c8); }
.eyebrow { margin:0 0 14px; color:var(--blue); font-size:.78rem; font-weight:900; letter-spacing:.11em; text-transform:uppercase; }
h1,h2,h3,p { overflow-wrap:anywhere; }
h1 { max-width:780px; margin:0; color:var(--navy); font-size:clamp(2.55rem,6vw,5rem); line-height:.97; letter-spacing:-.055em; }
.lead { max-width:730px; margin:24px 0 0; color:#4f667b; font-size:clamp(1.06rem,2vw,1.28rem); line-height:1.68; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.button { display:inline-flex; min-height:48px; align-items:center; justify-content:center; padding:12px 20px; border:2px solid transparent; border-radius:14px; font-weight:850; text-align:center; text-decoration:none; cursor:pointer; }
.button:disabled { cursor:not-allowed; opacity:.55; }
.button.primary { background:linear-gradient(145deg,#0b86e0,#0565b8); color:#fff; box-shadow:0 12px 26px rgba(9,111,196,.22); }
.button.secondary { border-color:#b8d8ef; background:#fff; color:var(--navy); }
.button.ghost { border-color:#dce7ef; background:transparent; color:#536b7e; }
.button.full { width:100%; }
.hero-facts { display:flex; flex-wrap:wrap; gap:9px; margin:24px 0 0; padding:0; list-style:none; }
.hero-facts li { padding:8px 11px; border:1px solid #d9e8f3; border-radius:999px; background:rgba(255,255,255,.76); color:#52697c; font-size:.83rem; font-weight:750; }
.hero-card { display:flex; width:100%; max-width:300px; align-self:center; flex-direction:column; justify-content:center; gap:5px; padding:20px 22px; border-radius:24px; background:linear-gradient(155deg,#0c3558,#0d6ead); color:#fff; text-align:center; }
.hero-number { color:#9cddff; font-size:clamp(3rem,6vw,4rem); font-weight:950; line-height:.95; }
.hero-card>p { margin:0; color:#dcedf7; font-size:1rem; line-height:1.4; }
.hero-card div { padding:14px 16px; border:1px solid rgba(255,255,255,.18); border-radius:15px; background:rgba(255,255,255,.08); }
.hero-card strong,.hero-card span { display:block; }
.hero-card div span { color:#cce3f2; font-size:.86rem; }
.trainer,.program,.access { scroll-margin-top:20px; }
.trainer { padding:74px 0; }
.section-heading { max-width:800px; margin-bottom:28px; }
.section-heading h2,.access h2 { margin:0; color:var(--navy); font-size:clamp(2rem,4.5vw,3.55rem); line-height:1.05; letter-spacing:-.04em; }
.section-heading>p:last-child { color:var(--muted); line-height:1.6; }
.day-strip { display:grid; grid-template-columns:repeat(14,minmax(46px,1fr)); gap:7px; margin-bottom:16px; overflow-x:auto; padding:2px 0 8px; }
.day-button { min-width:48px; padding:10px 7px; border:1px solid var(--line); border-radius:12px; background:#fff; color:#52697c; font-weight:850; cursor:pointer; }
.day-button.is-active { border-color:var(--blue); background:var(--blue); color:#fff; }
.day-button.is-locked { background:#f1f4f6; color:#9ba8b2; }
.snail-roadmap { display:grid; grid-template-columns:minmax(340px,.62fr) minmax(260px,.38fr); align-items:center; gap:30px; margin:10px 0 24px; padding:clamp(22px,4vw,40px); overflow:hidden; border:1px solid #d9e8f3; border-radius:28px; background:linear-gradient(145deg,#f4fbff,#fff 54%,#fff9d9); }
.snail-visual { position:relative; width:min(100%,570px); aspect-ratio:1.08; margin:auto; }
.snail-shell { position:absolute; top:0; left:4%; width:84%; aspect-ratio:1; overflow:hidden; border:7px solid #a66c49; border-radius:49% 51% 48% 52%; background:radial-gradient(ellipse at 37% 28%,#f4d8a1 0,#e9bd7d 24%,#d69a61 55%,#b97950 78%,#986244 100%); box-shadow:inset 0 0 0 3px rgba(255,246,220,.55),inset -16px -18px 28px rgba(91,53,36,.18),0 18px 34px rgba(105,75,48,.17); }
.shell-texture { position:absolute; inset:2%; z-index:0; width:96%; height:96%; overflow:visible; }
.shell-rim { fill:none; stroke:rgba(255,239,205,.7); stroke-width:1.4; }
.shell-spiral { fill:none; stroke:rgba(120,72,48,.58); stroke-width:2.4; stroke-linecap:round; }
.shell-rib { fill:none; stroke:rgba(255,239,205,.52); stroke-width:1.25; stroke-linecap:round; }
.spiral-route { position:absolute; inset:6%; width:88%; height:88%; overflow:visible; }
.spiral-route path { fill:none; stroke:rgba(128,73,43,.3); stroke-width:2.7; stroke-linecap:round; stroke-dasharray:1.5 3.2; }
.task-spiral { position:absolute; inset:0; }
.spiral-node { position:absolute; z-index:3; display:grid; width:42px; height:42px; place-items:center; transform:translate(-50%,-50%); border:3px solid rgba(255,255,255,.92); border-radius:50%; color:#fff; font-size:.72rem; font-weight:950; cursor:pointer; box-shadow:0 7px 0 rgba(80,83,86,.18),0 9px 17px rgba(58,72,82,.18); transition:transform .18s ease,box-shadow .18s ease; }
.spiral-node:hover,.spiral-node:focus-visible { z-index:5; transform:translate(-50%,-57%) scale(1.09); outline:3px solid rgba(9,111,196,.26); outline-offset:3px; }
.spiral-node.is-phrase { background:#138bd2; }
.spiral-node.is-dialogue { background:#d85e9d; }
.spiral-node.is-practice { background:#7866c8; }
.spiral-node.is-completed { background:#2aa66f; }
.spiral-node.is-active { width:49px; height:49px; border-width:5px; box-shadow:0 7px 0 #075ca1,0 0 0 6px rgba(255,255,255,.75),0 11px 25px rgba(10,72,117,.3); }
.shell-center { position:absolute; z-index:2; left:50%; top:50%; display:grid; width:62px; height:62px; place-items:center; transform:translate(-50%,-50%); border:5px solid rgba(255,255,255,.78); border-radius:50%; background:#ffd743; color:#bd7600; font-size:1.8rem; box-shadow:0 9px 0 rgba(185,115,18,.25); }
.roadmap-copy h3 { margin:0; color:var(--navy); font-size:clamp(1.8rem,3vw,2.7rem); line-height:1.05; }
.roadmap-copy>p:not(.eyebrow) { color:#5a7184; line-height:1.62; }
.roadmap-progress { margin:20px 0 16px; padding:13px 15px; border:1px solid #cfe1ed; border-radius:14px; background:#fff; color:#26526f; font-weight:850; }
.roadmap-legend { display:flex; flex-wrap:wrap; gap:12px; color:#657b8c; font-size:.78rem; font-weight:750; }
.roadmap-legend span { display:flex; align-items:center; gap:6px; }
.roadmap-legend i { width:11px; height:11px; border-radius:50%; }
.phrase-dot { background:#138bd2; }.dialogue-dot { background:#d85e9d; }.practice-dot { background:#7866c8; }
.game-shell { display:grid; grid-template-columns:minmax(245px,.35fr) minmax(0,.65fr); overflow:hidden; border:1px solid var(--line); border-radius:28px; background:#fff; box-shadow:0 22px 55px rgba(31,75,109,.09); }
.lesson-card { padding:34px; background:linear-gradient(160deg,var(--sky),#f9fdff 56%,var(--yellow)); }
.lesson-card>span { color:var(--blue); font-weight:900; }
.lesson-card h3 { margin:12px 0; color:var(--navy); font-size:1.7rem; line-height:1.12; }
.lesson-card>p { color:#587085; line-height:1.55; }
.story-card { margin-top:18px; padding:15px 16px; border:1px solid rgba(242,89,131,.22); border-radius:16px; background:rgba(255,240,246,.78); }
.story-card strong { display:block; color:#b83a63; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; }
.story-card p { margin:7px 0 0; color:#5c5362; font-size:.88rem; line-height:1.5; }
.lesson-theory { margin-top:22px; padding:18px; border:1px solid rgba(9,111,196,.16); border-radius:17px; background:rgba(255,255,255,.7); }
.lesson-theory>strong { display:block; color:var(--navy); font-size:.84rem; letter-spacing:.04em; text-transform:uppercase; }
.lesson-theory p { margin:8px 0 12px; color:#4e687c; font-size:.9rem; line-height:1.5; }
.lesson-theory ul { display:grid; gap:6px; margin:0; padding-left:19px; color:#164b73; font-size:.88rem; font-weight:750; }
.lesson-theory ul>.lesson-conjugation-example { list-style:none; margin-left:-19px; }
.lesson-conjugation { padding:14px; border:1px solid #c8c8aa; border-radius:14px; background:rgba(255,253,242,.8); }
.lesson-conjugation>strong { display:block; margin-bottom:8px; color:#294435; }
.lesson-conjugation table { width:100%; border-collapse:collapse; color:#294435; font-size:.94rem; }
.lesson-conjugation td { width:50%; padding:8px 6px; border-bottom:1px solid rgba(90,100,74,.2); }
.lesson-conjugation td+td { border-left:1px solid rgba(90,100,74,.2); padding-left:12px; }
.lesson-conjugation p { margin:8px 0 0; color:#576453; font-size:.8rem; line-height:1.5; }
.conjugation-ending { color:#c94f3c; }
.lesson-resource-link { display:inline-flex; align-items:center; margin-top:16px; padding:11px 15px; border:1px solid #8f966f; border-radius:13px; background:#344a38; color:#f3e8c8; font-weight:800; line-height:1.4; text-decoration:none; transition:transform .18s ease, box-shadow .18s ease; }
.lesson-resource-link:hover { transform:translateY(-2px); box-shadow:0 5px 0 rgba(35,50,38,.22); }
.lesson-resource-link:focus-visible { outline:3px solid #d3b96e; outline-offset:3px; }
.lesson-resource-link[hidden] { display:none; }
.mode-switch { display:grid; gap:8px; margin-top:28px; }
.mode-button { padding:12px 14px; border:1px solid #c6ddec; border-radius:12px; background:rgba(255,255,255,.68); color:#365a75; font-weight:800; text-align:left; cursor:pointer; }
.mode-button.is-active { border-color:var(--blue); background:#fff; color:var(--blue); box-shadow:0 8px 20px rgba(9,111,196,.12); }
.lesson-progress { display:flex; justify-content:space-between; gap:8px; margin-top:28px; color:#61788b; font-size:.78rem; font-weight:750; }
.exercise-card { min-height:620px; padding:clamp(26px,5vw,52px); }
.character-stage { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 18px; }
.character-chip { display:grid; grid-template-columns:44px 1fr; align-items:center; gap:10px; min-width:180px; padding:9px 13px 9px 9px; border:1px solid #d6e5ef; border-radius:16px; background:#f9fcff; }
.character-avatar { display:grid; width:44px; height:44px; place-items:center; border-radius:14px; background:var(--character-color,#dff2ff); color:#173f5d; font-weight:950; box-shadow:inset 0 0 0 1px rgba(16,55,90,.08); }
.character-chip strong,.character-chip small { display:block; }
.character-chip strong { color:var(--navy); font-size:.9rem; }
.character-chip small { margin-top:2px; color:#6a7f90; font-size:.73rem; }
.audio-row { display:flex; flex-wrap:wrap; gap:10px; }
.listen-button,.text-button { min-height:46px; padding:10px 16px; border-radius:13px; font-weight:850; cursor:pointer; }
.listen-button { border:0; background:#0a75c9; color:#fff; }
.text-button { border:1px solid #cddde9; background:#fff; color:#456177; }
.audio-help { margin:20px 0 10px; color:#5e7386; }
.transcript { white-space:pre-line; padding:12px 15px; border-left:4px solid #f25983; background:var(--pink); color:#304c63; font-weight:750; }
.answer-zone { display:flex; min-height:86px; flex-wrap:wrap; align-content:center; gap:8px; margin:26px 0 16px; padding:14px; border:2px dashed #b7d2e5; border-radius:16px; background:#f8fcff; }
.answer-zone>span { align-self:center; color:#8596a4; }
.word-bank { display:flex; min-height:70px; flex-wrap:wrap; align-content:flex-start; gap:8px; }
.word-chip { padding:10px 13px; border:1px solid #bdd8eb; border-radius:11px; background:#fff; color:#1f4c6f; font-weight:800; cursor:pointer; box-shadow:0 5px 12px rgba(47,89,121,.08); }
.word-chip { cursor:grab; user-select:none; touch-action:manipulation; }
.word-chip:active { cursor:grabbing; }
.word-chip.is-dragging { opacity:.4; }
.word-chip.is-drop-target { outline:3px solid #d47d5c; outline-offset:2px; transform:translateY(-2px); }
.answer-zone.is-drop-target,.word-bank.is-drop-target { outline:2px solid #d47d5c; outline-offset:3px; }
.answer-zone .word-chip { background:var(--yellow); border-color:#ead775; }
.exercise-actions { display:flex; gap:10px; margin-top:24px; }
.question { margin:28px 0 16px; color:var(--navy); font-size:1.35rem; font-weight:850; }
.options { display:grid; gap:10px; }
.task-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.task-tab { min-height:42px; padding:9px 15px; border:1px solid #c8ddea; border-radius:999px; background:#fff; color:#456177; font-weight:800; cursor:pointer; }
.task-tab.is-active { border-color:var(--blue); background:var(--sky); color:var(--blue); }
.option-button { padding:14px 16px; border:1px solid #c8ddea; border-radius:14px; background:#fff; color:#274a65; font-weight:750; text-align:left; cursor:pointer; }
.option-button:hover { border-color:var(--blue); }
.option-button.is-correct { border-color:#58b28e; background:#eaf8f2; color:#126646; }
.option-button.is-wrong { border-color:#ed9db0; background:#fff0f3; color:#9d2940; }
.feedback { min-height:28px; margin:20px 0 0; font-weight:800; }
.feedback.is-correct { color:var(--green); }
.feedback.is-wrong { color:var(--red); }
.practice-step { margin:4px 0 0; color:var(--blue); font-size:.82rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.next-practice,.next-button { margin-top:16px; padding:0; border:0; background:none; color:var(--blue); font-weight:850; cursor:pointer; }
.program { padding:76px 0; }
.program-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.program-grid article { padding:24px; border:1px solid var(--line); border-radius:20px; background:#fff; }
.program-grid strong { color:var(--blue); letter-spacing:.08em; }
.program-grid h3 { margin:22px 0 10px; color:var(--navy); }
.program-grid p { margin:0; color:var(--muted); line-height:1.55; }
.access { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr); gap:24px; margin:20px 0 80px; padding:clamp(30px,6vw,62px); border-radius:28px; background:#0c3558; color:#fff; }
.access h2 { color:#fff; }
.access .eyebrow { color:#8bd5ff; }
.access-copy ul { display:grid; gap:10px; margin:26px 0 0; padding-left:22px; color:#dcecf7; }
.price-card { padding:28px; border:1px solid rgba(255,255,255,.18); border-radius:22px; background:#fff; color:var(--ink); }
.price-card>span { color:var(--blue); font-weight:850; }
.price { margin:10px 0 18px; }
.price strong,.price small { display:block; }
.price strong { color:var(--navy); font-size:2.2rem; }
.price small,.payment-note,.form-help,.status { color:#667b8e; }
.price-card .button+.button { margin-top:9px; }
.payment-note { font-size:.82rem; line-height:1.45; }
.price-card hr { margin:22px 0; border:0; border-top:1px solid #dce6ed; }
.price-card label,.modal-card>label { display:block; margin-bottom:8px; color:var(--navy); font-weight:800; }
.inline-form { display:flex; gap:8px; }
input[type="email"] { width:100%; min-height:48px; padding:10px 13px; border:1px solid #bed1df; border-radius:12px; }
.status { min-height:20px; font-size:.85rem; }
footer { display:flex; justify-content:space-between; gap:24px; padding-block:30px 42px; border-top:1px solid var(--line); color:#667b8e; }
footer nav { display:flex; flex-wrap:wrap; gap:16px; }
.modal[hidden] { display:none; }
.modal { position:fixed; inset:0; z-index:30; display:grid; place-items:center; padding:20px; background:rgba(7,29,47,.72); }
.modal-card { position:relative; width:min(620px,100%); max-height:90vh; overflow:auto; padding:30px; border-radius:22px; background:#fff; }
.modal-card h2 { margin:0; color:var(--navy); font-size:2rem; }
.modal-close { position:absolute; top:14px; right:14px; width:38px; height:38px; border:0; border-radius:50%; background:#eff5f9; color:var(--navy); font-size:1.5rem; cursor:pointer; }
.selected-plan { padding:12px 14px; border-radius:12px; background:var(--sky); color:var(--navy); font-weight:850; }
.consents { display:grid; gap:10px; margin:18px 0; }
.consents label { display:flex; gap:8px; color:#4e6578; font-size:.9rem; line-height:1.35; }
.has-modal { overflow:hidden; }
@media (max-width:900px) { .hero,.snail-roadmap,.game-shell,.access { grid-template-columns:1fr; } .roadmap-copy { text-align:center; } .roadmap-legend { justify-content:center; } .program-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .day-strip { grid-template-columns:repeat(14,52px); } }
@media (max-width:640px) { .site-header { align-items:flex-start; } .site-header nav a:not(:first-child) { display:none; } main,footer { padding-inline:14px; } .hero { padding-top:18px; } .hero-copy,.hero-card,.snail-roadmap { border-radius:22px; } .hero-copy { padding:34px 23px; } h1 { font-size:clamp(2.35rem,13vw,3.5rem); } .snail-roadmap { padding:18px 12px 25px; } .snail-visual { width:min(100%,420px); } .spiral-node { width:34px; height:34px; border-width:2px; font-size:.62rem; box-shadow:0 5px 0 rgba(80,83,86,.18); } .spiral-node.is-active { width:41px; height:41px; border-width:4px; } .shell-center { width:48px; height:48px; font-size:1.35rem; } .hero-actions,.hero-actions .button,.exercise-actions,.exercise-actions .button { width:100%; } .exercise-actions { flex-direction:column; } .lesson-card,.exercise-card { padding:24px 20px; } .program-grid { grid-template-columns:1fr; } .access { padding:28px 20px; border-radius:22px; } .inline-form { flex-direction:column; } footer { flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* Original Arts and Crafts botanical treatment for the beginner course. */
.skip-link { background:var(--paper); color:var(--navy); }
.site-header { position:relative; }
.site-header::after { position:absolute; right:24px; bottom:8px; left:24px; height:1px; background:linear-gradient(90deg,transparent,#a8ad8c 15%,#a8ad8c 85%,transparent); content:""; }
.brand { color:var(--navy); }
.brand span { border:1px solid #6b825d; background:#496449; }
.site-header nav a { color:#50664e; }
.hero-copy { position:relative; overflow:hidden; border-color:#c3c5a8; background-color:#f8f3e4; background-image:url("../../assets/arts-and-crafts-botanical.svg"),linear-gradient(135deg,rgba(255,253,243,.95),rgba(241,236,213,.9)); background-position:right bottom,center; background-size:180px 180px,cover; }
.hero-copy::before { position:absolute; top:-30px; right:-18px; width:155px; height:155px; border:1px solid rgba(79,105,71,.2); border-radius:50%; content:""; pointer-events:none; }
.hero-copy h1,.section-heading h2,.roadmap-copy h3,.program-grid h3 { color:var(--navy); }
.eyebrow,.hero-card .hero-number { color:#876d37; }
.lead,.hero-card>p { color:#52604e; }
.hero-actions { position:relative; }
.button.primary,.listen-button { background:linear-gradient(145deg,#55744f,#355b42); box-shadow:0 9px 20px rgba(48,78,54,.2); }
.button.secondary,.button.ghost,.text-button { border-color:#bfc4a9; background:#f8f5e9; color:#3e5b43; }
.hero-facts li,.day-button,.program-grid article,.game-shell,.exercise-card,.price-card,.modal-card { border-color:#c9cbb0; background-color:#faf7eb; }
.hero-card { border-color:#385a43; background:linear-gradient(145deg,#294a39,#3d6148); }
.hero-card>p { color:#e7e5cf; }
.hero-card div { border-color:rgba(235,230,199,.22); background:rgba(238,231,199,.09); }
.hero-card div span { color:#e0dfca; }
.section-heading>p:last-child,.roadmap-copy>p:not(.eyebrow) { color:#697363; }
.day-button { color:#4e604c; }
.day-button.is-active { border-color:#355b42; background:#496b4d; color:#fffdf2; }
.day-button.is-locked { background:#e5e4d7; color:#8a8a78; }
.snail-roadmap { border-color:#b9bea0; background-color:#f4f0df; background-image:url("../../assets/arts-and-crafts-botanical.svg"),linear-gradient(145deg,rgba(246,243,226,.94),rgba(235,231,210,.93)); background-size:180px 180px,cover; box-shadow:0 18px 42px rgba(67,79,53,.08); }
.snail-shell { aspect-ratio:1.1; border-color:#82724a; border-radius:57% 45% 51% 48%; background:radial-gradient(ellipse at 48% 48%,#eee4bf 0 8%,#dbcf9d 8.5% 13%,#bda875 13.5% 14.5%,#e3d6ad 15% 32%,#caba89 32.5% 34%,#dfd1a4 34.5% 55%,#b39a68 55.5% 57%,#d4c394 57.5% 78%,#a58c61 79% 100%); box-shadow:inset 0 0 0 3px rgba(255,251,229,.64),inset -17px -18px 28px rgba(73,68,43,.16),0 18px 34px rgba(84,76,48,.18); }
.shell-rim { stroke:rgba(248,241,212,.84); }
.shell-spiral { stroke:rgba(95,73,47,.68); }
.shell-rib { stroke:rgba(255,249,222,.56); }
.shell-botanical { fill:none; stroke:#5d754f; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.2; opacity:.68; }
.spiral-route path { stroke:rgba(84,95,62,.4); stroke-width:1.55; stroke-dasharray:1 2.35; }
.spiral-node { border-color:#f8f3df; color:#fffdf2; box-shadow:0 4px 0 rgba(50,58,39,.2),0 8px 14px rgba(55,60,42,.14); font-variant-numeric:tabular-nums; }
.spiral-node.is-phrase { background:#4f7355; }
.spiral-node.is-dialogue { background:#a9634c; }
.spiral-node.is-practice { background:#a1803f; }
.spiral-node.is-completed { background:#315a42; }
.spiral-node.is-completed::after { position:absolute; top:-3px; right:-4px; display:grid; width:14px; height:14px; place-items:center; border:1px solid #fff9e9; border-radius:50%; background:#d2b866; color:#314a34; content:"✓"; font-size:8px; line-height:1; }
.spiral-node.is-active { outline:3px solid #d2b866; outline-offset:3px; box-shadow:0 4px 0 rgba(50,58,39,.18),0 0 0 7px rgba(255,249,224,.7),0 10px 20px rgba(55,60,42,.2); }
.spiral-node:focus-visible { outline:3px solid #d2b866; outline-offset:4px; }
.shell-center { border-color:rgba(250,245,221,.94); background:#e2c36e; color:#62512c; box-shadow:0 6px 0 rgba(104,83,37,.2); }
.roadmap-progress { border-color:#c6c7a8; background:#fbf8ed; color:#385540; }
.roadmap-legend { color:#646c59; }
.phrase-dot { background:#4f7355; }.dialogue-dot { background:#a9634c; }.practice-dot { background:#a1803f; }
.lesson-card { background:linear-gradient(155deg,#e4e9d9,#f7f3e4 68%,#eee5c8); }
.lesson-card>span,.practice-step { color:#4b704e; }
.lesson-card h3,.lesson-theory>strong,.character-chip strong,.question,.price strong,.price-card label,.modal-card h2,.mode-button.is-active { color:#294435; }
.lesson-card>p,.story-card p,.lesson-theory p { color:#576453; }
.story-card { border-color:rgba(157,94,67,.26); background:#f1e2d5; }
.story-card strong { color:#9e5943; }
.lesson-theory { border-color:#c8c8aa; background:rgba(255,253,242,.78); }
.lesson-theory ul { color:#3d6046; }
.mode-button { border-color:#c6c6a7; background:rgba(251,248,235,.78); color:#50644d; }
.mode-button.is-active { border-color:#617953; background:#f9f5e7; box-shadow:0 6px 16px rgba(66,89,57,.12); }
.lesson-progress,.character-chip small,.audio-help,.price small,.payment-note,.form-help,.status { color:#6d7564; }
.character-chip { border-color:#c9cbb0; background:#f8f5e9; }
.character-avatar { color:#354b39; }
.text-button { background:#faf7eb; color:#47604a; }
.transcript { border-left-color:#a9634c; background:#f2e4d9; color:#3f4b3d; }
.answer-zone { border-color:#a9b491; background:#f8f5e9; }
.answer-zone .word-chip { border-color:#d0bd83; background:#f0e6c5; }
.word-chip,.task-tab,.option-button { border-color:#c7c9ac; background:#fcf9ef; color:#405844; }
.task-tab.is-active { border-color:#637b55; background:#e4eadb; color:#355c42; }
.option-button.is-correct { border-color:#7b9a72; background:#e7eddd; color:#315a42; }
.option-button.is-wrong { border-color:#c98973; background:#f5e5dc; color:#8d4739; }
.feedback.is-correct,.next-practice,.next-button { color:#456a4b; }
.feedback.is-wrong { color:#a34f40; }
.program-grid article { background:rgba(250,247,235,.94); }
.program-grid strong { color:#55754e; }
.program-grid p { color:#697363; }
.access { border:1px solid #334f3c; background:#294a39; }
.access .eyebrow { color:#dfc57f; }
.access-copy ul { color:#e7e8d4; }
.price-card { background:#f8f4e6; color:#334337; }
.price-card>span { color:#55734c; }
.price-card .button.primary { color:#fffdf2; }
.payment-note,.form-help,.status { color:#727666; }
input[type="email"] { border-color:#c2c6a9; background:#fffdf5; color:#334337; }
footer { border-color:#b8bea0; color:#656d5d; }
.modal { background:rgba(31,51,37,.72); }
.modal-card { background:#f8f4e6; }
.modal-close { background:#e8e7d5; color:#344c37; }
.selected-plan { background:#e3e9d9; color:#314a37; }
.consents label { color:#586351; }
:focus-visible { outline-color:#a98743; }
@media (max-width:640px) { .site-header::after { right:14px; left:14px; } .spiral-node.is-completed::after { width:12px; height:12px; top:-2px; right:-3px; font-size:7px; } }

/* Botanical nocturne: deep foliage, warm paper and flower-coral accents. */
:root {
  color-scheme: dark;
  --blue:#d66d4e;
  --navy:#efe3c9;
  --ink:#e7dfcc;
  --muted:#b4b49d;
  --line:#53624c;
  --pink:#44332d;
  --yellow:#554b32;
  --sky:#28392f;
  --green:#a9bc85;
  --red:#e38a6b;
  --paper:#202722;
  --terracotta:#dc7656;
  --gold:#d4b977;
}
body {
  background-color:#171c19;
  background-image:linear-gradient(180deg,rgba(20,25,22,.88),rgba(20,25,22,.96)),url("../../assets/botanical-nocturne.svg"),radial-gradient(ellipse at 82% 9%,#354235 0,transparent 38%);
  background-size:100% 100%,440px 440px,100% 100%;
  color:var(--ink);
}
.skip-link { background:#f1e6ce; color:#25392e; }
.site-header::after { background:linear-gradient(90deg,transparent,#718062 14%,#b17655 50%,#718062 86%,transparent); }
.brand,.site-header nav a { color:#e7dfca; }
.brand span { border-color:#a4ad7e; background:#344b3a; color:#f4ead3; }
.hero-copy {
  border-color:#58634b;
  background-color:#222923;
  background-image:linear-gradient(120deg,rgba(31,38,33,.96) 12%,rgba(31,38,33,.87) 67%,rgba(31,38,33,.58)),url("../../assets/botanical-nocturne.svg");
  background-position:center,right -115px bottom -132px;
  background-size:cover,440px 440px;
}
.hero-copy::before { border-color:rgba(211,185,119,.25); }
.hero-copy h1,.section-heading h2,.roadmap-copy h3,.program-grid h3 { color:#f2e7d0; }
.eyebrow,.hero-card .hero-number { color:#dfa37b; }
.lead,.section-heading>p:last-child,.roadmap-copy>p:not(.eyebrow),.program-grid p { color:#c1bfaa; }
.button.primary,.listen-button { background:linear-gradient(140deg,#df7959,#b8523e); color:#fff5e5; box-shadow:0 9px 24px rgba(9,10,8,.28); }
.button.secondary,.button.ghost,.text-button { border-color:#687454; background:#2b342d; color:#efe3ca; }
.hero-facts li,.day-button,.program-grid article,.game-shell,.exercise-card,.price-card,.modal-card {
  border-color:#52604b;
  background-color:#242c26;
  color:#e8e0cc;
}
.hero-facts li { border-color:#58634b; background:rgba(32,40,34,.9); color:#d8d4bf; }
.hero-card { border-color:#657250; background:linear-gradient(145deg,#2a3e32,#3a5039 68%,#573d31); }
.hero-card .hero-number { color:#ecd3a3; }
.hero-card>p,.hero-card div span { color:#e3ddc8; }
.hero-card div { border-color:rgba(226,216,183,.2); background:rgba(23,28,25,.3); }
.trainer::before,.program::before { border-color:#718062; }
.day-button { color:#d9d3bf; }
.day-button.is-active { border-color:#d47b58; background:#ab5742; color:#fff4e3; }
.day-button.is-locked { border-color:#444e41; background:#202622; color:#838b77; }
.snail-roadmap {
  border-color:#60684d;
  background-color:#222a24;
  background-image:linear-gradient(110deg,rgba(29,36,31,.93),rgba(34,42,35,.88)),url("../../assets/botanical-nocturne.svg");
  background-size:cover,440px 440px;
  box-shadow:0 18px 42px rgba(0,0,0,.2);
}
.snail-shell {
  border-color:#86714e;
  background:radial-gradient(ellipse at 46% 45%,#685b3e 0 9%,#d4bc7e 9.5% 11%,#514c35 11.5% 14%,#3d4b39 14.5% 32%,#b3a16e 32.5% 34%,#354437 34.5% 55%,#c1825d 55.5% 57%,#303b33 57.5% 78%,#a8694f 79% 100%);
  box-shadow:inset 0 0 0 3px rgba(239,222,180,.26),inset -17px -18px 28px rgba(9,13,10,.32),0 18px 34px rgba(0,0,0,.25);
}
.shell-rim { stroke:rgba(235,218,175,.66); }
.shell-spiral { stroke:rgba(229,137,96,.76); }
.shell-rib { stroke:rgba(233,218,181,.38); }
.shell-botanical { stroke:#a9b481; opacity:.78; }
.spiral-route path { stroke:rgba(233,211,160,.56); }
.spiral-node { border-color:#e6dcc1; color:#fbf1dc; box-shadow:0 4px 0 rgba(8,12,9,.32),0 8px 14px rgba(8,12,9,.25); }
.spiral-node.is-phrase { background:#59724e; }
.spiral-node.is-dialogue { background:#b96048; }
.spiral-node.is-practice { background:#9a8048; }
.spiral-node.is-completed { background:#405b43; }
.spiral-node.is-active { outline-color:#e3c37c; }
.spiral-node:hover,.spiral-node:focus-visible { outline-color:#e3c37c; }
.shell-center { border-color:#e9dfc5; background:#d8bd78; color:#453b26; }
.roadmap-progress { border-color:#59664f; background:#29332b; color:#e4d7b7; }
.roadmap-legend { color:#c7c2ac; }
.snail-roadmap { position:relative; }
.roadmap-copy { padding-bottom:clamp(104px,12vw,138px); }
.lesson-card { background:linear-gradient(155deg,#2e4033,#29332b 65%,#49392f); }
.lesson-card>span,.practice-step { color:#c1ca95; }
.lesson-card h3,.lesson-theory>strong,.character-chip strong,.question,.price strong,.price-card label,.modal-card h2,.mode-button.is-active { color:#f0e5cb; }
.lesson-card>p,.story-card p,.lesson-theory p { color:#d0cbb7; }
.story-card { border-color:rgba(216,113,80,.36); background:#40312b; }
.story-card strong { color:#ed9c79; }
.lesson-theory { border-color:#5b664f; background:rgba(25,32,27,.66); }
.lesson-theory ul { color:#d7d8b5; }
.lesson-conjugation { border-color:#59664f; background:rgba(32,40,34,.88); }
.lesson-conjugation>strong,.lesson-conjugation table { color:#f0e5cb; }
.lesson-conjugation td { border-color:rgba(215,216,181,.2); }
.lesson-conjugation p { color:#d0cbb7; }
.conjugation-ending { color:#ff9274; }
.mode-button { border-color:#59654f; background:rgba(32,40,34,.84); color:#ddd8c4; }
.mode-button.is-active { border-color:#d0845c; background:#40362d; color:#f1e2c4; box-shadow:0 6px 16px rgba(0,0,0,.18); }
.lesson-progress,.character-chip small,.audio-help,.price small,.payment-note,.form-help,.status { color:#c0bea9; }
.character-chip { border-color:#55634d; background:#28332b; }
.character-avatar { color:#f0e6ce; }
.character-avatar[class*="portrait-"] { display:block; border-radius:50%; background-color:var(--character-color,#344a3a); background-image:url("../../assets/characters-botanical-portraits.png"); background-repeat:no-repeat; background-size:300% auto; box-shadow:0 0 0 2px #c8b77e,inset 0 0 0 1px rgba(18,27,20,.28); font-size:0; color:transparent; }
.character-avatar.portrait-nina { background-position:0% 0%; }
.character-avatar.portrait-marc { background-position:50% 0%; }
.character-avatar.portrait-lea { background-position:100% 0%; }
.character-avatar.portrait-hugo { background-position:0% 75%; }
.character-avatar.portrait-claire { background-position:50% 75%; }
.text-button { background:#30382f; color:#efe4ca; }
.transcript { border-left-color:#dc7656; background:#40332d; color:#f0e6d2; }
.answer-zone { border-color:#72805a; background:#202923; }
.answer-zone>span { color:#b2b39c; }
.word-chip,.task-tab,.option-button { border-color:#58684e; background:#303a31; color:#f0e7d2; }
.answer-zone .word-chip { border-color:#b49d65; background:#514933; }
.task-tab.is-active { border-color:#d07a59; background:#4a3830; color:#ffe7cf; }
.option-button:hover { border-color:#d48a65; }
.option-button.is-correct { border-color:#829663; background:#344638; color:#d8e5bf; }
.option-button.is-wrong { border-color:#bd684f; background:#49312d; color:#ffd2bd; }
.feedback.is-correct,.next-practice,.next-button { color:#c8d2a0; }
.feedback.is-wrong { color:#f09b7d; }
.program-grid article { background:rgba(37,46,39,.94); }
.program-grid strong { color:#d9bd7a; }
.access { border:1px solid #68724f; background:linear-gradient(125deg,#293d32,#24342c 58%,#49362d); }
.access .eyebrow { color:#e2c37e; }
.access-copy ul { color:#e5e0ce; }
.price-card { border-color:#857653; background:#eee3ca; color:#29372d; }
.price-card>span { color:#476148; }
.price strong,.price-card label { color:#29372d; }
.price .price strong { color:#29372d; }
.price-card .button.primary { color:#fff3df; }
.payment-note,.form-help,.status { color:#555c49; }
input[type="email"] { border-color:#9da184; background:#faf1df; color:#29372d; }
.price-card hr { border-top-color:#c4b995; }
footer { border-color:#56624b; color:#c0bea9; }
footer nav a { color:#ded3b8; }
.modal { background:rgba(9,13,10,.82); }
.modal-card { border-color:#756e4d; background:#262f28; }
.modal-card h2 { color:#f1e6cf; }
.modal-close { background:#394239; color:#f0e5cd; }
.selected-plan { background:#354638; color:#e8e0c7; }
.consents label { color:#d2cebb; }
:focus-visible { outline-color:#e1be73; }
@media (max-width:640px) {
  .hero-copy { background-position:center,right -178px bottom -130px; background-size:cover,390px 390px; }
  .snail-roadmap { background-position:center,right -150px top -130px; background-size:cover,360px 360px; }
  .spiral-node.is-active { outline-color:#e3c37c; }
}

.completion-certificate { margin:28px 0; }
.course-celebration { position:relative; isolation:isolate; display:grid; min-height:220px; max-width:980px; place-content:center; overflow:hidden; margin:0 auto 22px; padding:30px clamp(20px,5vw,56px); border:1px solid #b19a5f; border-radius:26px; background:radial-gradient(ellipse at 50% 0%,rgba(220,190,113,.2),transparent 60%),linear-gradient(145deg,#304638,#1d2b23); box-shadow:0 18px 45px rgba(0,0,0,.22); text-align:center; }
.course-celebration[hidden] { display:none !important; }
.course-celebration>*:not(.course-fireworks) { position:relative; z-index:1; }
.course-celebration .eyebrow { margin:0 0 6px; color:#e3b186; font-size:.78rem; font-weight:900; letter-spacing:.16em; }
.course-celebration h2 { margin:0; color:#f5e8c9; font:700 clamp(2rem,5vw,3.4rem)/1.1 Georgia,"Times New Roman",serif; }
.course-celebration>p:last-child { max-width:620px; margin:12px auto 0; color:#e0ddc8; line-height:1.6; }
.course-fireworks { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.course-fireworks span { position:absolute; top:12%; left:17%; width:128px; aspect-ratio:1; background:repeating-conic-gradient(from 0deg,var(--burst-color) 0 2deg,transparent 2deg 18deg); -webkit-mask:radial-gradient(circle,transparent 0 13%,#000 16% 43%,transparent 47%); mask:radial-gradient(circle,transparent 0 13%,#000 16% 43%,transparent 47%); opacity:0; animation:course-firework 2.8s ease-out infinite; }
.course-fireworks span:nth-child(2) { top:9%; left:auto; right:19%; width:158px; --burst-color:#e5c766; animation-delay:.9s; }
.course-fireworks span:nth-child(3) { top:44%; left:50%; width:104px; --burst-color:#df9978; animation-delay:1.8s; }
.course-fireworks span:first-child { --burst-color:#c8d99b; }
@keyframes course-firework { 0%,8% { transform:scale(.2) rotate(-10deg); opacity:0; } 22% { opacity:.78; } 72% { opacity:.6; } 100% { transform:scale(1.3) rotate(12deg); opacity:0; } }
.certificate-paper { position:relative; overflow:hidden; max-width:980px; margin:0 auto; padding:clamp(24px,5vw,58px); border:1px solid #9d8a59; border-radius:28px; background:radial-gradient(ellipse at 100% 0%,rgba(169,188,133,.12),transparent 48%),linear-gradient(145deg,#26352b,#1c2520); box-shadow:0 18px 45px rgba(0,0,0,.28),inset 0 0 0 8px rgba(212,185,119,.06); text-align:center; }
.certificate-paper::before,.certificate-paper::after { position:absolute; width:170px; height:170px; border:1px solid rgba(169,188,133,.22); border-radius:100% 0; content:""; pointer-events:none; }
.certificate-paper::before { top:-92px; left:-45px; transform:rotate(26deg); }
.certificate-paper::after { right:-45px; bottom:-92px; transform:rotate(206deg); }
.certificate-paper .eyebrow { color:#dfaa7f; font-size:.82rem; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.certificate-paper h2 { position:relative; margin:10px auto 16px; color:#f2e7d0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(1.7rem,4vw,3.1rem); }
.certificate-intro,.certificate-achievement,.certificate-date { color:#dedbc8; line-height:1.65; }
.certificate-name-label { display:block; margin:26px 0 8px; color:#d7c98f; font-size:.9rem; font-weight:750; }
.certificate-name-input { width:min(100%,440px); padding:13px 16px; border:1px solid #78815c; border-radius:12px; background:#19221d; color:#f3ead6; text-align:center; }
.certificate-name-output { min-height:1.8em; margin:12px auto; color:#f3e6c6; font-family:Georgia,"Times New Roman",serif; font-size:clamp(1.5rem,3.8vw,2.25rem); font-weight:700; }
.certificate-achievement { margin:24px 0 8px; color:#c6d6a6; font-weight:800; }
.certificate-date { margin:0; }
.certificate-note { max-width:650px; margin:24px auto; color:#aaaE9a; font-size:.8rem; line-height:1.55; }
.certificate-print-button { position:relative; z-index:1; margin-top:6px; }
[hidden].completion-certificate { display:none !important; }
@media print {
  @page { size:A4 landscape; margin:12mm; }
  body * { visibility:hidden !important; }
  #completionCertificate,#completionCertificate * { visibility:visible !important; }
  #completionCertificate { position:absolute; inset:0; display:block !important; margin:0; }
  .course-celebration { display:none !important; }
  .certificate-paper { max-width:none; min-height:180mm; display:flex; flex-direction:column; justify-content:center; border:2px solid #9d8a59; box-shadow:none; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  .certificate-name-label,.certificate-name-input,.certificate-print-button { display:none !important; }
  .certificate-name-output { margin:24px auto; }
}
@media (prefers-reduced-motion:reduce) { .course-fireworks span { animation:none; opacity:.35; transform:scale(.9); } }

/* One route only: lesson stops follow the same continuous shell spiral. */
.snail-shell {
  z-index:1;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.snail-shell-art {
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 15px 22px rgba(8,15,11,.22));
}
.spiral-route { inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
.spiral-route path {
  fill:none;
  stroke:#d5b875;
  stroke-width:1.35;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:none;
  filter:drop-shadow(0 0 1.4px rgba(15,22,17,.95));
}
.task-spiral { z-index:2; }
.spiral-node { width:38px; height:38px; }
.spiral-node.is-active { width:46px; height:46px; }
.shell-center {
  z-index:3;
  width:22px;
  height:22px;
  border:0;
  background:transparent;
  color:#e0c47a;
  font-size:1.05rem;
  box-shadow:none;
}
@media (max-width:640px) {
  .spiral-node { width:30px; height:30px; font-size:.58rem; }
  .spiral-node.is-active { width:36px; height:36px; }
}

/* Give the shell and the natural snail artwork one connected, generous footprint. */
.snail-visual {
  width:min(100%,920px);
  aspect-ratio:1.45;
  margin-bottom:clamp(24px,5vw,48px);
}
.snail-shell {
  top:0;
  left:14%;
  width:65%;
  aspect-ratio:1;
}
.snail-shell { overflow:visible; }
.snail-body-art {
  position:absolute;
  z-index:0;
  left:-18.5%;
  bottom:-1%;
  width:140%;
  height:auto;
  overflow:visible;
  filter:drop-shadow(0 7px 8px rgba(0,0,0,.24));
}
@media (max-width:900px) {
  .snail-roadmap { grid-template-columns:minmax(0,1fr); }
  .snail-visual { width:min(100%,860px); aspect-ratio:1.38; }
  .snail-shell { left:14%; width:67%; }
  .snail-body-art { left:-15%; bottom:-1%; width:130%; }
  .roadmap-copy { padding-bottom:126px; }
}
@media (max-width:640px) {
  .snail-visual { width:min(100%,520px); aspect-ratio:1.14; margin-bottom:28px; }
  .snail-shell { left:8%; width:76%; }
  .snail-body-art { left:-6%; bottom:-1%; width:112%; }
  .roadmap-copy { padding-bottom:112px; }
}

/* Phonetics marathon botanical imagery, carried across each course section. */
.hero-copy {
  background-image:linear-gradient(90deg,rgba(31,38,33,.96) 0 42%,rgba(31,38,33,.72) 76%,rgba(31,38,33,.5)),url("../../assets/phonetics-botanical-hero.jpg");
  background-position:center;
  background-size:cover;
}
.hero-card {
  background:#355b42;
  background-image:none;
}
.section-heading {
  padding:18px 0 8px;
}
.snail-roadmap {
  background-image:linear-gradient(110deg,rgba(29,36,31,.9),rgba(34,42,35,.86)),url("../../assets/phonetics-botanical-frame.png"),url("../../assets/botanical-nocturne.svg");
  background-position:center,left -38px bottom -62px,center;
  background-size:cover,clamp(190px,24vw,270px) auto,440px 440px;
  background-repeat:no-repeat, no-repeat, repeat;
}
.story-card {
  position:relative;
  min-height:112px;
  overflow:hidden;
  padding-right:104px;
  background-image:linear-gradient(90deg,#40312b 0 57%,rgba(64,49,43,.72)),url("../../assets/phonetics-botanical-frame.png");
  background-position:center,right -12px bottom -46px;
  background-size:cover,100px auto;
  background-repeat:no-repeat;
}
.story-card strong,.story-card p { position:relative; z-index:2; }
.story-animal {
  position:absolute;
  right:5px;
  bottom:-3px;
  z-index:1;
  display:block;
  width:88px;
  height:104px;
  object-fit:contain;
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.28));
}
.exercise-card {
  background-image:linear-gradient(100deg,rgba(36,44,38,.98) 0 70%,rgba(36,44,38,.72)),url("../../assets/phonetics-botanical-frame.png");
  background-position:center,right -30px top -48px;
  background-size:cover,164px auto;
  background-repeat:no-repeat;
}
.program-grid article {
  background-image:linear-gradient(rgba(37,46,39,.94),rgba(37,46,39,.9)),url("../../assets/phonetics-botanical-frame.png");
  background-position:center,right -10px bottom -46px;
  background-size:cover,106px auto;
  background-repeat:no-repeat;
}
.access {
  background-image:linear-gradient(100deg,rgba(41,61,50,.97),rgba(36,52,44,.88) 58%,rgba(73,54,45,.7)),url("../../assets/phonetics-botanical-hero.jpg");
  background-position:center;
  background-size:cover;
}
.price-card {
  background-image:linear-gradient(rgba(238,227,202,.93),rgba(238,227,202,.93)),url("../../assets/phonetics-botanical-frame.png");
  background-position:center,right bottom -40px;
  background-size:cover,100px auto;
  background-repeat:no-repeat;
}
@media (max-width:640px) {
  .section-heading { padding:10px 0 0; background:none; }
  .story-card { min-height:100px; padding-right:82px; background-size:cover,78px auto; background-position:center,right -8px bottom -30px; }
  .story-animal { right:2px; width:72px; height:86px; }
  .exercise-card { background-size:cover,126px auto; }
}
.spiral-node.is-day { background:#54714e; }
.spiral-node.is-day.is-locked { background:#737565; }
.spiral-node.is-day.is-completed { background:#b66a4e; }
.spiral-node.is-day.is-active { background:#c29a4c; color:#28291e; }
.roadmap-topics {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:5px 22px;
  margin:15px 0;
  padding-left:25px;
  color:#e8e0c7;
  font-size:.84rem;
  line-height:1.4;
}
.roadmap-topics li { padding-left:2px; }
.selected-day-summary {
  margin-top:18px;
  padding:14px 16px;
  border:1px solid rgba(194,154,76,.42);
  border-radius:16px;
  background:rgba(23,31,25,.46);
}
.selected-day-summary h4 { margin:0; color:#f0e5cb; font-size:1.05rem; line-height:1.35; }
.day-hover-hint {
  min-height:2.8em;
  margin:5px 0 0;
  padding:0;
  border:0;
  background:transparent;
  color:#d6d1bd;
  font-size:.88rem;
  line-height:1.45;
}
.roadmap-progress { margin-top:12px; }
@media (max-width:640px) { .roadmap-topics { grid-template-columns:1fr; } }

/* The 14 day selector follows the shell's natural spiral. */
.snail-map { min-width:0; }
.day-route { position:absolute; z-index:2; inset:0; pointer-events:none; }
.day-route>svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.day-route>svg path { fill:none; stroke:rgba(242,218,158,.78); stroke-width:.72; stroke-dasharray:.3 1.7; stroke-linecap:round; filter:drop-shadow(0 0 1px rgba(19,24,18,.9)); }
.task-spiral { position:absolute; inset:0; }
.day-node { position:absolute; z-index:2; display:grid; width:clamp(29px,4.5vw,40px); height:clamp(29px,4.5vw,40px); padding:0; place-items:center; transform:translate(-50%,-50%); border:2px solid #e6dcc1; border-radius:50%; background:#54714e; color:#fbf1dc; font-size:clamp(.7rem,.95vw,.86rem); font-weight:900; font-variant-numeric:tabular-nums; cursor:pointer; pointer-events:auto; box-shadow:0 3px 0 rgba(8,12,9,.45),0 5px 11px rgba(8,12,9,.3); transition:transform .18s ease,outline-color .18s ease,background-color .18s ease; }
.day-node:hover,.day-node:focus-visible { z-index:3; transform:translate(-50%,-55%) scale(1.08); outline:3px solid #e3c37c; outline-offset:3px; }
.day-node.is-locked { background:#737565; }
.day-node.is-completed { background:#405b43; }
.day-node.is-active { background:#c29a4c; color:#28291e; outline:3px solid #e3c37c; outline-offset:3px; }
.story-card { min-height:132px; padding-right:158px; border-color:rgba(194,154,76,.36); background-color:rgba(54,61,46,.86); background-image:linear-gradient(90deg,rgba(54,61,46,.98),rgba(54,61,46,.86)); }
.story-illustration { position:absolute; right:2px; bottom:0; z-index:1; display:block; width:150px; height:132px; object-fit:contain; filter:drop-shadow(0 5px 8px rgba(0,0,0,.25)); }
.task-progress { display:flex; gap:9px; margin:0 0 28px; }
.task-progress-segment { position:relative; flex:1; height:13px; overflow:hidden; border:1px solid rgba(224,213,175,.4); border-radius:999px; background:rgba(11,18,13,.48); box-shadow:inset 0 1px 3px rgba(0,0,0,.26); }
.task-progress-segment span { position:absolute; inset:0 auto 0 0; width:0; border-radius:inherit; transition:width .24s ease; }
#phraseProgress span { background:#6d9a61; }
#dialogueProgress span { background:#d28a5e; }
#practiceProgress span { background:#d0b365; }
.task-progress-labels { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:-19px 0 24px; color:#c0bea9; font-size:.72rem; font-weight:750; text-align:center; }
.task-progress-labels span:nth-child(1) { color:#b9d09f; }
.task-progress-labels span:nth-child(2) { color:#e2a17e; }
.task-progress-labels span:nth-child(3) { color:#e4cc82; }
.lesson-progress { justify-content:flex-start; }
.day-workshop { margin:24px 0 0; padding:clamp(20px,4vw,34px); border:1px solid rgba(194,154,76,.48); border-radius:24px; background:linear-gradient(145deg,rgba(38,57,43,.96),rgba(55,68,49,.94)); color:#f5eedb; box-shadow:0 14px 32px rgba(31,43,29,.14); }
.day-workshop[hidden] { display:none; }
.day-workshop h3 { margin:0 0 8px; color:#f3e4b7; font-size:clamp(1.45rem,3vw,2rem); }
.day-workshop>p:not(.eyebrow) { color:#d2d3bd; line-height:1.55; }
.workshop-content { margin-top:18px; }
.family-vocabulary-guide { margin:22px 0; padding:clamp(16px,2.6vw,28px); overflow:hidden; border:1px solid #c3b174; border-radius:22px; color:#304433; background-color:#f3ecd9; background-image:url("../../assets/arts-and-crafts-botanical.svg"),linear-gradient(135deg,#f8f3e5,#e7e1cb); background-size:150px 150px,cover; box-shadow:inset 0 0 0 5px rgba(255,252,239,.62),0 12px 28px rgba(12,20,14,.2); }
.family-vocabulary-guide[hidden] { display:none; }
.family-guide-heading { margin:0 auto 20px; text-align:center; }
.family-guide-kicker { margin:0 0 5px; color:#a05d43; font-size:.7rem; font-weight:900; letter-spacing:.14em; }
.family-guide-heading h4 { margin:0; color:#344635; font:clamp(1.8rem,4vw,2.7rem)/1.05 Georgia,"Times New Roman",serif; }
.family-guide-intro { max-width:650px; margin:9px auto 0; color:#59634e; line-height:1.5; }
.family-tree { max-width:990px; margin:0 auto; padding:20px clamp(10px,3vw,32px); border:1px solid rgba(107,104,70,.42); border-radius:18px; background:rgba(250,247,235,.88); }
.family-tree-level { display:flex; justify-content:center; }
.family-tree-level-top .family-tree-card { width:min(100%,500px); }
.family-tree-card { position:relative; z-index:1; min-width:0; overflow:hidden; border:1px solid rgba(131,116,76,.45); border-radius:15px; background:#fffdf4; box-shadow:0 6px 16px rgba(43,52,37,.1); }
.family-tree-photo { position:relative; margin:0; overflow:hidden; background:#445643; }
.family-tree-photo img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.family-tree-grandparents .family-tree-photo img { object-position:center 43%; }
.family-tree-parents .family-tree-photo img { object-position:center 42%; }
.family-tree-aunt .family-tree-photo img { object-position:center 40%; }
.family-tree-siblings .family-tree-photo img { object-position:center 40%; }
.family-tree-cousins .family-tree-photo img { object-position:center 42%; }
.family-tree-photo figcaption { position:absolute; inset:auto 0 0; padding:22px 11px 9px; color:#fff8e7; background:linear-gradient(transparent,rgba(17,29,21,.78)); font-size:.84rem; font-weight:800; text-shadow:0 1px 4px rgba(0,0,0,.45); }
.family-tree-terms { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; padding:11px; }
.family-tree-term-card { display:flex; min-width:0; flex-direction:column; gap:2px; padding:8px 10px; border-left:2px solid #bb8059; border-radius:0 9px 9px 0; background:#f5f0e2; }
.family-tree-term-card span:first-child { color:#334934; font-weight:850; line-height:1.25; }
.family-tree-term-card span:last-child { color:#666c55; font-size:.85rem; line-height:1.3; }
.family-tree-trunk { position:relative; width:0; height:30px; margin:0 auto; border-left:1.5px solid #9c925f; }
.family-tree-trunk-short { width:0; height:24px; }
.family-tree-branches { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,3vw,30px); padding-top:15px; }
.family-tree-branches::before { position:absolute; top:0; left:25%; right:25%; height:15px; border-top:1.5px solid #9c925f; content:""; }
.family-tree-branch { position:relative; display:flex; min-width:0; flex-direction:column; align-items:stretch; }
.family-tree-branch::before { position:absolute; top:-15px; left:50%; height:15px; border-left:1.5px solid #9c925f; content:""; }
.family-tree-branch .family-tree-card { flex:1; }
.family-guide-note { max-width:820px; margin:16px auto 0; padding:11px 14px; border-radius:12px; background:rgba(71,94,66,.1); color:#536048; font-size:.92rem; line-height:1.55; }
.family-guide-note strong,.family-guide-note em { color:#8f573e; }
.workshop-card,.workshop-flashcard { padding:clamp(18px,3vw,28px); border:1px solid rgba(236,218,169,.42); border-radius:18px; background:rgba(16,28,21,.58); }
.routine-choice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0 0 16px; }
.routine-choice-button { min-height:58px; border:1px solid rgba(220,194,125,.7); background:rgba(16,28,21,.52); color:#f5eedb; }
.routine-choice-button:hover,.routine-choice-button.is-current { border-color:#ead18a; background:#d9bb76; color:#263629; }
.routine-choice-button.is-current { box-shadow:0 0 0 3px rgba(217,187,118,.22); }
.routine-story-panel { padding:clamp(16px,3vw,26px); border:1px solid #c7b77e; border-radius:18px; background:linear-gradient(145deg,#fbf6e8,#eee6d0); color:#304636; }
.routine-story-title { margin:0 0 16px; color:#304636; font:700 clamp(1.35rem,3vw,1.8rem)/1.2 Georgia,"Times New Roman",serif; }
.routine-story-columns { display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,3vw,28px); }
.routine-story-language h5 { margin:0 0 9px; color:#9a5e42; font-size:.78rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.routine-story-language p { margin:0 0 10px; line-height:1.65; }
.routine-story-language p:last-child { margin-bottom:0; }
.routine-story-language[lang="fr"],.routine-story-language p[lang="fr"] { color:#2d4535; }
.routine-story-words { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0; padding:14px 0 0; border-top:1px solid rgba(107,104,70,.25); list-style:none; }
.routine-story-words li { display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 8px; padding:7px 10px; border:1px solid rgba(107,104,70,.22); border-radius:10px; background:rgba(255,255,255,.55); }
.routine-story-words strong { color:#36523a; }
.routine-story-words span { color:#68705a; font-size:.9rem; }
.clock-builder-section { margin-top:22px; padding-top:20px; border-top:1px solid rgba(236,218,169,.32); }
.clock-builder-section h3 { margin:0 0 8px; color:#f3e4b7; font-size:clamp(1.15rem,2.4vw,1.45rem); }
.clock-builder-intro { margin:0 0 14px; color:#d8d9c6; line-height:1.55; }
.clock-builder-card h4 { color:#f5eedb; line-height:1.4; }
.workshop-flashcard { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:12px; }
.workshop-flashcard .eyebrow { grid-column:1/-1; margin:0; color:#d5bd78; }
.workshop-flashcard strong { color:#fff3d1; font-size:clamp(1.2rem,3vw,1.65rem); }
.workshop-card h4,.workshop-er-deck>h4 { margin:0 0 12px; color:#f5ebd3; font-size:1.12rem; }
.workshop-er-deck { margin:0 0 22px; padding:clamp(16px,2.5vw,22px); border:1px solid rgba(236,218,169,.24); border-radius:18px; background:rgba(47,62,48,.58); }
.workshop-er-deck>p { margin:0 0 12px; color:#d2d3bd; line-height:1.5; }
.workshop-er-deck .workshop-flashcard { background:rgba(16,28,21,.58); }
.workshop-recall-quiz { display:grid; gap:10px; }
.workshop-recall-quiz>.eyebrow { margin:0; color:#d5bd78; }
.workshop-recall-prompt { margin:0; color:#fff3d1; font-size:clamp(1.2rem,2.6vw,1.65rem); line-height:1.4; }
.workshop-recall-instruction { margin:0; color:#d2d3bd; }
.workshop-recall-options { margin-top:4px; }
.workshop-recall-options .workshop-button { min-height:54px; }
.workshop-recall-quiz .workshop-feedback:empty { display:none; }
.lesson-vocabulary { border-color:rgba(196,164,91,.58); background:linear-gradient(145deg,rgba(35,52,40,.98),rgba(48,62,47,.96)); }
.vocabulary-progress-track { height:9px; margin:0 0 12px; overflow:hidden; border:1px solid rgba(219,206,159,.38); border-radius:99px; background:rgba(12,23,17,.68); }
.vocabulary-progress-track span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#7ba06b,#d6bc76); transition:width .2s ease; }
.vocabulary-step { margin:0 0 8px; color:#d9c783; }
.vocabulary-navigation { display:flex; justify-content:flex-start; margin:0 0 12px; }
.vocabulary-navigation .workshop-button { min-height:40px; padding:8px 12px; border-color:rgba(196,164,91,.48); background:rgba(16,28,21,.46); color:#e7dfc5; font-size:.92rem; }
.vocabulary-navigation .workshop-button:hover { background:rgba(196,164,91,.16); }
.vocabulary-peek-note { margin:12px 0 0; padding:11px 14px; border-left:3px solid #d6bc76; border-radius:0 10px 10px 0; background:rgba(214,188,118,.11); color:#e7dfc5; line-height:1.5; }
.vocabulary-prompt { margin:0 0 16px; color:#fff3d1; font-size:clamp(1.15rem,2.5vw,1.5rem); line-height:1.4; }
.vocabulary-options .workshop-button { min-height:56px; }
.vocabulary-input-label { display:block; margin:10px 0 6px; color:#d2d3bd; font-weight:750; }
.vocabulary-answer-input { width:min(100%,520px); min-height:52px; padding:12px 14px; border:1px solid #a4a17a; border-radius:12px; background:#f6f0df; color:#263629; font:inherit; }
.vocabulary-answer-input:focus-visible { outline:3px solid #d3b96e; outline-offset:2px; }
.vocabulary-complete { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.vocabulary-complete .workshop-feedback { margin:0; }
.food-vocabulary-guide { margin:22px 0 28px; padding:clamp(14px,2.5vw,26px); overflow:hidden; border:1px solid #c4b47e; border-radius:22px; background-color:#f2ead5; background-image:url("../../assets/arts-and-crafts-botanical.svg"),linear-gradient(135deg,#f8f2df,#e8e2c9); background-size:150px 150px,cover; color:#334534; box-shadow:inset 0 0 0 5px rgba(255,252,237,.62),0 12px 28px rgba(13,24,17,.18); }
.food-vocabulary-guide[hidden] { display:none; }
.food-guide-book { padding:clamp(12px,2.4vw,24px); border:1px solid rgba(112,112,76,.52); border-radius:19px; background:rgba(249,245,229,.87); }
.food-guide-book-topline { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 4px 14px; }
.food-guide-kicker { margin:0; color:#a25f45; font-size:.72rem; font-weight:900; letter-spacing:.14em; }
.food-guide-page-count { color:#64704e; font-variant-numeric:tabular-nums; font-size:.88rem; font-weight:800; }
.food-guide-page { display:block; overflow:hidden; border:1px solid rgba(112,112,76,.44); border-radius:16px; background:rgba(255,252,240,.93); animation:food-guide-page-in .32s ease both; }
@keyframes food-guide-page-in { from { opacity:.45; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
.food-guide-page-content { display:flex; flex-direction:column; padding:clamp(18px,2.4vw,30px); }
.food-guide-page-content h4 { margin:0; color:#334534; font-family:Georgia,"Times New Roman",serif; font-size:clamp(2rem,4vw,3.25rem); line-height:1.05; }
.food-guide-page-translation { margin:4px 0 0; color:#a25f45; font-size:1.1rem; font-weight:800; }
.food-guide-page-description { margin:8px 0 18px; color:#485746; font-size:clamp(.92rem,1.5vw,1.03rem); line-height:1.55; }
.food-guide-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(8px,1.4vw,14px); }
.food-guide-grid.is-repas { grid-template-columns:repeat(2,minmax(0,1fr)); }
.food-guide-card { min-width:0; overflow:hidden; margin:0; border:1px solid rgba(128,120,83,.32); border-radius:13px; background:#fffdf5; box-shadow:0 3px 10px rgba(45,54,38,.08); }
.food-guide-card-image { width:100%; aspect-ratio:1; background-color:#f5efdf; background-repeat:no-repeat; background-position:center; background-size:cover; }
.food-guide-grid.is-repas .food-guide-card-image { aspect-ratio:4/3; }
.food-guide-card figcaption { display:flex; min-height:62px; flex-direction:column; justify-content:center; gap:3px; padding:9px 10px 11px; border-top:1px solid rgba(128,120,83,.2); }
.food-guide-term { color:#344735; font-weight:850; line-height:1.25; }
.food-guide-translation { color:#6a7057; font-size:.9rem; line-height:1.35; }
.food-guide-pagination { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 3px 0; }
.food-guide-dots { display:flex; justify-content:center; gap:8px; }
.food-guide-arrow,.food-guide-dot { display:grid; min-width:42px; min-height:42px; place-items:center; border:1px solid #9c9a70; border-radius:999px; background:#f7f0da; color:#344735; font:inherit; font-weight:850; cursor:pointer; transition:background .18s ease,transform .18s ease,opacity .18s ease; }
.food-guide-arrow { width:46px; font-size:1.2rem; }
.food-guide-arrow:hover:not(:disabled),.food-guide-dot:hover { transform:translateY(-1px); background:#e7dfbe; }
.food-guide-arrow:disabled { opacity:.4; cursor:not-allowed; }
.food-guide-dot { min-width:34px; min-height:34px; font-size:.82rem; }
.food-guide-dot.is-current { border-color:#38513a; background:#38513a; color:#fff6db; box-shadow:0 0 0 3px rgba(56,81,58,.15); }
.food-guide-arrow:focus-visible,.food-guide-dot:focus-visible { outline:3px solid #bd7955; outline-offset:3px; }
.city-vocabulary-guide { margin:22px 0 28px; padding:clamp(14px,2.5vw,26px); border:1px solid #c4b47e; border-radius:22px; color:#334534; background-color:#f2ead5; background-image:url("../../assets/arts-and-crafts-botanical.svg"),linear-gradient(135deg,#f8f2df,#e8e2c9); background-size:150px 150px,cover; box-shadow:inset 0 0 0 5px rgba(255,252,237,.62),0 12px 28px rgba(13,24,17,.18); }
.city-vocabulary-guide[hidden] { display:none; }
.city-guide-book { padding:clamp(14px,2.4vw,24px); border:1px solid rgba(112,112,76,.52); border-radius:19px; background:rgba(249,245,229,.9); }
.city-guide-heading { max-width:760px; margin:0 auto 18px; text-align:center; }
.city-guide-kicker { margin:0 0 5px; color:#a25f45; font-size:.72rem; font-weight:900; letter-spacing:.14em; }
.city-guide-heading h4 { margin:0; color:#334534; font:clamp(1.8rem,4vw,2.7rem)/1.05 Georgia,"Times New Roman",serif; }
.city-guide-heading>p:last-child { margin:9px auto 0; color:#59634e; line-height:1.55; }
.city-guide-spread { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(220px,.6fr); overflow:hidden; border:1px solid rgba(112,112,76,.48); border-radius:16px; background:#e9e2cb; }
.city-guide-map { min-width:0; align-self:center; padding:clamp(8px,1.6vw,16px); background:#25382d; }
.city-guide-map svg { display:block; width:100%; height:auto; border-radius:12px; box-shadow:0 8px 25px rgba(14,23,16,.22); }
.city-guide-legend { display:grid; align-content:center; gap:10px; margin:0; padding:clamp(16px,2.4vw,26px); list-style:none; }
.city-guide-legend li { display:grid; grid-template-columns:30px minmax(0,1fr); gap:2px 10px; align-items:center; padding-bottom:9px; border-bottom:1px solid rgba(112,112,76,.25); }
.city-guide-number { grid-row:span 2; display:grid; width:28px; height:28px; place-items:center; border-radius:50%; background:#a5593e; color:#fff7e3; font-size:.82rem; font-weight:900; }
.city-guide-place { color:#344735; font-weight:850; line-height:1.25; }
.city-guide-translation { color:#6a7057; font-size:.9rem; line-height:1.3; }
.city-guide-note { margin:13px 4px 0; color:#526049; font-family:Georgia,"Times New Roman",serif; font-size:1.02rem; font-style:italic; text-align:right; }
.vocabulary-input-tip { margin:7px 0 0; color:#d2d3bd; font-size:.9rem; }
.workshop-button { min-height:44px; padding:10px 14px; border:1px solid #9a996f; border-radius:12px; background:#eee5c9; color:#344431; font-weight:800; cursor:pointer; }
.workshop-button:hover:not(:disabled),.workshop-button:focus-visible { outline:3px solid #d3b96e; outline-offset:2px; }
.workshop-button:disabled { opacity:.45; cursor:default; }
.workshop-answer { min-height:54px; margin:12px 0; padding:14px; border:1px dashed #b3a873; border-radius:12px; color:#fff3d1; line-height:1.5; }
.workshop-answer-token { min-height:36px; margin:0 6px 6px 0; padding:4px 10px; border:1px solid rgba(214,188,118,.7); border-radius:9px; background:rgba(238,229,201,.14); color:#fff3d1; font:inherit; font-weight:750; cursor:pointer; }
.workshop-answer-token:hover,.workshop-answer-token:focus-visible { outline:2px solid #d3b96e; outline-offset:2px; }
.workshop-blocks,.workshop-options,.workshop-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:12px; }
.workshop-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); }
.workshop-options .workshop-button { text-align:left; }
.workshop-reading-text { margin:0 0 18px; padding:16px 18px; border-left:4px solid #d2b365; border-radius:12px; background:#eee7d2; color:#304636; }
.workshop-reading-text .eyebrow { display:block; margin-bottom:7px; color:#76643a; font-size:.74rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.workshop-reading-text p { margin:0; color:#304636; font-size:1.08rem; font-weight:700; line-height:1.7; }
.workshop-button.is-correct { border-color:#a5c289; background:#dce9c9; color:#28442f; }
.workshop-button.is-wrong { border-color:#d58976; background:#f5d4c8; color:#782f27; }
.workshop-verb-selector { display:flex; flex-wrap:wrap; gap:9px; margin:0 0 16px; }
.workshop-verb-selector .is-selected { background:#d9bb76; border-color:#f3dfaa; color:#263629; }
.workshop-table-wrap { overflow-x:auto; margin:0 0 16px; border:1px solid rgba(236,218,169,.42); border-radius:18px; background:rgba(16,28,21,.58); }
.er-conjugation-table { width:100%; border-collapse:collapse; color:#f5eedb; }
.er-conjugation-table th,.er-conjugation-table td { padding:10px 16px; border-bottom:1px solid rgba(236,218,169,.2); text-align:left; }
.er-conjugation-table thead th { color:#f3e4b7; font-size:.85rem; }
.er-conjugation-table tbody tr:last-child th,.er-conjugation-table tbody tr:last-child td { border-bottom:0; }
.er-conjugation-table tbody th { width:50%; color:#d2d3bd; font-weight:700; }
.er-conjugation-table tbody td { font-weight:850; }
.er-conjugation-quiz { margin-top:16px; }
.workshop-feedback { min-height:1.5em; margin:14px 0 0; color:#e4ddc4; font-weight:800; }
.workshop-feedback.is-correct { color:#c6dfa9; }
.workshop-feedback.is-wrong { color:#f0a794; }
@media (max-width:640px) {
  .day-node { width:clamp(27px,7.4vw,34px); height:clamp(27px,7.4vw,34px); font-size:clamp(.64rem,2.4vw,.78rem); }
  .story-card { min-height:112px; padding-right:100px; }
  .story-illustration { right:2px; width:94px; height:104px; }
  .task-progress { gap:6px; margin-bottom:22px; }
  .workshop-flashcard { grid-template-columns:1fr 1fr; }
  .workshop-flashcard strong { grid-column:1/-1; }
  .routine-choice-grid { grid-template-columns:1fr; }
  .routine-story-columns { grid-template-columns:1fr; gap:15px; }
  .food-guide-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .food-guide-grid.is-repas { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .city-guide-spread { grid-template-columns:1fr; }
  .city-guide-legend { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 14px; }
  .food-guide-page-content { padding:20px 17px; }
  .food-guide-grid,.food-guide-grid.is-repas { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .food-guide-book-topline { align-items:flex-start; }
  .food-guide-kicker { max-width:75%; line-height:1.45; }
  .food-guide-dots { gap:5px; }
  .food-guide-dot { min-width:32px; min-height:32px; }
  .family-tree { padding:16px 10px; }
  .family-tree-branches { gap:9px; padding-top:12px; }
  .family-tree-branches::before { top:0; left:25%; right:25%; height:12px; }
  .family-tree-branch::before { top:-12px; height:12px; }
  .family-tree-photo img { aspect-ratio:4/3; }
  .family-tree-photo figcaption { padding:20px 7px 7px; font-size:.73rem; }
  .family-tree-terms { grid-template-columns:1fr; gap:5px; padding:8px; }
  .family-tree-term-card { padding:7px; }
  .family-tree-term-card span:first-child { font-size:.9rem; }
  .family-tree-term-card span:last-child { font-size:.77rem; }
}

/* Mobile course navigation: keep the snail visible and offer large day targets. */
.mobile-day-picker { display:none; }
.mobile-day-picker[hidden] { display:none; }
@media (max-width:900px) {
  .snail-body-art { z-index:2; }
  .day-route { z-index:3; }
  .shell-center { z-index:2; pointer-events:none; }
  .mobile-day-picker:not([hidden]) { display:block; margin:2px 4px 4px; padding:12px; border:1px solid rgba(213,184,117,.42); border-radius:16px; background:rgba(19,29,22,.72); }
  .mobile-day-picker>p { margin:0 0 10px; color:#e7dfc5; font-size:.88rem; font-weight:800; }
  .mobile-day-picker-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(44px,1fr)); gap:7px; }
  .mobile-day-button { min-width:44px; min-height:44px; padding:6px; border:1px solid #7a805e; border-radius:13px; background:#405c43; color:#fff4d8; font-size:.94rem; font-weight:900; font-variant-numeric:tabular-nums; cursor:pointer; touch-action:manipulation; }
  .mobile-day-button.is-active { border-color:#f0d084; outline:2px solid #f0d084; outline-offset:1px; background:#b78f45; color:#171c16; }
  .mobile-day-button.is-completed { background:#2f6946; }
  .mobile-day-button.is-locked { background:#343b35; color:#c1bda9; }
  .mobile-day-button:focus-visible { outline:3px solid #f0d084; outline-offset:2px; }
}
@media (max-width:640px) {
  .hero-copy h1 { font-size:clamp(2.05rem,9vw,2.65rem); line-height:1.04; overflow-wrap:normal; word-break:normal; hyphens:none; }
  .trainer { padding:40px 0; }
  .section-heading { margin-bottom:20px; }
  .section-heading h2 { font-size:clamp(2rem,7.4vw,2.75rem); line-height:1.04; }
  .snail-roadmap { gap:16px; padding:16px 12px 20px; }
  .snail-map { width:100%; }
  .snail-visual { width:min(100%,480px); aspect-ratio:1.32; margin-bottom:12px; }
  .snail-shell { left:14%; width:68%; }
  .snail-body-art { left:-6%; bottom:-2%; width:128%; }
  .day-node { width:clamp(30px,8vw,35px); height:clamp(30px,8vw,35px); font-size:.7rem; }
  .day-node.is-active { width:38px; height:38px; }
  .roadmap-copy { padding-bottom:0; text-align:left; }
  .roadmap-copy h3 { font-size:clamp(1.65rem,6vw,2.2rem); }
  .roadmap-copy>p:not(.eyebrow) { line-height:1.55; }
  .roadmap-topics { grid-template-columns:1fr; text-align:left; }
  .game-shell { border-radius:20px; }
  .lesson-card,.exercise-card { min-height:0; padding:20px 16px; }
  .lesson-card h3 { font-size:1.45rem; }
  .story-card { min-height:112px; padding-right:100px; }
  .story-illustration { right:2px; width:94px; height:104px; }
  .character-chip { min-width:min(100%,180px); }
  .audio-row { display:grid; grid-template-columns:1fr; }
  .listen-button,.text-button,.next-button,.task-tab,.option-button,.word-chip { min-height:44px; }
  .word-bank { gap:9px; }
  .word-chip { padding:10px 11px; touch-action:manipulation; }
  .answer-zone { min-height:70px; margin:18px 0 14px; padding:11px; }
  .exercise-actions { gap:9px; margin-top:18px; }
}

/* Keep the 14 clickable day markers above the complete snail illustration. */
.snail-visual { position:relative; isolation:isolate; width:min(100%,920px); aspect-ratio:1.5; margin-bottom:clamp(24px,5vw,48px); }
.snail-complete-art { position:absolute; inset:0; z-index:0; display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.snail-shell { top:0; left:0; z-index:1; width:100%; height:100%; aspect-ratio:auto; overflow:visible; border:0; border-radius:0; background:transparent; box-shadow:none; pointer-events:none; }
.day-route { inset:0; z-index:5; pointer-events:none; }
.day-route>svg { z-index:0; }
.task-spiral { z-index:1; pointer-events:none; }
.day-node { z-index:2; pointer-events:auto; touch-action:manipulation; }
.shell-center { display:none; }
@media (max-width:900px) {
  .snail-visual { width:min(100%,860px); aspect-ratio:1.5; }
}
@media (max-width:640px) {
  .snail-visual { width:min(100%,480px); aspect-ratio:1.5; margin-bottom:12px; }
  .day-node { width:25px; height:25px; border-width:1.5px; font-size:.68rem; box-shadow:0 2px 0 rgba(8,12,9,.4),0 4px 8px rgba(8,12,9,.24); }
  .day-node.is-active { width:30px; height:30px; border-width:2px; outline-offset:2px; }
  footer .footer-tagline { display:none; }
}