/* ==========================================================================
   MACRITION - Premium Subscription Frontend Styles
   Works with all 5 themes (light, dark, sepia, high-contrast, colorblind).
   Loaded after design-system.css; additive only - no overrides of core tokens.
   ========================================================================== */

/* ----- Tier-aware CSS custom properties (per-tier accent) -----
   Tier palette after the tier-enhancement revamp:
     free = muted grey (unchanged)
     pro = blue (was 'pro' - indigo/primary)
     premium = purple/gold (was 'premium' - purple)
   The variable namespaces are renamed (plus -> pro, pro -> premium)
   so existing CSS rules keep working once the selectors are updated. */
:root{
  --tier-free-hue: var(--text-muted);
  --tier-free-bg:  var(--surface-3);
  --tier-pro-hue:  #2563EB;            /* blue - Pro tier accent */
  --tier-pro-bg:   #EFF6FF;
  --tier-pro-hue-d:#1E40AF;
  --tier-pro-hue-l:#60A5FA;
  --tier-premium-hue:  #7C3AED;       /* purple - Premium tier accent (distinct from Pro blue) */
  --tier-premium-bg:   #F5F3FF;
  --tier-premium-hue-d:#5B21B6;
  --tier-premium-hue-l:#A78BFA;
  /* Gold accent used for the Premium popular-badge gradient stop. */
  --tier-premium-gold: #D4A437;
  /* Legacy aliases - keep --tier-plus-* pointing at the blue palette
     so any unmigrated rules still render correctly. */
  --tier-plus-hue: var(--tier-pro-hue);
  --tier-plus-bg:  var(--tier-pro-bg);
}
[data-theme="dark"]{
  --tier-pro-hue:  #60A5FA;
  --tier-pro-bg:   #1E3A8A;
  --tier-pro-hue-d:#2563EB;
  --tier-pro-hue-l:#93C5FD;
  --tier-premium-hue:  #A78BFA;
  --tier-premium-bg:   #2E1065;
  --tier-premium-hue-d:#5B21B6;
  --tier-premium-hue-l:#C4B5FD;
  --tier-plus-hue: var(--tier-pro-hue);
  --tier-plus-bg:  var(--tier-pro-bg);
}
[data-theme="sepia"]{
  --tier-pro-hue:  #2C5BA6;
  --tier-pro-bg:   #DCE6F5;
  --tier-pro-hue-d:#1E40AF;
  --tier-pro-hue-l:#5C7FB8;
  --tier-premium-hue:  #6B4A8E;
  --tier-premium-bg:   #EBE0F2;
  --tier-premium-hue-d:#4A2E63;
  --tier-premium-hue-l:#8E6FAA;
  --tier-plus-hue: var(--tier-pro-hue);
  --tier-plus-bg:  var(--tier-pro-bg);
}
[data-theme="high-contrast"]{
  --tier-free-hue: #000;
  --tier-free-bg:  #fff;
  --tier-pro-hue: #0000FF;
  --tier-pro-bg:  #E6E6FF;
  --tier-pro-hue-d:#0000FF;
  --tier-pro-hue-l:#0000FF;
  --tier-premium-hue:  #4B0082;
  --tier-premium-bg:   #E6D9F2;
  --tier-premium-hue-d:#4B0082;
  --tier-premium-hue-l:#6B23A0;
  --tier-plus-hue: var(--tier-pro-hue);
  --tier-plus-bg:  var(--tier-pro-bg);
}
[data-theme="colorblind"]{
  /* Avoid red/green confusion - use blue/orange/purple tier palette */
  --tier-free-hue: var(--text-muted);
  --tier-free-bg:  var(--surface-3);
  --tier-pro-hue:  var(--primary);   /* #0072B2 */
  --tier-pro-bg:   var(--primary-50);
  --tier-premium-hue:  #2563EB;
  --tier-premium-bg:   #F5F3FF;
  --tier-plus-hue: var(--tier-pro-hue);
  --tier-plus-bg:  var(--tier-pro-bg);
}

