:root {
  --citron: #F1F3C8; --aubergine: #3C203B; --moss: #69764A; --orchid: #C799D4; --cream: #FFFDF2;
  --font-display: 'Young Serif', Georgia, serif; --font-body: 'Karla', Arial, sans-serif;
  --text-small: 16px; --text-body: 21px; --text-large: 25px; --title: clamp(40px, 4.6vw, 72px);
  --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 40px; --space-xl: 64px; --space-2xl: 96px;
  --radius-pill: 100px; --radius-panel: 16px; --gutter: clamp(24px, 4.7vw, 90px); --line: 1px solid #3c203b70;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; color: var(--aubergine); background: var(--cream); font-family: var(--font-body); font-size: var(--text-body); line-height: 1.4; }
h1,h2,h3,p,figure { margin: 0; }
h1,h2,h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.12; }
h2 { font-size: var(--title); letter-spacing: -2px; }
h3 { font-size: 36px; letter-spacing: -1px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
button { font: inherit; color: inherit; cursor: pointer; }
button,a,summary { -webkit-tap-highlight-color: transparent; }
button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline: 3px solid var(--moss); outline-offset: 6px; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
.container { width: min(100%, 1600px); padding-inline: var(--gutter); margin-inline: auto; }
.button { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 62px; padding: 12px 36px; border-radius: var(--radius-pill); border: 1.5px solid var(--aubergine); background: var(--aubergine); color: var(--cream); font-weight: 700; text-decoration: none; line-height: 1.2; }
.button:hover { background: var(--moss); border-color: var(--moss); text-decoration: none; }
.button-outline { background: transparent; color: var(--aubergine); }
.button-outline:hover { background: var(--aubergine); color: var(--cream); border-color: var(--aubergine); }
.actions { display: flex; gap: 18px; }
.actions .button { flex: 1; white-space: nowrap; }
.eyebrow { text-transform: uppercase; letter-spacing: 4px; font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.foliage { position: absolute; pointer-events: none; user-select: none; }
.leaf-icon { display: inline-block; flex: 0 0 auto; width: 27px; height: 38px; background: var(--orchid); border-radius: 90% 0 90% 0; transform: rotate(-12deg); }
.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; }
@media(max-width: 700px) { :root { --text-body: 17px; --gutter: 24px; } h2 { letter-spacing: -1.2px; } h3 { font-size: 28px; } .button { min-height: 48px; padding: 12px 22px; } .eyebrow { font-size: 12px; letter-spacing: 3px; } }
@media(prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation: none !important; transition: none !important; } }

