/*
 * E-Commerce Store Evaluation landing page — page-scoped visual system.
 *
 * This stylesheet is imported only by src/pages/ecommerce-store-evaluation.astro.
 * Every class is `elp-` prefixed; every token is `--elp-` prefixed. No global
 * site token, stylesheet, header or footer is imported or overridden.
 */

/*
 * Anchor landing offset (Rev-3 §1.9 / §2.3).
 *
 * 88 = the 72px bar + 16px of breathing room. This is the JS-free equivalent of
 * a per-section offset: no scroll listener, no scroll-margin, no :target hack.
 * Below 719 the bar is 64px, so the value drops to 80 there (see the mobile
 * block). It was 104/92 while the chapter pad was 115px; with the pad at 72 an
 * unchanged offset would drop every anchored heading ~40px lower than the
 * composition intends.
 */
html.elp-html {
  scroll-padding-top: 88px;
}

@media (prefers-reduced-motion: no-preference) {
  html.elp-html {
    scroll-behavior: smooth;
  }
}

body.elp-page {
  margin: 0;
  background: #f6f8f6;
  color: #0a1a21;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.elp-page {
  /* Colour roles (§3). Page-scoped only. */
  --elp-frost: #f6f8f6;
  --elp-silver: #e5eceb;
  --elp-signal: #c5ff43;
  --elp-teal: #23727a;
  --elp-teal-bright: #7fccc8;
  --elp-depth: #061a22;
  --elp-ink: #0a1a21;
  --elp-ink-2: #1f3740;
  --elp-muted: #607079;
  --elp-frost-ink: #f6f8f6;

  /* Faces reuse the site's approved token values (R-33 bridge). */
  --elp-font-display: Georgia, 'Times New Roman', 'Liberation Serif', serif;
  --elp-font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Spacing */
  --elp-space-1: 4px;
  --elp-space-2: 8px;
  --elp-space-3: 16px;
  --elp-space-4: 24px;
  --elp-space-5: 32px;
  --elp-space-6: 48px;
  --elp-space-7: 72px;
  --elp-space-8: clamp(68px, 8vw, 125px);
  /*
   * Rev-3 §1.2 — the chapter pad.
   *
   * 72px at 1440 → a 144px seam between two chapters (inside the owner's
   * 120–160px band) instead of the old 230.4px. Declared here, beside the
   * spacing scale, so it is page-scoped like every other token.
   *
   * `--elp-space-8` is deliberately NOT redefined: `.elp-close-inner` still
   * uses its 68px floor on mobile, so the ≤719 render stays byte-identical.
   */
  --elp-pad-chapter: clamp(68px, 5vw, 76px);
  --elp-gutter: clamp(20px, 5vw, 80px);

  /* Material */
  --elp-radius-pill: 999px;
  --elp-radius-screen: 14px;
  --elp-radius-device: 30px;
  --elp-radius-note: 12px;
  --elp-radius-ledger: 18px;
  --elp-hairline-light: 1px solid rgba(10, 26, 33, 0.14);
  --elp-hairline-dark: 1px solid rgba(246, 248, 246, 0.16);
  --elp-hairline-teal: 1px solid rgba(35, 114, 122, 0.38);
  --elp-dash-placeholder: 2px dashed rgba(96, 112, 121, 0.45);
  --elp-shadow-screen: 0 2px 6px rgba(6, 26, 34, 0.08), 0 30px 70px -28px rgba(6, 26, 34, 0.35);
  --elp-shadow-device: 0 24px 60px -20px rgba(6, 26, 34, 0.42);
  --elp-shadow-note: 0 10px 30px -12px rgba(6, 26, 34, 0.25);
  --elp-blur-glass: blur(14px) saturate(120%);
  --elp-blur-nav: blur(12px);
  --elp-blur-copy-plate: blur(10px);
  --elp-t-state: 240ms;
  --elp-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

.elp-scope,
.elp-scope *,
.elp-scope *::before,
.elp-scope *::after {
  box-sizing: border-box;
}

.elp-scope {
  position: relative;
  overflow-x: clip;
  background: var(--elp-frost);
}

.elp-scope img {
  display: block;
  max-width: 100%;
}

.elp-scope a {
  color: inherit;
}

/* Links default to `inherit`, which would let the Dark nav container and the
   closing chapter repaint the Signal CTA text Frost. Buttons always keep Ink
   on the lime fill, in all three nav states and in Section G. */
.elp-scope a.elp-btn {
  color: var(--elp-ink);
}

.elp-scope :focus-visible {
  outline: 2px solid var(--elp-teal);
  outline-offset: 3px;
}

.elp-on-dark :focus-visible,
.elp-on-dark a:focus-visible,
.elp-on-dark button:focus-visible,
.elp-on-dark summary:focus-visible {
  outline: 2px solid var(--elp-frost);
}

.elp-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.elp-skip {
  position: fixed;
  left: 16px;
  top: -120px;
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: var(--elp-radius-pill);
  background: var(--elp-ink);
  color: var(--elp-frost);
  font-family: var(--elp-font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: top 160ms var(--elp-ease);
}

.elp-skip:focus {
  top: 14px;
}

.elp-skip:focus-visible {
  outline: 2px solid var(--elp-frost);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- primitives */

.elp-container {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--elp-gutter);
}

.elp-section {
  position: relative;
  /* Rev-3 §1.2: chapters breathe once at 72px (1440) instead of paying the
     mobile-scaled 115.2px twice between every pair. The ≤719 block keeps its
     own clamp(64px, 14vw, 96px) — that override is the mobile contract. */
  padding-block: var(--elp-pad-chapter);
}

.elp-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 var(--elp-space-4);
  color: var(--elp-muted);
  font-family: var(--elp-font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  line-height: 1.4;
  text-transform: uppercase;
}

.elp-eyebrow::before {
  content: '';
  flex: 0 0 auto;
  width: 24px;
  height: 2px;
  background: var(--elp-signal);
}

.elp-on-dark .elp-eyebrow {
  color: rgba(246, 248, 246, 0.86);
}

.elp-display {
  margin: 0;
  font-family: var(--elp-font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.elp-h2 {
  font-size: clamp(2.6rem, 4.2vw, 5rem);
  line-height: 1.08;
  text-wrap: balance;
}

.elp-em {
  font-style: italic;
  color: var(--elp-teal);
}

.elp-on-dark .elp-em {
  color: var(--elp-teal-bright);
}

.elp-lede {
  margin: 0;
  font-size: clamp(1rem, 1.1vw, 1.16rem);
  line-height: 1.6;
  color: var(--elp-ink-2);
}

.elp-on-dark .elp-lede {
  color: rgba(246, 248, 246, 0.88);
}

.elp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 48px;
  padding: 0.9rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--elp-radius-pill);
  font-family: var(--elp-font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 200ms var(--elp-ease),
    border-color 200ms var(--elp-ease),
    color 200ms var(--elp-ease);
}

.elp-btn .elp-arrow {
  display: inline-block;
  font-size: 1.05em;
  line-height: 1;
  transition: transform 200ms var(--elp-ease);
}

.elp-btn:hover .elp-arrow,
.elp-btn:focus-visible .elp-arrow {
  transform: translateX(3px);
}

.elp-btn--signal {
  background: var(--elp-signal);
  color: var(--elp-ink);
}

.elp-btn--signal:hover {
  background: #cdfb58;
}

.elp-btn--outline {
  border: var(--elp-hairline-light);
  background: transparent;
  color: var(--elp-ink);
}

.elp-btn--outline:hover {
  background: rgba(10, 26, 33, 0.045);
}

.elp-btn--disabled {
  background: var(--elp-signal);
  color: var(--elp-ink);
  cursor: not-allowed;
  opacity: 1;
  outline: var(--elp-dash-placeholder);
  outline-offset: 4px;
}

.elp-btn--disabled:hover {
  background: var(--elp-signal);
}

.elp-ph {
  margin: 0;
  padding-left: 12px;
  border-left: var(--elp-dash-placeholder);
  color: var(--elp-ink-2);
  font-family: var(--elp-font-sans);
  font-size: 0.92rem;
  font-style: italic;
  line-height: 1.5;
}

.elp-on-dark .elp-ph {
  border-left-color: rgba(246, 248, 246, 0.45);
  color: rgba(246, 248, 246, 0.88);
}

/* ------------------------------------------------------------------ floating nav */

.elp-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: 72px;
  color: var(--elp-ink);
  background: var(--elp-frost);
  border-bottom: 1px solid transparent;
  transition: none;
  /*
   * No background/colour interpolation. Surface, link colour and emblem settle
   * in a single frame, so no frame can contain a mid-grey bar with mid-grey
   * links (R-08, requirements §15 "no flickering or temporary loss of
   * contrast"). The 240ms gesture is the hard-edge wipe below, which swaps
   * between two complete, internally consistent surfaces.
   */
}

.elp-nav[data-nav-theme='hero'] {
  background: rgba(246, 248, 246, 0.55);
  -webkit-backdrop-filter: var(--elp-blur-nav);
  backdrop-filter: var(--elp-blur-nav);
  border-bottom-color: transparent;
  box-shadow: none;
  color: var(--elp-ink);
}

.elp-nav[data-nav-theme='light'] {
  background: var(--elp-depth);
  border-bottom-color: rgba(246, 248, 246, 0.1);
  box-shadow: none;
  color: var(--elp-frost);
}

.elp-nav[data-nav-theme='dark'] {
  background: var(--elp-frost);
  border-bottom-color: rgba(10, 26, 33, 0.12);
  box-shadow: 0 8px 24px -12px rgba(6, 26, 34, 0.18);
  color: var(--elp-ink);
}

/*
 * Outgoing-surface wipe.
 *
 * A complete, opaque copy of the PREVIOUS nav state, clipped away by a hard
 * vertical edge over 240ms. Every pixel of the bar is therefore always either
 * the old state or the new state in full — never a blend of the two. The clone
 * carries no links, buttons or focus targets (it is aria-hidden and
 * pointer-events: none), so interaction and the accessibility tree are
 * untouched.
 */
.elp-nav-wipe {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  overflow: hidden;
  pointer-events: none;
  color: var(--elp-ink);
  background: var(--elp-frost);
  clip-path: inset(0 0 0 100%);
}

.elp-nav-wipe[data-wipe-from='light'] {
  color: var(--elp-frost);
  background: var(--elp-depth);
}

.elp-nav-wipe[data-wipe-from='dark'] {
  color: var(--elp-ink);
  background: var(--elp-frost);
}

.elp-nav-wipe.is-wiping {
  display: block;
  animation: elp-nav-wipe var(--elp-t-state) var(--elp-ease) both;
}

@keyframes elp-nav-wipe {
  from {
    clip-path: inset(0 0 0 0);
  }
  to {
    clip-path: inset(0 0 0 100%);
  }
}

/* The clone's emblem is the outgoing variant, never the incoming one. */
.elp-nav-wipe[data-wipe-from='light'] .elp-emblem--on-light {
  opacity: 0;
}

.elp-nav-wipe[data-wipe-from='light'] .elp-emblem--on-dark {
  opacity: 1;
}

.elp-nav-wipe[data-wipe-from='dark'] .elp-emblem--on-light {
  opacity: 1;
}

.elp-nav-wipe[data-wipe-from='dark'] .elp-emblem--on-dark {
  opacity: 0;
}

/* On the Depth container the page's teal focus ring is only ~3.2:1; the
   handoff calls for a Frost ring on dark surfaces. */
.elp-nav[data-nav-theme='light'] :focus-visible {
  outline-color: var(--elp-frost);
}

/* The mobile sheet is always a Frost surface, whatever the bar theme is. */
.elp-nav .elp-nav-panel :focus-visible {
  outline-color: var(--elp-teal);
}

.elp-nav-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(16px, 2.4vw, 40px);
  height: 100%;
}

.elp-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  text-decoration: none;
}

.elp-brand-mark,
.elp-brand-mark-clone {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
}

.elp-emblem {
  position: absolute;
  inset: 0;
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.elp-emblem--on-dark {
  opacity: 0;
}

.elp-nav[data-nav-theme='light'] .elp-emblem--on-light {
  opacity: 0;
}

.elp-nav[data-nav-theme='light'] .elp-emblem--on-dark {
  opacity: 1;
}

.elp-brand-word {
  font-family: var(--elp-font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.elp-nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.4vw, 38px);
}

/* `.elp-nav-link-m` is the paint-only mirror of a link inside the wipe layer;
   it shares the link's metrics but is not a control and is never queried as
   one. */
.elp-nav-link,
.elp-nav-link-m {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--elp-font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  color: currentColor;
  transition: none;
}

.elp-nav-link:hover,
.elp-nav-link:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

/*
 * Rev-3 §2.4 — scroll-position active state.
 *
 * No colour change: the rule inherits `currentColor`, so it is correct on the
 * Frost bar, the Depth bar and the translucent hero wash by construction and
 * adds no contrast risk. 2px/8px against hover's 1px/6px. Never animated — a
 * state change is instant, there is no state to tween. Set from the existing
 * observer pass in EcomNav.astro, so without JS nothing is marked and nothing
 * is lost.
 */
.elp-nav-link[aria-current='true'] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

.elp-nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.elp-btn--nav {
  min-height: 44px;
  padding: 0.66rem 1.1rem;
  font-size: 0.82rem;
}

.elp-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: currentColor;
  cursor: pointer;
}

