/* ---------- Root / theme ---------- */
:root{
  --ink:#0f172a;
  --muted:#6b7280;
  --bg:#0b1020;
  --card:#ffffff;
  --line:#e5e7eb;
  --accent:#e11d2e;
  --accent-ink:#ffffff;
  --ghost:#f8fafc;
  --shadow:0 1px 2px rgba(0,0,0,.06), 0 10px 40px rgba(0,0,0,.10);
  --radius:18px;

  /* Swap to your own background image */
  --bg-url: url('https://images.unsplash.com/photo-1516595433572-59c7e79c3d32?q=80&w=1600&auto=format&fit=crop');
}

/* A11y helpers */
.sr{position:absolute !important;clip:rect(1px,1px,1px,1px);padding:0 !important;border:0 !important;height:1px !important;width:1px !important;overflow:hidden}
[hidden]{display:none !important}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  color:var(--ink);
  background:var(--bg);
}

/* Background image (correct shorthand: image first) */
.bg{
  position:fixed; inset:0; z-index:-1;
  background: var(--bg-url) center/cover no-repeat;
  filter: brightness(.58);
}

/* Utilities */
.wrap{max-width:1000px;margin:0 auto;padding:0 16px}

/* ---------- Header ---------- */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(17,24,39,.45);     /* fallback */
  -webkit-backdrop-filter:saturate(180%) blur(8px);
  backdrop-filter:saturate(180%) blur(8px);
}
.header .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;
}
.logo{
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:900;
  font-size:1.6rem;
  color:var(--card);          /* red accent */
  text-decoration:none;
  letter-spacing:-0.5px;
}

