/* =====================================================================
   MARROW, CAPABILITIES.  capabilities/capabilities.css
   The public rollout, 2026-10-09, lane 4 (public-rollout-plan-20261008.md
   section 3.5). Loads after assets/public/public.css and public-app.css and
   only adds this page's own pieces: the six cell map in the hero, the three
   member phones (Train and Fuel are drawn here from marrow-app a7a84d09,
   Progress is the shared pane), the business cards and the owner's three
   console screens. Colours only through the --hy-* and css/styles.css
   tokens. The base rules are the rest state; every start state lives under
   html.pub-armed. Only opacity, transform, stroke-dasharray,
   stroke-dashoffset and stroke-opacity move. No em or en dashes.
   ===================================================================== */

/* ---------- 1. The hero and the six cell map ---------- */
#main .cp-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
#main .cp-cells { margin: 0; padding: 0; width: 100%; max-width: 560px; justify-self: center; background: none; border: 0; border-radius: 0; box-shadow: none; }
#main .cp-cells svg { width: 100%; height: auto; overflow: visible; }
#main .cp-outer { stroke: var(--hy-aqua-hi); stroke-opacity: 0.9; }
#main .cp-cell { stroke: var(--hy-aqua-hi); fill: color-mix(in srgb, var(--hy-aqua) 10%, transparent); }
#main .cp-cell-lum { stroke: var(--hy-aqua-hi); stroke-opacity: 0.16; fill: none; }
#main .cp-core-lum { stroke: var(--hy-teal); stroke-opacity: 0.3; fill: none; }
#main .cp-core { fill: var(--hy-teal); }
#main .cp-ln { stroke: var(--hy-aqua); stroke-dasharray: 1; stroke-dashoffset: 0; }
#main .cp-nm { fill: var(--hy-ink); font-family: var(--mono); font-weight: 500; font-size: 15px; letter-spacing: 0.14em; }

/* ---------- 2. For your members: three phones ---------- */
#main .cp-phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; align-items: start; }
#main .cp-ph { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
#main .cp-ph .pub-device { width: 300px; --s: 0.7128; margin-bottom: 44px; text-align: left; }
#main .cp-ph-h { margin: 0 0 8px; font-family: var(--serif); font-weight: 300; font-size: 28px; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink-primary); }
#main .cp-ph-p { margin: 0; max-width: 30ch; font-size: 16px; line-height: 1.5; color: var(--ink-secondary); }
/* One screen per phone here, so every pane shows (the shared panes start hidden for the homepage tour). */
#main .cp-ph .hm-pane { opacity: 1; visibility: visible; transform: none; }

