html {scroll-behavior:smooth;scroll-padding-top:90px;background:#080808;}
body {margin:0;min-width:320px;background:#080808;}
:focus-visible {outline:2px solid #f0d778;outline-offset:4px;}
#fs-site {min-height:100vh;width:100%;}
#fs-site .hero h1 span {color:transparent;}
@media (prefers-reduced-motion: reduce) {html{scroll-behavior:auto}}




    #fs-site{
      /* Original 28FS palette: black foundation, gold accent. */
      --black: #080808;
      --black-soft: #111113;
      --panel: #171719;
      --accent: #d4af37;
      --accent-light: #f0d778;
      --accent-dark: #8d6819;
      --gold: #d4af37;
      --offwhite: #f5f5f6;
      --white: #ffffff;
      --gray-light: #c9c9ce;
      --gray: #929299;
      --gray-dark: #3b3b42;
      --line: rgba(255, 255, 255, 0.11);
      --radius: 22px;
      --max-width: 1180px;
      --shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
    }

    #fs-site *{
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    #fs-site{
      scroll-behavior: smooth;
      scroll-padding-top: 90px;
    }

    #fs-site{
      color: var(--white);
      background:
        radial-gradient(
          circle at 85% 4%,
          rgba(212,175,55,0.12),
          transparent 26rem
        ),
        radial-gradient(
          circle at 0 42%,
          rgba(212,175,55,0.06),
          transparent 28rem
        ),
        var(--black);
      font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
      line-height: 1.65;
      overflow-x: hidden;
    }

    #fs-site a{
      color: inherit;
      text-decoration: none;
    }

    #fs-site button, #fs-site input, #fs-site select, #fs-site textarea{
      font: inherit;
    }

    #fs-site .container{
      width: min(calc(100% - 2rem), var(--max-width));
      margin: 0 auto;
    }

    #fs-site .section{
      position: relative;
      padding: 7rem 0;
    }

    #fs-site .band{
      background: var(--black-soft);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    #fs-site .eyebrow{
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      margin-bottom: 1rem;
      color: var(--accent-light);
      font-size: 0.77rem;
      font-weight: 850;
      letter-spacing: 0.17em;
      text-transform: uppercase;
    }

    #fs-site .eyebrow::before{
      content: "";
      width: 34px;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--accent));
    }

    #fs-site h1, #fs-site h2, #fs-site h3{
      line-height: 1.08;
      letter-spacing: -0.035em;
    }

    #fs-site h1{
      font-size: clamp(3rem, 7vw, 6.7rem);
    }

    #fs-site h2{
      font-size: clamp(2.15rem, 5vw, 4.15rem);
    }

    #fs-site h3{
      font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    }

    #fs-site p{
      color: var(--gray-light);
    }

    #fs-site .lead{
      max-width: 800px;
      margin-top: 1.4rem;
      font-size: clamp(1.08rem, 2vw, 1.35rem);
    }

    #fs-site .grid-2{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.4rem;
    }

    #fs-site .grid-3{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.25rem;
    }

    #fs-site .btn-row{
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      margin-top: 2rem;
    }

    #fs-site .btn{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 52px;
      padding: 0.85rem 1.35rem;
      border: 1px solid transparent;
      border-radius: 999px;
      font-weight: 850;
      cursor: pointer;
      transition:
        transform 0.2s ease,
        border-color 0.2s ease;
    }

    #fs-site .btn:hover{
      transform: translateY(-2px);
    }

    #fs-site .btn-primary{
      color: #151000;
      background: linear-gradient(
        135deg,
        var(--accent-light),
        var(--accent),
        #a98424 /* was --gold-dark (#8d6819): dark text on it was 3.73:1, under WCAG's 4.5:1; this is 5.44:1 */
      );
      box-shadow: 0 12px 32px rgba(212,175,55,0.18);
    }

    #fs-site .btn-secondary{
      color: var(--white);
      background: rgba(255, 255, 255, 0.03);
      border-color: var(--line);
    }

    #fs-site .site-header{
      position: fixed;
      z-index: 1000;
      top: 0;
      right: 0;
      left: 0;
      background: rgba(8,8,8,0.82);
      border-bottom: 1px solid rgba(255, 255, 255, 0.07);
      backdrop-filter: blur(18px);
    }

    #fs-site .nav{
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 78px;
      gap: 2rem;
    }

    #fs-site .brand{
      display: inline-flex;
      align-items: center;
      gap: 0.8rem;
      font-weight: 950;
      white-space: nowrap;
    }

    #fs-site .brand-mark{
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      color: var(--accent-light);
      background:
        linear-gradient(
          145deg,
          rgba(212,175,55,0.18),
          transparent
        ),
        #0e0e10;
      border: 1px solid rgba(212,175,55,0.8);
      font-size: 1.05rem;
    }

    #fs-site .brand-copy{
      display: grid;
      line-height: 1;
    }

    #fs-site .brand-copy small{
      margin-top: 0.35rem;
      color: var(--gray);
      font-size: 0.53rem;
      letter-spacing: 0.24em;
    }

    #fs-site .nav-links{
      display: flex;
      align-items: center;
      gap: 1.25rem;
      color: var(--gray-light);
      font-size: 0.9rem;
      font-weight: 750;
    }

    #fs-site .nav-links a:hover{
      color: var(--accent-light);
    }

    #fs-site .menu-toggle{
      display: none;
      place-items: center;
      width: 46px;
      height: 46px;
      color: var(--white);
      background: transparent;
      border: 1px solid var(--line);
      border-radius: 50%;
      cursor: pointer;
    }

    #fs-site .hero{
      position: relative;
      display: flex;
      align-items: center;
      min-height: 100vh;
      min-height: 100svh;
      padding: 10rem 0 5rem;
      isolation: isolate;
    }

    #fs-site .hero::before{
      content: "";
      position: absolute;
      z-index: -1;
      top: 15%;
      right: -12%;
      width: 520px;
      aspect-ratio: 1;
      border: 1px solid rgba(212,175,55,0.17);
      transform: rotate(45deg);
    }

    #fs-site .hero h1 span{
      display: block;
      color: transparent;
      background: linear-gradient(
        90deg,
        var(--accent-light),
        var(--accent),
        #fff0b8
      );
      background-clip: text;
      -webkit-background-clip: text;
    }

    #fs-site .hero-meta{
      display: flex;
      flex-wrap: wrap;
      gap: 1rem 2rem;
      margin-top: 3rem;
      padding-top: 1.3rem;
      color: var(--gray);
      border-top: 1px solid var(--line);
      font-weight: 700;
    }

    #fs-site .hero-meta strong{
      color: var(--white);
    }

    #fs-site .card{
      padding: 2rem;
      background:
        linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.04),
          transparent
        ),
        var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: 0 14px 45px rgba(0, 0, 0, 0.18);
    }

    #fs-site .card p{
      margin-top: 0.8rem;
    }

    #fs-site .card-label{
      margin-bottom: 1rem;
      color: var(--accent);
      font-size: 0.76rem;
      font-weight: 900;
      letter-spacing: 0.17em;
      text-transform: uppercase;
    }

    #fs-site .list{
      display: grid;
      gap: 0.72rem;
      margin-top: 1.15rem;
      list-style: none;
    }

    #fs-site .list li{
      position: relative;
      padding-left: 1.2rem;
      color: var(--gray-light);
    }

    #fs-site .list li::before{
      content: "";
      position: absolute;
      top: 0.7rem;
      left: 0;
      width: 6px;
      height: 6px;
      background: var(--accent);
      border-radius: 50%;
    }

    #fs-site .quote{
      margin-top: 2.5rem;
      padding: 2rem;
      background: linear-gradient(
        90deg,
        rgba(212,175,55,0.1),
        transparent
      );
      border-left: 3px solid var(--accent);
      font-size: clamp(1.35rem, 3vw, 2.15rem);
      font-weight: 900;
      line-height: 1.25;
    }

    #fs-site .callout{
      padding: clamp(2rem, 5vw, 4rem);
      background:
        linear-gradient(
          135deg,
          rgba(212,175,55,0.12),
          transparent 46%
        ),
        var(--panel);
      border: 1px solid rgba(212,175,55,0.32);
      border-radius: 28px;
      box-shadow: var(--shadow);
    }

    #fs-site .form{
      display: grid;
      gap: 1rem;
      padding: 2rem;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 24px;
      box-shadow: var(--shadow);
    }

    #fs-site .form-row{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    #fs-site label{
      display: grid;
      gap: 0.45rem;
      color: #f5f5f6;
      font-size: 0.85rem;
      font-weight: 760;
    }

    #fs-site input, #fs-site select, #fs-site textarea{
      width: 100%;
      padding: 0.95rem 1rem;
      color: var(--white);
      background: #0d0d0f;
      border: 1px solid var(--gray-dark);
      border-radius: 12px;
      outline: none;
    }

    #fs-site input:focus, #fs-site select:focus, #fs-site textarea:focus{
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(212,175,55,0.12);
    }

    #fs-site textarea{
      min-height: 140px;
      resize: vertical;
    }

    #fs-site .form-status{
      display: none;
      padding: 0.9rem 1rem;
      color: var(--accent-light);
      background: rgba(212,175,55,0.1);
      border: 1px solid rgba(212,175,55,0.3);
      border-radius: 12px;
      font-weight: 700;
    }

    #fs-site .form-status.is-error{
      color: #ffd6d6;
      background: rgba(220, 70, 70, 0.1);
      border-color: rgba(220, 70, 70, 0.35);
    }

    #fs-site .form-status a{
      text-decoration: underline;
    }

    #fs-site .label-optional{
      color: var(--gray);
      font-weight: 500;
    }

    #fs-site label.consent-check{
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      font-size: 0.8rem;
      font-weight: 500;
      line-height: 1.55;
    }

    #fs-site label.consent-check input{
      flex: 0 0 auto;
      width: 18px !important;
      height: 18px;
      margin-top: 0.15rem;
      padding: 0 !important;
      accent-color: var(--accent);
    }

    #fs-site label.consent-check a{
      color: var(--accent-light);
      text-decoration: underline;
    }

    #fs-site .form-hp{
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }

    #fs-site button[disabled]{
      opacity: 0.65;
      cursor: progress;
    }

    #fs-site footer{
      padding: 3rem 0;
      background: #060606;
      border-top: 1px solid var(--line);
    }

    #fs-site .footer-grid{
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      align-items: end;
      gap: 2rem;
    }

    #fs-site .footer-links{
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 0.8rem 1.25rem;
      color: var(--gray);
      font-size: 0.9rem;
      font-weight: 700;
    }

    #fs-site .copyright{
      margin-top: 1.3rem;
      color: var(--gray);
      font-size: 0.82rem;
    }

    #fs-site .reveal{
      opacity: 0;
      transform: translateY(20px);
      transition:
        opacity 0.6s ease,
        transform 0.6s ease;
    }

    #fs-site .reveal.visible{
      opacity: 1;
      transform: none;
    }

    @media (max-width: 1050px) {
      #fs-site .grid-3{
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 820px) {
      #fs-site .section{
        padding: 5rem 0;
      }

      #fs-site .nav-links{
        position: fixed;
        top: 78px;
        right: 1rem;
        left: 1rem;
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 1.2rem;
        background: rgba(8,8,8,0.98);
        border: 1px solid var(--line);
        border-radius: 18px;
        box-shadow: var(--shadow);
      }

      #fs-site .nav-links.open{
        display: flex;
      }

      #fs-site .menu-toggle{
        display: grid;
      }

      #fs-site .grid-2, #fs-site .footer-grid{
        grid-template-columns: 1fr;
      }

      #fs-site .footer-links{
        justify-content: flex-start;
      }
    }

    @media (max-width: 620px) {
      #fs-site .hero{
        padding-top: 8.5rem;
      }

      #fs-site .form-row{
        grid-template-columns: 1fr;
      }

      #fs-site .form{
        padding: 1.3rem;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #fs-site *{
        scroll-behavior: auto !important;
        transition: none !important;
      }

      #fs-site .reveal{
        opacity: 1;
        transform: none;
      }
    }
  

