/* ==========================================================================
   fx-landing.css — the ".lp" landing-page vocabulary in the fx design (Phase 3)
   --------------------------------------------------------------------------
   The SEO landing pages (treatments/*-coventry, the EMSculpt intent pages,
   feonix-men-coventry), the AI Skin Assessment page, the laser hair removal
   shop and the laser area template were all written against
   css/feonix-landing.css (rose-gold tokens, Cormorant/Montserrat, a fixed
   dark nav). Rewriting ~20 hand-built pages one by one would risk their copy,
   JSON-LD and tests, so instead:

     1. TOKEN BRIDGE — the legacy tokens (--rg-*, --dark, --cream, --font-*)
        are redeclared on body.fx.lp with fx values. Every rule in
        feonix-landing.css, every page <style> block and every inline style
        that reads them picks up the purple/lavender palette automatically.
     2. COMPONENT RESKIN — the few visual decisions tokens can't carry
        (uppercase micro-type, square buttons, display-serif weights, the
        overlay-nav hero offset) are restated in the fx idiom.

   Load order: feonix-landing.css (layout) → <!-- FEONIX_FX_HEAD --> → this
   file. Scoped to body.fx.lp, so it can never reach a page that has not opted
   in. No gradients, no gold, no heavy shadows (docs/website-design-system.md).
   ========================================================================== */

body.fx.lp {
  --white: #FFFFFF;
  --cream: #F4F1F7;            /* lavender ground */
  --light: #EFEDF1;
  --border: #E4DEEA;
  --dark: #2E1A47;             /* brand purple: hero, pricing and CTA bands */
  --mid: #645677;              /* body copy (6.69:1 on white) */
  --muted: #645677;
  --rg-light: #CFC5DC;         /* accents on purple */
  --rg-mid: #645677;           /* eyebrows / quiet accents on light */
  --rg-dark: #2E1A47;          /* links, primary buttons */
  --font-display: "Outfit", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --maxw: 1280px;
  font-family: var(--fx-font-body); font-weight: 400; color: var(--fx-text);
  overflow-x: clip;
}
html:has(body.fx.lp) { overflow-x: clip; }

/* ── Layout: fx gutters and rhythm ────────────────────────────────────── */
.fx.lp .container        { max-width: calc(var(--fx-container) + 2 * var(--fx-gutter)); padding: 0 var(--fx-gutter); }
.fx.lp .container-narrow { max-width: calc(760px + 2 * var(--fx-gutter)); padding: 0 var(--fx-gutter); }
.fx.lp main section      { padding: var(--fx-section) 0; }
.fx.lp main section.white + section.white,
.fx.lp main section.cream + section.cream { padding-top: 0; }

/* ── Type ──────────────────────────────────────────────────────────────── */
.fx.lp main h1, .fx.lp main h2, .fx.lp main h3 { font-family: var(--fx-font-display); font-weight: 600;
  letter-spacing: -.015em; line-height: 1.12; text-wrap: balance; }
.fx.lp main h1 { font-size: var(--fx-step-hero); }
.fx.lp main h2 { font-size: var(--fx-step-h2); margin-bottom: 16px; }
.fx.lp main h3 { font-size: var(--fx-step-h3); margin-bottom: 10px; }
.fx.lp main .content-block > h3:not(:first-child) { margin-top: 32px; }
.fx.lp main p, .fx.lp main li { font-size: var(--fx-step-body); line-height: 1.7; }
.fx.lp main .lead { font-size: var(--fx-step-lead); line-height: 1.6; max-width: var(--fx-measure); }
.fx.lp main em { font-style: normal; color: inherit; }
.fx.lp main .eyebrow, .fx.lp main .section-eyebrow { font-family: var(--fx-font-body); font-size: var(--fx-step-meta);
  font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--fx-text-muted); margin-bottom: 12px; }

/* ── Buttons: the fx shape (rounded, sentence case, 48px) ─────────────── */
.fx.lp main .btn { min-height: 48px; padding: 12px 24px; border-radius: var(--fx-r-button);
  font-family: var(--fx-font-body); font-size: 1rem; font-weight: 600; letter-spacing: .005em; text-transform: none;
  transition: background-color var(--fx-fast) var(--fx-ease), border-color var(--fx-fast) var(--fx-ease), color var(--fx-fast) var(--fx-ease); }
