.renewal-view {
  min-height: 100%;
  background: linear-gradient(180deg, #fffdf8 0%, #fff9f7 58%, #fff4ef 100%);
}

/* Mobile heartbeat is a focused modal card; the content itself remains scrollable. */
body.renewal-mobile-modal-open { overflow: hidden; }

#renewalView.renewal-mobile-modal-view {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: max(14px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  overflow: hidden;
  background: rgba(44, 35, 38, .38);
  backdrop-filter: blur(12px);
}

#renewalView.renewal-mobile-modal-view::before,
#renewalView.renewal-mobile-modal-view::after { opacity: 0; }

#renewalView.renewal-mobile-modal-view > #renewal-root {
  width: min(100%, 720px);
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(231, 193, 199, .9);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 253, 250, .98), rgba(255, 246, 243, .98));
  box-shadow: 0 28px 80px rgba(53, 35, 39, .28), 0 0 0 1px rgba(255, 255, 255, .52) inset;
}

#renewalView.renewal-mobile-modal-view .renewal-shell {
  width: 100%;
  min-height: 0;
  padding: 18px 20px 28px;
}

@media (max-width: 420px) {
  #renewalView.renewal-mobile-modal-view > #renewal-root { max-height: calc(100dvh - 20px); border-radius: 24px; }
  #renewalView.renewal-mobile-modal-view .renewal-shell { padding: 14px 16px 24px; }
}

.renewal-shell {
  --renewal-ink: #263b35;
  --renewal-muted: #71827c;
  --renewal-teal: #318e8e;
  --renewal-soft: #e7f3f1;
  width: min(100%, 720px);
  min-height: 100%;
  margin: 0 auto;
  padding: 16px 20px 40px;
  box-sizing: border-box;
  color: var(--renewal-ink);
}

.renewal-loading,
.renewal-empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  min-height: 52vh;
  color: var(--renewal-muted);
}

.renewal-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 0;
}

.renewal-topbar-home {
  align-items: center;
}

.renewal-topbar-copy {
  min-width: 0;
  flex: 1 1 auto;
  margin-top: 2px;
}

.renewal-topbar-copy h1 {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
  font-size: clamp(20px, 3vw, 26px);
  line-height: 1.18;
  letter-spacing: 0;
}

.renewal-topbar-copy p {
  margin: 3px 0 0;
  color: var(--renewal-muted);
  font-size: 13px;
  line-height: 1.45;
}

.renewal-topbar-copy .renewal-kicker { font-size: 11px; letter-spacing: .06em; }

.renewal-topbar strong,
.renewal-topbar span {
  display: block;
}

.renewal-topbar strong { font-size: 20px; }
.renewal-back,
.renewal-progress-chip,
.renewal-text-button,
.renewal-secondary,
.renewal-primary,
.renewal-share-button,
.renewal-week-line button,
.renewal-summary-grid button {
  font: inherit;
  cursor: pointer;
}

.renewal-back {
  width: 40px;
  height: 40px;
  border: 1px solid #dce8e4;
  border-radius: 50%;
  background: #fff;
  color: var(--renewal-teal);
  font-size: 29px;
  line-height: 1;
}

.renewal-eyebrow,
.renewal-kicker {
  color: var(--renewal-teal);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
}

.renewal-progress-chip,
.renewal-card-count {
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--renewal-soft);
  color: var(--renewal-teal);
  font-size: 12px;
  font-weight: 800;
}

.renewal-progress-chip { flex: 0 0 auto; white-space: nowrap; }

.renewal-message {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid #b8d9d4;
  border-radius: 12px;
  background: #edf8f5;
  color: #27716f;
  font-size: 14px;
}

