/* ============================================================================================
   Local reskin for THIS deployment (shop.alienplugins.com), porting the visual design of the
   get.alienplugins.com marketing page onto the real store so the two no longer look different.
   NOT part of the canonical Alien XY product -- loaded after theme.css and store.css.

   Design note: every colour below reads the SAME custom properties the theme engine and the
   seasonal "shop themes" feature already write to /theme.css (--primary, --accent, --bg,
   --surface, --text, --muted, --border, --r-sm/md/lg, --font-heading/body). Nothing here
   introduces a second, parallel colour system, so: the admin's colour presets, a Black Friday/
   seasonal theme toggle, and the design studio's font pickers all keep working exactly as
   before -- this file only changes shape, spacing and layout, never re-implements colour.

   New component classes are namespaced "gx-*" (get-xy) so they can't collide with the existing
   generic theme classes (.hero, .card, etc.) that other templates and the promo/tag-sale system
   still rely on. The exceptions are .btn/.btn-primary/.btn-ghost and .eyebrow, which are
   deliberately overridden globally below so buttons and kickers look consistent site-wide,
   including on pages this reskin doesn't otherwise touch (cart, checkout, login, promo banner).
   ============================================================================================ */

/* ---- global: buttons, everywhere on the site ---- */
.btn{font-family:var(--font-body);font-weight:600;font-size:.95rem;border-radius:999px;padding:13px 26px;display:inline-flex;align-items:center;gap:10px;cursor:pointer;border:1px solid transparent;text-decoration:none;white-space:nowrap;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 24px -8px color-mix(in srgb,var(--primary) 55%,transparent)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn-ghost:hover{border-color:var(--muted)}
.gx-on-paper .btn-ghost{color:var(--gx-ink-on-paper);border-color:var(--gx-paper-line)}
.gx-on-paper .btn-ghost:hover{border-color:var(--gx-dim-on-paper)}
.btn svg{width:16px;height:16px;flex:none}
.btn-sm{padding:10px 18px;font-size:.88rem}

/* ---- global: eyebrow kicker (diamond marker, matches get.alienplugins.com) ---- */
.eyebrow{display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--primary);display:inline-block;transform:rotate(45deg);flex:none}
.gx-on-paper .eyebrow{color:color-mix(in srgb,var(--primary) 70%,black)}

/* ---- "on paper" light section (a deliberate fixed-light panel, independent of the dark theme,
   exactly like get.alienplugins.com's pricing/FAQ sections -- not tied to the admin's colour
   preset, since the whole point is a dark-hero/light-trust contrast regardless of preset) ---- */
.gx-on-paper{
  --gx-paper:#F2F4F8;--gx-paper-2:#E7EAF1;--gx-paper-line:#D6DBE6;
  --gx-ink-on-paper:#101725;--gx-dim-on-paper:#4C5670;
  background:var(--gx-paper);color:var(--gx-ink-on-paper);
}
.gx-on-paper h2,.gx-on-paper h3{color:var(--gx-ink-on-paper)}
.gx-on-paper .lead{color:var(--gx-dim-on-paper)}

/* ---- hero ---- */
.gx-hero{padding-top:56px;padding-bottom:70px;position:relative;overflow:hidden}
.gx-hero::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:640px;
  background:radial-gradient(60% 60% at 30% 20%, color-mix(in srgb,var(--primary) 16%,transparent), transparent 70%),
             radial-gradient(50% 50% at 80% 10%, color-mix(in srgb,var(--accent) 10%,transparent), transparent 70%);
  pointer-events:none}
