/* ════════════════════════════════════════════
   SHOPS — "One product, every shop"
   Page shell (.hero*, .sx-mast*, .final-cta) is seeded from
   compare.css, which is how every public page here carries it.
   Page-specific rules use the sh- prefix.
   ════════════════════════════════════════════ */

.hero {
  padding: 48px 0 32px;
  background:
    radial-gradient(ellipse 60% 60% at 50% 0%, rgba(61,90,122,0.08) 0%, transparent 50%),
    var(--bg);
  text-align: center;
}
.hero { padding-bottom: 44px; }

/* ── What CapitolTrack leaves out ── */
.gaps { padding-bottom: 8px; }
.gaps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 28px;
  margin-top: 36px;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--red);
  background: var(--red-wash);
  border: 1px solid rgba(220,38,38,0.30);
  padding: 7px 14px; border-radius: 999px;
  margin-bottom: 26px;
}
.hero h1 {
  font-size: 56px; font-weight: 900;
  color: var(--ink); letter-spacing: -0.045em;
  line-height: 1.05; margin: 0 auto 22px;
  max-width: 880px;
}
.hero h1 .accent {
  color: var(--red);
  font-style: italic;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.hero-sub {
  font-size: 18px; color: var(--body);
  line-height: 1.55;
  max-width: 680px;
  margin: 0 auto;
}
.hero-ctas {
  display: flex; gap: 12px; justify-content: center;
  flex-wrap: wrap;
}
.sx-mast {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 28px;
  padding: 14px 0 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 56px;
}
.sx-mast-num {
  font-family: var(--mono);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.10em; color: var(--slate-blue);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sx-mast-label {
  font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink);
}
.sx-mast-meta {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em; color: var(--muted);
  text-align: right; white-space: nowrap;
}
.final-cta {
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(61,90,122,0.10) 0%, transparent 50%),
    radial-gradient(ellipse 40% 50% at 50% 100%, rgba(220,38,38,0.06) 0%, transparent 50%),
    var(--bg-soft);
  border-top: 1px solid var(--line-soft);
  padding: 110px 0;
  text-align: center;
}
.final-cta h2 {
  font-size: 56px; font-weight: 900;
  color: var(--ink); letter-spacing: -0.045em;
  line-height: 1.0; margin: 0 auto 22px;
  max-width: 760px;
}
.final-cta p {
  font-size: 18px; color: var(--body);
  max-width: 580px; margin: 0 auto 36px;
}
.final-cta h2 .accent {
  color: var(--red);
  font-style: italic;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
}

/* ── §00 The point ─────────────────────────────────────── */
.sh-point { background: var(--ink); color: #fff; padding: 76px 0; }
.sh-point-inner { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 56px; align-items: start; }
@media (max-width: 880px) { .sh-point-inner { grid-template-columns: 1fr; gap: 26px; } }
.sh-point-lede h2 { margin: 0; font-size: 38px; font-weight: 900; letter-spacing: -0.035em; line-height: 1.1; color: #fff; }
.sh-point-lede h2 .accent { color: #fca5a5; font-style: italic; font-family: 'Fraunces', Georgia, serif; font-weight: 600; }
@media (max-width: 720px) { .sh-point-lede h2 { font-size: 28px; } }
.sh-point-body p { margin: 0 0 16px; font-size: 16px; line-height: 1.7; color: rgba(255,255,255,0.78); }
.sh-point-body p strong { color: #fff; }
.sh-point-note { border-left: 2px solid var(--red); padding-left: 16px; font-weight: 600; }

/* ── §01 The four shapes ───────────────────────────────── */
.sh-shapes { background: var(--bg); padding: 86px 0 96px; }
.sh-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 30px 32px 32px; margin-bottom: 22px; box-shadow: 0 10px 28px -22px rgba(15,23,42,0.30); }
.sh-card:last-child { margin-bottom: 0; }
.sh-card-head { display: flex; gap: 18px; align-items: flex-start; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--line-soft); }
.sh-num { flex: 0 0 auto; font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--red); letter-spacing: -0.03em; line-height: 1.2; }
.sh-card-head h3 { margin: 0 0 6px; font-size: 25px; font-weight: 900; color: var(--ink); letter-spacing: -0.025em; }
.sh-who { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.sh-card-body > p { margin: 0 0 22px; font-size: 15.5px; line-height: 1.7; color: var(--body); }
.sh-card-body > p strong { color: var(--ink); font-weight: 700; }

.sh-cfg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: 12px; padding: 20px 22px; }
@media (max-width: 780px) { .sh-cfg { grid-template-columns: 1fr; gap: 18px; } }
.sh-cfg-label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.sh-cfg ul { list-style: none; margin: 0; padding: 0; }
.sh-cfg li { position: relative; padding: 0 0 7px 15px; font-size: 14px; line-height: 1.5; color: var(--body); }
.sh-cfg li:last-child { padding-bottom: 0; }
.sh-cfg li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--slate-blue); }
.sh-cfg li b { color: var(--ink); font-weight: 700; }

