:root {
    --ink: #0f0f0d;
    --paper: #f8f6f1;
    --warm: #eeebe2;
    --rule: rgba(15, 15, 13, 0.1);
    --teal: #0f6e56;
    --teal-bg: #e1f5ee;
    --teal-mid: #1d9e75;
    --mono: 'JetBrains Mono', monospace;
    --serif: 'Literata', serif;
    --sans: 'IBM Plex Sans', sans-serif;
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  html {
    scroll-behavior: smooth;
  }
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }
  
  
  /* ==========================================================================
     Navigation
     ========================================================================== */
  
  nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2.5rem;
    height: 54px;
  }
  .nav-logo {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--ink);
  }
  .nav-logo em {
    color: var(--teal);
    font-style: normal;
  }
  .nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
  }
  .nav-links a {
    font-size: 13px;
    color: rgba(15, 15, 13, 0.45);
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 0.15s;
  }
  .nav-links a:hover {
    color: var(--ink);
  }
  .nav-cta {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--teal);
    color: #fff;
    padding: 8px 16px;
    border-radius: 3px;
    text-decoration: none;
    transition: opacity 0.15s;
  }
  .nav-cta:hover {
    opacity: 0.85;
  }
  
  
  /* ==========================================================================
     Hero
     ========================================================================== */
  
  .hero {
    padding: 54px 0 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
  .hero-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 5rem 2.5rem 4rem;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 5rem;
    align-items: center;
  }
  .hero-eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 1.25rem;
  }
  /* Serif scale retuned for Literata. Instrument Serif is a condensed display
     face with a small x-height; Literata is a text face with a large one, so
     the same nominal size reads ~25% bigger and wrapped this H1 onto five
     lines. Sizes pulled back and lightly tracked in, which a text serif takes
     well at display sizes. */
  .hero h1 {
    font-family: var(--serif);
    font-size: clamp(2.05rem, 3.4vw, 3rem);
    font-weight: 400;
    line-height: 1.13;
    letter-spacing: -0.018em;
    margin-bottom: 1.5rem;
  }
  .hero h1 i {
    font-style: italic;
    color: var(--teal);
  }
  .hero-lead {
    font-size: 17px;
    color: rgba(15, 15, 13, 0.55);
    line-height: 1.75;
    max-width: 480px;
    margin-bottom: 2.5rem;
  }
  .hero-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
  }
  .btn-dark {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--ink);
    color: #fff;
    padding: 12px 22px;
    border-radius: 3px;
    text-decoration: none;
    transition: background 0.15s;
  }
  .btn-dark:hover {
    background: var(--teal);
  }
  .btn-text {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: rgba(15, 15, 13, 0.45);
    text-decoration: none;
    transition: color 0.15s;
  }
  .btn-text:hover {
    color: var(--ink);
  }
  
  
  /* --------------------------------------------------------------------------
     Hero: $BIRTH index panel
     -------------------------------------------------------------------------- */
  
  .index-panel {
    background: var(--ink);
    border-radius: 8px;
    padding: 2rem;
    color: #fff;
    font-family: var(--mono);
  }
  .ip-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.75rem;
  }
  .ip-name {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 6px;
  }
  .ip-ticker {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.04em;
  }
  .ip-live {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
  }
  .live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1d9e75;
    animation: blink 2s infinite;
  }
  @keyframes blink {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.25;
    }
  }
  .ip-value {
    font-size: 3.5rem;
    font-weight: 300;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 4px;
  }
  .ip-delta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 2rem;
  }
  .ip-sparkline {
    display: block;
    margin-bottom: 1.5rem;
  }
  .ip-advantage {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
  }
  .ip-advantage .adv-label {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
  }
  .ip-advantage .adv-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .ip-advantage .adv-row:last-child {
    border-bottom: none;
  }
  .ip-advantage .adv-name {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
  }
  .ip-advantage .adv-val {
    font-size: 12px;
  }
  .adv-val.green {
    color: #1d9e75;
  }
  .adv-val.red {
    color: #e05c50;
  }
  .ip-sources {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .ip-tag {
    font-size: 10px;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
  }
  
  
  /* ==========================================================================
     Shared section layout
     ========================================================================== */
  
  section {
    padding: 5rem 2.5rem;
  }
  .container {
    max-width: 1120px;
    margin: 0 auto;
  }
  .sec-label {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(15, 15, 13, 0.5);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .sec-label::after {
    content: '';
    flex: 0 0 24px;
    height: 1px;
    background: var(--rule);
  }
  h2 {
    font-family: var(--serif);
    font-size: clamp(1.6rem, 2.25vw, 2.1rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.014em;
    margin-bottom: 1.5rem;
  }
  
  
  /* ==========================================================================
     Methodology section ("Why this exists")
     ========================================================================== */
  
  .edge {
    background: var(--warm);
  }
  .edge-grid {
    display: grid;
    /* Not 1fr 1fr. After the v3 rewrite the left column carries two
       two-legged paragraphs and runs ~300px past the four bullets beside
       it; widening the prose column and narrowing the list brings the two
       within ~60px without cutting a word. */
    grid-template-columns: 1.3fr 0.7fr;
    gap: 4rem;
    align-items: start;
  }
  .edge-intro {
    font-size: 17px;
    color: rgba(15, 15, 13, 0.55);
    line-height: 1.75;
    margin-bottom: 2.5rem;
  }
  .edge-intro--secondary {
    margin-top: 1.5rem;
  }
  .advantage-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  .advantage-item {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 12px;
    align-items: start;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--rule);
  }
  .advantage-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .adv-num {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--teal);
    font-weight: 500;
    padding-top: 2px;
  }
  .adv-body h4 {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 3px;
  }
  .adv-body p {
    font-size: 13px;
    color: rgba(15, 15, 13, 0.5);
    line-height: 1.6;
  }
  
  .tiers-intro {
    max-width: 580px;
    margin-bottom: 3rem;
  }
  .tiers-intro p {
    font-size: 17px;
    color: rgba(15, 15, 13, 0.55);
    line-height: 1.75;
  }
  
  /* ==========================================================================
     Pricing tiers
     ========================================================================== */
  
  .tier-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 3.5rem;
  }
  .tier-card {
    background: var(--paper);
    padding: 2rem;
  }
  .tier-card.featured {
    background: var(--ink);
    color: #fff;
  }
  .tier-num {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(15, 15, 13, 0.5);
    margin-bottom: 1rem;
  }
  .tier-card.featured .tier-num {
    color: rgba(255, 255, 255, 0.5);
  }
  .tier-name {
    font-family: var(--serif);
    font-size: 1.4rem;
    margin-bottom: 0.35rem;
  }
  .tier-price {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--teal);
    margin-bottom: 1.25rem;
  }
  .tier-card.featured .tier-price {
    color: #5dcaa5;
  }
  .tier-desc {
    font-size: 14px;
    color: rgba(15, 15, 13, 0.5);
    line-height: 1.65;
    margin-bottom: 1.5rem;
  }
  .tier-card.featured .tier-desc {
    color: rgba(255, 255, 255, 0.45);
  }
  .tier-clients {
    font-family: var(--mono);
    font-size: 11px;
    color: rgba(15, 15, 13, 0.5);
    line-height: 1.8;
  }
  .tier-card.featured .tier-clients {
    color: rgba(255, 255, 255, 0.5);
  }
  .tier-tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 1rem;
  }
  
  
  /* ==========================================================================
     Index Family section
     ========================================================================== */
  
  .sources {
    background: var(--ink);
    color: #fff;
  }
  .sources h2 {
    color: #fff;
  }
  .sources .sec-label {
    color: rgba(255, 255, 255, 0.5);
  }
  .sources .sec-label::after {
    background: rgba(255, 255, 255, 0.15);
  }
  .src-cols {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    overflow: hidden;
    margin-top: 2.5rem;
  }
  .src-card {
    background: var(--ink);
    padding: 2rem;
  }
  .src-icon {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1rem;
  }
  .src-card h3 {
    font-family: var(--serif);
    font-size: 1.12rem;
    letter-spacing: -0.01em;
    color: #fff;
    margin-bottom: 0.5rem;
  }
  .src-card p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.65;
  }
  .src-card .src-detail {
    font-family: var(--mono);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 1rem;
    line-height: 1.7;
  }
  
  /* Index-family cards: each card is a link to the series page. On hover the
     card lifts and enlarges (transform only, so no layout shift), the grid's
     clip is released so the enlarged card can overlap its neighbours, and a
     "Learn more" cue slides in. Keyboard focus gets the same treatment.
     Reduced-motion users get the colour change without the movement. */
  .src-cols.fam-cols {
    overflow: visible;
    border-radius: 6px;
  }
  .fam-card {
    display: block;
    color: inherit;
    text-decoration: none;
    position: relative;
    cursor: pointer;
    transform-origin: center;
    transition:
      transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1),
      box-shadow 0.38s cubic-bezier(0.22, 0.61, 0.36, 1),
      background-color 0.25s ease;
    will-change: transform;
  }
  .fam-card:hover,
  .fam-card:focus-visible {
    transform: scale(1.045) translateY(-4px);
    background: #16161a;
    box-shadow:
      0 18px 46px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(255, 255, 255, 0.16);
    z-index: 2;
    border-radius: 6px;
    outline: none;
  }
  .fam-card:hover p,
  .fam-card:focus-visible p {
    color: rgba(255, 255, 255, 0.62);
  }
  .fam-card:hover .src-icon,
  .fam-card:focus-visible .src-icon {
    color: var(--teal-mid);
  }
  .fam-more {
    display: inline-block;
    margin-top: 1.1rem;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teal-mid);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.3s ease 0.06s, transform 0.3s ease 0.06s;
  }
  .fam-more span {
    display: inline-block;
    transition: transform 0.3s ease;
  }
  .fam-card:hover .fam-more,
  .fam-card:focus-visible .fam-more {
    opacity: 1;
    transform: translateX(0);
  }
  .fam-card:hover .fam-more span,
  .fam-card:focus-visible .fam-more span {
    transform: translateX(3px);
  }
  @media (prefers-reduced-motion: reduce) {
    .fam-card,
    .fam-more,
    .fam-more span {
      transition: none;
    }
    .fam-card:hover,
    .fam-card:focus-visible {
      transform: none;
    }
    .fam-more {
      opacity: 1;
      transform: none;
    }
  }
  @media (hover: none) {
    /* touch: no hover state to discover — always show the cue */
    .fam-more { opacity: 1; transform: none; }
  }

  /* ==========================================================================
     Mission statement
     ========================================================================== */
  
  .mission {
    background: var(--ink);
    text-align: center;
    padding-top: 6rem;
    padding-bottom: 6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .mission-container {
    max-width: 720px;
  }
  .mission-statement {
    color: #fff;
    font-size: clamp(1.5rem, 2.3vw, 1.95rem);
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: -0.012em;
  }
  .mission-accent {
    color: var(--teal-mid);
    font-style: italic;
  }
  
  /* ==========================================================================
     Contact
     ========================================================================== */
  
  .contact {
    background: var(--teal);
    color: #fff;
    text-align: center;
  }
  .contact .sec-label {
    justify-content: center;
    color: rgba(255, 255, 255, 0.55);
  }
  .contact .sec-label::after {
    background: rgba(255, 255, 255, 0.2);
  }
  .contact h2 {
    color: #fff;
    max-width: 560px;
    margin: 0 auto 1.25rem;
  }
  .contact-sub {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.55);
    max-width: 480px;
    margin: 0 auto 2.5rem;
    line-height: 1.75;
  }
  .contact-btns {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
  }
  .btn-white {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: #fff;
    color: var(--teal);
    padding: 13px 24px;
    border-radius: 3px;
    text-decoration: none;
    transition: opacity 0.15s;
  }
  .btn-white:hover {
    opacity: 0.9;
  }
  .contact-legal {
    margin-top: 3rem;
    font-family: var(--mono);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
  }
  
  
  /* ==========================================================================
     Footer
     ========================================================================== */
  
  footer {
    background: var(--ink);
    color: rgba(255, 255, 255, 0.5);
    padding: 1.5rem 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.04em;
  }
  footer a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
  }
  footer a:hover {
    color: rgba(255, 255, 255, 0.5);
  }
  .footer-links {
    display: flex;
    gap: 1.5rem;
  }
  
  
  /* ==========================================================================
     Scroll-reveal animation
     ========================================================================== */
  
  /* Scoped to html.js — the class is set by an inline script in <head>.
     Unscoped, `opacity: 0` here is a visibility gate: if the observer never
     runs, never fires, or JS is blocked, the content is invisible forever
     rather than merely un-animated. Content visible by default, animation as
     enhancement. */
  html.js .fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 0.5s ease,
      transform 0.5s ease;
  }
  html.js .fade-up.in {
    opacity: 1;
    transform: translateY(0);
  }
  @media (prefers-reduced-motion: reduce) {
    html.js .fade-up {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
  
  
  /* ==========================================================================
     Responsive: mobile (<= 800px)
     ========================================================================== */
  
  @media (max-width: 800px) {
    .hero-inner,
    .edge-grid {
      grid-template-columns: 1fr;
      gap: 2.5rem;
    }
    /* `Base&nbsp;=&nbsp;100` is one unbreakable token, so at its desktop size
       it set a min-content floor wider than a phone and pushed the whole page
       into horizontal scroll. Scale it to the viewport instead. */
    .ip-value {
      font-size: clamp(1.9rem, 9vw, 3rem);
    }
    .hero-inner > *,
    .edge-grid > * {
      min-width: 0;
    }
    .tier-grid,
    .src-cols {
      grid-template-columns: 1fr;
    }
    .src-card {
      padding: 1.5rem;
    }
    .nav-links {
      display: none;
    }
    footer {
      flex-direction: column;
      gap: 0.5rem;
      text-align: center;
      padding: 1.5rem 1.5rem;
    }
  }

/* ==========================================================================
   Data section (pipeline dashboard)
   ========================================================================== */

.data {
  background: var(--paper);
}
.data-intro {
  font-size: 17px;
  color: rgba(15, 15, 13, 0.55);
  line-height: 1.75;
  max-width: 620px;
  margin-bottom: 2.5rem;
}
.data-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 2rem;
}
.stat-tile {
  background: var(--warm);
  padding: 1.5rem;
}
.stat-num {
  font-family: var(--mono);
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--teal);
  margin-bottom: 4px;
}
.stat-label {
  font-size: 12px;
  color: rgba(15, 15, 13, 0.5);
  line-height: 1.5;
}

