#heala-full-flow {
  --hf-bg: light-dark(#faf9fc, #16131d);
  --hf-paper: light-dark(#ffffff, #211c2b);
  --hf-ink: light-dark(#21182f, #f7f3ff);
  --hf-muted: light-dark(#746c80, #b6adbf);
  --hf-line: light-dark(#e8e2ef, #3a3245);
  --hf-accent: #8254de;
  --hf-soft: light-dark(#f0e8ff, #35244e);
  --hf-on: light-dark(#6937b7, #cdb0ff);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    sans-serif;
  color: var(--hf-ink);
  max-width: 470px;
  margin: auto;
}
#heala-full-flow * {
  box-sizing: border-box;
}
#heala-full-flow .hf-window {
  background: var(--hf-bg);
  border: 1px solid var(--hf-line);
  border-radius: 26px;
  overflow: hidden;
}
#heala-full-flow button {
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#heala-full-flow .hf-header {
  padding: 22px 26px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--hf-line);
}
#heala-full-flow .hf-brand {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -1.2px;
}
#heala-full-flow .hf-preview {
  color: var(--hf-muted);
  font-size: 11px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}
#heala-full-flow .hf-main {
  padding: 22px 26px 26px;
}
#heala-full-flow .hf-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
#heala-full-flow .hf-back {
  width: 38px;
  min-height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hf-line);
  background: var(--hf-paper);
  color: var(--hf-ink);
  border-radius: 50%;
}
#heala-full-flow .hf-back:disabled {
  opacity: 0.3;
  cursor: default;
}
#heala-full-flow .hf-track {
  display: flex;
  gap: 5px;
  flex: 1;
}
#heala-full-flow .hf-track span {
  height: 4px;
  background: var(--hf-line);
  border-radius: 4px;
  flex: 1;
  transition: background 0.2s;
}
#heala-full-flow .hf-track span.done {
  background: var(--hf-accent);
}
#heala-full-flow .hf-step {
  font-size: 12px;
  color: var(--hf-muted);
  min-width: 30px;
}
#heala-full-flow .hf-eyebrow {
  font-size: 11px;
  font-weight: 700;
  color: var(--hf-on);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin: 0 0 12px;
}
#heala-full-flow h2 {
  color: var(--hf-ink);
  font-size: 32px;
  line-height: 1.12;
  font-weight: 750;
  letter-spacing: -1.2px;
  margin: 0 0 13px;
}
#heala-full-flow .hf-sub {
  color: var(--hf-muted);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 28px;
}
#heala-full-flow .hf-counts {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 24px;
}
#heala-full-flow .hf-count {
  border: 1px solid var(--hf-line);
  border-radius: 18px;
  background: var(--hf-paper);
  color: var(--hf-ink);
  padding: 16px 0 13px;
  min-height: 85px;
}
#heala-full-flow .hf-count b {
  display: block;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
}
#heala-full-flow .hf-count small {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--hf-muted);
}
#heala-full-flow .hf-count[aria-pressed="true"] {
  background: var(--hf-accent);
  border-color: var(--hf-accent);
  color: #fff;
  box-shadow: 0 7px 20px #8254de24;
}
#heala-full-flow .hf-count[aria-pressed="true"] small {
  color: #f5edff;
}
#heala-full-flow .hf-weekbox {
  padding: 20px 17px;
  background: var(--hf-paper);
  border: 1px solid var(--hf-line);
  border-radius: 20px;
}
#heala-full-flow .hf-weektop {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  margin-bottom: 20px;
}
#heala-full-flow .hf-weektop span {
  color: var(--hf-muted);
  font-size: 11px;
}
#heala-full-flow .hf-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
#heala-full-flow .hf-day {
  text-align: center;
  color: var(--hf-muted);
  font-size: 11px;
}
#heala-full-flow .hf-day i {
  display: flex;
  height: 46px;
  border-radius: 9px;
  margin-top: 9px;
  align-items: center;
  justify-content: center;
  background: var(--hf-bg);
  color: var(--hf-muted);
  font-style: normal;
}
#heala-full-flow .hf-day.train i {
  background: var(--hf-soft);
  color: var(--hf-on);
}
#heala-full-flow .hf-day svg {
  width: 16px;
  height: 16px;
}
#heala-full-flow .hf-legend {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  font-size: 11px;
  color: var(--hf-muted);
}
#heala-full-flow .hf-dot {
  background: var(--hf-accent);
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
#heala-full-flow .hf-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 18px 2px 2px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--hf-muted);
}
#heala-full-flow .hf-note svg {
  flex-shrink: 0;
  width: 17px;
  margin-top: 1px;
  color: var(--hf-on);
}
#heala-full-flow .hf-options {
  display: grid;
  gap: 10px;
}
#heala-full-flow .hf-choice {
  text-align: left;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  border: 1px solid var(--hf-line);
  background: var(--hf-paper);
  padding: 17px;
  border-radius: 18px;
  color: var(--hf-ink);
  min-height: 80px;
}
#heala-full-flow .hf-choice[aria-pressed="true"] {
  border: 2px solid var(--hf-accent);
  background: var(--hf-soft);
  padding: 16px;
}
#heala-full-flow .hf-choice .hf-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--hf-on);
  flex-shrink: 0;
}
#heala-full-flow .hf-icon svg {
  width: 24px;
  height: 24px;
}
#heala-full-flow .hf-choice .hf-copy {
  flex: 1;
  min-width: 0;
}
#heala-full-flow .hf-choice b {
  display: block;
  font-size: 16px;
  font-weight: 650;
}
#heala-full-flow .hf-choice small {
  display: block;
  margin-top: 5px;
  color: var(--hf-muted);
  font-size: 12px;
  line-height: 1.4;
}
#heala-full-flow .hf-radio {
  width: 18px;
  height: 18px;
  border: 1px solid var(--hf-line);
  border-radius: 50%;
  flex-shrink: 0;
}
#heala-full-flow .hf-choice[aria-pressed="true"] .hf-radio {
  border: 5px solid var(--hf-accent);
  background: var(--hf-paper);
}
#heala-full-flow .hf-footer {
  margin-top: 28px;
}
#heala-full-flow .hf-next {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--hf-ink);
  color: var(--hf-bg);
  min-height: 56px;
  width: 100%;
  border: 0;
  border-radius: 17px;
  font-size: 15px;
  font-weight: 650;
}
#heala-full-flow .hf-next:disabled {
  opacity: 0.35;
  cursor: default;
}
#heala-full-flow .hf-footer p {
  font-size: 11px;
  text-align: center;
  margin: 12px 0 0;
  color: var(--hf-muted);
  line-height: 1.5;
}
#heala-full-flow .hf-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 17px 0;
  border-bottom: 1px solid var(--hf-line);
  gap: 12px;
}
#heala-full-flow .hf-summary span {
  font-size: 12px;
  color: var(--hf-muted);
}
#heala-full-flow .hf-summary b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-top: 4px;
}
#heala-full-flow .hf-edit {
  background: none;
  border: 0;
  color: var(--hf-on);
  padding: 10px 0 10px 10px;
  min-height: 44px;
  font-size: 12px;
}
#heala-full-flow .hf-success {
  width: 64px;
  height: 64px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  color: var(--hf-on);
  background: var(--hf-soft);
  margin-bottom: 22px;
}
#heala-full-flow .hf-success svg {
  width: 30px;
  height: 30px;
}
#heala-full-flow .hf-page {
  animation: hf-arrive 0.22s ease-out;
}
@keyframes hf-arrive {
  from {
    opacity: 0.5;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  #heala-full-flow .hf-page {
    animation: none;
  }
  #heala-full-flow * {
    transition: none !important;
  }
}
@media (max-width: 360px) {
  #heala-full-flow .hf-main {
    padding: 20px 18px;
  }
  #heala-full-flow .hf-header {
    padding: 20px 18px;
  }
  #heala-full-flow h2 {
    font-size: 29px;
  }
  #heala-full-flow .hf-counts {
    gap: 5px;
  }
  #heala-full-flow .hf-weekbox {
    padding: 17px 12px;
  }
}

#heala-full-flow {
  color-scheme: light;
}
#heala-full-flow[data-appearance="dark"] {
  color-scheme: dark;
}
#heala-full-flow .hf-previewbar {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  padding: 8px 4px 14px;
  color: var(--hf-muted);
  font-size: 12px;
}
#heala-full-flow .hf-previewbar select {
  max-width: 65%;
  font: inherit;
  color: var(--hf-ink);
  background: var(--hf-paper);
  border: 1px solid var(--hf-line);
  border-radius: 10px;
  padding: 9px;
  min-height: 40px;
}
#heala-full-flow .hf-page {
  animation: none;
}
#heala-full-flow .hf-content {
  min-height: 280px;
}
#heala-full-flow .hf-next svg {
  width: 18px;
  height: 18px;
}
#heala-full-flow .hf-kicker {
  color: var(--hf-on);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}
