/* SitScreen and BalanceScreen pages (WEB-142; built by tools/pages/sitscreen.mjs and tools/pages/balancescreen.mjs).
   Loaded after pages.css on those two pages only. Everything else on them is pages.css. */

/* ---------- SitScreen ---------- */
/* hero: one iPad (both SitScreen screens show the same scene, so the iPhone appears once, in "What SitScreen measures") */
.pg-st-sit .pg-d--pad { left: 12%; top: 1%; width: 72%; transform: rotateY(-10deg) rotateX(3deg) rotateZ(-.6deg); }

/* ---------- BalanceScreen (coming soon) ---------- */
/* the "Coming soon" pill: the .pg-pill shape, with a gold dot instead of the blue check (pages.css .pg-soon colours) */
.pg-pill--soon { box-shadow: inset 0 0 0 1px rgba(254, 192, 32, .75), 0 12px 28px -18px rgba(110, 77, 0, .45); }
.pg-pill--soon b { color: #6e4d00; }
.pg-pill__dot { position: relative; flex: none; width: 24px; height: 24px; border-radius: 50%; background: #fff4d6; box-shadow: inset 0 0 0 1px rgba(254, 192, 32, .8); }
.pg-pill__dot::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 1.5px #c79300; animation: pg-pulse 1.8s var(--ease-in-out) infinite; }

/* hero visual: the app tile (the icon part of logo-balancescreen.svg, cropped with object-fit) on base-of-support rings,
   swaying a few tenths of a degree, the way a single-leg stance does */
.pg-bal { position: relative; justify-self: center; display: grid; place-items: center; width: min(460px, 100%); aspect-ratio: 1; }
.pg-bal__ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: inset 0 0 0 1px rgba(0, 128, 178, .2); pointer-events: none; }
.pg-bal__ring--1 { width: 100%; height: 100%; background: radial-gradient(closest-side, rgba(38, 188, 215, .1), rgba(38, 188, 215, 0)); }
.pg-bal__ring--2 { width: 78%; height: 78%; box-shadow: inset 0 0 0 1px rgba(0, 128, 178, .26); }
.pg-bal__ring--3 { width: 56%; height: 56%; box-shadow: inset 0 0 0 1.5px rgba(254, 192, 32, .55); animation: pg-bal-breathe 5s var(--ease-in-out) infinite; }
.pg-bal__tile { position: relative; z-index: 2; width: 52%; aspect-ratio: 1; overflow: hidden; filter: drop-shadow(0 34px 44px rgba(8, 104, 173, .38)); transform-origin: 50% 100%; animation: pg-bal-sway 6s var(--ease-in-out) infinite; }
.pg-bal__tile img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 50%; }
.pg-bal .pg-chip { z-index: 3; }
.pg-bal .pg-chip i { background: var(--yellow); box-shadow: 0 0 0 1.5px #c79300; }
@keyframes pg-bal-sway { 0%, 100% { transform: rotate(-.9deg); } 50% { transform: rotate(.9deg); } }
@keyframes pg-bal-breathe { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 50% { transform: translate(-50%, -50%) scale(1.05); opacity: .6; } }

/* the three tagline cards: See balance. Capture it. Explain it. */
.pg-band--soon .pg-cards { margin-top: clamp(8px, 1vw, 16px); }
.pg-band--soon .pg-card h3 { font-size: clamp(20px, 1.7vw, 24px); letter-spacing: -.025em; }

/* the modules available today: product logos at a readable size, red Learn more at the card foot */
.pg-today .pg-card__logo { height: 40px; margin-bottom: 18px; }
.pg-today .pg-card .more { margin-top: auto; align-self: flex-start; }
.pg-today .pg-card p { margin-bottom: 20px; }
.pg-today .pg-btnrow { justify-content: center; }

@media (max-width: 900px) {
  .pg-bal { width: min(340px, 82%); margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-pill__dot::after, .pg-bal__ring--3, .pg-bal__tile { animation: none !important; }
}