/* ================================
   28 FOOT SYSTEMS MOTION LAYER
   ================================ */
#fs-site{
  --mx: 75%;
  --my: 12%;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(212,175,55,.10), transparent 24rem),
    radial-gradient(circle at 6% 48%, rgba(212,175,55,.055), transparent 28rem),
    var(--black);
  transition: background-position .25s linear;
}

#fs-site .site-header{
  transition: background-color .3s ease, border-color .3s ease, padding .3s ease, box-shadow .3s ease;
}
#fs-site .site-header.is-scrolled{
  background: rgba(8,8,8,.92) !important;
  border-bottom-color: rgba(212,175,55,.22) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,.22);
}

#fs-site .nav-links a:not(.btn){
  position: relative;
  transition: color .25s ease;
}
#fs-site .nav-links a:not(.btn)::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-.45rem;
  height:1px;
  background:var(--accent);
  transition:right .28s ease;
}
#fs-site .nav-links a:not(.btn):hover::after,
#fs-site .nav-links a:not(.btn).active::after{ right:0; }
#fs-site .nav-links a.active{ color:var(--accent-light); }

#fs-site .hero::after{
  content:"";
  position:absolute;
  z-index:-2;
  width:min(58vw,760px);
  aspect-ratio:1;
  top:2%;
  right:-18%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(212,175,55,.15), rgba(212,175,55,.035) 42%, transparent 70%);
  filter:blur(14px);
  animation:fsAmbientFloat 12s ease-in-out infinite alternate;
}
@keyframes fsAmbientFloat{
  0%{ transform:translate3d(-2%,0,0) scale(.96); opacity:.7; }
  100%{ transform:translate3d(4%,7%,0) scale(1.08); opacity:1; }
}