.elp-toggle-bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 18px;
}

.elp-toggle-bars span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transition: transform 200ms var(--elp-ease), opacity 200ms var(--elp-ease);
}

.elp-nav.is-open .elp-toggle-bars span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}

.elp-nav.is-open .elp-toggle-bars span:nth-child(2) {
  opacity: 0;
}

.elp-nav.is-open .elp-toggle-bars span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

.elp-nav-panel {
  display: none;
}

/* ------------------------------------------------------------------------ hero */

.elp-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--elp-frost);
}

.elp-hero-photo {
  position: absolute;
  inset: 0 0 0 42%;
  z-index: 0;
  overflow: hidden;
}

.elp-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 42%;
}

/*
 * Rev-5 D-05-02 — the hero grows to ≈1,010px at 1440, which tightens the cover
 * scale from ≈55% to ≈46% of the source width. The 4-point shift keeps the tall
 * bottle cluster and the travertine ledge inside the frame. Verified at 1440 and
 * 1024 (see the implementation report).
 */
@media (min-width: 1100px) {
  .elp-hero-photo img {
    object-position: 58% 42%;
  }
}

.elp-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    var(--elp-frost) 0%,
    rgba(246, 248, 246, 0.86) 14%,
    rgba(246, 248, 246, 0) 46%
  );
}

.elp-hero-inner {
  position: relative;
  z-index: 2;
  min-height: 760px;
  display: flex;
  align-items: center;
  padding-block: 136px 92px;
}

.elp-hero-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 3.6vw, 3.4rem);
  width: 100%;
}

.elp-hero-copy {
  position: relative;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(246, 248, 246, 0.82);
  -webkit-backdrop-filter: var(--elp-blur-copy-plate);
  backdrop-filter: var(--elp-blur-copy-plate);
  /* The headline is sized against this column, not the viewport, so its
     measure (and therefore its rag) is identical at every width where the
     column ratio holds. */
  container-type: inline-size;
}

/*
 * Headline measure.
 *
 * M4 P1-05: the previous 6vw/86.4px headline put only 5.9em of text in the
 * column, so the display broke into five lines with a lone "They". The
 * reference sets three lines — "Your store gets / visitors. Why aren't /
 * they buying?" — across a ~9em measure. 11.1cqw of the copy column is 9.0em
 * by construction, which lands inside the 8.6–10.4em band that produces
 * exactly those three line breaks.
 */
.elp-h1 {
  font-size: clamp(3.5rem, 6vw, 6.8rem); /* pre-container-query fallback */
  font-size: clamp(2.9rem, 11.1cqw, 4.05rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

/*
 * Rev-5 T-1 / T-2 — the hero lede is four paragraphs plus a turn line.
 *
 * 12px between the ledes: they are four beats of one argument, not four
 * statements, and the display gap (24px) would add ~36px of air and make the
 * plate read as a list. The turn line is a half-step above the body — sans,
 * weight 600, Ink, roman — because the `<em>` budget in this display block is
 * already spent by the H1.
 */
.elp-hero-lede {
  max-inline-size: 34rem;
  margin: 12px 0 0;
  color: var(--elp-ink-2);
  font-size: clamp(1rem, 1.1vw, 1.16rem);
  line-height: 1.6;
}

.elp-h1 + .elp-hero-lede {
  margin-top: var(--elp-space-4);
}

.elp-hero-turn {
  max-inline-size: 34rem;
  margin: 18px 0 0;
  color: var(--elp-ink);
  font-family: var(--elp-font-sans);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
}

.elp-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: var(--elp-space-5);
}

.elp-confidence {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  margin: var(--elp-space-5) 0 0;
  padding: 0;
  list-style: none;
}

.elp-confidence li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 16px;
  color: var(--elp-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  line-height: 1.35;
  text-transform: uppercase;
}

.elp-confidence li:first-child {
  padding-left: 0;
}

.elp-confidence li + li {
  border-left: var(--elp-hairline-teal);
}

.elp-confidence svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--elp-teal);
}

.elp-hero-scene {
  position: relative;
  min-height: 620px;
}

/* ------------------------------------------------------- sample storefront scene */

.elp-scene {
  position: relative;
  width: 100%;
  min-height: 590px;
  isolation: isolate;
}

.elp-mock-browser {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 1;
  width: min(100%, 560px);
  overflow: hidden;
  border-radius: var(--elp-radius-screen);
  background: #ffffff;
  /* The centring offset lives in a custom property so the entrance animation
     can start and finish on exactly this value: the static (reduced-motion)
     state and the animation's end state are identical by construction. */
  --elp-shift: -50%;
  transform: translateY(var(--elp-shift));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    var(--elp-shadow-screen);
}

.elp-browser-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding-inline: 12px;
  background: #f0f3f0;
  border-bottom: 1px solid rgba(10, 26, 33, 0.08);
}

.elp-browser-chrome i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #bcc9cd;
}

.elp-browser-url {
  flex: 1;
  height: 10px;
  margin-left: 8px;
  border-radius: 999px;
  background: rgba(10, 26, 33, 0.06);
}

.elp-store-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(10, 26, 33, 0.06);
}

.elp-store-logo {
  font-family: var(--elp-font-display);
  font-size: 1.05rem;
  color: #162a30;
}

.elp-store-navlinks {
  display: flex;
  gap: 12px;
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  color: #45585f;
}

.elp-store-icons {
  display: flex;
  gap: 8px;
  color: #33474e;
}

.elp-store-icons i {
  display: block;
  width: 10px;
  height: 10px;
  border: 1px solid currentColor;
  border-radius: 2px;
}

.elp-store-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 16px;
  align-items: stretch;
  padding: 22px 20px 24px;
  background: linear-gradient(135deg, #f1f2ec 0%, #e6e9e2 100%);
}

.elp-store-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
}

.elp-store-kicker {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #607079;
}

.elp-store-title {
  font-family: var(--elp-font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.7rem);
  line-height: 1.12;
  color: #13272d;
}

.elp-store-sub {
  font-size: 0.62rem;
  color: #5a6b71;
}

.elp-store-cta {
  display: inline-block;
  margin-top: 4px;
  padding: 8px 12px;
  border-radius: 3px;
  background: #0d2830;
  color: #ffffff;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.elp-store-tile {
  position: relative;
  min-height: 196px;
  overflow: hidden;
  border-radius: 6px;
  background: linear-gradient(160deg, #dde3da 0%, #cdd8d1 55%, #bfcfcd 100%);
}

.elp-store-tile::before {
  content: '';
  position: absolute;
  right: 8%;
  top: 12%;
  width: 44%;
  height: 46%;
  border-radius: 45% 45% 40% 40%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.92), rgba(238, 242, 240, 0.55));
  box-shadow: 0 18px 34px -18px rgba(6, 26, 34, 0.4);
}

.elp-store-tile::after {
  content: '';
  position: absolute;
  right: 26%;
  bottom: 14%;
  width: 8%;
  height: 32%;
  border-radius: 6px;
  background: linear-gradient(180deg, #eef3f0, #d5dedb);
  box-shadow: 0 10px 20px -12px rgba(6, 26, 34, 0.45);
}

.elp-store-leaf {
  position: absolute;
  left: 4%;
  bottom: -8%;
  width: 34%;
  height: 56%;
  border-radius: 70% 10% 70% 10%;
  background: linear-gradient(150deg, #93a89c, #5f7d72);
  opacity: 0.7;
  transform: rotate(-18deg);
}

.elp-browser-endcap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: #ffffff;
  border-top: 1px solid rgba(10, 26, 33, 0.06);
}

.elp-browser-endcap span {
  height: 6px;
  border-radius: 999px;
  background: rgba(10, 26, 33, 0.08);
}

.elp-browser-endcap span:nth-child(1) {
  width: 28%;
}

.elp-browser-endcap span:nth-child(2) {
  width: 16%;
}

.elp-browser-endcap span:nth-child(3) {
  width: 22%;
}

/* Product-page variant (Section D scene) */
.elp-product-page {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 16px;
  padding: 18px;
  background: #ffffff;
}

.elp-product-gallery {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.elp-product-shot {
  position: relative;
  flex: 1 1 auto;
  min-height: 176px;
  overflow: hidden;
  border-radius: 5px;
  background: linear-gradient(160deg, #eef1e9 0%, #dbe3dc 55%, #c7d3cf 100%);
}

.elp-product-bottle {
  position: absolute;
  left: 50%;
  top: 22%;
  width: 40%;
  height: 56%;
  border-radius: 12% 12% 8% 8%;
  background: linear-gradient(110deg, #ffffff 0%, #eef3f0 55%, #d8e1dd 100%);
  transform: translateX(-50%);
  box-shadow: 0 16px 26px -16px rgba(6, 26, 34, 0.5);
}

.elp-product-bottle::before {
  content: '';
  position: absolute;
  left: 22%;
  top: -18%;
  width: 56%;
  height: 22%;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #d9e1de, #b9c6c2);
}

.elp-product-thumbs {
  display: flex;
  gap: 6px;
}

.elp-product-thumbs span {
  flex: 1;
  height: 30px;
  border-radius: 3px;
  background: linear-gradient(150deg, #e8ede6, #cfdbd4);
}

.elp-product-detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 2px;
}

.elp-product-kicker {
  font-size: 0.54rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #607079;
}

.elp-product-name {
  font-family: var(--elp-font-display);
  font-size: clamp(1.05rem, 2vw, 1.42rem);
  line-height: 1.12;
  color: #13272d;
}

.elp-product-rating {
  font-size: 0.58rem;
  letter-spacing: 0.05em;
  color: #9b7a2e;
}

.elp-product-rating span {
  color: #607079;
}

.elp-product-price {
  font-size: 0.92rem;
  font-weight: 600;
  color: #13272d;
}

.elp-product-options {
  font-size: 0.55rem;
  color: #5a6b71;
}

.elp-product-cta {
  margin-top: 3px;
  padding: 7px 14px;
  border-radius: 3px;
  background: #0d2830;
  color: #ffffff;
  font-size: 0.57rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* Phone shell */
.elp-mock-phone {
  position: absolute;
  right: -3%;
  bottom: 4%;
  z-index: 3;
  width: 128px;
  height: 264px;
  overflow: hidden;
  border: 5px solid #0c2229;
  border-radius: var(--elp-radius-device);
  background: #0c2229;
  box-shadow: var(--elp-shadow-device);
}

.elp-phone-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 24px;
  background: #ffffff;
}

.elp-phone-notch {
  width: 44px;
  height: 12px;
  margin: 4px auto 0;
  border-radius: 0 0 8px 8px;
  background: #0c2229;
}

.elp-phone-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px 4px;
  font-size: 0.46rem;
  color: #223940;
}

.elp-phone-logo {
  font-family: var(--elp-font-display);
  font-size: 0.62rem;
}

.elp-phone-image {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: 2px 8px 0;
  overflow: hidden;
  border-radius: 4px;
  background: linear-gradient(160deg, #eef1e9, #d7dfd8 60%, #c5d1cd);
}

.elp-phone-image::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 26%;
  width: 42%;
  height: 48%;
  border-radius: 42% 42% 34% 34%;
  background: linear-gradient(120deg, #ffffff, #e8eeeb);
  transform: translateX(-50%);
  box-shadow: 0 10px 18px -10px rgba(6, 26, 34, 0.5);
}

.elp-phone-image::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 20%;
  width: 16%;
  height: 10%;
  border-radius: 3px 3px 0 0;
  background: #c3ccca;
  transform: translateX(-50%);
}

.elp-phone-body {
  padding: 6px 8px 10px;
}

/*
 * The sample panel's rows are block-level on purpose. As inline spans the
 * price and the "Add to Cart" chip shared one line box, ran past the 128px
 * screen and wrapped the label into a stray second line (M4 P1-04).
 */
.elp-phone-title {
  display: block;
  font-family: var(--elp-font-display);
  font-size: 0.56rem;
  line-height: 1.22;
  color: #172b31;
  overflow-wrap: break-word;
}

.elp-phone-rating {
  display: block;
  margin-top: 3px;
  font-size: 0.42rem;
  letter-spacing: 0.04em;
  color: #94742c;
}

.elp-phone-price {
  display: block;
  margin-top: 3px;
  font-size: 0.5rem;
  font-weight: 600;
  color: #172b31;
}

.elp-phone-cta {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: 6px;
  padding: 5px 4px;
  border-radius: 3px;
  background: #0d2830;
  color: #ffffff;
  font-size: 0.44rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

/* Glass evaluation notes */
.elp-glass-note {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: min(230px, 62%);
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--elp-radius-note);
  background: rgba(246, 248, 246, 0.7);
  -webkit-backdrop-filter: var(--elp-blur-glass);
  backdrop-filter: var(--elp-blur-glass);
  box-shadow: var(--elp-shadow-note);
  pointer-events: none;
}

.elp-note-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--elp-signal);
  color: var(--elp-ink);
}

.elp-note-icon svg {
  width: 14px;
  height: 14px;
}

.elp-note-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--elp-ink);
}

