/* why.html — extracted inline styles */
/* ── Why page (scoped; reuses main.css tokens) ── */
    .why-hero {
      padding: calc(var(--nav-height, 72px) + 4rem) 0 2.5rem;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .why-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(92, 74, 110,0.16) 0%, transparent 70%),
                  radial-gradient(ellipse 40% 35% at 80% 10%, rgba(168, 176, 188,0.07) 0%, transparent 60%);
      pointer-events: none;
    }
    .why-wrap { max-width: 760px; margin: 0 auto; padding: 0 1.5rem; position: relative; }
    .why-eyebrow {
      display: inline-block;
      font-size: 0.62rem; font-weight: 600;
      letter-spacing: 0.3em; text-transform: uppercase;
      color: var(--gold, #A8B0BC); margin-bottom: 1.1rem;
    }
    .why-hero h1 {
      font-family: 'Cinzel', serif;
      font-size: clamp(2rem, 6vw, 3.2rem);
      line-height: 1.15; color: var(--white, #F8F4EE);
      letter-spacing: 0.01em; margin: 0 0 1.1rem;
    }
    .why-hero h1 em {
      font-style: normal;
      background: linear-gradient(160deg, #F0E8D8 18%, #E6C24A 50%, #F0E8D8 82%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .why-lede {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.2rem; line-height: 1.75;
      color: var(--silver, #C8D0E8); max-width: 620px; margin: 0 auto;
    }
    .why-section {
      max-width: 760px; margin: 0 auto;
      padding: 2.5rem 1.5rem;
      border-top: 1px solid rgba(168, 158, 136,0.09);
    }
    .why-section h2 {
      font-family: 'Cinzel', serif;
      font-size: clamp(1.3rem, 3.5vw, 1.8rem);
      color: var(--white, #F8F4EE); margin: 0 0 1rem; letter-spacing: 0.02em;
    }
    .why-section p {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.12rem; line-height: 1.85;
      color: #e6ddc8; margin: 0 0 1rem;
    }
    .why-section p strong { color: var(--gold-light, #d8b46a); font-weight: 600; }
    .why-rule {
      border-left: 2px solid rgba(168, 176, 188,0.5);
      padding: 0.4rem 0 0.4rem 1.25rem; margin: 1.25rem 0;
      font-style: italic; color: var(--gold-light, #d8b46a);
    }
    /* sources table */
    .sources-table {
      width: 100%; border-collapse: collapse; margin: 1.5rem 0 0.5rem;
      font-family: 'Inter', sans-serif; font-size: 0.86rem;
    }
    .sources-table th, .sources-table td {
      text-align: left; padding: 0.7rem 0.8rem;
      border-bottom: 1px solid rgba(168, 158, 136,0.1);
      color: var(--silver, #C8D0E8); vertical-align: top;
    }
    .sources-table th {
      font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--silver-dim, #8891AA); font-weight: 600;
    }
    .sources-table .tag {
      display: inline-block; font-size: 0.62rem; letter-spacing: 0.06em;
      padding: 0.12rem 0.55rem; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap;
    }
    .tag--measured { color: #3fae7a; }
    .tag--computed { color: #c8b88f; }
    .tag--catalogued { color: var(--gold, #A8B0BC); }
    .tag--unavailable { color: #f87171; }
    .verify-list { list-style: none; padding: 0; margin: 1rem 0 0; }
    .verify-list li {
      font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; line-height: 1.7;
      color: #e6ddc8; padding: 0.6rem 0 0.6rem 1.6rem; position: relative;
      border-bottom: 1px solid rgba(168, 158, 136,0.07);
    }
    .verify-list li::before {
      content: '\2726'; position: absolute; left: 0; top: 0.7rem;
      color: var(--gold, #A8B0BC); font-size: 0.8rem;
    }
    .verify-list strong { color: var(--gold-light, #d8b46a); font-weight: 600; }
    .why-cta {
      max-width: 760px; margin: 0 auto; padding: 3rem 1.5rem 4rem; text-align: center;
      border-top: 1px solid rgba(168, 158, 136,0.09);
    }
    .why-cta p {
      font-family: 'Cormorant Garamond', serif; font-style: italic;
      font-size: 1.3rem; line-height: 1.7; color: var(--silver, #C8D0E8);
      max-width: 560px; margin: 0 auto 1.5rem;
    }
    .why-btn {
      display: inline-block; text-decoration: none;
      font-family: 'Inter', sans-serif; font-size: 0.78rem;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: #08080b; background: linear-gradient(160deg, #d8b46a, #A8B0BC);
      padding: 0.85rem 1.8rem; border-radius: 999px; font-weight: 600;
      transition: filter 0.3s, transform 0.3s;
    }
    .why-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
    .why-btn--ghost {
      color: var(--gold-light, #d8b46a); background: transparent;
      border: 1px solid rgba(168, 176, 188,0.4); margin-top: 0.5rem;
    }
    .why-btn--ghost:hover { border-color: var(--gold, #A8B0BC); background: rgba(168, 176, 188,0.06); }