/* Operator page (pilot.html) — sections around the payback model.
   One motion gesture per section; all loops respect reduced-motion. */

.op-head { text-align: center; margin-bottom: 40px; }
.op-head h2 { margin: 0; }
.op-lede { font-size: 17px; line-height: 1.6; color: var(--c-text-70); }

/* ---- Hero: the timetable slot ---- */
.op-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
.op-hero h1 { margin-bottom: 22px; }
.op-hero .op-lede { max-width: 460px; margin-bottom: 30px; }
.op-tt { background: var(--c-bg-light); border: 1px solid var(--c-text-15); border-radius: 16px; overflow: hidden; }
.op-tt__head { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--c-text-15); }
.op-tt__head span {
  padding: 12px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-55);
}
.op-tt__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.op-tt__cell {
  min-height: 52px;
  border-top: 1px solid var(--c-text-08);
  border-right: 1px solid var(--c-text-08);
  padding: 9px 10px;
  font-size: 11px;
  color: var(--c-text-55);
}
.op-tt__cell--bbt {
  background: var(--c-copper);
  color: #fff;
  font-weight: 600;
  font-size: 11.5px;
  animation: op-slot 3.2s ease-in-out infinite;
}
@keyframes op-slot {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(255, 248, 238, 0); }
  50% { box-shadow: inset 0 0 0 2px rgba(255, 248, 238, 0.6); }
}

/* ---- A class that earns its place: timetable cards ---- */
.op-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1060px; margin: 0 auto; }
.op-card {
  background: var(--c-bg-light);
  border: 1px solid var(--c-text-15);
  border-left: 4px solid var(--c-copper);
  border-radius: 12px;
  padding: 26px 24px 28px;
  transition: background 0.5s ease, box-shadow 0.5s ease;
}
.op-card__kick {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-55);
  display: block;
  margin-bottom: 12px;
}
.op-card h3 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(19px, 2vw, 24px);
  letter-spacing: -0.008em;
  margin: 0 0 10px;
}
.op-card p { font-size: 15px; line-height: 1.6; color: var(--c-text-70); margin: 0; }
.op-card.hot { background: #fff; box-shadow: 0 18px 36px -22px rgba(201, 105, 42, 0.45); }

/* ---- Built for your gym floor: drawn icons ---- */
.op-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1060px; margin: 0 auto; }
.op-tile {
  background: var(--c-bg-light);
  border: 1px solid var(--c-text-08);
  border-radius: 16px;
  padding: 30px 26px;
  text-align: center;
}
.op-tile__icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--c-text-15);
}
.op-tile__icon svg {
  width: 30px;
  height: 30px;
  stroke: var(--c-copper);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.op-tile__icon svg * {
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
  animation: op-draw 5.5s ease-in-out infinite;
}
@keyframes op-draw {
  12%, 70% { stroke-dashoffset: 0; }
  92%, 100% { stroke-dashoffset: 70; }
}
.op-tile h3 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(19px, 2vw, 23px);
  letter-spacing: -0.008em;
  margin: 0 0 10px;
}
.op-tile p { font-size: 15px; line-height: 1.6; color: var(--c-text-70); margin: 0; }

/* ---- Ghost words (base .ghost styles live in components.css) ---- */
.ghost--floor { top: 54px; right: -70px; }
.ghost--pilot { bottom: 30px; left: -50px; }

/* ---- The Founding Operator Pilot: the invitation ---- */
.op-invite { max-width: 720px; margin: 0 auto; }
.op-invite__card {
  background: var(--c-bg-light);
  border: 1px solid var(--c-text-15);
  border-radius: 4px;
  padding: clamp(40px, 5vw, 64px);
  position: relative;
  box-shadow: 0 30px 60px -34px rgba(32, 14, 3, 0.45);
}
.op-invite__card::before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--c-text-08); pointer-events: none; }
.op-invite__seal {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c-copper);
  margin: 0 auto 26px;
  animation: op-seal 4s ease-in-out infinite;
}
@keyframes op-seal {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 105, 42, 0.35); }
  50% { box-shadow: 0 0 0 8px rgba(201, 105, 42, 0); }
}
.op-invite__card h2 { text-align: center; font-size: clamp(26px, 3vw, 36px); margin: 0 0 24px; }
.op-invite__card .op-lede { text-align: center; margin: 0 0 16px; }
.op-invite__motto {
  text-align: center;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(18px, 2vw, 23px);
  color: var(--c-text);
  margin: 26px 0 0;
}

/* ---- Model section head ---- */
.op-model-head { text-align: center; margin-bottom: 44px; }
.op-model-head h2 { margin: 0 0 12px; }
.op-model-head .op-lede { max-width: 540px; margin: 0 auto; }

/* ---- Model section, compact: head + payback fit one screen.
   Same vh-scaling the old one-screen page used, scoped to this section. ---- */
