/* ==========================================================================
   Cloakwise — Shared Components
   Version: 2.0.0
   Usage: Linked in every HTML page after tokens.css and nav.css
   ========================================================================== */

/* ── SECTION HELPERS ────────────────────────────────────────────────────── */
.sec-bone   { background: var(--bone);  padding: 3rem 0; }
.sec-paper  { background: var(--paper); padding: 3rem 0; border-top: 1px solid var(--bdrdim); }
.sec-dark   { background: #111;         padding: 3rem 0; color: #e2e6ed; }

.sec-label {
  font-size: 1.5rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--acc); margin-bottom: 0.6rem;
}
.sec-label-dk {
  font-size: 1.5rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #34d1a0; margin-bottom: 0.6rem;
}
.sec-h2 {
  font-size: clamp(.95rem, 3vw, 1.5rem);
  font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.2; margin-bottom: 1.75rem; color: var(--ink);
}
.sec-h2-dk {
  font-size: clamp(.95rem, 3vw, 1.5rem);
  font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.2; margin-bottom: 1.75rem; color: #fff;
}
.sec-lead {
  font-size: 0.95rem; color: var(--muted);
  line-height: 1.65; margin-bottom: 1.75rem;
  max-width: 100%; padding: 0;
}
.sec-lead-dk {
  font-size: 1.25rem; color: #8892a4;
  line-height: 1.65; margin-bottom: 1.75rem;
  max-width: 100%;
}

/* ── EYEBROW PILL ───────────────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--trubg); border: 1px solid rgba(26,107,158,0.2);
  color: var(--tru); font-size: 0.72rem; font-weight: 600;
  padding: 4px 12px; border-radius: var(--radius-full);
  margin-bottom: 1.1rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.eyebrow::before {
  content: ''; width: 6px; height: 6px;
  border-radius: 50%; background: var(--tru); flex-shrink: 0;
}

/* ── BUTTONS ────────────────────────────────────────────────────────────── */
.btn-primary {
  background: var(--sec); color: #fff;
  font-weight: 600; font-size: 0.95rem;
  padding: 12px 26px; border-radius: var(--radius-full);
  border: none; cursor: pointer;
  display: inline-flex; align-items: center;
  transition: background 0.15s, transform 0.15s;
}
.btn-primary:hover { background: var(--sech); transform: translateY(-1px); }

.btn-secondary {
  background: transparent; color: var(--muted);
  font-size: 0.95rem; padding: 12px 20px;
  border-radius: var(--radius-full); border: 1px solid var(--bdr);
  cursor: pointer; display: inline-flex; align-items: center;
  transition: border-color 0.15s, color 0.15s;
}
.btn-secondary:hover { border-color: var(--acc); color: var(--acc); }

.btn-white {
  background: #fff; color: var(--acc);
  font-weight: 700; font-size: 1rem;
  padding: 13px 30px; border-radius: var(--radius-full);
  border: none; cursor: pointer;
  transition: transform 0.15s;
}
.btn-white:hover { transform: translateY(-1px); }

.btn-group { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── PRO BADGE ──────────────────────────────────────────────────────────── */
.pro-badge {
  display: inline-block;
  background: rgba(168,122,10,0.1); border: 1px solid rgba(168,122,10,0.22);
  color: #A87A0A; font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--radius-full);
  margin-left: 5px; vertical-align: middle;
}

/* ── CTA BAND ───────────────────────────────────────────────────────────── */
.cta-band {
  background: var(--acc);
  padding: 4rem 1.5rem; text-align: center;
}
.cta-band h2 {
  font-size: clamp(1.3rem, 3.5vw, 1.9rem);
  font-weight: 700; color: #fff;
  margin-bottom: 0.75rem; letter-spacing: -0.02em; line-height: 1.2;
}
.cta-band p {
  font-size: 1rem; color: rgba(255,255,255,0.82);
  margin-bottom: 1.5rem; max-width: 550px;
  margin-left: auto; margin-right: auto; line-height: 1.6;
}
.cta-note {
  margin-top: 0.9rem; font-size: 0.78rem;
  color: rgba(255,255,255,0.6);
}