/* Page Create (pagecreate.homeasap.com): shared styles for every page. Page-specific rules live in each page's \3c style>. */

/* Fonts (self-hosted): Lato Bold for headlines and buttons (--font-display), Open Sans for body
   copy (--font-body, a variable font covering weights 300-800, roman and italic). */
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/lato-700.woff2) format('woff2')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:300 800;font-display:swap;src:url(../fonts/open-sans.woff2) format('woff2')}
@font-face{font-family:'Open Sans';font-style:italic;font-weight:300 800;font-display:swap;src:url(../fonts/open-sans-italic.woff2) format('woff2')}

:root {
  --ink: #222;            /* headings */
  --body: #666;           /* body copy */
  --header: #2624a0;      /* header bar */
  --gold: #fccc5d;        /* header "Buy Now" pill */
  --coral: #e46248;       /* CTA pills, "Satisfaction Guaranteed", contact labels */
  --teal: #21bdba;        /* "Here's what you get" band */
  --night: #13232f;       /* FAQ and contact bands */
  --socket: #222;         /* copyright bar */
  --pay: #5ab546;         /* "Pay with Card" */
  --line: #e1e1e1;
  --font-body: 'Open Sans', Arial, sans-serif;
  --font-display: 'Lato', Arial, sans-serif;
}

/* ---------------------------------------------------------------------------
   Base (the theme's type scale, measured at 1440px)
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--body); font: 400 15px/1.65 var(--font-body); overflow-x: hidden; }
h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--ink); font-family: var(--font-display); line-height: 1.1; }
h1 { margin-bottom: 14px; font-size: 34px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; }
h2 { margin-bottom: 10px; font-size: 28px; font-weight: 700; letter-spacing: 1px; }
h3 { margin-bottom: 8px; font-size: 20px; font-weight: 700; }
h4 { margin-bottom: 8px; font-size: 18px; font-weight: 700; }
h5 { margin-bottom: 8px; font-size: 16px; font-weight: 700; }
p { margin: 14.45px 0; font-size: 17px; font-weight: 500; line-height: 25.5px; }
ul, ol { margin: 0 0 20px; padding-left: 22px; }
li { font-size: 15px; line-height: 24.75px; }
a { color: var(--coral); }
img { max-width: 100%; height: auto; vertical-align: middle; border: 0; }
strong, b { font-weight: 700; }
button, input, select, textarea { font: inherit; }
hr { height: 1px; margin: 30px 0; border: 0; background: var(--line); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.text > :first-child { margin-top: 0; }
.text > :last-child { margin-bottom: 0; }
.center { text-align: center; }
.right { text-align: right; }
.on-dark, .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark h5, .on-dark p, .on-dark li { color: #fff; }
.strike { text-decoration: line-through; }

/* Desktop-only / phone-only blocks: some WordPress pages carry separate phone layouts. */
@media (max-width: 767px) { .desktop-only { display: none !important; } }
@media (min-width: 768px) { .mobile-only { display: none !important; } }

/* ---------------------------------------------------------------------------
   Layout: a .band (full-width section) holds a .container; .row > .col columns.
   Container: 1310px max with 50px gutters; 85% wide on phones (the theme's grid).
   Column widths and the 6% gutter are the theme's fractions.
   --------------------------------------------------------------------------- */
