/* ==========================================================================
   Latent Brand v2: Component Library (.ltv2-*) — the shared sheet
   TEST BRAND. Every rebrand page links this file rather than carrying its own
   copy. Edit here; do not fork per run folder. See ../README.md.
   Requires tokens.css.
   ========================================================================== */

/* Base ------------------------------------------------------------------- */
html { scroll-padding-top: calc(var(--v2-nav-height) + var(--v2-space-16)); }

.ltv2-page {
  font-family: var(--v2-font-body);
  font-size: var(--v2-text-base);
  line-height: var(--v2-leading-body);
  background: var(--v2-bg-light);
  color: var(--v2-text-primary);
  -webkit-font-smoothing: antialiased;
}
.ltv2-page--dark {
  background: var(--v2-bg-dark);
  color: var(--v2-text-on-dark);
}

/* Layout ------------------------------------------------------------------ */
/* The field sits inside its margins and caps at 1300px. It centres once the
   viewport exceeds 1300px plus the margins. */
.ltv2-field {
  width: min(100% - 2 * var(--v2-grid-margin), var(--v2-field-max));
  margin-inline: auto;
}

/* The six-column grid the field divides into. Children opt into a span. */
.ltv2-grid {
  display: grid;
  grid-template-columns: repeat(var(--v2-grid-columns), minmax(0, 1fr));
  column-gap: var(--v2-grid-gutter);
}
.ltv2-col-1 { grid-column: span 1; }
.ltv2-col-2 { grid-column: span 2; }
.ltv2-col-3 { grid-column: span 3; }
.ltv2-col-4 { grid-column: span 4; }
.ltv2-col-5 { grid-column: span 5; }
.ltv2-col-6 { grid-column: span 6; }

/* Format changes; grid discipline doesn't (brandbook 8.2). Six halves to
   three, then to one, and spans fold rather than shattering. */
@media (max-width: 1024px) {
  .ltv2-grid { --v2-grid-columns: 3; }
  .ltv2-col-4, .ltv2-col-5, .ltv2-col-6 { grid-column: span 3; }
}
@media (max-width: 640px) {
  .ltv2-grid { --v2-grid-columns: 1; }
  .ltv2-col-1, .ltv2-col-2, .ltv2-col-3,
  .ltv2-col-4, .ltv2-col-5, .ltv2-col-6 { grid-column: span 1; }
}

/* The field, with measure caps for reading widths. */
.ltv2-container { width: min(100% - 2 * var(--v2-grid-margin), var(--v2-field-max)); margin-inline: auto; }
.ltv2-container--narrow { max-width: 880px; }
.ltv2-container--prose  { max-width: 680px; }

.ltv2-section { padding-block: var(--v2-space-96); }
.ltv2-section--dark  { background: var(--v2-bg-dark); color: var(--v2-text-on-dark); }
.ltv2-section--light { background: var(--v2-bg-light); color: var(--v2-text-primary); }
.ltv2-section--smoke { background: var(--v2-bg-light-2); }
@media (max-width: 900px)  { .ltv2-section { padding-block: var(--v2-space-64); } }
@media (max-width: 600px)  { .ltv2-section { padding-block: var(--v2-space-48); } }

/* The editorial rule-line system ------------------------------------------ */
.ltv2-rule       { border: 0; border-top: var(--v2-rule); margin-block: var(--v2-space-32); }
.ltv2-section--dark .ltv2-rule,
.ltv2-rule--dark { border-top: var(--v2-rule-dark); }
.ltv2-ruled-row  { border-top: var(--v2-rule); border-bottom: var(--v2-rule); }
.ltv2-section--dark .ltv2-ruled-row { border-color: rgba(245,245,245,0.14); }

/* Type ---------------------------------------------------------------------- */
/* Regular is the only heading weight in the design file, so headings never take
   the browser's bold default. */
h1, h2, h3, h4, h5, h6 { font-weight: var(--v2-weight); }
/* The named scale. One class per Figma style; use these on new work.
   H1 48/48 is the largest type on the site. */
