/* SignCard player. Brand: TRPL Brand Identity System & Guidelines (colors p.11, type p.15-16).
   One fixed stage; steps replace each other in place. Desktop 16:9, tablet 4:5, phone 9:16. */
:root{
  --bright-forest:#8FC895; --night-sky:#092A4D; --dark-forest:#1B4532;
  --sand:#D1CCBD; --dark-gray:#25282A; --deep-orange:#E7805D;
  --sunset-pink:#F36079; --sunset-yellow:#F9D635; --spring-green:#87BB41;
  --gray-sky:#99ADC5; --sunset-orange:#FC924E; --white:#FFFFFF;
  --paper:#FBF8F1; --ink:#1d2b44;
  --display:"Dharma Gothic E","Dharma Gothic E Fallback","Oswald","Arial Narrow",sans-serif;
  --serif:"Clearface","Clearface Fallback",Georgia,serif;
  --sans:"Frutiger","Frutiger Fallback","Helvetica Neue",Arial,sans-serif;
  --script:"Mrs Saint Delafield","Brush Script MT",cursive;
  --bg:var(--night-sky); --fg:var(--white); --accent:var(--sunset-yellow); --accent2:var(--deep-orange);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);-webkit-font-smoothing:antialiased}
body.is-embed{background:transparent}
button{font:inherit;cursor:pointer}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
[tabindex="-1"]:focus{outline:none}

.sc{max-width:1280px;margin:0 auto}
.sc.theme-dark-forest{--bg:var(--dark-forest);--accent:var(--spring-green)}
.sc.theme-dark-gray{--bg:var(--dark-gray);--accent:var(--sunset-orange)}
.sc-loading{aspect-ratio:16/9;display:grid;place-items:center}
.sc-spinner{width:44px;height:44px;border-radius:50%;border:4px solid rgba(255,255,255,.2);border-top-color:var(--accent);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeIn{to{opacity:1}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Stage + steps ---------- */
.stage{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--bg);container-type:size;isolation:isolate}
@media (max-width:899px){.stage{aspect-ratio:4/5}}
@media (max-width:599px){.stage{aspect-ratio:9/16}}
.step{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateX(3%);
  transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1),visibility 0s linear .6s}
.step.before{transform:translateX(-3%)}
.step.on{opacity:1;visibility:visible;transform:none;transition:opacity .5s ease .1s,transform .6s cubic-bezier(.2,.8,.2,1) .1s,visibility 0s}

/* ---------- Type + buttons ---------- */
.dh{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:.9;margin:0}
.dh .acc{color:var(--accent)}
.kicker{font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--accent);margin:0 0 10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:2px;
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:24px;line-height:1;
  padding:13px 24px 11px;background:var(--accent2);color:var(--white);text-decoration:none;
  box-shadow:0 5px 0 rgba(0,0,0,.25);transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 rgba(0,0,0,.25)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.25)}
.btn[disabled]{opacity:.6;cursor:default;transform:none}
.btn.alt{background:var(--accent);color:var(--night-sky)}
.btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.link{background:none;border:0;padding:0;color:inherit;text-decoration:underline;text-underline-offset:3px;font-size:14px;opacity:.85}
.empty-note{font-family:var(--serif);font-size:20px;opacity:.85;text-align:center;max-width:26em;margin:auto}

/* =========================================================
   OPENER
   ========================================================= */
.op-bg{position:absolute;inset:0;background:#333 center 60%/cover no-repeat;transform:scale(1.08);opacity:0;transition:opacity 1.2s ease,transform 7s cubic-bezier(.2,.6,.2,1)}
.op.go .op-bg{opacity:1;transform:scale(1)}
.op-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,42,77,.94) 0%,rgba(9,42,77,.82) 30%,rgba(9,42,77,.15) 62%,rgba(9,42,77,0) 100%),
  linear-gradient(0deg,rgba(9,42,77,.55) 0%,rgba(9,42,77,0) 30%)}
