/* ========================================================================== Source: sales-page-styles.css ========================================================================== */ /* ============ General Sales Page, Base Stylesheet ============ */ *{box-sizing:border-box;font-family:"Inter",sans-serif;font-weight:400;font-style:normal} body{padding:0;margin:0;color:#212529;background:#fff} h1,h2,h3,p{margin:0;padding:0} img{display:block;max-width:100%} button{border:none;outline:none;cursor:pointer;font-family:inherit} b{font-weight:700} a{color:inherit;text-decoration:none} :root{ --ink:#0c2539; --ink-soft:#333; --muted:#5a6b7a; --bg:#fff; --bg-soft:#f6f9fc; --line:#e2e8f0; --brand:#0e7cc5; /* hydro blue */ --brand-deep:#0a4a78; --brand-light:#bbe5ff; --action:#ff6a3d; /* coral CTA */ --action-deep:#e8541f; --night:#0a1a2c; /* hero / guarantee / limit dark */ --night-2:#0f2440; --warn-orange:#ff8b3d; } /* ======= layout primitives ======= */ .container{padding:0 20px;max-width:1280px;width:100%;margin:0 auto} @media (max-width:768px){ html,body{overflow-x:clip;max-width:100%} .container{padding:0 12px} } /* ======= placeholder ======= */ .media-bg{ position:relative;background:repeating-linear-gradient(135deg,#e6eef6 0 14px,#eef3f8 14px 28px); color:#475569;font-family:ui-monospace,"JetBrains Mono",Menlo,monospace;font-size:11px;letter-spacing:.04em;text-transform:uppercase; display:flex;align-items:center;justify-content:center;text-align:center;padding:14px; border-radius:12px;border:1px dashed #c8d4e0; } /* ======= announcebar (slim dark banner, very top) ======= */ .announcebar{background:var(--night);color:#fff;text-align:center;padding:9px 16px;font-weight:700;font-size:13.5px;letter-spacing:.04em;line-height:1.3} .announcebar b{color:var(--warn-orange);font-weight:700} @media (max-width:768px){.announcebar{letter-spacing:0;white-space:nowrap;overflow:hidden;padding:9px 16px}} @media (max-width:430px){.announcebar{font-size:14px}} @media (max-width:390px){.announcebar{font-size:13px}} @media (max-width:375px){.announcebar{font-size:12px}} @media (max-width:320px){.announcebar{font-size:11px}} /* ======= selling-fast-bar ======= */ .selling-fast-bar{font-size:14px} @media (max-width:430px){.selling-fast-bar{font-size:12px!important}.selling-fast-bar svg{width:12px!important;height:12px!important}} @media (max-width:390px){.selling-fast-bar{font-size:11px!important}.selling-fast-bar svg{width:11px!important;height:11px!important}} @media (max-width:375px){.selling-fast-bar{font-size:10.5px!important}.selling-fast-bar svg{width:10.5px!important;height:10.5px!important}} @media (max-width:320px){.selling-fast-bar{font-size:9px!important}.selling-fast-bar svg{width:9px!important;height:9px!important}} /* ======= trustbar (top utility strip above header) ======= */ .trustbar{background:var(--bg-soft);border-bottom:1px solid var(--line)} .trustbar>.container{max-width:1720px} .trustbar__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 0;font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)} .trustbar__item{display:flex;align-items:center;gap:9px;white-space:nowrap} .trustbar__item svg{flex-shrink:0;color:var(--brand)} /* trustbar mobile infinite scroll */ @keyframes trustbar-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} .trustbar__dup{display:none} @media (max-width:768px){ .trustbar .container{overflow:hidden;padding:0;max-width:100%} .trustbar__inner{justify-content:flex-start!important;gap:40px!important;width:max-content;animation:trustbar-scroll 14s linear infinite;flex-wrap:nowrap!important} .trustbar__dup{display:flex} } /* ======= header (matches .header pattern) ======= */ .header{padding:18px 0;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20} .header>.container{max-width:1720px} .header__inner{display:flex;justify-content:space-between;align-items:center;gap:20px} .header__navigation{display:flex;justify-content:space-between;align-items:center;max-width:1110px;width:100%;gap:20px} .header__menu{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0;list-style:none;max-width:645px;width:100%;flex:1} .header__menu-link{font-weight:600;font-size:16px;line-height:150%;color:#171717} .header__menu-link:hover{color:var(--brand)} .header__logo{display:flex;align-items:center;gap:10px;font-family:"Anek Latin",sans-serif;font-weight:800;font-size:28px;color:var(--ink);letter-spacing:-.02em;line-height:1} .header__button{box-shadow:0 4px 4px 0 rgba(255,106,61,.25);background:var(--action);border-radius:6px;padding:10px 18px;font-weight:700;font-size:15px;line-height:150%;color:#fff;display:flex;align-items:center;gap:8px;flex-shrink:0;transition:background .15s,transform .15s} .header__button:hover{background:var(--action-deep);transform:translateY(-1px)} /* hamburger + mobile menu */ .header__hamburger{display:none;background:none;border:none;cursor:pointer;padding:4px;color:var(--ink)} .header__hamburger svg{width:28px;height:28px} .header__mobile-menu{position:fixed;top:0;left:0;right:0;z-index:100;background:#fff;transform:translateY(-100%);transition:transform .3s ease;box-shadow:0 4px 20px rgba(0,0,0,.15)} .header__mobile-menu.open{transform:translateY(0)} .header__mobile-menu-top{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)} .header__mobile-close{background:none;border:none;cursor:pointer;padding:4px;color:var(--ink)} .header__mobile-close svg{width:28px;height:28px} .header__mobile-nav{display:flex;flex-direction:column} .header__mobile-link{padding:18px 20px;font-family:"Anek Latin",sans-serif;font-weight:700;font-size:18px;color:var(--ink);border-bottom:1px solid var(--line);text-decoration:none} .header__mobile-link:last-child{border-bottom:0} @media(max-width:980px){.header__hamburger{display:block}} /* ======= hero (matches .hero pattern: dark bg, video overlay, gradient wash, big title) ======= */ .hero{position:relative;background:var(--night);overflow:hidden} .hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(90deg,var(--night) 0%,var(--night) 42%,rgba(10,26,44,.85) 55%,rgba(10,26,44,0) 72%)} .hero::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none; background: linear-gradient(65deg,rgba(51,197,243,.32) 0%,rgba(51,197,243,.16) 14%,rgba(51,197,243,0) 42%), linear-gradient(104deg,rgba(14,124,197,0) 58%,rgba(14,124,197,.22) 72%,rgba(14,124,197,.35) 100%)} .hero-video{position:absolute;top:0;right:0;bottom:0;width:55%;z-index:1;pointer-events:none} .hero__inner{position:relative;z-index:4;padding:84px 0 76px;max-width:780px;width:100%} .hero__rated{display:inline-flex;align-items:center;font-weight:500;font-size:15px;line-height:130%;color:#fff;margin-bottom:14px;gap:8px;padding:0;background:none;border:none}s:999px;backdrop-filter:blur(6px); .hero__rated-image svg{width:14px;height:14px;color:#ffb648} .hero__title{font-family:"Anek Latin",sans-serif;font-weight:700;font-size:72px;line-height:.95;letter-spacing:-0.02em;color:#fff;margin-bottom:18px;text-wrap:balance} .hero__title em{font-style:normal;background:linear-gradient(110deg,#7fe2ff,#33c5f3 60%,#0e7cc5);-webkit-background-clip:text;background-clip:text;color:transparent} .hero__mobile-img{display:none;margin-bottom:20px;border-radius:14px;overflow:hidden} .hero__subtitle{font-weight:500;font-size:20px;line-height:140%;color:rgba(255,255,255,.85);margin-bottom:32px;max-width:540px} .hero__checks{display:flex;flex-direction:column;gap:14px;margin-bottom:28px} .hero__checks-item{display:flex;align-items:center;gap:14px;font-weight:500;font-size:18px;line-height:130%;color:#fff} .hero__checks-item svg{width:24px;height:24px;flex-shrink:0;color:#33c5f3} .hero__message{max-width:508px;width:100%;display:flex;justify-content:center;margin-bottom:18px} .hero__message-body{display:inline-flex;align-items:center;padding:10px 16px;font-weight:500;font-size:14px;line-height:140%;color:#fff;background:rgba(255,138,82,.18);border:1px solid rgba(255,138,82,.45);border-radius:10px;gap:8px} .hero__message-body svg{width:14px;height:16px;color:#ff8b3d;flex-shrink:0} /* ======= cta button (the magenta CTA in original; we use coral) ======= */ .cta-group{margin:0 auto;max-width:420px} .cta-group-hero{max-width:480px;width:100%;margin:0} .cta-button{ padding:20px 16px;font-family:"Montserrat",sans-serif;font-weight:800;font-size:22px;line-height:100%; text-transform:uppercase;text-align:center;color:#fff;background:var(--action);border-radius:10px;width:100%; letter-spacing:.02em;display:flex;align-items:center;justify-content:center;gap:10px; box-shadow:0 8px 18px -4px rgba(255,106,61,.5), inset 0 1px 0 rgba(255,255,255,.22); transition:background .15s,transform .15s,box-shadow .15s; } .cta-button:hover{background:var(--action-deep);transform:translateY(-2px);box-shadow:0 14px 26px -6px rgba(255,106,61,.55), inset 0 1px 0 rgba(255,255,255,.25)} .cta-button svg{width:18px;height:18px;background:rgba(255,255,255,.25);border-radius:50%;padding:6px;width:32px;height:32px;flex-shrink:0} .cta-group-hero .cta-button{font-size:clamp(16px,5.5vw,26px);padding:22px 16px;white-space:nowrap} .cta-bottom{width:fit-content;margin:14px auto 0;display:flex;align-items:center;gap:8px;color:#333;font-size:12.5px;line-height:150%;flex-wrap:wrap;justify-content:center} .cta-group-hero .cta-bottom{color:#fff;font-size:15px} .cta-ellipse{width:14px;height:14px;display:inline-block;border-radius:50%;background:#3bd66b;box-shadow:0 0 0 4px rgba(59,214,107,.18)} .cta-stock{display:inline-flex;gap:3px;margin:0 4px} .cta-low{color:#ef4444;font-weight:700} /* white LOW on dark backgrounds */ .cta-group-hero .cta-low, .comp .cta-low{color:#fff} .cta-stock i{width:14px;height:12px;background:#d9d9d9;border-radius:2px;display:block} .cta-stock i.on{background:#fc2201} .shipByDate{font-weight:700} /* ======= partners ======= */ .partners{padding:33px 0;background:#fff;border-bottom:1px solid var(--line)} .partners__title{font-weight:700;font-size:24px;line-height:103%;letter-spacing:-.02em;text-transform:capitalize;color:#848484;flex-shrink:0} /* ======= section base, eyebrow + title ======= */ .title-header{font-weight:700;font-size:14px;line-height:208%;letter-spacing:0.16em;text-transform:uppercase;text-align:center;color:var(--brand);margin-bottom:8px} .title{font-family:"Anek Latin",sans-serif;font-weight:700;font-size:54px;line-height:.95;letter-spacing:-.025em;text-align:center;color:var(--ink);text-wrap:balance;max-width:900px;margin:0 auto} .title em{font-style:normal;font-weight:inherit;color:var(--brand)} .reviews__title em,.why-it-works__title em,.how__box-title em,.hero__title em{font-style:normal;font-weight:inherit} .title br{display:none} .comp__title--mobile br{display:revert} /* ======= description ======= */ .description{padding:56px 0 40px} .description__inner{text-align:center} /* Two feature columns flanking the product image. The columns share row tracks via subgrid so every left feature and its right counterpart sit on the same baseline: icons on two clean rails, headings level, rows starting and ending together. Copy still has to be written to matching line counts, this only guarantees the geometry. */ .description__boxes{display:grid;grid-template-columns:minmax(0,380px) auto minmax(0,380px);grid-template-rows:repeat(3,auto);justify-content:space-between;align-items:start;gap:32px 30px;margin:48px 0;text-align:left} .description__box{max-width:380px;width:100%;display:grid;grid-template-rows:subgrid;grid-row:1/-1;gap:32px} .description__boxes>.desc-desktop-img{grid-row:1/-1;align-self:center} .description__box-row{display:flex;align-items:flex-start;gap:16px} .description__box-row>.description__icon{width:54px;height:54px;border-radius:14px;background:linear-gradient(135deg,#e7f4fc,#bbe5ff);color:var(--brand-deep);display:grid;place-items:center;flex-shrink:0} .description__box-content h3{font-family:"Anek Latin",sans-serif;font-weight:700;font-size:22px;line-height:120%;color:var(--ink);margin-bottom:8px;letter-spacing:-.01em} .description__box-content p{font-weight:400;font-size:16px;line-height:155%;color:var(--muted)} /* ======= how (alternating rows) ======= */ .how{padding:48px 0 48px;background:#fff} .how__inner{text-align:center} .how__subtitle{font-weight:500;font-size:22px;line-height:140%;text-align:center;color:var(--muted);max-width:780px;width:100%;margin:14px auto 56px} .how__boxes{display:flex;flex-direction:column;gap:56px;margin-bottom:56px;text-align:left} .how__box{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:64px} .how__box:nth-of-type(2n){flex-direction:row} .how__box-image{width:50%;border-radius:24px;aspect-ratio:1.15/1;background:linear-gradient(135deg,#e7f4fc,#bbe5ff);overflow:hidden} .how__box-content{max-width:480px;width:100%} .how__box-title{font-family:"Anek Latin",sans-serif;font-weight:700;font-size:34px;line-height:115%;color:var(--ink);margin-bottom:14px;letter-spacing:-.02em} .how__box-text{font-weight:400;font-size:18px;line-height:155%;color:var(--muted)} /* ======= split (yellow band in original, we use a soft cream to keep clean theme) ======= */ .split{background:#fff7e8} .split__inner{display:flex;align-items:stretch} .split__image{width:50%;align-self:stretch} .split__image .media-bg{height:100%;border:0;border-radius:0;background: radial-gradient(800px 500px at 30% 20%, #ffe4b8 0%, #ffcc7a 50%, #f08c2c 100%); color:rgba(0,0,0,.55)} .split__content{max-width:600px;width:100%;margin-left:48px;padding:40px 24px 40px 0} .split__title{font-family:"Anek Latin",sans-serif;font-weight:700;font-size:38px;line-height:110%;letter-spacing:-.02em;color:var(--ink);margin:12px 0 28px;text-wrap:balance} .split__boxes{display:flex;flex-direction:column;gap:18px} .split__box{display:flex;gap:18px;align-items:center} .split__box+.split__box{border-top:1px solid color-mix(in srgb,var(--brand-deep) 15%,transparent);padding-top:18px} .split__box b{font-family:"Anek Latin",sans-serif;font-weight:800;font-size:52px;line-height:1;letter-spacing:-.02em;color:var(--brand-deep);flex:0 0 120px;font-variant-numeric:tabular-nums} .split__box span{font-weight:500;font-size:17px;line-height:140%;color:var(--ink)} /* ======= set (use cases) ======= */ .set{padding:56px 0 40px} .set__inner{text-align:center} .set__boxes{margin-top:44px;display:flex;justify-content:space-evenly;gap:24px;text-align:left} .set__boxes-wrapper{display:contents} .set__box{max-width:340px;width:100%;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:transform .2s, box-shadow .2s, border-color .2s} .set__box:hover{transform:translateY(-3px);box-shadow:0 18px 38px -16px rgba(10,26,44,.18);border-color:#cfe4f5} .set__box-image{aspect-ratio:308/220;background:linear-gradient(135deg,#e7f4fc,#bbe5ff);position:relative;overflow:hidden} .set__box-body{padding:24px} .set__box-title{font-family:"Anek Latin",sans-serif;font-weight:700;font-size:24px !important;line-height:120%;color:var(--ink);margin:0 0 8px;letter-spacing:-.01em} .set__box-text{font-weight:400;font-size:18px;line-height:150%;color:var(--muted)} /* ======= marquee (scrolling value-prop ticker) ======= */ .marquee{background:var(--night);overflow:hidden;padding:22px 0;display:flex;white-space:nowrap;user-select:none} .marquee__track{display:flex;align-items:center;flex-shrink:0;animation:marquee-scroll 34s linear infinite} .marquee__item{font-family:"Anek Latin",sans-serif;font-weight:700;font-size:24px;line-height:1;letter-spacing:-.01em;color:#fff;padding:0 36px;display:inline-flex;align-items:center;gap:12px} .marquee__item svg{width:22px;height:22px;color:#33c5f3;flex-shrink:0} .marquee:hover .marquee__track{animation-play-state:paused} @keyframes marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ======= comp (4-col x 6-row grid w/ highlighted middle col) ======= */ .comp{padding:52px 0;background:var(--bg-soft)} .comp__inner{text-align:center} /* ======= reviews ======= */ .reviews{padding:56px 0;background:#fff} .reviews__title{font-family:"Anek Latin",sans-serif;font-weight:700;font-size:46px;line-height:110%;text-align:center;color:var(--ink);letter-spacing:-.025em;margin:0 auto;max-width:880px;text-wrap:balance} .reviews__boxes{margin:40px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .reviews__box{background:#fff;border:1px solid var(--line);border-radius:20px;display:flex;flex-direction:column;overflow:hidden;transition:box-shadow .2s, border-color .2s} .reviews__box:hover{box-shadow:0 20px 40px -16px rgba(10,26,44,.15);border-color:#cfe4f5} .reviews__box-header{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,#e7f4fc,#bbe5ff)} .reviews__box-data{position:absolute;border-radius:10px;padding:0 5px;background:#fff;left:14px;bottom:14px;display:flex;gap:8px;align-items:center;height:35px;box-shadow:0 6px 14px -4px rgba(10,26,44,.18)} .reviews__box-data>div{display:flex;flex-direction:row;align-items:center;gap:6px} .reviews__box-avatar{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:10px;font-family:"Anek Latin",sans-serif;line-height:1;text-align:center;background:linear-gradient(135deg,#33c5f3,var(--brand-deep));flex-shrink:0;padding:0} .reviews__box-avatar.reviews__box-avatar--b{background:linear-gradient(135deg,#3ec98a,#1a7a4d)} .reviews__box-avatar.reviews__box-avatar--c{background:linear-gradient(135deg,#ff9c5b,#e85c1f)} .reviews__box-name{font-weight:700;font-size:12px;color:#000;line-height:1;white-space:nowrap} .reviews__box-verification{display:flex;align-items:center;gap:3px;font-weight:500;font-size:11px;line-height:1;color:#1ac70e;margin-top:0;white-space:nowrap} .reviews__box-body{padding:22px 22px 24px;display:flex;flex:1;flex-direction:column} .reviews__box-stars{display:flex;gap:1px;margin-bottom:10px} .reviews__box-stars svg{width:16px;height:16px;color:#ff9911} .reviews__box-title{font-family:"Anek Latin",sans-serif;font-weight:700;font-size:19px;color:var(--ink);margin:0 0 10px;letter-spacing:-.01em} .reviews__box-review{font-weight:400;font-size:15.5px;line-height:155%;color:var(--ink-soft)} /* ======= expert (founder/specialist endorsement) ======= */ .expert{padding:48px 0;background:var(--bg-soft)} .expert__inner{display:flex;align-items:center;gap:64px;max-width:1120px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:28px;overflow:hidden;box-shadow:0 30px 70px -40px rgba(10,26,44,.3)} .expert__media{position:relative;width:42%;align-self:stretch;min-height:440px;flex-shrink:0} .expert__media-badge{position:absolute;left:24px;bottom:24px;display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:9px 16px 9px 12px;font-weight:700;font-size:14px;color:var(--ink);box-shadow:0 10px 26px -10px rgba(10,26,44,.45)} .expert__media-badge svg{width:20px;height:20px;color:var(--brand)} .expert__body{flex:1;padding:56px 56px 56px 0} .expert__eyebrow{font-weight:700;font-size:14px;line-height:1;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);margin-bottom:14px} .expert__name{font-family:"Anek Latin",sans-serif;font-weight:700;font-size:40px;line-height:1.04;letter-spacing:-.025em;color:var(--ink);margin-bottom:6px} .expert__role{font-weight:600;font-size:17px;color:var(--muted);margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid var(--line)} .expert__quote{position:relative;font-weight:400;font-size:18px;line-height:165%;color:var(--ink-soft);max-width:560px;text-align:left;margin-left:0;padding-left:0} .expert__quote span{display:block;overflow:visible} .expert__sign{margin-top:24px;display:flex;flex-direction:column;gap:2px} .expert__sign-mark{font-family:"Dancing Script",cursive;font-weight:700;font-size:46px;line-height:1;color:var(--brand-deep)} .expert__sign-name{font-weight:700;font-size:15px;color:var(--ink);letter-spacing:.01em} @media (max-width:980px){ .expert{padding:56px 0} .expert__inner{flex-direction:column;gap:0} .expert__media{width:100%;min-height:0;aspect-ratio:16/11} .expert__body{padding:40px 28px} } /* ======= faq ======= */ .faq{padding:56px 0;background:#fff} .faq__title{font-family:"Anek Latin",sans-serif;font-weight:700;font-size:44px;line-height:104%;text-align:center;color:var(--ink);margin-bottom:44px;letter-spacing:-.025em} .faq__boxes{max-width:880px;width:100%;margin:0 auto} .faq__box{border-bottom:1px solid rgba(33,37,41,.18);padding:22px 4px} .faq__box:first-child{border-top:1px solid rgba(33,37,41,.18)} .faq__box-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer;gap:16px} .faq__box-header:hover .faq__box-question{color:var(--brand)} .faq__box-question{font-family:"Anek Latin",sans-serif;font-weight:700;font-size:20px;line-height:130%;color:var(--ink);letter-spacing:-.01em;transition:color .15s} .faq__box-icon{width:32px;height:32px;border-radius:50%;background:#eaf3fb;color:var(--brand-deep);display:grid;place-items:center;flex-shrink:0;transition:transform .25s, background .15s} .faq__box-icon svg{width:14px;height:14px;transition:transform .25s} .faq__box-icon svg .faq-vertical{transition:opacity .25s} .faq__box.open .faq__box-icon{background:var(--brand);color:#fff} .faq__box.open .faq__box-icon svg{transform:none} .faq__box.open .faq__box-icon svg .faq-vertical{opacity:0} .faq__box-footer{max-height:0;overflow:hidden;transition:max-height .35s ease} .faq__box-footer-inner{padding:14px 4px 4px;font-size:16px;line-height:160%;color:var(--muted)} .faq__box.open .faq__box-footer{max-height:400px} /* ======= Trustpilot-style reviews ======= */ .tp-reviews{padding:56px 0;background:#fff} .tp-reviews__eyebrow{font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;text-align:center;color:#00b67a;margin-bottom:8px} .tp-reviews__title{font-family:"Anek Latin",sans-serif;font-weight:700;font-size:clamp(32px,4vw,48px);line-height:1;letter-spacing:-.025em;text-align:center;color:var(--ink);margin-bottom:40px} .tp-reviews__top{display:grid;grid-template-columns:1fr auto 1fr;gap:40px;align-items:start;margin-bottom:48px;max-width:1080px;margin-left:auto;margin-right:auto} /* rating bars */ .tp-reviews__bars{display:flex;flex-direction:column;gap:10px} .tp-reviews__bar-row{display:flex;align-items:center;gap:12px} .tp-reviews__bar-label{font-weight:600;font-size:14px;color:var(--ink);min-width:120px} .tp-reviews__bar{flex:1;height:24px;background:#dcdce6;border-radius:3px;overflow:hidden;min-width:160px} .tp-reviews__bar-fill{display:block;height:100%;background:#00b67a;border-radius:3px} .tp-reviews__bar-num{font-family:"Anek Latin",sans-serif;font-weight:700;font-size:16px;color:var(--ink);min-width:28px;text-align:right} /* overall score */ .tp-reviews__overall{text-align:center;padding:0 20px} .tp-reviews__overall-num{font-family:"Anek Latin",sans-serif;font-weight:800;font-size:56px;line-height:1;color:var(--ink);display:block} .tp-reviews__overall-stars{display:flex;gap:3px;justify-content:center;margin:8px 0} .tp-reviews__overall-meta{font-size:14px;color:var(--muted);line-height:1.4} /* photo strip */ .tp-reviews__photos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .tp-reviews__photo{aspect-ratio:1;border-radius:8px;min-width:0} /* review cards grid */ .tp-reviews__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1080px;margin:0 auto} .tp-reviews__card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden} .tp-reviews__card-img{aspect-ratio:4/5;border-radius:0} .tp-reviews__card-body{padding:16px} .tp-reviews__card-user{display:flex;align-items:center;gap:8px;margin-bottom:8px} .tp-reviews__card-avatar{width:32px;height:32px;border-radius:50%;background:var(--night);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;flex-shrink:0} .tp-reviews__card-name{font-weight:700;font-size:14px;color:var(--ink)} .tp-reviews__card-verified{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:#00b67a;margin-left:auto;white-space:nowrap} .tp-reviews__card-verified svg{width:18px;height:18px;flex-shrink:0} .tp-reviews__card-stars{display:flex;align-items:center;gap:3px;margin-bottom:10px;flex-wrap:nowrap} .tp-reviews__card-stars svg{width:20px;height:20px;color:#fff;background:#00b67a;border-radius:3px;padding:2px;flex-shrink:0} .tp-reviews__card-date{font-size:12px;color:var(--muted);font-weight:500;margin-left:6px;white-space:nowrap} .tp-reviews__card-title{font-family:"Anek Latin",sans-serif;font-weight:700;font-size:16px;color:var(--ink);margin-bottom:6px} .tp-reviews__card-text{font-size:14px;line-height:1.55;color:var(--muted)} @media(max-width:900px){ .tp-reviews__top{grid-template-columns:1fr;gap:28px} .tp-reviews__grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:580px){ .tp-reviews__grid{grid-template-columns:1fr} } /* ======= footer (STANDARD: identical on every sales template; only logo + --night vary) ======= */ .footer{padding:48px 0 36px;background:var(--night, rgb(12 30 56));color:#fff;text-align:center} .footer .container{text-align:center} .footer__logo{margin:0 auto 20px;display:flex;justify-content:center;align-items:center} .footer__logo img{height:36px;width:auto;display:block} .footer__logo .header__logo{color:#fff;padding:0;background:none;gap:10px} .footer__logo a,.footer__logo a:hover{color:#fff;text-decoration:none} .footer__nav{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px 28px;max-width:940px;margin:0 auto 18px} .footer__nav a{font-weight:700;font-size:15px;color:#fff;text-decoration:none;opacity:.9;letter-spacing:.01em} .footer__nav a:hover{opacity:1;color:#fff} .footer__copy{font-weight:700;font-size:15px;color:#fff;opacity:1;margin:0 auto 18px;text-align:center} .footer__legal{font-weight:500;font-size:13px;line-height:1.6;color:rgba(255,255,255,.5);max-width:860px;width:100%;margin:0 auto 26px;text-align:center} .footer__payments{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:0} .footer__payments img{height:28px;width:auto;display:block;border-radius:4px} @media(max-width:768px){.footer__legal{font-size:14px}} @media(max-width:680px){.footer__nav{gap:10px 18px}.footer__nav a{padding:8px 4px;line-height:1.3}} /* ======= animations (from original) ======= */ .cta-button--pulse{animation:pulse 1.6s infinite} .cta-ellipse--glowing{animation:glowing 1.4s infinite} @keyframes pulse{0%,100%{transform:scale(.97)}50%{transform:scale(1)}} @keyframes glowing{0%,100%{opacity:.55}50%{opacity:1}} /* ======= responsive (cleaned up vs original) ======= */ @media (max-width:1200px){ .hero__title{font-size:60px} .hero-video{display:none} .hero::after{display:none} .description__boxes{display:flex;flex-direction:column;gap:32px} .description__box{display:flex;flex-direction:column} .description__box{max-width:none} .reviews__boxes{grid-template-columns:repeat(2,1fr)} } @media (max-width:980px){ .header__navigation{display:none} .hero__inner{padding:64px 0;max-width:none} .hero__title{font-size:48px} .hero__subtitle{font-size:17px} .hero__checks-item{font-size:16px} .cta-group-hero .cta-button{font-size:22px} .how__box{flex-direction:column;gap:24px} .how__box:nth-of-type(2n){flex-direction:column} .how__box-image,.how__box-content{width:100%;max-width:none} .split__inner{flex-direction:column} .split__image{width:100%;aspect-ratio:16/10} .split__content{margin:0;padding:48px 0} .set__boxes{flex-wrap:wrap;justify-content:center} .set__box{max-width:calc(50% - 12px)} } @media (max-width:768px){ .title{font-size:clamp(34px,9.8vw,42px);font-weight:800;line-height:1.02;letter-spacing:-.03em;max-width:min(calc(100vw - 24px),400px)} .title br{display:revert} .faq__title,.tp-reviews__title{font-size:clamp(34px,9.8vw,42px);font-weight:800;line-height:1.02;letter-spacing:-.03em;max-width:min(calc(100vw - 24px),400px);margin-left:auto;margin-right:auto} .split__title{font-size:clamp(34px,9.8vw,42px);font-weight:800;line-height:1.02;letter-spacing:-.03em;max-width:min(calc(100vw - 24px),400px)} } @media (max-width:680px){ .title br{display:revert} .title-header{font-size:13px;letter-spacing:.16em;margin-bottom:12px} .reviews__title{font-size:26px} .hero__title{font-size:34px} .hero__mobile-img{display:block} .hero__inner{padding:48px 0 40px} .hero__subtitle{font-size:15px;margin-bottom:0;text-align:left} .hero__checks{gap:10px;margin-bottom:20px;margin-top:10px} .hero__checks-item{font-size:15px;gap:10px} .hero__checks-item svg{width:20px;height:20px} .reviews__boxes{grid-template-columns:1fr} .set__box{max-width:none} .split__box b{font-size:44px;flex-basis:100px} .split__box span{font-size:16px} .split__box{gap:16px} .split__content{padding:32px 0} /* CTA buttons, full width, proper touch targets, always one line */ .cta-button{width:100%!important;font-size:17px;padding:10px 16px;min-height:54px;white-space:nowrap;justify-content:center!important;gap:10px!important;box-sizing:border-box!important;line-height:1} .cta-group-hero .cta-button{font-size:17px;padding:10px 16px;min-height:54px} .cta-group{width:100%!important;max-width:none!important;box-sizing:border-box!important} /* Buy card button: centered with 10px gap, keeps its size */ #addCart{justify-content:center!important;gap:10px!important} .cta-bottom{flex-wrap:nowrap!important;white-space:nowrap;font-size:clamp(9px,2.5vw,12.5px)!important;gap:4px!important;width:100%!important;justify-content:center!important} .cta-ellipse{width:10px!important;height:10px!important} .cta-stock i{width:10px!important;height:9px!important} .cta-stock{gap:2px!important;margin:0 2px!important} /* Benefits / How section */ .how__subtitle{font-size:17px;margin:10px auto 32px} .how__box-image{min-height:282px;aspect-ratio:376/282 !important} .how__box-content{padding:16px 0 4px} .how__box-title{font-size:26px} .how__box-text{font-size:15px;margin-bottom:0} /* Use cases */ .set__boxes{gap:16px} .set__box{padding:0} /* Trustpilot reviews, single column, compact */ .tp-reviews__grid{grid-template-columns:1fr;gap:14px} .tp-reviews__title{margin-bottom:24px} .tp-reviews__top{gap:20px} .tp-reviews__bar-label{min-width:90px;font-size:12px} .tp-reviews__bar{min-width:100px;height:20px} .tp-reviews__bar-num{font-size:14px} .tp-reviews__overall-num{font-size:44px} .tp-reviews__photos{grid-template-columns:repeat(3,1fr);gap:6px} .tp-reviews__card-img{aspect-ratio:16/10} /* FAQ */ .faq__title{margin-bottom:28px} .faq__box-question{font-size:16px} .faq__box-footer-inner{font-size:14px} /* Expert */ .expert__body{padding:28px 20px} .expert__name{font-size:30px} .expert__role{font-size:15px} /* Section padding, tighter on mobile */ .description,.how,.set,.comp,.reviews,.faq,.tp-reviews{padding-top:40px;padding-bottom:40px} .expert{padding:32px 0} /* Marquee */ .marquee__item{font-size:18px;padding:0 24px} /* Footer */ .footer{padding:32px 0 20px} .footer__logo{margin-bottom:16px} /* Sticky mobile CTA bar */ .mobile-sticky-cta{position:fixed;bottom:0;left:0;right:0;z-index:100;background:#fff;padding:12px 15px;display:flex;flex-direction:column;align-items:center;box-shadow:0 -4px 24px rgba(0,0,0,.15);border-top:1px solid var(--line)} .mobile-sticky-cta__inner{width:100%;max-width:100%} .mobile-sticky-cta__btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:var(--action);color:#fff;font-family:"Anek Latin",sans-serif;font-weight:900;font-size:17px;line-height:1;padding:10px 16px;min-height:54px;border-radius:14px;border:2px solid var(--action-deep);cursor:pointer;text-transform:uppercase;letter-spacing:.02em;box-shadow:0 4px 14px rgba(232,84,31,.3);box-sizing:border-box} .mobile-sticky-cta__arrow{width:28px;height:28px;background:rgba(255,255,255,.25);border-radius:50%;display:grid;place-items:center;flex-shrink:0} .mobile-sticky-cta__arrow svg{width:16px;height:16px} body{padding-bottom:0} .footer__payments{padding-bottom:80px} } /* ======= social proof rows: avatar stack must never overlap the stars ======= The overlapping avatar stack is built with a negative margin-right on each face. The LAST face must reset that margin, or it pulls whatever follows (Trustpilot stars, rating number) underneath it. Generated brand pages keep inheriting the negative margin on the final face, so this reset is forced here with !important to beat the inline style. Nothing after the stack is allowed to shrink into it either. */ .buy-social-proof .buy-avatar-img:last-child{margin-right:0 !important} .buy-social-proof .buy-avatar-img{flex-shrink:0} .buy-social-left>div:first-child{flex-shrink:0;margin-right:2px} .buy-social-left>div:first-child+div{flex-shrink:0} .buy-social-proof svg{flex-shrink:0} /* ======= no orphans (global) ======= No single word may sit alone on the last line of any text block, at any viewport width. Headlines balance across lines; body copy uses pretty, which reserves words to keep the last line from running short. Short labels never wrap at all. When CSS alone cannot fix a line, put a non-breaking space between the final two words in the markup. */ h1, h2, h3, .title, .hero__title, .split__title, .reviews__title, .faq__title, .tp-reviews__title, blockquote, figcaption{text-wrap:balance} p, li, .description, .tp-reviews__card p{text-wrap:pretty} .cta-button, .selling-fast-bar, .title-header{text-wrap:nowrap} @media (max-width:560px){ .cta-button, .selling-fast-bar{text-wrap:balance} } /* ============================================================ COMPACT SPACING The house spacing rhythm for every brand built from this template. It lived in brand.css, which made a shared default look like one brand's override and copied it into each new brand file. Verified equivalent: moving it here flips no winning declaration at any width the sheets mention. ============================================================ */ .hero__inner{ padding: 42px 0 38px; }.hero__title{ margin-bottom: 10px; }.hero__subtitle{ margin-bottom: 16px; }.hero__checks{ gap: 9px; margin-bottom: 14px; }.hero__message{ margin-bottom: 9px; }.partners{ padding: 28px 0; }.description{ padding: 50px 0 25px; }.description__boxes{ margin: 24px 0; }.description__box{ max-width: 440px; } @media (min-width: 769px) {.description__boxes{ gap: 24px; }.description__box{ gap: 18px; } }.how{ padding: 50px 0 25px; }.how__subtitle{ margin: 7px auto 28px; }.how__boxes{ gap: 28px; margin-bottom: 28px; }.split__content{ padding: 36px 28px 36px 0; }.split__title{ margin: 6px 0 14px; }.set{ padding: 50px 0; }.set__boxes{ margin-top: 22px; }.marquee{ padding: 14px 0; }.comp{ padding: 50px 0; }.reviews{ padding: 50px 0; }.reviews__boxes{ margin: 22px 0; }.expert{ padding: 24px 0; }.tp-reviews{ padding: 40px 0; }.tp-reviews__title{ margin-bottom: 20px; }.tp-reviews__top{ margin-bottom: 24px; }.tp-reviews__bar-label{ width: 150px; min-width: 150px; flex-shrink: 0; }.tp-reviews__bar{ min-width: 0; }.faq{ padding: 35px 0 28px; }.faq__title{ margin-bottom: 22px; }.faq__box{ padding: 12px 4px; } /* ========================================================================== Source: joyhnny-brand.css ========================================================================== */ /* ============================================================ SALES BRAND CSS, Joyhnny Egg Cooker Load AFTER sales-page-styles.css. ============================================================ */ @media (max-width: 768px){ .hero__checks { gap: 4px; }.hero__checks-item{ font-size: 12px; line-height: 1.2; padding: 0; }.hero__checks-item svg{ width: 20px; height: 20px; } } /* 1. BRAND TOKENS */ :root{ --brand: #E2571B; --brand-deep: #B8410F; --brand-light: #FFD9C2; --night: #1E1814; --night-2: #2B221C; --ink: #1E1814; --bg-soft: #FFF3EA; --muted: #6B5A4E; --line: rgba(226,87,27,.15); --action: #ff6a3d; --action-deep: #e8541f; --warn-orange: #ff8b3d; } /* 2. BRAND-COLOURED CHROME These carry brand colour, so they live here and not in the base sheet. */ .announcebar{ background: #FFE3CF; color: #111; }.trustbar__icon{ stroke: #E2571B; } /* 3. Keyframes */ @keyframes pulse{ 0%, 100% { transform: scale(1); box-shadow: 0 8px 18px -4px rgba(255,106,61,.5), inset 0 1px 0 rgba(255,255,255,.22); }50%{ transform: scale(.97); box-shadow: 0 5px 14px -4px rgba(255,106,61,.4), inset 0 1px 0 rgba(255,255,255,.22); } } @keyframes glowing { 0%, 100% { opacity: .55; box-shadow: 0 0 0 3px rgba(59,214,107,.18); } 50% { opacity: 1; box-shadow: 0 0 0 5px rgba(59,214,107,.32); } } @keyframes v3-ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* 3. HERO */ .hero{ background: #FFF3EA; }.hero::after{ background: none !important; }.hero::before{ background: none !important; }.hero-video{ position: absolute; }.hero-video::before{ display: none !important; }.hero__title{ color: #1E1814; }.hero__title em{ color: #1E1814; text-shadow: none; background: none; -webkit-background-clip: unset; background-clip: unset; }.hero__subtitle{ color: #1E1814; opacity: 0.82; }.hero__checks-item{ color: #1E1814; }.hero__rated{ color: #1E1814; }.hero__rated-image svg{ color: #ff9911; }.hero__rated-image svg.tp-strip{ width: auto; height: 14px !important; }.hero__message-body{ color: #1E1814; background: rgba(30,24,20,.08); border-color: rgba(30,24,20,.18); }.hero__inner .cta-bottom{ color: #1E1814; } /* 4. HEADER */ .header{ padding: 10px 0; }.header > .container{ max-width: 1280px; }.header__inner{ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }.header__logo{ justify-self: start; }.header__navigation{ justify-self: center; }.header__cta-group{ justify-self: end; }.header__hamburger{ display: none; }.header__menu{ flex: none; max-width: none; gap: 40px; } @media (max-width: 768px) {.header__inner{ display: flex !important; justify-content: space-between; align-items: center; }.header__navigation{ display: none; } } /* 5. PARTNERS */ .partners{ background: #F5F4F2; padding: 28px 0; border-bottom: 1px solid var(--line); border-bottom-width: 0; }.partners__wrap{ max-width: 1280px; width: 100%; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 48px; flex-wrap: nowrap; }.partners__wrap .partners__title{ font-family: 'Anek Latin', sans-serif; font-size: 24px; font-weight: 700; letter-spacing: -.01em; color: #4A3A30; flex-shrink: 0; line-height: 1; }.partners__ticker{ position: relative; overflow: hidden; flex: 1; min-width: 0; }.partners__ticker::before, .partners__ticker::after{ content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; }.partners__ticker::before{ left: 0; background: linear-gradient(to right, #ebebeb, transparent); }.partners__ticker::after{ right: 0; background: linear-gradient(to left, #ebebeb, transparent); }.partners__ticker-track{ display: flex; align-items: center; gap: 64px; width: max-content; animation: v3-ticker-scroll 32s linear infinite; }.partners__ticker-track:hover{ animation-play-state: paused; }.partners__ticker-item{ flex: 0 0 auto; display: flex; align-items: center; }.partners__ticker-item img{ max-height: 52px; width: auto; display: block; opacity: .65; filter: grayscale(1); } /* 6. SECTION TWEAKS */ .description{ background: linear-gradient(180deg, #FFE6D6, #FFFFFF); }.description__box-row{ background: transparent; border-radius: 0; padding: 12px 0; box-shadow: none; border: none; }.description__box-row > .description__icon{ background: linear-gradient(135deg, #FFF3EA, #FFD9C2); color: var(--brand-deep); border-radius: 12px; overflow: hidden; width: 52px; height: 52px; flex-shrink: 0; }.description .title{ text-align: center; margin-left: auto; margin-right: auto; }.how__box-image{ background: linear-gradient(135deg, #FFF3EA, #FFD9C2); flex: 0 0 44%; width: 44%; aspect-ratio: 3/2 !important; }.how__box{ gap: 75px; justify-content: space-between; align-items: flex-start; }.how__box-content{ flex: 0 0 calc(56% - 75px); max-width: none; }.split{ background: #F6E4D8; }.split__box b{ color: var(--brand-deep); font-size: 48px; min-width: 100px; line-height: 1; }.split__box span{ font-size: 18px; line-height: 1.35; text-align: left; }.set__box{ max-width: none; }.set__box-image{ background: linear-gradient(135deg, #FFF3EA, #FFD9C2); aspect-ratio: 308/280; }.set__box-body{ padding: 10px 20px 20px; }.set__box-title{ font-size: 24px; margin-bottom: 5px; }.set__box-text{ font-size: 16px; line-height: 1.5; }.marquee__item svg{ color: #E2571B; }.tp-reviews__bar-fill{ background: #00b67a; }.expert__media{ min-height: unset; height: 100%; }.expert__role{ text-decoration: none; border-bottom: none; }.faq__box-footer{ display: none; }.faq__box.open .faq__box-footer{ display: block; }.faq__box.open .faq-vertical{ display: none; }.footer{ padding: 48px 0 36px; background: rgb(30 24 20); }.footer .container{ text-align: center; }.footer__logo{ margin: 0 auto 20px; display: flex; justify-content: center; }.footer__nav{ display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px 28px; max-width: 940px; margin: 0 auto 18px; }.footer__nav a{ font-weight: 700; font-size: 15px; color: #fff; text-decoration: none; opacity: .9; letter-spacing: .01em; }.footer__nav a:hover{ opacity: 1 !important; color: #fff !important; }.footer__copy{ font-weight: 700; font-size: 15px; color: #fff; opacity: 1; margin: 0 auto 18px; }.footer__legal{ font-size: 13px; font-weight: 500; line-height: 1.6; color: rgba(255,255,255,.5); max-width: 700px; margin: 0 auto 26px; }.footer__payments{ display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 0; }.footer__payments img{ height: 28px; width: auto; border-radius: 4px; } /* 8. RESPONSIVE */ @media (max-width: 560px){ .hero { overflow-x: hidden; } } @media (max-width: 480px) {.faq__box-footer-inner, .reviews__box-review, .tp-reviews__card-text, .hero__subtitle, .how__box-text, .set__box-text, .expert__quote{ font-size: 15px !important; line-height: 1.6 !important; }p, li{ line-height: 1.6 !important; } } @media (max-width: 700px) {.footer__logo{ align-items: center; }.footer__payments{ justify-content: center; } } @media (max-width: 768px) {.why-it-works__media{ width: 100%; min-height: 240px; }.why-it-works__imgframe{ min-height: 240px; }.why-it-works__copy{ width: 100%; }.why-it-works{ padding: 50px 0 0; }.hero__mobile-img{ display: block; margin-bottom: 20px; }.hero__inner .hero__rated{ display: flex; flex-wrap: nowrap !important; align-items: center; gap: 4px !important; white-space: nowrap; }.hero__inner .hero__rated-image{ display: flex; flex-wrap: nowrap; gap: 1px; flex-shrink: 0; }.hero__inner .hero__rated-image svg{ width: clamp(10px, 2.8vw, 16px); height: clamp(10px, 2.8vw, 16px) !important; }.hero__inner .hero__rated-image svg.tp-strip{ width: auto !important; height: clamp(10px, 2.8vw, 16px) !important; }.hero__inner .hero__rated span:last-child{ font-size: clamp(10px, 2.6vw, 13px); white-space: nowrap; }.hero__inner .hero__message-body{ flex-wrap: nowrap; font-size: 12px; padding: 8px 10px; gap: 5px; white-space: nowrap; overflow: hidden; }.hero__inner .hero__message-body svg{ flex-shrink: 0; width: 11px; height: 18px; }.hero__inner .cta-bottom{ flex-wrap: nowrap; font-size: clamp(10px, 2.5vw, 13px) !important; gap: 5px !important; white-space: nowrap; width: 100%; justify-content: center; }.hero__inner .cta-low{ white-space: nowrap; }.partners{ padding: 12px 0 !important; }.partners__wrap{ padding: 0 12px; gap: 8px; flex-wrap: wrap; flex-direction: column; align-items: center; }.partners__wrap .partners__title{ font-size: 18px !important; display: block; text-align: center; width: 100%; opacity: 1; visibility: visible; padding: 8px 0 4px; line-height: 1.3; position: relative; z-index: 10; order: -1; }.partners__wrap .partners__ticker{ order: 1; width: 100%; }.partners__ticker-track{ gap: 32px; }.partners__ticker-item{ padding: 0 16px; }.partners__ticker-item img{ max-height: 64px; width: auto; }.split__content{ padding: 24px 0 !important; }.description__inner{ padding: 0; box-sizing: border-box; }.set__inner{ padding: 0; box-sizing: border-box; }.how__inner{ padding: 0; box-sizing: border-box; }.faq .container{ padding: 0 12px; box-sizing: border-box; }.tp-reviews .container{ padding: 0 12px; box-sizing: border-box; }.comp .container{ padding: 0 12px; box-sizing: border-box; }.cta-group-hero{ align-items: center; text-align: center; width: 100%; }.cta-group-hero .cta-bottom{ justify-content: center; }.cta-group{ display: flex !important; flex-direction: column; align-items: center; margin-left: auto; margin-right: auto; }.cta-group .cta-button{ width: 100%; box-sizing: border-box; }.cta-group .cta-bottom{ display: flex; justify-content: center; text-align: center; width: 100%; flex-wrap: wrap !important; gap: 6px !important; }.how__inner .cta-group, .description__inner .cta-group{ width: calc(100% + 24px) !important; max-width: calc(100% + 24px) !important; margin-left: -12px !important; margin-right: -12px !important; align-items: center !important; box-sizing: border-box !important; }.how__inner .cta-group .cta-button, .description__inner .cta-group .cta-button{ width: calc(100% - 40px) !important; max-width: 480px !important; margin: 0 auto !important; }.how__inner .cta-group .cta-bottom, .description__inner .cta-group .cta-bottom{ justify-content: center !important; width: 100% !important; }.how__box-image{ width: 100% !important; max-width: 100%; }.how__box-text{ width: 100%; max-width: 100%; text-align: left; }.how__boxes{ gap: 36px !important; }.set__box{ width: 100%; max-width: 100%; padding: 0; overflow: hidden; }.set__boxes{ flex-direction: column; align-items: stretch; }.set__box-image{ margin: 0; border-radius: 0; }.set__box-image img{ width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }.comp{ overflow-x: hidden; overflow-y: visible; }.guarantee-card{ flex-direction: column; padding: 20px !important; text-align: center; gap: 16px !important; }.guarantee-card img{ width: 160px !important; height: 160px !important; }.guarantee-card > div:last-child p{ width: 100%; }.guarantee-card > div:last-child h2{ font-size: 24px; }#buy{ padding: 50px 0; }#addCart{ width: 100%; }.buy-card{ flex-direction: column; min-height: unset !important; overflow: visible !important; }.buy-card__image{ display: none; }.buy-card__image--mobile{ display: block !important; margin-top: -8px !important; margin-bottom: 12px !important; }.buy-card__content{ padding: 28px 20px !important; width: 100%; box-sizing: border-box; }.buy-card__content .cta-button{ width: 100%; box-sizing: border-box; }.buy-social-proof{ gap: clamp(4px, 1.5vw, 10px) !important; padding: 7px 10px !important; width: 100%; box-sizing: border-box; flex-wrap: nowrap; }.buy-social-proof .buy-avatar-img{ width: clamp(20px, 5vw, 28px); height: clamp(20px, 5vw, 28px); }.buy-social-proof b{ font-size: clamp(10px, 2.8vw, 13px); }.expert__inner{ height: unset; min-height: unset; }.expert__media{ width: 100%; min-height: 0 !important; height: auto; aspect-ratio: 4/3; }.expert__body{ padding: 32px 24px !important; display: block; }.expert__role{ width: 100% !important; }.expert__quote span{ width: 100%; font-size: 18px; }.tp-reviews__bar-label{ width: 100px !important; min-width: 100px !important; font-size: 13px; }.description__boxes{ gap: 0; }.description__box{ gap: 0; }.description__box-row > .description__icon{ min-height: 45px; min-width: 45px; width: 45px; height: 45px; }.description{ padding-top: 20px; padding-bottom: 20px; }.footer__legal{ font-size: 14px; }.buy-social-proof{ justify-content: space-between; gap: 0 !important; padding: 10px 5px !important; }.buy-social-left{ display: flex; align-items: center; gap: 8px; width: 50%; }.buy-social-instock{ width: 50%; justify-content: center; }.buy-trust-bullets{ grid-template-columns: 1fr 1fr !important; gap: 10px 10px !important; }.comp-cta-group{ display: none !important; }.description-cta-group{ display: none !important; } } @media (max-width: 768px) {.hero__inner .hero__message-body.selling-fast-bar{ font-size: clamp(12px, 3.95vw, 16px) !important; font-weight: 600; padding: 8px 8px !important; gap: 6px !important; }.hero__inner .hero__message-body.selling-fast-bar svg{ width: clamp(12px, 3.95vw, 16px) !important; height: auto !important; } } @media (min-width: 769px) {.hero__inner .hero__message-body.selling-fast-bar{ font-size: 16.5px; font-weight: 600; padding: 9px 16px; gap: 8px; }.hero__inner .hero__message-body.selling-fast-bar svg{ width: 16px; height: auto; } } @media (max-width: 430px) {.how__box-title{ font-size: 26px; }.how__box-text{ font-size: 16px !important; }.how-review-text{ font-size: 15px; }.how-review-name{ font-size: 15px; } } @media (max-width: 390px) {.how__box-title{ font-size: 24px; }.how__box-text{ font-size: 15px !important; }.how-review-text{ font-size: 15px; }.how-review-name{ font-size: 15px; } } @media (max-width: 375px) {.how__box-title{ font-size: 22px; }.how__box-text{ font-size: 15px; }.how-review-text{ font-size: 15px; }.how-review-name{ font-size: 15px; } } @media (max-width: 320px) {.how__box-title{ font-size: 20px; }.how__box-text{ font-size: 15px; }.how-review-text{ font-size: 15px; }.how-review-name{ font-size: 15px; } } @media (max-width: 430px) {.hero__inner .hero__subtitle{ font-size: 16px !important; } } @media (max-width: 390px) {.hero__inner .hero__subtitle{ font-size: 15px !important; } } @media (max-width: 375px) {.hero__inner .hero__subtitle{ font-size: 15px; } } @media (max-width: 320px) {.hero__inner .hero__subtitle{ font-size: 14px !important; } } @media (max-width: 430px) {.hero__inner .hero__checks-item{ font-size: 16px !important; } } @media (max-width: 390px) {.hero__inner .hero__checks-item{ font-size: 14px !important; } } @media (max-width: 375px) {.hero__inner .hero__checks-item{ font-size: 13.5px !important; } } @media (max-width: 320px) {.hero__inner .hero__checks-item{ font-size: 11.25px !important; } } @media (min-width: 769px) {.why-it-works{ padding: 80px 0; } } @media (max-width: 768px) {.results-scroll-section{ padding-top: 50px !important; }section#overview.description{ padding-top: 50px; }section.how{ padding-top: 40px; padding-bottom: 40px; } } @media (max-width: 768px) {.tp-reviews__card-title{ font-size: 24px; }.tp-reviews__card-text{ font-size: 18px !important; }.reviews__box-title{ font-size: 20px; }.reviews__box-review{ font-size: 16px !important; }.faq__box-question{ font-size: 20px; }.faq__box-footer-inner{ font-size: 16px !important; }.faq{ padding: 35px 0 28px; }.tp-reviews{ padding-bottom: 0 !important; }.guarantee-card{ padding-top: 0 !important; gap: 0 !important; border-radius: 0 !important; }.guarantee-card p{ font-size: 16px; } } @media (max-width: 430px) {.reviews__box-title{ font-size: 20px; }.reviews__box-review{ font-size: 16px; }.set__box-title{ font-size: 26px !important; }.set__box-text{ font-size: 18px !important; }.tp-reviews__card-title{ font-size: 22px !important; }.tp-reviews__card-text{ font-size: 18px; }.faq__box-question{ font-size: 19px !important; }.faq__box-footer-inner{ font-size: 16px; } } @media (max-width: 390px) {.reviews__box-title{ font-size: 16px !important; }.reviews__box-review{ font-size: 14px !important; }.set__box-title{ font-size: 22px !important; }.set__box-text{ font-size: 16px !important; }.tp-reviews__card-title{ font-size: 19px !important; }.tp-reviews__card-text{ font-size: 16px !important; }.faq__box-question{ font-size: 17.5px !important; }.faq__box-footer-inner{ font-size: 15.5px !important; } } @media (max-width: 375px) {.reviews__box-title{ font-size: 16px; }.reviews__box-review{ font-size: 14px; }.set__box-title{ font-size: 21px !important; }.set__box-text{ font-size: 15px !important; }.tp-reviews__card-title{ font-size: 19px; }.tp-reviews__card-text{ font-size: 16px; }.faq__box-question{ font-size: 16.5px !important; }.faq__box-footer-inner{ font-size: 14.5px !important; } } @media (max-width: 320px) {.reviews__box-title{ font-size: 14px !important; }.reviews__box-review{ font-size: 12px !important; }.set__box-title{ font-size: 17px !important; }.set__box-text{ font-size: 14px !important; }.tp-reviews__card-title{ font-size: 15.5px !important; }.tp-reviews__card-text{ font-size: 14px !important; }.faq__box-question{ font-size: 13.5px !important; }.faq__box-footer-inner{ font-size: 12px !important; } } @media (max-width: 768px) {.expert__quote span{ font-size: 18px; }.expert__name{ font-size: 30px; }.expert__role{ font-size: 18px; } } @media (max-width: 430px) {.expert__quote span{ font-size: 16px; }.expert__name{ font-size: 28px; }.expert__role{ font-size: 16px !important; } } @media (max-width: 390px) {.expert__quote span{ font-size: 15px; }.expert__name{ font-size: 26px; }.expert__role{ font-size: 15px !important; } } @media (max-width: 375px) {.expert__quote span{ font-size: 14px; }.expert__name{ font-size: 24px; }.expert__role{ font-size: 14px !important; } } @media (max-width: 320px) {.expert__quote span{ font-size: 12px; }.expert__name{ font-size: 20px; }.expert__role{ font-size: 12px !important; } } @media (max-width: 768px) {.buy-subtitle{ font-size: 16px !important; } } @media (max-width: 430px) {.buy-subtitle{ font-size: 16px; } } @media (max-width: 390px) {.buy-subtitle{ font-size: 15.5px !important; } } @media (max-width: 375px) {.buy-subtitle{ font-size: 14.5px !important; } } @media (max-width: 320px) {.buy-subtitle{ font-size: 12px !important; } } @media (max-width: 768px) {.buy-eyebrow{ font-size: 12px !important; } } @media (max-width: 430px) {.buy-eyebrow{ font-size: 11px !important; } } @media (max-width: 390px) {.buy-eyebrow{ font-size: 10px !important; } } @media (max-width: 375px) {.buy-eyebrow{ font-size: 10px; } } @media (max-width: 320px) {.buy-eyebrow{ font-size: 9px !important; } } /* Section headline typography lives in sales-page-styles.css (mobile section type system). Brand files set colors and brand-specific components only, never section headline sizes. */ @media (max-width: 980px) {.header__cta-group{ display: none !important; }.header__hamburger{ display: block; } } /* AUTO WARM OVERRIDES: base-sheet blue tints remapped to the Joyhnny warm palette */ html body .media-bg{background:repeating-linear-gradient(135deg,#f6eee6 0 14px,#eef3f8 14px 28px);color:#695547;border:1px dashed #e0d4c8} html body .cta-ellipse{background:#6bd63b;box-shadow:0 0 0 4px rgba(107,214,59,.18)} html body .description__box-row>.description__icon{background-image:linear-gradient(135deg,#fcf4e7,#ffe5bb)} html body .set__box:hover{box-shadow:0 18px 38px -16px rgba(44,26,10,.18);border-color:#f5e4cf} html body .reviews__box:hover{box-shadow:0 20px 40px -16px rgba(44,26,10,.15);border-color:#f5e4cf} html body .reviews__box-header{background-image:linear-gradient(135deg,#fcf4e7,#ffe5bb)} html body .reviews__box-data{box-shadow:0 6px 14px -4px rgba(44,26,10,.18)} html body .reviews__box-avatar{background-image:linear-gradient(135deg,#f3c533,var(--brand-deep))} html body .reviews__box-avatar.reviews__box-avatar--b{background-image:linear-gradient(135deg,#8ac93e,#4d7a1a)} html body .expert__media-badge{box-shadow:0 10px 26px -10px rgba(44,26,10,.45)} html body .faq__box-icon{background:#fbf3ea} html body .why-intro-p,html body .why-solution-p{color:#37291f} html body .vs-divider::before,html body .vs-divider::after{background:rgba(56,30,12,.14)} @media (max-width: 768px){html body .why-intro-p{color:#37291f !important}} @media (max-width: 768px){html body .vs-divider::before,html body .vs-divider::after{background:rgba(56,30,12,.14)}} @media (max-width: 768px){html body .why-solution-rows{border-top:1px solid rgba(56,30,12,.12)}} @media (max-width: 768px){html body .why-solution-row:not(:last-child)::before{border-left:2px dashed rgba(212,111,26,.4)}} @media (max-width: 768px){html body .why-it-works__eyebrow::before,html body .why-it-works__eyebrow::after{background:rgba(212,111,26,.4)}} @media (max-width: 768px){html body .why-3up__item + .why-3up__item::before{background:rgba(56,30,12,.12)}} @media (max-width: 768px){html body .how__box-title::after{background:rgba(56,30,12,.14)}} @media (max-width: 768px){html body .how__pill{background:#fff4eb}} html body .title-header::before,html body .title-header::after{background:rgba(212,111,26,.5)} html body .tp-reviews__eyebrow::before,html body .tp-reviews__eyebrow::after{background:rgba(122,182,0,.5)} html body .reviews-eyebrow::before,html body .reviews-eyebrow::after{background:rgba(212,111,26,.5)} html body .how__box-title::after{background:rgba(56,30,12,.14)} html body .how__pill{background:#fff4eb} html body .results-eyebrow::before,html body .results-eyebrow::after{background:rgba(212,111,26,.5)} @media (max-width: 768px){html body .expert-rule{background:rgba(56,30,12,.14)}} html body .reviews__carousel-dots button{background:#e9d6c8} @media (max-width: 768px){html body .reviews-eyebrow::before,html body .reviews-eyebrow::after{background:rgba(212,111,26,.4)}} html body .set__carousel-dots button{background:#e9d6c8} html body .how__carousel-dots button{background:#e9d6c8} @media (max-width: 768px){html body .ct-mob-hinfo--us{background:#fff4eb}} @media (max-width: 768px){html body .ct-mob-grid{border-bottom:1px solid rgba(56,30,12,0.12)}} @media (max-width: 768px){html body .ct-mob-divider{background:rgba(56,30,12,0.12)}} @media (max-width: 768px){html body .ct-mob-cell--us{background:#fff4eb}} html body .why-solution{background:#fff4eb} html body .ct-desk__feature{border-top:1px solid #f0e8dd} html body .ct-desk__feature--last{border-bottom:1px solid #f0e8dd} html body .ct-desk__cols{background-image:linear-gradient(#f0e8dd 1px,transparent 1px),linear-gradient(#f0e8dd 1px,transparent 1px),linear-gradient(#f0e8dd 1px,transparent 1px),linear-gradient(#f0e8dd 1px,transparent 1px),linear-gradient(#f0e8dd 1px,transparent 1px),linear-gradient(#f0e8dd 1px,transparent 1px),linear-gradient(#f0e8dd 1px,transparent 1px),linear-gradient(#f0e8dd 1px,transparent 1px)} html body .ct-desk__panel--us{background:#fff4eb} html body .ct-desk__cell{border-top:1px solid #f0e8dd} html body .ct-desk__cell--last{border-bottom:1px solid #f0e8dd} html body .ct-desk__panel--th{background:rgba(255,244,235,0.5)} html body .buy-section{background:#fef5f0} html body .buy-badge{background:#fff4eb} html body .buy-social-divider{background:#f0e8e2} html body .buy-instock-dot{background:#5ec522;box-shadow:0 0 0 3px rgba(94,197,34,.2)} html body .instock-label{color:#5ec522} html body .faq-cta{background:#fff2e8} html body .msc-meta__dot{background:#5ec522} @media (min-width: 769px){html body .hero{background:var(--bg-soft) !important}} @media (max-width: 768px){html body .hero__mobile-img{background:var(--brand-light) !important}} html body .hero-video{max-width:50% !important} @media (min-width: 769px){html body .hero__title em{background:none !important;color:var(--brand) !important;-webkit-text-fill-color:var(--brand) !important}} /* ========================================================================== Source: sales-page-sections.css ========================================================================== */ /* ============================================================ GENERAL SALES, SECTION STYLES Loads AFTER brand.css. That order is deliberate: these rules used to live in a