/* FirePost overrides — loaded after the aigocy stylesheets so these win. */

/* Floating header: fixed so the glass nav pill follows the user down the whole page
   (not just over the hero). It stays out of flow so the hero video fills the viewport. */
.tf-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  margin-bottom: 0;
  padding-top: 16px;
  text-align: center; /* centers the inline-flex pill */
  transition: transform 0.35s ease;
}
/* Hide the nav while scrolling down; it slides back in when scrolling up (toggled in JS). */
.tf-header.fp-nav-hidden {
  transform: translateY(-150%);
}

/* Hero fills the full viewport height (dvh handles mobile browser chrome too). */
.section-hero {
  min-height: 100vh;
  min-height: 100dvh;
}

/* Nav blends with the dark hero: subtle dark glass instead of the bright white pill.
   (The header scrolls away past the hero, so it only ever sits over the video.) */
.tf-header .header-inner {
  display: inline-flex; /* shrink-wrap the pill to its content so the glass wraps every item */
  width: auto;
  padding: 18px 34px;
  background: rgba(18, 18, 22, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 34px rgba(0, 0, 0, 0.34);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}
/* Once scrolled off the dark hero, the pill floats over light sections — deepen the glass
   so the white logo + nav text stay readable, and tighten it slightly. */
.tf-header.is-stuck {
  padding-top: 10px;
}
.tf-header.is-stuck .header-inner {
  padding-top: 13px;
  padding-bottom: 13px;
  background: rgba(16, 16, 20, 0.82);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 34px rgba(0, 0, 0, 0.3);
}
/* The header2 variant caps the pill at 807px with higher specificity — lift that cap
   so the inline-flex pill can grow to fit all the nav items. */
.tf-header.header2 .header-inner {
  max-width: 98vw;
}

/* FirePost wordmark logo (already light/white) + white top-level nav text. */
.tf-header .logo-site img {
  height: 34px;
  width: auto;
}
.tf-header .nav-menu-main > li > .item-link,
.tf-header .nav-menu-main > li > .item-link:hover {
  color: #ffffff;
  font-size: 16px;
}

/* Keep labels on one line and stop the items being squeezed — no more cramped wrapping. */
.tf-header .header-inner {
  gap: 18px;
}
.tf-header .logo-site,
.tf-header .box-navigation,
.tf-header .fp-header-actions {
  flex-shrink: 0;
}
.tf-header .logo-site img {
  height: 36px;
}
.tf-header .nav-menu-main {
  gap: 20px;
  flex-wrap: nowrap;
}
.tf-header .nav-menu-main .menu-item {
  flex-shrink: 0;
}
.tf-header .nav-menu-main > li > .item-link,
.tf-header .fp-header-offer,
.tf-header .fp-header-actions .tf-btn {
  white-space: nowrap;
}

/* Golden "6 months free" offer pill in the header, grouped with Log in + Start free CTA. */
.tf-header .fp-header-actions {
  align-items: center;
  gap: 12px;
}
.tf-header .fp-header-login,
.tf-header .fp-header-login:hover {
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 4px;
}
.tf-header .fp-header-offer,
.tf-header .fp-header-offer:hover {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  color: #3a2600;
  background: linear-gradient(135deg, #fde9a7, #f6c453 45%, #e0a516);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 6px 18px rgba(193, 142, 24, 0.42);
}

/* Tools dropdown: smaller items with a leading icon. */
.tf-header .nav-menu-main .sub-menu .fp-tool-link {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}
.tf-header .nav-menu-main .sub-menu .fp-tool-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
}

/* Center the headline + button block in the hero (both axes); the models bar is pinned
   separately to the bottom (below), so it doesn't ride along with the centered content. */
.section-hero {
  display: flex;
  align-items: center;
}
.section-hero .content-wrap {
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
}

/* Full-bleed hero video — remove the template's 16px inset + 40px rounded frame. */
.section-hero .hero-image {
  inset: 0;
  border-radius: 0;
}
.section-hero .hero-image video,
.section-hero .hero-image img {
  border-radius: 0;
}

/* Subtle black mask over the cycling hero video — lifts contrast + cinematic feel. */
.section-hero .hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* Hero headline: artistic italic display, white, soft shadow for any frame. */
.section-hero .fp-hero-title {
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  color: #ffffff;
  -webkit-text-stroke: 0;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.55);
  letter-spacing: 0.005em;
  font-size: clamp(2.9rem, 7vw, 5.4rem);
  line-height: 1.05;
  margin-top: 0;
  margin-bottom: 33px;
}

/* ===== "How it works" section ===== */
.section-how .fp-how-intro {
  max-width: 680px;
  margin: 18px auto 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--neutral-600, #6b6b6b);
}
.section-how .fp-how-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
.section-how .fp-how-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 30px 26px;
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff, #fbfbfd);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.section-how .fp-how-step:hover {
  transform: translateY(-5px);
  border-color: rgba(124, 58, 237, 0.22);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.10);
}
/* gold numbered badge */
.section-how .fp-how-num {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 800;
  color: #3a2600;
  background: linear-gradient(135deg, #fde9a7, #f6c453 45%, #e0a516);
  box-shadow: 0 5px 14px rgba(193, 142, 24, 0.4);
}
.section-how .fp-how-ic {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
}
.section-how .fp-how-ic svg { width: 22px; height: 22px; }
.section-how .fp-how-t { font-weight: 700; font-size: 18px; margin: 2px 0 0; }
.section-how .fp-how-d { font-size: 14px; line-height: 1.5; color: var(--neutral-600, #6b6b6b); margin: 0; }

/* Step 1 — brand chips */
.section-how .fp-how-brandchips { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.section-how .fp-bc-logo {
  width: 30px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display, sans-serif); font-weight: 700; color: #fff; background: #18181b;
}
.section-how .fp-bc-swatch { width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0.1); }
.section-how .fp-bc-font { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.05); }

/* Step 2 — typewriter prompt box */
.section-how .fp-how-prompt {
  display: flex; align-items: center; gap: 10px; margin-top: 6px;
  padding: 11px 12px; border-radius: 12px; background: #0f0f12; overflow: hidden;
}
.section-how .fp-how-typed {
  flex: 1; min-width: 0; overflow: hidden; white-space: nowrap;
  font-family: var(--font-mono, monospace); font-size: 12px; color: #e8e8ea;
  border-right: 2px solid #f6c453; width: 0;
  animation: fp-type 6s steps(23) infinite, fp-caret 0.7s step-end infinite;
}
.section-how .fp-how-gen {
  flex: 0 0 auto; font-size: 12px; font-weight: 700; color: #3a2600;
  padding: 7px 13px; border-radius: 999px;
  background: linear-gradient(135deg, #fde9a7, #f6c453 45%, #e0a516);
}
@keyframes fp-type { 0% { width: 0; } 45% { width: 23ch; } 100% { width: 23ch; } }
@keyframes fp-caret { 0%, 100% { border-color: #f6c453; } 50% { border-color: transparent; } }

/* Step 2 — format + quality option chips (Square / Portrait / Reel / 4K) */
.section-how .fp-how-formats { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.section-how .fp-fmt {
  font-size: 12px; font-weight: 600; line-height: 1;
  padding: 7px 12px; border-radius: 999px;
  color: var(--neutral-700, #3f3f46);
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid transparent;
}
.section-how .fp-fmt.is-active {
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.35);
}
.section-how .fp-fmt.fp-fmt-q {
  color: #3a2600;
  background: linear-gradient(135deg, #fde9a7, #f6c453 45%, #e0a516);
}

/* Step 3 — results pop in (synced ~halfway through the prompt loop) */
.section-how .fp-how-results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 6px; }
.section-how .fp-how-results img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px;
  opacity: 0; animation: fp-result-in 6s ease infinite;
}
.section-how .fp-how-results img:nth-child(2) { animation-delay: -0.18s; }
.section-how .fp-how-results img:nth-child(3) { animation-delay: -0.36s; }
.section-how .fp-how-results img:nth-child(4) { animation-delay: -0.54s; }
@keyframes fp-result-in {
  0%, 45% { opacity: 0; transform: scale(0.95); }
  55% { opacity: 1; transform: scale(1); }
  92% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.95); }
}
@media (max-width: 991px) {
  .section-how .fp-how-grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .section-how .fp-how-typed { width: 23ch; animation: none; border-right-color: transparent; }
  .section-how .fp-how-results img { opacity: 1; animation: none; }
}

/* Subline under the "Why Us" heading. */
.section-benefits .fp-benefits-intro {
  max-width: 680px;
  margin: 18px auto 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--neutral-600, #6b6b6b);
}

/* "Best models / only the best results" claim under the pricing heading. */
#pricing .fp-pricing-claim {
  max-width: 680px;
  margin: -44px auto 44px;
  text-align: center;
  font-size: 16px;
  line-height: 1.55;
  color: var(--neutral-600, #6b6b6b);
}
#pricing .fp-pricing-claim strong {
  font-weight: 700;
  color: var(--neutral-900, #18181b);
}

/* "X min of premium video" + its clip-breakdown note, stacked vertically so the
   note sits on its own line under the video point (not floated beside it). */
#pricing .list-text .fp-vid-li {
  align-items: flex-start;
}
#pricing .list-text .fp-vid-li .icon {
  margin-top: 1px;
}
#pricing .list-text .fp-vid-body {
  display: flex;
  flex-direction: column;
}
#pricing .list-text .fp-vid-note {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  opacity: 0.6;
}