.ltv2-h1, .ltv2-s1, .ltv2-s2, .ltv2-s3 {
  font-family: var(--v2-font-display);
  font-weight: var(--v2-weight);
  letter-spacing: var(--v2-tracking-display);
}
.ltv2-h1 { font-size: var(--v2-h1); line-height: var(--v2-h1-lh); letter-spacing: var(--v2-tracking-h1); }
.ltv2-s1 { font-size: var(--v2-s1); line-height: var(--v2-s1-lh); }
.ltv2-s2 { font-size: var(--v2-s2); line-height: var(--v2-s2-lh); }
.ltv2-s3 { font-size: var(--v2-s3); line-height: var(--v2-s3-lh); }
.ltv2-p1 { font-size: var(--v2-p1); line-height: var(--v2-p1-lh); letter-spacing: var(--v2-tracking-display); }
.ltv2-p2 { font-size: var(--v2-p2); line-height: var(--v2-p2-lh); letter-spacing: var(--v2-tracking-display); }
.ltv2-l1 { font-size: var(--v2-l1); line-height: var(--v2-l1-lh); letter-spacing: var(--v2-tracking-display); }

/* Legacy display classes, kept so the existing markup keeps working.
   Each now resolves to a scale step instead of its own clamp. */
.ltv2-display {
  font-family: var(--v2-font-display);
  font-weight: var(--v2-weight);
  letter-spacing: var(--v2-tracking-display);
  line-height: var(--v2-leading-tight);
}
.ltv2-display--hero { font-size: var(--v2-h1); line-height: var(--v2-h1-lh); letter-spacing: var(--v2-tracking-h1); }
.ltv2-display--xl   { font-size: var(--v2-s1); line-height: var(--v2-s1-lh); }
.ltv2-display--lg   { font-size: var(--v2-s2); line-height: var(--v2-s2-lh); }

.ltv2-lead {
  font-size: var(--v2-p1);
  line-height: var(--v2-leading-body);
  color: var(--v2-text-secondary);
  max-width: 56ch;
}
.ltv2-section--dark .ltv2-lead,
.ltv2-page--dark .ltv2-lead { color: var(--v2-text-on-dark-2); }
.ltv2-page--dark .ltv2-section--light .ltv2-lead,
.ltv2-page--dark .ltv2-section--smoke .ltv2-lead { color: var(--v2-text-secondary); }

/* Mono annotation system: section labels, coordinates, folios ------------- */
.ltv2-mono {
  font-family: var(--v2-font-mono);
  font-size: var(--v2-text-xs);
  letter-spacing: var(--v2-tracking-mono);
  text-transform: uppercase;
}
.ltv2-eyebrow {
  font-family: var(--v2-font-mono);
  font-size: var(--v2-text-xs);
  letter-spacing: var(--v2-tracking-mono);
  text-transform: uppercase;
  color: var(--v2-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: var(--v2-space-8);
}
.ltv2-section--dark .ltv2-eyebrow,
.ltv2-page--dark .ltv2-eyebrow { color: var(--v2-accent-soft); }
.ltv2-page--dark .ltv2-section--light .ltv2-eyebrow,
.ltv2-page--dark .ltv2-section--smoke .ltv2-eyebrow { color: var(--v2-text-secondary); }
.ltv2-eyebrow::before {
  content: "";
  width: var(--v2-dot-size);
  height: var(--v2-dot-size);
  border-radius: var(--v2-radius-full);
  background: var(--v2-accent);
}
.ltv2-annotation {
  font-family: var(--v2-font-mono);
  font-size: var(--v2-text-xs);
  letter-spacing: var(--v2-tracking-mono);
  text-transform: uppercase;
  color: var(--v2-haze);
}

/* Buttons ------------------------------------------------------------------- */
.ltv2-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--v2-space-8);
  font-family: var(--v2-font-mono);
  font-size: var(--v2-mono-l2);
  font-weight: var(--v2-weight);
  line-height: 1;
  letter-spacing: var(--v2-tracking-mono);
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  border-radius: var(--v2-radius-sm);
  /* Mauve at 80% under a full-strength Mauve hairline, straight off
     LatentWeb--Sep70: the edge reads a shade darker than the fill, which is
     what stops the button looking like a flat sticker. */
  background: color-mix(in srgb, var(--v2-mauve) 80%, transparent);
  color: var(--v2-onyx);
  border: 1px solid var(--v2-mauve);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--v2-dur-fast) var(--v2-ease-out),
              color var(--v2-dur-fast) var(--v2-ease-out);
}
.ltv2-btn:hover { background: var(--v2-slate-blue); color: var(--v2-off-white); border-color: var(--v2-slate-blue); }
@media (max-width: 900px) {
  .ltv2-btn { min-height: 44px; }
}
.ltv2-btn--secondary {
  background: transparent;
  color: var(--v2-text-primary);
  border-color: var(--v2-taupe);
}
.ltv2-btn--secondary:hover { background: var(--v2-accent-well); color: var(--v2-text-primary); }
.ltv2-section--dark .ltv2-btn--secondary,
.ltv2-page--dark .ltv2-btn--secondary {
  color: var(--v2-text-on-dark);
  border-color: rgba(245,245,245,0.3);
}
.ltv2-section--dark .ltv2-btn--secondary:hover,
.ltv2-page--dark .ltv2-btn--secondary:hover { background: rgba(245,245,245,0.08); }
.ltv2-page--dark .ltv2-section--light .ltv2-btn--secondary,
.ltv2-page--dark .ltv2-section--smoke .ltv2-btn--secondary {
  color: var(--v2-text-primary);
  border-color: var(--v2-taupe);
}

