/* =========================================================================
Concept F · HYBRID, round 6: "Clear sky, deep water", re-paced.
The page alternates light and dark (round 6 order, FEEDBACK-R6 A6; Joe's Oct 8 Loom
swapped RemoteScreen and One iPad and made ROM light):
aurora (hero) → navy (marquee + 4-view) → white (RemoteScreen) → bay
(One iPad) → mist (App Store shelf) → black (palm-of-your-hand wall) →
white (instrument) → sky (ROM) → black (Scribe) → white (flow) → mist
(integrations) → navy (HIPAA) → white (research) → graphite (PostureRay) →
ink (voices) → white → mist (pricing) → white (FAQ) → aurora. The sequence
follows DOM order: script.js reads each section's data-bg (--bgc) in order,
so moving a section re-tunes the crossfade by itself. One fixed page-background layer
(.pagebg) carries the colour; script.js crossfades it in OKLab as each
boundary crosses the viewport, so nothing ever hard-cuts or bands.
========================================================================= */
:root {
--blue: #0080B2;
--blue-d: #006a94;
--blue-t: #0074A2; /* text-only accent: AA (≥4.7:1) on white, mist and aurora; fills keep --blue */
--sky: #26BCD7;
--sky-l: #9fe3f0;
--navy: #1D3159;
--red: #A31737;
--red-l: #e0506f;
--yellow: #FEC020;
--green: #2BB673;
--gray: #7E8083;
--ink: #0b1a2e;
--ink-2: #3d4c61;
--ink-3: #5f6e83;
--bg: #ffffff;
--bg-2: #f3f7fa;
--bg-3: #e9f3f8;
--line: rgba(11, 26, 46, .10);
--line-2: rgba(11, 26, 46, .16);
--dk: #05080d;
--dk-ink: #eef4f8;
--dk-2: #a6b3c2;
--dk-line: rgba(255, 255, 255, .12);
--font: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--serif: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
--gutter: clamp(16px, 4vw, 48px);
--maxw: 1200px;
--hdr: 58px;
--r: 22px;
--pad: clamp(76px, 8.4vw, 116px);
--seam: clamp(90px, 11vw, 170px);
--shadow-1: 0 1px 2px rgba(11, 26, 46, .06), 0 10px 30px -14px rgba(11, 26, 46, .22);
--shadow-2: 0 2px 4px rgba(11, 26, 46, .06), 0 30px 70px -30px rgba(11, 26, 46, .35);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: var(--hdr); }
body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.5; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--blue-t); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
sup { font-size: .6em; line-height: 0; vertical-align: super; }
sup a { color: inherit; opacity: .7; padding: 0 1px; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; transition: top .2s; }
.skip:focus { top: 12px; }
.nw { white-space: nowrap; }
.wrap { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin-inline: auto; }
/* =========================================================================
PAGE BACKGROUND: one fixed layer, crossfaded by scroll
Each section names its colour in --bgc (data-bg). Without script the
sections paint it themselves; with script (html.pbg) they are
transparent and #pagebg carries an OKLab blend of the two neighbours
while their boundary crosses the middle of the viewport.
========================================================================= */
.sec { position: relative; isolation: isolate; }
.pagebg { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: #eaf6fb; }
[data-bg] { background: var(--bgc); }
html.pbg main [data-bg] { background: transparent; }
[data-bg="aurora"] { --bgc: #eaf6fb; }
[data-bg="aurora2"] { --bgc: #e9f6fb; }
[data-bg="white"] { --bgc: #ffffff; }
[data-bg="mist"] { --bgc: #edf4f8; }
[data-bg="navy"] { --bgc: #0a1b34; }
[data-bg="black"] { --bgc: #000000; }
[data-bg="bay"] { --bgc: #071a30; }
[data-bg="graphite"] { --bgc: #10141a; }
[data-bg="sky"] { --bgc: #d2e8f4; } /* Oct 8 Loom (6:13): ROM is a light sky scene (was slate #1c2839, which still blended into the black PostureScribe.AI band); clearly tinted against the white instrument above */
[data-bg="cloud"] { --bgc: #dceef8; } /* WEB-147 (Joe, Oct 9 Loom): PostureCo Cloud, the booth display's light sky; between the navy exam and the white RemoteScreen scene, so each reads as its own scene */
[data-bg="graphite-red"] { --bgc: #151619; }
[data-bg="ink"] { --bgc: #0a111c; }
[data-bg="foot"] { --bgc: #070b12; }
/* soft section-local light (always transparent at the edges, so it never draws a seam) */
[data-bg="ink"]::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: min(900px, 90vh); z-index: -1; pointer-events: none; background: radial-gradient(60% 55% at 50% 42%, rgba(30, 52, 84, .55), transparent 72%); }
[data-bg="navy"].hipaa::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(50% 50% at 80% 30%, rgba(38, 188, 215, .10), transparent 70%); }
/* ---------- type ---------- */
.eyebrow { font-size: 14px; font-weight: 600; letter-spacing: .01em; color: var(--blue-t); margin-bottom: 12px; }
.eyebrow--sky { color: var(--sky); }
.h2 { font-size: clamp(30px, 4.1vw, 54px); line-height: 1.06; letter-spacing: -.032em; font-weight: 700; text-wrap: balance; }
/* the registered sign in display headings (h1, h2, card h3, close): small and raised to the cap height, so it never reads
as a heavy extra glyph (review G5). Body copy keeps the inline ®. Markup: ® right after the mark. */
.reg, .tm { font-size: .42em; line-height: 0; vertical-align: .95em; font-weight: 600; letter-spacing: 0; margin-left: .02em; }
/* ™ (PostureCo™, ROMScreen™; Joe Oct 10 2026, WEB-155): the same small raised sign; TM_SUP in site.mjs */
h3 .reg, .qr__h .reg, h3 .tm, .qr__h .tm { font-size: .52em; vertical-align: .62em; } /* 16–26 px titles: a touch larger so it stays legible; still tops out at the cap height */
/* "…with PostureRay®." : the raised sign keeps its advance, so the period after it floated on the baseline with a hole
wider than a word space ("PostureRay® ."). Where punctuation follows (build-pages regHeadings), the sign gives most of its
width back and the period tucks in under it (final review reg-period). */
.reg--p { margin-right: -.5em; }
.lede { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; color: var(--ink-2); max-width: 46ch; text-wrap: pretty; }
.fine { font-size: 12.5px; color: var(--ink-3); max-width: 80ch; }
.fine--c { text-align: center; margin: 28px auto 0; }
.sec-head { margin-bottom: clamp(30px, 4vw, 52px); }
.sec-head--c { text-align: center; display: grid; justify-items: center; gap: 0; }
.sec-head--c .lede { margin-top: 14px; }
.sec-head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.sec-head--row .h2 { max-width: 18ch; }
/* Loom #5: a heading that docks (script.js dock()) scales about its centre and never catches the pointer mid-flight */
.fly { transform-origin: 50% 50%; }
.fly.is-flying { pointer-events: none; will-change: transform, opacity; }
#storeBadge:focus-visible { opacity: 1 !important; transform: none !important; pointer-events: auto !important; } /* keyboard focus never lands on a badge that is still sliding in */
/* the pinned scenes whose heading docks clip sideways only (kit.css clips both ways), so it can wait above the scene */
.grow__sticky, .inst__sticky { overflow: clip visible; }
/* ---------- buttons & links ("measured" micro-interactions) ---------- */
/* ONE CTA red for every red button: Get started (.btn--ray), Learn more (.more), "Hear it" (.sound) and the contact
form's Send (.cf__foot .btn in pages.css). Joe, Oct 8 Loom "Updating PostureScribe UI and Pricing Details" (1:13):
"wherever we have the Get started … a brighter red. This is too dull looking. It's almost like maroon."
A clear scarlet (hue 352°, between the brand crimson and a pure red), chosen over a pinker crimson, a pure
signal red and a warmer vermilion. --red (#A31737) stays the red for text and accents. White label text is
4.86:1 on --cta-hi, the lightest point of the fill (6.13:1 on --cta-lo, 7.09:1 on --cta-deep). The fill is twice
the button's height, so a press slides it down to the deeper half; hover lifts the button and widens its glow
without lightening the fill, so the text never drops below 4.86:1. */
:root {
--cta-hi: #E0162F;
--cta-lo: #C2142A;
--cta-deep: #B01228;
--cta-rgb: 224 22 47; /* the glow */
--cta-fill: linear-gradient(180deg, var(--cta-hi) 0%, var(--cta-lo) 50%, var(--cta-deep) 100%) 0 0 / 100% 200%;
--cta-sh: inset 0 1px 0 rgba(255, 255, 255, .24), 0 10px 22px -12px rgb(var(--cta-rgb) / .9);
--cta-sh-hover: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 4px rgb(var(--cta-rgb) / .14), 0 14px 28px -12px rgb(var(--cta-rgb) / 1);
--cta-sh-dk: inset 0 1px 0 rgba(255, 255, 255, .24), 0 0 0 1px rgba(255, 255, 255, .16), 0 12px 32px -10px rgb(var(--cta-rgb) / .7);
--cta-sh-dk-hover: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 1px rgba(255, 255, 255, .34), 0 16px 38px -10px rgb(var(--cta-rgb) / .9);
}
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 999px; font-weight: 600; font-size: 15px; white-space: nowrap; transition: transform var(--dur-xs) var(--ease-out), background .2s, box-shadow .2s; }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: scale(.97); }
/* HOVER STAYS PUT (Joe's Oct 10 Loom "Fixing Flicker and Wrong Page Navigation": "notice I'm not doing anything and
everything jumps around"). A control that moves on hover or press must not move out from under a still mouse, or it
un-hovers, drops back under the mouse, hovers again and shakes; a press that shrinks it lets mouse-up land outside,
and the click is lost. So everything that lifts on hover gets an invisible strip, part of the same link or button,
over the band it rose off (top: 100%, as tall as the lift + 2 px), and everything that shrinks on press keeps a
margin round it until release. Same rule on every lifting card and button on the site (WEB-165); check any
change with tools/hover-audit.cjs. */
.btn:hover, .btn:active { position: relative; } /* anchors the strip and the press margin (most .btn are static) */
.btn:not(.calib):hover::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 3px; }
.btn:not(.calib):active::after { content: ""; position: absolute; inset: -3px -6px; height: auto; }
.btn--sm { height: 38px; padding: 0 16px; font-size: 14px; }
.btn--primary { background: var(--ink); color: #fff; box-shadow: 0 6px 16px -8px rgba(11, 26, 46, .6); }
.btn--primary:hover { background: #000; }
.btn--ray { background: var(--cta-fill); color: #fff; box-shadow: var(--cta-sh); }
.btn--ray:hover { box-shadow: var(--cta-sh-hover); }
.btn--ray:active { background-position: 0 100%; }
[data-tone="dark"] .btn--ray { box-shadow: var(--cta-sh-dk); }
[data-tone="dark"] .btn--ray:hover { box-shadow: var(--cta-sh-dk-hover); }
.btn .apple, .btn svg { width: 13px; height: 16px; margin-top: -2px; }
.btn .iph, .dock__cta .iph { width: 11px; height: 16px; margin-top: -1px; }
.link { position: relative; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 16px; color: var(--blue-t); }
.link svg { width: 15px; height: 15px; transition: transform .25s var(--ease-out); }
.link:hover { text-decoration: none; }
.link:hover svg { transform: translateX(3px); }
/* dimension-line underline: a hairline with end ticks draws in */
.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 7px; border-inline: 1.5px solid currentColor; background: linear-gradient(currentColor, currentColor) 0 50% / 100% 1.5px no-repeat; transform: scaleX(0); transform-origin: 0 50%; opacity: .7; transition: transform .35s var(--ease-out); pointer-events: none; }
.link:hover::after, .link:focus-visible::after { transform: scaleX(1); }
.link--sm { font-size: 14.5px; }
.link--sky { color: var(--sky); }
.link--ray { color: #ff7c97; }
.fam .link--ray { color: var(--red); } /* light card: the on-dark pink is 2.3:1 on white */
/* round 6 (A16): a clear "Learn more" button in every section the nav jumps to (quiet secondary button:
the App Store stays the primary CTA). Light by default, glass on dark bands. */
.more { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px 0 20px; border-radius: 999px; font-size: 14.5px; font-weight: 650; letter-spacing: -.005em; white-space: nowrap; color: #fff; background: var(--cta-fill); box-shadow: var(--cta-sh); transition: transform .2s var(--ease-out), box-shadow .25s, background-position .2s; }
/* Loom #4 (Oct 7): every "Learn more" is a red button that stands off whatever it sits on; Oct 8: the CTA red above */
.more svg { width: 15px; height: 15px; flex: none; transition: transform .25s var(--ease-out); }
.more:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--cta-sh-hover); }
.more:hover svg, .more:focus-visible svg, .btn--go:hover svg { transform: translateX(3px); }
.more:active { transform: scale(.97); background-position: 0 100%; }
/* hover stays put (see .btn); the family section's .fam__go never moves and uses ::after as its card link */
.more:not(.fam__go):hover, .more:not(.fam__go):active { position: relative; }
.more:not(.fam__go):hover::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 3px; }
.more:not(.fam__go):active::after { content: ""; position: absolute; inset: -3px -6px; height: auto; }
.more--sm { height: 34px; padding: 0 13px 0 16px; font-size: 13.5px; gap: 7px; }
.more--sm svg { width: 14px; height: 14px; }
[data-tone="dark"] .more { box-shadow: var(--cta-sh-dk); }
[data-tone="dark"] .more:hover { box-shadow: var(--cta-sh-dk-hover); }
.btn--go svg { width: 15px; height: 15px; margin-top: 0; transition: transform .25s var(--ease-out); }
/* App Store badge: a landmark lock-on ring with crosshair ticks */
.badge { position: relative; display: inline-block; border-radius: 10px; }
/* the 1 px hover lift moves the artwork, ring and ticks, never the link box itself (hover stays put, see .btn): both
pseudo-elements are taken, so a strip can't be added, and a moving box shook under a mouse resting on its edge */
.badge img { width: 150px; transition: transform .2s var(--ease-out); }
.badge::before { content: ""; position: absolute; inset: -6px; border-radius: 15px; box-shadow: 0 0 0 1.5px var(--yellow); opacity: 0; transform: scale(1.12); transition: opacity .24s var(--ease-out), transform .3s var(--ease-spring); pointer-events: none; }
.badge::after { content: ""; position: absolute; inset: -13px; pointer-events: none; opacity: 0; transition: opacity .2s var(--ease-out) .05s, transform .2s var(--ease-out);
background: linear-gradient(var(--yellow), var(--yellow)) 50% 0 / 1.5px 7px no-repeat, linear-gradient(var(--yellow), var(--yellow)) 50% 100% / 1.5px 7px no-repeat,
linear-gradient(var(--yellow), var(--yellow)) 0 50% / 7px 1.5px no-repeat, linear-gradient(var(--yellow), var(--yellow)) 100% 50% / 7px 1.5px no-repeat; }
.badge:hover img, .badge:focus-visible img { transform: translateY(-1px); }
.badge:hover::before, .badge:focus-visible::before { opacity: 1; transform: translateY(-1px); }
.badge:hover::after, .badge:focus-visible::after { opacity: 1; transform: translateY(-1px); }
/* round 6 (A3): the same yellow calibration frame on the header and dock "Get the app" buttons,
shaped to the pill (header) and the dock's rounded button; ticks kept inside the 58 px header */
.calib, .dock__cta { position: relative; }
.calib::before, .dock__cta::before { content: ""; position: absolute; inset: -5px; border-radius: 999px; box-shadow: 0 0 0 1.5px var(--yellow); opacity: 0; transform: scale(1.12); transition: opacity .24s var(--ease-out), transform .3s var(--ease-spring); pointer-events: none; }
.dock__cta::before { border-radius: 15px; }
.dock__cta::after { inset: -10px -9px; background-size: 1.5px 5px, 1.5px 5px, 5px 1.5px, 5px 1.5px; } /* the dock's label sits 11 px to the left */
.calib::after, .dock__cta::after { content: ""; position: absolute; inset: -10px -12px; pointer-events: none; opacity: 0; transition: opacity .2s var(--ease-out) .05s;
background: linear-gradient(var(--yellow), var(--yellow)) 50% 0 / 1.5px 5px no-repeat, linear-gradient(var(--yellow), var(--yellow)) 50% 100% / 1.5px 5px no-repeat,
linear-gradient(var(--yellow), var(--yellow)) 0 50% / 7px 1.5px no-repeat, linear-gradient(var(--yellow), var(--yellow)) 100% 50% / 7px 1.5px no-repeat; }
.calib:hover::before, .calib:focus-visible::before, .dock__cta:hover::before, .dock__cta:focus-visible::before { opacity: 1; transform: none; }
/* hover stays put (see .btn): the header button lifts 1 px and shrinks on press, and both its pseudo-elements are taken,
so while hovered or pressed its yellow ring (5 px out) counts as the button */
.calib:hover::before, .calib:active::before { pointer-events: auto; }
.calib:hover::after, .calib:focus-visible::after, .dock__cta:hover::after, .dock__cta:focus-visible::after { opacity: 1; }
.calib:focus-visible, .dock__cta:focus-visible { outline-offset: 6px; }
.badge--hero img { width: 168px; }
.badge--lg img { width: 190px; }
.bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line); overflow: hidden; }
.bar::after { content: ""; position: absolute; inset: 0; background: var(--blue); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
/* cards: a green level line along the top edge on hover (round 7: no "0.0° · level" readout, per Joe's Oct 7 Loom) */
.msr { position: relative; }
.msr::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--green) 14%, var(--green) 86%, transparent); transform: scaleX(0); transition: transform .5s var(--ease-out); pointer-events: none; }
@media (hover: hover) { .msr:hover::before { transform: scaleX(1); } }
/* =========================================================================
HEADER
========================================================================= */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--hdr); color: var(--ink); transition: color .35s var(--ease-out); }
.hdr::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .74); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); box-shadow: inset 0 -1px 0 var(--line); transition: background .35s var(--ease-out), box-shadow .35s; }
.hdr.is-dark { color: #fff; }
.hdr.is-dark::before { background: rgba(5, 8, 13, .62); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08); }
.hdr__in { position: relative; height: 100%; width: min(1320px, 100% - 2 * var(--gutter)); margin-inline: auto; display: flex; align-items: center; gap: 28px; }
.hdr__logo { position: relative; display: block; width: 122px; flex: none; }
.hdr__logo img { width: 122px; transition: opacity .35s; }
.hdr__logo-d { position: absolute; inset: 0; opacity: 0; }
.hdr.is-dark .hdr__logo-l { opacity: 0; }
.hdr.is-dark .hdr__logo-d { opacity: 1; }
/* .hdr__nav (the top items and their mega panels) is styled in nav.css (WEB-142) */
.hdr.is-dark .btn--primary { background: #fff; color: var(--ink); }
.hdr__burger { display: none; width: 40px; height: 40px; margin-left: 4px; position: relative; }
.hdr__burger span { position: absolute; left: 11px; right: 11px; height: 1.6px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease-out); }
.hdr__burger span:first-child { top: 16px; } .hdr__burger span:last-child { top: 23px; }
.hdr__prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.hdr__prog i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--blue), var(--sky)); transform-origin: 0 50%; transform: scaleX(0); }
.menu { position: fixed; inset: 0; z-index: 150; background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); padding: 14px var(--gutter) 40px; display: flex; flex-direction: column; opacity: 0; transition: opacity .3s var(--ease-out); overflow-y: auto; }
.menu.is-open { opacity: 1; }
.menu__top { display: flex; justify-content: space-between; align-items: center; height: 40px; }
.menu__top img { width: 120px; }
.menu__close { width: 40px; height: 40px; display: grid; place-items: center; }
.menu__close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; }
.menu__links { margin-top: 28px; display: grid; gap: 2px; }
.menu__links a, .menu__foot { color: var(--ink); }
.menu__links > li, .menu__foot { opacity: 0; transform: translateY(10px); transition: opacity .4s var(--ease-out) calc(var(--i) * 40ms + 80ms), transform .5s var(--ease-out) calc(var(--i) * 40ms + 80ms); }
.menu.is-open .menu__links > li, .menu.is-open .menu__foot { opacity: 1; transform: none; }
.menu__links a { display: block; padding: 10px 0; font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
/* each row's sub-links (an accordion) are styled in nav.css (WEB-142) */
.menu__foot { margin-top: auto; padding-top: 28px; display: grid; gap: 12px; color: var(--ink-2); font-size: 15px; }
@media (max-width: 1100px) {
.hdr__nav { display: none; }
.hdr__cta { margin-left: auto; }
.hdr__burger { display: block; }
}
/* =========================================================================
AURORA
========================================================================= */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; background: linear-gradient(180deg, #e8f6fb 0%, #f1f9fc 55%, #f6fbfd 100%); }
.aurora i { position: absolute; border-radius: 50%; will-change: transform; }
html.pbg .aurora { background: transparent; }
.hero .aurora { -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); }
.aurora--close { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); }
.aurora .a1 { width: 70vw; height: 60vw; max-width: 1100px; max-height: 900px; left: -18%; top: -24%; background: radial-gradient(closest-side, rgba(38, 188, 215, .50), rgba(38, 188, 215, 0)); animation: drift-a 22s var(--ease-in-out) infinite alternate; }
.aurora .a2 { width: 64vw; height: 60vw; max-width: 1000px; max-height: 900px; right: -16%; top: -18%; background: radial-gradient(closest-side, rgba(0, 128, 178, .36), rgba(0, 128, 178, 0)); animation: drift-b 27s var(--ease-in-out) infinite alternate; }
.aurora .a3 { width: 50vw; height: 42vw; max-width: 800px; max-height: 640px; left: 28%; top: 30%; background: radial-gradient(closest-side, rgba(140, 222, 240, .45), rgba(140, 222, 240, 0)); animation: drift-c 19s var(--ease-in-out) infinite alternate; }
.aurora .a4 { width: 46vw; height: 40vw; max-width: 720px; max-height: 620px; left: 2%; top: 46%; background: radial-gradient(closest-side, rgba(29, 49, 89, .12), rgba(29, 49, 89, 0)); animation: drift-b 31s var(--ease-in-out) infinite alternate-reverse; }
@keyframes drift-a { to { transform: translate3d(14%, 12%, 0) scale(1.12); } }
@keyframes drift-b { to { transform: translate3d(-12%, 16%, 0) scale(.92); } }
@keyframes drift-c { to { transform: translate3d(-18%, -8%, 0) scale(1.18); } }
/* =========================================================================
1. HERO: centred tagline holds ~2 s, text glides left, devices fold up
========================================================================= */
.hero { min-height: 100svh; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; padding-top: var(--hdr); overflow: clip; }
.hero__grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .45;
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(70% 60% at 60% 50%, #000 0%, transparent 75%); mask-image: radial-gradient(70% 60% at 60% 50%, #000 0%, transparent 75%); }
.hero__in { position: relative; z-index: 2; width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); align-items: center; gap: clamp(20px, 3vw, 48px); padding: clamp(12px, 2vh, 28px) 0 0; }
.hero__copy { display: grid; justify-items: start; text-align: left; }
.fl { display: block; max-width: 100%; transform-origin: 50% 50%; }
html.kit:not(.kit-reduced) .hero.is-split .fl { transition: transform 1.3s var(--ease-out-expo) calc(var(--k, 0) * 55ms); }
html.kit:not(.kit-reduced) .hero:not(.is-ready) .hero__copy { opacity: 0; }
html.kit:not(.kit-reduced) .hero.is-relayout:not(.is-split) .fl { transition: transform .45s var(--ease-out); }
/* round 6 (A1): the room opened around the tilted line closes in step with the leveling (1.4–2.2 s) */
html.kit:not(.kit-reduced) .hero.is-settle:not(.is-split) .fl { transition: transform .8s var(--ease-in-out); }
.hero__logo { width: min(340px, 64vw); margin-bottom: clamp(14px, 2.4vh, 26px); }
.hero__h { --fs: min(3.25vw, 50px); font-size: var(--fs); line-height: 1.04; letter-spacing: -.04em; font-weight: 800; display: grid; justify-items: start; }
.hero__h .fl { white-space: nowrap; }
.hero__l2 { 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; }
.lv { position: relative; display: inline-block; transform-origin: 0 85%; }
.hero__sub { margin-top: clamp(14px, 2vh, 22px); max-width: 44ch; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.hero__ctas { margin-top: clamp(18px, 2.6vh, 28px); }
.hero__ctas-in { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.hero__scribe-w { margin-top: clamp(16px, 2.4vh, 26px); }
.hero__scribe { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; border-radius: 999px; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(0, 128, 178, .18), 0 10px 24px -16px rgba(0, 60, 90, .45); color: var(--ink-2); font-size: 14px; font-weight: 500; transition: transform .3s var(--ease-out), box-shadow .3s; }
.hero__scribe:hover { position: relative; text-decoration: none; transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(0, 128, 178, .35), 0 16px 30px -16px rgba(0, 60, 90, .55); }
.hero__scribe:hover::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 4px; } /* hover stays put (see .btn) */
.hero__scribe img { height: 24px; width: auto; }
.hero__scribe-plus { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; font-weight: 700; font-size: 15px; line-height: 1; flex: none; }
.hero__scribe-a { width: 14px; height: 14px; color: var(--blue-t); transition: transform .25s var(--ease-out); }
.hero__scribe:hover .hero__scribe-a { transform: translateX(3px); }
/* the measured-and-leveled tagline: landmark dots + level line on line 2 */
.lm { position: absolute; top: calc(100% - .06em); width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 2px var(--navy); z-index: 1; }
.lm--a { left: -.18em; } .lm--b { left: calc(100% + .18em); }
.fl--l1 .lm { display: none; }
.lvl { position: absolute; left: -.18em; right: -.18em; top: calc(100% - .06em); height: 2px; margin-top: -1px; border-radius: 2px; background: var(--green); transform-origin: 0 50%; }
.lvl-chip { position: absolute; left: calc(100% + .95em); top: calc(100% - .06em); transform: translateY(-50%); display: grid; font: 700 12px/1 var(--font); letter-spacing: .02em; padding: 5px 8px; border-radius: 7px; background: #fff; box-shadow: var(--shadow-1); color: var(--ink); -webkit-text-fill-color: currentColor; white-space: nowrap; opacity: 0; }
.lvl-chip span { grid-area: 1 / 1; }
.lvl-chip__b { color: #17784a; }
.lvl-chip__a { color: var(--red); }
/* final (and reduced-motion / no-JS) state: level line green, dots on, chip off */
.lvl-chip__a { opacity: 0; }
/* load entrance (inner .ent elements only; .fl carries the glide).
Timeline from .is-ready (≈ first paint): the tagline is sharp by ~0.5 s (pass 2: .4 s words, 40 ms stagger), it is
measured (dots + red line + "2.0°") at 0.5–0.9 s, levels at 1.5–2.1 s (the line
turns green and the chip reads "Level" in the same frame), and script.js
splits at 2.5 s: a 2 s hold on a crisp, centred tagline. */
html.kit:not(.kit-reduced) .hero.is-ready .ent { animation: rise-in .5s var(--ease-out) both; }
html.kit:not(.kit-reduced) .hero.is-ready .hero__logo { animation: logo-in .55s var(--ease-out) both 0s; }
html.kit:not(.kit-reduced) .hero.is-ready .hero__h .ent { display: inline-block; animation: word-in .4s var(--ease-out) both; }
html.kit:not(.kit-reduced) .hero.is-ready .fl--l1 .ent:nth-child(1) { animation-delay: .04s; }
html.kit:not(.kit-reduced) .hero.is-ready .fl--l1 .ent:nth-child(2) { animation-delay: .08s; }
html.kit:not(.kit-reduced) .hero.is-ready .fl--l2 .ent { animation-delay: .12s; }
html.kit:not(.kit-reduced) .hero.is-ready .hero__sub .ent { display: block; animation-delay: .24s; }
html.kit:not(.kit-reduced) .hero.is-ready .hero__ctas .ent { animation-delay: .3s; }
html.kit:not(.kit-reduced) .hero.is-ready .hero__scribe { animation-delay: .36s; }
/* round 6 (A1): line 2 starts a clear 8° off horizontal (pivot: the centre of its baseline, so each end
moves the same amount; script.js opens the gaps above and below it while it is tilted), the chip counts
8.0° → 0.0° from the live angle, and it eases level at 1.4–2.2 s. Reduced motion: it starts level. */
.lv--2 { transform-origin: 50% calc(100% - .06em); }
html.kit:not(.kit-reduced) .hero.is-ready .lv--1 { animation: lv-shift .8s var(--ease-in-out) both 1.4s; }
html.kit:not(.kit-reduced) .hero.is-ready .lv--2 { animation: lv-tilt .8s var(--ease-in-out) both 1.4s; }
html.kit:not(.kit-reduced) .hero.is-ready .fl--l2 .lm { animation: dot-pop .45s var(--ease-spring) both; }
html.kit:not(.kit-reduced) .hero.is-ready .fl--l2 .lm--a { animation-delay: .5s; }
html.kit:not(.kit-reduced) .hero.is-ready .fl--l2 .lm--b { animation-delay: .56s; }
html.kit:not(.kit-reduced) .hero.is-ready .lvl { animation: lvl-draw .45s var(--ease-out) both .6s, lvl-green .2s linear both 2.15s; }
html.kit:not(.kit-reduced) .hero.is-ready .lvl-chip { animation: chip-in .3s var(--ease-out) both .7s, chip-upright .8s var(--ease-in-out) both 1.4s; }
html.kit:not(.kit-reduced) .hero.is-ready .lvl-chip__a { animation: chip-off .01s linear both 2.2s; }
html.kit:not(.kit-reduced) .hero.is-ready .lvl-chip__b { animation: chip-on .01s linear both 2.2s; }
html.kit:not(.kit-reduced) .hero.is-ready.is-split .lvl-chip { animation: chip-in .3s var(--ease-out) both .7s, chip-upright .8s var(--ease-in-out) both 1.4s, chip-out .35s var(--ease-out) forwards .3s; }
/* the readout stays upright while the line tilts (it rides on the line's right end) */
@keyframes chip-upright { from { rotate: 8deg; } to { rotate: 0deg; } }
/* a dashed horizontal reference through the pivot while the line is off level */
.fl--l2 { position: relative; }
.fl--l2::before { content: ""; position: absolute; left: -.4em; right: -.4em; top: calc(100% - .06em); margin-top: -.75px; border-top: 1.5px dashed rgba(29, 49, 89, .38); opacity: 0; pointer-events: none; }
html.kit:not(.kit-reduced) .hero.is-ready .fl--l2::before { animation: ref-on 1.85s linear both .55s; }
@keyframes ref-on { 0% { opacity: 0; } 12% { opacity: 1; } 84% { opacity: 1; } 100% { opacity: 0; } }
@keyframes chip-out { to { opacity: 0; } }
@keyframes logo-in { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.97); filter: blur(3px); } }
@keyframes word-in { from { opacity: 0; transform: translate3d(0, 10px, 0); filter: blur(4px); } }
@keyframes rise-in { from { opacity: 0; transform: translate3d(0, 12px, 0); } }
@keyframes lv-shift { from { transform: translateX(.32em); } }
@keyframes lv-tilt { from { transform: rotate(-8deg); } }
@keyframes dot-pop { from { opacity: 0; transform: scale(2.4); } }
@keyframes lvl-draw { from { transform: scaleX(0); } }
@keyframes lvl-green { from { background: var(--red); } to { background: var(--green); } }
@keyframes chip-in { from { opacity: 0; transform: translate(-6px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
@keyframes chip-off { from { opacity: 1; } to { opacity: 0; } }
@keyframes chip-on { from { opacity: 0; } to { opacity: 1; } }
/* device group: iPad slightly back, two iPhones overlapping in front, lower right */
.hero__devs { position: relative; justify-self: center; width: min(560px, 100%, calc((100svh - var(--hdr) - 220px) * .9)); aspect-ratio: 560 / 600; }
.hd { position: absolute; transform-origin: 50% 100%; }
.hd--pad { left: 0; top: 1%; width: 66%; z-index: 1; transform: rotateY(-10deg) rotateX(3deg) rotateZ(-.6deg); }
.hd--p1 { left: 52%; top: 37%; width: 25.5%; z-index: 2; transform: rotateY(-7deg) rotateZ(1.2deg); }
.hd--p2 { left: 74.5%; top: 45%; width: 25.5%; z-index: 3; transform: rotateY(-5deg) rotateZ(2.4deg); }
.hd__floor { position: absolute; left: 6%; right: 0; bottom: -2%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(11, 26, 46, .26), transparent); z-index: 0; }
.hd--p1 .device, .hd--p2 .device { --shadow: 0 2px 4px rgba(10, 20, 40, .16), 0 30px 50px -20px rgba(10, 20, 40, .55); }
html.kit:not(.kit-reduced) .hd { transition: transform 1.15s var(--ease-out-expo), opacity .5s var(--ease-out); }
html.kit:not(.kit-reduced) .hero.is-split .hd--pad { transition-delay: .12s; }
html.kit:not(.kit-reduced) .hero.is-split .hd--p1 { transition-delay: .34s; }
html.kit:not(.kit-reduced) .hero.is-split .hd--p2 { transition-delay: .46s; }
html.kit:not(.kit-reduced) .hero:not(.is-split) .hd--pad { opacity: 0; transform: translate3d(0, 10%, 0) rotateX(74deg) scale(.68); }
html.kit:not(.kit-reduced) .hero:not(.is-split) .hd--p1,
html.kit:not(.kit-reduced) .hero:not(.is-split) .hd--p2 { opacity: 0; transform: translate3d(0, 26%, 0) rotateX(66deg) scale(.78); }
html.kit:not(.kit-reduced) .hd__floor { transition: opacity 1s var(--ease-out) .5s; }
html.kit:not(.kit-reduced) .hero:not(.is-split) .hd__floor { opacity: 0; }
/* the unmissable scroll cue */
.cue { position: relative; z-index: 2; justify-self: center; display: grid; justify-items: center; gap: 6px; margin: 6px 0 12px; color: var(--ink); }
.cue:hover { text-decoration: none; }
.cue__ring { position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; box-shadow: 0 12px 26px -10px rgba(11, 26, 46, .6); animation: cue-bob 1.7s var(--ease-in-out) infinite; }
.cue__ring svg { width: 26px; height: 26px; }
.cue__ring::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(0, 128, 178, .55); animation: cue-ping 1.7s var(--ease-out) infinite; }
.cue__t { font-size: 15px; font-weight: 700; letter-spacing: -.005em; }
@keyframes cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@keyframes cue-ping { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
html.kit:not(.kit-reduced) .cue { transition: opacity .5s var(--ease-out) .3s, transform .7s var(--ease-out-expo) .3s; }
html.kit:not(.kit-reduced) .hero:not(.is-split) .cue { opacity: 0; transform: translate3d(0, 14px, 0); }
/* trust ribbon at the hero handoff */
.ribbon { position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px 0; padding: 14px var(--gutter); background: rgba(255, 255, 255, .58); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(0, 128, 178, .12); }
.ribbon li { display: flex; align-items: center; font-size: 14px; color: var(--ink); }
.ribbon li::before { content: ""; width: 7px; height: 7px; margin: 0 clamp(14px, 2.2vw, 30px); border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 1.5px var(--navy); flex: none; }
.ribbon li:first-child::before { margin-left: 0; } /* round 6 (A5): • item • item • item • item */
/* the round-6 first item is longer: on tablets the ribbon tightens so it stays on one line (1024 fits) */
@media (max-width: 1180px) and (min-width: 901px) { .ribbon li { font-size: 13px; } .ribbon li::before { margin: 0 clamp(10px, 1.3vw, 16px); } .ribbon li:first-child::before { margin-left: 0; } }
.ribbon b { font-weight: 600; letter-spacing: -.01em; }
.ribbon a { color: inherit; position: relative; }
.ribbon a:hover { text-decoration: none; color: var(--blue-t); }
html.kit:not(.kit-reduced) .ribbon li { transition: opacity .45s var(--ease-out) calc(var(--i) * 60ms + .32s), transform .55s var(--ease-out) calc(var(--i) * 60ms + .32s); }
html.kit:not(.kit-reduced) .hero:not(.is-split) .ribbon li { opacity: 0; transform: translate3d(0, 10px, 0); }
@media (max-width: 900px) {
.hero { grid-template-rows: auto auto auto; }
.hero__in { grid-template-columns: 1fr; justify-items: center; gap: 22px; padding-top: 22px; }
.hero__copy { justify-items: center; text-align: center; }
.hero__h { --fs: clamp(32px, 8.6vw, 46px); justify-items: center; }
.hero__h .fl { white-space: normal; }
.hero__sub { max-width: 36ch; }
.hero__ctas-in { justify-content: center; }
.hero__scribe { font-size: 12.5px; gap: 8px; padding: 8px 12px 8px 9px; }
.hero__scribe img { height: 19px; }
.hero__devs { width: min(400px, 88vw); }
.lvl-chip, .lm { display: none !important; }
.lvl, .fl--l2::before { left: 22%; right: 22%; }
.cue { position: absolute; z-index: 5; left: 50%; top: calc(100svh - 104px); margin: 0; padding: 8px 16px 8px 8px; grid-auto-flow: column; align-items: center; gap: 10px; border-radius: 999px; background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 14px 30px -12px rgba(11, 26, 46, .45), inset 0 0 0 1px rgba(0, 128, 178, .14); transform: translateX(-50%); }
.cue__ring { width: 40px; height: 40px; }
.cue__ring svg { width: 22px; height: 22px; }
html.kit:not(.kit-reduced) .hero:not(.is-split) .cue { transform: translate3d(-50%, 14px, 0); }
/* pass 2: a slimmer pill that hugs the bottom edge of the first screen, below the device art */
.cue { top: calc(100svh - 58px); padding: 4px 14px 4px 4px; gap: 8px; }
.cue__ring { width: 30px; height: 30px; box-shadow: 0 6px 14px -6px rgba(11, 26, 46, .6); }
.cue__ring::after { inset: -4px; }
.cue__ring svg { width: 18px; height: 18px; }
.cue__t { font-size: 13.5px; }
.hero { padding-bottom: 0; }
.ribbon { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.ribbon::-webkit-scrollbar { display: none; }
.ribbon li { white-space: nowrap; font-size: 13px; }
}
@media (max-width: 900px) and (min-width: 600px) { .hero__h { --fs: clamp(40px, 6vw, 50px); } }
/* =========================================================================
PIN HUD: every pinned scene says where you are and what to do
========================================================================= */
.pinhud { position: absolute; z-index: 20; left: 50%; bottom: 16px; display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; background: rgba(255, 255, 255, .86); color: var(--ink); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); opacity: 0; transform: translate3d(-50%, 10px, 0); transition: opacity .4s var(--ease-out), transform .5s var(--ease-out); pointer-events: none; }
.pinhud.is-on { opacity: 1; transform: translate3d(-50%, 0, 0); }
.pinhud.is-nudge { animation: hud-nudge .45s var(--ease-out); }
@keyframes hud-nudge { 0%, 100% { transform: translate3d(-50%, 0, 0); } 30% { transform: translate3d(-50%, -6px, 0); } 60% { transform: translate3d(-50%, 2px, 0); } }
[data-tone="dark"] .pinhud { background: rgba(10, 18, 30, .72); color: #eaf2f8; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.pinhud__n { font-variant-numeric: tabular-nums; color: var(--blue-t); min-width: 32px; }
[data-tone="dark"] .pinhud__n { color: var(--sky); }
.pinhud__bar { position: relative; width: 64px; height: 3px; border-radius: 3px; background: currentColor; opacity: .9; overflow: hidden; }
.pinhud__bar::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .75); }
[data-tone="light"] .pinhud__bar::before { background: rgba(255, 255, 255, .7); }
.pinhud__bar i { position: absolute; inset: 0; background: var(--sky); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.pinhud__bar { background: var(--line-2); }
[data-tone="dark"] .pinhud__bar { background: rgba(255, 255, 255, .18); }
.pinhud__bar::before { display: none; }
.pinhud svg { width: 16px; height: 16px; animation: cue-bob 1.4s var(--ease-in-out) infinite; }
@media (max-width: 700px) { .pinhud { bottom: 10px; font-size: 11.5px; padding: 6px 12px 6px 10px; } .pinhud__bar { width: 40px; } }
/* =========================================================================
2. THE 4-VIEW EXAM (navy, pinned)
========================================================================= */
.exam { --scene-h: 210vh; --scene-h-m: 270vh; --aud-h: 96px; color: var(--dk-ink); }
.exam__glow { position: absolute; left: 50%; top: 55%; width: 1100px; height: 900px; margin: -450px 0 0 -550px; border-radius: 50%; background: radial-gradient(closest-side, rgba(38, 188, 215, .20), rgba(0, 128, 178, .08) 55%, transparent); pointer-events: none; }
/* Joe's Oct 7 Loom "Improving Scrolling Layout for Better View": the professions marquee moved here from
the white band below. It rides along the top of the pinned stage (--aud-h tall, under the header), so it
keeps scrolling while the steps click through; names alternate soft white and sky on the navy. */
.exam__aud { position: absolute; z-index: 3; top: var(--hdr); left: 0; right: 0; height: var(--aud-h); display: flex; flex-direction: column; justify-content: center; gap: 8px; text-align: center; overflow: clip; }
.exam__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); }
.aud__k { font-size: clamp(13px, 1vw, 15px); font-weight: 600; color: #9fb3c8; padding: 0 var(--gutter); text-wrap: balance; }
.marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
/* twelve names since Joe's Oct 9 2026 Loom (was seven at 44s): 76s keeps the same reading speed. Each copy of the list is a
.marquee__set (display: contents, so its names sit straight in the track); tools/build-pages.mjs writes the markup */
.marquee__track { display: flex; align-items: center; gap: 24px; width: max-content; animation: marq 76s linear infinite; }
.marquee__set { display: contents; }
.marquee__track span { font-size: clamp(19px, 1.75vw, 26px); line-height: 1.25; font-weight: 700; letter-spacing: -.025em; white-space: nowrap; color: #eaf2f8; }
.marquee__track span:nth-of-type(even) { color: var(--sky); }
.marquee__track i { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); flex: none; }
@keyframes marq { to { transform: translate3d(-50%, 0, 0); } }
@media (max-height: 820px) and (min-width: 901px) { .exam { --aud-h: 82px; } .exam__aud { gap: 6px; } }
.exam__stage { position: absolute; inset: calc(var(--hdr) + var(--aud-h)) 0 var(--fine-h); z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(24px, 4vw, 64px); width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.exam__left { justify-self: end; width: min(290px, 100%); }
.exam__h { font-size: clamp(24px, 2.3vw, 32px); line-height: 1.12; letter-spacing: -.03em; font-weight: 700; margin-bottom: 18px; }
.exam__dev { position: relative; width: min(calc((100svh - var(--hdr) - var(--aud-h) - var(--fine-h) - 76px) * .746), 36vw, 470px); }
/* the disclaimer (Joe, Oct 11 2026 Loom "Updating AI Disclaimer Across Website": "on the PostureScreen landing page … small,
through here, like smaller text"): site.mjs SITE_DISCLAIMER as small print along the bottom of the pinned exam, under the iPad
and the phones. The stage, the iPad's height and the scroll pill all move up by its height (--fine-h: an estimate here,
measured by script.js), so nothing overlaps and the composition keeps its proportions. Phones leave it out (nine lines would
squeeze the iPad); the homepage carries the same text at the end of the modules run (.rom__fine) and in the footer. */
.exam { --fine-h: 54px; }
/* clear of the fixed back-to-top button in the bottom-left corner (76px each side) */
.exam__fine { position: absolute; z-index: 3; left: 50%; bottom: 0; width: min(1240px, 100% - 152px); transform: translateX(-50%); padding: 0 0 10px; font-size: 10.5px; line-height: 1.4; color: #8fa6bd; text-align: center; text-wrap: balance; }
@media (min-width: 901px) { #exam .pinhud { bottom: calc(var(--fine-h) + 12px); } }
/* short desktop windows (under 690 px tall, e.g. a 1366 × 768 laptop with browser bars): the step rail needs the whole stage, so
the small print steps aside there; the homepage still carries it at the end of the modules run (.rom__fine) and in the footer */
@media (min-width: 901px) and (max-height: 689px) { .exam { --fine-h: 0px; } .exam__fine { display: none; } #exam .pinhud { bottom: 16px; } }
.exam__lift { will-change: transform; transform-origin: 50% 80%; }
.exam .screen > img { object-position: 50% 0; }
.scanline { position: absolute; left: 0; right: 0; top: 0; height: 22%; opacity: 0; background: linear-gradient(180deg, rgba(38, 188, 215, 0), rgba(38, 188, 215, .28) 80%, rgba(38, 188, 215, .9) 100%); box-shadow: 0 2px 0 rgba(38, 188, 215, .9); transform: translate3d(0, -100%, 0); }
.scanline.is-run { animation: scan 1.1s var(--ease-in-out) both; }
@keyframes scan { 0% { opacity: 0; transform: translate3d(0, -100%, 0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translate3d(0, 460%, 0); } }
/* Joe's Oct 7 Loom "Update iPad Images and Add Posture Video": two live iPhones beside the iPad, the
4-view posture capture overlapping its edge and range of motion "more off to the side" next to it */
.exam__phones { position: absolute; z-index: 4; left: 95%; bottom: 3%; width: 64%; display: flex; align-items: flex-start; gap: 4.5%; } /* tops aligned: the two phones stay level when one caption wraps */
.exam__phone { flex: 1 1 0; min-width: 0; }
.exam__phone-cap { margin-top: 10px; padding-left: 14%; font-size: 12px; color: #8fa6bd; text-wrap: balance; } /* wraps on short laptop screens, where the phones are narrower than "4-view posture, live" */
.vrail { display: grid; gap: 2px; }
.vrail__i button { position: relative; display: grid; grid-template-columns: 30px 1fr; column-gap: 8px; text-align: left; width: 100%; padding: 11px 0 12px; color: #7d92ab; transition: color .4s var(--ease-out); }
.vrail__k { grid-row: span 2; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; padding-top: 4px; color: #6f86a1; }
.vrail__n { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
/* Joe's Oct 7 Loom "Fix Jumping Layout During Scrolling": every step keeps its sub-line's room, so only the
active one fades in and nothing below it moves as the views click through (it used to collapse and jump) */
.vrail__d { font-size: 13.5px; color: #9fb3c8; opacity: 0; transition: opacity .4s var(--ease-out); }
.vrail__i.is-active button { color: #fff; }
.vrail__i.is-active .vrail__k { color: var(--sky); }
.vrail__i.is-active .vrail__d { opacity: 1; }
.vrail .bar { background: rgba(255, 255, 255, .12); }
.vrail .bar::after { background: var(--sky); }
.vrail__i.is-done .bar::after { transform: scaleX(1); }
/* the kept sub-line room makes the rail ~80px taller; on short screens the steps tighten so it still fits the stage */
@media (max-height: 820px) and (min-width: 901px) { .vrail__i button { padding: 8px 0 9px; } }
@media (max-height: 760px) and (min-width: 901px) { .vrail__i button { padding: 5px 0 6px; } .vrail__n { line-height: 1.2; } .exam__h { margin-bottom: 12px; } .exam__left .exam__more--d { margin-top: 14px; } }
/* the stage now starts under the marquee band but the iPad (and its phones) only move half of --aud-h,
centred, so the readout lifts by the other half and keeps its old clearance above the phones */
.vread { justify-self: start; align-self: start; margin-top: calc(15svh - var(--aud-h) / 2); width: min(290px, 100%); }
.vread__k { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sky); display: flex; align-items: center; gap: 8px; }
.vread__k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 4px rgba(38, 188, 215, .2); animation: pulse 1.8s var(--ease-in-out) infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(38, 188, 215, 0); } }
.vread__stack { display: grid; margin-top: 12px; }
.vread__t { grid-area: 1 / 1; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.25; letter-spacing: -.02em; font-weight: 600; color: #fff; opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .35s var(--ease-in), transform .35s var(--ease-in); }
.vread__t.is-active { opacity: 1; transform: none; transition: opacity .7s var(--ease-out) .15s, transform .8s var(--ease-out) .15s; }
.vread__fine { margin-top: 16px; font-size: 12.5px; line-height: 1.45; color: #8fa6bd; }
/* round 6 (A16): "Learn more" sits under the step rail on desktop (the decorative iPhone overlaps the
readout column there) and under the readout on phones; only one of the two is ever displayed */
.exam__more--d { margin-top: 22px; }
.vread__more { margin-top: 14px; }
.exam__more--m { display: none; }
@media (max-width: 900px) { .exam__more--d { display: none; } .exam__more--m { display: block; } }
@media (max-width: 1100px) { .exam__phones { display: none; } }
@media (max-width: 900px) {
.exam { --aud-h: 78px; --fine-h: 0px; }
.exam__fine { display: none; }
.exam__aud { gap: 6px; }
.aud__k { font-size: 12.5px; }
.marquee__track { gap: 18px; }
.marquee__track span { font-size: 18px; }
.exam__stage { grid-template-columns: 1fr; grid-template-rows: auto auto auto; align-content: center; justify-items: center; gap: 12px; padding: 6px 0 44px; }
.exam__left { justify-self: stretch; width: 100%; text-align: center; }
.exam__left .eyebrow { display: none; }
.exam__h { font-size: 22px; margin-bottom: 8px; }
.exam__h br { display: none; }
.exam__dev { width: min(calc((100svh - var(--hdr) - var(--aud-h) - 300px) * .746), 70vw, 360px); }
.vrail { grid-template-columns: repeat(5, 1fr); gap: 6px; }
.vrail__i button { grid-template-columns: 1fr; text-align: center; padding: 6px 0 9px; }
.vrail__k, .vrail__d { display: none; }
.vrail__n { font-size: 14px; }
.vread { justify-self: stretch; width: 100%; text-align: center; margin-top: 0; }
.vread__k { justify-content: center; }
.vread__t { font-size: 16px; max-width: 32ch; margin-inline: auto; }
.vread__fine { display: none; }
}
/* =========================================================================
3. ASSESSMENTS ANYWHERE (black): a big card that opens to full-bleed
========================================================================= */
/* Loom #5: a longer hold while the small wall opens up. Oct 11 Loom ("another two to three seconds … allow it to continually scroll"):
the pinned span doubles (140 → 280vh, phones 170 → 340vh). The grow keeps its pace in the first half (GROW in script.js);
the second half is the full-bleed hold, with the screens streaming up under "Assessments anywhere, anytime." */
.grow { --scene-h: 380vh; --scene-h-m: 440vh; color: #fff; }
.grow__intro { position: absolute; z-index: 3; top: calc(var(--hdr) + 4vh); left: 0; right: 0; text-align: center; padding: 0 var(--gutter); }
.grow__media { position: absolute; inset: 0; overflow: hidden; clip-path: inset(24% 6% 5% 6% round 30px); -webkit-mask-image: linear-gradient(#000 84%, transparent); mask-image: linear-gradient(#000 84%, transparent); }
/* round 6 (A6): the wall now follows the App Store shelf (light divider), so the pass-2 -9vh tuck under the
4-view scene is gone. The card's top edge is measured from the heading in script.js (measureGrow). */
.wall { position: absolute; inset: -14% -3%; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; transform-origin: 50% 50%; }
.wall__col { display: grid; gap: 16px; align-content: start; will-change: transform; }
.wall__col:nth-child(even) { margin-top: -16%; }
.wall__s { width: 100%; border-radius: 16px; background: #111; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.wall__s--pad { aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 0; }
.wall__s--phone { aspect-ratio: 9 / 19; object-fit: cover; object-position: 50% 0; border-radius: 22px; }
.grow__scrim { position: absolute; inset: 0; background: radial-gradient(70% 55% at 50% 50%, rgba(0, 0, 0, .86), rgba(0, 0, 0, .45)); opacity: 0; }
.grow__over { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 0 var(--gutter); opacity: 0; }
.grow__kicker { font-size: 15px; font-weight: 600; color: var(--sky); margin-bottom: 10px; }
.grow__big { text-shadow: 0 6px 40px rgba(0, 0, 0, .7); font-size: clamp(34px, 6.4vw, 92px); font-weight: 800; letter-spacing: -.04em; line-height: 1.02; text-wrap: balance; }
@media (max-width: 1000px) { .wall { grid-template-columns: repeat(5, 1fr); } .wall__col:nth-child(6) { display: none; } }
@media (max-width: 700px) { .wall { grid-template-columns: repeat(3, 1fr); inset: -10% -22%; gap: 10px; } .wall__col { gap: 10px; } .wall__col:nth-child(-n+2), .wall__col:nth-child(6) { display: none; } }
/* =========================================================================
4. CHAPTERS "One iPad. The whole picture." (deep blue). Joe's Oct 8 Loom
"Updating PostureScribe UI and Pricing Details" (4:14): flipped with the
RemoteScreen scene, so it now follows RemoteScreen and takes the bay's
deep blue and soft glows (it has no product logo that would need a light
band); light text, the iPad in its on-dark frame.
========================================================================= */
.chaps { --scene-h: 280vh; --scene-h-m: 350vh; color: var(--dk-ink); } /* Loom #5: room for the Reports step's auto-flip; Oct 20 Loom: a fifth step (Progress) */
/* the bay's glow, mirrored: the light pools behind the iPad (left column) */
.chaps__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; background: radial-gradient(58% 70% at 31% 54%, rgba(18, 74, 119, .9) 0%, rgba(11, 42, 73, .55) 44%, rgba(6, 17, 31, 0) 100%); }
.chaps__bg i { position: absolute; border-radius: 50%; }
.chaps__bg .b1 { width: 60vw; height: 60vw; right: -20%; top: -32%; background: radial-gradient(closest-side, rgba(0, 128, 178, .3), transparent); animation: drift-b 24s var(--ease-in-out) infinite alternate; }
.chaps__bg .b2 { width: 46vw; height: 46vw; left: -8%; bottom: -28%; background: radial-gradient(closest-side, rgba(38, 188, 215, .2), transparent); animation: drift-a 20s var(--ease-in-out) infinite alternate; }
/* padding-bottom: the columns centre above the scroll HUD (at 1536×864 the open Progress text ran under it) */
.chaps__grid { position: relative; height: 100%; padding-top: var(--hdr); padding-bottom: 56px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 96px); }
/* the iPad sits 24 px above centre (margin-bottom; the copy stays centred) so the Progress step's flip
hint, which hangs below it, stays on screen */
.chaps__dev { position: relative; justify-self: center; width: min(calc((100svh - var(--hdr) - 130px) * .75), 100%, 580px); margin-bottom: 48px; }
.chaps__tilt { position: relative; transform-style: preserve-3d; transform-origin: 50% 70%; will-change: transform; }
.chaps__dev .screen > img { background: #fff; }
#chapIpad .screen::after { content: ""; position: absolute; inset: 0; z-index: 4; background: rgba(3, 12, 24, .5); opacity: 0; transition: opacity .6s var(--ease-out); pointer-events: none; }
.chaps.is-progress #chapIpad .screen::after { opacity: 1; }
.chaps__copy { max-width: 520px; }
.chaps__lede { margin: 16px 0 24px; font-size: clamp(16.5px, 1.2vw, 18px); color: #b9c8d8; max-width: 42ch; }
.clist { display: grid; }
.is-measuring, .is-measuring * { transition: none !important; }
.clist__i { position: relative; border-top: 1px solid rgba(255, 255, 255, .12); }
.clist__i button { display: grid; gap: 2px; width: 100%; text-align: left; padding: 14px 0 12px; }
.clist__k { font-size: 12.5px; font-weight: 600; color: #8fa6bd; transition: color .3s; min-height: 18px; display: flex; align-items: center; }
/* Joe's own white LeanScreen master (Drive LeanScreen_Logo_White.ai: colour icon, white "LeanScreen™" and tagline), no plate,
never recoloured (final review home-lean-ondark; it replaced the in-house -on-dark twin). Resting, it only dims, so it reads
as muted as the other labels (white at .55 on the bay blue ≈ their #8fa6bd); the active step shows it at full strength. */
.clist__logo { height: 22px; width: auto; opacity: .55; transition: opacity .4s; }
.clist__t { font-size: clamp(18px, 1.6vw, 24px); font-weight: 600; letter-spacing: -.02em; color: #8fa6bd; transition: color .4s var(--ease-out), font-size .4s var(--ease-out); }
.clist__b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease-out); }
.clist__b > p { overflow: hidden; font-size: clamp(15px, 1.05vw, 16px); color: #c3d1de; opacity: 0; transition: opacity .4s var(--ease-out); }
.clist__i.is-active .clist__k { color: var(--sky); }
.clist__i.is-active .clist__logo { opacity: 1; }
.clist__i.is-active .clist__t { color: #fff; }
.clist__i.is-active .clist__b { grid-template-rows: 1fr; }
.clist__i.is-active .clist__b > p { opacity: 1; padding-bottom: 16px; transition-delay: .12s; }
.clist__i--big.is-active .clist__t { font-size: clamp(22px, 2.1vw, 32px); letter-spacing: -.03em; }
.clist__i .bar { top: -1px; bottom: auto; background: transparent; }
.clist__i .bar::after { background: var(--sky); }
/* Progress: the PDF lifts out of the iPad; client report in front, flips to professional */
.lift { position: absolute; left: 3.9%; right: 3.9%; top: 2.98%; bottom: 2.98%; z-index: 6; pointer-events: none; transform-style: preserve-3d; }
.lift__back, .lift__card { position: absolute; inset: 0; opacity: 0; transition: opacity .3s var(--ease-in), transform .35s var(--ease-in); }
.lift__back img, .lift__face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; border-radius: 6px; background: #fff; }
/* Oct 17 Loom: a very fine (1 px) black stroke round every report page, so the stacked pages stay distinct */
.lift__back { border-radius: 6px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .9), 0 24px 48px -18px rgba(0, 0, 0, .7); }
.lift__card { display: block; width: 100%; height: 100%; perspective: 1600px; cursor: pointer; border-radius: 6px; }
.lift__face { position: absolute; inset: 0; border-radius: 6px; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform .85s var(--ease-in-out); box-shadow: 0 0 0 1px rgba(0, 0, 0, .9), 0 2px 4px rgba(0, 0, 0, .25), 0 50px 90px -30px rgba(0, 0, 0, .85); background: #fff; }
.lift__face--back { transform: rotateY(180deg); }
.lift.is-flip .lift__face--front { transform: rotateY(-180deg); }
.lift.is-flip .lift__face--back { transform: rotateY(0); }
/* bottom left (Oct 17 Loom): the top left now carries the demo clinic's name and address, which the pill used to cover */
.lift__tag { position: absolute; left: 5%; bottom: 3.2%; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .01em; padding: 6px 11px 6px 9px; border-radius: 999px; background: var(--ink); color: #fff; box-shadow: 0 6px 14px -6px rgba(11, 26, 46, .5); }
.lift__tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9); }
.lift__tag--pro { background: var(--blue); }
/* the chips reach past the iPad into the gap before the copy column; that gap is only 6vw (79–96 px), so they start further
in as it narrows and always stop ≥ 12 px short of the lede (QA: 19–32 px clear from 1321 to 2560 wide). The glass is near
opaque: nothing behind it reads through */
.lift__tabs { position: absolute; left: calc(100% - 25px - max(22px, 118px - 6vw)); top: 24%; z-index: 3; display: grid; gap: 8px; justify-items: start; transform: translateZ(60px); }
.lift__tabs li { display: flex; align-items: center; gap: 6px; padding: 7px 11px 7px 9px; border-radius: 11px; background: rgba(16, 44, 74, .96); color: #eef4f8; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 12px 26px -12px rgba(0, 0, 0, .8); font-size: 12.5px; font-weight: 600; white-space: nowrap; opacity: 0; transform: translate3d(-18px, 0, 0) scale(.94); transition: opacity .25s var(--ease-in), transform .3s var(--ease-in); }
.lift__tabs { width: max-content; }
.lift__tabs svg { width: 15px; height: 15px; flex: none; color: var(--sky); }
.lift__hint { position: absolute; left: 41%; top: calc(100% + 16px); transform: translate3d(-50%, 8px, 80px); display: flex; align-items: center; gap: 9px; padding: 7px 16px 7px 7px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 13.5px; font-weight: 600; white-space: nowrap; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .75); opacity: 0; transition: opacity .3s, transform .4s var(--ease-out); }
.lift__hint-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--yellow); color: var(--ink); }
.lift__hint svg { width: 14px; height: 14px; }
.lift.is-flip .lift__hint-ic { animation: flip-spin .6s var(--ease-in-out); }
@keyframes flip-spin { from { transform: rotateY(180deg); } }
.lift__hint-b, .lift.is-flip .lift__hint-a { display: none; }
.lift.is-flip .lift__hint-b { display: inline; }
.chaps.is-progress .lift { pointer-events: auto; }
.chaps.is-progress .lift__back { opacity: 1; transform: translate3d(9%, 4%, 0) rotate(4.5deg) scale(.86); transition: opacity .6s var(--ease-out) .2s, transform 1s var(--ease-out-expo) .2s; }
.chaps.is-progress .lift__card { opacity: 1; transform: translate3d(-9%, 0, 40px) rotate(-3deg) scale(.95); transition: opacity .5s var(--ease-out), transform 1.05s var(--ease-out-expo); }
.chaps.is-progress .lift__tabs li { opacity: 1; transform: none; transition: opacity .5s var(--ease-out) calc(var(--i) * 90ms + 550ms), transform .7s var(--ease-spring) calc(var(--i) * 90ms + 550ms); }
.chaps.is-progress .lift__hint { opacity: 1; transform: translate3d(-50%, 0, 80px); transition: opacity .5s var(--ease-out) .8s, transform .6s var(--ease-out) .8s; }
.chaps.is-progress .lift__hint { pointer-events: none; }
/* Progress (Joe's Oct 20 Loom): the comparison report that waited behind the client report deals itself to the front
(3D-sorted by translateZ, so the two cross mid-move) and the flipped card steps back to its spot; the demo client's two
front views pop out of the sheet beside it, and the "then → now" chips take the share tabs' place on wide screens. */
.lift__tag--cmp, .lift__loupe, .lift__deltas li { opacity: 0; }
.lift__tag--cmp { transition: opacity .3s; }
.lift__tag--cmp i { background: var(--sky); }
.chaps.is-compare .lift { pointer-events: none; }
.chaps.is-compare .lift__back { transform: translate3d(-5%, -1%, 70px) rotate(-1.5deg) scale(.97); transition: opacity .4s var(--ease-out), transform 1.05s var(--ease-out-expo); }
.chaps.is-compare .lift__card { transform: translate3d(12%, 5%, 0) rotate(5deg) scale(.84); transition: opacity .4s var(--ease-out), transform 1.05s var(--ease-out-expo); }
.chaps.is-compare .lift__tag--cmp { opacity: 1; transition: opacity .4s var(--ease-out) .5s; }
.chaps.is-compare .lift__tabs li { opacity: 0; transform: translate3d(-18px, 0, 0) scale(.94); transition: opacity .2s var(--ease-in), transform .25s var(--ease-in); }
.chaps.is-compare .lift__hint { opacity: 0; transform: translate3d(-50%, 8px, 80px); transition: opacity .2s, transform .3s; }
.lift__loupe { position: absolute; left: -15%; bottom: 5%; width: 58%; z-index: 4; margin: 0; padding: 10px 10px 9px; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 0 0 0 1px rgba(11, 26, 46, .12), 0 30px 60px -22px rgba(0, 0, 0, .8); transform: translate3d(14%, 10%, 90px) scale(.7); transform-origin: 30% 20%; transition: opacity .25s var(--ease-in), transform .3s var(--ease-in); }
.lift__loupe figcaption { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0 2px 7px; }
.lift__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px; }
.lift__pair > span { display: grid; gap: 6px; }
.lift__pair img { width: 100%; height: auto; aspect-ratio: 248 / 461; object-fit: cover; border-radius: 6px; box-shadow: 0 0 0 1px rgba(11, 26, 46, .16); background: #fff; }
.lift__pair em { font-style: normal; font-size: 12px; font-weight: 600; line-height: 1.25; text-align: center; color: var(--ink-2); }
.lift__pair em b { display: block; font-weight: 700; color: var(--ink); }
.lift__pair > span + span em b { color: var(--blue-t); }
.chaps.is-compare .lift__loupe { opacity: 1; transform: translate3d(0, 0, 90px); transition: opacity .45s var(--ease-out) .45s, transform .9s var(--ease-spring) .45s; }
.lift__deltas { position: absolute; left: calc(100% - 72px - max(22px, 118px - 6vw)); top: 30%; z-index: 5; display: grid; gap: 8px; width: max-content; transform: translateZ(110px); }
.lift__deltas li { display: grid; gap: 1px; padding: 7px 12px 8px 11px; border-radius: 12px; background: rgba(16, 44, 74, .96); color: #eef4f8; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 12px 26px -12px rgba(0, 0, 0, .8); transform: translate3d(-18px, 0, 0) scale(.94); transition: opacity .2s var(--ease-in), transform .25s var(--ease-in); }
.lift__deltas span { font-size: 11px; font-weight: 600; color: #9fb4c8; }
.lift__deltas b { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.lift__deltas svg { width: 12px; height: 12px; color: var(--sky); }
.chaps.is-compare .lift__deltas li { opacity: 1; transform: none; transition: opacity .5s var(--ease-out) calc(var(--i) * 90ms + 700ms), transform .7s var(--ease-spring) calc(var(--i) * 90ms + 700ms); }
@media (prefers-reduced-motion: reduce) { .chaps__bg i { animation: none !important; } }
/* laptop heights: the copy column (kept at its tallest step's height by steady()) ran under the scroll HUD and past the
bottom of the screen at 1366×768 and 1280×720, hiding the Progress text, so it tightens like the RemoteScreen column */
@media (max-height: 820px) and (min-width: 901px) {
.chaps__copy .h2 { font-size: clamp(30px, 3.3vw, 44px); }
.chaps__lede { margin: 10px 0 16px; font-size: 16px; }
.clist__i button { padding: 10px 0 8px; }
.clist__i.is-active .clist__b > p { padding-bottom: 12px; }
.clist__i--big.is-active .clist__t { font-size: clamp(22px, 2vw, 28px); }
}
@media (max-height: 740px) and (min-width: 901px) {
.chaps__copy .eyebrow { margin-bottom: 6px; }
.chaps__copy .h2 { font-size: clamp(28px, 2.9vw, 36px); }
.chaps__lede { margin: 8px 0 12px; font-size: 15px; }
.clist__i button { padding: 7px 0 6px; }
.clist__t { font-size: clamp(17px, 1.45vw, 21px); }
.clist__b > p { font-size: 14.5px; }
.clist__i.is-active .clist__b > p { padding-bottom: 10px; }
}
@media (max-width: 1320px) { .lift__tabs, .lift__deltas { display: none; } }
@media (max-width: 900px) {
.chaps__grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; gap: 14px; padding-top: calc(var(--hdr) + 12px); padding-bottom: 0; }
.chaps__dev { width: min(calc((100svh - var(--hdr)) * .3), 52vw, 300px); margin-bottom: 0; }
/* the lifted report sits right above the heading here: the copy paints over the stage, so the report's (and the iPad's)
drop shadow passes behind the white heading instead of greying "iPad." and "picture." (QA: glyph peaks 243 at every step) */
.chaps__copy { max-width: none; position: relative; z-index: 1; }
.lift__face { box-shadow: 0 0 0 1px rgba(0, 0, 0, .9), 0 2px 4px rgba(0, 0, 0, .25), 0 34px 60px -28px rgba(0, 0, 0, .72); }
.chaps__copy .eyebrow { display: none; }
.chaps__copy .h2 { font-size: 26px; }
.chaps__lede { display: none; }
.clist { margin-top: 10px; }
.clist__i:not(.is-active) .clist__t { font-size: 15px; }
.clist__i--big.is-active .clist__t { font-size: 20px; }
.clist__i button { padding: 8px 0 7px; }
.clist__i:not(.is-active) .clist__k { display: none; }
.clist__b > p { font-size: 14px; }
.lift__tabs { display: none; }
.lift__hint { top: auto; bottom: 4%; left: 46%; font-size: 12px; padding: 5px 12px 5px 5px; }
.lift__hint-ic { width: 22px; height: 22px; }
.chaps.is-progress .lift__card { transform: translate3d(-8%, -3%, 60px) rotate(-3deg) scale(1.02); }
/* Progress: the sheet moves right and the two front views hang off the iPad's left edge, captioned by visit */
.chaps.is-compare .lift__back { transform: translate3d(9%, 0, 70px) rotate(2deg) scale(1.02); }
.chaps.is-compare .lift__card { transform: translate3d(-6%, 3%, 0) rotate(-5deg) scale(.9); }
.lift__loupe { left: -38%; top: 9%; bottom: auto; width: 74%; padding: 6px 6px 5px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(11, 26, 46, .12), 0 22px 40px -18px rgba(0, 0, 0, .8); transform: translate3d(22%, 4%, 90px) scale(.7); }
.lift__loupe figcaption { display: none; }
.lift__pair { gap: 5px; }
.lift__pair > span { gap: 3px; }
.lift__pair img { border-radius: 4px; }
.lift__pair em { font-size: 10.5px; line-height: 1.2; white-space: nowrap; }
.lift__tag--cmp { left: auto; right: 5%; white-space: nowrap; font-size: 11px; padding: 5px 9px 5px 8px; }
/* five steps: the closed titles, the heading and the iPad give back the room the fifth step takes */
.chaps__copy .h2 br { display: none; }
.chaps__copy .h2 { font-size: 23px; }
.clist__i button { padding: 7px 0 6px; }
}
@media (max-width: 900px) and (max-height: 760px) {
.chaps__dev { width: min(calc((100svh - var(--hdr)) * .27), 52vw, 300px); }
.clist { margin-top: 6px; }
.clist__i:not(.is-active) .clist__t { font-size: 14.5px; }
.clist__i button { padding: 6px 0 5px; }
.clist__b > p { font-size: 13.5px; }
.clist__i.is-active .clist__b > p { padding-bottom: 8px; }
}
/* iPhone SE-class Safari (svh ≈ 549): the open step's text ran under the scroll HUD even with four steps; the heading
stays for screen readers only and the iPad shrinks so all five steps and the open one's text fit */
@media (max-width: 900px) and (max-height: 620px) {
.chaps__dev { width: min(calc((100svh - var(--hdr)) * .23), 52vw, 300px); }
.chaps__copy .h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.clist { margin-top: 0; }
.clist__b > p { font-size: 13px; }
.lift__pair em { font-size: 10px; }
.lift__pair em b, .lift__tag--cmp { display: none; } /* too narrow here: the dates alone, and the step's own heading names the report */
}
/* =========================================================================
3. AI-GUIDED HEALTH HISTORY (RemoteScreen, with the AI's voice). Joe's
Oct 8 Loom "Updating PostureScribe UI and Pricing Details" (4:14): moved
up right after the 4-view exam and onto WHITE, so the original
full-colour RemoteScreen logo sits on the page with no plate; dark text,
brand-blue pulsing rings, soft sky glows, light device frames.
========================================================================= */
.bay { --scene-h: 225vh; --scene-h-m: 300vh; color: var(--ink); }
/* pass 2: every glow layer inside a pinned scene fades out at its top and bottom
edges, so mid-crossfade it never draws a straight edge across the screen */
.bay__bg, .chaps__bg, .glowbox, .inst__sticky::before, .ray__sticky::before { -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.glowbox { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* on white: a faint sky pool behind the phones and soft light-sky glows (the old deep-blue pool moved to .chaps__bg) */
.bay__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; background: radial-gradient(52% 64% at 68% 54%, rgba(38, 188, 215, .12) 0%, rgba(38, 188, 215, .045) 46%, rgba(255, 255, 255, 0) 100%); }
.bay__bg i { position: absolute; border-radius: 50%; }
.bay__bg .b1 { width: 60vw; height: 60vw; left: -18%; top: -30%; background: radial-gradient(closest-side, rgba(159, 227, 240, .3), transparent); animation: drift-a 24s var(--ease-in-out) infinite alternate; }
.bay__bg .b2 { width: 46vw; height: 46vw; right: -6%; bottom: -26%; background: radial-gradient(closest-side, rgba(38, 188, 215, .13), transparent); animation: drift-b 20s var(--ease-in-out) infinite alternate; }
.bay__bg .b3 { width: 30vw; height: 30vw; left: 52%; top: 16%; background: radial-gradient(closest-side, rgba(159, 227, 240, .3), transparent); animation: drift-c 16s var(--ease-in-out) infinite alternate; transition: opacity .8s; opacity: 0; }
.bay.is-you .bay__bg .b3 { opacity: 1; }
/* Joe (Oct 8): "these pulsating rings can be blue as well". On white a faded ring turns pale cyan, so the rings use the
RemoteScreen logo's own deeper blue at a strong alpha, and a gentler ease-out keeps three of them in view at once
(the dark-band expo ease faded each one out within a second). "Your turn" shifts to the lighter brand blue, still blue. */
/* The rings must never run behind the copy: deep blue on white they read as stray lines through the text. The ring box
covers the band and a mask clears its left half (the copy column ends at 48% at every two-column width) with a short
fade from 50% to 57%; one column (≤900 px), it clears everything above the phones instead (the copy ends at 308 px) */
.rings { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 50%, #000 57%); mask-image: linear-gradient(90deg, transparent 50%, #000 57%); }
.rings i { position: absolute; left: 70%; top: 52%; width: min(110svh, 1000px); aspect-ratio: 1; margin-left: calc(min(110svh, 1000px) / -2); margin-top: calc(min(110svh, 1000px) / -2); transform-origin: 50% 50%; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(0, 96, 160, .85); opacity: 0; transform: scale(.2); animation: ripple 5.6s cubic-bezier(.3, .55, .45, 1) infinite; }
.rings i:nth-child(2) { animation-delay: 1.4s; } .rings i:nth-child(3) { animation-delay: 2.8s; } .rings i:nth-child(4) { animation-delay: 4.2s; }
.bay.is-you .rings i { box-shadow: inset 0 0 0 1.5px rgba(0, 128, 178, .8); }
.bay.is-sound .rings i { animation-duration: 3.6s; }
@keyframes ripple { 0% { opacity: 0; transform: scale(.2); } 12% { opacity: .9; } 100% { opacity: 0; transform: scale(1); } }
.bay__grid { position: relative; height: 100%; padding-top: var(--hdr); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 64px); }
/* the original full-colour logo straight on white (no .logo-chip plate, Joe Oct 8: "this doesn't look good") */
.bay__logo { display: block; height: 54px; width: auto; max-width: 100%; margin: 0 0 22px; }
.bay__h { font-size: clamp(30px, 3.8vw, 52px); }
.bay__lede { margin-top: 12px; font-size: 15.5px; color: var(--ink-2); max-width: 52ch; }
.bsteps { display: grid; margin-top: 16px; max-width: 500px; }
.bsteps__i { position: relative; border-top: 1px solid var(--line); }
.bsteps__i button { display: grid; grid-template-columns: 32px 1fr; column-gap: 10px; width: 100%; text-align: left; padding: 10px 0; }
.bsteps__n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: var(--ink-3); box-shadow: inset 0 0 0 1.5px var(--line-2); transition: all .4s var(--ease-out); margin-top: 1px; }
.bsteps__t { display: grid; gap: 2px; }
.bsteps__t b { font-size: 15.5px; font-weight: 600; color: var(--ink-3); transition: color .4s; }
/* the column must not jump between steps: every sub-line opens to the tallest one's height (--sub, from
evenSubs in script.js), and script.js tweens the closing and opening heights with one shared factor (bStep), so
no CSS height transition here: separate transitions drift apart when the steps change quickly */
.bsteps__t span { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); height: 0; overflow: hidden; opacity: 0; transition: opacity .4s; }
.bsteps__i.is-active .bsteps__n { background: var(--blue-t); color: #fff; box-shadow: 0 0 0 6px rgba(0, 128, 178, .12); } /* white on #0074A2: 5.2:1 */
.bsteps__i.is-active .bsteps__t b { color: var(--ink); }
.bsteps__i.is-active .bsteps__t span { height: var(--sub, 3em); opacity: 1; }
.bsteps__i.is-done .bsteps__n { background: rgba(0, 128, 178, .1); color: var(--blue-t); box-shadow: none; }
.bsteps__i button:hover .bsteps__t b { color: var(--ink); }
.bsteps .bar { top: -1px; bottom: auto; background: transparent; }
.bsteps .bar::after { background: var(--blue); }
.bay__fine { margin-top: 8px; font-size: 12.5px; color: var(--ink-3); max-width: 64ch; }
.bay__more { margin-top: 16px; }
/* phones hide .bay__fine, so the RemoteScreen availability (Joe, Oct 10 2026: AI intake USA only, photos and video worldwide)
rides beside Learn more there instead: no extra height, nothing below moves */
.bay__where { display: none; }
@media (max-width: 359px) { .bay__more .bay__where { font-size: 10.5px; line-height: 1.3; } .bay__where br { display: none; } }
/* WEB-155 (Joe, Oct 10 Loom, F4): RemoteScreen's message wherever it appears: nothing to download, any device; everything
comes to the professional to verify first (clients never see results in RemoteScreen); what it is great for */
.bay__lede-m, .bay__lede-s { display: none; } /* the mid lede is for laptop-height windows, the short one for phones */
.bay__uses { margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); max-width: 60ch; }
.bay__uses b { font-weight: 700; color: var(--blue-t); }
.bay__soon { display: table; margin-top: 6px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 20px; white-space: nowrap; color: #8a5300; background: #fff3d6; box-shadow: inset 0 0 0 1px rgba(236, 138, 28, .38); } /* #8a5300 on #fff3d6: 6.1:1 */
/* laptop heights: the logo and the reserved sub-line make the column taller, so tighten it to fit under the header */
@media (max-height: 820px) and (min-width: 901px) {
.bay__logo { height: 46px; margin-bottom: 16px; }
.bsteps__i button { padding: 8px 0; }
.bay__fine { margin-top: 6px; }
.bay__more { margin-top: 12px; }
.bay__uses { margin-top: 10px; }
}
/* WEB-155: below 920 px tall the mid lede (two lines) keeps the longer column under the header; below 800 px the
requirements line steps aside (footnote 7, the add-on card, the plans and the FAQ all still say it) */
@media (max-height: 920px) and (min-width: 901px) {
.bay__lede-l { display: none; }
.bay__lede-m { display: inline; }
}
@media (max-height: 800px) and (min-width: 901px) { .bay__fine { display: none; } }
/* 801–920 px tall (1536x864, 1440x840/900): WEB-157's plan line + WEB-155's "Great for" line both show, so the column tightens:
smaller uses line with its pill inline, tighter steps, and the logo a touch smaller (final review: 1536x864 cut Learn more) */
@media (max-height: 920px) and (min-height: 801px) and (min-width: 901px) {
.bay__logo { height: 44px; margin-bottom: 12px; }
.bsteps__i button { padding: 7px 0; }
.bay__uses { margin-top: 8px; font-size: 12.5px; line-height: 1.45; }
.bay__soon { display: inline-block; margin: 2px 0 0 4px; line-height: 18px; }
.bay__fine { margin-top: 6px; font-size: 12px; line-height: 1.4; }
.bay__more { margin-top: 12px; }
}
@media (max-height: 740px) and (min-width: 901px) {
.bay__h { font-size: clamp(28px, 3vw, 40px); }
.bay__lede { margin-top: 8px; }
.bsteps { margin-top: 12px; }
.bsteps__i button { padding: 7px 0; }
}
.bay__devs { position: relative; justify-self: center; width: min(calc((100svh - var(--hdr) - 150px) * .74), 100%, 450px); aspect-ratio: 1 / 1.35; }
/* opaque (at .9 the rings showed through its screen); it sits back by a touch less contrast and colour instead */
.bay__back { position: absolute; left: 0; top: 6%; width: 46%; filter: saturate(.85) contrast(.92) brightness(1.04); transform: rotate(-6deg); }
.bay__front { position: absolute; right: 4%; top: 0; width: 56%; will-change: transform; }
/* light-background device shadows (the frames lost device--on-dark): a soft ink drop plus a faint sky halo */
.bay__front .device { box-shadow: 0 1px 2px rgba(10, 20, 40, .12), 0 18px 34px -14px rgba(11, 26, 46, .32), 0 52px 96px -30px rgba(11, 26, 46, .42), 0 0 110px -26px rgba(38, 188, 215, .45); }
/* the captions sit over the phone's light screen, so they stay a dark pill (white text, ~15:1), with a softer shadow on white */
.bay__cap { position: absolute; z-index: 9; left: 50%; bottom: 12%; width: 128%; transform: translate3d(-50%, 6px, 0); text-align: center; font-size: 14.5px; line-height: 1.35; font-weight: 500; color: #fff; background: rgba(9, 21, 38, .88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 9px 13px; border-radius: 12px; box-shadow: 0 14px 30px -14px rgba(11, 26, 46, .55), inset 0 0 0 1px rgba(255, 255, 255, .1); opacity: 0; transition: opacity .3s var(--ease-out), transform .4s var(--ease-out); pointer-events: none; }
.bay__cap.is-on { opacity: 1; transform: translate3d(-50%, 0, 0); }
.bay__cap::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; }
@media (min-width: 901px) and (max-width: 1100px) { .bay.is-sound .bay__state { display: none; } }
/* Loom #5 QA: the row hangs from its right end, under the phone's right edge, with the sound button last, so nothing to its
left (the state pill's changing words, "Next question" coming and going) ever moves "Hear it" */
.bay__ctl { position: absolute; right: 0; top: calc(100% + 14px); display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.bay__ctl { width: max-content; } /* its natural width (a shrink-to-fit row squeezed the Next chevron to 0) */
.bay__ctl > .sound, .bay__ctl > .bnext { flex: none; }
.bay__state { display: flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--line-2); }
.bay__state i { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 8px rgba(0, 128, 178, .6); animation: pulse 1.6s var(--ease-in-out) infinite; }
.bay.is-you .bay__state i { background: #f6a623; box-shadow: 0 0 10px #f6a623; }
.sound { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 12px; border-radius: 999px; background: #fff; color: var(--navy); font-size: 14px; font-weight: 700; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .7); transition: transform .2s var(--ease-out), background .3s, color .3s; }
.sound:hover { transform: translateY(-1px); }
.sound:active { transform: scale(.97); }
/* hover stays put (see .btn); ::after is the ping ring */
.sound:hover::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 3px; }
.sound:active::before { content: ""; position: absolute; inset: -3px -6px; height: auto; }
.sound::after { content: ""; position: absolute; inset: -5px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, .55); animation: cue-ping 1.9s var(--ease-out) infinite; pointer-events: none; }
.sound__ic { display: grid; width: 20px; height: 20px; }
.sound__ic svg { grid-area: 1 / 1; width: 20px; height: 20px; }
.sound__t { display: grid; }
.sound__t span { grid-area: 1 / 1; }
.sound .sound__on { visibility: hidden; }
/* Loom #5: the voice starts OFF, and its "Hear it" button is red (the CTA red, like Learn more) with a soft red ping, so it is noticed */
.sound[aria-pressed="false"] { background: var(--cta-fill); color: #fff; box-shadow: var(--cta-sh); }
[data-tone="dark"] .sound[aria-pressed="false"] { box-shadow: var(--cta-sh-dk); }
.sound[aria-pressed="false"]:hover { box-shadow: var(--cta-sh-hover); }
[data-tone="dark"] .sound[aria-pressed="false"]:hover { box-shadow: var(--cta-sh-dk-hover); }
.sound[aria-pressed="false"]:active { background-position: 0 100%; }
.sound[aria-pressed="false"]::after { border-color: rgba(255, 128, 150, .75); }
.sound[aria-pressed="true"] { background: var(--sky); color: #04202b; }
.sound[aria-pressed="true"]::after { display: none; }
.sound[aria-pressed="true"] .sound__on { visibility: visible; }
.sound[aria-pressed="true"] .sound__off { visibility: hidden; }
.sound[aria-pressed="true"] .sw1 { animation: sw 1s var(--ease-in-out) infinite; }
.sound[aria-pressed="true"] .sw2 { animation: sw 1s var(--ease-in-out) infinite .2s; }
/* sound asked for before the visitor's first click, tap or key press: the browser plays it muted, and the
button keeps its "on" intent and says "Tap for sound" with a soft pulse */
.sound__tap { display: none; }
.sound.is-blocked { background: #fff; color: var(--navy); }
.sound.is-blocked .sound__t .sound__on { visibility: hidden; }
.sound.is-blocked .sound__tap { display: block; }
.sound.is-blocked::after { display: block; border-color: rgba(38, 188, 215, .8); animation-duration: 1.6s; }
@keyframes sw { 50% { opacity: .25; } }
/* the homepage voice row now sits on white (the shared .sound above also serves the RemoteScreen page's dark player,
so these light tweaks are scoped to .bay; the red "Hear it" keeps its own styles) */
.bay .sound[aria-pressed="true"] { box-shadow: 0 10px 22px -12px rgba(11, 26, 46, .45); }
.bay .sound.is-blocked { box-shadow: inset 0 0 0 1px var(--line-2), 0 10px 22px -12px rgba(11, 26, 46, .45); }
.bnext { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px 0 15px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 13.5px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--line-2), 0 8px 18px -12px rgba(11, 26, 46, .45); transition: background .25s, transform .2s var(--ease-out); }
.bnext:hover { background: var(--bg-2); }
.bnext.is-off { display: none; }
.bnext:active { transform: scale(.97); }
.bnext svg { flex: none; width: 14px; height: 14px; }
/* hover stays put (see .btn): the press shrink keeps a margin round the button until release. The progress line is clipped
to the pill by its own full-size layer instead of the button's overflow, which would have clipped that margin too. */
.bnext:active::after { content: ""; position: absolute; inset: -3px -6px; }
.bnext__p { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.bnext__p::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--blue); transform-origin: 0 50%; transform: scaleX(var(--bp, 0)); }
@media (max-width: 900px) {
.bay__grid { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: start; gap: 4px; padding-top: calc(var(--hdr) + 10px); }
.bay__logo { height: 36px; margin-bottom: 10px; }
.bay__h { font-size: 25px; }
.bay__fine, .bay__uses { display: none; }
.bay__lede { margin-top: 4px; font-size: 14px; line-height: 1.45; } /* phones: the one-line lede (nothing to download; results come to you first) */
.bay__lede-l, .bay__lede-m { display: none; }
.bay__lede-s { display: inline; }
.bay__more { display: flex; align-items: center; gap: 12px; }
.bay__where { display: block; min-width: 0; font-size: 11.5px; line-height: 1.35; color: var(--ink-3); }
.bsteps { margin-top: 6px; }
/* one step at a time, all stacked in one cell: the list keeps the tallest step's height, so the phones below stay put */
.bsteps__i { grid-area: 1 / 1; border: 0; }
.bsteps__i:not(.is-active) { visibility: hidden; }
.bsteps__t span { height: var(--sub, 3em); }
.bsteps__i button { padding: 6px 0 8px; }
.bay__devs { --dw: min(calc((100svh - var(--hdr) - 344px) * .74), 78vw, 330px); width: var(--dw); margin-top: 18px; } /* 18 px under the availability note beside Learn more (final review) */
.bay__cap { width: 150%; font-size: 13px; bottom: 8%; }
.bay__ctl { gap: 8px; top: calc(100% + 10px); }
.bay__state { font-size: 11px; padding: 6px 10px; }
.sound { height: 34px; font-size: 13px; }
.bnext { height: 34px; font-size: 12.5px; padding: 0 9px 0 12px; }
.bay.is-sound .bay__state { display: none; } /* "Next question" takes its place once the voice speaks */
/* the row may reach from the left gutter to the phone's right edge; the state pill gives way (ellipsis), the buttons never do */
.bay__ctl { max-width: calc((100vw - var(--dw)) / 2 + .96 * var(--dw) - 16px); }
.bay__state { min-width: 0; flex: 0 1 auto; overflow: hidden; }
.bay__state span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bay__ctl { justify-content: flex-end; } /* any overflow goes left, never past the sound button */
.bay__ctl > .bnext { flex: 0 1 auto; min-width: 0; } /* on the narrowest phones "Next question" shortens before anything moves */
.bnext__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rings { -webkit-mask-image: linear-gradient(transparent calc(var(--hdr) + 262px), #000 calc(var(--hdr) + 322px)); mask-image: linear-gradient(transparent calc(var(--hdr) + 262px), #000 calc(var(--hdr) + 322px)); }
.rings i { left: 50%; top: 66%; }
}
/* =========================================================================
6. APP STORE SHELF (mist): always moving, hover-enlarge
========================================================================= */
.store { padding: var(--pad) 0 clamp(56px, 7vw, 90px); overflow: clip visible; } /* Loom #5: clip only sideways, so the docking heading can wait in the band above */
.carousel--store .carousel__vp { padding: 34px 0 40px; }
.shots li { flex: none; width: clamp(176px, 16vw, 228px); position: relative; }
.shot { display: block; border-radius: 22px; }
.shot img { width: 100%; border-radius: 20px; box-shadow: 0 1px 2px rgba(11, 26, 46, .08), 0 20px 40px -24px rgba(11, 26, 46, .5); transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out); transform-origin: 50% 60%; }
.shots li:hover { z-index: 3; }
.shot:hover img, .shot:focus-visible img { transform: scale(1.09) translateY(-6px); box-shadow: 0 2px 4px rgba(11, 26, 46, .1), 0 40px 60px -26px rgba(11, 26, 46, .6); }
/* =========================================================================
7. INSTRUMENT PINS + CONFIGURATOR (white, pinned)
========================================================================= */
.inst { --scene-h: 232vh; --scene-h-m: 300vh; }
.inst__sticky::before, .ray__sticky::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.inst__sticky::before { background: radial-gradient(70% 60% at 50% 62%, rgba(232, 244, 250, .9) 0%, rgba(255, 255, 255, 0) 70%); }
.inst__sticky { isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; padding-top: calc(var(--hdr) + 2vh); padding-bottom: 50px; }
.inst__head { text-align: center; }
.inst__head .h2 { font-size: clamp(28px, 3.4vw, 44px); }
.inst__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(20px, 3vw, 48px); min-height: 0; }
.inst__col { display: grid; gap: 22px; }
.inst__col--l { justify-items: end; text-align: right; }
.co { position: relative; max-width: 290px; padding: 18px 20px; border-radius: 18px; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px var(--line); opacity: .42; transform: scale(.97); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), box-shadow .5s, background .5s; }
.co.is-active { opacity: 1; transform: none; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 128, 178, .22), var(--shadow-2); }
.co__n { float: left; margin: 2px 8px 0 0; line-height: 18px; font-size: 11.5px; font-weight: 700; color: var(--sky); font-variant-numeric: tabular-nums; }
.inst__col--l .co__n { float: right; margin: 2px 0 0 8px; } /* Loom #4: number and label share a line, which pays for the Learn more row */
.co__k { font-size: 12.5px; font-weight: 600; color: var(--blue-t); margin: 2px 0 6px; min-height: 18px; display: flex; align-items: center; }
.inst__col--l .co__k { justify-content: flex-end; }
.co__k img { height: 20px; width: auto; }
.co h3 { clear: both; font-size: 17px; line-height: 1.25; letter-spacing: -.015em; margin-bottom: 6px; }
.co h3 + p { font-size: 14px; color: var(--ink-2); }
/* Loom #5: a click anywhere on a callout switches the iPad to it (the heading's button stretches over the card);
its red Learn more (Loom #4) sits above that and opens the matching section of the PostureScreen page */
.inst__col .co { cursor: pointer; }
.co__pick { display: block; width: 100%; text-align: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; }
.co__pick::after { content: ""; position: absolute; inset: 0; border-radius: 18px; }
.co__pick:focus-visible { outline: none; }
.co__pick:focus-visible::after { outline: 3px solid var(--sky); outline-offset: 3px; }
.co__more { position: relative; z-index: 1; display: flex; width: fit-content; margin-top: 12px; } /* block-level, so a collapsed button leaves no line box behind */
.inst__col--l .co__more { margin-left: auto; }
/* only the active card shows its button (a click or hover makes a card active), so the columns keep their height */
.inst__col .co__more { max-height: 40px; transition: max-height .45s var(--ease-out), margin-top .45s var(--ease-out), opacity .35s var(--ease-out), transform .2s var(--ease-out), box-shadow .25s, background-position .2s var(--ease-out); }
.inst__col .co:not(.is-active):not(:has(:focus-visible)) .co__more { max-height: 0; margin-top: 0; opacity: 0; pointer-events: none; } /* a hidden button must not catch the click meant for its card; keyboard focus (not a mouse click's focus) reveals it */
.co sup { position: relative; z-index: 1; }
@media (hover: hover) { .co:not(.is-active):hover { opacity: .78; } } /* a tap must not leave a card half-lit */
.co:has(:focus-visible) { opacity: 1; }
/* Loom #5 QA: a hover preview (.is-peek) lights up the hovered card or pill without changing any size; the chosen
card dims in place and keeps its Learn more slot, so nothing moves under the pointer */
.inst__col .co.is-peek { opacity: 1; transform: none; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 128, 178, .22), var(--shadow-2); }
.inst.is-peek .inst__col .co.is-active:not(.is-peek) { opacity: .42; transform: scale(.97); background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px var(--line); }
.inst.is-peek .inst__col .co.is-active:not(.is-peek) .co__more { opacity: 0; pointer-events: none; }
.swatches .sw.is-peek { background: var(--ink); color: #fff; }
.inst.is-peek .swatches .sw.is-active:not(.is-peek) { background: none; color: var(--ink-3); }
.inst__specs { max-width: 300px; }
/* pass 2: the third stat gets the room it needs (Loom #5: "or iPadOS 26 or later" in two lines) */
.inst__specs dl { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: 11px; padding: 6px 4px; }
.inst__specs dt { white-space: nowrap; font-size: 17px; font-weight: 700; letter-spacing: -.025em; }
.inst__specs dd { font-size: 12px; color: var(--ink-3); line-height: 1.3; text-wrap: balance; }
.inst__stage { position: relative; display: grid; justify-items: center; gap: 18px; }
.inst__tilt { width: min(calc((100svh - var(--hdr) - 280px) * .75), 30vw, 390px); transform-style: preserve-3d; transition: transform .6s var(--ease-out); }
.inst__floor { width: 70%; height: 22px; margin-top: -10px; border-radius: 50%; background: radial-gradient(closest-side, rgba(11, 26, 46, .22), transparent); }
.pin { position: absolute; left: var(--px); top: var(--py); width: 0; height: 0; transition: left .9s var(--ease-in-out), top .9s var(--ease-in-out); }
.pin i { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; background: rgba(38, 188, 215, .25); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--blue), 0 6px 18px rgba(0, 0, 0, .3); }
.pin i::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(38, 188, 215, .7); animation: ping 2s var(--ease-out) infinite; }
@keyframes ping { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.inst__lead { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 3; }
.inst__lead path { fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-dasharray: 4 5; animation: dash 1s linear infinite; }
.inst__lead circle { fill: var(--blue); }
@keyframes dash { to { stroke-dashoffset: -9; } }
.swatches { display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); }
.sw { display: flex; align-items: center; gap: 7px; padding: 7px 12px 7px 8px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-3); transition: background .3s, color .3s; }
.sw i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); transition: transform .4s var(--ease-spring); }
.sw.is-active { background: var(--ink); color: #fff; }
.sw.is-active i { transform: scale(1.15); }
.inst__mob { display: none; list-style: none; }
.inst__mob svg, .inst__mob img { display: inline-block; vertical-align: -2px; }
@media (max-width: 1200px) {
.inst__sticky { padding-top: calc(var(--hdr) + 8px); grid-template-rows: auto auto auto; align-content: start; }
.inst__head .eyebrow { display: none; }
.inst__head .h2 { font-size: 24px; }
.inst__grid { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: start; gap: 10px; padding-top: 10px; }
.inst__col { display: none; }
.inst__stage { gap: 10px; }
/* WEB-175: the iPad only gets the height the pinned scene has left, so on a short phone (or under Safari's toolbars) the
card deck never covers the swatches: 100svh less the header, 94 px of fixed spacing (8 px under the header, the grid's
10 px padding, the 10 px gaps above and below the swatches, the deck's 6 px margin, the 50 px kept clear for the pinhud)
and the heading, swatches and deck themselves (--inst-rest, measured by script.js), times the iPad frame's width/height
(.7649, devices.css). With room to spare the other limits are smaller, so taller screens are unchanged. Narrower than
60 px (landscape phones only) an iPad isn't recognisable, so the max() term takes it to 0 rather than leave a speck. */
.inst__tilt { --inst-fit: calc((100svh - var(--hdr) - 94px - var(--inst-rest, 0px)) * .7649); width: min(calc((100svh - var(--hdr)) * .42), var(--inst-fit), max(0px, (var(--inst-fit) - 60px) * 10000), 66vw, 330px); }
.inst__floor { display: none; }
.inst__lead { display: none; }
.swatches { gap: 2px; padding: 4px; max-width: calc(100vw - 24px); flex-wrap: wrap; justify-content: center; border-radius: 20px; }
.sw { padding: 6px 8px; font-size: 11.5px; gap: 5px; }
.sw i { width: 10px; height: 10px; }
.inst__mob { display: grid; width: min(720px, 100% - 2 * var(--gutter)); margin: 6px auto 0; }
.inst__mob .co { grid-area: 1 / 1; max-width: none; padding: 12px 16px; opacity: 0; transform: translate3d(0, 10px, 0); }
.inst__mob .co.is-active { opacity: 1; transform: none; }
.inst__mob .co h3 { font-size: 15.5px; }
.inst__mob .co h3 + p { font-size: 13px; }
.inst__mob .co { visibility: hidden; transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), visibility 0s linear .5s; }
.inst__mob .co.is-active { visibility: visible; transition-delay: 0s; }
.inst__mob .co:not(.is-active) { pointer-events: none; } /* WEB-169: a card on its way out stays visible while it fades and may sit on top; the tap goes to the chosen card under it (script.js makes it inert too, for Tab and screen readers) */
.inst__mob .co__more { margin-top: 8px; }
}
/* pass 2: on tablets the instrument keeps its eyebrow and its desktop heading scale */
@media (max-width: 1200px) and (min-width: 701px) {
.inst__head .eyebrow { display: block; margin-bottom: 6px; }
.inst__head .h2 { font-size: clamp(28px, 3.4vw, 44px); }
.inst__tilt { width: min(calc((100svh - var(--hdr) - 60px) * .42), var(--inst-fit), max(0px, (var(--inst-fit) - 60px) * 10000), 66vw, 330px); }
}
/* pass 2: on phones the five swatches stay on one row (no orphaned "LeanScreen") */
@media (max-width: 480px) {
.swatches { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; border-radius: 999px; }
.swatches::-webkit-scrollbar { display: none; }
.sw { flex: none; white-space: nowrap; padding: 6px 8px; }
.sw i { display: none; }
}
/* WEB-175: ...and that row fits the screen, so no pill hides past the edge until the row is swiped: the smaller pills start
at 384 px (375 px iPhones lost LeanScreen's right end by 6 px), and under 360 px they tighten further (320 px lost 30 px) */
@media (max-width: 384px) { .sw { padding: 6px 6px; font-size: 11px; } }
@media (max-width: 359px) { .swatches { max-width: calc(100vw - 16px); gap: 0; padding: 3px; } .sw { padding: 6px 4px; } }
/* =========================================================================
8. ROM TRIO (light sky since the Oct 8 Loom "Updating PostureScribe UI…" 6:13: slate (Loom #4)
still blended into the black Scribe band, so ROM is now a light scene, studio-lit, and the page
crossfades light → black into PostureScribe.AI. Contrast on #d2e8f4: eyebrow 4.7:1, lede 6.9:1,
disclaimer 5.7:1.)
========================================================================= */
.rom { overflow: clip; padding: var(--pad) 0 0; color: var(--ink); }
.rom__glow { position: absolute; left: 50%; top: 62%; width: 1100px; height: 760px; margin: -380px 0 0 -550px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .95), transparent); pointer-events: none; }
.rom__head { position: relative; text-align: center; display: grid; justify-items: center; }
.rom__head .eyebrow { color: var(--blue-d); }
.rom__head .lede { color: var(--ink-2); margin-top: 12px; }
.rom__more { margin-top: 22px; }
/* WEB-142 (Joe, Oct 9 Loom 5:45): the ROMScreen logo heads the band (light-background master, its own tagline), then
App Store caption 7 as the heading, its second line in the ROMScreen blue (#006a94 → #0080b2: ≥ 3.6:1 on the sky band,
large text), so logo, heading and lede read top to bottom without repeating one another */
.rom__logo { display: block; height: clamp(48px, 4.6vw, 66px); width: auto; max-width: 100%; margin: 0 auto 24px; }
.rom__h { max-width: 30ch; }
.rom__h2 { display: block; background: linear-gradient(90deg, var(--blue-d), var(--blue)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-bottom: .08em; }
.rom__stage { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: clamp(14px, 3vw, 40px); padding: 50px var(--gutter) 0; height: min(74svh, 680px); clip-path: inset(-100vmax -100vmax 0 -100vmax); }
/* Oct 8: the side phones hang ~95 px below the stage (margin-bottom -6% + tilt). The band used to end at the stage's
bottom, so .rom's overflow clip hid that; now the disclaimer (.rom__fine) follows, so the stage clips its own
bottom edge (only the bottom: tops and sides stay free). */
/* pass 2: the phones are sized by the stage's height too (iPhone height = 2.087 × width),
so on short screens (iPad landscape 1024×768, 1366×768 laptops) the centre phone no
longer climbs over the lede. At 1440×900 the widths are unchanged (310 / 270). */
.rom__ph { width: min(26vw, 270px, calc((min(74svh, 680px) - 16px) / 2.087 * .87)); flex: none; will-change: transform; }
.rom__ph--c { width: min(30vw, 310px, calc((min(74svh, 680px) - 16px) / 2.087)); z-index: 2; }
.rom__ph--l, .rom__ph--r { margin-bottom: -6%; }
/* light band: the phones get a soft navy studio shadow instead of the kit's on-dark rim light */
.rom__ph .device { --shadow: 0 1px 2px rgba(10, 30, 50, .12), 0 18px 34px -14px rgba(10, 40, 70, .35), 0 60px 90px -40px rgba(10, 50, 90, .45); }
.rom__stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(180deg, transparent, var(--live-bg, #d2e8f4) 92%); z-index: 2; pointer-events: none; }
.rom__tags { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 10px; z-index: 3; flex-wrap: wrap; padding: 0 16px; }
.rom__tags li { font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--line), 0 8px 18px -10px rgba(11, 26, 46, .35); color: var(--ink); }
/* WEB-166: each phone's pause button (script.js adds a .vctl to every [data-vbox]; WCAG 2.2.2) sits top right on these
phones, just under the app's instruction banner (it ends ~27cqw down in all three recordings), not in the kit's
bottom-right corner. Down there the fade above (z-index 2) and the tags (z-index 3) painted over it, because each
phone is its own stacking context, and the side phones' corners hang below the stage's clipped bottom edge: no phone
showed its button and a mouse couldn't reach it. Up here every phone is clear at every width; the band looks the same. */
.rom__ph .vctl { top: 28.5cqw; bottom: auto; }
/* the phone's tilt turns the button and Chrome snaps its round hit area to whole pixels, so ~0.5 px of its rim missed;
an invisible 3 px rim (a 36 px target) makes the whole visible circle count */
.rom__ph .vctl::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; }
.rom__fine { position: relative; z-index: 3; width: min(92ch, 100% - 2 * var(--gutter)); margin: 0 auto; padding: 24px 0 clamp(44px, 5vw, 72px); text-align: center; font-size: 12.5px; line-height: 1.55; color: #47586d; text-wrap: pretty; background: var(--live-bg, #d2e8f4); box-shadow: 0 0 0 100vmax var(--live-bg, #d2e8f4); clip-path: inset(0 -100vmax); } /* the site disclaimer (Oct 8; one disclaimer since Oct 11, WEB-167): 5.7:1 on the sky band; a full-width strip in the live crossfade colour (script.js sets --live-bg on #rom), so it meets the stage's fade with no edge */
/* pass 2: portrait tablets: the stage hugs the phones (no 200 px gap under the lede) */
@media (min-width: 701px) and (max-aspect-ratio: 1/1) { .rom__stage { height: auto; } }
@media (max-width: 700px) { .rom__stage { height: auto; aspect-ratio: 1 / 1.05; padding-top: 34px; gap: 8px; } .rom__ph { width: 29vw; } .rom__ph--c { width: 34vw; } .rom__tags li { font-size: 11px; } .rom__logo { height: 42px; margin-bottom: 18px; } }
/* =========================================================================
9. POSTURESCRIBE.AI (black, cyan glow, pinned)
========================================================================= */
.scribe { --scene-h: 186vh; --scene-h-m: 240vh; color: var(--dk-ink); }
.scribe__aura { position: absolute; right: -10%; bottom: -30%; width: 90vw; height: 90vw; max-width: 1100px; max-height: 1100px; border-radius: 50%; background: radial-gradient(closest-side, rgba(38, 188, 215, .42), rgba(0, 128, 178, .18) 45%, rgba(80, 60, 200, .10) 65%, transparent 72%); animation: breathe 7s var(--ease-in-out) infinite alternate; pointer-events: none; }
@keyframes breathe { to { transform: scale(1.12) translate3d(-3%, -3%, 0); opacity: .8; } }
.scribe__grid { position: relative; height: 100%; padding-top: var(--hdr); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(24px, 4vw, 64px); }
.scribe__logo { display: block; height: 44px; width: auto; max-width: 100%; object-fit: contain; object-position: 0 50%; margin: 0 0 18px; } /* Oct 8 Loom (6:19): Joe's own white PostureScribe.AI logo straight on the black band (was the full-colour logo on a .logo-chip plate); 44 px = the old plate's width. Oct 17 Loom: its icon in colour, like RemoteScreen's (logo-posturescribe-white-coloricon.svg) */
.scribe__h { font-size: clamp(28px, 3.3vw, 46px); line-height: 1.13; letter-spacing: -.03em; font-weight: 700; color: #8e98a6; text-wrap: balance; }
.scribe__h i { font-style: italic; color: #fff; padding: 0 .1em 0 .04em; letter-spacing: -.01em; }
.scribe__h span { display: block; margin-top: .12em; color: var(--sky); text-shadow: 0 0 40px rgba(38, 188, 215, .45); }
.scribe__only { margin-top: 18px; max-width: 46ch; padding: 12px 16px; border-radius: 14px; font-size: 15.5px; line-height: 1.45; color: #d7e3ec; background: linear-gradient(90deg, rgba(38, 188, 215, .14), rgba(38, 188, 215, .03)); box-shadow: inset 2px 0 0 var(--sky); }
.scribe__only b { color: #fff; font-weight: 700; }
.scribe__lede { margin-top: 14px; font-size: 15.5px; color: var(--dk-2); max-width: 50ch; }
.scribe__lede strong { color: #fff; }
.wave { display: flex; gap: 4px; align-items: center; height: 24px; margin: 16px 0 6px; }
.wave i { width: 3px; height: 100%; border-radius: 2px; background: var(--sky); transform: scaleY(.15); transform-origin: 50% 50%; animation: wv 1.1s var(--ease-in-out) infinite alternate; }
.wave i:nth-child(3n) { animation-duration: .8s; } .wave i:nth-child(4n+1) { animation-duration: 1.4s; animation-delay: -.3s; } .wave i:nth-child(5n+2) { animation-delay: -.6s; } .wave i:nth-child(7n) { animation-duration: .95s; animation-delay: -.2s; }
@keyframes wv { to { transform: scaleY(1); } }
.ssteps { display: grid; margin-top: 8px; max-width: 480px; }
.ssteps__i { position: relative; border-top: 1px solid var(--dk-line); }
.ssteps__i button { display: grid; grid-template-columns: 32px 1fr; column-gap: 10px; text-align: left; width: 100%; padding: 11px 0; }
.ssteps__n { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--dk-line); color: var(--dk-2); transition: all .4s var(--ease-out); }
.ssteps__k { font-size: 17px; font-weight: 600; color: #8994a2; transition: color .4s; }
/* every sub-line opens to the tallest one's height (--sub, evenSubs), and script.js tweens the closing and opening
heights with one shared factor (sStep), so no CSS height transition: separate ones drift apart in fast scrolling */
.ssteps__t { font-size: 14.5px; color: #6f7a88; height: 0; overflow: hidden; opacity: 0; transition: opacity .4s; }
.ssteps__i.is-active .ssteps__n { background: var(--sky); color: #001018; box-shadow: 0 0 0 6px rgba(38, 188, 215, .18); }
.ssteps__i.is-active .ssteps__k { color: #fff; }
.ssteps__i.is-active .ssteps__t { height: var(--sub, 3em); opacity: 1; color: var(--dk-2); }
.ssteps .bar, .rsteps .bar { top: -1px; bottom: auto; background: transparent; }
.ssteps .bar::after, .rsteps .bar::after { background: var(--sky); }
.scribe__price { margin-top: 14px; font-size: 13.5px; color: var(--dk-2); }
.scribe__price strong { color: #fff; }
.scribe__more { margin-top: 16px; }
.scribe__devs { position: relative; justify-self: center; width: min(calc((100svh - var(--hdr) - 80px) * .62), 100%, 520px); aspect-ratio: 1 / 1.08; }
.scribe__ipad { position: absolute; left: 0; top: 0; width: 74%; opacity: .9; }
.scribe__phone { position: absolute; right: 0; bottom: 0; width: 40%; will-change: transform; }
/* Loom #4: the iPad and iPhone fold up as the band arrives, like the hero's devices (script.js adds .is-fold) */
.sfold { transform-origin: 50% 100%; }
html.kit:not(.kit-reduced) .sfold { transition: transform 1.15s var(--ease-out-expo), opacity .5s var(--ease-out); }
html.kit:not(.kit-reduced) .scribe.is-fold .sfold--ph { transition-delay: .24s; }
html.kit:not(.kit-reduced) .scribe:not(.is-fold) .sfold--pad { opacity: 0; transform: perspective(1400px) translate3d(0, 10%, 0) rotateX(74deg) scale(.68); }
html.kit:not(.kit-reduced) .scribe:not(.is-fold) .sfold--ph { opacity: 0; transform: perspective(1400px) translate3d(0, 26%, 0) rotateX(66deg) scale(.78); }
.scribe__phone .device { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 80px -20px rgba(0, 0, 0, .9), 0 0 90px -10px rgba(38, 188, 215, .45); }
@media (max-height: 880px) and (min-width: 901px) { .wave { display: none; } .scribe__logo { height: 40px; margin-bottom: 14px; } .scribe__only { margin-top: 12px; } }
@media (max-height: 800px) and (min-width: 901px) { .scribe__lede { display: none; } }
@media (max-width: 900px) {
.scribe__grid { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: start; gap: 6px; padding-top: calc(var(--hdr) + 12px); }
.scribe__logo { height: 34px; margin-bottom: 10px; }
.scribe__h { font-size: 22px; }
.scribe__only { font-size: 13px; padding: 8px 12px; margin-top: 10px; }
.scribe__lede, .wave, .scribe__price { display: none; }
.ssteps { margin-top: 6px; }
.ssteps__i:not(.is-active) .ssteps__k { font-size: 14px; }
.ssteps__i button { padding: 7px 0; }
.ssteps__k { font-size: 15px; }
.ssteps__t { font-size: 13px; }
.scribe__devs { width: min(calc((100svh - var(--hdr)) * .33), 66vw, 300px); }
}
/* =========================================================================
10. FROM HELLO TO THE ASSESSMENT (white): uniform phones
========================================================================= */
.flow { padding: calc(var(--pad) * .72) 0 var(--pad); }
.who { display: flex; align-items: baseline; gap: 10px; margin-top: 18px; font-size: clamp(18px, 1.8vw, 24px); font-weight: 600; letter-spacing: -.02em; }
.who__k { color: var(--ink-3); }
.who__rot { display: inline-grid; color: var(--blue-t); text-align: left; min-width: 11ch; }
.who__rot span { grid-area: 1 / 1; opacity: 0; transform: translate3d(0, 60%, 0); filter: blur(4px); transition: opacity .45s var(--ease-in), transform .45s var(--ease-in), filter .45s; white-space: nowrap; }
.who__rot span.is-on { opacity: 1; transform: none; filter: none; transition: opacity .7s var(--ease-out), transform .8s var(--ease-out-expo), filter .7s; }
.who__rot span.is-off { transform: translate3d(0, -60%, 0); }
.flow__wrap { position: relative; margin-top: 8px; }
.flow__rail { position: absolute; left: 10%; right: 10%; top: 27px; height: 2px; background: var(--line); }
.flow__fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--blue), var(--sky)); transform-origin: 0 50%; transform: scaleX(var(--t, 0)); transition: transform 1s var(--ease-in-out); }
.flow__dot { position: absolute; top: -5px; left: calc(var(--t, 0) * 100%); width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 2px var(--navy), 0 0 0 7px rgba(254, 192, 32, .2); transition: left 1s var(--ease-in-out); }
.flow__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.fstep { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; justify-items: center; text-align: center; }
.fstep__ic { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-3); position: relative; z-index: 1; transition: background .5s, color .5s, box-shadow .5s, transform .6s var(--ease-spring); }
.fstep__ic svg { width: 24px; height: 24px; }
.fstep__k { margin-top: 16px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.fstep h3 { margin-top: 4px; font-size: 17px; line-height: 1.25; letter-spacing: -.015em; }
.fstep > p:not(.fstep__k) { margin-top: 6px; font-size: 14px; color: var(--ink-2); max-width: 26ch; }
.fstep__ph { margin-top: 20px; width: 120px; align-self: end; transition: transform .7s var(--ease-out), opacity .6s var(--ease-out), filter .6s; opacity: .62; filter: saturate(.55); }
.fstep__ph .device { --shadow: 0 1px 2px rgba(10, 20, 40, .1), 0 24px 40px -22px rgba(10, 20, 40, .55); box-shadow: inset 0 0 0 1px var(--edge-line), var(--shadow); }
.fstep.is-on .fstep__ic { background: var(--blue); color: #fff; box-shadow: 0 10px 24px -8px rgba(0, 128, 178, .7); transform: scale(1.08); }
.fstep.is-on .fstep__k { color: var(--blue-t); }
.fstep.is-on .fstep__ph { opacity: 1; filter: none; transform: translate3d(0, -8px, 0); }
.fstep.is-past .fstep__ic { background: var(--bg-3); color: var(--blue-t); }
html.kit:not(.kit-reduced) .flow__wrap:not(.is-live) .fstep { opacity: 0; transform: translate3d(0, 24px, 0); }
.flow__wrap .fstep { transition: opacity .8s var(--ease-out) calc(var(--i) * 110ms), transform .9s var(--ease-out) calc(var(--i) * 110ms); }
.mini-pause { position: absolute; right: 0; top: -54px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); }
.mini-pause svg { width: 13px; height: 13px; grid-area: 1 / 1; }
.mini-pause .i-play { display: none; }
.mini-pause[aria-pressed="true"] .i-play { display: block; }
.mini-pause[aria-pressed="true"] .i-pause { display: none; }
.mini-pause--dark { box-shadow: inset 0 0 0 1px var(--dk-line); color: var(--dk-ink); }
@media (max-width: 900px) {
.flow__rail { left: 27px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
.flow__fill { transform-origin: 50% 0; transform: scaleY(var(--t, 0)); }
.flow__dot { left: -5px; top: calc(var(--t, 0) * 100%); transition: top 1s var(--ease-in-out); }
.flow__steps { grid-template-columns: 1fr; gap: 26px; }
.fstep { grid-template-columns: 56px 1fr 74px; grid-template-rows: auto auto auto; justify-items: start; text-align: left; column-gap: 16px; }
.fstep__ic { grid-row: span 3; }
.fstep__k { margin-top: 0; }
.fstep__ph { grid-column: 3; grid-row: 1 / span 3; margin: 0; width: 74px; align-self: center; }
.mini-pause { top: -48px; }
.who { flex-direction: column; align-items: center; gap: 2px; }
.who__rot { text-align: center; }
}
/* =========================================================================
11. INTEGRATIONS (mist): lines draw in, pulses travel, nodes link
========================================================================= */
.integ { padding: var(--pad) 0; overflow: clip; }
.const { position: relative; height: 500px; max-width: 1080px; margin: 0 auto; }
.const__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.const__svg line { stroke: rgba(0, 128, 178, .26); stroke-width: 1.3; transition: stroke .3s, stroke-width .3s; }
.const__svg line.is-hot { stroke: var(--blue); stroke-width: 2.2; }
.const__pulses { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.pulse { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 3px rgba(38, 188, 215, .25), 0 0 14px 2px rgba(38, 188, 215, .8); opacity: 0; }
.const.is-in .pulse { animation: pulse-run var(--dur, 2.6s) var(--ease-in-out) infinite; animation-delay: var(--dl, 0s); }
.pulse.is-back { background: var(--yellow); box-shadow: 0 0 0 3px rgba(254, 192, 32, .25), 0 0 12px 2px rgba(254, 192, 32, .7); }
.const.is-in .pulse.is-back { animation-name: pulse-back; }
@keyframes pulse-run { 0% { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translate3d(var(--dx), var(--dy), 0) scale(1); opacity: 0; } }
@keyframes pulse-back { 0% { transform: translate3d(var(--dx), var(--dy), 0) scale(.6); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0; } }
.const__core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 10px; z-index: 2; }
.const__core img { width: 110px; border-radius: 26px; box-shadow: 0 20px 50px -14px rgba(0, 128, 178, .55), 0 0 0 10px rgba(38, 188, 215, .1), 0 0 0 22px rgba(38, 188, 215, .06); animation: corepulse 3.4s var(--ease-in-out) infinite; }
@keyframes corepulse { 50% { box-shadow: 0 20px 50px -14px rgba(0, 128, 178, .55), 0 0 0 16px rgba(38, 188, 215, .12), 0 0 0 34px rgba(38, 188, 215, .04); } }
.const__core span { font-size: 13px; font-weight: 700; }
.const__nodes > li { position: absolute; left: var(--x); top: var(--y); z-index: 3; transform: translate(-50%, -50%); }
.node { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 9px 14px 9px 9px; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); white-space: nowrap; transition: transform .45s var(--ease-spring), box-shadow .45s var(--ease-out); }
.node:hover, .node:focus-visible { text-decoration: none; transform: translateY(-6px) scale(1.04); box-shadow: 0 2px 4px rgba(11, 26, 46, .06), 0 26px 44px -18px rgba(0, 80, 120, .5), inset 0 0 0 1.5px rgba(0, 128, 178, .4); }
.node__g { grid-row: span 2; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--bg-3); color: var(--blue-t); overflow: hidden; }
.node__g svg { width: 18px; height: 18px; }
.node__g .node__pc { width: 22px; height: 10.4px; } /* the booth cloud for Cloud Services (#i-pcloud, 2.12 : 1; Joe, Oct 9 Loom C5) */
.node__g--img { background: none; }
.node__g--img img { width: 36px; border-radius: 9px; }
.node__g--logo { width: 64px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.node__g--logo img { width: 56px; }
.node__k { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.node__n { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
/* round 6 (A10): EHR nodes lead with the company's own logo (equal optical width), then "EHR" */
.node--ehr { grid-template-columns: auto; grid-template-rows: auto auto; row-gap: 7px; justify-items: start; padding: 11px 14px 10px; }
.node__logo { display: block; width: 116px; height: 24px; }
.node__logo img { width: 100%; height: 100%; object-fit: contain; object-position: 0 50%; }
.node__meta { display: flex; align-items: center; gap: 7px; }
.node__sub { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.node__soon { font-size: 10px; font-weight: 700; letter-spacing: .03em; line-height: 1; padding: 4px 7px; border-radius: 999px; background: #fff4d6; color: #6e4d00; box-shadow: inset 0 0 0 1px rgba(254, 192, 32, .65); }
.const__svg line.is-soon { stroke-dasharray: 2 5; stroke: rgba(0, 128, 178, .32); }
html.kit:not(.kit-reduced) .const .const__svg line.is-soon { stroke-dasharray: 2 5; stroke-dashoffset: 0; opacity: 0; transition: opacity 1.2s var(--ease-out) .4s, stroke .3s, stroke-width .3s; }
html.kit:not(.kit-reduced) .const.is-in .const__svg line.is-soon { opacity: 1; }
.node__meta::after, .node__n::after { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5H3.5v9h9V10M9 3h4v4M13 3L7.5 8.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5H3.5v9h9V10M9 3h4v4M13 3L7.5 8.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; color: var(--blue-t); opacity: 0; transform: translateX(-4px); transition: opacity .25s, transform .3s var(--ease-out); }
.node:hover .node__n::after, .node:focus-visible .node__n::after, .node:hover .node__meta::after, .node:focus-visible .node__meta::after { opacity: 1; transform: none; }
html.kit:not(.kit-reduced) .const .node { opacity: 0; transform: scale(.8); transition: opacity .6s var(--ease-out) var(--nd, 0ms), transform .8s var(--ease-spring) var(--nd, 0ms), box-shadow .45s var(--ease-out); }
html.kit:not(.kit-reduced) .const.is-in .node { opacity: 1; transform: none; }
html.kit:not(.kit-reduced) .const.is-in .node:hover, html.kit:not(.kit-reduced) .const.is-in .node:focus-visible { transform: translateY(-6px) scale(1.04); transition-delay: 0ms; }
.node:not(.node--label):hover { position: relative; }
.node:not(.node--label):hover::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; } /* hover stays put (see .btn) */
/* round 7: "Save anywhere" is a label, not a link: same look as every node, but no pointer, lift or arrow */
.node--label { cursor: default; }
.node--label:hover { transform: none; box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); }
.node--label:hover .node__n::after { opacity: 0; transform: translateX(-4px); }
html.kit:not(.kit-reduced) .const.is-in .node--label:hover { transform: none; }
html.kit:not(.kit-reduced) .const .const__svg line { stroke-dasharray: 700; stroke-dashoffset: 700; transition: stroke-dashoffset 1.3s var(--ease-out), stroke .3s, stroke-width .3s; }
html.kit:not(.kit-reduced) .const.is-in .const__svg line { stroke-dashoffset: 0; }
@media (max-width: 800px) {
.const { height: auto; display: grid; justify-items: center; gap: 22px; }
.const__svg, .const__pulses { display: none; }
.const__core { position: static; transform: none; }
.const__nodes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.const__nodes > li { position: static; transform: none; }
.node { white-space: normal; padding: 8px 10px 8px 8px; height: 100%; }
.node__n { font-size: 13px; }
.node__g--logo { width: 46px; } .node__g--logo img { width: 40px; }
.node--ehr { padding: 10px 10px 9px; }
.node__logo { width: 104px; height: 22px; }
.node__meta { flex-wrap: wrap; row-gap: 4px; }
}
/* =========================================================================
12. HIPAA BAND (navy)
========================================================================= */
.hipaa { padding: var(--pad) 0 calc(var(--pad) * .62); color: var(--dk-ink); }
.hipaa .h2 { max-width: 16ch; }
.lock { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(38, 188, 215, .4); color: var(--sky-l); }
.lock svg { width: 15px; height: 15px; }
.pipe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; margin-bottom: 26px; }
.pipe__node { display: grid; gap: 4px; padding: 20px 22px; border-radius: 18px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.pipe__node--cloud { box-shadow: inset 0 0 0 1px rgba(38, 188, 215, .5), 0 0 60px -20px rgba(38, 188, 215, .5); }
.pipe__k { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #8fa6bd; }
.pipe__n { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.pipe__s { font-size: 12.5px; color: #8fa6bd; }
.pipe__wire { position: relative; height: 60px; margin: 0 -1px; container-type: inline-size; }
.pipe__wire::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px dashed rgba(38, 188, 215, .5); }
.pipe__packet { position: absolute; left: 0; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 9px; display: grid; place-items: center; background: var(--sky); color: #04202b; box-shadow: 0 0 22px rgba(38, 188, 215, .8); animation: packet 3.2s var(--ease-in-out) infinite; }
.pipe__packet--2 { animation-delay: 1.6s; }
.pipe__packet svg { width: 15px; height: 15px; }
@keyframes packet { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate3d(calc(100cqw - 30px), 0, 0); opacity: 0; } }
.pipe__lbl { position: absolute; left: 0; right: 0; top: calc(50% + 16px); text-align: center; font-size: 12px; color: #8fa6bd; }
.sgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); overflow: hidden; }
.sgrid li { padding: 22px; box-shadow: inset -1px -1px 0 rgba(255, 255, 255, .08); }
.sgrid__k { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--sky); margin-bottom: 8px; }
.sgrid p { font-size: 14.5px; color: #c8d3de; }
@media (max-width: 760px) { .pipe { grid-template-columns: 1fr; gap: 0; } .pipe__wire { height: 70px; } .pipe__wire::before { left: 50%; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 1.5px dashed rgba(38, 188, 215, .5); } .pipe__packet { left: 50%; margin-left: -15px; top: 0; margin-top: 0; animation-name: packet-v; } .pipe__lbl { top: 50%; left: calc(50% + 14px); text-align: left; } .sgrid { grid-template-columns: 1fr; } }
@keyframes packet-v { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate3d(0, 40px, 0); opacity: 0; } }
/* =========================================================================
13. RESEARCH (white)
========================================================================= */
.research { padding: var(--pad) 0 clamp(56px, 7vw, 96px); overflow: clip; }
.res__top { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: end; margin-bottom: clamp(36px, 4.5vw, 56px); }
.res__asof { margin-top: 18px; font-size: 14px; color: var(--ink-3); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.stats div { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.stats dd { font-size: clamp(50px, 6.4vw, 92px); 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; }
.stats dd.is-ray { background: linear-gradient(180deg, var(--red), var(--red-l)); -webkit-background-clip: text; background-clip: text; }
.stats dt { font-size: 14.5px; color: var(--ink-2); max-width: 24ch; }
.rquote { display: grid; grid-template-columns: 150px 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; padding: clamp(22px, 3.4vw, 38px); border-radius: 28px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: clamp(36px, 5vw, 56px); }
.rquote__paper { display: block; transform: rotate(-3deg); transition: transform .5s var(--ease-out); }
.rquote__paper:hover { position: relative; transform: rotate(0) translateY(-4px); }
/* hover stays put (see .btn): straightened and lifted, it still covers the corners of its tilted resting place */
.rquote__paper:hover::after { content: ""; position: absolute; inset: -2px -7px -10px; }
.rquote__paper img { border-radius: 6px; box-shadow: var(--shadow-2); }
.rquote blockquote p { font-size: clamp(20px, 2.2vw, 29px); line-height: 1.24; letter-spacing: -.022em; font-weight: 600; text-wrap: balance; }
.rquote figcaption { margin-top: 12px; font-size: 14px; color: var(--ink-3); }
.rquote cite { font-style: normal; color: var(--ink); font-weight: 600; }
.sec-links { display: flex; gap: 26px; flex-wrap: wrap; justify-content: center; margin-top: 26px; }
@media (max-width: 900px) { .res__top { grid-template-columns: 1fr; align-items: start; } }
@media (max-width: 700px) { .stats { gap: 12px; } .stats dd { font-size: 44px; } .stats dt { font-size: 13px; } .rquote { grid-template-columns: 1fr; justify-items: center; text-align: center; } .rquote__paper { width: 110px; } }
/* ---------- shared carousel ---------- */
.carousel { position: relative; }
.carousel__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.carousel__ctl { display: flex; gap: 8px; }
.carousel__ctl--c { justify-content: center; margin-top: 10px; }
.carousel__vp { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; padding: 10px 0 24px; }
.carousel__vp::-webkit-scrollbar { display: none; }
.carousel__vp.is-drag { cursor: grabbing; }
.carousel__vp.is-drag a, .carousel__vp.is-drag button { pointer-events: none; }
.carousel__track { display: flex; gap: 16px; width: max-content; padding-inline: max(var(--gutter), (100vw - var(--maxw)) / 2); }
.paddle { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); color: var(--ink); transition: transform .2s var(--ease-out), background .2s; }
.paddle:hover { transform: scale(1.06); }
.paddle:active { position: relative; transform: scale(.95); }
.paddle:active::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; } /* hover stays put (see .btn) */
.paddle svg { width: 16px; height: 16px; }
.paddle--dark { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1px var(--dk-line); }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.seg__b { padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--ink-3); transition: background .3s, color .3s; }
.seg__b small { font-size: 11px; font-weight: 700; color: var(--ink-3); margin-left: 3px; font-variant-numeric: tabular-nums; }
.seg__b.is-on { background: #fff; color: var(--ink); box-shadow: var(--shadow-1); }
.papers li { flex: none; }
.paper { display: flex; flex-direction: column; width: 216px; height: 100%; color: var(--ink); transition: transform .45s var(--ease-out); }
.paper:hover { position: relative; text-decoration: none; transform: translateY(-6px); }
.paper:hover::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; } /* hover stays put (see .btn) */
.paper__card { position: relative; height: 288px; border-radius: 12px; overflow: hidden; background: #fff; padding: 16px 15px 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 2px rgba(11, 26, 46, .08), 0 14px 30px -16px rgba(11, 26, 46, .4), inset 0 0 0 1px var(--line); transition: box-shadow .45s var(--ease-out); }
.paper:hover .paper__card { box-shadow: 0 2px 4px rgba(11, 26, 46, .08), 0 26px 44px -20px rgba(11, 26, 46, .5), inset 0 0 0 1px rgba(0, 128, 178, .3); }
.paper__card::before { content: ""; flex: none; height: 5px; width: 54%; border-radius: 3px; background: var(--c, var(--blue)); }
.paper__j { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c, var(--blue-t)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.paper__t { font-size: 14px; line-height: 1.26; font-weight: 700; letter-spacing: -.01em; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.paper__fill { flex: 1; min-height: 18px; background: repeating-linear-gradient(180deg, rgba(11, 26, 46, .08) 0 2px, transparent 2px 9px); border-radius: 2px; -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); }
.paper__thumb { flex: 1; min-height: 60px; margin: 2px -3px 0; border-radius: 7px; overflow: hidden; background: #f3f7fa; box-shadow: inset 0 0 0 1px var(--line); }
.paper__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.paper__thumb--wide img { object-fit: contain; object-position: 50% 50%; }
.paper__thumb--cover { background: linear-gradient(160deg, #eef4f8, #e3ecf2); }
.paper__thumb--cover img { object-fit: contain; object-position: 50% 50%; padding: 8px 0; filter: drop-shadow(0 6px 10px rgba(11, 26, 46, .22)); }
.paper__open { position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; opacity: 0; transform: scale(.8); transition: opacity .3s, transform .3s var(--ease-spring); }
.paper__open svg { width: 14px; height: 14px; }
.paper:hover .paper__open, .paper:focus-visible .paper__open { opacity: 1; transform: none; }
.paper__meta { margin-top: 11px; font-size: 12px; font-weight: 600; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.paper__meta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--blue)); }
.paper__meta em { font-style: normal; color: var(--blue-t); }
.paper__meta em.is-ray { color: var(--red); }
.papers li.is-hide { display: none; }
/* =========================================================================
14. POSTURERAY (graphite X-ray stage, pinned)
========================================================================= */
.ray { --scene-h: 148vh; --scene-h-m: 210vh; color: var(--dk-ink); }
.ray__sticky { isolation: isolate; }
.ray__sticky::before { background: radial-gradient(70% 70% at 70% 55%, rgba(48, 50, 56, .9) 0%, rgba(27, 29, 33, .5) 50%, rgba(18, 19, 22, 0) 100%); }
.ray__grid { height: 100%; padding-top: var(--hdr); display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; gap: clamp(24px, 4vw, 56px); }
/* Joe's own white PostureRay master straight on the graphite band, no .logo-chip plate (he rejected the plate on Oct 8: "This
doesn't look good, I don't like it"; final review home-plate-ray). 58 px tall = the old plate's 266 px width, the rule the
white PostureScribe.AI logo on #scribe follows. */
.ray__logo { display: block; height: 58px; width: auto; max-width: 100%; object-fit: contain; object-position: 0 50%; margin: 0 0 22px; }
.ray__h { font-size: clamp(28px, 3.4vw, 46px); }
.ray__lede { margin-top: 12px; font-size: 15px; color: #b3bac4; max-width: 44ch; }
.rsteps { margin-top: 16px; display: grid; max-width: 450px; }
.rsteps__i { position: relative; border-top: 1px solid rgba(255, 255, 255, .1); }
.rsteps__i button { text-align: left; padding: 12px 0; font-size: 14.5px; color: #7d8590; transition: color .4s; }
.rsteps__i button b { color: #9aa2ad; font-weight: 600; transition: color .4s; }
.rsteps__i.is-active button { color: #d6dbe2; }
.rsteps__i.is-active button b { color: #fff; }
.rsteps .bar::after { background: var(--red-l); }
.ray__who { margin-top: 14px; padding: 10px 14px; border-radius: 12px; font-size: 13.5px; color: #cdd3db; background: rgba(224, 80, 111, .1); box-shadow: inset 2px 0 0 var(--red-l); max-width: 46ch; }
.ray__who b { color: #fff; }
.ray__price { margin-top: 12px; font-size: 13.5px; color: #b3bac4; }
.ray__price strong { color: #fff; }
.ray__ctas { margin-top: 14px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.xr { display: grid; gap: 12px; }
.xr__frame { position: relative; width: 100%; aspect-ratio: 720 / 405; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 120px -40px rgba(163, 23, 55, .55); }
.xr__a, .xr__b { position: absolute; inset: 0; transition: opacity .9s var(--ease-in-out), transform 1.2s var(--ease-out); }
.xr__b { opacity: 0; transform: scale(1.05); }
.xr__frame.is-b .xr__a { opacity: 0; transform: scale(.97); }
.xr__frame.is-b .xr__b { opacity: 1; transform: none; }
.xr__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xr__img--base { filter: grayscale(1) brightness(.4) contrast(1.1); }
.xr__img--lit { clip-path: inset(0 calc(100% - var(--x, 0%)) 0 0); }
.xr__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.xr__svg .xp { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(2.4); transition: opacity .35s var(--ease-out), transform .6s var(--ease-spring); }
.xr__svg .xp.on { opacity: 1; transform: none; }
.xr__svg .xp circle:first-child { fill: rgba(212, 236, 90, .2); }
.xr__svg .xp circle:last-child { fill: #05070b; stroke: #e3f27a; stroke-width: 1.4; }
.xr__scan { position: absolute; top: 0; bottom: 0; left: var(--x, 0%); width: 2px; background: var(--red-l); box-shadow: 0 0 18px 4px rgba(224, 80, 111, .6); opacity: 0; }
.xr__scan span { position: absolute; top: 12px; left: 10px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(163, 23, 55, .92); padding: 4px 8px; border-radius: 6px; white-space: nowrap; }
.xr__scan.is-flip span { left: auto; right: 10px; }
.xr__tag { position: absolute; left: 14px; bottom: 14px; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 8px; background: rgba(0, 0, 0, .7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(224, 80, 111, .5); }
.xr__note { font-size: 12px; color: #7d8590; }
@media (max-width: 900px) {
.ray__grid { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: start; gap: 12px; padding-top: calc(var(--hdr) + 12px); }
.ray__logo { height: 40px; margin-bottom: 10px; } /* = the old 34 px plate's 181 px width */
.ray__h { font-size: 24px; }
.ray__lede, .ray__price { display: none; }
.rsteps__i:not(.is-active) { display: none; }
.rsteps { margin-top: 6px; }
.rsteps__i button { font-size: 13.5px; padding: 8px 0; }
.ray__who { font-size: 12.5px; margin-top: 6px; }
.xr { order: 2; }
.ray__ctas { margin-top: 8px; }
}
/* =========================================================================
15. VOICES (ink)
========================================================================= */
.voices { padding: var(--pad) 0 calc(var(--pad) * .62); color: var(--dk-ink); overflow: clip; }
.voices .lede { color: var(--dk-2); }
.reels li { flex: none; width: clamp(190px, 17vw, 236px); }
.reel { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: 20px; background: #111; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .5s var(--ease-out), box-shadow .5s; }
/* hover stays put (see .btn): the button no longer clips (overflow: hidden would clip its strip), so the poster clips
its own zoom: clip-path is drawn before the transform, so inset 2.381% (1 - 1/1.05, halved) scaled 1.05 lands exactly
on the card, with the 20 px corners (19.05 × 1.05) */
.reel img { width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 round 20px); transition: transform 1.2s var(--ease-out), clip-path 1.2s var(--ease-out); }
.reel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .78)); }
.reel:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(38, 188, 215, .5), 0 30px 60px -20px rgba(0, 0, 0, .8); }
.reel:hover img { transform: scale(1.05); clip-path: inset(2.381% round 19.05px); }
.reel:hover::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }
.reel__play { position: absolute; z-index: 2; left: 14px; bottom: 54px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: var(--ink); transition: transform .3s var(--ease-spring); }
.reel:hover .reel__play { transform: scale(1.1); }
.reel__play svg { width: 15px; height: 15px; margin-left: 2px; }
.reel__name { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 16px; text-align: left; font-size: 15px; font-weight: 700; color: #fff; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.reel__name small { font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, .7); }
.bigq { margin-top: clamp(50px, 7vw, 88px); display: grid; gap: 30px; justify-items: center; text-align: center; }
.bigq__slides { display: grid; max-width: 980px; }
.bq { grid-area: 1 / 1; opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .4s var(--ease-in), transform .4s var(--ease-in); visibility: hidden; }
.bq.is-active { opacity: 1; transform: none; visibility: visible; transition: opacity .8s var(--ease-out) .1s, transform .9s var(--ease-out) .1s; }
.bq blockquote { font-family: var(--serif); font-size: clamp(28px, 3.8vw, 50px); line-height: 1.12; letter-spacing: -.01em; color: #fff; text-wrap: balance; }
.bq figcaption { margin-top: 18px; font-size: 14px; color: var(--dk-2); }
.bq figcaption b { color: #fff; margin-right: 6px; }
/* the headshot row sits on the quote's centre axis; the pause button hangs outside it */
.bigq__people { position: relative; display: inline-flex; justify-self: center; }
.bigq__people .mini-pause { position: absolute; left: 100%; top: 50%; right: auto; margin: -17px 0 0 18px; }
.bigq__tabs { display: flex; gap: 10px; }
.bigq__tabs button { position: relative; width: 52px; height: 52px; border-radius: 50%; transition: transform .4s var(--ease-out); }
.bigq__tabs img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; filter: grayscale(1) brightness(.7); transition: filter .4s; }
.bigq__tabs button[aria-selected="true"] { transform: scale(1.12); }
.bigq__tabs button[aria-selected="true"] img, .bigq__tabs button:hover img { filter: none; }
.bigq__tabs .ring { position: absolute; inset: -5px; width: 62px; height: 62px; max-width: none; transform: rotate(-90deg); pointer-events: none; }
.bigq__tabs .ring circle { fill: none; stroke: var(--sky); stroke-width: 2; stroke-dasharray: 116.2; stroke-dashoffset: 116.2; }
.bigq__tabs button[aria-selected="true"] .ring circle { animation: ringfill var(--rot, 7s) linear forwards; }
.bigq.is-paused .ring circle { animation-play-state: paused !important; }
@keyframes ringfill { to { stroke-dashoffset: 0; } }
@media (max-width: 600px) { .bigq__tabs { gap: 6px; } .bigq__tabs button, .bigq__tabs img { width: 40px; height: 40px; } .bigq__tabs .ring { width: 50px; height: 50px; } .bigq__people .mini-pause { margin: -17px 0 0 10px; } }
/* very narrow phones: the pause drops under the row, still on the axis */
@media (max-width: 374px) { .bigq__people { margin-bottom: 44px; } .bigq__people .mini-pause { left: 50%; top: 100%; margin: 10px 0 0 -17px; } }
/* =========================================================================
16. FAMILY (white)
WEB-138 (Joe, Oct 8 2026): grouped by what a visitor buys, as one 3-column grid.
WEB-142: four included modules (LeanScreen, SquatScreen, ROMScreen, SitScreen) sit 4 across on wide screens and
2 × 2 below 1240 px; BalanceScreen (coming soon) always runs as one slim row under them.
.fam__base = a soft blue panel holding PostureScreen (the base subscription) and the modules included in it; it
bleeds out by --fp on each side so the cards inside line up with the add-on / separate cards below.
Cards in a row share row tracks (subgrid), so chips, logos, dividers and buttons line up even when copy wraps.
Each card is one link: its blue Learn more (.fam__go) stretches over the card with ::after. Never transform or
filter .fam__go: either would make the pill the containing block and shrink the click area mid-click.
Every card is position: relative, so that stretched link can never leave its own card. Joe's Loom of Oct 10
("Fixing Flicker and Wrong Page Navigation"): BalanceScreen, the one card without .msr, was not positioned, so its
link covered the whole section. Hovering any card flickered between that card and BalanceScreen every frame (a lifted
card is a new stacking context, which drops below the BalanceScreen link), and clicks opened BalanceScreen.
========================================================================= */
.family { padding: var(--pad) 0; }
.fam { --fg: 20px; --fp: 22px; --fr: 22px; --fi: 14px; display: grid; gap: clamp(40px, 4.6vw, 60px); }
/* group labels: small eyebrow headings with a hairline running out to the group's edge */
.fam__ey { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--fi); font-size: 14px; font-weight: 650; letter-spacing: .005em; line-height: 1.3; color: var(--ink-2); }
.fam__ey::after { content: ""; flex: 1 1 24px; height: 1px; background: var(--line-2); }
.fam__ey--inc { color: var(--blue-d); margin-top: 24px; }
.fam__ey--inc::after { background: rgba(0, 128, 178, .26); }
.fam__tick { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; box-shadow: 0 4px 10px -4px rgba(0, 106, 148, .7); }
.fam__tick svg { width: 13px; height: 13px; }
/* the panel: PostureScreen + what is included in it */
.fam__base { margin-inline: calc(-1 * var(--fp)); padding: 20px var(--fp) var(--fp); border-radius: calc(var(--fr) + var(--fp) - 6px); background: linear-gradient(180deg, #e9f5fb 0%, #f1f8fc 55%, #f4f9fc 100%); box-shadow: inset 0 0 0 1px rgba(0, 128, 178, .14); }
.fam__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fg); }
.fam__grid--inc { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fam__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fg); }
.fam__grp { display: flex; flex-direction: column; min-width: 0; }
.fam__grp--add { grid-column: span 2; }
.fam__grp > .fam__grid { flex: 1; grid-template-columns: minmax(0, 1fr); }
.fam__grp--add > .fam__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* cards */
.fam__c { position: relative; display: flex; flex-direction: column; gap: var(--fi); min-width: 0; padding: 24px 26px; border-radius: var(--fr); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); transition: transform .45s var(--ease-out), box-shadow .45s, background .45s; }
.fam__base .fam__c { background: #fff; box-shadow: inset 0 0 0 1px rgba(11, 26, 46, .07), 0 1px 2px rgba(11, 26, 46, .04), 0 10px 26px -18px rgba(11, 26, 46, .28); }
.fam__c:has(.fam__go) { cursor: pointer; }
/* hover pops a little more (same Loom): a higher lift, a deeper shadow and a firmer blue keyline */
.fam__c:has(.fam__go):hover, .fam__c:has(.fam__go:focus-visible) { transform: translateY(-6px); background: #fff; box-shadow: inset 0 0 0 1.5px rgba(0, 128, 178, .42), 0 2px 4px rgba(11, 26, 46, .06), 0 34px 64px -26px rgba(11, 40, 80, .5); }
/* while a card is lifted, its link still covers the strip the card rose off, so a mouse resting on the bottom edge can't
un-hover it, drop it back and lift it again (an endless shake) */
.fam__c:has(.fam__go):hover .fam__go::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }
.fam__logo { height: 54px; width: auto; max-width: 100%; object-fit: contain; object-position: 0 50%; justify-self: start; }
.fam__tag { font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1.4; text-wrap: pretty; }
.fam__note { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.fam__note svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--blue-t); }
.fam__note .fam__pc { width: 20px; height: 9.4px; margin-top: 5px; } /* the booth cloud, centred on the first line (19.6 px) */
.fam__spec { display: grid; grid-template-columns: auto 1fr; align-content: start; gap: 4px 14px; font-size: 13.5px; padding-top: 12px; border-top: 1px solid var(--line); margin-top: auto; }
.fam__spec dt { color: var(--ink-3); }
.fam__ctas { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; align-self: end; }
/* status chips: what this product is to a PostureScreen subscriber */
.fam__chip { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; justify-self: start; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 650; letter-spacing: .01em; white-space: nowrap; }
.fam__chip svg { width: 13px; height: 13px; flex: none; margin-left: -2px; }
.fam__chip--inc { color: var(--blue-d); background: #e3f1f8; box-shadow: inset 0 0 0 1px rgba(0, 128, 178, .18); }
.fam__chip--add { color: var(--navy); background: rgba(29, 49, 89, .07); box-shadow: inset 0 0 0 1px rgba(29, 49, 89, .12); }
.fam__chip--sep { color: var(--ink-2); background: rgba(11, 26, 46, .05); box-shadow: inset 0 0 0 1px rgba(11, 26, 46, .1); }
.fam__chip--soon { color: #8a5300; background: #fff3d6; box-shadow: inset 0 0 0 1px rgba(236, 138, 28, .3); }
/* Learn more in THIS section: brand blue (Joe, Oct 8). White on #0a7bb0 → #005f86 is 4.7:1 at its lightest;
the brighter hover keeps ~4.5:1 behind the text. Every other Learn more on the site stays the red .more. */
.fam .fam__go { background: linear-gradient(180deg, #2794c8 0%, #0a7bb0 50%, #005f86 100%) 0 100% / 100% 200%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 22px -12px rgba(0, 95, 134, .85); transition: background-position .35s var(--ease-out), box-shadow .3s var(--ease-out); }
.fam .fam__go::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--fr); }
.fam .fam__go:hover, .fam .fam__go:active, .fam .fam__go:focus-visible { transform: none; filter: none; }
.fam .fam__go:focus-visible { outline: none; }
.fam .fam__go:focus-visible::after { outline: 3px solid var(--sky); outline-offset: 3px; }
.fam__c:hover .fam__go, .fam__c:has(.fam__go:focus-visible) .fam__go { background-position: 0 38%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 0 0 4px rgba(38, 188, 215, .3), 0 14px 30px -12px rgba(0, 95, 134, 1); }
.fam__c:hover .fam__go svg, .fam__c:has(.fam__go:focus-visible) .fam__go svg { transform: translateX(3px); }
/* lift + glow follow the card link only: hovering or focusing "Get the app" must not make Learn more look like the target */
.fam__c:has(.fam__app:hover) .fam__go { background-position: 0 100%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 22px -12px rgba(0, 95, 134, .85); }
.fam__c:has(.fam__app:hover) .fam__go svg { transform: none; }
.fam__app { position: relative; z-index: 2; } /* "Get the app" stays its own link above the stretched card link */
/* PostureScreen: one wide card across the panel */
.fam__c--main { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; grid-template-areas: "logo spec ctas" "tag spec ctas"; align-items: center; gap: 8px 40px; padding: 28px 32px; }
.fam__c--main .fam__logo { grid-area: logo; }
.fam__c--main .fam__tag { grid-area: tag; font-size: 17px; }
.fam__c--main .fam__spec { grid-area: spec; margin: 0; padding: 4px 0 4px 32px; border-top: 0; border-left: 1px solid var(--line); align-self: stretch; align-content: center; font-size: 14px; }
.fam__c--main .fam__ctas { grid-area: ctas; justify-content: flex-end; align-self: center; }
/* BalanceScreen (coming soon): quieter (dashed, no lift), one slim row across the panel: logo, line, chip, Learn more */
.fam__c--soon { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "logo tag chip ctas"; align-items: center; gap: 12px 28px; padding: 18px 26px; }
.fam__base .fam__c--soon { background: rgba(255, 255, 255, .5); box-shadow: none; border: 1.5px dashed rgba(0, 128, 178, .3); }
.fam__c--soon .fam__chip { grid-area: chip; align-self: center; }
.fam__c--soon .fam__logo { grid-area: logo; }
.fam__c--soon .fam__tag { grid-area: tag; font-weight: 500; color: var(--ink-2); }
.fam__c--soon .fam__ctas { grid-area: ctas; align-self: center; }
/* one set of row tracks per row of cards: chip / logo / tag / (note) / spec / buttons */
@supports (grid-template-rows: subgrid) {
.fam__grid--inc { grid-template-rows: repeat(5, auto) auto; row-gap: var(--fi); }
.fam__grid--inc > .fam__c:not(.fam__c--soon) { grid-row: span 5; display: grid; grid-template-rows: subgrid; }
.fam__grid--inc > .fam__c--soon { grid-row: 6; margin-top: calc(var(--fg) - var(--fi)); }
.fam__row { grid-template-rows: auto repeat(6, auto); row-gap: var(--fi); }
.fam__grp { display: grid; grid-row: span 7; grid-template-columns: subgrid; grid-template-rows: subgrid; }
.fam__grp > .fam__ey { grid-column: 1 / -1; margin: 0; }
.fam__grp > .fam__grid { grid-column: 1 / -1; grid-row: span 6; grid-template-columns: subgrid; grid-template-rows: subgrid; }
.fam__grp .fam__c { grid-row: span 6; display: grid; grid-template-rows: subgrid; }
.fam__c .fam__spec { margin-top: 0; }
}
@media (max-width: 1100px) {
.fam { --fg: 16px; --fp: 18px; }
.fam__c { padding: 22px; }
.fam__c--main { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "logo ctas" "tag ctas" "spec spec"; gap: 8px 28px; padding: 24px 26px; }
.fam__c--main .fam__spec { grid-template-columns: auto auto auto 1fr; gap: 4px 14px; margin-top: 12px; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--line); }
.fam__c--main .fam__spec dd:first-of-type { margin-right: 22px; }
}
/* below 1240 px four included cards get too narrow for their logos and specs: 2 × 2, each pair of cards sharing
its own row tracks; BalanceScreen still runs across under them */
@media (max-width: 1239px) {
.fam__grid--inc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@supports (grid-template-rows: subgrid) {
.fam__grid--inc { grid-template-rows: none; }
.fam__grid--inc > .fam__c--soon { grid-row: auto; }
.fam__grid--inc > .fam__c:nth-child(n+3) { margin-top: calc(var(--fg) - var(--fi)); }
}
}
/* tablets: one column of groups; BalanceScreen folds into two short lines; PostureRay runs across the row */
@media (max-width: 980px) {
.fam__c--soon { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "logo chip" "tag ctas"; gap: 12px 24px; padding: 20px 22px; }
.fam__row { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: clamp(36px, 4.6vw, 48px); }
.fam__grp, .fam__grp--add { display: flex; grid-column: auto; grid-row: auto; }
.fam__grp > .fam__ey { margin: 0 0 var(--fi); }
.fam__grp--sep .fam__c { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "chip ." "logo spec" "tag spec" "note ctas"; gap: 14px 28px; align-items: start; }
.fam__grp--sep .fam__chip { grid-area: chip; }
.fam__grp--sep .fam__logo { grid-area: logo; }
.fam__grp--sep .fam__tag { grid-area: tag; }
.fam__grp--sep .fam__note { grid-area: note; }
.fam__grp--sep .fam__spec { grid-area: spec; margin: 0; }
.fam__grp--sep .fam__ctas { grid-area: ctas; align-self: end; }
@supports (grid-template-rows: subgrid) {
.fam__grp > .fam__grid { grid-column: auto; grid-row: auto; grid-template-rows: none; }
.fam__grp--add > .fam__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); }
.fam__grp--sep > .fam__grid { grid-template-columns: minmax(0, 1fr); }
.fam__grp--sep .fam__c { grid-row: auto; }
}
}
/* phones: one column; the panel keeps PostureScreen and its included modules visibly together */
@media (max-width: 600px) {
.fam { --fg: 12px; --fp: 10px; --fr: 20px; gap: 36px; }
.fam__base { padding-top: 16px; border-radius: 26px; }
.fam .fam__grid, .fam .fam__grp--add > .fam__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
.fam .fam__grid > .fam__c, .fam .fam__grp .fam__c, .fam .fam__c--main { display: flex; flex-direction: column; align-items: stretch; grid-row: auto; margin-top: 0; }
.fam__ey { margin-left: 6px; }
.fam__ey--inc { margin-top: 20px; }
.fam__ey--inc::after { display: none; } /* the label wraps on phones; a stub of rule after it reads as a glitch */
.fam__logo { height: 46px; }
.fam__c { padding: 20px; }
.fam__c--main .fam__tag { font-size: 16px; }
.fam__c--main .fam__spec { grid-template-columns: auto 1fr; margin-top: 2px; font-size: 13.5px; }
.fam__c--main .fam__spec dd:first-of-type { margin-right: 0; }
.fam__c--main .fam__ctas { justify-content: flex-start; }
.fam .fam__ctas { align-self: flex-start; }
.fam .fam__c--soon .fam__chip { align-self: flex-start; }
.fam__spec { margin-top: 0; }
}
/* =========================================================================
17. PRICING (mist)
========================================================================= */
.pricing { padding: var(--pad) 0; }
.plans { display: grid; grid-template-columns: 1.1fr 1fr 1.05fr; gap: 16px; align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: 18px; padding: 30px 28px; border-radius: 26px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px var(--line); transition: transform .45s var(--ease-out), box-shadow .45s; }
.plan:hover { transform: translateY(-3px); }
.plan--main { background: #fff; box-shadow: inset 0 0 0 1.5px rgba(0, 128, 178, .35), var(--shadow-2); }
.plan__logo { height: 48px; width: auto; max-width: 100%; object-fit: contain; object-position: 0 50%; }
/* Loom Oct 8 2026 ("Updating PostureScribe UI and Pricing Details"): the third card leads with the RemoteScreen
logo at the same size as the other two, then "and [Cloud Services tile] Cloud Services" */
.plan__head { display: grid; gap: 12px; justify-items: start; align-content: start; }
.plan__and { display: flex; align-items: center; gap: 9px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); }
.plan__and-w { font-size: 17px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.plan__cs { flex: none; display: block; height: 48px; width: auto; max-width: calc(100% - 40px); } /* Oct 17 2026 Loom: "Cloud Services" is a full family logo now (tools/logo-kit), not a tile + text */
/* the three cards share their rows (logo, price, list, link), so prices and lists line up across the row */
@media (min-width: 901px) {
.plan { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }
}
.plan__price { font-size: 15px; color: var(--ink-2); display: block; }
.plan__amt { font-size: clamp(40px, 4.4vw, 56px); font-weight: 800; letter-spacing: -.04em; color: var(--ink); line-height: 1; display: inline; }
.plan__or { display: block; margin-top: 6px; font-size: 14px; color: var(--ink-3); }
.plan__from { font-size: 14px; color: var(--ink-3); }
.plan ul { display: grid; gap: 10px; align-content: start; font-size: 14.5px; color: var(--ink-2); padding-top: 16px; border-top: 1px solid var(--line); }
.plan li { position: relative; padding-left: 26px; }
.plan li svg { position: absolute; left: 0; top: 3px; width: 16px; height: 16px; color: var(--blue-t); }
.plan .badge, .plan .link { margin-top: auto; align-self: flex-start; }
/* round 6 (A16): every card opens the pricing page (a transparent whole-card link under the content);
the App Store badge, the "About …" links and the footnote links sit above it and keep working */
.plan { position: relative; cursor: pointer; }
.plan__hit { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.plan:hover .plan__hit::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 5px; } /* hover stays put (see .btn) */
.plan__hit:focus-visible { outline-offset: 4px; border-radius: 26px; }
.plan .badge, .plan .link, .plan sup a { position: relative; z-index: 2; }
.plans__more { margin-top: 30px; text-align: center; }
.plans__note { margin-top: 18px; text-align: center; font-size: 15px; color: var(--ink-2); }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }
/* =========================================================================
18. FAQ (white)
========================================================================= */
.faq { padding: var(--pad) 0 calc(var(--pad) * .62); }
.faq__grid { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(28px, 6vw, 90px); align-items: start; }
.faq__head { position: sticky; top: calc(var(--hdr) + 40px); }
.faq__contact { margin-top: 16px; font-size: 15px; color: var(--ink-2); max-width: 30ch; }
.faq__list { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 18px 0; font-size: clamp(16px, 1.35vw, 19px); font-weight: 600; letter-spacing: -.015em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: transform .45s var(--ease-spring), background .3s, box-shadow .3s; }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.6px; margin: -.8px 0 0 -5.5px; background: var(--ink); border-radius: 2px; }
.qa summary i::after { transform: rotate(90deg); }
.qa[open] summary i { transform: rotate(45deg); background: var(--ink); box-shadow: none; }
.qa[open] summary i::before, .qa[open] summary i::after { background: #fff; }
.qa summary:hover i { box-shadow: inset 0 0 0 1.5px var(--blue); }
.qa__a { padding: 0 44px 20px 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.qa__a .link { margin-left: 4px; }
html.kit:not(.kit-reduced) .qa[open] .qa__a { animation: qa-in .32s var(--ease-out); }
@keyframes qa-in { from { opacity: 0; transform: translate3d(0, -6px, 0); clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@media (max-width: 900px) { .faq__grid { grid-template-columns: 1fr; } .faq__head { position: static; } }
/* =========================================================================
19. CLOSE (aurora)
========================================================================= */
.close { overflow: clip; padding: clamp(84px, 9.5vw, 136px) 0; text-align: center; }
.aurora--close { background: transparent; }
.aurora--close .a1 { opacity: .7; }
.close__in { position: relative; z-index: 1; display: grid; justify-items: center; }
.close__icon { width: 92px; border-radius: 22px; box-shadow: 0 20px 44px -16px rgba(0, 128, 178, .6); margin-bottom: 30px; }
.close__h .nw { white-space: nowrap; }
.close__h { font-size: clamp(34px, 6.4vw, 88px); line-height: 1.02; letter-spacing: -.045em; font-weight: 800; display: grid; }
.close__b { background: linear-gradient(90deg, var(--blue), var(--sky)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-bottom: .06em; }
.close__p { margin-top: 20px; font-size: 17px; color: var(--ink-2); }
.close__cta { margin-top: 28px; display: grid; justify-items: center; gap: 16px; font-size: 15px; color: var(--ink-2); }
/* =========================================================================
FOOTER
========================================================================= */
.foot { color: #aab5c2; padding: clamp(60px, 7vw, 90px) 0 calc(36px + env(safe-area-inset-bottom)); font-size: 14px; }
.foot a { color: #d7dee6; }
.foot a:hover { color: #fff; }
.foot__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: clamp(30px, 5vw, 80px); padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.foot__brand { display: grid; gap: 16px; align-content: start; justify-items: start; }
.foot__brand > img { width: 150px; }
.foot__brand p { max-width: 32ch; line-height: 1.5; }
.foot__brand .badge img { width: 140px; }
.foot__dir { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.foot__dir h3 { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 12px; }
.foot__dir ul { display: grid; gap: 8px; font-size: 13.5px; }
.foot__mid { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 26px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.foot__contact { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.socials { display: flex; gap: 10px; }
.socials a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); transition: background .2s; }
.socials a:hover { background: rgba(255, 255, 255, .08); }
.socials svg { width: 17px; height: 17px; fill: currentColor; }
.foot__notes { padding: 20px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.foot__notes summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: #d7dee6; list-style: none; display: flex; align-items: center; gap: 8px; }
.foot__notes summary::-webkit-details-marker { display: none; }
.foot__notes summary::after { content: "+"; font-size: 18px; font-weight: 400; color: var(--sky); }
.foot__notes[open] summary::after { content: "–"; }
.foot__notes ol { list-style: decimal; padding-left: 20px; margin-top: 14px; display: grid; gap: 8px; font-size: 12.5px; line-height: 1.55; max-width: 110ch; }
.foot__notes li:target { color: #fff; }
/* page-only notes under the numbered list (site.mjs writePage footnotes), marked rather than numbered */
.foot__note { margin-top: 10px; font-size: 12.5px; line-height: 1.55; max-width: 110ch; }
.foot__note:target { color: #fff; }
.foot__mark { display: inline-block; min-width: 20px; }
.foot__legal { padding-top: 22px; display: grid; gap: 8px; font-size: 12px; color: #7c8796; max-width: 120ch; }
.foot__disclaimer { padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .08); line-height: 1.55; } /* medical-device disclaimer (Oct 8), on every page */
.foot__links { display: flex; gap: 18px; }
@media (max-width: 1000px) { .foot__top { grid-template-columns: 1fr; } .foot__dir { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .foot__dir { grid-template-columns: 1fr 1fr; } }
/* =========================================================================
CONTEXTUAL APP STORE DOCK
========================================================================= */
.dock { position: fixed; z-index: 90; left: auto; right: 20px; bottom: calc(18px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 11px; padding: 6px 6px 6px 7px; border-radius: 17px; background: rgba(255, 255, 255, .86); color: var(--ink); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); box-shadow: 0 18px 40px -14px rgba(11, 26, 46, .45), inset 0 0 0 1px var(--line); transform: translate3d(0, 160%, 0); transition: transform .55s var(--ease-out-expo), background .35s, color .35s; max-width: calc(100vw - 24px); }
.dock.is-on { transform: none; }
.dock.is-dark { background: rgba(14, 22, 34, .82); color: #fff; box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .12); }
.dock__ic { width: 34px; height: 34px; border-radius: 9px; flex: none; }
.dock__t { position: relative; overflow: hidden; height: 20px; font-size: 14px; font-weight: 600; letter-spacing: -.01em; min-width: 0; }
.dock__line { display: block; white-space: nowrap; transition: transform .38s var(--ease-out), opacity .38s; }
.dock__pre { opacity: .62; font-weight: 500; }
.dock__line.is-out { transform: translate3d(0, -110%, 0); opacity: 0; }
.dock__line.is-in { transform: translate3d(0, 110%, 0); opacity: 0; transition: none; }
.dock__cta { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 11px; background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 600; white-space: nowrap; flex: none; }
.dock__cta svg { width: 12px; height: 15px; margin-top: -2px; }
.dock__cta:hover { text-decoration: none; background: #000; }
.dock.is-dark .dock__cta { background: #fff; color: var(--ink); }
.dock__x { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: inherit; opacity: .55; flex: none; }
.dock__x:hover { opacity: 1; }
.dock__x svg { width: 14px; height: 14px; }
@media (min-width: 601px) { .dock__pre { display: inline; } }
@media (max-width: 600px) { .dock { right: 12px; gap: 8px; padding: 5px; border-radius: 15px; } .dock__t { display: none; } .dock__ic { width: 30px; height: 30px; border-radius: 8px; } .dock__cta { height: 32px; padding: 0 12px; font-size: 13px; } .dock__x { width: 24px; height: 24px; } }
/* =========================================================================
DESKTOP-TO-IPAD HANDOFF (QR sheet)
========================================================================= */
.qr { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; overflow: visible; }
.qr::backdrop { background: rgba(5, 12, 22, .32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.qr[open] { animation: qr-in .42s var(--ease-out-expo); }
@keyframes qr-in { from { opacity: 0; transform: scale(.6); } }
.qr__box { position: relative; display: grid; grid-template-columns: auto 260px; gap: 30px; align-items: center; padding: 30px; border-radius: 26px; background: #fff; box-shadow: 0 40px 90px -30px rgba(5, 12, 22, .6); color: var(--ink); width: min(620px, 92vw); }
.qr__close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-2); }
.qr__close svg { width: 16px; height: 16px; }
.qr__code { display: grid; justify-items: center; gap: 12px; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.qr__svg { width: 220px; height: 220px; padding: 12px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); clip-path: circle(0% at 50% 50%); }
.qr[open] .qr__svg { animation: qr-reveal .6s var(--ease-out) .15s forwards; }
@keyframes qr-reveal { to { clip-path: circle(75% at 50% 50%); } }
.qr__svg svg { width: 100%; height: 100%; }
.qr__card { display: grid; gap: 8px; justify-items: start; }
.qr__card > * { opacity: 0; transform: translate3d(0, 8px, 0); }
.qr[open] .qr__card > * { animation: rise-in .5s var(--ease-out) forwards; }
.qr[open] .qr__card > :nth-child(2) { animation-delay: .06s; } .qr[open] .qr__card > :nth-child(3) { animation-delay: .12s; } .qr[open] .qr__card > :nth-child(4) { animation-delay: .18s; } .qr[open] .qr__card > :nth-child(5) { animation-delay: .24s; }
@keyframes rise-in2 { to { opacity: 1; transform: none; } }
.qr[open] .qr__card > * { animation-name: rise-in2; }
.qr__card img { width: 64px; border-radius: 15px; box-shadow: var(--shadow-1); margin-bottom: 4px; }
.qr__h { font-size: 21px; letter-spacing: -.02em; }
.qr__dev { font-size: 13px; font-weight: 600; color: var(--blue-t); }
.qr__price { font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
.qr__price b { color: var(--ink); }
.qr__open { margin-top: 10px; height: 44px; }
.qr__open .apple, .qr__open .iph { width: 12px; height: 17px; }
@media (max-width: 640px) { .qr__box { grid-template-columns: 1fr; justify-items: center; text-align: center; } .qr__card { justify-items: center; } }
/* =========================================================================
VIDEO CONTROL + PLAYER
========================================================================= */
.vctl { position: absolute; z-index: 8; right: 8%; bottom: 4%; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); opacity: .85; transition: opacity .2s, transform .2s; }
.vctl:hover { opacity: 1; transform: scale(1.06); }
.vctl svg { width: 12px; height: 12px; }
.player { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; overflow: hidden; }
.player::backdrop { background: rgba(3, 6, 10, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.player[open] { display: grid; place-items: center; }
.player__box { width: min(420px, 90vw, calc((100svh - 120px) * .5625)); }
.player video { width: 100%; aspect-ratio: 9 / 16; border-radius: 18px; background: #000; }
.player__name { margin-top: 10px; text-align: center; color: #fff; font-weight: 600; }
.player__close { position: fixed; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); color: #fff; }
.player__close svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; }
/* =========================================================================
REDUCED MOTION
========================================================================= */
@media (prefers-reduced-motion: reduce) {
.aurora i, .bay__bg i, .rings i, .scribe__aura, .wave i, .marquee__track, .pipe__packet, .const__core img, .inst__lead path, .pin i::after, .vread__k::before, .bay__state i, .cue__ring, .cue__ring::after, .sound::after, .pinhud svg, .pulse { animation: none !important; }
/* the marquee stops: one set of the twelve names, wrapped and centred inside the exam's top band (and the pages' .pg-aud) */
.marquee__track { flex-wrap: wrap; justify-content: center; width: auto; padding: 0 var(--gutter); gap: 2px 14px; }
.marquee__track span { font-size: clamp(13px, 1.1vw, 16px); }
.marquee__set + .marquee__set { display: none; }
.marquee__set > i:last-child { display: none; } /* no dot after the last name once the list stops */
.marquee { -webkit-mask-image: none; mask-image: none; }
@media (max-width: 900px) { .exam { --aud-h: 176px; } } /* twelve names wrap to about seven lines on a phone */
.rings i:nth-child(1) { opacity: .5; transform: scale(.45); }
.rings i:nth-child(2) { opacity: .3; transform: scale(.7); }
.lift__face { transition-duration: .01s; }
}
/* ---------- Back to top (Joe 10/06: "we should also have an up button that brings us back") ----------
Shared by the homepage (script.js) and every sub-page (site.js). */
.totop { position: fixed; z-index: 95; left: 20px; bottom: calc(18px + env(safe-area-inset-bottom)); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .86); color: var(--ink); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); box-shadow: 0 12px 30px -12px rgba(11, 26, 46, .45), inset 0 0 0 1px var(--line); opacity: 0; transform: translate3d(0, 14px, 0) scale(.92); pointer-events: none; transition: opacity .3s var(--ease-out), transform .45s var(--ease-out-expo), background .3s, color .3s; }
.totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { text-decoration: none; background: #fff; }
.totop svg { width: 18px; height: 18px; transform: rotate(180deg); }
.totop.is-dark { background: rgba(14, 22, 34, .82); color: #fff; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .12); }
@media (max-width: 600px) { .totop { left: 12px; width: 40px; height: 40px; } }
/* round 6: the footer's last line (legal links) clears the back-to-top button when scrolled to the very end */
@media (max-width: 1340px) { .foot { padding-bottom: calc(84px + env(safe-area-inset-bottom)); } } /* Oct 8: was 1300; at 1301–1331 px back-to-top covered "Privacy Policy" */
@media (prefers-reduced-motion: reduce) { .totop { transition: opacity .2s; transform: none; } }
/* =========================================================================
2b. POSTURECO CLOUD (coming soon) · booth sky · pinned, 4 steps (WEB-147)
Joe's Oct 9 Loom: right after the 4-view exam, built like the RemoteScreen
scene (logo slot, H2, numbered steps, device on the right), in the booth
display's colours: light sky, soft blue waves, a dashed cloud. The MacBook
Pro (assets/kit/devices-mac.css) arrives closed and opens as the band
arrives; each step swaps its screen. The steps reserve the open height
(evenSubs) and script.js tweens the sub-lines together, so the column never
jumps, however fast the steps change.
========================================================================= */
.cloud { --scene-h: 215vh; --scene-h-m: 280vh; color: var(--ink); }
.cloud__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 80%, transparent); mask-image: linear-gradient(transparent, #000 16%, #000 80%, transparent); background: radial-gradient(48% 60% at 70% 50%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 100%); }
.cloud__bg i { position: absolute; border-radius: 50%; }
.cloud__bg .c1 { width: 58vw; height: 58vw; left: -20%; top: -28%; background: radial-gradient(closest-side, rgba(255, 255, 255, .6), transparent); animation: drift-a 26s var(--ease-in-out) infinite alternate; }
.cloud__bg .c2 { width: 44vw; height: 44vw; right: -8%; top: 8%; background: radial-gradient(closest-side, rgba(38, 188, 215, .14), transparent); animation: drift-b 22s var(--ease-in-out) infinite alternate; }
/* the booth's blue swooshes, low and quiet, on the laptop's side only (never under the copy); each wave is its own