/* PHONE hero ring (≤920px, ring mode). The desktop ring files are on at this
   width too (index.html <link media>); this layer re-sizes them for a phone
   and cancels the ≤920 hero rules of lantern-v3.css / lantern-hero.css.
   One screen, top to bottom: the headline + its line, the window (one fixed
   size on every page, it takes what the rest leaves), ← page name → under
   it, the send button last. The ±1 pages peek in at the screen's edges. */
/* the slots: the ±1 pages sit one window + a gap to each side, a touch
   smaller, flat (no cover-flow tilt); the far ones stay out of sight. On
   :root, not #hero: the page slide's ::view-transition pseudos read them there
   (lantern-hero-ring-sides.css keyframes) */
:root {
  --m-gut: 16px;
  /* how far the window sits in from the column, so a strip of each
     neighbour shows beyond it */
  --m-peek: 18px;
  --car-w: calc(100vw - 2 * (var(--m-gut) + var(--m-peek)));
  --car-persp: translateX(0);
  --car-t1r: translateX(calc(var(--car-w) + 6px)) scale(.96);
  --car-t1l: translateX(calc(-1 * var(--car-w) - 6px)) scale(.96);
  --car-t2r: translateX(calc(2 * var(--car-w))) scale(.9);
  --car-t2l: translateX(calc(-2 * var(--car-w))) scale(.9);
  --car-t3r: var(--car-t2r);
  --car-t3l: var(--car-t2l);
  --car-o1: 1;
  --car-o2: 1;
  /* longer than desktop, quick off the mark and a long soft landing — the
     whole strip glides a slot, like a flicked card */
  --car-dur: .72s;
  --car-ease: cubic-bezier(.22, 1, .36, 1);
}
#hero {
  --car-z: 1;
  --car-h: 100%;
  /* sized so the longer first line ("Read and watch in English") fits the
     two-line slot below */
  --m-h1: clamp(20px, 6.9vw, 36px);
  /* the headline's two lines — the page lines sit right under it */
  --h1-slot: calc(var(--m-h1) * 1.12 * 2 + 10px);
  display: block !important;
  min-height: 0 !important;
  padding: 0 var(--m-gut) !important;
}
html.lang-uk #hero { --m-h1: clamp(20px, 6.3vw, 29px); }

/* ── the header stays, as on desktop: the reel slid it away once the tour
   began (lantern-v3.css) — the ring's layout counts on it. :not(#_) lifts
   these over that rule's long :not() chains. ── */
.topbar:not(#_) { transform: none; opacity: 1; pointer-events: auto; }

/* ── the column: copy · window · controls · send button, one screen tall ── */
#hero:not(#_) .hero-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(236px, 1fr) auto auto !important;
  row-gap: 12px !important;
  justify-items: stretch !important;
  align-content: stretch !important;
  /* one screen, but no taller than the page needs: past ~700px of content the
     window would only grow empty paper */
  height: min(100vh, calc(var(--m-topbar) + 720px));
  height: min(100svh, calc(var(--m-topbar) + 720px));
  min-height: 0 !important;
  padding: calc(var(--m-topbar) + 10px) 0 calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

/* ── the copy: the Home card's headline stays; its subhead gives way to each
   page's line (the desktop page blocks, restyled) in the same spot ──────── */
#hero .hero-copy,
#hero .hero-copy-p2,
#hero .hero-copy-imm,
#hero .hero-copy-p5,
#hero .hero-copy-sh {
  grid-column: 1 !important; grid-row: 1 !important;
  align-self: start !important; justify-self: stretch !important;
  width: 100% !important; max-width: none !important; min-width: 0;
  text-align: left !important;
}
#hero .hero-copy-p2,
#hero .hero-copy-imm,
#hero .hero-copy-p5,
#hero .hero-copy-sh { padding: var(--h1-slot) 0 0 !important; align-self: start !important; }
#hero .hero-copy { opacity: 1 !important; transform: none !important; }
#hero .hh-card { width: 100%; }
#hero .hero-copy h1.hh-h1 {
  display: block !important; white-space: normal !important;
  font-size: var(--m-h1) !important; line-height: 1.12 !important; letter-spacing: -.02em;
  margin: 0 !important; text-align: left;
}
/* splitLines() wraps each line in a .ln: one block per line (inline, the
   space before the <br> indents the second one) */