/* ==========================================================================
.premium-badge - small pill showing the user's tier
   ========================================================================== */
.premium-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 9px;
  border-radius:var(--r-pill);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  line-height:1.4;
  background:var(--tier-free-bg);
  color:var(--tier-free-hue);
  border:1px solid transparent;
  white-space:nowrap;
}
.premium-badge::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
  opacity:.85;
}
.premium-badge.badge-free{ background:var(--tier-free-bg);  color:var(--tier-free-hue); }
.premium-badge.badge-pro{
  background:var(--tier-pro-bg);
  color:var(--tier-pro-hue-d);
  border-color:var(--tier-pro-hue-l);
}
.premium-badge.badge-pro::before{ background:var(--tier-pro-hue); }
.premium-badge.badge-premium{
  background:var(--tier-premium-bg);
  color:var(--tier-premium-hue-d);
  border-color:var(--tier-premium-hue-l);
}
.premium-badge.badge-premium::before{ background:var(--tier-premium-hue); }
/* Legacy alias - older markup may still use badge-plus. */
.premium-badge.badge-plus{
  background:var(--tier-pro-bg);
  color:var(--tier-pro-hue-d);
  border-color:var(--tier-pro-hue-l);
}
.premium-badge.badge-plus::before{ background:var(--tier-pro-hue); }

/* Larger variant for headers / nav */
.premium-badge.badge-lg{ padding:4px 12px; font-size:11.5px; }
.premium-badge.badge-sm{ padding:1px 7px;  font-size:9.5px;  letter-spacing:.03em; }

/* Nav-auth area badge - sits next to user avatar */
#navAuth .premium-badge{ margin-right:4px; }

/* Badge inside a tool-card - position at top-right corner so it doesn't
   break the card's vertical content flow. */
.tool-card > .premium-badge{
  position:absolute;
  top:14px;
  right:14px;
  z-index:2;
  margin:0;
}
.tool-card > .premium-badge ~ h3,
.tool-card > .premium-badge ~ p,
.tool-card > .premium-badge ~ .arrow{
  /* Ensure content doesn't overlap with the badge */
  padding-right:0;
}

/* ==========================================================================
.premium-locked - greyed out with a lock icon overlay
   Applied by MacriPremium.applyGating() to [data-premium] elements that the
   current tier does not unlock. The content stays visible (graceful
   degradation) but is dimmed and overlaid with a lock icon on hover.
   ========================================================================== */
.premium-locked{
  position:relative;
  opacity:.55;
  filter:saturate(.65);
  pointer-events:none;
  transition:opacity .2s ease, filter .2s ease;
}
.premium-locked::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at center, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 100%);
  pointer-events:none;
  border-radius:inherit;
}
.premium-locked > *{ pointer-events:none; }
.premium-locked.premium-locked-interactive{
  /* variant: keep clickable but show lock cursor */
  pointer-events:auto;
  cursor:not-allowed;
}
/* When a premium-locked element is an <a> link to the upgrade page, use the
   pointer cursor so users know it's clickable. */
a.premium-locked,
a.premium-locked.premium-locked-interactive{
  cursor:pointer;
}
a.premium-locked:hover{
  opacity:.7;
  filter:saturate(.85);
}
.premium-locked .premium-lock-icon,
.premium-locked::before{
  content:"🔒";
  position:absolute;
  top:8px;
  right:8px;
  font-size:14px;
  opacity:.85;
  filter:grayscale(1);
  pointer-events:none;
  z-index:2;
}
[data-theme="high-contrast"] .premium-locked{ opacity:.7; outline:2px dashed var(--border-2); outline-offset:2px; }

