/* OrthoMarketing: layouts and page components, assembled from tokens.css. */

/* ---------- Review tools (outside the product) ---------- */
.om { display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); height: 100%; }
.tools { display: flex; align-items: center; gap: var(--s-2); min-height: 46px; padding: 6px var(--s-3); background: #11161F; color: #E8ECF2; font-size: var(--fs-xs); overflow: hidden; }
.tools > * { flex: none; }
.tools .t-spacer { flex: 1; }
@media (max-width: 1400px) { .t-note { display: none; } }
@media (max-width: 1280px) { .t-route { display: none; } }
@media (max-width: 1120px) { .t-brand { display: none; } }
.t-brand { display: flex; align-items: baseline; gap: var(--s-2); white-space: nowrap; margin-right: var(--s-1); }
.t-brand b { font-size: var(--fs-xs); }
.t-brand span { color: #8D99AB; font-family: var(--font-mono); font-size: 11px; }
.t-select, .t-btn { height: 32px; border-radius: var(--r-sm); border: 1px solid #2A3342; background: #1B2330; color: #E8ECF2; font-size: var(--fs-xs); padding: 0 var(--s-3); }
.t-select { max-width: 240px; min-width: 0; }
.t-btn:hover { background: #242E3E; }
.t-route { font-family: var(--font-mono); font-size: 11px; color: #8D99AB; border: 1px solid #2A3342; border-radius: var(--r-xs); padding: 3px 7px; white-space: nowrap; }
.t-spacer { flex: 1; }
.t-seg { display: inline-flex; padding: 2px; border-radius: var(--r-sm); background: #1B2330; }
.t-seg button { height: 28px; padding: 0 10px; border-radius: 6px; color: #8D99AB; font-size: 12px; }
.t-seg button[aria-pressed="true"] { background: #E8ECF2; color: #11161F; }
.t-note { font-size: 11px; color: #8D99AB; white-space: nowrap; }
@media (max-width: 900px) { .t-hide-md { display: none !important; } }
@media (max-width: 760px) { .t-hide-narrow { display: none !important; } .t-select { flex: 1; max-width: none; } .tools { gap: 6px; } }

/* ---------- Device frame and scroller ---------- */
/* Row 2 by name: the tools bar is hidden outside development, and an unplaced workspace would then
   fall into its zero-height row and blank the whole site. */
.workspace { grid-row: 2; display: flex; min-height: 0; }
.stage { flex: 1; min-width: 0; overflow: auto; display: flex; justify-content: center; align-items: flex-start; background: #E6EAF0; }
.device { container-type: inline-size; container-name: dev; position: relative; overflow: hidden; width: 100%; height: 100%; flex: none; background: var(--bg); }
.device[data-vp="desktop"] { width: 1440px; height: calc(100% - 32px); margin: 16px; border-radius: var(--r-md); box-shadow: var(--sh-2); }
.device[data-vp="laptop"] { width: 1180px; height: calc(100% - 32px); margin: 16px; border-radius: var(--r-md); box-shadow: var(--sh-2); }
.device[data-vp="tablet"] { width: 834px; height: calc(100% - 32px); margin: 16px; border-radius: 24px; box-shadow: var(--sh-2); }
.device[data-vp="mobile"] { width: 390px; height: min(844px, calc(100% - 32px)); margin: 16px; border-radius: 40px; box-shadow: 0 0 0 10px #11161F, var(--sh-3); }
.scroller { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scroll-behavior: smooth; }
#overlay { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
#overlay > * { pointer-events: auto; }

/* ---------- Layout primitives ---------- */
.wrap { max-width: var(--w-content); margin-inline: auto; padding-inline: var(--s-7); }
.wrap-wide { max-width: var(--w-wide); margin-inline: auto; padding-inline: var(--s-7); }
.only-mob { display: none !important; }

/* Logo lockup (inline SVG recreation of the supplied mark) */
.logo { display: inline-flex; align-items: center; border-radius: var(--r-xs); }
.logo svg { display: block; height: 30px; width: auto; }
.logo-sm svg { height: 26px; }

/* ---------- Public navigation (translucent) ---------- */
.nav { position: sticky; top: 0; z-index: 20; height: var(--head-h); background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-bottom: 1px solid rgba(223, 229, 236, 0.7); }
.nav-in { height: 100%; display: flex; align-items: center; gap: var(--s-6); }
.nav-links { display: flex; align-items: center; gap: var(--s-1); margin-left: auto; }
.nav-link { min-height: var(--h-sm); padding: 0 var(--s-3); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-2); transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.nav-link:hover { color: var(--text); background: var(--bg-3); }
.nav-plan { display: inline-flex; align-items: center; gap: 6px; }
.count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--accent); color: #fff; font-size: 11px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

/* Focused header inside the flow */
.fhead { position: sticky; top: 0; z-index: 20; height: 60px; background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-bottom: 1px solid rgba(223, 229, 236, 0.8); }
.fhead-in { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-4); }
.fhead-end { justify-self: end; display: flex; align-items: center; gap: var(--s-2); }
.fhead-back { justify-self: start; display: flex; align-items: center; gap: var(--s-2); }

/* Progress: done = filled check, current = ring with dot and bold label, future = numbered outline */
.progress-m { display: flex; flex-direction: column; align-items: center; justify-self: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap; }
.progress-m .segs { display: flex; gap: 4px; }
.progress-m .segs span { width: 20px; height: 4px; border-radius: 2px; background: var(--border-strong); }
.progress-m .segs span.on { background: var(--success); }
.progress-m .segs span.cur { background: var(--accent); width: 32px; }
.pdot { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: var(--fw-semibold); color: var(--text-3); background: var(--surface); }

/* ---------- Landing ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-9); align-items: center; padding-block: var(--s-10) var(--s-9); }
.hero-sub { margin-top: var(--s-5); font-size: 19px; line-height: 1.45; color: var(--text-2); max-width: 32ch; }
/* The two hero buttons split one row evenly: same width, same height, side by side at every size.
   A label that doesn't fit wraps inside its button rather than stacking the buttons. */
.hero-ctas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-7); max-width: 580px; }
.hero-ctas .btn { width: 100%; min-width: 0; padding: var(--s-2) var(--s-5); white-space: normal; text-wrap: balance; line-height: 1.25; text-align: center; }
/* Hero carousel: examples on a ring, the front one sharp, the rest blurred behind. */
.hero { overflow-x: clip; }  /* the carousel's ring may run into the page margin, never past the screen */
.hero-visual { position: relative; min-width: 0; }
.hc { display: grid; gap: var(--s-2); }
.hc-stage { position: relative; border-radius: var(--r-xl); outline: none; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.hc-stage.is-dragging { cursor: grabbing; }
.hc-stage:focus-visible { box-shadow: var(--focus-ring); }
/* The ring's box hugs the front card: a sizer the card's size sets its height, with room above
   and a strip below where the card's shadow fades out, so the title and controls sit close under
   the card. --hc-w is the card's width, a share of the ring's. */
.hc-track { --hc-w: 75%; --hc-top: 14px; --hc-bot: 24px; position: relative; margin-inline: -10%; perspective: 1200px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, #000 calc(100% - var(--hc-bot)), transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, #000 calc(100% - var(--hc-bot)), transparent); mask-composite: intersect; }
.hc-track::before { content: ""; display: block; width: var(--hc-w); aspect-ratio: 16 / 10; margin: var(--hc-top) auto var(--hc-bot); }
.hc-slide { position: absolute; left: 50%; top: var(--hc-top); margin-top: calc(var(--hc-w) * 5 / 16); width: var(--hc-w); aspect-ratio: 16 / 10; transform-origin: 50% 50%; will-change: transform, filter, opacity; backface-visibility: hidden; }
.hc-card { width: 100%; height: 100%; border-radius: var(--r-xl); overflow: hidden; background: var(--surface); box-shadow: var(--sh-2); transition: box-shadow var(--t-slow) var(--ease); }
.hc-slide.is-current .hc-card { box-shadow: 0 2px 8px rgba(14, 26, 43, 0.08), 0 16px 30px rgba(14, 26, 43, 0.2); }
/* Video examples: the poster and a play button on the example in front. The button covers the
   card, so a tap anywhere on it plays; the round mark sits in the middle of every card. Sizes
   follow the card's width. */
.hc-video { position: relative; background: #0E1A2B; container-type: inline-size; }
.hc-poster { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
/* A video with no poster yet shows its illustration; the carousel waits for the catalog as a
   placeholder the size of a slide. */
.hc-art { display: block; width: 100%; height: 100%; }
.hc-art > .art { width: 100%; height: 100%; }
.hc-skel { width: 75%; aspect-ratio: 16 / 10; margin: 14px auto 24px; border-radius: var(--r-xl); }
.hc-play { position: absolute; inset: 0; display: block; border-radius: inherit; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hc-play:focus-visible { outline: none; }
.hc-play-dot { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: clamp(38px, 10.5cqw, 48px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.94); color: var(--accent); box-shadow: 0 10px 28px rgba(14, 26, 43, 0.3); transition: transform var(--t-fast) var(--ease); }
.hc-play:hover .hc-play-dot { transform: scale(1.06); }
.hc-play:focus-visible .hc-play-dot { box-shadow: var(--focus-ring), 0 10px 28px rgba(14, 26, 43, 0.3); }
.hc-play-dot .i { width: 42%; height: 42%; margin-left: 8%; }
.hc-play[hidden] { display: none; }
.hc-video.is-playing { background: #000; }
.hc-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
/* The social clip on a phone, over a blurred wash of its own colors. The phone is 88% of the
   card's height at a phone's 9:19.5, which makes it 25.4% of the card's width. Pressed, the player
   opens out of the phone's screen to the whole card, where the clip plays in its own 16:9 shape. */
/* The social example: its poster, with the sites its clips run on across the bottom. */
.hc-socials { position: absolute; left: 50%; bottom: 7%; translate: -50% 0; display: flex; gap: clamp(6px, 2cqw, 12px); pointer-events: none; }
.hc-social { display: grid; place-items: center; width: clamp(26px, 7.5cqw, 42px); aspect-ratio: 1; border-radius: 28%; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.hc-social svg { width: 72%; height: 72%; }
.hc-phone { position: absolute; top: 6%; bottom: 6%; left: 50%; translate: -50% 0; aspect-ratio: 9 / 19.5; padding: 1.1cqw; border-radius: 4.3cqw; background: linear-gradient(150deg, #34425A, #0B1220 42%); box-shadow: inset 0 0 0 0.25cqw rgba(255, 255, 255, 0.16), 0 1cqw 2cqw rgba(0, 0, 0, 0.3), 0 4cqw 9cqw rgba(0, 0, 0, 0.45); pointer-events: none; }
.hc-phone::before, .hc-phone::after { content: ""; position: absolute; width: 0.6cqw; border-radius: 0.3cqw; background: #26324A; }
.hc-phone::before { left: -0.45cqw; top: 19%; height: 13%; }   /* volume */
.hc-phone::after { right: -0.45cqw; top: 25%; height: 16%; }   /* power */
.hc-phone-scr { position: relative; width: 100%; height: 100%; border-radius: 3.2cqw; overflow: hidden; background: #000; }
.hc-phone-scr::after { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 36%); }
.hc-phone-img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.hc-island { position: absolute; top: 2.3cqw; left: 50%; translate: -50% 0; width: 7.6cqw; height: 2.2cqw; border-radius: 999px; background: #000; }
.hc-video.is-phone .hc-play-dot { width: clamp(34px, 9cqw, 44px); }
.hc-video.from-phone iframe { animation: hc-open 520ms var(--ease) both; }
@keyframes hc-open { from { clip-path: inset(6% 37.3% round 4.3cqw); } to { clip-path: inset(0 round 0); } }
@media (prefers-reduced-motion: reduce) { .hc-video.from-phone iframe { animation: none; } }
.hc-foot { display: grid; justify-items: center; gap: var(--s-2); text-align: center; }
.hc-cap { min-height: 21px; font-size: 15px; font-weight: var(--fw-semibold); line-height: 1.4; color: var(--text); text-wrap: balance; }
.hc-nav { display: flex; align-items: center; gap: var(--s-2); }
.hc-nav .btn-icon.btn-sm { width: 32px; min-height: 32px; }
.hc-nav .btn-icon .i { width: 15px; height: 15px; }
.hc-dots { display: flex; }
.hc-dot { width: 22px; height: 24px; display: grid; place-items: center; border-radius: var(--r-pill); }
.hc-dot::before { content: ""; width: 7px; height: 7px; border-radius: 4px; background: var(--n-300); transition: width var(--t-base) var(--ease), background-color var(--t-base) var(--ease); }
.hc-dot:hover::before { background: var(--n-400); }
.hc-dot[aria-current="true"]::before { width: 18px; background: var(--accent); }
.sec { padding-block: var(--s-9); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); }
.sec-head p { color: var(--text-2); margin-top: var(--s-1); }
.rail-wrap { position: relative; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 27%, 300px); gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 8px; }
.rail::-webkit-scrollbar { display: none; }
.rail-card { position: relative; scroll-snap-align: start; display: flex; flex-direction: column; text-align: left; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); overflow: hidden; transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease); }
.rail-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--border-strong); }
/* The whole tile opens its category; a video tile's picture plays its video instead. */
.rail-hit { position: absolute; inset: 0; z-index: 1; border-radius: inherit; cursor: pointer; }
.rail-hit:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--accent); }
.rail-poster { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.rail-play { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 4 / 3; z-index: 2; display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rail-play-dot { width: 46px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.94); color: var(--accent); box-shadow: 0 10px 28px rgba(14, 26, 43, 0.3); transition: transform var(--t-fast) var(--ease); }
.rail-play:hover .rail-play-dot { transform: scale(1.06); }
.rail-play:focus-visible { outline: none; }
.rail-play:focus-visible .rail-play-dot { box-shadow: var(--focus-ring), 0 10px 28px rgba(14, 26, 43, 0.3); }
.rail-play-dot .i { width: 40%; height: 40%; margin-left: 8%; }
.rail-art { aspect-ratio: 4 / 3; background: var(--bg-2); border-bottom: 1px solid var(--border); }
.rail-body { display: grid; gap: 2px; padding: var(--s-4); }
.rail-body b { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-card); }
.rail-body small { color: var(--text-2); font-size: var(--fs-xs); }
.rail-go { display: inline-flex; align-items: center; gap: 2px; margin-top: var(--s-2); color: var(--accent); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.rail-go .i { width: 14px; height: 14px; stroke-width: 2.4; }
.rail-arrows { display: flex; gap: var(--s-2); }
/* A tile's video, playing over the page. */
#om-watch { position: absolute; inset: 0; z-index: 60; }
#om-watch:empty { display: none; }
.watch { width: min(960px, calc(100% - 48px)); background: #0B1220; color: #fff; }
.watch-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-5); }
.watch-head h2 { font-size: var(--fs-card); font-weight: var(--fw-semibold); }
.watch-head .btn-icon { color: #fff; }
.watch-head .btn-icon:hover { background: rgba(255, 255, 255, 0.12); }
.watch-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.watch-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* ---------- Getting started: the steps, lived through ----------
   Wide screens: the steps on the left, each about half a screen tall, and beside them a stage that
   stays in view and plays the scene of the step crossing the middle. A track down the step numbers
   fills to that step. Phones: each step plays its own scene under its text. Every animated piece
   rests in its final state; a scene that hasn't played yet holds them hidden. */
.journey { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--s-9); align-items: start; }
.j-steps { position: relative; display: grid; }
.j-steps::before, .j-steps::after { content: ""; position: absolute; left: 21px; top: 26vh; width: 2px; border-radius: 1px; }
.j-steps::before { bottom: 26vh; background: var(--border); }
.j-steps::after { height: calc((100% - 52vh) * var(--p, 0) / 3); background: var(--accent); transition: height 600ms var(--ease); }
.j-step { position: relative; min-height: 52vh; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--s-5); align-content: center; opacity: 0.38; transition: opacity var(--t-slow) var(--ease); }
.j-step.is-active, .j-step.is-done { opacity: 1; }
.j-step.is-done:not(.is-active) .j-text { opacity: 0.55; }
.j-n { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--border); color: var(--text-2); font-weight: var(--fw-bold); transition: background-color var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease), color var(--t-slow) var(--ease), transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease); }
.j-step.is-done .j-n { border-color: var(--accent); color: var(--accent); }
.j-step.is-active .j-n { background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(1.08); box-shadow: 0 0 0 6px var(--accent-tint); }
.j-step.is-cap .j-n, .j-step.is-cap.is-active .j-n { padding: 5px; background: var(--surface); }
.j-n .inj-logo { width: 100%; height: 100%; }
.j-text { transition: opacity var(--t-slow) var(--ease); }
.j-text b { display: block; font-size: var(--fs-h2); line-height: 1.25; letter-spacing: -0.01em; }
.j-text p { color: var(--text-2); margin-top: var(--s-2); max-width: 42ch; }
.j-step.is-cap .j-text b { color: var(--accent); }
.j-stage { position: sticky; top: calc(60px + 9vh); height: min(470px, 66vh); }
.j-stage .j-scene { position: absolute; inset: 0; opacity: 0; translate: 0 16px; scale: 0.98; transition: opacity 500ms var(--ease), translate 500ms var(--ease), scale 500ms var(--ease); pointer-events: none; }
.j-stage .j-scene.is-on { opacity: 1; translate: none; scale: 1; }
.j-scene-m { display: none; }
.j-win { position: relative; height: 100%; border-radius: var(--r-xl); background: var(--bg-2); border: 1px solid var(--border); overflow: hidden; padding: var(--s-6); display: grid; align-content: center; gap: var(--s-4); }
.j-scene:not(.is-on) .j-a { opacity: 0; }
.j-scene.is-on .j-a { animation: j-rise 520ms var(--ease) both; animation-delay: calc(var(--d, 0ms) + var(--i, 0) * var(--step, 110ms)); }
@keyframes j-rise { from { opacity: 0; translate: 0 14px; } }
/* 1. Choosing: the categories arrive, one is picked, its services rise, and one is added. */
.j-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.j-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-2); }
.j-chip.is-pick { background: var(--n-900); border-color: var(--n-900); color: #fff; }
.j-scene.is-on .j-chip.is-pick { animation: j-rise 520ms var(--ease) both, j-pick 360ms var(--ease) both; animation-delay: 0ms, 800ms; }
@keyframes j-pick { from { background: var(--surface); border-color: var(--border); color: var(--text-2); } }
.j-pkgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); align-items: stretch; --d: 700ms; --step: 160ms; }
.j-pkg { display: grid; align-content: start; gap: 4px; padding: var(--s-4); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-1); }
.j-pkg.is-featured { border: 2px solid var(--accent); box-shadow: var(--sh-2); }
.j-pkg-badge { justify-self: start; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; margin-bottom: 4px; border-radius: var(--r-pill); background: var(--accent); color: #fff; font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.05em; text-transform: uppercase; }
.j-pkg-badge.is-blank { visibility: hidden; }
.j-pkg-badge .i { width: 11px; height: 11px; }
.j-pkg-badge { white-space: nowrap; max-width: 100%; }
.j-pkg b { font-size: var(--fs-sm); }
.j-pkg-price { font-size: 24px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.j-pkg.is-featured .j-pkg-price { color: var(--accent); }
.j-pkg-save { color: var(--success-ink); font-size: var(--fs-cap); font-weight: var(--fw-semibold); }
.j-pkg-n { color: var(--text-3); font-size: var(--fs-cap); }
.j-pkg:not(.is-featured) .j-add { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); }
.j-items li small s { color: var(--text-3); margin-right: 4px; }
.j-saved { display: inline-flex; align-items: center; gap: 6px; color: var(--success-ink); font-weight: var(--fw-semibold); }
.j-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); --d: 700ms; --step: 140ms; }
.j-card { border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); overflow: hidden; box-shadow: var(--sh-2); }
.j-card-art { aspect-ratio: 16 / 10; background: var(--bg-3); overflow: hidden; }
.j-card-art > img, .j-card-art > .art { display: block; width: 100%; height: 100%; object-fit: cover; }
.j-card-body { padding: var(--s-3); display: grid; gap: 2px; }
.j-card-body b { font-size: var(--fs-sm); line-height: 1.3; }
.j-card-body small { font-size: var(--fs-cap); color: var(--text-2); }
.j-add { position: relative; justify-self: start; margin-top: var(--s-2); display: inline-grid; padding: 6px 12px; border-radius: var(--r-pill); background: var(--accent); color: #fff; font-size: var(--fs-cap); font-weight: var(--fw-semibold); }
.j-add > span:not(.j-cursor), .j-add:not(.is-added) { display: inline-flex; align-items: center; gap: 4px; }
.j-add > span:not(.j-cursor) { grid-area: 1 / 1; }
.j-add .i { width: 13px; height: 13px; }
.j-add.is-added { background: var(--accent-tint); color: var(--accent); }
.j-add-a { opacity: 0; }
.j-scene.is-on .j-add.is-added { animation: j-was-add 1900ms step-end both; }
.j-scene.is-on .j-add-a { animation: j-show-then-hide 1900ms step-end both; }
.j-scene.is-on .j-add-b { animation: j-hide-then-show 1900ms step-end both; }
@keyframes j-was-add { from { background: var(--accent); color: #fff; } }
@keyframes j-show-then-hide { from { opacity: 1; } to { opacity: 0; } }
@keyframes j-hide-then-show { from { opacity: 0; } to { opacity: 1; } }
/* The finger that taps Add: it comes in from below right, taps, and leaves. */
.j-cursor { position: absolute; left: 60%; top: 55%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: rgba(14, 26, 43, 0.22); border: 2px solid #fff; box-shadow: 0 4px 12px rgba(14, 26, 43, 0.3); opacity: 0; pointer-events: none; }
.j-scene.is-on .j-cursor { animation: j-tap 2800ms var(--ease) both; }
@keyframes j-tap { 0%, 36% { opacity: 0; translate: 90px 70px; scale: 1; } 46% { opacity: 1; } 62% { translate: 0 0; scale: 1; } 68% { scale: 0.72; } 75% { scale: 1; } 88% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 0; } }
/* 2. Building: services land in the plan one by one and the count follows. */
.j-plan-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px solid var(--border); }
.j-plan-head b { font-size: var(--fs-cap); letter-spacing: 0.08em; text-transform: uppercase; }
.j-count { display: inline-grid; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: var(--fs-cap); font-weight: var(--fw-bold); place-items: center; }
.j-count i { grid-area: 1 / 1; font-style: normal; opacity: 0; }
.j-count i:last-child { opacity: 1; }
.j-scene.is-on .j-count i:nth-child(1) { animation: j-c1 2600ms linear both; }
.j-scene.is-on .j-count i:nth-child(2) { animation: j-c2 2600ms linear both; }
.j-scene.is-on .j-count i:nth-child(3) { animation: j-c3 2600ms linear both; }
@keyframes j-c1 { 0%, 19% { opacity: 0; } 19.5%, 42% { opacity: 1; } 42.5%, 100% { opacity: 0; } }
@keyframes j-c2 { 0%, 42% { opacity: 0; } 42.5%, 65% { opacity: 1; } 65.5%, 100% { opacity: 0; } }
@keyframes j-c3 { 0%, 65% { opacity: 0; } 65.5%, 100% { opacity: 1; } }
.j-items { display: grid; gap: var(--s-2); --d: 500ms; --step: 600ms; }
.j-items li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-1); }
.j-items li span { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); min-width: 0; }
.j-items li .i { color: var(--accent); flex: none; }
.j-items li small { font-size: var(--fs-cap); color: var(--text-2); white-space: nowrap; }
.j-plan-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; padding-top: var(--s-2); font-size: var(--fs-xs); color: var(--text-2); --d: 500ms; --step: 600ms; }
.j-plan-foot > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.j-kept { display: inline-flex; gap: 6px; }
.j-kept b { padding: 4px 10px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); font-size: var(--fs-cap); font-weight: var(--fw-semibold); color: var(--text); }
/* 3. Booking: a day is picked, then a time, and the day is held. */
.j-cal-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.j-cal-head b { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); }
.j-cal-head small { font-size: var(--fs-cap); color: var(--text-2); }
.j-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; text-align: center; }
.j-dow { font-size: 11px; font-weight: var(--fw-semibold); color: var(--text-3); }
.j-day { height: 34px; display: grid; place-items: center; border-radius: 10px; border: 1px solid transparent; font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.j-day.is-open { background: var(--surface); border-color: var(--border); color: var(--text); font-weight: var(--fw-semibold); }
.j-day.is-pick { background: var(--accent); border-color: var(--accent); color: #fff; }
.j-scene.is-on .j-day.is-pick { animation: j-pickday 520ms var(--ease) 600ms both; }
@keyframes j-pickday { from { background: var(--surface); border-color: var(--border); color: var(--text); } 55% { scale: 1.14; } }
.j-times { display: flex; flex-wrap: wrap; gap: var(--s-2); --d: 1100ms; }
.j-time { padding: 8px 14px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.j-time.is-pick { background: var(--n-900); border-color: var(--n-900); color: #fff; }
.j-scene.is-on .j-time.is-pick { animation: j-rise 520ms var(--ease) both, j-picktime 320ms var(--ease) both; animation-delay: calc(1100ms + var(--i) * 110ms), 1900ms; }
@keyframes j-picktime { from { background: var(--surface); border-color: var(--border); color: var(--text); } }
.j-booked { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--r-pill); background: var(--accent-tint); color: var(--accent); font-size: var(--fs-xs); font-weight: var(--fw-semibold); --d: 2400ms; }
/* 4. The Injured Connect profile goes live and patients and athletes connect to it. */
.j-inj { display: block; padding: 0; background: radial-gradient(90% 80% at 50% 52%, var(--accent-tint), var(--bg-2) 72%); }
.j-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.j-lines line { stroke: var(--accent); stroke-width: 0.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 0.45; }
.j-scene:not(.is-on) .j-lines line { stroke-dashoffset: 1; }
.j-scene.is-on .j-lines line { animation: j-draw 700ms var(--ease) both; animation-delay: calc(500ms + var(--i) * 120ms); }
@keyframes j-draw { from { stroke-dashoffset: 1; } }
.j-node { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); color: var(--accent); box-shadow: var(--sh-2); --d: 800ms; --step: 120ms; }
.j-scene.is-on .j-node { animation: j-rise 520ms var(--ease) both, j-pulse 2400ms ease-in-out infinite; animation-delay: calc(800ms + var(--i) * 120ms), calc(1800ms + var(--i) * 280ms); }
@keyframes j-pulse { 0%, 100% { box-shadow: var(--sh-2), 0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent); } 50% { box-shadow: var(--sh-2), 0 0 0 9px color-mix(in srgb, var(--accent) 0%, transparent); } }
.j-profile { position: absolute; inset: 0; margin: auto; width: fit-content; height: fit-content; max-width: 72%; display: grid; justify-items: center; gap: 4px; padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(14, 26, 43, 0.08), 0 18px 40px rgba(14, 26, 43, 0.16); text-align: center; --d: 150ms; }
.j-profile .inj-logo { width: 44px; height: 44px; }
.j-profile b { font-size: var(--fs-sm); }
.j-profile small { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-cap); color: var(--accent); font-weight: var(--fw-semibold); }
.j-profile small .i { width: 13px; height: 13px; }
@media (prefers-reduced-motion: reduce) {
  .j-scene *, .j-scene .j-a { animation: none !important; }
  .j-scene:not(.is-on) .j-a { opacity: 1; }
  .j-scene:not(.is-on) .j-lines line { stroke-dashoffset: 0; }
  .j-stage .j-scene, .j-step, .j-n, .j-text, .j-steps::after { transition: none; }
}
.cta-band { text-align: center; padding-block: var(--s-10) var(--s-11); display: grid; justify-items: center; gap: var(--s-5); }
.cta-band p { color: var(--text-2); max-width: 44ch; }
.foot { border-top: 1px solid var(--border); padding-block: var(--s-6); display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); font-size: var(--fs-cap); color: var(--text-3); }

