.cookies-hero {
    background:linear-gradient(135deg, rgb(0, 85, 165) 40%, rgb(0, 168, 232) 100%);
    color: #fff;
}

.hero-pill {
    display:inline-flex; 
    align-items:center; 
    gap:.5rem;
    background: rgba(255,255,255,.15);
    border:1px solid rgba(255,255,255,.2);
    padding:.35rem .7rem; 
    border-radius:999px;
    font-size:.85rem;
}

      /* CARDS */
      .cookie-card {
        background: var(--quido-text-light);
        border: 1px solid var(--muted-20);
        border-radius: 1.25rem;
        padding: 1.1rem 1.2rem;
        box-shadow: 0 10px 30px color-mix(in srgb, var(--quido-glass) 35%, transparent);
        transition: transform .25s ease, box-shadow .25s ease;
      }
      .cookie-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 48px color-mix(in srgb, var(--quido-glass) 50%, transparent);
      }
      .section-title {
        display:flex; align-items:center; gap:.65rem;
        color: var(--ink-900);
        margin-bottom:.75rem;
      }
      .section-title .badge-soft {
        background: color-mix(in srgb, var(--brand-blue) 15%, transparent);
        color: var(--brand-teal);
        font-weight:700; font-size:.7rem;
        padding:.25rem .5rem; border-radius:.5rem;
      }
      .section-sub { color: var(--soft-muted-70); }

      /* Table */
      .cookie-table th {
        background: color-mix(in srgb, var(--muted-70) 45%, var(--quido-text-light));
        color: var(--ink-900);
        font-weight:600;
      }
      .cookie-table td, .cookie-table th {
        vertical-align: middle;
        border-color: var(--muted-20) !important;
      }

      /* Buttons */
      .btn-brand {
        background: var(--brand-blue);
        color: var(--quido-text-light);
        border: 1px solid color-mix(in srgb, var(--brand-blue) 70%, var(--brand-teal));
        border-radius: .7rem;
      }
      .btn-brand:hover { background: var(--brand-teal); border-color: var(--brand-teal); }

      .btn-outline-quiet {
        background: transparent;
        color: var(--brand-teal);
        border: 1px solid color-mix(in srgb, var(--brand-teal) 55%, transparent);
        border-radius: .7rem;
      }
      .btn-outline-quiet:hover { color: var(--brand-blue); border-color: var(--brand-blue); }

      .callout {
        background: linear-gradient(90deg,
          color-mix(in srgb, var(--brand-blue) 15%, transparent),
          transparent 80%);
        border-left: 4px solid var(--brand-blue);
        border-radius: .75rem;
        color: var(--ink-900);
        padding: .9rem 1rem;
      }

      .muted { color: var(--soft-muted-70); }