/* Nav ----------------------------------------------------------------------
   The site header from LatentWeb--Sep70 (Home Page 1:142, measured at 1920):
   72 tall, lockup at 28 mark height on the field margin, five P2 labels 32
   apart, 40 to a 124x36 mono CTA on the right margin.
   Default is the light bar from the design; --on-dark inverts it for the dark
   editorial pages, which is the only thing that changes between them.
   -------------------------------------------------------------------------- */
.ltv2-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  isolation: isolate;
  background: var(--v2-bg-light);
  color: var(--v2-text-primary);
  transition: background var(--v2-dur-fast) var(--v2-ease-out),
              box-shadow var(--v2-dur-fast) var(--v2-ease-out);
}
.ltv2-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity var(--v2-dur-fast) var(--v2-ease-out);
  pointer-events: none;
}
.ltv2-nav--on-dark { background: var(--v2-bg-dark); color: var(--v2-text-on-dark); }
.ltv2-nav.is-scrolled {
  background: color-mix(in srgb, var(--v2-bg-light) 88%, transparent);
  box-shadow: 0 1px 0 var(--v2-border-on-light);
}
.ltv2-nav--on-dark.is-scrolled {
  background: color-mix(in srgb, var(--v2-bg-dark) 88%, transparent);
  box-shadow: 0 1px 0 var(--v2-border-on-dark);
}
.ltv2-nav.is-scrolled::before { opacity: 1; }
.ltv2-nav.is-open { background: var(--v2-bg-light); }
.ltv2-nav--on-dark.is-open { background: var(--v2-bg-dark); }
.ltv2-nav__inner {
  min-height: var(--v2-nav-height);
  display: flex;
  align-items: center;
  gap: var(--v2-nav-cta-gap);
}
.ltv2-nav__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin-inline-end: auto;
}
.ltv2-nav__logo img,
.ltv2-nav__logo .ltv2-lockup { display: block; height: var(--v2-nav-lockup); width: auto; }
.ltv2-lockup__mark { cursor: pointer; }
.ltv2-nav__links {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: var(--v2-nav-gap);
}
.ltv2-nav__links a,
.ltv2-nav__links summary {
  display: inline-flex;
  align-items: center;
  font-size: var(--v2-p2);
  line-height: var(--v2-p2-lh);
  letter-spacing: var(--v2-tracking-display);
  color: var(--v2-shadow);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--v2-dur-fast) var(--v2-ease-out);
}
.ltv2-nav__links a:hover,
.ltv2-nav__links a[aria-current="page"],
.ltv2-nav__links summary:hover { color: var(--v2-text-primary); }
.ltv2-nav--on-dark .ltv2-nav__links a,
.ltv2-nav--on-dark .ltv2-nav__links summary { color: var(--v2-platinum); }
.ltv2-nav--on-dark .ltv2-nav__links a:hover,
.ltv2-nav--on-dark .ltv2-nav__links a[aria-current="page"],
.ltv2-nav--on-dark .ltv2-nav__links summary:hover { color: var(--v2-text-on-dark); }

/* Company group: a details/summary dropdown. The group stretches to the bar's
   full height so the panel hangs from the bar's bottom edge and the pointer
   never crosses a gap between label and panel. */
