/* =============================================================================
   SEALED DEMO CARD - styles
   Extracted from showcase/working/sealed-demo/sealed-demo.html, 2026-09-22.
   That file stays the standalone review copy; this is the page build.
   Everything is scoped to .sdemo / .sd-* so it cannot touch styles.css.
   ============================================================================= */

/* ---- card visuals, lifted from the real v11 card ----------------------- */
.sdemo{
  --ground:#FFFBF4; --ground-2:#F4EAD8; --card:#FFFFFF;
  --ink:#0D1526; --ink-soft:#5E6473; --ink-faint:#959AA6;
  --line:#EADFCB; --accent:#C6832C; --accent-deep:#9A6620; --accent-soft:#F7E8CD;
  --deep:#09142C; --btn-bg:#09142C; --cream:#FFF8EC; --badge-bg:#FFF8EC;
  --gold:#B07C1C; --gold-ink:#8A5F12;
  --shadow:0 20px 44px -24px rgba(20,14,10,.5);
  --ring:0 0 0 3px var(--accent-soft);
  position:relative;width:100%;max-width:390px;
}
.sdemo *{box-sizing:border-box}
/* Must win over the display rules below (.sd-pad is grid, .sd-waiting is block). */
.sdemo [hidden]{display:none !important}

/* ---- the stage ----------------------------------------------------------
   During the sequence the whole card has to be visible at once, or beats that
   happen at the top of the card (a reward landing, a reward being handed over)
   play off screen. Scrolling to each beat was tried and rejected: it inched the
   page around and cut off the top of the card (David, 2026-09-22).

   Instead the card steps BACK - one scale, applied once when the sequence
   starts and released once when it ends. Nothing scrolls. The stage carries the
   scaled height so the Play again button below does not float away. */
.sd-stage{
  transition:height .42s cubic-bezier(.3,.8,.35,1);
}
.sd-phone{
  transform-origin:top center;
  transition:transform .42s cubic-bezier(.3,.8,.35,1);
  background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-radius:26px;
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;
  position:relative;
}

.sd-hero{position:relative;height:132px;overflow:hidden;background:var(--deep)}
.sd-hero img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92}
.sd-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,8,6,.12) 0%,rgba(12,8,6,.8) 100%)}

.sd-head{padding:0 22px 20px;margin-top:-40px;position:relative;z-index:2;
  display:flex;flex-direction:column;gap:5px;border-bottom:1px solid var(--line)}
.sd-badge{width:78px;height:78px;border-radius:50%;
  border:4px solid var(--card);background:var(--badge-bg);overflow:hidden;
  box-shadow:0 8px 18px -8px rgba(20,14,10,.55);
  margin-bottom:9px;display:grid;place-items:center}
.sd-badge img{width:86%;height:86%;object-fit:contain;display:block}
.sd-eyebrow{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-deep);font-weight:700}
.sd-shop{font-family:"Fraunces",Georgia,serif;font-weight:900;font-size:27px;
  line-height:1.05;letter-spacing:-.018em;text-wrap:balance;margin:0}
.sd-addr{font-size:12.5px;color:var(--ink-soft)}
.sd-call{color:var(--accent-deep);font-weight:700;white-space:nowrap}

.sd-waiting{background:var(--accent);color:var(--cream)}
.sd-wrow{padding:12px 22px;display:flex;align-items:center;gap:10px;
  font-weight:700;font-size:14.5px}
.sd-wrow + .sd-wrow{border-top:1px solid rgba(255,255,255,.22)}
.sd-wrow .sd-tag{font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  background:rgba(255,255,255,.24);padding:3px 8px;border-radius:999px;flex:none}
.sd-wrow .sd-wname{flex:1;min-width:0}
.sd-wrow .sd-wbtn{flex:none;background:rgba(255,255,255,.95);color:var(--accent-deep);
  font-size:12.5px;font-weight:700;padding:8px 13px;border-radius:9px;border:none;
  font-family:inherit}

.sd-board{padding:26px 22px 8px}
.sd-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px 13px}
.sd-dot{position:relative;aspect-ratio:1;border-radius:50%;display:grid;place-items:center}
.sd-dot .sd-ring{position:absolute;inset:0;border-radius:50%;border:2px dashed var(--line)}
.sd-dot .sd-num{font-size:12px;color:var(--ink-faint);font-variant-numeric:tabular-nums;
  font-weight:500;position:relative;z-index:1}
.sd-dot .sd-mark{position:absolute;inset:9%;display:none}
.sd-dot .sd-mark img{width:100%;height:100%;object-fit:contain;display:block}
.sd-dot.on .sd-ring{display:none}
.sd-dot.on .sd-num{display:none}
.sd-dot.on .sd-mark{display:block}
.sd-dot.ms .sd-ring{border:2.5px solid var(--gold);border-style:solid}
.sd-dot.ms .sd-num{color:var(--gold-ink);font-weight:700}
.sd-dot.ms.on .sd-ring{display:block}
.sd-dot.gs .sd-ring{border-width:3.5px}
.sd-dot.gs .sd-num{font-size:13px}

