/* ==========================================================================
   StrataHawk — tos.css
   Standalone terms page. A legal document, so it is set as one: a measure that
   is comfortable to read, and a type scale that steps rather than jumps.
       <link rel="stylesheet" href="css/tokens.css">
       <link rel="stylesheet" href="css/tos.css">
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  background: var(--bg-page); color: var(--text-primary);
  line-height: var(--leading-normal);
}
.wrap { max-width: 68ch; margin: 0 auto; padding: var(--space-10) var(--gutter) var(--space-11); }
.header { padding-bottom: var(--space-8); margin-bottom: var(--space-9); border-bottom: 2px solid var(--border); }
.logo { margin-bottom: var(--space-5); font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
h1 { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--text-primary); letter-spacing: var(--tracking-tight); }
.meta { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); }
h2 { margin: var(--space-9) 0 var(--space-4); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-primary); }
p, li { font-size: var(--text-md); color: var(--text-secondary); }
p { margin-bottom: var(--space-5); }
ul { padding-left: var(--space-7); margin-bottom: var(--space-5); }
li { margin-bottom: var(--space-3); }
.close-btn {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: var(--space-10); padding: var(--space-5) var(--space-8); min-height: var(--target-min);
  font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-semibold);
  color: var(--text-on-accent); background: var(--blue-700);
  border: none; border-radius: var(--radius-btn); text-decoration: none; cursor: pointer;
}
.close-btn:hover { background: var(--blue-600); }
:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); }