/* quotasq 5.21.3 — risksq chapter: the approval line (approved October 21, 2026 on the "quotasq hero mockup" design canvas).
   The straightened orbit of the hero's governed loop: an orb travels from "Before approval · Action" across the approval
   gate to "After approval · Awareness"; each check lights up as it is reached and the readout explains it.
   Brand: Risk Charcoal field, Interactive Charcoal chips, cool greys, SQ Green only on "sq", Third-Bar Lime on one word,
   Risk Alert amber only with a written state. The stage is drawn at 1000 × 300 and scales with its width (cqw). */
.risksq-track{
  --rt-field:#2D3035;--rt-card:#30343A;--rt-card-on:#3A3F46;--rt-line:#4A5058;--rt-line-on:#8A929A;--rt-chip-line:#5A616A;
  --rt-text:#FFFFFF;--rt-soft:#C9CED3;--rt-muted:#B9C0C7;--rt-dim:#8F979F;--rt-sq:#659016;--rt-lime:#A6DF21;--rt-alert:#C78A1B;
  --rt-orb:#A9BBA2; /* same orb as the hero's governed loop; brand-grey alternative: #9AA2AA */
  container:rt/inline-size;
  position:relative;box-sizing:border-box;width:min(1080px,100%);margin-inline:auto;
  display:flex;flex-direction:column;gap:20px;padding:32px 40px;
  background:var(--rt-field);color:var(--rt-text);border-radius:20px;overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(37,40,44,.45);font-family:inherit;text-align:left;
}
.risksq-track *,.risksq-track *::before,.risksq-track *::after{box-sizing:border-box}
.risksq-track b{font:inherit;color:var(--rt-sq)}
.rt-watermark{position:absolute;right:24px;bottom:24px;width:360px;height:360px;opacity:.06;pointer-events:none;z-index:0}
.rt-head,.rt-stage,.rt-readout,.rt-foot{position:relative;z-index:1}
.rt-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.rt-brand{display:flex;align-items:center;gap:12px}
.rt-icon{width:20px;height:20px;fill:none;stroke:#DDE1E5;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.rt-name{font-size:22px;font-weight:600;letter-spacing:-.02em}
.rt-by{font-size:12px;font-weight:500;color:var(--rt-muted)}
.rt-eyebrow{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rt-muted)}

/* stage — 1000 × 300 design units; 1 unit = 100cqw / 1000 */
.rt-stage{container:rtstage/inline-size;position:relative;width:100%;aspect-ratio:1000/300}
.rt-track{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.rt-line{stroke:var(--rt-line);stroke-width:1}
.rt-line-dots{stroke:#6B737C;stroke-width:1.5;stroke-dasharray:2 9}
.rt-progress{stroke:var(--rt-line-on);stroke-width:1.5}
.rt-gate{stroke:var(--rt-line-on);stroke-width:1}
.rt-tick{stroke:var(--rt-line);stroke-width:1;transition:stroke .3s ease}
.rt-tick.is-active{stroke:var(--rt-line-on)}
.rt-dot{fill:#5A616A;transition:fill .3s ease}
.rt-dot.is-passed{fill:var(--rt-line-on)}
.rt-dot.is-active{fill:#DDE1E5}
.rt-orb{fill:var(--rt-orb)}
.rt-orb-halo{fill:var(--rt-orb);opacity:.18}
.rt-side{position:absolute;top:0;display:flex;flex-direction:column;gap:.4cqw}
.rt-side span{font-size:1cqw;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--rt-muted)}
.rt-side strong{font-size:1.5cqw;font-weight:500}
.rt-side-before{left:2%}
.rt-side-after{right:2%;align-items:flex-end}
.rt-side-after strong{color:var(--rt-lime)}
.rt-gate-label{position:absolute;left:44.6%;top:45.333%;width:10.8%;height:9.333%;display:flex;align-items:center;justify-content:center;
  background:var(--rt-field);border:1px solid var(--rt-line-on);border-radius:.4cqw;font-size:1cqw;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.rt-chips{list-style:none;margin:0;padding:0}
.rt-chip{position:absolute;width:12.8%;height:13.333%;margin:0;display:flex;align-items:center;justify-content:center;padding:0 1.2cqw;
  background:var(--rt-card);border:1px solid var(--rt-line);border-radius:.8cqw;font-size:1.3cqw;font-weight:500;color:var(--rt-dim);white-space:nowrap;
  transition:background .3s ease,border-color .3s ease,color .3s ease}
.rt-chip.is-passed{color:var(--rt-soft)}
.rt-chip.is-active{background:var(--rt-card-on);border-color:var(--rt-line-on);color:var(--rt-text)}
.rt-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.rt-readout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 170px;background:var(--rt-card);border:1px solid var(--rt-line);border-radius:10px;transition:opacity .18s ease}
.rt-readout.is-swapping .rt-v,.rt-readout.is-swapping .rt-state,.rt-readout.is-swapping .rt-now-v{opacity:0}
.rt-now{grid-column:1/-1;display:flex;gap:12px;align-items:baseline;padding:12px 18px;border-bottom:1px solid var(--rt-line)}
.rt-now-v{font-size:13px;font-weight:600;transition:opacity .18s ease}
.rt-cell{padding:16px 18px;display:flex;flex-direction:column;gap:6px;border-right:1px solid var(--rt-line)}
.rt-cell-state{border-right:0;justify-content:center}
.rt-k{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--rt-muted)}
.rt-v{font-size:15px;font-weight:500;line-height:1.35;transition:opacity .18s ease}
.rt-state{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--rt-soft);transition:opacity .18s ease}
.rt-state svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rt-state-watch,.rt-state-review{color:var(--rt-alert)}

.rt-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid var(--rt-line);padding-top:18px}
.rt-claim{font-size:13px;color:var(--rt-soft)}
.rt-runs{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rt-runs-label{font-size:12px;color:var(--rt-muted);margin-right:4px}
.rt-chip-o{font-size:12px;padding:5px 10px;border:1px solid var(--rt-chip-line);border-radius:4px;color:#E6E9EC}

/* the risksq chapter copy: lowercase product name with SQ Green "sq" */
.risk-product .product-wordmark b,.risk-product .product-intro .qsq-sq{color:#659016;font:inherit}

/* tablets and phones: the track keeps its dots and the gate; the readout names the check */
@media (max-width:760px){.risksq-track{padding:24px 20px;border-radius:16px}}
@container rt (max-width:759px){
  .rt-watermark{width:220px;height:220px;right:16px;bottom:16px}
  .rt-chip,.rt-gate-label{display:none}
  .rt-side span{font-size:10px}.rt-side strong{font-size:14px}
  .rt-stage{aspect-ratio:1000/360}
  .rt-readout{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rt-cell:nth-child(3){border-right:0}
  .rt-cell:nth-child(2),.rt-cell:nth-child(3){border-bottom:1px solid var(--rt-line)}
}
@container rt (max-width:479px){
  .rt-readout{grid-template-columns:1fr}
  .rt-cell{border-right:0;border-bottom:1px solid var(--rt-line)}
  .rt-cell-state{border-bottom:0}
}
@media (prefers-reduced-motion:reduce){.rt-chip,.rt-dot,.rt-tick,.rt-v,.rt-state,.rt-now-v{transition:none}}