/* ════════════════════════════════════════════════════════════════
   QwikGlam — Official Download Center  ·  v2 (light · premium · mobile-app)
   Scoped under #qg-dl. Inherits global --qg-* tokens from qg-global.css.
   LIGHT palette (ivory / champagne / blush / gold / rose). Mobile-first.
   Content is ALWAYS visible; reveal is pure enhancement (never hides).
   On mobile/tablet the page hides website chrome and renders its own
   premium app bar + sticky download bar.
   ════════════════════════════════════════════════════════════════ */

#qg-dl{
  --dl-ink:    var(--qg-ink, #1A0A28);
  --dl-soft:   var(--qg-text-soft, #6A4060);
  --dl-muted:  var(--qg-text-muted, #A07090);
  --dl-line:   rgba(58,28,48,.10);
  --dl-gold:   var(--qg-gold, #D4AF6A);
  --dl-rose:   var(--qg-rose, #D4608A);
  --dl-berry:  var(--qg-berry, #A83060);
  --dl-line-gold: rgba(212,175,106,.40);
  --dl-cream:  #FFFBF6;
  --dl-blush:  #FBEFF2;
  --dl-ease:   cubic-bezier(.22,.61,.36,1);
  --dl-shadow:    0 26px 60px -30px rgba(58,28,48,.30);
  --dl-shadow-sm: 0 12px 30px -18px rgba(58,28,48,.28);
  --dl-shadow-gold: 0 16px 40px -16px rgba(212,175,106,.55);
  --dl-appbar-h: 60px;
  --dl-dock-h: 78px;
  color: var(--qg-text);
  background: var(--qg-bg);
  overflow-x: clip;
}
#qg-dl *{ box-sizing:border-box; }
#qg-dl .dl-wrap{ max-width: var(--qg-max,1240px); margin-inline:auto; padding-inline: clamp(18px,5vw,40px); }
#qg-dl section{ padding-block: clamp(46px,7vw,96px); }
#qg-dl h1,#qg-dl h2,#qg-dl h3{ font-family: var(--qg-font-serif); line-height:1.12; letter-spacing:-.01em; margin:0; color: var(--dl-ink); }
#qg-dl p{ margin:0; }
#qg-dl a{ color:inherit; text-decoration:none; }
#qg-dl img{ display:block; max-width:100%; }
#qg-dl .dl-mono{ font-family:ui-monospace,"SFMono-Regular",Menlo,monospace; }

/* eyebrow */
#qg-dl .dl-eyebrow{ font-family:ui-monospace,Menlo,monospace; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color: var(--dl-berry); display:inline-flex; align-items:center; gap:8px; }
#qg-dl .dl-eyebrow::before{ content:""; width:22px; height:1px; background: var(--dl-gold); }
#qg-dl .dl-eyebrow.center{ margin-inline:auto; }

/* buttons */
#qg-dl .dl-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family: var(--qg-font); font-weight:700; font-size:15px; line-height:1; padding:15px 26px;
  border-radius:100px; border:1px solid transparent; cursor:pointer; white-space:nowrap; text-align:center;
  transition: transform .25s var(--dl-ease), box-shadow .25s var(--dl-ease), background .2s, border-color .2s, color .2s; }
#qg-dl .dl-btn:hover{ transform: translateY(-2px); }
#qg-dl .dl-btn--gold{ background: var(--qg-grad-gold); color:#3A1F06; box-shadow: var(--dl-shadow-gold); }
#qg-dl .dl-btn--plum{ background: var(--qg-plum); color:#fff; }
#qg-dl .dl-btn--plum:hover{ background: var(--qg-velvet); }
#qg-dl .dl-btn--outline{ background:#fff; color: var(--qg-plum); border-color: var(--dl-line); }
#qg-dl .dl-btn--outline:hover{ border-color: var(--dl-line-gold); box-shadow: var(--dl-shadow-sm); }
#qg-dl .dl-btn[disabled],#qg-dl .dl-btn[aria-disabled="true"]{ opacity:.6; cursor:not-allowed; transform:none!important; box-shadow:none; }
#qg-dl .dl-btn--block{ width:100%; }

/* reveal — visible by default; only hidden while reveal is armed by JS */
#qg-dl .dl-rv{ }
#qg-dl.reveal-on .dl-rv{ opacity:0; transform: translateY(20px); transition: opacity .6s var(--dl-ease), transform .6s var(--dl-ease); }
#qg-dl.reveal-on .dl-rv.in{ opacity:1; transform:none; }

/* section heads */
#qg-dl .dl-head{ max-width:660px; }
#qg-dl .dl-head.center{ margin-inline:auto; text-align:center; }
#qg-dl .dl-head h2{ font-size: clamp(1.9rem,5.4vw,2.8rem); margin-top:14px; }
#qg-dl .dl-head p{ color: var(--dl-soft); margin-top:12px; font-size:1.02rem; line-height:1.55; }

/* phone mockup — soft premium bezel */
#qg-dl .dl-phone{ position:relative; width:100%; max-width:280px; aspect-ratio: 9 / 19.6;
  background: linear-gradient(160deg,#2A1430,#160a1f); border-radius: 40px; padding:8px;
  box-shadow: 0 40px 80px -40px rgba(58,28,48,.55), inset 0 0 0 2px rgba(212,175,106,.22); }
#qg-dl .dl-phone::after{ content:""; position:absolute; top:13px; left:50%; transform:translateX(-50%);
  width:32%; height:18px; background:#160a1f; border-radius:0 0 13px 13px; z-index:3; }
#qg-dl .dl-phone img{ width:100%; height:100%; object-fit:cover; border-radius:33px; }

/* ───────── HERO (light) ───────── */
#qg-dl .dl-hero{ position:relative; overflow:hidden;
  background:
    radial-gradient(70% 55% at 78% 0%, rgba(212,175,106,.18), transparent 60%),
    radial-gradient(80% 60% at 8% 30%, rgba(212,96,138,.12), transparent 62%),
    linear-gradient(180deg, var(--qg-bg-warm) 0%, #FCEFE6 46%, #F8E6E9 100%); }
#qg-dl .dl-hero-grid{ position:relative; display:grid; grid-template-columns:1fr; gap:30px; align-items:center;
  padding-block: clamp(34px,7vw,80px); text-align:center; }
#qg-dl .dl-official{ display:inline-flex; align-items:center; gap:9px; padding:7px 15px 7px 9px; border-radius:100px;
  background: rgba(255,255,255,.7); border:1px solid var(--dl-line-gold); font-size:12px; font-weight:600;
  color: var(--dl-berry); margin-bottom:18px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow: var(--dl-shadow-sm); }
#qg-dl .dl-official svg{ color: var(--dl-gold); }
#qg-dl .dl-hero-logo{ display:block; width:76px; height:76px; margin:0 auto 18px; }
#qg-dl .dl-hero-logo img{ width:100%; height:100%; border-radius:22px; box-shadow: 0 20px 42px -16px rgba(168,48,96,.55), 0 0 0 1px rgba(212,175,106,.4); }
#qg-dl .dl-hero h1{ font-size: clamp(2.3rem,8.4vw,3.9rem); }
#qg-dl .dl-hero h1 em{ font-style:italic; background: var(--qg-grad-luxe); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
#qg-dl .dl-lede{ margin:18px auto 0; font-size: clamp(1rem,2.6vw,1.16rem); color: var(--dl-soft); max-width:38ch; line-height:1.55; }
#qg-dl .dl-hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; justify-content:center; }
#qg-dl .dl-hero-meta{ display:flex; flex-wrap:wrap; justify-content:center; gap:0; margin-top:28px;
  border-top:1px solid var(--dl-line); padding-top:20px; }
#qg-dl .dl-hero-meta .m{ padding-inline:18px; border-right:1px solid var(--dl-line); }
#qg-dl .dl-hero-meta .m:last-child{ border-right:0; }
#qg-dl .dl-hero-meta .v{ font-family:ui-monospace,Menlo,monospace; font-size:17px; color: var(--qg-plum); font-weight:600; }
#qg-dl .dl-hero-meta .l{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--dl-muted); margin-top:3px; }

#qg-dl .dl-stage{ position:relative; display:flex; justify-content:center; align-items:center; }
#qg-dl .dl-glow{ position:absolute; width:80%; max-width:360px; aspect-ratio:1; border-radius:50%;
  background: radial-gradient(circle, rgba(212,175,106,.32), transparent 64%); filter: blur(8px); }
#qg-dl .dl-qr{ position:absolute; right:-2px; bottom:6%; z-index:5; background:#fff; color: var(--dl-ink);
  border-radius:16px; padding:13px; width:150px; box-shadow: var(--dl-shadow); text-align:center; border:1px solid var(--dl-line-gold); }
