/* === Home visual upgrades === */
.angled{position:relative;overflow:hidden}
.angled:before{content:"";position:absolute;inset:-80px -40px auto -40px;height:180px;background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%,transparent), color-mix(in srgb, var(--accent) 12%,transparent));transform:skewY(-4deg);border-bottom:1px solid var(--border)}
.hero-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
.hero-illustration{border-radius:24px;box-shadow:var(--shadow-lg);overflow:hidden;border:1px solid var(--border)}
.trust-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.trust{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-size:13px}
.brand-marquee{display:flex;gap:24px;overflow:hidden;position:relative;padding:10px 0}
.brand-marquee .track{display:flex;gap:24px;animation:scroll 28s linear infinite}
.brand{display:flex;align-items:center;gap:10px;padding:12px 16px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.brand .dot{width:12px;height:12px;border-radius:999px;background:var(--primary)}

@keyframes scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

.picks{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pick{position:relative}
.ribbon{position:absolute;top:12px;left:-8px;background:var(--accent);color:var(--primary-on);padding:6px 10px;border-radius:0 10px 10px 0;font-size:12px;font-weight:800;box-shadow:var(--shadow-sm)}

.featured-compare{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px}
@media (max-width:900px){.hero-wrap{grid-template-columns:1fr}.picks,.featured-compare{grid-template-columns:1fr}}

.floating-cta{position:fixed;right:18px;bottom:18px;z-index:90;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-lg);padding:12px 16px;border-radius:16px;display:flex;gap:10px;align-items:center}
.floating-cta input{width:160px}
.card-ghost{background:linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 70%, transparent));border:1px dashed var(--border)}

.badges{display:flex;gap:8px;flex-wrap:wrap}
.badges .b{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px 10px;font-size:12px}

/* --- PATCH: fix ribbon overlap on pick cards --- */
.pick{position:relative;padding-top:36px} /* give the badge room */
.pick .ribbon{
  position:absolute;
  top:-12px;              /* sit slightly above the card */
  left:16px;
  border-radius:10px;
  padding:6px 12px;
  z-index:3;
  pointer-events:none;    /* avoid covering links */
  box-shadow:var(--shadow-sm);
}
/* tighten heading spacing so layout stays balanced */
.pick .h3{margin-top:4px}
@media (max-width:900px){
  .pick{padding-top:32px}
  .pick .ribbon{top:-10px;left:14px}
}