/* Pedro's header, matched to his original checkout: one dark bar with his name,
   "Need help?" and "Secure checkout". CSS only, because the engine's header
   holds just the logo. */
.site-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 6px 16px; text-align: left;
  background: #0e0f12; color: #f4f5f2;
  font: 400 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  padding: 10px max(16px, calc((100% - 1040px) / 2 + 16px));
}
.site-head .logo { order: 1; content: url("/img/header-name.svg"); height: 22px; max-height: none; width: auto; }
.site-head::before { order: 2; content: "Need help? pedro@ppmartins.com"; }
.site-head::after { order: 3; content: "\1F512  Secure checkout"; }
/* The original went straight from that bar to the page, with no second strip. */
.co-strip, .co-secure { display: none; }

/* ---------------------------------------------------------------------------
   The checkout, matched to Pedro's approved checkout.html. The engine writes
   the checkout and its words, so this file only restyles it: words the engine
   fixes are hidden (font-size: 0) and Pedro's words are drawn in their place.
   Stripe's card box, the add-on tick box, the live total and the terms tick
   box keep working exactly as the engine wrote them.
   --------------------------------------------------------------------------- */
body:has(main.co) { background: #f3f6f2; }
main.co {
  --p-ink: #15161a; --p-muted: #5d616b; --p-deep: #0e0f12; --p-on-deep: #f4f5f2;
  --p-accent: #1f9d5c; --p-accent-dark: #167a47; --p-line: rgba(21,22,26,.12);
  --p-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --p-head: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  color: var(--p-ink); font: 400 17px/1.55 var(--p-font);
}
main.co .co-wrap { max-width: 1040px; padding: 0 16px 30px; }

/* Layout: intro across the top, form card left, "What opens for you" right,
   the quote under the form and the guarantee under the list. */
main.co .co-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  grid-template-rows: auto auto auto auto auto auto 1fr auto auto;
  column-gap: 20px; row-gap: 0; padding-bottom: 10px;
}
main.co .co-form, main.co .co-recap { display: contents; }
main.co .co-head { grid-column: 1 / -1; grid-row: 1; text-align: center; max-width: 680px; margin: 0 auto; padding: 26px 0 28px; }
main.co .co-card { grid-column: 1; grid-row: 2 / span 6; }
main.co .co-recap h2 { grid-column: 2; grid-row: 2; }
main.co .co-includes { grid-column: 2; grid-row: 3; }
main.co .co-price { grid-column: 2; grid-row: 4; }
main.co .co-kicker { grid-column: 2; grid-row: 5; }
main.co .co-gtee { grid-column: 2; grid-row: 6; }
main.co .co-grid::before { grid-column: 1; grid-row: 8; }
main.co .co-grid::after { grid-column: 1; grid-row: 9; }

/* Intro */
main.co .co-eyebrow { font-size: 0; margin: 0 0 8px; padding: 0; background: none; color: var(--p-accent-dark); }
main.co .co-eyebrow::before { content: "Final step"; font: 700 13px/1.3 var(--p-font); letter-spacing: .12em; text-transform: uppercase; }
main.co .co-head h1 { font-size: 0; margin: 0; }
main.co .co-head h1::before { content: "Your first cold read is a few minutes away"; display: block; color: var(--p-ink); font: 700 clamp(26px, 5.6vw, 38px)/1.18 var(--p-head); margin: 0 0 8px; }
main.co .co-head h1::after { content: "The moment your payment goes through, your key to your private members area arrives by email. The Lens and your book are waiting inside."; display: block; color: var(--p-muted); font: 400 17px/1.55 var(--p-font); }

/* Cards */
main.co .co-card, main.co .co-gtee, main.co .co-grid::before {
  background: #fff; border: 1px solid var(--p-line); border-radius: 14px;
  box-shadow: 0 14px 40px rgba(10,20,15,.10); padding: 20px; margin-bottom: 16px;
}
main.co .co-card { display: flex; flex-direction: column; }
main.co .co-card > * { order: 5; }
main.co .co-card > h2:first-of-type { order: 0; font-size: 0; margin: 0 0 14px; }
main.co .co-card > h2:first-of-type::before { content: "Your details and payment"; display: block; font: 700 21px/1.25 var(--p-head); color: var(--p-ink); margin: 0 0 10px; }
main.co .co-card > h2:first-of-type::after { content: "Use the email you want everything sent to. If you don\2019t finish, I may email you once to ask if something got in the way."; display: block; font: 400 15px/1.55 var(--p-font); color: var(--p-muted); }
main.co .co-card > h2:not(:first-of-type) { display: none; }
main.co #custEmail { order: 1; }
main.co #custName { order: 2; }
main.co .co-card .field { min-height: 48px; border: 1px solid var(--p-line); border-radius: 10px; padding: 10px 12px; font: 400 17px/1.55 var(--p-font); margin: 0 0 12px; }
main.co #payment-element { margin: 0 0 14px; }