#heala-full-flow .hf-welcome h2 {
  font-size: 40px;
  line-height: 1.08;
  letter-spacing: -1.7px;
  margin-top: 14px;
}
#heala-full-flow .hf-welcome h2 em {
  font-style: normal;
  color: var(--hf-accent);
}
#heala-full-flow .hf-illustration {
  background: radial-gradient(
    ellipse at top right,
    var(--hf-soft),
    var(--hf-paper) 70%
  );
  border: 1px solid var(--hf-line);
  border-radius: 22px;
  padding: 22px;
  margin-top: 24px;
}
#heala-full-flow .hf-promise {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
}
#heala-full-flow .hf-promise + .hf-promise {
  border-top: 1px solid var(--hf-line);
}
#heala-full-flow .hf-promise > span {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: var(--hf-soft);
  display: grid;
  place-items: center;
  color: var(--hf-on);
  flex-shrink: 0;
}
#heala-full-flow .hf-promise b {
  font-size: 14px;
  display: block;
}
#heala-full-flow .hf-promise small {
  font-size: 12px;
  line-height: 1.5;
  color: var(--hf-muted);
  display: block;
  margin-top: 3px;
}
#heala-full-flow .hf-form {
  display: grid;
  gap: 15px;
}
#heala-full-flow .hf-field {
  display: block;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--hf-muted);
}
#heala-full-flow input,
#heala-full-flow select,
#heala-full-flow textarea {
  font-family: inherit;
}
#heala-full-flow .hf-field input,
#heala-full-flow .hf-field select,
#heala-full-flow .hf-field textarea {
  display: block;
  margin-top: 7px;
  width: 100%;
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--hf-line);
  border-radius: 14px;
  background: var(--hf-paper);
  color: var(--hf-ink);
  font-size: 17px;
  font-weight: 550;
}
#heala-full-flow .hf-field textarea {
  resize: vertical;
  min-height: 90px;
  font-size: 15px;
  font-weight: 400;
}
#heala-full-flow .hf-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
#heala-full-flow .hf-segment {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 10px 0 20px;
}
#heala-full-flow .hf-segment button {
  min-height: 44px;
  padding: 11px 16px;
  border-radius: 12px;
  background: var(--hf-paper);
  color: var(--hf-ink);
  border: 1px solid var(--hf-line);
  font-size: 13px;
  flex: 1;
}
#heala-full-flow .hf-segment button[aria-pressed="true"] {
  color: var(--hf-on);
  border-color: var(--hf-accent);
  background: var(--hf-soft);
}
#heala-full-flow .hf-detail {
  padding: 15px 0 0;
  font-size: 13px;
  color: var(--hf-muted);
  line-height: 1.5;
}
#heala-full-flow .hf-detail summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--hf-on);
  font-weight: 550;
}
#heala-full-flow .hf-detail p {
  margin: 8px 0;
}
#heala-full-flow .hf-error {
  color: light-dark(#ad303f, #ffa1ac);
  font-size: 12px;
  line-height: 1.5;
  margin: 12px 0 0;
}
#heala-full-flow .hf-quiet {
  display: block;
  background: none;
  border: 0;
  padding: 13px 4px;
  color: var(--hf-on);
  font-size: 13px;
  min-height: 44px;
  text-align: center;
  width: 100%;
}
#heala-full-flow .hf-daypicker {
  margin-top: 18px;
  background: var(--hf-paper);
  border: 1px solid var(--hf-line);
  border-radius: 18px;
  padding: 18px;
}
#heala-full-flow .hf-daypicker h3 {
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--hf-ink);
}
#heala-full-flow .hf-daypicker p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--hf-muted);
  margin: 0 0 14px;
}
#heala-full-flow .hf-daybuttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
#heala-full-flow .hf-daybuttons button {
  background: var(--hf-bg);
  border: 1px solid var(--hf-line);
  border-radius: 12px;
  min-height: 62px;
  color: var(--hf-ink);
  padding: 10px 2px;
  font-size: 13px;
}
#heala-full-flow .hf-daybuttons small {
  display: block;
  font-size: 10px;
  margin-top: 4px;
  color: var(--hf-muted);
}
#heala-full-flow .hf-daybuttons button[aria-pressed="true"] {
  background: var(--hf-soft);
  border-color: var(--hf-accent);
  color: var(--hf-on);
}
#heala-full-flow .hf-daybuttons button[aria-pressed="true"] small {
  color: var(--hf-on);
}
#heala-full-flow .hf-status {
  margin-top: 13px !important;
  margin-bottom: 0 !important;
  min-height: 20px;
}
#heala-full-flow .hf-banner {
  padding: 17px;
  border-radius: 17px;
  background: var(--hf-soft);
  color: var(--hf-on);
  margin-bottom: 18px;
  font-size: 13px;
  line-height: 1.5;
}
#heala-full-flow .hf-summary button {
  flex-shrink: 0;
}
#heala-full-flow .hf-sample {
  display: inline-flex;
  padding: 5px 8px;
  border-radius: 7px;
  font-size: 10px;
  color: var(--hf-muted);
  background: var(--hf-bg);
  margin-bottom: 12px;
}
#heala-full-flow .hf-target {
  padding: 22px;
  border-radius: 20px;
  border: 1px solid var(--hf-line);
  background: var(--hf-paper);
  margin-bottom: 16px;
}
#heala-full-flow .hf-target .hf-big {
  font-size: 38px;
  line-height: 1.1;
  font-weight: 750;
  letter-spacing: -1px;
}
#heala-full-flow .hf-target .hf-big small {
  font-size: 13px;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--hf-muted);
  margin-left: 5px;
}
#heala-full-flow .hf-macros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-top: 18px;
  margin-top: 18px;
  border-top: 1px solid var(--hf-line);
}
#heala-full-flow .hf-macros b {
  display: block;
  font-size: 17px;
}
#heala-full-flow .hf-macros small {
  font-size: 11px;
  color: var(--hf-muted);
}
#heala-full-flow .hf-price {
  background: var(--hf-paper);
  border: 1px solid var(--hf-line);
  border-radius: 18px;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0;
  width: 100%;
  color: var(--hf-ink);
  text-align: left;
}
#heala-full-flow .hf-price[aria-pressed="true"] {
  border: 2px solid var(--hf-accent);
  padding: 17px;
  background: var(--hf-soft);
}
#heala-full-flow .hf-price b {
  font-size: 16px;
}
#heala-full-flow .hf-price small {
  display: block;
  font-size: 12px;
  color: var(--hf-muted);
  margin-top: 5px;
}
#heala-full-flow .hf-tag {
  display: inline-block;
  background: var(--hf-paper);
  color: var(--hf-on);
  border-radius: 6px;
  padding: 4px 7px;
  font-size: 10px;
  margin-bottom: 7px;
}
#heala-full-flow .hf-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--hf-muted);
  margin: 18px 0;
}
#heala-full-flow .hf-switch input {
  accent-color: var(--hf-accent);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
#heala-full-flow .hf-account-demo {
  padding: 18px;
  background: var(--hf-paper);
  border: 1px solid var(--hf-line);
  border-radius: 16px;
  font-size: 13px;
  color: var(--hf-muted);
  margin: 18px 0;
  line-height: 1.5;
}
#heala-full-flow .hf-account-demo strong {
  display: block;
  font-size: 16px;
  color: var(--hf-ink);
  margin: 5px 0;
  overflow-wrap: anywhere;
}
#heala-full-flow [hidden] {
  display: none !important;
}

#heala-full-flow .hf-slider {
  border: 1px solid var(--hf-line);
  background: var(--hf-paper);
  border-radius: 22px;
  padding: 20px;
  margin: 14px 0;
}
#heala-full-flow .hf-slider label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--hf-muted);
}
#heala-full-flow .hf-value-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 12px 0;
}
#heala-full-flow .hf-number {
  font-size: 44px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -1.6px;
  color: var(--hf-ink);
  font-variant-numeric: tabular-nums;
}
#heala-full-flow .hf-number small {
  font-size: 13px;
  font-weight: 450;
  letter-spacing: 0;
  margin-left: 6px;
  color: var(--hf-muted);
}
#heala-full-flow .hf-nudge {
  border: 1px solid var(--hf-line);
  background: var(--hf-bg);
  color: var(--hf-on);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  display: grid;
  place-items: center;
}
#heala-full-flow .hf-range {
  --pct: 50%;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: ew-resize;
  display: block;
}
/* TRACK HEIGHT IS THE WHOLE IMPRESSION. At 7px against a 27px thumb the rail
   reads as a hairline something got dropped on — the page looks unfinished
   rather than minimal. 12px carries the accent as a shape instead of a line,
   and is what every native slider on the platforms this sits beside uses.

   ⚠️ THE THUMB IS CENTRED BY HAND ON WEBKIT. ::-webkit-slider-thumb has no
   vertical alignment of its own: it sits at the TOP of the track and is
   nudged up with a negative margin, which must be (track - thumb) / 2. Change
   either number without the other and the thumb rides above or below its own
   rail — a defect that only shows once the track is thick enough to see.
   (12 - 28) / 2 = -8. */
#heala-full-flow .hf-range::-webkit-slider-runnable-track {
  height: 12px;
  background: linear-gradient(
    to right,
    var(--hf-accent) 0 var(--pct),
    var(--hf-line) var(--pct) 100%
  );
  border-radius: 999px;
}
#heala-full-flow .hf-range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  margin-top: -8px;
  width: 28px;
  height: 28px;
  background: var(--hf-paper);
  border: 6px solid var(--hf-accent);
  border-radius: 50%;
  box-shadow: 0 2px 10px #5737832e;
}
#heala-full-flow .hf-range::-moz-range-track {
  height: 12px;
  background: var(--hf-line);
  border-radius: 999px;
}
#heala-full-flow .hf-range::-moz-range-progress {
  background: var(--hf-accent);
  height: 12px;
  border-radius: 999px;
}
/* ⚠️ FIREFOX WAS SHIPPING A DIFFERENT SLIDER. This thumb was 17px with a 5px
   border while WebKit's was 27px with 6px — not a rounding difference, a
   visibly smaller control on the same screen. Firefox centres its own thumb,
   so it needs no margin, but it DOES need border-box or the border is added
   outside the 28px and it ends up larger than WebKit's instead. */
#heala-full-flow .hf-range::-moz-range-thumb {
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  background: var(--hf-paper);
  border: 6px solid var(--hf-accent);
  border-radius: 50%;
  box-shadow: 0 2px 10px #5737832e;
}
#heala-full-flow .hf-ruler {
  height: 12px;
  background: repeating-linear-gradient(
    90deg,
    var(--hf-line) 0 1px,
    transparent 1px 10%
  );
  margin: 0 5px;
}
#heala-full-flow .hf-range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--hf-muted);
  margin-top: 7px;
}
#heala-full-flow .hf-sleep-scene {
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(
    135deg,
    light-dark(#e8e0fc, #2a2042),
    light-dark(#eef1ff, #19283f)
  );
  color: var(--hf-ink);
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 20px;
}
#heala-full-flow .hf-sleep-scene > span {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--hf-paper);
  box-shadow: 0 5px 22px #7462b929;
  color: var(--hf-on);
}
#heala-full-flow .hf-sleep-scene svg {
  width: 27px;
  height: 27px;
}
#heala-full-flow .hf-sleep-scene b {
  display: block;
  margin-top: 5px;
  font-size: 23px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}
#heala-full-flow .hf-sleep-scene small {
  color: var(--hf-muted);
  font-size: 12px;
}
#heala-full-flow .hf-number[data-output="sleep"] {
  font-size: 32px;
  letter-spacing: -1px;
  white-space: nowrap;
}
#heala-full-flow .hf-sleep-scene {
  padding: 16px;
  gap: 10px;
}
#heala-full-flow .hf-sleep-scene > span {
  width: 38px;
  height: 38px;
}
#heala-full-flow .hf-sleep-scene b {
  font-size: 21px;
  white-space: nowrap;
}
#heala-full-flow .hf-food {
  text-align: center;
}
#heala-full-flow .hf-food-ring {
  width: 218px;
  height: 218px;
  border-radius: 50%;
  padding: 13px;
  background: conic-gradient(#9874df 0 var(--protein-end, 23%), #e6b16b var(--protein-end, 23%) var(--carbs-end, 69%), #75b79e var(--carbs-end, 69%) 100%);
  margin: 24px auto;
  box-shadow: 0 12px 35px #8254de12;
}
#heala-full-flow .hf-food-center {
  background: var(--hf-bg);
  border-radius: 50%;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#heala-full-flow .hf-food-center b {
  font-size: 46px;
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -1.5px;
}
#heala-full-flow .hf-food-center small {
  font-size: 12px;
  color: var(--hf-muted);
  margin: 6px 0;
}
#heala-full-flow .hf-food-center svg {
  width: 18px;
  height: 18px;
  color: var(--hf-on);
  margin-bottom: 5px;
}
#heala-full-flow .hf-food-macros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0 24px;
}
#heala-full-flow .hf-food-macros div {
  border-radius: 15px;
  border: 1px solid var(--hf-line);
  padding: 14px 5px;
  background: var(--hf-paper);
}
#heala-full-flow .hf-food-macros b {
  display: block;
  font-size: 20px;
  letter-spacing: -0.5px;
  margin: 5px 0;
}
#heala-full-flow .hf-food-macros small {
  font-size: 11px;
  color: var(--hf-muted);
}
#heala-full-flow .hf-macro-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-right: 5px;
}
/* ══ THE ARRIVAL — the weight roadmap, as a motion graphic ════════════════
   ⚠️ WHY IT WAS BROKEN. `#heala-full-flow svg:not(.hp svg)` (further down)
   sizes every SVG in the flow to a 20px icon with fill:none, and `:not()`
   takes its argument's specificity, so it scored (1,1,2) against this
   chart's (1,1,1). The roadmap shipped as a faint 20px triangle in the
   corner of an empty card. Every rule here keys on `.hf-arrival-svg`, which
   wins on the class column, and every shape sets its OWN fill and stroke so
   nothing is inherited from the icon rule.

   The card is a fixed brand-violet plate in both themes, on purpose: it is
   the one hero moment of the flow, and --hf-on turns pale lavender in dark
   mode, which would put white type on a white-ish card. */
