/* Pricing has its own component styles; checkout hooks stay in pricing.js. */
body:has(.pricing-page) { background: #09090b; font-family: Inter, system-ui, sans-serif; }
body:has(.pricing-page) .bg-mesh, body:has(.pricing-page) .bg-grid { display: none; }
body:has(.pricing-page) .site-header, body:has(.pricing-page) .site-footer { opacity: 1; pointer-events: auto; }
.pricing-page {
  --pricing-ink: #f5f7ff;
  --pricing-muted: #a3a3ad;
  --pricing-line: #ffffff12;
  position: relative;
  isolation: isolate;
  color: var(--pricing-ink);
  font-weight: 600;
  padding: 145px 0 48px;
  background: radial-gradient(ellipse 560px 460px at 12% 25%, #00c8ff0a, transparent 80%), radial-gradient(ellipse 560px 460px at 90% 25%, #ff2d5509, transparent 80%), radial-gradient(ellipse 720px 480px at 50% 0, #3159fa26, transparent 85%), #09090b;
  overflow: clip;
}
.pricing-page > .wrap { width: min(1480px, calc(100% - 64px)); }
.pricing-intro { text-align: center; margin: 0 auto; }
.pricing-eyebrow { font-size: 11px; line-height: 1.5; font-weight: 700; letter-spacing: .14em; color: #648cff; text-transform: uppercase; margin: 0 0 18px; }
.pricing-intro h1 { font-family: 'Dela Gothic One', sans-serif; font-size: clamp(34px, 4.1vw, 58px); line-height: 1.2; font-weight: 400; letter-spacing: -.045em; margin: 0; }
.pricing-title-accent { color: var(--blue); background: linear-gradient(100deg, var(--blue) 5%, color-mix(in srgb, var(--blue) 72%, #fff) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.pricing-lead-wrap { display: grid; justify-items: center; gap: 16px; max-width: min(780px, 100%); margin: 24px auto 0; }
.pricing-lead-note { margin: 0; max-width: min(820px, 100%); color: #cfd5e2; font-size: 15px; line-height: 1.55; font-weight: 700; }
.pricing-lead { max-width: 780px; margin: 0; font-size: 17px; color: var(--pricing-muted); line-height: 1.65; }
.pricing-billing { margin: 36px 0 44px; display: grid; justify-items: center; gap: 13px; }
.pricing-billing-note { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px; width: min(100%, 760px); margin: -20px auto 28px; padding: 12px 18px; border: 1px solid #648cff40; border-radius: 12px; background: #3264f014; color: #c9d6ff; font-size: 14px; line-height: 1.5; text-align: center; }
.pricing-billing-note p { margin: 0; }
.pricing-billing-note a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.pricing-billing-note.is-warn { border-color: #f5b04a55; background: #f5b04a14; color: #f3d39e; }
.pricing-segment {
  --billing-drag: 0px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  width: min(100%, 310px);
  padding: 5px;
  border: 1px solid #ffffff17;
  border-radius: 16px;
  background: linear-gradient(180deg, #18181c, #111114);
  box-shadow: inset 0 1px 0 #ffffff0b, 0 12px 32px -22px #000;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.pricing-segment::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 5px;
  top: 5px;
  bottom: 5px;
  width: calc((100% - 14px) / 2);
  border: 1px solid #ffffff12;
  border-radius: 11px;
  background: linear-gradient(180deg, #3a3a40, #2b2b30);
  box-shadow: inset 0 1px 0 #ffffff12, 0 5px 14px #0005;
  transform: translateX(var(--billing-drag));
  transition: transform .42s cubic-bezier(.2, .85, .25, 1), box-shadow .25s ease;
  pointer-events: none;
}
.pricing-segment[data-active="year"]::before { transform: translateX(calc(100% + 4px + var(--billing-drag))); }
.pricing-segment.is-dragging::before { transition: box-shadow .2s ease; box-shadow: inset 0 1px 0 #ffffff18, 0 8px 22px #0007; }
.pricing-segment button { position: relative; z-index: 1; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 10px 18px; border: 0; border-radius: 11px; background: transparent; color: #969dad; font: 700 13px/1.4 Inter, sans-serif; cursor: pointer; transition: color .25s ease; }
.pricing-segment button[aria-pressed="true"] { background: transparent; color: white; box-shadow: none; }
.pricing-segment button span {
  padding: 3px 7px;
  border: 1px solid #79a4ff4d;
  border-radius: 999px;
  background: #3264f017;
  color: #a9c3ff;
  box-shadow: inset 0 1px 0 #ffffff0b;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .015em;
  white-space: nowrap;
}
.pricing-segment button[aria-pressed="true"] span {
  border-color: #8baeff66;
  background: #3264f026;
  color: #d7e3ff;
}
.pricing-billing > p { font-size: 12px; color: var(--pricing-muted); margin: 0; min-height: 20px; text-align: center; }
.tariff-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.tariff-card { --neon: 0 210 255; position: relative; display: flex; flex-direction: column; min-width: 0; padding: 26px 22px; border: 3px solid rgb(var(--neon) / .4); background: radial-gradient(ellipse at 85% 0, rgb(var(--neon) / .12), transparent 60%), linear-gradient(160deg, #131315, #0c0c0e); border-radius: 22px; box-shadow: inset 0 1px 0 rgb(var(--neon) / .15), 0 12px 40px rgb(var(--neon) / .055); }
.tariff-card[data-plan="sandbox"] { --neon: 176 184 198; }
.tariff-card[data-plan="pro"] { --neon: 0 255 122; }
.tariff-card[data-plan="enterprise"] { --neon: 255 55 105; }
.tariff-card.is-featured { border-color: rgb(var(--neon) / .55); background: radial-gradient(ellipse at 85% 0, rgb(var(--neon) / .17), transparent 65%), linear-gradient(160deg, #0e1c18, #0a100f); box-shadow: 0 0 0 4px rgb(var(--neon) / .035), 0 12px 60px rgb(var(--neon) / .09); }
.tariff-card::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 3px solid rgb(var(--neon) / .95);
  box-shadow: 0 12px 50px rgb(var(--neon) / .16);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.tariff-card:hover::before { opacity: 1; }
.tariff-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; }
.tariff-badges { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.tariff-promo-badge { padding: 6px 9px; border-radius: 6px; background: #ff3358; color: #fff; font-size: 10px; line-height: 1.4; font-weight: 750; white-space: nowrap; }
/* "Most popular" is a tab grown out of the featured card's border: a strip in
   the plan colour above the card, wrapping round its top corners. The strip
   reaches down behind the card's top padding, and its ::after paints the card's
   own rounded top corners back on, so border and tab read as one shape. */
.tariff-card.is-featured { border-color: rgb(var(--neon)); border-top-left-radius: 0; border-top-right-radius: 0; }
.tariff-recommended { position: absolute; z-index: 0; top: -36px; left: -3px; right: -3px; height: 58px; padding-top: 9px; border-radius: 22px 22px 0 0; background: rgb(var(--neon)); color: #04140b; font: 800 14px/18px Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; text-align: center; white-space: nowrap; pointer-events: none; }
.tariff-recommended::before { content: "\2726"; margin-right: 7px; font-size: 14px; }
.tariff-recommended::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: 0; height: 22px; border-radius: 19px 19px 0 0; background: var(--card-bg, #0e1c18); }
.tariff-card.is-featured > :not(.tariff-recommended) { position: relative; z-index: 1; }
.tariff-card h2 { margin: 0; font: 400 29px/1.2 'Dela Gothic One', Inter, sans-serif; letter-spacing: -.03em; text-transform: uppercase; }
.tariff-price { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; margin: 22px 0 4px; }
.tariff-price del { color: #8993a8; font-size: 16px; font-weight: 700; text-decoration-thickness: 2px; }
.tariff-price strong { font: 700 clamp(36px, 3.5vw, 50px)/1.05 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: -.065em; font-variant-numeric: tabular-nums; color: #fff; }
.tariff-billing { margin: 10px 0 24px; min-height: 40px; display: flex; flex-direction: column; gap: 4px; color: #c5cee1; font-size: 13px; line-height: 1.55; font-weight: 650; }
.tariff-billing > span { color: rgb(var(--neon)); }
.tariff-lowest-price { min-height: 34px; margin: -14px 0 18px; color: #aeb7ca; font-size: 10px; line-height: 1.55; }
.pricing-page .pricing-button:not(.ed-btn-export) { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 46px; padding: 12px 18px; border-radius: 10px; border: 1px solid #ffffff24; background: #ffffff06; color: #eef3ff; font: 600 13px/1.4 Inter, sans-serif; text-decoration: none; cursor: pointer; transition: background .18s, border-color .18s, transform .18s; }
.pricing-button svg { width: 18px; height: 18px; flex: 0 0 18px; }
.pricing-page .pricing-button:not(.ed-btn-export):hover:not(:disabled) { background: #ffffff0f; border-color: #9ab2f180; transform: translateY(-1px); }
/* Bright neon CTAs: dark ink beats white for contrast and click intent (same as .tariff-recommended). */
.pricing-page .tariff-card .ed-btn-export.fm-library-cta {
  --plan: rgb(var(--neon));
  color: #061018;
}
.pricing-page .tariff-card .ed-btn-export.fm-library-cta svg { color: inherit; }
.tariff-library { display: flex; align-items: center; gap: 12px; margin: 28px 0 0; padding: 6px 0 22px; border-bottom: 1px solid var(--pricing-line); color: #fff; font-size: 21px; line-height: 1.35; }
.tariff-library strong { font-weight: 800; letter-spacing: -.02em; }
.tariff-library svg { width: 24px; height: 24px; flex: 0 0 24px; color: rgb(var(--neon)); }
.pricing-page .pricing-button:disabled { opacity: .5; cursor: default; box-shadow: none; }
.pricing-page :is(button, a, summary, [tabindex]):focus-visible { outline: 2px solid #9cb9ff; outline-offset: 5px; }
.tariff-allowance { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--pricing-line); }
.tariff-allowance strong { color: rgb(var(--neon)); text-shadow: 0 0 28px rgb(var(--neon) / .22); font: 800 clamp(40px, 4vw, 52px)/1 'Plus Jakarta Sans', sans-serif; letter-spacing: -.055em; }
.tariff-allowance span { font-size: 14px; line-height: 1.4; color: #f2f5ff; font-weight: 750; max-width: 12ch; letter-spacing: -.01em; }
.tariff-features { display: grid; gap: 14px; padding: 0; margin: 20px 0 2px; list-style: none; color: #e4eaf8; font-size: 14px; line-height: 1.55; font-weight: 650; }
.tariff-features li { display: flex; align-items: flex-start; gap: 11px; }
.tariff-features svg { flex: 0 0 18px; width: 18px; height: 22px; color: rgb(var(--neon)); }
.tariff-features li.is-off,
.tariff-library.is-off,
.tariff-allowance.is-off { color: #8b93a6; }
.tariff-features li.is-off svg,
.tariff-library.is-off svg { color: #ff5a7a; }
.tariff-allowance.is-off strong { color: #8b93a6; text-shadow: none; }
.pricing-questions { margin-top: 120px; }
.pricing-questions .faq-contact { width: fit-content; margin-top: 20px; }
.pricing-questions .faq-item { contain: none; }

/* "Bigger scale?" banner between the plans and the FAQ: a quiet dark card
   with a navy tint, the brand blue only on its button. */
.pricing-contact { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; margin-top: 64px; padding: 40px 44px; border-radius: 28px; background: #10131c; color: #fff; overflow: hidden; }
.pricing-contact h2 { font: 400 clamp(24px, 2.3vw, 32px)/1.15 'Dela Gothic One', Inter, sans-serif; letter-spacing: -.035em; margin: 0; }
.pricing-contact .pricing-eyebrow { margin-bottom: 11px; }
.pricing-contact p:not(.pricing-eyebrow) { color: #b9c0d0; font-size: 16px; font-weight: 600; margin: 12px 0 0; line-height: 1.55; max-width: 52ch; }
.pricing-page .pricing-contact .pricing-button:not(.ed-btn-export) { flex-shrink: 0; min-height: 60px; gap: 22px; padding: 12px 20px 12px 24px; border: 0; border-radius: 999px; background: #3264f0; color: #fff; font: 800 16px/1.2 Inter, sans-serif; text-align: left; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background .2s; }
.pricing-page .pricing-contact .pricing-button:not(.ed-btn-export):hover { background: #4673f2; border-color: transparent; transform: scale(1.03); }
.pricing-page .pricing-contact .pricing-button:not(.ed-btn-export):active { transform: scale(.97); }
.pricing-contact .pricing-button svg { width: 20px; height: 20px; flex-basis: 20px; }
.pricing-contact small { display: block; font-size: 12px; font-weight: 700; margin-top: 3px; color: #d6e0ff; }
.pricing-payment { font-size: 11px; text-align: center; color: #7f8ba4; margin: 28px 0 0; }
.pricing-error { display: grid; justify-items: center; gap: 20px; padding: 48px; color: var(--pricing-muted); }
body:has(.pricing-page) .site-footer { border-color: #ffffff0b; background: #09090b; padding-top: 55px; }
@media (max-width: 1280px) {
  .pricing-page > .wrap { width: calc(100% - 40px); }
  .tariff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 16px; } /* rows leave room for the "most popular" tab */
  .tariff-card { padding: 24px 20px; }
}
@media (max-width: 720px) {
  .tariff-grid { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; gap: 56px; }
}
@media (max-width: 800px) {
  .pricing-page { padding-top: 115px; }
  .pricing-intro h1 { font-size: clamp(28px, 5.8vw, 42px); }
  .pricing-lead { font-size: 15px; max-width: 34ch; margin-inline: auto; }
  .tariff-card { padding: 28px; }
  .tariff-description { min-height: 0; }
  .tariff-price strong { font-size: 48px; }
  .tariff-library { font-size: 20px; }
  .tariff-allowance strong { font-size: 48px; }
  .tariff-features { font-size: 14px; }
  .tariff-billing { min-height: 0; }
  .pricing-questions { margin-top: 66px; }
  .pricing-contact { grid-template-columns: minmax(0, 1fr); margin-top: 48px; padding: 28px 24px; gap: 22px; border-radius: 24px; }
  .pricing-contact p:not(.pricing-eyebrow) { font-size: 15px; }
  .pricing-page .pricing-contact .pricing-button:not(.ed-btn-export) { width: 100%; justify-content: space-between; }
  .pricing-questions { margin-top: 80px; }
}
@media (max-width: 400px) {
  .pricing-page > .wrap { width: calc(100% - 32px); }
  .pricing-intro h1 { font-size: 28px; }
  .pricing-billing { margin-bottom: 28px; }
  .pricing-segment button { padding-inline: 15px; }
  .tariff-card { padding: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .pricing-page *:not(.ed-btn-export):not(.fm-library-cta),
  .pricing-page *:not(.ed-btn-export):not(.fm-library-cta)::before,
  .pricing-page *:not(.ed-btn-export):not(.fm-library-cta)::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* FAQ is an interactive disclosure, so retain its height transition even
   when decorative page motion is reduced. */
@media (prefers-reduced-motion: reduce) {
  .pricing-page .fm-faq .faq-a {
    transition: grid-template-rows .32s cubic-bezier(.4, 0, .2, 1) !important;
  }
  .pricing-page .fm-faq .faq-ico {
    transition: transform .32s cubic-bezier(.4, 0, .2, 1), color .2s ease !important;
  }
}

/* Handmade underlines: one stroke under price, two under "wszystkie animacje". */
.pricing-handline,
.tariff-handline {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.pricing-handline { color: #fff; font-weight: 800; }
.pricing-handline::after,
.tariff-handline::after {
  content: "";
  position: absolute;
  pointer-events: none;
  left: -3%;
  top: 100%;
  width: 106%;
  height: 18px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 18' preserveAspectRatio='none'%3E%3Cpath d='M8 5 Q98 1 292 6 M24 13 Q148 8 274 12' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 18' preserveAspectRatio='none'%3E%3Cpath d='M8 5 Q98 1 292 6 M24 13 Q148 8 274 12' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.pricing-handline::after { background: #ff354f; }
.tariff-handline::after { background: rgb(var(--neon)); opacity: .92; }
.tariff-price .tariff-handline::after {
  top: calc(100% - 2px);
  height: 14px;
  opacity: .8;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M10 8 Q120 3 290 7' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M10 8 Q120 3 290 7' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.tariff-library .tariff-handline::after { top: calc(100% + 2px); height: 18px; }
.pricing-page .text-muted { font-weight: 600; }
/* Plan buttons: labels always stay inside the button (wrap instead of overflow). */
.pricing-page .tariff-card .ed-btn-export.fm-library-cta { max-width: 100%; min-width: 0; padding-inline: 22px; gap: 14px; white-space: normal; text-align: center; line-height: 1.2; }
.pricing-page .tariff-card .ed-btn-export.fm-library-cta > span { min-width: 0; overflow-wrap: anywhere; text-wrap: balance; }
.pricing-lemon-logo { display: inline-block; height: 1.3em; width: auto; margin: 0 .12em 0 .25em; vertical-align: -0.3em; }

/* Each card splits into two products so animation exports never read as caption minutes. */
.tariff-section { margin-top: 26px; padding: 18px 18px 6px; border: 1px solid var(--pricing-line); border-radius: 16px; background: #ffffff04; }
.tariff-section-label { display: flex; align-items: center; gap: 8px; margin: 0; color: #f2f5ff; font: 800 11px/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.tariff-section-label svg { width: 17px; height: 17px; flex: 0 0 17px; color: rgb(var(--neon)); }
.tariff-section .tariff-library { margin-top: 14px; padding-bottom: 16px; font-size: 18px; }
.tariff-section .tariff-allowance { margin-top: 16px; padding-bottom: 16px; }
.tariff-section .tariff-features { margin: 16px 0 14px; }
.tariff-section > :last-child { border-bottom: 0; }
.tariff-section--captions { margin-top: 14px; }
.tariff-section--captions .tariff-allowance strong { font-size: clamp(34px, 3.4vw, 44px); }