.container { width: 100%; max-width: 1310px; margin: 0 auto; padding: 0 50px; }
.band { position: relative; background: #fff no-repeat center / cover; }
.band > .container { position: relative; padding-top: 50px; padding-bottom: 50px; }
.band.small > .container { padding-top: 20px; padding-bottom: 20px; }
.band.large > .container { padding-top: 70px; padding-bottom: 70px; }
.band.huge > .container { padding-top: 100px; padding-bottom: 100px; }
.band.flush > .container { padding-top: 0; padding-bottom: 0; }
.band.ruled { border-top: 1px solid var(--line); }
/* Black overlay on photo backgrounds. Opacity per section via --shade (the theme's value). */
.band.shaded::before { content: ""; position: absolute; inset: 0; background: #000; opacity: var(--shade, .5); }
.row { display: flex; align-items: flex-start; }
.row.middle { align-items: center; }
.row.bottom { align-items: flex-end; }
.row.stretch { align-items: stretch; }
.row + .row { margin-top: 30px; }
.col { flex: none; min-width: 0; margin-left: 6%; }
.col:first-child { margin-left: 0; }
.w1-1 { width: 100%; }
.w1-2 { width: 47%; }
.w1-3 { width: 29.333%; }
.w2-3 { width: 64.667%; }
.w1-4 { width: 20.5%; }
.w3-4 { width: 73.5%; }
.w1-5 { width: 15.2%; }
.w2-5 { width: 36.4%; }
.w3-5 { width: 57.6%; }
.w4-5 { width: 78.8%; }
.col.offset-1-2 { margin-left: 53%; }     /* an empty 1/2 column plus its gutter */
.col.offset-1-3 { margin-left: 35.333%; }
.col.offset-1-4 { margin-left: 26.5%; }
.col.offset-1-5 { margin-left: 21.2%; }
.spacer { height: var(--h, 50px); }
@media (max-width: 767px) {
  .container { width: 85%; padding: 0; }
  .row { display: block; }
  .row + .row { margin-top: 0; }
  .col, .col:first-child, .col[class*="offset-"] { width: 100%; margin-left: 0; margin-bottom: 20px; }
  .col:last-child { margin-bottom: 0; }
  .row.reverse-m { display: flex; flex-direction: column-reverse; }   /* image above copy on phones */
  .row.reverse-m .col:last-child { margin-bottom: 20px; }
  .row.reverse-m .col:first-child { margin-bottom: 0; }
}

/* ---------------------------------------------------------------------------
   Header: logo, the two phone numbers and a "Buy Now" pill. Phones: a hamburger
   opens the same three links (as on WordPress).
   --------------------------------------------------------------------------- */
.site-header { position: relative; z-index: 100; background: var(--header); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 88px; }
.site-logo { display: block; flex: none; line-height: 0; }
.site-logo img { width: 230px; height: 88px; padding: 10px 0; object-fit: contain; object-position: left center; }
.site-nav ul { display: flex; margin: 0; padding: 0; list-style: none; }
.site-nav li { line-height: 88px; }
.site-nav a { display: block; padding: 0 13px; color: #fff; font: 600 13px/88px var(--font-body); text-decoration: none; white-space: nowrap; }
.site-nav li:last-child a { padding-right: 0; }
.site-nav .nav-button span { padding: 12px 20px; border-radius: 50px; background: var(--gold); font-family: var(--font-display); font-weight: 700; transition: opacity .2s; }
.site-nav .nav-button:hover span { opacity: .85; }
.nav-toggle { display: none; }
/* Tablet: a smaller logo and tighter links so the Buy Now pill keeps its right gutter */
@media (max-width: 989px) { .site-logo img { width: 190px; } .site-nav a { padding: 0 8px; font-size: 12.5px; } .site-nav .nav-button span { padding: 10px 16px; } }
@media (max-width: 767px) {
  .site-header .container { width: 100%; height: 80px; padding: 0 28px; }
  .site-logo img { width: 205px; height: 80px; }
  .nav-toggle { display: flex; align-items: center; justify-content: center; width: 55px; height: 80px; margin-right: -14px; padding: 0; border: 0; background: none; cursor: pointer; }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 26px; height: 2px; background: #fff; transition: transform .2s; }
  .nav-toggle span { position: relative; }
  .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
  .nav-toggle span::before { top: -8px; }
  .nav-toggle span::after { top: 8px; }
  .nav-toggle[aria-expanded="true"] span { background: transparent; }
  .nav-toggle[aria-expanded="true"] span::before { transform: translateY(8px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span::after { transform: translateY(-8px) rotate(-45deg); }
  .site-nav { position: absolute; top: 80px; right: 0; left: 0; display: none; background: var(--header); box-shadow: 0 6px 12px rgba(0, 0, 0, .2); }
  .site-nav.open { display: block; }
  .site-nav ul { display: block; padding: 10px 28px 20px; }
  .site-nav li { line-height: 1; }
  .site-nav a, .site-nav li:last-child a { padding: 14px 0; font-size: 16px; line-height: 20px; }
  .site-nav .nav-button span { display: inline-block; }
}

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */
.btn-wrap { margin: 12px 0; }
.btn-wrap.center { text-align: center; }
.btn { display: inline-block; font-family: var(--font-display); font-weight: 700; text-decoration: none; text-align: center; cursor: pointer; transition: opacity .2s; }
.btn:hover { opacity: .85; }
/* Pill CTA (coral, the theme's "Order Now") */
.btn-pill { padding: 15px 30px 13px; border: 0; border-radius: 50px; background: var(--coral); color: #fff; font: 700 18px/18px var(--font-display); letter-spacing: 1px; }
.btn-pill.green { background: #47ba12; }
.btn-pill.blue { background: #1b75bc; }
/* Small coral pill (affiliate network) */
.btn-small { padding: 9px 15px; border-radius: 50px; background: var(--coral); color: #fff; font: 700 13px/15.6px var(--font-display); }

/* ---------------------------------------------------------------------------
   Testimonials (two-up quote cards with an avatar)
   --------------------------------------------------------------------------- */
.quotes { display: flex; }
.quote { display: flex; flex: 1; gap: 20px; margin: 0; padding-right: 20px; }
.quote + .quote { padding: 0 0 0 20px; border-left: 1px solid var(--line); }
.quote img { flex: none; width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }
.quote blockquote { margin: 0; }
.quote blockquote p { margin: 0 0 14.45px; }
.quote cite { display: block; color: var(--ink); font: 700 15px/19.5px var(--font-body); font-style: normal; }
.quote cite small { display: block; color: var(--body); font-size: 12px; font-weight: 400; text-transform: uppercase; }
@media (max-width: 767px) {
  .quotes { display: block; }
  .quote + .quote { margin: 30px 0 0; padding: 30px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------------------------------------------------------------------------
   FAQ toggles: <details> with a plus/minus box, one open at a time per group
   --------------------------------------------------------------------------- */
.toggles { margin: 0; text-align: left; }
.toggle { border: 1px solid var(--line); border-top: 0; background: #fff; }
.toggle:first-child { border-top: 1px solid var(--line); border-radius: 2px 2px 0 0; }
.toggle summary { position: relative; display: block; padding: 9px 3px 9px 35px; color: var(--body); font: 500 17px/25.5px var(--font-body); cursor: pointer; list-style: none; }
.toggle summary::-webkit-details-marker { display: none; }
.toggle summary::before { content: ""; position: absolute; top: 50%; left: 10px; width: 15px; height: 15px; margin-top: -8px; border: 1px solid var(--line); background: linear-gradient(#999, #999) center / 7px 1px no-repeat, linear-gradient(#999, #999) center / 1px 7px no-repeat; }
.toggle[open] summary::before { background: linear-gradient(#999, #999) center / 7px 1px no-repeat; }
.toggle .answer { padding: 10px 15px 15px 35px; border-top: 1px solid var(--line); background: #fff; color: var(--body); }
.toggle .answer > :first-child { margin-top: 0; }
.toggle .answer > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   Order card + order form (former WP Simple Pay checkout)
   --------------------------------------------------------------------------- */
.order-card { padding: 20px; border: 1px solid #ddd; background: #eee; }
.order-form { margin: 0; color: #333; font: 400 15px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
.order-form h3 { margin: 0 0 8px; }
.order-form label { display: block; margin: 0 0 5px; font-size: 13.8px; font-weight: 700; }
.order-form .field { margin-bottom: 17px; }
.order-form input[type=text], .order-form input[type=email], .order-form input[type=tel], .order-form select { display: block; width: 100%; height: 34px; padding: 6px 8px; border: 1px solid #ccc; border-radius: 0; background: #f8f8f8; color: #000; font-size: 15px; }
.order-form .options { margin: 0 0 17px; padding: 0; border: 0; }
.order-form .options legend { margin-bottom: 5px; padding: 0; font-size: 13.8px; font-weight: 700; }
.order-form .options label { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 15px; }
.order-form .coupon { display: flex; gap: 8px; margin-bottom: 17px; }
.order-form .coupon input { flex: 1; }
.order-form .btn-apply { padding: 0 14px; border: 1px solid #ccc; border-radius: 4px; background: #fff; color: #333; font-size: 14px; cursor: pointer; }
.order-form .coupon-msg { margin: -10px 0 17px; font-size: 14px; }
.order-form .coupon-msg:empty { display: none; }
.order-form .totals { margin: 0 0 22px; font-size: 17px; font-weight: 500; line-height: 25.5px; }
.order-form .totals div { display: flex; justify-content: space-between; }
.order-form .totals .grand { font-weight: 700; }
.order-form .btn-pay { height: 42px; padding: 0 22px; border: 0; border-radius: 4px; background: var(--pay); color: #fff; font: 700 16px/42px var(--font-display); cursor: pointer; }
.order-form .btn-pay:hover { opacity: .9; }
.order-form .form-error { margin: 15px 0 0; color: #c00; font-size: 15px; line-height: 1.5; }
.order-form .form-error:empty { display: none; }
.seals { display: flex; align-items: center; gap: 10px; margin: 20px 0 7px; }
.guarantee { display: flex; gap: 0; align-items: flex-start; }
.guarantee img { flex: none; width: 50px; }
.guarantee p { margin: 0 0 14.45px; padding-left: 10px; text-align: left; line-height: 21.25px; }
.guarantee strong { color: var(--coral); }

/* Order sections (home and the sales pages): the bullets sit at the top of the row rather than
   centred against the much taller card, and the guarantee runs the full card width in small
   print, matching the delivery note under it. */
.orders > .container > .row { align-items: flex-start; }
/* Two equal columns are too narrow for the card below 990px, so tablets stack it under the list */
@media (max-width: 989px) {
  .orders > .container > .row { display: block; }
  .orders > .container > .row > .col { width: 100%; margin-left: 0; }
  .orders > .container > .row > .col:first-child { padding-top: 0; }
  .orders .order-card { margin-top: 20px; }
}
.order-card .guarantee { align-items: center; gap: 12px; margin-top: 4px; }
.order-card .guarantee p { max-width: none; margin: 0; padding-left: 0; font-size: 14px; line-height: 1.5; }
.order-card .text p { margin: 16px 0 0; color: #666; font-size: 13px; line-height: 1.5; }

/* ---------------------------------------------------------------------------
   Lead forms (former Ninja Forms), posted to the marketing worker
   --------------------------------------------------------------------------- */
.lead-form form { margin: 0; }
.lead-form .field { margin-bottom: 20px; }
.lead-form label { display: block; margin-bottom: 6px; color: var(--ink); font: 700 15px/1.4 var(--font-body); }
.lead-form .req { color: #e80000; }
.lead-form input[type=text], .lead-form input[type=email], .lead-form input[type=tel], .lead-form input[type=url], .lead-form select, .lead-form textarea { display: block; width: 100%; padding: 8px 10px; border: 1px solid #ccc; border-radius: 0; background: #f9f9f9; color: #333; font-size: 15px; }
.lead-form input, .lead-form select { height: 41px; }
.lead-form textarea { min-height: 120px; resize: vertical; }
.lead-form .hint { margin: 4px 0 0; color: #777; font-size: 13px; line-height: 1.4; }
.lead-form .note { margin: 0 0 20px; font-size: 15px; }
.lead-form button[type=submit] { height: 46px; padding: 0 30px; border: 0; border-radius: 4px; background: var(--coral); color: #fff; font: 700 16px/46px var(--font-display); cursor: pointer; }
.lead-form button[disabled] { opacity: .6; cursor: default; }
.lead-form [data-contact-error] { margin: 15px 0 0; color: #c00; }
.lead-form [data-contact-success] p { margin: 0; color: var(--ink); }

/* ---------------------------------------------------------------------------
   Contact band ("Get in touch with us!") and the copyright line
   --------------------------------------------------------------------------- */
.contact { background: var(--night); }
.contact h3 { margin: 0 0 16px; color: #fff; font-size: 18.75px; line-height: 20.625px; letter-spacing: 1px; text-transform: uppercase; }
.contact h3 svg { width: 20px; height: 20px; margin-right: 6px; vertical-align: -3px; fill: #fff; }
.contact p { color: #fff; }
.contact p strong { color: var(--coral); }
.contact a { color: #fff; text-decoration: none; }
.contact .logo { width: 158px; }
.contact .address { margin-bottom: 0; }
.contact .btn-small { margin-top: 18px; }
.contact-gap { height: 102px; background: #fff; }
.site-footer { background: var(--socket); }
.site-footer .container { display: flex; align-items: center; min-height: 56px; padding-top: 15px; padding-bottom: 15px; }
.site-footer p { margin: 0; color: #eee; font-size: 11px; font-weight: 400; line-height: 24.75px; }
.site-footer a { color: #fff; text-decoration: none; }