/* ==========================================================================
   fx-treatment.css: the Feonix treatment-page system
   --------------------------------------------------------------------------
   Opt-in: a page uses it by loading this file and wrapping its content in
   .tx-page. Every rule is scoped and built on the fx tokens, so a page that
   does not load this file cannot be affected. Every module and variant is
   optional. .tx-results and .tx-quote ship only with genuine approved assets.
   Guide: docs/website-design-system.md.
   ========================================================================== */

/* The edge is measured from the page, not the column, so split sections line up with full-width ones. */
.fx .tx-page { --tx-edge: max(var(--fx-gutter), calc((100vw - var(--fx-container)) / 2));
  --tx-section: clamp(56px, 2rem + 6vw, 120px); }
@supports (width: 1cqw) {
  .fx .tx-page { container-type: inline-size; --tx-edge: max(var(--fx-gutter), calc((100cqw - var(--fx-container)) / 2)); }
}
.fx .tx-page [id] { scroll-margin-top: calc(var(--fx-header-h) + 16px); }
.fx .tx-wrap { padding-inline: var(--tx-edge); }
.fx .tx-section { padding-block: var(--tx-section); }
.fx .tx-section--ground { background: var(--fx-ground); }
.fx .tx-h2 { font-size: clamp(2.125rem, 1.6rem + 2.2vw, 3.5rem); font-weight: 500; line-height: 1.1; letter-spacing: -.02em; }
.fx .tx-muted { color: var(--fx-text-muted); }

/* Hero: copy first, image to the page edge. */
.fx .tx-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); min-height: min(800px, calc(100vh - var(--fx-header-h))); }
.fx .tx-hero__copy { display: flex; flex-direction: column; justify-content: center; padding: 56px 56px 56px var(--tx-edge); }
.fx .tx-hero__eyebrow { font-size: var(--fx-step-meta); font-weight: 600; letter-spacing: .14em; color: var(--fx-text-muted); }
.fx .tx-hero h1 { margin-top: 18px; font-size: clamp(2.875rem, 1.2rem + 5vw, 5.75rem); font-weight: 500; line-height: 1.02; letter-spacing: -.025em; }
.fx .tx-hero__outcome { margin-top: 24px; font-family: var(--fx-font-display); font-size: clamp(1.375rem, 1.1rem + .9vw, 1.875rem); font-weight: 500; line-height: 1.25; }
.fx .tx-hero__copy .fx-actions { margin-top: 32px; }
.fx .tx-hero__lead { margin-top: 20px; max-width: 560px; color: var(--fx-text-muted); font-size: var(--fx-step-body); line-height: 1.65; }
.fx .tx-hero__facts { display: flex; flex-wrap: wrap; gap: 8px 40px; margin-top: 44px; padding: 20px 0 0; border-top: 1px solid var(--fx-border); list-style: none; font-weight: 600; }
.fx .tx-hero__media { position: relative; min-height: 100%; background: var(--fx-ground); }
.fx .tx-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* Benefits. */
.fx .tx-outcomes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; list-style: none; }
.fx .tx-outcomes li { padding-top: 24px; border-top: 2px solid var(--fx-purple); }
.fx .tx-outcomes h3 { font-size: clamp(2.75rem, 2rem + 2vw, 4rem); font-weight: 500; line-height: 1.05; letter-spacing: -.02em; }
.fx .tx-outcomes p { margin-top: 16px; color: var(--fx-text-muted); font-size: clamp(1rem, .95rem + .2vw, 1.1875rem); line-height: 1.6; }

