/* Treatment finder. Loaded only on the pages that carry it (/ and
   /treatment-finder). Everything is scoped under .tf, plus the homepage band
   (.home-finder), so nothing here can touch the rest of a page. Colors and type
   come from the tokens in site.css; the only new values are the muted surfaces
   at the top of .tf. The site is light-only, and so is this.

   No inline styles exist to override: the CSP strips them, so every state the
   controller shows is a class or an attribute selector here. */

.tf {
  --tf-surface: #FFFFFF;
  --tf-warn-bg: #F3EEE3;
  --tf-warn-fg: #6B4E16;
  --tf-meter-off: #E3E6E9;
  --tf-sent-bg: #EEF3F6;
  font-family: var(--font-body);
  color: var(--deep-slate);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.tf [hidden] { display: none !important; }
/* Reserve space before the deferred render so the page does not jump. */
.tf:not([data-ready]) { min-height: 26rem; }
.tf[data-placement="home"]:not([data-ready]) { min-height: 15rem; }
.tf a:not(.btn-primary):not(.btn-secondary) { color: inherit; }
.tf :focus-visible { outline: 2px solid var(--deep-slate); outline-offset: 2px; }

/* ---- the raised card ---------------------------------------------------- */

.tf-quiz {
  background: var(--tf-surface);
  border-top: 3px solid var(--ice-blue);
  border-radius: 2px;
  box-shadow: 0 12px 40px rgba(42, 51, 61, 0.20);
  padding: clamp(1.25rem, 4vw, 2.75rem);
  scroll-margin-top: 1rem;
}

.tf-top { display: flex; align-items: center; gap: 0.75rem 1rem; margin: -0.25rem 0 1.5rem; }
.tf-back {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; padding: 0 0.5rem 0 0;
  background: none; border: 0; color: var(--muted); cursor: pointer; flex: none;
}
.tf-back:hover { color: var(--deep-slate); }
.tf-progress { flex: 1; display: flex; gap: 4px; min-width: 0; }
.tf-progress span { flex: 1; height: 4px; background: var(--tf-meter-off); }
.tf-progress span.is-on { background: var(--deep-slate); }
.tf-stepof {
  flex: none; margin: 0; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.tf-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- screens -------------------------------------------------------------- */

.tf-screen { display: grid; gap: 1rem; min-width: 0; }
.tf-q {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(1.625rem, 3.2vw, 2.25rem);
  line-height: 1.1; margin: 0; text-wrap: balance; max-width: 34ch;
}
.tf-q:focus { outline: none; }
.tf-lede { font-size: 1.0625rem; margin: 0; max-width: 46ch; }

@media (prefers-reduced-motion: no-preference) {
  .tf-in-fwd { animation: tf-in-fwd 240ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .tf-in-back { animation: tf-in-back 240ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
}
@keyframes tf-in-fwd { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes tf-in-back { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }

.tf-n, .tf-count, .tf-eyebrow {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); margin: 0;
}
.tf-h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.75rem; line-height: 1.12; margin: 0; text-wrap: balance; }
.tf-h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; line-height: 1.15; margin: 0; }
.tf-h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.3125rem; line-height: 1.15; margin: 0; }
.tf-note { font-size: 0.8125rem; color: var(--muted); margin: 0; }

/* Every choice is a whole-box button: 48px tall at least, full width on
   phones. */
.tf-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.625rem; }
.tf-tile, .tf-option, .tf-chip {
  font: inherit; color: var(--deep-slate); background: var(--tf-surface); text-align: left;
  border: 1px solid var(--soft-gray); border-radius: 2px; cursor: pointer;
  display: flex; align-items: center; gap: 0.75rem; min-height: 3rem; width: 100%;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.tf-tile { min-height: 4.25rem; padding: 0.875rem 1.125rem; font-size: 1.0625rem; font-weight: 500; }
.tf-option { padding: 0.75rem 1rem; font-size: 1rem; }
.tf-tile:hover, .tf-option:hover, .tf-chip:hover:not(:disabled) { border-color: var(--deep-slate); }
.tf-tile[aria-pressed="true"], .tf-option[aria-pressed="true"], .tf-chip[aria-pressed="true"] {
  background: var(--deep-slate); border-color: var(--deep-slate); color: var(--ivory);
}

/* Check box for multi-select tiles, radio dot for single choice. */
.tf-tile-mark, .tf-option-mark { flex: none; width: 1.125rem; height: 1.125rem; border: 1.5px solid currentColor; position: relative; }
.tf-option-mark { border-radius: 50%; }
.tf-tile[aria-pressed="true"] .tf-tile-mark { background: var(--ice-blue); border-color: var(--ice-blue); }
.tf-tile[aria-pressed="true"] .tf-tile-mark::after {
  content: ""; position: absolute; left: 0.3125rem; top: 0.0625rem; width: 0.3125rem; height: 0.625rem;
  border: solid var(--deep-slate); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.tf-option[aria-pressed="true"] .tf-option-mark { border-color: var(--ice-blue); }
.tf-option[aria-pressed="true"] .tf-option-mark::after {
  content: ""; position: absolute; inset: 0.1875rem; border-radius: 50%; background: var(--ice-blue);
}

.tf-options { display: grid; gap: 0.5rem; max-width: 40rem; }
.tf-options--yn { grid-template-columns: 1fr 1fr; max-width: 24rem; }

.tf-groups { display: grid; gap: 1.25rem; }
.tf-group { display: grid; gap: 0.5rem; }
.tf-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tf-chip {
  width: auto; max-width: 100%; display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 0.125rem; padding: 0.625rem 1rem; font-size: 0.9375rem; line-height: 1.3;
}
.tf-chip small { display: block; font-size: 0.75rem; color: var(--muted); }
.tf-chip[aria-pressed="true"] small { color: inherit; opacity: 0.85; }
.tf-chip:disabled { opacity: 0.45; cursor: not-allowed; }
.tf-chips--stack { display: grid; max-width: 40rem; }
.tf-chips--stack .tf-chip { width: 100%; }

.tf-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem;
  margin: 0.5rem 0 0; padding-top: 1rem; border-top: var(--rule);
}
.tf-actions .tf-next { margin-left: auto; }
.tf-actions--start { border-top: 0; padding-top: 0.25rem; }
.tf-start { padding: 1rem 1.75rem; font-size: 0.8125rem; }
.tf-linkbtn {
  font: inherit; font-size: 0.875rem; background: none; border: 0; padding: 0.625rem 0; min-height: 2.75rem;
  color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.tf-linkbtn:hover { color: var(--deep-slate); }

@media (max-width: 700px) {
  .tf-tiles { grid-template-columns: minmax(0, 1fr); }
  .tf-chips { display: grid; }
  .tf-chip { width: 100%; }
  .tf-options--yn { max-width: none; }
  .tf-actions .tf-next { flex: 1 1 100%; justify-content: center; margin-left: 0; }
  .tf-top { flex-wrap: wrap; }
  .tf-progress { order: 3; flex: 1 1 100%; }
  .tf-stepof { margin-left: auto; }
}

/* ---- results -------------------------------------------------------------- */

.tf-screen--results { gap: 1.5rem; }
.tf-summary {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 2rem;
  border-top: 1px solid var(--deep-slate); padding-top: 1rem;
}
@media (max-width: 700px) { .tf-summary { grid-template-columns: minmax(0, 1fr); } }
.tf-summary-col { display: grid; gap: 0.375rem; align-content: start; }
.tf-picked { margin: 0; padding-left: 1.125rem; display: grid; gap: 0.25rem; }
.tf-fst { font-family: var(--font-display); font-size: 2rem; line-height: 1; margin: 0; }
.tf-banner { background: var(--tf-warn-bg); color: var(--tf-warn-fg); padding: 0.75rem 0.875rem; font-size: 0.875rem; margin: 0; }
.tf-sent { background: var(--tf-sent-bg); border-left: 3px solid var(--ice-blue); padding: 0.875rem 1rem; margin: 0; }
.tf-leadcard { display: grid; gap: 0.875rem; border: 1px solid var(--deep-slate); padding: clamp(1rem, 3vw, 1.5rem); }

/* "Can help all 3 of your concerns": treatments that cover more than one of
   the visitor's picks, flagged on their cards, in the compare table and in
   the box above the per-concern lists. Slate on ice blue is 7.9:1. The
   selector carries .tf so it outranks `.tf-card p`, which would grey it. */
.tf .tf-multi {
  justify-self: start; display: inline-block; margin: 0; padding: 0.25rem 0.5rem;
  background: var(--ice-blue); color: var(--deep-slate);
  font-family: var(--font-mono); font-size: 0.65625rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
}
.tf .tf-multi--sm { display: block; width: max-content; max-width: 100%; margin-top: 0.375rem; font-size: 0.59375rem; }
.tf-multibox {
  display: grid; gap: 0.75rem; background: var(--tf-surface);
  border: 1px solid var(--deep-slate); border-top: 3px solid var(--ice-blue); padding: clamp(1rem, 3vw, 1.5rem);
}
.tf-multilist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
.tf-multilist li { display: grid; gap: 0.5rem; border: 1px solid var(--soft-gray); padding: 0.75rem 0.875rem; min-width: 0; }
.tf-multi-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; align-items: baseline; }
.tf-multi-top a { font-family: var(--font-display); font-weight: 600; font-size: 1.1875rem; line-height: 1.2; text-decoration: none; }
.tf-multi-top a:hover { text-decoration: underline; }
.tf-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; font-size: 0.8125rem; color: var(--muted); margin: 0; }
.tf-meter { display: inline-flex; gap: 3px; vertical-align: middle; }
.tf-meter i { width: 18px; height: 5px; background: var(--tf-meter-off); }
.tf-meter i.on { background: var(--deep-slate); }

