:root{--ink:#071e4d;--blue:#0750c4;--cream:#fff8e7;--muted:#53627b}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:#f4eddb;color:var(--ink);font-family:"Malgun Gothic","Apple SD Gothic Neo",Arial,sans-serif;word-break:keep-all}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible{outline:3px solid #ff9c40;outline-offset:5px}img{display:block;max-width:100%}.page{width:100%;margin:0;background:var(--cream);overflow:hidden}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:-70px;left:16px;background:white;padding:12px;z-index:5}.skip-link:focus{top:16px}
.hero{position:relative;min-height:580px;aspect-ratio:1672/941;background:url("assets/hero.jpg") center/cover no-repeat}.header{display:flex;justify-content:space-between;align-items:center;padding:16px 5%;gap:24px}.brand{display:flex;align-items:center;gap:12px;font-size:clamp(20px,2.3vw,32px);font-weight:900;letter-spacing:-1px;white-space:nowrap}.brand img{width:clamp(40px,4.6vw,64px);height:clamp(40px,4.6vw,64px);object-fit:cover;border-radius:12px}.header nav{display:flex;align-items:center;gap:24px;font-size:14px;font-weight:700}.nav-link{background:#fff8e7e6;padding:7px 3px}.nav-link:hover{text-decoration:underline;text-underline-offset:5px}.nav-download{padding:11px 16px;border:1px solid #e8eeff;border-radius:9px;color:white;background:#0b3d7799;font-size:13px;box-shadow:0 0 0 3px #163d6640}.nav-download:hover{background:#0c4595}.hero-copy{position:absolute;left:5%;top:21%;max-width:61%}.hero h1{font-size:clamp(42px,5.45vw,78px);font-weight:900;letter-spacing:-.065em;line-height:1.14;margin:0 0 18px}.hero-copy>p{font-size:clamp(18px,2.2vw,30px);line-height:1.5;margin:0 0 22px;letter-spacing:-.04em}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:8px;background:linear-gradient(115deg,#0864d9,#0643a5);padding:15px 24px;color:white;font-size:clamp(14px,1.7vw,23px);font-weight:700;box-shadow:0 3px 8px #0d3e7325;transition:transform .18s,box-shadow .18s}.button:hover{transform:translateY(-2px);box-shadow:0 6px 15px #0d3e7340}.download-icon{font-size:1.4em;line-height:1;width:1.05em;height:1.05em;display:grid;place-items:center;border:1.5px solid currentColor;border-radius:50%}.hero-copy small{display:block;margin-top:12px;color:#485670;font-size:clamp(12px,1.3vw,17px)}
.benefits{display:grid;grid-template-columns:repeat(3,1fr);padding:26px 5% 22px;background:linear-gradient(90deg,#fff9e9,#fbf4df);gap:26px}.benefit{display:flex;align-items:flex-start;gap:15px;position:relative}.benefit:not(:last-child):after{content:"";position:absolute;right:-13px;top:6px;bottom:6px;width:1px;background:#d8d7cc}.benefit-icon{flex:none;width:62px;height:62px;border-radius:50%;background:#e5e9ed;display:grid;place-items:center;color:#063978}.benefit-icon svg{width:32px;height:32px;fill:currentColor}.benefit h2{font-size:clamp(16px,1.75vw,24px);margin:4px 0 6px;font-weight:900;letter-spacing:-.055em}.benefit p{font-size:clamp(12px,1.15vw,16px);line-height:1.55;color:var(--muted);margin:0;letter-spacing:-.035em}
.features{padding:20px 4% 28px;background:radial-gradient(ellipse at center,#fffaf0,var(--cream))}.section-title{text-align:center;font-size:clamp(24px,3.25vw,44px);font-weight:900;letter-spacing:-.06em;margin:0 0 20px}.section-title span{color:var(--blue)}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:38px}.feature-grid article>img{width:100%;aspect-ratio:1.68;object-fit:cover;object-position:center 45%}.feature-grid h3{font-size:clamp(16px,2vw,27px);font-weight:900;letter-spacing:-.06em;line-height:1.4;margin:8px 0 4px}.feature-grid p{font-size:clamp(13px,1.45vw,20px);color:var(--muted);line-height:1.5;margin:0;letter-spacing:-.025em}
.app-preview{height:clamp(340px,30vw,430px);background:url("assets/sunset.jpg") center 57%/cover no-repeat;position:relative;overflow:hidden}.preview-copy{position:absolute;left:5%;top:15%;z-index:1}.preview-copy h2{font-size:clamp(27px,3.5vw,48px);font-weight:900;line-height:1.14;letter-spacing:-.06em;margin:0 0 16px}.preview-copy p{font-size:clamp(15px,1.8vw,24px);line-height:1.55;letter-spacing:-.025em;margin:0}.phone{position:absolute;left:29%;top:14px;width:25%;max-width:330px;padding:10px 7px;border:3px solid #5d6064;background:#11161c;border-radius:38px;box-shadow:0 0 0 3px #c1b5a0,3px 10px 20px #08274740;overflow:hidden}.phone img{width:100%;height:auto;border-radius:26px}.phone-camera{position:absolute;width:30%;height:16px;top:7px;left:35%;background:#11161c;border-radius:0 0 14px 14px;z-index:1}.handwritten{position:absolute;top:9%;left:57%;margin:0;font-family:"Segoe Print","Malgun Gothic",sans-serif;font-style:italic;font-size:clamp(15px,1.8vw,25px);line-height:1.65;letter-spacing:-.08em;transform:rotate(-9deg);color:#164375}.handwritten span{padding-left:22px}
.faq{display:grid;grid-template-columns:.85fr 1fr 1.2fr 1.25fr;padding:22px 4%;gap:26px;background:#fffaf0}.faq h2,.faq h3{font-size:clamp(14px,1.6vw,21px);font-weight:900;margin:0 0 3px;letter-spacing:-.06em}.faq h2 span{display:block;font-size:clamp(11px,1.1vw,14px);font-weight:400;color:var(--muted);margin-top:5px}.faq>div{border-left:1px solid #c7c9c8;padding-left:24px}.faq p{margin:0;color:var(--muted);font-size:clamp(11px,1.1vw,15px);line-height:1.5;letter-spacing:-.04em}.closing{margin:0 3.5%;padding:20px 26px;background:linear-gradient(110deg,#0754bf,#08419a);border-radius:14px;color:white;display:flex;align-items:center;gap:28px}.closing .brand{font-size:clamp(16px,1.8vw,25px);letter-spacing:-.045em}.closing .brand img{width:54px;height:54px}.closing-copy{flex:1;border-left:1px solid #91b3e4;padding-left:28px}.closing h2{font-size:clamp(19px,2.5vw,34px);margin:0 0 3px;letter-spacing:-.055em;font-weight:900}.closing p{margin:0;font-size:clamp(12px,1.2vw,16px);color:#d4e3fb}.button-light{color:#0648ac;background:#fffdf6;box-shadow:none;font-size:clamp(12px,1.2vw,16px);padding:14px 18px;white-space:nowrap}.button-light:hover{box-shadow:0 4px 10px #07295e66}footer{display:flex;align-items:center;gap:20px;padding:15px 5%;color:#74797e;font-size:12px}footer .brand{font-size:16px;color:var(--ink);letter-spacing:-.5px;gap:8px}footer .brand img{width:30px;height:30px;border-radius:5px}footer>p{margin:0;flex:1}footer>div{display:flex;gap:28px}footer>div a:hover{text-decoration:underline}
.feature-grid article>img{height:auto;aspect-ratio:1.68;object-fit:cover}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff8e7bd 0%,#fff8e770 35%,transparent 62%);pointer-events:none}.header{position:relative;z-index:2}.hero-copy{z-index:1}.hero-copy small{display:table;background:#fff8e7d9;padding:3px 6px;border-radius:3px}.app-preview:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff8e7e8 0%,#fff8e7a0 22%,transparent 34%);pointer-events:none}
.header nav{gap:6px;padding:6px;border-radius:14px;background:rgba(6,30,62,.78);border:1px solid rgba(255,255,255,.16);box-shadow:0 4px 18px rgba(5,23,46,.12);backdrop-filter:blur(10px)}
.header nav .nav-link{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 16px;background:transparent;border-radius:9px;color:#fff8e7;font-size:14px;font-weight:600;white-space:nowrap;text-decoration:none;transition:background .18s}
.header nav .nav-link:hover{background:rgba(255,255,255,.12)}
.header nav .nav-download{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 18px;margin-left:6px;border:0;border-radius:9px;background:#fff8e7;color:#123b69;font-size:13px;font-weight:700;white-space:nowrap;box-shadow:none;transition:background .18s}
.header nav .nav-download:hover{background:#ffe5b5}
@media(max-width:1000px){.header nav .nav-download{display:none}}
@media(max-width:680px){.header nav{gap:0;padding:3px;border-radius:10px;background:rgba(255,248,231,.94);border:1px solid rgba(7,30,77,.1);box-shadow:none}.header nav .nav-link{min-height:36px;padding:8px;font-size:11px;color:var(--ink);border-radius:7px}.header nav .nav-link:hover{background:rgba(7,30,77,.07)}}
@media(min-width:1440px){.hero h1{font-size:78px}.hero-copy>p{font-size:30px}}
@media(max-width:1000px){.header nav{gap:16px}.nav-download{display:none}.hero{min-height:450px}.benefits{gap:22px;padding:20px 4%}.benefit{gap:10px}.benefit-icon{width:45px;height:45px}.benefit-icon svg{width:25px;height:25px}.feature-grid{gap:24px}.closing{gap:18px;padding:18px}.closing-copy{padding-left:18px}.closing .brand img{width:40px;height:40px}.closing .brand{gap:8px}footer{gap:14px}footer>p{font-size:10px}}
@media(max-width:680px){.hero{aspect-ratio:auto;height:580px;min-height:0;background-position:62% center}.header{padding:16px 5%;gap:10px}.brand{font-size:20px;gap:8px}.brand img{width:40px;height:40px}.header nav{font-size:11px;gap:9px}.nav-link{padding:6px 3px}.hero-copy{top:22%;max-width:90%;z-index:1}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff7e4ed 0%,#fff7e4bd 42%,#fff7e400 76%)}.header{position:relative;z-index:2}.hero h1{font-size:clamp(35px,7.6vw,50px);letter-spacing:-.065em}.hero-copy>p{font-size:20px}.button{font-size:15px;padding:14px 18px}.hero-copy small{font-size:12px}.benefits{grid-template-columns:1fr;padding:23px 6%;gap:19px}.benefit{align-items:center;gap:16px}.benefit:not(:last-child):after{display:none}.benefit h2{font-size:18px;margin:0 0 4px}.benefit p{font-size:13px}.benefit p br{display:none}.benefit-icon{width:46px;height:46px}.features{padding:28px 6% 32px}.section-title{font-size:27px;line-height:1.3;margin-bottom:24px}.section-title span{white-space:nowrap}.feature-grid{grid-template-columns:1fr;gap:28px}.feature-grid article>img{aspect-ratio:1.85}.feature-grid h3{font-size:21px;margin:10px 0 5px}.feature-grid p{font-size:15px}.feature-grid p br{display:none}.app-preview{height:410px;background-position:62% center}.preview-copy{left:6%;top:8%}.preview-copy h2{font-size:27px}.preview-copy p{font-size:14px}.phone{left:52%;top:42px;width:43%;border-radius:28px;padding:8px 5px}.phone img{border-radius:19px}.handwritten{left:7%;top:auto;bottom:30px;font-size:17px;background:#fff6e5b0;padding:8px 14px;border-radius:3px}.faq{grid-template-columns:1fr;padding:26px 6%;gap:16px}.faq h2{font-size:22px;margin-bottom:4px}.faq h2 span{font-size:13px}.faq>div{border-left:0;border-top:1px solid #ddd4be;padding:14px 0 0}.faq h3{font-size:16px}.faq p{font-size:13px}.closing{margin:0 5%;padding:24px;flex-direction:column;align-items:flex-start;gap:16px;border-radius:12px}.closing .brand{font-size:20px}.closing-copy{border:0;padding:0}.closing h2{font-size:23px}.closing p{font-size:13px;line-height:1.5}.closing .button{width:100%;font-size:14px}footer{padding:20px 6%;flex-wrap:wrap;gap:12px}footer .brand{font-size:15px}footer>p{flex:auto;font-size:10px}footer>div{width:100%;font-size:12px;justify-content:flex-end;gap:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}.button:hover{transform:none}}

/* One continuous illustration behind the preview and all closing content. */
.bottom-scene{display:flow-root;position:relative;isolation:isolate;background:url("assets/sunset.jpg") center center/cover no-repeat}
.bottom-scene:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(255,248,231,.85),rgba(255,248,231,.3) 36%,transparent 65%)}
.bottom-scene .app-preview{background:none}
.bottom-scene .app-preview:before{display:none}
.bottom-scene .faq{background:rgba(255,250,240,.88)}
.bottom-scene footer{background:rgba(255,250,240,.88)}
@media(max-width:680px){.bottom-scene{background-position:62% center}.bottom-scene:before{background:rgba(255,248,231,.3)}}

/* Layout: full-width scenery, consistent content alignment and section spacing. */
:root{--content-width:1180px;--page-gutter:max(5%,calc((100% - var(--content-width))/2))}
.header{min-height:88px;padding:14px var(--page-gutter);background:var(--cream)}
.header .brand{font-size:26px;letter-spacing:-.8px}.header .brand img{width:48px;height:48px}
.header nav{gap:20px;padding:0;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none}
.header nav .nav-link{color:var(--ink);padding:10px 4px;font-weight:600}
.header nav .nav-link:hover{background:transparent;color:var(--blue)}
.header nav .nav-download{background:#0750b8;color:white;margin-left:8px;padding:12px 20px}
.header nav .nav-download:hover{background:#063d90}
.hero{aspect-ratio:auto;height:clamp(580px,47vw,760px);min-height:0;background-position:center}
.hero-copy{left:var(--page-gutter);top:20%;max-width:600px}
.hero h1{font-size:clamp(42px,4.5vw,68px);margin-bottom:24px}.hero-copy>p{font-size:25px;margin-bottom:28px}
.hero .button{font-size:18px;padding:16px 24px}
.benefits{padding:32px var(--page-gutter);gap:34px}
.benefit h2{font-size:20px}.benefit p{font-size:14px}.benefit-icon{width:54px;height:54px}
.features{padding:90px var(--page-gutter) 96px}
.section-title{font-size:40px;margin-bottom:42px}.feature-grid{gap:30px}
.feature-grid h3{font-size:23px;margin-top:18px;margin-bottom:10px}.feature-grid p{font-size:17px;line-height:1.7}
.app-preview{height:500px;background-position:center 57%}
.preview-copy{left:var(--page-gutter);top:20%}.preview-copy h2{font-size:42px;line-height:1.25}.preview-copy p{font-size:20px;line-height:1.7}
.phone{left:calc(50% - 245px);top:40px;width:280px;max-width:none}
.handwritten{left:calc(50% + 80px);top:13%;font-size:23px}
.faq{padding:48px var(--page-gutter);gap:24px}.faq h2,.faq h3{font-size:18px}.faq p,.faq h2 span{font-size:13px}
.closing{max-width:1180px;margin:20px auto 48px;width:90%;padding:30px;gap:24px}.closing h2{font-size:28px}.closing .brand{font-size:22px}.closing .button{font-size:14px}
footer{padding:24px var(--page-gutter);border-top:1px solid #e7dfce}
@media(max-width:1100px){.header nav{gap:16px}.benefits{gap:22px}.benefit{gap:12px}.benefit h2{font-size:17px}.benefit p{font-size:12px}.feature-grid h3{font-size:20px}.preview-copy h2{font-size:34px}.preview-copy p{font-size:17px}.phone{left:31%;width:26%}.closing .brand{font-size:18px}.closing h2{font-size:23px}}
@media(max-width:680px){
 .header{min-height:74px;padding:12px 5%;gap:10px}.header .brand{font-size:19px;gap:7px}.header .brand img{width:38px;height:38px}.header nav{gap:10px}.header nav .nav-link{font-size:11px;padding:8px 0;min-height:36px}
 .hero{height:520px;background-position:62% center}.hero-copy{left:6%;top:18%;max-width:90%}.hero h1{font-size:clamp(35px,7.6vw,50px);margin-bottom:20px}.hero-copy>p{font-size:20px;margin-bottom:24px}.hero .button{font-size:15px;padding:14px 18px}
 .benefits{padding:28px 6%;gap:22px}.benefit h2{font-size:18px}.benefit p{font-size:13px}.benefit-icon{width:46px;height:46px}
 .features{padding:52px 6% 56px}.section-title{font-size:27px;margin-bottom:30px}.feature-grid{gap:34px}.feature-grid h3{font-size:21px;margin-top:12px;margin-bottom:6px}.feature-grid p{font-size:15px}
 .app-preview{height:410px;background-position:62% center}.preview-copy{left:6%;top:9%}.preview-copy h2{font-size:27px;line-height:1.14}.preview-copy p{font-size:14px}.phone{left:52%;top:42px;width:43%}.handwritten{left:7%;top:auto;bottom:30px;font-size:17px}
 .faq{padding:34px 6%;gap:18px}.faq h2{font-size:22px}.faq h3{font-size:16px}.faq p{font-size:13px}
 .closing{margin:12px auto 32px;padding:24px;gap:16px}.closing .brand{font-size:20px}.closing h2{font-size:23px}.closing .button{font-size:14px}
 footer{padding:22px 6%}
}

/* Layout v2 (coach2 reference): sticky top bar, card strips, centered section heads. */
html{scroll-padding-top:96px}
.page{overflow:clip}
.header{position:sticky;top:0;z-index:30;min-height:76px;padding:12px var(--page-gutter);background:rgba(255,248,231,.92);border-bottom:1px solid rgba(7,30,77,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.header .brand{font-size:22px;letter-spacing:-.6px}.header .brand img{width:42px;height:42px;border-radius:10px}
.header nav{gap:28px}
.header nav .nav-link{font-size:15px}
.header nav .nav-download,.header nav .nav-download:hover{display:inline-flex}
.header nav .nav-download{margin-left:4px;padding:11px 20px;border-radius:100px;font-size:14px;box-shadow:0 4px 12px rgba(7,80,184,.22);transition:background .18s,transform .18s}
.header nav .nav-download:hover{transform:translateY(-1px)}
.hero{height:clamp(560px,44vw,720px)}

/* Benefits: one white card that overlaps the bottom of the hero. */
.benefits{position:relative;z-index:2;width:min(var(--content-width),90%);margin:-56px auto 0;padding:26px 34px;background:#fffdf7;border:1px solid #ece4d1;border-radius:18px;box-shadow:0 14px 40px rgba(7,30,77,.09)}

/* Features: centered heading, roomier cards. */
.features{padding:96px var(--page-gutter) 100px}
.feature-grid article>img{border-radius:14px}
.feature-grid article{text-align:left}

/* FAQ: centered heading on its own row, three cards below. */
.bottom-scene .faq{background:transparent}
.faq{grid-template-columns:repeat(3,1fr);gap:20px;padding:56px var(--page-gutter) 40px}
.faq h2{grid-column:1/-1;text-align:center;font-size:30px;margin-bottom:10px}
.faq h2 span{font-size:15px;margin-top:8px}
.faq>div{border:1px solid #ece4d1;border-radius:14px;padding:22px 24px;background:rgba(255,253,247,.94);box-shadow:0 6px 20px rgba(7,30,77,.05)}
.faq h3{font-size:18px;margin-bottom:6px}.faq p{font-size:14px}

.closing{margin:24px auto 56px;border-radius:18px}

/* Footer: full-width solid band like the reference. */
.bottom-scene footer{background:#efe7d4;border-top:1px solid #e1d7bf;padding:28px var(--page-gutter)}

@media(max-width:1100px){.header nav{gap:18px}.header nav .nav-link{font-size:14px}}
@media(max-width:860px){.header nav .nav-link{display:none}}
@media(max-width:680px){
 html{scroll-padding-top:76px}
 .header{min-height:64px;padding:10px 16px}
 .header .brand{font-size:17px;gap:7px}.header .brand img{width:34px;height:34px;border-radius:8px}
 .header nav{gap:0;padding:0;background:none;border:0}
 .header nav .nav-download{margin:0;padding:9px 13px;font-size:12px;min-height:0}
 .hero{height:520px}
 .benefits{width:auto;margin:-40px 16px 0;padding:22px 20px;border-radius:16px}
 .features{padding:56px 6% 56px}
 .faq{grid-template-columns:1fr;gap:12px;padding:40px 6% 24px}
 .faq h2{font-size:24px}
 .faq>div{border-top:1px solid #ece4d1;padding:18px 20px}
 .closing{margin:16px 16px 32px;width:auto}
}
@media(max-width:360px){.header .brand span{display:none}}

/* Business information (required seller details), below the footer row.
   dl is shifted left 13px and clipped, so the divider before the first item of each line is hidden. */
footer{flex-wrap:wrap}
.biz-info,footer>.biz-info{display:block;overflow:hidden;width:100%;margin-top:6px;padding-top:18px;border-top:1px solid #ddd2b8;color:#6f7480;font-size:12.5px;line-height:1.6}
.biz-info dl{display:flex;flex-wrap:wrap;margin:0 0 0 -13px;row-gap:8px}.biz-info dl+dl{margin-top:8px}
.biz-info dl>div{display:flex;gap:6px;padding:0 12px;border-left:1px solid #d6ccb4}
.biz-info dt{font-weight:700;color:var(--ink)}
.biz-info dd{margin:0}
.biz-info a:hover{text-decoration:underline}
.biz-info .copyright{margin:14px 0 0;font-size:12px;color:#8a8f99}
@media(max-width:680px){.biz-info{font-size:12px}.biz-info dl{flex-direction:column;row-gap:4px;margin-left:0}.biz-info dl+dl{margin-top:4px}.biz-info dl>div{padding:0;border:0}}

/* Closing CTA: QR on the left, caption and button stacked on the right (QR hidden on phones). */
.closing-cta{display:grid;grid-template-columns:auto auto;grid-template-rows:1fr 1fr;column-gap:18px;row-gap:10px;align-items:center;padding-left:28px;border-left:1px solid #91b3e4}
.closing-qr{display:contents}
.closing-qr img{grid-row:1/3;width:132px;height:132px;padding:6px;background:#fff;border-radius:10px}
.closing-qr figcaption{grid-column:2;grid-row:1;align-self:end;font-size:13px;color:#d4e3fb;white-space:nowrap}
.closing-cta .button{grid-column:2;grid-row:2;align-self:start}
@media(max-width:1000px){.closing-cta{padding-left:18px;column-gap:14px}}
@media(max-width:680px){.closing-cta{display:block;width:100%;padding:0;border:0}.closing-qr{display:none}}

/* Download icon: stroke SVG that matches the button text weight. */
.download-icon{flex:none;width:1.15em;height:1.15em;border:0;border-radius:0;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.button{gap:10px}

/* Language switch in the top bar (KO / EN / JA). */
.lang-switch{display:inline-flex;flex:none;padding:3px;border:1px solid rgba(7,30,77,.14);border-radius:100px;background:rgba(255,255,255,.6)}
.lang-switch a{padding:6px 10px;border-radius:100px;font-size:12px;font-weight:700;line-height:1;color:var(--muted);transition:background .18s,color .18s}
.lang-switch a:hover{color:var(--ink);background:rgba(7,30,77,.06)}
.lang-switch a.is-current{background:var(--ink);color:#fff}

/* Per-language typography: Japanese needs normal line breaking, Latin needs looser tracking. */
html:lang(ja) body{font-family:"Yu Gothic UI","Yu Gothic","Hiragino Sans","Meiryo","Malgun Gothic",sans-serif;word-break:normal;line-break:strict}
html:lang(ja) :is(h1,h2,h3){letter-spacing:-.03em}
html:lang(en) :is(h1,h2,h3){letter-spacing:-.025em}
html:lang(en) .hero h1{font-size:clamp(40px,4.2vw,62px)}
html:lang(ja) .hero h1{font-size:clamp(40px,4.4vw,64px)}
html:lang(ja) .preview-copy h2,html:lang(en) .preview-copy h2{font-size:36px}

/* App preview: two phones (history + schedule), staggered side by side. */
.app-preview{height:620px}
.preview-copy{max-width:calc(50% - 250px - var(--page-gutter) - 24px)}
.phone{left:calc(50% - 250px);top:48px;width:270px;z-index:2}
.phone-second{left:calc(50% + 50px);top:112px;width:250px;z-index:1}
.handwritten{left:var(--page-gutter);right:auto;top:auto;bottom:64px}
@media(max-width:1100px){
 .app-preview{height:600px}
 .preview-copy{max-width:calc(30% - var(--page-gutter) - 20px)}
 .phone{left:30%;width:24%}
 .phone-second{left:calc(30% + 24% + 24px);top:104px;width:22%}
 .handwritten{bottom:56px;font-size:19px}
 html:lang(ja) .preview-copy h2{font-size:28px}
}
@media(max-width:680px){
 .app-preview{height:auto;display:grid;grid-template-columns:1fr 1fr;column-gap:16px;row-gap:20px;padding:40px 6% 28px;align-items:start}
 .preview-copy{position:static;grid-column:1/-1;max-width:none}
 .preview-copy h2,html:lang(ja) .preview-copy h2,html:lang(en) .preview-copy h2{font-size:27px}
 .phone,.phone-second{position:relative;left:auto;top:auto;width:auto;max-width:none}
 .phone-second{margin-top:28px}
 .handwritten{position:static;grid-column:1/-1;justify-self:start;transform:rotate(-4deg)}
 .lang-switch a{padding:6px 8px;font-size:11px}
 .header nav{gap:8px}
}
@media(max-width:480px){.header .brand span{display:none}}
@media(max-width:400px){.header nav .nav-download{padding:8px 10px;font-size:11px}.lang-switch a{padding:5px 7px}}
/* Closing title wraps only between phrases. */
.closing h2 span{display:inline-block}

/* Hero v2 copy is longer: wider column, smaller headline and subline. */
.hero-copy{max-width:780px}
.hero h1,html:lang(ja) .hero h1{font-size:clamp(34px,3.5vw,52px);line-height:1.22}
html:lang(en) .hero h1{font-size:clamp(32px,3.1vw,46px)}
.hero-copy>p{font-size:clamp(17px,1.5vw,21px);line-height:1.65}
@media(max-width:680px){.hero h1,html:lang(ja) .hero h1{font-size:30px}html:lang(en) .hero h1{font-size:28px}.hero-copy>p{font-size:16px}.hero-copy>p br{display:none}}
.hero-copy{max-width:min(780px,56%)}
@media(max-width:680px){
 .hero-copy{max-width:88%}
 .hero{background-position:72% center}
 .hero:before{background:linear-gradient(180deg,rgba(255,248,231,.93) 0%,rgba(255,248,231,.88) 62%,rgba(255,248,231,.25) 100%)}
}
/* Hero title wraps only between phrases. */
.hero h1 span{display:inline-block}
/* Mobile hero: fills the phone screen; illustration clear at the top, text and button at the
   bottom where the illustration fades into cream. */
@media(max-width:680px){
 .hero{height:auto;min-height:calc(100vh - 64px);min-height:calc(100svh - 64px);background:var(--cream);display:flex;flex-direction:column;justify-content:flex-end}
 .hero:before{display:none}
 .hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,248,231,0) 30%,rgba(255,248,231,.78) 52%,rgba(255,248,231,.94) 70%),url("assets/hero.jpg") 68% top/cover no-repeat}
 .hero-copy{position:relative;z-index:1;max-width:none;left:auto;top:auto;padding:0 6% 72px}
 .hero-copy small{background:rgba(255,248,231,.85)}
}
/* Mobile bottom scene: the section is too tall to stretch the illustration over, and cards
   cover it, so show its right side (mechanic with mug) in a band above the FAQ instead. */
@media(max-width:680px){
 .bottom-scene{background:#fff8e7}
 .bottom-scene:before{display:none}
 .bottom-scene .faq{padding-top:340px;background:linear-gradient(180deg,#fff8e7 0,rgba(255,248,231,0) 70px,rgba(255,248,231,0) 250px,#fff8e7 340px),url("assets/sunset.jpg") no-repeat right 0 top -130px/auto 560px}
}