/* ============================================================
   Renové Health — WEBSITE 2.0 COMPONENT STYLES (renove-site.css)
   Plain-CSS port of the marketing-site design system
   (design-2.0/_ds/renov-health-design-system-…): every component
   the .dc.html prototypes compose, expressed as .rh2-* classes.

   Depends on tokens.css (colors, type, spacing, radii, shadows,
   motion) and fonts.css (self-hosted Nunito) — enqueue this file
   with renove-tokens as a dependency. No external fonts, no CDNs.
   Values are copied from the component sources in _ds_bundle.js,
   the .dc.html page markup, fx.js, and design-2.0/README.md.

   Interactive states the prototype drove with JS (hover lift,
   press, focus ring, checked) are reproduced with CSS pseudo-
   classes. The only JS hooks this file expects:
     .rh2-header--scrolled  — added past 60px scroll
     .rh2-reveal.is-in      — scroll-reveal (opacity/translateY)
   ============================================================ */

/* ------------------------------------------------------------
   0. TOKEN EXTENSIONS — 2.0 values the 1.x tokens.css lacks.
   Everything else (--cream, --ink, --coral, --wash-*, --journey-*,
   --grad-sunrise, --grad-journey, radii, shadows, --ring, motion)
   already exists in tokens.css and is referenced directly.
   ------------------------------------------------------------ */
:root {
  --amber-deep: #9A6710; /* readable amber foreground (Tag/Callout/pill text) */
  --lime-deep:  #6E7A18; /* readable lime foreground */
  --lime-ink:   #3C4410; /* dark ink used ON lime/journey-5 fills */
}

/* ------------------------------------------------------------
   1. LAYOUT — containers, sections, grids
   ------------------------------------------------------------ */
.rh2-container { max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
.rh2-reading   { max-width: var(--container-narrow); margin-inline: auto; padding-inline: 24px; }

/* Sections: backgrounds alternate cream / sand down the page.
   position+overflow contain the decorative wash circles. */
.rh2-section { position: relative; overflow: hidden; padding: 80px 0; }
.rh2-section--cream     { background: var(--cream); }
.rh2-section--sand      { background: var(--sand); }
.rh2-section--wash-leaf { background: var(--wash-leaf); }
.rh2-section--ink       { background: var(--ink); }
.rh2-section--tight     { padding: 64px 0; }

/* Grids (replaces the prototype's data-r attributes) */
.rh2-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.rh2-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rh2-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
/* Asymmetric two-column feature row (text + image). Override the
   ratio per use with --split, e.g. style="--split:1.05fr .95fr". */
.rh2-split  { display: grid; grid-template-columns: var(--split, 1fr 1fr); gap: 52px; align-items: center; }

@media (max-width: 920px) {
  .rh2-split  { grid-template-columns: 1fr; }
  .rh2-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .rh2-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
  .rh2-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .rh2-grid-3 { grid-template-columns: 1fr; }
  .rh2-section { padding: 64px 0; }
}

/* ------------------------------------------------------------
   2. TYPE HELPERS — eyebrow, display, section heading
   ------------------------------------------------------------ */
.rh2-eyebrow {
  font-weight: 800; font-size: 12.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--coral);
}
.rh2-eyebrow--amber { color: var(--journey-4); }  /* on dark/ink surfaces */
.rh2-eyebrow--leaf  { color: var(--leaf-deep); }
.rh2-eyebrow--light { color: rgba(255,255,255,.92); }

.rh2-display {
  font-weight: 900; font-size: clamp(2.4rem, 5.2vw, 3.9rem);
  line-height: 1; letter-spacing: -.03em; color: var(--ink); margin: 0;
}
.rh2-h2 {
  font-weight: 900; font-size: clamp(2rem, 3.6vw, 2.8rem);
  letter-spacing: -.02em; color: var(--ink); margin: 0;
}
.rh2-lead { font-weight: 600; font-size: 17px; line-height: 1.65; color: var(--ink-2); }

/* ------------------------------------------------------------
   3. BUTTON (core/Button.jsx)
   ------------------------------------------------------------ */
.rh2-btn {
  box-sizing: border-box; /* --full is width:100% on a padded button — without this it overflows its card */
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-sans); font-weight: 800; line-height: 1;
  border-radius: var(--radius-pill); cursor: pointer; text-decoration: none;
  white-space: nowrap; user-select: none; border: 1.5px solid transparent;
  padding: 13px 26px; font-size: 15px; /* md default */
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.rh2-btn--sm   { padding: 9px 18px;  font-size: 14px; }
.rh2-btn--lg   { padding: 16px 34px; font-size: 17px; }
.rh2-btn--full { display: flex; width: 100%; }