/* (227-D) the corner lock overlay is a CARD-scale treatment: at the tier
   badge's scale (20px chip) the 14px emoji hangs past the chip's bottom
   edge and collides with the host card's rounded corner — the broken
   composition found in the 227-D visual pass. Badges keep the standard
   dot marker; the locked state stays conveyed by the dim + aria-disabled.
   The raw emoji in UI chrome also violates the no-emoji icon contract
   (FC-2 / the Icons.php bridge; the card-scale instances remain in E's
   F5 raw-glyph census queue). Same override in the layered legacy bundle
   (macrition-legacy-public.css) — keep the two copies text-identical. */
.premium-badge.premium-locked::before{
  content:"";
  position:static;
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
  opacity:.85;
  filter:none;
  font-size:inherit;
}
.s68-app-hero .premium-badge{ flex:0 0 auto; }

/* ==========================================================================
.upgrade-modal-overlay - modal for upgrade prompts (triggered by JS)
   ========================================================================== */
.upgrade-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(17,24,39,.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:1100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  animation:premiumFadeIn .2s ease;
}
@keyframes premiumFadeIn{ from{opacity:0} to{opacity:1} }
@keyframes premiumScaleIn{ from{opacity:0; transform:scale(.96) translateY(8px)} to{opacity:1; transform:scale(1) translateY(0)} }

.upgrade-modal{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  max-width:480px;
  width:100%;
  box-shadow:var(--shadow-2xl);
  overflow:hidden;
  animation:premiumScaleIn .25s cubic-bezier(.16,1,.3,1);
}
.upgrade-modal-head{
  padding:24px 28px 18px;
  text-align:center;
  background:linear-gradient(135deg, var(--tier-pro-bg), var(--tier-premium-bg));
  border-bottom:1px solid var(--border);
}
.upgrade-modal-head .modal-icon{
  width:52px;
  height:52px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--tier-pro-hue), var(--tier-premium-hue));
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 12px;
  color:#fff;
  box-shadow:0 8px 24px rgba(124,58,237,.35);
}
.upgrade-modal-head .modal-icon svg{ width:24px; height:24px; }
.upgrade-modal-head h3{
  font-size:20px;
  font-weight:700;
  color:var(--text);
  margin-bottom:6px;
}
.upgrade-modal-head p{
  font-size:14px;
  color:var(--text-3);
  margin:0;
}
.upgrade-modal-body{ padding:22px 28px; }
.upgrade-modal-body .feature-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:18px;
}
.upgrade-modal-body .feature-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14px;
  color:var(--text-2);
  line-height:1.5;
  list-style:none;
}
.upgrade-modal-body .feature-list li svg{
  width:18px;
  height:18px;
  flex-shrink:0;
  color:var(--accent);
  margin-top:1px;
}
.upgrade-modal-foot{
  padding:18px 28px 24px;
  display:flex;
  flex-direction:column;
  gap:10px;
  border-top:1px solid var(--border-light);
  background:var(--surface-2);
}
.upgrade-modal-foot .btn{ justify-content:center; }
.upgrade-modal-foot .dismiss-link{
  text-align:center;
  font-size:13px;
  color:var(--text-muted);
  background:none;
  border:0;
  cursor:pointer;
  padding:6px;
  text-decoration:underline;
}
.upgrade-modal-foot .dismiss-link:hover{ color:var(--text-2); }

/* ==========================================================================
   Pricing Page -.billing-toggle (monthly/yearly switch)
   ========================================================================== */
