/* The public story uses the app's semantic palette. Colour marks an action or
   a small piece of evidence; the reading surfaces stay quiet in both themes.
   Corners, gaps and type sizes come from the scales in tokens.css. Section
   padding runs past the largest step (48px), so it stays on the same 16px grid
   in rem: 4rem, 5rem, 6rem. */
.landing { --font-body: var(--font-sans); --font-head: var(--font-play); background: var(--bg); line-height: 1.65; }
.landing a { text-underline-offset: 0.22em; }
.landing svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.landing h1, .landing h2, .landing h3 { text-wrap: balance; }
.landing h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.16; letter-spacing: -0.022em; }
.landing h3 { font-size: 1.2rem; line-height: 1.3; }
.landing p { margin: 0; }
.landing :is(a, button, summary):focus-visible { outline: 2px solid var(--c-accent-ink); outline-offset: 4px; box-shadow: none; }
.landing section[id] { scroll-margin-top: 6.5rem; }
.ln-faq-answer { display: flow-root; }
.ln-faq-answer[hidden] { display: none; }
.ln-faq details[data-expanded="false"] summary::after { content: "+"; }
.ln-wrap { width: min(1180px, calc(100% - 2 * var(--sp-48))); margin-inline: auto; }
.ln-section { padding-block: 6rem; }
.ln-skip { position: fixed; left: 1rem; top: 1rem; z-index: 30; padding: 0.75rem var(--sp-16); border-radius: var(--r-btn); background: var(--card); color: var(--fg); transform: translateY(-180%); }
.ln-skip:focus { transform: none; }

/* Navigation */
.ln-nav { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--border); background: var(--bg); }
/* A soft shade under the sticky header once the page scrolls beneath it
   (landing.js sets is-scrolled). On the Trust centre the back bar sits below
   the header and carries it instead (pilot.css). */
.ln-nav::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px; background: linear-gradient(var(--header-shade), transparent); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
html.is-scrolled body:not(.trust-page) .ln-nav::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ln-nav::after { transition: none; } }
.ln-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-24); min-height: 84px; }
.ln-brand { display: inline-flex; align-items: center; gap: var(--sp-8); flex-shrink: 0; font: 700 1.55rem/1 var(--font-head); color: var(--fg); text-decoration: none; letter-spacing: -0.02em; }
.ln-brand img { display: block; border-radius: 9px; }
.ln-beta { align-self: center; border: 1px solid var(--border); border-radius: var(--r-xs); padding: var(--sp-4); margin-left: var(--sp-4); font: 500 var(--fs-13)/1 var(--font-body); letter-spacing: 0; color: var(--fg-muted); }
.ln-links { display: flex; align-items: center; gap: var(--sp-24); }
.ln-links a, .ln-signin { font-size: var(--fs-13); font-weight: 500; color: var(--fg-muted); text-decoration: none; }
.ln-links a:hover, .ln-signin:hover { color: var(--fg); }
.ln-links a[aria-current="page"] { color: var(--fg); }
/* Narrow windows only (below): the button that opens the section links, and
   the Teacher demo entry that stands in for the header button on a phone. */
.ln-menu, .ln-links-demo { display: none; }
.ln-nav-actions { display: flex; align-items: center; gap: var(--sp-16); }
/* Header controls are 44px like every other button (Work Plan: "At least 44px
   high"): the theme switch, Teacher demo and, on a phone, Menu. */