.rh2-btn--primary   { background: var(--coral); color: var(--white); }
.rh2-btn--gradient  { background: var(--grad-sunrise); color: var(--white); }
.rh2-btn--secondary { background: transparent; color: var(--apple-red); border-color: var(--apple-red); }
.rh2-btn--soft      { background: var(--wash-coral); color: var(--coral-deep); }
.rh2-btn--dark      { background: var(--ink); color: var(--white); }
.rh2-btn--ghost     { background: transparent; color: var(--ink); }
/* white outline button for photo/gradient heroes */
.rh2-btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }

.rh2-btn:hover { transform: translateY(-2px); text-decoration: none; }
.rh2-btn--primary:hover   { background: var(--coral-deep); box-shadow: var(--shadow-coral); }
.rh2-btn--gradient:hover  { box-shadow: var(--shadow-coral); }
.rh2-btn--secondary:hover { background: var(--wash-coral); }
.rh2-btn--soft:hover      { background: #F7DED2; }
.rh2-btn--dark:hover      { background: #3D332C; }
.rh2-btn--ghost:hover     { background: var(--sand); }
.rh2-btn--outline-light:hover { background: rgba(255,255,255,.12); }
.rh2-btn:active { transform: translateY(1px); }
.rh2-btn:disabled, .rh2-btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; transform: none; box-shadow: none;
}

/* ------------------------------------------------------------
   4. TAG (core/Tag.jsx) — small pill labels
   ------------------------------------------------------------ */
.rh2-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px;
  border-radius: var(--radius-pill); font-family: var(--font-sans);
  font-weight: 800; font-size: 12.5px; line-height: 1;
}
.rh2-tag--coral   { background: var(--wash-coral); color: var(--coral-deep); }
.rh2-tag--red     { background: var(--wash-red);   color: var(--apple-red); }
.rh2-tag--amber   { background: var(--wash-amber); color: var(--amber-deep); }
.rh2-tag--lime    { background: var(--wash-lime);  color: var(--lime-deep); }
.rh2-tag--leaf    { background: var(--wash-leaf);  color: var(--leaf-deep); }
.rh2-tag--neutral { background: var(--sand);       color: var(--ink-2); }
.rh2-tag--ink     { background: var(--ink);        color: var(--white); }
/* solid = tone foreground becomes the fill, text goes white */
.rh2-tag--coral.rh2-tag--solid { background: var(--coral-deep); color: var(--white); }
.rh2-tag--red.rh2-tag--solid   { background: var(--apple-red);  color: var(--white); }
.rh2-tag--amber.rh2-tag--solid { background: var(--amber-deep); color: var(--white); }
.rh2-tag--lime.rh2-tag--solid  { background: var(--lime-deep);  color: var(--white); }
.rh2-tag--leaf.rh2-tag--solid  { background: var(--leaf-deep);  color: var(--white); }

/* ------------------------------------------------------------
   5. STATUS PILLS — location/program state (dot optional)
   ------------------------------------------------------------ */
.rh2-pill {
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: var(--radius-pill); padding: 6px 14px;
  font-weight: 800; font-size: 12.5px; line-height: 1.2;
}
.rh2-pill--open     { background: var(--wash-leaf);  color: var(--leaf-deep); }
.rh2-pill--progress { background: var(--wash-amber); color: var(--amber-deep); }
.rh2-pill--soon     { background: var(--sand); color: var(--ink-3); border: 1px solid var(--line); }
.rh2-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }
.rh2-pill--progress .rh2-pill__dot { background: var(--amber); }

/* ------------------------------------------------------------
   6. CALLOUT (brand/Callout.jsx) — washed aside with tone bar
   ------------------------------------------------------------ */