.chart-panel {
  background: var(--ink);
  border-radius: 8px;
  padding: 2rem;
  color: #fff;
  font-family: var(--mono);
}
.chart-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.chart-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 4px;
}
.chart-readout {
  font-size: 13px;
  color: #5dcaa5;
  text-align: right;
  min-height: 1.2em;
  white-space: nowrap;
}
#ca-chart {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 1.25rem;
}
#ca-chart .axis-text {
  fill: rgba(255, 255, 255, 0.3);
  font-family: var(--mono);
  font-size: 10px;
}
#ca-chart .grid-line {
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1;
}
#ca-chart .series-line {
  fill: none;
  stroke: #1d9e75;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
#ca-chart .series-line--open {
  stroke-dasharray: 4 4;
  stroke: rgba(29, 158, 117, 0.6);
}
#ca-chart .pt {
  fill: #1d9e75;
  cursor: pointer;
}
#ca-chart .pt--open {
  fill: var(--ink);
  stroke: #1d9e75;
  stroke-width: 2;
}
#ca-chart .pt-hit {
  fill: transparent;
  cursor: pointer;
}
.chart-caption {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.7;
  margin-bottom: 0.75rem;
}
.cap-solid {
  color: #1d9e75;
  margin-right: 2px;
}
.cap-open {
  color: rgba(29, 158, 117, 0.7);
  margin: 0 2px 0 10px;
}
.chart-source {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.02em;
}

