/* Kizu Bunion Corrector — Sales Page (US) Single stylesheet for index.html. Sections in original cascade order: 1. base + components 2. brand overrides 3. section overrides 4. export layer (migrated inline styles + JS-driven responsive rules) */ /* ===== 1. base + components (was 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){.container{padding:0 12px}} /* ======= placeholder ======= */ .ph{ 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:8px 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);border:1px solid rgba(255,255,255,.12)} .hero__rated-image{display:inline-flex;gap:1px} .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 social proof bar */ .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-phero-title em,.how__box-title em,.hero__title em{font-style:normal;font-weight:inherit} .title br{display:none} .reviews__title br{display:none} @media (max-width:768px){.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:stretch} .description__box-row{display:flex;align-items:flex-start;gap:16px} .description__box-row>.iconBox{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__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__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 b{font-family:"Anek Latin",sans-serif;font-weight:800;font-size:52px;line-height:1;letter-spacing:-.02em;color:var(--brand-deep);min-width:120px} .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)} /* ======= setup (3-step how-to) ======= */ @media(max-width:680px){ .setup__grid::-webkit-scrollbar{display:none} } /* ======= 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} .comp__grid::before{content:"";position:absolute;grid-column:2/3;grid-row:1/-1;inset:0;background:var(--night);z-index:0;border-radius:0} .comp__grid-item:last-child:not(.--th){border-bottom:0} /* ======= guarantee (dark bg, badge+content) ======= */ .guarantee__seal::before{display:none} /* ======= 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-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)} /* ======= limit (dark hero w/ countdown) ======= */ /* ======= 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} } /* ======= softcta (presale → sales handoff band) ======= */ /* ======= 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,.footer__links 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}} /* ======= toast ======= */ /* ======= animations (from original) ======= */ .pulse{animation:pulse 1.6s infinite} .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} .reviews__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:48px;min-width:90px} .split__box span{font-size:16px} .split__box{gap:16px} .split__content{padding:32px 0} /* Hero social proof bar, stack on mobile */ /* 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__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} /* Guarantee */ /* Buy block */ /* 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} /* UGC cards */ /* 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: #mobileStickyBar is shown from 768px down, but these rules sat in the 680px block above — between 681px and 768px the bar rendered unstyled in flow under the footer (bare text + a full-width arrow SVG). Keep them at the same breakpoint that shows the bar. */ @media (max-width:768px){ .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} } /* ===================================================================== PRESALE / ADVERTORIAL (presale.html only) Faithful re-creation of the MozzShield advertorial layout, skinned to the Jetterix brand tokens. Hand-rolled grid + utilities (no Bootstrap). ===================================================================== */ /* --- advertorial strip + header --- */ /* --- editorial title + byline --- */ /* --- two-column body --- */ /* --- article (left) --- */ .adv-article a:not(.adv-btn){color:var(--brand);font-weight:600;text-decoration:underline} /* tick list */ /* reviews */ /* product box + offer */ .adv-btn:hover{background:var(--action-deep);transform:translateY(-2px)} /* --- right rail (sticky) --- */ /* --- mobile fixed bottom CTA bar --- */ /* --- advertorial footer (disclaimers) --- */ /* ---- advertorial responsive ---- */ /* --- authentic Facebook-style comments (bottom of article) --- */ .fbc__name:hover{text-decoration:underline;cursor:pointer} .fbc__act:hover{text-decoration:underline} /* --- offer block with countdown (richer proBox) --- */ /* --- highlighter for persuasive lines --- */ /* ======= translation safety net (FR / DE only, English untouched) ======= Copy length parity is the primary fix, see skills/translate-pages. These rules only stop a marginal overrun from clipping. They are not a licence to ship long translations. */ /* ======= 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__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; } /* ===== 2. brand overrides (was brand.css) ===== */ /* ============================================================ SALES BRAND CSS, Kizu Bunion Corrector 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: #0D9488; --brand-deep: #0B6F66; --brand-light: #BFE8E1; --night: #11212E; --night-2: #16324A; --ink: #11212E; --bg-soft: #E7F7F4; --muted: #4B6B73; --line: rgba(26,111,212,.15); --action: #FF6A00; --action-deep: #E05F00; --warn-orange: #FF8A2E; } /* 2. BRAND-COLOURED CHROME These carry brand colour, so they live here and not in the base sheet. */ .announcebar{ background: #CDEFE8; color: #16232E; }.trustbar__icon{ stroke: #14958A; } /* 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: #E7F7F4; }.hero::after{ background: none !important; }.hero::before{ background: none !important; }.hero-video{ position: absolute; }.hero-video::before{ display: none !important; }.hero__title{ color: #11212E; }.hero__title em{ color: #11212E; text-shadow: none; background: none; -webkit-background-clip: unset; background-clip: unset; }.hero__subtitle{ color: #11212E; opacity: 0.82; }.hero__checks-item{ color: #11212E; }.hero__rated{ color: #11212E; }.hero__rated-image svg{ color: #ff9911; }.hero__rated-image svg.tp-strip{ width: auto; height: 14px !important; }.hero__message-body{ color: #11212E; background: rgba(12,30,56,.08); border-color: rgba(12,30,56,.18); }.hero__inner .cta-bottom{ color: #11212E; } /* 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; }.v3-partners-wrap{ max-width: 1280px; width: 100%; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 48px; flex-wrap: nowrap; }.v3-partners-wrap .partners__title{ font-family: 'Anek Latin', sans-serif; font-size: 24px; font-weight: 700; letter-spacing: -.01em; color: #2e4a55; flex-shrink: 0; line-height: 1; }.v3-ticker{ position: relative; overflow: hidden; flex: 1; min-width: 0; }.v3-ticker::before,.v3-ticker::after{ content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; }.v3-ticker::before{ left: 0; background: linear-gradient(to right, #ebebeb, transparent); }.v3-ticker::after{ right: 0; background: linear-gradient(to left, #ebebeb, transparent); }.v3-ticker-track{ display: flex; align-items: center; gap: 64px; width: max-content; animation: v3-ticker-scroll 32s linear infinite; }.v3-ticker-track:hover{ animation-play-state: paused; }.v3-ticker-item{ flex: 0 0 auto; display: flex; align-items: center; }.v3-ticker-item img{ max-height: 52px; width: auto; display: block; opacity: .65; filter: grayscale(1); } /* 6. SECTION TWEAKS */ .description{ background: linear-gradient(180deg, #DFF5F1, #FFFFFF); }.description__box-row{ background: transparent; border-radius: 0; padding: 12px 0; box-shadow: none; border: none; }.description__box-row > .iconBox{ background: linear-gradient(135deg, #e8f2ff, #c8dcff); 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; text-wrap: nowrap; max-width: none; }.description .title br{ display: revert; }.how__box-image{ background: linear-gradient(135deg, #E7F7F4, #BFE8E1); 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: #D7EFEA; }.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, #E7F7F4, #BFE8E1); 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: #14958A; }.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(12 30 56); }.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-pheromones-imgs{ width: 100%; min-height: 240px; }.why-phero-imgframe{ min-height: 240px; }.why-phero-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; }.v3-partners-wrap{ padding: 0 12px; gap: 8px; flex-wrap: wrap; flex-direction: column; align-items: center; }.v3-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; }.v3-partners-wrap .v3-ticker{ order: 1; width: 100%; }.v3-ticker-track{ gap: 32px; }.v3-ticker-item{ padding: 0 16px; }.v3-ticker-item img{ max-height: 64px; width: auto; }.split__content{ padding: 24px 0 !important; }.split__image img{ height: auto !important; aspect-ratio: 4/3; }.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% + 40px) !important; max-width: calc(100% + 40px) !important; margin-left: -20px !important; margin-right: -20px !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 > .iconBox{ 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; } } /* ===== 3. section overrides (was sales-page-sections.css) ===== */ /* ============================================================ GENERAL SALES, SECTION STYLES Loads AFTER brand.css. That order is deliberate: these rules used to live in a