.billing-toggle{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--r-pill);
  padding:5px 8px 5px 16px;
  box-shadow:var(--shadow-xs);
}
.billing-toggle .toggle-label{
  font-size:14px;
  font-weight:600;
  color:var(--text-3);
  transition:color .15s ease;
}
.billing-toggle .toggle-label.active{ color:var(--text); }
.billing-toggle .toggle-track{
  position:relative;
  width:48px;
  height:26px;
  background:var(--surface-3);
  border-radius:var(--r-pill);
  cursor:pointer;
  transition:background .2s ease;
  border:1px solid var(--border-2);
  flex-shrink:0;
}
.billing-toggle .toggle-track::after{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  transition:transform .25s cubic-bezier(.16,1,.3,1), background .2s ease;
}
.billing-toggle.yearly .toggle-track{ background:var(--accent); }
.billing-toggle.yearly .toggle-track::after{ transform:translateX(22px); background:#fff; }
.billing-toggle .save-badge{
  background:var(--accent-50);
  color:var(--accent-d);
  padding:3px 9px;
  border-radius:var(--r-pill);
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  border:1px solid transparent;
}
[data-theme="high-contrast"] .billing-toggle .save-badge{
  background:#fff; color:#000; border:1px solid #000;
}
.billing-toggle:focus-within{ outline:2.5px solid var(--primary); outline-offset:2px; }

/* ==========================================================================
   Pricing Page -.pricing-card
   ========================================================================== */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  align-items:stretch;
  margin-top:48px;
  margin-bottom:56px;
}
@media(max-width:960px){
  .pricing-grid{ grid-template-columns:1fr; max-width:480px; margin-left:auto; margin-right:auto; }
}

.pricing-card{
  position:relative;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--r-lg);
  padding:32px 28px 28px;
  display:flex;
  flex-direction:column;
  box-shadow:var(--shadow-md);
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, border-color .25s ease;
  overflow:hidden;
}
.pricing-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background:var(--tier-free-hue);
  opacity:.6;
}
.pricing-card[data-tier="free"]::before{ background:var(--text-muted); }
.pricing-card[data-tier="pro"]::before{     background:linear-gradient(90deg, var(--tier-pro-hue), var(--tier-premium-hue)); }
.pricing-card[data-tier="premium"]::before{  background:linear-gradient(90deg, var(--tier-premium-hue), var(--tier-pro-hue)); }
.pricing-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-xl);
}

.pricing-card.highlighted{
  border:2px solid var(--tier-pro-hue);
  box-shadow:0 18px 40px rgba(99,102,241,.18), var(--shadow-lg);
  transform:scale(1.02);
}
.pricing-card.highlighted:hover{ transform:scale(1.02) translateY(-3px); }
@media(max-width:960px){
  .pricing-card.highlighted{ transform:none; }
  .pricing-card.highlighted:hover{ transform:translateY(-3px); }
}

.pricing-card .popular-badge{
  position:absolute;
  top:18px;
  right:18px;
  background:linear-gradient(135deg, var(--tier-pro-hue), var(--tier-premium-hue));
  color:#fff;
  padding:5px 12px;
  border-radius:var(--r-pill);
  font-size:11px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  box-shadow:0 4px 12px rgba(99,102,241,.35);
}

.pricing-card .plan-name{
  font-size:13px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:8px;
}
.pricing-card[data-tier="pro"] .plan-name{      color:var(--tier-pro-hue-d); }
.pricing-card[data-tier="premium"] .plan-name{ color:var(--tier-premium-hue-d); }

.pricing-card .plan-tagline{
  font-size:14px;
  color:var(--text-3);
  margin-bottom:20px;
  line-height:1.4;
}

