/* ═══════════════════════════════════════════════════════════════
   product.css — shared styles for Downie, Permute, Invoice Rex,
   and CMPlayer product pages.
   Each page provides its own accent/grad tokens plus unique rules.
═══════════════════════════════════════════════════════════════ */

/* ─── Base tokens (shared values, prefix varies) ────────────── */
:is(.d4,.p4,.ir,.cm){
  --ink:       #0b0b12;
  --surface:   #111119;
  --card:      #17171f;
  --card-hi:   #1e1e28;
  --rim:       rgba(255,255,255,.07);
  --rim-hi:    rgba(255,255,255,.14);
  --text:      #ededf4;
  --muted:     #787892;
  --faint:     #363650;
  --r:         14px;
  --r-sm:      9px;
  --r-pill:    999px;
  --ff-head:   'Outfit', sans-serif;
  --ff-body:   'DM Sans', sans-serif;
  font-family: var(--ff-body);
  color: var(--text);
  background: var(--ink);
  line-height: 1.6;
}

/* ─── Reset ─────────────────────────────────────────────────── */
.d4 *,.d4 *::before,.d4 *::after,
.p4 *,.p4 *::before,.p4 *::after,
.ir *,.ir *::before,.ir *::after,
.cm *,.cm *::before,.cm *::after{box-sizing:border-box}

.d4 a,.p4 a,.ir a,.cm a{color:inherit;text-decoration:none}
.d4 img,.p4 img,.ir img,.cm img{display:block;max-width:100%}
.d4 h1,.d4 h2,.d4 h3,.d4 h4,
.p4 h1,.p4 h2,.p4 h3,.p4 h4,
.ir h1,.ir h2,.ir h3,.ir h4,
.cm h1,.cm h2,.cm h3,.cm h4{font-family:var(--ff-head);line-height:1.1;margin:0}

/* code — d4 and ir only (kept here to avoid duplication in both) */
.d4 code,.ir code{background:rgba(255,255,255,.08);border:1px solid var(--rim);border-radius:5px;padding:1px 6px;font-size:.9em}

/* ─── Layout helpers ────────────────────────────────────────── */
/* wrap: d4, ir, cm use 48px padding; p4 uses 32px (stays per-page) */
.d4-wrap,.ir-wrap,.cm-wrap{max-width:1120px;margin:0 auto;padding:0 48px}
.d4-sec,.ir-sec,.cm-sec{padding:96px 0;position:relative;overflow:hidden}
.d4-sec--surf,.ir-sec--surf,.cm-sec--surf{background:var(--surface)}
.d4-sec--mid{background:var(--card)}
@media(max-width:700px){
  .d4-sec,.ir-sec,.cm-sec{padding:60px 0}
  .d4-wrap,.ir-wrap,.cm-wrap{padding:0 20px}
}