/* The member Train tab (app/(tabs)/program.tsx, a branded build), in the app's 390 point space. */
#main .hm-app .rt-pad { padding: 4px 0 0; }
#main .hm-app .rt-brand { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
#main .hm-app .rt-logo { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--hy-aqua); color: var(--hy-ground); font-size: 13px; font-weight: 500; letter-spacing: 0.5px; }
#main .hm-app .rt-name { font-family: var(--serif); font-weight: 400; font-size: 17px; line-height: 1.2; color: var(--hy-ink); }
#main .hm-app .rt-eb { margin: 16px 0 0; font-size: 12px; line-height: 18px; letter-spacing: 1.44px; text-transform: uppercase; color: var(--hy-aqua); }
#main .hm-app p.rt-hello { margin: 12px 0 0; font-family: var(--serif); font-weight: 300; font-size: 40px; line-height: 44px; color: var(--hy-ink); }
#main .hm-app .rt-hello em { font-style: italic; font-weight: 300; color: var(--hy-aqua-hi); }
#main .hm-app .rt-score { margin-top: 26px; display: flex; justify-content: space-around; gap: 10px; padding: 22px 12px 20px; border-radius: 12px; background-color: var(--hy-card); background-image: radial-gradient(62% 72% at 12% 8%, color-mix(in srgb, var(--hy-pool-teal) 20%, transparent) 0%, transparent 70%), radial-gradient(42% 60% at 100% 30%, color-mix(in srgb, var(--hy-pool-blue) 12%, transparent) 0%, transparent 70%); border: 1px solid color-mix(in srgb, var(--hy-edge) 55%, transparent); }
#main .hm-app .rt-sc { flex: 0 1 100px; min-width: 0; display: flex; flex-direction: column; align-items: center; color: var(--hy-teal); }
#main .hm-app .rt-sc.rt-aq { color: var(--hy-aqua-hi); }
#main .hm-app .rt-ringwrap { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 12px; }
#main .hm-app .rt-ring { position: absolute; inset: 0; width: 64px; height: 64px; overflow: visible; fill: none; }
#main .hm-app .rt-track { stroke: color-mix(in srgb, var(--hy-edge) 55%, transparent); }
#main .hm-app :is(.rt-arc, .rt-lum) { stroke: currentColor; stroke-linecap: round; stroke-dasharray: var(--p) 100; transform: rotate(-90deg); transform-origin: 36px 36px; }
#main .hm-app .rt-lum { stroke-opacity: 0.16; }
#main .hm-app .rt-ringwrap b { position: relative; font-weight: 400; font-size: 22px; line-height: 26px; color: var(--hy-ink); font-variant-numeric: tabular-nums; }
#main .hm-app .rt-lab { font-size: 14px; line-height: 20px; text-align: center; color: var(--hy-muted); }
#main .hm-app .rt-sub { margin-top: 2px; font-size: 12px; line-height: 16px; text-align: center; color: var(--hy-muted); }
#main .hm-app .rt-next { margin-top: 16px; display: flex; flex-direction: column; padding: 18px; border-radius: 12px; background-color: var(--hy-card); background-image: radial-gradient(42% 60% at 100% 30%, color-mix(in srgb, var(--hy-pool-blue) 12%, transparent) 0%, transparent 70%); border: 1px solid color-mix(in srgb, var(--hy-edge) 55%, transparent); }
#main .hm-app .rt-nk { margin: 0 0 8px; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--hy-muted); }
#main .hm-app .rt-t { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 33px; color: var(--hy-ink); }
#main .hm-app .rt-s { margin-top: 2px; font-weight: 500; font-size: 14px; line-height: 20px; color: var(--hy-muted); }
#main .hm-app .rt-when { margin-top: 10px; font-size: 16px; line-height: 24px; color: var(--hy-ink); }
#main .hm-app .rt-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 .hm-app .rt-step span { display: flex; flex-direction: column; font-size: 16px; line-height: 22px; color: var(--hy-ink); }
#main .hm-app .rt-step small { font-weight: 600; font-size: 11px; line-height: 14px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--hy-muted); }
#main .hm-app .rt-step i { font-style: normal; font-size: 22px; color: var(--hy-muted); }

#main .hm-app .rt-steps2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
#main .hm-app .rt-steps2 .rt-step { margin-top: 9px; }
#main .hm-app .rt-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
#main .hm-app .rt-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 .hm-app .rt-pills svg { width: 20px; height: 20px; fill: var(--hy-ink); }
#main .hm-app .rf-nav { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 12px 0; font-weight: 500; font-size: 16px; line-height: 22px; color: var(--hy-ink); }
#main .hm-app .rf-nav + .rf-nav { border-top: 1px solid var(--hy-hairline); }
#main .hm-app .rf-nav i { font-style: normal; font-size: 22px; color: var(--hy-muted); }