.gx-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative}
@media (max-width:980px){.gx-hero-grid{grid-template-columns:1fr;gap:44px}}
.gx-hero h1{font-size:clamp(2.4rem,4.6vw,3.75rem);margin-top:18px;margin-bottom:0}
.gx-hero h1 em{font-style:normal;color:var(--primary)}
.gx-hero .lead{margin-top:20px;font-size:1.2rem;max-width:56ch}
.gx-hero-ctas{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.gx-hero-fine{margin-top:16px;font-size:.85rem;color:var(--muted);font-family:var(--font-mono,var(--font-body))}

/* ---- dashboard mockup panel (real markup, not an image, so it stays crisp at any size) ---- */
.gx-mock{background:linear-gradient(180deg,var(--surface),var(--surface-2));border:1px solid var(--border);border-radius:var(--r-md);box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 20px 40px -20px rgba(0,0,0,.6);overflow:hidden}
.gx-mock-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.02)}
.gx-mock-dot{width:9px;height:9px;border-radius:50%;background:var(--border-strong)}
.gx-mock-title{margin-left:8px;font-family:var(--font-mono,var(--font-body));font-size:12px;color:var(--muted)}
.gx-mock-body{padding:20px}
.gx-mock-row{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:12px;margin-bottom:12px}
.gx-mock-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:14px}
.gx-mock-card .k{font-family:var(--font-mono,var(--font-body));font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.gx-mock-card .v{font-family:var(--font-heading);font-size:1.5rem;font-weight:700;margin-top:6px}
.gx-mock-card .v.up{color:var(--accent)}
.gx-mock-bars{display:flex;align-items:flex-end;gap:5px;height:56px;margin-top:12px}
.gx-mock-bars i{flex:1;background:linear-gradient(180deg,var(--primary),color-mix(in srgb,var(--primary) 25%,transparent));border-radius:3px 3px 0 0}
.gx-mock-list{margin-top:12px;border-top:1px solid var(--border)}
.gx-mock-li{display:flex;justify-content:space-between;padding:10px 2px;border-bottom:1px solid var(--border);font-size:.85rem;gap:12px}
.gx-mock-li span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gx-mock-li .tag{font-family:var(--font-mono,var(--font-body));font-size:11px;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);flex:none}
.gx-mock-li .tag.warn{background:color-mix(in srgb,var(--primary) 16%,transparent);color:var(--primary)}
@media (max-width:520px){.gx-mock-row{grid-template-columns:1fr 1fr}.gx-mock-row .gx-mock-card:last-child{grid-column:span 2}}

/* ---- proof bar ---- */
.gx-proof{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:rgba(255,255,255,.015);padding-block:36px}
.gx-proof-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:left}
@media (max-width:760px){.gx-proof-row{grid-template-columns:1fr 1fr}}
.gx-proof-item .num{font-family:var(--font-heading);font-size:1.9rem;font-weight:800;color:var(--text)}
.gx-proof-item .num .accent{color:var(--primary)}
.gx-proof-item .lbl{font-size:.85rem;color:var(--muted);margin-top:2px}

/* ---- section heads ---- */
.gx-head{max-width:640px;margin-bottom:52px}
.gx-head h2{font-size:clamp(1.8rem,3vw,2.5rem);margin-top:14px}

/* ---- problem grid (3 cards) ---- */
.gx-problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
@media (max-width:820px){.gx-problem-grid{grid-template-columns:1fr}}
.gx-problem-card{background:var(--bg);padding:30px 28px}
.gx-problem-card .icon{width:34px;height:34px;color:var(--primary);margin-bottom:18px}
.gx-problem-card h3{font-size:1.12rem;margin-bottom:10px}
.gx-problem-card p{color:var(--muted);font-size:.95rem;margin:0}

/* ---- features (asymmetric grid) ---- */
.gx-feat-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;grid-template-rows:auto auto;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
@media (max-width:980px){.gx-feat-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.gx-feat-grid{grid-template-columns:1fr}}
.gx-feat-cell{background:var(--surface);padding:30px 28px;display:flex;flex-direction:column;gap:14px}
.gx-feat-cell.lg{grid-row:span 2}
@media (max-width:980px){.gx-feat-cell.lg{grid-row:auto}}
.gx-feat-cell .icon{width:28px;height:28px;color:var(--accent)}
.gx-feat-cell h3{font-size:1.08rem;margin:0}
.gx-feat-cell p{color:var(--muted);font-size:.92rem;margin:0}
.gx-feat-cell.lg h3{font-size:1.35rem}
.gx-feat-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:10px}
.gx-feat-tag{font-family:var(--font-mono,var(--font-body));font-size:11.5px;padding:5px 10px;border-radius:999px;border:1px solid var(--border);color:var(--muted)}

/* ---- licensing flow steps ---- */
.gx-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
@media (max-width:900px){.gx-flow{grid-template-columns:1fr 1fr}}
.gx-flow-step{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:22px 20px}
.gx-flow-step .n{font-family:var(--font-mono,var(--font-body));font-size:12px;color:var(--primary);letter-spacing:.08em}
.gx-flow-step h4{font-size:1rem;margin-top:10px;margin-bottom:0}
.gx-flow-step p{font-size:.85rem;color:var(--muted);margin-top:8px;margin-bottom:0}
.gx-flow-arrow{display:none;position:absolute;right:-19px;top:50%;transform:translateY(-50%);color:var(--border-strong);width:18px;height:18px}
@media (min-width:901px){.gx-flow-step:not(:last-child) .gx-flow-arrow{display:block}}

