/* =====================================================================
   MARROW FOR GYMS.  gyms/gyms.css
   The page's own sheet in the public rollout (2026-10-09, lane 2 of
   ~/.edwinstrong/design-canon/public-rollout-plan-20261008.md, section 3.3).
   Loaded after assets/public/public.css and public-app.css, so every band,
   pill, ring, card, the phone and the console frame come from the shared
   system; this sheet holds only what this page draws:

     .gy-stays     the signature graphic: a coach leaves the gym console, her
                   members are reassigned in place, and the member's phone
                   keeps the gym's brand
     .gc-*         the gym console, drawn at 1120 wide inside .pub-console and
                   scaled by public.js (--s); --u enlarges it on a phone
     .mt-*         the member Train tab (app/(tabs)/program.tsx at marrow-app
                   a7a84d09, the same replica the homepage draws)
     .gy-floor3    three console cards: trainers, money, locations
     .gy-launch    the Founding Launch checklist, its ticks drawing in turn
     .gy-demo      the demo request form on paper

   RULES THIS SHEET KEEPS. Colours only through the --hy-* and css/styles.css
   tokens. No gradient, no box shadow, no filter, no text shadow (the depth is
   the shared frames'). Motion moves only opacity, transform and
   stroke-dashoffset, starts only under html.pub-armed, plays once when the
   block gets .is-in, and the base rules are the rest state that reduced motion
   and Pause motion show. No em or en dashes.
   ===================================================================== */

