/* ReadSong — design B, "Story time": one evening, from golden hour to dawn.
   Mobile first. Fonts: Fredoka (display), Caveat (handwriting), system UI (body). */

@font-face { font-family: "Fredoka B"; src: url("fonts/fredoka-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Fredoka B"; src: url("fonts/fredoka-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat B"; src: url("fonts/caveat-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/atkinson-hyperlegible-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --violet: #2B1055;
  --violet-deep: #14072E;
  --plum: #3A1468;
  --magenta: #C2307A;
  --pink: #FF5FA2;
  --coral: #FF7A59;
  --amber: #FFB347;
  --gold: #FFE08A;
  --cream: #FFF1C1;
  --note-ink: #3A1A63;
  --text: #FFFFFF;
  --muted: rgba(255, 246, 236, .95);
  --muted-2: rgba(255, 244, 236, .97);
  --hair: rgba(255, 230, 210, .16);
  --card: rgba(24, 11, 58, .88);
  --cyan: #22D3EE;
  --cyan-text: #67E8F9;

  --display: "Fredoka B", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hand: "Caveat B", "Segoe Print", "Bradley Hand", cursive;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rounded: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --mono: Menlo, ui-monospace, SFMono-Regular, Consolas, monospace;

  --nav-h: 64px;
  --gutter: 20px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --turn: cubic-bezier(.65, 0, .35, 1);
  color-scheme: dark;
}
@media (min-width: 960px) { :root { --nav-h: 72px; --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--violet-deep); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; color: var(--text); font: 400 17px/1.55 var(--body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; overflow-x: clip; background: transparent;
}
img, svg, canvas { display: block; }
img { max-width: 100%; height: auto; }
a { color: var(--gold); text-underline-offset: 3px; }
a:hover { color: #fff; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 10px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: var(--gold); color: var(--violet); font: 600 15px var(--display); text-decoration: none; transition: top .2s; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: 860px; }
em { font-style: normal; }

/* ------------------------------------------------------------------ Sky */
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; }
.sky__layer { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
.sky__layer--0 {
  opacity: 1;
  background:
    radial-gradient(90% 55% at 72% 100%, rgba(255, 150, 90, .38), transparent 70%),
    radial-gradient(70% 45% at 8% 0%, rgba(140, 70, 220, .35), transparent 70%),
    linear-gradient(180deg, #24104F 0%, #4A1670 28%, #7E2179 54%, #A8306E 78%, #BE3D68 100%);
}
.sky__layer--1 {
  background:
    radial-gradient(90% 50% at 30% 100%, rgba(255, 120, 90, .32), transparent 70%),
    linear-gradient(180deg, #1A0C45 0%, #3A1468 30%, #6A1E78 56%, #94296F 82%, #A8336A 100%);
}
.sky__layer--2 {
  background:
    radial-gradient(80% 45% at 50% 100%, rgba(255, 110, 150, .22), transparent 70%),
    linear-gradient(180deg, #0F0C38 0%, #221455 32%, #3B1D72 62%, #5A2680 88%, #682C82 100%);
}
.sky__layer--3 {
  background:
    radial-gradient(70% 40% at 50% 100%, rgba(194, 48, 122, .22), transparent 70%),
    linear-gradient(180deg, #06051A 0%, #0C0A2C 35%, #160F42 66%, #22135A 92%, #2A1660 100%);
}
.sky__layer--4 {
  background:
    radial-gradient(90% 55% at 50% 100%, rgba(255, 170, 110, .42), transparent 72%),
    radial-gradient(60% 40% at 85% 90%, rgba(255, 120, 160, .25), transparent 70%),
    linear-gradient(180deg, #1A1150 0%, #33196A 30%, #5E2881 58%, #923A84 84%, #AA457D 100%);
}
.sky__bokeh { position: absolute; inset: 0; opacity: 1; will-change: opacity; }
.sky__bokeh i {
  position: absolute; border-radius: 50%; display: block;
  background: radial-gradient(circle, rgba(255, 196, 140, .32) 0%, rgba(255, 140, 120, .16) 45%, transparent 70%);
  animation: bokeh 18s var(--turn) infinite alternate;
}
.sky__bokeh i:nth-child(1) { width: 260px; height: 260px; left: -60px; top: 38%; animation-duration: 21s; }
.sky__bokeh i:nth-child(2) { width: 140px; height: 140px; left: 58%; top: 10%; animation-duration: 16s; animation-delay: -6s; }
.sky__bokeh i:nth-child(3) { width: 320px; height: 320px; right: -110px; top: 52%; animation-duration: 24s; animation-delay: -3s; background: radial-gradient(circle, rgba(255, 120, 190, .24), rgba(255, 120, 190, .08) 50%, transparent 70%); }
.sky__bokeh i:nth-child(4) { width: 90px; height: 90px; left: 30%; top: 70%; animation-duration: 14s; animation-delay: -9s; }
.sky__bokeh i:nth-child(5) { width: 180px; height: 180px; left: 80%; top: 26%; animation-duration: 19s; animation-delay: -12s; background: radial-gradient(circle, rgba(255, 224, 138, .22), rgba(255, 224, 138, .06) 50%, transparent 70%); }
.sky__bokeh i:nth-child(6) { width: 120px; height: 120px; left: 12%; top: 14%; animation-duration: 17s; animation-delay: -4s; }
@keyframes bokeh { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(36px, -28px, 0); } }
.sky__stars { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
.sky__stars canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sky__stars canvas:nth-child(2) { animation: twinkle 3.6s ease-in-out infinite alternate; }
.sky__stars canvas:nth-child(3) { animation: twinkle 5.2s ease-in-out -2s infinite alternate; }
.sky__stars.is-off canvas, .sky__bokeh.is-off i { animation-play-state: paused; }
@keyframes twinkle { from { opacity: .25; } to { opacity: 1; } }
.sky__moon { position: absolute; left: 0; top: 0; width: clamp(64px, 8vw, 118px); aspect-ratio: 1; opacity: 0; transform-origin: 0 0; will-change: transform, opacity; }
@media (max-width: 999px) { .sky__moon { width: 44px; } }
.sky__moon .moon__glow { position: absolute; inset: -90%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 241, 193, .26), rgba(255, 200, 160, .07) 40%, transparent 65%); }
.sky__moon .moon__disc { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 70% 70%, #FFF8E1, #F6E7C1 70%); -webkit-mask-image: radial-gradient(58% 58% at 24% 28%, transparent 98%, #000 100%); mask-image: radial-gradient(58% 58% at 24% 28%, transparent 98%, #000 100%); filter: drop-shadow(0 0 14px rgba(255, 241, 193, .6)); }
/* Dusk: paper sky lanterns drift up through the evening (sunset to blue hour), lit from inside. */
.sky__lanterns { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
.sky__lanterns i { position: absolute; top: 100%; left: var(--x, 50%); width: calc(15px * var(--s, 1)); height: calc(20px * var(--s, 1)); margin-left: calc(-7.5px * var(--s, 1)); opacity: 0;
  border-radius: 42% 42% 30% 30% / 50% 50% 34% 34%;
  background: radial-gradient(70% 62% at 50% 64%, #FFFBE6 0%, #FFE08A 34%, #FFA24D 70%, #E8663A 100%);
  box-shadow: 0 0 calc(10px * var(--s, 1)) calc(3px * var(--s, 1)) rgba(255, 176, 92, .55), 0 0 calc(34px * var(--s, 1)) calc(10px * var(--s, 1)) rgba(255, 120, 80, .2);
  filter: blur(var(--b, 0px)); animation: skyrise var(--d, 34s) linear var(--dl, 0s) infinite; animation-play-state: paused; }
.sky__lanterns i::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -8%; height: 12%; border-radius: 0 0 40% 40%; background: rgba(120, 40, 30, .55); }
.sky__lanterns.is-on i { animation-play-state: running; }
@media (max-width: 719px) { .sky__lanterns i { --s: .6 !important; --o: .6 !important; } .sky__lanterns i:nth-child(n+8) { display: none; } }
@keyframes skyrise {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-3deg); }
  10% { opacity: var(--o, .85); }
  50% { transform: translate3d(calc(var(--dx, 30px) * .6), -60vh, 0) rotate(3deg); }
  82% { opacity: var(--o, .85); }
  100% { opacity: 0; transform: translate3d(var(--dx, 30px), calc(-100vh - 80px), 0) rotate(-2deg); }
}
.sky__shoot { position: absolute; top: 12%; left: 60%; width: 160px; height: 2px; border-radius: 2px; opacity: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 244, 220, .95)); transform: rotate(-24deg) translateX(0); }
.sky__shoot.go { animation: shoot 1.1s cubic-bezier(.3, .6, .5, 1) forwards; }
@keyframes shoot { 0% { opacity: 0; transform: rotate(-24deg) translateX(0) scaleX(.3); } 15% { opacity: 1; } 100% { opacity: 0; transform: rotate(-24deg) translateX(-420px) scaleX(1); } }

/* ------------------------------------------------------------------ Nav */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--nav-h); transition: background-color .35s var(--ease), box-shadow .35s var(--ease); }
.nav.is-scrolled { background: rgba(22, 9, 48, .76); box-shadow: 0 1px 0 rgba(255, 224, 200, .08), 0 10px 30px -18px rgba(0, 0, 0, .6); -webkit-backdrop-filter: saturate(150%) blur(14px); backdrop-filter: saturate(150%) blur(14px); }
.nav__in { max-width: 1240px; height: 100%; margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font: 700 21px/1 var(--display); letter-spacing: .005em; }
.brand img { width: 34px; height: 34px; border-radius: 22.37%; box-shadow: 0 4px 14px rgba(10, 0, 30, .45); }
.brand:hover { color: #fff; }
.nav__links { display: none; }
.badge { display: inline-block; border-radius: 10px; flex: none; }
.badge img { width: auto; }
.badge--nav img { height: 40px; }
/* Help: the support centre (the App Store Support URL) one tap from the top, at every width. */
.nav__help { margin-left: auto; display: inline-flex; align-items: center; min-height: 40px; padding: 0 13px; border-radius: 999px; border: 1px solid rgba(255, 236, 220, .24); background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; font: 600 15px/1 var(--display); letter-spacing: .01em; transition: color .2s, background-color .2s, border-color .2s; }
.nav__help:hover { color: #fff; border-color: var(--gold); background: rgba(255, 224, 138, .12); }
.nav__help:focus-visible, .nav__links a:focus-visible, .chips li:focus-visible { border-radius: 999px; }
@media (max-width: 379px) { .nav__in { gap: 10px; } .nav__help { padding: 0 10px; } .badge--nav img { height: 36px; } }
@media (max-width: 359px) { .nav .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.badge--big img { height: 54px; }
@media (min-width: 960px) {
  .nav__links { display: flex; gap: 2px; margin: 0 auto; }
  .nav__links a { padding: 9px 14px; border-radius: 999px; color: var(--muted); text-decoration: none; font: 600 15px/1 var(--display); letter-spacing: .01em; transition: color .2s, background-color .2s; }
  .nav__links a:hover, .nav__links a.is-here { color: #fff; background: rgba(255, 255, 255, .09); }
  .nav__help { margin-left: 0; min-height: 33px; border-color: transparent; background: none; color: var(--muted); padding: 0 14px; }
  .nav__help:hover { border-color: transparent; background: rgba(255, 255, 255, .09); }
}

/* ------------------------------------------------------------------ Reveal */
.js .reveal { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .6s var(--ease), transform .7s var(--ease); transition-delay: calc(min(var(--i, 0), 3) * 70ms); }
.js .reveal.is-in { opacity: 1; transform: none; }
/* If main.js never runs (blocked, failed), nothing stays hidden: everything shows after 2.5 s. */
.js:not(.rs-ready) .reveal { animation: rvfb 0s 2.5s forwards; }
@keyframes rvfb { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { transform: none; transition: opacity .3s linear; transition-delay: 0s; }
}

/* ------------------------------------------------------------------ Shared bits */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 10px; border-radius: 999px; background: rgba(255, 224, 138, .1); border: 1px solid rgba(255, 224, 138, .24); color: var(--gold); font: 600 14px/1 var(--display); letter-spacing: .02em; }
.eyebrow svg { width: 16px; height: 16px; }
.eyebrow__time { font: 500 12px/1 var(--mono); font-variant-numeric: tabular-nums; color: #fff; opacity: .9; padding-right: 8px; margin-right: 1px; border-right: 1px solid rgba(255, 224, 138, .3); transition: color .4s; }
.eyebrow.is-ticking .eyebrow__time { color: var(--gold); opacity: 1; }
.eyebrow.is-ticking svg { animation: tickspin .9s var(--ease); }
@keyframes tickspin { from { transform: rotate(-120deg) scale(.7); } }
.head { max-width: 780px; margin-bottom: clamp(36px, 5vw, 64px); }
.head--center { margin-left: auto; margin-right: auto; text-align: center; }
.head h2 { margin-top: 18px; font: 700 clamp(40px, 6.2vw, 76px)/1.02 var(--display); letter-spacing: -.005em; text-wrap: balance; }
h1 em, h2 em, h3 em { color: var(--gold); text-shadow: 0 0 30px rgba(255, 190, 90, .35); }
.head__sub { margin-top: 16px; font: 600 clamp(18px, 1.7vw, 21px)/1.45 var(--display); color: var(--muted); text-wrap: pretty; text-shadow: 0 1px 14px rgba(30, 0, 50, .5); }
.head__sub i { font-style: normal; color: #fff; }
.sec { position: relative; padding: clamp(52px, 4.8vw, 72px) 0; }
@media (max-width: 719px) { .sec { padding: 52px 0; } .head { margin-bottom: 30px; } }

.playbtn { position: relative; flex: none; width: 72px; height: 72px; border: 0; border-radius: 50%; padding: 0; display: grid; place-items: center; cursor: pointer; transition: transform .18s var(--ease), box-shadow .3s var(--ease); }
.playbtn svg { position: relative; z-index: 1; width: 30px; height: 30px; }
.playbtn .i-pause, .is-playing > .i-play { display: none; }
.is-playing > .i-pause { display: block; }
.playbtn:active { transform: scale(.94); }
.playbtn--gold { color: #2B1055; background: radial-gradient(circle at 34% 28%, #FFF6D2 0%, #FFE08A 34%, #FFB347 72%, #FF8F5E 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), 0 12px 32px -8px rgba(255, 140, 80, .7), 0 0 40px rgba(255, 190, 90, .3); --rs-ripple-color: #FFE08A; --rs-chase-color: rgba(43, 16, 85, .65); }
.playbtn--cyan { color: #04172B; background: linear-gradient(135deg, #3B82F6, #22D3EE); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 10px 26px -8px rgba(34, 211, 238, .6); --rs-ripple-color: #22D3EE; }
.playbtn--md { width: 60px; height: 60px; }
.playbtn--md svg { width: 26px; height: 26px; }
.playbtn--sm { width: 48px; height: 48px; }
.playbtn--sm svg { width: 21px; height: 21px; }
.playbtn:focus-visible { outline-offset: 5px; border-radius: 50%; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px 8px 10px; border-radius: 999px; background: rgba(32, 8, 62, .5); border: 1px solid rgba(255, 236, 220, .2); font: 600 14px/1 var(--display); color: #fff; letter-spacing: .01em; }
.chips svg { width: 16px; height: 16px; color: var(--gold); }

.wx { display: inline-flex; align-items: center; gap: .35em; padding: .18em .55em; border-radius: 999px; font-style: normal; font: 600 .62em/1.2 var(--mono); color: #A3E635; background: rgba(163, 230, 53, .1); border: 1px solid rgba(163, 230, 53, .45); white-space: nowrap; }
.wx::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: #A3E635; box-shadow: 0 0 6px #A3E635; }

.pro { display: inline-block; vertical-align: .2em; margin-left: 6px; padding: 4px 9px; border-radius: 999px; font: 700 12px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: #2B1055; background: linear-gradient(120deg, #FFE08A, #FFB347); text-shadow: none; }

/* ------------------------------------------------------------------ Phones */
.phone { --pw: 280px; position: relative; width: var(--pw); flex: none; }
.phone__frame {
  position: relative; padding: calc(var(--pw) * .034); border-radius: calc(var(--pw) * .158);
  background: linear-gradient(140deg, #FFC48A 0%, #F59A4A 14%, #E0702A 38%, #B9531C 52%, #E57A33 70%, #FFB774 88%, #F08A3A 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 228, 196, .75),
    inset 0 0 0 calc(var(--pw) * .012) rgba(120, 40, 10, .35),
    0 50px 90px -30px rgba(20, 0, 40, .75),
    0 18px 40px -16px rgba(60, 0, 40, .6);
}
.phone__frame::before, .phone__frame::after { content: ""; position: absolute; width: calc(var(--pw) * .016); border-radius: 3px; background: linear-gradient(90deg, #B9531C, #F59A4A); }
.phone__frame::before { left: calc(var(--pw) * -.012); top: 22%; height: 7%; box-shadow: 0 calc(var(--pw) * .16) 0 #D7682A, 0 calc(var(--pw) * .3) 0 #D7682A; }
.phone__frame::after { right: calc(var(--pw) * -.012); top: 30%; height: 13%; }
.phone__screen { position: relative; overflow: hidden; container-type: inline-size; border-radius: calc(var(--pw) * .126); background: #0B1D31; aspect-ratio: 1320 / 2868; box-shadow: 0 0 0 calc(var(--pw) * .013) #0A0610; isolation: isolate; }
.phone__screen > img { width: 100%; height: 100%; object-fit: cover; }
.phone--sm { --pw: 240px; }
.phone--mini { --pw: 220px; }
.phone--glow .phone__frame { box-shadow: inset 0 0 0 1.5px rgba(255, 228, 196, .75), 0 40px 80px -30px rgba(20, 0, 40, .8), 0 0 70px rgba(255, 170, 100, .28); }

/* Screens are laid out at 390 logical points and scaled with container units (1em = 16 pt). */
.app { position: absolute; inset: 0; font-size: 4.1026cqw; font-family: var(--body); color: #DCEBFA; background: #0B1D31; overflow: hidden; }
.app__status { position: relative; height: 3.4em; display: flex; align-items: center; justify-content: space-between; padding: .35em 1.9em 0 2.3em; font: 600 1.06em/1 var(--body); color: #fff; }
.app__island { position: absolute; left: 50%; top: .72em; width: 7.7em; height: 2.25em; margin-left: -3.85em; border-radius: 2em; background: #000; }
.app__icons { display: flex; align-items: center; gap: .32em; }
.app__icons svg { height: .72em; width: auto; }
.app__icons .s-signal { width: 1.1em; } .app__icons .s-wifi { width: 1.05em; } .app__icons .s-batt { width: 1.6em; height: .82em; }
.app__icons .s-plane { width: .95em; height: .95em; display: none; }
.app__bar { display: flex; align-items: center; gap: .62em; padding: .2em 1.1em .7em .9em; border-bottom: 1px solid rgba(103, 232, 249, .16); background: #0D2036; }
.app__bar > svg { width: 1.32em; height: 1.32em; flex: none; color: #DCEBFA; }
.app__bar .app__back { width: 1.35em; height: 1.35em; }
.mini-cover { flex: none; width: 1.45em; height: 1.95em; border-radius: .2em; background: linear-gradient(170deg, #22D3EE 0%, #3B82F6 45%, #4338CA 100%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); position: relative; overflow: hidden; }
.mini-cover i { position: absolute; left: .14em; right: .1em; bottom: .2em; font: 700 .26em/1.05 var(--body); color: #fff; font-style: normal; }
.app__title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .12em; }
.app__title b { font: 600 1.02em/1.2 var(--body); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app__title small { font-size: .78em; color: #A8C3DF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app__page { padding: 1.05em 1.5em 0; }
.app__chapter { font-size: 1.06em; color: #C9DCF0; margin-bottom: .95em; }
.app__text { position: relative; font-size: 1.19em; line-height: 1.6; letter-spacing: -.005em;
  margin: calc(-.42em - 2px) calc(-.5em - 2px); padding: .42em .5em; border: 2px solid transparent; border-radius: .7em;
  transition: transform 1s var(--ease), border-color .7s var(--ease), background-color .7s var(--ease), box-shadow 1s var(--ease); }
.is-lifted .app__text {
  background-color: #10273F; border-color: rgba(255, 224, 138, .92);
  transform: translate3d(-.15em, -.4em, 0) rotate(-.7deg) scale(1.04);
  box-shadow: 0 1.2em 2.2em -.6em rgba(2, 6, 20, .8), 0 .3em .8em rgba(2, 6, 20, .35), 0 0 1.5em rgba(255, 196, 92, .32);
}
.is-lifted.is-reading .app__text { transform: translate3d(-.2em, -.6em, 0) rotate(-.9deg) scale(1.055); border-color: #FFE08A; box-shadow: 0 1.6em 2.6em -.6em rgba(2, 6, 20, .85), 0 .3em .8em rgba(2, 6, 20, .35), 0 0 2.2em rgba(255, 196, 92, .62); }
.app__text p { margin: 0; }
.app__more { font-size: 1.19em; line-height: 1.6; margin-top: 1em; letter-spacing: -.005em; }
.app__dock { position: absolute; z-index: 2; left: .6em; right: .6em; bottom: 1.25em; padding: .75em .9em .8em; border-radius: 1.7em; background: rgba(15, 37, 60, .8); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(103, 232, 249, .22); box-shadow: 0 -1em 2.4em rgba(4, 12, 24, .55); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .app__dock { background: #0F253C; } }
/* Under the dock, the page fades out the way it does in the app. */
.app__page { position: relative; }
.app::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.6em; z-index: 1; background: linear-gradient(180deg, rgba(11, 29, 49, 0), #0B1D31 70%); pointer-events: none; }
.app__dock::before { content: ""; position: absolute; left: 50%; top: .38em; width: 2.6em; height: .26em; margin-left: -1.3em; border-radius: 1em; background: rgba(168, 195, 223, .35); }
.dock__meta { display: flex; justify-content: space-between; font: 400 .7em/1 var(--mono); color: #95ADC8; padding: .55em .25em 0; }
.dock__line { width: 100%; height: 2.1em; margin: .1em 0 .1em; }
.dock__row { display: flex; align-items: center; justify-content: space-between; gap: .4em; }
.dock__row--2 { margin-top: .7em; justify-content: flex-start; gap: .5em; }
.dock__chip { display: inline-flex; align-items: center; gap: .4em; height: 2.55em; padding: 0 .95em; border-radius: 2em; background: rgba(30, 64, 96, .75); border: 1px solid rgba(103, 232, 249, .16); font: 600 .9em/1 var(--body); color: #E7F3FF; white-space: nowrap; }
.dock__chip svg { width: 1.1em; height: 1.1em; }
.dock__chip .wx { font-size: .7em; }
.dock__chip--sleep svg { color: #E7F3FF; }
.dock__skip svg { width: 1.45em; height: 1.45em; color: #E7F3FF; }
.dock__play { position: relative; width: 3.95em; height: 3.95em; border: 0; border-radius: 50%; padding: 0; display: grid; place-items: center; cursor: pointer; color: #04172B; background: radial-gradient(circle at 50% 40%, #8DEBFA, #38BDF8 60%, #2589D8); box-shadow: 0 0 0 .2em rgba(34, 211, 238, .25), 0 0 1.6em rgba(34, 211, 238, .55); --rs-ripple-color: #22D3EE; }
.dock__play svg { position: relative; z-index: 1; width: 1.75em; height: 1.75em; }
.dock__play .i-pause, .dock__play.is-playing .i-play { display: none; }
.dock__play.is-playing .i-pause { display: block; }
.dock__play.is-nudge::after { content: ""; position: absolute; inset: -.35em; border-radius: 50%; border: .18em solid #FFE08A; animation: nudge 1.2s var(--ease) infinite; }
@keyframes nudge { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.dock__up { width: 1.2em; height: 1.2em; margin-left: auto; transform: rotate(90deg); color: #E7F3FF; }
.app .rs-glide-pill { border-radius: .3em; }
/* A spoken word is one box: a hyphenated one ("egyszer-kétszer", "раз-другой") never splits across lines,
   where its pill and sentence band would span both. */
.rs-glide [data-rs-w] { white-space: nowrap; }
/* One sweep of golden light across the glass as the phone comes up (never takes a click). */
.phone--live .phone__screen::after { content: ""; position: absolute; inset: -10% -60%; z-index: 6; pointer-events: none; opacity: 0;
  background: linear-gradient(104deg, transparent 38%, rgba(255, 236, 200, .05) 44%, rgba(255, 244, 220, .2) 49%, rgba(255, 236, 200, .05) 54%, transparent 60%); }
@media (prefers-reduced-motion: no-preference) {
  .js .phone--live .phone__screen::after { animation: glare 1.5s cubic-bezier(.3, .1, .3, 1) 1.15s both; }
}
@keyframes glare { 0% { opacity: 1; transform: translate3d(-55%, 0, 0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate3d(55%, 0, 0); } }

/* ------------------------------------------------------------------ Hero */
/* Clipped sideways only: the phone's soft shadow may fall past the hero's bottom edge instead of ending on a line. */
.hero { position: relative; padding: calc(var(--nav-h) + 26px) 0 0; overflow: hidden; overflow-x: clip; overflow-y: visible; --ground-h: 330px; }
.hero__scene { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero, .finale { --hy: calc(100% - var(--ground-h)); }
.sunbox { position: absolute; left: 0; right: 0; top: 0; height: var(--hy); overflow: hidden; pointer-events: none; }
/* Below 1000px main.js puts the horizon behind the phone (placeHorizon). Until it has, the
   scene stays hidden, so a first paint before the script never shows the sun jump (layout
   shift). If the script never runs, the scene shows after 3 s where the CSS puts it. */
@media (max-width: 999px) {
  .js .hero:not(.is-placed) .hero__scene { visibility: hidden; animation: sceneLate 0s 3s both; }
}
@keyframes sceneLate { to { visibility: visible; } }
.sun { position: absolute; left: 50%; top: 100%; width: min(118vw, 520px); aspect-ratio: 1; transform: translate(-50%, -72%); will-change: transform; }
.sun__body { position: absolute; inset: 0; }
.sun__halo { position: absolute; inset: -42%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 200, 120, .55) 0%, rgba(255, 140, 110, .28) 30%, rgba(255, 95, 162, .1) 50%, transparent 68%); }
.sun__disc {
  position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(180deg, #FFF6C8 0%, #FFE08A 24%, #FFB347 50%, #FF7A59 74%, #FF4F95 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0 52%, transparent 52% 55%, #000 55% 62%, transparent 62% 66%, #000 66% 72%, transparent 72% 77%, #000 77% 82%, transparent 82% 88%, #000 88% 92%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 0 52%, transparent 52% 55%, #000 55% 62%, transparent 62% 66%, #000 66% 72%, transparent 72% 77%, #000 77% 82%, transparent 82% 88%, #000 88% 92%, transparent 92%);
  box-shadow: 0 0 120px rgba(255, 170, 90, .5);
}
.ground { position: absolute; left: 0; right: 0; top: var(--hy); bottom: 0; background: linear-gradient(180deg, #3A0E48 0%, #23082F 26%, rgba(23, 6, 34, .74) 50%, rgba(23, 6, 34, .5) 72%, rgba(23, 6, 34, .36) 88%, rgba(23, 6, 34, .3) 100%); overflow: hidden; }
.ground .grid { bottom: auto; height: min(100%, 330px); }
.ground__glow { position: absolute; left: 0; right: 0; top: 0; height: min(60%, 200px); background: radial-gradient(60% 100% at 50% 0%, rgba(255, 150, 90, .45), rgba(255, 95, 162, .14) 45%, transparent 75%); }
.grid { position: absolute; inset: 0; perspective: 260px; perspective-origin: 50% 0; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, #000 18%, #000 42%, transparent 70%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, #000 18%, #000 42%, transparent 70%); }
.grid__plane { position: absolute; left: -100%; right: -100%; top: 0; height: 250px; transform-origin: 50% 0; transform: rotateX(76deg); overflow: hidden; }
.grid__lines { position: absolute; left: 0; right: 0; top: -60px; bottom: 0; will-change: transform;
  background-image:
    linear-gradient(90deg, rgba(255, 120, 170, .85) 0 2px, transparent 2px),
    linear-gradient(180deg, rgba(255, 170, 110, .85) 0 2px, transparent 2px);
  background-size: var(--cell, 60px) var(--cell, 60px); background-position: 50% 0;
  animation: gridrun 3.2s linear infinite paused;
}
.is-live .grid__lines { animation-play-state: running; }
@keyframes gridrun { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, var(--cell, 60px), 0); } }
.grid { --cell: 44px; }
@media (min-width: 720px) { .grid { --cell: 60px; } }
.horizon-line { position: absolute; left: 0; right: 0; top: var(--hy); height: 2px; margin-top: -1px; background: linear-gradient(90deg, transparent, #FFD08A 20%, #FFF1C1 50%, #FFD08A 80%, transparent); box-shadow: 0 0 18px 4px rgba(255, 170, 100, .7), 0 0 60px 12px rgba(255, 120, 150, .3); }
.horizon-wave { position: absolute; left: 0; width: 100%; height: 90px; top: calc(var(--hy) - 45px); }
/* Spoken words lift off the page and drift into the sky as glowing handwriting. */
.sparks { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sparks--front { z-index: 3; }
.spark { position: absolute; left: 0; top: 0; font: 700 var(--fs, 32px)/1 var(--hand); color: #FFF1C1; white-space: nowrap; text-shadow: 0 0 10px rgba(255, 200, 110, .95), 0 0 26px rgba(255, 120, 120, .6); opacity: 0; will-change: transform, opacity;
  animation: spark var(--dur, 2.9s) cubic-bezier(.2, .7, .3, 1) forwards; }
.spark--cyan { color: #E0FBFF; text-shadow: 0 0 10px rgba(34, 211, 238, .95), 0 0 26px rgba(59, 130, 246, .6); }
@keyframes spark {
  0% { opacity: 0; transform: translate3d(var(--x0), var(--y0), 0) translate(-50%, -50%) scale(var(--s0, .7)); }
  16% { opacity: .95; }
  70% { opacity: .75; }
  100% { opacity: 0; transform: translate3d(calc(var(--x0) + var(--dx)), calc(var(--y0) + var(--dy)), 0) translate(-50%, -50%) scale(1) rotate(var(--rot, -5deg)); }
}

.hero__in { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter) 40px; display: grid; gap: 22px; }

.hero__copy { display: flex; flex-direction: column; gap: 22px; }
.hero__brand { display: flex; align-items: center; gap: 12px; }
.hero__brand img { width: 52px; height: 52px; border-radius: 22.37%; box-shadow: 0 8px 22px -6px rgba(10, 0, 30, .6), 0 0 0 1px rgba(255, 255, 255, .12); }
.hero__brand > span { display: flex; flex-direction: column; gap: 3px; }
.hero__brand b { font: 700 22px/1 var(--display); letter-spacing: .01em; }
.hero__brand > span > span { font: 600 14px/1.2 var(--display); color: var(--muted); }
.hero__title { font: 700 clamp(46px, 7.4vw, 94px)/.98 var(--display); letter-spacing: -.012em; text-wrap: balance; text-shadow: 0 6px 40px rgba(40, 0, 60, .35); }
.story { display: flex; flex-direction: column; gap: 18px; }
.story__text { font: 600 clamp(22px, 2.35vw, 31px)/1.36 var(--display); color: #FFF1E4; max-width: 30ch; text-wrap: pretty; }
.story__text .kw { display: inline-block; transition: color .35s var(--ease), text-shadow .45s var(--ease), transform .45s var(--ease), opacity .35s; }
/* A word and the punctuation touching it never part at a line end (main.js renderWords). */
.story__text .kwg, .stage__sentence .kwg { white-space: nowrap; }
.story.is-reading .story__text .kw { color: rgba(255, 236, 222, .5); }
.story.is-reading .story__text .kw.is-said { color: #FFF4E6; }
.story.is-reading .story__text .kw.is-now { color: var(--gold); text-shadow: 0 0 .45em rgba(255, 196, 92, .85), 0 0 1.2em rgba(255, 110, 90, .5); transform: translateY(-.06em) scale(1.06); }
/* A fast attack, so even "a" and "in" (25-50 ms) turn fully gold; is-said keeps the slow fade. */
.story.is-reading .story__text .kw.is-now, .stage__sentence.is-reading .kw.is-now { transition: color .1s var(--ease), text-shadow .14s var(--ease), transform .2s var(--ease), opacity .1s; }
.story.is-done .story__text .kw { animation: shimmer 1.4s var(--ease) both; animation-delay: calc(var(--k) * 28ms); }
@keyframes shimmer { 0% { color: #FFF4E6; } 40% { color: var(--gold); text-shadow: 0 0 .4em rgba(255, 196, 92, .7); } 100% { color: #FFF1E4; text-shadow: none; } }
.story__play { display: flex; align-items: center; gap: 16px; }
.story__play .playbtn:not(.is-playing)::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(255, 224, 138, .55); animation: invite 2.6s var(--ease) infinite; pointer-events: none; }
@keyframes invite { 0% { transform: scale(.92); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.32); opacity: 0; } }
.story__label { display: flex; flex-direction: column; gap: 4px; }
.story__label b { font: 700 20px/1.1 var(--display); }
.story__label span { font: 500 13px/1.3 var(--body); color: var(--muted-2); text-shadow: 0 1px 14px rgba(30, 0, 50, .5); }
.hero__lead { font: 400 clamp(17px, 1.45vw, 19px)/1.55 var(--body); color: var(--muted); max-width: 46ch; }
/* Phones: the hint under "Tap to hear" wraps to two lines in some states; a fixed box keeps the label from shifting. */
@media (max-width: 599px) { .story__label { min-height: calc(20px * 1.1 + 4px + 13px * 1.3 * 2); justify-content: flex-start; } }
.hero__cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hero__req { font: 500 13px/1.45 var(--body); color: var(--muted-2); text-shadow: 0 1px 14px rgba(30, 0, 50, .5); }

.hero__device { position: relative; display: grid; justify-items: center; padding: 18px 0 8px; }
/* Flat, not preserve-3d: the frame must never win hit-testing over the screen's words and play button. */
.tilt { position: relative; transform-style: flat; transform: perspective(1500px) rotateY(-10deg) rotateX(6deg) rotateZ(3deg); will-change: transform; }
.hero__device .phone { --pw: min(74vw, 290px); }
.float { animation: float 7s ease-in-out infinite alternate; }
@keyframes float { from { translate: 0 -6px; } to { translate: 0 8px; } }
.note { position: absolute; left: auto; right: -15%; top: 51%; bottom: auto; z-index: 3; pointer-events: none; transform: rotate(-8deg); padding: .28em .6em .36em; border-radius: 8px 12px 10px 14px; background: linear-gradient(170deg, #FFF6D6, #FFEBB0); color: var(--note-ink); font: 700 clamp(28px, 2.7vw, 38px)/.98 var(--hand); white-space: nowrap; box-shadow: 0 18px 30px -12px rgba(30, 0, 40, .6), 0 3px 8px rgba(30, 0, 40, .25), 0 2px 0 rgba(255, 255, 255, .6) inset; transition: scale .5s var(--ease); }
.note.is-lit { scale: 1.08; }
.hero__phonecap { margin-top: 26px; font: 500 13px/1.3 var(--body); color: var(--muted-2); text-align: center; position: relative; z-index: 2; text-shadow: 0 1px 14px rgba(30, 0, 50, .5); }

@media (min-width: 720px) {
  .hero__device .phone { --pw: 300px; }
}
@media (min-width: 1000px) {
  .hero { --ground-h: clamp(130px, 17vh, 200px); display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--nav-h) + 8px); padding-bottom: var(--ground-h); min-height: max(100svh, 760px); }
  .hero__in { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: end; gap: 24px; width: 100%; padding-bottom: 0; }
  .hero__copy { gap: 20px; padding-bottom: 30px; }
  .hero__title { font-size: clamp(56px, 5.9vw, 86px); }
  .story { gap: 16px; }
  .story__text { font-size: clamp(24px, 2vw, 29px); max-width: 32ch; }
  .hero__lead { max-width: 560px; }
  .hero__device { padding: 0; margin-bottom: calc(var(--ground-h) * -1 + 34px); }
  .hero__device .phone { --pw: clamp(270px, 22vw, 318px); }
  .hero__phonecap { display: none; }
  .sun { left: 73%; width: clamp(440px, 40vw, 600px); }
}
@media (min-width: 1440px) {
  .sun { left: 71%; }
}
/* Short laptop screens (1280×720, 1366×768): a tighter hero, so the phone's dock and
   play button and the horizon all sit above the fold. */
@media (min-width: 1000px) and (max-height: 860px) {
  .hero { --ground-h: clamp(104px, 14.5vh, 200px); min-height: max(100svh, 680px); }
  .hero__copy { gap: 14px; padding-bottom: 16px; }
  .hero__title { font-size: clamp(52px, min(5.9vw, 10.2vh), 86px); }
  .story { gap: 12px; }
  .story__text { font-size: clamp(21px, min(2vw, 3.4vh), 29px); }
  .story .playbtn { width: 60px; height: 60px; }
  .story .playbtn svg { width: 26px; height: 26px; }
  .hero__lead { font-size: 17px; }
  .hero__device .phone { --pw: clamp(232px, min(22vw, calc((100svh - 150px) * .47)), 318px); }
}

@media (max-width: 999px) {
  .hero__in > .hero__copy { display: contents; }
  .hero__in .hero__title { order: 1; } .hero__in .hero__lead { order: 2; } .hero__in .story { order: 3; } .hero__in .hero__device { order: 4; } .hero__in .hero__cta { order: 5; } .hero__in .chips { order: 6; }
  .hero__device .tilt { transform: perspective(1800px) rotateY(-5deg) rotateX(2deg) rotateZ(2deg); }
  .hero__device .note { left: auto; right: -7%; top: .5%; bottom: auto; font-size: clamp(23px, 6.4vw, 30px); }
}
@media (min-width: 600px) and (max-width: 999px) {
  .hero__device .note { right: -31%; top: -1.5%; font-size: 32px; }
}

/* Hero intro: the evening begins. Pure CSS (runs before main.js), motion only.
   The sun rises, the horizon draws itself, the title is "read" word by word,
   the phone comes up, its paragraph lifts out (main.js) and the note lands. */
.tw { display: inline-block; }
.nowrap { white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .js .intro { animation: introUp .95s var(--ease) both; animation-delay: var(--t, 0ms); }
  .js .intro--phone { animation: phoneUp 1.4s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--t, 0ms); }
  .js .hero__title .tw { animation: twIn .9s var(--ease) both, twRead 1.3s ease-out both; }
  .js .hero__title em .tw { animation-name: twIn, twReadEm; }
  .js .hero__title .tw--0 { animation-delay: 90ms, 90ms; }
  .js .hero__title .tw--1 { animation-delay: 260ms, 260ms; }
  .js .hero__title .tw--2 { animation-delay: 430ms, 430ms; }
  .js .hero__title .tw--3 { animation-delay: 590ms, 590ms; }
  .js .hero .sun__body { animation: sunUp 2.4s cubic-bezier(.22, .8, .2, 1) both; }
  .js .hero .ground { animation: fadeIn 1.4s ease-out .1s both; }
  .js .hero .horizon-line { animation: drawX 1.3s var(--ease) .12s both; }
  .js .hero .horizon-wave { animation: fadeIn 1.6s ease-out .8s both; }
  .js .hero .note { animation: noteIn 1s cubic-bezier(.34, 1.45, .6, 1) 2.45s both; }
}
@keyframes introUp { from { opacity: 0; transform: translate3d(0, 22px, 0); } }
@keyframes phoneUp { from { opacity: 0; transform: translate3d(0, 110px, 0) scale(.95); } }
@keyframes twIn { from { opacity: 0; transform: translate3d(0, .32em, 0) scale(.94); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes twRead { 0%, 22% { color: #FFE08A; text-shadow: 0 0 .3em rgba(255, 196, 92, .95), 0 0 .8em rgba(255, 110, 90, .6); } 100% { color: #fff; text-shadow: 0 6px 40px rgba(40, 0, 60, .35); } }
@keyframes twReadEm { 0%, 22% { color: #FFF6D2; text-shadow: 0 0 .3em rgba(255, 224, 150, 1), 0 0 .9em rgba(255, 120, 90, .8); } 100% { color: #FFE08A; text-shadow: 0 0 30px rgba(255, 190, 90, .35); } }
@keyframes sunUp { from { transform: translate3d(0, 40%, 0); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes drawX { from { transform: scaleX(0); opacity: 0; } }
@keyframes noteIn { 0% { opacity: 0; transform: translate3d(16px, -50px, 0) rotate(-28deg) scale(1.22); } 55% { opacity: 1; } 100% { opacity: 1; transform: rotate(-8deg); } }

/* ------------------------------------------------------------------ Formats */
/* The hero's dusk ground ends at 30 % shade; this carries it on and eases it out,
   so the hero never ends on a line. (Paints above the fixed sky: later in tree order.) */
.formats::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 260px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(23, 6, 34, .3) 0%, rgba(23, 6, 34, .24) 18%, rgba(23, 6, 34, .15) 40%, rgba(23, 6, 34, .07) 64%, rgba(23, 6, 34, .02) 84%, rgba(23, 6, 34, 0) 100%); }
.formats__layout { display: grid; gap: 40px; align-items: center; }
.formats__phone { display: none; justify-self: center; }
.formats__phone .phone { transform: rotate(-4deg); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile { position: relative; padding: 12px 12px 16px; border-radius: 22px; background: linear-gradient(165deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .035) 60%); border: 1px solid var(--hair); box-shadow: 0 20px 40px -26px rgba(10, 0, 30, .7); transition: transform .4s var(--ease), border-color .3s; }
.tile:hover { border-color: rgba(255, 224, 138, .45); }
.tile h3 { margin: 14px 4px 6px; font: 600 18px/1.2 var(--display); letter-spacing: .005em; }
.tile p { margin: 0 4px; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.tile__art { position: relative; height: 96px; border-radius: 15px; overflow: hidden; background: linear-gradient(135deg, #FF7A59, #FF5FA2); }
.formats__foot { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 30px; font: 600 15px/1.35 var(--display); color: var(--muted); }
.formats__foot li { display: flex; align-items: center; gap: 9px; }
.formats__foot svg { width: 20px; height: 20px; color: var(--gold); flex: none; }
@media (min-width: 640px) { .tiles { gap: 16px; } .tile { padding: 14px 14px 18px; } }
@media (min-width: 1000px) {
  .formats__layout { grid-template-columns: 290px minmax(0, 1fr); gap: 56px; }
  .formats__phone { display: block; }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .formats__foot { margin-left: 346px; }
}
/* tile art: small looping scenes (they run only while on screen) */
.tile__art * { position: absolute; display: block; }
.tile__art .tag { right: 10px; top: 10px; padding: 3px 7px; border-radius: 6px; font: 700 10px/1 var(--mono); letter-spacing: .06em; color: #fff; background: rgba(43, 16, 85, .55); }
.tile__art .pg { left: 50%; top: 14px; width: 54px; height: 70px; margin-left: -27px; border-radius: 5px; background: #FFF6EA; box-shadow: 0 8px 18px -6px rgba(40, 0, 40, .5); padding: 10px 8px; }
.tile__art .pg i, .tile__art .pg b { position: relative; height: 4px; border-radius: 2px; background: #D7C3E8; margin-bottom: 6px; }
.tile__art .pg i:nth-child(2n) { width: 80%; }
.art-pdf { background: linear-gradient(135deg, #FF7A59, #FF4F95) !important; }
.art-pdf .beam { left: calc(50% - 38px); width: 76px; height: 14px; top: 8px; border-radius: 7px; background: linear-gradient(180deg, transparent, rgba(255, 240, 160, .95), transparent); filter: drop-shadow(0 0 6px rgba(255, 220, 120, .9)); opacity: .9; }
.is-live .art-pdf .beam { animation: beam 2.6s var(--turn) infinite; }
@keyframes beam { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(66px); opacity: 0; } }
.art-epub { background: linear-gradient(135deg, #7C3AED, #4338CA) !important; }
.art-epub .cv { left: 16px; top: 14px; width: 48px; height: 68px; border-radius: 4px 6px 6px 4px; background: linear-gradient(160deg, #22D3EE, #3B82F6 55%, #4338CA); box-shadow: 0 8px 16px -6px rgba(10, 0, 40, .6); }
.art-epub .cv b { left: 6px; bottom: 7px; font: 700 9px/1 var(--mono); color: #fff; letter-spacing: .05em; }
.art-epub .toc { left: 78px; right: 14px; top: 18px; }
.art-epub .toc i { position: relative; height: 9px; border-radius: 5px; background: rgba(255, 255, 255, .25); margin-bottom: 8px; }
.art-epub .toc i:nth-child(1) { width: 90%; } .art-epub .toc i:nth-child(2) { width: 70%; } .art-epub .toc i:nth-child(3) { width: 84%; } .art-epub .toc i:nth-child(4) { width: 60%; }
.is-live .art-epub .toc i { animation: tocglow 4s steps(1) infinite; }
.art-epub .toc i:nth-child(2) { animation-delay: -3s !important; } .art-epub .toc i:nth-child(3) { animation-delay: -2s !important; } .art-epub .toc i:nth-child(4) { animation-delay: -1s !important; }
@keyframes tocglow { 0% { background: var(--gold); box-shadow: 0 0 10px rgba(255, 224, 138, .8); } 25% { background: rgba(255, 255, 255, .25); box-shadow: none; } }
.art-word { background: linear-gradient(135deg, #3B82F6, #22D3EE) !important; }
.art-word .pg b { height: 7px; width: 70%; background: #3B82F6; }
.is-live .art-word .pg b { animation: headpulse 2.8s ease-in-out infinite; }
@keyframes headpulse { 50% { background: #F59E0B; box-shadow: 0 0 8px rgba(245, 158, 11, .8); } }
.art-web { background: linear-gradient(135deg, #14B8A6, #0E7490) !important; }
.art-web .win { left: 14px; right: 14px; top: 12px; bottom: 12px; border-radius: 8px; background: #FFF6EA; overflow: hidden; }
.art-web .bar { left: 0; right: 0; top: 0; height: 13px; background: #E9DDF3; }
.art-web .bar i { position: relative; display: inline-block; top: 4px; left: 6px; width: 5px; height: 5px; border-radius: 50%; background: #C7A9E0; margin-right: 3px; }
.art-web .bar u { left: 34px; right: 8px; top: 3px; height: 7px; border-radius: 4px; background: #fff; }
.art-web .menu { left: 8px; right: 8px; top: 19px; height: 7px; border-radius: 3px; background: #B9A3D0; }
.art-web .body { left: 8px; right: 30%; top: 32px; }
.art-web .body i { position: relative; height: 4px; border-radius: 2px; background: #6D4C9E; margin-bottom: 5px; }
.art-web .ft { left: 8px; right: 8px; bottom: 6px; height: 6px; border-radius: 3px; background: #B9A3D0; }
.is-live .art-web .menu, .is-live .art-web .ft { animation: skipped 3.2s ease-in-out infinite; }
@keyframes skipped { 0%, 30% { opacity: 1; } 55%, 90% { opacity: .12; } 100% { opacity: 1; } }
.art-photo { background: linear-gradient(135deg, #FFB347, #FF7A59) !important; }
.art-photo .pola { left: 50%; top: 10px; width: 66px; height: 78px; margin-left: -33px; background: #FFFDF6; border-radius: 3px; transform: rotate(-6deg); box-shadow: 0 10px 18px -8px rgba(60, 0, 20, .55); }
.art-photo .pic { left: 6px; right: 6px; top: 6px; height: 52px; background: linear-gradient(160deg, #5B2C83, #2B1055); padding: 9px 7px; }
.art-photo .pic i { position: relative; height: 3px; border-radius: 2px; background: rgba(255, 241, 193, .85); margin-bottom: 6px; }
.art-photo .flash { inset: 0; background: #fff; opacity: 0; }
.is-live .art-photo .flash { animation: flash 3.6s ease-out infinite; }
@keyframes flash { 0%, 70% { opacity: 0; } 72% { opacity: .85; } 100% { opacity: 0; } }
.art-scan { background: linear-gradient(135deg, #C2307A, #6D28D9) !important; }
.art-scan .vf { left: 50%; top: 9px; width: 78px; height: 80px; margin-left: -39px; }
.art-scan .vf b { width: 16px; height: 16px; border: 3px solid var(--gold); }
.art-scan .vf b:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.art-scan .vf b:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.art-scan .vf b:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.art-scan .vf b:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
.is-live .art-scan .vf { animation: focus 2.4s var(--turn) infinite alternate; }
@keyframes focus { from { transform: scale(1.12); opacity: .7; } to { transform: scale(.96); opacity: 1; } }
.art-text { background: linear-gradient(135deg, #4338CA, #2563EB) !important; }
.art-text .tok { padding: 4px 8px; border-radius: 8px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); font: 700 13px/1 var(--mono); color: #FFF1C1; }
.art-text .t1 { left: 12%; top: 16px; } .art-text .t2 { left: 52%; top: 12px; } .art-text .t3 { left: 22%; top: 56px; } .art-text .t4 { left: 58%; top: 52px; }
.is-live .art-text .tok { animation: bob 3s ease-in-out infinite alternate; }
.art-text .t2 { animation-delay: -1s !important; } .art-text .t3 { animation-delay: -2s !important; } .art-text .t4 { animation-delay: -.5s !important; }
@keyframes bob { from { transform: translateY(-4px); } to { transform: translateY(5px); } }
.art-paste { background: linear-gradient(135deg, #FF5FA2, #FFB347) !important; }
.art-paste .line { left: 12px; right: 12px; top: 30px; height: 36px; border-radius: 10px; background: rgba(43, 16, 85, .55); border: 1px solid rgba(255, 255, 255, .25); }
.art-paste .typed { position: absolute; left: 10px; top: 0; bottom: 0; display: flex; align-items: center; overflow: hidden; white-space: nowrap; font: 700 20px/1 var(--hand); color: var(--cream); width: 0; }
.art-paste .caret { position: absolute; top: 9px; width: 2px; height: 18px; background: var(--gold); left: 10px; }
.js .art-paste .typed { width: 0; }
.no-js .art-paste .typed, .is-live .art-paste .typed { width: 118px; }
.is-live .art-paste .typed { animation: type 4.2s steps(16) infinite; }
.is-live .art-paste .caret { animation: caretmove 4.2s steps(16) infinite, blink .8s steps(1) infinite; }
@keyframes type { 0% { width: 0; } 60%, 100% { width: 118px; } }
@keyframes caretmove { 0% { left: 10px; } 60%, 100% { left: 130px; } }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tile__art * { animation: none !important; }
  .js .art-paste .typed { width: 118px; } .art-paste .caret { left: 130px; }
}

/* ------------------------------------------------------------------ Voices: lanterns + stage */
@property --lift { syntax: "<length>"; inherits: false; initial-value: 0px; }
.lanterns { position: relative; max-width: 1180px; margin: 0 auto 34px; }
.lanterns__fallback { max-width: 60ch; margin: 0 auto; text-align: center; color: var(--muted); }
.js .lanterns__fallback { display: none; }
.lanterns__flies { position: absolute; inset: -20px 0; pointer-events: none; }
.lanterns__flies i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #FFE9A8; box-shadow: 0 0 6px 2px rgba(255, 220, 120, .8); opacity: 0; }
.motion .lanterns.is-live .lanterns__flies i { animation: fly var(--d, 9s) ease-in-out var(--dl, 0s) infinite; }
@keyframes fly { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: .9; } 50% { transform: translate(var(--fx, 30px), var(--fy, -24px)); opacity: .35; } 80% { opacity: .9; } 100% { transform: translate(0, 0); opacity: 0; } }

/* Festoons: each row is a wire with lanterns hanging from it (laid out by main.js). */
.lanterns__strands { position: relative; }
.lanterns__rows { position: relative; padding: 6px 0 18px; }
.lrow { position: relative; display: flex; justify-content: space-evenly; align-items: flex-start; }
.lrow__wire { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.lrow__wire path { fill: none; stroke: url(#wireGrad); stroke-width: 1.5; }
.lrow__wire circle { fill: #FFE7B0; }
.lanterns__hint { display: none; }
.lanterns__strands.is-scroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent); }
.lanterns__strands.is-scroll::-webkit-scrollbar { display: none; }
.lanterns__strands.is-scroll .lanterns__rows { padding: 22px 0 34px; }
.lanterns__strands.is-scroll + .lanterns__hint { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 2px; font: 600 14px/1.2 var(--display); color: var(--muted-2); }
.lanterns__hint svg { width: 18px; height: 18px; color: var(--gold); }

.lantern {
  --L: 16px; --ty: 0px; --a: 3deg;
  --c0: #FFF4CF; --c1: #FFD77A; --c2: #FFA94D;
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 2px 20px 0; border: 0; border-radius: 22px / 50%; cursor: pointer;
  color: #2B1055; font: 600 16.5px/1.1 var(--display); letter-spacing: .005em; white-space: nowrap;
  background:
    repeating-linear-gradient(180deg, rgba(140, 50, 40, 0) 0 6px, rgba(140, 50, 40, .11) 6px 7px),
    radial-gradient(120% 150% at 50% 50%, var(--c0) 0%, var(--c1) 46%, var(--c2) 100%);
  box-shadow: inset 0 3px 0 rgba(110, 36, 40, .34), inset 0 -3px 0 rgba(110, 36, 40, .34), inset 0 0 16px rgba(255, 255, 240, .55), 0 0 30px rgba(255, 150, 80, .42), 0 12px 20px -12px rgba(30, 0, 40, .7);
  translate: 0 calc(var(--ty) - var(--lift));
  transform-origin: 50% calc((var(--L) - var(--lift)) * -1);
  transition: --lift .7s var(--ease), scale .5s var(--ease), box-shadow .45s var(--ease), filter .3s;
}
.lantern::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1.5px; margin-left: -.75px; height: calc(var(--L) - var(--lift)); background: linear-gradient(180deg, rgba(255, 232, 205, .6), rgba(255, 232, 205, .32)); pointer-events: none; }
.lantern::after { content: ""; position: absolute; left: 50%; top: -4px; width: 20px; height: 7px; margin-left: -10px; border-radius: 3px 3px 2px 2px; background: linear-gradient(180deg, #8A4434, #4D1E2C); box-shadow: 0 1px 0 rgba(255, 220, 180, .25) inset; pointer-events: none; }
.lantern.lt-1 { --c0: #FFECDD; --c1: #FFBB90; --c2: #FF8258; }
.lantern.lt-2 { --c0: #FFE9F2; --c1: #FFB0CF; --c2: #F36CA2; }
.lantern.lt-3 { --c0: #FFF2D9; --c1: #FFCB8E; --c2: #FF9C55; }
.lantern.f-sys { font-family: var(--rounded); font-weight: 650; }
.lantern:hover { filter: brightness(1.07) saturate(1.05); }
.lantern:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 18px; }
.motion .lanterns.is-live .lantern { animation: sway var(--d, 5s) ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes sway { from { rotate: calc(var(--a) * -1); } to { rotate: var(--a); } }
.lantern[aria-pressed="true"] {
  --lift: 10px; z-index: 2; scale: 1.09;
  background:
    repeating-linear-gradient(180deg, rgba(140, 50, 40, 0) 0 6px, rgba(140, 50, 40, .08) 6px 7px),
    radial-gradient(120% 150% at 50% 50%, #FFFFF6 0%, #FFF0B8 42%, #FFC560 100%);
  box-shadow: inset 0 3px 0 rgba(110, 36, 40, .3), inset 0 -3px 0 rgba(110, 36, 40, .3), inset 0 0 18px rgba(255, 255, 255, .8), 0 0 0 3px rgba(255, 246, 220, .35), 0 0 36px rgba(255, 214, 120, .9), 0 0 90px rgba(255, 140, 90, .5);
}
.lantern.is-playing { --lift: 20px; }
.motion .lanterns.is-live .lantern.is-playing { animation: sway 1.6s ease-in-out infinite alternate, flame .5s ease-in-out infinite alternate; }
@keyframes flame { from { filter: brightness(1); } to { filter: brightness(1.13) saturate(1.1); } }
@media (max-width: 599px) { .lantern { font-size: 15.5px; padding: 2px 16px 0; min-height: 44px; } }

.stage { display: grid; gap: 28px; align-items: center; padding: 26px 20px 28px; border-radius: 32px; background: linear-gradient(165deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .025) 60%); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--hair); box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .8); max-width: 1040px; margin: 0 auto; }
.stage__phone { display: grid; justify-items: center; gap: 14px; }
.stage__phone .phone { --pw: 210px; }
.stage__img { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease); }
.stage__img.is-on { opacity: 1; }
.stage__phonecap { font: 500 13px/1.3 var(--body); color: var(--muted-2); text-align: center; }
.stage__copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.stage__lang { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.stage__lang b { font: 700 clamp(34px, 4.6vw, 54px)/1.05 var(--display); color: var(--gold); text-shadow: 0 0 30px rgba(255, 190, 90, .35); }
.stage__lang b.f-sys { font-family: var(--rounded); }
.stage__lang span { font: 600 16px/1.2 var(--display); color: var(--muted-2); }
.stage__sentence { font: 600 clamp(22px, 2.6vw, 32px)/1.38 var(--display); color: rgba(255, 241, 228, .95); min-height: 2.8em; text-wrap: pretty; }
.stage__sentence.f-sys { font-family: var(--rounded); font-weight: 600; }
.stage__sentence .kw { display: inline-block; transition: color .3s var(--ease), text-shadow .4s var(--ease), transform .4s var(--ease); }
.stage__sentence.is-reading .kw { color: rgba(255, 236, 222, .5); }
.stage__sentence.is-reading .kw.is-said { color: #FFF4E6; }
.stage__sentence.is-reading .kw.is-now { color: var(--gold); text-shadow: 0 0 .45em rgba(255, 196, 92, .85); transform: translateY(-.05em) scale(1.05); }
.stage__wave { display: block; width: 100%; height: 46px; margin: -6px 0 -8px; }
.stage__row { display: flex; align-items: center; gap: 16px; }
.stage__voice { display: flex; flex-direction: column; gap: 4px; }
.stage__voice b { font: 600 19px/1.1 var(--display); }
.stage__voice span { font: 500 13px/1.3 var(--body); color: var(--muted-2); }
.stage__facts { display: grid; gap: 8px; }
.stage__facts li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.45; color: var(--muted); }
.stage__facts li::before { content: ""; position: absolute; left: 4px; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px rgba(255, 224, 138, .8); }
.stage__fine { font-size: 13px; line-height: 1.5; color: var(--muted-2); }
.voicepick { display: grid; gap: 10px; }
.voicepick__title { font: 600 15px/1.35 var(--display); color: var(--muted); }
.voicepick__row { display: flex; flex-wrap: wrap; gap: 8px; }
.vchip { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 7px 13px 7px 9px; border-radius: 999px; border: 1px solid rgba(255, 236, 220, .2); background: rgba(255, 255, 255, .07); cursor: pointer; font: 600 15px/1 var(--display); transition: background-color .25s, border-color .25s, box-shadow .3s; }
.vchip small { font: 500 12px/1 var(--body); color: var(--muted-2); }
.vchip .dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 224, 138, .18); color: var(--gold); }
.vchip .dot svg { width: 12px; height: 12px; }
.vchip:hover { border-color: rgba(255, 224, 138, .5); }
@media (max-width: 599px) { .voicepick__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .vchip { font-size: 14px; } .vchip .g { display: none; } }
.vchip[aria-pressed="true"] { background: rgba(255, 224, 138, .16); border-color: rgba(255, 224, 138, .7); box-shadow: 0 0 22px rgba(255, 190, 90, .3); }
.vchip.is-playing .dot { background: var(--gold); color: #2B1055; }
@media (min-width: 860px) {
  .stage { grid-template-columns: 280px minmax(0, 1fr); padding: 44px 56px; gap: 56px; }
  .stage__phone .phone { --pw: 250px; }
}

/* ------------------------------------------------------------------ Follow along */
.follow__layout { display: grid; gap: 44px; }
.reader { padding: 14px; border-radius: 30px; background: rgba(20, 12, 54, .5); border: 1px solid var(--hair); box-shadow: 0 50px 100px -60px rgba(0, 0, 0, .9); }
.reader__tools { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.seg, .papers { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button, .papers button { min-height: 44px; padding: 8px 13px; border-radius: 999px; border: 1px solid rgba(255, 236, 220, .18); background: rgba(255, 255, 255, .06); cursor: pointer; font: 600 14px/1 var(--display); color: #FFF4E6; display: inline-flex; align-items: center; gap: 7px; transition: background-color .25s, color .25s, border-color .25s; }
.seg button small { font: 500 12px/1 var(--body); color: var(--muted-2); }
.seg button:hover, .papers button:hover { border-color: rgba(255, 224, 138, .5); }
.seg button[aria-pressed="true"] { background: linear-gradient(120deg, #FFE08A, #FFB347); color: #2B1055; border-color: transparent; }
.seg button[aria-pressed="true"] small { color: rgba(43, 16, 85, .75); }
.papers button .sw { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), 0 0 0 1px rgba(255, 255, 255, .35); }
.papers button[aria-pressed="true"] { border-color: var(--gold); background: rgba(255, 224, 138, .16); box-shadow: 0 0 18px rgba(255, 190, 90, .25); }
.paper { --paper-bg: #0B1D31; --paper-text: #DCEBFA; --paper-dim: #A8C3DF; --fs: 19px; position: relative; padding: 24px 20px 18px; border-radius: 22px; background: var(--paper-bg); color: var(--paper-text); transition: background-color .6s var(--ease), color .6s var(--ease); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.paper__chapter { font: 500 calc(var(--fs) * .9)/1.35 var(--body); color: var(--paper-dim); margin-bottom: 12px; transition: color .6s; }
.paper__text { font: 400 var(--fs)/1.6 var(--body); letter-spacing: -.005em; }
.paper__text p { margin: 0; }
.paper__more { font: 400 var(--fs)/1.6 var(--body); margin-top: 1em; letter-spacing: -.005em; max-height: 3.2em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); mask-image: linear-gradient(180deg, #000 30%, transparent); }
.paper[data-paper="clarity"] .paper__text, .paper[data-paper="clarity"] .paper__more, .paper[data-paper="clarity"] .paper__chapter { font-family: "Atkinson Hyperlegible", var(--body); }
.paper__bar { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(127, 160, 200, .18); }
.paper__prog { flex: 1; min-width: 0; }
.paper__prog canvas { width: 100%; height: 24px; }
.paper__meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 400 12px/1 var(--mono); color: var(--paper-dim); margin-top: 4px; }
.paper__meta .wx { font-size: 11px; }
.paper.is-light .paper__meta .wx { color: #15803D; background: rgba(22, 163, 74, .08); border-color: rgba(22, 163, 74, .45); }
.paper.is-light .paper__meta .wx::before { background: #16A34A; box-shadow: none; }
.paper.is-light .paper__bar { border-top-color: rgba(11, 27, 46, .12); }
.reader__opts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 14px; padding: 0 4px; }
.range { display: flex; align-items: center; gap: 12px; font: 600 14px/1 var(--display); color: var(--muted); }
.range b { color: #fff; font-weight: 600; }
.range input { width: 150px; accent-color: #FFE08A; }
.toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; border: 0; background: none; padding: 6px 0; cursor: pointer; font: 600 14px/1.2 var(--display); color: var(--muted); }
.toggle__track { position: relative; width: 44px; height: 26px; border-radius: 13px; background: rgba(255, 255, 255, .18); transition: background-color .3s; flex: none; }
.toggle__knob { position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transition: transform .35s var(--ease); }
[aria-checked="true"] > .toggle__track { background: #34C759; }
[aria-checked="true"] > .toggle__track .toggle__knob { transform: translateX(18px); }
.reader__cap { margin: 12px 4px 2px; font: 500 13px/1.4 var(--body); color: var(--muted-2); }
.perks { display: grid; gap: 22px; align-content: start; }
.perk { display: flex; gap: 16px; align-items: flex-start; }
.perk__ic { flex: none; width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; color: var(--gold); background: linear-gradient(150deg, rgba(255, 224, 138, .2), rgba(255, 95, 162, .14)); border: 1px solid rgba(255, 224, 138, .25); }
.perk__ic svg { width: 24px; height: 24px; }
.perk h3 { font: 600 20px/1.25 var(--display); margin: 2px 0 6px; }
.perk p { font-size: 15.5px; line-height: 1.5; color: var(--muted); }
@media (min-width: 720px) { .reader { padding: 18px; } .paper { padding: 32px 34px 20px; } .reader__tools { flex-direction: row; justify-content: space-between; align-items: center; } }
@media (min-width: 1080px) { .follow__layout { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 60px; align-items: start; } .perks { padding-top: 10px; } }

/* ------------------------------------------------------------------ Private / flight */
.flight { position: relative; border-radius: 34px; overflow: hidden; background: radial-gradient(120% 80% at 70% 10%, #1B2A5A, #0A1630 60%, #050B1A); border: 1px solid rgba(160, 200, 255, .14); box-shadow: 0 60px 120px -60px rgba(0, 0, 0, .9); isolation: isolate; }
.flight__sea { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.flight__sky { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.flight__trail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; clip-path: inset(0 100% 0 0); transition: opacity 1.4s var(--ease); }
.flight__trail path { fill: none; stroke: rgba(255, 241, 193, .75); stroke-width: 2.2; stroke-dasharray: 2 11; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.plane { position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; color: #FFF6E5; opacity: 0; filter: drop-shadow(0 0 8px rgba(255, 230, 180, .7)); }
.plane svg { width: 100%; height: 100%; }
.plane__blink { position: absolute; right: 2px; top: 13px; width: 4px; height: 4px; border-radius: 50%; background: #FF5F6D; box-shadow: 0 0 6px 2px rgba(255, 95, 109, .9); animation: blink 1s steps(1) infinite; }
.flight__in { position: relative; z-index: 2; display: grid; gap: 30px; padding: 30px 18px 36px; justify-items: center; }
.flight__phone .phone { --pw: 236px; }
.mini { position: absolute; inset: 0; background: linear-gradient(180deg, #0B1D31, #0A1830); color: #DCEBFA; font-size: 4.1026cqw; display: flex; flex-direction: column; }
.mini .app__status { flex: none; }
.mini .app__icons svg { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.is-air .mini .s-signal, .is-air .mini .s-wifi { opacity: 0; transform: scale(.4); width: 0; }
.is-air .mini .s-plane { display: block; color: #FFB347; animation: pop .5s var(--ease); }
@keyframes pop { from { transform: scale(.2); } 60% { transform: scale(1.3); } to { transform: scale(1); } }
.mini__eyebrow { margin: 2.4em 1.6em 1em; font: 700 .72em/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #67E8F9; display: flex; align-items: center; gap: .5em; }
.mini__eyebrow::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: #A3E635; box-shadow: 0 0 6px #A3E635; }
.mini__text { margin: auto 1.1em; font-size: 2.4em; line-height: 1.38; font-weight: 650; letter-spacing: -.015em; }
.mini__meta { display: flex; align-items: center; justify-content: space-between; margin: 0 1.6em; font: 400 .74em/1 var(--mono); color: #95ADC8; }
.mini__meta b { font-weight: 400; color: #95ADC8; transition: color .4s; }
.is-air .mini__meta b { color: #A3E635; }
.mini__text p { margin: 0; }
.mini__bars { width: auto; height: 4.6em; margin: .5em 1.2em 0; }
.mini .playbtn { align-self: center; margin: .8em 0 2.6em; width: 4.4em; height: 4.4em; }
.mini .playbtn svg { width: 1.9em; height: 1.9em; }
.flight__ctl { display: grid; gap: 18px; width: 100%; max-width: 460px; }
@media (max-width: 859px) { .flight__ctl { padding: 16px 16px 20px; border-radius: 26px; background: linear-gradient(180deg, rgba(5, 12, 32, .5), rgba(5, 12, 32, .78)); box-shadow: 0 0 0 1px rgba(160, 200, 255, .1), 0 20px 40px -20px rgba(0, 0, 0, .7); } }
.airswitch { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(10, 20, 44, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; text-align: left; }
.airswitch__ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: #FF9F0A; color: #fff; flex: none; }
.airswitch__ic svg { width: 24px; height: 24px; }
.airswitch__label { flex: 1; font: 600 19px/1.1 var(--display); }
.toggle__track--big { width: 56px; height: 34px; border-radius: 17px; }
.toggle__track--big .toggle__knob { width: 28px; height: 28px; }
[aria-checked="true"] > .toggle__track--big .toggle__knob { transform: translateX(22px); }
.flight__hint { font: 700 26px/1.15 var(--hand); color: var(--gold); text-align: center; min-height: 1.2em; }
.checks { display: grid; gap: 12px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.checks li b { color: #fff; font-weight: 600; }
.checks svg { flex: none; width: 24px; height: 24px; padding: 4px; border-radius: 50%; color: #2B1055; background: rgba(255, 224, 138, .5); transition: background-color .4s, box-shadow .4s, transform .5s var(--ease); }
.is-air .checks svg { background: var(--gold); box-shadow: 0 0 14px rgba(255, 224, 138, .8); transform: scale(1.08); }
.is-air .checks li:nth-child(2) svg { transition-delay: .12s; } .is-air .checks li:nth-child(3) svg { transition-delay: .24s; } .is-air .checks li:nth-child(4) svg { transition-delay: .36s; }
.offline { margin-top: 28px; padding: 24px 22px; border-radius: 28px; background: var(--card); border: 1px solid var(--hair); }
.offline__title { font: 600 22px/1.2 var(--display); margin-bottom: 16px; }
.offline__list { display: grid; gap: 14px; }
.offline__list > div { display: grid; gap: 3px; align-content: start; padding-top: 14px; border-top: 1px solid var(--hair); }
.offline__list > div:first-child { border-top: 0; padding-top: 0; }
.offline__list dt { font: 600 17px/1.3 var(--display); color: var(--gold); }
.offline__list dd { font-size: 15.5px; line-height: 1.5; color: var(--muted); }
@media (min-width: 860px) {
  .flight__in { grid-template-columns: auto minmax(0, 460px); justify-content: center; gap: 70px; padding: 60px 56px 64px; align-items: center; }
  .flight__phone .phone { --pw: 260px; }
  .flight__hint { text-align: left; }
  .offline { padding: 30px 36px; }
  .offline__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .offline__list > div { border-top: 0; padding-top: 0; border-left: 1px solid var(--hair); padding-left: 20px; }
  .offline__list > div:first-child { border-left: 0; padding-left: 0; }
}

/* ------------------------------------------------------------------ Night */
.night { padding-bottom: clamp(160px, 18vw, 240px); overflow: hidden; overflow: clip; }
.night__ground { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(170px, 20vw, 260px); pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%); mask-image: linear-gradient(180deg, transparent, #000 30%); }
.grid--night { -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .3), #000 25%, #000 55%, transparent 88%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .3), #000 25%, #000 55%, transparent 88%); }
.grid--night .grid__lines { background-image: linear-gradient(90deg, rgba(232, 72, 170, .7) 0 2px, transparent 2px), linear-gradient(180deg, rgba(190, 80, 220, .7) 0 2px, transparent 2px); animation-duration: 4.6s; }
.night__ground::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(232, 72, 170, .9), transparent); box-shadow: 0 0 22px 6px rgba(232, 72, 170, .45); z-index: 1; }
.bento { display: grid; gap: 16px; position: relative; z-index: 1; }
.card { position: relative; padding: 22px; border-radius: 28px; background: linear-gradient(165deg, rgba(40, 26, 100, .9), rgba(18, 10, 50, .92)); border: 1px solid rgba(200, 180, 255, .16); box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .9); overflow: hidden; }
.card h3 { font: 600 22px/1.2 var(--display); margin-bottom: 8px; }
.card p { font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.card--sleep { display: grid; gap: 18px; justify-items: center; }
.dial { position: relative; width: min(100%, 240px); }
.dial__svg { width: 100%; height: auto; overflow: visible; }
.dial__track { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 6; }
.dial__arc { fill: none; stroke-width: 6; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 100px 100px; transition: stroke-dashoffset .9s var(--ease); filter: drop-shadow(0 0 6px rgba(255, 170, 110, .8)); }
.dial__ticks line { stroke: rgba(255, 255, 255, .28); stroke-width: 2; stroke-linecap: round; transition: stroke .4s; }
.dial__ticks line.on { stroke: #FFE08A; }
.dial__moonglow { fill: rgba(255, 241, 193, .12); filter: blur(6px); }
#phaseShadow { transition: cx .9s var(--ease); }
.dial__value { position: absolute; left: 0; right: 0; bottom: -4px; text-align: center; font: 700 22px/1 var(--display); color: #fff; text-shadow: 0 0 10px rgba(18, 10, 50, .9); }
.dial__value small { font: 600 13px/1 var(--display); color: var(--muted-2); margin-left: 4px; }
.card--sleep .card__body { width: 100%; }
.sleepchips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 12px; }
.sleepchips button { min-height: 44px; border-radius: 14px; border: 1px solid rgba(200, 180, 255, .2); background: rgba(255, 255, 255, .06); cursor: pointer; font: 600 15px/1 var(--display); color: #FFF4E6; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background-color .25s, border-color .25s, color .25s, box-shadow .3s; }
.sleepchips button svg { width: 16px; height: 16px; }
.sleepchips button.wide { grid-column: span 2; }
.sleepchips button.ghost { background: transparent; border-style: dashed; }
.sleepchips button:hover { border-color: rgba(255, 224, 138, .5); }
.sleepchips button[aria-pressed="true"] { background: linear-gradient(120deg, #FFE08A, #FFB347); color: #2B1055; border-color: transparent; box-shadow: 0 0 22px rgba(255, 190, 90, .35); }
.sleep__out { font: 600 16px/1.4 var(--display); color: var(--gold) !important; min-height: 2.8em; }
.card--lock { display: grid; gap: 20px; justify-items: center; }
/* The mock phone's long drop shadow must not grey the heading painted after it. */
.card--lock .card__body { position: relative; z-index: 1; }
.lockphone .phone { --pw: 200px; }
.lock { position: absolute; inset: 0; font-size: 4.1026cqw; color: #fff; text-align: center; background: radial-gradient(120% 60% at 50% 100%, #8E2F7E 0%, transparent 60%), radial-gradient(90% 50% at 80% 10%, rgba(120, 90, 230, .5), transparent 60%), linear-gradient(180deg, #120B3A, #241252 60%, #3A1666); }
.lock .app__status { justify-content: flex-end; }
.lock .app__status .app__time { display: none; }
.lock__padlock { width: 1.4em; height: 1.4em; margin: .6em auto 0; opacity: .9; }
.lock .lock__date { margin-top: .6em; font: 600 1.15em/1 var(--body); color: #fff; opacity: .85; }
.lock .lock__clock { font: 700 6.2em/1 var(--rounded); letter-spacing: -.02em; margin-top: .05em; background: linear-gradient(180deg, #fff, #FFE3C4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lock__np { position: absolute; left: .9em; right: .9em; bottom: 3.2em; padding: 1em; border-radius: 1.6em; background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, .2); text-align: left; }
.lock__head { display: flex; gap: .8em; align-items: center; }
.lock__head b { display: block; font: 600 .95em/1.25 var(--body); }
.lock__head small { font-size: .8em; opacity: .75; }
.mini-cover--lg { width: 2.6em; height: 3.4em; border-radius: .35em; }
.mini-cover--lg i { font-size: .34em; }
.lock__bar { position: relative; height: .3em; margin: 1em 0 .9em; border-radius: 1em; background: rgba(255, 255, 255, .25); overflow: hidden; }
.lock__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 36%; border-radius: 1em; background: #fff; }
.motion .card--lock.is-live .lock__bar i { animation: lockprog 30s linear infinite; }
@keyframes lockprog { from { width: 30%; } to { width: 60%; } }
.lock__ctl svg { width: 2em; height: 2em; margin: 0 auto; }
.card--speed { display: grid; gap: 18px; align-content: space-between; }
/* A little speedometer: the needle swings to the chosen speed and trembles while it plays. */
.gauge { width: min(100%, 236px); justify-self: center; margin: -2px auto -8px; }
.gauge__svg { width: 100%; height: auto; overflow: visible; }
.gauge__track { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 7; stroke-linecap: round; }
.gauge__arc { fill: none; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 60; transition: stroke-dashoffset .9s var(--ease); filter: drop-shadow(0 0 6px rgba(255, 170, 110, .8)); }
.gauge__ticks line { stroke: rgba(255, 255, 255, .28); stroke-width: 2.5; stroke-linecap: round; transition: stroke .4s; }
.gauge__ticks line.on { stroke: #FFE08A; }
.gauge__end { font: 500 11px var(--mono); fill: rgba(255, 244, 236, .82); }
.gauge__needle, .gauge__shake { transform-box: view-box; transform-origin: 120px 116px; }
.gauge__needle { transform: rotate(-14.4deg); transition: transform .9s cubic-bezier(.34, 1.45, .6, 1); }
.gauge__needle path { fill: #FFF1C1; filter: drop-shadow(0 0 5px rgba(255, 224, 138, .85)); }
.gauge__hub { fill: #FFE08A; filter: drop-shadow(0 0 8px rgba(255, 190, 90, .8)); }
.motion .card--speed.is-playing .gauge__shake { animation: needle .26s ease-in-out infinite alternate; }
@keyframes needle { from { transform: rotate(-1.3deg); } to { transform: rotate(1.3deg); } }
@media (prefers-reduced-motion: reduce) { .gauge__needle, .gauge__arc { transition: none; } }
.ruler { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; padding: 10px 6px 0; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(200, 180, 255, .14); }
.ruler::before { content: ""; position: absolute; left: 14px; right: 14px; top: 22px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 2px, transparent 2px 10px); }
.ruler button { position: relative; min-height: 52px; padding: 22px 0 8px; border: 0; background: none; cursor: pointer; font: 600 14px/1 var(--display); color: var(--muted-2); border-radius: 12px; transition: color .25s; }
.ruler button::before { content: ""; position: absolute; left: 50%; top: 4px; width: 3px; height: 16px; margin-left: -1.5px; border-radius: 2px; background: rgba(255, 255, 255, .45); transition: background-color .25s, box-shadow .3s, height .3s, top .3s; }
.ruler button[aria-pressed="true"] { color: var(--gold); }
.ruler button[aria-pressed="true"]::before { top: 0; height: 24px; background: var(--gold); box-shadow: 0 0 12px rgba(255, 224, 138, .9); }
.speed__row { display: flex; align-items: center; gap: 14px; }
.speed__out { display: flex; flex-direction: column; gap: 4px; }
.speed__out b { font: 600 17px/1.2 var(--display); }
.speed__out span { font: 400 13px/1.2 var(--mono); color: var(--muted-2); }
.card--tape { display: grid; gap: 18px; align-content: start; }
.tape { width: min(100%, 300px); justify-self: center; }
.tape__svg { width: 100%; height: auto; filter: drop-shadow(0 18px 24px rgba(10, 0, 30, .6)); }
.tape__label { font: 700 26px/1 var(--hand); fill: #3A1A63; }
.reel { transform-box: fill-box; transform-origin: center; }
.motion .card--tape.is-live .reel { animation: spin 3.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
  .card { padding: 28px; }
  .card--sleep { grid-column: span 4; grid-template-columns: 240px minmax(0, 1fr); align-items: center; gap: 32px; justify-items: stretch; }
  .card--lock { grid-column: span 2; grid-row: span 2; align-content: center; }
  .card--speed { grid-column: span 2; }
  .card--tape { grid-column: span 2; }
  .lockphone .phone { --pw: 220px; }
}

/* ------------------------------------------------------------------ Gallery */
.head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; }
.head--row > div:first-child { max-width: 760px; }
.gallery__nav { display: none; gap: 10px; flex: none; }
.roundbtn { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255, 236, 220, .25); background: rgba(255, 255, 255, .07); display: grid; place-items: center; cursor: pointer; transition: background-color .25s, border-color .25s, opacity .25s; }
.roundbtn svg { width: 22px; height: 22px; }
.roundbtn:hover { border-color: var(--gold); background: rgba(255, 224, 138, .14); }
.roundbtn:disabled { opacity: .35; cursor: default; }
.gallery__track { display: flex; gap: 22px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 24px max(var(--gutter), calc((100vw - 1240px) / 2 + var(--gutter))) 30px; scrollbar-width: none; -webkit-overflow-scrolling: touch; perspective: 1400px; }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track:focus-visible { outline-offset: -3px; border-radius: 0; }
.shot { flex: none; scroll-snap-align: center; display: grid; justify-items: center; gap: 18px; }
.shot .phone { --pw: 230px; transition: transform .5s var(--ease); will-change: transform; }
.shot figcaption { text-align: center; font-size: 14px; line-height: 1.35; color: var(--muted-2); max-width: 230px; }
.shot figcaption b { display: block; margin-bottom: 4px; font: 600 18px/1.2 var(--display); color: #fff; }
.tablet { --tw: 300px; width: var(--tw); padding: calc(var(--tw) * .028); border-radius: calc(var(--tw) * .07); background: linear-gradient(140deg, #FFC48A, #E0702A 40%, #B9531C 55%, #FFB774); box-shadow: inset 0 0 0 1.5px rgba(255, 228, 196, .75), 0 50px 90px -30px rgba(20, 0, 40, .75); transition: transform .5s var(--ease); will-change: transform; }
.tablet__screen { border-radius: calc(var(--tw) * .045); overflow: hidden; aspect-ratio: 1200 / 1600; background: #0B1D31; box-shadow: 0 0 0 calc(var(--tw) * .012) #0A0610; }
.tablet__screen img { width: 100%; height: 100%; object-fit: cover; }
.shot--ipad figcaption { max-width: 300px; }
@media (min-width: 900px) {
  .gallery__nav { display: flex; }
  .gallery__track { gap: 34px; padding-top: 30px; padding-bottom: 40px; }
  .shot .phone { --pw: 270px; }
  .shot figcaption { max-width: 270px; }
  .tablet { --tw: 440px; }
  .shot--ipad figcaption { max-width: 440px; }
}

/* ------------------------------------------------------------------ Pricing */
.plans { display: grid; gap: 18px; max-width: 960px; margin: 0 auto; }
.plan { position: relative; padding: 28px 24px 30px; border-radius: 30px; background: rgba(26, 14, 66, .58); border: 1px solid var(--hair); overflow: hidden; box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .9); }
.plan h3 { font: 700 26px/1.1 var(--display); }
.plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 18px 0 6px; }
.plan__price b { font: 700 clamp(48px, 6vw, 62px)/1 var(--display); letter-spacing: -.01em; }
.plan__price span { font: 600 17px/1 var(--display); color: var(--muted); white-space: nowrap; } /* "free download" moves whole */
.plan__note { font: 600 15px/1.3 var(--display); color: var(--gold); min-height: 1.3em; }
.plan ul { display: grid; gap: 12px; margin-top: 22px; }
.plan li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.45; color: var(--muted); }
.plan li b { color: #fff; font-weight: 600; }
.plan li svg { flex: none; width: 22px; height: 22px; padding: 3px; margin-top: 1px; border-radius: 50%; background: rgba(255, 224, 138, .2); color: var(--gold); }
.plan--pro { background: linear-gradient(160deg, rgba(255, 150, 100, .32), rgba(194, 48, 122, .3) 45%, rgba(43, 16, 85, .7)); border-color: rgba(255, 224, 138, .55); box-shadow: 0 0 0 1px rgba(255, 224, 138, .15), 0 40px 100px -40px rgba(255, 120, 120, .45); }
.plan--pro li svg { background: var(--gold); color: #2B1055; }
.plan__glow { position: absolute; right: -30%; top: -50%; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 224, 138, .4), transparent 65%); pointer-events: none; }
/* Pro: both plans side by side, as on the app's plans screen (readable without JS). */
.opts { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.opt { padding: 14px 14px 15px; border-radius: 20px; background: rgba(20, 8, 50, .38); border: 1px solid rgba(255, 236, 220, .2); }
.opt--best { background: linear-gradient(160deg, rgba(70, 24, 96, .62), rgba(48, 14, 78, .6)); border: 1.5px solid rgba(255, 224, 138, .85); box-shadow: 0 0 26px rgba(255, 190, 90, .22), inset 0 0 30px rgba(255, 210, 120, .08); }
.opt__name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font: 600 16px/1.2 var(--display); color: #fff; }
.opt__save { padding: 3px 8px; border-radius: 999px; font: 700 11.5px/1.1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: #2B1055; background: linear-gradient(120deg, #FFE08A, #FFB347); }
.opt__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-top: 10px; }
.opt__price b { font: 700 clamp(32px, 3.6vw, 40px)/1 var(--display); letter-spacing: -.01em; color: #fff; }
.opt__price span { font: 600 15px/1 var(--display); color: var(--muted); }
.opt__sub { margin-top: 6px; font: 600 14px/1.3 var(--display); color: var(--gold); text-wrap: balance; }
.opt:not(.opt--best) .opt__sub { color: var(--muted-2); }
.plan__renew { position: relative; margin-top: 12px; font-size: 13.5px; line-height: 1.45; color: var(--muted-2); }
/* Phones: each plan is one row, name on the left and price on the right, so both scan at a glance. */
@media (max-width: 519px) {
  .opts { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "sub price"; column-gap: 12px; row-gap: 4px; align-items: center; padding: 14px 16px; }
  .opt__name { grid-area: name; }
  .opt__price { grid-area: price; margin-top: 0; flex-direction: column; align-items: flex-end; gap: 3px; }
  .opt__price b { font-size: 32px; }
  .opt__price span { font-size: 14px; }
  .opt__sub { grid-area: sub; margin-top: 0; }
  /* "Just NGN 3,325.00 a month" can't fit beside a long amount: prices.js marks the group, and both
     plans put their line under the name and the price, the full width of the card. */
  .opts[data-price-crowded] .opt { grid-template-areas: "name price" "sub sub"; }
}
.plans__fine { max-width: 760px; margin: 26px auto 0; text-align: center; font-size: 13.5px; line-height: 1.55; color: var(--muted-2); }
/* Local amounts ("KZT 12,990.00") never break, and never leave their card: max-width is the room
   each may take, and assets/shared/prices.js shrinks the type of one that would overflow it. */
.opt { container-type: inline-size; }
.opt__price b, .plan__price b { min-width: 0; max-width: 100%; white-space: nowrap; }
@media (max-width: 519px) { .opt__price b { max-width: 54cqi; } }
/* Side by side, the unit always sits on its own line under the amount, so Yearly and Monthly line up
   for every country (a long "¥11,000" would otherwise push only "a year" down). */
@media (min-width: 520px) { .opt__price span { flex-basis: 100%; } }
/* Price country: whose App Store prices are shown (assets/shared/prices.js guesses it on the device).
   The real <select> lies invisibly over the visible name, so it stays native for touch, keyboard and screen readers. */
.pricepick { display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; margin: calc(-1 * clamp(10px, 2vw, 30px)) auto clamp(22px, 3vw, 30px); padding: 3px 3px 3px 14px; border-radius: 999px; background: rgba(26, 14, 66, .62); border: 1px solid var(--hair); font: 600 15px/1.2 var(--display); color: var(--muted); }
.pricepick > svg { flex: none; width: 18px; height: 18px; color: var(--gold); }
.pricepick__label { flex: none; cursor: pointer; }
.pricepick__field { position: relative; display: inline-flex; align-items: center; gap: 6px; min-width: 0; min-height: 44px; padding: 7px 12px 7px 14px; border-radius: 999px; background: rgba(255, 224, 138, .12); border: 1px solid rgba(255, 224, 138, .5); color: #fff; transition: background-color .2s, border-color .2s; }
.pricepick__field:hover { background: rgba(255, 224, 138, .2); border-color: var(--gold); }
.pricepick__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pricepick__chev { flex: none; width: 16px; height: 16px; color: var(--gold); }
.pricepick__select { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); margin: 0; padding: 0 12px; border: 0; border-radius: inherit; opacity: 0; cursor: pointer; font: 16px/1.2 var(--body); color: #fff; background: #241455; -webkit-appearance: none; appearance: none; }
.pricepick__select option { color: #fff; background: #241455; }
.pricepick__field:has(.pricepick__select:focus-visible) { outline: 3px solid var(--gold); outline-offset: 3px; }
@supports not selector(:has(*)) { .pricepick__field:focus-within { outline: 3px solid var(--gold); outline-offset: 3px; } }
.no-js .pricepick { display: none; }
@media (max-width: 359px) { .pricepick > svg { display: none; } .pricepick { padding-left: 12px; } }
@media (prefers-reduced-motion: reduce) { .pricepick__field { transition: none; } }
@media (min-width: 820px) { .plans { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); align-items: stretch; } .plan { padding: 36px 34px 38px; } }

/* ------------------------------------------------------------------ FAQ */
.faq__list { border-top: 1px solid var(--hair); }
.faq__list details { border-bottom: 1px solid var(--hair); }
.faq__list summary { position: relative; list-style: none; cursor: pointer; padding: 20px 48px 20px 4px; font: 600 clamp(18px, 1.8vw, 21px)/1.3 var(--display); transition: color .2s; border-radius: 12px; }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: rgba(255, 224, 138, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23FFE08A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; transition: transform .35s var(--ease), background-color .25s; }
.faq__list details[open] summary::after { transform: rotate(180deg); background-color: rgba(255, 224, 138, .3); }
.faq__list summary:hover { color: var(--gold); }
.faq__a { padding: 0 48px 22px 4px; }
.faq__a p { font-size: 16px; line-height: 1.6; color: var(--muted); }
.faq__list details[open] .faq__a { animation: faqin .45s var(--ease); }
@keyframes faqin { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.path { white-space: nowrap; color: #fff; }
.path svg { display: inline-block; width: 13px; height: 13px; vertical-align: -1px; color: var(--gold); margin: 0 1px; }
.faq__more { margin-top: 28px; text-align: center; }
.linkbtn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 999px; border: 1px solid rgba(255, 224, 138, .5); color: var(--gold); text-decoration: none; font: 600 16px/1 var(--display); transition: background-color .25s, color .25s; }
.linkbtn svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.linkbtn:hover { background: rgba(255, 224, 138, .14); color: #fff; }
.linkbtn:hover svg { transform: translateX(3px); }

/* ------------------------------------------------------------------ Finale (sunrise) */
/* The last frame: the CTA stands in the dawn sky and the sun comes up right behind the badge. */
.finale { --ground-h: 150px; --sun-w: min(96vw, 500px); display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: 40px; padding-bottom: calc(var(--ground-h) + var(--sun-w) * .42 - 30px);
  overflow: hidden; overflow: clip; text-align: center; }
.finale__scene { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.sun--rise { left: 50%; width: var(--sun-w); }
.sun__rays { position: absolute; inset: -70%; border-radius: 50%; opacity: .9;
  background: repeating-conic-gradient(from 0deg, rgba(255, 228, 160, .2) 0deg 3deg, rgba(255, 228, 160, 0) 3.5deg 14deg);
  -webkit-mask-image: radial-gradient(circle, transparent 29%, #000 31%, rgba(0, 0, 0, .35) 48%, transparent 70%); mask-image: radial-gradient(circle, transparent 29%, #000 31%, rgba(0, 0, 0, .35) 48%, transparent 70%);
  animation: rays 140s linear infinite paused; }
.finale__scene.is-live .sun__rays { animation-play-state: running; }
@keyframes rays { to { transform: rotate(360deg); } }
@media (min-width: 900px) { .finale { --ground-h: 200px; --sun-w: 560px; min-height: max(min(100svh, 960px), 680px); padding-top: 64px; } }
.ground--dawn { background: linear-gradient(180deg, #3D1350 0%, #26092F 40%, #12061F 100%); }
.grid--dawn { -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .2), #000 22%, #000 55%, transparent 90%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .2), #000 22%, #000 55%, transparent 90%); }
.finale__in { position: relative; z-index: 1; display: grid; justify-items: center; gap: 22px; }
.finale .badge { box-shadow: 0 14px 34px -10px rgba(40, 0, 30, .7), 0 0 0 1px rgba(255, 255, 255, .25); }
.finale__icon { width: 88px; height: 88px; border-radius: 22.37%; box-shadow: 0 16px 40px -10px rgba(10, 0, 30, .7), 0 0 0 1px rgba(255, 255, 255, .14); }
.finale h2 { font: 700 clamp(48px, 8vw, 104px)/1 var(--display); letter-spacing: -.012em; text-wrap: balance; text-shadow: 0 6px 40px rgba(40, 0, 60, .45); }
.finale__sub { font: 600 clamp(18px, 1.9vw, 23px)/1.4 var(--display); color: #FFF1E2; max-width: 32ch; text-shadow: 0 2px 16px rgba(40, 0, 60, .55); }

/* ------------------------------------------------------------------ Footer */
.foot { position: relative; background: #12061F; padding: 46px 0 56px; color: var(--muted-2); font-size: 14px; }
.foot__in { display: grid; gap: 26px; }
.foot__brand { display: flex; align-items: center; gap: 12px; }
.foot__brand img { width: 40px; height: 40px; border-radius: 22.37%; }
.foot__brand p { display: flex; flex-direction: column; gap: 3px; }
.foot__brand b { font: 700 19px/1 var(--display); color: #fff; }
.foot__brand span { font: 600 14px/1.2 var(--display); }
.foot__links { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.foot__links a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 999px; border: 1px solid rgba(255, 236, 220, .16); color: #FFF4E6; text-decoration: none; font: 600 15px/1 var(--display); transition: border-color .2s, background-color .2s; }
.foot__links a:hover { border-color: var(--gold); background: rgba(255, 224, 138, .1); }
.foot__links svg { width: 17px; height: 17px; color: var(--gold); }
.foot__fine { display: grid; gap: 6px; line-height: 1.5; }
.foot__fine a { color: var(--muted); }
/* The owner's address: small, regular weight, body font, an ordinary link. */
.foot__mail a, .faq__a a[href^="mailto:"] { font-family: var(--body); font-weight: 400; font-size: inherit; letter-spacing: normal; }
.foot__mail { font-size: 14px; }
.foot__tm { font-size: 12.5px; opacity: .8; }
@media (min-width: 900px) {
  .foot__in { grid-template-columns: auto 1fr; align-items: start; gap: 30px 60px; }
  .foot__links { justify-content: flex-end; }
  .foot__fine { grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid var(--hair); }
}

/* ------------------------------------------------------------------ Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sky__bokeh i, .sky__stars canvas, .grid__lines, .lanterns__flies i, .float, .sun__rays, .plane__blink { animation: none !important; }
  .lanterns__flies { display: none; }
  .story__play .playbtn::after { display: none; }
  .story__text .kw, .stage__sentence .kw { transition: color .2s linear; transform: none !important; }
  .sky__shoot, .sky__lanterns { display: none; }
  .eyebrow.is-ticking svg { animation: none; }
}

/* ================================================================== Languages
   The page in 32 languages (built by _build/build-i18n.py). The language menu, a header that
   gives way when words are long, faces for scripts Fredoka and Caveat don't cover, and the
   right-to-left mirror for Arabic. */

/* Latin letters beyond Fredoka's subset (Polish, Czech, Hungarian, Turkish, Latvian…), built from
   Fredoka's own marks; Caveat's Latin and Cyrillic. Downloaded only by pages that use them. */
@font-face { font-family: "Fredoka B"; src: url("fonts/fredoka-600-ext.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0100-0107, U+010C-0113, U+0116-011B, U+011E-011F, U+0122-0123, U+012A-012B, U+012E-0130, U+0136-0137, U+0139-013E, U+0143-0148, U+0150-0151, U+0154-015B, U+015E-015F, U+0162-0165, U+016A-016B, U+016E-0173, U+0179-017C, U+0218-021B; }
@font-face { font-family: "Fredoka B"; src: url("fonts/fredoka-700-ext.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0100-0107, U+010C-0113, U+0116-011B, U+011E-011F, U+0122-0123, U+012A-012B, U+012E-0130, U+0136-0137, U+0139-013E, U+0143-0148, U+0150-0151, U+0154-015B, U+015E-015F, U+0162-0165, U+016A-016B, U+016E-0173, U+0179-017C, U+0218-021B; }
@font-face { font-family: "Caveat B"; src: url("fonts/caveat-700-ext.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+00A1-00D6, U+00D8-00E8, U+00EA-017E, U+018F, U+0192, U+01C4-01CC, U+01D4, U+01E5, U+01E7, U+01E9-01EB, U+01EF, U+01F1-01F5, U+01FA-021B, U+021F, U+0237, U+0259; }
@font-face { font-family: "Caveat B"; src: url("fonts/caveat-700-cyr.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+2116; }

/* Scripts Fredoka lacks: whole headings in one system face, never mixed mid-word. */
:root:lang(el), :root:lang(ru), :root:lang(uk), :root:lang(bg), :root:lang(vi) { --display: var(--rounded); }
:root:lang(el), :root:lang(vi) { --hand: var(--rounded); }
:root:lang(ar) { --display: ui-rounded, -apple-system, "SF Arabic", "Geeza Pro", "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif; --hand: var(--display); }
:root:lang(hi) { --display: ui-rounded, "Kohinoor Devanagari", "Devanagari Sangam MN", "Noto Sans Devanagari", "Nirmala UI", -apple-system, sans-serif; --hand: var(--display); }
:root:lang(ja) { --display: ui-rounded, "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif; --hand: var(--display); }
:root:lang(zh) { --display: ui-rounded, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif; --hand: var(--display); }
:root:lang(ko) { --display: ui-rounded, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; --hand: var(--display); }
/* Joined and stacked scripts: no letter-spacing, more room between lines. */
:root:lang(ar) *, :root:lang(hi) * { letter-spacing: 0 !important; }
:root:lang(ar) .hero__title, :root:lang(hi) .hero__title, :root:lang(vi) .hero__title, :root:lang(el) .hero__title { line-height: 1.16; }
:root:lang(ar) .head h2, :root:lang(hi) .head h2, :root:lang(vi) .head h2, :root:lang(ar) .finale h2, :root:lang(hi) .finale h2, :root:lang(vi) .finale h2 { line-height: 1.2; }
:root:lang(ja) .hero__title, :root:lang(zh) .hero__title, :root:lang(ko) .hero__title, :root:lang(ja) .head h2, :root:lang(zh) .head h2, :root:lang(ko) .head h2 { line-height: 1.14; }
/* Korean breaks lines between words (spaces), never inside one: everywhere, buttons, chips, table cells
   and captions included; a word too long for its box may still wrap rather than overflow. Text in
   another language (a Japanese sentence on the stage) breaks its own way. */
:root:lang(ko) { word-break: keep-all; overflow-wrap: break-word; }
:root:lang(ko) [lang]:not(:lang(ko)) { word-break: normal; }
:root:lang(ja) h1, :root:lang(ja) h2, :root:lang(ja) h3 { line-break: strict; }
/* Book titles stay upright where the script has no italics: Chinese, Japanese and Korean mark them
   with 《》『』, and Arabic and Devanagari faces have no italic, so the browser would only slant them. */
:lang(ja) i, :lang(ko) i, :lang(zh) i, :lang(ar) i, :lang(hi) i { font-style: normal; }

/* The kinetic headline: more words than four get their delays inline (style="--twd"). */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__title .tw[style] { animation-delay: var(--twd), var(--twd); }
}
/* "Once upon a time" typed out in the tile: its width and steps follow the translation, and a long one
   is set smaller (build-i18n.py writes --typed-w, --typed-n and, when needed, --typed-fs). */
.art-paste .typed { font-size: var(--typed-fs, 20px); }
.no-js .art-paste .typed, .is-live .art-paste .typed { width: var(--typed-w, 118px); }
.is-live .art-paste .typed { animation: type 4.2s steps(var(--typed-n, 16)) infinite; }
.is-live .art-paste .caret { animation: caretmove 4.2s steps(var(--typed-n, 16)) infinite, blink .8s steps(1) infinite; }
@keyframes type { 0% { width: 0; } 60%, 100% { width: var(--typed-w, 118px); } }
@keyframes caretmove { 0% { left: 10px; } 60%, 100% { left: calc(12px + var(--typed-w, 118px)); } }
@media (prefers-reduced-motion: reduce) {
  .js .art-paste .typed { width: var(--typed-w, 118px); } .art-paste .caret { left: calc(12px + var(--typed-w, 118px)); }
}

/* ------------------------------------------------------------------ The language menu (top-right) */
.lang { position: relative; flex: none; }
.lang__btn { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 11px 0 10px; border-radius: 999px; border: 1px solid rgba(255, 236, 220, .24); background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer; font: 600 14px/1 var(--display); letter-spacing: .04em; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; transition: color .2s, background-color .2s, border-color .2s; }
.lang__btn::-webkit-details-marker { display: none; }
.lang__btn::marker { content: ""; }
.lang__btn:hover, .lang[open] > .lang__btn { border-color: var(--gold); background: rgba(255, 224, 138, .12); }
.lang__btn:focus-visible { border-radius: 999px; }
.lang__globe { width: 18px; height: 18px; color: var(--gold); flex: none; }
.lang__code { font-family: "Fredoka B", ui-rounded, system-ui, sans-serif; }
.lang__chev { width: 13px; height: 13px; color: var(--gold); opacity: .9; flex: none; transition: transform .25s var(--ease); }
.lang[open] .lang__chev { transform: rotate(180deg); }
.lang__menu { position: absolute; top: calc(100% + 12px); inset-inline-end: -6px; z-index: 2; width: min(468px, calc(100vw - 24px)); max-height: calc(100vh - var(--nav-h) - 24px); overflow: auto; overscroll-behavior: contain; padding: 12px 12px 14px; border-radius: 24px;
  background: linear-gradient(180deg, rgba(43, 16, 85, .97), rgba(24, 10, 56, .97)); border: 1px solid rgba(255, 224, 138, .3);
  box-shadow: 0 30px 70px -20px rgba(8, 0, 24, .85), 0 0 60px rgba(255, 150, 90, .14), inset 0 1px 0 rgba(255, 241, 193, .12);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); }
.lang__title { padding: 6px 10px 12px; font: 600 13px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.lang__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 6px; }
.lang__list a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px; padding: 8px 12px; border-radius: 12px; color: #FFF4E6; text-decoration: none; font: 500 15.5px/1.25 var(--body); transition: background-color .15s, color .15s; }
.lang__list a:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.lang__list a[aria-current] { background: rgba(255, 224, 138, .16); color: var(--gold); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255, 224, 138, .35); }
.lang__list a svg { width: 16px; height: 16px; flex: none; }
.lang__list a:focus-visible { outline-offset: -1px; border-radius: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .lang[open] .lang__menu { animation: langIn .3s var(--ease) both; }
  .lang[open] .lang__list li { animation: langItem .34s var(--ease) both; animation-delay: calc(min(var(--n, 0), 12) * 14ms); }
}
@keyframes langIn { from { opacity: 0; transform: translate3d(0, -10px, 0) scale(.98); } }
@keyframes langItem { from { opacity: 0; transform: translate3d(0, 6px, 0); } }
@media (max-width: 599px) {
  .lang__menu { position: fixed; top: calc(var(--nav-h) + 4px); left: 12px; right: 12px; width: auto; max-height: calc(100vh - var(--nav-h) - 16px); max-height: calc(100dvh - var(--nav-h) - 16px); }
}

/* ------------------------------------------------------------------ A header that always fits
   langpick.js adds nav--fit1…4 while the row overflows; the media queries are the start without it. */
.nav__help-ic { display: none; width: 20px; height: 20px; flex: none; }
@media (max-width: 499px) { .nav .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
@media (max-width: 359px) {
  .nav__help { padding: 0; width: 40px; justify-content: center; } .nav__help-ic { display: block; }
  .nav__help-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lang__chev { display: none; } .lang__btn { padding: 0 9px; }
}
.nav__links a, .nav__help { white-space: nowrap; }
.nav .brand, .nav .brand img, .nav__help, .lang, .badge--nav { flex-shrink: 0; }
.nav--fit0 .nav__in { gap: 10px; }
.nav--fit0 .nav__links a { padding-left: 10px; padding-right: 10px; }
.nav--fit0 .lang__chev { display: none; }
.nav--fit0 .lang__btn { padding: 0 10px; }
@media (min-width: 960px) { .nav--fit0 .nav__help { padding: 0 10px; } }
.nav--fit1 .nav__links { display: none; }
.nav--fit1 .nav__help { margin-left: auto; }
.nav--fit2 .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav--fit3 .nav__help { padding: 0; width: 40px; min-height: 40px; justify-content: center; border-color: rgba(255, 236, 220, .24); background: rgba(255, 255, 255, .06); }
.nav--fit3 .nav__help-ic { display: block; }
.nav--fit3 .nav__help-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav--fit4 .lang__chev { display: none; }
.nav--fit4 .lang__code { display: none; }
.nav--fit4 .lang__btn { padding: 0; width: 40px; justify-content: center; }

/* ------------------------------------------------------------------ Right to left (Arabic)
   The page mirrors; phone mock-ups, screenshots, the speed ruler, the lantern festoons and the
   screenshot carousel keep their left-to-right build (they picture an app and a sequence). */
[dir="rtl"] .nav__help { margin-left: 0; margin-right: auto; }
@media (min-width: 960px) { [dir="rtl"] .nav__help { margin-right: 0; } }
[dir="rtl"] .nav--fit1 .nav__help { margin-left: 0; margin-right: auto; }
[dir="rtl"] .eyebrow__time { padding-right: 0; margin-right: 0; border-right: 0; padding-left: 8px; margin-left: 1px; border-left: 1px solid rgba(255, 224, 138, .3); }
[dir="rtl"] .pro { margin-left: 0; margin-right: 6px; }
[dir="rtl"] .stage__facts li { padding-left: 0; padding-right: 22px; }
[dir="rtl"] .stage__facts li::before { left: auto; right: 4px; }
[dir="rtl"] .dial__value small { margin-left: 0; margin-right: 4px; }
[dir="rtl"] .path svg, [dir="rtl"] .linkbtn svg { transform: scaleX(-1); }
[dir="rtl"] .linkbtn:hover svg { transform: scaleX(-1) translateX(3px); }
[dir="rtl"] .app__status, [dir="rtl"] .app__bar, [dir="rtl"] .app__dock, [dir="rtl"] .ruler,
[dir="rtl"] .lanterns__strands, [dir="rtl"] .gallery__track, [dir="rtl"] .gallery__nav { direction: ltr; }
[dir="rtl"] .shot figcaption, [dir="rtl"] .lantern { direction: rtl; }
[dir="rtl"] .toggle__knob { left: auto; right: 3px; }
[dir="rtl"] [aria-checked="true"] > .toggle__track .toggle__knob { transform: translateX(-18px); }
[dir="rtl"] [aria-checked="true"] > .toggle__track--big .toggle__knob { transform: translateX(-22px); }
[dir="rtl"] .art-paste .typed { left: auto; right: 10px; direction: rtl; justify-content: flex-end; }
[dir="rtl"] .art-paste .caret { left: auto; right: 10px; }
[dir="rtl"] .is-live .art-paste .caret { animation-name: caretmoveRtl, blink; }
@keyframes caretmoveRtl { 0% { right: 10px; } 60%, 100% { right: calc(12px + var(--typed-w, 118px)); } }
@media (prefers-reduced-motion: reduce) { [dir="rtl"] .art-paste .caret { left: auto; right: calc(12px + var(--typed-w, 118px)); } }
[dir="rtl"] .note { right: auto; left: -15%; transform: rotate(8deg); }
[dir="rtl"] .tilt { transform: perspective(1500px) rotateY(10deg) rotateX(6deg) rotateZ(-3deg); }
@media (min-width: 860px) {
  [dir="rtl"] .offline__list > div { border-left: 0; padding-left: 0; border-right: 1px solid var(--hair); padding-right: 20px; }
  [dir="rtl"] .offline__list > div:first-child { border-right: 0; padding-right: 0; }
  [dir="rtl"] .flight__hint { text-align: right; }
}
@media (min-width: 1000px) {
  [dir="rtl"] .sun { left: 27%; }
  [dir="rtl"] .formats__foot { margin-left: 0; margin-right: 346px; }
}
@media (min-width: 1440px) { [dir="rtl"] .sun { left: 29%; } }
@media (max-width: 999px) {
  [dir="rtl"] .hero__device .tilt { transform: perspective(1800px) rotateY(5deg) rotateX(2deg) rotateZ(-2deg); }
  [dir="rtl"] .hero__device .note { right: auto; left: -7%; }
}
@media (min-width: 600px) and (max-width: 999px) { [dir="rtl"] .hero__device .note { left: -31%; } }
[dir="rtl"] [data-price] { unicode-bidi: plaintext; }
@media (prefers-reduced-motion: no-preference) { .js[dir="rtl"] .hero .note { animation-name: noteInRtl; } }
@keyframes noteInRtl { 0% { opacity: 0; transform: translate3d(-16px, -50px, 0) rotate(28deg) scale(1.22); } 55% { opacity: 1; } 100% { opacity: 1; transform: rotate(8deg); } }
/* Narrow phones (320 px): the follow-along column never grows past the screen, and in-app paths in the
   FAQ ("Settings → ReadSong Pro → Restore purchases", longer in most languages) may wrap. */
@media (max-width: 1079px) { .follow__layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) { .path { white-space: normal; } }

/* ------------------------------------------------------------------ Long words, narrow boxes
   Translations bring words longer than a phone's two-column tile or a 320 px screen holds ("отсканированные",
   "kuvakaappaukset", "Vliegtuigmodus"). In the tiles and the airplane switch they hyphenate in the page's
   language (or break where it has no hyphenation) instead of running out of their box. */
.tile h3, .tile p { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
/* Only the long words: a tile's paragraph keeps its ordinary words whole. */
.tile h3 { hyphenate-limit-chars: 8 4 4; }
.tile p { hyphenate-limit-chars: 14 5 5; }
.flight__in { grid-template-columns: minmax(0, 1fr); }
.airswitch__label { min-width: 0; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
/* "Once upon a time" fits its line at every tile width: where the line is narrower than the one the phrase
   was sized for (a phone's two columns, a small desktop's four), it is set smaller still (--typed-em is its
   width in em, written by build-i18n.py; small type runs a little wider, hence .94). Browsers without container
   units keep the sizes above. */
@supports (width: 1cqi) {
  .art-paste .line { container-type: inline-size; }
  .art-paste .typed, .art-paste .caret { --tw: min(var(--typed-w, 118px), 100cqi - 22px); }
  .art-paste .typed { font-size: min(var(--typed-fs, 20px), (100cqi - 22px) / var(--typed-em, 5.9) * .94); }
  .no-js .art-paste .typed, .is-live .art-paste .typed { width: var(--tw); }
  @keyframes type { 0% { width: 0; } 60%, 100% { width: var(--tw); } }
  @keyframes caretmove { 0% { left: 10px; } 60%, 100% { left: calc(12px + var(--tw)); } }
  @keyframes caretmoveRtl { 0% { right: 10px; } 60%, 100% { right: calc(12px + var(--tw)); } }
  @media (prefers-reduced-motion: reduce) {
    .js .art-paste .typed { width: var(--tw); }
    .art-paste .caret { left: calc(12px + var(--tw)); }
    [dir="rtl"] .art-paste .caret { left: auto; right: calc(12px + var(--tw)); }
  }
}
/* The smallest phones (under 360 px): the big headlines' longest words ("godnattsagan?", "Voorleesuurtje,",
   "godnathistorien.") fit the screen and a gold phrase kept on one line may break; the airplane card is a
   little tighter; each plan puts its price under its name (a long "Save 44%" never runs into the amount). */
@media (max-width: 359px) {
  .hero__title { font-size: 40px; }
  .hero__title .nowrap { white-space: normal; }
  .head h2 { font-size: 36px; }
  .finale h2 { font-size: 40px; }
  .flight__in { padding-left: 12px; padding-right: 12px; }
  .flight__ctl { padding: 14px 10px 16px; }
  .airswitch { gap: 10px; padding: 12px; }
  .airswitch__ic { width: 34px; height: 34px; }
  .airswitch__label { font-size: 17px; }
  .opts .opt, .opts[data-price-crowded] .opt { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "price" "sub"; }
  .opt__price { align-items: flex-start; }
  .opt__price b { max-width: 100%; }
}
/* The six speeds fit their ruler on narrow phones ("0,75×" with a decimal comma, "1.25×" in a CJK face). */
@media (max-width: 379px) {
  .ruler { gap: 2px; padding-left: 3px; padding-right: 3px; }
  .ruler button { font-size: 12.5px; }
}
:root:lang(ja) .ruler button, :root:lang(zh) .ruler button, :root:lang(ko) .ruler button { font-family: var(--rounded); }