/* ---------- Illustrations (art.js) scale with their box through container units ---------- */
.art { position: relative; width: 100%; height: 100%; container-type: inline-size; overflow: hidden; text-align: left; }

/* ---------- Builder ---------- */
.b-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-7) var(--s-6); }
.b-head p { color: var(--text-2); margin-top: var(--s-1); }
.b-grid { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: var(--s-7); align-items: start; padding-bottom: var(--s-10); }
.cnav { position: sticky; top: calc(60px + var(--s-6)); display: grid; gap: 2px; }
.cnav .eyebrow { padding: 0 var(--s-3) var(--s-2); }
.cnav-item { position: relative; display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 48px; padding: 0 var(--s-3); border-radius: var(--r-md); text-align: left; font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--text-2); transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.cnav-item:hover { background: var(--bg-2); color: var(--text); }
.cnav-ico { width: 32px; height: 32px; border-radius: 9px; background: var(--bg-3); color: var(--text-2); display: flex; align-items: center; justify-content: center; flex: none; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.cnav-ico .i { width: 17px; height: 17px; }
.cnav-item .n { margin-left: auto; font-size: var(--fs-cap); color: var(--text-3); font-variant-numeric: tabular-nums; }
.cnav-item[aria-current="true"] { background: var(--accent-tint); color: var(--text); font-weight: var(--fw-semibold); }
.cnav-item[aria-current="true"]::before { content: ""; position: absolute; left: -10px; top: 12px; bottom: 12px; width: 3px; border-radius: 2px; background: var(--accent); }
.cnav-item[aria-current="true"] .cnav-ico { background: var(--accent); color: #fff; }
/* The step bar on tablets and phones, where the category list sits beside the services on a wide
   screen: back and next, the category in view (its name opens the list of all of them) with its
   place among them, and a thin line of progress. */
.cstep { display: none; }
.cstep-mid { display: flex; align-items: center; justify-content: center; gap: var(--s-2); min-width: 0; }
.cstep-mid .fmenu { min-width: 0; }
.cstep-btn { display: inline-flex; align-items: center; gap: var(--s-2); max-width: 100%; min-height: 40px; padding: 0 var(--s-3); border-radius: var(--r-pill); color: var(--text); transition: background-color var(--t-fast) var(--ease); }
.cstep-btn:hover, .fmenu.is-open .cstep-btn { background: var(--bg-2); }
.cstep-btn b { font-size: var(--fs-card); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cstep-btn .i { flex: none; }
.cstep-n { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cstep .fmenu-pop { left: 50%; right: auto; translate: -50% 0; min-width: 260px; }
.cstep-added { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--accent-tint); color: var(--accent); font-size: var(--fs-cap); font-weight: var(--fw-semibold); }
.cstep-added .i { width: 12px; height: 12px; }
.cstep-bar { grid-column: 1 / -1; display: flex; gap: 4px; margin-top: var(--s-2); }
.cstep-bar i { flex: 1; height: 3px; border-radius: 2px; background: var(--border); transition: background-color var(--t-base) var(--ease); }
.cstep-bar i.seg-past { background: var(--success); }   /* categories passed: green, same size; only the colour changes */
.cstep-bar i.seg-now { background: var(--accent); }
/* Back and next through the categories, one at a time, under each category's services. */
.cat-steps { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--border); }
.cat-steps .btn { min-width: 0; }
.cat-steps .btn span { overflow: hidden; text-overflow: ellipsis; }
.cat-steps-n { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cat-talk { margin-top: var(--s-5); font-size: var(--fs-xs); color: var(--text-2); text-align: center; }
/* The plan in the header, top right: the count and total, and the whole plan on hover or a tap. */
.hplan { position: relative; }
.hplan-btn { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 4px 12px 4px 5px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); color: var(--text); text-align: left; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.hplan-btn:hover, .hplan.is-open .hplan-btn { border-color: var(--border-strong); box-shadow: var(--sh-1); }
.hplan-ico { position: relative; width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); }
.hplan-ico .i { width: 17px; height: 17px; }
.hplan-n { position: absolute; top: -4px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 11px; font-weight: var(--fw-bold); box-shadow: 0 0 0 2px var(--surface); }
.hplan-txt { display: grid; line-height: 1.15; }
.hplan-txt small { font-size: 10px; font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.hplan-txt b { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.hplan-txt small, .hplan-txt b { white-space: nowrap; }   /* the plan never wraps into a taller pill */
.hplan-txt b small { font-size: 11px; letter-spacing: 0; text-transform: none; margin-left: 2px; }
.hplan-txt b.bump { animation: om-bump var(--t-slow) var(--ease); }
.hplan-caret { color: var(--text-3); transition: rotate var(--t-fast) var(--ease); }
.hplan.is-open .hplan-caret { rotate: 180deg; }
.hplan-pop { position: absolute; right: 0; top: 100%; z-index: 30; width: 380px; padding-top: 10px; visibility: hidden; opacity: 0; translate: 0 -6px; transition: opacity 160ms var(--ease), translate 160ms var(--ease), visibility 0s linear 160ms; }
.hplan.is-open .hplan-pop, .hplan:has(:focus-visible) .hplan-pop { visibility: visible; opacity: 1; translate: none; transition-delay: 0s; }
@media (hover: hover) { .hplan:hover .hplan-pop { visibility: visible; opacity: 1; translate: none; transition-delay: 0s; } }
.hplan-pop .plan { position: static; max-height: min(560px, calc(100vh - 110px)); box-shadow: var(--sh-3); }
.hplan-go { margin-left: var(--s-1); }
.cat-view.is-enter { animation: om-enter var(--t-base) var(--ease); }
.no-anim { animation: none !important; }
.cat-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); }   /* the Filter button stays on the title's row, so its menu opens on screen */
.cat-head > div:first-child { min-width: 0; }
.cat-head p { color: var(--text-2); margin-top: var(--s-1); max-width: var(--w-text); }
/* Within a category: a filter between All and each kind of service, then the services, filling the
   row left to right before starting a new one. */
.b-main { --card-min: 240px; }
.b-main .cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--card-min)), 1fr)); }
.cards.is-enter { animation: om-enter var(--t-base) var(--ease); }
/* The Filter button beside a category's title, and its menu of the category's kinds of service. */
.fmenu { position: relative; flex: none; }
.fmenu-btn.is-set { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); }
.fmenu-caret { transition: rotate var(--t-fast) var(--ease); }
.fmenu.is-open .fmenu-caret { rotate: 180deg; }
.fmenu-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 15; min-width: 240px; padding: 6px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-3); display: grid; gap: 2px; animation: om-enter var(--t-fast) var(--ease); }
.fmenu-item { display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: 40px; padding: 0 var(--s-3) 0 var(--s-2); border-radius: var(--r-md); text-align: left; font-size: var(--fs-sm); color: var(--text); }
.fmenu-item:hover, .fmenu-item:focus-visible { background: var(--bg-2); }
.fmenu-item[aria-checked="true"] { font-weight: var(--fw-semibold); color: var(--accent); }
.fmenu-check { width: 18px; display: grid; place-items: center; flex: none; color: var(--accent); }
.fmenu-name { flex: 1; min-width: 0; }
.fmenu-item .n { font-size: var(--fs-cap); color: var(--text-3); font-variant-numeric: tabular-nums; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: var(--s-4); }

