@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,600..700,100,1;1,9..144,600,100,1&family=Plus+Jakarta+Sans:wght@400;500;700&family=IBM+Plex+Mono:wght@500&display=swap");

/* Ian's Sheefan Media 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.
   Fraunces for headings, Plus Jakarta Sans for words and buttons, IBM Plex Mono for small labels and prices.
   Oil black, white and one yellow. Every button is oil black words on yellow. Yellow is never text on white:
   it shows as text only on oil black. The sales page carries its own styles. */

:root {
  --accent: #F7C600;
  --ink: #141310;
  --muted: #5B5850;
  --bg: #FFFFFF;
  --panel: #F4F2EC;
  --line: #DDD9CD;
  --radius: 10px;
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --head: "Fraunces", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --oil: #141310;
  --oil-2: #1E1D19;
  --oil-4: #3A3832;
  --yellow: #F7C600;
  --yellow-hover: #E9BB00;
  --on-dark: #E8E5DC;
  --on-dark-2: #B5B1A5;
  --text: #3A3832;
}

/* 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: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-weight: 700; font-size: 32px; line-height: 1.12; }
h2 { font-size: 24px; line-height: 1.2; }
h3 { font-size: 19px; }
a { color: var(--ink); }
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.site-head { background: var(--oil); padding: 14px 16px; text-align: center; }
.site-head .logo { display: block; max-height: 34px; width: auto; margin: 0 auto; }
.site-head .wordmark { font-family: var(--font); font-weight: 700; color: #FFFFFF; }

/* the plain pages (thank-you, legal, 404) sit in one white card on the raised surface */
body:has(main:not(.co):not(.op)) { background: var(--panel); }
main:not(.co):not(.op) {
  background: #FFFFFF;
  border-radius: 18px;
  margin: 26px auto 34px;
  padding: 8px 22px 40px;
}
@media (max-width: 430px) {
  main:not(.co):not(.op) { margin: 16px 12px 26px; width: auto; padding: 4px 16px 32px; }
}
.lede { color: var(--text); }
.warn { color: var(--muted); }
.announce { background: var(--oil); color: var(--yellow); font-weight: 700; }
.price .now { color: var(--ink); font-family: var(--mono); font-weight: 500; }
.card { background: var(--panel); border-color: var(--line); border-radius: 14px; }
blockquote { background: var(--panel); border-left-color: var(--yellow); }
.item-access { border-top-color: var(--line); }
.offer-image, .media-frame { border-radius: 14px; }
.tap { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
main p .tap { min-height: 0; line-height: inherit; padding: 0 2px; }

.btn {
  background: var(--yellow);
  color: var(--oil);
  font-family: var(--font);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  min-height: 58px;
  padding: 16px 18px;
  border-radius: var(--radius);
  box-shadow: 0 10px 24px rgba(20, 19, 16, 0.16), inset 0 -3px 0 rgba(20, 19, 16, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (hover: hover) {
  .btn:hover { background: var(--yellow-hover); color: var(--oil); }
}
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.field { border-color: #D3CEC1; border-radius: 10px; font-family: var(--font); }
.field:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(247, 198, 0, 0.45); }
.bump { border-color: var(--ink); background: var(--panel); }
.total { color: var(--ink); }

.site-foot { background: var(--oil); border-top: 0; color: var(--on-dark-2); }
.site-foot a { color: #FFFFFF; }
.site-foot .foot-biz { color: var(--on-dark-2); }

/* the checkout, in the Sell While You Sleep 2.0 layout the engine draws */
main.co {
  --co-accent: #F7C600;
  --co-accent-hover: #E9BB00;
  --co-deep: #141310;
  --co-gold: #F7C600;
  --co-gold-ink: #5B5850;
  --co-tint: #FFF6CF;
  --co-ring: #F2DD8A;
  --co-cream: #F4F2EC;
  --co-ink: #141310;
  --co-text: #3A3832;
  --co-muted: #5B5850;
  --co-line: #E3DFD3;
  --co-card-line: #D3CEC1;
  --co-head: "Fraunces", Georgia, "Times New Roman", serif;
  --co-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--panel);
}
.co h1, .co h2 { font-weight: 600; letter-spacing: 0.01em; }
.co-head h1 { font-weight: 700; font-size: 26px; }
.co-strip { background: var(--oil); color: var(--on-dark); font-weight: 500; }
.co-strip .dot { color: var(--yellow); opacity: 1; }
.co-secure svg { color: var(--ink); }
.co-eyebrow { background: var(--oil); color: var(--yellow); font-family: var(--mono); font-weight: 500; }
.co-card { border-color: var(--co-card-line); }
.co .field:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--co-ring); }
.co-bump { border-color: #C9C3B4; background: #FFFFFF; }
.co-bump:has(input:checked) { border-style: solid; border-color: var(--ink); background: var(--co-tint); }
.co-bump input { accent-color: var(--ink); }
.co-bump-title { font-family: var(--font); font-weight: 700; letter-spacing: 0; }
.co-bump-price { background: var(--oil); color: var(--yellow); font-family: var(--mono); font-weight: 500; }
.co-bump-img { background: var(--oil); }
.co .consent input { accent-color: var(--ink); }
.co-recap { border-color: var(--oil); }
.co-kicker { color: var(--muted); font-family: var(--mono); font-weight: 500; }
.co-price { color: var(--ink); font-family: var(--mono); font-weight: 500; letter-spacing: 0; }
.co-includes svg { color: var(--ink); background: var(--yellow); border-radius: 5px; padding: 2px; width: 20px; height: 20px; }
.co-trust span { background: var(--panel); color: var(--muted); }
.co-gline { background: var(--co-tint); border-color: var(--co-ring); color: var(--ink); }
.co-gtee { background: var(--oil); color: var(--on-dark); }
.co-gtee .t { color: var(--yellow); font-family: var(--head); font-weight: 600; letter-spacing: 0.01em; }
#payBtn {
  background: var(--yellow);
  color: var(--oil);
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: 0;
  border-radius: var(--radius);
  box-shadow: 0 10px 24px rgba(20, 19, 16, 0.18), inset 0 -3px 0 rgba(20, 19, 16, 0.14);
}
#payBtn:hover { background: var(--yellow-hover); color: var(--oil); }
#payBtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* the designed one-click offer pages */
.op {
  --op-accent: #F7C600;
  --op-accent-hover: #E9BB00;
  --op-deep: #141310;
  --op-deepest: #0B0B09;
  --op-gold: #F7C600;
  --op-cream: #F4F2EC;
  --op-ink: #141310;
  --op-text: #3A3832;
  --op-muted: #5B5850;
  --op-line: #E3DFD3;
  --op-card-line: #D3CEC1;
  --op-head: "Fraunces", Georgia, "Times New Roman", serif;
  --op-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.op h1, .op h2, .op h3 { font-weight: 600; letter-spacing: 0.01em; }
.op h1 { font-weight: 700; }
.op a { color: var(--ink); }
.op .op-kicker, .op .op-eyebrow, .op .op-exit-kicker { color: var(--muted); font-family: var(--mono); font-weight: 500; }
.op .op-bridge .op-eyebrow { font-size: 13px; line-height: 1.4; }
.op .op-warn { background: var(--yellow); color: var(--oil); font-weight: 500; }
.op .op-warn strong { color: var(--oil); }
.op .op-dealline { background: var(--oil); color: #FFFFFF; }
.op .op-dealline .op-fill { color: var(--yellow); }
.op .op-card::before { background: var(--yellow); }
.op .op-card h3 { font-family: var(--font); font-weight: 700; letter-spacing: 0; }
.op .op-check { color: var(--ink); }
.op .op-pricebox { border-width: 2px; border-color: var(--oil); background: #FFFFFF; box-shadow: 8px 8px 0 var(--yellow); }
.op .op-anchor s, .op .op-was { color: var(--muted); }
.op .op-row-credit { color: var(--ink); }
.op .op-row-credit span:last-child { background: var(--yellow); border-radius: 4px; padding: 0 6px; }
.op .op-big { color: var(--ink); font-family: var(--mono); font-weight: 500; }
.op .op-onetime { font-family: var(--mono); font-weight: 500; }
.op .op-guarantee { background: var(--panel); border-color: var(--line); }
.op .op-faq-item h3 { font-size: 19px; }
.op .op-btn {
  background: var(--yellow);
  color: var(--oil);
  font-family: var(--op-body);
  font-weight: 700;
  border-radius: var(--radius);
  box-shadow: 0 10px 24px rgba(20, 19, 16, 0.18), inset 0 -3px 0 rgba(20, 19, 16, 0.14);
}
@media (hover: hover) {
  .op .op-btn:hover { background: var(--yellow-hover); color: var(--oil); }
}
.op .op-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.op .op-no { color: var(--muted); }
.op .op-exit { background: rgba(20, 19, 16, 0.72); }
@media (max-width: 480px) {
  .op .op-pricebox { box-shadow: 5px 5px 0 var(--yellow); }
}