/* SayAble landing page.
   Layers on top of styles.css — same tokens, same palette, same buttons — so the
   marketing page and the product are visibly one thing. Nothing here redefines a
   colour; everything reads from the variables in styles.css. */

.landing { background: var(--bg); }

/* styles.css suppresses the default outline globally and re-adds a ring for
   buttons and fields. A marketing page is mostly links, so they need the same
   cue or keyboard users lose their place entirely. */
.landing a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
  border-radius: 6px;
}

.ln-wrap {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
.ln-narrow { max-width: 720px; }
.ln-center { text-align: center; }

/* ── Nav ───────────────────────────────────────────────────────────────── */

.ln-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in oklch, var(--card) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.ln-nav-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0.65rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.ln-brand {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
}
/* Links wrap to a second row rather than scrolling or hiding themselves. */
.ln-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  flex: 1;
  min-width: 0;
}
.ln-links a {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--fg-muted);
  text-decoration: none;
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
}
.ln-links a:hover { color: var(--fg); border-bottom-color: var(--c-grass); }
.ln-links a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); border-radius: 4px; }

.ln-nav-cta { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.ln-nav-cta .btn-quiet { text-decoration: none; }
.btn-sm { padding: 0.55rem 1.05rem; font-size: 0.9rem; --btn-lift: 3px; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.btn-block { width: 100%; }

@media (max-width: 900px) {
  .ln-links { order: 3; width: 100%; flex: none; }
  .ln-nav-cta { margin-left: auto; }
}

/* ── Sections ──────────────────────────────────────────────────────────── */

.ln-section { padding: clamp(3rem, 8vh, 5.5rem) 0; }
.ln-section-soft { background: var(--bg-soft); }
.ln-section h2 {
  font-size: clamp(1.5rem, 4.2vw, 2.1rem);
  line-height: 1.2;
  margin-bottom: 0.9rem;
}
.ln-sub { color: var(--fg-muted); margin: 0 0 2rem; }
.ln-body { font-size: 1.02rem; line-height: 1.65; margin: 0 0 1rem; }
.ln-eyebrow {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-grass);
  margin: 0 0 0.5rem;
}
.ln-center.ln-eyebrow + h2 { margin-bottom: 2.2rem; }

/* ── Hero ──────────────────────────────────────────────────────────────── */

.ln-hero { padding: clamp(2.5rem, 7vh, 4.5rem) 0 clamp(3rem, 8vh, 5rem); }
.ln-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.75rem, 5vw, 3.5rem);
  align-items: center;
}
.ln-hero-copy { min-width: 0; } /* grid child: let long words wrap, never overflow */
.ln-hero h1 {
  font-size: clamp(1.9rem, 5.4vw, 3rem);
  line-height: 1.12;
  margin-bottom: 1rem;
}
.ln-lede { font-size: clamp(1rem, 2.3vw, 1.12rem); line-height: 1.6; color: var(--fg-muted); margin: 0 0 1.6rem; }
.ln-cta-row { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.ln-center-row { justify-content: center; }
.ln-cta-note { font-size: 0.82rem; color: var(--fg-muted); margin: 0.9rem 0 0; }

@media (max-width: 860px) {
  .ln-hero-grid { grid-template-columns: 1fr; }
  .ln-mock { order: -1; }
}

/* ── Product mock ──────────────────────────────────────────────────────── */

.ln-mock {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  padding: 1.2rem;
  transform: rotate(-0.6deg);
}
@media (prefers-reduced-motion: reduce) { .ln-mock { transform: none; } }

.ln-mock-top { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; }
.ln-mock-stat { font-family: var(--font-head); font-weight: 900; font-size: 0.85rem; color: var(--fg-muted); white-space: nowrap; }
.ln-mock-prog { display: flex; gap: 4px; flex: 1; min-width: 0; }
.ln-mock-prog i {
  flex: 1;
  min-width: 0;
  height: 9px;
  border-radius: var(--r-pill);
  background: var(--bg-soft);
  box-shadow: inset 0 0 0 1px var(--border);
  overflow: hidden;
}
.ln-mock-prog b { display: block; height: 100%; background: var(--c-grass); border-radius: inherit; }
.ln-mock-eyebrow {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-sky);
  margin: 0 0 0.3rem;
}
.ln-mock-instruction { font-family: var(--font-head); font-weight: 700; font-size: 0.8rem; color: var(--fg-muted); margin: 0 0 0.5rem; }
.ln-mock-target { margin-bottom: 1.1rem; }
.ln-mock-target .word { font-size: clamp(0.95rem, 2.6vw, 1.15rem); }

