:root {
  --paper: #f7f8f4;
  --white: #fff;
  --ink: #17261e;
  --muted: #67716a;
  --line: #dfe5dc;
  --lime: #c7f36b;
  --lime-dark: #a7dc49;
  --orange: #ff8357;
  --lilac: #d8c5fb;
  --blue: #c6dcf6;
  --mono: "DM Mono", ui-monospace, monospace;
  --sans: "DM Sans", sans-serif;
  --display: "Manrope", var(--sans);
  --wrap: min(1240px, calc(100% - 88px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
button, input, textarea { font: inherit; }
a { color: inherit; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.page-wrap { width: var(--wrap); margin-inline: auto; }

.announcement { min-height: 33px; display: flex; justify-content: center; align-items: center; gap: 8px; background: var(--ink); color: #f0f4ed; font: 10px var(--mono); letter-spacing: .025em; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px rgba(199,243,107,.12); }
.announcement-arrow { margin-left: 5px; color: var(--lime); font-size: 13px; }
.site-header { width: var(--wrap); height: 87px; display: flex; align-items: center; justify-content: space-between; margin-inline: auto; border-bottom: 1px solid #e9ede6; position: relative; z-index: 10; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 800 23px/1 var(--display); letter-spacing: -.075em; }
.brand img { width: auto; height: 36px; }
.brand-period { color: #93ca42; }
.main-nav { display: flex; align-items: center; gap: 35px; font-size: 13px; color: #39463d; }
.main-nav a { text-decoration: none; transition: color .2s; }
.main-nav a:hover { color: #7fae34; }
.main-nav .nav-cta { display: inline-flex; align-items: center; gap: 14px; margin-left: 6px; padding: 12px 16px; border: 1px solid #d7ded4; border-radius: 6px; font-weight: 700; color: var(--ink); }
.main-nav .nav-cta span { font-size: 16px; }
.menu-toggle { display: none; }

.hero { min-height: 603px; display: grid; grid-template-columns: .98fr 1.02fr; column-gap: 25px; position: relative; padding-top: 67px; padding-bottom: 82px; }
.hero-copy { padding-top: 46px; z-index: 2; }
.eyebrow, .section-kicker { display: flex; align-items: center; gap: 11px; color: #7b867c; font: 10px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.eyebrow-line { width: 20px; height: 1px; background: #98c84b; }
.hero h1 { margin: 24px 0 17px; max-width: 610px; font: 700 clamp(48px, 5.05vw, 70px)/1.03 var(--display); letter-spacing: -.075em; }
.hero h1 span { white-space: nowrap; }
h1 em, h2 em { color: #83b534; font-style: normal; }
.hero h1 em { position: relative; }
.hero h1 em::after { content: ""; position: absolute; height: 8px; left: 1px; right: 0; bottom: 2px; z-index: -1; background: var(--lime); border-radius: 20px; transform: rotate(-1.5deg); }
.hero-lede { max-width: 440px; margin: 0; color: #616d63; font-size: 16px; line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 25px; margin-top: 28px; }
.button { min-height: 51px; display: inline-flex; align-items: center; justify-content: center; gap: 28px; padding: 0 18px; border: 0; border-radius: 5px; text-decoration: none; font-size: 13px; font-weight: 700; transition: transform .2s, background .2s, box-shadow .2s; cursor: pointer; }
.button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px #17261e22; }
.button-dark { color: white; background: var(--ink); }
.button-dark:hover { background: #283d30; }
.button-icon { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: var(--lime); font-size: 15px; }
.text-link, .underlined-link { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); font-size: 12px; font-weight: 700; }
.text-link span { color: #83b534; font-size: 17px; }
.hero-note { display: flex; align-items: center; gap: 13px; margin-top: 47px; }
.hero-note p { margin: 0; color: #7e8880; font-size: 11px; }
.avatar-stack { display: flex; padding-left: 2px; }
.avatar-stack span { width: 26px; height: 26px; display: grid; place-items: center; margin-left: -3px; border: 2px solid var(--paper); border-radius: 50%; color: var(--ink); background: var(--lime); font-size: 9px; font-weight: 700; }
.avatar-stack span:nth-child(2) { background: #f4cda6; }.avatar-stack span:nth-child(3) { background: var(--lilac); }.avatar-stack span:nth-child(4) { color: white; background: var(--ink); }

.hero-art { min-height: 456px; position: relative; display: grid; place-items: center; margin-top: 1px; }
.art-orbit { position: absolute; border: 1px solid #e3e9df; border-radius: 50%; transform: rotate(-18deg); }
.orbit-one { width: 520px; height: 340px; }
.orbit-two { width: 460px; height: 420px; transform: rotate(24deg); }
.browser-card { width: min(100%, 511px); position: relative; z-index: 1; overflow: hidden; border: 5px solid #fff; border-radius: 9px; background: #fff; box-shadow: 0 25px 65px #22342918, 0 3px 8px #17261e0a; transform: rotate(1.2deg); animation: browser-float 7s ease-in-out infinite; transition: box-shadow .35s, transform .35s; }
.browser-card:hover { animation-play-state: paused; transform: rotate(0deg) translateY(-5px); box-shadow: 0 30px 65px #22342922, 0 3px 8px #17261e0a; }
@keyframes browser-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.browser-bar { height: 30px; display: grid; grid-template-columns: 1fr 2.3fr 1fr; align-items: center; padding: 0 11px; border-bottom: 1px solid #e9ece6; color: #99a19a; font: 8px var(--mono); }
.browser-dots { display: flex; gap: 4px; }.browser-dots i { width: 5px; height: 5px; border-radius: 50%; background: #ef9d87; }.browser-dots i:nth-child(2) { background: #f0d57e; }.browser-dots i:nth-child(3) { background: #a4d18d; }
.browser-address { justify-self: center; padding: 3px 31px; border-radius: 3px; background: #f5f6f2; }
.browser-menu { justify-self: end; font-size: 15px; line-height: 0; }
.mock-site { position: relative; min-height: 359px; overflow: hidden; padding: 0 20px 15px; background: #f4f0e9; color: #334238; }
.mock-site, .mock-nav, .mock-tag, .mock-title span, .mock-hero p, .mock-link, .mock-bottom, .mock-photo, .sun-disc, .photo-plant b, .photo-plant i, .mock-brand-dot { transition: background-color .45s, background .45s, color .4s, border-color .4s; }
.mock-site[data-theme="clay"] { background: #f2e7df; }
.mock-site[data-theme="clay"] .mock-title span { color: #bb7456; }
.mock-site[data-theme="clay"] .mock-tag, .mock-site[data-theme="clay"] .mock-bottom { color: #927063; }
.mock-site[data-theme="clay"] .mock-link { border-color: #bb7456; }
.mock-site[data-theme="clay"] .mock-photo { background: linear-gradient(130deg,#d6a07f,#f2d3b5 45%,#b97658); }
.mock-site[data-theme="clay"] .sun-disc { background: #f2bd7e; }
.mock-site[data-theme="clay"] .photo-plant b, .mock-site[data-theme="clay"] .photo-plant i { background-color: #5e6950; }
.mock-site[data-theme="clay"] .mock-brand-dot { background-color: #bb7456; }
.mock-site[data-theme="night"] { color: #f1f2e9; background: #25332d; }
.mock-site[data-theme="night"] .mock-nav { border-color: #f1f2e933; }
.mock-site[data-theme="night"] .mock-tag, .mock-site[data-theme="night"] .mock-bottom { color: #c4cbbd; }
.mock-site[data-theme="night"] .mock-title span { color: #c7f36b; }
.mock-site[data-theme="night"] .mock-hero p { color: #c2c9bd; }
.mock-site[data-theme="night"] .mock-link { border-color: #c7f36b; }
.mock-site[data-theme="night"] .mock-photo { background: linear-gradient(130deg,#485d51,#7c7d62 45%,#333f3a); }
.mock-site[data-theme="night"] .sun-disc { background: #d7c27e; }
.mock-site[data-theme="night"] .photo-plant b, .mock-site[data-theme="night"] .photo-plant i { background-color: #374a3b; }
.mock-site[data-theme="night"] .mock-brand-dot { background-color: #c7f36b; }
.mock-nav { height: 37px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; border-bottom: 1px solid #dfded5; font: 6px var(--mono); letter-spacing: .05em; }
.mock-brand { display: flex; align-items: center; gap: 5px; font-size: 8px; font-weight: 500; letter-spacing: .12em; }.mock-brand-dot { width: 8px; height: 8px; border-radius: 50%; background: #98a678; }.mock-nav-icon { font-size: 11px; }
.mock-hero { width: 59%; position: relative; z-index: 2; padding-top: 35px; }
.mock-tag { color: #8b917b; font: 6px var(--mono); letter-spacing: .14em; }
.mock-title { margin-top: 6px; font: 700 33px/.99 var(--display); letter-spacing: -.09em; }.mock-title span { color: #9b9e76; font-family: Georgia, serif; font-weight: 400; font-style: italic; }
.mock-hero p { margin: 10px 0 12px; color: #71786b; font: 8px var(--sans); }
.mock-link { display: inline-block; padding-bottom: 3px; border-bottom: 1px solid #97a27e; font: 5px var(--mono); letter-spacing: .03em; }
.mock-photo { width: 55%; height: 219px; position: absolute; right: 12px; top: 101px; overflow: hidden; background: linear-gradient(130deg,#d1d1b3,#e9d7b9 45%,#a9aa8b); }
.mock-photo::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg,transparent 0 21px,#fff2 22px 23px),linear-gradient(0deg,#59645066,transparent 57%); }
.sun-disc { width: 82px; height: 82px; position: absolute; top: 10px; right: 22px; border-radius: 50%; background: #f1cf91; filter: blur(.2px); }
.photo-plant { position: absolute; bottom: 79px; z-index: 2; width: 70px; height: 95px; }.photo-plant b { width: 4px; height: 76px; position: absolute; left: 33px; bottom: 0; background: #515b43; transform: rotate(6deg); }.photo-plant i { width: 24px; height: 9px; position: absolute; border-radius: 100% 0 100% 0; background: #5b684d; transform-origin: 0 100%; }.plant-a { left: 1px; }.plant-a i:nth-child(1) { left: 33px; bottom: 44px; transform: rotate(-35deg); }.plant-a i:nth-child(2) { left: 35px; bottom: 59px; transform: rotate(-75deg); }.plant-a i:nth-child(3) { left: 33px; bottom: 29px; transform: rotate(25deg) scaleX(-1); }
.plant-b { right: -1px; bottom: 84px; transform: scale(.75); }.plant-b b { background: #747b52; }.plant-b i { background: #788052; }.plant-b i:nth-child(1) { left: 33px; bottom: 48px; transform: rotate(-55deg); }.plant-b i:nth-child(2) { left: 32px; bottom: 31px; transform: rotate(20deg) scaleX(-1); }
.ceramic { position: absolute; z-index: 2; bottom: 13px; background: linear-gradient(120deg,#eee7d6,#b6ad9b); box-shadow: 8px 8px 18px #4e594426; }.ceramic-one { width: 69px; height: 87px; left: 82px; border-radius: 40% 42% 28% 28%; }.ceramic-one::before { content: ""; width: 24px; height: 10px; position: absolute; left: 22px; top: -4px; border-radius: 50%; background: #eee7d6; box-shadow: inset 0 2px 4px #817a69; }.ceramic-two { width: 37px; height: 50px; right: 35px; bottom: 11px; border-radius: 40% 45% 30% 30%; background: linear-gradient(120deg,#c6a989,#857660); }
.photo-shadow { width: 180px; height: 21px; position: absolute; bottom: 0; left: 58px; border-radius: 50%; background: #53584744; filter: blur(5px); }
.photo-caption { position: absolute; left: 9px; bottom: 6px; z-index: 3; color: #f6f0e5; font: 5px var(--mono); letter-spacing: .08em; }
.mock-bottom { display: flex; justify-content: space-between; position: absolute; right: 20px; bottom: 11px; left: 20px; color: #777e70; font: 5px var(--mono); letter-spacing: .04em; }
.delivery-stamp { width: 116px; height: 116px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; top: 34px; right: -6px; z-index: 2; border: 1px solid #a3cb61; border-radius: 50%; color: var(--ink); background: var(--lime); transform: rotate(9deg); box-shadow: 0 8px 20px #17261e14; }
.delivery-stamp { transition: transform .35s ease, box-shadow .35s ease; }
.delivery-stamp:hover { transform: rotate(-3deg) scale(1.06); box-shadow: 0 14px 25px #17261e20; }
.delivery-stamp:hover .stamp-spark { animation: star-spin .8s ease-in-out; }
@keyframes star-spin { to { transform: rotate(100deg) scale(1.3); } }
.delivery-stamp strong { font: 800 48px/.82 var(--display); letter-spacing: -.09em; }.stamp-top, .stamp-bottom { font: 8px var(--mono); letter-spacing: .13em; }.stamp-top { margin-bottom: 6px; }.stamp-bottom { margin-top: 5px; }.stamp-spark { position: absolute; top: 10px; right: 13px; font-size: 13px; }
.art-label { position: absolute; bottom: 9px; right: 20px; display: flex; align-items: center; gap: 7px; color: #8b958b; font: 9px var(--mono); }.label-dot { width: 5px; height: 5px; border-radius: 50%; background: #91c940; }
.theme-switcher { min-height: 31px; display: flex; align-items: center; gap: 7px; position: absolute; bottom: 0; left: 15px; z-index: 3; padding: 5px 9px; border: 1px solid #e0e7dd; border-radius: 999px; background: #fff; box-shadow: 0 4px 12px #17261e0c; }
.theme-label, .theme-current { color: #7a867a; font: 7px var(--mono); letter-spacing: .07em; white-space: nowrap; }
.theme-current { min-width: 49px; padding-left: 2px; color: #98a393; font-size: 6px; }
.theme-swatch { width: 13px; height: 13px; flex: 0 0 auto; padding: 0; border: 2px solid white; border-radius: 50%; box-shadow: 0 0 0 1px #d8dfd5; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.theme-swatch:hover, .theme-swatch:focus-visible { transform: scale(1.2); outline: none; box-shadow: 0 0 0 2px #92bf4c; }
.theme-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px #8bbd40; }
.swatch-fieldnote { background: linear-gradient(135deg,#a4ad8b 0 50%,#e7bb83 50%); }.swatch-clay { background: linear-gradient(135deg,#c17b5c 0 50%,#efc18a 50%); }.swatch-night { background: linear-gradient(135deg,#263a31 0 50%,#d3c078 50%); }
.hero-bottom { position: absolute; right: 0; bottom: 24px; left: 0; display: flex; justify-content: space-between; color: #8a948a; font: 9px var(--mono); letter-spacing: .08em; }

.ticker { height: 49px; overflow: hidden; display: flex; align-items: center; background: var(--lime); }
.ticker-track { display: flex; width: max-content; flex: 0 0 auto; animation: ticker var(--ticker-duration,34s) linear infinite; color: #273522; font: 10px var(--mono); letter-spacing: .14em; will-change: transform; }
.ticker-group { display: block; flex: 0 0 auto; white-space: nowrap; }.ticker i { margin: 0 30px; font-style: normal; }
@keyframes ticker { to { transform: translateX(-50%); } }
.sr-only { width: 1px; height: 1px; position: absolute; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.intro-section { padding-top: 100px; padding-bottom: 116px; }
.section-kicker { color: #929b91; }.section-kicker span { color: #81b83a; }
.intro-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 60px; align-items: end; margin-top: 28px; }
.intro-grid h2, .promise-left h2, .reviews-head h2, .faq-intro h2 { margin: 0; font: 650 clamp(36px,4vw,53px)/1.11 var(--display); letter-spacing: -.065em; }
.intro-grid h2 span { color: #9aa49a; }
.intro-right p { max-width: 410px; margin: 0 0 19px; color: #68736a; font-size: 14px; line-height: 1.75; }
.underlined-link { width: max-content; padding-bottom: 6px; border-bottom: 1px solid #a2c66a; font-size: 11px; }.underlined-link span { color: #7fab37; font-size: 15px; }
.steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; margin-top: 66px; }
.step-card { min-height: 320px; padding: 17px 19px 20px; border: 1px solid var(--line); border-radius: 7px; background: #fbfcf9; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.step-card:hover { transform: translateY(-5px); border-color: #cddcb8; box-shadow: 0 12px 26px #2538240c; }
.step-card:hover .step-symbol { display: inline-block; animation: symbol-nudge .65s ease-in-out; }
.step-card:hover .bubble-two, .step-card:hover .launch-card { transform: translateY(-3px) rotate(-2deg); transition: transform .25s ease; }
@keyframes symbol-nudge { 50% { transform: rotate(18deg) scale(1.15); } }
.step-top { display: flex; justify-content: space-between; color: #929c92; font: 9px var(--mono); letter-spacing: .05em; }.step-symbol { color: #91bc49; font-size: 16px; }
.step-illustration { height: 129px; display: flex; align-items: center; justify-content: center; position: relative; margin: 13px 0 8px; overflow: hidden; border-radius: 5px; background: #f1f5e8; }
.talk-illustration { background: #f5ede4; }.bubble { position: absolute; padding: 10px 13px; border-radius: 8px; font-size: 11px; }.bubble-one { top: 30px; left: 27px; color: white; background: var(--ink); }.bubble-two { right: 26px; bottom: 26px; color: var(--ink); background: var(--lime); font-weight: 700; }.chat-tail { width: 15px; height: 15px; position: absolute; bottom: 18px; left: 46px; background: var(--ink); clip-path: polygon(0 0,100% 0,0 100%); transform: rotate(18deg); }
.build-illustration { background: #eaf0eb; }.code-window { width: 178px; height: 99px; position: relative; border: 1px solid #dce4dc; border-radius: 5px; background: #fbfcf8; box-shadow: 0 8px 15px #17261e10; }.code-head { height: 20px; display: flex; align-items: center; gap: 3px; padding: 0 7px; border-bottom: 1px solid #e8eee6; }.code-head i { width: 4px; height: 4px; border-radius: 50%; background: #cad5c8; }.code-head span { margin-left: 6px; color: #a1aba0; font: 6px var(--mono); }.code-lines { display: flex; flex-wrap: wrap; gap: 5px; padding: 13px 11px; }.code-lines b, .code-lines i { height: 4px; border-radius: 3px; background: #c7eb7a; }.code-lines b { width: 34px; }.code-lines i { width: 62px; background: #dde4d8; }.code-lines i:nth-of-type(2) { width: 44px; }.code-lines i:nth-of-type(4) { width: 52px; }.code-check { width: 24px; height: 24px; display: grid; place-items: center; position: absolute; right: -10px; bottom: -9px; border: 3px solid #eaf0eb; border-radius: 50%; color: var(--ink); background: var(--lime); font-size: 12px; font-weight: 700; }
.launch-illustration { background: #eeebf6; }.launch-card { width: 168px; height: 79px; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; padding: 12px 15px; border: 1px solid #eeeaf4; border-radius: 5px; background: white; box-shadow: 0 9px 17px #26203a13; transform: rotate(-3deg); }.launch-card span { color: #98a098; font: 6px var(--mono); letter-spacing: .1em; }.launch-card b { margin: 3px 0 2px; font: 700 19px var(--display); letter-spacing: -.06em; }.launch-card i { color: #94ba53; font: 7px var(--mono); font-style: normal; }.launch-sun { position: absolute; top: 12px; right: 35px; color: #a77de4; font-size: 35px; }.launch-rays { position: absolute; bottom: 12px; left: 40px; color: #f7a582; font-size: 20px; }
.step-card h3 { margin: 14px 0 6px; font: 700 17px var(--display); letter-spacing: -.04em; }.step-card p { max-width: 290px; margin: 0; color: #738075; font-size: 12px; line-height: 1.6; }

.package-section { overflow: hidden; color: white; background: #18271f; }
.package-wrap { position: relative; padding-top: 81px; padding-bottom: 76px; }
.package-wrap::before { content: ""; width: 610px; height: 610px; position: absolute; top: 115px; right: -290px; border: 1px solid #304237; border-radius: 50%; box-shadow: 0 0 0 44px #1a2a21,0 0 0 45px #304237,0 0 0 105px #1a2a21,0 0 0 106px #304237; opacity: .7; pointer-events: none; }
.section-kicker-light { color: #a7b3a8; }.section-kicker-light span { color: var(--lime); }
.package-heading { display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; gap: 50px; margin-top: 27px; position: relative; z-index: 1; }.package-heading h2 { margin: 0; font: 650 clamp(40px,5vw,64px)/1.06 var(--display); letter-spacing: -.075em; }.package-heading h2 em { color: var(--lime); font-family: Georgia, serif; font-weight: 400; }.package-heading p { max-width: 340px; margin: 0 0 8px; color: #acb8ad; font-size: 14px; line-height: 1.7; }
.package-card { display: grid; grid-template-columns: .9fr 1.1fr; min-height: 415px; position: relative; z-index: 1; margin-top: 45px; overflow: hidden; border-radius: 8px; color: var(--ink); background: #fff; box-shadow: 0 20px 45px #101a142b; }
.package-card-left { display: flex; flex-direction: column; align-items: flex-start; padding: 31px 38px; border-right: 1px solid #e8ece6; }.package-label { display: flex; align-items: center; gap: 8px; color: #69746a; font: 9px var(--mono); letter-spacing: .09em; }.label-star { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--ink); background: var(--lime); font-size: 11px; }
.price { display: flex; align-items: flex-start; margin-top: 23px; font: 800 84px/.94 var(--display); letter-spacing: -.09em; }.currency { margin: 10px 5px 0 0; font: 600 32px/1 var(--display); letter-spacing: -.06em; }.price-period { align-self: flex-end; margin: 0 0 8px 11px; color: #838d83; font: 10px var(--mono); letter-spacing: 0; }
.price-description { margin: 8px 0 23px; color: #748075; font-size: 12px; }.payment-split { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 15px 0; border-top: 1px solid #e9eee7; border-bottom: 1px solid #e9eee7; }.payment-split div { display: flex; flex-direction: column; gap: 4px; }.payment-split div span { color: #849084; font: 8px var(--mono); letter-spacing: .04em; }.payment-split strong { font: 700 20px var(--display); letter-spacing: -.05em; }.split-plus { color: #a6b19f; font: 19px var(--display); }.package-card-left .button { width: 100%; justify-content: space-between; margin-top: 20px; }.button-lime { color: var(--ink); background: var(--lime); }.button-lime:hover { background: #d1f984; }.deposit-note { width: 100%; margin-top: 11px; color: #8b958b; text-align: center; font-size: 9px; }
.package-includes { padding: 33px 38px 18px; }.includes-heading, .included-foot { display: flex; justify-content: space-between; align-items: center; color: #798579; font: 9px var(--mono); letter-spacing: .07em; }.includes-heading > span:last-child { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: var(--lime); font-size: 12px; }.includes-list { margin: 17px 0 0; padding: 0; list-style: none; }.includes-list li { min-height: 55px; display: flex; align-items: center; gap: 13px; border-top: 1px solid #edf0eb; }.include-check { width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #5c8b25; background: #eff7e5; font-size: 12px; }.includes-list li span:last-child { display: flex; flex-direction: column; gap: 3px; }.includes-list strong { font-size: 12px; }.includes-list small { color: #879187; font-size: 10px; }.included-foot { margin-top: 8px; padding-top: 12px; border-top: 1px solid #edf0eb; color: #a0a99f; font-size: 8px; }.included-foot span:last-child { color: #8abf42; font-size: 15px; }
.package-footnote { display: flex; align-items: center; gap: 8px; position: relative; z-index: 1; margin-top: 18px; color: #96a298; font-size: 10px; }.package-footnote span { color: var(--lime); }

.promise-section { min-height: 461px; display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; padding-top: 73px; padding-bottom: 73px; }
.promise-left h2 { margin-top: 26px; font-size: clamp(42px,5vw,62px); }.promise-left h2 em { color: #85b73c; font-family: Georgia, serif; font-weight: 400; }.promise-right { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 19px; }.clock-graphic { width: 220px; height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }.clock-ring { position: absolute; inset: 11px; border: 1px solid #cad5c5; border-radius: 50%; box-shadow: 0 0 0 14px #f7f8f4,0 0 0 15px #e2e8de,0 0 0 34px #f7f8f4,0 0 0 35px #e2e8de; }.clock-big { position: relative; z-index: 1; font: 800 79px/.88 var(--display); letter-spacing: -.1em; }.clock-small { position: relative; z-index: 1; margin-top: 6px; color: #859186; font: 9px var(--mono); letter-spacing: .18em; }.clock-spark { position: absolute; z-index: 1; color: #8cbc40; }.spark-a { top: 2px; right: 29px; font-size: 20px; }.spark-b { bottom: 12px; left: 20px; color: #e8a17c; font-size: 15px; }.clock-tick { position: absolute; top: 23px; right: 42px; color: #739d3d; font-size: 17px; transform: rotate(17deg); }
.clock-graphic { padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.clock-graphic:focus-visible { outline: 2px solid #9bc957; outline-offset: 6px; border-radius: 50%; }
.clock-ring { transition: border-color .35s, box-shadow .35s; }
.clock-big { transition: color .3s, transform .3s; }
.clock-spark, .clock-tick { transition: transform .35s, color .35s; }
.clock-graphic:hover .clock-ring, .clock-graphic:focus-visible .clock-ring, .clock-graphic.is-animated .clock-ring { border-color: #9cc955; box-shadow: 0 0 0 14px #f7f8f4,0 0 0 15px #b4d77c,0 0 0 34px #f7f8f4,0 0 0 35px #d0e5aa; }
.clock-graphic:hover .clock-big, .clock-graphic:focus-visible .clock-big, .clock-graphic.is-animated .clock-big { color: #6b9a2e; transform: scale(1.08); }
.clock-graphic:hover .spark-a, .clock-graphic:focus-visible .spark-a, .clock-graphic.is-animated .spark-a { transform: rotate(55deg) scale(1.25); }
.clock-graphic:hover .spark-b, .clock-graphic:focus-visible .spark-b, .clock-graphic.is-animated .spark-b { transform: translateY(-4px) rotate(-18deg); }
.clock-graphic:hover .clock-tick, .clock-graphic:focus-visible .clock-tick, .clock-graphic.is-animated .clock-tick { transform: rotate(45deg) translate(3px,-2px); }
.clock-graphic.is-animated .clock-ring { animation: clock-ripple .9s ease-out 2; }
@keyframes clock-ripple { 0% { scale: .97; opacity: .75; } 65% { scale: 1.035; opacity: 1; } 100% { scale: 1; opacity: 1; } }
.promise-copy p { max-width: 310px; margin: 0 0 19px; color: #6f7b71; font-size: 14px; line-height: 1.75; }.promise-copy .button { gap: 17px; }.promise-footnote { display: block; margin-top: 11px; color: #8e998e; font: 9px var(--mono); }

.reviews-section { padding: 88px 0 96px; background: #eff3eb; }.reviews-head { display: flex; align-items: end; justify-content: space-between; }.reviews-head h2 { margin-top: 24px; }.reviews-head h2 em { color: #82b337; font-family: Georgia,serif; font-weight: 400; }.review-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; margin-top: 41px; }.review-card { min-height: 254px; display: flex; flex-direction: column; position: relative; padding: 22px 21px 17px; border: 1px solid #dfe6db; border-radius: 6px; background: #fafbf8; transition: transform .25s ease, border-color .25s ease, background-color .25s ease, box-shadow .25s ease; }.review-card:hover { transform: translateY(-5px); border-color: #c9dcae; background: #f5f8ed; box-shadow: 0 12px 26px #2538240c; }.review-featured { background: #f8faef; border-color: #d4e4bb; transform: translateY(-8px); }.review-featured:hover { transform: translateY(-13px); }.review-stars { color: #8fbb47; font-size: 12px; letter-spacing: .12em; }.review-card blockquote { margin: 19px 0 19px; font: 600 17px/1.4 var(--display); letter-spacing: -.035em; }.review-person { display: flex; align-items: center; gap: 9px; margin-top: auto; }.review-avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; font: 700 12px var(--display); }.avatar-amber { background: #f2d3b4; }.avatar-lilac { background: #d8cbef; }.avatar-blue { background: #cbdded; }.review-person > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; }.review-person strong { font-size: 10px; }.review-person small { color: #879187; font-size: 9px; }.review-arrow { margin-left: auto; color: #8bb845; font-size: 15px; }

.faq-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; padding-top: 105px; padding-bottom: 112px; }.faq-intro h2 { margin-top: 24px; }.faq-intro h2 em { color: #84b839; font-family: Georgia,serif; font-weight: 400; }.faq-intro p { margin: 14px 0 18px; color: #7c887e; font-size: 12px; }.faq-list { border-top: 1px solid #dfe5db; }.faq-list details { border-bottom: 1px solid #dfe5db; }.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 2px; cursor: pointer; list-style: none; font: 650 15px var(--display); letter-spacing: -.02em; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary span { width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #dfe5db; border-radius: 50%; color: #8ab93f; font: 16px var(--sans); transition: transform .2s; }.faq-list details[open] summary span { transform: rotate(45deg); }.faq-list details p { max-width: 570px; margin: -3px 36px 21px 2px; color: #738075; font-size: 12px; line-height: 1.7; }

.final-cta { overflow: hidden; padding: 83px 44px 89px; color: white; background: #18271f; }.final-cta-inner { max-width: 800px; display: flex; flex-direction: column; align-items: center; position: relative; margin: auto; text-align: center; }.cta-orb { width: 420px; height: 420px; position: absolute; top: -175px; border: 1px solid #304237; border-radius: 50%; box-shadow: 0 0 0 33px #1a2a21,0 0 0 34px #304237,0 0 0 76px #1a2a21,0 0 0 77px #304237; opacity: .5; }.cta-orb-one { left: -330px; }.cta-orb-two { right: -330px; transform: scale(.7); }.cta-kicker { display: flex; align-items: center; gap: 9px; position: relative; color: #a7b5a6; font: 9px var(--mono); letter-spacing: .08em; }.cta-kicker span { width: 5px; height: 5px; border-radius: 50%; background: var(--lime); }.final-cta h2 { position: relative; margin: 24px 0 9px; font: 700 clamp(41px,5vw,63px)/1.08 var(--display); letter-spacing: -.075em; }.final-cta h2 em { color: var(--lime); font-family: Georgia,serif; font-weight: 400; }.final-cta p { position: relative; margin: 0 0 23px; color: #adbaae; font-size: 13px; }.final-cta .button { position: relative; }.cta-spark { position: absolute; top: 81px; right: 73px; color: var(--lime); font-size: 22px; }

.site-footer { padding: 0 max(44px, calc((100% - 1240px)/2)); background: #fff; }.footer-top { min-height: 95px; display: flex; align-items: center; gap: 28px; border-bottom: 1px solid #e8ece6; }.footer-brand { font-size: 20px; }.footer-brand img { width: auto; height: 31px; }.footer-tagline { color: #89938a; font-size: 11px; }.footer-contact { margin-left: auto; display: flex; gap: 12px; text-decoration: none; font-size: 11px; font-weight: 600; }.footer-contact span { color: #83b438; font-size: 15px; }.footer-bottom { min-height: 52px; display: flex; align-items: center; justify-content: space-between; color: #909b91; font: 8px var(--mono); letter-spacing: .04em; }.footer-bottom > div { display: flex; gap: 21px; }.footer-bottom a { text-decoration: none; }.footer-bottom a:hover { color: #66952c; }.back-top { color: #6f7c70; }

/* Interior pages */
.interior-page .site-header { border-bottom-color: var(--line); }.interior-main { min-height: 650px; padding-top: 81px; padding-bottom: 100px; }.contact-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 9%; align-items: start; margin-top: 35px; }.contact-copy { padding-top: 20px; }.contact-copy h1, .legal-main h1 { margin: 0; font: 700 clamp(43px,5vw,63px)/1.08 var(--display); letter-spacing: -.075em; }.contact-copy h1 em, .legal-main h1 em { color: #83b63a; font-family: Georgia,serif; font-weight: 400; }.contact-copy > p { max-width: 390px; margin: 20px 0 28px; color: #6d796e; font-size: 14px; line-height: 1.75; }.contact-promise { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; padding: 15px; border: 1px solid #e1e8db; border-radius: 5px; background: #fbfcf9; }.contact-promise > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--lime); }.contact-promise div { display: flex; flex-direction: column; gap: 4px; }.contact-promise strong { font-size: 12px; }.contact-promise small { color: #839084; font-size: 10px; }
.enquiry-form { display: flex; flex-direction: column; padding: 28px 31px; border: 1px solid #e0e6de; border-radius: 7px; background: #fff; box-shadow: 0 12px 35px #26352b08; }.form-heading { display: flex; justify-content: space-between; margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid #e9eee7; color: #829083; font: 8px var(--mono); letter-spacing: .07em; }.form-heading span:last-child { color: #a5b09f; }.enquiry-form label:not(.consent) { margin-bottom: 7px; color: #344238; font-size: 11px; font-weight: 700; }.enquiry-form label i { color: #84b83c; font-style: normal; }.enquiry-form input:not([type=checkbox]), .enquiry-form textarea { width: 100%; margin-bottom: 17px; padding: 12px 13px; border: 1px solid #e0e6de; border-radius: 4px; outline: none; color: var(--ink); background: #fcfdfa; font-size: 12px; transition: border-color .2s, box-shadow .2s; }.enquiry-form input:focus, .enquiry-form textarea:focus { border-color: #a8cc6b; box-shadow: 0 0 0 3px #c7f36b33; }.enquiry-form input::placeholder, .enquiry-form textarea::placeholder { color: #a9b1a8; }.enquiry-form textarea { resize: vertical; min-height: 100px; }.consent { display: flex; align-items: flex-start; gap: 9px; margin: 1px 0 17px; color: #7a867b; font-size: 10px; line-height: 1.55; }.consent input { accent-color: #8bbd40; margin: 1px 0 0; }.consent a { color: #4e722c; }.form-submit { width: 100%; justify-content: space-between; }.form-small { margin: 11px 0 0; color: #98a198; text-align: center; font-size: 9px; line-height: 1.5; }.form-success { display: flex; align-items: flex-start; gap: 11px; margin-top: 16px; padding: 13px; border-radius: 4px; background: #f0f7e5; }.form-success > span { color: #7ead36; font-size: 18px; }.form-success div { display: flex; flex-direction: column; gap: 4px; }.form-success strong { font-size: 12px; }.form-success small { color: #6e7a6d; font-size: 10px; line-height: 1.5; }
.legal-content ul { margin: 8px 0 10px; padding-left: 20px; color: #6f7b71; font-size: 12px; line-height: 1.8; }.legal-content li { padding-left: 3px; margin: 4px 0; }

@media (max-width: 1000px) {
  :root { --wrap: min(100% - 56px, 860px); }
  .hero { min-height: 560px; grid-template-columns: 1fr 1fr; column-gap: 0; padding-top: 46px; }
  .hero-copy { padding-top: 38px; }.hero h1 { font-size: clamp(45px,6vw,61px); }.hero-art { transform: scale(.9); transform-origin: center right; margin-left: -25px; }.browser-card { width: 490px; }.delivery-stamp { right: -17px; }
  .intro-grid { gap: 35px; }.package-card-left { padding-inline: 28px; }.package-includes { padding-inline: 28px; }.promise-right { grid-template-columns: .8fr 1.2fr; gap: 5px; }.clock-graphic { transform: scale(.88); }
}
@media (max-width: 760px) {
  :root { --wrap: calc(100% - 40px); }
  html { scroll-padding-top: 75px; }
  .announcement { min-height: 31px; font-size: 8px; }.site-header { height: 69px; }.brand { font-size: 21px; }.brand img { width: auto; height: 31px; }
  .menu-toggle { width: 40px; height: 40px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 4px; background: transparent; cursor: pointer; }.menu-toggle span { width: 16px; height: 1px; background: var(--ink); transition: transform .2s; }.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
  .main-nav { display: none; position: absolute; top: 68px; right: -20px; left: -20px; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 20px 19px; border-bottom: 1px solid var(--line); background: var(--paper); box-shadow: 0 16px 20px #17261e12; }.main-nav.is-open { display: flex; }.main-nav > a:not(.nav-cta) { padding: 14px 0; border-bottom: 1px solid #e5eae3; font-size: 14px; }.main-nav .nav-cta { justify-content: space-between; margin: 14px 0 0; }
  .hero { display: flex; flex-direction: column; padding-top: 36px; padding-bottom: 57px; }.hero-copy { padding-top: 0; }.eyebrow { font-size: 8px; }.hero h1 { margin-top: 21px; font-size: clamp(42px,11vw,62px); }.hero h1 span { white-space: normal; }.hero-lede { max-width: 420px; font-size: 14px; }.hero-actions { gap: 16px; margin-top: 23px; }.button { min-height: 47px; gap: 16px; padding-inline: 14px; font-size: 12px; }.text-link { gap: 7px; font-size: 10px; }.hero-note { margin-top: 25px; }.hero-art { width: 100%; min-height: 355px; margin: 24px 0 0; transform: none; }.art-orbit { max-width: 110%; }.orbit-one { width: 440px; height: 280px; }.orbit-two { width: 390px; height: 350px; }.browser-card { width: min(100%, 500px); }.mock-site { min-height: 310px; }.mock-photo { height: 184px; top: 91px; }.mock-hero { padding-top: 27px; }.mock-title { font-size: 28px; }.delivery-stamp { width: 93px; height: 93px; top: 1px; right: -3px; }.delivery-stamp strong { font-size: 39px; }.stamp-top,.stamp-bottom { font-size: 7px; }.hero-bottom { bottom: 16px; gap: 12px; font-size: 7px; }.art-label { bottom: -4px; right: 6px; font-size: 8px; }
  .ticker { height: 42px; }.ticker-track { font-size: 9px; }.ticker i { margin-inline: 16px; }
  .intro-section { padding-top: 73px; padding-bottom: 76px; }.section-kicker { font-size: 8px; }.intro-grid { grid-template-columns: 1fr; gap: 17px; margin-top: 23px; }.intro-grid h2, .promise-left h2, .reviews-head h2, .faq-intro h2 { font-size: clamp(34px,8vw,45px); }.intro-right p { font-size: 13px; }.steps-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 37px; }.step-card { min-height: 0; padding: 15px 16px 17px; }.step-illustration { height: 122px; margin-top: 11px; }.step-card h3 { font-size: 16px; }.step-card p { font-size: 11px; }
  .package-wrap { padding-top: 64px; padding-bottom: 57px; }.package-wrap::before { top: 250px; right: -430px; }.package-heading { grid-template-columns: 1fr; gap: 17px; margin-top: 23px; }.package-heading h2 { font-size: 48px; }.package-heading p { max-width: 330px; font-size: 13px; }.package-card { grid-template-columns: 1fr; margin-top: 29px; }.package-card-left { padding: 25px 22px 22px; border-right: 0; border-bottom: 1px solid #e8ece6; }.price { font-size: 76px; }.package-includes { padding: 23px 22px 17px; }.includes-list li { min-height: 53px; }.package-footnote { align-items: flex-start; font-size: 9px; line-height: 1.55; }
  .promise-section { grid-template-columns: 1fr; gap: 22px; padding-top: 71px; padding-bottom: 76px; }.promise-left h2 { margin-top: 21px; font-size: 49px; }.promise-right { grid-template-columns: .84fr 1.16fr; gap: 0; }.clock-graphic { width: 170px; height: 170px; transform: scale(.9); transform-origin: left center; }.clock-big { font-size: 64px; }.promise-copy p { font-size: 12px; }.promise-copy .button { width: 100%; gap: 8px; padding-inline: 11px; font-size: 10px; }.promise-footnote { font-size: 8px; line-height: 1.4; }
  .reviews-section { padding: 68px 0 71px; }.reviews-head { align-items: flex-start; flex-direction: column; gap: 15px; }.reviews-head h2 { margin-top: 19px; }.review-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 27px; }.review-card { min-height: 218px; }.review-featured { --card-lift: 0px; }.review-card blockquote { font-size: 16px; }
  .faq-section { grid-template-columns: 1fr; gap: 30px; padding-top: 73px; padding-bottom: 77px; }.faq-intro h2 { margin-top: 20px; }.faq-intro p { font-size: 11px; }.faq-list summary { padding: 17px 2px; font-size: 13px; }.faq-list details p { font-size: 11px; }
  .final-cta { padding: 69px 20px 71px; }.cta-kicker { font-size: 7px; }.final-cta h2 { font-size: 45px; }.final-cta p { max-width: 280px; font-size: 11px; line-height: 1.6; }.cta-spark { top: 89px; right: 0; font-size: 17px; }.cta-orb-one { left: -390px; }.cta-orb-two { right: -390px; }
  .site-footer { padding-inline: 20px; }.footer-top { min-height: 82px; flex-wrap: wrap; gap: 7px 12px; padding: 15px 0; }.footer-brand { font-size: 18px; }.footer-brand img { width: auto; height: 27px; }.footer-tagline { font-size: 9px; }.footer-contact { width: 100%; margin: 1px 0 0 40px; font-size: 10px; }.footer-bottom { min-height: 88px; flex-wrap: wrap; gap: 9px; padding: 14px 0; font-size: 7px; }.footer-bottom > div { order: 3; width: 100%; gap: 15px; }.back-top { margin-left: auto; }
  .interior-main { min-height: 0; padding-top: 57px; padding-bottom: 72px; }.contact-layout { grid-template-columns: 1fr; gap: 28px; margin-top: 24px; }.contact-copy { padding-top: 0; }.contact-copy h1, .legal-main h1 { font-size: 46px; }.contact-copy > p { margin: 16px 0 19px; font-size: 13px; }.enquiry-form { padding: 22px 18px; }.legal-main { padding-top: 57px; padding-bottom: 75px; }.legal-main h1 { margin-top: 22px; }.legal-lede { font-size: 13px; }.legal-content { margin-top: 30px; }.legal-content h2 { font-size: 14px; }.legal-content p { font-size: 11px; }
}
@media (max-width: 380px) {
  :root { --wrap: calc(100% - 32px); }
  .hero h1 { font-size: 40px; }.hero-actions { align-items: flex-start; flex-direction: column; }.hero-art { min-height: 310px; }.mock-site { min-height: 278px; }.mock-photo { height: 160px; }.mock-hero { padding-top: 22px; }.mock-title { font-size: 25px; }.mock-hero p { font-size: 7px; }.mock-link { font-size: 4px; }.package-heading h2 { font-size: 43px; }.promise-right { grid-template-columns: .72fr 1.28fr; }.clock-graphic { transform: scale(.75); }.final-cta h2 { font-size: 39px; }.footer-bottom { font-size: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .browser-card { animation: none; }
}


/* Clearer preview controls, gentle illustration changes and readable legal pages. */
.brand img { transition: transform .3s cubic-bezier(.2,.7,.25,1); }
.brand:hover img { transform: translateY(-1px); }
.theme-switcher { min-height: 42px; gap: 7px; padding: 5px 10px; }
.theme-label { display: inline-flex; align-items: center; gap: 4px; color: #334238; font: 500 10px var(--mono); letter-spacing: .035em; }
.theme-arrow { color: #79a83c; font-size: 13px; line-height: 1; transition: transform .22s ease; }
.theme-switcher:hover .theme-arrow { transform: translate(2px,-2px); }
.theme-current { min-width: 53px; font-size: 7px; }
.theme-swatch { width: 32px; height: 32px; position: relative; border: 0; background: transparent !important; box-shadow: none; }
.theme-swatch::before { content: ""; position: absolute; inset: 8px; border: 1px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #d8dfd5; transition: transform .2s ease; }
.swatch-fieldnote::before { background: linear-gradient(135deg,#a4ad8b 0 50%,#e7bb83 50%); }
.swatch-clay::before { background: linear-gradient(135deg,#c17b5c 0 50%,#efc18a 50%); }
.swatch-night::before { background: linear-gradient(135deg,#263a31 0 50%,#d3c078 50%); }
.theme-swatch:hover, .theme-swatch:focus-visible { transform: none; outline: none; box-shadow: 0 0 0 2px #92bf4c; }
.theme-swatch:hover::before, .theme-swatch:focus-visible::before { transform: scale(1.1); }
.theme-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px #8bbd40; }
.theme-swatch[aria-pressed="true"]::before { transform: scale(1.06); }
.step-illustration { transition: background-color .35s ease, box-shadow .35s ease; }
.step-card:hover .talk-illustration { background-color: #f8e9da; box-shadow: inset 0 0 0 1px #efdfcf; }
.step-card:hover .build-illustration { background-color: #e3eee4; box-shadow: inset 0 0 0 1px #d4e3d4; }
.step-card:hover .launch-illustration { background-color: #e8e2f2; box-shadow: inset 0 0 0 1px #ddd5eb; }
.step-card:hover .bubble-two { background: #d1f184; }
.step-card:hover .code-window { border-color: #d2e1d0; background: #fefffb; }
.step-card:hover .launch-card { border-color: #e1d9ed; background: #fffefd; }
.code-window, .launch-card, .bubble-two { transition: background-color .3s ease, border-color .3s ease, transform .25s ease; }
.review-stars { display: inline-block; color: #8fbb47; transform-origin: left center; transition: color .28s ease, transform .28s ease, text-shadow .28s ease; }
.review-card:hover .review-stars { color: #e6ad4d; transform: translateY(-1px); text-shadow: 0 2px 8px #e6ad4d44; }

.legal-main { max-width: 1040px; padding-top: 86px; padding-bottom: 112px; }
.legal-hero { position: relative; overflow: hidden; padding: 40px 43px 36px; border: 1px solid #e1e8dc; border-radius: 10px; background: radial-gradient(circle at 94% 8%,#e6f0d6 0,transparent 24%),linear-gradient(125deg,#f0f5e9 0%,#fafbf8 74%); box-shadow: 0 14px 38px #22302008; }
.legal-hero::after { content: "✳"; position: absolute; top: 19px; right: 30px; color: #b4d789; font-size: 54px; line-height: 1; transform: rotate(-9deg); opacity: .72; }
.legal-hero > * { position: relative; z-index: 1; }
.legal-hero .section-kicker { width: fit-content; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; padding: 9px 12px; border: 1px solid #e3e9dd; border-radius: 999px; color: #788578; background: #ffffffc9; font: 8px/1.4 var(--mono); letter-spacing: .05em; }
.legal-hero .section-kicker span { color: #5f8732; font-weight: 500; }
.legal-hero h1 { max-width: 800px; margin: 25px 0 0; font-size: clamp(49px,6.3vw,70px); }
.legal-lede { max-width: 690px; margin: 15px 0 0; color: #657268; font-size: 15px; line-height: 1.8; }
.legal-content { max-width: 820px; margin: 44px auto 0; }
.legal-content section { margin: 0 0 13px; padding: 23px 27px 21px; border: 1px solid #e3e9e1; border-radius: 7px; background: #fff; box-shadow: 0 5px 18px #24332608; }
.legal-content h2 { margin: 0 0 12px; color: #26352b; font: 700 19px/1.35 var(--display); letter-spacing: -.035em; }
.legal-content p { margin: 0 0 12px; color: #68756b; font-size: 14px; line-height: 1.78; }
.legal-content p:last-child { margin-bottom: 0; }
.legal-content strong { color: #3a493c; }
.legal-content a { color: #5b812f; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.legal-content ul { margin: 9px 0 13px; padding-left: 22px; color: #68756b; font-size: 14px; line-height: 1.78; }
.legal-content li { padding-left: 3px; margin: 7px 0; }

@media (max-width: 760px) {
  .theme-switcher { min-height: 42px; left: 2px; gap: 5px; padding: 5px 8px; }
  .theme-label { font-size: 9px; }
  .theme-current { min-width: 45px; font-size: 6px; }
  .theme-swatch { width: 31px; height: 31px; }
  .theme-swatch::before { inset: 8px; }
  .legal-main { padding-top: 48px; padding-bottom: 72px; }
  .legal-hero { padding: 24px 20px 21px; border-radius: 8px; }
  .legal-hero::after { top: 19px; right: 16px; font-size: 36px; opacity: .55; }
  .legal-hero .section-kicker { max-width: 100%; padding: 8px 10px; font-size: 7px; }
  .legal-hero h1 { margin-top: 21px; font-size: clamp(39px,10vw,48px); }
  .legal-lede { margin-top: 13px; font-size: 14px; line-height: 1.72; }
  .legal-content { margin-top: 28px; }
  .legal-content section { margin-bottom: 10px; padding: 18px 17px 17px; }
  .legal-content h2 { margin-bottom: 10px; font-size: 17px; }
  .legal-content p, .legal-content ul { font-size: 13px; line-height: 1.72; }
}
@media (max-width: 380px) {
  .theme-switcher { gap: 4px; padding-inline: 7px; }
  .theme-label { font-size: 8px; }
  .theme-swatch { width: 30px; height: 30px; }
  .theme-current { min-width: 42px; }
}

/* Consistent, low-amplitude interactions across the work and review cards. */
.step-card, .review-card { --card-lift: 0px; transform: perspective(900px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)) translateY(var(--card-lift)); transform-style: preserve-3d; will-change: transform; transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
.review-featured { --card-lift: -8px; }
.step-card:hover, .review-card:hover { --card-lift: -6px; position: relative; z-index: 2; transform: perspective(900px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)) translateY(var(--card-lift)); border-color: #cddcb8; box-shadow: 0 12px 26px #2538240c; }
.review-featured:hover { --card-lift: -13px; }
.review-arrow { transition: transform .25s ease; }
.review-card:hover .review-arrow { transform: translate(3px,-3px); }
.review-stars { transition: color .25s ease; }
.review-card:hover .review-stars { color: #e6ad4d; }
.package-card { transition: transform .35s ease, box-shadow .35s ease; }
.package-card:hover { transform: translateY(-4px); box-shadow: 0 28px 55px #101a1438; }
.includes-list li { transition: transform .22s ease, background-color .22s ease; }
.includes-list li:hover { transform: translateX(5px); }
.includes-list li:hover .include-check { transform: rotate(-12deg) scale(1.08); background: #e5f3d3; }
.include-check { transition: transform .22s ease, background-color .22s ease; }
.faq-list summary { transition: color .2s ease; }
.faq-list summary:hover { color: #6e9f32; }
.faq-list summary:hover span { transform: rotate(90deg); border-color: #afcd83; }
.browser-card { transform: perspective(1000px) rotateX(var(--preview-tilt-y,0deg)) rotateY(var(--preview-tilt-x,0deg)) rotate(1.2deg); }
.browser-card:hover { transform: perspective(1000px) rotateX(var(--preview-tilt-y,0deg)) rotateY(var(--preview-tilt-x,0deg)) rotate(0deg) translateY(-5px); }
.reveal-on-scroll { opacity: 0; translate: 0 18px; transition: opacity .72s cubic-bezier(.2,.7,.25,1), translate .72s cubic-bezier(.2,.7,.25,1); transition-delay: var(--reveal-delay,0ms); }
.reveal-on-scroll.is-revealed { opacity: 1; translate: 0 0; }
@media (max-width: 760px) {
  .hero-art { min-height: 407px; }
  .theme-switcher { left: 2px; }
}
@media (max-width: 380px) {
  .hero-art { min-height: 409px; }
  .theme-switcher { gap: 5px; padding-inline: 7px; }
  .theme-label { font-size: 6px; }
  .theme-current { min-width: 43px; }
}

/* Final overrides for the existing interaction layer above. */
.review-stars { color: #8fbb47; transition: color .28s ease, transform .28s ease, text-shadow .28s ease; }
.review-card:hover .review-stars { color: #e6ad4d; transform: translateY(-1px); text-shadow: 0 2px 8px #e6ad4d44; }
@media (max-width: 380px) { .theme-label { font-size: 9px; } }

.form-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.form-error { margin-top: 16px; padding: 13px; border-radius: 4px; color: #8f4237; background: #fff0ec; font-size: 12px; line-height: 1.55; }
.form-error a { color: inherit; }
.form-submit:disabled { opacity: .72; cursor: wait; }