/* landing-sections.css - the landing's acts (owner reviews of 2026-09-29).
 *
 * The page answers one visitor question per section: what is this (hero), how
 * would I learn (La Passeggiata), will I sound right (La Voce), why does it work
 * (the method), is it for me (your path), what is it worth (the offer), can I
 * look around first (the library).
 *
 * Paintings are never blurred (owner: "no blur ... just the hue"): a section is
 * either a clear watercolor or the same kind of painting under a colour wash,
 * and every painting fades in and out through the colour beneath it, so the
 * page moves from one to the next without a seam. Rhythm: dark (the two acts),
 * light (method, path), dark and lit (the offer), light (library).
 *
 * Colour from the design-system tokens only (LM-15, NORTH_STAR creed 8). Body
 * text is Newsreader through --ls-font-text (owner: a new text face, "the titles
 * are fine") - a change to lab_canon rule 4, made on the owner's instruction.
 * No background-attachment: fixed anywhere (it was the page's scroll jank).
 * No CSS mask or filter on a painting either (2026-09-29 profile: the seven
 * masked, three filtered full-width paintings were most of the page's raster
 * time). A painting fades by a gradient of the colour beneath it laid OVER it,
 * with stops chosen so the blend matches what the mask showed.
 */

.site-main--landing {
  --ls-ink: var(--ds-ink);
  --ls-ink-2: var(--ds-ink-soft);
  --ls-ink-3: var(--ds-ink-faint);
  --ls-paper: var(--ds-paper);
  --ls-base: var(--ds-paper-edge);
  --ls-dusk: rgba(28, 20, 12, 1);
  --ls-terra: var(--ds-terracotta);
  --ls-terra-deep: var(--ds-terracotta-deep);
  --ls-gold: var(--ds-gold);
  --ls-gold-deep: var(--ds-gold-deep);
  --ls-green: var(--ds-green);
  --ls-rose: var(--ds-rose);
  --ls-cream: var(--ds-on-accent);
  --ls-line: rgba(96, 72, 40, 0.18);
  --ls-shadow: 0 24px 60px rgba(60, 40, 18, 0.18);
  --ls-font-text: "Newsreader", Georgia, "Times New Roman", serif;
  --ls-fade: 16vh;
  font-family: var(--ls-font-text);
  background: var(--ls-base);
}

/* ── the text face ─────────────────────────────────────────────────────────── */

.site-main--landing .site-hero-body { font-family: var(--ls-font-text); font-size: clamp(1.1rem, 1.6vw, 1.3rem); }
.site-main--landing .site-btn { font-family: var(--ls-font-text); font-weight: 600; letter-spacing: 0; }

/* ── seams: every painting fades through the colour beneath it ─────────────── */

.site-l1-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24vh;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(28, 20, 12, 0), var(--ls-dusk));
}
.site-l1-scroll-cue { z-index: 3; }
.site-l1-hero::before {
  background:
    radial-gradient(ellipse 70% 60% at 50% 48%, rgba(18, 12, 6, 0.3) 0%, rgba(18, 12, 6, 0.58) 100%),
    url("/watercolor/_derived/birmingham-museums-trust-nbneQlI2M1A-unsplash-1280w.avif") center / cover no-repeat;
}

/* La Passeggiata and La Voce share one dark band: their paintings fade through
   dusk into each other, and the band itself dawns into paper at the end. */
.lact-duo {
  position: relative;
  background: linear-gradient(180deg, var(--ls-dusk) 0, var(--ls-dusk) calc(100% - 34vh), var(--ls-base) 100%);
}
.site-main--landing .land-product-section {
  /* Both edges fade into the dusk band. */
  --lact-edges: linear-gradient(180deg, var(--ls-dusk) 0, rgba(28, 20, 12, 0) var(--ls-fade), rgba(28, 20, 12, 0) calc(100% - 26vh), var(--ls-dusk) 100%);
}
.site-main--landing .land-product-section--voce {
  --land-voce-paint: url("/watercolor/e9a742cf0859e6612342df10e8b4146a.jpg");
  --land-section-paint: var(--land-voce-paint);
  /* The last act ends where the band dawns into paper: the bottom fade carries
     the dawn itself (half-way down the fade the band is 62% of the way to paper). */
  --lact-edges: linear-gradient(180deg, var(--ls-dusk) 0, rgba(28, 20, 12, 0) var(--ls-fade), rgba(89, 81, 69, 0) calc(100% - 26vh), rgba(161, 153, 139, 0.5) calc(100% - 13vh), var(--ls-base) 100%);
}
.site-main--landing .land-product-section::before {
  top: 0;
  bottom: 0;
  height: auto;
  background:
    var(--lact-edges),
    radial-gradient(ellipse 84% 62% at 50% 28%, rgba(18, 12, 6, 0.26), rgba(18, 12, 6, 0.64) 80%),
    var(--land-section-paint) center 35% / cover no-repeat;
  -webkit-mask: none;
          mask: none;
  filter: none;
}

/* The hued sections: a clear painting under a colour wash, faded at both edges. */
.lsec-tint {
  position: relative;
  isolation: isolate;
}
.lsec-tint::before,
.lsec-tint::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.lsec-tint::before { background: var(--tint-paint) center 60% / cover no-repeat; }
.lsec-tint::after {
  background:
    linear-gradient(180deg, var(--ls-base) 0, rgba(243, 234, 217, 0) var(--ls-fade), rgba(243, 234, 217, 0) calc(100% - var(--ls-fade)), var(--ls-base) 100%),
    var(--tint-wash);
}
.lsec-tint--warm {
  /* The JPG, not _derived/2007BN6066-1280w.avif: that derivative decodes but
     renders blank in Chromium (one of 15 such files - OPEN_ISSUES). */
  --tint-paint: url("/watercolor/2007BN6066.jpg");
  /* A warm wash light enough that the pines stay a painting: denser behind the
     heading (for reading), thinner at the sides where the painting shows. */
  --tint-wash:
    radial-gradient(ellipse 62% 48% at 50% 26%, rgba(252, 244, 228, 0.72), transparent 78%),
    linear-gradient(180deg, rgba(248, 234, 206, 0.58), rgba(244, 230, 204, 0.66));
}

/* ── shared section header (light sections) ──────────────────────────────── */