.ltv2-nav__group { position: relative; align-self: stretch; }
.ltv2-nav__group summary {
  display: flex;
  height: 100%;
  gap: var(--v2-space-8);
  list-style: none;
  user-select: none;
}
.ltv2-nav__group summary::-webkit-details-marker { display: none; }
.ltv2-nav__group summary::after {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--v2-dur-fast) var(--v2-ease-out);
}
.ltv2-nav__group[open] summary::after { transform: translateY(1px) rotate(225deg); }
.ltv2-nav__group:has(a[aria-current="page"]) summary { color: var(--v2-text-primary); }
.ltv2-nav--on-dark .ltv2-nav__group:has(a[aria-current="page"]) summary { color: var(--v2-text-on-dark); }
.ltv2-nav__menu {
  position: absolute;
  top: 100%;
  left: calc(-1 * var(--v2-space-16));
  z-index: 1;
  min-width: 11rem;
  display: flex;
  flex-direction: column;
  padding-block: var(--v2-space-8);
  background: var(--v2-bg-light);
  border: 1px solid var(--v2-border-on-light);
  animation: ltv2-menu-in var(--v2-dur-fast) var(--v2-ease-out);
}
.ltv2-nav--on-dark .ltv2-nav__menu {
  background: var(--v2-bg-dark);
  border-color: var(--v2-border-on-dark);
}
.ltv2-nav__menu a {
  min-height: 40px;
  padding-inline: var(--v2-space-16);
  white-space: nowrap;
}
@keyframes ltv2-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
}

/* The CTA. Mono L2 uppercase, 36 tall, 4px corner — the one radius in the
   system that isn't square, and it comes from the design file. */
.ltv2-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--v2-space-8);
  height: var(--v2-cta-height);
  padding-inline: var(--v2-cta-pad);
  border: 1px solid transparent;
  border-radius: var(--v2-radius-sm);
  appearance: none;
  background: var(--v2-onyx);
  color: var(--v2-off-white);
  font: inherit;
  font-family: var(--v2-font-mono);
  font-size: var(--v2-mono-l2);
  line-height: 1;
  letter-spacing: var(--v2-tracking-mono);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--v2-dur-fast) var(--v2-ease-out),
              color var(--v2-dur-fast) var(--v2-ease-out);
}
.ltv2-cta:hover { background: var(--v2-shadow); }
.ltv2-nav__links > .ltv2-cta { display: none; }
.ltv2-nav--on-dark .ltv2-cta,
.ltv2-cta--on-dark { background: var(--v2-off-white); color: var(--v2-onyx); }
.ltv2-nav--on-dark .ltv2-cta:hover,
.ltv2-cta--on-dark:hover { background: var(--v2-platinum); }