.elp-note-copy {
  display: block;
  margin-top: 2px;
  font-size: 0.8rem;
  line-height: 1.3;
  color: var(--elp-ink-2);
}

.elp-note--navigation {
  top: -26px;
  right: 5%;
}

.elp-note--product {
  bottom: 2%;
  left: 1%;
}

/* --------------------------------------------------------------- approach intro */

.elp-approach {
  background: var(--elp-frost);
}

.elp-approach-intro {
  display: grid;
  /*
   * Rev-5 T-4 / D-05-03 — the paragraph column is the band's content now: 105
   * words in a 430px column was 14 lines beside 150px of headline air. At 1280
   * inner width this gives ≈527 (H2) / ≈498 (body, capped at the approved 30rem
   * measure) / 140 (rail). Nothing else about the band moves.
   */
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.1fr) 172px;
  align-items: start;
  gap: clamp(2rem, 4vw, 4rem);
}

/* Rev-5 §1.2 — seven beats, 10px apart (24px would read as a list). */
.elp-approach-body {
  margin: 4.5rem 0 0;
  max-inline-size: 30rem;
  color: var(--elp-ink-2);
  font-size: clamp(1rem, 1.1vw, 1.16rem);
  line-height: 1.6;
}

.elp-approach-body p {
  margin: 0;
}

.elp-approach-body p + p {
  margin-top: 10px;
}

.elp-approach-rail {
  margin: 0.4rem 0 0;
  padding-left: 24px;
  border-left: var(--elp-hairline-teal);
  color: var(--elp-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.7;
  text-transform: uppercase;
  /* Rev-5 P2-10 — at 140px the motto broke into four lines and left "STORE."
     alone. `pretty` rebalances the last line without touching the measure,
     the tracking or the rail's width. */
  text-wrap: pretty;
}

/* ------------------------------------------------------------- three-step process */

.elp-process {
  background: linear-gradient(180deg, var(--elp-frost) 0%, #edf3f2 100%);
}

/*
 * Rev-5 T-6 / D-05-04 — the chapter masthead. C previously rendered no heading
 * at all, so its three step `h3`s hung under B's `h2`. Left-aligned on the
 * chapter's single left axis, 40px above the step grid. No eyebrow: the
 * appendix supplies a title only.
 */
.elp-process-title {
  margin: 0 0 40px;
}

.elp-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 44px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.elp-step {
  position: relative;
  display: grid;
  grid-template-areas:
    'num'
    'plate'
    'title'
    'text';
  align-content: start;
  gap: 0;
  /*
   * Rev-5 — the step body grew from two lines to nine at 768, so the connector's
   * old `top: 34%` (a share of the whole step) drifted below the plate and
   * landed on the title line. The arrow must bind the three plates, so its
   * offset is now plate-derived: numeral block + 10px + half the plate's height.
   * `container-type: inline-size` makes `cqw` the column width, and the plate's
   * height is its width × 400/720, so half of it is 27.78cqw.
   */
  container-type: inline-size;
  --elp-step-numh: clamp(2.2rem, 3vw, 3.4rem);
}

.elp-step-num {
  grid-area: num;
  margin-bottom: 10px;
  font-family: var(--elp-font-display);
  font-size: clamp(2.2rem, 3vw, 3.4rem);
  line-height: 1;
  color: rgba(96, 112, 121, 0.62);
}

.elp-step-plate {
  grid-area: plate;
  overflow: hidden;
  border-radius: var(--elp-radius-screen);
  background: var(--elp-silver);
  box-shadow: var(--elp-shadow-screen);
  transition: transform 260ms var(--elp-ease), box-shadow 260ms var(--elp-ease);
}

.elp-step-plate img {
  width: 100%;
  height: auto;
  aspect-ratio: 720 / 400;
  object-fit: cover;
}

.elp-step-title {
  grid-area: title;
  margin: 18px 0 8px;
  font-family: var(--elp-font-display);
  font-size: clamp(1.35rem, 1.6vw, 1.65rem);
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
}

/*
 * Rev-5 T-7 / T-8 / D-05-05 — 34ch at ≥720, two paragraphs per step.
 *
 * At 1440 the three columns are 398px; 30ch (≈268px) set 280 characters into an
 * 11-line strip. 34ch (≈302px) keeps the deliberate narrow-column look with one
 * line fewer. The two paragraphs are one observation and one qualifier, so they
 * sit 8px apart, not 24.
 */
.elp-step-text {
  grid-area: text;
  margin: 0;
  max-inline-size: 34ch;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--elp-ink-2);
}

.elp-step-text p {
  margin: 0;
}

.elp-step-text p + p {
  margin-top: 8px;
}

.elp-step:not(:last-child)::after {
  content: '\2192';
  position: absolute;
  top: calc(var(--elp-step-numh) + 10px + 27.78cqw - 14px);
  right: -1.35rem;
  color: rgba(35, 114, 122, 0.55);
  font-family: var(--elp-font-sans);
  font-size: 28px;
  line-height: 1;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .elp-step-plate:hover {
    transform: translateY(-4px);
    box-shadow:
      0 4px 10px rgba(6, 26, 34, 0.1),
      0 38px 80px -30px rgba(6, 26, 34, 0.42);
  }
}

/* ----------------------------------------------------------------- dark review */

.elp-review {
  position: relative;
  overflow: clip;
  background: var(--elp-depth);
  color: var(--elp-frost);
}

.elp-review::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 82% 10%, rgba(35, 114, 122, 0.22) 0%, rgba(35, 114, 122, 0) 58%);
}

.elp-review .elp-container {
  position: relative;
  z-index: 1;
}

.elp-review-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  grid-template-areas:
    'narrative scene'
    'ledger ledger';
  gap: clamp(2rem, 4vw, 5rem);
  row-gap: 3.5rem;
  align-items: start;
}

.elp-review-narrative {
  grid-area: narrative;
}

.elp-review-narrative .elp-h2 {
  color: var(--elp-frost);
}

/* Rev-5 §1.4 — two intro beats: the observation, then the list introduction. */
.elp-review-lede {
  margin: 12px 0 0;
  max-inline-size: 30rem;
}

.elp-review-narrative .elp-h2 + .elp-review-lede {
  margin-top: var(--elp-space-4);
}

.elp-outcomes {
  margin: var(--elp-space-6) 0 0;
  padding: 0;
  list-style: none;
}

.elp-outcomes li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid rgba(246, 248, 246, 0.14);
  color: var(--elp-frost);
  font-size: 1rem;
  line-height: 1.4;
}

.elp-outcomes li:last-child {
  border-bottom: 1px solid rgba(246, 248, 246, 0.14);
}

.elp-outcome-num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--elp-signal);
  border-radius: 50%;
  color: var(--elp-signal);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.elp-review-scene {
  position: relative;
  grid-area: scene;
  min-height: 540px;
  padding: 34px 26px;
  border: 1px solid rgba(246, 248, 246, 0.12);
  border-radius: var(--elp-radius-ledger);
  background: rgba(10, 26, 33, 0.35);
}

.elp-review-scene .elp-scene {
  min-height: 470px;
}

.elp-review-scene .elp-mock-browser {
  top: 48%;
  right: 2%;
  width: min(100%, 460px);
}

.elp-review-scene .elp-mock-phone {
  right: 0;
  bottom: 2%;
  width: 112px;
  height: 230px;
}

.elp-annotations {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.elp-anno {
  position: absolute;
  z-index: 5;
  max-width: 168px;
  margin: 0;
  padding-right: 10px;
  color: rgba(246, 248, 246, 0.9);
  font-family: var(--elp-font-display);
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.3;
}

.elp-anno::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 1px;
  background: rgba(246, 248, 246, 0.55);
}

.elp-anno::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid var(--elp-signal);
  border-radius: 50%;
  background: rgba(197, 255, 67, 0.08);
  box-shadow: 0 0 0 3px rgba(197, 255, 67, 0.1);
}

.elp-anno--1 {
  top: 4px;
  left: 0;
}

.elp-anno--1::after {
  left: 100%;
  bottom: 12px;
}

.elp-anno--1::before {
  left: calc(100% + 26px);
  bottom: 6px;
}

.elp-anno--2 {
  bottom: 42px;
  left: 0;
}

.elp-anno--2::after {
  left: 100%;
  top: 10px;
}

.elp-anno--2::before {
  left: calc(100% + 26px);
  top: 4px;
}

.elp-anno--3 {
  top: 4px;
  right: 0;
  bottom: auto;
  text-align: left;
  padding-right: 0;
  padding-left: 0;
}

.elp-anno--3::after {
  right: 100%;
  top: 10px;
}

.elp-anno--3::before {
  right: calc(100% + 26px);
  top: 4px;
}

/* Ledger */
.elp-ledger {
  grid-area: ledger;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid rgba(246, 248, 246, 0.12);
  border-radius: var(--elp-radius-ledger);
  background: rgba(10, 26, 33, 0.55);
  -webkit-backdrop-filter: var(--elp-blur-glass);
  backdrop-filter: var(--elp-blur-glass);
}

.elp-ledger-title {
  margin: 0 0 6px;
  color: rgba(246, 248, 246, 0.82);
  font-family: var(--elp-font-sans);
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-transform: uppercase;
}

.elp-ledger-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Rev-5 T-9 / D-05-06 — the ledger cells gain a description under their label.
 *
 * The cell is still a hairline cell inside ONE glass panel: no background, no
 * border, no radius, no shadow, no hover, nothing focusable. The description
 * sits in the label's own flex column, so six descriptions form six hanging
 * blocks under six hanging labels. That is the whole difference between a
 * ledger and a card grid.
 */
.elp-ledger-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 22px 20px 0;
  border-top: 1px solid rgba(246, 248, 246, 0.14);
}

.elp-ledger-cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.elp-ledger-item:nth-child(3n + 2),
.elp-ledger-item:nth-child(3n + 3) {
  padding-left: 22px;
  border-left: 1px solid rgba(246, 248, 246, 0.14);
}

.elp-ledger-num {
  flex: 0 0 auto;
  padding-top: 4px;
  color: var(--elp-signal);
  font-family: var(--elp-font-sans);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.elp-ledger-label {
  color: var(--elp-frost);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
}

/* ≥5.2:1 against the panel's worst-case composite. */
.elp-ledger-desc {
  margin: 0;
  color: rgba(246, 248, 246, 0.82);
  font-size: 0.95rem;
  line-height: 1.55;
}

/*
 * Rev-5 §1.4 — the guide prompt row.
 *
 * Not rendered in this build: no article exists, and the implementing directive
 * forbids a dead link or an internal placeholder in public copy. The block below
 * is the ONE state the component turns on when `GUIDE_ARTICLE_URL` is set — a
 * footer row inside the existing ledger panel, behind the panel's own top
 * hairline, 58ch. It is written now so the future activation is a one-constant
 * change, not a layout job.
 */
.elp-ledger-guide {
  padding-top: 20px;
  border-top: 1px solid rgba(246, 248, 246, 0.14);
}

.elp-ledger-guide-q {
  margin: 0 0 6px;
  color: var(--elp-frost);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.5;
}

.elp-ledger-guide-line {
  display: inline-block;
  max-inline-size: 58ch;
  color: rgba(246, 248, 246, 0.92);
  font-size: 0.95rem;
  line-height: 1.55;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------- purchase module */

.elp-offer {
  background: var(--elp-frost);
}

.elp-offer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.85fr);
  align-items: start;
}

.elp-offer-copy {
  padding-right: 3rem;
}

.elp-offer-copy .elp-h2 {
  font-size: clamp(2.6rem, 4.2vw, 5rem);
}

.elp-offer-summary {
  margin: var(--elp-space-4) 0 0;
  max-inline-size: 32rem;
}

.elp-offer-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: 3rem;
  border-inline-start: var(--elp-hairline-light);
  text-align: center;
}

.elp-price {
  margin: 0;
  font-family: var(--elp-font-display);
  font-size: clamp(3rem, 4.5vw, 4.6rem);
  font-variant-numeric: lining-nums;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
}

