/* Companion site: pay page. Direction B "Stockcode" (docs/DESIGN.md): black ink on cool grey, one red
   accent used only on the "2" of the wordmark, 2px corners, no shadows, no gradients, no icons.
   The colour values are the ones in src/theme/tokens.ts (a test compares them). Errors carry the
   word "Error:" and a heavy ink frame instead of a red. 16px body, 48px controls, light and dark. */

@font-face {
  font-family: 'Sofia Sans';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/SofiaSans-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Sofia Sans';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/SofiaSans-700.ttf') format('truetype');
}
@font-face {
  font-family: 'Sofia Sans Extra Condensed';
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/SofiaSansExtraCondensed-800.ttf') format('truetype');
}

:root {
  color-scheme: light dark;
  --bg: #eef0f1;
  --surface: #ffffff;
  --text: #151515;
  --muted: #50565a;
  --border: #cfd4d6;
  --accent: #c72d14;
  --solid: #151515;
  --on-solid: #ffffff;
  --font:
    'Sofia Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --code: 'Sofia Sans Extra Condensed', 'Sofia Sans', system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111213;
    --surface: #1b1d1e;
    --text: #eef1f2;
    --muted: #a3aaae;
    --border: #2f3335;
    --accent: #ff6a4d;
    --solid: #eef1f2;
    --on-solid: #151515;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
}

.skip {
  position: absolute;
  left: 8px;
  top: -64px;
  padding: 12px 16px;
  background: var(--solid);
  color: var(--on-solid);
  border-radius: 2px;
  z-index: 10;
}
.skip:focus {
  top: 8px;
}

.top {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 16px 4px;
}

.brand {
  display: inline-block;
  color: var(--text);
  text-decoration: none;
  min-height: 44px;
  line-height: 44px;
}

.wordmark {
  font-family: var(--code);
  font-weight: 800;
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.wordmark .accent {
  color: var(--accent);
}

main {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 8px 16px 32px;
  flex: 1 0 auto;
}
main:focus {
  outline: none;
}

h1 {
  margin: 16px 0 8px;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
}
h2 {
  margin: 24px 0 8px;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
}
p {
  margin: 0 0 12px;
}
.muted {
  color: var(--muted);
}
.small {
  font-size: 14px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 16px;
  margin: 16px 0;
}

dl.rows {
  margin: 0;
}
dl.rows > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
dl.rows > div:first-child {
  border-top: 0;
  padding-top: 0;
}
dl.rows > div:last-child {
  padding-bottom: 0;
}
dt {
  color: var(--muted);
}
dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
  min-width: 0;
}

.price {
  font-family: var(--code);
  font-weight: 800;
  font-size: 40px;
  line-height: 1.1;
}
.price-note {
  margin: 4px 0 0;
  color: var(--muted);
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 10px 16px;
  border: 2px solid var(--solid);
  border-radius: 2px;
  background: var(--solid);
  color: var(--on-solid);
  font: inherit;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.btn.secondary {
  background: transparent;
  color: var(--text);
}
.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn + .btn,
.btn + .link-row {
  margin-top: 12px;
}
@media (hover: hover) {
  .btn:not([disabled]):hover {
    opacity: 0.88;
  }
}
.btn:active:not([disabled]) {
  transform: scale(0.99);
}

.link-row {
  text-align: center;
}
a {
  color: var(--text);
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 3px;
}

label {
  display: block;
  margin: 12px 0 6px;
  font-weight: 700;
}
input[type='email'],
input[type='file'] {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 2px solid var(--border);
  border-radius: 2px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
input[type='email'] {
  /* 16px stops iOS Safari from zooming the page when the field is focused. */
  font-size: 16px;
}
input[type='file'] {
  padding: 10px 12px;
}

.error {
  margin: 12px 0;
  padding: 12px 14px;
  border: 2px solid var(--text);
  border-radius: 2px;
  background: var(--surface);
}
.error::first-line {
  font-weight: 700;
}
.notice {
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--surface);
}

.ref {
  font-family: var(--code);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

footer {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 16px 28px;
  color: var(--muted);
  font-size: 14px;
  border-top: 1px solid var(--border);
}
footer p {
  margin: 0 0 4px;
}

@media (min-width: 900px) {
  .top,
  main,
  footer {
    max-width: 720px;
  }
  main {
    padding-top: 16px;
  }
  .btn {
    width: auto;
    min-width: 280px;
  }
  .price {
    font-size: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn:active:not([disabled]) {
    transform: none;
  }
}

@media print {
  .btn,
  .link-row,
  .skip,
  footer {
    display: none;
  }
  body {
    background: #fff;
    color: #000;
  }
}

.card > h2:first-child {
  margin-top: 0;
}

form .btn {
  margin-top: 12px;
}

/* ---- Slice 11: legal pages, forms, footer navigation ------------------------------------------ */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0 0 8px;
}
.footer-nav a {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
}

main.legal {
  max-width: 720px;
}
main.legal h2 {
  margin-top: 28px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
main.legal h3 {
  margin: 20px 0 6px;
  font-size: 16px;
}
main.legal ul,
main.legal ol {
  margin: 0 0 12px;
  padding-left: 24px;
}
main.legal li {
  margin-bottom: 4px;
}
main.legal blockquote {
  margin: 12px 0;
  padding: 8px 16px;
  border-left: 4px solid var(--text);
  background: var(--surface);
}
main.legal code {
  font-size: 14px;
  overflow-wrap: anywhere;
}
main.legal hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 24px 0;
}
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  color: var(--muted);
  font-weight: 700;
}
.notice.draft {
  border: 2px solid var(--text);
  font-weight: 700;
}
.contents {
  margin: 16px 0;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--surface);
}
main.legal .contents h2 {
  margin: 0 0 8px;
  border: 0;
  padding: 0;
  font-size: 16px;
}
.contents ol {
  margin: 0;
  columns: 2 220px;
}
.doc-list {
  padding-left: 0;
  list-style: none;
}
.doc-list li {
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.doc-list .muted {
  display: block;
}

/* Tables scroll inside their own box on a phone; the page itself never scrolls sideways. */
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  margin: 12px 0;
  border: 1px solid var(--border);
  border-radius: 2px;
}
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 480px;
  font-size: 14px;
}
th,
td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
th {
  background: var(--surface);
}

textarea,
select,
input[type='text'] {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 2px solid var(--border);
  border-radius: 2px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 16px;
}
textarea {
  resize: vertical;
}
input[type='text'] {
  letter-spacing: 0.2em;
  font-family: var(--code);
  font-size: 24px;
}
fieldset {
  margin: 0 0 8px;
  padding: 0;
  border: 0;
}
legend {
  padding: 0;
  margin: 12px 0 6px;
  font-weight: 700;
}
label.choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  min-height: 44px;
  padding: 8px 0;
  font-weight: 400;
}
label.choice input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--solid);
}
.captcha {
  margin: 12px 0;
  min-height: 0;
}
[hidden] {
  display: none !important;
}

/* Quote and award-check forms (phase 6 and 7 site pages): plain inputs that keep their own letter spacing. */
input.plain {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 2px solid var(--border);
  border-radius: 2px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  letter-spacing: normal;
}
input.plain.code {
  font-family: var(--code);
  font-size: 14px;
}
.field {
  margin: 0 0 14px;
}