#qg-dl .dl-qr svg{ width:110px; height:110px; margin-inline:auto; display:block; }
#qg-dl .dl-qr .cap{ font-size:10.5px; color: var(--dl-soft); margin-top:8px; line-height:1.35; }
#qg-dl .dl-qr .cap b{ display:block; color: var(--qg-plum); font-size:11.5px; }
#qg-dl .dl-qr--anim{ animation: dlBob 6s ease-in-out infinite; }
@keyframes dlBob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-9px);} }

/* ───────── DOWNLOAD (light cards + store badges) ───────── */
#qg-dl .dl-download{ background: linear-gradient(180deg, var(--qg-bg) 0%, var(--dl-cream) 100%); }
#qg-dl .dl-grid{ display:grid; grid-template-columns:1fr; gap:18px; margin-top:34px; }
#qg-dl .dl-apk{ background: linear-gradient(165deg,#fff,#FFF6E9); border:1px solid var(--dl-line-gold);
  border-radius: var(--qg-radius-card,24px); padding:26px; box-shadow: var(--dl-shadow); position:relative; }
#qg-dl .dl-rec{ position:absolute; top:20px; right:20px; font-family:ui-monospace,Menlo,monospace; font-size:10px;
  letter-spacing:.12em; text-transform:uppercase; color: var(--dl-berry); background: rgba(212,175,106,.14);
  border:1px solid var(--dl-line-gold); padding:5px 11px; border-radius:100px; }
