/* Thin grey text on a dark ground lost its terminals under macOS's antialiased smoothing (owner saw letters
   with their ends cut off): body copy keeps a touch more weight and the default smoothing. */
p, li, figcaption, .lede, .line p { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; text-rendering: optimizeLegibility; }

/*
 * Pieces every version shares. Each page styles its own surfaces and sets the few variables below;
 * the behaviour lives in shared.js.
 *
 *   --veil   the dim laid over the task panel outside the spotlit task
 *   --muted  secondary text on the page's own ground
 */

/* The brand flame on key words, lifted verbatim from the live landing's .ember-text: the app's
   ember gradient painted into the glyphs. The padding is load-bearing — background-clip: text only
   paints inside the line box, and Plus Jakarta Sans' descenders reach past it; the negative margin
   hands the space straight back. */
.ember {
  font-style: normal;
  background: linear-gradient(135deg, #ff8a3c 0%, #ff6b2c 42%, #ff3b1f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding-block: .14em;
  margin-block: -.14em;
}

/* A word that casts its own shadow: its glyphs laid on the ground behind it, fading with distance.
   The sun rises as the page scrolls (shared.js sets --skew). Each page sets --cast / --cast-op. */
.shade { position: relative; display: inline-block; isolation: isolate; }
/* drawn by ::after from data-text, so it is never selected, copied or read out */
.shade::after { content: attr(data-text); position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none; user-select: none; white-space: nowrap;
  color: var(--cast, #fff); -webkit-text-fill-color: var(--cast, #fff); opacity: var(--cast-op, .3);
  transform-origin: 0 79%; transform: skewX(var(--skew, -52deg)) scaleY(.62); filter: blur(.8px);
  -webkit-mask-image: linear-gradient(to top, #000 30%, transparent 100%); mask-image: linear-gradient(to top, #000 30%, transparent 100%); }

/* mid-sentence the shadow stays short, so it lies under its own word and not across the next one */
.shade.short::after { transform: skewX(var(--skew, -52deg)) scaleY(.3); }

/* The swapper: two ways into one section. Both modes stay stacked in one grid cell, so the page
   keeps the height of the taller one and nothing below moves when the mode changes. */
.modes { display: inline-flex; padding: 4px; border-radius: 999px; background: color-mix(in srgb, currentColor 9%, transparent); }
.modes button { border: 0; background: none; cursor: pointer; height: 38px; padding: 0 20px; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 600; color: inherit; opacity: .62; transition: background .25s, color .25s, opacity .25s; }
.modes button:hover { opacity: .9; }
.modes button[aria-pressed="true"] { background: var(--modes-on, #fff); color: var(--modes-on-fg, #0a0a0a); opacity: 1; }
.modes button:focus-visible { outline: 2px solid #ff6b2c; outline-offset: 2px; }
.mode-stack { display: grid; }
.mode-stack > * { grid-area: 1 / 1; }
/* a one-line title sits on the toggle; the spare line of the longer title opens above it */
.mode-stack > h2 { align-self: end; }
[data-when] { transition: opacity .3s; }
[data-when].off { opacity: 0; visibility: hidden; }
[data-modes] video { transition: opacity .3s; }
[data-modes].mode-swap video, [data-modes].mode-swap [data-when] { opacity: 0; }

/* Brand: the heading and one sentence on the left, the client's phone on the right. */
.brand-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 88px); }
.brand-split .brand-text { margin-top: 24px; max-width: 34ch; }
.brand-phone { position: relative; height: min(clamp(440px, 46vw, 640px), calc(100svh - 180px)); }
.brand-phone video { position: absolute; left: 50%; top: -9%; height: 128%; width: auto; max-width: none; transform: translateX(-50%); }
@media (max-width: 760px) { .brand-split { grid-template-columns: 1fr; } .brand-phone { height: 480px; } }

/* The sign-up button names the platforms with their marks: iPhone, Android, the browser. */
.platforms { display: inline-flex; align-items: center; gap: 7px; margin-left: 12px; padding-left: 12px; border-left: 1px solid color-mix(in srgb, currentColor 28%, transparent); }
.platforms svg { display: block; width: 15px; height: 15px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Reviews: real App Store quotes, two or three to a row. Each page sets --r-strong, --r-muted, --r-hair. */
.reviews { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); max-width: 1060px; margin: 52px auto 0; text-align: left; }
.review { margin: 0; padding-top: 20px; border-top: 1px solid var(--r-hair, rgba(127, 127, 127, .25)); display: flex; flex-direction: column; gap: 12px; }
.review .stars { color: #ff6b2c; letter-spacing: 3px; font-size: 14px; }
.review blockquote { margin: 0; }
.review .r-title { font-size: 18px; font-weight: 650; letter-spacing: -.01em; color: var(--r-strong, currentColor); }
.review blockquote p + p { margin-top: 8px; font-size: 16px; line-height: 1.6; color: var(--r-muted, #8f9a9e); }
.review figcaption { margin-top: auto; font-size: 14px; color: var(--r-muted, #8f9a9e); }
@media (max-width: 760px) { .reviews { grid-template-columns: 1fr; } }

/* The client's day pinned to the scroll: per step, one stretch for the client's phone and one for the trainer's window. */
[data-seq-scroll] { height: calc(100vh + var(--seq-steps, 5) * 2 * 55vh); }
[data-seq-scroll] .seq-pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 760px) { [data-seq-scroll] { height: auto; } [data-seq-scroll] .seq-pin { position: static; height: auto; } }

/* The task panel, with one task lit at a time and a tap on its quick action. */
.tq { position: relative; }
.tq-frame { position: relative; overflow: hidden; aspect-ratio: 1440 / 600; }
[data-queue="full"] .tq-frame { aspect-ratio: 16 / 10; }
.tq-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tq-spot { position: absolute; border-radius: 14px; box-shadow: 0 0 0 200vmax var(--veil, rgba(0, 0, 0, .55)); transition: left .7s cubic-bezier(.65, 0, .35, 1), top .7s cubic-bezier(.65, 0, .35, 1), width .7s cubic-bezier(.65, 0, .35, 1), height .7s cubic-bezier(.65, 0, .35, 1); pointer-events: none; }
.tq-ring { position: absolute; border-radius: 999px; pointer-events: none; transition: left .7s cubic-bezier(.65, 0, .35, 1), top .7s cubic-bezier(.65, 0, .35, 1), width .7s cubic-bezier(.65, 0, .35, 1), height .7s cubic-bezier(.65, 0, .35, 1); }
.tq-ring::before, .tq-ring::after { content: ""; position: absolute; inset: -5px; border-radius: inherit; border: 2px solid #ff6b2c; opacity: 0; }
.tq-ring.tap::before { animation: tq-tap 1.3s .55s cubic-bezier(.2, .7, .2, 1) both; }
.tq-ring.tap::after { animation: tq-tap 1.3s .75s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes tq-tap { 0% { opacity: 0; transform: scale(1.35); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.08); } }
.tq-cap { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; min-height: 2.4em; margin-top: 22px; font-size: 17px; line-height: 1.3; }
.tq-cap .type { color: var(--muted, #8f9a9e); }
.tq-cap svg { flex: none; width: 22px; height: 12px; color: var(--muted, #8f9a9e); }
.tq-cap .act { font-weight: 650; }
.tq-cap > * { transition: opacity .35s; }
.tq-cap.swap > * { opacity: 0; }

/* Everything else: names drifting through a lit window, and a loop of real screens. */
.ticker { height: 13rem; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 66%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 66%, transparent 100%); }
.ticker-track { display: flex; flex-direction: column; align-items: center; gap: .75rem; animation: mb-ticker 64s linear infinite; }
.ticker-track > span { font-size: clamp(17px, 1.7vw, 21px); font-weight: 700; letter-spacing: -.02em; line-height: 1.35; white-space: nowrap; text-align: center; }
.ticker-track small { font-size: .62em; font-weight: 600; letter-spacing: .02em; margin-left: .5em; padding: .2em .6em; border-radius: 999px; border: 1px solid currentColor; opacity: .6; vertical-align: .2em; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes mb-ticker { to { transform: translateY(-50%); } }
.rail { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.rail-track { display: flex; gap: 18px; width: max-content; animation: mb-rail 70s linear infinite; }
.rail-track img { height: clamp(320px, 34vw, 480px); width: auto; border-radius: clamp(22px, 2.4vw, 34px); box-shadow: 0 0 0 1px rgba(127, 127, 127, .18); }
.rail:hover .rail-track { animation-play-state: paused; }
.rail-shot { flex: none; margin: 0; }
.rail-shot figcaption { margin-top: 16px; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; text-align: center; color: var(--muted, #8f9a9e); }
@keyframes mb-rail { to { transform: translateX(-50%); } }

/* The working week: cards scrolled sideways, the first one centred under the heading. Each page
   sets --g-strong (card titles) and, where it differs from --muted, --g-muted (card text). */
.g-track { --tile: min(80vw, 940px); display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 48px max(16px, calc((100% - var(--tile)) / 2)) 8px; scrollbar-width: none; }
.g-track::-webkit-scrollbar { display: none; }
.g-track:focus-visible { outline: 2px solid #ff6b2c; outline-offset: -2px; }
.g-item { flex: none; width: var(--tile); margin: 0; scroll-snap-align: center; }
.g-media { position: relative; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: #0b0c0d; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.g-media.paper { background: #e9e9e7; }
.g-media video, .g-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the takes zoom past their stage onto the app, so the screen reads at card size */
.g-media .staged { transform: scale(1.32); }
/* screens are shown whole, never cropped at a corner */
.g-media img { object-fit: contain; }
.g-item figcaption { margin-top: 22px; max-width: 54ch; color: var(--g-muted, var(--muted, #8f9a9e)); font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.g-item figcaption strong { color: var(--g-strong, #fff); font-weight: 650; }
.g-media.g-phone img { inset: 6% 0; height: 88%; }
/* one heading per stage, stacked in one cell so the cards never move when it changes */
/* pinned, only the card in the middle shows; its neighbours wait off stage */
.week.pinned .g-item { transition: opacity .4s; }
.week.pinned .g-item.dim { opacity: 0; }
.g-heads { display: grid; }
.g-heads > * { grid-area: 1 / 1; align-self: end; transition: opacity .35s, visibility .35s; }
.g-heads > .off { opacity: 0; visibility: hidden; }
/* pinned: the page scroll drives the track, one stage per card plus the section's own heading */
.week.pinned { height: calc(100vh + var(--g-stages, 6) * 55vh); padding-block: 0; }
.week.pinned .g-pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 56px; overflow: hidden; }
/* the track stays inside the content column, so no card is cut at the window's edge */
/* the heading, the card and the arrows share one column, the card's own width */
.week.pinned .g-pin { --tile: min(78vw, 1120px, calc((100vh - var(--g-chrome, 400px)) * 1.6)); }
.week.pinned .g-nav { width: var(--tile); max-width: none; padding-inline: 0; margin-inline: auto; }
/* the heading starts where the card starts, but keeps the full width to the right so it stays on two lines */
.week.pinned .g-heads { max-width: none; margin-inline: 0; padding-left: max(var(--gutter, 16px), calc((100% - var(--tile)) / 2)); }
.week.pinned .g-track { --tile: inherit; max-width: var(--g-box, 1280px); margin-inline: auto; overflow: hidden; scroll-snap-type: none; padding-top: 32px;
  /* padding % reads the parent's width, so centre against the capped box, not the window */
  padding-inline: max(16px, calc((min(100%, var(--g-box, 1280px)) - var(--tile)) / 2)); }
.g-nav { display: flex; justify-content: flex-end; gap: 12px; margin-top: 28px; }
.g-nav button { width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: color-mix(in srgb, currentColor 10%, transparent); color: inherit; transition: background .2s, opacity .2s; }
.g-nav button:hover { background: color-mix(in srgb, currentColor 16%, transparent); }
.g-nav button:disabled { opacity: .35; cursor: default; }
.g-nav button:focus-visible { outline: 2px solid #ff6b2c; outline-offset: 2px; }
.g-nav svg { width: 18px; height: 18px; }

@media (max-width: 520px) {
  .ticker { height: 11rem; }
  .ticker-track > span { white-space: normal; max-width: 20rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker { height: auto; -webkit-mask-image: none; mask-image: none; }
  .ticker-track, .rail-track { animation: none; }
  .ticker-track > [aria-hidden], .rail-track > [aria-hidden] { display: none; }
  .rail { overflow-x: auto; }
  .tq-spot, .tq-ring { transition: none; }
}

/* the lede's lead-in sentence reads in the page's main ink */
.prog-lede b, #progresja .lede b, #progression .lead b { color: var(--fg, var(--ice, #fff)); font-weight: 650; }
/* progression's one-line promise: a second display line under the heading */
#progresja .lede, #progression .lead { font-size: clamp(22px, 2.3vw, 34px); line-height: 1.25; letter-spacing: -0.015em; font-weight: 600; color: var(--fg, var(--ice, #fff)); max-width: none; }

/* the brand title's second line takes the colour the client's app shows right now (V6 drives it; elsewhere it stays the flame) */
.brand-live { font-style: normal; color: var(--brand-live, #ff6b2c); transition: color .25s ease; }

/* a clip the phone refused to start on its own (shared.js): one tap plays it */
.tap-play { position: absolute; left: 50%; top: 50%; z-index: 3; width: 64px; height: 64px; margin: -32px 0 0 -32px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.tap-play svg { width: 28px; height: 28px; margin-left: 3px; }