.elp-price-caption {
  margin: 14px 0 0;
  color: var(--elp-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
}

/*
 * Rev-5 T-13 / Directive 05 §2 — the pre-purchase 20% retention disclosure.
 *
 * Sits between the price caption and the CTA, inside the price column, so no
 * visitor can reach the payment control without the notice passing their eye.
 * It is a disclosure, not a placeholder: no dashed frame, no colour change, no
 * box. `20%` carries weight 600 only.
 */
.elp-offer-retention {
  max-inline-size: 22rem;
  margin: 14px 0 20px;
  color: var(--elp-ink-2);
  font-size: 0.8rem;
  line-height: 1.5;
  text-align: center;
}

.elp-offer-retention strong {
  font-weight: 600;
}

.elp-offer-price .elp-ph {
  margin-top: 18px;
  max-width: 15rem;
  text-align: left;
}

/*
 * Rev-4 §3.1 — the legal row under the CTA.
 *
 * Rev-5 T-14 / D-05-11: a THIRD destination (the Stripe terms page,
 * `/website-audit-terms/`) and 0.76rem with wrapping at every width. Three
 * labels cannot fit the 212px price column at 768, so `nowrap` is gone —
 * R-8 in the mapping is the risk this closes.
 */
.elp-offer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 8px;
  margin: 12px 0 0;
  max-inline-size: 24rem;
  color: var(--elp-ink-2);
  font-size: 0.76rem;
  line-height: 1.5;
  text-align: center;
}

.elp-offer-legal a {
  display: inline-flex;
  align-items: center;
  /* P2-02 (pre-deploy fix): 24x24 was the floor; the project contract is 44px.
     The padding carries the target and the type scale is unchanged. */
  min-block-size: 44px;
  padding-block: 12px;
  color: var(--elp-ink-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.elp-offer-legal a:hover,
.elp-offer-legal a:focus-visible {
  color: var(--elp-ink);
}

/*
 * R2 P2-04 / Rev-5 P2-06 — one pair per link.
 *
 * The interpunct is no longer a bare flex item: it lives inside the same
 * nowrap box as the link it follows, so a wrapped row can never END with a
 * separator, and it can never START a line either. The pair's own line box
 * centres the glyph on the link, which keeps the R2 baseline fix.
 */
.elp-legal-pair {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}

.elp-legal-sep {
  margin-inline-start: 8px;
}

/*
 * D-013 §12.3 — the ledger left the third column.
 *
 * Four Terms-reconciled facts no longer fit 403px: they would run ~550px tall
 * and make a thin legal column the tallest thing in the module. The ledger is
 * now full width under copy | price — the arrangement the 720–1099 band already
 * used — so the module has one ledger form at every width instead of two.
 */
.elp-offer-includes {
  grid-column: 1 / -1;
  margin-top: 2.5rem;
  padding: 1.75rem 0 0;
  border-top: var(--elp-hairline-light);
}

/*
 * Rev-5 T-11 / T-12 / D-05-08 — "What's Included", the 9-item deliverables list.
 *
 * Inside `.elp-offer-grid`, spanning both columns, between the copy/price row and
 * the fact ledger. Hairline-topped rows in a 3-up / 2-up / 1-up grid: a
 * specification table, not a card grid. No bullet, no tick, no icon, no
 * background, no radius.
 */
.elp-offer-included {
  grid-column: 1 / -1;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: var(--elp-hairline-light);
}

.elp-included-title {
  margin: 0 0 1.1rem;
  font-family: var(--elp-font-display);
  font-size: clamp(1.28rem, 1.5vw, 1.55rem);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.2;
}

.elp-included-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(20px, 3vw, 44px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.elp-included-grid li {
  padding: 12px 0;
  border-top: var(--elp-hairline-light);
  color: var(--elp-ink-2);
  font-size: 0.95rem;
  line-height: 1.5;
}

.elp-included-note {
  max-inline-size: 52ch;
  margin: 1.1rem 0 0;
  padding-top: 12px;
  border-top: var(--elp-hairline-light);
  color: var(--elp-ink-2);
  font-size: 0.92rem;
  line-height: 1.55;
}

.elp-facts {
  display: grid;
  /* Rev-5 T-15 / D-05-08 — three facts: the Deliverables row is deleted. */
  grid-template-columns: 0.9fr 1.15fr 1.75fr;
  align-items: start;
  gap: 0;
  margin: 0;
  padding: 0;
}

/*
 * Dividers are stated per band. The old `:not(:last-child)` / `+ .elp-fact`
 * pair assumed three columns and produced stray or missing rules as soon as a
 * fourth fact existed (R-1), so each band now declares its own rule and its own
 * padding: 4-up here, 2×2 at 720–1099, stacked below 720.
 */
.elp-fact {
  padding: 0 2rem 0 0;
  border-top: 0;
}

.elp-fact + .elp-fact {
  padding-left: 2rem;
  border-left: var(--elp-hairline-light);
}

.elp-fact:first-child {
  padding-top: 0;
  border-top: 0;
}

.elp-fact dt {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--elp-ink);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
}

.elp-fact-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--elp-teal);
}

.elp-fact dd {
  margin: 4px 0 0 32px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--elp-ink-2);
}

/*
 * D-013 §12.3 — customer responsibilities row (Terms §4).
 *
 * Full width under the ledger, label | text at >=720, stacked below. It is part
 * of the ledger, not fine print after the strip: no admin credentials are
 * required and sensitive data must not be sent through intake.
 */
.elp-responsibilities {
  margin: 1.25rem 0 0;
  padding: 1rem 0 0;
  border-top: var(--elp-hairline-light);
}

/*
 * Rev-5 T-16 / D-05-10 — the cancellation row.
 *
 * Full width under the fact ledger, using the responsibilities anatomy: label |
 * text at ≥720, stacked below. It carries the formula only; the floor itself is
 * disclosed above the CTA, and the binding clause lives in the terms documents.
 */
.elp-cancellation {
  margin: 1.25rem 0 0;
  padding: 1rem 0 0;
  border-top: var(--elp-hairline-light);
}

/*
 * M4 R4 / P2-03 — 224 px label track, not 200. `CUSTOMER RESPONSIBILITIES` is
 * 212.4 px of 0.73rem/0.18em uppercase, so it always wrapped to two lines at
 * ≥720 while `IMPORTANT LIMITATIONS` sat on one. 224 px clears it by ~11 px;
 * the fact ledger's columns and 2×2 dividers are untouched.
 */
.elp-responsibilities-row {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  align-items: start;
  column-gap: 2rem;
}

.elp-responsibilities-label {
  margin: 0;
  color: var(--elp-muted);
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.5;
  text-transform: uppercase;
}

.elp-responsibilities-text {
  margin: 0;
  color: var(--elp-ink-2);
  font-size: 0.95rem;
  line-height: 1.55;
}

.elp-offer-strip {
  margin-top: 2.5rem;
  /* Rev-3 P2-01: the UA `p` margin-block-end (1em = 14.72px at this size)
     collapsed out of `.elp-container` and pushed the E→F seam to 158.71px
     against the 144 ± 2 target. Zero it; the section's own bottom padding owns
     the seam air. */
  margin-bottom: 0;
  padding: 1.35rem 1rem;
  border-top: var(--elp-hairline-light);
  border-bottom: var(--elp-hairline-light);
  color: var(--elp-muted);
  font-size: 0.92rem;
  line-height: 1.5;
  text-align: center;
}

/* ---------------------------------------------------------------------- FAQ */

.elp-faq {
  background: var(--elp-silver);
}

/* The eyebrow sits on Silver, where --elp-muted falls just under 4.5:1.
   Ink-2 keeps it secondary while clearing the small-text threshold. */
.elp-faq .elp-eyebrow {
  color: var(--elp-ink-2);
}

.elp-faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: clamp(2.5rem, 5vw, 6rem);
}

.elp-faq-title-child {
  padding-top: 0.75rem;
  text-align: center;
}

.elp-faq-title-child .elp-h2 {
  margin-inline: auto;
  max-width: 14ch;
}

.elp-faq-note {
  margin: var(--elp-space-4) auto 0;
  max-width: 26rem;
  color: var(--elp-ink-2);
  font-size: 1rem;
  line-height: 1.55;
}

.elp-faq-flourish {
  width: 28px;
  height: 1px;
  margin: var(--elp-space-4) auto 0;
  background: var(--elp-teal);
}

.elp-accordion {
  border-top: var(--elp-hairline-light);
}

.elp-faq-item {
  border-bottom: var(--elp-hairline-light);
}

.elp-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 58px;
  padding: 1rem 2px;
  color: var(--elp-ink);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

.elp-faq-item summary::-webkit-details-marker {
  display: none;
}

.elp-faq-item summary:hover {
  color: var(--elp-teal);
}

.elp-faq-item summary::after {
  content: '+';
  flex: 0 0 auto;
  width: 22px;
  color: var(--elp-teal);
  font-family: var(--elp-font-sans);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  transition: transform 180ms ease-out;
}

.elp-faq-item[open] summary::after {
  transform: rotate(45deg);
}

.elp-faq-answer {
  padding: 0 2rem 1.35rem 2px;
  animation: elp-fade-in 180ms ease-out both;
}

/*
 * Rev-5 T-18 / D-05-12 — real answers: 0.95rem / 1.62, capped at 62ch.
 *
 * The answer column is 663px ≈ 78ch at 1440; the cap is what stops an answer
 * running the width of the page. Paragraph gap 12px, last paragraph 0. The old
 * placeholder's italic and dashed rule are gone with the placeholder.
 */
.elp-faq-answer > * {
  max-inline-size: 62ch;
  margin: 0;
  color: var(--elp-ink-2);
  font-size: 0.95rem;
  line-height: 1.62;
}

.elp-faq-answer > * + * {
  margin-top: 12px;
}

/* ------------------------------------------------------------- closing chapter */

.elp-close {
  position: relative;
  display: grid;
  place-items: center;
  /*
   * Rev-3 §1.2 — was clamp(320px, 42vw, 480px). At 480 it would start binding
   * once the inner pad dropped to 72, and the closing saving would collapse
   * from −86px to −24px. 400 at 1440 leaves the content (417.6px) governing.
   */
  min-height: clamp(300px, 29vw, 400px);
  overflow: clip;
  background: var(--elp-depth);
  color: var(--elp-frost);
  text-align: center;
}

.elp-close-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 78%;
}

.elp-close-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(6, 26, 34, 0.88) 0%,
    rgba(6, 26, 34, 0.72) 55%,
    rgba(6, 26, 34, 0.88) 100%
  );
}

.elp-close-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  /* Rev-3 §1.2 — follows the chapter pad on desktop; frozen at the old
     --elp-space-8 value on mobile (§1.8). */
  padding-block: var(--elp-pad-chapter);
}

.elp-close-dash {
  width: 24px;
  height: 2px;
  background: var(--elp-signal);
}

.elp-close .elp-h2 {
  max-width: 18ch;
  color: var(--elp-frost);
}

/*
 * Rev-5 T-19 / D-05-13 — four centred ledes at 46ch, a turn line, then the CTA.
 * The same device as the hero, so the page closes in the voice it opened in; the
 * turns are weight, not italic.
 */
.elp-close-body {
  max-inline-size: 46ch;
}

.elp-close-lede {
  margin: 0;
  color: rgba(246, 248, 246, 0.88);
  font-size: 1.05rem;
  line-height: 1.62;
}

.elp-close-lede + .elp-close-lede {
  margin-top: 10px;
}

.elp-close-turn {
  margin: 18px 0 0;
  color: var(--elp-frost);
  font-family: var(--elp-font-sans);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
}

.elp-close .elp-btn {
  margin-top: 0;
}

/* ------------------------------------------------------------------- footer */

.elp-footer {
  background: var(--elp-depth);
  color: var(--elp-frost);
  border-top: 1px solid rgba(246, 248, 246, 0.14);
  padding-block: 4rem 3.25rem;
}

.elp-footer-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
}

.elp-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  text-decoration: none;
}

.elp-footer-brand img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.elp-footer-word {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
}

.elp-footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.8rem;
}

.elp-footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.86rem;
  text-decoration: none;
}

.elp-footer-nav a:hover,
.elp-footer-nav a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.elp-footer-tag {
  margin: 0;
  padding-left: 1.5rem;
  border-left: 1px solid rgba(246, 248, 246, 0.32);
  color: rgba(246, 248, 246, 0.84);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.7;
  text-transform: uppercase;
}

.elp-footer-second {
  margin-top: 1.5rem;
  color: rgba(246, 248, 246, 0.8);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.6;
  text-transform: uppercase;
}

