/* WingZ pricing - rendered IN the home page (so it reuses the real Framer nav +
   footer) when the route is /pricing. The home content column is hidden and a
   #wz-pricing section is inserted between the nav and the footer. Styled with the
   home design system: dark, brand orange #F96029, Inter / Instrument Serif. */

/* hide the home content column on any in-page route (/pricing, /about) - no flash */
html[data-wz-route] .framer-F0WZm { display: none !important; }
/* the Framer nav's entrance animation keys off the (now hidden) hero, so it
   stays stuck pre-reveal - force it to its final visible state here. The nav is
   positioned with left:50% and centered via translateX(-50%); keep that transform
   (NOT `none`, which strips the centering and shoves the nav to the right). */
html[data-wz-route] .framer-1x40xmr-container { opacity: 1 !important; transform: translateX(-50%) !important; }

#wz-pricing {
  --accent: #F96029;
  --bg: #000000;
  --card: #0e0e12;
  --border: rgba(255, 255, 255, 0.09);
  --border2: rgba(255, 255, 255, 0.16);
  --fg: #fff;
  --muted: rgba(255, 255, 255, 0.6);
  --muted2: rgba(255, 255, 255, 0.4);
  --faint: rgba(255, 255, 255, 0.26);
  --font: "Inter Display", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  padding: clamp(108px, 16vh, 168px) clamp(20px, 5vw, 90px) clamp(20px, 4vh, 40px);
}
#wz-pricing * { box-sizing: border-box; }

/* hero - left aligned, lighter weight */
.wzp-hero { max-width: 1180px; margin: 0 auto; text-align: left; }
.wzp-h { margin: 0; max-width: 18ch; font-weight: 500; font-size: clamp(40px, 5.6vw, 66px); line-height: 1.04; letter-spacing: -0.03em; }
.wzp-h .o { color: var(--accent); }
.wzp-sub { margin: 20px 0 0; max-width: 52ch; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.55; color: var(--muted); }

