/* ==========================================================================
   QuantDesk guide kit · qd-guide.css · v1.0 (2026-10-09)
   Visual-first guide parts: hero with a device frame, clip stage + hotspots,
   step player, status board, fixer cards, poster cards. Tokens only, so both
   palettes and both themes work. Load after qd-site.css (and qd-widgets.css).
   Every class starts with qdg-.
   ========================================================================== */

/* ---- hero: promise + chips left, device frame right ---------------------- */
.qdg-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:center;margin-top:clamp(20px,3vw,32px)}
.qdg-hero--phone{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.qdg-hero__copy{min-width:0}
.qdg-hero__media{min-width:0}
.qdg-hero__media .qdw{box-shadow:none;border:0;background:none;overflow:visible;contain:none}
.qdg-hero__media .qdw--bare > .qdw__body{padding:0}
.qdg-hero .qd-lede{margin-top:14px}
.qdg-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding:0;list-style:none}
.qdg-facts li{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px 0 10px;border:1px solid var(--qd-line-2);border-radius:var(--qd-r-pill);background:var(--qd-glass);font:500 var(--qd-fs-13)/1.2 var(--qd-font-body);color:var(--qd-ink-2)}
.qdg-facts li b{font-weight:600;color:var(--qd-ink)}
.qdg-facts .qd-i{font-size:16px;color:var(--qd-ink-3)}
.qdg-hero__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
@media (max-width:1023.98px){.qdg-hero,.qdg-hero--phone{grid-template-columns:minmax(0,1fr)}.qdg-hero__media{order:-1}.qdg-hero--phone .qdg-hero__media .qdw-phone{max-width:280px}}

/* ---- clip stage (window chrome reused from .qd-shot) + play + hotspots --- */
.qdg-stage{position:relative;overflow:hidden;background:var(--qd-bg);line-height:0}
.qdg-stage video,.qdg-stage img{display:block;width:100%;height:auto}
.qdg-stage--modal{max-width:460px;margin-inline:auto}
.qdg-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}
.qdg-play span{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:rgba(7,10,18,.78);border:1px solid rgba(255,255,255,.3);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.qdg-play svg{width:24px;height:24px;fill:#fff;margin-left:4px}
.qdg-play[hidden]{display:none}
.qdg-hots{position:absolute;inset:0;z-index:2;pointer-events:none}
.qdg-hot{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);border-radius:8px;box-shadow:0 0 0 2px var(--qd-teal),0 0 22px 2px rgba(0,224,184,.35);opacity:0;transform:scale(1.06);transition:opacity var(--qd-dur-3) var(--qd-ease-out),transform var(--qd-dur-3) var(--qd-ease-out)}
.qdg-hot.is-on{opacity:1;transform:none}
.qdg-hot__l{position:absolute;left:0;bottom:calc(100% + 8px);display:inline-block;max-width:260px;padding:5px 9px;border-radius:7px;background:#0b1019;color:#eef1f8;border:1px solid #2b3656;font:600 12px/1.3 var(--qd-font-body);white-space:nowrap;letter-spacing:.01em;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.qdg-hot--below .qdg-hot__l{bottom:auto;top:calc(100% + 8px)}
.qdg-hot--right .qdg-hot__l{left:auto;right:0}
@media (max-width:639.98px){.qdg-hot__l{font-size:10.5px;padding:3px 6px;max-width:150px;white-space:normal}.qdg-hot{border-radius:5px}}

/* ---- step player --------------------------------------------------------- */
.qdg-sp{position:relative;margin-top:1.4em;border:1px solid var(--qd-line-2);border-radius:var(--qd-r-xl);background:var(--qd-surface-1);box-shadow:var(--qd-shadow-2);overflow:hidden}
.qdg-sp__head{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--qd-line);background:var(--qd-surface-2)}
.qdg-sp__count{font:600 12px/1 var(--qd-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--qd-ink-3);white-space:nowrap}
.qdg-sp__bar{position:relative;flex:1;height:4px;border-radius:4px;background:var(--qd-surface-3);overflow:hidden}
.qdg-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)}
.qdg-sp__all{position:relative}
.qdg-sp__list{position:absolute;right:12px;top:52px;z-index:5;width:min(360px,calc(100% - 24px));margin:0;padding:8px;list-style:none;border:1px solid var(--qd-line-2);border-radius:var(--qd-r-lg);background:var(--qd-surface-1);box-shadow:var(--qd-shadow-3)}
.qdg-sp__list[hidden]{display:none}
.qdg-sp__list button{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:10px;width:100%;min-height:40px;padding:6px 10px;border:0;border-radius:var(--qd-r-sm);background:none;color:var(--qd-ink-2);font:500 var(--qd-fs-14)/1.35 var(--qd-font-body);text-align:left;cursor:pointer}
.qdg-sp__list button:hover{background:var(--qd-surface-2);color:var(--qd-ink)}
.qdg-sp__list button[aria-current]{color:var(--qd-ink);background:var(--qd-surface-2)}
.qdg-sp__n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--qd-line-2);font:700 12px/1 var(--qd-font-mono);color:var(--qd-ink-3);background:var(--qd-surface-1)}
.qdg-sp__list button[aria-current] .qdg-sp__n{color:var(--qd-on-grad);background:var(--qd-grad);border-color:transparent}
.qdg-sp__steps{margin:0;padding:0;list-style:none}
.qdg-sp__step{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(18px,3vw,32px);align-items:start;padding:clamp(16px,2.4vw,24px)}
.qdg-sp__step[hidden]{display:none}
.qd-js .qdg-sp__step.is-active{animation:qdg-in var(--qd-dur-3) var(--qd-ease-out)}
@keyframes qdg-in{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
.qdg-sp__visual{min-width:0}
.qdg-sp__visual > .qd-shot,.qdg-sp__visual > .qdw{margin:0}
.qdg-sp__visual .qdw{box-shadow:none}
.qdg-sp__text{min-width:0;align-self:center}
.qdg-sp__text h3{margin:0;font:600 var(--qd-fs-h4)/1.3 var(--qd-font-display);color:var(--qd-ink)}
.qdg-sp__text h3 .qdg-sp__n{display:inline-grid;vertical-align:3px;margin-right:10px;color:var(--qd-on-grad);background:var(--qd-grad);border-color:transparent}
.qdg-sp__text p{margin:10px 0 0;font-size:var(--qd-fs-16);line-height:1.6;color:var(--qd-ink-body)}
.qdg-click{position:relative;display:block;margin-top:14px!important;padding:10px 12px 10px 40px;border-radius:var(--qd-r-md);border:1px solid var(--qd-line-2);background:var(--qd-surface-2);font-size:var(--qd-fs-14)!important;line-height:1.5!important;color:var(--qd-ink-2)!important}
.qdg-click::before{content:"";position:absolute;left:12px;top:11px;width:18px;height:18px;background:var(--qd-teal);-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='M5 3l14 8.5-6.2 1.3L9.5 19z'/%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='M5 3l14 8.5-6.2 1.3L9.5 19z'/%3E%3C/svg%3E") center/contain no-repeat}
.qdg-click b{color:var(--qd-ink);font-weight:600}
.qdg-click kbd{font:600 12px/1 var(--qd-font-mono);padding:3px 6px;border-radius:5px;border:1px solid var(--qd-line-2);background:var(--qd-surface-1);color:var(--qd-ink)}
.qdg-sp__text .qd-chip{vertical-align:middle}
.qdg-sp__text details{margin-top:12px;border:1px solid var(--qd-line);border-radius:var(--qd-r-md);background:var(--qd-glass)}
.qdg-sp__text details > summary{padding:9px 12px;font:600 var(--qd-fs-13)/1.3 var(--qd-font-body);color:var(--qd-ink-2);cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
.qdg-sp__text details > summary::-webkit-details-marker{display:none}
.qdg-sp__text details > summary::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--qd-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238490ad' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/9px no-repeat;border:1px solid var(--qd-line-2);transition:transform var(--qd-dur-3) var(--qd-ease-out)}
.qdg-sp__text details[open] > summary::before{transform:rotate(45deg)}
.qdg-sp__text details > div{padding:0 12px 12px;font-size:var(--qd-fs-14);line-height:1.6;color:var(--qd-ink-2)}
.qdg-sp__text details > div p{margin:8px 0 0;font-size:inherit;line-height:inherit;color:inherit}
.qdg-sp__text details ul{margin:8px 0 0;padding-left:1.1em;font-size:inherit}
.qdg-sp__text details li + li{margin-top:4px}
.qdg-sp__nav{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--qd-line);background:var(--qd-surface-2)}
.qdg-sp__dots{display:flex;flex-wrap:wrap;gap:6px;margin-inline:auto}
.qdg-sp__dots button{width:10px;height:10px;padding:0;border:0;border-radius:var(--qd-r-pill);background:var(--qd-line-2);cursor:pointer;transition:width var(--qd-dur-3) var(--qd-ease-out),background-color var(--qd-dur-3)}
.qdg-sp__dots button[aria-current]{width:26px;background:var(--qd-teal)}
html:not(.qd-js) .qdg-sp__nav,html:not(.qd-js) .qdg-sp__all,html:not(.qd-js) .qdg-sp__head{display:none}
html:not(.qd-js) .qdg-sp__step{display:grid!important;border-top:1px solid var(--qd-line)}
.qdg-sp--text-first .qdg-sp__step{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}
.qdg-sp--text-first .qdg-sp__visual{order:2}
.qdg-sp--narrow .qdg-sp__step{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
@media (max-width:899.98px){
  .qdg-sp__step,.qdg-sp--text-first .qdg-sp__step,.qdg-sp--narrow .qdg-sp__step{grid-template-columns:minmax(0,1fr);gap:14px}
  .qdg-sp--text-first .qdg-sp__visual{order:0}
  .qdg-sp__nav{padding:10px 12px}
  .qdg-sp__head{padding:10px 12px;gap:10px}
}
@media (max-width:479.98px){.qdg-sp__dots{display:none}.qdg-sp__nav{justify-content:space-between}}

/* ---- status board -------------------------------------------------------- */
.qdg-board{margin-top:1.4em;border:1px solid var(--qd-line-2);border-radius:var(--qd-r-xl);background:var(--qd-surface-1);box-shadow:var(--qd-shadow-2);overflow:hidden}
.qdg-board__top{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--qd-line);background:var(--qd-surface-2);font:600 12px/1 var(--qd-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--qd-ink-3)}
.qdg-board__top .qd-badge{margin-left:auto;text-transform:none;letter-spacing:0}
.qdg-board__top button{margin-left:auto}
.qdg-board__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0}
.qdg-board__panel{display:flex;flex-direction:column;gap:12px;min-height:220px;padding:18px 20px;border-right:1px solid var(--qd-line)}
.qdg-board__chip{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.qdg-board__chip > .qd-chip{height:34px;padding:0 15px;font-size:14px}
.qdg-board__fam{font:600 11px/1 var(--qd-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--qd-ink-3)}
.qdg-board__row{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;font-size:var(--qd-fs-15);line-height:1.55;color:var(--qd-ink-body)}
.qdg-board__row b{color:var(--qd-ink);font-weight:600}
.qdg-board__k{font:600 11px/1.5 var(--qd-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--qd-ink-3);padding-top:3px}
.qdg-board__chips{padding:16px 20px;display:flex;flex-direction:column;gap:14px}
.qdg-board__gh{font:600 11px/1 var(--qd-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--qd-ink-3);margin:0 0 8px}
.qdg-board__set{display:flex;flex-wrap:wrap;gap:8px}
.qdg-board__set .qd-chip{cursor:pointer;opacity:.62;border-width:1px;transition:opacity var(--qd-dur-3),transform var(--qd-dur-3) var(--qd-ease-out),box-shadow var(--qd-dur-3)}
.qdg-board__set .qd-chip:hover,.qdg-board__set .qd-chip:focus-visible{opacity:1}
.qdg-board__set .qd-chip.is-on{opacity:1;transform:scale(1.08);box-shadow:0 0 0 3px var(--c-soft),0 6px 18px -6px var(--c-line)}
.qdg-board__defs{padding:0 20px 20px}
.qdg-board__defs section{padding:12px 0;border-top:1px solid var(--qd-line);font-size:var(--qd-fs-15);color:var(--qd-ink-body)}
.qdg-board__defs h4{margin:0 0 6px;font:600 var(--qd-fs-15)/1.3 var(--qd-font-body);color:var(--qd-ink)}
.qdg-board__defs p{margin:4px 0 0}
html:not(.qd-js) .qdg-board__defs{display:block!important}
html:not(.qd-js) .qdg-board__panel{display:none}
@media (max-width:767.98px){.qdg-board__body{grid-template-columns:minmax(0,1fr)}.qdg-board__panel{border-right:0;border-bottom:1px solid var(--qd-line);min-height:0}.qdg-board__row{grid-template-columns:minmax(0,1fr);gap:2px}}

/* ---- "what can go wrong" fixer cards ------------------------------------- */
.qdg-fixes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:1.2em 0 0;padding:0;list-style:none}
.qdg-fix{display:flex;flex-direction:column;gap:10px;margin:0;padding:14px 16px;border:1px solid var(--qd-line);border-radius:var(--qd-r-lg);background:var(--qd-glass)}
.qdg-fix__sym{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:600 var(--qd-fs-14)/1.35 var(--qd-font-body);color:var(--qd-ink)}
.qdg-fix__sym .qd-chip{max-width:100%;white-space:normal;height:auto;min-height:26px;padding-block:4px;line-height:1.3;text-align:left}
.qdg-fix p{margin:0;font-size:var(--qd-fs-14);line-height:1.55;color:var(--qd-ink-2)}
.qdg-fix p b{color:var(--qd-ink);font-weight:600}
.qdg-fix--danger{border-left:3px solid var(--qd-err)}
.qdg-fix--warn{border-left:3px solid var(--qd-warn)}
@media (max-width:639.98px){.qdg-fixes{grid-template-columns:minmax(0,1fr)}}

/* ---- "why / details" accordion rows inside prose ------------------------- */
.qdg-why{margin-top:1.2em;display:grid;gap:8px}
.qdg-why .qd-acc > summary{padding:14px 18px;font-size:var(--qd-fs-15)}
.qdg-why .qd-acc__a{font-size:var(--qd-fs-15)}
.qdg-why .qd-table-wrap{margin-top:8px}

/* ---- mini mock UI pieces (connector form, cost tiles) --------------------- */
.qdg-mock{padding:18px;border:1px solid var(--qd-line-2);border-radius:var(--qd-r-lg);background:var(--qd-surface-2);font-size:var(--qd-fs-14);color:var(--qd-ink-2)}
.qdg-mock__t{font:600 var(--qd-fs-15)/1.3 var(--qd-font-body);color:var(--qd-ink);margin:0 0 12px}
.qdg-mock__l{display:block;font:600 11px/1 var(--qd-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--qd-ink-3);margin:12px 0 6px}
.qdg-mock__f{display:flex;align-items:center;min-height:40px;padding:0 12px;border:1px solid var(--qd-line-2);border-radius:var(--qd-r-sm);background:var(--qd-surface-1);color:var(--qd-ink);font:500 13px/1 var(--qd-font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qdg-mock__f.is-empty{color:var(--qd-ink-3)}
.qdg-mock__btns{display:flex;gap:8px;margin-top:14px;justify-content:flex-end}
.qdg-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.qdg-tile{padding:14px 16px;border:1px solid var(--qd-line-2);border-radius:var(--qd-r-md);background:var(--qd-surface-2)}
.qdg-tile__k{font:600 11px/1 var(--qd-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--qd-ink-3)}
.qdg-tile__v{margin-top:6px;font:600 22px/1.2 var(--qd-font-display);color:var(--qd-ink)}
.qdg-tile__s{margin-top:4px;font:400 12.5px/1.4 var(--qd-font-body);color:var(--qd-ink-2)}
.qdg-tile--span{grid-column:1/-1}
@media (max-width:479.98px){.qdg-tiles{grid-template-columns:minmax(0,1fr)}}

/* ---- hub: poster cards + hover clip --------------------------------------- */
.qdg-pc{padding:0;overflow:hidden}
.qdg-pc__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--qd-bg);border-bottom:1px solid var(--qd-line)}
.qdg-pc__media img,.qdg-pc__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.qdg-pc__media video{opacity:0;transition:opacity var(--qd-dur-3)}
.qdg-pc.is-playing .qdg-pc__media video{opacity:1}
.qdg-pc__media--modal img,.qdg-pc__media--modal video{object-fit:contain;object-position:center;background:var(--qd-surface-1)}
.qdg-pc__play{position:absolute;right:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border-radius:7px;background:rgba(7,10,18,.78);color:#eef1f8;border:1px solid rgba(255,255,255,.18);font:600 11px/1 var(--qd-font-mono);letter-spacing:.06em;pointer-events:none}
.qdg-pc__play::before{content:"";width:0;height:0;border-left:7px solid #eef1f8;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.qdg-pc.is-playing .qdg-pc__play{opacity:0}
.qdg-pc__body{display:flex;flex-direction:column;gap:10px;padding:18px 20px 20px}
.qdg-pc__body h3{margin:0}
.qdg-pc__body p{margin:0}
.qdg-journeys .qd-card{padding:0;overflow:hidden}
.qdg-journeys .qdg-j__top{padding:20px 22px 0}
.qdg-journeys .qdw{border:0;border-radius:0;box-shadow:none;border-top:1px solid var(--qd-line);border-bottom:1px solid var(--qd-line);margin-top:16px}
.qdg-journeys .hub-path,.qdg-journeys .hub-path-foot{margin-inline:22px}
.qdg-journeys .hub-path-foot{margin-bottom:18px}
@media (prefers-reduced-motion:reduce){.qdg-hot,.qdg-sp__bar span,.qdg-sp__dots button{transition:none}.qd-js .qdg-sp__step.is-active{animation:none}}
.qdg-hot__l{font-size:max(11px,1em)!important}
/* 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}