/* ============================================================================
   UGC Content Academy, main website.

   Separate from the funnel. The funnel pages (/registration/, /survey/,
   /offer/, /confirmation/) keep their own inline styles and stay noindex.
   These site pages ARE indexable on purpose: a business that only exists as a
   landing page is the single most common reason an A2P 10DLC campaign gets
   rejected.

   Same bright system as the funnel so it reads as one brand:
   PINK ACTS, GOLD COUNTS.
   ========================================================================== */
:root{
  --ink:#0b0b0b;
  --paper:#ffffff;
  --blush:#FFF5F8;
  --pink:#FF3D8F;
  --pink-deep:#E22B77;
  --gold:#d09a4e;
  --gold-ink:#A8721F;
  --grey:#6b6b6b;
  --line:#EFE9EC;
  --r-card:12px;
  --r-pill:999px;
  --r-img:24px;
  --sh-sm:rgba(0,0,0,.05) 0 1px 10px;
  --sh-lg:rgba(0,0,0,.14) 0 8px 34px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Work Sans',sans-serif;color:var(--ink);background:var(--paper);
     line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
         line-height:.98;letter-spacing:.005em}
a{color:var(--pink-deep)}
.wrap{max-width:1000px;margin:0 auto;padding:0 22px}
.narrow{max-width:720px}
section{padding:70px 0}

