/* ============================================================
   ELUZA — uploads site stylesheet (Option A)
   Imports the modular Design System, then applies only the
   uploads-specific overrides documented below.
   ============================================================ */

@import "./styles.css";

/* ----------------------------------------------------------
   Uploads overrides (documented)
   1. Skip link — not in modular foundations
   2. Footer group styles used by marketing chrome
   3. Mobile nav toggle — modular responsive.css hides
      .elz-header__nav under 768px; this adds Open/Close menu
   4. Utility helpers used by page-local forms
   ---------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--elz-black);
  color: var(--elz-white);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  z-index: 200;
}

.skip-link:focus {
  left: var(--space-4);
  top: var(--space-4);
}

.elz-header__nav a[aria-current="page"] {
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
}

.site-footer__group-title {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--elz-dust);
  margin-bottom: var(--space-3);
}

.site-footer__links a {
  display: block;
  font-size: var(--text-md);
  color: var(--elz-dust);
  padding: var(--space-1) 0;
}

@media (hover: hover) and (pointer: fine) {
  .site-footer__links a:hover {
    color: var(--elz-white);
  }
}

/* Mobile nav toggle */
.elz-header__menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.elz-header__menu-toggle[aria-expanded="true"] {
  border-color: var(--elz-black);
}

@media (max-width: 768px) {
  .elz-header__menu-toggle {
    display: inline-flex;
  }

  .elz-header__nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) 0 var(--space-2);
    border-top: 1px solid var(--color-border);
  }

  .elz-header__nav.is-open {
    display: flex;
  }

  .elz-header__inner {
    flex-wrap: wrap;
  }

  .elz-header__nav a {
    white-space: normal;
  }
}

/* Form helpers shared across Fit Call / Get Started / Briefing */
.ack-box {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-subtle);
  margin-top: var(--space-5);
  text-align: left;
}

.ack-box input[type="checkbox"] {
  margin-top: 5px;
  width: 16px;
  height: 16px;
  accent-color: var(--elz-black);
  flex-shrink: 0;
}

.ack-box label {
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--color-text-secondary);
  cursor: pointer;
}

.w-full {
  width: 100%;
  display: inline-flex;
  justify-content: center;
}

.btn--on-dark {
  background: var(--elz-white);
  color: var(--elz-black);
  border-color: var(--elz-white);
}

@media (hover: hover) and (pointer: fine) {
  .btn--on-dark:hover {
    background: var(--elz-kingly);
    border-color: var(--elz-kingly);
    color: var(--elz-black);
  }
}

/* ----------------------------------------------------------
   Home — static Blueprint artifact
   ---------------------------------------------------------- */
/* ----------------------------------------------------------
   /blueprint/ — document language, scoped to the page only.
   The global .card is deliberately untouched.
   ---------------------------------------------------------- */
/* Shares the artifact's left edge instead of the container's, so the heading
   and the document it introduces sit on the same grid line. */
.blueprint-page__lede {
  max-width: 1120px;
  margin-right: auto;
  margin-left: auto;
}

.blueprint-page__lede > * {
  max-width: var(--max-width-2xl);
}

.blueprint-page main .card {
  border-radius: 0;
  border-color: var(--color-border);
  box-shadow: none;
  background: var(--color-surface);
}

.blueprint-page main .section-subtle .card {
  background: var(--color-surface);
}

/* Private Travel File chrome: subtle elevation for homepage artifacts. */
.home-blueprint {
  max-width: 1120px;
  margin: var(--space-8) auto 0;
  overflow: hidden;
  border: 1px solid var(--color-border-elevated);
  border-radius: 0;
  background: var(--color-surface);
  color: inherit;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}

.home-blueprint__topbar,
.home-blueprint__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--elz-black);
  color: var(--elz-white);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.13em;
  line-height: var(--leading-relaxed);
  text-transform: uppercase;
}

.home-blueprint__body {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
}

.home-blueprint__cover,
.home-blueprint__index {
  min-width: 0;
  padding: var(--space-10);
}

@media (min-width: 1200px) {
  .home-blueprint__cover,
  .home-blueprint__index {
    padding: var(--space-12);
  }
}