/* Menu button: mobile only. */
.ltv2-nav--lead .ltv2-nav__toggle { display: none; }
.ltv2-nav__toggle {
  display: none;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin-inline-start: calc(-1 * var(--v2-space-12));
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.ltv2-nav__toggle span {
  display: block;
  width: 20px;
  height: 1px;
  margin: 5px auto;
  background: currentColor;
  transition: transform var(--v2-dur-fast) var(--v2-ease-out),
              opacity var(--v2-dur-fast) var(--v2-ease-out);
}
.ltv2-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ltv2-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ltv2-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer. The bar stays as drawn; the links become a full-height panel
   under it (nav.js sets --ltv2-nav-bottom and locks the page scroll), the
   Company group opens flat under a mono label, and the bar's CTA moves to the
   bottom of the panel where the thumb is. */
@media (max-width: 900px) {
  .ltv2-nav__inner { gap: var(--v2-space-16); }
  .ltv2-nav__toggle { display: block; order: -1; }
  .ltv2-nav__logo { padding-block: var(--v2-space-8); margin-block: calc(-1 * var(--v2-space-8)); }
  .ltv2-nav__links {
    position: fixed;
    inset: 0;
    top: var(--ltv2-nav-bottom, var(--v2-nav-height));
    z-index: 20;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--v2-space-8) var(--v2-grid-margin) max(var(--v2-space-24), env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: color-mix(in srgb, var(--v2-bg-light) 98%, transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--v2-border-on-light);
    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
    transition: opacity 300ms cubic-bezier(0.32, 0.72, 0, 1),
                transform 300ms cubic-bezier(0.32, 0.72, 0, 1),
                visibility 0s 300ms;
  }
  .ltv2-nav--on-dark .ltv2-nav__links {
    background: color-mix(in srgb, var(--v2-bg-dark) 98%, transparent);
    border-top-color: var(--v2-border-on-dark);
  }
  .ltv2-nav.is-open .ltv2-nav__links {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition-delay: 0s;
  }
  .ltv2-nav__links > a:not(.ltv2-cta),
  .ltv2-nav__menu a {
    min-height: 64px;
    border-bottom: 1px solid var(--v2-border-on-light);
    font-family: var(--v2-font-display);
    font-size: var(--v2-s3);
    line-height: var(--v2-s3-lh);
    color: var(--v2-text-primary);
  }
  .ltv2-nav--on-dark .ltv2-nav__links > a:not(.ltv2-cta),
  .ltv2-nav--on-dark .ltv2-nav__menu a { border-bottom-color: var(--v2-border-on-dark); color: var(--v2-text-on-dark); }
  .ltv2-nav__links a[aria-current="page"]::after {
    content: "";
    width: var(--v2-dot-size);
    height: var(--v2-dot-size);
    margin-inline-start: var(--v2-space-12);
    border-radius: var(--v2-radius-full);
    background: var(--v2-accent);
  }
  .ltv2-nav__group { align-self: auto; }
  .ltv2-nav__group summary {
    height: auto;
    min-height: 44px;
    padding-top: var(--v2-space-24);
    pointer-events: none;
    font-family: var(--v2-font-mono);
    font-size: var(--v2-text-xs);
    letter-spacing: var(--v2-tracking-mono);
    text-transform: uppercase;
    color: var(--v2-text-secondary);
  }
  .ltv2-nav--on-dark .ltv2-nav__group summary { color: var(--v2-dusk); }
  .ltv2-nav__group summary::after { display: none; }
  .ltv2-nav__menu {
    position: static;
    min-width: 0;
    padding-block: 0;
    background: transparent;
    border: 0;
    animation: none;
  }
  .ltv2-nav--on-dark .ltv2-nav__menu { background: transparent; }
  .ltv2-nav__menu a { padding-inline: 0; white-space: normal; }
  .ltv2-nav__menu a:last-child { border-bottom: 0; }
  .ltv2-nav__links > :has(+ .ltv2-cta) { margin-bottom: var(--v2-space-32); }
  .ltv2-nav__links > .ltv2-cta {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    height: 52px;
    margin-top: auto;
    font-size: var(--v2-l1);
    color: var(--v2-off-white);
  }
  .ltv2-nav--on-dark .ltv2-nav__links > .ltv2-cta { color: var(--v2-onyx); }
  .ltv2-nav.is-open > .ltv2-nav__inner > .ltv2-cta { visibility: hidden; }
  html.ltv2-nav-lock, html.ltv2-nav-lock body { overflow: hidden; }
  /* The bar CTA keeps its 36px drawing; the hit area grows to 44. */
  .ltv2-nav__inner > .ltv2-cta { position: relative; }
  .ltv2-nav__inner > .ltv2-cta::before { content: ""; position: absolute; inset: -4px; }
  .ltv2-nav--lead .ltv2-nav__inner > .ltv2-cta { padding-inline: var(--v2-cta-pad); }
  .ltv2-nav--lead .ltv2-nav__inner > .ltv2-cta > span { display: inline; }
}
/* Small phones (320 to 360): toggle, lockup and CTA only fit the bar with a tighter CTA and no arrow. */
@media (max-width: 360px) {
  .ltv2-nav__inner > .ltv2-cta { padding-inline: var(--v2-space-12); }
  .ltv2-nav__inner > .ltv2-cta > span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ltv2-nav, .ltv2-nav::before { transition: none; }
  .ltv2-nav__menu { animation: none; }
  .ltv2-nav__group summary::after { transition: none; }
  .ltv2-nav__links { transition: none; }
}

/* Footer -------------------------------------------------------------------
   The standard footer shares the 1300px field across every rebuilt page:
   three link columns left, the compliance block right, copyright under them,
   a wide gap, then the policy row. The wordmark bleeds off the bottom-right
   corner at 49% of the width. Ground is Onyx under grain; the compliance pill sits on Shadow.
   -------------------------------------------------------------------------- */
.ltv2-footer {
  /* The footer is shared chrome: it pins its own type stacks and resets so a
     page's local :root overrides and global resets cannot restyle it. */
  --v2-font-display: "FK Grotesk", "Host Grotesk", "Helvetica Neue", Arial, sans-serif;
  --v2-font-body:    "FK Grotesk", "Host Grotesk", "Helvetica Neue", Arial, sans-serif;
  --v2-font-mono:    "Berkeley Mono", "FK Grotesk Mono", ui-monospace, "SF Mono", monospace;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--v2-onyx);
  color: var(--v2-text-on-dark);
  font-family: var(--v2-font-body);
  font-size: var(--v2-text-base, 1rem);
  font-weight: 400;
  line-height: var(--v2-leading-body, 1.55);
  text-align: left;
}
/* :where() keeps these at zero specificity so the component rules below
   still win; they only need to beat what the page's own resets leave over. */
