:root {
  font-family: "DM Sans", sans-serif;
  color: #17382d;
  background: #f5f3e9;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.site-header {
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1.25rem, 5vw, 5rem);
  border-bottom: 1px solid #17382d24;
  background: #f5f3e9;
}

.brand { display: inline-flex; align-items: center; gap: .72rem; font-size: .83rem; font-weight: 800; letter-spacing: .12em; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #17382d; color: #d8ed91; }
.brand-mark svg { width: 25px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.site-header nav { display: flex; align-items: center; gap: 1.75rem; font-size: .88rem; font-weight: 700; }
.login-link:hover { opacity: .6; }
.start-link { display: flex; align-items: center; gap: 1.2rem; padding: .8rem 1rem .8rem 1.2rem; border-radius: 6px; color: #f8f5eb; background: #17382d; }
.start-link span { color: #d8ed91; }

.hero { min-height: 770px; display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; padding: clamp(3rem, 6vw, 6rem) 0 clamp(4rem, 7vw, 7rem) clamp(1.25rem, 6vw, 6rem); background: radial-gradient(circle at 8% 12%, #fff 0, transparent 28%), #f5f3e9; }
.hero-copy { position: relative; z-index: 2; padding-right: 2rem; }
.eyebrow { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.5rem; color: #61746d; font-size: .69rem; font-weight: 800; letter-spacing: .15em; }
.eyebrow span { width: 22px; height: 2px; background: #8eaa3f; }
h1 { margin: 0; font: 700 clamp(4rem, 7.4vw, 8.2rem)/.82 "Newsreader", serif; letter-spacing: -.052em; }
h1 em, h2 em { color: #738d31; font-weight: 600; }
.hero-actions { display: flex; align-items: center; gap: 2.2rem; margin-top: 3.2rem; }
.primary-action { display: flex; align-items: center; justify-content: space-between; min-width: 175px; padding: 1rem 1.1rem 1rem 1.3rem; border-radius: 6px; color: #fff; background: #17382d; font-size: .9rem; font-weight: 700; }
.primary-action span { color: #d8ed91; font-size: 1.2rem; }
.mini-proof { display: flex; align-items: center; gap: .8rem; }
.proof-avatars { display: flex; }
.proof-avatars b { width: 30px; height: 30px; display: grid; place-items: center; margin-left: -7px; border: 2px solid #f5f3e9; border-radius: 50%; color: #fff; background: #668078; font-size: .55rem; }
.proof-avatars b:first-child { margin-left: 0; background: #a27658; }
.proof-avatars b:last-child { color: #17382d; background: #d8ed91; }
.mini-proof small { color: #66766f; font-size: .68rem; line-height: 1.5; }

.dashboard-stage { position: relative; min-width: 0; padding: 2rem 0 3rem 3rem; }
.sun-orbit { position: absolute; width: 660px; height: 660px; right: -160px; top: 50%; transform: translateY(-50%); border-radius: 50%; background: #d8ed91; opacity: .7; }
.dashboard-window { position: relative; z-index: 2; width: min(780px, 100%); overflow: hidden; border: 1px solid #17382d36; border-radius: 10px 0 0 10px; background: #fafbf7; box-shadow: 0 35px 80px #17382d26; }
.window-top { height: 56px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 1.1rem; color: #fff; background: #17382d; }
.window-brand { font-size: .55rem; font-weight: 800; letter-spacing: .13em; }
.window-brand i { display: inline-block; width: 8px; height: 8px; margin-right: .35rem; border: 2px solid #d8ed91; border-radius: 50% 50% 50% 0; transform: rotate(-25deg); }
.window-nav { display: flex; gap: 1.2rem; }
.window-nav b { width: 34px; height: 4px; border-radius: 2px; background: #ffffff40; }
.window-nav b:first-child { background: #d8ed91; }
.avatar { justify-self: end; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #17382d; background: #d8ed91; font-size: .55rem; font-weight: 800; }
.window-body { padding: 1.35rem; }
.preview-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 1rem; }
.preview-heading span { order: 2; color: #74847e; font-size: .59rem; }
.preview-heading strong { font: 700 1.25rem "Newsreader", serif; }
.preview-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.preview-stats article { min-height: 95px; position: relative; padding: .85rem; border: 1px solid #dbe1dc; border-radius: 7px; background: #fff; }
.preview-stats small { display: block; color: #7a8983; font-size: .48rem; font-weight: 800; letter-spacing: .11em; }
.preview-stats strong { display: block; margin-top: .7rem; font: 700 1.45rem "Newsreader", serif; }
.preview-stats article > span { position: absolute; right: .7rem; bottom: .8rem; padding: .2rem .35rem; border-radius: 3px; background: #f1eee7; font-size: .46rem; }
.preview-stats .up { color: #5d7a19; background: #edf6d2; }
.preview-stats .dark-stat { color: #fff; background: #17382d; border-color: #17382d; }
.dark-stat small { color: #acc0b7; }
.dark-stat svg { position: absolute; right: 0; bottom: .5rem; width: 47%; fill: none; stroke: #d8ed91; stroke-width: 2; }
.preview-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: .7rem; margin-top: .7rem; }
.schedule-card, .route-card { min-height: 240px; border: 1px solid #dbe1dc; border-radius: 7px; background: #fff; }
.schedule-card { padding: .85rem; }
.card-title { display: flex; justify-content: space-between; padding-bottom: .7rem; color: #71817a; font-size: .5rem; font-weight: 800; letter-spacing: .1em; }
.card-title b { color: #17382d; font-weight: 600; letter-spacing: 0; }
.job { display: grid; grid-template-columns: 38px 8px 1fr 22px; align-items: center; gap: .55rem; min-height: 58px; border-top: 1px solid #edf0ed; }
.job time { color: #71817a; font-size: .53rem; }
.job i { width: 7px; height: 7px; border: 2px solid #93a39c; border-radius: 50%; }
.job.active i { border-color: #87a52f; background: #d8ed91; }
.job strong, .job small { display: block; }
.job strong { font-size: .64rem; }
.job small { margin-top: .2rem; color: #83908b; font-size: .49rem; }
.job > span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #658018; background: #edf5d4; font-size: .6rem; }
.route-card { position: relative; overflow: hidden; background: #e7ede7; }
.map-grid { position: absolute; inset: 0; opacity: .32; background-image: linear-gradient(32deg, transparent 45%, #b8c7bc 46%, #b8c7bc 48%, transparent 49%), linear-gradient(98deg, transparent 46%, #b8c7bc 47%, #b8c7bc 50%, transparent 51%); background-size: 90px 70px, 120px 100px; }
.route-line { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 55px); fill: none; stroke: #6c8b29; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 5 5; }
.pin { position: absolute; width: 22px; height: 22px; display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%; color: #fff; background: #17382d; box-shadow: 0 3px 8px #17382d33; font-size: .48rem; font-weight: 800; }
.pin-one { left: 9%; bottom: 20%; }.pin-two { left: 42%; top: 38%; }.pin-three { right: 13%; top: 13%; background: #779228; }
.route-footer { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; padding: .65rem .8rem; background: #ffffffea; }
.route-footer small { font-size: .45rem; font-weight: 800; letter-spacing: .1em; }.route-footer strong { font-size: .7rem; }
.paid-toast { position: absolute; z-index: 3; right: 3%; bottom: 0; display: flex; align-items: center; gap: .7rem; min-width: 170px; padding: .85rem; border-radius: 7px; color: #fff; background: #17382d; box-shadow: 0 18px 35px #17382d42; }
.paid-toast > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #17382d; background: #d8ed91; }
.paid-toast small, .paid-toast strong { display: block; }.paid-toast small { color: #aebfb8; font-size: .44rem; letter-spacing: .1em; }.paid-toast strong { margin-top: .18rem; font: 700 1rem "Newsreader", serif; }

.workflow { padding: clamp(5rem, 9vw, 9rem) clamp(1.25rem, 7vw, 7rem); background: #fffdf7; }
.section-label { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 3.4rem; }
.section-label span { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #aebbb4; border-radius: 50%; color: #75847e; font-size: .58rem; }
.section-label p { margin: 0; color: #667970; font-size: .65rem; font-weight: 800; line-height: 1.45; letter-spacing: .14em; }
.workflow-track { display: grid; grid-template-columns: minmax(200px, 1fr) auto minmax(200px, 1fr) auto minmax(200px, 1fr); align-items: center; gap: clamp(1rem, 3vw, 3.5rem); max-width: 1120px; margin: auto; }
.flow-arrow { color: #8aa136; font-size: 1.8rem; }
.flow-card { min-height: 315px; padding: 1.6rem; border: 1px solid #d7ddd8; border-radius: 10px; background: #fafaf5; box-shadow: 0 20px 45px #17382d0c; }
.flow-card > small { display: block; margin-top: 1.2rem; color: #7c8b85; font-size: .54rem; font-weight: 800; letter-spacing: .12em; }
.flow-card > strong { display: block; margin-top: .45rem; font: 700 1.35rem "Newsreader", serif; }.flow-card > p { color: #829089; font-size: .7rem; }
.flow-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: #d8ed91; background: #17382d; box-shadow: inset 0 -12px 0 #28493e; }
.contact-row { display: flex; justify-content: space-between; margin-top: 5rem; padding-top: .8rem; border-top: 1px solid #dce1dd; color: #7a8983; font-size: .65rem; }.contact-row b { color: #718b2d; }
.calendar-top { display: flex; justify-content: space-between; color: #61736b; font-size: .55rem; font-weight: 800; letter-spacing: .1em; }.calendar-top b { color: #17382d; }
.week, .dates { display: grid; grid-template-columns: repeat(5, 1fr); gap: .25rem; text-align: center; }.week { margin-top: 1.2rem; color: #89958f; font-size: .48rem; }.week i, .dates i { font-style: normal; }
.dates { margin-top: .8rem; font-size: .62rem; }.dates i { position: relative; padding: .55rem .2rem; }.dates .selected { border-radius: 5px; color: #fff; background: #17382d; }.dates .selected small { position: absolute; left: 50%; bottom: .25rem; width: 3px; height: 3px; border-radius: 50%; background: #d8ed91; }
.appointment { display: flex; align-items: center; gap: .75rem; margin-top: 2rem; padding: .8rem; border-radius: 6px; background: #edf3da; }.appointment > span { width: 6px; height: 34px; border-radius: 4px; background: #8ca63f; }.appointment small, .appointment strong { display: block; }.appointment small { color: #6f7f77; font-size: .48rem; }.appointment strong { margin-top: .2rem; font-size: .67rem; }
.complete-card { text-align: center; color: #fff; background: #17382d; }.check-ring { width: 56px; height: 56px; display: grid; place-items: center; margin: 0 auto; border: 1px solid #d8ed91; border-radius: 50%; color: #17382d; background: #d8ed91; font-size: 1.3rem; }.complete-card > small { color: #aebfb7; }.complete-card > strong { color: #fff; }.complete-total { display: flex; justify-content: space-between; margin-top: 2rem; padding: 1rem 0; border-top: 1px solid #ffffff25; font-size: .7rem; }.complete-total b { font: 700 1.2rem "Newsreader", serif; }.complete-card button { width: 100%; display: flex; justify-content: space-between; padding: .8rem; border: 0; border-radius: 5px; color: #17382d; background: #d8ed91; font-size: .68rem; font-weight: 800; }

.numbers-section { display: grid; grid-template-columns: .75fr 1.25fr; gap: 7vw; padding: clamp(5rem, 9vw, 9rem) clamp(1.25rem, 7vw, 7rem); color: #fff; background: #17382d; }
.section-label.light span { border-color: #ffffff55; color: #b6c8c0; }.section-label.light p { color: #b6c8c0; }
.numbers-copy h2 { margin: 8rem 0 0; font: 700 clamp(3.5rem, 6vw, 6rem)/.88 "Newsreader", serif; letter-spacing: -.045em; }.numbers-copy h2 em { color: #d8ed91; }
.ledger-preview { align-self: center; overflow: hidden; border: 1px solid #ffffff28; border-radius: 9px; background: #214137; box-shadow: 0 30px 70px #081c1666; }
.ledger-head { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem; border-bottom: 1px solid #ffffff20; font-size: .65rem; font-weight: 800; letter-spacing: .1em; }.ledger-head div { display: flex; gap: .4rem; }.ledger-head b { padding: .35rem .65rem; border-radius: 4px; color: #aebfb8; font-size: .55rem; letter-spacing: 0; }.ledger-head .active { color: #17382d; background: #d8ed91; }
.ledger-row { display: grid; grid-template-columns: 38px 1fr auto minmax(80px, auto); align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid #ffffff14; }.ledger-row i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: .75rem; }.money-in { color: #d8ed91; background: #ffffff12; }.money-out { color: #e4a789; background: #7d392933; }.ledger-row strong, .ledger-row small { display: block; }.ledger-row strong { font-size: .72rem; }.ledger-row small, .ledger-row > span { margin-top: .2rem; color: #9fb2aa; font-size: .54rem; }.ledger-row > b { text-align: right; font: 700 .87rem "Newsreader", serif; }.ledger-row .green { color: #d8ed91; }
.ledger-total { padding: 2rem 1.3rem; background: #d8ed91; color: #17382d; }.ledger-total span, .ledger-total small { display: block; font-size: .52rem; font-weight: 800; letter-spacing: .12em; }.ledger-total strong { display: block; margin: .5rem 0 .1rem; font: 700 3rem "Newsreader", serif; }

.final-cta { padding: clamp(6rem, 12vw, 12rem) 1.5rem; text-align: center; background: #d8ed91; }.sprout { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 1.5rem; border-radius: 50%; color: #d8ed91; background: #17382d; font-size: 1.5rem; }.final-cta h2 { margin: 0; font: 700 clamp(4rem, 8vw, 8rem)/.84 "Newsreader", serif; letter-spacing: -.05em; }.final-cta a { display: inline-flex; align-items: center; gap: 3rem; margin-top: 3rem; padding: 1rem 1.2rem; border-radius: 6px; color: #fff; background: #17382d; font-size: .85rem; font-weight: 700; }.final-cta a span { color: #d8ed91; }
footer { display: flex; justify-content: space-between; align-items: center; padding: 2rem clamp(1.25rem, 6vw, 6rem); color: #b7c7c0; background: #102d24; font-size: .68rem; }footer > span { color: #fff; font-weight: 800; letter-spacing: .12em; }footer a { color: #d8ed91; font-weight: 700; }

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; padding-right: 0; }
  .hero-copy { padding-right: 1.25rem; }
  .dashboard-stage { margin-top: 3rem; }
  .workflow-track { grid-template-columns: 1fr; max-width: 430px; }
  .flow-arrow { transform: rotate(90deg); text-align: center; }
  .numbers-section { grid-template-columns: 1fr; }
  .numbers-copy h2 { margin-top: 3rem; }
}

@media (max-width: 650px) {
  .site-header { height: 70px; }.site-header nav { gap: .8rem; }.login-link { display: none; }
  .hero { min-height: auto; padding-top: 4rem; }.hero-actions { align-items: flex-start; flex-direction: column; }
  .dashboard-stage { padding-left: 1rem; }.sun-orbit { width: 420px; height: 420px; }.dashboard-window { min-width: 620px; transform: scale(.68); transform-origin: left top; margin-bottom: -150px; }.paid-toast { right: 1rem; bottom: 0; }
  .workflow { padding-top: 5rem; }.flow-card { min-height: 290px; }
  .ledger-row { grid-template-columns: 34px 1fr auto; }.ledger-row > span { display: none; }.ledger-row { gap: .7rem; padding: .9rem; }
  footer { align-items: flex-start; flex-direction: column; gap: 1rem; }
}