/* ══════════════════════════════════════════════════════════════════
   Frame99 — Site-wide closer CTA (locked variant C, 2026-05-24)
   ──────────────────────────────────────────────────────────────────
   One canonical closer used at the bottom of every public page.
   Lives between page content and the shared footer include.

   Structure:
     <div class="cta-close">
       <div class="cta-close-inner">
         <div class="cta-close-eyebrow">EYEBROW (optional)</div>
         <h2 class="cta-close-title">Title<br><em>accent</em></h2>
         <p class="cta-close-sub">Sub-copy (optional)</p>
         <div class="cta-close-actions">
           <a class="cta-primary">Primary</a>
           <a class="cta-secondary">Secondary</a>
         </div>
       </div>
     </div>

   Notes:
   - `.cta-close-eyebrow` and `.cta-close-sub` are both optional —
     omit either when the page doesn't need them. The block stays
     centered and balanced.
   - `.cta-close-title em` flips italic → normal + muted for an
     inverted-emphasis accent word.
   - `.pearl` is an optional alternative accent — wraps a word in the
     full Frame99 spectrum gradient. Don't combine with `em` on the
     same word.
   - Button styles (.cta-primary / .cta-secondary) are NOT in this
     file — they stay inline on each page (they're already consistent
     across the site at 13px × 28px, 6px radius). Move them here only
     after a sweep verifies no per-page overrides.
   ══════════════════════════════════════════════════════════════════ */

.cta-close{
  padding:120px 52px;
  border-top:0.5px solid var(--hint);
  text-align:center;
}
.cta-close-inner{
  max-width:640px;
  margin:0 auto;
}

/* — Eyebrow with horizontal flanking lines (optional) — */
.cta-close-eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.cta-close-eyebrow::before,
.cta-close-eyebrow::after{
  content:'';
  display:block;
  width:40px;
  height:0.5px;
  background:var(--hint);
}

/* — Serif italic title — */
.cta-close-title{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(36px,4.5vw,60px);
  font-weight:300;
  color:var(--text);
  line-height:1.1;
  margin-bottom:20px;
  letter-spacing:-.01em;
}
.cta-close-title em{
  font-style:normal;
  color:var(--muted);
}

/* — Optional pearl-gradient accent inside the title — */
.cta-close-title .pearl{
  background:linear-gradient(90deg,#00E5FF 0%,#8B2EFF 30%,#FF0080 55%,#FF4500 78%,#E8C840 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  font-style:italic;
}

/* — Sub-copy (optional) — */
.cta-close-sub{
  font-family:var(--sans);
  font-size:var(--t-body,15px);
  color:var(--muted);
  line-height:1.8;
  margin-bottom:48px;
}
.cta-close-sub em{
  font-style:normal;
  color:var(--text);
}

/* — Action row — */
.cta-close-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}

/* Tighter padding on small screens */
@media (max-width:760px){
  .cta-close{padding:80px 24px}
}

/* ══════════════════════════════════════════════════════════════════
   Button styles — .cta-primary / .cta-secondary
   ──────────────────────────────────────────────────────────────────
   The canonical Frame99 button pair. Used inside .cta-close-actions
   for closer CTAs, and inside .hero-ctas / inline rows at the top of
   pages. Promoted from per-page inline 2026-05-24 after verifying all
   8 active site pages used the same 13px×28px / 6px / mono 12px rules.

   Exceptions kept inline (not migrated):
   - 404.html — intentionally tighter 12px×26px / 0.18 alpha
   - internal/cta-reference.html — scoped per-variant prefixes for
     side-by-side comparison rendering
   ══════════════════════════════════════════════════════════════════ */

.cta-primary{
  font-family:var(--mono);
  font-size:12px;
  font-weight:400;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:13px 28px;
  border-radius:6px;
  background:var(--text);
  color:var(--bg);
  border:none;
  text-decoration:none;
  transition:opacity .2s,transform .2s;
  white-space:nowrap;
}
.cta-primary:hover{
  opacity:.88;
  transform:translateY(-1px);
}

.cta-secondary{
  font-family:var(--mono);
  font-size:12px;
  font-weight:400;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:13px 28px;
  border-radius:6px;
  background:transparent;
  border:0.5px solid rgba(255,255,255,0.2);
  color:var(--text);
  text-decoration:none;
  transition:all .2s;
  white-space:nowrap;
}
.cta-secondary:hover{
  border-color:rgba(255,255,255,0.45);
  background:rgba(255,255,255,0.04);
}