.home-hero, .home-items, .home-plans, .home-card, .home-steps, .home-faq, .home-cta, .home-prices { padding-block: clamp(2.5rem, 7vw, 5rem); } .home .home-alt { background: var(--stone-2); } .home .home-head { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); } .home .home-head h2, .home-cta h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); } .home h1 { font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.05; margin-bottom: 1rem; } .home em { font-style: normal; color: var(--accent); } .home .home-actions { margin-block: 1.5rem .75rem; } .home .home-media img, .home .home-media video, .home .home-items-list img, .home .home-plan > img, .home .home-steps-list img { display: block; max-width: 100%; height: auto; } .home .home-media { margin-bottom: 1.5rem; } .home-hero > .home-media, .home-cta > .home-media { margin-bottom: 0; } .home .home-media video.home-size-desktop { display: none; } @media (min-width: 720px) { .home .home-media video.home-size-phone { display: none; } .home .home-media video.home-size-desktop { display: block; } } .home .home-media img.home-poster { display: none; } @media (prefers-reduced-motion: reduce) { .home .home-media video[autoplay]:not(:has(track)), .home .home-media video[data-autoplay]:not(:has(track)) { display: none; } .home .home-media img.home-poster { display: block; } .home .home-media img.home-poster.home-size-desktop { display: none; } } @media (prefers-reduced-motion: reduce) and (min-width: 720px) { .home .home-media img.home-poster.home-size-phone { display: none; } .home .home-media img.home-poster.home-size-desktop { display: block; } } .home .home-media.home-stack { display: grid; } .home .home-media.home-stack { grid-template-rows: 100%; } .home .home-media.home-stack > * { grid-area: 1 / 1; } .home .home-media.home-stack > video[data-autoplay]:not([data-live]):not([controls]) { opacity: 0; } .home .home-media img.home-still.home-size-desktop { display: none; } @media (min-width: 720px) { .home .home-media img.home-still.home-size-phone { display: none; } .home .home-media img.home-still.home-size-desktop { display: block; } } .home .home-items-list img.home-icon { width: 24px; height: 24px; margin-bottom: .5rem; } .home .home-items-list, .home .home-plans-list, .home .home-steps-list, .home .home-rows, .home .home-bullets { list-style: none; margin: 0; padding: 0; } .home .home-items-list, .home .home-plans-list, .home .home-steps-list { display: grid; gap: 1.5rem; } @media (min-width: 720px) { .home .home-items-list, .home .home-steps-list { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .home .home-plans-list { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); } } .home .home-items-list li, .home .home-steps-list li, .home .home-plan { min-width: 0; } .home .home-items-list h3, .home .home-steps-list h3, .home .home-plan h3 { margin-block: .75rem .35rem; font-size: 1.25rem; } .home .home-steps-list { counter-reset: home-step; } .home .home-steps-list h3::before { counter-increment: home-step; content: counter(home-step) ". "; } .home .home-bullets { margin-block: .75rem 1.25rem; } .home .home-bullets li { padding-left: 1.25rem; position: relative; } .home .home-bullets li::before { content: "✓"; position: absolute; left: 0; color: var(--good); } .home .home-plan .btn { width: 100%; } .home .home-plan-peek p { margin-block: 1rem .5rem; font-size: .875rem; } .home .home-plan-peek-row { display: flex; gap: .375rem; } .home .home-plan-peek-row img { flex: 1 1 0; min-width: 0; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: .75rem; } .home .home-plan-link { margin-block: 1rem .5rem; font-weight: 600; } .home blockquote { margin: 0; font: 500 1.25rem/1.4 var(--serif); } .home figcaption { margin-top: .5rem; color: var(--muted); font-size: .9375rem; } .home .home-sample { max-width: 36rem; padding: 1.25rem 1.5rem; border-radius: 18px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); } .home .home-meta { color: var(--muted); margin-bottom: 1rem; } .home .home-rows li { display: flex; justify-content: space-between; gap: 1rem; padding-block: .5rem; border-top: 1px solid var(--line); } .home .home-faq-list { max-width: 48rem; } .home .home-faq-list details { border-bottom: 1px solid var(--line); } .home .home-faq-list summary { cursor: pointer; padding-block: 1rem; font-weight: 600; min-height: 44px; } .home .home-answer { padding-bottom: 1rem; color: var(--muted); } .home-cta { text-align: center; } .home-cta .home-line { max-width: 36rem; margin: 1rem auto 0; color: var(--muted); } .home .note { margin-top: .5rem; } .home .home-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; } .home .home-tag { margin: .75rem 0 0; font-size: .875rem; font-weight: 600; color: var(--muted); } .home .home-note { max-width: 44rem; margin-top: 1.5rem; color: var(--muted); } .home .home-pick-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } @media (min-width: 720px) { .home .home-pick-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .home .home-pick-list a, .home .home-pick-card { display: grid; gap: .5rem; text-decoration: none; color: var(--ink); } .home .home-pick-list img { width: 100%; height: auto; border-radius: 12px; } .home .home-pick-label { font-weight: 600; } .home .home-price-list, .home .home-ticks, .home .home-billing-list { list-style: none; margin: 0; padding: 0; } .home .home-price-list { display: grid; gap: 1rem; } @media (min-width: 720px) { .home .home-price-list { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } } .home .home-price { display: grid; align-content: start; gap: .35rem; min-width: 0; padding: 1.5rem; border-radius: 18px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); } .home .home-price h3 { margin: 0; font-size: 1rem; } .home .home-price-amount { margin: .25rem 0 0; font-size: 2.5rem; line-height: 1; font-weight: 700; color: var(--ink); } .home .home-price-for { margin: 0; color: var(--muted); } .home .home-price-day { margin: .75rem 0 0; padding-top: .75rem; border-top: 1px solid var(--line); font-weight: 600; } .home .home-price-then { margin: 0 0 1rem; font-weight: 600; } .home .home-price .btn { justify-content: center; } .home .home-price-plans { grid-column: 1 / -1; } .home .home-price-plan { display: grid; align-content: start; gap: .35rem; min-width: 0; margin-top: .75rem; } .home .home-price-plan :is(h3, h4) { margin: 0; font-size: .9375rem; } .home .home-price-badge { justify-self: start; margin: 0; font-size: .875rem; font-weight: 600; color: var(--accent); } @media (min-width: 720px) { .home .home-price-plans { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); column-gap: 2rem; } .home .home-price-plans > :not(.home-price-plan) { grid-column: 1 / -1; } } .home .home-ticks { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1.25rem; } .home .home-ticks li { position: relative; padding-left: 1.5rem; font-weight: 600; } .home .home-ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--good); } .home .home-price-note { margin-top: .75rem; color: var(--muted); font-size: .9375rem; } .home .home-billing-list { display: grid; gap: 1.25rem; } @media (min-width: 720px) { .home .home-billing-list { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } } .home .home-billing-list li { min-width: 0; } .home .home-billing-list h3 { margin: 0 0 .25rem; font-size: 1.25rem; } .home .home-billing-list p { margin: 0; }