.rh2-callout {
  display: flex; gap: 14px; border-radius: var(--radius-lg);
  padding: var(--space-5); border-left: 4px solid var(--coral);
  background: var(--wash-coral);
}
.rh2-callout--amber { background: var(--wash-amber); border-left-color: var(--amber); }
.rh2-callout--leaf  { background: var(--wash-leaf);  border-left-color: var(--leaf); }
.rh2-callout--lime  { background: var(--wash-lime);  border-left-color: var(--lime); }
.rh2-callout--red   { background: var(--wash-red);   border-left-color: var(--apple-red); }
.rh2-callout__icon { flex: 0 0 auto; font-size: 22px; line-height: 1.2; color: var(--coral-deep); }
.rh2-callout--amber .rh2-callout__icon { color: var(--amber-deep); }
.rh2-callout--leaf  .rh2-callout__icon { color: var(--leaf-deep); }
.rh2-callout--lime  .rh2-callout__icon { color: var(--lime-deep); }
.rh2-callout--red   .rh2-callout__icon { color: var(--apple-red); }
.rh2-callout__title { font-weight: 800; font-size: 16px; color: var(--ink); margin: 0 0 4px; }
.rh2-callout__body  { font-weight: 600; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin: 0; }

/* ------------------------------------------------------------
   7. CARD (core/Card.jsx) + hover-lift utility
   ------------------------------------------------------------ */
.rh2-card {
  background: var(--surface-card); border: 1px solid var(--line);
  border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.rh2-card--flat { box-shadow: var(--shadow-sm); }
.rh2-card--deep { box-shadow: var(--shadow-lg); }
.rh2-card__pad  { padding: var(--space-5); }
.rh2-card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
/* page-level card lift (fx.js data-lift: −6px + deep shadow) */
.rh2-lift { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.rh2-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* ------------------------------------------------------------
   8. STAT BLOCK (core/StatBlock.jsx) — gradient headline number
   ------------------------------------------------------------ */
.rh2-stat { text-align: left; }
.rh2-stat--center { text-align: center; }
.rh2-stat__value {
  font-family: var(--font-sans); font-weight: 900;
  font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1; letter-spacing: -.03em;
  background: var(--grad-sunrise);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rh2-stat__value--coral { background: none; color: var(--coral); }
.rh2-stat__value--leaf  { background: none; color: var(--leaf-deep); }
.rh2-stat__label {
  margin-top: 8px; font-weight: 700; font-size: 14.5px; color: var(--ink-2); max-width: 220px;
}
.rh2-stat--center .rh2-stat__label { margin-inline: auto; }

/* ------------------------------------------------------------
   9. PRICE CARD (brand/PriceCard.jsx) — $ per-site pricing
   ------------------------------------------------------------ */
.rh2-price-card {
  position: relative; display: flex; flex-direction: column; gap: 16px;
  background: var(--surface-card); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-6) var(--space-5);
  box-shadow: var(--shadow-sm);
}
.rh2-price-card--featured {
  background: var(--ink); color: var(--white); border: none; box-shadow: var(--shadow-lg);
}
.rh2-price-card__badge { /* "Best value" — featured card only */
  position: absolute; top: 18px; right: 18px;
  font-weight: 800; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--journey-5);
}
.rh2-price-card__plan {
  font-weight: 800; font-size: 15px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--coral);
}
.rh2-price-card--featured .rh2-price-card__plan { color: var(--journey-4); }
.rh2-price-card__row { display: flex; align-items: baseline; gap: 6px; }
.rh2-price-card__price { font-weight: 900; font-size: 52px; line-height: 1; letter-spacing: -.03em; }
.rh2-price-card__per { font-weight: 700; font-size: 15px; color: var(--ink-3); }
.rh2-price-card--featured .rh2-price-card__per { color: rgba(255,255,255,.7); }
.rh2-price-card__features {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 11px;
}
.rh2-price-card__features li {
  display: flex; gap: 10px; align-items: flex-start;
  font-weight: 600; font-size: 14.5px; color: var(--ink-2);
}
.rh2-price-card--featured .rh2-price-card__features li { color: rgba(255,255,255,.9); }
.rh2-price-card__check {
  flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--wash-leaf); color: var(--leaf-deep);
  font-weight: 900; font-size: 12px; line-height: 1;
}
.rh2-price-card--featured .rh2-price-card__check {
  background: rgba(198,210,74,.22); color: var(--journey-5);
}
.rh2-price-card .rh2-btn { margin-top: auto; }

/* ------------------------------------------------------------
   10. SESSION CARD — tilted calendar-page card (Info Sessions).
   Container centers, wraps, and cycles tilt/drop by position;
   the month band cycles journey colors via --c1..--c5.
   ------------------------------------------------------------ */