/* ─── Section headings ──────────────────────────────────────── */
.d4-eye,.p4-eye,.ir-eye,.cm-eye{display:block;font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.d4-h2,.p4-h2,.ir-h2,.cm-h2{font-size:clamp(26px,4vw,42px);font-weight:800;color:var(--text);margin-bottom:14px}
.d4-h2 .g,.p4-h2 .g,.ir-h2 .g,.cm-h2 .g{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
/* sub: d4, ir, cm = 540px max-width; p4 = 520px (stays per-page) */
.d4-sub,.ir-sub,.cm-sub{font-size:16px;color:var(--muted);line-height:1.7;max-width:540px}
.d4-cx,.p4-cx,.ir-cx,.cm-cx{text-align:center}
.d4-cx .d4-sub,.p4-cx .p4-sub,.ir-cx .ir-sub,.cm-cx .cm-sub{margin:0 auto}

/* ─── Divider ───────────────────────────────────────────────── */
.d4-rule,.p4-rule,.ir-rule,.cm-rule{height:1px;background:var(--grad);opacity:.18;border:none;margin:0}

/* ─── Shared keyframes ──────────────────────────────────────── */
@keyframes pp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes pp-modalin{from{opacity:0;transform:scale(.96) translateY(12px)}}

/* ════════════════════════════════════════════════════════
   HERO — shared base (d4, p4, ir; cm has unique hero)
════════════════════════════════════════════════════════ */
.d4-hero,.p4-hero,.ir-hero{display:flex;align-items:center;padding:108px 0 80px;background:var(--ink);position:relative;overflow:hidden;}

.d4-hero__in,.p4-hero__in,.ir-hero__in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;
  max-width:1100px;margin:0 auto;padding:0 48px;width:100%;
}

/* d4 + p4 break at 860px */
@media(max-width:860px){
  .d4-hero__in,.p4-hero__in{grid-template-columns:1fr;gap:32px;padding:0 28px;text-align:center}
  .d4-hero__right,.p4-hero__acts{align-items:center}
  .d4-hero__meta,.p4-hero__meta{justify-content:center}
}
/* ir breaks at 900px */
@media(max-width:900px){
  .ir-hero__in{grid-template-columns:1fr;gap:36px;padding:0 28px;text-align:center}
  .ir-hero__right{align-items:center}
  .ir-hero__meta{justify-content:center}
}
@media(max-width:480px){.d4-hero__in,.p4-hero__in,.ir-hero__in{padding:0 20px}}

.d4-hero__left,.p4-hero__left,.ir-hero__left{display:flex;align-items:center;gap:22px}
@media(max-width:860px){.d4-hero__left,.p4-hero__left{flex-direction:column;align-items:center}}
@media(max-width:900px){.ir-hero__left{flex-direction:column;align-items:center}}

/* icon: animation shared; box-shadow stays per-page */
.d4-hero__icon,.p4-hero__icon,.ir-hero__icon{width:72px;height:72px;flex-shrink:0;border-radius:17px;animation:pp-float 5s ease-in-out infinite;}

.d4-hero__title,.p4-hero__title,.ir-hero__title{
  font-family:var(--ff-head);font-size:clamp(36px,5vw,58px);font-weight:800;
  line-height:1.05;margin-bottom:10px;
  background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.d4-hero__sub,.p4-hero__sub,.ir-hero__sub{font-size:15px;color:var(--muted);line-height:1.7;max-width:440px;margin:0}
@media(max-width:860px){.d4-hero__sub,.p4-hero__sub{margin:0 auto}}
@media(max-width:900px){.ir-hero__sub{margin:0 auto}}

/* hero right: d4+p4 share same values */
.d4-hero__right,.p4-hero__right{display:flex;flex-direction:column;align-items:stretch;gap:9px;min-width:230px}

/* meta pills */
.d4-hero__meta,.p4-hero__meta,.ir-hero__meta{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap}
@media(max-width:860px){.d4-hero__meta,.p4-hero__meta{justify-content:center;margin-top:16px}}
.d4-mpill,.p4-mpill,.ir-mpill{
  display:flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:var(--r-pill);
  border:1px solid var(--rim);background:rgba(255,255,255,.03);
  font-size:12px;color:var(--muted);
}
.d4-mpill strong,.p4-mpill strong,.ir-mpill strong{color:var(--text)}

/* ════════════════════════════════════════════════════════
   BUTTONS — d4 and p4 (ir and cm don't use these)
════════════════════════════════════════════════════════ */
.d4-btn-dl,.p4-btn-dl{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:14px 26px;border-radius:var(--r-pill);
  background:var(--accent);color:#fff;
  font-family:var(--ff-head);font-size:15px;font-weight:700;
  transition:transform .2s,box-shadow .2s,background .2s;cursor:pointer;
}
.d4-btn-dl:hover,.p4-btn-dl:hover{background:var(--accent-hi);transform:translateY(-2px);color:#fff}
.d4-btn-dl small,.p4-btn-dl small{font-family:var(--ff-body);font-size:11px;font-weight:400;opacity:.7}

.d4-btn-buy,.p4-btn-buy{
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:13px 26px;border-radius:var(--r-pill);
  border:1px solid var(--rim-hi);background:rgba(255,255,255,.04);
  color:var(--text);font-family:var(--ff-head);font-size:14px;font-weight:700;
  transition:background .2s,border-color .2s,transform .2s;cursor:pointer;
}
.d4-btn-buy:hover,.p4-btn-buy:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22);color:#fff;transform:translateY(-1px)}
.d4-btn-buy svg,.p4-btn-buy svg{opacity:.55;flex-shrink:0}

.d4-btn-ghost,.p4-btn-ghost{
  display:flex;align-items:center;justify-content:center;gap:5px;
  padding:10px 18px;border-radius:var(--r-pill);
  color:var(--muted);font-size:13px;font-weight:500;transition:color .2s;
}
.d4-btn-ghost:hover,.p4-btn-ghost:hover{color:var(--text)}
.d4-btn-ghost svg,.p4-btn-ghost svg{flex-shrink:0;opacity:.5}

/* ════════════════════════════════════════════════════════
   BUY NOW MODAL — d4 and p4
════════════════════════════════════════════════════════ */
.d4-overlay,.p4-overlay{
  display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(5,5,14,.82);backdrop-filter:blur(6px);
  align-items:center;justify-content:center;padding:24px;
}
.d4-overlay.open,.p4-overlay.open{display:flex}
.d4-modal,.p4-modal{
  background:var(--surface);border:1px solid var(--rim-hi);
  border-radius:20px;width:100%;max-width:860px;max-height:90vh;
  overflow-y:auto;position:relative;
  box-shadow:0 32px 80px rgba(0,0,0,.7);
  animation:pp-modalin .28s cubic-bezier(.16,1,.3,1);
}
.d4-modal__head,.p4-modal__head{display:flex;justify-content:space-between;align-items:center;padding:24px 28px 0;}
.d4-modal__title,.p4-modal__title{font-family:var(--ff-head);font-size:22px;font-weight:800;color:var(--text)}
.d4-modal__close,.p4-modal__close{
  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.06);
  border:1px solid var(--rim);display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--muted);font-size:20px;line-height:1;
  transition:background .2s,color .2s;flex-shrink:0;
}
.d4-modal__close:hover,.p4-modal__close:hover{background:rgba(255,255,255,.12);color:var(--text)}
.d4-modal__body,.p4-modal__body{padding:20px 28px 28px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:580px){.d4-modal__body,.p4-modal__body{grid-template-columns:1fr}}
.d4-modal__fn,.p4-modal__fn{padding:0 28px 22px;font-size:11.5px;color:var(--muted);text-align:center}
.d4-modal__fn a,.p4-modal__fn a{color:var(--accent)}

