/* ============================================================================
   Wedding dress budget article — page-specific rules only.
   Base layer (tokens, container, hero, .definition-grid, .pull-quote,
   .divider, .benchmark-bar, .site-footer, reveal/motion) is the shared
   ../../assets/css/style.css, loaded first and used verbatim — see DESIGN.md.
   ========================================================================== */

/* ---------- Benchmark strip: two Benchmark Bars side by side under the
   direct-answer intro. Reuses the exact .benchmark-bar grammar; this file
   only supplies the wrapper layout — no new bar visuals. ---------- */
.benchmark-strip {
  display: grid;
  gap: var(--s6);
  grid-template-columns: 1fr;
  margin: var(--s6) 0 0;
  padding: var(--s6);
  background: var(--linen);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
@media (min-width: 48rem) {
  .benchmark-strip { grid-template-columns: 1fr 1fr; gap: var(--s7); }
}

/* ---------- "Is my dress budget normal?" module — the artifact hook that
   links out to /calculator/. Same card grammar as .benchmark-strip so it
   reads as part of the same visual language, not a bolted-on widget. ---------- */
.normal-check {
  margin: var(--s6) 0 0;
  padding: var(--s6);
  background: var(--linen);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.normal-check__eyebrow {
  margin: 0 0 var(--s2);
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta);
}
.normal-check__title {
  margin: 0 0 var(--s3);
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  color: var(--ink);
}
.normal-check__text {
  margin: 0 0 var(--s5);
  max-width: 62ch;
}
.normal-check .benchmark-bar { margin-bottom: var(--s5); }
.normal-check .hero__btn { margin-top: 0; }