.lsec-head { max-width: 780px; margin: 0 0 clamp(1.6rem, 4vw, 2.4rem); }
.lsec-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.lsec-kick {
  margin: 0 0 0.7rem;
  font-family: var(--ds-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ls-terra-deep);
}
.lsec-title {
  margin: 0 0 0.7rem;
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: 0;
  color: var(--ls-ink);
  text-wrap: balance;
}
.lsec-title em { font-style: italic; color: var(--ls-terra-deep); }
.lsec-lead {
  margin: 0;
  font-family: var(--ls-font-text);
  font-size: clamp(1.12rem, 1.8vw, 1.3rem);
  line-height: 1.55;
  color: var(--ls-ink-2);
  text-wrap: pretty;
}

/* ── the two painted acts: La Passeggiata + La Voce ────────────────────────── */

.lact { padding-top: clamp(6rem, 18vh, 10rem); padding-bottom: clamp(3rem, 8vh, 5.5rem); }
.lact-head {
  position: relative;
  z-index: 3;
  max-width: 880px;
  margin: 0 auto clamp(1.6rem, 4vw, 2.4rem);
  padding: 0 1.2rem;
  text-align: center;
}
.lact-kick {
  margin: 0 0 0.8rem;
  font-family: var(--ds-font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: rgba(245, 217, 141, 0.95);
}
.lact-title {
  margin: 0 0 1rem;
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--ls-cream);
  text-shadow: 0 2px 18px rgba(12, 8, 4, 0.55);
  text-wrap: balance;
}
.lact-title em { font-style: italic; color: rgba(255, 220, 166, 1); }
.lact-lead {
  margin: 0 auto 1.2rem;
  max-width: 50ch;
  font-family: var(--ls-font-text);
  font-size: clamp(1.1rem, 1.9vw, 1.3rem);
  line-height: 1.55;
  color: rgba(255, 247, 234, 0.92);
  text-shadow: 0 1px 10px rgba(12, 8, 4, 0.5);
}
.lact-steps {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  counter-reset: lact;
}
.lact-steps li {
  counter-increment: lact;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-radius: var(--ds-r-pill);
  background: rgba(20, 14, 8, 0.42);
  box-shadow: inset 0 0 0 1px rgba(255, 247, 234, 0.22);
  color: rgba(255, 247, 234, 0.9);
  font-family: var(--ls-font-text);
  font-size: 1rem;
}
.lact-steps li::before {
  content: counter(lact);
  font-family: var(--ds-font-mono);
  font-size: 0.66rem;
  color: rgba(245, 217, 141, 0.95);
}
.lact-steps b { font-weight: 600; color: var(--ls-cream); }
.lact-stage {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
  box-sizing: border-box;
}

/* The story card is shorter now that the scene is: the old 640px frame left a
   blank page under a two-line opening. */
.lact-stage--story .lpsd-main { height: auto; min-height: 380px; }
.lact-stage--story .lpsd-lines { max-height: 420px; }

/* Composer + nudge for the embedded scene. */
.lpsd-input__field.try-live { cursor: text; display: flex; align-items: center; }
.try-answer {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: 0;
  outline: none;
  background: transparent;
  font-family: var(--ds-font-display);
  font-size: 1.05rem;
  color: var(--ls-ink);
}
.try-answer::placeholder { color: var(--ls-ink-3); font-style: italic; }
.lpsd-input__send { cursor: pointer; }
.lpsd-input--idle { opacity: 0.72; }
.lpsd-input--idle .try-answer { cursor: default; }
.try-dytt { grid-column: 1 / -1; margin-top: 0.5rem; }
.try-dytt__toggle {
  cursor: pointer;
  padding: 0.4rem 0.9rem;
  border-radius: var(--ds-r-pill);
  border: 1px solid var(--ls-line);
  background: rgba(243, 234, 217, 0.55);
  font-family: var(--ds-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--ls-ink-2);
}
.try-dytt__toggle:hover { border-color: var(--ls-terra-deep); color: var(--ls-terra-deep); }
.try-dytt__list { margin-top: 0.6rem; display: grid; gap: 0.55rem; }
.try-dytt__list[hidden] { display: none; }
.try-dytt__chip {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.9rem 0.6rem;
  border-radius: var(--ds-r-1);
  border: 1px solid var(--ls-line);
  background: rgba(255, 251, 244, 0.8);
}
.try-dytt__l1 {
  margin: 0;
  min-width: 0;
  line-height: 1.3;
  font-family: var(--ds-font-display);
  font-size: 1.08rem;
  color: var(--ls-ink);
}
/* A chunk of the L1 line: a two-row stack, the Italian reserved ABOVE the words
   (hidden until tapped). The space is always there, so revealing a chunk never
   overlaps its neighbour or reflows the sentence. */
.try-dytt__pair {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: bottom;
  padding: 0 0.05em;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.try-dytt__pair-l1 { border-bottom: 1px dashed rgba(184, 137, 59, 0.6); }
.try-dytt__pair:hover .try-dytt__pair-l1 { color: var(--ls-terra-deep); border-bottom-color: var(--ls-terra); }
.try-dytt__pair-it {
  min-height: 1.2em;
  margin-bottom: 0.1rem;
  white-space: nowrap;
  font-family: var(--ds-font-display);
  font-style: italic;
  font-size: 0.86rem;
  line-height: 1.2;
  color: var(--ls-terra-deep);
  visibility: hidden;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 160ms ease, transform 160ms ease;
}
.try-dytt__pair.is-revealed .try-dytt__pair-l1 { border-bottom-color: var(--ls-terra); }
.try-dytt__pair.is-revealed .try-dytt__pair-it { visibility: visible; opacity: 1; transform: none; }
.try-dytt__all {
  flex: none;
  cursor: pointer;
  padding: 0.3rem 0.8rem;
  border-radius: var(--ds-r-pill);
  border: 1px solid rgba(184, 94, 63, 0.4);
  background: rgba(255, 251, 244, 0.9);
  font-family: var(--ls-font-text);
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--ls-terra-deep);
}
.try-dytt__all:hover { background: var(--ls-terra-deep); color: var(--ls-cream); }
@media (max-width: 620px) {
  .try-dytt__chip { flex-direction: column; align-items: flex-start; }
}