.sh-aside { margin: 20px 0 0; padding: 14px 18px; background: var(--slate-blue-soft); border-radius: 10px; font-size: 14px; line-height: 1.6; color: var(--body); }
.sh-aside strong { color: var(--ink); }

/* ── §02 How ───────────────────────────────────────────── */
.sh-how { background: #fff; border-top: 1px solid var(--line); padding: 84px 0; }
.sh-how-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
@media (max-width: 880px) { .sh-how-inner { grid-template-columns: 1fr; gap: 34px; } }
.sh-how-eyebrow { display: inline-flex; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate-blue); background: var(--slate-blue-soft); border: 1px solid rgba(61,90,122,0.20); padding: 6px 13px; border-radius: 999px; margin-bottom: 18px; }
.sh-how h2 { margin: 0 0 16px; font-size: 36px; font-weight: 900; color: var(--ink); letter-spacing: -0.035em; line-height: 1.12; }
.sh-how h2 .accent { color: var(--slate-blue); font-style: italic; font-family: 'Fraunces', Georgia, serif; font-weight: 600; }
@media (max-width: 720px) { .sh-how h2 { font-size: 27px; } }
.sh-how p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.7; color: var(--body); max-width: 60ch; }
.sh-how-note { font-size: 14px; color: var(--muted); border-left: 2px solid var(--line); padding-left: 15px; }

.sh-how-panel { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 16px; padding: 26px 26px 24px; }
.sh-how-panel-label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.sh-pills { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 16px; }
.sh-pill { font-size: 13px; font-weight: 700; color: var(--slate-blue); background: #fff; border: 1px solid rgba(61,90,122,0.28); border-radius: 999px; padding: 8px 15px; }
.sh-how-panel-note { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); }

/* ── Colour + width corrections ─────────────────────────
   .sh-aside was inheriting max-width:74ch from `.sh-card-body > p`,
   which is why it stopped short of the config box above it.
   The page also ran blue from top to bottom, so the aside and the
   shape numerals now carry the red accent, and the "how" band is
   tinted rather than another sheet of white.
   ──────────────────────────────────────────────────────── */
/* Needs `.sh-card-body > p` specificity (0,1,1) to beat the 74ch cap. */
.sh-card-body > p.sh-aside {
  max-width: none;
  background: var(--red-wash);
  border-left: 3px solid var(--red);
  border-radius: 0 10px 10px 0;
  padding: 15px 20px;
}
.sh-aside strong { color: var(--red-deep); }

.sh-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; padding: 7px 10px;
  background: var(--red-wash);
  border: 1px solid var(--red-soft);
  border-radius: 10px;
  font-size: 17px;
  color: var(--red-deep);
}

.sh-card { border-top: 3px solid var(--red); }
.sh-cfg { background: #fff; border: 1px solid var(--line); }

.sh-how { background: var(--slate-blue-soft); border-top: 1px solid var(--line); }
.sh-how-eyebrow { background: #fff; }
.sh-how-panel { background: #fff; }
.sh-how-note { border-left-color: rgba(61,90,122,0.35); }

.sh-shapes { background: var(--bg-soft); }