/* Fuel (app/(tabs)/nutrition.tsx): the console register, one headline, list row groups. */
#main .hm-app .rf-h { margin: 30px 0 18px; font-family: var(--serif); font-weight: 300; font-size: 44px; line-height: 48px; color: var(--hy-ink); }
#main .hm-app .rf-group { margin-bottom: 16px; padding: 18px; border-radius: 12px; background: var(--hy-card); border: 1px solid var(--hy-hairline); }
#main .hm-app .rf-eb { margin: 0; font-size: 12px; line-height: 16px; letter-spacing: 1.44px; text-transform: uppercase; color: var(--hy-muted); }
#main .hm-app .rf-body { margin: 8px 0 0; font-size: 15px; line-height: 22px; color: var(--hy-muted); }
#main .hm-app .rf-list { margin-top: 8px; border-top: 1px solid var(--hy-hairline); }
#main .hm-app .rf-row { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 12px 0; }
#main .hm-app .rf-row + .rf-row { border-top: 1px solid var(--hy-hairline); }
#main .hm-app .rf-row span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
#main .hm-app .rf-row b { font-weight: 600; font-size: 16px; line-height: 22px; color: var(--hy-ink); }
#main .hm-app .rf-row small { font-size: 15px; line-height: 22px; color: var(--hy-muted); }
#main .hm-app .rf-row i { font-style: normal; font-size: 22px; line-height: 24px; color: var(--hy-muted); }
#main .hm-app .rf-lead { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: var(--hy-muted); }
#main .hm-app .rf-fl { margin: 18px 0 8px; font-weight: 500; font-size: 14px; line-height: 20px; color: var(--hy-ink); }
#main .hm-app .rf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#main .hm-app .rf-chips span { display: grid; place-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--hy-hairline); background: var(--hy-sunk); font-weight: 500; font-size: 14px; color: var(--hy-ink); }
#main .hm-app .rf-chips .on { background: var(--color-pure-white); border-color: var(--color-pure-white); color: var(--hy-ground); }

/* The shared panes take two inks from the homepage's own sheet that a page
   without it does not have: the stepper value (atelier .mono would paint it
   sage) and the chart axis (an SVG text, inked by fill; color keeps the two in
   step for the contrast guards). */
#main .hm-app .rl-step b { color: var(--hy-ink); }
#main .hm-app .rp-axis { color: var(--hy-muted); }

/* ---------- 3. For your business: the ring cards ---------- */
#main .cp-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
#main .cp-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; padding: 28px 24px 22px; border-radius: 20px; background: var(--hy-card); border: 1px solid var(--hy-hairline); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 30px 60px -44px rgba(2, 8, 9, 0.9); }
#main .cp-card .pub-ring { width: 52px; height: 52px; margin-bottom: 14px; }
#main .cp-card h3 { margin: 0; font-family: var(--serif); font-weight: 300; font-size: 22px; line-height: 1.2; letter-spacing: -0.005em; color: var(--hy-ink); }
#main .cp-card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--hy-muted); }
#main .cp-card .pub-link { margin-top: auto; padding-top: 6px; font-size: 14px; color: var(--hy-aqua-hi); }

