/* =============================================================================
   Well2Wise - site design system (2026 redesign)
   Tokens come from the customer app (Well2Wise/App.xaml, HomeV2* keys) so the
   site and the app read as one product:
     ground #F9F9F9 · ink #17293D · glass cards (white 60% + ink 13% stroke)
     corner 18 · caps eyebrow 13/700/1.5 · orange = earning, green = health and
     surgery, blue = physio · hearts = points ÷ 100.
   Pages that still link /css/style.css are NOT affected by this file.
   ============================================================================= */

:root {
  --ground: #F9F9F9;
  --ink: #17293D;
  --ink-80: rgba(23, 41, 61, .80);
  --ink-70: rgba(23, 41, 61, .72);
  --ink-55: rgba(23, 41, 61, .58);
  --ink-13: rgba(23, 41, 61, .13);
  --ink-08: rgba(23, 41, 61, .08);

  --orange: #F8692F;          /* earning, rewards, primary action */
  --orange-text: #C2410C;     /* orange that passes 4.5:1 on light grounds */
  --orange-btn: #E2541B;
  --green: #1B8C5E;           /* health, surgery, steps */
  --green-text: #17704C;
  --blue: #0D99FF;            /* physio */
  --blue-text: #0B6FB8;
  --purple: #7A2FE0;

  --tint-orange: rgba(248, 105, 47, .12);
  --tint-green: rgba(27, 140, 94, .12);
  --tint-blue: rgba(13, 153, 255, .12);
  --tint-ink: rgba(23, 41, 61, .08);
  --wash-orange: rgba(248, 105, 47, .06);
  --wash-green: rgba(27, 140, 94, .06);
  --wash-blue: rgba(13, 153, 255, .06);

  --glass: rgba(255, 255, 255, .62);
  --glass-solid: #FFFFFF;
  --radius: 18px;
  --radius-lg: 28px;
  --shadow: 0 1px 2px rgba(23, 41, 61, .04), 0 12px 32px rgba(23, 41, 61, .07);
  --shadow-lg: 0 2px 6px rgba(23, 41, 61, .05), 0 30px 60px rgba(23, 41, 61, .12);

  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --max: 1180px;
  --gutter: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -.02em; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.skip-link:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section { position: relative; padding: 88px 0; }
.section--tight { padding: 56px 0; }
.center { text-align: center; }
.stack > * + * { margin-top: 14px; }

/* ---------- type ---------- */
.eyebrow {
  display: inline-block;
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--orange-text);
  margin-bottom: 14px;
}
.eyebrow--green { color: var(--green-text); }
.eyebrow--blue { color: var(--blue-text); }
.eyebrow--ink { color: var(--ink-70); }
.display { font-size: clamp(40px, 6vw, 68px); font-weight: 700; letter-spacing: -.035em; }
.h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 700; }
.h3 { font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.lede { font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-70); max-width: 640px; }
.muted { color: var(--ink-70); }
.small { font-size: 14px; }
.fine { font-size: 13px; color: var(--ink-55); line-height: 1.5; }
.t-orange { color: var(--orange-text); }
.t-green { color: var(--green-text); }
.t-blue { color: var(--blue-text); }
.section-head { max-width: 720px; margin-bottom: 44px; }
.section-head.center { margin-left: auto; margin-right: auto; }
.section-head .lede { margin-top: 14px; }
.section-head.center .lede { margin-left: auto; margin-right: auto; }

