/* Shared styles for the new-offer funnel. Sales page sections use .sp-*, FAQ/footer use .sq-*. */

  .sp { --ink:#0a0a0a; --paper:#ffffff; --mint:#a8f5b8; --line:#e9e9e9; --mute:#5d5d5d; --soft:#f6f6f4;
        font-family:'Poppins', Arial, sans-serif; color:var(--ink); background:var(--paper); line-height:1.55; -webkit-font-smoothing:antialiased; }
  .sp *, .sp *:before, .sp *:after { box-sizing:border-box; }
  .sp-in { max-width:1120px; margin:0 auto; padding:0 24px; }
  .sp-narrow { max-width:820px; }
  .sp-sec { padding:84px 0; }
  .sp-dark { background:var(--ink); color:#fff; }
  .sp-soft { background:var(--soft); }
  .sp-off { display:none !important; }            /* remove "sp-off" from a section's class list to switch it on */

  /* type */
  .sp h1, .sp h2, .sp h3 { font-weight:900; text-transform:uppercase; letter-spacing:-.012em; line-height:1.1; margin:0; }
  .sp h1 { font-size:clamp(34px, 5.6vw, 64px); }
  .sp h2 { font-size:clamp(28px, 4.2vw, 46px); }
  .sp h3 { font-size:clamp(19px, 2.2vw, 24px); line-height:1.18; }
  .sp p { margin:0 0 16px; font-size:17px; font-weight:500; color:#222; }
  .sp-dark p { color:#d9d9d9; }
  .sp mark { background:linear-gradient(to bottom, transparent 9.5%, var(--mint) 9.5%, var(--mint) 90.5%, transparent 90.5%);
             color:var(--ink); padding:0 .16em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
  .sp-lead { font-size:clamp(17px, 2vw, 21px) !important; color:#333 !important; max-width:720px; margin:18px auto 0 !important; }
  .sp-center { text-align:center; }
  .sp-pill { display:inline-block; background:var(--ink); color:#fff; font-weight:600; font-size:12.5px; letter-spacing:.07em;
             text-transform:uppercase; padding:8px 16px; border-radius:999px; }
  .sp-dark .sp-pill { background:var(--mint); color:var(--ink); }
  .sp-kicker { margin-bottom:18px; }

  /* button */
  .sp-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; background:var(--ink); color:#fff !important; text-decoration:none;
            font-weight:900; text-transform:uppercase; font-size:17px; letter-spacing:.02em; padding:19px 34px; border-radius:12px; border:2px solid var(--ink);
            transition:transform .15s ease, box-shadow .15s ease; box-shadow:0 6px 0 var(--mint); }
  .sp-btn:hover { transform:translateY(-2px); box-shadow:0 8px 0 var(--mint); }
  .sp-btn:active { transform:translateY(3px); box-shadow:0 3px 0 var(--mint); }
  .sp-btn-wide { display:flex; width:100%; }
  .sp-dark .sp-btn { background:var(--mint); color:var(--ink) !important; border-color:var(--mint); box-shadow:0 6px 0 #fff; }
  .sp-under { font-size:13.5px !important; color:var(--mute) !important; margin:14px 0 0 !important; }
  .sp-dark .sp-under { color:#bdbdbd !important; }
  .sp-cta { text-align:center; margin-top:44px; }

  /* placeholders — replace each with the real video / image */
  .sp-ph { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:6px; width:100%;
           background:repeating-linear-gradient(135deg, #f1f1ef 0 14px, #e8e8e5 14px 28px); border:2px dashed #b9b9b4; border-radius:14px;
           color:#555; font-weight:600; font-size:14px; padding:16px; }
  .sp-ph small { font-weight:500; font-size:12px; color:#777; }
  /* Real images reuse the placeholder's size rules; this strips the placeholder's frame. */
  .sp-pic, .sp-dark .sp-pic { display:block; padding:0 !important; border:0; background:none; object-fit:cover; height:auto; }
  /* Cut-out images with a transparent background: keep their own shape and sit on a soft shadow. */
  .sp-cut { aspect-ratio:auto !important; object-fit:contain; border-radius:0; filter:drop-shadow(0 16px 22px rgba(10,10,10,.16)); }
  .sp-row .sp-cut { max-height:420px; }
  .sp-ph-video { aspect-ratio:16/9; border-style:solid; border-color:var(--ink); background:var(--ink); color:#fff; }
  .sp-ph-video small { color:#bdbdbd; }
  .sp-play { width:64px; height:64px; border-radius:50%; background:var(--mint); position:relative; margin-bottom:6px; }
  .sp-play:after { content:""; position:absolute; left:26px; top:20px; border-left:18px solid var(--ink); border-top:12px solid transparent; border-bottom:12px solid transparent; }
  .sp-dark .sp-ph { background:repeating-linear-gradient(135deg, #1b1b1b 0 14px, #232323 14px 28px); border-color:#4a4a4a; color:#cfcfcf; }
  .sp-dark .sp-ph small { color:#9a9a9a; }

  /* hero */
  .sp-hero { padding:44px 0 56px; }
  .sp-hero-grid { display:grid; grid-template-columns:1.45fr 1fr; gap:28px; align-items:stretch; margin-top:38px; text-align:left; }
  .sp-card { border:2px solid var(--ink); border-radius:16px; padding:24px; background:#fff; box-shadow:8px 8px 0 var(--mint); }
  .sp-price { font-weight:900; font-size:54px; line-height:1; letter-spacing:-.02em; margin:16px 0 4px; }
  .sp-price span { font-size:15px; font-weight:600; letter-spacing:0; color:var(--mute); margin-left:8px; text-transform:none; }
  .sp-ticks { list-style:none; margin:16px 0 20px; padding:0; }
  .sp-ticks li { position:relative; padding:7px 0 7px 32px; font-weight:500; font-size:15.5px; line-height:1.4; }
  .sp-ticks li:before { content:""; position:absolute; left:0; top:9px; width:20px; height:20px; border-radius:50%; background:var(--mint); }
  .sp-ticks li:after { content:""; position:absolute; left:7px; top:13px; width:5px; height:10px; border:solid var(--ink); border-width:0 2.5px 2.5px 0; transform:rotate(45deg); }
  .sp-dark .sp-ticks li { color:#fff; }
  .sp-seen { display:flex; align-items:center; gap:18px; margin-top:18px; padding:0 4px; }
  .sp-seen b { font-size:11.5px; letter-spacing:.14em; font-weight:700; white-space:nowrap; color:var(--mute); }
  .sp-seen img { flex:1; min-width:0; max-width:520px; height:auto; display:block; filter:invert(1); }   /* logos are white; invert to black on the white page */

  /* old way / new way */
  .sp-vs { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:44px; }
  .sp-vs > div { border-radius:16px; padding:28px; }
  .sp-old { background:var(--soft); border:2px solid var(--line); }
  .sp-new { background:var(--mint); border:2px solid var(--ink); }
  .sp-vs h3 { margin-bottom:14px; }
  .sp-vs ul { margin:0; padding:0; list-style:none; }
  .sp-vs li { padding:9px 0 9px 30px; position:relative; font-weight:500; font-size:16px; border-top:1px solid rgba(0,0,0,.09); }
  .sp-vs li:first-child { border-top:0; }
  .sp-old li:before { content:"\00d7"; position:absolute; left:2px; top:5px; font-weight:900; font-size:21px; color:#9b9b9b; }
  .sp-new li:before { content:""; position:absolute; left:6px; top:14px; width:6px; height:11px; border:solid var(--ink); border-width:0 3px 3px 0; transform:rotate(45deg); }

  /* long explainer rows */
  .sp-row { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; margin-top:72px; }
  .sp-row.sp-flip > :first-child { order:2; }
  .sp-row .sp-ph { aspect-ratio:4/3; }
  .sp-step { display:inline-block; font-weight:900; font-size:13px; letter-spacing:.1em; background:var(--mint); padding:5px 12px; border-radius:6px; margin-bottom:14px; }
  .sp-row h3 { font-size:clamp(22px, 2.8vw, 30px); margin-bottom:14px; }

  /* what's inside */
  .sp-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:48px; }
  .sp-mod { background:#151515; border:1px solid #2c2c2c; border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:12px; transition:border-color .2s ease, transform .2s ease; }
  .sp-mod:hover { border-color:var(--mint); transform:translateY(-3px); }
  .sp-mod .sp-ph { aspect-ratio:16/10; }
  .sp-mod p { font-size:15px; margin:0; }
  .sp-tag { align-self:flex-start; font-size:11.5px; font-weight:700; letter-spacing:.1em; background:var(--mint); color:var(--ink); padding:4px 10px; border-radius:999px; }
  .sp-tag-bonus { background:#fff; }

  /* feature highlight, about */
  .sp-split { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
  .sp-split .sp-ph { aspect-ratio:1/1; }
  .sp-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-top:24px; }
  .sp-stats div { border:2px solid var(--ink); border-radius:12px; padding:14px 12px; text-align:center; }
  .sp-stats b { display:block; font-weight:900; font-size:26px; line-height:1.1; }
  .sp-stats span { font-size:12.5px; font-weight:600; color:var(--mute); text-transform:uppercase; letter-spacing:.05em; }

  /* price recap */
  .sp-recap { max-width:1040px; margin:44px auto 0; text-align:left; display:grid; grid-template-columns:1fr 1.1fr; gap:36px; align-items:center; }
  .sp-recap-img { aspect-ratio:1/1; }
  .sp-recap .sp-card { padding:34px; }
  .sp-recap-top { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; border-bottom:2px solid var(--ink); padding-bottom:18px; margin-bottom:8px; }

  /* testimonials + sneak peek (hidden until real) */
  .sp-tgrid { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-top:44px; }
  .sp-tgrid .sp-ph { aspect-ratio:9/16; }

  /* order heading */
  .sp-order-head { padding:84px 0 28px; text-align:center; }
  .sp-secure { display:inline-flex; gap:8px; align-items:center; font-size:13.5px; font-weight:600; color:var(--mute); margin-top:14px; }
  .sp-secure i { width:10px; height:10px; border-radius:50%; background:var(--mint); border:2px solid var(--ink); display:inline-block; }

  /* entrance */
  @keyframes sp-up { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
  .sp-hero .sp-pill, .sp-hero h1, .sp-hero .sp-lead, .sp-hero-grid { animation:sp-up .6s cubic-bezier(.2,.7,.2,1) both; }
  .sp-hero h1 { animation-delay:.07s; } .sp-hero .sp-lead { animation-delay:.14s; } .sp-hero-grid { animation-delay:.22s; }
  @media (prefers-reduced-motion: reduce) { .sp * { animation:none !important; transition:none !important; } }

  @media (max-width: 860px) {
    .sp-sec { padding:56px 0; }
    .sp-in { padding:0 18px; }
    .sp-hero { padding:20px 0 36px; }
    .sp-hero-grid, .sp-vs, .sp-row, .sp-split { grid-template-columns:1fr; gap:22px; }
    .sp-hero-grid { margin-top:24px; }
    .sp-row { margin-top:48px; }
    .sp-row.sp-flip > :first-child { order:0; }
    .sp-grid { grid-template-columns:1fr; }
    .sp-tgrid { grid-template-columns:1fr 1fr; }
    .sp-card { box-shadow:6px 6px 0 var(--mint); }
    .sp-price { font-size:46px; }
    .sp-seen { flex-direction:column; gap:10px; margin-top:14px; }
    .sp-seen img { width:100%; }
    .sp-btn { width:100%; padding:18px 20px; }
    .sp-order-head { padding:56px 0 20px; }
  }


  .sq { --ink:#0a0a0a; --mint:#a8f5b8; --mute:#5d5d5d; font-family:'Poppins', Arial, sans-serif; color:var(--ink); background:#fff; line-height:1.55; }
  .sq *, .sq *:before, .sq *:after { box-sizing:border-box; }
  .sq-in { max-width:820px; margin:0 auto; padding:0 24px; }
  .sq-sec { padding:84px 0; }
  .sq h2 { font-weight:900; text-transform:uppercase; letter-spacing:-.012em; line-height:1.1; margin:0 0 34px; font-size:clamp(28px, 4.2vw, 46px); text-align:center; }
  .sq mark { background:linear-gradient(to bottom, transparent 9.5%, var(--mint) 9.5%, var(--mint) 90.5%, transparent 90.5%); color:var(--ink); padding:0 .16em; }
  .sq details { border:2px solid var(--ink); border-radius:14px; margin-bottom:12px; background:#fff; overflow:hidden; }
  .sq summary { list-style:none; cursor:pointer; padding:18px 56px 18px 20px; font-weight:700; font-size:17px; position:relative; }
  .sq summary::-webkit-details-marker { display:none; }
  .sq summary:after { content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%;
                      background:var(--mint); font-weight:900; font-size:19px; line-height:28px; text-align:center; }
  .sq details[open] summary:after { content:"\2212"; }
  .sq details p { margin:0; padding:0 20px 20px; font-size:16px; font-weight:500; color:#333; }
  .sq-cta { text-align:center; margin-top:38px; }
  .sq-btn { display:inline-block; background:var(--ink); color:#fff !important; text-decoration:none; font-weight:900; text-transform:uppercase; font-size:17px;
            letter-spacing:.02em; padding:19px 34px; border-radius:12px; box-shadow:0 6px 0 var(--mint); }
  .sq-foot { background:var(--ink); color:#bdbdbd; padding:38px 0 46px; font-size:12.5px; text-align:center; }
  .sq-foot a { color:#fff; text-decoration:underline; margin:0 8px; font-size:13.5px; }
  .sq-foot p { margin:16px auto 0; max-width:760px; line-height:1.6; }
  @media (max-width: 860px) { .sq-sec { padding:56px 0; } .sq-in { padding:0 18px; } .sq-btn { display:block; } }

/* ---- funnel step pages (upsell, downsell, thank-you) ---- */
.sp-step-page { min-height:100vh; display:flex; flex-direction:column; }
.sp-step-main { flex:1; padding:40px 0 64px; }
.sp-progress { display:flex; gap:8px; justify-content:center; margin-bottom:26px; font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); flex-wrap:wrap; }
.sp-progress span { padding:6px 12px; border-radius:999px; border:2px solid var(--line); }
.sp-progress .on { border-color:var(--ink); background:var(--mint); color:var(--ink); }
.sp-decline { display:inline-block; margin-top:18px; font-size:14.5px; font-weight:600; color:var(--mute); text-decoration:underline; cursor:pointer; background:none; border:0; font-family:inherit; }
.sp-note { font-size:13.5px !important; color:var(--mute) !important; }
.sp-err { display:none; margin-top:14px; padding:12px 14px; border:2px solid #c0392b; border-radius:10px; color:#8e2a1e; font-weight:600; font-size:14.5px; }
/* ---- one-page checkout (assets/checkout.js). Plain on purpose: thin borders, no shadows, one column. ---- */
#sp-checkout { max-width:600px; margin:0 auto; min-height:320px; }
.co { background:#fff; border:1px solid #dedede; border-radius:14px; padding:28px 28px 24px; text-align:left; }
.co-h { font-size:19px !important; font-weight:700 !important; text-transform:none !important; letter-spacing:0 !important; margin:26px 0 12px !important; line-height:1.3 !important; }
.co-h:first-child { margin-top:0 !important; }
.co-sub { font-size:14px !important; color:var(--mute); margin:-8px 0 12px !important; font-weight:500; }
.co-in { display:block; width:100%; font-family:inherit; font-size:16px; font-weight:500; padding:14px 14px; margin-bottom:12px;
         border:1px solid #d0d0d0; border-radius:8px; background:#fff; color:var(--ink); outline:none; }
.co-in:focus { border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); }
.co-two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
/* The Commas card field is an iframe with no size of its own; without these it renders at the browser default (300x150). */
/* The Commas frame: payment tabs, card fields and its own pay button. No border, so spare room under it is invisible.
   Needs about 430px when expiry and security code sit side by side, about 500px on narrow phones where they stack. */
.co-paywrap { position:relative; }
#sp-embed { width:calc(100% + 20px); margin:0 -10px; height:440px; overflow:hidden; background:#fff; }
@media (max-width:400px) { #sp-embed { height:510px; } }
/* Covers the frame until the contact fields are filled in and handed to it. */
.co-lock { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:20px; border:0; cursor:pointer;
           background:rgba(255,255,255,.62); font-family:inherit; font-size:15px; font-weight:700; color:var(--ink); }
.co-lock::before { content:""; }
#sp-embed iframe { width:100% !important; height:100% !important; border:0 !important; display:block; }
.co-wait { height:100%; display:flex; align-items:center; justify-content:center; font-size:14.5px; font-weight:500; color:var(--mute); padding:16px; text-align:center; }
.co-bump { display:block; border:1px solid #d0d0d0; border-radius:8px; margin-bottom:12px; cursor:pointer; overflow:hidden; }
.co-bump.on { border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); }
.co-bump-top { display:flex; align-items:center; gap:12px; padding:13px 14px; background:var(--mint); font-weight:700; font-size:16px; }
.co-bump-top input { width:20px; height:20px; accent-color:var(--ink); flex:none; margin:0; cursor:pointer; }
.co-bump-t { flex:1; }
.co-bump-body { display:flex; gap:14px; padding:14px; align-items:flex-start; }
.co-bump-body img, .co-bump-ph { width:92px; height:92px; flex:none; border-radius:6px; object-fit:cover; background:var(--soft); }
.co-bump-ph { display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--mute); border:1px dashed #c9c9c9; }
.co-bump-d { font-size:14.5px; line-height:1.5; font-weight:500; color:#333; }
.co-sum { border-top:1px solid #dedede; }
.co-row { display:flex; justify-content:space-between; gap:16px; padding:11px 0; font-size:15.5px; font-weight:500; border-bottom:1px solid #eee; }
.co-total { font-weight:800; font-size:18px; border-bottom:0; border-top:1px solid #cfcfcf; }
.co-secure { text-align:center; font-size:13px !important; color:var(--mute); margin:12px 0 0 !important; font-weight:500; }
.co .sp-err { margin-top:14px; }
@media (max-width:560px) { .co { padding:20px 16px 18px; border-radius:12px; } .co-bump-body img, .co-bump-ph { width:72px; height:72px; } }

/* ---- phone layout: keep the page short ---- */
@media (max-width: 860px) {
  .sp-sec { padding:44px 0; }
  .sp h2 { font-size:clamp(25px, 7vw, 34px); }
  .sp-lead { margin-top:12px !important; }
  .sp-hero .sp-card .sp-ph { aspect-ratio:16/7 !important; }
  .sp-row .sp-cut { max-height:300px; }
  .sp-vs { margin-top:26px; gap:14px; }
  .sp-vs > div { padding:20px; }
  .sp-vs li { padding:7px 0 7px 28px; font-size:15.5px; }
  .sp-row { margin-top:34px; gap:16px; }
  .sp-row .sp-ph { aspect-ratio:16/9; }
  .sp-row h3 { margin-bottom:10px; }
  .sp p { font-size:16px; margin-bottom:12px; }
  .sp-cta { margin-top:30px; }
  .sp-grid { gap:12px; margin-top:28px; }
  .sp-mod { display:grid; grid-template-columns:96px 1fr; column-gap:14px; row-gap:6px; padding:14px; align-items:start; }
  .sp-mod .sp-ph { grid-row:1 / span 3; aspect-ratio:1/1; padding:6px; font-size:11px; border-radius:10px; }
  .sp-mod .sp-ph small { display:none; }
  .sp-mod h3 { font-size:17px; }
  .sp-mod p { font-size:14px; }
  .sp-split { gap:18px; }
  .sp-split .sp-ph { aspect-ratio:16/9; }
  .sp-stats { gap:8px; margin-top:16px; }
  .sp-stats div { padding:10px 6px; }
  .sp-stats b { font-size:20px; }
  .sp-stats span { font-size:10.5px; }
  .sp-recap { margin-top:26px; grid-template-columns:1fr; gap:18px; }
  .sp-recap-img { aspect-ratio:16/10; }
  .sp-recap .sp-card { padding:22px; }
  .sp-ticks li { padding:5px 0 5px 30px; }
  .sp-ticks li:before { top:7px; } .sp-ticks li:after { top:11px; }
  .sq-sec { padding:44px 0; }
  .sq h2 { margin-bottom:22px; font-size:clamp(25px, 7vw, 34px); }
  .sq summary { padding:15px 52px 15px 16px; font-size:16px; }
}