/* 3D plan buttons — raised pill with a top highlight, a solid bottom "edge", and a soft
   drop shadow; lifts on hover and presses down on click. Applies to every plan CTA. */
#pricing .pricing-item .tf-btn {
  position: relative;
  border-radius: 999px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 4px 0 rgba(0, 0, 0, 0.16),
    0 10px 22px rgba(0, 0, 0, 0.16);
}
#pricing .pricing-item .tf-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 6px 0 rgba(0, 0, 0, 0.16),
    0 16px 30px rgba(0, 0, 0, 0.2);
}
#pricing .pricing-item .tf-btn:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 1px 0 rgba(0, 0, 0, 0.16),
    0 6px 14px rgba(0, 0, 0, 0.18);
}
/* Golden featured button — same 3D, but the edge + glow are gold for realism. */
#pricing .pricing-item.fp-featured .tf-btn {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 4px 0 #a9760f,
    0 12px 26px rgba(193, 142, 24, 0.45);
}
#pricing .pricing-item.fp-featured .tf-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 6px 0 #a9760f,
    0 18px 34px rgba(193, 142, 24, 0.5);
}
#pricing .pricing-item.fp-featured .tf-btn:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 1px 0 #a9760f,
    0 8px 16px rgba(193, 142, 24, 0.4);
}

/* Hero eyebrow — small frosted pill above the headline (premium positioning line). */
.section-hero .fp-hero-eyebrow {
  display: inline-block;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 22px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Golden highlight for emphasized phrases (e.g. "Premium AI models" in the hero subhead). */
.fp-gold {
  font-weight: 700;
  background: linear-gradient(135deg, #fde9a7, #f6c453 45%, #e0a516);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #f6c453;
  text-shadow: 0 1px 10px rgba(193, 142, 24, 0.35);
}

/* Hero subline — the "what it does" sentence under the headline. */
.section-hero .fp-hero-sub {
  max-width: 640px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.55;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

/* Hero tagline — elegant editorial line with a shimmering gradient underline. */
.section-hero .fp-hero-tagline {
  max-width: 700px;
  margin: 18px auto 0;
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.3vw, 30px);
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}
.section-hero .fp-hero-tagline .fp-underline {
  position: relative;
  white-space: nowrap;
  color: #ffffff;
  background-image: linear-gradient(90deg, #f6c453 0%, #db2777 45%, #7c3aed 75%, #f6c453 100%);
  background-repeat: no-repeat;
  background-size: 200% 3px;
  background-position: 0% 100%;
  padding-bottom: 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: fp-underline-shimmer 6s linear infinite;
}
@keyframes fp-underline-shimmer {
  to { background-position: -200% 100%; }
}
@media (max-width: 575px) {
  .section-hero .fp-hero-tagline .fp-underline { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .section-hero .fp-hero-tagline .fp-underline { animation: none; }
}

/* Push the hero CTAs (Start creating / View Pricing) down a bit. */
.section-hero .bot-btns {
  margin-top: 34px;
}

/* "Powered by" models bar — frosted glass pill pinned near the bottom of the hero. */
.section-hero .fp-models-bar {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  margin: 0;
  width: fit-content;
  max-width: 94vw;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 22px;
  padding: 13px 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 12px 44px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.section-hero .fp-model {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
}
.section-hero .fp-model svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.95;
}

/* Golden "6 months free" launch-offer banner in the pricing section. */
#pricing .fp-promo-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 18px;
  max-width: 760px;
  margin: 0 auto 56px;
  padding: 18px 26px;
  border-radius: 22px;
  color: #3a2600;
  background: linear-gradient(135deg, #fde9a7 0%, #f6c453 38%, #e0a516 70%, #b9791a 100%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 16px 44px rgba(193, 142, 24, 0.38);
}
#pricing .fp-promo-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(58, 38, 0, 0.18);
}
#pricing .fp-promo-text {
  font-size: 18px;
}
#pricing .fp-promo-text strong {
  font-weight: 800;
}
#pricing .fp-promo-cta {
  background: #1a1a1a;
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  padding: 11px 22px;
  border-radius: 999px;
  white-space: nowrap;
  transition: transform 0.15s ease;
}
#pricing .fp-promo-cta:hover {
  transform: translateY(-1px);
  color: #ffffff;
}

/* "Ends in HH:MM:SS" FOMO countdown chip inside the gold offer banner. */
#pricing .fp-countdown {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: rgba(58, 38, 0, 0.12);
  border: 1px solid rgba(58, 38, 0, 0.2);
}
#pricing .fp-cd-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e0491b;
  box-shadow: 0 0 0 0 rgba(224, 73, 27, 0.5);
  animation: fp-cd-pulse 1.6s ease-out infinite;
  flex: 0 0 auto;
}
@keyframes fp-cd-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(224, 73, 27, 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(224, 73, 27, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 73, 27, 0); }
}
#pricing .fp-cd-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b4a08;
}
#pricing .fp-cd-time {
  font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: #3a2600;
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  #pricing .fp-cd-dot { animation: none; }
}

/* Four plan cards: featured highlight + badge + footnote. */
#pricing .pricing-item {
  position: relative;
}
#pricing .price-number {
  white-space: nowrap;
}
/* Featured card: same light surface as the other cards, distinguished only by an
   animated moving gradient contour — the same palette as the generate prompt field. */