.ln-theme { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: var(--sp-8); border: 1px solid var(--border); border-radius: var(--r-btn); color: var(--fg-muted); background: transparent; cursor: pointer; }
.ln-theme:hover { background: var(--surface-hover); color: var(--fg); }
.ln-theme svg { width: 18px; height: 18px; }
.ln-sun, :root[data-theme="dark"] .ln-moon { display: none; }
:root[data-theme="dark"] .ln-sun { display: block; }
.ln-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.75rem var(--sp-16); border: 1px solid transparent; border-radius: var(--r-btn); font: 600 var(--fs-14)/1.4 var(--font-body); text-decoration: none; text-align: center; }
.ln-button-primary { color: var(--action-ink); background: var(--action); }
.ln-button-primary:hover { background: color-mix(in oklab, var(--action) 90%, var(--fg)); }
.ln-button-secondary { color: var(--fg); background: transparent; border-color: var(--border-strong); }
.ln-button-secondary:hover { background: var(--surface-hover); }
.ln-button-small { min-height: 44px; padding: var(--sp-8) 0.75rem; font-size: var(--fs-13); }
.ln-cta-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-8) var(--sp-24); }
.ln-text-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-accent-ink); font-size: var(--fs-14); font-weight: 600; }
.ln-text-link:hover { color: var(--fg); }
.ln-section-action { margin-top: var(--sp-24); }

/* The hero's focal point is a question, a voice, and a teacher's response. */
.ln-hero { padding-block: 5rem; }
.ln-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.ln-hero-copy { padding-block: var(--sp-16); }
.ln-intro { display: flex; align-items: center; gap: var(--sp-8); margin-bottom: var(--sp-24) !important; color: var(--fg-muted); font-size: var(--fs-13); font-weight: 500; }
.ln-intro > span { width: 7px; height: 7px; background: var(--c-teal); border-radius: 50%; }
.landing h1 { max-width: 15ch; font-size: clamp(2.6rem, 4.3vw, 3.9rem); font-weight: 650; line-height: 1.08; letter-spacing: -0.025em; margin-bottom: var(--sp-24); }
.landing h1 em { font-style: normal; color: var(--c-accent-ink); }
.ln-lede strong { font-weight: 600; }
.ln-product-view iframe { display: block; width: 100%; height: 595px; border: 0; pointer-events: none; background: var(--card); }
.ln-example-open { display: block; padding: .75rem var(--sp-24); min-height: 44px; border-top: 1px solid var(--border); font-size: var(--fs-13); color: var(--c-accent-ink); background: var(--bg-soft); }
.ln-pilot-note { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-8); font-size: var(--fs-13); color: var(--fg-muted); margin-top: var(--sp-24) !important; }
.ln-pilot-note a { color: var(--c-accent-ink); }
.ln-product-view .ln-example-tag { font-size: var(--fs-13); }
.ln-lede { max-width: 29rem; font-size: clamp(1.12rem, 1.65vw, 1.3rem); line-height: 1.55; }
.ln-hero-detail { max-width: 28rem; color: var(--fg-muted); font-size: var(--fs-16); margin-top: var(--sp-16) !important; }
.ln-hero .ln-cta-row { margin-top: var(--sp-32); }
.ln-cta-note { color: var(--fg-muted); font-size: var(--fs-13); line-height: 1.6; margin-top: var(--sp-16) !important; }
.ln-hero-principle { display: flex; align-items: center; gap: var(--sp-16); margin-top: var(--sp-32); padding-top: var(--sp-24); border-top: 1px solid var(--border); }
.ln-hero-principle img { border-radius: 9px; }
.ln-hero-principle p { font-size: var(--fs-13); line-height: 1.6; color: var(--fg-muted); }
.ln-hero-principle strong { font-weight: 500; color: var(--fg); }
.ln-example { margin: 0; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-card); overflow: hidden; }
.ln-example-caption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-8); padding: var(--sp-16) var(--sp-24); border-bottom: 1px solid var(--border); font: 650 var(--fs-14)/1.4 var(--font-head); }
.ln-example-tag { padding: var(--sp-4) var(--sp-8); border: 1px solid var(--border); border-radius: var(--r-xs); font: 400 var(--fs-13)/1.4 var(--font-body); color: var(--fg-muted); }
/* From here to .ln-example-foot: the static answer card the hero showed before
   it embedded the real review (.ln-product-view). No page uses these today. */