#hero .hero-copy h1.hh-h1 .ln { display: block !important; transform: none !important; margin-left: 0 !important; }
#hero .hero-copy h1.hh-h1 .ln > .i { display: inline !important; transform: none !important; }
#hero .hero-copy h1.hh-h1 br { display: none; }
#hero .hero-copy .hsub.hh-sub {
  display: block !important; overflow: visible !important; -webkit-line-clamp: unset !important;
  max-width: none !important; margin: 10px 0 0 !important;
  font-size: var(--fs-body) !important; line-height: 1.45; text-align: left; text-wrap: pretty;
  transition: opacity .3s ease;
}
/* off Home the subhead goes, the page's own line takes its place */
body.hero-p2 #hero .hero-copy .hsub.hh-sub { opacity: 0; }
#hero .hero-copy-p2 h2,
#hero .hero-copy-imm h2,
#hero .hero-copy-p5 h2,
#hero .hero-copy-sh h2 {
  display: block !important; white-space: normal !important;
  font-size: var(--fs-body) !important; line-height: 1.45 !important;
  margin: 10px 0 0 !important; text-align: left !important; text-wrap: pretty;
}
#hero .hero-copy-p2 h2 br,
#hero .hero-copy-imm h2 br,
#hero .hero-copy-p5 h2 br { display: none !important; }
/* the page's name lives in the controls row under the window */
#hero .hero-copy-p2 .p2-eyebrow,
#hero .hero-copy-imm .p2-eyebrow,
#hero .hero-copy-p5 .p2-eyebrow,
#hero .hero-copy-sh .p2-eyebrow { display: none !important; }

/* ── the stage: the window fills its row ───────────────────────────────── */
#hero .hero-stage,
body.hero-p2 #hero .hero-stage,
body.hero-p3 #hero .hero-stage,
body.hero-imm #hero .hero-stage,
body.hero-p5 #hero .hero-stage {
  display: block !important; position: relative;
  grid-column: 1 !important; grid-row: 2 !important;
  width: auto !important; height: auto !important; min-height: 0;
  align-self: stretch !important; justify-self: stretch !important;
  margin: 0 var(--m-peek) !important; transform: none !important; scale: none;
  overflow: visible !important;
}
#hero .hero-stage > .float {
  display: block !important; position: absolute !important; inset: 0 !important;
  z-index: auto !important; transform: none !important;
}
#hero .floatwrap { position: relative; height: 100%; animation: none !important; transform: none !important; }
#hero .browser,
body.hero-p2 #hero .browser,
body.hero-p3 #hero .browser {
  position: relative !important; max-height: none;
  width: 100% !important; height: 100% !important; min-height: 0 !important;
  transform: none !important; clip-path: none !important;
}
/* the page takes what the header leaves — never a fixed floor (the reel's
   min-heights in lantern-hero.css) that squeezes the photo header to 0 */
#hero:not(#_) .browser > .page { flex: 1 1 auto; height: auto !important; min-height: 0 !important; }
#hero .browser > .hh-tabstrip,
#hero .browser > .hh-hero-photo { flex: none; }
/* the window's own height decides what fits (the @container rules below) */
#hero .browser { container: hero-win / size; }
/* the frame holds still, the pages move through it — as on desktop: the
   still frame (.car-frame: hairline + dots strip) stays over the window's
   box while the live page and its neighbours slide under it. No .car-back
   (the white screen under the page): the page is white itself, and a
   neighbour sliding in must show through the frame, not under a blank. The
   page carries the same edge as the side pages, for when it is out of the
   frame. */
#hero .car-back { display: none !important; }
#hero .car-frame { width: 100%; height: 100%; }
#hero:not(#_) .floatwrap > .browser {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px rgba(var(--ink-rgb), .14), 0 10px 24px -12px rgba(var(--ink-rgb), .3) !important;
}
/* sideways swipes page the ring (lantern-deck.js); vertical ones scroll */
#hero .browser { touch-action: pan-y; }
/* the neighbours: only the ±1 pictures (lantern-hero-carousel.js), each
   showing its edge nearest the window. #hero and the page clip them at the
   screen's edges */
