/* Hello, It's Me® — Retail site (get.hello-itsme.com)
   Layered ON TOP of ../shared/tokens.css + ../shared/site.css.
   Adds: retail header/footer tweaks, app-store badges, device frames,
   pricing cards, step panels, safety grid, forms, FAQ, stat callouts.
   Voice: member-facing, warm.

   COLOR SCHEMA — matched to the live app (App Screenshots.pdf):
   blush-pink backgrounds, lavender primary actions, white rounded cards
   with soft shadows, deep-aubergine headings, gradient title rules. */

:root {
  --r-blush:      #FBE7E9;   /* app background — signature blush pink */
  --r-blush-deep: #F7D9DD;   /* slightly deeper blush for alt bands */
  --r-lav:        #9B7AD8;   /* app primary button lavender */
  --r-lav-600:    #875FCB;
  --r-lav-100:    #EFE7FA;
  --r-card-warm:  #FAF3EE;   /* app unselected-card warm off-white */
  /* app's gradient title rule (teal -> purple) */
  --r-grad: linear-gradient(90deg, #2BA3C7, #6A3B9F);
}

/* Gradient title rule — the little bar above app screen titles */
.grad-rule {
  display: block;
  width: 84px; height: 5px;
  border-radius: 999px;
  background: var(--r-grad);
  margin: 0 0 18px;
}
.lead-head .grad-rule, .r-pagehero.center .grad-rule { margin-left: auto; margin-right: auto; }

/* Lavender (app-style) button — used alongside the brand orange .btn */
.btn-lav { background: var(--r-lav); box-shadow: 0 6px 16px rgba(155,122,216,.34); }
.btn-lav:hover { background: var(--r-lav-600); }
.btn-lav .ar { color: var(--r-lav); }

/* App-screenshot frame — clean rounded phone, no fake hardware notch.
   Reads as a real app screen on the blush canvas. */
.app-shot {
  border-radius: 30px;
  overflow: hidden;
  background: #fff;
  padding: 6px;
  box-shadow: 0 24px 50px rgba(45,30,63,.22), 0 0 0 1px rgba(45,30,63,.05);
}
.app-shot img { width: 100%; display: block; border-radius: 24px; }
.app-shot.tilt { transform: rotate(-3deg); }
.app-shot.tilt-r { transform: rotate(3deg); }

/* Wide screenshot / story-still frame (landscape) */
.scene-shot { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2); border: 1px solid rgba(45,30,63,.06); }
.scene-shot img { width: 100%; display: block; }

/* "Inside the app" gallery — row of app phones */
.app-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; align-items: start; }
.app-gallery .item { display: flex; flex-direction: column; gap: 14px; }
.app-gallery .item .cap { text-align: center; }
.app-gallery .item .cap .t { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--him-purple-900); margin: 0 0 2px; letter-spacing: -0.01em; }
.app-gallery .item .cap .d { font-size: 14px; color: var(--him-slate-600); margin: 0; line-height: 1.4; }
.app-gallery .item .app-shot { aspect-ratio: 484 / 1000; overflow: hidden; }
.app-gallery .item .app-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
@media (max-width: 880px) { .app-gallery { grid-template-columns: repeat(2, 1fr); gap: 18px 22px; } }
@media (max-width: 460px) { .app-gallery { grid-template-columns: 1fr; max-width: 280px; margin: 0 auto; } }

/* Plans page — lifestyle image row */
.image-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.image-row-item { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); }
.image-row-item img { width: 100%; display: block; }
@media (max-width: 760px) { .image-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .image-row { grid-template-columns: 1fr; } }

/* ============================================================
   Retail header — reuses .site-hdr but swaps the active accent
   and keeps the persistent orange "Get the App" pill.
   ============================================================ */
.site-hdr nav.primary a.active::after { background: var(--him-orange-500); }

/* ============================================================
   Generic retail section helpers
   ============================================================ */
