/* Public welcome page, aligned with the in-app visual system. */
.marketing-body { background: #f5f7f6; color: var(--ink); }
.marketing-header { height: 100px; border-bottom: 1px solid #dbe7e3; }
.marketing-brand img { width: 220px; height: auto; display: block; }
.header-login, .header-signup { border-radius: 10px; color: var(--ink); box-shadow: none; }
.header-login { border-color: #cfdedb; }
.header-login:hover { background: #e6f3f3; }
.header-signup, .header-signup:hover { background: var(--brand); color: #102f34; }
.hero { background: #eff6f3; color: var(--ink); min-height: 820px; gap: 56px; padding-top: 154px; padding-bottom: 80px; }
.hero::before { opacity: .5; background: radial-gradient(ellipse at 85% 45%, #c5e5df, transparent 55%); mask-image: none; }
.eyebrow { color: var(--brand-dark); font-size: 10px; letter-spacing: .14em; line-height: 1.5; }
.hero h1 { font-size: clamp(54px, 5.5vw, 79px); line-height: 1.04; letter-spacing: -.065em; }
.hero h1 em { font-family: var(--display-font); font-style: normal; font-weight: 700; color: #226b74; }
.hero-lede { color: #536e73; max-width: 510px; font-size: 18px; line-height: 1.65; margin-top: 24px; }
.hero-actions { margin-top: 26px; }
.waitlist-form label { font-size: 12px; font-weight: 700; }
.waitlist-fields { background: #fff; border: 1px solid #cddfda; box-shadow: 0 8px 24px rgba(25,52,58,.04); border-radius: 13px; }
.waitlist-fields input { color: var(--ink); height: 46px; }
.waitlist-fields input::placeholder { color: #74898a; }
.waitlist-fields input:focus { box-shadow: inset 0 0 0 2px var(--brand); }
.waitlist-fields button { height: 46px; border-radius: 8px; background: var(--brand); color: #102f34; box-shadow: none; font-size: 13px; font-weight: 750; }
.waitlist-fields button:hover { background: var(--brand-dark); color: #fff; }
.form-note { color: #63777b; font-size: 11px; }
.form-error { color: #a73931; }
.account-link { color: #63777b; font-size: 12px; line-height: 1.6; }
.account-link a { color: var(--brand-dark); font-weight: 650; }
.signup-success { background: #fff; border-color: #cadfd9; }
.signup-success small { color: #63777b; }
.signup-success > span { background: #d9eee7; color: #226b74; }
.hero-proof { margin-top: 30px; }
.hero-proof div { border-left: 2px solid #badbd5; }
.hero-proof strong { color: var(--ink); font-size: 22px; }
.hero-proof span { color: #63777b; font-size: 10px; }
.product-glow { width: 470px; height: 470px; border: 1px solid #b7d9d3; background: transparent; filter: none; }
.product-glow::before, .product-glow::after { content: ""; position: absolute; border: 1px solid #cce1dc; border-radius: 50%; inset: -38px; }
.product-glow::after { inset: -78px; border-style: dashed; }
.phone-frame { background: #fff; padding: 8px; border: 1px solid #b6cdc8; border-radius: 36px; box-shadow: 0 32px 64px rgba(25,52,58,.18); transform: rotate(3deg); }
.phone-top { background: var(--brand); border-radius: 28px 28px 0 0; padding-inline: 13px; height: 47px; }
.phone-top img { width: 147px; height: auto; }
.phone-top b { color: #163b41; font-family: var(--display-font); font-size: 11px; }
.mock-map { border-radius: 0 0 12px 12px; }
.phone-nav { grid-template-columns: repeat(5,1fr); color: #63777b; height: 49px; }
.phone-nav .active { color: #226b74; }
.map-card button { background: var(--brand); color: #102f34; }
.floating-tag { background: #fff; color: var(--ink); border-color: #d5e4df; box-shadow: 0 10px 28px rgba(25,52,58,.1); padding: 14px 16px; }
.floating-tag span { color: #63777b; font-size: 10px; gap: 3px; }
.floating-tag strong { color: var(--ink); font-size: 12px; }
.tag-spotted { left: -12px; top: 100px; }
.tag-special { bottom: 80px; }
.feature-intro { padding-top: 90px; }
.feature-intro h2, .story-copy h2, .final-cta h2 { font-size: clamp(34px, 4vw, 50px); letter-spacing: -.05em; line-height: 1.1; }
.feature-intro > p:last-child { color: #63777b; font-size: 16px; }
.feature-grid { gap: 20px; margin-bottom: 90px; }
.feature-card { min-height: 330px; border-radius: 18px; box-shadow: none; border-color: #dbe5e1; padding: 28px; }
.feature-card::after { display: none; }
.feature-icon { border-radius: 12px; background: #e6f3f3; color: #226b74; }
.feature-log .feature-icon { background: #f8f0dc; color: #8e651d; }
.feature-number { font-family: var(--display-font); font-size: 34px; color: #c3d7d2; top: 19px; }
.feature-card h3 { margin-top: 38px; font-size: 25px; }
.feature-card > p:last-child { color: #63777b; font-size: 15px; }
.story-section { background: #e5f0eb; gap: 85px; padding-block: 90px; }
.story-window { max-height: 440px; border-radius: 180px 180px 100px 100px; background: #fff; box-shadow: 0 20px 40px rgba(25,52,58,.08); padding: 16px; }
.window-sky { border-radius: inherit; }
.window-sill { display: none; }
.story-copy > p:not(.eyebrow) { color: #536e73; font-size: 16px; }
.final-cta { background: #226b74; box-shadow: none; border-radius: 24px; margin-block: 85px; padding: 48px; }
.final-cta > a { background: #fff; color: #226b74; border-radius: 10px; font-size: 14px; }
.eyebrow.light { color: #c9e6e6; }
.footer-brand img { width: 176px; height: auto; margin-bottom: 7px; }
footer { border-color: #dbe5e1; color: #63777b; }

@media (max-width: 1100px) and (min-width: 901px) {
 .hero { gap: 20px; grid-template-columns: 1.1fr .9fr; }
 .hero h1 { font-size: 61px; }
 .waitlist-fields button { padding-inline: 12px; }
}
@media (max-width: 900px) {
 .hero { min-height: 0; gap: 38px; }
 .hero-copy { max-width: 610px; }
 .hero-product { min-height: 650px; }
 .feature-card { min-height: 270px; }
 .feature-card h3 { margin-top: 30px; }
 .story-section { gap: 50px; }
}
@media (max-width: 560px) {
 .marketing-header { height: 78px; }
 .marketing-brand img { width: 164px; }
 .header-actions { gap: 5px; }
 .header-login, .header-signup { font-size: 11px; min-height: 36px; padding-inline: 11px; }
 .hero { padding: 114px 22px 55px; gap: 28px; }
 .hero h1 { font-size: clamp(43px, 12.5vw, 65px); }
 .hero .eyebrow { font-size: 9px; letter-spacing: .09em; }
 .hero-lede { font-size: 16px; margin-top: 20px; }
 .waitlist-fields { grid-template-columns: 1fr; }
 .hero-product { min-height: 590px; margin-inline: -8px; }
 .phone-frame { width: min(300px, 83vw); }
 .tag-spotted { left: 0; top: 72px; }
 .tag-special { right: 0; bottom: 70px; }
 .floating-tag { padding: 11px 12px; }
 .feature-intro { padding-top: 65px; }
 .feature-grid { margin-bottom: 65px; gap: 14px; }
 .story-section { padding: 65px 24px; }
 .final-cta { margin-block: 65px; padding: 32px 24px; }
}
@media (max-width: 359px) {
 .marketing-brand img { width: 140px; }
 .header-login, .header-signup { padding-inline: 8px; }
}