/* ------------------------------------------------- footer company block */
/*
 * Rev-5 T-20 / D-05-14 — Appendix A's company copy replaces the placeholder
 * support band: one title in the left column, one paragraph and one link in the
 * right. Same slot, same rules, same type scale. No image, no card, no shadow,
 * no second CTA, no motion beyond the arrow shift. Budget: ≈140px at ≥1024,
 * ≈200px at 390.
 */

.elp-footer-about {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  column-gap: clamp(28px, 4vw, 64px);
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(246, 248, 246, 0.12);
}

.elp-footer-about-body {
  padding-inline-start: clamp(28px, 4vw, 64px);
  border-inline-start: 1px solid rgba(246, 248, 246, 0.1);
}

.elp-footer-about-title {
  margin: 0 0 6px;
  font-family: var(--elp-font-display);
  font-size: clamp(1.05rem, 1.15vw, 1.2rem);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.25;
  color: var(--elp-frost);
}

.elp-footer-about-copy {
  margin: 0 0 10px;
  max-inline-size: 46ch;
  color: rgba(246, 248, 246, 0.84);
  font-size: 0.9rem;
  line-height: 1.5;
}

.elp-footer-company {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: rgba(246, 248, 246, 0.92);
  font-size: 0.86rem;
  text-decoration: none;
}

.elp-footer-company:hover,
.elp-footer-company:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.elp-company-arrow {
  display: inline-block;
  transition: transform 200ms var(--elp-ease);
}

.elp-footer-company:hover .elp-company-arrow,
.elp-footer-company:focus-visible .elp-company-arrow {
  transform: translateX(3px);
}

@media (max-width: 1023px) {
  .elp-footer-about {
    grid-template-columns: 1fr;
    row-gap: 1.25rem;
  }

  .elp-footer-about-body {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
}

.elp-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(246, 248, 246, 0.12);
  color: rgba(246, 248, 246, 0.68);
  font-size: 0.78rem;
  line-height: 1.5;
}

.elp-legal-stubs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.15rem;
  row-gap: 0.1rem;
  color: rgba(246, 248, 246, 0.66);
}

/*
 * Rev-5 — the interpunct separators are gone from the footer row.
 *
 * A `::after` dot on the item before the break always orphans when the row
 * wraps: at 320 the line ended "Evaluation terms (draft) ·" with nothing after
 * it. There is no CSS way to draw a separator only when its neighbour stays on
 * the same line, so the four items are separated by space alone. Every item
 * keeps its 24x24 effective target.
 */

.elp-legal-stubs a,
.elp-legal-choices {
  display: inline-flex;
  align-items: center;
  /* P2-02 (pre-deploy fix): 44px tap height on every legal control. */
  min-block-size: 44px;
  padding-block: 12px;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
}

/* `hidden` must win over the display rule above: the trigger is always in the
   markup and is revealed only when a consent panel exists to open. */
.elp-legal-choices[hidden] {
  display: none;
}

.elp-legal-stubs a:hover,
.elp-legal-stubs a:focus-visible,
.elp-legal-choices:hover,
.elp-legal-choices:focus-visible {
  color: var(--elp-frost);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------------ motion */

@keyframes elp-rise {
  from {
    opacity: 0;
    transform: translateY(calc(var(--elp-shift, 0px) + 12px));
  }
  to {
    opacity: 1;
    transform: translateY(var(--elp-shift, 0px));
  }
}

@keyframes elp-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.elp-js .elp-hero-scene .elp-scene-anim {
  animation: elp-rise 500ms var(--elp-ease) both;
}

.elp-js .elp-hero-scene .elp-scene-anim:nth-child(2) {
  animation-delay: 80ms;
}

.elp-js .elp-hero-scene .elp-scene-anim:nth-child(3) {
  animation-delay: 160ms;
}

.elp-js .elp-hero-scene .elp-scene-anim:nth-child(4) {
  animation-delay: 240ms;
}

/* ------------------------------------------------------------- supports fallback */

@supports not (backdrop-filter: blur(1px)) {
  .elp-nav[data-nav-theme='hero'] {
    background: rgba(246, 248, 246, 0.92);
  }

  .elp-hero-copy {
    background: var(--elp-frost);
  }

  .elp-glass-note {
    background: rgba(246, 248, 246, 0.94);
  }

  .elp-ledger {
    background: rgba(10, 26, 33, 0.88);
  }
}

/* ------------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  html.elp-html {
    scroll-behavior: auto;
  }

  .elp-nav,
  .elp-nav *,
  .elp-skip,
  .elp-btn,
  .elp-btn .elp-arrow,
  .elp-step-plate,
  .elp-emblem,
  .elp-toggle-bars span,
  .elp-faq-item summary::after {
    transition: none !important;
    animation: none !important;
  }

  .elp-js .elp-hero-scene .elp-scene-anim {
    animation: none !important;
  }

  .elp-faq-answer {
    animation: none !important;
  }

  .elp-step-plate:hover {
    transform: none;
  }

  .elp-btn:hover .elp-arrow,
  .elp-btn:focus-visible .elp-arrow {
    transform: none;
  }
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 1099px) {
  .elp-hero-photo {
    inset: 0 0 0 34%;
  }

  .elp-hero-inner {
    min-height: 640px;
    padding-block: 124px 76px;
  }

  .elp-hero-content {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
  }

  .elp-hero-copy {
    padding: 20px;
  }

  /* Tablet band: the column is roughly half the chapter width, so the same
     9em measure would make the display too small to lead. A 6.4em measure
     holds four complete lines at every width in this band, with no line
     carrying a single word. */
  .elp-h1 {
    font-size: clamp(3.5rem, 13.2vw, 4.4rem);
    font-size: clamp(2.35rem, 15.6cqw, 4.1rem);
  }

  .elp-hero-scene {
    min-height: 500px;
  }

  /* In this band the copy column is too narrow for the three labels to share a
     row, so the strip becomes the same stacked hairline list it uses on mobile
     rather than leaving orphaned vertical rules. */
  .elp-confidence {
    display: grid;
    margin-top: 1.75rem;
  }

  .elp-confidence li {
    padding: 7px 0;
    border-top: 1px solid rgba(10, 26, 33, 0.12);
  }

  .elp-confidence li:first-child {
    border-top: 0;
  }

  .elp-confidence li + li {
    border-left: 0;
  }

  .elp-scene {
    min-height: 470px;
  }

  .elp-mock-browser {
    width: 100%;
  }

  .elp-glass-note {
    width: min(190px, 64%);
  }

  .elp-note--navigation {
    top: -18px;
    right: 0;
  }

  .elp-note--product {
    bottom: 4%;
    left: 0;
  }

  .elp-approach-intro {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    row-gap: 1.5rem;
  }

  .elp-approach-rail {
    grid-column: 1 / -1;
    margin-top: 0.5rem;
    padding-left: 0;
    padding-top: 18px;
    border-left: 0;
    border-top: var(--elp-hairline-teal);
  }

  .elp-review-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 2.25rem;
  }

  .elp-review-scene {
    padding: 26px 18px;
  }

  .elp-review-scene .elp-scene {
    min-height: 470px;
  }

  /* M4 R2 / P1-07 — the annotation band gets its own vertical room.
     In this band the panel spans the full scene width, so the third note
     (four lines at 134px) cannot sit beside it; it has to sit above it. The
     scene grows into the slack the 540px card already left under the panel
     (26px + 420px + 26px = 472px of a 540px box) and the panel is centred in
     the taller scene. That drops its top hairline ~33px at 720–1024, clearing
     the third note's last line instead of cutting it. */
  .elp-review-scene .elp-mock-browser {
    width: 100%;
    top: 50%;
  }

  .elp-anno {
    max-width: 134px;
    font-size: 0.82rem;
  }

  .elp-ledger-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .elp-ledger-item:nth-child(3n + 2),
  .elp-ledger-item:nth-child(3n + 3) {
    padding-left: 0;
    border-left: 0;
  }

  .elp-ledger-item:nth-child(2n + 2) {
    padding-left: 22px;
    border-left: 1px solid rgba(246, 248, 246, 0.14);
  }

  .elp-offer-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    row-gap: 2.25rem;
  }

  .elp-offer-copy {
    padding-right: 2rem;
  }

  .elp-offer-price {
    padding-inline: 2rem;
  }

  /*
   * Rev-5 T-14 / R-8 — three labels cannot fit the 212px price column at 768,
   * so the row WRAPS here. `nowrap` was the pre-Rev-5 state with two labels; it
   * would push "Privacy Policy" past the section edge.
   */
  .elp-offer-legal {
    max-inline-size: 100%;
    gap: 0 18px;
  }

  /*
   * Rev-5 P2-06 — below 1100 the three labels cannot share a line, so a
   * trailing interpunct would sit at the end of whichever pair wrapped. The
   * separators are removed at these widths and the column gap carries the
   * separation; at >=1100 the row is a single line and keeps them.
   */
  .elp-legal-sep {
    display: none;
  }

  .elp-offer-included {
    margin-top: 2rem;
    padding-top: 1.5rem;
  }

  .elp-included-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .elp-offer-includes {
    grid-column: 1 / -1;
    display: block;
    margin-top: 0;
    padding-inline-start: 0;
    padding-top: 1.75rem;
    border-inline-start: 0;
    border-top: var(--elp-hairline-light);
  }

  /* Two by two. The facts belong on the list itself: .elp-facts is the only
     child of .elp-offer-includes, so a grid on the wrapper would leave an empty
     half however wide the row is. */
  .elp-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0;
    row-gap: 0;
    align-items: start;
  }

  /*
   * D-013 §12.3 / R-1 — the four-fact ledger at 720–1099.
   *
   * The three-column assumption is replaced outright: no `:not(:last-child)`
   * padding, no blanket `+ .elp-fact` border. Dividers sit on the even children
   * only (1|2 and 3|4); children 1 and 3 are the left column and give their
   * right padding back to the gap.
   */
  .elp-fact,
  .elp-fact:first-child {
    padding: 0;
    border-top: 0;
  }

  .elp-fact:nth-child(odd) {
    padding-left: 0;
    padding-right: 1.5rem;
    border-left: 0;
  }

  .elp-fact:nth-child(2n) {
    padding-left: 1.5rem;
    border-left: var(--elp-hairline-light);
  }

  /*
   * Rev-5 P2-05 — three facts in two columns left a half-width void in row 2 at
   * 1024 and 768 ("Important limitations" sat alone beside blank space).
   * The third fact now takes the full measure as its own ledger row, divided by
   * the same hairline the columns use, so the block reads as three ruled rows
   * rather than a grid with a hole. 720-1099 only; >=1100 is three columns.
   */
  .elp-fact:nth-child(3) {
    grid-column: 1 / -1;
    padding: 1.5rem 0 0;
    border-top: var(--elp-hairline-light);
    border-left: 0;
  }

  .elp-footer-top {
    grid-template-columns: auto 1fr;
  }

  .elp-footer-tag {
    grid-column: 1 / -1;
    padding-left: 0;
    padding-top: 0.75rem;
    border-left: 0;
    border-top: 1px solid rgba(246, 248, 246, 0.2);
  }

  .elp-footer-nav {
    justify-content: flex-end;
  }
}

/*
 * M4 R2 / P1-08 — the confidence strip is one row of three peers at ≥1024.
 *
 * Until R2 the items were an inline flex row that wrapped: two rows at 1440 and
 * three at 1100/1024, so only the first divider rendered and the third item
 * read as an orphan line rather than a peer. It is now a real three-column
 * grid — the mockup's structure — with a hairline in each column gap.
 *
 * The rule is a positioned pseudo-element centred in the gap rather than a
 * border plus padding: at 1024 the copy column is only ~403px wide and the
 * longest label ("RECOMMENDATIONS") is ~129px at the handoff's 0.72rem/0.09em,
 * so any padding spent on the divider would push that word out of its column.
 */
@media (min-width: 1024px) {
  .elp-confidence {
    --elp-conf-gap: 16px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--elp-conf-gap);
    align-items: stretch;
    margin-top: var(--elp-space-5);
  }

  .elp-confidence li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0;
    border: 0;
  }

  .elp-confidence li + li {
    border-left: 0;
  }

  .elp-confidence li + li::before {
    content: '';
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: calc(var(--elp-conf-gap) / -2 - 0.5px);
    width: 1px;
    background: rgba(35, 114, 122, 0.38);
  }
}