.op-model { padding: clamp(36px, 5vh, 60px) 0; }
.op-model .op-model-head { margin-bottom: clamp(16px, 2.6vh, 28px); }
.op-model .op-model-head h2 { font-size: clamp(24px, 3.6vh, 40px); }
.op-model .op-model-head .op-lede { font-size: clamp(14px, 1.9vh, 17px); }
.op-model .payback { padding: clamp(14px, 2.2vh, 30px) clamp(20px, 2.6vw, 40px) clamp(10px, 1.8vh, 24px); }
.op-model .payback__head { padding-bottom: clamp(6px, 1vh, 12px); margin-bottom: clamp(9px, 1.7vh, 20px); }
.op-model .payback__answer { margin-top: 0; padding-top: 0; border-top: 0; }
.op-model .payback__lede { font-size: clamp(15px, 1.9vh, 20px); margin-bottom: 2px; }
.op-model .payback__weeks { font-size: clamp(40px, 7.4vh, 76px); }
.op-model .payback__verdict-lead { font-size: clamp(20px, 3vh, 30px); }
.op-model .payback__verdict-sub { font-size: 13px; margin-top: 6px; }
.op-model .payback__year {
  --pb-tier: clamp(23px, 3.2vh, 34px);
  height: calc(24px + var(--pb-tier) * 3 + 16px);
  margin: clamp(6px, 1.3vh, 18px) 0 0;
}
.op-model .pb-flag--strong  { top: calc(24px + var(--pb-tier) * 0.6); }
.op-model .pb-flag--typical { top: calc(24px + var(--pb-tier) * 1.6); }
.op-model .pb-flag--quiet   { top: calc(24px + var(--pb-tier) * 2.6); }
.op-model .pb-stem[data-pb="stem-strong"]  { height: calc(var(--pb-tier) * 0.6) !important; }
.op-model .pb-stem[data-pb="stem-typical"] { height: calc(var(--pb-tier) * 1.6) !important; }
.op-model .pb-stem[data-pb="stem-quiet"]   { height: calc(var(--pb-tier) * 2.6) !important; }
.op-model .pb-flag__val { font-size: clamp(17px, 2.4vh, 22px); }
.op-model .payback__controls {
  margin-top: clamp(9px, 1.8vh, 22px);
  padding-top: clamp(8px, 1.5vh, 18px);
  gap: clamp(8px, 1.4vh, 16px) clamp(24px, 3vw, 40px);
}
.op-model .pb-ctrl__head { margin-bottom: clamp(2px, 0.5vh, 8px); }
.op-model .pb-ctrl__label { font-size: clamp(11px, 1.4vh, 13px); }
.op-model .pb-ctrl__val { font-size: clamp(15px, 2vh, 18px); }
.op-model .pb-ctrl__input { height: clamp(20px, 2.8vh, 28px); }
.op-model .payback__foot { margin-top: clamp(8px, 1.5vh, 18px); padding-top: clamp(8px, 1.3vh, 16px); }
.op-model .payback__key { font-size: clamp(11px, 1.4vh, 13px); line-height: 1.45; }

/* ---- Payback affordance: sliders look and feel draggable ---- */
.op-model .pb-ctrl__input { cursor: grab; }
.op-model .pb-ctrl__input:active { cursor: grabbing; }
@keyframes pb-halo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(44, 168, 152, 0); }
  50% { box-shadow: 0 0 0 8px rgba(44, 168, 152, 0.25); }
}
.op-model .payback.pb-nudge .pb-ctrl__input::-webkit-slider-thumb { animation: pb-halo 2.2s ease-in-out infinite; }
.op-model .payback.pb-nudge .pb-ctrl__input::-moz-range-thumb { animation: pb-halo 2.2s ease-in-out infinite; }
@keyframes pb-chip {
  0%, 100% { color: inherit; }
  50% { color: var(--c-accent); }
}
.op-model .payback.pb-nudge .pb-ctrl__val { animation: pb-chip 2.2s ease-in-out infinite; }

/* ---- Close: dark, with the 15-minute chip ---- */
.section--ink { background: var(--c-text); }
.op-close {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(30px, 4vw, 60px);
  align-items: center;
}
.op-close h2 { color: var(--c-bg-light); margin: 0 0 16px; }
.op-close .op-lede { color: rgba(255, 248, 238, 0.72); margin: 0 0 28px; }
.op-close .btn { background: var(--c-bg-light); color: var(--c-text); border-color: var(--c-bg-light); }
.op-close .btn:hover { background: #fff; }
.op-chip {
  background: var(--c-bg-light);
  border: 1px solid var(--c-text-15);
  border-radius: 18px;
  padding: 38px 30px;
  text-align: center;
}
.op-chip__ring {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 1.5px solid var(--c-text-15);
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  position: relative;
}
.op-chip__ring::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-top-color: var(--c-copper);
  animation: op-tick 4s linear infinite;
}
@keyframes op-tick { to { transform: rotate(360deg); } }
.op-chip__ring b { font-family: var(--f-display); font-weight: 500; font-size: 22px; color: var(--c-text); }
.op-chip span {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-55);
  font-weight: 600;
}

@media (max-width: 820px) {
  .op-hero, .op-close { grid-template-columns: 1fr; }
  .op-cards, .op-tiles { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .op-tt__cell--bbt, .op-tile__icon svg *, .op-invite__seal, .op-chip__ring::after,
  .op-model .payback.pb-nudge .pb-ctrl__input::-webkit-slider-thumb,
  .op-model .payback.pb-nudge .pb-ctrl__input::-moz-range-thumb,
  .op-model .payback.pb-nudge .pb-ctrl__val { animation: none !important; }
  .op-tile__icon svg * { stroke-dashoffset: 0; }
}