#heala-full-flow .hf-arrival {
  position: relative; overflow: hidden; isolation: isolate;
  margin: 0 0 12px; padding: 18px 16px 14px; border-radius: 24px;
  color: #fff; text-align: left; cursor: pointer;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(196, 160, 255, .55) 0%, rgba(196, 160, 255, 0) 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(40, 10, 90, .55) 0%, rgba(40, 10, 90, 0) 60%),
    linear-gradient(160deg, #5a28b0 0%, #6f3fd0 48%, #8a5cf0 100%);
  /* Downward only. The scroll container (.hf-screen-content) is overflow:auto
     with 2px of side padding, so any sideways spill is sliced into hard
     vertical edges — a wide soft shadow read as a pale box under the card.
     A negative spread larger than half the blur keeps it off the sides. */
  box-shadow: 0 16px 28px -20px rgba(90, 40, 176, .8), inset 0 1px 0 rgba(255, 255, 255, .18);
  transform: translateY(10px) scale(.98); opacity: 0;
  transition: transform .5s cubic-bezier(.2, .9, .25, 1.15), opacity .35s ease;
  -webkit-tap-highlight-color: transparent;
}
#heala-full-flow .hf-arrival.is-live { transform: none; opacity: 1; }
/* A slow light sweep across the plate once the line lands — the moment the
   plan becomes real. One pass, not a loop. */
#heala-full-flow .hf-arrival::after {
  content: ""; position: absolute; inset: -40% -60%; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .16) 50%, transparent 58%);
  transform: translateX(-60%); opacity: 0;
}
#heala-full-flow .hf-arrival.is-drawn::after { animation: hf-arr-sheen 1.1s ease-out .05s 1 both; }
@keyframes hf-arr-sheen {
  0% { transform: translateX(-60%); opacity: 1 }
  100% { transform: translateX(60%); opacity: 0 }
}

/* ── The live readout: date chip, counting weight, the total change ── */
#heala-full-flow .hf-arr-live { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
#heala-full-flow .hf-arr-date {
  font-size: 12px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums;
  padding: 5px 10px; border-radius: 999px; min-width: 64px; text-align: center;
  background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
#heala-full-flow .hf-arr-kg {
  display: flex; align-items: baseline; gap: 4px; margin-left: auto;
  font-size: 34px; line-height: 1; font-weight: 900; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
#heala-full-flow .hf-arr-kg i { font-style: normal; font-size: 14px; font-weight: 700; opacity: .75; letter-spacing: 0; }
#heala-full-flow .hf-arr-delta {
  font-size: 12px; font-weight: 800; padding: 5px 9px; border-radius: 999px;
  background: #fff; color: #5a28b0;
  transform: scale(.6); opacity: 0;
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1) .15s, opacity .25s ease .15s;
}
#heala-full-flow .hf-arrival.is-drawn .hf-arr-delta { transform: none; opacity: 1; }

/* ── The plot ── */
#heala-full-flow .hf-arr-plot { position: relative; margin: 0 -4px; }
#heala-full-flow .hf-arrival svg.hf-arrival-svg {
  display: block; width: 100%; height: auto; overflow: visible;
  fill: none; stroke: none;
}
#heala-full-flow .hf-arrival-svg .hf-arr-grid {
  fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1; stroke-dasharray: 2 6;
  stroke-dashoffset: 320; transition: stroke-dashoffset .9s ease-out;
}
#heala-full-flow .hf-arrival.is-live .hf-arr-grid { stroke-dashoffset: 0; }
#heala-full-flow .hf-arrival-svg .hf-arr-ghost {
  fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 2.5; stroke-dasharray: 3 5;
}
#heala-full-flow .hf-arrival-svg .hf-arr-fill { fill: url(#hf-arr-area); stroke: none; }
#heala-full-flow .hf-arrival-svg .hf-arr-glow {
  fill: none; stroke: #fff; stroke-width: 12; stroke-opacity: .18;
  stroke-linecap: round; stroke-linejoin: round;
}
#heala-full-flow .hf-arrival-svg .hf-arr-line {
  fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round;
}
#heala-full-flow .hf-arrival-svg .hf-arr-guide {
  stroke: rgba(255, 255, 255, .35); stroke-width: 1.2; stroke-dasharray: 2 4;
  transition: opacity .3s ease;
}
#heala-full-flow .hf-arrival.is-drawn .hf-arr-guide { opacity: 0; }
#heala-full-flow .hf-arrival-svg .hf-arr-start { fill: #5a28b0; stroke: #fff; stroke-width: 2.5; }

/* Milestones: dim beads that light up and pop as the puck passes them. */
#heala-full-flow .hf-arrival-svg .hf-arr-mark {
  fill: rgba(255, 255, 255, .35); stroke: none;
  transform-box: fill-box; transform-origin: center;
  transition: fill .2s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
#heala-full-flow .hf-arrival-svg .hf-arr-mark.is-hit { fill: #fff; transform: scale(1.45); }

/* The puck — the reader, travelling. */
#heala-full-flow .hf-arrival-svg .hf-arr-puck-dot { fill: #fff; stroke: #5a28b0; stroke-width: 3; }
#heala-full-flow .hf-arrival-svg .hf-arr-puck-halo {
  fill: #fff; opacity: .22; transform-box: fill-box; transform-origin: center;
  animation: hf-arr-breathe 1.4s ease-in-out infinite;
}
#heala-full-flow .hf-arrival.is-drawn .hf-arr-puck { opacity: 0; transition: opacity .2s ease; }
@keyframes hf-arr-breathe { 0%, 100% { transform: scale(.8) } 50% { transform: scale(1.25) } }

/* The goal: hidden until reached, then a bounce, two rings and a burst,
   then a slow heartbeat so the destination keeps drawing the eye. */
#heala-full-flow .hf-arrival-svg .hf-arr-goal-dot,
#heala-full-flow .hf-arrival-svg .hf-arr-ring,
#heala-full-flow .hf-arrival-svg .hf-arr-spark {
  transform-box: fill-box; transform-origin: center;
}
#heala-full-flow .hf-arrival-svg .hf-arr-goal-dot {
  fill: #fff; stroke: #5a28b0; stroke-width: 3.5; transform: scale(0);
}
#heala-full-flow .hf-arrival.is-drawn .hf-arr-goal-dot {
  animation: hf-arr-pop .55s cubic-bezier(.34, 1.56, .64, 1) both,
             hf-arr-beat 2.4s ease-in-out .9s infinite;
}
#heala-full-flow .hf-arrival-svg .hf-arr-ring { fill: none; stroke: #fff; stroke-width: 2; opacity: 0; }
#heala-full-flow .hf-arrival.is-drawn .hf-arr-ring { animation: hf-arr-ring .9s ease-out both; }
#heala-full-flow .hf-arrival.is-drawn .hf-arr-ring--late { animation-delay: .22s; }
#heala-full-flow .hf-arrival-svg .hf-arr-spark { fill: #fff; opacity: 0; }
#heala-full-flow .hf-arrival.is-drawn .hf-arr-spark { animation: hf-arr-spark .7s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes hf-arr-pop { 0% { transform: scale(0) } 100% { transform: scale(1) } }
@keyframes hf-arr-beat { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.18) } }
@keyframes hf-arr-ring { 0% { transform: scale(.6); opacity: .9 } 100% { transform: scale(3.2); opacity: 0 } }
@keyframes hf-arr-spark {
  0% { transform: translate(0, 0) scale(1); opacity: 1 }
  100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0 }
}

/* Month ticks — positioned on the same timeline as the date. */
#heala-full-flow .hf-arr-axis { position: relative; height: 16px; margin-top: 2px; }
#heala-full-flow .hf-arr-axis span {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62); opacity: 0; transition: opacity .4s ease .5s;
}
#heala-full-flow .hf-arrival.is-live .hf-arr-axis span { opacity: 1; }

/* ── Endpoints + the date, under the plot ── */
#heala-full-flow .hf-arrival-row {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .16);
}
#heala-full-flow .hf-arrival-row small {
  display: block; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, .72); margin-bottom: 2px;
}
#heala-full-flow .hf-arrival-row b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
#heala-full-flow .hf-arrival-goal-read { text-align: right; }
#heala-full-flow .hf-arrival-goal-read b { color: #fff; }
#heala-full-flow .hf-arrival-eta {
  margin: 12px 0 0; padding: 9px 12px; border-radius: 14px; text-align: center;
  font-size: 13px; color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .12);
  transform: translateY(6px); opacity: 0;
  transition: transform .45s cubic-bezier(.2, .9, .25, 1.1) .25s, opacity .3s ease .25s;
}
#heala-full-flow .hf-arrival-eta b { color: #fff; font-weight: 800; }
#heala-full-flow .hf-arrival.is-drawn .hf-arrival-eta { transform: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  #heala-full-flow .hf-arrival,
  #heala-full-flow .hf-arrival * { transition: none !important; animation: none !important; }
  #heala-full-flow .hf-arrival.is-drawn .hf-arr-goal-dot { transform: scale(1); }
}
#heala-full-flow .hf-workout-promise {
  background: var(--hf-paper);
  border: 1px solid var(--hf-line);
  border-radius: 18px;
  display: flex;
  text-align: left;
  gap: 12px;
  padding: 17px;
  align-items: center;
}
#heala-full-flow .hf-workout-promise > span {
  color: var(--hf-on);
  background: var(--hf-soft);
  width: 42px;
  height: 42px;
  border-radius: 13px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
