/* ============================================================
   PROFITABLE EMAILS — Block Kit stylesheet (shared by both A/B variants)
   Brand palette: teal #1b8896 (screen blocks) · #22aabb (accent)
                  navy #070b54 · orange #df6023 (CTA only)
   Temperatures: WARM SAND bands  ·  COOL SILK-white bands
   Bookend blocks: solid teal (hero + final CTA) · one navy emphasis per page
   ============================================================ */
:root{
  --teal:#1b8896; --teal-deep:#14707c; --teal-solid:#1b8896; --teal-br:#22aabb;
  --navy:#070b54; --orange:#df6023; --orange-deep:#c9531a;
  --paper:#ffffff;
  --sand:#f6f1e8; --sand-deep:#efe7d8; --sand-card:#fffdf9;
  --wash:#f2f8f9; --band:#eaf3f4;
  --muted:#5b6472; --hairline:#e8e0d2; --hairline-cool:#e7edf0; --ink:#20242e; --green:#1f8a5b;
  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:'Raleway', Calibri, 'Segoe UI', system-ui, sans-serif;
  --wrap:64rem; --narrow:46rem; --radius:18px;
  --shadow:0 24px 60px -34px rgba(7,11,84,0.30);
  --shadow-sm:0 14px 34px -22px rgba(80,60,20,0.20);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:18px; line-height:1.65; -webkit-font-smoothing:antialiased;}

h1,h2,h3{font-family:var(--serif); color:var(--teal); font-weight:600; margin:0 0 .5em; line-height:1.14;}
p{margin:0 0 1.05em;}
em{font-style:italic;}
strong{color:var(--navy);}
a{color:var(--teal);}
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 1.6rem;}
.narrow{max-width:var(--narrow); margin-left:auto; margin-right:auto;}
.centred{text-align:center;}
:focus-visible{outline:3px solid var(--teal-br); outline-offset:3px; border-radius:6px;}

/* ---- EYEBROW (shared caps label) ---- */
.eyebrow{display:inline-block; text-transform:uppercase; letter-spacing:.16em;
  font-size:.74rem; font-weight:700; color:var(--teal-deep); margin:0 0 1rem;}

/* ---- CTA buttons ---- */
.cta{display:inline-block; font-family:var(--sans); font-size:1.06rem; font-weight:700; color:#fff;
  background:var(--orange); border:none; border-radius:12px; padding:1rem 2.1rem; cursor:pointer;
  text-decoration:none; box-shadow:0 14px 30px -14px rgba(223,96,35,.55);
  transition:background .15s ease, transform .12s ease, box-shadow .15s ease;}