.ln-example-subject { display: flex; align-items: center; gap: var(--sp-8); padding: var(--sp-16) var(--sp-24) 0; font-size: var(--fs-13); font-weight: 600; }
.ln-example-subject svg { width: 18px; height: 18px; color: var(--c-accent-ink); }
.ln-example-subject > span { color: var(--fg-muted); font-weight: 400; border-left: 1px solid var(--border); margin-left: var(--sp-4); padding-left: var(--sp-8); }
.ln-answer-story { list-style: none; margin: 0; padding: 0 var(--sp-24); }
.ln-answer-story > li { position: relative; padding: var(--sp-16) 0 var(--sp-16) var(--sp-32); }
.ln-answer-story > li + li { border-top: 1px solid var(--border); }
.ln-story-label { display: flex; align-items: center; gap: var(--sp-8); color: var(--fg-muted); font-size: var(--fs-13); font-weight: 500; margin-bottom: var(--sp-8); }
.ln-story-label > span { position: absolute; left: 0; display: grid; place-items: center; width: 21px; height: 21px; border: 1px solid var(--border); border-radius: 50%; color: var(--fg-muted); font-size: var(--fs-13); }
.ln-example-question { font: 650 1.32rem/1.25 var(--font-head); letter-spacing: -0.02em; }
.ln-example-hint { color: var(--fg-muted); font-size: var(--fs-13); margin-top: var(--sp-8) !important; }
.ln-story-answer blockquote { margin: 0; font: 600 var(--fs-18)/1.45 var(--font-head); letter-spacing: -0.01em; }
.ln-transcript-caption { display: flex; align-items: center; gap: var(--sp-8); color: var(--fg-muted); font-size: var(--fs-13); margin-top: var(--sp-8); }
.ln-transcript-caption svg { width: 13px; height: 13px; }
.ln-evidence-points { display: flex; flex-direction: column; gap: var(--sp-8); font-size: var(--fs-13); }
.ln-evidence-points > span { display: flex; gap: var(--sp-8); align-items: center; }
.ln-evidence-label { color: var(--fg-muted); font-size: var(--fs-13); margin-bottom: var(--sp-4); }
.ln-evidence-points svg { width: 14px; height: 14px; color: var(--c-grass-deep); }
.ln-example-feedback { border-left: 2px solid var(--c-teal); padding: 0 0 0 var(--sp-16); margin-top: var(--sp-16); }
.ln-example-feedback strong { font-size: var(--fs-13); font-weight: 600; }
.ln-example-feedback p { margin-top: var(--sp-4); font-size: var(--fs-13); line-height: 1.55; }
.ln-example-foot { border-top: 1px solid var(--border); background: var(--bg-soft); padding: var(--sp-8) var(--sp-24); font-size: var(--fs-13); color: var(--fg-muted); text-align: center; }

/* A real sequence, with the visual structure doing the counting. */
.ln-workflow { border-block: 1px solid var(--border); background: var(--card); }
.ln-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-48); }
.ln-section-heading > p { max-width: 27rem; font-size: 0.95rem; color: var(--fg-muted); }
.ln-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-48); list-style: none; margin: var(--sp-48) 0 0; padding: 0; }
.ln-steps > li { display: flex; flex-direction: column; align-items: flex-start; border-top: 1px solid var(--border-strong); padding-top: var(--sp-16); }
.ln-step-number { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bg-soft); color: var(--fg-muted); font-size: var(--fs-13); font-weight: 600; margin-bottom: var(--sp-16); }
.ln-steps h3 { margin-bottom: var(--sp-16); }
.ln-steps p { color: var(--fg-muted); font-size: var(--fs-14); flex-grow: 1; }
.ln-step-location { display: block; color: var(--c-accent-ink); font-size: var(--fs-13); font-weight: 500; margin-top: var(--sp-24); }

