:root{--ink:#173e33;--text:#253c34;--muted:#617269;--green:#237d59;--cream:#f8f7f1;--line:#dce3db;--mint:#dbead5}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;background:var(--cream);color:var(--text);font:16px/1.65 'Segoe UI',Arial,sans-serif}h1,h2,h3,p{margin-top:0}h1,h2,h3{color:var(--ink);line-height:1.12}a{color:inherit;text-underline-offset:4px}img{display:block;max-width:100%;height:auto}button,a,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #c18522;outline-offset:5px}.wrap{width:min(1200px,calc(100% - 80px));margin:auto}.header{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line);background:rgba(248,247,241,.97)}.nav-row{min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:30px}.brand img{width:196px;height:44px;object-fit:contain}nav{display:flex;align-items:center;gap:32px}nav a{text-decoration:none;font-size:14px;font-weight:600}nav a:hover,.text-link:hover{color:var(--green)}.signin{border-left:1px solid #bccbbc;padding-left:32px}.menu{display:none}.skip{position:absolute;left:12px;top:-90px;background:white;padding:12px;z-index:30}.skip:focus{top:10px}.hero{padding:68px 0 64px;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:50px}.eyebrow{font-size:11px;font-weight:750;letter-spacing:1.7px;color:var(--green);margin-bottom:22px}.dot{display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;margin-right:7px}h1{font-size:clamp(45px,4.6vw,66px);letter-spacing:-3px;line-height:1.04;margin-bottom:24px}h1 span{color:var(--green)}.slogan{font-size:21px;font-weight:650;letter-spacing:-.4px;margin-bottom:18px}.lead{color:var(--muted);font-size:17px;line-height:1.8;max-width:540px}.hero .lead{max-width:490px;margin-bottom:28px}.actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}.button{background:var(--ink);color:#fff;text-decoration:none;padding:14px 22px;border-radius:6px;font-size:14px;font-weight:650;display:inline-flex;justify-content:center;align-items:center;gap:22px;min-height:49px;transition:background .2s}.button:hover{background:var(--green)}.text-link{font-size:14px;font-weight:650;text-decoration:none;border-bottom:1px solid #a7b9a9;padding:7px 0;display:inline-block}.micro{font-size:11px;color:var(--muted);margin:15px 0 0}.hero-art{position:relative;min-height:450px;padding:54px 36px 80px 0}.hero-art:before{content:'';position:absolute;inset:0 -60px 12px -20px;background:#e3ebdc;border-radius:48% 48% 16% 16%;z-index:-1}.art-label{font-size:9px;letter-spacing:1.4px;font-weight:700;text-align:center;margin-bottom:22px}.desktop{border:7px solid #233e34;border-bottom-width:13px;border-radius:12px;box-shadow:0 22px 35px #173e331c;overflow:hidden;background:white;transform:rotate(-2deg)}.desktop>img{width:100%;height:267px;object-fit:cover;object-position:top}.browser-bar{height:23px;display:flex;gap:4px;align-items:center;padding:0 7px;background:#eff1ed}.browser-bar i{width:4px;height:4px;border-radius:50%;background:#9aaba2}.browser-bar span{font-size:6px;color:#607266;margin:auto}.phone{position:absolute;bottom:32px;right:0;width:115px;height:232px;border:5px solid #173e33;border-radius:20px;overflow:hidden;background:white;transform:rotate(5deg);box-shadow:0 15px 30px #173e332a}.phone img{width:100%;height:100%;object-fit:cover;object-position:top}.speaker{position:absolute;background:#173e33;width:35px;height:7px;border-radius:0 0 6px 6px;top:0;left:calc(50% - 17px)}.art-caption{position:absolute;left:18px;bottom:25px;font-size:12px;line-height:1.5}.art-caption>span{float:left;font-size:30px;margin-right:14px;color:var(--green)}.demo-note{position:absolute;bottom:-12px;left:0;width:100%;text-align:center;font-size:9px;color:var(--muted)}.promise-strip{background:var(--ink);color:#e6eedf}.promise-strip .wrap{display:flex;justify-content:space-between;padding-block:20px;gap:18px}.promise-strip span{font-size:12px;letter-spacing:.5px}.promise-strip span:before{content:'✳';color:#b5d39c;margin-right:16px}.section{padding:95px 0}h2{font-size:clamp(32px,3vw,44px);letter-spacing:-1.6px;margin-bottom:22px}.section-heading{display:flex;justify-content:space-between;gap:60px;align-items:end;margin-bottom:42px}.section-heading>p{max-width:335px;color:var(--muted);font-size:14px;margin-bottom:25px}.features{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.features article{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px;background:#ffffff55}.number{font-size:10px;letter-spacing:1.2px;font-weight:700;color:var(--green);display:block;margin-bottom:30px}.features h3{font-size:21px;letter-spacing:-.5px;min-height:47px}.features p{color:var(--muted);font-size:14px;margin-bottom:26px}.feature-tag{font-size:11px;color:var(--green)}.how{background:#eaf0e5}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;margin:45px 0 25px}.steps article{border-top:1px solid #b7cbb4;padding-top:22px}.steps span{font-size:30px;font-weight:300;color:var(--green);display:block;margin-bottom:20px}.steps h3{font-size:21px}.steps p{font-size:14px;color:var(--muted)}.split{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.ticks{list-style:none;padding:0;font-size:14px;margin:24px 0}.ticks li{padding:8px 0}.ticks li:before{content:'✓';color:var(--green);margin-right:12px}.small{font-size:12px;color:var(--muted);line-height:1.7}.receipt-demo{max-width:420px;width:100%;justify-self:center;border:1px solid #d2ddd0;border-radius:16px;overflow:hidden;background:white;box-shadow:0 15px 45px #173e330c;transform:rotate(2deg)}.chat-heading{display:flex;gap:12px;align-items:center;background:var(--ink);padding:20px;color:white}.chat-heading small{display:block;font-size:10px;color:#ccdcca}.chat-icon{width:35px;height:35px;border:1px solid #85ad92;border-radius:50%;display:grid;place-items:center}.chat-body{background:#e9eee2;padding:28px 24px;display:flow-root}.bubble{background:#fff;border-radius:0 12px 12px 12px;padding:22px;max-width:300px;font-size:13px}.bubble small{font-size:9px;letter-spacing:1.1px;color:var(--green)}.bubble h3{font-size:32px;margin:9px 0}.bubble hr{border:0;border-top:1px solid var(--line);margin:20px 0}.reply-options{display:grid;gap:7px;color:var(--green);font-size:12px;text-align:center}.reply-options span{border-top:1px solid var(--line);padding-top:8px}.reply{float:right;background:#d4ebc7;font-size:12px;border-radius:10px 0 10px 10px;padding:12px 16px;margin-top:18px}.receipt-status{font-size:11px;text-align:center;padding:14px}.ledger-section{padding-top:10px}.ledger-image{background:#e3ebdc;border:1px solid var(--line);border-radius:10px;padding:20px}.ledger-image img{border:1px solid #d2ddd0;aspect-ratio:1.5;object-fit:cover;object-position:top}.ledger-image span{display:block;font-size:8px;letter-spacing:1px;text-align:center;margin-top:15px;color:var(--muted)}.pricing{background:#f0f1e9;border-block:1px solid var(--line)}.center{text-align:center;margin-bottom:65px}.center>p:last-child{font-size:14px;color:var(--muted)}.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.plan{padding:30px 26px;border:1px solid #ccd7c9;background:#fbfcf7;border-radius:8px;position:relative}.plan-kicker{font-size:9px;letter-spacing:1px;color:var(--muted);font-weight:700}.plan h3{font-size:29px;letter-spacing:-1px}.price{font-size:35px;font-weight:650;color:var(--ink);letter-spacing:-1.5px;line-height:1.15;margin-bottom:20px;white-space:nowrap}.price>span{font-size:12px;letter-spacing:0}.price small{font-size:11px;font-weight:400;letter-spacing:0;margin-left:6px}.plan-intro{font-size:12px;color:var(--muted)}.plan .button{width:100%;margin:5px 0 15px}.outline{background:transparent;color:var(--ink);border:1px solid #b6c6b2}.outline:hover{color:white}.plan ul{list-style:none;padding:0;font-size:13px}.plan li{padding:9px 0 9px 20px;border-bottom:1px solid #e3e9df;position:relative}.plan li:before{content:'✓';color:var(--green);position:absolute;left:0}.plan li.unavailable:before{content:'−';color:#7c827c}.plan li.unavailable{color:var(--muted)}.featured{border:2px solid var(--green);background:#fff;padding:29px 25px}.plan-banner{position:absolute;bottom:100%;left:-2px;right:-2px;background:var(--green);color:#fff;border-radius:6px 6px 0 0;padding:8px;text-align:center;font-size:9px;letter-spacing:.6px}.trial{display:flex;align-items:center;gap:60px;background:#e0ead8;border-radius:8px;padding:34px;margin-top:30px}.trial h3{font-size:25px}.trial p:not(.eyebrow){font-size:13px}.trial .small{margin-bottom:0}.trial .eyebrow{font-size:9px;margin-bottom:12px}.trial .button{flex-shrink:0}.faq-grid{display:grid;grid-template-columns:.8fr 1.3fr;gap:100px}.faq-grid>div>p:not(.eyebrow){font-size:14px;color:var(--muted)}details{border-bottom:1px solid var(--line)}summary{font-size:15px;font-weight:600;cursor:pointer;padding:21px 30px 21px 0;position:relative;list-style:none}summary::-webkit-details-marker{display:none}summary:after{content:'+';position:absolute;right:3px;font-size:21px;color:var(--green);top:15px}details[open] summary:after{content:'−'}details p{font-size:14px;color:var(--muted);padding-right:25px;margin-bottom:24px}.closing{background:var(--ink);color:#ccdccd;text-align:center;padding:78px 0}.closing .eyebrow{color:#acc996}.closing h2{color:#fff;font-size:40px}.closing .button{background:#d6e8c8;color:var(--ink);margin:7px 0 20px}.closing p:last-child{font-size:12px;margin-bottom:0}.closing a:hover{opacity:.85}footer{padding:50px 0 20px;background:#f6f7f0;font-size:12px;color:var(--muted)}.footer-main{display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:40px;margin-bottom:45px}.footer-main img{width:176px;height:43px;object-fit:contain;margin-bottom:12px}.footer-main a{display:block;text-decoration:none;margin-top:9px}.footer-main b{color:var(--ink);display:block;margin-bottom:15px}.footer-bottom{border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;gap:20px;font-size:10px}.footer-bottom a{margin-left:25px;text-decoration:none}@media(min-width:1500px){.hero{padding-block:90px}.hero-art{min-height:470px}}@media(max-width:1050px){.wrap{width:calc(100% - 48px)}nav{gap:20px}.hero-grid{gap:25px}h1{font-size:52px}.hero-art{padding-right:25px;min-height:400px}.desktop>img{height:230px}.phone{width:100px;height:207px}.split{gap:45px}.price{font-size:29px}.plan{padding:25px 20px}.features article{padding:25px}.section{padding:75px 0}.faq-grid{gap:50px}}@media(max-width:760px){.wrap{width:calc(100% - 40px)}.nav-row{min-height:72px}.brand img{width:165px}.menu{display:flex;gap:12px;padding:9px 12px;border:1px solid #bdcdb7;border-radius:5px;background:transparent;color:var(--ink);font:600 12px 'Segoe UI',sans-serif}nav{display:none;position:absolute;top:71px;left:0;right:0;background:var(--cream);padding:20px;border-bottom:1px solid var(--line);align-items:stretch;gap:0}nav.open{display:flex;flex-direction:column}nav a{padding:12px}.signin{border:0}.hero{padding:40px 0 42px}.hero-grid{grid-template-columns:1fr;gap:32px}.hero-copy{max-width:550px}.eyebrow{font-size:9px;letter-spacing:1.1px;margin-bottom:18px}h1{font-size:clamp(44px,9vw,62px);letter-spacing:-2.3px}.slogan{font-size:19px}.lead{font-size:15px}.hero-art{min-height:370px;max-width:530px;width:100%;margin:auto;padding:32px 36px 70px 8px}.hero-art:before{inset:0 -8px 12px -8px}.desktop>img{height:230px}.phone{bottom:20px;right:8px;width:108px;height:220px}.art-caption{bottom:13px;left:12px;font-size:10px}.art-caption>span{font-size:24px}.art-label{font-size:8px}.demo-note{bottom:-26px;font-size:8px}.promise-strip .wrap{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-block:22px}.promise-strip span{font-size:10px}.promise-strip span:before{margin-right:8px}.section{padding:60px 0}.section-heading{display:block;margin-bottom:28px}.section-heading>p{max-width:500px}h2{font-size:34px;letter-spacing:-1.2px}.features{grid-template-columns:1fr 1fr}.features article{padding:22px 18px}.features h3{font-size:19px}.features p{font-size:13px}.number{font-size:9px;margin-bottom:20px}.feature-tag{font-size:10px}.steps{grid-template-columns:1fr;gap:15px;margin-top:25px}.steps article{padding-left:55px;position:relative;padding-top:22px}.steps span{position:absolute;left:0;top:19px;font-size:25px}.split{grid-template-columns:1fr;gap:40px}.receipt-demo{transform:none;max-width:420px}.ledger-section{padding-top:10px}.ledger-section .split>div:last-child{order:-1}.plans{grid-template-columns:1fr;gap:38px;max-width:480px;margin:auto}.center{margin-bottom:40px}.plan{padding:28px}.plan h3{font-size:30px}.price{font-size:38px}.trial{display:block;padding:26px;margin-top:30px}.trial .button{margin-top:22px}.faq-grid{grid-template-columns:1fr;gap:25px}.closing{padding:55px 0}.closing h2{font-size:32px}.footer-main{grid-template-columns:1fr 1fr;gap:30px}.footer-main>div:first-child{grid-column:1/-1}.footer-bottom{flex-direction:column;gap:12px}.footer-bottom a{margin:0 22px 0 0}}@media(max-width:420px){.hero-art{min-height:330px;padding-right:32px}.desktop>img{height:192px}.phone{width:92px;height:188px}.features{grid-template-columns:1fr}.features h3{min-height:0}.features article{padding:25px}.actions{gap:14px}.button{font-size:13px;padding:13px 18px}.text-link{font-size:12px}.footer-main{grid-template-columns:1fr}.footer-main>div:first-child{grid-column:auto}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}

@media(min-width:761px){.hero-art{min-height:500px}.art-caption{bottom:25px}}
@media(min-width:421px) and (max-width:760px){.hero-art{min-height:400px}}
@media(max-width:420px){.hero-art{min-height:355px}}


.header .button{color:white}.hero{background:#102e26;color:white;padding:54px 0}.hero h1,.hero .slogan{color:white}.hero h1 span{color:#b2d8a6}.hero .eyebrow,.hero .lead,.hero .micro{color:#cee0d3}.hero-grid{gap:54px}.board{margin:0;position:relative;padding:15px 34px 35px 0}.board header{background:#e4ece1;color:#173e33;border-radius:9px 9px 0 0;padding:9px 14px;font-size:12px;font-weight:650}.screen{width:100%;height:230px;object-fit:cover;object-position:top;border:4px solid #e4ece1;border-radius:0 0 9px 9px}.handset{position:absolute;bottom:24px;right:0;width:86px;height:176px;object-fit:cover;object-position:top;border:4px solid #416553;border-radius:14px}.board figcaption{font-size:10px;margin-top:12px;color:#c4d8c9}.features{border:0;gap:0 30px}.features article{border:0;border-top:1px solid #b2c2b2;background:transparent;padding:22px 0}.features h3{min-height:0}.features p{margin:0}.section{padding:56px 0}.section-heading,.center{margin-bottom:22px}.compare,.trial{max-width:950px;margin-inline:auto}.compare table{width:100%;table-layout:fixed;border-collapse:collapse;background:white}.compare td,.compare th{text-align:center;padding:11px 6px;border-bottom:1px solid #d6ddd3;font-size:14px}.compare th:first-child{text-align:left;width:31%}.compare thead{background:#173e33;color:white}.compare tbody tr:first-child td{font-size:22px;font-weight:700}.compare p{font-size:14px;margin:14px 0}.compare a{font-size:14px}.trial{padding:22px 28px}.section-heading>p{margin:0}
@media(max-width:760px){.hero-grid{gap:12px}.hero{padding:32px 0 15px}.board{max-width:450px;width:100%;margin:auto}.screen{height:174px}.handset{width:69px;height:143px}.compare th,.compare td{font-size:11px;padding:9px 3px}.compare tbody tr:first-child td{font-size:16px}.features{gap:0 16px}.section{padding:44px 0}}
.hero{background:linear-gradient(90deg,rgba(7,33,25,.94),rgba(7,33,25,.7) 40%,rgba(7,33,25,.08) 78%),url('residence.webp') center 53%/cover}.hero .board{width:min(100%,330px);justify-self:end;align-self:end;padding-bottom:12px;margin-top:125px}.board .screen{height:112px}.board .handset{width:54px;height:108px}.board figcaption{background:#173e33;padding:4px 8px;color:white}.rate-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.rate-cards article{background:#fff;border:1px solid #c5d2c5;border-top:4px solid #758b7d;border-radius:9px;padding:18px 20px}.rate-cards article:nth-child(2){border-top-color:#b28a43}.rate-cards article:last-child{border-top-color:#173e33}.rate-cards h3{margin:0;font-size:23px}.rate-cards .cost{font-size:32px;font-weight:700;color:#173e33;line-height:1.15;margin:10px 0 0}.cost small,.rate-cards span{font-size:12px}.rate-cards ul{padding:12px 0 0;border-top:1px solid #dce4da;list-style:none;font-size:13px;margin-bottom:0}.rate-cards li+li{margin-top:5px}.header nav .button{min-height:36px;padding:7px 14px}@media(max-width:760px){.hero{background-position:65% center}.hero .board{margin-top:10px;width:245px}.rate-cards{grid-template-columns:1fr;gap:9px}.rate-cards article{display:grid;grid-template-columns:1fr 1fr;padding:13px 16px}.rate-cards .cost{grid-column:2;grid-row:1;text-align:right;margin:0;font-size:23px}.rate-cards span{text-align:right;grid-column:2}.rate-cards ul{grid-column:1/-1;margin-top:7px;padding-top:6px}}

/* Keep the brand name together in the headline. */
.hero h1 span { display: inline-block; white-space: nowrap; }


.hero h1 .headline-line { color: inherit; white-space: nowrap; }
.headline-line em { color: #b2d8a6; font-style: normal; }
@media (max-width: 1050px) { .hero h1 { font-size: clamp(24px, 6.7vw, 46px); letter-spacing: -.045em; } }


/* Subscription cards share a baseline so plan details are easy to compare. */
.pricing .compare { max-width: 1080px; }
.subscription-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:25px 0 16px; }
.tier { display:flex; flex-direction:column; overflow:hidden; border:1px solid #456456; border-radius:13px; background:#18352b; color:#f7faf6; }
.tier header { padding:19px 21px; background:#304249; border-bottom:1px solid #597265; }
.tier.gold header { background:#504426; }
.tier.platinum header { background:#225440; }
.tier h3 { font-size:24px; color:white; margin:0; }
.tier header p { color:#edf2e8; font-size:13px; margin:5px 0 12px; }
.tier header strong { display:block; font-size:clamp(25px,2.4vw,32px); line-height:1.2; letter-spacing:-1px; }
.tier header small { display:block; margin-top:3px; font-size:12px; color:#e4ecdf; }
.tier ul { list-style:none; margin:0; padding:17px 20px; flex:1; }
.tier li { padding-left:16px; position:relative; margin-bottom:7px; font-size:13px; line-height:1.45; }
.tier li::before { content:''; position:absolute; width:5px; height:5px; background:#afd0a7; border-radius:50%; left:0; top:.55em; }
.tier footer { padding:12px 20px; min-height:57px; display:flex; align-items:center; border-top:1px solid #456456; background:#1c3b30; color:#e4ecdf; font-size:12px; line-height:1.45; }
@media(max-width:760px) { .subscription-cards { grid-template-columns:1fr; gap:14px; } .tier header { padding:14px 18px; } .tier ul { padding:13px 18px 7px; } .tier footer { min-height:0; } }


/* Hero mock-up: the real dashboard (left) with the phone view beside it (right, always shorter), side by side so neither hides the other.
   Both are fresh, cropped screenshots of the demo project. On a wide screen the pair sits in the bottom-right corner of the photo,
   a small gap in from the right and bottom edges; on a phone it sits under the text. */
.hero { position: relative; }
.hero .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
.hero .board { position: absolute; right: clamp(20px, 3vw, 44px); bottom: 30px; width: min(610px, 50vw); margin: 0; padding: 0 168px 0 0; z-index: 2; }
.hero .board header { font-size: 12px; padding: 9px 14px; }
.hero .board .screen { height: auto; aspect-ratio: 1455 / 720; object-fit: cover; border-width: 5px; }
.hero .board .handset { width: 152px; height: auto; aspect-ratio: 1170 / 1545; bottom: 0; right: 0; border: 4px solid #416553; border-radius: 16px; box-shadow: 0 16px 36px rgba(0, 0, 0, .45); }
@media (min-width: 761px) { .hero { min-height: 700px; } }
@media (min-width: 1051px) and (max-width: 1250px) { .hero .board { padding-right: 150px; } .hero .board .handset { width: 132px; } }
@media (min-width: 761px) and (max-width: 1050px) { .hero { min-height: 780px; } .hero .board { width: min(560px, 58vw); padding-right: 124px; } .hero .board .handset { width: 108px; } }
@media (max-width: 760px) {
  .hero .hero-grid { grid-template-columns: 1fr; }
  .hero .board { position: relative; right: auto; bottom: auto; width: 100%; max-width: 520px; margin: 28px 0 0 auto; padding: 0 100px 0 0; }
  .hero .board .handset { width: 88px; border-width: 3px; border-radius: 12px; }
  .hero .board header { font-size: 12px; padding: 8px 12px; }
}