/* FoundReach add-on: scroll-marquee + stacking cards, grafted onto the existing
   landing WITHOUT touching it. Matches the live design (ink/cream/gold, Rejoice). */
@font-face { font-family: "FRRejoice"; src: url("/assets/Rejouice-Headline-CBD-Mgrb.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "FRNB"; src: url("/assets/NBInternationalProBoo-BnyMBCi2.woff2") format("woff2"); font-display: swap; }

#fr-addon { --ink:#0a0a0a; --cream:#f5efd9; --gold:#f6d987; --mute:#9a9a9a; font-family:"FRNB",ui-sans-serif,system-ui,sans-serif; -webkit-font-smoothing:antialiased; letter-spacing:-.011em; }
#fr-addon * { box-sizing:border-box; }

/* ---- scroll-driven marquee ---- */
.fr-mq { background:var(--cream); overflow:hidden; padding:54px 0; }
.fr-mq-track { display:flex; width:max-content; align-items:center; white-space:nowrap; will-change:transform; }
.fr-mq-cell { display:flex; align-items:center; }
.fr-mq-word { font-family:"FRRejoice",Georgia,serif; font-size:150px; line-height:.9; letter-spacing:-.03em; color:var(--ink); padding:0 26px; }
.fr-mq-disc { width:84px; height:84px; flex:none; margin:0 22px; will-change:transform; }

/* ---- stacking cards ---- */
.fr-sys { background:var(--ink); }
.fr-sys-head { color:var(--cream); padding:104px 36px 8px; max-width:1252px; margin:0 auto; }
.fr-kick { color:var(--gold); font-size:13px; letter-spacing:.22em; text-transform:uppercase; }
.fr-sys-title { font-family:"FRRejoice",Georgia,serif; font-size:clamp(40px,5vw,76px); line-height:.98; letter-spacing:-.02em; margin:16px 0 0; max-width:16ch; }
.fr-sys-sub { color:var(--mute); font-size:18px; margin:16px 0 0; max-width:46ch; }
.fr-cards { padding:40px 36px 104px; display:flex; flex-direction:column; gap:24px; }
.fr-card-wrap { position:sticky; top:14vh; }
.fr-card { max-width:1180px; margin:0 auto; display:flex; gap:48px; border-radius:28px; padding:56px; min-height:470px; overflow:hidden; }
.fr-card-l { width:50%; display:flex; flex-direction:column; justify-content:space-between; }
.fr-card-tag { display:flex; gap:10px; font-size:13px; letter-spacing:.22em; text-transform:uppercase; }
.fr-card-tag .s { opacity:.5; }
.fr-card-h { font-family:"FRRejoice",Georgia,serif; font-size:54px; line-height:.98; letter-spacing:-.02em; margin:18px 0; }
.fr-card-p { font-size:18px; line-height:1.42; opacity:.82; max-width:34ch; }
.fr-card-link { margin-top:26px; font-size:16px; width:fit-content; position:relative; text-decoration:none; }
.fr-card-link::after { content:""; position:absolute; left:0; bottom:-3px; height:1px; width:100%; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .4s cubic-bezier(.4,0,.2,1); }
.fr-card-link:hover::after { transform:scaleX(1); transform-origin:left; }
.fr-card-r { width:50%; display:flex; align-items:center; justify-content:center; }
.fr-card-r img { width:88%; max-height:420px; object-fit:cover; border-radius:16px; box-shadow:0 40px 120px -40px rgba(0,0,0,.55); transform:scale(.72); will-change:transform; }

@media (max-width:760px) {
  .fr-mq-word { font-size:62px; padding:0 14px; }
  .fr-mq-disc { width:46px; height:46px; margin:0 12px; }
  .fr-sys-head { padding:64px 20px 4px; }
  .fr-cards { padding:24px 20px 64px; }
  .fr-card { flex-direction:column; padding:26px; gap:18px; min-height:0; }
  .fr-card-l, .fr-card-r { width:100%; }
  .fr-card-h { font-size:34px; }
  .fr-card-wrap { top:6vh; }
}

/* ---- hero CTA (grafted over the animated headline) ----
   Conversion rule #1: the primary action lives above the fold. A FIXED
   overlay (so the animated hero's layout is never touched) that rises in
   after the headline settles and fades out as soon as you scroll past the
   hero. Pill matches the nav "Get started" (gold on ink). */
#fr-hero-cta { position:fixed; left:0; right:0; bottom:10vh; display:flex; flex-direction:column; align-items:center; gap:14px; z-index:40; pointer-events:none; opacity:0; transform:translateY(14px); transition:opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1); font-family:"FRNB",ui-sans-serif,system-ui,sans-serif; }
#fr-hero-cta.fr-on { opacity:1; transform:translateY(0); }
#fr-hero-cta .fr-cta-sub { color:rgba(255,255,255,.86); font-size:17px; letter-spacing:.01em; text-shadow:0 1px 14px rgba(0,0,0,.35); margin:0; }
#fr-hero-cta .fr-cta-row { display:flex; gap:12px; pointer-events:auto; }
#fr-hero-cta .fr-cta-main { background:#f6d987; color:#0a0a0a; border-radius:999px; padding:15px 30px; font-size:16px; font-weight:600; text-decoration:none; transition:transform .18s ease, box-shadow .18s ease; box-shadow:0 12px 40px -12px rgba(0,0,0,.5); }
#fr-hero-cta .fr-cta-main:hover { transform:translateY(-2px); box-shadow:0 18px 50px -12px rgba(0,0,0,.55); }
#fr-hero-cta .fr-cta-ghost { color:#fff; border:1px solid rgba(255,255,255,.45); border-radius:999px; padding:15px 26px; font-size:16px; text-decoration:none; transition:border-color .18s ease, background .18s ease; }
#fr-hero-cta .fr-cta-ghost:hover { border-color:#fff; background:rgba(255,255,255,.08); }
@media (max-width:760px) {
  #fr-hero-cta { bottom:7vh; padding:0 18px; }
  #fr-hero-cta .fr-cta-sub { font-size:14.5px; text-align:center; }
  #fr-hero-cta .fr-cta-row { flex-direction:column; width:100%; max-width:340px; }
  #fr-hero-cta .fr-cta-main, #fr-hero-cta .fr-cta-ghost { text-align:center; }
}
@media (prefers-reduced-motion: reduce) {
  #fr-hero-cta { transition:opacity .3s ease; transform:none; }
}