#heala-full-flow .hf-workout-promise b {
  font-size: 13px;
  display: block;
}
#heala-full-flow .hf-workout-promise p {
  font-size: 12px;
  color: var(--hf-muted);
  line-height: 1.5;
  margin: 5px 0 0;
}
#heala-full-flow .hf-pro-title {
  text-align: center;
}
#heala-full-flow .hf-pro-title h2 {
  margin-bottom: 10px;
}
#heala-full-flow .hf-pro-badge {
  display: inline-block;
  margin-bottom: 15px;
  background: var(--hf-ink);
  color: var(--hf-bg);
  padding: 7px 11px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
}
#heala-full-flow .hf-reel-window {
  height: 240px;
  overflow: hidden;
  position: relative;
  margin: 10px 0 0;
  mask-image: linear-gradient(transparent, #000 7%, #000 93%, transparent);
}
#heala-full-flow .hf-reel-row {
  height: 80px;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px 8px;
}
#heala-full-flow .hf-feature-icon {
  --tile: #8b78c5;
  flex-shrink: 0;
  width: 49px;
  height: 49px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: var(--hf-on);
  border: 1px solid color-mix(in srgb, var(--tile) 25%, var(--hf-line));
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--tile) 12%, var(--hf-paper)),
    color-mix(in srgb, var(--tile) 35%, var(--hf-paper))
  );
  box-shadow:
    inset 0 1px 2px #ffffffbb,
    inset 0 -2px 4px #3f2c5322,
    0 4px 9px #281d4010;
  position: relative;
}
#heala-full-flow .hf-feature-icon::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--hf-paper);
  box-shadow: 0 1px 3px #281d4040;
  position: absolute;
  bottom: 5px;
  right: 5px;
}
#heala-full-flow .hf-feature-icon svg {
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 1px 1px #ffffff80);
}
#heala-full-flow .hf-reel-row b {
  display: block;
  font-size: 14px;
  font-weight: 650;
  color: var(--hf-ink);
}
#heala-full-flow .hf-reel-row small {
  display: block;
  font-size: 12px;
  line-height: 1.45;
  color: var(--hf-muted);
  margin-top: 5px;
}
#heala-full-flow .hf-reel-controls {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin: 0 0 20px;
}
#heala-full-flow .hf-reel-controls button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--hf-line);
  border-radius: 50%;
  background: var(--hf-paper);
  color: var(--hf-muted);
  display: grid;
  place-items: center;
}
#heala-full-flow .hf-pro-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
#heala-full-flow .hf-pro-plans .hf-price {
  display: block;
  margin: 0;
  min-height: 119px;
  padding: 15px;
  position: relative;
}
#heala-full-flow .hf-pro-plans .hf-price[aria-pressed="true"] {
  padding: 14px;
}
#heala-full-flow .hf-pro-plans .hf-price b {
  display: block;
}
#heala-full-flow .hf-pro-plans .hf-price strong {
  font-size: 23px;
  letter-spacing: -0.6px;
  display: block;
  margin-top: 12px;
}
#heala-full-flow .hf-pro-plans .hf-price small {
  font-size: 11px;
}
#heala-full-flow .hf-pro-plans .hf-tag {
  position: absolute;
  top: -12px;
  left: 10px;
  font-size: 9px;
  border: 1px solid var(--hf-line);
}
#heala-full-flow .hf-trial-line {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 12px;
  color: var(--hf-on);
  margin: 18px 0 0;
}
#heala-full-flow .hf-pro-screen .hf-sub {
  margin-bottom: 16px;
}
#heala-full-flow .hf-range:focus-visible {
  outline: 2px solid var(--hf-accent);
  outline-offset: 3px;
  border-radius: 8px;
}
@media (pointer: coarse) {
  #heala-full-flow .hf-nudge,
  #heala-full-flow .hf-reel-controls button {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }
}
@media (max-width: 360px) {
  #heala-full-flow .hf-number[data-output="sleep"] {
    font-size: 27px;
  }
}
@media (max-width: 360px) {
  #heala-full-flow .hf-slider {
    padding: 16px;
  }
  #heala-full-flow .hf-number {
    font-size: 37px;
  }
  #heala-full-flow .hf-reel-row {
    gap: 10px;
    padding-left: 0;
    padding-right: 0;
  }
  #heala-full-flow .hf-reel-row b {
    font-size: 13px;
  }
  #heala-full-flow .hf-reel-row small {
    font-size: 11px;
  }
  #heala-full-flow .hf-pro-plans .hf-price strong {
    font-size: 21px;
  }
}
/* Production shell: the same geometry as the approved preview. */
html,
body {
  min-height: 100%;
  background: #faf9fc !important;
  color: #21182f;
}
body {
  margin: 0;
  padding: 24px 12px;
}
body::before,
body::after {
  display: none !important;
}
[hidden],
#onboarding-legacy-controls {
  display: none !important;
}
#heala-full-flow {
  color-scheme: light;
  --hf-bg: #faf9fc;
  --hf-paper: #fff;
  --hf-ink: #21182f;
  --hf-muted: #746c80;
  --hf-line: #e8e2ef;
  --hf-soft: #f0e8ff;
  --hf-on: #6937b7;
}
#heala-full-flow .hf-brand {
  color: var(--hf-ink);
  text-decoration: none;
}
#heala-full-flow .hf-brand::after {
  content: none;
}
#heala-full-flow .hf-header {
  gap: 12px;
}
#heala-full-flow svg:not(.hp svg) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
#heala-full-flow .onboarding-language {
  position: static;
  margin: 0;
  max-width: 175px;
}
#heala-full-flow .onboarding-language select {
  width: 100%;
  max-width: 175px;
  padding: 10px;
  color: var(--hf-muted);
  background: var(--hf-paper);
  border: 1px solid var(--hf-line);
  border-radius: 12px;
  font-size: 12px;
}
#heala-full-flow .hf-step {
  min-width: 0;
  max-width: 90px;
}
#heala-full-flow h2:focus,
#heala-full-flow h1:focus {
  outline: none;
}
#heala-full-flow .hf-food-center svg {
  width: 24px;
  height: 24px;
}
#heala-full-flow .hf-range {
  touch-action: pan-y;
}
#heala-full-flow button:focus-visible,
#heala-full-flow a:focus-visible {
  outline: 3px solid #8254de;
  outline-offset: 3px;
}
#heala-full-flow .hf-next {
  background: #21182f;
  color: #fff;
}
#heala-full-flow #fun {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 0;
}
#heala-full-flow .step {
  padding: 0;
  min-height: 0;
}
#heala-full-flow .step:not(.on) {
  display: none;
}
#heala-full-flow .step.on {
  display: block;
  animation: hf-arrive 0.22s ease-out;
}
#heala-full-flow .q-head,
#heala-full-flow .acct-head {
  text-align: left;
  padding: 0;
  margin: 0 0 26px;
}
#heala-full-flow h1 {
  font-family: inherit;
  font-size: 32px;
  line-height: 1.12;
  font-weight: 750;
  letter-spacing: -1.2px;
  color: var(--hf-ink);
  margin: 0 0 13px;
}
#heala-full-flow h1 em {
  color: inherit;
  font-style: normal;
}
#heala-full-flow .sub,
#heala-full-flow .acct-head p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--hf-muted);
  margin: 0;
}
#heala-full-flow .eyebrow {
  color: var(--hf-on);
  font-size: 11px;
  letter-spacing: 1.4px;
}
#heala-full-flow #plan-recap,
#heala-full-flow #pw-your,
#heala-full-flow #acct-pet-wrap {
  display: none;
}
#heala-full-flow .acct-hero {
  display: block;
  padding: 0;
  margin: 0;
}
#heala-full-flow .acct-form,
#heala-full-flow #hf-account-fields {
  display: grid;
  gap: 15px;
}
#heala-full-flow .field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--hf-paper);
  border: 1px solid var(--hf-line);
  border-radius: 16px;
  padding: 14px 16px;
  color: var(--hf-ink);
}
#heala-full-flow .field > span {
  position: static;
  transform: none;
  font-size: 12px;
  color: var(--hf-muted);
}
#heala-full-flow .field input {
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--hf-ink);
  padding: 0;
  font-size: 16px;
  height: 30px;
  outline-offset: 4px;
  box-shadow: none;
}
#heala-full-flow .btn-main {
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: 17px;
  background: var(--hf-ink);
  color: white;
  box-shadow: none;
  font-size: 15px;
  font-weight: 650;
  padding: 14px 18px;
}
#heala-full-flow .btn-main::before,
#heala-full-flow .btn-main::after {
  display: none;
}
#heala-full-flow .btn-main:disabled {
  opacity: 0.4;
  cursor: default;
}
#heala-full-flow .acct-alt,
#heala-full-flow .btn-quiet {
  color: var(--hf-on);
  font-size: 13px;
  background: none;
  border: 0;
  padding: 12px;
}
#heala-full-flow .optin {
  margin: 0;
  color: var(--hf-ink);
}
#heala-full-flow .optin-text b {
  font-size: 13px;
}
#heala-full-flow .optin-text em {
  font-size: 11px;
  line-height: 1.5;
}
#heala-full-flow .acct-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 18px 0;
  font-size: 11px;
}
#heala-full-flow .acct-foot,
#heala-full-flow .tiny-legal {
  font-size: 11px;
  color: var(--hf-muted);
  line-height: 1.6;
  text-align: center;
}
#heala-full-flow .plan-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 24px 0 12px;
}
#heala-full-flow .plan-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  padding: 18px 12px;
  min-width: 0;
  border-radius: 18px;
  border: 1px solid var(--hf-line);
  background: var(--hf-paper);
  color: var(--hf-ink);
  min-height: 140px;
  text-align: left;
}
#heala-full-flow .plan-card.sel {
  background: var(--hf-soft);
  border-color: var(--hf-accent);
  box-shadow: inset 0 0 0 1px var(--hf-accent);
}
#heala-full-flow .plan-card .radio {
  display: none;
}
#heala-full-flow .plan-card .pp {
  text-align: left;
  margin: 0;
  max-width: 100%;
}
#heala-full-flow .plan-card .pp b {
  font-size: 22px;
  letter-spacing: -0.8px;
  overflow-wrap: anywhere;
}
#heala-full-flow .plan-card .pc b {
  font-size: 14px;
}
#heala-full-flow .plan-note {
  color: var(--hf-muted);
  font-size: 11px;
  white-space: normal;
}
#heala-full-flow .plan-flag {
  background: var(--hf-accent);
  color: white;
  font-size: 9px;
  padding: 4px 8px;
}
#heala-full-flow .pw-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  font-size: 11px;
}
#heala-full-flow .cta-row {
  margin-top: 20px;
}
#heala-full-flow .hf-atlas-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  background-image: url("assets/paywall-soft-icons.webp");
  background-size: 237.7143px 356.5714px;
  border-radius: 14px;
}
#heala-full-flow .hf-reel-row > div {
  min-width: 0;
}
#heala-full-flow .hf-reel-row b,
#heala-full-flow .hf-reel-row small {
  white-space: normal;
}
#heala-full-flow .hf-reel-row {
  height: 80px;
}
#heala-full-flow #restart-onboarding {
  position: static;
  display: block;
  width: auto;
  margin: 24px auto 0;
  padding: 8px 12px;
  font-size: 11px;
  background: none;
  color: var(--hf-muted);
  border: 0;
}
#heala-full-flow #restart-onboarding[hidden] {
  display: none !important;
}
#heala-full-flow #hf-creator {
  margin-top: 18px;
  font-size: 12px;
  color: var(--hf-muted);
}
#heala-full-flow .student-offer {
  color: var(--hf-on);
  background: var(--hf-soft);
  border-radius: 12px;
  padding: 12px;
}
#heala-full-flow .dl-box {
  padding: 0;
  background: none;
  border: 0;
}
@media (max-width: 500px) {
  body {
    padding: 0;
  }
  #heala-full-flow .hf-window {
    border: 0;
    border-radius: 0;
    min-height: 100dvh;
  }
  #heala-full-flow .hf-main {
    padding-bottom: max(26px, env(safe-area-inset-bottom));
  }
}
@media (prefers-reduced-motion: reduce) {
  #heala-full-flow .step.on {
    animation: none;
  }
}
#heala-full-flow {
  --bg: #faf9fc;
  --raised: #fff;
  --track: #f0e8ff;
  --tx: #21182f;
  --dim: #746c80;
  --faint: #82768d;
  --line: #e8e2ef;
  --line2: #d5c8e8;
  --ac: #8254de;
  --ac-soft: #f0e8ff;
  --ac-line: #b497e8;
  --ink: #21182f;
  --on-ac: #fff;
}
#heala-full-flow .cta-row {
  position: static;
  inset: auto;
  transform: none;
  width: 100%;
  max-width: none;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}