.tf-concern { display: grid; gap: 0.25rem; border-top: var(--rule); padding-top: 1.125rem; min-width: 0; }
.tf-concern-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.375rem 1rem; align-items: baseline; margin-bottom: 0.375rem; }
.tf-concern-head a { font-size: 0.8125rem; color: var(--muted); }
.tf-tier { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; padding: 0.75rem 0; }
.tf-tier + .tf-tier { border-top: 1px dashed var(--soft-gray); }
@media (max-width: 560px) { .tf-tier { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; } }
.tf-tier-tag { display: grid; gap: 0.25rem; align-content: start; }
.tf-tier-tag b { font-family: var(--font-mono); font-weight: 500; font-size: 0.71875rem; letter-spacing: 0.12em; text-transform: uppercase; }
.tf-tier-tag span { font-size: 0.75rem; color: var(--muted); }
.tf-tier-note { font-size: 0.8125rem; color: var(--muted); margin: 0 0 0.375rem; }
.tf-items { display: grid; gap: 0.75rem; min-width: 0; }

.tf-card { display: grid; gap: 0.375rem; background: var(--tf-surface); border: 1px solid var(--soft-gray); padding: 0.875rem 1rem; min-width: 0; }
.tf-card p { margin: 0; color: var(--muted); max-width: 65ch; }
.tf-card-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; align-items: baseline; }
.tf-card-top a { text-decoration: none; }
.tf-card-top a:hover { text-decoration: underline; }
.tf-price { font-family: var(--font-mono); font-size: 0.8125rem; white-space: nowrap; }
.tf-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem 0.875rem; margin: 0.25rem 0 0; font-size: 0.8125rem; }
@media (max-width: 560px) { .tf-facts { grid-template-columns: minmax(0, 1fr); } }
.tf-facts dt { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.tf-facts dd { margin: 0.125rem 0 0; }
.tf-card .tf-flag { font-size: 0.8125rem; background: var(--tf-warn-bg); color: var(--tf-warn-fg); padding: 0.375rem 0.625rem; }
.tf-card .tf-links { display: flex; flex-wrap: wrap; gap: 0.375rem 1.125rem; font-size: 0.84375rem; font-weight: 500; color: var(--deep-slate); }

.tf-notfit { background: #F1F2F4; padding: 0.875rem 1rem; display: grid; gap: 0.5rem; }
.tf-notfit ul { margin: 0; padding-left: 1.125rem; display: grid; gap: 0.375rem; }

/* Compare table. Above 700px it fits its box: no fixed minimum width, cells
   wrap, and only the price keeps to one line. If a column still cannot hold
   it, the table scrolls inside its own wrapper (never the page), with soft
   edge shadows and a text cue that the controller shows only when it scrolls. */
.tf-compare { display: grid; gap: 0.75rem; min-width: 0; }
.tf-scrollcue { display: none; }
.tf-compare.tf-scrolls .tf-scrollcue { display: block; }
.tf-tablewrap {
  overflow-x: auto; border: 1px solid var(--soft-gray); max-width: 100%;
  background:
    linear-gradient(to right, var(--tf-surface) 30%, rgba(255, 255, 255, 0)) left center / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--tf-surface) 30%, rgba(255, 255, 255, 0)) right center / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(42, 51, 61, 0.18), rgba(42, 51, 61, 0)) left center / 0.875rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(42, 51, 61, 0.18), rgba(42, 51, 61, 0)) right center / 0.875rem 100% no-repeat scroll,
    var(--tf-surface);
}
.tf table { border-collapse: collapse; width: 100%; font-size: 0.84375rem; }
.tf th, .tf td { text-align: left; vertical-align: top; padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--soft-gray); }
.tf thead th { font-family: var(--font-mono); font-weight: 500; font-size: 0.65625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.tf tbody th { font-weight: 600; min-width: 8rem; }
.tf tbody tr:last-child > * { border-bottom: 0; }
.tf-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tf-helps { display: grid; gap: 0.125rem; }
.tf-helps b { font-family: var(--font-mono); font-weight: 500; font-size: 0.65625rem; letter-spacing: 0.1em; text-transform: uppercase; }

/* 700px and below: every row becomes its own card. */
@media (max-width: 700px) {
  .tf-tablewrap { border: 0; background: none; overflow: visible; }
  .tf table, .tf tbody, .tf tr, .tf tbody th, .tf td { display: block; }
  .tf thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
  }
  .tf tbody { display: grid; gap: 0.625rem; }
  .tf tbody tr { border: 1px solid var(--soft-gray); background: var(--tf-surface); padding: 0.75rem 0.875rem; }
  .tf tbody th { border: 0; padding: 0 0 0.375rem; font-size: 0.9375rem; min-width: 0; }
  .tf td { border: 0; padding: 0.3125rem 0; display: grid; grid-template-columns: 6.75rem minmax(0, 1fr); gap: 0.75rem; }
  .tf td::before {
    content: attr(data-label); font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--muted); padding-top: 0.1875rem;
  }
  .tf tbody tr:last-child > * { border-bottom: 0; }
  .tf-num { white-space: normal; }
}