/* Service card */
.scard { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); overflow: hidden; transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease); }
.scard:hover { box-shadow: var(--sh-2); border-color: var(--border-strong); }
.scard:focus-within { border-color: var(--border-strong); }
.scard-media { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--bg-2); border-bottom: 1px solid var(--border); overflow: hidden; border-radius: 0; }
.scard-media:focus-visible { border-radius: 0; box-shadow: inset 0 0 0 3px rgba(26, 140, 230, 0.6); }
.scard-media .art { transition: transform var(--t-slow) var(--ease); }
.scard:hover .scard-media .art { transform: scale(1.025); }
.scard-flags { position: absolute; top: var(--s-3); left: var(--s-3); display: flex; gap: 6px; z-index: 2; }
.scard-flags .badge { box-shadow: var(--sh-1); }
.scard-flags .badge:not(.badge-solid) { background: rgba(255, 255, 255, 0.92); }
.scard-body { display: flex; flex-direction: column; gap: 6px; padding: var(--s-4) var(--s-4) var(--s-5); flex: 1; }
.scard-body h4 { font-size: var(--fs-card); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.scard-desc { font-size: var(--fs-sm); color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.scard-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-3); margin-top: auto; padding-top: var(--s-3); }
.scard-foot.is-added { grid-template-columns: minmax(0, 1fr); }
.scard-foot.is-added .scard-actions { justify-content: flex-start; }
.price-num small { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-2); margin-left: 4px; letter-spacing: 0; }
.choice-save { display: flex; align-items: center; gap: 4px; margin-top: 2px; color: var(--success-ink); font-weight: var(--fw-semibold); }
.choice-save .i { width: 13px; height: 13px; }
.markdown-note { display: flex; align-items: flex-start; gap: var(--s-2); margin-bottom: var(--s-3); padding: var(--s-3); border-radius: var(--r-md); background: var(--success-tint); color: var(--text); font-size: var(--fs-sm); line-height: 1.45; }
.markdown-note > .i { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--success-ink); }
.markdown-note b { color: var(--success-ink); }
.sheet-foot .price-num small { display: block; margin-left: 0; margin-top: 2px; }
.sheet-foot .eyebrow { display: block; margin-bottom: 2px; }
.scard-cfg { font-size: var(--fs-xs); color: var(--text-2); }
.scard-cfg b { color: var(--text); font-weight: var(--fw-semibold); }
.scard-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); flex: none; min-width: 0; }   /* wraps rather than run past a narrow card */
.added-chip { display: inline-flex; align-items: center; gap: 4px; height: var(--h-sm); padding: 0 12px; border-radius: var(--r-pill); background: var(--accent-tint); color: var(--accent); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.added-chip.is-new { animation: om-enter var(--t-base) var(--ease); }
.added-chip .i { width: 15px; height: 15px; stroke-width: 2.6; }
.scard.is-added { border-color: var(--accent-bright); box-shadow: inset 0 0 0 1px var(--accent-bright); }
.scard.is-unavailable .scard-media { filter: grayscale(1); opacity: 0.55; }
.scard.is-unavailable h4, .scard.is-unavailable .scard-desc { color: var(--text-3); }
.skel-card { border-radius: var(--r-xl); border: 1px solid var(--border); overflow: hidden; }
.skel-card .skel-media { aspect-ratio: 16 / 9; border-radius: 0; }
.skel-card .skel-lines { padding: var(--s-4); display: grid; gap: 10px; }

/* Plan panel */
.plan { position: sticky; top: calc(60px + var(--s-6)); display: flex; flex-direction: column; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-1); max-height: calc(100vh - 200px); }
.plan-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-4) var(--s-5) var(--s-3); }
.plan-scroll { overflow-y: auto; overscroll-behavior: contain; flex: 1; min-height: 0; }
.pl-items { padding: 0 var(--s-5); }
.pl-item { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--border); }
.pl-item.is-new { animation: om-enter var(--t-slow) var(--ease); }
.pl-item b { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.pl-cfg { font-size: var(--fs-xs); color: var(--text-2); }
.pl-price { text-align: right; }
.pl-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s-4); margin-top: 4px; }
.pl-actions .btn-link { font-size: var(--fs-xs); }
.pl-actions .btn-link.quiet { color: var(--text-2); }
.pl-del { margin-left: auto; width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--text-3); transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.pl-del:hover:not(:disabled) { color: var(--danger); background: #FEF3F2; }
.pl-del:disabled { opacity: 0.4; }
.mini-step { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--r-pill); height: 28px; }
.mini-step button { width: 28px; height: 26px; display: flex; align-items: center; justify-content: center; color: var(--text-2); border-radius: var(--r-pill); }
.mini-step button:hover:not(:disabled) { color: var(--text); background: var(--bg-3); }
.mini-step button:disabled { opacity: 0.35; }
.mini-step .i { width: 14px; height: 14px; stroke-width: 2.4; }
.mini-step output { min-width: 22px; text-align: center; font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.pl-totals { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--border); display: grid; gap: var(--s-3); background: var(--n-25); }
.pl-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.pl-row > span:first-child { font-size: var(--fs-sm); color: var(--text-2); }
.pl-row .note { display: block; font-size: var(--fs-cap); color: var(--text-3); }
.pl-total-main .price-num.bump { display: inline-block; animation: om-bump var(--t-slow) var(--ease); }
.pl-injured { margin: 0 var(--s-5) var(--s-4); padding: var(--s-3); border-radius: var(--r-md); background: var(--bg-2); display: grid; grid-template-columns: auto 1fr; gap: 2px var(--s-3); align-items: center; }
.pl-injured .inj-logo { width: 32px; height: 32px; grid-row: span 2; }
.pl-injured b { font-size: var(--fs-xs); display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.pl-injured small { font-size: var(--fs-cap); color: var(--text-2); }
.pl-foot { padding: 0 var(--s-5) var(--s-5); display: grid; gap: var(--s-3); }
.nudge { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s-3); align-items: center; padding: var(--s-3); border-radius: var(--r-md); border: 1px dashed var(--border-strong); }
.nudge small { font-size: var(--fs-cap); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; font-weight: var(--fw-semibold); }
.nudge p { font-size: var(--fs-xs); color: var(--text-2); }
.nudge b { font-size: var(--fs-sm); }
.nudge .btn { grid-row: 1 / span 3; grid-column: 2; }
.plan-empty { padding: var(--s-6) var(--s-5); }
.plan.in-sheet { position: static; border: 0; box-shadow: none; border-radius: 0; max-height: none; }
.plan.in-sheet .plan-scroll { overflow: visible; }
.plan-sheet { top: 0; right: 0; bottom: 0; width: min(440px, 92%); border-radius: var(--r-xl) 0 0 var(--r-xl); animation: om-slide-left var(--t-slow) var(--ease); }
.dgrid { grid-template-rows: minmax(0, 1fr); }
.dgrid > * { min-height: 0; }
.plan-empty .state { padding: var(--s-4) 0; }