.ltv2-footer :where(*),
.ltv2-footer :where(*)::before,
.ltv2-footer :where(*)::after { box-sizing: border-box; }
.ltv2-footer :where(p, ul, li) { margin: 0; padding: 0; }
.ltv2-footer :where(li) { list-style: none; }
.ltv2-footer :where(a) { font-family: inherit; font-weight: inherit; }
.ltv2-footer :where(img) { display: block; max-width: none; }
.ltv2-footer > .ltv2-footer__inner { position: relative; z-index: 1; }
.ltv2-footer > .ltv2-footer__wordmark { position: absolute; z-index: 2; }
.ltv2-footer__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1300px;
  margin-inline: auto;
  padding: var(--v2-space-80, 5rem) var(--v2-space-24) var(--v2-space-48);
}
.ltv2-footer__top {
  display: flex;
  flex-direction: column;
  gap: var(--v2-space-48);
}
.ltv2-footer__groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--v2-space-24);
  row-gap: var(--v2-space-40, 2.5rem);
}
.ltv2-footer__col { display: flex; flex-direction: column; gap: var(--v2-space-16); }
.ltv2-footer__col--compliance { display: flex; flex-direction: column; gap: var(--v2-space-24); }
.ltv2-footer__label {
  margin: 0;
  font-family: var(--v2-font-mono);
  font-size: clamp(0.813rem, 0.9vw, 1rem);
  line-height: 1.2;
  letter-spacing: var(--v2-tracking-mono);
  text-transform: uppercase;
  color: #585858;
}
.ltv2-footer__col--compliance .ltv2-footer__label { color: var(--v2-white, #fff); }
.ltv2-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--v2-space-16);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ltv2-footer__col a {
  font-size: var(--v2-l1);
  line-height: 15px;
  letter-spacing: var(--v2-tracking-display);
  color: #e1e1e1;
  text-decoration: none;
  transition: color var(--v2-dur-fast) var(--v2-ease-out);
}
.ltv2-footer__col a:hover,
.ltv2-footer__col a:focus-visible { color: #fff; }
/* One pill holding both marks, dot-separated, as drawn in the frame. */
.ltv2-footer__badges {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--v2-space-8);
  padding: var(--v2-space-8) var(--v2-space-12);
  border-radius: var(--v2-radius-sm);
  background: var(--v2-bg-dark-raised);
}
.ltv2-footer__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--v2-space-8);
  color: var(--v2-platinum);
  font-family: var(--v2-font-mono);
  font-size: var(--v2-mono-l2);
  line-height: 1;
  letter-spacing: var(--v2-tracking-mono);
  text-transform: uppercase;
}
.ltv2-footer__badge + .ltv2-footer__badge::before {
  content: "";
  width: 3px;
  height: 3px;
  margin-inline-end: var(--v2-space-8);
  border-radius: 50%;
  background: var(--v2-dusk);
}
.ltv2-footer__badge svg { width: 12px; height: 12px; flex: 0 0 auto; }
/* The copyright is the footer's one closing line, sitting a long way under
   the link grid on the same floor as the wordmark: the drop is what gives
   the wordmark its corner to bleed into. */
.ltv2-footer__copyright {
  position: relative;
  z-index: 1;
  margin: clamp(5rem, 17vw, 16rem) 0 0;
  font-size: var(--v2-l1);
  line-height: 15px;
  letter-spacing: var(--v2-tracking-display);
  color: #636363;
}

/* Wordmark ------------------------------------------------------------------
   Half the footer width, bleeding off the bottom-right corner and sunk 3% of
   its own height below it. wordmark.js draws it as a drifting field of blobs
   on a canvas that reaches 70px above the artwork, so the hover callout has
   headroom to sit in; the <img> is what shows when there is no WebGL.
   -------------------------------------------------------------------------- */
