/* ============================================================
   folio-brand.css · Folio site-wide brand standard · 2026-07-19
   Locked by Leo: (1) every primary button runs the animated
   blue→cyan→green gradient with white text; (2) every headline
   carries the hero style — Sora 800, tight tracking — with
   <span class="g"> available for a gradient accent word.
   EVERY new page must include:
   <link rel="stylesheet" href="/assets/folio-brand.css">
   (auto-injected into all existing pages 2026-07-19)
   ============================================================ */

/* ---- primary buttons: flowing gradient, white text ---- */
@keyframes flGradFlow{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.btn-primary,
button.pricebtn,
.fom-submit,
.le-send,
.simodal-go,
.waitform button,
.gcta a.btn-primary,
.btn.btn--gold,
a.btn--gold,
.fft .f-btn{
  background:linear-gradient(90deg,#4b5cf6,#2fb1dd 26%,#2ee68b 50%,#2fb1dd 74%,#4b5cf6)!important;
  background-size:260% 100%!important;
  animation:flGradFlow 7s ease-in-out infinite;
  color:#fff!important;border:0!important;text-decoration:none!important;
  box-shadow:0 12px 34px -12px rgba(56,182,217,.6),0 4px 16px -6px rgba(46,230,139,.35)!important;
}
.btn-primary:hover,button.pricebtn:hover,.waitform button:hover,.btn.btn--gold:hover,.fft .f-btn:hover{
  filter:brightness(1.07) saturate(1.06);transform:translateY(-2px);
  box-shadow:0 18px 44px -12px rgba(56,182,217,.7),0 6px 20px -6px rgba(46,230,139,.45)!important;
}
.btn-primary:active,button.pricebtn:active,.fft .f-btn:active{transform:translateY(0) scale(.985)}

/* outline pricebtn -> gradient-ringed pill */
a.pricebtn{
  background:linear-gradient(#0d0a20,#0d0a20) padding-box,
             linear-gradient(90deg,#4b5cf6,#2fb1dd 26%,#2ee68b 50%,#2fb1dd 74%,#4b5cf6) border-box!important;
  background-size:100% 100%,260% 100%!important;
  animation:flGradFlow 7s ease-in-out infinite;
  border:1px solid transparent!important;color:#fff!important;
  transition:filter .18s,transform .18s,box-shadow .18s;
}
a.pricebtn:hover{filter:brightness(1.12);transform:translateY(-2px);box-shadow:0 12px 30px -14px rgba(56,182,217,.55)}
a.pricebtn:active{transform:translateY(0)}

/* ---- headlines: hero style everywhere ---- */
h1,h2{font-family:'Sora','Outfit',sans-serif;font-weight:800;letter-spacing:-.02em}
h1 .g,h2 .g{
  background:linear-gradient(110deg,#a99bff,#38b6d9 52%,#2ee68b);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---- canonical text system (locked by Leo 2026-07-19) ----
   Section structure on EVERY page: .kicker eyebrow → h1/h2 headline
   (Sora 800, optional <span class="g"> gradient accent word) → .sub
   support line (soft lavender, bold spans white). Same sizes, same
   colors, every page, every future page. */
.kicker{
  font-family:'Sora','Outfit',sans-serif!important;font-size:12px!important;font-weight:700!important;
  letter-spacing:.16em!important;text-transform:uppercase!important;color:#8b7bff!important;
}
.eyebrow{color:#8b7bff!important}
.eyebrow i{background:#2ee68b!important}
h1,h2{color:#efeaff}
h2{font-size:clamp(28px,4.4vw,42px)}
.sub{font-size:16px;line-height:1.62;color:#b4abce}
.sub b,.sub strong{color:#fff!important}

/* ---- marquee strip: white track, gradient source names ---- */
.marq .track{color:#eef0fa}
.marq b{
  background:linear-gradient(110deg,#a99bff,#38b6d9 52%,#2ee68b);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---- links: white by default, gradient on hover (locked 2026-07-19) ----
   Applies to TEXT links only — buttons, store badges and icon-anchors are
   excluded (gradient-clipped text would break them). */
a:not([class*="btn"]):not([class*="store"]):not([class*="garrow"]):not([class*="chat-fab"]):not([class*="folio-av"]):not([class*="brandmark"]):not([class*="langtog"]):not([class*="fs-"]):not([class*="fom-"]):not(#navcart){
  color:#fff!important;text-decoration-color:rgba(255,255,255,.35);
  transition:color .18s,text-decoration-color .18s;
}
@supports(selector(:has(a))){
  a:not([class*="btn"]):not([class*="store"]):not([class*="garrow"]):not([class*="chat-fab"]):not([class*="folio-av"]):not([class*="brandmark"]):not([class*="langtog"]):not([class*="fs-"]):not([class*="fom-"]):not(#navcart):not(:has(svg)):not(:has(img)):hover{
    background:linear-gradient(110deg,#a99bff,#38b6d9 52%,#2ee68b);
    -webkit-background-clip:text;background-clip:text;color:transparent!important;
    text-decoration-color:rgba(46,230,139,.6);
  }
}

/* ---- a11y + motion discipline ---- */
.btn-primary:focus-visible,a.pricebtn:focus-visible,button.pricebtn:focus-visible{outline:2px solid #2ee68b;outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .btn-primary,a.pricebtn,button.pricebtn,.fom-submit,.le-send,.simodal-go,.waitform button,.fft .f-btn{animation:none!important;transition:none!important}
  .btn-primary:hover,a.pricebtn:hover{transform:none!important}
}