#fs-site .hero .eyebrow,
#fs-site .hero h1,
#fs-site .hero .lead,
#fs-site .hero .btn-row,
#fs-site .hero .hero-meta{
  opacity:0;
  transform:translateY(22px);
  animation:fsHeroIn .75s cubic-bezier(.2,.75,.25,1) forwards;
}
#fs-site .hero .eyebrow{ animation-delay:.08s; }
#fs-site .hero h1{ animation-delay:.18s; }
#fs-site .hero .lead{ animation-delay:.34s; }
#fs-site .hero .btn-row{ animation-delay:.50s; }
#fs-site .hero .hero-meta{ animation-delay:.66s; }
@keyframes fsHeroIn{ to{opacity:1;transform:translateY(0);} }

#fs-site .reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .72s cubic-bezier(.2,.75,.25,1), transform .72s cubic-bezier(.2,.75,.25,1);
  transition-delay:var(--reveal-delay,0ms);
}
#fs-site .reveal.visible{ opacity:1; transform:translateY(0); }

#fs-site .card{
  position:relative;
  overflow:hidden;
  transition:transform .32s cubic-bezier(.2,.75,.25,1), border-color .32s ease, box-shadow .32s ease, background-color .32s ease;
}
/* Cards keep the staggered fade-in while they reveal; script.js adds .settled
   afterwards so hover goes back to the quick transition above. */