.ln-mock-result { display: flex; align-items: center; gap: 1rem; }
.ln-mock-ring { position: relative; width: 78px; height: 78px; flex: none; }
.ln-mock-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ln-mock-ring .ring-fill { stroke: var(--c-grass); stroke-dasharray: 327; }
.ln-mock-score {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1.35rem;
}
.ln-mock-dims { display: grid; gap: 0.35rem; flex: 1; min-width: 0; }
.ln-mock-dim {
  display: grid;
  grid-template-columns: 1fr;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.68rem;
  color: var(--fg-muted);
}
.ln-mock-dim i {
  display: block;
  height: 7px;
  margin-top: 2px;
  background: var(--bg-soft);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.ln-mock-dim b { display: block; height: 100%; background: var(--c-sky); border-radius: inherit; }
.ln-mock-note { font-size: 0.8rem; color: var(--fg-muted); margin: 1rem 0 0; }
.ln-mock-note b { color: var(--fg); }

/* ── Quote ─────────────────────────────────────────────────────────────── */

.ln-quote {
  border-left: 4px solid var(--c-grass);
  padding: 0.2rem 0 0.2rem 1.1rem;
  margin-top: 1.8rem;
}
.ln-quote p {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  line-height: 1.35;
  margin: 0;
}

/* ── Grids ─────────────────────────────────────────────────────────────── */

.ln-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.ln-feature, .ln-aud, .ln-plan {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.35rem;
}
.ln-section-soft .ln-feature, .ln-section-soft .ln-plan { background: var(--card); }
.ln-ico { font-size: 1.7rem; line-height: 1; display: block; margin-bottom: 0.6rem; }
.ln-feature h3, .ln-aud h3, .ln-plan h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.ln-feature p { font-size: 0.92rem; line-height: 1.55; color: var(--fg-muted); margin: 0; }

.ln-aud ul, .ln-plan ul { list-style: none; margin: 0.8rem 0 1.1rem; padding: 0; }
.ln-aud li, .ln-plan li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 0.45rem;
}
.ln-aud li::before, .ln-plan li::before {
  content: "✓";
  position: absolute; left: 0;
  color: var(--c-grass);
  font-weight: 900;
}
.ln-aud-lift { box-shadow: var(--shadow-card); border-color: var(--border-strong); }
.ln-link {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--c-sky);
  text-decoration: none;
}
.ln-link:hover { text-decoration: underline; }
.ln-link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); border-radius: 4px; }

/* ── Steps ─────────────────────────────────────────────────────────────── */

.ln-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
  counter-reset: step;
}
.ln-steps li { position: relative; padding-top: 0.3rem; }
.ln-step-n {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--c-grass);
  color: oklch(1 0 0);
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1.05rem;
  margin-bottom: 0.7rem;
  box-shadow: 0 3px 0 var(--c-grass-deep);
}
.ln-steps h3 { font-size: 1.02rem; margin-bottom: 0.3rem; }
.ln-steps p { font-size: 0.92rem; line-height: 1.55; color: var(--fg-muted); margin: 0; }

/* ── Pricing ───────────────────────────────────────────────────────────── */

