/* QuantDesk guides · visual-first add-ons v1.0 (2026-10-09)
   Loads AFTER qd-site.css (and qd-widgets.css). Tokens only, so both palettes and themes work.
   1. .qd-vh      visual hero: text + a device-framed clip + 3 fact chips
   2. .qd-sp      step player: one step at a time, Previous / Next, all-steps list, progress,
                  each step bound to a visual (clip segment, spotlighted screenshot or live widget)
   3. .qd-wrong   "what can go wrong" cards: symptom chip + one-line fix
   4. .qd-vis     standalone framed visual blocks (clip / widget) between sections              */

/* ---------- 1. visual hero ---------- */
.qd-article-hero--media .qd-container{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,56px);align-items:center}
.qd-article-hero--media.qd-article-hero--tall .qd-container{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}
.qd-vh__text{min-width:0}
.qd-vh__media{min-width:0}
.qd-vh__media .qdw{box-shadow:none}
.qd-article-hero--tall .qd-vh__media{max-width:360px;margin-inline:auto}
.qd-article-hero--tall .qdw-phone{max-width:300px}
.qd-vh__promise{margin:0;font-size:var(--qd-fs-18);line-height:1.55;color:var(--qd-ink-2);max-width:34em}
.qd-vh__chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:22px 0 0;padding:0;list-style:none}
.qd-vh__chip{display:flex;flex-direction:column;gap:3px;min-width:0;padding:10px 12px;border-radius:var(--qd-r-md);border:1px solid var(--qd-line);background:var(--qd-glass)}
.qd-vh__chip small{font:600 11px/1.1 var(--qd-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--qd-ink-3)}
.qd-vh__chip b{font-size:var(--qd-fs-15);line-height:1.35;color:var(--qd-ink);font-weight:600}
.qd-article-hero--media .qd-crumbs{grid-column:1/-1;margin-bottom:0}
.qd-article-hero--media h1{margin-top:12px}
@media (max-width:1023px){
  .qd-article-hero--media .qd-container,.qd-article-hero--media.qd-article-hero--tall .qd-container{grid-template-columns:minmax(0,1fr)}
  .qd-article-hero--tall .qd-vh__media{max-width:300px}
}
@media (max-width:639px){
  .qd-vh__chips{grid-template-columns:minmax(0,1fr);gap:8px}
  .qd-vh__chip{flex-direction:row;align-items:baseline;gap:10px}
  .qd-vh__chip small{flex:0 0 6.6em}
  /* guide tab strips wrap onto rows on phones instead of scrolling off-screen */
  .qd-tabs--wrap .qd-tabs__list{flex-wrap:wrap;overflow:visible;border-radius:18px;-webkit-mask-image:none;mask-image:none}
  .qd-tabs--wrap .qd-tabs__ink{display:none}
  .qd-tabs--wrap.is-ready .qd-tab[aria-selected="true"]{background:var(--qd-surface-1);box-shadow:var(--qd-shadow-1),0 0 0 1px var(--qd-line-2)}
  .qd-tabs--wrap .qd-tab{height:34px;padding:0 12px}
}
/* widget micro-labels: never below 11px on guide pages */
.qdw-st__fam,.qdw-st__gh,.qdw__tag,.qdw-tile__k,.qdw-table th,.qdw-side,.qdw-field__k,.qdw-dno,.qdw-range__l,.qdw-leg-tag,.qdw-jr__h,.qdw--order-flow .qdw-table .c-lim::before,.qdw--order-flow .qdw-table .c-fill::before{font-size:11px}