#fs-site .card.reveal.visible:not(.settled){
  transition:opacity .72s cubic-bezier(.2,.75,.25,1) var(--reveal-delay,0ms), transform .72s cubic-bezier(.2,.75,.25,1) var(--reveal-delay,0ms), border-color .32s ease, box-shadow .32s ease;
}
#fs-site .card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at 20% 0%, rgba(212,175,55,.12), transparent 42%);
  transition:opacity .32s ease;
}
@media (hover:hover) and (pointer:fine){
  #fs-site .card:hover{
    transform:translateY(-7px);
    border-color:rgba(212,175,55,.55);
    box-shadow:0 24px 60px rgba(0,0,0,.34), 0 0 0 1px rgba(212,175,55,.06);
  }
  #fs-site .card:hover::before{ opacity:1; }
}

#fs-site .btn{
  position:relative;
  overflow:hidden;
  transition:transform .22s ease, border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
}
#fs-site .btn::after{
  content:"→";
  margin-left:.7rem;
  transition:transform .22s ease;
}
#fs-site .btn:hover{ transform:translateY(-2px); }
#fs-site .btn:hover::after{ transform:translateX(4px); }
#fs-site .btn:active{ transform:translateY(1px) scale(.99); }

#fs-site .eyebrow::before{
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform .75s cubic-bezier(.2,.75,.25,1) .12s;
}
#fs-site .visible .eyebrow::before,
#fs-site .hero .eyebrow::before{ transform:scaleX(1); }

