/* ============================================================
   GUARDIAN FINANCIAL / legal pages (Terms of Use, Privacy Policy)
   Shares the landing page's tokens, type ramp, nav and footer.
   ============================================================ */
:root{
  --gold-hi:#F6E4C6;
  --gold-lt:#E5C89A;
  --gold:#C9A45C;
  --gold-sh:#8A6A3C;
  --sil-hi:#CDC5BD;
  --sil-lt:#AAA29E;
  --sil:#8B8580;
  --sil-sh:#6B6761;
  --ink:#000000;
  --navy:#0A0A0B;
  --char:#14171A;

  --line:rgba(205,197,189,.16);
  --line-gold:rgba(201,164,92,.34);

  --maxw:1200px;
  --pad:clamp(20px,5vw,52px);

  --display:"Sora",system-ui,sans-serif;
  --body:"Jost",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.8,.25,1);

  --metal-gold:linear-gradient(180deg,var(--gold-hi) 0%,var(--gold-lt) 24%,var(--gold) 56%,var(--gold-sh) 82%,var(--gold-lt) 100%);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:124px}
body{
  font-family:var(--body);background:var(--ink);color:var(--sil-hi);
  line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
svg{display:block;max-width:100%}
a{color:var(--gold-lt)}
a:hover{color:var(--gold-hi)}

.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);position:relative;z-index:2}
.hairline{height:1px;background:linear-gradient(90deg,transparent,var(--line-gold) 22%,var(--gold) 50%,var(--line-gold) 78%,transparent);opacity:.7}

h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.02;letter-spacing:-.03em;color:var(--sil-hi)}
.metal{
  background:var(--metal-gold);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.eyebrow{
  display:flex;align-items:center;gap:14px;font-family:var(--body);
  font-size:clamp(10px,1.2vw,12px);font-weight:500;
  letter-spacing:.42em;text-transform:uppercase;color:var(--gold-lt);
}
.eyebrow::before{content:"";width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--gold));flex:none}

.lockup{display:block;text-decoration:none;line-height:0}
.lockup img{display:block;width:100%;height:auto}

