/* Hitsteps Experience public demo (HIT-6258). Self-contained dark theme that
 * follows the Experience player's dark stage look; the "recorded" shop page
 * inside the frame is drawn light, like the customer's own site would be. */
:root{
  --x-bg:#0b1420;--x-bg-2:#0e1a2a;--x-panel:#101c2e;--x-panel-2:#14243a;--x-raise:#1a2d47;
  --x-line:#223550;--x-ink:#e8eef7;--x-muted:#93a6bf;--x-blue:#80aaff;--x-blue-soft:#1d3456;
  --x-green:#4ade80;--x-amber:#f2b33d;--x-red:#ff9d8a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.xdm{margin:0;background:radial-gradient(1200px 500px at 50% -120px,#10233c 0,rgba(16,35,60,0) 60%),var(--x-bg);color:var(--x-ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--x-blue);text-decoration:none}
a:hover{text-decoration:underline}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---- top bar ---- */
.xdm-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;padding:12px 22px;background:rgba(11,20,32,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--x-line)}
.xdm-brand{display:inline-flex;align-items:center;gap:8px;color:var(--x-ink);font-weight:700;letter-spacing:.01em}
.xdm-brand svg{width:20px;height:20px;fill:var(--x-blue);stroke:none}
.xdm-brand b{font-size:16px}
.xdm-brand-sep{color:var(--x-muted);font-weight:400}
.xdm-brand span{color:var(--x-muted);font-weight:500}
.xdm-top-note{margin-left:auto;color:var(--x-muted);font-size:12px;font-weight:600;text-align:right}
.xdm-btn{color:#fff!important;background:#2f62d6;border:1px solid transparent;border-radius:9px;padding:9px 16px;font-size:14px;font-weight:700;white-space:nowrap;text-decoration:none!important}
.xdm-btn:hover{background:#3d6fe0;box-shadow:0 6px 18px -8px rgba(47,98,214,.55)}
.xdm-btn-big{padding:13px 26px;font-size:16px;border-radius:12px}

/* ---- hero ---- */
main{max-width:1120px;margin:0 auto;padding:0 22px 60px}
.xdm-hero{padding:56px 8px 26px;max-width:780px}
.xdm-eyebrow{margin:0 0 14px;color:var(--x-blue);font-size:12px;font-weight:750;letter-spacing:2.2px;text-transform:uppercase}
.xdm-hero h1{margin:0 0 16px;font-size:clamp(30px,4.6vw,48px);font-weight:750;letter-spacing:-1.6px;line-height:1.12}
.xdm-hero-copy{margin:0;color:var(--x-muted);font-size:16px;line-height:1.7;max-width:640px}
.xdm-cross{margin:16px 0 0;font-size:15px;font-weight:650}
.xdm-badge{display:flex;gap:12px;align-items:flex-start;margin:0 0 26px;padding:13px 16px;border:1px solid #2b4265;border-radius:12px;background:rgba(29,52,86,.32);color:#b9cbe4;font-size:13px}
.xdm-badge svg{width:17px;height:17px;color:var(--x-amber);flex-shrink:0;margin-top:2px}
.xdm-badge b{color:var(--x-ink)}

/* ---- stage: side + view ---- */
.xdm-stage{display:grid;grid-template-columns:320px 1fr;gap:18px;align-items:start}
.xdm-side{background:var(--x-panel);border:1px solid var(--x-line);border-radius:16px;overflow:hidden}
.xdm-side-head{display:flex;align-items:center;gap:10px;padding:18px 20px 6px}
.xdm-side-head h2{margin:0;font-size:16px;font-weight:700}
.xdm-count{background:var(--x-blue-soft);color:#b9d2ff;border-radius:99px;font-size:11px;font-weight:700;padding:2px 9px}
.xdm-side-note{margin:0;padding:0 20px 12px;color:var(--x-muted);font-size:12px}
.xdm-rows{display:flex;flex-direction:column;border-top:1px solid var(--x-line)}
.xdm-row{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:14px 20px;border-bottom:1px solid #19304d;cursor:default}
.xdm-row.is-now{background:linear-gradient(90deg,rgba(128,170,255,.14),rgba(128,170,255,.03))}
.xdm-row .xdm-row-play{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:var(--x-blue-soft);color:var(--x-blue)}
.xdm-row.is-now .xdm-row-play{background:var(--x-blue);color:#0b1420}
.xdm-row.is-now .xdm-row-play svg{fill:currentColor;stroke:none}
.xdm-row b{display:block;font-size:13px;line-height:1.3}
.xdm-row .xdm-row-meta{color:var(--x-muted);font-size:11.5px;margin-top:2px}
.xdm-row .xdm-row-side{text-align:right}
.xdm-row .xdm-row-side b{color:var(--x-muted);font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums}
.xdm-row .xdm-row-side span{display:block;color:#7f97b4;font-size:11.5px;margin-top:2px}
/* HIT-6620: RTL active-row side label sits on the bright gradient edge; lift its contrast to >=4.5:1 there */
.xdm-row.is-now .xdm-row-side span{color:#86a3c2}
.xdm-row .xdm-row-signals{display:flex;gap:1px;justify-content:center;margin-top:4px}
.xdm-dot{width:7px;height:7px;border-radius:50%}
.xdm-dot.click{background:var(--x-blue)}
.xdm-dot.scroll{background:var(--x-green)}
.xdm-dot.error{background:var(--x-red)}
.xdm-dot.form{background:var(--x-amber)}

/* ---- player ---- */
.xdm-view{min-width:0}
.xdm-player{background:var(--x-panel-2);border:1px solid var(--x-line);border-radius:16px;overflow:hidden}
.xdm-player-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--x-line)}
.xdm-player-title{min-width:0}
.xdm-player-title b{font-size:15px}
.xdm-player-title span{display:block;color:var(--x-muted);font-size:12px;margin-top:1px}
.xdm-pill{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font-size:11.5px;font-weight:700;color:#a7f3c8;background:rgba(74,222,128,.1);border:1px solid #1e4d33;border-radius:99px;padding:6px 13px}
.xdm-pill i{width:7px;height:7px;border-radius:50%;background:var(--x-green);animation:xdmPulse 1.8s infinite}
@keyframes xdmPulse{50%{opacity:.35}}

.xdm-frame{position:relative;background:#eef1f5;border-bottom:1px solid var(--x-line);height:420px;overflow:hidden}
.xdm-browser{position:absolute;inset:0;display:flex;flex-direction:column;background:#f6f8fb;border:0}
.xdm-brow{display:flex;align-items:center;gap:12px;padding:11px 14px;background:#e4e8ef;border-bottom:1px solid #d3dae4}
.xdm-brow-dots{display:flex;gap:5px}
.xdm-brow-dots i{width:10px;height:10px;border-radius:50%;background:#ffb3ad}
.xdm-brow-dots i:nth-child(2){background:#ffd98a}
.xdm-brow-dots i:nth-child(3){background:#9fe6a8}
.xdm-brow-url{flex:1;max-width:420px;margin:0 auto;background:#fff;color:#66748a;font-size:11.5px;border:1px solid #d9dfe8;border-radius:7px;padding:5px 12px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.xdm-page{position:relative;flex:1;overflow:hidden;color:#253243;background:#fff}
.xdm-page::-webkit-scrollbar{width:8px}
.xdm-page::-webkit-scrollbar-thumb{background:#c9d2dd;border-radius:8px}
.xdm-nav{display:flex;align-items:center;gap:22px;padding:13px 26px;border-bottom:1px solid #e8ecf1;background:#fff;font-size:13px;color:#3c4a5c}
.xdm-nav b{font-size:15px;color:#16283c}
.xdm-nav-cart{margin-left:auto;font-weight:600}
.xdm-nav-cart em{font-style:normal;background:#1d3456;color:#fff;border-radius:99px;font-size:11px;padding:1px 7px;margin-left:5px;font-weight:700}
.xdm-shop-hero{padding:34px 26px 30px;background:linear-gradient(160deg,#eaf1fb,#f7fbfe);border-bottom:1px solid #e8ecf1}
.xdm-shop-hero h3{margin:0 0 6px;font-size:24px;letter-spacing:-.4px;color:#16283c}
.xdm-shop-hero p{margin:0;color:#5d6d82;font-size:13.5px}
.xdm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:22px 26px}
.xdm-card{border:1px solid #e3e8ef;border-radius:12px;padding:12px;background:#fff}
.xdm-card h4{margin:10px 0 2px;font-size:14px;color:#16283c}
.xdm-card p{margin:0 0 10px;color:#5d6d82;font-size:13px}
.xdm-thumb{height:74px;border-radius:9px;display:grid;place-items:center;font-size:26px}
.xdm-thumb[data-p=mug]{background:#e7f0ff;color:#5f8fe0}
.xdm-thumb[data-p=bowl]{background:#e3f4ec;color:#3fa376}
.xdm-thumb[data-p=plate]{background:#fdead2;color:#c9963f}
.xdm-thumb[data-p=set]{background:#f2e6fa;color:#a070d0}
.xdm-thumb::after{content:"◐"}
.xdm-add{display:block;width:100%;border:1px solid #b9cdff;background:#eaf1ff;color:#1d4fd7;border-radius:8px;padding:8px;font-size:12.5px;font-weight:700;cursor:pointer}
.xdm-add:hover{background:#dce8ff}
.xdm-promo{text-align:center;color:#5d6d82;font-size:12.5px;padding:4px 26px 22px}
.xdm-cart-note{position:absolute;top:64px;right:18px;background:rgba(29,52,86,.97);color:#fff;font-size:12.5px;border-radius:10px;padding:12px 16px;box-shadow:0 14px 30px -12px rgba(10,25,50,.5);animation:xdmIn .25s ease}
.xdm-thanks{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(255,255,255,.97);text-align:center;padding:30px;animation:xdmIn .3s ease}
.xdm-thanks svg{width:44px;height:44px;color:#1fa868;fill:#1fa868;stroke:none;margin-bottom:12px}
.xdm-thanks[hidden]{display:none}
.xdm-cart-note[hidden]{display:none}
@keyframes xdmIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.xdm-cursor-trail{position:absolute;inset:0;width:100%;height:100%;z-index:4;overflow:hidden;pointer-events:none;fill:none;stroke:#386cff;stroke-linecap:round}
@media(prefers-reduced-motion:reduce){.xdm-cursor-trail{display:none}}

.xdm-cursor{position:absolute;z-index:5;width:17px;height:17px;pointer-events:none;opacity:0}
.xdm-cursor::before,.xdm-cursor::after{content:"";position:absolute;border-radius:50%}
.xdm-cursor::before{inset:0;background:rgba(255,255,255,.95);box-shadow:0 0 0 1.5px rgba(20,30,60,.55),0 2px 6px rgba(10,25,50,.45)}
.xdm-cursor::after{inset:-7px;border:1.5px solid rgba(45,90,255,.9);opacity:.55}
.xdm-cursor.is-click::after{transform:scale(1.9);opacity:0;transition:transform .32s ease-out,opacity .32s ease-out}

.xdm-segments{display:flex;gap:6px;padding:14px 16px 6px}
.xdm-seg{flex:1;height:7px;border-radius:4px;background:#26395a;overflow:hidden;position:relative}
.xdm-seg i{position:absolute;inset:0;background:linear-gradient(90deg,#4f7fe0,#80aaff);transform:scaleX(0);transform-origin:left;width:100%}
.xdm-seg.is-done i{transform:scaleX(1)}
.xdm-seg.is-active i{animation:xdmFill var(--x-seg-dur,4s) linear forwards}
@keyframes xdmFill{to{transform:scaleX(1)}}
.xdm-seg-labels{display:flex;gap:6px;padding:4px 16px 10px;font-size:11px;color:var(--x-muted)}
.xdm-seg-labels span{flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xdm-seg-labels span.is-now{color:#bcd4ff;font-weight:700}
.xdm-controls{display:flex;align-items:center;gap:10px;padding:4px 16px 16px}
.xdm-ctl{width:38px;height:38px;border-radius:50%;border:1px solid #2c4569;background:var(--x-panel);color:var(--x-ink);font-size:15px;cursor:pointer;display:grid;place-items:center}
.xdm-ctl:hover{background:var(--x-blue-soft)}
.xdm-time{color:var(--x-muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.xdm-speed{margin-left:auto;color:#cfe0ff;font-size:12px;font-weight:700;border:1px solid #2c4569;border-radius:7px;padding:5px 11px;cursor:pointer;user-select:none}
.xdm-speed:hover{background:var(--x-blue-soft)}
.xdm-speed.is-2{font-size:11px}
.xdm-caption{color:#7f97b4;font-size:11.5px;padding:0 16px 16px}
.xdm-noscript{color:var(--x-muted);padding:16px;border:1px dashed #2c4569;border-radius:12px;margin:22px 0 0}

/* ---- static example heatmap: target-local anchors follow responsive reflow ---- */
.xdm-heatmap{margin-top:32px;background:var(--x-panel-2);border:1px solid var(--x-line);border-radius:16px;overflow:hidden}
.xdm-heatmap-head{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:16px 20px;border-bottom:1px solid var(--x-line)}
.xdm-heatmap-head h2{margin:0;font-size:16px;overflow-wrap:anywhere}
.xdm-heatmap-example{margin-inline-start:auto;color:var(--x-ink);border:1px solid #526b8a;border-radius:99px;padding:4px 10px;font-size:12px}
.xdm-heatmap .xdm-badge{margin:0;border:0;border-radius:0;background:transparent}
.xdm-heatmap-shop{direction:ltr;text-align:left;background:#fff;color:#253243;pointer-events:none;user-select:none}
.xdm-heatmap-shop .xdm-nav{flex-wrap:wrap}
.xdm-heatmap-shop .xdm-shop-hero{padding:20px 26px}
.xdm-heatmap-shop .xdm-grid{grid-template-columns:repeat(4,minmax(0,1fr));padding-top:16px;padding-bottom:16px}
.xdm-heatmap-shop .xdm-card{min-width:0}
.xdm-heatmap-target{position:relative;isolation:isolate}
.xdm-heatmap-add{display:block;width:100%;border:1px solid #b9cdff;background:#eaf1ff;color:#1d4fd7;border-radius:8px;padding:8px;font-size:12.5px;font-weight:700;text-align:center}
.xdm-heatmap-spot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;display:block;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse,rgba(237,48,45,.82) 0,rgba(255,117,54,.72) 20%,rgba(255,219,64,.57) 40%,rgba(40,201,189,.3) 65%,rgba(37,120,239,.1) 82%,rgba(37,120,239,0) 100%)}
.xdm-heatmap-spot-cart{width:min(134px,130%);height:78px}
.xdm-heatmap-spot-thumb{width:min(98px,120%);height:90px;opacity:.85}
.xdm-heatmap-spot-nav{width:74px;height:54px;opacity:.7}
.xdm-heatmap-legend{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px;padding:16px 20px 10px;color:var(--x-ink);font-size:12px}
.xdm-heatmap-legend span{max-width:100%;overflow-wrap:anywhere}
.xdm-heatmap-legend i{flex:0 0 120px;height:8px;border-radius:4px;background:linear-gradient(to right,#2876d2,#22c9ca,#eada50,#fc9a32,#e84137)}
[dir=rtl] .xdm-heatmap-legend i{background:linear-gradient(to left,#2876d2,#22c9ca,#eada50,#fc9a32,#e84137)}
.xdm-heatmap-summary{margin:0;padding:0 20px 16px;color:#b9cbe4;font-size:12px;overflow-wrap:anywhere}
@media(max-width:620px){
  .xdm-heatmap{margin-top:24px}
  .xdm-heatmap-head{padding:14px}
  .xdm-heatmap-shop .xdm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xdm-heatmap-shop .xdm-shop-hero{padding:20px 16px}
  .xdm-heatmap-legend{gap:9px;padding:14px 14px 10px}
  .xdm-heatmap-legend i{flex-basis:90px}
  .xdm-heatmap-summary{padding:0 14px 14px}
}

/* ---- values ---- */
.xdm-values{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.xdm-values article{background:var(--x-panel);border:1px solid var(--x-line);border-radius:16px;padding:24px}
.xdm-value-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--x-blue-soft);color:var(--x-blue);margin-bottom:14px}
.xdm-value-mark svg,.xdm-value-mark::after{width:19px;height:19px}
.xdm-value-mark[data-v=eye]::after{content:"◉"}
.xdm-value-mark[data-v=click]::after{content:"⇱"}
.xdm-value-mark[data-v=flag]::after{content:"⚑"}
.xdm-values h3{margin:0 0 8px;font-size:16px}
.xdm-values p{margin:0;color:var(--x-muted);font-size:13.5px;line-height:1.65}

/* ---- cta ---- */
.xdm-cta{margin-top:44px;background:linear-gradient(150deg,var(--x-panel-2),#0d1a2c 70%);border:1px solid var(--x-line);border-radius:22px;padding:44px 38px;text-align:center}
.xdm-cta h2{margin:0 0 10px;font-size:clamp(24px,3.4vw,34px);letter-spacing:-1px}
.xdm-cta p{margin:0 auto 24px;color:var(--x-muted);max-width:560px;font-size:14.5px}

/* ---- footer ---- */
.xdm-foot{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap;border-top:1px solid var(--x-line);color:#6f85a5;font-size:12px;padding:22px}
.xdm-foot a{color:#8fb0dd}

@media (max-width:900px){
  .xdm-stage{grid-template-columns:1fr}
  .xdm-side-note,.xdm-side-head{padding-left:18px;padding-right:18px}
  .xdm-row{padding-left:18px;padding-right:18px}
  .xdm-top-note{display:none}
  .xdm-values{grid-template-columns:1fr;gap:12px}
}
@media (max-width:620px){
  main{padding:0 14px 44px}
  .xdm-hero{padding:38px 2px 20px}
  .xdm-hero h1{letter-spacing:-1px}
  .xdm-badge{font-size:12.5px}
  .xdm-grid{grid-template-columns:repeat(2,1fr);gap:12px;padding:16px}
  .xdm-nav{gap:12px;padding:11px 14px;font-size:12px;flex-wrap:wrap}
  .xdm-shop-hero{padding:24px 16px}
  .xdm-frame{height:380px}
  .xdm-cta{padding:34px 18px}
  .xdm-player-head{padding:13px 14px}
  .xdm-segments,.xdm-seg-labels{padding-left:14px;padding-right:14px}
  .xdm-controls{padding:4px 14px 14px}
}
@media (prefers-reduced-motion:reduce){
  .xdm-pill i{animation:none}
  .xdm-cursor{transition:none}
}