#qg-dl .dl-apk__top{ display:flex; align-items:center; gap:14px; }
#qg-dl .dl-pico{ width:54px; height:54px; border-radius:15px; display:grid; place-items:center; flex:none;
  background: var(--qg-grad-dark); color: var(--qg-champagne); box-shadow: var(--dl-shadow-sm); }
#qg-dl .dl-apk h3{ font-size:1.35rem; }
#qg-dl .dl-apk .sub{ font-size:13px; color: var(--dl-soft); margin-top:4px; }
#qg-dl .dl-spec{ margin:20px 0; border-top:1px solid var(--dl-line); }
#qg-dl .dl-spec .li{ display:flex; justify-content:space-between; gap:14px; align-items:center;
  padding:11px 0; border-bottom:1px solid var(--dl-line); font-size:13.5px; }
#qg-dl .dl-spec .k{ color: var(--dl-soft); }
#qg-dl .dl-spec .val{ font-family:ui-monospace,Menlo,monospace; font-weight:600; color: var(--qg-plum); text-align:right; }
#qg-dl .dl-rel{ font-size:13px; color: var(--dl-soft); margin:18px 0; }
#qg-dl .dl-rel b{ color: var(--qg-plum); display:block; margin-bottom:8px; }
#qg-dl .dl-rel li{ margin-bottom:6px; padding-left:18px; position:relative; }
#qg-dl .dl-rel li::before{ content:"✦"; position:absolute; left:0; color: var(--dl-gold); font-size:11px; top:2px; }

/* store badges */
#qg-dl .dl-stores{ display:grid; grid-template-columns:1fr; gap:13px; }
#qg-dl .dl-badge{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--dl-line);
  border-radius:18px; padding:16px 20px; transition: transform .26s var(--dl-ease), border-color .26s, box-shadow .26s; }
#qg-dl a.dl-badge:hover{ transform: translateY(-3px); border-color: var(--dl-line-gold); box-shadow: var(--dl-shadow-sm); }
#qg-dl .dl-badge__ic{ width:34px; height:34px; flex:none; display:grid; place-items:center; color: var(--qg-plum); }
#qg-dl .dl-badge__tx{ flex:1; line-height:1.25; }
#qg-dl .dl-badge__tx small{ display:block; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color: var(--dl-muted); }
#qg-dl .dl-badge__tx b{ font-family: var(--qg-font-serif); font-size:1.12rem; color: var(--dl-ink); font-weight:600; }
#qg-dl .dl-badge__tag{ font-size:11px; font-family:ui-monospace,Menlo,monospace; letter-spacing:.08em; text-transform:uppercase;
  color: var(--dl-muted); border:1px solid var(--dl-line); border-radius:100px; padding:5px 11px; }