.rh2-session-cards {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 20px; align-items: flex-start;
}
.rh2-session-card {
  width: 200px; flex: none; text-align: center;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-md); overflow: hidden;
}
/* tilt cycle: −1.2° / straight-but-dropped-14px / +1.2° */
.rh2-session-cards .rh2-session-card:nth-child(3n+1) { transform: rotate(-1.2deg); }
.rh2-session-cards .rh2-session-card:nth-child(3n+2) { transform: none; margin-top: 14px; }
.rh2-session-cards .rh2-session-card:nth-child(3n)   { transform: rotate(1.2deg); }
/* month band — journey colors cycle 2 → 3 → 4 → 5 → 1 */
.rh2-session-card__band {
  text-align: center; font-weight: 800; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; padding: 8px;
  background: var(--journey-2); color: #fff;
}
.rh2-session-card--c1 .rh2-session-card__band { background: var(--journey-2); color: #fff; }
.rh2-session-card--c2 .rh2-session-card__band { background: var(--journey-3); color: #fff; }
.rh2-session-card--c3 .rh2-session-card__band { background: var(--journey-4); color: #fff; }
.rh2-session-card--c4 .rh2-session-card__band { background: var(--journey-5); color: var(--lime-ink); }
.rh2-session-card--c5 .rh2-session-card__band { background: var(--journey-1); color: #fff; }
.rh2-session-card__body    { padding: 18px 16px 20px; }
.rh2-session-card__day     { font-weight: 900; font-size: 46px; line-height: 1; color: var(--ink); }
.rh2-session-card__weekday { font-weight: 800; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 4px 0 12px; }
.rh2-session-card__time    { font-weight: 700; font-size: 14px; color: var(--ink-2); }
.rh2-session-card__loc     { font-weight: 600; font-size: 12.5px; color: var(--ink-3); margin-bottom: 14px; }

/* ------------------------------------------------------------
   11. JOURNEY TRACKER — gradient progress rail.
   Set the filled fraction inline: style="--progress: 44%".
   ------------------------------------------------------------ */
.rh2-journey-tracker {
  position: relative; height: 8px; border-radius: 4px;
  background: var(--sand); overflow: hidden;
}
.rh2-journey-tracker::before {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: var(--progress, 0%); border-radius: 4px;
  background: var(--grad-journey);
  transition: width var(--dur-slow) var(--ease-out);
}
.rh2-journey-tracker--thin { height: 4px; border-radius: 2px; background: transparent; }
.rh2-journey-tracker__note { font-weight: 700; font-size: 12.5px; color: var(--ink-3); margin-top: 8px; }

/* ------------------------------------------------------------
   12. AVATAR (core/Avatar.jsx) — img or monogram <span>
   ------------------------------------------------------------ */
.rh2-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); object-fit: cover; object-position: 50% 28%;
  background: var(--wash-coral); color: var(--coral-deep);
  font-family: var(--font-sans); font-weight: 800; overflow: hidden;
  width: 56px; height: 56px; flex: 0 0 56px; font-size: 20px; /* md default */
}
.rh2-avatar--xs { width: 28px;  height: 28px;  flex-basis: 28px;  font-size: 10px; }
.rh2-avatar--sm { width: 40px;  height: 40px;  flex-basis: 40px;  font-size: 14px; }
.rh2-avatar--lg { width: 80px;  height: 80px;  flex-basis: 80px;  font-size: 29px; }
.rh2-avatar--xl { width: 112px; height: 112px; flex-basis: 112px; font-size: 40px; }
.rh2-avatar--ring { border: 3px solid var(--white); box-shadow: var(--shadow-md); }

/* ------------------------------------------------------------
   13. TEAM CARD (brand/TeamCard.jsx)
   ------------------------------------------------------------ */
.rh2-team-card {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 12px;
}
.rh2-team-card__name { font-weight: 900; font-size: 18px; color: var(--ink); }
.rh2-team-card__role { font-weight: 700; font-size: 14px; color: var(--coral-deep); margin-top: 2px; }
.rh2-team-card__cred { font-weight: 600; font-size: 13px; color: var(--ink-3);  margin-top: 2px; }

/* ------------------------------------------------------------
   14. FORMS — field, input, select, checkbox, radio, switch
   ------------------------------------------------------------ */
.rh2-field { display: block; }
.rh2-field__label { display: block; margin-bottom: 7px; font-weight: 800; font-size: 14px; color: var(--ink); }
.rh2-field__hint  { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.rh2-field--error .rh2-field__hint { color: var(--danger); }

/* Text input — style the <input>/<textarea> element directly */
.rh2-input {
  display: block; width: 100%; box-sizing: border-box;
  background: var(--white); border: 1.5px solid var(--line-2);
  border-radius: var(--radius-md); padding: 13px 14px;
  font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: var(--ink);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.rh2-input:focus { outline: none; border-color: var(--coral); box-shadow: var(--ring); }
.rh2-field--error .rh2-input { border-color: var(--danger); }
.rh2-input::placeholder { color: var(--ink-4); font-weight: 600; }
/* wrapper form of the input, for a prefix (e.g. "+1") */
.rh2-input-group {
  display: flex; align-items: center; gap: 8px;
  background: var(--white); border: 1.5px solid var(--line-2);
  border-radius: var(--radius-md); padding: 0 14px;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.rh2-input-group:focus-within { border-color: var(--coral); box-shadow: var(--ring); }
.rh2-input-group .rh2-input { flex: 1; border: none; border-radius: 0; padding: 13px 0; }
.rh2-input-group .rh2-input:focus { box-shadow: none; }
.rh2-input-group__prefix { color: var(--ink-3); font-weight: 700; }

/* Select — custom chevron (inline SVG, ink-3 #8A7F75) */
.rh2-select {
  display: block; width: 100%; box-sizing: border-box;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  font-family: var(--font-sans); font-weight: 700; font-size: 15px; color: var(--ink);
  background: var(--white)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A7F75' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 15px center;
  border: 1.5px solid var(--line-2); border-radius: var(--radius-md);
  padding: 13px 42px 13px 14px;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.rh2-select:focus { outline: none; border-color: var(--coral); box-shadow: var(--ring); }

/* Checkbox — <label class="rh2-checkbox"><input type="checkbox"><span class="rh2-checkbox__box"></span><span class="rh2-checkbox__label">…</span></label> */
.rh2-checkbox, .rh2-radio, .rh2-switch {
  display: inline-flex; align-items: center; gap: 11px; cursor: pointer;
}
.rh2-checkbox > input, .rh2-radio > input, .rh2-switch > input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.rh2-checkbox__label, .rh2-radio__label, .rh2-switch__label {
  font-weight: 600; font-size: 15px; color: var(--ink);
}
.rh2-checkbox__box {
  width: 22px; height: 22px; flex: 0 0 22px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--white); border: 1.5px solid var(--line-2);
  color: var(--white); font-weight: 900; font-size: 13px; line-height: 1;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.rh2-checkbox__box::after { content: "✓"; opacity: 0; }
.rh2-checkbox > input:checked + .rh2-checkbox__box { background: var(--coral); border-color: var(--coral); }
.rh2-checkbox > input:checked + .rh2-checkbox__box::after { opacity: 1; }

/* Radio */
.rh2-radio__circle {
  width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--white); border: 1.5px solid var(--line-2);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.rh2-radio__circle::after {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--coral); transform: scale(0);
  transition: transform var(--dur-fast) var(--ease-overshoot);
}
.rh2-radio > input:checked + .rh2-radio__circle { border-color: var(--coral); }
.rh2-radio > input:checked + .rh2-radio__circle::after { transform: scale(1); }

/* Switch */
.rh2-switch__track {
  width: 46px; height: 27px; flex: 0 0 46px; border-radius: var(--radius-pill);
  padding: 3px; box-sizing: border-box; display: inline-flex; align-items: center;
  background: var(--sand-2);
  transition: background var(--dur-base) var(--ease-out);
}
.rh2-switch__track::after {
  content: ""; width: 21px; height: 21px; border-radius: 50%;
  background: var(--white); box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-overshoot);
}
.rh2-switch > input:checked + .rh2-switch__track { background: var(--coral); }
.rh2-switch > input:checked + .rh2-switch__track::after { transform: translateX(19px); }

/* disabled state, all three */
.rh2-checkbox > input:disabled ~ *, .rh2-radio > input:disabled ~ *, .rh2-switch > input:disabled ~ * { opacity: .5; }
.rh2-checkbox:has(> input:disabled), .rh2-radio:has(> input:disabled), .rh2-switch:has(> input:disabled) { cursor: not-allowed; }

/* Plan-selector card (registration form): selected via aria-checked
   or .is-selected on the card */
.rh2-plan-card {
  cursor: pointer; background: var(--white);
  border: 2px solid var(--line-2); border-radius: var(--radius-lg);
  padding: 18px 20px;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.rh2-plan-card.is-selected, .rh2-plan-card[aria-checked="true"] {
  border-color: var(--coral); background: var(--wash-coral);
}
.rh2-plan-card__check {
  width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box;
  border: 2px solid var(--line-2); background: transparent;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
}
.rh2-plan-card.is-selected .rh2-plan-card__check,
.rh2-plan-card[aria-checked="true"] .rh2-plan-card__check {
  border-color: var(--coral); background: var(--coral);
}

/* ------------------------------------------------------------
   15. HEADER — sticky, shrink-on-scroll (.rh2-header--scrolled
   added by JS past 60px)
   ------------------------------------------------------------ */
.rh2-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px 32px;
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
  transition: padding var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.rh2-header--scrolled { padding: 10px 32px; box-shadow: 0 4px 20px -8px rgba(74,40,24,.18); }
.rh2-header__logo { display: inline-flex; align-items: center; }
.rh2-header__logo img { height: 34px; display: block; }
.rh2-header__nav { display: flex; align-items: center; gap: 28px; }
.rh2-header__nav a {
  font-family: var(--font-sans); font-weight: 700; font-size: 15px;
  text-decoration: none; color: var(--ink-2);
}
.rh2-header__nav a:hover { color: var(--coral); text-decoration: none; }
.rh2-header__nav a.is-active, .rh2-header__nav a[aria-current="page"] {
  color: var(--coral); font-weight: 800;
  text-decoration: underline; text-decoration-color: var(--coral);
  text-decoration-thickness: 2px; text-underline-offset: 7px;
}
/* transparent variant for ink/gradient heroes */
.rh2-header--transparent {
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
.rh2-header--transparent .rh2-header__nav a { color: rgba(255,255,255,.92); }
@media (max-width: 640px) {
  /* Four links never fit beside the logo at phone widths — shrink both and
     let the nav wrap under the logo instead of clipping off the right edge. */
  .rh2-header { padding: 12px 18px; flex-wrap: wrap; row-gap: 6px; }
  .rh2-header--scrolled { padding: 8px 18px; }
  .rh2-header__logo img { height: 26px; }
  .rh2-header__nav { gap: 14px; flex-wrap: wrap; }
  .rh2-header__nav a { font-size: 13.5px; }
  .rh2-header__cta { display: none; } /* pill CTA hides on phones (prototype behavior) */
}

/* Announcement ribbon above the header */
.rh2-ribbon {
  background: var(--leaf-deep); color: #fff; text-align: center;
  padding: 9px 16px; font-weight: 700; font-size: 13.5px;
}
.rh2-ribbon a { color: #fff; font-weight: 800; }

/* ------------------------------------------------------------
   16. FOOTER — dark ink, reversed (light) logo
   ------------------------------------------------------------ */
.rh2-footer { background: var(--ink); color: rgba(255,255,255,.82); padding: 56px 32px 32px; }
.rh2-footer__grid {
  max-width: var(--container); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between;
}
.rh2-footer__brand { max-width: 320px; }
.rh2-footer__brand img { height: 40px; margin-bottom: 18px; display: block; }
.rh2-footer__tagline { margin: 0 0 14px; font-weight: 600; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.7); }
.rh2-footer__phone   { font-weight: 800; font-size: 22px; color: var(--journey-4); }
.rh2-footer__address { font-weight: 600; font-size: 13.5px; margin-top: 6px; color: rgba(255,255,255,.6); }
.rh2-footer__title {
  font-weight: 800; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 16px;
}
.rh2-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.rh2-footer__links a { color: rgba(255,255,255,.82); text-decoration: none; font-weight: 700; font-size: 14.5px; }
.rh2-footer__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rh2-footer__legal {
  max-width: var(--container); margin: 40px auto 0; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-weight: 600; font-size: 13px; color: rgba(255,255,255,.5);
}

/* ------------------------------------------------------------
   17. PAGE DECOR — capture strip, wash circles, CTA band, hero
   ------------------------------------------------------------ */
/* Dashed lead-capture strip ("Coming to more communities.") */
.rh2-capture {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--white); border: 1.5px dashed var(--line-2);
  border-radius: var(--radius-lg); padding: 18px 24px;
}
.rh2-capture--block { display: block; padding: 24px 26px; } /* card-shaped variant */
.rh2-capture__text  { min-width: 220px; flex: 1; }
.rh2-capture__title { font-weight: 800; font-size: 15px; color: var(--ink); }
.rh2-capture__sub   { font-weight: 600; font-size: 13.5px; color: var(--ink-3); margin-top: 2px; }
.rh2-capture__fields { display: flex; gap: 8px; flex-wrap: wrap; }
.rh2-capture__input { /* compact pill input used inside the strip */
  border: 1px solid var(--line-2); border-radius: var(--radius-pill);
  padding: 10px 16px; background: var(--cream); outline: 0;
  font-family: var(--font-sans); font-weight: 600; font-size: 13.5px; color: var(--ink);
}
.rh2-capture__input:focus { border-color: var(--coral); box-shadow: var(--ring); }

/* Decorative wash circles — size/position inline per use */
.rh2-wash-circle {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: var(--wash-coral); opacity: .5;
}
.rh2-wash-circle--amber { background: var(--wash-amber); }
.rh2-wash-circle--leaf  { background: var(--wash-leaf); }
.rh2-wash-circle--white { background: rgba(255,255,255,.1); opacity: 1; }
.rh2-wash-circle--aurora { /* sand-hero sunrise blob */
  background: radial-gradient(circle at 32% 30%,
    rgba(240,169,59,.45), rgba(232,115,74,.26) 50%, transparent 72%);
  opacity: 1;
}
.rh2-wash-circle--drift  { animation: rh2-drift 16s var(--ease-in-out) infinite; }
.rh2-wash-circle--drift2 { animation: rh2-drift2 16s var(--ease-in-out) infinite; }
.rh2-wash-circle--float  { animation: rh2-float 8s  var(--ease-in-out) infinite; }
@keyframes rh2-drift  { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-22px,16px) scale(1.06); } }
@keyframes rh2-drift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(20px,-18px) scale(1.05); } }
@keyframes rh2-float  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }

/* Gradient CTA band */
.rh2-cta-band { position: relative; overflow: hidden; background: var(--grad-sunrise); }
.rh2-cta-band__inner {
  position: relative; max-width: var(--container); margin: 0 auto;
  padding: 64px 24px; text-align: center;
}
.rh2-cta-band__title {
  font-weight: 900; font-size: clamp(1.9rem, 3.8vw, 2.8rem);
  letter-spacing: -.02em; color: #fff; margin: 0 0 12px;
}
.rh2-cta-band__sub { font-weight: 700; font-size: 16.5px; color: rgba(255,255,255,.94); margin: 0 0 26px; }
.rh2-cta-band__mark { /* faint white brand mark, right edge */
  position: absolute; right: -30px; top: 50%; transform: translateY(-50%);
  height: 260px; opacity: .12; filter: brightness(0) invert(1); pointer-events: none;
}

/* Full-bleed photo hero + scrim */
.rh2-hero {
  position: relative; overflow: hidden;
  min-height: min(78vh, 640px); display: flex; align-items: flex-end;
}
.rh2-hero__media { position: absolute; inset: 0; }
.rh2-hero__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  object-position: 70% center; /* the couple stands in the right quarter of couple-wide.jpg — bias the crop toward them as the viewport narrows */
}
.rh2-hero__scrim { /* left-biased + bottom gradients for text legibility */
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(31,17,12,.52) 0%, rgba(31,17,12,.28) 52%, rgba(31,17,12,.06) 100%),
    linear-gradient(180deg, rgba(31,17,12,.14) 0%, rgba(31,17,12,.30) 45%, rgba(31,17,12,.82) 100%);
}
.rh2-hero__content {
  box-sizing: border-box; /* width:100% on a padded box — without this it runs 48px past a phone viewport */
  position: relative; width: 100%; max-width: var(--container);
  margin: 0 auto; padding: 120px 24px 56px;
}
.rh2-hero__eyebrow {
  font-weight: 800; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.92); margin-bottom: 14px;
  text-shadow: 0 1px 8px rgba(31,17,12,.5);
}
.rh2-hero__title {
  font-weight: 900; font-size: clamp(2.4rem, 5.2vw, 3.9rem); line-height: 1;
  letter-spacing: -.03em; color: #fff; margin: 0;
  filter: drop-shadow(0 2px 14px rgba(31,17,12,.55));
}
.rh2-hero__grad-word { /* gradient-inked word inside the headline */
  background: linear-gradient(90deg, #F0894F, #F5B653, #D8E060);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rh2-hero__lead {
  font-weight: 600; font-size: 18px; line-height: 1.55;
  color: rgba(255,255,255,.95); max-width: 540px; margin: 18px 0 26px;
  text-shadow: 0 1px 10px rgba(31,17,12,.5);
}
.rh2-hero__note {
  font-weight: 700; font-size: 13.5px; color: rgba(255,255,255,.92);
  margin-top: 16px; text-shadow: 0 1px 8px rgba(31,17,12,.55);
}
/* ≤920px the ultra-wide photo can no longer hold both the couple (right
   quarter of the frame) and readable copy in one crop — stack instead:
   the photo becomes a right-biased banner with the couple fully in frame,
   and the text drops onto a solid ink panel below it, so copy never
   covers them. */
@media (max-width: 920px) {
  .rh2-hero { display: block; min-height: 0; background: var(--ink); }
  .rh2-hero__media {
    position: relative; inset: auto;
    /* 4:3-ish banner via height (aspect-ratio + max-height would transfer
       the cap to the width and strand the photo short of the right edge) */
    height: min(75vw, 420px);
  }
  .rh2-hero__media img { object-position: 86% center; }
  .rh2-hero__media::after { /* fade the photo's foot into the ink panel */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(44,38,34,0) 72%, rgba(44,38,34,.85) 100%);
  }
  .rh2-hero__scrim { display: none; }
  .rh2-hero__content { padding: 28px 24px 44px; }
  /* Solid panel needs no photo-legibility shadows; type scales with the
     viewport all the way down to small phones. */
  .rh2-hero__title { font-size: clamp(1.6rem, 7.4vw, 2.4rem); line-height: 1.05; filter: none; }
  .rh2-hero__eyebrow { font-size: 11px; letter-spacing: .12em; margin-bottom: 10px; text-shadow: none; }
  .rh2-hero__lead { font-size: 16px; line-height: 1.6; margin: 14px 0 22px; text-shadow: none; }
  .rh2-hero__note { font-size: 13px; text-shadow: none; }
  .rh2-hero .rh2-btn--lg { white-space: normal; text-align: center; padding: 14px 24px; font-size: 16px; }
}
@media (max-width: 480px) {
  .rh2-hero .rh2-btn--lg { width: 100%; }
}

