/* ============================================================
   Tour the Dashboard — "Your path to a higher SAT score"
   Ported from mockups/dashboard-tour-path/index.html.
   Everything is scoped under .bp-tour so the mockup's bare
   selectors (* reset, img, :root vars) never leak into the
   theme's shell header/footer or styles.css. Enqueued only on
   the /method/dashboard/ page (functions.php, is_page).
   Fonts (Montserrat 600–900 + Inter 400–700) come from the
   theme's global font enqueue.
   ============================================================ */

.bp-tour{
  --ink:#14171a; --mut:#6b7684; --red:#e74c3c; --dark:#1a1a1a;
  --navy:#2c3e50; --dusty:#7aa5c2; --line:#e7eaef; --white:#fff;
  background:#fff; color:var(--ink);
  font-family:Inter,system-ui,sans-serif; -webkit-font-smoothing:antialiased;
}
.bp-tour *{margin:0;padding:0;box-sizing:border-box}
.bp-tour img{display:block;max-width:100%}
.bp-tour .wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* ---------- header ---------- */
.bp-tour .head{text-align:center;padding:76px 0 46px;background:linear-gradient(180deg,#eaf1f8 0%,#e2eaf3 100%)}
.bp-tour .eyebrow{font-family:Inter;font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.bp-tour .head h1{font-family:Montserrat,sans-serif;font-weight:900;font-size:64px;line-height:1.04;color:var(--navy);margin:16px auto 0;max-width:14ch;letter-spacing:-.015em}
.bp-tour .head h1 u{position:relative;text-decoration:none;white-space:nowrap}
.bp-tour .head h1 u::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:9px;background:var(--red);border-radius:5px;transform:skewX(-11deg);opacity:.92;z-index:-1}
.bp-tour .head p{font-size:18px;line-height:1.6;color:var(--mut);max-width:56ch;margin:22px auto 0}

/* ---------- road / stops ---------- */
.bp-tour .road{position:relative;padding:36px 0 20px}
.bp-tour .roadline{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:visible}
.bp-tour .roadline path{fill:none;stroke:#a7bdd2;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:1 15}
.bp-tour .marker{position:relative;z-index:3;display:flex;justify-content:center;margin:8px 0 4px}
.bp-tour .marker .lbl{font-family:Montserrat;font-weight:800;font-size:13px;letter-spacing:.14em;border-radius:8px;padding:8px 18px;color:#fff}
.bp-tour .marker.start .lbl{background:var(--navy)}
.bp-tour .marker.finish .lbl{background:var(--red)}
.bp-tour .marker.finish{flex-direction:column;align-items:center;gap:10px}
.bp-tour .marker .flag svg{width:40px;height:44px;display:block}
.bp-tour .marker .postimg{height:122px;width:auto;display:block}
.bp-tour .marker.finish .postimg{height:150px}

.bp-tour .stop{position:relative;z-index:2;display:grid;grid-template-columns:1fr 96px 1fr;align-items:center;padding:34px 0;min-height:420px}
.bp-tour .node{grid-column:2;grid-row:1;justify-self:center;position:relative;z-index:3;width:78px;height:78px}
.bp-tour .node .ic{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:#d2edff;border:1px solid #cfe2f2;box-shadow:0 12px 26px rgba(44,62,80,.18)}
.bp-tour .node .ic img{width:100%;height:100%;object-fit:cover;display:block}
.bp-tour .node .num{position:absolute;top:-8px;right:-8px;width:26px;height:26px;border-radius:50%;background:var(--red);color:#fff;font-family:Inter;font-weight:800;font-size:12px;display:grid;place-items:center;box-shadow:0 3px 8px rgba(231,76,60,.45);z-index:2}

.bp-tour .copy{grid-column:1;grid-row:1;max-width:430px}
.bp-tour .stop.flip .copy{grid-column:3;justify-self:start}
.bp-tour .stop:not(.flip) .copy{justify-self:end;text-align:right}
.bp-tour .copy .kick{font-family:Inter;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.bp-tour .copy h3{font-family:Montserrat;font-weight:800;font-size:30px;line-height:1.14;color:var(--navy);margin:9px 0 0}
.bp-tour .copy>p{font-size:15.5px;line-height:1.62;color:var(--mut);margin-top:13px}
.bp-tour .copy ul{list-style:none;margin:16px 0 0;display:flex;flex-direction:column;gap:9px}
.bp-tour .stop:not(.flip) .copy ul{align-items:flex-end}
.bp-tour .copy li{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.4;color:var(--ink);font-weight:500;max-width:38ch}
.bp-tour .stop:not(.flip) .copy li{flex-direction:row-reverse;text-align:right}
.bp-tour .copy li s{flex:none;width:18px;height:18px;margin-top:1px;border-radius:6px;background:rgba(122,165,194,.2);color:var(--navy);display:grid;place-items:center;font-size:11px;font-weight:800;font-style:normal;font-family:Inter}
.bp-tour .copy li.soon s{background:rgba(231,76,60,.14);color:var(--red)}
.bp-tour .copy li.soon{color:var(--mut)}

.bp-tour .stage{grid-column:3;grid-row:1;position:relative;height:440px}
.bp-tour .stop.flip .stage{grid-column:1}

/* device frame + floating cards */
.bp-tour .frame{position:absolute;background:#fff;border:1px solid rgba(20,23,26,.10);border-radius:14px;overflow:hidden;box-shadow:0 34px 70px -26px rgba(20,23,26,.42),0 8px 20px rgba(20,23,26,.10)}
.bp-tour .frame .bar{height:30px;background:#fff;border-bottom:1px solid #eee;display:flex;align-items:center;gap:6px;padding:0 12px}
.bp-tour .frame .bar i{width:9px;height:9px;border-radius:50%;background:#e2e2e2}
.bp-tour .frame .bar i:first-child{background:#ff5f57}.bp-tour .frame .bar i:nth-child(2){background:#febc2e}.bp-tour .frame .bar i:nth-child(3){background:#28c840}
.bp-tour .frame .shot{width:100%;object-fit:cover;object-position:top;display:block}
.bp-tour .float{position:absolute;background:#fff;border:1px solid rgba(20,23,26,.10);border-radius:12px;overflow:hidden;box-shadow:0 22px 46px -16px rgba(20,23,26,.45)}
.bp-tour .float img{width:100%;display:block}
.bp-tour .tagchip{position:absolute;z-index:6;background:var(--navy);color:#fff;font-family:Inter;font-weight:700;font-size:11px;letter-spacing:.02em;border-radius:99px;padding:6px 12px;box-shadow:0 8px 18px rgba(44,62,80,.3);display:flex;gap:6px;align-items:center}
.bp-tour .tagchip.red{background:var(--red)}
.bp-tour .slot{position:absolute;border:2px dashed #b9c6d3;border-radius:12px;background:rgba(255,255,255,.6);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:var(--navy);padding:14px}
.bp-tour .slot b{font-family:Montserrat;font-weight:800;font-size:13px}
.bp-tour .slot span{font-family:Inter;font-size:11px;color:var(--mut);margin-top:4px;line-height:1.4}

/* ---------- final ---------- */
.bp-tour .final{text-align:center;padding:26px 0 96px}
.bp-tour .final h2{font-family:Montserrat;font-weight:900;font-size:40px;line-height:1.22;color:var(--navy)}
.bp-tour .final a{display:inline-block;margin-top:26px;background:var(--red);color:#fff;font-family:Montserrat;font-weight:700;font-size:16px;border-radius:10px;padding:16px 30px;text-decoration:none;box-shadow:0 14px 30px rgba(231,76,60,.3)}
.bp-tour .note{max-width:760px;margin:20px auto 0;font-size:12.5px;color:var(--mut);line-height:1.6}

@media(max-width:920px){
  .bp-tour .head h1{font-size:44px}
  .bp-tour .stop{grid-template-columns:1fr;gap:20px;min-height:0}
  .bp-tour .roadline,.bp-tour .node{display:none}
  .bp-tour .copy,.bp-tour .stop.flip .copy{grid-column:1;grid-row:auto;justify-self:stretch;text-align:left;max-width:none}
  .bp-tour .stop:not(.flip) .copy ul{align-items:flex-start}
  .bp-tour .stop:not(.flip) .copy li{flex-direction:row;text-align:left}
  /* height:auto needs !important: stops 1 and 5 carry INLINE stage heights
     (height:500px/624px) sized for the desktop collage — without it their
     now-static stacked frames overflow the fixed box onto the next copy. */
  .bp-tour .stage,.bp-tour .stop.flip .stage{grid-column:1;grid-row:auto;height:auto!important;position:static}
  .bp-tour .frame,.bp-tour .float{position:static!important;width:auto!important;margin:0 0 16px;transform:none!important}
  /* The shots carry inline DESKTOP heights (e.g. height:344px) sized for wide
     frames; at phone width that turns object-fit:cover into a zoomed-in crop
     of a desktop screenshot stacked over the copy. Natural height instead,
     top-anchored, capped so full-page captures don't run forever. */
  .bp-tour .frame .shot{height:auto!important;max-height:520px;object-fit:cover;object-position:top}
  .bp-tour .tagchip,.bp-tour .slot{display:none}
}