/* 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%}
/* The lockup's own proportions, not a guess: in the printed logo the word is
   6.79x the mark's height long and sits 0.79x away from it. A 26px mark puts
   the word at 176x20 with a 20px gap. */
.mark{display:inline-flex; align-items:center; gap:20px; margin:0 0 2.1rem}
.mark img{width:26px; height:26px; display:block}
.mark img.word{width:auto; height:20px}
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}

/* --- 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:14px; 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 img.word{width:auto; height:14px}
.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}
}

/* --- sample report ------------------------------------------------------- */
/* Paper on a dark desk. The report is the product of the app, so it is shown
   as what it is — A4 sheets, in order, at full width on a phone — rather than
   as a download nobody opens on the device they are browsing from. */

main.sample{flex:1 0 auto; width:100%; padding:0 0 3.5rem}

.sample-head{
  max-width:42rem; margin:0 auto;
  padding:clamp(2.2rem,6vh,3.6rem) 1.25rem 0;
}
.sample-head h1{font-size:clamp(1.9rem,5vw,2.5rem); margin:0 0 .6rem; text-align:left}
.sample-head p{color:#cfcfd4; margin:0 0 1rem; max-width:32rem}

.facts{
  display:flex; flex-wrap:wrap; gap:.5rem; margin:1.4rem 0 0; padding:0; list-style:none;
}
.facts li{
  background:var(--surface); border:1px solid var(--line); border-radius:2rem;
  padding:.34rem .85rem; font-size:.8rem; color:var(--dim);
  font-variant-numeric:tabular-nums;
}
.facts li b{color:var(--text); font-weight:700}

.hint{
  display:block; margin:1.6rem auto 0; max-width:42rem; padding:0 1.25rem;
  color:#6d6d73; font-size:.8rem;
}

.sheets{
  display:flex; flex-direction:column; align-items:center; gap:1.1rem;
  padding:1.1rem .75rem 0;
}
.sheet{margin:0; width:100%; max-width:42rem}
.sheet a{display:block; text-decoration:none; border-radius:.2rem}
.sheet a:focus-visible{outline:2px solid var(--gold); outline-offset:4px}
.sheet img{
  display:block; width:100%; height:auto; background:#fff;
  border-radius:.2rem; box-shadow:0 1px 0 rgba(255,255,255,.14), 0 10px 26px rgba(0,0,0,.6);
}
.sheet figcaption{
  margin-top:.5rem; text-align:center; color:#5c5c62; font-size:.74rem;
  font-variant-numeric:tabular-nums; letter-spacing:.06em;
}

.sample-end{
  max-width:42rem; margin:2.6rem auto 0; padding:2rem 1.25rem 0;
  border-top:1px solid var(--line); text-align:center;
}
.sample-end p{color:#cfcfd4; margin:0 0 1.4rem; text-wrap:balance}