.op-tr{position:absolute;z-index:3;left:68%;bottom:-8%;height:96%;transform:translate(-50%,6%);opacity:0;
  transition:opacity .9s .5s ease,transform 1.2s .5s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 18px 30px rgba(0,0,0,.4))}
.op-tr img{height:100%;width:auto;display:block}
.op.go .op-tr{opacity:1;transform:translate(-50%,0)}
.op-cake{position:absolute;z-index:4;left:68%;bottom:-1%;width:24%;transform:translate(-50%,24%);opacity:0;cursor:pointer;
  transition:opacity .7s 1.1s ease,transform .9s 1.1s cubic-bezier(.2,.8,.2,1);-webkit-tap-highlight-color:transparent}
.op.go .op-cake{opacity:1;transform:translate(-50%,0)}
.op-cake svg{width:100%;height:auto;display:block;overflow:visible}
.op-cake:focus-visible{outline:none}
.op-cake:focus-visible svg{filter:drop-shadow(0 0 10px var(--accent))}
.flame{transform-box:fill-box;transform-origin:50% 100%;opacity:0;transform:scale(0)}
.flame.lit{opacity:1;transform:scale(1);transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .2s}
.flame.lit .fl{animation:flicker .2s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 100%}
.flame:nth-child(2n).lit .fl{animation-duration:.24s}
@keyframes flicker{from{transform:scale(1,1) skewX(0)}to{transform:scale(.94,1.06) skewX(2deg)}}
.flame.out{opacity:0;transform:scale(.1,.5) rotate(30deg) translateX(6px);transition:transform .35s ease-in,opacity .35s ease-in}
.glow{opacity:.5;transition:opacity .4s}
.op.blown .glow{opacity:0}
.smoke{opacity:0;transform-box:fill-box;transform-origin:50% 100%}
.op.blown .smoke{animation:smoke 1.8s ease-out forwards}
@keyframes smoke{0%{opacity:.7;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(12px,-44px) scale(1.8)}}
.gust path{stroke-dasharray:420;stroke-dashoffset:420;opacity:0}
.op.blowing .gust path{animation:gust .7s ease-out forwards}
.op.blowing .gust path:nth-child(2){animation-delay:.08s}
.op.blowing .gust path:nth-child(3){animation-delay:.16s}
@keyframes gust{0%{opacity:.9;stroke-dashoffset:420}70%{opacity:.9}100%{opacity:0;stroke-dashoffset:-420}}
.op-copy{position:absolute;z-index:5;left:5%;top:0;bottom:0;width:42%;display:flex;flex-direction:column;justify-content:center}
.op-copy>*{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.op.go .op-copy>*{opacity:1;transform:none}
.op.go .op-copy>:nth-child(2){transition-delay:.15s}
.op.go .op-copy>:nth-child(3){transition-delay:.3s}
.op-copy .mark{width:clamp(110px,13cqw,170px);height:auto;margin-bottom:clamp(14px,2.4cqw,30px)}
.op-copy h1{font-size:clamp(40px,7.4cqw,104px);color:var(--white)}
.op .op-copy .op-ask{opacity:0;transform:translateY(10px);margin-top:clamp(12px,2.2cqw,28px)}
.op.ready .op-copy .op-ask{opacity:1;transform:none}
.op-ask p{font-family:var(--serif);font-size:clamp(16px,1.7cqw,21px);line-height:1.35;margin:0 0 16px;max-width:24em}
.op-ask .row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.mic{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px;padding:6px 2px;opacity:.9}
.mic svg{width:16px;height:16px}
.mic-meter{display:none;height:6px;width:90px;background:rgba(255,255,255,.2);border-radius:3px;overflow:hidden}
.mic-meter i{display:block;height:100%;width:0;background:var(--accent);transition:width .08s}
.mic.on + .mic-meter{display:block}
.op-skip{position:absolute;z-index:8;right:12px;top:10px;background:rgba(0,0,0,.35);color:#fff;border:0;border-radius:20px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:7px 12px}
.op-confetti{position:absolute;inset:0;z-index:6;pointer-events:none;width:100%;height:100%}
.op-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.op-novideo{display:grid;place-items:center;color:#fff}
@media (max-width:899px){
  .op-shade{background:linear-gradient(180deg,rgba(9,42,77,.95) 0%,rgba(9,42,77,.75) 34%,rgba(9,42,77,0) 58%)}
  .op-copy{left:6%;right:6%;top:6%;bottom:auto;width:auto;display:block}
  .op-copy .mark{display:none}
  .op-copy h1{font-size:clamp(40px,12cqw,72px)}
  .op-ask p{font-size:16px;margin-bottom:12px}
  .op-tr{left:50%;height:72%;bottom:-4%}
  .op-cake{left:50%;width:52%}
}

/* =========================================================
   CARD STEP
   ========================================================= */
.s-card{--pw:62.86cqh;--ph:88cqh}
.book{position:absolute;left:50%;top:6cqh;width:calc(var(--pw) * 2);height:var(--ph);transform:translateX(-50%);perspective:2400px}
.page{position:absolute;background:var(--paper);color:var(--ink);border-radius:4px;box-shadow:0 30px 60px rgba(0,0,0,.4);overflow:hidden}
.page-right{left:50%;top:0;width:50%;height:100%;border-radius:0 4px 4px 0}
.page-pad{position:absolute;inset:0;padding:clamp(18px,3.4cqh,32px);overflow:auto;display:flex;flex-direction:column}
.leaf{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:0 50%;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.6,0,.2,1);z-index:2}
.leaf-front,.leaf-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:4px}
.leaf-back{transform:rotateY(180deg);border-radius:4px 0 0 4px}
.s-card.is-open .leaf{transform:rotateY(-180deg)}
/* Children of the cover sit on their own layers and ignore the parent's backface rule in some browsers,
   so the front is hidden outright once the leaf passes 90 degrees (and the back until it does). */
.leaf-front *{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.leaf-front{transition:visibility 0s linear .5s}
.s-card.is-open .leaf-front{visibility:hidden}
.leaf-back{visibility:hidden;transition:visibility 0s linear .5s}
.s-card.is-open .leaf-back{visibility:visible}
.s-card.no-anim .leaf-front,.s-card.no-anim .leaf-back{transition:none}
.s-card.no-anim .leaf,.s-card.no-anim .invite,.s-card.no-anim .book{transition:none!important}
.mobile-greet{display:none}

.invite{position:absolute;z-index:3;top:6cqh;height:var(--ph);left:calc(50% - var(--pw));width:var(--pw);display:flex;flex-direction:column;justify-content:center;
  padding-right:5%;transition:opacity .4s ease,transform .5s ease}
.s-card.is-open .invite{opacity:0;transform:translateX(-20px);pointer-events:none}
.invite .dh{font-size:clamp(44px,6.4cqw,96px);color:var(--accent)}
.invite p{font-family:var(--serif);font-size:clamp(17px,1.7cqw,22px);line-height:1.35;margin:14px 0 22px}
.invite .meta{font-size:13px;margin:16px 0 10px;font-family:var(--sans)}
.invite .count{font-family:var(--display);font-weight:700;font-size:26px;color:var(--accent);letter-spacing:.02em}
.invite .link{align-self:flex-start;margin-top:4px}

/* cover */
.cover{position:absolute;inset:0;overflow:hidden;background:var(--deep-orange);color:var(--white);cursor:pointer;container-type:inline-size;border-radius:4px;
  box-shadow:0 30px 60px rgba(0,0,0,.4)}
.cover-num{position:absolute;left:50%;top:27%;transform:translateX(-50%);font-family:var(--display);font-weight:800;font-size:72cqw;line-height:.8;color:var(--sunset-yellow)}
.cover-tr{position:absolute;left:50%;bottom:12%;width:94%;transform:translateX(-50%);filter:drop-shadow(0 10px 20px rgba(0,0,0,.35))}
.cover-title{position:absolute;left:7%;right:7%;top:6%;font-size:13cqw;color:var(--white);text-shadow:0 3px 0 rgba(0,0,0,.18)}
.cover-band{position:absolute;left:0;right:0;bottom:0;height:12%;background:var(--night-sky);display:flex;align-items:center;justify-content:space-between;padding:0 7%;z-index:2}
.cover-mark{width:34%;height:auto}
.cover-band span{font-size:3cqw;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sunset-yellow)}
.cover-hint{position:absolute;left:50%;bottom:15%;translate:-50% 0;z-index:3;background:var(--night-sky);color:#fff;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:6px 9px;border-radius:2px;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-4px)}}

/* inside */
.greet{font-family:var(--serif);font-weight:500;font-size:clamp(24px,4.4cqh,38px);line-height:1.1;color:var(--night-sky);margin:0}
.greet-sub{font-family:var(--serif);font-style:italic;font-size:16px;color:#5d5a52;margin:8px 0 0}
.sigs{display:flex;flex-wrap:wrap;gap:0 16px;align-items:baseline;justify-content:center;align-content:flex-start;padding:16px 4px 6px;margin:16px 0 0;border-top:1px solid #e3ddd0;flex:1;overflow:hidden}
.sig{font-family:var(--script);font-size:clamp(26px,4.4cqh,34px);line-height:1.25;white-space:nowrap;color:var(--c,#1d2b44);transform:rotate(var(--r,0deg))}
.sigs .more{flex-basis:100%;text-align:center;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#7b766b;margin-top:6px}
.sigs .empty{font-family:var(--serif);font-style:italic;color:#7b766b;margin:auto}
.sign-area{flex:1;display:flex;flex-direction:column;justify-content:center}

.form{display:grid;gap:11px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fld label{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#6b665b;margin-bottom:3px}
.fld label .opt{font-weight:400;text-transform:none;letter-spacing:0;color:#8b867b}
.fld input,.fld textarea{width:100%;font-family:var(--serif);font-size:18px;color:var(--ink);background:transparent;border:0;border-bottom:2px solid #cfc8b8;padding:4px 2px;border-radius:0}
.fld textarea{resize:none;line-height:1.35;border:2px solid #cfc8b8;padding:8px 10px;background:#fff}
.wishbox{position:relative}
.wishbox .pre{position:absolute;left:12px;top:10px;font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.35;color:var(--deep-orange);pointer-events:auto;cursor:text;z-index:1}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--deep-orange)}
.fld.err input,.fld.err textarea{border-color:#c0392b}
.fld .msg{font-size:12px;color:#c0392b}
.fld .msg:empty{display:none}
.fld .ctr{float:right;font-size:11px;color:#8b867b}
.preview-sig{font-family:var(--script);font-size:34px;color:var(--night-sky);min-height:44px;text-align:center;line-height:1.3;opacity:.85}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.4;color:#4a463e}
.check input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--deep-orange);flex:none}
.fine{font-size:11.5px;color:#7b766b;line-height:1.4;margin:0}
.form .btn{width:100%;font-size:28px;padding:14px 20px 12px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-err{background:#fdecea;color:#8e2a1e;padding:8px 10px;font-size:13px}

.mine{position:relative;text-align:center;margin:auto 0;display:flex;flex-direction:column;align-items:center}
.mine .sig-mine,.mine .wish{max-width:100%;overflow-wrap:anywhere}
.mine .kicker{color:var(--deep-orange)}
.mine .sig-mine{font-family:var(--script);font-size:clamp(52px,9cqh,78px);color:var(--night-sky);line-height:1.15;display:inline-block;clip-path:inset(0 100% 0 0);
  animation:write 1.8s .2s cubic-bezier(.45,.05,.55,.95) forwards;padding:0 .2em}
@keyframes write{to{clip-path:inset(0 -5% 0 0)}}
.mine .wish{font-family:var(--serif);font-style:italic;font-size:clamp(16px,2.6cqh,19px);line-height:1.35;color:#3d3a33;margin:8px auto 0;opacity:0;animation:fadeIn .8s 1.9s forwards}
.mine .stampd{display:block;width:64px;height:64px;margin:0 auto 4px;opacity:0;transform:scale(2.2) rotate(-25deg);animation:thump .35s 2.3s cubic-bezier(.5,1.8,.6,1) forwards}
@keyframes thump{to{opacity:.92;transform:scale(1) rotate(-12deg)}}
.mine .seewishes{margin-top:26px;opacity:0;animation:fadeIn .5s 2.8s forwards}
.mine.instant *{animation:none!important;clip-path:none!important;opacity:1!important}
.mine.instant .stampd{transform:rotate(-12deg)}

/* single-page card (tablet + phone) */
@media (max-width:899px){
  .s-card{--pw:min(92cqw,74cqh);--ph:94cqh}
  .book{top:3cqh;width:var(--pw);transform:translateX(-50%) translateY(30cqh) scale(.62);transform-origin:50% 0;transition:transform .9s cubic-bezier(.6,0,.2,1)}
  .s-card.is-open .book{transform:translateX(-50%)}
  .page-right{left:0;width:100%;border-radius:4px;opacity:0;transition:opacity .5s .5s}
  .s-card.is-open .page-right{opacity:1}
  .leaf{left:0;width:100%;transition:transform 1s cubic-bezier(.6,0,.2,1),opacity .4s .7s}
  .s-card.is-open .leaf{opacity:0;pointer-events:none}
  .leaf-back{display:none}
  .mobile-greet{display:block;margin-bottom:8px}
  .mobile-greet .greet{font-size:24px}
  .mobile-greet .greet-sub{font-size:14px;margin-top:4px}
  .mobile-greet .sigs{max-height:46px;margin-top:8px;padding-top:6px;flex:none;flex-wrap:nowrap;justify-content:flex-start;overflow:hidden;mask-image:linear-gradient(90deg,#000 80%,transparent)}
  .mobile-greet .sig{font-size:26px}
  .mobile-greet .sigs .more{display:none}
  .invite{left:6%;right:6%;width:auto;top:5cqh;height:auto;padding:0;text-align:center;align-items:center}
  .invite .dh{font-size:clamp(38px,10cqw,64px)}
  .invite p{font-size:16px;margin:8px 0 14px}
  .invite .meta{display:none}
  .invite .link{align-self:center}
  .sign-area{justify-content:flex-start}
}
@media (max-width:420px){.form .two{grid-template-columns:1fr}.preview-sig{display:none}}

/* =========================================================
   RESULTS
   ========================================================= */
.res{position:absolute;inset:0;padding:6cqh 5cqw 13cqh;display:flex;flex-direction:column;align-items:center;text-align:center}
.rtitle{font-size:clamp(36px,6cqw,80px);color:var(--white);margin-bottom:3cqh}
.deck{position:relative;flex:1;width:min(640px,88%);max-height:58cqh;min-height:200px}
.qcard{position:absolute;inset:0;margin:0;padding:clamp(20px,4cqh,40px);display:flex;flex-direction:column;justify-content:center;text-align:left;border-radius:4px;
  box-shadow:0 22px 50px rgba(0,0,0,.35);transition:transform .6s cubic-bezier(.3,1.2,.4,1),opacity .5s;transform-origin:50% 120%;cursor:pointer;user-select:none}
.qcard .q{font-family:var(--serif);font-size:clamp(19px,3.4cqh,30px);line-height:1.3;margin:0}
.qcard .q:before{content:"\201C";font-family:var(--display);font-size:2.6em;line-height:.1;vertical-align:-.45em;margin-right:.08em;color:var(--qa)}
.qcard .who{margin-top:3cqh;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.qcard .who .n{font-family:var(--script);font-size:clamp(30px,5.4cqh,44px);line-height:1;color:var(--qa)}
.qcard .who .p{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.qcard.fly{transform:translate(120%,-10%) rotate(18deg)!important;opacity:0}
.deck-count{font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.7;margin:2.4cqh 0 0}

.mapwrap{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
.mapwrap svg{width:100%;height:100%;display:block}
.mapwrap .st{fill:rgba(255,255,255,.07);stroke:rgba(255,255,255,.28);stroke-width:.7}
.dot{fill:var(--sunset-yellow);fill-opacity:.85;stroke:var(--night-sky);stroke-width:.8;transform-box:fill-box;transform-origin:center;transform:scale(0);animation:pop .5s cubic-bezier(.3,1.8,.5,1) forwards}
.dot.hot{fill:var(--sunset-pink)}
.ring{fill:none;stroke:var(--sunset-yellow);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:ping 2.6s ease-out infinite;opacity:0}
@keyframes pop{to{transform:scale(1)}}
@keyframes ping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(3);opacity:0}}

.join{position:absolute;inset:0;padding:6cqh 6cqw 13cqh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4cqh;text-align:center}
.cta{background:var(--deep-orange);color:var(--white);padding:clamp(22px,5cqh,48px) clamp(20px,5cqw,56px);width:min(820px,100%);box-shadow:0 20px 50px rgba(0,0,0,.3)}
.cta .dh{font-size:clamp(38px,6cqw,84px)}
.cta p{font-family:var(--serif);font-size:clamp(16px,1.8cqw,21px);line-height:1.4;margin:12px auto 22px;max-width:30em}
.cta .btn{background:var(--night-sky);font-size:28px}
.share .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.share .btn{font-size:20px}
.share .note{font-size:13px;opacity:.75;margin:10px 0 0;min-height:1.2em}
.credits{font-size:11px;opacity:.55;margin:0;line-height:1.5}

/* step nav (results) */
.snav{position:absolute;z-index:20;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2cqh 4cqw 3cqh;
  background:linear-gradient(0deg,rgba(9,42,77,.95) 40%,rgba(9,42,77,0))}
.snav[hidden]{display:none}
.snav .nb{background:none;border:0;color:#fff;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:22px;padding:8px 4px}
.snav .nb[data-nav="1"]{background:var(--accent);color:var(--night-sky);padding:10px 18px 8px;border-radius:2px}
.snav .nb[disabled]{visibility:hidden}
.snav .dots{display:flex;gap:8px}
.snav .dot-b{width:10px;height:10px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.35)}
.snav .dot-b.on{background:var(--accent);transform:scale(1.25)}

/* call-to-action pop-up */
.pop{position:absolute;inset:0;z-index:40;display:grid;place-items:center;padding:5cqw;background:rgba(9,42,77,0);transition:background .3s}
.pop.on{background:rgba(9,42,77,.72)}
.pop-card{position:relative;background:var(--deep-orange);color:#fff;width:min(560px,100%);padding:clamp(24px,5cqh,44px);text-align:center;box-shadow:0 30px 70px rgba(0,0,0,.45);
  transform:translateY(24px) scale(.96);opacity:0;transition:transform .45s cubic-bezier(.2,1.3,.4,1),opacity .3s}
.pop.on .pop-card{transform:none;opacity:1}
.pop-card .kicker{color:var(--night-sky)}
.pop-card .dh{font-size:clamp(36px,5.4cqw,64px)}
.pop-card p{font-family:var(--serif);font-size:18px;line-height:1.4;margin:12px 0 22px}
.pop-card .row{display:flex;flex-direction:column;align-items:center;gap:14px}
.pop-card .btn{background:var(--night-sky);font-size:28px}
.pop-x{position:absolute;right:10px;top:8px;background:none;border:0;color:#fff;font-size:30px;line-height:1;padding:4px 8px;opacity:.85}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}