/* ============================================================
   GURU Mobile Discovery — product page accent layer.
   A deliberate palette shift (purple / coral / amber) layered
   on top of the navy/gold parent shell. Load AFTER main.css.
   ============================================================ */

.theme-gmd {
  --accent: var(--gmd-purple);
}

/* Hero — product gradient anchored in navy */
.gmd-hero { position: relative; overflow: hidden; background: var(--navy-deep); color: #d6def0; }
.gmd-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(900px 520px at 82% -8%, rgba(91,71,229,.42), transparent 58%),
    radial-gradient(680px 440px at 12% 112%, rgba(255,107,107,.22), transparent 55%),
    radial-gradient(520px 380px at 60% 120%, rgba(255,179,71,.18), transparent 60%);
  pointer-events: none;
}
.gmd-hero .container { position: relative; padding-block: clamp(4.5rem, 11vw, 8.5rem); }
.gmd-hero h1 { color: #fff; }
.gmd-hero .lead { color: #c2cce0; }

/* Gradient text + pills */
.gmd-grad {
  background: linear-gradient(100deg, var(--gmd-purple), var(--gmd-coral) 60%, var(--gmd-amber));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.theme-gmd .eyebrow { color: var(--gmd-amber); }
.theme-gmd .eyebrow::before { background: var(--gmd-amber); }

/* Buttons re-skinned for the product */
.btn--gmd { background: linear-gradient(100deg, var(--gmd-purple), #7b66ff); color:#fff; box-shadow: 0 10px 28px rgba(91,71,229,.40); }
.btn--gmd:hover { box-shadow: 0 14px 36px rgba(91,71,229,.52); filter: saturate(1.08); }

/* Phone mock / app icon showcase */
.gmd-mark { width: clamp(180px, 30vw, 280px); border-radius: 28px; box-shadow: 0 30px 80px rgba(91,71,229,.35); }

/* Feature cards with colored top accents */
.theme-gmd .card .icon { background: linear-gradient(145deg, var(--gmd-purple), #7b66ff); color:#fff; }
.gmd-feature { position: relative; }
.gmd-feature::before { content:""; position:absolute; top:0; left:0; height:3px; width:48px; border-radius:3px; background: var(--accent); }
.gmd-feature:nth-child(3n+1) { --accent: var(--gmd-purple); }
.gmd-feature:nth-child(3n+2) { --accent: var(--gmd-coral); }
.gmd-feature:nth-child(3n+3) { --accent: var(--gmd-amber); }

/* Pricing card */
.price-card {
  background: #fff; border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3rem); max-width: 480px; margin-inline:auto;
  box-shadow: var(--shadow-md); position: relative; overflow: hidden;
}
.price-card::before { content:""; position:absolute; top:0; left:0; right:0; height:5px; background: linear-gradient(100deg, var(--gmd-purple), var(--gmd-coral), var(--gmd-amber)); }
.price-card .price { font-family: var(--font-display); font-size: clamp(3rem,6vw,4rem); color: var(--navy); line-height:1; }
.price-card .price .per { font-family: var(--font-body); font-size: var(--fs-md); color: var(--mist); font-weight:500; }
.price-card .price-feats { display:grid; gap:.85rem; margin: 1.75rem 0; text-align:left; }
.price-card .price-feats li { display:flex; gap:.7rem; align-items:flex-start; font-size: var(--fs-sm); color: var(--slate); }
.price-card .price-feats li svg { flex:none; width:20px; height:20px; color: var(--gmd-purple); margin-top:2px; }
.price-card .btn { width: 100%; }
.price-note { font-size: var(--fs-xs); color: var(--mist); margin-top: 1rem; }

/* Checkout status message */
.checkout-msg { margin-top: 1rem; font-size: var(--fs-sm); min-height: 1.2em; }
.checkout-msg.error { color: var(--gmd-coral); }
.btn[aria-busy="true"] { opacity:.7; pointer-events:none; }