/* =========================================================================
   Hybrid "Learn more" pages: PostureScreen, LeanScreen, SquatScreen,
   PostureScribe.AI, RemoteScreen, PostureRay and Pricing (generated by
   tools/build-pages.mjs).
   Loaded after styles.css + site.css, so every token, .h2/.lede/.eyebrow,
   .btn/.link/.badge, .plans/.plan, .qa, .close and the device kit are reused.
   Everything new is prefixed .pg- so it never collides with the homepage.
   Bands alternate light / dark; dark bands carry data-tone="dark" so site.js
   switches the header tone. No band is pinned: these pages read top to bottom.
   ========================================================================= */

/* ---------- bands ---------- */
.pg-band { padding: var(--pad) 0; overflow: clip; }
.pg-band--tight { padding: clamp(60px, 6.4vw, 92px) 0; }
.pg-band[data-tone="dark"] { color: var(--dk-ink); }
.pg-band[data-tone="dark"] .lede { color: var(--dk-2); }
.pg-band[data-tone="dark"] .eyebrow { color: var(--sky); }
.pg-band[data-tone="dark"] .link { color: var(--sky); }
.pg-band[data-tone="dark"] .link--ray { color: #ff7c97; }
[data-tone="light"] .link--ray { color: var(--red); } /* the on-dark pink is 2.3:1 on white; brand red text (7.6:1), like "Read the study" and the citations */
/* a text link right beside a scarlet Get started (hero CTA row, button rows, close CTA) takes the button's red, scarlet --cta-lo
   (6.1:1), so the pair reads as one colour (Oct 8 Loom); every other light-band PostureRay link stays --red (review redcta-3) */
[data-tone="light"] :is(.pg-hero__ctas, .pg-btnrow, .close__cta):has(> .btn--ray) .link--ray { color: var(--cta-lo); }
.pg-band[data-tone="dark"] .fine { color: #8fa6bd; }
/* soft section-local light, transparent at the edges so it never draws a seam */
.pg-glow::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: min(820px, 92%); z-index: -1; pointer-events: none; background: radial-gradient(56% 60% at var(--gx, 50%) 38%, var(--gc, rgba(38, 188, 215, .16)), transparent 72%); }
.pg-glow--l { --gx: 26%; }
.pg-glow--r { --gx: 74%; }
.pg-glow--red { --gc: rgba(163, 23, 55, .26); }
.pg-glow--deep { --gc: rgba(30, 72, 120, .55); }
/* the professions marquee (Joe's Oct 9 2026 Loom "Add Scrolling Marquee to Assessment Screens"): the homepage's strip
   (styles.css .aud__k + .marquee) opens the first dark band below the hero of each PostureScreen assessment page and
   PostureScribe.AI: tagline, rolling names, a hairline like the exam's, then the band's own content */
.pg-band--aud { padding-top: 0; }
.pg-aud { position: relative; display: flex; flex-direction: column; gap: 8px; padding: clamp(22px, 2.4vw, 32px) 0 clamp(20px, 2.2vw, 28px); margin-bottom: calc(var(--pad) * .7); text-align: center; }
.pg-aud::after { content: ""; position: absolute; left: 50%; bottom: 0; width: min(1240px, 100% - 2 * var(--gutter)); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(159, 179, 200, .22) 20%, rgba(159, 179, 200, .22) 80%, transparent); }
@media (max-width: 900px) { .pg-aud { gap: 6px; } }
.pg-head { margin-bottom: clamp(34px, 4.4vw, 58px); }
.pg-head .lede { margin-top: 14px; }
.pg-head--c { text-align: center; display: grid; justify-items: center; }
.pg-head--c .lede { max-width: 58ch; }
.pg-h3 { font-size: clamp(20px, 1.7vw, 24px); letter-spacing: -.02em; font-weight: 700; line-height: 1.2; }
.pg-sub { margin-top: clamp(56px, 7vw, 96px); margin-bottom: 22px; }
.pg-fine { margin-top: 22px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); max-width: 90ch; }
[data-tone="dark"] .pg-fine { color: #8fa6bd; }
.pg-fine--c { text-align: center; margin-inline: auto; }
.pg-disclaimer { margin-top: 32px; text-wrap: wrap; text-align: justify; } /* the site disclaimer in a page body (site.mjs disclaimerP; Oct 8, one disclaimer since Oct 11; WEB-196 justified block) */
.pg-links { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; margin-top: 28px; }
.pg-links--c { justify-content: center; }
.pg-btnrow { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; }
.btn--light { background: #fff; color: var(--ink); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .6); }
.btn--light:hover { background: var(--sky-l); }
.btn--ghost { box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--ink); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--blue); }
[data-tone="dark"] .btn--ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
[data-tone="dark"] .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--sky); }
.btn .pg-ic { width: 15px; height: 15px; margin: 0; }

