/* Starter promo pop-out. Self-contained: every rule is scoped to .orlo-promo. */
.orlo-promo{
  --promo-navy:#071e35;
  --promo-accent:#14b8a6;
  --promo-text:#1f2937;
  --promo-muted:#6b7280;
  --promo-ease:cubic-bezier(.16,1,.3,1); /* same curve as the logo intro */
  --promo-stamp:cubic-bezier(.34,1.56,.64,1);
}
dialog.orlo-promo{
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  margin:0;padding:16px;border:0;border-radius:0;box-shadow:none;background:transparent;
  display:grid;place-items:center;overflow-y:auto;overscroll-behavior:contain;
  color:var(--promo-text);font-family:'Manrope',Arial,sans-serif;
}
dialog.orlo-promo:not([open]){display:none}
dialog.orlo-promo::backdrop{background:rgba(7,30,53,.7);backdrop-filter:blur(4px);animation:promo-fade .4s ease both}
.orlo-promo *{box-sizing:border-box}
.orlo-promo [hidden]{display:none!important}
.orlo-promo .sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Stage: the split mark sits behind the card at the same centre point. */
.promo-stage{position:relative;display:grid;place-items:center;width:min(480px,100%)}
.promo-mark{position:absolute;top:50%;left:50%;width:150px;height:150px;margin:-75px 0 0 -75px;filter:drop-shadow(0 0 22px #14b8a640);pointer-events:none;z-index:2}
.promo-mark__half{position:absolute;top:0;width:50%;height:100%;background:var(--promo-navy);box-shadow:inset 0 0 0 2px #c0e2fb40,0 18px 50px #020c1799}
.promo-mark__half--l{left:0;border-radius:75px 0 0 75px}
.promo-mark__half--r{right:0;border-radius:0 75px 75px 0}
.promo-mark__light{position:absolute;left:50%;top:-30%;width:2px;height:160%;margin-left:-1px;background:var(--promo-accent);box-shadow:0 0 12px 3px var(--promo-accent),0 0 40px 8px #14b8a666;opacity:0;transform:scaleY(0)}

/* Card: navy shell with a white offer area. */
.promo-card{position:relative;width:100%;background:var(--promo-navy);border-radius:18px;overflow:hidden;box-shadow:0 30px 90px #020c1799,0 0 0 1px #ffffff14}
.promo-head{position:relative;padding:22px 26px 26px;text-align:center;color:#fff;background-image:linear-gradient(#89b3d70d 1px,transparent 1px),linear-gradient(90deg,#89b3d70d 1px,transparent 1px);background-size:28px 28px}
.promo-close{position:absolute;top:12px;right:12px;width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#c6d4e2;font:inherit;font-size:22px;line-height:1;cursor:pointer;transition:background .2s,color .2s}
.promo-close:hover{background:#ffffff14;color:#fff}
.promo-close:focus-visible,.promo-cta:focus-visible,.promo-decline:focus-visible{outline:2px solid var(--promo-accent);outline-offset:3px}

.promo-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 13px 6px 11px;border-radius:999px;background:var(--promo-accent);color:var(--promo-navy);font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase}
.promo-badge__dot{position:relative;width:7px;height:7px;border-radius:50%;background:var(--promo-navy)}
.promo-badge__dot:after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--promo-navy);animation:promo-pulse 1.6s ease-out infinite}

.promo-title:focus{outline:none}
.promo-title{margin:16px 0 0;font-weight:800;letter-spacing:-1.5px;line-height:.95}
.promo-title__big{display:block;color:var(--promo-accent);font-size:clamp(56px,15vw,84px);letter-spacing:-3px}
.promo-title__rest{display:block;margin-top:6px;color:#fff;font-size:clamp(26px,7vw,34px);letter-spacing:-1px}
.promo-title--accent{color:var(--promo-accent);font-size:clamp(46px,13vw,66px);letter-spacing:-2.5px;line-height:1;white-space:nowrap}
.promo-title__wait{display:block;margin-bottom:4px;font-size:clamp(24px,6.5vw,30px);letter-spacing:-.5px}

.promo-body{background:#fff;padding:24px 26px 22px;text-align:center}
.promo-sub{margin:0 auto;max-width:36ch;font-size:15px;line-height:1.55;color:var(--promo-text)}
.promo-price{margin:16px 0 0}
.promo-price__row{display:flex;align-items:baseline;justify-content:center;gap:12px}
.promo-price s{color:var(--promo-muted);font-size:20px;font-weight:600;text-decoration-thickness:2px}
.promo-price strong{color:var(--promo-navy);font-size:40px;font-weight:800;letter-spacing:-1.5px;line-height:1}
.promo-price__meta{display:block;margin-top:6px;color:var(--promo-muted);font-size:12.5px;font-weight:600;letter-spacing:.2px}

.promo-timer{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:20px 0 0;padding:0;list-style:none}
.promo-timer li{padding:10px 4px 8px;border-radius:10px;background:var(--promo-navy)}
.promo-timer b{display:block;color:var(--promo-accent);font-size:26px;font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums}
.promo-timer span{display:block;margin-top:3px;color:#c6d4e2;font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase}

.promo-cta{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:20px;padding:17px 22px;border-radius:10px;background:var(--promo-navy);color:#fff;font-size:16px;font-weight:800;letter-spacing:.2px;text-decoration:none;box-shadow:0 8px 22px #071e3533;transition:transform .25s var(--promo-ease),box-shadow .25s var(--promo-ease)}
.promo-cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px #071e354d}
.promo-cta:active{transform:translateY(0)}
.promo-cta:after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,#ffffff40,transparent);transform:skewX(-20deg);animation:promo-shine 4.5s ease-in-out 3s infinite}
.promo-cta__arrow{transition:transform .25s var(--promo-ease)}
.promo-cta:hover .promo-cta__arrow{transform:translateX(3px)}
.promo-decline{display:inline-block;margin-top:12px;padding:6px 4px;border:0;background:none;color:var(--promo-muted);font:inherit;font-size:13px;text-decoration:underline;text-decoration-color:#d1d5db;text-underline-offset:3px;cursor:pointer}
.promo-decline:hover{color:var(--promo-text)}

/* Step swap: both steps share a grid cell, so the modal keeps its size. */
.promo-swap{display:grid}
.promo-swap>*{grid-area:1/1}
.promo-swap>[data-step]{transition:opacity .35s ease,transform .5s var(--promo-ease)}
.orlo-promo[data-step="1"] [data-step="2"],.orlo-promo[data-step="2"] [data-step="1"]{visibility:hidden;opacity:0}
.orlo-promo[data-step="1"] [data-step="2"]{transform:translateX(40px)}
.orlo-promo[data-step="2"] [data-step="1"]{transform:translateX(-40px);transition:opacity .2s ease,transform .3s ease,visibility 0s .3s}

/* Opening sequence (~2.4s). Only runs when the dialog carries data-reveal. */
.orlo-promo[data-reveal] .promo-mark{animation:promo-mark-in .35s var(--promo-stamp) both}
.orlo-promo[data-reveal] .promo-mark__half--l{animation:promo-split-l .8s var(--promo-ease) .5s forwards}
.orlo-promo[data-reveal] .promo-mark__half--r{animation:promo-split-r .8s var(--promo-ease) .5s forwards}
.orlo-promo[data-reveal] .promo-mark__light{animation:promo-light .7s ease-out .5s both}
.orlo-promo[data-reveal] .promo-card{animation:promo-open .8s var(--promo-ease) .5s both}
/* The card opens dark so the light reads, then the offer area turns white. */
.orlo-promo[data-reveal] .promo-body{animation:promo-body .5s ease 1.15s both}
.orlo-promo[data-reveal] .promo-title__big{animation:promo-stamp .6s var(--promo-stamp) .95s both}
.orlo-promo[data-reveal] [data-seq]{animation:promo-rise .5s var(--promo-ease) both;animation-delay:calc(1.3s + var(--i,0) * 110ms)}
.orlo-promo:not([data-reveal]) .promo-mark{display:none}

@keyframes promo-fade{from{opacity:0}}
@keyframes promo-mark-in{from{transform:scale(.2);opacity:0}}
/* Each half travels to the card edge, so the halves carry the card open. */
@keyframes promo-split-l{65%{opacity:1}to{transform:translateX(calc(-1 * var(--promo-travel,200px)));opacity:0}}
@keyframes promo-split-r{65%{opacity:1}to{transform:translateX(var(--promo-travel,200px));opacity:0}}
@keyframes promo-light{0%{opacity:0;transform:scaleY(0)}30%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1.1)}}
@keyframes promo-open{from{clip-path:inset(0 50% 0 50% round 18px)}to{clip-path:inset(0 0 0 0 round 18px)}}
@keyframes promo-stamp{0%{opacity:0;transform:scale(1.9);filter:blur(6px)}55%{opacity:1;filter:blur(0)}100%{transform:scale(1)}}
@keyframes promo-body{from{background-color:var(--promo-navy)}}
@keyframes promo-rise{from{opacity:0;transform:translateY(12px)}}
@keyframes promo-pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(3);opacity:0}}
@keyframes promo-shine{0%{left:-60%}35%,100%{left:130%}}

@media (max-width:420px){
  .promo-head{padding:18px 18px 22px}
  .promo-body{padding:20px 18px 18px}
  .promo-timer{gap:6px}
  .promo-timer b{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  .orlo-promo *,.orlo-promo *:after,dialog.orlo-promo::backdrop{animation:none!important;transition:none!important}
  .orlo-promo .promo-mark{display:none}
}