/* ---------- 4. For you: three console screens ---------- */
#main .cp-screens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: start; }
#main .cp-scr { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
#main .cp-scr .pub-console { max-width: none; margin-bottom: 26px; }
#main .cp-scr .pub-console-glass { aspect-ratio: 4 / 3; }
#main .cp-scr-h { margin: 0 0 8px; font-family: var(--serif); font-weight: 300; font-size: 26px; line-height: 1.15; color: var(--ink-primary); }
#main .cp-scr-p { margin: 0 0 4px; font-size: 16px; line-height: 1.5; color: var(--ink-secondary); }
/* The screens, in the console's 1120 point space: big enough to read at a third of the size. */
#main .cp-con { padding: 52px 60px; }
#main .cp-con .cn-eb { font-size: 30px; letter-spacing: 0.1em; }
#main .pub-console-app p.cp-hi { margin: 12px 0 30px; font-family: var(--serif); font-weight: 300; font-size: 84px; line-height: 1.05; color: var(--hy-ink); }
#main .cp-hi em { font-style: italic; color: var(--hy-aqua-hi); }
#main .pub-console-app p.cp-title { margin: 0 0 26px; font-family: var(--serif); font-weight: 300; font-size: 96px; line-height: 1; color: var(--hy-ink); }
#main .pub-console-app p.cn-eb { margin-bottom: 18px; }
#main .cp-rings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 30px; }
#main .cp-kr { position: relative; display: grid; justify-items: center; align-content: start; gap: 14px; padding: 24px 0 24px; border-radius: 22px; background: var(--hy-card); border: 1px solid color-mix(in srgb, var(--hy-edge) 60%, transparent); }
#main .cp-kr svg { width: 150px; height: 150px; overflow: visible; fill: none; }
#main .cp-kt { stroke: color-mix(in srgb, var(--hy-edge) 45%, transparent); stroke-width: 5; }
#main :is(.cp-ka, .cp-kl) { stroke: currentColor; stroke-linecap: round; stroke-dasharray: var(--p) 100; transform: rotate(-90deg); transform-origin: 36px 36px; }
#main .cp-ka { stroke-width: 5; }
#main .cp-kl { stroke-width: 14; stroke-opacity: 0.18; }
#main .cp-kr b { position: absolute; top: 24px; width: 150px; height: 150px; display: grid; place-items: center; font-family: var(--serif); font-weight: 300; font-size: 36px; color: var(--hy-ink); font-variant-numeric: tabular-nums lining-nums; }
#main .cp-kr span { font-family: var(--mono); font-weight: 500; font-size: 24px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hy-muted); }
#main .cp-sparkcard { padding: 26px 30px 20px; }
#main .cp-spark { width: 100%; height: 130px; margin-top: 14px; overflow: visible; }
#main .cp-sp-band { fill: var(--hy-aqua-hi); fill-opacity: 0.08; }
#main .cp-sp-lum { stroke: var(--hy-aqua-hi); stroke-opacity: 0.18; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
#main .cp-sp-line { stroke: var(--hy-aqua-hi); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
#main .cp-rows { padding: 0 32px; }
#main .cp-con .cn-row { min-height: 96px; gap: 24px; font-size: 36px; }
#main .cp-con .cn-row > span:not(.cp-av) { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#main .cp-con .cn-row b { font-weight: 500; font-size: 38px; line-height: 1.2; color: var(--hy-ink); }
#main .cp-con .cn-row small { font-size: 28px; line-height: 1.3; color: var(--hy-muted); }
#main .cp-con .cn-row em { font-style: normal; font-family: var(--serif); font-weight: 300; font-size: 48px; color: var(--hy-ink); font-variant-numeric: tabular-nums lining-nums; }
#main .pub-console-app p.cp-gap { margin-top: 28px; }
#main .cp-av { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--hy-sunk); border: 1px solid var(--hy-hairline); font-family: var(--mono); font-weight: 500; font-size: 24px; color: var(--hy-aqua-hi); }
#main .cp-con .cn-row em.cp-st { display: inline-grid; place-items: center; min-height: 56px; padding: 0 24px; border-radius: 999px; border: 2px solid var(--hy-hairline); font-family: var(--mono); font-weight: 500; font-size: 24px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hy-muted); }
#main .cp-con .cn-row em.cp-st.is-warn { border-color: color-mix(in srgb, var(--atelier-dark-amber) 60%, transparent); color: var(--atelier-dark-amber); }
/* Risk keeps its red meaning, lifted toward white so it reads on the dark card. */
#main .cp-con .cn-row em.cp-st.is-risk { border-color: color-mix(in srgb, var(--mz-status-risk) 45%, var(--color-pure-white) 0%); color: color-mix(in srgb, var(--mz-status-risk) 45%, var(--color-pure-white)); }
#main .cp-roster .cn-row { min-height: 118px; }

/* ---------- Phone first ---------- */
@media (max-width: 1100px) {
  #main .cp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  #main .cp-hero-grid { grid-template-columns: minmax(0, 1fr); }
  #main .cp-cells { max-width: 480px; }
  #main .cp-phones { grid-template-columns: minmax(0, 1fr); gap: 64px; }
  #main .cp-screens { grid-template-columns: minmax(0, 1fr); gap: 56px; max-width: 640px; }
}
@media (max-width: 767px) {
  #main .cp-cells { margin-top: 8px; }
  #main .cp-nm { font-size: 17px; }
  #main .cp-cards { grid-template-columns: minmax(0, 1fr); }
  #main .cp-ph .pub-device { width: 280px; --s: 0.6615; margin-bottom: 36px; }
}

