/* The home page — an editorial scroll story (since v5.112 preview).

   Art direction: a stage at night and a sheet of paper. Warm black and
   off-white, one colour that floods the room — the band's blue — giant
   tight type in Inter (the variable font the site already ships, so no new
   font bytes), small monospace labels, and the band's own footage.

   Every scroll scene is a tall section with a sticky 100svh stage (.h-pin).
   home.js writes its progress, 0 → 1, as --p; everything here is a
   function of --p, on transform / opacity only. Defaults below are the
   "resting" frame, so with no script the page is complete and readable. */

body.home2 {
  --h-ink: #0E0D0B;
  --h-ink-2: #1B1A17;
  --h-paper: #F5F5F1;
  --h-mute: #6E6C66;
  --h-blue: #1570EF;
  --h-sky: #A9CCFF;
  --h-line: rgba(14, 13, 11, .12);
  --h-ease: cubic-bezier(.23, 1, .32, 1);
  --h-move: cubic-bezier(.77, 0, .175, 1);
  --h-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  --h-gut: clamp(16px, 4vw, 56px);
  background: var(--h-paper); color: var(--h-ink);
}
body.home2 h1, body.home2 h2, body.home2 h3, body.home2 h4 { color: inherit; }
.h-wrap { max-width: 1440px; margin-inline: auto; padding-inline: var(--h-gut); }
.h-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