/* Treatment at a glance. */
.fx .tx-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 56px; margin: clamp(28px, 1rem + 3vw, 64px) 0 0; }
.fx .tx-facts > div { padding-top: 20px; border-top: 1px solid var(--fx-on-dark-lavender); }
.fx .tx-facts dt { font-size: var(--fx-step-small); color: var(--fx-text-muted); }
.fx .tx-facts dd { margin: 8px 0 0; font-family: var(--fx-font-display); font-size: clamp(1.3125rem, 1.1rem + .6vw, 1.75rem); font-weight: 500; line-height: 1.25; }
.fx .tx-facts dd small { display: block; margin-top: 8px; font-family: var(--fx-font-body); font-size: var(--fx-step-small); font-weight: 400; line-height: 1.55; color: var(--fx-text-muted); }

/* Results: not in the page until approved photography exists. */
.fx .tx-results__title { font-size: clamp(2.875rem, 1.6rem + 4vw, 5.5rem); font-weight: 500; line-height: 1.02; letter-spacing: -.025em; }
.fx .tx-results__lead { margin-top: 16px; color: var(--fx-text-muted); font-size: var(--fx-step-lead); }
.fx .tx-results__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; margin-top: clamp(28px, 1rem + 3vw, 64px); list-style: none; }
.fx .tx-case:first-child { grid-column: 1 / -1; }
.fx .tx-case__photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fx .tx-case__photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--fx-ground); }
.fx .tx-case__photos figcaption { margin-top: 8px; font-size: var(--fx-step-meta); font-weight: 600; }
.fx .tx-case__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 18px 0 0; }
.fx .tx-case__meta dt { font-size: var(--fx-step-meta); color: var(--fx-text-muted); }
.fx .tx-case__meta dd { margin: 0; font-weight: 600; }

/* How it works: image to the page edge, ruled steps. */
.fx .tx-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border-top: 1px solid var(--fx-border); }
.fx .tx-split__media { position: relative; min-height: 760px; background: var(--fx-ground); }
.fx .tx-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.fx .tx-split__copy { padding: clamp(44px, 1rem + 5vw, 100px) var(--tx-edge) clamp(44px, 1rem + 5vw, 80px) clamp(20px, 7vw, 96px); }
.fx .tx-steps { margin-top: clamp(24px, 1rem + 2vw, 48px); list-style: none; counter-reset: txstep; }
.fx .tx-steps li { counter-increment: txstep; display: grid; grid-template-columns: 76px minmax(0, 1fr); padding: 26px 0 30px; border-top: 1px solid var(--fx-border); }
.fx .tx-steps li::before { content: "0" counter(txstep); font-family: var(--fx-font-display); font-size: 1.375rem; font-weight: 500; color: var(--fx-text-muted); }
.fx .tx-steps h3 { font-size: clamp(1.625rem, 1.4rem + .6vw, 2.125rem); font-weight: 500; line-height: 1.15; }
.fx .tx-steps p { margin-top: 10px; color: var(--fx-text-muted); }

/* Journey. */
.fx .tx-journey { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; margin-top: clamp(28px, 1rem + 3vw, 64px); list-style: none; counter-reset: txjourney; }
.fx .tx-journey li { counter-increment: txjourney; }
.fx .tx-journey li::before { content: "0" counter(txjourney); display: block; font-family: var(--fx-font-display); font-size: 4.5rem; font-weight: 500; line-height: 1; color: var(--fx-text-muted); }
.fx .tx-journey h3 { margin-top: 28px; font-size: clamp(1.4375rem, 1.3rem + .5vw, 1.875rem); font-weight: 500; line-height: 1.2; }
.fx .tx-journey p { margin-top: 12px; color: var(--fx-text-muted); }