.home-blueprint__cover {
  display: flex;
  flex-direction: column;
  min-height: 420px;
  border-right: 1px solid var(--color-border);
}

.home-blueprint__kicker,
.home-blueprint__index-label {
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.14em;
  line-height: var(--leading-relaxed);
  text-transform: uppercase;
}

/* The artifact is proof, not the headline: the cover title is held at
   60–70% of .hero__title at every breakpoint, so the page H1 always wins.
   H1 is --text-9xl (52px), redefined to 28px at <=768px in responsive.css. */
.home-blueprint__cover h2,
.home-blueprint__title {
  max-width: 20ch;
  margin-top: var(--space-5);
  color: var(--color-text-primary);
  font-size: var(--text-6xl); /* 32px = 61.5% of 52px */
  font-weight: var(--weight-regular);
  line-height: 1.04; /* never below 1.02 — 0.98 collided descenders */
  letter-spacing: -0.02em;
}

@media (max-width: 768px) {
  /* --text-8xl and --text-5xl are redefined to 32px / 22px at this breakpoint
     in responsive.css. Raising the Home H1 to 32px restores editorial
     authority to the cover at 22px while holding the ratio at 68.75%. */
  .home-page .hero__title {
    font-size: var(--text-8xl);
  }

  .home-blueprint__cover h2,
  .home-blueprint__title {
    font-size: var(--text-5xl); /* 22px = 68.75% of 32px */
    letter-spacing: -0.01em;
  }
}

.home-blueprint__case {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: auto 0 0;
  padding-top: var(--space-8);
}

.home-blueprint__case div {
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.home-blueprint__case dt,
.home-blueprint__metrics dd {
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  line-height: var(--leading-relaxed);
  text-transform: uppercase;
}

.home-blueprint__case dd {
  margin-top: 2px;
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.home-blueprint__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.home-blueprint__metrics div {
  padding-top: var(--space-3);
  border-top: 2px solid var(--elz-black);
}

.home-blueprint__metrics dt {
  color: var(--color-text-primary);
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
}

.home-blueprint__metrics dd {
  margin-top: var(--space-1);
}

.home-blueprint__index {
  background: var(--color-surface-subtle);
}

.home-blueprint__index ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-5);
  padding: 0;
  margin: var(--space-4) 0 0;
  list-style: none;
}

.home-blueprint__index li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: center;
  min-height: 39px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.home-blueprint__index li span {
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
}

.home-blueprint__index li.is-highlighted {
  color: var(--color-text-primary);
  font-weight: var(--weight-semi-bold);
}

.home-blueprint__footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-tertiary);
}

/* This is the only route from the Hero to the product page, so it must read as
   an action — not as the caption sitting next to it. Sentence case, larger than
   the surrounding chrome, permanently underlined, 44px tall. */
/* `a` qualifier is required: reset.css `a:not(.btn)` (0,1,1) outranks a bare
   class selector and would strip the underline. */
a.home-blueprint__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  color: var(--color-text-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semi-bold);
  letter-spacing: normal;
  text-transform: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 5px;
  transition:
    color var(--duration-fast) var(--ease-out),
    text-decoration-color var(--duration-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  a.home-blueprint__cta:hover {
    text-decoration-color: currentColor;
  }
}

@media (max-width: 900px) {
  .home-blueprint {
    max-width: 760px;
  }

  .home-blueprint__body {
    display: block;
  }

  .home-blueprint__cover {
    min-height: 0;
    border-right: 0;
  }

  .home-blueprint__index {
    display: none;
  }
}

@media (max-width: 640px) {
  .home-blueprint {
    margin-top: var(--space-6);
  }

  .home-blueprint__topbar,
  .home-blueprint__footer {
    align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    font-size: 0.625rem;
  }

  .home-blueprint__topbar span:last-child {
    text-align: right;
  }

  .home-blueprint__cover {
    padding: var(--space-5) var(--space-4);
  }

  .home-blueprint__cover h2 {
    margin-top: var(--space-4);
  }

  .home-blueprint__case {
    padding-top: var(--space-6);
  }

  /* Held below the cover title (22px) so the cover still leads the artifact. */
  .home-blueprint__metrics dt {
    font-size: var(--text-2xl);
  }

  .home-blueprint__footer {
    flex-direction: column;
  }

  .home-blueprint__footer > span {
    display: none;
  }
}