.band-cream   { background: var(--r-blush); }
.band-white   { background: #fff; }
.band-soft    { background: var(--r-lav-100); }
.band-blush-deep { background: var(--r-blush-deep); }
.band-purple  { background: var(--him-purple-900); color: #fff; }

.lead-head { max-width: 720px; margin: 0 auto var(--s-12); text-align: center; }
.lead-head .eyebrow { display: inline-block; margin-bottom: 14px; }
.lead-head h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 800;
  color: var(--him-purple-900);
  margin: 0 0 16px;
  text-wrap: balance;
}
.lead-head p {
  font-size: 19px;
  line-height: 1.55;
  color: var(--him-slate-700);
  margin: 0;
  text-wrap: pretty;
}
.band-purple .lead-head h2 { color: #fff; }
.band-purple .lead-head p { color: rgba(255,255,255,.85); }
.lead-head--left { text-align: left; margin-left: 0; }

/* ============================================================
   App-store badges — official-style + Open Web App pill
   ============================================================ */
.app-badges {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.app-badges.center { justify-content: center; }

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #000;
  color: #fff;
  text-decoration: none;
  padding: 11px 20px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  min-height: 56px;
}
.store-badge:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.26); color: #fff; }
.store-badge svg { width: 28px; height: 28px; flex: none; }
.store-badge .b-txt { display: flex; flex-direction: column; line-height: 1.1; }
.store-badge .b-txt .small { font-size: 11px; font-weight: 500; letter-spacing: .02em; opacity: .92; }
.store-badge .b-txt .big { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; font-family: var(--font-display); }

/* Open Web App — brand pill, equal weight to the store badges */
.web-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--him-purple-700);
  color: #fff;
  text-decoration: none;
  padding: 11px 22px;
  border-radius: 12px;
  min-height: 56px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s;
  box-shadow: 0 4px 12px rgba(74,50,101,.28);
}
.web-badge:hover { transform: translateY(-2px); background: var(--him-purple-800); color: #fff; }
.web-badge svg { width: 26px; height: 26px; flex: none; }
.web-badge .b-txt { display: flex; flex-direction: column; line-height: 1.1; }
.web-badge .b-txt .small { font-size: 11px; font-weight: 500; opacity: .85; }
.web-badge .b-txt .big { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; font-family: var(--font-display); }

/* On dark bands the App Store badge keeps a hairline so it reads */
.band-purple .store-badge { border-color: rgba(255,255,255,.28); }
.band-purple .web-badge { background: #fff; color: var(--him-purple-800); }
.band-purple .web-badge:hover { background: var(--him-orange-100); }
.band-purple .web-badge svg { color: var(--him-purple-700); }

/* ============================================================
   Device / phone frame — wraps a captioned screenshot placeholder
   ============================================================ */
.device {
  width: 290px;
  border-radius: 40px;
  background: #14101c;
  padding: 12px;
  box-shadow: 0 30px 60px rgba(45,30,63,.32), 0 0 0 2px rgba(255,255,255,.04) inset;
  position: relative;
}
.device::before {
  content: "";
  position: absolute;
  top: 18px; left: 50%; transform: translateX(-50%);
  width: 92px; height: 22px; border-radius: 999px;
  background: #14101c;
  z-index: 3;
}
.device .screen {
  border-radius: 30px;
  overflow: hidden;
  aspect-ratio: 9 / 19;
  background: linear-gradient(160deg, var(--him-purple-500), var(--him-purple-800));
  display: grid;
  place-items: center;
}
.device .screen .photo-ph {
  width: 100%; height: 100%;
  border: 0; border-radius: 0;
  background: linear-gradient(160deg, var(--him-purple-500), var(--him-purple-800));
  color: #fff;
}
.device .screen .photo-ph .caption .label,
.device .screen .photo-ph .caption .brief { color: rgba(255,255,255,.92); }
.device .screen .photo-ph .icon-frame { background: rgba(255,255,255,.16); color: #fff; }

/* Captioned screenshot frame (non-phone) for step panels */
.shot-ph {
  border-radius: var(--r-md);
  border: 1px dashed var(--him-purple-400);
  background: linear-gradient(135deg, var(--him-purple-100), var(--him-purple-200));
  display: grid; place-items: center;
  aspect-ratio: 4 / 3;
  color: var(--him-purple-800);
  padding: 24px;
  text-align: center;
}

/* ============================================================
   Retail hero — warm, member-first. Cream slab w/ soft accents.
   ============================================================ */
.r-hero {
  position: relative;
  overflow: hidden;
  background: var(--r-blush);
  padding: 80px 0 88px;
}
.r-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("assets/hero-bg.jpg") center / cover no-repeat;
  filter: blur(10px);
  transform: scale(1.1);
}
.r-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(105deg, rgba(251,231,233,.92) 0%, rgba(251,231,233,.78) 40%, rgba(251,231,233,.42) 68%, rgba(251,231,233,.22) 100%),
    radial-gradient(circle at 88% 12%, rgba(246,148,62,.16) 0 22%, transparent 30%),
    radial-gradient(circle at 6% 96%, rgba(148,99,169,.14) 0 24%, transparent 32%);
}
.r-hero .grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
  position: relative; z-index: 2;
}
.r-hero .eyebrow { display: inline-block; margin-bottom: 16px; }
.r-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--him-purple-900);
  margin: 0 0 22px;
  text-wrap: balance;
}
.r-hero h1 em { color: var(--him-orange-500); font-style: normal; }
.r-hero .lede {
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.5;
  color: var(--him-slate-700);
  margin: 0 0 30px;
  max-width: 520px;
  text-wrap: pretty;
}
.r-hero .ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 26px; }
.r-hero .ctas .text-link {
  font-weight: 800; font-size: 16px;
  color: var(--him-purple-700);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.r-hero .ctas .text-link:hover { color: var(--him-orange-600); }
/* Hero app-phone stack — two real app screens on the blush canvas */
.r-hero .hero-art { position: relative; display: grid; place-items: center; min-height: 420px; }
.r-hero .hero-art .phone-main { position: relative; z-index: 2; width: 70%; max-width: 280px; }
.r-hero .hero-art .phone-back {
  position: absolute; z-index: 1; width: 56%; max-width: 224px;
  right: 2%; bottom: 6%; opacity: .96;
}
.r-hero .hero-art .blob {
  position: absolute; z-index: 0; width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(155,122,216,.22), transparent 70%);
  top: 8%; left: 6%;
}
@media (max-width: 900px) {
  .r-hero .grid { grid-template-columns: 1fr; }
  .r-hero .hero-art { max-width: 420px; min-height: 360px; }
}

