/* ============================================================
   FOUNDRY — FormForge product skin (blue #3B82F6)
   Loads after foundry.css. Two jobs:
   1) Retint the suite "violet light source" to the FormForge
      blue accent so the whole page reads as FormForge.
   2) Product-landing components + the form-builder signature.
   ============================================================ */

/* ---- 1. Accent skin ---------------------------------------- */
body.foundry {
  --fdry-violet:    #3B82F6;   /* product accent becomes the light source */
  --fdry-violet-lt: #60A5FA;
  --fdry-acc:       #3B82F6;
  --fdry-bg:        #06090F;
  --fdry-bg-2:      #0A1222;
}
/* Ambient light retint */
body.foundry::before {
  background:
    radial-gradient(135% 85% at 62% -6%, rgba(59,130,246,.24), transparent 60%),
    radial-gradient(95% 65% at 4% 0%, rgba(96,165,250,.10), transparent 58%),
    linear-gradient(180deg, var(--fdry-bg) 0%, var(--fdry-bg-2) 40%, var(--fdry-bg) 100%);
}
.foundry .fdry-grad {
  background: linear-gradient(92deg, var(--fdry-violet-lt), #fff 58%, var(--fdry-violet-lt));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.foundry .fdry-quote__av {
  background: linear-gradient(135deg, var(--fdry-violet), #1d4ed8);
}

/* ---- 2. Hero art shell ------------------------------------- */
.foundry .fdry-hero__art { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; }

/* ---- 3. Hero: self-assembling form card -------------------- */
.foundry .ff-hero-art { position: relative; }

.foundry .ff-build {
  width: 100%;
  max-width: 460px;
  padding: 0;
  border-radius: var(--fdry-r-lg);
  box-shadow: 0 0 60px rgba(59,130,246,.15), var(--fdry-shadow);
}

/* Card chrome */
.foundry .ff-build__top {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.foundry .ff-build__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
}
.foundry .ff-build__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .875rem;
  color: var(--fdry-ink-faint);
  margin-left: 6px;
}
.foundry .ff-build__status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fdry-violet-lt);
}
.foundry .ff-build__status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fdry-violet-lt);
  box-shadow: 0 0 10px var(--fdry-violet-lt);
  animation: ff-pulse 1.4s ease-in-out infinite;
}
@keyframes ff-pulse {
  0%, 100% { opacity: .35; transform: scale(.8); }
  50%       { opacity: 1;   transform: scale(1.15); }
}

/* Card body / fields */
.foundry .ff-build__body {
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 240px;
}

/* Individual form field rows */
.foundry .ff-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .32s var(--fdry-ease), transform .32s var(--fdry-ease);
}
/* Static/no-JS fallback: fields visible from the start */
.foundry .ff-field.is-visible,
.no-js .foundry .ff-field {
  opacity: 1;
  transform: none;
}
.foundry .ff-field__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .875rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--fdry-ink-soft);
}
.foundry .ff-field__input {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--fdry-glass-border);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.foundry .ff-field__input:focus-within,
.foundry .ff-field.is-active .ff-field__input {
  border-color: color-mix(in srgb, var(--fdry-violet) 60%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--fdry-violet) 20%, transparent);
}
.foundry .ff-field__input--select { justify-content: space-between; cursor: default; }
.foundry .ff-field__placeholder {
  font-size: .88rem;
  color: var(--fdry-ink-faint);
}
.foundry .ff-field__chevron {
  color: var(--fdry-ink-faint);
  font-size: .9rem;
}

/* Submit button inside card */
.foundry .ff-build__submit {
  margin-top: 4px;
  height: 44px;
  border-radius: 10px;
  background: var(--fdry-violet);
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: .95rem;
  border: none;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .32s var(--fdry-ease), transform .32s var(--fdry-ease), background .2s ease;
}
.foundry .ff-build__submit.is-visible {
  opacity: 1;
  transform: none;
}
.foundry .ff-build__submit:hover { background: var(--fdry-violet-lt); }