#heala-full-flow .step.on > * {
  animation: none;
}
#heala-full-flow .field > span {
  letter-spacing: 0;
  font-family: inherit;
  text-transform: none;
}
#heala-full-flow #pw-eyebrow {
  overflow-wrap: anywhere;
}
#heala-full-flow .plan-card:not(.sel) {
  box-shadow: none;
  border-color: var(--hf-line);
}
#heala-full-flow .hf-range-labels {
  gap: 8px;
}
#heala-full-flow .hf-range-labels span {
  text-align: center;
}
#heala-full-flow .hf-range-labels span:first-child {
  text-align: left;
}
#heala-full-flow .hf-range-labels span:last-child {
  text-align: right;
}
#heala-full-flow .hf-header { padding-top:calc(22px + env(safe-area-inset-top, 0px)); }
#heala-full-flow .hf-account-demo strong { overflow-wrap:anywhere; }
/* Safari-sized pages: reserve browser chrome with svh, and dock actions inside
   the shell instead of fixing them over content or the browser toolbar. */
@media (max-width: 600px) {
  html, body { height:100%; overflow:hidden; }
  body { padding:0; }
  #heala-full-flow { width:100%; height:100%; }
  #heala-full-flow .hf-window { height:min(100svh, var(--hf-keyboard-height, 100svh)); min-height:0; border:0; border-radius:0; display:flex; flex-direction:column; }
  #heala-full-flow .hf-header { flex:none; padding:10px 20px; padding-top:max(10px,env(safe-area-inset-top)); }
  #heala-full-flow .hf-brand { font-size:23px; }
  #heala-full-flow .onboarding-language select { min-height:36px; padding:7px 10px; }
  #heala-full-flow .hf-main { display:flex; flex:1; min-height:0; flex-direction:column; padding:8px 20px max(10px,env(safe-area-inset-bottom)); }
  #heala-full-flow .hf-nav { flex:none; gap:10px; margin:0 0 10px; }
  #heala-full-flow #restart-onboarding { flex:none; width:36px; height:36px; min-height:36px; padding:0; margin:0; }
  #heala-full-flow #restart-onboarding span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  #heala-full-flow #restart-onboarding::before { content:'↺'; font-size:24px; }
  #heala-full-flow #hf-setup, #heala-full-flow #fun, #heala-full-flow #fun > .step.on { display:flex; flex-direction:column; flex:1; min-height:0; }
  #heala-full-flow .hf-screen-content { flex:1; min-height:0; overflow:auto; overscroll-behavior-y:contain; scrollbar-width:thin; padding:2px 2px 4px; }
  #heala-full-flow .hf-content { min-height:0; }
  #heala-full-flow .hf-footer, #heala-full-flow .hf-screen-actions { flex:none; margin:0; padding-top:10px; background:var(--hf-bg); }
  #heala-full-flow .hf-next, #heala-full-flow .btn-main { min-height:48px; padding:12px 16px; border-radius:15px; }
  #heala-full-flow .hf-footer p { margin:6px 0 0; font-size:10px; line-height:1.3; }
  #heala-full-flow h2, #heala-full-flow h1 { font-size:27px; line-height:1.1; margin-bottom:8px; letter-spacing:-.8px; }
  #heala-full-flow .hf-eyebrow { font-size:10px; margin-bottom:8px; }
  #heala-full-flow .hf-sub, #heala-full-flow .sub, #heala-full-flow .acct-head p { font-size:13px; line-height:1.4; margin-bottom:16px; }
  #heala-full-flow .hf-welcome h2 { font-size:35px; line-height:1.02; margin:12px 0; }
  #heala-full-flow .hf-illustration { margin-top:16px; padding:8px 14px; border-radius:18px; }
  #heala-full-flow .hf-promise { padding:11px 0; gap:12px; }
  #heala-full-flow .hf-promise b { font-size:13px; }
  #heala-full-flow .hf-promise small { font-size:11px; line-height:1.35; margin-top:3px; }
  #heala-full-flow .hf-promise>span { width:32px; height:32px; border-radius:11px; }
  #heala-full-flow #hf-creator { margin-top:8px; }
  #heala-full-flow .hf-options { gap:8px; }
  #heala-full-flow .hf-choice { min-height:66px; padding:12px; gap:10px; border-radius:15px; }
  #heala-full-flow .hf-choice[aria-pressed=true] { padding:11px; }
  #heala-full-flow .hf-choice b { font-size:14px; }
  #heala-full-flow .hf-choice small { font-size:11px; margin-top:3px; }
  #heala-full-flow .hf-note { font-size:11px; line-height:1.4; padding-top:10px; }
  #heala-full-flow .hf-segment { margin-bottom:10px; }
  #heala-full-flow .hf-segment button { min-height:38px; padding:8px; }
  #heala-full-flow .hf-slider { margin:8px 0; padding:12px 15px; border-radius:17px; }
  #heala-full-flow .hf-value-line { margin:3px 0; }
  #heala-full-flow .hf-number { font-size:34px; }
  #heala-full-flow .hf-number[data-output=sleep] { font-size:28px; }
  /* Was 32px, which is smaller than the thumb once the track got taller —
     the control clipped at the top and bottom on exactly the screens this
     breakpoint is for. Keep the touch target generous; it is a phone. */
  #heala-full-flow .hf-range { height:40px; }
  #heala-full-flow .hf-ruler { height:6px; }
  #heala-full-flow .hf-range-labels { font-size:9px; margin-top:4px; }
  #heala-full-flow .hf-nudge { width:40px; min-width:40px; height:40px; }
  #heala-full-flow .hf-detail { margin:8px 0; font-size:11px; line-height:1.4; }
  #heala-full-flow .hf-sleep-scene { padding:10px 14px; margin-bottom:10px; }
  #heala-full-flow .hf-sleep-scene b { font-size:18px; }
  #heala-full-flow .hf-quiet { min-height:36px; padding:8px 4px; margin-top:4px; font-size:12px; }
  #heala-full-flow .hf-counts { margin-bottom:12px; }
  #heala-full-flow .hf-count { min-height:62px; padding:8px 0; border-radius:14px; }
  #heala-full-flow .hf-count b { font-size:24px; }
  #heala-full-flow .hf-weekbox { padding:12px; }
  #heala-full-flow .hf-weektop { margin-bottom:12px; }
  #heala-full-flow .hf-day i { height:34px; margin-top:6px; }
  #heala-full-flow .hf-legend { margin-top:10px; }
  #heala-full-flow .hf-daypicker { margin-top:8px; padding:12px; }
  #heala-full-flow .hf-daypicker h3 { margin:0 0 6px; font-size:15px; }
  #heala-full-flow .hf-daypicker p { font-size:11px; margin:0 0 10px; }
  #heala-full-flow .hf-daybuttons button { min-height:48px; padding:6px 2px; }
  #heala-full-flow .hf-food-ring { width:168px; height:168px; padding:10px; margin:14px auto; }
  #heala-full-flow .hf-food-center b { font-size:36px; }
  #heala-full-flow .hf-food-macros { gap:8px; }
  #heala-full-flow .hf-food-macros>div { padding:12px 5px; }
  #heala-full-flow .hf-food-macros small { font-size:10px; }
  #heala-full-flow .hf-food-macros b { font-size:18px; }
  #heala-full-flow .hf-workout-promise { margin-top:12px; padding:12px; }
  #heala-full-flow .q-head, #heala-full-flow .acct-head { margin:0 0 10px; }
  #heala-full-flow .acct-hero { flex:none; }
  #heala-full-flow .acct-form { display:flex; flex-direction:column; flex:1; min-height:0; gap:6px; }
  #heala-full-flow #hf-account-fields { display:flex; flex-direction:column; gap:8px; }
  #heala-full-flow #hf-account-fields>* { flex-shrink:0; }
  #heala-full-flow .field { padding:8px 12px; border-radius:13px; gap:2px; }
  #heala-full-flow .field>span { font-size:11px; }
  #heala-full-flow .field input { height:28px; }
  #heala-full-flow .optin-text b { font-size:11px; font-weight:500; }
  #heala-full-flow .acct-form .form-closed { padding:10px 12px; margin:2px 0; font-size:11px; line-height:1.35; }
  #heala-full-flow .acct-trust { display:none; }
  #heala-full-flow .acct-foot { flex:none; margin:3px 0; font-size:10px; line-height:1.3; }
  #heala-full-flow .acct-foot~a { font-size:10px; }
  #heala-full-flow .acct-alt { flex:none; min-height:36px; padding:8px; margin:0; font-size:11px; }
  #heala-full-flow #acct-btn { flex:none; margin:0; }
  #heala-full-flow .hf-success { width:48px; height:48px; margin-bottom:14px; border-radius:16px; }
  #heala-full-flow [data-step=checkout] h1 { font-size:25px; }
  #heala-full-flow #pw-eyebrow { font-size:9px; margin-bottom:7px; }
  #heala-full-flow [data-step=checkout] .sub { margin-bottom:6px; }
  #heala-full-flow .hf-reel-window { height:160px; }
  #heala-full-flow .hf-reel-controls { margin:3px 0; gap:10px; }
  #heala-full-flow .hf-reel-controls button { width:36px; min-width:36px; height:36px; }
  #heala-full-flow .plan-stack { margin:16px 0 6px; gap:8px; }
  #heala-full-flow .plan-card { min-height:110px; padding:12px 10px; gap:4px; border-radius:15px; }
  #heala-full-flow .plan-card .pp b { font-size:21px; }
  #heala-full-flow .plan-card .pc b { font-size:12px; }
  #heala-full-flow .plan-note { font-size:10px; }
  #heala-full-flow .pw-trust { margin:6px 0; gap:8px; font-size:10px; }
  #heala-full-flow .pw-code { margin:4px 0; }
  #heala-full-flow .pw-code-open { padding:6px; font-size:11px; }
  #heala-full-flow .hf-screen-actions .cta-row { margin:0; gap:2px; }
  #heala-full-flow .btn-quiet { padding:8px; min-height:34px; font-size:11px; }
  #heala-full-flow .tiny-legal { font-size:10px; line-height:1.3; margin:4px 0 0; }
  #heala-full-flow .form-err:empty { display:none; }
  #heala-full-flow .sv-card { padding:16px; margin:10px 0; }
  #heala-full-flow .sv-actions { margin:0; gap:5px; }
  #heala-full-flow .sv-link { padding:8px; }
  #heala-full-flow .compute { padding:10px 0; }
  #heala-full-flow .dl-box>.pet { transform:scale(.75); margin:0 auto; }
}
/* While typing, fields, errors and legal/actions share one scroll surface.
   Never reserve a footer above the keyboard at the expense of input space. */
