/* Native card stacking: scroll position controls overlap, with no timed travel. */
html.lx-chapter-scroll.overview-scrolling { scroll-snap-type: none !important; }
[data-lx] #how { isolation: isolate; }
@media (min-width:1100px) {
  [data-lx] #how.overview-wide { padding-block: 64px !important; }
  [data-lx] #how.overview-wide > div { gap: 36px !important; }
  [data-lx] #how.overview-wide > div > div:first-child { max-width: 840px !important; gap: 14px !important; }
  [data-lx] #how.overview-wide h2 { font-size: clamp(38px,3.6vw,52px) !important; }
  [data-lx] #how.overview-wide .lx-case-chapters {
    display: grid !important; grid-template-columns: minmax(0,1fr) !important;
    gap: 64px !important; align-items: start; padding: 0; margin: 0 !important;
  }
  [data-lx] #how.overview-wide .lx-case-chapter,
  [data-lx] #how.overview-wide .lx-case-chapter:last-child {
    display: grid !important; grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr);
    grid-template-rows: auto 1fr auto; align-items: start; align-content: start;
    column-gap: clamp(32px,4vw,64px) !important; row-gap: 20px !important;
    padding: clamp(28px,3vw,40px) !important; box-sizing: border-box;
    border: 1px solid var(--border) !important; border-radius: 20px !important;
    background: var(--surface) !important; position: relative;
    box-shadow: 0 16px 48px rgb(20 16 40 / .07) !important;
    opacity: 1; transform: none;
  }
  [data-lx] #how.overview-wide .lx-case-chapter:nth-child(2) {
    background: color-mix(in srgb,var(--surface) 92%,var(--accent) 8%) !important;
  }
  [data-lx] #how.overview-wide .lx-case-chapter:nth-child(3) {
    background: color-mix(in srgb,var(--surface) 95%,var(--accent) 5%) !important;
  }
  [data-lx] #how.overview-wide .lx-case-heading {
    grid-column: 1; grid-row: 1; display: flex !important; flex-direction: column;
    align-items: flex-start !important; gap: 24px !important;
  }
  [data-lx] #how.overview-wide .lx-case-heading > span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 36px; border: 1px solid var(--border-strong); border-radius: 999px;
    font: 500 12px/1 'JetBrains Mono',monospace !important; color: var(--accent-text) !important;
  }
  [data-lx] #how.overview-wide .lx-case-heading h3 {
    max-width: 11em; font: 500 clamp(32px,3vw,42px)/1.08 Newsreader,Georgia,serif !important;
    letter-spacing: -.025em;
  }
  [data-lx] #how.overview-wide .lx-case-intro {
    grid-column: 1; grid-row: 2; max-width: 28em;
    font-size: 16px !important; line-height: 1.65 !important;
  }
  [data-lx] #how.overview-wide .lx-case-evidence {
    grid-column: 2; grid-row: 1 / span 3; align-self: start;
    width: 100%; padding: 20px !important; gap: 12px !important;
    border-radius: 12px !important; box-shadow: 0 8px 24px rgb(20 16 40 / .04);
  }
  [data-lx] #how.overview-wide .lx-case-chapter > button {
    grid-column: 1; grid-row: 3; align-self: end; min-height: 44px; line-height: 1.5;
  }
  [data-lx] #how.overview-wide .lx-case-evidence figcaption {
    font: 400 12px/1.45 'DM Sans',sans-serif !important;
  }
  [data-lx] #how.overview-stack-ready .lx-case-chapters {
    padding-bottom: 0 !important;
  }
  [data-lx] #how.overview-stack-ready .lx-case-chapters::after {
    content: ''; display: block; height: clamp(120px,24vh,240px);
  }
  [data-lx] #how.overview-stack-ready .lx-case-chapter,
  [data-lx] #how.overview-stack-ready .lx-case-chapter:last-child {
    position: sticky; top: calc(var(--overview-top) + var(--stack-index) * 24px);
    z-index: calc(1 + var(--stack-index)); height: var(--stack-card-height);
    scroll-margin-top: calc(var(--overview-top) + 64px);
  }
  [data-lx] #how.overview-stack-ready .lx-case-chapter:has(:focus-visible) { z-index: 5; }
  [data-lx] #how.overview-wide > div > div:last-child { position: relative; z-index: 6; }
}
@media (prefers-reduced-motion:reduce) {
  [data-lx] #how.overview-wide .lx-case-chapter { position: relative; height: auto; }
  [data-lx] #how.overview-wide .lx-case-chapters { padding-bottom: 0; }
}

/* Compact panels keep the same scroll-driven handoff on phones and tablets.
   JS uses a negative sticky inset when a card is taller than the viewport. */