#qg-dl .dl-badge__tag.live{ color:#2F8A55; border-color: rgba(47,138,85,.3); background: rgba(47,138,85,.08); }
#qg-dl .dl-badge--gold{ background: linear-gradient(165deg,#fff,#FFF6E9); border-color: var(--dl-line-gold); }
#qg-dl .dl-badge--gold .dl-badge__ic{ color: var(--dl-berry); }

/* ───────── WHY (light) ───────── */
#qg-dl .dl-why{ background: var(--qg-bg-alt); }
#qg-dl .dl-feat{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:32px; }
#qg-dl .dl-fcell{ background:#fff; border:1px solid var(--dl-line); border-radius: var(--qg-radius);
  padding:22px; transition: transform .3s var(--dl-ease), border-color .3s, box-shadow .3s; }
#qg-dl .dl-fcell:hover{ transform: translateY(-4px); border-color: var(--dl-line-gold); box-shadow: var(--dl-shadow-sm); }
#qg-dl .dl-fcell .ic{ width:44px; height:44px; border-radius:13px; display:grid; place-items:center; margin-bottom:13px;
  font-size:19px; background: linear-gradient(150deg, rgba(212,96,138,.14), rgba(212,175,106,.14));
  border:1px solid var(--dl-line-gold); color: var(--dl-berry); }
#qg-dl .dl-fcell h3{ font-size:1.1rem; }
#qg-dl .dl-fcell p{ font-size:13.5px; color: var(--dl-soft); margin-top:6px; line-height:1.5; }

/* ───────── gallery ───────── */
#qg-dl .dl-gallery{ margin-top:32px; }
#qg-dl .dl-track{ display:flex; gap:18px; justify-content:center; align-items:center; min-height: 540px; }
#qg-dl .dl-slide{ flex:none; cursor:pointer; border:0; background:none; padding:0;
  transition: transform .55s var(--dl-ease), opacity .55s var(--dl-ease), filter .55s; }
#qg-dl .dl-slide .dl-phone{ width: clamp(220px,72vw,280px); }
#qg-dl .dl-slide[data-pos="0"]{ transform: scale(1); opacity:1; z-index:3; }
#qg-dl .dl-slide[data-pos="-1"],#qg-dl .dl-slide[data-pos="1"]{ transform: scale(.8) translateY(12px); opacity:.4; filter: saturate(.8); }
#qg-dl .dl-slide[data-pos="-2"],#qg-dl .dl-slide[data-pos="2"]{ opacity:0; pointer-events:none; transform: scale(.62); }
#qg-dl .dl-slide.hide{ display:none; }
#qg-dl .dl-cap{ text-align:center; margin-top:24px; min-height:84px; }
#qg-dl .dl-cap h3{ font-size:1.4rem; }
#qg-dl .dl-cap p{ color: var(--dl-soft); margin-top:7px; max-width:44ch; margin-inline:auto; }
#qg-dl .dl-gnav{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:20px; }
#qg-dl .dl-arrow{ width:46px; height:46px; border-radius:50%; border:1px solid var(--dl-line); background:#fff;
  display:grid; place-items:center; cursor:pointer; color: var(--qg-plum); font-size:20px; transition:.25s; }
#qg-dl .dl-arrow:hover{ background: var(--qg-plum); color:#fff; border-color: var(--qg-plum); }
#qg-dl .dl-dots{ display:flex; gap:8px; }
#qg-dl .dl-gdot{ width:8px; height:8px; border-radius:50%; background: var(--dl-line); border:0; padding:0; cursor:pointer; transition:.25s; }
#qg-dl .dl-gdot.on{ background: var(--dl-gold); width:24px; border-radius:100px; }

