/* |========================================================================== | SITEPEX — DESIGN SYSTEM |========================================================================== | The same tokens as the lifetime landing page and the checkout, so a | visitor moving from an ad to this site to the cart sees one brand rather | than three attempts at one. | | Written from scratch. The previous stylesheet was a purchased theme with | ~550KB of rules for components this site does not use, a navy, a bright | blue and an orange accent all competing, and colour values hardcoded past | its own variables. */ :root{ --ink:#0f1b33; --muted:#5f6b82; --line:#dde5f2; --paper:#f6f8fd; --soft:#f9fbff; --blue:#2563eb; --blue-dark:#1d4ed8; --navy:#0b1533; --green:#12a150; --red:#d92d20; --ring:rgba(37,99,235,.16); --serif:'Fraunces',Georgia,serif; /* Three measures on purpose: prose reads badly at full width, the nav sits slightly wider than the content beneath it, and four pricing tiers need more room than either. */ --maxw:1280px; --maxw-nav:1380px; --maxw-wide:1420px; --r:12px; --r-lg:18px; --r-pill:999px; --sh-1:0 1px 2px rgba(15,27,51,.05); --sh-2:0 12px 32px rgba(15,27,51,.08); --sh-3:0 24px 56px rgba(15,27,51,.12); --sh-blue:0 18px 44px rgba(37,99,235,.18); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;background:#fff;color:var(--ink); font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto;display:block} a{color:var(--blue);text-decoration:none;transition:color .16s} a:hover{color:var(--blue-dark)} h1,h2,h3,h4{font-family:var(--serif);font-weight:600;letter-spacing:-.03em; line-height:1.1;margin:0} p{margin:0} ul{margin:0;padding:0;list-style:none} :focus-visible{outline:2px solid var(--blue);outline-offset:2px} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .wrap--wide{max-width:var(--maxw-wide)} .sec{padding:80px 0} .sec--paper{background:var(--paper)} .sec--soft{background:var(--soft)} .sec--ink{background:var(--navy);color:#fff} .center{text-align:center} .eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--blue);margin-bottom:14px} .sec--ink .eyebrow{color:#8fb6ff} .h1{font-size:clamp(34px,4.6vw,56px);letter-spacing:-.038em;line-height:1.04} .h2{font-size:clamp(28px,3.4vw,42px)} .h3{font-size:22px;letter-spacing:-.02em} .lead{margin-top:16px;font-size:18px;line-height:1.65;color:var(--muted);max-width:62ch} .sec--ink .lead{color:#a7b5cf} .center .lead{margin-left:auto;margin-right:auto} .fig{font-family:var(--serif);font-variant-numeric:tabular-nums;letter-spacing:-.03em} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; font-size:15.5px;font-weight:600;padding:13px 26px;border-radius:var(--r); border:1.5px solid transparent;cursor:pointer;white-space:nowrap; transition:background .18s,border-color .18s,color .18s,box-shadow .18s,transform .18s} .btn--primary{background:var(--blue);color:#fff;box-shadow:0 8px 20px rgba(37,99,235,.24)} .btn--primary:hover{background:var(--blue-dark);color:#fff;transform:translateY(-1px); box-shadow:0 12px 28px rgba(37,99,235,.3)} .btn--ghost{background:#fff;color:var(--ink);border-color:var(--line)} .btn--ghost:hover{border-color:var(--blue);color:var(--blue)} .btn--light{background:#fff;color:var(--blue)} .btn--light:hover{background:#eef3ff;color:var(--blue-dark)} .btn--full{width:100%} /* ---------- header ---------- */ .hdr{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94); backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .hdr__in{max-width:var(--maxw-nav);margin:0 auto;padding:0 24px;height:74px; display:flex;align-items:center;gap:36px} .hdr__logo img{height:34px;width:auto} .hdr__nav{display:flex;gap:4px;flex:1} .hdr__nav>a,.hdr__btn{display:flex;align-items:center;gap:5px;font-size:15px;font-weight:500; color:var(--ink);padding:9px 14px;border-radius:9px;background:none;border:0; cursor:pointer;font-family:inherit;transition:background .16s,color .16s} .hdr__nav>a:hover,.hdr__btn:hover{background:var(--paper);color:var(--blue)} .hdr__nav>a.is-here{color:var(--blue);background:var(--paper)} .hdr__item{position:relative} .hdr__item.is-open>.hdr__btn{background:var(--paper);color:var(--blue)} .hdr__item.is-open .hdr__btn svg{transform:rotate(180deg)} .hdr__btn svg{transition:transform .18s} .hdr__pop{position:absolute;top:calc(100% + 10px);left:0;min-width:320px;background:#fff; border:1px solid var(--line);border-radius:var(--r-lg);padding:8px;box-shadow:var(--sh-3); opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .16s,transform .16s,visibility .16s} .hdr__item.is-open .hdr__pop{opacity:1;visibility:visible;transform:none} .hdr__e{display:flex;gap:13px;padding:11px 12px;border-radius:10px;align-items:flex-start; color:var(--ink)} .hdr__e:hover{background:#f2f6fd;color:var(--ink)} .hdr__ei{width:38px;height:38px;flex:none;border-radius:10px;background:#eaf1ff; color:var(--blue);display:flex;align-items:center;justify-content:center} .hdr__et{display:block;font-size:14.5px;font-weight:600} .hdr__ed{display:block;font-size:13px;color:var(--muted);margin-top:2px;line-height:1.45} .hdr__r{display:flex;align-items:center;gap:14px;flex:none} .hdr__login{font-size:15px;font-weight:500;color:var(--muted)} .hdr__login:hover{color:var(--blue)} .hdr__burger{display:none;width:42px;height:42px;border:1px solid var(--line); border-radius:10px;background:#fff;cursor:pointer;flex-direction:column; align-items:center;justify-content:center;gap:4px} .hdr__burger span{display:block;width:17px;height:2px;background:var(--ink);border-radius:2px; transition:transform .2s,opacity .2s} .hdr__burger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)} .hdr__burger.is-open span:nth-child(2){opacity:0} .hdr__burger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .hdr__sheet{display:none;border-top:1px solid var(--line);padding:14px 24px 22px;background:#fff} .hdr__sheet.is-open{display:block} .hdr__sheet a{display:block;padding:13px 0;font-size:16px;color:var(--ink); border-bottom:1px solid var(--line)} .hdr__sheet .btn{margin-top:16px} @media(max-width:1040px){ .hdr__nav,.hdr__login{display:none} .hdr__burger{display:flex} .hdr__in{justify-content:space-between;gap:16px} } /* ---------- hero ---------- */ .hero{background:linear-gradient(180deg,#f2f7ff 0%,#fbfcfe 58%,#fff 100%); border-bottom:1px solid var(--line);padding:76px 0 64px;position:relative;overflow:hidden} .hero::before{content:"";position:absolute;top:-42%;right:-10%;width:56%;height:160%; border-radius:50%;pointer-events:none; background:radial-gradient(closest-side,rgba(37,99,235,.10),transparent 70%)} .hero .wrap{position:relative} .hero__g{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center} .hero__pill{display:inline-flex;align-items:center;gap:9px;background:#fff; border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 16px; font-size:13.5px;color:var(--muted);box-shadow:var(--sh-1);margin-bottom:22px} .hero__pill b{color:var(--ink)} .hero__pill svg{color:var(--blue);flex:none} .hero__ticks{margin:26px 0;display:grid;gap:11px} .hero__ticks div{display:flex;align-items:center;gap:11px;font-size:15.5px} .hero__ticks svg{color:var(--green);flex:none} .hero__cta{display:flex;gap:13px;flex-wrap:wrap} .hero__note{margin-top:18px;font-size:13.5px;color:var(--muted)} /* stat strip that overlaps the hero */ .stats{display:grid;grid-template-columns:repeat(4,1fr);background:#fff; border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; box-shadow:var(--sh-2);margin-top:-34px;position:relative;z-index:3} .stats div{padding:22px 18px;text-align:center;border-right:1px solid var(--line)} .stats div:last-child{border-right:0} .stats b{display:block;font-family:var(--serif);font-size:28px;font-weight:600; color:var(--blue);letter-spacing:-.03em;line-height:1} .stats span{display:block;margin-top:7px;font-size:13.5px;color:var(--muted);line-height:1.45} /* ---------- cards ---------- */ .grid{display:grid;gap:20px} .grid--2{grid-template-columns:repeat(2,1fr)} .grid--3{grid-template-columns:repeat(3,1fr)} .grid--4{grid-template-columns:repeat(4,1fr)} .card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px; transition:border-color .2s,box-shadow .2s,transform .2s} .card:hover{border-color:#bcd0f5;box-shadow:var(--sh-2);transform:translateY(-2px)} .card__i{width:50px;height:50px;border-radius:13px;background:#eaf1ff;color:var(--blue); display:flex;align-items:center;justify-content:center;margin-bottom:18px} .card h3{font-size:19px;margin-bottom:9px} .card p{font-size:14.8px;color:var(--muted);line-height:1.65} .card img{border-radius:12px;margin-bottom:18px} /* ---------- plans ---------- */ .plans{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px} .plan{text-align:left;position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); padding:32px 26px;display:flex;flex-direction:column; transition:border-color .2s,box-shadow .2s,transform .2s} .plan:hover{box-shadow:var(--sh-2);transform:translateY(-2px)} .plan--feat{border:2px solid var(--blue);box-shadow:var(--sh-blue)} /* Entry-plan callout. Sits above the card rather than on its edge, so it reads as a pointer to the card rather than a label of it. */ .plan__flag{position:absolute;top:-15px;left:50%;transform:translateX(-50%); background:#eaf1ff;color:#1d4ed8;border:1px solid #cddffb;border-radius:var(--r-pill); padding:5px 14px;font-size:10.5px;font-weight:700;letter-spacing:.05em; text-transform:uppercase;white-space:nowrap} .plan__tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%); background:var(--blue);color:#fff;border-radius:var(--r-pill);padding:5px 15px; font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap} .plan__n{font-family:var(--serif);font-size:24px;font-weight:600} .plan__d{font-size:13.8px;color:var(--muted);margin:6px 0 22px;min-height:42px;line-height:1.5} .plan__p{display:flex;align-items:baseline;gap:3px} .plan__p .cur{font-size:20px;color:var(--ink);font-weight:600;align-self:flex-start;margin-top:8px} .plan__p .amt{font-family:var(--serif);font-size:44px;font-weight:600;letter-spacing:-.035em; font-variant-numeric:tabular-nums} .plan__p .per{font-size:15px;color:var(--muted)} .plan__term{margin:9px 0 22px;font-size:13px;color:var(--muted);line-height:1.5} .plan__term b{color:var(--ink);font-weight:600} .plan__f{display:grid;gap:11px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)} .plan__f li{display:grid;grid-template-columns:18px 1fr;gap:11px;align-items:start; font-size:14.2px;line-height:1.5;color:var(--muted)} .plan__f b{color:var(--ink);font-weight:600} .plan__f .tick{width:18px;height:18px;border-radius:50%;background:#e6f7ed;margin-top:1px; display:flex;align-items:center;justify-content:center;flex:none} .plan__f .tick svg{width:11px;height:11px;color:var(--green)} .plan__f .no .tick{background:#f1f3f7} .plan__f .no .tick svg{color:#a8b2c4} .plan__f .no{color:#9aa5b8} /* ---------- split ---------- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .split--flip .split__art{order:-1} .split__l{display:grid;gap:13px;margin-top:24px} .split__l li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;line-height:1.55} .split__l svg{color:var(--green);flex:none;margin-top:3px} /* ---------- steps ---------- */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px} .step__n{width:44px;height:44px;border-radius:50%;background:var(--blue);color:#fff; display:flex;align-items:center;justify-content:center;font-weight:700;margin-bottom:16px} .step h3{font-size:17px;margin-bottom:7px} .step p{font-size:14.2px;color:var(--muted);line-height:1.6} /* ---------- faq ---------- */ .faq{max-width:860px;margin:36px auto 0} .faq details{border-bottom:1px solid var(--line)} .faq summary{padding:22px 0;font-size:17px;font-weight:600;cursor:pointer;list-style:none; display:flex;justify-content:space-between;gap:24px;align-items:baseline; transition:color .16s} .faq summary:hover{color:var(--blue)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--blue);font-size:22px;font-weight:300;line-height:1} .faq details[open] summary::after{content:"–"} .faq p{padding:0 0 24px;font-size:16px;color:var(--muted);line-height:1.72} /* ---------- reviews ---------- */ .revs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:38px} .rev{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px} .rev__s{color:#f5a623;letter-spacing:.09em;font-size:14px} .rev h4{font-size:15px;font-weight:600;margin:10px 0 8px;font-family:inherit;letter-spacing:0} .rev p{font-size:14px;color:var(--muted);line-height:1.62} .rev__w{display:flex;align-items:center;gap:11px;margin-top:20px;padding-top:18px; border-top:1px solid var(--line)} .rev__w img{width:36px;height:36px;border-radius:50%;object-fit:cover} .rev__n{font-size:13.8px;font-weight:600;line-height:1.3} .rev__n span{display:block;font-weight:400;font-size:12px;color:var(--muted)} /* ---------- rating badge ---------- */ .rate{display:inline-flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line); border-radius:var(--r-pill);padding:9px 18px;box-shadow:var(--sh-1);color:var(--ink)} .rate:hover{border-color:#bcd0f5;color:var(--ink)} .rate__s{color:#f5a623;letter-spacing:.06em;font-size:15px} .rate__t{font-size:13.5px;color:var(--muted)} .rate__t b{color:var(--ink)} /* ---------- page hero for inner pages ---------- */ .phero{background:linear-gradient(180deg,#f2f7ff,#fff);border-bottom:1px solid var(--line); padding:64px 0 54px;text-align:center} .phero h1{max-width:20ch;margin:0 auto} .phero .lead{margin:18px auto 0} .phero__cta{margin-top:30px;display:flex;gap:13px;justify-content:center;flex-wrap:wrap} /* ---------- prose (policy pages) ---------- */ .prose{max-width:76ch;margin:0 auto;font-size:16.5px;line-height:1.78;color:var(--muted)} .prose h2{font-size:25px;margin:44px 0 14px;color:var(--ink)} .prose h3{font-size:19px;margin:30px 0 10px;color:var(--ink)} .prose p{margin-bottom:18px} .prose ul{margin:0 0 18px;padding-left:22px;list-style:disc} .prose li{margin-bottom:9px} .prose a{text-decoration:underline;text-underline-offset:3px} .prose table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15px} .prose th,.prose td{border:1px solid var(--line);padding:11px 15px;text-align:left} .prose th{background:var(--paper);font-weight:600;color:var(--ink)} /* ---------- closing band ---------- */ .end{background:var(--navy);color:#fff;padding:78px 0;text-align:center;position:relative; overflow:hidden} .end::before{content:"";position:absolute;inset:0; background:radial-gradient(760px 380px at 50% 0%,rgba(37,99,235,.42),transparent 66%)} .end .wrap{position:relative} .end h2{color:#fff;max-width:22ch;margin:0 auto} .end p{margin:16px auto 0;font-size:17.5px;color:#a7b5cf;max-width:50ch} .end .btn{margin-top:30px} /* ---------- footer ---------- */ .ftr{background:var(--navy);color:#fff;padding:64px 0 26px} .ftr__g{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:36px} .ftr__b img{height:34px;} .ftr__b p{margin-top:18px;font-size:14.3px;color:#93a3bf;line-height:1.7;max-width:32ch} .ftr h4{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:#7a8aa8;margin-bottom:18px;font-family:inherit} .ftr ul{display:grid;gap:11px} .ftr a{font-size:14.3px;color:#c5cfe0} .ftr a:hover{color:#fff} .ftr__pay{margin-top:22px;display:flex;flex-wrap:wrap;gap:7px} .ftr__pay em{font-style:normal;font-size:11.5px;color:#c5cfe0; border:1px solid rgba(255,255,255,.18);border-radius:7px;padding:5px 11px} .ftr__base{margin-top:52px;padding-top:24px;border-top:1px solid rgba(255,255,255,.13); display:flex;flex-wrap:wrap;gap:9px 26px;justify-content:space-between; font-size:13.5px;color:#7a8aa8} /* ---------- responsive ---------- */ @media(max-width:1040px){ .hero__g,.split{grid-template-columns:1fr;gap:38px} .split--flip .split__art{order:0} .plans,.revs{grid-template-columns:repeat(2,1fr)} .grid--4,.grid--3{grid-template-columns:repeat(2,1fr)} .steps{grid-template-columns:repeat(2,1fr)} .stats{grid-template-columns:repeat(2,1fr);margin-top:28px} .stats div:nth-child(2){border-right:0} .stats div:nth-child(-n+2){border-bottom:1px solid var(--line)} .ftr__g{grid-template-columns:1fr 1fr;gap:32px} } @media(max-width:700px){ .sec{padding:52px 0} .plans,.revs,.grid--2,.grid--3,.grid--4,.steps,.stats{grid-template-columns:1fr} .stats div{border-right:0;border-bottom:1px solid var(--line)} .stats div:last-child{border-bottom:0} .ftr__g{grid-template-columns:1fr} .hero{padding:48px 0 40px} } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} html{scroll-behavior:auto} } /* An included feature uses the base row style; this rule exists so the pairing with .no above is obvious to whoever reads this next. */ .plan__f li.yes{color:var(--muted)} /* ---------- term switcher ---------- */ .terms{display:inline-flex;gap:4px;padding:5px;background:var(--paper); border:1px solid var(--line);border-radius:var(--r-pill);margin:26px auto 0} .terms__b{display:inline-flex;align-items:center;gap:7px;border:0;background:none; font:inherit;font-size:14.5px;font-weight:600;color:var(--muted);cursor:pointer; padding:10px 20px;border-radius:var(--r-pill);white-space:nowrap; transition:background .18s,color .18s,box-shadow .18s} .terms__b:hover{color:var(--ink)} .terms__b.is-on{background:#fff;color:var(--ink);box-shadow:var(--sh-1)} .terms__b em{font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.02em; color:var(--green);background:#e6f7ed;border-radius:var(--r-pill);padding:3px 8px} .terms__b.is-on em{background:#d7f2e2} .plan__price[hidden]{display:none} /* ---------- domain table ---------- */ .dom{margin-top:38px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; background:#fff} .dom table{width:100%;border-collapse:collapse;font-size:15.5px} .dom th,.dom td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--line)} .dom thead th{background:var(--paper);font-size:12.5px;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--muted)} .dom tbody tr:last-child td{border-bottom:0} .dom tbody tr:hover{background:var(--soft)} .dom__x{font-weight:600;color:var(--ink);font-size:16.5px} .dom__p{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)} .dom__r{font-variant-numeric:tabular-nums;color:var(--muted)} .dom__s{display:inline-block;font-size:11.5px;font-weight:700;color:var(--green); background:#e6f7ed;border-radius:var(--r-pill);padding:3px 9px;margin-left:8px} .dom__cta{text-align:right} .dom__cta a{font-size:14.5px;font-weight:600} @media(max-width:760px){ .dom{border:0;background:none} .dom table,.dom tbody,.dom tr,.dom td{display:block;width:100%} .dom thead{display:none} .dom tr{background:#fff;border:1px solid var(--line);border-radius:var(--r); margin-bottom:12px;padding:6px 4px} .dom td{border-bottom:0;padding:9px 16px;display:flex;justify-content:space-between;gap:16px} .dom td::before{content:attr(data-l);font-size:13px;color:var(--muted);font-weight:500} .dom td:first-child::before{content:none} .dom__cta{justify-content:flex-start} } /* ---------- compare table ---------- */ .cmp{margin-top:36px;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg); background:#fff} .cmp table{width:100%;border-collapse:collapse;font-size:15px;min-width:660px} .cmp th,.cmp td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line)} .cmp thead th{background:var(--paper);font-size:12.5px;letter-spacing:.09em; text-transform:uppercase;color:var(--muted);font-weight:700} .cmp thead th:first-child{width:38%} .cmp tbody tr:last-child td{border-bottom:0} .cmp .ok{color:var(--green);font-weight:600} .cmp .no{color:#9aa5b8} .cmp__us{background:#f4f8ff} /* ---------- callout ---------- */ .note{display:flex;gap:15px;padding:20px 22px;background:var(--paper); border:1px solid var(--line);border-left:3px solid var(--blue); border-radius:var(--r);margin-top:26px;text-align:left} .note svg{color:var(--blue);flex:none;margin-top:2px} .note p{font-size:14.8px;color:var(--muted);line-height:1.65} .note b{color:var(--ink)} /* ---------- reviews avatar ---------- */ .rev__av{width:36px;height:36px;border-radius:50%;background:#eaf1ff;color:var(--blue); display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex:none} .rev h3{font-size:15px;font-weight:600;margin:10px 0 8px;font-family:inherit;letter-spacing:0} /* ---------- toc for long pages ---------- */ .toc{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:28px} .toc a{font-size:14px;font-weight:500;color:var(--muted);background:#fff; border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 16px} .toc a:hover{border-color:var(--blue);color:var(--blue)} /* ---------- misc ---------- */ .muted{color:var(--muted)} .mt{margin-top:26px} .hero__art img{border-radius:18px} /* ---------- pricing card: discount row ---------- */ .plan__off{display:flex;align-items:center;gap:9px;margin-bottom:10px} .plan__pct{font-size:12.5px;font-weight:700;letter-spacing:.02em;color:#c2410c; background:#fff1e7;border-radius:6px;padding:4px 9px} .plan__off s{font-size:14.5px;color:#9aa5b8;text-decoration-thickness:1.5px} .plan__term{min-height:20px} .plan__f .tag{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.01em; border-radius:6px;padding:2px 7px;white-space:nowrap;background:#e6f7ed;color:#15803d} .plan__f .tag--n{background:#dbeafe;color:#1d4ed8} .plan__f .tag--b{background:#dbeafe;color:#1d4ed8} .plan__f li{align-items:center} .plans__cmp{margin-top:30px;display:flex;justify-content:center} .plans__cmp .btn svg{transition:transform .18s} .plans__cmp .btn:hover svg{transform:translateY(2px)} /* ---------- comparison table ---------- */ /* position:sticky resolves against the nearest SCROLLING ancestor, and overflow-x:auto makes this element one — which is why the header did not stick. On desktop the table fits, so there is no scroll container at all and sticky resolves against the viewport as intended. Horizontal scrolling is restored only below 900px, where the header pins to the top of the scroller instead. */ .cmp2{margin-top:10px} @media(max-width:900px){ .cmp2{overflow-x:auto;-webkit-overflow-scrolling:touch} } .cmp2 table{width:100%;border-collapse:collapse;text-align:left} @media(max-width:900px){.cmp2 table{min-width:860px}} .cmp2 th,.cmp2 td{padding:14px 18px;border-bottom:1px solid var(--line);font-size:14.8px} .cmp2 tbody th{font-weight:400;color:var(--muted);width:32%} .cmp2 td{text-align:center;color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums} .cmp2 td.is-feat{background:#f4f8ff} .cmp2 .ok{color:var(--green);display:inline-flex} .cmp2 .ok svg{width:17px;height:17px} .cmp2 .dash{color:#c2cbda} .cmp2 .tag{font-style:normal;font-size:10.5px;font-weight:700;background:#dbeafe;color:#1d4ed8; border-radius:5px;padding:2px 6px;margin-left:5px;vertical-align:1px} /* sticky header — a 54-row table is unreadable once the column names go */ .cmp2 thead th{position:sticky;top:74px;z-index:20;background:#fff; border-bottom:1px solid var(--line);vertical-align:top;padding:18px;text-align:center; box-shadow:0 1px 0 var(--line)} .cmp2 thead th.is-feat{background:#f4f8ff} .cmp2__h{text-align:center} .cmp2__ctl{text-align:left!important;width:32%} .cmp2__lbl{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:7px; letter-spacing:.03em} .cmp2__tag{display:inline-block;background:#dbeafe;color:#1d4ed8;border-radius:var(--r-pill); padding:3px 10px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; margin-bottom:7px} .cmp2__n{display:block;font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink)} .cmp2__p{display:block;font-size:14px;color:var(--muted);margin:3px 0 11px; font-variant-numeric:tabular-nums} .cmp2__p[hidden],.cmp2__cta[hidden]{display:none} .btn--sm{padding:9px 18px;font-size:14px;width:100%} .cmp2__cta{white-space:nowrap} /* group headers, collapsible */ .cmp2__gh th{padding:0;background:var(--paper);border-bottom:1px solid var(--line); border-top:1px solid var(--line)} .cmp2__gb{display:flex;align-items:center;justify-content:space-between;width:100%; border:0;background:none;font:inherit;font-size:16px;font-weight:600;color:var(--ink); padding:18px;cursor:pointer;font-family:var(--serif);letter-spacing:-.01em} .cmp2__gb svg{color:var(--muted);transition:transform .2s;flex:none} .cmp2__gb[aria-expanded="false"] svg{transform:rotate(-90deg)} .cmp2__r[hidden]{display:none} .cmp2__foot{margin-top:18px;text-align:center;font-size:13px;color:var(--muted)} @media(max-width:900px){ .cmp2 thead th{top:0} .cmp2 th,.cmp2 td{padding:12px 13px;font-size:14px} .cmp2__n{font-size:17px} } /* The jump target is the section, not the table, so the sticky header settles under the site header instead of above it. */ #compare-section{scroll-margin-top:0} /* ========================================================================== PRICING CARDS — refined -------------------------------------------------------------------------- A four-column price table is read across, not down: the eye compares the same line on each card. So every card keeps identical vertical rhythm and only the varying term is heavy. ========================================================================== */ .plans{align-items:stretch} .plan{padding:34px 28px 30px;border-radius:20px; box-shadow:0 1px 2px rgba(15,27,51,.04)} .plan:hover{box-shadow:0 18px 40px rgba(15,27,51,.10)} /* The featured card lifts rather than shouts — a solid fill on one column makes the other three look switched off. */ .plan--feat{background:linear-gradient(180deg,#f7faff,#fff); box-shadow:0 20px 48px rgba(37,99,235,.15)} .plan--feat:hover{box-shadow:0 26px 58px rgba(37,99,235,.19)} .plan__n{font-size:26px;letter-spacing:-.03em} .plan__d{font-size:14px;margin:7px 0 20px;min-height:40px} /* price block */ .plan__off{margin-bottom:12px} .plan__pct{font-size:12px;padding:5px 10px;border-radius:7px} .plan__p{margin-bottom:12px;align-items:baseline} .plan__p .cur{font-size:22px;margin-top:0;align-self:center;font-weight:500; position:relative;top:-10px} .plan__p .amt{font-size:52px;line-height:1} .plan__p .per{font-size:16px;margin-left:2px} .plan__term{font-size:13.5px;line-height:1.55;margin-bottom:22px;color:var(--muted)} .plan__term b{color:var(--ink)} /* feature list */ .plan__f{margin-top:26px;padding-top:24px;gap:13px} .plan__f li{font-size:14.3px;color:var(--muted);align-items:flex-start} .plan__f b{color:var(--ink);font-weight:600} .plan__f .tick{width:17px;height:17px;background:transparent;margin-top:2px} .plan__f .tick svg{width:15px;height:15px;color:var(--green)} .plan__f .tag{margin-left:2px} /* A hairline between price and features, so the card reads as two blocks: what it costs, then what it is. */ .plan__price{padding-bottom:4px} @media(max-width:1180px){ .plan{padding:30px 22px 26px} .plan__p .amt{font-size:46px} .plan__n{font-size:23px} } /* group row count in the comparison */ .cmp2__ct{display:inline-block;margin-left:9px;font-style:normal;font-size:11.5px; font-weight:700;color:var(--muted);background:#eef1f6;border-radius:var(--r-pill); padding:2px 9px;vertical-align:2px} .cmp2__gb[aria-expanded="false"]{color:var(--muted)} .cmp2__gb:hover{color:var(--blue)} /* ========================================================================== MOBILE OVERFLOW FIXES -------------------------------------------------------------------------- A page that scrolls sideways on a phone looks broken even when everything is otherwise right, and it is what produces the strip of empty space on the right when you zoom. ========================================================================== */ /* clip, not hidden: overflow:hidden on an ancestor silently kills position:sticky, which is what the comparison header depends on. */ html{overflow-x:clip} body{overflow-x:clip;max-width:100%} /* Three term buttons at 20px padding each exceed a 360px screen. */ .terms{flex-wrap:wrap;justify-content:center;max-width:100%} @media(max-width:520px){ .terms{width:100%;border-radius:var(--r-lg)} .terms__b{flex:1 1 auto;justify-content:center;padding:11px 12px;font-size:13.5px} .terms__b em{font-size:10.5px;padding:2px 6px} } /* Long words in a narrow card push the card wider than the screen. */ .plan,.card,.rev,.step,.prose{min-width:0;overflow-wrap:break-word} .plan__flag{max-width:calc(100% - 24px);white-space:normal;text-align:center;line-height:1.3} /* Tables are the other usual cause. Each is already in its own scroller; this stops the scroller itself from stretching the page. */ .cmp2,.cmp,.dom{max-width:100%} /* The hero glow is decorative and must never create scroll width. */ .hero{overflow:clip} /* Header logo: cap the height and let width follow, so a wide source file cannot push the nav wider than the screen. */ .hdr__logo{display:flex;align-items:center;flex:none;max-width:52vw} .hdr__logo img,.hdr__logo picture{height:32px;width:auto;max-width:100%;object-fit:contain} @media(max-width:480px){ .hdr__logo img{height:28px} .hdr__in{height:64px;padding:0 16px;gap:12px} .hdr__r{gap:8px} .hdr__r .btn{padding:10px 14px;font-size:14px} } .ftr__b img{height:32px;width:auto} /* Anything with a fixed pixel width needs a ceiling on small screens. */ @media(max-width:400px){ .hdr__pop{min-width:0;width:calc(100vw - 32px)} .wrap{padding:0 16px} } /* ========================================================================== VISUAL REFINEMENT PASS -------------------------------------------------------------------------- The structure was right; this is about the things that separate a competent page from one that feels considered — vertical rhythm, a narrower tonal range, and motion that responds rather than decorates. ========================================================================== */ /* ---- type scale: tighter headings, more air in body copy ---- */ .h1{font-size:clamp(36px,5vw,60px);letter-spacing:-.042em;line-height:1.02} .h2{font-size:clamp(29px,3.6vw,45px);letter-spacing:-.034em;line-height:1.08} .lead{font-size:18.5px;line-height:1.68;color:var(--muted)} .eyebrow{font-size:11.5px;letter-spacing:.16em;margin-bottom:16px; display:inline-flex;align-items:center;gap:8px} .eyebrow::before{content:"";width:18px;height:1.5px;background:currentColor; border-radius:2px;opacity:.55} .center .eyebrow::before{display:none} /* ---- section rhythm ---- */ .sec{padding:96px 0} @media(max-width:700px){.sec{padding:60px 0}} /* ---- hero: a calmer gradient and a real depth cue ---- */ .hero{padding:88px 0 76px; background:linear-gradient(180deg,#eef4ff 0%,#f8fbff 46%,#fff 100%)} .hero::before{top:-46%;right:-14%;width:64%;height:170%; background:radial-gradient(closest-side,rgba(37,99,235,.13),transparent 72%)} .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent)} .hero__pill{padding:8px 17px;font-size:13.5px; box-shadow:0 2px 8px rgba(15,27,51,.05)} .hero__ticks{margin:30px 0 32px;gap:13px} .hero__art img{box-shadow:0 30px 70px rgba(15,27,51,.13);border-radius:20px} /* ---- buttons: a considered press, not a bounce ---- */ .btn{padding:14px 28px;border-radius:12px;font-size:15.5px} .btn--primary{box-shadow:0 6px 18px rgba(37,99,235,.26)} .btn--primary:hover{box-shadow:0 12px 30px rgba(37,99,235,.34);transform:translateY(-2px)} .btn--primary:active,.btn--ghost:active{transform:translateY(0)} .btn--ghost{background:#fff;border-color:var(--line);box-shadow:0 1px 2px rgba(15,27,51,.04)} .btn--ghost:hover{border-color:#a9c4f7;background:#fbfcff;transform:translateY(-1px)} /* ---- stat strip ---- */ .stats{border-radius:20px;box-shadow:0 14px 40px rgba(15,27,51,.09);margin-top:-42px} .stats div{padding:26px 18px} .stats b{font-size:31px} /* ---- cards: a quieter resting state, a clearer hover ---- */ .card{border-radius:20px;padding:32px; box-shadow:0 1px 2px rgba(15,27,51,.035)} .card:hover{border-color:#b9cdf5;box-shadow:0 20px 44px rgba(15,27,51,.10); transform:translateY(-3px)} .card__i{width:48px;height:48px;border-radius:14px; background:linear-gradient(135deg,#eaf1ff,#dbe7ff);margin-bottom:20px} .card h3{font-size:19.5px;letter-spacing:-.02em} .card p{font-size:15px;line-height:1.68} /* ---- steps: a connecting line, so it reads as a sequence ---- */ .steps{position:relative} .step{position:relative} .step__n{width:46px;height:46px;font-size:16px; background:linear-gradient(135deg,var(--blue),var(--blue-dark)); box-shadow:0 6px 16px rgba(37,99,235,.28)} @media(min-width:1041px){ .steps>.step:not(:last-child)::after{content:"";position:absolute;top:23px; left:58px;right:-20px;height:1.5px; background:linear-gradient(90deg,#cddffb,transparent);pointer-events:none} } /* ---- reviews ---- */ .rev{border-radius:20px;padding:28px;transition:box-shadow .2s,transform .2s} .rev:hover{box-shadow:0 16px 38px rgba(15,27,51,.09);transform:translateY(-2px)} .rev__av{background:linear-gradient(135deg,#eaf1ff,#dbe7ff)} /* ---- faq ---- */ .faq summary{padding:24px 0;font-size:17.5px;letter-spacing:-.01em} .faq details[open] summary{color:var(--blue)} .faq summary::after{transition:transform .18s} .faq p{font-size:16.2px;line-height:1.76} /* ---- closing band ---- */ .end{padding:92px 0} .end::before{background:radial-gradient(820px 400px at 50% -8%,rgba(37,99,235,.5),transparent 68%)} .end .btn--light{box-shadow:0 10px 30px rgba(0,0,0,.22)} /* ---- footer ---- */ .ftr{padding:72px 0 28px} .ftr a{transition:color .16s,padding-left .16s} .ftr a:hover{padding-left:3px} /* ---- header ---- */ .hdr{background:rgba(255,255,255,.88);backdrop-filter:blur(14px) saturate(140%)} .hdr__pop{border-radius:20px;padding:10px;box-shadow:0 28px 64px rgba(15,27,51,.16)} /* ---- comparison ---- */ .cmp2 thead th{padding:20px 18px} .cmp2__gb{padding:20px 18px;font-size:16.5px} .cmp2 tbody tr:hover td,.cmp2 tbody tr:hover th{background:#fafcff} .cmp2 tbody tr:hover td.is-feat{background:#eef4ff} /* ---- focus, everywhere ---- */ :focus-visible{outline:2.5px solid var(--blue);outline-offset:3px;border-radius:4px} /* ========================================================================== MOBILE MENU — full-screen sheet -------------------------------------------------------------------------- A dropdown leaves the page visible behind it and people tap through by accident. This takes the screen, has its own close control, and keeps the account and CTA pinned at the bottom where a thumb reaches. ========================================================================== */ .msheet{display:none} .msheet.is-open{display:flex;flex-direction:column;position:fixed;inset:0;z-index:200; background:#fff} body.is-locked{overflow:hidden} .msheet__top{display:flex;align-items:center;justify-content:space-between; padding:16px 20px;border-bottom:1px solid var(--line);flex:none} .msheet__logo img{height:28px;width:auto} .msheet__x{width:42px;height:42px;border:0;background:none;color:var(--ink);cursor:pointer; display:flex;align-items:center;justify-content:center;border-radius:10px; -webkit-tap-highlight-color:transparent} .msheet__x:active{background:var(--paper)} .msheet__body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 20px 20px} .msheet__plain{display:block;padding:18px 0;font-size:17px;font-weight:500;color:var(--ink); border-bottom:1px solid var(--line)} .msheet__sec{padding:22px 0;border-bottom:1px solid var(--line)} .msheet__sec:last-child{border-bottom:0} .msheet__lbl{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--faint,#8a97a8);margin-bottom:6px} .msheet__row{display:flex;align-items:center;gap:15px;padding:15px 0;color:var(--ink); -webkit-tap-highlight-color:transparent} .msheet__row:active{opacity:.6} .msheet__i{width:26px;flex:none;color:var(--ink);display:flex} .msheet__t{flex:1;font-size:16.5px;font-weight:500;letter-spacing:-.01em} .msheet__c{color:#a8b4c6;display:flex;flex:none;transform:rotate(-90deg)} .msheet__row--flat{padding:17px 0} .msheet__foot{flex:none;display:flex;align-items:center;gap:14px;justify-content:space-between; padding:16px 20px;border-top:1px solid var(--line);background:#fff; padding-bottom:calc(16px + env(safe-area-inset-bottom))} .msheet__acct{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600; color:var(--ink)} .msheet__foot .btn{padding:12px 20px;font-size:14.5px} @media(min-width:1041px){.msheet,.msheet.is-open{display:none}} /* ========================================================================== COMPARISON ON MOBILE — one plan at a time -------------------------------------------------------------------------- Four columns do not fit on a phone, and a horizontal scroller means the row label scrolls out of view — you end up looking at a number with no idea what it measures. So below 900px the table shows one plan, chosen from a tab bar, with the price and CTA pinned to the bottom. ========================================================================== */ .cmp2__tabs{display:none} .cmp2__bar{display:none} @media(max-width:900px){ .cmp2{overflow-x:visible;border:1px solid var(--line);border-radius:var(--r-lg); background:#fff} .cmp2 table{min-width:0;width:100%} /* the tab bar rides under the site header */ .cmp2__tabs{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch; scrollbar-width:none;padding:12px 0 14px;margin:0 -4px 4px; position:sticky;top:64px;z-index:30;background:#fff} .cmp2__tabs::-webkit-scrollbar{display:none} .cmp2__tab{flex:none;border:0;background:var(--paper);color:var(--ink); font:inherit;font-size:14.5px;font-weight:600;padding:11px 20px; border-radius:var(--r-pill);cursor:pointer;white-space:nowrap; -webkit-tap-highlight-color:transparent;transition:background .16s,color .16s} .cmp2__tab.is-on{background:var(--ink);color:#fff} /* hide the desktop header row and every column but the active plan */ .cmp2 thead{display:none} .cmp2 td[data-plan]{display:none} .cmp2 td[data-plan].is-active{display:table-cell} .cmp2 tbody th{width:auto;font-size:15.5px;color:var(--ink);padding:16px 18px} .cmp2 td{text-align:right;font-size:15.5px;padding:16px 18px;color:var(--muted); font-weight:500} .cmp2 td.is-feat{background:transparent} .cmp2 tbody tr:hover td,.cmp2 tbody tr:hover th{background:transparent} .cmp2__gh th{padding:0} .cmp2__gb{padding:18px;font-size:16.5px} /* room for the pinned bar */ #compare-section{padding-bottom:168px} .cmp2__bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:120; background:#fff;border-top:1px solid var(--line); box-shadow:0 -6px 24px rgba(15,27,51,.10); padding:14px 18px calc(14px + env(safe-area-inset-bottom)); transform:translateY(110%);transition:transform .24s ease} .cmp2__bar.is-up{transform:none} .cmp2__barin[hidden]{display:none} .cmp2__barp{text-align:center;font-size:14px;color:var(--muted);margin-bottom:10px} .cmp2__barp s{color:#9aa5b8;margin-right:5px} .cmp2__barp b{color:var(--ink);font-size:16px} .cmp2__barp em{font-style:normal;color:var(--green);font-weight:600;margin-left:4px} .cmp2__barn{display:block;text-align:center;font-size:12px;color:var(--muted);margin-top:9px} } /* ========================================================================== COMPARISON — ruled, not boxed -------------------------------------------------------------------------- Vertical rules and an outer border made the table read as a grid of cells. A spec sheet is read row by row, so only the horizontal rules stay: each feature gets an underline and nothing else competes with it. ========================================================================== */ .cmp2{border:0;border-radius:0;background:transparent} .cmp2 thead th{border-bottom:1px solid var(--line);box-shadow:none;border-right:0} .cmp2 th,.cmp2 td{border-right:0;border-left:0} .cmp2 td.is-feat,.cmp2 thead th.is-feat{background:transparent} .cmp2 tbody tr:hover td.is-feat{background:transparent} /* The featured column is marked by a single tint on the header only, so the eye still finds it without a full-height stripe cutting the rows apart. */ .cmp2 thead th.is-feat .cmp2__n{color:var(--blue)} .cmp2__gh th{background:transparent;border-top:1px solid var(--line); border-bottom:1px solid var(--line-2,#eef1f6)} .cmp2__gb{padding:22px 0} .cmp2 tbody th{padding-left:0} .cmp2 tbody tr:last-child td,.cmp2 tbody tr:last-child th{border-bottom:1px solid var(--line)} .cmp2 tbody tr:hover td,.cmp2 tbody tr:hover th{background:transparent} @media(max-width:900px){ .cmp2{border:0} .cmp2 tbody th{padding-left:0} .cmp2 td{padding-right:0} .cmp2__gb{padding:20px 0} } /* ---- hero on white ---- The tinted hero made the top of every page a different colour from the rest of it. White throughout lets the hero image and the type carry the page, and the rule underneath still separates it from what follows. */ .hero{background:#fff} .phero{background:#fff} /* ---- comparison group headings: icon + plus/minus ---- */ .cmp2__gn{display:flex;align-items:center;gap:14px;text-align:left} .cmp2__gi{display:flex;color:var(--ink);flex:none} .cmp2__gb[aria-expanded="false"] .cmp2__gi{color:var(--muted)} .cmp2__pm{position:relative;width:20px;height:20px;flex:none} .cmp2__pm::before,.cmp2__pm::after{content:"";position:absolute;background:var(--ink); border-radius:2px;transition:transform .2s,opacity .2s} .cmp2__pm::before{left:0;right:0;top:9px;height:2px} .cmp2__pm::after{top:0;bottom:0;left:9px;width:2px} .cmp2__gb[aria-expanded="true"] .cmp2__pm::after{transform:scaleY(0);opacity:0} .cmp2__gb svg.spx-chev{display:none} /* ========================================================================== PLAN CARD — grouped feature list ========================================================================== */ .plan__sec{margin:26px 0 0;padding-bottom:12px;border-bottom:1px solid var(--line); font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase; color:#8a97a8} .plan__f{margin-top:14px;padding-top:0;border-top:0;gap:11px} .plan__f:first-of-type{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)} /* Absent features stay visible, greyed. A blank where a rival prints a tick is the thing buyers misread; a visible dash tells the whole story of why the next plan up exists. */ .plan__f li.no{color:#a6b0c0} .plan__f li.no b{color:#a6b0c0;font-weight:600} .plan__f li.no .tick svg{color:#c3cbd8} /* ---- why this plan ---- */ .plan__why{margin-top:26px;padding:16px 18px;background:#f2f7ff; border:1px solid #dbe7fb;border-radius:12px} .plan__why b{display:block;font-size:13.5px;font-weight:700;color:var(--blue-dark,#1b4fd1); margin-bottom:5px} .plan__why span{display:block;font-size:13.6px;line-height:1.58;color:var(--muted)} /* ========================================================================== HERO IMAGE -------------------------------------------------------------------------- A heavy drop shadow on a floating rectangle reads as a modal dialog — the browser convention for "something has popped up over the page". A hairline border and a shadow tight enough to feel like paper reads as part of the page instead. ========================================================================== */ .hero__art img{ border:1px solid var(--line); border-radius:16px; box-shadow:0 2px 4px rgba(15,27,51,.04), 0 12px 28px rgba(15,27,51,.06); } /* ========================================================================== COLOUR — a narrower, warmer range -------------------------------------------------------------------------- The palette had one blue doing every job, so emphasis had nowhere to escalate to. These add a deeper ink for headings and a softer tint for surfaces, which lets the blue mean "act" rather than just "brand". ========================================================================== */ :root{ --ink:#0d1a2f; --muted:#5a6980; --faint:#8a97a8; --line:#e2e8f2; --line-2:#eef2f8; --paper:#f6f9fd; --soft:#fbfcfe; --blue:#2563eb; --blue-dark:#1b4fd1; --blue-soft:#eef4ff; --navy:#0a1428; --green:#0f9d58; } .sec--paper{background:var(--paper)} .card__i{background:linear-gradient(135deg,var(--blue-soft),#dfe9ff);color:var(--blue-dark)} .eyebrow{color:var(--blue-dark)} .hero__pill{background:#fff;border-color:var(--line)} .stats b{color:var(--blue-dark)} /* ========================================================================== FEATURE TOOLTIPS -------------------------------------------------------------------------- CSS only. An earlier version of these on another page used a scroll handler to reposition the bubble — 52 listeners firing on every scroll event, on a page whose traffic is mostly mobile. This one costs nothing: the bubble is a pseudo-element on a positioned parent, revealed on hover and on focus. Focus matters as much as hover here. tabindex makes each one reachable by keyboard AND gives touch devices something to tap, since :hover on a phone is a tap that then sticks. ========================================================================== */ /* the little arrow */ /* The last column would push its bubble off-screen, so those open leftward. Same for the right half of a two-column layout. */ /* On a phone the cards are one per row, so a wide bubble has room — but it must not exceed the viewport. */ @media(max-width:700px){ } /* green tag for "Free forever" */ .plan__f .tag--g{background:#e6f7ed;color:#0f7a41} /* A tooltip rises above its card, so nothing in the chain may clip it. */ .plans,.plan,.plan__f,.plan__f li{overflow:visible} /* ========================================================================== PRICING — wider -------------------------------------------------------------------------- Four cards with a grouped, tooltipped feature list need more room than the 1420px container gave them: labels like "Unlimited mailboxes on your domain" were wrapping to three lines, which broke the row alignment that makes a four-column table readable. Only the pricing block widens. Prose stays at its own measure, because a 1620px paragraph is unreadable. ========================================================================== */ @media(min-width:1280px){ .wrap--wide{max-width:1620px;padding-inline:32px} .plans{gap:22px} .plan{padding:36px 30px 32px} .plan__f li{font-size:14.6px} } /* Between tablet and that breakpoint the cards still benefit from the full width available, just without the extra padding. */ @media(min-width:1041px) and (max-width:1279px){ .wrap--wide{max-width:none;padding-inline:28px} } /* ========================================================================== CARD GROUPS — Hostinger-style ========================================================================== */ /* The label is a sentence with a colon, not a tracked-out uppercase rule. It reads as an introduction to the block rather than a table header. */ .plan__sec{margin:26px 0 2px;padding:0;border:0; font-size:14.8px;font-weight:700;letter-spacing:-.01em; text-transform:none;color:var(--ink)} .plan__f{margin-top:12px} .plan__f:first-of-type{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)} /* An icon row sits a touch lower and uses the ink colour, so the marks read as logos rather than as a second kind of tick. */ .tick--i{color:var(--ink);margin-top:1px} .plan__f li.no .tick--i{color:#c3cbd8} /* ---- the featured card, dark ---- One dark column among three light ones does what a badge alone cannot: the eye lands there first, and the plan reads as the considered choice rather than the one with a sticker on it. */ .plan--feat{background:linear-gradient(170deg,#101c33 0%,#0a1428 100%); border-color:#1f3054;color:#e4eaf5} .plan--feat:hover{background:linear-gradient(170deg,#132138 0%,#0b1730 100%)} .plan--feat .plan__n{color:#fff} .plan--feat .plan__d{color:#9fb0cd} .plan--feat .plan__p .cur,.plan--feat .plan__p .amt{color:#fff} .plan--feat .plan__p .per{color:#9fb0cd} .plan--feat .plan__term{color:#9fb0cd} .plan--feat .plan__term b{color:#fff} .plan--feat .plan__off s{color:#8095b5} .plan--feat .plan__pct{background:rgba(255,255,255,.1);color:#ffd9a8;border-color:transparent} .plan--feat .plan__sec{color:#fff} .plan--feat .plan__f{border-color:rgba(255,255,255,.12)} .plan--feat .plan__f li{color:#b9c7de;border-color:rgba(255,255,255,.08)} .plan--feat .plan__f b{color:#fff} .plan--feat .plan__f .tick svg{color:#5eead4} .plan--feat .plan__f .tick--i{color:#e4eaf5} .plan--feat .plan__f li.no{color:#6a7b99} .plan--feat .plan__f li.no .tick svg{color:#4a5a78} .plan--feat .plan__why{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)} .plan--feat .plan__why b{color:#8fb6ff} .plan--feat .plan__why span{color:#b9c7de} .plan--feat .plan__tag{background:#fff;color:var(--ink)} .plan--feat .plan__flag{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22); color:#a5f3d0} .plan--feat .btn--primary{background:#fff;color:var(--ink);border-color:#fff;box-shadow:none} .plan--feat .btn--primary:hover{background:#dde6f7;color:var(--ink);border-color:#dde6f7} .plan--feat .tag{background:rgba(255,255,255,.12);color:#cfe0ff} .plan--feat .tag--g{background:rgba(94,234,212,.14);color:#5eead4} /* ========================================================================== HEADER — account icon ========================================================================== */ .hdr__acct{display:flex;align-items:center;justify-content:center;width:42px;height:42px; border-radius:11px;color:var(--ink);border:1px solid transparent;transition:background .16s,border-color .16s} .hdr__acct:hover{background:var(--paper);border-color:var(--line);color:var(--blue)} @media(max-width:1040px){.hdr__cta{display:none}} /* ========================================================================== MOBILE MENU — drill-down -------------------------------------------------------------------------- Level 2 slides over level 1 rather than replacing it, so "back" feels like a direction rather than a reload. ========================================================================== */ .msheet__body{position:relative;overflow-x:hidden} .msheet__lvl{display:none} .msheet__lvl.is-on{display:block;animation:spxSlide .22s ease} @keyframes spxSlide{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}} .msheet__lvl[data-level="root"].is-on{animation-name:spxSlideBack} @keyframes spxSlideBack{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}} .msheet__open{display:flex;align-items:center;width:100%;border:0;background:none; font:inherit;text-align:left;cursor:pointer;color:var(--ink);padding:17px 0; border-bottom:1px solid var(--line-2,#eef2f8);-webkit-tap-highlight-color:transparent} .msheet__row--flat{border-bottom:1px solid var(--line-2,#eef2f8)} .msheet__open:active,.msheet__row:active{opacity:.6} .msheet__back{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none; font:inherit;cursor:pointer;padding:16px 0;color:var(--muted); font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; border-bottom:1px solid var(--line);-webkit-tap-highlight-color:transparent} .msheet__back svg{transform:rotate(90deg);color:var(--ink)} .msheet__row--rich{align-items:flex-start;gap:15px;padding:16px 0; border-bottom:1px solid var(--line-2,#eef2f8)} .msheet__row--rich:last-child{border-bottom:0} .msheet__d{display:block;font-size:14px;color:var(--muted);line-height:1.5;margin-top:3px; font-weight:400} .msheet__row--rich .msheet__t{font-size:16.5px;font-weight:600;display:block} .msheet__foot{justify-content:flex-start} /* ========================================================================== COMPARISON — duration control ========================================================================== */ .cmp2__lbl{font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase; color:var(--faint,#8a97a8)} /* tooltips inside the table need their own row to stack above */ .cmp2 tbody th{position:relative;z-index:1} .cmp2 tbody tr:hover th,.cmp2 tbody th:focus-within{z-index:40} /* A tooltip near the top of the viewport opens downward instead. */ /* ========================================================================== TOOLTIPS — rebuilt -------------------------------------------------------------------------- The previous version had a correct arrow that was never visible: .tip created no stacking context, so the next list row painted straight over the bubble and its pointer. Raising the tip on hover/focus fixes it. Styled after the reference: a solid blue panel with generous padding and a clear pointer, rather than a thin dark strip. ========================================================================== */ .tip{ position:relative; display:inline; border-bottom:1px dashed #9fb0c8; cursor:help; outline:none; -webkit-tap-highlight-color:transparent; } .tip:hover,.tip:focus,.tip:focus-visible{border-bottom-color:var(--blue)} /* The whole point: lift the hovered tip above every sibling row. */ .tip:hover,.tip:focus,.tip:focus-visible{z-index:200} .tip::after{ content:attr(data-tip); position:absolute; bottom:calc(100% + 14px); left:-14px; width:max-content; max-width:300px; background:var(--blue); color:#fff; font-family:inherit; font-size:14px; font-weight:500; line-height:1.55; letter-spacing:0; text-align:left; padding:16px 18px; border-radius:14px; box-shadow:0 18px 40px rgba(15,27,51,.28); opacity:0;visibility:hidden;transform:translateY(5px); transition:opacity .16s ease,transform .16s ease,visibility .16s; z-index:201; pointer-events:none; white-space:normal; } /* The pointer. Drawn with borders so it inherits no background and can never disagree with the bubble's colour. */ .tip::before{ content:""; position:absolute; bottom:calc(100% + 4px); left:16px; width:0;height:0; border-left:9px solid transparent; border-right:9px solid transparent; border-top:10px solid var(--blue); opacity:0;visibility:hidden; transition:opacity .16s,visibility .16s; z-index:202; pointer-events:none; } .tip:hover::after,.tip:focus::after,.tip:focus-visible::after, .tip:hover::before,.tip:focus::before,.tip:focus-visible::before{ opacity:1;visibility:visible} .tip:hover::after,.tip:focus::after,.tip:focus-visible::after{transform:none} /* Near the top of the viewport it opens downward, pointer flipped. */ .tip--below::after{bottom:auto;top:calc(100% + 14px);transform:translateY(-5px)} .tip--below:hover::after,.tip--below:focus::after,.tip--below:focus-visible::after{transform:none} .tip--below::before{ bottom:auto;top:calc(100% + 4px); border-top:0;border-bottom:10px solid var(--blue)} /* Last column opens leftward so the bubble stays on screen. */ .plan:last-child .tip::after{left:auto;right:-14px} .plan:last-child .tip::before{left:auto;right:16px} @media(max-width:820px){ .tip::after{max-width:min(300px,calc(100vw - 48px));font-size:13.5px;padding:14px 16px} .plan:last-child .tip::after{left:-14px;right:auto} .plan:last-child .tip::before{left:16px;right:auto} } /* On the dark featured card the blue would disappear into the background, so it inverts to white on ink. */ .plan--feat .tip{border-bottom-color:rgba(255,255,255,.38)} .plan--feat .tip:hover,.plan--feat .tip:focus{border-bottom-color:#8fb6ff} .plan--feat .tip::after{background:#fff;color:var(--ink);box-shadow:0 18px 40px rgba(0,0,0,.45)} .plan--feat .tip::before{border-top-color:#fff} .plan--feat .tip--below::before{border-top:0;border-bottom-color:#fff} /* Rows must not clip a bubble rising out of them. */ .plans,.plan,.plan__f,.plan__f li,.cmp2,.cmp2 tbody,.cmp2 tr,.cmp2 th{overflow:visible} .cmp2 tbody th{position:relative} .cmp2 tbody tr:hover th,.cmp2 tbody th:focus-within{z-index:200} /* ========================================================================== COMPARISON — duration control -------------------------------------------------------------------------- Scoped to .cmp2 so it beats the base rule, which was setting a background shorthand and wiping out the custom chevron. ========================================================================== */ .cmp2 .cmp2__sel, .cmp2__sel{ appearance:none;-webkit-appearance:none;-moz-appearance:none; width:100%;max-width:230px; padding:13px 40px 13px 15px; font-family:inherit; font-size:15px; font-weight:600; color:var(--ink); background-color:#fff; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:18px; border:1.5px solid var(--line); border-radius:12px; cursor:pointer; transition:border-color .16s,box-shadow .16s; } .cmp2 .cmp2__sel:hover{border-color:var(--blue)} .cmp2 .cmp2__sel:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--ring);outline:none} .cmp2__lbl{display:block;margin-bottom:8px;font-size:11.5px;font-weight:700; letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} /* ========================================================================== DURATION LISTBOX -------------------------------------------------------------------------- A native