/* public.css - the pages anyone sees before signing in: the landing page (land-), sign-in (si-), privacy and
   terms (legal-), the product previews drawn in HTML (pv-) and what they share (pub-: Tomo's stage, the
   footer). The landing page opens on the indigo band of the chosen design (its one seigaiha, Tomo lit as a
   lantern at night with her bubble), then calm white and washed bands on the 12-column measure. Colours and
   sizes only through the tokens in app.css, so light and dark both follow; every column can shrink to a
   320 px phone, every control there is at least 44 px tall with 8 px between neighbours, text people read is
   14 px or more (Japanese 18 px or more, with furigana that never move the lines), and nothing sits in a
   phone's notch band when it lies on its side. A point in a list has a small tick in the accent; a step done
   has the site's one done mark (app.css --i-done). */

/* Frames: the landing page runs edge to edge; sign-in and the legal pages keep the page width and end in
   the footer instead of the room the tutor needs when signed in. A page shorter than the window puts its
   footer on the window's foot (no band of bare background under it); a longer one ends 64 px after it. */
.page.public.land-page { max-width: none; padding: 0; }
.page.public.pub-page { padding-bottom: 0; display: flex; flex-direction: column; min-height: calc(100dvh - var(--bar-h) - env(safe-area-inset-top, 0px)); }
.pub-page > :first-child { width: 100%; margin-bottom: var(--s-8); }
/* full-width bands keep their backgrounds edge to edge; only what is in them keeps clear of the notch */
.pub-wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gut-r) 0 var(--gut-l); }
.pub-page .pub-wrap { padding: 0; }
/* On the sign-in page the bar's own Sign in button would only point back at itself. It is a quiet button (outline, ink
   words), so the page's one filled call is the hero's Ask for an invitation. */