/* billing toggle - centered, savings badge sits inside the Yearly pill */
.wzp-toggle-wrap { display: flex; align-items: center; justify-content: center; margin-top: clamp(30px, 4.5vh, 48px); }
.wzp-toggle { display: inline-flex; padding: 5px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); }
.wzp-toggle button { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); border: 0; background: transparent; padding: 9px 20px; border-radius: 999px; cursor: pointer; transition: background 0.2s, color 0.2s; }
.wzp-toggle button.on { background: var(--accent); color: #fff; }
.wzp-save { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: var(--accent); background: rgba(249, 96, 41, 0.16); border-radius: 999px; padding: 2px 7px; }
.wzp-toggle button.on .wzp-save { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* cards */
.wzp-cards { max-width: 1240px; margin: clamp(36px, 5vh, 54px) auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: stretch; }
.wzp-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 24px 22px; }
.wzp-card.feat { border-color: rgba(249, 96, 41, 0.5); }
.wzp-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wzp-pname { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.wzp-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #0b0b0d; background: var(--accent); border-radius: 999px; padding: 4px 10px; }
.wzp-ptag { margin-top: 7px; font-size: 12.5px; color: var(--muted2); line-height: 1.45; min-height: 54px; }
.wzp-price { margin-top: 16px; display: flex; align-items: baseline; gap: 7px; }
.wzp-price .amt { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.wzp-price .per { font-size: 13px; color: var(--muted2); }
.wzp-billed { margin-top: 8px; font-size: 12px; color: var(--faint); min-height: 15px; }
.wzp-cta { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; height: 46px; border-radius: 11px; font-size: 14px; font-weight: 600; border: 1px solid var(--border2); color: var(--fg); transition: background 0.18s, border-color 0.18s; }
.wzp-cta:hover { background: rgba(255, 255, 255, 0.06); }
.wzp-card.feat .wzp-cta { background: #fff; border-color: #fff; color: #0b0b0d; }
.wzp-card.feat .wzp-cta:hover { background: rgba(255, 255, 255, 0.88); }
.wzp-feats { list-style: none; margin: 22px 0 26px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.wzp-feats li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, 0.82); }
.wzp-feats li.head { color: var(--muted2); }
.wzp-feats .ck { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px; color: var(--accent); }
.wzp-feats .ck svg { width: 16px; height: 16px; }

/* comparison table */
.wzp-compare { max-width: 1180px; margin: clamp(60px, 9vh, 110px) auto 0; }
.wzp-compare h2 { margin: 0 0 4px; font-size: clamp(24px, 3vw, 36px); font-weight: 700; letter-spacing: -0.025em; }
.wzp-compare .csub { margin: 0 0 26px; font-size: 15px; color: var(--muted); }
.wzp-twrap { overflow-x: auto; }
table.wzp-table { width: 100%; min-width: 880px; border-collapse: collapse; }
table.wzp-table th, table.wzp-table td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--border); }
table.wzp-table thead th { vertical-align: bottom; font-weight: 500; }
table.wzp-table thead .fc { width: 34%; font-size: 13px; color: var(--muted2); }
table.wzp-table thead .pn { font-size: 15px; font-weight: 700; color: var(--fg); }
table.wzp-table thead .featured .pn { color: var(--accent); }
table.wzp-table thead .pp { font-size: 12px; font-weight: 500; color: var(--muted2); margin-top: 3px; }
table.wzp-table th.center, table.wzp-table td.center { text-align: center; }
table.wzp-table td.fn { font-size: 13.5px; color: rgba(255, 255, 255, 0.82); }
table.wzp-table td.val { font-size: 13.5px; color: rgba(255, 255, 255, 0.9); }
table.wzp-table tr.cat td { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted2); padding: 22px 18px 11px; border-bottom: 1px solid var(--border); }
.wzp-yes { display: inline-flex; color: var(--accent); }
.wzp-yes svg { width: 17px; height: 17px; }
.wzp-no { display: inline-block; width: 11px; height: 2px; border-radius: 1px; background: var(--faint); vertical-align: middle; }

/* ===================================================================
   Shared building blocks (reused on /pricing and /about)
   =================================================================== */

/* bold animated liquid background: a bright orange field at the top with dark
   organic blobs drifting over it (the bright field shows through the gaps),
   fading down into the page bg. A liquid orange shader behind the hero. */