/* Modes are a comparison. Pronunciation remains a supporting capability. */
.ln-modes-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 6rem; align-items: center; }
.ln-modes-intro > p { max-width: 26rem; color: var(--fg-muted); font-size: 0.95rem; margin: var(--sp-24) 0; }
.ln-mode-options { border: 1px solid var(--border); border-radius: var(--r-card); background: var(--card); }
.ln-mode { padding: var(--sp-24) var(--sp-32); }
.ln-mode + .ln-mode { border-top: 1px solid var(--border); }
.ln-mode-heading { display: flex; align-items: center; gap: var(--sp-8); margin-bottom: var(--sp-16); }
.ln-mode-heading svg { width: 22px; height: 22px; color: var(--c-accent-ink); }
.ln-mode > p { font-size: var(--fs-14); color: var(--fg-muted); }
.ln-mode .ln-mode-use { font-size: var(--fs-13); font-weight: 500; color: var(--fg); margin-top: var(--sp-16); }
.ln-pronunciation { display: flex; align-items: center; gap: var(--sp-16); margin-top: var(--sp-48); padding-top: var(--sp-32); border-top: 1px solid var(--border); }
.ln-speech-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--c-accent-ink); flex-shrink: 0; }
.ln-speech-icon svg { width: 28px; height: 28px; }
.ln-pronunciation h3 { font-size: 1.08rem; }
.ln-pronunciation p { max-width: 44rem; font-size: var(--fs-13); color: var(--fg-muted); margin-top: var(--sp-8); }
.ln-pronunciation > a { margin-left: auto; white-space: nowrap; }

/* The quieter, human part of the story. */
.ln-purpose { background: var(--card); border-block: 1px solid var(--border); }
.ln-purpose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; }
.ln-purpose-statement { display: flex; align-items: center; gap: var(--sp-24); }
.ln-purpose-statement img { flex-shrink: 0; object-fit: contain; }
.ln-purpose-statement h2 { max-width: 12ch; }
.ln-purpose-copy p, .ln-evidence-copy p { color: var(--fg-muted); font-size: 0.94rem; }
.ln-purpose-copy p + p, .ln-evidence-copy p + p { margin-top: var(--sp-16); }
/* The audience and decision-making sections continue the page's two-column
   story. Short reading rows keep these explanations distinct from mode cards. */
.ln-editorial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: start; }
.ln-editorial-intro > p { max-width: 27rem; margin-top: var(--sp-24); color: var(--fg-muted); font-size: .95rem; }
.ln-editorial-copy p, .ln-audience-list p { color: var(--fg-muted); font-size: .94rem; }
.ln-editorial-copy h3 + p, .ln-audience-list h3 + p { margin-top: var(--sp-8); }
.ln-editorial-copy p + p { margin-top: var(--sp-16); }
.ln-editorial-copy p + h3 { margin-top: var(--sp-32); }
.ln-audience-list { list-style: none; margin: 0; padding: 0; }
.ln-audience-list li { padding-block: var(--sp-24); border-top: 1px solid var(--border); }
.ln-audience-list li:first-child { padding-top: 0; border-top: 0; }
.ln-audience-list li:last-child { padding-bottom: 0; }
.ln-ai { background: var(--card); border-block: 1px solid var(--border); }
#trust .ln-faq-grid { margin-top: 4rem; }
.ln-foot .ln-foot-policies { margin-bottom: var(--sp-16); }
.ln-evidence-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: start; }
.ln-stage { display: inline-block; color: var(--fg-muted); border: 1px solid var(--border-strong); border-radius: var(--r-xs); padding: var(--sp-4) var(--sp-8); font-size: var(--fs-13); margin-bottom: var(--sp-16); }
.ln-evidence-copy .ln-button { margin-top: var(--sp-24); }
.ln-questions { padding-top: 0; }
.ln-faq-grid { display: grid; grid-template-columns: 0.7fr 1fr; gap: 7rem; border-top: 1px solid var(--border); padding-top: 4rem; }
.ln-faq-grid > div:first-child > p { color: var(--fg-muted); font-size: 0.91rem; max-width: 18rem; margin: var(--sp-16) 0; }
.ln-faq details { border-bottom: 1px solid var(--border); }
.ln-faq details:first-child { border-top: 1px solid var(--border); }
.ln-faq summary { list-style: none; cursor: pointer; padding: var(--sp-16) var(--sp-32) var(--sp-16) 0; font-size: var(--fs-14); font-weight: 600; position: relative; line-height: 1.5; }
.ln-faq summary::-webkit-details-marker { display: none; }
.ln-faq summary::after { content: "+"; position: absolute; right: 0.1rem; top: 1rem; font-size: 1.3rem; font-weight: 400; color: var(--fg-muted); }
.ln-faq details[open]:not([data-expanded="false"]) summary::after { content: "−"; }
.ln-faq summary:hover { color: var(--c-accent-ink); }
.ln-faq details > p { color: var(--fg-muted); font-size: var(--fs-14); line-height: 1.75; padding: 0 var(--sp-24) var(--sp-24) 0; }
.ln-closing { border-top: 1px solid var(--border); background: var(--card); padding-block: var(--sp-48); }
.ln-closing-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-32); }
.ln-closing h2 { font-size: clamp(1.65rem, 3vw, 2.15rem); }
.ln-closing p { color: var(--fg-muted); font-size: var(--fs-14); margin-top: var(--sp-8); }
.ln-closing-inner > div { max-width: 42rem; }
.ln-closing-inner > .ln-button { flex: none; }
.ln-closing .ln-cta-row { flex-shrink: 0; }