.pricing-card .plan-price{
  display:flex;
  align-items:baseline;
  gap:4px;
  margin-bottom:4px;
}
.pricing-card .plan-price .currency{
  font-size:22px;
  font-weight:700;
  color:var(--text-2);
}
.pricing-card .plan-price .amount{
  font-size:46px;
  font-weight:800;
  color:var(--text);
  letter-spacing:-.03em;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.pricing-card .plan-price .period{
  font-size:15px;
  color:var(--text-muted);
  font-weight:500;
  margin-left:4px;
}

.pricing-card .plan-billed-note{
  font-size:12.5px;
  color:var(--text-muted);
  margin-bottom:22px;
  min-height:18px;
}
.pricing-card .plan-billed-note .save-pill{
  background:var(--accent-50);
  color:var(--accent-d);
  padding:2px 8px;
  border-radius:var(--r-pill);
  font-weight:700;
  font-size:11px;
  letter-spacing:.04em;
}
[data-theme="high-contrast"] .pricing-card .plan-billed-note .save-pill{
  background:#fff; color:#000; border:1px solid #000;
}

.pricing-card .plan-cta{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:26px;
}
.pricing-card .plan-cta .btn{
  justify-content:center;
  padding:12px 18px;
  font-size:14.5px;
}
.pricing-card .trial-note{
  font-size:12px;
  color:var(--text-muted);
  text-align:center;
  margin-top:4px;
}

.pricing-card .plan-features{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:11px;
  flex:1;
}
.pricing-card .plan-features li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14px;
  color:var(--text-2);
  line-height:1.45;
}
.pricing-card .plan-features li svg{
  width:16px;
  height:16px;
  flex-shrink:0;
  color:var(--accent);
  margin-top:2px;
}
.pricing-card .plan-features li.inherited{
  font-size:13.5px;
  color:var(--text-muted);
  font-style:italic;
}
.pricing-card .plan-features li.inherited svg{ color:var(--text-muted); opacity:.7; }
.pricing-card .plan-features li.disabled{
  color:var(--text-muted);
  text-decoration:line-through;
  text-decoration-color:var(--border-2);
}
.pricing-card .plan-features li.disabled svg{ color:var(--border-2); }

/* "Current Plan" indicator on the card */
.pricing-card .current-plan-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  justify-content:center;
  padding:12px 18px;
  border-radius:var(--r-sm);
  background:var(--accent-50);
  color:var(--accent-d);
  font-size:14.5px;
  font-weight:700;
  border:1.5px solid var(--accent);
}
.pricing-card .current-plan-pill svg{ width:16px; height:16px; }
[data-theme="high-contrast"] .pricing-card .current-plan-pill{
  background:#fff; color:#000; border:2px solid #000;
}

/* ==========================================================================
   Pricing page hero / FAQ / trust-banner
   ========================================================================== */
