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

/* Yashu's look (Realtor Marketing Labs) 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: deep teal for every
   button with white text, the logo navy for the dark bands and the text, the logo teal for the labels
   and the highlight slot, mint for soft tints, a cool white page. The sales page itself carries its
   own inline styles. */

:root {
  --accent: #0e6f82;
  --ink: #0e2f52;
  --muted: #5a6b7d;
  --bg: #f3f8f9;
  --panel: #FFFFFF;
  --line: #dbe7ea;
  --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: #0e2f52;
  --night-2: #0a2240;
  --night-line: #2b5683;
  --accent-hover: #094e5c;
  --accent-soft: #e5f3f2;
  --accent-ring: #9fd2dc;
  --hl: #47abbe;
  --hl-soft: #eef7f8;
  --hl-ink: #094e5c;
  --sand: #e5f3f2;
  --body: #22405f;
}

/* 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: #0e2f52;
  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: #0e6f82; }
::selection { background: #b0d9d5; color: #0e2f52; }

.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(14, 47, 82, 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: #0e6f82; 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 #b0d9d5;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15.5px;
}
.when strong { color: #0e2f52; }
.item-access { border-top-color: var(--line); }
.offer-image, .media-frame { border-radius: 14px; }
.tap { color: #0e6f82; font-weight: 700; }

.btn {
  background: var(--accent);
  color: #FFFFFF;
  font-family: var(--head);
  font-weight: 800;
  font-size: 19px;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(14, 111, 130, 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: #c3d6dc; 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: #0e2f52; }

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

/* the checkout, in the Sell While You Sleep 2.0 layout the engine draws */
main.co {
  --co-accent: #0e6f82;
  --co-accent-hover: #094e5c;
  --co-deep: #0e2f52;
  --co-gold: #47abbe;
  --co-gold-ink: #094e5c;
  --co-tint: #e5f3f2;
  --co-ring: #9fd2dc;
  --co-cream: #f3f8f9;
  --co-ink: #0e2f52;
  --co-text: #22405f;
  --co-muted: #5a6b7d;
  --co-line: #dbe7ea;
  --co-card-line: #c3d6dc;
  --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: #e6eef5; }
.co-eyebrow { background: var(--night); color: var(--hl); }
.co-head .when { background: var(--hl-soft); }
.co-bump { border-color: var(--co-gold); background: #f3faf9; }
.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(--night); }
.co-includes svg { color: #0e6f82; }
.co-trust span { background: var(--sand); }
.co-gtee { background: var(--night); }
.co-gtee .t { color: var(--hl); }
#payBtn {
  background: var(--co-accent);
  color: #FFFFFF;
  box-shadow: 0 10px 24px rgba(14, 111, 130, 0.3), inset 0 -3px 0 rgba(0, 0, 0, 0.18);
  border-radius: 12px;
}
@media (hover: hover) {
  #payBtn:hover { background: var(--co-accent-hover); }
}

/* the designed one-click offer pages */
.op {
  --op-accent: #0e6f82;
  --op-accent-hover: #094e5c;
  --op-deep: #0e2f52;
  --op-deepest: #0a2240;
  --op-gold: #47abbe;
  --op-cream: #f3f8f9;
  --op-ink: #0e2f52;
  --op-text: #22405f;
  --op-muted: #5a6b7d;
  --op-line: #dbe7ea;
  --op-card-line: #c3d6dc;
  --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: #0e6f82; }
.op .op-card::before { background: var(--hl); }
.op .op-check { color: #0e6f82; }
.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: #b0d9d5; }
.op .op-btn {
  font-family: var(--op-head);
  font-weight: 800;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(14, 111, 130, 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); }
}