body.signed-out:has(#main .si) #pubnav #signin { display: none; }

/* Tomo's stage: her speech bubble beside her, its tail toward her. */
.pub-stage { position: relative; display: flex; align-items: flex-end; justify-content: flex-end; gap: var(--s-3); min-width: 0; }
.pub-lola { position: relative; z-index: 1; display: block; flex: none; width: 200px; height: 250px; padding: 0; border: 0; background: none; min-height: 0; border-radius: var(--r-3); }
button.pub-lola { cursor: pointer; }
@media (hover: hover) { button.pub-lola:hover { border: 0; background: none; } }
.pub-lola svg { width: 100%; height: 100%; overflow: visible; }
.pub-bubble { position: relative; z-index: 2; flex: 0 1 300px; min-width: 0; margin: 0 0 var(--s-7); padding: var(--s-3) var(--s-4) var(--s-4); border-radius: var(--r-3); background: var(--bubble);
  border: 1px solid var(--bubble-line); box-shadow: var(--shadow-lg); transition: opacity .17s, transform .17s; color: var(--ink); }
.pub-bubble::before { content: "Tomo トモ"; display: block; font-size: var(--fs-14); font-weight: 700; color: var(--shu-text); letter-spacing: .02em; line-height: 1.5; }
.pub-bubble::after { content: ""; position: absolute; right: -9px; bottom: 26px; width: 16px; height: 16px; background: var(--bubble); border: solid var(--bubble-line); border-width: 1px 1px 0 0;
  transform: rotate(45deg) skew(8deg, 8deg); }
.pub-bubble.swap { opacity: 0; transform: translateY(4px); }
.pub-stage.no-art .pub-bubble { margin: 0; }
.pub-stage.no-art .pub-bubble::after { display: none; }
/* her Japanese in balanced lines, so a last kana (う。) is never left alone on a line of its own */
.pub-es { display: block; font-size: var(--fs-18); font-weight: 400; line-height: var(--lh-ruby); color: var(--ink); overflow-wrap: anywhere; text-wrap: balance; }
.pub-es rt { color: var(--rt); }
/* a phrase with a reading stays whole on its line (welcome.js phrased(); .ph is app.css's) */
.pub-en { display: block; margin-top: var(--s-1); font-size: var(--fs-14); line-height: 1.5; color: var(--ink-3); }

/* Hero: the indigo band, edge to edge, with its faint seigaiha on the right and Tomo lit on it */
.land-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(40px, 6vw, 88px) 0 clamp(40px, 5vw, 72px); background: var(--band); color: var(--band-ink);
  --tomo-shadow: rgba(0, 0, 0, .3); --tomo-rim: rgba(255, 255, 255, .3); --tomo-handle: #8A98C2; }
.land-hero::before { content: ""; position: absolute; z-index: -1; inset: 0 0 0 auto; width: 62%; background: var(--band-sg) right top / 44px 22px repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%); mask-image: linear-gradient(90deg, transparent, #000 55%); pointer-events: none; }
.land-hero-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s-6) var(--s-6); align-items: center; }
.land-stage .pub-lola { width: 180px; height: 225px; }
/* wide enough for いっしょに日本語を勉強しましょう。 on one line beside her */
.land-stage .pub-bubble { flex: 0 1 360px; min-width: 240px; }
.land-stage .pub-lola svg { filter: drop-shadow(0 0 var(--tomo-glow-size) var(--tomo-glow)); }
.land-eyebrow { display: inline-flex; align-items: center; min-height: 32px; padding: 4px var(--s-3); border-radius: var(--r-pill); background: var(--band-seg); color: var(--band-ink); font-size: var(--fs-14); font-weight: 700; letter-spacing: .02em; }
.land-copy h1 { font-size: clamp(36px, 4.6vw, var(--fs-56)); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; margin: var(--s-5) 0 var(--s-4); text-wrap: balance; color: var(--band-ink); }
.land-lead { font-size: clamp(17px, 1.5vw, var(--fs-20)); line-height: 1.6; color: var(--band-ink-2); max-width: 34em; margin: 0 0 var(--s-6); }
.land-cta { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.land-hero .land-cta .primary { background: var(--band-ink); border-color: var(--band-ink); color: var(--band); }
@media (hover: hover) { .land-hero .land-cta .primary:hover { background: var(--band-ink-2); border-color: var(--band-ink-2); } }
.land-hero .land-cta button:not(.primary), .land-hero .land-cta .btn:not(.primary) { background: transparent; color: var(--band-ink); border-color: var(--band-ink-2); }
@media (hover: hover) { .land-hero .land-cta button:not(.primary):hover, .land-hero .land-cta .btn:not(.primary):hover { background: var(--band-seg); } }
.land-hero :focus-visible { outline-color: var(--band-ink); }
.land-fine { margin: var(--s-4) 0 0; color: var(--ink-3); font-size: var(--fs-14); }
.land-hero .land-fine { color: var(--band-ink-2); }
/* her lantern light on the band, soft and capped */
.land-stage::before { content: ""; position: absolute; right: 20px; bottom: 10px; width: 300px; height: 300px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--tomo-lit) 22%, transparent), transparent 66%); }

/* Bands */
.land-band { padding: clamp(48px, 7vw, 96px) 0; }
.land-band.alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.land-head { max-width: 720px; margin-bottom: var(--s-6); }
.land-head .kicker { display: block; font-size: var(--fs-14); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent-text); }
.land-head h2 { font-size: clamp(28px, 3.2vw, var(--fs-40)); line-height: 1.15; font-weight: 700; letter-spacing: -.015em; margin: var(--s-2) 0 var(--s-3); text-wrap: balance; }
.land-head p { font-size: var(--fs-18); color: var(--ink-2); margin: 0; }
.land-two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6) var(--s-8); align-items: start; }
/* a step's or a feature's icon: a plain glyph before its title, in the quiet ink (nothing that looks pressable) */
.land-glyph { display: inline-block; width: 20px; height: 20px; margin-right: var(--s-2); vertical-align: -3px; color: var(--ink-3); }
.land-glyph svg { width: 20px; height: 20px; display: block; }

/* How it works: three numbered cards */
.land-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.land-steps li { padding: var(--s-5); border-radius: var(--r-2); background: var(--surface); border: 1px solid var(--line); min-width: 0; }
/* the step's number, a small label over its title (Step 1), not a box */
.land-num { display: block; margin-bottom: var(--s-2); font-size: var(--fs-14); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.land-steps h3, .land-features h3 { font-size: var(--fs-18); margin: 0 0 6px; }
.land-steps p, .land-features p { margin: 0; color: var(--ink-2); }

/* What you get */
.land-features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-6); }
.land-features li { min-width: 0; }


