/* =========================================================
   busy-pricing.css
   -----------------------------------------------------------
   Styles every section on the BUSY pricing page:
   category tabs, Perpetual/Subscription + Single/Multi toggles,
   tiered pricing cards, BUSY Magic cards, Mobile / Online / Recom
   sections, and the GST notice strip.

   Uses fallback CSS variables (var(--x, fallback)) so it picks
   up real brand colors from css/style.css automatically if that
   file already defines them — otherwise falls back to a clean
   blue/black palette on its own.
========================================================= */

:root{
  --bp-primary: var(--primary, #2563eb);
  --bp-primary-dark: var(--primary-dark, #1d4ed8);
  --bp-accent: var(--accent, #7c3aed);
  --bp-ink: var(--ink, #12141a);
  --bp-muted: #6b7280;
  --bp-border: rgba(18,20,26,.09);
  --bp-card-bg: #fff;
  --bp-soft: #eef2ff;
  --bp-radius-lg: 22px;
  --bp-radius-md: 16px;
  --bp-shadow: 0 16px 40px -26px rgba(18,20,26,.35);
}

/* =========================================================
   Section shell + heading
========================================================= */
.busy-pricing-section{ padding:64px 20px 40px; }
.pricing-container{ max-width:1280px; margin:0 auto; }
.pricing-heading{
  text-align:center;
  font-size:2.1rem;
  font-weight:800;
  margin:0 0 28px;
  color:var(--bp-ink);
  letter-spacing:-.01em;
}

/* =========================================================
   Category tabs (Busy Magic / Desktop / Mobile / Online / Recom)
========================================================= */
.pricing-category-buttons{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-bottom:12px;
}
.category-btn{
  font-family:inherit;
  font-size:.95rem;
  font-weight:700;
  padding:12px 24px;
  border-radius:999px;
  border:1px solid var(--bp-border);
  background:#fff;
  color:var(--bp-ink);
  cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.category-btn:hover{ border-color:var(--bp-primary); color:var(--bp-primary); transform:translateY(-1px); }
.category-btn.active{
  background:linear-gradient(135deg, var(--bp-primary), var(--bp-accent));
  color:#fff;
  border-color:transparent;
  box-shadow:0 10px 24px -8px rgba(37,99,235,.5);
}

.magic-learnmore{ text-align:center; margin:0 0 40px; }
.magic-learnmore a{
  color:var(--bp-primary);
  font-weight:700;
  font-size:.92rem;
  text-decoration:none;
}
.magic-learnmore a:hover{ text-decoration:underline; }

/* =========================================================
   Desktop sub-options: Perpetual/Subscription + Single/Multi
   -----------------------------------------------------------
   busy-pricing.js sets style="display:block" inline on this
   element ONLY when the Desktop tab is opened (and "display:none"
   inline on every other tab, to hide it there).

   IMPORTANT: we must NOT use a blanket "display:flex !important"
   here — that would override display:none too and force this
   panel to show on every tab (Busy Magic, Online, Recom...).
   Instead we only step in when the inline style is specifically
   "block", to fix the centering bug on Desktop, and leave
   display:none completely alone everywhere else.
========================================================= */
/* New block */
#desktop-options[style*="display: flex"],
#desktop-options[style*="display:flex"],
#desktop-options[style*="display: block"],
#desktop-options[style*="display:block"]{
  display:flex !important;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:20px;
  width:fit-content;
  margin:0 auto 40px;
  padding:12px 26px;
  background:#f8faff;
  border:1px solid var(--bp-border);
  border-radius:999px;
  box-shadow:0 6px 18px -12px rgba(18,20,26,.25);
}

@media (max-width:480px){
  #desktop-options[style*="display: flex"],
  #desktop-options[style*="display:flex"],
  #desktop-options[style*="display: block"],
  #desktop-options[style*="display:block"]{
    flex-direction:column;
    border-radius:18px;
  }
}
.sub-buttons{
  display:inline-flex;
  gap:4px;
  padding:5px;
  background:#fff;
  border:1px solid var(--bp-border);
  border-radius:999px;
}
.sub-btn{
  font-family:inherit;
  font-size:.88rem;
  font-weight:700;
  padding:9px 20px;
  border-radius:999px;
  border:none;
  background:transparent;
  color:var(--bp-muted);
  cursor:pointer;
  transition:background .18s ease, color .18s ease, box-shadow .18s ease;
}
.sub-btn.active{
  background:#fff;
  color:var(--bp-ink);
  box-shadow:0 4px 12px -4px rgba(18,20,26,.25);
}
.sub-btn.inner-btn{ font-size:.76rem; padding:7px 14px; }

.user-toggle{
  display:flex;
  gap:24px;
  font-size:.9rem;
  font-weight:600;
  color:var(--bp-ink);
}
.user-toggle label{ display:flex; align-items:center; gap:7px; cursor:pointer; }
.user-toggle input[type="radio"]{ accent-color:var(--bp-primary); width:16px; height:16px; }

/* =========================================================
   Tiered pricing cards (BASIC/STANDARD/ENTERPRISE, BLUE/SAFFRON/EMERALD)
========================================================= */
.pricing-tables{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  gap:24px;
}
.pricing-card{
  background:var(--bp-card-bg);
  border:1px solid var(--bp-border);
  border-radius:var(--bp-radius-lg);
  box-shadow:var(--bp-shadow);
  padding:30px 28px 32px;
  flex:1 1 320px;
  max-width:380px;
  display:flex;
  flex-direction:column;
  position:relative;
  transition:transform .2s ease, box-shadow .2s ease;
}
.pricing-card:hover{ transform:translateY(-4px); box-shadow:0 26px 48px -22px rgba(18,20,26,.4); }

.pricing-card h2{
  margin:0 0 4px;
  font-size:1.4rem;
  font-weight:800;
  letter-spacing:.02em;
  color:var(--bp-ink);
}
/* color the tier name to match its tier */
.pricing-card h2.basic,   .pricing-card h2.blue{      color:var(--bp-primary); }
.pricing-card h2.standard,.pricing-card h2.saffron{   color:#d97706; }
.pricing-card h2.enterprise,.pricing-card h2.emerald{ color:#16a34a; }

/* "Most Popular" ribbon — added automatically to Standard/Saffron via JS's .standard class */
.pricing-card h2.standard{ position:relative; }
.pricing-card:has(h2.standard)::before{
  content:"Most Popular";
  position:absolute;
  top:-1px; right:22px;
  background:linear-gradient(135deg, var(--bp-primary), var(--bp-accent));
  color:#fff;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.03em;
  padding:6px 14px;
  border-radius:0 0 10px 10px;
  box-shadow:0 6px 14px -4px rgba(37,99,235,.5);
}
.pricing-card:has(h2.standard){ border-color:var(--bp-primary); box-shadow:0 22px 48px -20px rgba(37,99,235,.35); }

.pricing-card hr{ border:none; border-top:1px solid var(--bp-border); margin:14px 0 16px; }

.pricing-subtitle{
  margin:0 0 16px;
  font-size:.88rem;
  color:var(--bp-muted);
  line-height:1.5;
}
.pricing-price{
  font-size:1.9rem;
  font-weight:800;
  color:var(--bp-ink);
  margin-bottom:18px;
  letter-spacing:-.01em;
}

.demo-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  box-sizing:border-box;
  padding:13px 18px;
  border-radius:12px;
  background:linear-gradient(135deg, var(--bp-primary), var(--bp-primary-dark));
  color:#fff;
  font-weight:700;
  font-size:.92rem;
  text-decoration:none;
  border:none;
  cursor:pointer;
  margin-bottom:18px;
  box-shadow:0 10px 22px -10px rgba(37,99,235,.6);
  transition:transform .15s ease, box-shadow .15s ease;
}
.demo-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -10px rgba(37,99,235,.7); }

/* inner Regular/SQL toggle inside a card */
.inner-toggle{ margin-bottom:18px; justify-content:flex-start; }

.feature-group{ margin-bottom:16px; }
.feature-group h4{
  margin:0 0 8px;
  font-size:.78rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--bp-primary);
}
.feature-group ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px; }
.feature-group li{
  font-size:.85rem;
  color:#374151;
  line-height:1.45;
  padding-left:22px;
  position:relative;
}
.feature-group li::before{
  content:"";
  position:absolute;
  left:0; top:5px;
  width:14px; height:14px;
  border-radius:50%;
  background:var(--bp-soft);
  box-shadow:inset 0 0 0 1.5px var(--bp-primary);
}
.feature-group li::after{
  content:"";
  position:absolute;
  left:4px; top:7.5px;
  width:6px; height:3px;
  border-left:2px solid var(--bp-primary);
  border-bottom:2px solid var(--bp-primary);
  transform:rotate(-45deg);
}

/* =========================================================
   BUSY Magic section
========================================================= */
.busymagic-section{ padding:0 20px 60px; }
.magic-container{
  max-width:1280px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:stretch;
  gap:24px;
}
.magic-card{
  background:var(--bp-card-bg);
  border:1px solid var(--bp-border);
  border-radius:var(--bp-radius-lg);
  box-shadow:var(--bp-shadow);
  padding:30px 26px 26px;
  flex:1 1 280px;
  max-width:320px;
  display:flex;
  flex-direction:column;
  position:relative;
  transition:transform .2s ease, box-shadow .2s ease;
}
.magic-card:hover{ transform:translateY(-4px); }

.magic-card--popular{
  border-color:var(--bp-primary);
  box-shadow:0 26px 52px -20px rgba(37,99,235,.4);
  background:linear-gradient(180deg, #f7f9ff 0%, #ffffff 30%);
}
.magic-popular-badge{
  position:absolute;
  top:-13px; left:50%;
  transform:translateX(-50%);
  background:linear-gradient(135deg, var(--bp-primary), var(--bp-accent));
  color:#fff;
  font-size:.72rem;
  font-weight:800;
  padding:6px 16px;
  border-radius:999px;
  box-shadow:0 8px 18px -6px rgba(37,99,235,.55);
  white-space:nowrap;
}

.magic-tier{
  margin:6px 0 4px;
  font-size:1.3rem;
  font-weight:800;
  letter-spacing:.02em;
  color:var(--bp-ink);
}
.magic-card--start .magic-tier{ color:var(--bp-primary); }
.magic-card--smart .magic-tier{ color:#d97706; }
.magic-card--power .magic-tier{ color:#16a34a; }
.magic-card--powerplus .magic-tier{ color:#7c3aed; }

.magic-subtitle{ margin:0 0 14px; font-size:.86rem; color:var(--bp-muted); line-height:1.5; min-height:2.6em; }

.magic-price{ font-size:1.9rem; font-weight:800; color:var(--bp-ink); margin-bottom:4px; }
.magic-period{ font-size:.9rem; font-weight:600; color:var(--bp-muted); }

.magic-offer-text{
  font-size:.78rem;
  color:var(--bp-primary);
  background:var(--bp-soft);
  padding:8px 12px;
  border-radius:10px;
  margin:0 0 16px;
  line-height:1.4;
}

.magic-demo-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  box-sizing:border-box;
  padding:12px 16px;
  border-radius:12px;
  background:#fff;
  border:1.5px solid var(--bp-primary);
  color:var(--bp-primary);
  font-weight:700;
  font-size:.9rem;
  text-decoration:none;
  margin-bottom:16px;
  transition:background .18s ease, color .18s ease, transform .15s ease;
}
.magic-demo-btn:hover{ background:var(--bp-primary); color:#fff; transform:translateY(-2px); }
.magic-demo-btn--solid{
  background:linear-gradient(135deg, var(--bp-primary), var(--bp-primary-dark));
  color:#fff;
  border-color:transparent;
  box-shadow:0 10px 22px -10px rgba(37,99,235,.6);
}
.magic-demo-btn--solid:hover{ background:linear-gradient(135deg, var(--bp-primary-dark), var(--bp-primary)); color:#fff; }
.magic-demo-btn--bottom{ margin-top:6px; margin-bottom:14px; }

.magic-includes{
  font-size:.78rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--bp-ink);
  margin:4px 0 14px;
  padding-top:12px;
  border-top:1px solid var(--bp-border);
}

.magic-feature-group{ margin-bottom:14px; }
.magic-feature-group h4{
  margin:0 0 7px;
  font-size:.76rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--bp-primary);
}
.magic-feature-group ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; }
.magic-feature-group li{
  font-size:.83rem;
  color:#374151;
  line-height:1.45;
  padding-left:20px;
  position:relative;
}
.magic-feature-group li::before{
  content:"";
  position:absolute;
  left:0; top:6px;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--bp-primary);
}
.magic-feature-group--upcoming h4{ color:#a855f7; }
.magic-feature-group--upcoming li::before{ background:#a855f7; }
.magic-feature-group--upcoming li{ color:#6b21a8; opacity:.85; }

.magic-special-offer{
  margin-top:auto;
  padding-top:14px;
  border-top:1px dashed var(--bp-border);
  font-size:.78rem;
  color:var(--bp-muted);
  line-height:1.5;
}
.magic-special-label{
  display:inline-block;
  font-size:.68rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:#fff;
  background:#f59e0b;
  padding:3px 9px;
  border-radius:999px;
  margin-right:8px;
}

/* =========================================================
   Mobile section
========================================================= */
.mobile-section{ padding:20px 20px 60px; }
.mobile-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:48px;
  flex-wrap:wrap;
}
.mobile-left{ flex:1 1 320px; text-align:center; }
.mobile-screenshot{ max-width:100%; height:auto; max-height:480px; filter:drop-shadow(0 24px 40px rgba(18,20,26,.18)); }

.mobile-right{ flex:1 1 320px; display:flex; flex-direction:column; gap:20px; }
.mobile-card{
  background:var(--bp-card-bg);
  border:1px solid var(--bp-border);
  border-radius:var(--bp-radius-lg);
  box-shadow:var(--bp-shadow);
  padding:26px 28px;
}
.mobile-card h3{ margin:0 0 8px; font-size:1.15rem; color:var(--bp-ink); }
.mobile-card .price{ font-size:1.6rem; font-weight:800; color:var(--bp-primary); margin:0 0 16px; }
.mobile-card .demo-btn{ width:auto; padding:11px 24px; margin-bottom:0; }

/* =========================================================
   Online section
   -----------------------------------------------------------
   busy-pricing.js sets style="display:flex" inline on
   #online-section ONLY when this tab opens (and "display:none"
   inline on every other tab, to hide it there).

   Same rule as above: only step in when the inline style is
   specifically "flex" (the row-layout bug that squashed
   .toggle-container to the left), and leave display:none on
   every other tab completely untouched — a blanket
   "!important" here would force this whole section to stay
   visible on every tab, which is worse than the original bug.
========================================================= */
#online-section[style*="display: flex"],
#online-section[style*="display:flex"]{
  display:block !important;
}
.online-section{ padding:20px 20px 60px; }
.toggle-container{
  max-width:1100px;
  margin:0 auto 32px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  padding:14px 22px;
  background:#f8faff;
  border:1px solid var(--bp-border);
  border-radius:16px;
  box-shadow:0 6px 18px -12px rgba(18,20,26,.25);
}
.button-group{ display:inline-flex; gap:4px; padding:5px; background:#fff; border:1px solid var(--bp-border); border-radius:999px; }
.online-btn{
  font-family:inherit;
  font-size:.86rem;
  font-weight:700;
  padding:9px 22px;
  border-radius:999px;
  border:none;
  background:transparent;
  color:var(--bp-muted);
  cursor:pointer;
  transition:background .18s ease, color .18s ease, box-shadow .18s ease;
}
.online-btn.active{ background:#fff; color:var(--bp-ink); box-shadow:0 4px 12px -4px rgba(18,20,26,.25); }

.period-toggle-group{ display:flex; align-items:center; gap:10px; }
.period-label{ font-size:.86rem; font-weight:700; color:var(--bp-muted); }
.switch{ position:relative; display:inline-block; width:44px; height:24px; }
.switch input{ opacity:0; width:0; height:0; }
.slider{
  position:absolute; cursor:pointer; inset:0;
  background:#d1d5db; transition:.2s; border-radius:999px;
}
.slider::before{
  content:""; position:absolute; height:18px; width:18px; left:3px; bottom:3px;
  background:#fff; border-radius:50%; transition:.2s;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.switch input:checked + .slider{ background:var(--bp-primary); }
.switch input:checked + .slider::before{ transform:translateX(20px); }

.online-inner{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:28px;
  align-items:start;
}
.online-features-card{
  background:var(--bp-card-bg);
  border:1px solid var(--bp-border);
  border-radius:var(--bp-radius-lg);
  box-shadow:var(--bp-shadow);
  padding:32px 34px;
}
.online-features-card h3{
  margin:0 0 6px;
  font-size:1.05rem;
  font-weight:800;
  color:var(--bp-ink);
}
.online-features-card ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.online-features-card li{
  font-size:.9rem;
  color:#374151;
  line-height:1.5;
  padding-left:24px;
  position:relative;
}
.online-features-card li::before{
  content:"";
  position:absolute; left:0; top:6px;
  width:15px; height:15px;
  border-radius:50%;
  background:var(--bp-soft);
  box-shadow:inset 0 0 0 1.5px var(--bp-primary);
}
.online-features-card li::after{
  content:"";
  position:absolute; left:4.5px; top:9px;
  width:6px; height:3px;
  border-left:2px solid var(--bp-primary);
  border-bottom:2px solid var(--bp-primary);
  transform:rotate(-45deg);
}

.online-right{ position:sticky; top:24px; }
.online-price-card{
  background:linear-gradient(160deg, #eef2ff 0%, #f5f3ff 60%, #ffffff 100%);
  border:1px solid var(--bp-border);
  border-radius:var(--bp-radius-lg);
  box-shadow:var(--bp-shadow);
  padding:36px 30px;
  text-align:center;
}
.main-price{ font-size:2rem; font-weight:800; color:var(--bp-ink); margin-bottom:18px; letter-spacing:-.01em; }
.online-price-card .demo-btn{ margin-bottom:16px; }
.additional-price{ font-size:.84rem; color:var(--bp-muted); }

/* =========================================================
   Recom section
========================================================= */
.recom-section{ padding:20px 20px 60px; }
.recom-container{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:28px;
  align-items:start;
}
.recom-features .features-card{
  background:var(--bp-card-bg);
  border:1px solid var(--bp-border);
  border-radius:var(--bp-radius-lg);
  box-shadow:var(--bp-shadow);
  padding:32px 34px;
}
.features-card h3{ margin:0 0 10px; font-size:1.02rem; font-weight:800; color:var(--bp-ink); }
.features-card h3:not(:first-child){ margin-top:22px; }
.features-card ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.features-card li{
  font-size:.88rem;
  color:#374151;
  line-height:1.5;
  padding-left:24px;
  position:relative;
}
.features-card li::before{
  content:"";
  position:absolute; left:0; top:6px;
  width:15px; height:15px;
  border-radius:50%;
  background:var(--bp-soft);
  box-shadow:inset 0 0 0 1.5px var(--bp-primary);
}
.features-card li::after{
  content:"";
  position:absolute; left:4.5px; top:9px;
  width:6px; height:3px;
  border-left:2px solid var(--bp-primary);
  border-bottom:2px solid var(--bp-primary);
  transform:rotate(-45deg);
}

.recom-pricing{ display:flex; flex-direction:column; gap:16px; }
.pricing-box{
  background:var(--bp-card-bg);
  border:1px solid var(--bp-border);
  border-radius:var(--bp-radius-md);
  box-shadow:var(--bp-shadow);
  padding:22px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  transition:transform .18s ease, box-shadow .18s ease;
}
.pricing-box:hover{ transform:translateY(-3px); }
.pricing-box .plan-name{ font-size:.92rem; font-weight:700; color:var(--bp-ink); flex:1 1 180px; }
.pricing-box .price{ font-size:1.35rem; font-weight:800; color:var(--bp-primary); }
.pricing-box .demo-btn{ width:auto; padding:10px 20px; margin-bottom:0; font-size:.84rem; }

/* =========================================================
   GST notice strip
========================================================= */
.gst-notice-container{
  max-width:900px;
  margin:20px auto 60px;
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 20px;
}
.gst-divider{ flex:1; height:1px; background:var(--bp-border); }
.gst-notice{ flex:none; }
.gst-text{ font-size:.8rem; color:var(--bp-muted); font-style:italic; white-space:nowrap; }

/* =========================================================
   Responsive
========================================================= */
@media (max-width:900px){
  .online-inner, .recom-container{ grid-template-columns:1fr; }
  .online-right{ position:static; }
  .mobile-inner{ flex-direction:column; text-align:center; }
}
@media (max-width:640px){
  .busy-pricing-section{ padding:44px 16px 24px; }
  .pricing-heading{ font-size:1.6rem; }
  .category-btn{ padding:10px 16px; font-size:.86rem; }
  .pricing-card, .magic-card{ max-width:100%; flex-basis:100%; }
  .toggle-container{ flex-direction:column; align-items:flex-start; }
  .pricing-box{ flex-direction:column; align-items:flex-start; }
  .pricing-box .demo-btn{ width:100%; }
}

/* =========================================================
   PAGE TRANSITION — PRICING PAGE
   (ye page page.css load nahi karta, isliye keyframes yahin hain)
========================================================= */
@keyframes pageDepthIn{
  0%   {opacity:0; transform:perspective(1200px) translateY(42px) translateZ(-90px) scale(.92); filter:blur(8px);}
  60%  {filter:blur(0);}
  100% {opacity:1; transform:perspective(1200px) translateY(0) translateZ(0) scale(1); filter:blur(0);}
}
@keyframes pagePopCard{
  0%   {opacity:0; transform:perspective(1200px) translateY(50px) rotateX(8deg) scale(.86);}
  70%  {opacity:1; transform:perspective(1200px) translateY(-6px) rotateX(0) scale(1.015);}
  100% {opacity:1; transform:perspective(1200px) translateY(0) rotateX(0) scale(1);}
}
@keyframes pageFadeUp{
  from{opacity:0; transform:translateY(24px);}
  to  {opacity:1; transform:none;}
}

/* entrance */
.pricing-heading{animation:pageDepthIn .8s cubic-bezier(.2,.75,.25,1) .05s both;}
.pricing-category-buttons{animation:pageDepthIn .8s cubic-bezier(.2,.75,.25,1) .18s both;}
.pricing-tables{animation:pagePopCard .95s cubic-bezier(.22,1,.36,1) .32s both;}
.gst-notice-container{animation:pageFadeUp .8s ease .6s both;}

/* tab badalne par (Mobile / Online / Recom / Magic) section pop-in ho */
.busymagic-section,.mobile-section,.online-section,.recom-section{
  animation:pagePopCard .7s cubic-bezier(.22,1,.36,1) both;
}

/* exit */
.busy-pricing-section,.busymagic-section,.mobile-section,
.online-section,.recom-section,.gst-notice-container{
  transition:opacity .28s ease, transform .28s cubic-bezier(.5,0,.75,0), filter .28s ease;
}
body.page-leaving .busy-pricing-section,
body.page-leaving .busymagic-section,
body.page-leaving .mobile-section,
body.page-leaving .online-section,
body.page-leaving .recom-section,
body.page-leaving .gst-notice-container{
  opacity:0;
  transform:scale(.96) translateY(-10px);
  filter:blur(4px);
}

/* Chrome/Edge native cross-page transition */
@view-transition{navigation:auto;}
::view-transition-old(root){animation:.3s cubic-bezier(.5,0,.75,0) both vtOut;}
::view-transition-new(root){animation:.5s cubic-bezier(.2,.75,.25,1) both vtIn;}
@keyframes vtOut{to{opacity:0; transform:scale(.97);}}
@keyframes vtIn{from{opacity:0; transform:scale(1.03);}}

@media (prefers-reduced-motion: reduce){
  .pricing-heading,.pricing-category-buttons,.pricing-tables,.gst-notice-container,
  .busymagic-section,.mobile-section,.online-section,.recom-section{animation:none;}
  body.page-leaving .busy-pricing-section,body.page-leaving .busymagic-section,
  body.page-leaving .mobile-section,body.page-leaving .online-section,
  body.page-leaving .recom-section,body.page-leaving .gst-notice-container{opacity:1;transform:none;filter:none;}
  ::view-transition-old(root),::view-transition-new(root){animation:none;}
}