/* ---------- The gym console canvas: a 1120 point screen, scaled into the frame ---------- */
#main .gy-console-app { --u: 1; display: flex; flex-direction: column; gap: calc(18px * var(--u)); padding: calc(34px * var(--u)) calc(36px * var(--u)); }
#main .gc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
#main .gc-eb { margin: 0 0 calc(8px * var(--u)); font-family: var(--mono); font-weight: 500; font-size: calc(14px * var(--u)); letter-spacing: 0.14em; text-transform: uppercase; color: var(--hy-aqua-hi); }
#main .gc-title { font-family: var(--serif); font-weight: 300; font-size: calc(40px * var(--u)); line-height: 1.1; letter-spacing: -0.015em; color: var(--hy-ink); }
#main .gc-title i { font-style: italic; color: var(--hy-aqua-hi); }
#main .gc-btn { flex: none; display: inline-flex; align-items: center; height: calc(44px * var(--u)); padding: 0 calc(20px * var(--u)); border-radius: 999px; border: 1px solid var(--hy-edge); background: var(--hy-sunk); font-size: calc(16px * var(--u)); font-weight: 500; color: var(--hy-ink); white-space: nowrap; }
#main .gc-tabs { display: flex; gap: calc(6px * var(--u)); padding-bottom: calc(2px * var(--u)); border-bottom: 1px solid var(--hy-hairline); }
#main .gc-tabs span { padding: calc(10px * var(--u)) calc(16px * var(--u)) calc(14px * var(--u)); font-size: calc(17px * var(--u)); font-weight: 500; color: var(--hy-muted); border-bottom: 2px solid transparent; margin-bottom: -3px; }
#main .gc-tabs .on { color: var(--hy-ink); border-bottom-color: var(--hy-aqua-hi); }
#main .gc-grid { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: calc(18px * var(--u)); align-items: start; }
#main .gc-card { padding: calc(22px * var(--u)) calc(24px * var(--u)) calc(10px * var(--u)); border-radius: calc(16px * var(--u)); background: var(--hy-card); border: 1px solid color-mix(in srgb, var(--hy-edge) 70%, transparent); }
#main .gc-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: calc(12px * var(--u)); }
#main .gc-card-t { font-family: var(--serif); font-weight: 400; font-size: calc(24px * var(--u)); line-height: 1.2; color: var(--hy-ink); }
#main .gc-swap { display: inline-grid; }
#main .gc-swap > span { grid-area: 1 / 1; text-align: right; }
#main .gc-count { font-family: var(--mono); font-weight: 500; font-size: calc(13px * var(--u)); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hy-muted); }
#main .gc-segs { display: flex; gap: calc(8px * var(--u)); margin-bottom: calc(10px * var(--u)); }
#main .gc-segs span { display: inline-flex; align-items: center; gap: 8px; height: calc(32px * var(--u)); padding: 0 calc(14px * var(--u)); border-radius: 999px; border: 1px solid var(--hy-hairline); font-size: calc(14px * var(--u)); color: var(--hy-muted); }
#main .gc-segs .on { border-color: var(--hy-aqua-hi); color: var(--hy-ink); }
#main .gc-th, #main .gc-tr { display: grid; align-items: center; gap: calc(14px * var(--u)); }
#main .gc-th { padding: calc(6px * var(--u)) 0 calc(10px * var(--u)); border-bottom: 1px solid var(--hy-hairline); font-family: var(--mono); font-weight: 500; font-size: calc(12px * var(--u)); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hy-muted); }
#main .gc-tr { position: relative; min-height: calc(70px * var(--u)); border-bottom: 1px solid var(--hy-hairline); font-size: calc(17px * var(--u)); color: var(--hy-ink); }
#main .gc-tr:last-child { border-bottom: 0; }
#main .gc-name { display: flex; flex-direction: column; gap: calc(3px * var(--u)); min-width: 0; font-weight: 500; }
#main .gc-line { display: flex; align-items: center; flex-wrap: wrap; gap: calc(10px * var(--u)); }
#main .gc-sub { position: relative; display: grid; font-weight: 400; font-size: calc(14px * var(--u)); color: var(--hy-muted); }
#main .gc-sub > span { grid-area: 1 / 1; }
#main .gc-num { font-variant-numeric: tabular-nums lining-nums; text-align: right; }
#main .gc-pill { justify-self: start; display: inline-flex; align-items: center; height: calc(28px * var(--u)); padding: 0 calc(12px * var(--u)); border-radius: 999px; border: 1px solid var(--hy-boundary); font-size: calc(13px * var(--u)); font-weight: 500; color: var(--hy-ink); white-space: nowrap; }
#main .gc-pill.is-ok { border-color: color-mix(in srgb, var(--hy-teal) 55%, transparent); color: var(--hy-teal); }
#main .gc-tag { display: inline-flex; align-items: center; height: calc(26px * var(--u)); padding: 0 calc(10px * var(--u)); border-radius: 999px; border: 1px solid color-mix(in srgb, var(--hy-aqua-hi) 60%, transparent); font-family: var(--mono); font-weight: 500; font-size: calc(11px * var(--u)); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hy-aqua-hi); white-space: nowrap; }
#main .gc-note { display: flex; align-items: center; gap: calc(12px * var(--u)); padding: calc(14px * var(--u)) calc(16px * var(--u)); border-radius: calc(12px * var(--u)); background: var(--hy-wash); border: 1px solid color-mix(in srgb, var(--hy-teal) 40%, transparent); font-size: calc(15px * var(--u)); line-height: 1.4; color: var(--hy-ink); }
#main .gc-note svg { flex: none; width: calc(22px * var(--u)); height: calc(22px * var(--u)); fill: none; stroke: var(--hy-teal); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* The coaches card: one row leaves, a note takes its place in the same cell. */
#main .gy-coaches .gc-th, #main .gy-coaches .gc-tr { grid-template-columns: minmax(0, 1fr) auto auto; }
#main .gy-slot { display: grid; border-bottom: 1px solid var(--hy-hairline); }
#main .gy-slot > * { grid-area: 1 / 1; }
#main .gy-slot .gc-tr { border-bottom: 0; }
#main .gy-slot .gc-note { align-self: center; }
#main .gy-leaving { opacity: 0; transform: translateX(-36px); }

/* The members card: the rows hold still; the coach under each name changes. */
#main .gy-members .gc-th, #main .gy-members .gc-tr { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 0.55fr); }
#main .gy-hl { position: absolute; inset: 2px calc(-12px * var(--u)); z-index: 0; border-radius: calc(10px * var(--u)); background: color-mix(in srgb, var(--hy-aqua-hi) 7%, transparent); pointer-events: none; }
#main .gy-members .gc-tr > :not(.gy-hl) { position: relative; z-index: 1; }
#main .gy-was { opacity: 0; }