/* ════════════════════════════════════════════════════════
   PLAN CARDS — d4 and p4
════════════════════════════════════════════════════════ */
.d4-plans,.p4-plans{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:52px}
.d4-plans+.d4-plans,.p4-plans+.p4-plans{margin-top:14px}
.d4-plan,.p4-plan{
  background:var(--card);border:1px solid var(--rim);border-radius:var(--r);
  padding:28px 24px;flex:0 0 calc(33% - 10px);min-width:230px;
  display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden;
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.d4-plan:hover,.p4-plan:hover{transform:translateY(-6px);box-shadow:0 24px 52px rgba(0,0,0,.42);border-color:var(--rim-hi)}
.d4-plan__name,.p4-plan__name{font-family:var(--ff-head);font-size:18px;font-weight:700;color:var(--text)}
.d4-plan__price,.p4-plan__price{font-family:var(--ff-head);font-size:30px;font-weight:800;color:var(--text);display:flex;align-items:baseline;gap:3px;line-height:1;margin:4px 0}
.d4-plan__price sup,.p4-plan__price sup{font-size:17px;font-weight:600}
.d4-plan__price del,.p4-plan__price del{font-size:17px;color:var(--muted);margin-right:6px}
.d4-plan__price small,.p4-plan__price small{font-size:13px;font-weight:400;color:var(--muted)}
.d4-plan__desc,.p4-plan__desc{font-size:13px;color:var(--muted);line-height:1.65;flex:1;margin:4px 0 10px}
.d4-plan__cta,.p4-plan__cta{
  display:block;text-align:center;padding:11px 18px;border-radius:var(--r-pill);
  font-family:var(--ff-head);font-size:13.5px;font-weight:700;
  transition:background .2s,transform .18s,box-shadow .2s;cursor:pointer;margin-top:auto;
}
.d4-plan__cta--out,.p4-plan__cta--out{border:1px solid var(--rim-hi);color:var(--text);background:transparent}
.d4-plan__cta--out:hover,.p4-plan__cta--out:hover{background:rgba(255,255,255,.06);color:#fff;transform:translateY(-1px)}
.d4-plan__note,.p4-plan__note{font-size:11px;color:var(--muted);text-align:center;margin-top:4px}
.d4-plan__note a,.p4-plan__note a{color:var(--accent)}
.d4-fn,.p4-fn{text-align:center;font-size:12px;color:var(--muted);margin-top:26px}
.d4-fn a,.p4-fn a{color:var(--accent)}

/* ════════════════════════════════════════════════════════
   FEATURE CARDS — all four pages
════════════════════════════════════════════════════════ */
.d4-feats,.p4-feats,.ir-feats,.cm-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:52px}
@media(max-width:960px){.d4-feats,.p4-feats,.ir-feats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.cm-feats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.d4-feats,.p4-feats,.ir-feats{grid-template-columns:1fr}}
@media(max-width:540px){.cm-feats{grid-template-columns:1fr}}

.d4-feat,.p4-feat,.ir-feat,.cm-feat{
  background:var(--card);border:1px solid var(--rim);border-radius:var(--r);
  padding:26px 22px;position:relative;overflow:hidden;
  transition:background .25s,border-color .25s,transform .25s,box-shadow .25s;
}
.d4-feat::before,.p4-feat::before,.ir-feat::before,.cm-feat::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--grad);opacity:0;transition:opacity .3s;
}
.d4-feat:hover,.p4-feat:hover,.ir-feat:hover,.cm-feat:hover{background:var(--card-hi);border-color:var(--rim-hi);transform:translateY(-5px);box-shadow:0 20px 44px rgba(0,0,0,.38)}
.d4-feat:hover::before,.p4-feat:hover::before,.ir-feat:hover::before,.cm-feat:hover::before{opacity:1}
.d4-feat__ico,.p4-feat__ico,.ir-feat__ico,.cm-feat__ico{font-size:26px;margin-bottom:14px;display:block}
.d4-feat__h,.p4-feat__h,.ir-feat__h,.cm-feat__h{font-family:var(--ff-head);font-size:16px;font-weight:700;color:var(--text);margin:0 0 8px}
.d4-feat__p,.p4-feat__p,.ir-feat__p,.cm-feat__p{font-size:13.5px;color:var(--muted);line-height:1.7;margin:0}