/* lightbox */
#qg-dl .dl-lb{ position:fixed; inset:0; z-index:99999; background: rgba(36,18,30,.82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display:none; place-items:center; padding:22px; opacity:0; transition: opacity .3s; }
#qg-dl .dl-lb.open{ display:grid; opacity:1; }
#qg-dl .dl-lb .dl-phone{ width: min(300px, 80vw); }
#qg-dl .dl-lb-cap{ position:absolute; bottom:26px; left:0; right:0; text-align:center; color:#fff; padding-inline:20px; }
#qg-dl .dl-lb-cap h3{ color:#fff; }
#qg-dl .dl-lb-cap p{ color: rgba(255,255,255,.78); margin-top:6px; }
#qg-dl .dl-lb-btn{ position:absolute; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.1); color:#fff; cursor:pointer; display:grid; place-items:center; font-size:20px; }
#qg-dl .dl-lb-close{ top:20px; right:20px; }
#qg-dl .dl-lb-prev{ left:14px; top:50%; transform: translateY(-50%); }
#qg-dl .dl-lb-next{ right:14px; top:50%; transform: translateY(-50%); }

/* ───────── trust (light) ───────── */
#qg-dl .dl-trust{ background: linear-gradient(180deg, var(--dl-cream), var(--qg-bg-alt)); }
#qg-dl .dl-trust-top{ display:grid; grid-template-columns:1fr; gap:28px; align-items:center; text-align:center; }
#qg-dl .dl-seal{ width: min(230px,58vw); margin-inline:auto; filter: drop-shadow(0 20px 40px rgba(168,132,63,.30)); }
#qg-dl .dl-seal .ring{ transform-origin:120px 120px; animation: dlSpin 42s linear infinite; }
@keyframes dlSpin{ to{ transform: rotate(360deg);} }
#qg-dl .dl-checksum{ margin-top:22px; background:#fff; border:1px solid var(--dl-line-gold); border-radius: var(--qg-radius); padding:18px; text-align:left; box-shadow: var(--dl-shadow-sm); }
#qg-dl .dl-checksum .lab{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color: var(--dl-berry); display:flex; align-items:center; gap:7px; font-weight:700; }
#qg-dl .dl-checksum code{ display:block; font-family:ui-monospace,Menlo,monospace; font-size:12px; word-break:break-all; margin-top:10px;
  color: var(--qg-plum); line-height:1.7; background: var(--qg-bg-alt); border-radius:10px; padding:11px 13px; }
#qg-dl .dl-checksum .copy{ margin-top:12px; font-size:12px; background: var(--qg-plum); border:0; color:#fff; padding:8px 15px; border-radius:100px; cursor:pointer; font-family:var(--qg-font); font-weight:600; }
#qg-dl .dl-trust-grid{ display:grid; grid-template-columns:1fr; gap:13px; margin-top:38px; }
#qg-dl .dl-tcell{ background:#fff; border:1px solid var(--dl-line); border-radius: var(--qg-radius);
  padding:18px; display:flex; gap:13px; align-items:flex-start; transition: transform .28s var(--dl-ease), border-color .28s; }
#qg-dl .dl-tcell:hover{ transform: translateY(-3px); border-color: var(--dl-line-gold); }
#qg-dl .dl-tk{ width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(212,175,106,.18), rgba(212,96,138,.10)); color: var(--dl-berry); border:1px solid var(--dl-line-gold); }
#qg-dl .dl-tcell h3{ font-size:1rem; }
#qg-dl .dl-tcell p{ font-size:12.5px; color: var(--dl-soft); margin-top:4px; line-height:1.5; }

/* ───────── install steps (light) ───────── */
#qg-dl .dl-steps{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:32px; counter-reset: dlstep; }
#qg-dl .dl-step{ position:relative; background:#fff; border:1px solid var(--dl-line); border-radius: var(--qg-radius); padding:24px; counter-increment: dlstep; }
#qg-dl .dl-step::before{ content: counter(dlstep,decimal-leading-zero); position:absolute; top:20px; right:22px;
  font-family:ui-monospace,Menlo,monospace; font-size:13px; color: var(--dl-berry); letter-spacing:.08em; }
#qg-dl .dl-step .n{ width:44px; height:44px; border-radius:13px; background: var(--qg-grad-dark); color: var(--qg-champagne); display:grid; place-items:center; margin-bottom:14px; font-size:18px; }
#qg-dl .dl-step h3{ font-size:1.1rem; }
#qg-dl .dl-step p{ font-size:13.5px; color: var(--dl-soft); margin-top:7px; line-height:1.5; }
#qg-dl .dl-note{ margin-top:24px; display:flex; gap:11px; align-items:flex-start; background:#fff;
  border:1px solid var(--dl-line-gold); border-radius: var(--qg-radius); padding:16px 18px; font-size:13px; color: var(--dl-soft); }