/* ---------- buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.8em;overflow:hidden;
  font-family:var(--body);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  font-size:clamp(12px,1.3vw,13.5px);
  padding:1.25em 2.1em;border:0;cursor:pointer;text-decoration:none;border-radius:2px;
  background:var(--metal-gold);color:#120D06;
  box-shadow:0 1px 0 rgba(246,228,198,.7) inset,0 14px 40px -22px rgba(201,164,92,.9);
  transition:filter .3s var(--ease),transform .3s var(--ease);
}
.btn:hover{filter:brightness(1.07);color:#120D06}
.btn::after{
  content:"";position:absolute;top:0;left:-60%;width:42%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);opacity:0;
}
.btn:hover::after{animation:sheen .75s var(--ease) forwards}
@keyframes sheen{from{left:-60%;opacity:1}to{left:120%;opacity:0}}
.btn .tip{width:20px;height:8px;flex:none;transition:transform .25s var(--ease)}
.btn:hover .tip{transform:translateX(5px)}
.btn.sm{padding:.9em 1.35em;font-size:11.5px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:120;background:rgba(0,0,0,.82);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:104px}
.nav .lockup{display:flex;align-items:center;gap:16px;width:auto}
.nav .lockup img{height:clamp(52px,6.4vw,64px);width:auto;object-fit:contain;filter:drop-shadow(0 0 20px rgba(201,164,92,.3));transition:filter .3s var(--ease)}
.nav .lockup:hover img{filter:drop-shadow(0 0 26px rgba(201,164,92,.5)) brightness(1.08)}
.nav .wordmark{display:flex;flex-direction:column;gap:5px;line-height:1}
.nav .wordmark .a{font-family:var(--display);font-size:clamp(17px,2.1vw,23px);font-weight:700;letter-spacing:.16em;background:var(--metal-gold);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.nav .wordmark .b{font-size:clamp(8.5px,1vw,10.5px);font-weight:500;letter-spacing:.46em;color:var(--sil-lt)}
@media(max-width:560px){.nav .wordmark{display:none}}
.nav-links{display:flex;align-items:center;gap:clamp(16px,2.4vw,36px)}
.nav-links a.textlink{
  font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;color:var(--sil-lt);position:relative;transition:color .25s var(--ease);
}
.nav-links a.textlink::after{content:"";position:absolute;left:0;right:100%;bottom:-8px;height:1px;background:var(--metal-gold);transition:right .32s var(--ease)}
.nav-links a.textlink:hover{color:var(--gold-hi)}
.nav-links a.textlink:hover::after{right:0}
@media(max-width:820px){.nav-links a.textlink{display:none}}

/* ---------- legal masthead ---------- */
.legal-head{
  position:relative;overflow:hidden;
  padding:clamp(56px,9vh,104px) 0 clamp(40px,6vh,64px);
  background:radial-gradient(120% 90% at 50% 0%,rgba(205,197,189,.055) 0%,transparent 60%),var(--navy);
}
.legal-head::after{
  content:"";position:absolute;left:50%;top:-40%;width:min(120vw,1300px);aspect-ratio:1;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(201,164,92,.10) 0%,transparent 62%);pointer-events:none;z-index:0;
}
.legal-head h1{font-size:clamp(38px,6.4vw,82px);line-height:.94;letter-spacing:-.045em;margin-top:.34em}
.legal-head .sub{margin-top:1.5em;max-width:58ch;font-size:clamp(15px,1.75vw,18px);line-height:1.62;color:var(--sil-lt);font-weight:300}
.legal-head .updated{
  margin-top:clamp(26px,4vh,38px);padding-top:22px;border-top:1px solid var(--line);
  font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--sil);
}

/* ---------- body layout ---------- */
.legal-body{padding:clamp(52px,8vh,96px) 0 clamp(72px,11vh,132px);background:var(--ink)}
.legal-grid{display:grid;grid-template-columns:minmax(0,236px) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:start}
@media(max-width:900px){.legal-grid{grid-template-columns:minmax(0,1fr);gap:40px}}

/* table of contents */
.toc{position:sticky;top:132px}
.toc h2{font-size:11.5px;font-weight:500;font-family:var(--body);letter-spacing:.28em;text-transform:uppercase;color:var(--gold-lt);padding-bottom:16px;border-bottom:1px solid var(--line-gold)}
.toc ol{list-style:none;counter-reset:toc;margin-top:18px;display:flex;flex-direction:column;gap:2px}
.toc a{
  display:flex;gap:12px;padding:7px 0;font-size:13.5px;line-height:1.4;font-weight:300;
  text-decoration:none;color:var(--sil);transition:color .25s var(--ease);
}
.toc a::before{counter-increment:toc;content:counter(toc,decimal-leading-zero);font-size:10.5px;letter-spacing:.14em;color:var(--sil-sh);padding-top:.28em;flex:none;font-variant-numeric:tabular-nums}
.toc a:hover{color:var(--gold-hi)}
.toc a:hover::before{color:var(--gold)}
@media(max-width:900px){
  .toc{position:static;padding-bottom:8px}
  .toc ol{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:0 28px}
}

