/* ============================================================
   OPTML for gyms — page-specific layout on top of ../styles.css
   (same tokens, type, buttons, nav, stats strip, download band, footer)
   ============================================================ */

.brand__tag{font-weight:400;color:var(--ink-3);font-size:.9rem;margin-left:.2em}

/* ---------- hero: copy + the live board ---------- */
.ghero{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(120px,16vw,170px) var(--pad) clamp(40px,6vw,70px);
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(30px,5vw,64px);align-items:center;
  position:relative;
}
.ghero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 50% at 72% 36%,rgba(var(--ember-rgb),.13),transparent 65%)}
.ghero__title{font-family:var(--sans);font-weight:600;letter-spacing:-.035em;line-height:1.02;
  font-size:clamp(2.2rem,4.6vw,3.7rem);margin-top:16px}
.ghero__accent{background:var(--grad-tagline);-webkit-background-clip:text;background-clip:text;color:transparent}
.ghero__sub{margin-top:20px;color:var(--ink-2);font-weight:300;font-size:clamp(1rem,1.5vw,1.14rem);max-width:52ch}
.ghero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}

/* ---------- the board ---------- */
.board{
  min-width:0;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;
  background:rgba(255,255,255,.03);box-shadow:var(--sh-card);font-size:.86rem;
}
.board__head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 16px;border-bottom:1px solid var(--line)}
.board__label{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--ink)}
.board__time{font-variant-numeric:tabular-nums;color:var(--ink-3);font-size:.8rem}
.ldot{width:8px;height:8px;border-radius:50%;background:var(--busy);box-shadow:0 0 0 3px rgba(251,77,109,.2);animation:blink 1.6s infinite}
.ldot--ok{background:var(--mint);box-shadow:0 0 0 3px rgba(52,226,122,.2)}
.ldot--chip{width:6px;height:6px;box-shadow:none;animation:none}
@keyframes blink{50%{opacity:.35}}

.board__mode{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;overflow:hidden;font-size:.8rem;position:relative}
.board__mode label{padding:5px 12px;cursor:pointer;color:var(--ink-3);transition:background .2s,color .2s}
.board__mode label:has(input:checked){background:rgba(var(--ember-rgb),.16);color:var(--ink)}
.board__mode input{position:absolute;opacity:0;pointer-events:none}
.board__mode label:has(input:focus-visible){outline:2px solid var(--ember);outline-offset:-2px}

.chart{padding:38px 16px 8px;border-bottom:1px solid var(--line);position:relative}
.chart__plot{display:grid;grid-template-columns:repeat(18,minmax(0,1fr));gap:4px;height:120px;align-items:end;position:relative}
.chart__plot::before{content:"";position:absolute;left:0;right:0;top:25%;border-top:1px dashed rgba(255,255,255,.1)}
.pbar{display:block;height:calc(var(--v)*1%);min-height:4px;background:#5a544e;border-radius:4px 4px 2px 2px;
  transition:height .35s var(--ease),background .2s}
.pbar.is-on{background:var(--ember);box-shadow:0 0 18px rgba(var(--ember-rgb),.45)}
.pbar.is-on.is-calm{background:var(--mint);box-shadow:0 0 18px rgba(52,226,122,.35)}
.chip{position:absolute;top:8px;left:0;transform:translateX(-50%);z-index:1;
  background:#141210;border:1px solid var(--line-2);border-radius:999px;padding:3px 10px;
  font-size:.74rem;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;color:var(--ink);
  transition:left .35s var(--ease)}
.chart__axis{display:grid;grid-template-columns:repeat(18,minmax(0,1fr));font-size:.66rem;color:var(--ink-3);margin-top:6px;text-align:center}
.chart__axis span.is-on{color:var(--ember-l);font-weight:600}

.scrub{padding:10px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;font-size:.78rem;color:var(--ink-3)}
.scrub input[type=range]{flex:1;min-width:0;accent-color:var(--ember)}

.floormap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:14px 16px}
.zone{border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0}
.zone__label{display:flex;justify-content:space-between;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.zone__tiles{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,30px));gap:6px}
.st{display:block;aspect-ratio:1;border-radius:7px;background:rgba(52,226,122,.14);border:1px solid rgba(52,226,122,.5);transition:background .25s,border-color .25s}
.st--busy{background:rgba(251,77,109,.16);border-color:rgba(251,77,109,.5)}
.st--soon{background:rgba(250,204,21,.14);border-color:rgba(250,204,21,.5)}
.st--xs{width:9px;aspect-ratio:auto;height:9px;border-radius:3px;display:inline-block}

