/* Elegant Smiles — designer-built funnels (Figma, approved 23 Sep 2026).
 *
 * One complete design system for all four funnels: Emergency and Hygiene (Google Ads), Aligners and
 * Implants (Meta). base.css is NOT loaded on these routes — the campaign is flagged `standalone_css`
 * — so everything the pages need lives here.
 *
 * Geometry follows the Figma frames exactly: 1440px design width, 1140px content column (x150), and
 * the type scale below is lifted from the file's text nodes rather than eyeballed. Anything the
 * designer marked PLACEHOLDER (review quotes, reviewer names, the map, before/after cases, provisional
 * prices) renders through an option or a `.f-ph` wrapper so it can be swapped without touching layout.
 *
 * Accent per funnel comes from the body class: .eso-accent-emergency | -hygiene | -aligners | -implants.
 */

.eso-lp {
  --gold: #51169B;
  --gold-deep: #3D1073;
  --ink: #311849;
  --body: #333;
  --muted: #777;
  --line: #E7E2F0;
  --cream: #F7F5FB;   /* frame value */
  --sand2: #EFEAF6;   /* 'paying for it' band */
  --page: #FEFDFF;
  --sand: #51169B;
  --dark: #2A2340;
  --darker: #311849;  /* footer, per frame */
  --white: #fff;
  --accent: #b4452a;          /* emergency red; overridden per funnel below */
  --accent-ink: #3D1073;
  --serif: 'Montserrat', Georgia, 'Times New Roman', serif;
  --sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1140px;
  --gutter: 24px;
}
.eso-lp.eso-accent-hygiene,
.eso-lp.eso-accent-aligners,
.eso-lp.eso-accent-implants { --accent: #51169B; --accent-ink: #3D1073; }

/* ---------- reset ---------- */
.eso-lp * { box-sizing: border-box; }
.eso-lp { margin: 0; background: var(--page); color: var(--body); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.eso-lp img, .eso-lp video, .eso-lp iframe { max-width: 100%; display: block; }
.eso-lp-main { overflow-x: clip; }
.eso-lp h1, .eso-lp h2, .eso-lp h3, .eso-lp h4 { font-family: var(--serif); font-weight: 400; color: var(--ink); margin: 0; line-height: 1.2; letter-spacing: -.02em; }
.eso-lp p { margin: 0; }
.eso-lp a { color: inherit; }
.eso-lp ul, .eso-lp ol { margin: 0; padding: 0; list-style: none; }
.eso-lp [hidden] { display: none !important; }

/* ---------- layout ---------- */
.eso-lp .f-wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.eso-lp .f-sec { padding: clamp(54px, 6.4vw, 92px) 0; }
.eso-lp .f-sec--tight { padding: clamp(40px, 5vw, 72px) 0; }
.eso-lp .f-sec--dark { background: var(--dark); color: #fff; }
.eso-lp .f-sec--darker { background: var(--darker); color: #fff; }
.eso-lp .f-sec--cream { background: var(--cream); }
.eso-lp .f-sec--dark h2, .eso-lp .f-sec--dark h3, .eso-lp .f-sec--darker h2, .eso-lp .f-sec--darker h3 { color: #fff; }
.eso-lp .f-head { text-align: center; margin-bottom: clamp(30px, 2.8vw, 40px); }
.eso-lp .f-head--left { text-align: left; }
.eso-lp .f-head--tight { margin-bottom: 12px; }
.eso-lp .f-eyebrow { font-family: var(--sans); font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.eso-lp .f-sec--dark .f-eyebrow, .eso-lp .f-sec--darker .f-eyebrow { color: var(--gold); }
.eso-lp .f-h2 { font-size: clamp(30px, 2.8vw, 40px); line-height: 1.2; }
.eso-lp .f-h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(20px, 1.6vw, 22px); line-height: 1.32; letter-spacing: -.01em; color: var(--ink); }
.eso-lp .f-lede { font-size: clamp(16px, 1.2vw, 17px); line-height: 1.6; color: var(--body); max-width: 720px; margin-inline: auto; margin-top: 10px; }
.eso-lp .f-head--left .f-lede { margin-inline: 0; }
.eso-lp .f-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.53vw, 22px); }
.eso-lp .f-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3vw, 44px); }

/* ---------- buttons ---------- */
.eso-lp .f-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--sans); font-size: 16px; font-weight: 500; letter-spacing: .01em; line-height: 1;
  padding: 19px 32px; border: 0; border-radius: 3px; cursor: pointer; text-decoration: none;
  background: var(--accent); color: #fff; transition: background .18s ease, transform .18s ease;
}
.eso-lp .f-btn:hover { background: var(--accent-ink); color: #fff; transform: translateY(-1px); }
/* The sand fill with white text measures 2.12:1, under the 4.5:1 minimum, and gave the
   page three different primary fills. One accent fill now, which measures 4.97:1. */
.eso-lp .f-btn--gold { background: var(--accent); color: #fff; }
.eso-lp .f-btn--gold:hover { background: var(--accent-ink); color: #fff; }
.eso-lp .f-btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .55); }
.eso-lp .f-btn--ghost:hover { background: rgba(255, 255, 255, .12); }
.eso-lp .f-btn--block { width: 100%; }
/* One button size across the page. The closing band gets its emphasis from the
   full-bleed photograph and the centred heading, not from oversized buttons. */
.eso-lp .f-btn--lg { font-size: 16px; padding: 19px 32px; }

/* ---------- top utility bar ---------- */
.eso-lp .f-topbar { background: var(--darker); color: #fff; font-size: 13px; position: sticky; top: 0; z-index: 60; }
.eso-lp .f-hero .f-topbar { position: absolute; top: 0; left: 0; right: 0; background: none; z-index: 2; }
.eso-lp .f-hero .f-topbar .f-wrap { width: min(100% - (var(--gutter) * 2), 1320px); }
.eso-lp .f-hero .f-topbar__row { min-height: clamp(64px, 6.95vw, 100px); padding: 0; }
.eso-lp .f-topbar__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; }
.eso-lp .f-topbar a { text-decoration: none; font-weight: 400; color: rgba(255, 255, 255, .8); }
.eso-lp .f-topbar__addr { color: rgba(255, 255, 255, .8); }

/* ---------- hero ---------- */
.eso-lp .f-hero { position: relative; color: #fff; text-align: center; padding: clamp(96px, 10.6vw, 152px) 0 clamp(40px, 5vw, 64px); overflow: hidden; }
.eso-lp .f-hero__bg { position: absolute; inset: 0; z-index: 0; }
.eso-lp .f-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.eso-lp .f-hero__bg::after { content: ""; position: absolute; inset: 0; background: rgba(42, 43, 46, .80); }  /* frame value */
.eso-lp .f-hero__in { position: relative; z-index: 1; }
.eso-lp .f-hero__logo { width: 87px; margin: 0 auto clamp(26px, 4vw, 54px); }
.eso-lp .f-flag { display: inline-flex; align-items: center; gap: .6em; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); border-radius: 100px; padding: 0 18px; min-height: 34px; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.eso-lp .f-flag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.eso-lp .f-hero h1 { color: #fff; font-size: clamp(34px, 3.9vw, 56px); line-height: 1.18; letter-spacing: -.02em; margin: 26px auto 0; max-width: none; }
.eso-lp .f-hero h1 b { font-weight: 400; color: var(--gold); }
.eso-lp .f-hero__sub { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.58; color: rgba(255, 255, 255, .88); max-width: 640px; margin: 14px auto 0; }
.eso-lp .f-hero__cta { margin-top: 30px; }
.eso-lp .f-hero__or { font-size: 13px; color: rgba(255, 255, 255, .6); margin-top: 16px; }
.eso-lp .f-hero__ticks { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 44px; margin-top: 30px; font-size: 14px; }
.eso-lp .f-hero__ticks li { display: flex; align-items: center; gap: .5em; }
.eso-lp .f-hero__ticks i { font-style: normal; color: var(--gold); font-weight: 500; }
.eso-lp .f-rating { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; font-size: 14px; color: rgba(255, 255, 255, .9); }
.eso-lp .f-stars { color: var(--gold); letter-spacing: .12em; font-size: 15px; }

/* ---------- hero form card ---------- */
.eso-lp .f-formcard { background: #fff; color: var(--body); border-radius: 5px; padding: clamp(20px, 1.7vw, 24px); max-width: 620px; margin: 14px auto 0; text-align: left; }
.eso-lp .f-formcard .leadform--figma .f-field { margin: 0 0 10px; }
.eso-lp .f-formcard .leadform--figma .leadform__submit { height: 47px; font-size: 15px; }

.eso-lp .f-field__l { display: block; font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.eso-lp .f-formcard input[type=text], .eso-lp .f-formcard input[type=tel], .eso-lp .f-formcard input[type=email], .eso-lp .f-formcard textarea, .eso-lp .f-formcard select {
  width: 100%; font: 400 15px/1.47 var(--sans); color: var(--ink); background: #fbfaf9;
  border: 1px solid var(--line); border-radius: 3px; padding: 13px 14px;
}
.eso-lp .f-formcard input::placeholder, .eso-lp .f-formcard textarea::placeholder { color: #9a9a9a; }
.eso-lp .f-formcard input:focus, .eso-lp .f-formcard textarea:focus, .eso-lp .f-formcard select:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(180, 69, 42, .14); }
.eso-lp .f-formcard .is-invalid { border-color: #b4452a; background: #fdf1ef; }
.eso-lp .f-formcard textarea { min-height: 84px; resize: vertical; }
.eso-lp .f-formcard .f-consent { font-size: 11px; line-height: 1.5; color: var(--muted); text-align: center; margin-top: 12px; }
.eso-lp .f-formcard .form-msg { margin: 0 0 12px; padding: 10px 13px; background: #fdf1ef; border-left: 3px solid #b4452a; font-size: 13px; color: #3D1073; border-radius: 2px; }
.eso-lp .f-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- gold stat strip ---------- */
.eso-lp .f-strip { background: var(--sand); }
.eso-lp .f-strip .f-wrap { width: min(100% - (var(--gutter) * 2), 1220px); }
.eso-lp .f-strip__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.eso-lp .f-strip__i { padding: clamp(24px, 2.5vw, 36px) 18px; text-align: center; border-left: 1px solid rgba(255, 255, 255, .35); }
.eso-lp .f-strip__i:first-child { border-left: 0; }
.eso-lp .f-strip__n { font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 2.23vw, 32px); line-height: 1.15; color: #fff; letter-spacing: -.02em; }
.eso-lp .f-strip__l { font-size: 12px; font-weight: 500; letter-spacing: .03em; color: rgba(54, 55, 58, .82); margin-top: 3px; }

/* ---------- bordered cards ---------- */
.eso-lp .f-card { background: #fff; border: 1px solid var(--line); border-radius: 3px; padding: clamp(24px, 2.3vw, 33px) clamp(20px, 1.95vw, 28px); }
.eso-lp .f-card--rule::before { content: ""; display: block; width: 34px; height: 3px; background: var(--accent); margin-bottom: 12px; }
.eso-lp .f-card p { font-size: 15px; line-height: 1.66; color: var(--body); margin-top: 12px; }
.eso-lp .f-card__icon { width: 54px; height: 54px; margin-bottom: 14px; }

/* ---------- alert banner ---------- */
.eso-lp .f-banner { background: var(--dark); color: #fff; border-radius: 3px; padding: clamp(24px, 2.25vw, 32px) clamp(24px, 2.4vw, 34px); display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.eso-lp .f-banner h3 { color: #fff; font-family: var(--serif); font-weight: 500; font-size: clamp(20px, 1.9vw, 26px); }
.eso-lp .f-banner p { font-size: 16px; line-height: 1.62; color: rgba(255, 255, 255, .8); margin-top: 7px; max-width: 882px; }
.eso-lp .f-banner .f-btn { background: var(--accent); color: #fff; flex: 0 0 auto; min-width: 160px; height: 57px; font-size: 17px; padding: 0 20px; }
.eso-lp .f-banner .f-btn:hover { background: var(--accent-ink); color: #fff; }

/* ---------- offer panel (dark, with price card) ---------- */
.eso-lp .f-offer { position: relative; color: #fff; overflow: hidden; }
.eso-lp .f-offer__bg { position: absolute; inset: 0; }
.eso-lp .f-offer__bg img { width: 100%; height: 100%; object-fit: cover; }
.eso-lp .f-offer__bg::after { content: ""; position: absolute; inset: 0; background: rgba(31, 32, 34, .88); }
.eso-lp .f-offer__in { position: relative; z-index: 1; }
.eso-lp .f-offer__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: 40px; }
.eso-lp .f-ticks li { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; font-size: 17px; line-height: 1.53; padding: 10px 0; }
.eso-lp .f-ticks i { font-style: normal; color: var(--gold); font-weight: 500; }
.eso-lp .f-pricecard { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); border-radius: 4px; padding: 30px; text-align: center; }
.eso-lp .f-pricecard__l { font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: var(--gold); display: inline-block; padding: 5px 12px; border-radius: 2px; }
.eso-lp .f-pricecard__n { font-family: var(--serif); font-weight: 500; font-size: clamp(56px, 5.7vw, 82px); line-height: 1; letter-spacing: -.02em; color: #fff; margin: 18px 0 10px; }
.eso-lp .f-pricecard__note { font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, .8); }
.eso-lp .f-pricecard .f-btn { margin-top: 20px; }
.eso-lp .f-offer__foot { text-align: center; font-size: 15px; color: rgba(255, 255, 255, .72); margin-top: 26px; }

/* ---------- reviews (PLACEHOLDER content) ---------- */
.eso-lp .f-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.53vw, 22px); }
.eso-lp .f-review { background: #fff; border: 1px solid #D8D0E6; border-radius: 5px; padding: clamp(22px, 2vw, 29px); }
.eso-lp .f-review p { font-size: 15px; line-height: 1.66; color: var(--body); margin-top: 12px; }
.eso-lp .f-review__who { font-size: 14px; font-weight: 500; color: var(--ink); margin-top: 12px; }
.eso-lp .f-review__src { font-size: 12px; font-weight: 500; letter-spacing: .04em; color: #777; margin-top: 12px; }
.eso-lp .f-ph { }  /* provisional content — marked in the markup, never outlined on the page */
.eso-lp.eso-show-ph .f-ph { outline: 1px dashed rgba(180, 69, 42, .45); outline-offset: 3px; }
.eso-lp .f-ratingline { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--ink); margin-bottom: clamp(26px, 3vw, 40px); }
.eso-lp .f-ratingline .f-stars { font-size: 17px; }

/* ---------- clinicians ---------- */
.eso-lp .f-people { display: grid; grid-template-columns: 452px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.eso-lp .f-people__photo img { width: 100%; border-radius: 3px; }
.eso-lp .f-person { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--line); }
.eso-lp .f-person:last-child { border-bottom: 0; }
.eso-lp .f-person img { width: 96px; height: 118px; object-fit: cover; border-radius: 3px; }
.eso-lp .f-person .f-person__q { font-size: 10px; line-height: 14px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 5px 0 6px; }
.eso-lp .f-person p { font-size: 15px; line-height: 1.66; }

/* ---------- payment + fund logos ---------- */
.eso-lp .f-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 46px); }
.eso-lp .f-logos img { height: 30px; width: auto; opacity: .85; }
.eso-lp .f-logos--funds img { height: 24px; opacity: .7; filter: grayscale(1); }
.eso-lp .f-logos__l { text-align: center; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #777; margin: 34px 0 16px; }

/* ---------- FAQ + map ---------- */
.eso-lp .f-faqgrid { display: grid; grid-template-columns: minmax(0, 1fr) 332px; gap: clamp(28px, 4vw, 58px); align-items: start; }
.eso-lp .f-faq { border-top: 1px solid var(--line); }
.eso-lp .f-faqitem { border-bottom: 1px solid var(--line); padding: 24px 0; }
.eso-lp .f-faqitem h3 { font-family: var(--serif); font-weight: 500; font-size: 20px; letter-spacing: -.01em; }
.eso-lp .f-faqitem p { font-size: 15px; line-height: 1.66; color: var(--body); margin-top: 10px; }
.eso-lp .f-mapcard { background: var(--dark); color: #fff; border-radius: 3px; padding: 30px; }
.eso-lp .f-mapcard h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; color: #fff; line-height: 1.34; }
.eso-lp .f-mapcard__note { font-size: 14px; color: rgba(255, 255, 255, .8); margin-top: 10px; }
.eso-lp .f-mapcard__map { margin: 22px 0 10px; border-radius: 2px; overflow: hidden; background: #3a3b3e; }
.eso-lp .f-mapcard__map img, .eso-lp .f-mapcard__map iframe { width: 100%; height: 210px; object-fit: cover; border: 0; }
.eso-lp .f-mapcard__attr { font-size: 10px; color: rgba(255, 255, 255, .55); }
.eso-lp .f-hours { margin-top: 20px; font-size: 14px; }
.eso-lp .f-hours li { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; color: rgba(255, 255, 255, .9); }
.eso-lp .f-hours b { font-weight: 500; }
.eso-lp .f-mapcard .f-btn { margin-top: 20px; }

/* ---------- closing CTA + footer ---------- */
.eso-lp .f-close { position: relative; color: #fff; text-align: center; overflow: hidden; padding: clamp(64px, 7.3vw, 104px) 0; }
.eso-lp .f-close__bg { position: absolute; inset: 0; }
.eso-lp .f-close__bg img { width: 100%; height: 100%; object-fit: cover; }
.eso-lp .f-close__bg::after { content: ""; position: absolute; inset: 0; background: rgba(42, 43, 46, .86); }
.eso-lp .f-close__in { position: relative; z-index: 1; }
.eso-lp .f-close h2 { color: #fff; font-size: clamp(32px, 3.2vw, 46px); }
.eso-lp .f-close p { font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .88); max-width: 700px; margin: 12px auto 0; }
/* Two balanced lines rather than a long first line and one orphaned word. The measure
   keeps it to two lines even where text-wrap: balance is not supported. */
.eso-lp .f-foot__blurb { max-width: 30ch; text-wrap: balance; }

.eso-lp .f-foot { background: var(--darker); color: rgba(255, 255, 255, .8); font-size: 14px; padding: clamp(40px, 3.7vw, 52px) 0 44px; }
.eso-lp .f-foot__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 60px; }
.eso-lp .f-foot__l { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.eso-lp .f-foot img { width: 100px; margin-bottom: 16px; }
.eso-lp .f-foot a { color: #fff; text-decoration: none; }
.eso-lp .f-foot p + p { margin-top: 12px; }
.eso-lp .f-foot__hours li { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; }
.eso-lp .f-foot__hours li:first-child { padding-top: 0; }
.eso-lp .f-foot__hours b { font-weight: 500; color: rgba(255, 255, 255, .9); }
.eso-lp .f-foot__legal { border-top: 1px solid rgba(255, 255, 255, .14); margin-top: 36px; padding-top: 24px; font-size: 12px; color: rgba(255, 255, 255, .55); text-align: center; line-height: 1.7; }

/* ---------- schedule page ---------- */
.eso-lp .f-schedhead .f-head { margin-bottom: 0; }
.eso-lp .f-schedhead { background: var(--page); padding: clamp(48px, 5vw, 72px) 0 clamp(40px, 4.2vw, 60px); }
.eso-lp .f-sched { background: var(--cream); padding: clamp(38px, 3.9vw, 56px) 0 clamp(52px, 5.3vw, 76px); }
.eso-lp .f-summary { background: #fff; border: 0; border-radius: 3px; padding: 24px clamp(24px, 2.7vw, 39px); display: grid;
  grid-template-columns: 361px 400px minmax(0, 1fr); gap: 0; align-items: center; min-height: 220px; }
.eso-lp .f-summary > * + * { position: relative; padding-left: clamp(22px, 2.6vw, 38px); }
.eso-lp .f-summary > * + *::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 150px; background: #D8D0E6; }
.eso-lp .f-summary__price { font-family: var(--serif); font-weight: 500; font-size: 44px; line-height: 1; color: var(--accent); letter-spacing: -.02em; }
.eso-lp .f-summary__note { font-size: 14px; color: var(--muted); margin-top: 8px; }
.eso-lp .f-summary .f-ticks li { font-size: 15px; line-height: 1.53; padding: 5px 0; color: var(--body); }
.eso-lp .f-summary__who { display: flex; align-items: center; gap: 12px; }
.eso-lp .f-summary__who { gap: 14px; }
.eso-lp .f-summary__who img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; }
.eso-lp .f-calendar { background: #fff; border: 0; border-radius: 3px; margin-top: 22px; overflow: hidden; }
.eso-lp .f-calendar__head { padding: clamp(26px, 2.85vw, 41px) clamp(26px, 2.85vw, 41px) 0; }
.eso-lp .f-calendar__slot { min-height: 460px; display: grid; place-items: center; text-align: center; margin: 0 clamp(26px, 2.85vw, 41px) clamp(30px, 3.1vw, 45px); background: rgba(245, 240, 236, .55); }
.eso-lp .f-calendar__slot iframe { width: 100%; min-height: 460px; }
.eso-lp .f-calendar__ph { color: var(--muted); font-size: 14px; }
.eso-lp .f-calendar__ph b { display: block; font-size: 16px; color: var(--ink); margin-bottom: 6px; }

/* ---------- thank-you page ---------- */
.eso-lp .f-thanks { text-align: center; background: var(--page); padding: clamp(56px, 6.7vw, 96px) 0; }
.eso-lp .f-thanks h1 { font-size: clamp(40px, 4.3vw, 62px); letter-spacing: -.02em; }
.eso-lp .f-thanks__rule { width: 64px; height: 3px; background: var(--gold); margin: 20px auto 0; }
.eso-lp .f-thanks__lead { font-size: 21px; font-weight: 500; color: var(--ink); margin-top: 26px; }
.eso-lp .f-thanks h1 { margin: 0; line-height: 1.1; }
.eso-lp .f-thanks__sub { font-size: 16px; line-height: 1.7; color: var(--muted); max-width: 468px; margin: 8px auto 0; }
.eso-lp .f-steps { max-width: 760px; background: var(--cream); padding: 30px 36px; margin: clamp(30px, 3.1vw, 44px) auto 0; text-align: left; border-radius: 3px; }
.eso-lp .f-steps .f-eyebrow { margin-bottom: 18px; }
.eso-lp .f-steps li + li { border-top: 1px solid #D8D0E6; }
.eso-lp .f-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0; padding: 12px 0; font-size: 15px; line-height: 1.66; }
.eso-lp .f-steps i { font-style: normal; font-family: var(--serif); font-weight: 500; color: var(--gold); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .eso-lp .f-offer__grid, .eso-lp .f-people, .eso-lp .f-faqgrid { grid-template-columns: minmax(0, 1fr); }
  .eso-lp .f-summary { grid-template-columns: minmax(0, 1fr); }
  .eso-lp .f-reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .eso-lp .f-grid3 { grid-template-columns: minmax(0, 1fr); }
  .eso-lp .f-strip__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eso-lp .f-strip__i:nth-child(3) { border-left: 0; }
  .eso-lp .f-strip__i:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .35); }
  .eso-lp .f-banner { flex-direction: column; align-items: flex-start; }
  .eso-lp .f-foot__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .eso-lp { font-size: 16px; }
  .eso-lp .f-grid2, .eso-lp .f-reviews { grid-template-columns: minmax(0, 1fr); }
  .eso-lp .f-topbar__addr { display: none; }
  .eso-lp .f-topbar__row { justify-content: center; }
  .eso-lp .f-hero__ticks { gap: 10px 22px; font-size: 13px; }
  .eso-lp .f-person { grid-template-columns: 72px minmax(0, 1fr); }
  .eso-lp .f-person img { width: 72px; height: 90px; }
  .eso-lp .f-btn { width: 100%; }
  .eso-lp .f-banner .f-btn, .eso-lp .f-hero__cta .f-btn { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .eso-lp *, .eso-lp *::before, .eso-lp *::after { transition: none !important; }
}

/* ---------- split hero (Hygiene, Aligners, Implants): copy left, booking card right ---------- */
.eso-lp .f-hero--split { text-align: left; padding: clamp(104px, 9.7vw, 140px) 0 clamp(52px, 5.8vw, 84px); }
.eso-lp .f-hero--split .f-hero__grid { display: grid; grid-template-columns: minmax(0, 694px) 470px; gap: clamp(30px, 3.9vw, 56px); align-items: start; }
/* The left column used to be short, so it was pushed down to sit beside the card.
   It now carries the five inclusions and the call button, so it starts level with the card.
   Scoped to the hygiene funnel; aligners and implants keep their original offset. */
.eso-lp .f-hero--split .f-hero__grid > *:first-child { padding-top: clamp(0px, 9.65vw, 139px); }
.eso-lp.eso-accent-hygiene .f-hero--split .f-hero__grid > *:first-child { padding-top: 0; }
.eso-lp .f-hero--split h1 { font-size: clamp(38px, 4.05vw, 58px); line-height: 1.12; margin: 16px 0 0; max-width: none; }
.eso-lp .f-hero--split .f-hero__sub { margin: 20px 0 0; max-width: 620px; }
.eso-lp .f-hero--split .f-eyebrow { color: var(--gold); }
.eso-lp .f-hero--split .f-rating { justify-content: flex-start; }
.eso-lp .f-heroprice { display: flex; align-items: flex-end; gap: 18px; margin-top: clamp(24px, 3vw, 40px); }
.eso-lp .f-heroprice__n { font-family: var(--serif); font-weight: 500; font-size: clamp(44px, 4.4vw, 64px); line-height: 1; color: var(--gold); letter-spacing: -.02em; }
.eso-lp .f-heroprice__was { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .8); line-height: 1.5; }
.eso-lp .f-heroprice__was b { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 2.3vw, 34px); letter-spacing: -.01em; text-transform: none; text-decoration: line-through; text-decoration-thickness: 2px; color: rgba(255, 255, 255, .72); }
/* Hero inclusions. Whitefield carries these in the left column under the price,
   not inside the form card, so the offer is readable before anyone looks at the form. */
.eso-lp .f-heroincl { margin: clamp(22px, 2.4vw, 30px) 0 0; display: grid; gap: 9px; }
.eso-lp .f-heroincl li { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 4px; font-size: 15px; font-weight: 500; line-height: 1.5; color: #fff; }
.eso-lp .f-heroincl i { font-style: normal; color: var(--gold); font-weight: 500; }
.eso-lp .f-heroincl__call { margin-top: clamp(20px, 2.2vw, 26px); }
@media (max-width: 600px) { .eso-lp .f-heroincl li { font-size: 14px; } }

.eso-lp .f-heroproof { margin: clamp(20px, 2.2vw, 26px) 0 0; font-size: 14px; color: rgba(255, 255, 255, .9); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.eso-lp .f-heroproof .f-stars { color: var(--gold); letter-spacing: .08em; }
.eso-lp .f-herostats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin-top: clamp(22px, 2.6vw, 34px); background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .14); border-radius: 3px; overflow: hidden; }
.eso-lp .f-herostats div { background: rgba(31, 32, 34, .55); padding: 16px 18px; }
.eso-lp .f-herostats b { display: block; font-family: var(--serif); font-weight: 500; font-size: 23px; color: var(--gold); letter-spacing: -.01em; }
.eso-lp .f-herostats span { font-size: 12px; color: rgba(255, 255, 255, .85); }

/* Booking card in the split hero */
.eso-lp .f-bookcard { background: #fff; color: var(--body); border-radius: 5px; padding: clamp(24px, 2.4vw, 34px); }
.eso-lp .f-bookcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.eso-lp .f-bookcard__head h2 { font-family: var(--serif); font-weight: 400; font-size: 29px; line-height: 1.24; color: var(--ink); }
.eso-lp .f-bookcard__was { font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; padding-top: 6px; }
.eso-lp .f-heroprice--line { display: block; margin-top: clamp(20px, 2.2vw, 28px); font-family: var(--sans); font-size: 17px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.eso-lp .f-bookcard__price { display: flex; align-items: baseline; gap: 14px; margin: 14px 0 0; }
.eso-lp .f-bookcard__price s { font-family: var(--serif); font-size: clamp(24px, 2vw, 30px); color: var(--muted); text-decoration-thickness: 2px; }
.eso-lp .f-bookcard__price b { font-family: var(--serif); font-weight: 500; font-size: clamp(42px, 3.6vw, 54px); line-height: 1; letter-spacing: -.02em; color: var(--accent); }
.eso-lp .f-bookcard__offer { margin: 14px 0 18px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.55; color: var(--body); }
.eso-lp .f-bookcard__incl { margin: 18px 0 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; }
.eso-lp .f-bookcard__incl li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: baseline; gap: 4px; font-size: 14px; line-height: 1.57; padding: 2px 0; }
.eso-lp .f-bookcard__incl i { font-style: normal; color: var(--gold-deep); font-weight: 500; }
.eso-lp .f-bookcard__worth { font-size: 14px; font-weight: 500; color: var(--gold-deep); white-space: nowrap; }
.eso-lp .f-bookcard .f-btn { margin-top: 4px; }
.eso-lp .f-bookcard__alt { display: block; text-align: center; font-size: 16px; font-weight: 500; color: var(--ink); text-decoration: none; padding: 16px; border: 1px solid var(--line); border-radius: 3px; margin-top: 10px; }
.eso-lp .f-bookcard__alt:hover { border-color: var(--ink); }
.eso-lp .f-bookcard__note { font-size: 11px; color: var(--muted); text-align: center; margin-top: 12px; }

/* ---------- numbered steps row ---------- */
.eso-lp .f-steprow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 32px); counter-reset: fstep; }
.eso-lp .f-steprow > div { counter-increment: fstep; }
/* The number now lives on the photo (.f-stepcard__n), per frame — no generated counter. */
.eso-lp .f-steprow > div:not(.f-stepcard)::before { content: counter(fstep); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 15px; font-weight: 500; margin-bottom: 18px; }
.eso-lp .f-steprow h3 { font-family: var(--serif); font-weight: 500; font-size: 21px; letter-spacing: -.01em; }
.eso-lp .f-sec--dark .f-steprow h3 { color: #fff; }
.eso-lp .f-steprow p { font-size: 14px; line-height: 1.64; margin-top: 8px; }
.eso-lp .f-ctarow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; margin-top: clamp(28px, 3.4vw, 46px); }

/* ---------- inclusions with a "worth" column ---------- */
.eso-lp .f-worth li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: baseline; gap: 6px; font-size: 17px; line-height: 1.53; padding: 10px 0; }
.eso-lp .f-worth li span:last-child { font-size: 14px; color: rgba(255, 255, 255, .78); white-space: nowrap; }
.eso-lp .f-pricecard__was { font-size: 15px; color: var(--ink); }
.eso-lp .f-pricecard__gap { font-size: 13px; font-weight: 500; color: var(--ink); margin-top: 8px; }
.eso-lp .f-pricecard--light { background: var(--gold); border-color: transparent; }
.eso-lp .f-pricecard--light .f-pricecard__n { color: #fff; }
.eso-lp .f-pricecard--light .f-pricecard__l { background: none; padding: 0; color: #311849; }
.eso-lp .f-pricecard--light .f-pricecard__note, .eso-lp .f-pricecard--light .f-pricecard__pay { color: #311849; }

/* ---------- mobile sticky bar (in the design as "MOBILE REFERENCE") ---------- */
.eso-lp .f-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); background: var(--dark); box-shadow: 0 -8px 24px rgba(0, 0, 0, .28); }
.eso-lp .f-sticky .f-btn { padding: 15px 12px; font-size: 14px; width: 100%; }
.eso-lp .f-sticky .f-btn--out { background: var(--gold); color: var(--darker); border: 0; }
.eso-lp .f-sticky .f-btn--out:hover { background: var(--gold-deep); color: var(--darker); }
/* Mobile order on the hygiene hero: eyebrow, heading, form, then the rest.
   `display: contents` lifts the left column's children into the hero flex row so the
   form card can sit between the heading and the supporting copy. */
@media (max-width: 860px) {
  .eso-lp.eso-accent-hygiene .f-hero--split .f-hero__grid { display: flex; flex-direction: column; }
  .eso-lp.eso-accent-hygiene .f-hero--split .f-hero__grid > div:first-child { display: contents; }
  .eso-lp.eso-accent-hygiene .f-hero--split .f-eyebrow      { order: 1; }
  .eso-lp.eso-accent-hygiene .f-hero--split h1              { order: 2; }
  .eso-lp.eso-accent-hygiene .f-hero--split .f-bookcard     { order: 3; margin-top: 26px; }
  .eso-lp.eso-accent-hygiene .f-hero--split .f-hero__sub    { order: 4; }
  .eso-lp.eso-accent-hygiene .f-hero--split .f-heroprice    { order: 5; }
  .eso-lp.eso-accent-hygiene .f-hero--split .f-heroincl     { order: 6; }
  .eso-lp.eso-accent-hygiene .f-hero--split .f-heroincl__call { order: 7; }
  .eso-lp.eso-accent-hygiene .f-hero--split .f-heroproof    { order: 8; }
}

@media (max-width: 860px) {
  .eso-lp .f-sticky { display: grid; }
  .eso-lp .f-foot { padding-bottom: 96px; }
  .eso-lp .f-hero--split .f-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .eso-lp .f-hero--split .f-hero__grid > *:first-child { padding-top: 0; }
  .eso-lp .f-steprow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eso-lp .f-herostats { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .eso-lp .f-steprow { grid-template-columns: minmax(0, 1fr); }
  .eso-lp .f-worth li, .eso-lp .f-bookcard__incl li { grid-template-columns: 24px minmax(0, 1fr); }
  .eso-lp .f-worth li span:last-child, .eso-lp .f-bookcard__worth { grid-column: 2; }
}

/* ---------- price list (Aligners, Implants) ---------- */
.eso-lp .f-pricelist li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: baseline; gap: 8px; font-size: 17px; line-height: 1.5; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.eso-lp .f-pricelist li:last-child { border-bottom: 0; }
.eso-lp .f-pricelist i { font-style: normal; color: var(--gold); font-weight: 500; }
.eso-lp .f-pricelist b { font-family: var(--serif); font-weight: 500; font-size: 20px; color: #fff; white-space: nowrap; }

/* ---------- before/after cases (PLACEHOLDER in the design) ---------- */
.eso-lp .f-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.eso-lp .f-case { border: 1px solid var(--line); border-radius: 3px; overflow: hidden; background: #fff; }
.eso-lp .f-case__img { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--cream); color: var(--muted); font-size: 13px; text-align: center; padding: 16px; }
.eso-lp .f-case__img img { width: 100%; height: 100%; object-fit: cover; }
.eso-lp .f-case__cap { padding: 14px 18px; font-size: 13px; color: var(--muted); }
.eso-lp .f-note { font-size: 12px; line-height: 1.7; color: var(--muted); text-align: center; margin-top: 20px; }
.eso-lp .f-sec--dark .f-note { color: rgba(255, 255, 255, .6); }
@media (max-width: 860px) { .eso-lp .f-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .eso-lp .f-cases { grid-template-columns: minmax(0, 1fr); } }

/* ---------- exact-match corrections against the Figma frames ----------
   The split hero is wider than the standard 1140 column: the design runs copy from x110 to x804 (694)
   and the booking card from x894 (402), i.e. a 1220 container with a 124 gap. */
.eso-lp .f-hero--split .f-wrap { width: min(100% - (var(--gutter) * 2), 1220px); }
@media (min-width: 1260px) {
  .eso-lp .f-hero--split .f-hero__grid { grid-template-columns: 694px 470px; gap: 56px; }
}
/* Hero price: 64px on Hygiene, 58px on the two Meta funnels, per frame. */
.eso-lp .f-heroprice__n { font-size: clamp(44px, 4.45vw, 64px); }
.eso-lp.eso-accent-aligners .f-heroprice__n,
.eso-lp.eso-accent-implants .f-heroprice__n { font-size: clamp(42px, 4.03vw, 58px); }
/* Offer price card: 82px on Emergency, 74px on Hygiene. */
.eso-lp.eso-accent-hygiene .f-pricecard__n { font-size: clamp(52px, 5.14vw, 74px); }

/* Live Google review feed (Tagembed or any pasted embed) drops into the same slot as the cards. */
.eso-lp .f-reviews-embed { min-height: 240px; }
.eso-lp .f-reviews-embed iframe { width: 100%; border: 0; }

/* ---------- hero form, to the frame ----------
   The input styling previously only reached .f-formcard, so the booking-card fields on Hygiene,
   Aligners and Implants fell back to browser defaults. Everything below is scoped to the form itself. */
.eso-lp .leadform--figma .f-field { margin: 0 0 12px; }
.eso-lp .leadform--figma .f-field__l { display: block; font-size: 10px; line-height: 14px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 5px; }
.eso-lp .leadform--figma input[type=text],
.eso-lp .leadform--figma input[type=tel],
.eso-lp .leadform--figma input[type=email],
.eso-lp .leadform--figma textarea {
  width: 100%; height: 51px; font: 400 15px/1.5 var(--sans); color: var(--ink);
  background: #F7F5FB; border: 1px solid #D8D0E6; border-radius: 3px; padding: 13px 16px;
}
.eso-lp .leadform--figma textarea { height: auto; min-height: 84px; }
.eso-lp .leadform--figma input::placeholder { color: var(--muted); }
.eso-lp .leadform--figma input:focus, .eso-lp .leadform--figma textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(138, 106, 68, .16); }
.eso-lp .leadform--figma .is-invalid { border-color: #b4452a; background: #fdf1ef; }
.eso-lp .leadform--figma .f-consent-row { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 10px; align-items: start; margin: 4px 0 16px; }
.eso-lp .leadform--figma .f-consent-row input { width: 15px; height: 15px; margin: 2px 0 0; accent-color: var(--accent); border: 1px solid #D8D0E6; border-radius: 3px; }
.eso-lp .leadform--figma .f-consent-row span { font-size: 12px; line-height: 1.5; color: var(--muted); }
.eso-lp .leadform--figma .leadform__submit { width: 100%; height: 52px; padding: 0; font-size: 16px; font-weight: 500; }
.eso-lp .leadform--figma .f-consent { font-size: 11px; line-height: 1.55; color: var(--muted); text-align: center; margin: 12px 0 0; }
/* Secondary "call" button under the form, per frame: white, 54px, hairline border. */
.eso-lp .f-bookcard__alt, .eso-lp .f-formcard__alt {
  display: flex; align-items: center; justify-content: center; height: 54px; margin-top: 10px;
  background: #fff; border: 1px solid #D8D0E6; border-radius: 3px;
  font-size: 16px; font-weight: 500; color: var(--ink); text-decoration: none;
}
.eso-lp .f-bookcard__alt:hover, .eso-lp .f-formcard__alt:hover { border-color: var(--ink); }

/* Top bar carries the white logo, centred, on every frame. */
.eso-lp .f-topbar__row { position: relative; min-height: 84px; }
/* Sticky nav. The hero carries its own transparent bar, which scrolls away with it,
   so this takes over from the point the hero leaves the viewport. */
.eso-lp .f-stickynav { position: fixed; top: 0; left: 0; right: 0; z-index: 80; background: var(--darker); transform: translateY(-101%); transition: transform .22s ease; }
.eso-lp .f-stickynav.is-visible { transform: none; }
.eso-lp .f-stickynav__row { display: flex; align-items: center; gap: 20px; min-height: 66px; padding: 9px 0; }
.eso-lp .f-stickynav__logo { width: 70px; height: auto; }
.eso-lp .f-stickynav__tel { margin-left: auto; color: #fff; text-decoration: none; font-size: 15px; white-space: nowrap; }
.eso-lp .f-stickynav__tel:hover { color: #fff; text-decoration: underline; }
.eso-lp .f-stickynav__tel span { color: rgba(255, 255, 255, .62); }
.eso-lp .f-stickynav .f-btn { padding: 13px 24px; font-size: 14px; white-space: nowrap; }
@media (max-width: 860px) {
  /* .f-sticky already pins the actions to the bottom at this width; two fixed bars
     and two competing calls to action is too much chrome on a phone. */
  .eso-lp .f-stickynav { display: none; }
}

.eso-lp .f-topbar__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 94px; }
.eso-lp .f-hero .f-topbar__logo { width: 87px; }
@media (max-width: 860px) { .eso-lp .f-topbar__logo { display: none; } }

/* Footer hours rows (the schedule/landing footers list them as label + time, per frame). */
.eso-lp .f-hours--light li { color: rgba(255, 255, 255, .85); padding: 3px 0; }
.eso-lp .f-hours--light b { color: #fff; }

/* ---------- how-it-works step cards (270x348 white card, 270x190 photo, gold number badge) ---------- */
.eso-lp .f-steprow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.eso-lp .f-stepcard { background: #fff; border-radius: 3px; overflow: hidden; }
.eso-lp .f-stepcard__photo { position: relative; aspect-ratio: 270 / 190; }
.eso-lp .f-stepcard__photo img { width: 100%; height: 100%; object-fit: cover; }
.eso-lp .f-stepcard__n { position: absolute; left: 16px; top: 16px; width: 34px; height: 34px; border-radius: 3px; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 15px; font-weight: 500; }
.eso-lp .f-stepcard__copy { padding: 24px; }
/* The card sits on a dark section but is white itself, so the title must beat .f-sec--dark h3. */
.eso-lp .f-sec--dark .f-stepcard__copy h3,
.eso-lp .f-stepcard__copy h3 { font-family: var(--serif); font-weight: 500; font-size: 21px; letter-spacing: -.01em; color: var(--ink); }
.eso-lp .f-stepcard__copy p { font-size: 14px; line-height: 1.64; color: var(--body); margin-top: 9px; }
.eso-lp .f-cases figure { margin: 0; }
@media (max-width: 1080px) { .eso-lp .f-steprow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .eso-lp .f-steprow { grid-template-columns: minmax(0, 1fr); } }

/* Review card header: stars left, Google mark right, per frame. */
.eso-lp .f-review__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.eso-lp .f-review__g { display: inline-flex; flex: 0 0 19px; }

/* ---------- offer panel, to the frame ----------
   Overlay #2A2340 at 85%, gold eyebrow, white heading, and the inclusions sit on a 6% white panel with
   14% white dividers. The heading was inheriting the dark body colour and vanishing into the photo. */
.eso-lp .f-offer__bg::after { background: rgba(42, 43, 46, .85); }
.eso-lp .f-offer .f-eyebrow { color: var(--gold); }
.eso-lp .f-offer h2, .eso-lp .f-offer .f-h2 { color: #fff; }
.eso-lp .f-offer .f-lede { color: rgba(255, 255, 255, .86); }
.eso-lp .f-offer__grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: stretch; }
.eso-lp .f-offer .f-ticks, .eso-lp .f-offer .f-pricelist { background: rgba(255, 255, 255, .06); border-radius: 3px; padding: 8px 32px; }
.eso-lp .f-offer .f-ticks li, .eso-lp .f-offer .f-pricelist li { min-height: 60px; align-content: center; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .95); }
.eso-lp .f-offer .f-ticks li:last-child, .eso-lp .f-offer .f-pricelist li:last-child { border-bottom: 0; }
.eso-lp .f-offer .f-worth li span:last-child { color: rgba(255, 255, 255, .55); }
.eso-lp .f-offer .f-pricecard { display: flex; flex-direction: column; justify-content: center; }
.eso-lp.eso-accent-emergency .f-offer__grid { grid-template-columns: minmax(0, 1fr) 360px; }
@media (max-width: 1080px) { .eso-lp .f-offer__grid { grid-template-columns: minmax(0, 1fr) !important; } }

/* ---------- payment + fund logos as white tiles, to the frame ----------
   Ways to pay: 271x90 white tiles holding a 225x44 logo. Health funds: 216x72 tiles, 182x38 logo,
   five per row, in colour (the earlier greyscale/opacity treatment was mine, not the design's). */
.eso-lp .f-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.eso-lp .f-logos > img { width: 100%; height: 92px; object-fit: contain; padding: 23px; background: #fff; border-radius: 3px; opacity: 1; }
.eso-lp .f-logos--funds { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 14px; }
.eso-lp .f-logos--funds > img { height: 74px; padding: 17px; filter: none; opacity: 1; }
.eso-lp .f-logos__l { text-align: center; }
@media (max-width: 860px) {
  .eso-lp .f-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eso-lp .f-logos--funds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- FAQ inside a white card, map card 400 wide with a 300px map ---------- */
.eso-lp .f-faqgrid { grid-template-columns: 718px minmax(0, 1fr); gap: 22px; align-items: start; }
.eso-lp .f-faq { background: #fff; border-top: 0; border-radius: 3px; padding: 10px 34px; }
.eso-lp .f-sec--cream .f-faq, .eso-lp .f-sec .f-faq { background: #fff; }
.eso-lp .f-faqitem { border-bottom: 1px solid #D8D0E6; padding: 26px 0; }
.eso-lp .f-faqitem:last-child { border-bottom: 0; }
.eso-lp .f-mapcard { background: #2A2340; padding: 34px; border-radius: 3px; }
.eso-lp .f-mapcard__map img, .eso-lp .f-mapcard__map iframe { height: 300px; }
@media (max-width: 1080px) { .eso-lp .f-faqgrid { grid-template-columns: minmax(0, 1fr); } }

/* Section backgrounds, straight from the frames. */
.eso-lp .f-sec { background: var(--page); }
.eso-lp .f-sec--cream { background: var(--cream); }
.eso-lp .f-sec--sand { background: var(--sand2); }
.eso-lp .f-sec--dark { background: var(--dark); }
.eso-lp .f-card { background: #fff; }

/* Overlay strength per funnel, straight from the frames. */
.eso-lp.eso-accent-emergency .f-offer__bg::after { background: rgba(42, 43, 46, .93); }
.eso-lp.eso-accent-aligners .f-offer__bg::after  { background: rgba(42, 43, 46, .92); }
.eso-lp.eso-accent-implants .f-offer__bg::after  { background: rgba(42, 43, 46, .93); }
.eso-lp.eso-accent-emergency .f-close__bg::after { background: rgba(42, 43, 46, .88); }
.eso-lp.eso-accent-aligners .f-close__bg::after  { background: rgba(42, 43, 46, .85); }
.eso-lp.eso-accent-implants .f-close__bg::after  { background: rgba(42, 43, 46, .88); }

/* ---------- button colours, per frame ----------
   Emergency's callback submit is dark (#311849), not red. The price-card button is dark on every
   funnel. Secondary CTAs are a solid dark button (#2A2340), not an outlined ghost. */
.eso-lp.eso-accent-emergency .leadform--figma .leadform__submit { background: #311849; }
.eso-lp.eso-accent-emergency .leadform--figma .leadform__submit:hover { background: #231D33; }
.eso-lp .f-pricecard .f-btn { background: #311849; color: #fff; }
.eso-lp .f-pricecard .f-btn:hover { background: #231D33; }
.eso-lp .f-btn--ghost { background: #2A2340; color: #fff; border: 0; }
.eso-lp .f-btn--ghost:hover { background: #1c1d1f; color: #fff; }
/* The solid dark secondary above is correct on the cream sections, but it vanishes
   wherever the surface behind it is dark: the closing photo band, the dark sections,
   the dark banner and the map card. In those it becomes an outlined button: still
   clearly secondary to the gold, but unmistakably a button. */
.eso-lp .f-close .f-btn--ghost,
.eso-lp .f-sec--dark .f-btn--ghost,
.eso-lp .f-sec--darker .f-btn--ghost,
.eso-lp .f-banner .f-btn--ghost,
.eso-lp .f-mapcard .f-btn--ghost { background: rgba(255, 255, 255, .1); color: #fff; border: 1.5px solid rgba(255, 255, 255, .85); }
.eso-lp .f-close .f-btn--ghost:hover,
.eso-lp .f-sec--dark .f-btn--ghost:hover,
.eso-lp .f-sec--darker .f-btn--ghost:hover,
.eso-lp .f-banner .f-btn--ghost:hover,
.eso-lp .f-mapcard .f-btn--ghost:hover { background: rgba(255, 255, 255, .22); border-color: #fff; color: #fff; }

/* ---------- clinician split, to the frame ----------
   452px photo flush against a 688px bios panel filled #F7F5FB, people divided by a #D8D0E6 hairline. */
.eso-lp .f-people { grid-template-columns: 452px minmax(0, 1fr); gap: 0; align-items: stretch; }
.eso-lp .f-people__photo img { height: 100%; object-fit: cover; border-radius: 3px 0 0 3px; }
.eso-lp .f-people > div:last-child { background: #F7F5FB; border-radius: 0 3px 3px 0; padding: 12px 38px; display: flex; flex-direction: column; justify-content: center; }
.eso-lp .f-person { border-bottom: 1px solid #D8D0E6; padding: 22px 0; }
.eso-lp .f-person:last-child { border-bottom: 0; }
.eso-lp .f-sec--cream .f-people > div:last-child { background: #fff; }
@media (max-width: 1080px) {
  .eso-lp .f-people { grid-template-columns: minmax(0, 1fr); }
  .eso-lp .f-people__photo img { border-radius: 3px 3px 0 0; height: auto; }
  .eso-lp .f-people > div:last-child { border-radius: 0 0 3px 3px; padding: 6px 24px; }
}
.eso-lp .f-pricecard__pay { font-size: 13px; color: var(--ink); margin: 12px 0 0; }

/* Emergency price card internals, to the frame: 34px padding, 6/10/16 spacers, 48px button. */
.eso-lp.eso-accent-emergency .f-pricecard { padding: 34px; }
.eso-lp.eso-accent-emergency .f-pricecard__n { margin: 6px 0 10px; }
.eso-lp.eso-accent-emergency .f-pricecard__note { max-width: 191px; margin-inline: auto; }
.eso-lp.eso-accent-emergency .f-pricecard .f-btn { margin-top: 16px; height: 48px; padding: 0 20px; }
/* Emergency inclusions panel: 66px rows, 10/34 panel padding - the frame's proportions. */
.eso-lp.eso-accent-emergency .f-offer .f-ticks { padding: 10px 32px 34px; }
.eso-lp.eso-accent-emergency .f-offer .f-ticks li { min-height: 66px; padding: 20px 0; }
/* The emergency frame's location card carries a 201px map, not the 300px the other three use. */
.eso-lp.eso-accent-emergency .f-mapcard__map img, .eso-lp.eso-accent-emergency .f-mapcard__map iframe { height: 201px; }

/* Schedule page's "in a lot of pain" band, to the frame: 110px, 22px title, 240x50 button. */
.eso-lp .f-sched .f-banner { min-height: 110px; padding: 0 34px; }
.eso-lp .f-sched .f-banner h3 { font-size: 22px; }
.eso-lp .f-sched .f-banner p { font-size: 15px; color: rgba(255, 255, 255, .78); }
.eso-lp .f-sched .f-banner .f-btn { min-width: 240px; height: 50px; font-size: 16px; }

/* Thank-you page, to the frame: 340x61 call button and a centred footer mark. */
.eso-lp .f-thanks .f-btn--lg { min-width: 340px; height: 54px; padding: 0 28px; font-size: 16px; }
.eso-lp .f-foot__mark { display: block; width: 100px; margin: 0 auto 16px; }
.eso-lp .f-thanks + .f-foot { padding: 40px 0 36px; text-align: center; }
.eso-lp .f-thanks + .f-foot p { font-size: 14px; color: rgba(255, 255, 255, .75); }
.eso-lp .f-thanks + .f-foot .f-foot__legal { border: 0; margin-top: 8px; padding-top: 0; font-size: 12px; color: rgba(255, 255, 255, .45); }