.try-finish {
  max-width: 620px;
  margin: 1.2rem auto 0;
  padding: clamp(1.4rem, 3vw, 2rem);
  text-align: center;
  background: var(--ls-paper);
  border: 1px solid var(--ls-line);
  border-radius: var(--ds-r-3);
  box-shadow: var(--ls-shadow);
}
.try-finish[hidden] { display: none; }
.try-finish__title { margin: 0 0 0.5rem; font-family: var(--ds-font-display); font-weight: 700; font-size: 1.4rem; color: var(--ls-ink); }
.try-finish__body { margin: 0 0 1.2rem; font-family: var(--ls-font-text); font-size: 1.1rem; line-height: 1.5; color: var(--ls-ink-2); }
.try-finish__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; }
.try-btn {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  border-radius: var(--ds-r-pill);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--ls-font-text);
  font-weight: 600;
  font-size: 1rem;
}
.try-btn--primary { background: var(--ls-terra-deep); color: var(--ls-cream); box-shadow: var(--ds-shadow-btn); }
.try-btn--ghost { border-color: var(--ls-line); background: rgba(255, 251, 244, 0.7); color: var(--ls-ink); }

/* ── La Voce: one take, three layers ────────────────────────────────────────── */

.lvl {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 0;
  max-width: 1060px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--ds-r-3);
  background: var(--ls-paper);
  box-shadow: 0 30px 80px rgba(16, 10, 6, 0.3);
  color: var(--ls-ink);
  font-family: var(--ls-font-text);
}
@media (max-width: 880px) { .lvl { grid-template-columns: minmax(0, 1fr); } }
.lvl-say {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: clamp(1.4rem, 3.4vw, 2.4rem);
  background: radial-gradient(ellipse at 20% 0%, rgba(217, 119, 87, 0.12), transparent 60%), var(--ls-paper);
  border-right: 1px solid var(--ls-line);
}
@media (max-width: 880px) { .lvl-say { border-right: 0; border-bottom: 1px solid var(--ls-line); } }
.lvl-kick {
  margin: 0 0 0.4rem;
  font-family: var(--ds-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ls-terra-deep);
}
.lvl-line {
  margin: 0;
  font-family: var(--ds-font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.1rem, 4.6vw, 3rem);
  line-height: 1.1;
  color: var(--ls-ink);
}
.lvl-gloss { margin: 0.3rem 0 1.3rem; font-family: var(--ls-font-text); font-style: italic; font-size: 1.15rem; color: var(--ls-ink-2); }
.lvl-controls { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.lvl-rec {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1.4rem;
  border: 0;
  border-radius: var(--ds-r-pill);
  background: var(--ls-terra-deep);
  color: var(--ls-cream);
  font-family: var(--ls-font-text);
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: var(--ds-shadow-btn);
  transition: background var(--ds-motion) ease;
}
.lvl-rec:hover { background: var(--ls-terra); }
.lvl-rec:disabled { opacity: 0.6; cursor: default; }
.lvl-rec__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ls-cream); }
/* magic: mirror - the dot beats while the engine is actually hearing you */
.lvl.is-recording .lvl-rec__dot { animation: lvl-beat 1s ease-in-out infinite; }
/* magic: mirror - the recording dot, alive only while the mic is open */
@keyframes lvl-beat { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.7); } }
.lvl.is-recording .lvl-rec { background: var(--ls-rose); }
.lvl-ghost {
  padding: 0.7rem 1.1rem;
  border-radius: var(--ds-r-pill);
  border: 1px solid var(--ls-line);
  background: rgba(255, 251, 244, 0.9);
  color: var(--ls-terra-deep);
  font-family: var(--ls-font-text);
  font-weight: 600;
  font-size: 0.98rem;
  cursor: pointer;
}
.lvl-ghost:hover { border-color: var(--ls-terra); }
.lvl-ghost[hidden] { display: none; }
.lvl-meter {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: 44px;
  margin: 1.1rem 0 0.2rem;
  opacity: 0.35;
  transition: opacity var(--ds-motion) ease;
}
.lvl.is-recording .lvl-meter { opacity: 1; }
.lvl-meter i {
  flex: 1 1 0;
  max-width: 8px;
  height: 100%;
  border-radius: var(--ds-r-pill);
  background: linear-gradient(180deg, var(--ls-terra), rgba(217, 119, 87, 0.35));
  transform: scaleY(0.08);
  transform-origin: center;
}
.lvl-clock { margin-left: 0.6rem; font-family: var(--ds-font-mono); font-size: 0.72rem; color: var(--ls-ink-3); }
.lvl-progress { width: 100%; height: 3px; margin: 0.4rem 0 0; border-radius: var(--ds-r-pill); background: rgba(96, 72, 40, 0.1); overflow: hidden; visibility: hidden; }
.lvl.is-working .lvl-progress { visibility: visible; }
.lvl-progress i { display: block; height: 100%; background: var(--ls-terra); transform: scaleX(0); transform-origin: left; transition: transform 250ms linear; }
.lvl-status { min-height: 1.5em; margin: 0.6rem 0 0.4rem; font-size: 1rem; line-height: 1.5; color: var(--ls-ink-2); }
.lvl-link {
  margin-top: auto;
  padding: 0.2rem 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--ls-font-text);
  font-size: 0.95rem;
  color: var(--ls-ink-3);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lvl-link:hover { color: var(--ls-terra-deep); }