/* prose */
.prose{max-width:74ch;counter-reset:sec}
.prose > section{padding-top:clamp(40px,6vh,66px)}
.prose > section:first-child{padding-top:0}
.prose > section + section{margin-top:clamp(40px,6vh,66px);border-top:1px solid var(--line)}
.prose h2{
  display:flex;gap:clamp(14px,2vw,22px);align-items:baseline;
  font-size:clamp(23px,3vw,34px);letter-spacing:-.03em;line-height:1.08;text-wrap:balance;
}
.prose h2::before{
  counter-increment:sec;content:counter(sec,decimal-leading-zero);
  font-size:clamp(11px,1.2vw,13px);font-weight:700;letter-spacing:.2em;line-height:1.6;
  color:var(--gold);flex:none;font-variant-numeric:tabular-nums;
}
.prose h3{
  margin-top:clamp(26px,4vh,38px);font-size:clamp(15px,1.6vw,18px);font-weight:700;
  letter-spacing:.02em;text-transform:uppercase;color:var(--gold-lt);
}
.prose p{margin-top:1.15em;font-size:clamp(15px,1.62vw,16.5px);line-height:1.78;color:var(--sil-lt);font-weight:300;text-wrap:pretty}
.prose h2 + p,.prose h3 + p{margin-top:1.35em}
.prose strong{color:var(--sil-hi);font-weight:600}

.prose ul{list-style:none;margin-top:1.35em;display:flex;flex-direction:column;gap:.72em}
.prose ul li{
  position:relative;padding-left:26px;font-size:clamp(15px,1.62vw,16.5px);line-height:1.7;
  color:var(--sil-lt);font-weight:300;text-wrap:pretty;
}
.prose ul li::before{
  content:"";position:absolute;left:0;top:.72em;width:9px;height:1px;background:var(--gold);opacity:.85;
}
.prose ul li b{color:var(--sil-hi);font-weight:600}

/* pull-out panel for the STOP/HELP style key actions */
.keys{
  margin-top:1.5em;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:2px;overflow:hidden;
}
.keys div{display:flex;flex-wrap:wrap;gap:6px 18px;padding:16px clamp(16px,2.4vw,22px);background:var(--navy)}
.keys dt{
  flex:none;min-width:150px;font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-lt);line-height:1.7;
}
.keys dd{flex:1 1 260px;font-size:clamp(14.5px,1.55vw,16px);line-height:1.65;color:var(--sil-lt);font-weight:300}

/* SMS Opt-Out & Help table */
.sms-table{
  margin-top:1.5em;width:100%;border-collapse:collapse;border:1px solid var(--line);
  border-radius:2px;overflow:hidden;font-size:clamp(14.5px,1.55vw,16px);
}
.sms-table thead tr{background:rgba(201,164,92,.08);border-bottom:1px solid var(--line-gold)}
.sms-table thead th{
  padding:13px clamp(16px,2.4vw,22px);text-align:left;
  font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-lt);font-family:var(--body);
}
.sms-table tbody tr{background:var(--navy);border-bottom:1px solid var(--line)}
.sms-table tbody tr:last-child{border-bottom:none}
.sms-table tbody td{padding:15px clamp(16px,2.4vw,22px);vertical-align:top;line-height:1.65;color:var(--sil-lt);font-weight:300}
.sms-table tbody td:first-child{
  font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-lt);white-space:nowrap;width:180px;padding-top:18px;
}
@media(max-width:600px){
  .sms-table,.sms-table thead,.sms-table tbody,.sms-table tr,.sms-table td,.sms-table th{display:block}
  .sms-table thead{display:none}
  .sms-table tbody td{padding:10px clamp(16px,2.4vw,22px);width:auto;white-space:normal}
  .sms-table tbody td:first-child{padding-bottom:4px;border-bottom:none}
  .sms-table tbody tr{border-bottom:1px solid var(--line);padding:6px 0}
}

/* ---------- footer ---------- */
.footer{padding:clamp(56px,9vh,96px) 0 clamp(34px,5vh,52px);border-top:1px solid var(--line);background:#000}
.footer-top{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap}
.footer .lockup{width:clamp(160px,20vw,220px)}
.footer-links{display:flex;flex-direction:column;gap:12px}
.footer-links a{font-size:12px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--sil);transition:color .25s var(--ease)}
.footer-links a:hover{color:var(--gold-hi)}
.footer-bottom{margin-top:clamp(42px,7vh,72px);padding-top:26px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--sil);line-height:1.7}
.footer-bottom span{max-width:64ch}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}