/* /stem-cell-therapy-tijuana: the landing page for "stem cell therapy
   tijuana" searches and the ads matched to it. Its own sheet since
   2026-10-10; until then it ran on hub.css + sub.css + learn.css. It now
   loads site.css, the two shared component sheets it still uses
   (video-intro.css, fit-quiz.css) and this file. Everything is scoped to
   body.tj and named tj-*.

   Top to bottom: a white hero that paints finished with no script (the words
   never wait on a class; only the photograph settles), the hospital on navy
   (a three-row table, then the arrival film, then the physicians), what is
   in the room (a photograph beside three drawings that light as they are
   read), who qualifies on the one tinted band, cost (three things feeding one
   written quote, the questions, one day against a week), the patient films,
   the shared fit quiz, the checklist drawn as a sheet, and the closing call.

   Every reveal is off until scripts/stem-cell-therapy-tijuana.js puts tj-js
   on <html>, so with scripts off, reduced motion or print the page is all
   there. */

/* On the root, not :root: this sheet loads on this page alone, and a
   browser without :has() would drop the whole rule, the bar's height and the
   scroll padding with it. */
:root {
  --hc-nav-h: 69px;            /* fallback; the script sets the real header height */
  --hc-bar-h: 52px;
  scroll-padding-top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 12px);
}
.tj {
  --tj-e: cubic-bezier(.16, 1, .3, 1);
  --tj-wrap: 1200px;
  --tj-pad: 32px;
  --tj-ice: #7CA9D1;
  --tj-navy: var(--navy-brand);
  background: #fff; color: var(--ink);
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.tj main { overflow-x: clip; }
.tj main, .tj main *, .tj main *::before, .tj main *::after { box-sizing: border-box; }
/* colors_and_type.css caps every bare <p> at 42rem and underlines every <a>. */
.tj main p { max-width: none; margin: 0; }
.tj main a:not(.btn) { border-bottom: 0; }
.tj main :is(h1, h2, h3) { margin: 0; font-family: var(--font-display); font-weight: 300; letter-spacing: -.01em; color: inherit; text-wrap: pretty; }
.tj main :is(h1, h2, h3) em { font-style: italic; font-weight: inherit; color: var(--accent-blue); }
/* A heading breaks where its halves meet, never mid-phrase. */
.tj main :is(h1, h2) > :is(.h-lead, em) { display: inline-block; }
.tj main ul { list-style: none; margin: 0; padding: 0; }
.tj main figure { margin: 0; }
.tj main svg { display: block; overflow: visible; }
.tj main :is(a, button, summary):focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 4px; }
.tj :is(.tj-hosp, .tj-close) :is(a, button):focus-visible { outline-color: #fff; }
.tj main :is(h1, h2, h3)[tabindex="-1"]:focus { outline: 0; }
.tj-wrap { max-width: var(--tj-wrap); margin: 0 auto; padding: 0 var(--tj-pad); }

/* ---------- buttons: the site's own, plus a press and a moving arrow ---------- */
.tj main .btn { min-height: 52px; border-radius: 6px; }
.tj main .btn:active { transform: translateY(1px) !important; box-shadow: none; transition-duration: 120ms; }
.tj main .btn--primary:active { background: #143D63; border-color: #143D63; }
.tj main .btn--ghost:hover { background: var(--accent-wash); }
.tj main .btn--ghost:active { background: #DCE7F2; }
.tj main .btn--ice { background: #fff; border-color: #fff; color: var(--ink); }
.tj main .btn--ice:hover { background: var(--accent-wash); border-color: var(--accent-wash); box-shadow: 0 18px 44px rgba(0, 0, 0, .3); }
.tj main .btn--ice:active { background: #DCE7F2; }
.tj-arr { display: inline-block; transition: transform .35s var(--tj-e); }
.tj main :is(.btn, .tj-roster__link):hover .tj-arr { transform: translateX(5px); }
/* links inside a sentence */
.tj main :is(p, figcaption) a:not(.btn) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--tj-ice); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: color .2s, text-decoration-color .2s; }
.tj main :is(p, figcaption) a:not(.btn):hover { color: var(--accent-blue); text-decoration-color: var(--accent-blue); }
.tj main :is(p, figcaption) a:not(.btn):active { color: var(--accent-blue-hover); }

/* ---------- hero ----------
   White, the nav in flow above it (site.css holds the nav's room, so nothing
   moves when header.js mounts it). The words are simply there. The only
   first-paint motion is the photograph settling inside its frame and its
   caption rising, both transform-only, so nothing is ever hidden. */
.tj-hero { padding: clamp(36px, 5.6vw, 80px) 0 clamp(52px, 6.4vw, 92px); }
.tj-hero__in { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.tj-hero h1 { font-size: clamp(2.25rem, 4.45vw, 4rem); line-height: 1.1; letter-spacing: -.02em; }
.tj main .tj-hero__lede { margin-top: clamp(20px, 2.2vw, 28px); font-size: clamp(1.0625rem, 1.25vw, 1.125rem); line-height: 1.65; color: var(--ink-soft); }
.tj-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: clamp(24px, 2.6vw, 34px); }
/* the photograph keeps the crop it has always had: 1.264 to 1, focus a third down */
.tj-hero__fig { position: relative; overflow: hidden; aspect-ratio: 1.264; border-radius: 14px; background: var(--accent-wash); }
.tj-hero__fig img[width][height] { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; animation: tjSettle 1.8s var(--tj-e) both; }
.tj-hero__fig figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 44px 20px 16px; background: linear-gradient(to top, rgba(7, 16, 34, .82), rgba(7, 16, 34, 0)); color: #fff; font-size: .875rem; line-height: 1.45; animation: tjCap 1.1s var(--tj-e) .25s both; }
@keyframes tjSettle { from { transform: scale(1.075); } to { transform: none; } }
@keyframes tjCap { from { transform: translateY(12px); } to { transform: none; } }

/* ---------- the bar that follows the reader ---------- */
.tj .hc-bar { position: fixed; left: 0; right: 0; top: var(--hc-nav-h); z-index: 49; height: var(--hc-bar-h); background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); transform: translateY(-10px); opacity: 0; visibility: hidden; transition: opacity 200ms, transform 300ms var(--tj-e), visibility 0s 300ms; }
.tj .hc-bar.is-on { transform: none; opacity: 1; visibility: visible; transition: opacity 260ms, transform 360ms var(--tj-e); }
body.tj.nav-open .hc-bar { opacity: 0; visibility: hidden; }
.tj .hc-bar__track { display: flex; align-items: stretch; gap: 30px; height: 100%; max-width: var(--tj-wrap); margin: 0 auto; padding: 0 var(--tj-pad); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: 28px; }
.tj .hc-bar__track::-webkit-scrollbar { display: none; }
.tj .hc-bar__track a { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; border-bottom: 0; color: var(--ink-muted); font-size: .875rem; font-weight: 500; white-space: nowrap; text-decoration: none; transition: color .25s; }
.tj .hc-bar__track a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--tj-e); }
.tj .hc-bar__track a:hover, .tj .hc-bar__track a[aria-current] { color: var(--ink); }
.tj .hc-bar__track a:hover::after { transform: scaleX(.35); }
.tj .hc-bar__track a[aria-current]::after { transform: scaleX(1); }
.tj .hc-bar__track a:active { color: var(--accent-blue); }
.tj .hc-bar__track a:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -4px; border-radius: 4px; }
.tj .hc-bar__progress { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--tj-ice); transform-origin: left; transform: scaleX(var(--hc-p, 0)); }