/* ---------- Header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
           backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:18px;
         max-width:1000px;margin:0 auto;padding:14px 22px}
.logo{font-family:'Anton',sans-serif;font-size:19px;letter-spacing:.05em;text-transform:uppercase;
      text-decoration:none;color:var(--ink);white-space:nowrap}
.logo span{color:var(--pink)}
.site-nav{display:flex;align-items:center;gap:22px}
.site-nav a{font-size:15px;font-weight:600;color:var(--ink);text-decoration:none}
.site-nav a:hover{color:var(--pink-deep)}
.site-nav .cta{background:var(--pink);color:#fff;padding:10px 18px;border-radius:var(--r-pill);
               font-weight:700;font-size:14px}
.site-nav .cta:hover{background:var(--pink-deep);color:#fff}
@media(max-width:720px){
  .site-nav{gap:14px}
  .site-nav a.hide-sm{display:none}
  .logo{font-size:16px}
}

/* ---------- Hero ---------- */
.hero{text-align:center;padding:76px 0 70px;
      background:
        radial-gradient(900px 420px at 14% -10%, #EDE3FF 0%, rgba(237,227,255,0) 60%),
        radial-gradient(820px 420px at 86% 4%, #FFE2D0 0%, rgba(255,226,208,0) 58%),
        radial-gradient(760px 520px at 50% 108%, #FFD9E9 0%, rgba(255,217,233,0) 62%),
        #FFF8FA}
.eyebrow{display:inline-block;background:var(--pink);color:#fff;font-size:11.5px;font-weight:700;
         letter-spacing:.14em;text-transform:uppercase;padding:9px 18px;border-radius:var(--r-pill);
         margin-bottom:22px;box-shadow:0 4px 18px rgba(255,61,143,.32)}
.hero h1{font-size:clamp(32px,6.6vw,54px);margin:0 auto 18px;max-width:17ch}
.hero h1 em{font-style:normal;color:var(--pink)}
.lede{font-size:clamp(16px,2.4vw,19px);color:#3d3a3c;max-width:600px;margin:0 auto}

/* ---------- Buttons ---------- */
.btn{display:inline-block;padding:17px 38px;border:0;border-radius:var(--r-pill);
     background:var(--pink);color:#fff;font-family:'Anton',sans-serif;font-size:19px;
     letter-spacing:.05em;text-transform:uppercase;text-decoration:none;cursor:pointer;
     transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-2px);background:var(--pink-deep);color:#fff}
.btn-ghost{display:inline-block;padding:15px 32px;border:2px solid var(--ink);border-radius:var(--r-pill);
           background:#fff;color:var(--ink);font-weight:700;font-size:16px;text-decoration:none;
           transition:background .15s ease,color .15s ease}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}

/* ---------- Sections ---------- */
.kicker{display:inline-block;color:var(--pink);font-size:11.5px;font-weight:700;
        letter-spacing:.16em;text-transform:uppercase;margin-bottom:12px}
h2{font-size:clamp(26px,4.6vw,38px);margin-bottom:22px;max-width:22ch}
h3{font-size:19px;margin-bottom:8px}
p + p{margin-top:14px}
.center{text-align:center}
.center h2,.center .lede{margin-left:auto;margin-right:auto}
.tint{background:var(--blush)}
.prose p{font-size:17px;color:#2e2b2d}
.prose h2{margin-top:8px}

/* ---------- Cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:30px}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 24px;
      box-shadow:var(--sh-sm)}
.card p{font-size:15.5px;color:var(--grey);margin-top:6px}
.card .n{font-family:'Anton',sans-serif;font-size:26px;color:var(--gold-ink);line-height:1;
         display:block;margin-bottom:10px}

/* ---------- Stats (GOLD COUNTS) ---------- */
.stats{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.stat{background:#fff;border-radius:var(--r-pill);padding:11px 20px;font-size:14.5px;
      font-weight:600;box-shadow:var(--sh-sm)}
.stat b{color:var(--gold-ink);font-family:'Anton',sans-serif;font-size:17px;letter-spacing:.03em}

/* ---------- Footer ---------- */
.site-foot{background:var(--ink);color:#cfcfcf;padding:52px 0 34px;font-size:14.5px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
.site-foot h4{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
              font-size:14px;letter-spacing:.1em;color:#fff;margin-bottom:12px}
.site-foot a{color:#cfcfcf;text-decoration:none;display:block;margin-bottom:8px}
.site-foot a:hover{color:#fff}
.site-foot .logo{color:#fff;font-size:20px}
.foot-note{border-top:1px solid #262626;margin-top:34px;padding-top:20px;font-size:12.5px;color:#8f8f8f}
.foot-note p + p{margin-top:8px}
@media(max-width:720px){ .foot-grid{grid-template-columns:1fr;gap:24px} }

/* Text-message disclosure on the homepage. Readable, not fine print: carrier
   reviewers check that the terms are legible without hunting for them. */
.sms-terms{max-width:640px;margin:30px auto 0;background:#fff;border:1px solid var(--line);
           border-radius:16px;padding:20px 22px;text-align:left}
.sms-terms p{font-size:14px;line-height:1.65;color:#3d3a3c}
.sms-terms p + p{margin-top:10px}
.sms-terms a{color:var(--pink-deep);font-weight:600}

/* ---------------------------------------------------------------------------
   OPT-IN FORM (homepage, section #text-updates)
   Moved here from the deleted /sms/ page on 2026-08-08. It lives on the root
   domain on purpose: GHL locks the A2P website field to the root, so this is
   the page a carrier or TCR reviewer actually lands on. The form is native,
   not an embed, which is the whole point of it. Because we control it end to
   end, each consent tick is recorded against a real name, email and number
   with a timestamp and the exact wording consented to. That is the audit trail
   the WebinarJam registration form cannot produce.
   --------------------------------------------------------------------------- */
/* Wrapper for the embedded GoHighLevel form. The iframe brings its own white
   card and padding, so this one drops its own so they do not double up. */
.optin-card.ghl-form{padding:0;background:transparent;border:none;
  box-shadow:none;max-width:560px}
.optin-card.ghl-form iframe{display:block;width:100%}

/* IFRAME HEIGHT LADDER. A cross-origin iframe cannot size itself, and GHL's
   form_embed.js only resizes it if that script actually loads. These heights are
   measured against the live form, not guessed, so the form is never clipped even
   with the script blocked. form_embed.js sets an INLINE height when it loads,
   which beats these, so it stays the preferred path and this is the floor.

   Measured content height at the iframe widths this layout actually produces:
     560px wide -> 816    386 -> 936    346 ->  976
     316px wide -> 1036   276 -> 1116
   Each band below is set from the tallest case inside it, plus ~24px of slack.
   Re-measure if the form's fields or consent wording change. */
.optin-card.ghl-form iframe{height:840px}
@media (max-width:600px){ .optin-card.ghl-form iframe{height:900px} }
@media (max-width:519px){ .optin-card.ghl-form iframe{height:955px} }
@media (max-width:440px){ .optin-card.ghl-form iframe{height:990px} }
@media (max-width:400px){ .optin-card.ghl-form iframe{height:1040px} }
@media (max-width:370px){ .optin-card.ghl-form iframe{height:1100px} }
@media (max-width:340px){ .optin-card.ghl-form iframe{height:1140px} }

.optin-card{background:#fff;border:1px solid var(--line);border-radius:20px;
            padding:30px 28px;box-shadow:var(--sh-lg);max-width:540px;margin:34px auto 0;
            text-align:left}
.optin-card .field{margin-bottom:16px}
.optin-card label.lbl{display:block;font-size:13.5px;font-weight:700;letter-spacing:.03em;
                      margin-bottom:6px;color:var(--ink)}
.optin-card input[type=text],
.optin-card input[type=email],
.optin-card input[type=tel]{width:100%;padding:14px 16px;border-radius:12px;
  border:1.5px solid var(--line);font-size:16px;font-family:'Work Sans',sans-serif;
  background:#fff;color:var(--ink)}
.optin-card input:focus{outline:none;border-color:var(--pink);
  box-shadow:0 0 0 3px rgba(255,61,143,.18)}
.optin-card .hint{font-size:12.5px;color:var(--grey);margin-top:5px}
/* Consent rows. Never pre-ticked, never required to submit: a pre-selected box
   and a consent gate that blocks submission are both listed rejection reasons. */
.consent{display:flex;gap:11px;align-items:flex-start;padding:14px 16px;
         border:1.5px solid var(--line);border-radius:14px;margin-bottom:12px;
         cursor:pointer;transition:border-color .15s ease}
.consent:hover{border-color:var(--pink)}
.consent.on{border-color:var(--pink);background:var(--blush)}
.consent input{flex:none;width:22px;height:22px;margin-top:1px;accent-color:var(--pink);
               cursor:pointer}
.consent span{font-size:13.5px;line-height:1.55;color:#3d3a3c}
.consent b{color:var(--ink)}
.consent-head{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);
              font-weight:700;margin:22px 0 10px}
.optin-card .err{display:none;color:var(--pink-deep);font-size:14px;font-weight:700;
                 margin:6px 0 12px}
.optin-card .err.on{display:block}
.optin-card .btn{width:100%;text-align:center}
.terms-note{font-size:12.5px;color:var(--grey);margin-top:16px;line-height:1.6}
.optin-done{display:none;text-align:center;padding:14px 0}
.optin-done.on{display:block}
.optin-done h3{margin-bottom:10px}

/* ---------------------------------------------------------------------------
   LEGAL PAGES (/privacy/, /terms/)
   These carry the site header and footer as of 2026-08-08. A legal page that
   floats with no navigation reads as a boilerplate drop-in, and reviewers check
   that the contact details on it match the rest of the site.
   --------------------------------------------------------------------------- */
.legal-body{max-width:720px;margin:0 auto;padding:54px 22px 70px}
.legal-body h1{font-size:clamp(30px,5.6vw,40px);margin-bottom:6px;line-height:1.02}
/* Anton at .98 line-height collapses on a two-line legal heading, and several
   of these wrap. Loosened here only, not globally. */
.legal-body h2{font-size:20px;margin:32px 0 10px;line-height:1.18}
.legal-body p,.legal-body li{font-size:16px;line-height:1.72;color:#222;margin-bottom:12px}
.legal-body ul{padding-left:22px;margin-bottom:12px}
.legal-body .updated{color:var(--grey);font-size:14px;margin-bottom:26px}
.legal-body a{color:var(--pink-deep)}
/* The block carriers screenshot. Kept visually distinct so it cannot be
   mistaken for ordinary body copy. */
.legal-key{background:var(--blush);border:1px solid var(--line);border-radius:16px;
           padding:20px 22px;margin:18px 0 12px}
.legal-key p:last-child{margin-bottom:0}
.legal-toc{background:#fff;border:1px solid var(--line);border-radius:16px;
           padding:18px 22px;margin-bottom:26px;box-shadow:var(--sh-sm)}
.legal-toc a{display:inline-block;margin:0 14px 6px 0;font-size:14.5px;font-weight:600}