/* Posture Guard home page (loaded after site.css). Everything here is scoped to body.home. */
html:has(body.home) { overflow-x: clip; }
body.home { --display: "Fraunces", Georgia, "Times New Roman", serif; --ink: #14231f; --teal2: #14b8a6; --sand: #efe7da; --red: #dc4c4c; --shadow: 0 30px 80px -20px rgba(20,35,31,.28), 0 10px 30px -10px rgba(20,35,31,.12); overflow-x: clip; }
body.home[dir="rtl"], html[dir="rtl"] body.home { --display: "Noto Naskh Arabic", "IBM Plex Sans Arabic", serif; --body: "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif; }
.home .ic { width: 1em; height: 1em; display: inline-block; vertical-align: -.14em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.home .ic.fill { fill: currentColor; stroke: none; }
.home h1, .home h2, .home h3 { font-family: var(--display); }
.home .pg-k { display: inline-flex; align-items: center; gap: 8px; font: 700 .78rem var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--warm); }
html[dir="rtl"] .home .pg-k { letter-spacing: 0; font-size: .9rem; }
.home .pg-h2 { margin: 12px 0 0; font: 500 clamp(2rem, 4vw, 3.15rem)/1.08 var(--display); letter-spacing: -.02em; max-width: 19em; }
html[dir="rtl"] .home .pg-h2 { line-height: 1.35; letter-spacing: 0; }
.home .pg-sub { margin: 16px 0 0; color: var(--muted); font-size: 1.12rem; max-width: 38em; }
.home .pg-sec { padding: clamp(80px, 11vw, 140px) 0; position: relative; }
.home .pg-center { text-align: center; } .home .pg-center .pg-h2, .home .pg-center .pg-sub { margin-inline: auto; }
.home .btn-lg { padding: 1rem 1.5rem; font-size: 1.05rem; border-radius: 16px; }
.home .btn-primary { background: linear-gradient(180deg, #129085, #0f766e); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 12px 28px -8px rgba(15,118,110,.55); }
.home .btn-primary:hover { background: linear-gradient(180deg, #0f857b, #0c635c); transform: translateY(-2px); }
.home .btn .ic { width: 18px; height: 18px; }

/* ---------- reveal ---------- */
.home .rv { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.home .rv.in { opacity: 1; transform: none; }

/* ---------- HERO ---------- */
.pg-hero { position: relative; overflow-x: clip; padding: clamp(40px, 6vw, 72px) 0 clamp(70px, 9vw, 120px); }
.pg-hero::before { content: ""; position: absolute; inset: -10% -20% 0; z-index: -1; background:
  radial-gradient(38% 50% at 78% 38%, rgba(20,184,166,.18), transparent 70%),
  radial-gradient(30% 40% at 12% 80%, rgba(194,112,61,.14), transparent 70%),
  radial-gradient(circle at 1px 1px, rgba(20,35,31,.07) 1px, transparent 0) 0 0 / 26px 26px; -webkit-mask: linear-gradient(#000 70%, transparent); mask: linear-gradient(#000 70%, transparent); }
.pg-hero-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.pg-cred { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.75); border: 1px solid var(--line); box-shadow: 0 6px 18px -8px rgba(20,35,31,.18); font-size: .9rem; color: var(--muted); }
html[dir="rtl"] .pg-cred { padding: 6px 6px 6px 14px; }
.pg-cred b { color: var(--text); font-weight: 650; }
.pg-mono { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), #0b4f49); color: #fff; font: 700 .72rem var(--body); letter-spacing: .03em; flex: none; }
.pg-hero h1 { margin: 22px 0 0; font: 500 clamp(2.9rem, 6.2vw, 5.2rem)/.98 var(--display); letter-spacing: -.035em; }
html[dir="rtl"] .pg-hero h1 { line-height: 1.25; letter-spacing: 0; font-weight: 600; font-size: clamp(2.5rem, 5.4vw, 4.4rem); }
.pg-hero h1 span { display: block; }
.pg-hero h1 em { font-style: italic; color: var(--accent); }
html[dir="rtl"] .pg-hero h1 em { font-style: normal; }
.pg-lead { margin: 24px 0 0; font-size: clamp(1.08rem, 1.4vw, 1.22rem); color: var(--muted); max-width: 31em; }
.pg-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; align-items: center; }
.pg-cta .btn-primary small { display: block; font: 500 .74rem var(--body); opacity: .85; margin-top: 1px; }
.pg-cta .btn-primary span { text-align: start; line-height: 1.15; }
.pg-trust { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 22px; font-size: .92rem; color: var(--muted); }
.pg-trust span { display: inline-flex; align-items: center; gap: 7px; }
.pg-trust .ic { color: var(--accent); stroke-width: 2.6; }
.pg-hero-in > * { opacity: 0; transform: translateY(16px); animation: pgUp .9s var(--ease) forwards; }
.pg-hero-in > *:nth-child(2) { animation-delay: .08s; } .pg-hero-in > *:nth-child(3) { animation-delay: .16s; } .pg-hero-in > *:nth-child(4) { animation-delay: .24s; } .pg-hero-in > *:nth-child(5) { animation-delay: .32s; }
@keyframes pgUp { to { opacity: 1; transform: none; } }

/* ---------- laptop (hero + story) ---------- */
.pg-stage { position: relative; perspective: 1600px; }
.pg-laptop { position: relative; transform: rotateY(var(--ry, -7deg)) rotateX(var(--rx, 3deg)) translateY(var(--ty, 0)); transform-style: preserve-3d; transition: transform .6s var(--ease); }
.pg-hero .pg-laptop { animation: pgIn 1.2s .15s var(--ease) both; }
@keyframes pgIn { from { opacity: 0; transform: rotateY(-18deg) rotateX(8deg) translateY(40px) scale(.94); } }
.pg-lid { position: relative; padding: 2.1% 2.1% 2.6%; border-radius: 18px 18px 6px 6px; background: linear-gradient(160deg, #2b3734, #121a18); box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.06) inset; }
.pg-lid::before { content: ""; position: absolute; top: .9%; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #0a0f0e; box-shadow: 0 0 0 1px #2c3836; }
.pg-base { position: relative; height: 0; padding-bottom: 3.2%; margin: 0 -7%; border-radius: 2px 2px 18px 18px; background: linear-gradient(180deg, #e7e2da, #b8b0a4 70%, #9d958a); box-shadow: 0 24px 40px -18px rgba(20,35,31,.5); }
.pg-base::before { content: ""; position: absolute; top: 0; left: 50%; width: 16%; height: 38%; transform: translateX(-50%); border-radius: 0 0 10px 10px; background: rgba(0,0,0,.12); }
.pg-screen { position: relative; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; container-type: inline-size; background: linear-gradient(140deg, #bfe3dc 0%, #e9dcc6 55%, #f3c9a4 100%); }
.pg-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 30; background: linear-gradient(115deg, rgba(255,255,255,.18), transparent 38%); }
.pg-wall { position: absolute; inset: 0; background: radial-gradient(60% 70% at 80% 10%, rgba(255,255,255,.45), transparent 60%), radial-gradient(50% 60% at 10% 100%, rgba(15,118,110,.25), transparent 70%); }
.pg-win { position: absolute; left: 7%; top: 8%; width: 62%; height: 72%; border-radius: 1.4cqw; background: #fff; box-shadow: 0 2cqw 5cqw rgba(20,35,31,.18); overflow: hidden; }
.pg-win .tb { height: 9%; display: flex; align-items: center; gap: .9cqw; padding: 0 2.4cqw; background: #f4f2ee; border-bottom: 1px solid #ebe7e0; }
.pg-win .tb i { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: #e2ddd5; }
.pg-win .tb i:first-child { background: #f0857a; } .pg-win .tb i:nth-child(2) { background: #f3c86a; } .pg-win .tb i:nth-child(3) { background: #7ccf8e; }
.pg-win .doc { padding: 4cqw 5cqw; display: grid; gap: 1.5cqw; }
.pg-win .doc b { display: block; height: 1.25cqw; border-radius: 1cqw; background: #e9e5de; }
.pg-win .doc b.h { height: 2.6cqw; width: 58%; background: #1d302c; opacity: .85; margin-bottom: 1cqw; }
.pg-win .doc b.img { height: 9cqw; border-radius: 1cqw; background: linear-gradient(120deg, #cfe9e4, #f2dcc4); }
.pg-side { position: absolute; right: 5%; top: 8%; width: 22%; height: 46%; border-radius: 1.4cqw; background: rgba(255,255,255,.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 1.5cqw 4cqw rgba(20,35,31,.14); padding: 2cqw; display: grid; align-content: start; gap: 1.2cqw; }
.pg-side .ttl { display: flex; align-items: center; gap: .8cqw; font: 700 2.07cqw var(--body); color: var(--ink); }
.pg-side .ttl img { width: 2.4cqw; height: 2.4cqw; border-radius: .5cqw; }
.pg-side .pg-ring { position: relative; width: 62%; margin: .6cqw auto 0; aspect-ratio: 1; }
.pg-side .pg-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pg-side .pg-ring circle { fill: none; stroke-width: 9; } .pg-side .pg-ring .bg { stroke: rgba(15,118,110,.14); } .pg-side .pg-ring .fg { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 289; stroke-dashoffset: var(--off, 60); transition: stroke-dashoffset 1s var(--ease); }
.pg-side .pg-ring span { position: absolute; inset: 0; display: grid; place-items: center; font: 700 3.59cqw var(--body); color: var(--accent); }
.pg-side .row { display: flex; justify-content: space-between; font: 600 1.66cqw var(--body); color: var(--muted); }
.pg-side .row b { color: var(--ink); }
.pg-task { position: absolute; left: 0; right: 0; bottom: 0; height: 7.5%; display: flex; align-items: center; justify-content: center; gap: 1.4cqw; background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid rgba(255,255,255,.6); z-index: 12; }
.pg-task i { width: 3.2cqw; height: 3.2cqw; border-radius: .8cqw; background: rgba(20,35,31,.18); }
.pg-task i.pg { background: url(/assets/logo.png) center / cover; box-shadow: 0 0 0 .3cqw rgba(15,118,110,.25); }
.pg-task .clock { position: absolute; inset-inline-end: 2cqw; font: 600 1.72cqw var(--body); color: var(--ink); opacity: .7; }
.pg-blurL { position: absolute; inset: 0 0 7.5% 0; z-index: 8; opacity: 0; -webkit-backdrop-filter: blur(var(--blur, 0px)); backdrop-filter: blur(var(--blur, 0px)); background: rgba(20,35,31,.08); transition: opacity .6s var(--ease); pointer-events: none; }
.pg-banner { position: absolute; top: 5%; left: 50%; z-index: 14; transform: translate(-50%, -160%); display: inline-flex; align-items: center; gap: 1cqw; padding: 1cqw 2.4cqw; border-radius: 999px; background: var(--red); color: #fff; font: 700 2.35cqw var(--body); white-space: nowrap; box-shadow: 0 1.5cqw 3cqw rgba(220,76,76,.4); transition: transform .55s var(--ease), background .3s; }
.pg-banner .ic { width: 2cqw; height: 2cqw; stroke-width: 2.4; }
.pg-pill { position: absolute; top: 4.5%; inset-inline-end: 3.5%; z-index: 15; display: inline-flex; align-items: center; gap: .9cqw; padding: .8cqw 1.8cqw; border-radius: 999px; background: rgba(255,255,255,.88); font: 700 1.86cqw var(--body); color: var(--ink); box-shadow: 0 1cqw 2.5cqw rgba(20,35,31,.15); transition: opacity .4s; }
.pg-pill i { width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 .5cqw rgba(34,197,94,.2); transition: background .3s, box-shadow .3s; }
.pg-animal { position: absolute; left: 50%; bottom: 7.5%; z-index: 13; width: 34%; transform: translate(-50%, 30%); opacity: 0; transition: opacity .7s var(--ease), transform .9s var(--ease); pointer-events: none; }
.pg-animal video, .pg-animal img { width: 100%; height: auto; display: block; filter: drop-shadow(0 1.2cqw 1.2cqw rgba(0,0,0,.25)); }
/* hero loop states */
.pg-screen[data-s="slouch"] .pg-blurL, .pg-screen[data-s="animal"] .pg-blurL { opacity: 1; }
.pg-screen[data-s="slouch"] .pg-banner, .pg-screen[data-s="animal"] .pg-banner { transform: translate(-50%, 0); }
.pg-screen[data-s="slouch"] .pg-pill i, .pg-screen[data-s="animal"] .pg-pill i { background: var(--red); box-shadow: 0 0 0 .5cqw rgba(220,76,76,.22); }
.pg-screen[data-s="animal"] .pg-animal { opacity: 1; transform: translate(-50%, 0); }
.pg-screen[data-s="fixed"] .pg-banner { background: #16a34a; transform: translate(-50%, 0); }

/* floating cards around the hero laptop */
.pg-float { position: absolute; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 18px 40px -14px rgba(20,35,31,.3); font-size: .9rem; white-space: nowrap; transform: translate3d(calc(var(--px, 0) * var(--depth, 1) * 1px), calc(var(--py, 0) * var(--depth, 1) * 1px), 0); animation: pgFloat 7s ease-in-out infinite; animation-delay: var(--fd, 0s); }
.pg-float .tx { display: grid; line-height: 1.25; } .pg-float .tx b { font-weight: 700; color: var(--ink); } .pg-float .tx small { color: var(--muted); font-size: .8rem; }
.pg-float .bub { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; color: #fff; }
.pg-float .bub .ic { width: 20px; height: 20px; }
.pg-f1 { top: -6%; inset-inline-start: -8%; --depth: 1.6; }
.pg-f2 { top: 10%; inset-inline-end: -6%; --depth: 2.2; --fd: -2s; }
.pg-f3 { bottom: 4%; inset-inline-start: -10%; --depth: 1.2; --fd: -4s; }
.pg-f4 { bottom: -7%; inset-inline-end: 4%; --depth: 1.9; --fd: -1s; }
.pg-mini-ring { width: 44px; height: 44px; position: relative; flex: none; }
.pg-mini-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pg-mini-ring circle { fill: none; stroke-width: 10; } .pg-mini-ring .bg { stroke: rgba(15,118,110,.14); } .pg-mini-ring .fg { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 289; stroke-dashoffset: 289; transition: stroke-dashoffset 1.6s var(--ease); }
.pg-mini-ring span { position: absolute; inset: 0; display: grid; place-items: center; font: 800 .74rem var(--body); color: var(--accent); }
@keyframes pgFloat { 50% { translate: 0 -10px; } }

/* ---------- proof strip ---------- */
.pg-proof { margin-top: clamp(-40px, -4vw, -20px); position: relative; z-index: 3; }
.pg-proof-in { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 20px 50px -30px rgba(20,35,31,.3); }
.pg-proof-in > div { display: flex; gap: 14px; align-items: center; padding: 22px 24px; }
.pg-proof-in > div + div { border-inline-start: 1px solid var(--line); }
.pg-proof .bub { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.pg-proof .bub .ic { width: 22px; height: 22px; }
.pg-proof b { display: block; font-weight: 700; } .pg-proof small { color: var(--muted); font-size: .86rem; line-height: 1.35; display: block; }

/* ---------- try it: slouch simulator ---------- */
.pg-try { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.pg-sim { position: relative; border-radius: 28px; background: linear-gradient(160deg, #fff, #f7f2ea); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 26px 26px 22px; direction: ltr; }
.pg-sim svg.pg-simsvg { width: 100%; height: auto; display: block; touch-action: pan-y; cursor: grab; }
.pg-sim svg.pg-simsvg:active { cursor: grabbing; }
.pg-sim .body { stroke: #1d302c; stroke-width: 20; stroke-linecap: round; stroke-linejoin: round; fill: none; transition: stroke .3s; }
.pg-sim .head { fill: #1d302c; transition: fill .3s; }
.pg-sim .lm { fill: #fff; stroke: var(--accent); stroke-width: 3; transition: stroke .3s; }
.pg-sim.bad .lm { stroke: var(--red); }
.pg-sim .gaze { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 6; transition: stroke .3s; }
.pg-sim.bad .gaze { stroke: var(--red); }
.pg-sim .furn { fill: #d9cfc1; } .pg-sim .furn2 { fill: #c4b8a7; }
.pg-sim .mon { fill: #22302d; } .pg-sim .monscr { fill: #f4efe7; }
.pg-sim .ml { fill: #cfc6b8; }
.pg-sim .mban { opacity: 0; transition: opacity .3s; }
.pg-sim.bad .mban { opacity: 1; }
.pg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; min-height: 40px; }
.pg-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; font: 650 .9rem var(--body); background: rgba(220,76,76,.1); color: #b42f2f; border: 1px solid rgba(220,76,76,.25); animation: pgPop .35s var(--ease); }
.pg-chip.ok { background: rgba(22,163,74,.1); color: #15803d; border-color: rgba(22,163,74,.28); }
.pg-chip .ic { stroke-width: 2.4; }
@keyframes pgPop { from { opacity: 0; transform: scale(.85); } }
.pg-slider { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; margin-top: 16px; font: 650 .85rem var(--body); color: var(--muted); }
.pg-slider input { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 99px; background: linear-gradient(90deg, #16a34a, #eab308 50%, var(--red)); outline: none; }
.pg-slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); box-shadow: 0 4px 12px rgba(0,0,0,.25); cursor: grab; }
.pg-slider input::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); cursor: grab; }
.pg-hint { position: absolute; top: 18px; inset-inline-end: 22px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: #fff; font: 650 .8rem var(--body); animation: pgNudge 2.4s ease-in-out infinite; }
html[dir="rtl"] .pg-hint { inset-inline-end: auto; right: 22px; }
.pg-sim.touched .pg-hint { opacity: 0; transition: opacity .4s; animation: none; }
@keyframes pgNudge { 50% { transform: translateX(6px); } }
.pg-steps { display: grid; gap: 14px; margin-top: 26px; }
.pg-steps div { display: flex; gap: 14px; align-items: flex-start; }
.pg-steps i { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font: 700 .85rem var(--body); font-style: normal; }
.pg-steps p { margin: 3px 0 0; color: var(--muted); } .pg-steps b { color: var(--text); }

/* ---------- STORY ---------- */
.pg-story { position: relative; height: 820vh; --c1: #f6f3ee; --c2: #e6f3f0; color: var(--text); }
.pg-pin { position: sticky; top: 66px; height: calc(100vh - 66px); height: calc(100svh - 66px); overflow: hidden; }
.pg-bg { position: absolute; inset: 0; background: var(--c1); transition: background-color .9s var(--ease); }
.pg-blobs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pg-blobs i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .6; transition: background 1s var(--ease), transform 1.4s var(--ease); }
.pg-blobs .b1 { width: 46vw; height: 46vw; top: -12vw; inset-inline-end: -8vw; background: var(--c2); transform: translate(calc(var(--lp, .5) * -6vw), calc(var(--lp, .5) * 5vw)); }
.pg-blobs .b2 { width: 36vw; height: 36vw; bottom: -14vw; inset-inline-start: -6vw; background: var(--c3, #f2e3cf); transform: translate(calc(var(--lp, .5) * 4vw), calc(var(--lp, .5) * -3vw)); }
.pg-wipe { position: absolute; inset: 0; background: var(--c1); clip-path: circle(0 at var(--wx, 70%) var(--wy, 50%)); pointer-events: none; }
.pg-wipe.go { transition: clip-path 1s cubic-bezier(.7,0,.2,1); clip-path: circle(150% at var(--wx, 70%) var(--wy, 50%)); }
.pg-ghost { position: absolute; bottom: -6vh; inset-inline-start: -1vw; font: 600 clamp(14rem, 34vw, 30rem)/1 var(--display); color: var(--ink); opacity: .045; pointer-events: none; transition: opacity .4s; }
.pg-story-in { position: relative; height: 100%; display: grid; grid-template-columns: 54px .9fr 1.25fr; gap: clamp(20px, 3.5vw, 56px); align-items: center; }
.pg-rail { display: grid; gap: 10px; justify-items: center; position: relative; }
.pg-rail::before { content: ""; position: absolute; top: 14px; bottom: 14px; left: 50%; width: 2px; transform: translateX(-50%); background: rgba(20,35,31,.12); }
.pg-rail .fill { position: absolute; top: 14px; left: 50%; width: 2px; transform: translateX(-50%); background: var(--acc, var(--accent)); height: var(--rf, 0%); transition: height .5s var(--ease); }
.pg-rail button { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(20,35,31,.18); background: var(--c1); color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: all .5s var(--ease); padding: 0; }
.pg-rail button .ic { width: 14px; height: 14px; }
.pg-rail button.on { background: var(--acc, var(--accent)); border-color: var(--acc, var(--accent)); color: #fff; transform: scale(1.2); box-shadow: 0 6px 16px -4px var(--acc, var(--accent)); }
.pg-rail button.done { border-color: var(--acc, var(--accent)); color: var(--acc, var(--accent)); }
.pg-texts { position: relative; height: min(420px, 56vh); }
.pg-chap { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; pointer-events: none; }
.pg-chap > * { opacity: 0; transform: translateY(34px); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.pg-chap.past > * { transform: translateY(-34px); }
.pg-chap.on { pointer-events: auto; }
.pg-chap.on > * { opacity: 1; transform: none; }
.pg-chap.on > :nth-child(2) { transition-delay: .07s; } .pg-chap.on > :nth-child(3) { transition-delay: .14s; } .pg-chap.on > :nth-child(4) { transition-delay: .21s; }
.pg-chap .pg-k { color: var(--acc, var(--warm)); }
.pg-chap .pg-k .ic { width: 16px; height: 16px; }
.pg-chap h2 { margin: 14px 0 16px; font: 500 clamp(2rem, 3.7vw, 3.3rem)/1.06 var(--display); letter-spacing: -.025em; }
html[dir="rtl"] .pg-chap h2 { line-height: 1.35; letter-spacing: 0; }
.pg-chap p { margin: 0; color: var(--muted); font-size: 1.12rem; max-width: 29em; }
.pg-chap .pg-note { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.7); border: 1px dashed var(--acc, var(--accent)); color: var(--acc, var(--accent)); font: 650 .9rem var(--body); }
.pg-story .pg-stage { align-self: center; }
.pg-story .pg-laptop { --ry: calc(-6deg + var(--mx, 0deg)); --rx: calc(3deg + var(--my, 0deg)); }
.pg-story .pg-laptop.bump { animation: pgBump .8s var(--ease); }
@keyframes pgBump { 40% { scale: .965; } }
/* chapter themes */
.pg-story[data-ch="1"] { --c1: #f4ece4; --c2: #f7c9bf; --c3: #f1ddc4; --acc: #c2553f; }
.pg-story[data-ch="2"] { --c1: #f6efe3; --c2: #f4d38e; --c3: #f0e2c8; --acc: #b7791f; }
.pg-story[data-ch="3"] { --c1: #eef3ea; --c2: #bfdcb3; --c3: #e7e0cb; --acc: #3f7d3a; }
.pg-story[data-ch="4"] { --c1: #e8f0f5; --c2: #b7d3ea; --c3: #dfe7ee; --acc: #2f6c9e; }
.pg-story[data-ch="5"] { --c1: #e6f4ef; --c2: #a8e0cd; --c3: #d9efe7; --acc: #0f8a6c; }
.pg-story[data-ch="6"] { --c1: #f7f0e1; --c2: #f2cf86; --c3: #f4e6c8; --acc: #a8680f; }
.pg-story[data-ch="7"] { --c1: #efecf6; --c2: #cfc5ec; --c3: #e6e1f2; --acc: #5b4bb0; }
.pg-story[data-ch="8"] { --c1: #e7efee; --c2: #a9d3cd; --c3: #dbe7e4; --acc: #0f766e; }
.pg-story .pg-screen .pg-blurL { --blur: 0px; }
.pg-story .ly { position: absolute; inset: 0 0 7.5% 0; z-index: 16; opacity: 0; pointer-events: none; transition: opacity .55s var(--ease); }
.pg-story .pg-screen[data-ch="1"] .pg-blurL, .pg-story .pg-screen[data-ch="2"] .pg-blurL { opacity: 1; }
.pg-story .pg-screen[data-ch="1"] .pg-banner, .pg-story .pg-screen[data-ch="2"] .pg-banner { transform: translate(-50%, 0); }
.pg-story .pg-screen[data-ch="1"] .pg-pill i, .pg-story .pg-screen[data-ch="2"] .pg-pill i { background: var(--red); }
/* ch2: camera preview with landmarks */
.cam { position: absolute; top: 15%; inset-inline-end: 3.5%; width: 30%; border-radius: 1.4cqw; overflow: hidden; background: #1b2523; box-shadow: 0 1.5cqw 4cqw rgba(0,0,0,.3); }
.cam svg { width: 100%; display: block; }
.cam .meters { padding: 1.4cqw 1.8cqw 1.8cqw; display: grid; gap: .9cqw; background: #141c1a; }
.cam .m { display: grid; grid-template-columns: 1fr 42%; gap: 1cqw; align-items: center; font: 600 1.59cqw var(--body); color: #b9c7c3; }
.cam .m i { height: .8cqw; border-radius: 1cqw; background: rgba(255,255,255,.1); overflow: hidden; }
.cam .m i::after { content: ""; display: block; height: 100%; width: var(--w, 20%); background: #34d399; transition: width .6s var(--ease), background .3s; }
.cam .m.hot { color: #fff; } .cam .m.hot i::after { background: var(--red); }
.cam .skl { stroke: #34d399; stroke-width: 2.4; fill: none; transition: stroke .3s; } .cam .dot { fill: #34d399; transition: fill .3s; }
.cam.bad .skl { stroke: #f87171; } .cam.bad .dot { fill: #f87171; }
.pg-screen[data-ch="2"] .ly-cam { opacity: 1; }
/* ch3 animals */
.ly-animal { z-index: 13; }
.ly-animal .an { position: absolute; left: 50%; bottom: 0; width: 38%; transform: translate(-50%, 20%); opacity: 0; transition: opacity .7s var(--ease), transform .9s var(--ease); }
.ly-animal .an video, .ly-animal .an img { width: 100%; height: auto; display: block; filter: drop-shadow(0 1.2cqw 1.4cqw rgba(0,0,0,.25)); }
.pg-screen[data-ch="3"] .ly-animal { opacity: 1; } .pg-screen[data-ch="3"] .ly-animal .an.show { opacity: 1; transform: translate(-50%, 0); }
.ly-animal .tag { position: absolute; top: 6%; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 1cqw; padding: 1cqw 2.2cqw; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--ink); font: 700 2.07cqw var(--body); box-shadow: 0 1cqw 3cqw rgba(0,0,0,.14); white-space: nowrap; }
.ly-animal .tag .ic { width: 1.9cqw; height: 1.9cqw; color: #3f7d3a; }
/* ch4 break: the live desktop stays visible, like the real app */
.ly-break { z-index: 17; display: grid; justify-items: center; align-content: start; padding-top: 6%; text-align: center; color: #fff; background: rgba(20,35,31,.05); }
.ly-break small { font: 700 2.21cqw var(--body); color: #0f5a52; background: rgba(255,255,255,.85); padding: .6cqw 1.8cqw; border-radius: 999px; }
.ly-break strong { margin-top: 1.2cqw; font: 700 7.13cqw/1 var(--body); font-variant-numeric: tabular-nums; padding: .4cqw 2.6cqw; border-radius: 1.6cqw; background: rgba(15,23,42,.6); }
.ly-break .pg-warns { display: flex; gap: 1cqw; margin-top: 1.6cqw; }
.ly-break .pg-warns span { padding: .5cqw 1.5cqw; border-radius: 999px; background: rgba(255,255,255,.88); color: #2f6c9e; font: 700 1.72cqw var(--body); }
.ly-break .pg-warns span.now { background: #2f6c9e; color: #fff; }
.ly-break .cat { position: absolute; bottom: 0; left: 50%; width: 18%; transform: translateX(-50%); }
.ly-break .cat video, .ly-break .cat img { width: 100%; height: auto; display: block; filter: drop-shadow(0 1cqw 1.2cqw rgba(0,0,0,.28)); }
.ly-break .skip { position: absolute; bottom: 4%; inset-inline-end: 4%; padding: .7cqw 1.8cqw; border-radius: 999px; background: rgba(15,23,42,.7); font: 700 1.66cqw var(--body); }
.pg-screen[data-ch="4"] .ly-break { opacity: 1; }
/* ch5 reminders: a tidy stack that hops corners; cards never overlap */
.ly-toasts { z-index: 18; }
.ly-toasts .stack { position: absolute; width: 38%; display: flex; flex-direction: column; gap: 1.4cqw; transition: opacity .35s; }
.ly-toasts .stack.tl { top: 4%; left: 3%; } .ly-toasts .stack.tr { top: 4%; right: 3%; } .ly-toasts .stack.bl { bottom: 4%; left: 3%; } .ly-toasts .stack.br { bottom: 4%; right: 3%; } .ly-toasts .stack.tc { top: 4%; left: 31%; } .ly-toasts .stack.bc { bottom: 4%; left: 31%; }
.toast { display: flex; gap: 1.4cqw; align-items: center; padding: 1.4cqw 1.8cqw; border-radius: 1.4cqw; background: #1e293b; color: #f1f5f9; border-inline-start: .6cqw solid var(--c); box-shadow: 0 1.5cqw 3cqw rgba(0,0,0,.28); font: 500 1.79cqw/1.3 var(--body); opacity: 0; transform: translateY(-1.5cqw) scale(.96); transition: opacity .45s var(--ease), transform .45s var(--ease); transition-delay: var(--td, 0s); }
.toast.in { opacity: 1; transform: none; }
.toast .ti { width: 3.4cqw; height: 3.4cqw; border-radius: 1cqw; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 22%, transparent); color: var(--c); flex: none; }
.toast .ti .ic { width: 2cqw; height: 2cqw; }
.toast b { display: block; color: var(--c); font-size: 1.93cqw; }
.pg-screen[data-ch="5"] .ly-toasts { opacity: 1; }
/* ch6 progress */
.ly-score { z-index: 18; display: grid; place-items: center; background: rgba(247,240,225,.94); }
.dash { width: 84%; display: grid; grid-template-columns: .8fr 1.2fr; gap: 3cqw; align-items: center; }
.dash .big { position: relative; aspect-ratio: 1; }
.dash .big svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dash .big circle { fill: none; stroke-width: 10; } .dash .big .bg { stroke: rgba(168,104,15,.14); } .dash .big .fg { stroke: #a8680f; stroke-linecap: round; stroke-dasharray: 289; stroke-dashoffset: 289; transition: stroke-dashoffset 1.5s var(--ease); }
.dash .big div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.dash .big strong { font: 700 6.48cqw/1 var(--body); color: #a8680f; } .dash .big small { font: 600 1.93cqw var(--body); color: var(--muted); }
.dash .wk small { font: 700 1.93cqw var(--body); color: var(--muted); }
.dash .bars { display: flex; align-items: flex-end; gap: 1.4cqw; height: 16cqw; margin-top: 1.4cqw; }
.dash .pg-bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: .6cqw; font: 600 1.52cqw var(--body); color: var(--muted); position: relative; }
.dash .pg-bar i { width: 100%; height: 0; border-radius: .8cqw .8cqw .3cqw .3cqw; background: #e3c99a; transition: height .8s var(--ease); transition-delay: calc(var(--i) * .08s); }
.dash .pg-bar.ok i { background: #a8680f; } .dash .pg-bar.today i { background: linear-gradient(#f0a33a, #a8680f); }
.dash .pg-bar:hover::before { content: attr(data-p); position: absolute; top: -2.6cqw; background: var(--ink); color: #fff; padding: .2cqw .8cqw; border-radius: .6cqw; font-size: 1.52cqw; }
.dash .pg-streak { margin-top: 2cqw; display: inline-flex; align-items: center; gap: 1cqw; padding: 1cqw 2cqw; border-radius: 999px; background: #fff; font: 700 2.21cqw var(--body); color: var(--ink); box-shadow: 0 1cqw 2.5cqw rgba(168,104,15,.18); }
.dash .pg-streak .ic { width: 2.2cqw; height: 2.2cqw; color: #ea580c; }
.dash .pg-streak .ic.pop { animation: pgFlame .6s var(--ease); }
@keyframes pgFlame { 40% { transform: scale(1.5) rotate(-8deg); } }
.pg-screen[data-ch="6"] .ly-score { opacity: 1; }
.pg-screen.go6 .dash .pg-bar i { height: var(--h); }
/* ch7 made for you */
.ly-tune { z-index: 18; display: grid; place-items: center; background: rgba(239,236,246,.95); pointer-events: none; }
.pg-screen[data-ch="7"] .ly-tune { opacity: 1; pointer-events: auto; }
.tune { width: 86%; display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 2.4cqw; align-items: stretch; }
.pg-pose { position: relative; border: 0; border-radius: 1.8cqw; background: #fff; box-shadow: 0 1.5cqw 3.5cqw rgba(91,75,176,.14); padding: 2.4cqw 1.6cqw 2cqw; display: grid; justify-items: center; gap: 1.2cqw; cursor: pointer; font: 700 1.79cqw var(--body); color: var(--muted); transition: transform .25s var(--ease), box-shadow .25s; }
.pg-pose:hover { transform: translateY(-.4cqw); }
.pg-pose svg { width: 70%; height: auto; }
.pg-pose.good svg { color: #16a34a; } .pg-pose.bad svg { color: #dc4c4c; }
.pg-pose.saved { box-shadow: 0 0 0 .35cqw currentColor inset, 0 1.5cqw 3.5cqw rgba(91,75,176,.14); }
.pg-pose.good.saved { color: #15803d; } .pg-pose.bad.saved { color: #b42f2f; }
.pg-pose .st { position: absolute; top: 1cqw; inset-inline-end: 1cqw; width: 3cqw; height: 3cqw; border-radius: 50%; display: grid; place-items: center; background: currentColor; transform: scale(0); transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.pg-pose .st .ic { width: 1.8cqw; height: 1.8cqw; color: #fff; stroke-width: 3; }
.pg-pose.saved .st { transform: scale(1); }
.sl { border-radius: 1.8cqw; background: #fff; box-shadow: 0 1.5cqw 3.5cqw rgba(91,75,176,.14); padding: 2.2cqw 2.4cqw; display: grid; gap: 2cqw; align-content: center; }
.sl label { display: grid; gap: .8cqw; font: 700 1.72cqw var(--body); color: var(--ink); }
.sl label span { display: flex; justify-content: space-between; } .sl output { color: #5b4bb0; }
.sl input { -webkit-appearance: none; appearance: none; width: 100%; height: .9cqw; min-height: 5px; border-radius: 99px; background: linear-gradient(90deg, #5b4bb0 var(--v, 50%), rgba(91,75,176,.15) var(--v, 50%)); outline: none; cursor: pointer; }
html[dir="rtl"] .sl input { background: linear-gradient(-90deg, #5b4bb0 var(--v, 50%), rgba(91,75,176,.15) var(--v, 50%)); }
.sl input::-webkit-slider-thumb { -webkit-appearance: none; width: 2.6cqw; height: 2.6cqw; min-width: 14px; min-height: 14px; border-radius: 50%; background: #fff; border: .4cqw solid #5b4bb0; box-shadow: 0 .4cqw 1cqw rgba(0,0,0,.2); }
.sl input::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid #5b4bb0; }
/* ch8 privacy */
.ly-priv { z-index: 18; display: grid; place-items: center; background: rgba(231,239,238,.96); }
.pg-screen[data-ch="8"] .ly-priv { opacity: 1; }
.priv { display: grid; justify-items: center; gap: 2.4cqw; text-align: center; }
.pg-flow { display: flex; align-items: center; gap: 1.4cqw; }
.pg-flow .nd { display: grid; justify-items: center; gap: .8cqw; font: 700 1.79cqw var(--body); color: var(--ink); }
.pg-flow .nd span { width: 8cqw; height: 8cqw; border-radius: 2cqw; display: grid; place-items: center; background: #fff; box-shadow: 0 1.2cqw 3cqw rgba(15,118,110,.18); color: var(--accent); }
.pg-flow .nd span .ic { width: 4cqw; height: 4cqw; }
.pg-flow .nd.off { opacity: .45; } .pg-flow .nd.off span { color: var(--muted); }
.pg-flow .w { position: relative; width: 9cqw; height: .5cqw; border-radius: 1cqw; background: rgba(15,118,110,.15); overflow: hidden; }
.pg-flow .w::before { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease) .2s; }
html[dir="rtl"] .pg-flow .w::before { transform-origin: right; }
.pg-flow .w.cut { overflow: visible; background: rgba(220,76,76,.15); } .pg-flow .w.cut::before { background: var(--red); }
.pg-flow .w.cut b { position: absolute; left: 50%; top: 50%; width: 4cqw; height: 4cqw; margin: -2cqw 0 0 -2cqw; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff; transform: scale(0) rotate(-90deg); transition: transform .5s cubic-bezier(.3,1.6,.5,1) 1.2s; }
.pg-flow .w.cut b .ic { width: 2.2cqw; height: 2.2cqw; stroke-width: 3; }
.pg-screen.go8 .pg-flow .w::before { transform: scaleX(1); } .pg-screen.go8 .pg-flow .w.cut b { transform: none; }
.priv .lk { width: 9cqw; height: 9cqw; border-radius: 2.6cqw; display: grid; place-items: center; background: var(--accent); color: #fff; box-shadow: 0 1.5cqw 4cqw rgba(15,118,110,.4); }
.priv .lk svg { width: 4.6cqw; height: 4.6cqw; }
.priv .lk .sh { transform: translateY(-2.2px); transition: transform .5s cubic-bezier(.3,1.6,.5,1) 1.6s; }
.pg-screen.go8 .priv .lk .sh { transform: none; }
.priv strong { font: 600 3.59cqw var(--display); color: var(--ink); }
.priv .tags { display: flex; gap: 1cqw; }
.priv .tags span { padding: .7cqw 1.7cqw; border-radius: 999px; background: #fff; color: var(--accent); font: 700 1.72cqw var(--body); opacity: 0; transform: translateY(1cqw); transition: all .45s var(--ease); }
.pg-screen.go8 .priv .tags span { opacity: 1; transform: none; }
.pg-screen.go8 .priv .tags span:nth-child(1) { transition-delay: 1.9s; } .pg-screen.go8 .priv .tags span:nth-child(2) { transition-delay: 2.1s; } .pg-screen.go8 .priv .tags span:nth-child(3) { transition-delay: 2.3s; }

/* ---------- features wall ---------- */
.pg-groups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 48px; }
.pg-group { border-radius: 24px; background: #fff; border: 1px solid var(--line); padding: 24px 22px; box-shadow: 0 20px 40px -30px rgba(20,35,31,.3); }
.pg-group h3 { margin: 0 0 14px; display: flex; align-items: center; gap: 10px; font: 600 1.2rem var(--display); }
.pg-group h3 .bub { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: var(--gc); }
.pg-group h3 .bub .ic { width: 18px; height: 18px; }
.pg-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pg-group li { display: flex; gap: 10px; align-items: center; padding: 8px 8px; border-radius: 12px; font-size: .97rem; transition: background .25s; }
.pg-group li:hover { background: color-mix(in srgb, var(--gc) 9%, transparent); }
.pg-group li .ic { width: 18px; height: 18px; color: var(--gc); }
.pg-count { color: var(--accent); font-variant-numeric: tabular-nums; }

/* ---------- physio note ---------- */
.pg-physio { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.pg-quote { position: relative; border-radius: 30px; padding: clamp(30px, 4vw, 52px); background: linear-gradient(150deg, #133a35, #0f5a52); color: #eaf6f3; box-shadow: var(--shadow); overflow: hidden; }
.pg-quote::before { content: "\201C"; position: absolute; top: -.18em; inset-inline-start: .12em; font: 400 11rem/1 Georgia, serif; color: rgba(255,255,255,.08); }
.pg-quote p { position: relative; margin: 0; font: 400 clamp(1.25rem, 2vw, 1.6rem)/1.5 var(--display); }
.pg-quote .who { margin-top: 26px; display: flex; align-items: center; gap: 14px; }
.pg-quote .who .pg-mono { width: 48px; height: 48px; font-size: 1rem; background: linear-gradient(135deg, #f3c48f, #c2703d); color: #1d302c; }
.pg-quote .who b { display: block; font-size: 1.05rem; } .pg-quote .who small { color: #a7cfc8; }
.pg-prin { display: grid; gap: 14px; }
.pg-prin div { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.pg-prin .bub { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.pg-prin .bub .ic { width: 21px; height: 21px; }
.pg-prin b { display: block; font-size: 1.04rem; } .pg-prin p { margin: 3px 0 0; color: var(--muted); font-size: .96rem; }

/* ---------- compare ---------- */
.pg-cmp { margin-top: 44px; border-radius: 26px; background: #fff; border: 1px solid var(--line); overflow: hidden; box-shadow: 0 30px 60px -40px rgba(20,35,31,.35); }
.pg-cmp table { width: 100%; border-collapse: collapse; }
.pg-cmp th, .pg-cmp td { padding: 16px 20px; text-align: center; border-bottom: 1px solid var(--line); }
.pg-cmp th:first-child, .pg-cmp td:first-child { text-align: start; }
.pg-cmp thead th { font: 700 .95rem var(--body); color: var(--muted); background: #faf8f4; }
.pg-cmp thead th.us { color: #fff; background: var(--accent); font-size: 1rem; }
.pg-cmp td.us { background: rgba(15,118,110,.06); }
.pg-cmp tr:last-child td { border-bottom: 0; }
.pg-cmp .y, .pg-cmp .n, .pg-cmp .p { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }
.pg-cmp .y { background: var(--accent); color: #fff; } .pg-cmp .n { background: rgba(20,35,31,.07); color: #9aa7a3; } .pg-cmp .p { background: rgba(183,121,31,.14); color: var(--gold); }
.pg-cmp .ic { width: 15px; height: 15px; stroke-width: 3; }

/* ---------- benefits ---------- */
.pg-bens { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; }
.pg-ben { border-radius: 24px; padding: 28px 24px; background: #fff; border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s; }
.pg-ben:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(20,35,31,.35); }
.pg-ben .bub { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; color: #fff; background: var(--bc); box-shadow: 0 10px 22px -8px var(--bc); }
.pg-ben .bub .ic { width: 23px; height: 23px; }
.pg-ben h3 { margin: 18px 0 8px; font: 600 1.3rem var(--display); }
.pg-ben p { margin: 0; color: var(--muted); font-size: .97rem; }

/* ---------- pricing ---------- */
.pg-free { margin: 34px auto 0; max-width: 760px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 14px 20px; border-radius: 16px; background: rgba(255,255,255,.7); border: 1px dashed rgba(15,118,110,.4); font-size: .98rem; text-align: center; }
.pg-free b { color: var(--accent); }
.pg-plans { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 20px; margin-top: 26px; align-items: stretch; }
.pg-plan { position: relative; display: flex; flex-direction: column; border-radius: 26px; padding: 30px 28px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -45px rgba(20,35,31,.4); }
.pg-plan h3 { margin: 0; font: 700 1.1rem var(--body); }
.pg-plan .pr { margin: 16px 0 2px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pg-plan .pr strong { font: 600 3rem/1 var(--display); letter-spacing: -.02em; }
.pg-plan .pr small { color: var(--muted); font-size: .95rem; }
.pg-plan .eq { color: var(--accent); font: 650 .9rem var(--body); min-height: 1.4em; }
.pg-plan p { color: var(--muted); margin: 12px 0 18px; font-size: .97rem; flex: 1; }
.pg-plan .btn { width: 100%; }
.pg-plan.best { background: linear-gradient(170deg, #133a35, #0f4f48); color: #eef8f6; border-color: transparent; transform: translateY(-10px); box-shadow: 0 40px 70px -30px rgba(15,79,72,.65); }
.pg-plan.best p, .pg-plan.best .pr small { color: #b9dcd5; } .pg-plan.best .eq { color: #f3c48f; }
.pg-plan.best .btn-primary { background: linear-gradient(180deg, #f6cf9b, #e9a95e); color: #1d302c; box-shadow: 0 12px 28px -10px rgba(233,169,94,.7); }
.pg-plan .ribbon { position: absolute; top: -13px; inset-inline-start: 50%; transform: translateX(-50%); padding: 5px 14px; border-radius: 999px; background: linear-gradient(90deg, #f6cf9b, #e9a95e); color: #1d302c; font: 800 .76rem var(--body); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 8px 18px -6px rgba(233,169,94,.7); }
html[dir="rtl"] .pg-plan .ribbon { transform: translateX(50%); letter-spacing: 0; }
.pg-incl { margin: 36px auto 0; max-width: 900px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 32px; }
.pg-incl div { display: flex; gap: 10px; align-items: center; font-size: .98rem; }
.pg-incl .ic { color: var(--accent); stroke-width: 2.6; width: 18px; height: 18px; }
.pg-incl-t { margin-top: 44px; text-align: center; font: 700 .8rem var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pg-teams { margin-top: 30px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 26px 30px; border-radius: 24px; background: #fff; border: 1px solid var(--line); }
.pg-teams .l { display: flex; gap: 16px; align-items: center; }
.pg-teams .bub { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; } .pg-teams .bub .ic { width: 24px; height: 24px; }
.pg-teams h3 { margin: 0; font: 600 1.3rem var(--display); } .pg-teams p { margin: 3px 0 0; color: var(--muted); }
.pg-geo { margin-top: 16px; text-align: center; color: var(--muted); font-size: .9rem; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }

/* ---------- FAQ ---------- */
.pg-faq { margin: 40px auto 0; max-width: 820px; display: grid; gap: 12px; }
.pg-faq details { border-radius: 18px; background: #fff; border: 1px solid var(--line); padding: 0 22px; transition: box-shadow .3s; }
.pg-faq details[open] { box-shadow: 0 20px 40px -30px rgba(20,35,31,.35); }
.pg-faq summary { list-style: none; cursor: pointer; padding: 20px 0; display: flex; justify-content: space-between; gap: 16px; align-items: center; font: 650 1.05rem var(--body); }
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq summary i { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); transition: transform .35s var(--ease); }
.pg-faq summary i .ic { width: 15px; height: 15px; stroke-width: 2.6; }
.pg-faq details[open] summary i { transform: rotate(45deg); }
.pg-faq details p { margin: 0 0 20px; color: var(--muted); }

/* ---------- final CTA ---------- */
.pg-final { position: relative; overflow: hidden; border-radius: 34px; padding: clamp(40px, 6vw, 80px); background: radial-gradient(60% 90% at 85% 100%, rgba(20,184,166,.35), transparent 60%), linear-gradient(150deg, #133a35, #0c4a44); color: #eef8f6; box-shadow: var(--shadow); }
.pg-final h2 { margin: 0; max-width: 13em; font: 500 clamp(2.2rem, 4.6vw, 3.8rem)/1.05 var(--display); letter-spacing: -.025em; }
html[dir="rtl"] .pg-final h2 { line-height: 1.35; letter-spacing: 0; }
.pg-final p { margin: 18px 0 0; max-width: 30em; color: #b9dcd5; font-size: 1.12rem; }
.pg-final .pg-cta .btn-ghost { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; }
.pg-final .peek { position: absolute; bottom: -2%; inset-inline-end: 4%; width: min(30%, 330px); pointer-events: none; }
.pg-final .peek video, .pg-final .peek img { width: 100%; height: auto; display: block; filter: drop-shadow(0 20px 30px rgba(0,0,0,.35)); }
.pg-ideas { margin-top: 26px; display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; padding: 22px 28px; border-radius: 22px; background: rgba(255,255,255,.7); border: 1px solid var(--line); }
.pg-ideas b { font: 600 1.2rem var(--display); } .pg-ideas p { margin: 2px 0 0; color: var(--muted); }

/* ---------- sticky mobile download bar ---------- */
.pg-dock { position: fixed; z-index: 70; left: 12px; right: 12px; bottom: 12px; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 18px; background: rgba(20,35,31,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; box-shadow: 0 20px 40px -10px rgba(0,0,0,.4); transform: translateY(140%); transition: transform .5s var(--ease); }
.pg-dock.on { transform: none; }
.pg-dock span { font: 650 .92rem var(--body); } .pg-dock small { display: block; color: #a7cfc8; font-size: .78rem; }
.pg-dock .btn { padding: .65rem 1rem; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .pg-f1 { inset-inline-start: -2%; } .pg-f3 { inset-inline-start: -3%; } .pg-f2 { inset-inline-end: -2%; }
  .pg-groups { grid-template-columns: repeat(2, 1fr); }
  .pg-bens { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .pg-hero-grid, .pg-try, .pg-physio { grid-template-columns: 1fr; }
  .pg-hero .pg-stage { margin: 22px 4% 0; }
  .pg-proof-in { grid-template-columns: repeat(2, 1fr); }
  .pg-proof-in > div:nth-child(3) { border-inline-start: 0; }
  .pg-proof-in > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .pg-story { height: 760vh; }
  .pg-story-in { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; gap: 22px; padding-top: 8px; }
  .pg-rail { display: none; }
  .pg-story .pg-stage { order: -1; padding: 0 3%; }
  .pg-texts { height: 210px; }
  .pg-chap h2 { font-size: clamp(1.55rem, 6vw, 2.1rem); margin: 8px 0 8px; }
  .pg-chap p { font-size: 1rem; }
  .pg-ghost { font-size: 52vw; bottom: auto; top: 2vh; }
  .pg-plans { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .pg-plan.best { transform: none; order: -1; }
  .pg-incl { grid-template-columns: 1fr; max-width: 460px; }
  .pg-final .peek { position: relative; inset: auto; width: 60%; margin: 26px auto -60px; }
  .pg-dock { display: flex; }
  .pg-cmp { overflow-x: auto; } .pg-cmp table { min-width: 560px; } .pg-cmp th, .pg-cmp td { padding: 12px 12px; font-size: .92rem; }
}
@media (max-width: 600px) {
  .pg-groups, .pg-bens { grid-template-columns: 1fr; }
  .pg-f2, .pg-f4 { display: none; }
  .pg-f1 { top: -10%; inset-inline-start: -2%; padding: 8px 12px; } .pg-f3 { bottom: -12%; inset-inline-start: auto; inset-inline-end: -2%; padding: 8px 12px; }
  .pg-float .bub { width: 32px; height: 32px; } .pg-mini-ring { width: 36px; height: 36px; }
  .pg-proof-in { grid-template-columns: 1fr; } .pg-proof-in > div { border-inline-start: 0 !important; } .pg-proof-in > div + div { border-top: 1px solid var(--line); }
  .pg-sim { padding: 16px 14px 16px; border-radius: 22px; }
  .pg-texts { height: 230px; }
  .pg-quote::before { font-size: 7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-float, .pg-hint { animation: none !important; }
  .home .rv, .pg-hero-in > * { opacity: 1 !important; transform: none !important; }
}

/* limited-time code under the plans */
body.home .pg-code { margin: 22px auto 0; max-width: 620px; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 18px; border-radius: 16px; border: 1.5px dashed #f2a65a; background: linear-gradient(135deg, #fff8ee, #fff1e0); color: #7a3e06; font-size: .93rem; }
[dir="rtl"] body.home .pg-code, body.home[dir="rtl"] .pg-code { padding: 12px 18px 12px 12px; }
body.home .pg-code .ic { width: 22px; height: 22px; flex: none; color: #e07a1f; }
body.home .pg-code span { flex: 1; }
body.home .pg-code button { flex: none; padding: 10px 14px; border-radius: 11px; border: 0; background: #1d302c; color: #fff; font: 700 .9rem var(--body); letter-spacing: .06em; cursor: pointer; direction: ltr; transition: transform .15s; }
body.home .pg-code button:hover { transform: translateY(-1px); }
body.home .tk-code { padding: 1px 7px; border-radius: 6px; background: rgba(255,255,255,.14); letter-spacing: .05em; }
@media (max-width: 600px) { body.home .pg-code { flex-wrap: wrap; } body.home .pg-code button { width: 100%; } }

body.home .pg-plan .btn { width: 100%; justify-content: center; margin-top: auto; }
body.home .pg-trial { display: block; margin-top: 12px; text-align: center; font-size: .9rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
body.home .pg-plan.best .pg-trial { color: rgba(255,255,255,.85); }
body.home .pg-trial:hover { color: var(--accent); }

/* Sharp text in the laptop: a 3D tilt makes Chrome draw the screen as a blurry picture, so the laptop stays flat */
body.home .pg-stage { perspective: none; }
body.home .pg-laptop { transform: translateY(var(--ty, 0)) !important; transform-style: flat; }
body.home .pg-hero .pg-laptop { animation: pgIn2 1s .15s var(--ease) both; }
@keyframes pgIn2 { from { opacity: 0; transform: translateY(36px); } }
body.home .pg-story .pg-laptop.bump { animation: none; }
body.home .pg-screen { -webkit-font-smoothing: antialiased; }
body.home .pg-screen::after { background: linear-gradient(115deg, rgba(255,255,255,.07), transparent 32%); }
/* only chapter 1 (the blur itself) blurs the screen; the other chapters stay clear */
body.home .pg-story .pg-screen[data-ch="2"] .pg-blurL { opacity: 0; }

/* final box: the two owls show in full (branch not cut) */
body.home .pg-final .peek { bottom: 6%; width: min(26%, 300px); }
@media (max-width: 960px) { body.home .pg-final .peek { margin: 26px auto 0; width: 55%; } }

/* ===== chapter 6: live dashboard ===== */
.dash2 { width: 88%; display: grid; gap: 2cqw; padding: 2.4cqw 2.8cqw; border-radius: 2cqw; background: #fff; box-shadow: 0 2cqw 5cqw rgba(168,104,15,.18); }
.d-hd { display: flex; justify-content: space-between; align-items: center; font: 700 2.35cqw var(--body); color: var(--ink); }
.d-hd .live { display: inline-flex; align-items: center; gap: .7cqw; padding: .4cqw 1.2cqw; border-radius: 99px; background: #fdecd3; color: #a8680f; font-size: 1.66cqw; }
.d-hd .live i { width: .9cqw; height: .9cqw; border-radius: 50%; background: #ea580c; animation: pgLive 1.4s ease-in-out infinite; }
@keyframes pgLive { 50% { opacity: .25; transform: scale(.7); } }
.d-body { display: grid; grid-template-columns: .75fr 1.25fr; gap: 3cqw; align-items: center; }
.dash2 .big { position: relative; aspect-ratio: 1; }
.dash2 .big svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.dash2 .big circle { fill: none; stroke-width: 10; } .dash2 .big .bg { stroke: rgba(168,104,15,.12); }
.dash2 .big .fg { stroke: #a8680f; stroke-linecap: round; stroke-dasharray: 289; stroke-dashoffset: 289; transition: stroke-dashoffset 1.4s var(--ease); }
.pg-screen.go6 .dash2 .big svg { animation: pgGlow 2.6s ease-in-out 1.4s infinite; }
@keyframes pgGlow { 50% { filter: drop-shadow(0 0 1.2cqw rgba(240,163,58,.55)); } }
.dash2 .big > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.dash2 .big strong { font: 700 5.83cqw/1 var(--body); color: #a8680f; } .dash2 .big small { font: 600 1.79cqw var(--body); color: var(--muted); }
.dash2 .best { position: absolute; left: 50%; bottom: -1.2cqw; display: inline-flex; align-items: center; gap: .6cqw; white-space: nowrap; padding: .5cqw 1.3cqw; border-radius: 99px; background: linear-gradient(135deg, #f6cf9b, #e9a95e); color: #4a2a05; font: 700 1.59cqw var(--body); box-shadow: 0 .8cqw 1.6cqw rgba(233,169,94,.5); transform: translate(-50%, 0) scale(0); transition: transform .5s cubic-bezier(.3,1.6,.5,1) 1.5s; }
.dash2 .best .ic { width: 1.4cqw; height: 1.4cqw; fill: currentColor; }
.pg-screen.go6 .dash2 .best { transform: translate(-50%, 0) scale(1); }
.d-right { display: grid; gap: 1.6cqw; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqw; }
.kpi { padding: 1.2cqw 1.3cqw; border-radius: 1.3cqw; background: #faf5ec; display: grid; gap: .4cqw; opacity: 0; transform: translateY(1cqw); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.kpi:nth-child(2) { transition-delay: .12s; } .kpi:nth-child(3) { transition-delay: .24s; }
.pg-screen.go6 .kpi { opacity: 1; transform: none; }
.kpi small { font: 600 1.45cqw/1.25 var(--body); color: var(--muted); }
.kpi b { font: 700 3.04cqw/1.1 var(--body); color: var(--ink); white-space: nowrap; }
.kpi.k2 b { color: #15803d; }
.kpi em { display: inline-flex; align-items: center; gap: .4cqw; font: 600 1.31cqw var(--body); font-style: normal; color: #15803d; }
.kpi em .ic { width: 1.2cqw; height: 1.2cqw; transform: scaleY(-1); }
.spark small { font: 700 1.52cqw var(--body); color: var(--muted); }
.spark svg { display: block; width: 100%; height: 9cqw; margin-top: .6cqw; overflow: visible; }
.spark .ar { fill: url(#spg); opacity: 0; transition: opacity .8s var(--ease) 1s; }
.spark .ln { fill: none; stroke: #e08a1e; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s var(--ease) .3s; vector-effect: non-scaling-stroke; }
.spark .dt { fill: #e08a1e; stroke: #fff; stroke-width: 2; opacity: 0; transition: opacity .3s 1.8s; vector-effect: non-scaling-stroke; }
.pg-screen.go6 .spark .ar { opacity: 1; } .pg-screen.go6 .spark .ln { stroke-dashoffset: 0; } .pg-screen.go6 .spark .dt { opacity: 1; animation: pgLive 1.6s ease-in-out 2.1s infinite; }
html[dir="rtl"] .spark svg { transform: scaleX(-1); }
.d-ft { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3cqw; align-items: end; }
.dash2 .wk small { font: 700 1.52cqw var(--body); color: var(--muted); }
.dash2 .bars { display: flex; align-items: flex-end; gap: 1cqw; height: 8cqw; margin-top: .8cqw; }
.dash2 .pg-bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: .4cqw; font: 600 1.31cqw var(--body); color: var(--muted); }
.dash2 .pg-bar i { width: 100%; height: 0; border-radius: .6cqw .6cqw .2cqw .2cqw; background: #e3c99a; transition: height .8s var(--ease); transition-delay: calc(.4s + var(--i) * .08s); }
.dash2 .pg-bar.ok i { background: #a8680f; } .dash2 .pg-bar.today i { background: linear-gradient(#f0a33a, #a8680f); box-shadow: 0 0 1.2cqw rgba(240,163,58,.6); }
.pg-screen.go6 .dash2 .pg-bar i { height: var(--h); }
.dash2 .pg-streak { justify-self: end; display: grid; grid-template-columns: auto auto 1fr; align-items: center; column-gap: .8cqw; row-gap: .8cqw; padding: 1.2cqw 1.6cqw; border-radius: 1.4cqw; background: #fff7ed; font: 700 1.93cqw var(--body); color: var(--ink); }
.dash2 .pg-streak .ic { width: 2.2cqw; height: 2.2cqw; color: #ea580c; } .dash2 .pg-streak .ic.pop { animation: pgFlame .6s var(--ease); }
.dash2 .dots { grid-column: 1 / -1; display: flex; gap: .6cqw; }
.dash2 .dots i { width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: #f3dcc0; transition: background .3s, transform .3s; transition-delay: calc(1s + var(--i) * .12s); }
.pg-screen.go6 .dash2 .dots i:nth-child(-n+5) { background: #ea580c; transform: scale(1.1); }

/* ===== chapter 7: live preview + pose capture ===== */
.pv { display: grid; gap: .9cqw; padding-bottom: 1.6cqw; border-bottom: 1px solid rgba(91,75,176,.12); }
.pvh { display: flex; justify-content: space-between; align-items: center; }
.pvh small { font: 700 1.52cqw var(--body); color: var(--muted); }
.pv .pill { padding: .35cqw 1.1cqw; border-radius: 99px; font: 700 1.45cqw var(--body); background: #dcfce7; color: #15803d; transition: background .25s, color .25s; }
.pv .pill.bad { background: #fee2e2; color: #b42f2f; }
.pvm { position: relative; height: 1.2cqw; border-radius: 99px; background: rgba(91,75,176,.12); overflow: visible; }
.pvm .fill { position: absolute; inset-block: 0; inset-inline-start: 0; width: 40%; border-radius: inherit; background: linear-gradient(90deg, #22c55e, #f59e0b 70%, #ef4444); }
html[dir="rtl"] .pvm .fill { background: linear-gradient(-90deg, #22c55e, #f59e0b 70%, #ef4444); }
.pvm .th { position: absolute; top: -.7cqw; bottom: -.7cqw; width: .35cqw; border-radius: 99px; background: #5b4bb0; inset-inline-start: 60%; transition: inset-inline-start .2s; box-shadow: 0 0 0 .25cqw #fff; }
.pg-pose { overflow: hidden; }
.pg-pose .scan { position: absolute; inset-inline: 0; top: -20%; height: 18%; background: linear-gradient(transparent, rgba(91,75,176,.28), transparent); opacity: 0; pointer-events: none; }
.pg-pose.cap .scan { animation: pgScan .7s var(--ease); }
.pg-pose.cap { animation: pgFlash .7s var(--ease); }
@keyframes pgScan { 0% { top: -20%; opacity: 1; } 100% { top: 100%; opacity: 1; } }
@keyframes pgFlash { 85% { box-shadow: 0 0 0 .35cqw rgba(91,75,176,.0) inset; background: #fff; } 92% { background: #f3f0ff; } }
.pg-pose.bad.alert { box-shadow: 0 0 0 .35cqw #ef4444 inset, 0 1.5cqw 3.5cqw rgba(239,68,68,.25); }
@media (prefers-reduced-motion: reduce) { .pg-screen.go6 .dash2 .big svg, .d-hd .live i, .pg-screen.go6 .spark .dt { animation: none; } }

.d-body { grid-template-columns: .62fr 1.38fr; }
.dash2 .big { width: 86%; justify-self: center; }
.dash2 { gap: 1.6cqw; padding: 2cqw 2.6cqw; }
.spark svg { height: 7.5cqw; }
.dash2 .pg-streak { grid-template-columns: auto 1fr; }
.dash2 .pg-streak .sn { white-space: nowrap; }
.kpi.k1 b { direction: ltr; unicode-bidi: isolate; justify-self: start; }
html[dir="rtl"] .kpi.k1 b { justify-self: end; }
.kpi.k2 b { direction: ltr; unicode-bidi: isolate; justify-self: start; }
html[dir="rtl"] .kpi.k2 b { justify-self: end; }

/* language menu */
.langs { position: relative; margin-inline-start: 4px; }
.langs summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line); font: 650 .9rem var(--body); color: var(--muted); cursor: pointer; white-space: nowrap; }
.langs summary::-webkit-details-marker { display: none; }
.langs summary .ic { width: 16px; height: 16px; }
.langs summary:hover, .langs[open] summary { color: var(--text); border-color: var(--accent); }
.langs-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 90; width: 460px; max-width: calc(100vw - 32px); max-height: 70vh; overflow: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; padding: 10px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 60px -20px rgba(20,35,31,.35); }
.langs-menu a { padding: 8px 12px; border-radius: 9px; text-decoration: none; color: var(--text); font: 500 .92rem var(--body); }
.langs-menu a:hover { background: var(--accent-soft); }
.langs-menu a[aria-current] { background: var(--accent); color: #fff; }
@media (max-width: 600px) { .langs summary span { display: none; } .langs-menu { width: 300px; grid-template-columns: 1fr; } }
html[lang="ja"], html[lang^="zh"], html[lang="ko"], html[lang="th"], html[lang="hi"] { --display: system-ui, "Segoe UI", "Noto Sans", sans-serif; }
html[lang="ja"] body.home h1, html[lang^="zh"] body.home h1, html[lang="ko"] body.home h1, html[lang="th"] body.home h1, html[lang="hi"] body.home h1 { font-weight: 700; letter-spacing: 0; line-height: 1.15; }
html[lang="ru"], html[lang="uk"] { --display: Georgia, "Times New Roman", serif; }
/* CJK headline: keep each short line whole, slightly smaller so it fits */
html[lang="ja"] .pg-hero h1, html[lang^="zh"] .pg-hero h1, html[lang="ko"] .pg-hero h1 { font-size: clamp(2.2rem, 4.6vw, 4rem); word-break: keep-all; }
html[lang="ja"] .pg-hero h1 span, html[lang^="zh"] .pg-hero h1 span { white-space: nowrap; }
html[lang="ru"] .pg-hero h1, html[lang="uk"] .pg-hero h1 { font-size: clamp(2.5rem, 5.2vw, 4.4rem); }

/* ===== v2 (2026-10-06): bigger, sharper screen text; one reminder at a time ===== */
@media (min-width: 1101px) {
  .pg-story-in { grid-template-columns: 54px .72fr 1.5fr; }
}
body.home .pg-screen { text-rendering: geometricPrecision; }
/* chapter 5: one reminder at a time, gliding in from its own side */
.ly-toasts .stack { width: 46%; height: 0; display: block; gap: 0; }
.ly-toasts .stack.tl, .ly-toasts .stack.tr, .ly-toasts .stack.tc { top: 5%; }
.ly-toasts .stack.bl, .ly-toasts .stack.br, .ly-toasts .stack.bc { top: auto; bottom: 5%; }
.ly-toasts .stack.tc, .ly-toasts .stack.bc { left: 27%; }
.ly-toasts .toast { position: absolute; inset-inline: 0; top: 0; opacity: 0; transform: translate(var(--dx, 0), var(--dy, -70%)) scale(.97); transition: opacity .5s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1); transition-delay: 0s; will-change: transform, opacity; }
.ly-toasts .stack.bl .toast, .ly-toasts .stack.br .toast, .ly-toasts .stack.bc .toast { top: auto; bottom: 0; --dy: 70%; }
.ly-toasts .stack.tl .toast, .ly-toasts .stack.bl .toast { --dx: -18%; }
.ly-toasts .stack.tr .toast, .ly-toasts .stack.br .toast { --dx: 18%; }
.ly-toasts .stack.tc .toast, .ly-toasts .stack.bc .toast { --dx: 0%; }
.ly-toasts .toast.in { opacity: 1; transform: none; }
.ly-toasts .toast.out { opacity: 0; transform: scale(.94); transition: opacity .35s ease, transform .35s ease; }
.ly-toasts .toast .bar { position: absolute; left: 0; right: 0; bottom: 0; height: .35cqw; border-radius: 0 0 1.4cqw 1.4cqw; background: var(--c); transform-origin: left; transform: scaleX(0); opacity: .8; }
.ly-toasts .toast.in .bar { animation: pgToastBar 2.6s linear forwards; }
@keyframes pgToastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.ly-toasts .toast { overflow: hidden; }
/* banner sits left of the status pill so long reasons never overlap it */
.pg-story .pg-banner { left: 41%; font-size: 2.1cqw; }
html[dir="rtl"] .pg-story .pg-banner { left: 59%; }
/* full-screen chapters (6, 7, 8): nothing from the desktop shows through */
.pg-story .pg-screen[data-ch="6"] .pg-pill, .pg-story .pg-screen[data-ch="7"] .pg-pill, .pg-story .pg-screen[data-ch="8"] .pg-pill,
.pg-story .pg-screen[data-ch="6"] .pg-side, .pg-story .pg-screen[data-ch="7"] .pg-side, .pg-story .pg-screen[data-ch="8"] .pg-side,
.pg-story .pg-screen[data-ch="6"] .pg-win, .pg-story .pg-screen[data-ch="7"] .pg-win, .pg-story .pg-screen[data-ch="8"] .pg-win { opacity: 0; transition: opacity .4s; }
.pg-story .pg-pill, .pg-story .pg-side, .pg-story .pg-win { transition: opacity .4s; }
.pg-story .pg-screen[data-ch="2"] .pg-side { opacity: 0; }
.pg-story .pg-banner { left: 39%; max-width: 46%; white-space: normal; text-align: center; line-height: 1.25; border-radius: 2.2cqw; }
html[dir="rtl"] .pg-story .pg-banner { left: 61%; }
.pg-story .pg-pill { max-width: 32%; }
@media (max-width: 760px) {
  .langs-menu { position: fixed; top: 64px; left: 16px; right: 16px; inset-inline-end: auto; width: auto; max-width: none; max-height: calc(100vh - 90px); grid-template-columns: repeat(2, 1fr); }
}

/* hero: long "Sit up straight" label never covers the status label */
.pg-hero .pg-banner { left: 41%; max-width: 50%; white-space: normal; text-align: center; line-height: 1.25; border-radius: 2.2cqw; }
html[dir="rtl"] .pg-hero .pg-banner { left: 59%; }
.pg-hero .pg-pill { max-width: 30%; }
.pg-hero .pg-banner { left: 38%; max-width: 44%; }
html[dir="rtl"] .pg-hero .pg-banner { left: 62%; }
.pg-hero .pg-pill { max-width: none; white-space: nowrap; }
.pg-cred > span:last-child { text-wrap: balance; }
.pg-cred { border-radius: 18px; }
.pg-hero .pg-banner { left: 40%; max-width: none; white-space: nowrap; font-size: 1.9cqw; border-radius: 999px; }
html[dir="rtl"] .pg-hero .pg-banner { left: 60%; }
.pg-hero .pg-pill { font-size: 1.6cqw; }
.pg-cred { max-width: 100%; }

/* "Made by a physiotherapist" chip: name on top, who it's for underneath */
.pg-cred .cr { display: grid; line-height: 1.25; text-wrap: initial; }
.pg-cred .cr b { color: var(--ink); font-weight: 700; }
.pg-cred .cr small { font-size: .84rem; color: var(--muted); }
.pg-cred { border-radius: 16px; padding: 6px 16px 6px 6px; }
.pg-hero .pg-banner { font-size: 2.3cqw; }