/* =========================================================================
   Shared funnel layer (register / thank-you / replay) · sits on brand.css.
   One continuous page canvas, transparent sections, fade bands only.
   ========================================================================= */

html{background:var(--ivory)}
body.fb-page{
  background:
    radial-gradient(1100px 620px at 50% -220px, rgba(201,165,107,.20), transparent 70%),
    radial-gradient(900px 520px at 100% 30%, rgba(140,90,50,.05), transparent 70%),
    radial-gradient(900px 520px at 0% 62%, rgba(201,165,107,.07), transparent 70%),
    var(--ivory);
  overflow-x:hidden;
}
main{display:block}

/* ---- rhythm ---- */
.sec{position:relative;padding:112px 0}
.sec--tight{padding-top:24px}
.sec-head{text-align:center;max-width:760px;margin:0 auto 64px}
.sec-head .fb-eyebrow{margin-bottom:16px}
.sec-head .fb-lead{margin-top:18px}

/* soft band: fades in and out, never a hard edge */
.sec--wash::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg, transparent 0, var(--ivory-2) 22%, var(--ivory-2) 78%, transparent 100%);opacity:.75}

/* champagne hairline ornament */
.ornament{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 auto 22px;color:var(--gold)}
.ornament::before,.ornament::after{content:"";width:44px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.ornament::after{transform:scaleX(-1)}
.ornament i{width:5px;height:5px;transform:rotate(45deg);border:1px solid var(--gold);display:block}

.nw{white-space:nowrap}

/* staggered reveals */
.js .fb-reveal{transition-delay:calc(var(--i,0) * 90ms)}

/* =========================================================================
   Testimonial videos · 2-up, real YouTube players, lazy
   ========================================================================= */
.vgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;max-width:1000px;margin:0 auto}
.vcard{text-align:center;margin:0}
.yt{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;
  background:var(--espresso);border:1px solid var(--hair-soft);box-shadow:var(--shadow);cursor:pointer;padding:0}
.yt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),filter .6s var(--ease)}
.yt::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,13,0) 40%,rgba(20,16,13,.38));pointer-events:none}
.yt:hover img{transform:scale(1.025)}
.yt__play{position:absolute;z-index:2;top:50%;left:50%;width:74px;height:74px;margin:-37px 0 0 -37px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,253,249,.94);color:var(--ink);
  box-shadow:0 14px 40px -10px rgba(20,16,13,.55);transition:transform .3s var(--ease),background .3s var(--ease)}
.yt__play::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(255,253,249,.55)}
.yt__play svg{width:26px;height:26px;margin-left:4px}
.yt:hover .yt__play{transform:scale(1.06);background:#fff}
.yt:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt.is-playing{cursor:default}
.yt.is-playing::after{display:none}
.vname{font:500 28px/1.2 var(--display);margin:26px 0 6px;color:var(--ink)}
.vdesc{font:400 17px/1.55 var(--sans);color:var(--muted);margin:0 auto;max-width:40ch}

/* =========================================================================
   Proof tiles · 8 equal white cards, screenshot centred, never stretched
   ========================================================================= */
.proof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:1040px;margin:0 auto}
.proof__tile{margin:0;background:#fff;border:1px solid var(--hair-soft);border-radius:16px;
  aspect-ratio:3.25/1;display:flex;align-items:center;justify-content:center;padding:14px 22px;
  box-shadow:0 1px 2px rgba(27,21,17,.04),0 14px 34px -22px rgba(27,21,17,.28);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.proof__tile:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(27,21,17,.04),0 22px 44px -24px rgba(27,21,17,.34)}
.proof__tile img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}

/* =========================================================================
   Brand logos used inline
   ========================================================================= */
.logo-wa{color:#25D366}

/* ---- mobile ---- */
@media (max-width:860px){
  .vgrid{grid-template-columns:1fr;gap:48px;max-width:620px}
}
@media (max-width:700px){
  .sec{padding:76px 0}
  .sec-head{margin-bottom:44px}
  .proof{grid-template-columns:1fr;gap:14px}
  .proof__tile{padding:12px 16px}
  .yt__play{width:62px;height:62px;margin:-31px 0 0 -31px}
  .vname{font-size:26px;margin-top:20px}
}
@media (prefers-reduced-motion:reduce){
  .yt img,.proof__tile{transition:none}
}