.pricing-hero{
  position:relative;
  padding:64px 0 32px;
  text-align:center;
  overflow:hidden;
}
.pricing-hero .hero-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 20% 0%, var(--primary-50) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 30%, var(--tier-premium-bg) 0%, transparent 50%);
  opacity:.85;
  pointer-events:none;
}
[data-theme="dark"] .pricing-hero .hero-bg{ opacity:.5; }
.pricing-hero .container{ position:relative; z-index:1; }
.pricing-hero h1{
  font-size:clamp(34px, 5vw, 52px);
  font-weight:800;
  letter-spacing:-.03em;
  margin-bottom:14px;
  background:linear-gradient(135deg, var(--text) 0%, var(--primary-d) 70%, var(--tier-premium-hue) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
[data-theme="high-contrast"] .pricing-hero h1{
  -webkit-text-fill-color:var(--text);
  color:var(--text);
  background:none;
}
.pricing-hero .lead{
  font-size:18px;
  color:var(--text-3);
  max-width:560px;
  margin:0 auto 28px;
}
.pricing-hero .trust-row{
  display:flex;
  justify-content:center;
  gap:28px;
  flex-wrap:wrap;
  margin-top:32px;
  font-size:13px;
  color:var(--text-muted);
}
.pricing-hero .trust-row span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.pricing-hero .trust-row svg{ width:14px; height:14px; color:var(--accent); }

.pricing-faq{
  max-width:760px;
  margin:0 auto;
}
.pricing-faq .faq-list h2{ text-align:center; margin-bottom:32px; }

.pricing-cta-band{
  background:linear-gradient(135deg, var(--primary), var(--tier-premium-hue));
  color:#fff;
  border-radius:var(--r-lg);
  padding:48px 32px;
  text-align:center;
  margin:64px auto;
  max-width:920px;
  box-shadow:0 24px 48px rgba(99,102,241,.25);
}
.pricing-cta-band h2{ color:#fff; margin-bottom:10px; font-size:28px; }
.pricing-cta-band p{ color:rgba(255,255,255,.9); margin-bottom:24px; font-size:16px; }
.pricing-cta-band .btn{
  background:#fff;
  color:var(--primary-d);
  font-weight:700;
  padding:14px 28px;
  font-size:15px;
}
.pricing-cta-band .btn:hover{ background:var(--surface-2); transform:translateY(-2px); }

/* Comparison strip - small "all plans include" row */
.pricing-includes-strip{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:22px 28px;
  margin:0 auto 56px;
  max-width:920px;
  box-shadow:var(--shadow-xs);
}
.pricing-includes-strip h3{
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:14px;
  text-align:center;
}
.pricing-includes-strip ul{
  display:flex;
  flex-wrap:wrap;
  gap:14px 28px;
  justify-content:center;
  list-style:none;
  padding:0;
  margin:0;
}
.pricing-includes-strip li{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:var(--text-2);
}
.pricing-includes-strip li svg{ width:15px; height:15px; color:var(--accent); }

/* ==========================================================================
   Tier-scoped visibility - element only shows for users of a given tier
   The body receives data-tier="free|pro|premium" via MacriPremium.applyGating().
   Until JS runs,.premium-premium-only /.premium-pro-only are hidden by
   default to avoid flashing paid content to anonymous users.
   ========================================================================== */
.premium-pro-only,
.premium-premium-only{ display:none !important; }
body[data-tier="pro"]      .premium-pro-only,
body[data-tier="premium"]  .premium-pro-only{ display:revert !important; }
body[data-tier="premium"]  .premium-premium-only{ display:revert !important; }
/* Legacy alias - older markup using premium-plus-only is shown to pro/premium. */
body[data-tier="pro"]      .premium-plus-only,
body[data-tier="premium"]  .premium-plus-only{ display:revert !important; }

/* Conversely: hide "free-only" prompts once user upgrades */
body[data-tier="pro"]      .premium-free-only,
body[data-tier="premium"]  .premium-free-only{ display:none !important; }

/* ==========================================================================
   Pricing-card "current" state - visually mark the user's current plan
   ========================================================================== */
.pricing-card.is-current{
  border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-50), var(--shadow-lg);
}
.pricing-card.is-current::before{
  background:var(--accent);
}
.pricing-card.is-current .plan-name::after{
  content:" · current";
  font-size:11px;
  font-weight:600;
  color:var(--accent-d);
  text-transform:uppercase;
  letter-spacing:.06em;
}

/* ==========================================================================
   Mobile responsive tweaks for pricing page
   ========================================================================== */
@media(max-width:640px){
  .pricing-card{ padding:26px 22px 22px; }
  .pricing-card .plan-price .amount{ font-size:38px; }
  .pricing-card .popular-badge{ top:14px; right:14px; padding:4px 10px; font-size:10px; }
  .pricing-hero{ padding:48px 0 24px; }
  .pricing-cta-band{ padding:36px 22px; margin:40px 16px; }
  .pricing-cta-band h2{ font-size:22px; }
  .billing-toggle{ padding:4px 6px 4px 14px; gap:8px; }
  .billing-toggle .toggle-label{ font-size:13px; }
}

/* Honor reduced motion */
@media (prefers-reduced-motion: reduce){
  .pricing-card,
  .upgrade-modal,
  .upgrade-modal-overlay{ animation:none !important; transition:none !important; }
}

/* Print: hide pricing CTAs and upgrade modals */
@media print{
  .upgrade-modal-overlay,
  .pricing-cta-band,
  .billing-toggle{ display:none !important; }
  .pricing-card{ box-shadow:none !important; border:1px solid #ccc !important; }
}

/* ==========================================================================
   Pricing Page - money-back guarantee badge
   ========================================================================== */
.pricing-guarantee-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--surface);
  border:1.5px solid var(--accent);
  border-radius:var(--r-pill);
  padding:8px 18px 8px 12px;
  margin:24px auto 0;
  box-shadow:0 6px 18px rgba(16,185,129,.18), var(--shadow-sm);
  font-size:14px;
  color:var(--text-2);
  font-weight:600;
  max-width:fit-content;
}
.pricing-guarantee-badge .gb-icon{
  width:30px;height:30px;flex-shrink:0;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-d));
  color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 10px rgba(16,185,129,.35)
}
.pricing-guarantee-badge .gb-icon svg{width:16px;height:16px}
.pricing-guarantee-badge .gb-text{display:flex;flex-direction:column;line-height:1.25}
.pricing-guarantee-badge .gb-text strong{font-size:14px;font-weight:800;color:var(--text);letter-spacing:-.005em}
.pricing-guarantee-badge .gb-text span{font-size:12px;color:var(--text-muted);font-weight:500}
[data-theme="high-contrast"] .pricing-guarantee-badge{
  background:#fff;border:2px solid #000;color:#000
}