#qg-dl .dl-note b{ color: var(--qg-plum); }
#qg-dl .dl-note svg{ flex:none; color: var(--dl-berry); }

/* ───────── faq (light) ───────── */
#qg-dl .dl-faqsec{ background: var(--qg-bg); }
#qg-dl .dl-faq{ max-width:800px; margin:32px auto 0; }
#qg-dl .dl-q{ border-bottom:1px solid var(--dl-line); }
#qg-dl .dl-q button{ width:100%; background:none; border:0; text-align:left; padding:20px 2px; display:flex;
  justify-content:space-between; gap:16px; align-items:center; cursor:pointer; font-family: var(--qg-font-serif); font-size:1.08rem; color: var(--dl-ink); }
#qg-dl .dl-q .ind{ flex:none; width:28px; height:28px; border-radius:50%; border:1px solid var(--dl-line); display:grid; place-items:center; transition:.3s; font-size:18px; color: var(--qg-plum); }
#qg-dl .dl-q.open .ind{ background: var(--qg-plum); color:#fff; transform: rotate(45deg); }
#qg-dl .dl-a{ max-height:0; overflow:hidden; transition: max-height .4s var(--dl-ease); }
#qg-dl .dl-a p{ padding:0 2px 22px; color: var(--dl-soft); font-size:14.5px; max-width:66ch; line-height:1.6; }

/* ───────── final CTA (light premium) ───────── */
#qg-dl .dl-final{ background:
  radial-gradient(60% 60% at 50% 0%, rgba(212,175,106,.20), transparent 60%),
  linear-gradient(180deg,#FCEFE6,#F8E6E9); text-align:center; }
#qg-dl .dl-final h2{ font-size: clamp(1.9rem,5.4vw,2.8rem); }
#qg-dl .dl-final h2 em{ font-style:italic; background: var(--qg-grad-luxe); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
#qg-dl .dl-final p{ color: var(--dl-soft); margin:14px auto 0; max-width:46ch; }
#qg-dl .dl-final .dl-stores{ max-width:440px; margin:30px auto 0; }
#qg-dl .dl-final-cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:24px; }

/* ───────── mobile app bar (mobile/tablet only) ───────── */
#qg-dl .dl-appbar{ display:none; }
#qg-dl .dl-dock{ display:none; }

/* toast */
#qg-dl-toast{ position:fixed; left:50%; bottom:96px; transform: translateX(-50%) translateY(160%);
  background: var(--qg-plum); color:#fff; padding:12px 20px; border-radius:100px; font-family: var(--qg-font); font-size:14px;
  z-index:100000; transition: transform .4s var(--dl-ease); box-shadow: var(--dl-shadow); display:flex; gap:8px; align-items:center; }
#qg-dl-toast.show{ transform: translateX(-50%) translateY(0); }

/* ════════ responsive scale-up ════════ */
@media (min-width:768px){
  #qg-dl .dl-grid{ grid-template-columns: 1.25fr .85fr; align-items:start; }
  #qg-dl .dl-feat{ grid-template-columns:repeat(3,1fr); }
  #qg-dl .dl-trust-grid{ grid-template-columns:repeat(2,1fr); }
  #qg-dl .dl-steps{ grid-template-columns:repeat(2,1fr); }
  #qg-dl .dl-slide[data-pos="-2"],#qg-dl .dl-slide[data-pos="2"]{ display:none; }
}
@media (min-width:1024px){
  #qg-dl .dl-hero-grid{ grid-template-columns: 1.05fr .95fr; text-align:left; }
  #qg-dl .dl-hero-logo{ margin-inline:0; }
  #qg-dl .dl-hero-copy .dl-lede{ margin-inline:0; }
  #qg-dl .dl-hero-cta,#qg-dl .dl-hero-meta{ justify-content:flex-start; }
  #qg-dl .dl-hero-meta .m:first-child{ padding-left:0; }
  #qg-dl .dl-stage{ min-height:560px; }
  #qg-dl .dl-trust-grid{ grid-template-columns:repeat(3,1fr); }
  #qg-dl .dl-trust-top{ grid-template-columns: .8fr 1.2fr; text-align:left; }
  #qg-dl .dl-trust-top .dl-seal{ margin-inline:0; }
  #qg-dl .dl-steps{ grid-template-columns:repeat(4,1fr); }
}