.logo span{
  color:#e11d2e;          /* dark ink for contrast */
}
.meta-nav a{color:#eef2ff;text-decoration:none;margin-left:12px;font-weight:700}
.meta-nav a:hover{text-decoration:underline}

/* ---------- Hero ---------- */
.hero{padding:22px 0 10px}
.hero .wrap{display:grid;gap:18px}
.hero__title{
  color:#fff;margin:0 0 6px;font-weight:900;
  font-size: clamp(1.4rem, 6vw, 2.2rem);
  line-height:1.15;
}
.hero__subtitle{color:#e5e7eb;margin:0 0 12px;font-weight:600}
.hero__art img{width:100%;height:auto;border-radius:14px;box-shadow:var(--shadow)}
.ticks{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px;color:#e5e7eb;font-weight:600}
.ticks li::before{content:"✓";margin-right:8px;color:#10b981}

/* Hero icons as rows, left aligned under title */
.hero-icons{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin:18px 0;
  align-items:flex-start;   /* align to left */
}

.hero-icon{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  color:#fff;
  font-weight:700;
  text-align:left;
}

/* Icon style */
.hero-icon .icon{
  width:40px;
  height:40px;
  flex-shrink:0;
  fill:#e11d2e;
  transition:transform 0.25s ease, fill 0.25s ease;
}

/* Hover effect */
.hero-icon:hover .icon{
  transform:scale(1.2);
  fill:#10b981;
}

/* Buttons */
.btn{
  appearance:none;border:0;border-radius:14px;display:inline-block;
  padding:12px 16px;font-weight:800;text-decoration:none;text-align:center;cursor:pointer;
}
.btn--primary{background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow)}
.btn--primary:hover{filter:brightness(.98)}
.btn--ghost{background:#111827;color:#fff}
.btn.disabled{opacity:.6;pointer-events:none}

/* ---------- Badges ---------- */
.badges{padding:14px 0}
.badge-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin:0;
  padding:0;
  list-style:none;   /* remove bullets */
}
.badge{
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  padding:6px 10px;
  background:rgba(17,24,39,.4);
  backdrop-filter:blur(4px);
  font-weight:700;
  color:#fff;
  white-space:nowrap; /* keep text on one line */
}

/* ---------- Quiz ---------- */
.section-title{margin:0 0 6px;font-size:clamp(1.25rem,5vw,1.7rem);font-weight:900;color:#fff}
.section-sub{margin:0 0 10px;color:#d1d5db}
.quiz .wrap{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;padding:16px
}
.steps{display:flex;gap:10px;list-style:none;padding:0;margin:0 0 14px;justify-content:center}
.dot{width:10px;height:10px;border-radius:50%;background:#cbd5e1}
.dot.is-active{background:#111827}
.dot.is-done{background:#16a34a}

.wizard .step{display:none}
.wizard .step.is-active{display:block}
.q{margin:0 0 12px;color:#fff;font-weight:900}

.options{display:grid;gap:10px}
.opt{
  display:block;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:12px 14px;font-weight:800;cursor:pointer
}
input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
input[type="radio"]:focus + .opt{outline:3px solid rgba(225,29,46,.25);outline-offset:2px}
input[type="radio"]:checked + .opt{
  border-color:var(--accent);
  /* broad-support highlight (replaces color-mix) */
  background:linear-gradient(0deg, rgba(225,29,46,.08), rgba(225,29,46,.08));
  box-shadow:inset 0 0 0 2px var(--accent);
}
.nav{display:flex;gap:10px;justify-content:space-between;margin-top:12px}
.hint{color:#fecaca;font-weight:800;margin-top:8px;min-height:1em}

/* ---------- Picks (cards) ---------- */
.picks{padding:24px 0;background:#fff}
.picks .section-title{color:var(--ink)}
.cards{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.card{
  display:grid;
  grid-template-columns: 200px 1fr 140px 140px; /* widened first col */
  align-items:center;
  gap:14px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
  box-shadow:var(--shadow);
  position:relative;
}
.card__brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  min-width:200px; /* keep enough room for logo */
}
.card__head{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}
/* Card rank at top-left of card */
.card .rank{
  position:absolute;
  top:8px;
  left:8px;
  width:32px;
  height:32px;
  border:1px solid #d1d5db;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-weight:900;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
  z-index: 2;
}
.card__features{font-size:0.9rem}
.card__desc{font-weight:800;margin:0 0 6px;color:#374151}
.card__rating{
  text-align:center;
  font-weight:900;
}
.card__cta{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:center;
}
.brand{max-width:180px;height:auto;}
.rating{display:flex;align-items:center;gap:10px}
.rating .stars span{letter-spacing:1px}
.stars{color:#fbbf24;font-size:1.1rem;line-height:1}
.score{display:block;margin-top:4px;font-size:1rem;color:#111827}
.card__desc{margin:8px 0 10px;color:#374151}
/* Pros list: consistent tick/text alignment on all screens */
.pros{
  list-style: none;
  margin: 0;
  padding: 0;
  color: #111827;
}

/* Use a tiny 2-column grid per item: [✓] [text] */
.pros li{
  display: grid;
  grid-template-columns: 20px auto; /* tick column + text column */
  column-gap: 6px;
  align-items: start;
  line-height: 1.4;
  margin-bottom: 6px;
  text-align: left; /* keep the text itself left-aligned */
}

/* Green tick */
.pros li::before{
  content: "✓";
  color: #16a34a;
  font-weight: 900;
  /* grid places this in the first column automatically */
}
.card__cta{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.card .more{color:#6b7280;text-decoration:none;font-weight:700}
.card .more:hover{text-decoration:underline}
/* Badge styling */
.top-pick-card .top-pick{
  left: calc(8px + 32px + 8px); /* card left padding + rank size + gap = 48px */
  right: auto;
  white-space: nowrap;          /* keep it on one line */
  z-index: 2;
}
.top-pick{
  position:absolute;
  top:8px;
  left:8px;
  background:var(--accent);
  color:var(--accent-ink);
  font-size:0.8rem;
  font-weight:700;
  padding:4px 10px;
  border-radius:999px;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}

/* ---------- Features ---------- */
.features{padding:28px 0;background:#f8fafc;border-top:1px solid #e5e7eb}
.features .section-title{color:var(--ink)}
.grid-3{display:grid;gap:12px}
.feat{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:14px;box-shadow:var(--shadow)}
.feat h3{margin:0 0 6px}

/* ---------- FAQ ---------- */
.faq{padding:28px 0;background:#fff}
.faq .section-title{color:var(--ink)}
.accordion .acc{border:1px solid #e5e7eb;border-radius:14px;padding:10px 12px;background:#fff}
.accordion .acc + .acc{margin-top:10px}
.accordion summary{cursor:pointer;font-weight:800;list-style:none}
.accordion summary::-webkit-details-marker{display:none}
.acc__body{margin-top:8px;color:#374151}

/* ---------- Footer ---------- */
.footer{background:#0b1020;color:#e5e7eb;padding:18px 0;border-top:1px solid rgba(255,255,255,.12)}
.footer__grid{display:flex;justify-content:space-between;gap:10px;align-items:center}
.footer__nav a{color:#e5e7eb;text-decoration:none;margin-left:12px}
.footer__nav a:hover{text-decoration:underline}


/* ---------- Responsive ---------- */
@media (min-width: 640px){
  .hero .wrap{grid-template-columns:1.1fr .9fr;align-items:center}
  .options{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:repeat(3,1fr)}
}

/* Mobile responsiveness: stack columns */
@media (max-width: 720px){
  .card{
    grid-template-columns:1fr;
    text-align:center;
  }
  .card__brand,
  .card__rating,
  .card__cta{align-items:center}
  .card__features{
    text-align: center;          /* center the container */
  }
  .card__features .pros{
    display: inline-block;       /* shrink to content width so it can center */
    text-align: left;            /* keep item text/ticks aligned within */
  }
  .card-labels{
    position: static;       /* no longer absolute */
    margin-bottom: 8px;     /* gap below labels */
    display: flex;
    flex-direction: row;    /* rank + Top Pick side by side */
    gap: 8px;
    align-items: center;
    justify-content: center; /* center the labels on mobile */
  }
}

/* First card: accent outline + soft glow */
.cards > .card:first-child{
  border-color: var(--accent);
  box-shadow:
    0 0 0 2px rgba(225,29,46,.12),
    0 10px 30px rgba(225,29,46,.12),
    var(--shadow);
  position: relative;
}

/* Optional: tiny “Most recommended” chip in the card’s top padding line */
.cards > .card:first-child::after{
  content: "Most recommended";
  display: inline-flex;
  font-weight: 800;
  font-size: .75rem;
  color: var(--accent);
  background: rgba(225,29,46,.08);
  border: 1px solid rgba(225,29,46,.25);
  border-radius: 999px;
  padding: 3px 8px;
  margin-left: 0;           /* stays in-flow; no overlap */
  justify-content: center;           /* horizontal centering */
  align-items: center;               /* vertical centering */
  text-align: center;                /* fallback */
}

/* -----------------------------------------------------------
   MOBILE/TABLET FIXES: keep "Top Pick" above the logo, no overlap
   Covers both markup patterns:
   A) <div class="card-labels"><span class="rank">…</span><span class="top-pick">…</span></div>
   B) <article class="card"><span class="rank">…</span><span class="top-pick">…</span> … </article>
   ----------------------------------------------------------- */
@media (max-width: 900px){

  /* ---- Pattern A: there is a .card-labels wrapper ---- */
  .card.has-labels .card-labels,
  .card .card-labels{
    position: static !important;        /* take labels out of absolute layer */
    margin: 6px 0 12px !important;      /* breathing room above logo */
    display: flex !important;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;            /* center the rank + pill group */
  }

  /* Remove extra headroom used on desktop when labels are absolute */
  .card.has-labels{ padding-top: 14px !important; }

  /* ---- Pattern B: rank + top-pick are direct children of .card ---- */
  .card > .rank,
  .card > .top-pick{
    position: static !important;        /* no absolute positioning on mobile */
    display: inline-flex !important;
    vertical-align: middle;
    margin: 0 8px 12px 0 !important;    /* stack above logo with a gap */
    z-index: 1;                          /* sit above card content if needed */
  }
  .card > .top-pick{ margin-right: 0 !important; }

  /* Ensure the brand row starts below the labels */
  .card__brand{ clear: both; display:flex; justify-content:center; align-items:center; }

  /* Keep the CTA tidy in the centered mobile stack */
  .card__cta{ align-items:center; text-align:center; }
  .card__cta .btn{ width:100%; max-width:240px; }
}

/* Optional: shrink the Top Pick pill slightly on small screens */
@media (max-width: 480px){
  .top-pick{ font-size: .78rem; padding: 4px 10px; }
}