:root{--navy:#0b2358;--blue:#0671f9;--pink:#f23676;--line:#c8e4ff;--muted:#405b80}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}body{margin:0;color:var(--navy);background:#fff;font:17px/1.6 Arial,system-ui,sans-serif}h1,h2,h3,p{margin:0}a{color:inherit;text-decoration:none}img{display:block;max-width:100%;height:auto}a,button{touch-action:manipulation}a:focus-visible,video:focus-visible{outline:3px solid var(--blue);outline-offset:5px}a:hover{text-decoration:underline}.skip{position:fixed;top:-100px;left:20px;z-index:20;background:white;padding:14px}.skip:focus{top:10px}.wrap{max-width:1280px;padding-inline:32px;margin-inline:auto}.site-header{background:#ffffffed;border-bottom:1px solid #e5f0fc;position:relative;z-index:3}.nav-wrap{max-width:1380px;margin:auto;display:flex;align-items:center;gap:28px;padding:12px 32px}.brand{flex:0 0 auto}.brand img{width:166px;height:62px;object-fit:contain}.site-header nav{display:flex;justify-content:center;gap:26px;flex:1;align-items:center;font-size:15px;font-weight:700}.site-header nav a{padding:8px 0;white-space:nowrap}.site-header nav a.active{color:var(--blue);border-bottom:3px solid var(--blue)}.account-links{min-width:208px;display:flex;gap:16px;align-items:center;justify-content:flex-end;font-size:14px;font-weight:bold}.member-avatar{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:#e1f1ff;color:#005dbf;font-size:18px}.button{display:inline-flex;gap:9px;align-items:center;justify-content:center;padding:13px 22px;min-height:48px;background:var(--pink);border:1px solid var(--pink);color:white;font-weight:700;font-size:16px;border-radius:9px;box-shadow:0 5px 14px #f236761c;text-align:center;line-height:1.4}.button:hover{text-decoration:none;background:#d71e5e;border-color:#d71e5e}.button.compact{padding:10px 19px;min-height:44px;white-space:nowrap;font-size:14px;min-width:120px}.button.outline{background:#ffffffed;color:var(--blue);border-color:var(--blue);box-shadow:none}.button.outline:hover{background:#eaf5ff}.button.blue{background:var(--blue);border-color:var(--blue)}.hero{background:#edf8ff url('/art/home67-landscape.webp') center 43%/cover no-repeat;position:relative}.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#f1faffed 0%,#edf8ffcf 40%,#edf8ff18 80%)}.hero-inner{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;padding-block:52px}.hero h1{font-size:clamp(32px,3.35vw,47px);line-height:1.18;font-weight:850;letter-spacing:-1.2px}.hero h1 em{font-style:normal;color:var(--pink)}.hero-line{color:var(--blue);font-size:clamp(19px,1.75vw,24px);font-weight:700;margin:20px 0 15px}.intro{color:#304971;font-size:18px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin:25px 0 18px}.free-note{font-size:14px}.free-note span{color:var(--pink);font-size:20px;margin-right:7px}.hero-art{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 8px 30px #4181b71c}.hero-art>img{width:100%;aspect-ratio:4/3;object-fit:cover}.art-labels{position:absolute;inset:0;display:grid;grid-template:1fr 1fr/1fr 1fr;gap:10px;padding:10px;pointer-events:none}.art-labels span{align-self:end;background:#092856e8;color:#fff;font-size:14px;font-weight:bold;padding:7px 12px;border-radius:7px}.section{padding-block:40px}h2{text-align:center;font-size:clamp(25px,2.4vw,34px);line-height:1.25;letter-spacing:-.6px;margin-bottom:24px}h3{font-size:18px;line-height:1.35}.section-note{text-align:center;color:var(--muted);margin:-12px 0 27px;font-size:16px}.benefits{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.benefits article{border:1px solid var(--line);border-radius:10px;text-align:center;padding:20px 12px;background:linear-gradient(#fff,#fbfdff)}.benefit-icon{display:grid;place-items:center;font-size:48px;height:76px;margin-bottom:7px}.kanji{font-size:54px;color:#142c4f;background:#fff4dc;border-radius:10px;width:68px;margin:0 auto 7px}.benefits h3{font-size:16px}.method{background:#edf8ff}.method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.method-grid article{background:#fff;border:1px solid #dbefff;border-radius:12px;padding:14px;overflow:hidden}.method-grid h3{display:flex;gap:10px;align-items:center;margin-bottom:14px;font-size:17px}.method-grid h3 span{border-radius:50%;width:32px;height:32px;display:grid;place-items:center;background:#e1f1ff;color:#0364cb;flex:none}.method-grid p{margin-top:13px;font-size:15px;line-height:1.5}.method-grid article>a{display:inline-block;margin-top:10px;font-size:14px;color:#005ac7;font-weight:bold}.method-grid video,.story-preview,.speaking-preview{width:100%;aspect-ratio:16/10;border-radius:8px;background:#e6f3ff;overflow:hidden;display:block}.method-grid video{object-fit:cover}.story-preview img{width:100%;height:100%;object-fit:cover;object-position:top}.speaking-preview{position:relative}.speaking-preview img{position:absolute;width:200%;max-width:none;height:200%;object-fit:fill;left:0;top:-100%}.roadmap{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}.level{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:185px;border:1px solid #a4eacb;border-radius:10px;padding:15px 9px;background:linear-gradient(145deg,#f0fff8,#e6f8ef);text-align:center;color:#087858}.level strong{font-size:46px;line-height:1.2;margin-top:7px}.level h3{font-size:17px;margin-top:3px}.level p{font-size:14px;margin-top:7px;color:#254361}.badge{border-radius:20px;color:#fff;background:#00a977;font-size:13px;line-height:1.5;padding:2px 15px;font-weight:bold}.n4{background:linear-gradient(145deg,#f5fbff,#e5f3ff);border-color:#a4d2fa;color:#0066d9}.n4 .badge{background:#0878ef}.n3{background:linear-gradient(145deg,#fffaf0,#fff1d9);border-color:#ffcf93;color:#d37008}.n3 .badge{background:#e9850b}.soon{border-color:#dfe4ed;background:#f5f7fa;color:#7c869d}.soon p{color:#626f84}.access{padding-top:4px}.access-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.access-grid article{padding:28px 32px;display:flex;justify-content:space-between;align-items:center;border-radius:13px;gap:18px}.access-grid h3{font-size:25px}.access-grid ul{list-style:none;padding:0;margin:13px 0 21px;font-size:16px}.access-grid li{margin:7px 0}.access-grid li:before{content:'✓';color:#009966;font-weight:bold;margin-right:10px}.free{background:#e9fcf4}.free h3{color:#047e79}.paid{background:#fff7e9}.paid h3{color:#a95206}.access-icon{font-size:68px;color:#eba330;flex-shrink:0}.final-cta{padding:50px 24px;text-align:center;background:linear-gradient(#e7f5ffc9,#e7f5ff55),url('/art/home67-landscape.webp') center 75%/cover}.final-cta h2{max-width:800px;margin:0 auto 24px}footer{display:flex;align-items:center;gap:24px;padding-block:25px;font-size:14px}footer .brand img{width:135px;height:52px}footer p{color:#405b80}footer>a:last-child{margin-left:auto}.login{white-space:nowrap}@media(min-width:1500px){.hero-inner{padding-block:65px}.hero-art>img{aspect-ratio:4/3}}@media(max-width:1000px){.nav-wrap{gap:20px;padding-inline:24px}.site-header nav{gap:15px;font-size:14px}.brand img{width:140px}.account-links{min-width:170px;gap:10px}.hero-inner{gap:23px}.hero h1{font-size:35px}.actions{flex-direction:column;align-items:flex-start}.benefits{gap:10px}.roadmap{gap:14px}.access-icon{font-size:50px}.access-grid article{padding:24px}.method-grid{gap:12px}.method-grid h3{font-size:15px}}
@media(max-width:760px){html{scroll-padding-top:20px}.wrap{padding-inline:20px}.nav-wrap{padding:10px 20px;flex-wrap:wrap;justify-content:space-between;gap:6px 12px}.brand img{width:132px;height:50px}.site-header nav{order:3;flex-basis:100%;justify-content:space-between;gap:12px;overflow-x:auto;font-size:14px}.account-links{min-width:0}.account-links .login:not(.member-avatar){font-size:13px}.account-links .button{min-width:104px;padding:10px 12px}.hero-inner{grid-template-columns:1fr;padding-block:35px;gap:26px}.hero h1{font-size:clamp(29px,6.8vw,43px);letter-spacing:-.8px}.hero-line{font-size:19px;margin:18px 0 13px}.intro{font-size:16px}.actions{flex-direction:row;gap:10px;margin-top:22px}.actions .button{font-size:14px;padding:12px 15px}.hero-art{max-width:580px;justify-self:center;width:100%}.art-labels{gap:6px;padding:6px}.art-labels span{font-size:12px;padding:5px 7px}.section{padding-block:32px}.benefits{grid-template-columns:repeat(2,1fr);gap:12px}.benefits article:last-child{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:22px;padding:10px}.benefits article:last-child h3 br{display:none}.benefit-icon{font-size:40px;height:65px}.benefits h3{font-size:15px}.method-grid{grid-template-columns:1fr;gap:20px}.method-grid h3{font-size:18px}.method-grid article{padding:16px}.method-grid p{font-size:16px}.roadmap{grid-template-columns:repeat(6,1fr);gap:10px}.level{grid-column:span 2;min-height:157px;padding:12px 5px}.level strong{font-size:36px}.level h3{font-size:14px}.level p{font-size:12px}.level.soon{grid-column:span 3;min-height:125px}.badge{font-size:12px;padding:2px 9px}.access-grid{grid-template-columns:1fr;gap:15px}.access-grid h3{font-size:23px}.access-icon{font-size:48px}.access-grid article{padding:24px}.access-grid ul{font-size:15px}.final-cta{padding:40px 0}.final-cta h2{font-size:27px}footer{flex-wrap:wrap;gap:12px}footer p{flex:1;font-size:13px}footer>a:last-child{margin-left:0;flex-basis:100%;font-size:14px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

@media(max-width:420px){.account-links .login:not(.member-avatar){display:none}.nav-wrap{gap:6px 10px}.site-header nav{font-size:13px}.brand img{width:132px}}

.hero-speech67{position:absolute;left:13px;top:13px;max-width:45%;background:#fffffff5;border:1px solid #8caac9;border-radius:12px;padding:8px 10px;text-align:center;box-shadow:0 2px 7px #0b235817}.hero-speech67 span{display:block;font-size:14px;line-height:1.5}.hero-speech67 span[lang]{font-weight:bold}@media(max-width:760px){.hero-speech67{left:8px;top:8px;padding:5px 6px}.hero-speech67 span{font-size:12px}}
.hero-speech67{top:auto;bottom:53%}.art-labels span:first-child{visibility:hidden}@media(max-width:760px){.hero-speech67{top:auto;bottom:53%}}

/* Compact homepage: retain natural scrolling on small screens and at browser zoom. */
.hero-inner{padding-block:24px}.hero h1{font-size:clamp(30px,3.1vw,43px)}
.hero-line{margin:14px 0 10px}.actions{margin:18px 0 12px}
#roadmap{padding-block:18px 22px}#roadmap h2{font-size:26px;margin-bottom:14px}
.level{min-height:138px;padding:10px}.level strong{font-size:36px;margin-top:4px}.level p{margin-top:4px}
footer{padding-block:10px}footer .brand img{width:108px;height:38px}
@media(min-width:900px) and (min-height:650px){
 body{height:100svh;min-height:650px;display:grid;grid-template-rows:72px minmax(0,1fr) 58px}
 .nav-wrap{height:72px;padding-block:5px}.brand img{height:54px}
 main#content{display:grid;grid-template-rows:minmax(0,1fr) auto}
 .hero{display:flex;align-items:center}.hero-inner{width:100%;padding-block:18px;gap:36px}
 .hero-art{justify-self:end;width:min(100%,calc((100svh - 380px)*1.3333),560px)}
 .hero-art>img{aspect-ratio:4/3}.hero h1{font-size:clamp(30px,3vw,43px)}
 .hero-line{font-size:20px}.intro{font-size:17px}.actions{flex-direction:row;align-items:center}
 #roadmap{width:100%;padding-block:12px 16px}.roadmap{gap:18px}
 #roadmap h2{font-size:24px;margin-bottom:12px}.level{min-height:120px}
 footer{width:100%;height:58px;padding-block:8px}
}
@media(min-width:900px) and (min-height:650px) and (max-height:740px){
 .hero h1{font-size:32px}.hero-line{margin:10px 0 6px;font-size:18px}
 .intro{font-size:16px}.actions{margin:12px 0 8px}.actions .button{padding:10px 16px}
 .art-labels span{font-size:12px;padding:5px 8px}.hero-speech67 span{font-size:12px}
}
@media(max-width:760px){
 .hero-inner{padding-block:26px;gap:20px}.hero-art{max-width:440px}
 #roadmap{padding-block:24px}.level{min-height:138px}.level.soon{min-height:105px}
 footer{padding-block:16px}
}