/* 1024–1279: the three columns are ~124–137px wide. Stacking the 18px icon
   above its label gives the label the whole column, which preserves the
   mockup's two-line break instead of hyphenating a tracked cap word; the
   tracked size steps down one notch (0.72rem → 0.68rem) so the longest word
   keeps ~7px of slack against the rule rather than colliding with it. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .elp-confidence {
    --elp-conf-gap: 12px;
  }

  .elp-confidence li {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.68rem;
    letter-spacing: 0.07em;
  }
}

/*
 * Rev-3 §2.2 — the collapse breakpoint moves 860 → 959.
 *
 * The four approved in-page labels are 1.9–2.4× the character count of the four
 * external ones they replace. At 861 the three-zone bar needs ~803px of content
 * in a 775px inner width; `overflow-x: clip` would silently cut the CTA. The
 * hamburger therefore takes over from 959 down, and 960–1199 runs a compact
 * density (see the block after this one).
 *
 * THIS VALUE IS ENCODED IN THREE PLACES AND MUST MOVE TOGETHER:
 *   1. here;
 *   2. the <noscript> nav band in EcomLayout.astro;
 *   3. matchMedia('(min-width: 960px)') in EcomNav.astro.
 */
@media (max-width: 959px) {
  .elp-nav {
    height: 64px;
  }

  .elp-nav-inner {
    gap: 10px;
  }

  /* The link list leaves the grid, so the actions must be pinned to the third
     column by hand: logo left, CTA + hamburger right, at every width ≤959. */
  .elp-nav-actions {
    grid-column: 3;
    justify-self: end;
  }

  .elp-nav-links {
    display: none;
  }

  .elp-nav-toggle {
    display: inline-flex;
  }

  .elp-brand-word {
    font-size: 0.66rem;
    letter-spacing: 0.14em;
  }

  .elp-btn--nav {
    padding: 0.6rem 0.9rem;
  }

  .elp-nav-panel {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    z-index: 99;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    padding: 10px var(--elp-gutter) 24px;
    background: var(--elp-frost);
    border-bottom: 1px solid rgba(10, 26, 33, 0.12);
    box-shadow: 0 18px 40px -24px rgba(6, 26, 34, 0.35);
  }

  .elp-nav-panel[hidden] {
    display: none;
  }

  .elp-nav-panel:not([hidden]) {
    display: block;
  }

  .elp-panel-link {
    display: flex;
    align-items: center;
    min-height: 48px;
    border-bottom: 1px solid rgba(10, 26, 33, 0.1);
    color: var(--elp-ink);
    font-size: 1.05rem;
    text-decoration: none;
  }

  .elp-panel-cta {
    display: inline-flex;
    width: 100%;
    margin-top: 1.25rem;
  }
}

/* The closing heading's measure stays tied to 860, not to the bar breakpoint:
   it is a text-composition rule, and moving it with the nav would change the
   closing chapter's rag in the 861–959 band for no reason. */
@media (max-width: 860px) {
  .elp-close .elp-h2 {
    max-width: 20ch;
  }
}

/*
 * Rev-3 §2.2 — compact desktop density, 960–1199.
 *
 * Measured budget at 960: 880px inner width. Brand lockup 34 + 10 + ~152 = 196,
 * CTA ≈ 168, one 24px gap each side of the link row → 560px available for the
 * four links at 0.8125rem with a 16px gap (≈ 476px of link text). 16px steps the
 * type one notch down from 0.875rem and drops the fluid gap to a flat 16px, which
 * restores ~60px of slack. No wrapping, no clipped label, no shrinking CTA.
 */
@media (min-width: 960px) and (max-width: 1199px) {
  .elp-nav-inner {
    gap: 24px;
  }

  .elp-nav-links {
    gap: 16px;
  }

  .elp-nav-link,
  .elp-nav-link-m {
    font-size: 0.8125rem;
  }

  .elp-brand-word {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
  }

  .elp-btn--nav {
    padding: 0.62rem 0.95rem;
  }
}

/* P1-07 companion: at 720–860 the two top notes face each other across a card
   that is only 321–387px wide, so the full-length leaders put the two lime
   rings on top of one another (they overlapped by 24.7px at 720 once the notes
   moved into the panel's top band). A tighter leader and a 10px marker keep
   each ring attached to its own note — 15px clear at 720, 39px at 768 — without
   changing either note's measure, so no annotation re-wraps. Below 720 the
   notes leave the card entirely and use the inline marker treatment. */
@media (min-width: 720px) and (max-width: 860px) {
  .elp-anno::after {
    width: 8px;
  }

  .elp-anno::before {
    width: 10px;
    height: 10px;
    box-shadow: 0 0 0 2px rgba(197, 255, 67, 0.1);
  }

  .elp-anno--1::after,
  .elp-anno--2::after {
    left: 100%;
  }

  .elp-anno--1::before,
  .elp-anno--2::before {
    left: calc(100% + 8px);
    bottom: 6px;
  }

  .elp-anno--2::before {
    top: 5px;
    bottom: auto;
  }

  .elp-anno--3::after {
    right: 100%;
  }

  .elp-anno--3::before {
    right: calc(100% + 8px);
    top: 5px;
  }
}

