/* =========================================================================
   PostureCo Cloud page (/postureco-cloud/, WEB-147; built by tools/pages/postureco-cloud.mjs).
   Joe's booth display is the art direction: white → light sky, big soft blue waves, navy type, PostureCo blue, and the
   orange of "Cloud" used sparingly (the Coming-soon pills). Apple rhythm: huge type, air, one idea per screen.
   Pinned scenes exist only under html.cl-pin (≥ 900 × 600, no reduced motion; set in <head>, kept current by cloud.js).
   Without it (phones, reduced motion, no JS) every section reads top to bottom, fully visible.
   All new classes are .cl-*; pages.css/styles.css tokens are reused.
   Devices (Joe, Oct 10 Loom, WEB-155): laptops that OPEN (hero, closer look, fly-ins) are the rendered kit
   (assets/kit/devices-mac.css); static devices (Big screen, the front-desk family) are Apple's own product bezels
   (assets/kit/devices-apple.css, .abz). Every screen is a maximized browser (1496 × 967 stills, 1600 × 1034 loop).
   ========================================================================= */
.cl-page {
  --cl-ink: #0b1a2e;
  --cl-navy: #1d3159;
  --cl-sky-1: #eaf6fb;
  --cl-sky-2: #dff0fa;
  --cl-sky-3: #cfe7f6;
  --cl-orange: #f0a62d;
  --cl-orange-t: #7d4c00;   /* text on the soft orange pill: 6.3:1 */
  --cl-panel: #f2f8fc;
  --cl-ease: cubic-bezier(.2, .7, .2, 1);
  --cl-expo: cubic-bezier(.16, 1, .3, 1);
  --cl-io: cubic-bezier(.65, 0, .35, 1);
}
.cl-page .mbp { pointer-events: none; }
[data-bg="cloudsky"] { --bgc: #dff0fa; }

/* ---------- shared bits ---------- */
.cl-h2 { font-size: clamp(34px, 5vw, 72px); line-height: 1.02; letter-spacing: -.045em; font-weight: 800; color: var(--cl-ink); text-wrap: balance; }
.cl-g { background: linear-gradient(90deg, var(--blue) 0%, #0a9cc9 55%, #1fb3d1 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--blue); padding-bottom: .06em; }
.cl-fine { margin-top: 22px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.cl-fine--c { text-align: center; }
/* the site disclaimer under the browser-digitizing tiles (Joe, Oct 11 2026 Loom; site.mjs SITE_DISCLAIMER): a readable measure */
.cl-disclaimer { max-width: 100ch; margin: 12px auto 0; color: var(--ink-2); text-align: justify; text-wrap: wrap; } /* --ink-2: AA contrast on the bottom of the #cl-web gradient; WEB-196 justified block */
.cl-soon { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; font-size: 11.5px; font-weight: 700; letter-spacing: .01em; line-height: 1; white-space: nowrap; padding: 5px 9px 5px 8px; border-radius: 999px; background: #fff3df; color: var(--cl-orange-t); box-shadow: inset 0 0 0 1px rgba(240, 166, 45, .62); -webkit-text-fill-color: var(--cl-orange-t); }
.cl-soon::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cl-orange); box-shadow: 0 0 0 3px rgba(240, 166, 45, .22); }
h3 .cl-soon, b .cl-soon { margin-left: 4px; position: relative; top: -.1em; }
/* "Only in PostureCo™ Cloud" / "A PostureCo™ Cloud exclusive" (Joe, Round 10: "make a big deal"): PostureCo blue, a star */
.cl-only { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; font-size: 11.5px; font-weight: 700; letter-spacing: .01em; line-height: 1; white-space: nowrap; padding: 5px 10px 5px 7px; border-radius: 999px; color: #fff; -webkit-text-fill-color: #fff; background: linear-gradient(135deg, #1aa6d6 0%, var(--blue) 55%, #005f88 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 18px -10px rgba(0, 106, 153, .9); }
.cl-only svg { width: 11px; height: 11px; flex: none; fill: #ffd28a; }
.cl-pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 10px; border-radius: 999px; font-size: 14px; font-weight: 700; letter-spacing: .01em; color: var(--cl-orange-t); background: rgba(255, 255, 255, .9); box-shadow: inset 0 0 0 1px rgba(240, 166, 45, .6), 0 12px 28px -18px rgba(110, 77, 0, .45); }
.cl-pill i { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--cl-orange); }
.cl-pill i::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--cl-orange); opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .cl-pill i::after { animation: cl-ping 2.4s var(--cl-ease) infinite 1.2s; } }
@keyframes cl-ping { 0% { opacity: .7; transform: scale(.5); } 80%, 100% { opacity: 0; transform: scale(1.6); } }

/* booth waves */
.cl-waves { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; }
.cl-waves path { transform-box: view-box; }
.cl-waves__a { fill: rgba(38, 188, 215, .14); }
.cl-waves__b { fill: rgba(0, 128, 178, .14); }
.cl-waves__c { fill: rgba(0, 128, 178, .18); }
.cl-waves__l { stroke: rgba(255, 255, 255, .9); stroke-width: 2; vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: no-preference) {
  .cl-waves__a { animation: cl-swell 16s var(--cl-io) infinite alternate; }
  .cl-waves__b { animation: cl-swell 21s var(--cl-io) infinite alternate-reverse; }
  .cl-waves__l { animation: cl-swell 16s var(--cl-io) infinite alternate; }
}
@keyframes cl-swell { to { transform: translate3d(0, -14px, 0) scale(1.04, 1.06); } }

/* ---------- the emblem (inline SVG): outline draws in, the cloud rises, the dashes drift ---------- */
.cl-emb { display: block; width: 100%; height: auto; overflow: visible; }
.cl-emb .cl-emb__draw { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.cl-emb .cl-emb__bg { filter: drop-shadow(0 18px 30px rgba(11, 60, 110, .10)); }
.cl-emb .cl-emb__cloud, .cl-emb .cl-emb__logo, .cl-emb .cl-emb__script { transform-box: fill-box; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) {
  .cl-js .cl-emb:not(.is-play) .cl-emb__draw { stroke-dashoffset: 1; }
  .cl-js .cl-emb:not(.is-play) :is(.cl-emb__cloud, .cl-emb__logo, .cl-emb__script, .cl-emb__bg) { opacity: 0; }
  .cl-emb.is-play .cl-emb__draw { animation: cl-draw 1.9s var(--cl-expo) .1s both; }
  .cl-emb.is-play .cl-emb__bg { animation: cl-fade .9s var(--cl-ease) both; }
  .cl-emb.is-play .cl-emb__cloud { animation: cl-rise 1.2s var(--cl-expo) .55s both; }
  .cl-emb.is-play .cl-emb__logo { animation: cl-rise .9s var(--cl-expo) .85s both; }
  .cl-emb.is-play .cl-emb__script { animation: cl-script 1.1s var(--cl-expo) 1.15s both; }
  .cl-emb.is-live .cl-emb__dash { animation: cl-drift 4.8s linear infinite; }
}
@keyframes cl-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes cl-fade { from { opacity: 0; } }
@keyframes cl-rise { from { opacity: 0; transform: translate3d(0, 6%, 0) scale(.96); } }
@keyframes cl-script { from { opacity: 0; transform: translate3d(-4%, 0, 0); clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes cl-drift { to { stroke-dashoffset: -60.13; } }

/* =========================================================================
   1. HERO
   ========================================================================= */
.cl-hero { position: relative; margin-top: calc(-1 * var(--hdr)); background: linear-gradient(180deg, #eaf6fb 0%, #eaf6fb 70%, #fff 100%); }
html.pbg main .cl-hero { background: transparent; }
.cl-hero__sticky { position: relative; padding: calc(var(--hdr) + clamp(14px, 2.2vw, 30px)) 0 0; overflow: clip; }
.cl-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
.cl-hero__glow { position: absolute; inset: 0; background:
  radial-gradient(42% 46% at 76% 30%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%),
  radial-gradient(50% 40% at 18% 12%, rgba(38, 188, 215, .16), transparent 70%),
  radial-gradient(60% 50% at 50% 100%, rgba(0, 128, 178, .10), transparent 70%); }
.cl-waves--hero { top: auto; height: 46%; }
.cl-hero__copy { position: relative; z-index: 2; }
.cl-hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(20px, 3.4vw, 56px); align-items: center; }
.cl-hero__text { display: grid; justify-items: start; }
.cl-h1 { margin-top: clamp(16px, 2vw, 24px); font-size: clamp(38px, min(4.7vw, 6.9vh), 72px); line-height: 1.0; letter-spacing: -.048em; font-weight: 800; color: var(--cl-ink); text-wrap: balance; }
.cl-h1 > span { display: block; }
.cl-hero__sub { margin-top: clamp(14px, 1.8vw, 22px); max-width: 50ch; font-size: clamp(16px, min(1.3vw, 2.2vh), 19px); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.cl-hero__ctas { margin-top: clamp(18px, 2.2vw, 28px); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.cl-hero__mark { justify-self: center; width: min(100%, clamp(300px, 36vw, 540px)); }
.cl-hero__stage { position: relative; z-index: 3; display: flex; justify-content: center; margin-top: clamp(24px, 4vw, 40px); pointer-events: none; }
.cl-hero__mac { width: min(940px, 100%); transform-origin: 0 0; }
.cl-hero__mac .mbp { --mbp-w: 100%; }
.cl-hero__fine { position: relative; z-index: 2; margin-top: 4px; padding-bottom: clamp(30px, 4vw, 54px); }
@media (prefers-reduced-motion: no-preference) {
  .cl-hero .pg-in { animation: pg-rise .8s var(--cl-ease) both; animation-delay: calc(var(--i, 0) * 80ms + 80ms); }
}
/* pinned: the copy at the top, the closed laptop resting on the bottom edge; cloud.js scrubs open → grow */
.cl-pin .cl-hero__scene { height: 270vh; height: 270svh; }
.cl-pin .cl-hero__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; }
.cl-pin .cl-hero__copy { will-change: opacity, transform; }
.cl-pin .cl-hero__stage { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; height: 0; display: block; }
.cl-pin .cl-hero__mac { position: absolute; left: 50%; bottom: calc(-1 * var(--cl-sink, 0px)); width: var(--cl-hw, 900px); margin-left: calc(var(--cl-hw, 900px) / -2); will-change: transform; }
.cl-pin .cl-hero__fine { margin-top: 0; padding-top: 18px; }
/* before cloud.js runs: every laptop marked cl-shut rests closed (data-mac-open="1" would paint it open; this outranks
   devices-mac.css, and MacDevice's inline --open takes over), and the hero laptop stays hidden until size() has fitted it
   under the copy (cloud.js adds .is-sized), so the first paint never shows a big open laptop over the H1 and CTAs.
   Without cloud.js the head script drops cl-pin after 2.5 s and the laptop shows in the unpinned layout. */
html.cl-pin .mbp.cl-shut { --open: 0; }
.cl-pin .cl-hero__mac:not(.is-sized) { visibility: hidden; opacity: 0; }
.cl-pin .cl-hero__mac.is-sized { transition: opacity .5s var(--cl-ease); }

/* =========================================================================
   2. TAKE A CLOSER LOOK
   ========================================================================= */
.cl-look { padding-top: clamp(80px, 9vw, 130px); padding-bottom: clamp(64px, 7vw, 100px); }
.cl-look__head { margin-bottom: clamp(26px, 3vw, 40px); }
.cl-panel { position: relative; display: grid; grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); gap: clamp(20px, 2.4vw, 36px); align-items: center; padding: clamp(28px, 3.6vw, 52px) clamp(24px, 3.4vw, 52px) clamp(18px, 2vw, 26px); border-radius: 32px; background: radial-gradient(70% 70% at 70% 100%, rgba(38, 188, 215, .12), transparent 70%), var(--cl-panel); overflow: clip; }
.cl-panel__mac { align-self: end; min-width: 0; display: flex; justify-content: center; }
.cl-panel__mac .mbp { --mbp-w: min(100%, 860px); }
.cl-pin .cl-look__scene { height: calc(124vh + 6 * 58vh); height: calc(124svh + 6 * 58svh); }
/* the panel stops 60 px above the bottom edge: the "n / 6" HUD lives in that strip, never on the laptop */
.cl-pin .cl-look__sticky { --cl-ph: min(760px, calc(100svh - var(--hdr) - 76px)); position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-items: center; padding: calc(var(--hdr) + 16px) 0 60px; }
.cl-pin .cl-panel { height: var(--cl-ph); grid-template-rows: minmax(0, 1fr); }
.cl-pin .cl-panel__mac { height: 100%; min-height: 0; align-items: flex-end; will-change: transform; }
/* sized by the panel height (its row is the content box); the empty headroom where the lid rises may run into the top padding */
.cl-pin .cl-panel__mac .mbp { --mbp-w: min(100%, calc((var(--cl-ph) - 30px) / .89)); flex: none; }
.cl-look__sticky .pinhud { bottom: 14px; }
.pinhud__l { color: var(--cl-orange-t); font-weight: 700; }
.pinhud__l::after { content: "·"; margin-left: 10px; color: var(--ink-3); font-weight: 600; }

/* the step pills: Apple's "+" pills that open into a bubble; every bubble opens to the tallest description (--sub), so
   the list never changes height (Joe's standing rule: pinned step lists never jump) */
.cl-steps { display: grid; gap: 10px; align-content: start; counter-reset: cl; }
.cl-step button { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 0 12px; align-items: start; width: fit-content; max-width: 100%; text-align: left; padding: 10px 18px 10px 10px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px rgba(11, 26, 46, .08); transition: box-shadow .45s var(--cl-ease), background .45s; }
.cl-step.is-active button { width: 100%; box-shadow: inset 0 0 0 1px rgba(0, 128, 178, .18), 0 18px 40px -22px rgba(11, 40, 80, .45); }
.cl-step button:hover { box-shadow: inset 0 0 0 1px rgba(0, 128, 178, .3); }
.cl-step.is-active button:hover { box-shadow: inset 0 0 0 1px rgba(0, 128, 178, .3), 0 18px 40px -22px rgba(11, 40, 80, .45); }
.cl-step__ic { position: relative; width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 128, 178, .1); transition: background .4s, transform .5s var(--cl-ease); }
.cl-step__ic::before, .cl-step__ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; margin: -1px 0 0 -5px; border-radius: 2px; background: var(--blue-t); transition: background .4s, transform .45s var(--cl-ease); }
.cl-step__ic::after { transform: rotate(90deg); }
.cl-step.is-active .cl-step__ic { background: var(--blue-t); transform: rotate(180deg); }
.cl-step.is-active .cl-step__ic::before, .cl-step.is-active .cl-step__ic::after { background: #fff; }
.cl-step.is-active .cl-step__ic::after { transform: rotate(0deg); }
.cl-step__t { display: grid; min-width: 0; }
.cl-step__t b { display: block; min-height: 26px; padding-top: 3px; font-size: 15.5px; line-height: 1.35; font-weight: 600; color: var(--ink-2); transition: color .4s; }
.cl-step.is-active .cl-step__t b { color: var(--cl-ink); }
/* the sub-line heights are never a CSS transition: cloud.js tweens every sub-line with one eased factor, so however many
   steps change inside the half second their heights always add up to --sub and the pills below never move */
.cl-step__sub { display: block; height: 0; overflow: hidden; opacity: 0; transition: opacity .35s; }
.cl-step__sub > span { display: block; padding-top: 6px; padding-bottom: 2px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); text-wrap: balance; }
.cl-step.is-active .cl-step__sub { height: var(--sub, auto); opacity: 1; transition: opacity .5s .12s; }
.cl-steps.is-measuring .cl-step__sub { height: auto !important; transition: none !important; }
.cl-step__tags { display: flex; flex-wrap: wrap; gap: 5px 6px; margin: 5px 0 1px; }
.cl-step__tags .cl-soon { margin: 0; top: 0; }
/* before the laptop opens, the pills wait; they fade in one after another (60 ms stagger) */
@media (prefers-reduced-motion: no-preference) {
  .cl-js .cl-step { opacity: 0; transform: translate3d(0, 10px, 0) scale(.97); transition: opacity .6s var(--cl-ease), transform .7s var(--cl-expo); transition-delay: calc(var(--i, 0) * 60ms + 450ms); }
  .cl-js .cl-panel.is-open .cl-step { opacity: 1; transform: none; }
  .cl-js .cl-panel.is-quick .cl-step { transition-delay: 0s; }
}

/* =========================================================================
   4. EVERYTHING FLOWS TO ONE PLACE
   ========================================================================= */
.cl-flow { position: relative; padding: var(--pad) 0; overflow: clip; }
.cl-flow__bg { position: absolute; inset: auto 0 0 0; height: 40%; z-index: -1; pointer-events: none; }
.cl-flow__bg .cl-waves__a { fill: rgba(255, 255, 255, .55); }
.cl-flow__bg .cl-waves__b { fill: rgba(255, 255, 255, .5); }
.cl-flow__bg .cl-waves__c { fill: rgba(255, 255, 255, .6); }
.cl-diagram { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 1.2fr) minmax(0, 1.1fr); grid-template-rows: auto auto; gap: clamp(20px, 2.6vw, 34px) clamp(22px, 3.4vw, 48px); align-items: stretch; }
/* the four cards share two grid rows, so each pair shares its top and its height (the hub spans both rows) */
.cl-diagram__col { display: contents; }
.cl-src--ps { grid-area: 1 / 1; } .cl-src--rs { grid-area: 2 / 1; } .cl-src--scribe { grid-area: 1 / 3; } .cl-src--ray { grid-area: 2 / 3; }
.cl-diagram__hub { position: relative; z-index: 2; grid-area: 1 / 2 / 3 / 3; align-self: center; display: grid; justify-items: center; gap: 14px; }
.cl-hub { width: 100%; max-width: 600px; min-width: 300px; }
.cl-hub__soon { margin: 0; }
.cl-wires { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cl-wire { fill: none; stroke: #0a6a99; stroke-width: 2; stroke-dasharray: 7 7; stroke-linecap: butt; opacity: .7; }
.cl-wire--ray { stroke: #3d6f95; stroke-dasharray: .1 8; stroke-linecap: round; stroke-width: 3.2; opacity: .75; }
.cl-pulse { fill: #26bcd7; filter: drop-shadow(0 0 5px rgba(38, 188, 215, .9)); }
.cl-pulse--ray { fill: var(--cl-orange); filter: drop-shadow(0 0 5px rgba(240, 166, 45, .9)); }
.cl-src { position: relative; z-index: 2; display: grid; grid-template-columns: 80px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 6px 16px; align-items: start; padding: 16px; border-radius: 24px; color: var(--ink-2); background: rgba(255, 255, 255, .92); box-shadow: inset 0 0 0 1px rgba(0, 106, 153, .14), 0 22px 44px -28px rgba(11, 40, 80, .42); transition: transform .35s var(--cl-ease), box-shadow .35s; }
.cl-src:hover { text-decoration: none; transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(0, 106, 153, .3), 0 26px 50px -26px rgba(11, 40, 80, .5); }
.cl-src:hover::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 5px; } /* hover stays put (styles.css, .btn) */
.cl-src__vis { grid-row: 1 / 3; display: grid; place-items: center; height: 124px; }
.cl-src__vis .abz--ipad-portrait { width: 82px; }
.cl-src__vis .abz--iphone { width: 54px; }
.cl-src__brand { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 30px; }
.cl-src__logo { height: 26px; width: auto; }
.cl-src--scribe .cl-src__logo { height: 27px; }
.cl-src__p { font-size: 14px; line-height: 1.45; }
.cl-src__go { flex: none; margin-left: auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--blue-t); background: rgba(0, 128, 178, .08); transition: transform .3s var(--cl-ease); }
.cl-src__go svg { width: 12px; height: 12px; }
.cl-src:hover .cl-src__go { transform: translateX(3px); }
.cl-film { position: relative; display: block; width: 70px; aspect-ratio: 2 / 3; border-radius: 8px; overflow: hidden; background: #000; box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(11, 26, 46, .14), 0 14px 26px -14px rgba(0, 0, 0, .6); }
.cl-film img { position: absolute; max-width: none; width: 400%; height: auto; left: -92%; top: -54%; }   /* the left film of the 1496 × 967 still */
.cl-spine { display: none; }
.cl-hubrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin-top: clamp(40px, 5vw, 64px); }
.cl-hubrow span { padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--cl-navy); background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(0, 106, 153, .14); }
.cl-hubrow span:last-child { color: var(--cl-orange-t); background: #fff3df; box-shadow: inset 0 0 0 1px rgba(240, 166, 45, .5); }
/* RemoteScreen®, verified by you first (Joe F4): one white card under the diagram, the logo on white (never a plate) */
.cl-rs { position: relative; z-index: 2; max-width: 1080px; margin: clamp(48px, 6vw, 80px) auto 0; padding: clamp(26px, 3.4vw, 46px); border-radius: 30px; background: rgba(255, 255, 255, .94); box-shadow: inset 0 0 0 1px rgba(0, 106, 153, .12), 0 30px 60px -40px rgba(11, 40, 80, .5); }
.cl-rs__head { display: grid; justify-items: center; gap: 14px; text-align: center; }
.cl-rs__logo { height: 30px; width: auto; }
.cl-rs__h { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.12; letter-spacing: -.035em; font-weight: 800; color: var(--cl-ink); text-wrap: balance; }
.cl-rs__h span { color: var(--blue-t); }
.cl-rs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 40px); margin-top: clamp(24px, 3vw, 36px); }
.cl-rs__pt { display: grid; align-content: start; gap: 8px; }
.cl-rs__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; color: var(--blue-t); background: rgba(0, 128, 178, .09); }
.cl-rs__ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cl-rs__pt:first-child .cl-rs__ic { color: #fff; background: linear-gradient(160deg, #1aa6d6, var(--blue) 60%, #005f88); }
.cl-rs__t { margin: 4px 0 0; font-size: 17px; line-height: 1.3; letter-spacing: -.015em; font-weight: 700; color: var(--cl-ink); }
.cl-rs__pt p { font-size: 15px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.cl-rs__uses { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: clamp(24px, 3vw, 34px); padding-top: clamp(20px, 2.4vw, 28px); border-top: 1px solid var(--line); }
.cl-rs__uses li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font-size: 13.5px; line-height: 1.3; font-weight: 600; text-align: center; color: var(--cl-navy); background: var(--cl-panel); box-shadow: inset 0 0 0 1px rgba(0, 106, 153, .14); }
.cl-rs__uses .cl-rs__soon { padding: 4px 5px 4px 14px; }

/* =========================================================================
   3. BEFORE, DURING AND AFTER (fly-ins)
   ========================================================================= */
.cl-day { padding-top: var(--pad); padding-bottom: clamp(56px, 6vw, 90px); overflow: clip;
  /* Joe's Oct 12 Loom: right after #cl-look (white, no seam), right before #cl-flow: the beats stay on white and only the
     tail (the end of the pin, the preview line) eases into #cl-flow's #dff0fa, so there is no seam either side */
  background: linear-gradient(180deg, #fff 0%, #fff calc(100% - 420px), #f3f8fb calc(100% - 260px), #dff0fa 100%); }
.cl-beat__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; }
.cl-day__head { text-align: center; display: grid; justify-items: center; margin-bottom: clamp(30px, 4vw, 56px); }
.cl-day__stack { display: grid; gap: clamp(56px, 8vw, 110px); }
.cl-beat { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 64px); align-items: center; }
.cl-beat--l { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.cl-beat--l .cl-beat__copy { order: 2; }
.cl-beat__copy { max-width: 400px; }
.cl-beat__n { display: block; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--blue-t); }
.cl-beat__h { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.05; letter-spacing: -.035em; font-weight: 800; color: var(--cl-ink); }
.cl-beat__copy p { margin-top: 14px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.cl-beat__mac { min-width: 0; display: flex; justify-content: center; }
.cl-beat__mac .mbp { --mbp-w: min(100%, 760px); transform-origin: 50% 70%; }
/* phones / reduced motion: each pair flies in once when it scrolls into view */
@media (prefers-reduced-motion: no-preference) {
  html.cl-js:not(.cl-pin) .cl-beat .mbp { --yaw: -26; opacity: 0; transform: translate3d(22%, 0, 0) scale(.86); transition: --yaw 1.3s var(--cl-expo), transform 1.3s var(--cl-expo), opacity .7s var(--cl-ease); }
  html.cl-js:not(.cl-pin) .cl-beat--l .mbp { --yaw: 26; transform: translate3d(-22%, 0, 0) scale(.86); }
  html.cl-js:not(.cl-pin) .cl-beat .cl-beat__copy { opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity .8s var(--cl-ease) .25s, transform .9s var(--cl-ease) .25s; }
  html.cl-js:not(.cl-pin) .cl-beat.is-in .mbp { --yaw: 0; opacity: 1; transform: none; }
  html.cl-js:not(.cl-pin) .cl-beat.is-in .cl-beat__copy { opacity: 1; transform: none; }
}
/* pinned: the three beats stack in one sticky stage; cloud.js flies each laptop in and turns it to face you */
.cl-pin .cl-day__scene { height: calc(100vh + 3 * 100vh); height: calc(100svh + 3 * 100svh); }
.cl-pin .cl-day__head { position: absolute; left: 0; right: 0; top: calc(var(--hdr) + clamp(24px, 7vh, 80px)); z-index: 3; margin-bottom: 0; will-change: opacity, transform; pointer-events: none; }
.cl-pin .cl-day__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-items: center; padding-top: var(--hdr); overflow: clip; }
.cl-pin .cl-day__stack { display: grid; }
.cl-pin .cl-beat { grid-area: 1 / 1; }
.cl-pin .cl-beat .mbp { will-change: transform, opacity; }
.cl-pin .cl-beat__mac .mbp { --mbp-w: min(100%, 760px, calc((100svh - var(--hdr) - 60px) * 1.05)); }
.cl-pin .cl-beat__copy { will-change: opacity, transform; }
/* "Digitize right in the cloud. No iPad needed." (Joe D1): a headline-level statement after the fly-ins */

/* =========================================================================
   5. BIG SCREEN: Apple's "Three chips. Second to none." Apple's own MacBook Pro 16" bezel (.abz: it never opens, so it is
   not rendered), as large as the window allows, with
   Apple's chip-selector pills beside it. Every caption sits in ONE grid cell (only opacity changes), the pills never
   change size, so nothing beside the laptop moves (Joe's standing rule). Pinned: cloud.js sizes the laptop to the
   window (--cl-bmw / --cl-brw), plays the entrance and steps the screens with the scroll.
   ========================================================================= */
.cl-big { padding-top: var(--pad); padding-bottom: clamp(56px, 6vw, 90px); overflow: clip; background: linear-gradient(180deg, #edf4f8 0%, #edf4f8 60%, #f7fafc 100%); }
.cl-big__head { text-align: center; display: grid; justify-items: center; }
.cl-big__head .lede { margin-top: 14px; max-width: 46ch; }
.cl-big__body { width: min(1320px, 100% - 2 * var(--gutter)); margin: clamp(28px, 4vw, 52px) auto 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 300px); gap: clamp(24px, 3vw, 48px); align-items: center; }
.cl-big__mac { min-width: 0; touch-action: pan-y; }
/* Apple's MacBook Pro 16" bezel (it never opens); a soft floor shadow like Apple's product shots */
.cl-big__mac { position: relative; }
.cl-big__mac .abz { --abz-w: 100%; }
.cl-big__mac::after { content: ""; position: absolute; z-index: -1; left: 6%; right: 6%; bottom: -2.2%; height: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(10, 30, 60, .26), rgba(10, 30, 60, 0)); pointer-events: none; }
.cl-big__layer > img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.cl-big__badge { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); box-shadow: inset 0 0 0 1px rgba(240, 166, 45, .7), 0 10px 24px -10px rgba(0, 0, 0, .55); }

.cl-rail { display: grid; align-content: center; gap: 22px; min-width: 0; }
/* one even column (every pill as wide as the widest), so nothing wraps into an orphan row */
.cl-rail__pills { display: grid; grid-template-columns: max-content; justify-content: start; gap: 8px; }
.cl-rail__pills .cl-chip { justify-content: start; }
/* Apple's chip selector: every pill prints its name (glyph + label); pill sizes never change, so nothing moves */
.cl-chip { position: relative; display: inline-grid; grid-auto-flow: column; place-items: center; gap: 7px; height: 38px; padding: 0 14px 0 11px; border-radius: 999px; font-size: 13.5px; font-weight: 600; line-height: 1; white-space: nowrap; color: var(--blue-t); background: #fff; box-shadow: inset 0 0 0 1px rgba(11, 26, 46, .1), 0 8px 18px -14px rgba(11, 40, 80, .5); transition: background .35s var(--cl-ease), color .35s, box-shadow .35s; }
.cl-chip svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.cl-chip:hover { box-shadow: inset 0 0 0 1px rgba(0, 128, 178, .4), 0 8px 18px -14px rgba(11, 40, 80, .5); }
.cl-chip.is-active { color: #fff; background: linear-gradient(160deg, #1aa6d6, var(--blue) 58%, #005f88); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 12px 24px -12px rgba(0, 106, 153, .85); }
/* status markers sit at the pill's right end: an orange dot = coming soon, a star = a PostureCo Cloud exclusive (the
   same star as the "Only in PostureCo Cloud" badge); the active pill keeps the star white, never amber */
.cl-chip--soon, .cl-chip--ex { padding-right: 32px; }
.cl-chip--soon::after, .cl-chip--ex::after { content: ""; position: absolute; top: 50%; right: 13px; transform: translateY(-50%); }
.cl-chip--soon::after { width: 7px; height: 7px; border-radius: 50%; background: var(--cl-orange); box-shadow: 0 0 0 3px rgba(240, 166, 45, .2); }
.cl-chip--soon.is-active::after { box-shadow: 0 0 0 2px rgba(255, 255, 255, .55); }
.cl-rail__caps { display: grid; }
/* one clean change: the outgoing caption is gone before the incoming one fades up (never two overprinted) */
.cl-cap { grid-area: 1 / 1; opacity: 0; transition: opacity .18s ease-out; pointer-events: none; }
.cl-cap.is-active { opacity: 1; pointer-events: auto; transition: opacity .45s var(--cl-ease) .18s; }
.cl-cap__p { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.4; letter-spacing: -.012em; font-weight: 600; color: var(--ink-3); text-wrap: pretty; }
.cl-cap__p b { color: var(--cl-ink); font-weight: 700; }
.cl-cap__x { margin-top: 14px; font-size: clamp(15px, 1.15vw, 17px); font-weight: 700; letter-spacing: -.01em; color: var(--blue-t); }
.cl-cap__x .cl-soon { font-size: 12.5px; padding: 6px 11px 6px 9px; }
.cl-cap__sub { display: block; margin-top: 10px; }   /* the X-ray screen's "Separate PostureRay® subscription required." (Round 10) */
.cl-rail__fine { margin-top: 0; font-size: 12px; }
.cl-cap__ex { margin-bottom: 12px; }
.cl-cap__ex .cl-only { font-size: 12.5px; padding: 7px 12px 7px 9px; gap: 7px; }
.cl-cap__ex .cl-only svg { width: 13px; height: 13px; }
.cl-chip--ex::after { width: 12px; height: 12px; background: #1aa6d6; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 .9l1.6 4.6 4.9.1-3.9 3 1.4 4.7L8 10.5l-4 2.8 1.4-4.7-3.9-3 4.9-.1z'/%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='M8 .9l1.6 4.6 4.9.1-3.9 3 1.4 4.7L8 10.5l-4 2.8 1.4-4.7-3.9-3 4.9-.1z'/%3E%3C/svg%3E") center / contain no-repeat; }
.cl-chip--ex.is-active::after { background: #fff; }

/* pinned: the laptop fills the window beside the rail; the heading sits over the entrance pose, then fades */
.cl-pin .cl-big__scene { height: calc(160vh + 5 * 64vh); height: calc(160svh + 5 * 64svh); }
.cl-pin .cl-big__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; }
.cl-pin .cl-big__head { position: absolute; left: 0; right: 0; top: calc(var(--hdr) + clamp(26px, 5vh, 56px)); z-index: 2; will-change: opacity, transform; }
.cl-pin .cl-big__body { position: absolute; left: 50%; top: calc(var(--hdr) + 12px); bottom: 62px; width: min(1440px, 100vw - 2 * var(--gutter)); margin: 0; transform: translateX(-50%); grid-template-columns: var(--cl-bcw, minmax(0, 1fr)) var(--cl-brw, 300px); justify-content: center; column-gap: var(--cl-bgap, 40px); }
/* the bezel's box is the drawn laptop (Apple's transparent margins hang outside it); cloud.js sizes it to the window */
.cl-pin .cl-big__mac { position: relative; z-index: 1; width: var(--cl-bmw, 100%); justify-self: center; transform-origin: 0 0; will-change: transform; }
.cl-pin .cl-rail { will-change: opacity, transform; }
/* portrait windows (iPad Pro portrait): the laptop takes the full content width, the rail sits centred beneath it */
.cl-pin .cl-big__body.is-stack { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; align-items: start; row-gap: var(--cl-bgap, 40px); }
.cl-pin .is-stack .cl-rail { justify-self: center; justify-items: center; width: min(640px, 100%); text-align: center; gap: 16px; }
.cl-pin .is-stack .cl-rail__pills { display: flex; flex-wrap: wrap; justify-content: center; }
.cl-big__sticky .pinhud { bottom: 14px; }

/* =========================================================================
   6. AT THE FRONT DESK: an Apple family shot in Apple's own bezels. Front-on, true to scale (iMac 24" 54.7 cm,
   MacBook Pro 16" 35.6 cm, iPad Pro 13" 21.5 cm, iPhone 17 Pro 7.2 cm wide), overlapping, every device standing on
   one shared baseline (bottom: 0). Sizes are % of the group's width; --cl-fw / --cl-fl per device, the group's
   height is the iMac's (aspect-ratio). Shadows are subtle: a soft contact shadow under each device and a faint drop
   shadow where one device overlaps another (cqw units, so they scale with the group).
   ========================================================================= */
.cl-desk { padding-bottom: clamp(70px, 8vw, 110px); }
.cl-family {
  --cl-imac: 54; --cl-u: calc(var(--cl-imac) / 54.7);   /* % of the group's width per cm of device width */
  position: relative; container-type: inline-size; width: 100%; max-width: 1180px; margin: clamp(18px, 3vw, 40px) auto 0;
  aspect-ratio: 100 / 45.51;   /* the iMac's height: 54 × 3976 / 4718 */
}
.cl-family > div { position: absolute; bottom: 0; left: calc(var(--cl-fl) * 1%); width: calc(var(--cl-fw) * 1%); }
.cl-family > div::before { content: ""; position: absolute; z-index: 0; left: 3%; right: 3%; bottom: 0; height: 2.2cqw; transform: translateY(50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(10, 30, 60, .2), rgba(10, 30, 60, 0)); pointer-events: none; }
.cl-family .abz { position: relative; z-index: 1; }
.cl-family .abz__frame { filter: drop-shadow(0 .35cqw .8cqw rgba(10, 30, 60, .14)); }
.cl-family__imac  { --cl-fw: var(--cl-imac);            --cl-fl: 28.55; z-index: 1; }
.cl-family__mbp   { --cl-fw: calc(35.57 * var(--cl-u)); --cl-fl: .45;   z-index: 2; }
.cl-family__pad   { --cl-fw: calc(21.5 * var(--cl-u));  --cl-fl: 75.05; z-index: 3; }
.cl-family__phone { --cl-fw: calc(7.18 * var(--cl-u));  --cl-fl: 92.45; z-index: 4; }
.cl-family__phone::before { left: -10%; right: -10%; }
.cl-desk .cl-fine { margin-top: 34px; }

/* =========================================================================
   7. INTELLIGENCE (the one dark band)
   ========================================================================= */
.cl-ai { position: relative; padding: var(--pad) 0; overflow: clip; color: var(--dk-ink); }
.cl-ai .eyebrow { color: var(--sky); }
.cl-ai__aura { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cl-ai__aura i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; }
.cl-ai__aura i:nth-child(1) { left: 8%; top: 4%; width: 46%; height: 60%; background: radial-gradient(closest-side, rgba(38, 188, 215, .38), transparent); }
.cl-ai__aura i:nth-child(2) { right: 4%; top: 18%; width: 40%; height: 56%; background: radial-gradient(closest-side, rgba(0, 128, 178, .45), transparent); }
.cl-ai__aura i:nth-child(3) { left: 32%; bottom: -10%; width: 40%; height: 46%; background: radial-gradient(closest-side, rgba(240, 166, 45, .22), transparent); }
@media (prefers-reduced-motion: no-preference) {
  .cl-ai__aura i:nth-child(1) { animation: cl-orbit 18s var(--cl-io) infinite alternate; }
  .cl-ai__aura i:nth-child(2) { animation: cl-orbit 22s var(--cl-io) infinite alternate-reverse; }
  .cl-ai__aura i:nth-child(3) { animation: cl-orbit 26s var(--cl-io) infinite alternate; }
}
@keyframes cl-orbit { to { transform: translate3d(8%, 6%, 0) scale(1.12); } }
.cl-ai__h span { background: linear-gradient(90deg, #9fe3f0 0%, #4fc3e6 25%, #2f8fe0 45%, #f0a62d 65%, #9fe3f0 85%, #4fc3e6 100%) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #9fe3f0; padding-bottom: .08em; }
@media (prefers-reduced-motion: no-preference) { .cl-ai__h span { animation: cl-shimmer 9s linear infinite; } }
@keyframes cl-shimmer { to { background-position: -200% 0; } }
.cl-ai__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); max-width: 1040px; margin: 0 auto; }
@property --cl-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.cl-ai__card { position: relative; isolation: isolate; padding: clamp(24px, 2.6vw, 36px); border-radius: 26px; background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 60px -36px rgba(0, 0, 0, .8); }
.cl-ai__ring { position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--cl-ang), rgba(38, 188, 215, .0) 0deg, rgba(38, 188, 215, .85) 70deg, rgba(240, 166, 45, .7) 130deg, rgba(38, 188, 215, 0) 200deg, rgba(38, 188, 215, 0) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: .75; }
@media (prefers-reduced-motion: no-preference) { .cl-ai__ring { animation: cl-spin 7s linear infinite; } .cl-ai__card:nth-child(2) .cl-ai__ring { animation-delay: -1.75s; } .cl-ai__card:nth-child(3) .cl-ai__ring { animation-delay: -3.5s; } .cl-ai__card:nth-child(4) .cl-ai__ring { animation-delay: -5.25s; } }
@keyframes cl-spin { to { --cl-ang: 360deg; } }
.cl-ai__logo { height: 34px; width: auto; margin-bottom: 4px; }
.cl-ai__t { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.25; letter-spacing: -.02em; font-weight: 700; color: #fff; }
.cl-ai__card p { margin-top: 12px; font-size: 16px; line-height: 1.55; color: var(--dk-2); text-wrap: pretty; }
.cl-ai .cl-soon { background: rgba(240, 166, 45, .16); color: #ffd28a; -webkit-text-fill-color: #ffd28a; box-shadow: inset 0 0 0 1px rgba(240, 166, 45, .5); }

/* =========================================================================
   8. TRUST
   ========================================================================= */
.cl-trust .lede { margin-top: 14px; }
.cl-trust__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.cl-lock { position: relative; justify-self: center; width: min(440px, 100%); aspect-ratio: 1; display: grid; place-items: center; }
.cl-lock__ring { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(38, 188, 215, .14), rgba(38, 188, 215, 0)); }
.cl-lock__ring--2 { inset: 20%; border: 1.5px dashed rgba(0, 106, 153, .28); background: none; }
.cl-lock__cloud { position: relative; width: 78%; overflow: visible; filter: drop-shadow(0 26px 40px rgba(0, 80, 140, .18)); }
.cl-lock__fill { fill: #fff; }
.cl-lock__dash { fill: none; stroke: #006a99; stroke-width: 1.6; stroke-dasharray: 1.6 1.6; vector-effect: non-scaling-stroke; }
.cl-lock__key { position: absolute; left: 50%; top: 54%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 24px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, #1aa6d6, var(--blue) 60%, #005f88); box-shadow: 0 18px 34px -14px rgba(0, 106, 153, .8), inset 0 1px 0 rgba(255, 255, 255, .3); }
.cl-lock__key svg { width: 32px; height: 32px; }
@media (prefers-reduced-motion: no-preference) {
  .cl-lock__ring--2 { animation: cl-turn 40s linear infinite; }
  .cl-lock__ring:not(.cl-lock__ring--2) { animation: cl-breathe 4.5s var(--cl-io) infinite alternate; }
  .cl-lock__dash { animation: cl-drift-s 3s linear infinite; }
  .cl-lock__key { animation: cl-float 5s var(--cl-io) infinite alternate; }
}
@keyframes cl-turn { to { transform: rotate(360deg); } }
@keyframes cl-breathe { to { transform: scale(1.08); opacity: .7; } }
@keyframes cl-drift-s { to { stroke-dashoffset: -3.2; } }
@keyframes cl-float { to { transform: translate3d(0, -6px, 0); } }

/* =========================================================================
   9. PLANS
   ========================================================================= */
.cl-plans { position: relative; }

/* the close band: the full PostureCo Cloud emblem (inline; its dashes drift like the hero's) in place of the icon tile */
.cl-close__mark { width: clamp(300px, 34vw, 460px); max-width: 100%; margin: -6px 0 clamp(18px, 2.4vw, 30px); }
.cl-close__mark .cl-emb__bg { filter: drop-shadow(0 22px 36px rgba(11, 60, 110, .14)); }

/* the close band's CTA row */
.pg-btnrow--c { justify-content: center; margin-top: 0; }
.cl-page .close__cta > .pg-btnrow + p { margin-top: 18px; }

/* =========================================================================
   Responsive
   ========================================================================= */
/* narrower desktops: each card stacks (device on top, logo and sentence below) so the text keeps a calm measure */
@media (min-width: 900px) and (max-width: 1100px) {
  .cl-src { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; align-content: start; gap: 10px; padding: 16px 18px 18px; }
  .cl-src__vis { grid-row: auto; height: 112px; }
  .cl-diagram { grid-template-columns: minmax(0, 1fr) minmax(300px, 1.15fr) minmax(0, 1fr); gap: 20px; }
  .cl-src__logo { height: 22px; }
  .cl-src--scribe .cl-src__logo { height: 23px; }
}
@media (max-width: 899px) {
  .cl-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cl-hero__mark { order: -1; width: min(100%, 400px); min-width: 300px; justify-self: center; margin: 4px 0 0; }
  .cl-h1 { font-size: clamp(36px, 9.6vw, 56px); }
  .cl-panel { grid-template-columns: minmax(0, 1fr); padding: 22px 16px 18px; border-radius: 26px; }
  .cl-panel__mac { order: -1; }
  .cl-steps { gap: 8px; }
  .cl-step button { width: 100%; }
  .cl-diagram { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 14px; align-items: stretch; }
  .cl-diagram .cl-src { grid-area: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; align-content: start; padding: 14px 14px 16px; gap: 8px; border-radius: 20px; }
  .cl-src__vis { grid-row: auto; height: 112px; }
  .cl-src__go { display: none; }
  .cl-src__p { font-size: 13.5px; }
  .cl-src--ps { order: 1; } .cl-src--rs { order: 2; } .cl-src--scribe { order: 3; } .cl-src--ray { order: 4; }
  .cl-spine { order: 5; grid-column: 1 / -1; display: block; justify-self: center; position: relative; width: 2px; height: 70px; margin: 4px 0; background: repeating-linear-gradient(180deg, #0a6a99 0 7px, transparent 7px 14px); opacity: .7; }
  .cl-spine b { position: absolute; left: -4px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: #26bcd7; box-shadow: 0 0 8px rgba(38, 188, 215, .9); }
  .cl-diagram__hub { order: 6; grid-area: auto; grid-column: 1 / -1; }
  .cl-hub { width: min(100%, 360px); min-width: 300px; }
  .cl-wires { display: none; }
  .cl-beat, .cl-beat--l { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .cl-beat--l .cl-beat__copy { order: 0; }
  .cl-beat__copy { max-width: none; }
  .cl-big__body { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .cl-rail { justify-items: center; text-align: center; gap: 18px; }
  .cl-rail__pills { display: flex; flex-wrap: wrap; justify-content: center; }
  .cl-cap__p { font-size: 18px; }
  .cl-ai__grid { grid-template-columns: minmax(0, 1fr); }
  .cl-rs { padding: 24px 20px 26px; border-radius: 24px; }
  .cl-rs__logo { height: 24px; }
  .cl-rs__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .cl-trust__grid { grid-template-columns: minmax(0, 1fr); }
  .cl-lock { width: min(320px, 100%); order: -1; }
}
@media (max-height: 780px) and (min-width: 900px) {
  .cl-pin .cl-panel { padding: 22px clamp(22px, 3vw, 40px) 14px; }
  .cl-pin .cl-steps { gap: 6px; }
  .cl-pin .cl-step button { padding: 7px 14px 7px 8px; }
  .cl-pin .cl-step__t b { font-size: 14.5px; padding-top: 4px; }
  .cl-pin .cl-step__sub > span { padding-top: 4px; font-size: 13.5px; line-height: 1.45; }
  .cl-pin .cl-step__tags { margin-top: 4px; }
}
/* short desktop windows (≤ 680 px tall, still pinned): a smaller top/bottom reserve and a tighter list, so the open bubble
   and its shadow keep clear air above the panel's bottom edge (round 2 review: 3 px at 1440 × 640) */
@media (max-height: 680px) and (min-width: 900px) {
  .cl-pin .cl-look__sticky { --cl-ph: calc(100svh - var(--hdr) - 52px); padding: calc(var(--hdr) + 10px) 0 42px; }
  .cl-pin .cl-panel { padding-top: 18px; padding-bottom: 12px; }
  .cl-pin .cl-steps { gap: 4px; }
  .cl-pin .cl-step button { padding: 6px 12px 6px 8px; }
  .cl-pin .cl-step__t b { font-size: 14px; line-height: 1.3; }
  .cl-pin .cl-step__sub > span { padding-top: 3px; font-size: 13px; line-height: 1.4; }
  .cl-pin .cl-step__tags { margin: 3px 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .cl-spine b { animation: cl-fall 2.2s var(--cl-io) infinite; }
}
@keyframes cl-fall { from { transform: translate3d(0, 0, 0); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } to { transform: translate3d(0, 60px, 0); opacity: 0; } }
@media (max-width: 599px) {
  /* phones: the same family shot, a little closer in (the iMac takes more of the width, the iPad and iPhone are nudged up
     from true scale so they still read, and the overlaps are deeper) */
  .cl-family { --cl-imac: 58; aspect-ratio: 100 / 48.88; }
  .cl-family__imac  { --cl-fl: 26.85; }
  .cl-family__mbp   { --cl-fl: 3.15; }
  .cl-family__pad   { --cl-fw: 24;  --cl-fl: 72.85; }
  .cl-family__phone { --cl-fw: 9;   --cl-fl: 87.85; }
}
@media (max-width: 520px) {
  .cl-hero__ctas .btn { flex: 1 1 auto; }
}

/* phones: one source card per row, the device beside the text (final review: two by two squeezed each paragraph into ~125 px) */
@media (max-width: 560px) {
  .cl-diagram { grid-template-columns: minmax(0, 1fr); }
  .cl-diagram .cl-src { grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 6px 14px; padding: 14px 16px; }
  .cl-diagram .cl-src__vis { grid-row: 1 / 3; height: 104px; }
  .cl-src__vis .abz--ipad-portrait { width: 64px; }
  .cl-src__vis .abz--iphone { width: 44px; }
}