/* iQuotient product walkthrough (2026-09-10)
   A guided, annotated tour through six real product screens. Pure CSS + iq-tour.js,
   no dependencies. Uses the site tokens (--teal, --cyan, --navy, --paper, --line). */
.iq-tour{padding:5.5rem 0;background:var(--paper,#f3f7f8);scroll-margin-top:90px}
/* .wrap inherits the site gutter (width:min(100% - 2.6rem,var(--maxw))) */
.iq-tour-head{max-width:760px;margin-bottom:2.2rem}
.iq-tour-head .eyebrow{display:block;margin-bottom:.6rem}
.iq-tour-head h2{margin:0 0 .8rem;font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.08;letter-spacing:-.02em;color:var(--ink,#1f262a)}
.iq-tour-head p{margin:0;color:var(--text-soft,#586a70);font-size:1.05rem;line-height:1.55;max-width:640px}

.iq-tour-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:2rem;align-items:start}
@media(max-width:960px){.iq-tour-grid{grid-template-columns:1fr;gap:1.2rem}}

/* stepper */
.iq-tour-steps{list-style:none;margin:0;padding:0;display:grid;gap:6px;counter-reset:tour}
.iq-tour-steps button{width:100%;text-align:left;display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;padding:12px 14px;border:1px solid var(--line,rgba(42,50,54,.1));border-radius:14px;background:#fff;color:var(--ink,#1f262a);font:inherit;cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.iq-tour-steps button:hover{border-color:var(--teal,#00778b)}
.iq-tour-steps button:focus-visible{outline:3px solid var(--cyan,#34cfdc);outline-offset:2px}
.iq-tour-steps button .n{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:13.5px;color:var(--teal,#00778b);background:var(--sky,#e6f2f4);transition:background .2s,color .2s}
.iq-tour-steps button b{display:block;font-size:15px;line-height:1.3}
.iq-tour-steps button span.d{display:block;margin-top:2px;font-size:13px;color:var(--text-soft,#586a70);line-height:1.4}
.iq-tour-steps button[aria-current="step"]{border-color:var(--teal,#00778b);background:linear-gradient(180deg,#fff,var(--sky,#e6f2f4))}
.iq-tour-steps button[aria-current="step"] .n{background:var(--teal,#00778b);color:#fff}
.iq-tour-steps button.done .n{background:var(--teal-soft,rgba(0,119,139,.1))}
@media(max-width:960px){
  .iq-tour-steps{grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .iq-tour-steps button{scroll-snap-align:start}
  .iq-tour-steps button span.d{display:none}
}

/* stage */
.iq-tour-stage{position:relative;background:#fff;border:1px solid var(--line,rgba(42,50,54,.1));border-radius:var(--r-lg,20px);overflow:hidden;box-shadow:0 30px 70px -40px rgba(20,40,46,.45)}
.iq-tour-bar{display:flex;align-items:center;gap:8px;height:40px;padding:0 16px;background:var(--navy,#2a3236);color:#aebfc3;font-size:12.5px;font-weight:600}
.iq-tour-bar i{width:11px;height:11px;border-radius:50%;background:#4b5a61;display:block}
.iq-tour-bar i:nth-child(1){background:#ec6a5e}.iq-tour-bar i:nth-child(2){background:#f4bf4f}.iq-tour-bar i:nth-child(3){background:#61c454}
.iq-tour-bar .u{margin-left:12px;letter-spacing:.2px;color:#cdd9dc}
.iq-tour-bar .u b{color:#fff;font-weight:700}
/* The screens are tall (1440x1600). The stage shows a 4:3 window onto the screen and pans
   the image so the active highlight is in view; iq-tour.js sets object-position and
   the hotspot pixel positions from the rendered geometry. */
.iq-tour-shot{position:relative;background:#eef3f4;aspect-ratio:4/3;max-height:min(70vh,640px);overflow:hidden}
@media(max-width:600px){.iq-tour-shot{aspect-ratio:1/1}}
.iq-tour-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%;display:block;transition:opacity .35s,object-position .6s cubic-bezier(.2,.7,.2,1)}
.iq-tour-shot img.is-leaving{opacity:0}
.iq-tour-spot[hidden]{display:none}

/* hotspots */
.iq-tour-spot{position:absolute;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;border:0;padding:0;background:var(--cyan,#34cfdc);color:var(--navy,#2a3236);font:800 13px/1 Montserrat,Arial,sans-serif;cursor:pointer;box-shadow:0 0 0 6px rgba(52,207,220,.28),0 10px 24px -10px rgba(0,0,0,.6);transition:transform .2s,box-shadow .2s}
.iq-tour-spot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(52,207,220,.7);animation:iqspot 2.2s ease-out infinite}
.iq-tour-spot:hover,.iq-tour-spot[aria-pressed="true"]{transform:translate(-50%,-50%) scale(1.1);box-shadow:0 0 0 8px rgba(52,207,220,.36),0 12px 28px -10px rgba(0,0,0,.6)}
.iq-tour-spot:focus-visible{outline:3px solid #fff;outline-offset:2px}
@keyframes iqspot{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.9);opacity:0}}
@media(prefers-reduced-motion:reduce){.iq-tour-spot::after{animation:none}.iq-tour-shot img{transition:none}}

/* caption + controls */
.iq-tour-caption{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:start;padding:16px 18px;border-top:1px solid var(--line,rgba(42,50,54,.1));min-height:92px}
.iq-tour-pills{display:flex;gap:6px;align-self:center}
.iq-tour-pills button{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line-strong,rgba(42,50,54,.18));background:#fff;color:var(--ink,#1f262a);font:800 13px/1 Montserrat,Arial,sans-serif;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.iq-tour-pills button:hover{border-color:var(--teal,#00778b);color:var(--teal,#00778b)}
.iq-tour-pills button[aria-pressed="true"]{background:var(--teal,#00778b);border-color:var(--teal,#00778b);color:#fff}
.iq-tour-pills button:focus-visible{outline:3px solid var(--cyan,#34cfdc);outline-offset:2px}
@media(max-width:600px){.iq-tour-caption{grid-template-columns:34px 1fr}.iq-tour-pills{grid-column:1/-1;justify-self:start}}
.iq-tour-caption .n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;background:var(--cyan,#34cfdc);color:var(--navy,#2a3236)}
.iq-tour-caption b{display:block;font-size:15px;color:var(--ink,#1f262a);line-height:1.3}
.iq-tour-caption p{margin:3px 0 0;font-size:14px;color:var(--text-soft,#586a70);line-height:1.5}
.iq-tour-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px 16px;flex-wrap:wrap}
.iq-tour-dots{display:flex;gap:6px}
.iq-tour-dots i{width:8px;height:8px;border-radius:50%;background:var(--line-strong,rgba(42,50,54,.18));display:block;transition:background .2s,transform .2s}
.iq-tour-dots i.on{background:var(--teal,#00778b);transform:scale(1.25)}
.iq-tour-nav{display:flex;gap:8px}
.iq-tour-nav button{font:inherit;font-weight:700;font-size:14px;padding:10px 16px;border-radius:999px;border:1.5px solid var(--line-strong,rgba(42,50,54,.18));background:#fff;color:var(--ink,#1f262a);cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.iq-tour-nav button:hover{border-color:var(--teal,#00778b);color:var(--teal,#00778b)}
.iq-tour-nav button:focus-visible{outline:3px solid var(--cyan,#34cfdc);outline-offset:2px}
.iq-tour-nav button.primary{background:var(--teal,#00778b);border-color:var(--teal,#00778b);color:#fff}
.iq-tour-nav button.primary:hover{background:var(--teal-strong,#015a6b);border-color:var(--teal-strong,#015a6b);color:#fff}
.iq-tour-nav button[disabled]{opacity:.45;cursor:default}

/* finale */
.iq-tour-final{display:none;padding:22px 18px 24px;border-top:1px solid var(--line,rgba(42,50,54,.1));background:linear-gradient(180deg,#fff,var(--sky,#e6f2f4))}
.iq-tour.is-complete .iq-tour-final{display:block}
.iq-tour-final b{display:block;font-size:17px;color:var(--ink,#1f262a);margin-bottom:6px}
.iq-tour-final p{margin:0 0 14px;color:var(--text-soft,#586a70);font-size:14.5px;line-height:1.5;max-width:560px}
.iq-tour-final .row{display:flex;gap:10px;flex-wrap:wrap}
.iq-tour-final .row .btn{max-width:100%;white-space:normal;text-align:center}
.iq-tour-boundary{margin:14px 0 0;font-size:12.5px;color:var(--muted,#636d75);line-height:1.5}