/* === section: header === */
.header { position: relative; z-index: 10; background: var(--citron) url('../assets/upper-final.webp') no-repeat right -160px top -33px / 600px auto; height: 92px; }
.header .header-inner { max-width: 1760px; margin: auto; padding: 18px 3.3%; display: flex; align-items: center; gap: 65px; }
.header .wordmark { font: 46px/1 var(--font-display); letter-spacing: -2px; text-decoration: none; }
.header nav { display: flex; align-items: center; gap: clamp(25px,3.3vw,53px); flex: 1; font-size: 18px; font-weight: 600; }
.header nav a { text-decoration: none; }
.header nav a:hover { text-decoration: underline; }
.header .nav-actions { margin-left: auto; display: flex; align-items: center; gap: 30px; }
.header .nav-actions > a:first-child { padding: 5px 0; }
.header .nav-actions .button { font-size: 20px; min-height: 52px; padding: 12px 33px; border: 1px solid var(--cream); }
.header .nav-menu { position: relative; }
.header summary { cursor: pointer; display: flex; gap: 15px; align-items: center; list-style: none; padding: 12px 0; }
.header summary::-webkit-details-marker { display:none; }
.header .chevron { display: block; width: 10px; height: 10px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(45deg) translateY(-3px); }
.header .nav-menu[open] .chevron { transform: rotate(225deg); }
.header .dropdown { position: absolute; top: 100%; left: -20px; width: 230px; padding: 14px; background: var(--cream); border: var(--line); border-radius: var(--radius-panel); box-shadow: 0 12px 24px #3c203b16; }
.header .dropdown a { display: block; padding: 9px 12px; border-radius: 6px; }
.header .dropdown a:hover { background: var(--citron); }
.header .mobile-login,.header .nav-toggle { display: none; }
.header .skip-link { position: absolute; top: -80px; left: 24px; padding: 12px; background: var(--cream); }
.header .skip-link:focus { top: 10px; z-index: 20; }
@media(max-width: 1100px) { .header .header-inner { gap: 30px; } .header nav { gap: 22px; } .header .nav-actions { gap: 20px; } .header .nav-actions .button { padding-inline: 20px; } }
@media(max-width: 900px) {
 .header { height: 64px; } .header .header-inner { padding: 14px 24px; gap: 20px; flex-wrap: wrap; }
 .header .wordmark { font-size: 34px; } .header .mobile-login { display: block; margin-left: auto; text-decoration: none; font-size: 16px; position: relative; }
 .header .nav-toggle { display: flex; flex-direction: column; gap: 6px; width: 24px; padding: 0; background: transparent; border: 0; } .header .nav-toggle span { width: 24px; height: 2px; background: var(--aubergine); }
 .header nav { flex-basis: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 8px; background: var(--cream); padding: 20px; border: var(--line); max-height: calc(100dvh - 80px); overflow: auto; border-radius: 12px; }
 .header.enhanced nav { display: none; } .header.enhanced.nav-open nav { display: flex; }
 .header .dropdown { position: static; width: auto; border: 0; box-shadow: none; padding: 0 10px; }
 .header nav > a { padding-block: 10px; } .header .nav-actions { margin: 10px 0 0; gap: 20px; flex-wrap: wrap; } .header .nav-actions .button { flex: 1; }
 .header:not(.enhanced) { height: auto; } .header:not(.enhanced) .nav-toggle { display: none; }
}
@media(max-width: 700px) { .header { height: 54px; background-size: 300px auto; background-position: right -75px top -11px; } .header .header-inner { padding: 11px 20px; } .header .wordmark { font-size: 31px; } .header .mobile-login { font-size: 14px; } }

@media(min-width: 901px) { .header { background-image: none; } }

/* Intermediate layouts preserve the approved phone and desktop compositions. */
@media (min-width: 701px) and (max-width: 900px) {
 .header { background-size: 300px auto; background-position: right -150px top -80px; }
}
@media (min-width: 901px) and (max-width: 1000px) {
 .header .header-inner { gap: 24px; } .header nav { gap: 16px; font-size: 16px; }
 .header .nav-actions { gap: 16px; } .header .nav-actions .button { font-size: 17px; padding-inline: 18px; }
}

/* 701-900 px: no leaf in the header row, where it sat behind "Log in" */
@media (min-width: 701px) and (max-width: 900px) { .header { background-image: none; } }

/* === section: hero === */
.hero { position: relative; isolation: isolate; background: var(--citron); min-height: 808px; overflow: clip; }
.hero .hero-content { position: relative; z-index: 1; max-width: 1600px; min-height: 808px; margin: auto; padding: 44px 3.3% 60px; }
.hero .hero-upper { width: 480px; right: -160px; top: 0; z-index: -1; }
.hero .hero-lower { width: 700px; left: -40px; bottom: -42px; z-index: -1; }
.hero .hero-dek { max-width: 650px; margin-left: 45px; font-size: 23px; line-height: 1.42; }
.hero h1 { font-size: clamp(75px,6.53vw,104px); letter-spacing: -4px; line-height: 1.2; margin-top: 62px; }
.hero h1 span { display: block; white-space: nowrap; }
.hero h1 span:first-child { margin-left: 6.8%; }
.hero h1 span:nth-child(2) { text-align: right; padding-right: 27.5%; }
.hero h1 span:nth-child(3) { text-align: right; padding-right: 6.3%; }
.hero .hero-conversion { width: 480px; margin: 86px 0 0 auto; }
.hero .trial-note { font-size: 17px; text-align: center; margin-top: 20px; white-space: nowrap; }
.hero .explore { position: absolute; left: 3.3%; bottom: 37px; text-decoration: none; font-size: 16px; display: flex; align-items: center; gap: 12px; background: var(--citron); border-radius: 30px; padding: 5px 12px; }
.hero .explore span { font-size: 39px; line-height: 1; }
.hero .foliage { animation: leaf-reveal .7s ease-out both; }
@keyframes leaf-reveal { from { opacity: 0; translate: 0 15px; } to { opacity: 1; translate: 0 0; } }
/* Past 1600px the leaves follow the centred content, but only until the cut side of each drawing would come into view. */
@media(min-width: 1600px) { .hero .hero-upper { right: min(-12px, calc((100vw - 1600px)/2 - 160px)); } .hero .hero-lower { left: min(-40px, calc((100vw - 1600px)/2 - 80px)); } }
@media(min-width: 701px) and (max-width: 1100px) { .hero h1 { font-size: 7vw; letter-spacing: -2px; } .hero .hero-dek { max-width: 53%; font-size: 20px; } .hero .hero-upper { width: 46%; top: -125px; } .hero .hero-lower { width: 58%; bottom: -60px; } .hero .hero-conversion { width: 46%; } .hero .hero-conversion .button { padding-inline: 20px; } .hero .trial-note { white-space: normal; } }
@media(max-width: 700px) {
 .hero { min-height: 789px; } .hero .hero-content { min-height: 789px; padding: 95px 20px 175px; }
 .hero .hero-upper { width: 300px; max-width: none; top: -65px; right: -75px; }
 .hero .hero-lower { width: 290px; max-width: none; left: -22px; bottom: -8px; }
 .hero .hero-dek { margin-left: 3px; width: 225px; font-size: 14.5px; line-height: 1.38; }
 .hero h1 { font-size: 48px; letter-spacing: -2px; line-height: 1.07; margin-top: 28px; }
 .hero h1 span { white-space: normal; } .hero h1 span:first-child { margin-left: 0; max-width: 330px; }
 .hero h1 span:nth-child(2) { padding-right: 43px; margin-top: 3px; white-space: nowrap; }
 .hero h1 span:nth-child(3) { padding-right: 0; margin-top: 2px; }
 .hero .hero-conversion { width: 100%; margin-top: 22px; } .hero .actions { flex-direction: column; gap: 10px; }
 .hero .button { font-size: 18px; min-height: 47px; } .hero .trial-note { white-space: normal; font-size: 14px; line-height: 1.35; max-width: 230px; margin: 16px auto 0; }
 .hero .explore { left: auto; right: 20px; bottom: 23px; flex-direction: column; gap: 5px; font-size: 12px; } .hero .explore span { font-size: 34px; }
}
@media(max-width: 375px) { .hero h1 { font-size: 44px; } .hero h1 span:nth-child(2) { padding-right: 34px; } }

/* Intermediate layouts preserve the approved phone and desktop compositions. */
@media (min-width: 540px) and (max-width: 900px) {
 .hero, .hero .hero-content { min-height: 740px; }
 .hero .hero-content { padding: 48px var(--gutter) 100px; }
 .hero .hero-dek { width: auto; max-width: 65%; margin-left: 0; font-size: 18px; }
 .hero h1 { font-size: 6.6vw; letter-spacing: -2px; line-height: 1.2; margin-top: 60px; }
 .hero h1 span { white-space: nowrap; }
 .hero h1 span:first-child { max-width: none; margin-left: 0; }
 .hero h1 span:nth-child(2) { padding-right: 25%; margin-top: 0; }
 .hero h1 span:nth-child(3) { padding-right: 0; margin-top: 0; }
 .hero .hero-conversion { width: 400px; max-width: 100%; margin: 58px 0 0 auto; }
 .hero .actions { flex-direction: row; gap: 14px; }
 .hero .hero-conversion .button { padding-inline: 20px; font-size: 18px; min-height: 54px; }
 .hero .trial-note { max-width: none; font-size: 15px; margin-top: 18px; white-space: normal; }
 .hero .hero-lower { width: 330px; bottom: -35px; left: -40px; }
 .hero .explore { left: var(--gutter); right: auto; bottom: 25px; flex-direction: row; font-size: 14px; }
}
@media (min-width: 540px) and (max-width: 1100px) {
 .hero .hero-upper { width: 300px; top: -115px; right: -190px; }
}
/* 701-999 px: the compact header shows "Log in" at the right, so the leaves start below the header row */
@media (min-width: 701px) and (max-width: 999px) {
 .hero .hero-upper { top: -50px; }
}

@media (min-width: 1101px) and (max-width: 1439px) { .hero .hero-upper { width: 360px; right: -170px; top: -70px; } }
@media (max-width: 375px) { .hero .hero-upper { right: -90px; } }

/* === section: features === */
.features { position: relative; isolation: isolate; overflow: clip; padding: 48px 0 74px; min-height: 1000px; background: var(--cream); }
.features h2 { font-size: clamp(40px,4.55vw,72px); }
.features .feature-grid { display: grid; grid-template-columns: 37% 34%; justify-content: space-between; column-gap: 24%; row-gap: 30px; margin-top: 55px; }
.features .feature { position: relative; }
.features .feature-number { font-weight: 700; font-size: 20px; letter-spacing: 2px; display: block; margin-bottom: 7px; }
.features h3 { font-size: 38px; margin-bottom: 13px; }
.features h3 a { text-decoration: none; } .features h3 a:hover { text-decoration: underline; }
.features .feature p { line-height: 1.4; }
.features .feature-3 { grid-row: 2; margin-top: -75px; } .features .feature-4 { grid-row: 2; grid-column: 2; } .features .feature-5 { grid-row: 3; margin-left: 100px; margin-top: -45px; width: 350px; } .features .feature-6 { grid-column: 2; }
.features .feature-vine { z-index: -1; height: 880px; width: 340px; object-fit: fill; left: 40%; top: 160px; }
.features .feature-upper { z-index: -1; width: 470px; right: -35px; top: -280px; }
.features .feature-corner { z-index: -1; width: 380px; bottom: -170px; left: -170px; }
.features .draft-ready { display: flex; align-items: center; gap: 18px; border: 1px solid var(--aubergine); border-radius: 16px; padding: 10px 12px 10px 18px; margin-top: 18px; font-size: 17px; }
.features .draft-ready > span:first-child { font-size: 30px; }
.features .draft-ready .button { margin-left: auto; font-size: 16px; padding: 10px 22px; min-height: 43px; }
.features .draft-dialog { color: var(--aubergine); background: var(--cream); border: 1px solid var(--aubergine); border-radius: 20px; padding: 40px; width: min(560px,calc(100% - 32px)); max-height: 90dvh; overflow: auto; }
.features .draft-dialog::backdrop { background: #3c203baa; }
.features .draft-dialog h2 { font-size: 38px; margin-bottom: 24px; }
.features .dialog-close { position: absolute; right: 14px; top: 10px; font-size: 30px; background: none; border: 0; }
.features .demo-conversation,.features .demo-answer { padding: 18px; border: var(--line); margin-block: 14px; border-radius: 10px; font-size: 17px; }
.features .demo-answer { background: var(--citron); } .features .demo-label { font-size: 14px; font-weight: 700; margin-bottom: 10px; } .features .demo-answer span { display: block; margin-top: 12px; font-size: 13px; } .features .demo-note { font-size: 16px; margin-bottom: 20px; }
@media(max-width: 1100px) { .features .feature-grid { grid-template-columns: 40% 42%; column-gap: 18%; } .features .feature-5 { margin-left: 0; width: auto; } .features .feature-vine { left: 42%; width: 15%; opacity: 1; } .features .feature-upper { width: 250px; top: -180px; } }
@media(max-width: 700px) { .features { padding: 50px 0 80px; min-height: 0; } .features h2 { max-width: 320px; } .features .feature-grid { display: flex; flex-direction: column; gap: 36px; margin-top: 42px; } .features .feature { max-width: 300px; margin: 0; width: auto; } .features .feature:nth-child(even) { margin-left: 22px; } .features h3 { font-size: 29px; } .features .feature-number { font-size: 14px; } .features .feature-vine { width: 140px; height: 720px; top: 320px; left: auto; right: -95px; opacity: .6; } .features .feature-corner { width: 150px; bottom: -90px; left: -70px; } .features .draft-ready { gap: 8px; font-size: 14px; padding: 8px; } .features .draft-ready .button { padding-inline: 14px; font-size: 13px; } .features .draft-dialog { padding: 30px 22px; } }

/* Intermediate layouts preserve the approved phone and desktop compositions. */
@media (min-width: 540px) and (max-width: 1439px) {
 .features .feature-grid { display: grid; grid-template-columns: 40% 42%; column-gap: 18%; row-gap: 40px; }
 .features .feature { max-width: none; width: auto; }
 .features .feature-5 { margin-left: 0; width: auto; }
 .features .feature-vine { left: 42%; right: auto; width: 15%; opacity: 1; }
 .features .feature-upper { width: 250px; top: -180px; }
 .features .feature-corner { width: 190px; bottom: -110px; left: -110px; }
 .features .draft-ready { gap: 10px; flex-wrap: wrap; }
 .features .draft-ready .button { padding-inline: 14px; }
}
@media (min-width: 540px) and (max-width: 900px) {
 .features { padding-bottom: 80px; min-height: 0; }
 .features h2 { max-width: none; }
 .features h3 { font-size: 30px; }
 .features .feature p { font-size: 18px; }
 .features .feature:nth-child(n) { margin: 0; }
 .features .feature-vine { top: 200px; height: 78%; }
 .features .draft-ready { font-size: 15px; }
 .features .draft-ready .button { font-size: 14px; }
}

/* === section: how-it-works === */
.how-it-works { background: var(--citron); padding: 42px 0 32px; }
.how-it-works h2 { font-size: clamp(50px,6.5vw,100px); }
.how-it-works .steps { padding: 0 30px; margin: 0; list-style: none; display: grid; grid-template-columns: repeat(3,1fr); gap: 70px; }
.how-it-works .step { padding-top: 25px; } .how-it-works .step:nth-child(2) { padding-top: 40px; } .how-it-works .step:nth-child(3) { padding-top: 0; }
.how-it-works .step-plant { width: 175px; height: 110px; object-fit: contain; object-position: left bottom; }
.how-it-works .step:nth-child(2) .step-plant { width: 220px; height: 175px; } .how-it-works .step:nth-child(3) .step-plant { width: 290px; height: 275px; margin-top: -20px; }
.how-it-works .step-number { display: block; font: 80px/1.15 var(--font-display); }
.how-it-works h3 { font-size: 32px; margin: 5px 0 15px; white-space: nowrap; } .how-it-works .step p { font-size: 24px; line-height: 1.35; max-width: 320px; }
@media(max-width: 1200px) { .how-it-works .steps { gap: 30px; padding: 0; } .how-it-works h3 { font-size: 25px; white-space: normal; } .how-it-works .step p { font-size: 20px; } }
@media(max-width: 700px) { .how-it-works { padding: 45px 0 55px; } .how-it-works h2 { font-size: 44px; } .how-it-works .steps { grid-template-columns: 1fr; gap: 35px; margin-top: 20px; } .how-it-works .step,.how-it-works .step:nth-child(2),.how-it-works .step:nth-child(3) { padding: 0; } .how-it-works .step:nth-child(2) { margin-left: 25px; } .how-it-works .step:nth-child(3) { margin-left: 48px; } .how-it-works .step-plant { height: 80px; width: 120px; } .how-it-works .step:nth-child(2) .step-plant { height: 135px; width: 150px; } .how-it-works .step:nth-child(3) .step-plant { height: 175px; width: 190px; margin: 0; } .how-it-works .step-number { font-size: 60px; } .how-it-works h3 { font-size: 26px; } .how-it-works .step p { font-size: 18px; } }

/* Intermediate layouts preserve the approved phone and desktop compositions. */
@media (min-width: 540px) and (max-width: 700px) {
 .how-it-works .steps { gap: 36px; }
 .how-it-works .step:nth-child(n) { display: grid; grid-template-columns: 170px 1fr; column-gap: 30px; margin: 0; }
 .how-it-works .step:nth-child(n) .step-plant { grid-row: 1 / span 3; width: 170px; height: 190px; align-self: center; }
 .how-it-works .step-number, .how-it-works h3, .how-it-works .step p { grid-column: 2; }
}

/* === section: integrations === */
.integrations { background: var(--aubergine); color: var(--cream); padding: 52px 0 60px; position: relative; isolation: isolate; overflow: clip; }
.integrations .container { display: grid; grid-template-columns: 42% 56%; justify-content: space-between; gap: 2%; }
.integrations h2 { font-size: 48px; letter-spacing: -1.5px; margin-bottom: 24px; }
.integrations .text-link { font-size: 22px; } .integrations .text-link span { display: inline-block; margin-left: 10px; }
.integrations .integration-list { list-style: none; display: grid; grid-template-columns: repeat(3,1fr); gap: 18px 15px; padding: 0; margin: 0; align-content: start; }
.integrations li { display: flex; align-items: center; justify-content: flex-start; gap: 20px; padding: 12px 22px; border: 1px solid var(--cream); border-radius: var(--radius-pill); font-size: 18px; min-height: 64px; white-space: nowrap; }
.integrations li:nth-child(odd) .leaf-icon { background: var(--moss); }
.integrations .leaf-icon { position: relative; width: 22px; height: 34px; }
.integrations .leaf-icon::after { content: ''; height: 34px; width: 1px; background: var(--cream); position: absolute; left: 11px; top: 5px; transform: rotate(20deg); }
.integrations .integration-leaves { width: 250px; right: -195px; bottom: -90px; transform: rotate(175deg); z-index: -1; }
@media(max-width: 1100px) { .integrations .container { grid-template-columns: 1fr 1.2fr; } .integrations h2 { font-size: 36px; } .integrations .integration-list { grid-template-columns: repeat(2,1fr); } }
@media(max-width: 700px) { .integrations { padding: 42px 0; } .integrations .container { display: block; } .integrations h2 { font-size: 35px; } .integrations .text-link { font-size: 18px; } .integrations .integration-list { margin-top: 30px; gap: 12px; } .integrations li { padding: 10px 14px; font-size: 14px; gap: 14px; min-height: 54px; } .integrations .leaf-icon { width: 18px; height: 27px; } }

/* Intermediate layouts preserve the approved phone and desktop compositions. */
@media (min-width: 540px) and (max-width: 1250px) {
 .integrations .container { display: block; }
 .integrations h2 { font-size: clamp(35px, 4vw, 48px); }
 .integrations .integration-list { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 30px; }
 .integrations li { gap: 14px; padding-inline: 18px; font-size: 17px; }
 .integrations .integration-leaves { width: 170px; right: -145px; bottom: -80px; }
}
@media (min-width: 540px) and (max-width: 700px) {
 .integrations .integration-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* === section: customers === */
.customers { padding: 32px 0 20px; background: var(--cream); }
.customers h2 { font-size: clamp(32px,4.45vw,68px); text-align: center; }
.customers ul { display: flex; list-style: none; padding: 0; justify-content: center; gap: 44px; margin: 28px 0 0; font-size: 18px; }
@media(max-width: 1100px) { .customers ul { flex-wrap: wrap; gap: 16px 28px; } }
@media(max-width: 700px) { .customers { padding: 44px 0 20px; } .customers ul { display: grid; grid-template-columns: 1fr 1fr; text-align: center; font-size: 14px; gap: 18px; margin-top: 24px; } }

/* === section: testimonials === */
.testimonials { position: relative; isolation: isolate; overflow: clip; background: var(--cream); }
.testimonials .quote-grid { display: grid; grid-template-columns: 62% 32%; grid-template-rows: 1fr 1fr; gap: 18px 4%; min-height: 610px; padding-bottom: 46px; }
.testimonials .quote { position: relative; isolation: isolate; }
.testimonials blockquote { font-family: var(--font-display); font-size: 31px; line-height: 1.2; letter-spacing: -1px; margin: 0 0 20px; }
.testimonials figcaption { font-size: 17px; } .testimonials figcaption strong,.testimonials figcaption span { display: block; } .testimonials figcaption strong { font-size: 19px; margin-bottom: 4px; }
.testimonials .quote-1 { grid-row: span 2; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 70px 110px 70px 100px; }
.testimonials .quote-1 blockquote { font-size: 39px; line-height: 1.24; margin-bottom: 24px; }
.testimonials .quote-leaf { width: 100%; height: 110%; top: -12px; left: 0; z-index: -1; }
.testimonials .quote-2 { align-self: end; padding-bottom: 15px; } .testimonials .quote-3 { align-self: center; }
.testimonials .testimonials-left { z-index: 1; width: 430px; left: -290px; top: 80px; transform: rotate(165deg); }
.testimonials .testimonials-right { width: 300px; right: -250px; top: -75px; z-index: -1; }
@media(max-width: 1100px) { .testimonials .quote-1 { padding-inline: 70px; } .testimonials .quote-1 blockquote { font-size: 31px; } .testimonials blockquote { font-size: 25px; } }
@media(max-width: 700px) { .testimonials .quote-grid { display: flex; flex-direction: column; gap: 35px; padding-bottom: 50px; } .testimonials .quote-1 { min-height: 400px; padding: 65px 28px 85px; margin-inline: -12px; } .testimonials .quote-1 blockquote { font-size: 24px; letter-spacing: -.7px; } .testimonials .quote-leaf { height: 100%; top: 0; } .testimonials figcaption { font-size: 13px; } .testimonials figcaption strong { font-size: 16px; } .testimonials .quote-2,.testimonials .quote-3 { padding: 0 10px; } .testimonials blockquote { font-size: 25px; margin-bottom: 16px; } .testimonials .testimonials-left { display: none; } .testimonials .testimonials-right { width: 450px; right: -245px; } }

/* Keep the phone attribution within the taper without shifting the quote grid. */
@media(max-width: 700px) {
 .testimonials .quote-1 figcaption span { max-width: 11em; margin: 0 auto -1.4em; }
 .testimonials .quote-1 .quote-leaf { top: -72px; height: calc(100% + 72px); width: calc(100% + 16px); max-width: none; left: -8px; }
}

/* Intermediate layouts preserve the approved phone and desktop compositions. */
@media (min-width: 540px) and (max-width: 1439px) {
 .testimonials .testimonials-left { display: block; width: 250px; left: -210px; top: 100px; }
 .testimonials .testimonials-right { width: 200px; right: -175px; }
 .testimonials .quote-1 figcaption span { max-width: 14em; margin: 0 auto; }
}
@media (min-width: 540px) and (max-width: 1000px) {
 .testimonials .quote-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: auto auto; gap: 36px; padding-top: 25px; padding-bottom: 50px; }
 .testimonials .quote-1 { grid-column: 1 / -1; grid-row: auto; width: min(100%,620px); min-height: 560px; margin: 0 auto; padding: 95px 60px 120px; }
 .testimonials .quote-1 blockquote { font-size: 30px; max-width: 350px; }
 .testimonials .quote-1 .quote-leaf { width: 100%; left: 0; top: -35px; height: calc(100% + 35px); }
 .testimonials .quote-1 figcaption span { max-width: 11em; }
 .testimonials figcaption { font-size: 16px; } .testimonials figcaption strong { font-size: 18px; }
 .testimonials .quote-2, .testimonials .quote-3 { align-self: start; padding: 0; }
 .testimonials blockquote { font-size: 25px; }
}
@media (min-width: 1001px) and (max-width: 1439px) {
 .testimonials .quote-1 blockquote { font-size: clamp(31px,2.7vw,38px); }
}

@media (min-width: 540px) and (max-width: 1439px) {
 .testimonials .quote-grid { padding-top: 100px; min-height: 710px; }
 .testimonials .quote-1 .quote-leaf { top: -100px; height: calc(100% + 100px); }
}

/* === section: numbers === */
.numbers { background: var(--citron); padding: 28px 0 45px; }
.numbers .container { display: grid; grid-template-columns: repeat(4,1fr); gap: 50px; text-align: center; }
.numbers .number-sprout { width: 72px; height: 62px; object-fit: contain; margin: 0 auto; }
.numbers .figure { font: 86px/1.1 var(--font-display); letter-spacing: -3px; margin-bottom: 8px; }
.numbers .number > p:last-child { font-size: 19px; max-width: 265px; margin: auto; line-height: 1.25; }
@media(max-width: 760px) { .numbers .container { grid-template-columns: 1fr 1fr; } }
@media(max-width: 700px) { .numbers .container { grid-template-columns: 1fr 1fr; gap: 32px 20px; } .numbers .figure { font-size: 55px; letter-spacing: -2px; } .numbers .number-sprout { width: 50px; height: 45px; } .numbers .number > p:last-child { font-size: 14px; } }

/* Intermediate layouts preserve the approved phone and desktop compositions. */
@media (min-width: 701px) and (max-width: 900px) {
 .numbers .container { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; }
 .numbers .figure { font-size: 70px; }
}

/* === section: pricing === */
.pricing { background: var(--cream); padding: 130px 0 38px; position: relative; isolation: isolate; overflow: clip; }
.pricing .container { padding-inline: 3.4%; max-width: 1600px; }
.pricing .pricing-leaves { z-index: -1; width: 340px; left: -125px; top: -10px; transform: rotate(165deg); }
.pricing .pricing-heading { display: flex; align-items: flex-end; justify-content: flex-end; gap: 55px; margin-bottom: 55px; }
.pricing .pricing-heading > div:first-child { text-align: center; }
.pricing h2 { font-size: clamp(40px,5.7vw,85px); }
.pricing .billing-control { flex: 0 0 248px; text-align: center; font-size: 17px; padding-bottom: 4px; }
.pricing .billing-switch { display: flex; border: 1.5px solid var(--aubergine); border-radius: var(--radius-pill); margin-bottom: 8px; }
.pricing .billing-switch button { flex: 1; background: transparent; border: 0; border-radius: var(--radius-pill); padding: 11px 20px; font-size: 18px; }
.pricing .billing-switch button[aria-pressed=true] { background: var(--aubergine); color: var(--cream); }
.pricing .plan-grid { display: grid; grid-template-columns: 15.3% repeat(3,1fr); border-block: 1.5px solid var(--aubergine); }
.pricing .plan-labels { display: grid; grid-template-rows: 146px 140px 236px 100px; font-size: 20px; font-weight: 700; border-right: var(--line); }
.pricing .plan-labels > div { padding: 36px 0; border-bottom: var(--line); display: flex; align-items: center; } .pricing .plan-labels > div:first-child { align-items: flex-end; } .pricing .plan-labels > div:nth-child(3) { align-items: flex-start; } .pricing .plan-labels > div:last-child { border: 0; }
.pricing .plan { display: grid; grid-template-rows: 146px 140px 236px 100px; text-align: center; min-width: 0; }
.pricing .plan.popular { background: var(--citron); }
.pricing .plan-heading { border-bottom: var(--line); padding: 10px 10px 20px; }
.pricing .popular-label { display: block; font-size: 15px; border-radius: 40px; width: max-content; margin: 0 auto 2px; padding: 2px 15px; height: 26px; }
.pricing .popular .popular-label { background: var(--orchid); }
.pricing h3 { font-size: 42px; margin: 0 0 8px; }
.pricing .plan-heading p { font-size: 18px; }
.pricing .plan-price { padding: 11px 8px; border-bottom: var(--line); font-size: 18px; }
.pricing .price { font: 68px/1.15 var(--font-display); letter-spacing: -3px; }
.pricing .billing-note { font-size: 13px; }
.pricing .plan-includes { text-align: left; padding: 30px 28px; border-bottom: var(--line); font-size: 18px; }
.pricing .plan-includes ul { margin: 0; padding-left: 19px; } .pricing .plan-includes li { margin-bottom: 5px; padding-left: 3px; }
.pricing .plan-action { padding: 20px 42px; } .pricing .plan-action .button { width: 100%; min-height: 56px; font-size: 18px; padding-inline: 16px; }
.pricing .sales-note { font-size: 17px; margin-top: 26px; }
@media(max-width: 1100px) { .pricing .pricing-heading { gap: 25px; } .pricing h2 { font-size: 50px; } .pricing .pricing-leaves { width: 260px; left: -100px; } .pricing .plan,.pricing .plan-labels { grid-template-rows: 146px 140px 270px 100px; } .pricing .plan-includes { padding-inline: 20px; font-size: 16px; } .pricing .plan-action { padding-inline: 20px; } }
@media(max-width: 700px) { .pricing { padding: 60px 0 40px; } .pricing .container { padding-inline: 24px; } .pricing .pricing-heading { display: block; margin-bottom: 30px; } .pricing h2 { font-size: 42px; } .pricing .pricing-leaves { width: 170px; top: -60px; left: -90px; } .pricing .billing-control { margin: 28px auto 0; max-width: 245px; } .pricing .plan-grid { display: flex; flex-direction: column; border: 0; gap: 25px; } .pricing .plan-labels { display: none; } .pricing .plan { display: block; border-block: 1px solid var(--aubergine); } .pricing .plan-heading { padding: 15px 15px 22px; } .pricing h3 { font-size: 36px; } .pricing .plan-price { padding: 18px 10px; } .pricing .price { font-size: 62px; } .pricing .plan-includes { padding: 24px; font-size: 17px; } .pricing .plan-action { padding: 20px 28px; } .pricing .sales-note { text-align: center; font-size: 16px; } }

/* Intermediate layouts preserve the approved phone and desktop compositions. */
@media (min-width: 540px) and (max-width: 1439px) {
 .pricing .pricing-leaves { width: 180px; left: -100px; top: -70px; }
}
@media (min-width: 701px) and (max-width: 1439px) {
 .pricing .plan-grid { grid-template-rows: auto auto auto auto; }
 .pricing .plan, .pricing .plan-labels { grid-row: 1 / span 4; grid-template-rows: subgrid; }
 .pricing .plan-price { padding-block: 18px; }
 .pricing .plan-includes { padding: 26px 20px; }
 .pricing .plan-action { padding: 20px; }
}
@media (min-width: 701px) and (max-width: 1000px) {
 .pricing { padding-top: 75px; }
 .pricing .pricing-heading { flex-direction: column; align-items: center; gap: 26px; margin-bottom: 36px; }
 .pricing h2 { font-size: 48px; }
 .pricing .billing-control { flex-basis: auto; width: 248px; }
 .pricing .plan-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
 .pricing .plan-labels { display: none; }
 .pricing h3 { font-size: 36px; }
 .pricing .plan-heading p { font-size: 17px; }
 .pricing .plan-action { padding: 20px 12px; }
 .pricing .plan-action .button { font-size: 16px; padding-inline: 12px; }
}

/* === section: security === */
.security { position: relative; isolation: isolate; overflow: clip; background: var(--aubergine); color: var(--cream); padding: 70px 0 48px; }
.security .container { display: grid; grid-template-columns: 48% 42%; gap: 3%; }
.security h2 { font-size: clamp(40px,5.1vw,76px); }
.security ul { list-style: none; padding: 24px 0 0; margin: 0; display: grid; gap: 20px; }
.security li { display: flex; gap: 30px; align-items: flex-start; font-size: 22px; }
.security .leaf-icon { background: var(--citron); width: 24px; height: 29px; }
.security .security-leaves { width: 490px; top: -130px; right: -200px; z-index: -1; }
@media(max-width: 700px) { .security { padding: 45px 0; } .security .container { display: block; } .security h2 { font-size: 40px; } .security ul { gap: 20px; margin-top: 14px; } .security li { font-size: 17px; gap: 20px; max-width: 300px; } .security .leaf-icon { width: 17px; height: 23px; } .security .security-leaves { width: 180px; right: -135px; top: -50px; } }

/* Intermediate layouts preserve the approved phone and desktop compositions. */
@media (min-width: 701px) and (max-width: 1439px) {
 .security .security-leaves { width: 210px; right: -170px; top: -70px; }
 .security .container { grid-template-columns: 45% 49%; gap: 6%; }
 .security li { gap: 20px; font-size: 20px; }
}
@media (min-width: 540px) and (max-width: 900px) {
 .security .container { display: block; }
 .security ul { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 32px; padding-top: 32px; }
 .security li { font-size: 18px; max-width: none; gap: 16px; }
}

/* === section: faq === */
.faq { background: var(--cream); padding: 44px 0 42px; }
.faq h2 { font-size: clamp(40px,6vw,88px); margin-bottom: 26px; }
.faq .faq-item { display: grid; grid-template-columns: 45% 49%; gap: 1%; border-bottom: 1px solid #69764a80; padding: 23px 0; position: relative; }
.faq .faq-item:last-child { border: 0; }
.faq h3 { font-size: 29px; letter-spacing: -.7px; }
.faq button { display: flex; align-items: flex-start; gap: 40px; background: none; border: 0; width: 100%; text-align: left; padding: 0 30px 0 0; font: inherit; line-height: 1.15; }
.faq .leaf-icon { width: 59px; height: 43px; border-radius: 0 75% 0 75%; transform: rotate(4deg); margin-top: 4px; }
.faq .faq-item:nth-child(even) .leaf-icon { background: var(--citron); }
.faq .faq-symbol { position: absolute; right: 4px; top: 24px; font: 30px/1 var(--font-body); }
.faq .faq-answer { font-size: 20px; line-height: 1.4; }
@media(max-width: 700px) { .faq { padding: 42px 0; } .faq h2 { font-size: 41px; margin-bottom: 16px; } .faq .faq-item { display: block; padding: 22px 0; } .faq h3 { font-size: 23px; } .faq button { gap: 16px; padding-right: 22px; } .faq .leaf-icon { width: 28px; height: 24px; } .faq .faq-answer { padding: 16px 20px 0 44px; font-size: 16px; } .faq .faq-symbol { font-size: 25px; right: 0; top: 22px; } }

/* Intermediate layouts preserve the approved phone and desktop compositions. */
@media (min-width: 540px) and (max-width: 900px) {
 .faq .faq-item { display: block; padding-block: 24px; }
 .faq h3 { font-size: 26px; }
 .faq button { gap: 20px; padding-right: 30px; }
 .faq .leaf-icon { width: 32px; height: 28px; }
 .faq .faq-answer { padding: 16px 32px 0 52px; font-size: 18px; max-width: 720px; }
}

/* === section: cta === */
.cta { position: relative; isolation: isolate; overflow: clip; background: var(--citron); min-height: 625px; padding: 155px 0 55px; }
.cta h2 { font-size: clamp(48px,6vw,92px); line-height: 1.2; letter-spacing: -3px; position: relative; }
.cta h2 span { display: block; text-align: right; white-space: nowrap; } .cta h2 span:first-child { padding-right: 12%; } .cta h2 span:last-child { padding-right: 4%; }
.cta .cta-conversion { width: 570px; margin: 36px 3% 0 auto; } .cta .cta-conversion p { font-size: 25px; line-height: 1.35; margin-bottom: 32px; }
.cta .cta-upper { width: 570px; top: -170px; right: -240px; z-index: -1; }
.cta .cta-lower { width: 700px; left: -50px; bottom: -130px; z-index: -1; }
@media(max-width: 1100px) { .cta .cta-conversion { width: 50%; } .cta .cta-conversion p { font-size: 22px; } .cta .cta-lower { width: 58%; bottom: -170px; } .cta .cta-upper { width: 43%; } .cta .button { padding-inline: 20px; } }
@media(max-width: 700px) { .cta { padding: 85px 0 210px; min-height: 0; } .cta h2 { font-size: 41px; letter-spacing: -1.8px; line-height: 1.16; } .cta h2 span { white-space: normal; text-align: left; } .cta h2 span:first-child { padding-right: 10px; } .cta h2 span:last-child { text-align: right; padding: 8px 0 0 35px; } .cta .cta-conversion { margin: 28px 0 0; width: 100%; } .cta .cta-conversion p { font-size: 18px; margin-bottom: 23px; } .cta .actions { flex-direction: column; gap: 12px; } .cta .cta-upper { width: 220px; right: -105px; top: -80px; } .cta .cta-lower { width: 300px; bottom: -150px; left: -35px; } }

/* Intermediate layouts preserve the approved phone and desktop compositions. */
@media (min-width: 540px) and (max-width: 900px) {
 .cta { padding: 100px 0 190px; min-height: 0; }
 .cta h2 { font-size: clamp(38px,5.8vw,52px); letter-spacing: -2px; }
 .cta h2 span { white-space: normal; }
 .cta h2 span:first-child { text-align: left; padding-right: 0; }
 .cta h2 span:last-child { padding: 8px 0 0 35px; text-align: right; }
 .cta .cta-conversion { width: 400px; max-width: 100%; margin: 32px 0 0 auto; }
 .cta .cta-conversion p { font-size: 20px; }
 .cta .actions { flex-direction: row; gap: 14px; }
 .cta .button { padding-inline: 20px; font-size: 18px; min-height: 54px; }
 .cta .cta-lower { width: 330px; bottom: -100px; left: -50px; }
 .cta .cta-upper { width: 220px; top: -100px; right: -150px; }
}

@media (min-width: 901px) and (max-width: 1439px) { .cta .cta-upper { width: 340px; right: -210px; top: -120px; } .cta .cta-lower { width: 48%; bottom: -140px; } }

/* === section: footer === */
.footer { background: var(--aubergine); color: var(--cream); position: relative; overflow: clip; padding: 44px 0 34px; }
.footer .footer-grid { display: grid; grid-template-columns: 46% repeat(3,1fr); gap: 35px; }
.footer .wordmark { display: inline-block; font: 80px/1.1 var(--font-display); letter-spacing: -2px; text-decoration: none; margin-bottom: 22px; }
.footer .footer-about p { font-size: 19px; line-height: 1.3; margin-bottom: 13px; } .footer .footer-about > a:last-child { text-decoration: none; font-size: 19px; }
.footer nav { padding-top: 8px; } .footer nav h2 { font: 700 20px/1.3 var(--font-body); letter-spacing: 0; margin-bottom: 14px; }
.footer nav ul { padding: 0; margin: 0; list-style: none; } .footer nav li { margin-bottom: 6px; font-size: 18px; } .footer nav a { text-decoration: none; } .footer nav a:hover { text-decoration: underline; }
.footer .footer-legal { border-top: 1px solid #fffdf280; padding: 27px 0 0; width: calc(100% - var(--gutter)*2 - 85px); margin: 35px var(--gutter) 0 auto; display: flex; justify-content: space-between; font-size: 15px; }
.footer .footer-legal div { display: flex; gap: 12px; } .footer .footer-legal a { text-decoration: none; }
.footer .footer-sprout { width: 170px; left: -45px; bottom: 0; transform: rotate(25deg); }
@media(max-width: 900px) { .footer .footer-grid { grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 20px; } .footer .wordmark { font-size: 56px; } }
@media(max-width: 700px) { .footer { padding: 38px 0 30px; } .footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 22px; } .footer .footer-about { grid-column: 1/-1; } .footer .wordmark { font-size: 55px; margin-bottom: 18px; } .footer .footer-about p,.footer .footer-about > a:last-child { font-size: 16px; } .footer nav h2 { font-size: 17px; } .footer nav li { font-size: 16px; margin-bottom: 8px; } .footer .footer-legal { width: calc(100% - 48px); margin: 32px 24px 0; padding: 24px 0 0; flex-direction: column; gap: 12px; font-size: 13px; } .footer .footer-sprout { width: 150px; left: auto; right: -55px; bottom: 165px; } }
/* Intermediate layouts preserve the approved phone and desktop compositions. */
@media (min-width: 701px) and (max-width: 1100px) {
 .footer .footer-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; }
 .footer .footer-about { grid-column: 1 / -1; }
 .footer .wordmark { font-size: 64px; }
}
@media (min-width: 540px) and (max-width: 700px) {
 .footer .footer-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}