/* ---------- The member's phone: the Train tab, branded with the gym ---------- */
#main .gy-phone { --s: 0.7641; width: 320px; flex: none; }
#main .mt-pad { padding: 4px 16px 0; }
#main .mt-head { display: flex; align-items: center; gap: 10px; }
#main .mt-logo { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--hy-aqua); color: var(--hy-ground); font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: 0.04em; }
#main .mt-gym { font-family: var(--serif); font-weight: 400; font-size: 17px; line-height: 1.2; color: var(--hy-ink); }
#main .gy-phone .hm-app .mt-eb { margin: 16px 0 0; font-family: var(--mono); font-weight: 500; font-size: 12px; line-height: 18px; letter-spacing: 1.44px; text-transform: uppercase; color: var(--hy-aqua); }
#main .hm-app p.mt-hello { margin: 12px 0 0; font-family: var(--serif); font-weight: 300; font-size: 40px; line-height: 44px; color: var(--hy-ink); }
#main .mt-hello em { font-style: italic; font-weight: 300; color: var(--hy-aqua-hi); }
#main .mt-score { margin-top: 26px; display: flex; justify-content: space-around; gap: 10px; padding: 22px 12px 20px; border-radius: 12px; background: var(--hy-card); border: 1px solid color-mix(in srgb, var(--hy-edge) 55%, transparent); }
#main .mt-sc { flex: 0 1 100px; min-width: 0; display: flex; flex-direction: column; align-items: center; }
#main .mt-ringwrap { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 12px; }
#main .mt-ring { width: 64px; height: 64px; overflow: visible; color: var(--hy-teal); }
#main .mt-ring.is-aq { color: var(--hy-aqua-hi); }
#main .mt-ring .mt-track { stroke: color-mix(in srgb, var(--hy-edge) 55%, transparent); }
#main .mt-ring .mt-lum { stroke: currentColor; stroke-opacity: 0.16; }
#main .mt-ring .mt-arc { stroke: currentColor; }
#main .mt-ring .mt-cap-l { fill: currentColor; fill-opacity: 0.3; }
#main .mt-ring .mt-cap { fill: currentColor; }
#main .mt-val { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--sans); font-weight: 400; font-size: 22px; line-height: 26px; color: var(--hy-ink); font-variant-numeric: tabular-nums; }
#main .mt-lab { font-size: 14px; line-height: 20px; text-align: center; color: var(--hy-muted); }
#main .mt-sub { margin-top: 2px; font-size: 12px; line-height: 16px; text-align: center; color: var(--hy-muted); }
#main .mt-next { margin-top: 16px; display: flex; flex-direction: column; padding: 18px; border-radius: 12px; background: var(--hy-card); border: 1px solid color-mix(in srgb, var(--hy-edge) 55%, transparent); }
#main .gy-phone .hm-app .mt-nk { margin: 0 0 8px; font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--hy-muted); }
#main .mt-t { display: block; font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 33px; color: var(--hy-ink); }
#main .mt-s { position: relative; display: grid; margin-top: 2px; font-weight: 500; font-size: 14px; line-height: 20px; color: var(--hy-muted); }
#main .mt-s > span { grid-area: 1 / 1; }
#main .mt-when { margin-top: 10px; font-size: 16px; line-height: 24px; color: var(--hy-ink); }
#main .mt-step { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; padding: 10px 16px; border-radius: 12px; background: var(--hy-card); border: 1px solid var(--hy-hairline); }
#main .mt-step span { display: flex; flex-direction: column; font-size: 16px; line-height: 22px; color: var(--hy-ink); }
#main .mt-step small { font-weight: 600; font-size: 11px; line-height: 14px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--hy-muted); }
#main .mt-step i { font-style: normal; color: var(--hy-muted); }
#main .mt-steps2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
#main .mt-steps2 .mt-step { margin-top: 9px; }
#main .mt-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
#main .mt-pills span { display: flex; align-items: center; justify-content: center; gap: 10px; height: 46px; border-radius: 999px; background: var(--hy-card); border: 1px solid var(--hy-hairline); font-weight: 500; font-size: 16px; color: var(--hy-ink); }
#main .mt-pills svg { width: 20px; height: 20px; fill: var(--hy-ink); }
#main .gy-phone .ap-tabs .on { color: var(--hy-aqua); }