/* =====================================================================
   MOTION. Everything below runs only when the visitor allows it.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* The six cells light clockwise from the top, a line draws to each name, the core brightens once. */
  .pub-armed #main .cp-cells:not(.is-in) .cp-cell { stroke-opacity: 0.1; }
  .pub-armed #main .cp-cells:not(.is-in) .cp-cell-lum { stroke-opacity: 0; }
  .pub-armed #main .cp-cells:not(.is-in) .cp-ln { stroke-dashoffset: 1; }
  .pub-armed #main .cp-cells:not(.is-in) .cp-nm { opacity: 0; }
  .pub-armed #main .cp-cells.is-in .cp-cell { animation: cp-kf-cell 420ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(500ms + var(--i) * 160ms); }
  .pub-armed #main .cp-cells.is-in .cp-cell-lum { animation: cp-kf-lum 520ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(500ms + var(--i) * 160ms); }
  .pub-armed #main .cp-cells.is-in .cp-ln { animation: pub-kf-draw1 640ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(620ms + var(--i) * 160ms); }
  .pub-armed #main .cp-cells.is-in .cp-nm { animation: pub-kf-fade 600ms ease both; animation-delay: calc(860ms + var(--i) * 160ms); }
  .pub-armed #main .cp-cells.is-in .cp-core-lum { animation: cp-kf-core 1200ms cubic-bezier(0.22, 1, 0.36, 1) 1700ms both; }
  /* The Train rings draw from twelve; the Fuel rows rise in. */
  .pub-armed #main .cp-pane-train:not(.is-in) :is(.rt-arc, .rt-lum) { stroke-dasharray: 0 100; }
  .pub-armed #main .cp-pane-train.is-in :is(.rt-arc, .rt-lum) { animation: pub-kf-ringp 1100ms cubic-bezier(0.22, 1, 0.36, 1) 300ms both; }
  /* The business cards rise, then each ring draws. */
  .pub-armed #main .cp-cards:not(.is-in) :is(.pub-ring-arc, .pub-ring-lum) { stroke-dasharray: 0 100; }
  .pub-armed #main .cp-cards.is-in :is(.pub-ring-arc, .pub-ring-lum) { animation: pub-kf-ring78 1100ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(400ms + var(--i) * 120ms); }
  /* The console screens: the rings draw, the line draws, the rows rise. */
  .pub-armed #main .cp-scr:not(.is-in) :is(.cp-ka, .cp-kl) { stroke-dasharray: 0 100; }
  .pub-armed #main .cp-scr.is-in :is(.cp-ka, .cp-kl) { animation: pub-kf-ringp 1100ms cubic-bezier(0.22, 1, 0.36, 1) 300ms both; }
  .pub-armed #main .cp-scr:not(.is-in) :is(.cp-sp-line, .cp-sp-lum) { stroke-dashoffset: 1; }
  .pub-armed #main .cp-scr:not(.is-in) .cp-sp-band { opacity: 0; }
  .pub-armed #main .cp-scr.is-in :is(.cp-sp-line, .cp-sp-lum) { animation: pub-kf-draw1 1400ms cubic-bezier(0.22, 1, 0.36, 1) 500ms both; }
  .pub-armed #main .cp-scr.is-in .cp-sp-band { animation: pub-kf-fade 1000ms ease 900ms both; }
}
@keyframes cp-kf-cell { from { stroke-opacity: 0.1; } to { stroke-opacity: 1; } }
@keyframes cp-kf-lum { from { stroke-opacity: 0; } to { stroke-opacity: 0.16; } }
@keyframes cp-kf-core { 0% { stroke-opacity: 0.3; } 45% { stroke-opacity: 0.75; } 100% { stroke-opacity: 0.3; } }