@media (max-width: 420px) {
  .home-blueprint__case,
  .home-blueprint__metrics {
    gap: var(--space-2);
  }
}

/* ----------------------------------------------------------
   Homepage — restrained pacing + mobile conversion
   ---------------------------------------------------------- */

.hero--home {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero--home > .container {
  width: 100%;
}

.hero--home .home-blueprint {
  margin-top: 56px;
}

.hero__proof {
  max-width: 62ch;
  margin-top: var(--space-4);
  color: var(--color-text-tertiary);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.home-page main .body-lg {
  max-width: 68ch;
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
}

.home-page main .body-md {
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
}

.home-page main .label,
.home-page main .eyebrow,
.home-page main .caption {
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
}

.home-page .text-center .body-lg {
  margin-right: auto;
  margin-left: auto;
}

.home-section-copy {
  width: 100%;
  max-width: var(--max-width-xl);
  margin-right: auto;
  margin-left: auto;
}

/* The HM-05 heading must sit on the same grid line as the artifact it
   introduces. Centring the 720px measure inside the container pushed it 200px
   inboard; `margin-left: 0` alone overshoots to the container edge, 16px
   outboard of the 1120px artifact. Match the artifact box, then hold the
   reading measure on the children. */
.home-page #home-blueprint-intro .home-section-copy {
  max-width: 1120px;
  margin-right: auto;
  margin-left: auto;
}

.home-page #home-blueprint-intro .home-section-copy > * {
  max-width: var(--max-width-xl);
}

.home-recognition-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.home-recognition-point {
  padding: var(--space-5) var(--space-4) 0 0;
  border-top: 1px solid var(--color-border-strong);
}

.home-recognition-point .body-lg {
  margin: 0;
  font-size: var(--text-lg);
}

.home-contrast {
  display: grid;
  gap: var(--space-3);
}

.home-contrast__a,
.home-contrast__b {
  display: block;
}

.home-contrast__a {
  color: var(--elz-dust);
  font-weight: var(--weight-normal);
}

.home-contrast__b {
  color: var(--elz-white);
}

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

@media (min-width: 769px) {
  .home-contrast {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: start;
  }
}

/* ----------------------------------------------------------
   HM-05 — progressively enhanced Blueprint explorer
   ---------------------------------------------------------- */

.blueprint-explorer {
  max-width: 1120px;
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
  border: 1px solid var(--color-border-elevated);
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}

.blueprint-explorer__header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--elz-black);
  color: var(--elz-white);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.13em;
  line-height: var(--leading-relaxed);
  text-transform: uppercase;
}

.blueprint-explorer__layout {
  display: grid;
  grid-template-columns: minmax(210px, 25%) minmax(0, 75%);
  min-height: 610px;
}

.blueprint-explorer__nav {
  padding: var(--space-5) var(--space-4);
  border-right: 1px solid var(--color-border);
  background: var(--color-surface-subtle);
}

.blueprint-explorer__nav a {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: start;
  gap: var(--space-2);
  padding: var(--space-3);
  border-left: 2px solid transparent;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  text-decoration: none;
}

.blueprint-explorer__nav a span {
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

.blueprint-explorer__nav a[aria-selected="true"],
.blueprint-explorer__nav a.is-active {
  border-left-color: var(--elz-black);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-weight: var(--weight-semi-bold);
}

.blueprint-explorer__nav a:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--elz-black);
  outline-offset: 2px;
}

.blueprint-explorer__panels {
  min-width: 0;
  background: var(--color-surface);
}

.blueprint-extract {
  min-height: 100%;
  padding: clamp(var(--space-6), 5vw, var(--space-10));
  border-bottom: 1px solid var(--color-border);
}

.blueprint-extract:last-child {
  border-bottom: 0;
}

.blueprint-explorer.is-enhanced .blueprint-extract {
  border-bottom: 0;
}

.blueprint-extract__eyebrow,
.blueprint-extract__summary span,
.blueprint-extract__decision > p:first-child,
.blueprint-extract__boundaries > div > p {
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.13em;
  line-height: var(--leading-relaxed);
  text-transform: uppercase;
}