@media (max-width:1099px) {
  [data-lx] #how .lx-case-chapters {
    display: grid !important; grid-template-columns: minmax(0,1fr) !important;
    gap: 32px !important; margin: 0 !important; padding: 0 !important;
    align-items: start;
  }
  [data-lx] #how .lx-case-chapter,
  [data-lx] #how .lx-case-chapter:first-child,
  [data-lx] #how .lx-case-chapter:last-child {
    display: flex !important; flex-direction: column !important;
    gap: 18px !important; min-width: 0; box-sizing: border-box;
    padding: clamp(18px,4vw,32px) !important;
    border: 1px solid var(--border) !important; border-radius: 18px !important;
    background: var(--surface) !important;
    box-shadow: 0 12px 36px rgb(20 16 40 / .08) !important;
    opacity: 1 !important; transform: none !important; transition: none !important;
    overflow-wrap: anywhere;
  }
  [data-lx] #how .lx-case-chapter:nth-child(2) {
    background: color-mix(in srgb,var(--surface) 92%,var(--accent) 8%) !important;
  }
  [data-lx] #how .lx-case-chapter:nth-child(3) {
    background: color-mix(in srgb,var(--surface) 95%,var(--accent) 5%) !important;
  }
  [data-lx] #how .lx-case-heading { gap: 12px !important; align-items: center !important; }
  [data-lx] #how .lx-case-heading h3 {
    font-size: clamp(24px,5.6vw,32px) !important; line-height: 1.15 !important;
  }
  [data-lx] #how .lx-case-evidence {
    width: 100%; min-width: 0; box-sizing: border-box;
    padding: clamp(12px,3vw,20px) !important;
  }
  [data-lx] #how .lx-case-evidence figcaption {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  }
  [data-lx] #how .lx-case-evidence button,
  [data-lx] #how .lx-case-chapter > button { min-height: 44px; }
  [data-lx] #how.overview-stack-ready .lx-case-chapter,
  [data-lx] #how.overview-stack-ready .lx-case-chapter:last-child {
    position: sticky; top: var(--card-stack-top);
    z-index: calc(1 + var(--stack-index));
  }
  [data-lx] #how.overview-stack-ready .lx-case-chapters::after {
    content: ''; display: block; height: clamp(80px,16svh,160px);
  }
  [data-lx] #how > div > div:last-child { position: relative; z-index: 6; }
}
/* Short desktop windows use natural card heights with the same read-then-stack inset. */
[data-lx] #how.overview-stack-ready .lx-case-chapter[style*="--card-stack-top"] {
  top: var(--card-stack-top); height: auto;
}
[data-lx] #how.overview-stack-ready .lx-case-chapter:has(:focus-visible) { z-index: 5; }
@media (prefers-reduced-motion:reduce) {
  [data-lx] #how .lx-case-chapter,
  [data-lx] #how .lx-case-chapter:last-child { position: relative !important; height: auto !important; }
}

/* Reading dwell: leave a deliberate scroll interval after a card's bottom is
   visible, before the next card starts covering it. Native scrolling keeps
   touch inertia and reverse travel continuous, with no timed disappearance. */
[data-lx] #how.overview-stack-ready .lx-case-chapters {
  gap: clamp(144px,30svh,320px) !important;
}
[data-lx] #how.overview-stack-ready .lx-case-chapters::after {
  height: clamp(220px,42svh,460px);
}

/* Keep the previous step's title readable above the current panel. */
[data-lx] .lx-overview-previous {
  position: fixed; z-index: 90; pointer-events: none; box-sizing: border-box;
  display: flex; align-items: center; gap: 12px; min-height: 64px;
  padding: 14px clamp(18px,3vw,40px); border: 1px solid var(--border);
  border-radius: 18px 18px 0 0; color: var(--text);
  font: 500 clamp(22px,4.8vw,30px)/1.2 Newsreader,Georgia,serif;
  box-shadow: 0 -8px 20px rgb(20 16 40 / .04);
}
[data-lx] .lx-overview-previous[hidden] { display: none; }
[data-lx] .lx-overview-previous > span:first-child { color: var(--accent-text); flex-shrink: 0; }
@media (min-width:1100px) {
  [data-lx] #how.overview-stack-ready .lx-case-chapter:not(:first-child):not([style*="--card-stack-top"]) {
    top: calc(var(--overview-top) + 64px);
  }
}

@media (min-width:1100px) {
  [data-lx] #how.overview-stack-ready .lx-case-chapters {
    gap: var(--desktop-stack-gap,clamp(144px,30svh,320px)) !important;
  }
}