/* Shared style for Eight Marks secondary pages (thanks, welcome, legal). Same tokens as the landing page. */
:root{
  --bg:#0D0F14; --surface:#151821; --raise:#1C202B; --line:#272C39; --fg:#ECE8DF; --muted:#9BA1AE; --btn:#ECE8DF; --btn-fg:#0D0F14;
  --wood:#55AE83; --fire:#E3604A; --earth:#D9AA45; --metal:#C3C9D3; --water:#5B8BE6; --ok:#55AE83;
  --f-display:"Gloock", "Times New Roman", Georgia, serif;
  --f-body:"Figtree", -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-label:"DM Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#F3F3EF; --surface:#FFFFFF; --raise:#F7F7F4; --line:#DEDED7; --fg:#15171D; --muted:#5F6470; --btn:#15171D; --btn-fg:#F3F3EF;
    --wood:#2D7D57; --fire:#C2412B; --earth:#A47A14; --metal:#6A717D; --water:#2A58B9; --ok:#2D7D57; color-scheme:light;
  }
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--f-body); font-size:16px; line-height:1.65; padding-inline:20px; padding-block:0 48px}
a{color:inherit}
.wrap{max-width:1080px; margin:0 auto}
.narrow{max-width:720px; margin:0 auto}
nav{display:flex; justify-content:space-between; align-items:center; padding-block:20px; gap:16px}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--f-display); font-size:22px; text-decoration:none}
.logo-mark{display:grid; grid-template-columns:repeat(4,6px); gap:3px}
.logo-mark i{width:6px; height:6px; border-radius:50%; display:block}
.bg-Wood{background:var(--wood)} .bg-Fire{background:var(--fire)} .bg-Earth{background:var(--earth)} .bg-Metal{background:var(--metal)} .bg-Water{background:var(--water)}
.label{font-family:var(--f-label); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.ok{color:var(--ok)}
h1,h2,h3{font-family:var(--f-display); font-weight:400; letter-spacing:-.01em; text-wrap:balance; margin:0}
h1{font-size:clamp(32px,5vw,48px); line-height:1.08}
h2{font-size:24px; line-height:1.2; margin-top:36px}
h3{font-size:19px; margin-top:22px}
p{margin:0}
:focus-visible{outline:2px solid var(--water); outline-offset:3px}
.btn{appearance:none; border:0; font:inherit; font-weight:600; font-size:16.5px; background:var(--btn); color:var(--btn-fg); padding:15px 26px; border-radius:999px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center}
.btn:hover{opacity:.9}
.muted{color:var(--muted)}
.card{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:24px; display:flex; flex-direction:column; gap:14px}
.includes{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.includes li{display:grid; grid-template-columns:16px minmax(0,1fr); gap:10px; align-items:start}
.includes svg{width:14px; height:14px; margin-top:6px; stroke:var(--ok); fill:none; stroke-width:2.4}
.plans{display:flex; flex-direction:column; gap:8px}
.plan{display:grid; grid-template-columns:20px minmax(0,1fr) auto; gap:10px; align-items:start; border:1px solid var(--line); border-radius:12px; padding:12px 14px; cursor:pointer; font-size:14.5px}
.plan:has(input:checked){border-color:var(--fg)}
.plan input{width:18px; height:18px; margin-top:2px; accent-color:var(--fg)}
.plan b{display:block; font-size:15.5px}
.plan .sub{color:var(--muted)}
.plan .p{font-family:var(--f-label); font-size:12.5px}
.terms{font-size:13px; color:var(--muted); line-height:1.55}
.skip{font-size:14.5px; color:var(--muted); text-align:center}
.daily{background:var(--raise); border:1px solid var(--line); border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:8px}
.daily .head{font-weight:600}
.split{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:28px; align-items:start; padding-block:24px 40px}
.stack{display:flex; flex-direction:column; gap:18px; min-width:0}
.legal{padding-block:24px 40px}
.legal p, .legal li{color:var(--muted); max-width:68ch}
.legal p + p{margin-top:12px}
.legal ul{padding-left:20px; display:flex; flex-direction:column; gap:6px; margin:12px 0 0}
.legal strong{color:var(--fg); font-weight:600}
footer{border-top:1px solid var(--line); padding-block:28px 8px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; font-size:13.5px; color:var(--muted)}
footer .links{display:flex; flex-wrap:wrap; gap:8px 20px}
footer a{text-decoration:none}
footer a:hover{color:var(--fg)}
@media (max-width:820px){ .split{grid-template-columns:minmax(0,1fr)} }
@media (max-width:480px){ body{padding-inline:16px} .card{padding:18px} }