/* The add-on, in the original's dashed box */
main.co .co-bump { border: 2px dashed var(--p-accent); background: #fff8f3; border-radius: 12px; padding: 14px; margin: 0 0 14px; }
main.co .co-bump:has(input:checked) { border-style: solid; background: #fff8f3; }
main.co .co-bump-title { font-size: 0; margin: 0 0 8px; }
main.co .co-bump-title::before { content: "Yes, add it \00B7  +"; font: 700 15px/1 var(--p-font); }
main.co .co-bump-title .co-bump-price { font: 700 15px/1 var(--p-font); }
main.co .co-bump-title { display: inline-block; align-self: flex-start; background: var(--p-deep); color: var(--p-on-deep); border-radius: 999px; padding: 12px 14px; }
main.co .co-bump-title .co-bump-price { color: var(--p-on-deep); background: none; padding: 0; margin: 0; border-radius: 0; }
main.co .co-bump-blurb { font-size: 15px; color: var(--p-ink); margin: 0; }

/* The live total stays (it changes when the add-on is ticked); the line list goes */
main.co .summary { display: none; }
main.co .co-card .total { font: 700 17px/1.4 var(--p-font); border-top: 1px solid var(--p-line); padding-top: 10px; margin: 0; }
main.co .consent { font-size: 14.5px; }

/* The button */
main.co #payBtn { font-size: 0; min-height: 56px; padding: 16px 22px; border-radius: 999px; background: var(--p-accent); box-shadow: 0 8px 22px rgba(31,157,92,.30); }
main.co #payBtn:hover, main.co #payBtn:focus-visible { background: var(--p-accent-dark); }
main.co #payBtn::before { content: "Get my cold read"; font: 700 19px/1.25 var(--p-font); color: #fff; }
main.co #payBtn .arw { display: none; }

/* Under the button */
main.co .co-trust { font-size: 0; margin: 10px 0 0; display: block; }
main.co .co-trust span { display: none; }
main.co .co-trust::before { content: "Everything arrives by email right after checkout."; display: block; text-align: center; font: 400 14px/1.55 var(--p-font); color: var(--p-muted); }
main.co .warn { font-size: 0; margin: 12px 0 0; text-align: left; }
main.co .warn::before { content: "Payment is processed securely by Stripe. We never see or store your card number. One payment. No subscription."; font: 400 13px/1.55 var(--p-font); color: var(--p-muted); }
main.co .co-gline { display: none; }

/* The quote */
main.co .co-grid::before { content: "\201C Gave great insights on another landing. I implemented right away and got a few % of optin back already.\201D"; font: italic 18px/1.45 var(--p-head); color: var(--p-ink); border-bottom: 0; border-radius: 14px 14px 0 0; margin-bottom: 0; padding-bottom: 6px; box-shadow: none; }
main.co .co-grid::after { content: "Ugo, a few hours after getting the Lens"; display: block; margin-top: -1px; background: #fff; border: 1px solid var(--p-line); border-top: 0; border-radius: 0 0 14px 14px; padding: 0 20px 20px; margin-bottom: 16px; font: 400 14px/1.4 var(--p-font); color: var(--p-muted); box-shadow: 0 22px 30px -16px rgba(10,20,15,.14); }

/* "What opens for you": one card made of four pieces */
main.co .co-recap h2, main.co .co-includes, main.co .co-price, main.co .co-kicker { background: #fff; border-left: 1px solid var(--p-line); border-right: 1px solid var(--p-line); margin: 0; padding: 0 20px; }
main.co .co-recap h2 { border-top: 1px solid var(--p-line); border-radius: 14px 14px 0 0; padding-top: 20px; font-size: 0; }
main.co .co-recap h2::before { content: "What opens for you"; display: block; font: 700 21px/1.25 var(--p-head); color: var(--p-ink); margin: 0 0 10px; }
main.co .co-includes { list-style: none; display: block; }
main.co .co-includes li { display: block; position: relative; padding: 10px 0 10px 28px; border-top: 1px solid var(--p-line); margin: 0; font-size: 17px; line-height: 1.55; }
main.co .co-includes li svg { display: none; }
main.co .co-includes li::before { content: "\2713"; position: absolute; left: 4px; top: 10px; color: var(--p-accent-dark); font-weight: 700; }
main.co .co-price { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; color: var(--p-ink); font: 700 19px/1.4 var(--p-font); padding-top: 12px; }
main.co .co-price::before { content: "Total today"; text-align: left; }
main.co .co-price { background-image: linear-gradient(var(--p-ink), var(--p-ink)); background-size: calc(100% - 40px) 2px; background-position: 20px 6px; background-repeat: no-repeat; padding-top: 18px; text-align: right; }
main.co .co-price small { grid-column: 2; display: block; font: 400 14px/1.4 var(--p-font); color: var(--p-muted); }
main.co .co-price small::after { content: ", no subscription"; }
main.co .co-kicker { font-size: 0; border-bottom: 1px solid var(--p-line); border-radius: 0 0 14px 14px; padding: 14px 20px 20px; margin-bottom: 16px; box-shadow: 0 22px 30px -16px rgba(10,20,15,.14); }
main.co .co-kicker::before { content: ""; display: block; width: 100%; aspect-ratio: 348 / 30; max-width: 348px; background: url("/img/trust-chips.svg") left center / contain no-repeat; }

/* The guarantee, with the 30-day seal */
main.co .co-gtee { display: flex; gap: 14px; align-items: flex-start; color: var(--p-ink); }
main.co .co-gtee .t { flex: 0 0 64px; height: 64px; border-radius: 50%; background: var(--p-deep); display: grid; place-items: center; font-size: 0; margin: 0; }
main.co .co-gtee .t::before { content: "30\A days"; white-space: pre; text-align: center; color: var(--p-on-deep); font: 700 13px/1.1 var(--p-font); }
main.co .co-gtee p { font-size: 15px; line-height: 1.55; color: var(--p-ink); }

/* Footer, as in the original */
body:has(main.co) .site-foot { text-align: center; font-size: 13px; color: var(--p-muted, #5d616b); padding: 10px 0 30px; }
body:has(main.co) .site-foot .foot-links a[href="/refund"], body:has(main.co) .site-foot .foot-links a[href^="mailto:"], body:has(main.co) .site-foot .foot-biz { display: none; }
body:has(main.co) .site-foot .foot-links a { color: #5d616b; margin: 0 6px; }
body:has(main.co) .site-foot::after { content: "\00A9  Pedro Martins"; display: block; font-size: 13px; color: #5d616b; margin-top: 8px; }

/* Phones: one column, in the original's order */
@media (max-width: 820px) {
  main.co .co-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  main.co .co-head, main.co .co-card, main.co .co-recap h2, main.co .co-includes, main.co .co-price, main.co .co-kicker, main.co .co-gtee, main.co .co-grid::before, main.co .co-grid::after { grid-column: 1; grid-row: auto; }
  main.co .co-head { order: 0; } main.co .co-card { order: 1; }
  main.co .co-grid::before { order: 2; } main.co .co-grid::after { order: 3; }
  main.co .co-recap h2 { order: 4; } main.co .co-includes { order: 5; } main.co .co-price { order: 6; }
  main.co .co-kicker { order: 7; } main.co .co-gtee { order: 8; }
}

/* ---------------------------------------------------------------------------
   The thank-you page, matched to Pedro's approved thank-you.html. Same method
   as the checkout: the engine writes a short page, so its pieces are laid out
   again in Pedro's order and his words are drawn in. Everything is scoped to
   a page whose access block is showing, so a failed payment still gets the
   engine's plain "Nothing was charged" message.
   The "For your records" list shows what this browser tab bought, and adds up
   the total with a CSS counter: 17 for the Lens, 27 for the Follow-Through,
   97 for the Offer Lens. Change those numbers here if a price changes.
   --------------------------------------------------------------------------- */
body:has(#access:not([hidden])) {
  display: flex; flex-flow: row wrap; justify-content: center; align-content: flex-start;
  background: linear-gradient(180deg, #f3f6f2 0, #fff 320px) no-repeat, #fff;
  color: #15161a; font: 400 18px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  counter-reset: lenstotal;
}
body:has(#access:not([hidden])) > .site-head { flex: 0 0 100%; }
body:has(#access:not([hidden])) > .site-head::after { display: none; }
body:has(#access:not([hidden])) main,
body:has(#access:not([hidden])) #access,
body:has(#access:not([hidden])) #next-step,
body:has(#access:not([hidden])) .item-access:not([hidden]),
body:has(#access:not([hidden])) .site-foot,
body:has(#access:not([hidden])) .foot-links { display: contents; }

/* Every piece: one column, 680px wide like the original */
body:has(#access:not([hidden]))::before, body:has(#access:not([hidden]))::after,
body:has(#access:not([hidden])) main::before, body:has(#access:not([hidden])) main::after,
body:has(#access:not([hidden])) #access::before, body:has(#access:not([hidden])) #access::after,
body:has(#access:not([hidden])) #access > *,
body:has(#access:not([hidden])) #next-step::before, body:has(#access:not([hidden])) #next-step::after,
body:has(#access:not([hidden])) #next-step .btn,
body:has(#access:not([hidden])) .item-access::before, body:has(#access:not([hidden])) .item-access::after,
body:has(#access:not([hidden])) .item-access > *,
body:has(#access:not([hidden])) main > p.warn, body:has(#access:not([hidden])) main > p:not(.warn):not(#payment-failed),
body:has(#access:not([hidden])) .site-foot::before, body:has(#access:not([hidden])) .site-foot::after,
body:has(#access:not([hidden])) .foot-links::before, body:has(#access:not([hidden])) .foot-links::after,
body:has(#access:not([hidden])) .foot-links a, body:has(#access:not([hidden])) .foot-biz {
  box-sizing: border-box; flex: 0 0 auto; width: min(648px, calc(100% - 32px)); max-width: none;
  margin: 0; text-align: left; color: #15161a;
}

/* Card pieces: white, with side lines; the first and last close the card */
body:has(#access:not([hidden])) #access > p:not(.lede),
body:has(#access:not([hidden])) .foot-biz,
body:has(#access:not([hidden])) #next-step .btn,
body:has(#access:not([hidden])) #next-step::after,
body:has(#access:not([hidden])) .item-access[data-item="offer-lens"] > *,
body:has(#access:not([hidden])) main::before, body:has(#access:not([hidden])) main::after,
body:has(#access:not([hidden])) #access::after,
body:has(#access:not([hidden])) .site-foot::before, body:has(#access:not([hidden])) .site-foot::after,
body:has(#access:not([hidden]))::before, body:has(#access:not([hidden]))::after,
body:has(#access:not([hidden])) #next-step::before,
body:has(#access:not([hidden])) .item-access[data-item]::before,
body:has(#access:not([hidden])) main > p.warn {
  background-color: #fff; border-left: 1px solid rgba(21,22,26,.12); border-right: 1px solid rgba(21,22,26,.12);
  padding-left: 22px; padding-right: 22px;
}
body:has(#access:not([hidden])) #access > p:not(.lede),
body:has(#access:not([hidden])) .item-access[data-item="offer-lens"] > p,
body:has(#access:not([hidden])) main::before,
body:has(#access:not([hidden]))::before {
  border-top: 1px solid rgba(21,22,26,.12); border-radius: 14px 14px 0 0; padding-top: 22px; margin-top: 48px;
}
body:has(#access:not([hidden])) #next-step::after,
body:has(#access:not([hidden])) .item-access[data-item="offer-lens"] > a,
body:has(#access:not([hidden])) .site-foot::after,
body:has(#access:not([hidden])) main > p.warn {
  border-bottom: 1px solid rgba(21,22,26,.12); border-radius: 0 0 14px 14px; padding-bottom: 22px;
  box-shadow: 0 22px 30px -16px rgba(10,20,15,.14);
}

/* Shared text styles */
body:has(#access:not([hidden])) #access > p:not(.lede)::before,
body:has(#access:not([hidden])) .item-access[data-item="offer-lens"] > p::before,
body:has(#access:not([hidden])) main::before,
body:has(#access:not([hidden])) .foot-links::before,
body:has(#access:not([hidden]))::before {
  display: block; font: 700 13px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: .12em; text-transform: uppercase; color: #167a47; margin-bottom: 8px;
}
body:has(#access:not([hidden])) #access > p:not(.lede)::after,
body:has(#access:not([hidden])) .item-access[data-item="offer-lens"] > p::after,
body:has(#access:not([hidden])) main::after,
body:has(#access:not([hidden])) #access::before,
body:has(#access:not([hidden]))::after {
  display: block; font: 700 clamp(22px, 4.4vw, 28px)/1.2 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; color: #15161a;
}

/* 1. The top: badge, heading, line */
body:has(#access:not([hidden])) #access h1 { order: 10; text-align: center; padding-top: 36px; font: 700 clamp(28px, 6.2vw, 44px)/1.15 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; }
body:has(#access:not([hidden])) #access h1::before { content: "\2713  You're in"; display: table; margin: 0 auto 16px; background: #fff; border: 2px solid #1f9d5c; border-radius: 999px; padding: 6px 14px; font: 700 14px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #167a47; }
body:has(#access:not([hidden])) #access h1::after { content: "Your payment went through. One thing before you go, and it takes a minute."; display: block; margin: 10px auto 0; max-width: 560px; color: #5d616b; font: 400 19px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }

/* 2. "Do this now" */
body:has(#access:not([hidden])) #access > p:not(.lede) { order: 20; font-size: 0; margin-top: 34px; }
body:has(#access:not([hidden])) #access > p:not(.lede)::before { content: "Do this now"; }
body:has(#access:not([hidden])) #access > p:not(.lede)::after { content: "Set up the Lens"; margin-bottom: 16px; }
body:has(#access:not([hidden])) .foot-biz { font-size: 0; padding-top: 12px; padding-bottom: 12px; padding-left: 74px; background: #fff no-repeat 22px 12px; border-top: 0; box-shadow: inset 0 1px 0 rgba(21,22,26,.12); }
body:has(#access:not([hidden])) .foot-biz { box-shadow: none; background-image: linear-gradient(rgba(21,22,26,.12), rgba(21,22,26,.12)), var(--step); background-size: calc(100% - 44px) 1px, 36px 36px; background-position: 22px 0, 22px 12px; background-repeat: no-repeat; }
body:has(#access:not([hidden])) .foot-biz:nth-of-type(2) { order: 21; --step: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2218%22%20r%3D%2218%22%20fill%3D%22%230e0f12%22%2F%3E%3Ctext%20x%3D%2218%22%20y%3D%2223.5%22%20text-anchor%3D%22middle%22%20font-family%3D%22-apple-system%2CSegoe%20UI%2CRoboto%2CArial%2Csans-serif%22%20font-size%3D%2216%22%20font-weight%3D%22700%22%20fill%3D%22%23f4f5f2%22%3E1%3C%2Ftext%3E%3C%2Fsvg%3E"); }
body:has(#access:not([hidden])) .foot-biz:nth-of-type(3) { order: 22; --step: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2218%22%20r%3D%2218%22%20fill%3D%22%230e0f12%22%2F%3E%3Ctext%20x%3D%2218%22%20y%3D%2223.5%22%20text-anchor%3D%22middle%22%20font-family%3D%22-apple-system%2CSegoe%20UI%2CRoboto%2CArial%2Csans-serif%22%20font-size%3D%2216%22%20font-weight%3D%22700%22%20fill%3D%22%23f4f5f2%22%3E2%3C%2Ftext%3E%3C%2Fsvg%3E"); }
body:has(#access:not([hidden])) .foot-biz:nth-of-type(4) { order: 23; --step: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2218%22%20r%3D%2218%22%20fill%3D%22%230e0f12%22%2F%3E%3Ctext%20x%3D%2218%22%20y%3D%2223.5%22%20text-anchor%3D%22middle%22%20font-family%3D%22-apple-system%2CSegoe%20UI%2CRoboto%2CArial%2Csans-serif%22%20font-size%3D%2216%22%20font-weight%3D%22700%22%20fill%3D%22%23f4f5f2%22%3E3%3C%2Ftext%3E%3C%2Fsvg%3E"); }
body:has(#access:not([hidden])) .foot-biz::before { font: 700 18px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #15161a; }
body:has(#access:not([hidden])) .foot-biz::after { font: 400 18px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #15161a; }
body:has(#access:not([hidden])) .foot-biz:nth-of-type(2)::before { content: "Open your private members area."; }
body:has(#access:not([hidden])) .foot-biz:nth-of-type(2)::after { content: " The button below takes you there, and your key is also in your inbox. Bookmark it: everything that's yours lives there."; }
body:has(#access:not([hidden])) .foot-biz:nth-of-type(3)::before { content: "Set up the Lens once."; }
body:has(#access:not([hidden])) .foot-biz:nth-of-type(3)::after { content: " One click in Claude, or one paste into ChatGPT or Gemini. The Quick Start shows you how."; }
body:has(#access:not([hidden])) .foot-biz:nth-of-type(4)::before { content: "Paste the next thing you'll send."; }
body:has(#access:not([hidden])) .foot-biz:nth-of-type(4)::after { content: " A page, an email, an ad or a script. Add a screenshot of the top."; }
body:has(#access:not([hidden])) #next-step .btn { order: 24; display: block; padding-top: 20px; padding-bottom: 0; background: #fff; box-shadow: none; border-radius: 0; min-height: 0; text-decoration: none; }
body:has(#access:not([hidden])) #next-step .btn { font-size: 0; }
body:has(#access:not([hidden])) #next-step .btn::before { content: "Open my members area \2192"; display: block; min-height: 58px; padding: 16px 22px; border-radius: 999px; background: #1f9d5c; color: #fff; text-align: center; font: 700 19px/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; box-shadow: 0 8px 22px rgba(31,157,92,.30); }
body:has(#access:not([hidden])) #next-step .btn:hover::before { background: #167a47; }
body:has(#access:not([hidden])) #next-step::after { order: 25; content: "Email not there in 2 minutes? Check Promotions or Spam, and drag it to your main inbox."; padding-top: 10px; text-align: center; font: 400 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #5d616b; }

/* 3. "If you added The Offer Lens": shown only when this tab bought it */
body:has(#access:not([hidden])) .item-access[data-item="offer-lens"] > p { order: 30; font-size: 0; border-color: #1f9d5c; border-width: 2px; }
body:has(#access:not([hidden])) .item-access[data-item="offer-lens"] > p::before { content: "If you added The Offer Lens"; }
body:has(#access:not([hidden])) .item-access[data-item="offer-lens"] > p::after { content: "Send me your sales page"; margin-bottom: 10px; }
body:has(#access:not([hidden])) .item-access[data-item="offer-lens"] > a { order: 31; font-size: 0; pointer-events: none; text-decoration: none; background: #fff; border-radius: 0 0 14px 14px; min-height: 0; padding-top: 0; border-color: #1f9d5c; border-width: 0 2px 2px; border-style: solid; box-shadow: none; display: block; }
body:has(#access:not([hidden])) .item-access[data-item="offer-lens"] > a::before { content: "Send me your page from your Offer Lens page in your members area. Your full report arrives within 3 business days."; font: 400 18px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #15161a; }
body:has(#access:not([hidden])) .item-access[data-item="offer-lens"] > a .arw,
body:has(#access:not([hidden])) .item-access[data-item="follow-through"] > * { display: none; }

/* 4. "What happens next" */
body:has(#access:not([hidden])) #access::before { order: 40; content: "What happens next"; margin-top: 48px; margin-bottom: 10px; }
body:has(#access:not([hidden])) #access .lede,
body:has(#access:not([hidden])) .foot-links a[href="/refund"],
body:has(#access:not([hidden])) .foot-links a[href^="mailto:"] {
  font-size: 0; pointer-events: none; text-decoration: none; display: block;
  padding: 12px 14px 12px 18px; margin-bottom: 10px; background: #f3f6f2; border-left: 3px solid #1f9d5c; border-radius: 0 12px 12px 0;
}
body:has(#access:not([hidden])) #access .lede { order: 41; }
body:has(#access:not([hidden])) .foot-links a[href="/refund"] { order: 42; }
body:has(#access:not([hidden])) .foot-links a[href^="mailto:"] { order: 43; }
body:has(#access:not([hidden])) #access .lede::before, body:has(#access:not([hidden])) .foot-links a[href="/refund"]::before, body:has(#access:not([hidden])) .foot-links a[href^="mailto:"]::before { font: 700 18px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #15161a; }
body:has(#access:not([hidden])) #access .lede::after, body:has(#access:not([hidden])) .foot-links a[href="/refund"]::after, body:has(#access:not([hidden])) .foot-links a[href^="mailto:"]::after { font: 400 18px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #15161a; }
body:has(#access:not([hidden])) #access .lede::before { content: "Right now:"; }
body:has(#access:not([hidden])) #access .lede::after { content: " your first Audit, ready a couple of minutes after you paste your page."; }
body:has(#access:not([hidden])) .foot-links a[href="/refund"]::before { content: "Tomorrow:"; }
body:has(#access:not([hidden])) .foot-links a[href="/refund"]::after { content: " a short email that walks you through your first full run."; }
body:has(#access:not([hidden])) .foot-links a[href^="mailto:"]::before { content: "This week:"; }
body:has(#access:not([hidden])) .foot-links a[href^="mailto:"]::after { content: " test the new opening with the Fair Test, and keep the winner."; }

/* 5. "A note from me" */
body:has(#access:not([hidden])) main::before { order: 50; content: "A note from me"; margin-top: 38px; }
body:has(#access:not([hidden])) main::after { order: 51; content: "You just did the thing most people never do."; padding-bottom: 6px; }
body:has(#access:not([hidden])) #access::after { order: 52; content: "Most people rewrite. Or buy more traffic. Or ask a friend, who says \201Clooks good\201D.\A\AYou got a listener instead.\A\APicture your next send going out after a cold read. Same offer. Same list. A first line written for the person reading it, not for you.\A\AThat starts with one run. Today."; white-space: pre-line; padding-top: 8px; font: 400 18px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #15161a; }
body:has(#access:not([hidden])) .site-foot::before { order: 53; content: "Make it count,"; padding-top: 22px; padding-left: 90px; min-height: 0; background: #fff url("/img/pedro-sign.svg") no-repeat 22px 18px / 56px 56px; font: 400 18px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
body:has(#access:not([hidden])) .site-foot::after { order: 54; content: "Pedro Martins"; padding-left: 90px; padding-bottom: 26px; font: 700 18px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #15161a; }

/* 6. "Before you close this tab" */
body:has(#access:not([hidden])) .foot-links::before { order: 60; content: "Before you close this tab"; text-align: center; margin: 48px 0 0; padding: 20px 20px 0; border: 2px dashed rgba(21,22,26,.12); border-bottom: 0; border-radius: 14px 14px 0 0; }
body:has(#access:not([hidden])) .foot-links::after { order: 61; content: "Write down the one thing you're sending next. That's your first run."; text-align: center; padding: 0 20px 20px; border: 2px dashed rgba(21,22,26,.12); border-top: 0; border-radius: 0 0 14px 14px; font: 400 18px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }

/* 7. "For your records": what this tab bought, and the total */
body:has(#access:not([hidden]))::before { order: 70; content: "For your records"; }
body:has(#access:not([hidden]))::after { order: 71; content: "Your details"; padding-bottom: 8px; }
body:has(#access:not([hidden])) #next-step::before,
body:has(#access:not([hidden])) .item-access[data-item]::before,
body:has(#access:not([hidden])) .item-access[data-item]::after { font: 400 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #15161a; padding-top: 8px; padding-bottom: 8px; }
body:has(#access:not([hidden])) #next-step::before { order: 72; content: "The Stand Out Lens"; counter-increment: lenstotal 17; background: #fff url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2260%22%20height%3D%2228%22%3E%3Ctext%20x%3D%2260%22%20y%3D%2219%22%20text-anchor%3D%22end%22%20font-family%3D%22-apple-system%2CSegoe%20UI%2CRoboto%2CArial%2Csans-serif%22%20font-size%3D%2217%22%20fill%3D%22%2315161a%22%3E%E2%82%AC17%3C%2Ftext%3E%3C%2Fsvg%3E") no-repeat right 22px center / 60px 28px; }
body:has(#access:not([hidden])) .item-access[data-item="follow-through"]::before { order: 73; content: "The Follow-Through"; counter-increment: lenstotal 27; border-top: 1px solid rgba(21,22,26,.12); }
body:has(#access:not([hidden])) .item-access[data-item="follow-through"]::after { order: 73; content: "\20AC 27"; text-align: right; margin-top: -2.85em; background: none; border: 0; }
body:has(#access:not([hidden])) .item-access[data-item="offer-lens"]::before { order: 74; content: "The Offer Lens"; counter-increment: lenstotal 97; border-top: 1px solid rgba(21,22,26,.12); }
body:has(#access:not([hidden])) .item-access[data-item="offer-lens"]::after { order: 74; content: "\20AC 97"; text-align: right; margin-top: -2.85em; background: none; border: 0; }
body:has(#access:not([hidden])) main > p.warn { order: 75; display: flex; justify-content: space-between; font-size: 0; padding-top: 12px; border-top: 0; background-image: linear-gradient(#15161a, #15161a); background-size: calc(100% - 44px) 2px; background-position: 22px 4px; background-repeat: no-repeat; }
body:has(#access:not([hidden])) main > p.warn::before { content: "Total"; font: 700 19px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #15161a; }
body:has(#access:not([hidden])) main > p.warn::after { content: "\20AC" counter(lenstotal); font: 700 19px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #15161a; }

/* 8. Help line and footer */
body:has(#access:not([hidden])) main > p:not(.warn):not(#payment-failed) { order: 80; font-size: 0; text-align: center; margin-top: 16px; }
body:has(#access:not([hidden])) main > p:not(.warn):not(#payment-failed)::before { content: "No email yet, or trouble getting in? Email "; font-size: 14px; color: #5d616b; }
body:has(#access:not([hidden])) main > p:not(.warn):not(#payment-failed) a { font-size: 14px; color: #5d616b; }
body:has(#access:not([hidden])) main > p:not(.warn):not(#payment-failed)::after { content: " from the address you used at checkout."; font-size: 14px; color: #5d616b; }
body:has(#access:not([hidden])) .foot-links a[href="/privacy"], body:has(#access:not([hidden])) .foot-links a[href="/terms"] { order: 90; width: auto; margin: 24px 6px 0; font-size: 13px; color: #5d616b; }
body:has(#access:not([hidden])) .foot-links a[href="/privacy"]::after { content: "  \00B7"; color: #5d616b; display: inline-block; margin-left: 6px; text-decoration: none; }
html:has(#access:not([hidden]))::after { content: "\00A9  Pedro Martins"; display: block; text-align: center; font: 400 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #5d616b; padding: 8px 0 34px; background: #fff; }
/* Links reused as text rows keep normal line spacing */
body:has(#access:not([hidden])) .foot-links a, body:has(#access:not([hidden])) .item-access[data-item="offer-lens"] > a { line-height: 1.6; min-height: 0; }
/* Signature: one round photo across the two lines */
body:has(#access:not([hidden])) .site-foot::before { line-height: 28.8px; background: #fff url("/img/pedro-sign.svg") no-repeat 22px 22px / 56px 56px; }
body:has(#access:not([hidden])) .site-foot::after { line-height: 28.8px; background: #fff url("/img/pedro-sign.svg") no-repeat 22px -28.8px / 56px 56px; }
/* Prices line up on the right */
body:has(#access:not([hidden])) .item-access[data-item]::after { padding: 8px 22px; margin-top: calc(-1.6em - 16px); background: none; border: 0; }
body:has(#access:not([hidden])) main > p:not(.warn):not(#payment-failed) a { padding: 0; margin: 0; min-height: 0; display: inline; }
/* Eyebrows that are their own card piece: spacing inside, not a gap */
body:has(#access:not([hidden]))::before, body:has(#access:not([hidden])) main::before { margin-bottom: 0; padding-bottom: 8px; }
body:has(#access:not([hidden])) #next-step .btn::before { box-sizing: border-box; }
body:has(#access:not([hidden])) .site-foot::before, body:has(#access:not([hidden])) .site-foot::after { line-height: 29px; }
body:has(#access:not([hidden])) .site-foot::after { background-position: 22px -29px; }

/* ---------------------------------------------------------------------------
   The €97 Offer Lens page (upsell-1), matched to Pedro's approved
   offer-lens.html. The engine keeps the one-click "Yes" and the "No thanks"
   exactly as tested; this only lays the page out in Pedro's order and look.
   Engine pieces his file does not have are hidden: the step bar, the "do not
   close" note, the leave-page pop-up, the big price and "One time".
   --------------------------------------------------------------------------- */
body:has(main.op) .site-head::after { display: none; }
body:has(main.op) { background: linear-gradient(180deg, #f3f6f2 0, #fff 300px) no-repeat, #fff; }
main.op { color: #15161a; font: 400 18px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
main.op .op-page { display: flex; flex-direction: column; max-width: 680px; margin: 0 auto; padding: 0 16px 24px; box-sizing: border-box; }
main.op .op-page > *, main.op .op-close > * { box-sizing: border-box; width: 100%; max-width: none; margin-left: 0; margin-right: 0; }
main.op .op-warn, main.op .op-exit, main.op .op-big, main.op .op-onetime,
main.op .op-bonus-badge, main.op .op-guarantee h2, main.op .op-faq-item p:empty, main.op .op-card p:empty { display: none !important; }

/* Order: top, letter, report card, two reviews, how it works, why now, then the price card */
main.op .op-hero { order: 1; text-align: center; padding: 30px 0 6px; }
main.op .op-bridge { order: 2; }
main.op .op-sec:has(.op-cards) { order: 3; }
main.op .op-sec:has(.op-bonuses) { order: 4; }
main.op .op-sec:has(.op-faq) { order: 5; }
main.op .op-close { display: contents; }
main.op .op-close > h2 { order: 6; }
main.op .op-sec:has(.op-pricebox) { order: 7; }
main.op .op-sec:has(.op-guarantee) { order: 8; }
main.op .op-close > .op-var { order: 9; }
main.op .op-close > .op-error { order: 10; }
main.op #order-missing { order: 11; }
main.op .op-close > .op-decline { order: 12; }
main.op .op-sec { padding: 0; margin: 0; }

/* Top */
main.op .op-kicker { display: inline-block; background: #eafaf0; color: #167a47; border-radius: 999px; padding: 8px 14px; font: 700 14px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: 0; text-transform: none; margin: 0; }
main.op .op-hero h1 { font: 700 clamp(28px, 6.2vw, 44px)/1.15 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; margin: 16px 0 10px; color: #15161a; }
main.op .op-sub { color: #5d616b; font-size: 19px; margin: 0 auto 10px; max-width: 560px; }

/* The letter */
main.op .op-bridge { padding-top: 24px; }
main.op .op-bridge p, main.op .op-bridge .op-eyebrow { margin: 0 0 1.05em; font: 400 18px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: 0; text-transform: none; color: #15161a; }
main.op .op-bridge p:nth-last-of-type(2) { font-weight: 700; }

/* "Your report shows you": one card with a ticked list */
main.op .op-sec:has(.op-cards) { background: #fff; border: 1px solid rgba(21,22,26,.12); border-radius: 14px; box-shadow: 0 14px 40px rgba(10,20,15,.10); padding: 22px; }
main.op .op-sec:has(.op-cards) > h2 { text-align: left; font-size: 0; margin: 0; }
main.op .op-sec:has(.op-cards) > h2::before { content: "Your report shows you"; font: 700 13px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #167a47; }
main.op .op-cards { display: block; list-style: none; padding: 0; margin: 8px 0 0; }
main.op .op-card { display: block; background: none; border: 0; border-top: 1px solid rgba(21,22,26,.12); border-radius: 0; box-shadow: none; padding: 12px 0 12px 32px; position: relative; margin: 0; }
main.op .op-card h3 { font: 400 18px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; margin: 0; color: #15161a; display: block; }
main.op .op-card .op-check { position: absolute; left: 4px; top: 12px; color: #1f9d5c; font-weight: 900; background: none; width: auto; height: auto; }

/* Headings shared by "two reviews", "how it works" */
main.op .op-bonuses > h2, main.op .op-sec:has(.op-faq) > h2 { text-align: left; font-size: 0; margin: 26px 0 10px; }
main.op .op-bonuses > h2::before, main.op .op-sec:has(.op-faq) > h2::before { font: 700 clamp(22px, 4.4vw, 28px)/1.2 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; color: #15161a; }
main.op .op-bonuses > h2::before { content: "And you get two reviews, not one"; }
main.op .op-sec:has(.op-faq) > h2::before { content: "How it works"; }

/* Two reviews side by side */
main.op .op-bonuses { background: none; border: 0; padding: 0; box-shadow: none; }
main.op .op-bonus-list { display: grid; gap: 12px; grid-template-columns: 1fr; list-style: none; padding: 0; margin: 10px 0 0; }
@media (min-width: 640px) { main.op .op-bonus-list { grid-template-columns: 1fr 1fr; } }
main.op .op-bonus { display: block; background: #f3f6f2; border: 0; border-radius: 12px; padding: 16px; margin: 0; }
main.op .op-bonus h3 { font: 700 18px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; margin: 0; color: #15161a; }
main.op .op-bonus p { font: 400 18px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; margin: 0; color: #15161a; }

/* How it works: numbered steps */
main.op .op-faq { counter-reset: opstep; margin-top: 16px; }
main.op .op-faq-item { counter-increment: opstep; position: relative; padding: 12px 0 12px 52px; border: 0; border-top: 1px solid rgba(21,22,26,.12); border-radius: 0; background: none; margin: 0; box-shadow: none; }
main.op .op-faq-item::before { content: counter(opstep); position: absolute; left: 0; top: 12px; width: 36px; height: 36px; border-radius: 50%; background: #0e0f12; color: #f4f5f2; display: grid; place-items: center; font-weight: 700; font-size: 16px; }
main.op .op-faq-item h3 { font: 400 18px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; margin: 0; color: #15161a; }

/* Why now */
main.op .op-close > h2 { text-align: left; font: 400 18px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; margin: 20px 0 0; color: #15161a; }
main.op .op-close > h2::before { content: "Why now: "; font-weight: 700; }

/* The price card: price line, owners' price, guarantee, button, fine print, no thanks */
main.op .op-sec:has(.op-pricebox), main.op .op-sec:has(.op-guarantee), main.op .op-close > .op-var, main.op .op-close > .op-decline {
  background: #fff; border-left: 1px solid rgba(21,22,26,.12); border-right: 1px solid rgba(21,22,26,.12); padding: 0 22px; text-align: center;
}
main.op .op-sec:has(.op-pricebox) { margin-top: 20px; border-top: 1px solid rgba(21,22,26,.12); border-radius: 14px 14px 0 0; padding-top: 22px; }
main.op .op-close > .op-decline { border-bottom: 1px solid rgba(21,22,26,.12); border-radius: 0 0 14px 14px; padding-bottom: 22px; box-shadow: 0 22px 30px -16px rgba(14,15,18,.14); margin: 0; }
main.op .op-pricebox { display: flex; flex-direction: column; background: none; border: 0; padding: 0; box-shadow: none; margin: 0; }
main.op .op-priceline { order: 1; font: 800 22px/1.3 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; margin: 6px 0 4px; color: #15161a; }
main.op .op-anchor { order: 2; font: 400 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #5d616b; margin: 0; }
main.op .op-anchor::before { content: "Only for Stand Out Lens owners. "; font-weight: 700; }
main.op .op-anchor s { text-decoration: none; }
main.op .op-guarantee { background: none; border: 0; padding: 0; box-shadow: none; margin: 0; }
main.op .op-guarantee p { font: 400 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #5d616b; margin: 0; }
main.op .op-yes { font-size: 0; display: block; width: 100%; min-height: 58px; padding: 16px 22px; border: 0; border-radius: 999px; background: #1f9d5c; box-shadow: 0 8px 22px rgba(31,157,92,.30); margin-top: 20px; cursor: pointer; }
main.op .op-yes:hover, main.op .op-yes:focus-visible { background: #167a47; }
main.op .op-yes::before { content: "Yes, add The Offer Lens \00B7  \20AC 97"; font: 700 19px/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #fff; }
main.op .op-yes > * { display: none; }
main.op .op-fine { font: 400 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #5d616b; margin: 10px 0 0; }
main.op .op-decline { margin: 0; }
main.op .op-no { display: block; text-align: center; margin: 18px 0 0; color: #5d616b; font-size: 16px; text-decoration: underline; }
main.op .op-no::after { content: " \2192"; }

/* Footer as on the checkout */
body:has(main.op) .site-foot { text-align: center; font-size: 13px; color: #5d616b; padding: 24px 0 34px; }
body:has(main.op) .site-foot .foot-links a[href="/refund"], body:has(main.op) .site-foot .foot-links a[href^="mailto:"], body:has(main.op) .site-foot .foot-biz { display: none; }
body:has(main.op) .site-foot .foot-links a { color: #5d616b; margin: 0 6px; }
body:has(main.op) .site-foot::after { content: "\00A9  Pedro Martins"; display: block; font-size: 13px; color: #5d616b; margin-top: 8px; }
main.op .op-card::before, main.op .op-card::after { display: none; }
main.op h1, main.op h2, main.op h3, main.op p { text-wrap: wrap; }
main.op .op-hero h1 { text-wrap: balance; }
main.op .op-anchor s, main.op .op-anchor .op-fill { font-weight: 400; color: inherit; }
body:has(main.op) .site-foot .foot-links a[href="/privacy"]::after { content: "  \00B7"; color: #5d616b; display: inline-block; margin-left: 6px; text-decoration: none; }
/* The price lock (Pedro, 2026-10-24): true because the €97 repeat checkout is on every one-click buyer's review page. */
main.op .op-anchor::after { content: "Add it now and your price is locked: every future Offer Lens for another offer is \20AC 97 for you, not \20AC 147."; display: block; margin-top: 6px; font-weight: 700; color: #15161a; }

/* ---------------------------------------------------------------------------
   The Offer Lens page should read as an EXTRA step, not as the thank-you page
   (Pedro, 2026-10-26): a warm cream page, the 3-step bar on top, and the price
   card centred.
   --------------------------------------------------------------------------- */
body:has(main.op) { background: #fbf6ec; }
body:has(main.op) .site-head { background: #15161a; }
main.op .op-progress { order: 0; display: block; margin: 22px 0 0; }
main.op .op-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; list-style: none; padding: 0; margin: 0; }
main.op .op-step { display: block; margin: 0; padding: 0; text-align: left; }
main.op .op-step-bar { display: block; height: 6px; border-radius: 999px; background: rgba(21,22,26,.12); margin-bottom: 8px; }
main.op .op-step.op-done .op-step-bar { background: #1f9d5c; }
main.op .op-step.op-here .op-step-bar { background: #d98a1c; }
main.op .op-step-text { display: block; font: 600 13px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #15161a; }
main.op .op-step-num { display: block; font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #5d616b; }
main.op .op-step-note { display: block; font-weight: 400; color: #5d616b; }
main.op .op-step.op-here .op-step-num, main.op .op-step.op-here .op-step-note { color: #a8650a; }
main.op .op-step:last-child .op-step-text { font-size: 0; }
main.op .op-step:last-child .op-step-text::after { content: "Your members area"; font: 600 13px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #15161a; }
main.op .op-step:last-child .op-step-num { font-size: 11px; }
main.op .op-hero { padding-top: 22px; }
main.op .op-sec:has(.op-cards), main.op .op-bonus { background: #fff; }
main.op .op-pricebox { align-items: center; text-align: center; }
main.op .op-pricebox > p { width: 100%; text-align: center; }
main.op { background: transparent !important; }
main.op .op-progress { background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
main.op .op-step, main.op .op-step-text, main.op .op-step.op-here .op-step-text { background: transparent !important; color: #15161a !important; }
main.op .op-step-num, main.op .op-step-note { color: #5d616b !important; }
main.op .op-step.op-here .op-step-num, main.op .op-step.op-here .op-step-note { color: #a8650a !important; }
main.op .op-step.op-done .op-step-note { color: #167a47 !important; }
/* Buy area: fine print and "No thanks" centred under the button */
main.op .op-close > .op-var, main.op .op-close > .op-decline, main.op .op-fine, main.op .op-decline, main.op .op-no { text-align: center !important; }
main.op .op-fine, main.op .op-no { margin-left: auto !important; margin-right: auto !important; width: 100%; }