#hero { overflow-x: clip; }
#hero .car-side {
  height: calc(100% - var(--car-strip-h, 27px)); transform-origin: 50% 50%;
  /* only a strip shows: the frame's hairline and a close shadow mark its edge
     against the paper, the whole height down */
  box-shadow: 0 0 0 1px rgba(var(--ink-rgb), .14), 0 10px 24px -12px rgba(var(--ink-rgb), .3);
}
#hero .car-side[data-rel="1"] img { object-position: left top; }
#hero .car-side[data-rel="-1"] img { object-position: right top; }
/* ±2 wait just off screen, so a page coming round glides in, not pops */

/* ── the finger's drag (lantern-deck.js --m-drag): the page and its
   neighbours follow it as one strip; `translate` stacks on each slot's own
   transform. Let go and they glide on (or home) on the slot transition. ── */
#hero .browser,
#hero .car-side { translate: var(--m-drag, 0px) 0; }
#hero .browser { transition: translate var(--car-dur) var(--car-ease); }
#hero .car-side {
  transition: transform var(--car-dur) var(--car-ease), opacity var(--car-dur) ease,
    translate var(--car-dur) var(--car-ease);
}
html.m-dragging #hero .browser,
html.m-dragging #hero .car-side { transition: none !important; }
/* a finger on its way sideways selects nothing and lights nothing up (the
   press itself is swallowed, lantern-deck.js) */
#hero .browser { -webkit-tap-highlight-color: transparent; }
html.m-dragging #hero .browser { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media (prefers-reduced-motion: reduce) {
  #hero .browser,
  #hero .car-side { transition: none; }
}

/* the page slide starts where the finger left the page (--m-from; the
   desktop keyframes in lantern-hero-ring-sides.css start at rest) */
@keyframes car-to-left    { from { transform: translateX(var(--m-from, 0px)); } 82% { opacity: 1; } to { transform: var(--car-t1l); opacity: 0; } }
@keyframes car-to-right   { from { transform: translateX(var(--m-from, 0px)); } 82% { opacity: 1; } to { transform: var(--car-t1r); opacity: 0; } }
@keyframes car-from-right { from { transform: translateX(var(--m-from, 0px)) var(--car-t1r); } to { transform: none; } }
@keyframes car-from-left  { from { transform: translateX(var(--m-from, 0px)) var(--car-t1l); } to { transform: none; } }

/* the desktop chrome: dots strip + photo header, no address bar */
#hero .hh-tabstrip { display: flex !important; }
#hero .hh-hero-photo { display: block !important; height: 77px !important; }
#hero .hh-hp-text { padding: 8px 14px 8px; }
#hero .hh-hp-title { font-size: var(--fs-body) !important; }
#hero .browser .bbar { display: none !important; }
#hero .hh-poster,
#hero .hh-play-dock,
#hero .hh-sbar { display: none !important; }

/* the photo header carries the title: each layer's own repeated one goes */
#hero .browser .page-en > p:first-child,
#hero .browser .ex-page > p:first-child,
#hero .browser .imm-page .imm-title { display: none !important; }

/* Home at rest: the two pre-saved words already read as saved (the desktop
   rule in lantern-v3.css is ≥921px; same two lemmas as PRESAVED in
   lantern-hero-home-auto.js) */
body:not(.hero-p2):not(.hero-p3):not(.hero-imm):not(.hero-p5):not(.hero-simp):not(.home-live) #hero .browser .page-en > p .hl[data-w="genre"]:not(.saved),
body:not(.hero-p2):not(.hero-p3):not(.hero-imm):not(.hero-p5):not(.hero-simp):not(.home-live) #hero .browser .page-en > p .hl[data-w="phenomenon"]:not(.saved) {
  color: #2f6fd6; border-radius: var(--r-xs); padding: 0 3px;
}
/* the saved words' blue sits 1px in from the top and the bottom of each
   word — a phone's tighter lines read it as a block otherwise */