/* ════════════════════════════════════════════════════════
   SCREENSHOTS — d4, p4, ir
════════════════════════════════════════════════════════ */
.d4-shots__scroll,.p4-shots__scroll,.ir-shots__scroll{
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;padding-bottom:12px;cursor:grab;
}
/* margin-top:48px for d4+p4 stays per-page; ir has none */
.d4-shots__scroll:active,.p4-shots__scroll:active,.ir-shots__scroll:active{cursor:grabbing}
.d4-shots__scroll::-webkit-scrollbar,.p4-shots__scroll::-webkit-scrollbar,.ir-shots__scroll::-webkit-scrollbar{height:3px}
.d4-shots__scroll::-webkit-scrollbar-track,.p4-shots__scroll::-webkit-scrollbar-track,.ir-shots__scroll::-webkit-scrollbar-track{background:var(--faint);border-radius:3px}
.d4-shots__scroll::-webkit-scrollbar-thumb,.p4-shots__scroll::-webkit-scrollbar-thumb,.ir-shots__scroll::-webkit-scrollbar-thumb{background:var(--muted);border-radius:3px}

.d4-shot,.p4-shot,.ir-shot{
  flex:0 0 72%;scroll-snap-align:center;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--rim);box-shadow:0 20px 60px rgba(0,0,0,.55);
  position:relative;transition:transform .3s;
}
@media(max-width:700px){.d4-shot,.p4-shot,.ir-shot{flex:0 0 88%}}
.d4-shot:hover,.p4-shot:hover,.ir-shot:hover{transform:scale(1.012)}
.d4-shot::after,.p4-shot::after,.ir-shot::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad);z-index:2}
.d4-shot img,.p4-shot img,.ir-shot img{width:100%;display:block}