.lvl-report { padding: clamp(1.2rem, 3vw, 2rem); display: grid; gap: 0.9rem; align-content: start; }
.lvl-caption { margin: 0; font-family: var(--ds-font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ls-ink-3); }
.lvl-report.is-filled .lvl-caption { color: var(--ls-terra-deep); }
.lvl-layer { padding: 0.9rem 1rem; border-radius: var(--ds-r-2); background: rgba(243, 234, 217, 0.45); box-shadow: inset 0 0 0 1px var(--ls-line); }
.lvl-layer[data-state="filled"] { background: var(--ls-paper); box-shadow: inset 0 0 0 1px rgba(184, 137, 59, 0.3), 0 8px 22px rgba(80, 50, 20, 0.08); }
.lvl-layer__k {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.45rem;
  font-family: var(--ds-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ls-gold-deep);
}
.lvl-layer__n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(184, 137, 59, 0.16); font-size: 0.66rem; letter-spacing: 0; }
.lvl-idle { margin: 0; font-family: var(--ls-font-text); font-style: italic; font-size: 1.05rem; color: var(--ls-ink-3); }
.lvl-words { margin: 0 0 0.4rem; font-family: var(--ds-font-display); font-size: 1.5rem; line-height: 1.3; }
.lvl-w { padding: 0 0.04em; border-bottom: 3px solid transparent; }
.lvl-w--ok { border-bottom-color: rgba(61, 143, 108, 0.6); }
.lvl-w--near { border-bottom-color: rgba(184, 137, 59, 0.75); }
.lvl-w--issue { color: var(--ls-rose); border-bottom-color: var(--ls-rose); text-decoration: line-through; text-decoration-thickness: 1px; }
.lvl-w--none { color: var(--ls-ink-3); }
.lvl-heard { margin: 0 0 0.45rem; font-size: 0.95rem; color: var(--ls-ink-3); }
.lvl-heard__k { margin-right: 0.45rem; font-family: var(--ds-font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; }
.lvl-heard__it { font-family: var(--ds-font-display); font-style: italic; font-size: 1rem; color: var(--ls-ink-2); }
.lvl-verdict { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-weight: 600; font-size: 1.02rem; color: var(--ls-ink); }
.lvl-verdict::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ls-ink-3); }
.lvl-verdict--ok::before { background: var(--ls-green); }
.lvl-verdict--issue::before { background: var(--ls-rose); }
.lvl-verdict--near::before { background: var(--ls-gold); }
.lvl-note { margin: 0.25rem 0 0; font-size: 0.97rem; line-height: 1.5; color: var(--ls-ink-2); }
.lvl-sounds { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.lvl-sound { padding-left: 1rem; position: relative; }
.lvl-sound::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 50%; background: var(--ls-ink-3); }
.lvl-sound--ok::before { background: var(--ls-green); }
.lvl-sound--issue::before { background: var(--ls-rose); }
.lvl-sound--near::before { background: var(--ls-gold); }
.lvl-sound__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin: 0; }
.lvl-sound__label { font-weight: 600; font-size: 1rem; }
.lvl-sound__words { font-family: var(--ds-font-display); font-style: italic; font-size: 1rem; color: var(--ls-ink-2); }
.lvl-sound__title { margin: 0.15rem 0 0; font-size: 0.97rem; color: var(--ls-ink-2); }
/* The measurement itself: the Italian range as a band, your value as a mark. */
.lvl-gauge { position: relative; height: 10px; margin: 0.45rem 0 0.25rem; border-radius: var(--ds-r-pill); background: rgba(96, 72, 40, 0.1); }
.lvl-gauge__band { position: absolute; top: 0; bottom: 0; border-radius: var(--ds-r-pill); background: rgba(61, 143, 108, 0.28); }
.lvl-gauge__you { position: absolute; top: -4px; width: 4px; height: 18px; margin-left: -2px; border-radius: var(--ds-r-pill); background: var(--ls-ink-2); }
.lvl-gauge__you--ok { background: var(--ls-green); }
.lvl-gauge__you--near { background: var(--ls-gold-deep); }
.lvl-gauge__you--issue { background: var(--ls-rose); }
.lvl-gauge__txt { margin: 0; font-family: var(--ds-font-mono); font-size: 0.68rem; color: var(--ls-ink-3); }
.lvl-contour { display: block; width: 100%; height: auto; margin: 0.1rem 0 0.2rem; }
.lvl-contour polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lvl-contour__native { stroke: var(--ls-gold); stroke-width: 2; stroke-dasharray: 5 5; opacity: 0.9; }
.lvl-contour__you { stroke: var(--ls-terra-deep); stroke-width: 2.6; }
.lvl-legend { display: flex; gap: 1rem; margin: 0 0 0.45rem; font-family: var(--ds-font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ls-ink-3); }
.lvl-legend span::before { content: ""; display: inline-block; width: 16px; height: 0; margin-right: 0.4rem; vertical-align: middle; border-top: 2px solid var(--ls-terra-deep); }
.lvl-legend__native::before { border-top-style: dashed !important; border-top-color: var(--ls-gold) !important; }

/* ── the model of you ─────────────────────────────────────────────────────── */