.fx.lp main .btn-primary { background: var(--fx-purple); color: var(--fx-white); border-color: var(--fx-purple); }
.fx.lp main .btn-primary:hover { background: var(--fx-purple-raised); border-color: var(--fx-purple-raised); }
.fx.lp main .btn-secondary { background: var(--fx-white); color: var(--fx-purple); border-color: var(--fx-field-border); }
.fx.lp main .btn-secondary:hover { border-color: var(--fx-purple); background: var(--fx-ground); }
/* on purple bands the primary inverts and the secondary is a quiet outline */
.fx.lp main section.dark .btn-primary, .fx.lp main section.cta-banner .btn-primary,
.fx.lp main section.hero.is-dark .btn-primary { background: var(--fx-white); color: var(--fx-purple); border-color: var(--fx-white); }
.fx.lp main section.dark .btn-secondary, .fx.lp main section.cta-banner .btn-secondary {
  background: transparent; color: var(--fx-white); border-color: var(--fx-on-dark-line); }
.fx.lp main section.dark .btn-secondary:hover, .fx.lp main section.cta-banner .btn-secondary:hover { border-color: var(--fx-white); }
.fx.lp main section.dark :focus-visible, .fx.lp main section.cta-banner :focus-visible { outline-color: var(--fx-white); }

/* ── Hero: a light lavender page hero (like every other inner page) ──────
   The legacy hero was a near-black band padded 170px for a fixed overlay nav;
   the fx header is sticky and in flow, so the offset goes. */
.fx.lp main section.hero { background: var(--fx-ground); color: var(--fx-text);
  padding: clamp(40px, 2rem + 3vw, 88px) 0 clamp(48px, 2.5rem + 3vw, 96px); }
.fx.lp main section.hero h1 { color: var(--fx-purple); margin-bottom: 20px; max-width: 20ch; }
.fx.lp main section.hero .eyebrow { color: var(--fx-text-muted); }
.fx.lp main section.hero .lead, .fx.lp main section.hero p { color: var(--fx-text-muted); }
.fx.lp main section.hero .btn-secondary { background: var(--fx-white); }
.fx.lp main .cta-row { gap: 12px; margin-top: 4px; }
.fx.lp main .consult-redeem-note { font-size: var(--fx-step-meta); color: var(--fx-text-muted); margin: 14px 0 0; }
.fx.lp main section.cta-banner .consult-redeem-note { color: var(--fx-on-dark-muted); }
.fx.lp main .hero-meta { margin-top: clamp(32px, 2rem + 1vw, 48px); gap: 0; background: var(--fx-white);
  border: 1px solid var(--fx-border); border-radius: var(--fx-r-card); overflow: hidden; }
.fx.lp main .hero-meta-item { background: var(--fx-white); padding: 18px 22px; border-left: 1px solid var(--fx-border); }
.fx.lp main .hero-meta-item:first-child { border-left: 0; }
.fx.lp main .hero-meta-item .label { font-size: var(--fx-step-meta); letter-spacing: 0; text-transform: none;
  color: var(--fx-text-muted); margin-bottom: 4px; }
.fx.lp main .hero-meta-item .value { font-family: var(--fx-font-display); font-weight: 600; font-size: 1.125rem; color: var(--fx-purple); }
@media (max-width: 980px) {
  .fx.lp main .hero-meta-item:nth-child(odd) { border-left: 0; }
  .fx.lp main .hero-meta-item:nth-child(n+3) { border-top: 1px solid var(--fx-border); }
}
/* phones: the four key facts stay two-up (they are short), not a four-row stack */
@media (max-width: 560px) {
  .fx.lp main .hero-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx.lp main .hero-meta-item { padding: 14px 16px; }
}

/* ── Bands ─────────────────────────────────────────────────────────────── */
.fx.lp main section.cream { background: var(--fx-ground); }
.fx.lp main section.dark, .fx.lp main section.cta-banner { background: var(--fx-purple); color: var(--fx-white); }
.fx.lp main section.dark h2, .fx.lp main section.cta-banner h2, .fx.lp main section.dark h3 { color: var(--fx-white); }
.fx.lp main section.dark p, .fx.lp main section.dark li, .fx.lp main section.cta-banner p { color: var(--fx-on-dark-muted); }
.fx.lp main section.dark .section-eyebrow { color: var(--fx-on-dark-lavender); }
.fx.lp main section.dark a:not(.btn) { color: var(--fx-white); }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.fx.lp main .feature-card, .fx.lp main .review-card { border: 1px solid var(--fx-border); border-radius: var(--fx-r-card);
  padding: clamp(24px, 1.2rem + 1vw, 32px); background: var(--fx-white); }
.fx.lp main .feature-card .icon { font-family: var(--fx-font-display); font-weight: 600; font-size: 1.5rem;
  color: var(--fx-purple); margin-bottom: 14px; }
.fx.lp main .price-block { border-radius: var(--fx-r-card); border-color: var(--fx-on-dark-line);
  background: rgba(255, 255, 255, .04) !important; }   /* !important: some pages inline a rose background */