/* ---------- 2. When a coach leaves (light) ---------- */
#main .gy-stays .pub-head { max-width: 720px; }
#main .gy-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; margin-top: 8px; }
#main .gy-stays .pub-console-glass { aspect-ratio: 16 / 9.3; }
#main > .gy-stays { padding-bottom: 72px; }
#main .gy-stage .pub-console { width: auto; max-width: none; grid-column: 1; grid-row: 1; margin-right: -28px; }
#main .gy-stage .gy-phone { grid-column: 2; grid-row: 1; margin-top: 96px; z-index: 2; }
#main .gy-legend { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; padding: 0; list-style: none; }
#main .gy-legend li { display: flex; align-items: baseline; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--ink-secondary); max-width: 34ch; }
#main .gy-legend b { flex: none; font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.12em; color: var(--marrow-accent); }

/* ---------- 3. Run. Grow. Operate. (dark) ---------- */
#main .gy-pillars .pub-door { padding-bottom: 32px; }
#main .gy-pillars .pub-door-h { margin-bottom: 12px; }
#main .dialed-band p.gy-pillar-p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--hy-muted); }

/* ---------- 4. One console for the floor (light): three cards from the console ---------- */
#main .gy-floor3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
#main .gy-floor3 > article { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
#main .gy-floor3 .pub-console { max-width: none; }
#main .gy-cap h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.25; color: var(--ink-primary); }
#main .gy-cap p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-secondary); }
#main .gy-mini { --u: 2.4; padding: 44px 48px; }
#main .gy-mini .gc-card { height: 100%; padding: 36px 44px 20px; }
#main .gy-mini .gc-card-h { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 18px; }
#main .gy-mini .gc-tr { min-height: 140px; }
#main .gy-mini .gc-muted { color: var(--hy-muted); }
#main .gy-mini .gy-mrow { grid-template-columns: minmax(0, 1fr) auto; min-height: 104px; }
#main .gy-mini .gy-mtot { border-top: 2px solid var(--hy-edge); }
#main .gy-mini .gy-mtot .gc-num { color: var(--hy-teal); }
#main .gy-mini .gy-trow { grid-template-columns: minmax(0, 1fr) auto auto; }
#main .gy-mini .gy-loc { grid-template-columns: minmax(0, 1fr) auto; min-height: 136px; }
#main .gy-add { margin-top: 18px; }

/* ---------- 5. Founding Launch (dark): four ticks draw in, one after another ---------- */
#main .gy-launch-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
#main .gy-launch-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
#main .gy-launch-copy .pub-head { margin-bottom: 4px; }
#main .gy-facts { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
#main .dialed-band .gy-facts li { font-size: 15px; line-height: 1.6; color: var(--hy-muted); max-width: 52ch; }
#main .dialed-band .gy-facts b { display: block; font-weight: 600; color: var(--hy-ink); }
#main .gy-checks { margin: 0; padding: 12px 28px; list-style: none; border-radius: 20px; background: var(--hy-card); border: 1px solid var(--hy-hairline); }
#main .gy-check { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--hy-hairline); }
#main .gy-check:last-child { border-bottom: 0; }
#main .gy-tick { width: 44px; height: 44px; overflow: visible; }
#main .gy-tick .gy-tick-c { stroke: color-mix(in srgb, var(--hy-teal) 50%, transparent); stroke-width: 1.5; fill: color-mix(in srgb, var(--hy-teal) 12%, transparent); }
#main .gy-tick .gy-tick-p { stroke: var(--hy-teal); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; fill: none; stroke-dasharray: 1; stroke-dashoffset: 0; }
#main .gy-check-t { display: flex; flex-direction: column; gap: 4px; }
#main .gy-check-k { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hy-aqua-hi); }
#main .dialed-band .gy-check-d { font-size: 15px; line-height: 1.5; color: var(--hy-ink); }