.wz-liquid { position: absolute; inset: 0 0 auto 0; height: clamp(560px, 84vh, 960px); overflow: hidden; pointer-events: none; z-index: 0; isolation: isolate; background: #000000; }
.wz-liquid .field { position: absolute; inset: -12% -12% 0 -12%; background:
  radial-gradient(78% 70% at 50% -6%, #ff7a36 0%, #ef561f 22%, #b53c12 42%, #5d1f0a 60%, rgba(0, 0, 0, 0) 80%); }
.wz-liquid .blob { position: absolute; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #000000 46%, rgba(0, 0, 0, 0) 72%); filter: blur(24px); will-change: transform; }
.wz-liquid .b1 { width: 54vw; height: 44vw; left: -8%;  top: 2%;  animation: wzL1 26s ease-in-out infinite alternate; }
.wz-liquid .b2 { width: 42vw; height: 42vw; left: 28%;  top: -10%; animation: wzL2 32s ease-in-out infinite alternate; }
.wz-liquid .b3 { width: 48vw; height: 40vw; right: -6%; top: 6%;  animation: wzL3 29s ease-in-out infinite alternate; }
.wz-liquid .b4 { width: 32vw; height: 32vw; left: 14%;  top: 20%; animation: wzL4 37s ease-in-out infinite alternate; }
.wz-liquid .b5 { width: 36vw; height: 30vw; right: 12%; top: 22%; animation: wzL2 31s ease-in-out infinite alternate reverse; }
/* keep the very top legible behind the nav, and fade the whole thing to bg */
.wz-liquid::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 130px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); z-index: 2; }
.wz-liquid::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 42%, #000000 90%); z-index: 1; }
@keyframes wzL1 { from { transform: translate(0, 0) scale(1); }    to { transform: translate(14%, 8%) scale(1.18); } }
@keyframes wzL2 { from { transform: translate(0, 0) scale(1.05); } to { transform: translate(-12%, 10%) scale(0.92); } }
@keyframes wzL3 { from { transform: translate(0, 0) scale(1); }    to { transform: translate(-10%, -6%) scale(1.16); } }
@keyframes wzL4 { from { transform: translate(0, 0) scale(0.95); } to { transform: translate(16%, -10%) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .wz-liquid .blob { animation: none !important; } }

/* keep all real content above the liquid background */
#wz-pricing > .wzp-hero, #wz-pricing > .wzp-cards, #wz-pricing > .wzp-compare { position: relative; z-index: 1; }

/* featured plan card: top-lit orange gradient */
.wzp-card.feat {
  border-color: rgba(249, 96, 41, 0.55);
  background:
    radial-gradient(125% 85% at 50% 0%, rgba(249, 96, 41, 0.22), rgba(249, 96, 41, 0.05) 52%, rgba(14, 14, 18, 0) 78%),
    linear-gradient(180deg, rgba(249, 96, 41, 0.08), rgba(14, 14, 18, 0) 42%),
    var(--card);
}

@media (max-width: 1180px) {
  .wzp-cards { grid-template-columns: repeat(2, 1fr); max-width: 680px; }
}
@media (max-width: 600px) {
  .wzp-cards { grid-template-columns: 1fr; max-width: 400px; }
}

/* ===================================================================
   Hosting + Extra credits blocks (real pricing)
   =================================================================== */
.wzp-block { max-width: 1240px; margin: clamp(64px, 9vh, 116px) auto 0; position: relative; z-index: 1; }
.wzp-block-head h2 { margin: 0 0 5px; font-size: clamp(24px, 3vw, 36px); font-weight: 700; letter-spacing: -0.025em; }
.wzp-block-head .csub { margin: 0 0 26px; max-width: 70ch; font-size: 15px; line-height: 1.55; color: var(--muted); }

/* hosting: two add-on cards, left-aligned (not full width) */
.wzp-hosting { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 760px; align-items: stretch; }
.wzp-note { margin: 22px 0 0; font-size: 13px; color: var(--muted2); }

/* credit packs: three cards */
.wzp-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 940px; align-items: stretch; }
.wzp-card.pack { padding: 26px 24px; }
.wzp-pack-credits { margin-top: 16px; font-size: 16px; font-weight: 600; color: #fff; }
.wzp-pack-credits span { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 400; color: var(--muted2); }
.wzp-pack-desc { margin: 14px 0 26px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

/* what credits are spent on: editorial hairline rows, no boxes */
.wzp-spend { margin-top: clamp(40px, 6vh, 64px); max-width: 620px; }
.wzp-spend-head { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted2); margin-bottom: 6px; }
.wzp-credit-list { border-top: 1px solid var(--border2); }
.wzp-credit-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14px; color: rgba(255, 255, 255, 0.82); }
.wzp-credit-row .cr { font-family: var(--mono); font-size: 12.5px; color: var(--accent); white-space: nowrap; }

/* table: full-width add-on note + category footnote */
table.wzp-table td.span-note { text-align: left; font-size: 12.5px; color: var(--muted2); }
table.wzp-table tr.note td { padding: 9px 18px 2px; font-size: 11.5px; color: var(--muted2); border-bottom: 0; }

@media (max-width: 760px) {
  .wzp-hosting { grid-template-columns: 1fr; max-width: 400px; }
  .wzp-packs { grid-template-columns: 1fr; max-width: 400px; }
}