/* ============================================================
   Trust bar — 3 short signals on a thin band
   ============================================================ */
.trust-bar { background: var(--him-purple-900); color: #fff; padding: 22px 0; }
.trust-bar .row-in {
  display: flex; flex-wrap: wrap; gap: 14px 40px;
  align-items: center; justify-content: center;
  text-align: center;
}
.trust-bar .sig {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 700; color: #fff;
}
.trust-bar .sig svg { width: 22px; height: 22px; color: var(--him-orange-400); flex: none; }
.trust-bar .sep { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.28); }
@media (max-width: 720px) { .trust-bar .sep { display: none; } }

/* ============================================================
   Three-part value cards (signature purple+orange brand card)
   ============================================================ */
.value-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.value-cards .vcard {
  background: var(--him-purple-700);
  color: #fff;
  border: 5px solid var(--him-orange-500);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-2);
  display: flex; flex-direction: column;
}
.value-cards .vcard .top {
  padding: 30px 28px 0;
  display: flex; align-items: center; gap: 14px;
}
.value-cards .vcard .ic {
  width: 60px; height: 60px; flex: none;
  background: rgba(255,255,255,.14);
  border-radius: var(--r-md);
  display: grid; place-items: center; color: #fff;
}
.value-cards .vcard .ic svg { width: 30px; height: 30px; }
.value-cards .vcard .num {
  font-family: var(--font-display);
  font-size: 40px; font-weight: 800; line-height: 1;
  color: var(--him-orange-300);
  letter-spacing: -0.02em;
}
.value-cards .vcard .body { padding: 20px 28px 30px; }
.value-cards .vcard h3 {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700; color: #fff;
  margin: 0 0 10px; letter-spacing: -0.015em;
}
.value-cards .vcard p { color: rgba(255,255,255,.86); font-size: 17px; line-height: 1.55; margin: 0; }
@media (max-width: 880px) { .value-cards { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }

/* ============================================================
   Promo strip — image/icon on one side, copy + CTA on other
   (Safety strip, For-families strip)
   ============================================================ */
.promo-strip .grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.promo-strip.flip .grid > .art { order: 2; }
.promo-strip .copy .eyebrow { display: inline-block; margin-bottom: 12px; }
.promo-strip .copy h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.08; letter-spacing: -0.02em; font-weight: 800;
  color: var(--him-purple-900); margin: 0 0 16px; text-wrap: balance;
}
.promo-strip .copy p { font-size: 19px; line-height: 1.55; color: var(--him-slate-700); margin: 0 0 24px; }
.promo-strip .art .photo-frame {
  border-radius: var(--r-lg);
  border: 6px solid var(--him-orange-500);
  overflow: hidden; aspect-ratio: 4/3;
}
.promo-strip .art .photo-frame .photo-ph {
  height: 100%; border: 0; border-radius: 0;
  background: linear-gradient(140deg, var(--him-purple-400), var(--him-purple-700)); color:#fff;
}
.promo-strip .art .photo-frame .photo-ph .caption .label,
.promo-strip .art .photo-frame .photo-ph .caption .brief { color: rgba(255,255,255,.92); }
.promo-strip .art .photo-frame .photo-ph .icon-frame { background: rgba(255,255,255,.16); color:#fff; }
@media (max-width: 880px) {
  .promo-strip .grid { grid-template-columns: 1fr; gap: 32px; }
  .promo-strip.flip .grid > .art { order: 0; }
}

/* ============================================================
   Stat callout — oversized number
   ============================================================ */
.stat-callout {
  background:
    linear-gradient(105deg, rgba(246,148,62,.10) 0%, rgba(246,148,62,.03) 24%, transparent 44%),
    var(--him-purple-50);
  border: 1px solid var(--him-purple-100);
  border-left: 4px solid var(--him-orange-500);
  border-radius: var(--r-lg);
  padding: 40px 44px;
  display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center;
  box-shadow: var(--sh-2);
}
.stat-callout .big {
  font-family: var(--font-display);
  font-size: clamp(64px, 9vw, 116px); line-height: .9;
  font-weight: 800; color: var(--him-orange-500); letter-spacing: -0.03em;
  white-space: nowrap;
}
.stat-callout .big small { font-size: .42em; color: var(--him-purple-700); display: block; font-weight: 800; letter-spacing: -0.01em; }
.stat-callout .txt {
  border-left: 1px solid var(--him-purple-200);
  padding-left: 24px;
}
.stat-callout .txt .cap { font-size: 22px; font-weight: 700; color: var(--him-purple-900); line-height: 1.3; margin: 0 0 12px; font-family: var(--font-display); letter-spacing: -0.01em; }
.stat-callout .txt .src { font-size: 14px; color: var(--him-slate-700); margin: 0; line-height: 1.5; opacity: .78; }
@media (max-width: 720px) {
  .stat-callout { grid-template-columns: 1fr; gap: 16px; padding: 32px; }
  .stat-callout .txt {
    border-left: none;
    border-top: 1px solid var(--him-purple-200);
    padding-left: 0;
    padding-top: 16px;
  }
}

/* ============================================================
   Steps — big numbered panels with screenshot placeholders
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.steps .step {
  background: #fff;
  border: 1px solid var(--him-purple-100);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-1);
  display: flex; flex-direction: column;
}
.steps .step .shot-ph { aspect-ratio: 5/4; border: 0; border-radius: 0; border-bottom: 1px dashed var(--him-purple-300); }
/* Real app screenshot at the top of a step card */
.step-shot { aspect-ratio: 471 / 1024; overflow: hidden; background: var(--r-blush); border-bottom: 1px solid rgba(45,30,63,.06); }
.step-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
/* App screenshot inside a page-hero art slot */
.r-pagehero .art .app-shot { max-width: 280px; margin: 0 auto; }
.steps .step .body { padding: 26px 28px 30px; }
.steps .step .kicker {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px;
}
.steps .step .kicker .n {
  font-family: var(--font-display);
  font-size: 52px; font-weight: 800; line-height: .8;
  color: var(--him-purple-300); letter-spacing: -0.03em;
}
.steps .step .kicker .lab {
  font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--him-orange-600);
}
.steps .step h3 { font-family: var(--font-display); font-size: 23px; color: var(--him-purple-900); margin: 0 0 10px; font-weight: 800; letter-spacing: -0.015em; }
.steps .step p { font-size: 17px; line-height: 1.55; color: var(--him-slate-700); margin: 0; }
@media (max-width: 880px) { .steps { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }

/* Mini horizontal timeline (after you join) */
.mini-timeline {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  counter-reset: tl;
}
.mini-timeline .node {
  text-align: center; padding: 28px 18px;
  background: #fff; border: 1px solid var(--him-purple-100); border-radius: var(--r-lg);
}
.mini-timeline .node .ic {
  width: 58px; height: 58px; margin: 0 auto 14px;
  border-radius: var(--r-md); background: var(--him-purple-50);
  display: grid; place-items: center; color: var(--him-purple-700);
}
.mini-timeline .node .ic svg { width: 28px; height: 28px; }
.mini-timeline .node h4 { font-size: 17px; font-weight: 800; color: var(--him-purple-900); margin: 0 0 4px; }
.mini-timeline .node p { font-size: 14px; color: var(--him-slate-500); margin: 0; line-height: 1.4; }
@media (max-width: 720px) { .mini-timeline { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   Safety grid — 8 protections, icon + heading + copy
   ============================================================ */
.safety-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.safety-grid .prot {
  background: #fff;
  border: 1px solid var(--him-purple-100);
  border-radius: var(--r-lg);
  padding: 26px 28px;
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.safety-grid .prot:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--him-orange-300); }
.safety-grid .prot .ic {
  width: 52px; height: 52px; flex: none;
  border-radius: var(--r-md); background: var(--him-orange-100);
  display: grid; place-items: center; color: var(--him-orange-600);
}
.safety-grid .prot .ic svg { width: 26px; height: 26px; }
.safety-grid .prot h3 { font-family: var(--font-display); font-size: 19px; color: var(--him-purple-900); margin: 0 0 8px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.safety-grid .prot p { font-size: 16px; line-height: 1.5; color: var(--him-slate-700); margin: 0; }
@media (max-width: 820px) { .safety-grid { grid-template-columns: 1fr; } }

/* Caregiver proof side panel */
.proof-panel {
  background: var(--him-purple-900);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 36px 36px 40px;
  position: sticky; top: 96px;
}
.proof-panel .eyebrow { color: var(--him-orange-300); display: inline-block; margin-bottom: 12px; }
.proof-panel h3 { font-family: var(--font-display); font-size: 26px; color: #fff; margin: 0 0 20px; font-weight: 800; letter-spacing: -0.015em; }
.proof-panel ul { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.proof-panel ul li { display: grid; grid-template-columns: auto 1fr; gap: 12px; font-size: 16px; line-height: 1.45; color: rgba(255,255,255,.9); }
.proof-panel ul li svg { width: 22px; height: 22px; color: var(--him-orange-400); flex: none; margin-top: 1px; }

/* ============================================================
   Bulleted "check" lists (coaching, families)
   ============================================================ */
.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.check-list li {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  font-size: 19px; line-height: 1.45; color: var(--him-slate-700);
}
.check-list li .tick {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: var(--him-orange-100); color: var(--him-orange-600);
  display: grid; place-items: center;
}
.check-list li .tick svg { width: 17px; height: 17px; }
.check-list li strong { color: var(--him-purple-900); font-weight: 800; }

/* ============================================================
   Pricing cards
   ============================================================ */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.price-card {
  background: #fff;
  border: 1px solid var(--him-purple-100);
  border-radius: var(--r-lg);
  padding: 32px 30px 34px;
  position: relative;
  box-shadow: var(--sh-1);
  display: flex; flex-direction: column;
}
.price-card.best {
  border: 3px solid var(--him-orange-500);
  box-shadow: var(--sh-3);
}
.price-card .plan-name { font-size: 14px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--him-purple-500); margin: 0 0 14px; }
.price-card .price { font-family: var(--font-display); font-size: 48px; font-weight: 800; color: var(--him-purple-900); letter-spacing: -0.03em; line-height: 1; margin: 0; }
.price-card .price .per { font-size: 17px; font-weight: 700; color: var(--him-slate-500); letter-spacing: 0; }
.price-card .submath { font-size: 15px; color: var(--him-slate-500); margin: 8px 0 0; font-weight: 600; }
.price-card .badge-save {
  display: inline-block; margin-top: 14px;
  background: var(--him-orange-100); color: var(--him-orange-700);
  font-size: 13px; font-weight: 800; letter-spacing: .04em;
  padding: 5px 12px; border-radius: var(--r-pill);
}
.price-card .best-flag {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--him-orange-500); color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 16px; border-radius: var(--r-pill);
  box-shadow: 0 6px 16px rgba(246,148,62,.4); white-space: nowrap;
}
.price-card ul { list-style: none; margin: 22px 0 26px; padding: 22px 0 0; border-top: 1px solid var(--him-purple-100); display: flex; flex-direction: column; gap: 13px; flex: 1; }
.price-card ul li { display: grid; grid-template-columns: auto 1fr; gap: 12px; font-size: 16px; line-height: 1.4; color: var(--him-slate-700); }
.price-card ul li svg { width: 20px; height: 20px; color: var(--him-success); flex: none; margin-top: 1px; }
.price-card .renew { font-size: 13px; color: var(--him-slate-500); margin: 0 0 18px; line-height: 1.4; }
.price-card .btn { width: 100%; justify-content: center; }
@media (max-width: 900px) { .pricing { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }

/* Two-ways-to-start cards */
/* Coaching page — how-to-get section: square photo + stacked cards */
.coaching-how-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  align-items: center;
  margin-top: 32px;
}
.coaching-how-grid .scene-shot { aspect-ratio: 1 / 1; margin: 0; }
.coaching-how-grid .scene-shot img { width: 100%; height: 100%; object-fit: cover; }
.coaching-how-grid .ways { grid-template-columns: 1fr; gap: 20px; }
@media (max-width: 760px) {
  .coaching-how-grid { grid-template-columns: 1fr; gap: 28px; }
}

.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.way {
  border-radius: var(--r-lg); padding: 34px 34px 36px;
  border: 1px solid var(--him-purple-100); background: #fff;
}
.way.funded { background: var(--him-purple-900); color: #fff; border: 0; }
.way .ic {
  width: 56px; height: 56px; border-radius: var(--r-md);
  background: var(--him-orange-100); color: var(--him-orange-600);
  display: grid; place-items: center; margin-bottom: 18px;
}
.way.funded .ic { background: rgba(255,255,255,.14); color: #fff; }
.way .ic svg { width: 28px; height: 28px; }
.way h3 { font-family: var(--font-display); font-size: 24px; margin: 0 0 10px; color: var(--him-purple-900); font-weight: 800; letter-spacing: -0.015em; }
.way.funded h3 { color: #fff; }
.way p { font-size: 17px; line-height: 1.5; color: var(--him-slate-700); margin: 0 0 22px; }
.way.funded p { color: rgba(255,255,255,.86); }
@media (max-width: 820px) { .ways { grid-template-columns: 1fr; } }

/* ============================================================
   Forms — visual only (production wires submission)
   ============================================================ */
.form-card {
  background: #fff;
  border: 1px solid var(--him-purple-100);
  border-radius: var(--r-lg);
  padding: 36px 38px 40px;
  box-shadow: var(--sh-2);
}
.form-card h3 { font-family: var(--font-display); font-size: 24px; color: var(--him-purple-900); margin: 0 0 6px; font-weight: 800; letter-spacing: -0.015em; }
.form-card .form-sub { font-size: 16px; color: var(--him-slate-600); margin: 0 0 24px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field label { font-size: 15px; font-weight: 700; color: var(--him-purple-800); }
.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: 17px;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  border: 2px solid var(--him-purple-200);
  background: var(--him-purple-50);
  color: var(--him-ink);
  width: 100%;
  transition: border-color .15s, background .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--him-orange-500); background: #fff;
}
.field textarea { min-height: 120px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.form-card .btn { width: 100%; justify-content: center; margin-top: 6px; }
.form-submit-error {
  font-size: 15px;
  line-height: 1.5;
  color: #b42318;
  background: #fef3f2;
  border: 1px solid #fecdca;
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin: 0 0 14px;
}
.form-success {
  font-size: 18px;
  line-height: 1.5;
  color: var(--him-purple-900);
  font-weight: 700;
  text-align: center;
  margin: 0;
  padding: 24px 8px;
}
.form-route { font-size: 13px; color: var(--him-slate-500); text-align: center; margin: 14px 0 0; }

/* ============================================================
   FAQ / quick answers — simple definition rows
   ============================================================ */
.faq { display: flex; flex-direction: column; gap: 0; max-width: 820px; margin: 0 auto; }
.faq .qa { border-top: 1px solid var(--him-purple-100); padding: 24px 0; }
.faq .qa:last-child { border-bottom: 1px solid var(--him-purple-100); }
.faq .qa .q { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--him-purple-900); margin: 0 0 8px; letter-spacing: -0.01em; display: flex; gap: 12px; align-items: baseline; }
.faq .qa .q .mark { color: var(--him-orange-500); font-weight: 800; }
.faq .qa .a { font-size: 17px; line-height: 1.55; color: var(--him-slate-700); margin: 0; padding-left: 30px; }

/* ============================================================
   Member voice — quote card placeholder
   ============================================================ */
.voice-card {
  max-width: 860px; margin: 0 auto;
  background: #fff; border: 1px solid var(--him-purple-100);
  border-radius: var(--r-lg); padding: 40px 44px;
  display: grid; grid-template-columns: 120px 1fr; gap: 32px; align-items: center;
  box-shadow: var(--sh-1);
}
.voice-card .avatar {
  width: 120px; height: 120px; border-radius: 50%;
  border: 4px solid var(--him-orange-500); overflow: hidden;
  background: linear-gradient(140deg, var(--him-purple-400), var(--him-purple-700));
  display: grid; place-items: center; color: #fff;
}
.voice-card .avatar svg { width: 48px; height: 48px; }
.voice-card .quote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.5;
  font-weight: 600;
  color: var(--him-purple-900);
}
.voice-card .attribution {
  margin: 10px 0 0;
  font-weight: 700;
  font-size: 16px;
  color: var(--him-purple-700);
}
@media (max-width: 640px) { .voice-card { grid-template-columns: 1fr; text-align: center; justify-items: center; } }

/* ============================================================
   Contact card (help page)
   ============================================================ */
.contact-card {
  background: var(--him-purple-900); color: #fff;
  border-radius: var(--r-lg); padding: 40px 42px;
  display: flex; flex-direction: column; gap: 16px;
}
.contact-card .ic { width: 56px; height: 56px; border-radius: var(--r-md); background: rgba(255,255,255,.14); display: grid; place-items: center; color: var(--him-orange-300); }
.contact-card .ic svg { width: 28px; height: 28px; }
.contact-card h3 { font-family: var(--font-display); font-size: 24px; color: #fff; margin: 0; font-weight: 800; }
.contact-card .email { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--him-orange-300); text-decoration: none; word-break: break-word; }
.contact-card .email:hover { color: var(--him-orange-200); }
.contact-card p { color: rgba(255,255,255,.84); font-size: 16px; margin: 0; line-height: 1.5; }

/* ============================================================
   Download access cards
   ============================================================ */
.access-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.access-card {
  background: #fff; border: 1px solid var(--him-purple-100);
  border-radius: var(--r-lg); padding: 34px 32px 36px;
  text-align: center; box-shadow: var(--sh-1);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.access-card .ic { width: 64px; height: 64px; border-radius: var(--r-md); background: var(--him-purple-50); color: var(--him-purple-700); display: grid; place-items: center; margin-bottom: 8px; }
.access-card .ic svg { width: 32px; height: 32px; }
.access-card h3 { font-family: var(--font-display); font-size: 22px; color: var(--him-purple-900); margin: 0; font-weight: 800; letter-spacing: -0.015em; }
.access-card p { font-size: 16px; color: var(--him-slate-700); margin: 0 0 8px; line-height: 1.5; }
.access-card .app-badges { margin-top: auto; }
@media (max-width: 880px) { .access-cards { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }

/* ============================================================
   Numbered route list (enroll)
   ============================================================ */
.route-steps { list-style: none; counter-reset: rs; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.route-steps li {
  counter-increment: rs;
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center;
  font-size: 18px; line-height: 1.45; color: var(--him-slate-700);
}
.route-steps li::before {
  content: counter(rs);
  width: 36px; height: 36px; flex: none;
  background: var(--him-purple-700); color: #fff;
  border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 17px;
}

/* ============================================================
   Page hero (retail inner pages) — warm cream slab
   ============================================================ */
.r-pagehero { background: var(--r-blush); padding: 72px 0 56px; position: relative; overflow: hidden; }
.r-pagehero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 92% 8%, rgba(246,148,62,.14) 0 20%, transparent 30%);
}
.r-pagehero .inner { position: relative; z-index: 2; max-width: 820px; }
.r-pagehero.center .inner { margin: 0 auto; text-align: center; }
.r-pagehero .eyebrow { display: inline-block; margin-bottom: 14px; }
.r-pagehero h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.04; letter-spacing: -0.03em; font-weight: 800;
  color: var(--him-purple-900); margin: 0 0 18px; text-wrap: balance;
}
.r-pagehero .lede { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.5; color: var(--him-slate-700); margin: 0; max-width: 640px; text-wrap: pretty; }
.r-pagehero.center .lede { margin: 0 auto; }

/* Center page hero — blurred photo background (how-it-works, help, plans, etc.) */
.r-pagehero.center::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("assets/how-it-works-hero-bg.jpg") center / cover no-repeat;
  filter: blur(10px);
  transform: scale(1.1);
}
.r-pagehero.center::before {
  z-index: 1;
  background:
    linear-gradient(105deg, rgba(251,231,233,.92) 0%, rgba(251,231,233,.78) 40%, rgba(251,231,233,.42) 68%, rgba(251,231,233,.22) 100%),
    radial-gradient(circle at 92% 8%, rgba(246,148,62,.14) 0 20%, transparent 30%);
}
.r-pagehero.center .wrap { position: relative; z-index: 2; }

/* Coaching page hero — blurred photo background */
.r-pagehero--coaching { background: var(--r-blush); }
.r-pagehero--coaching::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("assets/coaching-hero-bg.jpg") center / cover no-repeat;
  filter: blur(10px);
  transform: scale(1.1);
}
.r-pagehero--coaching::before {
  z-index: 1;
  background:
    linear-gradient(105deg, rgba(251,231,233,.92) 0%, rgba(251,231,233,.78) 40%, rgba(251,231,233,.42) 68%, rgba(251,231,233,.22) 100%),
    radial-gradient(circle at 92% 8%, rgba(246,148,62,.14) 0 20%, transparent 30%);
}
.r-pagehero--coaching .wrap { position: relative; z-index: 2; }

/* Dark variant for Safety hero */
.r-pagehero--purple { background: var(--him-purple-900); }
.r-pagehero--purple::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("assets/safety-hero-bg.jpg") center / cover no-repeat;
  filter: blur(10px);
  transform: scale(1.1);
}
.r-pagehero--purple::before {
  z-index: 1;
  background:
    linear-gradient(105deg, rgba(45,30,63,.88) 0%, rgba(45,30,63,.76) 42%, rgba(45,30,63,.52) 100%),
    radial-gradient(circle at 88% 12%, rgba(246,148,62,.18) 0 22%, transparent 32%),
    radial-gradient(circle at 8% 90%, rgba(148,99,169,.3) 0 24%, transparent 34%);
}
.r-pagehero--purple .wrap { position: relative; z-index: 2; }
.r-pagehero--purple h1 { color: #fff; }
.r-pagehero--purple .lede { color: rgba(255,255,255,.85); }
.r-pagehero--purple .eyebrow { color: var(--him-orange-300); }

/* Generic two-col content layout */
.two-col { display: grid; grid-template-columns: 1.4fr .85fr; gap: 56px; align-items: start; }
.help-contact-grid { grid-template-columns: .85fr 1.4fr; }
@media (max-width: 940px) { .two-col { grid-template-columns: 1fr; gap: 40px; } .proof-panel { position: static; } }

/* simple subhead inside a section */
.sub-h { font-family: var(--font-display); font-size: 26px; color: var(--him-purple-900); font-weight: 800; margin: 0 0 18px; letter-spacing: -0.015em; }

/* Legal page — privacy policy body copy */
.legal-prose { font-size: 17px; line-height: 1.55; color: var(--him-slate-700); }
.legal-prose p { margin: 0 0 16px; }
.legal-prose p:last-child { margin-bottom: 0; }
.legal-prose ul { margin: 0 0 16px; padding-left: 1.35em; }
.legal-prose li { margin-bottom: 8px; }
.legal-prose li:last-child { margin-bottom: 0; }
.legal-prose h4 { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--him-purple-900); margin: 24px 0 10px; letter-spacing: -0.01em; }
.legal-prose a { color: var(--him-purple-700); font-weight: 700; }

/* Stub page note */
.stub-note {
  max-width: 720px; margin: 0 auto; text-align: center;
}
.stub-note .ph { text-align: left; margin-top: 28px; }

/* ============================================================
   Mobile nav drawer (retail pages don't load site-extras.css,
   so the hide/show rules live here)
   ============================================================ */
.mobile-drawer {
  display: none;
  flex-direction: column;
  padding: 12px 40px 24px;
  background: #fff;
  border-bottom: 1px solid var(--him-purple-100);
}
.mobile-drawer a {
  color: var(--him-purple-700);
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;
  padding: 12px 0;
  border-bottom: 1px solid var(--him-purple-50);
}
.mobile-drawer a.active { color: var(--him-orange-600); }
html.nav-open .mobile-drawer { display: flex; }

/* Show the hamburger as soon as the desktop nav hides (site.css hides
   nav.primary at <=1080 but only reveals the hamburger at <=720, leaving
   a gap). Scoped to retail so the parent site is untouched. */
@media (max-width: 1080px) {
  .site-hdr .hamburger { display: inline-grid; place-items: center; }
}

/* utility */
.mt-0 { margin-top: 0; }
.center-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.lead-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }