/* tour.css — interactive product tour. Scoped under .ptour so nothing leaks into page styles.
   Layout: a wide screenshot band beside a step card, both sized to the viewport's spare height. */
.ptour{
  --t-ink:#1a1a1a; --t-muted:#6B7280; --t-line:#E8E8E8; --t-line2:#dfe5ec;
  --t-blue:#2563EB; --t-blue-d:#1d4ed8; --t-cyan:#1DD9D9; --t-cyan-t:#0B7A7A;
  --t-card:#ffffff; --t-wash:#eef3f9; --t-scrim:rgba(13,22,38,.58);
  font-family:var(--font-body,Inter,'Helvetica Neue',Arial,sans-serif); color:var(--t-ink);
}
.ptour *{box-sizing:border-box}

/* a wider band than the site's 1320px container, because the tour needs the pixels */
.ptour-wrap{max-width:1460px;margin:0 auto;padding:0 24px}

/* ---------- header ---------- */
.ptour .tour-top{margin-bottom:16px}
.ptour .tour-eyebrow{font-size:12px;letter-spacing:2px;text-transform:uppercase;
  color:var(--t-cyan-t);font-weight:600}
.ptour .tour-h{font-size:clamp(24px,2.5vw,31px);line-height:1.14;margin:7px 0 0;font-weight:600;
  letter-spacing:-.6px;max-width:40ch;text-wrap:balance}
.ptour .tour-h .soft{color:var(--t-muted);font-weight:400}
.ptour .tour-lede{font-size:14px;color:var(--t-muted);margin:7px 0 0;max-width:80ch;line-height:1.45}
.ptour .tour-counter{font-size:12.5px;color:var(--t-muted);font-variant-numeric:tabular-nums;
  line-height:1.5}
.ptour .tour-counter b{color:var(--t-ink);font-weight:600;font-size:14px}
.ptour .tour-hint{font-size:12.5px;color:#9aa5b4}
.ptour .tour-counter .sep{margin:0 9px;color:#c9d2de}

/* ---------- screen beside card ---------- */
.ptour .tour-cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.ptour .tour-colL{min-width:0}
.ptour .tour-colR{min-width:0;display:flex;flex-direction:column;gap:10px}
.ptour .tour-stage{position:relative;margin:0}
.ptour .tour-shot{position:relative;width:100%;aspect-ratio:2/1;overflow:hidden;
  background:var(--t-wash);border:1px solid var(--t-line);border-radius:13px;
  box-shadow:0 22px 54px -28px rgba(16,32,64,.34)}
.ptour .tour-shot img{position:absolute;width:100%;height:100%;object-fit:fill;display:block;
  max-width:none;transition:opacity .28s ease}
.ptour .tour-shot img.off{opacity:0}

.ptour .tour-focus[hidden]{display:none}

/* the lit region: one element whose huge spread shadow dims everything else */
.ptour .tour-focus{position:absolute;border-radius:7px;z-index:3;pointer-events:none;
  box-shadow:0 0 0 9999px var(--t-scrim), inset 0 0 0 2px rgba(29,217,217,.9);
  transition:left .3s ease, top .3s ease, width .3s ease, height .3s ease}

.ptour .tour-hs{position:absolute;width:42px;height:42px;margin:-21px 0 0 -21px;border:0;padding:0;
  border-radius:50%;cursor:pointer;background:none;z-index:5}
.ptour .tour-hs::before{content:"";position:absolute;inset:12px;border-radius:50%;
  background:var(--t-blue);box-shadow:0 2px 12px rgba(37,99,235,.65),0 0 0 3px rgba(255,255,255,.9)}
.ptour .tour-hs::after{content:"";position:absolute;inset:4px;border-radius:50%;
  border:2px solid #fff;opacity:.6;animation:tourPulse 2s ease-out infinite}
.ptour .tour-hs:focus-visible{outline:3px solid var(--t-cyan);outline-offset:4px}
@keyframes tourPulse{0%{transform:scale(.6);opacity:.75}70%{transform:scale(1.55);opacity:0}100%{opacity:0}}

/* ---------- step card ---------- */
.ptour .tour-tip{background:var(--t-card);border:1px solid var(--t-line2);border-radius:11px;
  padding:17px 19px 16px;box-shadow:0 10px 30px -18px rgba(16,32,64,.40)}
.ptour .tour-tip .ch{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--t-cyan-t);font-weight:600}
.ptour .tour-tip h3{font-size:18px;line-height:1.28;margin:7px 0 0;font-weight:600;letter-spacing:-.25px}
.ptour .tour-tip p{font-size:14px;line-height:1.56;color:#414a57;margin:9px 0 0}
.ptour .tour-tip .acts{display:flex;align-items:center;gap:9px;margin-top:16px}

.ptour .tour-btn{font:inherit;font-size:13.5px;font-weight:600;border-radius:7px;padding:8px 16px;
  border:1px solid transparent;cursor:pointer;background:var(--t-blue);color:#fff;
  text-decoration:none;display:inline-block;line-height:1.4}
.ptour .tour-btn:hover{background:var(--t-blue-d);color:#fff}
.ptour .tour-btn.ghost{background:var(--t-card);color:#374151;border-color:var(--t-line2);font-weight:500}
.ptour .tour-btn.ghost:hover{background:var(--t-wash)}
.ptour .tour-btn:disabled{opacity:.4;cursor:default}
.ptour .tour-btn:disabled:hover{background:var(--t-card)}
.ptour .tour-btn:focus-visible{outline:3px solid var(--t-cyan);outline-offset:2px}

/* ---------- chapter rail ---------- */
.ptour .tour-rail{display:grid;grid-template-columns:repeat(var(--chapters,3),minmax(0,1fr));
  gap:16px;margin-top:18px;align-items:start}
.ptour .tour-chap{display:block;min-width:0;text-align:left;background:none;border:0;
  padding:0;cursor:pointer;font:inherit;border-radius:4px;line-height:1.3}
.ptour .tour-chap .bar{display:block;height:3px;border-radius:2px;background:#dfe4ea;overflow:hidden}
.ptour .tour-chap .bar i{display:block;height:100%;width:0;background:var(--t-blue);border-radius:2px;
  transition:width .35s ease}
.ptour .tour-chap .nm{display:block;font-size:12.5px;color:var(--t-muted);margin-top:10px;font-weight:500}
.ptour .tour-chap.on .nm{color:var(--t-ink);font-weight:600}
.ptour .tour-chap.on .bar{background:#cfdaf0}
.ptour .tour-chap .steps{display:block;font-size:11.5px;color:#9aa5b4;margin-top:3px;
  font-variant-numeric:tabular-nums}
.ptour .tour-chap:focus-visible{outline:3px solid var(--t-cyan);outline-offset:3px}

/* ---------- end panel ---------- */
.ptour .tour-end{position:absolute;inset:0;background:rgba(244,247,251,.96);z-index:10;
  display:flex;align-items:center;justify-content:center;padding:24px;border-radius:13px}
.ptour .tour-end[hidden]{display:none}
.ptour .tour-end .inner{text-align:center;max-width:470px}
.ptour .tour-end h3{font-size:clamp(20px,2.4vw,26px);font-weight:600;letter-spacing:-.5px;margin:0}
.ptour .tour-end p{font-size:14.5px;color:var(--t-muted);line-height:1.55;margin:12px 0 0}
.ptour .tour-end .acts{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap}

.ptour .tour-note{font-size:12px;color:#9aa5b4;margin-top:22px;line-height:1.5;max-width:86ch}

@media (hover:none){.ptour .tour-hint{display:none}}
@media (prefers-reduced-motion:reduce){
  .ptour .tour-hs::after{animation:none;opacity:.5}
  .ptour .tour-focus,.ptour .tour-shot img,.ptour .tour-chap .bar i{transition:none}
}
@media (max-width:980px){
  .ptour .tour-cols{grid-template-columns:minmax(0,1fr);gap:14px}
  .ptour .tour-colR{gap:12px}
}
@media (max-width:820px){
  .ptour .tour-shot{aspect-ratio:4/3}
  .ptour .tour-focus{box-shadow:0 0 0 9999px rgba(13,22,38,.42), inset 0 0 0 2px rgba(29,217,217,.95)}
  .ptour .tour-tip{padding-bottom:58px}
  .ptour .tour-end{position:fixed;inset:0;border-radius:0;background:rgba(244,247,251,.98)}
  .ptour .tour-counter{padding-bottom:0}
}

/* Standing conversion card, under the step card in the right column. Mirrors
   .tour-tip but reads as a tinted panel rather than a second white card, and its
   button is outlined so Next stays the only filled blue control on the page.
   Order follows Abacum: the ask first, the reassurance under it. */
.ptour .tour-cta{background:var(--t-wash);border:1px solid var(--t-line2);border-radius:11px;
  padding:15px 19px 17px}
.ptour .tour-cta .tour-btn{display:block;text-align:center;padding:10px 12px;
  background:var(--t-card);color:var(--t-blue);border-color:var(--t-blue)}
.ptour .tour-cta .tour-btn:hover{background:var(--t-blue);color:#fff;border-color:var(--t-blue)}
.ptour .tour-cta p{font-size:12.4px;line-height:1.45;color:var(--t-muted);margin:14px 0 0}
.ptour .tour-cta ul{list-style:none;margin:8px 0 0;padding:0}
.ptour .tour-cta li{font-size:12.6px;line-height:1.45;color:#414a57;
  padding-left:18px;position:relative;margin-top:7px}
.ptour .tour-cta li:before{content:"\2713";position:absolute;left:0;top:0;
  color:var(--t-cyan-t);font-weight:700;font-size:11.5px}

/* The explainer under the tour has three chapters, but the shared .steps-grid
   assumes the four stages of implementation.html, so the fourth column sat
   empty. Two classes beat one, and tour.css loads after the inline styles, so
   no !important is needed. Not set inline, because that would defeat the
   collapse below. */
.steps-grid.three-up{grid-template-columns:repeat(3,1fr)}
@media (max-width:768px){.steps-grid.three-up{grid-template-columns:1fr}}