/* ════════════════════════════════════════════════════════════════════
   VEXLOTEX — INDIVIDUAL (b2c.html) · Personal Intelligence Services
   Light theme, warm & human · dark moment: closing CTA only
   Requires css/shared.css
   ════════════════════════════════════════════════════════════════════ */

/* ── Hero (bold two-column) ── */
.b2c-hero {
  padding: var(--hero-pad-top) 0 var(--sp-8);
}
.b2c-hero .t-h1 { margin: var(--sp-2) 0 var(--sp-3); max-width: 18ch; }
.b2c-hero .t-lead { max-width: 44ch; }
.b2c-hero-ctas { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0 0; }
.b2c-hero .fc-a { left: -4px; bottom: 10%; }
.b2c-hero .fc-b { right: -6px; bottom: 34%; }
@media (max-width: 960px) {
  .b2c-hero .fc-a { left: 0; bottom: 5%; }
  .b2c-hero .fc-b { right: 0; bottom: 26%; }
}

/* Soft organic blob accent behind the hero — the Individual path's
   warmer visual language (vs the geometric Business/Gov motif) */
.b2c-hero { position: relative; overflow: hidden; }
.b2c-hero::before {
  content: ''; position: absolute; z-index: -1;
  top: -120px; right: -160px;
  width: 520px; height: 520px;
  background: radial-gradient(closest-side, var(--peach), transparent 72%);
  border-radius: 58% 42% 55% 45% / 45% 58% 42% 55%;
  opacity: 0.75;
}
.b2c-hero::after {
  content: ''; position: absolute; z-index: -1;
  bottom: -180px; left: -140px;
  width: 380px; height: 380px;
  background: radial-gradient(closest-side, var(--ember-08), transparent 74%);
  border-radius: 47% 53% 44% 56% / 56% 44% 53% 47%;
}

/* Section head + persona illustration split now lives in shared.css (.head-split, .sec-illo*) */

/* ── Real-life story blocks ── */
.real-life {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2);
  background: var(--surface-warm);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-4);
  font-size: var(--fs-small); color: var(--muted);
}
.real-life .rl-label {
  font-family: var(--font-mono); font-size: var(--fs-tiny);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ember-ink); white-space: nowrap; padding-top: 2px;
}
@media (max-width: 560px) { .real-life { grid-template-columns: 1fr; gap: 6px; } }
.anecdote-label {
  display: block; font-size: var(--fs-tiny); color: var(--faint);
  font-style: italic; margin-top: var(--sp-4); margin-bottom: -6px;
}

/* ── Price tables ── */
.price-note { font-size: var(--fs-tiny); color: var(--faint); margin-top: var(--sp-2); }

/* ── Tier cards (family screening) ── */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); align-items: stretch; }
@media (max-width: 960px) { .tier-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }
.tier-card { display: flex; flex-direction: column; gap: var(--sp-2); }
.tier-card.is-featured { border-color: var(--ember-30); box-shadow: 0 16px 40px rgba(201,83,26,0.08); }
.tier-name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; }
.tier-price { font-family: var(--font-mono); font-weight: 500; font-size: 1.9rem; letter-spacing: -0.02em; }
.tier-price small { font-family: var(--font-body); font-size: var(--fs-tiny); color: var(--muted); font-weight: 400; }
.tier-list { list-style: none; display: grid; gap: 10px; font-size: var(--fs-small); color: var(--muted); }
.tier-list li { display: grid; grid-template-columns: 18px 1fr; gap: var(--sp-1); }
.tier-list li::before {
  content: '✓'; color: var(--ember-ink); font-weight: 700;
}
.tier-best { margin-top: auto; padding-top: var(--sp-2); border-top: 1px solid var(--border); font-size: var(--fs-tiny); color: var(--faint); }

/* ── Single package card (tenant vetting) ── */
.package-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: center;
}
@media (max-width: 860px) { .package-split { grid-template-columns: 1fr; } }

/* Steps → replaced by the .discover scroll-discovery component (shared.css) */

/* ── Who renews repeatedly ── */
.who-repeat { margin-top: var(--sp-3); max-width: 76ch; font-size: var(--fs-small); }

/* ── Why us ── */
.why-list { margin-top: var(--sp-8); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2) var(--sp-4); font-size: var(--fs-small); color: var(--muted); }
@media (max-width: 720px) { .why-list { grid-template-columns: 1fr; } }
.why-list li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; list-style: none; }
.why-list li::before { content: '—'; color: var(--ember); font-weight: 700; }

/* ════ v12 — premium light layer ════ */

/* Sticky price card beside service content */
.container.has-price {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--sp-6);
  align-items: start;
}
.container.has-price > * { min-width: 0; }
.container.has-price > .head-split { grid-column: 1 / -1; }
.svc-price {
  position: sticky; top: 150px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--sp-3);
  display: grid; gap: 10px;
  box-shadow: var(--shadow-rest);
}
.svc-price .sp-price {
  font-size: clamp(2rem, 3.4vw, 2.6rem); line-height: 1;
  color: var(--ember-ink);
}
.svc-price .sp-desc { font-size: var(--fs-small); color: var(--muted); }
.svc-price .sp-lines { list-style: none; display: grid; gap: 6px; font-size: var(--fs-small); color: var(--muted); padding-block: 6px; border-block: 1px dotted var(--border-strong); }
.svc-price .sp-lines li { display: flex; justify-content: space-between; gap: var(--sp-2); }
.svc-price .sp-lines .num { color: var(--text); }
.svc-price .btn { justify-self: stretch; }
.svc-price .sp-note { font-size: var(--fs-tiny); color: var(--faint); }
@media (max-width: 960px) {
  .container.has-price { grid-template-columns: 1fr; }
  .svc-price { position: static; }
}

/* Marquee price emphasis */
.marquee-track em { font-style: normal; color: var(--ember-ink); }

/* What-happens-next steps in the dark CTA */
.next-steps {
  list-style: none; display: grid; gap: var(--sp-1);
  max-width: 52ch; margin: var(--sp-4) auto 0;
  text-align: left; font-size: var(--fs-small); color: var(--m-muted);
}
.next-steps li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: baseline; }
.next-steps .num {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--m-ember); color: var(--m-ember);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-tiny);
}

/* ── How-it-works storyboard: 4 phone-screen panels ── */
.discover-storyboard {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3);
  margin-top: var(--sp-8);
}
.ds-panel { display: grid; gap: var(--sp-1); }
.ds-panel img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-rest);
}
.ds-panel figcaption {
  display: flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-small); font-weight: 500; color: var(--text);
}
.ds-num {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--ember-08); color: var(--ember-ink);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 760px) {
  .discover-storyboard { grid-template-columns: repeat(2, 1fr); }
}