/* Rectify — shared styles.
   One file for all three pages so the home page and the legal pages cannot drift
   apart. Deliberately single-theme: this site is the app's black, everywhere. */

:root{
  --bg:#000; --surface:#141418; --line:#2a2a30;
  --text:#f4f4f6; --dim:#8e8e94; --gold:#f5c518;
  --measure:34rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh;
}

/* --- home ---------------------------------------------------------------- */
main.hero{
  flex:1 0 auto; display:flex; align-items:center; justify-content:center;
  padding:clamp(3rem,10vh,7rem) 1.5rem 3rem; text-align:center;
}
.card{max-width:var(--measure); width:100%}
.mark{display:inline-flex; align-items:center; gap:.6rem; margin:0 0 2.1rem}
.mark img{width:26px; height:26px; display:block}
.mark span{font-size:.94rem; font-weight:800; letter-spacing:.19em; text-transform:uppercase}
h1{
  font-size:clamp(2.05rem,6.2vw,3.1rem); font-weight:800; line-height:1.06;
  letter-spacing:-.03em; margin:0 0 1rem; text-wrap:balance;
}
.sub{color:var(--dim); font-size:clamp(1rem,2.4vw,1.12rem); margin:0 auto; max-width:26rem; text-wrap:balance}
.actions{display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin-top:2.1rem}
.btn{
  display:inline-block; font-weight:700; font-size:1rem; text-decoration:none;
  padding:.78rem 1.6rem; border-radius:2rem; border:1.5px solid var(--gold);
  transition:transform .15s ease, background-color .15s ease;
}
.btn.solid{background:var(--gold); color:#000}
.btn.ghost{color:var(--gold); background:none}
.btn:hover{transform:translateY(-1px)}
.btn.ghost:hover{background:rgba(245,197,24,.1)}
.btn:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.btn[aria-disabled="true"]{opacity:.45; pointer-events:none}
.pending{display:block; margin-top:.9rem; font-size:.8rem; color:#6d6d73}

/* --- documents ----------------------------------------------------------- */
main.doc{
  flex:1 0 auto; width:100%; max-width:42rem; margin:0 auto;
  padding:clamp(2.5rem,7vh,4.5rem) 1.5rem 3.5rem;
}
.back{
  display:inline-flex; align-items:center; gap:.55rem; text-decoration:none;
  color:var(--dim); font-size:.86rem; font-weight:600; margin-bottom:2.4rem;
}
.back img{width:18px; height:18px; display:block}
.back:hover{color:var(--text)}
.back:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:3px}

main.doc h1{
  font-size:clamp(1.9rem,5vw,2.5rem); margin:0 0 .5rem; text-align:left;
}
.updated{
  color:#6d6d73; font-size:.84rem; margin:0 0 2.4rem;
  font-variant-numeric:tabular-nums;
}
main.doc h2{
  font-size:1.06rem; font-weight:700; letter-spacing:-.01em;
  margin:2.4rem 0 .6rem; padding-top:1.6rem; border-top:1px solid var(--line);
}
main.doc h2:first-of-type{border-top:0; padding-top:0; margin-top:0}
main.doc p, main.doc li{color:#cfcfd4; font-size:1rem; margin:0 0 1rem}
main.doc strong{color:var(--text)}
main.doc ul{padding-left:1.15rem; margin:0 0 1rem}
main.doc li{margin-bottom:.45rem}
main.doc a{color:var(--gold)}
main.doc a:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:2px}

.callout{
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:.55rem; padding:1rem 1.15rem; margin:0 0 1.6rem;
}
.callout p{margin:0; color:#dcdce0; font-size:.95rem}

/* --- footer -------------------------------------------------------------- */
footer{flex:none; border-top:1px solid var(--line); padding:1.4rem 1.5rem 2rem; text-align:center}
.links{display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; justify-content:center; font-size:.86rem; margin:0 0 .8rem}
.links a{color:var(--dim); text-decoration:none}
.links a:hover{color:var(--text); text-decoration:underline}
.links a:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:2px}
.fine{color:#5c5c62; font-size:.78rem; margin:0}

@media (prefers-reduced-motion:reduce){
  .btn{transition:none}
  .btn:hover{transform:none}
}