/* The page-level styles from the design's "Yomidori Home v7.html" <style> block. */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.two .copy .standfirst{margin-top:16px}
.points{display:flex;flex-direction:column;gap:0;margin-top:30px;max-width:460px}
.points>div{padding:16px 0;border-top:1.5px solid var(--border)}
.points>div:last-child{border-bottom:1.5px solid var(--border)}
.points b{display:block;font-family:var(--f-head);font-weight:500;font-size:17px;color:var(--ink)}
.points small{display:block;margin-top:4px;font-size:14px;line-height:1.5;color:var(--muted)}
.rd-text .w{border-bottom:1px dotted rgba(37,57,86,.25)}
.rd-text .w.hi{border-bottom-color:transparent;border-radius:4px;padding:2px 1px}

.phone.static{pointer-events:none}.phone.live-reader{pointer-events:auto}
.live-reader .w{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .14s}
.live-reader .w:hover{background:rgba(37,57,86,.07)}
.live-reader .w.hi{background:rgba(255,183,77,.28)}
.live-reader .w.sv{background:rgba(255,213,79,.22)}
.live-reader .w.sv.hi{background:rgba(255,183,77,.28)}
.live-reader .rd-text p{transition:background .16s;border-radius:4px}
.live-reader .rd-text p.held{background:rgba(0,0,0,.06)}
.sb[hidden],.wb[hidden],.phone .sb[hidden]{display:none}
.phone .sb{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;padding:16px 20px;border:0;background:none;text-align:left;cursor:pointer;font:inherit;animation:wb-swap .22s ease-out}
.sb-label{font-family:var(--f-ui);font-size:10px;font-weight:700;letter-spacing:1.2px;color:var(--muted);opacity:.6}
.sb-text{font-family:var(--f-ui);font-size:14px;line-height:1.4;color:var(--ink)}
.sb-text.jp{font-family:var(--f-jp);font-size:15px;line-height:2.1}
.sb-text ruby rt{font-size:.5em;color:var(--muted)}
.sb-hint{font-family:var(--f-ui);font-size:11px;color:var(--muted);opacity:.6;margin-top:2px}
.wb-pos{font-size:11px;color:var(--muted);margin-top:5px;letter-spacing:.04em;text-transform:lowercase;padding-bottom:4px}
.wb-dict{font-family:var(--f-jp);color:var(--navy)}
.phone .bm{border:0;background:none;font:inherit;cursor:pointer;display:flex;align-items:center;gap:6px;padding:8px 12px 8px 10px;border-radius:10px;margin-right:2px}
.phone .bm span{font-size:12px}
.bm:not(.saved){background:var(--card-tint);border:1px solid var(--border)}
.bm.pop{animation:bm-pop .34s cubic-bezier(.2,.7,.2,1)}
@keyframes bm-pop{0%{transform:scale(1)}40%{transform:scale(1.16)}to{transform:scale(1)}}
.wb-swap{animation:wb-swap .22s ease-out}
@keyframes wb-swap{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.sv-toast{position:absolute;left:50%;bottom:76px;transform:translate(-50%,8px);background:var(--navy);color:#fff;font-size:11px;font-weight:600;padding:7px 13px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;white-space:nowrap;z-index:5}
.sv-toast.on{opacity:1;transform:translate(-50%,0)}
.hero-vid .vid{margin-bottom:0}
.read{margin-top:24px}
@media (max-width:900px){.hero-vid .vid{margin-bottom:0}}
.kanji-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px);align-items:start;margin-top:clamp(36px,5vw,56px)}
.kanji-two>div{display:flex;flex-direction:column;align-items:center;gap:14px}
.cap{font-family:var(--f-head);font-size:14px;color:var(--muted)}
.cap b{font-weight:500;color:var(--ink)}
.drill .kw-prompt{font-family:var(--f-head);font-size:24px;color:var(--matcha);text-align:center;margin-top:10px}
.drill .pad{position:relative;margin:14px 0 0;width:210px;height:210px;background:var(--card);border:1px solid var(--border);border-radius:16px;align-self:center}
.drill .pad::before,.drill .pad::after{content:"";position:absolute;background:var(--hair)}.drill .pad::before{left:50%;top:6%;bottom:6%;width:1px}.drill .pad::after{top:50%;left:6%;right:6%;height:1px}
.drill .pad svg{position:absolute;inset:8%;width:84%;height:84%;overflow:visible}
.drill .pad .ghost path{stroke:transparent}.drill .pad .ink path{stroke:var(--ink)}.drill .pad .ink path.next{stroke:var(--matcha)}
.drill .msg{text-align:center;font-size:12px;color:var(--muted);margin-top:10px;font-family:ui-monospace,Menlo,monospace}
.drill .acts{display:flex;gap:8px;padding:0 18px;margin-top:12px}
.drill .acts span{flex:1;text-align:center;padding:10px;border-radius:12px;border:1.2px solid var(--border);font-size:12.5px;font-weight:700;color:var(--muted)}
.drill .hintln{text-align:center;font-size:12px;font-weight:600;color:var(--navy);margin-top:12px}
.words-sec .cards{display:flex;flex-direction:column;gap:18px;max-width:420px;margin:0 auto}
.wcard-p.big-card{margin:0;padding:26px 22px}
.wcard-p .big{font-size:38px}
.goal-card{background:var(--card-raised);border:1px solid var(--border);border-radius:20px;padding:16px 16px 14px;position:relative;font-family:var(--f-ui);color:var(--ink);font-size:13px}
.goal-card .week{margin:0 0 14px;padding:0 6px}
.goal-card .week small{font-size:10.5px}
.goal-card .goal-head{display:flex;align-items:center;gap:14px}
.goal-card .ring{transform:none;margin:0}
.goal-card .eb{font-size:10.5px;font-weight:700;letter-spacing:1.5px;color:var(--navy)}
.goal-card .ttl{font-family:var(--f-head);font-size:21px;color:var(--ink);margin-top:3px}
.goal-card .quiet{display:block;margin-top:14px;padding:13px;border-radius:14px;border:1.5px solid var(--navy);color:var(--navy);text-align:center;font-weight:700;font-size:15px}
@media (max-width:900px){.two,.kanji-two{grid-template-columns:1fr}.two .visual{order:1}}