/* ---------- the header floats over everything, in the tone beneath it ---------- */
body.home2 .header {
  position: fixed; inset-inline: 0; top: 0; color: #fff; background: transparent; box-shadow: none;
  transition: color .35s var(--h-ease), background-color .35s var(--h-ease), box-shadow .35s var(--h-ease);
}
body.home2 .header .logo, body.home2 .header .nav a, body.home2 .header .langmenu summary,
body.home2 .header .langmenu summary svg, body.home2 .header .mnav summary { color: inherit; }
body.home2 .header .nav a { opacity: .78; }
body.home2 .header .nav a:hover { opacity: 1; }
body.home2 .header .langmenu summary:hover, body.home2 .header .langmenu[open] summary,
body.home2 .header .mnav summary:hover { background: rgba(255, 255, 255, .12); }
body.home2 .header .logo img { box-shadow: none; }
body.home2 .header .header-actions .btn-primary {
  background: #fff; color: var(--h-ink); box-shadow: none; border-radius: 999px; padding-inline: 18px;
}
body.home2[data-solid] .header { background: rgba(14, 13, 11, .72); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
body.home2[data-tone="light"] .header { color: var(--h-ink); }
body.home2[data-tone="light"][data-solid] .header { background: rgba(245, 245, 241, .82); box-shadow: 0 1px 0 var(--h-line); }
body.home2[data-tone="light"] .header .header-actions .btn-primary { background: var(--h-ink); color: #fff; }
body.home2[data-tone="light"] .header .langmenu summary:hover, body.home2[data-tone="light"] .header .mnav summary:hover { background: rgba(14, 13, 11, .06); }
body.home2[data-tone="blue"][data-solid] .header { background: rgba(21, 112, 239, .78); }
@media (prefers-reduced-transparency: reduce) {
  body.home2[data-solid] .header { background: var(--h-ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.home2[data-tone="light"][data-solid] .header { background: var(--h-paper); }
  body.home2[data-tone="blue"][data-solid] .header { background: var(--h-blue); }
}

/* ---------- shared pieces ---------- */
.h-label {
  display: flex; align-items: center; gap: 14px; margin: 0;
  font: 500 12px/16px var(--h-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--h-mute);
}
.h-label span { color: #175CD3; } /* 5.6:1 on paper; the brand blue is 4.2 at this size */
.h-label-dark { color: rgba(255, 255, 255, .55); }
.h-label-dark span { color: var(--h-sky); }
.h-title { margin: 20px 0 0; font-size: clamp(34px, 4.4vw, 68px); line-height: 1; font-weight: 560; letter-spacing: -0.045em; text-wrap: balance; }
.h-title-xl { font-size: clamp(42px, 7vw, 116px); line-height: .94; max-width: 13ch; letter-spacing: -0.055em; }
.h-body { margin: 22px 0 0; max-width: 46ch; font-size: 18px; line-height: 28px; color: var(--h-mute); }
.h-body a { color: var(--h-ink); text-decoration: underline; text-underline-offset: 3px; }
html[lang="he"] .h-display, html[lang="ar"] .h-display, html[lang="he"] .h-title, html[lang="ar"] .h-title,
html[lang="he"] .h-giant, html[lang="ar"] .h-giant, html[lang="he"] .h-word, html[lang="ar"] .h-word { letter-spacing: 0; }
.h-giant[lang="he"] { letter-spacing: 0; }

.h-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px;
  border-radius: 999px; font: 600 16px/1 var(--font); text-decoration: none; white-space: nowrap;
  transition: background-color .2s var(--h-ease), color .2s var(--h-ease), box-shadow .2s var(--h-ease), scale 450ms var(--spring-lively);
}
.h-btn svg { width: 18px; height: 18px; transition: translate .3s var(--h-ease); }
.h-btn:active { scale: .97; transition-duration: .2s, .2s, .2s, 90ms; }
.h-btn-light { background: #fff; color: var(--h-ink); }
.h-btn-light:hover { color: var(--h-ink); background: #EDEDE8; }
.h-btn-light:hover svg { translate: 4px 0; }
[dir="rtl"] .h-btn-light:hover svg { translate: -4px 0; }
.h-btn-ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
.h-btn-ghost:hover { color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
.h-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.h-lede { margin: 0; max-width: 40ch; font-size: 18px; line-height: 28px; color: rgba(255, 255, 255, .84); }
.h-video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* "Compare plans" under the pricing: its line alone made a 24px tap target.
   44px tall, centred, and 10px less margin above, so the words stay where
   they were. */
.h-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 30px; font-weight: 600; color: var(--h-ink); text-decoration: underline; text-underline-offset: 4px; }
.h-link svg { width: 18px; height: 18px; }

/* The films' play/pause button (home.js adds one to every video's box). */
.h-play {
  position: absolute; z-index: 3; inset-inline-end: 16px; bottom: 16px; display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #fff;
  background: rgba(14, 13, 11, .42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: .9; transition: opacity .25s var(--h-ease), background-color .25s var(--h-ease), scale 450ms var(--spring-lively);
}
.h-play svg { width: 18px; height: 18px; }
.h-play.is-playing { opacity: .55; }
.h-play:hover, .h-play:focus-visible { opacity: 1; background: rgba(14, 13, 11, .62); }
.h-play:active { scale: .92; transition-duration: .25s, .25s, 90ms; }
.h-play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* The stage's button sits clear of the call to action, under the header. */
.h-hero-media .h-play { top: clamp(84px, 11vh, 104px); bottom: auto; }
@media (prefers-reduced-transparency: reduce) { .h-play { background: rgba(14, 13, 11, .8); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ---------- 1 · the stage ---------- */
.h-hero { --p: 0; height: 175vh; height: 175svh; background: var(--h-ink); color: #fff; }
.h-hero-media {
  position: absolute; inset: 0; overflow: hidden; transform-origin: 50% 35%;
  transform: scale(calc(1 - .16 * var(--p))); border-radius: calc(var(--p) * 28px);
}
.h-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14, 13, 11, .62) 0%, rgba(14, 13, 11, .12) 32%, rgba(14, 13, 11, .18) 58%, rgba(14, 13, 11, .82) 100%);
}
.h-display {
  position: relative; z-index: 2; margin: 0; padding: clamp(104px, 17vh, 190px) var(--h-gut) 0;
  font-size: clamp(46px, min(11.2vw, 17.5svh), 184px); line-height: .9; font-weight: 560; letter-spacing: -0.058em;
}
/* From 768px: the stage is three lines, and the first ("Snap a chord chart.",
   8.31em in Inter at this weight and tracking) is the longest. A width bound
   of 11.2vw made it 93vw, wider than the 92vw between the gutters: on every
   screen where the width decides (tablets, portrait windows) it broke in
   two, the stage ran to four lines and, on a short one, down into the lede;
   and where it did fit, its end ran under the film's button at the top
   corner. Here the line ends 8px before the button (inset 16px, 44px wide).
   Where the height decides (wide windows), nothing changes. --h-fit-y is a
   third bound, set only on short tablet windows (below). On phones the 46px
   floor decides, and where the first line still reaches the button the
   headline starts below it (home.js). The width is the stage's own (100cqw),
   not the window's: 100vw counts a desktop's classic scroll bar (Windows,
   Linux, a Mac set to always show them), so with one the line ran 7px under
   the button and home.js then pushed the whole headline down. */
.h-hero .h-pin { container-type: inline-size; }
@media (min-width: 768px) {
  .h-hero .h-display { font-size: clamp(46px, min((100cqw - var(--h-gut) - 68px) / 8.31, 17.5svh, var(--h-fit-y, 184px)), 184px); }
}
.h-hero .h-display { transform: translateY(calc(var(--p) * -22vh)); opacity: calc(1 - var(--p) * 1.5); pointer-events: none; }
/* Where the headline's first line would run under the film's button (home.js
   measures it, for every language and screen), it starts 8px below the
   button instead. home.js can only measure once the fonts and the script are
   in, so where the answer is known ahead (Arabic on every phone; Hebrew,
   Russian and Spanish on the portrait phones their blocks name) the same
   push is a static rule too, and the headline never paints under the button
   and then drops. */
.h-hero[data-clear] .h-display { padding-top: max(clamp(104px, 17vh, 190px), calc(clamp(84px, 11vh, 104px) + 52px)); }
.h-l { display: block; overflow: hidden; padding-bottom: .07em; margin-bottom: -.07em; }
.h-l > span { display: inline-block; }
.h-l2 { padding-inline-start: 8vw; }
.h-l3 { text-align: end; }
@media (prefers-reduced-motion: no-preference) {
  .h-hero .h-l > span { transform: translateY(135%); animation: h-rise 1100ms var(--h-ease) 120ms forwards; }
  .h-hero .h-l2 > span { animation-delay: 210ms; }
  .h-hero .h-l3 > span { animation-delay: 300ms; }
  .h-scroll { animation: h-fade 900ms var(--h-ease) 700ms backwards; }
}
@keyframes h-rise { to { transform: none; } }
@keyframes h-fade { from { opacity: 0; translate: 0 12px; } }
.h-hero-foot {
  position: absolute; z-index: 2; inset-inline: var(--h-gut); bottom: clamp(28px, 6vh, 56px);
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; gap: 20px 40px;
  opacity: calc(1 - var(--p) * 2.4);
}
.h-scroll {
  position: absolute; z-index: 2; inset-inline-start: var(--h-gut); bottom: clamp(32px, 6vh, 60px); margin: 0;
  display: flex; align-items: center; gap: 8px; font: 500 12px/16px var(--h-mono); letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72); opacity: calc(1 - var(--p) * 3);
}
.h-scroll svg { width: 16px; height: 16px; }
/* An arrow is never squeezed: a label that needs more room takes it from the
   button (below), not from its arrow. */
.h-btn svg { flex: none; }
/* Phones: the two buttons split the row in equal halves, unless one label (and
   its arrow) needs more than half: then that one keeps its own width and the
   other takes the rest, and when the two together are wider than the row they
   stack, full width. A flat 1:1 split shrank "Try it free"'s arrow to 5px on a
   320px phone (and the longer labels' arrows to nothing). The labels sit
   centred, so the narrower side padding shows only where it is needed. */
@media (max-width: 767px) {
  .h-hero-foot { flex-direction: column; align-items: stretch; justify-content: flex-end; }
  .h-hero-foot .h-btn { flex: 1 1 0; min-width: max-content; padding-inline: 20px; }
  .h-lede { font-size: 16px; line-height: 24px; }
  .h-scroll { display: none; }
  .h-l2 { padding-inline-start: 0; }
}
/* 768 to 1199px wide, the lede and the two buttons, side by side at the end
   edge, reach back over the "free plan" line at the start edge (English ran
   its lede's last line through it from about 864 to 1150px, and every
   language has its own stretch). That line only repeats the offer the page
   closes with, it is aria-hidden and phones never show it, so here it steps
   aside rather than squeezing the lede. Italian and Spanish run longer and
   widen the band in their own blocks. */
@media (min-width: 768px) and (max-width: 1199px) {
  .h-scroll { display: none; }
}
/* Short tablet windows (768 to 1023px wide, up to 650px tall): the lede and
   the buttons no longer fit one row, so the foot wraps to the buttons under
   the lede, about 184px tall, and a stage sized by the height alone (17.5svh
   a line) reached down into the lede (21px at 768x520). Here the three lines
   also fit what the foot leaves: (94svh - 104px - the foot - 16px) / 2.7. */
@media (min-width: 768px) and (max-width: 1023px) and (max-height: 650px) {
  .h-hero { --h-fit-y: calc(34.8svh - 112.6px); }
}

/* ---------- 2 · the scan ----------
   A hand over a pile of printouts (the band's own footage, slowed and looped);
   in front, a phone running the real thing, drawn in the app's own design:
   viewfinder, shutter, "Reading chords", then the paper DEVELOPS into the
   chart under the scan line and the chords land. home.js turns --p into one
   variable per phase (--cam --press --flash --read --dev --beam --land
   --saved); the defaults here are the finished frame, for no script and for
   reduced motion. Sized in container units, so the screen scales as one. */
.h-scan {
  --p: 1; --cam: 1; --press: 0; --flash: 0; --read: 0; --dev: 1; --beam: 0; --beam-on: 0; --land: 1; --saved: 1;
  height: 340vh; height: 340svh; background: var(--h-ink); color: #fff;
}
.h-scan-bg { position: absolute; inset: 0; overflow: hidden; }
.h-scan-bg .h-video { transform: scale(calc(1.1 - var(--p) * .1)); }
.h-scan-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(14, 13, 11, .9) 0%, rgba(14, 13, 11, .66) 42%, rgba(14, 13, 11, .32) 100%),
    linear-gradient(180deg, rgba(14, 13, 11, .55) 0%, rgba(14, 13, 11, 0) 26%, rgba(14, 13, 11, 0) 70%, rgba(14, 13, 11, .75) 100%);
}
[dir="rtl"] .h-scan-bg::after { transform: scaleX(-1); }
.h-scan-grid {
  position: relative; z-index: 2; height: 100%; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center; gap: 4vw; padding: clamp(88px, 12vh, 120px) var(--h-gut) clamp(24px, 4vh, 48px);
  pointer-events: none; /* the film's button, underneath, stays reachable */
}
.h-scan-text { pointer-events: auto; }
.h-statement { margin: 20px 0 0; max-width: 15ch; font-size: clamp(30px, min(5.2vw, 9svh), 88px); line-height: 1.02; font-weight: 540; letter-spacing: -0.045em; text-wrap: balance; color: #fff; }
.h-statement .h-wd { opacity: clamp(.16, calc((var(--p) - var(--s)) * 16), 1); transition: opacity .12s linear; }

/* the phone */
.h-phone {
  justify-self: center; height: min(78svh, 780px); aspect-ratio: 9 / 19.2; container-type: inline-size;
  transform: translateY(calc((1 - clamp(0, var(--p) * 7, 1)) * 16vh)) rotate(calc((1 - clamp(0, var(--p) * 7, 1)) * 3deg));
}
.h-ph {
  position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate;
  border-radius: 13cqw; background: #0B0B0B;
  box-shadow: 0 0 0 2.4cqw #1B1A18, 0 0 0 calc(2.4cqw + 1px) rgba(255, 255, 255, .14), 0 50px 90px -30px rgba(0, 0, 0, .85);
}
.h-ph-status {
  position: absolute; z-index: 8; top: 0; inset-inline: 0; height: 12cqw; display: flex; align-items: center; justify-content: space-between;
  padding: 0 9cqw; font: 600 3.8cqw/1 var(--font); color: #fff; direction: ltr; mix-blend-mode: difference;
}
.h-ph-status i { position: absolute; left: 50%; top: 3.2cqw; width: 30cqw; height: 8.6cqw; border-radius: 99px; background: #000; translate: -50% 0; mix-blend-mode: normal; }

/* viewfinder: the printout on a table, lit warm, settling flat as you frame it */
.h-ph-cam { position: absolute; inset: 0; z-index: 1; }
.h-ph-table {
  position: absolute; inset: -6%; display: grid; place-items: center;
  background: radial-gradient(80% 55% at 42% 34%, #7A5639 0%, #43301F 52%, #1E150D 100%);
  transform: scale(calc(1.12 - var(--cam) * .12));
}
.h-ph-table::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 45% at 70% 18%, rgba(255, 214, 160, .28), transparent 70%); }
.h-print.h-ph-print {
  width: 76%; padding: 8% 7%; font-size: 2.85cqw; rotate: -4deg;
  transform: perspective(140cqw) rotateX(calc((1 - var(--cam)) * 22deg));
  box-shadow: 0 2px 3px rgba(0, 0, 0, .25), 0 30px 50px -18px rgba(0, 0, 0, .7);
}
.h-ph-frame { position: absolute; inset: 22% 8% 27%; opacity: calc(var(--cam) * (1 - var(--read) * 3)); transform: scale(calc(1.14 - var(--cam) * .14)); }
.h-ph-frame b { position: absolute; width: 10cqw; height: 10cqw; border: 0 solid #fff; }
.h-ph-frame b:nth-child(1) { top: 0; left: 0; border-width: 1.1cqw 0 0 1.1cqw; border-top-left-radius: 3cqw; }
.h-ph-frame b:nth-child(2) { top: 0; right: 0; border-width: 1.1cqw 1.1cqw 0 0; border-top-right-radius: 3cqw; }
.h-ph-frame b:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 1.1cqw 1.1cqw; border-bottom-left-radius: 3cqw; }
.h-ph-frame b:nth-child(4) { bottom: 0; right: 0; border-width: 0 1.1cqw 1.1cqw 0; border-bottom-right-radius: 3cqw; }
.h-ph-shutter {
  position: absolute; left: 50%; bottom: 8cqw; width: 18cqw; height: 18cqw; translate: -50% 0; display: grid; place-items: center;
  border-radius: 50%; box-shadow: inset 0 0 0 1.2cqw #fff; opacity: calc(1 - var(--read) * 4);
}
.h-ph-shutter i { width: 13.5cqw; height: 13.5cqw; border-radius: 50%; background: #fff; transform: scale(calc(1 - var(--press) * .16)); }
.h-ph-flash { position: absolute; inset: 0; z-index: 9; background: #fff; opacity: var(--flash); pointer-events: none; }

/* reading: honest progress, the beam sweeping the frozen photo */
.h-ph-read {
  position: absolute; z-index: 6; inset-inline: 8cqw; bottom: 9cqw; display: grid; gap: 3cqw; padding: 4.4cqw 5.4cqw;
  border-radius: 5cqw; background: rgba(14, 13, 11, .78); color: #fff; font: 600 3.7cqw/1.2 var(--font);
  opacity: calc(min(var(--read) * 8, 1) * (1 - var(--dev) * 3));
}
.h-ph-read span::after { content: "…"; }
.h-ph-read i { display: block; height: 1.3cqw; border-radius: 9px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.h-ph-read b { display: block; height: 100%; background: var(--h-blue); transform-origin: 0 50%; transform: scaleX(var(--read)); }
[dir="rtl"] .h-ph-read b { transform-origin: 100% 50%; }
.h-ph-beam {
  position: absolute; z-index: 7; inset-inline: 0; top: 0; height: 1cqw; background: #4C94FF;
  box-shadow: 0 0 2cqw rgba(76, 148, 255, .9), 0 -14cqw 16cqw -8cqw rgba(21, 112, 239, .5); opacity: var(--beam-on);
  transform: translateY(calc(var(--beam) * 213cqw));
}

/* develop: the chart, revealed top to bottom behind the beam */
.h-ph-chart {
  position: absolute; z-index: 4; inset: 0; padding: 17cqw 7cqw 0; background: #fff; color: var(--h-ink);
  clip-path: inset(0 0 calc((1 - var(--dev)) * 100%) 0);
}
.h-ph-head { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; padding-bottom: 4cqw; border-bottom: 1px solid #ECECE8; }
.h-ph-head b { font-size: 5.4cqw; font-weight: 650; letter-spacing: -0.02em; }
.h-ph-head span { padding: 1.2cqw 3.2cqw; border-radius: 99px; background: #EFF8FF; color: var(--h-blue); font-size: 3.4cqw; font-weight: 600; }
.h-ph-chart .h-chart { margin-top: 3cqw; font-size: 4.2cqw; }
.h-ph-chart .h-ln { margin-bottom: .55em; }
.h-ph-tag { margin: 3.4cqw 0 .6cqw; font: 650 2.8cqw/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--h-blue); }
.h-ph-tools {
  position: absolute; inset-inline: 7cqw; bottom: 8cqw; display: flex; align-items: center; gap: 2.4cqw;
  opacity: var(--land); transform: translateY(calc((1 - var(--land)) * 3cqw));
}
.h-ph-step { display: flex; align-items: center; gap: 1cqw; padding: 1cqw; border-radius: 99px; background: #F0F0EC; direction: ltr; }
.h-ph-step i { display: grid; place-items: center; width: 7cqw; height: 7cqw; font-style: normal; font-size: 4.4cqw; color: #555; }
.h-ph-step b { display: grid; place-items: center; min-width: 9cqw; height: 7cqw; border-radius: 99px; background: #fff; font-size: 3.8cqw; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
/* The capo and play pills set their own line: left to inherit the page's
   24px, they did not scale with the phone, stood taller than the key stepper
   beside them (a near-circle "Play" on a small phone) and reached up into
   "Saved to my songbook" above the bar. */
.h-ph-capo { padding: 2.4cqw 3.4cqw; border-radius: 99px; background: #F0F0EC; font-size: 3.4cqw; line-height: 1.2; font-weight: 600; color: #444; }
.h-ph-play { margin-inline-start: auto; padding: 2.4cqw 5cqw; border-radius: 99px; background: var(--h-blue); color: #fff; font-size: 3.6cqw; line-height: 1.2; font-weight: 650; }
/* "Saved" lifts above the toolbar */
.h-scan .h-ph-saved { bottom: 22cqw; }
.h-ph-chart .h-ch::before {
  opacity: clamp(0, calc(var(--land) * 13 - var(--s)), 1);
  translate: 0 calc((1 - clamp(0, calc(var(--land) * 13 - var(--s)), 1)) * 1.4cqw);
}
.h-ph-saved {
  position: absolute; z-index: 6; inset-inline: 7cqw; bottom: 9cqw; display: flex; align-items: center; justify-content: center; gap: 2.4cqw;
  padding: 4.2cqw 5cqw; border-radius: 99px; background: var(--h-ink); color: #fff; font: 600 3.9cqw/1 var(--font);
  opacity: var(--saved); transform: translateY(calc((1 - var(--saved)) * 5cqw)) scale(calc(.96 + var(--saved) * .04));
  transition: opacity .3s var(--h-ease), transform .5s var(--spring-lively);
}
.h-ph-saved svg { width: 5.2cqw; height: 5.2cqw; color: #4ADE80; }

@media (max-width: 899px) {
  .h-scan-grid { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-items: start; justify-items: center; gap: clamp(16px, 3svh, 28px); padding-top: clamp(80px, 11svh, 104px); }
  .h-scan-text { justify-self: stretch; }
  .h-statement { font-size: clamp(26px, 7.2vw, 44px); max-width: 18ch; }
  /* The phone stands as tall as the row allows, up to 62svh, and its width
     follows (9:19.2). The film's button sits in the bottom end corner (16px
     in, 44px wide): on the narrowest tall screens (320x720) the phone grew
     wide enough to reach into that corner, and its rounded edge met the
     button. The second bound keeps the phone's width within the screen less
     64px each side. It only binds on screens that are tall for their width
     (320px wide from 660px tall, 360px from 800px, 390px from 900px). */
  .h-phone { height: 100%; max-height: min(62svh, 213vw - 273px); }
  .h-scan-bg::after { background: linear-gradient(180deg, rgba(14, 13, 11, .86) 0%, rgba(14, 13, 11, .6) 40%, rgba(14, 13, 11, .7) 100%); }
}

/* ---------- 3 · how it works ---------- */
.h-steps { --p: .2; height: 330vh; height: 330svh; background: var(--h-paper); border-top: 1px solid var(--h-line); }
.h-steps .h-pin { display: flex; flex-direction: column; padding: clamp(92px, 13vh, 132px) var(--h-gut) clamp(24px, 5vh, 56px); }
.h-steps-grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 5vw; min-height: 0; }
.h-words { position: relative; list-style: none; margin: 0; padding: 0 0 7.5em; }
.h-word {
  display: block; font-size: clamp(56px, min(10.5vw, 16svh), 176px); line-height: .9; font-weight: 560; letter-spacing: -0.058em;
  color: var(--h-ink); opacity: .14; transform: translateY(0); transition: opacity .5s var(--h-ease), transform .7s var(--h-ease), color .5s var(--h-ease);
}
.h-w p {
  position: absolute; inset-inline-start: 0; bottom: 0; margin: 0; max-width: 42ch;
  font-size: 18px; line-height: 28px; color: var(--h-mute);
  opacity: 0; transform: translateY(10px); transition: opacity .4s var(--h-ease), transform .6s var(--h-ease); pointer-events: none;
}
.h-steps[data-at="0"] .h-w[data-step="1"] .h-word, .h-steps[data-at="0"] .h-w[data-step="2"] .h-word,
.h-steps[data-at="1"] .h-w[data-step="2"] .h-word { opacity: 0; transform: translateY(30%); }
.h-steps[data-at="0"] .h-w[data-step="0"] .h-word, .h-steps[data-at="1"] .h-w[data-step="1"] .h-word,
.h-steps[data-at="2"] .h-w[data-step="2"] .h-word { opacity: 1; color: var(--h-ink); }
.h-steps[data-at="2"] .h-w[data-step="2"] .h-word { color: var(--h-blue); }
.h-steps[data-at="0"] .h-w[data-step="0"] p, .h-steps[data-at="1"] .h-w[data-step="1"] p,
.h-steps[data-at="2"] .h-w[data-step="2"] p { opacity: 1; transform: none; }
/* No script: all three words, all three paragraphs, one above the next. */
.h-steps:not([data-at]) .h-words { padding: 0; }
.h-steps:not([data-at]) .h-word { opacity: 1; }
.h-steps:not([data-at]) .h-w p { position: static; opacity: 1; transform: none; margin: 8px 0 28px; }

.h-card { position: relative; width: 100%; max-height: 72svh; aspect-ratio: 4 / 5; justify-self: center; border-radius: 6px; overflow: hidden; background: #E7E6E0; }
.h-v { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .6s var(--h-ease); }
.h-steps:not([data-at]) .h-v0, .h-steps[data-at="0"] .h-v0, .h-steps[data-at="1"] .h-v1, .h-steps[data-at="2"] .h-v2 { opacity: 1; pointer-events: auto; }
.h-v0 { background: var(--h-ink); }
.h-print {
  width: 78%; padding: 8% 7%; background: #FCFCFA; border-radius: 2px; rotate: -2.5deg;
  box-shadow: 0 2px 4px rgba(14, 13, 11, .08), 0 30px 60px -24px rgba(14, 13, 11, .45);
  font: 400 clamp(9px, 1.05vw, 15px)/1.35 'Courier New', Courier, monospace; color: #222;
  background-image: linear-gradient(90deg, transparent 49.7%, rgba(14, 13, 11, .05) 50%, transparent 50.3%);
}
.h-print b { display: block; margin-bottom: 1.2em; letter-spacing: .12em; font-size: .85em; color: #555; }
.h-print p { margin: 0; white-space: pre; }
.h-print s { text-decoration: none; font-weight: 700; }
/* A right-to-left printout: its chord lines are spaced in characters from the
   right, over the words. Each chord name is all Latin letters, and the spaces
   between two of them would side with them as one left-to-right run (the
   first chord landing on the LEFT, over the last word). Isolated, every chord
   is a neutral island and the line runs right to left like its lyric.
   Shared by every right-to-left page (Hebrew, Arabic): no lang block repeats it. */
[dir="rtl"] .h-print s { unicode-bidi: isolate; }
.h-print p:nth-of-type(even) { margin-bottom: .55em; }
.h-beam {
  position: absolute; inset-inline: 6%; top: calc(8% + var(--q, 0) * 84%); height: 2px; background: var(--h-blue);
  box-shadow: 0 -40px 40px -20px rgba(21, 112, 239, .22); opacity: calc(.15 + var(--q, 0));
}
.h-v1 { display: grid; place-items: center; background: var(--h-ink); }
.h-app { width: 84%; padding: 22px 22px 18px; border-radius: 14px; background: #fff; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .6); }
.h-app-top { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--h-ink); font-size: 15px; }
.h-dot { width: 8px; height: 8px; border-radius: 50%; background: #17B26A; }
.h-key { margin-inline-start: auto; padding: 3px 10px; border-radius: 999px; background: #EFF8FF; color: var(--h-blue); font-size: 13px; }
.h-chart { margin-top: 18px; color: var(--h-ink); font-size: clamp(13px, 1.25vw, 18px); }
.h-ln { margin: 0 0 .5em; line-height: 1.25; }
.h-ch { position: relative; display: inline-block; padding-top: 1.3em; }
.h-ch::before { content: attr(data-c); position: absolute; top: 0; inset-inline-start: 0; direction: ltr; unicode-bidi: isolate; white-space: nowrap; color: var(--h-blue); font-weight: 700; font-size: .85em; }
.h-fix::before { padding: 0 4px; margin-inline-start: -4px; border-radius: 4px; background: var(--h-blue); color: #fff; }
.h-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #ECECE8; }
.h-picker span { padding: 5px 10px; border-radius: 8px; background: #F2F2EE; font-weight: 600; font-size: 13px; color: #444; direction: ltr; }
.h-picker .on { background: var(--h-blue); color: #fff; }
.h-v2 { background: var(--h-ink); }
/* Phones: the picture on top at a fixed share of the (smallest) viewport,
   the three words on ONE line under it — the current one lit — and its
   sentence right below. The three sentences share one grid cell (the tallest
   sets its height), so switching steps never moves anything. Nothing here is
   sized by aspect-ratio: a short Safari viewport (toolbars showing) used to
   let the picture run over the word. */
@media (max-width: 899px) {
  .h-steps .h-pin { padding-top: clamp(80px, 11svh, 104px); }
  .h-steps-grid { display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(16px, 3svh, 28px); }
  .h-card { order: -1; flex: none; width: 100%; height: 40svh; max-height: none; aspect-ratio: auto; }
  .h-words {
    /* The last track is flexible: the sentences below span all three, and a
       spanning item's width goes to a flexible track first — so the words keep
       their own widths and the sentences wrap at the column's edge. */
    display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); column-gap: .3em; row-gap: 14px;
    width: 100%; min-width: 0; padding: 0; font-size: clamp(30px, 10.2vw, 64px);
  }
  .h-w { display: contents; }
  .h-word { grid-row: 1; font-size: 1em; }
  /* Every word dimmed, none moved. This must out-rank the desktop rule that
     hides the words still to come (.h-steps[data-at="0"] .h-w[data-step="1"]
     .h-word, five classes): at four classes it lost, and on a phone "Check."
     and "Play." vanished and sat 30% lower than "Snap." on their shared line. */
  .h-steps[data-at] .h-w[data-step] .h-word { opacity: .16; transform: none; }
  .h-steps[data-at="0"] .h-w[data-step="0"] .h-word, .h-steps[data-at="1"] .h-w[data-step="1"] .h-word,
  .h-steps[data-at="2"] .h-w[data-step="2"] .h-word { opacity: 1; }
  .h-w p { position: static; grid-row: 2; grid-column: 1 / -1; min-width: 0; max-width: none; font-size: 16px; line-height: 24px; }
  .h-steps:not([data-at]) .h-w p { display: none; }
  .h-steps:not([data-at]) .h-w[data-step="0"] p { display: block; margin: 0; }
}
@media (max-width: 899px) and (max-height: 640px) {
  .h-card { height: 34svh; }
}
/* Phones and tablets: the "Check." card is a share of the screen's height,
   and the mock app in it is 263px tall at its own 13px. On a phone shorter
   than about 670px (and on short tablet windows) the card was the smaller,
   and the card's edges cut the app's title and its last chart line in half;
   below 360px wide the chart's lines and the chord picker also wrapped,
   which made it taller still. Here the mock is drawn in em of one size (the
   same px it had, divided by 13), and that size is what fits the card: 20.25
   of it, plus a pixel above and below, in its height, and its longest line
   (17.77em, inside 84% of the card less the side padding) in its width.
   Where the card already held it (360px wide and up, 390x664 and taller),
   the size stays 13px and nothing moves. */
@media (max-width: 899px) {
  .h-v1 { container-type: size; }
  .h-app { font-size: min(13px, (100cqh - 2px) / 20.25, 3.9cqw); padding: calc(22em / 13) calc(22em / 13) calc(18em / 13); border-radius: calc(14em / 13); }
  .h-app-top { gap: calc(10em / 15); font-size: calc(15em / 13); line-height: 1.6; }
  .h-dot { width: calc(8em / 15); height: calc(8em / 15); }
  .h-key { padding: calc(3em / 13) calc(10em / 13); font-size: calc(13em / 15); line-height: calc(24 / 13); }
  .h-app .h-chart { margin-top: calc(18em / 13); font-size: 1em; }
  .h-picker { gap: calc(6em / 13); margin-top: calc(14em / 13); padding-top: calc(14em / 13); }
  .h-picker span { padding: calc(5em / 13) calc(10em / 13); border-radius: calc(8em / 13); font-size: 1em; line-height: calc(24 / 13); }
}

/* ---------- 4 · chapters in the dark ---------- */
.h-chapters { background: var(--h-ink); color: #fff; padding: clamp(96px, 14vh, 160px) var(--h-gut) clamp(80px, 12vh, 140px); }
.h-chapters > .h-label { max-width: 1440px; margin-inline: auto; }
.h-chapter { --p: .5; position: relative; max-width: 1440px; margin: clamp(80px, 14vh, 160px) auto 0; }
.h-giant {
  position: relative; z-index: 2; margin: 0 0 -.34em; text-align: center; pointer-events: none;
  font-size: clamp(56px, min(15.5vw, 24svh), 260px); line-height: .85; font-weight: 560; letter-spacing: -0.06em; color: var(--h-sky);
  transform: translateY(calc((.5 - var(--p)) * 14vh));
}
.h-frame {
  position: relative; width: min(100%, 1160px); margin-inline: auto; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 4px; background: var(--h-ink-2);
  transform: scale(calc(.9 + .1 * clamp(0, var(--p) * 2.4, 1)));
}
.h-frame .h-video { opacity: .92; }
.h-frame-keys { display: grid; place-items: center; background: radial-gradient(120% 120% at 50% 0%, #1D3C6E 0%, #0F1726 55%, #0B0F18 100%); }
.h-keys { display: grid; justify-items: center; gap: clamp(14px, 2.6vw, 36px); }
.h-keys-row { display: flex; gap: clamp(20px, 6vw, 96px); font-size: clamp(44px, 9vw, 150px); line-height: 1; font-weight: 600; letter-spacing: -0.04em; color: #fff; direction: ltr; }
.h-k, .h-keys-step b { display: inline-block; min-width: 1.2ch; text-align: center; font-variant-numeric: tabular-nums; }
.h-keys-lyric { font-size: clamp(16px, 2.2vw, 30px); color: rgba(255, 255, 255, .72); letter-spacing: -0.01em; }
.h-keys-step { display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); direction: ltr; }
.h-keys-step span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: rgba(255, 255, 255, .7); font-size: 22px; }
.h-keys-step b { display: grid; place-items: center; min-width: 56px; height: 40px; border-radius: 999px; background: var(--h-blue); color: #fff; font-size: 18px; }
.h-frame-rtl { display: grid; place-items: center; background: radial-gradient(120% 120% at 50% 0%, #2A2620 0%, #14120F 70%); }
.h-chart-he { margin: 0; color: #fff; font-size: clamp(26px, 4.6vw, 72px); font-family: 'Inter', 'Heebo', sans-serif; text-align: center; }
.h-chart-he .h-ch::before { color: var(--h-sky); }
.h-ch-text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 4vw; width: min(100%, 1160px); margin: 28px auto 0; }
.h-ch-text h4 { margin: 0; font-size: clamp(20px, 2vw, 26px); line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; }
.h-ch-text p { margin: 0; font-size: 18px; line-height: 28px; color: rgba(255, 255, 255, .66); max-width: 52ch; }
/* Six languages, two directions: a pinned stretch inside the dark chapters.
   home.js marks every [data-i] past / on / next as the scroll moves through
   the six; without script the first (Hebrew) is simply shown. */
.h-langs {
  position: relative; max-width: 1440px; margin: clamp(80px, 14vh, 160px) auto 0; height: 460vh; height: 460svh;
  font-family: 'Inter', 'Noto Sans Hebrew', 'Noto Sans Arabic', -apple-system, system-ui, sans-serif;
  --h-lw: clamp(48px, min(13.5vw, 21svh), 230px); /* the giant word's size */
}
/* The stack is centred in the stage. On a short window it is taller than the
   stage, and then two things went wrong: it ran from the top of the stage's
   box, which began at 72px, under the 80px header (the scene's label sat
   behind it at 1280x620); and every part was squeezed in step, the frame
   shrinking under a chart sized for the full frame, so the chart's chords
   rose under the giant word (1024x600, 1093x520). Now the box starts clear of
   the header (72px under 1024px wide, 80px from there, plus 8) and gives the
   same back at the bottom, so the centre, and every roomy layout, stays where
   it was; the label, the word and the paragraph keep their size, the frame
   alone gives way, and the chart is sized to the frame it gets (below). */
.h-langs .h-pin {
  --h-lp: clamp(72px, 10vh, 100px);
  display: flex; flex-direction: column; justify-content: center;
  padding-top: max(var(--h-lp), 80px); padding-bottom: calc(16px + max(0px, 80px - var(--h-lp)));
}
@media (min-width: 1024px) {
  .h-langs .h-pin { padding-top: max(var(--h-lp), 88px); padding-bottom: calc(16px + max(0px, 88px - var(--h-lp))); }
}
.h-langs .h-pin > * { flex-shrink: 0; }
.h-langs-label { justify-content: center; margin-bottom: 10px; }
/* "02 / 06" is a number pair, not text: in a right-to-left page it would read
   "06 / 02" unless it keeps its own direction. */
.h-langs-n { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.h-langs-words { position: relative; z-index: 2; height: .86em; margin-bottom: -.3em; font-size: var(--h-lw); pointer-events: none; }
.h-lw {
  position: absolute; inset-inline: 0; top: 0; text-align: center; white-space: nowrap;
  line-height: .86; font-weight: 560; letter-spacing: -0.05em; color: var(--h-sky);
  opacity: 0; transform: translateY(45%); transition: opacity .45s var(--h-ease), transform .8s var(--h-ease);
}
.h-lw[dir="rtl"] { letter-spacing: 0; }
.h-lw-long { font-size: .6em; line-height: 1.43; }
.h-lw[data-state="past"] { transform: translateY(-45%); }
.h-lw[data-state="on"], .h-langs:not([data-js]) .h-lw[data-i="0"] { opacity: 1; transform: none; }
.h-langs .h-frame { aspect-ratio: auto; height: min(52svh, 56vw); flex-shrink: 1; min-height: 0; container-type: size; }
.h-frame-langs { display: grid; place-items: center; background: radial-gradient(120% 120% at 50% 0%, #2A2620 0%, #14120F 70%); }
.h-lc { position: absolute; inset: 0; display: grid; place-items: center; padding: 4% 6% 48px; opacity: 0; transition: opacity .5s var(--h-ease); }
/* Each card carries its own language; only the right-to-left ones say dir.
   On a right-to-left page the others would inherit the page's direction and
   come apart: "grace," with its comma on the wrong side, "the sound" wrapped
   ahead of "Amazing", every chord name hanging off the word's far end. They
   read left to right whatever page they sit on. Shared by every right-to-left
   page (Hebrew, Arabic): no lang block repeats it. */
[dir="rtl"] .h-lc:not([dir]), [dir="rtl"] .h-lw:not([dir]) { direction: ltr; }
.h-lc[data-state="on"], .h-langs:not([data-js]) .h-lc[data-i="0"] { opacity: 1; }
/* The chart (two rows, 5.9em tall in every card) sits centred in the frame,
   and the giant word reaches .3em of its own size into the frame's top, its
   descenders a further ~.15em. --h-fit is the largest size at which the
   centred chart still starts below them (.47em of the word, plus 4px) and
   above the language names (48px): (frame + top padding - names - 2 x that
   clearance) / 5.9, in the frame's own units, and never more than fills the
   space between the top padding and the names. In a roomy frame it is larger
   than the size the chart already has, so it only acts when the frame has
   given way on a short window. */
.h-lc { --h-fit: min((100cqh + 4cqw - 56px - .94 * var(--h-lw)) / 5.9, (100cqh - 4cqw - 48px) / 5.9); }
.h-lc .h-chart { margin: 0; color: #fff; font-size: clamp(14px, min(3.4vw, 5.2svh, var(--h-fit)), 54px); text-align: center; }
.h-lc[lang="ar"] .h-chart { font-size: clamp(14px, min(3.7vw, 5.6svh, var(--h-fit)), 58px); }
/* The Arabic card sits under "من اليمين لليسار", set at .6em, whose ink stops
   about .23em of the word into the frame, not .45em: its clearance is .25em. */
.h-lc[lang="ar"] { --h-fit: min((100cqh + 4cqw - 56px - .5 * var(--h-lw)) / 5.9, (100cqh - 4cqw - 48px) / 5.9); }
.h-lc .h-ln { margin-bottom: .45em; line-height: 1.2; }
.h-lc .h-ch::before {
  color: var(--h-sky); opacity: 0; translate: 0 .35em;
  transition: opacity .35s var(--h-ease) calc(150ms + var(--s, 0) * 80ms), translate .55s var(--spring-lively) calc(150ms + var(--s, 0) * 80ms);
}
.h-lc[data-state="on"] .h-ch::before, .h-langs:not([data-js]) .h-lc[data-i="0"] .h-ch::before { opacity: 1; translate: 0 0; }
.h-langs-dots {
  position: absolute; inset-inline: 0; bottom: 16px; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px;
  list-style: none; margin: 0; padding: 0 12px; font: 500 12px/1 var(--h-mono); letter-spacing: .04em; color: rgba(255, 255, 255, .38);
}
.h-langs-dots li { position: relative; padding-bottom: 8px; transition: color .3s var(--h-ease); }
/* العربية is a joined script: any tracking pulls its letters apart (the list's
   .04em is for the Latin names). The same name, second in every page's list. */
.h-langs-dots li[data-i="1"] { letter-spacing: 0; }
.h-langs-dots li::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--h-sky); transform: scaleX(0); transition: transform .4s var(--h-ease); }
.h-langs-dots li[data-state="on"], .h-langs:not([data-js]) .h-langs-dots li[data-i="0"] { color: #fff; }
.h-langs-dots li[data-state="on"]::after { transform: scaleX(1); }
.h-langs .h-ch-text { margin-top: 22px; }
@media (max-width: 767px) {
  .h-langs .h-frame { height: min(46svh, 118vw); }
  .h-lc { padding: 9% 5% 46px; }
  .h-lc .h-chart, .h-lc[lang="ar"] .h-chart { font-size: clamp(16px, 4.7vw, 24px); }
  .h-langs-dots { gap: 6px 12px; font-size: 10.5px; }
  .h-langs .h-ch-text { margin-top: 16px; }
  .h-langs .h-ch-text p { font-size: 16px; line-height: 24px; }
}
@media (max-width: 400px) {
  .h-langs-dots { gap: 4px 9px; font-size: 9.5px; letter-spacing: 0; }
}
@media (max-width: 767px) and (max-height: 640px) {
  .h-langs .h-frame { height: min(42svh, 118vw); }
  .h-lc { padding-bottom: 40px; }
  .h-lc .h-chart, .h-lc[lang="ar"] .h-chart { font-size: clamp(14px, 4.1vw, 20px); }
  .h-langs .h-ch-text p { font-size: 15px; line-height: 22px; }
}
/* Phones turned sideways and other windows 480px tall or less: the label,
   the giant word and the paragraph keep their size and the frame alone gives
   way, so it shrank to about 60px and the chart (what the scene is about)
   was cut off under the language names (79px of it at 667x375). Here the
   paragraph steps aside, as the orbit's ticks do on short windows, and the
   heading under the frame keeps it company with less air, across the full
   width (in its half it broke in two at 780x360, and the chart lost the
   line). Under 768px wide the chart is sized to its frame, as it is from
   768px (--h-fit, with the same padding), not to the screen's width, which
   on a phone turned sideways made it taller than the frame; it may go down
   to 12px. At 340px tall or less (the 4-inch phones) the heading steps
   aside too: the label above already says what it says. */
@media (max-height: 480px) and (orientation: landscape) {
  .h-langs .h-ch-text { grid-template-columns: minmax(0, 1fr); margin-top: 12px; }
  .h-langs .h-ch-text p { display: none; }
}
@media (max-width: 767px) and (max-height: 480px) and (orientation: landscape) {
  .h-lc { padding: 4% 6% 48px; }
  .h-lc .h-chart, .h-lc[lang="ar"] .h-chart { font-size: clamp(12px, min(4.1vw, var(--h-fit)), 20px); }
}
@media (max-height: 340px) and (orientation: landscape) {
  .h-langs .h-ch-text { display: none; }
}

.h-more { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 4vw; width: min(100%, 1160px); margin: clamp(80px, 14vh, 140px) auto 0; padding: 0; }
.h-more li { padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .62); font-size: 16px; line-height: 25px; }
.h-more b { display: block; margin-bottom: 6px; color: #fff; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
@media (max-width: 767px) {
  .h-ch-text, .h-more { grid-template-columns: 1fr; gap: 10px; }
  .h-frame { aspect-ratio: 4 / 3; }
  .h-giant { margin-bottom: -.3em; }
}
/* The narrowest phones: the 4:3 frame is only ~216px tall, and the "any key"
   stack in it (at its 44px floor) leaves ~35px above its chord row. On a tall
   one the giant word's drift (14vh either side of rest) carried it ~25px
   into the frame as the chapter came up, onto that row (320x844, 320x900).
   Here it drifts half as far. */
@media (max-width: 359px) {
  .h-giant { transform: translateY(calc((.5 - var(--p)) * 7vh)); }
}

/* ---------- 5 · one leader, every screen ---------- */
.h-orbit { --p: .9; --rip: 1; --h-spin: 36deg; height: 260vh; height: 260svh; background: var(--h-paper); }
.h-orbit .h-pin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 4vw; padding: clamp(88px, 12vh, 120px) var(--h-gut) clamp(24px, 4vh, 40px); }
.h-ticks { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; max-width: 48ch; }
.h-ticks li { position: relative; padding-inline-start: 26px; font-size: 15px; line-height: 23px; color: var(--h-ink); }
.h-ticks li::before { content: ""; position: absolute; inset-inline-start: 0; top: 11px; width: 14px; height: 1.5px; background: var(--h-blue); }
/* Each player (its disc, the gap and its label: 86px tall, centred on its
   ring) stands up to 43px - 3.4% of the drawing past the drawing's box, above
   and below. On a short window 76svh left no room for that: the acoustic
   player at the top slid under the header (1px at 1280x620, more below) and
   the singer at the bottom was cut off by the stage's edge (heights up to
   600px). The third bound keeps the whole orbit between the header (80px,
   plus 4) and the bottom of the stage; it only acts below about 650px. */
.h-orbit-viz { position: relative; width: min(100%, 76svh, 107.3svh - 204px); aspect-ratio: 1; justify-self: center; container-type: inline-size; }
.h-rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.h-rings circle { fill: none; stroke: rgba(14, 13, 11, .14); stroke-width: 1; vector-effect: non-scaling-stroke; }
.h-rings .h-ripple {
  stroke: var(--h-blue); stroke-width: 2; transform-box: fill-box; transform-origin: center;
  transform: scale(calc(1 + var(--rip) * 4)); opacity: calc(var(--rip) * (1 - var(--rip)) * 3.6);
}
.h-node { position: absolute; left: 50%; top: 50%; display: grid; justify-items: center; gap: 8px; translate: -50% -50%; }
.h-node b {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--h-ink);
  font-size: 22px; font-weight: 600; letter-spacing: -0.02em; box-shadow: 0 0 0 1px var(--h-line), 0 10px 24px -14px rgba(14, 13, 11, .45);
  transition: background-color .4s var(--h-ease), color .4s var(--h-ease);
}
.h-node span { font: 500 11px/14px var(--h-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--h-mute); white-space: nowrap; }
.h-node.is-b b { background: var(--h-blue); color: #fff; }
.h-leader b { width: 132px; height: 132px; font-size: 52px; background: var(--h-ink); color: #fff; }
.h-leader.is-b b { background: var(--h-blue); }
.h-spin { position: absolute; inset: 0; transform: rotate(calc(var(--p) * var(--h-spin))); }
.h-spin .h-node { transform: rotate(var(--a)) translateX(calc(var(--r) * 1cqw)) rotate(calc(-1 * var(--a) - var(--p) * var(--h-spin))); }
/* Short desktop windows: the title, the paragraph and the four ticks are
   taller than the stage, and the stage hides what runs past its edge: the
   last tick was cut in half (1536x600) or gone (heights near 520). The title
   is also bound by the window's height (at every roomy size 4.4vw is the
   smaller, so nothing there moves), and below 590px the ticks step aside, as
   they do on phones, rather than be cut. */
.h-orbit .h-title { font-size: clamp(34px, min(4.4vw, 9.3svh), 68px); }
@media (min-width: 900px) and (max-height: 589px) {
  .h-ticks { display: none; }
}
/* Big phones turned sideways (915x412 to 932x430) and other windows 480px
   tall or less: the third bound shrinks the drawing to about 250px, and at
   the desktop sizes the leader's disc (132px) ran over the bass and keys
   players and hid its own label. Here the discs take the phones' sizes, and
   the ring the short phones' shorter turn (below), which keeps the keys
   player off the end of "ВЕДУЩИЙ". */
@media (min-width: 900px) and (max-height: 480px) {
  .h-orbit { --h-spin: 24deg; }
  .h-node b { width: 46px; height: 46px; font-size: 17px; }
  .h-leader b { width: 88px; height: 88px; font-size: 34px; }
}
/* Phones and tablets: the orbit stacks under the title. The player at the
   top of the outer ring (the acoustic, near 270deg all the way through the
   spin) stands about 11 to 16px above the drawing's own box, which put it on
   the title's last line; the drawing keeps 20px of air above it. */
@media (max-width: 899px) {
  .h-orbit .h-pin { grid-template-columns: 1fr; align-content: start; gap: 12px; }
  .h-orbit-viz { width: min(100%, 44svh); order: 2; margin-top: 20px; }
  .h-orbit .h-title { font-size: clamp(28px, 7.5vw, 40px); }
  .h-orbit .h-body, .h-ticks { display: none; }
  .h-node b { width: 46px; height: 46px; font-size: 17px; }
  .h-leader b { width: 88px; height: 88px; font-size: 34px; }
}
/* Short phones and short tablet windows: the drawing is 44svh, so its rings
   come in while the discs and labels keep their size. The keys player turns
   from 20deg to 56deg over the scene, and at the end of that turn its disc
   ran over the end of the leader's label ("LEADER", wider still in Russian:
   "ВЕДУЩИЙ"). Here the ring turns two thirds as far, so the keys player
   stops at 44deg, clear of it. */
@media (max-width: 899px) and (max-height: 600px) {
  .h-orbit { --h-spin: 24deg; }
}
/* Phones turned sideways (667x375 to 874x402): stacked under the title as
   on an upright phone, the drawing was about 170px with the 88px leader's
   disc over every player, and its bottom players ran out of the stage (and
   the 20px of air above it, meant for a tall phone, pushed them further).
   Here, as on wider short windows (above), the title and the drawing stand
   side by side, the drawing takes the short-window bound, and the discs are
   smaller again for its smaller size. The selector for the drawing is one
   step stronger than the Russian, Spanish and Arabic blocks' own phone
   rules (their width and margin are for an upright phone). */
@media (max-width: 899px) and (max-height: 480px) and (orientation: landscape) {
  .h-orbit { --h-spin: 24deg; }
  .h-orbit .h-pin { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-content: center; gap: 4vw; }
  .h-orbit .h-pin .h-orbit-viz { width: min(100%, 107.3svh - 204px); order: 0; margin-top: 0; }
  .h-node b { width: 38px; height: 38px; font-size: 15px; }
  .h-leader b { width: 64px; height: 64px; font-size: 26px; }
  /* The longest label ("Acustica · capotasto 2") reached across to the
     singer's disc at the drawing's top (10px at 740x360). */
  .h-node span { font-size: 10px; letter-spacing: .02em; }
}
/* The 4-inch phones turned sideways (568x320): the drawing is about 140px,
   and even the discs above covered the leader's label and each other. */
@media (max-width: 899px) and (max-height: 340px) and (orientation: landscape) {
  .h-node { gap: 5px; }
  .h-node b { width: 30px; height: 30px; font-size: 12px; }
  .h-leader b { width: 50px; height: 50px; font-size: 20px; }
}

/* ---------- 6 · pricing, set like a programme ---------- */
.h-plans { padding: clamp(110px, 16vh, 170px) 0 clamp(90px, 13vh, 140px); background: var(--h-paper); border-top: 1px solid var(--h-line); }
.h-plan-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(48px, 8vh, 80px); border-top: 1.5px solid var(--h-ink); }
.h-plan {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px 28px 32px; color: var(--h-ink); text-decoration: none;
  border-inline-end: 1px solid var(--h-line); transition: background-color .3s var(--h-ease);
}
.h-plan:first-child { padding-inline-start: 0; }
.h-plan:last-child { border-inline-end: 0; }
.h-plan:hover { color: var(--h-ink); background: rgba(14, 13, 11, .025); }
.h-plan-n { display: flex; align-items: center; gap: 10px; font: 500 12px/16px var(--h-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--h-mute); }
.h-plan-n em { font-style: normal; padding: 3px 8px; border-radius: 999px; background: var(--h-blue); color: #fff; letter-spacing: .04em; }
/* Early-adopter prices (the owner's call, 2026-10-13; site.css says more):
   until December 31, 2026, with the price kept while a subscription started
   by then stays active. One date, no countdown. The tag is drawn as the
   OUTLINE of Pro's filled "Recommended" so the two never read as one thing,
   The Book's own "early-adopter price" (.h-mark) is the same blue, as a
   dotted line of text under its description rather than a pill beside its
   name: beside it, Russian and Spanish ran out of column and either broke
   inside the pill or pushed the Book's price below the others, and four
   columns at 900 to 1300px leave too little room for any pill in those
   languages. Text wraps cleanly where a pill cannot, and under the
   description it shifts nothing (each card's "go" line is pushed to the
   bottom anyway), so it is gone without a jump after the date too. Every
   piece carries data-until, and site.js (0) takes it off the page once the
   reader's date is past it. */
.h-early { max-width: 560px; margin-top: 26px; }
.h-early-tag { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font: 500 12px/16px var(--h-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--h-ink); }
.h-early-tag b { padding: 3px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--h-blue); color: #175CD3; font-weight: 500; letter-spacing: .04em; }
.h-mark { display: flex; align-items: flex-start; gap: 8px; font: 500 12px/16px var(--h-mono); font-style: normal; letter-spacing: .04em; text-transform: uppercase; color: #175CD3; }
.h-mark::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 5px; border-radius: 50%; background: var(--h-blue); }
.h-early-line { margin: 10px 0 0; font-size: 16px; line-height: 24px; color: var(--h-mute); }
/* A price and its label share a line, and on narrow columns they did not
   fit it: about 900px wide "/month" pushed past the column's edge, and
   "one-time" broke at its hyphen into two lines at most widths, even the
   widest (the columns stop growing at 1440px, the price went on to 84px).
   The label now stays whole, and drops under the price where the line has
   no room for it; the price stops at 78px, its size at 1440px, where every
   English label fits beside it. */
.h-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.h-price bdi { font-size: clamp(48px, 5.4vw, 78px); line-height: 1; font-weight: 500; letter-spacing: -0.055em; font-variant-numeric: tabular-nums; transition: color .3s var(--h-ease); }
.h-price small { font-size: 15px; color: var(--h-mute); white-space: nowrap; }
.h-plan-d { max-width: 26ch; font-size: 16px; line-height: 24px; color: var(--h-mute); }
.h-plan-go { margin-top: auto; padding-top: 18px; display: flex; align-items: center; gap: 6px; font-weight: 600; }
.h-plan-go svg { flex: none; width: 18px; height: 18px; transition: translate .3s var(--h-ease); }
.h-plan:hover .h-plan-go svg { translate: 3px -3px; }
[dir="rtl"] .h-plan:hover .h-plan-go svg { translate: -3px -3px; }
.h-plan:hover .h-price bdi { color: var(--h-blue); }
.h-plan-pro::before { content: ""; position: absolute; top: -1.5px; inset-inline: 0; height: 4px; background: var(--h-blue); }
.h-plan-pro:first-child::before, .h-plan:first-child.h-plan-pro::before { inset-inline-start: 0; }
/* Four columns narrower than at 1440px: 8px less padding each side gives
   "one-time" back the room it lacked beside the price (from about 1240px;
   narrower, it drops under the price). */
@media (min-width: 900px) and (max-width: 1439px) {
  .h-plan { padding-inline: 20px; }
}
@media (max-width: 899px) {
  .h-plan-row { grid-template-columns: 1fr 1fr; }
  .h-plan { padding: 24px 16px 28px; border-bottom: 1px solid var(--h-line); }
  .h-plan:nth-child(odd) { padding-inline-start: 0; }
  .h-plan:nth-child(2n) { border-inline-end: 0; }
}
@media (max-width: 520px) {
  .h-plan-row { grid-template-columns: 1fr; }
  .h-plan { padding-inline: 0 !important; border-inline-end: 0; }
}

/* ---------- 7 · questions ---------- */
.h-faq { padding: clamp(90px, 13vh, 140px) 0; background: var(--h-paper); border-top: 1px solid var(--h-line); }
.h-faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 5vw; align-items: start; }
.h-qs details { border-top: 1px solid var(--h-line); }
.h-qs details:last-child { border-bottom: 1px solid var(--h-line); }
.h-qs summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; cursor: pointer;
  font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; letter-spacing: -0.015em; color: var(--h-ink);
}
.h-qs summary::-webkit-details-marker { display: none; }
.h-qs summary::after { content: "+"; flex: none; font-size: 28px; font-weight: 400; line-height: 1; color: var(--h-mute); transition: rotate .3s var(--h-ease); }
.h-qs details[open] summary::after { rotate: 45deg; color: var(--h-blue); }
.h-qs p { margin: 0 0 24px; max-width: 58ch; font-size: 17px; line-height: 27px; color: var(--h-mute); }
.h-qs a { color: var(--h-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 899px) { .h-faq-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- 8 · the last word ---------- */
.h-end { --p: .5; padding: clamp(120px, 18vh, 200px) 0 clamp(80px, 12vh, 120px); background: var(--h-blue); color: #fff; }
.h-display-end { padding: 0; font-size: clamp(44px, 9.6vw, 164px); }
.h-end .h-l > span { transform: translateY(calc(clamp(0, (.42 - var(--p)) * 4, 1) * 135%)); }
.h-end-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; margin-top: clamp(48px, 9vh, 96px); }
.h-end .h-lede { color: #fff; } /* 4.6:1 on the blue */

/* ---------- the footer, in the dark ---------- */
body.home2 .footer { background: var(--h-ink); color: rgba(255, 255, 255, .6); box-shadow: none; }
body.home2 .footer .logo, body.home2 .footer .footer-cols a, body.home2 .footer .langfoot a[aria-current="true"] { color: #fff; }
body.home2 .footer .footer-cols a:hover, body.home2 .footer .langfoot a:hover { color: var(--h-sky); }
body.home2 .footer .footer-cols h2 { font: 500 12px/16px var(--h-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
body.home2 .footer .langfoot a { color: rgba(255, 255, 255, .6); }
body.home2 .footer .footer-bottom { border-top-color: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .45); }
body.home2 .footer .logo img { box-shadow: none; }

/* ---------- reduced motion: the resting frame of every scene, no pinning ---------- */
@media (prefers-reduced-motion: reduce) {
  .h-hero, .h-scan, .h-steps, .h-orbit, .h-langs { height: auto; }
  .h-pin { position: relative; height: auto; min-height: 100svh; }
  .h-hero { --p: 0 !important; }
  .h-scan { --p: 1 !important; --cam: 1 !important; --press: 0 !important; --flash: 0 !important; --read: 0 !important; --dev: 1 !important; --beam-on: 0 !important; --land: 1 !important; --saved: 1 !important; }
  .h-orbit { --p: .9 !important; --rip: 1 !important; }
  .h-chapter, .h-end { --p: .5 !important; }
  .h-steps .h-pin { min-height: 0; }
  .h-words { padding: 0 !important; }
  .h-word { opacity: 1 !important; transform: none !important; }
  .h-w p { position: static !important; opacity: 1 !important; transform: none !important; margin: 8px 0 28px; }
  .h-v { transition: none; }
  .h-steps .h-v0 { opacity: 1 !important; }
  .h-steps .h-v1, .h-steps .h-v2 { opacity: 0 !important; }
  .h-w { display: list-item !important; list-style: none; }
  .h-words { display: block !important; }
  .h-statement .h-wd { opacity: 1 !important; }
}
/* Phones and tablets, reduced motion: the scan's phone is sized as 100% of its
   grid row (capped at 62svh), and that row takes what the 100svh stage leaves
   under the statement. Unpinned, the stage is height: auto, so the row has
   nothing to share out, the 100% resolves to nothing and the phone (all its
   content is absolutely placed) came out 0 by 0: the scene was a headline over
   the film. Here it stands at its cap outright and the stage grows to hold it. */
@media (prefers-reduced-motion: reduce) and (max-width: 899px) {
  .h-phone { height: 62vh; height: 62svh; }
}

/* ---- Per-language adjustments. Each language keeps its own block, scoped by
   html[lang], so a fix for one never moves another. ---- */
/* ---- lang:he ---- */
/* Hebrew is drawn in Heebo (site.css --font-he; Inter has no Hebrew glyphs).
   The buttons, the phone's labels and the chart tags name var(--font) in a
   font shorthand, which would skip Heebo and fall to whatever Hebrew face the
   system has, so the page's --font becomes the Hebrew stack. The small
   monospace labels get Heebo after the monospace faces for the same reason
   (none of them draws Hebrew): the digits stay mono, the words are Heebo. */
html[lang="he"] body.home2 {
  --font: var(--font-he);
  --h-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, 'Heebo', monospace;
}
/* Hebrew has no capitals, and tracking pulls its letters apart into a row of
   strokes: the labels lose the uppercase letter-spacing and gain a pixel,
   since a Hebrew letter at 12px stands lower than a Latin capital. */
html[lang="he"] .h-label, html[lang="he"] .h-scroll { font-size: 13px; letter-spacing: .02em; }
html[lang="he"] .h-node span, html[lang="he"] .h-plan-n, html[lang="he"] .h-plan-n em,
html[lang="he"] .h-early-tag, html[lang="he"] .h-early-tag b, html[lang="he"] .h-mark,
html[lang="he"] body.home2 .footer .footer-cols h2, html[lang="he"] .h-ph-tag,
html[lang="he"] .h-print b, html[lang="he"] .h-langs-dots { letter-spacing: 0; }
/* The early-adopter tag and the Book's mark are several Hebrew words in the
   monospace label face, whose space is a full character cell (Heebo, which
   draws the letters, has no say in it): the words stood apart as islands.
   Pulled in to about a proportional space, as Arabic's labels are below. */
html[lang="he"] .h-early-tag, html[lang="he"] .h-mark { word-spacing: -.3em; }
/* The six-languages chapter draws its cards in the app's stack (Noto Sans
   Hebrew); its paragraph is page copy, so it stays in the page's Heebo. */
html[lang="he"] .h-langs .h-ch-text { font-family: var(--font-he); }
/* The "any key" frame sings Psalm 133 here, so its chords read right to left
   like the line under them (English's row is pinned left to right). */
html[lang="he"] .h-keys-row { direction: rtl; }
/* The printout in the viewfinder: a Hebrew lyric line is about half as many
   characters as Amazing Grace's, so at English's size it filled only the
   right half of the page. A larger type fills the sheet as a real one would. */
html[lang="he"] .h-print.h-ph-print { font-size: 4.5cqw; }
/* The stage on portrait phones 386 to 619px wide, up to 800px tall: there
   "צלמו דף אקורדים." fits one line and runs on under the film's button, so
   the headline starts below the button from the first paint (home.js finds
   the same, but only once the fonts and the script are in; on a slow first
   visit the headline was drawn under the button, then dropped). Narrower,
   the line breaks into two short ones that clear the button; wider, it ends
   before it; taller, the headline already starts below it; shorter than
   460px (a near-square window), the pushed headline would come down onto
   the lede, so there it stays where it was (as home.js decides). */
@media (min-width: 386px) and (max-width: 619px) and (min-height: 460px) and (max-height: 800px) and (orientation: portrait) {
  html[lang="he"] .h-hero .h-display { padding-top: max(clamp(104px, 17vh, 190px), calc(clamp(84px, 11vh, 104px) + 52px)); }
}
/* ---- /lang:he ---- */
/* ---- lang:ar ---- */
/* Arabic is drawn in Noto Sans Arabic (site.css --font-ar; Inter has no
   Arabic glyphs). As in Hebrew, the buttons, the phone's labels and the
   chart tags name var(--font) in a font shorthand, which would skip Noto and
   fall to whatever Arabic face the system has, so the page's --font becomes
   the Arabic stack, and the monospace labels get Noto after the mono faces
   (none of which draws Arabic): the digits stay mono, the words are Noto. */
html[lang="ar"] body.home2 {
  --font: var(--font-ar);
  --h-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, 'Noto Sans Arabic', monospace;
}
/* Arabic is a joined script: tracking, either way, breaks it. Opened up, the
   letters of a word stand apart with gaps in the strokes that join them;
   pulled tight, they run into each other. Every line that carries Arabic
   sets 0 (the display lines already do, above). The small labels also lose
   their uppercase tracking and gain a pixel: an Arabic word at 12px reads
   smaller than a Latin capital of the same size. */
html[lang="ar"] .h-label, html[lang="ar"] .h-scroll { font-size: 13px; line-height: 22px; letter-spacing: 0; }
html[lang="ar"] .h-statement, html[lang="ar"] .h-ch-text h4, html[lang="ar"] .h-more b,
html[lang="ar"] .h-keys-lyric, html[lang="ar"] .h-qs summary, html[lang="ar"] .h-ph-tag,
html[lang="ar"] .h-node span, html[lang="ar"] .h-plan-n, html[lang="ar"] .h-plan-n em,
html[lang="ar"] .h-early-tag, html[lang="ar"] .h-early-tag b, html[lang="ar"] .h-mark,
html[lang="ar"] body.home2 .footer .footer-cols h2, html[lang="ar"] .h-langs-dots { letter-spacing: 0; }
/* The space between two Arabic words in a monospace label comes from the
   monospace face (Noto's range has no space), a full character cell wide,
   which spreads a two-word label into two islands. Pulled in to about a
   proportional space. */
html[lang="ar"] .h-label, html[lang="ar"] .h-scroll, html[lang="ar"] .h-node span, html[lang="ar"] .h-plan-n, html[lang="ar"] .h-early-tag, html[lang="ar"] .h-mark,
html[lang="ar"] body.home2 .footer .footer-cols h2 { word-spacing: -.3em; }
/* The scene counter ("02 / 06") is two numbers and a slash, all neutral or
   weak: in a right-to-left line they come out reversed ("06 / 02"). */
html[lang="ar"] .h-langs-n { direction: ltr; unicode-bidi: isolate; }

/* Arabic stands taller than Latin: marks ride above the tall letters (the
   hamza of أ, the shadda of سلّم, tanween) and the tails of ي ر و and their
   dots hang well below the line. Measured in Noto Sans Arabic at the
   display weight: ink reaches 1.10em above the baseline and 0.45em below,
   where Inter's line box (which sets the metrics) spans 0.97 and 0.24.
   - The display lines (.h-l) clip their words for the rise, so at English's
     line-height (.9) the marks and the dots were cut off. Here each line
     box is a little taller and its clip box reaches 0.2em above and 0.3em
     below it, which holds the ink from 1.10em above the baseline to 0.47em
     below; the margin takes the reach back, so the lines still stack at
     exactly the line-height.
   - The stacked type (the scan's statement, the step words, the titles)
     never clips, but at English's tight leading one line's tails ran into
     the next line's marks; these open up to about Arabic's usual leading. */
html[lang="ar"] .h-display { line-height: 1.08; }
html[lang="ar"] .h-l { padding-block: .2em .3em; margin-bottom: -.5em; }
html[lang="ar"] .h-statement { line-height: 1.22; }
html[lang="ar"] .h-word { line-height: 1.12; }
html[lang="ar"] .h-title { line-height: 1.22; }
html[lang="ar"] .h-title-xl { line-height: 1.14; }
html[lang="ar"] .h-ch-text h4 { line-height: 1.4; }
/* The phone's chart tags set a line of 1 in the font shorthand, too tight
   for Noto's tall metrics: here a little more line, and a size that reads.
   (The capo and play pills set their own line in the shared rules.) */
html[lang="ar"] .h-ph-tag { font-size: 3.2cqw; line-height: 1.3; }
/* The stage: "صوِّر ورقة الأكوردات." is 8.4em wide, English's first line
   7.2em, so on a phone it broke in two at English's 46px floor; and three
   Arabic lines with room for their marks stand 3.7em tall where English's
   stand 2.8em, which ran into the lede on short desktops. A lower ceiling
   on both bounds keeps it three lines and clear of the foot everywhere.
   From 768px, like the shared rule, it also stops the first line (8.39em
   here) 8px before the film's button, and takes the short-tablet bound
   (--h-fit-y), worked out for Arabic's taller lines: 3.24em for the three,
   not 2.7. (On a phone the headline starts below the button instead, just
   below.) */
html[lang="ar"] .h-hero .h-display { font-size: clamp(34px, min(10.7vw, 15svh), 184px); }
/* Phones: the film's play button sits at the inline end, which on this page
   is the LEFT edge, exactly where the first line ("…الأكوردات.") runs out,
   and on a phone under ~800px tall the two met. Here the headline always
   starts below the button, from the first paint. home.js reaches the same
   answer, but only once the fonts and the script are in: on a slow first
   visit the headline was drawn under the button and then dropped 23px.
   Upright screens 532px tall or more only: on a phone turned sideways (or a
   shorter window) the pushed headline came down across the buttons (34px
   at 667x375), so there home.js decides, as for every other language, and
   keeps it where it was. */
@media (max-width: 767px) and (min-height: 532px) and (orientation: portrait) {
  html[lang="ar"] .h-hero .h-display { padding-top: max(clamp(104px, 17vh, 190px), calc(clamp(84px, 11vh, 104px) + 52px)); }
}
@media (min-width: 768px) {
  html[lang="ar"] .h-hero .h-display { font-size: clamp(34px, min(10.7vw, (100cqw - var(--h-gut) - 68px) / 8.39, 15svh, var(--h-fit-y, 184px)), 184px); }
}
@media (min-width: 768px) and (max-width: 1023px) and (max-height: 650px) {
  html[lang="ar"] .h-hero { --h-fit-y: calc(29svh - 93.8px); }
}
/* The "any key" frame sings Psalm 23 here, so its chords read right to left
   like the line under them (English's row is pinned left to right). */
html[lang="ar"] .h-keys-row { direction: rtl; }
/* Phones and tablets: the shared rules leave 20px above the orbit for the
   top player; the Arabic tails (the ع of تتبع) hang below the title's last
   line, so Arabic leaves two more. */
@media (max-width: 899px) {
  html[lang="ar"] .h-orbit-viz { margin-top: 22px; }
}
/* ---- /lang:ar ---- */
/* ---- lang:ru ---- */
/* Russian sets about a tenth wider than English, and several of the home's
   tight spots need that room back:
   - How it works, phones: the three words share ONE line, and "Фото.
     Проверка. Игра." at English's 10.2vw pushed "Игра." off a 390px screen.
     At 8.6vw all three fit with room to spare down to 320px.
   - The orbit, tall phones: where 44svh is wider than the screen the rings
     fill it edge to edge, and the drummer's label ("УДАРНЫЕ", seven letters
     against "DRUMS") swings to within 3px of the right edge at the end of the
     spin. 24px off the width keeps the ~10px English has there.
   - The stage's buttons on phones: English splits the row into two equal
     halves, and "Начать бесплатно" is far wider than "Try it free", so from
     360 to 480px the half was too narrow for the label and the arrow shrank
     to nothing (0px, 11px at 480). The same button in the closing blue
     section kept its arrow, so the page's two main buttons looked different.
     Here each button starts at its own width and the two share what is
     left; below 390px they stack, full width, as they already did at 320. */
@media (max-width: 899px) {
  html[lang="ru"] .h-words { font-size: clamp(26px, 8.6vw, 56px); }
  html[lang="ru"] .h-orbit-viz { width: min(100% - 24px, 44svh); }
}
@media (max-width: 767px) {
  html[lang="ru"] .h-hero-foot .h-btn { flex: 1 1 auto; }
}
/* The stage on portrait phones up to 800px tall, 375 to 505px wide (and 331
   to 359px, at the 40px size below): there "Аккорды с фото." fits one line
   and runs on under the film's button, so the headline starts below the
   button from the first paint (home.js finds the same, but only once the
   fonts and the script are in; on a slow first visit the headline was drawn
   under the button, then dropped). In between, the line breaks into two
   short ones that clear the button; wider, it ends before it; taller, the
   headline already starts below it; shorter than 472px (520px at the 40px
   size), the pushed headline would come down onto the lede, so there it
   stays where it was (as home.js decides). */
@media (min-width: 375px) and (max-width: 505px) and (min-height: 472px) and (max-height: 800px) and (orientation: portrait),
       (min-width: 331px) and (max-width: 359px) and (min-height: 520px) and (max-height: 800px) and (orientation: portrait) {
  html[lang="ru"] .h-hero .h-display { padding-top: max(clamp(104px, 17vh, 190px), calc(clamp(84px, 11vh, 104px) + 52px)); }
}
/* Phones narrower than 360px (the first iPhone SE, 320x568): at the 46px
   floor "в любом тоне." no longer fits one line, so the stage breaks into
   five lines, and "Начать бесплатно" is wide enough that the two buttons
   stack and the foot grows taller. The two meet: "тоне." was drawn over the
   lede. At 40px the stage is four lines, like English and every wider phone,
   and its last line ends about 24px above the lede (the same fix Italian
   uses). From 360px up the 46px floor already fits, so nothing changes. */
@media (max-width: 359px) {
  html[lang="ru"] .h-hero .h-display { font-size: 40px; }
}
/* The header, 1024 to 1099px wide (iPad landscape among them): this is
   where the desktop nav first appears, and the Russian row is wider than
   English's at every slot ("Возможности" against "Features", "Открыть
   приложение" against "Open the app"). Out of room, the flex row broke
   "Живые сессии" onto two lines and squeezed the language menu's globe and
   chevron from 20/16px to 10/8px. A tighter gap between the links and a
   smaller start margin give back about 48px, which is what the row is short
   by at 1024px, and nowrap keeps each link on one line. From about 1080px
   the row fits at site.css's own spacing, so the band stops at 1099px with
   a little to spare. The same squeeze is on /ru/pricing, /ru/contact and
   /ru/refunds, which never load home.css; this block can only mend the home. */
@media (min-width: 1024px) and (max-width: 1099px) {
  html[lang="ru"] .header .nav { gap: 20px; margin-inline-start: 12px; }
  html[lang="ru"] .header .nav a { white-space: nowrap; }
}
/* ---- /lang:ru ---- */
/* ---- lang:it ---- */
/* Italian runs about a fifth wider than English, and three lines are drawn
   to stay ONE line: the stage's "Fotografa lo spartito." (8.8em, English is
   7.2em), the chapters' giant words ("Sullo schermo" is 6.1em) and, on a
   phone, the three step words in a row ("Scatta. Rivedi. Suona." is 9.4em).
   There is no shorter natural wording, so each gets a slightly lower
   width-bound ceiling instead; the height bounds stay English's own. On
   16:9 desktops the height bound wins and nothing changes; on taller
   windows and phones the type is 4-9% smaller rather than broken in two
   (the stage would otherwise reach the lede at 1280x800). The giant words
   also stop at 230px: the chapters are capped at 1440px wide, and at
   English's 260px "Sullo schermo" broke in two from 1680px windows up.
   From 768px, like the shared rule, the stage also stops its first line
   (8.75em as drawn) 8px before the film's button, and takes the short-tablet
   bound (--h-fit-y). */
html[lang="it"] .h-hero .h-display { font-size: clamp(46px, min(10.3vw, 17.5svh), 184px); }
@media (min-width: 768px) {
  html[lang="it"] .h-hero .h-display { font-size: clamp(46px, min(10.3vw, (100cqw - var(--h-gut) - 68px) / 8.75, 17.5svh, var(--h-fit-y, 184px)), 184px); }
}
html[lang="it"] .h-giant { font-size: clamp(44px, min(14.5vw, 24svh), 230px); }
@media (max-width: 899px) {
  html[lang="it"] .h-words { font-size: clamp(28px, 9.3vw, 60px); }
}
/* Phones narrower than 360px: at the 46px floor the stage breaks into five
   lines ("in ogni tonalità." wraps too) and runs into the lede. At 40px it
   is four, like every other phone. */
@media (max-width: 359px) {
  html[lang="it"] .h-hero .h-display { font-size: 40px; }
}
/* The stage, 768 to 1279px wide: the Italian lede and buttons, side by side,
   reach back over the "free plan" line at the start edge. The shared rules
   hide that line up to 1199px; the Italian lede only clears it from 1240px,
   so here the band runs on to 1279px. */
@media (min-width: 768px) and (max-width: 1279px) {
  html[lang="it"] .h-scroll { display: none; }
}
/* ---- /lang:it ---- */
/* ---- lang:es ---- */
/* Spanish runs about a fifth wider than English, and three tight spots need
   that room back:
   - The stage, 768 to 1239px wide: the Spanish lede and buttons, side by
     side, reach back over the "free plan" line at the start edge (from 912px
     to 1216px the lede's last line was drawn right on top of it). The shared
     rules hide that line up to 1199px; Spanish stretches the band to 1239px.
     From 1240px the lede clears it and it comes back.
   - The stage's buttons on phones: English splits the row into two equal
     halves, and "Pruébalo gratis" is about 42px wider than "Try it free", so
     at 360 to 429px the half was too narrow for the label and the arrow
     shrank to nothing. Here each button starts at its own width and the two
     share what is left; on the narrowest phones they stack, full width.
   - The mock app's key pill ("Tono G") stays one line on a 320px phone, so
     the song's title beside it keeps its line and the chord picker under the
     chart stays in the card. "Tono G" is 8px wider than "Key G", and below
     340px that was enough to push "Amazing Grace" onto two lines; two pixels
     off each gap and off each side of the pill give the row that room back. */
@media (min-width: 768px) and (max-width: 1239px) {
  html[lang="es"] .h-scroll { display: none; }
}
@media (max-width: 767px) {
  html[lang="es"] .h-hero-foot .h-btn { flex: 1 1 auto; }
}
/* The stage on portrait phones 380 to 548px wide, up to 800px tall: there
   "Fotografía la hoja." fits one line and runs on under the film's button,
   so the headline starts below the button from the first paint (home.js
   finds the same, but only once the fonts and the script are in; on a slow
   first visit the headline was drawn under the button, then dropped).
   Narrower, the line breaks into two short ones that clear the button;
   wider, it ends before it; taller, the headline already starts below it;
   shorter than 472px (a near-square window), the pushed headline would
   come down onto the lede, so there it stays where it was (as home.js
   decides). */
@media (min-width: 380px) and (max-width: 548px) and (min-height: 472px) and (max-height: 800px) and (orientation: portrait) {
  html[lang="es"] .h-hero .h-display { padding-top: max(clamp(104px, 17vh, 190px), calc(clamp(84px, 11vh, 104px) + 52px)); }
}
html[lang="es"] .h-app-top .h-key { white-space: nowrap; }
@media (max-width: 339px) {
  html[lang="es"] .h-app-top { gap: 8px; }
  html[lang="es"] .h-app-top .h-key { padding-inline: 8px; }
}
/* Phones and tablets: on tall phones, where 44svh is wider than the screen,
   the orbit's rings fill it edge to edge, and the drummer's label ("BATERÍA"
   against "DRUMS") swings to within 3px of the right edge at the end of the
   spin; 16px off the width gives it about 11px, a little more than English
   has there. */
@media (max-width: 899px) {
  html[lang="es"] .h-orbit-viz { width: min(100% - 16px, 44svh); }
}
/* ---- /lang:es ---- */