/* ---------- Detail sheet and example viewer ---------- */
.dsheet { width: min(1080px, calc(100% - 64px)); height: min(780px, calc(100% - 64px)); }
.dgrid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); flex: 1; min-height: 0; }
.dmedia { background: var(--bg-2); padding: var(--s-6); overflow-y: auto; border-right: 1px solid var(--border); }
.dinfo { display: flex; flex-direction: column; min-height: 0; }
.dinfo-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s-6); display: grid; gap: var(--s-6); align-content: start; }
.viewer-stage { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 10; background: var(--surface); box-shadow: var(--sh-2); }
.viewer-stage.is-phone { aspect-ratio: auto; background: transparent; box-shadow: none; display: flex; justify-content: center; padding: var(--s-2) 0; }
.viewer-stage.is-phone .art-wrap { width: min(260px, 62%); aspect-ratio: 9 / 18.5; }
.viewer-meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin-top: var(--s-3); }
.viewer-meta b { font-size: var(--fs-sm); }
.viewer-meta span { font-size: var(--fs-cap); color: var(--text-3); white-space: nowrap; }
.thumbs { display: flex; gap: var(--s-2); margin-top: var(--s-3); overflow-x: auto; scrollbar-width: none; padding: 3px; }
.thumbs button { position: relative; flex: none; width: 88px; aspect-ratio: 16 / 10; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--border); background: var(--surface); transition: box-shadow var(--t-fast) var(--ease); }
.thumbs button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent-bright); border-color: transparent; }
.thumbs button[aria-pressed="true"]::after { content: ""; position: absolute; right: 4px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 9px no-repeat; }
.chapters { margin-top: var(--s-5); }
.chapters ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-2); }
.chapters li { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.chapters li span { font-variant-numeric: tabular-nums; color: var(--text-3); font-size: 11px; font-weight: var(--fw-semibold); }
.concept { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.concept li { padding: var(--s-3); border-radius: var(--r-md); background: var(--bg-2); display: grid; gap: 4px; align-content: start; }
.concept .i { color: var(--accent); }
.concept b { font-size: var(--fs-xs); }
.concept p { font-size: var(--fs-cap); color: var(--text-2); line-height: 1.35; }
.ticks li { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--fs-sm); padding: 3px 0; }
.ticks .i { width: 16px; height: 16px; color: var(--accent); stroke-width: 2.4; margin-top: 3px; }
.topics { display: flex; flex-wrap: wrap; gap: 6px; }
.topics li { font-size: var(--fs-cap); font-weight: var(--fw-medium); padding: 5px 10px; border-radius: var(--r-pill); background: var(--bg-3); color: var(--text-2); }
.blk { display: grid; gap: var(--s-3); }
.blk > h4 { font-size: var(--fs-cap); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-2); font-weight: var(--fw-semibold); }
.film-note { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--bg-2); font-size: var(--fs-xs); color: var(--text-2); }
.film-note .i { color: var(--text-3); width: 18px; height: 18px; }
.recs { display: grid; gap: var(--s-2); }
.rec { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3); border-radius: var(--r-md); border: 1px solid var(--border); }
.rec-art { width: 52px; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; flex: none; background: var(--bg-2); }
.rec b { font-size: var(--fs-sm); flex: 1; min-width: 0; }
.rec small { display: block; font-size: var(--fs-cap); color: var(--text-2); font-weight: var(--fw-regular); }
.dfoot-price small { display: block; font-size: var(--fs-cap); color: var(--text-2); margin-top: 2px; }
.viewer-empty { aspect-ratio: 16 / 10; border-radius: var(--r-lg); border: 1.5px dashed var(--border-strong); display: flex; align-items: center; justify-content: center; background: var(--surface); }