/* The previews: the product drawn in HTML, each on a tray with a caption under it. */
.pv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--grid-gap); }
.pv { margin: 0; display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.pv-frame { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--s-3); padding: var(--s-6); border-radius: var(--r-3); min-width: 0; background: var(--surface-2); border: 1px solid var(--line); }
.pv figcaption { color: var(--ink-2); font-size: var(--fs-16); padding: 0 var(--s-1); }
.pv figcaption b { color: var(--ink); }
.pv-flash, .pv-chat, .pv-plan, .pv-say { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); min-width: 0; }
.pv-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pv-icon { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); flex: none; }
.pv-icon svg { width: 18px; height: 18px; }
.pv-flash { padding: var(--s-4) var(--s-4) var(--s-5); text-align: center; }
.pv-es { font-size: clamp(30px, 3.2vw, var(--fs-40)); line-height: var(--lh-ruby-big); margin: var(--s-2) 0 var(--s-3); overflow-wrap: anywhere; }
.pv-ans { padding-top: var(--s-3); border-top: 1px dashed var(--line-strong); font-weight: 700; font-size: var(--fs-18); }
.pv-ex { margin-top: var(--s-1); color: var(--ink-2); font-size: var(--fs-18); line-height: var(--lh-ruby); }
.pv-grades { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pv-grades span { display: grid; place-items: center; min-height: 48px; border-radius: var(--r-2); font-weight: 700; }
.pv-again { background: var(--bad-soft); color: var(--bad-text); }
.pv-got { background: var(--good-soft); color: var(--good-text); }
.pv-chat { display: flex; flex-direction: column; gap: 10px; padding-bottom: var(--s-4); overflow: hidden; }
.pv-chathead { display: flex; align-items: center; gap: var(--s-2); padding: 9px 14px; border-bottom: 1px solid var(--line); }
.pv-mini { width: 28px; height: 35px; flex: none; }
.pv-mini svg { width: 100%; height: 100%; }
.pv-msg { max-width: 88%; margin: 0 14px; padding: 9px 13px; border-radius: var(--r-3); font-size: var(--fs-16); line-height: var(--lh-ruby); overflow-wrap: anywhere; }
.pv-msg.bot { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: var(--r-1); }
.pv-msg.me { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: var(--r-1); }
.pv-msg.me rt { color: var(--accent-ink); }
.pv-fix { display: block; margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line-strong); color: var(--accent-text); font-weight: 700; line-height: 1.6; }
.pv-plan { padding: var(--s-4) var(--s-5); display: grid; gap: 10px; justify-items: start; }
.pv-title { font-weight: 700; font-size: var(--fs-20); line-height: 1.3; }
.pv-days { list-style: none; margin: var(--s-1) 0 0; padding: 0; display: grid; gap: 10px; width: 100%; }
.pv-days li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-16); min-width: 0; }
.pv-box { width: 22px; height: 22px; border-radius: 50%; border: 2px dashed var(--line-strong); flex: none; display: grid; place-items: center; }
/* a step done gets the site's done mark */
.pv-days .done .pv-box { border: 0; background: var(--good); -webkit-mask: var(--i-done) center / contain no-repeat; mask: var(--i-done) center / contain no-repeat; }
.pv-box svg { display: none; }
.pv-day { font-weight: 700; color: var(--accent-text); font-size: var(--fs-14); min-width: 52px; flex: none; }
.pv-days .done > span:last-child { color: var(--ink-3); }
.pv-say { padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-3); }
.pv-say .pv-row:first-child { justify-content: flex-start; }
.pv-icon.mic { background: var(--accent); color: var(--accent-ink); }
.pv-sentence { margin: 0; font-size: clamp(24px, 2.6vw, var(--fs-30)); line-height: var(--lh-ruby-big); overflow-wrap: anywhere; }
.pv-sentence .ok { color: var(--good-text); }
.pv-sentence .near { color: var(--warn-text); text-decoration: underline wavy; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.pv-meter { height: 10px; border-radius: var(--r-1); background: var(--track); overflow: hidden; }
.pv-meter i { display: block; height: 100%; width: 82%; background: var(--dye-3); border-radius: var(--r-1); }
.pv-tip { margin: 0; padding: 10px var(--s-3); border-radius: var(--r-2); background: var(--warn-soft); font-size: var(--fs-14); }

/* Your level: what Tomo might say at each JLPT level, five across, one on a phone */
.land-accents { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); }
.land-accents li { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-4); border-radius: var(--r-2); background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.land-accents b { justify-self: start; display: inline-grid; place-items: center; min-width: 44px; min-height: 28px; padding: 2px 10px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font-size: var(--fs-14); }
.land-accents span { font-size: var(--fs-18); line-height: var(--lh-ruby); color: var(--ink); overflow-wrap: anywhere; }
.land-accents small { font-size: var(--fs-14); line-height: 1.5; }
.land-accents + .land-fine { margin: 0; }