@media (max-width:600px) {
  #heala-full-flow[data-editing] .hf-window { position:fixed; top:var(--hf-keyboard-top, 0px); left:0; width:100%; height:var(--hf-keyboard-height, 100svh); }
  #heala-full-flow[data-editing][data-screen=account] .hf-header,
  #heala-full-flow[data-editing][data-screen=account] .hf-nav { display:none; }
  #heala-full-flow[data-editing][data-screen=account] .hf-main { padding:12px 20px; }
  #heala-full-flow[data-editing] #fun > [data-step=account].on { display:block; overflow-y:auto; overscroll-behavior-y:contain; scroll-padding:16px; padding-bottom:20px; }
  #heala-full-flow[data-editing] .acct-head h1 { font-size:21px; margin:0 0 12px; }
  #heala-full-flow[data-editing] .acct-head p { display:none; }
  #heala-full-flow[data-editing] .acct-form { display:flex; flex:none; gap:10px; }
  #heala-full-flow[data-editing] #hf-account-fields { flex:none; overflow:visible; padding:0; gap:10px; }
  #heala-full-flow[data-editing] .field { padding:10px 12px; }
  #heala-full-flow[data-editing] .field input { font-size:16px; }
}
@media(max-width:600px) and (max-height:700px) {
  #heala-full-flow .hf-header { padding-top:8px; padding-bottom:8px; }
  #heala-full-flow .hf-main { padding-top:5px; }
  #heala-full-flow .hf-nav { margin-bottom:6px; }
  #heala-full-flow h2, #heala-full-flow h1 { font-size:24px; }
  #heala-full-flow .hf-sub { margin-bottom:10px; }
  #heala-full-flow .hf-welcome h2 { font-size:32px; }
  #heala-full-flow .hf-illustration { margin-top:12px; }
  #heala-full-flow .hf-promise { padding:8px 0; }
  #heala-full-flow .hf-slider { padding:9px 13px; }
  #heala-full-flow .hf-value-line { margin:0; }
  #heala-full-flow .hf-ruler { display:none; }
  #heala-full-flow .hf-food-ring { width:140px; height:140px; margin:10px auto; }
  #heala-full-flow .hf-food-center b { font-size:32px; }
  #heala-full-flow .hf-food-center svg { width:20px; height:20px; }
  #heala-full-flow .hf-food-macros>div { padding:9px 4px; }
  #heala-full-flow [data-step=checkout] h1 { font-size:22px; }
  #heala-full-flow [data-step=checkout] .q-head .sub { display:none; }
  #heala-full-flow [data-step=checkout] .hf-reel-window { height:120px; }
  #heala-full-flow .pw-trust { display:none; }
}
@media(prefers-reduced-motion:no-preference) {
  #heala-full-flow .hf-next, #heala-full-flow .hf-back, #heala-full-flow .btn-main { transition:transform 100ms ease, opacity 100ms ease; }
  #heala-full-flow .hf-next:active:not(:disabled), #heala-full-flow .hf-back:active:not(:disabled), #heala-full-flow .btn-main:active:not(:disabled) { transform:scale(.985); }
}
@media(max-width:600px) and (max-height:700px) {
  #heala-full-flow[data-screen=nights] .hf-range-labels { display:none; }
  #heala-full-flow .acct-form .form-closed { padding:8px 10px; font-size:10px; }
  #heala-full-flow .acct-head h1 { font-size:23px; }
  #heala-full-flow #hf-account-fields { gap:6px; }
  #heala-full-flow .field { padding:6px 10px; }
  #heala-full-flow .acct-head p { margin-bottom:8px; }
}
@media(max-width:600px) and (max-height:620px) {
  #heala-full-flow .hf-header { padding:5px 18px; }
  #heala-full-flow .hf-nav { margin-bottom:4px; }
  #heala-full-flow .hf-eyebrow { margin-bottom:5px; }
  #heala-full-flow .hf-sub { font-size:12px; margin-bottom:8px; }
  #heala-full-flow .hf-welcome h2 { font-size:29px; margin:8px 0; }
  #heala-full-flow .hf-illustration { margin-top:8px; }
  #heala-full-flow .hf-promise { padding:7px 0; }
  #heala-full-flow .hf-choice { min-height:58px; padding:9px; }
  #heala-full-flow .hf-choice[aria-pressed=true] { padding:8px; }
  #heala-full-flow .hf-choice small { font-size:10px; }
  #heala-full-flow .hf-slider { padding:7px 12px; margin:6px 0; }
  #heala-full-flow .hf-sleep-scene { padding:7px 10px; margin-bottom:6px; }
  #heala-full-flow .hf-sleep-scene > span { width:30px; height:30px; }
  #heala-full-flow .hf-sleep-scene b { margin-top:1px; }
  #heala-full-flow .hf-number { font-size:30px; }
  #heala-full-flow .hf-counts { margin-bottom:8px; }
  #heala-full-flow .hf-daypicker { margin:0; padding:8px; }
  #heala-full-flow .hf-daypicker p { margin-bottom:6px; font-size:10px; }
  #heala-full-flow .hf-daybuttons { gap:5px; }
  #heala-full-flow .hf-daybuttons button { min-height:44px; }
  #heala-full-flow .hf-daypicker .hf-status { margin-top:6px!important; min-height:0; }
  #heala-full-flow .hf-food-ring { width:124px; height:124px; margin:8px auto; }
  #heala-full-flow .hf-workout-promise { margin-top:8px; padding:8px; }
}
@media(max-width:600px) {
  #heala-full-flow [data-step=checkout]>.hf-screen-content { display:flex; flex-direction:column; }
  #heala-full-flow [data-step=checkout] .q-head, #heala-full-flow [data-step=checkout] #pw-code, #heala-full-flow [data-step=checkout] .student-offer { flex:none; }
  #heala-full-flow #hf-pro-features { flex:1; min-height:115px; display:flex; flex-direction:column; }
  #heala-full-flow [data-step=checkout] .hf-reel-window { flex:1; height:auto; min-height:80px; max-height:240px; }
  #heala-full-flow .hf-reel-controls { flex:none; }
  #heala-full-flow .hf-screen-actions .plan-stack { margin:4px 0 10px; }
  #heala-full-flow .hf-screen-actions .form-err { margin:4px 0; font-size:11px; line-height:1.4; }
}
@media(max-width:600px) {
  #heala-full-flow { line-height:1.4; }
  #heala-full-flow .hf-sleep-scene small, #heala-full-flow .hf-sleep-scene b { line-height:1.2; }
}
@media(max-width:600px) and (max-height:700px) {
  #heala-full-flow .hf-header { padding-top:max(8px,env(safe-area-inset-top)); }
}
@media(max-width:600px) and (max-height:620px) {
  #heala-full-flow .hf-header { padding-top:max(5px,env(safe-area-inset-top)); }
}
/* A quiet signup form: labels above soft inputs, one clear focus treatment. */
#heala-full-flow [data-step=account] .acct-head h1 { letter-spacing:-.8px; }
#heala-full-flow .acct-form .field { position:relative; padding:0; gap:6px; border:0; border-radius:0; background:none; box-shadow:none; }
#heala-full-flow .acct-form .field:focus-within { border:0; box-shadow:none; }
#heala-full-flow .acct-form .field > span { padding:0 2px; font-size:12px; font-weight:600; color:var(--hf-ink); line-height:1.3; }
#heala-full-flow .acct-form .field input { height:46px; min-height:46px; padding:0 14px; border:1px solid var(--hf-line); border-radius:12px; background:var(--hf-paper); font-size:16px; font-weight:400; letter-spacing:0; transition:border-color .15s,box-shadow .15s; }
#heala-full-flow .acct-form .field input::placeholder { color:var(--hf-muted); font-weight:400; opacity:.8; }
#heala-full-flow .acct-form .field input:focus { border-color:var(--hf-accent); box-shadow:0 0 0 3px var(--hf-soft); outline:none; }
#heala-full-flow .acct-form .hf-password-field input { padding-right:52px; }
#heala-full-flow .hf-password-toggle { position:absolute; right:2px; bottom:1px; display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:10px; background:transparent; color:var(--hf-muted); }
#heala-full-flow .hf-password-toggle svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; }
#heala-full-flow .hf-password-toggle[aria-pressed=true] { color:var(--hf-on); background:var(--hf-soft); }
#heala-full-flow .hf-password-toggle:focus-visible { outline:2px solid var(--hf-accent); outline-offset:2px; }
#heala-full-flow .acct-form .form-closed { padding:8px 11px; border:0; border-left:2px solid var(--hf-accent); border-radius:0 8px 8px 0; background:var(--hf-soft); color:var(--hf-muted); font-size:11px; font-weight:400; line-height:1.4; }
#heala-full-flow #acct-devgate > div { align-items:center; }
#heala-full-flow #acct-devgate .btn-ghost { min-height:44px; padding:0 14px; border:1px solid var(--hf-line); border-radius:12px; background:var(--hf-soft); color:var(--hf-on); font-size:12px; font-weight:600; }
#heala-full-flow #student-offer-account { margin:0; padding:8px 10px; border-radius:10px; background:var(--hf-soft); }
@media(max-width:600px) {
  #heala-full-flow #hf-account-fields { gap:12px; }
  #heala-full-flow .acct-head p { margin-bottom:14px; }
  #heala-full-flow[data-editing] #hf-account-fields { gap:14px; padding:4px; }
}
@media(prefers-reduced-motion:reduce) {
  #heala-full-flow .acct-form .field input { transition:none; }
}
/* Optional email consent: the whole row is a target, with an explicit check. */
#heala-full-flow .acct-form .optin { position:relative; align-items:center; gap:12px; min-height:58px; padding:10px 12px; border:1px solid var(--hf-line); border-radius:12px; background:var(--hf-paper); transition:background .15s,border-color .15s; }
#heala-full-flow .acct-form .optin:hover { opacity:1; }
#heala-full-flow .acct-form .optin-text { order:0; flex:1; gap:3px; }
#heala-full-flow .acct-form .optin-text b { font-family:inherit; font-size:12px; line-height:1.35; font-weight:600; color:var(--hf-ink); }
#heala-full-flow .acct-form .optin-text em { font-family:inherit; font-size:10px; line-height:1.35; font-weight:400; color:var(--hf-muted); }
#heala-full-flow .acct-form .optin-box { order:1; flex:0 0 22px; width:22px; height:22px; margin:0; border:1.5px solid var(--hf-muted); border-radius:7px; background:var(--hf-paper); }
#heala-full-flow .acct-form .optin-box svg { width:14px; height:14px; stroke:#fff; stroke-width:2.5; }
#heala-full-flow .acct-form .optin:has(input:checked) { background:var(--hf-soft); border-color:var(--hf-accent); }
#heala-full-flow .acct-form .optin input:checked ~ .optin-box { background:var(--hf-accent); border-color:var(--hf-accent); }
#heala-full-flow .acct-form .optin:has(input:focus-visible) { outline:2px solid var(--hf-accent); outline-offset:3px; }
#heala-full-flow .acct-form .optin input:focus-visible ~ .optin-box { box-shadow:none; }
@media(prefers-reduced-motion:reduce) {
  #heala-full-flow .acct-form .optin, #heala-full-flow .acct-form .optin-box, #heala-full-flow .acct-form .optin-box svg { transition:none; }
}
@media(max-width:600px) and (max-height:700px) {
  #heala-full-flow:not([data-editing]) #hf-account-fields { gap:8px; }
}
/* Pro: three readable features and a compact, anchored plan picker. */
#heala-full-flow [data-step=checkout] #pw-your,
#heala-full-flow [data-step=checkout] .pw-trust { display:none; }
#heala-full-flow [data-step=checkout] .q-head { margin-bottom:8px; }
#heala-full-flow [data-step=checkout] h1 { font-size:28px; margin-bottom:4px; }
#heala-full-flow [data-step=checkout] .q-head .sub { display:none; }
#heala-full-flow #pw-eyebrow { font-size:9px; letter-spacing:1px; margin:0 0 7px; }
#heala-full-flow #hf-pro-features { flex:1; min-height:192px; }
#heala-full-flow [data-step=checkout] .hf-reel-window { height:216px; min-height:192px; max-height:256px; margin:0; flex:1; mask-image:linear-gradient(transparent,#000 3%,#000 97%,transparent); }
#heala-full-flow .hf-reel-row { height:64px; gap:10px; padding:4px 0; }
#heala-full-flow .hf-reel-row>div { min-width:0; }
#heala-full-flow .hf-reel-row b { font-size:13px; line-height:1.25; }
#heala-full-flow .hf-reel-row small { font-size:11px; line-height:1.3; margin-top:3px; }
#heala-full-flow .hf-reel-window.is-reading { overflow-y:auto; }
#heala-full-flow .hf-reel-window.is-reading .hf-reel-track { transform:none!important; }
#heala-full-flow .hf-reel-window.is-reading [aria-hidden=true]:not(.hf-atlas-icon) { display:none; }
#heala-full-flow .hf-reel-window:focus-visible { outline:2px solid var(--hf-accent); outline-offset:-2px; border-radius:12px; }
#heala-full-flow [data-step=checkout] .plan-stack { margin:8px 0 10px; gap:10px; }
#heala-full-flow [data-step=checkout] .plan-card { position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:5px; min-height:106px; padding:13px 12px 11px; border:1px solid var(--hf-line); border-radius:17px; background:var(--hf-paper); }
#heala-full-flow [data-step=checkout] .plan-card.sel { background:var(--hf-soft); border-color:var(--hf-accent); box-shadow:inset 0 0 0 1px var(--hf-accent); }
#heala-full-flow [data-step=checkout] .plan-card .pc { padding-right:18px; }
#heala-full-flow [data-step=checkout] .plan-card .pc b { font-size:12px; line-height:1.3; }
#heala-full-flow [data-step=checkout] .plan-card .radio { display:block; position:absolute; top:14px; right:12px; width:15px; height:15px; border:1.5px solid var(--hf-line); border-radius:50%; background:var(--hf-paper); }
#heala-full-flow [data-step=checkout] .plan-card.sel .radio { border:4px solid var(--hf-accent); }
#heala-full-flow [data-step=checkout] .plan-card .pp { margin:2px 0 0; width:100%; }
#heala-full-flow [data-step=checkout] .plan-card .pp b { font-size:22px; line-height:1.15; letter-spacing:-.7px; overflow-wrap:anywhere; }
#heala-full-flow [data-step=checkout] .plan-card .pp s,
#heala-full-flow [data-step=checkout] .plan-badges { display:none; }
#heala-full-flow [data-step=checkout] .plan-flag { position:absolute; top:-9px; right:12px; left:auto; padding:3px 7px; border-radius:7px; font-size:8px; line-height:1.1; letter-spacing:.4px; }
#heala-full-flow [data-step=checkout] .plan-note { margin:0; font-size:10px; line-height:1.35; font-style:normal; }
#heala-full-flow #pw-legal { max-width:360px; margin:5px auto 0; font-size:11px; line-height:1.4; text-wrap:pretty; color:var(--hf-muted); }
#heala-full-flow [data-step=checkout] .btn-quiet { min-height:32px; padding:7px; font-size:12px; }
@media(max-width:600px) {
  #heala-full-flow[data-screen=checkout] .hf-screen-actions { padding-top:4px; }
  #heala-full-flow [data-step=checkout]>.hf-screen-content { flex:1; min-height:242px; }
}
@media(prefers-reduced-motion:reduce) {
  #heala-full-flow [data-step=checkout] .hf-reel-window { overflow-y:auto; }
  #heala-full-flow .hf-reel-track { transform:none!important; }
  #heala-full-flow .hf-reel-track>div[aria-hidden=true] { display:none; }
}
@media(max-width:600px) {
  #heala-full-flow[data-screen=checkout] .hf-nav { display:none; }
  #heala-full-flow[data-screen=checkout] .hf-main { padding-top:16px; }
  #heala-full-flow [data-step=checkout] .hf-reel-window { max-height:224px; }
}
/* Completion art is artwork, not a 20px UI icon or the legacy pet glow. */
#heala-full-flow .hf-completion-art { position:relative; display:grid; place-items:center; width:180px; height:180px; margin:0 auto 16px; border-radius:50%; background:radial-gradient(circle,var(--hf-soft),transparent 72%); }
#heala-full-flow .hf-completion-pet { --hp-size:180px; display:block; flex:none; }
#heala-full-flow .hf-completion-pet>svg { width:100%; height:100%; fill:initial; stroke:none; }
#heala-full-flow [data-step=download] .dl-box { width:100%; max-width:360px; margin:auto; padding:16px 0; text-align:center; }
#heala-full-flow [data-step=download] h1 { font-size:30px; margin:0 0 12px; }
#heala-full-flow [data-step=download] .sub { max-width:290px; margin:0 auto; font-size:14px; line-height:1.5; }
#heala-full-flow #dl-email-note { margin:20px auto 0; max-width:310px; padding:12px 16px; border:1px solid var(--hf-line); border-radius:14px; background:var(--hf-paper); color:var(--hf-muted); font-family:inherit; font-size:12px; line-height:1.5; letter-spacing:0; overflow-wrap:anywhere; }
#heala-full-flow #dl-email-note:empty { display:none; }
#heala-full-flow #store-btn { display:flex; align-items:center; justify-content:center; text-align:center; text-decoration:none; }
@media(max-width:600px) {
  #heala-full-flow[data-screen=download] .hf-nav { display:none; }
  #heala-full-flow [data-step=download]>.hf-screen-content { display:flex; flex-direction:column; }
  #heala-full-flow [data-step=download]>.hf-screen-actions { padding-top:12px; }
}
@media(max-width:600px) and (max-height:620px) {
  #heala-full-flow .hf-completion-art { width:140px; height:140px; margin-bottom:8px; }
  #heala-full-flow .hf-completion-pet { --hp-size:140px; }
}
#heala-full-flow [data-step=download] #restart-onboarding { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; height:auto; min-height:44px; margin:6px 0 0; padding:10px; border:0; border-radius:12px; background:transparent; color:var(--hf-muted); font-size:13px; }
#heala-full-flow [data-step=download] #restart-onboarding span { position:static; width:auto; height:auto; overflow:visible; clip-path:none; }
#heala-full-flow [data-step=download] #restart-onboarding::before { content:'↺'; font-size:18px; }
#heala-full-flow [data-step=download] #restart-onboarding[data-armed] { background:var(--hf-soft); color:var(--hf-on); }