/* ---------- 2. step player ---------- */
.qd-sp{--sp-gap:20px;position:relative;display:flex;flex-direction:column;gap:var(--sp-gap);margin:1.6em 0 2.4em;padding:clamp(14px,2vw,20px);border-radius:var(--qd-r-xl);border:1px solid var(--qd-line);background:var(--qd-glass);box-shadow:var(--qd-shadow-1)}
.qd-sp:focus-visible{outline:2px solid var(--qd-focus);outline-offset:3px}
.qd-sp__top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.qd-sp__count{font:600 12px/1 var(--qd-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--qd-ink-3);white-space:nowrap}
.qd-sp__bar{position:relative;flex:1 1 120px;height:4px;border-radius:4px;background:var(--qd-surface-3);overflow:hidden}
.qd-sp__bar span{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--qd-p,0));background:var(--qd-grad);border-radius:inherit;transition:transform var(--qd-dur-4) var(--qd-ease-out)}
.qd-sp__tools{display:flex;gap:6px;margin-left:auto}
.qd-sp__tool{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border-radius:var(--qd-r-pill);border:1px solid var(--qd-line-2);background:var(--qd-surface-1);color:var(--qd-ink-2);font:600 12px/1 var(--qd-font-body);cursor:pointer;transition:border-color var(--qd-dur-2),color var(--qd-dur-2)}
.qd-sp__tool:hover{border-color:var(--qd-ink-4);color:var(--qd-ink)}
.qd-sp__tool[aria-expanded="true"]{border-color:var(--qd-teal);color:var(--qd-ink)}
.qd-sp__tool svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.qd-sp__tool .ico-pause,.qd-sp__tool[aria-pressed="true"] .ico-play{display:none}
.qd-sp__tool[aria-pressed="true"] .ico-pause{display:inline}
.qd-sp__list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px}
.qd-sp__list[hidden]{display:none}
.qd-sp__list button{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:6px 10px;border-radius:var(--qd-r-sm);border:1px solid transparent;background:transparent;color:var(--qd-ink-2);font:500 13.5px/1.3 var(--qd-font-body);text-align:left;cursor:pointer;transition:background-color var(--qd-dur-2),color var(--qd-dur-2)}
.qd-sp__list button:hover{background:var(--qd-surface-2);color:var(--qd-ink)}
.qd-sp__list button[aria-current="step"]{background:var(--qd-surface-2);border-color:var(--qd-line-2);color:var(--qd-ink)}
.qd-sp__list i{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--qd-surface-3);color:var(--qd-ink-2);font:700 11px/1 var(--qd-font-mono);font-style:normal}
.qd-sp__list button[aria-current="step"] i,.qd-sp__list button.is-done i{background:var(--qd-grad);color:var(--qd-on-grad)}
.qd-sp__body{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-gap)}
.qd-sp--side .qd-sp__body{grid-template-columns:minmax(0,300px) minmax(0,1fr);align-items:start}
.qd-sp__stage{position:relative;min-width:0}
.qd-sp__vis{position:absolute;left:0;top:0;width:100%;margin:0;min-width:0;opacity:0;visibility:hidden;transform:translate3d(0,6px,0);transition:opacity var(--qd-dur-3) var(--qd-ease-out),transform var(--qd-dur-3) var(--qd-ease-out),visibility 0s linear var(--qd-dur-3)}
.qd-sp__vis.is-active{position:relative;opacity:1;visibility:visible;transform:none;transition-delay:0s;z-index:1}
.qd-sp__vis.qd-shot{margin:0}
.qd-sp__vis video,.qd-sp__vis img{display:block;width:100%;height:auto}
.qd-sp__clip{position:relative;overflow:hidden;border-radius:var(--qd-r-md);border:1px solid var(--qd-line-2);background:var(--qd-surface-1);line-height:0}
.qd-sp__clip--tall{max-width:300px;margin-inline:auto;border-radius:26px;padding:8px;background:var(--qd-surface-2)}
.qd-sp__clip--tall video{border-radius:18px}
.qd-sp__clip--wide::before{content:"";position:absolute;left:0;right:0;top:0;height:22px;background:var(--qd-surface-2);border-bottom:1px solid var(--qd-line)}
.qd-sp__clip--wide::after{content:"";position:absolute;left:12px;top:7px;width:8px;height:8px;border-radius:50%;background:var(--qd-ink-4);box-shadow:14px 0 0 var(--qd-ink-4),28px 0 0 var(--qd-ink-4)}
.qd-sp__clip--wide video{padding-top:22px}
.qd-sp__play{position:absolute;inset:0;z-index:3;display:grid;place-items:center;border:0;padding:0;background:rgba(3,6,12,.28);color:#fff;cursor:pointer}
.qd-sp__play[hidden]{display:none}
.qd-sp__play span{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:rgba(7,10,18,.8);border:1px solid rgba(255,255,255,.3)}
.qd-sp__play svg{width:22px;height:22px;fill:#fff;margin-left:3px}
.qd-sp__cap{margin:8px 0 0;font-size:var(--qd-fs-13,13px);line-height:1.45;color:var(--qd-ink-3);text-align:center}
.qd-sp__vis.qd-shot .qd-sp__cap,.qd-sp__vis figcaption{line-height:1.45}
.qd-sp__panel{display:flex;flex-direction:column;gap:14px;min-width:0}
.qd-sp__steps{display:grid}
.qd-sp__step{grid-area:1/1;display:flex;flex-direction:column;gap:10px;min-width:0}
.qd-sp__step h3{margin:0;font-size:var(--qd-fs-h4);line-height:1.25}
.qd-sp__step p{margin:0;color:var(--qd-ink-body);font-size:var(--qd-fs-16,16px);line-height:1.6}
.qd-sp__step .qd-chip{vertical-align:baseline}
.qd-sp__do{display:block;align-self:flex-start;max-width:100%;line-height:1.5;padding:8px 12px 8px 10px;border-radius:var(--qd-r-md);border:1px solid var(--qd-line-2);background:var(--qd-surface-1);color:var(--qd-ink-2)!important;font-size:var(--qd-fs-14)!important}
.qd-sp__do::before{content:"";display:inline-block;vertical-align:-4px;margin-right:8px;width:18px;height:18px;background:var(--qd-grad);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4v12l3-3 2 5 2-1-2-5h4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4v12l3-3 2 5 2-1-2-5h4z'/%3E%3C/svg%3E") center/contain no-repeat}
.qd-sp__do b{color:var(--qd-ink);font-weight:600}
.qd-sp__why{border:1px solid var(--qd-line);border-radius:var(--qd-r-md);background:var(--qd-surface-1);font-size:var(--qd-fs-14);color:var(--qd-ink-2)}
.qd-sp__why summary{padding:9px 12px;cursor:pointer;color:var(--qd-ink-2);font-weight:600;list-style:none;display:flex;align-items:center;gap:8px}
.qd-sp__why summary::-webkit-details-marker{display:none}
.qd-sp__why summary::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform var(--qd-dur-2);margin-left:2px}
.qd-sp__why[open] summary::before{transform:rotate(45deg)}
.qd-sp__why > div{padding:0 12px 12px;line-height:1.6}
.qd-sp__why > div > * + *{margin-top:8px}
.qd-sp__why ul{margin:0;padding-left:1.2em}
.qd-sp__nav{display:flex;align-items:center;gap:12px;margin-top:auto}
.qd-sp__dots{display:flex;flex-wrap:wrap;gap:6px;margin-inline:auto;justify-content:center}
.qd-sp__dots button{width:8px;height:8px;padding:0;border:0;border-radius:var(--qd-r-pill);background:var(--qd-line-2);transition:width var(--qd-dur-3) var(--qd-ease-out),background-color var(--qd-dur-3)}
.qd-sp__dots button[aria-current="step"]{width:24px;background:var(--qd-teal)}
.qd-js .qd-sp__step{visibility:hidden;opacity:0;transform:translate3d(12px,0,0);transition:opacity var(--qd-dur-3) var(--qd-ease-out),transform var(--qd-dur-3) var(--qd-ease-out),visibility 0s linear var(--qd-dur-3)}
.qd-js .qd-sp__step.is-active{visibility:visible;opacity:1;transform:none;transition-delay:0s}
html:not(.qd-js) .qd-sp__steps,html:not(.qd-js) .qd-sp__stage{display:flex;flex-direction:column;gap:20px}
html:not(.qd-js) .qd-sp__vis{position:relative;opacity:1;visibility:visible;transform:none}
html:not(.qd-js) .qd-sp__nav,html:not(.qd-js) .qd-sp__tools{display:none}
.qd-sp__group{margin:0;font:600 11px/1 var(--qd-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--qd-ink-3)}
.qd-prose .qd-sp__step h3{margin-top:0}
.qd-prose .qd-sp p{margin-top:0}
@media (max-width:899px){
  .qd-sp--side .qd-sp__body{grid-template-columns:minmax(0,1fr)}
  .qd-sp__clip--tall{max-width:260px}
}
@media (max-width:639px){
  .qd-sp__dots{display:none}
  .qd-sp{--sp-gap:14px;padding:12px;border-radius:var(--qd-r-lg)}
  .qd-sp__nav{order:-1}
  .qd-sp__tools{width:100%;margin-left:0}
  .qd-sp__list{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .qd-sp__vis,.qd-sp__step,.qd-sp__bar span,.qd-sp__dots button{transition:none}
}

/* ---------- 3. what can go wrong ---------- */
.qd-wrong{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.qd-wrong li{display:block;padding:14px 16px;border-radius:var(--qd-r-md);border:1px solid var(--qd-line);background:var(--qd-glass);font-size:var(--qd-fs-15);line-height:1.5;color:var(--qd-ink-2)}
.qd-wrong li > .qd-chip{display:flex;width:max-content;max-width:100%;height:auto;min-height:26px;margin-bottom:8px;padding-block:4px;white-space:normal;line-height:1.3}
.qd-wrong b{color:var(--qd-ink);font-weight:600}
.qd-prose .qd-wrong li{margin:0}
@media (max-width:639px){.qd-wrong{grid-template-columns:minmax(0,1fr)}}

/* ---------- 4. standalone visuals ---------- */
.qd-vis{margin:1.4em 0}
.qd-vis > .qdw{max-width:none}
.qd-prose .qd-vis + p{margin-top:.8em}
.qd-vis--two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
@media (max-width:899px){.qd-vis--two{grid-template-columns:minmax(0,1fr)}}
/* FAQ kept short; tighten spacing */
.qd-prose .qd-faq{margin-top:.8em}