/* Floating white chip (hero photos: "First class Sep 14") */
.rh2-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border-radius: var(--radius-pill); box-shadow: var(--shadow-md);
  padding: 10px 18px; font-weight: 800; font-size: 13.5px; color: var(--ink);
}

/* ------------------------------------------------------------
   18. SCROLL REVEAL — JS adds .is-in when the element enters
   the viewport (stagger via inline --reveal-delay if desired)
   ------------------------------------------------------------ */
.rh2-reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity .62s var(--ease-out) var(--reveal-delay, 0ms),
              transform .62s var(--ease-out) var(--reveal-delay, 0ms);
}
.rh2-reveal.is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------
   19. FOCUS & REDUCED MOTION
   tokens.css already applies the global :focus-visible coral
   ring (--ring); restated here for rh2 controls so this sheet
   stands alone if the cascade changes.
   ------------------------------------------------------------ */
.rh2-btn:focus-visible, .rh2-input:focus-visible, .rh2-select:focus-visible,
.rh2-plan-card:focus-visible, .rh2-capture__input:focus-visible,
.rh2-header a:focus-visible, .rh2-footer a:focus-visible,
.rh2-checkbox > input:focus-visible + .rh2-checkbox__box,
.rh2-radio > input:focus-visible + .rh2-radio__circle,
.rh2-switch > input:focus-visible + .rh2-switch__track {
  outline: none; box-shadow: var(--ring);
}

@media (prefers-reduced-motion: reduce) {
  .rh2-reveal { opacity: 1; transform: none; transition: none; }
  .rh2-wash-circle--drift, .rh2-wash-circle--drift2, .rh2-wash-circle--float { animation: none; }
  .rh2-btn, .rh2-btn:hover, .rh2-btn:active { transform: none; }
  .rh2-card--hover:hover, .rh2-lift:hover { transform: none; }
  .rh2-header, .rh2-journey-tracker::before,
  .rh2-card, .rh2-lift, .rh2-plan-card,
  .rh2-checkbox__box, .rh2-radio__circle, .rh2-radio__circle::after,
  .rh2-switch__track, .rh2-switch__track::after,
  .rh2-input, .rh2-input-group, .rh2-select { transition: none; }
}