/* =====================================================================
   SpotMe  |  Pro showcase + pro.html interactive demo
   Loaded after style.css. Rounded charcoal tiles, 1px borders, one accent.
   ===================================================================== */

.btn-pro-link{ background:transparent; border:1px solid var(--gold); color:var(--gold-deep); }
.btn-pro-link:hover{ background:var(--gold); color:#000; border-color:var(--gold); }

/* ---------- Featured muscle-map panel ---------- */
.pro-hero-card{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:0; align-items:stretch;
  margin-top:40px; padding:0; background:var(--bg-card); overflow:hidden;
  border:1px solid var(--line-strong); border-radius:var(--r-lg);
}
.pro-hero-card > *{ padding:36px; }
.pro-hero-card > * + *{ border-left:1px solid var(--line-strong); }
.phc-copy .pf-icon{ font-size:1.25rem; display:block; margin-bottom:12px; filter:grayscale(1) contrast(1.15); }
.phc-copy h3{ font-size:clamp(2rem, 4vw, 3rem); margin-bottom:14px; line-height:0.9; }
.phc-copy p{ color:var(--chalk-dim); line-height:1.6; max-width:50ch; margin:0; }
.phc-points{ list-style:none; padding:0; margin:22px 0 0; border-top:1px solid var(--line-strong); }
.phc-points li{ display:flex; gap:12px; align-items:baseline; color:var(--chalk-dim); font-size:0.9rem; padding:11px 0; border-bottom:1px solid var(--line); }
.phc-points li::before{ content:''; width:6px; height:6px; background:var(--gold); flex-shrink:0; transform:translateY(-1px); }
.phc-figure{ text-align:center; display:flex; flex-direction:column; justify-content:center; background:var(--bg-card); }
.phc-bodies{ display:grid; grid-template-columns:1fr 1fr; gap:6px; max-width:340px; margin:0 auto; width:100%; }
.phc-bodies .body-svg{ width:100%; height:auto; display:block; max-height:340px; }
.phc-bodies .body-svg .bm-base ellipse, .phc-bodies .body-svg .bm-base path{ fill:#131316; stroke:#34343a; stroke-width:1; }
.phc-bodies .body-svg .m{ fill:#1b1b1f; stroke:#000; stroke-width:0.8; transition:fill .5s ease; }
.phc-bodies .body-svg .bm-detail{ fill:none; stroke:#000; stroke-width:0.7; opacity:0.55; }
.phc-mode{ display:inline-block; align-self:center; margin-top:12px; padding:5px 10px; border-radius:var(--r-sm); font-family:var(--mono); font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:#000; background:var(--gold); }
.phc-legend{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 14px; margin-top:12px; }
.phc-legend span{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:0.64rem; color:var(--chalk-dim); letter-spacing:0.04em; }
.phc-legend i{ width:10px; height:10px; border-radius:var(--r-md); display:inline-block; }
@media (max-width:860px){ .pro-hero-card{ grid-template-columns:1fr; } .pro-hero-card > *{ padding:24px; } .pro-hero-card > * + *{ border-left:none; border-top:1px solid var(--line-strong); } }

.pro-intro-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px; }

/* ---------- pro.html demo window ---------- */
.pd-section{ padding:56px 0 24px; scroll-margin-top:90px; }
.pd-head{ max-width:760px; margin:0 0 32px; text-align:left; }
.pd-head h2{ font-size:clamp(2.4rem, 5.5vw, 4.4rem); line-height:0.86; letter-spacing:-0.035em; margin:14px 0; }
.pd-head p{ color:var(--chalk-dim); margin:0; line-height:1.65; max-width:62ch; }
.pd-head p b{ color:var(--gold-deep); font-weight:600; }
.pd-window{ position:relative; background:var(--bg-card); border:1px solid var(--line-strong); border-radius:var(--r-lg); overflow:hidden; }
.pd-topbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:11px 16px; background:var(--bg-card); border-bottom:1px solid var(--line-strong); }
.pd-title{ font-family:var(--mono); text-transform:uppercase; font-size:0.7rem; letter-spacing:0.1em; color:var(--chalk-dim); margin-left:10px; }
.pd-badge{ font-family:var(--mono); font-size:0.62rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--gold-deep); border:1px solid var(--gold-deep); padding:3px 8px; border-radius:var(--r-sm); white-space:nowrap; }
.pd-actions{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.pd-pulse{ animation:pdPing 2.2s steps(1) infinite; }
@keyframes pdPing{ 0%{ outline:2px solid var(--gold); outline-offset:0; } 50%{ outline:2px solid transparent; outline-offset:6px; } 100%{ outline:2px solid var(--gold); outline-offset:0; } }
@media (prefers-reduced-motion: reduce){ .pd-pulse{ animation:none; } }
.pd-tabs{ display:flex; gap:0; padding:0; border-bottom:1px solid var(--line-strong); overflow-x:auto; }
.pd-tab{ background:none; border:none; border-right:1px solid var(--line); color:var(--chalk-dim); font-family:var(--mono); text-transform:uppercase; font-size:0.7rem; font-weight:500; letter-spacing:0.09em; padding:13px 18px; white-space:nowrap; transition:background .12s, color .12s; }
.pd-tab:hover{ color:var(--chalk); background:var(--bg-hover); }
.pd-tab.active{ background:var(--gold); color:#000; }
.pd-hint{ padding:12px 18px; background:var(--bg-elevated); border-bottom:1px solid var(--line-strong); font-size:0.86rem; color:var(--chalk-dim); line-height:1.5; }
.pd-hint b{ color:var(--gold-deep); font-weight:600; }
.pd-body{ position:relative; padding:20px; background:var(--bg); }
/* Inactive panels stay laid out at zero height so charts inside are measured at their real width. */
.pd-panel{ position:absolute; left:20px; right:20px; top:20px; height:0; overflow:hidden; visibility:hidden; opacity:0; pointer-events:none; }
.pd-panel.active{ position:relative; left:auto; right:auto; top:auto; height:auto; overflow:visible; visibility:visible; opacity:1; pointer-events:auto; animation:pdFade .25s ease-out; }
@keyframes pdFade{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:none; } }
.pd-toast{ position:fixed; left:50%; bottom:24px; z-index:120; transform:translate(-50%, 20px); opacity:0; pointer-events:none; max-width:min(92vw, 560px); text-align:left; padding:13px 18px; border-radius:var(--r-md); background:var(--gold); color:#000; font-family:var(--mono); font-size:0.78rem; font-weight:500; line-height:1.45; transition:opacity .2s, transform .2s; }
.pd-toast.show{ opacity:1; transform:translate(-50%, 0); }
.pd-flash{ animation:pdFlash 1s steps(2); }
@keyframes pdFlash{ 0%{ outline:2px solid var(--gold); outline-offset:2px; } 100%{ outline:2px solid transparent; outline-offset:2px; } }

/* ---------- pro.html extras + pricing ---------- */
.pro-extras{ margin:48px 0; }
.pro-extras-head{ text-align:left; margin-bottom:28px; padding-bottom:18px; border-bottom:1px solid var(--line-strong); }
.pro-extras-head h2{ font-size:clamp(2rem, 4.5vw, 3.4rem); margin-top:12px; }
.pro-price-card{ border-color:var(--gold) !important; background:var(--bg-card); }
.pro-perks{ list-style:none; padding:0; margin:0 0 24px; text-align:left; border-top:1px solid var(--line-strong); }
.pro-perks li{ display:flex; gap:12px; align-items:baseline; color:var(--chalk-dim); font-size:0.88rem; padding:10px 0; border-bottom:1px solid var(--line); }
.pro-perks li::before{ content:'+'; color:var(--gold-deep); font-family:var(--mono); font-weight:700; }
.pro-login-note{ font-family:var(--mono); font-size:0.68rem; color:var(--grey); margin:10px 0 0; }

@media (max-width:640px){
  .pd-head h2{ font-size:2.2rem; }
  .pd-actions{ margin-left:0; width:100%; }
  .pd-body{ padding:14px; }
  .pd-panel{ left:14px; right:14px; top:14px; }
}

.phc-legend i{ border-radius:3px; }
.pd-tabs{ padding:8px 10px 0; gap:4px; }
.pd-tab{ border:none; border-radius:var(--r-md) var(--r-md) 0 0; }
.pd-tab.active{ background:rgba(234,198,55,0.14); color:var(--gold-deep); box-shadow:inset 0 -2px 0 var(--gold); }
.pd-toast{ border-radius:var(--r-md); }
.pro-perks li::before{ content:'\2713'; }

/* ===== v4: aurora layer ===== */
.pro-hero-card{ background:radial-gradient(560px circle at 100% 0, rgba(234,198,55,0.16), transparent 62%), radial-gradient(420px circle at 0 100%, rgba(52,211,153,0.10), transparent 62%), var(--bg-card); border-color:rgba(234,198,55,0.28); }
.phc-figure{ background:radial-gradient(260px circle at 50% 40%, rgba(45,199,216,0.10), transparent 70%), rgba(0,0,0,0.35); }
.phc-mode{ background:var(--g-gold); box-shadow:0 0 16px rgba(234,198,55,0.4); }
.btn-pro-link:hover{ background:var(--g-gold); box-shadow:0 0 22px rgba(234,198,55,0.4); }
.pd-window{ background:var(--glass), var(--bg-card); border-color:rgba(34,34,34,0.1); box-shadow:0 40px 90px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(234,198,55,0.06), 0 0 80px -30px rgba(234,198,55,0.25); }
.pd-pulse{ animation:pdPulse 2.4s ease-in-out infinite; outline:none; }
@keyframes pdPulse{ 0%,100%{ box-shadow:0 10px 28px -8px rgba(234,198,55,.5), 0 0 0 0 rgba(234,198,55,.5); } 50%{ box-shadow:0 10px 28px -8px rgba(234,198,55,.5), 0 0 0 10px rgba(234,198,55,0); } }
.pd-tab.active{ background:rgba(234,198,55,0.12); box-shadow:inset 0 -2px 0 var(--gold-hi); color:var(--gold-hi); }
.pd-toast{ background:var(--g-gold); box-shadow:0 18px 44px -10px rgba(0,0,0,.7), 0 0 30px rgba(234,198,55,.4); }
.pd-head h2 em{ font-style:italic; }
.pro-price-card{ background:radial-gradient(460px circle at 50% 0, rgba(234,198,55,0.14), transparent 62%), var(--glass), var(--bg-card); border-color:rgba(234,198,55,0.45) !important; box-shadow:var(--glow); }
.pro-perks li::before{ color:var(--emerald); }

/* monthly / yearly switch */
.pro-billing{ display:flex; width:fit-content; gap:4px; padding:4px; margin:0 auto 16px; border:1px solid var(--line-strong); border-radius:999px; background:var(--bg-soft, transparent); }
.pro-billing button{ border:0; background:none; font:inherit; font-size:0.88rem; font-weight:600; color:var(--chalk-dim); padding:8px 16px; border-radius:999px; cursor:pointer; }
.pro-billing button em{ font-style:normal; font-size:0.72rem; margin-left:4px; color:var(--turf); }
.pro-billing button[aria-checked="true"]{ color:#fff; background:var(--g-brand, linear-gradient(90deg, #7C4DFF, #1FA6A0)); }
.pro-billing button[aria-checked="true"] em{ color:#fff; }
.pro-bill-note{ color:var(--chalk-dim); font-size:0.82rem; margin:0 0 6px; }