.cta:hover{background:var(--orange-deep); transform:translateY(-2px);}
.cta:active{transform:translateY(0);}
.cta.onteal{background:#fff; color:var(--teal-deep); box-shadow:0 14px 30px -16px rgba(0,0,0,.4);}
.cta.onteal:hover{background:#fff; color:var(--teal-deep);}
.cta.ghostwhite{background:transparent; color:#fff; border:2px solid rgba(255,255,255,.85); box-shadow:none;}
.cta.ghostwhite:hover{background:rgba(255,255,255,.12); color:#fff;}
.reassure{font-size:.9rem; color:var(--muted); margin:1rem 0 0;}

/* ============================================================
   THE BLOCKS
   ============================================================ */
/* SOLID TEAL — hero / final CTA bookends */
.block--teal{background:var(--teal-solid); color:#fff; padding:4.6rem 0; position:relative; overflow:hidden;}
.block--teal::after{content:""; position:absolute; inset:0; opacity:.55; pointer-events:none;
  background:radial-gradient(70% 55% at 50% 0%, rgba(255,255,255,.16), transparent 60%),
             radial-gradient(60% 60% at 88% 120%, rgba(7,11,84,.22), transparent 60%);}
.block--teal > .wrap{position:relative; z-index:1;}
.block--teal .eyebrow{color:rgba(255,255,255,.85);}
.block--teal h1,.block--teal h2,.block--teal h3{color:#fff;}
.block--teal p{color:rgba(255,255,255,.92);}
.block--teal a:not(.cta){color:#fff;}

/* NAVY — one pivotal emphasis per page */
.block--navy{background:var(--navy); color:#eaecf7; text-align:center; padding:4rem 0; position:relative; overflow:hidden;}
.block--navy::before{content:""; position:absolute; inset:0;
  background:radial-gradient(60% 80% at 50% 0%, rgba(34,170,187,.28), transparent 62%);}
.block--navy .inner{position:relative; max-width:44rem; margin:0 auto;}
.block--navy .eyebrow{color:#9fb7d6;}
.block--navy .big{font-family:var(--serif); font-style:italic; color:#fff;
  font-size:clamp(1.4rem,3.1vw,2rem); line-height:1.3; margin:0;}
.block--navy .big .accent{color:#ffca8a;}
.block--navy p.sub{color:#c7cbe6; font-style:normal; font-family:var(--sans); font-size:1.02rem; margin:.9rem 0 0;}

/* WARM SAND bands */
.block--sand{background:var(--sand); padding:4.2rem 0;}
.block--sand-deep{background:var(--sand-deep); padding:4.2rem 0;}

/* COOL SILK-white band (texture over white) */
.block--silk{background:var(--paper); padding:4.2rem 0; position:relative; overflow:hidden;}
.block--silk::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url('silk-bg.png'); background-size:cover; background-position:center;
  opacity:.22; mix-blend-mode:multiply;}
.block--silk::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(135deg, rgba(27,136,150,.028), transparent 46%),
             radial-gradient(70% 40% at 50% -8%, rgba(34,170,187,.06), transparent 70%);}
.block--silk > .wrap{position:relative; z-index:1;}

/* Plain white band */
.block--white{background:var(--paper); padding:4.2rem 0;}

/* section heading + lead-in (shared) */
h2.sec{text-align:center; font-size:clamp(1.6rem,3.4vw,2.3rem); margin-bottom:.5rem;}
.lead-in{text-align:center; color:var(--muted); max-width:42rem; margin:0 auto 2.4rem;}
.eyebrow.centre{display:block; text-align:center;}

/* hero pieces */
.hook{font-family:var(--serif); font-weight:600; font-size:clamp(2rem,4.6vw,3rem);
  line-height:1.12; letter-spacing:-.01em; max-width:22ch; margin:0 auto .8rem;}
.block--teal.centred .hook, .hero-centre .hook{margin-left:auto; margin-right:auto;}
.hook .accent{color:#ffe4b8; font-style:italic;}
.subhead{font-family:var(--sans); font-size:clamp(1.05rem,2.1vw,1.24rem);
  max-width:44rem; margin:0 auto 1.5rem; line-height:1.6;}
.microline{font-family:var(--serif); font-style:italic; font-size:clamp(1.05rem,2.2vw,1.24rem);
  max-width:42rem; margin:0 auto 1.6rem;}

/* credibility strip */
.cred{background:var(--sand); text-align:center; padding:1.1rem 0; font-size:.98rem; color:var(--navy);
  border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);}
.cred strong{color:var(--teal-deep);}

/* prose + whisper */
.prose{max-width:var(--narrow); margin:0 auto;}
.prose .whisper{font-family:var(--serif); font-style:italic; color:var(--teal-deep);
  font-size:1.35rem; text-align:center; margin:1.4rem auto;}

/* section image */
.secimg{display:block; max-width:440px; width:100%; margin:2.2rem auto 0; border-radius:18px;
  box-shadow:0 20px 46px -26px rgba(7,11,84,.35); overflow:hidden;}
.secimg img{display:block; width:100%; height:auto;}
.secimg.wide{max-width:640px;}

/* symptom list (white cards on sand) */
.symlist{list-style:none; padding:0; margin:1.6rem auto 0; max-width:44rem; display:grid; gap:.7rem;}
.symlist li{background:var(--sand-card); border:1px solid var(--hairline); border-left:4px solid var(--teal-br);
  border-radius:12px; padding:.85rem 1.1rem; box-shadow:var(--shadow-sm); font-size:1.02rem;}

/* reasons list */
.reasons{list-style:none; padding:0; max-width:46rem; margin:0 auto;}
.reasons li{background:var(--sand-card); border:1px solid var(--hairline); border-radius:var(--radius);
  padding:1.2rem 1.4rem; margin-bottom:1rem; box-shadow:var(--shadow-sm);}
.reasons h3{color:var(--navy); font-size:1.08rem; margin:0 0 .3rem;}
.reasons p{margin:0; font-size:.98rem; color:var(--ink);}

/* generic card */
.card{background:var(--sand-card); border:1px solid var(--hairline); border-radius:var(--radius);
  padding:1.7rem 1.7rem; box-shadow:var(--shadow-sm); max-width:44rem; margin:1.6rem auto 0;}
.card h3{color:var(--navy); font-size:1.18rem; margin:0 0 .4rem;}
.card p{margin:0; color:var(--ink);}

/* modules grid */
.journey{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; max-width:56rem; margin:0 auto; padding:0;}
.journey li{list-style:none;}
.mo{background:var(--sand-card); border:1px solid var(--hairline); border-radius:var(--radius);
  padding:1.4rem 1.5rem; height:100%; box-shadow:var(--shadow-sm);
  display:grid; grid-template-columns:2.5rem 1fr; gap:.9rem; align-items:start;
  transition:transform .18s ease, box-shadow .18s ease;}
.mo:hover{transform:translateY(-3px); box-shadow:var(--shadow);}
.mo .mn{display:inline-flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem;
  border-radius:13px; background:linear-gradient(140deg,var(--teal-br),var(--teal-deep)); color:#fff;
  font-family:var(--serif); font-weight:700; font-size:1rem; flex:none;
  box-shadow:0 6px 14px -8px rgba(27,136,150,.7);}
.mo h3{margin:.2rem 0 .35rem; color:var(--navy); font-size:1.08rem;}
.mo p{margin:0; font-size:.95rem; line-height:1.5; color:var(--ink);}
.mo .val{display:inline-block; margin-top:.5rem; font-size:.82rem; font-weight:700; color:var(--teal-deep);}

/* gives / check lists */
.gives{list-style:none; padding:0; max-width:44rem; margin:0 auto;}
.gives li{position:relative; padding:.85rem 0 .85rem 2.4rem; border-bottom:1px solid var(--hairline); font-size:1.02rem;}
.gives li:last-child{border-bottom:none;}
.gives li::before{content:""; position:absolute; left:.15rem; top:1.05rem; width:1.15rem; height:1.15rem;
  border-radius:50%; background:var(--teal)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center/.8rem no-repeat;}
.gives strong{color:var(--navy);}

.check{list-style:none; padding:0; margin:0 auto; max-width:44rem;}
.check li{position:relative; padding:.6rem 0 .6rem 2.3rem; border-bottom:1px solid var(--hairline);
  font-size:1.05rem; color:var(--ink);}
.check li:last-child{border-bottom:none;}
.check li::before{content:""; position:absolute; left:.1rem; top:.85rem; width:1.15rem; height:1.15rem;
  border-radius:50%; background:var(--green)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center/.8rem no-repeat;}

/* note / guarantee card */
.note{max-width:44rem; margin:1.8rem auto 0; background:var(--sand-card); border:1px solid var(--hairline);
  border-top:6px solid var(--orange); border-radius:var(--radius); box-shadow:var(--shadow-sm);
  padding:1.6rem 1.8rem; text-align:center;}
.note .tag{display:inline-block; background:var(--orange); color:#fff; text-transform:uppercase;
  letter-spacing:.14em; font-size:.72rem; font-weight:700; padding:.4rem 1rem; border-radius:100px; margin-bottom:.9rem;}
.note h3{color:var(--navy); font-size:1.25rem; margin:0 0 .5rem;}
.note p{margin:0; font-size:1rem;}
.note.guarantee{border-top-color:var(--green);}
.note.guarantee .tag{background:var(--green);}

/* two-column yes/no */
.twocol{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; max-width:52rem; margin:0 auto;}
.panel{background:var(--sand-card); border:1px solid var(--hairline); border-radius:var(--radius);
  padding:1.7rem 1.6rem; box-shadow:var(--shadow-sm);}
.panel.yes{border-top:4px solid var(--green);}
.panel.no{border-top:4px solid var(--orange);}
.panel h3{font-size:1.2rem; margin:0 0 .8rem;}
.panel.yes h3{color:var(--teal-deep);}
.panel.no h3{color:var(--orange-deep);}
.panel .check li{font-size:1rem;}
.panel .check.cross li::before{background:var(--orange-deep)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E")
    center/.8rem no-repeat;}

/* testimonials */
.quotes{display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.3rem; max-width:60rem; margin:0 auto;}
.quote{background:var(--sand-card); border:1px solid var(--hairline); border-radius:var(--radius);
  padding:1.6rem 1.7rem; box-shadow:var(--shadow-sm);}
.quote p{font-size:1rem; line-height:1.6; margin:0 0 .8rem;}
.quote .who{font-family:var(--serif); color:var(--teal-deep); font-weight:700; font-size:.98rem;}

/* authority / about */
.auth-grid{max-width:52rem; margin:0 auto; display:grid; grid-template-columns:240px 1fr; gap:2.4rem; align-items:start;}
.auth-grid .imgwrap{position:relative;}
.auth-grid .imgwrap::before{content:""; position:absolute; inset:-14px -14px 10px -10px; z-index:0;
  background:linear-gradient(140deg, rgba(34,170,187,.20), rgba(27,136,150,.05)); border-radius:22px;}
.auth-grid img{position:relative; z-index:1; width:100%; height:auto; border-radius:16px; box-shadow:var(--shadow-sm);
  border:5px solid #fff; outline:1px solid var(--hairline);}
.authority .eyebrow{margin-bottom:.3rem;}
.authority .name{font-family:var(--serif); color:var(--teal); font-weight:700; font-size:1.5rem; margin:0 0 .6rem;}
.authority p{color:var(--navy); font-size:1.02rem;}

/* offer box */
.enrolbar{max-width:40rem; margin:0 auto 1.4rem; text-align:center; background:var(--sand-card);
  border:1px solid var(--hairline); border-radius:12px; padding:.8rem 1.2rem; color:var(--teal-deep);
  font-weight:600; font-size:.98rem;}
.offer{max-width:40rem; margin:0 auto; background:#fff; border:1px solid var(--hairline);
  border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;}
.offer .top{background:linear-gradient(150deg,var(--teal-br),var(--teal-deep)); color:#fff; text-align:center; padding:1.9rem 1.5rem;}
.offer .top h3{color:#fff; font-size:1.6rem; margin:0 0 .2rem;}
.offer .price{font-family:var(--serif); font-size:3rem; font-weight:700; line-height:1; margin:.4rem 0 0;}
.offer .price small{font-size:1rem; font-weight:600; opacity:.9;}
.offer .subprice{font-family:var(--sans); font-size:.92rem; color:#eaf3f4; font-weight:600; margin:.5rem 0 0;}
.offer .body{padding:1.8rem 1.8rem 2rem;}
.offer .inc{list-style:none; padding:0; margin:0 0 1.2rem;}
.offer .inc li{position:relative; padding:.5rem 0 .5rem 2rem; border-bottom:1px solid var(--hairline); font-size:1rem;}
.offer .inc li:last-child{border-bottom:none;}
.offer .inc li::before{content:""; position:absolute; left:0; top:.72rem; width:1.1rem; height:1.1rem;
  border-radius:50%; background:var(--teal)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center/.75rem no-repeat;}
.offer .inc li strong{color:var(--navy);}
.offer .cta{display:block; text-align:center; width:100%;}
.offer .undercta{text-align:center; font-size:.85rem; color:var(--muted); margin:1rem 0 0; line-height:1.5;}

/* FAQ */
.faq{max-width:44rem; margin:0 auto;}
.faq details{background:var(--sand-card); border:1px solid var(--hairline); border-radius:12px;
  margin-bottom:.8rem; padding:0 1.3rem; box-shadow:var(--shadow-sm);}
.faq summary{cursor:pointer; list-style:none; padding:1.1rem 0; font-weight:700; color:var(--navy);
  font-size:1.05rem; position:relative; padding-right:2rem;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; position:absolute; right:.1rem; top:50%; transform:translateY(-50%);
  color:var(--teal); font-size:1.5rem; font-weight:400; line-height:1;}
.faq details[open] summary::after{content:"\2013";}
.faq details p{margin:0 0 1.1rem; color:var(--ink); font-size:1rem;}

/* trust seal slot (paid TrustedSite / site seal — shows on every page) */
.trustbar{background:var(--paper); border-top:1px solid var(--hairline-cool); text-align:center; padding:1.6rem 0;}
.trustbar .seal{display:inline-flex; align-items:center; justify-content:center; gap:.6rem; min-height:54px;}
.trustbar .seal img{max-height:54px; width:auto; display:inline-block;}
.trustbar .cap{display:block; margin:.5rem 0 0; font-size:.8rem; color:var(--muted);}
/* auto-hide the bar until the real paid seal is pasted into #trust-seal */
.trustbar:has(#trust-seal:empty){display:none;}

/* footer */
footer{background:var(--navy); color:#c7cbe6; padding:2.4rem 0; text-align:center; font-size:.85rem;}
footer a{color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35);}
footer .brand{font-family:var(--serif); color:#fff; font-size:1.05rem; letter-spacing:.02em; margin-bottom:.5rem;}
footer .legal{margin-top:.55rem; font-size:.8rem;}

@media (max-width:820px){ .quotes{grid-template-columns:1fr;} }
@media (max-width:720px){
  .journey{grid-template-columns:1fr;}
  .twocol{grid-template-columns:1fr;}
  .auth-grid{grid-template-columns:1fr; gap:1.8rem;}
  .auth-grid .imgwrap{max-width:240px; margin:0 auto;}
}
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important; scroll-behavior:auto!important;} }