/* ==========================================================================
   Pricing Page - feature comparison table
   ========================================================================== */
.pricing-comparison{
  max-width:980px;
  margin:0 auto 64px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.pricing-comparison h2{
  text-align:center;
  font-size:clamp(22px,3vw,28px);
  font-weight:800;
  letter-spacing:-.02em;
  margin:0;
  padding:32px 24px 8px;
}
.pricing-comparison .pc-subtitle{
  text-align:center;font-size:14px;color:var(--text-3);
  margin:0 0 18px;padding:0 24px
}
.pricing-comparison .pc-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pricing-comparison table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  min-width:560px
}
.pricing-comparison th,
.pricing-comparison td{
  padding:13px 18px;
  text-align:left;
  vertical-align:middle;
  border-bottom:1px solid var(--border-light);
}
.pricing-comparison thead th{
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-muted);
  background:var(--surface-2);
  border-bottom:2px solid var(--border);
  position:sticky;top:0;z-index:1
}
.pricing-comparison thead th.pc-plan{
  font-size:14px;font-weight:800;letter-spacing:-.005em;text-transform:none;
  color:var(--text)
}
.pricing-comparison thead th.pc-plan .pc-plan-price{
  display:block;font-size:12px;font-weight:600;color:var(--text-muted);margin-top:2px
}
.pricing-comparison thead th.pc-plan-free{ color:var(--text-muted) }
.pricing-comparison thead th.pc-plan-pro{ color:var(--tier-pro-hue-d) }
.pricing-comparison thead th.pc-plan-premium{ color:var(--tier-premium-hue-d) }
/* Legacy aliases for older admin / comparison-table markup. */
.pricing-comparison thead th.pc-plan-plus{ color:var(--tier-pro-hue-d) }
.pricing-comparison tbody tr:hover{ background:var(--surface-2) }
.pricing-comparison .pc-feature{
  font-weight:600;color:var(--text-2)
}
.pricing-comparison .pc-feature .pc-hint{
  display:block;font-size:12px;color:var(--text-muted);font-weight:400;margin-top:2px;line-height:1.4
}
.pricing-comparison .pc-val{
  text-align:center;
  font-weight:600;
  color:var(--text);
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}
.pricing-comparison .pc-val.no{ color:var(--text-muted);font-weight:500 }
.pricing-comparison .pc-val.yes{ color:var(--accent-d) }
.pricing-comparison .pc-val svg{ width:16px;height:16px;display:inline-block;vertical-align:middle }
.pricing-comparison tbody tr.pc-section-head th{
  background:var(--surface-3);
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-muted);
  padding:8px 18px
}
.pricing-comparison tbody tr:last-child td{ border-bottom:0 }
@media(max-width:640px){
  .pricing-comparison{ margin:0 12px 40px }
  .pricing-comparison h2{ padding:24px 16px 6px;font-size:22px }
  .pricing-comparison th,.pricing-comparison td{ padding:11px 12px;font-size:13px }
}

