/* ---------------------------------------------------------------------------
 * Shared styling for the secondary pages: the three policies, the thank-you
 * page, and 404. The landing page and the preview keep their own inline
 * styling; these pages are plain documents and share one sheet instead.
 *
 * Tokens are copied from public/index.html so the whole site reads as one
 * thing. If you change a brand colour there, change it here too.
 * ------------------------------------------------------------------------- */
:root{
  --bg:#F5F6F2;
  --card:#FFFFFF;
  --ink:#1E2A3A;
  --ink-soft:#5B6472;
  --ink-faint:#8A9099;
  --border:#E2DFD3;
  --accent:#C6432B;
  --accent-deep:#8C2F1D;
  --teal:#2F6F5E;
  --gold:#AD7F26;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'IBM Plex Sans',sans-serif; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Fraunces',serif; font-weight:600; letter-spacing:-0.015em; margin:0;}
a{color:var(--accent-deep);}
a:hover{color:var(--accent);}
.mono{font-family:'IBM Plex Mono',monospace;}

.wrap{max-width:780px; margin:0 auto; padding:0 28px;}

/* ---------- top bar (matches the landing page) ---------- */
.topbar{
  height:60px; background:rgba(245,246,242,.9); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10;
}
.topbar .bar{
  max-width:1140px; margin:0 auto; padding:0 32px; height:100%;
  display:flex; align-items:center; gap:18px;
}
.brand{font-family:'Fraunces',serif; font-size:17px; font-weight:600; text-decoration:none; color:var(--ink);}
.brand em{font-style:normal; color:var(--accent);}
.topbar .spacer{flex:1;}
.topbar a.back{font-size:13.5px; color:var(--ink-soft); text-decoration:none;}
.topbar a.back:hover{color:var(--accent);}

/* ---------- document body ---------- */
.doc{padding:60px 0 28px;}
.doc .eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase;
  letter-spacing:0.13em; color:var(--gold); margin-bottom:12px;
}
.doc h1{font-size:clamp(30px,4.4vw,42px); line-height:1.12;}
.doc .updated{
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ink-faint);
  margin-top:16px; padding-top:16px; border-top:1px solid var(--border);
}
.doc .lede{font-size:17px; color:var(--ink-soft); margin:20px 0 0;}
.doc h2{font-size:21px; margin:42px 0 0;}
.doc h3{font-size:16.5px; margin:28px 0 0;}
.doc p{font-size:16px; margin:14px 0 0;}
.doc ul{font-size:16px; color:var(--ink-soft); margin:14px 0 0; padding-left:20px;}
.doc li{margin-bottom:8px;}
.doc li:last-child{margin-bottom:0;}
.doc strong{color:var(--accent-deep);}

.callout{
  margin-top:26px; background:var(--card); border:1px solid var(--border);
  border-left:3px solid var(--teal); border-radius:8px; padding:18px 22px;
}
.callout p:first-child{margin-top:0;}
.callout.warn{border-left-color:var(--gold);}

/* ---------- centred pages: thanks, 404 ---------- */
.centre{
  min-height:calc(100vh - 60px); display:flex; align-items:center; padding:56px 0;
}
.centre .card{
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:44px 46px; box-shadow:0 1px 0 rgba(30,42,58,.04), 0 18px 40px -28px rgba(30,42,58,.35);
}
.centre h1{font-size:clamp(28px,4vw,38px); line-height:1.12;}
.centre .kicker{
  font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase;
  letter-spacing:0.13em; color:var(--accent); margin-bottom:14px;
}
.centre p{font-size:16px; color:var(--ink-soft); margin:18px 0 0;}
.steps{margin:26px 0 0; padding:0; list-style:none; counter-reset:step;}
.steps li{
  position:relative; padding-left:38px; margin-bottom:16px; font-size:15.5px; color:var(--ink-soft);
}
.steps li:last-child{margin-bottom:0;}
.steps li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:0; top:1px; width:24px; height:24px; border-radius:50%;
  background:var(--teal); color:#fff; font-family:'IBM Plex Mono',monospace; font-size:12px;
  display:flex; align-items:center; justify-content:center;
}
.steps li b{color:var(--ink); font-weight:600;}
.actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px;}
.btn{
  display:inline-block; text-decoration:none; font-weight:500; border-radius:8px;
  padding:11px 22px; font-size:14.5px;
  transition:background .16s ease, color .16s ease, transform .16s ease;
}
.btn-primary{background:var(--accent); color:#fff;}
.btn-primary:hover{background:var(--accent-deep); transform:translateY(-1px);}
.btn-ghost{border:1px solid var(--ink); color:var(--ink);}
.btn-ghost:hover{background:var(--ink); color:var(--bg);}

/* ---------- footer (matches the landing page) ---------- */
footer{padding:44px 0 58px; font-size:13px; color:var(--ink-faint); border-top:1px solid var(--border); margin-top:56px;}
footer .bar{
  max-width:1140px; margin:0 auto; padding:0 32px;
  display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center;
}
footer .spacer{flex:1;}
footer a{color:inherit; text-decoration:none;}
footer a:hover{color:var(--accent);}
/* Second footer line: who owns the material and what it is not. Every public
   page carries it, so the scope-of-practice note is never more than a scroll
   away from whatever the visitor is reading. */
footer .legal{
  max-width:1140px; margin:16px auto 0; padding:14px 32px 0;
  border-top:1px solid var(--border); line-height:1.6;
}
footer .legal p{margin:0 0 5px;}
footer .legal p:last-child{margin-bottom:0;}

@media (prefers-reduced-motion:reduce){
  .btn{transition:none;}
}
@media (max-width:700px){
  .topbar .bar,footer .bar{padding:0 20px;}
  footer .legal{padding-left:20px; padding-right:20px;}
  .wrap{padding:0 20px;}
  .doc{padding:40px 0 20px;}
  .centre .card{padding:30px 26px;}
}