/* Marcos's look on the engine's own pages: the checkout, the thank-you page,
   the legal pages and the 404. Linked after the engine's brand.css through
   brand.stylesheet, so these rules win. Fonts and colours match his sales
   page and the checkout he had before the engine. */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap");

:root {
  --accent: #ff7a1a;
  --ink: #17160f;
  --muted: #5a6b7f;
  --bg: #f4f6f9;
  --panel: #ffffff;
  --line: #e8edf3;
  --radius: 14px;
  --font: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --navy: #0a1628;
  --orange-100: #fff1e6;
  --orange-600: #e86a0c;
}

body {
  background: var(--bg);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .btn {
  font-family: "Bricolage Grotesque", "Arial Black", sans-serif;
  font-weight: 800;
  letter-spacing: -0.015em;
}

h1 { font-size: 30px; line-height: 1.1; }
h2 { font-size: 23px; }

.site-head {
  background: var(--navy);
  color: #ffb877;
  padding: 11px 16px;
}
.site-head .wordmark {
  font-family: "Bricolage Grotesque", "Arial Black", sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

main {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(10, 22, 40, 0.08);
  margin-top: 24px;
  padding-top: 8px;
}

.when {
  background: var(--orange-100);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15.5px;
}

.bump {
  background: #fffaf5;
  border: 2px dashed var(--accent);
  border-radius: 12px;
}
.bump .bump-price { color: var(--orange-600); font-weight: 700; }

.field {
  border: 1px solid #d6dde6;
  border-radius: 10px;
  font-family: var(--font);
}

.btn {
  background: var(--accent);
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(232, 106, 12, 0.25);
  font-size: 20px;
}
@media (hover: hover) {
  .btn:hover { background: var(--orange-600); }
}

.total { color: var(--navy); }
.site-foot { background: var(--bg); }
.site-foot a { color: var(--orange-600); }