/* LAKANA emergency-management reviewer surfaces.
   Every selector in this sheet is namespaced under the ler- prefix so that it
   can never reach the global navigation identities repaired in the global
   secondary-menu pass, nor the lav2- / lpl- / lwx- / sos- namespaces owned by
   architecture.html, proof-library.html, the W-X flagship pages, and the SOS
   surfaces. There are deliberately no element-level (header/nav/main/a/button)
   rules here: this sheet is additive on every page that loads it. */

.ler-scope {
  --ler-navy: #0A1625;
  --ler-deep: #06111F;
  --ler-component: #162A45;
  --ler-slate: #345275;
  --ler-teal: #0D7377;
  --ler-cyan: #46D6D1;
  --ler-gold: #CF9D2A;
  --ler-nicole: #7244C4;
  --ler-danger: #9E2F2F;
  --ler-paper: #F4F6F9;
  --ler-ink: #081322;
  --ler-muted: #5C6B7E;
  --ler-line: rgba(8, 19, 34, .14);
  --ler-on-dark: #EAF4F4;
  --ler-on-dark-muted: rgba(234, 244, 244, .82);
  --ler-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* The reviewer surfaces must carry LAKANA's typeface, not the browser's
     default serif. Every other LAKANA page declares this stack inline; the
     gateway has no page-level stylesheet of its own, so it is declared here
     and inherited by the ler- components wherever they are hosted. */
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.ler-scope { margin: 0; color: var(--ler-ink); background: linear-gradient(180deg, #F7FAFC, #EEF3F7 46%, #FBFCFE); }
.ler-scope *, .ler-scope *::before, .ler-scope *::after { box-sizing: border-box; }

/* ---------- shared primitives ---------- */
.ler-shell { max-width: 1240px; margin: 0 auto; padding: 0 22px; }
.ler-eyebrow {
  display: block; margin: 0 0 10px;
  font-family: var(--ler-mono);
  font-size: .7rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ler-teal);
}
.ler-eyebrow.on-dark { color: var(--ler-cyan); }
.ler-lede { max-width: 74ch; color: var(--ler-muted); line-height: 1.7; font-size: 1rem; }
.ler-section { padding: 44px 0; }
.ler-section-head { max-width: 82ch; margin: 0 0 22px; }
.ler-section-head h2 {
  margin: 0 0 10px; font-size: clamp(1.5rem, 3.1vw, 2.15rem);
  line-height: 1.15; letter-spacing: -.035em; color: var(--ler-ink);
}
.ler-section-head p { margin: 0; color: var(--ler-muted); line-height: 1.7; }

/* ---------- reviewer hero menu (homepage + gateway) ---------- */
.ler-review-menu { display: grid; gap: 14px; margin: 0; padding: 0; }
.ler-review-menu-primary { display: grid; gap: 14px; }
.ler-review-menu-supporting {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
}

.ler-review-card {
  display: block; position: relative;
  min-height: 44px; padding: 20px 22px;
  border: 1px solid var(--ler-line);
  border-left: 7px solid var(--ler-slate);
  border-radius: 20px;
  background: #fff;
  color: var(--ler-ink);
  text-decoration: none;
  box-shadow: 0 14px 36px rgba(10, 22, 37, .07);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.ler-review-card .ler-review-rank {
  display: block; margin: 0 0 6px;
  font-family: var(--ler-mono); font-size: .64rem; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ler-muted);
}
.ler-review-card .ler-review-name {
  display: block; margin: 0 0 7px;
  font-size: 1.16rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.25;
}
.ler-review-card .ler-review-desc {
  display: block; margin: 0; color: var(--ler-muted);
  font-size: .9rem; line-height: 1.6; font-weight: 500;
}
.ler-review-card:hover,
.ler-review-card:focus-visible { transform: translateY(-2px); box-shadow: 0 20px 46px rgba(10, 22, 37, .13); }
.ler-review-card:focus-visible { outline: 3px solid var(--ler-gold); outline-offset: 3px; }

/* The dominant institutional gateway. Hierarchy, not hype: it is larger and
   carries the dark sovereign surface, while the supporting routes stay fully
   legible and obviously live rather than deprecated. */
.ler-review-card.is-gateway {
  border-color: rgba(70, 214, 209, .28);
  border-left-color: var(--ler-cyan);
  padding: 26px 26px 28px;
  background:
    radial-gradient(circle at 6% -30%, rgba(13, 115, 119, .42), transparent 22rem),
    radial-gradient(circle at 98% 0%, rgba(114, 68, 196, .22), transparent 18rem),
    linear-gradient(135deg, var(--ler-navy), var(--ler-component));
  color: var(--ler-on-dark);
  box-shadow: 0 26px 62px rgba(10, 22, 37, .3);
}
.ler-review-card.is-gateway .ler-review-rank { color: var(--ler-cyan); }
.ler-review-card.is-gateway .ler-review-name { font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
.ler-review-card.is-gateway .ler-review-desc { color: var(--ler-on-dark-muted); font-size: .95rem; }
.ler-review-card.is-gateway:focus-visible { outline-color: var(--ler-gold); }

.ler-review-card.is-featured { border-left-color: var(--ler-gold); }
.ler-review-card.is-featured .ler-review-name { font-size: clamp(1.2rem, 2.2vw, 1.45rem); }
.ler-review-card.is-wx { border-left-color: var(--ler-teal); }
.ler-review-card.is-wxag { border-left-color: var(--ler-cyan); }
.ler-review-card.is-architecture { border-left-color: var(--ler-slate); }
.ler-review-card.is-proof { border-left-color: var(--ler-nicole); }

.ler-review-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ler-review-links .ler-subroute {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--ler-line); border-radius: 999px;
  background: var(--ler-paper); color: var(--ler-ink);
  font-size: .82rem; font-weight: 800; text-decoration: none;
}
.ler-review-links .ler-subroute:hover { border-color: rgba(13, 115, 119, .45); background: rgba(13, 115, 119, .08); }
.ler-review-links .ler-subroute:focus-visible { outline: 3px solid var(--ler-gold); outline-offset: 3px; }

/* ---------- gateway hero ---------- */
.ler-hero {
  padding: 40px 0 34px;
  background:
    radial-gradient(circle at 10% -10%, rgba(13, 115, 119, .34), transparent 30rem),
    radial-gradient(circle at 92% 0%, rgba(114, 68, 196, .18), transparent 24rem),
    linear-gradient(160deg, var(--ler-navy), var(--ler-component) 62%, var(--ler-deep));
  color: var(--ler-on-dark);
  border-bottom: 5px solid var(--ler-teal);
}
.ler-hero-identity {
  margin: 0 0 6px; font-family: var(--ler-mono);
  font-size: .74rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ler-cyan);
}
.ler-hero h1 {
  margin: 0 0 14px; max-width: 20ch;
  font-size: clamp(2.05rem, 6vw, 3.9rem); line-height: 1.02; letter-spacing: -.045em;
  color: #fff;
}
.ler-hero-copy { max-width: 68ch; margin: 0 0 20px; color: var(--ler-on-dark-muted); line-height: 1.7; font-size: 1.02rem; }
.ler-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ler-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 20px; border-radius: 999px;
  font-weight: 850; font-size: .92rem; text-decoration: none;
  border: 1.4px solid rgba(70, 214, 209, .4); background: rgba(255, 255, 255, .06); color: #fff;
}
.ler-btn.is-primary { background: linear-gradient(135deg, var(--ler-teal), #0FA3A8); border-color: rgba(70, 214, 209, .7); }
.ler-btn.is-gold { border-color: rgba(207, 157, 42, .72); color: #F5DFA4; }
.ler-btn:hover { background: rgba(255, 255, 255, .13); }
.ler-btn:focus-visible { outline: 3px solid var(--ler-gold); outline-offset: 3px; }

/* ---------- maturity strip ---------- */
.ler-maturity-strip {
  display: grid; gap: 10px; margin: 22px 0 0;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.ler-maturity-strip > div {
  padding: 13px 15px; border-radius: 14px;
  border: 1px solid rgba(70, 214, 209, .22);
  background: rgba(255, 255, 255, .05);
  min-width: 0;
}
.ler-maturity-strip b {
  display: block; margin-bottom: 5px;
  font-family: var(--ler-mono); font-size: .64rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ler-cyan);
}
.ler-maturity-strip span { display: block; color: var(--ler-on-dark); font-size: .87rem; line-height: 1.5; font-weight: 650; }

/* ---------- maturity ladder ---------- */
.ler-maturity-ladder { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.ler-maturity-ladder > li {
  display: grid; gap: 4px 18px; align-items: baseline;
  grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
  padding: 14px 18px; border: 1px solid var(--ler-line);
  border-left: 6px solid var(--ler-slate); border-radius: 14px; background: #fff;
}
.ler-maturity-ladder .ler-rung-name {
  font-family: var(--ler-mono); font-size: .74rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ler-ink);
  overflow-wrap: anywhere;
}
.ler-maturity-ladder .ler-rung-state { font-size: .92rem; font-weight: 800; color: var(--ler-teal); }
.ler-maturity-ladder > li.is-next { border-left-color: var(--ler-gold); background: rgba(207, 157, 42, .07); }
.ler-maturity-ladder > li.is-next .ler-rung-state { color: #8A6415; }
.ler-maturity-ladder > li.is-open { border-left-color: var(--ler-danger); background: rgba(158, 47, 47, .05); }
.ler-maturity-ladder > li.is-open .ler-rung-state { color: var(--ler-danger); }

/* ---------- review depth paths ---------- */
.ler-path-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ler-path-card {
  display: flex; flex-direction: column; min-width: 0;
  padding: 22px; border: 1px solid var(--ler-line);
  border-top: 6px solid var(--ler-teal); border-radius: 20px; background: #fff;
  box-shadow: 0 14px 36px rgba(10, 22, 37, .07);
}
.ler-path-card.is-operational { border-top-color: var(--ler-gold); }
.ler-path-card.is-technical { border-top-color: var(--ler-nicole); }
.ler-path-card h3 { margin: 0 0 4px; font-size: 1.18rem; letter-spacing: -.02em; color: var(--ler-ink); }
.ler-path-card .ler-path-for { margin: 0 0 14px; color: var(--ler-muted); font-size: .88rem; line-height: 1.6; }
.ler-path-card ol { margin: 0; padding-left: 1.2em; display: grid; gap: 9px; }
.ler-path-card ol li { color: var(--ler-ink); font-size: .9rem; line-height: 1.55; }
.ler-path-card ol li a { color: var(--ler-teal); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.ler-path-card ol li a:focus-visible { outline: 3px solid var(--ler-gold); outline-offset: 3px; }
.ler-path-card ol li .ler-step-note { display: block; color: var(--ler-muted); font-size: .82rem; line-height: 1.5; margin-top: 2px; }

/* ---------- role lenses ---------- */
.ler-role-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); }
.ler-role-card {
  min-width: 0; padding: 20px; border: 1px solid var(--ler-line);
  border-radius: 18px; background: var(--ler-paper);
}
.ler-role-card h3 {
  margin: 0 0 8px; font-family: var(--ler-mono); font-size: .76rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ler-ink);
}
.ler-role-card ul { margin: 0 0 14px; padding-left: 1.05em; display: grid; gap: 5px; }
.ler-role-card ul li { color: var(--ler-muted); font-size: .86rem; line-height: 1.5; }
.ler-role-card .ler-role-routes { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- review questions ---------- */
.ler-question-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: lerq; }
.ler-question-list > li {
  position: relative; padding: 20px 22px 20px 66px;
  border: 1px solid var(--ler-line); border-radius: 18px; background: #fff;
  color: var(--ler-ink); line-height: 1.65; font-size: .98rem;
}
.ler-question-list > li::before {
  counter-increment: lerq; content: "Q" counter(lerq);
  position: absolute; left: 20px; top: 19px;
  font-family: var(--ler-mono); font-size: .76rem; font-weight: 800;
  letter-spacing: .06em; color: var(--ler-teal);
  border: 1px solid rgba(13, 115, 119, .32); border-radius: 8px;
  padding: 4px 7px; background: rgba(13, 115, 119, .08);
}
.ler-question-list > li ul { margin: 8px 0 0; padding-left: 1.1em; display: grid; gap: 4px; }
.ler-question-list > li ul li { color: var(--ler-muted); font-size: .89rem; line-height: 1.55; }

/* ---------- Full SOS Simulation vs Capstone Review ---------- */
/* This component is hosted on BOTH light and dark pages (the gateway is light;
   the SOS simulation and Capstone surfaces are dark). A light card that only
   sets its background inherits the host page's foreground -- which on the dark
   SOS page is a near-white heading token, rendering the heading almost
   invisible on this white card. Same defect class as the W-X Truth panel, in
   the opposite direction. So the card declares its own complete foreground
   rather than trusting whatever page it lands on. */
.ler-distinction {
  border: 1px solid var(--ler-line); border-radius: 22px;
  background: #fff; padding: 22px; box-shadow: 0 14px 36px rgba(10, 22, 37, .07);
  color: var(--ler-ink);
}
.ler-distinction h2,
.ler-distinction h3,
.ler-distinction h4 { color: var(--ler-ink); }
.ler-distinction p,
.ler-distinction li,
.ler-distinction dd { color: var(--ler-muted); }
.ler-distinction strong,
.ler-distinction b { color: var(--ler-ink); }
.ler-distinction a { color: var(--ler-teal); font-weight: 800; }
.ler-distinction a:hover,
.ler-distinction a:focus-visible { color: var(--ler-ink); }
.ler-distinction .ler-subroute { color: var(--ler-ink); }

/* Dark host variant. The Capstone surface locks its own section headings to
   white with !important as part of its contrast lock. Overriding that would
   mean either an !important war or weakening that lock, so the component
   adapts to the host instead: on a dark host it becomes a dark card, which is
   what makes the host's white heading correct rather than invisible. */
.ler-distinction.on-dark {
  background: linear-gradient(150deg, var(--ler-navy), var(--ler-component));
  border-color: rgba(70, 214, 209, .26);
  color: var(--ler-on-dark);
  box-shadow: 0 22px 52px rgba(6, 17, 31, .38);
}
.ler-distinction.on-dark h2,
.ler-distinction.on-dark h3,
.ler-distinction.on-dark h4 { color: #fff; }
.ler-distinction.on-dark p,
.ler-distinction.on-dark li,
.ler-distinction.on-dark dd { color: var(--ler-on-dark-muted); }
.ler-distinction.on-dark strong,
.ler-distinction.on-dark b { color: #fff; }
.ler-distinction.on-dark a { color: #7FE7DB; }
.ler-distinction.on-dark a:hover,
.ler-distinction.on-dark a:focus-visible { color: #fff; }
.ler-distinction.on-dark .ler-eyebrow { color: var(--ler-cyan); }
.ler-distinction.on-dark .ler-subroute { background: rgba(255, 255, 255, .94); color: var(--ler-ink); border-color: rgba(70, 214, 209, .34); }
.ler-distinction.on-dark .ler-subroute:hover { background: #fff; }
.ler-distinction-lede { margin: 0 0 16px; color: var(--ler-muted); line-height: 1.7; font-size: .96rem; }
.ler-distinction-pair { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(284px, 1fr)); }
.ler-distinction-card {
  min-width: 0; padding: 20px; border: 1px solid var(--ler-line);
  border-left: 7px solid var(--ler-gold); border-radius: 16px; background: var(--ler-paper);
}
.ler-distinction-card.is-capstone { border-left-color: var(--ler-nicole); }
.ler-distinction-card h3 { margin: 0 0 4px; font-size: 1.08rem; letter-spacing: -.02em; color: var(--ler-ink); }
.ler-distinction-card .ler-distinction-role {
  display: block; margin: 0 0 10px; font-family: var(--ler-mono);
  font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ler-muted);
}
.ler-distinction-card p { margin: 0 0 8px; color: var(--ler-muted); font-size: .88rem; line-height: 1.6; }
.ler-distinction-card dl { margin: 0 0 14px; display: grid; gap: 7px; }
.ler-distinction-card dt {
  font-family: var(--ler-mono); font-size: .62rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ler-teal);
}
.ler-distinction-card.is-capstone dt { color: #5D4A9C; }
.ler-distinction-card dd { margin: 2px 0 0; color: var(--ler-ink); font-size: .87rem; line-height: 1.55; }
.ler-distinction-card .ler-boundary {
  margin: 0 0 14px; padding: 10px 12px; border-left: 3px solid var(--ler-danger);
  background: rgba(158, 47, 47, .05); color: #7E2626; font-size: .84rem; font-weight: 700; line-height: 1.5;
}

/* ---------- cross-system relationship rail ---------- */
.ler-system-route { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ler-system-route > div {
  min-width: 0; padding: 18px; border: 1px solid var(--ler-line);
  border-radius: 16px; background: #fff;
}
.ler-system-route b {
  display: block; margin-bottom: 6px; font-family: var(--ler-mono);
  font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ler-teal);
}
.ler-system-route p { margin: 0 0 10px; color: var(--ler-muted); font-size: .87rem; line-height: 1.6; }
.ler-system-route .ler-dependency {
  display: inline-block; margin: 0 0 10px; padding: 4px 10px; border-radius: 999px;
  background: rgba(13, 115, 119, .1); border: 1px solid rgba(13, 115, 119, .28);
  color: #0B5457; font-family: var(--ler-mono); font-size: .66rem; font-weight: 800; letter-spacing: .06em;
}

/* ---------- non-claims ---------- */
.ler-nonclaim-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.ler-nonclaim-grid > div {
  min-width: 0; padding: 18px; border-radius: 16px;
  background: var(--ler-deep); color: var(--ler-on-dark);
  border: 1px solid rgba(70, 214, 209, .2);
}
.ler-nonclaim-grid b {
  display: block; margin-bottom: 7px; font-family: var(--ler-mono);
  font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ler-cyan);
}
.ler-nonclaim-grid span { display: block; color: var(--ler-on-dark-muted); font-size: .87rem; line-height: 1.6; }

/* ---------- compact contextual return rail ---------- */
.ler-return-rail {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 0; padding: 14px 0;
}
.ler-return-rail .ler-return-label {
  font-family: var(--ler-mono); font-size: .64rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ler-muted);
  margin-right: 4px;
}
.ler-return-rail a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--ler-line); border-radius: 999px;
  background: #fff; color: var(--ler-ink);
  font-size: .82rem; font-weight: 800; text-decoration: none;
}
.ler-return-rail a.is-primary { border-color: rgba(13, 115, 119, .5); background: rgba(13, 115, 119, .1); color: #0B5457; }
.ler-return-rail a:hover { border-color: rgba(13, 115, 119, .45); background: rgba(13, 115, 119, .08); }
.ler-return-rail a:focus-visible { outline: 3px solid var(--ler-gold); outline-offset: 3px; }

/* On dark host surfaces the rail inverts rather than inheriting page ink. */
.ler-return-rail.on-dark .ler-return-label { color: rgba(234, 244, 244, .7); }
.ler-return-rail.on-dark a { background: rgba(255, 255, 255, .07); border-color: rgba(70, 214, 209, .34); color: var(--ler-on-dark); }
.ler-return-rail.on-dark a.is-primary { background: rgba(13, 115, 119, .34); border-color: rgba(70, 214, 209, .6); color: #fff; }

/* ---------- gateway chrome ---------- */
.ler-topbar {
  position: sticky; top: 0; z-index: 60;
  background: linear-gradient(135deg, var(--ler-navy), var(--ler-component));
  border-bottom: 4px solid var(--ler-teal);
  box-shadow: 0 18px 44px rgba(10, 22, 37, .26);
}
.ler-topbar-inner {
  max-width: 1240px; margin: 0 auto; padding: 12px 22px;
  display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.ler-brand { display: flex; gap: 12px; align-items: center; color: #fff; text-decoration: none; min-height: 44px; }
.ler-brand-mark {
  width: 44px; height: 44px; min-width: 44px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--ler-teal), #0A4F66);
  border: 1.5px solid rgba(70, 214, 209, .4);
}
.ler-brand-mark svg { width: 26px; height: 26px; color: #fff; }
.ler-brand-name { display: block; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; font-size: .85rem; }
.ler-brand-sub { display: block; margin-top: 2px; color: rgba(255, 255, 255, .68); font-size: .72rem; }
.ler-topnav { display: flex; gap: 7px; flex-wrap: wrap; }
.ler-topnav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 13px;
  border: 1.2px solid rgba(70, 214, 209, .3); border-radius: 999px;
  background: rgba(255, 255, 255, .05); color: #fff;
  font-weight: 800; font-size: .8rem; text-decoration: none;
}
.ler-topnav a:hover { background: rgba(207, 157, 42, .16); border-color: rgba(207, 157, 42, .55); }
.ler-topnav a:focus-visible { outline: 3px solid var(--ler-gold); outline-offset: 3px; }

.ler-skip {
  position: absolute; left: -9999px; top: 0; z-index: 9999;
  background: var(--ler-navy); color: #fff; padding: 14px 18px;
  border-radius: 0 0 12px 0; font-weight: 900; text-decoration: none;
}
.ler-skip:focus { left: 0; }

.ler-footer { margin-top: 12px; padding: 26px 0 40px; border-top: 1px solid var(--ler-line); color: var(--ler-muted); }
.ler-footer strong { display: block; color: var(--ler-ink); letter-spacing: .06em; }
.ler-footer p { margin: 6px 0 0; font-size: .86rem; line-height: 1.6; }

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  .ler-shell { padding: 0 16px; }
  .ler-topbar-inner { padding: 10px 16px; }
  .ler-hero { padding: 28px 0 26px; }
  .ler-section { padding: 32px 0; }
  .ler-review-card { padding: 17px 18px; }
  .ler-review-card.is-gateway { padding: 20px 20px 22px; }
  .ler-maturity-ladder > li { grid-template-columns: 1fr; }
  .ler-question-list > li { padding: 18px 18px 18px 18px; }
  .ler-question-list > li::before { position: static; display: inline-block; margin-bottom: 8px; }
  .ler-btn { width: 100%; }
}
@media (max-width: 430px) {
  .ler-review-menu-supporting { grid-template-columns: 1fr; }
  /* Keep every route visible without JavaScript while reclaiming the vertical
     space the seven-pill rail was taking from the H1 above the fold. */
  .ler-topnav { gap: 6px; }
  /* Reclaim vertical space through padding and type size only. The 44px
     minimum target is a hard floor and is never traded for density. */
  .ler-topnav a { font-size: .74rem; padding: 6px 10px; min-height: 44px; }
  .ler-topbar-inner { padding: 8px 16px; gap: 10px; }
  .ler-brand-mark { width: 38px; height: 38px; min-width: 38px; border-radius: 12px; }
  .ler-brand-sub { display: none; }
  .ler-hero-identity { letter-spacing: .14em; font-size: .68rem; }
  .ler-hero-copy { font-size: .96rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ler-review-card { transition: none; }
  .ler-review-card:hover, .ler-review-card:focus-visible { transform: none; }
}

/* A destination GROUP rather than a single route: the card itself is not
   clickable (it holds two real anchors), so it must not pretend to be. It
   keeps the card geometry and drops the hover affordance. */
.ler-review-card.is-group { cursor: default; }
.ler-review-card.is-group:hover { transform: none; box-shadow: 0 14px 36px rgba(10, 22, 37, .07); }
.ler-review-card.is-group .ler-review-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }