/* =========================================================
   MURDER EXPERIENCE — shared site styles (e-commerce)
   Same design system as the landing (index.html)
   ========================================================= */

/* An element carrying the hidden attribute MUST be invisible. Without this rule,
   any class that declares its own display (flex, grid, inline-flex) silently
   overrides hidden: the "Choose another way" button stayed visible and
   clickable after the gift was sent, even though the code had hidden it.
   Three one-off fixes already existed further down in this file, proof that
   the trap keeps coming back. This one covers them all. */
[hidden]{ display:none !important; }
*{ margin:0; padding:0; box-sizing:border-box; }
:root{
  --ink:#0c0c0e; --ink-1:#131318; --card:#16161c; --card-2:#1b1b22; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.06);
  --text:#c6c6cd; --muted:#85858f; --faint:#56565f; --blood:#e10600; --blood-bright:#ff3a30; --glow:rgba(225,6,0,.5); --gold:#ffb02e; --cm:#e3b052;
  --go:#33d17f; --go-soft:rgba(51,209,127,.11); --go-line:rgba(51,209,127,.34); /* reassurance green, answers the horror red */
  --ease:cubic-bezier(.22,.8,.2,1); --easeSoft:cubic-bezier(.16,.84,.28,1); --display:'Anton','Oswald',Impact,sans-serif;
}
html{ scroll-behavior:smooth; overflow-x:clip; }
body{ background:radial-gradient(125% 85% at 50% 0%, #1a1a20 0%, #111114 42%, #0c0c0e 100%); color:var(--text); overflow-x:clip;   /* kill horizontal drag on every page */
  font-family:'Inter',-apple-system,'Segoe UI',Arial,sans-serif; line-height:1.65; min-height:100vh; -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; }

.wrap{ width:100%; max-width:1140px; margin:0 auto; padding:0 clamp(22px,5vw,40px); }
.wrap--narrow{ max-width:920px; }
.display{ font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:1px; line-height:1; }
.accent{ color:var(--blood-bright); }
.ol{ color:transparent; -webkit-text-stroke:1.8px rgba(255,255,255,.78); text-stroke:1.8px rgba(255,255,255,.78); }
/* Same material as the landing hero title on every title of the site:
   vertical white-to-gray gradient clipped inside the glyphs (inner glow).
   text-shadow:none is mandatory: the property IS INHERITED from the parent, and Safari iOS
   renders the letters dark when it coexists with background-clip:text. */
@supports (-webkit-background-clip:text){
  .display .h2g{ background:linear-gradient(180deg, #ffffff 6%, #f2f2f6 40%, #dadae1 78%, #cdcdd7 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; }
}
.eyebrow{ font-size:.72rem; letter-spacing:3px; text-transform:uppercase; color:var(--muted); font-weight:600; }
.rule{ width:min(340px,62%); height:1px; border-radius:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.13) 30%,
    rgba(225,6,0,.5) 50%, rgba(255,255,255,.13) 70%, transparent); }
.stars{ color:var(--gold); letter-spacing:2px; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-weight:700; font-size:.84rem; letter-spacing:1px; text-transform:uppercase;
  padding:15px 30px; border-radius:999px; border:1px solid transparent; cursor:pointer; font-family:inherit;
  transition:transform .2s var(--ease), box-shadow .2s, background .2s, border-color .2s, color .2s; }
.btn svg{ width:15px; height:15px; fill:currentColor; transition:transform .25s; } .btn:hover svg{ transform:translateX(4px); }
.btn--primary{ background:linear-gradient(180deg,#ff2d20,#c20400); color:#fff; border-color:rgba(255,120,110,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 2px 10px -4px rgba(0,0,0,.7), 0 20px 46px -14px rgba(225,6,0,.78); }
.btn--primary:hover{ background:linear-gradient(180deg,#ff4133,#d40500); transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 2px 12px -4px rgba(0,0,0,.7), 0 26px 58px -12px rgba(225,6,0,.9); }
.btn--ghost{ background:linear-gradient(180deg, rgba(40,40,48,.96), rgba(25,25,31,.96)); color:#fff; border-color:rgba(255,255,255,.24);
  box-shadow:0 14px 30px -18px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06); }   /* no more transparent background: the secondary CTA has to be visible */
.btn--gw{ border-color:rgba(255,255,255,.85); } .btn--ghost:hover{ border-color:#fff; transform:translateY(-2px); }
.btn--outline{ background:linear-gradient(180deg, rgba(48,20,20,.96), rgba(30,14,14,.96)); color:#fff; border-color:rgba(225,6,0,.55); box-shadow:0 14px 30px -18px rgba(0,0,0,.9); } .btn--outline:hover{ background:var(--blood); color:#fff; border-color:var(--blood); transform:translateY(-2px); }
.btn--block{ width:100%; }
.btn--lg{ padding:18px 34px; font-size:.9rem; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transition:opacity .3s var(--ease); }

/* ---------- topbar ---------- */
/* 'sticky' let go as soon as you scrolled past the parent: the mobile menu
   then reopened at the top of the document instead of following the screen. 'fixed'
   pins it to the viewport, like the landing, which already overrode this setting. */
.top{ position:fixed; inset:0 0 auto 0; z-index:1000; background:linear-gradient(to bottom, rgba(12,12,14,.96), rgba(12,12,14,0.86)); border-bottom:1px solid var(--line-2); }
.top__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:12px clamp(18px,5vw,40px); }
.top__logo img{ height:48px; width:auto; }
.top__nav{ display:flex; align-items:center; gap:30px; }
.top__nav a{ position:relative; font-size:.78rem; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:rgba(255,255,255,.8); transition:color .2s; }
.top__nav a.top__cta::after{ display:none; }
/* no more red line unrolling on hover: just the color getting lighter */
.top__nav a:not(.top__cta):hover{ color:#fff; }
.top__cta{ position:relative; overflow:hidden; color:#fff !important; background:linear-gradient(135deg, var(--blood-bright), #a30400); padding:11px 24px; border-radius:999px; letter-spacing:1.2px; transition:transform .2s, box-shadow .2s; display:inline-flex; align-items:center; gap:9px; animation:none; }
.top__cta::before{ content:""; position:absolute; top:0; left:-80%; width:45%; height:100%; background:linear-gradient(105deg, transparent, rgba(255,255,255,.38), transparent); transform:skewX(-20deg); animation:none; }
.top__cta:hover{ transform:translateY(-1px) scale(1.03); box-shadow:0 16px 36px -12px var(--glow); }
.top__cta svg{ transition:transform .25s var(--ease); }
.top__cta:hover svg{ transform:translateX(4px); }
.top__cta-flip{ position:relative; display:inline-block; overflow:hidden; height:1.1em; line-height:1.1; }
.top__cta-flip span{ display:block; transition:transform .32s var(--ease); }
.top__cta-flip span:last-child{ position:absolute; top:100%; left:0; width:100%; text-align:center; white-space:nowrap; }
.top__cta:hover .top__cta-flip span{ transform:translateY(-100%); }
@keyframes ctaPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(225,6,0,.45), 0 12px 30px -16px var(--glow); } 50%{ box-shadow:0 0 0 8px rgba(225,6,0,0), 0 12px 30px -16px var(--glow); } }
@keyframes ctaSheen{ 0%, 62%{ left:-80%; } 100%{ left:135%; } }
@media (prefers-reduced-motion:reduce){ .top__cta{ animation:none; } .top__cta::before{ animation:none; display:none; } .top__cta-flip span{ transition:none; } }
.top__cart{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; border:1px solid var(--line); color:#fff; transition:border-color .2s, background .2s; }
.top__cart:hover{ border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.05); }
.top__cart svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; }
.top__cart b{ position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px; border-radius:999px; background:var(--blood); color:#fff; font-size:.62rem; font-weight:800; display:grid; place-items:center; line-height:1; }
.top__cart b:empty,.top__cart b[data-n="0"]{ display:none; }
.top__burger{ display:none; background:none; border:0; cursor:pointer; width:42px; height:42px; flex-direction:column; gap:5px; align-items:center; justify-content:center; }
.top__burger span{ width:24px; height:2px; background:#fff; display:block; transition:.3s var(--ease); }
.top__burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .top__burger.is-open span:nth-child(2){ opacity:0; } .top__burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.top__right{ display:flex; align-items:center; gap:14px; }
.top__mobile{ display:none; flex-direction:column; max-height:0; overflow:hidden; transition:max-height .55s cubic-bezier(.22,1,.36,1); background:rgba(10,10,12,.98); border-top:1px solid var(--line-2); }
.top__mobile a{ padding:15px clamp(22px,5vw,40px); border-bottom:1px solid var(--line-2); color:#e6e6ea; font-weight:600; letter-spacing:.3px; }
.top__mobile a.top__mobile-cta{ position:relative; overflow:hidden; margin:14px clamp(22px,5vw,40px); padding:15px 22px; border:0; border-radius:12px; background:linear-gradient(135deg, var(--blood-bright), #a30400); color:#fff; text-align:center; font-weight:700; text-transform:uppercase; letter-spacing:1px; box-shadow:0 14px 30px -16px var(--glow); display:flex; align-items:center; justify-content:center; gap:9px; }
.top__mobile a.top__mobile-cta svg{ flex:0 0 auto; }
.top__mobile a.top__mobile-cta::before{ content:""; position:absolute; top:0; left:-80%; width:45%; height:100%; background:linear-gradient(105deg, transparent, rgba(255,255,255,.38), transparent); transform:skewX(-20deg); animation:none; }
@media (prefers-reduced-motion:reduce){ .top__mobile a.top__mobile-cta::before{ animation:none; display:none; } }
.top__mobile.is-open{ max-height:520px; }
.top__overlay{ position:fixed; inset:0; z-index:998; background:rgba(8,8,11,0.58); opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s var(--ease); }
.top__overlay.is-open{ opacity:1; visibility:visible; }
@media (max-width:1024px){ .top__nav{ display:none; } .top__burger{ display:flex; } .top__mobile{ display:flex; } .top__logo img{ height:44px; } }

/* ---------- page header band ---------- */
.phead{ text-align:center; padding:clamp(56px,9vw,104px) 0 8px; position:relative; }
.phead h1{ font-size:clamp(2.4rem,6.4vw,4.6rem); color:#fff; margin:14px 0 0; }
.phead p{ color:var(--text); max-width:620px; margin:20px auto 0; font-size:1.06rem; }
.crumbs{ font-size:.74rem; letter-spacing:1px; text-transform:uppercase; color:var(--faint); margin-bottom:6px; }
.crumbs a:hover{ color:#fff; } .crumbs span{ color:var(--blood-bright); }

/* ---------- sections / heads ---------- */
section{ position:relative; padding:clamp(54px,7vw,90px) 0; }
section.alt{ background:var(--ink-1); }
.head{ text-align:center; max-width:680px; margin:0 auto 46px; }
.head h2{ font-size:clamp(2.7rem,5vw,3.4rem); color:#fff; margin-top:14px; }
.head .rule{ margin:26px auto 0; }
.head p{ color:var(--muted); margin-top:18px; }

/* ---------- how-to-play : steps + need ---------- */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; }
.step{ position:relative; overflow:hidden; padding:28px 22px 24px; border:1px solid var(--line-2); border-left:3px solid var(--blood);
  border-radius:0 12px 12px 0; background:linear-gradient(160deg, rgba(225,6,0,.07), rgba(20,20,26,.5)); transition:transform .35s var(--ease), border-color .35s, box-shadow .35s; }
.step:hover{ transform:translateY(-7px); border-color:rgba(225,6,0,.45); box-shadow:0 26px 56px -34px var(--glow); }
.step__ghost{ position:absolute; right:6px; bottom:-30px; z-index:0; font-family:var(--display); font-size:6.4rem; line-height:1; color:rgba(255,255,255,.05); }
.step__tag{ position:relative; z-index:1; display:inline-block; font-family:'Courier New',monospace; font-size:.62rem; letter-spacing:2px; text-transform:uppercase; color:var(--blood-bright); border:1px solid rgba(225,6,0,.32); border-radius:4px; padding:3px 8px; margin-bottom:14px; }
.step h3{ position:relative; z-index:1; font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:.5px; color:#fff; font-size:1.3rem; margin:0 0 9px; }
.step p{ position:relative; z-index:1; color:#a7a7b0; font-size:.92rem; line-height:1.55; }
.need{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.need__i{ text-align:center; padding:24px 16px; }
.need__i svg{ width:34px; height:34px; fill:none; stroke:var(--blood-bright); stroke-width:1.7; margin-bottom:12px; }
.need__i h3{ color:#fff; font-size:1.05rem; margin-bottom:6px; }
.need__i p{ color:var(--muted); font-size:.9rem; }
@media (max-width:640px){ .need{ grid-template-columns:1fr; gap:24px; } }

/* ---------- FAQ (minimal) ---------- */
.faqcat{ display:flex; gap:4px; margin:0 auto 34px; width:fit-content; max-width:100%; padding:5px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); border-radius:999px; }
.faqcat button{ appearance:none; -webkit-appearance:none; border:0; background:transparent; cursor:pointer; font-family:inherit;
  color:rgba(255,255,255,.6); font-weight:700; font-size:.72rem; letter-spacing:1.2px; text-transform:uppercase;
  padding:11px 18px; border-radius:999px; white-space:nowrap; transition:color .22s, background .22s, box-shadow .22s;
  display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.faqcat button svg{ width:14px; height:14px; fill:currentColor; flex:0 0 auto; opacity:.75; transition:opacity .22s; }
.faqcat button.on svg{ opacity:1; }
.faqcat button:hover{ color:#fff; }
.faqcat button.on{ color:#fff; background:linear-gradient(180deg,#e10600,#b30500); box-shadow:0 8px 22px -10px rgba(225,6,0,.8); }
@media (max-width:600px){
  /* on phones the single rail looked bad: 4 independent chips in a 2x2 grid */
  .faqcat{ display:grid; grid-template-columns:1fr 1fr; width:100%; gap:8px; background:none; border:0; padding:0; }
  .faqcat button{ padding:13px 8px; font-size:.66rem; letter-spacing:1px; border-radius:14px;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); }
  .faqcat button.on{ border-color:transparent; }
}
.faq{ max-width:760px; margin:0 auto; border-top:1px solid rgba(255,255,255,.1); }
.faq details{ border-bottom:1px solid rgba(255,255,255,.1); }
.faq details.faqhide{ display:none; }
@keyframes faqIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.faq details.faqin{ animation:faqIn .38s var(--ease) both; }
@media (prefers-reduced-motion:reduce){ .faq details.faqin{ animation:none; } }
.faq summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:20px; padding:22px 2px; color:#fff; font-weight:600; font-size:1.08rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .faq__q{ flex:1; line-height:1.45; transition:opacity .2s; } .faq summary:hover .faq__q{ opacity:.8; }
.faq summary .faq__t{ flex:0 0 auto; width:20px; height:20px; position:relative; }
.faq summary .faq__t::before,.faq summary .faq__t::after{ content:""; position:absolute; top:50%; left:50%; width:15px; height:2px; border-radius:2px; background:var(--blood-bright); transform:translate(-50%,-50%); transition:transform .35s var(--ease), opacity .3s var(--ease); }
.faq summary .faq__t::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq details[open] summary .faq__t::after{ transform:translate(-50%,-50%) rotate(0); opacity:0; }
.faq__wrap{ overflow:hidden; max-height:0; opacity:0; transition:max-height .42s var(--ease), opacity .3s var(--ease); }
.faq__wrap p{ color:var(--muted); padding:0 44px 24px 2px; margin:0; font-size:1rem; line-height:1.7; }

/* ---------- forms / fields ---------- */
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.field label{ font-size:.74rem; letter-spacing:1px; text-transform:uppercase; color:var(--muted); font-weight:600; }
.field__hint{ color:var(--muted); font-size:.82rem; margin-top:2px; display:flex; align-items:center; gap:6px; }
.field__hint svg{ flex:0 0 auto; width:14px; height:14px; color:#6ef0a8; }
.field input,.field textarea,.field select{ width:100%; background:#15151b; border:1px solid var(--line); border-radius:12px; padding:14px 15px; color:#fff; font-size:1rem; font-family:inherit; transition:border-color .2s; }
.field textarea{ min-height:140px; resize:vertical; }
.field input::placeholder,.field textarea::placeholder{ color:#6a6a76; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:0; border-color:rgba(225,6,0,.55); }
.field input.field-invalid, .pay-cardbox.field-invalid{ border-color:#fff !important; animation:fieldShake .4s var(--ease); }
/* #linkEmailBox/#addressElement have no box of their own (avoids nesting a rectangle around Stripe's own
   bordered fields) — a ring instead of a border, so the invalid state never doubles up the box look. */
#linkEmailBox.field-invalid, #addressElement.field-invalid{ box-shadow:0 0 0 2px #f2140a; border-radius:12px; animation:fieldShake .4s var(--ease); }
@keyframes fieldShake{ 15%,85%{ transform:translateX(-2px); } 30%,70%{ transform:translateX(3px); } 45%,55%{ transform:translateX(-4px); } }
@media (prefers-reduced-motion:reduce){ .field input.field-invalid, .pay-cardbox.field-invalid, #linkEmailBox.field-invalid, #addressElement.field-invalid{ animation:none; } }
.field--row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:540px){ .field--row{ grid-template-columns:1fr; } }
.alert{ border:1px solid var(--line); border-left:4px solid var(--line); border-radius:12px; background:#16161b; color:#dcdce2; padding:14px 16px; font-size:1rem; line-height:1.55; margin-bottom:16px; animation:alertIn .45s var(--ease) both; }
.alert b{ color:#fff; }
/* injected live (contact, forms): fade-slide entry with a soft overshoot, then a
   one-shot green halo on success; errors shake once while fading in */
@keyframes alertIn{
  0%{ opacity:0; transform:translateY(12px) scale(.98); }
  60%{ opacity:1; transform:translateY(-2px) scale(1.004); }
  100%{ opacity:1; transform:none; }
}
.alert-success{ background:#10211a; border-color:rgba(47,169,104,.3); border-left-color:#2fa968; animation:alertIn .45s var(--ease) both, alertGlowOk 1.5s var(--ease) .4s 1; }
@keyframes alertGlowOk{
  0%,100%{ box-shadow:0 0 0 0 rgba(47,169,104,0); }
  35%{ box-shadow:0 0 0 4px rgba(47,169,104,.15), 0 0 32px rgba(47,169,104,.38); }
}
.alert-danger{ background:#20120f; border-color:rgba(225,6,0,.3); border-left-color:var(--blood); display:flex; align-items:flex-start; gap:10px; animation:alertIn .45s var(--ease) both, alertShake .45s var(--ease) .12s 1; }
@keyframes alertShake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-5px); }
  40%{ transform:translateX(4px); }
  60%{ transform:translateX(-3px); }
  80%{ transform:translateX(2px); }
}
@media (prefers-reduced-motion:reduce){ .alert, .alert-success, .alert-danger{ animation:none; } }
.alert-danger svg{ flex:0 0 auto; width:19px; height:19px; margin-top:1px; color:var(--blood-bright); }
.alert-info{ background:#211a0d; border-color:rgba(255,176,46,.3); border-left-color:var(--gold); display:flex; align-items:flex-start; gap:10px; }
.alert-info svg{ flex:0 0 auto; width:19px; height:19px; margin-top:1px; color:var(--gold); }
.alert-info a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
/* contact help tip: collapses smoothly open/closed (grid-rows trick), dismissable, never blocks sending */
#cHint{ display:grid; grid-template-rows:0fr; opacity:0; transform:translateY(-6px); transition:grid-template-rows .5s var(--ease), opacity .4s var(--ease), transform .5s var(--ease); }
#cHint.is-in{ grid-template-rows:1fr; opacity:1; transform:none; }
.cHint__clip{ overflow:hidden; min-height:0; }
.cHint__card{ position:relative; background:#211a0d; border:1px solid rgba(255,176,46,.3); border-left:3px solid var(--gold); border-radius:10px; padding:14px 40px 15px 16px; margin-bottom:18px; }
.cHint__t{ font-weight:700; color:#fff; font-size:.92rem; margin:0 0 9px; }
.cHint__list{ margin:0; padding-left:19px; display:grid; gap:7px; font-size:.85rem; line-height:1.5; color:var(--text); }
.cHint__list li::marker{ color:var(--gold); font-weight:700; }
.cHint__list b{ color:var(--gold); }
.cHint__x{ position:absolute; top:9px; right:9px; width:26px; height:26px; display:grid; place-items:center; border:0; border-radius:50%; background:rgba(255,255,255,.07); color:#c6c6cd; font-size:1.05rem; line-height:1; cursor:pointer; transition:background .2s, color .2s; }
.cHint__x:hover{ background:rgba(255,255,255,.14); color:#fff; }
@media (prefers-reduced-motion:reduce){ #cHint{ transition:opacity .2s; } }

/* newsletter opt-in under the checkout e-mail field */
.nlopt{ display:flex; align-items:flex-start; gap:9px; margin-top:11px; font-size:.82rem; line-height:1.5; color:var(--muted); cursor:pointer; }
.nlopt input{ appearance:auto; -webkit-appearance:checkbox; width:15px; height:15px; margin-top:2px; flex:0 0 auto; accent-color:var(--blood); cursor:pointer; }

/* checkout block hint + optional-label marker */
.cblock__hint{ display:flex; align-items:flex-start; gap:8px; margin:-6px 0 16px; font-size:.82rem; color:var(--muted); line-height:1.5; }
.cblock__hint svg{ width:15px; height:15px; flex:0 0 auto; margin-top:2px; color:var(--gold); }
.lbl-opt{ color:var(--faint); font-weight:500; text-transform:none; letter-spacing:0; }
/* label hint folded into an info icon: tooltip on hover / focus */
.lbl-info{ position:relative; display:inline-flex; align-items:center; vertical-align:middle;
  margin-left:5px; color:var(--faint); cursor:help; outline:none; }
.lbl-info svg{ width:14px; height:14px; }
.lbl-info:hover, .lbl-info:focus{ color:#fff; }
.lbl-info__tip{ position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%) translateY(4px);
  white-space:nowrap; font-style:normal; background:#1c1c22; color:#d2d2d9; border:1px solid rgba(255,255,255,.16);
  border-radius:9px; padding:7px 11px; font-size:.72rem; letter-spacing:.2px; text-transform:none; font-weight:500;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:30;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.8); }
.lbl-info:hover .lbl-info__tip, .lbl-info:focus .lbl-info__tip{ opacity:1; transform:translateX(-50%) translateY(0); }
/* counter under the personal message textareas (limit imposed by the A4 certificate) */
.gcount{ text-align:right; font-size:.72rem; color:var(--faint); margin-top:5px; }
.gcount--max{ color:#ff3a30; font-weight:600; }

/* terms acceptance checkbox at checkout */
.tos-ok a{ color:var(--blood-bright); text-decoration:underline; text-underline-offset:2px; }
.tos-ok.field-invalid{ border:1px solid #f2140a; border-radius:10px; padding:9px 11px; animation:fieldShake .4s var(--ease); }

/* ---- long-form pages (.prose) : terms / legal / privacy / order confirmation ---- */
.lgl-updated{ margin-top:14px; color:var(--faint); font-size:.82rem; letter-spacing:.4px; }
.prose{ max-width:780px; margin:0 auto; color:var(--text); font-size:.98rem; line-height:1.75; }
.prose h2{ font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:.6px; color:#fff; font-size:1.5rem; line-height:1.15; margin:46px 0 16px; padding-top:30px; border-top:1px solid var(--line); scroll-margin-top:96px; }
.prose h2:first-of-type{ margin-top:8px; }
.prose h2 .no{ color:var(--blood-bright); margin-right:6px; }
.prose h3{ color:#fff; font-size:1.02rem; font-weight:700; letter-spacing:.2px; margin:26px 0 10px; }
.prose p{ margin:0 0 15px; }
.prose ul, .prose ol{ margin:0 0 18px; padding-left:22px; display:grid; gap:8px; }
.prose li{ padding-left:4px; }
.prose li::marker{ color:var(--blood-bright); font-weight:700; }
.prose a{ color:var(--blood-bright); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.prose a:hover{ color:#fff; }
.prose strong{ color:#fff; font-weight:700; }
.prose .note{ margin-top:36px; padding:14px 17px; border:1px dashed rgba(255,176,46,.45); border-radius:12px; color:var(--muted); font-size:.85rem; line-height:1.6; }
.lgl-copy{ margin-top:44px; padding-top:20px; border-top:1px solid var(--line); color:var(--faint); font-size:.82rem; text-align:center; }
/* table of contents chips */
.lgl-toc{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; }
.lgl-toc a{ display:inline-block; background:#15151b; border:1px solid var(--line); border-radius:999px; padding:7px 14px; font-size:.75rem; font-weight:600; letter-spacing:.4px; color:var(--muted); text-decoration:none; transition:border-color .2s, color .2s; }
.lgl-toc a:hover{ border-color:rgba(225,6,0,.55); color:#fff; }
.lgl-toc .lgl-toc__hot{ border-color:rgba(225,6,0,.5); color:#fff; background:rgba(225,6,0,.08); }
/* highlighted key blocks */
.lgl-important{ border-left:3px solid var(--blood); background:rgba(225,6,0,.07); border-radius:0 10px 10px 0; padding:14px 17px; }
.lgl-why{ border-left:3px solid var(--gold); background:rgba(255,176,46,.06); border-radius:0 10px 10px 0; padding:14px 17px; font-size:.92rem; }
/* the refund section stands out as its own card */
.lgl-hot{ position:relative; background:linear-gradient(180deg, rgba(225,6,0,.08), rgba(225,6,0,.025) 55%, rgba(225,6,0,.05)); border:1px solid rgba(225,6,0,.3); border-radius:18px; padding:28px 28px 16px; margin:46px 0; scroll-margin-top:96px; font-size:1.01rem; }
.lgl-hot > h2{ border-top:0; padding-top:0; margin-top:0; }
.lgl-hot__badge{ display:inline-block; background:var(--blood); color:#fff; font-size:.64rem; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; border-radius:6px; padding:5px 11px; margin:0 0 16px; }
@media (max-width:560px){ .lgl-hot{ padding:20px 16px 10px; } .prose h2{ font-size:1.3rem; } }

/* address suggestions dropdown (manual checkout fields) */
.addr-assist{ position:relative; }
.addr-sugg{ position:absolute; left:0; right:0; top:calc(100% + 5px); z-index:40; display:none; background:#15151b; border:1px solid rgba(255,255,255,.12); border-radius:11px; overflow:hidden; box-shadow:0 26px 54px -22px rgba(0,0,0,.95); }
.addr-sugg.is-open{ display:block; }
.addr-sugg button{ display:flex; align-items:flex-start; gap:10px; width:100%; text-align:left; padding:11px 14px; background:none; border:0; color:var(--text); font-size:.87rem; line-height:1.35; cursor:pointer; border-bottom:1px solid rgba(255,255,255,.06); }
.addr-sugg button:last-child{ border-bottom:0; }
.addr-sugg button:hover, .addr-sugg button.is-hi{ background:rgba(225,6,0,.13); }
.addr-sugg button svg{ width:15px; height:15px; flex:0 0 auto; margin-top:3px; color:var(--blood-bright); }
.addr-sugg button strong{ display:block; color:#fff; font-weight:600; font-size:.9rem; }
.addr-sugg button small{ display:block; color:var(--muted); font-size:.78rem; margin-top:2px; }

/* ---------- product page ---------- */
.prod{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,56px); align-items:start; }
@media(max-width:880px){ .prod{ grid-template-columns:1fr; } }
.prod__media{ position:relative; }
.prod__cover{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:16px; border:1px solid var(--line); }
.prod__badge{ position:absolute; top:14px; left:14px; display:inline-flex; align-items:center; gap:7px; background:rgba(12,12,14,0.81); border:1px solid var(--line); border-radius:999px; padding:7px 13px; font-size:.6rem; letter-spacing:1.5px; text-transform:uppercase; font-weight:700; color:#fff; }
.prod__badge i{ width:7px; height:7px; border-radius:50%; background:var(--blood); box-shadow:0 0 8px var(--blood); }
.prod__thumbs{ display:flex; gap:10px; margin-top:12px; }
.prod__thumbs img{ width:74px; height:74px; object-fit:cover; border-radius:10px; border:1px solid var(--line); cursor:pointer; opacity:.6; transition:opacity .2s, border-color .2s; }
.prod__thumbs img:hover,.prod__thumbs img.is-on{ opacity:1; border-color:rgba(225,6,0,.6); }
.prod__rating{ display:flex; align-items:center; gap:10px; font-size:.9rem; color:var(--muted); margin-bottom:10px; }
.prod__rating .stars{ font-size:1rem; } .prod__rating b{ color:#fff; }
.prod h1{ font-size:clamp(2.1rem,4.6vw,3.2rem); color:#fff; line-height:1.02; margin:0 0 14px; }
.prod__lead{ color:var(--text); font-size:1.08rem; line-height:1.6; }
.prod__price{ display:flex; align-items:baseline; gap:12px; margin:22px 0 4px; }
.prod__price .now{ font-family:var(--display); font-size:2.6rem; color:#fff; line-height:1; }
.prod__price .old{ color:var(--faint); text-decoration:line-through; font-size:1.1rem; }
.prod__price .tag{ font-size:.7rem; letter-spacing:1px; text-transform:uppercase; color:#6ef0a8; border:1px solid rgba(110,240,168,.3); border-radius:6px; padding:4px 8px; font-weight:700; }
.prod__once{ color:var(--muted); font-size:.86rem; margin-bottom:22px; }
.prod__feats{ list-style:none; display:flex; flex-direction:column; gap:11px; margin:0 0 26px; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.prod__feats li{ position:relative; padding-left:28px; color:#d2d2d9; font-size:.98rem; }
.prod__feats li::before{ content:""; position:absolute; left:0; top:7px; width:7px; height:7px; border-radius:50%; background:var(--blood); box-shadow:0 0 9px var(--glow); }
.prod__feats b{ color:#fff; }
.prod__buy{ display:flex; gap:12px; flex-wrap:wrap; }
.prod__buy .btn{ flex:1; min-width:180px; }
.prod__reassure{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:18px; color:var(--faint); font-size:.78rem; }
.prod__reassure span{ display:inline-flex; align-items:center; gap:7px; }
.prod__reassure span::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--blood); }

/* ---------- cart ---------- */
.cart{ display:grid; grid-template-columns:1.5fr .8fr; gap:clamp(24px,4vw,44px); align-items:start; animation:coRise .5s var(--ease) both; }
@media (prefers-reduced-motion:reduce){ .cart{ animation:none; } }
@media(max-width:880px){ .cart{ grid-template-columns:1fr; } .summary{ position:static; } }
.citem{ display:flex; gap:16px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line); }
.citem img{ width:78px; height:96px; object-fit:cover; border-radius:10px; border:1px solid var(--line); flex:0 0 auto; }
.citem__b{ flex:1; min-width:0; }
.citem__b h3{ color:#fff; font-size:1.05rem; margin:0 0 4px; }
.citem__b small{ color:var(--muted); font-size:.84rem; }
.citem__price{ color:#fff; font-weight:700; white-space:nowrap; }
.qty{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:9px; overflow:hidden; margin-top:8px; }
.qty button{ width:30px; height:30px; background:none; border:0; color:#fff; cursor:pointer; font-size:1.1rem; } .qty button:hover{ background:rgba(255,255,255,.07); }
.qty button:disabled{ opacity:.3; cursor:not-allowed; } .qty button:disabled:hover{ background:none; }
.qty span{ min-width:32px; text-align:center; font-weight:700; color:#fff; }
.citem__rm{ background:none; border:0; color:var(--faint); cursor:pointer; font-size:.78rem; margin-top:8px; text-decoration:underline; } .citem__rm:hover{ color:var(--blood-bright); }
.summary{ background:linear-gradient(180deg,var(--card-2),var(--card)); border:1px solid var(--line); border-radius:16px; padding:24px; position:sticky; top:90px; }
.summary h3{ color:#fff; font-size:.78rem; letter-spacing:1.6px; text-transform:uppercase; margin:0 0 18px; padding-bottom:14px; border-bottom:1px solid var(--line-2); }
.summary__lines{ margin-top:18px; }
.summary__row{ display:flex; justify-content:space-between; align-items:center; padding:7px 0; color:var(--muted); font-size:.92rem; }
.summary__row b{ color:#fff; font-weight:600; font-size:1rem; }
.summary__item{ display:flex; align-items:center; gap:12px; padding:6px 0 16px; }
.summary__item img{ width:46px; height:60px; object-fit:cover; border-radius:8px; border:1px solid var(--line); flex:0 0 auto; }
.summary__item-img{ display:block; flex:0 0 auto; }
.summary__item-img img{ transition:transform .3s var(--ease), border-color .2s; }
.summary__item-img:hover img{ transform:scale(1.03); border-color:rgba(225,6,0,.5); }
.summary__item-b{ flex:1; min-width:0; }
.summary__item-name{ color:#fff; font-weight:600; font-size:.92rem; line-height:1.3; }
.summary__item-name a{ color:inherit; transition:color .2s; }
.summary__item-name a:hover{ color:var(--blood-bright); }
.summary__item-qty{ color:var(--muted); font-size:.8rem; margin-top:2px; }
.summary__item-price{ flex:0 0 auto; color:#fff; font-weight:700; font-size:.95rem; }
.summary__total{ display:flex; justify-content:space-between; align-items:center; padding:16px 0 2px; margin-top:12px; border-top:1px solid var(--line); }
.summary__total span{ color:#fff; font-weight:700; font-size:1.05rem; letter-spacing:.3px; } .summary__total b{ font-family:var(--display); font-size:2rem; color:#fff; letter-spacing:.5px; }
.cart__empty{ text-align:center; padding:60px 0; animation:coPop .45s var(--ease) both; }
.cart__empty p{ color:var(--muted); margin:10px 0 22px; }
@media (prefers-reduced-motion:reduce){ .cart__empty{ animation:none; } }

/* ---------- checkout ---------- */
.checkout{ display:grid; grid-template-columns:1.3fr .9fr; gap:clamp(24px,4vw,48px); align-items:start; }
/* mobile: the "Order summary ▾" toggle lives INSIDE #coSummary as its header, so open/closed is one
   continuous card (not two stacked boxes) — .summary__toggle reuses the same divider look as .summary h3 */
.summary__toggle{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
  margin:0 0 18px; padding-bottom:14px; border-bottom:1px solid var(--line-2); background:none; border-left:0; border-right:0; border-top:0; font-family:inherit; }
.summary .summary__toggle h3{ margin:0; padding:0; border:0; }
.summary__toggle-mobile{ display:none; align-items:center; gap:8px; flex:0 0 auto; }
.summary__toggle-mobile b{ font-family:var(--display); font-size:1.05rem; color:#fff; letter-spacing:.3px; }
.summary__toggle-chev{ flex:0 0 auto; color:var(--muted); }
@media(max-width:880px){
  .checkout{ grid-template-columns:1fr; }
  .summary{ position:static; }
  #coSummary{ order:-1; margin-bottom:26px; }
  /* closed (default): no divider under the bar, just the mini total + chevron as a compact preview */
  .summary__toggle{ cursor:pointer; margin:0; padding-bottom:0; border-bottom:0; transition:margin .3s var(--ease), padding .3s var(--ease); }
  .summary__toggle-mobile{ display:flex; }
  /* open: the real total is already visible in the body below, so hide the mini one and bring back the divider */
  #coSummary.is-open .summary__toggle{ margin:0 0 18px; padding-bottom:14px; border-bottom:1px solid var(--line-2); }
  #coSummary.is-open .summary__toggle-mobile b{ display:none; }
  .summary__toggle-chev{ transition:transform .25s var(--ease); }
  #coSummary.is-open .summary__toggle-chev{ transform:rotate(180deg); }
  #summaryBody{ max-height:900px; opacity:1; overflow:hidden; transition:max-height .35s var(--ease), opacity .3s ease; }
  #coSummary:not(.is-open) #summaryBody{ max-height:0; opacity:0; }
  @media (prefers-reduced-motion:reduce){ #summaryBody, .summary__toggle-chev, .summary__toggle{ transition:none; } }
}
/* checkout entrance system: everything settles in together, ONE moment, no cascade/stagger between
   blocks and summary (a staggered version felt messy) — coRise/coPop stay as the shared rhythm elsewhere. */
@keyframes coRise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes coPop{ from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:none; } }
.cblock{ position:relative; margin-bottom:30px; animation:coRise .5s var(--ease) both; }
.cblock--addr{ z-index:5; }   /* keeps the address-suggestion dropdown above the Payment block (each .cblock's animation transform makes it a stacking context) */
.cblock h2{ display:flex; align-items:center; gap:11px; color:#fff; font-size:1.15rem; margin-bottom:16px; }
/* Same treatment as the steps of the confirmation screen (.paid__ev em):
   dark badge ringed in red, number in Anton. The solid red badge
   drew the eye more than the content of the step itself. */
.cblock h2 i{ width:27px; height:27px; flex:0 0 auto; border-radius:50%;
  background:#14090a; border:1px solid rgba(225,6,0,.48); color:#fff;
  display:grid; place-items:center; font-family:var(--display); font-weight:400;
  font-size:.8rem; letter-spacing:.5px; font-style:normal; }
.checkout .summary{ animation:coRise .5s var(--ease) both; }
.checkout .alert{ animation:coPop .3s var(--ease) both; }
@media (prefers-reduced-motion:reduce){ .cblock, .checkout .summary, .checkout .alert{ animation:none; } }
.pay-note{ display:flex; gap:10px; align-items:flex-start; background:#121922; border:1px solid rgba(63,143,208,.28); border-left:4px solid #3f8fd0; border-radius:12px; padding:13px 15px; color:#bcd4ea; font-size:.9rem; line-height:1.5; }
.pay-cards{ display:flex; gap:8px; margin-top:14px; align-items:center; }
.pay-cards img{ height:22px; opacity:.85; }
.pay-cards--center{ justify-content:center; margin-top:12px; } .pay-cards--center img{ height:24px; }
/* embedded Stripe payment element */
.pay-element{ margin-top:4px; min-height:44px; }
.pay-cardbox{ background:#15151b; border:1px solid var(--line); border-radius:12px; padding:13px 15px; transition:border-color .2s, box-shadow .2s; }
.pay-cardbox.is-focus{ border-color:rgba(225,6,0,.55); box-shadow:0 0 0 3px rgba(225,6,0,.12); }
.pay-loading{ color:var(--muted); font-size:.9rem; padding:14px 2px; }
.pay-note-inline{ color:var(--muted); font-size:.86rem; line-height:1.5; padding:13px 15px; border:1px dashed var(--line); border-radius:12px; background:rgba(255,255,255,.02); }
.pay-err:not(:empty){ margin:14px 0 4px; }
.pay-trust{ display:flex; align-items:center; justify-content:center; gap:8px; text-align:center; color:var(--muted); font-size:.82rem; line-height:1.4; margin-top:16px; }
.pay-trust svg{ flex:0 0 auto; color:#34d27e; align-self:center; }   /* direct flex child: the padlock centers on the text block, even on two lines */

/* Stripe Express Checkout Element — provider-rendered Apple Pay / Google Pay / Link / PayPal buttons.
   min-height avoids a layout jump while it loads; hides itself (via JS) if nothing is available. */
.expresscheckout{ min-height:48px; margin-bottom:18px; }
.express-divider{ display:flex; align-items:center; gap:12px; margin:0 0 18px; color:var(--faint); font-size:.7rem; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; }
.express-divider::before, .express-divider::after{ content:""; flex:1; height:1px; background:var(--line); }

/* split card fields — Shopify-style: full-width number, expiry + CVC side by side */
.paycard{ display:flex; flex-direction:column; gap:14px; }
.paycard__field label{ display:block; font-size:.74rem; letter-spacing:1px; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:7px; }
.paycard__row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:480px){ .paycard__row{ grid-template-columns:1fr; } }

/* ---------- contact ---------- */
.contactgrid{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(28px,5vw,56px); align-items:start; }
@media(max-width:820px){ .contactgrid{ grid-template-columns:1fr; } }
/* phone: the submit hugged the left edge, center it full width for the thumb */
@media(max-width:640px){ #cForm .btn--lg{ display:flex; width:100%; justify-content:center; } }
.cinfo{ display:flex; flex-direction:column; gap:22px; }
.cinfo__i{ display:flex; gap:14px; align-items:flex-start; }
.cinfo__i .ic{ width:44px; height:44px; flex:0 0 auto; border-radius:12px; border:1px solid var(--line); display:grid; place-items:center; color:var(--blood-bright); }
.cinfo__i .ic svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; }
.cinfo__i h3{ color:#fff; font-size:1rem; margin:0 0 3px; } .cinfo__i p{ color:var(--muted); font-size:.92rem; }
.cinfo__i a{ color:var(--blood-bright); }

/* ---------- footer ---------- */
.foot{ border-top:1px solid var(--line); padding:44px 0 36px; }
.foot__badges{ display:flex; justify-content:center; align-items:center; gap:30px; flex-wrap:wrap; padding-bottom:30px; margin-bottom:30px; border-bottom:1px solid var(--line-2); }
.foot__badges img{ height:48px; opacity:.9; }
.foot__main{ display:flex; align-items:center; justify-content:space-between; gap:24px 30px; flex-wrap:wrap; }
.foot__logo img{ height:42px; }
.foot__social{ display:flex; align-items:center; gap:16px; }
.foot__social a{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; color:rgba(255,255,255,.75); transition:color .2s, transform .2s, border-color .2s, background .2s; }
.foot__social a svg{ width:20px; height:20px; }
.foot__social a:hover{ color:#fff; border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.06); transform:translateY(-3px); }
.foot__links{ display:flex; flex-wrap:wrap; gap:8px 20px; font-size:.82rem; } .foot__links a{ color:var(--muted); } .foot__links a:hover{ color:#fff; }
.foot__pay{ display:flex; justify-content:center; margin:30px 0 0; padding-bottom:26px; border-bottom:1px solid var(--line-2); } .foot__pay img{ height:22px; opacity:.85; }
.foot__copy{ color:var(--faint); font-size:.74rem; text-align:center; margin-top:24px; }
@media (max-width:680px){ .foot__main{ flex-direction:column; text-align:center; } .foot__links{ justify-content:center; } .foot__social{ justify-content:center; } }

/* ---------- reveal ---------- */
/* Scroll reveals: long, wide and unblurred, very soft curve (easeSoft),
   no more dry 0.3 s pop-ins (Sacha's feedback 05/08). */
.reveal{ opacity:0; transform:translateY(26px); 
  transition:opacity .9s var(--easeSoft), transform .9s var(--easeSoft); }
.reveal.in{ opacity:1; transform:none;  }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } .reveal{ opacity:1; transform:none; filter:none; } .top__mobile,.top__overlay{ transition:none; } }

/* ---------- situational gallery (carousel) ---------- */
.gal{ position:relative; max-width:900px; margin:0 auto; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:#000; }
.gal__track{ display:flex; transition:transform .6s var(--ease); }
.gal__slide{ flex:0 0 100%; margin:0; position:relative; }
.gal__slide img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.gal__slide figcaption{ position:absolute; left:0; right:0; bottom:0; padding:46px 22px 18px; background:linear-gradient(transparent, rgba(8,8,11,.85)); color:#fff; font-size:1.02rem; font-weight:600; }
.gal__nav{ position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:rgba(12,12,14,0.71); color:#fff; cursor:pointer; font-size:1.3rem; line-height:1; display:grid; place-items:center; transition:background .2s; z-index:2; }
.gal__nav:hover{ background:rgba(225,6,0,.6); } .gal__nav--prev{ left:14px; } .gal__nav--next{ right:14px; }
.gal__dots{ position:absolute; bottom:14px; left:0; right:0; display:flex; gap:7px; justify-content:center; z-index:2; }
.gal__dots button{ width:8px; height:8px; border-radius:50%; border:0; background:rgba(255,255,255,.45); cursor:pointer; padding:0; transition:width .25s, background .25s; }
.gal__dots button.is-on{ background:var(--blood-bright); width:22px; border-radius:4px; }
.gal__hint{ text-align:center; color:var(--faint); font-size:.78rem; margin-top:14px; }

/* ---------- express pay (Stripe Express Checkout Element wrapper) ---------- */
.xpay{ margin-top:16px; }
.xpay__sep{ display:flex; align-items:center; gap:12px; color:var(--faint); font-size:.7rem; letter-spacing:1.5px; text-transform:uppercase; margin:0 0 12px; }
.xpay__sep::before,.xpay__sep::after{ content:""; flex:1; height:1px; background:var(--line); }

/* ---------- reviews ---------- */
.rv__top{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:6px; color:var(--muted); font-size:.95rem; }
.rv__top .stars{ font-size:1.25rem; } .rv__top b{ color:#fff; font-size:1.4rem; font-family:var(--display); }
.rv__post{ max-width:640px; margin:0 auto 44px; background:linear-gradient(180deg,var(--card-2),var(--card)); border:1px solid var(--line); border-radius:16px; padding:24px; }
.rv__post h3{ color:#fff; font-size:1.1rem; margin:0 0 16px; }
.rv__pick{ display:inline-flex; gap:5px; font-size:1.6rem; line-height:1; color:var(--faint); cursor:pointer; margin-bottom:14px; }
.rv__pick span{ transition:color .12s, transform .12s; } .rv__pick span:hover{ transform:scale(1.15); } .rv__pick span.on{ color:var(--gold); }
.rv__grid{ columns:3 290px; column-gap:18px; }
.rv__card{ break-inside:avoid; margin:0 0 18px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 20px; }
.rv__card.is-new{ border-color:rgba(225,6,0,.45); }
.rv__card .stars{ color:var(--gold); font-size:.95rem; letter-spacing:1px; }
.rv__card p{ color:#d2d2d9; font-size:.95rem; line-height:1.6; margin:10px 0 14px; }
.rv__card .by{ display:flex; align-items:center; gap:10px; }
.rv__card .av{ width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#2c2c35,#16161c); color:#fff; display:grid; place-items:center; font-weight:800; font-size:.85rem; flex:0 0 auto; }
.rv__card cite{ font-style:normal; color:#fff; font-weight:600; font-size:.92rem; display:block; line-height:1.2; }
.rv__card small{ color:var(--faint); font-size:.76rem; }
.rv__card .vf{ color:#6ef0a8; font-weight:800; }
@media(max-width:900px){ .rv__grid{ columns:2 280px; } }
@media(max-width:600px){ .rv__grid{ columns:1; } }

/* ---------- atmosphere (richer background) ---------- */
.atmo{ position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(55% 45% at 50% -5%, rgba(225,6,0,.18), transparent 62%),
    radial-gradient(45% 40% at 88% 12%, rgba(225,6,0,.09), transparent 60%),
    radial-gradient(55% 50% at 8% 85%, rgba(225,6,0,.07), transparent 60%); }
.atmo::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 220px 60px rgba(0,0,0,.65); }
.atmo__glow{ position:fixed; left:50%; top:-10%; transform:translateX(-50%); width:120vw; height:60vh; z-index:-2; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(225,6,0,.12), transparent 65%); animation:none; }
@keyframes atmoPulse{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }
.atmo__grain{ position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion:reduce){ .atmo__glow{ animation:none; } }

/* ---------- animation helpers ---------- */
/* no blur filter in these reveals (perf pass of 09/09): a filter transition re-rasterizes the whole block on every frame, and the .in state must always leave filter:none */
.reveal--l{ opacity:0; transform:translateX(-30px); transition:opacity .95s var(--easeSoft), transform .95s var(--easeSoft); }
.reveal--r{ opacity:0; transform:translateX(30px); transition:opacity .95s var(--easeSoft), transform .95s var(--easeSoft); }
.reveal--l.in,.reveal--r.in{ opacity:1; transform:none; filter:none; }
/* cascade: each card starts 90 ms after the previous one, the wave is really visible */
.stg > *{ opacity:0; transform:translateY(30px) scale(.98); transition:opacity .85s var(--easeSoft), transform .85s var(--easeSoft); }
.stg.in > *{ opacity:1; transform:none; }
.stg.in > *:nth-child(2){ transition-delay:0.09s } .stg.in > *:nth-child(3){ transition-delay:0.18s } .stg.in > *:nth-child(4){ transition-delay:0.27s } .stg.in > *:nth-child(5){ transition-delay:0.36s }
.lift{ transition:transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.lift:hover{ transform:translateY(-6px); border-color:rgba(225,6,0,.4); box-shadow:0 26px 60px -36px var(--glow); }

/* ---------- product page polish ---------- */
.prod__cover{ box-shadow:0 40px 90px -40px rgba(0,0,0,.9), 0 0 0 1px var(--line); }
.prod__media{ position:sticky; top:90px; }
@media(max-width:880px){ .prod__media{ position:static; } }
.prod__rating .stars{ filter:drop-shadow(0 0 6px rgba(255,176,46,.4)); }
.prod__price .now{ text-shadow:0 0 26px rgba(225,6,0,.4); }
.prod__buy .btn{ position:relative; overflow:hidden; }
.prod__buy .btn--primary::after{ content:""; position:absolute; top:0; left:-65%; width:45%; height:100%; transform:skewX(-20deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent); animation:none; }
@keyframes shine{ 0%,18%{ left:-65% } 36%,100%{ left:170% } }

/* compact "how it works" recap strip */
.recap{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media(max-width:760px){ .recap{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:440px){ .recap{ grid-template-columns:1fr; } }
.recap__i{ position:relative; padding:22px 18px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(160deg, rgba(225,6,0,.05), rgba(20,20,26,.4)); }
.recap__n{ font-family:var(--display); font-size:1.3rem; color:var(--blood-bright); line-height:1; }
.recap__i h3{ color:#fff; font-size:1rem; margin:10px 0 5px; }
.recap__i p{ color:var(--muted); font-size:.86rem; line-height:1.5; }

/* ---------- cart polish ---------- */
.cart__items{ background:linear-gradient(180deg,rgba(27,27,34,.55),rgba(22,22,28,.55)); border:1px solid var(--line); border-radius:16px; padding:4px 22px; }
.citem{ display:flex; gap:18px; align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--line); }
.citem:last-child{ border-bottom:0; }
.citem img{ width:80px; height:104px; object-fit:cover; border-radius:10px; border:1px solid var(--line); flex:0 0 auto; }
.citem__b{ flex:1; min-width:0; }
.citem__b h3{ color:#fff; font-size:1.08rem; margin:0 0 4px; }
.citem__b small{ color:var(--muted); font-size:.84rem; }
.citem__row{ display:flex; align-items:center; gap:18px; margin-top:14px; }
.citem .qty{ margin-top:0; }
.citem__rm{ background:none; border:0; color:var(--faint); cursor:pointer; font-size:.8rem; text-decoration:underline; padding:0; margin-top:0; }
.citem__rm:hover{ color:var(--blood-bright); }
.citem__price{ color:#fff; font-weight:700; font-size:1.08rem; white-space:nowrap; padding-top:2px; }
.summary{ box-shadow:0 30px 70px -44px rgba(0,0,0,.9); }

/* ---------- reviews v2 (cleaner) ---------- */
.rvx__summary{ display:grid; grid-template-columns:auto 1fr auto; gap:34px; align-items:center; background:linear-gradient(180deg,var(--card-2),var(--card)); border:1px solid var(--line); border-radius:18px; padding:26px 32px; margin-bottom:32px; }
@media(max-width:760px){ .rvx__summary{ grid-template-columns:1fr; text-align:center; gap:22px; } }
.rvx__score b{ font-family:var(--display); font-size:3.6rem; color:#fff; line-height:.9; display:block; }
.rvx__count{ display:block; margin-top:8px; color:var(--muted); font-size:.86rem; font-weight:600; letter-spacing:.3px; }
.rvx__score .stars{ color:var(--gold); font-size:1.15rem; letter-spacing:2px; }
.rvx__score small{ display:block; color:var(--muted); font-size:.82rem; margin-top:7px; }
.rvx__verified{ display:inline-flex; align-items:center; gap:7px; margin-top:11px; padding:6px 13px 6px 8px; border-radius:999px;
  background:rgba(47,169,104,.12); border:1px solid rgba(47,169,104,.4); color:#63d69e; font-size:.76rem; font-weight:700; letter-spacing:.3px; line-height:1; }
.rvx__verified svg{ width:15px; height:15px; flex:0 0 auto; }
.rvx__bars{ display:flex; flex-direction:column; gap:8px; min-width:0; width:100%; }
.rvx__bar{ display:flex; align-items:center; gap:11px; font-size:.8rem; color:var(--muted); width:100%; text-align:left; background:none; border:0; padding:0; cursor:pointer; font-family:inherit; outline:none; }
.rvx__bar.is-active .lab, .rvx__bar.is-active .pct{ color:#fff; font-weight:700; }
.rv__empty{ column-span:all; text-align:center; color:var(--muted); padding:30px 10px; font-size:.9rem; }
/* reviews appear with a soft cascade (on load + on rating filter click) */
@keyframes rvIn{ from{ opacity:0; transform:translateY(10px) scale(.985); } to{ opacity:1; transform:none; } }
.rv__card{ animation:rvIn .45s var(--ease) both; }
@media (prefers-reduced-motion: reduce){ .rv__card{ animation:none; } }
.rvx__bar .lab{ width:34px; color:#cfcfd6; white-space:nowrap; }
.rvx__bar .track{ display:block; flex:1; height:7px; border-radius:4px; background:rgba(255,255,255,.08); overflow:hidden; }
.rvx__bar .fill{ display:block; height:100%; background:var(--gold); border-radius:4px; }
.rvx__bar .pct{ width:40px; text-align:right; }
@media(max-width:760px){ .rvx__bars{ max-width:340px; margin:0 auto; } }
/* masonry review wall: cards pack tightly regardless of length (no awkward gaps from uneven heights) */
.rv__grid{ display:block; columns:3 300px; column-gap:18px; }
.rv__card{ break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid; margin:0 0 18px; display:flex; flex-direction:column; transition:transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.rv__card:hover{ transform:translateY(-5px); border-color:rgba(225,6,0,.4); box-shadow:0 24px 56px -38px var(--glow); }
.rv__card .by{ margin-top:auto; padding-top:2px; }
.rv__pages{ display:flex; justify-content:center; align-items:center; gap:6px; margin-top:30px; flex-wrap:wrap; }
.rv__pg{ min-width:38px; height:38px; padding:0 10px; border:1px solid var(--line); background:#15151b; color:var(--text); border-radius:9px; font:inherit; font-size:.9rem; font-weight:600; cursor:pointer; transition:border-color .2s, background .2s, color .2s; }
.rv__pg:hover:not(:disabled):not(.is-on){ border-color:rgba(225,6,0,.5); color:#fff; }
.rv__pg.is-on{ background:var(--blood); border-color:var(--blood); color:#fff; cursor:default; }
.rv__pg--nav{ font-size:1.15rem; line-height:1; }
.rv__pg:disabled{ opacity:.35; cursor:not-allowed; }
.rv__pg-gap{ color:var(--faint); padding:0 4px; }
.rv__post{ margin:0; }

/* =========================================================
   PRODUCT PAGE v3 — clearer, green CTA, modal reviews
   ========================================================= */

/* footer email line */
.foot__mail{ margin-top:20px; font-size:.86rem; text-align:center; }
.foot__mail a{ color:var(--muted); transition:color .2s; }
.foot__mail a:hover{ color:#fff; }

/* green purchase button */
.btn--buy{ background:linear-gradient(180deg,#22c768,#13934a); color:#fff; border-color:transparent; box-shadow:0 16px 40px -16px rgba(225,6,0,.6); }
.btn--buy:hover{ background:linear-gradient(180deg,#2bd977,#16a754); transform:translateY(-2px); box-shadow:0 22px 54px -14px rgba(225,6,0,.7); }
.btn--buy svg{ fill:currentColor; }
.prod__buy .btn--buy::after{ content:""; position:absolute; top:0; left:-65%; width:45%; height:100%; transform:skewX(-20deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); animation:none; }

/* trio of movie-card style badges: rating, duration, genre. Three identical cards
   (glowing red notch on top, label, Anton value, subline), centered
   on ONE line at every size. */
.prod__badges{ display:flex; justify-content:center; gap:10px; margin-bottom:44px; }
/* light rule under the badges: faded at the edges, touch of red in the center */
.psep{ width:min(340px, 62%); height:1px; margin:0 auto 44px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.13) 30%,
    rgba(225,6,0,.5) 50%, rgba(255,255,255,.13) 70%, transparent); }
.pbadge{ flex:0 1 178px; min-width:0; display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:14px 12px 13px; border-radius:14px; text-align:center; position:relative; overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 16px 34px -22px rgba(0,0,0,.95); }
.pbadge::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:44px; height:2px; border-radius:0 0 3px 3px;
  background:var(--blood); box-shadow:0 0 14px var(--glow); }
.pbadge__k{ font-size:.63rem; letter-spacing:2.4px; text-transform:uppercase;
  color:var(--blood-bright); font-weight:700; white-space:nowrap; }
.pbadge__v{ font-family:var(--display); font-size:1.5rem; line-height:1; color:#fff;
  letter-spacing:.5px; text-transform:uppercase; }
.pbadge__v em{ font-style:normal; color:var(--faint); font-size:.6em; }
.pbadge__s{ font-size:.74rem; color:var(--muted); line-height:1; display:inline-flex; align-items:center; white-space:nowrap; }
.pbadge__s b{ color:#fff; font-weight:700; }
.pbadge .rstars{ position:relative; display:inline-block; font-size:.78rem; letter-spacing:1.8px; line-height:1; }
.pbadge .rstars u{ text-decoration:none; color:rgba(255,255,255,.15); }
.pbadge .rstars b{ position:absolute; top:0; left:0; height:100%; width:var(--fill,100%);
  overflow:hidden; white-space:nowrap; color:var(--gold); font-weight:400; letter-spacing:1.8px;
  filter:drop-shadow(0 0 5px rgba(255,176,46,.4)); }
@media(max-width:560px){
  .prod__badges{ gap:7px; margin-bottom:32px; }
  .psep{ margin-bottom:32px; }
  .pbadge{ flex:1 1 0; padding:11px 5px 10px; gap:6px; border-radius:12px; }
  .pbadge__k{ font-size:.5rem; letter-spacing:1.1px; }
  .pbadge__v{ font-size:1.12rem; }
  .pbadge__s{ font-size:.62rem; }
  .pbadge .rstars{ font-size:.66rem; letter-spacing:1.4px; }
}

/* "no subscription" line — a touch nicer */
.prod__once{ color:var(--muted); font-size:.86rem; margin-bottom:22px; display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.prod__once b{ color:#e6e6ea; font-weight:700; }

/* instant-access reminder banner (you can play right away) */
.prod__instant{ display:flex; align-items:center; gap:11px; margin-top:16px; padding:13px 16px;
  background:linear-gradient(180deg, rgba(34,199,104,.12), rgba(34,199,104,.05)); border:1px solid rgba(34,199,104,.3); border-radius:12px; color:#cfeede; font-size:.9rem; line-height:1.45; }
.prod__instant svg{ width:22px; height:22px; flex:0 0 auto; color:#34d27e; }
.prod__instant b{ color:#fff; }

/* reassurance row with icons — single line */
.prod__reassure{ display:flex; flex-wrap:wrap; align-items:center; gap:11px 22px; margin-top:20px; color:var(--text); font-size:.85rem; }
.prod__reassure span{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.prod__reassure span::before{ display:none; }
.prod__reassure svg{ width:17px; height:17px; flex:0 0 auto; fill:none; stroke:var(--blood-bright); stroke-width:1.7; }
@media(max-width:560px){
  .prod__reassure{ flex-wrap:nowrap; justify-content:space-between; gap:10px; font-size:.74rem; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
  .prod__reassure::-webkit-scrollbar{ display:none; }
  .prod__reassure span{ gap:6px; }
  .prod__reassure svg{ width:14px; height:14px; }
}

/* verified badge on review cards */
.rv__card small{ display:inline-flex; align-items:center; gap:7px; flex-wrap:wrap; }
.rv__card .vf{ display:inline-flex; align-items:center; gap:4px; background:rgba(47,169,104,.14); color:#4ad48d;
  border:1px solid rgba(47,169,104,.34); border-radius:999px; padding:2px 9px; font-size:.68rem; font-weight:700; letter-spacing:.3px; }

/* review modal */
.rvm{ position:fixed; inset:0; z-index:2000; display:none; align-items:center; justify-content:center; padding:18px; }
.rvm.is-open{ display:flex; }
.rvm__backdrop{ position:absolute; inset:0; background:rgba(8,8,11,0.86); animation:rvmFade .25s var(--ease); }
.rvm__dialog{ position:relative; z-index:1; width:100%; max-width:540px; max-height:90vh; overflow:auto;
  background:linear-gradient(180deg,var(--card-2),var(--card)); border:1px solid var(--line); border-radius:18px; padding:30px clamp(20px,4vw,34px);
  box-shadow:0 50px 120px -30px rgba(0,0,0,.92); animation:rvmPop .3s var(--ease); }
.rvm__close{ position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%; border:1px solid var(--line);
  background:rgba(255,255,255,.04); color:#fff; cursor:pointer; font-size:1.25rem; line-height:1; display:grid; place-items:center; transition:border-color .2s, background .2s; }
.rvm__close:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
/* .rv__post carries its own card look (background/border/padding) for its standalone use elsewhere,
   but nested inside .rvm__dialog that doubles up as a rectangle-in-a-rectangle: strip it here so the
   modal itself is the only visible box. */
.rvm__dialog .rv__post{ background:none; border:0; border-radius:0; padding:0; }
@keyframes rvmFade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes rvmPop{ from{ opacity:0; transform:translateY(16px) scale(.98) } to{ opacity:1; transform:none } }
body.rvm-open{ overflow:hidden; }

/* cart: instant-access note in summary */
.summary__instant{ display:flex; align-items:center; gap:9px; margin-top:14px; padding:11px 13px;
  background:linear-gradient(180deg, rgba(34,199,104,.12), rgba(34,199,104,.05)); border:1px solid rgba(34,199,104,.3); border-radius:11px; color:#cfeede; font-size:.82rem; line-height:1.4; }
.summary__instant svg{ width:18px; height:18px; flex:0 0 auto; color:#34d27e; }

/* cart/checkout: reminder that this order is marked as a gift (checked on the product page) — styled
   like a free bonus perk (green, "Free" pill) rather than a plain logistics note */
.giftflag{ display:flex; align-items:flex-start; gap:10px; margin-top:14px; padding:12px 13px;
  background:linear-gradient(180deg, rgba(52,210,126,.13), rgba(52,210,126,.04)); border:1px solid rgba(52,210,126,.32); border-radius:11px; }
.giftflag__ico{ font-size:1.15rem; line-height:1; flex:0 0 auto; margin-top:1px; }
.giftflag__b{ min-width:0; }
.giftflag__top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.giftflag__top b{ color:#fff; font-size:.86rem; font-weight:700; }
.giftflag__badge{ display:inline-block; font-size:.6rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:#34d27e; border:1px solid rgba(52,210,126,.4); border-radius:5px; padding:2px 6px; }
.giftflag__sub{ display:block; color:var(--muted); font-size:.78rem; line-height:1.4; margin-top:3px; }

/* =========================================================
   PRODUCT v4 — gift/perso options · evidence board · mobile hero
   ========================================================= */

/* order options (gift + personalization) */
.prod__opts{ margin:22px 0 6px; display:flex; flex-direction:column; gap:11px; }
.opt{ display:flex; align-items:flex-start; gap:13px; padding:14px 16px; border:1px solid var(--line); border-radius:13px;
  background:linear-gradient(180deg, rgba(27,27,34,.5), rgba(22,22,28,.5)); cursor:pointer; transition:border-color .2s, background .2s; }
.opt:hover{ border-color:rgba(255,255,255,.22); background:linear-gradient(180deg, rgba(31,31,40,.6), rgba(24,24,30,.6)); }
.opt input{ position:absolute; opacity:0; width:0; height:0; }
.opt__box{ flex:0 0 auto; width:22px; height:22px; border-radius:7px; border:1.5px solid var(--line); margin-top:1px; position:relative; transition:background .2s, border-color .2s; }
.opt input:checked + .opt__box{ background:var(--blood); border-color:var(--blood); }
.opt input:checked + .opt__box::after{ content:""; position:absolute; left:7px; top:3px; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.opt input:focus-visible + .opt__box{ outline:2px solid var(--blood-bright); outline-offset:2px; }
.opt__txt{ display:flex; flex-direction:column; gap:2px; }
.opt__txt b{ color:#fff; font-size:.96rem; font-weight:700; }
.opt__txt small{ color:var(--muted); font-size:.82rem; line-height:1.4; }
.opt__price{ color:#34d27e; font-weight:800; margin-left:4px; }
.opt__gift{ margin:-2px 0 2px; }
.opt__gift textarea{ width:100%; min-height:78px; background:#15151b; border:1px solid var(--line); border-radius:11px; padding:12px 14px; color:#fff; font-family:inherit; font-size:.92rem; resize:vertical; }
.opt__gift textarea:focus{ outline:0; border-color:rgba(225,6,0,.5); }


/* evidence board (replaces carousel) */
.ev-sec{ position:relative; }
.evboard{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:36px 26px; max-width:1000px; margin:0 auto;
  padding:40px clamp(14px,3vw,36px); border-radius:16px; border:1px solid var(--line);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 8px),
    radial-gradient(120% 90% at 30% 0%, rgba(225,6,0,.07), transparent 55%),
    linear-gradient(180deg, #17120f, #100c0b);
  box-shadow:inset 0 0 130px rgba(0,0,0,.6); }
.ev{ position:relative; background:#f3ece0; color:#1a1713; padding:13px 13px 15px; border-radius:2px; transform:rotate(var(--r,0deg));
  box-shadow:0 20px 42px -18px rgba(0,0,0,.85); transition:transform .35s var(--ease), box-shadow .35s; }
.ev:hover{ transform:rotate(0deg) translateY(-7px) scale(1.04); box-shadow:0 34px 64px -22px rgba(0,0,0,.95); z-index:4; }
.ev__pin{ position:absolute; top:-10px; left:50%; transform:translateX(-50%); width:17px; height:17px; border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #ff7a6f, #b00b06); box-shadow:0 4px 7px rgba(0,0,0,.55), inset 0 -2px 3px rgba(0,0,0,.3); z-index:2; }
.ev__tag{ display:inline-block; font:700 .58rem/1 'Courier New',monospace; letter-spacing:1.5px; color:#b00b06; border:1px solid rgba(176,11,6,.4); padding:3px 6px; border-radius:3px; margin-bottom:8px; }
.ev--photo img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:1px; filter:grayscale(.3) contrast(1.05) brightness(.95); }
.ev p{ font-size:.83rem; line-height:1.45; margin-top:9px; color:#2b2620; }
.ev--note{ background:#fbf3c9; }
.ev--note .ev__hand{ font-family:'Caveat','Bradley Hand','Segoe Script',cursive; font-size:1.3rem; line-height:1.3; color:#23201b; margin-top:4px; }
.ev--note .ev__hand span{ display:block; font-size:.98rem; color:#7a6f57; margin-top:6px; }
@media(max-width:560px){ .evboard{ grid-template-columns:1fr; gap:26px; padding:26px 16px; } .ev{ transform:none; } .ev:hover{ transform:translateY(-4px); } }

/* product hero — mobile polish */
@media(max-width:880px){
  .prod{ gap:26px; }
  .prod__cover{ aspect-ratio:4/5; max-height:64vh; object-position:center top; }
  .prod h1{ font-size:clamp(2rem,8vw,2.6rem); margin-bottom:12px; }
  .prod__lead{ font-size:1rem; line-height:1.55; }
  .prod__price{ margin:18px 0 4px; }
  .prod__price .now{ font-size:2.3rem; }
  .prod__feats{ gap:9px; padding:16px 0; }
  .prod__buy .btn{ min-width:100%; }
}
@media(max-width:560px){
  .prod__rating{ font-size:.85rem; gap:5px 8px; }
  .prod__rating .stars{ font-size:1rem; }
  .opt{ padding:13px 14px; }
}

/* =========================================================
   PRODUCT v5 — breadcrumb · once-line · gift fields · flow · board tiles
   ========================================================= */

/* breadcrumb */
.crumbs{ display:inline-flex; align-items:center; gap:9px; margin-bottom:6px; padding:7px 14px; border:1px solid var(--line-2); border-radius:999px;
  background:rgba(255,255,255,.025); font-size:.7rem; letter-spacing:1.3px; text-transform:uppercase; color:var(--muted); }
.crumbs a{ color:var(--muted); transition:color .2s; } .crumbs a:hover{ color:#fff; }
.crumbs .sep{ color:var(--faint); font-size:.85rem; }
.crumbs .cur{ color:var(--blood-bright); font-weight:700; }
/* Under 880px the product page goes single column and the poster centers:
   the breadcrumb centers with it, and the two links get some breathing room. */
@media(max-width:880px){
  .crumbs{ display:flex; flex-wrap:wrap; justify-content:center;
    width:max-content; max-width:100%; margin-left:auto; margin-right:auto; gap:5px 14px; }
}
@media(max-width:560px){ .crumbs{ font-size:.62rem; gap:4px 12px; padding:6px 15px; } }

/* one-time payment line — clean chip (mobile-safe) */
.prod__once{ display:flex; align-items:center; gap:10px; margin:0 0 22px; padding:11px 15px; border:1px solid var(--line);
  border-radius:12px; background:linear-gradient(180deg, rgba(52,210,126,.07), rgba(52,210,126,.02)); color:var(--text); font-size:.86rem; line-height:1.4; }
.prod__once svg{ width:18px; height:18px; flex:0 0 auto; color:#34d27e; }
.prod__once b{ color:#fff; font-weight:700; }

/* gift fields + free badge + note */
.opt__free{ display:inline-block; margin-left:6px; font-size:.6rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:#34d27e; border:1px solid rgba(52,210,126,.4); border-radius:5px; padding:2px 6px; vertical-align:middle; }
.opt__gift .field{ margin-bottom:12px; }
.opt__gift .field:last-of-type{ margin-bottom:6px; }
.opt__gift textarea{ min-height:62px; }
.opt__note{ display:flex; gap:7px; color:var(--muted); font-size:.78rem; line-height:1.45; margin-top:2px; }

/* "From purchase" — flow stepper */
.flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; position:relative; max-width:940px; margin:0 auto; }
.flow::before{ content:""; position:absolute; top:27px; left:12.5%; right:12.5%; height:2px; z-index:0;
  background:linear-gradient(90deg, transparent, rgba(225,6,0,.45) 14%, rgba(225,6,0,.45) 86%, transparent); }
.flow__i{ position:relative; z-index:1; text-align:center; padding:0 6px; }
.flow__n{ width:54px; height:54px; margin:0 auto 16px; display:grid; place-items:center; border-radius:50%; position:relative;
  background:radial-gradient(circle at 50% 35%, #23232c, #131318); border:1px solid rgba(225,6,0,.5); color:#fff;
  font-family:var(--display); font-size:1.5rem; line-height:1; box-shadow:0 0 0 6px rgba(225,6,0,.05), 0 16px 30px -16px var(--glow); }
.flow__b h3{ color:#fff; font-size:1.04rem; margin:0 0 6px; }
.flow__b p{ color:var(--muted); font-size:.87rem; line-height:1.5; }
/* mobile: dot filled on scroll (class set by product.php's JS) */
@media (max-width:760px), (pointer:coarse) and (max-width:1100px){
  .flow__i.num-fill .flow__n{ background:var(--blood); border-color:var(--blood); box-shadow:0 0 0 6px rgba(225,6,0,.12), 0 0 26px -2px var(--glow); }
}

@media(max-width:760px){
  .flow{ grid-template-columns:1fr; gap:0; max-width:460px; }
  .flow::before{ top:30px; bottom:30px; left:26px; right:auto; width:2px; height:auto;
    background:linear-gradient(180deg, transparent, rgba(225,6,0,.45) 8%, rgba(225,6,0,.45) 92%, transparent); }
  .flow__i{ display:flex; align-items:flex-start; gap:18px; text-align:left; padding:0 0 30px; }
  .flow__n{ margin:0; flex:0 0 auto; width:52px; height:52px; }
  .flow__b{ padding-top:6px; }
}

/* evidence board — simple icon tiles (placeholders) */
.ev__ph{ display:grid; place-items:center; width:100%; aspect-ratio:4/3; border-radius:2px;
  background:linear-gradient(160deg, #211b18, #141010); border:1px solid rgba(255,255,255,.05); color:#8a7d72; }
.ev__ph svg{ width:42px; height:42px; }

/* =========================================================
   PRODUCT v6 — cleaner buy button · once-line · options · promo
   ========================================================= */

/* green buy button — kill the shimmer (looked buggy), soften glow */
.prod__buy .btn--buy::after{ content:none !important; }
.btn--buy{ box-shadow:0 14px 32px -18px rgba(24,196,104,.55); }
.btn--buy:hover{ box-shadow:0 18px 40px -16px rgba(24,196,104,.62); }

/* one-time payment — clean minimal line (no box) */
.prod__once{ background:transparent; border:0; padding:0; margin:4px 0 22px; gap:8px; color:var(--muted); font-size:.85rem; }
.prod__once svg{ width:16px; height:16px; color:#34d27e; }

/* options — lighter & tidier */
.prod__opts{ gap:10px; }
.opt{ padding:13px 15px; background:rgba(255,255,255,.025); }
.opt__txt small{ font-size:.8rem; }

/* checkout — promo code */
.promo{ display:flex; gap:8px; margin:16px 0 4px; }
.promo input{ flex:1; min-width:0; background:#15151b; border:1px solid var(--line); border-radius:10px; padding:11px 13px; color:#fff; font-family:inherit; font-size:.9rem; letter-spacing:1.5px; text-transform:uppercase; }
.promo input:focus{ outline:0; border-color:rgba(225,6,0,.5); }
.promo input:disabled{ opacity:.55; }
.promo .btn{ padding:11px 18px; font-size:.74rem; }
.promo__ok{ color:#4ad48d; font-size:.82rem; margin:4px 0 2px; } .promo__ok b{ color:#fff; }
.promo__err{ color:#fff; font-size:.82rem; margin:4px 0 2px; }
.promo__row b{ color:#4ad48d !important; }
.promo--on{ align-items:center; justify-content:space-between; gap:10px; padding:8px 8px 8px 13px; border:1px solid rgba(74,212,141,.4); border-radius:10px; background:rgba(74,212,141,.08); }
.promo__chip{ display:flex; align-items:center; gap:6px; color:#4ad48d; font-size:.84rem; letter-spacing:.3px; } .promo__chip b{ color:#fff; letter-spacing:1.2px; }
.promo__rm{ flex:0 0 auto; background:none; border:0; color:var(--muted); font-size:.78rem; font-weight:600; cursor:pointer; padding:6px 10px; border-radius:8px; transition:color .2s, background .2s; }
.promo__rm:hover{ color:#fff; background:rgba(255,255,255,.06); }
.promo__apply{ flex:0 0 auto; background:transparent; color:#34d27e; border:1px solid rgba(52,210,126,.5); border-radius:999px; padding:11px 18px; font-family:inherit; font-weight:700; font-size:.74rem; letter-spacing:1px; text-transform:uppercase; cursor:pointer; transition:background .2s, color .2s, border-color .2s, transform .2s; }
.promo__apply:hover{ background:#34d27e; color:#0c0c0e; border-color:#34d27e; transform:translateY(-1px); }

/* =========================================================
   PRODUCT v7 — scrolling image strip · breadcrumb spacing
   ========================================================= */

/* breadcrumb — more air before the poster */
.crumbs{ margin-bottom:24px; }

/* situational strip — single line, auto-scroll */
.strip{ overflow:hidden; position:relative; padding:4px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.strip__track{ display:flex; width:max-content; animation:stripScroll 76.8s linear infinite; }
.strip:hover .strip__track{ animation-play-state:paused; }
.strip__i{ position:relative; flex:0 0 auto; width:clamp(238px,62vw,320px); margin:0 18px 0 0; border-radius:13px; overflow:hidden;
  border:1px solid var(--line); box-shadow:0 24px 50px -28px rgba(0,0,0,.9); }
.strip__i img{ width:100%; height:216px; object-fit:cover; display:block; filter:grayscale(.28) contrast(1.06) brightness(.9); transition:filter .4s var(--ease), transform .5s var(--ease); }
.strip__i:hover img{ filter:grayscale(0) contrast(1.05) brightness(1); transform:scale(1.05); }
.strip__i figcaption{ position:absolute; left:0; right:0; bottom:0; padding:36px 16px 14px; color:#fff; font-size:.94rem; font-weight:600; letter-spacing:.2px;
  background:linear-gradient(transparent, rgba(8,8,11,.92)); }
.strip + .wrap .gal__hint{ margin-top:18px; }
@keyframes stripScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .strip__track{ animation:none; } }

/* =========================================================
   PRODUCT v8 — buy box · final CTA (hero review)
   ========================================================= */

/* grouped purchase area */
.buybox{ margin-top:26px; padding:22px clamp(18px,3vw,26px); border:1px solid var(--line); border-radius:18px;
  background:linear-gradient(180deg, rgba(28,28,35,.6), rgba(18,18,23,.55)); box-shadow:0 30px 70px -52px rgba(0,0,0,.95); }
.buybox__head{ margin-bottom:16px; }
.buybox .prod__price{ margin:0 0 8px; }
.buybox .prod__once{ margin:0; }
.buybox .prod__opts{ margin-top:18px; }
.buybox .xpay{ margin-top:16px; }

/* final call-to-action */
.fcta{ background:var(--ink-1); }
.fcta__box{ max-width:680px; margin:0 auto; text-align:center; padding:clamp(34px,6vw,58px) clamp(22px,4vw,46px);
  border:1px solid var(--line); border-radius:20px;
  background:radial-gradient(130% 100% at 50% 0%, rgba(225,6,0,.13), transparent 58%), linear-gradient(180deg, var(--card-2), var(--card));
  box-shadow:0 44px 100px -54px rgba(0,0,0,.95); }
.fcta__box h2{ font-size:clamp(1.9rem,5vw,2.8rem); color:#fff; margin:14px 0; }
.fcta__box > p{ color:var(--muted); margin-bottom:26px; }
.fcta__sub{ color:var(--faint) !important; font-size:.78rem; letter-spacing:.5px; margin:16px 0 0 !important; }

/* =========================================================
   PRODUCT v9 — bigger captionless strip · roomier buy box
   ========================================================= */

/* marquee — bigger images, no captions */
.strip__i{ width:clamp(300px,82vw,440px); margin-right:22px; }
.strip__i img{ height:clamp(240px,56vw,320px); }
.strip__i figcaption{ display:none; }

/* buy box — looser, less cramped */
.buybox{ padding:28px clamp(20px,3.5vw,32px); }
.buybox__head{ margin-bottom:22px; }
.buybox .prod__price .now{ font-size:3rem; }
.buybox .prod__opts{ margin:22px 0 0; gap:14px; }
.buybox .prod__buy{ margin-top:22px; gap:14px; }
.buybox .xpay{ margin-top:24px; }
.buybox .xpay__sep{ margin-bottom:16px; }
.opt{ padding:16px 18px; }
.prod__buy .btn{ padding:18px 30px; }

/* =========================================================
   PRODUCT v10 — fluid, airy hero (de-cramped) · gift only
   ========================================================= */
.prod__rating{ margin-bottom:16px; }
.prod h1{ margin:0 0 18px; line-height:1.05; }
.prod__lead{ font-size:1.07rem; line-height:1.72; margin:0; }

/* features: no boxing borders — let whitespace do the work */
.prod__feats{ gap:16px; margin:30px 0 0; padding:0; border:0; }
.prod__feats li{ font-size:1rem; padding-left:30px; }
.prod__feats li::before{ top:9px; }

/* buy box: softer, roomier */
.buybox{ margin-top:34px; padding:28px clamp(22px,4vw,32px); border:1px solid var(--line-2); border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.012)); box-shadow:0 30px 70px -56px rgba(0,0,0,.9); }
.buybox__head{ margin-bottom:0; }
.buybox .prod__price{ margin:0; }
.buybox .prod__price .now{ font-size:3rem; }
.buybox .prod__once{ margin-top:11px; }
.buybox .prod__opts{ margin-top:24px; }
.buybox .prod__buy{ margin-top:22px; gap:14px; }
.buybox .xpay{ margin-top:26px; }
.buybox .xpay__sep{ margin-bottom:18px; }

@media(max-width:880px){
  .prod__feats{ margin-top:26px; }
  .buybox{ margin-top:28px; padding:24px 20px; }
}

/* promo block needs room on the cart summary too */
.summary .promo{ margin-top:16px; }

/* cart item — clickable title + thumb to product page */
.citem__b h3 a{ color:inherit; transition:color .2s; }
.citem__b h3 a:hover{ color:var(--blood-bright); }
.citem__img{ display:block; }
.citem__img img{ transition:transform .3s var(--ease), border-color .2s; }
.citem__img:hover img{ transform:scale(1.03); border-color:rgba(225,6,0,.5); }

/* =========================================================
   PRODUCT v11 — rebuilt buy area · cinematic final CTA
   ========================================================= */

/* ---- buy area (rebuilt clean) ---- */
.buy{ margin-top:34px; padding:26px clamp(20px,4vw,30px); border:1px solid var(--line); border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.008)); box-shadow:0 30px 70px -56px rgba(0,0,0,.9); }
.buy__top{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:22px; }
.buy__amt{ font-family:var(--display); font-size:3.3rem; color:#fff; line-height:1; }
.buy__once{ color:var(--muted); font-size:.88rem; }
.buy .btn{ width:100%; }
.buy .btn--buy{ margin-bottom:11px; }
.buy .btn--ghost{ color:#fff; }
.buy__or{ display:flex; align-items:center; gap:12px; color:var(--faint); font-size:.7rem; letter-spacing:1.5px; text-transform:uppercase; margin:22px 0 16px; }
.buy__or::before,.buy__or::after{ content:""; flex:1; height:1px; background:var(--line); }

/* ---- final CTA — cinematic, distinct band ---- */
.fcta{ position:relative; overflow:hidden; padding:clamp(74px,12vw,124px) 0; text-align:center; background:#0b0b0d; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.fcta::before{ content:""; position:absolute; inset:0; z-index:0;
  background-image:linear-gradient(180deg, rgba(9,9,11,.84), rgba(9,9,11,.93)), url('../img/sinister-project-poster-t02d-dm.jpg');
  background-size:cover; background-position:center 28%; filter:grayscale(.25); }
.fcta::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(78% 62% at 50% 48%, rgba(225,6,0,.24), transparent 64%); }
.fcta .wrap{ position:relative; z-index:2; }
.fcta__box{ max-width:680px; margin:0 auto; border:0; background:none; box-shadow:none; padding:0; }
.fcta__box .eyebrow{ color:var(--blood-bright); }
.fcta__box h2{ font-size:clamp(2.2rem,6.5vw,3.9rem); color:#fff; margin:16px 0; text-shadow:0 6px 34px rgba(0,0,0,.7); }
.fcta__box > p{ color:#d8d8df; font-size:1.06rem; margin-bottom:30px; }
.fcta__box .btn--buy{ box-shadow:0 22px 54px -16px rgba(24,196,104,.55); }
.fcta__sub{ color:rgba(255,255,255,.5) !important; font-size:.78rem; letter-spacing:.5px; margin:18px 0 0 !important; }

/* =========================================================
   v12 — cleaner footer
   ========================================================= */

/* cleaner footer — keep everything, drop the extra divider lines + opaque (kills red glow bleed) */
.foot{ background:var(--ink); position:relative; }
.foot__badges{ padding-bottom:0; margin-bottom:34px; border-bottom:0; }
.foot__pay{ margin:34px 0 0; padding-bottom:0; border-bottom:0; }
.foot__copy{ margin-top:20px; }

/* =========================================================
   v13 — FOOTER rebuilt (columns + bottom bar)
   ========================================================= */
.foot{ border-top:1px solid var(--line); background:var(--ink); padding:56px 0 30px; }
.foot__top{ display:grid; grid-template-columns:1.5fr 1fr; gap:48px; padding-bottom:38px; }
.foot__brand{ max-width:380px; }
.foot__logo img{ height:46px; }
.foot__tag{ color:var(--muted); font-size:.9rem; line-height:1.65; margin:16px 0 20px; }
.foot__social{ display:flex; align-items:center; gap:12px; }
.foot__social a{ width:40px; height:40px; border-radius:50%; border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; color:rgba(255,255,255,.72); transition:color .2s, transform .2s, border-color .2s, background .2s; }
.foot__social a svg{ width:18px; height:18px; }
.foot__social a:hover{ color:#fff; border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.06); transform:translateY(-3px); }
.foot__cols{ display:flex; gap:54px; justify-content:flex-end; }
.foot__col{ display:flex; flex-direction:column; gap:12px; }
.foot__col h4{ color:#fff; font-size:.7rem; letter-spacing:1.6px; text-transform:uppercase; margin:0 0 4px; font-weight:700; }
.foot__col a{ color:var(--muted); font-size:.88rem; transition:color .2s; } .foot__col a:hover{ color:#fff; }
.foot__bar{ display:flex; align-items:center; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; padding-top:24px; border-top:1px solid var(--line-2); }
.foot__copy{ color:var(--faint); font-size:.78rem; margin:0; }
.foot__bar-right{ display:flex; align-items:center; gap:16px; }
.foot__age{ flex:0 0 auto; font-size:.66rem; font-weight:800; letter-spacing:.5px; color:#fff; border:1px solid var(--line); border-radius:6px; padding:5px 9px; }
.foot__pay{ height:23px; opacity:.85; display:block; margin:0; padding:0; border:0; }
.foot__bar .foot__copy{ margin:0; }
@media(max-width:760px){
  .foot{ padding:44px 0 28px; }
  .foot__top{ grid-template-columns:1fr; gap:34px; padding-bottom:30px; }
  .foot__cols{ justify-content:center; gap:48px; }
  .foot__col{ align-items:center; text-align:center; }
  .foot__bar{ flex-direction:column-reverse; align-items:flex-start; gap:18px; }
  .foot__bar .foot__copy{ align-self:center; text-align:center; margin-left:auto; margin-right:auto; }
  .foot__bar-right{ gap:14px; }
}
@media(max-width:420px){ .foot__cols{ gap:32px; } }

/* footer — 3 brand/age logos back in the bottom bar */
.foot__bar-right{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.foot__badges{ display:flex; align-items:center; gap:18px; }
.foot__badges img{ height:26px; width:auto; opacity:.85; }

/* footer mobile — stop horizontal overflow (logos + payments stacked). Scoped to .foot (not html/body) —
   overflow on an ancestor of the sticky header breaks position:sticky entirely, and the footer sits after
   the header in the DOM anyway, so this containment doesn't need to reach that high up the tree. */
.foot{ overflow-x:clip; }
.foot__pay{ max-width:100%; }
@media(max-width:760px){
  .foot__bar-right{ flex-direction:column; align-items:flex-start; gap:16px; width:100%; }
  .foot__badges{ flex-wrap:wrap; }
  /* the payment methods image centers on phones, like the poster */
  .foot__pay{ height:auto; max-height:24px; max-width:100%; margin-left:auto; margin-right:auto; align-self:center; }
}

/* footer — both logos together on the left, bigger */
.foot__logos{ display:flex; align-items:center; gap:26px; flex-wrap:nowrap; margin-bottom:18px; }
.foot__logos img{ flex:0 0 auto; }
.foot__logo img{ height:44px; width:auto; }
.foot__studio{ height:46px; width:auto; opacity:.9; }
.foot__warn{ height:40px; width:auto; opacity:.85; }
.foot__tag{ margin:0 0 20px; }
@media(max-width:760px){ .foot__logos{ gap:18px; } .foot__logo img{ height:40px; } .foot__studio{ height:40px; } .foot__warn{ height:34px; } }
@media(max-width:420px){ .foot__logos{ gap:12px; } .foot__logo img{ height:34px; } .foot__studio{ height:33px; } .foot__warn{ height:28px; } }

/* back-to-top button */
.totop{ position:fixed; right:clamp(16px,3vw,28px); bottom:clamp(16px,3vw,28px); z-index:900; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--blood); background:var(--blood); color:#fff; cursor:pointer;
  display:grid; place-items:center; opacity:0; visibility:hidden; transform:translateY(12px); box-shadow:0 14px 32px -12px var(--glow);
  transition:opacity .3s var(--ease), transform .3s var(--ease), background .2s, border-color .2s, box-shadow .2s; }
.totop.is-on{ opacity:1; visibility:visible; transform:none; }
.totop:hover{ background:var(--blood-bright); border-color:var(--blood-bright); transform:translateY(-3px); box-shadow:0 18px 40px -12px var(--glow); }
.totop:active{ transform:translateY(-1px); }
.totop svg{ width:22px; height:22px; fill:currentColor; }
@media (prefers-reduced-motion:reduce){ .totop{ transition:opacity .2s; } }

/* =========================================================
   v15 — experience section (pitch + clips) + fixes
   ========================================================= */
.exp__row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,5vw,54px); align-items:center; margin-bottom:clamp(42px,6vw,72px); }
.exp__row--rev .exp__media{ order:2; }
.exp__media{ display:flex; justify-content:center; }
.exp__media video{ width:100%; max-width:330px; border-radius:20px; border:1px solid var(--line); box-shadow:0 36px 80px -44px rgba(0,0,0,.95); display:block; background:#000; }
.exp__txt h3{ font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:1px; font-size:clamp(1.4rem,3vw,1.9rem); color:#fff; margin:0 0 14px; line-height:1.1; }
.exp__txt p{ color:var(--text); line-height:1.72; margin:0 0 14px; font-size:1rem; } .exp__txt p:last-child{ margin-bottom:0; } .exp__txt b{ color:#fff; }

.exp__band{ max-width:760px; margin:0 auto clamp(34px,5vw,54px); text-align:center; padding:30px clamp(20px,4vw,34px); border:1px solid var(--line); border-radius:18px; background:linear-gradient(180deg, rgba(225,6,0,.07), rgba(255,255,255,.012)); }
.exp__band h3,.exp__awaits h3,.exp__gift h3{ font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:1px; color:#fff; font-size:clamp(1.3rem,2.6vw,1.7rem); margin:0 0 14px; }
.exp__band p{ color:var(--text); line-height:1.7; margin:0 0 12px; }
.exp__pace{ color:#fff !important; font-weight:600; margin:6px 0 0 !important; } .exp__pace span{ color:var(--blood-bright); margin-right:4px; }

.exp__awaits{ max-width:900px; margin:0 auto clamp(34px,5vw,54px); text-align:center; }
.exp__list{ list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:20px 0 0; text-align:left; }
.exp__list li{ position:relative; padding:14px 16px 14px 44px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.02); color:#d2d2d9; font-size:.92rem; }
.exp__list li::before{ content:"✓"; position:absolute; left:17px; top:13px; color:#34d27e; font-weight:800; }
@media(max-width:620px){ .exp__list{ grid-template-columns:1fr; } }

.exp__gift{ max-width:680px; margin:0 auto; text-align:center; }
.exp__gift p{ color:var(--text); line-height:1.7; }
.exp__age{ color:var(--muted) !important; font-size:.82rem; margin-top:16px !important; }

@media(max-width:820px){
  .exp__row{ grid-template-columns:1fr; gap:20px; text-align:center; margin-bottom:48px; }
  .exp__row--rev .exp__media{ order:0; }
  .exp__media video{ max-width:300px; }
}

/* fix: reviews — space the verified line from the quote above */
.rv__card p{ margin-bottom:16px; }
.rv__card .by{ padding-top:15px; border-top:1px solid var(--line-2); }

/* fix: final CTA uses the character (not the poster) */
.fcta::before{ background-image:linear-gradient(180deg, rgba(9,9,11,.8), rgba(9,9,11,.92)), url('../img/abandoned-church-ritual-hero-m.jpg')  /* 760 px is enough: drowned under an 80-92% opacity veil, the 1280 px version (180 KB) was invisible */; background-position:center 18%; }

/* fix: footer logos centered + bigger on mobile */
@media(max-width:760px){
  .foot__brand{ text-align:center; }
  .foot__logos{ justify-content:center; gap:18px; flex-wrap:nowrap; }
  .foot__social{ justify-content:center; }
}

/* =========================================================
   v16 — original scroll reveals + richer experience layout
   ========================================================= */
/* reveal variants */
.reveal--blur{ opacity:0; transform:scale(1.05); transition:opacity 1.05s var(--easeSoft), transform 1.05s var(--easeSoft); }
.reveal--blur.in{ opacity:1; transform:none; filter:none; }
.reveal--zoom{ opacity:0; transform:scale(.94); transition:opacity 1s var(--easeSoft), transform 1s var(--easeSoft); }
.reveal--zoom.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal--blur,.reveal--zoom{ opacity:1 !important; transform:none !important; filter:none !important; } }

/* experience rows — editorial layout */
.exp__row{ margin-bottom:clamp(50px,7vw,88px); align-items:center; }
.exp__media{ position:relative; }
.exp__media::before{ content:""; position:absolute; left:50%; top:46%; width:80%; height:80%; transform:translate(-50%,-50%); z-index:0;
  background:radial-gradient(circle, rgba(225,6,0,.42), transparent 68%); filter:blur(36px); pointer-events:none; }
.exp__media video{ position:relative; z-index:1; box-shadow:0 46px 92px -42px rgba(0,0,0,.95), 0 0 0 1px var(--line); }
.exp__kick{ position:absolute; z-index:2; top:14px; left:50%; transform:translateX(-50%); white-space:nowrap;
  font-size:.62rem; letter-spacing:1.6px; text-transform:uppercase; font-weight:700; color:#fff;
  background:rgba(12,12,14,0.86); border:1px solid var(--line); border-radius:999px; padding:6px 14px; }
.exp__num{ display:block; font-family:var(--display); font-size:clamp(2.6rem,5.5vw,3.6rem); line-height:1; margin-bottom:6px;
  color:transparent; -webkit-text-stroke:1.6px rgba(225,6,0,.6); text-stroke:1.6px rgba(225,6,0,.6); }
.exp__txt h3{ margin-top:0; }

/* final CTA uses the app sign-up character (devil) */
.fcta::before{ background-image:linear-gradient(180deg, rgba(9,9,11,.74), rgba(9,9,11,.9)), url('../img/occult-skulls-pentagram.png'); background-position:center 12%; }

/* =========================================================
   v17 — "What awaits you" icon cards + richer stagger
   ========================================================= */
.awaits{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px; }
.awaits__c{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; text-align:left; padding:24px 22px; border:1px solid var(--line); border-radius:15px;
  background:linear-gradient(160deg, rgba(225,6,0,.06), rgba(20,20,26,.45)); transition:transform .35s var(--ease), border-color .35s, box-shadow .35s; }
.awaits__c:hover{ transform:translateY(-7px); border-color:rgba(225,6,0,.42); box-shadow:0 28px 60px -38px var(--glow); }
.awaits__i{ font-size:1.5rem; width:50px; height:50px; flex:0 0 auto; display:grid; place-items:center; border-radius:13px; background:rgba(255,255,255,.04); border:1px solid var(--line-2); }
.awaits__c p{ color:#d2d2d9; font-size:.95rem; line-height:1.55; margin:0; } .awaits__c b{ color:#fff; }
@media(max-width:760px){ .awaits{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .awaits{ grid-template-columns:1fr; } }

/* richer stagger: rise + subtle scale, extended to 8 children (delays aligned
   with the 90 ms cascade defined above) */
.stg.in > *:nth-child(6){ transition-delay:0.45s } .stg.in > *:nth-child(7){ transition-delay:0.54s } .stg.in > *:nth-child(8){ transition-delay:0.63s }

/* =========================================================
   v18 — gift card redesign + parallax CTA character
   ========================================================= */
/* gift block as a designed card */
.giftcard{ max-width:780px; margin:0 auto; display:flex; gap:24px; align-items:center; padding:28px clamp(22px,4vw,36px);
  border:1px solid rgba(225,6,0,.32); border-radius:20px;
  background:radial-gradient(120% 150% at 0% 0%, rgba(225,6,0,.13), transparent 58%), linear-gradient(180deg, var(--card-2), var(--card));
  box-shadow:0 34px 80px -52px rgba(0,0,0,.92); }
.giftcard__icon{ flex:0 0 auto; width:74px; height:74px; display:grid; place-items:center; font-size:2.2rem; border-radius:18px; background:rgba(255,255,255,.04); border:1px solid var(--line); box-shadow:0 0 0 6px rgba(225,6,0,.05); }
.giftcard__body h3{ font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:1px; color:#fff; font-size:clamp(1.3rem,2.6vw,1.7rem); margin:0 0 10px; }
.giftcard__body p{ color:var(--text); line-height:1.62; margin:0 0 14px; } .giftcard__body b{ color:#fff; }
.giftcard__chips{ display:flex; flex-wrap:wrap; gap:8px; }
.giftcard__chips span{ font-size:.76rem; color:#d8d8df; background:rgba(255,255,255,.04); border:1px solid var(--line-2); border-radius:999px; padding:6px 12px; }
@media(max-width:600px){ .giftcard{ flex-direction:column; text-align:center; gap:18px; } .giftcard__chips{ justify-content:center; } }

/* final CTA — smaller full-body character + parallax */
.fcta{ --py:0px; }
.fcta::before{ top:-14%; bottom:-14%; left:0; right:0; height:auto;
  background-image:linear-gradient(180deg, rgba(9,9,11,.62), rgba(9,9,11,.9)), url('assets/img/occult-skulls-pentagram.png');
  background-size:cover, auto 82%; background-position:center, center 42%; background-repeat:no-repeat, no-repeat;
  transform:translateY(var(--py)); will-change:transform; }
@media(max-width:700px){ .fcta::before{ background-size:cover, auto 62%; } }

/* =========================================================
   v19 — experience clean rebuild (clips row + cards) + visible CTA char
   ========================================================= */
.xp__clips{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:880px; margin:0 auto clamp(44px,6vw,68px); }
.xp__clip{ position:relative; margin:0; border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow:0 34px 76px -46px rgba(0,0,0,.92); }
.xp__clip video{ width:100%; display:block; aspect-ratio:3/4; object-fit:cover; background:#000; }
.xp__clip figcaption{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:32px 14px 13px; font-size:.82rem; font-weight:600; color:#fff; background:linear-gradient(transparent, rgba(8,8,11,.92)); }
@media(max-width:680px){ .xp__clips{ grid-template-columns:1fr; max-width:330px; } }

.xp__cards{ display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:980px; margin:0 auto clamp(40px,6vw,60px); }
.xp__card{ padding:26px clamp(20px,3vw,28px); border:1px solid var(--line); border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.008)); }
.xp__card h3{ font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:1px; color:#fff; font-size:1.25rem; margin:0 0 12px; }
.xp__card p{ color:var(--text); line-height:1.65; margin:0; } .xp__card b{ color:#fff; }
@media(max-width:760px){ .xp__cards{ grid-template-columns:1fr; } }

.xp__awaits{ max-width:980px; margin:0 auto clamp(38px,5vw,54px); text-align:center; }
.xp__awaits > h3{ font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:1px; color:#fff; font-size:clamp(1.3rem,2.6vw,1.7rem); margin:0; }

/* CTA character — visible, full body from top, lighter overlay */
.fcta::before{ background-image:linear-gradient(180deg, rgba(9,9,11,.40), rgba(9,9,11,.80)), url('assets/img/occult-skulls-pentagram.png'); background-size:cover, auto 96%; background-position:center, center top; }
@media(max-width:700px){ .fcta::before{ background-size:cover, auto 72%; } }

/* reviews — more air around the verified badge */
.rv__card p{ margin-bottom:20px; }
.rv__card .by{ padding-top:18px; }
.rv__card cite{ margin-bottom:6px; }
.rv__card small{ margin-top:2px; }

/* =========================================================
   v20 — CTA character as a real, clearly-visible image + parallax
   ========================================================= */
.fcta::before{ background-image:none !important; background:linear-gradient(180deg, rgba(9,9,11,.30), rgba(9,9,11,.74)); z-index:1; transform:none; inset:0; }
.fcta__char{ position:absolute; inset:0; z-index:0; display:flex; align-items:center; justify-content:center; pointer-events:none; transform:translateY(var(--py,0px)); will-change:transform; }
.fcta__char img{ height:114%; width:auto; max-width:none; object-fit:contain; opacity:.92; filter:contrast(1.04) saturate(1.02);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 15%, #000 70%, transparent 99%); mask-image:linear-gradient(180deg, transparent 0%, #000 15%, #000 70%, transparent 99%); }
.fcta::after{ z-index:1; }
.fcta .wrap{ position:relative; z-index:2; }
@media(max-width:700px){ .fcta__char img{ height:78%; } }

/* =========================================================
   v21 — experience rebuilt: screens + investigation dossier (no emoji)
   ========================================================= */
.xp__screens{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:880px; margin:0 auto; }
.xp__screen{ position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow:0 34px 78px -46px rgba(0,0,0,.92); }
.xp__screen::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:2; background:linear-gradient(90deg, transparent, var(--blood), transparent); }
.xp__screen video{ width:100%; display:block; aspect-ratio:3/4; object-fit:cover; background:#000; }
@media(max-width:680px){ .xp__screens{ grid-template-columns:1fr; max-width:320px; } }

/* investigation dossier — vertical timeline */
.dossier{ max-width:760px; margin:clamp(44px,6vw,68px) auto 0; position:relative; }
.dossier::before{ content:""; position:absolute; left:28px; top:34px; bottom:34px; width:2px; z-index:0;
  background:linear-gradient(180deg, transparent, rgba(225,6,0,.5) 6%, rgba(225,6,0,.5) 94%, transparent); }
.dossier__row{ position:relative; display:grid; grid-template-columns:58px 1fr; gap:24px; padding-bottom:clamp(34px,5vw,50px); }
.dossier__row:last-child{ padding-bottom:0; }
.dossier__node{ position:relative; z-index:1; width:58px; height:58px; border-radius:50%; display:grid; place-items:center; color:var(--blood-bright);
  background:radial-gradient(circle at 50% 32%, #1d1d24, #121217); border:1px solid rgba(225,6,0,.5); box-shadow:0 0 0 6px rgba(225,6,0,.05), 0 18px 34px -18px var(--glow); }
.dossier__node svg{ width:26px; height:26px; }
.dossier__tag{ display:inline-block; font:600 .64rem/1 'Courier New',monospace; letter-spacing:1.6px; text-transform:uppercase; color:var(--blood-bright); margin-bottom:9px; }
.dossier__c h3{ font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:1px; color:#fff; font-size:clamp(1.3rem,2.6vw,1.7rem); margin:0 0 10px; line-height:1.08; }
.dossier__c p{ color:var(--text); line-height:1.7; margin:0; } .dossier__c b{ color:#fff; }
@media(max-width:560px){ .dossier__row{ grid-template-columns:46px 1fr; gap:16px; } .dossier__node{ width:46px; height:46px; } .dossier__node svg{ width:22px; height:22px; } .dossier::before{ left:22px; } }

/* what-awaits + gift section + SVG icons (replacing emoji) */
.awaits__i svg{ width:24px; height:24px; }
.giftcard__icon svg{ width:34px; height:34px; }

/* ===== v22 — add-to-cart icon + floating order bar ===== */
/* keep the cart icon from sliding on hover (the global .btn:hover svg shifts arrows) */
.btn .ico-cart{ transition:transform .25s var(--ease); }
.btn:hover .ico-cart{ transform:none; }
#addCart:hover .ico-cart{ transform:scale(1.08); }

.orderbar{ position:fixed; left:0; right:0; bottom:0; z-index:850;
  /* near-opaque background: the bar must read as a surface laid on the page.
     No backdrop-filter, it is the worst enemy of scrolling on mobile. */
  background:linear-gradient(180deg, rgba(20,11,12,.96) 0%, rgba(8,6,7,.995) 65%);
  border-top:1px solid var(--line-2);
  box-shadow:0 -1px 0 rgba(255,255,255,.04), 0 -24px 50px -26px rgba(0,0,0,.95);
  transform:translateY(110%); opacity:0; visibility:hidden;
  transition:transform .42s var(--ease), opacity .3s ease, visibility .42s; }
/* the red rule on the top edge: the brand signature */
.orderbar::before{ content:""; position:absolute; top:-1px; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(225,6,0,.55) 30%, rgba(255,58,48,.75) 50%, rgba(225,6,0,.55) 70%, transparent); }
.orderbar.is-on{ transform:translateY(0); opacity:1; visibility:visible; }
.orderbar__in{ max-width:1160px; margin:0 auto; display:flex; align-items:center; gap:18px;
  padding:12px clamp(16px,4vw,40px); padding-bottom:max(12px, env(safe-area-inset-bottom)); }

/* The poster stays inside the bar: it overlapped the page text on scroll
   and that read as a bug. The red edge is enough to give it presence. */
.orderbar__thumb{ flex:0 0 auto; width:44px; height:58px; object-fit:cover;
  border-radius:8px; border:1px solid rgba(225,6,0,.42); background:#000;
  box-shadow:0 0 0 1px rgba(0,0,0,.9), 0 0 16px -6px rgba(225,6,0,.4), 0 8px 18px -10px #000; }

.orderbar__info{ display:flex; flex-direction:column; min-width:0; }
.orderbar__title{ font-weight:700; color:#fff; font-size:1rem; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.orderbar__meta{ color:var(--muted); font-size:.82rem; }

.orderbar__price{ margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:4px; line-height:1; }
.orderbar__price b{ font-family:var(--display); font-size:1.7rem; line-height:1; color:#fff; letter-spacing:.5px; font-weight:400; }
/* the rating only shows when the title and its subtitle are hidden, otherwise it is too much */
.orderbar__proof{ display:none; align-items:center; gap:4px; font-size:.58rem; letter-spacing:.3px;
  color:var(--muted); white-space:nowrap; }
.orderbar__proof i{ color:var(--gold); font-style:normal; font-size:.7rem; }

/* The button takes back the brand red. The generic shop green had
   nothing to do with the art direction, and this bar is what the visitor sees the longest. */
.orderbar .btn--buy{ flex:0 0 auto; padding-inline:22px; }
/* The bar rules targeted .btn--buy: the day the button switched to
   .btn--primary it lost its margin-left:auto and no longer hugged the right.
   We now target any button in the bar. */
/* Two margin-left:auto (on the price AND on the button) split the bar in
   two and left a big gap between the amount and the button. Only the price
   now pushes to the right, the button sits right after it. */
.orderbar .btn{ flex:0 0 auto; }

@media(max-width:560px){
  /* The title was truncated to "The Sinister Pr...": on the case page it
     says nothing more than the poster. We remove it, the rating takes its place. */
  .orderbar__info{ display:none; }
  .orderbar__proof{ display:flex; }
  .orderbar__in{ gap:14px; padding:10px 16px; padding-bottom:max(10px, env(safe-area-inset-bottom)); }
  .orderbar__thumb{ width:40px; height:54px; }
  .orderbar__price{ margin-left:0; align-items:flex-start; }
  .orderbar__price b{ font-size:1.55rem; }
  .orderbar .btn{ margin-left:auto; padding:13px 19px; font-size:.78rem; letter-spacing:1.1px; }
}
@media(max-width:340px){
  /* at 320px the button touched the edge: we reclaim 16px here and there */
  .orderbar__thumb{ width:36px; height:48px; }
  .orderbar__in{ gap:9px; }
  .orderbar__price b{ font-size:1.3rem; }
  .orderbar__proof{ font-size:.52rem; }
  .orderbar .btn{ padding-inline:12px; font-size:.7rem; letter-spacing:.6px; }
}

/* =========================================================
   v23 — below-hero redesign (cinematic scenes + case files +
   premium "what awaits" + full-width gift banner) + CTA char
   ========================================================= */

/* --- cinematic scene cluster (was 3 flat identical screens) --- */
.scenes{ display:flex; justify-content:center; align-items:flex-start; gap:clamp(14px,2vw,26px);
  max-width:900px; margin:clamp(16px,3vw,34px) auto 0; }
.scene{ position:relative; flex:1 1 0; max-width:282px; border-radius:20px; overflow:hidden; isolation:isolate;
  border:1px solid var(--line); background:#0a0a0c; box-shadow:0 38px 84px -46px rgba(0,0,0,.96);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.scene::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:3; opacity:0; transition:opacity .4s;
  background:linear-gradient(90deg, transparent, var(--blood), transparent); }
.scene::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); background:linear-gradient(180deg, transparent 60%, rgba(0,0,0,.35)); }
.scene video, .scene img{ width:100%; display:block; aspect-ratio:3/4; object-fit:cover; background:#0a0a0c; }
.scene--main{ z-index:3; transform:translateY(-16px) scale(1.06);
  box-shadow:0 48px 104px -40px rgba(225,6,0,.42), 0 38px 84px -46px rgba(0,0,0,.96); }
.scene--main::before{ opacity:1; }
.scene--l{ z-index:1; transform:rotate(-3.5deg) translateY(14px); }
.scene--r{ z-index:1; transform:rotate(3.5deg) translateY(14px); }
@media(hover:hover){ .scene:hover{ transform:translateY(-18px) scale(1.05) rotate(0deg); } }
/* mobile: swipeable horizontal carousel of the video scenes */
@media(max-width:680px){
  .scenes{ display:flex; flex-direction:row; flex-wrap:nowrap; align-items:stretch; justify-content:flex-start;
    gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    padding:6px 16px 16px; scrollbar-width:none; }
  .scenes::-webkit-scrollbar{ display:none; }
  .scene, .scene--l, .scene--r, .scene--main{ flex:0 0 76%; width:76%; max-width:76%;
    transform:none !important; opacity:1 !important; scroll-snap-align:center; }
  .scene--main{ box-shadow:0 30px 70px -40px rgba(225,6,0,.4), 0 26px 60px -44px rgba(0,0,0,.95); }
  .scene--main::before{ opacity:1; }
}

/* --- case files grid (was sparse vertical "dossier" timeline) --- */
.cases{ display:grid; grid-template-columns:repeat(2,1fr); align-items:stretch; gap:clamp(14px,1.6vw,20px);
  max-width:820px; margin:clamp(42px,6vw,68px) auto 0; }
.case{ position:relative; overflow:hidden; padding:clamp(24px,3vw,34px); border-radius:16px; border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(27,27,34,.92), rgba(17,17,21,.92));
  transition:transform .4s var(--ease), border-color .4s; }
.case::before{ content:""; position:absolute; left:0; top:0; width:60%; height:2px; background:linear-gradient(90deg, var(--blood), transparent); }
.case__no{ position:absolute; top:2px; right:16px; font-family:var(--display); font-size:5.2rem; line-height:1;
  color:rgba(255,255,255,.045); pointer-events:none; user-select:none; }
.case__tag{ display:inline-block; font:600 .64rem/1 'Courier New',monospace; letter-spacing:1.8px; text-transform:uppercase;
  color:var(--blood-bright); margin-bottom:12px; }
.case h3{ font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:.6px; color:#fff;
  font-size:clamp(1.25rem,2.4vw,1.6rem); margin:0 0 10px; line-height:1.1; }
.case p{ color:var(--text); line-height:1.7; margin:0; font-size:.96rem; } .case b{ color:#fff; }
@media(hover:hover){ .case:hover{ transform:translateY(-4px); border-color:rgba(225,6,0,.4); } }
@media(max-width:620px){ .cases{ grid-template-columns:1fr; } }

/* --- "what awaits you" — denser premium grid with red icon chips --- */
.aws{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:980px; margin:0 auto; }
.aw{ display:flex; align-items:center; gap:15px; padding:18px 20px; border-radius:14px; border:1px solid var(--line-2);
  background:rgba(22,22,28,.55); transition:border-color .35s, background .35s, transform .35s var(--ease); }
.aw__i{ flex:0 0 auto; width:46px; height:46px; border-radius:12px; display:grid; place-items:center; color:var(--blood-bright);
  background:radial-gradient(circle at 50% 35%, rgba(225,6,0,.2), rgba(225,6,0,.05)); border:1px solid rgba(225,6,0,.32); }
.aw__i svg{ width:22px; height:22px; }
.aw p{ margin:0; color:var(--text); font-size:.95rem; line-height:1.45; } .aw b{ color:#fff; }
@media(hover:hover){ .aw:hover{ transform:translateY(-3px); border-color:rgba(225,6,0,.38); background:rgba(225,6,0,.06); } }
@media(max-width:860px){ .aws{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .aws{ grid-template-columns:1fr; } }

/* --- gift banner — full width, aligned, premium --- */
.giftcard{ display:flex; align-items:center; gap:clamp(20px,3vw,34px); max-width:980px;
  margin:clamp(30px,4vw,46px) auto 0; padding:clamp(24px,3vw,34px) clamp(24px,4vw,40px);
  border-radius:18px; position:relative; overflow:hidden; border:1px solid rgba(225,6,0,.3);
  background:linear-gradient(120deg, rgba(225,6,0,.12), rgba(20,20,26,.9) 46%); box-shadow:none; }
.giftcard::after{ content:""; position:absolute; right:-40px; top:-40px; width:200px; height:200px;
  background:radial-gradient(circle, rgba(225,6,0,.18), transparent 70%); pointer-events:none; }
.giftcard__icon{ flex:0 0 auto; width:64px; height:64px; border-radius:16px; display:grid; place-items:center; color:#fff;
  background:radial-gradient(circle at 50% 30%, var(--blood-bright), var(--blood)); border:0; box-shadow:0 16px 34px -14px var(--glow); }
.giftcard__icon svg{ width:32px; height:32px; }
.giftcard__body{ position:relative; z-index:1; }
.giftcard__body h3{ font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:.6px; color:#fff;
  font-size:clamp(1.3rem,2.6vw,1.7rem); margin:0 0 8px; }
.giftcard__body p{ color:var(--text); line-height:1.6; margin:0 0 14px; max-width:62ch; }
.giftcard__chips{ display:flex; flex-wrap:wrap; gap:8px; }
.giftcard__chips span{ font-size:.78rem; color:#fff; padding:6px 12px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.05); }
@media(max-width:620px){ .giftcard{ flex-direction:column; text-align:center; align-items:center; } .giftcard__chips{ justify-content:center; } }

/* --- final CTA character: visible but slightly transparent so it blends in --- */
.fcta::before{ background:linear-gradient(180deg, rgba(9,9,11,.2), rgba(9,9,11,.55) 55%, rgba(9,9,11,.72)) !important; }
.fcta__char img{ opacity:.5 !important; filter:contrast(1.05) saturate(1.04) brightness(1.04) !important;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 8%, #000 46%, rgba(0,0,0,.35) 74%, transparent 94%) !important;
  mask-image:linear-gradient(180deg, transparent 0%, #000 8%, #000 46%, rgba(0,0,0,.35) 74%, transparent 94%) !important; }

/* =========================================================
   v24 — reviews: social proof logos (we have reviews on socials too)
   ========================================================= */
.rvx__social{ grid-column:1 / -1; margin-top:2px; padding-top:20px; border-top:1px solid var(--line-2); text-align:center; }
.rvx__social-lab{ }
.rvx__social-lab{ display:block; font-size:.78rem; letter-spacing:.4px; color:var(--muted); margin-bottom:12px; }
.rvx__social-logos{ display:flex; align-items:center; justify-content:center; gap:12px; }
.rvx__social-logos a{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  color:var(--text); border:1px solid var(--line); background:rgba(255,255,255,.03);
  transition:color .3s, border-color .3s, background .3s, transform .3s var(--ease); }
.rvx__social-logos svg{ width:20px; height:20px; }
.rvx__social-logos a:hover{ color:#fff; border-color:rgba(225,6,0,.5); background:rgba(225,6,0,.12); transform:translateY(-3px); }

/* =========================================================
   v25 — product funnel header (no exits back to landing)
   ========================================================= */
.top--funnel .top__inner{ display:flex; align-items:center; justify-content:space-between; }
.top--funnel .top__cta{ text-decoration:none; }
@media(max-width:560px){
  .top--funnel .top__cta{ padding:9px 15px; font-size:.72rem; letter-spacing:.8px; }
  .top--funnel .top__cta-px{ display:none; }
}

/* =========================================================
   v26 — investigations catalogue page (cases.html)
   dedicated .icase* names (avoid collision with v23 .case)
   ========================================================= */
.invsec .head{ margin-bottom:8px; }
.invsec .head h2{ font-size:clamp(2.7rem,5vw,3.4rem); }
.icases{ display:grid; align-items:stretch; grid-template-columns:1fr 1fr; gap:26px; max-width:820px; margin:clamp(24px,4vw,44px) auto 0; }
.icase{ position:relative; display:flex; flex-direction:column; border-radius:18px; overflow:hidden; border:1px solid var(--line);
  background:var(--card); text-decoration:none; transition:transform .5s var(--ease), border-color .4s, box-shadow .5s; }
.icase:hover{ transform:translateY(-8px); }
.icase--sin{ border-color:rgba(225,6,0,.32); box-shadow:0 0 0 1px rgba(225,6,0,.1), 0 26px 64px -42px rgba(225,6,0,.55); }
.icase--sin:hover{ border-color:rgba(225,6,0,.5); box-shadow:0 40px 90px -42px rgba(225,6,0,.5); }
.icase--cipher:hover{ border-color:rgba(255,176,46,.45); box-shadow:0 40px 90px -42px rgba(255,176,46,.4); }
.icase__media{ aspect-ratio:4/5; background-size:cover; background-position:center; transition:transform .6s var(--ease); position:relative; }
.icase:hover .icase__media{ transform:scale(1.04); }
.icase__media--lock{ display:flex; align-items:center; justify-content:center; background:radial-gradient(120% 90% at 50% 18%, #2a0c0c, #0c0c0e 72%); }
.icase__q{ position:absolute; font-family:var(--display); font-size:9rem; color:rgba(255,255,255,.045); }
.icase__lk{ position:relative; z-index:1; width:54px; height:54px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; color:var(--gold); background:rgba(0,0,0,.3); }
.icase__lk svg{ width:24px; height:24px; fill:currentColor; }
.icase__badge{ position:absolute; top:14px; left:14px; z-index:3; display:inline-flex; align-items:center; gap:7px; background:rgba(12,12,14,0.76); border:1px solid var(--line); border-radius:999px; padding:7px 12px; font-size:.6rem; letter-spacing:1.5px; text-transform:uppercase; font-weight:700; color:#fff; }
.icase__badge i{ width:7px; height:7px; border-radius:50%; background:var(--blood); box-shadow:0 0 8px var(--blood); }
.icase__badge--soon i{ background:var(--gold); box-shadow:0 0 8px var(--gold); }
.icase__body{ padding:28px 24px 26px; flex:1; display:flex; flex-direction:column; }
.icase__body p{ margin:0 0 20px; }
.icase__body h3{ font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:.5px; color:#fff; font-size:1.5rem; margin:0 0 8px; }
.icase__body p{ color:var(--text); line-height:1.6; margin:0 0 20px; font-size:.95rem; }   /* keeps 20px between the text and the button (this rule overrode the margin of the one above) */
.icase__rating-stars{ color:var(--gold); font-size:.72rem; letter-spacing:1px; }
/* same finish as the product page badges: thin red edge on
   top, dark glass, centered value. The price reads at a glance without
   weighing down the card. */
.icase__tag{ position:absolute; top:14px; right:14px; z-index:2; padding:12px 15px 11px; border-radius:18px;
  text-align:center; line-height:1;
  /* same card as the hero social proof on phones: gradient border
     (white top left, red bottom right) laid in border-box over a
     transparent border, dark glass fill in padding-box */
  border:1px solid transparent;
  background:
    linear-gradient(160deg, rgba(26,25,28,.86), rgba(14,13,16,.72)) padding-box,
    linear-gradient(160deg, rgba(255,255,255,.34), rgba(255,255,255,.07) 42%, rgba(225,6,0,.45)) border-box;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 18px 36px -24px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.07); }
.icase__tag b{ display:block; font-size:1.1rem; font-weight:800; color:#fff; letter-spacing:.2px; }
.icase__tag em{ display:block; font-style:normal; font-size:.52rem; font-weight:600; letter-spacing:1.4px; text-transform:uppercase;
  color:rgba(255,255,255,.55); margin-top:7px; }
.icase__meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:14px 0 20px; }
.icase__meta span{ display:inline-flex; align-items:center; gap:6px; font-size:.68rem; letter-spacing:.5px; text-transform:uppercase; color:#bcbcc5; background:rgba(255,255,255,.05); border:1px solid var(--line-2); border-radius:8px; padding:7px 10px; height:26px; box-sizing:border-box; }
.icase__meta b{ color:#fff; }
.icase__cta{ display:inline-flex; align-items:center; justify-content:center; gap:9px; margin-top:auto; padding:14px 26px; border-radius:999px; background:var(--blood); color:#fff; font-weight:700; font-size:.82rem; letter-spacing:1px; text-transform:uppercase; transition:background .25s; }
.icase--sin:hover .icase__cta{ background:var(--blood-bright); }
.icase__cta svg{ width:14px; height:14px; fill:currentColor; transition:transform .25s; } .icase:hover .icase__cta svg{ transform:translateX(4px); }
.icase__cta--soon{ background:transparent; border:1px solid rgba(255,176,46,.5); color:var(--gold); }
.icases__hint{ display:none; }
@media (max-width:760px){
  .icases{ display:flex; align-items:flex-start; grid-template-columns:unset; overflow-x:auto; scroll-snap-type:x mandatory; gap:16px;
    padding-bottom:2px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .icases::-webkit-scrollbar{ display:none; }
  .icases .icase{ flex:0 0 86%; scroll-snap-align:start; will-change:transform; transform:translateZ(0); }
  /* compact text/badges/button (but keep the poster's original proportions — cropping it looked worse) */
  .icases .icase__body{ padding:22px 18px 18px; }
  .icases .icase__body h3{ font-size:1.2rem; margin:0 0 4px; }
  .icases .icase__body p{ font-size:.84rem; line-height:1.45; }
  .icases .icase__meta{ margin:10px 0 14px; }
  .icases .icase__meta span{ height:26px; font-size:.62rem; padding:0 8px; }
  .icases .icase__cta{ padding:12px 22px; font-size:.76rem; }
  /* swipe hint: tiny caps + red arrow, no emoji or badge.
     The bottom margin clearly lifts the hint away from the posters. */
  .icases__hint{ display:flex; align-items:center; justify-content:center; gap:11px; width:fit-content;
    /* this page's .head only leaves 8px under its paragraph (50px on the landing):
       the top margin is explicit here to get the same breathing room as the landing */
    margin:24px auto 28px; color:rgba(255,255,255,.5); font-size:.6rem; font-weight:700;
    letter-spacing:2.4px; text-transform:uppercase; }
  .icases__hint svg{ width:22px; height:22px; flex:0 0 auto; fill:none; stroke:var(--blood); stroke-width:2.2;
    stroke-linecap:round; stroke-linejoin:round; animation:icaseSwipeArrow 1.9s ease-in-out infinite; }
  @keyframes icaseSwipeArrow{ 0%,100%{ transform:translateX(0); opacity:.62; } 50%{ transform:translateX(6px); opacity:1; } }
  @media (prefers-reduced-motion:reduce){ .icases__hint svg{ animation:none; opacity:1; } }
}

/* trust / reassurance strip — unified seamless panel */
.trust{ display:grid; grid-template-columns:repeat(4,1fr); max-width:1000px; margin:clamp(40px,6vw,64px) auto 0;
  border:1px solid var(--line); border-radius:20px; overflow:hidden;
  background:linear-gradient(180deg, rgba(27,27,34,.6), rgba(14,14,18,.6)); }
.trust__i{ display:flex; align-items:center; gap:14px; padding:24px 22px; border-left:1px solid var(--line-2);
  transition:background .35s ease; }
.trust__i:first-child{ border-left:0; }
.trust__i:hover{ background:rgba(34,199,104,.06); }
.trust__ic{ flex:0 0 auto; width:44px; height:44px; border-radius:13px; display:grid; place-items:center; color:#2fd07e;
  background:radial-gradient(circle at 50% 32%, rgba(34,199,104,.22), rgba(34,199,104,.05)); border:1px solid rgba(34,199,104,.35); }
.trust__ic svg{ width:21px; height:21px; }
.trust__t b{ display:block; color:#fff; font-size:.9rem; line-height:1.2; margin-bottom:3px; letter-spacing:.2px; }
.trust__t span{ display:block; color:var(--muted); font-size:.76rem; line-height:1.35; }
@media(max-width:760px){
  .trust{ grid-template-columns:repeat(2,1fr); }
  .trust__i:nth-child(odd){ border-left:0; }
  .trust__i:nth-child(n+3){ border-top:1px solid var(--line-2); }
}
@media(max-width:430px){
  .trust{ grid-template-columns:1fr; }
  .trust__i{ border-left:0; }
  .trust__i + .trust__i{ border-top:1px solid var(--line-2); }
}

/* =========================================================
   v27 — sticky footer: keep .foot at the bottom on short pages (e.g. empty cart)
   ========================================================= */
html{ min-height:100%; }
body{ min-height:100vh; display:flex; flex-direction:column; }
body > .foot{ margin-top:auto; }

/* v28 — lift the back-to-top button above the floating order bar (no overlap) */
.orderbar.is-on ~ .totop{ bottom:calc(clamp(16px,3vw,28px) + 64px); }
@media(max-width:560px){ .orderbar.is-on ~ .totop{ bottom:calc(clamp(16px,3vw,28px) + 72px); } }

/* v29 — section TEXTURE LIBRARY (product page) — distinct ambiances, not red/black every time */
section.tx-grid, section.tx-vhs, section.tx-grain, section.tx-fog, section.tx-amber{
  border-top:1px solid var(--line); box-shadow:inset 0 14px 30px -22px rgba(0,0,0,.9);
}
/* 1) Blueprint / investigation grid — cold, slow diagonal drift */
section.tx-grid{ background:
  linear-gradient(rgba(120,150,200,.05) 1px, transparent 1px) 0 0/34px 34px,
  linear-gradient(90deg, rgba(120,150,200,.05) 1px, transparent 1px) 0 0/34px 34px,
  linear-gradient(180deg,#0d0f13,#0a0b0e);
  animation:mxGridPan 48s linear infinite; }
@keyframes mxGridPan{ from{ background-position:0 0,0 0,0 0; } to{ background-position:34px 34px,34px 34px,0 0; } }
section.tx-grid, section.tx-vhs, section.tx-grain, section.tx-fog, section.tx-amber{ position:relative; overflow:hidden; }

/* community section */
.cmty__card{ max-width:760px; margin:34px auto 0; text-align:center; padding:clamp(28px,4vw,40px) clamp(22px,4vw,34px); border:1px solid rgba(24,119,242,.32); border-radius:18px; position:relative; z-index:1;
  background:radial-gradient(120% 90% at 50% -10%, rgba(24,119,242,.16), transparent 60%), linear-gradient(180deg, rgba(27,27,34,.78), rgba(16,16,21,.78));
  box-shadow:0 40px 80px -44px rgba(24,119,242,.55), 0 0 0 1px rgba(24,119,242,.05) inset; }
.cmty__fbmark{ position:relative; display:inline-grid; place-items:center; width:72px; height:72px; margin-bottom:18px; border-radius:20px; background:linear-gradient(160deg,#2a8bff,#1877f2); color:#fff;
  box-shadow:0 18px 40px -14px rgba(24,119,242,.85), 0 0 0 6px rgba(24,119,242,.12); animation:none; }
.cmty__fbmark::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 0 0 rgba(24,119,242,.55); animation:none; }
.cmty__fbmark svg{ position:relative; z-index:1; animation:none; }
@keyframes cmtyFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
@keyframes cmtyBob{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.03); } }
@keyframes cmtyPulse{ 0%{ box-shadow:0 0 0 0 rgba(24,119,242,.5); } 70%{ box-shadow:0 0 0 20px rgba(24,119,242,0); } 100%{ box-shadow:0 0 0 0 rgba(24,119,242,0); } }
@media (prefers-reduced-motion:reduce){ .cmty__fbmark, .cmty__fbmark::after, .cmty__fbmark svg{ animation:none; } }
.cmty__h{ font-family:var(--display); font-size:clamp(1.25rem,3.2vw,1.55rem); color:#fff; letter-spacing:.5px; margin:0 0 10px; }
.cmty__members{ display:inline-flex; align-items:center; gap:7px; margin:0 auto 14px; padding:5px 13px; border-radius:999px; border:1px solid rgba(24,119,242,.35); background:rgba(24,119,242,.1); color:#9cc4ff; font-size:.82rem; font-weight:700; letter-spacing:.3px; }
.cmty__members svg{ flex:0 0 auto; }
.cmty__lead{ color:var(--text); font-size:1rem; line-height:1.6; max-width:560px; margin:0 auto 20px; } .cmty__lead b{ color:#fff; }
.cmty__link{ display:inline-flex; align-items:center; gap:10px; margin:0 auto 18px; padding:10px 14px; border:1px dashed var(--line); border-radius:10px; background:rgba(255,255,255,.02); color:var(--muted); font-size:.88rem; max-width:100%; }
.cmty__link > svg{ flex:0 0 auto; opacity:.55; color:#4f9bff; }
.cmty__url{ letter-spacing:1.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmty__tag{ flex:0 0 auto; font-size:.58rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:#4f9bff; border:1px solid rgba(24,119,242,.4); border-radius:5px; padding:2px 7px; }
.cmty__unlock{ color:var(--text); font-size:.92rem; line-height:1.5; max-width:520px; margin:0 auto 22px; }
.cmty__card .btn{ gap:10px; }
@media(max-width:560px){ .cmty__link{ font-size:.78rem; gap:7px; padding:9px 11px; } .cmty__url{ letter-spacing:1px; } }
/* 2) VHS / CRT scanlines — animated drift + faint flicker + chroma edges */
section.tx-vhs{ background:
  radial-gradient(120% 80% at 50% 0%, rgba(70,130,200,.08), transparent 55%),
  linear-gradient(180deg,#0b0d11,#08090c); }
section.tx-vhs::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 3px);
  animation:mxScan 3.3s linear infinite; }
section.tx-vhs::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:linear-gradient(90deg, rgba(255,0,80,.05), transparent 7%, transparent 93%, rgba(0,180,255,.05));
  animation:mxFlick 18s steps(1) infinite; }
@keyframes mxScan{ from{ background-position:0 0; } to{ background-position:0 3px; } }
@keyframes mxFlick{ 0%,94%,100%{ opacity:1; } 96%{ opacity:.5; } 98%{ opacity:.85; } }
section.tx-vhs > .wrap{ position:relative; z-index:1; }
/* 3) Film grain — neutral, animated shimmer */
section.tx-grain{ background:
  radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0/20px 20px,
  linear-gradient(180deg,#101015,#0b0b0e);
  animation:mxGrain 4.8s steps(5) infinite; }
@keyframes mxGrain{ 0%{ background-position:0 0,0 0; } 20%{ background-position:-7px 5px,0 0; } 40%{ background-position:5px -7px,0 0; } 60%{ background-position:-5px -5px,0 0; } 80%{ background-position:7px 6px,0 0; } 100%{ background-position:0 0,0 0; } }
@media (prefers-reduced-motion: reduce){ section.tx-vhs::before, section.tx-vhs::after, section.tx-grain, section.tx-grid, section.tx-amber::before, section.tx-creepy::before, section.tx-creepy::after{ animation:none !important; } }
/* 4) Fog / smoke — atmospheric, hint of red */
section.tx-fog{ background:
  radial-gradient(55% 60% at 18% 0%, rgba(150,160,180,.08), transparent 60%),
  radial-gradient(55% 55% at 92% 35%, rgba(225,6,0,.05), transparent 60%),
  linear-gradient(180deg,#0d0d11,#090909); }
/* 5) Warm amber wash — gold accent that gently breathes */
section.tx-amber{ background:
  radial-gradient(rgba(255,255,255,.02) 1px, transparent 1px) 0 0/22px 22px,
  linear-gradient(180deg,#100e0a,#0a0908); }
section.tx-amber::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(120% 70% at 50% 0%, rgba(255,176,46,.10), transparent 55%);
  animation:none; }
section.tx-amber > .wrap{ position:relative; z-index:1; }
@keyframes mxGlow{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
/* 6) Creepy old VHS — dense scanlines + rolling tracking glitch + chroma + vignette + flicker */
section.tx-creepy{ position:relative; overflow:hidden; border-top:1px solid var(--line);
  box-shadow:inset 0 14px 30px -22px rgba(0,0,0,.95);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(225,6,0,.07), transparent 55%),
    radial-gradient(110% 110% at 50% 50%, transparent 52%, rgba(0,0,0,.55)),
    linear-gradient(180deg,#0a0c0a,#070807); }
section.tx-creepy::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.14) 3px 4px);
  background-size:100% 2px, 100% 4px;
  animation:mxScan2 2.55s steps(2) infinite, mxFlick2 4.5s steps(1) infinite; }
section.tx-creepy::after{ content:""; position:absolute; left:0; right:0; top:-16%; height:13%; pointer-events:none; z-index:0;
  background:linear-gradient(180deg, rgba(0,200,255,.06), rgba(255,255,255,.12) 45%, rgba(255,0,80,.06));
  filter:blur(2px); mix-blend-mode:screen; opacity:.6;
  animation:mxRoll 21s linear infinite; }
section.tx-creepy > .wrap{ position:relative; z-index:1; }
@keyframes mxScan2{ from{ background-position:0 0,0 0; } to{ background-position:0 2px,0 4px; } }
@keyframes mxFlick2{ 0%,90%,100%{ opacity:1; } 92%{ opacity:.55; } 95%{ opacity:.82; } }
@keyframes mxRoll{ 0%{ top:-16%; } 100%{ top:112%; } }

/* post-purchase gift assignment (checkout-success.php + checkout.php's in-page confirmation) */
.giftpost{ max-width:520px; margin:36px auto 0; padding:26px clamp(20px,4vw,32px); border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(180deg,var(--card-2),var(--card)); text-align:left; animation:coRise .5s var(--ease) both; }
.giftpost__h{ color:#fff; font-size:1.15rem; margin:0 0 8px; }
.giftpost__lead{ color:#d2d2d9; font-size:.92rem; line-height:1.5; margin:0 0 6px; }
.giftpost__sub{ color:var(--faint); font-size:.8rem; line-height:1.5; margin:0 0 20px; }
@media (prefers-reduced-motion:reduce){ .giftpost{ animation:none; } }
.giftpost__form{ padding-top:18px; margin-top:18px; border-top:1px solid var(--line-2); }
.giftpost__form:first-child{ padding-top:0; margin-top:0; border-top:0; }
.giftpost__status{ margin:12px 0 0; font-size:.85rem; text-align:center; }
/* THE status component of the gift part: a round pill, SVG icon in CSS
   (texts no longer embed a symbol), fade-in entry. Identical everywhere. */
.giftpost__ok, .giftpost__err, .giftpost__pending{
  display:inline-flex; align-items:center; gap:9px; max-width:100%;
  padding:12px 18px; border-radius:999px; font-weight:600; font-size:.84rem; line-height:1.45;
  text-align:left; background:rgba(18,18,24,.85); animation:gfadeUp .3s cubic-bezier(.16,.84,.28,1) both; }
.giftpost__ok::before, .giftpost__err::before{ content:""; width:16px; height:16px; flex:0 0 auto; background:currentColor;
  -webkit-mask:var(--gicon) center/contain no-repeat; mask:var(--gicon) center/contain no-repeat; }
.giftpost__ok{ color:#6ef0a8; border:1px solid rgba(47,191,113,.45); --gicon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.27'/%3E%3C/svg%3E"); }
.giftpost__err{ color:#ffb4ae; border:1px solid rgba(225,6,0,.5); --gicon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E"); }
.giftpost__pending{ color:var(--muted); border:1px solid var(--line); }
.giftpost__pending::before{ content:""; width:14px; height:14px; flex:0 0 auto; border-radius:50%;
  border:2px solid rgba(255,255,255,.2); border-top-color:#fff; animation:gstageSpin .7s linear infinite; }
/* error slot at the top of the gift panels + highlight of the faulty field */
.gtopstatus{ text-align:center; margin:0 0 16px; }
.gtopstatus:empty{ display:none; }
.field--bad input, .field--bad textarea{ border-color:rgba(225,6,0,.7); box-shadow:0 0 0 3px rgba(225,6,0,.14); }

/* confirmation before the one-time send of the immersion email (avoids support tickets) */
.gmodal{ position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(8,8,10,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.gmodal[hidden]{ display:none; }
.gmodal__card{ width:min(420px,100%); text-align:center; background:linear-gradient(180deg,#1a1a20,#131317);
  border:1px solid rgba(255,255,255,.14); border-radius:18px; padding:26px 22px 22px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95); animation:gflowIn .35s var(--easeSoft); }
.gmodal__ico{ width:46px; height:46px; margin:0 auto 12px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; color:#ff3a30;
  background:rgba(225,6,0,.12); border:1px solid rgba(225,6,0,.5); }
.gmodal__ico svg{ width:19px; height:19px; }
.gmodal__title{ margin:0 0 14px; font-family:var(--display); font-weight:400; font-size:1.3rem;
  letter-spacing:.8px; text-transform:uppercase; color:#fff; }
.gmodal__recap{ margin:0 0 14px; text-align:left; border:1px solid var(--line); border-radius:12px;
  padding:4px 14px; background:rgba(255,255,255,.02); }
.gmodal__recap p{ display:flex; gap:12px; align-items:baseline; padding:9px 0; margin:0; font-size:.86rem; color:#d2d2d9; }
.gmodal__recap p + p{ border-top:1px solid rgba(255,255,255,.07); }
.gmodal__recap span{ flex:0 0 54px; font-size:.6rem; letter-spacing:1.2px; text-transform:uppercase; color:var(--faint); }
/* In a flex row, an element has min-width:auto: an unbreakable string, like
   a long e-mail address, refuses to shrink and overflows the box instead of
   wrapping. min-width:0 allows it to shrink, overflow-wrap breaks it. */
.gmodal__recap i{ font-style:normal; min-width:0; flex:1 1 auto; overflow-wrap:anywhere; }
.gmodal__recap b{ color:#fff; }
.gmodal__warn{ margin:0 0 16px; font-size:.78rem; color:#ffb4ae; }
.gmodal__go{ width:100%; font-family:inherit; font-weight:700; font-size:.8rem; letter-spacing:1px;
  text-transform:uppercase; color:#fff; background:#e10600; border:0; border-radius:999px; padding:15px 20px;
  cursor:pointer; box-shadow:0 16px 40px -16px rgba(225,6,0,.5); transition:background .2s; }
.gmodal__go:hover{ background:#ff3a30; }
.gmodal__no{ margin-top:12px; background:none; border:0; padding:0; cursor:pointer; font-family:inherit;
  color:var(--faint); font-size:.78rem; text-decoration:underline dotted; text-underline-offset:3px; }
.gmodal__no:hover{ color:#fff; }
#giftpostAdd{ margin-top:18px; }

/* "It's a gift" checkbox on the product page — informational only (see gift-assign.php/checkout-success.php
   for where the actual recipient details are collected, after payment) */
.gift{ margin:18px 0; border:1px solid rgba(255,176,46,.32); border-radius:13px;
  background:linear-gradient(165deg, rgba(255,176,46,.05), rgba(255,255,255,.015));
  box-shadow:0 0 22px -12px rgba(255,176,46,.35);
  padding:15px 16px; transition:border-color .25s, background .25s, box-shadow .25s; }
.gift:hover{ border-color:rgba(255,176,46,.55); }
.gift:has(input:checked){ border-color:rgba(255,176,46,.7);
  background:linear-gradient(165deg, rgba(255,176,46,.1), rgba(255,176,46,.02));
  box-shadow:0 0 26px -10px rgba(255,176,46,.45); }
.giftrow{ display:flex; align-items:flex-start; gap:13px; cursor:pointer; }
.giftrow input{ position:absolute; opacity:0; width:0; height:0; }
.giftrow__box{ flex:0 0 auto; width:22px; height:22px; margin-top:2px; border-radius:7px; border:1.5px solid rgba(255,176,46,.5); position:relative; transition:background .2s, border-color .2s; }
.giftrow input:checked + .giftrow__box{ background:var(--gold); border-color:var(--gold); }
/* dark checkmark: white on gold it disappeared */
.giftrow input:checked + .giftrow__box::after{ content:""; position:absolute; left:50%; top:50%; width:5px; height:10px; border:solid #141410; border-width:0 2px 2px 0; transform:translate(-50%,-60%) rotate(45deg); }
.giftrow input:focus-visible + .giftrow__box{ outline:2px solid var(--gold); outline-offset:2px; }
.giftrow__txt{ color:#fff; font-size:.95rem; font-weight:600; line-height:1.3; }
.giftrow__free{ display:inline-block; margin-left:8px; font-size:.6rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--gold); border:1px solid rgba(255,176,46,.45); border-radius:5px; padding:2px 6px; vertical-align:2px; }
.giftrow__txt small{ display:block; color:var(--muted); font-weight:400; font-size:.8rem; margin-top:4px; }
.giftfields{ max-height:0; opacity:0; overflow:hidden; margin-top:0;
  transition:max-height .42s var(--ease), opacity .3s var(--ease), margin-top .42s var(--ease); }
.giftfields > *{ opacity:0; transform:translateY(8px); transition:opacity .4s var(--ease), transform .45s var(--ease); }
/* 4 explanation lines, longer since 10/08: 260px clipped them on mobile */
.giftfields.is-open{ max-height:420px; opacity:1; margin-top:14px; }
.giftfields.is-open > *{ opacity:1; transform:none; transition-delay:0.04s; }
.gift__facts{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.gift__facts li{ display:flex; align-items:flex-start; gap:10px; }
.gift__facts svg{ flex:0 0 auto; width:16px; height:16px; margin-top:1px; color:#34d27e; }
.gift__facts b{ display:block; color:#fff; font-weight:600; font-size:.84rem; line-height:1.3; }
.gift__facts span{ display:block; color:var(--muted); font-size:.78rem; line-height:1.4; margin-top:2px; }
@media (prefers-reduced-motion:reduce){ .giftfields, .giftfields > *{ transition:none; } }
/* Since 10/08 the gift is activated AFTER the purchase: the row is no longer a
   checkbox but an information disclosure. Same layout, a chevron instead of
   the box, and the open state is read from aria-expanded. */
.giftrow--info{ width:100%; padding:0; border:0; background:none; font:inherit; text-align:left; }
.giftrow--info .giftrow__txt{ flex:1 1 auto; min-width:0; }
.giftrow__chev{ flex:0 0 auto; width:18px; height:18px; margin-top:3px; color:var(--gold);
  transition:transform .3s var(--ease); }
.giftrow--info[aria-expanded="true"] .giftrow__chev{ transform:rotate(180deg); }
.giftrow--info:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; border-radius:8px; }
.gift:has(.giftrow--info[aria-expanded="true"]){ border-color:rgba(255,176,46,.7);
  background:linear-gradient(165deg, rgba(255,176,46,.1), rgba(255,176,46,.02));
  box-shadow:0 0 26px -10px rgba(255,176,46,.45); }

/* performance: sections scrolled out of view stop animating (saves CPU/battery, keeps scrolling smooth).
   Purely a runtime optimisation, nothing moves and animations resume exactly where they left off. */
.anim-off, .anim-off *, .anim-off::before, .anim-off::after, .anim-off *::before, .anim-off *::after{ animation-play-state:paused !important; }

/* ---------------------------------------------------------------------------
   Order confirmation screen.
   The key point: the customer has just paid and is looking for their access code.
   That code is NOT on this page, it goes out by e-mail. The previous version
   displayed the order number big and in monospace, which looked exactly
   like a code: people thought they had it in front of them, or wondered
   why it looked like nothing. Here the main block says where the code goes,
   and the order number drops back to the rank of a customer service reference.

   Used by checkout-success.php (return from the bank) and preview-paid.php.
   checkout.php rebuilds the same screen in JavaScript in finishPaid().
--------------------------------------------------------------------------- */
.paid{ max-width:580px; margin:0 auto; text-align:center }

/* validation badge: the customer has just paid, they must see it before reading */
.paid__seal{ width:64px; height:64px; margin:0 auto 26px; border-radius:50%;
  display:grid; place-items:center; background:#0f1f18;
  border:1px solid rgba(47,169,104,.45); box-shadow:0 0 0 7px rgba(47,169,104,.055) }
.paid__seal svg{ width:30px; height:30px; stroke:#3ddc84; stroke-width:2.7; fill:none;
  stroke-linecap:round; stroke-linejoin:round }

.paid__lead{ color:var(--text); font-size:1.04rem; line-height:1.65; margin:0 auto 30px; max-width:440px }
.paid__lead b{ color:#fff; font-weight:600 }

/* THE main block: where to find the code. It is the answer to the only question
   someone who has just paid is asking. */
.paid__inbox{ text-align:left; display:flex; gap:17px; align-items:flex-start;
  padding:22px 24px; border-radius:14px;
  background:linear-gradient(180deg, rgba(47,169,104,.09), rgba(47,169,104,.03));
  border:1px solid rgba(47,169,104,.34) }
.paid__inbox > svg{ flex:0 0 26px; width:26px; height:26px; margin-top:2px;
  stroke:#3ddc84; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.paid__inbox h4{ margin:0 0 7px; color:#fff; font-size:1.02rem; font-weight:600; line-height:1.35 }
.paid__inbox p{ margin:0; color:var(--muted); font-size:.87rem; line-height:1.55 }
.paid__inbox em{ display:block; font-style:normal; color:#8ff0bb; font-weight:600;
  font-size:.97rem; margin-bottom:7px; word-break:break-all }

/* what happens next, connected by a rail */
.paid__tl{ margin-top:34px; text-align:left }
.paid__tl h4{ font-size:.64rem; letter-spacing:2.8px; text-transform:uppercase;
  color:var(--muted); font-weight:700; margin:0 0 20px }
.paid__ev{ position:relative; padding:0 0 24px 44px }
.paid__ev:last-child{ padding-bottom:0 }
.paid__ev::before{ content:""; position:absolute; left:13px; top:25px; bottom:0; width:1px;
  background:linear-gradient(180deg, rgba(225,6,0,.4), rgba(255,255,255,.06)) }
.paid__ev:last-child::before{ display:none }
.paid__ev em{ position:absolute; left:0; top:0; width:27px; height:27px; border-radius:50%;
  display:grid; place-items:center; font-style:normal; font-family:var(--display);
  font-size:.8rem; color:#fff; background:#14090a; border:1px solid rgba(225,6,0,.48) }
.paid__ev strong{ display:block; color:#fff; font-size:.98rem; margin:2px 0 5px; font-weight:600 }
.paid__ev p{ margin:0; color:var(--muted); font-size:.89rem; line-height:1.6 }

/* footer: reassurance, then the order reference, discreet, where people actually
   look for it, that is, when writing to customer service */
/* information note, outside the steps: useful but secondary detail, it must
   not weigh down the reading of the two key moments */
.paid__info{ display:flex; gap:13px; align-items:flex-start; text-align:left; margin-top:26px;
  padding:15px 17px; border-radius:11px; background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.09) }
.paid__info svg{ flex:0 0 17px; width:17px; height:17px; margin-top:2px; stroke:var(--muted);
  fill:none; stroke-width:1.9; stroke-linecap:round }
.paid__info p{ margin:0; color:var(--muted); font-size:.86rem; line-height:1.55 }
.paid__info b{ color:var(--text); font-weight:600 }

.paid__foot{ margin-top:26px; padding-top:20px; border-top:1px solid rgba(255,255,255,.08);
  font-size:.81rem; color:var(--faint); line-height:1.7 }
.paid__foot a{ color:var(--text); text-decoration:underline; text-underline-offset:2px }
.paid__foot b{ color:var(--text); font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.6px; font-weight:600 }
.paid .btn{ margin-top:24px }

@media (max-width:560px){
  .paid__inbox{ padding:19px 18px; gap:13px }
  .paid__ev{ padding-left:39px }
}

/* acceptance notice above the express payment buttons: it replaces
   the checkbox for these methods, which cannot be interrupted without defeating
   the point of one-tap payment */
.express-tos{ margin:16px 0 26px; font-size:.78rem; line-height:1.75; color:var(--faint); text-align:center }
.express-tos a{ color:var(--muted); text-decoration:underline; text-underline-offset:2px }


/* the header is now fixed, so it no longer pushes the content down: we compensate */
body{ padding-top:var(--topH, 78px) }
@media (max-width:760px){ body{ padding-top:var(--topH, 68px) } }

/* the mobile menu unfolds under the fixed header and must never exceed the screen */
.top__mobile{ max-height:0 }
.top__mobile.is-open{ max-height:calc(100vh - 68px); overflow-y:auto }

/* Landing on the case: the poster, the title and the button must be
   visible right away. Otherwise you land on an in-between. */
.phero{ padding-top:24px; }
.phero .crumbs{ margin-bottom:18px; }
@media(max-width:900px){
  .phero{ padding-top:18px; }
  .phero .crumbs{ margin-bottom:18px; }
  .phero .prod{ gap:16px; }
  .phero .prod__cover{ max-height:46vh; width:auto; margin:0 auto; display:block; }
  .phero .prod__rating{ margin-top:2px; }
  .phero h1.display{ margin:6px 0 4px; }
  .phero .prod__lead{ margin-bottom:10px; }
}

/* =========================================================
   gift setup page (gift.php)
   Reached from the confirmation e-mail. The form itself is injected by window.MXgiftPost
   (assets/js/site.js) into #giftpost, so everything under .giftpost--page below is an override
   of markup this file does not own. Everything else (giftbar / giftnote / giftmore / giftdone)
   is this page's own markup and uses a separate namespace on purpose, to never collide.
   ========================================================= */

/* the real fix: .mut is only defined in admin.php's inline <style>, never on a public page, so the
   four "(optional)" asides inherited .field label and rendered in forced uppercase 600. */
.giftpost .mut{ text-transform:none; letter-spacing:0; font-weight:400; color:var(--faint); font-size:.9em; }

/* on a page of its own, the injected heading and lead duplicate the h1 above them */
.giftpost--page{ margin-top:22px; }
.giftpost--page .giftpost__h,
.giftpost--page .giftpost__lead{ display:none; }
/* e-mail first, certificate second: the fallback loses the red outline without touching site.js */
.giftpost--page [data-cert]{ border-color:var(--line-2); color:var(--muted); }
.giftpost--page [data-cert]:hover{ background:transparent; border-color:var(--line); color:#fff; }

/* one discreet line of order recall, not a card */
.giftbar{ max-width:520px; margin:22px auto 0; text-align:center; font-size:.82rem; color:var(--faint); line-height:1.6; }
.giftbar b{ color:#fff; font-weight:700; letter-spacing:.6px; }
.giftbar em{ font-style:normal; color:var(--line); padding:0 4px; }

.giftnote{ max-width:520px; margin:14px auto 0; text-align:center; font-size:.84rem; color:var(--muted); line-height:1.6; }
.giftnote--foot{ margin-top:26px; color:var(--faint); font-size:.8rem; }

/* the two ways to hand the gift over used to be two cards above the form (.giftways*). Removed with their
   markup: making the buyer arbitrate between e-mail and paper before reaching the first field was the one
   thing standing between them and the only action this page exists for. One line does it now, see
   .giftnote--intro at the end of this file. */

/* recipients already assigned: read-only, mx_order_gifts has no update or delete path */
.giftdone{ max-width:520px; margin:34px auto 0; padding:26px clamp(18px,4vw,26px) 22px; border:1px solid var(--line-2); border-radius:16px; background:rgba(255,255,255,.018); text-align:center; }
.gdone__recap{ margin:0 auto 12px; width:min(400px,100%); }
.giftdone .gdone__title{ margin-bottom:18px; }
.giftdone .giftdone__note{ max-width:360px; margin:16px auto 0; }
.giftdone__h{ color:#fff; font-size:.95rem; font-weight:700; margin:0 0 4px; display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.giftdone__count{ color:var(--faint); font-size:.74rem; letter-spacing:1px; text-transform:uppercase; font-weight:600; }
.giftdone__row{ display:grid; grid-template-columns:1fr auto; gap:2px 12px; align-items:baseline;
  padding:13px 0; border-top:1px solid var(--line-2); font-size:.85rem; }
.giftdone__who{ color:#fff; font-weight:600; }
.giftdone__mail{ color:var(--faint); font-size:.8rem; grid-column:1; }
.giftdone__tag{ grid-column:2; grid-row:1; justify-self:end; font-size:.62rem; letter-spacing:1.2px; text-transform:uppercase; font-weight:700;
  color:var(--muted); border:1px solid var(--line-2); border-radius:999px; padding:3px 9px; }
.giftdone__when{ grid-column:2; grid-row:2; justify-self:end; color:var(--muted); font-size:.78rem; }
.giftdone__note{ color:var(--faint); font-size:.8rem; line-height:1.6; margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line-2); }
.giftdone__note a{ color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
.giftdone__note a:hover{ color:#fff; }
@media(max-width:540px){
  .giftdone__row{ grid-template-columns:1fr; }
  .giftdone__tag,.giftdone__when{ grid-column:1; grid-row:auto; justify-self:start; }
  .giftdone__tag{ margin-top:6px; }
}

/* --- gift.php, second pass: one clear action instead of a menu of two --- */

/* replaces the .giftways cards: the single line of context sitting just above the form */
.giftnote--intro{ margin-top:26px; text-align:left; color:var(--muted); }

/* MXgiftPost renders "send" and "certificate" side by side at equal width, which puts them on a par.
   Stacking them from here settles the hierarchy without touching the injected markup. .field--row is a
   2-column grid (line 140), not flex, so this collapses the columns instead of setting a flex direction.
   :last-of-type resolves to the button row, which is the last div child of .giftpost__form. */
.giftpost--page .giftpost__form .field--row:last-of-type{ grid-template-columns:1fr; gap:9px; }
.giftpost--page [data-cert]{ font-size:.85rem; padding:9px; }

/* returning visitor: the form is rendered folded behind .giftmore, the recap takes the top slot */
.giftpost[hidden]{ display:none; }
.giftmore{ display:flex; justify-content:center; width:100%; max-width:520px; margin:26px auto 0; }
.giftdone--first{ margin-top:26px; }

/* Container for the gift forms: without a gap, the blocks stick together
   when the buyer adds several. */
.giftpost__forms{ display:flex; flex-direction:column; gap:18px; }

/* A button placed inside a .prose inherited the underline and color of
   prose links, which won by specificity. It becomes a button again. */
.prose a.btn{ color:#fff; text-decoration:none; }
.prose a.btn:hover{ text-decoration:none; }

/* ===================== gift setup page (gift.php, .gpage) =====================
   Redesign 08/2026: the page reuses the product hero (poster | info) and renders ONE
   server-side form. MXgiftPost is no longer called; the .giftpost--page overrides
   above now have no effect and are kept for history. Only
   .giftpost__status/__ok/__err/__pending and .giftdone__* are reused here. */
.gpage{ padding-top:18px; }
.gpage .prod h1{ margin-bottom:8px; }
/* ref + payment status: two readable chips (dark ref, paid in green) */
.gpage__ref{ display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 14px; }
.gpage__ref b{ display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px;
  background:rgba(18,18,24,.85); border:1px solid rgba(255,255,255,.16);
  color:#fff; font-weight:700; font-size:.72rem; letter-spacing:1px; text-transform:uppercase; }
.gpage__ref b span{ color:var(--faint); font-weight:600; letter-spacing:.6px; text-transform:none; }
.gpage__ref em{ display:none; }
.gpage__paid{ display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px;
  background:rgba(18,18,24,.85); border:1px solid rgba(47,191,113,.4);
  color:#6ef0a8; font-weight:600; font-size:.72rem; letter-spacing:.4px; }
.gpage__paid svg{ width:12px; height:12px; flex:0 0 auto; }
/* Game code(s) of the order, under the reference: each code is a badge,
   free (gold) or already attached to a recipient (green). Avoids mixing up the
   codes on a multi-copy order. */
.gpage__codes{ display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 16px; }
.gpage__codes-lbl{ color:var(--faint); font-size:.68rem; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; }
.gcode{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px;
  background:rgba(18,18,24,.85); border:1px solid rgba(255,176,46,.4); }
.gcode b{ color:#fff; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.76rem; letter-spacing:1.5px; }
.gcode i{ font-style:normal; color:var(--gold, #ffb02e); font-size:.64rem; font-weight:700; letter-spacing:.6px; text-transform:uppercase; }
.gcode--gift{ border-color:rgba(47,191,113,.42); }
.gcode--gift i{ color:#6ef0a8; }
.gcode i{ font-style:normal; color:#6ef0a8; font-size:.66rem; font-weight:700; }
/* PER-CODE gift link: the targeted code, as a badge with the SAME layout as Ref. and
   Paid on (same height, same radius, same row). Gold border while it is free,
   green once gifted. */
.gfocus-pill{ display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px;
  background:rgba(18,18,24,.85); border:1px solid rgba(225,6,0,.5);
  color:#fff; font-weight:700; font-size:.72rem; letter-spacing:1px; text-transform:uppercase; }
.gfocus-pill > span{ color:var(--blood-bright, #ff5b4c); font-weight:600; letter-spacing:.6px; text-transform:none; }
/* the badge lives INSIDE .gpage__ref: its b would inherit from the Ref. badge (background,
   border, padding), hence a box inside the box. We flatten everything. */
.gpage__ref .gfocus-pill b, .gfocus-pill b{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:700; letter-spacing:1.5px; padding:0; border:0; background:none; border-radius:0;
  display:inline; color:#fff; font-size:.72rem; }
.gfocus-pill i{ font-style:normal; color:var(--muted); font-weight:600; letter-spacing:.4px; text-transform:none; }
.gfocus-pill.is-gifted{ border-color:rgba(47,191,113,.45); }
.gfocus-pill.is-gifted > span{ color:#6ef0a8; }
/* Code selector (order link with several codes): one link card per code,
   each leading to ITS page. 1 code = 1 page, we never show 3 forms. */
.gchooser{ width:min(560px,100%); margin:30px auto 8px; }
.gchooser__sub{ text-align:center; color:var(--muted); font-size:.9rem; line-height:1.55; margin:0 auto 22px; max-width:430px; }
.gchoose{ display:flex; align-items:center; gap:14px; padding:16px 18px; margin-bottom:12px; border-radius:14px;
  border:1px solid rgba(255,176,46,.32); background:linear-gradient(180deg, rgba(255,176,46,.05), transparent);
  text-decoration:none; transition:border-color .2s, background .2s, transform .15s; }
.gchoose:hover{ border-color:rgba(255,176,46,.6); background:linear-gradient(180deg, rgba(255,176,46,.10), transparent); transform:translateY(-1px); }
.gchoose__code{ flex:0 0 auto; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:1rem; letter-spacing:2px; color:#fff; }
.gchoose__state{ flex:1 1 auto; min-width:0; color:var(--muted); font-size:.82rem; }
.gchoose__cta{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; color:var(--gold, #ffb02e); font-size:.72rem; font-weight:800; letter-spacing:.6px; text-transform:uppercase; white-space:nowrap; }
.gchoose__cta svg{ width:15px; height:15px; }
.gchoose.is-gifted{ border-color:rgba(47,191,113,.35); background:linear-gradient(180deg, rgba(47,191,113,.05), transparent); }
.gchoose.is-gifted .gchoose__cta{ color:#6ef0a8; }
@media(max-width:520px){ .gchoose{ flex-wrap:wrap; } .gchoose__state{ order:3; flex-basis:100%; } }
.gpage .prod__lead{ margin-bottom:0; }

.gpage__card{ margin-top:24px; padding:24px clamp(20px,4vw,30px); border:1px solid var(--line); border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.008)); box-shadow:0 30px 70px -56px rgba(0,0,0,.9); }

/* send choice: two radio pills, the date only appears if "Pick a date" */
.gpage__when{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.gpage__pill{ position:relative; }
.gpage__pill input{ position:absolute; opacity:0; pointer-events:none; }
.gpage__pill span{ display:flex; align-items:center; justify-content:center; padding:13px 10px; border:1px solid var(--line); border-radius:999px;
  font-size:.76rem; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--muted); cursor:pointer; text-align:center;
  transition:border-color .2s, color .2s, background .2s; }
.gpage__pill span:hover{ border-color:rgba(255,255,255,.3); color:#fff; }
.gpage__pill input:checked + span{ border-color:var(--blood); color:#fff; background:rgba(225,6,0,.12); box-shadow:0 0 0 1px var(--blood) inset; }
.gpage__pill input:focus-visible + span{ border-color:#fff; }
.gpage__date[hidden]{ display:none; }
@media(max-width:560px){ .gpage__when{ grid-template-columns:1fr; } }

/* clean explanation on top, then two bare, readable buttons */
.gpage__actions{ margin-top:4px; }
.gpage__explain{ text-align:left; margin:0 0 22px; padding:16px 18px; border:1px solid var(--line);
  border-radius:12px; background:rgba(255,255,255,.02); }
.gpage__lead{ margin:0 0 12px; color:#fff; font-size:.9rem; line-height:1.5; }
.gpage__opts{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.gpage__opts li{ color:var(--faint); font-size:.82rem; line-height:1.55; }
.gpage__opts b{ color:#fff; font-weight:700; }
.gpage__how{ text-align:center; color:var(--faint); font-size:.78rem; line-height:1.5; margin:10px 0 18px; }
.gpage__actions .btn + .btn{ margin-top:12px; }
.gpage__status{ text-align:center; margin:2px 0 0; }
.gpage__status:empty{ display:none; }

.gpage__note{ color:var(--muted); font-size:.84rem; line-height:1.6; margin:14px 0 0; }
.gpage__note--foot{ color:var(--faint); font-size:.8rem; margin-top:16px; }
.gpage .giftdone{ max-width:none; margin-top:24px; }

/* gift page recipient address: the printer glyph on the certificate button stays an outline (the base
   .btn svg rule fills it) and does not slide on hover; the address section title hugs its fields */
.gpage__actions .btn svg{ fill:none; }
.gpage__actions .btn:hover svg{ transform:none; }
.gpage__addrhead{ margin-bottom:8px; }

/* ===================== gift page, progressive disclosure (08/2026) =====================
   The buyer lands on a choice screen (how-it-works + green reassurance + two option cards).
   Picking a card reveals only that path's form; the other stays hidden. Red horror and green
   reassurance answer each other. Green (--go) is used for reassurance and how-it-works only. */
.gpage__flow{ margin-top:24px; }
.gchoice[hidden], .gpath[hidden]{ display:none; }

/* how it works: three numbered steps */
.gsteps{ list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:13px; }
.gstep{ display:flex; align-items:flex-start; gap:13px; }
.gstep__n{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:800; color:#fff; background:rgba(225,6,0,.16); border:1px solid rgba(225,6,0,.5); }
.gstep__b{ display:flex; flex-direction:column; gap:2px; font-size:.85rem; line-height:1.5; color:var(--faint); padding-top:1px; }
.gstep__b b{ color:#fff; font-weight:700; font-size:.9rem; }

/* green reassurance encart */
.greassure{ display:flex; align-items:flex-start; gap:11px; margin:0 0 24px; padding:14px 16px;
  border:1px solid var(--go-line); border-radius:13px; background:var(--go-soft);
  color:var(--text); font-size:.85rem; line-height:1.55; }
.greassure svg{ flex:0 0 auto; width:17px; height:17px; margin-top:2px; color:var(--go); }
.greassure b{ color:var(--go); font-weight:700; }

.gchoice__ask{ color:#fff; font-size:.74rem; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; margin:0 0 13px; }

/* two option cards, side by side on desktop */
.gpick{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.gopt{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left; cursor:pointer;
  padding:20px 19px; border-radius:16px; border:1px solid var(--line); font-family:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.006));
  transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .25s; }
.gopt:hover{ transform:translateY(-3px); border-color:rgba(255,255,255,.28); box-shadow:0 26px 50px -30px rgba(0,0,0,.9); }
.gopt--trap:hover, .gopt--plain:hover{ border-color:rgba(255,255,255,.28); box-shadow:0 26px 50px -30px rgba(0,0,0,.9); }
.gopt:focus-visible{ outline:0; border-color:#fff; }
.gopt__k{ font-size:.62rem; letter-spacing:2px; text-transform:uppercase; font-weight:700; color:var(--muted); }
/* same label for both: neither path is "the right one" */
.gopt--trap .gopt__k, .gopt--plain .gopt__k{ color:var(--muted); }
.gopt__t{ font-family:var(--display); text-transform:uppercase; letter-spacing:1px; font-size:1.5rem; color:#fff; line-height:1; }
.gopt__d{ color:var(--faint); font-size:.82rem; line-height:1.5; margin:2px 0 4px; }
.gopt__go{ display:inline-flex; align-items:center; gap:7px; margin-top:auto; font-size:.72rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#fff; }
.gopt__go svg{ width:15px; height:15px; transition:transform .2s var(--ease); }
.gopt:hover .gopt__go svg{ transform:translateX(4px); }
@media(max-width:560px){ .gpick{ grid-template-columns:1fr; } }

/* case title logo: transparent PNG provided by Sacha, centered and contained.
   No background, no blend: transparency does the job on the site's ink.
   Entry on arrival: a simple soft rising fade (the flicker was
   removed at Sacha's request, 06/08). */
.gtitle-logo{ margin:14px 0 6px; line-height:0; text-align:center; }
.gtitle-logo img{ display:inline-block; width:min(300px,78%); height:auto;
  opacity:0; animation:gtitleIn .9s cubic-bezier(.16,.84,.28,1) .15s forwards; }
@keyframes gtitleIn{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){ .gtitle-logo img{ opacity:1; animation:none; } }
@media(max-width:900px){ .gtitle-logo img{ width:min(250px,72%); } }

/* gift page: the "You are gifting" eyebrow centered above the logo,
   and more air between the poster and the title column */
.gpage__eyebrow{ display:flex; align-items:center; justify-content:center; gap:14px;
  margin-bottom:20px; color:#fff; }
.gpage__eyebrow::before, .gpage__eyebrow::after{ content:""; height:1px; width:clamp(26px,6vw,50px); flex:0 0 auto; }
.gpage__eyebrow::before{ background:linear-gradient(90deg, transparent, var(--blood-bright)); }
.gpage__eyebrow::after{ background:linear-gradient(90deg, var(--blood-bright), transparent); }
.gpage.phero .gpage__eyebrow{ margin:2px 0 16px; }
.gpage .prod{ gap:clamp(40px,7vw,88px); }

/* name/email rows etc.: when a label wraps to 2 lines ("the reveal
   arrives here"), the input next to it must not drop. Each field becomes
   a column whose input aligns at the bottom. Scoped to .gpage: checkout keeps its rendering. */
.gpage .field--row .field{ display:flex; flex-direction:column; }
.gpage .field--row .field input, .gpage .field--row .field select{ margin-top:auto; }

/* landing of the "choose the case" CTAs on the poster grid (/cases#files):
   the offset leaves a sliver of subtitle above the cards, fixed header included */
#files{ scroll-margin-top:150px; }
/* mobile: we land ON the "Swipe to see more" badge (fixed header ~68px +
   badge + breathing room), not half underneath, Sacha's request 05/08 */
@media(max-width:900px){ #files{ scroll-margin-top:172px; } }   /* we land on the swipe hint, not half underneath */

/* send timing choice: two visual tiles side by side, the lightning bolt (now)
   and the calendar (chosen date), hidden radios, distinct colored selection */
.gwhen{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.gwhen__opt{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
  padding:16px 12px 14px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.03);
  cursor:pointer; transition:border-color .2s, background .2s, transform .2s var(--ease); }
.gwhen__opt:hover{ transform:translateY(-2px); }
.gwhen__opt input{ position:absolute; opacity:0; pointer-events:none; }
.gwhen__ic{ width:36px; height:36px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; }
.gwhen__ic svg{ width:19px; height:19px; }
.gwhen__opt--now .gwhen__ic{ background:rgba(225,6,0,.14); color:var(--blood-bright); }
.gwhen__opt--date .gwhen__ic{ background:rgba(127,167,255,.14); color:#7fa7ff; }
.gwhen__t{ font-family:var(--display); text-transform:uppercase; letter-spacing:1px; color:#fff; font-size:1rem; line-height:1; }
.gwhen__d{ font-size:.73rem; color:var(--faint); line-height:1.4; text-transform:none; letter-spacing:0; font-weight:400; }
.gwhen__opt--now:has(input:checked){ border-color:rgba(225,6,0,.6); background:linear-gradient(160deg, rgba(225,6,0,.12), rgba(20,20,26,.4)); box-shadow:0 14px 32px -20px var(--glow); }
.gwhen__opt--date:has(input:checked){ border-color:rgba(127,167,255,.6); background:linear-gradient(160deg, rgba(94,146,255,.12), rgba(20,20,26,.4)); }

/* staging of the send: steps ticked off one by one, then confirmation. Everything is centered. */
.gpage__actions{ text-align:center; }
#gpreview{ text-align:center; }
.gstage{ display:inline-block; text-align:left; margin:14px auto 0; }
.gstage__row{ display:flex; align-items:center; gap:10px; padding:4px 0; color:var(--faint); font-size:.87rem; transition:color .3s; }
.gstage__row.is-on{ color:#fff; }
.gstage__row.is-done{ color:var(--muted); }
.gstage__dot{ width:14px; height:14px; flex:0 0 auto; border-radius:50%; border:2px solid rgba(255,255,255,.22); position:relative; box-sizing:border-box; }
.gstage__row.is-on .gstage__dot{ border-color:rgba(225,6,0,.25); border-top-color:var(--blood-bright); animation:gstageSpin .7s linear infinite; }
.gstage__row.is-done .gstage__dot{ border-color:#2fbf71; }
.gstage__row.is-done .gstage__dot::after{ content:""; position:absolute; left:3px; top:0; width:3px; height:7px; border:solid #2fbf71; border-width:0 2px 2px 0; transform:rotate(45deg); }
@keyframes gstageSpin{ to{ transform:rotate(360deg); } }
.gstage--final{ display:block; text-align:center; font-size:.95rem; }
@media (prefers-reduced-motion:reduce){ .gstage__row.is-on .gstage__dot{ animation:none; } }

/* certificate path: during generation the form fades out (no spamming
   the button), a "the PDF is being built" staging runs, then the final card
   replaces everything with the two actions and a discreet link to edit */
/* .field--row .field is display:flex FURTHER DOWN in the file (label
   alignment) and would win at equal specificity: we hide the rows too. */
.gform--done .field, .gform--done .field--row, .gform--done .field--row .field,
.gform--done #gbprint, .gform--done #gsend{ display:none; }

/* the build: mini document assembling itself, sweep, progress bar */
/* no card inside the card: the block blends into the path panel */
.gforge{ margin:10px auto 0; padding:12px 0 6px; max-width:440px; text-align:center; }
.gforge__doc{ position:relative; width:78px; height:106px; margin:0 auto 18px; border-radius:9px;
  background:#1b1b21; border:1px solid rgba(255,255,255,.13); overflow:hidden; padding:13px 11px;
  text-align:left; box-shadow:0 18px 40px -22px rgba(0,0,0,.9); }
.gforge__doc .gl{ position:relative; display:block; height:5px; border-radius:3px;
  background:rgba(255,255,255,.10); margin:0 0 7px; overflow:hidden; }
.gforge__doc .gl::after{ content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  animation:glShim 1.4s ease-in-out infinite; }
.gforge__doc .gl--t{ width:64%; height:7px; background:rgba(225,6,0,.45); }
.gforge__doc .gl--a{ width:92%; } .gforge__doc .gl--b{ width:84%; animation-delay:.2s; } .gforge__doc .gl--s{ width:48%; }
@keyframes glShim{ 60%,100%{ transform:translateX(100%); } }
.gforge__seal{ position:absolute; right:9px; bottom:9px; width:15px; height:15px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #ff3a30, #a50400); box-shadow:0 0 12px rgba(225,6,0,.65); }
.gforge__scan{ position:absolute; left:0; right:0; top:-45%; height:45%;
  background:linear-gradient(180deg, transparent, rgba(225,6,0,.16), transparent);
  animation:gscan 1.7s ease-in-out infinite; }
@keyframes gscan{ to{ top:125%; } }
.gforge__stage{ margin:0 0 14px; color:#fff; font-size:.9rem; font-weight:600; }
.gforge__stage.is-in{ animation:gfadeUp .35s var(--easeSoft) both; }
@keyframes gfadeUp{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }
.gforge__bar{ height:4px; max-width:280px; margin:0 auto; border-radius:4px;
  background:rgba(255,255,255,.08); overflow:hidden; }
.gforge__bar span{ display:block; height:100%; width:0; border-radius:4px;
  background:linear-gradient(90deg, #a50400, #ff3a30); animation:gforgeFill 3.2s cubic-bezier(.25,.6,.3,1) forwards; }
.gforge--mail .gforge__bar span{ animation-duration:4.3s; }
@keyframes gforgeFill{ to{ width:100%; } }
@media (prefers-reduced-motion:reduce){
  .gforge__doc .gl::after, .gforge__scan{ animation:none; }
  .gforge__bar span{ animation-duration:.1s; }
}

/* the final card: checkmark that pulses once, two actions aligned in a grid */
.gdone{ margin:10px auto 0; padding:12px 0 6px; max-width:440px; text-align:center; }
/* the thumbnail of the finished certificate: continuity with the build (same mini
   document), slight tilt, red halo, green validation badge on the corner */
.gdone__doc{ position:relative; width:88px; height:118px; margin:4px auto 20px; border-radius:10px;
  background:linear-gradient(180deg, #1a1a20, #131317); border:1px solid rgba(255,255,255,.14);
  padding:13px 10px 0; transform:rotate(-2deg);
  box-shadow:0 22px 50px -22px rgba(0,0,0,.95), 0 0 44px -8px rgba(225,6,0,.28); }
.gdone__doc img{ display:block; width:76%; height:auto; margin:0 auto 9px;
  filter:drop-shadow(0 2px 8px rgba(225,6,0,.4)); }
.gdone__doc .dl{ display:block; border-radius:2px; margin:0 auto 5px; }
.gdone__doc .dl--name{ width:68%; height:6px; background:rgba(255,255,255,.78); margin-bottom:7px; }
.gdone__doc .dl--a{ width:84%; height:4px; background:rgba(255,255,255,.12); }
.gdone__doc .dl--b{ width:56%; height:4px; background:rgba(255,255,255,.12); }
.gdone__doc .dcode{ width:74%; height:15px; margin:10px auto 0; border-radius:5px;
  background:linear-gradient(160deg, rgba(225,6,0,.2), rgba(18,18,24,.9));
  border:1px solid rgba(225,6,0,.6); box-shadow:0 0 14px -2px rgba(225,6,0,.55); }
.gdone__env{ position:relative; width:106px; height:72px; margin:6px auto 20px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; color:#ff3a30; transform:rotate(-2deg);
  background:linear-gradient(180deg, #1a1a20, #131317); border:1px solid rgba(255,255,255,.14);
  box-shadow:0 22px 50px -22px rgba(0,0,0,.95), 0 0 44px -8px rgba(225,6,0,.28); }
.gdone__env > svg{ width:34px; height:34px; filter:drop-shadow(0 0 10px rgba(225,6,0,.45)); }
.gdone__sub b{ color:#fff; font-weight:700; }
.gdone__badge{ position:absolute; right:-11px; bottom:-11px; width:31px; height:31px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff; background:#2fbf71;
  border:3px solid #101014; animation:gdonePulse 1s var(--easeSoft) .25s; }
@keyframes gdonePulse{ from{ box-shadow:0 0 0 0 rgba(47,191,113,.4); } to{ box-shadow:0 0 0 20px rgba(47,191,113,0); } }
.gdone__badge svg{ width:13px; height:13px; }
.gdone__title{ margin:0 0 5px; font-family:var(--display); font-weight:400; font-size:1.4rem;
  letter-spacing:1px; text-transform:uppercase; color:#fff; }
.gdone__title em{ font-style:normal; color:var(--blood-bright); text-shadow:0 0 22px rgba(225,6,0,.5); }
.gdone__sub{ margin:0 auto 18px; max-width:320px; color:var(--muted); font-size:.88rem; line-height:1.55; }
/* the 2 actions: DEDICATED class (no inheritance from .btn), explicit identical
   dimensions -> impossible for them to differ, whatever the cache or the cascade */
.gdone__btns{ display:grid; grid-template-columns:1fr 1fr; gap:10px; width:min(380px,100%); margin:0 auto; }
.gdbtn{ box-sizing:border-box; display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; height:52px; padding:0 12px; border-radius:999px; border:1px solid transparent;
  font-family:inherit; font-size:.8rem; font-weight:700; line-height:1; letter-spacing:1px;
  text-transform:uppercase; text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background .2s, border-color .2s, transform .2s; }
.gdbtn svg{ width:16px; height:16px; flex:0 0 auto; }
.gdbtn:hover{ transform:translateY(-1px); }
.gdbtn--ghost{ color:#fff; background:rgba(255,255,255,.02); border-color:rgba(255,255,255,.28); }
.gdbtn--ghost:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.5); }
.gdbtn--primary{ color:#fff; background:#e10600; box-shadow:0 16px 38px -14px rgba(225,6,0,.55); }
.gdbtn--primary:hover{ background:#ff3a30; }
@media (max-width:430px){ .gdone__btns{ grid-template-columns:1fr; } }

/* Sending the certificate by e-mail, under the Download and Print buttons.
   Same grain as the rest of the end screen: discreet block, separated by a rule,
   to remain an option and not compete with printing. */
/* The gift page is a CENTERED composition, poster style: the lead must
   follow. It was only centered under the phone media query, so it stayed
   left-aligned on large screens, the only crooked element of the page. */
.gpage.phero .prod__lead{ text-align:center; max-width:52ch; margin-left:auto; margin-right:auto; }

/* First title of the flow: it was stuck to the back button. */
#gchoice .gchoice__ask:first-of-type{ margin-top:6px; }

/* Toggle between the gift list and the flow: only one of the two is visible.
   The hidden attribute cuts the display abruptly, so the transition plays on a class
   set right after removing it. Respects prefers-reduced-motion. */
.gswap{ opacity:0; transform:translateY(8px);
  transition:opacity .2s ease-out, transform .2s ease-out; }
.gswap.is-on{ opacity:1; transform:none; }
/* the exit is faster than the entry: the eye accepts that an element
   leaves quickly, it needs a bit more time to welcome a new one */
.gswap:not(.is-on){ transition-duration:.16s; }
@media (prefers-reduced-motion: reduce){
  .gswap{ transition:none; opacity:1; transform:none; }
}

/* Numbered list of an order's gifts. It is the starting point as soon as there
   are several: each row says where things stand and carries its own action, so
   you always know WHICH gift you are handling. */
/* Air above: the title was stuck to the intro paragraph. */
.glist{ width:min(560px,100%); margin:38px auto 26px; }
/* ONE SINGLE title treatment for both screens, the list and the setup.
   Both looked like interchangeable badges and you could no longer tell
   which was a title and which an action. Anton in caps, the number in red,
   and the site's red rule underneath, like every section title. */
.glist__head, .gflow__head{ display:flex; flex-direction:column; align-items:center;
  gap:12px; margin:0 0 26px; }
.glist__t, .gflow__which{ font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.45rem,3.2vw,1.95rem); letter-spacing:1px; line-height:1;
  color:#fff; text-align:center; margin:0; }
.glist__t em, .gflow__which b{ font-style:normal; font-weight:400; color:var(--blood-bright, #ff5b4c); }
.glist__i{ display:flex; align-items:center; gap:14px; padding:14px 16px; margin-bottom:10px;
  border:1px solid rgba(255,255,255,.12); border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), transparent); }
.glist__i.is-done{ border-color:rgba(90,208,122,.30); background:rgba(90,208,122,.05); }
.glist__n{ flex:none; width:30px; height:30px; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center; font-weight:800; font-size:.86rem;
  color:#fff; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16); }
.glist__i.is-done .glist__n{ color:#5ad07a; border-color:rgba(90,208,122,.4); background:rgba(90,208,122,.10); }
/* min-width:0 is essential: without it, a long e-mail address refuses to
   shrink in the flex row and pushes the button out of the card. */
.glist__b{ flex:1 1 auto; min-width:0; }
.glist__h{ margin:0 0 2px; font-size:1rem; font-weight:700; color:#fff; line-height:1.3; }
.glist__s{ margin:0; font-size:.84rem; line-height:1.5; color:var(--muted); overflow-wrap:anywhere; }
/* the code on ITS OWN line, in spaced digits: stuck to the rest, it got lost */
.glist__s b{ color:#fff; letter-spacing:2px; font-size:.82rem; }
.glist__code{ display:block; margin-top:5px; font-size:.72rem; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--faint); }
.glist__code b{ margin-left:6px; }
.glist__go{ flex:none; padding:10px 16px; border-radius:999px; border:0; cursor:pointer;
  font:inherit; font-size:.78rem; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  color:#fff; background:#e10600; }
.glist__go:hover{ background:#ff3a30; }
/* Access to the PDF from the row itself. A green checkmark only said "done":
   it did not recall what had been sent and opened onto nothing. */
.glist__pdf{ flex:none; display:inline-flex; align-items:center; gap:7px; padding:9px 15px;
  border-radius:999px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.05);
  color:#fff; text-decoration:none; font-size:.72rem; font-weight:800; letter-spacing:1px;
  text-transform:uppercase; transition:background .2s, border-color .2s; }
.glist__pdf:hover{ background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.38); }
.glist__pdf svg{ width:15px; height:15px; }
/* Note about the sender, ATTACHED to the relevant gift: placed at the bottom of the list
   it floated without anyone knowing which gift it was about. */
/* Presented as INFORMATION, with the icon and grain of the rest of the site
   (.cblock__hint on the checkout funnel): as plain text it blended in with
   the gift status right above. */
.glist__from{ display:flex; align-items:flex-start; gap:7px; margin-top:8px;
  padding:8px 10px; border-radius:8px; border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03); font-size:.76rem; line-height:1.5; color:var(--muted); }
.glist__from svg{ width:14px; height:14px; flex:0 0 auto; margin-top:2px; color:var(--gold, #e9a13b); }
.glist__from b{ color:#c6c6d0; }
@media (max-width:520px){ .glist__pdf{ width:100%; justify-content:center; margin-top:4px; } }

/* Back to the list: it is the only exit from the screen, it must be visible. The original
   .gback style is a tiny gray link, invisible on a dark background. */
/* Air around: title, exit button and start of the flow were touching. */
/* Back to the list. It is a COMMAND, not a title: it sits ABOVE the
   title, like navigation, and stays understated. As a bordered badge it became the
   visual twin of the title right below, and you could no longer tell them apart. */
.gtolist{ display:inline-flex; align-items:center; gap:7px; margin:0 0 16px; padding:6px 2px;
  border:0; background:none; color:var(--muted); font:inherit; font-size:.72rem; font-weight:800;
  letter-spacing:1.4px; text-transform:uppercase; cursor:pointer; transition:color .2s; }
.gtolist:hover{ color:#fff; }
.gtolist svg{ width:15px; height:15px; }
@media (max-width:520px){
  .glist__i{ flex-wrap:wrap; }
  .glist__go{ width:100%; margin-top:4px; }
}

/* Gift option AFTER the purchase (10/08): offered, never imposed. The "+" row of
   the list stays understated (dotted border, neutral background) so it is not confused
   with a gift that has actually been set up. */
.glist__i--extra{ border-style:dashed; border-color:rgba(255,255,255,.16); background:none; }
.glist__i--extra .glist__n{ color:var(--gold, #ffb02e); border-color:rgba(255,176,46,.4); background:rgba(255,176,46,.10); }
/* GOLD gift button, exactly the shade of the "Make it a gift" button in the code email:
   the gift is free and stands apart from the sales red. Dark text for
   contrast on gold. */
.btn--gift{ background:#e6952a; background-image:linear-gradient(180deg,#ffb02e,#e0891a); color:#1a1205;
  box-shadow:0 16px 40px -16px rgba(255,176,46,.5); }
.btn--gift:hover{ background:#ffb02e; color:#1a1205; transform:translateY(-2px);
  box-shadow:0 22px 50px -14px rgba(255,176,46,.55); }
.glist__go[data-convert]{ background:#e6952a; background-image:linear-gradient(180deg,#ffb02e,#e0891a); color:#1a1205; }
.glist__go[data-convert]:hover{ background:#ffb02e; }
/* "Meant to gift it?" card for an order with no declared gift: same layout as
   .gdone, the text breathes and the button closes. */
.gconvert__d{ max-width:400px; margin:0 auto 22px; font-size:.92rem; line-height:1.65; color:var(--muted); }
.gconvert .gdone__title, .gconvert__d{ text-align:center; }
/* Discreet reminder under the regeneration form: there is still a copy left
   to gift, without competing with the form above. */
.gconvert--after{ margin:34px auto 0; padding-top:22px; width:min(560px,100%);
  border-top:1px solid rgba(255,255,255,.08); text-align:center; }
.gconvert--after .gconvert__d{ margin-bottom:14px; font-size:.84rem; }

/* Actions attached to a gift already set up: review the emails, rebuild the
   PDF. They live in the recap, so they stay accessible on every
   return to the page, not only in the second after sending. */
/* A single action under each gift: get the PDF. It lives OUTSIDE the recap
   block, whose two-column grid broke its layout. */
.gdone__acts{ display:flex; justify-content:center; margin:14px 0 0; }
.gdone__acts .gdbtn{ min-width:240px; justify-content:center; font-size:.78rem; padding:12px 18px; }
.gdone__from{ margin:12px auto 0; max-width:44ch; font-size:.8rem; line-height:1.55;
  color:#8b8b96; text-align:center; }
.gdone__from b{ color:#c6c6d0; }
@media (max-width:430px){ .gdone__acts .gdbtn{ flex:1 1 100%; } }

.gsend{ width:min(380px,100%); margin:22px auto 0; padding-top:18px;
  border-top:1px solid rgba(255,255,255,.09); }
.gsend__t{ margin:0 0 10px; font-size:.92rem; color:#c6c6d0; text-align:center; }
.gsend__row{ display:grid; grid-template-columns:1fr auto; gap:8px; }
.gsend__in{ width:100%; padding:12px 13px; border-radius:10px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04); color:#fff; font:inherit; font-size:.95rem; }
.gsend__in:focus{ outline:2px solid #e10600; border-color:#e10600; }
.gsend__in:disabled{ opacity:.5; }
.gsend__go{ white-space:nowrap; }
.gsend__hint{ margin:9px 0 0; font-size:.8rem; line-height:1.5; color:#8b8b96; text-align:center; }
.gsend__msg{ margin:10px 0 0; font-size:.86rem; line-height:1.5; text-align:center; padding:8px 11px;
  border-radius:8px; border:1px solid rgba(255,255,255,.1); color:#c6c6d0; }
.gsend__msg--ok{ color:#5ad07a; border-color:rgba(90,208,122,.4); background:rgba(90,208,122,.08); }
.gsend__msg--err{ color:#ff7a70; border-color:rgba(225,6,0,.4); background:rgba(225,6,0,.08); }
/* under 16px, iOS zooms in on the field as soon as it is touched */
@media (max-width:430px){ .gsend__row{ grid-template-columns:1fr; } .gsend__in{ font-size:16px; } }
.gdone__edit{ margin:16px 0 0; background:none; border:0; padding:0; cursor:pointer; font-family:inherit;
  color:var(--faint); font-size:.78rem; text-decoration:underline dotted; text-underline-offset:3px; }
.gdone__edit:hover{ color:#fff; }

/* toggle choice <-> form: the incoming panel enters with a rising fade */
.ganim-in{ animation:gflowIn .45s var(--ease) both; }
@keyframes gflowIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .ganim-in{ animation:none; } }

/* the "change" link back to the choice screen, on each path */
.gback{ display:inline-flex; align-items:center; gap:6px; margin:0 0 16px; padding:0; background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:.72rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--muted); transition:color .2s; }
.gback:hover{ color:#fff; }
.gback svg{ width:15px; height:15px; }

/* each path's own header, sitting inside the .gpage__card */
.gpath__h{ font-family:var(--display); text-transform:uppercase; letter-spacing:1px; font-size:1.55rem; color:#fff; line-height:1; margin:0 0 6px; }
.gpath__sub{ color:var(--muted); font-size:.85rem; line-height:1.55; margin:0 0 22px; }

/* mobile: the poster stops eating the viewport and becomes a slim cinematic banner above the title,
   so the game title and the choice screen sit at the top without scrolling past a full-height poster.
   Two classes on the section (.gpage.phero) win over the .phero .prod__cover cap at line ~1597. */
@media(max-width:900px){
  /* Poster removed on phones (it kept overlapping the title through a layout quirk).
     Instead: generated church-ritual artwork as a parallax background layer (::before,
     translate driven by site.js's [data-parallax] engine via --py), under a very
     dark veil so the background stays a whisper and the text perfectly readable. */
  .gpage.phero{ position:relative; overflow:hidden; background:#0c0c0e; }
  .gpage.phero::before{
    content:""; position:absolute; inset:-140px 0; z-index:0; pointer-events:none;
    background:
      linear-gradient(to bottom, rgba(12,12,14,.92) 0%, rgba(12,12,14,.89) 30%, rgba(12,12,14,.95) 78%, #0c0c0e 100%),
      url('/assets/img/gift-hero-mobile.jpg?v=3') center top / cover no-repeat,
      #0c0c0e;
    transform: translateY(var(--py, 0px));
    will-change: transform;
  }
  .gpage.phero > .wrap{ position:relative; z-index:1; }
  /* scroll reveals: the gift flow blocks use the site's .reveal */
  @media (prefers-reduced-motion:reduce){ .gpage.phero::before{ transform:none; } }
  .gpage.phero .prod{ display:block; }
  .gpage.phero .prod__media{ display:none; }
  .gpage.phero .prod__info{ margin-top:0; transform:none !important; opacity:1 !important; filter:none !important; animation:none !important; }
  .gpage.phero .reveal--l, .gpage.phero .reveal--r{ transform:none !important; opacity:1 !important; filter:none !important; animation:none !important; }
  /* Gift page header: everything is CENTERED and stacked cleanly, poster style.
     Before, eyebrow and ref stayed on the left around a centered logo: messy. */
  .gpage.phero .eyebrow{ margin:2px 0 10px; text-align:center; display:block; }
  .gpage.phero .gtitle-logo{ margin:0 0 12px; }
  /* The two badges already carry their own outline: wrapping them in a
       second frame made a big empty rectangle around them on phones. */
    .gpage.phero .gpage__ref{ display:flex; justify-content:center; align-items:center; gap:8px;
      flex-wrap:wrap; margin:0 auto 16px; width:auto; padding:0; border:0; background:none; }
  .gpage.phero .prod__lead{ text-align:center; font-size:.98rem; line-height:1.6;
    max-width:34ch; margin:0 auto 8px; color:var(--muted); }
}

/* Two choice cards, made visually distinct at a glance: the immersive card wears the blood
   red, the simple card wears the reassuring green. Each leads with its own icon. */
.gopt__ic{ display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px;
  border-radius:12px; margin-bottom:4px; border:1px solid var(--line); }
.gopt__ic svg{ width:24px; height:24px; }
/* The two paths are EQUIVALENT: it is a choice, not a validation.
   One was red and the other green, which reads as "cancel" versus "confirm" and
   pushes toward green for no reason. So both cards share the same neutral
   base; only the icon keeps the brand's red accent, identical on both
   sides, and hover is set apart by intensity, not by color. */
.gopt--trap, .gopt--plain{ border-color:rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.045), transparent); }
/* Two DIFFERENT tints to tell the paths apart at a glance, but neither
   red nor green: those two read as "cancel" and "confirm" while neither
   path is a refusal or a confirmation. Amber for the staged path,
   steel blue for the plain one. The cards themselves stay identical. */
.gopt--trap .gopt__ic{ color:#e9a13b; border-color:rgba(233,161,59,.45); background:rgba(233,161,59,.11); }
.gopt--plain .gopt__ic{ color:#8aa9d6; border-color:rgba(138,169,214,.45); background:rgba(138,169,214,.11); }
.gopt--trap .gopt__k, .gopt--plain .gopt__k{ color:var(--muted); }
.gopt--trap:hover, .gopt--plain:hover{ border-color:rgba(255,255,255,.28);
  box-shadow:0 20px 46px -26px rgba(0,0,0,.9); }

/* =========================================================
   CTA v7 buy buttons that hold the eye
   Scope: .btn--buy ONLY. .btn--primary is reused here by neutral
   buttons (Back to home, Post review, Contact us, Send message),
   so animating it would make a "Back to home" arrow twitch.
   Mechanism: permanent elevation + static rim light (matter, not
   motion) and ONE calm 4px arrow step per 5s cycle (signal).
   Only transform and box-shadow are touched: no layout, no repaint
   of the button body, no filter.
   ========================================================= */

/* 1. resting state. First shadow = the top rim light (inset, fixed).
      Second = the hover ring, spread 0 and alpha 0: present but
      invisible, so the hover transition starts from zero. */
.btn.btn--buy{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 0 0 0 rgba(24,196,104,0),
    0 8px 18px -10px rgba(0,0,0,.55),
    0 20px 44px -16px rgba(24,196,104,.62);
  transition:transform .2s var(--ease), box-shadow .32s var(--ease), background .2s, border-color .2s, color .2s;
}

/* 2. hover: the halo opens. box-shadow never takes part in layout,
      so the button box does not move by a single pixel. */
.btn.btn--buy:hover,
.btn.btn--buy:focus-visible{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 0 0 6px rgba(24,196,104,.13),
    0 10px 22px -10px rgba(0,0,0,.60),
    0 28px 60px -18px rgba(24,196,104,.60);
}

/* 3. the arrow takes one step forward, then goes quiet for 4.4s.
      :not(.ico-cart) protects the cart icon (rules above, v22). */
.btn--buy > svg:not(.ico-cart){ animation:ctaNudge 5s var(--easeSoft) 1.1s infinite; }

/* desync per context so two CTAs in the same viewport never step together */
.buy .btn--buy > svg{ animation-delay:1.4s; }
.fcta__box .btn--buy > svg{ animation-delay:-1.9s; }
.cmty__card .btn--buy > svg{ animation-delay:-3.2s; }

/* on hover we hand back to .btn:hover svg (translateX(4px)): same
   amplitude as the nudge peak, so there is no snap either way. */
.btn.btn--buy:hover > svg:not(.ico-cart),
.btn.btn--buy:focus-visible > svg:not(.ico-cart){ animation:none; }

/* 4. tunnel and disabled buttons never call out: the customer is
      already decided there, and a page with four blinking CTAs
      reads as a script, not as a product. */
.orderbar .btn--buy > svg,
.cdrawer .btn--buy > svg,
.summary .btn--buy > svg,
#payBtn > svg,
.btn.btn--buy[disabled] > svg{ animation:none !important; transform:none !important; }

/* the sticky bar sits on top of content: same language, tamer glow */
.orderbar .btn.btn--buy{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 0 0 0 rgba(24,196,104,0),
    0 10px 26px -14px rgba(24,196,104,.5);
}
.orderbar .btn.btn--buy:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 0 0 5px rgba(24,196,104,.14),
    0 14px 32px -14px rgba(24,196,104,.55);
}
.btn.btn--buy[disabled]{ box-shadow:0 8px 18px -12px rgba(0,0,0,.5); }

@keyframes ctaNudge{
  0%{ transform:translateX(0); }
  6%{ transform:translateX(4px); }
  13%,100%{ transform:translateX(0); }
}

/* 5. reduced motion: no movement at all, but the button stays
      visibly premium (elevation and rim light are static anyway). */
@media (prefers-reduced-motion:reduce){
  .btn--buy > svg,
  .btn--buy > svg:not(.ico-cart){ animation:none !important; transform:none !important; }
  .btn.btn--buy{ transition:box-shadow .2s, background .2s, color .2s, border-color .2s; }
  .btn.btn--buy{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.24),
      0 0 0 3px rgba(24,196,104,.10),
      0 8px 18px -10px rgba(0,0,0,.55),
      0 20px 44px -16px rgba(24,196,104,.62);
  }
}

/* CTA labels: the new button labels are longer than the old ones, so on narrow
   phones the pill padding is trimmed to keep every button on a single line. */
@media (max-width:430px){
  .btn{ padding-inline:20px; }
  .btn--lg{ padding-inline:18px; }
  .btn--block{ padding-inline:12px; }
}

/* Very small screens (iPhone SE, 320px): long labels wrapped to 2 lines
   or got clipped. We tighten further and allow the type to shrink a bit
   rather than break the line. */
@media (max-width:360px){
  .btn{ padding-inline:14px; font-size:.72rem; letter-spacing:.4px; }
  .btn--lg{ padding-inline:13px; font-size:.74rem; }
  .btn--block{ padding-inline:8px; }
  .btn svg{ flex:0 0 auto; }
}

/* The 3 steps of the gift flow, on the product page: the buyer must understand
   before paying that they come back to fill in the recipient afterwards. */
.giftcard__steps{ list-style:none; counter-reset:g; margin:16px 0 0; padding:0;
  display:flex; flex-direction:column; gap:9px; }
.giftcard__steps li{ counter-increment:g; position:relative; padding-left:30px;
  font-size:.92rem; line-height:1.55; color:var(--text); }
.giftcard__steps li::before{ content:counter(g); position:absolute; left:0; top:1px;
  width:20px; height:20px; border-radius:50%; background:rgba(225,6,0,.14);
  border:1px solid rgba(225,6,0,.45); color:#ff5b4c;
  font-size:.68rem; font-weight:800; display:flex; align-items:center; justify-content:center; }
.giftcard__steps b{ color:#fff; }

/* the .giftin capsule is defined in partials/header.php: the landing does not load this file */ 



/* Card flow reassurance (conversion audit 10/08):
   - .pay-trust--top: the existing Stripe line, moved up above the card fields
   - .pay-refund states the guarantee plainly under the button
   - .summary__once restates the one-time payment in the recap */
.pay-trust--top{ display:block; margin:14px 0 12px; }
/* the padlock lives INSIDE the sentence, stuck to the word Secure: as a flex column next
   to a two-line text, it floated alone in the void */
.pay-trust--top svg{ display:inline-block; vertical-align:-3px; margin-right:3px; color:#34d27e; }
.pay-refund{ text-align:center; font-size:.8rem; color:var(--muted); margin-top:10px; }
.pay-refund b{ color:#2fd57b; font-weight:700; }
.summary__once{ text-align:center; font-size:.74rem; letter-spacing:.4px; color:var(--muted);
  margin-top:9px; }

/* Gift section: deliberately understated. The version with two cards and a numbered rail
   felt heavy for a simple bonus, it competed with the product page. Here a
   title, a paragraph, a reassurance line. */
.gx{ max-width:760px; margin:0 auto; text-align:center; }
.gx__h2{ font-size:clamp(1.8rem,4vw,2.8rem); color:#fff; margin:10px 0 0; line-height:1.06; }
.gx__lead{ color:var(--text); font-size:1.04rem; line-height:1.68; max-width:60ch; margin:20px auto 0; }
.gx__lead b{ color:#fff; }
/* three badges rather than a line separated by dots: it reads at a glance
   and reuses the badge vocabulary of the rest of the site */
.gx__free{ display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin:26px 0 0; }
.gx__free span{ display:inline-flex; align-items:center; gap:8px;
  font-size:.68rem; letter-spacing:1.2px; text-transform:uppercase; font-weight:700;
  color:#7ee0a0; padding:9px 15px 9px 12px; border-radius:999px;
  background:rgba(34,199,104,.09); border:1px solid rgba(34,199,104,.32); }
.gx__free svg{ width:14px; height:14px; flex:0 0 auto; fill:none; stroke:#2fd07e;
  stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
/* the tx-creepy VHS bar sweeps the whole height: on a short section it
   crosses in a few seconds and reads as a glitching line. Cut here. */
section.gxsec::after{ display:none; }
.gx__box{ display:grid; place-items:center; width:58px; height:58px; margin:0 auto 4px;
  border-radius:17px; color:#ff8078;
  background:linear-gradient(180deg, rgba(225,6,0,.18), rgba(225,6,0,.05));
  border:1px solid rgba(225,6,0,.34);
  box-shadow:0 14px 30px -18px rgba(225,6,0,.5), inset 0 1px 0 rgba(255,255,255,.08); }
.gx__box svg{ width:29px; height:29px; }