:root { --navy:#102a43; --navy2:#173b59; --teal:#15947f; --teal-dark:#0c7565; --mint:#e7f7f2; --cream:#f6f4ec; --ink:#263d52; --muted:#6b7d8d; --line:#dce6ec; --white:#fff; --danger:#c74d43; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#f7fafb; font:15px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; }
a { color:inherit; }
.wrap { width:min(1180px,calc(100% - 42px)); margin-inline:auto; }
.nav { display:flex; justify-content:space-between; align-items:center; min-height:80px; }
.logo { display:flex; align-items:center; gap:10px; color:var(--navy); text-decoration:none; font-weight:850; font-size:20px; }
.logo span,.mini-logo { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; color:white; background:var(--teal); font-size:14px; }
.nav-links { display:flex; align-items:center; gap:25px; }
.nav-links a { text-decoration:none; font-weight:700; }
.button { display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border:0; border-radius:10px; color:white; background:var(--teal); text-decoration:none; font:inherit; font-weight:800; cursor:pointer; box-shadow:0 8px 18px rgba(21,148,127,.18); }
.button:hover { background:var(--teal-dark); }
.button.small { padding:9px 14px; color:white; }
.landing .hero { display:grid; grid-template-columns:1.05fr .95fr; gap:74px; align-items:center; min-height:660px; padding-block:54px 85px; }
.pill { display:inline-block; padding:7px 11px; border:1px solid #b8e3d8; border-radius:99px; color:var(--teal-dark); background:var(--mint); font-size:12px; font-weight:800; }
.hero h1 { margin:18px 0; color:var(--navy); font-size:clamp(50px,6vw,78px); line-height:.98; letter-spacing:-.05em; }
.hero h1 em { color:var(--teal); font-style:normal; }
.hero-copy>p { max-width:630px; color:var(--muted); font-size:19px; }
.hero-actions { display:flex; align-items:center; gap:22px; margin:30px 0 22px; }
.link-button { border:0; color:var(--teal-dark); background:transparent; text-decoration:none; font:inherit; font-weight:800; cursor:pointer; }
.trust-row { display:flex; flex-wrap:wrap; gap:16px; color:var(--muted); font-size:12px; }
.product-card { padding:12px; border:1px solid var(--line); border-radius:22px; background:white; box-shadow:0 35px 90px rgba(16,42,67,.16); transform:rotate(1.2deg); }
.browser-bar { display:flex; align-items:center; gap:6px; padding:3px 3px 13px; }
.browser-bar i { width:9px; height:9px; border-radius:50%; background:#d4dfe5; }
.browser-bar span { margin-left:12px; color:#8494a1; font-size:10px; }
.mock-extension { width:min(390px,100%); margin:auto; padding:25px; border-radius:16px; background:#f9fbfc; }
.mock-head { display:flex; align-items:center; gap:10px; margin-bottom:25px; }
.mock-head strong,.mock-head small { display:block; }
.mock-head small { color:var(--muted); }.mock-head b { margin-left:auto; }
.green,.eyebrow { color:var(--teal-dark); font-size:11px; font-weight:850; letter-spacing:.09em; text-transform:uppercase; }
.mock-extension h3 { margin:7px 0 2px; color:var(--navy); font-size:23px; }
.mock-extension p { margin:0; color:var(--muted); }
.completion { display:flex; justify-content:space-between; margin:24px 0 10px; font-size:12px; }
.mock-extension button { width:100%; padding:13px; border:0; border-radius:10px; color:white; background:var(--teal); font-weight:800; }
.success { display:grid; margin-top:11px; padding:11px; border-radius:9px; color:var(--teal-dark); background:var(--mint); font-size:12px; }
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; overflow:hidden; margin-bottom:90px; border:1px solid var(--line); border-radius:18px; background:var(--line); }
.features>div { padding:35px; background:white; }
.features>div>span { color:var(--teal); font-weight:850; }.features h2 { color:var(--navy); font-size:20px; }.features p { color:var(--muted); }
.cta { display:flex; justify-content:space-between; align-items:center; gap:30px; margin-bottom:70px; padding:45px; border-radius:22px; color:white; background:var(--navy); }
.cta h2 { max-width:720px; margin:8px 0 0; font-size:32px; line-height:1.2; }.cta .eyebrow { color:#85ddc9; }.button.light { flex:none; color:var(--navy); background:white; }
footer { display:flex; justify-content:space-between; padding-block:25px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
.legal { max-width:780px; padding-block:65px 90px; }.legal h1 { margin:8px 0 18px; color:var(--navy); font-size:46px; }.legal h2 { margin:34px 0 8px; color:var(--navy); font-size:21px; }.legal p { color:var(--muted); font-size:16px; }.legal a { color:var(--teal-dark); }

.dashboard-page { display:grid; grid-template-columns:245px 1fr; min-height:100vh; background:#f4f7f9; }
.sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:25px 20px; color:white; background:var(--navy); }
.sidebar .logo { color:white; }.sidebar nav { display:grid; gap:5px; margin-top:45px; }.sidebar nav a { padding:11px 13px; border-radius:9px; color:#c7d6e1; text-decoration:none; font-weight:700; }.sidebar nav a.active,.sidebar nav a:hover { color:white; background:rgba(255,255,255,.1); }
.privacy-note { margin-top:auto; padding:15px; border:1px solid rgba(255,255,255,.14); border-radius:12px; background:rgba(255,255,255,.06); }.privacy-note p { margin:6px 0 0; color:#b9cad6; font-size:11px; }
.dashboard-main { min-width:0; padding:40px; }
.dashboard-header { display:flex; justify-content:space-between; align-items:center; }.dashboard-header h1 { margin:3px 0 0; color:var(--navy); font-size:34px; }
.connection-banner { display:flex; justify-content:space-between; align-items:center; margin-top:22px; padding:16px 18px; border:1px solid #e7d49d; border-radius:12px; background:#fff9e8; }.connection-banner p { margin:3px 0 0; color:#7c6941; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:25px 0; }.stats article { padding:20px; border:1px solid var(--line); border-radius:14px; background:white; }.stats span,.stats small,.stats strong { display:block; }.stats span { color:var(--muted); font-size:12px; }.stats strong { margin:5px 0; color:var(--navy); font-size:30px; }.stats small { color:#8b9aa6; }
.table-card { overflow:hidden; border:1px solid var(--line); border-radius:16px; background:white; }.table-tools { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px; border-bottom:1px solid var(--line); }.table-tools h2 { margin:0; color:var(--navy); }.table-tools p { margin:2px 0 0; color:var(--muted); font-size:12px; }.filters { display:flex; gap:9px; }.filters input,.filters select,dialog input,dialog select { padding:10px 11px; border:1px solid #cedae2; border-radius:9px; font:inherit; }
.table-wrap { overflow-x:auto; }table { width:100%; border-collapse:collapse; }th,td { padding:15px 22px; border-bottom:1px solid #edf1f4; text-align:left; white-space:nowrap; }th { color:#748696; background:#fbfcfd; font-size:11px; text-transform:uppercase; letter-spacing:.05em; }td strong,td small { display:block; }td small { color:var(--muted); }.status-select { padding:7px 9px; border:1px solid var(--line); border-radius:8px; color:var(--navy); background:#f7fafb; font-weight:700; }.score { display:inline-grid; place-items:center; min-width:42px; padding:4px 8px; border-radius:99px; color:var(--teal-dark); background:var(--mint); font-weight:800; }.empty { padding:65px 20px; text-align:center; }.empty div { display:grid; place-items:center; width:52px; height:52px; margin:auto; border-radius:50%; color:var(--teal); background:var(--mint); font-size:24px; }.empty h3 { margin:12px 0 3px; color:var(--navy); }.empty p { margin:0; color:var(--muted); }.hidden { display:none !important; }
dialog { width:min(480px,calc(100% - 30px)); padding:0; border:0; border-radius:15px; box-shadow:0 30px 100px rgba(16,42,67,.3); }dialog::backdrop { background:rgba(9,28,44,.55); }dialog form { display:grid; gap:14px; padding:24px; }dialog label { display:grid; gap:5px; font-size:12px; font-weight:700; }.dialog-head { display:flex; justify-content:space-between; align-items:center; }.dialog-head h2 { margin:0; color:var(--navy); }.dialog-head button { border:0; background:transparent; font-size:25px; cursor:pointer; }
@media(max-width:900px){.landing .hero{grid-template-columns:1fr;gap:35px}.features{grid-template-columns:1fr}.dashboard-page{grid-template-columns:1fr}.sidebar{position:static;height:auto}.sidebar nav,.privacy-note{display:none}.dashboard-main{padding:25px 18px}.stats{grid-template-columns:repeat(2,1fr)}.table-tools{align-items:stretch;flex-direction:column}.filters{flex-wrap:wrap}.cta{align-items:flex-start;flex-direction:column}}
@media(max-width:560px){.nav-links>a:first-child{display:none}.hero h1{font-size:50px}.trust-row{display:grid}.stats{grid-template-columns:1fr 1fr}.dashboard-header{align-items:flex-start;gap:15px}.dashboard-header .button{font-size:12px;padding:10px}.cta{padding:28px}footer{gap:12px;flex-direction:column}}

/* Dashboard application */
.header-actions,.billing-buttons { display:flex; align-items:center; gap:10px; }
.secondary-button,.danger-button { padding:10px 14px; border:1px solid var(--line); border-radius:9px; color:var(--navy); background:white; font:inherit; font-weight:800; cursor:pointer; }
.danger-button { margin-top:20px; color:var(--danger); border-color:#f0c5c1; }
.plan-pill { display:inline-flex; align-items:center; padding:5px 9px; border-radius:99px; color:#4338ca; background:#eef2ff; font-size:10px; font-weight:900; letter-spacing:.06em; }
.plan-pill.pro { color:#92400e; background:#fef3c7; }
.dashboard-message { margin-top:18px; padding:11px 14px; border:1px solid #a9ded2; border-radius:10px; color:var(--teal-dark); background:var(--mint); }
.dashboard-message.error { color:var(--danger); border-color:#efc2be; background:#fff1f0; }
.dashboard-view { margin-top:25px; }
.welcome-card { display:flex; justify-content:space-between; align-items:center; gap:25px; padding:28px; border-radius:18px; color:white; background:linear-gradient(125deg,var(--navy),#1f536c); box-shadow:0 16px 45px rgba(16,42,67,.16); }
.welcome-card .eyebrow { color:#91e3d1; }.welcome-card h2 { margin:5px 0; font-size:29px; }.welcome-card p { margin:0; color:#c9dae4; }.welcome-card .button { flex:none; background:white; color:var(--navy); }
.dashboard-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.panel { padding:22px; border:1px solid var(--line); border-radius:16px; background:white; }
.panel-head { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:20px; }.panel-head h2,.panel h2 { margin:0; color:var(--navy); }.panel-head p { margin:2px 0 0; color:var(--muted); font-size:12px; }
.pipeline-bars,.analytics-bars { display:grid; gap:14px; }.bar-row>div:first-child { display:flex; justify-content:space-between; margin-bottom:5px; font-size:12px; }.bar-row span { color:var(--muted); }.bar-track { overflow:hidden; height:7px; border-radius:99px; background:#edf2f5; }.bar-track i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--teal),#47bca7); }
.recent-list { display:grid; }.recent-item { display:flex; justify-content:space-between; gap:15px; padding:12px 0; border-bottom:1px solid #edf1f4; text-decoration:none; }.recent-item:last-child { border:0; }.recent-item strong,.recent-item span { display:block; }.recent-item span,.recent-item small { color:var(--muted); font-size:11px; }.recent-item small { text-align:right; }
.empty-inline { margin:15px 0; color:var(--muted); text-align:center; }
.row-delete { border:0; color:var(--danger); background:transparent; font:inherit; font-size:11px; font-weight:800; cursor:pointer; }
.trend-panel { margin-top:18px; }.month-chart { height:230px; display:flex; align-items:flex-end; justify-content:space-around; gap:15px; padding-top:15px; }.month-column { width:min(90px,15%); display:grid; grid-template-rows:20px 160px 20px; gap:5px; text-align:center; }.month-column>span { color:var(--navy); font-size:12px; font-weight:800; }.month-column>div { position:relative; display:flex; align-items:flex-end; border-radius:9px; background:#f0f4f6; overflow:hidden; }.month-column i { width:100%; min-height:4px; border-radius:9px 9px 0 0; background:linear-gradient(var(--teal),#3eb39e); }.month-column small { color:var(--muted); }
.form-panel { max-width:1100px; }.form-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }.form-grid label { display:grid; gap:6px; color:var(--muted); font-size:11px; font-weight:800; }.form-grid input,.form-grid textarea { width:100%; padding:10px 11px; border:1px solid #cedae2; border-radius:9px; color:var(--ink); font:inherit; }.span-2 { grid-column:span 2; }.span-4 { grid-column:span 4; }
.resume-card { display:flex; gap:18px; padding:20px; border:1px solid var(--line); border-radius:13px; background:#f9fbfc; }.resume-card strong,.resume-card span { display:block; }.resume-card span { color:var(--muted); font-size:12px; }.resume-card p { max-height:130px; overflow:auto; margin:12px 0 0; color:#536b7e; font-size:12px; white-space:pre-wrap; }.resume-icon { display:grid; flex:0 0 54px; place-items:center; width:54px; height:64px; border-radius:9px; color:white; background:var(--teal); font-size:11px; font-weight:900; }.empty-icon { color:var(--teal); background:var(--mint); font-size:25px; }.helper-text { margin:14px 0 0; color:var(--muted); font-size:12px; }
.billing-hero { display:flex; justify-content:space-between; align-items:center; gap:30px; }.billing-hero h2 { margin:8px 0 3px; font-size:28px; }.billing-hero p { margin:0; color:var(--muted); }.usage-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }.usage-grid article span,.usage-grid article strong,.usage-grid article small { display:block; }.usage-grid article span,.usage-grid article small { color:var(--muted); }.usage-grid article strong { margin:5px 0; color:var(--navy); font-size:30px; }
.settings-card h2 { margin-bottom:15px; }.settings-list { display:grid; gap:0; }.settings-list>div { display:flex; justify-content:space-between; gap:20px; padding:12px 0; border-bottom:1px solid #edf1f4; }.settings-list span { color:var(--muted); }.settings-list strong { overflow-wrap:anywhere; text-align:right; }
@media(max-width:1000px){.form-grid{grid-template-columns:repeat(2,1fr)}.span-4{grid-column:span 2}}
@media(max-width:900px){.sidebar nav{display:flex;overflow-x:auto;margin-top:20px}.sidebar nav a{white-space:nowrap}.header-actions{flex-wrap:wrap}.dashboard-grid{grid-template-columns:1fr}}
@media(max-width:620px){.dashboard-header{flex-direction:column}.header-actions{width:100%}.welcome-card,.billing-hero{align-items:flex-start;flex-direction:column}.billing-buttons{width:100%;flex-direction:column}.billing-buttons button{width:100%}.form-grid{grid-template-columns:1fr}.span-2,.span-4{grid-column:span 1}.usage-grid{grid-template-columns:1fr}.recent-item{flex-direction:column}.recent-item small{text-align:left}}

/* Public marketing and policy pages */
.mobile-menu { display:none; border:1px solid var(--line); border-radius:9px; padding:8px 11px; color:var(--navy); background:white; font:inherit; font-weight:800; }
.proof-strip { border-block:1px solid var(--line); background:white; }.proof-strip .wrap { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:20px; color:var(--navy); }.proof-strip span { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.section { padding-block:90px; }.section-heading { max-width:760px; margin-bottom:38px; }.section-heading h2,.safety-section h2 { margin:8px 0 12px; color:var(--navy); font-size:clamp(32px,4vw,48px); line-height:1.08; letter-spacing:-.035em; }.section-heading p,.safety-section>div>p { color:var(--muted); font-size:17px; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }.feature-grid article,.content-grid article,.support-grid article { padding:28px; border:1px solid var(--line); border-radius:16px; background:white; }.feature-grid b { color:var(--teal); }.feature-grid h3,.content-grid h2,.support-grid h2 { margin:12px 0 7px; color:var(--navy); }.feature-grid p,.content-grid p,.support-grid p,.support-grid li { color:var(--muted); }
.process-section { background:var(--navy); }.process-section .section-heading h2 { color:white; }.process-section .eyebrow { color:#83dbc8; }.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }.steps article { padding:24px; border:1px solid rgba(255,255,255,.13); border-radius:15px; color:white; background:rgba(255,255,255,.06); }.steps article>span { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; color:var(--navy); background:#83dbc8; font-weight:900; }.steps h3 { margin:18px 0 7px; }.steps p { margin:0; color:#bdd0db; }
.safety-section { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }.safety-list { display:grid; gap:10px; }.safety-list>div { padding:18px; border:1px solid var(--line); border-radius:12px; background:white; }.safety-list strong,.safety-list span { display:block; }.safety-list span { margin-top:3px; color:var(--muted); font-size:12px; }
.pricing-grid { display:grid; grid-template-columns:repeat(2,minmax(0,420px)); gap:18px; }.price-card { padding:32px; border:1px solid var(--line); border-radius:18px; background:white; }.price-card.featured { border:2px solid var(--teal); box-shadow:0 20px 60px rgba(21,148,127,.13); }.price-card>span { color:var(--teal-dark); font-weight:900; text-transform:uppercase; letter-spacing:.08em; font-size:11px; }.price-card h3 { margin:10px 0 0; color:var(--navy); font-size:42px; }.price-card h3 small { font-size:14px; }.price-card p { color:var(--muted); }.price-card ul { min-height:150px; padding-left:20px; color:var(--ink); }.price-card li { margin:8px 0; }.price-card .secondary-button,.price-card .button { display:inline-flex; text-decoration:none; }
.faq { max-width:900px; }.faq details { border-top:1px solid var(--line); }.faq details:last-child { border-bottom:1px solid var(--line); }.faq summary { padding:20px 4px; color:var(--navy); font-weight:850; cursor:pointer; }.faq details p { margin:0 4px 20px; color:var(--muted); }
.cta p { margin:9px 0 0; color:#c2d4df; }.site-footer { margin-top:80px; color:#ccdae4; background:var(--navy); }.footer-grid { display:grid; grid-template-columns:2fr repeat(3,1fr); gap:40px; padding-block:52px; }.footer-grid .logo { color:white; }.footer-grid p { max-width:290px; color:#aebfcb; }.footer-grid>div { display:flex; flex-direction:column; align-items:flex-start; gap:9px; }.footer-grid a { color:#ccdae4; text-decoration:none; font-size:13px; }.footer-grid strong { color:white; }.footer-bottom { display:flex; justify-content:space-between; padding-block:18px; border-top:1px solid rgba(255,255,255,.12); font-size:12px; }
.content-page { padding-bottom:80px; }.page-hero { max-width:1000px; padding-block:90px 55px; }.page-hero.compact { max-width:850px; padding-bottom:38px; }.page-hero h1 { margin:12px 0 18px; color:var(--navy); font-size:clamp(42px,6vw,68px); line-height:1.02; letter-spacing:-.045em; }.page-hero p { max-width:800px; color:var(--muted); font-size:19px; }.content-grid,.support-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.statement { margin-top:65px; padding:50px; border-radius:20px; color:white; background:var(--navy); }.statement h2 { max-width:800px; font-size:34px; }.statement .eyebrow { color:#83dbc8; }
.simple-footer { display:flex; justify-content:space-between; padding-block:24px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
.contact-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:28px; }.contact-options { display:grid; align-content:start; gap:12px; }.contact-options article,.contact-form { padding:24px; border:1px solid var(--line); border-radius:15px; background:white; }.contact-options h2 { margin:0; color:var(--navy); font-size:18px; }.contact-options p { color:var(--muted); }.contact-options a { color:var(--teal-dark); font-weight:800; }.contact-form { display:grid; gap:15px; }.contact-form label { display:grid; gap:6px; color:var(--navy); font-size:12px; font-weight:800; }.contact-form input,.contact-form select,.contact-form textarea { width:100%; padding:11px 12px; border:1px solid #cbd8e0; border-radius:9px; color:var(--ink); background:white; font:inherit; }.honeypot { position:absolute!important; left:-9999px!important; }.form-status { min-height:22px; margin:0; }.form-status.success { color:var(--teal-dark); }.form-status.error { color:var(--danger); }
.legal ul,.legal ol { color:var(--muted); font-size:16px; }.legal li { margin:8px 0; }.support-grid ol { padding-left:20px; }
@media(max-width:900px){.feature-grid{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr 1fr}.safety-section{grid-template-columns:1fr;gap:30px}.footer-grid{grid-template-columns:1fr 1fr}.contact-layout{grid-template-columns:1fr}}
@media(max-width:680px){.marketing-site .mobile-menu{display:block}.marketing-site .nav{position:relative}.marketing-site .nav-links{display:none;position:absolute;z-index:10;top:70px;right:0;left:0;flex-direction:column;align-items:stretch;padding:15px;border:1px solid var(--line);border-radius:12px;background:white;box-shadow:0 18px 50px rgba(16,42,67,.16)}.marketing-site .nav-links.open{display:flex}.proof-strip .wrap{align-items:flex-start;flex-direction:column}.feature-grid,.content-grid,.support-grid,.pricing-grid{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.footer-bottom,.simple-footer{gap:10px;flex-direction:column}.section{padding-block:65px}.page-hero{padding-block:60px 35px}.statement{padding:30px}}
