/* LiveNotate page, in the app icon's colours: a night-indigo stage that
   deepens toward teal, ivory score paper for anything that is notation,
   Bodoni display type in the manner of an engraved title page, and the
   icon's aqua lit key for whatever is listening or following. Scoped to
   body.ln so the rest of bezhig.com keeps the studio theme. */

@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url("/assets/livenotate/fonts/bodoni-moda-latin-opsz-normal.woff2") format("woff2-variations"), url("/assets/livenotate/fonts/bodoni-moda-latin-opsz-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bodoni Moda";
  font-style: italic;
  font-display: swap;
  font-weight: 400 900;
  src: url("/assets/livenotate/fonts/bodoni-moda-latin-opsz-italic.woff2") format("woff2-variations"), url("/assets/livenotate/fonts/bodoni-moda-latin-opsz-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* SMuFL music glyphs (a subset of Bravura, renamed per its licence). */
@font-face {
  font-family: "LiveNotate Glyphs";
  font-style: normal;
  font-display: block;
  src: url("/assets/livenotate/fonts/livenotate-glyphs.woff2") format("woff2");
  unicode-range: U+E000-E6FF;
}

body.ln {
  --ln-stage: #0e132e;
  --ln-stage-hi: #16314d;
  --ln-raise: rgba(20, 44, 72, .55);
  --ln-paper: #f4f1e8;
  --ln-paper-2: #e6e0cf;
  --ln-ink: #1a1b2e;
  --ln-ink-soft: #55576f;
  --ln-text: #e6e6f2;
  --ln-heading: #fbf8ef;
  --ln-muted: #b3b6d0;
  --ln-dim: #8d91b3;
  --ln-rule: rgba(200, 228, 236, .16);
  --ln-rule-strong: rgba(200, 228, 236, .3);
  --ln-mark: #78e8de;
  --ln-mark-soft: rgba(120, 232, 222, .3);
  --ln-mark-ink: #0b6b70;
  --ln-serif: "Bodoni Moda", Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
  --ln-glyphs: "LiveNotate Glyphs";
  --ln-wide: min(1200px, calc(100% - 96px));
  --ln-radius: 14px;
  --ln-sweep: 6.4s;
  background: var(--ln-stage);
  background-image:
    radial-gradient(ellipse 50% 42% at 70% 6%, rgba(86, 214, 210, .14), transparent 70%),
    radial-gradient(ellipse 60% 45% at 8% 30%, rgba(255, 244, 222, .06), transparent 72%),
    linear-gradient(160deg, #0e132e 0%, #112647 58%, #0d3b50 100%);
  background-attachment: fixed;
  color: var(--ln-text);
}
body.ln ::selection { background: var(--ln-mark); color: var(--ln-ink); }
body.ln a { color: #f2eefc; text-underline-offset: 4px; }
body.ln a:hover { color: #fff; }
body.ln :focus-visible { outline: 3px solid var(--ln-mark); outline-offset: 4px; border-radius: 6px; }
body.ln [id] { scroll-margin-top: 170px; }
body.ln #studio-atmosphere { --ambience-rgb: 244, 238, 221; --ambience-scale: 1.25; opacity: .42; }

/* ---------- shared header and footer, recoloured ---------- */
body.ln .site-header { background: rgba(14, 19, 46, .88); border-bottom: 1px solid var(--ln-rule); }
body.ln .nav-links > a, body.ln .nav-group > summary { color: #e4e4f3; }
body.ln .nav-links > a:hover, body.ln .nav-group > summary:hover { color: #fff; }
body.ln .nav-links > a:last-child { border-color: var(--ln-rule-strong); }
body.ln .nav-dropdown { background: rgba(17, 32, 60, .97); border-color: var(--ln-rule-strong); }
body.ln .nav-dropdown a { color: #ecebf7; }
body.ln .nav-dropdown p { color: var(--ln-dim); }
body.ln .menu-toggle:not([hidden]) { color: #ecebf7; border-color: var(--ln-rule-strong); }
body.ln .skip-link { background: var(--ln-paper); color: var(--ln-ink); }
body.ln .site-footer { border-top: 1px solid var(--ln-rule); }
body.ln .footer-identity p, body.ln .footer-bottom { color: var(--ln-dim); }
body.ln .footer-column h2 { color: var(--ln-dim); }
body.ln .footer-column a, body.ln .footer-identity > a { color: #e6e5f3; }
body.ln .footer-column a[aria-current="page"] { color: var(--ln-mark); }
body.ln .motion-toggle { color: #d6d6ea; border-color: var(--ln-rule-strong); }

/* ---------- type ---------- */
.ln-display {
  font-family: var(--ln-serif);
  font-weight: 600;
  font-optical-sizing: auto;
  letter-spacing: -.012em;
  color: var(--ln-heading);
}
.ln-lede { color: var(--ln-muted); font-size: 1.125rem; line-height: 1.7; max-width: 60ch; margin: 0; }
.ln-fineprint { color: var(--ln-dim); font-size: .875rem; line-height: 1.6; margin: 0; }
body.ln h2, body.ln h3 { color: var(--ln-heading); }
body.ln p, body.ln li, body.ln dd { line-height: 1.7; }

/* ---------- buttons: a sheet of score paper, or a pencil outline ---------- */
.ln-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 12px 22px;
  border-radius: 10px;
  font: 600 .9375rem/1.2 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.ln-btn--paper {
  color: var(--ln-ink) !important;
  background: linear-gradient(180deg, #fbf7ea, var(--ln-paper) 55%, var(--ln-paper-2));
  border: 1px solid #fff9e6;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 10px 26px rgba(4, 6, 24, .4);
}
.ln-btn--paper:hover { background: #fffbef; }
.ln-btn--ghost {
  color: var(--ln-heading) !important;
  background: rgba(14, 19, 46, .5);
  border: 1px solid var(--ln-rule-strong);
}
.ln-btn--ghost:hover { border-color: var(--ln-mark); background: rgba(22, 60, 82, .5); }
.ln-btn--sm { min-height: 42px; padding: 8px 16px; font-size: .875rem; border-radius: 9px; }
.ln-btn[aria-pressed="false"] { color: var(--ln-muted) !important; }

/* ---------- sub navigation ---------- */
.ln-subnav {
  position: sticky;
  top: 92px;
  z-index: 20;
  background: rgba(14, 19, 46, .8);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--ln-rule);
}
.ln-subnav-inner { width: var(--ln-wide); margin: 0 auto; display: flex; align-items: center; gap: 18px; min-height: 58px; }
.ln-subnav-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ln-heading) !important; text-decoration: none; font: 600 1.0625rem/1 var(--ln-serif); white-space: nowrap; }
.ln-subnav-brand img { width: 30px; height: 30px; border-radius: 7px; }
.ln-subnav-links { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; }
.ln-subnav-links::-webkit-scrollbar { display: none; }
.ln-subnav-links a { color: #dcdcef !important; text-decoration: none; font-size: .875rem; font-weight: 550; padding: 9px 12px; border-radius: 8px; white-space: nowrap; }
.ln-subnav-links a:hover { background: rgba(200, 228, 236, .08); color: #fff !important; }

/* ---------- layout ---------- */
.ln-main { position: relative; z-index: 1; }
.ln-section { width: var(--ln-wide); margin: 0 auto; padding: 104px 0 0; }
.ln-head { max-width: 760px; margin-bottom: 44px; }
.ln-head h2 { font-size: clamp(2.25rem, 4.6vw, 3.5rem); line-height: 1.04; margin: 0 0 18px; }

/* ---------- hero ---------- */
.ln-hero { position: relative; overflow: hidden; padding-bottom: 10px; }
.ln-hero-inner {
  width: var(--ln-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: center;
  padding: clamp(48px, 6vw, 84px) 0 26px;
}
.ln-hero-icon { display: block; width: 104px; height: 104px; border-radius: 23%; margin: 0 0 26px; box-shadow: 0 18px 40px rgba(3, 5, 22, .55), 0 0 0 1px rgba(255, 255, 255, .08); }
.ln-hero h1 { font-size: clamp(3.5rem, 7.4vw, 6.25rem); line-height: .92; margin: 0 0 18px; font-weight: 600; }
.ln-tagline { font: italic 500 clamp(1.5rem, 2.5vw, 2rem)/1.25 var(--ln-serif); color: #f1ecdf; margin: 0 0 22px; }
.ln-hero .ln-lede { margin-bottom: 30px; }
.ln-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.ln-hero-media { margin: 0; min-width: 0; }
.ln-hero-media figcaption { margin-top: 14px; color: var(--ln-dim); font-size: .8125rem; }

/* Real captures of the app sit in a plain device bezel. The screen keeps the
   capture's own shape (width/height attributes), so nothing is cropped. */
.ln-device { display: block; position: relative; margin: 0 auto; padding: 8px; border-radius: 40px; background: linear-gradient(155deg, #2b3252, #0c1020 55%, #161b30); box-shadow: 0 30px 60px rgba(3, 5, 22, .55), 0 0 0 1px rgba(200, 228, 236, .14), inset 0 1px 0 rgba(255, 255, 255, .1); }
.ln-device img, .ln-device video { display: block; width: 100%; height: auto; border-radius: 32px; background: #0a1022; }
.ln-device video { cursor: pointer; }
.ln-device--phone { width: min(100%, 256px); }
.ln-device--tablet { width: min(100%, 440px); padding: 11px; border-radius: 30px; }
.ln-device--tablet img, .ln-device--tablet video { border-radius: 16px; }

/* The staff the hero stands on. The highlighter follows the music once, and
   each note inks in as it is reached. */
.ln-hero-score { position: relative; height: clamp(120px, 12vw, 168px); margin-top: 6px; overflow: hidden; }
.ln-hero-staff { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.ln-hero-staff .ln-staff-lines line { stroke: rgba(244, 238, 221, .3); stroke-width: 1.1; }
.ln-hero-staff .ln-glyph { font-family: var(--ln-glyphs); fill: rgba(244, 238, 221, .82); }
.ln-hero-staff .ln-expr { font: italic 500 17px var(--ln-serif); fill: rgba(244, 238, 221, .7); }
.ln-hero-staff .ln-bars rect { fill: rgba(244, 238, 221, .45); }
.ln-hero-staff .ln-note text, .ln-hero-staff .ln-note rect, .ln-hero-staff .ln-note circle { fill: var(--ln-paper); }
.ln-hero-staff .ln-note { opacity: .3; transform-box: fill-box; transform-origin: center; }
.ln-hero-staff .ln-follow { fill: var(--ln-mark-soft); opacity: 0; }
.ln-hero-score.is-playing .ln-follow { animation: ln-follow var(--ln-sweep) linear .25s both; }
.ln-hero-score.is-playing .ln-note { animation: ln-ink .5s cubic-bezier(.2, .9, .3, 1.3) both; animation-delay: calc(var(--at) * var(--ln-sweep) + .25s); }
.ln-hero-score.is-done .ln-note { opacity: 1; animation: none; }
@keyframes ln-follow {
  0% { transform: translateX(0); opacity: 0; }
  5% { opacity: 1; }
  93% { opacity: 1; }
  100% { transform: translateX(1170px); opacity: 0; }
}
@keyframes ln-ink {
  0% { opacity: .3; transform: translateY(0) scale(1); }
  45% { opacity: 1; transform: translateY(-3px) scale(1.12); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- how it works: rehearsal marks A to D ---------- */
/* Four phones read left to right, like a line of music. */
.ln-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 28px; align-items: start; }
.ln-step { display: grid; gap: 26px; align-content: start; min-width: 0; }
.ln-step-text { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: baseline; align-content: start; }
.ln-step-text h3 { grid-column: 2; margin: 0; font: 600 1.5rem/1.2 var(--ln-serif); }
.ln-step-text p { grid-column: 2; margin: 6px 0 0; color: var(--ln-muted); font-size: .9375rem; max-width: 40ch; }
.ln-rehearsal {
  grid-row: 1 / span 2;
  align-self: start;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--ln-paper);
  border-radius: 3px;
  color: var(--ln-paper);
  font: 700 1.5rem/1 var(--ln-serif);
}

/* ---------- try it: a pocket keyboard that writes ---------- */
.ln-toy { display: grid; gap: 18px; }
.ln-toy-paper {
  position: relative;
  background: linear-gradient(180deg, #faf5e7, var(--ln-paper) 40%, #efe7d1);
  border-radius: var(--ln-radius);
  box-shadow: 0 30px 70px rgba(3, 5, 22, .55), inset 0 0 0 1px rgba(255, 255, 255, .5);
  padding: 8px 18px;
  overflow: hidden;
}
.ln-toy-staff { display: block; width: 100%; height: auto; }
.ln-toy-staff .ln-staff-lines line { stroke: var(--ln-ink); stroke-width: 1.2; }
.ln-toy-staff .ln-glyph { font-family: var(--ln-glyphs); fill: var(--ln-ink); }
.ln-toy-staff .ln-ledger { stroke: var(--ln-ink); stroke-width: 1.4; }
.ln-toy-staff rect.ln-stem { fill: var(--ln-ink); }
.ln-toy-staff .ln-follow { fill: var(--ln-mark-soft); transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.ln-toy-staff .ln-note { transform-box: fill-box; transform-origin: center; animation: ln-land .32s cubic-bezier(.2, .9, .3, 1.3) both; }
.ln-toy-staff .ln-note-slot { transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.ln-toy-staff .ln-note.is-fresh text, .ln-toy-staff .ln-note.is-fresh rect.ln-stem, .ln-toy-staff .ln-note.is-fresh circle { fill: var(--ln-mark-ink); }
.ln-toy-staff .ln-note.is-fresh .ln-ledger { stroke: var(--ln-mark-ink); }
.ln-toy-staff .ln-name { font: 600 13px Inter, ui-sans-serif, system-ui, sans-serif; fill: var(--ln-ink-soft); text-anchor: middle; }
.ln-toy-staff .ln-hint { font: italic 500 22px var(--ln-serif); fill: var(--ln-ink-soft); }
@keyframes ln-land { 0% { opacity: 0; transform: translateY(-10px) scale(1.25); } 100% { opacity: 1; transform: none; } }

.ln-toy-keys {
  --whites: 15;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--whites), minmax(0, 1fr));
  height: clamp(150px, 17vw, 210px);
  padding: 10px 10px 12px;
  border-radius: var(--ln-radius);
  background: linear-gradient(180deg, #151a2c, #0b0e1a);
  box-shadow: 0 24px 50px rgba(3, 5, 22, .5), inset 0 2px 0 rgba(120, 232, 222, .35);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.ln-key { all: unset; box-sizing: border-box; position: relative; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px; cursor: pointer; font: 600 .75rem/1 Inter, ui-sans-serif, system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
.ln-key--white { margin: 0 2px; border-radius: 0 0 7px 7px; background: linear-gradient(180deg, #e9e4d6, #f4f1e8 30%, #fbfaf4); color: #64687e; box-shadow: inset 0 -5px 0 #d4cdb9, 0 2px 0 rgba(0, 0, 0, .4); }
.ln-key--black { position: absolute; top: 10px; width: calc((100% - 20px) / var(--whites) * .62); height: 60%; margin-left: calc((100% - 20px) / var(--whites) * -.31); z-index: 2; border-radius: 0 0 5px 5px; background: linear-gradient(180deg, #262b3d, #101420 70%); color: #a9a9c2; box-shadow: inset 0 -4px 0 #000, 0 3px 6px rgba(0, 0, 0, .6); }
/* A pressed key lights up aqua, like the lit key in the app icon. */
.ln-key.is-down.ln-key--white { background: linear-gradient(180deg, #5fd8cf, #78e8de 40%, #9af0e8); box-shadow: inset 0 -2px 0 #3bb5ac, 0 1px 0 rgba(0, 0, 0, .4); color: #0b4f53; }
.ln-key.is-down.ln-key--black { background: linear-gradient(180deg, #3fc4bb, #0b6b70 80%); color: #e8fffb; box-shadow: inset 0 -2px 0 #064448, 0 1px 3px rgba(0, 0, 0, .6); }
.ln-key:focus-visible { outline: 3px solid var(--ln-mark); outline-offset: -3px; border-radius: 6px; }
.ln-key span { pointer-events: none; display: grid; justify-items: center; gap: 6px; }
.ln-key kbd { font: 600 .6875rem/1 Inter, ui-sans-serif, system-ui, sans-serif; color: #8d90a6; text-transform: uppercase; }
.ln-key--black kbd { color: #8a8ea8; }
.ln-key.is-down kbd { color: inherit; }
@media (hover: none), (pointer: coarse) { .ln-key kbd { display: none; } }
.ln-toy-keys[hidden], .ln-toy-bar[hidden] { display: none; }
.ln-toy-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ln-toy-status { margin: 0 0 0 auto; color: var(--ln-dim); font-size: .875rem; min-height: 1.4em; }

/* ---------- screens gallery ---------- */
.ln-gallery { position: relative; }
.ln-gallery-nav { display: flex; gap: 10px; justify-content: flex-end; margin: -20px 0 16px; }
.ln-gallery-nav button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--ln-rule-strong); background: rgba(14, 19, 46, .7); color: var(--ln-paper); font-size: 1.1rem; cursor: pointer; }
.ln-gallery-nav button:hover { border-color: var(--ln-paper); }
.ln-gallery-track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, 28vw, 330px); gap: 28px; align-items: start; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 26px; scrollbar-color: #2f6f80 transparent; }
.ln-gallery-track figure { margin: 0; scroll-snap-align: start; min-width: 0; }
.ln-gallery-track button { all: unset; display: block; width: 100%; cursor: zoom-in; border-radius: var(--ln-radius); }
.ln-gallery-track button:focus-visible { outline: 3px solid var(--ln-mark); outline-offset: 4px; }
.ln-gallery-track .ln-device { transition: transform .25s ease; }
.ln-gallery-track button:hover .ln-device { transform: translateY(-4px); }
.ln-gallery-track .ln-device--phone { width: min(100%, 230px); }
.ln-gallery-track figcaption { margin-top: 18px; color: var(--ln-muted); font-size: .9375rem; line-height: 1.5; }
.ln-gallery-track figcaption strong { display: block; color: var(--ln-heading); font: 600 1.125rem/1.25 var(--ln-serif); margin-bottom: 3px; }

dialog.ln-lightbox { padding: 0; border: 0; background: transparent; max-width: min(96vw, 1400px); max-height: 96vh; overflow: visible; }
dialog.ln-lightbox::backdrop { background: rgba(6, 10, 24, .92); backdrop-filter: blur(6px); }
.ln-lightbox figure { margin: 0; display: grid; gap: 12px; justify-items: center; }
.ln-lightbox img { max-height: 82vh; width: auto; max-width: 100%; border-radius: 12px; border: 1px solid var(--ln-rule-strong); box-shadow: 0 30px 90px rgba(0, 0, 0, .8); }
.ln-lightbox figcaption { color: var(--ln-text); text-align: center; font-size: .9375rem; max-width: 60ch; }
.ln-lightbox-bar { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
.ln-lightbox-bar button { min-width: 46px; height: 46px; border-radius: 23px; border: 1px solid var(--ln-rule-strong); background: rgba(14, 19, 46, .9); color: var(--ln-paper); font-weight: 600; cursor: pointer; padding: 0 16px; }

/* ---------- what's in the build: set like programme notes ---------- */
.ln-program { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
.ln-program > div { padding: 22px 0 24px; border-top: 1px solid var(--ln-rule); min-width: 0; }
.ln-program dt { font: 600 1.375rem/1.25 var(--ln-serif); color: var(--ln-heading); margin: 0 0 6px; }
.ln-program dd { margin: 0; color: var(--ln-muted); max-width: 52ch; }

/* ---------- status ---------- */
.ln-status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ln-status-grid article { background: var(--ln-raise); border: 1px solid var(--ln-rule); border-radius: var(--ln-radius); padding: 24px; min-width: 0; }
.ln-status-grid h3 { font: 600 1.375rem/1.25 var(--ln-serif); margin: 0 0 8px; }
.ln-status-grid p { margin: 0; color: var(--ln-muted); }
.ln-status-grid .ln-status-label { display: block; margin-bottom: 10px; color: var(--ln-mark); font-size: .8125rem; font-weight: 600; }

.ln-credits { margin-top: 28px !important; max-width: 82ch; }
.ln-credits a { color: inherit; }

/* ---------- updates ---------- */
.ln-updates { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 64px; align-items: start; }
.ln-updates h2 { font-size: clamp(2.25rem, 4.2vw, 3.25rem); line-height: 1.06; margin: 0 0 20px; }
.ln-updates-copy > p:not(.ln-fineprint) { color: var(--ln-muted); max-width: 46ch; }
body.ln .signup-panel { background: rgba(20, 44, 72, .5); border-color: var(--ln-rule-strong); }
body.ln .signup-panel input[type=email] { background: #0b1124; border-color: var(--ln-rule-strong); color: var(--ln-heading); }
body.ln .signup-panel input:focus-visible { outline-color: var(--ln-mark); }
body.ln .signup-panel input[type=checkbox] { accent-color: var(--ln-mark); }
body.ln .signup-panel .button { background: var(--ln-paper); color: var(--ln-ink); }
body.ln .signup-panel .button:hover { background: #fffbef; color: var(--ln-ink); }
body.ln .form-status { color: #c4f5ef; }

.ln-coda { padding: 96px 0 72px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 30px; border-bottom: 1px solid var(--ln-rule); }
.ln-coda p { margin: 0; color: var(--ln-muted); max-width: 62ch; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  body.ln { --ln-wide: calc(100% - 64px); }
  .ln-hero-inner { gap: 36px; }
  .ln-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 32px; }
  .ln-status-grid { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  body.ln { --ln-wide: calc(100% - 48px); }
  body.ln [id] { scroll-margin-top: 96px; }
  .ln-subnav { position: relative; top: 0; }
  .ln-subnav-brand, .ln-subnav-cta { display: none; }
  .ln-subnav-links { justify-content: space-between; }
  .ln-subnav-links a { padding: 9px 8px; }
  .ln-hero-inner { grid-template-columns: 1fr; gap: 34px; padding-top: 40px; }
  .ln-hero-icon { width: 84px; height: 84px; margin-bottom: 20px; }
  .ln-section { padding-top: 80px; }
  .ln-hero-media .ln-device--tablet { width: min(100%, 400px); }
  /* Keep the opening of the melody legible: draw the staff wider than the screen. */
  .ln-hero-staff { width: 980px; right: auto; }
  .ln-program { grid-template-columns: 1fr; }
  .ln-updates { grid-template-columns: 1fr; gap: 26px; }
  .ln-gallery-nav { display: none; }
  .ln-gallery-track { grid-auto-columns: 82%; }
}
@media (max-width: 480px) {
  body.ln { --ln-wide: calc(100% - 40px); }
  .ln-hero h1 { font-size: clamp(3rem, 15vw, 3.75rem); }
  .ln-cta { flex-direction: column; align-items: stretch; }
  .ln-head h2 { font-size: 2.25rem; }
  .ln-toy-paper { padding: 4px 6px; }
  .ln-toy-keys { padding: 8px 6px 10px; }
  .ln-key--white { margin: 0 1px; }
  .ln-key { font-size: .6875rem; }
  .ln-toy-status { margin-left: 0; flex-basis: 100%; }
  .ln-steps { grid-template-columns: 1fr; gap: 56px; }
  .ln-step .ln-device--phone { width: min(76%, 256px); }
  .ln-coda { padding: 72px 0 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .ln-hero-staff .ln-note { opacity: 1; }
  .ln-hero-score .ln-follow { display: none; }
  .ln-btn, .ln-gallery-track .ln-device, .ln-toy-staff .ln-follow, .ln-toy-staff .ln-note-slot { transition: none; }
}