/* Ladder: "Behind the call" explainer. Uses the site tokens from site.css.
   Default styles are the finished picture (no JavaScript, reduced motion, after it plays).
   .ex--armed (added by explainer.js) holds the start state until each part plays. */

.ex {
  --ex-card: var(--navy-2, #131e30);
  --ex-line: var(--line-dark, #25344d);
  --ex-line-2: #2f4263;
  --ex-muted: var(--on-dark-muted, #b3bed0);
  --ex-accent: var(--accent, #ff7a1a);
  --ex-spine: 20px;
  background: var(--paper-2, #f3f5f8);
}
.ex p { margin: 0; }
.ex .eyebrow { font-size: 0.875rem; }
.ex .ex-head { margin-bottom: 28px; }

/* Stage */

.ex-stage {
  position: relative;
  isolation: isolate;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid var(--navy-3, #1c2a42);
  background-color: var(--navy, #0b1320);
  background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1.2px);
  background-size: 22px 22px;
  background-position: 11px 11px;
  color: var(--ex-muted);
  font-size: 0.9375rem;
  line-height: 1.45;
  box-shadow: 0 40px 80px -48px rgba(11,19,32,.7);
}
.ex-stage > :not(.ex-wires) { position: relative; z-index: 1; min-width: 0; }
.ex-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ex-grid > * { min-width: 0; }
.ex-stage :focus-visible { outline-color: var(--ex-accent); }
.ex-stage h3, .ex-stage h4 { color: var(--on-dark, #fff); margin: 0; letter-spacing: -0.01em; }

.ex-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
  fill: none;
}
.ex-wire path { stroke-linecap: round; stroke-linejoin: round; }
.ex-wire .w-base { stroke: var(--ex-line); stroke-width: 2; }
.ex-wire .w-lit { stroke: rgba(255,122,26,.62); stroke-width: 2; stroke-linecap: butt; stroke-dasharray: 100 100; }
.ex-wire .w-head { stroke: #ffd3b0; stroke-width: 4; stroke-dasharray: 7 200; opacity: 0; }
.ex--armed .ex-wire:not(.on) .w-lit { visibility: hidden; }
.ex--armed .ex-wire:not(.on) { visibility: hidden; }   /* decorative: each wire shows when its step starts */

/* Label and controls. While it plays, the control stays in view (below the site header) so the motion
   can be stopped from the first frame to the last (WCAG 2.2.2). */

.ex-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ex-muted);
}
.ex-label::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ex-accent);
  flex: none;
}
.ex-ctrl {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  margin-bottom: 8px;
  pointer-events: none;
}
.ex-stage > .ex-ctrl { z-index: 3; }
.ex--armed .ex-stage > .ex-ctrl {
  position: sticky;
  top: calc(var(--header-h, 0px) + env(safe-area-inset-top, 0px) + 10px);
}
.ex-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.34);
  background: var(--navy, #0b1320);
  color: var(--on-dark, #fff);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 750;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.7);
  transition: border-color .2s ease, background-color .2s ease;
}
.ex-btn:hover { border-color: #fff; background: var(--navy-3, #1c2a42); }
.ex-btn svg { width: 16px; height: 16px; flex: none; }
.ex-btn[hidden] { display: none; }
.ex-skip svg { color: var(--ex-accent); }

/* Caller */

.ex-caller {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--ex-card);
  border: 1px solid var(--ex-line);
}
.ex-caller-icon {
  position: relative;
  width: 42px; height: 42px;
  flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ex-accent);
  color: var(--navy, #0b1320);
}
.ex-caller-icon svg { width: 19px; height: 19px; }
.ex-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--ex-accent);
  opacity: 0;
}
.ex-caller-text { display: flex; flex-direction: column; line-height: 1.25; }
.ex-caller-text strong { color: #fff; font-size: 1rem; }
.ex-caller-text span { font-size: 0.875rem; }
.ex-caller-chip {
  margin-left: auto !important;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: #d0d8e4;
  font-size: 0.875rem;
}

/* Hub: Ladder, the foreman */

.ex-hub {
  padding: 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, #18253b, var(--ex-card));
  border: 1px solid #33466a;
  transition: border-color .4s ease, box-shadow .4s ease;
}
.ex-hub.is-on { border-color: var(--ex-accent); box-shadow: 0 0 0 4px rgba(255,122,26,.14), 0 18px 40px -20px rgba(255,122,26,.45); }
.ex-hub-top { display: flex; align-items: center; gap: 12px; }
.ex-hub-mark { width: 42px; height: 42px; flex: none; }
.ex-hub-mark svg { width: 42px; height: 42px; border-radius: 11px; }
.ex-hub-text { display: flex; flex-direction: column; line-height: 1.25; }
.ex-hub-text strong { color: #fff; font-size: 1.25rem; font-weight: 850; letter-spacing: -0.02em; }
.ex-hub-text span { font-size: 0.9375rem; }
.ex-ticker {
  display: flex;
  align-items: flex-start;   /* text starts at the top of its two-line box, so a change of length never moves it */
  gap: 10px;
  margin-top: 12px !important;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--navy, #0b1320);
  border: 1px solid var(--ex-line);
}
.ex-ticker-dot {
  width: 8px; height: 8px;
  margin-top: 6px;
  flex: none;
  border-radius: 50%;
  background: #33d17a;
  box-shadow: 0 0 0 3px rgba(51,209,122,.2);
}
.ex-ticker-mask {
  display: flex;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
  min-height: 2.7em;
  overflow: hidden;
}
.ex-ticker-text { display: block; color: #fff; font-weight: 700; font-size: 0.9375rem; line-height: 1.35; }

/* The six specialists */

.ex-steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
/* No-JavaScript spine through the numbers. explainer.js swaps it for drawn wires. */
.ex-steps::before {
  content: "";
  position: absolute;
  left: calc(var(--ex-spine) - 1px);
  top: 20px; bottom: 20px;
  width: 2px;
  background: rgba(255,122,26,.62);
}
.ex--wired .ex-steps::before { display: none; }

.ex-step {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
}
.ex-num {
  position: relative;
  z-index: 1;
  width: 40px; height: 40px;
  margin-top: 8px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ex-accent);
  color: var(--navy, #0b1320);
  border: 3px solid var(--navy, #0b1320);
  font-weight: 900;
  font-size: 1rem;
  transition: background-color .35s ease, color .35s ease, box-shadow .35s ease;
}
.ex-card {
  padding: 11px 14px 13px;
  border-radius: 16px;
  background: var(--ex-card);
  border: 1px solid var(--ex-line-2);
  transition: border-color .35s ease, box-shadow .35s ease;
}
.ex-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 1.0625rem;
  line-height: 1.3;
  font-weight: 800;
  transition: color .35s ease;
}
.ex-ico { width: 18px; height: 18px; flex: none; color: var(--ex-accent); }
.ex-desc { margin-top: 2px !important; color: var(--ex-muted); }
.ex-out { margin-top: 10px !important; }

.ex-tag {
  display: inline-block;
  padding: 1px 9px;
  border-radius: 999px;
  background: rgba(255,122,26,.14);
  color: #ffc49b;
  font-size: 0.875rem;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.45;
}

.ex-wave { display: inline-flex; align-items: center; gap: 2px; height: 18px; }
.ex-wave i { display: block; width: 3px; height: 100%; border-radius: 2px; background: var(--ex-accent); transform-origin: 50% 50%; }
.ex-wave i:nth-child(1), .ex-wave i:nth-child(5) { transform: scaleY(.35); }
.ex-wave i:nth-child(2), .ex-wave i:nth-child(4) { transform: scaleY(.7); }

.ex-say, .ex-heard {
  width: fit-content;
  max-width: 100%;
  padding: 8px 12px;
  border-radius: 14px;
  line-height: 1.4;
}
.ex-say { background: var(--ex-accent); color: var(--navy, #0b1320); font-weight: 650; border-bottom-left-radius: 5px; }
.ex-heard { background: var(--navy-3, #1c2a42); color: #e6ebf2; border-bottom-left-radius: 5px; }
.ex-who { font-weight: 800; color: #fff; }

.ex-boxes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 0;
}
.ex-box {
  min-width: 0;
  padding: 6px 10px 7px;
  border-radius: 10px;
  background: var(--navy, #0b1320);
  border: 1px solid var(--ex-line-2);
  transition: border-color .35s ease;
}
.ex-box dt { font-size: 0.875rem; color: var(--ex-muted); line-height: 1.3; }
.ex-box dd { margin: 0; color: #fff; font-weight: 700; line-height: 1.35; min-height: 1.35em; }

.ex-diary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.ex-diary .ex-out { margin-top: 0 !important; color: #fff; font-weight: 700; }
.ex-days {
  position: relative;
  display: inline-grid;
  grid-template-columns: repeat(5, 40px);
  padding: 3px;
  border-radius: 10px;
  background: var(--navy, #0b1320);
  border: 1px solid var(--ex-line-2);
}
.ex-days i {
  position: relative;
  z-index: 1;
  font-style: normal;
  font-size: 0.875rem;
  line-height: 28px;
  text-align: center;
  border-radius: 7px;
  color: var(--ex-muted);
  transition: background-color .3s ease, color .3s ease;
}
.ex-days i.ex-free { background: var(--ex-accent); color: var(--navy, #0b1320); font-weight: 800; }
.ex-scan {
  position: absolute;
  left: 3px; top: 3px;
  width: 40px; height: 28px;
  border-radius: 7px;
  border: 2px solid var(--ex-accent);
  opacity: 0;
}

.ex-stage .booked { margin-top: 0; font-size: 0.875rem; }
.ex-sent { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; }
.ex-sent svg { width: 18px; height: 18px; color: var(--ex-accent); }

/* The owner's phone */

.ex-phone-card {
  background: var(--phone, #131d30);
  color: #e6ebf2;
  border: 1px solid #2c3d5a;
  border-radius: 26px;
  padding: 12px 12px 14px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.8);
}
.ex-phone-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 2px 6px 10px;
  border-bottom: 1px solid var(--ex-line);
  font-size: 0.875rem;
}
.ex-phone-top b { color: #fff; }
.ex-phone-status { display: grid; margin-left: auto; text-align: right; }
.ex-phone-status > span { grid-area: 1 / 1; }
.ex-phone-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ex-accent); flex: none; }
.ex-phone-wait { visibility: hidden; }
.ex-phone-body { padding: 12px 0 2px; }
.ex-stage .sms-head span { font-size: 0.875rem; }
.ex-sms .booked { margin-top: 10px; padding-inline: 10px; gap: 6px; }
.ex-note { margin-top: 10px !important; font-size: 0.875rem; }

/* ---------- Start state and live states (explainer.js) ---------- */

/* Progressive: while it plays, only the caller, Ladder and the controls show. Each specialist and your
   phone appear as their step starts. They are clipped, never removed, so the layout never moves and
   screen readers always have the whole list. Finished steps settle down while the next one plays. */
.ex--armed .ex-step:not(.is-lit) > *,
.ex--armed .ex-phone:not(.is-shown) > * { clip-path: inset(0 0 100% 0); }
.ex--armed .ex-step.is-lit:not(.is-on) .ex-card { background: transparent; }

.ex--armed .ex-step:not(.is-lit) .ex-num { background: var(--navy, #0b1320); color: var(--ex-muted); box-shadow: inset 0 0 0 2px #3a4c6b; }
.ex--armed .ex-step:not(.is-lit) .ex-card { border-color: var(--ex-line); }
.ex--armed .ex-step:not(.is-lit) .ex-name { color: var(--ex-muted); }
.ex--armed .ex-box:not(.is-in) { border-style: dashed; border-color: #3a4c6b; }
.ex--armed .ex-days i.ex-free:not(.is-in) { background: none; color: var(--ex-muted); font-weight: 400; }
.ex--armed .ex-r:not(.is-in) { clip-path: inset(0 100% 0 0); }
.ex--armed .ex-phone:not(.is-lit) .ex-phone-new { opacity: 0; }
.ex--armed .ex-phone:not(.is-lit) .ex-phone-wait { visibility: visible; }
.ex--armed .ex-phone:not(.is-lit) .ex-sms { clip-path: inset(0 0 100% 0); }
.ex--armed .ex-phone:not(.is-lit) .ex-phone-dot { background: #3a4c6b; }

.ex-step.is-on .ex-card { border-color: var(--ex-accent); box-shadow: 0 0 0 3px rgba(255,122,26,.16); }
.ex-step.is-on .ex-num { box-shadow: 0 0 0 5px rgba(255,122,26,.22); }

/* Skip: jump to the result without transitions */
.ex--snap *, .ex--snap *::before, .ex--snap *::after { transition: none !important; }

/* ---------- Larger screens ---------- */

@media (max-width: 599.98px) {
  .ex-boxes { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ex-box { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); align-items: baseline; column-gap: 8px; padding: 5px 10px; }
}

@media (min-width: 600px) {
  .ex-stage { padding: 24px; border-radius: 28px; }
  .ex-grid { gap: 18px; }
  .ex-ctrl { height: 0; margin: 0; }
  .ex-boxes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ex-phone { max-width: 420px; }
}

@media (min-width: 900px) {
  .ex .ex-head { margin-bottom: 40px; }
}

/* Wide screens: caller and Ladder on the left, the specialists fan out in the middle, your phone on the right.
   The stage grows a little past the page column when there is room. */
@media (min-width: 1100px) {
  .ex-stage {
    --ex-w: max(100%, min(100vw - 64px, 1320px));
    margin-inline: calc((100% - var(--ex-w)) / 2);
    padding: 32px 40px;
  }
  .ex-grid {
    grid-template-columns: minmax(220px, 240px) minmax(0, 1fr) 310px;
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      "label  steps phone"
      "caller steps phone"
      "hub    steps phone"
      ".      steps phone";
    column-gap: 64px;
    row-gap: 16px;
  }
  .ex-label { grid-area: label; min-height: 0; }
  .ex-caller { grid-area: caller; }
  .ex-hub { grid-area: hub; }
  .ex-steps { grid-area: steps; gap: 8px; }
  .ex-phone { grid-area: phone; align-self: center; max-width: none; }
  .ex-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-caller-chip { margin-left: 0 !important; }
  .ex-card { padding: 10px 14px 12px; }
  .ex-phone-body .sms { padding: 12px; }
  .ex-days { grid-template-columns: repeat(5, 36px); }
  .ex-scan { width: 36px; }
}

@media (min-width: 1300px) {
  .ex-grid { grid-template-columns: 250px minmax(0, 1fr) 320px; }
  .ex-box { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
}

@media (max-width: 380px) {
  .ex { --ex-spine: 16px; }
  .ex-stage { padding: 12px; border-radius: 20px; }
  .ex-step { grid-template-columns: 32px minmax(0, 1fr); column-gap: 8px; }
  .ex-num { width: 32px; height: 32px; font-size: 0.9375rem; border-width: 2px; }
  .ex-card { padding: 10px 12px 12px; }
  .ex-box { grid-template-columns: 4.2em minmax(0, 1fr); padding: 5px 8px; }
  .ex-days { grid-template-columns: repeat(5, 32px); padding: 2px; }
  .ex-scan { width: 32px; left: 2px; top: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .ex *, .ex *::before, .ex *::after { transition: none !important; animation: none !important; }
}