.blueprint-extract__title {
  max-width: 18ch;
  margin-top: var(--space-3);
  color: var(--color-text-primary);
  font-size: clamp(2.25rem, 4.5vw, 4rem);
  font-weight: var(--weight-regular);
  letter-spacing: -0.025em;
  line-height: 1.04;
}

.blueprint-extract__lead {
  max-width: 48ch;
  margin-top: var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
}

.blueprint-extract__summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.blueprint-extract__summary div {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.blueprint-extract__summary span,
.blueprint-extract__summary strong {
  display: block;
}

.blueprint-extract__summary strong {
  margin-top: var(--space-2);
  color: var(--color-text-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semi-bold);
  line-height: var(--leading-relaxed);
}

.blueprint-extract__decision {
  margin-top: var(--space-7);
  padding: var(--space-5);
  border-left: 3px solid var(--elz-black);
  background: var(--color-surface-subtle);
}

.blueprint-extract__decision > p:last-child {
  max-width: 56ch;
  margin-top: var(--space-2);
  color: var(--color-text-primary);
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
}

.blueprint-extract__route {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.blueprint-extract__route div {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-4);
  border-top: 2px solid var(--elz-black);
  background: var(--color-surface-subtle);
}

.blueprint-extract__route span,
.blueprint-extract__order span,
.blueprint-extract__risks span {
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

.blueprint-extract__route strong {
  color: var(--color-text-primary);
  font-size: var(--text-lg);
  font-weight: var(--weight-semi-bold);
}

.blueprint-extract__route small {
  grid-column: 2;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.blueprint-extract__omissions,
.blueprint-extract__order,
.blueprint-extract__risks {
  padding: 0;
  margin: var(--space-8) 0 0;
  list-style: none;
}

.blueprint-extract__omissions li,
.blueprint-extract__order li {
  display: grid;
  grid-template-columns: minmax(72px, 0.7fr) minmax(0, 1.5fr) minmax(0, 1.3fr);
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
}

.blueprint-extract__omissions li > span {
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.blueprint-extract__omissions strong,
.blueprint-extract__order strong {
  color: var(--color-text-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semi-bold);
  line-height: var(--leading-relaxed);
}

.blueprint-extract__omissions small,
.blueprint-extract__order small {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.blueprint-extract__order li {
  grid-template-columns: 2rem minmax(0, 1.5fr) minmax(0, 1fr);
}

.blueprint-extract__risks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-6);
}

.blueprint-extract__risks li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--space-2);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-primary);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.blueprint-extract__boundaries {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.blueprint-extract__boundaries > div {
  padding: var(--space-5);
  border-top: 2px solid var(--elz-black);
  background: var(--color-surface-subtle);
}

.blueprint-extract__boundaries ul {
  padding-left: 1.1rem;
  margin: var(--space-3) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
}

.blueprint-extract__note {
  margin-top: var(--space-6);
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.blueprint-deliverables {
  max-width: 1120px;
  margin-right: auto;
  margin-left: auto;
}

.blueprint-deliverables__facts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--color-border-strong);
  border-bottom: 1px solid var(--color-border-strong);
}

.blueprint-deliverables__facts div {
  padding: var(--space-4);
  border-right: 1px solid var(--color-border);
}

.blueprint-deliverables__facts div:last-child {
  border-right: 0;
}

.blueprint-deliverables__facts dt {
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.blueprint-deliverables__facts dd {
  margin-top: var(--space-2);
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi-bold);
  line-height: var(--leading-relaxed);
}

/* Legally required wording, kept verbatim. It precedes the facts strip and is
   set as an analytical note — not as the highest-contrast element on the page,
   and no longer the last thing read before the purchase CTA. */
.blueprint-deliverables__boundary {
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--color-border-strong);
  background: var(--color-surface);
}

.blueprint-deliverables__boundary p {
  max-width: 90ch;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
}

.blueprint-deliverables__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* HM-05 — Pricing card (Private Travel File invoice style) */
.blueprint-pricing-card {
  overflow: hidden;
  border: 1px solid var(--color-border-elevated);
  background: var(--color-surface);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}