#hero .browser .hl.saved,
#hero .browser .word.is-saved,
#hero .browser .simp-w.saved,
#hero .imm-front .imm-w,
#hero .ex-page .inqgap.settled .lex,
body:not(.hero-p2):not(.hero-p3):not(.hero-imm):not(.hero-p5):not(.hero-simp):not(.home-live) #hero .browser .page-en > p .hl[data-w="genre"]:not(.saved),
body:not(.hero-p2):not(.hero-p3):not(.hero-imm):not(.hero-p5):not(.hero-simp):not(.home-live) #hero .browser .page-en > p .hl[data-w="phenomenon"]:not(.saved) {
  background: linear-gradient(#e3edfd, #e3edfd) 0 1px / 100% calc(100% - 2px) no-repeat !important;
}
#hero .browser .word.is-saved:hover {
  background: linear-gradient(#d2e2fb, #d2e2fb) 0 1px / 100% calc(100% - 2px) no-repeat !important;
}

/* the page text, a phone's reading size */
#hero .browser .page { font-size: 16px; line-height: 1.5; padding: 0 !important; }
#hero .browser .page-en,
#hero .browser .ex-page,
#hero .browser .imm-page,
#hero .sh-page { padding: 12px 16px 14px !important; }
#hero .browser .ex-page { padding-top: 12px !important; }
/* Simplify's dot hangs left of its paragraph */
#hero .browser .page-en { padding-left: 24px !important; }
#hero .imm-p { font-size: 16px !important; line-height: 1.5 !important; }

/* Practice: the exercise bar at the window's foot (v3.css swaps it for a
   counter in the address bar on phones — the ring has no address bar) */
body.hero-p5 #hero .inq-hud { display: block !important; }
body.hero-p5 #hero .hx-hud { position: absolute; bottom: 0; left: 0; right: 0; }
/* a phone's bar: one line of copy over the progress strip, 50px not 70 —
   the text above it keeps its last line (the visitor's gap) in sight */
#hero .hx-hud { height: 50px; }
#hero .hx-hud .hud-track { gap: 7px; padding: 0 14px; }
#hero .hx-hud .hud-activate { gap: 10px; padding: 0 10px 0 14px; }
#hero .hx-hud .hud-cue { font-size: var(--fs-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#hero .hx-hud .ha-go { padding: 6px 12px 6px 9px; }

/* a short window (small phone, toolbars showing): the photo header gets
   lower — never gone — and the text a step smaller; Practice (its text and
   the exercise bar) needs that sooner than the other pages */
@container hero-win (max-height: 300px) {
  #hero .browser .hh-hero-photo { height: 46px !important; }
  #hero .browser .page,
  #hero .imm-p { font-size: 15px !important; line-height: 1.45 !important; }
}
@container hero-win (max-height: 380px) {
  body.hero-p5:not(.hero-shelves) #hero .browser .hh-hero-photo { height: 50px !important; }
  body.hero-p5:not(.hero-shelves) #hero .browser .page { font-size: 15px !important; line-height: 1.45 !important; }
}
/* (after the 380px rule, so it wins when both match) */
@container hero-win (max-height: 320px) {
  body.hero-p5:not(.hero-shelves) #hero .browser .hh-hero-photo { height: 40px !important; }
  body.hero-p5:not(.hero-shelves) #hero .browser .ex-page { padding: 8px 14px 6px 16px !important; }
  #hero .hx-hud { height: 42px; }
  #hero .hx-hud .hud-track { gap: 5px; }
}

/* Shelves: the tip model of the desktop page (centred on its word, opens on
   .sh-open — a tap — or .sh-auto, lantern-hero-traps.js), not the #shelves section's
   phone panel from lantern-v3.css */
#hero .sh-page .shelf-mark { position: relative; }
#hero .sh-page .shelf-tip,
#hero .sh-page .shelf-mark:hover .shelf-tip {
  left: 50%; right: auto; width: min(272px, calc(var(--car-w) - 24px)); max-width: none;
  max-height: none; overflow: visible; margin: 0;
  opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(-4px);
  transition: opacity var(--dur-1) ease, transform var(--dur-1) ease;
}
#hero .sh-page .shelf-mark.sh-auto .shelf-tip,
#hero .sh-page .shelf-mark.sh-open .shelf-tip { opacity: 1; pointer-events: auto; transform: translateX(-50%); }
#hero .sh-page .shelf-tip::before,
#hero .sh-page .shelf-tip::after { display: block; }