/* ---------- Review, schedule, checkout, complete ---------- */
.flow { max-width: 1080px; margin-inline: auto; padding: var(--s-8) var(--s-7) var(--s-10); }
.flow-head { margin-bottom: var(--s-7); display: grid; gap: var(--s-2); }
.flow-head p { color: var(--text-2); }
.fgrid { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: var(--s-7); align-items: start; }
.fstack { display: grid; gap: var(--s-4); }
.fsec { border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); }
.fsec-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5) var(--s-2); }
.fsec-body { padding: 0 var(--s-5) var(--s-2); }
.fline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-4); padding: var(--s-3) 0; border-top: 1px solid var(--border); }
.fsec-body .fline:first-child { border-top: 0; }
.fline b { font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.fline small { font-size: var(--fs-xs); color: var(--text-2); grid-column: 1; }
.fline .price { grid-row: 1 / span 2; grid-column: 2; align-self: center; justify-content: flex-end; }
.summary { position: sticky; top: calc(60px + var(--s-6)); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-1); padding: var(--s-5); display: grid; gap: var(--s-4); }
.srow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.srow > span { font-size: var(--fs-sm); color: var(--text-2); }
.srow-note { font-size: var(--fs-cap); color: var(--text-3); margin-top: -8px; }
.scope-list { display: grid; gap: 6px; }
.scope-list div { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-xs); color: var(--text-2); }
.inj-block { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--s-3); padding: var(--s-3); border-radius: var(--r-md); background: var(--bg-2); align-items: center; }
.inj-block .i { color: var(--text-3); grid-row: span 2; }
.inj-block .inj-logo { width: 36px; height: 36px; flex: none; }
.inj-block b { justify-self: start; text-align: left; }
.inj-block small { grid-column: 1 / -1; }
.inj-block b { font-size: var(--fs-xs); display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.inj-block small { font-size: var(--fs-cap); color: var(--text-2); }
.film-banner { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--accent-tint); color: var(--text); font-size: var(--fs-xs); }
.film-banner .i { color: var(--accent); }
.mcta { display: none; position: absolute; left: 0; right: 0; bottom: 0; z-index: 25; padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-top: 1px solid var(--border); }
.mcta-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s-2); font-size: var(--fs-xs); color: var(--text-2); }
.mcta-row b { color: var(--text); font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.cal-card { padding: var(--s-5); }
.cal-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-3); }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.cal .dow { font-size: 11px; font-weight: var(--fw-semibold); color: var(--text-3); padding: 6px 0; }
.cal .d { height: 44px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); color: var(--n-400); border-radius: 50%; }
.cal button.d { color: var(--text); font-weight: var(--fw-semibold); position: relative; transition: background-color var(--t-fast) var(--ease); }
.cal button.d::after { content: ""; position: absolute; bottom: 7px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent-bright); }
.cal button.d:hover { background: var(--bg-3); }
.cal button.d[aria-pressed="true"] { background: var(--accent); color: #fff; }
.cal button.d[aria-pressed="true"]::after { background: #fff; }
.cal-legend { display: flex; gap: var(--s-4); margin-top: var(--s-3); font-size: var(--fs-cap); color: var(--text-3); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-bright); }
.slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.slots .choice { min-height: 52px; }
.loc { display: flex; gap: var(--s-3); align-items: center; }
.loc-ico { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--bg-3); display: flex; align-items: center; justify-content: center; color: var(--text-2); flex: none; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.pay-ph { border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg); padding: var(--s-7) var(--s-5); display: grid; justify-items: center; gap: var(--s-2); text-align: center; background: var(--n-25); }
.pay-ph .i { color: var(--text-3); width: 24px; height: 24px; }
.pay-ph p { font-size: var(--fs-xs); color: var(--text-2); }
.done { max-width: 720px; margin-inline: auto; padding: var(--s-9) var(--s-7) var(--s-10); display: grid; gap: var(--s-5); }
.done-top { display: grid; justify-items: center; text-align: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.done-check { width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 10px var(--accent-tint); }
.done-check .i { width: 30px; height: 30px; stroke-width: 2.6; }
.next { counter-reset: n; }
.next li { display: grid; grid-template-columns: 32px 1fr; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--border); font-size: var(--fs-sm); }
.next li:first-child { border-top: 0; }
.next .n { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-3); display: flex; align-items: center; justify-content: center; font-size: var(--fs-cap); font-weight: var(--fw-bold); color: var(--text-2); }
.next b { display: block; }
.next small { color: var(--text-2); font-size: var(--fs-xs); }
.handoff { display: grid; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--surface); }
.inline-note { font-size: var(--fs-xs); color: var(--text-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: var(--bg-2); animation: om-enter var(--t-base) var(--ease); }

/* ---------- Tablet: container 701-1100 ---------- */
@container dev (max-width: 1100px) {
  .pp { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-5); }
  .hero { gap: var(--s-8); }
  .b-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .cnav { display: none; }
  .cstep { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); position: sticky; top: 60px; z-index: 12; background: rgba(255, 255, 255, 0.94); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); margin-inline: calc(var(--s-7) * -1); padding: var(--s-3) var(--s-7); border-bottom: 1px solid var(--border); margin-bottom: var(--s-5); }
  .fgrid { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-5); }
  .dsheet { width: calc(100% - 48px); height: calc(100% - 48px); }
  .dgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dmedia { padding: var(--s-5); }
  .chapters ol { grid-template-columns: minmax(0, 1fr); }
  .concept { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- The plan's header as it narrows ----------
   The logo on the left, the steps in the true middle, the plan and Continue on the right, on one
   line. As the screen narrows the right side gives way in turn so the steps stay centred: the plan's
   label, then the five step circles (for the compact "Step 1 of 5" and its bar), then the plan's
   monthly amount (still in the plan when it opens), then the header's Continue (each category
   ends with its own). */
