/* fx/forged.css — lane 4, /forged-sites/. Layers on forged-offer.css; changes no layout. Prefix .fxfo- */

/* ── 1. The price badge is a hanko seal ─────────────────────────────── */
.fs-page .fs-price-blob{--fxfo-rot:-7deg;position:relative;isolation:isolate}
.fs-page .fs-price-blob::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 28% 32%,#ffffff14 0 9%,transparent 10%),radial-gradient(circle at 71% 64%,#ffffff12 0 6%,transparent 7%),
  radial-gradient(circle at 60% 22%,#00000014 0 5%,transparent 6%),radial-gradient(circle at 38% 78%,#0000000f 0 8%,transparent 9%),
  radial-gradient(circle at 50% 50%,transparent 62%,#00000018 70%,transparent 72%)}
.fs-page .fs-price-blob::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-2;pointer-events:none;
  box-shadow:0 0 0 6px #c1121f55,0 0 0 16px #c1121f22;opacity:0;transform:scale(.9)}
.fs-page .fs-price-blob.fxfo-stamp{animation:fxfo-stamp .78s var(--fx-ease-forge) both}
.fs-page .fs-price-blob.fxfo-stamp::after{animation:fxfo-bloom .9s .3s ease-out both}
@keyframes fxfo-stamp{
  0%{transform:rotate(var(--fxfo-rot)) scale(1)}
  34%{transform:rotate(calc(var(--fxfo-rot) - 6deg)) translateY(-8px) scale(1.14)}
  58%{transform:rotate(var(--fxfo-rot)) scale(.93)}
  76%{transform:rotate(var(--fxfo-rot)) scale(1.025)}
  100%{transform:rotate(var(--fxfo-rot)) scale(1)}}
@keyframes fxfo-bloom{0%{opacity:.85;transform:scale(.92)}100%{opacity:0;transform:scale(1.42)}}

/* ── 2. "everyone." gets a brush stroke ─────────────────────────────── */
.fs-page .fs-hero h1 em{position:relative;white-space:nowrap}
.fs-page .fs-hero h1 em::after{content:"";position:absolute;left:-.04em;right:-.02em;bottom:-.14em;height:.2em;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5C40 5 90 4.2 140 5.1c22 .4 40 1.3 57 2.6-17 1.6-38 2.3-61 2.2-47-.2-92 .2-134-1.4z' fill='%23e64925'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
  opacity:.9;clip-path:inset(0 0 0 0)}

/* ── 3. Plan cards pick up heat under the pointer ───────────────────── */
.fs-page .fs-plan{position:relative;isolation:isolate}
.fs-page .fs-plan::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(260px circle at var(--fxfo-x,50%) var(--fxfo-y,32%),#e6492517,#f9dd9a14 45%,transparent 72%);
  transition:opacity var(--fx-med) ease}
.fs-page .fs-plan::after{content:"";position:absolute;left:18px;right:18px;top:-1px;height:3px;border-radius:3px;pointer-events:none;opacity:0;
  background:radial-gradient(120px 3px at var(--fxfo-x,50%) 50%,#f9dd9a,#e64925 40%,transparent 75%);transition:opacity var(--fx-med) ease}
.fs-page .fs-plan.fxfo-hot::before,.fs-page .fs-plan:focus-within::before,.fs-page .fs-plan.fxfo-warm::before{opacity:1}
.fs-page .fs-plan.fxfo-hot::after,.fs-page .fs-plan:focus-within::after,.fs-page .fs-plan.fxfo-warm::after{opacity:1}

/* ── 4. The Professional plan breathes, very slowly ─────────────────── */
.fs-page .fs-plan-featured .fxfo-halo{position:absolute;inset:-2px;border-radius:inherit;z-index:-2;pointer-events:none;
  box-shadow:0 0 0 1px #e6492566,0 0 30px 2px #e6492540,0 0 70px 6px #f9dd9a1f;opacity:.35}
.fs-page .fs-table thead th.fs-rec{position:relative}
.fs-page .fs-table thead th.fs-rec::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;pointer-events:none;
  background:linear-gradient(90deg,#e6492500,#e64925,#f9dd9a,#e64925,#e6492500);opacity:.55}

/* ── 5. On-page nav: the section in view gets an ember underline ────── */
.fs-page .fs-jumpbar a{position:relative}
.fs-page .fs-jumpbar a::after{content:"";position:absolute;left:16px;right:16px;bottom:8px;height:2px;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,#e64925,#f9dd9a);transform:scaleX(0);transform-origin:left center;transition:transform var(--fx-med) var(--fx-ease-out)}
.fs-page .fs-jumpbar a.is-here::after{transform:scaleX(1)}

/* ── 6. The ink thread between steps 01 / 02 / 03 ───────────────────── */
.fs-page .fs-three{position:relative}
.fxfo-thread{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.fxfo-thread path{fill:none;stroke:#c93812;stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:var(--fxfo-draw,0);opacity:.75}
.fxfo-thread circle{fill:#c93812;opacity:0;transition:opacity var(--fx-med) ease}
.fxfo-thread circle.fxfo-on{opacity:.85}

/* ── 7. Hidden: type "draft" ────────────────────────────────────────── */
.fxfo-seal{position:absolute;right:-16px;bottom:-26px;width:92px;height:92px;z-index:3;pointer-events:none;transform:rotate(-11deg);filter:drop-shadow(0 6px 12px #07051a40)}
.fxfo-seal.fxfo-float{position:fixed;right:24px;bottom:24px;z-index:80}
.fxfo-seal.fxfo-float.fxfo-gone{opacity:0;transition:opacity .8s ease}
.fxfo-seal svg{display:block;width:100%;height:100%}
.fxfo-seal.fxfo-press{animation:fxfo-seal .6s var(--fx-ease-forge) both}
@keyframes fxfo-seal{0%{opacity:0;transform:rotate(-24deg) scale(1.7)}55%{opacity:1;transform:rotate(-11deg) scale(.9)}78%{transform:rotate(-11deg) scale(1.04)}100%{opacity:1;transform:rotate(-11deg) scale(1)}}

/* ── motion ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference){
  .fs-page .fs-hero h1 em::after{animation:fxfo-brush 1.1s .7s var(--fx-ease-out) both}
  .fs-page .fs-plan-featured .fxfo-halo{animation:fxfo-breathe 7s ease-in-out infinite}
  .fs-page .fs-table thead th.fs-rec::after{animation:fxfo-breathe 7s ease-in-out infinite}
  .fs-page .fs-plan.fxfo-paused .fxfo-halo,.fs-page .fs-table.fxfo-paused thead th.fs-rec::after{animation-play-state:paused}
}
@keyframes fxfo-brush{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fxfo-breathe{0%,100%{opacity:.3}50%{opacity:.85}}
@media (prefers-reduced-motion: reduce){
  .fs-page .fs-price-blob.fxfo-stamp,.fs-page .fs-price-blob.fxfo-stamp::after,.fxfo-seal.fxfo-press{animation:none}
  .fs-page .fs-plan::before,.fs-page .fs-plan::after,.fs-page .fs-jumpbar a::after{transition:none}
  .fs-page .fs-plan-featured .fxfo-halo{opacity:.6}
}
@media (max-width:700px){
  .fs-page .fs-price-blob{--fxfo-rot:-6deg}
  .fxfo-seal{width:78px;height:78px;right:-8px;bottom:-24px}
  .fxfo-seal.fxfo-float{right:16px;bottom:16px}
}
@media print{.fxfo-thread,.fxfo-seal,.fs-page .fs-plan-featured .fxfo-halo{display:none!important}}