.tf-cta { display: grid; gap: 0.75rem; border: 1px solid var(--deep-slate); padding: clamp(1.125rem, 3vw, 1.75rem); }
.tf-book { padding: 1rem 1.5rem; font-size: 0.75rem; }
.tf-btnrow { display: flex; flex-wrap: wrap; gap: 0.625rem 1rem; align-items: center; margin: 0; }
.tf-restart { margin: 0; }

/* Phones: Book stays in reach while the results scroll. Shown by the
   controller only while the results are on screen and the full call to action
   is not. */
.tf-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background: var(--ivory); border-top: var(--rule); box-shadow: 0 -8px 24px rgba(42, 51, 61, 0.12);
}
.tf-bar .btn-primary { flex: 1; justify-content: center; }
.tf-bar-call {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.875rem; border: 1px solid var(--soft-gray);
  text-decoration: none;
}
@media (min-width: 701px) { .tf-bar { display: none !important; } }
@media (prefers-reduced-motion: no-preference) {
  .tf-bar { animation: tf-bar-in 200ms ease-out both; }
}
@keyframes tf-bar-in { from { transform: translateY(100%); } to { transform: none; } }

/* ---- the lead form -------------------------------------------------------- */

.tf-lead { display: grid; gap: 0.75rem; max-width: 40rem; }
.tf-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (max-width: 520px) { .tf-row2 { grid-template-columns: 1fr; } }
.tf-f { display: grid; gap: 0.25rem; font-size: 0.8125rem; color: var(--muted); }
.tf-f input {
  font: inherit; font-size: 1rem; color: var(--deep-slate); background: var(--tf-surface);
  border: 1px solid var(--soft-gray); padding: 0.6875rem 0.75rem; width: 100%; min-height: 3rem;
}
.tf-f input:focus { border-color: var(--deep-slate); }
.tf-consent { display: flex; gap: 0.625rem; font-size: 0.8125rem; color: var(--muted); align-items: flex-start; padding: 0.25rem 0; }
.tf-consent input { width: 1.125rem; height: 1.125rem; margin-top: 0.125rem; accent-color: var(--deep-slate); flex: none; }
.tf-status { font-size: 0.875rem; margin: 0; }
.tf-status:empty { display: none; }
.tf-fine { font-size: 0.75rem; color: var(--muted); max-width: 70ch; margin: 0; }
.tf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- homepage band -------------------------------------------------------- */