@container dev (max-width: 1100px) {
  .hplan-txt > small { display: none; }
  .progress-m { gap: 5px; font-size: var(--fs-xs); }
  .progress-m .segs { gap: 3px; }
  .progress-m .segs span { width: 14px; }
  .progress-m .segs span.cur { width: 22px; }
}
@container dev (max-width: 900px) {
  .hplan-txt b small { display: none; }
}
@container dev (max-width: 760px) {
  .hplan-go { display: none; }
}

/* ---------- Mobile: container 700 and below ---------- */
@container dev (max-width: 700px) {
  .wrap, .wrap-wide { padding-inline: var(--s-4); }
  .only-desk { display: none !important; }
  .only-mob { display: revert !important; }
  .nav-links .nav-link { display: none; }
  .fhead-in { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }   /* equal sides, so the step sits in the true middle */
  .fhead .logo { display: none; }
  /* Headers on a phone: the same cushion on every side of the buttons, 18px on the site's header
     and 14px on the plan's, which is shorter. Things that stick under the plan's header follow it. */
  .nav { height: 72px; }
  .nav .nav-in { padding-inline: 18px; }
  .fhead { height: 64px; }
  .fhead .fhead-in { padding-inline: 18px; gap: var(--s-3); }
  .hplan-n { top: -3px; right: -2px; }
  .cstep { top: 64px; margin-inline: calc(var(--s-4) * -1); padding: var(--s-2) var(--s-4) var(--s-3); gap: var(--s-2); }
  .hero { grid-template-columns: minmax(0, 1fr); padding-block: var(--s-7) var(--s-6); gap: var(--s-7); }
  .hero-sub { font-size: 17px; }
  .hero-ctas .btn { padding-inline: var(--s-3); }
  .sec { padding-block: var(--s-7); }
  .sec-head { margin-bottom: var(--s-4); }
  .rail-arrows { display: none; }
  .rail { grid-auto-columns: 72%; margin-inline: calc(var(--s-4) * -1); padding-inline: var(--s-4); scroll-padding-inline: var(--s-4); }
  .journey { display: block; }
  .j-stage, .j-steps::before, .j-steps::after { display: none; }
  .j-step { min-height: 0; opacity: 1; grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--s-3); padding-block: var(--s-4) var(--s-5); }
  .j-step.is-done:not(.is-active) .j-text { opacity: 1; }
  .j-n { width: 36px; height: 36px; }
  .j-text b { font-size: var(--fs-h3); }
  .j-scene-m { display: block; grid-column: 1 / -1; position: relative; margin-top: var(--s-4); }
  .j-win { height: auto; min-height: 240px; padding: var(--s-4); gap: var(--s-3); }
  .j-inj { height: 300px; }
  .cta-band { padding-block: var(--s-8) var(--s-10); }
  .b-head { padding-block: var(--s-5) var(--s-4); }
  .b-head .t-title { font-size: 24px; }
  .b-head .b-help { display: none; }
  .cards, .b-main .cards { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .scard { display: grid; grid-template-columns: 116px minmax(0, 1fr); border-radius: var(--r-lg); }
  .scard-media { aspect-ratio: auto; height: 100%; min-height: 132px; border-bottom: 0; border-right: 1px solid var(--border); }
  .scard-flags { top: var(--s-2); left: var(--s-2); }
  .scard-flags .badge { font-size: 10.5px; height: 20px; }
  .scard-body { padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4); gap: 4px; }
  .scard-body h4 { font-size: 15px; }
  .scard-desc { font-size: var(--fs-xs); }
  .scard-foot, .scard-foot.is-added { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); padding-top: var(--s-2); }
  .scard-actions, .scard-foot.is-added .scard-actions { justify-content: space-between; }
  .scard-foot.is-added .scard-actions .btn-link { margin-right: auto; }
  .b-grid { grid-template-columns: minmax(0, 1fr); }
  .toast { bottom: 92px; }
  .dsheet.modal { left: 0; right: 0; top: 0; bottom: 0; width: auto; height: auto; transform: none; border-radius: 0; animation: om-slide-up var(--t-slow) var(--ease); }
  .dsheet.modal.no-anim { animation: none; }
  .dgrid { display: block; overflow-y: auto; flex: 1; min-height: 0; }
  .plan-sheet { left: 0; right: 0; top: 12px; bottom: 0; width: auto; border-radius: var(--r-xl) var(--r-xl) 0 0; animation: om-slide-up var(--t-slow) var(--ease); }
  .plan-sheet.no-anim { animation: none; }
  .dmedia { padding: var(--s-4); border-right: 0; overflow: visible; }
  .dinfo-scroll { overflow: visible; padding: var(--s-5) var(--s-4) var(--s-6); }
  .chapters ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow { padding: var(--s-5) var(--s-4) 150px; }
  .flow-head { margin-bottom: var(--s-5); }
  .flow-head .t-title { font-size: 24px; }
  .fgrid { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .summary { position: static; }
  .summary .desk-cta { display: none !important; } /* the sticky bar carries the action; beats the inline grid */
  .mcta { display: block; }
  .form-grid, .slots { grid-template-columns: minmax(0, 1fr); }
  .done { padding: var(--s-6) var(--s-4) var(--s-9); }
  .done .t-title { font-size: 24px; }
  .foot { flex-direction: column; align-items: flex-start; }
}
@container dev (min-width: 1441px) {
  .b-grid { grid-template-columns: 248px minmax(0, 1fr); }
}