.ln-plans { align-items: start; }
.ln-plan { display: flex; flex-direction: column; position: relative; }
.ln-plan ul { flex: 1; }
.ln-plan-feature {
  border-color: var(--c-grass);
  box-shadow: 0 0 0 1px var(--c-grass), var(--shadow-card);
}
.ln-tag {
  position: absolute;
  top: -0.7rem; left: 1.35rem;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: oklch(1 0 0);
  background: var(--c-grass);
  border-radius: var(--r-pill);
  padding: 0.2rem 0.65rem;
}
.ln-price { margin: 0.2rem 0 0.1rem; }
.ln-price b { font-family: var(--font-head); font-weight: 900; font-size: 2rem; letter-spacing: -0.02em; }
.ln-price span { font-size: 0.85rem; color: var(--fg-muted); font-weight: 600; }
.ln-plan-for { font-size: 0.82rem; color: var(--fg-muted); margin: 0 0 0.3rem; }

/* ── Evidence ladder ───────────────────────────────────────────────────── */

.ln-ladder { list-style: none; margin: 1.6rem 0; padding: 0; counter-reset: rung; }
/* Two columns, and BOTH text children are pinned to column 2 — otherwise the
   third grid item auto-places into row 2 of the 28px counter column. */
.ln-ladder li {
  counter-increment: rung;
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: 0.85rem;
  row-gap: 0.15rem;
  align-items: start;
  padding: 0.8rem 0.9rem 0.8rem 0;
  border-top: 1px solid var(--border);
  opacity: 0.5;
}
.ln-ladder li::before {
  content: counter(rung);
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg-soft);
  box-shadow: inset 0 0 0 1px var(--border);
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 0.8rem;
}
.ln-ladder li b {
  grid-column: 2;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.98rem;
  line-height: 1.5;
}
/* Direct child only — the "You are here" chip lives inside the <b> and must not
   inherit the description's size and muted colour. */
.ln-ladder li > span {
  grid-column: 2;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--fg-muted);
}
.ln-ladder li.is-done { opacity: 1; }
.ln-ladder li.is-done::before {
  content: "✓";
  background: color-mix(in oklch, var(--c-grass) 24%, transparent);
  color: var(--c-grass-deep);
}
.ln-ladder li.is-now {
  opacity: 1;
  background: color-mix(in oklch, var(--c-gold) 12%, transparent);
  border-radius: var(--r-sm);
  border-top-color: transparent;
  padding-left: 0.9rem;
}
.ln-ladder li.is-now::before {
  background: var(--c-gold);
  box-shadow: none;
  color: var(--ink-on-bright);
}
.ln-here {
  display: inline-block;
  margin-left: 0.4rem;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-on-bright);
  background: var(--c-gold);
  border-radius: var(--r-pill);
  padding: 0.1rem 0.5rem;
  vertical-align: 1px;
}

/* ── Promise box ───────────────────────────────────────────────────────── */

.ln-promise {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.3rem;
  margin-top: 1.8rem;
}
.ln-promise h3 { font-size: 1rem; margin-bottom: 0.6rem; }
.ln-promise ul { list-style: none; margin: 0; padding: 0; }
.ln-promise li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.92rem;
  line-height: 1.5;
  margin-bottom: 0.4rem;
}
.ln-promise li::before { content: "✕"; position: absolute; left: 0; color: var(--c-berry); font-weight: 900; }

/* ── FAQ (native disclosure — no JS) ───────────────────────────────────── */