/* ---------- washes (the app's 6% domain tint behind the top of a page) ---------- */
.wash { position: absolute; inset: 0 0 auto 0; height: 560px; z-index: -1; pointer-events: none; }
.wash--orange { background: linear-gradient(180deg, var(--wash-orange), rgba(248,105,47,0)); }
.wash--green { background: linear-gradient(180deg, var(--wash-green), rgba(27,140,94,0)); }
.wash--blue { background: linear-gradient(180deg, var(--wash-blue), rgba(13,153,255,0)); }
.band { background: #fff; border-top: 1px solid var(--ink-08); border-bottom: 1px solid var(--ink-08); }
.band--ink { background: var(--ink); color: #fff; }
.band--ink .muted, .band--ink .lede { color: rgba(255,255,255,.75); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  font: 700 16px/1 var(--font); text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn--primary { background: var(--orange-btn); color: #fff; box-shadow: 0 8px 20px rgba(226, 84, 27, .28); }
.btn--primary:hover { background: #CC4914; }
.btn--primary:disabled { background: #D9D2CE; box-shadow: none; cursor: not-allowed; transform: none; }
.btn--ghost { background: var(--glass); color: var(--ink); border-color: var(--ink-13); backdrop-filter: blur(10px); }
.btn--ghost:hover { background: #fff; }
.btn--green { background: var(--green); color: #fff; }
.btn--blue { background: var(--blue-text); color: #fff; }
.btn--white { background: #fff; color: var(--ink); }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 15px; }
.btn--block { width: 100%; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; color: var(--orange-text); }
.link-arrow::after { content: "→"; transition: transform .15s; }
.link-arrow:hover::after { transform: translateX(3px); }
.link-arrow--green { color: var(--green-text); }
.link-arrow--blue { color: var(--blue-text); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- glass card + icon disc ---------- */
.card {
  background: var(--glass);
  border: 1px solid var(--ink-13);
  border-radius: var(--radius);
  padding: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.card--solid { background: #fff; }
.card--lift { box-shadow: var(--shadow); }
.card--orange { background: #FFF4EE; border-color: rgba(248,105,47,.30); }
.card--green { background: #EEF7F2; border-color: rgba(27,140,94,.22); }
.disc {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.disc svg { width: 24px; height: 24px; }
.disc--sm { width: 36px; height: 36px; } .disc--sm svg { width: 18px; height: 18px; }
.disc--lg { width: 64px; height: 64px; } .disc--lg svg { width: 30px; height: 30px; }
.disc--orange { background: var(--tint-orange); color: var(--orange-text); }
.disc--green { background: var(--tint-green); color: var(--green-text); }
.disc--blue { background: var(--tint-blue); color: var(--blue-text); }
.disc--ink { background: var(--tint-ink); color: var(--ink); }
.disc--purple { background: rgba(151,71,255,.12); color: var(--purple); }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .2px;
  background: var(--orange); color: #fff;
}
.badge--soft { background: var(--tint-orange); color: var(--orange-text); }
.badge--green { background: var(--tint-green); color: var(--green-text); }
.badge--blue { background: var(--tint-blue); color: var(--blue-text); }
.badge--ink { background: var(--tint-ink); color: var(--ink); }

/* heart chip - the app's HeartChip */
.heart-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 9px; border-radius: 999px;
  background: rgba(255,255,255,.8); border: 1px solid var(--ink-13);
  font-weight: 700; font-size: 14px;
}
.heart-chip svg { width: 16px; height: 16px; color: var(--orange); }

/* ---------- grids ---------- */
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.split--rev > :first-child { order: 2; }
.split > *, .grid > *, .plans > * { min-width: 0; }
@media (max-width: 960px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split--rev > :first-child { order: 0; }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .section { padding: 64px 0; }
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
/* Blur lives on a pseudo-element: backdrop-filter on the header itself would make it the
   containing block for the fixed mobile menu panel and collapse it to the header's height. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(249, 249, 249, .82);
  backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
}
.nav-open .site-header::before { background: var(--ground); }
.site-header.is-scrolled { border-bottom-color: var(--ink-08); }
.site-header .wrap { display: flex; align-items: center; gap: 24px; height: 72px; }
.brand img { height: 34px; width: auto; }
.nav { margin-left: auto; }
.nav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.nav a, .nav button.nav-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 13px; border-radius: 12px;
  font: 500 15px/1 var(--font); color: var(--ink); text-decoration: none;
  background: none; border: 0; cursor: pointer;
}
.nav a:hover, .nav button.nav-toggle:hover, .nav a[aria-current="page"] { background: var(--tint-ink); }
.nav a[aria-current="page"] { font-weight: 700; }
.nav .new-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.has-menu { position: relative; }
.nav-toggle::after { content: ""; width: 7px; height: 7px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 2px; }
.menu {
  position: absolute; top: calc(100% + 8px); left: -8px; min-width: 300px;
  list-style: none; margin: 0; padding: 8px;
  background: #fff; border: 1px solid var(--ink-13); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: all .15s ease;
}
.has-menu.open .menu { opacity: 1; visibility: visible; transform: none; }
/* Help, the last dropdown, opens to the left so it never reaches past the window edge. */
@media (min-width: 1081px) { #menu-help { left: auto; right: -8px; min-width: 220px; } }
@media (hover: hover) and (min-width: 1081px) {
  .has-menu:hover .menu, .has-menu:focus-within .menu { opacity: 1; visibility: visible; transform: none; }
}
.menu a { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: 12px; line-height: 1.3; width: 100%; }
.menu a strong { display: block; font-size: 15px; }
.menu a span.sub { display: block; font-size: 13px; color: var(--ink-70); font-weight: 400; margin-top: 3px; }
.menu .disc { width: 36px; height: 36px; } .menu .disc svg { width: 18px; height: 18px; }
.header-cta { margin-left: 8px; }
.nav .mobile-cta { display: none; }
.nav-btn { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ink-13); background: var(--glass); cursor: pointer; align-items: center; justify-content: center; }
.nav-btn span, .nav-btn span::before, .nav-btn span::after { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; transition: transform .2s, background .2s; }
.nav-btn span::before, .nav-btn span::after { content: ""; position: absolute; left: 0; }
.nav-btn span::before { top: -6px; } .nav-btn span::after { top: 6px; }
.nav-open .nav-btn span { background: transparent; }
.nav-open .nav-btn span::before { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-btn span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav-btn { display: inline-flex; }
  .header-cta { display: none; }
  .nav {
    position: fixed; inset: 72px 0 0 0; background: var(--ground);
    padding: 12px var(--gutter) 40px; overflow-y: auto; margin: 0;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .nav-open .nav { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease; }
  .nav-open { overflow: hidden; }
  .nav > ul { flex-direction: column; align-items: stretch; gap: 4px; }
  .nav a, .nav button.nav-toggle { width: 100%; padding: 14px 12px; font-size: 17px; justify-content: space-between; }
  .menu { position: static; box-shadow: none; border: 0; background: transparent; padding: 0 0 6px 8px; opacity: 1; visibility: visible; transform: none; display: none; min-width: 0; }
  .has-menu.open .menu { display: block; }
  .nav .menu a { justify-content: flex-start; align-items: center; gap: 14px; padding: 10px 12px; font-size: 15px; }
  .nav .menu a strong { font-size: 15px; }
  .nav .mobile-cta { display: block; margin-top: 16px; }
  .nav .mobile-cta .btn { justify-content: center; background: var(--orange-btn); color: #fff; }
}

/* ---------- hero ---------- */
.hero { position: relative; padding: 64px 0 88px; overflow: hidden; isolation: isolate; }
.hero .display { margin-bottom: 20px; }
.hero .lede { margin-bottom: 30px; }
.hero-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; padding: 0; list-style: none; }
.hero-pills li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--glass); border: 1px solid var(--ink-13); font-size: 14px; font-weight: 500; }
.hero-pills svg { width: 16px; height: 16px; color: var(--green); }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); z-index: -1; opacity: .55; }
.blob--orange { background: #FFD3BF; }
.blob--green { background: #CBEBDD; }
.blob--blue { background: #CDE9FF; }

/* ---------- phone mockup (app screens drawn in HTML, matched to the app) ---------- */
.phone {
  position: relative; width: 300px; max-width: 100%;
  aspect-ratio: 390 / 820;
  border-radius: 46px; padding: 12px;
  background: #0F1C2A; box-shadow: var(--shadow-lg), inset 0 0 0 2px #2A3A4C;
}
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: var(--ground); font-size: 13px; }
.phone-notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 92px; height: 26px; border-radius: 14px; background: #0F1C2A; z-index: 3; }
.phone-body { position: relative; padding: 52px 16px 16px; height: 100%; }
.phone-wash { position: absolute; inset: 0 0 auto 0; height: 46%; }
.phone .mini-card { position: relative; background: rgba(255,255,255,.8); border: 1px solid var(--ink-13); border-radius: 16px; padding: 12px; }
.phone .mini-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.phone .mini-title { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin: 2px 0 10px; }
.phone-stage { position: relative; display: flex; justify-content: center; }
.float-card {
  position: absolute; background: #fff; border: 1px solid var(--ink-13); border-radius: 16px;
  box-shadow: var(--shadow-lg); padding: 12px 14px; display: flex; align-items: center; gap: 10px;
  font-size: 14px; line-height: 1.25; animation: bob 6s ease-in-out infinite;
}
.float-card strong { display: block; font-size: 15px; }
.float-card .disc { width: 38px; height: 38px; } .float-card .disc svg { width: 19px; height: 19px; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .float-card { animation: none; } html { scroll-behavior: auto; } }
@media (max-width: 620px) { .float-card { display: none; } }

/* ---------- score ring (basket score) ---------- */
.ring {
  --score: 72; --ring: var(--green); --size: 132px; --track: 12px;
  width: var(--size); height: var(--size); border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(var(--ring) calc(var(--score) * 1%), #DCEFE6 0);
  display: grid; place-items: center; position: relative;
}
.ring::before { content: ""; position: absolute; inset: var(--track); border-radius: 50%; background: #fff; }
.ring > div { position: relative; text-align: center; line-height: 1; }
.ring b { display: block; font-size: calc(var(--size) * .32); letter-spacing: -.03em; }
.ring small { display: block; margin-top: 4px; font-size: calc(var(--size) * .1); color: var(--ink-70); }
.bar { height: 7px; border-radius: 4px; background: var(--ink-08); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 4px; background: var(--green); }
.dots { display: flex; gap: 6px; }
.dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--green); }
.dots i.off { background: transparent; border: 2px solid var(--green); }

/* ---------- step list ---------- */
.steps { display: grid; gap: 0; counter-reset: step; }
.step { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--ink-08); }
.step:first-child { border-top: 0; padding-top: 0; }
.step:last-child { padding-bottom: 0; }
.step-k { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; color: var(--ink-55); text-transform: uppercase; }
.step h3 { font-size: 18px; margin: 2px 0 4px; }
.step p { margin: 0; color: var(--ink-70); }

/* ---------- checklist ---------- */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.checks li { position: relative; padding-left: 30px; }
.checks li::before {
  content: ""; position: absolute; left: 2px; top: 6px; width: 14px; height: 8px;
  border-left: 2.4px solid var(--green); border-bottom: 2.4px solid var(--green); transform: rotate(-45deg);
}
.checks--muted li::before { border-color: var(--ink-55); }

/* ---------- points flow: earn → hearts → spend ---------- */
.flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 14px; align-items: stretch; }
.flow-arrow { display: grid; place-items: center; color: var(--ink-55); }
.flow-arrow svg { width: 28px; height: 28px; }
.flow .card { display: flex; flex-direction: column; gap: 14px; }
.flow-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.flow-list li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.flow-list li .disc { width: 34px; height: 34px; } .flow-list li .disc svg { width: 17px; height: 17px; }
.flow-hero { text-align: center; justify-content: center; }
.flow-hero .big { font-size: 56px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
@media (max-width: 960px) {
  .flow { grid-template-columns: 1fr; }
  .flow-arrow svg { transform: rotate(90deg); }
}

/* ---------- earn tiles (mirrors the rewards hub grid) ---------- */
.tile { display: flex; flex-direction: column; gap: 10px; text-decoration: none; transition: transform .15s, box-shadow .15s; height: 100%; }
a.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.tile h3 { font-size: 18px; }
.tile p { margin: 0; color: var(--ink-70); font-size: 15px; }
.tile .pts { margin-top: auto; font-weight: 700; color: var(--orange-text); font-size: 15px; }
.tile-feature { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; }
@media (max-width: 620px) { .tile-feature { grid-template-columns: auto 1fr; } .tile-feature > :last-child { grid-column: 1 / -1; } }

/* ---------- plans ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 28px; }
.plan--featured { border: 2px solid var(--orange); background: #fff; box-shadow: var(--shadow-lg); }
.plan .badge { position: absolute; top: -12px; right: 22px; }
.plan-name { font-size: 22px; font-weight: 700; }
.plan-for { font-size: 14px; color: var(--ink-70); margin-top: 2px; }
.price { display: flex; align-items: baseline; gap: 4px; }
.price b { font-size: 44px; letter-spacing: -.03em; line-height: 1; }
.price span { font-size: 15px; color: var(--ink-70); font-weight: 500; }
.price-note { font-size: 13px; color: var(--ink-55); margin-top: 4px; }
.plan hr { border: 0; border-top: 1px solid var(--ink-08); margin: 0; width: 100%; }
.plan .feat { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.plan .feat li { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.35; }
.plan .feat .disc { flex: 0 0 32px; width: 32px; height: 32px; } .plan .feat .disc svg { width: 16px; height: 16px; }
.plan .btn { margin-top: auto; }
@media (max-width: 960px) { .plans { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }

/* ---------- compare table ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--ink-13); background: #fff; }
table.compare { width: 100%; border-collapse: collapse; min-width: 620px; font-size: 15px; }
.compare th, .compare td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--ink-08); vertical-align: middle; }
.compare thead th { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-70); background: #FBFBFB; }
.compare thead th.hl { color: var(--orange-text); }
.compare td.hl { background: #FFF8F4; font-weight: 700; }
.compare tr:last-child td { border-bottom: 0; }
.compare td:not(:first-child), .compare th:not(:first-child) { text-align: center; }
.yes { color: var(--green-text); font-weight: 700; }
.no { color: var(--ink-55); }

/* ---------- tenure ladder ---------- */
.ladder { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 8px; }
.ladder::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 11px; height: 4px; background: var(--ink-08); border-radius: 2px; }
.ladder::after { content: ""; position: absolute; left: 12.5%; width: calc(75% * var(--fill, 1)); top: 11px; height: 4px; background: var(--green); border-radius: 2px; }
.ladder--3 { grid-template-columns: repeat(3, 1fr); }
.ladder--3::before { left: 16.667%; right: 16.667%; }
.ladder--3::after { left: 16.667%; width: calc(66.667% * var(--fill, 1)); }
.rung { position: relative; z-index: 1; text-align: center; }
.rung i { display: block; width: 26px; height: 26px; margin: 0 auto 10px; border-radius: 50%; background: var(--green); border: 4px solid #fff; box-shadow: 0 0 0 1px var(--ink-13); }
.rung b { display: block; font-size: 20px; letter-spacing: -.02em; }
.rung span { font-size: 13px; color: var(--ink-70); }

/* ---------- price build-up (surgery) ---------- */
.receipt-lines { display: grid; gap: 12px; }
.receipt-lines .row { display: flex; justify-content: space-between; gap: 16px; font-size: 16px; }
.receipt-lines .row.minus b { color: var(--green-text); }
.receipt-lines .row.total { padding-top: 14px; border-top: 1px solid var(--ink-13); align-items: baseline; }
.receipt-lines .row.total b { font-size: 30px; letter-spacing: -.02em; }
.receipt-lines .note { font-size: 13px; color: var(--ink-55); margin-top: -6px; }

/* ---------- faq ---------- */
.faq { display: grid; gap: 10px; max-width: 820px; margin: 0 auto; }
.faq details { background: #fff; border: 1px solid var(--ink-13); border-radius: var(--radius); padding: 0 22px; }
.faq summary { list-style: none; cursor: pointer; padding: 20px 32px 20px 0; position: relative; font-weight: 700; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 400; color: var(--ink-55); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details > div { padding: 0 0 20px; color: var(--ink-80); }
.faq details > div p:last-child { margin-bottom: 0; }

/* ---------- store badges + CTA band ---------- */
.stores { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.stores img { height: 48px; width: auto; }
.cta-band { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: 56px; background: var(--ink); color: #fff; isolation: isolate; }
.cta-band .lede { color: rgba(255,255,255,.78); }
.cta-band .blob { opacity: .35; }
@media (max-width: 620px) { .cta-band { padding: 36px 22px; } }

/* ---------- lead form (home) - ids/JS unchanged from the previous home page ---------- */
.lead-card { background: #fff; border: 1px solid var(--ink-13); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-lg); }
.lead-card h2 { font-size: 26px; margin-bottom: 8px; }
.lead-card .sub { color: var(--ink-70); font-size: 15px; margin-bottom: 18px; }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 14px; font-weight: 700; }
.field input {
  height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--ink-13);
  background: var(--ground); font: 400 16px var(--font); color: var(--ink);
}
.field input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px rgba(248,105,47,.15); background: #fff; }
.lead-msg { padding: 12px 14px; border-radius: 12px; margin-bottom: 14px; font-size: 14px; background: #FDECEC; color: #9B1C1C; }
.lead-turnstile { margin: 4px 0 14px; min-height: 65px; }
.lead-terms { font-size: 12px; color: var(--ink-55); margin: 14px 0 0; line-height: 1.5; }
.lead-done h3 { font-size: 24px; margin-bottom: 8px; }
.price-strike { text-decoration: line-through; color: var(--ink-55); font-weight: 500; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,.82); padding: 72px 0 32px; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.site-footer h4 { color: #fff; font-size: 14px; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 16px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a { color: rgba(255,255,255,.82); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-brand img { height: 34px; width: auto; margin-bottom: 16px; }
.footer-brand p { font-size: 15px; max-width: 320px; }
.social { display: flex; gap: 10px; margin-top: 18px; }
.social a { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; }
.social a:hover { background: rgba(255,255,255,.16); }
.social svg { width: 20px; height: 20px; fill: #fff; }
.footer-base { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 13px; color: rgba(255,255,255,.6); }
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .footer-grid { grid-template-columns: 1fr; } }

.to-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--ink-13); background: #fff; box-shadow: var(--shadow); cursor: pointer;
  display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .2s;
}
.to-top.show { opacity: 1; visibility: visible; }
.to-top svg { width: 18px; height: 18px; }

/* scroll reveal (progressive: content is visible without JS) */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- photo card: the app's glass wash over a photo (rewards / treatment cards) ----------
   photo → 25% domain tint → dark fade at the foot → frosted glass label */
.photo-card { position: relative; overflow: hidden; border-radius: 14px; aspect-ratio: 16 / 10; background: var(--ink); isolation: isolate; }
.photo-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.photo-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--photo-tint, rgba(23,41,61,.25)); mix-blend-mode: multiply; }
.photo-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%); }
.photo-card--blue { --photo-tint: rgba(13,153,255,.22); }
.photo-card--green { --photo-tint: rgba(27,140,94,.22); }
.photo-card--orange { --photo-tint: rgba(248,105,47,.22); }
.photo-glass {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 8px; border-radius: 999px;
  background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.45); color: #fff;
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
}
.photo-glass .disc { width: 26px; height: 26px; background: rgba(255,255,255,.9); }
.photo-glass .disc svg { width: 14px; height: 14px; }
a.tile:hover .photo-card img, .tile:hover .photo-card img { transform: scale(1.04); }
.tile > .photo-card:first-child { margin: -24px -24px 6px; border-radius: var(--radius) var(--radius) 0 0; }

/* ---------- hero composite (Recipe A): photo underneath, the app on top, drawn in code ----------
   Design canvas: https://claude.ai/artifact/TK6XYfw7PZUJCZV4GLZK2A
   photo → domain wash (multiply) → dark foot → app card(s) top-right → glass label bottom-left */
.hero-composite { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-lg); aspect-ratio: 5 / 4; min-height: 420px; background: var(--ink); box-shadow: var(--shadow-lg); }
.hero-composite > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 30% 50%); }
.hero-composite::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--photo-tint, rgba(23,41,61,.2)); mix-blend-mode: multiply; }
.hero-composite::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.42) 100%); }
.hero-composite.photo-card--blue { --photo-tint: rgba(13,153,255,.22); }
.hero-composite.photo-card--green { --photo-tint: rgba(27,140,94,.22); }
.hero-composite.photo-card--orange { --photo-tint: rgba(248,105,47,.18); }
.hc-card { text-align: left; position: absolute; z-index: 2; right: 18px; top: 18px; width: min(300px, 62%); padding: 18px; border-radius: 20px; background: rgba(255,255,255,.95); box-shadow: 0 24px 50px rgba(23,41,61,.25); }
.hc-chip { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; background: rgba(255,255,255,.95); box-shadow: 0 18px 40px rgba(23,41,61,.22); line-height: 1.2; font-size: 13px; color: var(--ink-70); }
.hc-chip b { display: block; font-size: 16px; color: var(--ink); }
.hero-composite .photo-glass { left: 18px; bottom: 18px; font-size: 13px; padding: 8px 14px 8px 8px; }
.hero-composite .photo-glass .disc { width: 30px; height: 30px; } .hero-composite .photo-glass .disc svg { width: 16px; height: 16px; }
.hc-stripes { position: absolute; z-index: 2; right: 18px; bottom: 18px; width: 54px; height: 34px; opacity: .85; }
/* Phones: the photo stays visible on top and the app card sits under it, overlapping its bottom edge.
   !important beats the per-page inline sizing (aspect-ratio, card width) meant for wider screens. */
@media (max-width: 620px) {
  .hero-composite { aspect-ratio: auto !important; min-height: 0 !important; display: flex; flex-direction: column; background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
  .hero-composite > img { position: relative; inset: auto; height: 240px; border-radius: var(--radius-lg); }
  .hero-composite::before, .hero-composite::after { bottom: auto; height: 240px; border-radius: var(--radius-lg); }
  .hero-composite .hc-card { position: relative; inset: auto; width: auto !important; margin: -48px 12px 0; padding: 16px; box-shadow: 0 16px 36px rgba(23,41,61,.16); }
  .hero-composite .photo-glass { top: 12px; left: 12px; bottom: auto; }
  .hc-chip, .hc-stripes { display: none; }
}

/* Lead forms on phones: the card shows its offer and one button; the form opens on tap,
   so the page's message is not pushed below a long form. Desktop is unchanged. */
.lead-open { display: none; }
@media (max-width: 760px) {
  .lead-open { display: flex; }
  .lead-open[aria-expanded="true"] { display: none; }
  .lead-collapse:not(.is-open) { display: none; }
}
.lead-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-70); margin: 4px 0 12px; line-height: 1.45; }
.lead-consent input { margin-top: 2px; width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--orange); }

/* Membership hearts multiplier: three cards on desktop, one compact list on phones. */
.mult-list { display: none; padding: 18px; }
@media (max-width: 760px) { .mult-grid { display: none; } .mult-list { display: block; } }
.mult-row { display: grid; grid-template-columns: 64px 1fr auto 34px; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--ink-08); }
.mult-row:first-of-type { border-top: 0; }
.mult-name { font-size: 14px; font-weight: 700; }
.mult-bar { height: 8px; border-radius: 4px; background: var(--ink-08); overflow: hidden; }
.mult-bar i { display: block; height: 100%; border-radius: 4px; background: var(--orange); }
.mult-hearts { display: flex; gap: 1px; color: var(--orange); }
.mult-row b { font-size: 18px; text-align: right; }
.mult-row--plus .mult-name { color: var(--orange-text); }
.lead-card { scroll-margin-top: 88px; }
.lead-collapse { scroll-margin-top: 88px; }