/* Success state */
.foundry .ff-build__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 200px;
  opacity: 0;
  transform: scale(.96);
  transition: opacity .36s var(--fdry-ease), transform .36s var(--fdry-ease);
}
.foundry .ff-build__success.is-visible {
  opacity: 1;
  transform: none;
}
.foundry .ff-build__success-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fdry-violet) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--fdry-violet) 45%, transparent);
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  color: var(--fdry-violet-lt);
}
.foundry .ff-build__success-text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
}
.foundry .ff-build__success-sub {
  font-size: .9rem;
  color: var(--fdry-ink-soft);
  text-align: center;
}

/* Floating sparkle dots */
.foundry .ff-build__sparks {
  position: absolute;
  bottom: -30px;
  right: -10px;
  pointer-events: none;
}
.foundry .ff-build__sparks span {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fdry-violet-lt);
  position: absolute;
  animation: ff-float 3s ease-in-out infinite;
  opacity: .6;
}
.foundry .ff-build__sparks span:nth-child(1) { top: 0;    left: 20px;  animation-delay: 0s;    }
.foundry .ff-build__sparks span:nth-child(2) { top: 20px; left: 0px;   animation-delay: .7s;   }
.foundry .ff-build__sparks span:nth-child(3) { top: 10px; left: 40px;  animation-delay: 1.4s;  }
@keyframes ff-float {
  0%, 100% { transform: translateY(0);    opacity: .4; }
  50%       { transform: translateY(-10px); opacity: .85; }
}

/* ---- 4. Scroll signature: 4-step flow ---------------------- */
.foundry .ff-flow { text-align: center; }

.foundry .ff-flow__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 16px 0 clamp(30px, 6vw, 80px); /* small top; nav clearance lives on the section */
}
/* Hold via CSS position:sticky (smooth, no ScrollTrigger pin jump). The shell is
   made tall so the sticky stage has room to hold; content stays high (top-aligned
   ~36px below the nav) as the four metamorphosis steps build on scrub. */
@media (min-width: 1024px) {
  .foundry .ff-flow { padding-top: 0; padding-bottom: 0; }
  .foundry .ff-flow > .fdry-shell { min-height: 170vh; }
  .foundry .ff-flow__stage {
    position: sticky; top: 0;
    min-height: 100vh; justify-content: flex-start; padding-top: 146px; padding-bottom: 40px;
  }
}

.foundry .ff-flow__headline {
  max-width: 600px;
  text-align: center;
  margin: 0;
}

/* ============================================================
   Metamorphosis flow scene — ONE artifact morphs through four
   states as you scrub: prompt → schema → styled form → embed.
   (Distinct from the hero's "form assembles itself" card.)
   ============================================================ */
.foundry .ff-meta {
  width: 100%;
  max-width: 600px;
  margin: 8px auto 0;
}
.foundry .ff-meta__viewport {
  position: relative;
  min-height: 286px;            /* holds the tallest panel (panels are absolute) */
  border-radius: var(--fdry-r);
  background: var(--fdry-glass);
  border: 1px solid var(--fdry-glass-border);
  box-shadow: var(--fdry-shadow);
  overflow: hidden;
  text-align: left;
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}
.foundry .ff-meta__viewport::before {       /* ambient accent wash */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--fdry-violet) 16%, transparent), transparent 60%);
}

/* Stacked panels — one visible at a time, cross-fade on state change */
.foundry .ff-meta__panel {
  position: absolute; inset: 0;
  padding: clamp(22px, 4vw, 34px);
  display: flex; flex-direction: column; gap: 14px;
  opacity: 0; transform: translateY(16px) scale(.985);
  transition: opacity .5s var(--fdry-ease), transform .5s var(--fdry-ease);
  pointer-events: none;
}
.foundry .ff-meta__panel.is-active { opacity: 1; transform: none; }

.foundry .ff-meta__chip {
  align-self: flex-start;
  font-family: 'JetBrains Mono', monospace; font-size: .875rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fdry-violet-lt);
  padding: 5px 10px; border-radius: 6px;
  background: color-mix(in srgb, var(--fdry-violet) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--fdry-violet) 35%, transparent);
}
.foundry .ff-meta__chip--live { display: inline-flex; align-items: center; gap: 7px; color: #34D399; background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.4); }
.foundry .ff-meta__chip--live i { width: 7px; height: 7px; border-radius: 50%; background: #34D399; box-shadow: 0 0 10px #34D399; animation: ffMetaPulse 1.6s ease-in-out infinite; }
@keyframes ffMetaPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Panel 0 — the plain-language prompt */
.foundry .ff-meta__prompt { margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.05rem, 1.9vw, 1.42rem); line-height: 1.55; color: var(--fdry-ink); }
.foundry .ff-meta__prompt em { font-style: normal; font-weight: 600; color: var(--fdry-violet-lt); }
.foundry .ff-meta__caret { display: inline-block; width: 2px; height: 1.05em; vertical-align: -.16em; margin-left: 3px; background: var(--fdry-violet-lt); animation: ffMetaCaret 1s steps(2) infinite; }
@keyframes ffMetaCaret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Panel 1 — the generated field schema */
.foundry .ff-meta__schema { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-family: 'JetBrains Mono', monospace; font-size: .875rem; }
.foundry .ff-meta__schema li { display: flex; align-items: center; gap: 10px; color: var(--fdry-ink); }
.foundry .ff-meta__schema i { margin-left: auto; font-style: normal; font-size: .875rem; color: var(--fdry-ink-faint); }
.foundry .ff-meta__tick { color: var(--fdry-violet-lt); }

/* Panel 2 — styled form preview */
.foundry .ff-meta__form { display: grid; gap: 12px; }
.foundry .ff-meta__row { display: grid; gap: 5px; }
.foundry .ff-meta__lbl { font-size: .875rem; color: var(--fdry-ink-soft); }
.foundry .ff-meta__inp { height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-radius: 9px; background: rgba(255,255,255,.04); border: 1px solid var(--fdry-glass-border); color: var(--fdry-ink-faint); font-size: .875rem; }
.foundry .ff-meta__cta { align-self: flex-start; margin-top: 2px; padding: 9px 22px; border-radius: 10px; font-weight: 600; font-size: .9rem; color: #fff; background: var(--fdry-grad); box-shadow: 0 8px 22px color-mix(in srgb, var(--fdry-violet) 35%, transparent); }

/* Panel 3 — the embed snippet + live badge */
.foundry .ff-meta__embed { font-family: 'JetBrains Mono', monospace; font-size: clamp(1rem, 2vw, 1.35rem); padding: 16px 18px; border-radius: 11px; background: rgba(0,0,0,.28); border: 1px solid var(--fdry-glass-border); color: var(--fdry-ink); }
.foundry .ff-meta__embed-kw { color: var(--fdry-violet-lt); }
.foundry .ff-meta__embed-str { color: #34D399; }
.foundry .ff-meta__published { margin: 0; color: var(--fdry-ink-soft); font-size: .92rem; }

/* Stepper under the viewport — keeps the original step copy, lit in sync */
.foundry .ff-flow__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: 100%; max-width: 640px; margin: 6px auto 0; }
.foundry .ff-flow__step { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; opacity: .45; transition: opacity .4s var(--fdry-ease); }
.foundry .ff-flow__step.is-active { opacity: 1; }
.foundry .ff-flow__step-n { font-family: 'JetBrains Mono', monospace; font-size: .875rem; letter-spacing: .12em; color: var(--fdry-ink-faint); transition: color .4s ease; }
.foundry .ff-flow__step.is-active .ff-flow__step-n { color: var(--fdry-violet-lt); }
.foundry .ff-flow__step-label { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: .92rem; color: var(--fdry-ink-soft); transition: color .4s ease; }
.foundry .ff-flow__step.is-active .ff-flow__step-label { color: #fff; }
.foundry .ff-flow__step-sub { font-size: .875rem; line-height: 1.35; color: var(--fdry-ink-faint); max-width: 150px; }

/* Slim progress bar below the stepper */
.foundry .ff-flow__bar-wrap { width: 100%; max-width: 640px; height: 2px; margin: 4px auto 0; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.foundry .ff-flow__bar { height: 100%; width: 0%; border-radius: 2px; background: linear-gradient(90deg, var(--fdry-violet), var(--fdry-violet-lt)); box-shadow: 0 0 14px var(--fdry-violet); transition: width .1s linear; }

@media (max-width: 760px) {
  /* Reserve the tallest panel / branch so content never jumps when the
     scene cross-fades or switches conditional branches on mobile. */
  .foundry .ff-meta__viewport { min-height: 360px; }
  .foundry .ff-cond__fields { min-height: 600px; }
  .foundry .ff-flow__steps { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .foundry .ff-flow__step-sub { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .foundry .ff-meta__panel { transition: none !important; }
  .foundry .ff-meta__caret, .foundry .ff-meta__chip--live i { animation: none !important; }
}

/* ====================================================================
   SCENE F1 — Conditional logic ("builds itself" on scroll)
   ==================================================================== */

/* Section outer */
.foundry .ff-cond-scene { overflow: hidden; }

/* Stage: centres the card */
.foundry .ff-cond__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding-bottom: 16px;
}

/* Live status chip above the card */
.foundry .ff-cond__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--fdry-violet) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--fdry-violet) 30%, transparent);
  font-family: 'JetBrains Mono', monospace;
  font-size: .875rem;
  letter-spacing: .08em;
  color: var(--fdry-violet-lt);
}
.foundry .ff-cond__chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fdry-violet-lt);
  box-shadow: 0 0 8px var(--fdry-violet-lt);
  animation: ff-cond-pulse 1.4s ease-in-out infinite;
}
@keyframes ff-cond-pulse {
  0%, 100% { opacity: .4; transform: scale(.8); }
  50%       { opacity: 1;  transform: scale(1.15); }
}

/* The form card */
.foundry .ff-cond__card {
  width: 100%;
  max-width: 480px;
  border-radius: var(--fdry-r-lg);
  box-shadow: 0 0 50px color-mix(in srgb, var(--fdry-violet) 12%, transparent), var(--fdry-shadow);
  overflow: hidden;
}
.foundry .ff-cond__card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.foundry .ff-cond__dots {
  display: inline-flex;
  gap: 5px;
}
.foundry .ff-cond__dots i {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  font-style: normal;
}
.foundry .ff-cond__title {
  font-family: 'JetBrains Mono', monospace;
  font-size: .875rem;
  color: var(--fdry-ink-faint);
  margin-left: 6px;
}

/* Fields area */
.foundry .ff-cond__fields {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.foundry .ff-cond__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.foundry .ff-cond__lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: .875rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--fdry-ink-soft);
}
.foundry .ff-cond__inp {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--fdry-glass-border);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.foundry .ff-cond__inp--select { justify-content: space-between; cursor: default; }
.foundry .ff-cond__ph {
  font-size: .875rem;
  color: var(--fdry-ink-faint);
}
.foundry .ff-cond__chev {
  font-size: .9rem;
  color: var(--fdry-ink-faint);
}

/* Highlight the trigger select when active */
.foundry .ff-cond__field--trigger.is-triggered .ff-cond__inp {
  border-color: color-mix(in srgb, var(--fdry-violet) 60%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--fdry-violet) 20%, transparent);
}
.foundry .ff-cond__selected {
  font-size: .875rem;
  color: var(--fdry-ink);
  transition: color .25s ease;
}

/* Branch containers */
.foundry .ff-cond__branch {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Start hidden; JS reveals. Static fallback: visible */
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  transition:
    opacity .4s var(--fdry-ease),
    max-height .45s var(--fdry-ease),
    transform .4s var(--fdry-ease);
  transform: translateY(-10px);
}
.foundry .ff-cond__branch.is-open {
  opacity: 1;
  max-height: 600px;
  transform: none;
  pointer-events: auto;
}

/* Connector line between trigger field and branch group */
.foundry .ff-cond__connector {
  display: flex;
  justify-content: center;
  height: 40px;
  color: color-mix(in srgb, var(--fdry-violet) 55%, transparent);
}
.foundry .ff-cond__connector-svg {
  width: 24px;
  height: 40px;
  overflow: visible;
}
.foundry .ff-cond__connector-path {
  transition: stroke-dashoffset .5s var(--fdry-ease);
}
.foundry .ff-cond__branch.is-open .ff-cond__connector-path {
  stroke-dashoffset: 0;
}

