* { box-sizing:border-box; } button { cursor:pointer; } button:focus-visible,a:focus-visible { outline:2px solid var(--primary); outline-offset:4px; } svg { width:16px; height:16px; }
:root {
  --background: oklch(1 0 0); --foreground: oklch(.23 .018 263); --card: oklch(1 0 0); --card-foreground: var(--foreground);
  --popover: var(--background); --popover-foreground: var(--foreground); --primary: oklch(.55 .215 262); --primary-foreground: oklch(1 0 0);
  --secondary: oklch(.97 .009 260); --secondary-foreground: var(--foreground); --muted: oklch(.975 .004 260); --muted-foreground: oklch(.53 .018 260);
  --accent: oklch(.95 .025 260); --accent-foreground: var(--primary); --border: oklch(.92 .007 260); --input: var(--border); --ring: var(--primary);
  --destructive: oklch(.58 .2 25); --destructive-foreground: var(--background); --overlay: oklch(.2 .02 260 / .45);
  --success: oklch(.48 .12 158); --success-soft: oklch(.96 .027 155); --blue-soft: oklch(.96 .018 260); --blue-border: oklch(.89 .045 260);
  --violet-soft: oklch(.95 .024 300); --violet-ink: oklch(.55 .12 300); --cta: oklch(.97 .015 260);
  --shadow-product: 0 20px 60px oklch(.3 .03 260 / .07), 0 2px 8px oklch(.3 .03 260 / .03);
  --shadow-float: 0 8px 28px oklch(.3 .03 260 / .09); --radius: .5rem; --font-sans: 'DM Sans', sans-serif;
}
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; font-family:var(--font-sans); -webkit-font-smoothing:antialiased; letter-spacing:0; }
button,input { font:inherit; } a { color:inherit; text-decoration:none; } button,a,input { -webkit-tap-highlight-color:transparent; }
.monit-page { overflow:hidden; } .container { width:min(1120px,calc(100% - 64px)); margin-inline:auto; }
.site-header { height:84px; position:sticky; top:0; z-index:30; background:color-mix(in oklab,var(--background) 94%,transparent); backdrop-filter:blur(15px); border-bottom:1px solid var(--border); }
.header-inner { height:100%; display:flex; align-items:center; justify-content:space-between; }
.wordmark { font-size:31px; font-weight:800; display:inline-flex; align-items:center; line-height:1; gap:2px; }
.wordmark-dot { width:7px; height:7px; border-radius:50%; background:var(--primary); align-self:flex-end; margin-bottom:4px; }
.desktop-nav { display:flex; align-items:center; gap:33px; font-size:13px; font-weight:550; }
.nav-anchor:hover,.footer-links a:hover { color:var(--primary); } .nav-divider { width:1px; height:20px; background:var(--border); margin-left:1px; }
.monit-button { border-radius:7px; height:44px; font-size:13px; font-weight:650; padding:0 21px; display:inline-flex; align-items:center; justify-content:center; gap:10px; border:1px solid transparent; transition:background .2s,transform .2s,box-shadow .2s; }
.monit-button:hover { transform:translateY(-2px); } .monit-button-primary { background:var(--primary); color:var(--primary-foreground); box-shadow:0 3px 8px color-mix(in oklab,var(--primary) 15%,transparent); }
.monit-button-primary:hover { background:color-mix(in oklab,var(--primary) 92%,var(--foreground)); }
.monit-button-outline { background:var(--background); border-color:var(--border); color:var(--foreground); }
.monit-button-outline:hover { background:var(--muted); } .monit-button-ghost { background:transparent; color:var(--foreground); box-shadow:none; padding-inline:4px; }
.menu-toggle { display:none; } .mobile-nav { display:none; }
.hero { padding:65px 0 0; text-align:center; position:relative; }
.eyebrow { display:inline-flex; gap:8px; align-items:center; color:var(--primary); background:var(--blue-soft); border:1px solid var(--blue-border); border-radius:30px; font-size:11px; font-weight:600; padding:7px 12px; }
.eyebrow svg { width:13px; height:13px; }
.hero h1 { font-size:58px; line-height:1.13; font-weight:750; margin:22px auto 19px; max-width:850px; letter-spacing:0; }
.hero h1 span { color:var(--primary); } .hero-description { color:var(--muted-foreground); max-width:615px; font-size:16px; line-height:1.75; margin:0 auto; }
.hero-actions { display:flex; justify-content:center; gap:12px; margin:27px 0 17px; } .hero-actions .monit-button { height:47px; padding-inline:23px; }
.hero-reassurance { display:flex; justify-content:center; gap:22px; font-size:11px; color:var(--muted-foreground); } .hero-reassurance span { display:flex; align-items:center; gap:6px; } .hero-reassurance svg { width:12px; height:12px; }
.product-scene { position:relative; max-width:860px; margin:44px auto 0; padding:0 33px; text-align:left; }
.dashboard { border:1px solid var(--border); border-radius:11px; background:var(--background); box-shadow:var(--shadow-product); overflow:hidden; }
.dashboard-top { height:52px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 22px; }
.dashboard-top .wordmark { font-size:23px; } .dashboard-top .wordmark-dot { width:5px; height:5px; margin-bottom:2px; }
.dashboard-top-right { display:flex; align-items:center; gap:14px; color:var(--muted-foreground); } .dashboard-top-right svg { width:15px; height:15px; }
.account-avatar { width:26px; height:26px; display:grid; place-items:center; background:var(--blue-soft); color:var(--primary); border-radius:50%; font-size:9px; font-weight:700; }
.dashboard-body { display:grid; grid-template-columns:145px 1fr; min-height:286px; }
.dashboard-sidebar { border-right:1px solid var(--border); padding:20px 12px; background:var(--muted); }
.dashboard-sidebar-item { display:flex; align-items:center; gap:8px; color:var(--muted-foreground); font-size:10px; padding:9px 10px; margin-bottom:5px; border-radius:5px; }
.dashboard-sidebar-item.active { background:var(--accent); color:var(--primary); font-weight:600; } .dashboard-sidebar-item svg { width:13px; height:13px; }
.dashboard-main { padding:21px; } .dashboard-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:17px; }
.dashboard-heading h3 { margin:0; font-size:14px; font-weight:650; } .dashboard-heading p { margin:4px 0 0; color:var(--muted-foreground); font-size:9px; }
.demo-link { background:var(--primary); color:var(--primary-foreground); font-size:9px; display:flex; gap:5px; align-items:center; border-radius:4px; padding:7px 9px; } .demo-link svg { width:10px; height:10px; }
.dashboard-content { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .location-list { display:flex; flex-direction:column; gap:10px; }
.location-row { padding:12px; border:1px solid var(--border); border-radius:6px; display:flex; align-items:center; gap:9px; }
.person-avatar { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:10px; font-weight:650; background:var(--blue-soft); color:var(--primary); flex-shrink:0; }
.person-avatar.maria { background:var(--violet-soft); color:var(--violet-ink); } .person-info { flex:1; } .person-name { display:block; font-size:11px; font-weight:650; }
.person-status { font-size:8px; color:var(--success); display:flex; align-items:center; gap:3px; margin-top:4px; } .person-status svg { width:9px; height:9px; }
.person-time { display:block; font-size:8px; color:var(--muted-foreground); margin-top:4px; } .row-check { width:14px; height:14px; color:var(--success); }
.map-preview { position:relative; border-radius:6px; min-height:174px; overflow:hidden; border:1px solid var(--border); }
.map-preview>img { position:absolute; inset:0; height:100%; width:100%; object-fit:cover; }
.map-pin { position:absolute; top:43%; left:51%; width:31px; height:38px; color:var(--primary); filter:drop-shadow(0 3px 3px color-mix(in oklab,var(--primary) 20%,transparent)); }
.map-pin svg { width:100%; height:100%; fill:var(--primary); stroke:var(--primary-foreground); stroke-width:1.4; }
.map-caption { position:absolute; bottom:9px; left:9px; background:var(--background); border-radius:4px; padding:6px 8px; display:flex; align-items:center; gap:5px; font-size:8px; } .map-caption svg { width:10px; height:10px; color:var(--success); }
.consent-toast { position:absolute; right:-19px; bottom:49px; background:var(--background); border:1px solid var(--border); box-shadow:var(--shadow-float); border-radius:8px; padding:13px 17px; display:flex; gap:10px; align-items:center; }
.toast-icon { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:var(--success-soft); color:var(--success); } .toast-icon svg { width:17px; height:17px; }
.consent-toast strong { display:block; font-size:10px; font-weight:650; } .consent-toast p { font-size:9px; color:var(--muted-foreground); margin:4px 0 0; }
.demo-caption { margin:13px 0 0; font-size:9px; text-align:center; color:var(--muted-foreground); }
.trust-strip { border-bottom:1px solid var(--border); padding:31px 0 32px; display:flex; align-items:center; justify-content:center; gap:39px; color:var(--muted-foreground); font-size:11px; }
.trust-strip span { display:flex; gap:8px; align-items:center; } .trust-strip svg { width:15px; height:15px; }
.how-section { padding:71px 0 70px; } .section-label { color:var(--primary); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.7px; margin:0 0 12px; }
.section-heading { text-align:center; } .section-heading h2 { font-size:32px; line-height:1.2; font-weight:700; margin:0 0 13px; } .section-heading>p:last-child { font-size:14px; color:var(--muted-foreground); margin:0; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:53px; margin-top:41px; position:relative; }
.step { position:relative; text-align:center; } .step-icon { width:53px; height:53px; background:var(--blue-soft); border:1px solid var(--blue-border); border-radius:10px; display:grid; place-items:center; color:var(--primary); margin:0 auto 19px; position:relative; }
.step-icon>svg { width:23px; height:23px; } .step-number { position:absolute; top:-7px; right:-7px; background:var(--background); color:var(--muted-foreground); border:1px solid var(--border); width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:9px; }
.step h3 { font-size:15px; font-weight:650; margin:0 0 9px; } .step p { font-size:12px; line-height:1.8; color:var(--muted-foreground); max-width:265px; margin:0 auto; } .step-connector { position:absolute; top:23px; right:-35px; color:var(--border); width:20px; height:20px; }
.privacy-section { background:var(--muted); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:62px 0; }
.privacy-inner { display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; } .privacy-icon { width:44px; height:44px; border-radius:9px; background:var(--background); border:1px solid var(--border); display:grid; place-items:center; color:var(--primary); margin-bottom:18px; } .privacy-icon svg { width:23px; height:23px; }
.privacy-copy h2 { font-size:32px; font-weight:700; line-height:1.2; margin:0 0 15px; } .privacy-copy>p { font-size:13px; color:var(--muted-foreground); line-height:1.85; max-width:390px; margin:0 0 20px; }
.privacy-badge { color:var(--success); background:var(--success-soft); display:inline-flex; align-items:center; gap:6px; border-radius:5px; padding:7px 10px; font-size:10px; font-weight:600; } .privacy-badge svg { width:12px; height:12px; }
.privacy-list { display:flex; flex-direction:column; gap:18px; margin:0; padding:0; list-style:none; } .privacy-list li { display:flex; align-items:flex-start; gap:11px; font-size:12px; line-height:1.6; color:var(--muted-foreground); } .privacy-list svg { color:var(--primary); flex-shrink:0; width:16px; height:16px; margin-top:2px; } .privacy-list strong { color:var(--foreground); font-weight:550; }
.cta-section { text-align:center; padding:66px 0 62px; background:var(--background); } .cta-section h2 { font-size:32px; margin:0 0 12px; font-weight:700; } .cta-section>p { font-size:13px; margin:0 0 24px; color:var(--muted-foreground); } .cta-section .monit-button { height:46px; } .cta-note { display:block; font-size:10px; color:var(--muted-foreground); margin-top:12px; }
.site-footer { border-top:1px solid var(--border); padding:31px 0 24px; } .footer-top { display:flex; justify-content:space-between; align-items:center; } .footer-top .wordmark { font-size:27px; } .footer-links { display:flex; gap:25px; font-size:11px; color:var(--muted-foreground); } .footer-bottom { border-top:1px solid var(--border); margin-top:25px; padding-top:20px; display:flex; justify-content:space-between; font-size:10px; color:var(--muted-foreground); } .footer-bottom span:last-child { display:flex; gap:5px; align-items:center; } .footer-bottom svg { width:11px; height:11px; }
.account-dialog { border-radius:12px; width:calc(100% - 32px); padding:30px; max-width:430px; max-height:calc(100dvh - 32px); overflow-y:auto; } .account-dialog .wordmark { margin-bottom:7px; font-size:28px; } .account-dialog h2 { font-size:24px; font-weight:700; margin-top:6px; line-height:1.3; letter-spacing:0; }
.account-form { display:flex; flex-direction:column; gap:14px; margin-top:6px; } .field-label { display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:550; } .field-label input { width:100%; height:43px; border:1px solid var(--input); background:var(--background); color:var(--foreground); border-radius:6px; padding:0 12px; font-size:13px; outline:none; } .field-label input:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--blue-soft); }
.password-field { position:relative; } .password-field input { padding-right:42px; } .password-toggle { position:absolute; right:9px; top:4px; width:34px; height:34px; padding:0; } .password-toggle svg { width:16px; height:16px; }
.terms-check { display:flex; align-items:flex-start; gap:9px; color:var(--muted-foreground); font-size:11px; line-height:1.6; } .terms-check input { accent-color:var(--primary); margin-top:3px; } .terms-check a { color:var(--primary); text-decoration:underline; } .forgot-link { align-self:flex-end; color:var(--primary); font-size:11px; padding:0; height:auto; }
.form-note { font-size:11px; line-height:1.7; margin:0; padding:10px 12px; border-radius:6px; background:var(--blue-soft); color:var(--muted-foreground); } .form-switch { display:flex; align-items:center; justify-content:center; gap:5px; font-size:12px; color:var(--muted-foreground); } .form-switch .monit-button { font-size:12px; color:var(--primary); height:auto; }
.legal-content { font-size:13px; line-height:1.8; color:var(--muted-foreground); } .legal-content h3 { color:var(--foreground); font-size:14px; margin-top:18px; }
.reveal { animation:arrive .65s ease-out both; } .product-scene.reveal { animation-delay:.15s; } @keyframes arrive { from { opacity:0; transform:translateY(15px); } to { opacity:1; transform:translateY(0); } }
@media(min-width:1500px) { .hero { padding-top:78px; } }
@media(max-width:900px) { .container { width:calc(100% - 48px); } .desktop-nav { gap:20px; } .hero h1 { font-size:49px; } .consent-toast { right:-4px; } .privacy-inner { gap:45px; } }
@media(max-width:640px) {
 .container { width:calc(100% - 40px); } .site-header { height:70px; } .wordmark { font-size:28px; } .desktop-nav { display:none; } .menu-toggle { display:inline-flex; height:38px; width:38px; padding:0; } .menu-toggle svg { width:22px; height:22px; }
 .mobile-nav { display:flex; flex-direction:column; gap:8px; position:absolute; top:70px; left:0; right:0; background:var(--background); border-bottom:1px solid var(--border); padding:18px 20px 22px; box-shadow:var(--shadow-float); } .mobile-nav>a { padding:10px 2px; font-size:14px; } .mobile-nav .monit-button { width:100%; }
 .hero { padding-top:40px; } .eyebrow { font-size:10px; padding:7px 10px; } .hero h1 { font-size:38px; line-height:1.14; margin:21px 0 17px; } .hero-description { font-size:14px; line-height:1.75; } .hero-actions { gap:9px; margin-top:24px; } .hero-actions .monit-button { padding-inline:16px; font-size:12px; height:45px; } .hero-reassurance { gap:14px; font-size:9px; }
 .product-scene { padding:0; margin-top:34px; } .dashboard { border-radius:8px; } .dashboard-top { height:42px; padding:0 13px; } .dashboard-top .wordmark { font-size:21px; } .dashboard-body { grid-template-columns:1fr; min-height:0; } .dashboard-sidebar { display:none; } .dashboard-main { padding:15px; } .dashboard-heading { margin-bottom:12px; } .dashboard-heading h3 { font-size:12px; } .dashboard-heading p { font-size:8px; } .dashboard-content { gap:9px; grid-template-columns:1.05fr 1fr; } .location-row { padding:10px 7px; gap:6px; } .person-avatar { width:24px; height:24px; font-size:9px; } .person-name { font-size:10px; } .person-status { font-size:7px; } .person-time { font-size:7px; } .row-check { display:none; } .map-preview { min-height:147px; } .map-caption { font-size:6px; padding:5px; bottom:6px; left:5px; } .consent-toast { right:-8px; bottom:9px; padding:10px 12px; gap:8px; } .consent-toast strong { font-size:9px; } .consent-toast p { font-size:8px; } .toast-icon { width:27px; height:27px; } .demo-caption { margin-top:22px; font-size:8px; }
 .trust-strip { flex-wrap:wrap; gap:14px 20px; padding:26px 0; font-size:9px; } .trust-strip svg { width:13px; height:13px; }
 .how-section { padding:48px 0; } .section-heading h2 { font-size:28px; } .section-heading>p:last-child { font-size:12px; } .steps { grid-template-columns:1fr; gap:30px; margin-top:30px; } .step { text-align:left; display:grid; grid-template-columns:52px 1fr; gap:16px; align-items:start; } .step-icon { margin:0; width:46px; height:46px; } .step h3 { margin-top:2px; font-size:14px; } .step p { margin:0; max-width:none; font-size:12px; } .step-connector { display:none; }
 .privacy-section { padding:40px 0; } .privacy-inner { grid-template-columns:1fr; gap:28px; } .privacy-copy h2 { font-size:28px; } .privacy-copy>p { font-size:13px; } .privacy-list { gap:17px; } .privacy-list li { font-size:12px; }
 .cta-section { padding:47px 20px; } .cta-section h2 { font-size:28px; } .cta-section>p { max-width:270px; line-height:1.7; margin-inline:auto; font-size:12px; }
 .footer-top { flex-direction:column; align-items:flex-start; gap:22px; } .footer-links { flex-wrap:wrap; gap:15px 20px; font-size:10px; } .footer-bottom { flex-direction:column; gap:12px; font-size:9px; } .account-dialog { padding:25px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }
body { background:var(--background); color:var(--foreground); }
dialog.account-dialog { border:1px solid var(--border); color:var(--foreground); background:var(--background); box-shadow:var(--shadow-product); margin:auto; position:fixed; }
dialog::backdrop { background:var(--overlay); backdrop-filter:blur(3px); }
.native-close { position:absolute; right:14px; top:12px; font-size:25px; width:28px; height:28px; }
#modal-description { color:var(--muted-foreground); font-size:13px; line-height:1.6; }
body:has(dialog[open]) { overflow:hidden; }