#pricing .pricing-item.fp-featured {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--neutral-100), var(--neutral-100)) padding-box,
    linear-gradient(90deg, #2563eb, #06b6d4, #eab308, #ef4444, #111827, #2563eb) border-box;
  background-size: 100% 100%, 200% auto;
  animation: fp-ai-border-flow 5s linear infinite;
  box-shadow:
    0px 7.77px 16px 0px rgba(0, 0, 0, 0.0588),
    0px 3px 3px 0px rgba(0, 0, 0, 0.102),
    0px -8px 0px 0px rgba(0, 0, 0, 0.051) inset,
    0px 4px 0px 0px rgba(255, 255, 255, 0.6) inset;
}
@keyframes fp-ai-border-flow {
  to {
    background-position: 0% center, -200% center;
  }
}
@media (prefers-reduced-motion: reduce) {
  #pricing .pricing-item.fp-featured {
    animation: none;
  }
}
#pricing .pricing-item.fp-featured .tf-btn {
  background: linear-gradient(135deg, #fde9a7 0%, #f6c453 38%, #e0a516 70%, #b9791a 100%);
  color: #3a2600;
  font-weight: 700;
  border-color: transparent;
  /* 3D resting depth (gold edge + glow) — matches the hover/active rules above. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 4px 0 #a9760f,
    0 12px 26px rgba(193, 142, 24, 0.45);
}
#pricing .pricing-item.fp-featured .tf-btn:hover {
  color: #3a2600;
  filter: brightness(1.05);
}
#pricing .fp-pop-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  padding: 6px 16px;
  border-radius: 999px;
  white-space: nowrap;
  background: linear-gradient(135deg, #7c3aed, #db2777);
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.45);
}
#pricing .fp-pricing-note {
  max-width: 640px;
  margin: 48px auto 0;
  text-align: center;
  font-size: 14px;
  opacity: 0.68;
}

/* Keep the open service panel's description + tags visible at all times (guard against
   any stray animation/inline style flashing them out — they live in the dark active card). */
#accordion-services .collapse.show .accordion-content,
#accordion-services .collapse.show .accordion-content .text,
#accordion-services .collapse.show .accordion-content .list-tags,
#accordion-services .collapse.show .accordion-content .tags-item {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Services preview panels — image (Posts) / video (Videos) / audio (Music, Voice) / tools grid. */
.services-image {
  height: auto !important;
  width: min(460px, 100%);
  /* Template absolutely-positions this on desktop, dropping it below the accordion.
     Pull it back into normal flow so it top-aligns with the accordion. */
  position: relative !important;
  margin-top: 0;
}
.services-image .fp-spanel { display: none; }
.services-image .fp-spanel.active { display: block; }
.services-image .fp-spanel.fp-grid.active { display: grid; }
.services-image .fp-spanel.fp-audio.active { display: flex; }
.services-image .fp-spanel.fp-tools.active { display: grid; }
.services-image .fp-spanel.fp-demos.active { display: grid; }
.services-image .fp-spanel.fp-playlist.active { display: flex; }

/* Animated before/after wipe demos (Tools preview). */
.services-image .fp-demos { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.services-image .fp-demo {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: #ececec;
}
.services-image .fp-demo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.services-image .fp-demo .fp-demo-after {
  clip-path: inset(0 100% 0 0);
  animation: fp-wipe 4.5s ease-in-out infinite;
}
.services-image .fp-demo .fp-demo-line {
  position: absolute; top: 0; bottom: 0; left: 0; width: 2px;
  background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); opacity: 0;
  animation: fp-wipeline 4.5s ease-in-out infinite;
}
/* Remove-BG demo: checkerboard behind the transparent cutout so the removed bg reads. */
.services-image .fp-demo-cut .fp-demo-after {
  background-image: linear-gradient(45deg, #d7d7d7 25%, transparent 0, transparent 75%, #d7d7d7 0), linear-gradient(45deg, #d7d7d7 25%, #fff 0, #fff 75%, #d7d7d7 0);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}
/* "Simplicity — is our motto" card filling the about-us quote box (replaces the stock image). */
.section-about-us .box-quotes .image .fp-quote-motto {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 24px 18px;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(160deg, #7c3aed 0%, #db2777 100%);
}
.section-about-us .box-quotes .image .fp-motto-word {
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.04;
  letter-spacing: -0.01em;
}
.section-about-us .box-quotes .image .fp-motto-sub {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.85;
}

/* Portrait avatar in the about-us quote citation (e.g. the Leonardo da Vinci quote). */
.section-about-us .box-quotes .cite .fp-quote-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  flex: 0 0 auto;
  margin-right: 6px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
}

/* Expand demo: the "before" is the original sitting small on a white canvas with empty
   side margins — so the wipe to the full-bleed result reads clearly as "expanded". */
.services-image .fp-demo-expand { background: #fff; }
.services-image .fp-demo-expand .fp-demo-before {
  object-fit: contain;
  background: #fff;
  box-sizing: border-box;
  padding: 10% 22%;
}
.services-image .fp-demo-label {
  position: absolute; left: 8px; bottom: 8px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.62); color: #fff; font-size: 11px; font-weight: 600;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.services-image .fp-demo-label svg { width: 13px; height: 13px; }
.services-image .fp-demo:nth-child(2) .fp-demo-after, .services-image .fp-demo:nth-child(2) .fp-demo-line { animation-delay: 0.9s; }
.services-image .fp-demo:nth-child(3) .fp-demo-after, .services-image .fp-demo:nth-child(3) .fp-demo-line { animation-delay: 1.8s; }
.services-image .fp-demo:nth-child(4) .fp-demo-after, .services-image .fp-demo:nth-child(4) .fp-demo-line { animation-delay: 2.7s; }
@keyframes fp-wipe {
  0%, 12% { clip-path: inset(0 100% 0 0); }
  48%, 62% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 100% 0 0); }
}
@keyframes fp-wipeline {
  0%, 12% { left: 0; opacity: 0; }
  18% { opacity: 1; }
  48%, 62% { left: 100%; opacity: 0.9; }
  70% { opacity: 0; }
  100% { left: 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .services-image .fp-demo .fp-demo-after { animation: none; clip-path: inset(0 0 0 0); }
  .services-image .fp-demo .fp-demo-line { animation: none; opacity: 0; }
}
/* Posts + videos grids */
.services-image .fp-grid { gap: 10px; }
/* Show all posts in full — no height cap, no fade mask. */
.services-image .fp-grid-posts {
  grid-template-columns: repeat(3, 1fr);
}
.services-image .fp-grid-videos { grid-template-columns: repeat(2, 1fr); }
.services-image .fp-grid img,
.services-image .fp-grid video {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.services-image .fp-grid-videos video { border-radius: 14px; }
/* Single featured video (Videos preview) */
.services-image .fp-single-video {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 18px;
  display: block;
  background: #000;
}
/* Music playlist (play any track directly) */
.services-image .fp-playlist { flex-direction: column; gap: 10px; }
.services-image .fp-track {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  background: #121212;
}
.services-image .fp-track-cover {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: cover;
}
.services-image .fp-track-body { flex: 1; min-width: 0; color: #fff; }
.services-image .fp-track-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.services-image .fp-track audio { width: 100%; height: 30px; }
/* Voice-over playlist: one row per language (native script), scrollable */
.services-image .fp-voices { max-height: none; overflow: visible; }
#services .fp-services-intro { max-width: 640px; margin-left: auto; margin-right: auto; }
/* Centered heading: scale to fit one line with margin (72px nearly overflowed) + looser line-height. */
#services .heading-title {
  font-size: clamp(2.4rem, 5.4vw, 64px);
  line-height: 1.1;
  padding-top: 0.06em;
}
.services-image .fp-voice-more {
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  padding: 14px;
  border-radius: 14px;
  color: #f3d9a4;
  background: linear-gradient(135deg, #1b1710 0%, #100f0d 60%, #0c0c0c 100%);
  border: 1px solid rgba(246, 196, 83, 0.4);
  box-shadow: 0 10px 28px rgba(193, 142, 24, 0.18), inset 0 1px 0 rgba(246, 196, 83, 0.12);
}
.services-image .fp-vm-num {
  font-weight: 800;
  background: linear-gradient(135deg, #fde9a7, #f6c453 45%, #e0a516);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #f6c453;
}
.services-image .fp-planet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.services-image .fp-track-title[dir="auto"] { font-size: 14px; }
/* Music + voice cards */
.services-image .fp-audio {
  gap: 16px;
  align-items: center;
  padding: 18px;
  border-radius: 18px;
  background: #121212;
}
.services-image .fp-audio-cover {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  border-radius: 14px;
  object-fit: cover;
}
.services-image .fp-voice-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #db2777);
}
.services-image .fp-voice-ic svg { width: 38px; height: 38px; }
.services-image .fp-audio-meta { flex: 1; min-width: 0; color: #fff; }
.services-image .fp-audio-kind {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.55;
}
.services-image .fp-audio-title { font-weight: 700; font-size: 18px; margin: 3px 0 12px; }
.services-image .fp-audio audio { width: 100%; height: 36px; }
/* Tools grid */
.services-image .fp-tools {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.services-image .fp-tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 18px 8px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.07);
  text-align: center;
}
.services-image .fp-tool-ic {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #db2777);
}
.services-image .fp-tool-ic svg { width: 21px; height: 21px; }
.services-image .fp-tool-name { font-size: 12px; font-weight: 600; color: #1a1a1a; line-height: 1.25; }

/* Premium feature highlights filling the About card (replaced the dark earth image).
   The card stretches to match the tall right column, so center the stack vertically and
   give it real top/bottom padding — no mid-card void, no clipped last row. */
.section-about-us .col-left {
  padding: 56px 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fp-about-features {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 460px;
}
.fp-feat {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}
.fp-feat-ic {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.fp-feat-ic svg {
  width: 21px;
  height: 21px;
}
.fp-feat-t {
  color: #ffffff;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
}
.fp-feat-d {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  margin-top: 4px;
  line-height: 1.45;
}

/* Mini moving post strip inside the About card (replaced the generic Trustpilot stat). */
.fp-card-marquee {
  overflow: hidden;
  margin-top: 18px;
  border-radius: 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.fp-card-track {
  display: flex;
  gap: 10px;
  width: max-content;
  animation: fp-scroll 38s linear infinite;
  will-change: transform;
}
.fp-card-track img {
  flex: 0 0 auto;
  width: 66px;
  height: 66px;
  object-fit: cover;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.fp-card-models {
  margin-top: 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0.72;
}
@media (prefers-reduced-motion: reduce) {
  .fp-card-track { animation: none; }
}

/* Showcase wall — real generated posts scrolling in 3 rows (proof of premium output). */
.section-showcase {
  padding: 100px 0;
  overflow: hidden;
}
.fp-marquee {
  display: flex;
  flex-direction: column;
  gap: 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.fp-marquee-row {
  overflow: hidden;
}
.fp-marquee-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: fp-scroll linear infinite;
  will-change: transform;
}
.fp-marquee-track.fp-reverse {
  animation-name: fp-scroll-rev;
}
.fp-marquee:hover .fp-marquee-track {
  animation-play-state: paused;
}
.fp-post {
  flex: 0 0 auto;
  width: 250px;
  height: 250px;
  object-fit: cover;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.12);
  background: #f1f1f1;
}
@keyframes fp-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes fp-scroll-rev {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
@media (max-width: 767px) {
  .section-showcase { padding: 64px 0; }
  .fp-post { width: 168px; height: 168px; border-radius: 14px; }
  .fp-marquee { gap: 14px; }
  .fp-marquee-track { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .fp-marquee-track { animation: none; }
}

/* "Powered by the best AI models" band — scrolling model pills (replaces the
   generic partner-logo strip). Curation + auto-routing is the selling point. */
/* Stack the partner block vertically: gold claim badge ABOVE the scrolling models,
   centered, with breathing room (template laid them side-by-side). */
.section-partner .partner-wrap {
  flex-direction: column;
  align-items: center;
  gap: 38px;
  padding: 84px 0;
}
.section-partner .fp-models-claim {
  display: inline-block;
  margin: 0;
  max-width: 92vw;
  text-align: center;
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: #4a3206;
  background: linear-gradient(135deg, #fdf3d3 0%, #f7d987 46%, #ecc25c 100%);
  padding: 16px 38px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 16px 38px rgba(193, 142, 24, 0.22);
}
.section-partner .fp-claim-em {
  font-weight: 600;
  background: linear-gradient(transparent 76%, rgba(150, 104, 12, 0.3) 0);
}

/* Model pills with an animated "moving colour" contour — the gradient flows around the
   border (like the generate prompt's glowing outline in the dashboard). */
.fp-models-band .fp-model-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 18px;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  color: #0e0e0e;
  border: 1.5px solid transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(90deg, #7c3aed, #db2777, #f6c453, #4f46e5, #7c3aed) border-box;
  background-size: auto, 300% 100%;
  background-position: center, 0% 50%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  animation: fp-chip-flow 3.5s linear infinite;
}
@keyframes fp-chip-flow {
  to { background-position: center, 300% 50%; }
}
.fp-models-band .fp-model-logo::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7c3aed, #db2777);
}
@media (prefers-reduced-motion: reduce) {
  .fp-models-band .fp-model-logo { animation: none; }
}
.fp-models-band .infiniteSlide {
  align-items: center;
}

/* Industry templates grid — replaced the case-study "Featured Works" cards with a
   compact grid of ready-to-use, per-industry post templates. */
#works .fp-templates-intro {
  max-width: 620px;
  margin: 18px auto 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--neutral-600, #6b6b6b);
}
.fp-templates-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.fp-template-card {
  display: flex;
  flex-direction: column;
  background-color: var(--neutral-100, #fff);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 22px;
  padding: 12px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.fp-template-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.12);
}
.fp-template-media {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #f1f1f1;
}
.fp-template-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.fp-template-card:hover .fp-template-media img {
  transform: scale(1.05);
}
.fp-template-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  padding: 6px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7c3aed, #db2777);
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.4);
}
.fp-template-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 8px 8px;
}
.fp-template-industry {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  color: var(--neutral-900, #141414);
}
.fp-template-sub {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--neutral-600, #6b6b6b);
}
.fp-template-go {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-900, #141414);
  background: rgba(0, 0, 0, 0.05);
  transition: background 0.2s ease, color 0.2s ease;
}
.fp-template-go .icon {
  font-size: 18px;
}
.fp-template-card:hover .fp-template-go {
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #db2777);
}
@media (max-width: 1199px) {
  .fp-templates-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .fp-templates-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  #works .fp-templates-intro { font-size: 15px; }
  .fp-template-industry { font-size: 14px; }
  .fp-template-sub { font-size: 12px; }
}

/* 4-up cards are far narrower than the template's original 2-up layout, so the
   72px price overflowed and the row-laid CTA got pushed out of the card. Resize
   the price and stack the price → CTA vertically, full-width. */
#pricing .pricing-item {
  padding: 30px 26px 34px;
}
#pricing .pricing-item .heading {
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
}
#pricing .pricing-item .heading .d-flex {
  flex-wrap: wrap;
  gap: 6px 10px;
}
#pricing .pricing-item .heading .price-number {
  font-size: 34px;
  line-height: 1;
}
#pricing .pricing-item .heading .price-per {
  font-size: 14px;
}
#pricing .pricing-item .heading .tf-btn {
  width: 100%;
  justify-content: center;
}
/* Blurb on top of the value list, not beside it (template defaults to 2 columns). */
#pricing .pricing-item .content {
  flex-direction: column;
  gap: 20px;
}
#pricing .pricing-item .content > * {
  width: 100%;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  #pricing .pricing-item {
    padding: 28px 20px 32px;
  }
  #pricing .pricing-item .heading .price-number {
    font-size: 30px;
  }
}

