/* LP (2026-11-10): Duolingo structure in the store-screenshot look. Each section = one big headline + one picture. Text never sits on the photo. */
:root{--paper:#F2EEE4;--paper2:#E9E3D3;--card:#FFFFFF;--ink:#141414;--ink2:#55514A;--row:#E6E0D3;--rowfg:#6E675B;--pink:#F5E9E5;--red:#C93D27;--red-d:#B8321E;
--shadow:0 18px 40px rgba(60,40,20,.10),0 1px 0 rgba(60,40,20,.04);
--serif:'Zen Old Mincho','Hiragino Mincho ProN',serif;--sans:'Zen Kaku Gothic New','Archivo','Hiragino Sans',system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
:lang(zh) body{--serif:'Noto Sans SC',sans-serif;--sans:'Noto Sans SC','Archivo',sans-serif}
:lang(zh-TW) body{--serif:'Noto Sans TC',sans-serif;--sans:'Noto Sans TC','Archivo',sans-serif}
:lang(ko) body{--serif:'Noto Sans KR',sans-serif;--sans:'Noto Sans KR','Archivo',sans-serif}
:lang(en) body,:lang(id) body,:lang(vi) body{--serif:'Archivo',sans-serif}
.jp{font-family:'Zen Old Mincho','Hiragino Mincho ProN',serif!important}
.nw{display:inline-block}
a{color:inherit}

/* shared header, LP colours */
body.lp .s-top{background:transparent;color:var(--ink);border-bottom:0;padding:10px 12px 0}
body.lp .s-top-in{background:rgba(255,255,255,.96);border-radius:999px;box-shadow:0 6px 24px rgba(40,25,10,.10);min-height:60px;padding:8px 8px 8px 20px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
body.lp .s-lang-btn{border-radius:999px}
body.lp .s-top .s-brand{color:var(--ink)}
body.lp .s-lang-btn{color:var(--ink);border-color:#D6CFC0}
body.lp .s-lang-menu{background:#fff;border-color:#D6CFC0}
body.lp .s-lang-menu button{color:var(--ink)}
body.lp .s-cta{border-radius:999px}

.lp-sec{padding:44px 24px 60px}
.lp-in{max-width:1040px;margin:0 auto;display:flex;flex-direction:column;gap:26px}
.lp-kick{margin:0;font-family:'Archivo',var(--sans);font-weight:800;font-size:13px;letter-spacing:1px;color:var(--red)}
.lp-cap{margin:0;font-family:var(--serif);font-weight:900;font-size:38px;line-height:1.2;letter-spacing:.01em;font-feature-settings:"palt";text-wrap:balance}
:lang(en) .lp-cap,:lang(id) .lp-cap,:lang(vi) .lp-cap{font-weight:800;letter-spacing:-.01em;line-height:1.12}
.lp-cap em{font-style:normal;color:var(--red)}
.lp-note{margin:-8px 0 0;font-size:15px;line-height:1.7;color:var(--ink2)}

.lp-cta{display:flex;align-items:center;justify-content:center;min-height:58px;padding:12px 18px;text-align:center;background:var(--red);color:#fff;font-size:18px;font-weight:800;letter-spacing:1px;text-decoration:none;border-radius:999px}
.lp-cta:hover{background:var(--red-d)}
.lp-cta:focus-visible,.lp-faq summary:focus-visible{outline:3px solid #2F7DD1;outline-offset:3px}

/* hero */
.lp-hero{padding-top:22px}
.lp-hero .lp-in{gap:20px}
.lp-hero .lp-cap{font-size:34px;margin-top:-8px}
.lp-sub{margin:-6px 0 0;font-size:16px;line-height:1.65;font-weight:700;color:var(--ink2)}
.lp-photo{margin:0;display:flex;flex-direction:column;gap:8px}
.lp-photo>div{border-radius:22px;box-shadow:var(--shadow);height:340px;background:#d9cfc2}
.lp-clip{position:absolute;inset:0;border-radius:inherit;overflow:hidden}
.lp-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block}
.lp-photo figcaption{font-size:13px;color:var(--ink2)}

/* sections alternate paper / white */

/* speak: the question card is the app screen, the recorder sits inside it */
.lp-q{background:var(--card);border-radius:22px;box-shadow:var(--shadow);padding:22px 22px 18px}
.lp-q small{display:block;font-size:13px;font-weight:800;letter-spacing:2px;color:#A39C8E;margin-bottom:10px}
.lp-q p{margin:0;font-family:'Zen Old Mincho',serif;font-weight:900;font-size:27px;line-height:1.45}

/* level: five steps going up, your level stands out */

/* app: the record screen shows the level moving over time */
.lp-app{background:var(--paper2)}
.lp-app .lp-kick{display:flex;align-items:center;gap:8px}
.lp-app .badges{margin-top:-4px}
.lp-phone{width:min(250px,70vw);margin:0 auto;aspect-ratio:9/17;border-radius:40px;background:#141414;padding:10px;box-shadow:0 30px 60px rgba(40,25,10,.22)}
.lp-phone .scr{height:100%;border-radius:31px;background:#FAF8F3;padding:26px 18px 18px;display:flex;flex-direction:column}
.lp-phone .rt{margin:0 0 10px;font-weight:800;font-size:17px}
.lp-phone .chart{position:relative;flex:1;margin:4px 0 6px 18px}

.lp-phone .chart i{position:absolute;left:var(--x);bottom:calc(var(--y) * 20%);width:38px;height:38px;margin:0 0 -19px -19px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 16px rgba(201,61,39,.3)}
.lp-phone .chart i b{font-family:'Archivo',sans-serif;font-style:normal;font-weight:800;font-size:17px;color:#fff}

/* hero: the result card sits on the photo (Speak-style product card over a real photo) */
.lp-photo>div{position:relative;overflow:visible!important}
.lp-photo img{border-radius:inherit}
.lp-photo{position:relative;margin-bottom:64px}
.lp-photo figcaption{position:absolute;left:12px;top:12px;background:rgba(255,255,255,.94);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:700;color:var(--ink)}
.lp-over{position:absolute;left:auto;right:12px;bottom:-60px;width:min(86%,320px);background:rgba(255,255,255,.97);border-radius:18px;box-shadow:0 14px 34px rgba(0,0,0,.22);padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.lp-over p{margin:0}
.lp-over .lp-lbl{text-transform:uppercase}
.lp-over .b{font-family:'Zen Old Mincho',serif;font-weight:900;font-size:19px;line-height:1.45}
.lp-over .ul{background:linear-gradient(var(--red),var(--red)) 0 100%/100% 4px no-repeat;padding-bottom:3px}
.lp-over .ba-arrow{width:20px;height:20px;margin:0 auto;color:var(--red);rotate:0deg}
.lp-over .g{background:var(--pink);border-left:4px solid var(--red);border-radius:10px;padding:6px 12px;font-weight:700;font-size:17px;line-height:1.4}
.lp-over rt{font-size:.42em}

/* band: one line said big */

/* method: three big rounded cards */
.lp-method{background:var(--paper2)}
.lp-method .lp-kick,.lp-app .lp-kick{color:var(--red-d)}
.lp-method .lp-in{gap:18px}
.lp-mk{text-align:center}
.lp-mh{text-align:center;margin-bottom:10px}
.lp-step{background:#fff;border-radius:28px;box-shadow:0 10px 30px rgba(40,25,10,.07);padding:24px 20px 20px;display:flex;flex-direction:column;gap:18px}
.lp-st{display:flex;flex-direction:column;gap:10px}
.lp-sl{margin:0;display:flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:700;font-size:16px;letter-spacing:0;color:var(--ink)}
.lp-sl b{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-family:'Archivo',sans-serif;font-size:15px}
.lp-st h3{margin:0;font-family:var(--serif);font-weight:900;font-size:28px;line-height:1.25;font-feature-settings:"palt";overflow-wrap:break-word}
.lp-st h3 em{font-style:normal;color:var(--red)}
.lp-sd{margin:0;font-size:15px;line-height:1.7;color:var(--ink2)}
.lp-sv{background:var(--paper);border-radius:20px;padding:12px}
.lp-sv .lp-q{box-shadow:0 8px 20px rgba(40,25,10,.08)}

/* end */
.lp-end{background:var(--ink);color:#F6F4EF}
.lp-end .lp-cap{color:#F6F4EF;font-size:32px}
.lp-end .lp-cap em{color:#FF7A60}
.lp-more{padding-top:40px}
.lp-more .lp-in{gap:16px}

.badges{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.badges a{display:inline-flex;line-height:0}
.badges img.apple{height:44px;width:auto}
.badges img.play{height:57.3px;width:auto;margin:-6.7px 0 -6.6px}

.lp-faq{margin-top:22px}
.lp-faq h2{margin:0 0 6px;font-size:15px;font-weight:700;color:var(--ink2)}
.lp-faq details{border-top:1px solid #DDD7CB}
.lp-faq details:last-child{border-bottom:1px solid #DDD7CB}
.lp-faq summary{list-style:none;cursor:pointer;padding:16px 0;font-size:16px;font-weight:700;display:flex;justify-content:space-between;gap:12px}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:"+";font-weight:500;font-size:20px;line-height:1;color:var(--ink2)}
.lp-faq details[open] summary::after{content:"−"}
.lp-faq p{margin:0 0 16px;font-size:15px;line-height:1.75;color:var(--ink2)}
.lp-faq p a{color:var(--ink)}

/* example: before -> after */

.ba-arrow{width:30px;height:30px;margin:0 auto;color:var(--red)}

/* phone: text and picture blocks flow as one column in the order set below */
@media (max-width:899px){.lp-app .lp-txt{display:contents}.lp-txt{display:contents}.lp-vis{display:flex;flex-direction:column;gap:22px}.o1{order:1}.o2{order:2}.o3{order:3}.o4{order:4}.o5{order:5}}

/* PC: wide, big type, big pictures, sections alternate paper / white */
@media (min-width:900px){
  .lp-sec{padding:120px 56px}
  .lp-in{max-width:1120px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:96px;row-gap:28px;align-items:center}
  .lp-in>.lp-txt,.lp-in>.lp-vis{display:flex;flex-direction:column;gap:28px}
  .lp-cap{font-size:64px;line-height:1.14}
  .lp-note{font-size:18px;margin:0}

  .lp-cta{max-width:420px;min-height:66px;font-size:20px;border-radius:999px}
  /* hero */
  .lp-hero{padding:64px 56px 112px}
  .lp-hero .lp-in{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);column-gap:72px}
  .lp-hero .lp-cap{font-size:66px;margin:0}
  .lp-sub{font-size:20px;margin:0}
  .lp-kick{font-size:16px}
  .lp-photo>div{height:600px;border-radius:28px}
  .lp-photo figcaption{font-size:14px}
  /* speak */
  .lp-q{padding:40px 40px 30px;border-radius:30px}
  .lp-q small{font-size:15px}
  .lp-q p{font-size:42px}

  /* example: one wide row */
  

  .ba-arrow{width:56px;height:56px;rotate:-90deg;flex:none}
  /* level: one wide centred row of steps */
  

  /* app */
  .lp-phone{width:340px}
  .lp-phone .chart i{width:46px;height:46px;margin:0 0 -23px -23px}
  .lp-phone .chart i b{font-size:20px}
  .lp-app .lp-note{max-width:440px}
  /* hero card and band and method */
  .lp-photo{margin-bottom:0}
  .lp-over{left:-80px;right:auto;bottom:40px;width:310px;padding:18px 20px}
  .lp-over .b{font-size:22px}.lp-over .g{font-size:20px}

  .lp-method .lp-in{display:flex;flex-direction:column;gap:28px}
  .lp-mh{margin-bottom:24px}
  .lp-step{padding:40px;border-radius:40px}
  .lp-st h3{font-size:40px}
  .lp-sd{font-size:18px}
  .lp-sv{padding:36px;border-radius:28px}

.lp-step .ba-arrow{width:34px;height:34px;rotate:0deg}
  /* end */
  .lp-end{padding:140px 56px}
  .lp-end .lp-in,.lp-more .lp-in{display:flex;flex-direction:column;max-width:760px;text-align:center;align-items:center}
  .lp-end .lp-cap{font-size:80px}
  .lp-end .lp-cta{width:100%}
  .lp-more{padding:72px 56px 96px}
  .lp-more .badges{justify-content:center}
  .lp-faq{width:100%;text-align:left}
}

/* motion: only when html.mo is set (JS on, motion allowed). Everything is visible without it. */
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

@keyframes draw{from{background-size:0% 5px}to{background-size:100% 5px}}

@keyframes grow{from{transform:scaleY(0)}to{transform:none}}
.mo [data-a]{opacity:0}
.mo [data-a].on{opacity:1;animation:up .8s cubic-bezier(.2,.7,.2,1) both}
.mo .lp-hero [data-a].on:nth-child(2){animation-delay:.12s}
.mo .lp-hero .lp-cta[data-a].on{animation-delay:.24s}
.mo .lp-photo[data-a].on{animation:up 1s cubic-bezier(.2,.7,.2,1) .1s both}
/* example: the red line is drawn, then the better sentence arrives */

@media (min-width:900px){@keyframes draw{from{background-size:0% 7px}to{background-size:100% 7px}}}
/* speak: the recorder wave moves while the card is on screen */

/* level: steps grow one by one, then your level lands */

/* app: the level dots appear one after another */
@keyframes pop{0%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:none}}
.mo .lp-phone.on{animation:up .8s cubic-bezier(.2,.7,.2,1) both}
.mo .lp-phone .chart i{opacity:0}
.mo .lp-phone.on .chart i{animation:pop .5s cubic-bezier(.2,.8,.3,1.2) calc(.5s + var(--n) * .28s) both}
/* hero card and AI card motion */
.mo .lp-photo.on .lp-over{animation:up .7s cubic-bezier(.2,.7,.2,1) .5s both}
.mo .lp-photo.on .lp-over .ul{animation:draw .5s 1.1s cubic-bezier(.6,0,.3,1) both}
.mo .lp-photo.on .lp-over .g{animation:up .5s 1.5s both}

/* the first screen is never hidden: it only rises and settles (keeps the first frame complete) */
@keyframes rise{from{transform:translateY(18px)}to{transform:none}}
.mo .lp-hero [data-a]{opacity:1}
.mo .lp-hero [data-a].on{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.mo .lp-hero .lp-photo[data-a].on{animation:none}
@media (prefers-reduced-motion:reduce){.mo [data-a],.mo [data-a] *{animation:none!important;opacity:1!important}.mo .lp-phone .chart i{opacity:1!important}.lp-over *{opacity:1!important}}
/* print: show everything, no motion */
@media print{.mo [data-a],.mo [data-a] *{opacity:1!important;animation:none!important;transform:none!important}.mo .lp-phone .chart i{opacity:1!important}.lp-over *{opacity:1!important}}

/* method cards: side by side only when there is room */
.lp-steps{display:grid;gap:18px}
.lp-step{width:100%}.lp-st,.lp-sv{min-width:0}
@media (min-width:1100px){.lp-steps{grid-auto-rows:1fr;gap:28px}.lp-step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:stretch;padding:48px}.lp-st{justify-content:center}.lp-st h3{font-size:46px}.lp-sv{display:flex;flex-direction:column;justify-content:center}.lp-sv .lp-q p{font-size:32px}}
/* labels on the sample so non-Japanese readers can follow it */
.lp-lbl{display:block;font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:1px;color:var(--ink2);margin-bottom:2px}

/* PC: the listener's upper body fills the frame */
@media (min-width:900px){.lp-clip img{transform:scale(1.32);transform-origin:50% 8%}}
@media (max-width:360px){.lp-over{left:12px;right:12px;width:auto}}

/* phones: fewer words (NT 11/10). The picture and headline carry each section. */
@media (max-width:899px){
  .lp-sub,.lp-step:not(.me) .lp-sd{display:none}
  .lp-sv .lp-q p{font-size:23px}
  .lp-sv .lp-q{padding:18px 18px 16px}
  .lp-hero .lp-in{gap:18px}
}

/* LP v10 (2026-11-11): AI asks back, situation card, six skills (form S) */

/* v11 (2026-11-11, NT「スマホのところがチープでワクワクが弱い」): the three steps show the real screens in a phone, cut off at the bottom so the screen is large. */
.lp-sv.pz{position:relative;margin:4px -20px -20px;padding:22px 0 0;border-radius:0 0 28px 28px;background:linear-gradient(180deg,#F7F3EA 0,#EDE7D9 100%);display:flex;justify-content:center;height:430px;overflow:hidden}
.pz::before{content:"";position:absolute;left:50%;top:40px;width:300px;height:300px;margin-left:-150px;border-radius:50%;background:radial-gradient(circle,rgba(201,61,39,.16),rgba(201,61,39,0) 70%)}
.pz .ph{position:relative;flex:none;width:272px;height:560px;border-radius:44px;background:#17130F;padding:9px;box-shadow:0 30px 50px rgba(40,25,10,.28),0 4px 10px rgba(40,25,10,.2)}
.pz .scr{position:relative;height:100%;border-radius:36px;background:#F4F5F7;overflow:hidden;padding:18px 18px 0;display:flex;flex-direction:column;font-family:var(--sans);color:#17130F;text-align:left}
.pz .scr::before{content:"";position:absolute;top:8px;left:50%;width:78px;height:22px;margin-left:-39px;border-radius:12px;background:#17130F}
.pz [lang="ja"]{font-family:'Zen Kaku Gothic New','Hiragino Sans',sans-serif}
.pz p{margin:0}
.pz-bar{display:flex;align-items:center;gap:10px;margin-top:26px}
.pz-x{flex:none;width:30px;height:30px;border-radius:50%;background:#E9EAEE;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.pz-prog{flex:1;display:flex;gap:4px}
.pz-prog i{flex:1;height:5px;border-radius:3px;background:#E1E2E7}
.pz-prog i.on{background:var(--red)}
.pz-chip{align-self:flex-start;max-width:100%;margin-top:22px;font-size:12px;font-weight:700;line-height:1.3;background:var(--red);color:#fff;border-radius:999px;padding:5px 12px}
.pz .pz-q{margin-top:12px;font-weight:900;font-size:23px;line-height:1.45;white-space:nowrap}
.pz-micw{margin-top:34px;display:flex;flex-direction:column;align-items:center;gap:12px}
.pz-mic{position:relative;width:74px;height:74px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 22px rgba(201,61,39,.35)}
.pz-mic::before,.pz-mic::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--red);opacity:0}
.pz-mic svg{width:32px;height:32px}
.pz-micw p{font-size:14px;font-weight:700;text-align:center}
.pz-micw .t{color:#6E717B;font-weight:500;margin-left:6px}
.pz .pz-tags{display:flex;align-items:center;gap:8px;margin-top:26px;font-size:11px;font-weight:700;color:var(--ink2)}
.pz-tag{font-size:11px;font-weight:800;border:1.5px solid #17130F;border-radius:999px;padding:2px 10px}
.pz .pz-h{margin-top:12px;font-size:15px;font-weight:700;line-height:1.35;color:var(--ink2)}
.pz-spot{margin-top:10px;background:#fff;border-radius:18px;padding:14px;box-shadow:0 4px 12px rgba(0,0,0,.05)}
.pz .pz-you{margin-top:4px;font-weight:900;font-size:16px;line-height:1.5;white-space:nowrap}
.pz-you u{text-decoration:none;background:linear-gradient(var(--red),var(--red)) 0 100%/100% 3px no-repeat;padding-bottom:2px}
.pz .k{display:block;font-size:12px;font-weight:800;color:var(--red);margin-bottom:2px}
.pz .pz-why{margin-top:14px;font-size:14px;font-weight:700;line-height:1.55;color:var(--ink2)}
.pz .pz-fix{margin-top:12px;background:#FBF1EE;border-radius:12px;padding:10px 12px;font-weight:900;font-size:16px;line-height:1.5}
.pz-fix [lang="ja"]{white-space:nowrap}
.pz-fix small{display:block;font-size:12px;font-weight:500;font-style:italic;color:var(--ink2)}
.pz-fix small:empty{display:none}
.pz .pz-who{display:flex;align-items:center;gap:8px;margin-top:26px;font-size:11px;font-weight:700;line-height:1.3;color:var(--ink2)}
.pz-who img{flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 18%}
.pz-top{margin-top:8px;background:#fff;border-radius:18px;padding:12px 16px;box-shadow:0 4px 12px rgba(0,0,0,.05)}
.pz-top small{display:block;font-size:11.5px;font-weight:700;line-height:1.35;color:#6E717B}
.pz .pz-top .big{margin:4px 0 6px;font-weight:900;font-size:28px;line-height:1.2;display:flex;align-items:center;gap:8px}
.pz-top .big::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:4px solid #2E8B57}
.pz .cnt{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:11px;font-weight:700;color:var(--ink2)}
.pz-six{margin-top:10px;background:#fff;border-radius:18px;padding:12px 14px 60px;box-shadow:0 4px 12px rgba(0,0,0,.05);display:grid;grid-template-columns:112px minmax(0,1fr);gap:8px;align-items:center}
.pz-six svg{width:112px;height:112px}
.pz-six .g{fill:none;stroke:#D9DAE0;stroke-width:1.5}
.pz-six .poly{fill:rgba(201,61,39,.18);stroke:var(--red);stroke-width:4;stroke-linejoin:round}
.pz .pz-six .nxt{grid-column:1/-1;grid-row:1;justify-self:start;margin-bottom:2px;font-size:12px;font-weight:800;color:var(--red);background:#FBF1EE;border-radius:999px;padding:4px 12px}
.pz-six ul{list-style:none;margin:0;padding:0;display:grid;gap:2px;font-size:11px;font-weight:700;min-width:0}
.pz-six li{display:flex;justify-content:space-between;gap:6px;min-width:0}
.pz-six li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pz-six li b{font-family:'Archivo',sans-serif;font-weight:800}
.pz-six li.nx{color:var(--red)}
@keyframes pzring{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.9);opacity:0}}
.mo .pz.on .pz-mic::before{animation:pzring 2.2s ease-out infinite}
.mo .pz.on .pz-mic::after{animation:pzring 2.2s ease-out 1.1s infinite}
@keyframes pzdraw{from{background-size:0% 3px}to{background-size:100% 3px}}
.mo .pz.on .pz-you u{animation:pzdraw .5s .7s cubic-bezier(.6,0,.3,1) both}
.mo .pz.on .pz-fix{animation:up .5s 1.2s both}
.mo .pz.on .pz-six .poly{animation:up .6s .6s both}
@media (prefers-reduced-motion:reduce){.pz *,.pz *::before,.pz *::after{animation:none!important;opacity:1}.pz-mic::before,.pz-mic::after{opacity:0!important}}
@media (min-width:1100px){.lp-sv.pz{margin:0;border-radius:28px;height:500px;padding-top:34px}.pz .ph{transform:scale(1.12);transform-origin:50% 0}}
/* longer words (en, id, vi): smaller hexagon, names may wrap instead of being cut */
:lang(en) .pz-six,:lang(id) .pz-six,:lang(vi) .pz-six{grid-template-columns:90px minmax(0,1fr)}
:lang(en) .pz-six svg,:lang(id) .pz-six svg,:lang(vi) .pz-six svg{width:90px;height:90px}
:lang(en) .pz-six li span,:lang(id) .pz-six li span,:lang(vi) .pz-six li span{white-space:normal;line-height:1.2}
:lang(en) .pz-six ul,:lang(id) .pz-six ul,:lang(vi) .pz-six ul{font-size:10.5px;gap:3px}
:lang(en) .pz .pz-six .nxt,:lang(id) .pz .pz-six .nxt,:lang(vi) .pz .pz-six .nxt{font-size:11px;padding:3px 10px}
:lang(en) .pz .pz-top .big,:lang(id) .pz .pz-top .big,:lang(vi) .pz .pz-top .big{font-size:22px}
/* wider screens: the card's padding grows at 900px, and at 1100px the picture sits beside the words */
@media (min-width:900px){.lp-sv.pz{margin:4px -40px -40px;padding:28px 0 0;border-radius:0 0 40px 40px;height:470px}}
@media (min-width:1100px){.lp-sv.pz{flex-direction:row;justify-content:center;align-items:flex-start;margin:0;padding:34px 0 0;border-radius:28px;height:500px}}

/* v12 (2026-11-12): the app section's phone shows the app's real record screen: what changed since last time. */
.lp-phone .scr.rec{background:#F4F5F7;padding:30px 14px 0;gap:10px;overflow:hidden;font-family:var(--sans);color:#17130F}
.lp-phone .scr.rec .rt{margin:0 4px 2px;font-weight:900;font-size:22px}
.lp-phone .rc{background:#fff;border-radius:18px;padding:14px 14px 12px;box-shadow:0 4px 12px rgba(0,0,0,.05)}
.lp-phone .rc p{margin:0}
.lp-phone .rh{font-size:12px;font-weight:700;color:#6E717B;margin-bottom:8px!important}
.lp-phone .gr{display:flex;align-items:center;gap:8px;padding:7px 0;font-weight:700;font-size:15px;border-top:1px solid #EEEFF2}
.lp-phone .gr span{flex:1;min-width:0}
.lp-phone .gr b{font-family:'Archivo',sans-serif;font-weight:800;font-size:17px}
.lp-phone .gr .was{color:#A0A3AD}
.lp-phone .gr .ar{width:16px;height:2px;background:#C8CAD1;position:relative}
.lp-phone .gr .ar::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:2px solid #C8CAD1;border-right:2px solid #C8CAD1;transform:rotate(45deg)}
.lp-phone .gr .now{width:32px;height:32px;border-radius:50%;background:var(--red);color:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 6px 12px rgba(201,61,39,.3)}
.lp-phone .gn{margin-top:10px!important;padding:9px 12px;border-radius:12px;background:#E9F5EE;color:#1F6B43;font-size:13px;font-weight:700;line-height:1.45}
.lp-phone .gn strong{font-weight:900;font-size:15px}
.lp-phone .rc.hx{flex:1;display:flex;justify-content:center;padding:6px 0 0;border-radius:18px 18px 0 0}
.lp-phone .hx svg{width:78%;max-width:190px;height:auto;align-self:flex-start}
.lp-phone .hx .g{fill:none;stroke:#D9DAE0;stroke-width:1.5}

.lp-phone .hx .poly{fill:rgba(201,61,39,.18);stroke:var(--red);stroke-width:4;stroke-linejoin:round}
@keyframes v12pop{0%{transform:scale(.3);opacity:0}100%{transform:scale(1);opacity:1}}
.mo .lp-phone.on .gr .now{animation:v12pop .5s cubic-bezier(.2,.8,.3,1.4) .6s both}
.mo .lp-phone.on .gr + .gr .now{animation-delay:.9s}
.mo .lp-phone.on .gn{animation:up .5s 1.3s both}
@media (prefers-reduced-motion:reduce){.lp-phone .gr .now,.lp-phone .gn{animation:none!important;opacity:1!important}}
@media (min-width:900px){
  .lp-phone .scr.rec{padding:38px 18px 0;gap:12px}
  .lp-phone .scr.rec .rt{font-size:26px}
  .lp-phone .gr{font-size:18px;padding:9px 0}.lp-phone .gr b{font-size:20px}.lp-phone .gr .now{width:38px;height:38px}
  .lp-phone .rh{font-size:13px}.lp-phone .gn{font-size:15px}.lp-phone .gn strong{font-size:17px}
  /* store badges: larger beside a large headline (NT 11/12「PC だと小さい」) */
  .badges{gap:16px}
  .badges img.apple{height:58px}
  .badges img.play{height:75.5px;margin:-8.8px 0 -8.7px}
}
.lp-phone .gn{font-size:12.5px}
.lp-phone .gn strong{display:block;font-size:19px;line-height:1.3}
.lp-phone .gn strong::before{content:"";display:inline-block;width:13px;height:13px;border-radius:50%;border:3px solid #2E8B57;margin-right:7px;vertical-align:-1px}
@media (min-width:900px){.lp-phone .gn{font-size:14px}.lp-phone .gn strong{font-size:22px}}

/* the app shows the hexagon (now) first, then what changed since last time: same order here, and no "last time" outline (the app does not draw one) */
.lp-phone .rc.hx{flex:none;border-radius:18px;padding:8px 0 6px}
.lp-phone .hx svg{width:46%;max-width:150px}
.lp-phone .gr .was{color:#8A8D97}
@media (min-width:900px){.lp-phone .hx svg{width:66%;max-width:215px}.lp-phone .rc.hx{padding:14px 0 10px}}

/* what AUN is: between the hero and the steps, for a visitor who knows nothing yet */
.lp-what{padding-top:52px}
.lp-what .lp-in{gap:16px;max-width:760px}
.lp-what .lp-kick{color:var(--red-d)}
.lp-what .lp-cap{font-size:32px}
.lp-wd{margin:4px 0 0;font-size:17px;line-height:1.9;color:var(--ink)}
.lp-wf{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.lp-wf li{padding:8px 16px;border-radius:999px;background:#fff;font-size:15px;font-weight:700;box-shadow:0 4px 14px rgba(40,25,10,.06)}
@media (min-width:900px){
  .lp-what{padding:24px 56px 120px}
  .lp-what .lp-in{display:flex;flex-direction:column;gap:24px;max-width:860px;align-items:center;text-align:center}
  .lp-what .lp-cap{font-size:56px}
  .lp-wd{font-size:20px;max-width:720px}
  .lp-wf{justify-content:center;gap:12px}
  .lp-wf li{font-size:17px;padding:10px 22px}
}