.lp-v4 { --v4-accent: #b56348; }
html:is([lang="en"], [lang="es"], [lang="pt"]) .lp-v4 .display-lg { line-height: 1.12; font-size: clamp(34px, 4vw, 48px); }
html:is([lang="en"], [lang="es"], [lang="pt"]) .lp-v4 .v4-copy p:not(.v4-kicker) { line-height: 1.8; }
.lp-v4 .display-lg { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.55; letter-spacing: -.025em; }
.v4-story { padding: 112px 0; }
.v4-story--soft { background: var(--surface-soft); }
.v4-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: center; }
.v4-kicker { color: var(--v4-accent); font-size: 14px; letter-spacing: .12em; margin: 0 0 18px; font-weight: 600; }
.v4-copy p:not(.v4-kicker) { font-size: 17px; line-height: 1.95; color: var(--body); margin: 22px 0 0; }
.v4-review { background: var(--canvas); border-radius: 20px; padding: 30px 28px; }
.v4-review svg { display: block; width: 100%; height: auto; }
.v4-review figcaption { margin: 20px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.v4-recall { display: flex; gap: 22px; align-items: start; justify-content: center; }
#daily-learning .v4-copy { max-width: 760px; margin: 0 auto; text-align: center; }
.lp-v4 .section-header__sub { font-size: 17px; line-height: 1.95; }
.lp-v4 .privacy { padding: 80px 0; }
.lp-v4 .privacy__lead { line-height: 1.95; }
.lp-v4 .faq-item__a { font-size: 16px; line-height: 1.9; }
.lp-v4 .demo-live__layout { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
.lp-v4 .demo-live__layout > * { min-width: 0; }
@media (max-width: 900px) {
  .lp-v4 .demo-live__layout { grid-template-columns: minmax(0, 1fr); }
}
.lp-v4 .final-cta__title { line-height: 1.6; }
.lp-v4 a:focus-visible, .lp-v4 button:focus-visible { outline: 3px solid var(--v4-accent); outline-offset: 5px; }
@media (max-width: 800px) {
  .v4-split { grid-template-columns: 1fr; gap: 40px; }
  .v4-story { padding: 68px 0; }
  .v4-review { margin: 0; padding: 24px 16px; }
  .v4-recall { gap: 14px; }
}
@media (max-width: 420px) {
  .lp-v4 .nav .btn { font-size: 12px; padding: 10px 12px; }
  .lp-v4 .nav__brand { gap: 5px; }
}
/* Letter-hint examples are explanatory typography, not native UI replicas. */
.v4-hint-example { margin: 0; padding: 32px 20px; background: #f0e9dd; border-radius: 20px; text-align: center; align-self: stretch; }
.v4-hint-example figcaption { color: #6c6a64; font-size: 15px; line-height: 1.6; min-height: 3.2em; }
.v4-hint-mask { margin: 26px 0; font-family: "Avenir Next", sans-serif; font-size: clamp(24px, 3vw, 38px); letter-spacing: .08em; line-height: 1.4; white-space: nowrap; color: #38332e; }
/* Short-copy body with one large visual per section (the LP pages: index, ja, ko, zh-hans, es).
   Rules on ids/classes shared with other pages are scoped to html.lp (set on every LP page's <html>). */
html.lp .lp-v4 #try .v4-recall { width: 100%; max-width: 380px; align-self: center; }
html.lp .lp-v4 #try .section-header .v4-kicker { margin-bottom: 12px; }
html.lp .lp-v4 #try .v4-recall { flex-direction: column; align-items: stretch; gap: 10px; }
html.lp .lp-v4 #try .v4-hint-example { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 16px 18px; border-radius: 16px; text-align: left; }
html.lp .lp-v4 #try .v4-hint-example figcaption { min-height: 0; min-width: 0; font-size: 14px; line-height: 1.5; }
html.lp .lp-v4 #try .v4-hint-example--demo { box-shadow: inset 0 0 0 2px var(--primary); }
html.lp .lp-v4 #try .v4-hint-demo-note { display: block; color: #9a4f37; font-size: 12px; font-weight: 600; line-height: 1.4; }
html.lp .lp-v4 #try .v4-hint-mask { flex: none; margin: 0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 24px; letter-spacing: .06em; }
.v4-band-dark { background: var(--surface-dark); color: var(--on-dark); overflow: hidden; }
.v4-band-dark .display-lg { color: var(--on-dark); }
.v4-band-dark .v4-kicker { color: var(--primary); }
.v4-band-dark .v4-copy p:not(.v4-kicker) { color: var(--on-dark-soft); }
.v4-band-canvas { background: var(--canvas); }
.v4-tapstage { position: relative; width: 100%; max-width: 440px; margin: 0 auto; aspect-ratio: 1 / 1.5; }
.v4-tapstage img { position: absolute; width: 60%; height: auto; border: 5px solid var(--surface-dark-elev); border-radius: 30px; background: var(--canvas); box-shadow: 0 24px 50px rgba(0, 0, 0, .45); }
.v4-tapstage__before { left: 2%; top: 1%; transform: rotate(-4deg); }
.v4-tapstage__after { right: 2%; top: 13%; transform: rotate(3deg); z-index: 1; }
html.lp .lp-v4 #how .v4-review { background: var(--surface-soft); }
html.lp .lp-v4 #how .v4-review svg { max-width: 300px; margin: 0 auto; }
.v4-due { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.v4-due li { display: flex; flex-direction: column; background: var(--canvas); border-radius: 14px; overflow: hidden; box-shadow: 0 8px 22px rgba(20, 20, 19, .10); }
.v4-due img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.v4-due b { font-size: clamp(13px, 3.6vw, 16px); font-weight: 600; padding: 9px 8px 0; color: var(--ink); }
.v4-due__when { margin: 6px 8px 10px; padding: 0; text-align: left; font-size: clamp(11px, 3.2vw, 14px); white-space: nowrap; color: var(--muted); }
.v4-due__label { margin: 0 0 12px; font-size: 13px; color: var(--muted); text-align: center; }
.v4-homeshot { margin: 0; }
.v4-homeshot img { display: block; width: min(78%, 300px); height: auto; margin: 0 auto; border: 6px solid #282725; border-radius: 34px; box-shadow: 0 24px 50px rgba(20, 20, 19, .18); }
.v4-wordgrid { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.v4-wordgrid li { position: relative; border-radius: 12px; overflow: hidden; }
.v4-wordgrid li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(to top, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0)); }
.v4-wordgrid img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.v4-wordgrid span { position: absolute; z-index: 1; left: 9px; bottom: 7px; color: var(--on-dark); font-size: 13px; font-weight: 600; text-shadow: 0 1px 4px rgba(0, 0, 0, .7); }
.v4-ctagrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 420px; margin: 0 auto 30px; }
.v4-ctagrid img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
@media (min-width: 801px) {
  .v4-wordgrid { grid-template-columns: repeat(9, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  html.lp .lp-v4 .privacy { padding: 64px 0; }
  html.lp .lp-v4 .final-cta { padding: 48px 0; }
  html.lp .lp-v4 .final-cta__card { padding: 36px 20px; }
}
@media (max-width: 420px) {
  html:is([lang="ja"], [lang="ko"], [lang="zh-Hans"], [lang="zh-Hant"]) .lp-v4 .final-cta__title { font-size: min(26px, 7.2vw); }
}
/* PC width (LP pages): center the sections whose content does not fill the 1200px container. */
@media (min-width: 901px) {
  html.lp .lp-v4 #try .section-header { margin: 0 auto; text-align: center; }
  html.lp .lp-v4 #try .demo-live__layout { grid-template-columns: 420px 380px; justify-content: center; column-gap: 72px; }
  html.lp .lp-v4 #try .v4-recall { gap: 14px; }
  html.lp .lp-v4 .privacy .section-header { margin: 0 auto; text-align: center; }
  html.lp .lp-v4 .privacy__lead { margin-left: auto; margin-right: auto; }
  html.lp .lp-v4 #faq .container { max-width: 880px; }
  html.lp .lp-v4 #faq .section-header { margin: 0 auto; text-align: center; }
}
/* Phone header (LP pages, same widths as the short store label): a store button sized to the logo. The tap areas
   stay at least 44px via padding / a transparent ::after. */
@media (max-width: 560px) {
  html.lp .lp-v4 .nav .btn.nav__store { position: relative; height: 38px; padding: 0 14px; font-size: 13px; }
  html.lp .lp-v4 .nav .btn.nav__store::after { content: ""; position: absolute; left: 0; right: 0; top: -3px; bottom: -3px; }
  /* Letter-hint cards: scale the mask with the width so caption + mask fit the container. */
  html.lp .lp-v4 #try .v4-hint-example { padding: 14px 16px; gap: 10px; }
  html.lp .lp-v4 #try .v4-hint-example figcaption { flex: 1 1 auto; overflow-wrap: anywhere; }
  html.lp .lp-v4 #try .v4-hint-mask { font-size: clamp(17px, 5.4vw, 24px); }
}
/* LP first view (every LP page, fv-shots.js): real app review screens (top crop) in a phone frame that fades out at the
   bottom; one screen at a time, crossfading. index.html has two (A1 live, A2 review only): its <head> script sets
   html.fv-a1 / html.fv-a2, and without it (no JS) A1 shows. */
html.fv-a2 [data-fv="a1"], html:not(.fv-a2) [data-fv="a2"] { display: none; }
.fvp { grid-area: stack; position: relative; width: min(100%, 272px); margin-top: 22px; }
.fvp__frame { position: relative; height: 424px; overflow: hidden; border: 9px solid #1b1a18; border-bottom: 0; border-radius: 46px 46px 0 0; background: #faf9f5; -webkit-mask-image: linear-gradient(to bottom, #000 94%, transparent 100%); mask-image: linear-gradient(to bottom, #000 94%, transparent 100%); }
.fvp__shot { position: absolute; left: 0; top: 0; width: 100%; height: auto; transition: opacity .3s ease; }
.fvp__shot.is-hidden { opacity: 0; }
.fvp .fvc__toggle { right: 18px; top: auto; bottom: 4px; }
@media (max-width: 340px) {
  .fvp { width: 248px; }
  .fvp__frame { height: 386px; }
}
@media (min-width: 900px) {
  .fvp { justify-self: center; align-self: center; width: 320px; margin-top: 20px; }
  .fvp__frame { height: 500px; border-width: 10px; border-radius: 52px 52px 0 0; }
}
/* Reduced motion: one after-screen ([data-fvp-static]) without waiting for the script. */
@media (prefers-reduced-motion: reduce) {
  .fvp__shot { transition: none; }
  .fvp__frame .fvp__shot:not([data-fvp-static]) { opacity: 0; }
  .fvp__frame .fvp__shot[data-fvp-static] { opacity: 1; }
}
/* #try: the app's review screen before "Show answer" and the same screen after it, side by side. */
.v4-trypair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 420px; margin: 0 auto; align-self: center; }
.v4-trypair img { display: block; width: 100%; height: auto; border: 5px solid #282725; border-radius: 28px; background: var(--canvas); box-shadow: 0 18px 40px rgba(20, 20, 19, .16); }
@media (max-width: 420px) {
  .v4-trypair { gap: 10px; }
  .v4-trypair img { border-width: 4px; border-radius: 22px; }
}
/* #tap-word on the meaning-language LPs (ja / ko / zh-hans / es): heading and one sentence beside the tap stage (a dotted
   word in the English definition, then its popup). */
/* #tap-word sits directly above the privacy band on these pages; both are dark by default, so the privacy band turns
   light there and the two do not read as one dark block. */
.v4-band-dark + .privacy { background: var(--surface-soft); color: var(--ink); }
.v4-band-dark + .privacy .display-lg { color: var(--ink); }
.v4-band-dark + .privacy .privacy__lead { color: var(--body); }