@media (max-width: 800px) {
  .data-stats {
    grid-template-columns: 1fr 1fr;
  }
  .chart-panel {
    padding: 1.25rem;
  }
  .chart-readout {
    text-align: left;
    white-space: normal;
  }
}

/* Very small phones (<=360px). Two stat tiles per row and a nowrap readout
   both set min-content floors wider than the viewport at this size. */
@media (max-width: 360px) {
  .data-stats {
    grid-template-columns: 1fr;
  }
  .stat-tile {
    padding: 1.1rem;
  }
}
/* ==========================================================================
   v2 additions — free access band, tier notes, preview dot, ghost button
   ========================================================================== */

/* Status dot: static amber for "Design preview" (no live-streaming signal) */
.live-dot--preview {
  background: #d9a441;
  animation: none;
}

/* Free access band above the paid tier grid */
.free-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  background: var(--teal-bg);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1.75rem 2rem;
  margin-bottom: 1.5rem;
}
.free-band-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.free-band-name {
  font-family: var(--serif);
  font-size: 1.4rem;
}
.free-band-price {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--teal);
}
.free-band-desc {
  font-size: 14px;
  color: rgba(15, 15, 13, 0.55);
  line-height: 1.65;
  max-width: 640px;
}
.free-band-cta {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Notes under the tier grid: founding rates, evaluation licence */
.tier-notes {
  margin-top: -2rem;
  margin-bottom: 1rem;
}
.tier-notes p {
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(15, 15, 13, 0.5);
  line-height: 1.7;
  max-width: 640px;
}
.tier-notes p + p {
  margin-top: 0.35rem;
}

/* Secondary (outline) button on teal background */
.btn-ghost {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 12px 24px;
  border-radius: 3px;
  text-decoration: none;
  transition: border-color 0.15s, opacity 0.15s;
}
.btn-ghost:hover {
  border-color: #fff;
}

/* Footer links: visible hover (base rule kept hover at the same color) */
footer a:hover {
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 800px) {
  .free-band {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
  }
}

/* Panel advantage rows: breathing room when a value wraps to two lines */
.ip-advantage .adv-row {
  align-items: baseline;
  gap: 16px;
}
.ip-advantage .adv-val {
  text-align: right;
}

/* ==========================================================================
   Registration modal — $BIRTH Public gate
   See legal/registration-form-spec.md. Two rules here are legal mechanics,
   not styling: the honeypot must be hidden with CSS (never type="hidden",
   which bots skip), and the disabled submit state must be visually obvious
   so the consent checkbox reads as a required affirmative act.
   ========================================================================== */

body.modal-open {
  overflow: hidden;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(15, 15, 13, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4rem 1.5rem;
  overflow-y: auto;
}
.modal-backdrop[hidden] {
  display: none;
}
.modal {
  position: relative;
  background: var(--paper);
  border-radius: 8px;
  width: 100%;
  max-width: 560px;
  padding: 2.5rem;
  box-shadow: 0 24px 60px rgba(15, 15, 13, 0.25);
}
.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: rgba(15, 15, 13, 0.4);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 3px;
}
.modal-close:hover {
  color: var(--ink);
}
.modal h3 {
  font-family: var(--serif);
  font-size: 1.9rem;
  line-height: 1.15;
  margin-bottom: 0.5rem;
  font-weight: 400;
}
.modal h3:focus {
  outline: none;
}
.modal-sub {
  font-size: 14px;
  color: rgba(15, 15, 13, 0.55);
  line-height: 1.65;
  margin-bottom: 1.75rem;
}

/* --- fields --------------------------------------------------------- */

.field {
  margin-bottom: 1rem;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.field label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(15, 15, 13, 0.5);
  margin-bottom: 6px;
}
.field input[type='text'],
.field input[type='email'],
.field select,
.field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 10px 12px;
  transition: border-color 0.15s;
}
.field textarea {
  resize: vertical;
  min-height: 72px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.12);
}
.field input[aria-invalid='true'],
.field select[aria-invalid='true'],
.field textarea[aria-invalid='true'] {
  border-color: #b3453a;
}
.field-error {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: #b3453a;
  margin-top: 5px;
}
.field-hint {
  display: block;
  font-size: 12px;
  color: rgba(15, 15, 13, 0.45);
  margin-top: 5px;
  line-height: 1.5;
}