/* ══ CHECKOUT: the discount card, beside the prices it explains ═══════════
   #pw-savings now lives in .hf-screen-actions directly above the plan cards
   (fitCommercialScreen). Before, it was the last item in the SCROLLING
   content, under a features reel already at its 192px floor, so on a
   390x668 phone it began 65px above the plan cards' top edge and the other
   87px was hidden behind them — sentence cut mid-line, border gone.

   In the actions slot it has to be slim, because every pixel it takes comes
   out of the reel. So it says two things, not four:
     • the row — "Web price  −10%" — the what
     • the foot — "Both prices below already include it" — the what-now,
       which is the one line that reads right when it sits ON the prices.
   The heading repeated the row's −10%, and the row's note ("for
   subscribing here instead of the App Store") is the why, which the label
   "Web price" already carries. Hidden here only; the old funnel keeps them. */
#heala-full-flow [data-step=checkout] #pw-savings {
  flex: none; margin: 0 0 8px; padding: 9px 12px 10px; border-radius: 14px;
}
#heala-full-flow [data-step=checkout] #pw-savings .pw-savings-h,
#heala-full-flow [data-step=checkout] #pw-savings .pw-savings-row em { display: none; }
#heala-full-flow [data-step=checkout] #pw-savings .pw-savings-row { align-items: center; }
#heala-full-flow [data-step=checkout] #pw-savings .pw-savings-row + .pw-savings-row { margin-top: 5px; }
#heala-full-flow [data-step=checkout] #pw-savings .pw-savings-row b { font-size: 13px; }
#heala-full-flow [data-step=checkout] #pw-savings .pw-savings-foot {
  margin: 6px 0 0; padding-top: 6px; font-size: 11px; line-height: 1.35;
}
/* The reel is the elastic part — it is a masked, auto-scrolling list built
   to be cut — so on a short screen it gives up a row rather than pushing the
   prices down. #hf-pro-features' explicit 192px floor was also LOWER than
   its own contents, which is what let the reel spill over the next block;
   both floors move together so that can't recur. */
@media (max-width: 600px) {
  #heala-full-flow [data-step=checkout] #hf-pro-features { min-height: 128px; }
  #heala-full-flow [data-step=checkout] .hf-reel-window { min-height: 128px; }
}
/* The content floor has to move WITH the reel floor. It was 242px — header
   plus a three-row reel — and a floor on the wrapper outranks any floor on
   what is inside it: with it in place the reel could never use its new 128px
   minimum, so on a short phone the actions (now carrying the discount card)
   were pushed down instead and the Start trial button slid under the fold.
   186 = the heading block plus a two-row reel. */
@media (max-width: 600px) {
  #heala-full-flow [data-step=checkout]>.hf-screen-content { min-height: 186px; }
}
/* An iPhone SE with Safari's bars showing is ~550px tall. There the card
   keeps its row — "Web price −10%" — and drops the footer line, because the
   Start trial button staying on screen matters more than a reassurance the
   row already implies. */
@media (max-width: 600px) and (max-height: 600px) {
  #heala-full-flow [data-step=checkout] #pw-savings .pw-savings-foot { display: none; }
}

/* ══ CHECKOUT: the US student offer (.edu) ════════════════════════════════
   One quiet line under the heading until it is tapped — an aside for the
   people it applies to, not a third plan — then an inline email step. It
   sits in the SCROLLING content, not the actions slot: opening it costs the
   features reel a row and can never push Start trial under the fold. */
