
/* === Pricing Section (scoped) === */
.pricing-section{ display:block; width:100%; padding:8px 0 18px; }
.pricing-section[hidden]{ display:none; }
.pricing-section .headline,
.pricing-section .sub,
.pricing-section .billing-toggle{ text-align:center; margin-left:auto; margin-right:auto; }

.pricing-grid{ width:min(1120px,96vw); margin:10px auto 0; display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  opacity:0; transform:translateY(8px); filter:blur(2px) }
.pricing-grid.show{ opacity:1; transform:none; filter:none; transition:opacity 500ms ease, transform 500ms ease, filter 500ms ease }
.card{ background:#fff; border:1px solid #e7e7e7; border-radius:18px; box-shadow:0 6px 22px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.05);
  padding:22px; display:flex; flex-direction:column; min-height:420px; position:relative; opacity:0; transform:translateX(-20px) translateY(4px) scale(.98) }
.pricing-grid.show .card{ animation:slideIn 720ms cubic-bezier(.2,.8,.2,1) forwards; animation-delay:calc(var(--i)*120ms) }
@keyframes slideIn{ from{opacity:0; transform:translateX(-20px) translateY(4px) scale(.98)} to{opacity:1; transform:none} }

.badge{ position:absolute; top:14px; right:14px; background:#111; color:#fff; border-radius:999px; font-size:12px; font-weight:700; padding:6px 10px; box-shadow:0 3px 10px rgba(0,0,0,.12) }
.price{ display:flex; align-items:baseline; gap:6px; margin:6px 0 14px 0; white-space:nowrap; flex-wrap:wrap; }
.price .amount{ font-size:34px; font-weight:900; display:inline-flex; align-items:baseline; line-height:1; color:var(--accent,#ffc893);
  -webkit-text-stroke:1px #111; text-stroke:1px #111; paint-order:stroke fill; }
.price .per{ color:#4b4b4b; font-weight:600; line-height:1; }
.price .save{ flex-basis:100%; display:flex; justify-content:center; align-items:center; margin-top:8px; font-size:12px; font-weight:800;
  background:#111; color:#fff; border-radius:999px; padding:3px 8px; text-align:center; }
.price .save[hidden]{ display:none; }

.title{ font-size:14px; letter-spacing:.6px; text-transform:uppercase; color:#111; font-weight:400; margin:4px 0 8px 0 }
.desc{ color:#333; margin:0 0 12px 0 }
ul{ list-style:none; padding:0; margin:0 0 18px 0 }
li{ display:flex; gap:8px; align-items:flex-start; margin:8px 0; color:#1a1a1a }
.tick{ width:8px; height:8px; border-radius:50%; background:var(--accent,#ffc893); border:0; display:inline-block; flex:0 0 8px; margin-top:6px; }
.card ul li > .hl{ font-weight:800; color:#111; }
.divider{ height:1px; border:0; background:linear-gradient(90deg,transparent, #d6d6d6 15%, #d6d6d6 85%, transparent); margin:10px 0 14px 0 }
.card ul li+li{ border-top:1px solid #e7e7e7; padding-top:8px; margin-top:8px }

.cta{ margin-top:auto }
.cta .button{ width:100%; appearance:none; border:0; border-radius:12px; padding:12px 14px; cursor:pointer }
.button-primary{ background:var(--accent,#ffc893); color:#111; box-shadow:0 6px 22px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.05) }
.button-dark{ background:#111; color:#fff; box-shadow:0 6px 22px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.05) }

/* Billing toggle */
.billing-toggle{ display:flex; justify-content:center; align-items:center; margin-top:6px; }
.billing-toggle .segment{ background:#fff; border:1px solid #d6d6d6; border-radius:999px; padding:4px; box-shadow:0 6px 22px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.05); display:inline-flex; gap:4px; }
.billing-toggle .seg-btn{ appearance:none; border:1px solid transparent; background:#fff; padding:8px 14px; border-radius:999px; cursor:pointer; color:#111; font-size:17px; font-weight:400; }
.billing-toggle .seg-btn.is-active{ background:var(--accent,#ffc893); color:#111; border:1px solid #111; }
.billing-toggle .seg-btn .pct{ margin-left:0; font-size:inherit; font-weight:inherit; opacity:.9; }
.billing-toggle .seg-btn:focus-visible{ outline:2px solid #111; outline-offset:2px; }

/* Text swap */
.anim-swap{ display:inline-block; will-change: transform, opacity; }
.swap-out{ animation: swapOut 180ms ease forwards; }
.swap-in{ animation: swapIn 260ms ease forwards; animation-delay: var(--d, 0ms); }
@keyframes swapOut{ to{ opacity:0; transform: translateY(-6px) } }
@keyframes swapIn{ from{ opacity:0; transform: translateY(6px) } to{ opacity:1; transform:none } }

/* Sequential reveal */
.seq{ opacity:0; transform: translateY(8px); filter: blur(2px) }
.seq.show{ opacity:1; transform:none; filter:none; transition: opacity 420ms ease, transform 420ms ease, filter 420ms ease }

/* Yearly accent (teal) */
body.billing-yearly{ --accent:#aee5dc; }

/* Enterprise keep one line */
[aria-labelledby="plan-enterprise"] .price{ flex-wrap: nowrap; }

/* Responsive */
@media (max-width: 980px){ .pricing-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 560px){ .pricing-grid{grid-template-columns:1fr} .card{min-height:unset} }

/* Language dropdown overlay above all cards */
header,.site-header{ position:relative; z-index:1000; }
.lang-menu,.language-menu,.language-dropdown,[data-lang-menu]{ position:relative; z-index:2000 !important; }

.pricing-section .button{ font-weight:400; }