/* Full-bleed contrast band. The section stays inside <main>'s column (so its
   content keeps to --page-max); the dark runs edge to edge through
   border-image outset, which paints past the box without widening the page or
   adding a horizontal scrollbar. */
.home-finder {
  background: var(--deep-slate);
  border-image: linear-gradient(var(--deep-slate), var(--deep-slate)) fill 0 / 0 / 0 100vmax;
  color: rgba(250, 249, 246, 0.85);
  padding: clamp(3rem, 7vw, 5.5rem) 0;
}
.home-finder__head { display: grid; gap: 0.875rem; max-width: 44rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.home-finder__head .accent-dash { margin: 0; }
.home-finder__head .eyebrow { color: rgba(250, 249, 246, 0.85); margin: 0; }
.home-finder__head h2 { color: var(--ivory); margin: 0; font-weight: 400; }
.home-finder__sub { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.55; margin: 0; color: rgba(250, 249, 246, 0.85); }
.home-finder__call { font-size: 0.9375rem; margin: 0; color: rgba(250, 249, 246, 0.85); }
.home-finder__call a {
  color: var(--ivory); text-decoration: none; border-bottom: 1px solid var(--ice-blue); padding-bottom: 1px;
}
.home-finder__call a:hover { border-bottom-color: var(--ivory); }
.home-finder a:focus-visible { outline: 2px solid var(--ice-blue); outline-offset: 3px; }
.home-finder .tf noscript p, .home-finder .tf noscript a { color: var(--ivory); }
.home-finder .tf-quiz { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); }

/* /treatment-finder: same card, on the ordinary page background. */
.tf[data-placement="page"] { margin-bottom: clamp(2rem, 5vw, 3.5rem); }