/* Single light theme, deliberately. No dark variant — this page is white,
     black and gold in every browser regardless of OS setting. */
  :root {
    color-scheme: light only;

    --white:     #FFFFFF;
    --band:      #F8F8F6;
    --band-2:    #F2F2EF;
    --line:      #E2E2DB;
    --line-2:    #D0D0C8;

    --ink:       #0E0E0D;
    --ink-2:     #4A4A46;
    --muted:     #7C7C76;

    --gold:      #D4AF37;
    --gold-hi:   #E0C053;
    --gold-deep: #8A6D0B;
    --gold-tint: #FCF7E8;

    --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --r:    8px;
    --r-lg: 14px;
    --pad:  clamp(20px, 5vw, 46px);

    --sh-sm: 0 1px 2px rgba(14,14,13,.05), 0 2px 8px -4px rgba(14,14,13,.07);
    --sh-lg: 0 1px 3px rgba(14,14,13,.05), 0 20px 44px -22px rgba(14,14,13,.20);
  }

  * { box-sizing: border-box; }

  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  }

  body {
    margin: 0;
    background: var(--white);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16.5px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  .shell { max-width: 1160px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

  h1, h2, h3 { text-wrap: balance; }

  .kicker {
    font-size: 11.5px; font-weight: 750; letter-spacing: .16em; text-transform: uppercase;
    color: var(--gold-deep); margin: 0 0 14px;
  }

  h2 { font-size: clamp(27px, 3.9vw, 40px); line-height: 1.12; letter-spacing: -.03em; font-weight: 750; margin: 0; }
  .lede { color: var(--ink-2); margin: 15px 0 0; max-width: 60ch; font-size: 17px; }

  a { color: var(--gold-deep); }
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
    outline: 2.5px solid var(--gold-deep); outline-offset: 2px; border-radius: 4px;
  }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font-family: var(--sans); font-size: 15.5px; font-weight: 700;
    padding: 15px 30px; border-radius: var(--r);
    text-decoration: none; cursor: pointer; border: 2px solid transparent; line-height: 1.2;
  }
  .btn-gold  { background: var(--gold); color: var(--ink); box-shadow: var(--sh-sm); }
  .btn-gold:hover { background: var(--gold-hi); }
  .btn-black { background: var(--ink); color: var(--white); }
  .btn-black:hover { background: #2A2A27; }
  .btn-block { width: 100%; }

  /* ================= NAV ================= */

  .nav { background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
  .nav-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 15px; padding-bottom: 15px; }
  .brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
  /* width/height on the <img> carry the 3.32:1 ratio so the row reserves space
     before the file loads — height here, width auto, no layout shift. */
  .brand img { display: block; height: 46px; width: auto; }
  .nav-links { display: flex; align-items: center; gap: 28px; }
  .nav-links a { font-size: 15px; color: var(--ink-2); text-decoration: none; font-weight: 550; }
  .nav-links a:hover { color: var(--ink); }
  .nav-links .btn { padding: 11px 20px; font-size: 14.5px; white-space: nowrap; }
  .nav-menu { display: flex; align-items: center; gap: 28px; }
  .nav-toggle { display: none; }
  .nav-cta { display: none; }
  /* Account access, not marketing navigation — set quieter than the page links
     so it does not compete with them or with the estimate CTA. */
  .nav-signin { color: var(--muted) !important; font-weight: 600; }
  .nav-signin:hover { color: var(--ink) !important; }

  /* Below 860 the links move into a drop panel behind the hamburger. They used
     to be display:none here, which left phones with no navigation at all. */
  @media (max-width: 860px) {
    .nav-toggle {
      display: grid; place-content: center; gap: 5px;
      width: 42px; height: 42px; padding: 0;
      background: none; border: 1px solid var(--line-2); border-radius: var(--r);
      cursor: pointer; flex-shrink: 0;
    }
    .nav-toggle span {
      display: block; width: 18px; height: 2px; border-radius: 2px;
      background: var(--ink); transition: transform .18s ease, opacity .18s ease;
    }
    .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .nav-menu {
      display: none;
      position: absolute; top: 100%; left: 0; right: 0;
      flex-direction: column; align-items: stretch; gap: 0;
      padding: 4px var(--pad) 12px;
      background: var(--white);
      border-bottom: 1px solid var(--line);
      box-shadow: var(--sh-lg);
    }
    .nav-menu[data-open] { display: flex; }
    .nav-menu a { padding: 14px 0; font-size: 16px; border-top: 1px solid var(--line); }
    .nav-menu a:first-child { border-top: 0; }
    .nav-menu a[aria-current="page"] { color: var(--gold-deep); font-weight: 700; }
  }
  @media (prefers-reduced-motion: reduce) { .nav-toggle span { transition: none; } }
  .nav-toggle:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
  @media (max-width: 560px) {
    .brand img { height: 34px; }
    .nav-in { gap: 12px; }
    /* Brand + CTA + hamburger overflows a 390px bar. Below 560 the CTA moves
       into the panel so the bar is just brand and hamburger. */
    .nav-links > .btn { display: none; }
    .nav-menu .nav-cta {
      display: inline-flex; justify-content: center;
      border-top: 0; margin-top: 14px; padding: 13px 20px; font-size: 15px;
    }
  }

  /* ================= HERO ================= */

  .hero { padding-top: clamp(36px, 6vw, 70px); padding-bottom: clamp(38px, 6vw, 66px); }
  /* Two rows on desktop so the copy and the perks stack beside a full-height
     card. On mobile the areas collapse to copy → calculator → perks, putting
     the estimate above the fold instead of below a wall of text. */
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 452px);
    grid-template-areas: "copy calc" "perks calc";
    grid-template-rows: auto 1fr;
    column-gap: clamp(30px, 5vw, 56px);
    row-gap: 30px;
  }
  .hero-copy  { grid-area: copy; }
  .hero-perks { grid-area: perks; }
  /* grid-area must stay scoped to .hero-grid, which is the only container that
     declares these area names. Unscoped, .calc drags the name into .calcwrap —
     a grid with no areas — where it mints implicit calc-start/calc-end tracks,
     and the 1fr copy column collapses to 0. */
  .hero-grid .calc { grid-area: calc; }
  .calc       { align-self: start; }

  @media (max-width: 950px) {
    .hero-grid {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: "copy" "calc" "perks";
      grid-template-rows: auto auto auto;
      row-gap: 32px;
    }
  }

  .hero h1 { font-size: clamp(33px, 4.7vw, 50px); line-height: 1.05; letter-spacing: -.038em; font-weight: 800; margin: 0; }
  /* Gold works as a material, not as text — a highlight bar keeps the words
     full-contrast black while still reading as gold. */
  .hero h1 em {
    font-style: normal; color: var(--ink);
    background-image: linear-gradient(var(--gold), var(--gold));
    background-repeat: no-repeat;
    background-size: 100% .16em;
    background-position: 0 103%;
    padding-bottom: .06em;
  }
  .hero .sub { font-size: clamp(17px, 2vw, 19.5px); color: var(--ink-2); margin: 21px 0 0; max-width: 50ch; }

  .perks { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 24px; max-width: 540px; }
  @media (max-width: 520px) { .perks { grid-template-columns: minmax(0,1fr); } }
  .perks li { display: flex; align-items: flex-start; gap: 11px; font-size: 15.5px; color: var(--ink); font-weight: 570; }
  .perks .tick {
    width: 21px; height: 21px; border-radius: 50%; background: var(--gold);
    display: grid; place-items: center; flex-shrink: 0; margin-top: 2px;
  }
  .perks .tick svg { width: 12px; height: 12px; }

  .reassure { margin: 28px 0 0; font-size: 14.5px; color: var(--muted); max-width: 52ch; }

  /* ================= CALCULATOR ================= */

  .calc { background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--sh-lg); overflow: hidden; }
  .calc-top { height: 4px; background: var(--gold); }
  .calc-head { padding: 22px var(--pad) 0; }
  .calc-head h2 { font-size: 22px; letter-spacing: -.025em; }
  .calc-head p { margin: 7px 0 0; font-size: 14px; color: var(--muted); }
  .calc-body { padding: 18px clamp(20px, 3.4vw, 30px) clamp(20px, 3.4vw, 30px); display: flex; flex-direction: column; gap: 14px; }
  .calc-head { padding-left: clamp(20px, 3.4vw, 30px); padding-right: clamp(20px, 3.4vw, 30px); }

  .fld { display: flex; flex-direction: column; gap: 7px; }
  .fld > label { font-size: 13.5px; font-weight: 700; color: var(--ink); }
  .fld > label .unit { font-weight: 500; color: var(--muted); }
  .fld .hint { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.45; }

  .fld input[type="number"], .fld select {
    width: 100%; font-size: 16px; font-family: var(--sans); color: var(--ink);
    background: var(--white); border: 1.5px solid var(--line-2);
    border-radius: var(--r); padding: 12px 13px; font-variant-numeric: tabular-nums;
  }
  .fld input[type="number"]:hover, .fld select:hover { border-color: var(--muted); }

  .seg { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 7px; }
  @media (max-width: 400px) { .seg { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  .seg button {
    appearance: none; border: 1.5px solid var(--line-2); background: var(--white);
    border-radius: var(--r); padding: 11px 5px; cursor: pointer;
    font-family: var(--sans); font-size: 13.5px; font-weight: 650; color: var(--ink-2);
    display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1.25;
  }
  .seg button small { font-size: 10.5px; font-weight: 500; color: var(--muted); }
  .seg .spec { width: 34px; height: 34px; display: block; margin-bottom: 2px; }
  .pcard .spec-lg { width: 64px; height: 64px; display: block; margin-bottom: 10px; }
  .seg button:hover { border-color: var(--muted); }
  .seg button[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-tint); color: var(--ink); }
  .seg button[aria-pressed="true"] small { color: var(--gold-deep); }

  .chk { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; user-select: none; line-height: 1.4; }
  .chk input { width: 16px; height: 16px; accent-color: var(--ink); cursor: pointer; flex-shrink: 0; margin-top: 2px; }

  /* ---- custom dropdown ----
     A native <select> renders unstyled and its popup is unreliable inside
     embedded/preview frames, so this is a real listbox. */
  .cselect { position: relative; }
  .cselect-btn {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-family: var(--sans); font-size: 16px; font-weight: 550; color: var(--ink); text-align: left;
    background: var(--white); border: 1.5px solid var(--line-2); border-radius: var(--r);
    padding: 12px 13px; cursor: pointer;
  }
  .cselect-btn:hover { border-color: var(--muted); }
  .cselect-btn .chev { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted); transition: transform .16s ease; }
  .cselect-btn[aria-expanded="true"] { border-color: var(--gold); }
  .cselect-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }

  .cselect-list {
    position: absolute; z-index: 30; top: calc(100% + 5px); left: 0; right: 0;
    margin: 0; padding: 5px; list-style: none;
    max-height: 244px; overflow-y: auto;
    background: var(--white); border: 1.5px solid var(--line-2); border-radius: var(--r);
    box-shadow: var(--sh-lg);
  }
  .cselect-list li {
    padding: 10px 12px; border-radius: 6px; cursor: pointer;
    font-size: 15px; color: var(--ink-2); display: flex; align-items: center; justify-content: space-between; gap: 10px;
  }
  .cselect-list li .band { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .cselect-list li:hover, .cselect-list li.active { background: var(--band-2); color: var(--ink); }
  .cselect-list li[aria-selected="true"] { background: var(--gold-tint); color: var(--ink); font-weight: 650; }

  /* ---- purity slider ---- */
  .rangehead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .rangeval {
    font-size: 19px; font-weight: 800; color: var(--ink);
    font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  }
  .rangewrap { padding: 2px 0 0; }
  input[type="range"] {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 26px; margin: 0; background: transparent; cursor: grab; display: block;
  }
  input[type="range"]:active { cursor: grabbing; }
  input[type="range"]::-webkit-slider-runnable-track {
    height: 8px; border-radius: 99px; border: 1px solid var(--line-2);
    background:
      linear-gradient(var(--gold), var(--gold)) 0 0 / var(--fill, 50%) 100% no-repeat,
      var(--band-2);
  }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 24px; height: 24px; border-radius: 50%; margin-top: -9px;
    background: var(--white); border: 3px solid var(--ink);
    box-shadow: 0 1px 5px rgba(14,14,13,.25);
  }
  input[type="range"]::-moz-range-track {
    height: 8px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--band-2);
  }
  input[type="range"]::-moz-range-progress { height: 8px; border-radius: 99px; background: var(--gold); }
  input[type="range"]::-moz-range-thumb {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--white); border: 3px solid var(--ink);
    box-shadow: 0 1px 5px rgba(14,14,13,.25);
  }
  .rangescale {
    display: flex; justify-content: space-between;
    font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: -2px;
  }
  /* Estimated band rather than a stated value — softened, but still live. */
  .is-unknown .rangeval { color: var(--muted); font-weight: 700; font-size: 16px; }
  .is-unknown input[type="range"]::-webkit-slider-thumb { border-color: var(--muted); }
  .is-unknown input[type="range"]::-moz-range-thumb { border-color: var(--muted); }

  .result { background: var(--gold-tint); border: 1px solid #EFE2BC; border-radius: var(--r); padding: 22px; text-align: center; }
  .result .k { font-size: 11.5px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 9px; }
  .result .v { font-size: clamp(28px, 5.2vw, 37px); font-weight: 800; letter-spacing: -.04em; color: var(--ink); line-height: 1.05; font-variant-numeric: tabular-nums; }
  .result .n { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }

  .calc-foot { font-size: 12px; color: var(--muted); text-align: center; margin: 0; line-height: 1.5; }

  /* ================= BANDS ================= */

  section.band { padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(56px, 8vw, 96px); }
  .band-alt { background: var(--band); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .band-head { max-width: 62ch; }

  .steps { list-style: none; margin: 42px 0 0; padding: 0; display: grid; gap: 18px; }
  @media (min-width: 700px) { .steps { grid-template-columns: repeat(3, minmax(0,1fr)); } }
  .steps li { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; display: flex; flex-direction: column; gap: 9px; }
  .steps .n {
    width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--gold);
    display: grid; place-items: center; font-size: 14px; font-weight: 800; margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
  }
  .steps h3 { font-size: 17.5px; font-weight: 720; margin: 0; letter-spacing: -.02em; }
  .steps p { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }

  .grid4 { display: grid; gap: 18px; margin-top: 42px; }
  @media (min-width: 760px) { .grid4 { grid-template-columns: repeat(4, minmax(0,1fr)); } }
  .pcard { background: var(--band); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; display: flex; flex-direction: column; gap: 6px; }
  .band-alt .pcard { background: var(--white); }
  .pcard .rate {
    font-size: 32px; font-weight: 800; letter-spacing: -.035em; color: var(--ink);
    font-variant-numeric: tabular-nums; line-height: 1.1;
    border-bottom: 3px solid var(--gold); align-self: flex-start; padding-bottom: 2px;
  }
  .pcard h3 { font-size: 16.5px; font-weight: 720; margin: 5px 0 0; letter-spacing: -.02em; }
  .pcard p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.5; }

  .regions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; padding: 0; list-style: none; }
  .regions li { background: var(--white); border: 1px solid var(--line-2); border-radius: 999px; padding: 9px 19px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }

  .tablewrap { overflow-x: auto; margin-top: 38px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); }
  table { border-collapse: collapse; width: 100%; font-size: 15px; min-width: 560px; }
  th, td { padding: 16px 21px; text-align: left; border-top: 1px solid var(--line); vertical-align: top; }
  thead th { font-size: 11.5px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); border-top: 0; background: var(--band-2); }
  tbody td:first-child { font-weight: 700; color: var(--ink); white-space: nowrap; }
  tbody td:nth-child(2) { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-2); }
  tbody td:last-child { color: var(--ink-2); font-size: 14.5px; }
  tbody tr.us td { background: var(--gold-tint); }
  tbody tr.us td:first-child, tbody tr.us td:nth-child(2) { color: var(--gold-deep); font-weight: 800; }

  /* Below 700px the table reflows into cards. A three-column comparison inside
     a horizontal scroller is unusable on a phone — you cannot compare rows you
     cannot see at the same time. The <table> stays semantic for desktop and
     assistive tech; only the presentation changes. */
  @media (max-width: 700px) {
    .tablewrap { border: 0; background: none; overflow: visible; margin-top: 28px; }
    table { min-width: 0; }
    table, tbody, tr, td { display: block; width: 100%; }
    thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

    tbody tr {
      background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
      padding: 17px 19px; margin-bottom: 12px;
    }
    tbody tr.us { background: var(--gold-tint); border-color: var(--gold); }
    tbody tr.us td { background: none; }

    tbody td { border: 0; padding: 0; white-space: normal; }
    tbody td:first-child { font-size: 17.5px; font-weight: 780; letter-spacing: -.022em; }
    tbody td:nth-child(2) { font-size: 16px; font-weight: 750; margin-top: 3px; color: var(--ink); }
    tbody tr.us td:nth-child(2) { color: var(--gold-deep); }
    tbody td:last-child { font-size: 14px; margin-top: 9px; }
    tbody td:last-child::before {
      content: attr(data-label); display: block;
      font-size: 10px; font-weight: 780; letter-spacing: .11em; text-transform: uppercase;
      color: var(--muted); margin-bottom: 3px;
    }
  }

  .faq { margin-top: 36px; }
  details { border: 1px solid var(--line); border-radius: var(--r); background: var(--white); margin-bottom: 10px; }
  summary { cursor: pointer; padding: 18px 48px 18px 21px; position: relative; font-size: 16.5px; font-weight: 680; list-style: none; letter-spacing: -.015em; }
  summary::-webkit-details-marker { display: none; }
  summary::after {
    content: ""; position: absolute; right: 21px; top: 50%; width: 9px; height: 9px;
    border-right: 2.2px solid var(--gold-deep); border-bottom: 2.2px solid var(--gold-deep);
    transform: translateY(-70%) rotate(45deg);
  }
  details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
  details p { margin: 0 21px 19px; font-size: 15.5px; color: var(--ink-2); max-width: 72ch; }
  /* `.prose p` (0,1,1) outranks `details p` (0,0,2), so inside a .prose column
     the side margin was being flattened and answers ran to the panel edge —
     every FAQ page except the homepage, where the FAQ sits outside .prose.
     This selector is (0,1,2) and restores the inset. */
  .prose details p { margin: 0 21px 19px; }

  .final { background: var(--ink); text-align: center; }
  .final .kicker { color: var(--gold); }
  .final h2 { color: var(--white); }
  .final .lede { color: #B9B9B2; margin-left: auto; margin-right: auto; }
  .final .btn { margin-top: 28px; }

  footer { background: var(--white); border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
  .foot-in { padding-top: 36px; padding-bottom: 46px; display: flex; flex-direction: column; gap: 15px; }
  footer p { margin: 0; max-width: 84ch; line-height: 1.6; }
  footer .draft { background: var(--gold-tint); border-radius: var(--r); border-left: 3px solid var(--gold); padding: 14px 16px; color: var(--ink-2); }
  footer .draft strong { color: var(--ink); }

  /* ================= ARTICLE & GUIDE PAGES ================= */

  .prose { max-width: 68ch; }
  /* When .prose doubles as the shell, its 68ch cap shrank the shell box itself
     and `.shell { margin: 0 auto }` then centred it — so page headers sat
     indented while every band below started at the shell edge. Keep the shell's
     width here and constrain the reading measure on the children instead, so
     the two line up. */
  .shell.prose { max-width: 1160px; }
  .shell.prose > * { max-width: 68ch; }
  .prose p { margin: 15px 0 0; color: var(--ink-2); }
  .prose p strong, .prose li strong { color: var(--ink); }
  .prose ul { margin: 15px 0 0; padding-left: 22px; color: var(--ink-2); }
  .prose li { margin: 7px 0; }
  .prose h1 { font-size: clamp(31px, 4.4vw, 46px); line-height: 1.06; letter-spacing: -.036em; font-weight: 800; margin: 0; max-width: 20ch; }

  h2.sec { font-size: clamp(24px, 3.3vw, 33px); line-height: 1.14; letter-spacing: -.03em; font-weight: 780; margin: 0; }
  .prose h3 { font-size: 19.5px; font-weight: 740; letter-spacing: -.02em; margin: 30px 0 0; }

  .standfirst { font-size: clamp(17.5px, 2vw, 20px); color: var(--ink-2); margin: 20px 0 0; max-width: 60ch; }

  .crumbs { font-size: 13.5px; color: var(--muted); padding-top: 20px; }
  .crumbs a { color: var(--muted); text-decoration: none; }
  .crumbs a:hover { color: var(--ink); text-decoration: underline; }
  .crumbs span { margin: 0 7px; }

  .answer { background: var(--gold-tint); border: 1px solid #EFE2BC; border-radius: var(--r-lg); padding: clamp(20px, 3.2vw, 28px); margin: 30px 0 0; max-width: 72ch; }
  .answer h2 { font-size: 19px; font-weight: 780; letter-spacing: -.02em; margin: 0 0 10px; }
  .answer p { margin: 0 0 12px; font-size: 16px; color: var(--ink-2); }
  .answer p:last-child { margin-bottom: 0; }
  .formula { background: var(--white); border-radius: var(--r); padding: 15px 17px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 12px; line-height: 1.5; }
  .formula em { font-style: normal; color: var(--gold-deep); }

  .pull { border-left: 3px solid var(--gold); padding: 4px 0 4px 18px; margin: 24px 0 0; font-size: 18.5px; font-weight: 650; letter-spacing: -.018em; color: var(--ink); max-width: 56ch; }

  td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

  /* copy beside a calculator */
  .calcwrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 452px); gap: clamp(28px, 4.5vw, 56px); align-items: start; }
  @media (max-width: 950px) { .calcwrap { grid-template-columns: minmax(0, 1fr); } }

  /* Unit converter. Grid rather than a table: these are paired label/value
     controls, not tabular data, and the site's table CSS is built for short
     numeric cells with data-label. */
  .conv { display: grid; gap: 12px; margin-top: 30px; max-width: 620px; }
  .conv-row {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 190px);
    gap: 12px; align-items: center;
    background: var(--white); border: 1px solid var(--line-2);
    border-radius: var(--r); padding: 14px 16px;
  }
  .conv-row label { font-size: 15px; font-weight: 700; color: var(--ink); }
  .conv-row label small { display: block; font-weight: 500; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
  .conv-row input {
    font-family: var(--sans); font-size: 17px; font-weight: 650;
    font-variant-numeric: tabular-nums; text-align: right;
    padding: 11px 13px; border: 1.5px solid var(--line-2); border-radius: var(--r);
    background: var(--band); color: var(--ink); width: 100%; min-width: 0;
  }
  .conv-row input:focus { border-color: var(--gold); outline: none; background: var(--white); }
  @media (max-width: 560px) {
    .conv-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .conv-row input { text-align: left; }
  }

  /* Band photography. width/height on every <img> carry the intrinsic ratio so
     the band reserves its height before the file loads. */
  .band-figure { margin: 30px 0 0; }
  .band-figure img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); border: 1px solid var(--line); }
  .band-figure figcaption { margin-top: 10px; font-size: 13.5px; color: var(--muted); }
  .band-figure.narrow { max-width: 620px; }

  .regions li a { color: inherit; text-decoration: none; }
  .regions li:has(a):hover { border-color: var(--muted); }

  /* ================= CLOSING CTA ================= */

  .cta-band { background: var(--ink); text-align: center; }
  .cta-band h2 { color: var(--white); }
  .cta-band .lede { color: #B9B9B2; margin-left: auto; margin-right: auto; max-width: 54ch; }
  .cta-band .btn { margin-top: 26px; }

  /* ================= FOOTER ================= */

  .foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; padding-bottom: 12px; }
  @media (max-width: 780px) { .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 430px) { .foot-cols { grid-template-columns: minmax(0, 1fr); } }
  .foot-cols h2 { font-size: 11px; font-weight: 780; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin: 0 0 12px; }
  .foot-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .foot-cols a { color: var(--ink-2); text-decoration: none; font-size: 14px; }
  .foot-cols a:hover { color: var(--ink); text-decoration: underline; }