/* Systems Engine */
#fs-site .systems-engine{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 45%),
    #0b0b0d;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
@media (prefers-reduced-motion:reduce){
  #fs-site .hero::after,
  #fs-site .hv-core::after,
  #fs-site .engine-step-core::after{ animation:none !important; }
  #fs-site .hero .eyebrow,
  #fs-site .hero h1,
  #fs-site .hero .lead,
  #fs-site .hero .btn-row,
  #fs-site .hero .hero-meta{ opacity:1 !important; transform:none !important; animation:none !important; }
  #fs-site .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  #fs-site .card,#fs-site .btn,#fs-site .engine-tab{ transition:none !important; }
}



/* =============================
   EXTENDED MOTION LAYER
   ============================= */
#fs-site .section{
  overflow:hidden;
}

#fs-site .section::after{
  content:"";
  position:absolute;
  left:-18%;
  bottom:0;
  width:36%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,175,55,.78),transparent);
  opacity:.42;
  transform:translateX(-120%);
  pointer-events:none;
}

#fs-site .section.motion-active::after{
  animation:fs-section-scan 1.8s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes fs-section-scan{
  to{transform:translateX(430%);}
}

#fs-site .quote{
  position:relative;
  overflow:hidden;
}

#fs-site .quote::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 20%,rgba(212,175,55,.10) 45%,rgba(255,255,255,.08) 50%,transparent 72%);
  transform:translateX(-135%);
  pointer-events:none;
}

#fs-site .quote.motion-active::after{
  animation:fs-quote-sheen 1.35s ease-out forwards;
}

@keyframes fs-quote-sheen{
  to{transform:translateX(135%);}
}

#fs-site .list li{
  opacity:.72;
  transform:translateX(-8px);
  transition:opacity .5s ease,transform .5s ease,color .25s ease;
}

#fs-site .visible .list li,
#fs-site .card.visible .list li,
#fs-site .motion-active .list li{
  opacity:1;
  transform:translateX(0);
}

#fs-site .list li:nth-child(1){transition-delay:40ms}
#fs-site .list li:nth-child(2){transition-delay:90ms}
#fs-site .list li:nth-child(3){transition-delay:140ms}
#fs-site .list li:nth-child(4){transition-delay:190ms}
#fs-site .list li:nth-child(5){transition-delay:240ms}
#fs-site .list li:nth-child(6){transition-delay:290ms}

@media (hover:hover) and (pointer:fine){
  #fs-site .list li:hover{color:var(--white);transform:translateX(5px)}
}

#fs-site .callout{
  position:relative;
  isolation:isolate;
}

#fs-site .callout::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(120deg,rgba(212,175,55,.08),rgba(212,175,55,.65),rgba(255,255,255,.08),rgba(212,175,55,.08));
  background-size:220% 220%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.55;
  pointer-events:none;
  z-index:-1;
}

#fs-site .callout.motion-active::before{
  animation:fs-border-flow 5s linear infinite;
}

@keyframes fs-border-flow{
  0%{background-position:0% 50%}
  100%{background-position:220% 50%}
}

#fs-site .form{
  position:relative;
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}

#fs-site .form:focus-within{
  transform:translateY(-4px);
  box-shadow:0 24px 70px rgba(0,0,0,.38),0 0 0 1px rgba(212,175,55,.2);
}

#fs-site .form label{
  transition:color .25s ease;
}

#fs-site .form label:focus-within{
  color:var(--accent-light);
}

#fs-site footer .brand-mark{
  animation:fs-footer-pulse 4.8s ease-in-out infinite;
}

@keyframes fs-footer-pulse{
  0%,100%{filter:drop-shadow(0 0 0 rgba(212,175,55,0));transform:translateY(0)}
  50%{filter:drop-shadow(0 0 12px rgba(212,175,55,.28));transform:translateY(-2px)}
}

#fs-site .eyebrow::before{
  transform-origin:left center;
  transform:scaleX(.35);
  transition:transform .9s cubic-bezier(.22,1,.36,1);
}

#fs-site .visible .eyebrow::before,
#fs-site .motion-active .eyebrow::before{
  transform:scaleX(1);
}

#fs-site .card-label{
  position:relative;
  display:inline-block;
}

