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

/* Timothy's look on the engine's own pages: the checkout, the one-click offer pages,
   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: leaf green for every button with white text, deep forest
   for the dark bands, the logo's star yellow for the highlighter and the labels on
   dark, charcoal for the top bar, a light green-grey page. The sales page carries
   its own inline styles. */

:root {
  --accent: #1E7B3C;
  --ink: #1F2422;
  --muted: #5C665F;
  --bg: #F6F7F2;
  --panel: #FFFFFF;
  --line: #E1E5DD;
  --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: #26292B;
  --forest: #123B2B;
  --forest-2: #0B271C;
  --accent-hover: #17652F;
  --accent-soft: #E6F2E7;
  --accent-ring: #A9D3AE;
  --hl: #F2C81B;
  --hl-soft: #FFF7D6;
  --hl-ink: #7A6200;
  --sand: #EEF1EA;
  --body: #36403A;
}

/* 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: #14201A;
  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: #17652F; }
::selection { background: var(--hl); color: #14201A; }

.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(--hl);
}

/* 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(20, 32, 26, 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(--hl);
  font-family: var(--head);
  font-weight: 800;
  letter-spacing: 0.04em;
}
.price .now { color: #17652F; 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 #EBD77E;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15.5px;
}
.when strong { color: #14201A; }
.item-access { border-top-color: var(--line); }
.offer-image, .media-frame { border-radius: 14px; }
.tap { color: #17652F; font-weight: 700; }

.btn {
  background: var(--accent);
  color: #FFFFFF;
  font-family: var(--head);
  font-weight: 800;
  font-size: 19px;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(30, 123, 60, 0.28), inset 0 -3px 0 rgba(0, 0, 0, 0.18);
  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: #CDD3CA; border-radius: 10px; }
.field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.bump { border-color: var(--accent); background: var(--accent-soft); }
.total { color: #14201A; }

.site-foot {
  background: var(--forest-2);
  border-top: 0;
  color: #B9CDBF;
}
.site-foot a { color: #E3EEE6; }
.site-foot .foot-biz { color: #B9CDBF; }

/* the checkout, in the Sell While You Sleep 2.0 layout the engine draws */
main.co {
  --co-accent: #1E7B3C;
  --co-accent-hover: #17652F;
  --co-deep: #123B2B;
  --co-gold: #F2C81B;
  --co-gold-ink: #7A6200;
  --co-tint: #E6F2E7;
  --co-ring: #A9D3AE;
  --co-cream: #F6F7F2;
  --co-ink: #1F2422;
  --co-text: #36403A;
  --co-muted: #5C665F;
  --co-line: #E1E5DD;
  --co-card-line: #CDD3CA;
  --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: #E3EEE6; }
.co-eyebrow { background: var(--night); color: var(--hl); }
.co-head .when { background: var(--hl-soft); }
.co-bump { border-color: var(--co-gold); background: #FFFBEA; }
.co-bump:has(input:checked) { border-color: var(--co-accent); background: var(--co-tint); }
.co-bump-price { font-family: var(--head); color: #fff; }
.co-recap { border-color: var(--forest); }
.co-includes svg { color: #1E7B3C; }
.co-trust span { background: var(--sand); }
.co-gtee { background: var(--forest); }
.co-gtee .t { color: var(--hl); }
#payBtn {
  background: var(--co-accent);
  color: #FFFFFF;
  box-shadow: 0 10px 24px rgba(30, 123, 60, 0.3), inset 0 -3px 0 rgba(0, 0, 0, 0.18);
  border-radius: 999px;
}
@media (hover: hover) {
  #payBtn:hover { background: var(--co-accent-hover); }
}

/* the designed one-click offer pages */
.op {
  --op-accent: #1E7B3C;
  --op-accent-hover: #17652F;
  --op-deep: #123B2B;
  --op-deepest: #0B271C;
  --op-gold: #F2C81B;
  --op-cream: #F6F7F2;
  --op-ink: #1F2422;
  --op-text: #36403A;
  --op-muted: #5C665F;
  --op-line: #E1E5DD;
  --op-card-line: #CDD3CA;
  --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: #17652F; }
.op .op-card::before { background: var(--hl); }
.op .op-check { color: #1E7B3C; }
.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(--hl-soft); border-color: #EBD77E; }
.op .op-btn {
  font-family: var(--op-head);
  font-weight: 800;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(30, 123, 60, 0.3), inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}
.op .op-dealline .op-fill { color: var(--hl); }
@media (max-width: 480px) {
  .op .op-pricebox { box-shadow: 5px 5px 0 var(--op-deep); }
}