/* Pricing: a table on desktop, ruled rows on a phone. */
.fx .tx-prices { width: 100%; margin-top: clamp(24px, 1rem + 2.5vw, 56px); border-collapse: collapse; font-size: 1.125rem; }
.fx .tx-prices th { padding: 0 16px 14px 0; font-size: var(--fx-step-small); font-weight: 500; color: var(--fx-text-muted); text-align: left; }
.fx .tx-prices tbody tr { border-top: 1px solid var(--fx-border); }
.fx .tx-prices tbody tr:last-child { border-bottom: 1px solid var(--fx-border); }
.fx .tx-prices tbody td { padding: 26px 16px 26px 0; vertical-align: middle; }
.fx .tx-prices th:last-child, .fx .tx-prices td:last-child { padding-right: 0; text-align: right; }
.fx .tx-prices__option { font-weight: 600; }
.fx .tx-prices__total { font-family: var(--fx-font-display); font-size: 2.25rem; font-weight: 500; line-height: 1; }
.fx .tx-prices__unit { display: none; }
.fx .tx-prices__foot { display: flex; align-items: center; justify-content: space-between; gap: 48px; margin-top: 40px; }
.fx .tx-prices__credit { font-weight: 600; }
.fx .tx-prices__finance { margin-top: 8px; }
.fx .tx-prices__finance a { color: var(--fx-purple); text-underline-offset: 3px; }
.fx .tx-prices__foot .fx-btn { flex: none; }

/* Why Feonix. */
.fx .tx-proof { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 11fr); background: var(--fx-purple); color: var(--fx-white); }
.fx .tx-proof__media { position: relative; min-height: 900px; }
.fx .tx-proof__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 15%; }
.fx .tx-proof__copy { padding: clamp(44px, 1rem + 5vw, 104px) var(--tx-edge) clamp(44px, 1rem + 5vw, 80px) clamp(20px, 7vw, 96px); }
.fx .tx-proof h2 { font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.75rem); font-weight: 500; line-height: 1.08; letter-spacing: -.02em; color: var(--fx-white); }
.fx .tx-proof__lead { margin-top: 24px; color: var(--fx-on-dark-lavender); font-size: clamp(1rem, .95rem + .2vw, 1.1875rem); }
.fx .tx-evidence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin-top: clamp(26px, 1rem + 2vw, 52px); list-style: none; }
.fx .tx-evidence li { padding: 20px 0 32px; border-top: 1px solid var(--fx-on-dark-line); }
.fx .tx-evidence strong { display: block; font-family: var(--fx-font-display); font-size: clamp(1.25rem, 1.15rem + .4vw, 1.5rem); font-weight: 500; line-height: 1.25; }
.fx .tx-evidence strong.tx-evidence__big { font-size: clamp(1.75rem, 1.5rem + .8vw, 2.375rem); line-height: 1.1; }
.fx .tx-evidence span { display: block; margin-top: 6px; color: var(--fx-on-dark-lavender); }
.fx .tx-evidence a { color: inherit; text-underline-offset: 3px; }

/* Review: not in the page until a verified EMSculpt NEO review exists. */
.fx .tx-quote { text-align: center; }
.fx .tx-quote blockquote { margin: 28px auto 0; max-width: 1040px; font-family: var(--fx-font-display); font-size: clamp(1.875rem, 1.3rem + 2.2vw, 3.25rem); font-weight: 500; line-height: 1.2; letter-spacing: -.015em; }
.fx .tx-quote figcaption { margin-top: 28px; color: var(--fx-text-muted); }

/* FAQs: the site accordion, with larger questions and tap targets. */
.fx .tx-faq { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 80px; }
.fx .tx-faq .fx-acc summary { min-height: 72px; gap: 24px; }
.fx .tx-faq .fx-acc summary h3 { font-family: var(--fx-font-display); font-size: clamp(1.1875rem, 1.1rem + .35vw, 1.375rem); font-weight: 500; line-height: 1.3; }

/* Final CTA. */
.fx .tx-cta { background: var(--fx-purple); color: var(--fx-white); text-align: center; }
.fx .tx-cta h2 { font-size: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); font-weight: 500; line-height: 1.05; letter-spacing: -.02em; color: var(--fx-white); }
.fx .tx-cta p { margin: 24px auto 0; max-width: 680px; color: var(--fx-on-dark-lavender); font-size: clamp(1rem, .95rem + .2vw, 1.1875rem); }
.fx .tx-cta__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; margin-top: 40px; }
.fx .tx-cta__link { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; color: var(--fx-white); font-weight: 600; text-underline-offset: 3px; }

@media (max-width: 899px) {
  .fx .tx-hero { display: block; min-height: 0; }
  .fx .tx-hero__copy { padding: 36px var(--fx-gutter) 32px; }
  .fx .tx-hero__copy .fx-actions { flex-direction: column; align-items: stretch; margin-top: 22px; gap: 10px; }
  .fx .tx-hero__copy .fx-btn { width: 100%; min-height: 54px; }
  .fx .tx-hero__lead { margin-top: 22px; }
  .fx .tx-hero__facts { gap: 6px 22px; margin-top: 20px; padding-top: 16px; font-size: var(--fx-step-small); }
  .fx .tx-hero__media { height: 440px; min-height: 0; }
  .fx .tx-outcomes, .fx .tx-facts, .fx .tx-journey, .fx .tx-faq { grid-template-columns: minmax(0, 1fr); }
  .fx .tx-outcomes { gap: 32px; }
  .fx .tx-outcomes li { padding-top: 16px; }
  .fx .tx-outcomes p { margin-top: 8px; }
  .fx .tx-facts { gap: 14px; }
  .fx .tx-facts > div { padding-top: 14px; }
  .fx .tx-facts dd { margin-top: 2px; }
  .fx .tx-facts dd small { margin-top: 4px; }
  .fx .tx-results__list { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .fx .tx-split, .fx .tx-proof { display: block; }
  .fx .tx-split__media { height: 300px; min-height: 0; }
  .fx .tx-split__copy { padding: 44px var(--fx-gutter) 56px; }
  .fx .tx-steps li { display: block; padding: 16px 0 22px; }
  .fx .tx-steps li::before { display: block; font-size: 1rem; }
  .fx .tx-steps h3 { margin-top: 2px; }
  .fx .tx-steps p { margin-top: 6px; }
  .fx .tx-journey { gap: 26px; }
  .fx .tx-journey li { display: grid; grid-template-columns: 56px minmax(0, 1fr); }
  .fx .tx-journey li::before { grid-row: 1 / span 2; font-size: 1.875rem; line-height: 1.1; }
  .fx .tx-journey h3 { margin-top: 0; }
  .fx .tx-journey p { grid-column: 2; margin-top: 4px; }
  .fx .tx-prices, .fx .tx-prices tbody { display: block; font-size: 1rem; }
  .fx .tx-prices thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .fx .tx-prices tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; padding: 16px 0; }
  .fx .tx-prices tbody td { padding: 0; }
  .fx .tx-prices__option { grid-column: 1; }
  .fx .tx-prices__areas, .fx .tx-prices__per { grid-column: 1; font-size: var(--fx-step-small); color: var(--fx-text-muted); }
  .fx .tx-prices tbody .tx-prices__total { grid-column: 2; grid-row: 1 / span 3; font-size: 1.75rem; }
  .fx .tx-prices__unit { display: inline; }
  .fx .tx-prices__foot { display: block; margin-top: 22px; }
  .fx .tx-prices__foot .fx-btn { width: 100%; min-height: 54px; margin-top: 20px; }
  .fx .tx-proof__media { height: 380px; min-height: 0; }
  .fx .tx-proof__media img { object-position: 45% 12%; }
  .fx .tx-proof__copy { padding: 44px var(--fx-gutter) 48px; }
  .fx .tx-evidence { grid-template-columns: minmax(0, 1fr); }
  .fx .tx-evidence li { padding: 14px 0; }
  .fx .tx-evidence span { margin-top: 2px; }
  .fx .tx-quote { text-align: left; }
  .fx .tx-faq { gap: 24px; }
  .fx .tx-faq .fx-acc summary { min-height: 64px; gap: 16px; }
  .fx .tx-cta { text-align: left; }
  .fx .tx-cta p { margin: 16px 0 0; }
  .fx .tx-cta__actions { flex-direction: column; align-items: stretch; margin-top: 26px; text-align: center; }
  .fx .tx-cta__actions .fx-btn { width: 100%; min-height: 54px; }
  .fx .tx-cta__link { justify-content: center; }
}

/* --------------------------------------------------------------------------
   Variants for later archetypes. Additions only: nothing above depends on them.
   Proved by tests/fixtures/treatment_system_archetypes.fragment.
   -------------------------------------------------------------------------- */

/* Hero with no cleared photograph, and the quieter consultation-led hero. */
.fx .tx-hero--text { display: block; min-height: 0; }
.fx .tx-hero--text .tx-hero__copy { padding: clamp(40px, 1.5rem + 5vw, 96px) var(--tx-edge); }
.fx .tx-hero--restrained h1 { font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem); }
.fx .tx-hero--restrained .tx-hero__outcome { font-family: var(--fx-font-body); font-size: var(--fx-step-lead); font-weight: 400; color: var(--fx-text-muted); }

/* Fewer benefits or facts, without leaving an empty column. */
.fx .tx-outcomes--two, .fx .tx-facts--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* How it works: image on the other side, or no image. */
.fx .tx-split--reverse .tx-split__media { order: 2; }
.fx .tx-split--reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.fx .tx-split--text { display: block; }
.fx .tx-split--text .tx-split__copy { padding-inline: var(--tx-edge); }

/* A journey with an extra step, such as a patch test or an assessment. */
.fx .tx-journey--four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }

/* Pricing beyond the course table: option and price only, or one lead price. */
.fx .tx-price-lead { margin-top: clamp(24px, 1rem + 2.5vw, 56px); padding-block: 26px; border-block: 1px solid var(--fx-border); }
.fx .tx-price-lead__amount { display: block; font-family: var(--fx-font-display); font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem); font-weight: 500; line-height: 1.05; }
.fx .tx-price-lead__note { margin-top: 8px; color: var(--fx-text-muted); }

/* Laser: the areas a treatment or price covers. */
.fx .tx-areas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 40px; margin-top: clamp(24px, 1rem + 2vw, 48px); list-style: none; }
.fx .tx-areas li { padding-block: 14px; border-top: 1px solid var(--fx-border); font-weight: 600; }

/* Safeguards that must stay visible rather than folded into an FAQ. */
.fx .tx-note { margin-top: clamp(24px, 1rem + 2vw, 48px); padding: 24px; border-radius: var(--fx-r-card); background: var(--fx-ground); }
.fx .tx-note h3 { font-size: var(--fx-step-lead); font-weight: 600; }
.fx .tx-note p { margin-top: 8px; color: var(--fx-text-muted); }
.fx .tx-note + .tx-outcomes { margin-top: clamp(32px, 1rem + 2.5vw, 56px); }

/* Trust without a photograph, and a final CTA without the purple band. */
.fx .tx-proof--text { display: block; }
.fx .tx-proof--text .tx-proof__copy { padding-inline: var(--tx-edge); }
.fx .tx-cta--quiet { background: var(--fx-ground); color: var(--fx-purple); }
.fx .tx-cta--quiet h2 { color: var(--fx-purple); }
.fx .tx-cta--quiet p { color: var(--fx-text-muted); }

@media (max-width: 899px) {
  .fx .tx-outcomes--two, .fx .tx-facts--two, .fx .tx-journey--four { grid-template-columns: minmax(0, 1fr); }
  .fx .tx-hero--text .tx-hero__copy { padding: 36px var(--fx-gutter) 32px; }
  .fx .tx-split--text .tx-split__copy, .fx .tx-proof--text .tx-proof__copy { padding-inline: var(--fx-gutter); }
  .fx .tx-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
}