@media (max-width: 719px) {
  html.elp-html {
    scroll-padding-top: 80px;
  }

  .elp-section {
    padding-block: clamp(64px, 14vw, 96px);
  }

  /* Rev-3 §1.8 — the closing chapter's inner pad is pinned back to the old
     --elp-space-8 value so the mobile render is byte-identical. Do not remove:
     without it the desktop chapter pad (68–76px) would leak into the ≤719
     composition. */
  .elp-close-inner {
    padding-block: var(--elp-space-8);
  }

  .elp-hero-inner {
    display: block;
    min-height: 0;
    padding-block: 104px 0;
  }

  .elp-hero-content {
    display: block;
  }

  .elp-hero-photo {
    inset: auto 0 0 0;
    height: 62%;
  }

  .elp-hero-photo img {
    /* The band is a tall, narrow slice of a 1672×941 plate; this framing keeps
       the bottles in the visible strip instead of flat grey backdrop. */
    object-position: 78% 38%;
  }

  .elp-hero-scrim {
    background: linear-gradient(
      180deg,
      var(--elp-frost) 0%,
      var(--elp-frost) 30%,
      rgba(246, 248, 246, 0) 58%
    );
  }

  .elp-hero-copy {
    position: relative;
    z-index: 2;
    margin-inline: calc(-1 * var(--elp-gutter));
    padding: 0 var(--elp-gutter) 1.25rem;
    border: 0;
    background: var(--elp-frost);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .elp-h1 {
    font-size: clamp(3.5rem, 13.2vw, 4.4rem);
    font-size: clamp(2.4rem, 16cqw, 4.2rem);
  }

  .elp-hero-lede {
    max-inline-size: 100%;
  }

  .elp-cta-row {
    margin-top: 1.5rem;
  }

  .elp-btn {
    min-height: 48px;
  }

  .elp-confidence {
    display: grid;
    margin-top: 1.5rem;
  }

  .elp-confidence li {
    padding: 10px 0;
    border-top: 1px solid rgba(10, 26, 33, 0.12);
  }

  .elp-confidence li + li {
    border-left: 0;
  }

  .elp-confidence li:first-child {
    padding-left: 0;
  }

  .elp-hero-scene {
    min-height: 0;
    margin-top: 1.25rem;
    padding-bottom: 1.5rem;
  }

  .elp-scene {
    min-height: 0;
    padding-top: 10px;
  }

  .elp-mock-browser {
    position: relative;
    top: auto;
    right: auto;
    --elp-shift: 0px;
    transform: none;
    width: 100%;
  }

  .elp-mock-phone {
    display: none;
  }

  .elp-store-hero {
    grid-template-columns: 1fr;
  }

  .elp-store-tile {
    min-height: 160px;
  }

  .elp-store-title {
    font-size: clamp(1.2rem, 6vw, 1.5rem);
  }

  .elp-store-navlinks {
    display: none;
  }

  .elp-glass-note {
    width: min(210px, 72%);
  }

  .elp-note--navigation {
    top: -14px;
    right: 0;
  }

  .elp-note--product {
    bottom: 2%;
    left: 0;
  }

  .elp-approach-intro {
    display: block;
  }

  .elp-approach-body {
    margin-top: 1.5rem;
  }

  .elp-approach-rail {
    margin-top: 1.75rem;
  }

  .elp-steps {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .elp-step {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      'num title'
      'plate plate'
      'text text';
    align-items: center;
    column-gap: 14px;
  }

  .elp-step-num {
    margin-bottom: 0;
    font-size: 2.2rem;
  }

  .elp-step-title {
    margin: 0;
    text-align: left;
  }

  .elp-step-plate {
    margin-top: 14px;
  }

  /* Rev-5 T-7 — 34ch is released: the column is 350px, and a 34-character
     ribbon would set every step into a narrow strip. */
  .elp-step-text {
    max-inline-size: 100%;
    margin-top: 12px;
  }

  .elp-step:not(:last-child)::after {
    content: none;
  }

  .elp-review-grid {
    display: flex;
    flex-direction: column;
  }

  /* Handoff §2 D: on mobile the ledger precedes the scene. */
  .elp-review-narrative {
    order: 1;
    margin-bottom: 2.25rem;
  }

  .elp-review-ledger {
    order: 2;
    margin-bottom: 2.25rem;
  }

  .elp-review-scene {
    order: 3;
  }

  .elp-ledger-grid {
    grid-template-columns: 1fr;
  }

  .elp-ledger-item,
  .elp-ledger-item:nth-child(2n + 2),
  .elp-ledger-item:nth-child(3n + 2),
  .elp-ledger-item:nth-child(3n + 3) {
    padding: 14px 0;
    border-left: 0;
  }

  .elp-review-scene {
    min-height: 0;
    padding: 20px 14px 20px;
  }

  .elp-review-scene .elp-scene {
    min-height: 0;
  }

  .elp-review-scene .elp-mock-browser {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
  }

  /* Departure from §2 D, kept deliberately: at ≤719 the panel is ~318px wide,
     so a second 96px device can only sit on top of the product copy and the
     annotated "Add to Cart" control. The browser alone carries the sample UI
     at this width, exactly as it does in the hero. Recorded, not hidden. */
  .elp-review-scene .elp-mock-phone {
    display: none;
  }

  .elp-annotations {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-top: 1rem;
  }

  .elp-anno,
  .elp-anno--1,
  .elp-anno--2 {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    max-width: none;
    padding: 0 0 0 22px;
    font-size: 0.8rem;
    text-align: left;
  }

  .elp-anno::after {
    display: none;
  }

  .elp-anno::before,
  .elp-anno--1::before,
  .elp-anno--2::before {
    left: 0;
    top: 4px;
  }

  .elp-anno--3 {
    display: none;
  }

  .elp-offer-grid {
    display: block;
  }

  .elp-offer-copy {
    padding-right: 0;
  }

  .elp-offer-price {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.35rem 1.25rem;
    margin-top: 1.75rem;
    padding: 1.25rem 0;
    border-inline-start: 0;
    border-top: var(--elp-hairline-light);
    border-bottom: var(--elp-hairline-light);
    text-align: left;
  }

  .elp-price {
    grid-row: 1 / span 2;
    font-size: clamp(2.6rem, 12vw, 3.4rem);
  }

  .elp-price-caption {
    margin: 0;
    font-size: 0.66rem;
  }

  .elp-offer-price .elp-btn {
    grid-column: 1 / -1;
    justify-self: start;
    min-height: 48px;
    margin-top: 14px;
    padding-inline: 1.1rem;
    font-size: 0.88rem;
  }

  .elp-offer-price .elp-ph {
    grid-column: 1 / -1;
    margin-top: 0.5rem;
    max-width: none;
  }

  /*
   * Rev-5 T-13 — the retention disclosure is a full-width row under the
   * caption, above the CTA, in the mobile two-column price row.
   */
  .elp-offer-retention {
    grid-column: 1 / -1;
    max-inline-size: none;
    margin: 10px 0 0;
    text-align: left;
  }

  /*
   * Rev-5 P0-01 — the legal pair is a full-width row, not a grid item in
   * column 1.
   *
   * At ≤719 `.elp-offer-price` is a two-column grid. Auto-placed into column 1,
   * the pair's 220.7px max-content sized that column and pushed the CTA into a
   * 39px (320) / 109px (390) second column; the button cannot shrink below its
   * 173px content, so it ran 114px / 44px past the section edge and
   * `overflow-x: clip` on `.elp-scope` hid the overflow. Spanning both columns
   * removes the pair from track sizing entirely, so the CTA keeps its column.
   */
  /*
   * P2-03 (pre-deploy fix) — the row was centred inside a left-aligned price
   * block, so at 320 the wrap produced a short second line indented under a
   * longer first one. It is now left-aligned with the CTA and the price above
   * it: a wrapped row starts on the same axis as the row above.
   */
  .elp-offer-legal {
    grid-column: 1 / -1;
    justify-self: start;
    justify-content: flex-start;
    max-inline-size: none;
    margin-top: 0.85rem;
    text-align: left;
  }

  /* 44px effective target on each link, unchanged by the row move. */
  .elp-offer-legal a {
    min-block-size: 44px;
    padding-block: 12px;
  }

  .elp-offer-includes {
    display: block;
    margin-top: 1.75rem;
    padding-top: 0;
    border-top: 0;
  }

  /* Rev-5 T-11 — nine rows, one per deliverable. */
  .elp-offer-included {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
  }

  .elp-included-title {
    font-size: 1.22rem;
  }

  .elp-included-grid {
    grid-template-columns: 1fr;
  }

  .elp-included-grid li {
    padding: 10px 0;
  }

  .elp-facts {
    display: block;
    row-gap: 0;
  }

  /* Stacked again: every fact is its own rule-topped row. The 720–1099 even
     dividers are cleared explicitly, or rows 2 and 4 would keep a left rule. */
  .elp-fact,
  .elp-fact:first-child,
  .elp-fact:nth-child(odd),
  .elp-fact:nth-child(2n) {
    padding: 14px 0;
    border-top: var(--elp-hairline-light);
    border-left: 0;
  }

  .elp-responsibilities-row {
    display: block;
  }

  .elp-responsibilities-label {
    margin-bottom: 6px;
  }

  .elp-offer-strip {
    margin-top: 2rem;
    font-size: 0.88rem;
  }

  .elp-faq-layout {
    display: block;
  }

  .elp-faq-title-child {
    padding-top: 0;
    margin-bottom: 2rem;
  }

  .elp-faq-title-child .elp-h2 {
    max-width: 18ch;
  }

  .elp-faq-answer {
    padding-right: 1rem;
  }

  .elp-close {
    min-height: 340px;
  }

  .elp-close .elp-h2 {
    max-width: 22ch;
  }

  .elp-close .elp-btn {
    width: 100%;
  }

  .elp-footer-top {
    display: block;
  }

  .elp-footer-about {
    margin-top: 0.9rem;
    padding-top: 1rem;
    row-gap: 0.5rem;
  }

  .elp-footer-about-title {
    font-size: 1rem;
  }

  .elp-footer-about-copy {
    font-size: 0.84rem;
  }

  /* The five footer controls have to wrap into two rows at 390 rather than
     three: the labels are longer than the four they replaced and a fifth
     control was added, so the row inherits a tighter measure and a hair
     smaller size. 44px targets are unchanged. */
  .elp-footer-nav {
    gap: 0.25rem 1rem;
  }

  .elp-footer-nav a {
    font-size: 0.8rem;
  }

  /*
   * Rev-5 P2-09 — four labels wrapped 3 + 1 at 390 ("Pricing" alone on row 2).
   * A 2 x 2 grid makes the block deliberate instead of accidental. Targets and
   * type size are unchanged; the hairline-free column gap is the row gap's
   * vertical rhythm kept at 0.25rem.
   */
  .elp-footer-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    justify-content: start;
    margin-top: 1.25rem;
    gap: 0.25rem 2rem;
  }

  .elp-footer-tag {
    margin-top: 1rem;
  }

  .elp-footer-bottom {
    display: block;
  }

  .elp-legal-stubs {
    margin-top: 0.6rem;
  }
}

@media (max-width: 420px) {
  .elp-brand-word {
    display: none;
  }

  .elp-cta-row .elp-btn {
    white-space: normal;
  }

  .elp-btn--nav {
    font-size: 0.78rem;
  }

  .elp-glass-note {
    width: min(188px, 78%);
  }

  .elp-note-label,
  .elp-note-copy {
    font-size: 0.8rem;
  }

  .elp-anno {
    font-size: 0.78rem;
  }
}

@media (max-width: 340px) {
  .elp-hero-inner {
    padding-top: 96px;
  }

  .elp-btn--nav {
    padding-inline: 0.7rem;
  }

  .elp-cta-row .elp-btn {
    width: 100%;
  }

  /*
   * Rev-5 P0-01 residual — at 320 the price column leaves 167.9px for the CTA
   * and its content box is 173px, so 5.1px still ran past the section edge.
   * Trimming the horizontal padding recovers 6.4px; the label and the 48px
   * target are unchanged.
   */
  .elp-offer-price .elp-btn {
    padding-inline: 0.9rem;
  }
}

/* ===== D-013 seasonal callout — start ===== */

/*
 * Report insert between Section C (three-step process) and Section D (dark
 * evaluation overview). Everything here is namespaced `elp-callout-*`; no shared
 * primitive is modified. Deleting this block plus the one render line in
 * src/pages/ecommerce-store-evaluation.astro returns the page to pre-D-013.
 *
 * Material: paper, not glass — flat Silver with two washes and one rule set.
 * No radius, no shadow, no blur, so no @supports fallback branch is needed.
 * No motion of its own: only the inherited `.elp-btn` arrow affordance moves.
 */

.elp-callout {
  position: relative;
  padding-block: 48px 52px;
  background-color: var(--elp-silver);
  background-image:
    linear-gradient(180deg, #edf3f2 0%, rgba(237, 243, 242, 0) 34%),
    linear-gradient(180deg, rgba(35, 114, 122, 0) 46%, rgba(35, 114, 122, 0.055) 100%);
  color: var(--elp-ink);
}

/*
 * M4 R4 / P2-02 — rows are `auto 1fr`, not the implicit `1fr 1fr`.
 *
 * The body spans both rows, so equal rows split the band and pushed the action
 * to mid-height (82.1 px under the heading at 1440, 88.5 at 1024, spec +20).
 * An `auto` first row is exactly the masthead's height, so the 20 px action
 * margin is the whole offset; row 2 still absorbs the body, so band height and
 * the `.elp-callout-action` DOM/focus position are unchanged.
 */
.elp-callout-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.62fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    'head body'
    'action body';
  align-items: start;
  column-gap: clamp(40px, 4.4vw, 64px);
}

.elp-callout-head {
  grid-area: head;
}

/* The eyebrow sits on Silver, where --elp-muted falls under 4.5:1 (same rule
   the FAQ already applies). Ink-2 keeps it secondary and clears the threshold. */
.elp-callout .elp-eyebrow {
  margin-bottom: var(--elp-space-4);
  color: var(--elp-ink-2);
}

.elp-callout-title {
  margin: 0;
  color: var(--elp-ink);
  font-family: var(--elp-font-display);
  font-size: clamp(1.6rem, 2vw, 1.8rem);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.14;
  text-wrap: balance;
}

/* The 1.6rem floor is deliberate: the teal clause is only allowed as large
   text (>=24px, 3:1), so it must never fall back to body size. */
.elp-callout-title em {
  color: var(--elp-teal);
  font-style: italic;
}

/* P2-02 — the action row is as tall as the band remainder; `align-self: start`
   pins the control to the top of it. DOM and focus order are unchanged. */
.elp-callout-action {
  grid-area: action;
  align-self: start;
  margin-top: 20px;
}

/* Outline, never lime: the nav's Signal pill is on screen at the same time and
   the page allows one Signal action per viewport. The ring is stronger than
   `.elp-btn--outline`'s hairline because 1.4.11 applies to this boundary. */
.elp-callout-cta {
  border: 1px solid rgba(10, 26, 33, 0.55);
  background: transparent;
  color: var(--elp-ink);
}

.elp-callout-cta:hover {
  border-color: rgba(10, 26, 33, 0.72);
  background: rgba(10, 26, 33, 0.05);
}

.elp-callout-body {
  grid-area: body;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  column-gap: 0;
}

.elp-callout-dateline {
  grid-column: 1 / -1;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(10, 26, 33, 0.12);
  color: var(--elp-ink-2);
  font-size: clamp(1rem, 1.1vw, 1.16rem);
  line-height: 1.55;
  text-wrap: balance;
}

.elp-callout-col {
  color: var(--elp-ink-2);
  font-size: clamp(1rem, 1.1vw, 1.16rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.elp-callout-col:nth-of-type(1) {
  padding-right: 20px;
}

.elp-callout-col:nth-of-type(2) {
  padding-left: 20px;
  border-left: 1px solid rgba(10, 26, 33, 0.1);
}

.elp-callout-col p {
  margin: 0 0 10px;
}

.elp-callout-col p:last-child {
  margin-bottom: 0;
}

/* The source's bold question, kept in flow as a pull-question. The Signal bar
   is the page's existing marker language and carries no meaning on its own. */
.elp-callout-pull {
  display: block;
  margin-top: 6px;
  padding-left: 14px;
  border-left: 2px solid var(--elp-signal);
  color: var(--elp-ink);
  font-family: var(--elp-font-display);
  font-size: 1.2em;
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
}

/* Body internal grid collapses to one measure below 1200: the column rule and
   both inner paddings drop, so the fixed split point is invisible (the
   paragraph gap is identical inside and between the two blocks). */
@media (max-width: 1199px) {
  .elp-callout-body {
    grid-template-columns: 1fr;
  }

  .elp-callout-col:nth-of-type(1),
  .elp-callout-col:nth-of-type(2) {
    padding-right: 0;
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 1099px) {
  .elp-callout-grid {
    column-gap: clamp(32px, 4vw, 48px);
  }
}

/*
 * M4 R4 / P2-01 — masthead floor in the 720–1099 band.
 *
 * The 0.78 split gave the masthead 244.9 px at 860 and 200.2 at 720. The
 * eyebrow needs ~241 px (24 dash + 12 gap + 205.4 of tracked uppercase) so it
 * wrapped, and the heading ran to five lines ending in two single-word lines.
 * A 300 px floor — the width the addendum already expects at 768 — holds the
 * eyebrow on one line and the heading at three. The fraction still governs
 * from ~1010 px up, so 1099/1024 keep the two-zone proportion.
 */
@media (min-width: 720px) and (max-width: 1099px) {
  .elp-callout-grid {
    grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.62fr);
  }
}

@media (max-width: 719px) {
  .elp-callout {
    padding-block: 44px 48px;
  }

  .elp-callout-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      'head'
      'body'
      'action';
    column-gap: 0;
  }

  .elp-callout-body {
    margin-top: 26px;
  }

  .elp-callout-action {
    margin-top: 24px;
  }
}

/* ===== D-013 seasonal callout — end ===== */
/*
 * E-Commerce Store Evaluation — analytics consent banner.
 *
 * Imported only by `src/components/ecom-consent/EcomConsent.astro`, which is
 * mounted only in `EcomLayout.astro`. Every class is `ecc-` prefixed and every
 * token is `--ecc-` prefixed: no global site stylesheet is imported and no
 * global token is read.
 *
 * The `--ecc-` block below is a VERBATIM copy of the landing page's `--elp-`
 * values (Rev-3 D-03-10 precedent: duplicate, never import the approved
 * page's stylesheet, never edit it to share a file). Two additions are new and
 * consent-specific: --ecc-bar-h and --ecc-bar-h-mobile.
 *
 * Material: solid Frost, hairline, soft shadow. Not glass — a translucent light
 * bar over the Depth chapters turns grey and loses its edge, and the page
 * already spends its one blur on the docket.
 *
 * Motion: none. The bar does not slide, fade or animate its height, and the
 * panel opens with a cut. The only transitions are the inherited 120ms colour
 * affordances.
 */

.ecc {
  /* Colour roles — values identical to ecom-eval.css. */
  --ecc-frost: #f6f8f6;
  --ecc-silver: #e5eceb;
  --ecc-signal: #c5ff43;
  --ecc-teal: #23727a;
  --ecc-teal-bright: #7fccc8;
  --ecc-depth: #061a22;
  --ecc-ink: #0a1a21;
  --ecc-ink-2: #1f3740;
  --ecc-muted: #607079;
  --ecc-frost-ink: #f6f8f6;

  --ecc-font-display: Georgia, 'Times New Roman', 'Liberation Serif', serif;
  --ecc-font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --ecc-space-1: 4px;
  --ecc-space-2: 8px;
  --ecc-space-3: 16px;
  --ecc-space-4: 24px;
  --ecc-space-5: 32px;
  --ecc-space-6: 48px;
  --ecc-space-7: 72px;
  --ecc-space-8: clamp(68px, 8vw, 125px);

  --ecc-radius-pill: 999px;
  --ecc-hairline-light: 1px solid rgba(10, 26, 33, 0.14);
  --ecc-hairline-dark: 1px solid rgba(246, 248, 246, 0.16);
  --ecc-dash-placeholder: 2px dashed rgba(96, 112, 121, 0.45);
  --ecc-t-state: 240ms;
  --ecc-ease: cubic-bezier(0.2, 0.6, 0.2, 1);

  /* Consent-specific measurements (Rev-4 §2.2). */
  /* Consent-specific measurements (Rev-4 spec 2.2; compacted in Rev-5 A3).
     These are the ACTUAL compact bar heights and are used by the panel cap, so
     they must be at least the rendered height. */
  --ecc-bar-h: 64px;
  --ecc-bar-h-mobile: 128px;
}

/* ---------------------------------------------------------------- placement */

/*
 * The banner is mounted OUTSIDE `.elp-scope`, so it does not inherit the
 * landing page's border-box reset. Without this, `.elp-container` measures
 * 1440px + 2 gutters and the preference panel's controls sit off-canvas at
 * 1440 — caught in browser measurement, not by reading the CSS.
 */
.ecc,
.ecc *,
.ecc *::before,
.ecc *::after {
  box-sizing: border-box;
}

.ecc {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  /* Below the nav bar (100) so the mobile sheet always covers it. */
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--ecc-frost);
  border-top: 1px solid rgba(10, 26, 33, 0.14);
  box-shadow: 0 -18px 40px -24px rgba(6, 26, 34, 0.45);
  color: var(--ecc-ink);
  font-family: var(--ecc-font-sans);
  /* A bar, not a card. */
  border-radius: 0;
}

.ecc :focus-visible {
  outline: 2px solid var(--ecc-teal);
  outline-offset: 3px;
}

.ecc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------- bar */

.ecc-bar-inner {
  display: grid;
  /* Two zones, not three: the copy block owns the reading measure and the
     controls keep their own column. A fixed-width title column used to squeeze
     the body to 288px at 1024 and cost 43px of bar height. */
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 32px;
  row-gap: 6px;
  align-items: center;
  padding-block: 12px max(12px, env(safe-area-inset-bottom));
}

.ecc-copy {
  min-width: 0;
}

.ecc-rider {
  color: var(--ecc-ink-2);
  font-style: italic;
}

.ecc-title {
  margin: 0;
  color: var(--ecc-depth);
  font-family: var(--ecc-font-display);
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.2;
}

.ecc-body {
  margin: 3px 0 0;
  max-inline-size: 72ch;
  color: var(--ecc-ink-2);
  font-size: 0.86rem;
  line-height: 1.42;
  /* Keeps the closing link off a nearly empty last line at narrow widths. */
  text-wrap: pretty;
}

.ecc-body a {
  color: var(--ecc-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ecc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* Accept and Reject are deliberately identical: same height, padding, border,
   fill, type. Neither is lime — Signal belongs to the purchase CTA. */
.ecc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(10, 26, 33, 0.5);
  border-radius: var(--ecc-radius-pill);
  background: transparent;
  color: var(--ecc-ink);
  font-family: var(--ecc-font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 120ms var(--ecc-ease),
    border-color 120ms var(--ecc-ease);
}

.ecc-btn:hover {
  border-color: var(--ecc-ink);
  background: rgba(10, 26, 33, 0.04);
}

.ecc-btn--text {
  border-color: transparent;
  padding-inline: 6px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.ecc-btn--text:hover {
  border-color: transparent;
  background: transparent;
  color: var(--ecc-teal);
}

/* Save is the site's SYSTEM control — a dark pill, never a Signal CTA. */
.ecc-btn--solid {
  border-color: var(--ecc-depth);
  background: var(--ecc-depth);
  color: var(--ecc-frost);
  padding-inline: 1.25rem;
}

.ecc-btn--solid:hover {
  border-color: var(--ecc-depth);
  background: #0d2c33;
}

.ecc-status {
  grid-column: 1 / -1;
  margin: 0;
  /* Depth, not Teal: the status line is 0.8rem, and the teal only reaches
     3.6:1 on Frost. A confirmation message has to be readable first. */
  color: var(--ecc-depth);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
}

.ecc-status:empty {
  display: none;
}

/* -------------------------------------------------------------------- panel */

.ecc-panel {
  /* Visually above the bar; later in the DOM so keyboard order runs
     Accept → Reject → Preferences → switches → Save → Cancel. */
  order: -1;
  background: var(--ecc-frost);
  border-top: 1px solid rgba(10, 26, 33, 0.14);
  box-shadow: 0 -18px 40px -24px rgba(6, 26, 34, 0.45);
}

.ecc-panel-inner {
  /*
   * Rev-5 P1-02 — the panel is capped against the BAR height, not the viewport
   * alone. The old `calc(100dvh - 32px)` cap let a 524px panel sit above a
   * 142px bar in a fixed 568px viewport, putting the top of the panel at -98px
   * and the Close button off-screen with no scroll. Subtracting the mounted bar
   * height plus a 16px gap guarantees panel top >= 16px at every viewport.
   */
  max-height: min(560px, calc(100dvh - var(--ecc-bar-h) - 80px));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  /* R2 P2-02: the bottom inset moved into the sticky actions row, so the row
     can sit flush with the panel edge when the panel is scrolled. */
  padding-block: 20px 0;
}

.ecc-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(10, 26, 33, 0.14);
}

.ecc-panel-title {
  margin: 0;
  color: var(--ecc-depth);
  font-family: var(--ecc-font-display);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.2;
}

.ecc-panel-title:focus-visible {
  outline: 2px solid var(--ecc-teal);
  outline-offset: 4px;
}

/* The purchase-safety reassurance moved here: it is real information, but it
   does not belong in the bar's fixed height budget. */
.ecc-panel-lead {
  margin: 12px 0 0;
  max-inline-size: 62ch;
  color: var(--ecc-ink-2);
  font-size: 0.86rem;
  line-height: 1.5;
}

.ecc-group-label {
  margin: 18px 0 0;
  color: var(--ecc-muted);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.ecc-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 24px;
  padding-block: 14px;
  border-bottom: 1px solid rgba(10, 26, 33, 0.14);
}

.ecc-row--static {
  display: block;
  padding-top: 16px;
}

.ecc-row-text {
  min-width: 0;
}

.ecc-row-label {
  display: block;
  margin: 0;
  color: var(--ecc-ink);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
}

.ecc-row-desc {
  margin: 4px 0 0;
  max-inline-size: 46ch;
  color: var(--ecc-ink-2);
  font-size: 0.86rem;
  line-height: 1.45;
}

/* Real switch: a checkbox with role="switch". Off by default, always. */
.ecc-switch {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 26px;
  margin: 2px 0 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(10, 26, 33, 0.5);
  border-radius: var(--ecc-radius-pill);
  background: transparent;
  cursor: pointer;
  transition: background-color 120ms var(--ecc-ease);
}

.ecc-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(10, 26, 33, 0.55);
  transition:
    transform 120ms var(--ecc-ease),
    background-color 120ms var(--ecc-ease);
}

.ecc-switch:checked {
  border-color: var(--ecc-teal);
  background: var(--ecc-teal);
}

.ecc-switch:checked::after {
  transform: translateX(20px);
  background: var(--ecc-frost);
}

.ecc-switch:focus-visible {
  outline: 2px solid var(--ecc-teal);
  outline-offset: 3px;
}

.ecc-panel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  /*
   * R2 P2-02 — pinned to the bottom of the panel's scroll port so Save and
   * Cancel stay reachable without scrolling at 320x568 and 390x600, where the
   * panel cap is set by the mounted bar height. The row paints on the panel's
   * own Frost, so content scrolls behind it without a seam; the parent's bottom
   * inset moved here (12px cover above, 24px below) so the row is flush with
   * the panel edge when scrolled.
   */
  position: sticky;
  inset-block-end: 0;
  z-index: 1;
  background: var(--ecc-frost);
  margin-top: 6px;
  padding-block: 12px 24px;
}

/* ------------------------------------------------ non-obstruction contract */

/*
 * "Nothing focused is ever covered" (§2.2). The bar overlays the page — that is
 * what a bottom-edge banner means — so any control scrolled into view by the
 * keyboard clears it. Only in effect while a banner is actually mounted.
 */
body:has(.ecc:not([hidden])) .elp-scope :is(a, button, input, textarea, select, summary, [tabindex]):focus {
  scroll-margin-block-end: 200px;
}

/*
 * At the very bottom of the document there is nothing left to scroll, so the
 * last focusable elements (the footer legal row) could never clear the bar.
 * The footer therefore reserves the bar's height while a banner is mounted —
 * on the footer itself, so its dark surface still reaches the page edge and no
 * light strip appears below it.
 */
body:has(.ecc:not([hidden])) .elp-footer {
  padding-block-end: 104px;
}

@media (max-width: 1099px) {
  body:has(.ecc:not([hidden])) .elp-footer {
    padding-block-end: 104px;
  }
}

@media (max-width: 899px) {
  body:has(.ecc:not([hidden])) .elp-footer {
    padding-block-end: 160px;
  }
}

@media (max-width: 359px) {
  body:has(.ecc:not([hidden])) .elp-footer {
    padding-block-end: 160px;
  }
}

/* ---------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .ecc-btn,
  .ecc-switch,
  .ecc-switch::after {
    transition: none;
  }
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1099px) {
  .ecc-bar-inner {
    column-gap: 24px;
  }
}

/*
 * Below 900 a two-zone bar cannot hold a readable body measure beside three
 * 44px controls, so the bar stacks here (one breakpoint earlier than the design
 * note's 719): the controls keep a single row and the copy gets the full width.
 */
@media (max-width: 899px) {
  .ecc-bar-inner {
    grid-template-columns: 1fr;
    row-gap: 6px;
    padding-block: 10px max(10px, env(safe-area-inset-bottom));
  }

  .ecc-title {
    font-size: 1rem;
  }

  .ecc-body {
    margin-top: 2px;
    font-size: 0.8rem;
    line-height: 1.35;
  }

  /* Identical three choices, identical order — they wrap, they are not
     re-cut into a "simplified" mobile variant. */
  .ecc-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
  }

  .ecc-actions .ecc-btn {
    flex: 1 1 auto;
  }

  .ecc-panel-inner {
    max-height: min(560px, calc(100dvh - var(--ecc-bar-h-mobile) - 80px));
    padding-block: 16px 0;
  }

  /* R2 P2-02: same 20px bottom inset the panel carried before the row became
     sticky, so the panel's outer height is unchanged at this width. */
  .ecc-panel-actions {
    padding-block: 12px 20px;
  }
}