.fx.lp main .price-label { letter-spacing: 0; text-transform: none; font-size: var(--fx-step-meta);
  font-weight: 600; color: var(--fx-on-dark-lavender); }
.fx.lp main .price { font-family: var(--fx-font-display); font-weight: 600; font-size: clamp(2rem, 1.6rem + 1.2vw, 2.6rem); color: var(--fx-white); }
.fx.lp main .price-note { font-size: var(--fx-step-meta); color: var(--fx-on-dark-muted); }
.fx.lp main .practitioner-block img { border-radius: var(--fx-r-card); border-color: var(--fx-border); }
.fx.lp main .review-card .stars { color: var(--fx-purple); }
.fx.lp main .review-text { font-family: var(--fx-font-body); font-style: normal; font-size: var(--fx-step-body); color: var(--fx-text); }
.fx.lp main .reviewer { letter-spacing: 0; text-transform: none; font-size: var(--fx-step-meta); font-weight: 600; color: var(--fx-text-muted); }
.fx.lp main .location-info { border: 1px solid var(--fx-border); border-radius: var(--fx-r-card); padding: clamp(22px, 1.2rem + 1vw, 32px); }
.fx.lp main .location-info a, .fx.lp main .content-block a, .fx.lp main .practitioner-block a, .fx.lp main .feature-card a {
  color: var(--fx-purple); text-decoration-color: rgba(46, 26, 71, .35); }
.fx.lp main .map-embed { border-radius: var(--fx-r-card); overflow: hidden; border-color: var(--fx-border); }

/* ── FAQ: the fx accordion look ───────────────────────────────────────── */
.fx.lp main .faq-item { border-bottom: 1px solid var(--fx-border); }
.fx.lp main .faq-item summary { font-family: var(--fx-font-body); font-weight: 600; font-size: 1rem; line-height: 1.4;
  padding: 18px 0; min-height: 44px; color: var(--fx-text); }
.fx.lp main .faq-item summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 6px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-3px);
  transition: transform var(--fx-fast) var(--fx-ease); }
.fx.lp main .faq-item[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.fx.lp main .faq-item summary:focus-visible { outline: 2px solid var(--fx-purple); outline-offset: 2px; border-radius: 6px; }

/* ── Related links ────────────────────────────────────────────────────── */
.fx.lp main .related-grid { gap: 12px; margin-top: 24px; }
.fx.lp main .related-link { min-height: 56px; border-radius: var(--fx-r-control); border-color: var(--fx-border);
  font-size: var(--fx-step-small); font-weight: 600; letter-spacing: 0; color: var(--fx-purple); }
.fx.lp main .related-link:hover { border-color: var(--fx-purple); background: var(--fx-ground); color: var(--fx-purple); }
.fx.lp main section.cream .related-link:hover { background: var(--fx-white); }

@media (max-width: 768px) {
  .fx.lp main section { padding: clamp(48px, 3rem + 2vw, 72px) 0; }
  .fx.lp main section.hero { padding: 32px 0 48px; }
  .fx.lp main .cta-row .btn { flex: 1 1 100%; }
}
/* the map keeps its landing-page height (the fx-map class is for its focus ring) */
.fx.lp main .map-embed.fx-map iframe { aspect-ratio: auto; height: 360px; }

/* Inline colours written for the old dark hero (cream text, faded credits) sit on light
   grounds now: re-point them, and give dark inline cards light paragraph text (axe, Phase 3). */
.fx.lp main section.hero [style*="247,243,239"], .fx.lp main section.white [style*="247,243,239"],
.fx.lp main section.cream [style*="247,243,239"] { color: var(--fx-text-muted) !important; }
.fx.lp main section.white [style*="247,243,239"] strong[style], .fx.lp main section.cream [style*="247,243,239"] strong[style],
.fx.lp main section.white strong[style*="#fff"], .fx.lp main section.cream strong[style*="#fff"] { color: var(--fx-purple) !important; }
.fx.lp main .press-credit, .fx.lp main .press-credit a { opacity: 1 !important; color: var(--fx-text-muted); }
.fx.lp main [style*="background: var(--dark)"] p, .fx.lp main [style*="background: var(--dark)"] li,
.fx.lp main [style*="background: var(--rg-dark)"] p, .fx.lp main [style*="background: var(--rg-dark)"] li { color: var(--fx-on-dark-muted); }
.fx.lp main [style*="background: var(--dark)"] a { color: var(--fx-white) !important; }
.fx.lp main p[style*="opacity"] { opacity: 1 !important; color: var(--fx-text-muted); }