/* ---------- 7. The demo request (light) ---------- */
#main .gy-demo-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
#main .gy-receipts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 8px 0 0; padding: 0; list-style: none; }
#main .gy-receipts li { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 14px; background: var(--paper-card); border: 1px solid var(--rule-soft); }
#main .gy-receipts b { font-family: var(--serif); font-weight: 300; font-size: 30px; line-height: 1; color: var(--ink-primary); font-variant-numeric: tabular-nums lining-nums; }
#main .gy-receipts span { font-size: 14px; line-height: 1.45; color: var(--ink-secondary); }
#main .gy-form-card { padding: 32px; border-radius: 20px; background: var(--paper-card); border: 1px solid var(--rule-soft); }
#main .gy-form-card .demo-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 16px; }
#main .gy-form-card .gy-full { grid-column: 1 / -1; }
#main .gy-form-eb { margin: 0; font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--marrow-accent); }
#main .gy-form-t { margin: 6px 0 4px; font-family: var(--serif); font-weight: 300; font-size: 28px; line-height: 1.15; color: var(--ink-primary); }
#main .gy-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#main .gy-form-card .gy-field label { font-family: var(--mono); font-weight: 500; font-size: 12px; line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-secondary); }
#main .gy-form-card .gy-input:not([type="checkbox"]) { width: 100%; min-width: 0; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--rule-strong); background: var(--color-pure-white); color: var(--ink-primary); font: inherit; font-size: 16px; }
#main .gy-form-card textarea.gy-input:not([type="checkbox"]) { min-height: 112px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
#main .gy-form-card .gy-input::placeholder { color: var(--ink-tertiary); }
#main .gy-form-card .gy-input:focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; border-color: var(--ink-primary); }
#main .gy-form-card label.gy-consent { display: flex; align-items: flex-start; gap: 12px; font-family: var(--sans); font-weight: 400; font-size: 14px; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--ink-secondary); cursor: pointer; }
#main .gy-consent input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--marrow-accent); }
#main .gy-consent a { color: var(--marrow-accent); text-decoration: underline; text-underline-offset: 3px; }
#main .gy-form-card .gy-submit { width: 100%; border: 0; cursor: pointer; }
#main .gy-form-card .gy-submit:disabled { opacity: 0.6; cursor: progress; }
#main .gy-fine { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-secondary); }
#main .demo-error { display: none; margin: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--mz-status-risk); font-size: 14px; line-height: 1.5; color: var(--mz-status-risk); }
#main .demo-error.is-visible { display: block; }
#main .demo-success { display: none; padding: 8px 0; }
#main .demo-form-shell.is-submitted .demo-form { display: none; }
#main .demo-form-shell.is-submitted .demo-success { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
#main .demo-success:focus { outline: none; }
#main .demo-success-h { margin: 0; font-family: var(--serif); font-weight: 300; font-size: 32px; line-height: 1.15; color: var(--ink-primary); }
#main .demo-success-body { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-secondary); }
#main > .pub-honest { padding-bottom: 56px; }
#main > .gy-demo { padding-top: 56px; }

/* ---------- Phone first ---------- */
@media (max-width: 1180px) {
  #main .gy-stage { grid-template-columns: minmax(0, 1fr) 280px; }
  #main .gy-phone { --s: 0.6615; width: 280px; }
  #main .gy-stage .pub-console { margin-right: -24px; }
}
@media (max-width: 1023px) {
  #main .gy-stage { grid-template-columns: minmax(0, 1fr); justify-items: center; padding-bottom: 24px; }
  #main .gy-stage .pub-console { width: 100%; grid-column: 1; margin-right: 0; }
  #main .gy-stage .gy-phone { grid-column: 1; grid-row: 2; margin-top: -56px; justify-self: end; margin-right: 6%; }
  #main .gy-floor3 { grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 620px; margin-inline: auto; }
  #main .gy-launch-grid, #main .gy-demo-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 767px) {
  /* The console is read on a phone at a third of its size, so its type is drawn larger and the members card shows alone. */
  #main .gy-console-app { --u: 1.9; padding: 40px 44px; }
  #main .gy-stays .gy-console-app .gc-grid { grid-template-columns: minmax(0, 1fr); }
  /* On a phone the roster card keeps only the moment that matters: the trainer who leaves. */
  #main .gy-stays .gy-coaches > .gc-tr, #main .gy-stays .gy-coaches .gc-th, #main .gy-stays .gy-coaches .gc-count, #main .gy-stays .gy-members .gc-segs { display: none; }
  #main .gy-stays .gy-coaches .gy-slot { border-bottom: 0; }
  #main .gy-stays .gy-console-app .gc-tabs span:nth-child(n+4) { display: none; }
  #main .gy-stays .gy-console-app .gy-members .gc-th, #main .gy-stays .gy-console-app .gy-members .gc-tr { grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.6fr); }
  #main .gy-stays .gy-console-app .gy-members :is(.gy-col-last, .gy-col-pay) { display: none; }
  #main .gy-stays .gy-console-app .gc-btn { display: none; }
  #main .gy-stays .pub-console-glass { aspect-ratio: 3 / 4; }
  #main .gy-stage .gy-phone { --s: 0.5333; width: 230px; margin-top: -88px; margin-right: 0; justify-self: end; }
  #main .gy-mini { --u: 2.9; }
  #main .gy-mini .gc-tr { min-height: 170px; }
  #main .gy-floor3 .pub-console-glass { aspect-ratio: 4 / 3; }
  #main .gy-receipts { grid-template-columns: minmax(0, 1fr); }
  #main .gy-receipts li { flex-direction: row; align-items: baseline; gap: 14px; }
  #main .gy-receipts b { min-width: 96px; }
  #main .gy-form-card { padding: 22px 18px; }
  #main .gy-form-card .demo-form { grid-template-columns: minmax(0, 1fr); }
  #main .gy-checks { padding: 4px 18px; }
  #main .gy-check { grid-template-columns: 36px minmax(0, 1fr); gap: 14px; }
  #main .gy-tick { width: 36px; height: 36px; }
}