/* Talk live: what it is beside a call, drawn (Tomo talking, a slip said back right, the End button). */
.land-live { align-items: center; }
.land-checks.plain { background: none; padding: 0; border: 0; }
.land-call { margin: 0; display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.land-call figcaption { color: var(--ink-2); font-size: var(--fs-16); padding: 0 var(--s-1); }
.land-call figcaption b { color: var(--ink); }
.pv-call { display: flex; flex-direction: column; gap: 10px; padding-bottom: var(--s-4); overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); min-width: 0; }
.pv-call .pv-chathead { flex-wrap: wrap; }
.pv-live { display: inline-flex; align-items: center; gap: 3px; margin-left: var(--s-1); padding: 3px 10px 3px 8px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-text); font-size: var(--fs-14); font-weight: 700; }
.pv-live i { display: block; width: 3px; height: 10px; margin-right: 1px; border-radius: 2px; background: currentColor; animation: pv-talk 1s ease-in-out infinite; }
.pv-live i:nth-child(2) { animation-delay: -.25s; }
.pv-live i:nth-child(3) { animation-delay: -.5s; }
.pv-live i:nth-child(4) { animation-delay: -.75s; margin-right: 5px; }
@keyframes pv-talk { 50% { transform: scaleY(.35); } }
.pv-clock { margin-left: auto; color: var(--ink-3); font-size: var(--fs-14); font-variant-numeric: tabular-nums; }
.pv-call mark { background: none; color: var(--accent-text); font-weight: 700; padding: 0; box-shadow: inset 0 -3px 0 var(--dye-1); border-radius: 0; }
.pv-end { display: flex; justify-content: center; padding-top: var(--s-1); }
.pv-hang { display: grid; place-items: center; min-width: 96px; min-height: 44px; padding: 0 20px; border-radius: var(--r-2); background: var(--bad-text); color: var(--surface); font-weight: 700; }

/* Your material stays yours: points, each with a small tick in the accent */
.land-yours .land-head { margin-bottom: var(--s-5); }
.land-checks { list-style: none; margin: 0; padding: var(--s-5); display: grid; gap: var(--s-4); border-radius: var(--r-2); background: var(--surface); border: 1px solid var(--line); }
.land-checks li { display: flex; gap: var(--s-3); align-items: flex-start; }
.land-tick { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; color: var(--accent-text); }
.land-tick svg { width: 20px; height: 20px; }

/* Questions */
.land-faq { border-top: 1px solid var(--line); }
.land-faq details { border-bottom: 1px solid var(--line); }
.land-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 60px; padding: var(--s-3) var(--s-1); font-weight: 700; font-size: var(--fs-18); cursor: pointer; border-radius: var(--r-2); }
.land-faq summary::-webkit-details-marker { display: none; }
.land-faq summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-right: 6px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: translateY(-3px) rotate(45deg); transition: transform .2s; }
.land-faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
@media (hover: hover) { .land-faq summary:hover { color: var(--accent-text); } }
.land-faq details p { margin: 0 var(--s-1) var(--s-5); color: var(--ink-2); max-width: 62ch; }

/* Ask for an invitation (the page's scroll-padding, in app.css, keeps it clear of the bar) */
.land-next { list-style: none; margin: var(--s-5) 0 0; padding: 0; counter-reset: next; display: grid; gap: var(--s-3); }
.land-next li { counter-increment: next; display: flex; gap: var(--s-3); align-items: flex-start; color: var(--ink-2); }
.land-next li::before { content: "0" counter(next); flex: none; min-width: 28px; color: var(--accent-text); font-weight: 700; font-size: var(--fs-14); letter-spacing: var(--track-label); font-variant-numeric: tabular-nums; line-height: 1.7; }
.land-joinbox { padding: var(--s-5); }
.land-notefield { display: grid; gap: 6px; }
.land-notefield label.field { display: block; }
.land-notehint { display: flex; justify-content: space-between; gap: 10px; }
.land-formnote { margin: 0; }
.pub-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.land-done { display: grid; gap: var(--s-1); justify-items: start; padding: 6px 0; }
.land-done:focus { outline: none; }
.land-done h3 { font-size: var(--fs-24); line-height: 1.2; margin: 10px 0 4px; }
.land-done p { margin: 0 0 6px; }
.land-done-ic { display: block; width: 48px; height: 48px; border-radius: 50%; background: var(--shu); -webkit-mask: var(--i-hanamaru) center / contain no-repeat; mask: var(--i-hanamaru) center / contain no-repeat; }
.land-done-ic svg { display: none; }

/* Footer */
.pub-foot { border-top: 1px solid var(--line); padding: var(--s-5) 0 var(--s-6); background: var(--surface); }
.land .pub-foot { background: var(--surface); }
.pub-page .pub-foot { margin-top: auto; }
.pub-foot .pub-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-5); align-items: center; }
.pub-foot-brand { display: grid; gap: 2px; }
.pub-foot-brand span { color: var(--ink-3); font-size: var(--fs-14); }
.pub-foot-brand span[lang=ja] { color: var(--ink); font-size: var(--fs-16); font-weight: 700; letter-spacing: .06em; }
.pub-foot-nav { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: flex-end; }
.pub-foot-nav a, .pub-foot-nav button { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-3); border-radius: var(--r-2); border: 0; background: none; color: var(--ink); font: 400 var(--fs-16)/1 var(--font-sans); text-decoration: none; }
@media (hover: hover) { .pub-foot-nav a:hover, .pub-foot-nav button:hover { background: var(--surface-2); } }
.pub-copy { grid-column: 1 / -1; margin: 6px 0 0; color: var(--ink-3); font-size: var(--fs-14); }

/* Sign in */
.si { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: var(--s-6) var(--s-8); align-items: center; padding: clamp(8px, 5vh, 56px) 0 var(--s-2); }
/* A short computer window (1440 × 900, a laptop): less air above and below the two columns and in the footer, so
   the code step (the longer one) fits without scrolling. */
@media (min-width: 721px) and (max-height: 1000px) {
  .page.public.pub-page:has(> .si) { padding-top: var(--s-3); }
  .si { padding-top: clamp(8px, 2vh, 24px); }
  .pub-page .pub-foot { padding: var(--s-3) 0 var(--s-4); }
  .si-card { padding: var(--s-5) var(--s-6); }
  .si-more { margin-top: var(--s-2); }
}
.si-side { display: grid; gap: var(--s-5); justify-items: center; min-width: 0; }
.si-stage { justify-content: center; }
.si-stage .pub-lola { width: 176px; height: 220px; }
.si-aside { color: var(--ink-2); max-width: 26em; text-align: center; margin: 0; }
.si-card { padding: var(--s-6); }
.si-card h1 { font-size: var(--fs-30); line-height: 1.2; letter-spacing: -.015em; }
.si-card form { margin-top: var(--s-4); }
.si-note { margin: var(--s-3) 0 0; padding: var(--s-3) 14px; border-radius: var(--r-2); background: var(--warn-soft); color: var(--ink); font-weight: 700; }
input.si-code { font: 700 var(--fs-26)/1 var(--mono); letter-spacing: .5em; text-align: center; padding-left: calc(12px + .5em); }
/* The address on a line of its own, breaking only before its @ and dots (welcome.js marks them). */
.si-addr { display: block; margin: 0 0 6px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.si-sent { margin-bottom: var(--s-1); }
.si-more { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 14px 0 var(--s-2); }
.si-more button { padding: 0 14px; }
#si-resend { gap: .3em; }
.si-wait { font-weight: 400; }
.si-wait:empty { display: none; }
.si-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); }

