@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");

/* Faiz's look (ScaleFounders) on the engine's own pages: the checkout, the offer pages after it,
   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 the sales page: amber buttons with
   navy text (6.8 to 1), navy for the dark bands and the text, teal for labels and the highlight slot,
   a warm cream page. The sales page itself carries its own inline styles. */

:root {
  --accent: #e8a33d;
  --ink: #0f2a43;
  --muted: #5b6573;
  --bg: #f7f4ee;
  --panel: #FFFFFF;
  --line: #e6dfd2;
  --radius: 12px;
  --font: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --head: "Bricolage Grotesque", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --night: #0f2a43;
  --night-2: #0a1e31;
  --night-line: #2b5272;
  --accent-hover: #d6922d;
  --accent-edge: #b97f26;
  --accent-soft: #fbeed6;
  --accent-ring: #f3cf93;
  --hl: #2a7f8e;
  --hl-lt: #7cc3cf;
  --hl-soft: #e3f0f1;
  --hl-ink: #22697a;
  --sand: #efe8db;
  --body: #2a3f55;
}

/* every page */
html { overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: var(--head);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #0f2a43;
  text-wrap: balance;
}
h1 { font-size: 32px; line-height: 1.1; }
h2 { font-size: 23px; line-height: 1.2; }
h3 { font-size: 18px; }
a { color: #22697a; }
::selection { background: #f3cf93; color: #0f2a43; }

.site-head {
  background: var(--night);
  padding: 12px 16px;
  text-align: center;
}
.site-head .wordmark {
  font-family: var(--head);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

/* the plain pages (thank-you, legal, 404, the plain offer page) sit in one white card */
main:not(.co):not(.op):not(.dp) {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(15, 42, 67, 0.08);
  margin: 26px auto 34px;
  padding: 8px 20px 40px;
}
@media (max-width: 430px) {
  main:not(.co):not(.op):not(.dp) { margin: 16px 10px 26px; width: auto; padding: 4px 16px 32px; }
}
.lede { color: var(--body); }
.warn { color: var(--muted); }
.announce {
  background: var(--night);
  color: var(--accent);
  font-family: var(--head);
  font-weight: 800;
  letter-spacing: 0.04em;
}
.price .now { color: #0f2a43; font-family: var(--head); font-weight: 800; }
.card { background: var(--bg); border-color: var(--line); border-radius: 14px; }
blockquote { background: var(--bg); border-left-color: var(--hl); }
.when {
  background: var(--hl-soft);
  border: 1px solid #bcdbe0;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15.5px;
}
.when strong { color: #0f2a43; }
.item-access { border-top-color: var(--line); }
.offer-image, .media-frame { border-radius: 14px; }
.tap { color: #22697a; font-weight: 700; }

.btn {
  background: var(--accent);
  color: #0f2a43;
  font-family: var(--head);
  font-weight: 800;
  font-size: 19px;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(185, 127, 38, 0.3), inset 0 -3px 0 rgba(0, 0, 0, 0.14);
  letter-spacing: -0.005em;
  line-height: 1.25;
  padding: 15px 18px;
}
main p .tap { min-height: 0; line-height: inherit; padding: 0 2px; }
@media (hover: hover) {
  .btn:hover { background: var(--accent-hover); }
}
.btn:focus-visible { outline: 3px solid var(--night); outline-offset: 3px; }

.field { border-color: #d6cdbd; border-radius: 10px; }
.field:focus { outline: none; border-color: var(--hl); box-shadow: 0 0 0 3px #bcdbe0; }
.bump { border-color: var(--accent-edge); background: var(--accent-soft); }
.total { color: #0f2a43; }

.site-foot {
  background: var(--night);
  border-top: 0;
  color: #b8c6d4;
}
.site-foot a { color: #e8eef4; }
.site-foot .foot-biz { color: #b8c6d4; }

/* the checkout, in the Sell While You Sleep 2.0 layout the engine draws */
main.co {
  --co-accent: #e8a33d;
  --co-accent-hover: #d6922d;
  --co-deep: #0f2a43;
  --co-gold: #2a7f8e;
  --co-gold-ink: #22697a;
  --co-tint: #fbeed6;
  --co-ring: #f3cf93;
  --co-cream: #f7f4ee;
  --co-ink: #0f2a43;
  --co-text: #2a3f55;
  --co-muted: #5b6573;
  --co-line: #e6dfd2;
  --co-card-line: #d6cdbd;
  --co-head: "Bricolage Grotesque", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --co-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
}
.co-strip { color: #e8eef4; }
.co-eyebrow { background: var(--night); color: var(--accent); }
.co-head .when { background: var(--hl-soft); }
.co-bump { border-color: var(--co-gold); background: #f6fafa; }
.co-bump:has(input:checked) { border-color: var(--accent-edge); background: var(--co-tint); }
.co-bump-price { font-family: var(--head); color: #fff; }
.co-recap { border-color: var(--night); }
.co-includes svg { color: #2a7f8e; }
.co-trust span { background: var(--sand); }
.co-gtee { background: var(--night); }
.co-gtee .t { color: var(--accent); }
#payBtn {
  background: var(--co-accent);
  color: #0f2a43;
  box-shadow: 0 10px 24px rgba(185, 127, 38, 0.32), inset 0 -3px 0 rgba(0, 0, 0, 0.14);
  border-radius: 12px;
}
@media (hover: hover) {
  #payBtn:hover { background: var(--co-accent-hover); }
}

/* the designed offer pages after the checkout */
.op {
  --op-accent: #e8a33d;
  --op-accent-hover: #d6922d;
  --op-deep: #0f2a43;
  --op-deepest: #0a1e31;
  --op-gold: #2a7f8e;
  --op-cream: #f7f4ee;
  --op-ink: #0f2a43;
  --op-text: #2a3f55;
  --op-muted: #5b6573;
  --op-line: #e6dfd2;
  --op-card-line: #d6cdbd;
  --op-head: "Bricolage Grotesque", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --op-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}
.op .op-kicker, .op .op-eyebrow, .op .op-exit-kicker { color: #22697a; }
.op .op-card::before { background: var(--hl); }
.op .op-check { color: #2a7f8e; }
.op .op-bonus-badge { color: var(--hl); }
.op .op-pricebox { border-width: 2px; border-color: var(--op-ink); box-shadow: 7px 7px 0 var(--op-deep); background: #FFFFFF; }
.op .op-guarantee { background: var(--accent-soft); border-color: #f3cf93; }
.op .op-btn {
  color: #0f2a43;
  font-family: var(--op-head);
  font-weight: 800;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(185, 127, 38, 0.32), inset 0 -3px 0 rgba(0, 0, 0, 0.14);
}
.op .op-dealline .op-fill { color: var(--accent); }
@media (max-width: 480px) {
  .op .op-pricebox { box-shadow: 5px 5px 0 var(--op-deep); }
}

/* amber is too light for white text or for words on white (2.1 to 1), so every place the engine
   writes white on the accent, or the accent as text, gets navy or the deeper teal instead */
.co-bump-price { color: #0f2a43; background: var(--co-accent); }
.co-price { color: #0f2a43; }
.op a { color: #22697a; }
.op .op-row-credit { color: #22697a; }
.op .op-big { color: #0f2a43; }
.site-foot a { color: #e8eef4; }