/* ── controls: ← page name → in one row under the window ───────────────── */
#d-deck {
  display: flex !important; position: static !important;
  grid-column: 1; grid-row: 3;
  width: auto !important; max-width: none; margin: 0;
  align-items: center; justify-content: space-between; gap: 10px;
  pointer-events: auto !important;
}
#d-deck .d-arrow {
  position: relative !important; top: auto !important; left: auto !important;
  flex: none; width: 44px; height: 44px; border-radius: var(--r-circle);
  border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--amber-deep); color: #fff; box-shadow: var(--shadow-1);
  -webkit-tap-highlight-color: transparent;
}
#d-deck .d-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; color: #fff; }
#d-deck .d-arrow-in { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; }
#d-deck .d-arrow-in svg { position: absolute; top: 50%; left: 50%; margin: -9px 0 0 -9px; }
#d-deck .d-arrow-in svg + svg { display: none; }
#d-deck .d-prev .d-arrow-in { transform: scaleX(-1); }
#d-deck .d-arrow:active { transform: scale(.93); }
/* a tap leaves :hover stuck on touch screens — no hover lift there */
@media (hover: none) {
  body:not(.ph-ev):not(.ph-cta) #d-deck .d-arrow:hover:not([aria-disabled="true"]) { transform: none; }
}
/* Install / the wall cover the hero: its controls must not stay focusable */
body.ph-cta #d-deck,
body.ph-ev #d-deck { visibility: hidden; }
#d-deck .d-arrow.wait { opacity: .6; }
/* the desktop's cue / wait rings (lantern-hero.css, ≥921px there) */
#d-deck .d-arrow.cue::before { content: ''; position: absolute; inset: -4px; border-radius: inherit;
  border: 2px solid rgba(var(--amber-rgb), .6); pointer-events: none; animation: d-cue-m 1.6s ease-out 2; }
@keyframes d-cue-m { 0% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
#d-deck .d-arrow.wait::after { content: ''; position: absolute; inset: -5px; border-radius: inherit;
  border: 2px solid transparent; border-top-color: var(--amber); animation: d-wait-m .8s linear infinite; pointer-events: none; }
@keyframes d-wait-m { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #d-deck .d-arrow.cue::before { animation: none; opacity: 1; transform: scale(1.12); }
  #d-deck .d-arrow.wait::after { animation: none; border-color: var(--amber); }
}
#d-deck .d-rail { display: flex; visibility: visible !important; justify-content: center; flex: 1 1 auto; min-width: 0; }
#d-deck .d-chap { display: none; background: none; border: 0; padding: 0; font-family: var(--mono); }
#d-deck .d-chap.on { display: inline-flex; }
#d-deck .d-chap-num { display: none; }
#d-deck .d-chap-name {
  font-size: var(--fs-eyebrow); letter-spacing: .2em; text-transform: uppercase;
  color: var(--amber-deep); font-weight: 600; white-space: nowrap;
}

/* ── the send button: on every page, last ──────────────────────────────── */
#hero .hh-dock,
body.home-live #hero .hh-dock {
  display: flex !important; flex-direction: column; align-items: center; gap: 8px;
  grid-column: 1; grid-row: 4;
  width: 100%; margin: 0; opacity: 1; visibility: visible; pointer-events: auto;
}
#hero .hh-dock .m-hcta-note { margin: 0; text-align: center; font-size: var(--fs-caption); line-height: 1.35; }

/* the rail stays unseen but laid out: the Mastered reveal clones its card
   (lantern-hero-ring-pages.css hides it; v3.css would take it out <1200px) */
#worddeck { display: block !important; }

/* no #shelves section on phones either: its traps are the ring's fifth
   page, and /#shelves (the ads) opens the hero on it (lantern-hero-ring.js) */

/* the demo cursor (Practice, Simplify): lantern-v3.css hides it under
   1000px; on a phone it shows again as a fingertip, not a mouse arrow (as
   the old reel had it, lantern-hero-mobile-reel.css) */
.hw-cursor { display: block !important; }
.hw-cursor .hwc-ico svg { display: none; }
.hw-cursor .hwc-ico::before {
  content: ""; position: absolute; left: -11px; top: -11px;
  width: 22px; height: 22px; border-radius: var(--r-circle);
  background: rgba(var(--ink-rgb), .30);
  border: 1.5px solid rgba(255, 255, 255, .9);
  box-shadow: var(--shadow-1);
}