/* ===== Brand design system for public pages: landing, features, pricing, login, sign-up =====
   Brand colours: teal-green #10a37f (primary), deep navy #0b1220, blue #1d4ed8 (accent). Replace assets/logo-mark.svg to change the logo. */
:root { --b: #10a37f; --b-dark: #0d8c6d; --navy: #0b1220; --navy2: #14305a; --blue: #1d4ed8; --ink: #0f172a; --mut: #64748b; --line: #e2e8f0; --soft: #f8fafc; --r: 16px; }
* { box-sizing: border-box; }
body.mk { margin: 0; font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: var(--ink); background: #fff; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.mk a { color: var(--blue); }
.mk-wrap { max-width: 1160px; margin: 0 auto; padding: 0 22px; }
.mk-nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.mk-nav .mk-wrap { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 16px; }
.mk-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; color: var(--ink) !important; text-decoration: none; letter-spacing: -.3px; }
.mk-brand img { width: 34px; height: 34px; }
.mk-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.mk-links a { color: #334155; text-decoration: none; font-weight: 600; font-size: 14px; padding: 8px 12px; border-radius: 8px; } .mk-links a:hover { background: var(--soft); }
.mk-btn, a.mk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--b); color: #fff !important; border: 0; border-radius: 12px; padding: 13px 22px; font-weight: 700; font-size: 15px; cursor: pointer; text-decoration: none; font-family: inherit; transition: transform .12s, background .12s, box-shadow .12s; }
.mk-btn:hover { background: var(--b-dark); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(16,163,127,.28); }
.mk-btn.dark { background: var(--navy); } .mk-btn.dark:hover { background: #1e293b; box-shadow: 0 8px 20px rgba(15,23,42,.25); }
.mk-btn.ghost, a.mk-btn.ghost { background: transparent; color: var(--ink) !important; border: 1.5px solid var(--line); } .mk-btn.ghost:hover { background: var(--soft); box-shadow: none; }
.mk-btn.sm { padding: 9px 16px; font-size: 14px; border-radius: 10px; } .mk-btn.block { width: 100%; }

.mk-hero { background: radial-gradient(900px 420px at 85% -10%, rgba(29,78,216,.35), transparent 60%), radial-gradient(700px 380px at 0% 0%, rgba(16,163,127,.28), transparent 55%), linear-gradient(160deg, var(--navy), var(--navy2)); color: #fff; padding: 84px 0 96px; }
.mk-hero .mk-wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.mk-eyebrow { display: inline-block; background: rgba(16,163,127,.18); color: #6ee7c8; border: 1px solid rgba(16,163,127,.4); padding: 5px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; margin-bottom: 18px; }
.mk-hero h1 { font-size: 52px; line-height: 1.08; letter-spacing: -1.5px; margin: 0 0 18px; } .mk-hero h1 em { font-style: normal; background: linear-gradient(90deg, #34d399, #60a5fa); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mk-hero p.lead { font-size: 19px; color: #cbd5e1; margin: 0 0 26px; max-width: 560px; }
.mk-hero-form { display: flex; gap: 10px; background: #fff; border-radius: 14px; padding: 8px; max-width: 560px; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.mk-hero-form input { flex: 1; border: 0; outline: 0; padding: 12px 14px; font-size: 16px; font-family: inherit; min-width: 0; border-radius: 10px; }
.mk-hero-note { margin: 12px 0 0; font-size: 13px; color: #94a3b8; }
.mk-mock { background: #fff; color: var(--ink); border-radius: 20px; padding: 22px; box-shadow: 0 30px 70px rgba(0,0,0,.45); transform: rotate(1.5deg); }
.mk-mock-top { display: flex; align-items: center; gap: 18px; } .mk-mock-ring { position: relative; width: 104px; height: 104px; flex: none; } .mk-mock-ring svg { width: 100%; height: 100%; }
.mk-mock-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; }
.mk-mock-rows { margin-top: 16px; display: grid; gap: 8px; } .mk-mock-row { display: flex; justify-content: space-between; align-items: center; background: var(--soft); border-radius: 10px; padding: 9px 12px; font-size: 13px; }
.mk-tag { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; } .mk-tag.r { background: #fee2e2; color: #991b1b; } .mk-tag.y { background: #fef3c7; color: #92400e; } .mk-tag.g { background: #d1fae5; color: #065f46; }

.mk-section { padding: 84px 0; } .mk-section.alt { background: var(--soft); } .mk-section.dark { background: linear-gradient(160deg, var(--navy), var(--navy2)); color: #fff; }
.mk-h2 { font-size: 36px; line-height: 1.15; letter-spacing: -.8px; margin: 0 0 12px; text-align: center; } .mk-sub { text-align: center; color: var(--mut); font-size: 18px; max-width: 700px; margin: 0 auto 48px; } .dark .mk-sub { color: #cbd5e1; }
.mk-grid { display: grid; gap: 20px; } .mk-grid.c3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .mk-grid.c4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.mk-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 26px; transition: transform .15s, box-shadow .15s, border-color .15s; } .mk-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(15,23,42,.09); border-color: #cbd5e1; }
.mk-ico { width: 48px; height: 48px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 24px; background: linear-gradient(135deg, rgba(16,163,127,.15), rgba(29,78,216,.15)); margin-bottom: 14px; }
.mk-card h3 { margin: 0 0 6px; font-size: 18px; } .mk-card p { margin: 0; color: var(--mut); font-size: 15px; }
.mk-steps { counter-reset: s; } .mk-step { position: relative; padding-top: 6px; } .mk-step::before { counter-increment: s; content: counter(s); display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--b); color: #fff; font-weight: 800; margin-bottom: 12px; }
.mk-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: #fff; } .mk-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 640px; }
.mk-table th, .mk-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: center; } .mk-table th:first-child, .mk-table td:first-child { text-align: left; font-weight: 600; }
.mk-table thead th { background: var(--soft); font-size: 14px; } .mk-table .us { background: rgba(16,163,127,.07); } .mk-yes { color: var(--b); font-weight: 800; } .mk-no { color: #cbd5e1; }
.mk-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; align-items: stretch; }
.mk-plan { position: relative; display: flex; flex-direction: column; background: #fff; border: 1.5px solid var(--line); border-radius: 20px; padding: 28px 24px; } .mk-plan.pop { border-color: var(--b); box-shadow: 0 18px 44px rgba(16,163,127,.18); transform: translateY(-6px); }
.mk-pop { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--b); color: #fff; font-size: 12px; font-weight: 800; padding: 4px 14px; border-radius: 999px; letter-spacing: .5px; }
.mk-plan h3 { margin: 0; font-size: 22px; } .mk-plan .tag { color: var(--mut); font-size: 14px; margin: 4px 0 14px; min-height: 42px; }
.mk-price { font-size: 42px; font-weight: 800; letter-spacing: -1px; line-height: 1; } .mk-price small { font-size: 15px; color: var(--mut); font-weight: 500; } .mk-yearly { font-size: 13px; color: var(--mut); min-height: 20px; margin: 6px 0 16px; }
.mk-plan ul { list-style: none; margin: 18px 0 22px; padding: 0; flex: 1; } .mk-plan li { padding: 6px 0 6px 26px; position: relative; font-size: 14.5px; } .mk-plan li::before { content: '✓'; position: absolute; left: 0; color: var(--b); font-weight: 800; }
.mk-faq details { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; margin-bottom: 10px; } .mk-faq summary { cursor: pointer; font-weight: 700; font-size: 16px; } .mk-faq p { margin: 10px 0 0; color: #475569; }
.mk-cta { text-align: center; } .mk-cta h2 { font-size: 38px; margin: 0 0 12px; letter-spacing: -.8px; } .mk-cta p { color: #cbd5e1; font-size: 18px; margin: 0 auto 26px; max-width: 620px; }
.mk-foot { background: var(--navy); color: #94a3b8; padding: 54px 0 28px; font-size: 14px; } .mk-foot .cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 30px; } .mk-foot h4 { color: #fff; margin: 0 0 12px; font-size: 14px; }
.mk-foot a { color: #94a3b8; text-decoration: none; display: block; padding: 3px 0; } .mk-foot a:hover { color: #fff; } .mk-foot .mk-brand { color: #fff !important; margin-bottom: 10px; } .mk-foot .copy { border-top: 1px solid #1e293b; padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* auth pages */
.mk-auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; } .mk-auth-side { background: radial-gradient(700px 400px at 100% 0%, rgba(29,78,216,.4), transparent 60%), linear-gradient(160deg, var(--navy), var(--navy2)); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: center; }
.mk-auth-side h2 { font-size: 34px; line-height: 1.15; letter-spacing: -.8px; margin: 26px 0 14px; } .mk-auth-side li { padding: 7px 0; color: #cbd5e1; list-style: none; } .mk-auth-side li::before { content: '✓ '; color: #34d399; font-weight: 800; } .mk-auth-side ul { padding: 0; margin: 0; }
.mk-auth-main { display: flex; align-items: center; justify-content: center; padding: 40px 22px; } .mk-auth-box { width: 100%; max-width: 480px; } .mk-auth-box h1 { margin: 0 0 6px; font-size: 30px; letter-spacing: -.6px; } .mk-auth-box .sub { color: var(--mut); margin: 0 0 22px; }
.mk-field { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 700; color: #334155; } .mk-field input, .mk-field select { display: block; width: 100%; margin-top: 5px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 11px; font-size: 15px; font-family: inherit; background: #fff; font-weight: 400; color: var(--ink); }
.mk-field input:focus, .mk-field select:focus { outline: none; border-color: var(--b); box-shadow: 0 0 0 4px rgba(16,163,127,.14); } .mk-field .hint { font-weight: 400; color: var(--mut); font-size: 12px; }
.mk-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .mk-pw { position: relative; } .mk-pw button { position: absolute; right: 8px; top: 31px; background: none; border: 0; cursor: pointer; font-size: 13px; color: var(--mut); font-weight: 700; }
.mk-meter { height: 6px; background: #e5e7eb; border-radius: 999px; overflow: hidden; margin: -6px 0 4px; } .mk-meter i { display: block; height: 100%; width: 0; transition: width .2s, background .2s; } .mk-meter-t { font-size: 12px; color: var(--mut); margin-bottom: 12px; min-height: 18px; }
.mk-auth .mk-check { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: #475569; margin: 8px 0; font-weight: 400; } .mk-auth .mk-check input { width: auto; margin-top: 3px; }
.mk-alert { border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; font-size: 14px; } .mk-alert.err { background: #fee2e2; color: #991b1b; } .mk-alert.ok { background: #d1fae5; color: #065f46; } .mk-alert.info { background: #dbeafe; color: #1e40af; }
.mk-auth .mk-section-title { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--mut); margin: 20px 0 10px; font-weight: 800; }
@media (max-width: 900px) { .mk-hero .mk-wrap, .mk-auth, .mk-foot .cols { grid-template-columns: 1fr; } .mk-hero h1 { font-size: 38px; } .mk-mock { transform: none; } .mk-auth-side { display: none; } .mk-plan.pop { transform: none; } .mk-h2 { font-size: 28px; } .mk-row2 { grid-template-columns: 1fr; } }