#fs-site .card-label::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-5px;
  width:100%;
  height:1px;
  background:linear-gradient(90deg,var(--accent),transparent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .7s cubic-bezier(.22,1,.36,1);
}

#fs-site .card.visible .card-label::after{
  transform:scaleX(1);
}

@media (prefers-reduced-motion:reduce){
  #fs-site .section::after,#fs-site .quote::after{display:none!important}
  #fs-site .callout::before,#fs-site footer .brand-mark{animation:none!important}
  #fs-site .list li{opacity:1!important;transform:none!important;transition:none!important}
  #fs-site .form{transition:none!important;transform:none!important}
}


/* Moved out of inline style attributes so the CSP needs no 'unsafe-inline' for styles. */
#fs-site .mt-25{margin-top:2.5rem}
#fs-site .card.mt-2{margin-top:2rem}
#fs-site .measure-650{max-width:650px;margin-top:1rem}


/* =============================
   WEBSITE V2.0 COMPONENTS
   ============================= */
#fs-site .skip-link{position:absolute;left:1rem;top:-4rem;z-index:2000;padding:.7rem 1rem;border-radius:10px;background:var(--accent);color:#151000;font-weight:850;}
#fs-site .skip-link:focus{top:1rem;}
#fs-site #main{display:block;outline:none;}

/* Labels and quotes use --gold; with the original palette it matches --accent. */
#fs-site .card-label{color:var(--gold);}
#fs-site .card-label::after{background:linear-gradient(90deg,var(--gold),transparent);}
#fs-site .quote{border-left-color:var(--gold);background:linear-gradient(90deg,rgba(212,175,55,.09),transparent);}

#fs-site .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;}
#fs-site .mt-4{margin-top:4rem;}
#fs-site .fine-print{margin-top:1.5rem;color:var(--gray);font-size:.9rem;}

/* Hero: two columns with a decorative system diagram. It is aria-hidden and
   labelled as nothing more than inputs becoming outputs; it is not a product UI. */
#fs-site .hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center;gap:3rem;}
#fs-site .hero h1{font-size:clamp(2.6rem,6.2vw,5.6rem);}
#fs-site .hero-visual{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;opacity:0;animation:fsHeroIn .9s cubic-bezier(.2,.75,.25,1) .5s forwards;}
#fs-site .hv-col{display:grid;gap:.75rem;}
#fs-site .hv-card{padding:.75rem .85rem;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03);color:var(--gray-light);font-size:.78rem;font-weight:700;line-height:1.35;}
#fs-site .hv-in{border-style:dashed;}
#fs-site .hv-out{border-color:rgba(212,175,55,.45);background:rgba(212,175,55,.07);}
#fs-site .hv-out b{display:block;color:var(--white);font-size:.85rem;}
#fs-site .hv-core{position:relative;display:grid;place-items:center;width:84px;aspect-ratio:1;border-radius:50%;border:1px solid rgba(212,175,55,.6);background:var(--panel);color:var(--accent-light);font-size:1.8rem;font-weight:950;box-shadow:0 0 50px rgba(212,175,55,.18);}
#fs-site .hv-core::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px dashed rgba(212,175,55,.35);animation:fsSpin 18s linear infinite;}
@keyframes fsSpin{to{transform:rotate(360deg);}}

/* Solution pathways */
#fs-site .pathway{display:flex;flex-direction:column;}
#fs-site .pathway .btn{align-self:flex-start;margin-top:auto;}
#fs-site .pathway p{margin-bottom:1.5rem;}

