:root {
        --ink: #1f1f22;
        --paper: #f8f7f5;
        --teal: #0b6d66;
        --line: #ddd9d3;
        --card: #ffffff;
      }
      * { box-sizing: border-box; }
      body {
        margin: 0;
        font-family: "Space Grotesk", "Avenir Next", "Trebuchet MS", sans-serif;
        color: var(--ink);
        background: var(--paper);
      }
      main { max-width: 980px; margin: 0 auto; padding: 28px 18px 52px; }
      h1 { margin-top: 0; }
      .lead { color: #4c4c52; max-width: 780px; }
      .grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 12px;
        margin-top: 12px;
      }
      .card {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 16px;
      }
      .price {
        display: inline-block;
        background: #edf6f4;
        color: var(--teal);
        border-radius: 999px;
        padding: 6px 10px;
        font-weight: 700;
        margin-bottom: 8px;
      }
      .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
      .btn {
        display: inline-block;
        text-decoration: none;
        border-radius: 10px;
        padding: 10px 12px;
        font-weight: 700;
      }
      .btn-primary { background: var(--teal); color: #fff; }
      .btn-ghost { border: 1px solid var(--line); color: var(--ink); background: #fff; }
      .notes {
        margin-top: 14px;
        background: #fff;
        border: 1px dashed #ccc4ba;
        border-radius: 12px;
        padding: 12px;
      }
      code {
        background: #f5f3ef;
        border-radius: 6px;
        padding: 2px 6px;
      }