/* ════════ MOBILE / TABLET: app-style chrome ════════ */
@media (max-width:1023.98px){
  /* hide website chrome on the download page only */
  html body.qg-dlpage .qg-header-wrap,
  html body.qg-dlpage .qg-header,
  html body.qg-dlpage #qgFooter,
  html body.qg-dlpage #qgBottomNav,
  html body.qg-dlpage #qgConciergeBtn,
  html body.qg-dlpage .qg-footer__membership-banner,
  html body.qg-dlpage .qg-bottom-nav,
  html body.qg-dlpage .qg-concierge,
  html body.qg-dlpage .qg-footer,
  html body.qg-dlpage #qgBackToTop{ display:none !important; }
  html body.qg-dlpage{ padding-top:0 !important; padding-bottom:0 !important; background: var(--qg-bg); }

  /* own premium top app bar */
  #qg-dl .dl-appbar{ display:flex; position:sticky; top:0; z-index:9000; align-items:center; gap:12px;
    height: var(--dl-appbar-h); padding:0 16px; background: rgba(255,251,246,.82);
    -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
    border-bottom:1px solid var(--dl-line); }
  #qg-dl .dl-appbar__brand{ display:flex; align-items:center; gap:9px; }
  #qg-dl .dl-appbar__logoimg{ display:block; width:30px; height:30px; flex:none; }
  #qg-dl .dl-appbar__logoimg img{ width:100%; height:100%; border-radius:9px; }
  #qg-dl .dl-appbar__logo{ font-family: var(--qg-font-serif); font-size:1.18rem; color: var(--qg-plum); font-weight:700; line-height:1; }
  #qg-dl .dl-appbar__logo em{ font-style:italic; color: var(--dl-gold); }
  #qg-dl .dl-appbar__sp{ flex:1; }
  #qg-dl .dl-appbar__back{ width:38px; height:38px; border-radius:50%; border:1px solid var(--dl-line); background:#fff;
    display:grid; place-items:center; color: var(--qg-plum); flex:none; }
  #qg-dl .dl-appbar__cta{ display:inline-flex; align-items:center; gap:6px; background: var(--qg-grad-gold); color:#3A1F06;
    font-family: var(--qg-font); font-weight:700; font-size:13px; padding:9px 15px; border-radius:100px; box-shadow: var(--dl-shadow-gold); }

  /* sticky bottom download dock */
  #qg-dl .dl-dock{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:9000; align-items:center; gap:12px;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px)); background: rgba(255,251,246,.92);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top:1px solid var(--dl-line); box-shadow:0 -10px 30px -18px rgba(58,28,48,.4); }
  #qg-dl .dl-dock__meta{ flex:none; line-height:1.2; }
  #qg-dl .dl-dock__meta b{ font-family: var(--qg-font-serif); font-size:.95rem; color: var(--dl-ink); display:block; }
  #qg-dl .dl-dock__meta small{ font-size:10.5px; color: var(--dl-muted); }
  #qg-dl .dl-dock__btn{ flex:1; }
  body.qg-dlpage #qg-dl{ padding-bottom: var(--dl-dock-h); }
  #qg-dl .dl-hero{ scroll-margin-top: var(--dl-appbar-h); }
}
@media (min-width:1024px){
  #qg-dl .dl-appbar,#qg-dl .dl-dock{ display:none !important; }
}

@media (prefers-reduced-motion: reduce){
  #qg-dl.reveal-on .dl-rv{ opacity:1 !important; transform:none !important; transition:none !important; }
  #qg-dl .dl-qr--anim,#qg-dl .dl-seal .ring{ animation:none; }
}

/* ════════════════════════════════════════════════════════════════
   QwikGlam Download Center — platform UI (audit v3, appended)
   iOS "Add to Home Screen" sheet · in-app-browser banner · CTA states
   ════════════════════════════════════════════════════════════════ */