/* Submit button inside card */
.foundry .ff-cond__submit {
  margin-top: 4px;
  height: 44px;
  border-radius: 10px;
  background: var(--fdry-violet);
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: .95rem;
  border: none;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.foundry .ff-cond__submit:hover { background: var(--fdry-violet-lt); }

/* Scroll progress bar */
.foundry .ff-cond__progress-wrap {
  width: 100%;
  max-width: 480px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,.07);
  overflow: hidden;
}
.foundry .ff-cond__progress-bar {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--fdry-violet), var(--fdry-violet-lt));
  box-shadow: 0 0 12px var(--fdry-violet);
  transition: width .1s linear;
}

/* Reduced-motion static state for F1 */
@media (prefers-reduced-motion: reduce) {
  .foundry .ff-cond__branch { opacity: 1 !important; max-height: 600px !important; transform: none !important; }
  .foundry .ff-cond__connector-path { stroke-dashoffset: 0 !important; transition: none !important; }
  .foundry .ff-cond__chip-dot { animation: none !important; }
  .foundry .ff-cond__progress-bar { width: 100% !important; transition: none !important; }
  .foundry .ff-cond__field--trigger .ff-cond__inp {
    border-color: color-mix(in srgb, var(--fdry-violet) 60%, transparent) !important;
  }
  .foundry .ff-cond__selected { color: var(--fdry-ink) !important; }
}


/* ====================================================================
   SCENE F2 — Submission routing ("where every submission goes")
   ==================================================================== */

.foundry .ff-route-scene { overflow: hidden; }

/* Stage: grid with hub + node positions */
.foundry .ff-route__stage {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

/* Centre hub card */
.foundry .ff-route__hub {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}
.foundry .ff-route__hub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 34px;
  border-radius: var(--fdry-r-lg);
  box-shadow: 0 0 50px color-mix(in srgb, var(--fdry-violet) 18%, transparent), var(--fdry-shadow);
  z-index: 2;
}
.foundry .ff-route__hub-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--fdry-violet) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--fdry-violet) 35%, transparent);
  display: grid;
  place-items: center;
  color: var(--fdry-violet-lt);
}
.foundry .ff-route__hub-label {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
}
.foundry .ff-route__hub-sub {
  font-size: .875rem;
  color: var(--fdry-ink-faint);
}
/* Pulsing ring around hub */
.foundry .ff-route__hub-ring {
  position: absolute;
  inset: -12px;
  border-radius: calc(var(--fdry-r-lg) + 12px);
  border: 1.5px solid color-mix(in srgb, var(--fdry-violet) 30%, transparent);
  opacity: 0;
  animation: ff-route-ring 2.2s ease-out infinite;
}
.foundry [data-ff-route-hub].is-active .ff-route__hub-ring {
  animation: ff-route-ring 2.2s ease-out infinite;
}
@keyframes ff-route-ring {
  0%   { transform: scale(1);    opacity: .6; }
  100% { transform: scale(1.18); opacity: 0; }
}

/* SVG connector lines canvas */
.foundry .ff-route__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  color: color-mix(in srgb, var(--fdry-violet) 45%, transparent);
  /* hidden until hub activates */
  opacity: 0;
  transition: opacity .3s ease;
}
.foundry .ff-route__lines.is-visible { opacity: 1; }

.foundry .ff-route__line {
  transition: stroke-dashoffset .55s var(--fdry-ease);
}
.foundry .ff-route__line.is-drawn { stroke-dashoffset: 0 !important; }

/* Destination nodes grid */
.foundry .ff-route__nodes {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  width: 100%;
}

.foundry .ff-route__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 10px 16px;
  border-radius: var(--fdry-r);
  background: var(--fdry-glass);
  border: 1px solid var(--fdry-glass-border);
  text-align: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: .875rem;
  font-weight: 600;
  color: var(--fdry-ink-faint);
  /* start in dim inactive state */
  opacity: .38;
  transform: translateY(8px) scale(.96);
  transition:
    opacity .4s var(--fdry-ease),
    transform .4s var(--fdry-ease),
    border-color .4s ease,
    box-shadow .4s ease,
    color .3s ease;
}
.foundry .ff-route__node.is-lit {
  opacity: 1;
  transform: none;
  color: #fff;
  border-color: color-mix(in srgb, var(--fdry-violet) 50%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--fdry-violet) 20%, transparent);
}
.foundry .ff-route__node-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--fdry-violet) 10%, transparent);
  border: 1px solid var(--fdry-glass-border);
  display: grid;
  place-items: center;
  color: var(--fdry-ink-faint);
  transition: color .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.foundry .ff-route__node.is-lit .ff-route__node-ico {
  color: var(--fdry-violet-lt);
  background: color-mix(in srgb, var(--fdry-violet) 18%, transparent);
  border-color: color-mix(in srgb, var(--fdry-violet) 40%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--fdry-violet) 25%, transparent);
}

