/* Shared by every funnel page: fonts, page frame, and the few pieces that are ours
   (not-available state, card field, messages, thank-you order summary). */
/* Same two weights per family as the live pages load (heavier weights are synthesised from 700, as live). */
@font-face { font-family: Montserrat; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/montserrat.woff2) format('woff2'); }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/montserrat.woff2) format('woff2'); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/roboto.woff2) format('woff2'); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/roboto.woff2) format('woff2'); }
@font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/work-sans.woff2) format('woff2'); }
@font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/work-sans.woff2) format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/open-sans.woff2) format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/open-sans.woff2) format('woff2'); }

html, body { margin: 0; background: #ffffff; }
[hidden] { display: none !important; }
.unavailable { margin: 30vh 16px 0; text-align: center; font: 400 16px/1.45 Roboto, Arial, sans-serif; color: #636a7b; }
/* /order-received: the plain confirmation for a PayPal buyer who came back without this funnel's key. No scripts. */
.order-received { margin: 24vh auto 0; padding: 0 16px; max-width: 520px; text-align: center; font: 400 17px/1.5 Roboto, Arial, sans-serif; color: #252a32; }
.order-received h1 { margin: 0 0 10px; font-size: 24px; font-weight: 700; }
.order-received p { margin: 0; color: #636a7b; }

/* Buttons that were links on the old pages keep the same look. */
button.btn { font-family: inherit; -webkit-appearance: none; appearance: none; }
button.btn:disabled { opacity: .6; cursor: default; }

/* OTO1 video: portrait 9:16, as on the live page. */
.video-box { width: 100%; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: #e6e6e6; }
.video-box wistia-player { display: block; width: 100%; height: 100%; }
/* Until the player script has loaded: the blurred still, as the live embed shows it. */
wistia-player[media-id='637vqy94qf']:not(:defined) { background: center / contain no-repeat url('https://fast.wistia.com/embed/medias/637vqy94qf/swatch'); filter: blur(5px); padding-top: 177.78%; }

/* Offer pages: payment message shown above the buttons after a decline or an unclear answer. */
.offer-message { max-width: 760px; margin: 16px auto; padding: 14px 18px; border: 2px solid #d0021b; border-radius: 4px; background: #fff5f5; color: #252a32; font: 400 16px/1.5 Montserrat, Arial, sans-serif; text-align: center; }

/* Checkout: card field, messages. */
.card-slot { padding: 14px 12px 16px; }
.card-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; text-align: left; }
.card-fields > div { min-width: 0; }
.card-number-field { grid-column: 1 / -1; }
.card-fields label { display: block; margin-bottom: 8px; color: #636a7b; font: 400 16px/1.4 Roboto, Arial, sans-serif; }
.card-fields .rebilly-framepay { min-height: 48px; box-sizing: border-box; padding: 12px; border-radius: 6px; background: #ffffff; }
/* A partially typed card is not a finished answer. Show the normal focus ring while
   editing; FramePay's red border returns on blur or submission if still invalid. */
.card-fields .rebilly-framepay.rebilly-framepay-invalid.rebilly-framepay-focus { border-color: #0044d4; }
/* The card field could not load (ad blocker, slow network): a calm note in its place, same box as .form-note. */
.card-note { padding: 12px 16px; border: 1px solid #d9d9d9; border-left: 4px solid #9aa0ac; border-radius: 4px; background: #f7f7f8; color: #252a32; font: 400 15px/1.45 Roboto, Arial, sans-serif; text-align: left; }
.card-note p { margin: 0; }
.card-note-reload { margin: 10px 0 0; padding: 8px 16px; border: 1px solid #9aa0ac; border-radius: 4px; background: #ffffff; color: #252a32; font: 700 14px/1 Roboto, Arial, sans-serif; cursor: pointer; }
/* The message owns its own full-width row above the button; it must never sit beside it. */
.form-error { display: block; width: 100%; flex: 0 0 100%; box-sizing: border-box; max-width: 520px; margin: 0 auto 14px; padding: 12px 16px; border: 1px solid #f1c0c0; border-left: 4px solid #d0021b; border-radius: 4px; background: #fff5f5; color: #252a32; font: 400 15px/1.45 Roboto, Arial, sans-serif; text-align: left; }
.form-error[hidden] { display: none; }
.element-wrapper:has(> .form-error) { flex-wrap: wrap; }
/* A calm note, e.g. back from PayPal without paying. Same box as the error, without the alarm. */
.form-note { display: block; width: 100%; flex: 0 0 100%; box-sizing: border-box; max-width: 520px; margin: 0 auto 14px; padding: 12px 16px; border: 1px solid #d9d9d9; border-left: 4px solid #9aa0ac; border-radius: 4px; background: #f7f7f8; color: #252a32; font: 400 15px/1.45 Roboto, Arial, sans-serif; text-align: left; }
.form-note[hidden] { display: none; }
.element-wrapper:has(> .form-note) { flex-wrap: wrap; }
.result { margin: 16px 0 0; padding: 14px 16px; border: 1px solid #c5c7d2; border-radius: 6px; color: #252a32; font: 400 16px/1.5 Roboto, Arial, sans-serif; }
.result h2 { margin: 0 0 6px; font-size: 19px; font-weight: 700; }
.result p { margin: 0; }

/* Checkout: State field. The native select (touch devices, and the fallback everywhere) is dressed like the text
   inputs beside it: same border, radius, padding, 16px type in the browser's own form font (the text inputs never
   inherit the page font, so `revert` keeps the select on the same one), grey "Select state" until a state is chosen. */
.form-element .state-select { overflow: visible; }
.form-element .state-select select { width: 100%; padding: 11px 34px 11px 15px; min-height: 40px; box-sizing: border-box; font-family: revert; line-height: normal; border-radius: 6px; color: #252a32; font-size: 16px; font-weight: 400; letter-spacing: .02em; text-overflow: ellipsis; }
.form-element .state-select select:required:invalid { color: #757575; }
.form-element .state-select select option, .form-element .state-select select optgroup { color: #252a32; }
/* base-v2 removes the outline from every select; give this one the ring the text inputs get from the browser. */
.form-element .state-select select:focus-visible { outline: -webkit-focus-ring-color auto 1px; outline-offset: 0; }
.form-element .state-select::after, .state-combo::after { top: 50%; margin-top: -3px; }
/* Enhanced (mouse and keyboard): the select stays for autofill and as the form value, out of sight but focusable. */
.form-element .state-select.is-enhanced { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); opacity: 0; pointer-events: none; }
.state-combo { position: relative; }
.state-combo::after { content: ""; position: absolute; right: 10px; width: 0; height: 0; border-left: 6px solid rgba(0,0,0,0); border-right: 6px solid rgba(0,0,0,0); border-top: 6px solid gray; pointer-events: none; }
.state-combo.is-open::after { transform: rotate(180deg); }
.form-element .state-combo input.state-combo-input { padding-right: 34px; font-size: 16px; color: #252a32; text-overflow: ellipsis; cursor: text; }
.state-combo-list { position: absolute; z-index: 30; top: 100%; left: 0; right: 0; max-height: 280px; margin: 4px 0 0; padding: 4px 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; text-align: left; background: #ffffff; border: 1px solid #c5c7d2; border-radius: 6px; box-shadow: 0 6px 20px rgba(37,42,50,.16); color: #252a32; font: 400 16px/1.3 Roboto, Arial, sans-serif; letter-spacing: .02em; animation: state-combo-in .12s ease-out; }
.state-combo.is-above .state-combo-list { top: auto; bottom: 100%; margin: 0 0 4px; }
.state-combo-option { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 15px; cursor: pointer; }
.state-combo-option.is-active { background: #eef2fd; }
.state-combo-option mark { background: none; color: inherit; font-weight: 700; }
.state-combo-code { flex: none; color: #8a8f9c; font-size: 13px; }
.state-combo-code.is-match { color: #252a32; font-weight: 700; }
.state-combo-group { padding: 10px 15px 4px; border-top: 1px solid #e6e7ec; margin-top: 4px; color: #636a7b; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.state-combo-empty { padding: 9px 15px; color: #636a7b; }
@keyframes state-combo-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .state-combo-list { animation: none; } .state-combo.is-open::after { transform: none; } }
/* Checkout: Phone field, locked to the United States. One bordered control dressed like the text inputs: the flag and
   "+1" on the left are decoration (no chevron: there is no choice to open), the input on the right holds the number.
   The focus ring and the error colour sit on the whole control, not on the bare input inside it. */
.form-element .phone-field { display: flex; align-items: center; width: 100%; box-sizing: border-box; background: #fff; border: 1px solid #c5c7d2; border-radius: 6px; transition: box-shadow .2s ease-in; }
.form-element .phone-field:focus-within { outline: -webkit-focus-ring-color auto 1px; outline-offset: 0; }
.form-element .phone-field.is-invalid { border-color: #d0021b; }
.phone-prefix { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 0 0 15px; color: #252a32; font-size: 16px; font-weight: 400; letter-spacing: .02em; line-height: normal; -webkit-user-select: none; user-select: none; pointer-events: none; }
.phone-prefix img { display: block; width: 27px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(37,42,50,.12); }
.form-element .phone-field input.fe-input { flex: 1 1 auto; width: auto; min-width: 0; padding-left: 6px; border: 0; border-radius: 6px; background: none; outline: none; }
.field-error { margin: 6px 0 0; color: #d0021b; font: 400 13px/1.4 Roboto, Arial, sans-serif; text-align: left; }
/* ZIP help: a gentle note, never an error. */
.field-note { margin: 6px 0 0; color: #636a7b; font: 400 13px/1.4 Roboto, Arial, sans-serif; text-align: left; }

/* Thank-you: order summary from the server. */
.ty-summary { margin: 10px 0 20px; padding: 16px 20px; border: 1px solid #c5c7d2; border-radius: 6px; color: #252a32; font: 400 18px/1.5 Montserrat, Arial, sans-serif; }
.ty-summary-title { margin: 0 0 10px; font-size: 22px; font-weight: 700; }
/* The page centres all its text (#render-table); a name that wraps would inherit that, so the rows say left. */
.ty-item, .ty-total { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 6px 0; text-align: left; }
.ty-item > span:first-child, .ty-total > span:first-child { flex: 1 1 auto; min-width: 0; text-align: left; overflow-wrap: anywhere; }
.ty-item > span:last-child, .ty-total > span:last-child { flex: 0 0 5em; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ty-total { margin-top: 6px; border-top: 1px solid #afafaf; padding-top: 10px; font-weight: 700; }
/* The card option is the only payment method, so its content area is always open. */
.payment-form .pf-option .pf-content.card-slot { display: block; min-height: 0; padding: 14px 12px 16px; text-align: left; }
/* PayPal: the second row of the payment selector. */
.payment-form .pf-option .pf-header .offsite-payment-gateway-logo { height: 20px; width: auto; margin: auto 0 auto 5px; }
/* The PayPal panel, as on the live Funnelish checkout: an off-site icon over one grey sentence. */
.payment-form .pf-option .pf-content.paypal-slot { display: block; min-height: 0; padding: 28px 24px; text-align: center; background-color: #fafafa; }
.payment-form .pf-option .pf-content.paypal-slot .icon-offsite { display: block; width: 120px; max-width: 60%; height: auto; margin: 0 auto 18px; }
.payment-form .pf-option .pf-content.paypal-slot p { margin: 0 auto; max-width: 440px; color: #737373; font: 400 19px/1.7 Roboto, Arial, sans-serif; }
.payment-form .pf-option .pf-content.paypal-slot p b { font-weight: 700; }
@media (max-width: 600px) {
  .payment-form .pf-option .pf-content.paypal-slot { padding: 24px 16px; }
  .payment-form .pf-option .pf-content.paypal-slot p { font-size: 17px; }
}
.payment-form .pf-option .pf-content.card-slot[hidden], .payment-form .pf-option .pf-content.paypal-slot[hidden] { display: none; }