/* Story decks: the full-screen presentation that opens each of the five service pages.
   The deck itself lives at /decks/<service>.html and is not restyled here; this file is the
   frame around it, the controls, the one-time hint and the fallback. The accent per page is
   set on the section as --deck-accent and --deck-accent-rgb by _templates/build_revamp.py. */
.deck-section{--deck-accent:#00c780;--deck-accent-rgb:0,199,128;color:#f4f6f2;background:#07090c;background:linear-gradient(180deg,#05070a 0%,#0a0d12 55%,#0e1218 100%);padding-block:var(--s7) var(--s8)}
.deck-head{max-width:1200px;margin:0 auto var(--s5);display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s5)}
.deck-title{font:400 clamp(30px,3.4vw,46px)/1 var(--display);letter-spacing:.005em;text-transform:uppercase;color:#fff;margin:0}
.deck-sub{font:400 16px/1.5 var(--body);color:#aeb6ad;margin:0;max-width:60ch}
.deck{max-width:1200px;margin:0 auto}
.deck__stage{position:relative;width:100%;aspect-ratio:16/10;border-radius:24px;overflow:hidden;background:#000;border:1px solid rgba(var(--deck-accent-rgb),.4);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 24px 70px -20px rgba(var(--deck-accent-rgb),.45),0 0 90px -10px rgba(var(--deck-accent-rgb),.28);isolation:isolate}
.deck__stage:fullscreen{border-radius:0;border:0;box-shadow:none;aspect-ratio:auto;width:100%;height:100%}
.deck__frame{position:absolute;left:0;top:0;width:100%;height:100%;border:0;display:block;background:#000;transform-origin:0 0}
.deck__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:52px;height:52px;border-radius:50%;border:1px solid rgba(var(--deck-accent-rgb),.55);background:rgba(8,10,14,.72);color:#fff;display:flex;align-items:center;justify-content:center;padding:0;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background var(--fast),border-color var(--fast),transform var(--fast)}
.deck__arrow svg{width:22px;height:22px;display:block}
.deck__arrow--prev{left:14px}
.deck__arrow--next{right:14px}
.deck__arrow:hover{background:rgba(var(--deck-accent-rgb),.22);border-color:var(--deck-accent)}
.deck__arrow:active{transform:translateY(-50%) scale(.94)}
.deck__arrow[aria-disabled="true"]{opacity:.45}
.deck__fs{min-width:44px;min-height:44px;padding:0 var(--s4);border-radius:999px;border:1px solid rgba(var(--deck-accent-rgb),.55);background:rgba(255,255,255,.06);color:#fff;font:600 13px/1 var(--body);display:inline-flex;align-items:center;gap:var(--s2);transition:background var(--fast),border-color var(--fast)}
.deck__fs svg{width:16px;height:16px;display:block}
.deck__fs:hover{background:rgba(var(--deck-accent-rgb),.22);border-color:var(--deck-accent)}
.deck__arrow:focus-visible,.deck__fs:focus-visible,.deck__fallback a:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 7px rgba(var(--deck-accent-rgb),.55)}
.deck__hint{position:absolute;left:50%;bottom:56px;transform:translateX(-50%);z-index:4;width:max-content;max-width:min(92%,560px);padding:var(--s3) var(--s5);border-radius:999px;background:rgba(8,10,14,.86);border:1px solid rgba(var(--deck-accent-rgb),.5);color:#fff;font:500 14px/1.45 var(--body);text-align:center;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.45);opacity:0;animation:deck-hint-in .6s ease .9s both}
.deck__hint b{color:var(--deck-accent);font-weight:600}
.deck__hint.is-gone{opacity:0;transition:opacity .5s ease}
@keyframes deck-hint-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
.deck__fallback{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s4);padding:var(--s6);text-align:center;background:linear-gradient(180deg,#0a0d12,#05070a);color:#f4f6f2}
.deck__fallback p{font:400 var(--copy)/1.5 var(--body);color:#c9d0c7;max-width:36ch;margin:0}
.deck__fallback a{display:inline-flex;align-items:center;gap:var(--s2);min-height:48px;padding:0 var(--s5);border-radius:999px;background:var(--deck-accent);color:#0a0d12;font:600 16px/1 var(--body)}
.deck__bar{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--s3) var(--s5);margin-top:var(--s4)}
.deck__tools{display:flex;align-items:center;gap:var(--s4)}
.deck__progress{grid-column:1/-1;height:3px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.deck__progress-fill{display:block;height:100%;width:0;background:var(--deck-accent);border-radius:2px;transition:width .4s ease;box-shadow:0 0 12px rgba(var(--deck-accent-rgb),.7)}
.deck__counter{font:600 14px/1 var(--body);color:#dfe4dc;letter-spacing:.04em;font-variant-numeric:tabular-nums;margin:0}
.deck__counter b{color:var(--deck-accent);font-weight:600}
.deck__keys{font:400 13px/1.4 var(--body);color:#8f978e;margin:0}
.deck__keys kbd{font:inherit;padding:1px 6px;border:1px solid #3a413a;border-radius:4px;color:#dfe4dc}
@media (prefers-reduced-motion:reduce){.deck__hint{animation:none;opacity:1}.deck__hint.is-gone{transition:none}.deck__progress-fill{transition:none}.deck__arrow,.deck__fs{transition:none}}
@media (max-width:900px){.deck-section{padding-block:var(--s6) var(--s7)}.deck-head{flex-direction:column;gap:var(--s2)}.deck-sub{font-size:15px}.deck__stage{border-radius:18px}.deck__arrow{width:46px;height:46px}.deck__arrow--prev{left:8px}.deck__arrow--next{right:8px}.deck__hint{bottom:44px;font-size:13px;padding:var(--s3) var(--s4);border-radius:16px}.deck__keys{display:none}}
@media (max-width:700px){.deck__stage{aspect-ratio:4/3}}
@media (max-width:600px){.deck__stage{aspect-ratio:390/844}.deck__hint{bottom:auto;top:50%;transform:translate(-50%,-50%);animation-name:deck-hint-in-mid}@keyframes deck-hint-in-mid{from{opacity:0;transform:translate(-50%,calc(-50% + 8px))}to{opacity:1;transform:translate(-50%,-50%)}}}
@media (max-width:520px){.deck__stage{border-radius:14px}.deck__arrow{width:44px;height:44px}}