.sd-legend{padding:2px 22px 0;font-size:11.5px;line-height:1.5;color:var(--ink-faint)}
.sd-legend b{color:var(--gold-ink);font-weight:700}
.sd-legend .sd-key{display:inline-block;width:9px;height:9px;border-radius:50%;
  border:2px solid var(--gold);vertical-align:-1px;margin-right:5px}

.sd-progress{padding:20px 22px 22px;display:flex;flex-direction:column;gap:4px}
.sd-count{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:21px;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  transform-origin:left center;display:inline-block}
.sd-goal{font-size:13.5px;color:var(--ink-soft)}

.sd-receipt{padding:17px 22px 20px;border-top:1px solid var(--line);
  display:flex;gap:11px;align-items:flex-start}
.sd-check{width:22px;height:22px;border-radius:50%;background:var(--deep);
  color:var(--accent);flex:none;display:grid;place-items:center;
  font-size:12px;font-weight:700;margin-top:1px}
.sd-receipt p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.sd-receipt strong{color:var(--ink)}

.sd-actions{border-top:1px solid var(--line);padding:18px 22px 22px;
  display:flex;flex-direction:column;gap:10px}
.sdemo button{font-family:inherit;font-size:15px;font-weight:700;border-radius:13px;
  border:1px solid transparent;padding:14px 16px;cursor:pointer;
  transition:transform .12s ease, filter .12s ease}
.sdemo button:active{transform:scale(.985)}
.sdemo button:focus-visible{outline:none;box-shadow:var(--ring)}
.sd-btn-main{background:var(--btn-bg);color:var(--cream);width:100%}
.sd-btn-main:hover{filter:brightness(1.35)}
.sd-hint{font-size:12px;color:var(--ink-faint);text-align:center}

/* ---- "Now you try" coach mark ------------------------------------------
   Sits above the punch button when the sequence ends. Absolutely positioned so
   nothing on the card shifts when it appears. Disappears on the first tap. */
.sd-punchwrap{position:relative}
.sd-coach{
  position:absolute;left:50%;bottom:calc(100% + 11px);transform:translateX(-50%);
  background:var(--gold);color:#1A1206;z-index:12;
  font-size:13px;font-weight:700;letter-spacing:.01em;white-space:nowrap;
  padding:8px 15px;border-radius:999px;pointer-events:none;
  box-shadow:0 10px 22px -10px rgba(0,0,0,.55);
  animation:sdCoachIn .34s cubic-bezier(.2,.9,.3,1) both, sdCoachFloat 1.9s ease-in-out .34s infinite;
}
.sd-coach-tip{
  position:absolute;left:50%;top:100%;transform:translateX(-50%);
  width:0;height:0;border:7px solid transparent;border-top-color:var(--gold);
}
@keyframes sdCoachIn{
  from{opacity:0;transform:translateX(-50%) translateY(7px) scale(.9)}
  to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}
@keyframes sdCoachFloat{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-4px)}
}
/* The button itself pulses a soft gold ring while the coach mark is up. */
.sd-btn-main.nudge{animation:sdPulse 1.9s ease-out infinite}
@keyframes sdPulse{
  0%{box-shadow:0 0 0 0 rgba(176,124,28,.55)}
  70%{box-shadow:0 0 0 12px rgba(176,124,28,0)}
  100%{box-shadow:0 0 0 0 rgba(176,124,28,0)}
}