@media (max-width: 359px) {
  /* Both decision buttons keep identical padding; only the shared value
     shrinks so the three controls stay on one row at 320. */
  .ecc-actions .ecc-btn {
    padding-inline: 10px;
    font-size: 0.82rem;
  }

  /* One type step down, shared by the whole paragraph, so the notice stays
     under the 390 budget at 320 without dropping the disclosure or the link. */
  .ecc-body {
    font-size: 0.78rem;
    line-height: 1.35;
  }
}

/* ------------------------------------------- Rev-5 compaction: small screens */

/*
 * At <=430 the bar is at the tightest composition that still keeps the full
 * disclosure, the preview rider, three equal-weight 44px controls and the
 * privacy link. The heading moves to the accessibility tree only (it remains
 * the region's accessible name through aria-labelledby), so the height budget
 * goes to the notice rather than to a 20px line of display type.
 */
@media (max-width: 430px) {
  .ecc-bar-inner {
    row-gap: 3px;
    padding-block: 6px max(6px, env(safe-area-inset-bottom));
  }

  .ecc-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .ecc-body {
    margin-top: 0;
    font-size: 0.78rem;
    line-height: 1.28;
  }

  .ecc-actions {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .ecc-actions .ecc-btn {
    flex: 1 1 auto;
    padding-inline: 8px;
  }

  /* Tighter allowance than the 899px token: the compact bar is 107px, so this
     keeps the panel top at ~19px instead of 36px and shows more of the panel. */
  .ecc-panel-inner {
    max-height: min(560px, calc(100dvh - 110px - 80px));
  }
}

/* ------------------------------- Rev-5 dismissal: after a decision is made */

/*
 * The bar is not dismissible without a decision (spec: no opt-out-free close),
 * and on a 568px-tall viewport a 113px bar necessarily sits over the hero's
 * lower controls. So a decision collapses the bar to its confirmation line: the
 * live region stays visible and announced, the obstruction drops to ~34px, and
 * the remaining height no longer covers a 44px control. Opening the panel from
 * the footer restores the full bar so the choices stay reviewable.
 */
.ecc[data-ecc-decided] .ecc-bar-inner > .ecc-copy,
.ecc[data-ecc-decided] .ecc-bar-inner > .ecc-actions {
  display: none;
}

/* ----------------------------------------- Rev-5 compaction: desktop widths */

/*
 * One row: heading | notice | controls. A stacked heading + two-line notice +
 * 44px control row measured 85.66px; putting the heading in its own column
 * removes it from the height budget (the 44px controls and the two-line notice
 * are now the tallest items), against the 72px target at >=1024.
 */
@media (min-width: 900px) {
  .ecc-bar-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 20px;
    row-gap: 0;
    padding-block: 10px max(10px, env(safe-area-inset-bottom));
  }

  /* The heading and the notice become grid items in their own columns. */
  .ecc-copy {
    display: contents;
  }

  .ecc-title {
    align-self: center;
    white-space: nowrap;
  }

  .ecc-body {
    margin-top: 0;
    max-inline-size: none;
    align-self: center;
  }

  .ecc-actions {
    grid-column: 3;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
}