.renewal-inline-message { margin: 0; padding: 10px 12px; border: 1px solid #eac4c7; border-radius: 10px; background: #fff5f4; color: #a94c5c; font-size: 13px; font-weight: 700; line-height: 1.5; }

.renewal-home,
.renewal-day,
.renewal-summary {
  padding-top: 28px;
}

.renewal-intro h1,
.renewal-day-heading h1,
.renewal-summary h1 {
  max-width: 620px;
  margin: 12px 0 10px;
  line-height: 1.12;
  letter-spacing: 0;
}

.renewal-intro h1 { font-size: clamp(28px, 4.2vw, 40px); }
.renewal-day-heading h1,
.renewal-summary h1 { font-size: clamp(30px, 5vw, 48px); }

.renewal-intro p,
.renewal-day-heading p,
.renewal-summary > p {
  max-width: 540px;
  margin: 0;
  color: var(--renewal-muted);
  font-size: 16px;
  line-height: 1.7;
}

.renewal-week-line {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin: 20px 0 12px;
}

.renewal-week-line button,
.renewal-summary-grid button {
  min-width: 0;
  min-height: 54px;
  padding: 8px 4px;
  border: 1px solid #dce8e4;
  border-radius: 11px;
  background: #fff;
  color: var(--renewal-muted);
}

.renewal-week-line button b,
.renewal-week-line button span,
.renewal-summary-grid button b,
.renewal-summary-grid button span { display: block; }
.renewal-week-line button b { font-size: 18px; }
.renewal-week-line button span { margin-top: 3px; font-size: 10px; }
.renewal-week-line button.done,
.renewal-summary-grid button.done { border-color: #8ac8c1; background: var(--renewal-soft); color: var(--renewal-teal); }
.renewal-week-line button.today { border: 2px solid var(--renewal-teal); }
.renewal-week-line button:disabled { cursor: default; opacity: .58; }

.renewal-home-actions {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.renewal-mode-choice {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.renewal-mode-copy,
.renewal-heartbeat-form,
.renewal-heartbeat-state,
.renewal-heartbeat-proposal,
.renewal-heartbeat-feedback {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid #d7e8e4;
  border-radius: 12px;
  background: rgba(255, 255, 255, .7);
}

.renewal-mode-copy strong { font-size: 18px; line-height: 1.35; }
.renewal-mode-copy p,
.renewal-heartbeat-form > p,
.renewal-heartbeat-state > p,
.renewal-heartbeat-proposal > p,
.renewal-heartbeat-feedback > p { margin: 0; color: var(--renewal-muted); font-size: 14px; line-height: 1.6; }
.renewal-mode-copy .renewal-primary,
.renewal-mode-copy .renewal-secondary,
.renewal-heartbeat-form > .renewal-primary { justify-self: center; min-width: 164px; }
.renewal-mode-heartbeat { border-color: rgba(233, 151, 126, .42); background: rgba(255, 248, 240, .72); }
.renewal-readiness-notice { display: grid; justify-items: center; gap: 8px; padding: 10px 12px; border: 1px solid #ead8c9; border-radius: 10px; background: rgba(255, 248, 240, .7); }
.renewal-readiness-notice strong { color: #a94c5c; font-size: 14px; line-height: 1.35; }
.renewal-readiness-notice p { margin: 0; color: var(--renewal-muted); font-size: 13px; line-height: 1.5; text-align: center; }
.renewal-readiness-notice .renewal-secondary { min-height: 36px; padding: 7px 14px; }

.renewal-heartbeat-content { display: grid; gap: 18px; padding-top: 22px; }
.renewal-heartbeat-form {
  width: min(100%, 620px);
  max-width: none;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 30px);
  border-color: #d9e6e3;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 18px 42px rgba(43, 78, 69, .08);
}
.renewal-heartbeat-form h2,
.renewal-heartbeat-state h2,
.renewal-heartbeat-proposal h2,
.renewal-heartbeat-feedback h2 { margin: 0; font-size: 24px; line-height: 1.25; }
.renewal-questionnaire-status { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid #d6e7e3; border-radius: 10px; background: rgba(236, 247, 244, .82); }
.renewal-questionnaire-status strong { color: var(--renewal-teal); font-size: 13px; line-height: 1.35; }
.renewal-questionnaire-status span { color: var(--renewal-muted); font-size: 12px; line-height: 1.45; }
.renewal-heartbeat-form fieldset { display: grid; gap: 10px; min-width: 0; margin: 4px 0 0; padding: 0; border: 0; }
.renewal-heartbeat-form legend { color: var(--renewal-ink); font-size: 15px; font-weight: 800; }
.renewal-gender-field legend { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.renewal-gender-field legend small { color: var(--renewal-teal); font-size: 12px; font-weight: 700; white-space: nowrap; }
.renewal-age-field legend { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.renewal-age-field legend small { color: var(--renewal-muted); font-size: 12px; font-weight: 600; }
.renewal-age-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.renewal-age-row input { width: 100%; min-width: 0; min-height: 44px; padding: 8px 11px; border: 1px solid #cde2de; border-radius: 10px; background: #fff; color: var(--renewal-ink); font: inherit; font-size: 15px; }
.renewal-age-row input:focus { outline: 2px solid rgba(185, 86, 104, .25); outline-offset: 1px; border-color: #b95668; }
.renewal-age-row span { color: var(--renewal-muted); font-size: 13px; font-weight: 700; white-space: nowrap; }
.renewal-age-error { color: #b24f60; font-size: 12px; line-height: 1.45; }
.renewal-choice-row { display: flex; flex-wrap: wrap; gap: 9px; }
.renewal-choice-row button { flex: 1 1 112px; min-height: 46px; padding: 9px 14px; border: 1px solid #cde2de; border-radius: 10px; background: #fff; color: var(--renewal-muted); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease; }
.renewal-choice-row button:hover { border-color: #83bdb7; color: var(--renewal-teal); transform: translateY(-1px); }
.renewal-choice-row button.active { border-color: var(--renewal-teal); background: var(--renewal-soft); color: var(--renewal-teal); font-weight: 800; }
.renewal-match-policy { display: grid; gap: 9px; margin-top: 2px; padding: 13px 14px; border: 1px solid #efd6d3; border-left: 3px solid #c45d6b; border-radius: 10px; background: #fff8f6; }
.renewal-match-policy-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.renewal-match-policy strong { color: #a94c5c; font-size: 14px; line-height: 1.35; }
.renewal-match-period { flex: 0 0 auto; padding: 3px 8px; border-radius: 999px; background: #f6dfe0; color: #a94c5c !important; font-size: 12px !important; font-weight: 800; line-height: 1.35 !important; }
.renewal-match-schedule { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.renewal-match-schedule-item { display: grid; gap: 2px; min-width: 0; padding: 8px 9px; border: 1px solid rgba(196, 93, 107, .18); border-radius: 8px; background: rgba(255, 255, 255, .7); }
.renewal-match-schedule-item small { color: var(--renewal-muted); font-size: 11px; line-height: 1.35; }
.renewal-match-schedule-item b { color: var(--renewal-ink); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.renewal-match-policy > span { color: var(--renewal-muted); font-size: 12px; line-height: 1.55; }
.renewal-payment-panel { display: grid; gap: 11px; padding: 14px; border: 1px solid rgba(185, 86, 104, .22); border-radius: 12px; background: linear-gradient(135deg, rgba(255, 247, 244, .96), rgba(255, 255, 255, .9)); }
.renewal-payment-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.renewal-payment-heading > div { display: grid; gap: 3px; }
.renewal-payment-heading strong { color: #b95668; font-size: 24px; line-height: 1.15; }
.renewal-payment-coverage { color: var(--renewal-muted); font-size: 12px; line-height: 1.4; text-align: right; }
.renewal-payment-label { color: var(--renewal-ink); font-size: 13px; font-weight: 800; }
.renewal-payment-coupons, .renewal-payment-methods { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.renewal-payment-option { min-height: 38px; padding: 7px 11px; border: 1px solid #e5c4c2; border-radius: 9px; background: rgba(255, 255, 255, .85); color: var(--renewal-muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.renewal-payment-option strong, .renewal-payment-option small { display: block; text-align: left; }
.renewal-payment-option small { margin-top: 2px; color: var(--renewal-muted); font-size: 10px; font-weight: 600; }
.renewal-payment-option.active { border-color: #b95668; background: #fff0ef; color: #b24f60; box-shadow: 0 4px 10px rgba(185, 86, 104, .1); }
.renewal-payment-full { border-style: dashed; }
.renewal-payment-note { color: var(--renewal-muted); font-size: 11px; line-height: 1.5; }
.renewal-heartbeat-payment-state { border-color: rgba(185, 86, 104, .25); background: rgba(255, 248, 246, .9); }
.renewal-heartbeat-payment-state h2 { color: #b24f60; }
.renewal-heartbeat-form > .renewal-primary { width: min(100%, 280px); min-height: 48px; margin-top: 2px; border-color: #b14f61; background: #b95668; box-shadow: 0 10px 20px rgba(177, 79, 97, .18); }
.renewal-heartbeat-form > .renewal-primary:hover { background: #a9485a; }
.renewal-heartbeat-time { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.renewal-heartbeat-time label { display: grid; gap: 6px; color: var(--renewal-muted); font-size: 13px; font-weight: 800; }
.renewal-heartbeat-time input { min-width: 0; min-height: 42px; padding: 8px; border: 1px solid #cde2de; border-radius: 9px; background: #fff; color: var(--renewal-ink); font: inherit; }
.renewal-consent { display: flex; align-items: flex-start; gap: 9px; color: var(--renewal-muted); font-size: 13px; line-height: 1.55; }
.renewal-consent input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--renewal-teal); }
.renewal-heartbeat-state,
.renewal-heartbeat-proposal,
.renewal-heartbeat-feedback { max-width: 560px; margin: 0 auto; text-align: center; }
.renewal-heartbeat-state small,
.renewal-heartbeat-proposal small { color: var(--renewal-muted); font-size: 12px; line-height: 1.55; }
.renewal-heartbeat-profile { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px; }
.renewal-heartbeat-profile strong,
.renewal-heartbeat-profile span { padding: 6px 9px; border-radius: 999px; background: var(--renewal-soft); color: var(--renewal-teal); font-size: 12px; }
.renewal-heartbeat-profile strong { background: transparent; color: var(--renewal-ink); font-size: 15px; }
.renewal-heartbeat-counterpart { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; width: min(100%, 560px); margin: 0 auto; padding: 16px 18px; border: 1px solid rgba(196, 93, 107, .24); border-left: 4px solid #c45d6b; border-radius: 14px; background: linear-gradient(135deg, rgba(255, 247, 243, .94), rgba(255, 255, 255, .86)); box-shadow: 0 10px 24px rgba(196, 93, 107, .08); }
.renewal-heartbeat-counterpart-mark { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid rgba(196, 93, 107, .24); border-radius: 50%; background: #f8dfe0; color: #b64f62; font-size: 18px; font-weight: 900; letter-spacing: 0; }
.renewal-heartbeat-counterpart-copy { display: grid; gap: 4px; min-width: 0; }
.renewal-heartbeat-counterpart-copy .renewal-kicker { color: #b64f62; }
.renewal-heartbeat-counterpart-copy h2 { margin: 0; color: var(--renewal-ink); font-size: 20px; line-height: 1.3; }
.renewal-heartbeat-counterpart-copy p { margin: 0; color: var(--renewal-muted); font-size: 13px; line-height: 1.5; }
.renewal-heartbeat-profile-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.renewal-heartbeat-profile-tags span { padding: 4px 8px; border-radius: 999px; background: #fff0ee; color: #b64f62; font-size: 11px; line-height: 1.3; }
.renewal-heartbeat-match-note { display: grid; gap: 8px; width: min(100%, 560px); margin: 0 auto; padding: 14px 16px; border: 1px solid rgba(196, 93, 107, .18); border-radius: 12px; background: rgba(255, 248, 246, .82); }
.renewal-heartbeat-match-note-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.renewal-heartbeat-match-note-head > div { display: grid; gap: 3px; }
.renewal-heartbeat-match-note h3 { margin: 0; color: var(--renewal-ink); font-size: 16px; line-height: 1.3; }
.renewal-heartbeat-match-note-head small { color: var(--renewal-muted); font-size: 11px; line-height: 1.4; }
.renewal-heartbeat-match-score { color: #b64f62 !important; font-weight: 800; white-space: nowrap; }
.renewal-heartbeat-match-note > p { margin: 0; color: var(--renewal-muted); font-size: 12px; line-height: 1.5; }
.renewal-heartbeat-match-reasons { display: flex; flex-wrap: wrap; gap: 7px; }
.renewal-heartbeat-match-reasons span { padding: 5px 9px; border-radius: 999px; background: #fff; color: #b64f62; font-size: 12px; line-height: 1.3; }
.renewal-heartbeat-match-card .renewal-heartbeat-counterpart-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: auto;
  margin: 0;
  padding: 17px 18px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.renewal-heartbeat-counterpart-mark { width: 44px; height: 44px; font-size: 16px; }
.renewal-heartbeat-counterpart-copy { gap: 3px; }
.renewal-heartbeat-counterpart-overline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.renewal-heartbeat-match-status { padding: 3px 7px; border-radius: 999px; background: #fff0ee; color: #b64f62; font-size: 10px; font-weight: 800; line-height: 1.2; }
.renewal-heartbeat-match-card .renewal-heartbeat-counterpart-copy h2 { font-size: 20px; line-height: 1.2; }
.renewal-heartbeat-match-card .renewal-heartbeat-counterpart-copy p { font-size: 12px; line-height: 1.4; }
.renewal-heartbeat-insight-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; }
.renewal-heartbeat-topic-hint { color: #a47770; font-size: 11px; line-height: 1.4; }
.renewal-heartbeat-match-personality { display: grid; gap: 6px; min-width: 0; padding: 8px 0 2px; border-top: 1px solid rgba(196, 93, 107, .14); }
.renewal-heartbeat-match-personality-summary { margin: 0; color: var(--renewal-muted); font-size: 12px; line-height: 1.5; }
.renewal-heartbeat-match-card .renewal-heartbeat-match-note-inline {
  display: grid;
  align-content: center;
  gap: 8px;
  width: auto;
  margin: 0;
  padding: 14px 18px 16px;
  border: 0;
  border-left: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, .26);
}
.renewal-heartbeat-match-card .renewal-heartbeat-match-note-inline > p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.renewal-heartbeat-match-card {
  display: grid;
  width: min(100%, 620px);
  min-width: 0;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(196, 93, 107, .3);
  border-left: 4px solid #c45d6b;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 247, 243, .98), rgba(255, 255, 255, .9));
  box-shadow: 0 16px 34px rgba(196, 93, 107, .1);
}
.renewal-heartbeat-match-card-body { display: grid; min-width: 0; }
.renewal-heartbeat-match-card-actions {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(196, 93, 107, .16);
  text-align: center;
}
.renewal-heartbeat-match-card-actions p { margin: 0; color: var(--renewal-muted); font-size: 12px; line-height: 1.5; }
.renewal-heartbeat-match-card-actions .renewal-primary { min-width: min(100%, 230px); min-height: 44px; }
.renewal-heartbeat-content-card {
  display: grid;
  width: min(100%, 620px);
  min-width: 0;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(196, 93, 107, .2);
  border-radius: 18px;
  background: rgba(255, 253, 252, .92);
  box-shadow: 0 14px 30px rgba(196, 93, 107, .08);
}
.renewal-heartbeat-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0 18px;
  border-top: 1px solid rgba(196, 93, 107, .16);
  border-bottom: 1px solid rgba(196, 93, 107, .16);
  border-radius: 0;
  background: rgba(255, 255, 255, .62);
}
.renewal-heartbeat-tabs button {
  position: relative;
  min-height: 48px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: var(--renewal-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: color .18s ease;
}
.renewal-heartbeat-tabs button:hover { color: #b64f62; }
.renewal-heartbeat-tabs button.active {
  color: #b64f62;
}
.renewal-heartbeat-tabs button.active::after {
  position: absolute;
  right: 16%;
  bottom: -1px;
  left: 16%;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: #c45d6b;
  content: "";
}
.renewal-heartbeat-tabs button:focus-visible { outline: 3px solid rgba(196, 93, 107, .24); outline-offset: 2px; }
.renewal-heartbeat-content-card > [id$="-panel"] { min-width: 0; }
.renewal-heartbeat-tab-panel { min-width: 0; padding: 20px; }
.renewal-heartbeat-content-card .renewal-heartbeat-extras { max-width: none; margin: 0; }
.renewal-heartbeat-content-card .renewal-heartbeat-extra-panel {
  padding: 18px 20px 0;
  border: 0;
  border-top: 1px solid #f0deda;
  border-radius: 0;
  background: transparent;
}
.renewal-heartbeat-content-card .renewal-heartbeat-chat-room { padding: 0; border-top: 0; }
.renewal-heartbeat-card-footnote { margin: 0; padding: 15px 20px 0; border-top: 1px solid #f0deda; }
.renewal-heartbeat-tab-empty { margin: 0; padding: 24px 20px; color: var(--renewal-muted); text-align: center; }
.renewal-heartbeat-content-card .renewal-heartbeat-manage { padding: 15px 20px 20px; }

/* The paired view owns its gutters; the host view must not add a second set. */
#renewalView:has(.renewal-heartbeat-paired) { padding: 0; }
.renewal-heartbeat-paired { width: min(100%, 760px); padding: 20px 20px 32px; }
.renewal-heartbeat-paired *,
.renewal-heartbeat-paired *::before,
.renewal-heartbeat-paired *::after { box-sizing: border-box; letter-spacing: 0; }
.renewal-heartbeat-paired .renewal-topbar { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; }
.renewal-heartbeat-paired .renewal-back { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; }
.renewal-heartbeat-paired .renewal-topbar-copy { margin: 0; }
.renewal-heartbeat-paired .renewal-topbar-copy h1 { font-size: 23px; line-height: 1.3; }
.renewal-heartbeat-paired .renewal-topbar-copy p { font-size: 12px; }
.renewal-heartbeat-paired .renewal-topbar-copy .renewal-kicker { font-size: 10px; letter-spacing: 0; }
.renewal-heartbeat-paired .renewal-heartbeat-content { padding-top: 18px; }
.renewal-heartbeat-paired .renewal-heartbeat-match-card,
.renewal-heartbeat-paired .renewal-heartbeat-content-card { width: 100%; }
.renewal-heartbeat-paired .renewal-heartbeat-content-card { box-shadow: 0 8px 24px rgba(196, 93, 107, .06); }
.renewal-heartbeat-paired .renewal-heartbeat-counterpart-head { padding: 16px 18px; }
.renewal-heartbeat-paired .renewal-heartbeat-counterpart-mark { width: 44px; height: 44px; font-size: 18px; }
.renewal-heartbeat-paired .renewal-heartbeat-counterpart-copy { justify-items: start; text-align: left; }
.renewal-heartbeat-paired .renewal-heartbeat-counterpart-copy h2 { font-size: 19px; line-height: 1.4; overflow-wrap: anywhere; }
.renewal-heartbeat-paired .renewal-heartbeat-counterpart-copy p { overflow-wrap: anywhere; }
.renewal-heartbeat-paired .renewal-kicker { font-size: 11px; letter-spacing: 0; }
.renewal-heartbeat-paired .renewal-heartbeat-match-personality { gap: 6px; padding-top: 9px; }
.renewal-heartbeat-paired .renewal-heartbeat-match-personality-summary { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.renewal-heartbeat-paired .renewal-heartbeat-profile-tags { gap: 6px; }
.renewal-heartbeat-paired .renewal-heartbeat-profile-tags span,
.renewal-heartbeat-paired .renewal-heartbeat-match-reasons span { min-width: 0; overflow-wrap: anywhere; }
.renewal-heartbeat-paired .renewal-heartbeat-topic-hint { font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.renewal-heartbeat-paired .renewal-heartbeat-match-card .renewal-heartbeat-match-note-inline { align-content: start; gap: 8px; padding: 12px 18px 14px; text-align: left; }
.renewal-heartbeat-paired .renewal-heartbeat-match-note-head { align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.renewal-heartbeat-paired .renewal-heartbeat-match-note-head h3 { margin: 0; color: var(--renewal-ink); font-size: 14px; line-height: 1.5; }
.renewal-heartbeat-paired .renewal-heartbeat-match-score { display: flex; align-items: baseline; gap: 4px; font-size: 11px; font-weight: 500; }
.renewal-heartbeat-paired .renewal-heartbeat-match-score strong { font-size: 18px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.renewal-heartbeat-paired .renewal-heartbeat-match-card .renewal-heartbeat-match-note-inline > p { display: block; overflow: visible; margin: 0; color: var(--renewal-muted); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.renewal-heartbeat-paired .renewal-heartbeat-match-reasons { gap: 6px; }
.renewal-heartbeat-paired .renewal-heartbeat-match-reasons span { padding: 4px 8px; background: #fff0ee; font-size: 11px; }
.renewal-heartbeat-paired .renewal-heartbeat-tabs { padding-inline: 12px; }
.renewal-heartbeat-paired .renewal-heartbeat-tabs button { min-height: 46px; padding: 10px; font-size: 14px; }
.renewal-heartbeat-paired .renewal-heartbeat-tabs button.active::after { right: 28%; left: 28%; }
.renewal-heartbeat-paired [role="tabpanel"][hidden] { display: none; }
.renewal-heartbeat-paired .renewal-heartbeat-scheduled { display: grid; justify-items: start; gap: 6px; padding: 20px 18px 16px; text-align: left; }
.renewal-heartbeat-paired .renewal-heartbeat-scheduled h3 { margin: 0; color: var(--renewal-ink); font-size: 18px; line-height: 1.4; }
.renewal-heartbeat-paired .renewal-heartbeat-scheduled p { margin: 0; color: var(--renewal-muted); font-size: 13px; line-height: 1.6; }
.renewal-heartbeat-paired .renewal-heartbeat-scheduled small { color: var(--renewal-muted); font-size: 11px; line-height: 1.5; }
.renewal-heartbeat-paired .renewal-heartbeat-card-footnote { margin: 0; padding: 0 18px 16px; border: 0; color: var(--renewal-muted); font-size: 11px; line-height: 1.6; }
.renewal-heartbeat-paired .renewal-heartbeat-manage { flex-wrap: wrap; gap: 0 18px; padding: 8px 16px; border-top: 1px solid #f0deda; }
.renewal-heartbeat-paired .renewal-heartbeat-manage button { min-height: 40px; font-size: 12px; }
.renewal-heartbeat-paired .renewal-chat-header { grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding: 14px 16px; }
.renewal-heartbeat-paired .renewal-heartbeat-content-card .renewal-heartbeat-chat-room { padding: 0; }
.renewal-heartbeat-paired .renewal-chat-header-copy h3 { font-size: 15px; }
.renewal-heartbeat-paired .renewal-chat-header-copy p { font-size: 10px; }
.renewal-heartbeat-paired .renewal-chat-status { grid-column: auto; justify-self: end; margin: 0; white-space: normal; text-align: right; }
.renewal-heartbeat-paired .renewal-heartbeat-composer { grid-template-columns: minmax(0, 1fr) auto; }
.renewal-heartbeat-paired .renewal-heartbeat-composer textarea { width: 100%; min-width: 0; min-height: 48px; margin: 0; padding: 10px 12px; border: 1px solid var(--renewal-rose-line); border-radius: 8px; color: var(--renewal-ink); background: #fff; font: inherit; font-size: 16px; line-height: 1.5; }
.renewal-heartbeat-paired .renewal-heartbeat-composer textarea:focus-visible { outline: 2px solid var(--renewal-rose-deep); outline-offset: 2px; }
.renewal-heartbeat-paired .renewal-heartbeat-composer .renewal-primary { min-width: 64px; min-height: 48px; padding: 10px 12px; }

@media (max-width: 600px) {
  .renewal-shell.renewal-heartbeat-paired { padding: 16px 16px 24px; }
  .renewal-heartbeat-paired .renewal-topbar { gap: 10px; }
  .renewal-heartbeat-paired .renewal-topbar-copy h1 { font-size: 21px; }
  .renewal-heartbeat-paired .renewal-heartbeat-content { padding-top: 16px; }
}

.renewal-heartbeat-day { display: grid; gap: 12px; }
.renewal-heartbeat-day .renewal-day-heading h2 { margin: 4px 0; font-size: 24px; line-height: 1.25; }
.renewal-heartbeat-pager { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.renewal-heartbeat-pager button { pointer-events: auto; }
.renewal-heartbeat-pager .renewal-card-page { position: static; align-self: flex-end; padding-bottom: 1px; }
.renewal-heartbeat-private { margin: 0; color: var(--renewal-teal); font-size: 14px; font-weight: 800; text-align: center; }
.renewal-heartbeat-manage { display: flex; justify-content: center; gap: 16px; padding: 10px 0 4px; }
.renewal-heartbeat-extras { display: grid; gap: 14px; max-width: 560px; margin: 0 auto; }
.renewal-heartbeat-extra-panel { display: grid; gap: 12px; padding: 16px; border: 1px solid #d7e8e4; border-radius: 12px; background: rgba(255, 255, 255, .72); }
.renewal-heartbeat-chat-room { gap: 0; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; }
.renewal-chat-header { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid rgba(196, 93, 107, .16); background: linear-gradient(135deg, rgba(255, 246, 245, .84), rgba(255, 255, 255, .64)); }
.renewal-chat-avatar { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(196, 93, 107, .24); border-radius: 50%; background: #f8dfe0; color: #b64f62; font-size: 15px; font-weight: 900; letter-spacing: 0; box-shadow: 0 8px 16px rgba(196, 93, 107, .1); }
.renewal-chat-header-copy { display: grid; gap: 2px; min-width: 0; }
.renewal-chat-header-copy h3 { margin: 0; color: var(--renewal-ink); font-size: 17px; line-height: 1.3; }
.renewal-chat-header-copy p { margin: 0; color: var(--renewal-muted); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.renewal-chat-status { justify-self: end; padding: 5px 8px; border-radius: 999px; background: #fff0ee; color: #b64f62; font-size: 10px; font-weight: 800; white-space: nowrap; }
.renewal-chat-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 18px 10px; }
.renewal-chat-section-title span { color: var(--renewal-ink); font-size: 18px; font-weight: 900; line-height: 1.3; }
.renewal-chat-section-title small { color: var(--renewal-muted); font-size: 12px; line-height: 1.5; text-align: right; }
.renewal-extra-heading { display: grid; gap: 4px; }
.renewal-extra-heading h3 { margin: 0; color: var(--renewal-ink); font-size: 19px; line-height: 1.3; }
.renewal-extra-heading small,
.renewal-heartbeat-activity small { color: var(--renewal-muted); font-size: 12px; line-height: 1.5; }
.renewal-heartbeat-message-list { display: grid; gap: 8px; max-height: 260px; overflow: auto; padding: 2px; }
.renewal-heartbeat-chat-room .renewal-heartbeat-message-list { min-height: 220px; max-height: 360px; padding: 8px 18px 18px; align-content: start; background: linear-gradient(180deg, rgba(255, 250, 248, .56), rgba(255, 255, 255, .76)); }
.renewal-heartbeat-chat-status-card { display: grid; gap: 3px; margin: 2px 0 8px; padding: 11px 13px; border: 1px solid rgba(196, 93, 107, .2); border-radius: 14px; background: rgba(255, 242, 241, .76); text-align: center; }
.renewal-heartbeat-chat-status-card span { color: #b64f62; font-size: 11px; font-weight: 900; }
.renewal-heartbeat-chat-status-card strong { color: #934656; font-size: 15px; line-height: 1.4; }
.renewal-heartbeat-chat-status-card p { margin: 0; color: var(--renewal-muted); font-size: 11px; line-height: 1.45; }
.renewal-heartbeat-chat-message-row { display: flex; align-items: flex-end; gap: 8px; }
.renewal-heartbeat-chat-message-row.mine { justify-content: flex-end; }
.renewal-heartbeat-message-avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 13px; background: #f2b6bd; color: #fff; font-size: 10px; font-weight: 900; box-shadow: 0 7px 14px rgba(196, 93, 107, .12); }
.renewal-heartbeat-chat-bubble { display: grid; gap: 4px; max-width: min(82%, 430px); padding: 13px 15px; border-radius: 20px 20px 20px 6px; background: #fff; color: var(--renewal-ink); font-size: 15px; line-height: 1.6; box-shadow: 0 10px 22px rgba(110, 63, 69, .08); }
.renewal-heartbeat-chat-message-row.mine .renewal-heartbeat-chat-bubble { border-radius: 20px 20px 6px 20px; background: #c45d6b; color: #fff; }
.renewal-heartbeat-chat-bubble time { color: var(--renewal-muted); font-size: 10px; line-height: 1.3; }
.renewal-heartbeat-chat-message-row.mine .renewal-heartbeat-chat-bubble time { color: rgba(255, 255, 255, .76); }
.renewal-heartbeat-message-list p.empty,
.renewal-heartbeat-activity-list > .empty { display: block; max-width: none; padding: 0; background: transparent; color: var(--renewal-muted); font-size: 13px; }
.renewal-chat-empty { display: grid; justify-items: center; gap: 5px; padding: 14px 8px; text-align: center; }
.renewal-chat-empty strong { color: var(--renewal-ink); font-size: 14px; line-height: 1.4; }
.renewal-chat-empty p { margin: 0; color: var(--renewal-muted); font-size: 12px; line-height: 1.5; }
.renewal-chat-prompts { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 16px 12px; }
.renewal-chat-prompts button { min-height: 32px; padding: 6px 10px; border: 1px solid #efd6d3; border-radius: 999px; background: #fff8f6; color: #b64f62; font: inherit; font-size: 11px; line-height: 1.3; cursor: pointer; }
.renewal-chat-prompts button:hover { border-color: #c45d6b; background: #fff0ee; }
.renewal-heartbeat-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.renewal-heartbeat-composer textarea { min-height: 42px; max-height: 120px; resize: vertical; }
.renewal-heartbeat-composer .renewal-primary { min-width: 72px; }
.renewal-heartbeat-chat-room .renewal-heartbeat-composer { margin: 0 18px; padding: 8px; border: 1px solid rgba(196, 93, 107, .18); border-radius: 999px; background: #fff; box-shadow: 0 10px 24px rgba(110, 63, 69, .1); }
.renewal-heartbeat-chat-room .renewal-heartbeat-composer textarea { min-height: 44px; margin: 0; padding: 10px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--renewal-ink); font-size: 14px; line-height: 1.5; resize: none; }
.renewal-heartbeat-chat-room .renewal-heartbeat-composer textarea:focus-visible { outline: 2px solid rgba(196, 93, 107, .28); outline-offset: -2px; }
.renewal-heartbeat-chat-room .renewal-heartbeat-composer .renewal-primary { min-height: 44px; padding: 8px 16px; border-radius: 999px; background: #c45d6b; }
.renewal-chat-composer-footer { display: flex; justify-content: space-between; gap: 8px; padding: 7px 16px 13px; color: var(--renewal-muted); font-size: 10px; line-height: 1.4; }
.renewal-heartbeat-activity-list { display: grid; gap: 9px; }
.renewal-heartbeat-activity { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid #e2ebe8; border-radius: 10px; background: rgba(255, 255, 255, .8); }
.renewal-heartbeat-activity strong { color: var(--renewal-ink); font-size: 15px; }
.renewal-heartbeat-activity p { margin: 4px 0 0; color: var(--renewal-muted); font-size: 12px; line-height: 1.45; }
.renewal-activity-status { display: block; margin-top: 5px; color: var(--renewal-teal); font-size: 11px; font-weight: 800; }
.renewal-heartbeat-activity-actions { display: grid; justify-items: center; gap: 4px; }
.renewal-heartbeat-activity-actions .renewal-secondary { min-width: 112px; padding: 8px 10px; }
.renewal-activity-attendance { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.renewal-heartbeat-activity-form { display: grid; gap: 9px; padding-top: 4px; border-top: 1px solid #e2ebe8; }
.renewal-heartbeat-activity-form label { display: grid; gap: 5px; color: var(--renewal-muted); font-size: 12px; font-weight: 800; }
.renewal-heartbeat-activity-form input { min-width: 0; min-height: 40px; padding: 8px 10px; border: 1px solid #cde2de; border-radius: 9px; background: #fff; color: var(--renewal-ink); font: inherit; }
.renewal-heartbeat-activity-form > .renewal-primary { justify-self: center; }

.renewal-unified {
  padding-top: 18px;
}

.renewal-unified .renewal-week-line { margin: 18px 0 12px; }

.renewal-day-context {
  margin: 0 0 18px;
  color: var(--renewal-teal);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.renewal-day-embedded {
  padding-top: 0;
}

.renewal-day-inline-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.renewal-day-inline-head strong {
  display: block;
  margin-top: 5px;
  font-size: 22px;
  line-height: 1.2;
}

.renewal-day-inline-head p {
  margin: 3px 0 0;
  color: var(--renewal-muted);
  font-size: 12px;
  line-height: 1.5;
}

.renewal-primary,
.renewal-secondary,
.renewal-share-button {
  min-height: 46px;
  padding: 10px 18px;
  border-radius: 11px;
  font-weight: 800;
}

.renewal-primary {
  border: 1px solid var(--renewal-teal);
  background: var(--renewal-teal);
  color: #fff;
}

.renewal-secondary,
.renewal-share-button {
  border: 1px solid #b8d9d4;
  background: #fff;
  color: var(--renewal-teal);
}

.renewal-primary:disabled,
.renewal-secondary:disabled,
.renewal-share-button:disabled { cursor: default; opacity: .56; }
.renewal-primary:focus-visible,
.renewal-secondary:focus-visible,
.renewal-share-button:focus-visible,
.renewal-back:focus-visible,
.renewal-week-line button:focus-visible,
.renewal-summary-grid button:focus-visible,
.renewal-card-back:focus-visible,
.renewal-text-button:focus-visible { outline: 3px solid rgba(49, 142, 142, .26); outline-offset: 3px; }

.renewal-text-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--renewal-teal);
  font-weight: 800;
}

.renewal-day-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.renewal-deck {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: 8px;
}

.renewal-card-back {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  width: min(100%, 304px);
  aspect-ratio: 4 / 5;
  min-height: 0;
  padding: 26px 22px;
  box-sizing: border-box;
  border: 1.5px solid rgba(67, 143, 136, .5);
  border-radius: 18px;
  color: #3f3025;
  background:
    radial-gradient(circle at 84% 14%, rgba(233, 134, 114, .17), transparent 34%),
    radial-gradient(circle at 16% 88%, rgba(67, 143, 136, .14), transparent 38%),
    linear-gradient(154deg, #fffefa 0%, #eef8f4 58%, #fff5e9 100%);
  box-shadow:
    0 20px 40px -30px rgba(67, 143, 136, .48),
    0 12px 24px -22px rgba(143, 91, 43, .24);
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

.renewal-card-back::before {
  position: absolute;
  width: 174px;
  height: 174px;
  border: 1px solid rgba(67, 143, 136, .14);
  border-radius: 50%;
  background: radial-gradient(circle, transparent 0 56px, rgba(67, 143, 136, .055) 57px 58px, transparent 59px);
  content: "";
  opacity: .9;
  transform: rotate(-8deg);
  pointer-events: none;
}

.renewal-card-back > * {
  position: relative;
  z-index: 1;
}

.renewal-card-back:hover {
  transform: translateY(-4px);
  box-shadow:
    0 24px 44px -30px rgba(67, 143, 136, .56),
    0 14px 26px -22px rgba(143, 91, 43, .28);
}

.renewal-card-back:active { transform: translateY(0) scale(.985); }

.renewal-card-back:focus-visible {
  outline: 3px solid rgba(217, 154, 82, .34);
  outline-offset: 4px;
}

.renewal-card-corner {
  position: absolute;
  color: rgba(91, 65, 42, .56);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
  pointer-events: none;
}

.renewal-card-corner-top {
  top: 22px;
  left: 22px;
  max-width: calc(100% - 44px);
  text-align: left;
}

.renewal-card-corner-bottom {
  right: 22px;
  bottom: 22px;
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.renewal-card-medallion {
  position: relative;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border: 1px solid rgba(67, 143, 136, .36);
  border-radius: 24px;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .96), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 252, .98), rgba(240, 248, 244, .92));
  box-shadow:
    inset 0 0 0 6px rgba(255, 255, 255, .64),
    0 12px 24px -18px rgba(67, 143, 136, .4);
}

.renewal-card-medallion::before {
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(67, 143, 136, .38);
  border-radius: 18px;
  content: "";
  transform: rotate(7deg);
}

.renewal-card-medallion::after {
  position: absolute;
  inset: 13px;
  border: 1px solid rgba(233, 134, 114, .2);
  border-radius: 50%;
  content: "";
}

.renewal-card-mark {
  color: #438f88;
  font-family: Georgia, serif;
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
}

.renewal-card-back-index { color: rgba(86, 69, 51, .62); font-size: 11px; font-weight: 800; letter-spacing: .06em; }

.renewal-card-back strong {
  display: block;
  width: 100%;
  max-width: 214px;
  justify-self: center;
  font-size: 21px;
  line-height: 1.28;
  text-shadow: 0 1px rgba(255, 255, 255, .54);
}

.renewal-card-back small {
  max-width: 220px;
  color: rgba(86, 69, 51, .74);
  font-size: 12px;
  line-height: 1.65;
}

.renewal-section-label {
  margin-bottom: 10px;
  color: var(--renewal-teal);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
}

.renewal-revealed-list,
.renewal-selected-area { margin-top: 24px; }

.renewal-deck-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.renewal-deck-actions .renewal-primary,
.renewal-deck-actions .renewal-secondary { min-width: 118px; }

.renewal-card-carousel-wrap {
  position: relative;
  width: min(100%, 380px);
  margin: 0 auto;
  padding-bottom: 22px;
  box-sizing: border-box;
}

.renewal-card-carousel {
  display: flex;
  width: 100%;
  overflow-x: auto;
  /* Keep programmatic arrow changes and touch scrolling on the same state. */
  scroll-behavior: auto;
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}

.renewal-card-carousel::-webkit-scrollbar { display: none; }

.renewal-card-slide {
  display: flex;
  flex: 0 0 100%;
  min-width: 0;
  justify-content: center;
  scroll-snap-align: center;
}

.renewal-card-arrow {
  position: absolute;
  top: calc(50% - 22px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(67, 143, 136, .28);
  border-radius: 50%;
  background: rgba(255, 253, 247, .9);
  color: var(--renewal-teal);
  font: 28px/1 Georgia, serif;
  box-shadow: 0 8px 18px rgba(67, 143, 136, .12);
  cursor: pointer;
}

.renewal-card-arrow-prev { left: 2px; }
.renewal-card-arrow-next { right: 2px; }
.renewal-card-arrow:disabled { cursor: default; opacity: .28; }
.renewal-card-arrow:focus-visible { outline: 3px solid rgba(49, 142, 142, .26); outline-offset: 3px; }

.renewal-card-page {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  color: var(--renewal-muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.renewal-task-card {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  width: min(100%, 312px);
  aspect-ratio: 4 / 5;
  min-height: 0;
  margin: 0 auto;
  padding: 28px 24px;
  box-sizing: border-box;
  border: 1.5px solid rgba(196, 91, 107, .5);
  border-radius: 18px;
  color: #3f3025;
  background:
    radial-gradient(circle at 86% 14%, rgba(233, 134, 114, .18), transparent 34%),
    radial-gradient(circle at 16% 88%, rgba(196, 91, 107, .12), transparent 38%),
    linear-gradient(154deg, #fffefa 0%, #fff2f1 58%, #fff5e9 100%);
  box-shadow:
    0 20px 40px -30px rgba(196, 91, 107, .5),
    0 12px 24px -22px rgba(143, 91, 43, .24);
  overflow: hidden;
  text-align: center;
}

.renewal-task-card::before {
  position: absolute;
  width: 170px;
  height: 170px;
  border: 1px solid rgba(196, 91, 107, .14);
  border-radius: 50%;
  background: radial-gradient(circle, transparent 0 56px, rgba(196, 91, 107, .055) 57px 58px, transparent 59px);
  content: "";
  opacity: .9;
  transform: rotate(-8deg);
  pointer-events: none;
}

.renewal-task-card > * { position: relative; z-index: 1; }

.renewal-task-card-head { display: grid; justify-items: center; gap: 8px; }

.renewal-task-card-index {
  color: rgba(86, 69, 51, .62);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
}

.renewal-task-card-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  color: #b74f61;
  font-size: 12px;
  font-weight: 800;
}

.renewal-task-card-meta span + span::before { content: "·"; margin-right: 8px; color: #d59aa4; }

.renewal-task-card h2 {
  width: 100%;
  max-width: 252px;
  margin: 0;
  font-size: 23px;
  line-height: 1.28;
  text-wrap: balance;
  text-shadow: 0 1px rgba(255, 255, 255, .62);
}

.renewal-task-card p {
  max-width: 250px;
  margin: 0;
  color: rgba(86, 69, 51, .78);
  font-size: 13px;
  line-height: 1.65;
}

.renewal-task-card small {
  max-width: 250px;
  color: #b74f61;
  font-size: 11px;
  line-height: 1.55;
}

.renewal-task-card.selected { border-color: rgba(196, 91, 107, .76); }

.renewal-shared-task-note {
  margin: 0 auto;
  color: #b74f61;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
}

.renewal-task-switcher {
  display: grid;
  gap: 8px;
}

.renewal-task-switch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d8e6e2;
  border-radius: 10px;
  background: #fff;
  color: var(--renewal-ink);
  text-align: left;
  cursor: pointer;
}

.renewal-task-switch > span,
.renewal-task-switch > small { color: var(--renewal-teal); font-size: 11px; font-weight: 800; }
.renewal-task-switch > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.renewal-task-switch > small { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.renewal-task-switch.active { border-color: #6dbab3; background: var(--renewal-soft); }
.renewal-task-switch:disabled { cursor: default; opacity: .72; }

.renewal-task,
.renewal-selected-task {
  margin-top: 10px;
  padding: 18px;
  border: 1px solid #d8e6e2;
  border-radius: 12px;
  background: #fff;
}

.renewal-task.selected { border-color: #6dbab3; background: #eff8f5; }
.renewal-task-meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--renewal-teal); font-size: 12px; font-weight: 800; }
.renewal-task-meta span + span::before { content: "·"; margin-right: 8px; color: #9cb3ae; }
.renewal-task h2,
.renewal-selected-task h2 { margin: 10px 0 7px; font-size: 20px; line-height: 1.35; }
.renewal-task p,
.renewal-selected-task p { margin: 0; color: var(--renewal-muted); line-height: 1.6; }
.renewal-selected-task small { display: block; margin-top: 14px; color: var(--renewal-teal); line-height: 1.5; }
.renewal-task .renewal-secondary { margin-top: 16px; }
.renewal-task .renewal-secondary,
.renewal-summary > .renewal-secondary {
  display: block;
  margin-inline: auto;
}
.renewal-task.selected .renewal-secondary { display: none; }
.renewal-action-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.renewal-completed-note { margin-top: 18px; color: var(--renewal-teal); font-weight: 800; }

.renewal-completed-actions { margin-top: 14px; }

.renewal-record-heading { margin-bottom: 10px; }
.renewal-record-heading h2 { margin: 4px 0 0; font-size: 20px; line-height: 1.3; }

.renewal-record-dialog textarea,
.renewal-confirm-card input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d8e6e2;
  border-radius: 10px;
  background: #fff;
  color: var(--renewal-ink);
  font: inherit;
}

.renewal-record-dialog textarea { min-height: 112px; padding: 13px; resize: vertical; line-height: 1.6; }
.renewal-record-dialog textarea:focus,
.renewal-confirm-card input:focus { outline: 3px solid rgba(49, 142, 142, .15); border-color: #6dbab3; }
.renewal-moods { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 10px; }
.renewal-moods button { padding: 7px 10px; border: 1px solid #d8e6e2; border-radius: 999px; background: #fff; color: var(--renewal-muted); font: inherit; cursor: pointer; }
.renewal-moods button.active { border-color: #6dbab3; background: var(--renewal-soft); color: var(--renewal-teal); }
.renewal-record-actions { display: flex; width: 100%; box-sizing: border-box; flex-wrap: nowrap; align-items: center; justify-content: center; column-gap: 12px; margin-top: 12px; }
.renewal-record-actions > button { flex: 0 0 auto; margin: 0; white-space: nowrap; }
.renewal-share-status { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 18px; color: var(--renewal-muted); font-size: 14px; text-align: center; }
.renewal-share-button { margin-top: 0; }

.renewal-record-dialog-backdrop {
  position: fixed;
  z-index: 1100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  box-sizing: border-box;
  background: rgba(30, 48, 43, .42);
  backdrop-filter: blur(4px);
  overscroll-behavior: contain;
  touch-action: none;
}

.renewal-record-dialog {
  width: min(100%, 520px);
  max-height: calc(100dvh - 40px);
  padding: 22px;
  overflow-y: auto;
  box-sizing: border-box;
  border: 1px solid rgba(126, 194, 187, .78);
  border-radius: 16px;
  background: linear-gradient(145deg, #fffefa 0%, #f3fbf7 54%, #fff4e9 100%);
  box-shadow: 0 24px 64px rgba(24, 48, 42, .3);
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.renewal-record-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.renewal-record-dialog-close {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #d1e3df;
  border-radius: 50%;
  background: rgba(255, 255, 255, .84);
  color: var(--renewal-teal);
  font: 28px/1 Arial, sans-serif;
  cursor: pointer;
}
.renewal-record-dialog-close:focus-visible { outline: 3px solid rgba(49, 142, 142, .26); outline-offset: 2px; }
.renewal-record-share-confirm {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #b8d9d4;
  border-radius: 12px;
  background: rgba(237, 248, 245, .9);
}
.renewal-record-share-confirm h3 { margin: 0 0 6px; font-size: 17px; }
.renewal-record-share-confirm p { margin: 0; color: var(--renewal-muted); font-size: 14px; line-height: 1.55; }

.renewal-confirm {
  margin-top: 20px;
  padding: 14px;
  border: 1px solid #b8d9d4;
  border-radius: 14px;
  background: #edf8f5;
}

.renewal-confirm-card { max-width: 560px; margin: 0 auto; }
.renewal-confirm-card h2 { margin: 0 0 8px; font-size: 21px; }
.renewal-confirm-card p { margin: 0; color: var(--renewal-muted); line-height: 1.6; }
.renewal-confirm-card label { display: block; margin-top: 14px; color: var(--renewal-muted); font-size: 13px; font-weight: 800; }
.renewal-confirm-card input { display: block; min-height: 44px; margin-top: 6px; padding: 9px 11px; }

.renewal-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 30px 0; }
.renewal-summary-grid button { text-align: center; padding: 14px; }
.renewal-summary-grid button b { font-size: 15px; }
.renewal-summary-grid button span { margin-top: 6px; color: var(--renewal-muted); font-size: 12px; }

.treehole-renewal-entry {
  margin: 16px 0;
  --th-brand: #5fa8a3;
  --th-brand-deep: #347e79;
  align-items: center;
}

.treehole-renewal-entry .treehole-guide-body {
  flex: 1 1 auto;
  min-width: 0;
}

.treehole-renewal-entry .treehole-guide-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.treehole-renewal-entry .treehole-renewal-plan-cta {
  position: static;
  flex: 0 0 auto;
  align-self: center;
  width: auto;
  min-height: 32px;
  margin: 0;
  text-align: center;
}

.treehole-mobile .treehole-renewal-entry {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
}

.treehole-mobile .treehole-renewal-entry .treehole-renewal-plan-cta {
  position: static;
  flex: 0 0 auto;
  align-self: center;
  width: auto;
  margin: 0;
}

.treehole-renewal-entry .treehole-guide-moods { scrollbar-width: none; }
.treehole-renewal-entry .treehole-guide-moods::-webkit-scrollbar { display: none; }
.treehole-renewal-theme {
  cursor: default;
}
.treehole-renewal-theme:hover { transform: none; background: rgba(255, 255, 255, .76); }
.treehole-renewal-theme:not(:disabled) { cursor: pointer; }
.treehole-renewal-theme:disabled { cursor: default; opacity: .52; }
.treehole-renewal-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}
.treehole-renewal-actions .treehole-guide-cta {
  white-space: nowrap;
}
.treehole-renewal-write-cta {
  border: 1px solid rgba(95, 168, 163, .32);
  color: var(--th-brand-deep, #347e79);
  background: rgba(255, 255, 255, .78);
  box-shadow: none;
}
.treehole-renewal-write-cta:hover { background: #fff; box-shadow: 0 10px 20px rgba(95, 168, 163, .16); }

@media (max-width: 640px) {
  .treehole-renewal-entry {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
  }

  .treehole-renewal-entry .treehole-renewal-plan-cta {
    position: static;
    flex: 0 0 auto;
    width: auto;
    margin: 0;
  }

  .treehole-renewal-entry .treehole-renewal-actions {
    width: 100%;
    margin-top: 4px;
  }
  .treehole-renewal-entry .treehole-renewal-actions .treehole-guide-cta {
    position: static;
    width: auto;
    flex: 1 1 0;
    min-height: 32px;
    margin: 0;
    padding: 7px 10px;
    font-size: 11.5px;
    text-align: center;
  }
}

@media (max-width: 600px) {
  .renewal-shell { padding: 14px 18px 32px; }
  .renewal-heartbeat-form { padding: 18px; }
  .renewal-heartbeat-form h2 { font-size: 22px; }
  .renewal-choice-row { gap: 8px; }
  .renewal-choice-row button { flex-basis: 96px; min-height: 44px; padding-inline: 10px; }
  .renewal-home, .renewal-day, .renewal-summary { padding-top: 22px; }
  .renewal-home.renewal-unified { padding-top: 16px; }
  .renewal-topbar { gap: 10px; }
  .renewal-back { width: 38px; height: 38px; font-size: 27px; }
  .renewal-topbar-copy h1 { font-size: 20px; }
  .renewal-topbar-copy p { margin-top: 2px; font-size: 12px; }
  .renewal-topbar-copy .renewal-kicker { font-size: 10px; }
  .renewal-progress-chip { padding: 6px 9px; font-size: 11px; }
  .renewal-intro h1 { font-size: 27px; }
  .renewal-day-heading h1, .renewal-summary h1 { font-size: 31px; }
  .renewal-intro p, .renewal-day-heading p, .renewal-summary > p { font-size: 14px; }
  .renewal-week-line { gap: 5px; margin: 16px 0 10px; }
  .renewal-unified .renewal-week-line { margin: 16px 0 10px; }
  .renewal-week-line button { min-height: 46px; padding: 6px 3px; }
  .renewal-week-line button b { font-size: 15px; }
  .renewal-week-line button span { font-size: 9px; }
  .renewal-day-heading { gap: 8px; }
  .renewal-day-context { margin-bottom: 16px; font-size: 11px; }
  .renewal-day-embedded { padding-top: 0; }
  .renewal-day-inline-head { align-items: flex-start; margin-bottom: 8px; }
  .renewal-day-inline-head strong { font-size: 17px; }
  .renewal-day-inline-head p { margin-top: 2px; font-size: 12px; }
  .renewal-deck { gap: 10px; margin-top: 6px; }
  .renewal-card-back,
  .renewal-task-card { width: min(100%, 292px); }
  .renewal-card-back { padding: 22px 18px; }
  .renewal-card-medallion { width: 84px; height: 84px; }
  .renewal-card-mark { font-size: 38px; }
  .renewal-card-back strong { max-width: 204px; font-size: 19px; }
  .renewal-card-back small { max-width: 204px; font-size: 11px; }
  .renewal-task-card { gap: 12px; padding: 24px 20px; }
  .renewal-task-card h2 { max-width: 234px; font-size: 21px; }
  .renewal-task-card p { max-width: 234px; font-size: 12px; }
  .renewal-task-card small { max-width: 234px; font-size: 10px; }
  .renewal-record-heading h2 { font-size: 18px; }
  .renewal-record-dialog-backdrop { padding: 14px; }
  .renewal-record-dialog { max-height: calc(100dvh - 28px); padding: 18px; }
  .renewal-record-dialog textarea { min-height: 104px; }
  .renewal-deck-actions .renewal-primary,
  .renewal-deck-actions .renewal-secondary { min-width: 108px; min-height: 42px; padding: 8px 12px; }
}

@media (max-width: 420px) {
  .renewal-payment-heading { align-items: flex-start; }
  .renewal-payment-heading strong { font-size: 22px; }
  .renewal-payment-option { flex: 1 1 130px; }
  .renewal-heartbeat-match-note { text-align: center; }
  .renewal-heartbeat-match-note-head { align-items: center; }
  .renewal-heartbeat-match-card .renewal-heartbeat-counterpart-head { grid-template-columns: auto minmax(0, 1fr); justify-items: stretch; padding: 16px 16px 13px; text-align: left; }
  .renewal-heartbeat-match-card .renewal-heartbeat-match-note-inline { padding: 14px 16px 16px; border-top: 0; border-left: 0; text-align: left; }
  .renewal-heartbeat-match-card .renewal-heartbeat-match-note-head { align-items: flex-start; }
  .renewal-heartbeat-content-card .renewal-heartbeat-tab-panel { padding: 16px; }
  .renewal-heartbeat-content-card .renewal-heartbeat-extra-panel { padding-inline: 16px; }
  .renewal-heartbeat-card-footnote { padding-inline: 16px; }
  .renewal-heartbeat-content-card .renewal-heartbeat-manage { padding-inline: 16px; }
  .renewal-chat-header { grid-template-columns: 38px minmax(0, 1fr); align-items: start; padding: 13px 16px; }
  .renewal-chat-avatar { width: 38px; height: 38px; font-size: 13px; }
  .renewal-chat-status { grid-column: 2; justify-self: start; margin: 4px 0 0; }
  .renewal-chat-section-title { align-items: flex-start; flex-direction: column; gap: 4px; padding-inline: 16px; }
  .renewal-chat-section-title small { text-align: left; }
  .renewal-heartbeat-chat-room .renewal-heartbeat-message-list { padding-inline: 16px; }
  .renewal-heartbeat-chat-room .renewal-heartbeat-composer { margin-inline: 16px; }
  .renewal-heartbeat-counterpart { grid-template-columns: 1fr; justify-items: center; padding: 15px; text-align: center; }
  .renewal-heartbeat-counterpart-copy { justify-items: center; }
  .renewal-heartbeat-time { grid-template-columns: minmax(0, 1fr); }
  .renewal-heartbeat-manage { gap: 10px; }
  .renewal-heartbeat-day .renewal-day-heading h2 { font-size: 22px; }
  .renewal-heartbeat-composer { grid-template-columns: minmax(0, 1fr); }
  .renewal-heartbeat-composer .renewal-primary { justify-self: center; }
  .renewal-heartbeat-activity { grid-template-columns: minmax(0, 1fr); }
  .renewal-heartbeat-activity-actions { justify-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .renewal-shell *, .renewal-shell *::before, .renewal-shell *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* HEARTBEAT uses one warm coral-rose action language across every state. */
.renewal-shell {
  --renewal-ink: #342d2d;
  --renewal-muted: #756e6a;
  --renewal-teal: #c45d6b;
  --renewal-rose-deep: #a84b5b;
  --renewal-soft: #f9e5e6;
  --renewal-rose-line: #e7c1c7;
  --renewal-rose-focus: rgba(196, 93, 107, .24);
}

.renewal-shell .renewal-back,
.renewal-shell .renewal-primary,
.renewal-shell .renewal-secondary,
.renewal-shell .renewal-share-button,
.renewal-shell .renewal-text-button,
.renewal-shell .renewal-card-arrow,
.renewal-shell .renewal-week-line button,
.renewal-shell .renewal-summary-grid button {
  color: var(--renewal-teal);
}

.renewal-shell .renewal-back {
  border-color: var(--renewal-rose-line);
}

.renewal-shell .renewal-primary {
  border-color: var(--renewal-rose-deep);
  background: var(--renewal-teal);
  color: #fff;
}

.renewal-shell .renewal-primary:hover {
  border-color: #963f50;
  background: var(--renewal-rose-deep);
}

.renewal-shell .renewal-secondary,
.renewal-shell .renewal-share-button {
  border-color: var(--renewal-rose-line);
  background: #fff;
  color: var(--renewal-rose-deep);
}

.renewal-shell .renewal-text-button {
  color: var(--renewal-rose-deep);
}

.renewal-shell .renewal-choice-row button,
.renewal-shell .renewal-moods button {
  border-color: var(--renewal-rose-line);
}

.renewal-shell .renewal-choice-row button:hover,
.renewal-shell .renewal-moods button:hover {
  border-color: #d27884;
  color: var(--renewal-rose-deep);
}

.renewal-shell .renewal-choice-row button.active,
.renewal-shell .renewal-moods button.active {
  border-color: var(--renewal-teal);
  background: var(--renewal-soft);
  color: var(--renewal-rose-deep);
}

.renewal-shell .renewal-week-line button,
.renewal-shell .renewal-summary-grid button {
  border-color: var(--renewal-rose-line);
}

.renewal-shell .renewal-week-line button.done,
.renewal-shell .renewal-summary-grid button.done {
  border-color: #d88993;
  background: var(--renewal-soft);
  color: var(--renewal-rose-deep);
}

.renewal-shell .renewal-week-line button.today {
  border-color: var(--renewal-teal);
}

.renewal-shell .renewal-card-arrow {
  border-color: rgba(196, 93, 107, .3);
  color: var(--renewal-teal);
  box-shadow: 0 8px 18px rgba(168, 75, 91, .12);
}

.renewal-shell .renewal-consent input {
  accent-color: var(--renewal-teal);
}

.renewal-shell .renewal-record-dialog textarea:focus,
.renewal-shell .renewal-confirm-card input:focus,
.renewal-shell .renewal-age-row input:focus {
  outline-color: var(--renewal-rose-focus);
  border-color: #d27884;
}

.renewal-shell .renewal-record-dialog-close {
  border-color: var(--renewal-rose-line);
  color: var(--renewal-rose-deep);
}

.renewal-referral-card,
.renewal-referral-landing {
  width: min(100%, 720px);
  margin: 18px auto 0;
  padding: 18px 20px;
  border: 1px solid var(--renewal-rose-line);
  border-left: 4px solid var(--renewal-teal);
  border-radius: 16px;
  background: rgba(255, 248, 247, .94);
  box-shadow: 0 12px 28px rgba(168, 75, 91, .08);
}

.renewal-referral-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.renewal-referral-head h3 { margin: 3px 0 0; color: var(--renewal-ink); font-size: 22px; }
.renewal-referral-count { flex: 0 0 auto; padding: 6px 10px; border-radius: 999px; background: var(--renewal-soft); color: var(--renewal-rose-deep); font-size: 16px; }
.renewal-referral-copy { margin: 12px 0 14px; color: var(--renewal-muted); line-height: 1.65; }
.renewal-referral-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.renewal-referral-actions button { min-height: 42px; }
.renewal-referral-link, .renewal-referral-hint { display: block; margin: 10px 0 0; color: var(--renewal-rose-deep); font-size: 13px; }
.renewal-referral-list { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(231, 193, 199, .72); }
.renewal-referral-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: 10px; background: #fff; color: var(--renewal-muted); font-size: 13px; }
.renewal-referral-status { color: var(--renewal-rose-deep); }
.renewal-referral-status.is-rewarded { color: #3d9070; }
.renewal-referral-status.is-failed { color: #b25b5b; }
.renewal-referral-landing { margin-top: 0; text-align: left; }
.renewal-referral-landing h2 { margin: 4px 0 8px; color: var(--renewal-ink); font-size: clamp(22px, 5vw, 30px); }
.renewal-referral-landing p { margin: 0 0 8px; color: var(--renewal-muted); line-height: 1.65; }
.renewal-referral-landing small { color: var(--renewal-rose-deep); }

@media (max-width: 520px) {
  .renewal-referral-card, .renewal-referral-landing { padding: 16px; }
  .renewal-referral-head h3 { font-size: 20px; }
  .renewal-referral-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .renewal-referral-actions button { width: 100%; }
}

/* Keep recovered invitation URLs readable at mobile widths. */
.renewal-referral-link input { display: block; box-sizing: border-box; width: 100%; min-width: 0; margin-top: 6px; padding: 8px; font-size: 12px; }
.renewal-referral-item { flex-wrap: wrap; }

/* Seven-day experience: clear stages, readable text and a persistent workspace. */
#renewalView .renewal-shell { --renewal-ink:#302c2b; --renewal-muted:#655c59; --renewal-rose-deep:#923f51; --renewal-rose:#a84b60; --renewal-teal:#923f51; color:var(--renewal-ink); font-size:15px; line-height:1.6; }
#renewalView .renewal-topbar h1 { font-size:24px; letter-spacing:-.5px; }
#renewalView .renewal-topbar p { font-size:14px; color:#655c59; }
#renewalView .renewal-kicker { color:#923f51; font-size:12px; letter-spacing:.07em; }
#renewalView .renewal-primary { min-height:46px; padding:11px 22px; background:#923f51; color:#fff; font-size:15px; border:1px solid #923f51; box-shadow:none; }
#renewalView .renewal-secondary { min-height:44px; padding:10px 18px; color:#74303f; background:#fff; border:1px solid #b9939b; font-size:14px; }
#renewalView .renewal-text-button { min-height:44px; padding:8px 10px; color:#84364a; font-size:14px; }
#renewalView button:disabled { opacity:.5; cursor:default; }
#renewalView :is(button,input,textarea,summary):focus-visible { outline:3px solid #63578d; outline-offset:3px; }
#renewalView small { font-size:12px; line-height:1.5; color:#655c59; }
#renewalView summary { cursor:pointer; min-height:44px; padding:10px 0; font-weight:600; }
#renewalView .heartbeat-enrollment { max-width:620px; margin:0 auto; display:grid; gap:18px; }
#renewalView .heartbeat-intro h2 { font-size:26px; line-height:1.35; margin:0 0 10px; letter-spacing:-.5px; }
#renewalView .heartbeat-intro p { margin:0; font-size:15px; color:#655c59; }
#renewalView .heartbeat-journey { display:flex; gap:8px; list-style:none; padding:0; margin:20px 0 0; }
#renewalView .heartbeat-journey li { flex:1; display:grid; gap:4px; border-top:2px solid #d9a5b1; padding:10px 0; font-size:14px; }
#renewalView .heartbeat-journey span { color:#923f51; font-size:12px; }
#renewalView .heartbeat-schedule { padding:14px 16px; background:#faf3f0; border-radius:12px; font-size:14px; }
#renewalView .heartbeat-schedule p { margin:3px 0; }
#renewalView .heartbeat-steps { display:flex; list-style:none; padding:0; margin:0; gap:12px; }
#renewalView .heartbeat-steps li { flex:1; font-size:13px; color:#655c59; display:flex; gap:7px; align-items:center; }
#renewalView .heartbeat-steps b { display:grid; place-items:center; width:26px; height:26px; flex-shrink:0; border:1px solid #b9939b; border-radius:50%; font-size:12px; }
#renewalView .heartbeat-steps [aria-current=step] { color:#923f51; font-weight:700; }
#renewalView .heartbeat-steps .is-done b { color:#fff; background:#526a58; border-color:#526a58; }
#renewalView .heartbeat-preparation h3 { margin:0 0 6px; font-size:18px; }
#renewalView .heartbeat-preparation p { margin:0; color:#655c59; font-size:14px; }
#renewalView .heartbeat-rules { border-top:1px solid #e4d5d7; font-size:13px; }
#renewalView .heartbeat-rules ul { padding-left:20px; margin:0 0 12px; }
#renewalView .heartbeat-rules li { margin:8px 0; }
#renewalView .heartbeat-enroll-action { position:sticky; bottom:-1px; background:#fffdfa; padding:12px 0 max(14px,env(safe-area-inset-bottom)); border-top:1px solid #e4d5d7; z-index:2; }
#renewalView .heartbeat-enroll-action .renewal-primary { width:100%; }
#renewalView .renewal-consent { margin:0 0 12px; font-size:13px; line-height:1.6; display:flex; align-items:flex-start; gap:10px; }
#renewalView .renewal-consent input { width:20px; height:20px; flex-shrink:0; margin-top:2px; accent-color:#923f51; }
#renewalView .renewal-payment-panel { padding:14px 16px; border:1px solid #e4d5d7; background:#fffaf8; border-radius:12px; margin:0; }
#renewalView .renewal-payment-heading { display:flex; justify-content:space-between; gap:12px; }
#renewalView .renewal-payment-option { min-height:44px; margin:4px; font-size:14px; padding:8px 12px; }
#renewalView .heartbeat-payable { display:flex; justify-content:space-between; border-top:1px solid #e4d5d7; padding-top:10px; }
#renewalView .heartbeat-payable strong { font-size:22px; color:#923f51; }
#renewalView .heartbeat-workspace { display:grid; grid-template-columns:minmax(180px,220px) minmax(0,1fr); gap:18px; align-items:start; }
#renewalView .heartbeat-person { grid-column:1; display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:18px; border:1px solid #e4d5d7; border-radius:16px; background:#fffaf8; }
#renewalView .heartbeat-person h2 { margin:0; font-size:18px; }
#renewalView .heartbeat-person p { margin:3px 0; font-size:13px; color:#655c59; }
#renewalView .heartbeat-person-mark { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:#f4dce2; color:#74303f; font-size:15px; font-weight:700; }
#renewalView .heartbeat-manage { width:100%; font-size:13px; border-top:1px solid #e4d5d7; }
#renewalView .heartbeat-main-panel { grid-column:2; grid-row:1/span 3; min-width:0; border:1px solid #e4d5d7; border-radius:16px; overflow:hidden; background:#fff; }
#renewalView .heartbeat-insight, #renewalView .heartbeat-ending { grid-column:1; padding:16px; background:#faf3f0; border-radius:12px; font-size:14px; }
#renewalView .heartbeat-insight h3, #renewalView .heartbeat-ending h3 { font-size:16px; margin:0 0 8px; }
#renewalView .renewal-heartbeat-tabs { display:flex; padding:0; margin:0; border-bottom:1px solid #e4d5d7; background:#fffaf8; }
#renewalView .renewal-heartbeat-tabs button { min-height:48px; font-size:15px; flex:1; border-radius:0; color:#655c59; background:transparent; }
#renewalView .renewal-heartbeat-tabs [aria-selected=true] { color:#923f51; font-weight:700; box-shadow:inset 0 -3px #923f51; }
#renewalView [role=tabpanel][hidden] { display:none!important; }
#renewalView #heartbeat-tasks-panel { padding:18px; }
#renewalView .renewal-week-line { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; margin:0 0 16px; }
#renewalView .renewal-week-line button { min-height:46px; min-width:0; padding:4px; font-size:14px; background:#fff; color:#655c59; }
#renewalView .renewal-week-line .today { color:#923f51; border-color:#923f51; }
#renewalView .renewal-week-line span { font-size:11px; }
#renewalView .heartbeat-task-compact { padding:16px 0; }
#renewalView .heartbeat-task-compact h2 { font-size:22px; line-height:1.4; margin:8px 0 12px; }
#renewalView .heartbeat-task-compact p { font-size:15px; margin:10px 0; }
#renewalView .heartbeat-task-meta { font-size:13px!important; color:#655c59; }
#renewalView .renewal-action-row { display:flex; gap:10px; flex-wrap:wrap; margin:16px 0; }
#renewalView .heartbeat-record-entry { display:flex; gap:6px; align-items:center; border-top:1px solid #e4d5d7; margin-top:14px; padding-top:6px; }
#renewalView .heartbeat-completion { color:#42604a; }
#renewalView .heartbeat-task-choices button { display:block; width:100%; margin:8px 0; text-align:left; }
#renewalView .heartbeat-recap ol { padding-left:20px; }
#renewalView .heartbeat-recap li { padding:10px 0; }
#renewalView .heartbeat-recap li > * { display:block; }
#renewalView .heartbeat-recap h2 { font-size:21px; }
#renewalView .heartbeat-recap li span, #renewalView .heartbeat-readonly { font-size:13px; color:#655c59; }
#renewalView .renewal-heartbeat-extras { display:block; padding:0; margin:0; }
#renewalView .renewal-heartbeat-chat-room { padding:16px; margin:0; border:0; background:#fff; }
#renewalView .renewal-heartbeat-message-list { min-height:220px; max-height:42dvh; overflow:auto; padding:0; }
#renewalView .renewal-heartbeat-chat-status-card { padding:10px 14px; margin:0 0 14px; background:#faf3f0; border:0; text-align:left; }
#renewalView .renewal-heartbeat-chat-status-card strong { font-size:15px; }
#renewalView .renewal-heartbeat-chat-status-card p { font-size:13px; }
#renewalView .renewal-heartbeat-chat-bubble { font-size:15px; line-height:1.6; box-shadow:none; border:1px solid #eee4e6; overflow-wrap:anywhere; }
#renewalView .renewal-heartbeat-chat-bubble time { font-size:12px; }
#renewalView .renewal-chat-prompts button { min-height:44px; font-size:13px; }
#renewalView .renewal-heartbeat-composer { border:1px solid #baa5a9; border-radius:14px; box-shadow:none; padding:8px; background:#fff; }
#renewalView .renewal-heartbeat-composer textarea { min-height:52px; padding:6px; font-size:16px; line-height:1.5; }
#renewalView .renewal-chat-composer-footer small { font-size:12px; line-height:1.5; }
#renewalView .heartbeat-invitation-fold { margin-top:16px; border-top:1px solid #e4d5d7; font-size:14px; }
#renewalView .renewal-referral-actions { flex-wrap:wrap; }
#renewalView .renewal-record-dialog { max-width:480px; width:calc(100% - 24px); }
#renewalView .renewal-record-dialog textarea { font-size:16px; }
#renewalView .renewal-record-dialog button { min-height:44px; }
@media(min-width:900px) {
  #renewalView:has(.heartbeat-enrollment) #webRenewalRoot { max-width:720px; }
  #renewalView:has(.heartbeat-workspace) #webRenewalRoot { width:min(1120px,calc(100vw - 64px)); max-width:1120px; }
  #renewalView:has(.heartbeat-workspace) .renewal-shell { padding:24px; }
}
@media(max-width:899px) {
  #renewalView .renewal-shell { padding:16px; }
  #renewalView .renewal-topbar { gap:10px; padding:0 0 14px; margin-bottom:14px; }
  #renewalView .renewal-topbar h1 { font-size:21px; }
  #renewalView .renewal-topbar p { font-size:13px; }
  #renewalView .renewal-progress-chip { font-size:12px; padding:5px 8px; white-space:nowrap; }
  #renewalView .heartbeat-intro h2 { font-size:23px; }
  #renewalView .heartbeat-workspace { display:flex; flex-direction:column; gap:10px; min-height:0; }
  #renewalView .heartbeat-person { width:100%; box-sizing:border-box; padding:10px 12px; gap:8px; border:0; border-radius:0; background:transparent; }
  #renewalView .heartbeat-person h2 { font-size:16px; }
  #renewalView .heartbeat-person .renewal-text-button { margin-left:auto; }
  #renewalView .heartbeat-manage { border:0; width:auto; }
  #renewalView .heartbeat-manage[open] { width:100%; }
  #renewalView .heartbeat-person-mark { width:34px; height:34px; }
  #renewalView .heartbeat-main-panel { width:100%; flex:1; min-height:0; display:flex; flex-direction:column; }
  #renewalView .heartbeat-main-panel > [role=tabpanel] { min-height:0; flex:1; }
  #renewalView #heartbeat-chat-panel { display:flex; flex-direction:column; }
  #renewalView #heartbeat-chat-panel > .renewal-heartbeat-extras { flex:1; min-height:0; display:flex; }
  #renewalView .renewal-heartbeat-chat-room { flex:1; min-height:0; display:flex; flex-direction:column; padding:12px; }
  #renewalView .renewal-heartbeat-message-list { min-height:110px; max-height:none; flex:1; }
  #renewalView #heartbeat-tasks-panel { overflow:auto; padding:12px; }
  #renewalView.renewal-mobile-modal-view:has(.heartbeat-workspace) { padding:0; background:#fffaf8; }
  #renewalView.renewal-mobile-modal-view:has(.heartbeat-workspace) > #renewal-root { width:100%; height:var(--heartbeat-viewport-height,100dvh); max-height:100dvh; border-radius:0; overflow-y:auto; overflow-x:hidden; }
  #renewalView.renewal-mobile-modal-view:has(.heartbeat-workspace) .renewal-shell { height:auto; min-height:100%; box-sizing:border-box; display:block; padding: max(12px,env(safe-area-inset-top)) 10px max(8px,env(safe-area-inset-bottom)); }
  #renewalView.renewal-mobile-modal-view:has(.heartbeat-workspace) .heartbeat-workspace { flex:1; }
  #renewalView.renewal-mobile-modal-view:has(.heartbeat-workspace) .renewal-topbar p { display:none; }
  #renewalView .heartbeat-invitation-fold { margin-top:6px; flex-shrink:0; max-height:35dvh; overflow:auto; }
}
@media(prefers-reduced-motion:reduce) { #renewalView *, #renewalView *::before, #renewalView *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
/* The Web close button is positioned independently of the header grid. */
#renewalView.web-renewal-modal-view .renewal-heartbeat-paired .renewal-topbar { grid-template-columns:minmax(0,1fr) auto; }
#renewalView .renewal-topbar-copy { min-width:0; }
#renewalView .renewal-progress-chip { justify-self:end; }
@media(max-width:899px) {
  #renewalView.web-renewal-modal-view:has(.heartbeat-workspace) { padding:0; }
  #renewalView.web-renewal-modal-view:has(.heartbeat-workspace) #webRenewalRoot { width:100%; height:var(--heartbeat-viewport-height,100dvh); max-height:100dvh; border-radius:0; overflow:hidden; }
  #renewalView.web-renewal-modal-view:has(.heartbeat-workspace) .renewal-shell { height:100%; display:flex; flex-direction:column; padding:12px; box-sizing:border-box; }
  #renewalView.web-renewal-modal-view:has(.heartbeat-workspace) .heartbeat-workspace { flex:1; }
  #renewalView.web-renewal-modal-view:has(.heartbeat-workspace) .renewal-topbar p { display:none; }
}

/* Account setup launched from the plan stays above its Web overlay. */
body.web-renewal-modal-open #webCampusBindModal,
body.web-renewal-modal-open #webPhoneBindModal,
body.web-renewal-modal-open #profileModal,
body.web-renewal-modal-open #loginModal { z-index:1300; }
#renewalView .heartbeat-task-compact .renewal-action-row { justify-content:flex-start; }
#renewalView .renewal-record-dialog select { min-height:44px; width:100%; margin:8px 0 16px; }
#renewalView .heartbeat-checkout-summary { font-size:13px; margin:0 0 8px; color:#544448; }
#renewalView:has(.heartbeat-enrollment) .renewal-topbar-copy p { display:none; }

/* Paired plan: a quiet stack of cards, with one page scroll. */
#renewalView:has(.heartbeat-workspace) :is(#renewal-root,#webRenewalRoot){width:min(760px,100%);height:auto;max-height:calc(100dvh - 40px);overflow:auto;background:#f7f3f1;border-radius:22px}
#renewalView:has(.heartbeat-workspace) .renewal-shell{height:auto;display:block;padding:22px;background:#f7f3f1}
#renewalView .renewal-heartbeat-paired .renewal-topbar{margin:0 0 20px;padding:0;min-height:0;gap:12px;align-items:center}
#renewalView .renewal-heartbeat-paired .renewal-topbar h1{font-size:23px;line-height:1.35;margin:0}
#renewalView .renewal-heartbeat-paired .renewal-topbar .renewal-kicker,
#renewalView .renewal-heartbeat-paired .renewal-topbar p,
#renewalView .renewal-heartbeat-paired .renewal-progress-chip{display:none}
#renewalView .renewal-heartbeat-paired .renewal-back{width:40px;height:40px;min-height:40px;font-size:28px;background:#fff;border:1px solid #e9dcde}
#renewalView .renewal-heartbeat-paired .heartbeat-workspace{display:flex;flex-direction:column;gap:14px;min-height:0;margin:0;padding:0}
#renewalView .renewal-heartbeat-paired :is(.heartbeat-person,.heartbeat-main-panel,.heartbeat-memory-card,.heartbeat-insight,.heartbeat-ending){width:100%;flex:none;min-width:0;box-sizing:border-box;background:#fff;border:1px solid #eadfe0;border-radius:18px;box-shadow:0 3px 12px #56354304}
#renewalView .renewal-heartbeat-paired .heartbeat-person{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:4px 12px;padding:16px;align-items:center}
#renewalView .renewal-heartbeat-paired .heartbeat-person-mark{grid-row:1/span 2;width:40px;height:40px}
#renewalView .renewal-heartbeat-paired .heartbeat-person h2{font-size:16px;line-height:1.4}
#renewalView .renewal-heartbeat-paired .heartbeat-person p{font-size:12px;margin:4px 0 0;line-height:1.5}
#renewalView .renewal-heartbeat-paired .heartbeat-person>.renewal-text-button{grid-column:2;grid-row:2;justify-self:start;margin:0;padding:4px 0;min-height:32px;font-size:12px}
#renewalView .renewal-heartbeat-paired .heartbeat-person-chat{grid-column:3;grid-row:1/span 2;margin:0;font-size:13px;min-height:40px;padding:8px 12px;border-radius:12px}
#renewalView .renewal-heartbeat-paired .heartbeat-main-panel{display:block;overflow:visible}
#renewalView .renewal-heartbeat-paired #heartbeat-tasks-panel{padding:20px;overflow:visible}
#renewalView .heartbeat-card-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
#renewalView .heartbeat-card-heading h2{font-size:15px;margin:0;line-height:1.4}
#renewalView .heartbeat-card-heading>span{font-size:12px;color:#897377}
#renewalView .renewal-heartbeat-paired .renewal-week-line{margin:0 0 18px;padding:4px;gap:4px;background:#f7f3f1;border-radius:13px;border:0}
#renewalView .renewal-heartbeat-paired .renewal-week-line button{display:flex;flex-direction:column;justify-content:center;gap:0;border:0;border-radius:10px;min-height:44px;padding:3px;font-size:14px;background:transparent;box-shadow:none}
#renewalView .renewal-heartbeat-paired .renewal-week-line button.today{background:#924155;color:#fff;outline:none}
#renewalView .renewal-heartbeat-paired .renewal-week-line button span{font-size:10px;line-height:1.2}
#renewalView .renewal-heartbeat-paired .heartbeat-task-compact{padding:0}
#renewalView .renewal-heartbeat-paired .heartbeat-task-compact .renewal-kicker{font-size:12px;letter-spacing:0;color:#945164}
#renewalView .renewal-heartbeat-paired .heartbeat-task-compact h2{font-size:22px;line-height:1.4;margin:8px 0 12px}
#renewalView .renewal-heartbeat-paired .heartbeat-task-compact p{font-size:14px;line-height:1.8;margin:10px 0;color:#655c59}
#renewalView .renewal-heartbeat-paired .heartbeat-task-meta{font-size:12px!important}
#renewalView .renewal-heartbeat-paired .renewal-action-row{gap:10px;margin:18px 0 4px;flex-wrap:wrap}
#renewalView .renewal-heartbeat-paired .renewal-action-row button{min-height:44px;padding:10px 18px;font-size:14px;border-radius:12px}
#renewalView .renewal-heartbeat-paired .heartbeat-task-compact .renewal-text-button{font-size:12px;min-height:40px;padding:8px 0}
#renewalView .renewal-heartbeat-paired .heartbeat-memory-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px}
#renewalView .heartbeat-memory-card h2{font-size:15px;margin:0 0 5px}
#renewalView .heartbeat-memory-card p{font-size:12px;line-height:1.6;color:#796c70;margin:0}
#renewalView .heartbeat-memory-card button{font-size:12px;white-space:nowrap;min-height:44px;padding:8px 0}
#renewalView .renewal-heartbeat-paired .heartbeat-manage{width:100%;border:0;padding:0 8px;font-size:12px;color:#7a6c70}
#renewalView .renewal-heartbeat-paired .heartbeat-manage summary{min-height:44px;padding:12px 0;font-size:12px;font-weight:400}
#renewalView .renewal-heartbeat-paired .heartbeat-manage button{font-size:13px}
#renewalView .renewal-heartbeat-paired .heartbeat-insight{padding:18px}
@media(max-width:700px){
 #renewalView:has(.heartbeat-workspace) :is(#renewal-root,#webRenewalRoot){height:var(--heartbeat-viewport-height,100dvh);max-height:100dvh;width:100%;border-radius:0;overflow:auto}
 #renewalView:has(.heartbeat-workspace) .renewal-shell{height:auto;min-height:100%;padding:max(16px,env(safe-area-inset-top)) 14px max(24px,env(safe-area-inset-bottom));display:block}
 #renewalView .renewal-heartbeat-paired .renewal-topbar{margin-bottom:18px}
 #renewalView .renewal-heartbeat-paired .renewal-topbar h1{font-size:21px}
 #renewalView .renewal-heartbeat-paired #heartbeat-tasks-panel{padding:18px}
 #renewalView .renewal-heartbeat-paired .heartbeat-person{padding:14px;gap:4px 10px}
 #renewalView .renewal-heartbeat-paired .heartbeat-person h2{font-size:15px}
 #renewalView .renewal-heartbeat-paired .heartbeat-person-chat{font-size:12px;padding:8px 10px}
}

#renewalView .renewal-heartbeat-paired .renewal-week-line.heartbeat-visible-days{display:flex;flex-wrap:wrap;gap:6px}
#renewalView .renewal-heartbeat-paired .heartbeat-visible-days button{min-width:44px;flex:0 0 44px}

/* Keep the task actions balanced within the existing card. */
#renewalView .renewal-heartbeat-paired .heartbeat-task-compact .renewal-action-row{justify-content:center;margin-top:24px;margin-bottom:4px}

#renewalView .heartbeat-moments{margin-top:18px;font-size:13px}
#renewalView .heartbeat-moment-entry{display:flex;flex-direction:column;align-items:center;gap:8px}
#renewalView .heartbeat-moments small{font-size:12px;color:#786a6e}
#renewalView .heartbeat-moment-editor{margin-top:16px;padding:16px;background:#faf5f3;border-radius:14px}
#renewalView .heartbeat-moments h3{font-size:15px;margin:0 0 10px}
#renewalView .heartbeat-moment-editor label{display:block;margin:12px 0 6px}
#renewalView .heartbeat-moment-editor textarea{display:block;width:100%;box-sizing:border-box;font-size:16px;padding:10px;border:1px solid #d6c2c8;border-radius:10px;resize:vertical}
#renewalView .heartbeat-moment-editor input[type=file]{display:block;width:100%;margin-top:8px;font-size:13px}
#renewalView .heartbeat-moment-editor .heartbeat-moment-share{display:flex;gap:8px;align-items:flex-start;min-height:44px}
#renewalView .heartbeat-moment-share input{width:18px;height:18px;flex-shrink:0;accent-color:#924155}
#renewalView .heartbeat-moment-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0}
#renewalView .heartbeat-moment-photos img{display:block;width:100%;height:auto;border-radius:10px}
#renewalView .heartbeat-moments button{min-height:44px;font-size:13px}
#renewalView .heartbeat-pending-photo{display:flex;justify-content:space-between;gap:10px;overflow-wrap:anywhere}
#renewalView .heartbeat-moment-recap{margin-top:16px;border-top:1px solid #eee1e4}
#renewalView .heartbeat-moment-recap summary{padding:14px 0;cursor:pointer;min-height:44px}
#renewalView .heartbeat-moment-recap article{padding:14px 0;border-top:1px solid #eee1e4}
#renewalView .heartbeat-moment-recap p{white-space:pre-wrap;overflow-wrap:anywhere}

#renewalView .heartbeat-moment-editor select{display:block;width:100%;box-sizing:border-box;min-height:44px;margin-top:8px;padding:10px;font:inherit;font-size:16px;color:inherit;background:#fff;border:1px solid #d6c2c8;border-radius:10px}