.blueprint-pricing-card__header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--elz-black);
  color: var(--elz-white);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.13em;
  line-height: var(--leading-relaxed);
  text-transform: uppercase;
}

.blueprint-pricing-card__list {
  list-style: none;
  margin: 0;
  padding: var(--space-5) var(--space-5) var(--space-4);
}

.blueprint-pricing-card__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
}

.blueprint-pricing-card__item:last-child {
  border-bottom: 0;
}

.blueprint-pricing-card__check {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: 0.2em;
  border: 1.5px solid var(--elz-black);
  position: relative;
}

.blueprint-pricing-card__check::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 0;
  width: 5px;
  height: 9px;
  border-right: 1.5px solid var(--elz-black);
  border-bottom: 1.5px solid var(--elz-black);
  transform: rotate(45deg);
}

.blueprint-pricing-card__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-subtle);
}

.blueprint-pricing-card__meta div {
  min-width: 0;
}

.blueprint-pricing-card__meta dt {
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.blueprint-pricing-card__meta dd {
  margin: var(--space-2) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.blueprint-pricing-card__footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  border-top: 2px solid var(--elz-black);
  background: var(--color-surface);
}

.blueprint-pricing-card__price-label {
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.blueprint-pricing-card__price {
  color: var(--color-text-primary);
  font-family: var(--font-serif);
  font-size: var(--text-7xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

@media (max-width: 768px) {
  .blueprint-pricing-card__meta {
    grid-template-columns: 1fr;
  }

  .blueprint-pricing-card__price {
    font-size: var(--text-6xl);
  }
}

@media (hover: hover) and (pointer: fine) {
  .blueprint-explorer__nav a:hover {
    background: var(--color-surface);
    color: var(--color-text-primary);
  }
}

@media (max-width: 900px) {
  .blueprint-explorer__layout {
    display: block;
    min-height: 0;
  }

  .blueprint-explorer__nav {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding: var(--space-3) var(--space-4);
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
    scroll-padding-inline: var(--space-4);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .blueprint-explorer__nav a {
    flex: 0 0 auto;
    grid-template-columns: auto 1fr;
    align-items: center;
    min-width: max-content;
    min-height: 44px; /* touch target — the chips measured 34.8px */
    padding: var(--space-2) var(--space-3);
    border-top: 2px solid transparent;
    border-left: 0;
    white-space: nowrap;
  }

  .blueprint-explorer__nav a[aria-selected="true"],
  .blueprint-explorer__nav a.is-active {
    border-top-color: var(--elz-black);
    border-left-color: transparent;
  }

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

  .blueprint-deliverables__facts div {
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .blueprint-deliverables__facts div:nth-child(odd) {
    border-right: 1px solid var(--color-border);
  }

  .blueprint-deliverables__facts div:last-child {
    grid-column: 1 / -1;
    border-bottom: 0;
    border-right: 0;
  }
}

@media (max-width: 640px) {
  .blueprint-explorer__header {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    font-size: 0.625rem;
  }

  .blueprint-extract {
    padding: var(--space-6) var(--space-4);
  }

  .blueprint-extract__title {
    font-size: var(--text-5xl);
  }

  .blueprint-extract__summary,
  .blueprint-extract__route,
  .blueprint-extract__risks,
  .blueprint-extract__boundaries {
    grid-template-columns: 1fr;
  }

  .blueprint-extract__summary {
    gap: var(--space-4);
    margin-top: var(--space-6);
  }

  .blueprint-extract__decision {
    margin-top: var(--space-6);
    padding: var(--space-4);
  }

  .blueprint-extract__omissions li,
  .blueprint-extract__order li {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }

  .blueprint-extract__omissions small,
  .blueprint-extract__order small {
    grid-column: 2;
  }

  .blueprint-deliverables__facts {
    grid-template-columns: 1fr;
  }

  .blueprint-deliverables__facts div,
  .blueprint-deliverables__facts div:nth-child(odd),
  .blueprint-deliverables__facts div:last-child {
    grid-column: auto;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .blueprint-deliverables__facts div:last-child {
    border-bottom: 0;
  }

  .blueprint-deliverables__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .blueprint-deliverables__actions .btn {
    justify-content: center;
  }
}

.blueprint-document-card {
  display: block;
  max-width: 1120px;
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text-primary);
  text-decoration: none;
}

.blueprint-document-card:focus-visible {
  outline: 2px solid var(--elz-black);
  outline-offset: 4px;
}

.blueprint-document-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--elz-black);
  color: var(--elz-white);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.13em;
  line-height: var(--leading-relaxed);
  text-transform: uppercase;
}

.blueprint-document-card__layout {
  display: grid;
  grid-template-columns: minmax(180px, 30%) minmax(0, 70%);
}

.blueprint-document-card__index {
  padding: var(--space-10) var(--space-6);
  border-right: 1px solid var(--color-border);
  background: var(--color-surface-subtle);
}

.blueprint-document-card__index-label,
.blueprint-document-card__eyebrow,
.blueprint-document-card__label {
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  line-height: var(--leading-relaxed);
  text-transform: uppercase;
}

.blueprint-document-card__index ol {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.blueprint-document-card__index li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--space-2);
  padding: var(--space-2);
  border-left: 2px solid transparent;
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.blueprint-document-card__index li span {
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}

.blueprint-document-card__index li.is-active {
  border-left-color: var(--elz-black);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
}

/* Sections shown in the sheet alongside the primary extract. */
.blueprint-document-card__index li.is-open {
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
}

.blueprint-document-card__sheet {
  min-width: 0;
  background: var(--color-surface);
}

.blueprint-document-card__main {
  padding: var(--space-10);
}

@media (min-width: 1200px) {
  .blueprint-document-card__main {
    padding: var(--space-12);
  }
}

.blueprint-document-card__title {
  max-width: 24ch;
  margin-top: var(--space-3);
  font-size: var(--text-6xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
}

/* Below 768px the page H1 drops to 28px (--text-7xl is redefined in
   responsive.css); the document title must stay under it. */
@media (max-width: 768px) {
  .blueprint-document-card__title {
    font-size: var(--text-4xl);
  }
}

/* --- /blueprint/ native extract: sections 14, 09 and 16 --- */

.blueprint-document-card__subtitle {
  max-width: 34ch;
  margin-top: var(--space-3);
  color: var(--color-text-primary);
  font-size: var(--text-4xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}

.blueprint-document-card__actions {
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
}

.blueprint-document-card__actions li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
}

.blueprint-document-card__actions span {
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

.blueprint-document-card__actions strong {
  color: var(--color-text-primary);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-relaxed);
}

.blueprint-document-card__module {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 2px solid var(--elz-black);
}

.blueprint-document-card__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.blueprint-document-card__pair > div {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.blueprint-document-card__pair p + p {
  margin-top: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
}

.blueprint-document-card__close {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--color-border-strong);
  background: var(--color-surface-subtle);
}

.blueprint-document-card__close p {
  max-width: 80ch;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
}

.blueprint-document-card__structures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.blueprint-document-card__structures > div {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.blueprint-document-card__route {
  margin-top: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-loose);
}

.blueprint-document-card__route.is-initial {
  color: var(--color-text-tertiary);
}

.blueprint-document-card__route.is-designed {
  color: var(--color-text-primary);
  font-weight: var(--weight-semi-bold);
}

.blueprint-document-card__decision {
  margin-top: var(--space-8);
  padding: var(--space-5);
  border-left: 3px solid var(--elz-black);
  background: var(--color-surface-subtle);
}

.blueprint-document-card__decision > p:last-child {
  max-width: 52ch;
  margin-top: var(--space-2);
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  line-height: var(--leading-relaxed);
}

.blueprint-document-card__outcomes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: var(--space-6) 0 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
  list-style: none;
}

.blueprint-document-card__outcomes li {
  padding: var(--space-4) var(--space-3) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.blueprint-document-card__outcomes strong {
  color: var(--color-text-primary);
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
}

.blueprint-document-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-10);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-tertiary);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

a.blueprint-document-card__cta {
  flex: 0 0 auto;
  color: var(--color-text-secondary);
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 4px;
  transition:
    color var(--duration-fast) var(--ease-out),
    text-decoration-color var(--duration-fast) var(--ease-out);
}

/* The document card is an <article>, never a whole-card link, so hover state
   belongs to the inner CTA only — no card elevation, no window affordance. */
@media (hover: hover) and (pointer: fine) {
  a.blueprint-document-card__cta:hover {
    color: var(--color-text-primary);
    text-decoration-color: currentColor;
  }
}

.home-case-snap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.home-case-card__title {
  margin-bottom: var(--space-4);
}

.home-case-card__instinct {
  color: var(--color-text-secondary);
}

.home-case-card__decision {
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
}

.home-case-card__compare {
  display: flex;
  flex-direction: row;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.home-case-card__lane {
  flex: 1 1 0;
  min-width: 0;
}

.home-case-card__compare .label {
  margin-bottom: var(--space-2);
}

.home-service-tiers {
  display: grid;
  gap: var(--space-3);
}

.home-service-tier .body-lg {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

a.home-service-tier {
  text-decoration: none;
  color: inherit;
}

.home-service-tier--action {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  cursor: pointer;
  border-color: var(--color-border-elevated);
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.home-service-tier--static {
  cursor: default;
}

.home-service-tier__arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.15em;
  color: var(--color-text-tertiary);
  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .home-service-tier--action:hover {
    border-color: var(--elz-black);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
  }

  .home-service-tier--action:hover .home-service-tier__arrow {
    color: var(--color-text-primary);
    transform: translateX(2px);
  }
}

.home-service-tier--action:focus-visible {
  outline: 2px solid var(--elz-black);
  outline-offset: 2px;
}

.home-final {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.home-final__actions {
  gap: var(--space-3);
  flex-wrap: wrap;
}

.home-final__micro {
  font-size: var(--text-md);
  color: var(--color-text-secondary);
}

.home-final__micro a {
  color: var(--color-text-primary);
}

@media (max-width: 768px) {
  .home-page {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }

  .hero--home {
    min-height: 100svh;
    justify-content: flex-start;
  }

  .home-recognition-cards {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .home-case-snap {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .home-case-snap > .home-case-card {
    width: 100%;
  }

  .home-case-card__compare {
    flex-direction: column;
    gap: var(--space-5);
  }

  /* Horizontal content must never arrive as an empty card. */
  .js-motion .home-case-card[data-elz-reveal],
  .js-motion .home-case-card[data-elz-reveal]:not(.is-visible) {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .blueprint-document-card__header {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
  }

  .blueprint-document-card__layout {
    display: block;
  }

  .blueprint-document-card__index {
    padding: var(--space-4) 0 0;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .blueprint-document-card__index-label {
    padding: 0 var(--space-4);
  }

  .blueprint-document-card__index ol {
    display: flex;
    gap: 0;
    overflow-x: auto;
    padding: 0 var(--space-4) var(--space-3);
    scroll-padding-inline: var(--space-4);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .blueprint-document-card__index li {
    flex: 0 0 auto;
    grid-template-columns: auto 1fr;
    min-width: max-content;
    border-top: 2px solid transparent;
    border-left: 0;
    white-space: nowrap;
  }

  .blueprint-document-card__index li.is-active {
    border-top-color: var(--elz-black);
  }

  .blueprint-document-card__main {
    padding: var(--space-6) var(--space-4);
  }

  .blueprint-document-card__subtitle {
    font-size: var(--text-3xl);
  }

  .blueprint-document-card__module {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
  }

  .blueprint-document-card__pair {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .blueprint-document-card__close {
    padding: var(--space-4);
  }

  .blueprint-document-card__structures {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-top: var(--space-6);
  }

  .blueprint-document-card__decision {
    margin-top: var(--space-6);
    padding: var(--space-4);
  }

  .blueprint-document-card__decision > p:last-child {
    font-size: var(--text-xl);
  }

  .blueprint-document-card__outcomes {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .blueprint-document-card__outcomes li {
    padding-top: var(--space-3);
  }

  .blueprint-document-card__footer {
    align-items: flex-start;
    flex-direction: column;
    padding: var(--space-4);
  }
}

@media (max-width: 400px) {
  .home-page main .body-lg {
    font-size: var(--text-lg);
  }

  .blueprint-document-card__route {
    font-size: var(--text-base);
  }
}

@import "./public.css";