/* ---------- in-app browser banner (IG / FB / WhatsApp webviews) ---------- */
#qg-dl .qg-inapp,
.qg-inapp {
  position: sticky; top: 0; z-index: 60;
  display: none; align-items: center; gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-top, 0px));
  background: #1C0A2E; color: #fff;
  font-size: .86rem; line-height: 1.35;
}
.qg-inapp.show { display: flex; }
.qg-inapp__txt { flex: 1; min-width: 0; }
.qg-inapp__txt b { color: #F0D898; }
.qg-inapp__btn {
  flex: none; font: inherit; font-weight: 600; cursor: pointer;
  background: linear-gradient(135deg, #F0D898, #C9A86C 55%, #A8843F);
  color: #2a1b06; border: 0; border-radius: 999px; padding: 8px 14px; white-space: nowrap;
}
.qg-inapp__x {
  flex: none; background: transparent; border: 0; color: rgba(255,255,255,.7);
  font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 4px;
}

/* ---------- iOS Add-to-Home-Screen sheet ---------- */
.qg-a2hs {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: flex-end; justify-content: center;
  background: rgba(28, 10, 46, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .28s ease;
}
.qg-a2hs.open { display: flex; opacity: 1; }

.qg-a2hs__sheet {
  width: 100%; max-width: 480px;
  background: #FFFBF6; color: #1C0A2E;
  border-radius: 26px 26px 0 0;
  padding: 10px 22px calc(26px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -18px 60px rgba(28,10,46,.34);
  transform: translateY(100%); transition: transform .34s cubic-bezier(.22,1,.36,1);
  max-height: 92vh; max-height: 92dvh; overflow-y: auto;
}
.qg-a2hs.open .qg-a2hs__sheet { transform: translateY(0); }

.qg-a2hs__grip { width: 42px; height: 5px; border-radius: 99px; background: #e4d8ea; margin: 4px auto 16px; }

.qg-a2hs__head { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.qg-a2hs__icon { width: 56px; height: 56px; border-radius: 15px; box-shadow: 0 8px 22px rgba(28,10,46,.18); flex: none; }
.qg-a2hs__head h2 { font-size: 1.18rem; margin: 0; }
.qg-a2hs__head p  { margin: 3px 0 0; font-size: .85rem; color: #6A4060; }
.qg-a2hs__close {
  margin-left: auto; flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: #f1e9f0; color: #6A4060; font-size: 1.2rem; cursor: pointer;
}

.qg-a2hs__steps { list-style: none; margin: 20px 0 8px; padding: 0; counter-reset: a2hs; }
.qg-a2hs__steps li {
  display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: center;
  padding: 13px 0; border-bottom: 1px solid #f0e7ef;
}
.qg-a2hs__steps li:last-child { border-bottom: 0; }
.qg-a2hs__steps li::before {
  counter-increment: a2hs; content: counter(a2hs);
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: .82rem;
  color: #A8843F; background: linear-gradient(135deg, #fbf1d9, #f3e2bd); border: 1px solid #ecd9a8;
}
.qg-a2hs__steps .tx { font-size: .95rem; line-height: 1.4; }
.qg-a2hs__steps .tx b { font-weight: 600; }
.qg-a2hs__steps .glyph { color: #1C0A2E; vertical-align: -3px; margin: 0 2px; }

.qg-a2hs__hint {
  margin: 14px 0 0; font-size: .8rem; color: #6A4060; text-align: center;
  background: #f7f0f6; border-radius: 12px; padding: 10px 12px;
}

.qg-a2hs__pointer { display: grid; place-items: center; margin-top: 14px; color: #A8843F; }
.qg-a2hs__pointer svg { animation: qg-a2hs-bob 1.4s ease-in-out infinite; }
@keyframes qg-a2hs-bob { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(7px); } }

@media (min-width: 540px) {
  .qg-a2hs { align-items: center; }
  .qg-a2hs__sheet { border-radius: 26px; transform: translateY(20px) scale(.98); }
  .qg-a2hs.open .qg-a2hs__sheet { transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .qg-a2hs, .qg-a2hs__sheet { transition: none; }
  .qg-a2hs__pointer svg { animation: none; }
}

body.qg-a2hs-lock { overflow: hidden; }