/* ---- demo / developer CTA strip ---- */
.gx-demo-strip{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:44px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.gx-demo-strip h3{font-size:1.5rem;max-width:30ch;margin:0}
.gx-demo-strip p{color:var(--muted);margin-top:10px;margin-bottom:0;max-width:44ch}

/* ---- pricing cards ---- */
.gx-price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
@media (max-width:900px){.gx-price-grid{grid-template-columns:1fr}}
.gx-price-card{background:#fff;border:1px solid var(--gx-paper-line);border-radius:var(--r-lg);padding:32px 28px;display:flex;flex-direction:column;position:relative}
.gx-price-card.hi{border-color:var(--primary);box-shadow:0 20px 40px -24px color-mix(in srgb,var(--primary) 45%,transparent)}
.gx-price-badge{position:absolute;top:-13px;left:28px;background:var(--primary);color:var(--on-primary);font-family:var(--font-mono,var(--font-body));font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.gx-price-card h3{font-size:1.15rem;color:var(--gx-ink-on-paper);margin:0}
.gx-price-card .amt{font-family:var(--font-heading);font-size:2.4rem;font-weight:800;margin-top:14px;color:var(--gx-ink-on-paper);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.gx-price-card .amt s{font-size:1.2rem;font-weight:600;color:var(--gx-dim-on-paper);opacity:.8}
.gx-price-card .amt span{font-family:var(--font-body);font-size:.95rem;font-weight:500;color:var(--gx-dim-on-paper)}
.gx-price-card .sub{color:var(--gx-dim-on-paper);font-size:.88rem;margin-top:4px}
.gx-price-list{list-style:none;padding:0;margin:22px 0 26px;display:flex;flex-direction:column;gap:11px;flex:1}
.gx-price-list li{display:flex;gap:10px;font-size:.9rem;color:#2C3547}
.gx-price-list svg{width:17px;height:17px;flex:none;color:var(--primary);margin-top:2px}
.gx-price-note{text-align:center;color:var(--gx-dim-on-paper);font-size:.85rem;margin-top:28px;font-family:var(--font-mono,var(--font-body))}
.gx-tag-sale{display:inline-block;background:var(--accent);color:var(--on-accent);font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:999px;margin-left:8px;vertical-align:middle}

/* ---- FAQ accordion (on paper) ---- */
.gx-faq-list{border-top:1px solid var(--gx-paper-line)}
.gx-faq-item{border-bottom:1px solid var(--gx-paper-line)}
.gx-faq-q{width:100%;text-align:left;background:none;border:none;padding:22px 4px;display:flex;justify-content:space-between;align-items:center;gap:20px;cursor:pointer;font-family:var(--font-body);font-weight:600;font-size:1.02rem;color:var(--gx-ink-on-paper)}
.gx-faq-q .plus{width:20px;height:20px;flex:none;color:var(--primary);transition:transform .2s ease}
.gx-faq-item[data-open="true"] .plus{transform:rotate(45deg)}
.gx-faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease}
.gx-faq-a p{padding:0 4px 22px;color:var(--gx-dim-on-paper);max-width:66ch;font-size:.95rem;margin:0}

/* ---- final CTA ---- */
.gx-final-cta{background:linear-gradient(180deg,var(--bg),color-mix(in srgb,var(--bg) 85%,black));border-top:1px solid var(--border)}
.gx-final-cta h2{font-size:clamp(1.9rem,3.4vw,2.7rem);max-width:20ch;margin:0}
.gx-final-inner{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}

.gx-reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.gx-reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.gx-reveal{opacity:1;transform:none;transition:none}.btn-primary:hover{transform:none}}

/* ---- footer link row (mirrors get.alienplugins.com's simple foot-links row) ---- */
.gx-foot-links{display:flex;gap:22px;flex-wrap:wrap;padding-block:18px;border-top:1px solid var(--border);font-size:.85rem}
.gx-foot-links a{color:var(--muted);text-decoration:none}
.gx-foot-links a:hover{color:var(--text);text-decoration:none}

/* ---- product grid cards (catalog list) restyled in the same family, dark variant ---- */
.gx-product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.gx-product-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;text-decoration:none;color:var(--text);transition:transform .15s ease,border-color .15s ease}
.gx-product-card:hover{transform:translateY(-2px);border-color:var(--border-strong);text-decoration:none}
.gx-product-card h3{font-size:1.15rem;margin:6px 0 0}
.gx-product-card .kicker{margin-bottom:0}
.gx-product-card p{color:var(--muted);font-size:.92rem;margin:8px 0 0}
.gx-product-card .amt{font-family:var(--font-heading);font-size:1.6rem;font-weight:800;margin-top:18px;display:flex;align-items:baseline;gap:8px}
.gx-product-card .amt s{font-size:1rem;font-weight:600;color:var(--muted);opacity:.8}