/* Systems Engine tabs */
#fs-site .engine{margin-top:2.7rem;}
#fs-site .engine-tabs{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.5rem;}
#fs-site .engine-tab{min-height:48px;padding:.7rem 1.2rem;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03);color:var(--gray-light);font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:.82rem;cursor:pointer;transition:border-color .25s ease,color .25s ease,background .25s ease;}
#fs-site .engine-tab:hover{color:var(--white);border-color:rgba(212,175,55,.45);}
#fs-site .engine-tab[aria-selected="true"]{color:#151000;background:var(--accent);border-color:var(--accent);}
#fs-site .engine-panel + .engine-panel{margin-top:1.25rem;}
#fs-site .engine-panel[hidden]{display:none;}
#fs-site .engine-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;list-style:none;}
#fs-site .engine-step{position:relative;padding:1.6rem;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.025);}
#fs-site .engine-step strong{display:block;margin-top:.4rem;font-size:1.2rem;line-height:1.25;}
#fs-site .engine-step p{margin-top:.6rem;font-size:.95rem;}
#fs-site .engine-step-label{color:var(--accent-light);font-size:.72rem;font-weight:850;letter-spacing:.18em;text-transform:uppercase;}
#fs-site .engine-step:not(:last-child)::before{content:"→";position:absolute;right:-1.85rem;top:50%;transform:translateY(-50%);color:var(--accent);font-size:1.4rem;font-weight:900;}
#fs-site .engine-step-core{overflow:hidden;border-color:rgba(212,175,55,.55);background:radial-gradient(circle at 50% 0,rgba(212,175,55,.16),transparent 70%),var(--panel);}
#fs-site .engine-step-core::after{content:"";position:absolute;left:-30%;bottom:0;width:30%;height:2px;background:linear-gradient(90deg,transparent,var(--accent-light),transparent);animation:fsFlowLine 2.7s linear infinite;}
@keyframes fsFlowLine{to{left:110%;}}

/* Product proof */
#fs-site .product{display:flex;flex-direction:column;padding-top:0;}
#fs-site .product-art{display:block;width:calc(100% + 4rem);max-width:none;height:auto;margin:0 -2rem 1.6rem;border-bottom:1px solid var(--line);}
#fs-site .product-bar{display:flex;align-items:center;gap:.4rem;margin:0 -2rem 1.6rem;padding:.75rem 1.2rem;border-bottom:1px solid var(--line);background:rgba(0,0,0,.18);}
#fs-site .product-bar span{width:9px;height:9px;border-radius:50%;background:var(--gray-dark);}
#fs-site .product-bar em{margin-left:.6rem;color:var(--gray);font-size:.78rem;font-style:normal;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#fs-site .product-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;}
#fs-site .status-pill{padding:.3rem .7rem;border:1px solid rgba(212,175,55,.5);border-radius:999px;color:var(--gold);font-size:.72rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase;}
#fs-site .product-summary{color:var(--white);font-weight:700;}
#fs-site .product-facts{display:grid;gap:1rem;margin:1.4rem 0 1.6rem;}
#fs-site .product-facts dt{color:var(--accent-light);font-size:.72rem;font-weight:850;letter-spacing:.16em;text-transform:uppercase;}
#fs-site .product-facts dd{margin-top:.25rem;color:var(--gray-light);}
#fs-site .product-note{margin:-.4rem 0 1.4rem;color:var(--gray);font-size:.85rem;}
#fs-site .product .btn{align-self:flex-start;margin-top:auto;}

#fs-site .form-note{color:var(--gray);font-size:.82rem;}
#fs-site .form-note a{color:var(--accent-light);text-decoration:underline;}

@media (max-width:1050px){
  #fs-site .grid-4{grid-template-columns:repeat(2,1fr);}
  #fs-site .hero-grid{grid-template-columns:1fr;}
  #fs-site .hero-visual{max-width:560px;}
}
@media (max-width:820px){
  #fs-site .engine-flow{grid-template-columns:1fr;gap:2.2rem;}
  #fs-site .engine-step:not(:last-child)::before{content:"↓";right:auto;left:50%;top:auto;bottom:-2rem;transform:translateX(-50%);}
  #fs-site .nav-links .btn{margin-top:.5rem;}
}
@media (max-width:620px){
  #fs-site .grid-4{grid-template-columns:1fr;}
  #fs-site .hero-visual{display:none;}
  #fs-site .product-bar{margin:0 -1.3rem 1.4rem;}
  #fs-site .product-art{width:calc(100% + 2.6rem);margin:0 -1.3rem 1.4rem;}
  #fs-site .card{padding:1.5rem 1.3rem;}
  #fs-site .product{padding-top:0;}
  #fs-site .btn{width:100%;}
  #fs-site .pathway .btn,#fs-site .product .btn{align-self:stretch;}
}
@media (prefers-reduced-motion:reduce){
  #fs-site .hero-visual{opacity:1 !important;animation:none !important;}
}