:root { color-scheme: light; --paper: #fbfaf6; --cream: #f2efe5; --ink: #233f34; --forest: #184d3b; --forest-deep: #123c2f; --muted: #657168; --line: #dedfd4; --coral: #f05a35; --coral-cta: #c94322; --coral-hover: #d34421; --white: #fffefa; --font: "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif; --radius: 18px; --max-width: 1192px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } body, h1, h2, h3, p, figure, dl, dd { margin: 0; } button, input, select { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } button { color: inherit; } a { color: inherit; text-underline-offset: .2em; } img { max-width: 100%; height: auto; display: block; } button, a, summary { touch-action: manipulation; } svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } [hidden] { display: none !important; } ::selection { background: #f9bba6; color: var(--forest-deep); } :focus-visible { outline: 3px solid #c84323; outline-offset: 5px; } .container { width: min(var(--max-width), calc(100% - 112px)); margin-inline: auto; } .svg-library, .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: fixed; left: 20px; top: -100px; z-index: 100; background: var(--forest); color: white; padding: 12px 20px; border-radius: 8px; } .skip-link:focus { top: 16px; } .button { display: inline-flex; align-items: center; justify-content: center; gap: 23px; min-height: 58px; padding: 15px 25px; border: 1px solid transparent; border-radius: 7px; background: var(--forest); color: white; font-size: 15px; font-weight: 650; line-height: 1.4; text-decoration: none; transition: background .2s, transform .2s, box-shadow .2s; } .button svg { width: 20px; height: 20px; transition: transform .2s; } .button:hover { background: var(--forest-deep); box-shadow: 0 6px 18px #123c2f12; transform: translateY(-2px); } .button:hover svg { transform: translateX(3px); } .button:active { transform: translateY(0); } .button-primary { background: var(--coral-cta); color: #fff; box-shadow: 0 5px 14px #cf4d2512; } .button-primary:hover { background: var(--coral-hover); box-shadow: 0 7px 22px #cf4d2520; } .button-small { min-height: 46px; padding: 11px 18px; font-size: 13px; gap: 18px; } .button-small svg { width: 17px; height: 17px; } .eyebrow { color: var(--forest); font-size: 10px; font-weight: 750; letter-spacing: .15em; line-height: 1.6; } .section-space { padding-block: 106px; } .site-header { border-bottom: 1px solid #dedfd480; background: var(--paper); } .header-inner { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { display: inline-flex; flex-shrink: 0; text-decoration: none; } .brand img { width: 154px; height: 42px; } .header-note { font-size: 12px; color: var(--muted); margin-left: 34px; letter-spacing: .01em; } .hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; column-gap: 64px; padding-top: 46px; padding-bottom: 52px; } .hero-copy { padding-block: 12px 28px; } .hero .eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; } .little-sun { font-size: 22px; line-height: 1; color: var(--coral); font-weight: 400; } h1 { font-size: clamp(52px, 5.05vw, 70px); font-weight: 650; letter-spacing: -.058em; line-height: 1.035; color: var(--forest); } h1 > span { color: #718273; } .hero-description { max-width: 390px; margin-top: 25px; margin-bottom: 26px; font-size: 16px; line-height: 1.75; color: #5a655d; } .cta-note { display: flex; align-items: center; gap: 7px; margin-top: 13px; font-size: 12px; color: #626d63; line-height: 1.6; } .cta-note svg { height: 14px; width: 14px; color: var(--forest); stroke-width: 2; } .hero-signoff { position: relative; margin-top: 33px; padding-left: 40px; color: #7b8279; font-size: 11px; line-height: 1.6; } .signoff-line { position: absolute; left: 0; top: 8px; width: 25px; border-top: 1px solid #9aa595; } .hero-visual { min-width: 0; position: relative; } .photo-stage { position: relative; height: 605px; border-radius: 245px 245px 16px 16px; isolation: isolate; } .hospitality-photo { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .photo-wash { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, #203b3010, transparent 25%, #16332510); pointer-events: none; } .stage-caption { position: absolute; top: 55px; left: 50%; transform: translateX(-50%); width: max-content; display: flex; align-items: center; gap: 6px; padding: 6px 11px; color: #fffefa; background: #244332a8; backdrop-filter: blur(8px); font-size: 7px; font-weight: 650; letter-spacing: .12em; border: 1px solid #ffffff30; border-radius: 99px; } .stage-caption > span { width: 4px; height: 4px; border-radius: 50%; background: #dfecce; } .photo-bottom { position: absolute; bottom: 17px; left: 24px; right: 24px; color: #fffefa; font-size: 7px; letter-spacing: .15em; font-weight: 650; text-shadow: 0 1px 5px #16332590; } .phone { position: absolute; top: 111px; left: 39px; width: 248px; min-height: 445px; background: #fcfcf7; border: 5px solid #28483b; border-radius: 36px; padding: 0 17px 21px; box-shadow: 0 26px 45px #14271e4a, inset 0 0 0 1px #ffffff70; transform: rotate(-4deg); transition: transform .35s; } .phone:hover, .phone:focus-visible { transform: rotate(-1deg) translateY(-3px); } .phone-top { height: 30px; position: relative; display: flex; justify-content: space-between; align-items: center; font-size: 8px; font-weight: 700; padding: 0 3px; } .phone-island { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 65px; height: 15px; background: #28483b; border-radius: 20px; } .signal { font-size: 8px; letter-spacing: -1px; } .signal span { margin-left: 3px; font-size: 12px; } .phone-brand { height: 41px; display: flex; align-items: center; border-bottom: 1px solid #e6e9df; font-size: 13px; font-weight: 750; letter-spacing: -.05em; } .phone-brand img { margin-right: 4px; } .phone-menu { margin-left: auto; font-size: 22px; letter-spacing: 0; line-height: 1; } .demo-screen { padding-top: 21px; min-height: 339px; } .phone-eyebrow { font-size: 6px; font-weight: 750; letter-spacing: .15em; color: #6c796d; } .phone h2 { font-size: 26px; font-weight: 650; line-height: 1.1; letter-spacing: -.045em; margin-top: 9px; color: var(--forest); } .phone-description { font-size: 9px; line-height: 1.5; color: #687467; margin-top: 9px; max-width: 185px; } .camera-frame { position: relative; height: 142px; margin-top: 18px; padding: 13px 10px; background: #e9eddf; border-radius: 10px; overflow: hidden; } .frame-corner { position: absolute; width: 12px; height: 12px; border-color: var(--forest); border-style: solid; border-width: 0; z-index: 2; } .top-left { left: 7px; top: 7px; border-top-width: 2px; border-left-width: 2px; border-radius: 3px 0 0; } .top-right { right: 7px; top: 7px; border-top-width: 2px; border-right-width: 2px; border-radius: 0 3px 0 0; } .bottom-left { left: 7px; bottom: 7px; border-bottom-width: 2px; border-left-width: 2px; border-radius: 0 0 0 3px; } .bottom-right { right: 7px; bottom: 7px; border-bottom-width: 2px; border-right-width: 2px; border-radius: 0 0 3px; } .sample-document { background: #f8f8eb; border: 1px solid #d8dec9; height: 114px; width: 100%; padding: 10px; border-radius: 6px; transform: rotate(3deg); box-shadow: 0 3px 8px #2639230a; } .document-top { display: flex; justify-content: space-between; color: #69755c; font-size: 5px; font-weight: 700; line-height: 1.5; letter-spacing: .08em; } .document-top svg { height: 15px; width: 15px; } .document-person { display: flex; gap: 12px; margin-top: 8px; } .portrait { height: 43px; width: 34px; background: #dce1c8; border-radius: 3px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .portrait svg { width: 35px; height: 35px; color: #8e9a7d; fill: #b8c3a5; stroke-width: 1; transform: translateY(7px); } .document-person small { font-size: 4px; font-weight: 600; display: block; letter-spacing: .08em; color: #7e8872; } .document-person strong { display: block; font-size: 7px; letter-spacing: .05em; margin-top: 3px; color: #56664b; } .document-rule { display: block; width: 72px; height: 3px; background: #d1d8bf; margin-top: 6px; } .document-rule.short { width: 44px; margin-top: 4px; } .document-footer { font-size: 5px; letter-spacing: .15em; color: #899176; border-top: 1px solid #dce0cb; margin-top: 6px; padding-top: 4px; } .scan-line { position: absolute; left: 10px; right: 10px; top: 25%; height: 1px; background: #83a077; box-shadow: 0 0 7px #83a077; animation: scanning 3s ease-in-out 3; opacity: .8; } @keyframes scanning { 0%, 100% { top: 18%; opacity: .2; } 50% { top: 82%; opacity: .8; } } .phone-hint { display: flex; align-items: center; gap: 8px; padding-top: 15px; color: #64755e; font-size: 8px; line-height: 1.5; } .phone-hint svg { height: 18px; width: 18px; } .phone-home { position: absolute; height: 3px; width: 70px; border-radius: 10px; background: #3b4c3d; bottom: 7px; left: 50%; transform: translateX(-50%); } .sample-fields { margin-top: 14px; } .sample-fields > div { margin-top: 7px; } .sample-fields dt { font-size: 7px; color: #73806b; margin-bottom: 2px; } .sample-fields dd { padding: 5px 8px; font-size: 10px; background: #f1f3e9; border: 1px solid #dee4d3; border-radius: 5px; display: flex; align-items: center; justify-content: space-between; line-height: 1.4; } .sample-fields dd svg { height: 10px; width: 10px; color: #759668; } .demo-screen[data-demo-screen="2"] .phone-hint { font-size: 7px; padding-top: 12px; } .guest-card { margin-top: 17px; background: #eef2e5; border-radius: 10px; padding: 13px 12px 0; text-align: center; border: 1px solid #e0e6d6; } .guest-avatar { background: #d7e0c4; color: #5c734c; height: 38px; width: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; margin: 0 auto 6px; } .guest-card > strong { display: block; font-size: 13px; } .guest-card > span { display: block; font-size: 7px; color: #73806a; margin-top: 1px; } .guest-saved { display: inline-flex; align-items: center; gap: 3px; font-size: 7px; color: #506e3f; padding: 3px 6px; background: #dce9cd; border-radius: 20px; margin-top: 9px; } .guest-saved svg { width: 10px; height: 10px; } .guest-stay { text-align: left; margin-top: 12px; border-top: 1px solid #dce3ce; padding-block: 9px; } .guest-stay > span { display: block; font-size: 6px; color: #73806a; } .guest-stay > strong { display: flex; align-items: center; justify-content: space-between; font-size: 8px; margin-top: 3px; } .guest-stay svg { width: 12px; height: 12px; } .floating-note { display: flex; align-items: center; gap: 10px; position: absolute; bottom: 91px; right: -18px; z-index: 2; padding: 16px 20px 16px 15px; border: 1px solid #ffffffc0; border-radius: 10px; background: #fffef9f5; box-shadow: 0 9px 32px #263b2824; color: #64715f; font-size: 11px; line-height: 1.6; transform: rotate(3deg); } .floating-note strong { color: var(--forest); font-weight: 650; } .note-icon { display: flex; align-items: center; justify-content: center; width: 33px; height: 33px; border-radius: 50%; background: #e8efde; color: #527640; } .note-icon svg { width: 17px; height: 17px; } .demo-controls { display: grid; grid-template-columns: repeat(3, 1fr); padding: 8px; gap: 3px; margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fffefa; } .demo-tab { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 7px 5px; font-size: 12px; border: 0; border-radius: 5px; background: transparent; cursor: pointer; color: #626d63; transition: background .2s, color .2s; } .demo-tab > span { font-size: 10px; color: #626d63; } .demo-tab > svg { width: 11px; height: 11px; margin-left: auto; } .demo-tab[aria-selected="true"] { background: #e9efdf; color: var(--forest); font-weight: 650; } .demo-tab[aria-selected="true"] > span { color: #507146; } .demo-tab:hover { background: #f0f3e9; } .demo-caption { margin-top: 9px; text-align: center; font-size: 10px; color: #626d63; } .demo-caption > span:first-child { color: #5c7053; font-size: 12px; } .caption-divider { padding-inline: 5px; } .no-js-note { padding: 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; margin-top: 10px; } .promise-bar { background: #f0f0e7; border-block: 1px solid #e5e6da; } .promise-inner { min-height: 78px; display: flex; justify-content: space-around; align-items: center; gap: 24px; } .promise-inner > span { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 550; color: #59694f; } .promise-inner svg { height: 19px; width: 19px; color: #687b5f; } .section-heading { max-width: 670px; } .section-heading .eyebrow { margin-bottom: 19px; } .section-heading h2, .offer-copy h2, .faq-heading h2 { font-size: clamp(32px, 3.5vw, 46px); line-height: 1.16; font-weight: 600; letter-spacing: -.045em; } .section-heading h2 > span, .offer-copy h2 > span, .faq-heading h2 > span { color: #788773; } .section-heading > p:last-child { max-width: 490px; margin-top: 21px; color: var(--muted); font-size: 16px; line-height: 1.8; } .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 58px; margin-top: 50px; } .step { border-top: 1px solid #bfc8b4; padding-top: 20px; } .step-top { display: flex; justify-content: space-between; align-items: center; } .step-number { font-family: Georgia, "Times New Roman", serif; font-size: 45px; line-height: 1; color: #a8b69b; font-weight: 400; letter-spacing: -.06em; } .step-top svg { height: 27px; width: 27px; color: #7d936f; stroke-width: 1.2; } .step h3 { font-size: 23px; letter-spacing: -.035em; margin-top: 22px; font-weight: 600; } .step p { margin-top: 12px; max-width: 300px; color: var(--muted); font-size: 15px; line-height: 1.8; } .step-footnote { display: block; margin-top: 19px; color: #586d49; font-size: 12px; font-weight: 550; } .care-section { background: var(--forest); color: #fffef3; position: relative; overflow: hidden; } .care-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; padding-block: 80px; } .care-copy { position: relative; } .care-copy .eyebrow { color: #c2d0af; font-size: 8px; } .care-copy h2 { margin-top: 22px; font-size: clamp(34px, 3.6vw, 47px); line-height: 1.17; font-weight: 500; letter-spacing: -.04em; } .care-copy h2 span { color: #b7cba6; } .care-copy > p:not(.eyebrow) { font-size: 13px; color: #d0d9c7; margin-top: 25px; line-height: 1.8; } .care-flower { position: absolute; left: 302px; bottom: -22px; color: #769b62; font-size: 100px; line-height: 1; transform: rotate(15deg); font-family: Georgia, serif; } .care-points { padding-top: 3px; } .care-points article { display: flex; gap: 22px; padding-block: 25px; border-bottom: 1px solid #aec29e33; } .care-points article:first-child { padding-top: 0; } .care-points article:last-child { border-bottom: 0; padding-bottom: 0; } .care-icon { width: 34px; height: 34px; display: grid; place-items: center; color: #c8d6b8; flex-shrink: 0; } .care-icon svg { width: 27px; height: 27px; stroke-width: 1.25; } .care-points h3 { font-size: 17px; font-weight: 550; letter-spacing: -.02em; } .care-points p { margin-top: 9px; max-width: 350px; color: #ccdac3; font-size: 14px; line-height: 1.8; } .care-section :focus-visible { outline-color: #ffbd87; } .offer-section { display: grid; grid-template-columns: .95fr 1fr; gap: 100px; align-items: center; } .offer-art { position: relative; min-height: 411px; border-radius: 13px; background: #e9ecdc; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 27px 32px; } .offer-art::before { content: ""; position: absolute; width: 620px; height: 620px; right: -380px; top: -70px; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 15px, #b5c4a755 15.5px 16px); } .offer-art-label, .offer-art-bottom { position: relative; font-size: 8px; font-weight: 650; letter-spacing: .14em; color: #687d59; } .offer-number { display: flex; align-items: center; position: relative; color: var(--forest); font-family: Georgia, "Times New Roman", serif; font-size: 210px; letter-spacing: -.09em; line-height: 1; padding-bottom: 3px; } .offer-number > span { font-family: var(--font); font-size: 60px; margin-left: 13px; align-self: flex-start; line-height: 1; margin-top: 13px; color: var(--coral); font-weight: 400; } .offer-line { position: absolute; bottom: 60px; width: 28px; height: 1px; background: #96a67f; } .offer-copy .eyebrow { margin-bottom: 20px; } .offer-copy > p:not(.eyebrow):not(.offer-note) { color: var(--muted); font-size: 15px; max-width: 390px; line-height: 1.9; margin-top: 20px; } .offer-list { list-style: none; padding: 0; margin: 22px 0 26px; } .offer-list li { display: flex; gap: 8px; align-items: center; font-size: 12px; color: #59694f; margin-top: 9px; } .offer-list svg { height: 14px; width: 14px; stroke-width: 2; color: #718d60; } .offer-note { margin-top: 14px; color: #626d63; font-size: 12px; line-height: 1.8; } .faq-section { background: #f2f1e9; border-block: 1px solid #e8e7dc; padding-block: 83px; } .faq-inner { display: grid; grid-template-columns: .75fr 1.25fr; gap: 80px; align-items: start; } .faq-heading .eyebrow { margin-bottom: 18px; } .faq-heading h2 { font-size: 37px; } .faq-heading > p:last-child { color: var(--muted); font-size: 14px; margin-top: 18px; } .faq-list { border-top: 1px solid #d1d6c6; } .faq-list details { border-bottom: 1px solid #d1d6c6; } .faq-list summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; cursor: pointer; font-size: 14px; font-weight: 550; padding-block: 17px; line-height: 1.6; } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary::marker { content: ""; } .faq-list summary svg { width: 17px; height: 17px; color: #7f8c73; transition: transform .2s; } .faq-list details[open] summary svg { transform: rotate(45deg); } .faq-list summary:hover { color: #608143; } .faq-answer { padding: 0 30px 22px 0; color: #65715e; font-size: 14px; line-height: 1.9; } .faq-answer p + p { margin-top: 14px; } .faq-answer a { color: var(--forest); } .pricing-table-wrap { overflow-x: auto; margin-block: 16px; border: 1px solid #d5dacb; border-radius: 7px; } .pricing-table-wrap table { border-collapse: collapse; width: 100%; font-size: 12px; line-height: 1.5; text-align: left; font-variant-numeric: tabular-nums; } .pricing-table-wrap th, .pricing-table-wrap td { padding: 9px 12px; } .pricing-table-wrap thead { background: #e6eadc; color: #4c6540; } .pricing-table-wrap tbody tr + tr { border-top: 1px solid #dce1d0; } .pricing-table-wrap tbody th { font-weight: 550; } .pricing-table-wrap td:last-child, .pricing-table-wrap th:last-child { text-align: right; } .final-section { position: relative; text-align: center; padding-block: 84px 89px; } .final-mark { color: var(--coral); font-size: 39px; font-weight: 400; line-height: 1; margin-bottom: 20px; } .final-section .eyebrow { font-size: 9px; } .final-section h2 { font-size: clamp(35px, 4.5vw, 58px); line-height: 1.17; letter-spacing: -.05em; font-weight: 600; margin-top: 24px; } .final-section h2 > span { color: #7b8a71; } .final-section .button { margin-top: 29px; } .final-section .cta-note { justify-content: center; font-size: 10px; } .site-footer { border-top: 1px solid var(--line); } .footer-inner { display: flex; align-items: center; gap: 24px; min-height: 103px; } .footer-brand img { width: 132px; height: 36px; } .footer-signoff { color: #7a8570; font-size: 10px; margin-left: 9px; } .footer-inner nav { display: flex; align-items: center; gap: 22px; margin-left: auto; } .footer-inner nav a, .copyright { font-size: 9px; color: #6d7962; } .footer-inner nav a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; } .footer-inner nav a:hover { text-decoration: underline; } .copyright { margin-left: 14px; } .mobile-cta { display: none; } @media (min-width: 1600px) { :root { --max-width: 1280px; } .hero { column-gap: 95px; padding-block: 58px; } h1 { font-size: 76px; } .photo-stage { height: 650px; } .phone { top: 140px; left: 56px; } } @media (max-width: 1150px) { .container { width: calc(100% - 80px); } .hero { column-gap: 40px; } h1 { font-size: clamp(46px, 5.1vw, 59px); } .photo-stage { height: 560px; } .phone { left: 22px; top: 85px; width: 238px; } .stage-caption { top: 43px; font-size: 6px; } .floating-note { right: -14px; bottom: 69px; padding: 12px; font-size: 9px; } .care-inner { gap: 60px; } .care-flower { left: 260px; font-size: 80px; } .offer-section { gap: 65px; } .offer-art { min-height: 390px; padding: 25px; } .offer-number { font-size: 180px; } .offer-number > span { font-size: 44px; margin-left: 14px; } .faq-inner { gap: 55px; } .steps-grid { gap: 38px; } } @media (max-width: 900px) { .header-note { display: none; } .hero { gap: 29px; padding-top: 36px; padding-bottom: 38px; } .hero .eyebrow { font-size: 8px; gap: 7px; margin-bottom: 20px; } .little-sun { font-size: 17px; } h1 { font-size: 47px; } .hero-description { font-size: 14px; margin-top: 20px; line-height: 1.8; } .hero .button { font-size: 13px; gap: 19px; padding: 13px 18px; min-height: 52px; } .hero .cta-note { font-size: 12px; } .hero-signoff { margin-top: 25px; font-size: 9px; } .photo-stage { height: 515px; } .phone { left: 18px; top: 82px; width: 224px; transform: rotate(-3deg) scale(.92); transform-origin: left top; } .phone:hover, .phone:focus-visible { transform: rotate(-1deg) scale(.92); } .floating-note { bottom: 55px; right: -10px; gap: 7px; } .note-icon { width: 27px; height: 27px; } .demo-controls { padding: 5px; } .demo-tab { font-size: 11px; gap: 5px; } .demo-tab svg { display: none; } .demo-tab span { font-size: 9px; } .demo-caption { font-size: 9px; } .promise-inner { gap: 20px; min-height: 70px; } .promise-inner > span { font-size: 11px; gap: 7px; } .promise-inner svg { width: 16px; height: 16px; } .section-space { padding-block: 76px; } .section-heading h2 { font-size: 37px; } .steps-grid { gap: 27px; margin-top: 40px; } .step h3 { font-size: 21px; } .step p { font-size: 14px; } .step-footnote { font-size: 11px; } .care-inner { gap: 46px; padding-block: 64px; } .care-copy h2 { font-size: 34px; } .care-copy .eyebrow { font-size: 7px; } .care-points article { gap: 13px; padding-block: 20px; } .care-points h3 { font-size: 15px; } .care-points p { font-size: 13px; } .care-copy > p:not(.eyebrow) { font-size: 11px; } .care-flower { left: 210px; bottom: 8px; font-size: 66px; } .offer-section { gap: 43px; } .offer-art { min-height: 355px; padding: 22px; } .offer-number { font-size: 150px; } .offer-number > span { font-size: 35px; margin-left: 9px; } .offer-art-label, .offer-art-bottom { font-size: 6px; } .offer-copy .eyebrow { font-size: 8px; } .offer-copy h2 { font-size: 37px; } .offer-copy > p:not(.eyebrow):not(.offer-note) { font-size: 14px; } .offer-list li { font-size: 11px; } .faq-inner { grid-template-columns: .7fr 1.3fr; gap: 36px; } .faq-heading h2 { font-size: 31px; } .faq-list summary { font-size: 13px; min-height: 65px; } .footer-inner { flex-wrap: wrap; gap: 10px 20px; padding-block: 20px; min-height: 95px; } .footer-signoff { margin-left: 0; } .copyright { margin-left: auto; } } @media (max-width: 650px) { html { scroll-padding-top: 24px; } .container { width: calc(100% - 40px); } .header-inner { min-height: 75px; gap: 16px; } .brand img { width: 126px; height: 35px; } .header-inner .button-small { font-size: 10px; gap: 10px; min-height: 42px; padding: 10px 12px; } .header-inner .button-small svg { width: 14px; height: 14px; } .hero { grid-template-columns: 1fr; gap: 33px; padding-top: 36px; padding-bottom: 28px; } .hero-copy { padding: 0 2px; } .hero .eyebrow { font-size: 9px; margin-bottom: 18px; gap: 8px; } .little-sun { font-size: 20px; } h1 { font-size: clamp(43px, 11.4vw, 63px); line-height: 1.035; letter-spacing: -.055em; } h1 > span br { display: none; } .hero-description { font-size: 14px; line-height: 1.8; margin-top: 20px; max-width: 350px; margin-bottom: 22px; } .hero .button { min-height: 54px; font-size: 14px; padding: 14px 22px; gap: 30px; } .hero .cta-note { font-size: 12px; margin-top: 10px; } .hero-signoff { display: none; } .hero-visual { max-width: 450px; width: 100%; margin-inline: auto; } .photo-stage { height: 485px; border-radius: 190px 190px 12px 12px; } .hospitality-photo { object-position: center 57%; } .stage-caption { top: 32px; font-size: 6px; } .phone { top: 72px; left: 28px; width: 238px; transform: rotate(-4deg) scale(.87); } .phone:hover, .phone:focus-visible { transform: rotate(-1deg) scale(.87); } .floating-note { right: -4px; bottom: 66px; font-size: 9px; padding: 11px; } .photo-bottom { display: none; } .demo-controls { margin-top: 12px; padding: 6px; } .demo-tab { font-size: 12px; min-height: 44px; gap: 9px; } .demo-tab > span { font-size: 10px; } .demo-tab svg { display: block; width: 10px; height: 10px; } .demo-caption { font-size: 9px; margin-top: 8px; } .promise-inner { min-height: auto; display: grid; grid-template-columns: 1fr; gap: 12px; padding-block: 21px; } .promise-inner > span { font-size: 11px; gap: 10px; justify-content: center; } .promise-inner svg { height: 17px; width: 17px; } .section-space { padding-block: 63px; } .eyebrow { font-size: 8px; } .section-heading .eyebrow { margin-bottom: 16px; } .section-heading h2 { font-size: clamp(28px, 7.5vw, 37px); line-height: 1.18; letter-spacing: -.04em; } .section-heading > p:last-child { font-size: 14px; margin-top: 20px; max-width: 340px; } .steps-grid { grid-template-columns: 1fr; gap: 28px; margin-top: 36px; } .step { position: relative; padding-top: 21px; padding-left: 59px; } .step-top { display: block; } .step-number { position: absolute; left: 0; top: 22px; font-size: 36px; } .step-top svg { width: 23px; height: 23px; position: absolute; right: 0; top: 21px; } .step h3 { font-size: 22px; margin-top: 0; } .step p { font-size: 14px; margin-top: 9px; max-width: 290px; } .step-footnote { font-size: 11px; margin-top: 12px; } .care-inner { grid-template-columns: 1fr; gap: 38px; padding-block: 54px; } .care-copy .eyebrow { font-size: 7px; } .care-copy h2 { font-size: 37px; margin-top: 19px; } .care-copy > p:not(.eyebrow) { font-size: 12px; margin-top: 20px; } .care-flower { left: auto; right: 4px; bottom: -3px; font-size: 72px; } .care-points article { gap: 15px; padding-block: 23px; } .care-points article:first-child { padding-top: 24px; border-top: 1px solid #aec29e33; } .care-points h3 { font-size: 16px; } .care-points p { font-size: 14px; max-width: 320px; } .care-icon { width: 26px; } .care-icon svg { width: 24px; height: 24px; } .offer-section { grid-template-columns: 1fr; gap: 34px; } .offer-art { min-height: 281px; padding: 23px 26px; } .offer-art-label, .offer-art-bottom { font-size: 7px; } .offer-number { font-size: 160px; padding-left: 10px; } .offer-number > span { font-size: 44px; margin-left: 17px; margin-top: 14px; } .offer-line { bottom: 49px; } .offer-copy .eyebrow { font-size: 8px; margin-bottom: 16px; } .offer-copy h2 { font-size: 40px; } .offer-copy > p:not(.eyebrow):not(.offer-note) { font-size: 14px; margin-top: 17px; } .offer-list { margin-block: 20px 24px; } .offer-list li { font-size: 12px; } .offer-copy .button { min-height: 55px; font-size: 14px; } .offer-note { font-size: 12px; } .faq-inner { grid-template-columns: 1fr; gap: 28px; } .faq-heading h2 { font-size: 35px; } .faq-heading > p:last-child { font-size: 14px; margin-top: 12px; } .faq-list summary { min-height: 73px; font-size: 14px; gap: 18px; } .faq-answer { padding-right: 13px; font-size: 14px; } .pricing-table-wrap th, .pricing-table-wrap td { padding: 9px; } .final-section { padding-block: 61px 63px; } .final-mark { font-size: 34px; margin-bottom: 20px; } .final-section .eyebrow { font-size: 7px; } .final-section h2 { font-size: 35px; margin-top: 20px; } .final-section h2 > span { display: block; } .final-section .button { margin-top: 24px; font-size: 14px; } .final-section .cta-note { font-size: 9px; } .footer-inner { padding-block: 24px; gap: 15px 0; } .footer-brand img { width: 122px; height: 34px; } .footer-signoff { margin-left: auto; font-size: 9px; } .footer-inner nav { margin-left: 0; width: 65%; gap: 20px; } .footer-inner nav a, .copyright { font-size: 8px; } .copyright { margin-left: auto; } .mobile-cta { position: fixed; bottom: 0; inset-inline: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 20px calc(11px + env(safe-area-inset-bottom)); border-top: 1px solid #dce1d3; background: #fffef9f5; backdrop-filter: blur(16px); box-shadow: 0 -6px 30px #17382b0a; } .mobile-cta strong { display: block; font-size: 10px; line-height: 1.5; font-weight: 600; } .mobile-cta > div > span { display: block; color: #75816a; font-size: 8px; margin-top: 2px; } .mobile-cta .button { min-height: 44px; font-size: 11px; padding: 10px 13px; gap: 12px; } .site-footer { padding-bottom: 80px; } } @media (max-width: 360px) { .container { width: calc(100% - 32px); } .brand img { width: 112px; height: 31px; } .header-inner .button-small { font-size: 9px; padding: 10px; gap: 6px; } h1 { font-size: 41px; } .hero-description { font-size: 13px; } .phone { left: 17px; transform: rotate(-4deg) scale(.83); } .phone:hover, .phone:focus-visible { transform: rotate(-1deg) scale(.83); } .photo-stage { height: 460px; } .floating-note { bottom: 60px; font-size: 8px; padding: 10px; } .demo-tab { font-size: 11px; gap: 6px; } .demo-caption { font-size: 8px; } .care-copy h2 { font-size: 33px; } .care-flower { right: -1px; font-size: 54px; } .mobile-cta { padding-inline: 16px; } .mobile-cta strong { font-size: 9px; } .mobile-cta .button { font-size: 10px; gap: 8px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } .phone, .phone:hover, .phone:focus-visible { transform: none; } .scan-line { display: none; } .button:hover { transform: none; } } .reduce-motion .scan-line { display: none; } @media (forced-colors: active) { .button, .demo-controls, .demo-tab, .phone { border: 1px solid ButtonText; } .demo-tab[aria-selected="true"] { outline: 2px solid Highlight; } .care-section, .care-copy .eyebrow, .care-copy h2 span, .care-points p { color: CanvasText; } } @media print { body { background: #fff; } .container { width: 100%; } .site-header .button, .demo-controls, .mobile-cta, .floating-note { display: none !important; } .photo-stage { height: 480px; } .care-section { color: black; background: #fff; } .care-copy h2 span, .care-copy > p, .care-points p, .care-copy .eyebrow { color: #444; } .section-space { padding-block: 40px; } .site-footer { padding-bottom: 0; } } .header-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .header-inner .cta-label-short { display: none; } .header-note { margin-left: 0; } .language-menu { position: relative; z-index: 45; flex-shrink: 0; } .language-menu > summary { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 50px; min-height: 44px; padding: 9px 8px; font-size: 11px; font-weight: 650; border: 1px solid transparent; border-radius: 6px; cursor: pointer; list-style: none; } .language-menu > summary::-webkit-details-marker { display: none; } .language-menu > summary::marker { content: ""; } .language-menu > summary svg { width: 11px; height: 11px; transform: rotate(90deg); } .language-menu[open] > summary { background: #e9efdf; border-color: #d9e1cd; } .language-menu[open] > summary svg { transform: rotate(-90deg); } .language-menu > nav { position: absolute; right: 0; top: calc(100% + 9px); width: 184px; display: grid; padding: 7px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 40px #16332520; } .language-menu nav a { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 5px; font-size: 14px; text-decoration: none; } .language-menu nav a:hover, .language-menu nav a[aria-current="page"] { background: #edf2e4; color: var(--forest); } .language-menu nav a[aria-current="page"] { font-weight: 650; } .language-menu nav a > span { font-size: 12px; } h1, h2, h3, .button, .faq-list summary { overflow-wrap: break-word; } .hero-copy, .care-copy, .care-points, .offer-copy, .faq-heading, .faq-list { min-width: 0; } .demo-controls { gap: 2px; } .demo-tab { min-width: 0; gap: 5px; } .demo-tab > svg { margin-left: 1px; } html:not([lang="it"]) .phone h2 { font-size: 24px; } html[lang="fr"] .hero-description, html[lang="pt"] .hero-description { max-width: 430px; } .not-found-languages { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; margin-top: 35px; } .not-found-languages a { min-height: 44px; display: inline-flex; align-items: center; } .legal-document .legal-page, .legal-document .providers-page { width: min(900px, calc(100% - 48px)); margin: 55px auto 70px; } .legal-document h1 { font-size: clamp(32px, 5vw, 50px); line-height: 1.15; margin-bottom: 24px; } .legal-document h2 { font-size: 24px; line-height: 1.35; margin: 32px 0 12px; letter-spacing: -.02em; } .legal-document h3 { font-size: 20px; line-height: 1.4; margin-block: 22px 10px; } .legal-document p, .legal-document li { font-size: 15px; line-height: 1.85; } .legal-document p + p { margin-top: 17px; } .legal-document ul { padding-left: 24px; } .legal-document .legal-meta { color: var(--muted); font-size: 12px; margin-bottom: 32px; } .legal-document a { overflow-wrap: anywhere; } .legal-document .provider-card { border: 1px solid var(--line); border-radius: 12px; padding: 24px; margin-top: 20px; } .legal-document .provider-card dt { font-weight: 650; margin-top: 18px; } .legal-document .provider-notice, .legal-document .provider-qualification { background: var(--cream); border-radius: 12px; padding: 24px; margin-top: 28px; } .legal-footer { padding-block: 25px 50px; border-top: 1px solid var(--line); } @media (max-width: 1000px) { .header-note { display: none; } } @media (max-width: 900px) { .demo-tab { font-size: 10px; gap: 4px; } .demo-tab > span { font-size: 8px; } } @media (max-width: 650px) { .header-inner { gap: 10px; } .header-inner .brand img { width: 108px; height: 32px; } .header-actions { gap: 7px; } .language-menu > summary { min-width: 42px; padding-inline: 5px; font-size: 10px; } .header-inner .cta-label-full { display: none; } .header-inner .cta-label-short { display: inline; } .header-inner .button-small { min-height: 44px; font-size: 11px; padding: 10px 12px; gap: 0; } .header-inner .button-small > svg { display: none; } .demo-tab { font-size: 11px; gap: 5px; } .demo-tab > span { font-size: 9px; } .demo-tab > svg { display: none; } html[lang="nl"] h1, html[lang="de"] h1 { font-size: clamp(39px, 10.6vw, 59px); } .language-menu { z-index: 50; } .language-menu > nav { right: -28px; } .legal-document .legal-page, .legal-document .providers-page { margin-top: 34px; } } @media (max-width: 360px) { .header-inner .brand img { width: 98px; height: 30px; } .header-inner .button-small { font-size: 10px; padding-inline: 10px; } .header-actions { gap: 5px; } .language-menu > summary { min-width: 40px; } .demo-tab { font-size: 10px; gap: 4px; } .demo-tab > span { font-size: 8px; } html[lang="nl"] h1, html[lang="de"] h1 { font-size: 37px; } } @media print { .language-menu, .header-actions { display: none; } }