.lmod, .lmet, .llib { position: relative; padding: clamp(4.5rem, 10vw, 7rem) 1.2rem; color: var(--ls-ink); }
.lmod__in, .lmet__in, .llib__in { max-width: 1120px; margin: 0 auto; }
.lmod-grid { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); align-items: center; gap: 0; }
@media (max-width: 900px) { .lmod-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }
.lmod-card { padding: clamp(1.2rem, 3vw, 1.8rem); border-radius: var(--ds-r-3); background: var(--ls-paper); box-shadow: var(--ls-shadow); }
.lmod-card__k { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1rem; font-family: var(--ds-font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ls-gold-deep); }
.lmod-card__ex { padding: 0.12rem 0.5rem; border-radius: var(--ds-r-pill); background: rgba(36, 26, 18, 0.06); color: var(--ls-ink-3); letter-spacing: 0.1em; }
.lmod-row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.8rem; align-items: baseline; padding: 0.6rem 0; border-top: 1px dashed var(--ls-line); }
@media (max-width: 520px) { .lmod-row { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; } }
.lmod-row__k { display: flex; align-items: center; gap: 0.45rem; margin: 0; font-weight: 600; font-size: 1rem; }
.lmod-row__k::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ls-ink-3); }
.lmod-row--use .lmod-row__k::before { background: var(--ls-green); }
.lmod-row--wobble .lmod-row__k::before { background: var(--ls-terra); }
.lmod-row--done .lmod-row__k::before { background: var(--ls-gold); }
.lmod-row__v { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; }
.lmod-row__v > span { padding: 0.18rem 0.6rem; border-radius: var(--ds-r-pill); background: rgba(36, 26, 18, 0.05); font-family: var(--ds-font-display); font-size: 0.95rem; color: var(--ls-ink-2); }
.lmod-row--use .lmod-row__v > span { background: var(--ds-green-soft); color: var(--ls-green); }
.lmod-row--wobble .lmod-row__v > span { background: rgba(217, 119, 87, 0.12); color: var(--ls-terra-deep); }
.lmod-arrow { margin: 0; height: 2px; background: repeating-linear-gradient(90deg, var(--ls-gold) 0 6px, transparent 6px 12px); position: relative; }
.lmod-arrow::after { content: ""; position: absolute; right: 0; top: -5px; border-left: 10px solid var(--ls-gold); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
@media (max-width: 900px) {
  .lmod-arrow { width: 2px; height: 36px; margin: 0 auto; background: repeating-linear-gradient(180deg, var(--ls-gold) 0 6px, transparent 6px 12px); }
  .lmod-arrow::after { right: -5px; top: auto; bottom: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 10px solid var(--ls-gold); border-bottom: 0; }
}
.lmod-card--next { background: linear-gradient(180deg, var(--ls-paper), rgba(243, 234, 217, 0.9)); position: relative; overflow: hidden; }
.lmod-task { margin: 0 0 0.6rem; font-family: var(--ds-font-display); font-weight: 600; font-size: clamp(1.2rem, 2.4vw, 1.5rem); line-height: 1.25; }
.lmod-answer { margin: 0 0 1rem; font-family: var(--ls-font-text); font-size: 1.25rem; line-height: 1.45; }
.lmod-strike { color: var(--ls-rose); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.lmod-fix { color: var(--ls-green); font-weight: 600; }
.lmod-why { margin: 0; padding: 0.8rem 0.95rem; border-left: 3px solid var(--ls-gold); border-radius: 0 var(--ds-r-2) var(--ds-r-2) 0; background: rgba(184, 137, 59, 0.1); font-size: 1rem; line-height: 1.55; color: var(--ls-ink-2); }
.lmod-why b { display: block; margin-bottom: 0.25rem; font-family: var(--ds-font-mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ls-gold-deep); }

/* ── the method: three quiet principles, then the model of you ──────────────── */

/* The principles are a strip, not cards: the two boxes below are the point
   (owner: "the two boxes down are much more important"). */
.lmet-ways {
  list-style: none;
  margin: 0 auto clamp(2rem, 4vw, 2.8rem);
  padding: 0;
  max-width: 1000px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
@media (max-width: 820px) { .lmet-ways { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; } }
.lmet-ways li { padding: 0.2rem clamp(0.8rem, 2vw, 1.4rem); text-align: center; font-size: 1rem; line-height: 1.45; color: var(--ls-ink-2); }
.lmet-ways li + li { border-left: 1px solid rgba(184, 137, 59, 0.35); }
@media (max-width: 820px) { .lmet-ways li + li { border-left: 0; } }
.lmet-ways b { display: block; margin-bottom: 0.2rem; font-family: var(--ds-font-display); font-weight: 600; font-size: 1.12rem; color: var(--ls-ink); }
.lmet-ways i { color: var(--ls-terra-deep); }

/* ── the handmade path ────────────────────────────────────────────────────── */

.lpath { position: relative; isolation: isolate; padding: clamp(4.5rem, 10vw, 7rem) 1.2rem; color: var(--ls-ink); background: none; }
.lpath::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, var(--ls-base) 0, rgba(243, 234, 217, 0) var(--ls-fade), rgba(243, 234, 217, 0) calc(100% - var(--ls-fade)), var(--ls-base) 100%),
    linear-gradient(180deg, rgba(250, 245, 236, 0.74), rgba(243, 234, 217, 0.84)),
    url("/watercolor/_derived/birmingham-museums-trust-nbneQlI2M1A-unsplash-1280w.avif") center / cover no-repeat;
}
.lpath__in { max-width: 1120px; margin: 0 auto; }
.lp-carta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.8rem, 2vw, 1.2rem); max-width: 1060px; margin: 0 auto; }
@media (max-width: 900px) { .lp-carta-grid { grid-template-columns: minmax(0, 1fr); } }
.lp-carta {
  position: relative;
  padding: clamp(1.1rem, 2.6vw, 1.5rem);
  border-radius: var(--ds-r-3);
  background: var(--ls-paper);
  box-shadow: 0 18px 44px rgba(60, 40, 18, 0.14);
  cursor: pointer;
  opacity: 0.72;
  transition: opacity var(--ds-motion) ease, box-shadow var(--ds-motion) ease;
}
.lp-carta:hover { opacity: 1; }
.lp-carta.is-active { opacity: 1; box-shadow: 0 22px 54px rgba(60, 40, 18, 0.18), inset 0 0 0 2px rgba(184, 137, 59, 0.7); }
.lp-carta:focus-visible { outline: 2px solid var(--ls-terra-deep); outline-offset: 3px; }
.lp-carta__kick { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin: 0 0 0.7rem; font-family: var(--ds-font-mono); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ls-gold-deep); }
.lp-carta__when { padding: 0.18rem 0.6rem; border-radius: var(--ds-r-pill); background: rgba(217, 119, 87, 0.12); color: var(--ls-terra-deep); letter-spacing: 0.1em; }
.lp-carta__quote { margin: 0 0 0.9rem; font-family: var(--ds-font-display); font-style: italic; font-weight: 600; font-size: clamp(1.08rem, 1.8vw, 1.22rem); line-height: 1.35; }
.lp-carta__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.lp-carta__chip { padding: 0.18rem 0.6rem; border-radius: var(--ds-r-pill); background: var(--ds-green-soft); color: var(--ls-green); font-size: 0.9rem; }
.lp-arrow { margin: 1.8rem 0 1.2rem; text-align: center; font-family: var(--ls-font-text); font-style: italic; font-size: 1.2rem; color: var(--ls-terra-deep); }
.lp-arrow::before { content: ""; display: block; width: 2px; height: 28px; margin: 0 auto 0.5rem; background: repeating-linear-gradient(180deg, var(--ls-gold) 0 4px, transparent 4px 9px); }

.lp-rotta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.2rem) clamp(1.2rem, 4vw, 3rem);
  padding: 0.5rem 0 1rem;
  transition: opacity 220ms ease, transform 220ms ease;
}
.lp-rotta.is-swapping { opacity: 0; transform: translateY(6px); }
.lp-road { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; overflow: visible; }
.lp-road path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lp-road__bed { stroke: rgba(255, 251, 244, 0.85); stroke-width: 14; }
.lp-road__line { stroke: var(--ls-gold); stroke-width: 2.5; stroke-dasharray: 2 9; }
/* magic: world - the road is drawn once, when the traveller's route is composed */
.lp-road.is-drawing .lp-road__bed { stroke-dasharray: var(--lp-road-len); stroke-dashoffset: var(--lp-road-len); transition: stroke-dashoffset 1.3s cubic-bezier(0.33, 1, 0.68, 1); }
.lp-road.is-drawn .lp-road__bed { stroke-dashoffset: 0; }