.ln-faq { display: grid; gap: 0.6rem; margin-top: 1.6rem; }
.ln-faq details {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0.2rem 1rem;
}
.ln-faq summary {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.98rem;
  padding: 0.85rem 1.8rem 0.85rem 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.ln-faq summary::-webkit-details-marker { display: none; }
/* The +/− is drawn from two bars rather than typed as a glyph: `content` can't be
   transitioned, and a rotated "–" is indistinguishable from an unrotated one. Two
   boxes rotate into each other, which actually moves and is font-independent. */
.ln-faq summary::before,
.ln-faq summary::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 14px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--c-grass);
}
.ln-faq summary::before { transform: translateY(-50%); }
.ln-faq summary::after { transform: translateY(-50%) rotate(90deg); }
/* Open: the upright bar folds onto the flat one, making a minus. */
.ln-faq details[open] summary::after { transform: translateY(-50%) rotate(0deg); }
.ln-faq summary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); border-radius: 6px; }
.ln-faq p { font-size: 0.94rem; line-height: 1.6; color: var(--fg-muted); margin: 0 0 1rem; }

/* ── Closing band ──────────────────────────────────────────────────────── */

.ln-band {
  padding: clamp(3rem, 9vh, 5rem) 0;
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  text-align: center;
}
.ln-band h2 { font-size: clamp(1.6rem, 5vw, 2.4rem); margin-bottom: 0.7rem; }
.ln-band-lede { max-width: 46ch; margin-left: auto; margin-right: auto; }

/* ══ Motion ════════════════════════════════════════════════════════════════
   Hidden states are scoped under .js-motion, which landing.js only adds when
   motion is allowed. No JS, or reduced motion → nothing is ever hidden.
   styles.css already neutralises every animation/transition under
   prefers-reduced-motion, so this whole block goes quiet there too. */

/* Sticky nav would otherwise cover the heading you jumped to. */
html { scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ── Scroll reveals ────────────────────────────────────────────────────── */

.js-motion [data-reveal] {
  opacity: 0;
  transform: translateY(clamp(10px, 2.2vh, 26px));
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}
.js-motion [data-reveal].is-in { opacity: 1; transform: none; }

.js-motion [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(clamp(8px, 1.8vh, 20px));
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}
.js-motion [data-reveal-group].is-in > * { opacity: 1; transform: none; }
/* Uneven increments — an even cadence reads mechanical. */
.js-motion [data-reveal-group].is-in > *:nth-child(1) { transition-delay: 0ms; }
.js-motion [data-reveal-group].is-in > *:nth-child(2) { transition-delay: 70ms; }
.js-motion [data-reveal-group].is-in > *:nth-child(3) { transition-delay: 135ms; }
.js-motion [data-reveal-group].is-in > *:nth-child(4) { transition-delay: 205ms; }
.js-motion [data-reveal-group].is-in > *:nth-child(5) { transition-delay: 260ms; }
.js-motion [data-reveal-group].is-in > *:nth-child(6) { transition-delay: 340ms; }
.js-motion [data-reveal-group].is-in > *:nth-child(7) { transition-delay: 395ms; }
.js-motion [data-reveal-group].is-in > *:nth-child(8) { transition-delay: 465ms; }

/* ── Ambient drift behind the hero ─────────────────────────────────────── */

.ln-hero { position: relative; overflow: hidden; }
.ln-hero-grid { position: relative; z-index: 1; }

.ln-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ln-aurora i {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.45;
  will-change: transform;
}
/* Sized in viewport units so it tracks the hero at any width. */
.ln-aurora i:nth-child(1) {
  width: 46vw; height: 46vw;
  min-width: 320px; min-height: 320px;
  top: -16%; right: -8%;
  background: radial-gradient(circle, color-mix(in oklch, var(--c-grass) 42%, transparent), transparent 68%);
  animation: drift-a 26s ease-in-out infinite;
}
.ln-aurora i:nth-child(2) {
  width: 38vw; height: 38vw;
  min-width: 260px; min-height: 260px;
  bottom: -20%; left: -10%;
  background: radial-gradient(circle, color-mix(in oklch, var(--c-sky) 38%, transparent), transparent 68%);
  animation: drift-b 34s ease-in-out infinite;
}
/* Coprime-ish periods, so the pair never visibly repeats. */
@keyframes drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-4vw, 3vh, 0) scale(1.08); }
}
@keyframes drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(3vw, -4vh, 0) scale(1.12); }
}
@media (prefers-color-scheme: dark) {
  .ln-aurora i { opacity: 0.3; }
}

