.pricing-v2 { --pricing-ink: #063f3a; --pricing-muted: #4f6c68; --pricing-line: #d7e5e1; --pricing-mint: #edf8f5; --pricing-cream: #fff8f0; --pricing-orange: #f8661e; --pricing-green: #006b5e; overflow: clip; background: #fff; } .pricing-v2 svg { width: 1.25rem; height: 1.25rem; fill: currentColor; } .pricing-v2 .btn svg { width: 1.05rem; height: 1.05rem; margin-left: .5rem; } .pricing-v2-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--pricing-line); background: radial-gradient(circle at 4% 92%, rgba(0,107,94,.08) 0 11rem, transparent 11.1rem), radial-gradient(circle at 93% 12%, rgba(248,170,32,.08) 0 10rem, transparent 10.1rem), linear-gradient(118deg, #f7fbfa 0%, #fff 51%, #fff8f1 100%); } .pricing-v2-hero::after { position: absolute; top: -230px; right: -145px; width: 420px; height: 420px; border: 1px solid rgba(0,107,94,.12); border-radius: 50%; box-shadow: 0 0 0 44px rgba(0,107,94,.025), 0 0 0 88px rgba(248,170,32,.02); content: ""; pointer-events: none; } .pricing-v2-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(310px, .7fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; padding-block: clamp(3.15rem, 6vw, 5.3rem); } .pricing-v2-hero-copy { max-width: 760px; } .pricing-v2-hero-copy .eyebrow { margin-bottom: .8rem; } .pricing-v2-hero-copy h1 { max-width: 760px; margin: 0; color: var(--pricing-ink); font-size: clamp(3rem, 5.5vw, 5rem); font-weight: 760; letter-spacing: -.055em; line-height: .98; } .pricing-v2-hero-copy h1 span { display: block; color: var(--pricing-orange); } .pricing-v2-lead { max-width: 720px; margin: 1.25rem 0 0; color: var(--pricing-muted); font-size: clamp(1rem, 1.35vw, 1.13rem); line-height: 1.65; } .pricing-v2-lead strong { color: var(--pricing-ink); } .pricing-v2-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.65rem; } .pricing-v2-actions .btn { min-height: 49px; margin: 0; padding-inline: 1.15rem; } .pricing-v2-primary { box-shadow: 0 11px 24px rgba(0,107,94,.18); } .pricing-v2-secondary { min-width: 180px; } .pricing-v2-trust { display: flex; flex-wrap: wrap; gap: .7rem 1.15rem; margin: 1.4rem 0 0; padding: 0; color: #315d57; font-size: .8rem; font-weight: 750; list-style: none; } .pricing-v2-trust li { display: inline-flex; align-items: center; gap: .42rem; } .pricing-v2-trust li > span { width: 20px; height: 20px; display: inline-grid; place-items: center; flex: 0 0 20px; border-radius: 50%; color: #fff; background: var(--pricing-green); font-size: .68rem; line-height: 1; } .pricing-v2-summary { position: relative; min-width: 0; overflow: hidden; color: #fff; border: 1px solid rgba(255,255,255,.22); border-radius: 22px; padding: 1.55rem; background: linear-gradient(145deg, #005b52 0%, #006b5e 55%, #087b6d 100%); box-shadow: 0 24px 50px rgba(0,78,72,.18); } .pricing-v2-summary::after { position: absolute; right: -70px; bottom: -105px; width: 210px; height: 210px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; box-shadow: 0 0 0 28px rgba(255,255,255,.03), 0 0 0 56px rgba(255,255,255,.025); content: ""; pointer-events: none; } .pricing-v2-summary-label { position: relative; z-index: 1; display: block; color: #ffc44f; font-size: .71rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } .pricing-v2-summary > strong { position: relative; z-index: 1; display: block; margin: .4rem 0 .15rem; color: #fff; font-size: clamp(2.85rem, 4.4vw, 4rem); font-weight: 850; letter-spacing: -.07em; line-height: 1; white-space: nowrap; } .pricing-v2-summary > strong span { font-size: .45em; font-weight: 700; letter-spacing: -.02em; } .pricing-v2-summary > p { position: relative; z-index: 1; margin: .55rem 0 0; color: #effaf8; font-size: .88rem; font-weight: 700; } .pricing-v2-summary > small { position: relative; z-index: 1; color: #cfe7e2; font-size: .76rem; } .pricing-v2-summary-benefits { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1.3rem -.5rem -.5rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.2); } .pricing-v2-summary-benefits > div { min-width: 0; display: grid; justify-items: center; gap: .35rem; padding: .25rem .45rem; color: #e9f7f4; font-size: .64rem; font-weight: 700; line-height: 1.25; text-align: center; } .pricing-v2-summary-benefits > div + div { border-left: 1px solid rgba(255,255,255,.18); } .pricing-v2-mini-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: #064f48; background: #e7f6f2; } .pricing-v2-mini-icon svg { width: 18px; height: 18px; } .pricing-v2-section { padding-block: clamp(3.3rem, 5.5vw, 5.2rem); } .pricing-v2-section-soft { border-block: 1px solid #e1ebe8; background: linear-gradient(180deg, #f8fbfa 0%, #f5f9f7 100%); } .pricing-v2-heading { max-width: 850px; margin-bottom: 1.75rem; } .pricing-v2-section-kicker { display: block; margin-bottom: .55rem; color: var(--pricing-green); font-size: .7rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } .pricing-v2-heading h2, .pricing-v2-wide-copy h2 { margin: 0; color: var(--pricing-ink); font-size: clamp(2rem, 3.2vw, 3.05rem); font-weight: 730; letter-spacing: -.045em; } .pricing-v2-heading > p { max-width: 830px; margin: .8rem 0 0; line-height: 1.65; } .pricing-v2-tier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .pricing-v2-tier-card { position: relative; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; border: 1px solid var(--pricing-line); border-radius: 18px; padding: 1.45rem; background: #fff; box-shadow: 0 12px 32px rgba(0,78,72,.055); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .pricing-v2-tier-card:hover { transform: translateY(-2px); border-color: #b9d9d2; box-shadow: 0 18px 38px rgba(0,78,72,.09); } .pricing-v2-tier-card-featured { border-color: #f0d5b8; background: linear-gradient(145deg, #fffaf3 0%, #fff 72%); box-shadow: 0 14px 34px rgba(164,90,0,.075); } .pricing-v2-popular { position: absolute; top: 0; right: 1.2rem; transform: translateY(-50%); border: 1px solid #f1d29f; border-radius: 999px; padding: .18rem .58rem; color: #8a4b00; background: #fff7e7; font-size: .65rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; } .pricing-v2-tier-icon, .pricing-v2-wide-icon, .pricing-v2-info-icon, .pricing-v2-save-icon { display: grid; place-items: center; flex: 0 0 auto; color: var(--pricing-green); background: #e7f6f2; } .pricing-v2-tier-icon { width: 48px; height: 48px; border-radius: 15px; } .pricing-v2-tier-card-featured .pricing-v2-tier-icon { color: #a85a00; background: #fff0d6; } .pricing-v2-tier-icon svg { width: 23px; height: 23px; } .pricing-v2-tier-copy { min-width: 0; } .pricing-v2-card-label { display: block; margin-bottom: .35rem; color: #176b60; font-size: .78rem; font-weight: 820; } .pricing-v2-tier-copy > strong { display: block; color: var(--pricing-ink); font-size: clamp(1.55rem, 2.2vw, 2rem); font-weight: 850; letter-spacing: -.045em; line-height: 1.05; } .pricing-v2-tier-copy > strong span { font-size: .53em; font-weight: 700; letter-spacing: -.01em; } .pricing-v2-tier-copy > p { margin: .65rem 0 0; color: var(--pricing-muted); font-size: .84rem; line-height: 1.55; } .pricing-v2-wide-card { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(220px, .34fr); gap: 1.25rem 1.5rem; align-items: start; border: 1px solid var(--pricing-line); border-radius: 20px; padding: clamp(1.35rem, 2.7vw, 2rem); background: #fff; box-shadow: 0 14px 36px rgba(0,78,72,.065); } .pricing-v2-wide-icon { width: 54px; height: 54px; border-radius: 17px; } .pricing-v2-wide-icon svg { width: 26px; height: 26px; } .pricing-v2-wide-copy { min-width: 0; } .pricing-v2-wide-copy h2 { font-size: clamp(1.8rem, 2.7vw, 2.55rem); } .pricing-v2-wide-copy > p { margin: .65rem 0 0; line-height: 1.62; } .pricing-v2-wide-copy .pricing-v2-detail { font-size: .86rem; } .pricing-v2-wide-copy .pricing-v2-detail strong { color: var(--pricing-ink); } .pricing-v2-discounts { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; } .pricing-v2-discounts span { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid #cee4df; border-radius: 999px; padding: .38rem .65rem; color: #375f59; background: #f4fbf9; font-size: .73rem; font-weight: 700; } .pricing-v2-discounts strong { color: var(--pricing-ink); } .pricing-v2-discounts b { color: var(--pricing-green); } .pricing-v2-save-panel { align-self: stretch; display: flex; flex-direction: column; justify-content: center; border: 1px solid #f0ddc7; border-radius: 16px; padding: 1.15rem; background: linear-gradient(145deg, #fff8ef, #fffdf9); } .pricing-v2-save-icon { width: 40px; height: 40px; margin-bottom: .65rem; color: #c45b11; background: #ffecd8; border-radius: 12px; } .pricing-v2-save-icon svg { width: 20px; height: 20px; } .pricing-v2-save-panel strong { color: #b74d08; font-size: 1rem; line-height: 1.35; } .pricing-v2-save-panel p { margin: .5rem 0 0; color: #6e5a49; font-size: .78rem; line-height: 1.5; } .pricing-v2-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .pricing-v2-info-card { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; border: 1px solid var(--pricing-line); border-radius: 18px; padding: clamp(1.3rem, 2.5vw, 1.8rem); background: #fff; } .pricing-v2-info-icon { width: 47px; height: 47px; border-radius: 15px; } .pricing-v2-info-icon svg { width: 22px; height: 22px; } .pricing-v2-info-card h2 { margin: .05rem 0 .7rem; color: var(--pricing-ink); font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 750; letter-spacing: -.035em; } .pricing-v2-info-card p { margin: .5rem 0 0; font-size: .88rem; line-height: 1.6; } .pricing-v2-final { position: relative; overflow: hidden; color: #fff; background: linear-gradient(135deg, #004e48 0%, #005b52 55%, #087b6d 100%); } .pricing-v2-final::after { position: absolute; right: -120px; top: -180px; width: 360px; height: 360px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 44px rgba(255,255,255,.025), 0 0 0 88px rgba(255,255,255,.018); content: ""; } .pricing-v2-final-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; padding-block: clamp(2.5rem, 5vw, 4rem); } .pricing-v2-final h2 { max-width: 760px; margin: 0; color: #fff; font-size: clamp(1.9rem, 3vw, 2.8rem); } .pricing-v2-final p { max-width: 680px; margin: .7rem 0 0; color: #d5eae6; } .pricing-v2-final .btn { min-height: 50px; margin: 0; padding-inline: 1.15rem; white-space: nowrap; } @media (max-width: 991px) { .pricing-v2-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-block: 3.2rem; } .pricing-v2-hero-copy { max-width: 820px; } .pricing-v2-summary { width: min(100%, 720px); } .pricing-v2-summary > strong { font-size: clamp(3rem, 8vw, 4rem); } .pricing-v2-tier-grid { grid-template-columns: 1fr 1fr; } .pricing-v2-tier-card-featured { grid-column: span 1; } .pricing-v2-tier-card:last-child { grid-column: 1 / -1; } .pricing-v2-wide-card { grid-template-columns: auto minmax(0, 1fr); } .pricing-v2-save-panel { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .25rem .75rem; } .pricing-v2-save-icon { margin: 0; } .pricing-v2-save-panel p { flex-basis: 100%; margin-top: .35rem; } .pricing-v2-info-grid { grid-template-columns: 1fr; } .pricing-v2-final-inner { grid-template-columns: 1fr; gap: 1.25rem; } .pricing-v2-final .btn { width: fit-content; } } @media (max-width: 767px) { .pricing-v2-hero-grid { gap: 1.65rem; padding-block: 2.35rem 2.65rem; } .pricing-v2-hero-copy h1 { font-size: clamp(2.55rem, 12vw, 3.6rem); } .pricing-v2-lead { margin-top: 1rem; font-size: .96rem; } .pricing-v2-actions { display: grid; grid-template-columns: 1fr; margin-top: 1.3rem; } .pricing-v2-actions .btn { width: 100%; } .pricing-v2-trust { display: grid; grid-template-columns: 1fr; gap: .55rem; margin-top: 1.15rem; } .pricing-v2-summary { border-radius: 18px; padding: 1.25rem; } .pricing-v2-summary-benefits { margin-inline: -.25rem; } .pricing-v2-summary-benefits > div { padding-inline: .3rem; font-size: .6rem; } .pricing-v2-section { padding-block: 3rem; } .pricing-v2-heading { margin-bottom: 1.4rem; } .pricing-v2-heading h2 { font-size: clamp(1.95rem, 8vw, 2.5rem); } .pricing-v2-heading > p { font-size: .9rem; } .pricing-v2-tier-grid { grid-template-columns: 1fr; gap: .85rem; } .pricing-v2-tier-card, .pricing-v2-tier-card-featured, .pricing-v2-tier-card:last-child { grid-column: auto; } .pricing-v2-tier-card { padding: 1.2rem; } .pricing-v2-wide-card { grid-template-columns: 1fr; gap: 1rem; padding: 1.25rem; } .pricing-v2-wide-icon { width: 48px; height: 48px; } .pricing-v2-save-panel { grid-column: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .25rem .7rem; } .pricing-v2-save-panel p { grid-column: 1 / -1; } .pricing-v2-info-card { grid-template-columns: 1fr; gap: .75rem; padding: 1.2rem; } .pricing-v2-info-icon { width: 44px; height: 44px; } .pricing-v2-final-inner { padding-block: 2.7rem; } .pricing-v2-final .btn { width: 100%; } } @media (max-width: 430px) { .pricing-v2-hero { background: linear-gradient(145deg, #f7fbfa 0%, #fff 58%, #fff8f1 100%); } .pricing-v2-hero-grid { padding-block: 2rem 2.35rem; } .pricing-v2-hero-copy .eyebrow { margin-bottom: .55rem; font-size: .68rem; } .pricing-v2-hero-copy h1 { font-size: clamp(2.35rem, 12.5vw, 3rem); } .pricing-v2-summary > strong { font-size: clamp(2.7rem, 14vw, 3.5rem); } .pricing-v2-summary-benefits { grid-template-columns: 1fr; gap: .5rem; margin-top: 1rem; } .pricing-v2-summary-benefits > div { grid-template-columns: 34px 1fr; justify-items: start; align-items: center; text-align: left; } .pricing-v2-summary-benefits > div + div { border-left: 0; border-top: 1px solid rgba(255,255,255,.14); padding-top: .55rem; } .pricing-v2-tier-card { grid-template-columns: 42px minmax(0, 1fr); gap: .8rem; } .pricing-v2-tier-icon { width: 42px; height: 42px; border-radius: 13px; } .pricing-v2-tier-icon svg { width: 20px; height: 20px; } .pricing-v2-discounts { display: grid; grid-template-columns: 1fr; } .pricing-v2-discounts span { width: 100%; justify-content: space-between; border-radius: 12px; } .pricing-v2-save-panel { grid-template-columns: 1fr; } .pricing-v2-save-panel p { grid-column: 1; } } @media (prefers-reduced-motion: reduce) { .pricing-v2-tier-card { transition: none; } .pricing-v2-tier-card:hover { transform: none; } }