/* ----- Pricing: Monthly | Yearly segmented control ----- */
#pricing .fp-billing-toggle {
  display: flex;
  width: max-content;
  margin: 0 auto 56px;
  padding: 5px;
  gap: 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}
#pricing .fp-bill-opt {
  appearance: none;
  border: 0;
  cursor: pointer;
  background: transparent;
  color: var(--secondary);
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  padding: 12px 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: color 0.2s ease, background 0.25s ease, box-shadow 0.25s ease;
}
#pricing .fp-bill-opt:hover {
  color: #18181b;
}
#pricing .fp-bill-opt.is-active {
  color: #ffffff;
  background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.4);
}
#pricing .fp-bill-save {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  color: #3a2600;
  background: linear-gradient(135deg, #fde9a7 0%, #f6c453 45%, #e0a516 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

/* ----- Pricing: yearly = struck original on top, big price, billed-annually below ----- */
#pricing .fp-price-stack {
  display: flex;
  flex-direction: column;
}
/* struck original monthly price, sits above the headline price (yearly only).
   Collapsed + faded by default; eases open when the heading flips to yearly. */
/* Struck "was" price — always shown now (monthly strikes the pre-discount anchor,
   yearly strikes the monthly price). JS sets the value per billing mode. */
#pricing .fp-price-was {
  font-size: 16px;
  font-weight: 600;
  color: var(--secondary);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  margin-bottom: 4px;
}
/* "Billed annually" note under the price (yearly only) */
#pricing .fp-price-billed {
  font-size: 13px;
  font-weight: 600;
  color: var(--secondary);
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  transform: translateY(5px);
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.35s ease, transform 0.35s ease, margin 0.35s ease;
}
/* "11.89% OFF" discount badge — shown on monthly, hidden on yearly (yearly shows its
   own billed-annually deal instead). */
#pricing .fp-price-badge {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #15803d;
  background: rgba(34, 197, 94, 0.15);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
#pricing .heading.is-yearly .fp-price-badge {
  display: none;
}
#pricing .heading.is-yearly .fp-price-billed {
  opacity: 1;
  max-height: 3em;
  margin-top: 8px;
  transform: none;
}

/* Subtle crossfade-up on the headline price each time billing flips (JS retriggers it). */
@keyframes fp-num-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
#pricing .price-number.fp-num-anim {
  animation: fp-num-in 0.4s ease;
}
@media (prefers-reduced-motion: reduce) {
  #pricing .fp-price-was,
  #pricing .fp-price-billed { transition: none; }
  #pricing .price-number.fp-num-anim { animation: none; }
}
@media (max-width: 575px) {
  #pricing .fp-bill-opt { padding: 11px 18px; font-size: 14px; }
  #pricing .fp-bill-save { display: none; }
}

/* Cards start hidden (no flash); main.js reveals all four together, staggered,
   as soon as the billing toggle scrolls into view. */
#pricing .fp-card-reveal {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  #pricing .fp-card-reveal { opacity: 1; }
}

/* ----- Scale plan: dedicated human creative partner — prominent callout ----- */
#pricing .pricing-item .list-text li.fp-human-line {
  display: block;
  margin: 2px 0;
}
#pricing .fp-human-card {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 12px 13px;
  border-radius: 14px;
  /* warm cream fill (padding-box) + the generate prompt field's moving gradient contour (border-box) */
  border: 2px solid transparent;
  background:
    linear-gradient(135deg, #faf7f1 0%, #f1ebe0 100%) padding-box,
    linear-gradient(90deg, #2563eb, #06b6d4, #eab308, #ef4444, #111827, #2563eb) border-box;
  background-size: 100% 100%, 200% auto;
  animation: fp-ai-border-flow 5s linear infinite;
  box-shadow: 0 8px 22px rgba(120, 95, 60, 0.10);
}
@media (prefers-reduced-motion: reduce) {
  #pricing .fp-human-card { animation: none; }
}
#pricing .fp-human-ic {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: #1f2937;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.20);
}
#pricing .fp-human-ic svg {
  width: 18px;
  height: 18px;
}
#pricing .fp-human-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
#pricing .fp-human-badge {
  align-self: flex-start;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a6a39;
  background: rgba(176, 137, 84, 0.18);
  padding: 2px 8px;
  border-radius: 999px;
}
#pricing .fp-human-title {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
  color: #18181b;
}
#pricing .fp-human-desc {
  font-size: 12px;
  line-height: 1.4;
  color: var(--secondary);
}

/* FAQ answers: elegant open animation (max-height + fade/slide on the panel), with the
   body text force-visible so the theme/GSAP can't hide it. */
.section-faqs .accordion-asked .accordion-collapse {
  display: block !important;
  overflow: hidden;
  max-height: 0;
  opacity: 0 !important;
  transform: translateY(-4px);
  transition: max-height .42s cubic-bezier(.4, 0, .2, 1), opacity .3s ease, transform .35s ease;
}
.section-faqs .accordion-asked .accordion-collapse.show {
  max-height: 1000px;
  opacity: 1 !important;
  transform: none;
}
.section-faqs .accordion-asked .accordion-body { font-size: 16px; line-height: 1.6; }
.section-faqs .accordion-asked .accordion-body,
.section-faqs .accordion-asked .accordion-body * {
  color: #27272a !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .section-faqs .accordion-asked .accordion-collapse { transition: none; }
}

/* ============================================================================
   BLOG — light editorial pages that match the landing's light content sections.
   The fixed glass header floats over the top, so each blog page pads its top.
   ============================================================================ */
.fp-blog {
  padding: 150px 0 90px;
  background: #ffffff;
  color: #18181b;
}
.fp-blog .container { max-width: 1200px; }