/* =====================================================================
   MOTION. Only under html.pub-armed (the head gate); the rules above are the rest.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* 2. A coach leaves: her row slides out, the note takes the cell, her members
     are reassigned one by one, and the member's phone shows the new coach. */
  .pub-armed #main .gy-stays:not(.is-in) .gy-leaving { opacity: 1; transform: none; }
  .pub-armed #main .gy-stays:not(.is-in) :is(.gy-note, .gy-now, .gc-tag, .gy-hl) { opacity: 0; }
  .pub-armed #main .gy-stays:not(.is-in) .gy-was { opacity: 1; }
  .pub-armed #main .gy-stays.is-in .gy-leaving { animation: gy-kf-leave 760ms cubic-bezier(0.55, 0, 0.3, 1) 900ms both; }
  .pub-armed #main .gy-stays.is-in .gy-note { animation: gy-kf-in 600ms cubic-bezier(0.22, 1, 0.36, 1) 1560ms both; }
  .pub-armed #main .gy-stays.is-in .gy-was { animation: gy-kf-out 420ms ease calc(1900ms + var(--k, 0) * 140ms) both; }
  .pub-armed #main .gy-stays.is-in .gy-now { animation: gy-kf-in 560ms cubic-bezier(0.22, 1, 0.36, 1) calc(2040ms + var(--k, 0) * 140ms) both; }
  .pub-armed #main .gy-stays.is-in .gy-hl { animation: gy-kf-fade 700ms ease calc(1900ms + var(--k, 0) * 140ms) both; }
  .pub-armed #main .gy-stays.is-in .gc-tag { animation: gy-kf-pop 520ms cubic-bezier(0.22, 1, 0.36, 1) calc(2140ms + var(--k, 0) * 140ms) both; }

  /* 4. The three console cards rise in turn. */
  .pub-armed #main .gy-floor3:not(.is-in) > article { opacity: 0; transform: translateY(24px); }
  .pub-armed #main .gy-floor3.is-in > article { animation: gy-kf-in 820ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 120ms) both; }

  /* 5. The Founding Launch ticks draw, 420ms each, one after another. */
  .pub-armed #main .gy-checks:not(.is-in) .gy-tick-p { stroke-dashoffset: 1; }
  .pub-armed #main .gy-checks:not(.is-in) .gy-tick-c { opacity: 0.25; }
  .pub-armed #main .gy-checks:not(.is-in) .gy-check-t { opacity: 0.4; }
  .pub-armed #main .gy-checks.is-in .gy-tick-c { animation: gy-kf-fade-from 420ms ease calc(300ms + var(--i) * 420ms) both; }
  .pub-armed #main .gy-checks.is-in .gy-tick-p { animation: pub-kf-draw1 420ms cubic-bezier(0.22, 1, 0.36, 1) calc(360ms + var(--i) * 420ms) both; }
  .pub-armed #main .gy-checks.is-in .gy-check-t { animation: gy-kf-lift 520ms cubic-bezier(0.22, 1, 0.36, 1) calc(300ms + var(--i) * 420ms) both; }
}

@keyframes gy-kf-leave { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-36px); } }
@keyframes gy-kf-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes gy-kf-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes gy-kf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gy-kf-fade-from { from { opacity: 0.25; } to { opacity: 1; } }
@keyframes gy-kf-lift { from { opacity: 0.4; } to { opacity: 1; } }
@keyframes gy-kf-pop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }