@font-face{
  font-family:"Outfit";
  src:url("fonts/outfit.woff2") format("woff2");
  font-weight:300 700;
  font-style:normal;
  font-display:swap;
}
/* Dreckly Digital demo guide — overlays a client site without becoming part of it */
:root{
  --dd-bg:#0b0b14;
  --dd-bg-2:#171724;
  --dd-fg:#f4f4f8;
  --dd-mut:#a3a3b8;
  --dd-lime:#c6ff3d;
  --dd-pink:#ff3d8b;
  --dd-cyan:#3df5ff;
  --dd-line:#2a2a3d;
  --dd-bar-h:0px;
}
html.dd-guide-on{scroll-padding-top:calc(var(--dd-bar-h) + 16px)}
.dd-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.dd-bar{
  position:sticky;top:0;z-index:8000;
  display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap;
  background:var(--dd-bg);color:var(--dd-fg);
  border-bottom:1px solid var(--dd-line);
  padding:10px 16px;font:600 14px/1.35 "Outfit","Inter",system-ui,sans-serif;
  box-sizing:border-box;
}
.dd-bar *{box-sizing:border-box}
.dd-brand{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--dd-lime);font-weight:700;letter-spacing:-.02em;text-decoration:none;white-space:nowrap;
}
.dd-brand:hover{color:#fff}
.dd-brand svg{width:18px;height:18px;flex:none}
.dd-meta{color:var(--dd-fg);flex:1 1 auto;min-width:12em}
.dd-meta strong{font-weight:700}
.dd-meta .dd-price{color:var(--dd-lime);font-weight:700}
.dd-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.dd-btn{
  appearance:none;border:2px solid var(--dd-lime);background:var(--dd-lime);color:#0b0b14;
  font:700 13px/1 "Outfit","Inter",system-ui,sans-serif;
  padding:.55em .9em;border-radius:10px;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
}
.dd-btn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--dd-pink)}
.dd-btn-ghost{background:transparent;color:var(--dd-fg);border-color:var(--dd-fg)}
.dd-btn-ghost:hover{box-shadow:3px 3px 0 var(--dd-cyan);color:#fff}
.dd-icon-btn{
  appearance:none;background:transparent;border:0;color:var(--dd-mut);
  width:36px;height:36px;border-radius:8px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;font-size:20px;line-height:1;
}
.dd-icon-btn:hover,.dd-icon-btn:focus-visible{color:var(--dd-fg);background:var(--dd-bg-2)}
.dd-bar a:focus-visible,.dd-bar button:focus-visible,
.dd-spot:focus-visible,.dd-popover button:focus-visible,.dd-show:focus-visible{
  outline:3px solid var(--dd-cyan);outline-offset:2px;
}

/* Hotspots */
.dd-spot{
  position:relative;z-index:40;
  appearance:none;border:0;cursor:pointer;
  width:26px;height:26px;border-radius:50%;
  background:var(--dd-bg);color:var(--dd-lime);
  border:2px solid var(--dd-lime);
  font:700 12px/1 "Outfit","Inter",system-ui,sans-serif;
  display:inline-flex;align-items:center;justify-content:center;
  vertical-align:middle;margin:0 0 0 .4em;
  box-shadow:0 0 0 3px rgba(198,255,61,.18);
  flex:none;
}
.dd-spot:hover,.dd-spot[aria-expanded="true"]{
  background:var(--dd-lime);color:#0b0b14;
  box-shadow:0 0 0 5px rgba(198,255,61,.28);
}
.dd-spot-addon{
  background:var(--dd-bg);color:var(--dd-pink);border-style:dashed;border-color:var(--dd-pink);
  box-shadow:none;
}
.dd-spot-addon:hover,.dd-spot-addon[aria-expanded="true"]{
  background:var(--dd-pink);color:#fff;border-style:solid;
  box-shadow:0 0 0 5px rgba(255,61,139,.25);
}
.dd-label{
  display:inline-flex;align-items:center;gap:.15em;
}
.dd-addon-chip{
  display:inline-flex;align-items:center;gap:.4em;
  border:1.5px dashed #8a1048;
  color:#8a1048;background:#fff5f8;
  border-radius:999px;padding:.2em .7em .2em .45em;
  font:700 12px/1.2 "Outfit","Inter",system-ui,sans-serif;
  letter-spacing:.01em;
}

/* Ghosted add-on modules */
.dd-ghost{
  position:relative;
  outline:2px dashed rgba(255,61,139,.55);
  outline-offset:4px;
  border-radius:12px;
}
.dd-ghost::after{
  content:none;
}

/* Popover */
.dd-popover{
  position:fixed;z-index:8100;width:min(22.5rem,calc(100vw - 24px));
  background:var(--dd-bg);color:var(--dd-fg);
  border:1px solid var(--dd-line);border-radius:16px;
  padding:18px 18px 14px;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  font:15px/1.5 "Outfit","Inter",system-ui,sans-serif;
}
.dd-popover[hidden]{display:none}
.dd-kicker{
  display:inline-flex;align-items:center;gap:6px;
  font:700 11px/1 "Outfit",system-ui,sans-serif;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--dd-lime);margin:0 0 8px;
}
.dd-kicker.addon{color:var(--dd-pink)}
.dd-popover h2{font:700 1.15rem/1.25 "Outfit",system-ui,sans-serif;letter-spacing:-.03em;margin:0 0 8px;color:#fff}
.dd-popover .dd-body{margin:0 0 14px;color:var(--dd-mut)}
.dd-pop-nav{display:flex;align-items:center;gap:8px;border-top:1px solid var(--dd-line);padding-top:12px}
.dd-pop-nav .dd-stepcount{color:var(--dd-mut);font-size:12px;margin-right:auto}
.dd-popover .dd-btn{padding:.45em .75em;font-size:12px}
.dd-pop-close{margin-left:4px}

/* Restore control when the whole guide is hidden */
.dd-show{
  position:fixed;z-index:8000;right:16px;bottom:16px;
  appearance:none;border:2px solid var(--dd-lime);background:var(--dd-bg);color:var(--dd-lime);
  font:700 13px/1 "Outfit",system-ui,sans-serif;
  padding:.7em 1em;border-radius:999px;cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.dd-show[hidden]{display:none}

/* Hidden guide: no bar, no spots, no popover */
html.dd-guide-off .dd-bar,
html.dd-guide-off .dd-spot,
html.dd-guide-off .dd-popover,
html.dd-guide-off .dd-addon-chip,
html.dd-guide-off .dd-ghost{ /* keep ghosted modules? when guide off, show them clean */
}
html.dd-guide-off .dd-bar,
html.dd-guide-off .dd-spot,
html.dd-guide-off .dd-popover,
html.dd-guide-off .dd-addon-chip{display:none !important}
html.dd-guide-off .dd-ghost{
  outline:none;opacity:1;filter:none;
}
html.dd-bar-dismissed .dd-bar{display:none !important}

/* Demo form toast */
.dd-toast{
  position:fixed;z-index:8200;left:50%;bottom:24px;transform:translateX(-50%);
  background:var(--dd-bg);color:var(--dd-fg);
  border:1px solid var(--dd-lime);border-radius:14px;
  padding:14px 18px;max-width:min(28rem,calc(100vw - 24px));
  box-shadow:0 16px 40px rgba(0,0,0,.4);
  font:600 15px/1.4 "Outfit",system-ui,sans-serif;
}
.dd-toast[hidden]{display:none}
.dd-toast p{margin:0}
.dd-toast button{margin-top:8px}

@media (max-width:720px){
  .dd-bar{padding:10px 44px 12px 12px;gap:8px 10px;position:relative}
  .dd-meta{flex:1 1 100%;font-size:13px}
  .dd-actions{width:100%;margin-left:0}
  .dd-btn{flex:1 1 calc(33% - 8px)}
  .dd-bar > .dd-actions .dd-icon-btn,
  .dd-bar .dd-icon-btn[data-dd="dismiss"]{
    position:absolute;top:6px;right:6px;flex:none;
  }
}
@media (prefers-reduced-motion:reduce){
  .dd-btn:hover,.dd-spot{transition:none}
  .dd-bar,.dd-popover,.dd-spot,.dd-btn{transition:none !important}
  .dd-btn:hover{transform:none;box-shadow:none}
}

p.dd-addon-chip.dd-addon-chip{color:#8a1048;background:#fff5f8}