/* NOBREAKS Quicksilver skin for the service pages, call page, privacy and 404.
   Loaded after each page's own styles. Palette (David, 2026-10-29): Onyx #0A0A0A, Alabaster #E5E4E2, Blue Slate #536878,
   Deep Slate #3F4B54, Tail Light #D91A12. Red is never a fill, a background or text; it marks small details only.
   Type: Unbounded 800 for page headings, Archivo for text, JetBrains Mono for labels. */
:root {
  --ink: #0A0A0A;
  --teal: #14181B;
  --mist: #9AA6AE;
  --paper: #E5E4E2;
  --red: #D91A12;
  --slate: #171B1E;
  --line: rgba(229, 228, 226, .14);
  --line-ink: rgba(10, 10, 10, .14);
  --muted-ink: #3F4B54;
  --ag: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  /* call page and privacy names */
  --moss: #9AA6AE;
  --muted: #9AA6AE;
  --orange: #D91A12;
}
html { background: var(--ink); }
body { font-family: var(--ag); background: var(--ink); color: var(--paper); }

/* headings: Unbounded for the page title, Archivo for the rest */
h1 { font-family: "Unbounded", var(--ag); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.06; font-size: clamp(30px, 4.4vw, 58px); overflow-wrap: anywhere; }
h2, h3 { font-family: var(--ag); font-weight: 500; letter-spacing: -.015em; }

/* the main book pill: Alabaster with an Onyx icon; red only as the small dot */
.bk { background: var(--paper); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.bk:hover { background: #fff; box-shadow: 0 10px 28px -14px rgba(229, 228, 226, .6); }
.bk-dot, .bk-dot::after { background: var(--red); }
.bk-ic { background: var(--ink); color: var(--paper); }
.bk:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.top { background: rgba(10, 10, 10, .74); }
.grain { opacity: .12; }

/* call page */
form .btn { background: var(--paper); color: var(--ink); font-family: var(--ag); font-weight: 500; }
form .btn:hover { background: #fff; }
.card { background-color: #14181B; background-image: radial-gradient(circle farthest-corner at 85% 10%, rgba(83, 104, 120, .3), rgba(83, 104, 120, 0) 65%); }
.label .dot, .facts li::before { color: var(--red); }
.facts li::before { background: var(--red); }
input[type=text]:focus-visible, input[type=email]:focus-visible, textarea:focus-visible, .opts input:focus-visible + span { outline-color: var(--red); }
.opts input:checked + span { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.back:hover { background: var(--paper); color: var(--ink); }

/* privacy and 404 */
main a { text-decoration-color: rgba(217, 26, 18, .7); }

/* service pages: cool light instead of the warm glow */
.hero { background-image: radial-gradient(70% 90% at 82% 30%, rgba(83, 104, 120, .22), rgba(83, 104, 120, 0) 70%); }
.dark.paper { background: radial-gradient(70% 60% at 50% 0%, rgba(83, 104, 120, .16), rgba(83, 104, 120, 0) 70%), #0E1113; }
.end { background: var(--ink) radial-gradient(60% 80% at 50% 0%, rgba(83, 104, 120, .18), rgba(83, 104, 120, 0) 70%); }

/* 404: the button is an Alabaster pill, not a red fill */
.card .btn:not(.ghost) { background: var(--paper); color: var(--ink); font-weight: 500; }