.board__foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 16px;border-top:1px solid var(--line);font-size:.78rem;color:var(--ink-3)}
.legend{display:inline-flex;gap:14px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.board__stat{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}

/* ---------- the problem: churn math ---------- */
.cost{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,20px);
  border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,3vw,34px);
  background:var(--card);
}
.cost__step{text-align:center}
.cost__step b{display:block;font-family:var(--sans);font-weight:600;font-size:clamp(2rem,4vw,2.9rem);letter-spacing:-.03em;line-height:1.1;
  background:var(--grad-metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.cost__step b.cost__accent{background:var(--grad-tagline);-webkit-background-clip:text;background-clip:text}
.cost__step span{display:block;margin-top:6px;color:var(--ink-3);font-size:.86rem}
.cost__note{grid-column:1/-1;text-align:center;color:var(--ink-3);font-size:.86rem;margin-top:6px}

/* ---------- the fix: three steps + the app ---------- */
.fix{display:grid;grid-template-columns:minmax(0,1fr) clamp(220px,24vw,300px);gap:clamp(30px,6vw,80px);align-items:center}
.fix__steps{display:flex;flex-direction:column;gap:26px}
.step{display:flex;gap:18px;align-items:flex-start}
.step__n{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  color:var(--ember);background:rgba(var(--ember-rgb),.1);border:1px solid rgba(var(--ember-rgb),.3);
  font-weight:600;font-size:.95rem}
.step h3{font-family:var(--sans);font-weight:600;font-size:1.15rem;letter-spacing:-.01em}
.step p{margin-top:6px;color:var(--ink-2);font-weight:300;font-size:.98rem}
.step a{color:var(--ember-l);text-decoration:underline;text-underline-offset:3px}
.fix__phone{display:flex;justify-content:center}
.phone{width:100%;border-radius:34px;border:1px solid var(--line-2);box-shadow:var(--sh-card),0 0 0 1px rgba(0,0,0,.5)}

/* ---------- for owners: console + cards ---------- */
.owners{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(16px,2.5vw,28px);align-items:start}
.console{border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:rgba(255,255,255,.03);box-shadow:var(--sh-card);font-size:.86rem}
.console__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)}
.console__stats span{padding:14px 10px;text-align:center;border-right:1px solid var(--line);color:var(--ink-3);font-size:.78rem}
.console__stats span:last-child{border-right:0}
.console__stats b{display:block;font-family:var(--sans);font-weight:600;font-size:1.5rem;letter-spacing:-.03em;color:var(--ink)}
.crow{display:flex;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.crow:last-child{border-bottom:0}
.crow b{display:block;font-weight:500;color:var(--ink)}
.crow small{color:var(--ink-3);font-size:.8rem}
.crow em{font-style:normal;color:var(--ink-3);font-variant-numeric:tabular-nums;font-size:.8rem;flex:none}
.owners__cards{display:grid;gap:clamp(12px,1.6vw,18px)}
.ocard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.4vw,26px)}
.ocard h3{font-family:var(--sans);font-weight:600;font-size:1.12rem;letter-spacing:-.01em}
.ocard p{margin-top:6px;color:var(--ink-2);font-weight:300;font-size:.96rem}
.ocard a{color:var(--ember-l)}

/* ---------- responsive ---------- */
@media (max-width:920px){
  .ghero{grid-template-columns:minmax(0,1fr);padding-top:110px}
  .fix{grid-template-columns:minmax(0,1fr)}
  .fix__phone{order:-1}
  .fix__phone .phone{width:min(70%,280px)}
  .owners{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .cost{grid-template-columns:minmax(0,1fr)}
  .zone__tiles{grid-template-columns:repeat(var(--cols,4),minmax(0,26px))}
  .chart__axis span:nth-child(even){visibility:hidden}   /* every other hour label on narrow screens */
}
@media (prefers-reduced-motion:reduce){
  .ldot{animation:none}
  .pbar,.chip,.st{transition:none}
}