/* ds-exit: every sample hands the visitor back to Demo Sprint (Josiah, Oct 19: "they can't get stuck on a sample").
   1 · the closing hand-off band: the sample's own light gives way to Gold Dust, then the deposit
   2 · a small "Get a page like this" pill after ~40% of the page, opening the same hand-off as a sheet
   3 · "This is a sample. Book your real build" under every fake checkout
   Gold Dust: near-black, gold #C8A96A, off-white. Gently alive, never loud; still under reduced motion. */
.dsxh,.dsx-sheet,.dsx-pill,.dsx-real{--dsx-gold:#C8A96A;--dsx-gold-hi:#E7D3A2;--dsx-ink:#F4F1EA;--dsx-muted:#B9B3A6;--dsx-bg:#0B0B0C}

/* ---------- 1 · hand-off band ---------- */
.dsxh{position:relative;padding:56px 16px 64px;background:var(--dsx-bg);overflow:hidden;isolation:isolate}
.dsxh-card{position:relative;max-width:560px;margin:0 auto;padding:34px 22px 30px;border-radius:18px;text-align:center;
  background:linear-gradient(180deg,#141413,#0d0d0d);box-shadow:0 0 0 1px rgba(200,169,106,.22),0 30px 60px -30px rgba(0,0,0,.8);overflow:hidden;isolation:isolate}
.dsxh-glow{position:absolute;inset:0;z-index:-1;pointer-events:none}
.dsxh-glow i{position:absolute;inset:-20%;opacity:0;transition:opacity 1.6s ease}
.dsxh-glow .dsxh-from{opacity:.9;background:radial-gradient(60% 55% at 50% 100%,var(--dsx-from,#888) 0%,transparent 70%)}
.dsxh-glow .dsxh-gold{background:radial-gradient(55% 50% at 50% 38%,rgba(200,169,106,.22),transparent 70%),radial-gradient(80% 60% at 50% 110%,rgba(200,169,106,.16),transparent 70%)}
.dsxh.on .dsxh-glow .dsxh-from{opacity:0}
.dsxh.on .dsxh-glow .dsxh-gold{opacity:1}
/* the sample's light (embers, copper, steam, silver) cooling into gold dust */
.dsxh-dust{position:absolute;inset:0;z-index:-1;pointer-events:none}
.dsxh-dust i{position:absolute;bottom:-8px;width:3px;height:3px;border-radius:50%;background:var(--dsx-from,#888);opacity:0;
  box-shadow:0 0 6px var(--dsx-from,#888);transition:background-color 1.4s ease var(--d,0s),box-shadow 1.4s ease var(--d,0s),width .9s ease var(--d,0s),height .9s ease var(--d,0s),filter 1.2s ease var(--d,0s);
  animation:dsxh-rise var(--t,7s) linear var(--d,0s) infinite;animation-play-state:paused}
.dsxh.live .dsxh-dust i{animation-play-state:running}
.dsxh.on .dsxh-dust i{background:var(--dsx-gold);box-shadow:0 0 5px rgba(200,169,106,.55)}
@keyframes dsxh-rise{0%{transform:translate(0,0);opacity:0}12%{opacity:.75}80%{opacity:.35}100%{transform:translate(var(--x,10px),-340px);opacity:0}}
.dsxh[data-theme="nordika"] .dsxh-dust i{width:26px;height:26px;filter:blur(9px);background:rgba(238,240,238,.55);box-shadow:none}
.dsxh.on[data-theme="nordika"] .dsxh-dust i{width:3px;height:3px;filter:none;background:var(--dsx-gold);box-shadow:0 0 5px rgba(200,169,106,.55)}
.dsxh[data-theme="stellar"] .dsxh-sweep{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(201,128,79,.28) 50%,transparent 65%);background-size:250% 100%;background-position:120% 0;transition:background-position 2.2s ease .1s,opacity 1.6s ease 1.2s}
.dsxh.on[data-theme="stellar"] .dsxh-sweep{background-position:-60% 0;opacity:0}

.dsxh-mark{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--dsx-ink);text-decoration:none;opacity:0;transform:translateY(6px) scale(.96);transition:opacity .9s ease .7s,transform .9s ease .7s}
.dsxh.on .dsxh-mark{opacity:1;transform:none}
.dsxh-mark svg{width:30px;height:30px;flex:none}.dsxh-mark img{height:35px;width:auto;display:block}
.dsxh-mark b{font:600 13px/1 ui-sans-serif,system-ui,-apple-system,sans-serif;letter-spacing:.22em}
.dsxh-mark em{font:italic 400 19px/1 Georgia,'Times New Roman',serif;letter-spacing:.01em;color:var(--dsx-ink)}
.dsxh-eye{margin:14px 0 0;font:500 11.5px/1.4 ui-sans-serif,system-ui,-apple-system,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--dsx-gold)}
.dsxh h2{margin:10px auto 0;max-width:20ch;font-family:inherit;font-weight:500;font-size:clamp(25px,6.6vw,34px);line-height:1.14;color:var(--dsx-ink);text-transform:none;letter-spacing:0}
.dsxh h2 em{font-style:italic;color:var(--dsx-gold);text-shadow:0 0 18px rgba(200,169,106,.35)}
.dsxh-sub{margin:10px auto 0;max-width:34ch;font:400 16px/1.5 ui-sans-serif,system-ui,-apple-system,sans-serif;color:var(--dsx-muted)}
.dsxh-actions{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:22px}
.dsxh-btn,.dsx-sheet .dsxh-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;width:100%;max-width:380px;padding:6px 16px;border-radius:999px;overflow:hidden;text-align:center;
  background:linear-gradient(180deg,#F4F1EA,#E9E3D5);color:#0B0B0C;font:600 15px/1.25 ui-sans-serif,system-ui,-apple-system,sans-serif;text-decoration:none;box-shadow:0 0 0 1px rgba(200,169,106,.55),0 10px 26px -12px rgba(200,169,106,.55)}
.dsxh-btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,240,200,.85),transparent);transform:skewX(-18deg);animation:dsxh-foil 5.6s ease-in-out 1.2s infinite}
@keyframes dsxh-foil{0%,62%{left:-60%}86%,100%{left:130%}}
.dsxh-btn svg{width:16px;height:16px;flex:none}
.dsxh-link{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;color:var(--dsx-ink);font:500 15px/1.2 ui-sans-serif,system-ui,-apple-system,sans-serif;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(200,169,106,.6)}
.dsxh-fine{margin:6px 0 0;font:400 13px/1.4 ui-sans-serif,system-ui,-apple-system,sans-serif;color:var(--dsx-muted)}
.dsxh-btn:focus-visible,.dsxh-link:focus-visible,.dsxh-mark:focus-visible,.dsx-pill button:focus-visible{outline:2px solid var(--dsx-gold);outline-offset:3px}

/* ---------- 2 · the mark: a round gold Demo Sprint mark that says its name once, then stays small ---------- */
.dsx-pill{position:fixed;left:12px;bottom:calc(12px + var(--dsx-lift,0px));z-index:60;display:flex;align-items:center;gap:2px;
  opacity:0;transform:translateY(10px) scale(.92);pointer-events:none;transition:opacity .35s ease,transform .35s ease,bottom .35s ease}
.dsx-pill.show{opacity:1;transform:none;pointer-events:auto}
.dsx-pill button{appearance:none;border:0;background:none;color:var(--dsx-ink);cursor:pointer;min-height:44px;padding:0;font:500 14px/1 ui-sans-serif,system-ui,-apple-system,sans-serif}
.dsx-pill .dsx-open{display:inline-flex;align-items:center;height:44px;min-width:44px;padding:0 8px;border-radius:999px;background:rgba(11,11,12,.96);
  box-shadow:0 0 0 1px rgba(200,169,106,.45),0 10px 24px -10px rgba(0,0,0,.75),0 0 18px -6px rgba(200,169,106,.5)}
.dsx-pill .dsx-open svg{width:28px;height:28px;flex:none}
.dsx-pill .dsx-open span{display:inline-block;max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .5s ease,opacity .35s ease,margin .5s ease}
.dsx-pill.wide .dsx-open span{max-width:260px;opacity:1;margin:0 4px 0 9px}
.dsx-pill .dsx-x{display:inline-grid;place-items:center;width:44px;height:44px}
.dsx-pill .dsx-x i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(11,11,12,.9);box-shadow:0 0 0 1px rgba(200,169,106,.35);color:var(--dsx-muted);font:400 15px/1 ui-sans-serif,system-ui,sans-serif;font-style:normal}

/* ---------- the sheet the pill opens (same hand-off) ---------- */
.dsx-sheet{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .35s ease}
.dsx-sheet.open{opacity:1;pointer-events:auto}
.dsx-sheet .dsxh{width:100%;max-width:600px;padding:0 10px calc(10px + env(safe-area-inset-bottom,0));background:none;transform:translateY(24px);transition:transform .45s cubic-bezier(.2,.9,.3,1)}
.dsx-sheet.open .dsxh{transform:none}
.dsx-sheet .dsxh-x{position:absolute;top:8px;right:8px;z-index:2;width:44px;height:44px;border:0;background:none;color:var(--dsx-muted);font-size:22px;cursor:pointer}
@media (min-width:700px){.dsx-sheet{align-items:center}.dsx-sheet .dsxh{padding:0}}

/* ---------- 3 · under fake checkouts ---------- */
.dsx-real{display:block;margin:14px auto 0;max-width:340px;text-align:center;font:400 14px/1.45 ui-sans-serif,system-ui,-apple-system,sans-serif;color:inherit;opacity:.92}
.dsx-real a{display:inline-flex;align-items:center;min-height:44px;color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--dsx-gold)}

/* the one quiet note at a concept's payment step */
.dsx-note{margin:10px 0 0;font:400 13px/1.4 ui-sans-serif,system-ui,-apple-system,sans-serif;opacity:.72;text-align:center}

/* Alpha: the silver seal turns gold at the end */
.dsx-goldseal{transition:filter 1.6s ease .9s}
.dsx-goldseal.gold{filter:sepia(1) saturate(1.9) hue-rotate(-8deg) brightness(.98)}

@media (prefers-reduced-motion:reduce){
  .dsxh-dust,.dsxh-sweep{display:none}
  .dsxh-glow i,.dsxh-mark,.dsx-pill,.dsx-sheet,.dsx-sheet .dsxh,.dsx-goldseal{transition:none}
  .dsxh-glow .dsxh-from{opacity:0}.dsxh-glow .dsxh-gold{opacity:1}.dsxh-mark{opacity:1;transform:none}
  .dsxh-btn::after{animation:none;display:none}
}

/* Alpha: the hand-off sits on the last screen, under "Back to the start" */
.dsxh.dsxh-in{background:none;padding:26px 0 0;text-align:center}
.dsxh.dsxh-in .dsxh-card{margin:0 auto}
/* Nórdika: the desktop thermometer runs down the left edge */
@media (min-width:1024px){.dsx-pill[data-sample="nordika"]{left:84px}}

/* fix pass Oct 19: the pill never runs off a phone, its name fits uncut in both languages (wraps to two lines at 320),
   and a spacer at the end of the page gives it clear ground so it never sits on the last lines */
.dsx-pill{max-width:calc(100vw - 24px)}
.dsx-pill .dsx-open{min-width:44px;min-height:44px;height:auto;box-sizing:border-box}
.dsx-spacer{height:0}
@media (max-width:1023px){.dsx-spacer{height:64px}}
@media (max-width:430px){
  .dsx-pill .dsx-open span{transition:opacity .35s ease}
  .dsx-pill.wide .dsx-open span{white-space:normal;max-width:calc(100vw - 24px - 44px - 66px);font-size:13px;line-height:1.2;text-wrap:balance;padding:5px 0}
}
@media (max-width:430px){.dsxh-btn,.dsx-sheet .dsxh-btn{font-size:14px;gap:6px;padding:6px 12px;text-wrap:balance}}

/* Tidwell (Nov 5): same band as the lifestyle Stellar */
.dsxh[data-theme="tidwell"] .dsxh-sweep{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(201,128,79,.28) 50%,transparent 65%);background-size:250% 100%;background-position:120% 0;transition:background-position 2.2s ease .1s,opacity 1.6s ease 1.2s}
.dsxh.on[data-theme="tidwell"] .dsxh-sweep{background-position:-60% 0;opacity:0}