/* ==========================================================================
   Pricing Page - testimonials / social proof
   ========================================================================== */
.pricing-testimonials{
  max-width:1080px;
  margin:0 auto 64px;
  padding:0 4px
}
.pricing-testimonials h2{
  text-align:center;
  font-size:clamp(22px,3vw,28px);
  font-weight:800;
  letter-spacing:-.02em;
  margin:0 0 12px
}
.pricing-testimonials .pt-subtitle{
  text-align:center;font-size:14px;color:var(--text-3);
  margin:0 0 32px
}
.pricing-testimonials .pt-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}
@media(max-width:880px){ .pricing-testimonials .pt-grid{ grid-template-columns:1fr;max-width:480px;margin:0 auto } }
.pricing-testimonials .pt-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:22px 22px 20px;
  display:flex;flex-direction:column;gap:14px;
  box-shadow:var(--shadow-xs);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease
}
.pricing-testimonials .pt-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:var(--primary-l)
}
.pricing-testimonials .pt-stars{
  display:flex;gap:3px;color:var(--amber);
  font-size:16px;letter-spacing:1px
}
.pricing-testimonials .pt-quote{
  font-size:14.5px;color:var(--text-2);line-height:1.55;
  margin:0;flex:1
}
.pricing-testimonials .pt-quote::before{ content:"\201C";color:var(--primary-text);font-weight:800;font-size:22px;line-height:0;vertical-align:-4px;margin-right:3px }
.pricing-testimonials .pt-quote::after{ content:"\201D";color:var(--primary-text);font-weight:800;font-size:22px;line-height:0;vertical-align:-4px;margin-left:3px }
.pricing-testimonials .pt-author{
  display:flex;align-items:center;gap:10px;
  border-top:1px solid var(--border-light);padding-top:14px
}
.pricing-testimonials .pt-avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--tier-premium-hue));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;flex-shrink:0
}
.pricing-testimonials .pt-author-info{ display:flex;flex-direction:column;gap:1px;line-height:1.3 }
.pricing-testimonials .pt-author-info .pt-name{ font-size:13.5px;font-weight:700;color:var(--text) }
.pricing-testimonials .pt-author-info .pt-meta{ font-size:12px;color:var(--text-muted) }
.pricing-testimonials .pt-tier-badge{
  margin-left:auto;
  display:inline-flex;align-items:center;
  padding:2px 8px;border-radius:var(--r-pill);
  font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:var(--tier-pro-bg);color:var(--tier-pro-hue-d);
  flex-shrink:0
}
.pricing-testimonials .pt-tier-badge.premium{ background:var(--tier-premium-bg);color:var(--tier-premium-hue-d) }
/* Legacy alias: pt-tier-badge.pro used to mean the top tier; older markup
   keeps using.pro for the purple badge, so make it match premium. */
.pricing-testimonials .pt-tier-badge.pro{ background:var(--tier-premium-bg);color:var(--tier-premium-hue-d) }

/* Trust strip beneath testimonials (logo-style row) */
.pricing-trust-strip{
  max-width:920px;margin:0 auto 56px;
  display:flex;justify-content:center;align-items:center;gap:32px;
  flex-wrap:wrap;padding:20px 16px;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-md)
}
.pricing-trust-strip .pt-stat{ display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center }
.pricing-trust-strip .pt-stat .num{ font-size:24px;font-weight:800;color:var(--text);line-height:1;letter-spacing:-.015em }
.pricing-trust-strip .pt-stat .lbl{ font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em }
@media(max-width:560px){ .pricing-trust-strip{ gap:18px } .pricing-trust-strip .pt-stat .num{ font-size:20px } }

/* Pro tier visibility. duplicate rules removed. The canonical rules
   at line 705-709 use `display:revert !important` which preserves the
   native element display type (inline, inline-block, etc.). The
   `display:block !important` rules that used to live here overrode
   that and broke inline badges. */
.badge-pro { background: var(--primary-50); color: var(--primary-d); }