/* ==========================================================================
   Sales Systems page only (sales-systems.html, _build/sales_page.py,
   behaviour in assets/sales.js). Loaded after signals.css, paid.css and
   organic.css, which supply the hero card, icon tabs, panels, marquee, pill
   toggle and scope builder. Same outbound-style vocabulary throughout.
   ========================================================================== */

#system { padding-bottom: clamp(36px, 4.5vw, 60px); }

/* ---- hero: one enquiry, every channel ------------------------------------ */
.pd-hero__stage { height: 430px; }
/* the tab icons here are stroke icons, not filled marks */
.pd-hero__tab svg.stroke, .pd-tab__ico svg.stroke { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rs-clock em { font-style: normal; }
.rs-u { position: relative; max-width: 350px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 14px 34px -14px rgba(0, 0, 0, .22); overflow: hidden; }
.rs-clock {
  position: absolute; top: 10px; right: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 100px;
  background: rgba(226, 82, 15, .1); border: 1px solid rgba(226, 82, 15, .4); font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #B4400A;
}
.rs-clock i { width: 7px; height: 7px; border-radius: 50%; background: #E2520F; }
.pd-hero__unit.is-on .rs-clock i { animation: rs-blink 1.2s steps(2) infinite; }
@keyframes rs-blink { 50% { opacity: .25; } }
/* the brand's monogram */
.rs-auto__from i, .rs-chat__bar i, .rs-mail__them i {
  display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 11px;
  background: conic-gradient(from 200deg, #E2520F, #F2C230, #7FB8F0, #2F5BD3, #E2520F);
}
.rs-mail__them i { width: 30px; height: 30px; font-size: 13px; background: #8C95A0; }

.rs-form__bar { display: grid; gap: 1px; padding: 12px 14px 10px; padding-right: 130px; border-bottom: 1px solid #eee; }
.rs-form__bar b { font-size: 13.5px; }
.rs-form__bar small { font-size: 11px; color: #70757a; }
.rs-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 12px 14px; }
.rs-form div { display: grid; gap: 3px; }
.rs-form__wide { grid-column: 1 / -1; }
.rs-form dt { font-size: 10.5px; color: #70757a; }
.rs-form dd { margin: 0; padding: 6px 8px; border: 1px solid #dfe1e5; border-radius: 6px; font-size: 12.5px; }
.rs-auto { margin: 0 14px 14px; padding: 10px 12px; border-radius: 10px; background: #f7f6f2; border-left: 3px solid #E2520F; }
.rs-auto p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.5; }
.rs-auto__from, .rs-mail__us .rs-auto__from { display: flex; align-items: center; gap: 7px; }
.rs-auto__from b { font-size: 12.5px; }
.rs-auto__from small { margin-left: auto; font-size: 11px; color: #70757a; }
.rs-slots { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.rs-slots span { padding: 4px 9px; border-radius: 100px; border: 1px solid #c9ccd1; font-size: 11.5px; color: #333; background: #fff; }
.rs-slots span.is-pick { border-color: #E2520F; background: #E2520F; color: #fff; }

/* a generic messaging window, deliberately no particular product */
.rs-chat__bar { display: flex; align-items: center; gap: 9px; padding: 11px 14px; padding-right: 130px; border-bottom: 1px solid #eee; }
.rs-chat__bar i { width: 30px; height: 30px; font-size: 13px; }
.rs-chat__bar span { display: grid; }
.rs-chat__bar b { font-size: 13px; }
.rs-chat__bar small { font-size: 11px; color: #1E8E5A; }
.rs-chat { display: grid; gap: 6px; padding: 12px; background: #f6f6f4; }
.rs-b { margin: 0; max-width: 84%; padding: 8px 11px 6px; border-radius: 14px; font-size: 12.5px; line-height: 1.45; }
.rs-b small { display: block; margin-top: 3px; font-size: 10px; color: #8a8f94; text-align: right; }
.rs-b--them { justify-self: start; background: #fff; border-radius: 14px 14px 14px 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, .06); }
.rs-b--us { justify-self: end; background: #2F5BD3; color: #fff; border-radius: 14px 14px 4px 14px; }
.rs-b--us small { color: rgba(255, 255, 255, .75); }
.rs-b--us .rs-slots span { border-color: rgba(255, 255, 255, .55); background: transparent; color: #fff; }
.rs-b--us .rs-slots span.is-pick { border-color: #fff; background: #fff; color: #2F5BD3; }
.rs-booked { justify-self: center; margin: 4px 0 0; padding: 4px 11px; border-radius: 100px; background: rgba(30, 142, 90, .12); color: #17704A; font-size: 11.5px; font-weight: 700; }

.rs-call { display: flex; align-items: center; gap: 10px; padding: 12px 14px; padding-right: 130px; border-bottom: 1px solid #eee; }
.rs-call__ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(226, 82, 15, .1); }
.rs-call__ico svg { width: 18px; height: 18px; fill: none; stroke: #E2520F; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rs-call span { display: grid; }
.rs-call b { font-size: 13px; color: #c5221f; }
.rs-call small { font-size: 11px; color: #70757a; }

.rs-mail__sub { margin: 0; padding: 14px 16px 10px; padding-right: 130px; font-size: 16px; font-weight: 700; }
.rs-mail__them { display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; padding: 0 16px 10px; border-bottom: 1px solid #eee; }
.rs-mail__them span { display: grid; }
.rs-mail__them b { font-size: 12.5px; }
.rs-mail__them small { font-size: 11px; color: #70757a; }
.rs-mail__them p { grid-column: 2; margin: 6px 0 0; font-size: 12.5px; color: #444; }
.rs-mail__us { padding: 12px 16px 14px; }
.rs-mail__us p { margin: 8px 0; font-size: 12.5px; line-height: 1.5; }
.rs-mail__btn { display: inline-block; padding: 8px 14px; border-radius: 6px; background: #2F5BD3; color: #fff; font-size: 12.5px; font-weight: 700; }
.rs-mail__sig { color: #70757a; }

/* ---- the race ------------------------------------------------------------- */
.rs-race__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 18px; }
.rs-seg { flex-wrap: wrap; }
.rs-race__fine { margin: 0; font-size: 11px; }
.rs-scene { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.rs-lane { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(var(--ov), .04), rgba(var(--ov), .012)); overflow: hidden; }
.rs-lane--fast { border-color: rgba(226, 82, 15, .4); background: radial-gradient(420px 200px at 100% 0%, rgba(226, 82, 15, .12), transparent 70%), linear-gradient(180deg, rgba(var(--ov), .04), rgba(var(--ov), .012)); }
.rs-lane__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.rs-lane__head .sg-k { margin: 0; }
.rs-lane--fast .rs-lane__head .sg-k { color: var(--orange); }
.rs-lane__clock { display: grid; justify-items: end; margin: 0; }
.rs-lane__lab { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.rs-lane__clock strong { font-family: var(--font-display); font-size: clamp(32px, 3.6vw, 46px); font-weight: 400; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rs-lane--slow .rs-lane__clock strong { color: var(--text-2); }
.rs-lane--fast .rs-lane__clock strong { color: var(--orange); }
.rs-thread { display: grid; align-content: start; gap: 8px; padding: 18px 20px 22px; font-family: Arial, Helvetica, sans-serif; color: #202124; }
.rs-thread .rs-b { font-size: 13.5px; max-width: 86%; }
.rs-thread .rs-b--them { box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.rs-b--late { background: #8C95A0; }
.rs-wait { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; margin: 4px 0; padding: 4px 0 4px 14px; border-left: 2px dashed var(--line-2); }
.rs-wait__k { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #B4400A; }
.rs-wait ol { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.rs-wait li + li::before { content: "\2192"; margin-right: 10px; opacity: .6; }
.rs-thread .rs-booked { margin-top: 8px; }
/* the play-through: steps arrive one at a time (sales.js), the markup is the finished scene */
.rs-step { transition: opacity .45s var(--ease), transform .45s var(--ease); }
.rs-race.is-running .rs-step:not(.is-in) { opacity: 0; transform: translateY(8px); }
html:not(.sg-js) .rs-scene { display: grid !important; margin-bottom: 20px; }

/* ---- the stopwatch ----------------------------------------------------------
   The first weeks as a dial seen from above: the gradient ring is the route,
   contour rings sit inside it, and the stage card sits in the clear face. It
   borrows the climb's callouts, marker and controls, so it sets their colours. */
.rs-dial { --climb-bg: var(--ink); --climb-ink: var(--text); --climb-dim: var(--text-3); --climb-line: var(--line-2); }
.rs-dial__fig { position: relative; width: 100%; max-width: 920px; margin: 0 auto; }
.rs-dial__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; font-family: var(--font-mono); }
.rs-dial__contours path { fill: none; stroke: url(#rsContour); stroke-width: 1.1; }
.rs-dial__ruler path { fill: none; stroke: var(--text-3); stroke-width: 1; opacity: .7; }
.rs-dial__weeks text { fill: var(--text-3); font-size: 11.5px; letter-spacing: .08em; }
.rs-dial__crown { fill: none; stroke: var(--text-3); stroke-width: 1.5; }
.rs-dial__track path, .rs-dial__route path { fill: none; stroke-width: 12; }
.rs-dial__track { opacity: .2; }
.rs-dial__hit { fill: none; stroke: transparent; stroke-width: 110; pointer-events: stroke; cursor: grab; touch-action: none; }
.rs-dial__hit:active { cursor: grabbing; }
.rs-dial.is-ready:not(.is-drawn) .sg-co, .rs-dial.is-ready:not(.is-drawn) .sg-co__lead,
.rs-dial.is-ready:not(.is-drawn) .sg-climb__stop, .rs-dial.is-ready:not(.is-drawn) .rs-dial__marker,
.rs-dial.is-ready:not(.is-drawn) .rs-card { opacity: 0; }
.rs-dial .sg-co, .rs-dial .sg-co__lead, .rs-dial .sg-climb__stop, .rs-dial__marker, .rs-card { transition: opacity .6s var(--ease); }
.rs-dial .sg-climb__stop { pointer-events: none; }

/* the stage card, in the dial's clear face */
.rs-card {
  position: absolute; left: 50%; top: 50.7%; width: 35%; transform: translate(-50%, -50%); display: grid; gap: 8px; padding: 18px 20px 14px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: radial-gradient(300px 140px at 50% 0%, rgba(226, 82, 15, .13), transparent 70%), rgba(var(--surface-rgb), .9);
  backdrop-filter: blur(6px); box-shadow: 0 18px 40px -26px rgba(20, 20, 20, .35); text-align: center;
}
.rs-card__n { margin: 0; font-size: 12px; color: var(--text-3); }
.rs-card__n b { color: var(--orange); font-weight: 500; }
.rs-card__step { display: grid; gap: 4px; justify-items: center; }
.rs-card__step .sg-k { margin: 0; }
.rs-card__step h3 { margin: 0 0 2px; font-family: var(--font-display); font-size: clamp(22px, 2.3vw, 28px); font-weight: 400; line-height: 1.05; letter-spacing: -.02em; }
.rs-card__step p { margin: 0; max-width: 34ch; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.sg-js .rs-card__step:not([hidden]) { animation: sg-fade 380ms var(--ease); }
.rs-card__nav { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin-top: 4px; }
.rs-card__nav .sg-climb__arrow { width: 34px; height: 34px; font-size: 14px; }
.rs-card__hint { margin: 0; font-size: 10.5px; }
html:not(.sg-js) .rs-card { position: static; transform: none; width: auto; margin-top: 16px; text-align: left; }
html:not(.sg-js) .rs-card__step { display: grid !important; justify-items: start; margin-bottom: 10px; }
html:not(.sg-js) .rs-card__nav, html:not(.sg-js) .rs-card__hint, html:not(.sg-js) .rs-card__n, html:not(.sg-js) .rs-dial__marker { display: none; }

/* ---- small screens -------------------------------------------------------- */
@media (max-width: 900px) {
  .rs-scene { grid-template-columns: 1fr; }
  /* the face is too small for the card: it moves under the dial */
  .rs-card { position: static; transform: none; width: auto; margin-top: 16px; }
  .rs-dial__fig { aspect-ratio: auto !important; }
  .rs-dial__svg { position: relative; inset: auto; height: auto; display: block; }
}
@media (max-width: 640px) {
  .rs-dial__weeks, .rs-dial .sg-co__t { display: none; }
  .pd-hero__stage { height: 440px; }
  .rs-seg { border-radius: 22px; }
  .rs-clock em { display: none; }
  .rs-form__bar, .rs-chat__bar, .rs-call, .rs-mail__sub { padding-right: 70px; }
  .rs-u { max-width: 330px; }
}
@media (prefers-reduced-motion: reduce) {
  .rs-step { transition: none; }
  .pd-hero__unit.is-on .rs-clock i { animation: none; }
  .sg-js .rs-card__step:not([hidden]) { animation: none; }
}