/* ---------- sections ---------- */
.tj-sec { padding: clamp(72px, 9vw, 128px) 0; }
.tj-sec h2 { font-size: clamp(2rem, 4.1vw, 3.375rem); line-height: 1.08; }
.tj main .tj-lede { margin-top: 18px; font-size: 1.1875rem; line-height: 1.6; color: var(--ink-muted); }
/* the shared quiz lands with its card, not its padding, under the bar */
.tj .qz { scroll-margin-top: -64px; }

/* a line that asks, and the call beside it */
.tj-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(26px, 3vw, 36px); border-top: 1px solid var(--border); }
.tj main .tj-ask__text { font-family: var(--font-display); font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.2; color: var(--ink); }
.tj-ask--dark { border-top-color: rgba(255, 255, 255, .18); }
.tj main .tj-ask--dark .tj-ask__text { color: #fff; }

/* drawings: one pen */
.tj-ln { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tj-soft { stroke: rgba(11, 29, 58, .34); }
.tj-draw { fill: none; stroke: var(--accent-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.tj-fill { fill: rgba(124, 169, 209, .42); }
.tj-dot { fill: var(--accent-blue); }

/* ---------- the hospital, on navy ---------- */
.tj-hosp { background: var(--tj-navy); color: #fff; }
.tj-hosp h2 { color: #fff; }
.tj main .tj-hosp h2 em { color: var(--tj-ice); }
.tj main .tj-hosp .tj-lede { color: rgba(255, 255, 255, .84); }

/* three things that might be needed, and where each one is */
.tj-cmp { margin-top: clamp(36px, 5vw, 56px); }
.tj-cmp > [role="row"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); }
.tj-cmp [role="columnheader"] { padding: 14px 22px; font-size: .9375rem; font-weight: 600; line-height: 1.4; color: rgba(255, 255, 255, .74); }
.tj-cmp [role="columnheader"]:first-child { padding-left: 0; }
.tj-cmp [role="columnheader"].is-us { color: #fff; }
.tj-cmp__row > * { padding: 22px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: 1.0625rem; line-height: 1.5; }
.tj-cmp__row > .tj-cmp__need { padding-left: 0; font-family: var(--font-display); font-size: clamp(1.25rem, 1.9vw, 1.5rem); line-height: 1.25; color: #fff; }
.tj-cmp .is-them { color: rgba(255, 255, 255, .74); }
.tj-cmp .is-us { background: rgba(124, 169, 209, .16); }
.tj-cmp__row .is-us { display: flex; align-items: flex-start; gap: 12px; color: #fff; font-weight: 500; border-top-color: rgba(255, 255, 255, .22); }
.tj-cmp__head .is-us { border-radius: 12px 12px 0 0; }
.tj-cmp__row:last-child .is-us { border-radius: 0 0 12px 12px; }
.tj-tick { flex: none; width: 22px; height: 22px; margin-top: 2px; }
.tj-tick path { fill: none; stroke: var(--tj-ice); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .45s var(--tj-e) .55s; }

/* the arrival film: one frame, 16 to 9, the poster under it if the film fails */
.tj-film { margin-top: clamp(40px, 5vw, 64px); overflow: hidden; aspect-ratio: 16 / 9; border-radius: 14px; background: #0B1D3A url('../images/patient-experience-poster.webp') center / cover no-repeat; }
.tj-film video { display: block; width: 100%; height: 100%; object-fit: cover; }

.tj-roster { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px 32px; align-items: center; margin-top: clamp(44px, 5.4vw, 72px); }
.tj main .tj-roster__label { font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 400; line-height: 1.2; color: #fff; }
.tj-roster__grid { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 24px; }
.tj-roster__item { display: flex; align-items: center; gap: 16px; }
.tj-roster__ph { flex: none; display: block; width: 64px; height: 64px; overflow: hidden; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.tj-roster__avatar[width][height] { width: 100%; height: 100%; object-fit: cover; }
.tj-roster__name { font-size: 1.0625rem; font-weight: 500; line-height: 1.35; color: #fff; }
.tj-roster__role { font-size: .9375rem; line-height: 1.4; color: rgba(255, 255, 255, .74); }
.tj main .tj-roster__link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #fff; font-size: .9375rem; font-weight: 500; text-decoration: underline; text-decoration-color: var(--tj-ice); text-decoration-thickness: 1.5px; text-underline-offset: 5px; transition: text-decoration-color .2s; }
.tj main .tj-roster__link:hover { color: #fff; text-decoration-color: #fff; }
.tj main .tj-roster__link:active { color: var(--tj-ice); }

/* ---------- what is in the room ---------- */
.tj-treat__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 88px); align-items: start; margin-top: clamp(40px, 5vw, 64px); }
.tj-treat__ph { position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 28px); overflow: hidden; border-radius: 14px; background: var(--accent-wash); }
.tj-treat__ph img[width][height] { width: 100%; height: auto; }
.tj-kit__item { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: clamp(20px, 3vw, 36px); align-items: start; padding: clamp(24px, 3vw, 36px) 0; border-top: 1px solid var(--border); }
.tj-kit__item:last-child { border-bottom: 1px solid var(--border); }
.tj-kit__fig { width: 120px; height: auto; aspect-ratio: 120 / 96; transition: opacity .5s var(--tj-e); }
.tj-kit h3 { font-size: clamp(1.5rem, 2.2vw, 1.875rem); font-weight: 400; line-height: 1.18; }
.tj main .tj-kit p { margin-top: 10px; color: var(--ink-muted); }
.tj-mark { fill: var(--accent-blue); }
.tj-ring { fill: none; stroke: var(--accent-blue); stroke-width: 1.5; opacity: .5; transform-box: fill-box; transform-origin: center; }
.tj-win { fill: rgba(124, 169, 209, .3); stroke: var(--ink); stroke-width: 1.6; }
.tj-in { stroke-width: 1.4; }
.tj-table { transform: translateX(-12px); }
/* The drawing beside the lines being read stands forward; the others wait.
   Only with the script, and only where a row can be told from its neighbours. */
.tj-js .tj-kit.is-led .tj-kit__item:not(.is-lit) .tj-kit__fig { opacity: .42; }
.tj-kit__item.is-live.is-lit .tj-ring { animation: tjPing 2.4s ease-out infinite; }
.tj-kit__item.is-live.is-lit .tj-table { animation: tjTable 4.2s var(--tj-e) infinite; }
.tj-kit__item.is-live.is-lit .tj-win { animation: tjWin 3.6s ease-in-out infinite; }
.tj-kit__item .tj-win:nth-of-type(2) { animation-delay: .5s; }
.tj-kit__item .tj-win:nth-of-type(3) { animation-delay: 1s; }
@keyframes tjPing { 0% { transform: scale(.5); opacity: .9; } 80%, 100% { transform: scale(1.9); opacity: 0; } }
@keyframes tjTable { 0%, 12% { transform: translateX(26px); } 55%, 100% { transform: translateX(-12px); } }
@keyframes tjWin { 0%, 100% { fill: rgba(124, 169, 209, .12); } 30%, 60% { fill: rgba(124, 169, 209, .6); } }

/* ---------- who qualifies: the one tinted band ---------- */
.tj-cand { background: var(--accent-wash); }
.tj-cand__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); align-items: center; margin-top: clamp(40px, 5vw, 64px); }
.tj-cand__ph { overflow: hidden; border-radius: 14px; background: #fff; }
.tj-cand__ph img[width][height] { width: 100%; height: auto; }
.tj main .tj-cand__say { font-family: var(--font-display); font-size: clamp(1.5rem, 2.5vw, 2.125rem); line-height: 1.3; color: var(--ink); }
.tj main .tj-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr; gap: 0 24px; margin-top: clamp(36px, 5vw, 60px); }
.tj-tier { display: grid; grid-template-rows: subgrid; grid-row: span 4; padding: clamp(22px, 2.6vw, 32px); border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.tj-tier--no { border: 1.5px dashed rgba(11, 29, 58, .34); background: transparent; }
.tj-tier__mark { width: 48px; height: 48px; fill: none; stroke: var(--accent-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tj-tier__mark path { stroke-width: 2.6; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .5s var(--tj-e) calc(.45s + var(--d, 0) * .14s); }
.tj-tier__mark path + path { transition-delay: calc(.7s + var(--d, 0) * .14s); }
.tj-tier--no .tj-tier__mark { stroke: var(--ink-soft); }
.tj main .tj-tier__lbl { margin-top: 18px; font-size: .9375rem; font-weight: 600; line-height: 1.4; color: var(--accent-blue); }
.tj main .tj-tier--no .tj-tier__lbl { color: var(--ink-soft); }
.tj-tier h3 { align-self: start; margin-top: 4px; font-size: clamp(1.375rem, 2vw, 1.625rem); font-weight: 400; line-height: 1.2; }
.tj main .tj-tier__text { margin-top: 10px; font-size: 1rem; line-height: 1.62; color: var(--ink-muted); }
.tj-tiers > :nth-child(2) { --d: 1; } .tj-tiers > :nth-child(3) { --d: 2; }
@supports not (grid-template-rows: subgrid) {
  .tj-tier { display: block; }
}

/* ---------- cost ---------- */
.tj-cost__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 88px); align-items: start; margin-top: clamp(40px, 5vw, 64px); }
.tj-quote h3 { font-size: clamp(1.75rem, 2.7vw, 2.25rem); font-weight: 400; line-height: 1.15; }
.tj main .tj-quote__text { margin-top: 12px; color: var(--ink-muted); }
.tj-quote__fig { width: 100%; max-width: 400px; height: auto; aspect-ratio: 320 / 168; margin-top: 28px; }
.tj-paper { fill: #fff; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.tj-q-line { stroke: rgba(11, 29, 58, .34); stroke-width: 1.5; transition: stroke-dashoffset .9s var(--tj-e) calc(.5s + var(--k, 0) * .18s); }
.tj-q-row { stroke: rgba(11, 29, 58, .34); stroke-width: 2; transition: stroke-dashoffset .5s var(--tj-e) calc(1.3s + var(--k, 0) * .18s); }
.tj-q-total { stroke: var(--accent-blue); stroke-width: 3.6; transition: stroke-dashoffset .6s var(--tj-e) 2s; }
.tj-q-in { transition: opacity .5s var(--tj-e) calc(.15s + var(--k, 0) * .18s), transform .5s var(--tj-e) calc(.15s + var(--k, 0) * .18s); }
.tj-quote__fig :is(.tj-q-in, .tj-q-line):nth-of-type(2) { --k: 1; }
.tj-quote__fig :is(.tj-q-in, .tj-q-line):nth-of-type(3) { --k: 2; }
/* the sheet's rows are its fifth and sixth paths: nth-of-type counts by tag */
.tj-q-sheet .tj-q-row:nth-of-type(5) { --k: 1; }
.tj-q-sheet .tj-q-row:nth-of-type(6) { --k: 2; }
/* what feeds the quote, on its way: only while the drawing can be seen */
.tj-q-go { fill: var(--accent-blue); opacity: 0; offset-rotate: 0deg; offset-path: path('M52 32c56 0 60 52 118 52'); }
.tj-q-go--2 { offset-path: path('M52 86h118'); }
.tj-q-go--3 { offset-path: path('M52 140c56 0 60-52 118-52'); }
@supports (offset-path: path('M0 0h1')) {
  .tj-quote.is-live.is-in .tj-q-go { animation: tjFlow 3.4s cubic-bezier(.4, 0, .6, 1) 2.2s infinite; }
  .tj-quote.is-live.is-in .tj-q-go--2 { animation-delay: 2.7s; }
  .tj-quote.is-live.is-in .tj-q-go--3 { animation-delay: 3.2s; }
}
@keyframes tjFlow { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 40% { opacity: 1; } 50%, 100% { offset-distance: 100%; opacity: 0; } }
.tj-quote__act { margin-top: 26px; }
.tj main .tj-quote__act p { margin-bottom: 14px; font-size: 1rem; color: var(--ink-muted); }

.tj-faq details { border-top: 1px solid var(--border); }
.tj-faq details:last-child { border-bottom: 1px solid var(--border); }
.tj-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; padding: 16px 0; list-style: none; cursor: pointer; font-family: var(--font-display); font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.3; color: var(--ink); transition: color .2s; }
.tj-faq summary::-webkit-details-marker { display: none; }
.tj-faq summary:hover { color: var(--accent-blue); }
.tj-faq summary:active { color: var(--accent-blue-hover); }
.tj-faq__ic { position: relative; flex: none; width: 32px; height: 32px; border: 1px solid var(--border-strong); border-radius: 50%; transition: border-color .25s, transform .45s var(--tj-e); }
.tj-faq__ic::before, .tj-faq__ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: currentColor; transition: transform .45s var(--tj-e); }
.tj-faq__ic::after { transform: rotate(90deg); }
.tj-faq summary:hover .tj-faq__ic { border-color: var(--accent-blue); }
.tj-faq details[open] .tj-faq__ic { transform: rotate(180deg); }
.tj-faq details[open] .tj-faq__ic::after { transform: rotate(0deg); }
.tj-faq__a { padding: 0 52px 24px 0; font-size: 1.0625rem; line-height: 1.7; color: var(--ink-muted); }

/* one day against a week */
.tj-vs { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 24px; align-items: stretch; margin-top: clamp(48px, 6vw, 84px); }
.tj-vs__col { padding: clamp(24px, 3.2vw, 40px); border-radius: 14px; }
.tj-vs__col--us { border: 1px solid var(--border); background: #fff; box-shadow: 0 18px 44px rgba(11, 29, 58, .09); }
.tj-vs__col--them { border: 1.5px dashed rgba(11, 29, 58, .34); }
.tj main .tj-vs__who { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; color: var(--accent-blue); }
.tj main .tj-vs__col--them .tj-vs__who { color: var(--ink-soft); }
.tj-vs__col h3 { margin-top: 4px; font-size: clamp(1.5rem, 2.3vw, 2rem); font-weight: 400; line-height: 1.18; }
.tj main .tj-vs__list { margin-top: 20px; }
.tj-vs__list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 14px 0; border-top: 1px solid rgba(11, 29, 58, .12); transition: opacity .6s var(--tj-e), transform .6s var(--tj-e); transition-delay: calc(.2s + var(--k, 0) * .08s); }
.tj-vs__list li:nth-child(2) { --k: 1; } .tj-vs__list li:nth-child(3) { --k: 2; } .tj-vs__list li:nth-child(4) { --k: 3; }
.tj-vs__list li:nth-child(5) { --k: 4; } .tj-vs__list li:nth-child(6) { --k: 5; } .tj-vs__list li:nth-child(7) { --k: 6; }
.tj-vs__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.tj-vs__col--us .tj-vs__ico { background: var(--accent-wash); }
.tj-vs__col--us .tj-vs__ico svg { width: 22px; height: 22px; fill: var(--accent-blue); }
.tj-vs__col--them .tj-vs__ico svg { width: 40px; height: 40px; fill: none; stroke: var(--ink-soft); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tj-vs__col--them .tj-vs__ico svg .f { fill: rgba(11, 29, 58, .3); stroke: none; }
.tj main .tj-vs__f { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; color: var(--ink); }
.tj main .tj-vs__d { margin-top: 2px; font-size: 1rem; line-height: 1.6; color: var(--ink-muted); }
/* each extra is crossed off the list, one after another */
.tj main .tj-vs__col--them .tj-vs__f { color: var(--ink-soft); }
.tj-vs__col--them .tj-vs__f span { background: linear-gradient(currentColor, currentColor) no-repeat 0 56% / 100% 1.5px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .55s var(--tj-e) calc(.6s + var(--k, 0) * .16s); }
.tj main .tj-vs__close { margin-top: clamp(28px, 3.4vw, 44px); font-family: var(--font-display); font-size: clamp(1.4375rem, 2.2vw, 1.875rem); line-height: 1.3; color: var(--ink); }
.tj-cost__end { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px clamp(32px, 5vw, 72px); align-items: center; margin-top: clamp(28px, 3.4vw, 44px); padding-top: clamp(26px, 3vw, 36px); border-top: 1px solid var(--border); }
.tj main .tj-cost__end p { color: var(--ink-muted); }

/* ---------- the patient films ----------
   The players are the shared ones (styles/video-intro.css, scripts/video-intro.js).
   Only their trim is set here: no gold, the site's own white and navy. */
.tj-vids { padding-top: 0; }
.tj-vids > .tj-wrap::before, .tj-check > .tj-wrap::before { content: ""; display: block; height: 1px; margin-bottom: clamp(72px, 9vw, 128px); background: var(--border); }
.tj-vids__grid { display: grid; grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 26px 24px; align-items: start; margin-top: clamp(40px, 5vw, 64px); }
.tj-vids__feature { grid-row: 1 / span 2; }
.tj .video-intro { max-width: none; border-radius: 14px; box-shadow: 0 1px 2px rgba(11, 29, 58, .08), 0 18px 44px rgba(11, 29, 58, .14); background: #0B1D3A; }
.tj .video-intro__play { background: #fff; box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .55); }
.tj .video-intro__play svg { fill: var(--ink); }
.tj .video-intro__trigger:is(:hover, :focus-visible) .video-intro__play { box-shadow: 0 16px 38px -8px rgba(0, 0, 0, .6); }
.tj .video-intro__trigger:active .video-intro__play { transform: translate(-50%, -50%) scale(.96); }
.tj .video-intro__trigger:focus-visible { outline: 3px solid var(--accent-blue); outline-offset: 3px; border-radius: 14px; }
.tj .video-intro__sound:focus-visible { outline: 2px solid #fff; }
.tj-vids__item .video-intro__play { width: 48px; }
.tj-vids__cap { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 1rem; font-weight: 500; line-height: 1.4; color: var(--ink); }
.tj-vids__len { flex: none; font-size: .875rem; font-weight: 400; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.tj main .tj-vids__more { margin-top: clamp(28px, 3.4vw, 40px); color: var(--ink-muted); }

/* ---------- the checklist, as the sheets it is ---------- */
.tj-check { padding-top: 0; }
.tj-check__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(40px, 6vw, 96px); align-items: center; margin-top: clamp(40px, 5vw, 64px); isolation: isolate; }
.tj-sheet { position: relative; padding: clamp(26px, 3.4vw, 44px) clamp(22px, 3.4vw, 44px) clamp(14px, 2vw, 24px); border: 1px solid var(--border); border-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgba(11, 29, 58, .06), 0 24px 60px rgba(11, 29, 58, .1); }
/* the pages under the first one */
.tj-sheet::before, .tj-sheet::after { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid var(--border); border-radius: 6px; background: #fff; transition: transform .6s var(--tj-e); }
.tj-sheet::before { transform: translate(7px, 7px) rotate(.7deg); }
.tj-sheet::after { transform: translate(14px, 14px) rotate(1.5deg); z-index: -2; }
.tj-check__grid:has(.btn:is(:hover, :focus-visible)) .tj-sheet::before { transform: translate(11px, 9px) rotate(1.3deg); }
.tj-check__grid:has(.btn:is(:hover, :focus-visible)) .tj-sheet::after { transform: translate(22px, 18px) rotate(2.8deg); }
.tj-sheet__logo { display: block; width: max-content; overflow: hidden; }
.tj-sheet__mark { height: 48px; width: auto; }
.tj main .tj-sheet__title { margin-top: 22px; font-size: clamp(1.625rem, 2.6vw, 2.25rem); line-height: 1.12; }
.tj main .tj-sheet__rows { margin-top: clamp(18px, 2.4vw, 28px); }
.tj-sheet__rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto 1.6em; align-items: center; column-gap: 18px; min-height: 56px; padding: 10px 0; border-top: 1px solid var(--border); }
.tj-sheet__name { font-size: 1.0625rem; font-weight: 500; line-height: 1.3; color: var(--ink); }
.tj-sheet__boxes { display: flex; gap: 7px; }
.tj-sheet__boxes i { display: block; width: 19px; height: 19px; border: 1.5px solid var(--ink-soft); border-radius: 5px; background: #fff; }
.tj-sheet__n { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; text-align: right; color: var(--accent-blue); font-variant-numeric: lining-nums; }
.tj main .tj-check__fine { margin-top: 16px; font-size: 1rem; line-height: 1.6; color: var(--ink-muted); }
.tj-check__fine a { display: inline-block; padding: 11px 0; margin: -11px 0; font-weight: 500; }

/* ---------- the closing call ---------- */
.tj .tj-close { padding: clamp(88px, 11vw, 152px) 0; background: var(--navy-mid); }
.tj .tj-close .ctaband__pattern { inset: -15%; background: url('../assets/bg-pattern-1.svg') center / 1000px no-repeat; }
.tj .tj-close .ctaband__inner { max-width: 54rem; }
.tj main .tj-close h2 { margin: 0; font-size: clamp(2.2rem, 4.6vw, 3.75rem); line-height: 1.06; color: #fff; }
.tj main .tj-close h2 em { color: var(--tj-ice); }
.tj main .tj-close .ctaband__inner > p { max-width: 40rem; margin: 22px 0 36px; font-size: 1.0625rem; line-height: 1.7; color: rgba(255, 255, 255, .84); }
.tj .tj-close .ctaband__disclaimer { max-width: 44rem; margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: .8125rem; line-height: 1.6; letter-spacing: 0; color: rgba(255, 255, 255, .72); }

/* ---------- entrances: one per part, and only once the script confirms ----------
   The table is read out a row at a time and each tick is drawn as its row
   lands; the film comes up to size; the room's photograph un-zooms in its
   frame and each drawing is drawn; the verdicts arrive in order and are
   marked; the quote is assembled from its three parts; the extras are
   crossed off; the films come up together; the sheet lands and its 28 boxes
   are counted. Everything else rises once. */
.tj-js .tj [data-r] { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--tj-e), transform .8s var(--tj-e); }
.tj-js .tj [data-r="row"] { transform: translateX(-26px); }
.tj-js .tj [data-r="film"] { transform: scale(.955); transform-origin: 50% 100%; transition-duration: 1.1s; }
.tj-js .tj [data-r="photo"] { transform: none; }
.tj-js .tj [data-r="kit"] { transform: translateY(16px); }
.tj-js .tj [data-r="tier"] { transform: translateY(30px); transition-delay: calc(var(--d, 0) * 120ms); }
.tj-js .tj [data-r="quote"] { transform: none; }
.tj-js .tj [data-r="us"] { transform: translateY(26px); }
.tj-js .tj [data-r="them"] { transform: translateX(26px); transition-delay: .12s; }
.tj-js .tj [data-r="sheet"] { transform: translateY(30px) rotate(1.4deg); transform-origin: 20% 100%; }
.tj-js .tj [data-r="roster"] { transform: none; }
.tj-js .tj [data-r].is-in { opacity: 1; transform: none; }

.tj-js .tj [data-r="row"]:not(.is-in) .tj-tick path { stroke-dashoffset: 1; }
[data-r="photo"] img { transition: transform 1.5s var(--tj-e); }
.tj-js .tj [data-r="photo"]:not(.is-in) img { transform: scale(1.09); }
.tj-js .tj [data-r]:not(.is-in) .tj-draw { stroke-dashoffset: 1; }
.tj-kit .tj-draw { transition: stroke-dashoffset .9s var(--tj-e) .3s; }
.tj-kit :is(.tj-mark, .tj-ring, .tj-win, .tj-in) { transition: opacity .5s var(--tj-e) .9s; }
.tj-js .tj-kit__item:not(.is-in) :is(.tj-mark, .tj-ring, .tj-win, .tj-in) { opacity: 0; }
.tj-js .tj-tier:not(.is-in) .tj-tier__mark path { stroke-dashoffset: 1; }
.tj-js .tj-quote:not(.is-in) .tj-q-in { opacity: 0; transform: translateX(-10px); }
.tj-js .tj-quote:not(.is-in) > :is(h3, p, .tj-quote__act) { opacity: 0; }
.tj-quote > :is(h3, p, .tj-quote__act) { transition: opacity .8s var(--tj-e); }
.tj-js .tj-vs__col--us:not(.is-in) li { opacity: 0; transform: translateY(12px); }
.tj-js .tj-vs__col--them:not(.is-in) .tj-vs__f span { background-size: 0 1.5px; }
.tj-roster__item { transition: opacity .6s var(--tj-e), transform .6s var(--tj-e); transition-delay: calc(.1s + var(--d, 0) * .12s); }
.tj-roster__grid > :nth-child(2) { --d: 1; } .tj-roster__grid > :nth-child(3) { --d: 2; }
.tj-js .tj-roster:not(.is-in) .tj-roster__item { opacity: 0; transform: translateY(14px); }
.tj-js .tj-sheet:not(.is-in) .tj-sheet__boxes i, .tj-js .tj-sheet:not(.is-in) .tj-sheet__n { opacity: 0; }
.tj-js .tj-sheet.is-in .tj-sheet__boxes i { animation: tjBox .42s var(--tj-e) backwards; animation-delay: calc(.4s + var(--n, 0) * 36ms); }
.tj-js .tj-sheet.is-in .tj-sheet__n { animation: tjCount .5s var(--tj-e) backwards; animation-delay: calc(.62s + var(--row, 0) * 210ms); }
@keyframes tjBox { from { opacity: 0; transform: scale(.4); } 60% { transform: scale(1.14); } to { opacity: 1; transform: none; } }
@keyframes tjCount { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

/* ---------- widths ---------- */
@media (max-width: 1080px) {
  .tj-kit__item { grid-template-columns: 96px minmax(0, 1fr); }
  .tj-kit__fig { width: 96px; }
  .tj-vids__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tj-vids__feature { grid-column: 1 / -1; grid-row: auto; }
  .tj main .tj-tiers { gap: 0 16px; }
}
@media (max-width: 900px) {
  .tj-hero__in { grid-template-columns: 1fr; gap: 36px; }
  .tj-treat__grid, .tj-cand__top, .tj-cost__grid, .tj-vs, .tj-check__grid { grid-template-columns: 1fr; }
  .tj-treat__grid { gap: 12px; }
  .tj-treat__ph { position: static; }
  .tj-cand__top { gap: 26px; }
  .tj-cost__grid { gap: 44px; }
  .tj-check__grid { gap: 44px; }
  /* a verdict: its mark on the left, its words beside it */
  .tj main .tj-tiers { grid-template-columns: 1fr; grid-template-rows: none; gap: 14px; }
  .tj-tier { display: grid; grid-row: auto; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: none; column-gap: 18px; }
  .tj-tier__mark { grid-row: 1 / span 3; }
  .tj-tier > :not(.tj-tier__mark) { grid-column: 2; }
  .tj main .tj-tier__lbl { margin-top: 0; }
  .tj-roster__grid { grid-template-columns: 1fr; gap: 16px; }
  .tj-js .tj [data-r="them"] { transform: translateY(26px); }
  .tj .hc-bar__track { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); }
}
@media (max-width: 760px) {
  /* the table on a phone: what might be needed across the top of each row,
     the two answers side by side under it, the two names once above them */
  .tj-cmp > [role="row"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tj-cmp [role="columnheader"]:first-child, .tj-cmp__need { grid-column: 1 / -1; }
  .tj-cmp [role="columnheader"] { padding: 12px 14px; }
  .tj-cmp [role="columnheader"]:first-child { padding: 0 0 10px; }
  .tj-cmp [role="columnheader"]:nth-child(2) { padding-left: 0; }
  .tj-cmp__row > * { padding: 16px 14px; font-size: 1rem; }
  .tj-cmp__row > .tj-cmp__need { padding: 22px 0 12px; font-size: 1.375rem; }
  .tj-cmp__row > .is-them { padding-left: 0; border-top: 0; }
  .tj-cmp__row > .is-us { border-top: 0; flex-direction: column; gap: 6px; }
  .tj-cmp__row .is-us { border-radius: 0; }
  .tj-cmp__row:last-child .is-us { border-radius: 0 0 12px 12px; }
  .tj-js .tj [data-r="row"] { transform: translateY(18px); }
}
@media (max-width: 620px) {
  .tj { --tj-pad: 20px; }
  .tj-sec { padding: 56px 0; }
  .tj-vids, .tj-check { padding-top: 0; }
  .tj-vids > .tj-wrap::before, .tj-check > .tj-wrap::before { margin-bottom: 56px; }
  :root { --hc-bar-h: 48px; }
  .tj .hc-bar__track { gap: 22px; }
  .tj-hero { padding-top: 28px; }
  .tj-hero h1 { font-size: clamp(2.125rem, 10.3vw, 2.5rem); }
  /* the same crop the photograph has always had on a phone */
  .tj-hero__fig { aspect-ratio: 1.167; }
  .tj-hero__actions { gap: 14px; }
  .tj-ask { flex-direction: column; align-items: stretch; margin-top: 32px; padding-top: 24px; }
  .tj-vs { margin-top: 40px; }
  .tj-vs__list li { padding: 12px 0; }
  .tj-ask .btn, .tj-quote__act .btn, .tj-cost__act .btn, .tj-check__act .btn, .tj-close .btn { width: 100%; }
  .tj-close .ctaband__inner > div:not(.ctaband__disclaimer) { align-self: stretch; }
  .tj-roster { grid-template-columns: 1fr; }
  .tj-roster__grid { grid-row: auto; }
  .tj-kit__item { grid-template-columns: 76px minmax(0, 1fr); column-gap: 16px; }
  .tj-kit__fig { width: 76px; align-self: center; }
  .tj-kit__text { display: contents; }
  .tj-kit h3 { align-self: center; }
  .tj main .tj-kit p { grid-column: 1 / -1; margin-top: 14px; }
  .tj-cost__end { grid-template-columns: 1fr; }
  .tj-vs__col--them .tj-vs__ico svg { width: 36px; height: 36px; }
  .tj-vids__grid { gap: 22px 14px; }
  .tj-vids__item .tj-vids__cap { flex-direction: column; gap: 2px; font-size: .9375rem; }
  /* two lines held for every name, so the lengths under them sit level */
  .tj-vids__item .tj-vids__who { min-height: 2.8em; }
  .tj-vids__item .video-intro__play { width: 44px; }
  .tj-sheet__rows li { grid-template-columns: minmax(0, 1fr) 1.4em; column-gap: 12px; row-gap: 8px; padding: 14px 0; }
  .tj-sheet__name { grid-column: 1; grid-row: 1; }
  .tj-sheet__boxes { grid-column: 1; grid-row: 2; }
  .tj-sheet__n { grid-column: 2; grid-row: 1 / span 2; }
  .tj-sheet::after { transform: translate(10px, 12px) rotate(1.2deg); }
  .tj-faq__a { padding-right: 0; }
}

/* ---------- reduced motion: the finished page, at once ---------- */
@media (prefers-reduced-motion: reduce) {
  .tj main *, .tj main *::before, .tj main *::after { animation: none !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .tj .hc-bar { transition: none !important; }
}

/* ---------- print: the finished page, dark on white ---------- */
@media print {
  .tj main *, .tj main *::before, .tj main *::after { animation: none !important; transition: none !important; }
  .tj main [data-r], .tj main [data-r] * { opacity: 1 !important; transform: none !important; }
  .tj main :is(.tj-draw, .tj-tick path, .tj-tier__mark path) { stroke-dashoffset: 0 !important; }
  .tj main .tj-vs__col--them .tj-vs__f span { background-size: 100% 1.5px !important; }
  .tj main .tj-q-go { opacity: 0 !important; }
  .tj .hc-bar, .tj :is(.tj-film, .ctaband__pattern, .tj-faq__ic, .video-intro__scrim, .video-intro__play) { display: none !important; }
  .tj :is(.tj-hosp, .tj-close, .tj-cand) { background: #fff !important; color: var(--ink) !important; }
  .tj :is(.tj-hosp, .tj-close) :is(h2, h3, p, em, div, a) { color: var(--ink) !important; }
  /* the caption is white on its own gradient: keep the gradient on paper */
  .tj .tj-hero__fig figcaption { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tj .tj-cmp .is-us { background: #fff !important; }
  .tj .tj-cmp__row > * { border-top-color: var(--border) !important; }
  .tj .tj-tick path { stroke: var(--ink) !important; }
  .tj main .btn { border-color: var(--ink) !important; background: #fff !important; color: var(--ink) !important; box-shadow: none !important; }
  .tj .tj-sec, .tj .tj-hero, .tj .tj-close { padding: 24px 0; }
  .tj-vids > .tj-wrap::before, .tj-check > .tj-wrap::before { display: none; }
  .tj .tj-treat__ph { position: static; }
  .tj :is(.tj-hero__fig, .tj-treat__ph, .tj-cand__ph) { max-width: 320px; }
  .tj :is(.tj-sheet, .tj-vs__col--us, .video-intro) { box-shadow: none; }
  .tj :is(.tj-kit__item, .tj-tier, .tj-sheet, .tj-vs__col, .tj-cmp__row, .tj-vids__grid > figure, details) { break-inside: avoid; }
}

/* The headline keeps its line breaks while the display face loads: a local
   Times, scaled to the display face's width, stands in for it (the hip page's
   fix). Nothing is downloaded; with no local Times the stack carries on. */
@font-face { font-family: 'tj-times'; font-weight: 100 900; font-style: normal; src: local('Times New Roman'), local('TimesNewRomanPSMT'); size-adjust: 77%; }
@font-face { font-family: 'tj-times'; font-weight: 100 900; font-style: italic; src: local('Times New Roman Italic'), local('TimesNewRomanPS-ItalicMT'); size-adjust: 77%; }
@media (min-width: 600px) and (max-width: 960px) { .tj main .tj-hero h1 { font-family: 'Cormorant Garamond', 'tj-times', 'Times New Roman', Georgia, serif; } }