.ltv2-footer__wordmark {
  position: absolute;
  right: 0;
  bottom: 0;
  /* Above the link column, or the column's own box would swallow the hover
     before it reached the artwork. The artwork itself is the only part that
     takes the pointer, so nothing here can shadow a link. */
  z-index: 2;
  display: none;
  width: 49%;
  transform: translateY(3%);
  pointer-events: none;
}
.ltv2-footer__wordmark-art {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 915.999 / 247.204;
  pointer-events: auto;
}
.ltv2-footer__wordmark-art > img {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.21;
  object-fit: contain;
}
.ltv2-footer__wordmark canvas {
  position: absolute;
  inset: 0;
  top: -70px;
  width: 100%;
  height: calc(100% + 70px);
  pointer-events: none;
}
.ltv2-footer__wordmark.is-live > .ltv2-footer__wordmark-art > img { opacity: 0; }
/* The callout's own label, parked off-canvas until the pointer arrives. */
.ltv2-footer__wordmark-tag {
  position: absolute;
  top: 0;
  left: 0;
  padding: 1px 4px;
  background: var(--v2-shadow);
  color: #9e9c9b;
  font-family: var(--v2-font-mono);
  font-size: 7px;
  line-height: 1.15;
  letter-spacing: var(--v2-tracking-mono);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 768px) {
  .ltv2-footer__inner { padding-top: var(--v2-space-96); }
  .ltv2-footer__top { flex-direction: row; align-items: flex-start; justify-content: space-between; }
  .ltv2-footer__groups { width: 68%; }
  .ltv2-footer__wordmark { display: block; }
}
@media (min-width: 640px) {
  .ltv2-footer__groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Phone and touch tablets: every link row is a 44px thumb target across the
   column; the 4px gap keeps the 48px pitch the 16px gap gave the desktop list. */
@media (max-width: 640px), (hover: none) {
  .ltv2-footer__links { gap: var(--v2-space-4, 0.25rem); }
  .ltv2-footer__col a { display: flex; align-items: center; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .ltv2-footer__wordmark canvas { display: none; }
  .ltv2-footer__wordmark.is-live > .ltv2-footer__wordmark-art > img { opacity: 0.21; }
}

/* Cards / plates -------------------------------------------------------------- */
.ltv2-plate {
  border: var(--v2-rule);
  border-radius: var(--v2-radius-none);
  padding: var(--v2-space-32);
  background: var(--v2-bg-light);
}
.ltv2-plate--dark {
  background: var(--v2-bg-dark-raised);
  border: var(--v2-rule-dark);
  color: var(--v2-text-on-dark);
}
.ltv2-plate--well { background: var(--v2-accent-well); border-color: transparent; }

/* Stats ------------------------------------------------------------------------ */
.ltv2-stat__value {
  font-family: var(--v2-font-display);
  font-weight: var(--v2-weight);
  font-size: var(--v2-s1);
  letter-spacing: var(--v2-tracking-display);
  line-height: var(--v2-s1-lh);
}
.ltv2-stat__label {
  font-family: var(--v2-font-mono);
  font-size: var(--v2-text-xs);
  letter-spacing: var(--v2-tracking-mono);
  text-transform: uppercase;
  color: var(--v2-text-secondary);
  margin-top: var(--v2-space-8);
}
.ltv2-section--dark .ltv2-stat__label { color: var(--v2-dusk); }

/* Quote -------------------------------------------------------------------------- */
.ltv2-quote {
  font-family: var(--v2-font-display);
  font-weight: var(--v2-weight);
  font-size: var(--v2-s2);
  letter-spacing: var(--v2-tracking-display);
  line-height: var(--v2-s2-lh);
}
.ltv2-quote cite {
  display: block;
  font-family: var(--v2-font-display);
  font-weight: var(--v2-weight);
  font-size: var(--v2-attrib);
  line-height: var(--v2-attrib-lh);
  letter-spacing: var(--v2-tracking-display);
  font-style: normal;
  color: var(--v2-text-secondary);
}
.ltv2-section--dark .ltv2-quote cite { color: var(--v2-dusk); }

/* Signal dots: the brand's kinetic primitive ------------------------------------ */
.ltv2-dot {
  display: inline-block;
  width: var(--v2-dot-size);
  height: var(--v2-dot-size);
  border-radius: var(--v2-radius-full);
  background: var(--v2-accent);
}
.ltv2-dot--lg   { width: var(--v2-dot-size-lg); height: var(--v2-dot-size-lg); }
.ltv2-dot--soft { background: var(--v2-accent-soft); }
.ltv2-dot--pulse { animation: ltv2-pulse 2.4s var(--v2-ease-inout) infinite; }
@keyframes ltv2-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.8); }
}

/* Page grain ----------------------------------------------------------------
   LatentWeb--Sep70 carries one noise plate over the whole page rather than
   graining sections individually, so flat grounds read as printed. Fixed, so
   the grain holds still while the page scrolls, and above the content so it
   crosses the nav, plates and buttons the way it does in the file.
   -------------------------------------------------------------------------- */