/* ---- Index header ---- */
.fp-blog-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.fp-blog-eyebrow {
  display: inline-block;
  font-family: var(--mono-family, monospace);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand, #6c34fa);
  margin-bottom: 14px;
}
.fp-blog-h1 {
  font-family: var(--display-family, inherit);
  font-weight: 700;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #0b0b0e;
  margin-bottom: 16px;
}
.fp-blog-sub { font-size: 18px; line-height: 1.6; color: #52525b; }

/* ---- Category chips ---- */
.fp-blog-chips {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; margin: 0 0 44px;
}
.fp-blog-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid #e6e6ea; background: #fff; color: #3f3f46;
  font-size: 14px; font-weight: 600; transition: all .2s ease;
}
.fp-blog-chip:hover { border-color: #c8c8cf; color: #18181b; }
.fp-blog-chip.active { background: #0b0b0e; border-color: #0b0b0e; color: #fff; }
.fp-blog-chip-count {
  font-size: 11px; padding: 1px 7px; border-radius: 999px;
  background: rgba(0,0,0,.06); color: inherit;
}
.fp-blog-chip.active .fp-blog-chip-count { background: rgba(255,255,255,.18); }

/* ---- Card grid ---- */
.fp-blog-grid { row-gap: 28px; }
.fp-blog-card.article-blog {
  height: 100%; background: #fff;
  border: 1px solid #ececf0; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16,16,20,.04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.fp-blog-card.article-blog:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(16,16,20,.10);
  border-color: #e0e0e6;
}
.fp-blog-card .blog-image { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.fp-blog-card .blog-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s ease;
}
.fp-blog-card:hover .blog-image img { transform: scale(1.04); }
.fp-blog-card .blog-content { padding: 22px; height: calc(100% - 0px); }
.fp-blog-card-body { width: 100%; }
.fp-blog-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 13px; color: #71717a; margin-bottom: 12px;
}
.fp-blog-cat { color: var(--brand, #6c34fa); font-weight: 600; }
.fp-blog-dot { opacity: .5; }
.fp-blog-title {
  font-family: var(--display-family, inherit);
  font-weight: 700; font-size: 20px; line-height: 1.3;
  color: #0b0b0e; margin: 0 0 10px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fp-blog-card:hover .fp-blog-title { color: var(--brand, #6c34fa); }
.fp-blog-excerpt {
  font-size: 14.5px; line-height: 1.6; color: #52525b; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.fp-blog-readmore {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px; font-size: 14px; color: #0b0b0e;
}
.fp-blog-readmore .icon { transform: rotate(45deg); font-size: 14px; transition: transform .2s ease; }
.fp-blog-readmore:hover { color: var(--brand, #6c34fa); }
.fp-blog-readmore:hover .icon { transform: rotate(45deg) translate(2px, -2px); }
.fp-blog-empty { text-align: center; padding: 60px 0; font-size: 16px; }

/* ---- Pagination (override the dark template default for the light page) ---- */
.fp-blog-pagination { margin-top: 48px; }
.fp-blog-pagination .pagination-item {
  background: #fff; color: #3f3f46; border: 1px solid #e6e6ea; box-shadow: none;
  border-radius: 12px;
}
.fp-blog-pagination .pagination-item:hover,
.fp-blog-pagination .pagination-item.active {
  background: #0b0b0e; color: #fff; border-color: #0b0b0e;
}

/* ---- Article ---- */
.fp-blog-article .container { max-width: 820px; }
.fp-article-head { text-align: center; margin-bottom: 32px; }
.fp-article-meta { justify-content: center; font-size: 14px; margin-bottom: 18px; }
.fp-article-title {
  font-family: var(--display-family, inherit);
  font-weight: 700; font-size: clamp(30px, 4.6vw, 48px);
  line-height: 1.08; letter-spacing: -0.02em; color: #0b0b0e; margin-bottom: 18px;
}
.fp-article-lead { font-size: 19px; line-height: 1.6; color: #52525b; max-width: 680px; margin: 0 auto; }
.fp-article-cover {
  border-radius: 18px; overflow: hidden; margin: 8px 0 44px;
  box-shadow: 0 24px 60px rgba(16,16,20,.14);
}
.fp-article-cover img { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; }

/* ---- Prose ---- */
.fp-blog-prose { font-size: 18px; line-height: 1.78; color: #27272a; }
.fp-blog-prose > *:first-child { margin-top: 0; }
.fp-blog-prose h2 {
  font-family: var(--display-family, inherit);
  font-weight: 700; font-size: 28px; line-height: 1.25;
  color: #0b0b0e; margin: 1.9em 0 .6em; letter-spacing: -0.01em;
}
.fp-blog-prose h3 {
  font-weight: 700; font-size: 22px; color: #0b0b0e; margin: 1.6em 0 .5em;
}
.fp-blog-prose p { margin: 0 0 1.2em; }
.fp-blog-prose a { color: var(--brand, #6c34fa); text-decoration: underline; text-underline-offset: 2px; }
.fp-blog-prose ul, .fp-blog-prose ol { margin: 0 0 1.3em; padding-left: 1.3em; }
.fp-blog-prose li { margin-bottom: .5em; }
.fp-blog-prose li::marker { color: var(--brand, #6c34fa); }
.fp-blog-prose strong { color: #0b0b0e; font-weight: 700; }
.fp-blog-prose blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 22px;
  border-left: 3px solid var(--brand, #6c34fa); color: #3f3f46; font-style: italic;
}
.fp-blog-prose code {
  font-family: var(--mono-family, monospace); font-size: .9em;
  background: #f4f4f5; padding: 2px 6px; border-radius: 6px;
}
.fp-blog-prose pre {
  background: #0b0b0e; color: #f4f4f5; padding: 18px 20px; border-radius: 12px;
  overflow: auto; margin: 1.5em 0;
}
.fp-blog-prose pre code { background: none; padding: 0; }
.fp-blog-prose img { max-width: 100%; border-radius: 12px; margin: 1.5em 0; }
.fp-blog-prose hr { border: none; border-top: 1px solid #ececf0; margin: 2.2em 0; }

/* ---- Tags + footer + related ---- */
.fp-article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 40px 0 0; }
.fp-blog-tag {
  font-size: 13px; color: #52525b; background: #f4f4f5;
  padding: 5px 12px; border-radius: 999px;
}
.fp-article-foot { margin: 36px 0; padding-top: 28px; border-top: 1px solid #ececf0; }
.fp-article-more { margin-top: 56px; padding-top: 40px; border-top: 1px solid #ececf0; }
.fp-blog-h3 {
  font-family: var(--display-family, inherit);
  font-weight: 700; font-size: 24px; color: #0b0b0e; margin-bottom: 22px;
}
.fp-more-card { display: block; }
.fp-more-card img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 12px; margin-bottom: 12px;
  transition: transform .3s ease;
}
.fp-more-card:hover img { transform: translateY(-3px); }
.fp-more-title {
  display: block; font-weight: 600; font-size: 15px; line-height: 1.4; color: #18181b;
}
.fp-more-card:hover .fp-more-title { color: var(--brand, #6c34fa); }
@media (max-width: 767px) {
  .fp-blog { padding: 120px 0 64px; }
  .fp-article-more .row { row-gap: 24px; }
}

/* ---- Article FAQ (also emitted as FAQPage JSON-LD for SEO / AI answers) ---- */
.fp-article-faq { margin-top: 48px; padding-top: 36px; border-top: 1px solid #ececf0; }
.fp-faq-list { margin: 18px 0 0; }
.fp-faq-item { padding: 18px 0; border-bottom: 1px solid #f0f0f3; }
.fp-faq-item:first-child { border-top: 1px solid #f0f0f3; }
.fp-faq-q {
  font-family: var(--display-family, inherit);
  font-weight: 700; font-size: 18px; line-height: 1.4; color: #0b0b0e; margin: 0 0 8px;
}
.fp-faq-a { margin: 0; font-size: 16px; line-height: 1.7; color: #52525b; }

/* Temporarily hidden: "Industry templates, ready to use" (#works) section. */
#works { display: none !important; }

/* Temporarily hidden: Creative Director landing section. */
#creative-director { display: none !important; }

/* Contact: drop the form, heading & details — show only a glowing gold "Start here" button. */
#contact .form-contact { display: none !important; }
#contact .row > .col-lg-6:has(.form-contact) { display: none !important; }
#contact .row > .col-lg-6:first-child { flex: 0 0 100%; max-width: 820px; margin-inline: auto; }
#contact .col-left { display: flex; flex-direction: column; align-items: center; text-align: center; }
#contact .heading-section, #contact .contact-item { display: none !important; }
.fp-start-btn {
  display: inline-flex; align-items: center; justify-content: center; margin: 8px auto;
  padding: 17px 46px; border-radius: 999px;
  font-family: var(--display-family, inherit); font-weight: 800; font-size: 19px; color: #3a2600;
  background: linear-gradient(135deg, #fde9a7 0%, #f6c453 38%, #e0a516 70%, #b9791a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 6px 0 #a9760f,
    0 0 0 4px rgba(246,196,83,.25),
    0 18px 50px rgba(246,196,83,.70),
    0 0 70px rgba(246,196,83,.55);
  transition: transform .2s ease, box-shadow .2s ease;
}
.fp-start-btn:hover {
  transform: translateY(-2px); color: #3a2600;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 8px 0 #a9760f,
    0 0 0 5px rgba(246,196,83,.32),
    0 24px 64px rgba(246,196,83,.85),
    0 0 90px rgba(246,196,83,.72);
}
.fp-start-btn:active { transform: translateY(2px); }

/* Landing: Creative Director — light feature section with a flowing chat demo */
.fp-cd2 { position: relative; overflow: hidden; background: linear-gradient(180deg, #ffffff 0%, #f6f4fc 100%); padding: 96px 0; }
.fp-cd2-glow { position: absolute; inset: -30% -10% auto -10%; height: 80%; pointer-events: none; filter: blur(30px); opacity: .55;
  background:
    radial-gradient(38% 60% at 20% 22%, rgba(37,99,235,.22), transparent 70%),
    radial-gradient(38% 60% at 82% 14%, rgba(6,182,212,.18), transparent 70%); }
.fp-cd2-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 991px) { .fp-cd2 { padding: 64px 0; } .fp-cd2-inner { grid-template-columns: 1fr; gap: 36px; } }

.fp-cd2-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #2563eb; background: rgba(37,99,235,.10); border: 1px solid rgba(37,99,235,.22); padding: 6px 14px; border-radius: 999px; }
.fp-cd2-spark { display: inline-flex; color: #2563eb; }
.fp-cd2-eyebrow svg { width: 15px; height: 15px; }
.fp-cd2-title { margin: 18px 0 0; font-family: var(--display-family, inherit); font-weight: 800; font-size: clamp(32px, 5vw, 52px); line-height: 1.06; letter-spacing: -.02em; color: #0b0b14; }
.fp-cd2-grad { background: linear-gradient(100deg, #2563eb, #4f46e5 45%, #06b6d4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fp-cd2-lead { margin: 18px 0 0; max-width: 520px; font-size: 18px; line-height: 1.6; color: #52525b; }
.fp-cd2-points { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fp-cd2-points li { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; color: #27272a; }
.fp-cd2-check { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 999px; background: linear-gradient(135deg, #2563eb, #4f46e5); color: #fff; font-size: 13px; font-weight: 800; }
.fp-cd2-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 30px; padding: 14px 26px; border-radius: 999px; font-weight: 700; font-size: 16px; color: #fff; background: linear-gradient(100deg, #2563eb, #4f46e5); box-shadow: 0 10px 26px rgba(37,99,235,.32); transition: transform .2s ease, box-shadow .2s ease; }
.fp-cd2-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(79,70,229,.40); color: #fff; }

/* Chat demo card (light, ChatGPT/Claude-style flowing conversation) */
.fp-cd2-card { position: relative; border-radius: 24px; padding: 18px; background: #fff; border: 1px solid rgba(0,0,0,.07); box-shadow: 0 24px 60px rgba(37,99,235,.12); }
.fp-cd2-head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid rgba(0,0,0,.06); }
.fp-cd2-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: linear-gradient(135deg, #2563eb, #4f46e5); color: #fff; }
.fp-cd2-avatar svg { width: 20px; height: 20px; }
.fp-cd2-name { font-size: 14px; font-weight: 700; color: #0b0b14; line-height: 1.1; }
.fp-cd2-sub { font-size: 12px; color: #71717a; }
.fp-cd2-live { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: #16a34a; }
.fp-cd2-flow { display: flex; flex-direction: column; align-items: flex-start; min-height: 244px; padding: 6px 2px; }
.fp-cd2-bubble, .fp-cd2-typing, .fp-cd2-chip { overflow: hidden; will-change: max-height, opacity; }
.fp-cd2-bubble { font-size: 14px; font-weight: 600; padding: 10px 14px; border-radius: 16px; max-width: 90%; }
.fp-cd2-user { align-self: flex-end; background: linear-gradient(135deg, #2563eb, #4f46e5); color: #fff; border-bottom-right-radius: 5px; }
.fp-cd2-ai { align-self: flex-start; background: #eef2f7; color: #18181b; border-bottom-left-radius: 5px; }
.fp-cd2-typing { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; background: #eef2f7; border-radius: 14px; padding: 11px 14px; }
.fp-cd2-typing i { width: 6px; height: 6px; border-radius: 999px; background: #94a3b8; display: inline-block; animation: cd-dot 1.2s infinite; }
.fp-cd2-typing i:nth-child(2) { animation-delay: .2s; }
.fp-cd2-typing i:nth-child(3) { animation-delay: .4s; }
.fp-cd2-chip { align-self: stretch; display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 14px; background: #f2f6ff; border: 1px solid rgba(37,99,235,.16); color: #18181b; font-size: 14px; font-weight: 600; }
.fp-cd2-chip b { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 999px; background: linear-gradient(135deg, #2563eb, #4f46e5); color: #fff; font-size: 12px; font-weight: 800; }
.fp-cd2-input { margin-top: 8px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(0,0,0,.1); border-radius: 999px; padding: 9px 9px 9px 16px; color: #9ca3af; font-size: 14px; }
.fp-cd2-send { margin-left: auto; display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 999px; background: linear-gradient(135deg, #2563eb, #4f46e5); color: #fff; font-size: 15px; }

/* Flowing reveal — timed within one shared loop so it restarts cleanly. */
.fp-cd2-flow > * { opacity: 0; max-height: 0; margin: 0; }
.cd-user { animation: cd-user 14s ease infinite; }
.cd-type { animation: cd-type 14s ease infinite; }
.cd-ai { animation: cd-ai 14s ease infinite; }
.cd-c1 { animation: cd-c1 14s ease infinite; }
.cd-c2 { animation: cd-c2 14s ease infinite; }
.cd-c3 { animation: cd-c3 14s ease infinite; }
@keyframes cd-user { 0%,3%{opacity:0;max-height:0;margin-bottom:0;transform:translateY(6px)} 6%{opacity:1;max-height:60px;margin-bottom:10px;transform:none} 93%{opacity:1;max-height:60px;margin-bottom:10px} 98%,100%{opacity:0;max-height:0;margin-bottom:0} }
@keyframes cd-type { 0%,9%{opacity:0;max-height:0;margin-bottom:0} 12%{opacity:1;max-height:40px;margin-bottom:10px} 19%{opacity:1;max-height:40px;margin-bottom:10px} 22%,100%{opacity:0;max-height:0;margin-bottom:0} }
@keyframes cd-ai { 0%,22%{opacity:0;max-height:0;margin-bottom:0;transform:translateY(6px)} 25%{opacity:1;max-height:50px;margin-bottom:10px;transform:none} 93%{opacity:1;max-height:50px;margin-bottom:10px} 98%,100%{opacity:0;max-height:0;margin-bottom:0} }
@keyframes cd-c1 { 0%,34%{opacity:0;max-height:0;margin-bottom:0;transform:translateY(8px)} 37%{opacity:1;max-height:54px;margin-bottom:8px;transform:none} 93%{opacity:1;max-height:54px;margin-bottom:8px} 98%,100%{opacity:0;max-height:0;margin-bottom:0} }
@keyframes cd-c2 { 0%,42%{opacity:0;max-height:0;margin-bottom:0;transform:translateY(8px)} 45%{opacity:1;max-height:54px;margin-bottom:8px;transform:none} 93%{opacity:1;max-height:54px;margin-bottom:8px} 98%,100%{opacity:0;max-height:0;margin-bottom:0} }
@keyframes cd-c3 { 0%,50%{opacity:0;max-height:0;margin-bottom:0;transform:translateY(8px)} 53%{opacity:1;max-height:54px;margin-bottom:0;transform:none} 93%{opacity:1;max-height:54px;margin-bottom:0} 98%,100%{opacity:0;max-height:0;margin-bottom:0} }
@keyframes cd-dot { 0%,100%{opacity:.35;transform:translateY(0)} 50%{opacity:1;transform:translateY(-2px)} }
@media (prefers-reduced-motion: reduce) { .fp-cd2-flow > * { opacity: 1; max-height: none; margin-bottom: 8px; animation: none; } .fp-cd2-typing { display: none; } }

/* ===== "Flows" section — the real canvas, cycling through four saved flows ===== */
/* Build animation runs on a 13s loop; the CONTENT swaps on a 52s loop (4 × 13s), so each
   pass through the canvas shows a different product, brief and result. Slot visibility sits on a
   wrapper and the reveal on the image inside it — two animations on one element would fight over
   opacity, nested they multiply. */
.section-flows .fq-frame {
  max-width:1120px; margin:0 auto; border-radius:22px; overflow:hidden; background:#fff;
  border:1px solid rgba(0,0,0,.08); box-shadow:0 34px 90px rgba(20,12,45,.14),0 4px 14px rgba(0,0,0,.05);
}
.section-flows .fq-bar {
  display:flex; align-items:center; gap:12px; padding:12px 18px;
  border-bottom:1px solid rgba(0,0,0,.07); background:linear-gradient(180deg,#fcfcfe,#f6f6f9);
}
.section-flows .fq-dots { display:inline-flex; gap:6px; }
.section-flows .fq-dots i { width:10px; height:10px; border-radius:50%; background:rgba(0,0,0,.13); }
.section-flows .fq-title { min-width:220px; font-size:13px; font-weight:700; color:#18181b; }
.section-flows .fq-title .fq-slot { display:flex; align-items:center; white-space:nowrap; }
.section-flows .fq-cost {
  margin-left:auto; font-family:var(--font-mono,monospace); font-size:11px; font-weight:700; color:#3a2600;
  padding:4px 10px; border-radius:999px; opacity:0;
  background:linear-gradient(135deg,#fde9a7,#f6c453 45%,#e0a516); animation:fqCost 13s ease-out infinite;
}
.section-flows .fq-run {
  display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:#fff;
  padding:7px 14px; border-radius:999px; background:linear-gradient(135deg,#fd3a25,#f5772e);
  box-shadow:0 6px 18px rgba(253,58,37,.28); animation:fqPress 13s ease-in-out infinite;
}
.section-flows .fq-run em {
  width:11px; height:11px; border-radius:50%; opacity:0;
  border:2px solid rgba(255,255,255,.45); border-top-color:#fff;
  animation:fqSpin 13s linear infinite, fqRot .7s linear infinite;
}

.section-flows .fq-stage {
  position:relative; overflow:hidden;
  background:radial-gradient(circle at 1px 1px, rgba(0,0,0,.07) 1px, transparent 0) 0 0 / 20px 20px,#fbfbfd;
}
.section-flows .fq-board {
  position:relative; width:100%; aspect-ratio:1140/720; transform-origin:26% 36%;
  animation:fqZoom 13s cubic-bezier(.3,0,.2,1) infinite;
}
.section-flows .fq-wires { position:absolute; inset:0; width:100%; height:100%; }
.section-flows .fq-w { fill:none; stroke:#c8c8d0; stroke-width:2; stroke-linecap:round; stroke-dasharray:600; opacity:0; }
.section-flows .fq-w1 { animation:fqW1 13s cubic-bezier(.4,0,.2,1) infinite; }
.section-flows .fq-w2 { animation:fqW2 13s cubic-bezier(.4,0,.2,1) infinite; }
/* The model wire draws with the product wire; without its own rule it inherited .fq-w's
   opacity:0 and never appeared. */
.section-flows .fq-w3 { animation:fqW2 13s cubic-bezier(.4,0,.2,1) infinite; }
.section-flows .fq-w4 { animation:fqW4 13s cubic-bezier(.4,0,.2,1) infinite; }
.section-flows .fq-w5 { animation:fqW5 13s cubic-bezier(.4,0,.2,1) infinite; }

.section-flows .fq-node {
  position:absolute; border-radius:12px; overflow:hidden; background:#fff; opacity:0;
  border:1px solid rgba(0,0,0,.09); box-shadow:0 8px 22px rgba(0,0,0,.07);
  animation-duration:13s; animation-timing-function:cubic-bezier(.22,1,.36,1); animation-iteration-count:infinite;
}
.section-flows .fq-n1 { animation-name:fqN1; }
.section-flows .fq-n2 { animation-name:fqN2; }
.section-flows .fq-n4 { animation-name:fqN4; }
.section-flows .fq-n5 { animation-name:fqN5; }
.section-flows .fq-n6 { animation-name:fqN6; }
.section-flows .fq-n4, .section-flows .fq-n6 { box-shadow:0 8px 22px rgba(0,0,0,.07),0 0 0 2px rgba(16,185,129,.5); }

.section-flows .fq-head { display:flex; align-items:center; gap:6px; padding:5px 8px; border-bottom:1px solid rgba(0,0,0,.07); background:#fbfbfd; }
.section-flows .fq-kind { font-family:var(--font-mono,monospace); font-size:7.5px; font-weight:800; letter-spacing:.09em; padding:2px 5px; border-radius:4px; }
.section-flows .fq-k-in { color:#8a6a12; background:rgba(246,196,83,.30); }
.section-flows .fq-k-txt { color:#9a4f10; background:rgba(245,119,46,.16); }
.section-flows .fq-k-img { color:#b3341f; background:rgba(253,58,37,.12); }
.section-flows .fq-name { margin-left:auto; font-size:9px; font-weight:700; color:#18181b; }
.section-flows .fq-tick { font-size:9px; color:#10b981; opacity:0; }
.section-flows .fq-n4 .fq-tick { animation:fqT4 13s ease-out infinite; }
.section-flows .fq-n6 .fq-tick { animation:fqT6 13s ease-out infinite; }
.section-flows .fq-n1 .fq-tick, .section-flows .fq-n2 .fq-tick, .section-flows .fq-n5 .fq-tick { opacity:1; }

.section-flows .fq-body { padding:7px; }
.section-flows .fq-btn { margin:0 6px 6px; padding:4px 0; text-align:center; font-size:8px; font-weight:600; color:#3f3f46; border:1px solid rgba(0,0,0,.1); border-radius:6px; background:#fff; }

/* swap wrappers: one stacking context per slot */
.section-flows .fq-swap { display:grid; }
.section-flows .fq-slot { grid-area:1/1; min-width:0; opacity:0; animation-duration:52s; animation-timing-function:steps(1,end); animation-iteration-count:infinite; }
/* text slots need a readable box, image slots a fixed frame so heights never shift */
.section-flows .fq-prompt { padding:2px 3px 4px; font-size:9px; line-height:1.6; color:var(--neutral-600,#6b6b6b); }
.section-flows .fq-prompt .fq-slot {
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  min-height:calc(3 * 9px * 1.6);   /* every brief reserves the same three lines */
}
/* A grid row is auto-sized by default, so an img at height:100% resolves against nothing and
   spills. minmax(0,1fr) pins the row to the frame's aspect-ratio height. */
/* Square for products (works for both the portrait mug and the landscape bag), 3:4 for the
   model. A 4:3 frame turned every portrait input into a letterboxed sliver. */
.section-flows .fq-frame4, .section-flows .fq-frame34 {
  background:#f6f6f8; border-radius:7px; overflow:hidden;
  display:grid; grid-template-rows:minmax(0,1fr);
}
.section-flows .fq-frame4 { aspect-ratio:1/1; }
.section-flows .fq-frame34 { aspect-ratio:3/4; }
.section-flows .fq-square { display:grid; grid-template-rows:minmax(0,1fr); }
.section-flows .fq-frame4 > .fq-slot, .section-flows .fq-square > .fq-slot { min-height:0; overflow:hidden; }
.section-flows .fq-square { aspect-ratio:1/1; }
/* contain, not cover: products differ in shape and must never be cropped */
.section-flows .fq-frame4 img, .section-flows .fq-frame34 img { width:100%; height:100%; object-fit:contain; display:block; }
.section-flows .fq-square img { width:100%; height:100%; object-fit:cover; border-radius:7px; display:block; }

.section-flows .fq-render { position:relative; }
.section-flows .fq-render .fq-square img { opacity:0; }
.section-flows .fq-n4 .fq-square img { animation:fqR4 13s cubic-bezier(.22,1,.36,1) infinite; }
.section-flows .fq-n6 .fq-square img { animation:fqR6 13s cubic-bezier(.22,1,.36,1) infinite; }
.section-flows .fq-gen {
  position:absolute; inset:6px; z-index:2; border-radius:7px; overflow:hidden; opacity:0;
  display:flex; align-items:center; justify-content:center; background:#f3f3f7; animation:fqG4 13s linear infinite;
}
.section-flows .fq-gen2 { animation-name:fqG6; }
.section-flows .fq-gen em { font-family:var(--font-mono,monospace); font-style:normal; font-size:8px; color:#8a8a95; }
.section-flows .fq-genbar { position:absolute; inset:0; background:linear-gradient(100deg,transparent 22%,rgba(253,58,37,.14) 50%,transparent 78%); animation:fqBar 1.3s linear infinite; }

.section-flows .fq-port {
  position:absolute; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%;
  background:#fd3a25; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.05); opacity:0;
  animation-duration:13s; animation-timing-function:cubic-bezier(.22,1,.36,1); animation-iteration-count:infinite;
}
.section-flows .fq-p1 { animation-name:fqP1; }
.section-flows .fq-p2 { animation-name:fqP2; }
.section-flows .fq-p3 { animation-name:fqP3; }
.section-flows .fq-p4 { animation-name:fqP4; }

@keyframes fqN1 {
  0%,3.08% {opacity:0;transform:translateY(10px) scale(.95);}
  4.77% {opacity:1;transform:translateY(-2px) scale(1.015);}
  6.15% {opacity:1;transform:none;}
  87.69% {opacity:1;transform:none;}
  95.38%,100% {opacity:0;transform:scale(.98);} }
@keyframes fqN2 {
  0%,6.92% {opacity:0;transform:translateY(10px) scale(.95);}
  8.62% {opacity:1;transform:translateY(-2px) scale(1.015);}
  10.0% {opacity:1;transform:none;}
  87.69% {opacity:1;transform:none;}
  95.38%,100% {opacity:0;transform:scale(.98);} }
@keyframes fqN4 {
  0%,18.46% {opacity:0;transform:translateY(10px) scale(.95);}
  20.15% {opacity:1;transform:translateY(-2px) scale(1.015);}
  21.54% {opacity:1;transform:none;}
  87.69% {opacity:1;transform:none;}
  95.38%,100% {opacity:0;transform:scale(.98);} }
@keyframes fqN5 {
  0%,41.54% {opacity:0;transform:translateY(10px) scale(.95);}
  43.23% {opacity:1;transform:translateY(-2px) scale(1.015);}
  44.62% {opacity:1;transform:none;}
  87.69% {opacity:1;transform:none;}
  95.38%,100% {opacity:0;transform:scale(.98);} }
@keyframes fqN6 {
  0%,50.0% {opacity:0;transform:translateY(10px) scale(.95);}
  51.69% {opacity:1;transform:translateY(-2px) scale(1.015);}
  53.08% {opacity:1;transform:none;}
  87.69% {opacity:1;transform:none;}
  95.38%,100% {opacity:0;transform:scale(.98);} }
@keyframes fqW1 {
  0%,13.08% {stroke-dashoffset:600;opacity:0;} 13.54% {opacity:1;}
  19.23% {stroke-dashoffset:0;opacity:1;} 87.69% {stroke-dashoffset:0;opacity:1;}
  95.38%,100% {stroke-dashoffset:0;opacity:0;} }
@keyframes fqW2 {
  0%,14.23% {stroke-dashoffset:600;opacity:0;} 14.69% {opacity:1;}
  20.38% {stroke-dashoffset:0;opacity:1;} 87.69% {stroke-dashoffset:0;opacity:1;}
  95.38%,100% {stroke-dashoffset:0;opacity:0;} }
@keyframes fqW4 {
  0%,45.38% {stroke-dashoffset:600;opacity:0;} 45.85% {opacity:1;}
  51.54% {stroke-dashoffset:0;opacity:1;} 87.69% {stroke-dashoffset:0;opacity:1;}
  95.38%,100% {stroke-dashoffset:0;opacity:0;} }
@keyframes fqW5 {
  0%,46.54% {stroke-dashoffset:600;opacity:0;} 47.0% {opacity:1;}
  52.69% {stroke-dashoffset:0;opacity:1;} 87.69% {stroke-dashoffset:0;opacity:1;}
  95.38%,100% {stroke-dashoffset:0;opacity:0;} }
@keyframes fqG4 {
  0%,21.54% {opacity:0;} 22.69%,33.85% {opacity:1;} 36.92%,100% {opacity:0;} }
@keyframes fqG6 {
  0%,53.08% {opacity:0;} 54.23%,65.38% {opacity:1;} 68.46%,100% {opacity:0;} }
@keyframes fqR4 {
  0%,33.85% {opacity:0;transform:scale(1.05);} 38.08% {opacity:1;transform:scale(1);}
  87.69% {opacity:1;} 95.38%,100% {opacity:0;} }
@keyframes fqR6 {
  0%,65.38% {opacity:0;transform:scale(1.05);} 69.62% {opacity:1;transform:scale(1);}
  87.69% {opacity:1;} 95.38%,100% {opacity:0;} }
@keyframes fqT4 {
  0%,37.69% {opacity:0;transform:scale(.4);} 39.62% {opacity:1;transform:scale(1);}
  87.69% {opacity:1;} 95.38%,100% {opacity:0;} }
@keyframes fqT6 {
  0%,69.23% {opacity:0;transform:scale(.4);} 71.15% {opacity:1;transform:scale(1);}
  87.69% {opacity:1;} 95.38%,100% {opacity:0;} }
@keyframes fqP1 {
  0%,13.08% {opacity:0;transform:translateY(10px) scale(.95);}
  14.77% {opacity:1;transform:translateY(-2px) scale(1.015);}
  16.15% {opacity:1;transform:none;}
  87.69% {opacity:1;transform:none;}
  95.38%,100% {opacity:0;transform:scale(.98);} }
@keyframes fqP2 {
  0%,14.23% {opacity:0;transform:translateY(10px) scale(.95);}
  15.92% {opacity:1;transform:translateY(-2px) scale(1.015);}
  17.31% {opacity:1;transform:none;}
  87.69% {opacity:1;transform:none;}
  95.38%,100% {opacity:0;transform:scale(.98);} }
@keyframes fqP3 {
  0%,45.38% {opacity:0;transform:translateY(10px) scale(.95);}
  47.08% {opacity:1;transform:translateY(-2px) scale(1.015);}
  48.46% {opacity:1;transform:none;}
  87.69% {opacity:1;transform:none;}
  95.38%,100% {opacity:0;transform:scale(.98);} }
@keyframes fqP4 {
  0%,46.54% {opacity:0;transform:translateY(10px) scale(.95);}
  48.23% {opacity:1;transform:translateY(-2px) scale(1.015);}
  49.62% {opacity:1;transform:none;}
  87.69% {opacity:1;transform:none;}
  95.38%,100% {opacity:0;transform:scale(.98);} }
@keyframes fqZoom { 0% {transform:scale(1.14);} 32.31% {transform:scale(1);}
  87.69% {transform:scale(1);} 100% {transform:scale(1.14);} }
@keyframes fqPress { 0%,15.38% {transform:none;} 16.31% {transform:scale(.94);}
  17.69% {transform:scale(1);} 100% {transform:none;} }
@keyframes fqSpin { 0%,15.38% {opacity:0;} 16.92%,65.38% {opacity:1;} 67.69%,100% {opacity:0;} }
@keyframes fqCost { 0%,68.46% {opacity:0;transform:translateY(-4px);} 71.54% {opacity:1;transform:none;}
  87.69% {opacity:1;} 95.38%,100% {opacity:0;} }
@keyframes fqBar { 0%{transform:translateX(-100%);} 100%{transform:translateX(230%);} }
@keyframes fqRot { to { transform:rotate(360deg); } }





.section-flows .fp-flow-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; max-width:1120px; margin:42px auto 0; }
.section-flows .fp-flow-fact { display:flex; align-items:flex-start; gap:11px; font-size:14px; line-height:1.5; color:var(--neutral-600,#6b6b6b); }
.section-flows .fp-flow-factn {
  flex:none; width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-mono,monospace); font-size:11px; font-weight:800; color:#3a2600;
  background:linear-gradient(135deg,#fde9a7,#f6c453 45%,#e0a516);
}

@media (max-width:767px) {
  .section-flows .fq-board { animation:none; }
  .section-flows .fq-node,.section-flows .fq-port,.section-flows .fq-w { animation:none; opacity:1; stroke-dashoffset:0; }
  .section-flows .fq-square img { animation:none; opacity:1; }
  .section-flows .fq-gen { display:none; }
  .section-flows .fq-tick { opacity:1; }
  .section-flows .fp-flow-facts { grid-template-columns:1fr; gap:12px; }
}
@media (prefers-reduced-motion:reduce) {
  .section-flows .fq-board,.section-flows .fq-node,.section-flows .fq-port,.section-flows .fq-w,
  .section-flows .fq-square img,.section-flows .fq-cost,.section-flows .fq-run,.section-flows .fq-genbar,
  .section-flows .fq-tick { animation:none; opacity:1; transform:none; stroke-dashoffset:0; }
  .section-flows .fq-gen,.section-flows .fq-run em { display:none; }
  /* still cycle the examples, just without motion */
}

  0.0%,33.3077% { opacity:1; visibility:visible; }
  33.3333%,66.641% { opacity:1; visibility:visible; }
  66.6667%,99.9744% { opacity:1; visibility:visible; }

/* The pot flow really does take two image inputs; the other examples take one. This node and
   its wire ride the slot animation, so they exist only while that flow is on screen. */
.section-flows .fq-extra { position:absolute; display:block; }
.section-flows .fq-extra > .fq-node { position:relative; left:auto; top:auto; width:100%; }
.section-flows .fq-extra > .fq-n3 { animation-name:fqN2; }
.section-flows g.fq-slot { animation-duration:52s; animation-timing-function:steps(1,end); animation-iteration-count:infinite; opacity:0; }

.section-flows .fq-s0 { animation-name: fqSlot0; }
.section-flows .fq-s1 { animation-name: fqSlot1; }
.section-flows .fq-s2 { animation-name: fqSlot2; }
.section-flows .fq-s3 { animation-name: fqSlot3; }
@keyframes fqSlot0 {
  0%,0.0% { opacity:0; visibility:hidden; }
  0.0%,24.9808% { opacity:1; visibility:visible; }
  25.0%,100% { opacity:0; visibility:hidden; }
}
@keyframes fqSlot1 {
  0%,24.9808% { opacity:0; visibility:hidden; }
  25.0%,49.9808% { opacity:1; visibility:visible; }
  50.0%,100% { opacity:0; visibility:hidden; }
}
@keyframes fqSlot2 {
  0%,49.9808% { opacity:0; visibility:hidden; }
  50.0%,74.9808% { opacity:1; visibility:visible; }
  75.0%,100% { opacity:0; visibility:hidden; }
}
@keyframes fqSlot3 {
  0%,74.9808% { opacity:0; visibility:hidden; }
  75.0%,99.9808% { opacity:1; visibility:visible; }
  100.0%,100% { opacity:0; visibility:hidden; }
}