/* shot caption — d4 and p4 only (stays per-page since shared rule is identical) */
/* shots__wrap: d4+ir use 48px, p4 uses 32px — stays per-page */
.d4-shots__wrap,.p4-shots__wrap,.ir-shots__wrap{position:relative}
.d4-shots__wrap::before,.d4-shots__wrap::after,
.p4-shots__wrap::before,.p4-shots__wrap::after,
.ir-shots__wrap::before,.ir-shots__wrap::after{
  content:'';position:absolute;top:0;bottom:12px;width:60px;z-index:3;pointer-events:none;
}
.d4-shots__wrap::before,.p4-shots__wrap::before,.ir-shots__wrap::before{left:0;background:linear-gradient(to right,var(--surface),transparent)}
.d4-shots__wrap::after,.p4-shots__wrap::after,.ir-shots__wrap::after{right:0;background:linear-gradient(to left,var(--surface),transparent)}
@media(max-width:640px){.d4-shots__wrap,.p4-shots__wrap,.ir-shots__wrap{padding:0 20px}}

/* ════════════════════════════════════════════════════════
   FAQ — d4, p4, ir
════════════════════════════════════════════════════════ */
.d4-faq,.p4-faq,.ir-faq{margin-top:44px;border-top:1px solid var(--rim)}
details.d4-q,details.p4-q,details.ir-q{border-bottom:1px solid var(--rim)}
details.d4-q summary,details.p4-q summary,details.ir-q summary{
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px 2px;cursor:pointer;
  font-family:var(--ff-head);font-size:15px;font-weight:700;color:var(--text);
  user-select:none;transition:color .2s;
}
details.d4-q summary:hover,details.p4-q summary:hover,details.ir-q summary:hover{color:#fff}
details.d4-q summary::-webkit-details-marker,details.p4-q summary::-webkit-details-marker,details.ir-q summary::-webkit-details-marker{display:none}
details.d4-q summary::after,details.p4-q summary::after,details.ir-q summary::after{
  content:'+';font-size:20px;color:var(--muted);flex-shrink:0;line-height:1;
  transition:transform .22s,color .2s;
}
details.d4-q[open] summary::after,details.p4-q[open] summary::after,details.ir-q[open] summary::after{transform:rotate(45deg);color:var(--accent)}
.d4-qa,.p4-qa,.ir-qa{padding:0 2px 18px;font-size:14.5px;color:var(--muted);line-height:1.75}
.d4-qa a,.p4-qa a,.ir-qa a{color:var(--accent)}
.d4-qa ul,.p4-qa ul,.ir-qa ul{padding-left:18px;margin:8px 0 0}
.d4-qa li,.p4-qa li,.ir-qa li{margin-bottom:5px}