/* legal.css — shared styling for the public-facing pages that The Campaign
   Registry and the carriers review during 10DLC campaign vetting:
   /careers, /privacy, /sms-terms.

   These pages MUST stay publicly reachable with no login, no interstitial,
   and no popup/modal gating. Carriers reject campaigns whose terms or
   privacy policy are only shown in a popup. */

:root{
  --bg:#080808;
  --t1:#fff;
  --t2:rgba(255,255,255,0.72);
  --t3:rgba(255,255,255,0.46);
  --gold:#F5A623;
  --line:rgba(255,255,255,0.08);
  --card:rgba(255,255,255,0.025);
}
*,*::before,*::after{box-sizing:border-box}
html,body{
  margin:0;padding:0;background:var(--bg);color:var(--t1);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
body{
  min-height:100dvh;
  background:
    radial-gradient(ellipse at 30% -10%,rgba(245,166,35,0.16),transparent 55%),
    radial-gradient(ellipse at 90% 110%,rgba(245,166,35,0.09),transparent 60%),
    var(--bg);
}

/* ── Shell ─────────────────────────────────────────────────────────────── */
.wrap{max-width:760px;margin:0 auto;padding:32px 24px 96px}
.wrap.wide{max-width:1080px}
@media (max-width:880px){.wrap{padding:24px 18px 64px}}

/* The wordmark is wrapped in a link on the legal pages so it routes back to
   /careers. It must not pick up the global underlined-link treatment. */
a.site{display:inline-flex;text-decoration:none;color:inherit}
a.site:hover{color:inherit}

header.site{
  display:flex;align-items:center;gap:10px;
  font-weight:700;letter-spacing:-0.01em;text-decoration:none;color:var(--t1);
}
header.site .mark{
  width:30px;height:30px;border-radius:9px;
  background:linear-gradient(135deg,var(--gold),#b8790a);
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(245,166,35,0.35),inset 0 1px 0 rgba(255,255,255,0.18);
}
header.site .mark svg{width:16px;height:16px;color:#fff}

/* ── Type ──────────────────────────────────────────────────────────────── */
h1{font-size:40px;line-height:1.08;letter-spacing:-0.025em;font-weight:800;margin:34px 0 10px}
@media (max-width:880px){h1{font-size:31px;margin-top:26px}}
.updated{font-size:12.5px;color:var(--t3);margin:0 0 34px;letter-spacing:0.01em}
h2{font-size:19px;letter-spacing:-0.015em;font-weight:700;margin:38px 0 12px}
h3{font-size:15px;letter-spacing:-0.01em;font-weight:650;margin:24px 0 8px;color:var(--t1)}
p,li{font-size:14.5px;line-height:1.65;color:var(--t2)}
p{margin:0 0 14px}
ul,ol{margin:0 0 14px;padding-left:22px;display:flex;flex-direction:column;gap:7px}
strong{color:var(--t1);font-weight:650}
a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
a:hover{color:#ff8a5c}
hr{border:0;border-top:1px solid var(--line);margin:40px 0}

/* ── Callout card ──────────────────────────────────────────────────────── */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:22px 24px;
  margin:24px 0;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 16px 60px rgba(0,0,0,0.45),inset 0 1px 0 rgba(255,255,255,0.06);
}
.card :last-child{margin-bottom:0}
.card.accent{border-color:rgba(245,166,35,0.38);box-shadow:0 0 30px rgba(245,166,35,0.13),inset 0 1px 0 rgba(255,255,255,0.06)}

/* Verbatim carrier-required language. Visually distinct so nobody edits it
   casually without realizing it is compliance copy. */
.required-language{
  border-left:2px solid rgba(245,166,35,0.55);
  padding:2px 0 2px 16px;margin:0 0 14px;
  color:var(--t2);font-style:normal;
}

dl.contact{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 18px;align-items:baseline}
dl.contact dt{font-size:11.5px;color:var(--t3);font-weight:600;letter-spacing:0.04em;text-transform:uppercase;white-space:nowrap}
dl.contact dd{margin:0;font-size:14.5px;color:var(--t2)}
@media (max-width:520px){dl.contact{grid-template-columns:1fr;gap:2px 0}dl.contact dd{margin-bottom:12px}}

/* ── Footer ────────────────────────────────────────────────────────────── */
footer.site{
  margin-top:64px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
  font-size:12.5px;color:var(--t3);
}
footer.site a{color:var(--t3);text-decoration:underline;text-underline-offset:2px}
footer.site a:hover{color:var(--t2)}
footer.site .sep{width:3px;height:3px;border-radius:50%;background:var(--t3);opacity:0.6}
footer.site .entity{width:100%;margin-top:6px;color:rgba(255,255,255,0.32);font-size:11.5px}