/* ── Hero demo: level meter ────────────────────────────────────────────── */

.ln-mock-meter {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--bg-soft);
  border-radius: var(--r-sm);
  padding: 0.4rem 0.7rem;
  margin-bottom: 1.1rem;
}
.ln-mock-bars { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; height: 22px; }
.ln-mock-bars i {
  flex: 1;
  min-width: 0;
  height: 18%;
  border-radius: var(--r-pill);
  background: var(--fg-muted);
  opacity: 0.3;
  transition: height 0.25s ease, background 0.25s ease, opacity 0.25s ease;
}
.ln-mock-meter.is-live .ln-mock-bars i {
  background: var(--c-berry);
  opacity: 1;
  animation: vu var(--d, 0.8s) ease-in-out var(--dl, 0s) infinite;
}
@keyframes vu {
  0%, 100% { height: 18%; }
  50%      { height: var(--h, 70%); }
}
/* Per-bar period, phase and peak — otherwise it pulses as one block. */
.ln-mock-bars i:nth-child(1)  { --d: 0.74s; --dl: 0.00s; --h: 52%; }
.ln-mock-bars i:nth-child(2)  { --d: 0.91s; --dl: 0.07s; --h: 78%; }
.ln-mock-bars i:nth-child(3)  { --d: 0.66s; --dl: 0.13s; --h: 40%; }
.ln-mock-bars i:nth-child(4)  { --d: 1.02s; --dl: 0.04s; --h: 92%; }
.ln-mock-bars i:nth-child(5)  { --d: 0.79s; --dl: 0.19s; --h: 61%; }
.ln-mock-bars i:nth-child(6)  { --d: 0.88s; --dl: 0.02s; --h: 100%; }
.ln-mock-bars i:nth-child(7)  { --d: 0.70s; --dl: 0.16s; --h: 47%; }
.ln-mock-bars i:nth-child(8)  { --d: 0.96s; --dl: 0.10s; --h: 84%; }
.ln-mock-bars i:nth-child(9)  { --d: 0.63s; --dl: 0.22s; --h: 36%; }
.ln-mock-bars i:nth-child(10) { --d: 0.85s; --dl: 0.05s; --h: 72%; }
.ln-mock-bars i:nth-child(11) { --d: 1.05s; --dl: 0.14s; --h: 58%; }
.ln-mock-bars i:nth-child(12) { --d: 0.72s; --dl: 0.09s; --h: 88%; }
.ln-mock-bars i:nth-child(13) { --d: 0.93s; --dl: 0.18s; --h: 44%; }
.ln-mock-bars i:nth-child(14) { --d: 0.68s; --dl: 0.01s; --h: 66%; }

.ln-mock-meter-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  color: var(--fg-muted);
  white-space: nowrap;
}
.ln-mock-meter.is-live .ln-mock-meter-label { color: var(--c-berry); font-weight: 700; }

/* ── Hero demo: words landing, score resolving ─────────────────────────── */

.ln-mock-target .word { transition: background 0.3s ease; }
.word.is-landing { animation: land 0.42s var(--ease-spring); }
@keyframes land {
  0%   { transform: translateY(3px) scale(0.94); }
  60%  { transform: translateY(0) scale(1.06); }
  100% { transform: none; }
}