button.lp-stop { position: relative; z-index: 1; width: 128px; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: center; cursor: pointer; }
.lp-stop__arch {
  position: relative;
  width: 96px;
  height: 120px;
  margin: 0 auto 0.55rem;
  overflow: hidden;
  border-radius: 999px 999px var(--ds-r-1) var(--ds-r-1);
  border: 3px solid var(--ls-paper);
  background: var(--ls-base);
  box-shadow: 0 14px 30px rgba(60, 40, 18, 0.22);
  transition: transform var(--ds-motion) ease, box-shadow var(--ds-motion) ease;
}
.lp-stop__arch img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-stop:hover .lp-stop__arch { transform: translateY(-4px); }
.lp-stop.goal .lp-stop__arch { border-color: var(--ls-gold); width: 112px; height: 140px; }
.lp-stop.is-open .lp-stop__arch { box-shadow: 0 14px 30px rgba(60, 40, 18, 0.22), 0 0 0 3px var(--ls-terra); }
.lp-stop:focus-visible { outline: none; }
.lp-stop:focus-visible .lp-stop__arch { box-shadow: 0 0 0 3px var(--ls-terra-deep); }
.lp-stop__name { display: block; font-family: var(--ds-font-display); font-weight: 600; font-size: 1rem; line-height: 1.2; }
.lp-stop__why { margin: 0.25rem 0 0; font-family: var(--ls-font-text); font-style: italic; font-size: 0.95rem; line-height: 1.3; color: var(--ls-terra-deep); }

/* The stop card floats over the page under its stop; nothing below moves. */
.lp-pop {
  position: absolute;
  z-index: 20;
  padding: 1rem 1.1rem 1.05rem;
  border-radius: var(--ds-r-2);
  background: var(--ls-paper);
  box-shadow: 0 26px 60px rgba(40, 26, 12, 0.24), inset 0 0 0 1px rgba(184, 137, 59, 0.3);
  text-align: left;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}
.lp-pop.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity 160ms ease, transform 160ms ease; }
.lp-pop::before {
  content: "";
  position: absolute;
  top: -7px;
  left: calc(var(--lp-notch, 50%) - 7px);
  width: 14px;
  height: 14px;
  background: var(--ls-paper);
  transform: rotate(45deg);
  box-shadow: -1px -1px 0 rgba(184, 137, 59, 0.3);
}
.lp-pop__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 0.6rem; margin: 0 0 0.7rem; }
.lp-pop__name { margin: 0; font-family: var(--ds-font-display); font-weight: 700; font-size: 1.15rem; }
.lp-pop__why { grid-column: 1; margin: 0.1rem 0 0; font-family: var(--ls-font-text); font-style: italic; font-size: 1rem; color: var(--ls-terra-deep); }
.lp-pop__close { grid-column: 2; grid-row: 1 / span 2; align-self: start; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(36, 26, 18, 0.06); color: var(--ls-ink-2); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.lp-pop__close:hover { background: rgba(217, 119, 87, 0.16); color: var(--ls-terra-deep); }
.lp-pop__parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.lp-part { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem; align-items: start; }
.lp-part__k { margin-top: 0.1rem; padding: 0.2rem 0.55rem; border-radius: var(--ds-r-pill); white-space: nowrap; font-family: var(--ds-font-mono); font-size: 0.54rem; letter-spacing: 0.12em; text-transform: uppercase; background: rgba(36, 26, 18, 0.07); color: var(--ls-ink-2); }
.lp-part__k--scena, .lp-part__k--stemme { background: rgba(217, 119, 87, 0.14); color: var(--ls-terra-deep); }
.lp-part__k--storia, .lp-part__k--prova { background: rgba(184, 137, 59, 0.18); color: var(--ls-gold-deep); }
.lp-part__k--ord, .lp-part__k--gramm, .lp-part__k--drill { background: var(--ds-green-soft); color: var(--ls-green); }
.lp-part__d { font-size: 0.98rem; line-height: 1.5; color: var(--ls-ink-2); }
.lp-pace { max-width: 52ch; margin: clamp(1.4rem, 3vw, 2.2rem) auto 0; text-align: center; font-family: var(--ls-font-text); font-size: 1.12rem; line-height: 1.55; color: var(--ls-ink-2); }
.lp-pace b { font-weight: 600; color: var(--ls-ink); }

/* ── the offer: what you get, then what it costs ──────────────────────────── */

/* 2026-09-29, owner's pick (option D) with his note "structure it better,
   don't start with the price with huge fonts": one printed card that names the
   six parts first, in pairs, and closes on the price in the text's own size.
   The band is Duncanson's "A Dream of Italy", luminous rather than dark, and
   fades through the page colour laid over it (no mask, no filter). */
.loffer {
  position: relative;
  isolation: isolate;
  padding: clamp(6rem, 14vh, 8.5rem) 1.2rem clamp(6rem, 13vh, 8rem);
  color: var(--ls-ink);
  background:
    linear-gradient(180deg, var(--ls-base) 0, rgba(243, 234, 217, 0) 16vh, rgba(243, 234, 217, 0) calc(100% - 16vh), var(--ls-base) 100%),
    radial-gradient(ellipse 62% 56% at 50% 58%, rgba(255, 228, 176, 0.4), transparent 72%),
    linear-gradient(180deg, rgba(44, 30, 14, 0.28), rgba(44, 30, 14, 0.44)),
    url("/watercolor/robert_s._duncanson-a_dream_of_italy-1855-trivium-art-history.jpg") center 40% / cover no-repeat;
}
.loffer__in { max-width: 1080px; margin: 0 auto; }
.loffer__head .lsec-kick { color: rgba(255, 226, 160, 0.95); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4); }
.loffer__head .lsec-title { color: var(--ls-cream); text-shadow: 0 2px 24px rgba(20, 12, 4, 0.55); }
.loffer__head .lsec-title em { color: rgba(255, 220, 160, 1); }