/* ---------- hero (light aurora) ---------- */
.pg-hero { position: relative; margin-top: calc(-1 * var(--hdr)); padding: calc(var(--hdr) + clamp(14px, 2.6vw, 34px)) 0 clamp(44px, 5.6vw, 80px); overflow: clip; }
.pg-hero .aurora { -webkit-mask-image: linear-gradient(180deg, #000 66%, transparent 100%); mask-image: linear-gradient(180deg, #000 66%, transparent 100%); }
.pg-hero__grid-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(0, 128, 178, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 128, 178, .07) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(60% 55% at 70% 40%, #000 0%, transparent 75%); mask-image: radial-gradient(60% 55% at 70% 40%, #000 0%, transparent 75%); }
.pg-hero__in { position: relative; z-index: 2; }
.pg-hero__grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.pg-hero__copy { display: grid; justify-items: start; }
.pg-crumbs { margin-bottom: clamp(18px, 2.4vw, 30px); }
.pg-crumbs a { color: var(--ink-3); }
.pg-crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.pg-h1 { font-size: clamp(32px, 3.55vw, 54px); line-height: 1.04; letter-spacing: -.042em; font-weight: 800; text-wrap: balance; color: var(--ink); }
.pg-h1__logo { display: block; width: min(var(--lw, 300px), 74vw); height: auto; margin-bottom: clamp(16px, 2vw, 26px); }
.pg-h1__l { display: block; }
.pg-h1__g { display: block; background: linear-gradient(90deg, var(--blue) 0%, #0a9cc9 50%, #1fb3d1 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-bottom: .08em; }
.pg-h1 i { font-style: italic; font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; padding-right: .04em; }
.pg-hero__sub { margin-top: clamp(16px, 2vw, 22px); max-width: 48ch; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.52; color: var(--ink-2); text-wrap: pretty; }
.pg-hero__ctas { margin-top: clamp(20px, 2.6vw, 30px); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }
.pg-hero__note { margin-top: 16px; max-width: 52ch; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.pg-hero__note b { color: var(--ink-2); font-weight: 600; }
.pg-hero--c .pg-hero__grid { grid-template-columns: minmax(0, 1fr); }
.pg-hero--c .pg-hero__copy { justify-items: center; text-align: center; }
.pg-hero--c .pg-hero__sub { max-width: 58ch; }
.pg-hero--c .pg-crumbs { justify-self: center; }
/* PostureRay: a warmer aurora; the headline accent is the logo blue (below) */
.pg-hero--ray .aurora .a2 { background: radial-gradient(closest-side, rgba(163, 23, 55, .17), rgba(163, 23, 55, 0)); }
.pg-hero--ray .aurora .a3 { background: radial-gradient(closest-side, rgba(224, 80, 111, .16), rgba(224, 80, 111, 0)); }
/* the flat logo blue #147FB1 (below) is a large-text accent: the cyan .a1 drifts right behind it, and at full strength the
   aurora under the glyphs dropped to 2.5–2.9:1. Calmed so the worst pixel under the accent stays ≥ 3.2:1 at 1440, 1024
   and 390 and under reduced motion (review ray-1); the close's blue .a2 likewise (see .pg-close--ray below). */
.pg-hero--ray .aurora .a1 { opacity: .35; }
/* Joe's Oct 7 Loom "PostureRay Page Edits": the headline is PostureRay-logo blue, not red. Oct 8 Loom "Updating
   PostureScribe UI and Pricing Details" (0:05): "this blue should … match … the word Posture" in the logo, so it is
   that blue, flat: #147FB1, sampled from logo-postureray-2025.png (the closing line uses it too). */
.pg-hero--ray, .pg-close--ray { --ray-blue: #147fb1; }
.pg-hero--ray .pg-h1__g { background-image: none; color: var(--ray-blue); -webkit-text-fill-color: var(--ray-blue); }

/* device stages */
.pg-stage { position: relative; justify-self: center; width: min(560px, 100%); aspect-ratio: 560 / 600; }
.pg-stage .pg-d { position: absolute; transform-origin: 50% 100%; }
.pg-stage__floor { position: absolute; left: 8%; right: 2%; bottom: -1%; height: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(11, 26, 46, .24), transparent); }
.pg-st-ps .pg-d--pad { left: 0; top: 1%; width: 66%; transform: rotateY(-10deg) rotateX(3deg) rotateZ(-.6deg); }
.pg-st-ps .pg-d--p1 { left: 52%; top: 37%; width: 25.5%; z-index: 2; transform: rotateY(-7deg) rotateZ(1.2deg); }
.pg-st-ps .pg-d--p2 { left: 74.5%; top: 45%; width: 25.5%; z-index: 3; transform: rotateY(-5deg) rotateZ(2.4deg); }
.pg-st-scribe .pg-d--pad { left: 0; top: 3%; width: 70%; transform: rotateY(-9deg) rotateX(2deg); }
.pg-st-scribe .pg-d--p1 { left: 64%; top: 26%; width: 31%; z-index: 2; transform: rotateY(-6deg) rotateZ(2deg); }
/* RemoteScreen: three iPhones (Joe, Oct 7 Loom): welcome left, the AI conversation front and centre (its text
   never covered), the same-person squat recording right, tucked behind it. Wider than the other stages. */
.pg-st-rs { width: min(620px, 100%); aspect-ratio: 620 / 600; }
.pg-st-rs .pg-d--p1 { left: 0; top: 9%; width: 34%; transform: rotate(-6deg); opacity: .94; }
.pg-st-rs .pg-d--p2 { left: 29%; top: 0; width: 39%; z-index: 3; transform: rotate(1deg); }
.pg-st-rs .pg-d--p3 { left: 64%; top: 9%; width: 34%; z-index: 2; transform: rotate(6deg); }
/* WEB-155 (G3): Apple's MacBook Pro 16" bezel (assets/kit/devices-apple.css .abz--mbp16, 4220 / 2577) plus room for the chip */
.pg-st-ray { aspect-ratio: 4220 / 2860; width: min(640px, 100%); }
.pg-st-ray .pg-d--mac { left: 0; top: 3%; width: 100%; }
.pg-chip { position: absolute; z-index: 6; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.2; color: var(--ink); background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 14px 30px -14px rgba(11, 26, 46, .45), inset 0 0 0 1px rgba(0, 128, 178, .16); white-space: nowrap; }
.pg-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 1.5px var(--navy); flex: none; }
.pg-chip--ai i { background: #3b8de0; box-shadow: 0 0 10px #3b8de0; animation: pg-pulse 1.6s var(--ease-in-out) infinite; }
.pg-chip--you i { background: #f6a623; box-shadow: 0 0 10px #f6a623; animation: pg-pulse 1.6s var(--ease-in-out) infinite .8s; }
.pg-chip--ray i { background: var(--red-l); box-shadow: 0 0 0 1.5px var(--red); }
.pg-chip svg { width: 14px; height: 14px; color: var(--blue-t); }
@keyframes pg-pulse { 50% { opacity: .35; } }
.pg-wavechip { gap: 10px; }
.pg-wavechip span { display: inline-flex; align-items: center; gap: 2px; height: 16px; }
.pg-wavechip span b { width: 2.5px; height: 100%; border-radius: 2px; background: var(--blue); transform-origin: 50% 50%; animation: pg-wave 1.1s var(--ease-in-out) infinite; }
.pg-wavechip span b:nth-child(2) { animation-delay: -.2s; } .pg-wavechip span b:nth-child(3) { animation-delay: -.45s; } .pg-wavechip span b:nth-child(4) { animation-delay: -.7s; } .pg-wavechip span b:nth-child(5) { animation-delay: -.9s; }
@keyframes pg-wave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

/* entrance (no JS needed; reduced motion shows the final layout) */
@media (prefers-reduced-motion: no-preference) {
  .pg-hero .pg-in { animation: pg-rise .75s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms + 60ms); }
  .pg-stage .pg-d { animation: pg-unfold 1.15s var(--ease-out-expo) both; animation-delay: calc(var(--i, 0) * 120ms + 260ms); }
  .pg-stage .pg-chip { animation: pg-pop .6s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 120ms + 900ms); }
  .pg-stage__floor { animation: pg-fade 1s var(--ease-out) both .6s; }
}
@keyframes pg-rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } }
@keyframes pg-unfold { from { opacity: 0; transform: translate3d(0, 9%, 0) rotateX(58deg) scale(.8); } }
@keyframes pg-pop { from { opacity: 0; transform: translate3d(0, 8px, 0) scale(.92); } }
@keyframes pg-fade { from { opacity: 0; } }

/* ---------- At a glance (quotable summary) ---------- */
.pg-glance { position: relative; z-index: 2; margin-top: clamp(36px, 4.6vw, 64px); display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 2.18fr); gap: clamp(20px, 3vw, 48px); padding: clamp(22px, 2.6vw, 34px); border-radius: 28px; background: rgba(255, 255, 255, .74); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgba(0, 128, 178, .14), 0 24px 60px -36px rgba(11, 26, 46, .4); }
.pg-glance__h { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-t); }
.pg-glance__h::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 1.5px var(--navy); }
.pg-glance__lead { margin-top: 12px; font-size: 16px; line-height: 1.55; color: var(--ink); font-weight: 500; text-wrap: pretty; }
.pg-glance dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 30px; }
.pg-glance dl div { padding-top: 14px; border-top: 1px solid var(--line); }
.pg-glance dt { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.pg-glance dd { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }

/* ---------- split rows ---------- */
.pg-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5.4vw, 88px); align-items: center; }
.pg-split--wide { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
.pg-split--rev > .pg-copy { order: 2; }
.pg-split--vid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(24px, 3vw, 40px); }
.pg-split + .pg-split { margin-top: clamp(72px, 9vw, 130px); }
.pg-copy .lede { margin-top: 16px; }
.pg-checks { margin-top: 24px; display: grid; gap: 13px; }
.pg-checks li { position: relative; padding-left: 32px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.pg-checks li > svg { position: absolute; left: 0; top: 1px; width: 21px; height: 21px; padding: 3px; border-radius: 50%; background: rgba(0, 128, 178, .1); color: var(--blue-t); }
.pg-checks b { color: var(--ink); font-weight: 600; }
[data-tone="dark"] .pg-checks li { color: #b9c6d3; }
[data-tone="dark"] .pg-checks li > svg { background: rgba(38, 188, 215, .16); color: var(--sky); }
[data-tone="dark"] .pg-checks b { color: #fff; }
.pg-pts { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; }
.pg-pts li { padding-top: 16px; border-top: 1px solid var(--line); }
[data-tone="dark"] .pg-pts li { border-color: rgba(255, 255, 255, .12); }
.pg-pts h3 { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.pg-pts p { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
[data-tone="dark"] .pg-pts p { color: #a9b8c8; }

/* media helpers */
.pg-media { position: relative; justify-self: center; width: 100%; }
.pg-media--pad { width: min(440px, 100%); }
.pg-media--phone { width: min(300px, 74%); }
.pg-dark-ring .device { --shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 40px 90px -24px rgba(0, 0, 0, .85), 0 0 120px -30px rgba(38, 188, 215, .35); }
.pg-duo { position: relative; width: min(520px, 100%); aspect-ratio: 520 / 560; justify-self: center; }
.pg-duo .pg-d { position: absolute; }
.pg-duo .pg-d--pad { left: 0; top: 0; width: 72%; }
.pg-duo .pg-d--p1 { right: 0; bottom: 0; width: 32%; z-index: 2; }
/* Joe's Oct 9 Loom "Update PostureScreen Videos and iPad Layout": the 4-view iPad gets a live-capture iPhone in front of
   its lower-right corner, laid out like the hero; the pair shifts left so the phone stays inside the column */
.pg-media--duo { width: min(440px, 86%); }
.pg-views__devs { position: relative; translate: -8% 0; }
.pg-views__phone { position: absolute; z-index: 2; right: -17%; bottom: 3%; width: 33%; }
.pg-cap { margin-top: 14px; text-align: center; font-size: 13px; color: var(--ink-3); }
[data-tone="dark"] .pg-cap { color: #8fa6bd; }
.pg-framed { width: 100%; filter: drop-shadow(0 30px 40px rgba(11, 26, 46, .22)); }
[data-tone="dark"] .pg-framed { filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .7)); }

/* the 4-view strip */
.pg-views { margin-top: 30px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pg-views figure { position: relative; border-radius: 14px; aspect-ratio: 892 / 1288; background: #0b1424; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); transition: transform .45s var(--ease-out), box-shadow .45s; }
.pg-views figure:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(38, 188, 215, .5), 0 20px 40px -20px rgba(0, 0, 0, .8); }
/* hover stays put (styles.css, .btn): a strip under the lifted tile covers the band it rose off; the figure no longer
   clips (that would clip the strip), so the photo rounds its own corners */
.pg-views figure:hover::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 6px; }
.pg-views img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; border-radius: inherit; }
.pg-views figcaption { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: #fff; background: rgba(4, 10, 20, .72); }

/* ROM trio (light band) */
.pg-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 44px); width: min(860px, 100%); margin-inline: auto; align-items: end; }
.pg-trio > :nth-child(2) { transform: translateY(-26px); }
.pg-trio figcaption { margin-top: 16px; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
[data-tone="dark"] .pg-trio figcaption { color: #b9c6d3; }
.pg-trio figcaption small { display: block; font-weight: 500; color: var(--ink-3); }
[data-tone="dark"] .pg-trio figcaption small { color: #8fa6bd; }

/* ---------- feature cards ---------- */
.pg-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pg-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pg-cards--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pg-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg-card { position: relative; display: flex; flex-direction: column; padding: 26px 24px 24px; border-radius: var(--r); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); transition: transform .45s var(--ease-out), box-shadow .45s, background .45s; }
.pg-card:hover { transform: translateY(-4px); background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 128, 178, .25), var(--shadow-2); }
.pg-card:hover::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 6px; } /* hover stays put (styles.css, .btn); ::before is .msr */
.pg-card__ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 18px; color: var(--blue-t); background: linear-gradient(160deg, #e0f3fa, #fff); box-shadow: inset 0 0 0 1px rgba(0, 128, 178, .18); }
.pg-card__ic svg { width: 21px; height: 21px; }
.pg-card__n { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--sky); font-variant-numeric: tabular-nums; margin-bottom: 10px; }
.pg-card h3 { font-size: 17.5px; line-height: 1.25; letter-spacing: -.015em; font-weight: 700; }
.pg-card p { margin-top: 8px; font-size: 14.5px; line-height: 1.52; color: var(--ink-2); }
.pg-card q, .pg-quoteline { display: block; margin-top: 14px; padding-left: 12px; border-left: 2px solid var(--sky); font-size: 14px; line-height: 1.45; font-style: italic; color: var(--ink); quotes: "“" "”"; }
.pg-card .link { margin-top: auto; padding-top: 16px; align-self: flex-start; }
.pg-card__logo { height: 30px; width: auto; max-width: 100%; object-fit: contain; object-position: 0 50%; margin-bottom: 16px; }
.pg-card--soon { opacity: .9; }
.pg-tag { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); background: rgba(11, 26, 46, .06); vertical-align: 2px; }
[data-tone="dark"] .pg-card { background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
[data-tone="dark"] .pg-card:hover { background: rgba(255, 255, 255, .075); box-shadow: inset 0 0 0 1px rgba(38, 188, 215, .45), 0 30px 60px -30px rgba(0, 0, 0, .8); }
[data-tone="dark"] .pg-card__ic { color: var(--sky); background: rgba(38, 188, 215, .12); box-shadow: inset 0 0 0 1px rgba(38, 188, 215, .3); }
[data-tone="dark"] .pg-card h3 { color: #fff; }
[data-tone="dark"] .pg-card p { color: #aebdcc; }
[data-tone="dark"] .pg-card q { color: #e3ecf4; }
.pg-band--ray .eyebrow { color: #ff8aa3; }
.pg-band--ray .pg-card__ic { color: #ff8aa3; background: rgba(224, 80, 111, .12); box-shadow: inset 0 0 0 1px rgba(224, 80, 111, .32); }
.pg-band--ray .pg-card:hover { box-shadow: inset 0 0 0 1px rgba(224, 80, 111, .5), 0 30px 60px -30px rgba(0, 0, 0, .8); }

/* modules with screenshots */
.pg-mods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pg-mod { display: flex; flex-direction: column; border-radius: 24px; background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: transform .5s var(--ease-out), box-shadow .5s; }
.pg-mod:hover { position: relative; transform: translateY(-5px); box-shadow: inset 0 0 0 1px rgba(38, 188, 215, .45), 0 34px 70px -30px rgba(0, 0, 0, .85); }
/* hover stays put (styles.css, .btn): a strip under the lifted card; the card no longer clips (that would clip the
   strip), so the image box, which already clips its own zoom, takes the card's top corners */
.pg-mod:hover::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 7px; }
.pg-mod__img { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; border-radius: 24px 24px 0 0; background: #0b1424; }
.pg-mod__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--oy, 8%); transition: transform 1.2s var(--ease-out); }
.pg-mod:hover .pg-mod__img img { transform: scale(1.045); }
.pg-mod__img::after { content: ""; position: absolute; inset: auto 0 0 0; height: 36%; background: linear-gradient(180deg, transparent, rgba(16, 20, 26, .6)); pointer-events: none; }
.pg-mod__b { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 24px; flex: 1; }
.pg-mod__k { height: 40px; display: flex; align-items: center; margin-bottom: 2px; }
/* Joe's white logo masters on the dark band (WEB-142 N6): one cap height for all five, no plate */
.pg-mod__logo { display: block; height: 34px; width: auto; max-width: 100%; object-fit: contain; object-position: 0 50%; }
.pg-mod__k span { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sky); }
.pg-mod h3 { font-size: 18px; letter-spacing: -.015em; font-weight: 700; color: #fff; }
.pg-mod p { font-size: 14.5px; line-height: 1.5; color: #aebdcc; }
.pg-mod .more { margin-top: auto; align-self: flex-start; } /* red Learn more, pinned to the card foot like the text links */
/* the text links take the same 34 px box as .more--sm, so where a row of cards mixes them ("Learn more" beside "SitScreen
   guide" and "See the study") every label sits on one midline (final review final-1: the button labels sat 6 px high); the
   hover underline keeps its usual 5 px under the text */
.pg-mod .link { margin-top: auto; align-self: flex-start; min-height: 34px; }
.pg-mod .link::after { bottom: 1px; bottom: calc((34px - 1lh) / 2 - 5px); }
.pg-also { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pg-also li { padding: 8px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: #cfe0ec; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.pg-also li:first-child { color: var(--sky); box-shadow: none; padding-inline: 4px; }
/* "Also inside" chips that open their own feature pages (WEB-142 N11) */
.pg-also--links li:not(:first-child) { padding: 0; box-shadow: none; }
.pg-also--links a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px 8px 14px; border-radius: 999px; color: #cfe0ec; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); transition: color .25s, background-color .25s, box-shadow .25s; }
.pg-also--links a svg { width: 12px; height: 12px; flex: none; opacity: .55; transition: transform .25s var(--ease-out), opacity .25s; }
.pg-also--links a:hover, .pg-also--links a:focus-visible { text-decoration: none; color: #fff; background: rgba(38, 188, 215, .12); box-shadow: inset 0 0 0 1px rgba(38, 188, 215, .6); }
.pg-also--links a:hover svg, .pg-also--links a:focus-visible svg { opacity: 1; transform: translateX(2px); }
.pg-also--links a:focus-visible { border-radius: 999px; }
/* BalanceScreen, coming soon: a quiet strip under the four included modules (WEB-142 N6) */
.pg-modsoon { margin-top: 16px; display: flex; align-items: center; gap: 14px clamp(20px, 3vw, 40px); padding: 18px 22px 18px clamp(22px, 2.4vw, 30px); border-radius: 24px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: box-shadow .5s; }
.pg-modsoon:hover { box-shadow: inset 0 0 0 1px rgba(38, 188, 215, .45); }
.pg-modsoon__logo { flex: none; display: block; height: 40px; width: auto; }
.pg-modsoon__t { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14.5px; line-height: 1.5; color: #aebdcc; }
.pg-modsoon__chip { flex: none; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .02em; line-height: 1.2; color: #6e4d00; background: #fff4d6; box-shadow: inset 0 0 0 1px rgba(254, 192, 32, .65); }
.pg-modsoon .more { flex: none; }
/* PostureScreen page #pg-rom: the ROMScreen logo leads the section (WEB-142) */
.pg-romlogo { display: flex; justify-content: center; margin-bottom: clamp(14px, 1.6vw, 20px); }
.pg-romlogo img { display: block; height: clamp(46px, 4.4vw, 60px); width: auto; }

/* ---------- PDFs fanned out of the iPad ---------- */
.pg-fan { position: relative; width: min(520px, 100%); aspect-ratio: 520 / 560; justify-self: center; }
.pg-fan .pg-d--pad { position: absolute; left: 4%; top: 2%; width: 62%; z-index: 1; }
/* Oct 17 Loom: a very fine (1 px) black stroke round every report page, so overlapping pages stay distinct */
.pg-fan__sheet { position: absolute; width: 46%; border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .9), 0 2px 4px rgba(11, 26, 46, .08), 0 30px 60px -24px rgba(11, 26, 46, .45); transition: transform .8s var(--ease-out-expo); }
.pg-fan__sheet img { width: 100%; }
.pg-fan__sheet--a { right: 14%; top: 18%; z-index: 2; transform: rotate(4deg); }
.pg-fan__sheet--b { right: 0; top: 32%; z-index: 3; transform: rotate(9deg); }
.pg-fan:hover .pg-fan__sheet--a { transform: rotate(2deg) translate3d(-6%, -4%, 0); }
.pg-fan:hover .pg-fan__sheet--b { transform: rotate(11deg) translate3d(5%, 3%, 0); }
.pg-fan__tag { position: absolute; z-index: 4; left: 10px; bottom: 10px; padding: 4px 9px; border-radius: 7px; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--ink); }
.pg-fan__tag--pro { background: var(--blue); }

/* ---------- add-on cards (two big panels) ---------- */
/* Oct 17 Loom ("this wasted space layout is horrible"): RemoteScreen (before the visit) on the left, PostureScribe.AI (after
   it) on the right. The pair runs wider than the 1200 px text wrap, and each panel is its copy beside a whole iPhone in a column
   of its own (--ph), as big as the panel allows; it used to be a small phone cropped at the panel's foot. Below 1180 px the
   panels stack and keep copy | phone; on phones each panel reads copy, then the iPhone, then Learn more, then the next panel. */
.pg-duo-cards { --duo: min(1560px, 100vw - 2 * var(--gutter)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; width: var(--duo); margin-inline: calc((100% - var(--duo)) / 2); }
.pg-panel { --pp: clamp(24px, 2.6vw, 40px); --ph: clamp(220px, 18.5vw, 330px); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--ph); gap: clamp(20px, 2.4vw, 40px); align-items: center; padding: var(--pp); border-radius: 30px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transition: transform .5s var(--ease-out), box-shadow .5s; }
.pg-panel:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(38, 188, 215, .45), 0 40px 80px -36px rgba(0, 0, 0, .8); }
.pg-panel:hover::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 6px; } /* hover stays put (styles.css, .btn) */
/* Oct 8 Loom (6:19): the add-on panels use Joe's own white masters on the dark band, no plate: PostureScribe.AI and
   RemoteScreen (logo-remotescreen-white.svg, review G1). Oct 17 Loom: the PostureScribe.AI icon is in colour like RemoteScreen's
   (logo-posturescribe-white-coloricon.svg: the colour master's icon, the white master's wordmark). One 45 px box, 37 px of
   artwork: 195 and 193 px wide, so the pair reads the same size (33 and 41 px were tried and lost the match). */
.pg-panel__logo--white { display: block; height: 45px; width: auto; max-width: 100%; object-fit: contain; object-position: 0 50%; padding: 4px 0; margin-bottom: 20px; }
.pg-panel h3 { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.18; letter-spacing: -.022em; font-weight: 700; color: #fff; }
.pg-panel p { margin-top: 12px; font-size: 14.5px; line-height: 1.55; color: #b4c3d2; }
.pg-panel__price { margin-top: 16px; font-size: 13.5px; color: #cfe0ec; }
.pg-panel__price b { color: #fff; font-size: 15px; }
.pg-panel .link, .pg-panel .more { margin-top: 18px; }
/* the copy column fills the panel and starts at its top, so the two white logos and headings share one top line; the price
   keeps 18 px under it and Learn more takes the rest, so both buttons sit level on the panel foot (final review
   addon-panel-logo-offset; the panels used to bottom-align their copy, which left the logos 39 px apart) */
.pg-panel > div:first-child { align-self: stretch; display: flex; flex-direction: column; }
.pg-panel > div:first-child > .pg-panel__logo, .pg-panel > div:first-child > .more { align-self: flex-start; }
.pg-panel > div:first-child > .pg-panel__price:last-of-type { margin-bottom: 18px; }
.pg-panel > div:first-child > .more { margin-top: auto; }
/* the whole phone, centred beside the copy (no crop at the panel's foot any more) */
.pg-panel__dev { width: var(--ph); }

/* ---------- integrations ---------- */
.pg-ints { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pg-int { display: grid; grid-template-columns: 52px 1fr; gap: 4px 16px; align-items: start; padding: 20px 22px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); color: var(--ink); transition: transform .4s var(--ease-out), box-shadow .4s; }
a.pg-int:hover { position: relative; text-decoration: none; transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(0, 128, 178, .3), var(--shadow-2); }
a.pg-int:hover::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 5px; } /* hover stays put (styles.css, .btn) */
.pg-int__g { grid-row: span 2; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--bg-3); color: var(--blue-t); overflow: hidden; }
.pg-int__g svg { width: 22px; height: 22px; }
.pg-int__g img { width: 86%; height: auto; }
.pg-int__g--img img { width: 100%; height: 100%; object-fit: cover; }
.pg-int__g--logo { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.pg-int__g--logo img { width: 92%; }
.pg-int h3 { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.pg-int p { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.pg-int small { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-3); }

/* ---------- research ---------- */
.pg-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-bottom: clamp(36px, 4.6vw, 60px); }
.pg-stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.pg-stats dd { margin: 0; font-size: clamp(50px, 6.2vw, 90px); font-weight: 800; letter-spacing: -.05em; line-height: .9; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, var(--blue), var(--sky)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pg-stats--ray dd { background-image: linear-gradient(180deg, var(--red), var(--red-l)); }
.pg-stats dt { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); max-width: 26ch; }
.pg-studies { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pg-study { display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 22px; border-radius: 22px; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); transition: transform .45s var(--ease-out), box-shadow .45s; }
a.pg-study:hover { position: relative; text-decoration: none; transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(0, 128, 178, .28), var(--shadow-2); }
a.pg-study:hover::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 6px; } /* hover stays put (styles.css, .btn) */
.pg-study__img { height: 168px; border-radius: 12px; overflow: hidden; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.pg-study__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.pg-study__img--contain img { object-fit: contain; object-position: 50% 50%; background: #fff; }
.pg-study__img--bar { display: grid; place-items: center; background: linear-gradient(150deg, #f3f7fa, #e6f2f8); }
.pg-study__img--bar span { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.pg-study__j { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-t); }
.pg-study--ray .pg-study__j { color: var(--red); }
.pg-study h3 { font-size: 16px; line-height: 1.3; letter-spacing: -.01em; font-weight: 700; }
.pg-study blockquote { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); padding-left: 12px; border-left: 2px solid var(--sky); }
.pg-study--ray blockquote { border-color: var(--red-l); }
.pg-study__go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--blue-t); }
.pg-study--ray .pg-study__go { color: var(--red); }
.pg-study__go svg { width: 13px; height: 13px; }
.pg-patent { margin-top: 26px; font-size: 13px; color: var(--ink-3); text-align: center; max-width: 90ch; margin-inline: auto; }

/* ---------- testimonials ---------- */
.pg-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pg-quote { display: flex; flex-direction: column; gap: 22px; padding: clamp(24px, 2.6vw, 32px); border-radius: 26px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.pg-quote blockquote p { font-family: var(--serif); font-size: clamp(21px, 1.85vw, 26px); line-height: 1.22; letter-spacing: -.005em; color: #fff; text-wrap: pretty; }
.pg-quote figcaption { margin-top: auto; display: flex; align-items: center; gap: 12px; font-size: 13.5px; line-height: 1.35; color: var(--dk-2); }
.pg-quote figcaption img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; }
.pg-quote figcaption b { display: block; color: #fff; font-weight: 600; }

/* horizontal scroller (reels) */
.pg-scroller { position: relative; }
.pg-scroller__vp { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 10px 0 24px; }
.pg-scroller__vp::-webkit-scrollbar { display: none; }
.pg-scroller__track { display: flex; gap: 16px; width: max-content; padding-inline: max(var(--gutter), (100vw - var(--maxw)) / 2); }
.pg-scroller__ctl { display: flex; gap: 8px; }
.pg-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }

/* ---------- YouTube facades ---------- */
.pg-vids { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pg-vids--3 { grid-template-columns: 1.6fr 1fr; grid-template-rows: auto auto; }
.pg-vids--3 > :first-child { grid-row: span 2; }
.pg-vids--1 { grid-template-columns: 1fr; }
.pg-vid figcaption { margin-top: 12px; font-size: 14px; line-height: 1.45; color: var(--ink-3); }
[data-tone="dark"] .pg-vid figcaption { color: #8fa6bd; }
.pg-vid figcaption b { color: var(--ink); font-weight: 600; }
[data-tone="dark"] .pg-vid figcaption b { color: #fff; }
.pg-yt { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 70px -30px rgba(0, 0, 0, .8); cursor: pointer; }
.pg-yt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.8); transition: transform 1.2s var(--ease-out), filter .4s; }
.pg-yt:hover img { transform: scale(1.03); filter: brightness(.92); }
.pg-yt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .7)); pointer-events: none; }
.pg-yt__play { position: absolute; z-index: 2; left: 50%; top: 50%; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .94); color: var(--ink); box-shadow: 0 16px 40px -10px rgba(0, 0, 0, .6); transition: transform .35s var(--ease-spring); }
.pg-yt__play svg { width: 24px; height: 24px; margin-left: 4px; }
.pg-yt:hover .pg-yt__play, .pg-yt:focus-visible .pg-yt__play { transform: scale(1.08); }
.pg-yt__play::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55); animation: cue-ping 2.2s var(--ease-out) infinite; }
.pg-yt__t { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 15px; text-align: left; font-size: 15px; font-weight: 600; line-height: 1.3; color: #fff; }
.pg-yt__t small { display: block; font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, .72); }
.pg-yt__btn { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; }
.pg-yt.is-on { cursor: default; }
.pg-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }

/* ---------- step players (Scribe, RemoteScreen voice, PostureRay X-ray) ---------- */
.pg-play { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.pg-steps { display: grid; margin-top: 26px; max-width: 540px; }
.pg-steps li { position: relative; border-top: 1px solid var(--line); }
[data-tone="dark"] .pg-steps li { border-color: rgba(255, 255, 255, .12); }
.pg-steps button { display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; width: 100%; text-align: left; padding: 14px 0; }
.pg-steps__n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; font-size: 12px; font-weight: 700; color: #8fa6bd; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .2); transition: background .4s, color .4s, box-shadow .4s; }
.pg-steps__t { display: grid; gap: 3px; }
.pg-steps__t b { font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; color: #8fa6bd; transition: color .4s; }
.pg-steps__t span { font-size: 14.5px; line-height: 1.5; color: #b0c1d1; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .55s var(--ease-out), opacity .4s; }
.pg-steps .is-active .pg-steps__n { background: #fff; color: var(--navy); box-shadow: 0 0 0 6px rgba(255, 255, 255, .12); }
.pg-steps .is-active .pg-steps__t b { color: #fff; }
.pg-steps .is-active .pg-steps__t span { max-height: 90px; opacity: 1; }
.pg-steps .is-done .pg-steps__n { background: rgba(38, 188, 215, .28); color: #fff; box-shadow: none; }
.pg-steps button:hover .pg-steps__t b { color: #fff; }
.pg-steps__bar { position: absolute; left: 0; right: 0; top: -1px; height: 2px; overflow: hidden; pointer-events: none; }
.pg-steps__bar::after { content: ""; position: absolute; inset: 0; background: var(--sky); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.pg-band--ray .pg-steps__bar::after { background: var(--red-l); }
.pg-band--ray .pg-steps .is-done .pg-steps__n { background: rgba(224, 80, 111, .3); }
.pg-player__dev { position: relative; justify-self: center; width: min(320px, 76vw); }
.pg-player__dev--wide { width: min(600px, 100%); }
.pg-player__back { position: absolute; z-index: 0; left: -64%; top: 9%; width: 108%; opacity: .5; transform: rotate(-4deg); pointer-events: none; }
.pg-player__front { position: relative; z-index: 2; }
.pg-player__front .device { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 80px -20px rgba(0, 0, 0, .8), 0 0 100px -20px rgba(38, 188, 215, .45); }
.pg-ctl { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.pg-state { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.pg-state i { width: 9px; height: 9px; border-radius: 50%; background: #3b8de0; box-shadow: 0 0 10px #3b8de0; animation: pg-pulse 1.6s var(--ease-in-out) infinite; }
/* the voice toggle reuses .sound from styles.css; add the "tap for sound" pulse */
.sound.is-blocked { background: var(--yellow); color: #3a2a00; }
.sound.is-blocked .sound__on { visibility: hidden; }
.sound.is-blocked .sound__off { visibility: visible; }
.sound .sound__tap { display: none; }
.sound.is-blocked .sound__t > span { visibility: hidden; }
.sound.is-blocked .sound__t > .sound__tap { display: block; visibility: visible; }
.sound.is-blocked::after { display: block; border-color: rgba(254, 192, 32, .8); }
.pg-capline { min-height: 48px; margin-top: 14px; padding: 9px 13px; border-radius: 12px; text-align: center; font-size: 14px; line-height: 1.4; font-weight: 500; color: #fff; background: rgba(3, 10, 20, .7); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); opacity: 0; transition: opacity .3s; }
.pg-capline.is-on { opacity: 1; }
.pg-capline::before { content: "CC"; display: inline-block; margin-right: 8px; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; padding: 2px 4px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); vertical-align: 2px; color: #cfe6f2; }

/* PostureRay X-ray stage */
.pg-xr { position: relative; width: 100%; aspect-ratio: 720 / 405; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 120px -40px rgba(163, 23, 55, .6); }
.pg-xr > figure { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity .9s var(--ease-in-out), transform 1.3s var(--ease-out); }
.pg-xr > figure.is-active { opacity: 1; transform: none; }
.pg-xr img { width: 100%; height: 100%; object-fit: cover; }
.pg-xr__scan { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--red-l); box-shadow: 0 0 18px 4px rgba(224, 80, 111, .6); opacity: 0; }
.pg-xr.is-in figure.is-active .pg-xr__scan { animation: pg-scan 2.8s var(--ease-in-out) .3s both; }
@keyframes pg-scan { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: calc(100% - 2px); opacity: 0; } }
.pg-xr__tag { position: absolute; z-index: 3; left: 14px; bottom: 14px; padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; color: #fff; background: rgba(0, 0, 0, .72); box-shadow: inset 0 0 0 1px rgba(224, 80, 111, .5); }
.pg-xr-note { margin-top: 12px; font-size: 12.5px; color: #8b939e; }
.pg-facts { margin-top: 30px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-radius: 18px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.pg-facts li { padding: 20px 22px; box-shadow: inset -1px 0 0 rgba(255, 255, 255, .08); }
.pg-facts b { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #ff8aa3; margin-bottom: 6px; }
.pg-facts p { font-size: 14px; line-height: 1.5; color: #c3cad3; }

/* ---------- pricing details ---------- */
.pg-hero .plans { margin-top: clamp(30px, 4vw, 52px); text-align: left; }
.pg-hero .plan { background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.pg-hero .plan--main { background: #fff; }
.pg-incl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pg-incl__col { padding: 26px 24px; border-radius: 24px; background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.pg-incl__col h3 { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sky); margin-bottom: 16px; }
.pg-incl__col ul { display: grid; gap: 11px; }
.pg-incl__col li { position: relative; padding-left: 28px; font-size: 14.5px; line-height: 1.45; color: #d3dde7; }
.pg-incl__col li svg { position: absolute; left: 0; top: 1px; width: 18px; height: 18px; color: var(--sky); }
.pg-incl__col li small { display: block; font-size: 12px; color: #8fa6bd; }
/* pricing: items with their own page link to it (WEB-142) — same text colour, a sky underline, sky on hover */
.pg-incl__col li a { color: inherit; text-decoration: underline; text-decoration-color: rgba(38, 188, 215, .55); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .2s, text-decoration-color .2s; }
.pg-incl__col li a:hover { color: #fff; text-decoration-color: var(--sky); }
/* ---------- add-ons band (Loom Oct 8 2026, "Updating PostureScribe UI and Pricing Details") ----------
   Two full-width boxes: PostureScribe.AI, then RemoteScreen and Cloud Services with the tier ladder.
   The ladder is a staircase: four tier tiles, then "Every tier" across all four, "Platinum adds" across
   Platinum and Diamond, "Diamond adds" under Diamond. Under 760 px it stacks in reading order. */
.pg-addons { display: grid; gap: 20px; max-width: 1080px; margin-inline: auto; }
.pg-box--split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px clamp(28px, 4vw, 56px); align-items: start; }
.pg-box__side { padding-left: clamp(24px, 3.4vw, 48px); box-shadow: inset 1px 0 0 var(--line); }
.pg-box .pg-box__side .plan__price { margin-top: 0; }
.pg-box__side .pg-links { margin-top: 20px; }
.pg-addons .pg-box__logo { display: block; width: auto; height: auto; max-width: 100%; max-height: 82px; margin-bottom: 20px; }
.pg-box--cloud .pg-box__logo { margin-bottom: 14px; }
.pg-box .pg-box__and { margin-bottom: 20px; font-size: 22px; gap: 10px; line-height: 1.1; color: var(--ink); }
.pg-box__and .plan__and-w { font-size: 19px; }
.pg-box__and .plan__cs { height: 64px; } /* Oct 17 2026: the Cloud Services logo, a little shorter than RemoteScreen's 82 px */
@media (max-width: 900px) {
  .pg-box--split { grid-template-columns: 1fr; }
  .pg-box__side { padding: 20px 0 0; box-shadow: inset 0 1px 0 var(--line); }
}
.pg-soon { font-size: 10px; font-weight: 700; letter-spacing: .03em; line-height: 1; text-transform: none; padding: 4px 7px; border-radius: 999px; background: #fff4d6; color: #6e4d00; box-shadow: inset 0 0 0 1px rgba(254, 192, 32, .65); }
.pg-box { padding: clamp(24px, 3vw, 36px); border-radius: 28px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); }
/* the white PostureRay and PostureScreen masters on the dark boxes, no plate (final review home-plate-ray; PostureScreen: Joe's
   Oct 9 Loom "Website Updates and Posture Screen Fixes"): 37 px tall, the same as the white add-on logos on the PostureScreen page */
.pg-darkbox > .pg-box__logo--white, .pg-copy > .pg-box__logo--white { display: block; height: 37px; width: auto; max-width: 100%; object-fit: contain; object-position: 0 50%; margin-bottom: 20px; }
.pg-box p { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
/* WEB-155 F4 (round-2 review): the RemoteScreen uses as a tag row in the pricing Cloud Services box, not one long sentence */
.pg-box .pg-box__k { margin-top: 18px; font-size: 13px; font-weight: 700; letter-spacing: .01em; color: var(--ink); }
.pg-tags { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.pg-tags li { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 5px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; line-height: 1.25; color: var(--ink); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.pg-tags .pg-tags__soon { background: #fff; box-shadow: inset 0 0 0 1px rgba(254, 192, 32, .65); }
.pg-tags .pg-soon { font-size: 11px; padding: 4px 7px; }
.pg-box .plan__price { margin-top: 18px; }
.pg-box .pg-checks { margin-top: 18px; }
.pg-note { margin-top: 18px; padding: 14px 16px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); background: rgba(254, 192, 32, .12); box-shadow: inset 3px 0 0 var(--yellow); }
/* PostureRay: documentation system + PACS note (Joe, Oct 8 2026; the WordPress page's "Documentation Advantage" copy) */
.pg-raydoc { max-width: 860px; margin: clamp(48px, 6vw, 80px) auto 0; padding: clamp(20px, 2.4vw, 28px); border-radius: 20px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.pg-raydoc > p:first-child { font-size: 15px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.pg-raydoc b { color: var(--ink); }
.pg-raydoc .pg-note { margin-top: 16px; }
.pg-tablewrap { overflow-x: auto; border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.pg-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.pg-table th, .pg-table td { padding: 14px 20px; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.pg-table tr:last-child td, .pg-table tr:last-child th { border-bottom: 0; }
.pg-table thead th { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8fa6bd; background: rgba(255, 255, 255, .04); }
.pg-table tbody th { font-weight: 600; color: #fff; }
.pg-table td { color: #d3dde7; font-variant-numeric: tabular-nums; }
.pg-table td b { color: #fff; font-size: 17px; }
.pg-price { display: grid; gap: 6px; }
.pg-price__amt { font-size: clamp(46px, 5.4vw, 72px); font-weight: 800; letter-spacing: -.045em; line-height: 1; color: #fff; }
.pg-price__amt small { display: inline-block; white-space: nowrap; font-size: 16px; font-weight: 600; letter-spacing: 0; color: #c3cad3; margin-left: 6px; }
/* phones: the label gets its own line under the figure instead of dropping its last word ("$5,999 USD one-time" / "license";
   final review ray-price-orphan-390) */
@media (max-width: 480px) { .pg-price__amt .pg-price__long { display: block; margin: 8px 0 0; } }
.pg-price__or { font-size: 15px; color: #c3cad3; }
.pg-price__or b { color: #fff; }
.pg-spec { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; font-size: 14.5px; }
.pg-spec dt { color: #8fa6bd; }
.pg-spec dd { margin: 0; color: #e3eaf1; }
.pg-darkbox { padding: clamp(24px, 3vw, 36px); border-radius: 28px; background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.pg-darkbox h3 { font-size: 18px; letter-spacing: -.015em; color: #fff; margin-bottom: 18px; }
.pg-darkbox .pg-checks { margin-top: 0; }
/* the same box on a white band (getBox({ light: true }), SitScreen "Who it's for"): white card, colour logo, dark text */
.pg-box--get > .pg-box__logo { display: block; height: 37px; width: auto; max-width: 100%; object-fit: contain; object-position: 0 50%; margin-bottom: 20px; }
.pg-box--get .pg-spec dt { color: var(--ink-3); }
.pg-box--get .pg-spec dd { color: var(--ink); }
.pg-benefits { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pg-benefits li { padding: 16px 18px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.pg-benefits li b { display: block; margin-bottom: 4px; font-size: 15px; color: var(--ink); }
.pg-benefits li:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ---------- FAQ + knowledge base ---------- */
.pg-faq .faq__head .h2 { max-width: 14ch; }
.pg-kb-wrap { margin-top: clamp(64px, 8vw, 110px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.pg-kb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pg-kb a { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 64px; padding: 13px 16px; border-radius: 16px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-size: 14.5px; font-weight: 600; line-height: 1.32; transition: transform .35s var(--ease-out), background .35s, box-shadow .35s; }
.pg-kb a:hover { position: relative; text-decoration: none; transform: translateY(-2px); background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 128, 178, .3), var(--shadow-1); }
.pg-kb a:hover::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 4px; } /* hover stays put (styles.css, .btn) */
.pg-kb small { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.pg-kb svg { flex: none; width: 15px; height: 15px; color: var(--blue-t); transition: transform .3s var(--ease-out); }
.pg-kb a:hover svg { transform: translateX(3px); }

/* ---------- closing band tweaks ---------- */
.pg-close .close__h { font-size: clamp(32px, 5.6vw, 78px); }
.pg-close .close__cta .btn { margin-bottom: 4px; }
/* Oct 8 Loom (0:59): "with PostureRay®." is "the same blue" as the hero headline (it was a red → pink gradient) */
.pg-close--ray .close__b { background-image: none; color: var(--ray-blue); -webkit-text-fill-color: var(--ray-blue); }
.pg-close--ray .aurora .a1 { opacity: .3; }
.pg-close--ray .aurora .a2 { opacity: .45; }
.pg-close__more { font-size: 14.5px; }
.pg-close__more .link { margin-inline: 9px; } /* even spacing, so wrapped lines stay centred (four links since WEB-142) */
/* pricing close (WEB-159, Joe Oct 10 2026): what the $59.99 PostureScreen® download does not include */
.pg-close .close__p:has(+ .pg-close__out) { max-width: 640px; text-wrap: balance; }
.pg-close .close__h:has(~ .pg-close__out) > span { text-wrap: balance; } /* phones: no lone "with" / "use." */
.pg-close__out { margin-top: 28px; width: min(100%, 860px); padding: 18px 24px 20px; border-radius: 22px; background: rgba(255, 255, 255, .64); box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -30px rgba(0, 64, 110, .45); }
.pg-close__k { margin-bottom: 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.pg-close__out ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; text-align: left; }
.pg-close__out li { position: relative; padding-left: 32px; font-size: 14px; line-height: 1.42; color: var(--ink-2); }
.pg-close__out li svg { position: absolute; left: 0; top: 0; width: 22px; height: 22px; padding: 5px; border-radius: 50%; background: rgba(11, 26, 46, .07); color: var(--ink-2); }
.pg-close__out b { display: block; font-weight: 650; color: var(--ink); }
.pg-close__out a { color: var(--blue-t); }
@media (max-width: 760px) { .pg-close__out { padding: 18px 20px; } .pg-close__out ul { grid-template-columns: 1fr; gap: 14px; } }

/* ---------- scroll reveal (pages.js adds .is-in) ---------- */
html.pg-js [data-rv] { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity .85s var(--ease-out) var(--d, 0ms), transform .95s var(--ease-out) var(--d, 0ms); }
html.pg-js [data-rv="fade"] { transform: none; }
html.pg-js [data-rv="scale"] { transform: scale(.95); }
html.pg-js [data-rv="tilt"] { transform: perspective(1400px) translate3d(0, 40px, 0) rotateX(14deg); transform-origin: 50% 100%; }
html.pg-js [data-rv].is-in { opacity: 1; transform: none; }

/* ---------- text-only heroes (research, notice, contact) ---------- */
.pg-hero--text .pg-hero__grid { grid-template-columns: minmax(0, 1fr); }
.pg-hero--text .pg-hero__sub { max-width: 64ch; }
.pg-hero--text .pg-hero__ctas { flex-wrap: wrap; gap: 12px 26px; }

/* ---------- PostureRay call-outs: nine doctors, smaller serif so the 3x3 grid stays even ---------- */
.pg-quotes--grid .pg-quote blockquote p { font-size: clamp(18px, 1.42vw, 21px); line-height: 1.28; }

/* ---------- research page ---------- */
.pg-study__cite { font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.pg-cites-groups { display: grid; gap: clamp(28px, 3.4vw, 44px); }
.pg-cites-group h3 { display: flex; align-items: baseline; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 18px; letter-spacing: -.015em; }
.pg-cites-group h3 span { font-size: 12px; font-weight: 700; color: var(--red); background: rgba(163, 23, 55, .08); border-radius: 999px; padding: 2px 9px; }
.pg-cites { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); counter-reset: cite; }
.pg-cites li { position: relative; padding: 14px 0 14px 34px; border-bottom: 1px solid var(--line); counter-increment: cite; break-inside: avoid; }
.pg-cites li::before { content: counter(cite); position: absolute; left: 0; top: 15px; width: 24px; font-size: 12px; font-weight: 700; color: var(--ink-3); text-align: right; }
.pg-cites p { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.pg-cites blockquote { margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--red-l); font-size: 14px; line-height: 1.5; color: var(--ink); font-style: italic; }
.pg-cites a { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--red); }
.pg-cites a svg { width: 12px; height: 12px; }
.pg-cites a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pg-cites--cols { margin-top: clamp(24px, 3vw, 36px); }

/* ---------- notice page ---------- */
.pg-notice { display: grid; gap: clamp(28px, 4vw, 48px); max-width: 860px; margin-inline: auto; }
.pg-notice__item { padding: clamp(24px, 3.4vw, 44px); border-radius: 28px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.pg-notice__item--alert { background: #fff6f7; box-shadow: inset 0 0 0 1px rgba(163, 23, 55, .18); }
.pg-notice__item .eyebrow { color: var(--red); }
.pg-notice__item .h2 { margin-top: 10px; font-size: clamp(26px, 2.6vw, 36px); }
.pg-prose { margin-top: 18px; font-size: 16.5px; line-height: 1.65; color: var(--ink-2); }
.pg-prose > * + * { margin-top: .9em; }
.pg-prose b { color: var(--ink); }
.pg-prose ul { padding-left: 1.2em; list-style: disc; }
.pg-prose li + li { margin-top: .5em; }
.pg-prose a { color: var(--blue-t); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.pg-notice__versions { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 !important; list-style: none !important; }
.pg-notice__versions li { margin: 0 !important; padding: 8px 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(163, 23, 55, .25); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- contact page + form ---------- */
.pg-contact { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.pg-contact__dl { margin-top: 18px; display: grid; gap: 18px; }
.pg-contact__dl div { padding-top: 16px; border-top: 1px solid var(--line); }
.pg-contact__dl dt { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.pg-contact__dl dd { margin: 6px 0 0; font-size: 16px; line-height: 1.55; color: var(--ink); }
.pg-contact__dl a { color: var(--blue-t); font-weight: 600; }
.pg-thanks { max-width: 640px; } /* /contact/thanks/ (WEB-134) */
.cf { padding: clamp(22px, 3vw, 36px); border-radius: 28px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); scroll-margin-top: calc(var(--hdr, 72px) + 16px); }
.cf .pg-h3 { margin-bottom: 18px; }
.cf__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.cf__f { display: grid; gap: 6px; margin-bottom: 16px; align-content: start; } /* start: a hint in one column mustn't stretch the other's input */
.cf__f label { font-size: 14px; font-weight: 600; color: var(--ink); }
.cf__opt { font-weight: 400; color: var(--ink-3); }
.cf input, .cf select, .cf textarea { width: 100%; min-height: 46px; padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(11, 26, 46, .18); background: #fff; font: inherit; font-size: 16px; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.cf textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.cf select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.cf input:focus, .cf select:focus, .cf textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(38, 188, 215, .35); }
.cf [aria-invalid="true"] { border-color: #c0392b; }
/* phone type, call/text permission (Joe, Oct 10 2026) */
.cf__set { border: 0; padding: 0; min-width: 0; margin: 0 0 16px; }
.cf__set legend { padding: 0; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--ink); }
.cf__seg { display: flex; gap: 8px; }
.cf__seg label { flex: 1 1 auto; white-space: nowrap; position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(11, 26, 46, .18); background: #fff; font-size: 15px; font-weight: 500; line-height: 1.25; text-align: center; color: var(--ink); cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s; }
.cf__seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; min-height: 0; cursor: pointer; }
.cf__seg label:has(input:checked) { border-color: var(--blue); background: #eaf6fb; box-shadow: inset 0 0 0 1px var(--blue); font-weight: 600; }
.cf__seg label:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(38, 188, 215, .35); }
.cf__set[aria-invalid="true"] .cf__seg label { border-color: #c0392b; }
.cf__ok { padding: 14px 16px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.cf__ok legend { float: left; width: 100%; margin-bottom: 10px; }
.cf__ok legend + * { clear: both; }
.cf .cf__check { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--ink); cursor: pointer; }
.cf .cf__check input { flex: none; width: 20px; height: 20px; min-height: 0; margin: 1px 0 0; padding: 0; accent-color: var(--blue); cursor: pointer; }
.cf .cf__check.is-off { color: var(--ink-3); cursor: not-allowed; }
.cf__check.is-off input { cursor: not-allowed; }
.cf__terms { margin: 2px 0 0 30px; font-size: 12.5px; }
.cf__private { margin-top: 8px; color: var(--ink-2); } /* "Your mobile number stays private" (Joe, Oct 10): its own line */
.cf .cf__news { margin: 2px 0 18px; font-size: 14.5px; font-weight: 400; color: var(--ink-2, var(--ink)); } /* newsletter opt-in, just above Send */
.cf__terms a, .cf__sugg a { color: var(--blue-t); text-decoration: underline; text-underline-offset: 2px; }
.cf__hint[data-warn] { color: #b54708; font-weight: 600; }
.cf__fix { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--blue-t); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.cf__hint { font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.cf__err { font-size: 13px; font-weight: 600; color: #b42318; }
.cf__hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cf__captcha iframe { margin-bottom: 14px; } /* Cloudflare Turnstile: shown only when it needs a click (contact.js) */
.cf__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 6px; }
.cf__foot .btn { background: var(--cta-fill); color: #fff; box-shadow: var(--cta-sh); } /* the CTA red (styles.css) */
.cf__foot .btn:hover { box-shadow: var(--cta-sh-hover); }
.cf__foot .btn:active { background-position: 0 100%; }
.cf__foot .btn[disabled] { opacity: .6; cursor: progress; }
.cf__fine { font-size: 13px; color: var(--ink-3); }
.cf__fine a { color: var(--blue-t); text-decoration: underline; text-underline-offset: 2px; }
.cf__status { margin-top: 16px; padding: 14px 16px; border-radius: 14px; font-size: 15px; line-height: 1.5; }
.cf__status[data-state="ok"] { background: #ecfdf3; color: #05603a; box-shadow: inset 0 0 0 1px #abefc6; }
.cf__status[data-state="err"] { background: #fef3f2; color: #912018; box-shadow: inset 0 0 0 1px #fecdca; }
.cf__status a { color: inherit; font-weight: 700; text-decoration: underline; }

@media (max-width: 900px) {
  .pg-cites, .pg-contact { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cf__row { grid-template-columns: 1fr; }
}

/* ---------- module pages: LeanScreen + SquatScreen (Joe, Oct 8 2026 Loom, WEB-138) ---------- */
/* hero: "Included with PostureScreen" (Joe: "they need to know these … are included") */
/* Joe, Oct 9 (WEB-142 N7): "Included with PostureScreen® subscription", directly above the App Store button. The row is a
   size container: when the full pill would not fit on one line, its second part and separator drop out. */
.pg-pillrow { justify-self: stretch; container-type: inline-size; margin-top: clamp(22px, 2.6vw, 30px); }
.pg-pillrow + .pg-hero__ctas { margin-top: 14px; }
@container (max-width: 520px) { .pg-pill__sep, .pg-pill__sep + span { display: none; } }
.pg-pill { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 16px 6px 6px; border-radius: 999px; font-size: 13.5px; line-height: 1.3; font-weight: 500; color: var(--ink-2); background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(0, 128, 178, .24), 0 12px 28px -18px rgba(11, 26, 46, .5); }
.pg-pill > svg { flex: none; width: 24px; height: 24px; padding: 6px; border-radius: 50%; color: #fff; background: linear-gradient(160deg, #1aa6d6, var(--blue)); box-shadow: 0 4px 10px -4px rgba(0, 128, 178, .7); }
.pg-pill b { font-weight: 700; color: var(--ink); }
.pg-pill__sep { width: 1px; height: 14px; background: var(--line-2); }
/* hero stages: iPad behind, one iPhone in front (the LeanScreen iPhone is the one Joe singled out, so it is large) */
.pg-st-lean .pg-d--pad, .pg-st-squat .pg-d--pad { left: 0; top: 1%; width: 66%; transform: rotateY(-10deg) rotateX(3deg) rotateZ(-.6deg); }
.pg-st-lean .pg-d--p1, .pg-st-squat .pg-d--p1 { left: 58%; top: 14%; width: 36%; z-index: 2; transform: rotateY(-7deg) rotateZ(2deg); }

/* "describe the data": metric cards either side of one device, with leader lines toward it */
.pg-anat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 290px) minmax(0, 1fr); gap: clamp(28px, 4.4vw, 68px); align-items: center; }
.pg-anat__col { display: grid; gap: clamp(14px, 1.6vw, 20px); }
.pg-anat__dev { position: relative; width: 100%; justify-self: center; }
.pg-metric { position: relative; padding: 20px 22px 22px; border-radius: 22px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); transition: transform .45s var(--ease-out), box-shadow .45s, background .45s; }
.pg-metric:hover { transform: translateY(-3px); background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 128, 178, .25), var(--shadow-2); }
.pg-metric:hover::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 5px; } /* hover stays put (styles.css, .btn); ::after is the leader line */
.pg-anat__col--l .pg-metric { text-align: right; }
.pg-metric::after { content: ""; position: absolute; top: 50%; width: clamp(18px, 3vw, 46px); height: 1px; pointer-events: none; }
.pg-anat__col--l .pg-metric::after { left: 100%; background: linear-gradient(90deg, rgba(38, 188, 215, .7), rgba(38, 188, 215, 0)); }
.pg-anat__col--r .pg-metric::after { right: 100%; background: linear-gradient(270deg, rgba(38, 188, 215, .7), rgba(38, 188, 215, 0)); }
.pg-metric__k { display: block; margin-bottom: 10px; font-size: clamp(28px, 2.5vw, 36px); font-weight: 800; letter-spacing: -.04em; line-height: 1; background: linear-gradient(180deg, var(--blue), var(--sky)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pg-metric__ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 14px; color: var(--blue-t); background: linear-gradient(160deg, #e0f3fa, #fff); box-shadow: inset 0 0 0 1px rgba(0, 128, 178, .18); }
.pg-anat__col--l .pg-metric__ic { margin-left: auto; }
.pg-metric__ic svg { width: 20px; height: 20px; }
.pg-metric h3 { font-size: 17px; line-height: 1.25; letter-spacing: -.015em; font-weight: 700; }
.pg-metric p { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
[data-tone="dark"] .pg-metric { background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
[data-tone="dark"] .pg-metric:hover { background: rgba(255, 255, 255, .075); box-shadow: inset 0 0 0 1px rgba(38, 188, 215, .45), 0 30px 60px -30px rgba(0, 0, 0, .8); }
[data-tone="dark"] .pg-metric h3 { color: #fff; }
[data-tone="dark"] .pg-metric p { color: #aebdcc; }
[data-tone="dark"] .pg-metric__k { background-image: linear-gradient(180deg, #7fdcef, var(--sky)); }
.pg-anat + .pg-also { margin-top: clamp(32px, 4vw, 52px); }
[data-tone="light"] .pg-also li { color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
[data-tone="light"] .pg-also li:first-child { color: var(--blue-t); box-shadow: none; }
/* plain "Also" lists (no destinations) are a quiet inline list with a small dot marker per item, not pills, so only
   the real link chips (.pg-also--links) look tappable (WEB-142 QA #26). Each dot belongs to its item, so a wrapped
   row still reads right. */
.pg-also:not(.pg-also--links) { gap: 6px 24px; align-items: center; }
.pg-also:not(.pg-also--links) li { padding: 2px 0; border-radius: 0; box-shadow: none; font-weight: 500; }
.pg-also:not(.pg-also--links) li:first-child { padding: 2px 0; font-weight: 600; }
.pg-also:not(.pg-also--links) li:nth-child(n+2)::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 9px; border-radius: 50%; background: var(--sky); opacity: .7; vertical-align: .2em; }
[data-tone="light"] .pg-also:not(.pg-also--links) li:nth-child(n+2)::before { background: var(--blue-t); opacity: .55; }
/* on a phone: a short centred stack under the label */
@media (max-width: 600px) {
  .pg-also:not(.pg-also--links) { flex-direction: column; gap: 4px; text-align: center; }
  .pg-also:not(.pg-also--links) li:nth-child(n+2)::before { content: none; }
}
/* an App Store still as the centre "device" */
.pg-shot { border-radius: 26px; overflow: hidden; background: #e7f3fa; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 90px -30px rgba(0, 0, 0, .85), 0 0 120px -30px rgba(38, 188, 215, .45); }
.pg-shot img { display: block; width: 100%; height: auto; }

/* the Sensors 2020 paper: a typographic "cover" and the 2D findings */
.pg-paper { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); border-radius: 30px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-2); }
.pg-paper__cover { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 16px; padding: clamp(28px, 3.6vw, 52px); color: #fff; background: radial-gradient(90% 70% at 0% 0%, rgba(38, 188, 215, .26), transparent 62%), linear-gradient(165deg, #0d2747, #071a30 72%); }
.pg-paper__cover::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(159, 227, 240, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(159, 227, 240, .07) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 90%); mask-image: linear-gradient(180deg, #000, transparent 90%); }
.pg-paper__j { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sky); }
.pg-paper__t { font-family: var(--serif); font-weight: 400; font-size: clamp(25px, 2.3vw, 34px); line-height: 1.14; letter-spacing: -.005em; color: #fff; text-wrap: pretty; }
.pg-paper__a { font-size: 14px; line-height: 1.45; color: #b9c6d3; }
.pg-paper__c { margin-top: auto; padding-top: 8px; font-size: 13px; color: #8fa6bd; font-variant-numeric: tabular-nums; }
.pg-paper__tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #d4f1f8; background: rgba(38, 188, 215, .14); box-shadow: inset 0 0 0 1px rgba(38, 188, 215, .38); }
.pg-paper__tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); }
.pg-paper__body { display: grid; align-content: start; gap: 24px; padding: clamp(26px, 3.4vw, 48px); }
.pg-paper__k { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-t); }
.pg-finds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.pg-find { padding-top: 16px; border-top: 1px solid var(--line); }
.pg-find dt { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.pg-find__n { display: block; margin-bottom: 10px; font-size: clamp(38px, 3.6vw, 54px); font-weight: 800; letter-spacing: -.05em; line-height: .95; text-transform: none; background: linear-gradient(180deg, var(--blue), var(--sky)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-bottom: .04em; }
.pg-find dd { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.pg-paper .pg-btnrow { margin-top: 0; }
.pg-paper .pg-fine { margin-top: 0; }

/* two iPhones (the RemoteScreen beat on the module pages) */
.pg-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 34px); width: min(500px, 100%); justify-self: center; align-items: start; }
.pg-pair > :nth-child(2) { margin-top: clamp(36px, 5vw, 64px); }
.pg-pair figcaption { margin-top: 14px; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.pg-pair figcaption small { display: block; font-weight: 500; color: var(--ink-3); }

/* SquatScreen results, view by view (Joe's Oct 14 screenshots): AP / Lateral / Posterior tabs switch one iPad's stacked
   screens (devices.css .is-active crossfade) and the note under the tabs (pages.js [data-sqv]) */
.pg-sqv__tabs { display: flex; width: fit-content; max-width: 100%; gap: 4px; margin-top: 26px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 1px var(--line); }
.pg-sqv__tab { appearance: none; border: 0; margin: 0; padding: 10px 18px; border-radius: 999px; background: transparent; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.1; color: var(--ink-2); cursor: pointer; transition: background .25s, color .25s; }
.pg-sqv__tab:hover { color: var(--ink); }
.pg-sqv__tab[aria-pressed="true"] { background: var(--ink); color: #fff; }
.pg-sqv__tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.pg-sqv__notes { display: grid; margin-top: 20px; }
.pg-sqv__note { grid-area: 1 / 1; padding: 18px 20px 20px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s linear .35s; }
.pg-sqv__note.is-active { opacity: 1; visibility: visible; transition: opacity .35s; }
.pg-sqv__note h3 { font-size: 16px; line-height: 1.25; letter-spacing: -.01em; font-weight: 700; color: var(--ink); }
.pg-sqv__note p { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.pg-sqv .pg-media--pad { width: min(540px, 100%); }
@media (prefers-reduced-motion: reduce) { .pg-sqv__note, .pg-sqv__note.is-active { transition: none; } }
/* Joe's Oct 14 Loom "Make SquatScreen Scroll to Snap Features": like the homepage's 4-view exam, the scene locks in place and
   scrolling steps AP → Lateral → Posterior (pages.js [data-sqv-scene]), each view about 75vh of scroll, with the shared
   "Keep scrolling" HUD (styles.css .pinhud). The iPad shrinks to the height left so the whole scene fits while pinned. Only where
   two columns fit and motion is allowed; elsewhere the tabs switch the views and the HUD stays hidden. */
.pg-sqv-scene .pinhud { display: none; }
@media (min-width: 901px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  .pg-sqv-scene { height: calc(100vh - var(--hdr) + 150vh); }
  .pg-sqv-scene__pin { position: sticky; top: var(--hdr); min-height: calc(100vh - var(--hdr)); display: grid; align-content: center; padding: 24px 0 64px; }
  .pg-sqv-scene .pg-sqv .pg-media--pad { width: min(540px, 100%, calc((100vh - var(--hdr) - 120px) * .74)); }
  .pg-sqv-scene .pinhud { display: flex; bottom: 14px; }
}
.pg-copy__logo { display: block; height: 34px; width: auto; margin-bottom: 20px; }

/* "What's included": included modules / add-on subscriptions / separate software */
/* included on the left; add-on subscriptions and separate software stacked on the right (as on the homepage) */
.pg-plan3 { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.pg-plan3__side { display: grid; grid-template-rows: auto 1fr; gap: 16px; min-width: 0; }
.pg-plan3__col { display: flex; flex-direction: column; gap: 18px; padding: clamp(24px, 2.8vw, 34px); border-radius: 28px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); }
.pg-plan3__col--in { background: linear-gradient(180deg, #fff, #f4fafd); box-shadow: inset 0 0 0 2px rgba(0, 128, 178, .5), 0 30px 70px -36px rgba(0, 128, 178, .55); }
.pg-plan3__col--sep { background: rgba(255, 255, 255, .6); }
.pg-plan3__k { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.pg-plan3__col--in .pg-plan3__k { color: var(--blue-t); }
.pg-plan3__logo { height: 34px; width: auto; max-width: 100%; object-fit: contain; object-position: 0 50%; }
.pg-plan3__list { display: grid; gap: 2px; margin-inline: -10px; }
.pg-plan3__list li { display: flex; gap: 12px; padding: 9px 10px; border-radius: 14px; }
.pg-plan3__list li > svg { flex: none; width: 20px; height: 20px; padding: 3px; margin-top: 1px; border-radius: 50%; background: rgba(0, 128, 178, .1); color: var(--blue-t); }
.pg-plan3__list b { font-size: 15px; font-weight: 600; color: var(--ink); }
.pg-plan3__list a { color: inherit; }
.pg-plan3__list a:hover { text-decoration: none; }
.pg-plan3__list a:hover b { color: var(--blue-t); }
.pg-plan3__list small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.pg-plan3__list .is-here { background: rgba(38, 188, 215, .12); box-shadow: inset 0 0 0 1px rgba(0, 128, 178, .22); }
.pg-plan3__list .is-here > svg { background: var(--blue); color: #fff; }
.pg-here { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--blue); vertical-align: 2px; }
.pg-plan3__price { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.pg-plan3__col .pg-btnrow { margin-top: 0; }
.pg-plan3__item { display: grid; gap: 12px; justify-items: start; }
.pg-plan3__item + .pg-plan3__item { padding-top: 20px; border-top: 1px solid var(--line); }
.pg-plan3__item .pg-plan3__logo { height: 28px; }
.pg-plan3__brand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
/* "+ Cloud Services" beside the RemoteScreen logo, the logo kept at its size (Joe, Oct 9 Loom "Website Updates and Posture
   Screen Fixes", 4:47) */
.pg-plan3__plus { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1; color: var(--ink); white-space: nowrap; }
.pg-plan3__cs { display: block; height: 30px; width: auto; } /* Oct 17 2026: the Cloud Services logo (no tagline at this size) replaces the plain text */
.pg-plan3__brand .pg-here { margin-left: 0; vertical-align: 0; }
/* the add-on or PostureRay entry of the page you are on: the same tint as the list's .is-here row */
.pg-plan3__item.is-here { position: relative; isolation: isolate; }
.pg-plan3__item.is-here::before { content: ""; position: absolute; z-index: -1; inset: -12px -14px; border-radius: 16px; background: rgba(38, 188, 215, .12); box-shadow: inset 0 0 0 1px rgba(0, 128, 178, .22); }
.pg-plan3__item + .pg-plan3__item.is-here::before { top: 8px; }
.pg-plan3__item.is-here + .pg-plan3__item { margin-top: 12px; }
.pg-plan3__item p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }

@media (max-width: 1100px) {
  .pg-paper { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .pg-plan3 { grid-template-columns: 1fr; }
  .pg-plan3__side { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
}
@media (max-width: 900px) {
  .pg-anat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .pg-anat__dev { grid-column: 1 / -1; order: -1; width: min(280px, 72%); margin-bottom: 18px; }
  .pg-anat__col--l .pg-metric { text-align: left; }
  .pg-anat__col--l .pg-metric__ic { margin-left: 0; }
  .pg-metric::after { display: none; }
  .pg-pair { width: min(440px, 92%); }
}
@media (max-width: 700px) {
  .pg-anat, .pg-finds, .pg-plan3, .pg-plan3__side { grid-template-columns: 1fr; }
  .pg-anat__dev { grid-column: auto; }
  .pg-metric { padding: 18px 18px 20px; }
  .pg-pair { gap: 12px; }
  .pg-pair > :nth-child(2) { margin-top: 28px; }
  .pg-pair figcaption { font-size: 12.5px; }
}
/* the five SquatScreen screens: when the row of five folds to two columns, the fifth card spans the row */
@media (max-width: 1180px) and (min-width: 701px) {
  .pg-cards--screens > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .pg-pill { font-size: 12.5px; padding-right: 12px; }
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .pg-cards--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-player__back { display: none; }
  .pg-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-duo-cards { grid-template-columns: 1fr; width: auto; margin-inline: 0; } /* stacked, RemoteScreen first: copy | phone */
  .pg-panel { --ph: clamp(200px, 27vw, 290px); }
  /* stacked, the copy sits centred beside the phone with Learn more right under it (no level buttons to keep) */
  .pg-panel > div:first-child { align-self: center; }
  .pg-panel > div:first-child > .more { margin-top: 26px; }
  .pg-panel > div:first-child > .pg-panel__price:last-of-type { margin-bottom: 0; }
}
@media (max-width: 1000px) {
  .pg-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-ints, .pg-studies, .pg-quotes, .pg-incl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-kb { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-glance { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .pg-hero__grid, .pg-split, .pg-split--wide, .pg-play { grid-template-columns: 1fr; }
  .pg-hero__copy { justify-items: center; text-align: center; }
  .pg-crumbs { justify-self: center; }
  .pg-crumbs ol { justify-content: center; }
  .pg-h1__logo { margin-inline: auto; }
  .pg-hero__ctas { justify-content: center; }
  .pg-hero__sub, .pg-hero__note { margin-inline: auto; }
  .pg-stage { width: min(440px, 92%); margin-top: 8px; }
  .pg-st-ray { width: min(560px, 100%); }
  .pg-st-rs { width: min(520px, 88%); }
  .pg-split--rev > .pg-copy { order: 0; }
  .pg-split--vid { grid-template-columns: 1fr; }
  .pg-media--duo { width: min(400px, 84%); }
  .pg-duo-cards, .pg-cards, .pg-cards--2 { grid-template-columns: 1fr; }
  .pg-cards--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-vids, .pg-vids--3 { grid-template-columns: 1fr; }
  .pg-vids--3 > :first-child { grid-row: auto; }
  .pg-facts { grid-template-columns: 1fr; }
  .pg-facts li { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08); }
  .pg-player__back { display: none; }
}
@media (max-width: 700px) {
  .pg-glance dl, .pg-pts, .pg-ints, .pg-studies, .pg-quotes, .pg-incl, .pg-kb, .pg-mods, .pg-cards--4, .pg-cards--5, .pg-benefits { grid-template-columns: 1fr; }
  .pg-stats { gap: 12px; }
  .pg-mod__img { aspect-ratio: 16 / 11; }
  .pg-modsoon { flex-direction: column; align-items: flex-start; padding: 22px 22px 24px; }
  .pg-modsoon__logo { height: 36px; max-width: 100%; }
  .pg-stats dd { font-size: 42px; }
  .pg-stats dt { font-size: 12.5px; }
  .pg-views { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .pg-views figcaption { left: 4px; bottom: 4px; font-size: 10px; padding: 2px 5px; }
  .pg-trio { gap: 10px; }
  .pg-trio > :nth-child(2) { transform: translateY(-14px); }
  .pg-trio figcaption { font-size: 11.5px; }
  .pg-trio figcaption small { font-size: 10.5px; }
  .pg-chip { font-size: 11px; padding: 6px 10px 6px 9px; }
  .pg-hero .badge--hero img { width: 156px; }
  /* one column: the copy, then the iPhone, then Learn more */
  .pg-panel { grid-template-columns: 1fr; gap: 0; }
  .pg-panel > div:first-child { display: contents; }
  .pg-panel__dev { order: 1; justify-self: center; width: min(270px, 72%); margin-top: 30px; }
  .pg-panel > div:first-child > .more { order: 2; margin-top: 30px; justify-self: start; }
  .pg-panel > div:first-child > .pg-panel__logo { justify-self: start; }
  .pg-table th, .pg-table td { padding: 12px 14px; font-size: 14px; }
  .pg-yt__play { width: 58px; height: 58px; margin: -29px 0 0 -29px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html.pg-js [data-rv] { opacity: 1; transform: none; transition: none; }
  .pg-chip i, .pg-wavechip span b, .pg-state i, .pg-yt__play::after, .pg-xr__scan { animation: none !important; }
  .pg-card, .pg-mod, .pg-panel, .pg-study, .pg-kb a, .pg-views figure, .pg-fan__sheet, .pg-metric { transition: none; }
}

/* ---------- research page switch (WEB-143; Joe's Oct 9 Loom): PostureScreen research ⇄ PostureRay research ----------
   build-pages.mjs researchSwitch(): a two-link pill under the breadcrumbs of both research pages. */
.pg-switch { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin: 0 0 clamp(16px, 2vw, 24px); border-radius: 999px; background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px var(--line), 0 10px 26px -18px rgba(11, 26, 46, .45); }
.pg-switch__a { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 15px; border-radius: 999px; font-size: 13.5px; font-weight: 650; letter-spacing: -.005em; color: var(--ink-2); white-space: nowrap; transition: background .25s, color .25s, box-shadow .25s; }
.pg-switch__a i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px rgba(0, 128, 178, .14); }
.pg-switch__a--ray i { background: var(--red); box-shadow: 0 0 0 3px rgba(224, 22, 47, .12); }
.pg-switch__a svg { width: 13px; height: 13px; transition: transform .25s var(--ease-out); }
.pg-switch__a:hover { text-decoration: none; color: var(--ink); background: rgba(11, 26, 46, .05); }
.pg-switch__a:hover svg { transform: translateX(2px); }
.pg-switch__a.is-on { color: #fff; background: var(--blue-t); box-shadow: 0 6px 16px -8px rgba(0, 116, 162, .7); }
.pg-switch__a--ray.is-on { background: var(--red); box-shadow: 0 6px 16px -8px rgba(224, 22, 47, .6); }
.pg-switch__a.is-on i { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }
@media (max-width: 480px) {
  .pg-switch { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-radius: 20px; }
  .pg-switch__a { justify-content: center; padding: 6px 10px; font-size: 12.5px; white-space: normal; text-align: center; line-height: 1.2; }
}
@media (prefers-reduced-motion: reduce) { .pg-switch__a, .pg-switch__a svg { transition: none; } }

/* ---------- RemoteScreen "Your clients capture. You decide." (WEB-155, Joe's Oct 10 Loom F4) ----------
   build-pages.mjs pageRemote() #pg-verified: three steps (client → you → your practice), the middle one, "You", set apart
   in navy because that is the message: results reach the professional first, never the client. Then the uses as chips. */
.pg-vf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vf-gap); }
.pg-vf__step { position: relative; display: flex; flex-direction: column; padding: clamp(24px, 2.4vw, 34px) clamp(22px, 2.2vw, 30px) clamp(26px, 2.6vw, 34px); border-radius: 26px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.pg-vf__n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 15px; font-weight: 750; color: var(--blue-t); background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 128, 178, .22); }
.pg-vf__k { margin-top: 22px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--blue-t); }
.pg-vf__step h3 { margin-top: 6px; font-size: clamp(22px, 2.1vw, 28px); line-height: 1.12; letter-spacing: -.025em; font-weight: 750; color: var(--ink); text-wrap: balance; }
.pg-vf__step p:last-child { margin-top: 12px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
/* the arrow between steps, sitting in the gap */
.pg-vf { --vf-gap: clamp(14px, 1.8vw, 24px); }
.pg-vf__step:not(:last-child)::after, .pg-vf__step:not(:last-child)::before { content: ""; position: absolute; z-index: 2; top: 50%; right: calc(-1 * var(--vf-gap) / 2); pointer-events: none; }
.pg-vf__step:not(:last-child)::after { width: 30px; height: 30px; margin: -15px -15px 0 0; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px #fff, 0 8px 18px -8px rgba(0, 116, 162, .7); }
.pg-vf__step:not(:last-child)::before { z-index: 3; width: 7px; height: 7px; margin: -4.5px -3px 0 0; border: solid #fff; border-width: 2px 2px 0 0; transform: rotate(45deg); }
.pg-vf__step--you { background: linear-gradient(160deg, #24407a 0%, var(--navy) 58%, #142446 100%); box-shadow: 0 30px 60px -34px rgba(11, 26, 46, .65), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.pg-vf__step--you .pg-vf__n { color: #fff; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.pg-vf__step--you .pg-vf__k { color: var(--sky); }
.pg-vf__step--you h3 { color: #fff; }
.pg-vf__step--you p:last-child { color: rgba(255, 255, 255, .8); }
.pg-uses { margin-top: clamp(44px, 5vw, 72px); display: grid; justify-items: center; text-align: center; }
.pg-uses__h { font-size: clamp(20px, 1.9vw, 24px); line-height: 1.2; letter-spacing: -.02em; font-weight: 700; color: var(--ink); text-wrap: balance; }
.pg-uses__list { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 980px; }
.pg-uses__list li { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 16px 8px 13px; border-radius: 999px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; color: var(--ink); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); text-align: left; }
.pg-uses__list li > svg { flex: none; width: 16px; height: 16px; color: var(--blue-t); }
.pg-uses__list .pg-uses__soon { background: #fff; box-shadow: inset 0 0 0 1px rgba(254, 192, 32, .65); }
.pg-uses__list .pg-soon { font-size: 11.5px; padding: 5px 9px; }
@media (max-width: 900px) {
  .pg-vf { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .pg-vf { --vf-gap: 22px; }
  .pg-vf__step:not(:last-child)::after, .pg-vf__step:not(:last-child)::before { top: auto; right: auto; left: 50%; bottom: calc(-1 * var(--vf-gap) / 2); }
  .pg-vf__step:not(:last-child)::after { margin: 0 0 -15px -15px; }
  .pg-vf__step:not(:last-child)::before { margin: 0 0 -3px -4.5px; transform: rotate(135deg); }
  .pg-vf__k { margin-top: 16px; }
}
@media (max-width: 480px) {
  .pg-uses__list { gap: 8px; }
  .pg-uses__list li { min-height: 38px; padding: 7px 13px 7px 11px; font-size: 14px; }
}

/* =====================================================================================
   Cloud Services plans: one comparison table for the pricing, RemoteScreen and PostureCo Cloud pages (Joe's Oct 17 2026
   Loom: "in columns … very marketable … at a glance we can tell what's included in what plan", with a PostureCo Cloud
   header over Platinum and Diamond). Markup: tools/cloud-plans.mjs. Desktop = a real <table>; under 900 px = one card per
   plan from the same data. No hover transforms anywhere (hover-stays-put): colour changes only.
   ===================================================================================== */
.cp { --cp-tint: #eef7fc; --cp-ring: rgba(0, 128, 178, .34); --cp-orange: #f0a62d; --cp-orange-t: #7d4c00; --cp-flag: linear-gradient(180deg, #007bb0, #005f86); max-width: 1160px; margin: clamp(28px, 3.4vw, 44px) auto 0; }
.cp-soon { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; font-size: 11.5px; font-weight: 700; letter-spacing: .01em; line-height: 1; white-space: nowrap; padding: 5px 9px 5px 8px; border-radius: 999px; background: #fff3df; color: var(--cp-orange-t); box-shadow: inset 0 0 0 1px rgba(240, 166, 45, .62); text-transform: none; }
.cp-soon::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cp-orange); box-shadow: 0 0 0 3px rgba(240, 166, 45, .22); }
.cp-flag { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 750; letter-spacing: .02em; line-height: 1; white-space: nowrap; padding: 6px 10px; border-radius: 999px; color: #fff; background: var(--cp-flag); box-shadow: 0 6px 14px -8px rgba(0, 96, 150, .8); }
.cp-price { display: block; color: var(--ink); line-height: 1; }
.cp-amt { font-size: clamp(32px, 3vw, 42px); font-weight: 800; letter-spacing: -.04em; }
.cp-price small { display: block; margin-top: 5px; font-size: 13.5px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.cp-yr { display: block; font-size: 13px; line-height: 1.35; color: var(--ink-3); }
.cp-save { display: inline-block; margin-left: 4px; padding: 2px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #0b6b3f; background: rgba(43, 182, 115, .13); }
.cp-fit { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--ink); text-wrap: balance; }
.cp-val { display: block; font-size: 13px; line-height: 1.35; color: var(--blue-t); font-weight: 600; text-wrap: balance; }
.cp-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 650; line-height: 1.15; text-align: center; white-space: nowrap; color: var(--blue-t); background: #fff; box-shadow: inset 0 0 0 1.5px rgba(0, 116, 162, .55); transition: background-color .2s, box-shadow .2s, color .2s; }
.cp-cta:hover { text-decoration: none; background: #eef7fc; box-shadow: inset 0 0 0 1.5px var(--blue-t); }
.cp-cta--go { color: #fff; background: var(--cta-fill); box-shadow: var(--cta-sh); }
.cp-cta--go:hover { background: var(--cta-fill); background-position: 0 100%; box-shadow: var(--cta-sh-hover); }
.cp-cta--ghost { color: var(--cp-orange-t); box-shadow: inset 0 0 0 1.5px rgba(240, 166, 45, .75); }
.cp-cta--ghost:hover { background: #fff8ec; box-shadow: inset 0 0 0 1.5px var(--cp-orange); }

/* the table */
.cp-wrap { padding: 14px clamp(10px, 1.4vw, 20px) 16px; border-radius: 30px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 106, 153, .12), 0 40px 80px -48px rgba(11, 40, 80, .55); }
.cp-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.cp-c0 { width: 28%; }
.cp-c { width: 18%; }
.cp-table th, .cp-table td { vertical-align: middle; }
.cp-rec { background: var(--cp-tint); box-shadow: inset 1.5px 0 0 var(--cp-ring), inset -1.5px 0 0 var(--cp-ring); }
/* header tabs (Loom d6325ee6): RemoteScreen + storage | + AI health intake | PostureCo Cloud, all uniform; every logo sits in the
   same box so they read at one size, and the corner's Cloud Services logo shares that row */
.cp-table .cp-g { padding: 16px 12px 16px; border-radius: 18px 18px 0 0; text-align: center; vertical-align: top; font-weight: 400; border-left: 5px solid #fff; border-right: 5px solid #fff; background-clip: padding-box; }
.cp-g--rs { background-color: #f2f5f8; }
.cp-g--ai { background-color: #e6ebf1; }
.cp-g--pcc { background-color: #dff0fa; background-image: linear-gradient(180deg, #d3eaf8 0%, #e6f3fb 100%); }
.cp-table .cp-g--lead { padding: 16px 18px 16px 6px; text-align: left; border: 0; background: none; }
.cp-g__box { display: flex; align-items: center; justify-content: center; height: 46px; margin: 0 auto 10px; }
.cp-g__box--lead { justify-content: flex-start; margin: 0 0 10px; }
/* one size for every logo: the wordmarks (≈5:1) all 156 px wide, the PostureCo Cloud lockup (2.75:1) the same visual weight */
.cp-g__logo { display: block; width: 156px; max-width: 100%; height: auto; }
.cp-g__logo--mark { width: auto; height: 44px; }
.cp-g__k { display: block; font-size: 13px; font-weight: 700; letter-spacing: .01em; line-height: 1.4; color: var(--ink-2); text-wrap: balance; }
.cp-g__s { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.cp-g .cp-soon { margin-top: 8px; }
/* the corner below the tabs: the every-plan facts, beside the plan heads */
.cp-table .cp-corner { vertical-align: top; padding: 24px 22px 22px 6px; }
.cp-lead { display: grid; gap: 14px; justify-items: start; }
.cp-lead__t { font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-t); }
.cp-lead__l { display: grid; gap: 14px; }
.cp-lead__l li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 9px; align-items: start; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.cp-lead__l svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; color: #fff; background: var(--blue); }
/* plan heads: the name row (th), the price row (td), the CTA row */
.cp-table .cp-plan { padding: 22px 12px 4px; text-align: center; vertical-align: bottom; font-weight: 400; }
.cp-table .cp-plan.cp-rec { border-radius: 22px 22px 0 0; box-shadow: inset 1.5px 1.5px 0 var(--cp-ring), inset -1.5px 0 0 var(--cp-ring); }
.cp-top { display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-start; gap: 8px; min-height: 58px; }
.cp-name { font-size: 21px; font-weight: 800; letter-spacing: -.025em; color: var(--ink); line-height: 1.1; }
.cp-table .cp-plan-d { padding: 10px 12px 16px; text-align: center; vertical-align: top; }
.cp-plan-d > * + * { margin-top: 8px; }
.cp-plan-d .cp-yr { min-height: 2.75em; }
.cp-plan-d .cp-fit { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.cp-crow > td { padding: 0 12px 22px; text-align: center; vertical-align: top; }
.cp-crow .cp-cta, .cp-frow .cp-cta { width: 100%; max-width: 190px; }
/* group rows + feature rows */
.cp-grp > * { padding: 26px 12px 10px; }
.cp-grp th { text-align: left; padding-left: 6px; }
.cp-grp__h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-t); }
.cp-grp__s { display: block; margin-top: 4px; font-size: 13.5px; font-weight: 500; color: var(--ink-3); }
.cp-table .cp-grp__p { vertical-align: bottom; text-align: center; }
.cp-mini { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.cp-tb tr:not(.cp-grp) > * { padding: 14px 12px; border-top: 1px solid var(--line); }
.cp-tb tr:not(.cp-grp) > th { text-align: left; font-weight: 400; padding-left: 6px; }
.cp-tb tr:not(.cp-grp) > td { text-align: center; }
.cp-k { display: block; font-size: 15px; font-weight: 650; line-height: 1.35; color: var(--ink); }
.cp-s { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.cp-v { display: inline-block; font-size: 14.5px; font-weight: 650; line-height: 1.3; color: var(--ink); text-wrap: balance; }
.cp-big .cp-v { font-size: clamp(17px, 1.5vw, 20px); font-weight: 800; letter-spacing: -.02em; }
.cp-y { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; background: var(--blue); }
.cp-y svg { width: 14px; height: 14px; }
.cp-n { display: inline-block; width: 14px; height: 2px; border-radius: 2px; background: rgba(11, 26, 46, .36); vertical-align: middle; }
.cp-frow > * { padding: 18px 12px 20px; text-align: center; }
.cp-frow .cp-rec { border-radius: 0 0 22px 22px; box-shadow: inset 1.5px 0 0 var(--cp-ring), inset -1.5px 0 0 var(--cp-ring), inset 0 -1.5px 0 var(--cp-ring); }
.cp-price--tbd { padding-top: 6px; }
.cp-tbd { display: block; font-size: clamp(22px, 2vw, 27px); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; color: var(--ink-2); }
.cp-price--tbd small { margin-top: 7px; }
/* the AI-Guided Health History row: its own badge and a faint tint (Loom d6325ee6, 0:49 "a bigger deal about the whole AI intake") */
.cp-aitag { display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; padding: 3px 7px; border-radius: 7px; font-size: 11px; font-weight: 800; letter-spacing: .04em; line-height: 1.1; color: #fff; background: linear-gradient(135deg, #007bb0, #3b5fd0); vertical-align: 1px; }
.cp-tb tr.cp-ai > *:not(.cp-rec) { background: #f7fbfe; }
/* where the four columns are narrowest the buttons just say "Subscribe" (the in-app note sits in the corner and the sr text) */
@media (max-width: 1239px) { .cp-cta { padding: 9px 9px; font-size: 13px; } }
@media (min-width: 900px) and (max-width: 1099px) { .cp-cta__x { display: none; } }
/* notes + links, on their own white panel (AA on the cloud band) */
.cp-foot { max-width: 920px; margin: 26px auto 0; padding: 20px clamp(18px, 2.4vw, 28px); border-radius: 22px; background: rgba(255, 255, 255, .9); box-shadow: inset 0 0 0 1px rgba(0, 106, 153, .12); }
.cp-notes { display: grid; gap: 8px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.cp-notes li { position: relative; padding-left: 16px; }
.cp-notes li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: rgba(0, 116, 162, .55); }
.cp-notes b { color: var(--ink); font-weight: 700; }
.cp-foot .pg-links { margin-top: 18px; }

/* phones and small tablets: one card per plan */
.cp-cards, .cp-jump { display: none; }
@media (max-width: 899px) {
  .cp-wrap { display: none; }
  .cp-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .cp-jump { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
  .cp-jump a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; font-size: 14.5px; font-weight: 700; color: var(--blue-t); background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 106, 153, .2); }
  .cp-jump a.is-rec { color: #fff; background: var(--cp-flag); box-shadow: none; }
  .cp-jump a:hover { text-decoration: none; }
  .cp-card { display: grid; gap: 8px; align-content: start; padding: 22px 20px 20px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 106, 153, .12), 0 26px 50px -36px rgba(11, 40, 80, .55); scroll-margin-top: calc(var(--hdr) + 16px); }
  .cp-card--rec { background: linear-gradient(180deg, #f2f9fd 0%, #fff 60%); box-shadow: inset 0 0 0 1.5px var(--cp-ring), 0 26px 50px -36px rgba(11, 40, 80, .55); }
  .cp-card__h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
  .cp-card .cp-name { font-size: 24px; }
  .cp-card__grp { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: -2px 0 4px; font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--ink-3); }
  .cp-card__grp-logo { height: 24px; width: auto; }
  .cp-card .cp-price { margin-top: 2px; }
  .cp-card .cp-fit { margin-top: 6px; }
  .cp-card .cp-cta { justify-self: start; margin-top: 6px; }
  .cp-card__k { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-t); }
  .cp-card__l { display: grid; gap: 10px; }
  .cp-card__l li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
  .cp-card__l li > .cp-n { margin: 12px 0 0 6px; }
  .cp-card__l b { display: block; font-weight: 650; color: var(--ink); }
  .cp-card__l li.is-n b { font-weight: 500; color: var(--ink-3); }
  .cp-card__v { display: block; font-weight: 800; color: var(--blue-t); }
  .cp-card__l small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
}
@media (max-width: 640px) {
  .cp-cards { grid-template-columns: minmax(0, 1fr); }
}

/* Mux player (WEB-49, video.js) */
.pg-yt mux-player { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; --media-object-fit: contain; }
.pg-yt .pc-vid-note { position: absolute; z-index: 4; left: 14px; right: 14px; bottom: 14px; }
.pg-yt .pc-vid-note p { margin: 0; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .94); color: #0b1a2e; font-size: 14px; line-height: 1.45; }