/* =============================================================================
   Bridge: older pages onto the 2026 design system (css/w2w.css).
   Loaded LAST on pages that still carry style.css / reposition.css and their own
   page <style> blocks (edu_* guides, sb_* surgical packages). It restyles the
   shared classes with the app tokens so those pages read like the new home page,
   without rewriting their markup, forms or scripts.
   Delete a page's dependency on this file once that page is rebuilt natively.
   ============================================================================= */

/* style.css sets `* { font-family: Poppins }`, which beats inheritance on every element */
body, body *:not(i):not([class*="fa-"]) { font-family: var(--font) !important; }
body { background: var(--ground) !important; color: var(--ink); }
.page-wrapper { min-height: 0; }
main { padding-bottom: 24px; }
.container { width: 100%; max-width: var(--max); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.edu_body .container { max-width: var(--max); }
main img { max-width: 100%; height: auto; }
main a { text-underline-offset: 2px; }

/* ---------- hero: text on a domain wash, not a card ---------- */
.hero_section { position: relative; isolation: isolate; padding: 64px 0 28px; background: none; }
.hero_section::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 520px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, var(--wash-orange), rgba(248,105,47,0)); }
.hero_section:has(.w2w-p-green)::before, .hero_section:has(.gradient_title_green)::before { background: linear-gradient(180deg, var(--wash-green), rgba(27,140,94,0)); }
.hero_section:has(.w2w-p-blue)::before, .hero_section:has(.gradient_title_blue)::before { background: linear-gradient(180deg, var(--wash-blue), rgba(13,153,255,0)); }
.hero_section .w2w-panel { background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; }
.hero_section .w2w-panel.w2w-lead-card, .hero_section .w2w-lead, .hero_section .w2w-lead-card { background: #fff; border: 1px solid var(--ink-13); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 28px; }

/* ---------- titles: solid ink, the app's tight display type ---------- */
.gradient_title, .gradient_title_green, .gradient_title_blue, .gradient_title_orange, .hero_title,
.edu_h2, .edu_h3, .edu_tldr_h, .edu_factors h3, .edu_factor_grid strong, .section-title, .w2w-sec-head h2 {
  background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
}
main .hero_section h1, main .hero_section h1[class], main .hero_title {
  color: var(--ink); font-size: clamp(38px, 5.4vw, 62px); line-height: 1.07; font-weight: 700; letter-spacing: -.035em;
  width: auto; max-width: 900px; margin: 0 0 18px; text-align: left;
}
.gradient_title_align { text-align: left; }
.section-title, .w2w-sec-head h2, .edu_h2, main .gradient_title_green, main .gradient_title_blue, main .gradient_title_orange, .hero_section h2, .hero_section h3.gradient_title_blue {
  color: var(--ink); font-size: clamp(26px, 3.2vw, 36px); line-height: 1.15; font-weight: 700; letter-spacing: -.02em;
}
.edu_h2 { margin-bottom: 14px; }
.edu_h3, .edu_factors h3 { color: var(--green-text); font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.edu_factor_grid strong { color: var(--green-text); }
.edu_tldr_h { color: var(--ink); font-size: 22px; font-weight: 700; }

/* eyebrows */
.edu_kicker, .hero_kicker, .sb_tag, .sb_label {
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--orange-text);
}
.hero_section:has(.w2w-p-green) .edu_kicker, .hero_section:has(.gradient_title_green) .edu_kicker,
.hero_section:has(.gradient_title_green) .hero_kicker { color: var(--green-text); }
.hero_section:has(.w2w-p-blue) .hero_kicker, .hero_section:has(.gradient_title_blue) .hero_kicker { color: var(--blue-text); }

/* body copy */
.content_paragraph, .w2w-panel p, .edu_opt p, .edu_factors > p { color: var(--ink-80); font-size: 17px; line-height: 1.65; }
.edu_sub, .w2w-sec-sub, .hero_lede { color: var(--ink-70); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; }
.edu_review, .edu_photo figcaption, .w2w-terms { color: var(--ink-55); }

/* ---------- panels → app glass cards ---------- */
.w2w-panel {
  background: var(--glass); border: 1px solid var(--ink-13); border-radius: var(--radius);
  box-shadow: none; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.w2w-p-green, .w2w-p-blue, .w2w-p-orange { background: #fff; }
main section + section { margin-top: 0; }

/* bullet lists → the app's green tick */
.booktreatment-list li, .booktreatment-list-green li, .rewards-list li { color: var(--ink-80); font-size: 17px; padding-left: 30px; }
.booktreatment-list li::before, .booktreatment-list li:before, .booktreatment-list-green li:before, .rewards-list li:before,
.w2w-p-green .booktreatment-list li::before, .w2w-p-orange .booktreatment-list li::before {
  content: ""; position: absolute; left: 2px; top: 8px; width: 13px; height: 7px;
  border-left: 2.4px solid var(--green); border-bottom: 2.4px solid var(--green); transform: rotate(-45deg); color: transparent;
}
.w2w-p-blue .booktreatment-list li::before { border-color: var(--blue); }
.w2w-p-orange .booktreatment-list li::before { border-color: var(--orange); }
.hero_trust li::before { color: var(--green); }

/* ---------- buttons ---------- */
.w2w-cta-btn, .sb_btn, .w2w-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent;
  background: var(--orange-btn); color: #fff; font-weight: 700; font-size: 16px; text-decoration: none;
  box-shadow: 0 8px 20px rgba(226,84,27,.28); white-space: normal; text-align: center; line-height: 1.25;
}
.w2w-cta-btn:hover, .sb_btn:hover, .w2w-btn:hover { background: #CC4914; color: #fff; }
.w2w-btn:disabled { background: #D9D2CE; box-shadow: none; color: #fff; }
.w2w-cta-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.55); box-shadow: none; }
.w2w-cta-ghost:hover { background: rgba(255,255,255,.12); }

/* ---------- app-download CTA block → the dark ink band ---------- */
.w2w-cta { background: var(--ink); border-radius: var(--radius-lg); padding: 52px 56px; box-shadow: none; position: relative; overflow: hidden; isolation: isolate; }
.w2w-cta::before { content: ""; position: absolute; width: 380px; height: 380px; right: -120px; top: -170px; border-radius: 50%; background: #FFD3BF; filter: blur(60px); opacity: .3; z-index: -1; }
.w2w-cta-text h2 { color: #fff; font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -.02em; }
.w2w-cta-text p { color: rgba(255,255,255,.78); }
.w2w-cta .w2w-cta-btn:not(.w2w-cta-ghost) { background: #fff; color: var(--ink); box-shadow: none; }
@media (max-width: 900px) { .w2w-cta { padding: 32px 22px; } }

/* ---------- lead form (rapid physio) ---------- */
.w2w-lead-title { color: var(--ink); font-size: 26px; letter-spacing: -.02em; }
.w2w-lead-sub { color: var(--ink-70); }
.w2w-form label { color: var(--ink); font-weight: 700; font-size: 14px; }
.w2w-form input[type=text], .w2w-form input[type=tel], .w2w-form input[type=email] {
  height: 52px; border-radius: 14px; border: 1px solid var(--ink-13); background: var(--ground); color: var(--ink); font-size: 16px;
}
.w2w-form input:focus { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(248,105,47,.15); background: #fff; outline: none; }
.w2w-btn { width: 100%; }

/* ---------- FAQ accordions (recovery program, FAQs) ---------- */
.faq-main_container .faq_block, .sb_faq_item {
  background: #fff; border: 1px solid var(--ink-13); border-radius: var(--radius); box-shadow: none;
}
.faq-main_container .faq-question .question, .sb_faq_item summary { color: var(--ink); font-weight: 700; }

/* ---------- guides (edu_*) ---------- */
.edu_callout { background: #FFF4EE; border: 1px solid rgba(248,105,47,.30); border-radius: var(--radius); color: var(--ink-80); }
.edu_callout strong { color: var(--orange-text); }
.edu_opt, .edu_factors { background: #fff; border: 1px solid var(--ink-13); border-left-width: 1px; border-radius: var(--radius); box-shadow: none; }
.edu_opt { border-top: 4px solid var(--green); }
.edu_factors { border-top: 4px solid var(--orange); }
.edu_opt h4 { color: var(--green-text); }
.edu_factor_grid li { background: var(--ground); border-color: var(--ink-08); }
.edu_body .w2w-panel a { color: var(--green-text); }
.edu_photo.full img, .edu_photo img { border-radius: 14px; }
/* Guides read like the new pages: plain sections flow across the page (no glass box around each one); only
   highlights keep a card: key takeaways, callouts, option / factor cards, packages, tables. Vertical rhythm and the
   phone breakpoints are unchanged; phones simply get the box's side padding back as text width. */
.edu_body > .container > .w2w-panel:not(.edu_tldr) {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  padding-left: 0; padding-right: 0; margin-bottom: 0;
}
.edu_body > .container > .w2w-panel + .w2w-panel:not(.edu_tldr) { border-top: 1px solid var(--ink-08); }
.edu_body > .container > .edu_tldr {
  background: #fff; border: 1px solid var(--ink-13); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  -webkit-backdrop-filter: none; backdrop-filter: none; margin-bottom: 12px;
}
.edu_body .edu_h2 { font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -.025em; }

/* ---------- surgical packages (sb_*) ---------- */
.sb_estimate_note { background: #EEF7F2; border: 1px solid rgba(27,140,94,.22); border-left-width: 1px; border-radius: var(--radius); }
.sb_estimate_note h3, .sb_estimate_note strong { color: var(--green-text); }
.sb_step_num { background: var(--tint-green); color: var(--green-text); }

/* old waves/background images that the previous footer relied on */
.footer_section, .header_section { display: none; }

/* headings inside hero side cards (rapid physio, surgical) stay at card size */
.hero_section aside h1, .hero_section aside h2, .hero_section .w2w-panel + .w2w-panel h1, .hero_section .w2w-panel + .w2w-panel h2 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; }
.hero_section h3[class*="gradient_title"], .lp_card h3, .sb_sidebar h3 { color: var(--ink); font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.lp_card, .sb_sidebar { background: #fff; border: 1px solid var(--ink-13); border-radius: var(--radius-lg); box-shadow: var(--shadow); }

/* /lp/ landing pages */
.lp_btn { background: var(--orange-btn) !important; border-radius: 999px !important; box-shadow: 0 8px 20px rgba(226, 84, 27, .28); color: #fff !important; }
.lp_btn:hover { background: #CC4914 !important; }
.gradient_title img { display: inline-block !important; height: .9em !important; width: auto !important; vertical-align: -.05em; margin: 0 2px; }
.lp_btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; }
.lp_btn img { display: inline-block !important; height: .9em !important; width: auto !important; margin: 0 !important; vertical-align: middle; }

/* Wide pathway / timeline infographics: on phones they keep almost the screen's height and scroll sideways in
   their own strip instead of shrinking to an unreadable width. Desktop is unchanged. */
.scroll-hint { display: none; }
@media (max-width: 760px) {
  .scroll-x { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    border-radius: 14px; background: #fff; border: 1px solid var(--ink-08); }
  .scroll-x img { height: min(75vh, 560px) !important; width: auto !important; max-width: none !important; border-radius: 0 !important; display: block; }
  .scroll-hint { display: block; margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--ink-55); text-align: right; }
}

/* Surgical packages: section panels flow like the new pages (highlights inside keep their boxes). Phones unchanged
   apart from the box's side padding becoming text width. */
.sb_section > .container > .w2w-panel {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; padding-left: 0; padding-right: 0;
}
.sb_section + .sb_section > .container > .w2w-panel { border-top: 1px solid var(--ink-08); }

/* Rapid physio: sub-headings in the Get seen blue text shade; sections flow instead of sitting in boxes. */
.rp-sub { color: var(--blue-text); font-weight: 700; font-size: 17px; }
.lp_section .hero_content > .w2w-panel {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; padding-left: 0; padding-right: 0;
}
.lp_section .hero_content > .w2w-panel + .w2w-panel { border-top: 1px solid var(--ink-08); }

/* 12-month recovery program: sections flow (no glass box per section); the hero is unchanged. */
.rp-flow section:not(.hero_section) > .container > .w2w-panel {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; padding-left: 0; padding-right: 0; margin-bottom: 0;
}
.rp-flow section:not(.hero_section) + section:not(.appdownload_section) > .container > .w2w-panel { border-top: 1px solid var(--ink-08); }

/* Guide hero eyebrows at the site's eyebrow size (the pages' own style set 17px). */
.edu_hero .edu_kicker { font-size: 13px !important; letter-spacing: 1.5px; margin-bottom: 10px; }

/* One type scale across the site: pages still on the older markup use the same title, section heading and intro
   sizes as the rebuilt pages (.display / .h2 / .lede in w2w.css). */
main .hero_section h1, main .hero_section h1[class], main .hero_title h1 {
  font-size: clamp(40px, 6vw, 68px) !important; letter-spacing: -.035em; line-height: 1.05;
}
main .section-title, main .w2w-sec-head h2, main .edu_h2, main .edu_body h2.edu_h2,
main .hero_content .w2w-panel h2, main .lp_section h2.gradient_title_blue {
  font-size: clamp(30px, 4vw, 46px) !important; line-height: 1.1; letter-spacing: -.02em;
}
main .edu_sub, main .hero_lede { font-size: clamp(17px, 1.6vw, 20px) !important; color: var(--ink-70); }
/* The first paragraph of an older-markup hero is its intro: same size as .lede. */
main .hero_section .w2w-panel:first-child > p.content_paragraph:first-of-type { font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-70); }

/* Rapid physio: title block sits in the left column beside the offer card (like surgeon consults). */
@media (min-width: 769px) {
  .lp_grid > .lp_head { grid-column: 1; grid-row: 1; }
  .lp_grid > .hero_content { grid-column: 1; grid-row: 2; }
  .lp_grid > #book { grid-column: 2; grid-row: 1 / span 2; }
}
.lp_grid > .lp_head h1 { margin-bottom: 8px; }
@media (min-width: 769px) { .lp_grid { grid-template-rows: auto 1fr; } }
/* Get seen pages carry the blue wash in the hero; the rest of the page keeps its own colour. */
.hero_section.hero-blue::before { background: linear-gradient(180deg, var(--wash-blue), rgba(13,153,255,0)) !important; }
/* Hero lead cards on rapid physio and surgeon consults match the home / membership .lead-card:
   28px padding, large shadow, caps eyebrow, 26px heading, and the same column split as .split. */
.lp_grid > .lp_card, .sb_grid > .sb_sidebar { padding: 28px; border-radius: var(--radius-lg); border: 1px solid var(--ink-13); box-shadow: var(--shadow-lg); }
.lp_grid > .lp_card > h3:first-of-type, .sb_grid > .sb_sidebar > h3:first-of-type { font-size: 26px; line-height: 1.2; margin: 0 0 8px !important; }
.lp_grid > .lp_card > .eyebrow, .sb_grid > .sb_sidebar > .eyebrow { margin-bottom: 10px; }
.lp_grid > .lp_card .content_paragraph, .sb_grid > .sb_sidebar > p:not(.sb_hint) { color: var(--ink-70); font-size: 15px; line-height: 1.55; }
/* the $20 lead form sits inside the card: no second box */
.hero_section .lp_card .w2w-lead { background: none; border: 0; border-top: 1px solid var(--ink-08); border-radius: 0; box-shadow: none; padding: 4px 0 0; margin-top: 18px; }
@media (min-width: 769px) {
  .lp_grid, .sb_grid { grid-template-columns: 1.05fr .95fr !important; gap: 56px !important; }
}
@media (max-width: 768px) { .lp_grid > .lp_card, .sb_grid > .sb_sidebar { padding: 22px 20px 24px; } }
/* Surgeon consults hero: headline + photo, then the booking card, then the text (phones);
   on desktop the card sits beside both, like rapid physio. */
@media (min-width: 769px) {
  .sb_grid { grid-template-rows: auto 1fr; }
  .sb_grid > .sb_head { grid-column: 1; grid-row: 1; }
  .sb_grid > .sb_body { grid-column: 1; grid-row: 2; }
  .sb_grid > .sb_sidebar { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 768px) {
  .sb_grid { display: flex !important; flex-direction: column; gap: 0 !important; }
  .sb_grid > .sb_head { order: 1; }
  .sb_grid > .sb_sidebar { order: 2; position: static; margin: 8px 0 8px; }
  .sb_grid > .sb_body { order: 3; }
}
/* The rapid physio photo sits inside .hero_title, which carries the display type: reset it for the photo card. */
main .hero_title .hero-composite { font-size: 16px; line-height: 1.5; font-weight: 400; letter-spacing: normal; max-width: none; }