/* Scroll progress bar */
.foundry .ff-route__progress-wrap {
  width: 100%;
  max-width: 760px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,.07);
  overflow: hidden;
}
.foundry .ff-route__progress-bar {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--fdry-violet), var(--fdry-violet-lt));
  box-shadow: 0 0 12px var(--fdry-violet);
  transition: width .1s linear;
}

/* Responsive: stack nodes on mobile */
@media (max-width: 760px) {
  .foundry .ff-route__nodes {
    grid-template-columns: repeat(3, 1fr);
  }
  .foundry .ff-route__lines { display: none; }
}
@media (max-width: 480px) {
  .foundry .ff-route__nodes {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Reduced-motion static state for F2 */
@media (prefers-reduced-motion: reduce) {
  .foundry .ff-route__node { opacity: 1 !important; transform: none !important; color: #fff !important;
    border-color: color-mix(in srgb, var(--fdry-violet) 50%, transparent) !important; }
  .foundry .ff-route__node-ico { color: var(--fdry-violet-lt) !important; }
  .foundry .ff-route__hub-ring { animation: none !important; }
  .foundry .ff-route__lines { opacity: 1 !important; }
  .foundry .ff-route__line { stroke-dashoffset: 0 !important; transition: none !important; }
  .foundry .ff-route__progress-bar { width: 100% !important; transition: none !important; }
}


/* ---- 5. Highlight band (renamed ff- prefix) ---------------- */
.foundry .ff-highlight { text-align: left; }
.foundry .ff-highlight .fdry-cta__in { text-align: left; }
.foundry .ff-highlight__list { display: grid; gap: 12px; margin: 24px 0 0; }
.foundry .ff-highlight__badge { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; padding: 12px 18px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid var(--fdry-glass-border); color: var(--fdry-ink); }
.foundry .ff-highlight__badge svg { width: 18px; height: 18px; color: var(--fdry-violet-lt); }

/* ---- 6. Comparison table (shared, dark glass) -------------- */
.foundry .fdry-cmp { max-width: 900px; margin: 0 auto; background: var(--fdry-glass); border: 1px solid var(--fdry-glass-border); border-radius: var(--fdry-r-lg); overflow: hidden; box-shadow: var(--fdry-shadow); }
.foundry .fdry-cmp table { width: 100%; border-collapse: collapse; }
.foundry .fdry-cmp th, .foundry .fdry-cmp td { padding: 16px 22px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.07); }
.foundry .fdry-cmp thead th { font-family: 'JetBrains Mono', monospace; font-size: .875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fdry-ink-soft); font-weight: 500; }
.foundry .fdry-cmp thead th.is-us { color: #fff; }
.foundry .fdry-cmp td:first-child { color: var(--fdry-ink); }
.foundry .fdry-cmp .is-us { background: color-mix(in srgb, var(--fdry-violet) 16%, transparent); text-align: center; }
.foundry .fdry-cmp td.is-us { color: #fff; font-weight: 600; }
.foundry .fdry-cmp td:not(:first-child) { text-align: center; }
.foundry .fdry-cmp td.yes { color: var(--fdry-violet-lt); }
.foundry .fdry-cmp td.no { color: var(--fdry-ink-faint); }
.foundry .fdry-cmp tr:last-child th, .foundry .fdry-cmp tr:last-child td { border-bottom: 0; }

/* ---- 7. Switching cards (shared) --------------------------- */
.foundry .fdry-switch { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.foundry .fdry-switch__card { padding: clamp(26px,3vw,38px); background: var(--fdry-glass); border: 1px solid var(--fdry-glass-border); border-radius: var(--fdry-r); position: relative; overflow: hidden; transition: transform .5s var(--fdry-ease), border-color .4s ease; }
.foundry .fdry-switch__card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--fdry-glass-edge), transparent); }
.foundry .fdry-switch__card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--fdry-violet) 45%, transparent); }
.foundry .fdry-switch__card p { color: var(--fdry-ink-soft); line-height: 1.6; margin-top: 10px; }
.foundry .fdry-switch__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--fdry-violet-lt); font-weight: 600; font-size: .94rem; }
.foundry .fdry-switch__link svg { width: 17px; height: 17px; transition: transform .3s var(--fdry-ease); }
.foundry .fdry-switch__card:hover .fdry-switch__link svg { transform: translateX(4px); }