/* Honeypot: off-screen, not display:none and never type="hidden" —
   scripted bots recognize and skip both of those. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

/* --- consumer-domain escape hatch ------------------------------------ */

.consumer-block {
  background: var(--teal-bg);
  border: 1px solid rgba(15, 110, 86, 0.18);
  border-radius: 4px;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(15, 15, 13, 0.65);
}
.consumer-block a {
  display: inline-block;
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--teal);
}

/* --- consent block --------------------------------------------------- */

.consent {
  border-top: 1px solid var(--rule);
  margin-top: 1.5rem;
  padding-top: 1.25rem;
}
.consent-row {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  margin-bottom: 0.85rem;
}
.consent-row input[type='checkbox'] {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  accent-color: var(--teal);
}
.consent-row label {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(15, 15, 13, 0.75);
}
.consent-row a {
  color: var(--teal);
  text-underline-offset: 2px;
}
/* Standing licence text: deliberately redundant with the Terms. Someone
   who never opens them has still been told the three things that matter,
   on the screen where they agreed. */
.consent-standing {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(15, 15, 13, 0.5);
  background: var(--warm);
  border-radius: 4px;
  padding: 0.85rem 1rem;
  margin: 0.75rem 0 1.25rem;
}
.version-note {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: rgba(15, 15, 13, 0.4);
  margin-top: 0.75rem;
}

