html { scroll-behavior: smooth }
body { background: #f8faf7 }
.topbar { max-width: 1240px; height: 84px; border-color: #e6ebe4; gap: 25px }
.topbar .brand { white-space: nowrap }
.brand-symbol { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #164637; color: #e2f5c7; font-size: 24px; vertical-align: middle; margin-right: 3px }
.topbar #marketing-nav { justify-content: center; gap: 28px; flex: 1 }
.topbar #marketing-nav a { color: #62756a; font-weight: 600 }
.topbar #marketing-nav a:hover, .login-link:hover { color: #164637 }
.top-actions { display: flex; align-items: center; gap: 20px; white-space: nowrap }
.login-link { font-size: 14px; font-weight: 700; text-decoration: none; color: #284e3e }
.top-actions .primary { font-size: 13px; min-height: 39px; padding: 9px 15px; gap: 13px }
.marketing .eyebrow { color: #377856 }
.marketing .hero { max-width: none; display: grid; grid-template-columns: minmax(0,1fr) minmax(440px,1.07fr); align-items: center; gap: 40px; padding: 82px 0 94px }
.hero-copy { min-width: 0 }
.eyebrow-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #73b486; margin-right: 7px; vertical-align: middle }
.marketing .hero h1 { font-size: clamp(57px,6.5vw,88px); line-height: 1.03; letter-spacing: -.065em; margin: 0 0 25px; color: #163e30 }
.marketing .hero h1 em { font-weight: 400; color: #4d8b64 }
.marketing .hero-lead { color: #617469; font-size: 19px; line-height: 1.65; max-width: 530px; margin: 0 }
.marketing .hero .actions { gap: 12px; margin: 32px 0 18px; flex-wrap: wrap }
.large { min-height: 54px; padding: 14px 20px; gap: 20px }
.hero-note { font-size: 13px!important; color: #7b8b80!important; margin: 0!important }
.hero-visual { background: linear-gradient(145deg,#e1ebdf,#d2e4d0); border: 1px solid #c6dcc6; border-radius: 22px; padding: 25px; box-shadow: 0 25px 65px #1b573326; transform: rotate(1.5deg); overflow: hidden }
.preview-top { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e2e9df; border-radius: 15px 15px 0 0; padding: 15px 20px; font-size: 13px; font-weight: 750 }
.preview-mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #164637; color: #d1f1ba; font-size: 17px }
.preview-date { margin-left: auto; font-weight: 500; color: #86988a }
.preview-content { display: grid; grid-template-columns: 145px 1fr; background: #fff; border: 1px solid #e2e9df; border-top: 0; border-radius: 0 0 15px 15px; min-height: 355px }
.preview-sidebar { background: #f6f8f3; border-right: 1px solid #e9efe7; padding: 26px 11px; display: grid; align-content: start; gap: 9px }
.preview-sidebar span { font-size: 11px; color: #809083; padding: 10px 9px; border-radius: 7px; white-space: nowrap }
.preview-sidebar .side-active { color: #275942; background: #e3efe2; font-weight: 750 }
.preview-main { padding: 28px 22px }
.preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 24px }
.preview-heading small { display: block; font-size: 9px; letter-spacing: .13em; color: #92a395; font-weight: 750; margin-bottom: 5px }
.preview-heading strong { font-family: Georgia,serif; font-size: 21px; font-weight: 400 }
.preview-badge { background: #ecf5e9; color: #397451; font-size: 10px; border-radius: 20px; padding: 7px 9px; white-space: nowrap }
.preview-booking { display: flex; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid #edf1eb }
.preview-booking time { font-size: 11px; color: #819486; width: 38px }
.preview-line { width: 3px; height: 33px; border-radius: 3px }
.preview-line.green { background: #7cbf82 }.preview-line.orange { background: #eabb79 }.preview-line.blue { background: #9ca8df }
.preview-booking div { display: grid; gap: 3px }.preview-booking strong { font-size: 11px }.preview-booking small { font-size: 10px; color: #9aa99c }
.preview-status { font-size: 9px; color: #4d9a60; margin-left: auto }
.preview-foot { display: flex; align-items: center; gap: 10px; margin-top: 21px; padding: 11px; border-radius: 9px; background: #edf5ed }
.preview-foot>span { font-size: 20px; color: #36704c }.preview-foot div { display: grid; gap: 3px }.preview-foot strong { font-size: 10px }.preview-foot small { font-size: 9px; color: #849985 }
.trust-strip { border-top: 1px solid #e2e9e0; border-bottom: 1px solid #e2e9e0; padding: 26px 0 31px; text-align: center }
.trust-strip>span { font-size: 10px; letter-spacing: .14em; color: #8a9b8d; font-weight: 800 }
.trust-strip>div { display: flex; justify-content: center; gap: 45px; flex-wrap: wrap; margin-top: 21px }
.trust-strip>div span { font-family: Georgia,serif; font-size: 17px; color: #6c8572 }
.marketing-section,.faq-section { padding: 115px 0 105px }
.section-intro { max-width: 660px; margin-bottom: 37px }
.section-intro h2 { font-size: clamp(37px,4.3vw,53px); line-height: 1.12; letter-spacing: -.055em; margin: 0 0 16px }
.section-intro>p:last-child { font-size: 17px; line-height: 1.65; color: #728478; margin: 0 }
.feature-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px }
.feature-card { background: #fff; border: 1px solid #e2eae0; border-radius: 17px; padding: 26px 23px; min-height: 252px; box-shadow: 0 12px 35px #1d492508 }
.feature-icon { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 12px; background: #e8f1e5; color: #347651; font-size: 26px; margin-bottom: 31px }
.feature-card h3 { font-size: 18px; line-height: 1.25; letter-spacing: -.02em; margin: 0 0 10px }
.feature-card p { font-size: 14px; color: #718377; line-height: 1.55; margin: 0 }
.how-section { background: #e9f1e7; border-radius: 22px; padding: 67px 60px 62px; margin: 0 0 12px }
.how-section .section-intro { margin-bottom: 38px }.how-section .section-intro h2 { max-width: 600px }
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px }
.steps article { border-top: 1px solid #b9d1bb; padding-top: 22px }
.steps span { font-family: Georgia,serif; font-size: 32px; color: #57a16b }.steps h3 { font-size: 18px; margin: 20px 0 7px }
.steps p { font-size: 14px; line-height: 1.55; color: #667e6b; max-width: 245px; margin: 0 }
.text-link { display: inline-flex; gap: 18px; margin-top: 36px; font-size: 14px; font-weight: 800; text-decoration: none; border-bottom: 1px solid #4f8860; padding-bottom: 5px }
.pricing-section { padding-bottom: 72px }.pricing-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px }
.price-card { border: 1px solid #dce8d9; border-radius: 18px; background: #fff; padding: 29px; display: flex; flex-direction: column; box-shadow: 0 12px 35px #1d492508 }
.price-card.featured { border-color: #8bb795; background: #f2f8f0 }
.plan-label { font-size: 11px; letter-spacing: .15em; font-weight: 800; color: #569068 }.price-top { min-height: 213px }
.price-top h3 { font-family: Georgia,serif; font-weight: 400; font-size: 34px; margin: 17px 0 8px }
.price-top>p { font-size: 14px; color: #718476; line-height: 1.5; margin: 0 0 20px }
.price-value { font-size: 40px; font-weight: 800; letter-spacing: -.05em; color: #163e30 }.price-value span { font-size: 14px; color: #809384; font-weight: 500; letter-spacing: 0 }
.price-value.consult { font-size: 27px; letter-spacing: -.04em; margin-top: 27px }
.price-card .link-button { justify-content: space-between; width: 100%; font-size: 14px }
.price-card ul { list-style: none; padding: 0; margin: 25px 0 0; display: grid; gap: 13px }.price-card li { font-size: 14px; color: #4f6557 }
.price-card li::before { content: '✓'; color: #3e9460; font-weight: 900; margin-right: 12px }
.coming-soon { display: inline-block; vertical-align: middle; font-family: Inter,system-ui,sans-serif; font-size: 10px; font-weight: 700; color: #397753; background: #dceede; padding: 6px 8px; border-radius: 20px; letter-spacing: 0 }
.pricing-disclaimer { font-size: 13px; color: #7b8e7d; margin: 18px 2px 0 }
.faq-section { padding-top: 55px }.faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 15px }
.faq-list details { background: #fff; border: 1px solid #e2eae0; border-radius: 12px; padding: 0 18px }
.faq-list summary { cursor: pointer; list-style: none; font-size: 15px; font-weight: 700; padding: 21px 28px 21px 0; position: relative }
.faq-list summary::-webkit-details-marker { display: none }.faq-list summary::after { content: '+'; position: absolute; right: 0; top: 18px; font-size: 23px; font-weight: 400; color: #699276 }
.faq-list details[open] summary::after { content: '−' }.faq-list p { font-size: 14px; line-height: 1.6; color: #6f8374; margin: 0 0 20px }
.final-cta { background: #164637; color: #fff; border-radius: 22px; padding: 55px 60px; display: flex; align-items: center; justify-content: space-between; gap: 35px; margin: 5px 0 85px }
.final-cta .eyebrow { color: #acd7a4 }.final-cta h2 { font-size: clamp(34px,3.8vw,47px); max-width: 550px; margin: 0 0 12px }.final-cta p:last-child { color: #b4d1bc; margin: 0 }
.cta-white { background: #fff; color: #164637; text-decoration: none; border-radius: 10px; padding: 16px 21px; font-weight: 800; white-space: nowrap; display: inline-flex; gap: 21px }
.trap { position: absolute!important; left: -10000px!important; width: 1px; height: 1px; overflow: hidden }
footer { max-width: 1240px }.footer-inner { display: flex; align-items: center; gap: 25px; flex-wrap: wrap; padding: 14px 0 25px }.footer-inner .brand { font-size: 18px }
.footer-inner>span { font-size: 13px; color: #869687 }.footer-inner nav { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap }
.footer-inner nav a { font-size: 13px; color: #687c6d; text-decoration: none }footer>small { display: block; border-top: 1px solid #e5ebe3; padding-top: 19px; color: #9aaa9c }
@media(max-width:1100px) {
  .topbar #marketing-nav { gap: 15px }.marketing .hero { grid-template-columns: 1fr 1fr; gap: 25px }.hero-visual { padding: 15px }
  .preview-content { grid-template-columns: 105px 1fr }.preview-sidebar { padding: 18px 6px }.preview-sidebar span { font-size: 9px }
  .feature-grid { grid-template-columns: repeat(2,1fr) }.feature-card { min-height: 210px }.feature-icon { margin-bottom: 20px }
}
@media(max-width:790px) {
  .topbar { height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding-top: 16px; padding-bottom: 15px }
  .topbar #marketing-nav { order: 3; justify-content: flex-start; width: 100%; overflow-x: auto; white-space: nowrap }.top-actions { margin-left: auto }
  .marketing .hero { grid-template-columns: 1fr; padding: 65px 0 70px }.marketing .hero h1 { font-size: 64px }.hero-visual { max-width: 590px }
  .trust-strip>div { gap: 16px 28px }.how-section { padding: 42px 30px }.steps { gap: 15px }
  .final-cta { padding: 40px; flex-direction: column; align-items: flex-start }.faq-list { grid-template-columns: 1fr }
}
@media(max-width:550px) {
  .topbar { gap: 10px }.top-actions { gap: 10px }.top-actions .primary { padding: 8px 11px; min-height: 36px }
  .topbar #marketing-nav { gap: 19px }.topbar #marketing-nav a { font-size: 12px }
  .marketing .hero { padding: 53px 0 54px; gap: 33px }.marketing .hero h1 { font-size: 54px }.marketing .hero-lead { font-size: 16px }
  .marketing .hero .actions { flex-direction: column; align-items: stretch }.marketing .hero .actions .link-button { justify-content: space-between }
  .hero-visual { padding: 9px; border-radius: 14px }.preview-content { grid-template-columns: 1fr }.preview-sidebar { display: none }.preview-main { padding: 20px 13px }
  .preview-heading strong { font-size: 18px }.preview-badge { display: none }.preview-booking { gap: 6px }.preview-booking strong { font-size: 10px }.preview-status { font-size: 8px }.preview-top { padding: 11px 13px }
  .trust-strip>div span { font-size: 15px }.marketing-section,.faq-section { padding: 78px 0 }.section-intro h2 { font-size: 39px }
  .feature-grid,.steps,.pricing-grid { grid-template-columns: 1fr }.feature-card { min-height: auto }.how-section { padding: 38px 24px }.steps { gap: 25px }.steps article { padding-top: 12px }.steps h3 { margin-top: 9px }
  .price-top { min-height: 180px }.faq-section { padding-top: 25px }.final-cta { padding: 35px 27px; margin-bottom: 55px }.final-cta h2 { font-size: 36px }.footer-inner nav { margin-left: 0 }
}
@media(max-width:390px) {
  .marketing .hero h1 { font-size: clamp(40px, 12vw, 50px) }
  .preview-booking { min-width: 0 }
  .preview-booking div { min-width: 0 }
  .preview-booking strong,.preview-booking small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .preview-status { display: none }
  .section-intro h2 { font-size: 34px }
  .final-cta h2 { font-size: 32px }
  .price-card { padding: 22px }
}
@media(max-width:790px) {
  .topbar #marketing-nav { flex: 0 0 100%; width: 100% }
  .topbar #marketing-nav .mobile-only { display: none }
}
@media(max-width:550px) {
  .topbar #marketing-nav .mobile-only { display: block }
  .topbar .top-actions { display: none }
}
.topbar.app-header #marketing-nav,.topbar.app-header .top-actions,.topbar.app-header .menu-toggle { display: none!important }