/* Privacy and terms */
.legal { max-width: 760px; margin: 0 auto; }
.legal .back { min-height: var(--tap); }
.legal h1 { font-size: clamp(32px, 4.2vw, var(--fs-40)); line-height: 1.1; letter-spacing: -.02em; margin: 6px 0; }
.legal-date { color: var(--ink-3); font-size: var(--fs-14); margin-bottom: var(--s-5); }
/* In short: one treatment, a quiet box (no accent rule beside it as well) */
.legal-short { padding: var(--s-5); border-radius: var(--r-2); background: var(--surface); border: 1px solid var(--line); }
.legal .legal-short h2 { font-size: var(--fs-14); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-label); color: var(--accent-text); margin: 0 0 var(--s-2); }
.legal-short ul { margin: 0; }
/* On this page (Privacy): its parts as a short list of jumps, after In short */
.legal-toc { margin-top: var(--s-5); }
.legal .legal-toc h2 { font-size: var(--fs-14); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-label); color: var(--ink-3); margin: 0 0 var(--s-1); }
.legal .legal-toc ul { list-style: none; padding: 0; gap: 0; margin: 0; border-top: 1px solid var(--line); }
.legal .legal-toc li { font-size: var(--fs-16); line-height: 1.4; border-bottom: 1px solid var(--line); }
.legal-toc a { display: flex; align-items: center; min-height: var(--tap); padding: var(--s-1) var(--s-1); color: var(--accent-text); text-decoration: none; font-weight: 700; }
@media (hover: hover) { .legal-toc a:hover { text-decoration: underline; } }
.legal > h2[tabindex]:focus { outline: none; }
.legal h2 { font-size: var(--fs-22); margin: var(--s-7) 0 10px; }
.legal p, .legal li, .legal dd { font-size: var(--fs-18); line-height: 1.65; }
.legal ul { padding-left: 22px; display: grid; gap: var(--s-2); margin: 0 0 var(--s-3); }
.legal-who { margin: 14px 0 0; border-top: 1px solid var(--line); }
.legal-who dt { font-weight: 700; padding-top: 14px; }
.legal-who dd { margin: 2px 0 0; padding-bottom: 14px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.legal-who dd ul { margin: var(--s-2) 0 0; }
.legal-end { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); }
@media (min-width: 721px) {
  .legal-who { display: grid; grid-template-columns: 190px minmax(0, 1fr); }
  .legal-who dt { padding: 14px var(--s-4) 14px 0; border-bottom: 1px solid var(--line); }
  .legal-who dd { margin: 0; padding: 14px 0; }
}