/* ---------- Small phones: container 360 and below ---------- */
@container dev (max-width: 360px) {
  .hero-ctas .btn { font-size: 15px; padding-inline: var(--s-2); }
}

/* ---------- Roles: the first step of a plan, and who it's for ---------- */
/* ---------- Packages: the step after the role ---------- */
.pkg-pick { max-width: 1040px; margin: var(--s-8) auto var(--s-10); display: grid; gap: var(--s-3); justify-items: center; text-align: center; }
.pkg-pick > p { color: var(--text-2); max-width: 64ch; text-wrap: balance; }
.pkg-row { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); align-items: stretch; margin-top: var(--s-5); text-align: left; }
.pkg { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--sh-1); }
.pkg.is-featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 16px 40px rgba(11, 111, 201, 0.16); }
.pkg-band { display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; font-size: 12px; font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; background: var(--n-50, #F4F6F9); color: transparent; }
.pkg.is-featured .pkg-band { background: var(--accent); color: #fff; }
.pkg-in { flex: 1; display: flex; flex-direction: column; gap: var(--s-5); padding: var(--s-6); }
.pkg-name { font-size: 24px; line-height: 1.15; font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.pkg-tag { color: var(--text-2); margin-top: 4px; font-size: var(--fs-sm); }
.pkg-price { display: grid; gap: 8px; justify-items: start; padding-bottom: var(--s-5); border-bottom: 1px solid var(--border); }
.pkg-reg { color: var(--text-2); font-size: var(--fs-sm); }
.pkg-reg s { color: var(--text-2); font-size: 18px; font-weight: var(--fw-semibold); text-decoration-thickness: 2px; text-decoration-color: #D64545; margin-right: 4px; font-variant-numeric: tabular-nums; }
.pkg-now { font-size: 44px; line-height: 1; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.pkg.is-featured .pkg-now { color: var(--accent); }
.pkg-now-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.pkg-save { color: var(--success-ink); font-size: var(--fs-sm); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.pkg-sub { color: var(--text-3); font-size: var(--fs-xs); }
.pkg-inc { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.pkg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pkg-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; font-size: var(--fs-sm); }
.pkg-list li > .i { color: var(--accent); margin-top: 3px; }
.pkg-list b { font-weight: var(--fw-semibold); }
.pkg-list small { color: var(--text-2); font-size: var(--fs-sm); }
.pkg-up { display: flex; gap: 8px; align-items: flex-start; margin-top: auto; padding: 10px 12px; border-radius: var(--r-md); background: var(--accent-tint); color: var(--text); font-size: var(--fs-xs); }
.pkg-up .i { flex: none; margin-top: 1px; color: var(--accent); }
.pkg-go { margin-top: auto; }
.pkg-note { display: flex; gap: 8px; align-items: flex-start; max-width: 70ch; margin-top: var(--s-3); color: var(--text-2); font-size: var(--fs-sm); text-align: left; }
.pkg-note .i { flex: none; margin-top: 2px; color: var(--text-3); }
.pkg-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 var(--s-5); padding: 12px 16px; border-radius: var(--r-md); font-size: var(--fs-sm); }
.pkg-bar > span { flex: 1 1 320px; min-width: 0; }
.pkg-bar > .i { flex: none; }
.pkg-bar.is-on { background: var(--success-tint); color: var(--success-ink); }
.pkg-bar.is-on b { color: var(--success-ink); }
.pkg-bar.is-off { background: #FFF6E5; color: #7A4A00; }
.pkg-bar.is-off b { color: #7A4A00; }
.pkg-break { display: grid; gap: 8px; font-size: var(--fs-sm); }
.pkg-break-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pkg-break-row > span { display: grid; gap: 2px; min-width: 0; color: var(--text-2); }
.pkg-break-row small { font-size: var(--fs-cap); color: var(--text-3); line-height: 1.4; }
.pkg-break-row b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pkg-break-row.is-inj b { color: var(--text-2); font-weight: var(--fw-medium); }
.pkg-break-row.is-inj > span { flex: 1; }
.pkg-break-row .inj-logo-sm { width: 28px; height: 28px; flex: none; margin-top: 1px; }
.pkg-break-row.is-due { padding-top: 8px; border-top: 1px solid var(--border); align-items: baseline; }
.pkg-break-row.is-due span { color: var(--text); font-weight: var(--fw-semibold); }
.pkg-break-row.is-due b { font-size: 22px; }
.pp-row.is-inj .pp-row-main b::after { content: ""; }
.pkg-sum { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid #BBE5C8; background: var(--success-tint); font-size: var(--fs-sm); }
.pkg-sum-row { display: flex; justify-content: space-between; gap: 12px; color: var(--text-2); }
.pkg-sum-row s { text-decoration-color: #D64545; text-decoration-thickness: 2px; }
.pkg-sum-row b { color: var(--text); }
.pkg-sum-save { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-pill); background: #16A34A; color: #fff; box-shadow: 0 6px 16px rgba(22, 163, 74, 0.22); }
.pkg-sum-save b { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.pkg-sum-save span { margin-left: auto; font-size: var(--fs-xs); font-weight: var(--fw-semibold); }

/* ---------- Terms of Service and Privacy Policy ---------- */
.legal { padding-block: var(--s-8) var(--s-10); }
.legal-doc { max-width: 72ch; margin-inline: auto; display: grid; gap: var(--s-4); color: var(--text); }
.legal-doc h1 { margin-bottom: var(--s-2); }
.legal-doc h2 { font-size: var(--fs-h3, 18px); font-weight: var(--fw-semibold); margin-bottom: 6px; }
.legal-doc p, .legal-doc li { color: var(--text-2); line-height: 1.65; }
.legal-doc p + p { margin-top: 8px; }
.legal-doc ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.legal-doc b { color: var(--text); }
.legal-sheet { width: min(760px, calc(100% - 32px)); max-height: min(86vh, 900px); display: flex; flex-direction: column; }
.legal-sheet .sheet-body { overflow-y: auto; padding-block: var(--s-4); }
.legal-sheet .legal-doc h1 { display: none; }
.legal-links { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-left: auto; }
.legal-links .btn-link { font-size: var(--fs-xs); color: var(--text-2); }
.legal-links .foot-team { color: var(--text-3); opacity: 0.7; }   /* for the team; quiet on purpose */
.co-legal { font: inherit; padding: 0; vertical-align: baseline; }

/* ---------- The plan on one page ---------- */
.pp { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-7); align-items: start; padding-block: var(--s-7) var(--s-10); }
.pp-main { display: grid; gap: var(--s-5); min-width: 0; }
.pp-head p { color: var(--text-2); margin-top: 6px; }
.pp-main .pkg-bar { margin: 0; }
.pp-sec { display: grid; gap: var(--s-3); padding: var(--s-5); }
.pp-list { list-style: none; margin: 0; padding: 0; display: grid; }
.pp-row, .pp-add-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s-4); align-items: center; padding: 14px 0; border-top: 1px solid var(--border); }
.pp-list > li:first-child { border-top: 0; }
.pp-row.is-busy { opacity: 0.55; }
.pp-row-main, .pp-add-info { display: grid; gap: 2px; min-width: 0; text-align: left; }
.pp-row-main b, .pp-add-info b { font-weight: var(--fw-semibold); }
.pp-row-main small, .pp-add-info small { color: var(--text-2); font-size: var(--fs-xs); }
.pp-add-info { padding: 0; background: none; border: 0; color: inherit; cursor: pointer; }
.pp-add-info:hover b { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.pp-row-price { text-align: right; white-space: nowrap; }
.pp-row-act { display: flex; gap: 4px; justify-content: flex-end; }
.pp-remove { color: var(--text-2); }
.pp-group { display: grid; gap: 2px; }
.pp-group + .pp-group { margin-top: var(--s-3); }
.pp-group-t { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-2); padding-bottom: 4px; }
.pp-mob { padding-top: var(--s-3); border-top: 1px solid var(--border); }
.pp-mob > * + * { margin-top: var(--s-3); }
.pp-mob-total { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-sm); color: var(--text-2); }
.pp-mob-total b { font-size: 22px; color: var(--text); }
.pp-sum { position: sticky; top: var(--s-5); display: grid; gap: var(--s-3); }

.sch-solo { margin-top: 10px; color: var(--text-2); font-size: var(--fs-xs); }
.sch-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: var(--s-4); border-radius: var(--r-pill); background: var(--bg-2); border: 1px solid var(--border); max-width: 100%; overflow-x: auto; }
.sch-tab { display: grid; gap: 1px; padding: 8px 18px; border-radius: var(--r-pill); text-align: left; color: var(--text-2); white-space: nowrap; }
.sch-tab b { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.sch-tab small { font-size: var(--fs-xs); color: var(--text-3); }
.sch-tab:hover { color: var(--text); }
.sch-tab.is-cur { background: var(--surface); color: var(--text); box-shadow: var(--sh-1); }
.sch-tab.is-done b .i { color: var(--success-ink); }

/* ---------- OrthoAthlete training, recommended on every step ---------- */
.tr-promo { display: grid; grid-template-columns: 200px minmax(0, 1fr); overflow: hidden; border-radius: var(--r-xl); border: 2px solid var(--accent); background: linear-gradient(135deg, var(--accent-tint) 0%, var(--surface) 70%); box-shadow: 0 14px 36px rgba(11, 111, 201, 0.14); margin-block: var(--s-4); }
.tr-img { position: relative; min-height: 100%; }
.tr-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
.tr-body { display: grid; gap: 8px; padding: var(--s-5); min-width: 0; }
.tr-kicker { display: inline-flex; align-items: center; gap: 6px; justify-self: start; height: 24px; padding: 0 10px; border-radius: var(--r-pill); background: var(--accent); color: #fff; font-size: 11.5px; font-weight: var(--fw-bold); letter-spacing: 0.05em; text-transform: uppercase; }
.tr-title { font-size: 21px; line-height: 1.2; font-weight: var(--fw-bold); text-wrap: balance; }
.tr-text { color: var(--text-2); font-size: var(--fs-sm); }
.tr-perks { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 4px; font-size: var(--fs-sm); }
.tr-perks li { display: flex; gap: 8px; align-items: flex-start; }
.tr-perks .i { color: var(--accent); flex: none; margin-top: 3px; }
.tr-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: 4px; }
.tr-note { color: var(--success-ink); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.tr-promo.is-compact { grid-template-columns: 96px minmax(0, 1fr); border-width: 1px; box-shadow: var(--sh-1); margin-block: var(--s-2); }
.tr-promo.is-compact .tr-body { gap: 6px; padding: var(--s-3) var(--s-4); }
.tr-promo.is-compact .tr-kicker { height: 20px; padding: 0 8px; font-size: 10px; }
.tr-promo.is-compact .tr-title { font-size: 16px; }
.tr-promo.is-compact .tr-foot { margin-top: 0; }
.tr-promo.is-compact .tr-foot .btn { min-height: 34px; padding: 0 14px; font-size: var(--fs-xs); }
.tr-promo.is-compact .tr-note { display: none; }
.tr-in { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--r-md); background: var(--success-tint); color: var(--success-ink); font-size: var(--fs-sm); margin-block: var(--s-3); }

.role-pick { max-width: 920px; margin: var(--s-8) auto var(--s-10); display: grid; gap: var(--s-3); justify-items: center; text-align: center; }
.role-pick > p { color: var(--text-2); max-width: 64ch; text-wrap: balance; }
.role-choices { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-5); }
/* Each role is a photo that fades to navy under its name; choosing one turns the fade brand blue. */
.role-choice { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; aspect-ratio: 4 / 5; padding: var(--s-5); border-radius: var(--r-xl); background: linear-gradient(160deg, var(--n-700), var(--n-900)); color: #fff; text-align: left; box-shadow: var(--sh-1); transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.role-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: var(--rp, center); transition: transform var(--t-slow) var(--ease), filter var(--t-base) var(--ease); -webkit-user-drag: none; }
.role-choice::before, .role-choice::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; transition: opacity var(--t-base) var(--ease); }
.role-choice::before { background: linear-gradient(to top, rgba(14, 26, 43, 0.94) 0%, rgba(14, 26, 43, 0.7) 24%, rgba(14, 26, 43, 0.14) 54%, rgba(14, 26, 43, 0) 70%); }
.role-choice::after { opacity: 0; background: linear-gradient(to top, rgba(9, 89, 166, 0.97) 0%, rgba(11, 111, 201, 0.76) 26%, rgba(26, 140, 230, 0.18) 58%, rgba(26, 140, 230, 0) 74%); }
.role-txt { display: grid; gap: 4px; text-shadow: 0 1px 12px rgba(14, 26, 43, 0.4); }
.role-choice b { font-size: 21px; line-height: 1.2; font-weight: var(--fw-semibold); color: #fff; }
.role-choice small { font-size: var(--fs-sm); line-height: 1.4; color: rgba(255, 255, 255, 0.86); }
.role-radio { position: absolute; top: var(--s-4); right: var(--s-4); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 2px solid rgba(255, 255, 255, 0.92); background: rgba(14, 26, 43, 0.3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--accent); transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.role-radio .i { width: 17px; height: 17px; stroke-width: 3; opacity: 0; transform: scale(0.6); transition: opacity var(--t-fast) var(--ease), transform var(--t-base) var(--ease); }
.role-choice:hover:not(:disabled) { transform: translateY(-3px); box-shadow: var(--sh-2); }
.role-choice:hover:not(:disabled) .role-img { transform: scale(1.04); }
.role-choice:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 3px; }
.role-choice[aria-checked="true"], .role-choice[aria-checked="true"]:hover:not(:disabled) { box-shadow: 0 0 0 3px var(--accent-bright), var(--sh-2); }
.role-choice[aria-checked="true"]::before { opacity: 0; }
.role-choice[aria-checked="true"]::after { opacity: 1; }
.role-choice[aria-checked="true"] .role-radio { background: #fff; border-color: #fff; }
.role-choice[aria-checked="true"] .role-radio .i { opacity: 1; transform: none; }
.role-choice.is-pop .role-radio { animation: om-bump var(--t-slow) var(--ease); }
/* Once one is chosen, the others quiet down (and come back on hover). */
.role-choices.has-pick .role-choice[aria-checked="false"]:not(:hover) .role-img { filter: saturate(0.35) brightness(0.8); }
.role-choice:disabled { opacity: 0.6; }
.role-foot { width: 100%; display: flex; justify-content: center; margin-top: var(--s-5); }
.role-go { min-width: 300px; }
/* Opaque when disabled, so nothing shows through it where it is pinned over the cards. */
.role-go:disabled { opacity: 1; background: color-mix(in srgb, var(--accent) 42%, var(--bg)); }
.role-drop { display: grid; gap: 6px; margin: 2px 0 0; }
.role-drop li { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--text); }
.role-drop .i { color: var(--danger); flex: none; }
@container dev (max-width: 700px) {
  .j-pkg { padding: var(--s-3); }
  .j-pkg-badge { height: 18px; padding: 0 6px; gap: 3px; font-size: 9px; letter-spacing: 0.03em; }
  .j-pkg-price { font-size: 20px; }
  .j-pkg .j-add { white-space: nowrap; padding: 6px 10px; font-size: 11px; }
  .tr-promo { grid-template-columns: minmax(0, 1fr); }
  .tr-promo:not(.is-compact) .tr-img { height: 150px; min-height: 0; }
  .tr-promo.is-compact { grid-template-columns: 72px minmax(0, 1fr); }
  .tr-foot .btn { width: 100%; }
  .pp { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); padding-block: var(--s-5) var(--s-8); }
  .pp-sum { position: static; }
  .pp-row, .pp-add-row { grid-template-columns: minmax(0, 1fr) auto; }
  .pp-row-act, .pp-add-row > .btn { grid-column: 1 / -1; justify-content: flex-start; justify-self: start; }
  .pp-remove-l { display: inline; }
  .pkg-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .pkg-in { padding: var(--s-5); }
  .pkg:not(.is-featured) .pkg-band { display: none; }   /* stacked cards don't need to line up */
  .pkg-now { font-size: 34px; }
  .role-pick { margin-block: var(--s-5) var(--s-8); }
  .role-choices { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); margin-top: var(--s-3); }
  .role-choice { aspect-ratio: 5 / 2; padding: var(--s-4); }
  /* On the short phone card the words sit bottom left, so the fade is darkest there and lets the
     people in the photo show on the right. */
  .role-choice::before { background: linear-gradient(to top right, rgba(14, 26, 43, 0.92) 0%, rgba(14, 26, 43, 0.6) 36%, rgba(14, 26, 43, 0.08) 68%, rgba(14, 26, 43, 0) 100%); }
  .role-choice::after { background: linear-gradient(to top right, rgba(9, 89, 166, 0.96) 0%, rgba(11, 111, 201, 0.68) 38%, rgba(26, 140, 230, 0.1) 72%, rgba(26, 140, 230, 0) 100%); }
  .role-img { object-position: var(--rp-m, center); }
  .role-radio { top: var(--s-3); right: var(--s-3); width: 28px; height: 28px; }
  .role-choice b { font-size: 18px; }
  .role-choice small { font-size: var(--fs-xs); }
  .hc-track { --hc-w: 78%; }
  .cat-steps-n { display: none; }
  .hplan-txt, .hplan-caret, .hplan-go, .hplan-pop { display: none; }
  .hplan-btn { padding: 1px; min-height: 36px; }
  .hplan-ico { width: 32px; height: 32px; }
  .watch { width: calc(100% - 24px); }
  .cat-steps .cat-next { flex: 1; max-width: none; }
  .hc-cap { font-size: 14px; }
  /* On a phone the three cards can push the button below the fold, so it stays pinned to the bottom. */
  .role-foot { position: sticky; bottom: 0; z-index: 2; margin-top: 0; padding: var(--s-5) 0 var(--s-4); background: linear-gradient(to top, var(--bg) 62%, rgba(255, 255, 255, 0)); }
  .role-go { width: 100%; min-width: 0; }
  .b-head { flex-wrap: wrap; row-gap: var(--s-3); }
}