/* ---- 8. Responsive ----------------------------------------- */
@media (max-width: 1024px) {
  .foundry .fdry-hero__art { max-width: 520px; margin: 8px auto 0; }
  /* Decorative floating sparks bleed past the card's right edge by design on
     desktop; on narrow viewports that 6px dot lands past the viewport and
     causes an 8px horizontal scroll. They're aria-hidden eye-candy — drop them. */
  .foundry .ff-build__sparks { display: none; }
  .foundry .ff-flow__nodes { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .foundry .ff-flow__bar-wrap { display: none; }
  .foundry .ff-flow__node { padding-bottom: 10px; }
}
@media (max-width: 760px) {
  /* Full-width hero form mock: the art column shrink-fits its content because
     of margin:auto + center-align; stretch it to the content width on mobile. */
  .foundry .fdry-hero__art { max-width: 100%; margin: 8px 0 0; align-items: stretch; }
  .foundry .ff-build { max-width: 100%; }
  .foundry .ff-flow__nodes { grid-template-columns: repeat(1, 1fr); }
  .foundry .ff-flow__node { flex-direction: row; align-items: flex-start; gap: 16px; text-align: left; }
  .foundry .ff-flow__node-body { align-items: flex-start; }
  .foundry .ff-flow__node-sub { max-width: none; }
  .foundry .fdry-cmp { overflow-x: auto; }
}

/* ---- 9. Reduced motion ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .foundry .ff-build__status i { animation: none !important; }
  .foundry .ff-build__sparks span { animation: none !important; }
  /* Show all fields and submit at rest — the complete/success state */
  .foundry .ff-field { opacity: 1 !important; transform: none !important; }
  .foundry .ff-build__submit { opacity: 1 !important; transform: none !important; }
  /* Show all flow nodes as complete */
  .foundry .ff-flow__node { opacity: 1 !important; }
  .foundry .ff-flow__node-sub { opacity: 1 !important; transform: none !important; }
  .foundry .ff-flow__bar { width: 100% !important; transition: none !important; }
}

/* ── Hold via CSS position:sticky (smooth, no pin jump). Section tall; shell
   sticks centred in the viewport while the JS scrubs the animation by scroll
   progress. Desktop only. ───────────────────────────────────────────────── */
@media (min-width: 1024px) {
  /* PROVEN: tall STATIC shell + sticky inner stage. Heading scrolls up; stage holds. */
  .foundry .ff-cond-scene, .foundry .ff-route-scene { padding-top: 0; padding-bottom: 0; overflow: visible; }
  .foundry .ff-cond-scene > .fdry-shell, .foundry .ff-route-scene > .fdry-shell { min-height: 170vh; overflow: visible; }
  .foundry .ff-cond__stage, .foundry .ff-route__stage {
    position: sticky; top: 0; min-height: 100vh;
    justify-content: center;            /* centre content vertically in viewport */
    padding-top: 120px;                 /* clear the fixed ~110px nav */
    padding-bottom: 52px;
  }
}

/* ── ff-cond: kill the pin "jump" ────────────────────────────────────────────
   The conditional branches (none / enterprise / personal) differ in height;
   swapping them on scrub resized the card, so the centred pinned scene jumped.
   Reserve the tallest (enterprise) height once → constant card size → no jump.
   Submit is pinned to the bottom of the reserved space so it never shifts.
   Desktop only (that's where the scene pins). */
@media (min-width: 1024px) {
  .foundry .ff-cond__fields { min-height: 582px; }
  .foundry .ff-cond__submit { margin-top: auto; }
}