/* Founders and contact routes, without crowding the product story. */
.ln-foot { border-top: 1px solid var(--border); padding-block: var(--sp-48) var(--sp-24); }
.ln-foot-top { display: flex; justify-content: space-between; gap: var(--sp-32); margin-bottom: var(--sp-48); }
.ln-foot-top p { color: var(--fg-muted); font-size: var(--fs-13); margin-top: var(--sp-8); }
.ln-foot nav { display: flex; flex-wrap: wrap; align-content: flex-start; gap: var(--sp-8) var(--sp-16); }
.ln-foot nav a { font-size: var(--fs-13); color: var(--fg-muted); text-decoration: none; }
.ln-foot nav a:hover { color: var(--fg); text-decoration: underline; }
.ln-foot-people { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; padding-block: var(--sp-32); border-top: 1px solid var(--border); }
.ln-foot-people h3 { display: flex; align-items: baseline; gap: var(--sp-8); font-size: 0.95rem; }
.ln-foot-people h3 > span { color: var(--fg-muted); font: 400 var(--fs-13) var(--font-body); }
.ln-foot-people p { font-size: var(--fs-13); color: var(--fg-muted); max-width: 29rem; margin-block: var(--sp-8); }
.ln-foot-people nav a { color: var(--c-accent-ink); }
.ln-foot-small { color: var(--fg-muted); font-size: var(--fs-13); padding-top: var(--sp-16); border-top: 1px solid var(--border); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .ln-button, .ln-theme { transition: background 140ms ease, border-color 140ms ease; }
}
@media (max-width: 1080px) {
  .ln-wrap { width: min(1180px, calc(100% - 2 * var(--sp-24))); }
  .ln-nav-inner { gap: var(--sp-16); }
  .ln-links { gap: var(--sp-16); }
  .ln-nav-actions { gap: var(--sp-16); }
  .ln-hero-grid { gap: var(--sp-32); }
  .ln-modes-grid, .ln-purpose-grid, .ln-evidence-grid, .ln-editorial-grid { gap: var(--sp-48); }
  .ln-faq-grid { gap: 4rem; }
  .ln-steps { gap: var(--sp-32); }
}
@media (max-width: 850px) {
  /* The section links fold into a panel under the header, opened by Menu, so
     they stay one tap away instead of disappearing. */
  .ln-menu { display: inline-flex; align-items: center; gap: var(--sp-8); min-height: 44px; padding: var(--sp-4) 0.75rem; border: 1px solid var(--border); border-radius: var(--r-btn); background: transparent; color: var(--fg); font-family: inherit; font-size: var(--fs-13); font-weight: 500; line-height: 1; cursor: pointer; }
  .ln-menu:hover { background: var(--surface-hover); }
  .ln-menu:focus-visible { outline: 2px solid var(--c-accent-ink); outline-offset: 2px; }
  .ln-menu-icon { display: grid; width: 18px; height: 18px; }
  .ln-menu-icon svg { grid-area: 1 / 1; width: 18px; height: 18px; }
  .ln-menu .ln-menu-close, .ln-menu[aria-expanded="true"] .ln-menu-open { opacity: 0; transform: rotate(-90deg) scale(.6); }
  .ln-menu[aria-expanded="true"] .ln-menu-close { opacity: 1; transform: none; }
  .ln-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: var(--sp-8) var(--sp-24) var(--sp-16); background: var(--bg); border-bottom: 1px solid var(--border); }
  .ln-nav.is-open .ln-links { display: flex; }
  /* While the menu is open the header's shade always shows, falling onto the
     panel, and the panel casts its own, a little stronger, over the page below
     it, scrolled or not. */
  .ln-nav.is-open::after { opacity: 1; }
  .ln-links::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 16px; background: linear-gradient(var(--menu-shade), transparent); pointer-events: none; }
  .ln-links a { display: flex; align-items: center; min-height: 48px; color: var(--fg); font-size: .95rem; }
  .ln-links a + a { border-top: 1px solid var(--border); }
  .ln-links .ln-links-demo { display: none; }
  /* Opening and closing: the panel drops a few pixels into place as it fades
     in and lifts away as it fades out (display waits for the fade), and the
     menu icon turns between the bars and the cross. */
  @media (prefers-reduced-motion: no-preference) {
    .ln-links { opacity: 0; transform: translateY(-6px); transition: opacity .18s ease, transform .24s var(--ease-out), display .24s allow-discrete; }
    .ln-nav.is-open .ln-links { opacity: 1; transform: none; }
    @starting-style { .ln-nav.is-open .ln-links { opacity: 0; transform: translateY(-6px); } }
    .ln-menu-icon svg { transition: opacity .18s ease, transform .24s var(--ease-out); }
  }
  .ln-links a[aria-current="page"] { font-weight: 650; }
  .ln-hero { padding-block: 3rem 4rem; }
  .ln-hero-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-32); align-items: start; }
  .landing h1 { font-size: clamp(2.6rem, 5.5vw, 3.4rem); }
  .ln-hero-copy { padding-top: var(--sp-24); }
  .ln-lede { font-size: 1.08rem; }
  .ln-hero-detail { font-size: var(--fs-14); }
  .ln-hero-principle { margin-top: var(--sp-24); }
  .ln-example-caption { padding-inline: var(--sp-16); }
  .ln-answer-story { padding-inline: var(--sp-16); }
  .ln-example-subject { padding-inline: var(--sp-16); }
  .ln-example-question { font-size: 1.16rem; }
  .ln-story-answer blockquote { font-size: 1.06rem; }
  .ln-example-foot { padding-inline: var(--sp-16); }
  .ln-section { padding-block: 4rem; }
  .ln-section-heading { align-items: start; gap: var(--sp-32); }
  .ln-section-heading > * { flex: 1; }
  .ln-steps { gap: var(--sp-24); }
  .ln-modes-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-32); }
  .ln-mode { padding: var(--sp-24); }
  .ln-pronunciation { flex-wrap: wrap; }
  .ln-pronunciation > div:nth-child(2) { flex: 1; }
  /* Under the text, past the 48px icon and its gap. */
  .ln-pronunciation > a { margin-left: calc(48px + var(--sp-16)); }
  .ln-purpose-grid { gap: var(--sp-32); }
  .ln-editorial-grid { gap: var(--sp-32); }
  .ln-purpose-statement { gap: var(--sp-16); }
  .ln-purpose-statement img { width: 43px; height: 74px; }
  .ln-faq-grid { gap: var(--sp-32); padding-top: var(--sp-48); }
  .ln-questions { padding-top: 0; }
  .ln-closing-inner { flex-direction: column; align-items: start; }
  .ln-foot-people { gap: var(--sp-48); }
}
@media (max-width: 660px) {
  /* A phone's page gutter is 16px, and the menu panel's inset matches it. */
  .ln-wrap { width: calc(100% - 2 * var(--sp-16)); }
  .ln-nav-inner { min-height: 72px; gap: var(--sp-8); }
  .ln-brand { font-size: 1.38rem; gap: var(--sp-8); }
  .ln-brand img { width: 30px; height: 30px; }
  .ln-nav .ln-beta { display: none; }
  .ln-nav-actions { gap: var(--sp-8); }
  .ln-nav-actions .ln-button { display: none; }
  .ln-links { padding-inline: var(--sp-16); }
  .ln-links .ln-links-demo { display: flex; }
  .ln-signin { font-size: var(--fs-13); }
  .ln-hero { padding-block: var(--sp-32) var(--sp-48); }
  .ln-hero-grid { grid-template-columns: 1fr; gap: var(--sp-32); }
  .ln-hero-copy { padding-block: 0; }
  .landing h1 { max-width: 11ch; font-size: clamp(3.2rem, 12vw, 4rem); margin-bottom: var(--sp-24); }
  .ln-lede { max-width: 28rem; font-size: 1.16rem; }
  .ln-hero-detail { font-size: 0.93rem; }
  .ln-hero-principle { display: none; }
  .ln-hero .ln-cta-row { margin-top: var(--sp-24); }
  .ln-example { max-width: 32rem; width: 100%; margin-inline: auto; }
  .ln-example-caption { padding: var(--sp-16); }
  .ln-answer-story { padding-inline: var(--sp-16); }
  .ln-example-subject { padding-inline: var(--sp-16); }
  .ln-example-question { font-size: var(--fs-20); }
  .ln-story-answer blockquote { font-size: 1.14rem; }
  .ln-section-heading { display: block; }
  .ln-section-heading > p { margin-top: var(--sp-16); }
  .ln-steps { grid-template-columns: 1fr; gap: var(--sp-32); margin-top: var(--sp-32); }
  /* The number sits level with the step's top padding. */
  .ln-steps > li { position: relative; padding-left: var(--sp-48); padding-top: var(--sp-16); }
  .ln-step-number { position: absolute; top: var(--sp-16); left: 0; }
  .ln-steps h3 { margin-bottom: var(--sp-8); }
  .ln-step-location { margin-top: var(--sp-16); }
  .ln-modes-grid, .ln-purpose-grid, .ln-evidence-grid, .ln-faq-grid, .ln-editorial-grid { grid-template-columns: 1fr; gap: var(--sp-32); }
  .ln-modes-intro > p { max-width: 100%; }
  .ln-pronunciation { align-items: start; gap: var(--sp-16); }
  .ln-speech-icon { width: 40px; height: 40px; }
  .ln-pronunciation > a { margin-left: calc(40px + var(--sp-16)); }
  .ln-purpose-statement { gap: var(--sp-24); }
  .ln-purpose-statement h2 { max-width: 14ch; }
  .ln-purpose-statement img { width: 54px; height: 92px; }
  .ln-stage { margin-bottom: var(--sp-16); }
  .ln-foot-top { flex-direction: column; gap: var(--sp-24); margin-bottom: var(--sp-24); }
  .ln-foot-people { grid-template-columns: 1fr; gap: var(--sp-24); }
}
/* The narrowest phones keep the 16px gutter and win their room back from the
   controls instead. */
@media (max-width: 360px) {
  /* Only the word goes; the icon stays, in a square 44px button. (".ln-menu
     span" used to hide the icon's span too and left the button empty.) */
  .ln-menu { min-width: 44px; justify-content: center; padding-inline: var(--sp-8); }
  .ln-menu > span:not(.ln-menu-icon) { display: none; }
  .ln-button { padding-inline: 0.75rem; font-size: var(--fs-13); }
  .ln-hero .ln-cta-row > a { width: 100%; }
  .ln-example-caption { font-size: var(--fs-13); }
  .ln-answer-story > li { padding-left: var(--sp-24); }
}

/* Where a section link landed (landing.js): the heading holds the accent for a
   moment and eases back to its own colour. */
@keyframes ln-arrive { 0%, 35% { color: var(--c-accent-ink); } }
@media (prefers-reduced-motion: no-preference) { .ln-arrived { animation: ln-arrive 1.8s ease-out; } }