.loffer-card {
  position: relative;
  padding: clamp(1.8rem, 3.6vw, 2.8rem) clamp(1.3rem, 3.6vw, 3rem) clamp(1.4rem, 3vw, 2rem);
  border-radius: var(--ds-r-1);
  background: linear-gradient(180deg, var(--ls-paper), rgba(247, 239, 224, 1));
  box-shadow: 0 34px 80px rgba(24, 14, 4, 0.42), 0 6px 16px rgba(24, 14, 4, 0.22);
}
/* A printed double rule, as on good stationery. */
.loffer-card::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(184, 137, 59, 0.34); border-radius: 4px; pointer-events: none; }
.loffer-card__h { position: relative; margin: 0 0 0.3rem; text-align: center; font-family: var(--ds-font-display); font-style: italic; font-weight: 600; font-size: 2.1rem; line-height: 1.1; color: var(--ls-terra-deep); }
.loffer-card__sub { position: relative; margin: 0 0 1.8rem; text-align: center; font-size: 1.02rem; color: var(--ls-ink-3); }

/* 1. the six parts, in pairs */
.loffer-items { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.6rem, 4vw, 3.2rem); }
.loffer-item { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 1rem; align-items: center; padding: 1rem 0; border-top: 1px solid rgba(184, 137, 59, 0.2); }
.loffer-item:nth-child(-n + 2) { border-top: 0; padding-top: 0.2rem; }
.loffer-plate { display: block; aspect-ratio: 4 / 3; border-radius: 0; background-size: cover; background-position: center; box-shadow: 0 0 0 1px rgba(184, 137, 59, 0.55), 0 0 0 4px rgba(252, 248, 239, 1), 0 0 0 5px rgba(184, 137, 59, 0.3), 0 6px 14px rgba(60, 40, 18, 0.2); }
.loffer-item__row { display: flex; align-items: baseline; gap: 0.5rem; margin: 0; }
.loffer-item__it { font-family: var(--ds-font-display); font-style: italic; font-weight: 600; font-size: 1.2rem; line-height: 1.2; color: var(--ls-ink); white-space: nowrap; }
.loffer-item__dots { flex: 1; border-bottom: 2px dotted rgba(96, 72, 40, 0.26); transform: translateY(-4px); }
.loffer-item__inc { font-family: var(--ds-font-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ls-gold-deep); white-space: nowrap; }
.loffer-item__no { margin: 0.2rem 0 0; font-size: 0.98rem; line-height: 1.42; color: var(--ls-ink-2); }

/* 2. then the price, set like the foot of a good checkout: a gold hairline,
   a two-row summary (today / after the trial) on the left, the button and one
   reassurance on the right, and the legal line as quiet fine print. */
.loffer-close {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.2rem clamp(2rem, 5vw, 4rem);
  margin-top: 1.6rem;
  padding: 1.5rem 0.2rem 0.4rem;
  border-top: 1px solid rgba(184, 137, 59, 0.45);
}
.loffer-sum { margin: 0; max-width: 460px; }
.loffer-sum__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid rgba(96, 72, 40, 0.14); }
.loffer-sum__row:last-child { border-bottom: 0; }
.loffer-sum dt { font-family: var(--ds-font-mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ls-ink-3); }
.loffer-sum dd { margin: 0; font-size: 1.05rem; color: var(--ls-ink-2); }
.loffer-sum dd b { font-family: var(--ds-font-display); font-weight: 700; font-size: 1.35rem; color: var(--ls-ink); }
.loffer-sum dd.loffer-sum__free { font-family: var(--ds-font-display); font-style: italic; font-weight: 600; font-size: 1.2rem; color: var(--ls-terra-deep); }
.loffer-go { display: flex; flex-direction: column; align-items: stretch; gap: 0.55rem; min-width: 250px; }
.loffer-go__note { margin: 0; text-align: center; font-size: 0.9rem; color: var(--ls-ink-3); }
.loffer .lbt-cta {
  flex: none;
  padding: 0.95rem 1.8rem;
  border: 0;
  border-radius: var(--ds-r-pill);
  background: linear-gradient(120deg, var(--ls-terra-deep), var(--ls-gold-deep));
  color: var(--ls-cream);
  font-family: var(--ls-font-text);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1;
  box-shadow: 0 12px 26px rgba(138, 74, 40, 0.28);
  cursor: pointer;
  transition: transform var(--ds-motion) ease, box-shadow var(--ds-motion) ease;
}
.loffer .lbt-cta:hover { transform: translateY(-1px); box-shadow: 0 16px 30px rgba(138, 74, 40, 0.32); }
.loffer .lbt-cta:disabled { opacity: 0.6; cursor: default; transform: none; }
.lpx-status { min-height: 0; margin: 0; font-size: 0.92rem; color: var(--ls-ink-2); text-align: center; }
.lpx-status:empty { display: none; }
.lpx-legal { position: relative; margin: 1.1rem 0 0; padding-top: 0.9rem; border-top: 1px solid rgba(96, 72, 40, 0.1); font-size: 0.78rem; line-height: 1.5; color: var(--ls-ink-3); text-align: center; }
.lpx-legal a { color: var(--ls-ink-2); text-decoration: underline; text-decoration-color: rgba(96, 72, 40, 0.3); text-underline-offset: 2px; }
.lpx-legal a:hover { color: var(--ls-gold-deep); }

@media (max-width: 820px) {
  .loffer-items { grid-template-columns: minmax(0, 1fr); }
  .loffer-item:nth-child(2) { border-top: 1px solid rgba(184, 137, 59, 0.2); padding-top: 1rem; }
  .loffer-item { grid-template-columns: 72px minmax(0, 1fr); gap: 0.8rem; }
  .loffer-item__it { font-size: 1.08rem; }
  .loffer-close { grid-template-columns: minmax(0, 1fr); }
  .loffer-sum { max-width: none; }
  .loffer-go { min-width: 0; }
}

/* ── the library ──────────────────────────────────────────────────────────── */

