:root {
      --ink: #1a1a1a;
      --ink-soft: #2a2a2a;
      --muted: #5a5a5a;
      --muted-soft: #6b6b6b;
      --line: #e6e6e6;
      --line-soft: #efece7;
      --bg: #ffffff;
      --bg-warm: #fbf8f3;
      --bg-soft: #f7f5f0;
      --accent: #1565c0;
      --accent-strong: #1976d2;
      --tint: #e3f2fd;
      --tint-line: #64b5f6;
      /* Darkened from #1a7f37 (2026-05-09 contrast audit). On the
         demo-frame pill's #e6f4ea tint, #1a7f37 was 4.47:1, just
         below WCAG AA. #176f30 reaches 5.55:1 and matches the
         server-rendered templates.py palette. Existing white-bg
         uses (positioning-card.is, etc.) get even more headroom. */
      --ok: #176f30;
      --serif: "Iowan Old Style", "Charter", "Source Serif 4 Subhead", "Source Serif Pro", "Georgia", serif;
      --sans: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
      --mono: ui-monospace, SFMono-Regular, "JetBrains Mono", monospace;
    }
    * { box-sizing: border-box; }
    html, body { background: var(--bg); color: var(--ink-soft); }
    body {
      font-family: var(--sans);
      line-height: 1.6;
      margin: 0;
      -webkit-font-smoothing: antialiased;
    }
    .wrap { max-width: 760px; margin: 0 auto; padding: 0 1.25em; }

    /* Accessibility: visible keyboard focus on every interactive
       element. Section 508 / EAA / WCAG 2.4.7. Outline (not just
       background) so it survives on coloured nav/card backgrounds. */
    :focus-visible { outline: 3px solid var(--accent);
                     outline-offset: 2px; border-radius: 3px; }

    /* Skip-to-content link. WCAG 2.4.1 (Bypass Blocks): keyboard
       users shouldn't have to tab through 6 nav items on every page
       to reach the content. Hidden offscreen until focused. */
    .skip-link { position: absolute; left: -9999px; top: 0;
                 background: var(--ink); color: #fff;
                 padding: 0.6em 1em; text-decoration: none;
                 z-index: 100; font-weight: 600; }
    .skip-link:focus { left: 0.5em; top: 0.5em; }

    /* Shared top nav. */
    .topnav { border-bottom: 1px solid var(--line); background: #fff; }
    .topnav-inner {
      max-width: 760px; margin: 0 auto; padding: 0.85em 1.25em;
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 0.4em;
    }
    .topnav .brand {
      font-family: var(--serif);
      font-weight: 600; color: var(--ink);
      text-decoration: none; font-size: 1.15em; letter-spacing: -0.01em;
    }
    .topnav ul {
      list-style: none; margin: 0; padding: 0;
      display: flex; flex-wrap: wrap; gap: 0.4em 1.4em;
    }
    .topnav ul li { white-space: nowrap; }
    .topnav ul a {
      color: var(--muted); text-decoration: none; font-size: 0.95em;
    }
    .topnav ul a:hover { color: var(--accent); }
    .topnav ul a.active { color: var(--accent); font-weight: 600; }
    @media (max-width: 480px) {
      .topnav ul { gap: 0.35em 1em; font-size: 0.92em; }
    }

    /* Editorial typography. */
    h1, h2, h3 {
      font-family: var(--serif);
      font-weight: 600;
      letter-spacing: -0.015em;
      color: var(--ink);
    }
    h1 { font-size: 2.4em; line-height: 1.1; margin: 0 0 0.45em; }
    h2 { font-size: 1.55em; line-height: 1.2; margin: 0 0 0.7em; }
    h3 { font-size: 1.05em; line-height: 1.3; margin: 1.2em 0 0.3em; font-family: var(--sans); font-weight: 700; letter-spacing: -0.005em; }
    p { margin: 0.7em 0; }

    /* Section eyebrow label, Stripe-docs style. */
    .eyebrow {
      display: inline-block;
      font-family: var(--sans);
      font-size: 0.78em;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted-soft);
      margin: 0 0 1em;
    }
    .eyebrow .num {
      color: var(--accent);
      margin-right: 0.6em;
    }

    section.hero { padding: 4em 0 3em; }
    .lead {
      font-size: 1.18em;
      color: var(--muted);
      margin: 0 0 1.6em;
      max-width: 60ch;
      line-height: 1.55;
    }
    .cta-row { display: flex; gap: 1.2em; flex-wrap: wrap;
               align-items: center; }
    .btn {
      display: inline-block;
      padding: 0.75em 1.3em;
      border-radius: 5px;
      text-decoration: none;
      font-weight: 600;
      font-size: 0.97em;
      border: 1px solid transparent;
      transition: background 0.12s, color 0.12s, border-color 0.12s;
    }
    .btn.primary {
      background: var(--accent-strong); color: #fff;
      /* Make the primary CTA unambiguously dominant per UX review:
         larger touch target + subtle elevation set it apart from any
         secondary action sitting next to it. */
      padding: 0.95em 1.7em; font-size: 1.05em;
      box-shadow: 0 1px 0 rgba(20,20,20,0.04),
                  0 6px 18px -8px rgba(21,101,192,0.45);
    }
    .btn.primary:hover { background: var(--accent); }
    /* Secondary becomes a quiet text link so the visual contest stops:
       the user's eye lands on the primary first, then notices "or
       verify" as the inline alternative. */
    .btn.secondary {
      padding: 0.4em 0; color: var(--accent);
      background: transparent; border: 0;
      border-bottom: 1px solid transparent;
    }
    .btn.secondary:hover {
      color: var(--accent-strong);
      border-bottom-color: var(--accent-strong);
    }
    .cta-row .cta-or {
      color: var(--muted-soft); font-size: 0.95em; font-weight: 500;
    }
    /* Above-the-fold "1 -> 2 -> 3" strip. Tight teaser of the full
       "How it works" section further down the page. Visual treatment
       is deliberately quiet so it reads as explanatory caption, not as
       a second CTA layer competing with the primary button. */
    .hero-strip {
      display: flex; flex-wrap: wrap; align-items: center;
      gap: 0.3em 0.7em; margin: 1.4em 0 0;
      font-size: 0.85em; color: var(--muted-soft);
      list-style: none; padding: 0;
    }
    .hero-strip .hero-step {
      display: inline-flex; align-items: center; gap: 0.4em;
    }
    .hero-strip .hero-step-num {
      display: inline-flex; align-items: center; justify-content: center;
      width: 1.25em; height: 1.25em; border-radius: 50%;
      background: #f0f0f0; color: #555;
      font-size: 0.75em; font-weight: 700;
    }
    .hero-strip .hero-step-arrow {
      /* Was #ccc → 1.61:1 on white, deep WCAG AA fail. Stepped to
         var(--muted-soft) (#6b6b6b) for 5.25:1. The arrow is still
         clearly subordinate to the numbered step text (--ink, 19:1)
         while remaining visible to low-vision users. (2026-05-09.) */
      color: var(--muted-soft); font-size: 0.95em;
    }

    /* Mobile: stack hero CTAs and step strip so neither wraps with a
       lone "or" or a stranded step 3. Matches the .flow-arrow precedent
       (line ~432) — narrow viewport rotates arrows vertical. */
    @media (max-width: 640px) {
      .cta-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5em;
      }
      .cta-row .btn.primary { align-self: stretch; text-align: center; }
      .cta-row .cta-or {
        align-self: center;
        font-size: 0.85em;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin: 0.1em 0;
      }
      .hero-strip {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35em;
      }
      .hero-strip .hero-step-arrow {
        transform: rotate(90deg);
        margin-left: 0.4em;
      }
    }

    section { padding: 3.5em 0; border-top: 1px solid var(--line); }
    section.warm { background: var(--bg-warm); }
    section + section { border-top: 1px solid var(--line-soft); }

    .privacy-callout {
      background: var(--tint);
      border: 1px solid var(--tint-line);
      border-radius: 6px;
      padding: 0.95em 1.15em;
      margin-top: 1.4em;
      font-size: 0.97em;
    }

    /* --- Demo receipt preview --- */
    .demo-frame {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: 0 1px 0 rgba(20, 20, 20, 0.02), 0 12px 32px -16px rgba(20, 20, 20, 0.12);
      padding: 1.6em 1.6em 1.4em;
      margin-top: 0.6em;
      position: relative;
    }
    .demo-frame::before {
      content: "Live preview";
      position: absolute;
      top: -0.7em; left: 1.4em;
      background: #fff;
      padding: 0 0.55em;
      font-size: 0.74em;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted-soft);
    }
    .demo-frame .badges {
      display: flex; flex-wrap: wrap; gap: 0.45em;
      margin: 0 0 0.9em;
    }
    .demo-frame .pill {
      display: inline-flex; align-items: center; gap: 0.3em;
      padding: 0.25em 0.65em; border-radius: 999px;
      font-size: 0.78em; font-weight: 600;
      background: #e6f4ea; color: var(--ok);
      border: 1px solid #b8dcc1;
    }
    .demo-frame .pill::before { content: "\2713"; font-size: 0.85em; }
    .demo-frame h3 {
      font-family: var(--serif);
      font-size: 1.15em;
      font-weight: 600;
      letter-spacing: -0.01em;
      margin: 0 0 0.5em;
    }
    .demo-grid {
      display: grid;
      grid-template-columns: max-content 1fr;
      gap: 0.4em 1em;
      margin: 0.9em 0 1em;
      font-size: 0.92em;
    }
    .demo-grid dt { font-weight: 600; color: var(--muted); }
    .demo-grid dd { margin: 0; word-break: break-all; color: var(--ink-soft); }
    .demo-grid code {
      background: var(--bg-soft);
      padding: 0.05em 0.35em;
      border-radius: 3px;
      font-family: var(--mono);
      font-size: 0.88em;
    }
    .demo-grid a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(21, 101, 192, 0.25); }
    .demo-grid a:hover { border-bottom-color: var(--accent); }
    .demo-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.55em;
      margin-top: 0.6em;
      padding-top: 1em;
      border-top: 1px solid var(--line);
    }
    .demo-actions .btn { font-size: 0.9em; padding: 0.55em 1em; }
    .demo-note {
      margin-top: 0.9em;
      font-size: 0.88em;
      color: var(--muted);
    }

    /* --- Use-case strip --- */
    .usecases {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1em;
      margin-top: 0.6em;
    }
    /* 2x2 variant for four-card lists; cards stay readable at desktop
       widths instead of squeezing to 4-up. */
    .usecases.four { grid-template-columns: repeat(2, 1fr); }
    .usecase {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 1.1em 1.15em;
    }
    .usecase .num {
      font-family: var(--serif);
      font-size: 1.15em;
      font-weight: 600;
      color: var(--accent);
      letter-spacing: -0.01em;
      margin-bottom: 0.2em;
    }
    .usecase h3 {
      margin: 0 0 0.35em;
      font-size: 1.0em;
    }
    .usecase p {
      margin: 0;
      color: var(--muted);
      font-size: 0.93em;
      line-height: 1.5;
    }

    ol.steps { padding-left: 1.2em; }
    ol.steps li { margin: 0.7em 0; }

    table.types {
      width: 100%;
      border-collapse: collapse;
      margin-top: 0.6em;
      font-size: 0.93em;
    }
    table.types th, table.types td {
      text-align: left;
      padding: 0.6em 0.6em;
      border-bottom: 1px solid var(--line);
      vertical-align: top;
    }
    table.types th {
      font-weight: 700; color: var(--muted-soft); font-size: 0.78em;
      text-transform: uppercase; letter-spacing: 0.1em;
    }
    table.types td:first-child { font-weight: 600; white-space: nowrap; }

    .grid-2 {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 1em 1.5em; margin-top: 0.8em;
    }
    .card {
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 1.05em 1.15em 1.1em;
      background: #fff;
    }
    .card h3 { margin-top: 0; }
    .card p { margin: 0.3em 0 0; color: var(--muted); font-size: 0.95em; }
    .card-icon {
      width: 28px; height: 28px;
      color: var(--accent);
      margin: 0 0 0.55em;
    }
    .card-icon svg { width: 100%; height: 100%; display: block; }

    /* Hero kicker: subtle accent rule + mini icon above H1. */
    .hero-mark {
      display: flex; align-items: center; gap: 0.7em;
      margin-bottom: 1.15em;
      color: var(--accent);
    }
    .hero-mark .rule {
      width: 36px; height: 2px;
      background: var(--accent);
      border-radius: 2px;
    }
    .hero-mark svg { width: 22px; height: 22px; }
    .hero-mark .label {
      font-family: var(--sans);
      font-size: 0.78em;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--muted-soft);
    }

    .why-bsv {
      background: var(--bg-soft);
      border-left: 3px solid var(--accent);
      padding: 0.95em 1.15em;
      border-radius: 0 5px 5px 0;
      margin: 1.4em 0 0;
      font-size: 0.95em;
      color: var(--ink-soft);
    }
    .why-bsv b { color: var(--ink); }

    /* --- Flow diagram --- */
    /* div.flow = 3 cards with arrow separators (apex + uses.html).
       ol.flow = 4 or 5 cards, no arrows (docs.html quickstart). */
    .flow {
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1fr;
      gap: 0.6em;
      align-items: stretch;
      margin: 1.2em 0 0.4em;
    }
    ol.flow {
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      list-style: none;
      padding: 0;
    }
    .flow-step {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 1.2em 1.1em 1.15em;
      display: flex;
      flex-direction: column;
      gap: 0.45em;
      box-shadow: 0 1px 0 rgba(20, 20, 20, 0.02);
    }
    .flow-step .step-num {
      font-family: var(--sans);
      font-size: 0.72em;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted-soft);
      margin-bottom: 0.05em;
    }
    .flow-icon {
      width: 38px;
      height: 38px;
      color: var(--accent);
      margin-bottom: 0.25em;
    }
    .flow-icon svg { width: 100%; height: 100%; display: block; }
    .flow-step h3 {
      font-family: var(--serif);
      font-size: 1.1em;
      font-weight: 600;
      letter-spacing: -0.01em;
      margin: 0 0 0.2em;
    }
    .flow-step p {
      margin: 0;
      color: var(--muted);
      font-size: 0.93em;
      line-height: 1.55;
    }
    .flow-arrow {
      align-self: center;
      width: 38px;
      color: var(--muted-soft);
      flex-shrink: 0;
    }
    .flow-arrow svg { width: 100%; height: auto; display: block; }

    @media (max-width: 720px) {
      .flow {
        grid-template-columns: 1fr;
        gap: 0.5em;
      }
      .flow-arrow {
        transform: rotate(90deg);
        width: 22px;
        margin: 0.15em auto;
      }
    }

    /* --- FAQ --- */
    .faq {
      margin: 1.2em 0 0;
      display: flex;
      flex-direction: column;
    }
    .faq dt {
      font-family: var(--serif);
      font-size: 1.1em;
      font-weight: 600;
      color: var(--ink);
      letter-spacing: -0.005em;
      margin-top: 1.4em;
      padding-top: 1.4em;
      border-top: 1px solid var(--line-soft);
    }
    .faq dt:first-of-type {
      margin-top: 0.5em;
      padding-top: 0;
      border-top: 0;
    }
    .faq dd {
      margin: 0.55em 0 0;
      color: var(--muted);
      font-size: 0.97em;
      line-height: 1.6;
    }
    .faq dd a { color: var(--accent); }

    a.contact-mail {
      display: inline-block;
      font-size: 1.15em;
      font-weight: 600;
      color: var(--accent);
      text-decoration: none;
      padding: 0.4em 0;
    }
    a.contact-mail:hover { text-decoration: underline; }

    code {
      background: #f3f3f3; padding: 0 0.3em; border-radius: 3px;
      font-family: var(--mono);
      font-size: 0.9em;
      overflow-wrap: anywhere;
    }

    /* --- Footer with operator block --- */
    footer.site {
      border-top: 1px solid var(--line);
      padding: 2.5em 0 3em;
      color: var(--muted);
      font-size: 0.9em;
      background: var(--bg-warm);
    }
    footer.site .wrap {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 1.6em;
      align-items: start;
    }
    footer.site h4 {
      margin: 0 0 0.5em;
      font-family: var(--sans);
      font-size: 0.78em;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted-soft);
    }
    footer.site p { margin: 0.3em 0; }
    footer.site a { color: var(--accent); text-decoration: none; }
    footer.site a:hover { text-decoration: underline; }
    footer.site .legal {
      margin-top: 1.4em;
      font-size: 0.82em;
      color: var(--muted-soft);
    }
    .op-block ul {
      list-style: none;
      padding: 0;
      margin: 0.3em 0 0;
    }
    .op-block li { margin: 0.25em 0; }

    @media (max-width: 640px) {
      h1 { font-size: 1.8em; }
      h2 { font-size: 1.3em; }
      /* Match the .usecases.four specificity (0,2,0) so the four-card
         variant also collapses to a single column on mobile. Without
         this, .usecases.four's repeat(2, 1fr) squeezes cards to half-
         viewport width (~180px on a 390px phone) and headlines wrap
         awkwardly. */
      .usecases, .usecases.four { grid-template-columns: 1fr; }
      .grid-2 { grid-template-columns: 1fr; }
      footer.site .wrap { grid-template-columns: 1fr; }
    }

    /* --- Positioning ("what this is / what this isn't") --- */
    .positioning-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.4em;
      margin: 1.6em 0 0.6em;
    }
    @media (max-width: 720px) {
      .positioning-grid { grid-template-columns: 1fr; }
    }
    .positioning-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 1.3em 1.4em 1.1em;
    }
    .positioning-card.is { border-color: #b8dcc1; background: #f4faf6; }
    .positioning-card.isnt { border-color: #e6cfa6; background: #fbf6ec; }
    .positioning-card h3 {
      margin: 0 0 0.6em;
      font-size: 1.05em;
      letter-spacing: 0.01em;
    }
    .positioning-card.is h3 { color: var(--ok); }
    .positioning-card.isnt h3 { color: #8a5a14; }
    .positioning-card ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .positioning-card li {
      padding: 0.22em 0 0.22em 1.3em;
      position: relative;
      color: var(--ink-soft);
    }
    .positioning-card.is li::before {
      content: "✓";
      position: absolute;
      left: 0;
      color: var(--ok);
      font-weight: 700;
    }
    .positioning-card.isnt li::before {
      content: "✗";
      position: absolute;
      left: 0;
      color: #b87410;
      font-weight: 700;
    }

    /* --- Mode decision (one-question helper above the cards) --- */
    .mode-decision {
      margin: 1.6em 0 0.4em;
      padding: 1.4em 1.5em 1.5em;
      background: #fafaf7;
      border: 1px solid var(--line);
      border-radius: 8px;
    }
    .mode-decision-q {
      margin: 0 0 1em;
      color: var(--ink-soft);
      font-size: 1em;
      line-height: 1.55;
    }
    .mode-decision-q b { color: var(--ink); }
    .mode-decision-answers {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1em;
    }
    @media (max-width: 720px) {
      .mode-decision-answers { grid-template-columns: 1fr; }
    }
    .mode-decision-answer {
      display: flex;
      flex-direction: column;
      gap: 0.45em;
      padding: 1em 1.1em 1.1em;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 6px;
      text-decoration: none;
      color: inherit;
      transition: border-color 0.12s, transform 0.12s;
    }
    .mode-decision-answer:hover {
      border-color: var(--accent-strong);
      transform: translateY(-1px);
    }
    .mode-decision-answer-no:hover  { border-color: #1c4f93; }
    .mode-decision-answer-yes:hover { border-color: #5a3b8a; }
    .mode-decision-quote {
      font-weight: 600;
      color: var(--ink);
      font-size: 1em;
    }
    .mode-decision-body {
      color: var(--ink-soft);
      font-size: 0.95em;
      line-height: 1.5;
    }
    .mode-decision-pick {
      margin-top: 0.25em;
      font-weight: 600;
      font-size: 0.92em;
      letter-spacing: 0.01em;
    }
    .mode-decision-answer-no  .mode-decision-pick { color: #1c4f93; }
    .mode-decision-answer-yes .mode-decision-pick { color: #5a3b8a; }

    /* --- Modes grid (Standard vs Sealed use cases) --- */
    .modes-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.4em;
      margin: 1.6em 0 0.6em;
    }
    @media (max-width: 720px) {
      .modes-grid { grid-template-columns: 1fr; }
    }
    .mode-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 1.4em 1.5em 1.5em;
      display: flex; flex-direction: column;
      /* CSS Grid items default to min-width: auto, which lets content
         (e.g. an unbroken curl URL inside <pre>) push the cell wider
         than its 1fr share — causing siblings to bleed. min-width: 0
         lets overflow-x: auto on the <pre> take effect instead. */
      min-width: 0;
    }
    .mode-card pre { max-width: 100%; }
    .mode-card.standard { border-color: #c4d6f1; background: #f3f7fc; }
    .mode-card.sealed   { border-color: #d4c8e6; background: #f6f3fa; }
    .mode-card h3 {
      margin: 0 0 0.4em;
      font-size: 1.15em;
      letter-spacing: 0.01em;
    }
    .mode-card.standard h3 { color: #1c4f93; }
    .mode-card.sealed   h3 { color: #5a3b8a; }
    .mode-card-tagline {
      color: var(--ink-soft); font-size: 0.95em;
      margin: 0 0 0.9em;
    }
    .mode-card ul {
      list-style: none;
      margin: 0 0 1.2em;
      padding: 0;
      flex-grow: 1;
    }
    .mode-card li {
      padding: 0.22em 0 0.22em 1.3em;
      position: relative;
      color: var(--ink-soft);
    }
    .mode-card li::before {
      content: "•";
      position: absolute;
      left: 0.3em; top: 0.18em;
      font-weight: 700; font-size: 1.1em;
    }
    .mode-card.standard li::before { color: #1c4f93; }
    .mode-card.sealed   li::before { color: #5a3b8a; }
    .mode-card-btn { align-self: flex-start; }

    /* --- Explore strip (links to /uses and /trust) --- */
    .explore-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.2em;
      margin-top: 1.4em;
    }
    @media (max-width: 720px) {
      .explore-grid { grid-template-columns: 1fr; }
    }
    .explore-card {
      display: block;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 1.4em 1.5em;
      text-decoration: none;
      color: var(--ink-soft);
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .explore-card:hover {
      border-color: var(--accent);
      box-shadow: 0 1px 0 rgba(20, 20, 20, 0.02),
                  0 12px 32px -16px rgba(20, 20, 20, 0.12);
    }
    .explore-card h3 {
      margin: 0 0 0.4em;
      color: var(--accent);
      font-size: 1.15em;
    }
    .explore-card p {
      margin: 0;
      color: var(--muted);
    }

    /* --- Subhero (used on /uses, /trust as a slimmer hero) --- */
    .subhero {
      padding: 3em 0 1.6em;
      background: var(--bg);
      border-bottom: 1px solid var(--line);
    }
    .subhero .eyebrow { margin-bottom: 0.6em; }
    .subhero h1 {
      margin: 0 0 0.4em;
      font-size: 2em;
      font-family: var(--serif);
      letter-spacing: -0.01em;
    }
    .subhero p.lead {
      max-width: 620px;
      color: var(--muted);
      font-size: 1.08em;
      line-height: 1.55;
      margin: 0;
    }

    /* --- Receipt gallery (used on /uses) --- */
    .receipt-gallery {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1em;
      margin-top: 1.2em;
    }
    @media (max-width: 900px) {
      .receipt-gallery { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 540px) {
      .receipt-gallery { grid-template-columns: 1fr; }
    }
    .receipt-card {
      display: block;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 1em 1.1em 0.9em;
      text-decoration: none;
      color: var(--ink-soft);
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .receipt-card:hover {
      border-color: var(--accent);
      box-shadow: 0 1px 0 rgba(20, 20, 20, 0.02),
                  0 8px 22px -12px rgba(20, 20, 20, 0.14);
    }
    .receipt-card .rc-type {
      display: inline-block;
      background: #1565c0;
      color: #fff;
      font-size: 0.72em;
      font-weight: 700;
      letter-spacing: 0.08em;
      padding: 0.18em 0.55em;
      border-radius: 3px;
      margin-bottom: 0.55em;
    }
    .receipt-card .rc-name {
      font-family: ui-monospace, SFMono-Regular, monospace;
      font-size: 0.93em;
      color: var(--ink);
      word-break: break-all;
      line-height: 1.3;
    }
    .receipt-card .rc-size {
      color: var(--muted-soft);
      font-weight: 400;
      margin-left: 0.3em;
    }
    .receipt-card .rc-schemes {
      margin: 0.55em 0 0.5em;
      display: flex;
      flex-wrap: wrap;
      gap: 0.3em;
    }
    .receipt-card .rc-scheme {
      font-family: ui-monospace, monospace;
      font-size: 0.78em;
      background: var(--tint);
      color: var(--accent);
      padding: 0.16em 0.5em;
      border-radius: 3px;
    }
    .receipt-card .rc-foot {
      color: var(--muted);
      font-size: 0.83em;
      padding-top: 0.5em;
      border-top: 1px solid var(--line);
      margin-top: 0.6em;
    }