/* ===========================================================================
   sample.css — the five static sample pages (sets, minifigs, deals,
   watchlist, build-it). Layout only; every color, radius and space resolves
   through tokens.css. Loaded alongside shell.css, never instead of it.
   =========================================================================== */

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bh-surface-page);
  color: var(--bh-text-primary);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
a { color: inherit; }
h1 { margin: 0 0 var(--bh-space-md); }
p  { margin: 0 0 var(--bh-space-lg); }

.sample-wrap {
  max-width: var(--bh-layout-contentWideMax);   /* 1600 — these are wide shots */
  margin: 0 auto;
  padding: var(--bh-space-xxxl) var(--bh-space-xxl) 96px;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.sample-head {
  max-width: 68ch;
  margin: 0 auto var(--bh-space-xxxl);
  text-align: center;
}
.sample-tag {
  display: inline-block;
  background: var(--bh-accent-tint);
  border: var(--bh-borderWidth-hairline) solid var(--bh-accent-brand);
  color: var(--bh-accent-onAccent);
  font-size: var(--bh-type-caption-size);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin: 0 0 var(--bh-space-lg);
}
.sample-head h1 {
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 900;
}
.sample-blurb { font-size: clamp(16px, 1.6vw, 18px); color: var(--bh-text-secondary); }
.sample-note {
  font-size: 14px;
  font-weight: 700;
  color: var(--bh-text-tertiary);
  margin-bottom: var(--bh-space-xl);
}

/* ── Buttons (same shape as the homepage's) ──────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px var(--bh-space-lg);
  border-radius: var(--bh-radius-lg);
  border: var(--bh-borderWidth-hairline) solid transparent;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}
.btn:hover { opacity: 0.86; }
.btn-primary { background: var(--bh-accent-brand); color: var(--bh-accent-onAccent); }
.btn-lg { font-size: 16px; padding: 14px var(--bh-space-xxl); }

/* ── Screenshots ─────────────────────────────────────────────────────────── */
.sample-fig { margin: 0 0 var(--bh-space-xxxl); }
.sample-fig img {
  display: block;
  width: 100%;
  /* height:auto releases the height attribute back to aspect-ratio — without
     it the 1000px attribute becomes the used height. Same trap as the phone
     shots on the homepage. */
  height: auto;
  aspect-ratio: var(--web-shot-ratio);
  object-fit: cover;
  object-position: top center;
  background: var(--bh-surface-raised);
  border: var(--bh-borderWidth-hairline) solid var(--bh-border-hairline);
  border-radius: var(--bh-radius-card);
  box-shadow: 0 18px 44px rgba(0,0,0,0.10);
}
.sample-fig figcaption {
  margin-top: var(--bh-space-md);
  font-size: 14px;
  font-weight: 600;
  color: var(--bh-text-secondary);
  text-align: center;
}

/* ── Closing CTA ─────────────────────────────────────────────────────────── */
.sample-cta {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  background: var(--bh-surface-card);
  border: var(--bh-borderWidth-thick) solid var(--bh-accent-brand);
  border-radius: var(--bh-radius-card);
  padding: var(--bh-space-xxxl);
}
.cta-trial {
  font-size: clamp(30px, 4.4vw, 40px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 var(--bh-space-md);
}
.cta-price { font-size: 20px; font-weight: 900; letter-spacing: -0.02em; margin: 0 0 var(--bh-space-xl); }
.cta-price .per { font-size: 14px; font-weight: 700; color: var(--bh-text-secondary); }
.cta-or { font-size: 14px; font-weight: 700; color: var(--bh-text-tertiary); margin: 0 6px; }
/* Same badge as the homepage — accent fill, ink-on-gold, 11/800, pill. */
.save {
  display: inline-block;
  vertical-align: 2px;
  background: var(--bh-accent-brand);
  color: var(--bh-accent-onAccent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: var(--bh-radius-sm);
}
.cta-fine { font-size: 13px; color: var(--bh-text-tertiary); margin: var(--bh-space-lg) 0 0; }