.ltv2-page-grain::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0.08;
  background-repeat: repeat;
  background-size: 160px 160px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)'/%3E%3C/svg%3E");
}


/* Crop-mark frame: 'APPROVED 1.0' interface overlay ------------------------------- */
.ltv2-cropframe { position: relative; padding: var(--v2-space-24); }
.ltv2-cropframe::before,
.ltv2-cropframe::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--v2-haze);
  border-style: solid;
}
.ltv2-cropframe::before { top: 0; left: 0; border-width: 1px 0 0 1px; }
.ltv2-cropframe::after  { bottom: 0; right: 0; border-width: 0 1px 1px 0; }

/* Reveal ----------------------------------------------------------------------------- */
.ltv2-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--v2-dur-slow) var(--v2-ease-out) var(--d, 0ms),
              transform var(--v2-dur-slow) var(--v2-ease-out) var(--d, 0ms);
}
.ltv2-reveal.is-visible { opacity: 1; transform: none; }

/* Lead drawer (mounted by lead.js on pages with no #demo of their own) ------------------ */
.ltv2-drawer__scrim { position: fixed; inset: 0; z-index: 29; background: var(--v2-onyx); opacity: 0; pointer-events: none; transition: opacity 280ms var(--v2-ease-out); }
.ltv2-drawer__scrim.is-open { opacity: 0.6; pointer-events: auto; }
.ltv2-drawer__scrim[hidden] { display: block; opacity: 0; pointer-events: none; }
.ltv2-drawer { position: fixed; z-index: 30; inset: 0 0 0 auto; width: min(480px, 100%); overflow-y: auto; background: var(--v2-off-white); color: var(--v2-text-primary); font-family: var(--v2-font-body); font-size: var(--v2-text-base); transform: translateX(100%); transition: transform 340ms var(--v2-ease-out); }
.ltv2-drawer.is-open { transform: none; }
.ltv2-drawer__top { display: flex; align-items: center; justify-content: space-between; padding: var(--v2-space-32); border-bottom: 1px solid var(--v2-border-on-light); }
.ltv2-drawer__home { display: flex; align-items: center; min-height: 44px; }
.ltv2-drawer__logo { width: 118px; height: auto; }
.ltv2-drawer__close { width: 44px; height: 44px; border: 1px solid var(--v2-taupe); border-radius: 0; background: transparent; color: var(--v2-text-primary); font-size: 24px; line-height: 1; cursor: pointer; }
.ltv2-drawer__body { padding: var(--v2-space-48) var(--v2-space-32) var(--v2-space-64); }
.ltv2-drawer__body h2 { margin: var(--v2-space-16) 0 0; font-family: var(--v2-font-display); font-weight: var(--v2-weight); font-size: var(--v2-s1); line-height: var(--v2-s1-lh); letter-spacing: var(--v2-tracking-display); text-wrap: balance; }
.ltv2-drawer__body > div > p, .ltv2-drawer__body form > p { margin: var(--v2-space-16) 0 0; color: var(--v2-text-secondary); line-height: var(--v2-leading-body); }
.ltv2-drawer__body form { display: grid; gap: var(--v2-space-8); margin-top: var(--v2-space-32); }
.ltv2-drawer__body label { margin-top: var(--v2-space-12); font: var(--v2-text-xs) / 1 var(--v2-font-mono); letter-spacing: var(--v2-tracking-mono); text-transform: uppercase; }
.ltv2-drawer__body label span { color: var(--v2-text-secondary); text-transform: lowercase; }
.ltv2-drawer__body input, .ltv2-drawer__body textarea { width: 100%; min-height: 44px; padding: var(--v2-space-12); border: 1px solid var(--v2-taupe); border-radius: 0; background: var(--v2-off-white); color: var(--v2-text-primary); font: inherit; }
.ltv2-drawer__body textarea { min-height: 100px; resize: vertical; }
.ltv2-drawer__body .ltv2-btn { width: fit-content; margin-top: var(--v2-space-16); }
.ltv2-drawer__error { min-height: 20px; margin: 0; color: var(--v2-slate-blue); font-size: var(--v2-text-sm); }
.ltv2-drawer [hidden] { display: none; }

/* Reduced motion: always honored ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .ltv2-dot--pulse { animation: none; }
  .ltv2-drawer, .ltv2-drawer__scrim { transition: none; }
  .ltv2-reveal { opacity: 1; transform: none; transition: none; }
  .ltv2-page *, .ltv2-page *::before, .ltv2-page *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}