.ln-mock-note { transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
.ln-mock-note.is-hidden { opacity: 0; transform: translateY(4px); }

.ln-mock-dim b { transition: width 0.7s var(--ease-out); }
.ln-mock-ring { transition: transform 0.5s var(--ease-spring); }
.ln-mock.is-scored .ln-mock-ring { transform: scale(1.03); }

/* ── Nav states ────────────────────────────────────────────────────────── */

.ln-nav { transition: box-shadow 0.25s ease; }
.ln-nav.is-lifted { box-shadow: 0 6px 22px oklch(0 0 0 / 0.07); }
@media (prefers-color-scheme: dark) {
  .ln-nav.is-lifted { box-shadow: 0 6px 22px oklch(0 0 0 / 0.35); }
}
.ln-links a { transition: color 0.2s ease, border-bottom-color 0.2s ease; }
.ln-links a.is-current { color: var(--fg); border-bottom-color: var(--c-grass); }

/* ── Card hover ────────────────────────────────────────────────────────── */

/* Hover belongs to the card, not its contents. Transforming the icon grew its own
   bounding box and collided with the heading below it — so the icon holds still
   and the card does the work. */
.ln-feature, .ln-aud, .ln-plan {
  position: relative;
  transition: transform 0.24s var(--ease-out), box-shadow 0.24s var(--ease-out),
              border-color 0.24s ease, background 0.24s ease;
}
/* Only these two clip: .ln-plan must NOT, or it cuts off the tag that sits
   deliberately outside its top edge. */
.ln-feature, .ln-aud { overflow: hidden; }

.ln-feature:hover, .ln-aud:hover, .ln-plan:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  border-color: var(--border-strong);
}

/* A hairline wipes across the top edge, clipped to the card's own radius. */
.ln-feature::after, .ln-aud::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--c-grass);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.36s var(--ease-out);
}
.ln-feature:hover::after, .ln-aud:hover::after { transform: scaleX(1); }

/* Barely-there warmth, mixed from the card colour so it holds in both themes. */
.ln-feature:hover, .ln-aud:hover {
  background: color-mix(in oklch, var(--card) 96%, var(--c-grass));
}
.ln-plan-feature:hover { border-color: var(--c-grass); }

.set-card, .ln-step-n { transition: transform 0.22s var(--ease-out); }
.ln-steps li:hover .ln-step-n { transform: translateY(-2px) scale(1.06); }

/* ── Small accents ─────────────────────────────────────────────────────── */

.ln-here { animation: chip-pulse 2.8s ease-in-out infinite; }
@keyframes chip-pulse {
  0%, 100% { transform: none; }
  50%      { transform: translateY(-1px) scale(1.04); }
}

/* The panel itself animates open. A <details> normally snaps to full height, which
   is why only the icon appeared to move. ::details-content + interpolate-size make
   the height interpolable; `interpolate-size` is scoped to .ln-faq (it inherits) so
   nothing else on the page changes behaviour.
   Browsers without ::details-content (currently non-Chromium) simply snap open as
   before — the icon still animates there, so nothing looks broken. */
.ln-faq { interpolate-size: allow-keywords; }
.ln-faq details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.38s var(--ease-out),
              content-visibility 0.38s allow-discrete;
}
.ln-faq details[open]::details-content { block-size: auto; }

/* Text drifts in just behind the height, so the panel doesn't feel like a curtain. */
.ln-faq details[open] p { animation: faq-in 0.4s var(--ease-out) 0.06s both; }
@keyframes faq-in {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

.ln-faq summary::before, .ln-faq summary::after {
  transition: transform 0.34s var(--ease-spring), background 0.2s ease;
}
.ln-faq summary:hover::before, .ln-faq summary:hover::after { background: var(--c-grass-deep); }

/* ── Footer ────────────────────────────────────────────────────────────── */

.ln-foot { border-top: 1px solid var(--border); padding: 2rem 0 2.5rem; background: var(--card); }
.ln-foot-grid {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 1.4rem;
}
.ln-foot-brand { margin: 0 0 0.2rem; }
.ln-foot-note { font-size: 0.88rem; color: var(--fg-muted); margin: 0; }
.ln-foot nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; align-content: flex-start; }
.ln-foot nav a {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--fg-muted);
  text-decoration: none;
}
.ln-foot nav a:hover { color: var(--fg); }
.ln-foot-small {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.7;
  color: var(--fg-muted);
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  margin: 0;
}