/*  :root{
    --bg: #0f0f12;
    --card: #17171d;
    --ink: #e9e9f0;
    --muted: #b7b7c9;
    --accent: #3fe0c5;   /* mild neon aqua 
    --accent-2: #ff6f91; /* mild neon coral 
    --radius: 18px;
  }
  */

  body{
    margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg); color: var(--ink);
    line-height:1.55;
  }

  .wrap{
    max-width: 1100px; margin: 48px auto; padding: 0 20px;
  }

  /* Feature list */
  .features{
    background: linear-gradient(180deg, #191923, #14141b);
    border: 1px solid #252533; border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 28px;
  }
  .features h2{
    margin: 0 0 10px; font-size: 1.2rem; letter-spacing: .3px;
  }
  .feature-tags{
    display: flex; flex-wrap: wrap; gap: 8px;
    list-style: none; padding: 0; margin: 0;
  }
  .feature-tags li{
    border: 1px solid #2c2c3a; background: #111116;
    color: var(--muted);
    padding: 8px 12px; border-radius: 999px; font-size: .92rem;
  }
  .feature-tags li::before{
    margin-right: 8px; color: var(--accent);
  }

  /* Cards grid */
  .grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  @media (min-width: 720px){
    .grid{ grid-template-columns: 1fr 1fr; }
  }

  .card{
    display: flex; flex-direction: column;
    background: var(--card);
    border: 1px solid #262635;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0,0,0,.25);
  }

  .card__media{
    aspect-ratio: 16 / 9;
    background: #0c0c11;
    overflow: hidden;
  }
  .card__media img{
    width: 100%; height: 100%; object-fit: cover; display: block;
    transform: scale(1.02);
  }

  .card__body{
    padding: 18px 18px 8px;
  }
  .card__title{
    margin: 0 0 8px; font-size: 1.15rem;
    letter-spacing: .2px;
  }
  .card__meta{
    font-size: .9rem; color: var(--muted); margin-bottom: 10px;
  }
  .card__summary{
    margin: 0 0 14px; color: #d9d9e6;
  }

  .card__actions{
    display: flex; gap: 10px; align-items: center;
    padding: 0 18px 18px;
  }

  /* Optional: a plain "Preview" link style if you want it */
  .btn-outline{
    appearance: none; border: 1px solid #2d2d3b; background: transparent; color: var(--ink);
    padding: 10px 14px; border-radius: 10px; font-weight: 600; font-size: .95rem;
    text-decoration: none; transition: .2s ease;
  }
  .btn-outline:hover{ border-color: var(--accent); color: var(--accent); }

  /* Make Payhip buttons align visually */
  .payhip-button{
    --btn-bg: var(--accent);
    --btn-ink: #0b0b0e;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; border-radius: 10px; padding: 11px 16px;
    font-weight: 700; text-decoration: none; color: var(--btn-ink);
    background: var(--btn-bg); border: 0; cursor: pointer;
  }
  .payhip-button:hover{ filter: brightness(1.05); }
  .payhip-button svg{ width: 18px; height: 18px; }

  /* Tiny legal line */
  .note{
    margin-top: 16px; color: var(--muted); font-size: .85rem;
  }