.llib { background: linear-gradient(180deg, var(--ls-base), var(--ls-paper)); }
.llib-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.8rem, 2vw, 1.2rem); }
@media (max-width: 960px) { .llib-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .llib-cards { grid-template-columns: minmax(0, 1fr); } }
.llib-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--ds-r-2);
  background: var(--ls-paper);
  box-shadow: 0 16px 40px rgba(60, 40, 18, 0.12);
  text-decoration: none;
  color: var(--ls-ink);
  transition: transform var(--ds-motion) ease, box-shadow var(--ds-motion) ease;
}
.llib-card:hover { transform: translateY(-3px); box-shadow: 0 22px 50px rgba(60, 40, 18, 0.18); }
.llib-card__art { display: block; aspect-ratio: 16 / 10; background: var(--art) center / cover no-repeat; }
.llib-card__k { margin: 0.9rem 1rem 0.3rem; font-family: var(--ds-font-mono); font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ls-terra-deep); }
.llib-card__t { margin: 0 1rem 1.1rem; font-family: var(--ds-font-display); font-weight: 600; font-size: 1.08rem; line-height: 1.3; }
.llib-more { margin: clamp(1.4rem, 3vw, 2rem) 0 0; text-align: center; }
.llib-more__a {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  border-radius: var(--ds-r-pill);
  border: 1px solid rgba(184, 94, 63, 0.4);
  color: var(--ls-terra-deep);
  text-decoration: none;
  font-family: var(--ls-font-text);
  font-weight: 600;
  font-size: 1.05rem;
}
.llib-more__a:hover { background: var(--ls-terra-deep); color: var(--ls-cream); }

/* ── the section navbar ────────────────────────────────────────────────────── */

/* One paper bar that slides in once the hero is behind you: the wordmark, the
   sections with a gold line gliding under the current one, the free-trial door,
   and a reading line along its foot. No backdrop-filter (LM-11); everything
   that moves on scroll is a transform, so the bar costs no layout or paint. */
.lnav {
  position: fixed;
  z-index: 35;
  top: 0;
  left: 0;
  right: 0;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(250, 245, 236, 1);
  border-bottom: 1px solid rgba(184, 137, 59, 0.24);
  box-shadow: 0 10px 28px rgba(40, 26, 12, 0.1);
  transform: translateY(-110%);
  visibility: hidden;
  transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 320ms;
}
.lnav.is-shown { transform: none; visibility: visible; transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.lnav__in {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.6rem);
  max-width: 1200px;
  height: 60px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 1.6rem);
}
.lnav__brand {
  flex: none;
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: 1.28rem;
  color: var(--ls-terra-deep);
  text-decoration: none;
}
.lnav__track {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
  gap: clamp(0.4rem, 1.6vw, 1.5rem);
  height: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.lnav__track::-webkit-scrollbar { display: none; }
.lnav__a {
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 0.2rem;
  white-space: nowrap;
  text-decoration: none;
  font-family: var(--ls-font-text);
  font-size: 1.02rem;
  color: var(--ls-ink-3);
  transition: color var(--ds-motion) ease;
}
.lnav__a:hover { color: var(--ls-ink-2); }
.lnav__a.is-active { color: var(--ls-ink); }
.lnav__a:focus-visible { outline: 2px solid var(--ls-gold); outline-offset: -8px; border-radius: var(--ds-r-1); }
/* 100px wide, scaled to the current link: a transform, never a width. */
.lnav__ink {
  position: absolute;
  left: 0;
  bottom: 12px;
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, var(--ls-gold), var(--ls-terra));
  transform-origin: 0 50%;
  opacity: 0;
  pointer-events: none;
  transition: transform 380ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 200ms ease;
}
.lnav__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.05rem;
  border-radius: var(--ds-r-pill);
  background: linear-gradient(120deg, var(--ls-terra-deep), var(--ls-gold-deep));
  color: var(--ls-cream);
  font-family: var(--ls-font-text);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(138, 74, 40, 0.22);
  transition: transform var(--ds-motion) ease, box-shadow var(--ds-motion) ease;
}
.lnav__cta:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(138, 74, 40, 0.28); }
.lnav__cta-short { display: none; }
/* The language switch travels with the bar: the header that carries it scrolls away. */
.lnav__lang { flex: none; display: flex; gap: 2px; padding: 2px; border: 1px solid rgba(160, 132, 84, 0.3); border-radius: var(--ds-r-pill); }
.lnav__lang-b { padding: 0.28rem 0.5rem; border: 0; border-radius: var(--ds-r-pill); background: none; font: 500 0.68rem/1 var(--ds-font-mono); letter-spacing: 0.06em; color: var(--ls-ink-3); cursor: pointer; }
.lnav__lang-b.is-active { background: rgba(214, 170, 92, 0.24); color: var(--ls-ink); }
.lnav__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--ls-gold), var(--ls-terra));
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}
/* Anchor jumps land below the bar, and glide there unless motion is reduced. */
.site-main--landing [id] { scroll-margin-top: 72px; }
@media (prefers-reduced-motion: no-preference) {
  html:has(.site-main--landing) { scroll-behavior: smooth; }
}
@media (max-width: 1080px) {
  .lnav__track { justify-content: flex-start; }
  .lnav__a { font-size: 0.98rem; }
}
@media (max-width: 760px) {
  /* One row: the sections scroll sideways, the door stays at the right. */
  .lnav__in { position: relative; height: 52px; gap: 0.6rem; padding: 0 0.6rem 0 0; }
  .lnav__brand { display: none; }
  /* Soft ends on the scrolling row, painted in the bar's own colour (no mask). */
  .lnav__track { padding: 0 1.2rem 0 1.4rem; }
  .lnav__in::before,
  .lnav__lang::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1.4rem;
    z-index: 1;
    pointer-events: none;
  }
  .lnav__in::before { left: 0; background: linear-gradient(90deg, rgba(250, 245, 236, 1), rgba(250, 245, 236, 0)); }
  .lnav__lang { position: relative; }
  .lnav__lang::before { right: calc(100% + 0.6rem + 1px); top: 50%; bottom: auto; height: 52px; transform: translateY(-50%); background: linear-gradient(270deg, rgba(250, 245, 236, 1), rgba(250, 245, 236, 0)); }
  .lnav__ink { bottom: 9px; }
  .lnav__cta { padding: 0.42rem 0.85rem; font-size: 0.88rem; }
  .lnav__lang-b { padding: 0.26rem 0.4rem; }
  .lnav__cta-long { display: none; }
  .lnav__cta-short { display: inline; }
  .site-main--landing [id] { scroll-margin-top: 60px; }
}

/* ── phone fixes ──────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .lact-stage--story .lpsd-main { min-height: 300px; }
  .site-main--landing { --ls-fade: 10vh; }
}

/* ── /pricing wears the same offer ─────────────────────────────────────────── */

.loffer--page { padding-top: clamp(4rem, 9vh, 6rem); }