@media (max-width: 1099px) {
  .land-accents { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .land-hero-in, .land-two, .si { grid-template-columns: minmax(0, 1fr); }
  .land-stage { justify-content: center; }
  .land-stage .pub-lola { width: 176px; height: 220px; }
  .land-steps, .pv-grid { grid-template-columns: minmax(0, 1fr); }
  .land-accents { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .si { max-width: 520px; }
}
@media (max-width: 720px) {
  .pub-wrap { padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
  .land-hero::before { width: 100%; }
  /* the first screen holds the headline, Tomo's hello and Ask for an invitation (Sign in is in the bar), down to
     320 by 568: the lead goes under them */
  .land-hero { padding: var(--s-5) 0 var(--s-6); }
  .land-hero-in { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-4); }
  .land-copy { display: contents; }
  .land-eyebrow { order: 1; align-self: flex-start; }
  .land-copy h1 { order: 2; margin: 0; font-size: var(--fs-30); }
  .land-stage { order: 3; }
  .land-cta { order: 4; }
  .land-lead { order: 5; margin: 0; font-size: var(--fs-16); }
  .land-fine { order: 6; margin: 0; }
  .land-cta > * { flex: 1 1 100%; }
  .pub-lola, .land-stage .pub-lola { width: 88px; height: 110px; }
  .pub-bubble, .land-stage .pub-bubble { flex: 1 1 auto; min-width: 0; margin: 0 0 var(--s-4); padding: var(--s-2) var(--s-4) var(--s-3); }
  .pub-es { font-size: var(--fs-16); }
  .land-stage { justify-content: stretch; }
  /* Her hello on a phone: the bubble takes the whole width, so いっしょに日本語を勉強しましょう。 is one line from
     360 up (at 320 it breaks after 日本語を), its tail pointing down at Tomo, who stands clear of it, 8 px under its
     lower right corner, beside Ask for an invitation (which keeps her room): she costs the first screen no height,
     and her light glows round her there. */
  .land-stage { display: block; padding-bottom: 0; }
  .land-stage::before { width: 160px; height: 160px; right: -48px; bottom: -123px; }
  .land-stage .pub-bubble { margin: 0; }
  .land-stage .pub-bubble::after { display: block; right: 26px; bottom: -9px; transform: rotate(135deg) skew(8deg, 8deg); }
  .land-stage .pub-lola { position: absolute; z-index: 3; right: 4px; top: calc(100% + var(--s-2)); bottom: auto; width: 56px; height: 70px; }
  .land-hero .land-cta { padding-right: 72px; }
  .land-features { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  /* Calm on a phone: the hero, the three steps, one sample and the invitation. See more shows the rest where it
     is (welcome.js sets .more); the questions are in Help. The invitation is a plain band here, after a washed
     one either way. */
  .land:not(.more) :is(.land-x, .pv-x) { display: none; }
  .land-faqs { display: none; }
  .land-join.alt { background: none; border: 0; }
  .land-more { display: grid; gap: var(--s-1); margin-top: var(--s-5); }
  /* See more on one line, what it opens on a quiet line under it: never words squeezed into a 44 px button */
  .land-more-btn { width: 100%; min-height: 56px; height: auto; padding: var(--s-2) var(--s-4); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; white-space: normal; }
  .land-more-btn small { font-size: var(--fs-14); font-weight: 400; color: var(--ink-3); line-height: 1.35; }
  .land-more .land-fine { margin: 0; }
  .land-accents { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .land-accents li { padding: var(--s-3) var(--s-4); }
  /* How it works on a phone: three rows on hairlines, not three boxes */
  .land-steps { gap: 0; }
  .land-steps li { padding: var(--s-4) 0; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
  .land-steps li:first-child { border-top: 0; padding-top: 0; }
  .pv-frame { padding: var(--s-4); }
  .land-checks { padding: var(--s-4); }
  .land-joinbox { padding: var(--s-4); }
  .pub-foot .pub-wrap { grid-template-columns: minmax(0, 1fr); }
  .pub-foot-nav { justify-content: flex-start; margin-left: -12px; }
  .si { gap: var(--s-4); }
  .si-side { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .si-stage { justify-content: stretch; }
  /* a compact Tomo over the card (no name tag: she is beside her words), so with the keyboard up the field and
     Email me a sign-in code stay in the top half */
  .si-stage .pub-lola { width: 64px; height: 80px; }
  .si-stage .pub-bubble { margin-bottom: var(--s-2); }
  .si-stage .pub-bubble::before { display: none; }
  .si-aside { display: none; }
  .si-card { padding: var(--s-5) var(--s-4); }
  .si-card h1 { font-size: var(--fs-26); }
  .si-more { margin: var(--s-3) 0 6px; }
  .si-more button { flex: 1 1 100%; min-height: 48px; }
  .si-alt .btn { flex: 1 1 100%; }
  .legal-end > * { flex: 1 1 100%; }
  .legal p, .legal li, .legal dd { font-size: var(--fs-16); }
  .legal-short { padding: var(--s-4); }
  .legal-short ul { padding-left: 18px; }
}
/* A phone on its side: the sign-in card is on the first screen, with a small Tomo beside it, not above it. Keyed
   on the width, not the orientation: an upright phone with the keyboard up is wider than it is tall too, and
   keeps its one column (phones on their side are 568 px wide or more). */
@media (max-height: 520px) and (min-width: 560px) {
  .si { max-width: 820px; grid-template-columns: auto minmax(0, 460px); align-items: start; gap: var(--s-4) var(--s-5); padding-top: var(--s-2); }
  .si-side { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .si-stage .pub-lola { width: 80px; height: 100px; }
  .si-stage .pub-bubble { flex-basis: 170px; margin: 0 0 var(--s-4); padding: 10px var(--s-3); }
  .si-stage .pub-es { font-size: var(--fs-16); }
  .si-aside { display: none; }
  .si-card { padding: 18px 20px; }
  .si-card h1 { font-size: var(--fs-26); }
}
/* The narrowest phones (320 to 380): a smaller Tomo beside her words, so her lines get the width and break between
   phrases rather than after every one. */
@media (max-width: 380px) {
  .pub-lola { width: 64px; height: 80px; }
  .pub-stage { gap: var(--s-2); }
}
/* 340 and less: Tomo a little smaller beside Ask for an invitation, so its words keep to one line */
@media (max-width: 340px) {
  .land-stage .pub-lola { width: 48px; height: 60px; }
  .land-stage .pub-bubble::after { right: 22px; }
  .land-hero .land-cta { padding-right: 56px; }
  .land-hero .land-cta .primary { padding: 0 var(--s-3); }
}