/* ===========================================================
   rental.css — Equipment Rental page.
   Reuses page.css for the shared blocks (hero, cards, pricing
   tiers, FAQ, CTA band). Adds the page's bespoke element: the
   counter-day timeline.

   The wireframe's hero "utilization motif" (named machines with
   live statuses and a 64% bar) is deliberately NOT built. It
   invents live-looking client figures, which hard rule 2 bans,
   and its ILLUSTRATIVE stamp is itself a caveat-flagging
   treatment that CONTENT_CHARTER.md rules out. Replaced with an
   honest process loop carrying no numbers — the same pattern the
   CRM/ERP hero already uses for the same reason.
   =========================================================== */

/* ===========================================================
   Bespoke: the counter day
   A 7am-6pm rail with pins alternating above and below. Each pin
   is a moment plus what it costs. Belongs to this page only — a
   counter day is the buyer's actual unit of time.
   =========================================================== */

.rt-day {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: 40px;
}
.rt-day-head {
  font-family: var(--font-sans); font-weight: 800;
  font-size: clamp(26px, 3.2vw, 46px);
  letter-spacing: -0.035em; line-height: 1.05;
  color: var(--gray-deep);
  max-width: 18ch;
  margin: 6px 0 8px;
}
.rt-day-sub {
  font-size: 16px; line-height: 1.6; color: var(--gray);
  max-width: 60ch; margin-bottom: 54px;
}

/* Desktop: horizontal rail. Falls back to a vertical list below 900px,
   where a horizontal timeline stops being readable. */
.rt-rail {
  position: relative;
  margin: 0 0 18px;
  padding: 150px 0;
}
.rt-rail::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; background: var(--bone-deep);
}
/* The lit portion of the day. Static width — it marks the working
   day, it is not a progress or utilisation figure. */
.rt-rail::after {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 100%; height: 2px; background: var(--orange);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.4s var(--ease-out);
}
/* scroll.js puts .is-revealed on the [data-reveal] element, which is
   .rt-day — not the rail itself. */
.rt-day.is-revealed .rt-rail::after { transform: scaleX(1); }

.rt-hours {
  display: flex; justify-content: space-between;
  position: absolute; left: 0; right: 0; top: calc(50% + 16px);
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--line-muted);
  pointer-events: none;
}

.rt-pin {
  position: absolute;
  top: 50%;
  width: 190px;
  margin-left: -95px;
  text-align: center;
}
.rt-pin-dot {
  width: 11px; height: 11px;
  background: var(--paper);
  border: 2px solid var(--orange);
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -50%);
}
.rt-pin-body { position: absolute; left: 0; right: 0; }
.rt-pin-stem {
  position: absolute; left: 50%; width: 1px;
  background: var(--rule-strong);
}
/* Above the rail */
.rt-pin.up .rt-pin-body { bottom: 26px; }
.rt-pin.up .rt-pin-stem { bottom: 0; height: 26px; }
/* Below the rail. Offset further than the up-pins so the pin text clears
   the hour labels, which sit just beneath the rail at +16px. */
.rt-pin.down .rt-pin-body { top: 50px; }
.rt-pin.down .rt-pin-stem { top: 0; height: 50px; }

.rt-pin-moment {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 14px; line-height: 1.3; letter-spacing: -0.01em;
  color: var(--gray-deep);
  margin-bottom: 5px;
}
.rt-pin-cost {
  font-family: var(--font-mono);
  font-size: 10.5px; line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--gray);
}

/* Mobile: the rail becomes a vertical list with the same content. */
@media (max-width: 900px) {
  .rt-day { padding-left: 0; }
  .rt-rail { padding: 0; }
  .rt-rail::before, .rt-rail::after { display: none; }
  .rt-hours { display: none; }
  .rt-pin {
    position: static;
    width: auto; margin: 0 0 2px;
    text-align: left;
    border-left: 2px solid var(--bone-deep);
    padding: 14px 0 14px 20px;
  }
  .rt-pin:first-of-type { border-left-color: var(--orange); }
  .rt-pin-dot,
  .rt-pin-stem { display: none; }
  .rt-pin-body { position: static; }
  .rt-pin.up .rt-pin-body,
  .rt-pin.down .rt-pin-body { top: auto; bottom: auto; }
}

/* Hard rule 5 — the rail fill is motion, so it degrades to its
   resting end-state rather than animating. */
@media (prefers-reduced-motion: reduce) {
  .rt-rail::after { transition: none; transform: scaleX(1); }
}


/* ===========================================================
   Hero process loop — capability, no figures
   =========================================================== */

.rt-loop {
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  position: relative;
}
.rt-loop::before {
  content: ''; position: absolute;
  top: -6px; left: -6px; right: 6px; bottom: 6px;
  border: 1px solid var(--orange);
  z-index: -1;
}
.rt-loop-head {
  padding: 13px 16px;
  border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gray);
}
.rt-loop-body { padding: 22px 16px 24px; }
.rt-step {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 0;
  border-bottom: 1px dashed var(--rule);
}
.rt-step:last-child { border-bottom: none; }
.rt-step-mark {
  width: 26px; height: 26px; flex-shrink: 0;
  border: 1px solid var(--rule-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  color: var(--gray);
}
.rt-step-text {
  font-size: 14px; line-height: 1.4;
  color: var(--gray-deep);
}
/* One step lights at a time, cycling. No counts, no percentages,
   nothing that could read as a client's live numbers. */
.rt-step.is-lit .rt-step-mark {
  background: var(--orange); border-color: var(--orange); color: var(--paper);
}
.rt-loop .rt-step:nth-child(1) { animation: rt-cycle 8s infinite 0s; }
.rt-loop .rt-step:nth-child(2) { animation: rt-cycle 8s infinite 2s; }
.rt-loop .rt-step:nth-child(3) { animation: rt-cycle 8s infinite 4s; }
.rt-loop .rt-step:nth-child(4) { animation: rt-cycle 8s infinite 6s; }
@keyframes rt-cycle {
  0%, 18%  { background: color-mix(in srgb, var(--orange) 7%, transparent); }
  25%, 100% { background: transparent; }
}
.rt-loop-foot {
  padding: 13px 16px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.1em;
  color: var(--gray);
}

@media (prefers-reduced-motion: reduce) {
  .rt-loop .rt-step { animation: none !important; background: transparent; }
}