/* Membership hero: text and photo on the left, the join-bonus card on the right (as on Home).
   Phones: text, photo, then the card, which opens on tap. */
.hero-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; align-self: end; }
.hero-composite--inline { margin-top: 32px; aspect-ratio: 16 / 9; min-height: 300px; }

/* Links inside running text (FAQ answers, support policies, hero ledes). */
.prose a, .faq details a, .section-head .lede a { color: var(--orange-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Legal pages: contents beside the text on desktop (sticky), a collapsible list above it on phones. */
.legal-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 36px; align-items: start; }
.legal-toc { position: sticky; top: 96px; }
.legal-toc details { background: #fff; border: 1px solid var(--ink-13); border-radius: var(--radius); padding: 14px 18px; }
.legal-toc summary { cursor: pointer; font-weight: 700; list-style: none; }
.legal-toc summary::-webkit-details-marker { display: none; }
.legal-toc ol { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14px; }
.legal-toc a { color: var(--ink-80); text-decoration: none; }
.legal-toc a:hover { color: var(--orange-text); }
.legal-body { padding: 36px; }
.legal-body ul, .legal-body ol { padding-left: 20px; }
@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; gap: 18px; }
  .legal-toc { position: static; }
  .legal-body { padding: 24px 20px; }
}

/* FAQ groups: the group title is a caps eyebrow label above its questions. */
.faq-group > h2 { font-size: 13px !important; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--orange-text); margin: 0 0 12px !important; }

/* Heroes with a card beside the headline (pricing, membership): card top-aligned with the headline,
   like rapid physio and surgeon consults. */
@media (min-width: 961px) {
  .hero-top .split { align-items: start; }
  .hero-top .hero-side { align-self: start; }
}
.hero-side .lead-card .flow-list { margin: 0; }

/* Mobile menu over everything, iPhone Safari included. A fixed panel inside a STICKY header can be
   painted under later content (the footer) by Safari, so while the menu is open the header itself is
   fixed (body keeps its 72px so nothing jumps) and the page behind the opaque panel is hidden. */
@media (max-width: 1080px) {
  .nav-open .site-header { position: fixed; left: 0; right: 0; top: 0; z-index: 1000; }
  body.nav-open { padding-top: 72px; }
  .nav-open .nav { z-index: 1000; }
  .nav-open main, .nav-open .site-footer, .nav-open .to-top { visibility: hidden; }
}