.sd-foot{border-top:1px solid var(--line);padding:11px 20px 13px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.sd-review{display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.sd-review svg{width:15px;height:15px;display:block;flex:none}
.sd-attrib{font-size:10px;color:var(--ink-faint);letter-spacing:.04em;white-space:nowrap}

/* ---- keypad: shown, never usable ---------------------------------------- */
.sd-pad{position:absolute;inset:0;background:rgba(16,10,8,.66);
  display:grid;place-items:end center;z-index:20;border-radius:26px;overflow:hidden}
.sd-pad-inner{width:100%;background:var(--card);
  border-top-left-radius:24px;border-top-right-radius:24px;
  padding:22px 22px 24px;display:flex;flex-direction:column;gap:14px;
  animation:sdRise .22s ease-out}
@keyframes sdRise{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
.sd-pad-title{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:19px;margin:0}
.sd-pad-sub{font-size:13px;color:var(--ink-soft);margin:-8px 0 0}
.sd-pips{display:flex;gap:12px;justify-content:center;padding:2px 0 0}
.sd-pip{width:15px;height:15px;border-radius:50%;border:2px solid var(--line);
  transition:background .12s ease, border-color .12s ease}
.sd-pip.set{background:var(--accent);border-color:var(--accent)}
.sd-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.sd-keys div{background:var(--ground-2);color:var(--ink);font-size:19px;font-weight:500;
  font-variant-numeric:tabular-nums;padding:13px 0;border:1px solid var(--line);
  border-radius:13px;text-align:center;transition:transform .1s ease, filter .1s ease}
.sd-keys div.ghost{background:transparent;font-size:13.5px;font-weight:700;color:var(--ink-soft)}
.sd-keys div.press{transform:scale(.93);filter:brightness(.9)}

/* On a short phone the card is taller than the screen, so the keypad has to be
   compact enough to sit fully inside whatever part of the card is on screen.
   The driver also scrolls it into view when it opens. */
@media (max-height:820px){
  .sd-pad-inner{padding:16px 18px 18px;gap:10px}
  .sd-pad-title{font-size:17px}
  .sd-pad-sub{font-size:12px}
  .sd-pips{gap:10px}
  .sd-pip{width:13px;height:13px}
  .sd-keys{gap:7px}
  .sd-keys div{padding:10px 0;font-size:17px;border-radius:11px}
  .sd-keys div.ghost{font-size:12.5px}
}

/* ---- narration panel ----------------------------------------------------
   The first build put a small pill on the hero image at the top of the card.
   David: "nobody will see or read it, i had to focus on them to read as your
   attention is on the punch input" (2026-09-22). He was right - the eye is at
   the keypad, which is at the BOTTOM.

   So the narration sits below the card, in one fixed place, at a size you can
   read without looking for it. It never covers the card, and because it is
   outside the phone frame it reads as narration rather than part of the
   product. A progress bar tells the viewer this is finite. */
.sd-narrate{
  width:100%;background:#111A2E;color:#F2ECE1;
  border:1px solid #223050;border-radius:16px;
  padding:15px 17px 13px;
  animation:sdNarrateIn .3s ease-out both;
}
.sd-narrate-step{
  font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:#E3A44E;margin-bottom:5px;
}
.sd-narrate-title{
  font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:19px;
  line-height:1.2;margin:0 0 5px;color:#FFF8EC;
}
.sd-narrate-body{
  margin:0;font-size:14px;line-height:1.5;color:#C9C2B4;
}
.sd-narrate-track{
  margin-top:12px;height:3px;border-radius:999px;background:#223050;overflow:hidden;
}
.sd-narrate-fill{
  display:block;height:100%;width:0;border-radius:999px;background:#E3A44E;
  transition:width .4s linear;
}
@keyframes sdNarrateIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* Each new step re-runs the entrance so the change is impossible to miss. */
.sd-narrate.step-in{animation:sdStepIn .42s cubic-bezier(.2,.9,.3,1)}
@keyframes sdStepIn{
  0%{transform:scale(.985);box-shadow:0 0 0 0 rgba(227,164,78,.5)}
  45%{transform:scale(1.012);box-shadow:0 0 0 7px rgba(227,164,78,0)}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(227,164,78,0)}
}

/* ---- start / finish overlay --------------------------------------------- */
.sd-veil{
  position:absolute;inset:0;z-index:40;border-radius:26px;
  background:linear-gradient(180deg,rgba(9,20,44,.62) 0%,rgba(9,20,44,.88) 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:26px;text-align:center;
  transition:opacity .3s ease;
}
.sd-veil[hidden]{display:none}
.sd-veil.fade{opacity:0;pointer-events:none}
.sd-veil h3{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:21px;
  color:#FFF8EC;margin:0;line-height:1.25}
.sd-veil p{margin:0;font-size:13px;line-height:1.5;color:#D8CFC0;max-width:270px}
.sd-play{background:#E3A44E;color:#09142C;border:none;border-radius:999px;
  padding:14px 26px;font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;
  box-shadow:0 12px 28px -12px rgba(0,0,0,.8)}
.sd-play:hover{filter:brightness(1.06)}
.sd-play .tri{font-size:12px;line-height:1}

/* ---- under-card bar: note + replay, after the sequence ------------------ */
.sd-underbar{
  width:100%;max-width:390px;display:flex;align-items:center;gap:10px;
  justify-content:center;min-height:38px;
}
.sd-underbar button{
  background:transparent;border:1px solid var(--line,#EADFCB);color:#8d93a3;
  font-family:inherit;font-size:12.5px;font-weight:600;padding:8px 15px;
  border-radius:999px;cursor:pointer;transition:filter .12s ease}
.sd-underbar button:hover{filter:brightness(1.4)}
.sd-underbar .sd-note{font-size:12px;color:#6f7484}

@media (prefers-reduced-motion: reduce){
  .sdemo *{animation:none !important;transition:none !important}
}

/* ---- placement inside the showcase page --------------------------------
   Replaces the old .card-portrait still. The dark bezel and position:sticky
   are deliberately NOT carried over: .sd-phone brings its own frame, and
   sticky fights the scale-and-park the sequence does. */
.card-demo{ width:100%; max-width:380px; margin:0 auto; }
.card-demo .sdemo{ max-width:none; }
.card-demo-fallback{ width:100%; border-radius:27px; display:block; }

@media (max-width: 860px){
  .card-demo{ max-width:min(92vw, 380px); }
}