/*
Theme Name: Yaponskii Bot — Reference Design
Description: Тема «Японский Бот» по утверждённому макету: без фото преподавателя на главной.
Version: 54.0.0
Text Domain: yap-bot
*/
:root{--ink:#222126;--muted:#706b70;--pink:#e9828b;--rose:#f5c4c6;--paper:#fffdfc;--line:#eadfe0}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,"Helvetica Neue",sans-serif;line-height:1.55}a{color:inherit;text-decoration:none}.wrap{width:min(1380px,calc(100% - 64px));margin:auto;min-width:0}
.site-header{min-height:104px;display:flex;align-items:center;position:relative;z-index:3;background:rgba(255,253,252,.96);border-bottom:1px solid rgba(234,223,224,.55)}.head{display:flex;align-items:center;justify-content:space-between;gap:20px;min-width:0;padding:10px 0}.brand{display:flex;align-items:center;gap:12px;flex:0 0 245px;min-width:245px}.brand img{width:68px;height:68px;object-fit:contain;flex:0 0 68px}.brand strong{font-size:24px;line-height:1.1;display:block;white-space:nowrap}.brand small{display:block;font-size:12px;line-height:1.35;color:#817b80;max-width:155px}.nav{display:flex;align-items:center;justify-content:center;gap:10px 17px;font-size:13px;line-height:1.25;white-space:normal;flex:1 1 650px;min-width:0;flex-wrap:wrap}.nav a{white-space:nowrap}.nav a:hover{color:var(--pink)}.right-head{display:flex;align-items:center;gap:10px;flex:0 0 auto}.lang{flex-shrink:0}.right-head .button{white-space:nowrap}.lang{display:flex;border:1px solid #d9d5d5;border-radius:25px;padding:3px}.lang a,.lang span{padding:7px 14px;border-radius:22px;font-size:13px}.lang .active{background:#25242a;color:#fff}.button{display:inline-flex;align-items:center;justify-content:center;gap:15px;background:var(--pink);color:#fff;border-radius:36px;padding:13px 22px;font-size:15px;box-shadow:0 7px 20px #e9828b33}.button:hover{background:#d96f79;color:white}
.hero{position:relative;overflow:hidden;min-height:610px;background:radial-gradient(ellipse at 72% 40%,#fff0ef 0,#fff9f8 32%,transparent 60%),linear-gradient(100deg,#fffdfc,#fff9f8)}.hero:after{content:"";position:absolute;right:0;top:0;width:220px;height:100%;background:url('assets/sakura-pagoda.jpg') center right/cover no-repeat;opacity:.55;mix-blend-mode:multiply;pointer-events:none}.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,46%) minmax(0,54%);min-height:560px;align-items:center;gap:0}.hero-copy{padding:22px 0 35px;position:relative;z-index:2}.eyebrow{display:flex;align-items:center;gap:14px;font-size:18px;margin-bottom:18px}.flower{font-size:29px;color:#ee8993}h1{font-size:clamp(46px,4.5vw,64px);line-height:1.06;letter-spacing:-2px;margin:0 0 25px;font-weight:800;max-width:690px}.intro{font-size:22px;color:#777176;line-height:1.42;max-width:560px;margin:0 0 24px}.checks{list-style:none;padding:0;margin:0 0 28px;color:#746d73;font-size:16px}.checks li{margin:7px 0}.checks li:before{content:"✓";display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--pink);color:white;margin-right:12px}.hero-actions{display:flex;align-items:center;gap:25px}.hero-visual{height:540px;min-width:0;position:relative;display:flex;align-items:center;justify-content:center}.fuji-glow{position:absolute;width:390px;height:390px;border-radius:50%;background:radial-gradient(circle,#f9d1d2,#fbe9e8 68%,transparent 70%);right:20%;top:5%;opacity:.8}.mascot{position:relative;z-index:1;width:min(88%,560px);height:500px;object-fit:contain;mix-blend-mode:normal;border-radius:0}.hero-sakura{position:absolute;right:0;top:0;width:210px;height:100%;object-fit:cover;opacity:.01}
.benefits{display:grid;grid-template-columns:repeat(5,1fr);gap:0;padding:20px 0 54px;background:#fffdfc}.benefit{display:flex;align-items:center;gap:16px;padding:14px 20px;border-right:1px solid #e5dddd;min-height:90px}.benefit:last-child{border:0}.benefit-icon{width:62px;height:62px;flex:0 0 62px;border-radius:50%;border:1px solid #eadfe0;display:grid;place-items:center;font-size:27px;color:#38353b;background:#fff}.benefit strong{display:block;font-size:16px;line-height:1.2}.benefit small{display:block;color:#837d82;font-size:13px;line-height:1.25;margin-top:5px}
.section{padding:76px 0}.section.soft{background:#fff7f6}.section-title{text-align:center;max-width:750px;margin:0 auto 36px}.section-title h2{font-size:42px;line-height:1.1;margin:8px 0 12px}.section-title p{color:var(--muted)}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.card{padding:28px;border:1px solid var(--line);border-radius:22px;background:#fff}.card h3{font-size:20px;margin:0 0 9px}.card p{color:var(--muted);margin:0}.price{font-size:27px;font-weight:bold;margin:15px 0}.price small{font-size:14px;color:var(--muted);font-weight:normal}
.teacher{display:grid;grid-template-columns:330px 1fr;gap:45px;align-items:start}.teacher img{width:100%;border-radius:24px;object-fit:cover}.teacher h2{font-size:36px;margin:0 0 16px}.teacher p{color:var(--muted)}.teacher-placeholder{background:#fff0ef;border-radius:24px;padding:60px 20px;text-align:center;color:#9c8184}
.footer{background:#242329;color:#fff;padding:32px 0}.footer-inner{display:flex;justify-content:space-between;align-items:center}.footer small{color:#c9c3c5}
@media(max-width:1450px) and (min-width:761px){.head{flex-wrap:wrap;justify-content:center;gap:8px 18px}.brand{flex:0 0 225px}.nav{order:3;flex:1 1 100%;justify-content:center;padding:4px 0 8px}.right-head{margin-left:auto}.site-header{min-height:0}.hero-grid{grid-template-columns:minmax(0,48%) minmax(0,52%)}h1{font-size:clamp(42px,4.3vw,56px)}.benefits{grid-template-columns:repeat(3,1fr)}.benefit:nth-child(3){border-right:0}}
@media(max-width:760px){.wrap{width:calc(100% - 34px)}.site-header{height:auto;padding:10px 0}.head{flex-wrap:wrap;gap:8px}.brand{flex:1 1 60%;min-width:0}.brand img{width:56px;height:56px;flex-basis:56px}.brand strong{font-size:18px}.brand small{font-size:10px}.nav{order:3;width:100%;flex:1 0 100%;overflow-x:auto;justify-content:flex-start;flex-wrap:nowrap;padding:9px 0;font-size:13px}.right-head .button{display:none}.hero-grid{grid-template-columns:1fr;min-height:0;padding:24px 0 18px}.hero{min-height:0}.hero-copy{padding:0}.eyebrow{font-size:15px}h1{font-size:clamp(39px,9vw,50px);letter-spacing:-1.4px}.intro{font-size:18px}.hero-visual{height:300px;grid-row:1}.mascot{height:290px;width:90%}.fuji-glow{width:230px;height:230px;right:18%}.hero:after{width:110px;opacity:.28}.hero-actions{flex-wrap:wrap}.benefits{grid-template-columns:1fr 1fr;padding:10px 0 30px}.benefit{padding:12px 8px;border-right:0;border-bottom:1px solid #eee}.benefit-icon{width:45px;height:45px;flex-basis:45px;font-size:21px}.benefit strong{font-size:13px}.benefit small{font-size:11px}.cards{grid-template-columns:1fr}.section{padding:52px 0}.section-title h2{font-size:32px}.teacher{grid-template-columns:1fr}.teacher img{max-width:330px}.footer-inner{display:block}}
/* About the teacher page */
.teacher-page{padding:72px 0 84px;background:linear-gradient(110deg,#fffdfc 0%,#fff8f7 100%)}
.teacher-hero{display:grid;grid-template-columns:minmax(280px,420px) minmax(0,1fr);gap:clamp(34px,6vw,86px);align-items:center}
.teacher-portrait-wrap{position:relative;padding:18px;background:#fff;border:1px solid #f0e4e4;border-radius:30px;box-shadow:0 18px 55px rgba(72,45,48,.08)}
.teacher-portrait{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 30%;border-radius:20px}
.teacher-caption{position:absolute;left:34px;right:34px;bottom:30px;padding:13px 17px;border-radius:15px;background:rgba(255,253,252,.92);backdrop-filter:blur(8px)}
.teacher-caption strong{display:block;font-size:17px}.teacher-caption span{font-size:13px;color:#777}
.teacher-kicker{color:#df7c86;font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.teacher-copy h1{font-size:clamp(38px,4.4vw,58px);line-height:1.08;letter-spacing:-1.8px;margin:13px 0 20px}
.teacher-lead{font-size:20px;color:#5f5a60;line-height:1.55;margin:0 0 20px}
.teacher-copy p{color:#706a70}
.teacher-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px 0}
.teacher-fact{padding:17px 15px;border:1px solid #eee1e2;border-radius:18px;background:rgba(255,255,255,.72)}
.teacher-fact b{display:block;font-size:25px;color:#df7c86;line-height:1.1}.teacher-fact span{display:block;color:#777;font-size:13px;margin-top:6px}
.teacher-details{padding:68px 0;background:#fff}
.teacher-details-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.teacher-detail{padding:26px;border:1px solid #eee4e4;border-radius:22px;background:#fff}
.teacher-detail .detail-icon{font-size:28px;color:#e9828b;margin-bottom:12px}
.teacher-detail h2{font-size:19px;margin:0 0 9px}.teacher-detail p{color:#777;margin:0}
.teacher-note{margin-top:35px;padding:25px 30px;border-radius:22px;background:#fff4f3;color:#655e63}
@media(max-width:760px){.teacher-page{padding:38px 0 50px}.teacher-hero{grid-template-columns:1fr;gap:30px}.teacher-portrait-wrap{max-width:390px;margin:auto}.teacher-copy h1{font-size:39px}.teacher-lead{font-size:17px}.teacher-facts{grid-template-columns:1fr 1fr}.teacher-details{padding:48px 0}.teacher-details-grid{grid-template-columns:1fr}.teacher-note{padding:20px}}

/* Free kana video course */
.kana-course-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.kana-course-card{border:1px solid #eee1e2;border-radius:26px;background:#fff;padding:25px;box-shadow:0 10px 30px rgba(55,35,38,.035)}
.kana-course-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}
.kana-course-heading h2{font-size:29px;line-height:1.2;margin:7px 0 8px}
.kana-course-card>p{color:#716b70;min-height:52px}
.kana-symbol{display:grid;place-items:center;width:65px;height:65px;flex:0 0 65px;border-radius:50%;background:#fff0ef;color:#df7c86;font-size:34px}
.playlist-frame{position:relative;width:100%;aspect-ratio:16/9;margin:20px 0 16px;border-radius:16px;overflow:hidden;background:#211f23}
.playlist-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.kana-study-note{margin-top:32px;padding:28px 32px;border-radius:24px;background:#fff4f3}
.kana-study-note h2{margin:0 0 8px;font-size:24px}
.kana-study-note p{margin:0;color:#6e686d}
@media(max-width:760px){.kana-course-grid{grid-template-columns:1fr}.kana-course-card{padding:19px}.kana-course-heading h2{font-size:24px}.kana-study-note{padding:22px}}

/* Lessons and pricing page */
.lesson-intro-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;margin-bottom:55px}
.lesson-intro-grid h2{font-size:32px;margin:0 0 12px}.lesson-intro-grid p{color:#716b70}
.lesson-highlight{padding:26px;border-radius:24px;background:#fff4f3;border:1px solid #f2e0e0}
.lesson-highlight .kana-symbol{display:inline-grid;margin-bottom:12px;width:auto;padding:0 18px;font-size:25px}
.lesson-highlight strong{display:block;font-size:19px}.lesson-highlight p{margin-bottom:0}
.lesson-price-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1000px;margin:auto}
.lesson-price-card{padding:32px;border-radius:26px;border:1px solid #eee1e2;background:#fff;box-shadow:0 12px 35px rgba(55,35,38,.04)}
.lesson-price-card h2{font-size:25px;margin:9px 0}.lesson-price{font-size:36px;font-weight:800;color:#242329;margin:12px 0}.lesson-price small{font-size:15px;font-weight:400;color:#777}
.lesson-price-card>p{color:#716b70;min-height:76px}
.lesson-list{list-style:none;padding:0;margin:22px 0 25px;color:#6f696e}.lesson-list li{padding:7px 0;border-bottom:1px solid #f1e9e9}.lesson-list li:before{content:"✓";color:#df7c86;font-weight:bold;margin-right:10px}
.lesson-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.lesson-steps>div{padding:25px;border-radius:20px;background:#fff;border:1px solid #eee5e5}
.lesson-steps b{font-size:26px;color:#e9828b}.lesson-steps h3{margin:10px 0 6px}.lesson-steps p{margin:0;color:#777}
.lesson-note{margin-top:28px;padding:24px 28px;border-radius:20px;background:#fff0ef;color:#665e63}.lesson-note p{margin:8px 0 0}
@media(max-width:760px){.lesson-intro-grid,.lesson-price-grid,.lesson-steps{grid-template-columns:1fr}.lesson-price-card{padding:23px}.lesson-price-card>p{min-height:0}.lesson-intro-grid{margin-bottom:38px}}


/* Interactive Minna-inspired lesson 1 */
.lesson-hero{background:radial-gradient(ellipse at 82% 30%,#ffe9e8 0,transparent 46%),linear-gradient(110deg,#fffdfc,#fff7f6);padding:72px 0 66px}
.lesson-hero-inner h1{font-size:clamp(38px,4.5vw,58px);max-width:850px;margin:12px 0 18px}
.lesson-meta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.lesson-meta span{padding:9px 14px;background:#fff;border:1px solid #f0e1e2;border-radius:24px;color:#716b70;font-size:13px}
.lesson-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:28px 38px;align-items:start}.lesson-welcome-mascot{grid-column:1 / -1;display:flex;align-items:center;gap:14px;padding:12px 18px;border:1px solid #f1e3e4;border-radius:18px;background:#fff9f8}.lesson-welcome-mascot img{width:82px;height:82px;object-fit:contain;flex:0 0 auto}.lesson-welcome-mascot span{color:#8b6870;font-weight:600}
.lesson-sidebar{position:sticky;top:20px}.lesson-side-card{display:grid;gap:4px;padding:20px;border:1px solid #eee2e2;border-radius:20px;background:#fff}.lesson-side-card a{padding:9px 7px;border-radius:9px;font-size:14px;color:#625c62}.lesson-side-card a:hover{background:#fff2f1;color:#d66f79}
.lesson-content{min-width:0}.lesson-block{padding:0 0 48px;margin:0 0 44px;border-bottom:1px solid #eee4e4;scroll-margin-top:25px}.lesson-block h2{font-size:clamp(26px,3vw,35px);line-height:1.2;margin:8px 0 18px}.lesson-hint{color:#797279;margin:0 0 18px}
.goal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.goal-grid div{padding:16px;border:1px solid #eee3e3;border-radius:14px;background:#fff}
.vocab-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.vocab-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 15px;border:1px solid #eee4e4;border-radius:12px;background:#fff}.vocab-item span{font-size:17px;font-weight:700;min-width:0;overflow-wrap:anywhere;line-height:1.55}.vocab-item small{min-width:0;flex:0 1 auto;line-height:1.4}.vocab-item small{color:#777;text-align:right}
.grammar-card{padding:22px 24px;border:1px solid #eee2e2;border-radius:19px;background:#fff;margin:14px 0}.grammar-card h3{margin:0 0 8px;font-size:20px}.grammar-card p{color:#706a70;margin:0 0 13px}.jp-example{padding:10px 13px;margin:8px 0;background:#fff6f5;border-radius:10px;font-size:18px}.jp-example small{display:block;color:#777;font-size:13px;margin-top:3px}
.lesson-note{padding:20px 23px;border-radius:16px;background:#fff1f0;color:#625b60}.lesson-note p{margin:6px 0 0}.dialogue-card{padding:22px 25px;border:1px solid #eee2e2;border-radius:18px;background:#fff}.dialogue-card p{margin:7px 0;font-size:17px}.dialogue-card b{display:inline-block;min-width:105px;color:#d8757e}.dialogue-card hr{border:0;border-top:1px solid #eee;margin:17px 0}.dialogue-card small{color:#777;line-height:1.6}
.practice-prompts{padding:18px 22px;border-radius:17px;background:#fff7f6}.practice-prompts p{margin:9px 0}
.lesson-quiz fieldset{border:1px solid #eee2e2;border-radius:17px;padding:18px 20px;margin:14px 0;background:#fff}.lesson-quiz legend{font-weight:700;padding:0 7px}.lesson-quiz label{display:block;padding:9px 10px;margin:4px 0;border-radius:9px;cursor:pointer}.lesson-quiz label:hover{background:#fff4f3}.lesson-quiz input{accent-color:#df7c86;margin-right:9px}.quiz-submit{border:0;cursor:pointer;margin-top:12px}.quiz-result{margin-top:16px;padding:14px 17px;border-radius:13px;min-height:10px}.quiz-success{background:#edf8ef;color:#285b35}.quiz-warning{background:#fff4e5;color:#76501a}.quiz-result strong{font-size:22px}
.lesson-next{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 30px;border-radius:22px;background:#fff2f1}.lesson-next h2{font-size:24px;margin:7px 0}.lesson-next p{margin:0;color:#716b70}.next-symbol{font-size:52px;color:#df7c86}
@media(max-width:760px){.lesson-hero{padding:42px 0}.lesson-layout{grid-template-columns:1fr;gap:24px}.lesson-sidebar{position:static}.lesson-side-card{display:flex;overflow-x:auto;gap:6px;white-space:nowrap;padding:12px}.lesson-side-card .teacher-kicker{display:none}.lesson-side-card a{font-size:12px;padding:8px}.goal-grid,.vocab-grid{grid-template-columns:1fr}.vocab-item{align-items:flex-start}.lesson-block{padding-bottom:34px;margin-bottom:32px}.grammar-card{padding:17px}.lesson-next{padding:21px}.lesson-next h2{font-size:20px}}

/* Interactive lessons dropdown */
.nav-dropdown{position:relative;display:flex;align-items:center}
.nav-dropdown-toggle{white-space:nowrap}
.nav-dropdown-toggle span{font-size:15px;color:var(--pink);margin-left:3px}
.nav-dropdown-menu{display:none;position:absolute;top:100%;left:-14px;min-width:230px;padding:9px;background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:0 14px 35px rgba(45,30,34,.12);z-index:20}
.nav-dropdown-menu a{display:block;padding:11px 13px;border-radius:9px;white-space:nowrap}
.nav-dropdown-menu a:hover{background:#fff2f1}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu{display:block}
.tests-page{padding:64px 0 90px;background:linear-gradient(180deg,#fffaf9,#fffdfc 380px)}
.tests-intro{max-width:850px;margin:0 auto 36px;text-align:center}
.tests-kicker{font-size:12px;font-weight:700;letter-spacing:1.5px;color:#df7c86}
.tests-intro h1{font-size:clamp(38px,5vw,58px);max-width:none;margin:12px 0 16px;letter-spacing:-1.5px}
.tests-intro p{font-size:18px;color:var(--muted);max-width:730px;margin:auto}
.tests-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:36px 0 44px}
.test-level{display:flex;flex-direction:column;gap:9px;min-height:175px;padding:23px;border:1px solid var(--line);border-radius:20px;background:#fff}
.test-level.active{border-color:#e9a0a5;box-shadow:0 10px 28px rgba(233,130,139,.10)}
.level-label{font-size:12px;font-weight:bold;letter-spacing:1px;color:#df7c86}
.test-level strong{font-size:20px}.test-level small{color:var(--muted);font-size:14px}.level-cta{margin-top:auto;color:#d96f79;font-weight:bold}.coming{margin-top:auto;color:#aaa;font-size:13px}
.test-box{max-width:900px;margin:auto;padding:clamp(22px,4vw,42px);border:1px solid var(--line);border-radius:26px;background:#fff;box-shadow:0 14px 40px rgba(55,35,38,.045)}
.test-box-head{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:24px;padding-bottom:22px;border-bottom:1px solid #f0e7e7}
.test-box-head h2{font-size:30px;line-height:1.15;margin:8px 0}.test-box-head p{margin:0;color:var(--muted)}
.test-count{width:68px;height:68px;flex:0 0 68px;border-radius:50%;display:grid;place-content:center;text-align:center;background:#fff0ef;color:#d96f79;font-size:22px;font-weight:bold;line-height:1.05}.test-count small{font-size:10px;font-weight:normal}
.quiz-question{padding:21px 0;border-bottom:1px solid #f0e9e9}.quiz-question h3{font-size:18px;margin:0 0 13px}.quiz-question label{display:flex;align-items:flex-start;gap:10px;padding:10px 13px;margin:7px 0;border:1px solid #eee7e7;border-radius:12px;cursor:pointer;color:#514c51}.quiz-question label:hover{border-color:#e9a0a5;background:#fffafa}.quiz-question input{accent-color:#df7c86;margin-top:4px}
.quiz-submit{border:0;cursor:pointer;margin-top:26px}.quiz-result{display:none;margin-top:22px;padding:22px;border-radius:18px;background:#fff4f3}.quiz-result.visible,.quiz-result.incomplete{display:block}.quiz-result strong{font-size:21px}.quiz-score{font-size:38px;font-weight:800;color:#d96f79;margin:8px 0}.quiz-result p{color:#6f686e}.quiz-retry{border:0;background:#242329;color:white;border-radius:24px;padding:11px 19px;cursor:pointer}.tests-note{max-width:900px;margin:22px auto 0;color:#8a8287;font-size:13px}
@media(max-width:760px){.nav-dropdown{flex:0 0 auto}.nav-dropdown-menu{position:fixed;top:auto;left:17px;right:17px;min-width:0}.tests-page{padding:42px 0 60px}.tests-levels{grid-template-columns:1fr}.test-level{min-height:140px}.test-box-head h2{font-size:24px}.tests-intro p{font-size:16px}.quiz-question h3{font-size:16px}}

/* v13: interactive tests and video-course page alignment */

/* v14: N3 diagnostic quiz */

/* v15: answer review and explanations for N5/N4/N3 */


/* Calendly online booking */
.booking-section{background:linear-gradient(180deg,#fffdfc 0%,#fff8f7 100%)}
.booking-timezone-note{max-width:900px;margin:0 auto 22px;padding:20px 24px;border:1px solid #f0d9da;border-radius:18px;background:#fff1ef;color:#625b60}
.booking-timezone-note strong{display:block;font-size:17px;color:#29262b;margin-bottom:6px}
.booking-timezone-note p{margin:0;line-height:1.65}
.calendly-inline-widget{width:100%;max-width:1000px;margin:0 auto;border:1px solid #f0e4e4;border-radius:18px;overflow:hidden;background:#fff}
@media(max-width:760px){.booking-timezone-note{padding:17px 18px}.calendly-inline-widget{height:800px!important;border-radius:14px}}

/* v17 homepage actions and booking follow-up */
.card-action-note{font-size:13px!important;margin:6px 0 14px!important;color:#8a7e83!important}.card-book-button{margin-top:17px}.booking-telegram{text-align:center;margin:24px auto 0;padding:24px;border-radius:18px;background:#fff7f6;max-width:720px}.booking-telegram p{margin:0 0 14px;color:#625b60}.booking-timezone-note{margin:24px auto 0}

/* v18: homepage navigation, booking choices and mascot accents */
.hero:after{display:none!important}
.hero{background:radial-gradient(ellipse at 72% 42%,#fff0ef 0,#fff9f8 38%,transparent 67%),linear-gradient(100deg,#fffdfc,#fff9f8)}
.benefits .benefit{color:inherit;text-decoration:none;transition:background .2s,transform .2s;border-radius:16px}
.benefits .benefit:hover{background:#fff5f4;transform:translateY(-2px)}
.benefit-icon{font-family:inherit}
.mascot-card{position:relative;overflow:hidden;padding-bottom:28px}
.mascot-sticker{position:absolute;width:88px;height:88px;object-fit:contain;right:12px;top:8px;border-radius:50%;opacity:.96;pointer-events:none}
.mascot-card h3,.mascot-card p,.mascot-card .price,.mascot-card>a,.mascot-card .card-action-note{position:relative;z-index:1;max-width:calc(100% - 76px)}
.mascot-card .mascot-sticker{max-width:none}
.booking-type-choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:900px;margin:24px auto 10px}
.booking-type{display:flex;flex-direction:column;gap:7px;padding:20px 24px;border:1px solid #f0d9da;border-radius:18px;background:#fff;text-decoration:none;color:#29262b;transition:transform .2s,box-shadow .2s}
.booking-type:hover{transform:translateY(-2px);box-shadow:0 10px 24px #d98c9220}
.booking-type strong{font-size:18px}.booking-type span{color:#d96f79;font-weight:700}.booking-type small{color:#7d7076;font-size:14px}
.booking-choice-hint{text-align:center;color:#786f74;font-size:14px;margin:8px auto 18px}
@media(max-width:760px){.booking-type-choice{grid-template-columns:1fr}.mascot-sticker{width:68px;height:68px;right:8px;top:8px}.mascot-card h3,.mascot-card p,.mascot-card .price,.mascot-card>a,.mascot-card .card-action-note{max-width:calc(100% - 54px)}}

.page-mascot{position:absolute;width:112px;height:112px;object-fit:contain;right:0;top:-12px;border-radius:50%;pointer-events:none}
.mascot-intro{position:relative;padding-right:125px!important;min-height:112px}
.tests-intro.mascot-intro{padding-right:125px!important}
@media(max-width:760px){.page-mascot{width:78px;height:78px;top:0}.mascot-intro,.tests-intro.mascot-intro{padding-right:88px!important;min-height:80px}}


/* v19 project overview and teacher card */
.project-overview{background:linear-gradient(135deg,#fff9f8 0%,#fff2f2 100%)}
.project-overview-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:36px;align-items:center}
.project-overview-copy h2{font-size:clamp(28px,3vw,40px);line-height:1.15;margin:10px 0 16px}
.project-overview-copy>p{font-size:17px;line-height:1.75;color:#716b70;max-width:850px}
.project-benefits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;padding:0;margin:22px 0;list-style:none}
.project-benefits li{position:relative;padding-left:28px;color:#514b50;line-height:1.55}
.project-benefits li:before{content:'✓';position:absolute;left:0;top:0;color:#dc7781;font-weight:800}
.project-links{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:22px}
.project-links a,.home-teacher-card a{color:#c85e6d;font-weight:700;text-decoration:none}
.project-links a:hover,.home-teacher-card a:hover{text-decoration:underline}
.project-mascot{width:100%;max-width:250px;height:auto;object-fit:contain;justify-self:center}
.home-teacher-card{display:flex;align-items:center;gap:22px;max-width:600px;margin:0 auto;padding:22px 28px;background:#fff;border:1px solid #f0e1e2;border-radius:22px;box-shadow:0 10px 28px rgba(55,35,38,.04)}
.home-teacher-card img{width:92px;height:92px;object-fit:contain}
.home-teacher-card h3{font-size:24px;margin:0 0 4px}
.home-teacher-card p{margin:0 0 10px;color:#716b70}
@media(max-width:760px){.project-overview-grid{grid-template-columns:1fr}.project-mascot{max-width:170px;grid-row:1}.project-benefits{grid-template-columns:1fr}.project-links{display:grid;gap:12px}.home-teacher-card{padding:18px;gap:14px}.home-teacher-card img{width:76px;height:76px}}

/* v20: interactive lessons hub and contacts page */
.learning-hub-intro{text-align:center;max-width:760px;margin:0 auto 32px}.learning-hub-intro h2{font-size:clamp(27px,3vw,36px);margin:0 0 10px}.learning-hub-intro p{color:var(--muted);margin:0}
.learning-hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.learning-card{position:relative;overflow:hidden;min-height:310px;padding:30px;border:1px solid #eee1e2;border-radius:24px;background:linear-gradient(145deg,#fff 0%,#fff7f6 100%);box-shadow:0 10px 30px rgba(55,35,38,.035)}.learning-card>img{display:block;width:92px;height:92px;object-fit:contain;margin:0 0 14px auto}.learning-card h2{font-size:22px;line-height:1.2;margin:8px 0 12px}.learning-card p{color:#716b70;line-height:1.65;min-height:78px;margin:0 0 20px}.learning-card .button{display:inline-flex;margin-top:auto}.learning-hub-note{max-width:850px;margin:34px auto 0;padding:22px 26px;border-radius:18px;background:#fff1f0;color:#625b60;text-align:center}.learning-hub-note strong{color:#29262b}.learning-hub-note p{margin:6px 0 0}
.contacts-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:1000px;margin:0 auto}.contact-card{display:block;position:relative;padding:28px;border:1px solid #eee1e2;border-radius:22px;background:#fff;text-decoration:none;color:#29262b;transition:transform .2s,box-shadow .2s}.contact-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(55,35,38,.07)}.contact-card h2{font-size:23px;margin:8px 0}.contact-card p{color:#716b70;line-height:1.6;min-height:52px}.contact-card strong{color:#c85e6d}.contact-icon{display:grid;place-items:center;width:52px;height:52px;margin-bottom:16px;border-radius:50%;background:#fff0ef;color:#c85e6d;font-size:25px}.contact-primary{background:linear-gradient(135deg,#fff1f0,#fff)}.contacts-mascot{display:flex;align-items:center;justify-content:center;gap:18px;margin:30px auto 0;color:#716b70;font-size:18px}.contacts-mascot img{width:95px;height:95px;object-fit:contain}
@media(max-width:760px){.learning-hub-grid,.contacts-grid{grid-template-columns:1fr}.learning-card{min-height:0;padding:23px}.learning-card p{min-height:0}.contacts-mascot{font-size:16px}}

/* v21: creator channels, lesson/test mascots and FAQ page */
.channels-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:1120px;margin:0 auto}
.channel-card{display:block;padding:25px;border:1px solid #eee1e2;border-radius:22px;background:#fff;transition:transform .2s,box-shadow .2s}
.channel-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(55,35,38,.07)}
.channel-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fff0ef;color:#c85e6d;font-size:25px}
.channel-card h3{font-size:20px;margin:15px 0 8px}.channel-card p{color:#716b70;line-height:1.6;min-height:76px}.channel-card strong{color:#c85e6d}
.channels-mascot{display:flex;align-items:center;justify-content:center;gap:15px;margin:28px auto 0;color:#716b70}.channels-mascot img{width:85px;height:85px;object-fit:contain}
.lesson-hero-inner{position:relative;padding-right:145px}.lesson-hero-mascot{position:absolute;right:8px;top:0;width:125px;height:125px;object-fit:contain}
.lesson-welcome-mascot{display:flex;align-items:center;gap:12px;padding:12px 18px;margin:0 0 24px;border-radius:18px;background:#fff3f2;color:#756b70}.lesson-welcome-mascot img{width:62px;height:62px;object-fit:contain}
.test-box-head{position:relative}.test-mascot{width:88px;height:88px;object-fit:contain;flex:0 0 88px;margin-right:18px}
.faq-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:28px;align-items:start;max-width:1120px}
.faq-list{display:grid;gap:13px}.faq-item{padding:20px 23px;border:1px solid #eee1e2;border-radius:18px;background:#fff}.faq-item summary{cursor:pointer;font-size:18px;font-weight:700;list-style:none;padding-right:25px;position:relative}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:"＋";position:absolute;right:0;top:0;color:#d87580}.faq-item[open] summary:after{content:"−"}.faq-item p{color:#716b70;line-height:1.7;margin:14px 0 0}.faq-aside{position:sticky;top:20px;padding:24px;border-radius:22px;background:#fff2f1;text-align:center}.faq-aside img{width:125px;height:125px;object-fit:contain}.faq-aside h2{font-size:22px;margin:10px 0}.faq-aside p{color:#716b70;line-height:1.55}
@media(max-width:760px){.channels-grid{grid-template-columns:1fr}.channel-card p{min-height:0}.lesson-hero-inner{padding-right:0}.lesson-hero-mascot{position:static;float:right;width:82px;height:82px;margin:0 0 8px 12px}.lesson-welcome-mascot{font-size:13px}.test-mascot{width:62px;height:62px;flex-basis:62px;margin-right:10px}.faq-layout{grid-template-columns:1fr}.faq-aside{position:static}.faq-item{padding:17px}.faq-item summary{font-size:16px}}

.lesson-next{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 30px;border:1px solid #f0dddd;border-radius:20px;background:#fff8f7;color:inherit;text-decoration:none;transition:transform .2s,box-shadow .2s}.lesson-next:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(120,70,80,.08)}.lesson-next h2{margin:7px 0;font-size:24px}.lesson-next p{margin:0;color:#797279}.lesson-prev{margin-top:22px}.lesson-prev a{color:#c96575;font-weight:600}


/* Lesson quizzes use the same submit-and-review flow as the N5/N4/N3 diagnostics. */
.lesson-quiz .quiz-submit { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:13px 25px; border:0; cursor:pointer; }
.lesson-quiz label.is-correct { display:block; padding:8px 12px; border-radius:10px; background:#e8f6ec; border:1px solid #9bd3a8; }
.lesson-quiz label.is-wrong { display:block; padding:8px 12px; border-radius:10px; background:#fff0f0; border:1px solid #e7a0a0; }
.lesson-quiz-feedback { margin:12px 0 18px; padding:14px 16px; border-radius:12px; background:#fff8f7; border:1px solid #efd6d8; color:var(--ink,#29252a); }
.lesson-quiz-feedback p { margin:7px 0 0; }
.lesson-quiz .quiz-result.incomplete { display:block; margin-top:16px; padding:14px 16px; border-radius:12px; background:#fff5e9; }
.lesson-quiz .quiz-result.visible { display:block; margin-top:18px; padding:18px; border-radius:14px; background:#fff7f6; }
.lesson-quiz .quiz-score { font-size:1.8rem; font-weight:800; color:var(--accent,#d97989); margin:6px 0; }
.lesson-quiz .quiz-retry { margin-top:10px; padding:10px 18px; border:0; border-radius:24px; cursor:pointer; background:var(--accent,#d97989); color:#fff; }

/* Interactive learning hub section groups */
.learning-hub-category{margin:46px 0 54px;padding-top:30px;border-top:1px solid #f0e2e3}.learning-hub-category>.learning-hub-intro{margin-bottom:25px}.learning-hub-category>.learning-hub-intro .teacher-kicker{display:inline-block;margin-bottom:7px}.learning-hub-category .learning-hub-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.learning-hub-category .learning-card{min-height:290px}.learning-hub-category .learning-card p{min-height:68px}@media(max-width:760px){.learning-hub-category .learning-hub-grid{grid-template-columns:1fr}.learning-hub-category{margin:34px 0 40px;padding-top:22px}}

/* v30 — dedicated illustrated family vocabulary reference */
.family-reference .section{padding-top:34px}.family-rule{display:flex;align-items:center;gap:22px;padding:25px 30px;margin:0 auto 34px;max-width:1060px;border:1px solid #f1d9df;border-radius:24px;background:linear-gradient(120deg,#fff2f4,#fffaf8)}.family-rule>img{width:105px;height:105px;object-fit:contain;flex:0 0 auto}.family-rule h2{font-size:clamp(22px,2.5vw,30px);margin:5px 0 8px}.family-rule p{color:#655e63;line-height:1.7;margin:0}.family-two-columns{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}.family-usage{border:1px solid #efdee1;border-radius:24px;padding:22px;background:#fff;box-shadow:0 9px 28px rgba(65,40,48,.04)}.family-own{background:linear-gradient(160deg,#fff,#fff8f5)}.family-other{background:linear-gradient(160deg,#fff,#fff5f8)}.family-usage-head{display:flex;align-items:center;gap:15px;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid #f1e4e6}.family-usage-head img{width:76px;height:76px;object-fit:contain}.family-usage-head h2{font-size:23px;margin:3px 0}.family-usage-head p{font-size:13px;color:#8b7880;margin:0}.family-word-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.family-word{min-height:116px;padding:14px 10px;border:1px solid #f0e3e5;border-radius:16px;background:rgba(255,255,255,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.family-jp{display:block;font-size:24px;font-weight:750;color:#382b32;line-height:1.35}.family-kana{display:block;font-size:12px;color:#a45e76;margin:4px 0 5px;letter-spacing:.01em}.family-word strong{font-size:13px;color:#6d6268}.family-examples{margin:38px 0 30px;padding:25px;border-radius:24px;background:#fff7f6;border:1px solid #f0dfe2}.family-examples-title{display:flex;align-items:center;gap:15px;margin-bottom:20px}.family-examples-title img{width:78px;height:78px;object-fit:contain}.family-examples-title h2,.family-extra h2{font-size:25px;margin:4px 0}.family-example-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.family-example{padding:18px;border-radius:16px;background:#fff;border:1px solid #f1e5e6}.family-example .family-jp{font-size:21px}.family-example p{font-size:14px;color:#6b6267;margin:6px 0 0}.family-extra{margin:34px 0}.family-extra h2{text-align:center;margin-bottom:20px}.family-extra-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.family-extra-item{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:16px;border:1px solid #f0e2e5;background:#fff}.family-extra-item img{width:54px;height:54px;object-fit:contain;flex:0 0 auto}.family-extra-item strong,.family-extra-item span{display:block}.family-extra-item strong{font-size:16px}.family-extra-item span{font-size:13px;color:#82747b;margin-top:3px}.family-notice{display:flex;align-items:center;gap:17px;padding:21px 25px;border-radius:18px;background:#fff0ed;border:1px solid #f2d8d6;color:#5e555a;line-height:1.65}.family-notice img{width:70px;height:70px;object-fit:contain;flex:0 0 auto}.family-notice strong{color:#3d3037;font-size:17px}.family-notice p{margin:4px 0 0}.family-back{text-align:center;margin:32px 0 0}.learning-hub-library{margin-bottom:12px}
@media(max-width:850px){.family-two-columns{grid-template-columns:1fr}.family-extra-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.family-rule{align-items:flex-start;padding:18px;gap:12px}.family-rule>img{width:70px;height:70px}.family-usage{padding:15px}.family-word{min-height:108px}.family-word .family-jp{font-size:21px}.family-example-grid,.family-extra-grid{grid-template-columns:1fr}.family-examples{padding:17px}.family-notice{align-items:flex-start;padding:16px}.family-notice img{width:52px;height:52px}}

/* v31: separate useful-materials library and three family-language contexts */
.family-three-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
.family-address{background:linear-gradient(160deg,#fff,#fff5f8)}
.family-address .family-usage-head{border-color:#f1dce4}
.family-three-columns .family-usage{min-width:0}
.family-three-columns .family-word-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.family-three-columns .family-word{min-height:125px;padding:12px 8px}
.family-three-columns .family-jp{font-size:21px;overflow-wrap:anywhere}
.family-three-columns .family-usage-head{align-items:flex-start}
.family-three-columns .family-usage-head img{width:62px;height:62px}
.useful-material-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.useful-material-grid .learning-card{height:100%}
.useful-coming{opacity:.86}
.button-secondary{display:inline-flex;background:#f4edf0;color:#76636c;cursor:default}
@media(max-width:1050px){.family-three-columns{grid-template-columns:1fr 1fr}.family-address{grid-column:1/-1}.useful-material-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.family-three-columns,.useful-material-grid{grid-template-columns:1fr}.family-address{grid-column:auto}.family-three-columns .family-word-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* v32: standalone useful materials and detailed reference pages */
.reference-page .section{padding-top:30px}.reference-tip,.reference-example{display:flex;align-items:center;gap:18px;max-width:1050px;margin:0 auto 30px;padding:20px 24px;border:1px solid #f0dce1;border-radius:20px;background:linear-gradient(120deg,#fff1f4,#fffaf6);color:#655b61;line-height:1.65}.reference-tip img,.reference-example img{width:76px;height:76px;object-fit:contain;flex:0 0 auto}.reference-tip strong,.reference-example strong{display:block;color:#3d3037;font-size:18px}.reference-tip p,.reference-example p{margin:5px 0 0}.reference-block{margin:38px 0;padding:25px;border:1px solid #f0e1e4;border-radius:24px;background:#fff;box-shadow:0 8px 28px rgba(55,35,38,.035)}.reference-heading{display:flex;align-items:center;gap:16px;margin-bottom:20px}.reference-heading img{width:76px;height:76px;object-fit:contain;flex:0 0 auto}.reference-heading h2{font-size:clamp(22px,2.5vw,29px);margin:3px 0 6px}.reference-heading p{color:#776d73;margin:0;line-height:1.55}.reference-table-wrap{overflow-x:auto;border:1px solid #f0e2e5;border-radius:14px}.reference-table{width:100%;border-collapse:collapse;min-width:520px;font-size:14px}.reference-table th{padding:12px 13px;text-align:left;background:#fbe8ed;color:#533744;font-weight:750}.reference-table td{padding:10px 13px;border-top:1px solid #f2e8ea;color:#51484e;line-height:1.5}.reference-table tbody tr:nth-child(even){background:#fffaf9}.reference-table td:nth-child(2){font-size:17px;font-weight:700;color:#3e3038}.reference-two-tables{display:grid;grid-template-columns:1fr 1fr;gap:16px}.reference-example{margin:32px auto 20px;background:#fff7ef}.reference-example p{margin:7px 0}.reference-back{text-align:center;margin:28px 0}.useful-material-grid .learning-card{min-height:340px}.useful-material-grid .learning-card p{min-height:100px}
@media(max-width:760px){.reference-two-tables{grid-template-columns:1fr}.reference-block{padding:17px;margin:26px 0}.reference-heading{align-items:flex-start}.reference-heading img{width:58px;height:58px}.reference-tip,.reference-example{align-items:flex-start;padding:16px}.reference-tip img,.reference-example img{width:55px;height:55px}.reference-table{min-width:480px}}

/* Global teacher invitation widget */
.yap-teacher-widget{position:fixed;z-index:99990;right:24px;bottom:22px;width:min(430px,calc(100vw - 28px));font-family:inherit;color:#42172a}
.yap-teacher-card{position:relative;display:grid;grid-template-columns:94px minmax(0,1fr);gap:14px;align-items:center;padding:18px 18px 16px;background:linear-gradient(145deg,#fffdfd 0%,#fff0f5 100%);border:1px solid #f4c6d5;border-radius:23px;box-shadow:0 12px 42px rgba(111,42,70,.2);}
.yap-teacher-avatar{width:94px;height:94px;border-radius:50%;object-fit:cover;object-position:center 34%;border:4px solid #ef7296;box-shadow:0 3px 12px rgba(220,90,130,.2);background:#fff0f5}
.yap-teacher-copy{min-width:0;padding-right:18px}.yap-teacher-greeting{font-size:19px;font-weight:800;line-height:1.2;margin:0 0 5px;color:#5a1835}.yap-teacher-copy p{font-size:13px;line-height:1.45;margin:0;color:#654453}.yap-teacher-name{color:#d94f7a;font-weight:800}
.yap-teacher-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px}.yap-teacher-actions a{display:flex;justify-content:center;align-items:center;min-height:42px;padding:9px 10px;border-radius:13px;text-decoration:none!important;font-size:13px;font-weight:750;line-height:1.2;text-align:center;transition:transform .18s,box-shadow .18s}.yap-teacher-actions a:hover{transform:translateY(-2px);box-shadow:0 5px 14px rgba(180,60,100,.15)}.yap-teacher-book{background:linear-gradient(110deg,#ec5b83,#e8799b);color:#fff!important}.yap-teacher-message{background:#fff;border:1px solid #e9a9bf;color:#7a2948!important}.yap-teacher-profile{grid-column:1/-1;display:block;text-align:center;color:#9a4262!important;font-size:12px;font-weight:700;text-decoration:underline!important;text-underline-offset:3px;padding:1px 0 0}
.yap-teacher-close{position:absolute;right:9px;top:8px;width:27px;height:27px;border:0;border-radius:50%;background:#fff;color:#8b3a58;font-size:19px;line-height:1;cursor:pointer;box-shadow:0 1px 5px rgba(0,0,0,.08)}
.yap-teacher-launcher{display:none;margin-left:auto;width:62px;height:62px;border:3px solid #fff;border-radius:50%;padding:0;background:#ed6b91;box-shadow:0 5px 22px rgba(111,42,70,.25);cursor:pointer;overflow:hidden}.yap-teacher-launcher img{width:100%;height:100%;object-fit:cover;object-position:center 32%}.yap-teacher-widget.is-closed .yap-teacher-card{display:none}.yap-teacher-widget.is-closed .yap-teacher-launcher{display:block}
@media(max-width:600px){.yap-teacher-widget{right:12px;bottom:12px;width:min(360px,calc(100vw - 24px))}.yap-teacher-card{grid-template-columns:72px minmax(0,1fr);gap:10px;padding:14px 13px 12px;border-radius:19px}.yap-teacher-avatar{width:72px;height:72px}.yap-teacher-greeting{font-size:16px}.yap-teacher-copy p{font-size:12px}.yap-teacher-actions a{font-size:12px;min-height:40px;padding:8px 6px}.yap-teacher-launcher{width:56px;height:56px}}


/* v32.2 — Alex profile, friendly lesson guide and centered photo widget */
.yap-teacher-card{grid-template-columns:1fr;gap:12px;padding:16px 16px 14px}
.yap-teacher-top{display:grid;grid-template-columns:86px minmax(0,1fr);gap:13px;align-items:center;padding-right:20px}
.yap-teacher-avatar{width:86px;height:86px;object-fit:cover;object-position:50% 42%;display:block}
.yap-teacher-copy{padding:0}
.yap-teacher-greeting{font-size:20px}
.yap-teacher-copy p{font-size:13px}
.yap-teacher-actions{grid-template-columns:1fr 1fr;gap:8px}
.yap-teacher-profile{grid-column:1/-1}
.yap-teacher-launcher img{object-position:50% 40%}
.teacher-small-note{font-size:12px;color:#8c7780;margin-top:-8px}
.about-hobby-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.about-hobby-card{display:flex;align-items:flex-start;gap:14px;padding:20px;border:1px solid #f0dfe4;border-radius:20px;background:linear-gradient(145deg,#fff,#fff7f8);box-shadow:0 6px 22px rgba(80,40,50,.04)}
.about-hobby-card>img{width:76px;height:76px;object-fit:contain;flex:0 0 auto}
.about-hobby-card h3{font-size:18px;margin:2px 0 8px;color:#583044}
.about-hobby-card p{font-size:14px;line-height:1.65;color:#6c5c64;margin:0 0 8px}
.about-hobby-card .text-link{font-weight:700;color:#d6537e}
.about-results-inner,.about-start-inner,.about-final-inner{display:flex;align-items:center;gap:24px;padding:24px;border:1px solid #f0dce2;border-radius:24px;background:linear-gradient(120deg,#fff3f6,#fffaf6)}
.about-results-inner>img,.about-start-inner>img,.about-final-inner>img{width:112px;height:112px;object-fit:contain;flex:0 0 auto}
.about-results-inner h2,.about-start-inner h2,.about-final-inner h2{margin:0 0 9px;color:#5b2d42;font-size:25px}
.about-results-inner p,.about-start-inner p,.about-final-inner p{margin:0 0 14px;color:#6d5e65;line-height:1.7}
.about-comfort{display:flex;align-items:center;gap:20px;margin:22px 0 26px;padding:22px 25px;border-radius:22px;background:#fff4f6;border:1px solid #f1dce3}
.about-comfort>img{width:95px;height:95px;object-fit:contain;flex:0 0 auto}
.about-comfort h3{font-size:21px;margin:0 0 8px;color:#5b2d42}
.about-comfort p{margin:0;line-height:1.75;color:#6c5d64}
.about-format-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.about-format-card{padding:21px;border:1px solid #f0dfe4;border-radius:20px;background:#fff;text-align:center}
.about-format-card>span{display:block;font-size:32px;margin-bottom:8px}
.about-format-card h3{margin:0 0 8px;color:#5b2d42;font-size:18px}
.about-format-card p{margin:0;color:#6c5d64;font-size:14px;line-height:1.65}
.about-rule{margin-top:17px;padding:18px 22px;border-radius:17px;background:linear-gradient(90deg,#ffe8ef,#fff3e9);text-align:center;color:#873e5b;font-size:18px}
.about-final-inner{background:linear-gradient(110deg,#fff0f5,#fff9f0);justify-content:center;text-align:left}
.about-final-inner .button{display:inline-flex}
@media(max-width:900px){.about-hobby-grid{grid-template-columns:1fr 1fr}.about-format-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){
 .yap-teacher-card{padding:13px 12px 11px}
 .yap-teacher-top{grid-template-columns:68px minmax(0,1fr);gap:10px}
 .yap-teacher-avatar{width:68px;height:68px}
 .yap-teacher-greeting{font-size:16px}
 .yap-teacher-copy p{font-size:11px}
 .yap-teacher-actions{grid-template-columns:1fr 1fr}
 .about-hobby-grid,.about-format-grid{grid-template-columns:1fr}
 .about-hobby-card{padding:16px}
 .about-hobby-card>img{width:60px;height:60px}
 .about-results-inner,.about-start-inner,.about-final-inner,.about-comfort{align-items:flex-start;padding:17px;gap:12px}
 .about-results-inner>img,.about-start-inner>img,.about-final-inner>img,.about-comfort>img{width:60px;height:60px}
 .about-results-inner h2,.about-start-inner h2,.about-final-inner h2{font-size:21px}
 .about-comfort h3{font-size:18px}
 .about-rule{font-size:15px;padding:15px}
}

/* v32.3 — photo gallery, clean mascot framing and site-matched invitation widget */
.yap-teacher-card{background:linear-gradient(145deg,#fffdfc 0%,#fff8f7 100%);border-color:#eadfe0;color:var(--ink);box-shadow:0 12px 42px rgba(111,42,70,.16)}
.yap-teacher-avatar{object-fit:cover;object-position:center;border-color:var(--pink);background:#dadad8}
.yap-teacher-greeting{color:#5b2d42}
.yap-teacher-copy p{color:#706b70}
.yap-teacher-book{background:var(--pink)}
.yap-teacher-message{border-color:#e8b8bd;color:#70444b!important}
.yap-teacher-profile{color:#a85c66!important}
.yap-teacher-launcher{background:var(--pink)}
.alex-photo-gallery{background:#fff8f7;padding-top:62px;padding-bottom:70px}
.alex-gallery{position:relative;max-width:1040px;margin:0 auto;padding:0 58px 34px}
.alex-gallery-viewport{overflow:hidden;border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:0 12px 35px rgba(70,45,48,.08)}
.alex-gallery-track{display:flex;transition:transform .35s ease;will-change:transform}
.alex-gallery-slide{margin:0;flex:0 0 100%;height:clamp(300px,58vw,620px);display:flex;align-items:center;justify-content:center;background:#f4f1ef}
.alex-gallery-slide img{display:block;width:100%;height:100%;object-fit:contain}
.alex-gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border:1px solid #eadfe0;border-radius:50%;background:#fff;color:#8e4658;font-size:32px;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(60,30,40,.12)}
.alex-gallery-arrow.prev{left:0}.alex-gallery-arrow.next{right:0}.alex-gallery-arrow:disabled{opacity:.35;cursor:default}
.alex-gallery-count{position:absolute;bottom:0;left:0;right:0;text-align:center;color:#85777c;font-size:13px}
/* Each mascot is clipped to its own image box so adjacent artwork cannot peek out. */
.about-hobby-card,.about-comfort,.about-results-inner,.about-start-inner,.about-final-inner,.teacher-copy{min-width:0;overflow:hidden}
.about-hobby-card>img,.about-comfort>img,.about-results-inner>img,.about-start-inner>img,.about-final-inner>img,.page-mascot{object-fit:contain;overflow:hidden;clip-path:inset(0 round 12px)}
@media(max-width:600px){.alex-gallery{padding-left:38px;padding-right:38px}.alex-gallery-arrow{width:34px;height:34px;font-size:26px}.alex-gallery-slide{height:clamp(250px,90vw,480px)}.alex-gallery-viewport{border-radius:16px}}

/* v33 — integrated teacher photo carousel and clean mascot cards */
.alex-hero-gallery{padding:14px;overflow:hidden;min-width:0}
.alex-hero-viewport{overflow:hidden;border-radius:20px;background:#d8d8d8;aspect-ratio:4/5}
.alex-hero-track{display:flex;height:100%;transition:transform .35s ease;will-change:transform}
.alex-hero-slide{flex:0 0 100%;height:100%;margin:0;display:flex;align-items:center;justify-content:center;background:#d8d8d8}
.alex-hero-slide img{width:100%;height:100%;object-fit:contain;display:block}
.alex-hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:38px;height:38px;border:1px solid #eadde0;border-radius:50%;background:rgba(255,255,255,.94);color:#9d536b;font-size:27px;line-height:1;cursor:pointer;box-shadow:0 3px 12px rgba(70,45,48,.12)}
.alex-hero-arrow.prev{left:20px}.alex-hero-arrow.next{right:20px}
.alex-hero-arrow:disabled{opacity:.35;cursor:default}
.alex-hero-count{position:absolute;right:24px;top:22px;padding:5px 9px;border-radius:20px;background:rgba(255,255,255,.86);font-size:11px;color:#765d66}
.teacher-portrait-wrap .teacher-caption{z-index:2}
.teacher-detail .detail-mascot{display:block;width:76px;height:76px;object-fit:contain;object-position:center;margin:0 0 12px}
.teacher-detail{min-width:0}
.yap-teacher-card{background:linear-gradient(145deg,#fffafa 0%,#fff3f6 100%);border-color:#f0d7df}
.yap-teacher-avatar{width:112px;height:112px;object-fit:cover;object-position:center;background:#d8d8d8}
.yap-teacher-top{grid-template-columns:112px minmax(0,1fr);gap:14px}
.yap-teacher-launcher img{object-fit:cover;object-position:center;background:#d8d8d8}
@media(max-width:760px){
 .alex-hero-gallery{max-width:390px;margin:auto;width:100%}
 .alex-hero-arrow{width:34px;height:34px}
 .teacher-detail .detail-mascot{width:68px;height:68px}
}
@media(max-width:600px){
 .yap-teacher-top{grid-template-columns:90px minmax(0,1fr)}
 .yap-teacher-avatar{width:90px;height:90px}
}

/* v34 refinements from Alex's latest screenshots */
.yap-teacher-avatar{width:112px;height:112px;object-fit:contain;object-position:center;background:#d8d8d8;border:4px solid #ef7296}
.yap-teacher-launcher img{object-fit:contain;object-position:center;background:#d8d8d8}
.yap-teacher-top{grid-template-columns:112px minmax(0,1fr);align-items:center;gap:14px}
.format-mascot{display:block;width:82px;height:82px;object-fit:contain;margin:0 auto 9px}
.about-format-card>span{display:none}
.teacher-details{padding-bottom:24px}
.about-format.section{padding-top:28px;padding-bottom:34px}
.about-format .section-title{margin-bottom:22px}
@media(max-width:600px){
 .yap-teacher-top{grid-template-columns:92px minmax(0,1fr)}
 .yap-teacher-avatar{width:92px;height:92px}
 .format-mascot{width:74px;height:74px}
 .teacher-details{padding-bottom:18px}
 .about-format.section{padding-top:22px;padding-bottom:28px}
}

/* v35 — exact circular popup portrait and tighter teacher-page rhythm */
.yap-teacher-avatar,
.yap-teacher-launcher img{
  display:block;
  width:104px;height:104px;
  border:0 !important;
  padding:0 !important;
  border-radius:50%;
  object-fit:contain !important;
  object-position:center !important;
  background:transparent !important;
  box-shadow:none !important;
}
.yap-teacher-launcher{width:66px;height:66px;overflow:hidden;border-radius:50%;padding:0}
.yap-teacher-launcher img{width:100%;height:100%}
.about-hobbies.section{padding-top:28px !important;margin-top:0 !important}
.about-hobbies .section-title{margin-top:0}
.about-hobby-card h3{margin-top:2px}
@media(max-width:600px){
 .yap-teacher-avatar{width:82px;height:82px}
}

/* v36 — teacher page final spacing and popup copy */
.about-start.section{padding-bottom:18px !important}
.about-hobbies.section{padding-top:18px !important}

/* v38: keep the Japanese label inside its benefit icon */
.benefit-icon{white-space:nowrap;overflow:hidden;font-size:19px;letter-spacing:-1px;line-height:1}
/* RU / EN language switcher */
.lang a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:#6f6870;min-width:38px}.lang a.active{background:#25242a;color:#fff}.lang a:not(.active):hover{background:#f8e8ec;color:#8f4258}

/* v46 — compact, genuinely mobile header and teacher invitation */
@media(max-width:760px){
  html,body{max-width:100%;overflow-x:hidden}
  .site-header{height:auto;min-height:0;padding:8px 0 5px;overflow:hidden}
  .head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 8px;padding:3px 0}
  .brand{grid-column:1;grid-row:1;display:flex;align-items:center;gap:7px;min-width:0;width:auto;flex:initial}
  .brand img{width:42px;height:42px;flex:0 0 42px}
  .brand strong{font-size:16px;line-height:1.05;white-space:nowrap}
  .brand small{font-size:9px;line-height:1.2;max-width:145px}
  .right-head{grid-column:2;grid-row:1;display:flex;align-items:center;gap:0;min-width:0;margin:0}
  .right-head .button{display:none}
  .lang{padding:2px;border-radius:20px}
  .lang a,.lang span{min-width:29px;padding:5px 8px;font-size:11px;line-height:1.1}
  .nav{grid-column:1/-1;grid-row:2;order:initial;display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:7px 14px;width:100%;min-width:0;max-width:100%;padding:7px 1px 5px;margin:0;overflow-x:auto;overflow-y:hidden;white-space:nowrap;font-size:11px;line-height:1.25;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav::-webkit-scrollbar{display:none}
  .nav>a,.nav .nav-dropdown-toggle{font-size:11px;white-space:nowrap}
  .nav-dropdown{flex:0 0 auto}
  .nav-dropdown-menu{left:8px;right:8px;top:auto;max-width:calc(100vw - 16px)}
  .yap-teacher-widget{right:10px;bottom:10px;left:auto;width:min(278px,calc(100vw - 20px));max-width:calc(100vw - 20px)}
  .yap-teacher-card{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:11px 11px 9px;border-radius:17px;box-shadow:0 7px 24px rgba(111,42,70,.18)}
  .yap-teacher-top{grid-template-columns:58px minmax(0,1fr);gap:9px;align-items:center;padding-right:18px}
  .yap-teacher-avatar{width:58px;height:58px;max-width:58px}
  .yap-teacher-greeting{font-size:14px;line-height:1.15;margin:0 0 3px}
  .yap-teacher-copy p{font-size:10.5px;line-height:1.3;margin:0}
  .yap-teacher-actions{grid-template-columns:1fr 1fr;gap:6px}
  .yap-teacher-actions a{min-height:34px;padding:6px 5px;border-radius:11px;font-size:10px;line-height:1.15}
  .yap-teacher-profile{font-size:10px;line-height:1.2;padding-top:0}
  .yap-teacher-close{right:6px;top:6px;width:23px;height:23px;font-size:16px}
  .yap-teacher-launcher{width:48px;height:48px}
}
@media(max-width:380px){
  .brand img{width:36px;height:36px;flex-basis:36px}
  .brand strong{font-size:14px}
  .brand small{font-size:8px;max-width:120px}
  .lang a,.lang span{min-width:26px;padding:5px 6px;font-size:10px}
  .yap-teacher-widget{width:min(258px,calc(100vw - 18px));right:9px;bottom:9px}
  .yap-teacher-top{grid-template-columns:52px minmax(0,1fr);gap:7px}
  .yap-teacher-avatar{width:52px;height:52px;max-width:52px}
  .yap-teacher-greeting{font-size:13px}
  .yap-teacher-copy p{font-size:10px}
}


/* v47 — compact mobile navigation and persistent dismissed teacher invitation */
@media(max-width:760px){
  .site-header{overflow:visible;padding:7px 0 6px}
  .head{grid-template-columns:minmax(0,1fr) auto;gap:5px 7px}
  .nav{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    grid-column:1/-1;grid-row:2;gap:3px 5px;width:100%;
    padding:7px 0 4px;margin:0;overflow:visible;white-space:normal;
    align-items:stretch;justify-content:initial;font-size:10px;line-height:1.15
  }
  .nav>a,.nav .nav-dropdown-toggle{
    display:flex;align-items:center;justify-content:center;text-align:center;
    min-width:0;min-height:27px;padding:4px 3px;border-radius:8px;
    white-space:normal;overflow-wrap:anywhere;font-size:10px;line-height:1.15
  }
  .nav-dropdown{display:block;min-width:0;position:relative}
  .nav-dropdown-toggle span{font-size:11px;margin-left:3px;flex:0 0 auto}
  .nav-dropdown-menu{left:0;right:auto;top:100%;width:min(230px,calc(100vw - 32px));max-width:calc(100vw - 32px);z-index:100}
  .nav-dropdown-menu a{display:block;text-align:left;white-space:normal;font-size:12px}
  .yap-teacher-widget{right:9px;bottom:9px;left:auto;width:min(226px,calc(100vw - 18px));max-width:calc(100vw - 18px)}
  .yap-teacher-card{grid-template-columns:1fr;gap:6px;padding:9px 9px 8px;border-radius:15px}
  .yap-teacher-top{grid-template-columns:46px minmax(0,1fr);gap:7px;padding-right:16px}
  .yap-teacher-avatar{width:46px;height:46px;max-width:46px;border-width:2px}
  .yap-teacher-greeting{font-size:12px;line-height:1.12;margin-bottom:2px}
  .yap-teacher-copy p{font-size:9px;line-height:1.22}
  .yap-teacher-actions{grid-template-columns:1fr 1fr;gap:5px}
  .yap-teacher-actions a{min-height:29px;padding:5px 3px;border-radius:9px;font-size:9px;line-height:1.1}
  .yap-teacher-profile{font-size:9px;line-height:1.15;padding-top:0}
  .yap-teacher-close{right:5px;top:5px;width:20px;height:20px;font-size:14px}
  .yap-teacher-launcher{width:42px;height:42px;border-width:2px}
}
@media(max-width:380px){
  .nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 3px}
  .nav>a,.nav .nav-dropdown-toggle{font-size:9px;padding:3px 2px}
  .yap-teacher-widget{width:min(210px,calc(100vw - 16px));right:8px;bottom:8px}
  .yap-teacher-top{grid-template-columns:42px minmax(0,1fr);gap:6px}
  .yap-teacher-avatar{width:42px;height:42px;max-width:42px}
  .yap-teacher-copy p{font-size:8.5px}
  .yap-teacher-actions a{font-size:8.5px}
}

/* v48 — mobile layout hardening: prevent overlap and horizontal overflow */
@media (max-width:760px){
  *,*::before,*::after{box-sizing:border-box}
  html,body,#page,.site,.site-main,main{max-width:100%;min-width:0}
  .wrap{width:calc(100% - 28px);max-width:100%;min-width:0;margin-left:auto;margin-right:auto}
  img,svg,video,iframe{max-width:100%}
  p,li,small,strong,a,h1,h2,h3,h4,span{overflow-wrap:break-word;word-wrap:break-word}
  h1{font-size:clamp(30px,8vw,42px);line-height:1.08;letter-spacing:-.8px}
  h2{line-height:1.15}
  p{line-height:1.55}
  .mascot-intro,.tests-intro.mascot-intro{position:relative;padding:76px 0 0!important;min-height:0!important;text-align:left}
  .mascot-intro .page-mascot,.tests-intro.mascot-intro .page-mascot{position:absolute;top:0;right:0;width:64px;height:64px;object-fit:contain;margin:0;z-index:1}
  .mascot-intro .teacher-kicker,.mascot-intro .tests-kicker{display:block;max-width:calc(100% - 70px);font-size:10px;line-height:1.35;letter-spacing:1px}
  .mascot-intro h1,.tests-intro.mascot-intro h1{max-width:100%;font-size:clamp(31px,8vw,42px);line-height:1.08;margin:8px 0 13px;letter-spacing:-.8px}
  .mascot-intro p,.tests-intro.mascot-intro p{max-width:100%;font-size:16px;line-height:1.5;margin:0}
  .project-overview-grid,.project-overview-copy,.project-links,.learning-hub-grid,.cards,.channels-grid,.lesson-intro-grid,.lesson-price-grid,.lesson-steps,.tests-levels{min-width:0;max-width:100%}
  .project-links{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:9px!important;width:100%}
  .project-links>a{min-width:0;width:100%;white-space:normal;overflow-wrap:anywhere;padding:13px 14px;border-radius:14px}
  .learning-hub-grid,.learning-hub-category .learning-hub-grid,.useful-material-grid,.contacts-grid,.cards{grid-template-columns:minmax(0,1fr)!important}
  .learning-card,.test-level,.lesson-price-card,.channel-card,.mascot-card,.family-word,.reference-block{min-width:0;max-width:100%}
  .learning-card,.lesson-price-card,.mascot-card{padding:19px!important}
  .learning-card p,.lesson-price-card p,.mascot-card p{min-height:0!important;max-width:100%}
  .mascot-card h3,.mascot-card p,.mascot-card .price,.mascot-card>a,.mascot-card .card-action-note{max-width:100%!important}
  .mascot-sticker{width:58px;height:58px;right:8px;top:8px}
  .test-box{width:100%;max-width:100%;min-width:0;padding:18px 15px;border-radius:20px;overflow:hidden}
  .test-box-head{display:grid;grid-template-columns:54px minmax(0,1fr);gap:8px 11px;align-items:start;position:relative;padding:0 0 17px;margin-bottom:15px;min-width:0}
  .test-mascot{grid-column:1;grid-row:1 / span 2;width:54px;height:54px;max-width:54px;flex:initial;margin:0;object-fit:contain}
  .test-box-head>div:nth-child(2){grid-column:2;grid-row:1;min-width:0;padding-right:0}
  .test-box-head .tests-kicker{font-size:10px;letter-spacing:1px;line-height:1.3;overflow-wrap:anywhere}
  .test-box-head h2{font-size:clamp(20px,5.5vw,25px)!important;line-height:1.14;margin:6px 0 8px;overflow-wrap:anywhere}
  .test-box-head p{font-size:13px;line-height:1.4;margin:0;overflow-wrap:anywhere}
  .test-count{grid-column:2;grid-row:2;width:auto;height:auto;min-height:0;display:inline-flex;align-items:center;justify-content:flex-start;gap:5px;padding:5px 9px;border-radius:10px;font-size:13px;line-height:1.2;justify-self:start}
  .test-count small{font-size:11px}
  .quiz-question{min-width:0;padding:17px 0;overflow-wrap:anywhere}
  .quiz-question h3{font-size:15px!important;line-height:1.45;margin:0 0 10px;overflow-wrap:anywhere;word-break:normal}
  .quiz-question label{display:flex;align-items:flex-start;gap:8px;width:100%;min-width:0;padding:10px 9px;margin:7px 0;font-size:14px;line-height:1.45;overflow-wrap:anywhere;white-space:normal}
  .quiz-question label input{flex:0 0 16px;width:16px;max-width:16px;margin:3px 0 0}
  .quiz-submit{max-width:100%;white-space:normal;padding:12px 18px;font-size:14px}
  .test-level{padding:18px;min-height:0}
  .test-level strong{font-size:18px;line-height:1.25}
  .test-level small{font-size:13px;line-height:1.4}
  .reference-table{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .family-three-columns,.family-two-columns,.family-extra-grid,.family-example-grid{grid-template-columns:minmax(0,1fr)!important}
  .family-address{grid-column:auto!important}
  .nav{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:4px 6px!important}
  .nav>a,.nav .nav-dropdown-toggle{min-height:34px;padding:6px 4px;font-size:11px;line-height:1.2;overflow-wrap:anywhere}
  .nav-dropdown-menu{max-height:65vh;overflow-y:auto}
  .hero-copy,.hero-grid,.hero-visual,.section-title,.teacher-copy,.teacher-detail{min-width:0;max-width:100%}
  .hero-visual{height:clamp(210px,65vw,300px)}
  .mascot{max-width:100%;object-fit:contain}
  .teacher-facts,.benefits{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faq-item,.faq-item p,.teacher-note,.about-hobby-card,.about-format-card{min-width:0;max-width:100%;overflow-wrap:anywhere}
}
@media(max-width:420px){
  .wrap{width:calc(100% - 24px)}
  .test-box{padding:16px 12px}
  .test-box-head{grid-template-columns:46px minmax(0,1fr);gap:7px 9px}
  .test-mascot{width:46px;height:46px;max-width:46px}
  .test-box-head h2{font-size:20px!important}
  .quiz-question h3{font-size:14px!important}
  .quiz-question label{font-size:13px;padding:9px 8px}
  .mascot-intro .page-mascot,.tests-intro.mascot-intro .page-mascot{width:56px;height:56px}
  .mascot-intro,.tests-intro.mascot-intro{padding-top:65px!important}
  .project-links>a{font-size:14px}
}


/* v49 — homepage mobile polish: clean hero, non-overlapping service mascots, full-width quick links */
@media (max-width:760px){
  /* Keep the introductory copy separate from the illustration. */
  .hero-grid{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important;padding:20px 0 14px!important}
  .hero-copy{order:0!important;width:100%;padding:0!important}
  .hero-visual{order:1!important;width:100%;height:clamp(210px,62vw,270px)!important;min-height:0!important;margin:0 auto!important;overflow:hidden}
  .mascot{width:min(88%,340px)!important;height:100%!important;max-height:270px!important;margin:0 auto;object-fit:contain}
  .fuji-glow{width:210px!important;height:210px!important;right:50%!important;transform:translateX(50%);top:5%!important}
  .eyebrow{display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.35;margin:0 0 10px}
  .hero-copy h1{font-size:clamp(32px,8.4vw,43px)!important;line-height:1.08!important;margin:0 0 12px!important;max-width:100%!important}
  .hero-copy .intro{font-size:16px!important;line-height:1.45!important;margin:0 0 14px!important;max-width:100%!important}
  .hero-copy .checks{font-size:13px;margin-bottom:15px}
  .benefits{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:0!important;padding:8px 0 24px!important;width:calc(100% - 28px)!important}
  .benefit{display:flex!important;align-items:center!important;gap:12px!important;width:100%!important;min-width:0!important;min-height:66px!important;padding:10px 8px!important;border:0!important;border-bottom:1px solid #eee!important;overflow:hidden}
  .benefit:last-child{border-bottom:0!important}
  .benefit-icon{width:42px!important;height:42px!important;flex:0 0 42px!important;font-size:19px!important}
  .benefit>span:last-child{display:block;flex:1 1 auto;min-width:0!important;width:0}
  .benefit strong{font-size:14px!important;line-height:1.25!important;overflow-wrap:anywhere}
  .benefit small{font-size:11px!important;line-height:1.3!important;white-space:normal!important;overflow-wrap:anywhere}
  /* Put mascot stickers above the text instead of floating over headings. */
  .mascot-card{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;padding:18px!important;overflow:hidden!important}
  .mascot-card .mascot-sticker{position:static!important;display:block!important;align-self:flex-end!important;flex:0 0 auto!important;width:48px!important;height:48px!important;max-width:48px!important;margin:0 0 8px!important;order:0!important}
  .mascot-card h3,.mascot-card p,.mascot-card .price,.mascot-card>a,.mascot-card .card-action-note{position:static!important;width:100%!important;max-width:100%!important;min-width:0!important}
  .mascot-card h3{font-size:20px!important;line-height:1.25!important;margin:0 0 8px!important;overflow-wrap:break-word}
  .mascot-card p{font-size:15px!important;line-height:1.5!important;margin:0 0 10px!important}
  .mascot-card .price{font-size:25px!important;margin:10px 0!important}
  .mascot-card>a{display:block!important;line-height:1.45!important;overflow-wrap:anywhere;margin:5px 0}
  .mascot-card .card-action-note{font-size:12px!important}
}
@media(max-width:420px){
  .hero-grid{padding-top:16px!important}
  .hero-visual{height:clamp(190px,58vw,235px)!important}
  .benefits{width:calc(100% - 24px)!important}
  .benefit{padding-left:5px!important;padding-right:5px!important}
  .mascot-card{padding:16px!important}
}


/* v50 — mobile hamburger navigation, remove duplicate mascot, fit kana icon */
.mobile-menu-toggle{display:none}
@media(max-width:760px){
  .site-header{position:relative;z-index:120}
  .site-header .head{display:grid!important;grid-template-columns:minmax(0,1fr) auto auto!important;align-items:center!important;gap:8px!important}
  .mobile-menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;padding:8px;border:1px solid #eadde0;border-radius:11px;background:#fff;cursor:pointer;grid-column:3;grid-row:1}
  .mobile-menu-toggle span{display:block;width:20px;height:2px;border-radius:2px;background:#39343a}
  .site-header .brand{grid-column:1;grid-row:1;min-width:0}
  .site-header .right-head{grid-column:2;grid-row:1;display:flex;align-items:center;gap:4px;min-width:0}
  .site-header .right-head>.button{display:none!important}
  .site-header .nav{display:none!important;grid-column:1/-1!important;grid-row:2!important;width:100%!important;margin:7px 0 2px!important;padding:9px!important;background:#fff7f8;border:1px solid #f0dfe3;border-radius:14px;box-shadow:0 8px 22px rgba(70,35,45,.08);grid-template-columns:minmax(0,1fr)!important;gap:3px!important}
  .site-header .nav.is-open{display:grid!important}
  .site-header .nav>a,.site-header .nav .nav-dropdown-toggle{justify-content:flex-start!important;text-align:left!important;min-height:40px!important;padding:9px 11px!important;font-size:14px!important;line-height:1.25!important;border-radius:9px}
  .site-header .nav-dropdown{width:100%}
  .site-header .nav-dropdown-toggle{width:100%}
  .site-header .nav-dropdown-menu{position:static!important;width:100%!important;max-width:100%!important;box-shadow:none!important;margin:0 0 4px 8px!important;padding:4px 8px!important;background:#fff!important;border:0!important}
  .site-header .nav-dropdown-menu a{padding:8px 10px!important;font-size:13px!important}
  /* Keep the brighter hero mascot; hide the repeated project illustration on phones. */
  .project-overview>.wrap>.project-mascot{display:none!important}
  .hero-grid{display:flex!important;flex-direction:column!important}
  .hero-visual{order:0!important}
  .hero-copy{order:1!important}
  .benefit-icon{font-size:14px!important;line-height:1!important;white-space:nowrap!important;letter-spacing:-1px!important;overflow:hidden!important}
}
@media(max-width:380px){
  .site-header .brand img{width:38px!important;height:38px!important}
  .site-header .brand strong{font-size:14px!important}
  .site-header .brand small{font-size:8px!important}
  .site-header .right-head .lang a,.site-header .right-head .lang span{min-width:24px!important;padding:4px 5px!important;font-size:9px!important}
}


/* v51 — homepage spacing, teacher intro/gallery order, restrained booking shortcut */
@media(max-width:760px){
  /* More breathing room between homepage sections, without oversized blank gaps. */
  .about-results.section{margin-top:18px!important;padding-top:30px!important;padding-bottom:30px!important}
  .about-hobbies.section,.teacher-details{padding-top:42px!important;padding-bottom:42px!important}
  .teacher-small-note{margin:18px 0 0!important;line-height:1.55!important}
  .teacher-copy .button{margin-top:16px!important}
  /* Teacher page: greeting first, slideshow second, biography after it. */
  .teacher-hero{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:20px!important}
  .teacher-copy.mascot-intro{order:0!important;padding:0!important;min-height:0!important}
  .teacher-copy.mascot-intro .page-mascot{display:none!important}
  .teacher-copy.mascot-intro .teacher-kicker{margin:0 0 7px!important}
  .teacher-copy.mascot-intro h1{font-size:clamp(29px,7.4vw,35px)!important;line-height:1.12!important;letter-spacing:-.8px!important;margin:0!important;white-space:normal!important}
  .teacher-copy.mascot-intro h1:after{content:" 🌸";white-space:nowrap;display:inline}
  .teacher-portrait-wrap.alex-hero-gallery{order:1!important;width:100%!important;max-width:390px!important;margin:0 auto!important}
  .teacher-copy.teacher-bio{order:2!important;width:100%!important;max-width:100%!important;padding:0!important}
  .teacher-copy.teacher-bio .teacher-lead{margin-top:0!important}
  .teacher-facts{margin:20px 0!important}
  /* Small, unobtrusive booking shortcut remains visible on every mobile page. */
  .yap-mobile-booking{position:fixed!important;left:12px!important;bottom:14px!important;z-index:99980!important;display:flex!important;align-items:center!important;gap:7px!important;padding:9px 13px!important;min-height:38px!important;border-radius:22px!important;background:#e87991!important;color:#fff!important;text-decoration:none!important;font-size:12px!important;font-weight:750!important;line-height:1!important;box-shadow:0 4px 14px rgba(120,50,70,.18)!important}
  .yap-mobile-booking span{font-size:14px!important}
  .yap-teacher-widget{right:10px!important;bottom:12px!important}
  .yap-teacher-widget.is-closed{bottom:12px!important}
  .yap-teacher-launcher{width:46px!important;height:46px!important}
  .yap-teacher-card{max-width:min(270px,calc(100vw - 24px))!important}
}
@media(min-width:761px){
  .yap-mobile-booking{display:none!important}
}
/* Keep the floating avatar and booking shortcut from colliding on narrow phones. */
@media(max-width:380px){
  .yap-mobile-booking{left:8px!important;bottom:10px!important;padding:8px 10px!important;font-size:11px!important}
  .yap-teacher-widget{right:8px!important;bottom:9px!important}
}


/* v52 — single sakura accent and persistent booking shortcut on all devices */
@media(max-width:760px){
  .teacher-copy.mascot-intro h1{
    font-size:clamp(27px,7vw,32px)!important;
    line-height:1.12!important;
    letter-spacing:-.9px!important;
    white-space:normal!important;
  }
  .teacher-copy.mascot-intro h1:after{
    content:" 🌸"!important;
    display:inline!important;
    white-space:nowrap!important;
  }
  .yap-floating-booking{
    display:flex!important;
  }
}
@media(min-width:761px){
  .yap-floating-booking{
    position:fixed!important;
    left:22px!important;
    bottom:20px!important;
    z-index:99980!important;
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    padding:10px 15px!important;
    min-height:40px!important;
    border-radius:24px!important;
    background:#e87991!important;
    color:#fff!important;
    text-decoration:none!important;
    font-size:13px!important;
    font-weight:750!important;
    line-height:1!important;
    box-shadow:0 4px 16px rgba(120,50,70,.16)!important;
    transition:transform .2s,box-shadow .2s!important;
  }
  .yap-floating-booking:hover{transform:translateY(-2px)!important;box-shadow:0 7px 20px rgba(120,50,70,.2)!important}
}


/* v53 — restore the approved desktop teacher layout and match the site's pink */
@media(min-width:761px){
  .teacher-page .teacher-hero{
    display:grid!important;
    grid-template-columns:minmax(300px,420px) minmax(0,1fr)!important;
    grid-template-rows:auto 1fr!important;
    grid-template-areas:
      "portrait intro"
      "portrait bio"!important;
    align-items:start!important;
    column-gap:clamp(38px,6vw,86px)!important;
    row-gap:18px!important;
  }
  .teacher-page .teacher-portrait-wrap.alex-hero-gallery{
    grid-area:portrait!important;
    width:100%!important;
    max-width:420px!important;
    margin:0!important;
  }
  .teacher-page .teacher-copy.mascot-intro{
    grid-area:intro!important;
    align-self:end!important;
    padding:0!important;
    min-height:0!important;
  }
  .teacher-page .teacher-copy.teacher-bio{
    grid-area:bio!important;
    width:100%!important;
    max-width:760px!important;
    padding:0!important;
    margin:0!important;
  }
  .teacher-page .teacher-copy.mascot-intro h1{
    font-size:clamp(38px,4.4vw,58px)!important;
    line-height:1.08!important;
    letter-spacing:-1.8px!important;
  }
}
.yap-floating-booking{
  background:var(--pink,#e9828b)!important;
}


/* v54 — hard override: desktop teacher hero is portrait left, intro and bio right */
@media screen and (min-width: 761px){
  section.teacher-page > .wrap.teacher-hero{
    display:grid!important;
    grid-template-columns:minmax(340px, 44%) minmax(0, 1fr)!important;
    grid-template-rows:auto auto!important;
    grid-template-areas:"portrait intro" "portrait bio"!important;
    align-items:start!important;
    justify-items:stretch!important;
    column-gap:clamp(34px,5vw,76px)!important;
    row-gap:20px!important;
    width:min(1180px,calc(100% - 64px))!important;
  }
  section.teacher-page > .wrap.teacher-hero > .teacher-copy.mascot-intro{
    grid-area:intro!important;
    align-self:end!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
  }
  section.teacher-page > .wrap.teacher-hero > .teacher-portrait-wrap.alex-hero-gallery{
    grid-area:portrait!important;
    align-self:start!important;
    width:100%!important;
    max-width:460px!important;
    margin:0!important;
  }
  section.teacher-page > .wrap.teacher-hero > .teacher-copy.teacher-bio{
    grid-area:bio!important;
    align-self:start!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
  }
  section.teacher-page .teacher-copy.mascot-intro h1{
    font-size:clamp(40px,4.2vw,58px)!important;
    line-height:1.08!important;
    letter-spacing:-1.5px!important;
  }
}
/* Exact site accent pink, including hover/focus states */
a.yap-floating-booking,
a.yap-floating-booking:visited{
  background-color:#e9828b!important;
  background-image:none!important;
  color:#fff!important;
}
a.yap-floating-booking:hover,
a.yap-floating-booking:focus{
  background-color:#d96f79!important;
  color:#fff!important;
}