/* --- actions --------------------------------------------------------- */

.modal-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
button.btn-dark {
  border: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--ink);
  color: #fff;
  padding: 13px 24px;
  border-radius: 3px;
  transition: background 0.15s, opacity 0.15s;
}
button.btn-dark:hover:not([disabled]) {
  background: var(--teal);
}
button.btn-dark[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
.form-error {
  font-family: var(--mono);
  font-size: 12px;
  color: #b3453a;
  margin-bottom: 1rem;
}

/* --- "check your inbox" step ----------------------------------------- */

.sent-actions {
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(15, 15, 13, 0.5);
  line-height: 1.9;
}
.sent-actions a {
  color: var(--teal);
}
#sent-email {
  font-family: var(--mono);
  color: var(--ink);
}
#resend-status {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--teal);
  min-height: 1.2em;
}

@media (max-width: 800px) {
  .modal-backdrop {
    padding: 1.5rem 1rem;
  }
  .modal {
    padding: 1.75rem 1.25rem;
  }
  .field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}


/* ==========================================================================
   Demand leg section
   Light section between .edge (warm) and #tiers (paper); the bottom rule
   supplies the separation the background change no longer does.
   ========================================================================== */

/* Dark band. Previously paper — which put it between a warm section (.edge)
   and another paper section (#tiers), so the demand leg and the pricing read
   as one undifferentiated region and the section never announced itself.
   Ink gives it the same standing as .mission and .sources, and separates
   edge from tiers. Follows the .sources treatment throughout. */