#heala-full-flow [data-step=checkout] .edu-offer { flex: none; margin: 0 0 8px; }
#heala-full-flow .edu-open {
  display: block; width: 100%; padding: 9px 12px;
  border: 1px dashed var(--hf-line); border-radius: 12px; background: transparent;
  color: var(--hf-on); font: inherit; font-size: 12px; font-weight: 600; line-height: 1.35; text-align: left;
  cursor: pointer;
}
#heala-full-flow .edu-open[aria-expanded=true] {
  border-style: solid; border-color: var(--hf-accent); border-radius: 12px 12px 0 0; background: var(--hf-soft);
}
#heala-full-flow .edu-open:focus-visible { outline: 2px solid var(--hf-accent); outline-offset: 2px; }
#heala-full-flow .edu-panel {
  padding: 10px 12px 12px; border: 1px solid var(--hf-accent); border-top: 0;
  border-radius: 0 0 12px 12px; background: var(--hf-paper);
}
#heala-full-flow .edu-lede { margin: 0 0 8px; font-size: 11px; line-height: 1.4; color: var(--hf-muted); overflow-wrap: anywhere; }
#heala-full-flow .edu-row { display: flex; gap: 8px; }
#heala-full-flow .edu-row input {
  flex: 1; min-width: 0; height: 44px; padding: 0 12px;
  border: 1px solid var(--hf-line); border-radius: 12px; background: var(--hf-bg);
  color: var(--hf-ink); font: inherit; font-size: 16px;
}
#heala-full-flow .edu-row input:focus-visible { outline: 2px solid var(--hf-accent); outline-offset: 1px; }
#heala-full-flow .edu-row button {
  flex: none; min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px;
  background: var(--hf-ink); color: var(--hf-bg); font: inherit; font-size: 13px; font-weight: 650;
}
#heala-full-flow .edu-row button:disabled { opacity: .5; }
#heala-full-flow .edu-actions { display: flex; flex-wrap: wrap; gap: 2px 12px; }
#heala-full-flow .edu-actions .sv-link { padding: 6px 0; font-size: 12px; }
#heala-full-flow .edu-say { margin: 6px 0 0; font-size: 11px; line-height: 1.4; color: var(--hf-ink); }
#heala-full-flow .edu-say:empty { display: none; }
#heala-full-flow .edu-done {
  margin: 0; padding: 9px 12px; border-radius: 12px; background: var(--hf-soft);
  color: var(--hf-ink); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere;
}
#heala-full-flow .edu-done b { margin-right: 5px; color: var(--hf-on); font-size: 10px; letter-spacing: .6px; }
#heala-full-flow .edu-done em { font-style: normal; }
/* The student cards' struck regular price. The web-discount stamps stay
   hidden (see .plan-badges above); this one IS the offer, so on these two
   cards it shows, small, above the price it was cut from. */
#heala-full-flow [data-step=checkout] .plan-card[data-plan^="pro_student_us_"] .pp s {
  display: block; margin: 0 0 1px; font-size: 11px; font-weight: 500; line-height: 1.2;
  letter-spacing: 0; color: var(--hf-muted);
}
/* The .edu field is the paywall's only text input. While the keyboard is up
   the step scrolls as one column, as the account step does, so the field is
   never pinned under the plan cards — and the reel steps aside for it. */
@media (max-width: 600px) {
  #heala-full-flow[data-editing] #fun > [data-step=checkout].on { display: block; overflow-y: auto; overscroll-behavior-y: contain; padding-bottom: 20px; }
  #heala-full-flow[data-editing] [data-step=checkout] #hf-pro-features { display: none; }
}

/* ── Cardio tiles ─────────────────────────────────────────────────────────
   Nine movements and "not now", three to a row. The choice card spends 80px
   and a sentence per option — right for four considered answers, wrong for
   ten activities. */
#heala-full-flow .hf-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
#heala-full-flow .hf-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 70px;
  padding: 10px 4px;
  border: 1.5px solid var(--hf-line);
  border-radius: 14px;
  background: var(--hf-paper);
  color: var(--hf-ink);
  cursor: pointer;
}
#heala-full-flow .hf-tile .hf-icon {
  display: grid;
  place-items: center;
  color: var(--hf-muted);
}
#heala-full-flow .hf-tile .hf-icon svg {
  width: 20px;
  height: 20px;
}
#heala-full-flow .hf-tile b {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
#heala-full-flow .hf-tile[aria-pressed="true"] {
  border-color: var(--hf-accent);
  background: var(--hf-soft);
}
#heala-full-flow .hf-tile[aria-pressed="true"] .hf-icon,
#heala-full-flow .hf-tile[aria-pressed="true"] b {
  color: var(--hf-on);
}
/* "Not now" is the odd one out: last, alone, full width. */
#heala-full-flow .hf-tile[data-value="none"] {
  grid-column: 1 / -1;
  flex-direction: row;
  min-height: 48px;
}

/* ── Activity picker ─────────────────────────────────────────────────────
   Every activity the app can start: a search, six shelves, a four-up grid
   and a quiet "not now". Same picker as the app's HfActivityPicker. */
#heala-full-flow .hf-act-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--hf-line);
  border-radius: 12px;
  background: var(--hf-paper);
  color: var(--hf-muted);
}
#heala-full-flow .hf-act-search:focus-within {
  border-color: var(--hf-accent);
}
#heala-full-flow .hf-act-search svg:not(.hp svg) {
  width: 16px;
  height: 16px;
}
#heala-full-flow .hf-act-search input {
  flex: 1;
  min-width: 0;
  height: 40px;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  color: var(--hf-ink);
  font: inherit;
  font-size: 15px;
  -webkit-appearance: none;
  appearance: none;
}
#heala-full-flow .hf-act-search input::-webkit-search-cancel-button {
  display: none;
}
#heala-full-flow .hf-act-search input::placeholder {
  color: var(--hf-muted);
}
#heala-full-flow .hf-act-clear {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-right: -6px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--hf-muted);
  cursor: pointer;
}
#heala-full-flow .hf-act-clear[hidden] {
  display: none;
}
#heala-full-flow .hf-act-shelves {
  display: flex;
  gap: 6px;
  padding: 10px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
#heala-full-flow .hf-act-shelves::-webkit-scrollbar {
  display: none;
}
#heala-full-flow .hf-act-shelf {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 13px;
  border: 1px solid var(--hf-line);
  border-radius: 16px;
  background: var(--hf-paper);
  color: var(--hf-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
#heala-full-flow .hf-act-shelf[aria-selected="true"] {
  border-color: var(--hf-ink);
  background: var(--hf-ink);
  color: var(--hf-paper);
}
#heala-full-flow .hf-act-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
#heala-full-flow .hf-act-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 74px;
  padding: 9px 3px;
  border: 1.5px solid var(--hf-line);
  border-radius: 14px;
  background: var(--hf-paper);
  color: var(--hf-muted);
  font: inherit;
  cursor: pointer;
}
/* Two classes: the page-wide `svg:not(.hp svg)` strokes every icon and
   fills none, and these are filled glyphs lifted from the app's fonts. */
#heala-full-flow .hf-act-tile svg.hf-act-glyph {
  width: 22px;
  height: 22px;
  fill: currentColor;
  stroke: none;
}
#heala-full-flow .hf-act-tile b {
  color: var(--hf-ink);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 14px;
  text-align: center;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#heala-full-flow .hf-act-tile[aria-checked="true"] {
  border-color: var(--hf-accent);
  background: var(--hf-soft);
  color: var(--hf-on);
}
#heala-full-flow .hf-act-tile[aria-checked="true"] b {
  color: var(--hf-on);
}
#heala-full-flow .hf-act-tile[aria-checked="true"]::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--hf-accent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.3 2.3 4.7-4.9' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 16px 16px no-repeat;
}
#heala-full-flow .hf-act-tile:focus-visible,
#heala-full-flow .hf-act-shelf:focus-visible,
#heala-full-flow .hf-act-none:focus-visible {
  outline: 2px solid var(--hf-accent);
  outline-offset: 2px;
}
#heala-full-flow .hf-act-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px 0;
  color: var(--hf-muted);
  font-size: 13.5px;
  line-height: 19px;
}
#heala-full-flow .hf-act-none {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  margin-top: 10px;
  padding: 0 14px;
  border: 1.5px solid var(--hf-line);
  border-radius: 14px;
  background: var(--hf-paper);
  color: var(--hf-muted);
  font: inherit;
  cursor: pointer;
}
#heala-full-flow .hf-act-none b {
  flex: 1;
  color: var(--hf-ink);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}
#heala-full-flow .hf-act-none[aria-checked="true"] {
  border-color: var(--hf-accent);
  background: var(--hf-soft);
  color: var(--hf-on);
}
#heala-full-flow .hf-act-none[aria-checked="true"] b {
  color: var(--hf-on);
}
#heala-full-flow .hf-act-none[aria-checked="true"] .hf-radio {
  border: 5px solid var(--hf-accent);
  background: var(--hf-paper);
}

/* ── Weight field ─────────────────────────────────────────────────────────
   Type first, drag second: the number is an input, and the ruler moves
   relative to where the drag began under a fixed needle. */
#heala-full-flow .hf-weight-box {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  border: 1.5px solid var(--hf-line);
  background: var(--hf-bg);
  border-radius: 16px;
  padding: 4px 10px;
  cursor: text;
}
#heala-full-flow .hf-weight-box:focus-within {
  border-color: var(--hf-accent);
  background: var(--hf-paper);
}
#heala-full-flow .hf-weight-input {
  width: 4.2ch;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: center;
  font: inherit;
  font-size: 40px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -1.4px;
  color: var(--hf-ink);
  font-variant-numeric: tabular-nums;
  outline: none;
}
#heala-full-flow .hf-weight-box small {
  font-size: 14px;
  font-weight: 600;
  color: var(--hf-muted);
}
#heala-full-flow .hf-dial {
  position: relative;
  height: 50px;
  margin-top: 4px;
  overflow: hidden;
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  border-radius: 10px;
  /* The edges fade so the tape reads as passing under the needle, not as a
     chart that ends. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
}
#heala-full-flow .hf-dial:focus-visible {
  outline: 2px solid var(--hf-accent);
  outline-offset: 2px;
}
/* ⚠️ Two classes, not one: `#heala-full-flow svg:not(.hp svg)` sizes every
   icon to 20px and its :not() argument adds a class AND an element, which
   out-ranks `#heala-full-flow .hf-dial-ticks` — the ruler drew all its ticks
   into a 20×20 box. */
#heala-full-flow .hf-dial svg.hf-dial-ticks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 46px;
}
#heala-full-flow .hf-dial-ticks line {
  stroke: var(--hf-line);
  stroke-width: 1;
}
#heala-full-flow .hf-dial-ticks line.major {
  stroke: var(--hf-muted);
  stroke-width: 1.5;
}
#heala-full-flow .hf-dial-ticks text {
  fill: var(--hf-muted);
  font-size: 11px;
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
}
#heala-full-flow .hf-dial-needle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 30px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--hf-accent);
  pointer-events: none;
}
#heala-full-flow .hf-weight-hint {
  margin: 6px 0 0;
  text-align: center;
  font-size: 11px;
  color: var(--hf-muted);
}