/* Shared chrome for the two legal pages. They are the only pages on the site
   with more prose than controls, so they get a wider note and a real reading
   column -- but the same paper, ledger rules and copper accents as the
   calculator, so it never feels like you left the site. */

:root{
  --paper: #F3E6C6;
  --ledger: #0D3B2A;
  --ledger-deep: #071F16;
  --copper: #D07C2C;
  --seal: #A0311E;
  --muted: #7C6A4C;
  --body-ink: #45372A;
  --bg-deep: #071710;
  --bg-glow: #123826;
}

*{ box-sizing: border-box; }

body{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  background: var(--bg-deep);
  background-image:
    radial-gradient(circle at 22% 12%, rgba(208,124,44,0.20), transparent 45%),
    radial-gradient(circle at 85% 88%, rgba(160,49,30,0.18), transparent 42%),
    radial-gradient(ellipse at 50% 0%, var(--bg-glow), var(--bg-deep) 68%);
  background-attachment: fixed;
  font-family: 'IBM Plex Sans', sans-serif;
  color: var(--body-ink);
  padding: 28px 14px 40px;
}

.note{
  width:100%;
  max-width: 620px;
  background: var(--paper);
  border: 1.5px solid var(--ledger);
  border-radius: 6px;
  position: relative;
  padding: 34px 30px 26px;
  box-shadow:
    0 1px 0 rgba(13,59,42,0.25) inset,
    0 0 0 1px rgba(208,124,44,0.15),
    0 22px 50px -20px rgba(0,0,0,0.65);
}
.note::before{
  content:""; position:absolute; inset:7px; border:1px solid var(--copper);
  border-radius:3px; pointer-events:none; opacity:0.6;
}
.note::after{
  content:""; position:absolute; inset:11px; border:1px solid var(--ledger);
  border-radius:2px; pointer-events:none; opacity:0.22;
}
.inner{ position:relative; z-index:1; }

.kicker{
  font-size:11.5px; letter-spacing:0.04em; color:var(--copper);
  margin:0 0 6px; font-weight:600; text-transform:uppercase; text-align:center;
}
h1{
  font-family:'Spectral', serif; font-weight:600; font-size:28px; line-height:1.2;
  margin:0 0 8px; color:var(--ledger-deep); text-align:center;
}
.updated{
  margin:0 0 22px; text-align:center; font-size:11.5px; color:#8a7f6a;
  letter-spacing:0.02em;
}

.divider{ display:flex; align-items:center; gap:8px; margin: 22px 0; }
.divider .line{ flex:1; height:1px; background:rgba(13,59,42,0.22); }
.divider .diamond{
  width:6px; height:6px; background:var(--copper); transform:rotate(45deg);
  flex:none; opacity:0.85;
}

h2{
  font-family:'Spectral', serif; font-weight:600; font-size:18px; line-height:1.3;
  margin:26px 0 4px; color:var(--ledger-deep);
}
h2:first-of-type{ margin-top:0; }
h2 + .rule{
  height:2px; width:34px; background:var(--copper); opacity:0.75;
  margin:0 0 11px; border-radius:1px;
}

p{ margin:0 0 13px; font-size:14.5px; line-height:1.62; }
p:last-child{ margin-bottom:0; }
.lead{ font-size:15.5px; color:var(--ledger-deep); }

ul{ margin:0 0 13px; padding-left:19px; }
li{ font-size:14.5px; line-height:1.6; margin-bottom:7px; }
li:last-child{ margin-bottom:0; }
li strong{ color:var(--ledger-deep); font-weight:600; }

/* The clauses the site actually stands behind, set apart from the explanatory
   prose around them so they read as the operative language. */
.clause{
  font-family:'Spectral', serif; font-style:italic; font-size:15.5px;
  line-height:1.6; color:var(--ledger-deep);
  margin:0 0 14px; padding:12px 16px;
  border-left:3px solid var(--copper);
  background:rgba(13,59,42,0.045);
  border-radius:0 3px 3px 0;
}

a{ color:var(--ledger-deep); text-decoration:none; border-bottom:1px solid var(--copper); }
a:hover{ color:var(--seal); border-bottom-color:var(--seal); }

.page-foot{ margin-top:26px; text-align:center; }
.home{
  display:inline-block; font-size:13.5px; font-weight:600;
  padding:9px 18px; border:1px solid var(--ledger); border-radius:3px;
  background:var(--ledger); color:var(--paper); text-decoration:none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.home:hover{ background:var(--copper); border-color:var(--copper); color:var(--paper); }

.legal-nav{
  margin-top:16px; text-align:center; font-size:11.5px; color:#8a7f6a;
  line-height:1.5;
}
.legal-nav a{
  color:#6f6455; border-bottom-color:rgba(208,124,44,0.5);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.legal-nav a:hover{ color:var(--seal); border-bottom-color:var(--seal); }
.legal-nav .sep{ margin:0 7px; opacity:0.6; }

@media (max-width: 420px){
  body{ padding: 16px 10px 30px; }
  .note{ padding: 26px 20px 22px; }
  h1{ font-size:23px; }
  h2{ font-size:16.5px; }
  p, li{ font-size:14px; }
  .clause{ font-size:14.5px; padding:11px 13px; }
}