.demand {
  background: var(--ink);
  color: #fff;
}
.demand h2 {
  color: #fff;
}
.demand .sec-label {
  color: rgba(255, 255, 255, 0.5);
}
.demand .sec-label::after {
  background: rgba(255, 255, 255, 0.15);
}
.demand .data-intro {
  color: rgba(255, 255, 255, 0.45);
}
.demand-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 2.5rem;
}
.demand-card {
  background: var(--ink);
  padding: 2rem;
}
.demand-tag {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-mid);
  margin-bottom: 0.85rem;
}
.demand-card h3 {
  color: #fff;
  font-family: var(--serif);
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 0.6rem;
}
.demand-card p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1.7;
}

.drr-panel {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #fff;
  border-radius: 8px;
  padding: 2.5rem;
  margin-bottom: 2.5rem;
}
.drr-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.9rem;
}
.drr-formula {
  font-family: var(--mono);
  font-size: clamp(1.25rem, 2.4vw, 1.85rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--teal-mid);
  margin-bottom: 0.5rem;
}
.drr-gloss {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 1.5rem;
}
.drr-body {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.6);
  max-width: 680px;
  margin-bottom: 2rem;
}
.drr-rows {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.drr-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--mono);
  font-size: 12px;
}
.drr-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.drr-row span:first-child {
  flex: 0 0 auto;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.drr-row span:last-child {
  color: rgba(255, 255, 255, 0.8);
  text-align: right;
}

.demand-notes {
  max-width: 72ch;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1.4rem;
}
.demand-notes p {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.42);
}
.demand-notes strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
}

/* Hero panel: names the $BIRTH card as one leg of a two-leg family. */
.ip-leg {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* The mission block now follows the hero rather than the dark index-family
   section, so the divider it used to need against .sources is dropped. */
.mission {
  border-top: none;
}

@media (max-width: 800px) {
  .demand-grid,
  .demand-notes {
    grid-template-columns: 1fr;
  }
  .demand-notes {
    gap: 1.5rem;
  }
  .demand-card {
    padding: 1.5rem;
  }
  .drr-panel {
    padding: 1.75rem;
  }
  .drr-formula {
    /* nowrap alone overflowed the viewport once real mono metrics loaded and
       pushed the whole page into horizontal scroll. Size it off the viewport
       so the 24-character formula always fits on one line instead. */
    font-size: clamp(0.8rem, 3.6vw, 1.05rem);
    white-space: nowrap;
  }
  .drr-row {
    flex-direction: column;
    gap: 2px;
  }
  .drr-row span:last-child {
    text-align: left;
  }
}


/* Inline link inside the teal contact block — the global link colour is the
   same teal as the background, so it needs its own rule. */
.contact-sub a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(255, 255, 255, 0.45);
}
.contact-sub a:hover {
  text-decoration-color: #fff;
}


/* Contact: one primary action. The methodology-paper request is a text link
   beneath the button rather than a second button competing with it. */
.contact-alt {
  margin-top: 1.1rem;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}
.contact-alt a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(255, 255, 255, 0.45);
}
.contact-alt a:hover {
  text-decoration-color: #fff;
}