/* The design's static page ends here. Below: what the real page adds around it. */
/* The page's markup is one server-rendered block; its wrapper must not box anything. */
.page-root{display:contents}
/* The waitlist form (WaitlistForm) mounts into this slot in the CTA. */
.wl-slot{width:100%;max-width:480px}

/* Licenses page (the design's "Licenses.html"). */
.lic{max-width:680px;margin:0 auto;padding:clamp(48px,7vw,96px) 28px}
.lic h1{font-family:var(--f-head);font-weight:500;font-size:clamp(30px,4vw,40px);color:var(--ink);margin:0 0 10px}
.lic .lede{font-size:17px;color:var(--muted);margin:0 0 40px}
.lic dl{margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.lic dt{font-family:var(--f-head);font-weight:500;font-size:19px;color:var(--ink)}
.lic dd{margin:6px 0 0;font-size:15.5px;line-height:1.6;color:var(--text)}
.lic a{color:var(--navy)}.lic a:hover{color:var(--flag-red)}
.lic .back{display:inline-block;margin-top:40px;font-size:14.5px}

/* Photo reader: the page image takes whatever height is left over, so anything
   below it that changes height re-crops the photo under the OCR boxes. Hold both
   slots steady: the hint sits in the (empty) text slot instead of adding its own
   row, the text slot keeps one line's height, and the gloss row keeps room for
   a wrapped reading (ケーキセット / サンドイッチ wrap theirs). */
.live-reader.photo .page{position:relative}
.live-reader.photo .page-hint{position:absolute;left:0;right:0;top:100%}
.live-reader.photo .rd-text{min-height:calc(15px * 1.9 + 10px)}
.live-reader.photo .wb-row{min-height:calc(20px * 1.35 + 8px + 13px * 1.35)}

/* Beta sign-up: the optional "how did you hear" field takes its own row under email + button. */

/* Phone width: the bezel is already gone (site-v7), so the panel shouldn't be
   a fixed-height phone either - a flat min(600px,72svh) left the reader using
   ~310px of 600. Here the panel is exactly as tall as the screen it shows: the
   visible view joins the normal flow instead of filling an absolute box. */
@media (max-width:560px){
  .phone{height:auto}
  .phone .scr{flex:none}
  .phone .view{position:relative;inset:auto}
  /* the photo page has no content height of its own (the image fills it) */
  .live-reader .page{flex:none}
  .live-reader .page-in{height:400px}
}
/* review demo: the "thinking" pause before the word card's tap */
.rv-think{position:absolute;z-index:7;pointer-events:none;font-size:22px;line-height:1;padding:7px 9px;border-radius:16px 16px 16px 4px;background:var(--card);border:1px solid var(--border);box-shadow:0 6px 16px rgba(37,57,86,.14);opacity:0;transform:translate(-50%,-50%) scale(.7);transition:opacity .3s ease,transform .35s cubic-bezier(.2,.7,.2,1)}
.rv-think.on{opacity:1;transform:translate(-50%,-50%) scale(1);animation:tip-bob 1.2s ease-in-out .35s infinite}