:root {
  --bg: #050505;
  --surface: #0b0b0b;
  --card: #101010;
  --border: #242424;
  --soft-border: #191919;
  --text: #ededed;
  --muted: #858585;
  --faint: #616161;
  --green: #22c55e;
  font-family: inter, arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}

* { box-sizing: border-box; scrollbar-color: #3b3b3b #070707; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: #070707; }
*::-webkit-scrollbar-thumb { border: 2px solid #070707; border-radius: 999px; background: linear-gradient(180deg, #595959, #303030); }
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #777, #404040); }
*::-webkit-scrollbar-corner { background: #070707; }
[hidden] { display: none !important; }
html, body { max-width: 100%; min-height: 100%; margin: 0; overflow-x: clip; background: var(--bg); }
body { display: flex; min-height: 100vh; flex-direction: column; color: var(--text); opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease; }
body.page-ready { opacity: 1; transform: translateY(0); }
body.page-leaving { opacity: 0; transform: translateY(4px); }
a { color: inherit; }
.noise { position: fixed; inset: 0; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
.topbar { height: 58px; border-bottom: 1px solid var(--soft-border); background: #080808; }
.topbar-inner { display: flex; align-items: center; width: min(1080px, calc(100% - 36px)); height: 100%; margin: auto; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; letter-spacing: -.7px; text-decoration: none; }
.brand-logo { width: 32px; height: 32px; }
.brand span span { color: #8c8c8c; }
.nav { display: flex; flex: 1; align-self: stretch; gap: 4px; margin-left: 34px; }
.nav a { position: relative; display: flex; align-items: center; border-radius: 5px; color: var(--muted); padding: 0 10px; font-size: 12px; font-weight: 600; text-decoration: none; transition: .18s; }
.nav a:hover { color: #ddd; background: #121212; }
.nav a.active { color: #eee; }
.nav a.active::after { content: ""; position: absolute; right: 9px; bottom: -1px; left: 9px; height: 1px; background: #e2e2e2; }
.nav a[href="/login"], .nav a[href="/signup"], .nav a[href="/dashboard"], .nav a[href="https://venumzmail.xyz/login"], .nav a[href="https://venumzmail.xyz/signup"], .nav a[href="https://venumzmail.xyz/dashboard"] { border: 1px solid #262626; height: 32px; align-self: center; }
.nav a[href="/login"], .nav a[href="/dashboard"], .nav a[href="https://venumzmail.xyz/login"], .nav a[href="https://venumzmail.xyz/dashboard"] { margin-left: auto; }
.nav a[href="/signup"], .nav a[href="https://venumzmail.xyz/signup"] { margin-left: 4px; }
.status-link { display: flex; align-items: center; gap: 7px; margin-left: auto; color: var(--muted); font-size: 11px; text-decoration: none; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px #22c55e99; }
.page { display: flex; width: min(860px, calc(100% - 36px)); min-height: calc(100vh - 129px); flex: 1; flex-direction: column; justify-content: center; margin: 0 auto; padding: 52px 0; }
.page.narrow { width: min(660px, calc(100% - 36px)); }
.page.pricing-page { width: min(1180px, calc(100% - 36px)); justify-content: flex-start; }
.eyebrow { margin: 0 0 12px; color: var(--faint); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
h1, h2, h3 { margin: 0; font-family: "space grotesk", inter, sans-serif; letter-spacing: -.045em; }
h1 { max-width: 700px; font-size: clamp(36px, 6vw, 58px); line-height: 1.03; }
h2 { margin-bottom: 13px; font-size: 21px; }
h3 { font-size: 15px; }
p { color: var(--muted); font-size: 14px; line-height: 1.75; }
.lead { max-width: 650px; margin: 18px 0 0; color: #aaa; font-size: 16px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 39px; border: 1px solid #333; border-radius: 6px; color: #0a0a0a; background: #e5e5e5; padding: 0 14px; font-size: 12px; font-weight: 700; text-decoration: none; transition: .18s; }
.button:hover { background: #fff; transform: translateY(-1px); }
.button.secondary { color: #aaa; background: #101010; }
.button.secondary:hover { color: #eee; background: #171717; }
.divider { height: 1px; margin: 54px 0; background: var(--border); }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.card { border: 1px solid var(--border); border-radius: 7px; background: var(--card); padding: 18px; }
.card p { margin: 8px 0 0; font-size: 12px; line-height: 1.65; }
.card a { color: #ddd; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.card a.button { color: #0a0a0a; text-decoration: none; }
.card a.button.secondary { color: #aaa; }
.danger-card { margin-top: 12px; border-color: #3b1f1f; background: #120b0b; }
.danger-button { border-color: #5a2424; color: #ffd4d4; background: #2a1111; cursor: pointer; }
.danger-button:hover { color: #fff; background: #451919; }
.turnstile-box { margin-top: 14px; min-height: 0; }
.stack { display: grid; gap: 10px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--soft-border); padding: 14px 0; }
.row:first-child { border-top: 1px solid var(--soft-border); }
.row strong { font-size: 13px; }
.row span { color: var(--muted); font-size: 12px; }
.status { display: flex; align-items: center; gap: 7px; color: #9ad7ac; font-size: 12px; }
.notice { border-left: 2px solid #888; color: #aaa; background: #0c0c0c; padding: 12px 14px; font-size: 13px; line-height: 1.65; }
.faq { border-top: 1px solid var(--border); }
.faq section { border-bottom: 1px solid var(--border); padding: 18px 0; }
.faq p { margin: 7px 0 0; }
.error-code { color: #777; font: 700 clamp(72px, 16vw, 150px)/.85 "space grotesk", sans-serif; letter-spacing: -.1em; }
.footer { border-top: 1px solid var(--soft-border); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; width: min(1080px, calc(100% - 36px)); min-height: 70px; margin: auto; color: #676767; font-size: 11px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 15px; }
.footer a { color: #777; text-decoration: none; }
.footer a:hover { color: #ddd; }
.price-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 32px; }
.plan-matrix { display: grid; margin-top: 30px; overflow: hidden; border: 1px solid var(--border); border-radius: 9px; background: #0d0d0d; }
.matrix-row { display: grid; grid-template-columns: .9fr 1fr 1fr 1.7fr; gap: 16px; align-items: center; border-top: 1px solid #1f1f1f; padding: 13px 16px; color: #8f8f8f; font-size: 12px; }
.matrix-row:first-child { border-top: 0; }
.matrix-row strong { color: #eee; font-size: 13px; }
.matrix-row span { min-width: 0; }
.matrix-head { color: #666; background: #101010; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.price-card { display: flex; min-width: 0; flex-direction: column; border: 1px solid var(--border); border-radius: 8px; background: var(--card); padding: 18px; }
.price-card.featured { border-color: #444; background: #141414; }
.plan-action { margin-top: auto; padding-top: 11px; padding-bottom: 11px; }
.plan-name { color: #ddd; font-size: 15px; font-weight: 700; }
.price { margin: 11px 0 3px; color: #f1f1f1; font: 700 27px "space grotesk", sans-serif; letter-spacing: -.06em; }
.price small { color: #777; font: 500 11px inter, sans-serif; letter-spacing: 0; }
.features { display: grid; gap: 7px; margin: 17px 0 0; padding: 0; list-style: none; }
.features li { color: #999; font-size: 11px; line-height: 1.45; }
.features li::before { content: "\2713"; color: #cfcfcf; margin-right: 7px; }
.features.limits li::before { content: "\2022"; color: #777; }
.plan-divider { height: 1px; margin: 15px 0 3px; background: #222; }
.plan-note { margin: 0; color: #737373; font-size: 11px; }
.login-card { width: min(420px, 100%); margin: 0 auto; border: 1px solid var(--border); border-radius: 8px; background: var(--card); padding: 22px; }
.login-card h1 { font-size: 32px; }
.login-card .lead { margin: 9px 0 23px; font-size: 13px; }
.login-form { display: grid; gap: 13px; }
.login-form label { display: grid; gap: 7px; color: #777; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.login-form input { width: 100%; border: 1px solid #2d2d2d; border-radius: 6px; outline: 0; color: #ddd; background: #151515; padding: 11px 12px; font: 500 13px inter, sans-serif; }
.login-form input:focus { border-color: #666; }
.login-form .button { width: 100%; margin-top: 5px; cursor: pointer; }
.login-note { margin: 16px 0 0; color: #666; font-size: 11px; text-align: center; }
.login-note a { color: #aaa; text-underline-offset: 3px; }
.login-response { min-height: 17px; margin: 13px 0 0; color: #aaa; font-size: 11px; text-align: center; }
.dashboard-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 30px; }
.dash-card { border: 1px solid var(--border); border-radius: 8px; background: var(--card); padding: 17px; }
.dash-card span { display: block; margin-bottom: 9px; color: #777; font-size: 9px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.dash-card strong { display: block; overflow: hidden; color: #eee; font: 700 20px "space grotesk", sans-serif; letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
.api-key-card { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: 18px; align-items: end; margin-top: 12px; border: 1px solid var(--border); border-radius: 9px; background: linear-gradient(145deg, #121212, #0d0d0d); padding: 20px; }
.api-key-card h2 { margin-bottom: 8px; }
.api-key-card p { margin: 0; font-size: 12px; line-height: 1.65; }
.api-key-box { display: grid; gap: 10px; }
.api-key-box code { display: block; overflow: auto hidden; border: 1px solid #303030; border-radius: 7px; color: #e8e8e8; background: #080808; padding: 13px; font: 700 12px ui-monospace, "SFMono-Regular", consolas, monospace; letter-spacing: .01em; white-space: nowrap; }
.api-key-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.api-key-actions .button { cursor: pointer; }
.checkout-page { width: min(1040px, calc(100% - 36px)); justify-content: flex-start; padding-top: 62px; }
.checkout-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.checkout-intro .lead { max-width: 720px; }
.checkout-secure { flex: none; border: 1px solid #2d4935; border-radius: 20px; color: #9ad7ac; background: #0c1a10; padding: 7px 10px; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(285px, .8fr); align-items: start; gap: 12px; margin-top: 34px; }
.checkout-card, .order-card, .payment-result { border: 1px solid var(--border); border-radius: 9px; background: linear-gradient(145deg, #121212, #0e0e0e); padding: 21px; }
.checkout-card { display: grid; gap: 17px; }
.checkout-card-heading { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid #222; }
.checkout-card-heading h2 { margin: 0; font-size: 19px; }
.checkout-card-heading p { margin: 3px 0 0; color: #777; font-size: 11px; line-height: 1.5; }
.checkout-step { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid #343434; border-radius: 7px; color: #cfcfcf; background: #181818; font-size: 10px; font-weight: 700; }
.checkout-card label { display: grid; gap: 7px; color: #777; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.checkout-card input, .select-trigger, .select-menu input { width: 100%; border: 1px solid #2d2d2d; border-radius: 6px; outline: 0; color: #ddd; background: #151515; padding: 11px 12px; font: 500 13px inter, sans-serif; }
.checkout-card input:focus, .select-menu input:focus { border-color: #666; }
.select-picker { position: relative; }
.select-trigger { display: flex; align-items: center; justify-content: space-between; cursor: pointer; text-align: left; }
.select-trigger:hover, .select-trigger[aria-expanded="true"] { border-color: #555; background: #191919; }
.select-chevron { color: #888; font-size: 11px; line-height: 1; }
.select-menu { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; left: 0; border: 1px solid #383838; border-radius: 7px; background: #101010; padding: 7px; box-shadow: 0 18px 45px #000d; }
.select-menu input { margin-bottom: 6px; background: #0c0c0c; }
.select-options { display: grid; }
.currency-options { max-height: 186px; overflow-y: auto; overscroll-behavior: contain; }
.select-option { border: 0; border-radius: 5px; color: #aaa; background: transparent; padding: 8px; cursor: pointer; font: 500 12px inter, sans-serif; text-align: left; }
.select-option:hover, .select-option.active { color: #eee; background: #1c1c1c; }
.currency-empty { margin: 6px; color: #777; font-size: 11px; text-transform: none; }
.checkout-submit { min-height: 43px; cursor: pointer; }
.checkout-note, .checkout-response, .graph-note { margin: 0; color: #777; font-size: 11px; }
.checkout-response { min-height: 18px; margin-top: 13px; }
.payment-lock-modal { width: min(440px, calc(100% - 28px)); border: 1px solid #333; border-radius: 12px; color: #ddd; background: linear-gradient(145deg, #151515, #090909); padding: 22px; box-shadow: 0 24px 80px #000d; }
.payment-lock-modal::backdrop { background: #000b; backdrop-filter: blur(7px); }
.payment-lock-modal .eyebrow { margin-top: 0; color: #d6b66d; }
.payment-lock-modal h2 { margin: 6px 0 9px; font: 700 24px "space grotesk", sans-serif; letter-spacing: -.05em; }
.payment-lock-modal p { color: #9b9b9b; font-size: 13px; line-height: 1.65; }
.payment-lock-modal .actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.payment-lock-modal .button { cursor: pointer; }
.lock-modal-mark { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 13px; border: 1px solid #5a4724; border-radius: 10px; color: #ffd990; background: #211908; font: 800 18px "space grotesk", sans-serif; }
.order-card { display: grid; gap: 17px; }
.order-topline, .order-lines div, .order-total { display: flex; justify-content: space-between; gap: 12px; }
.order-topline { color: #777; font-size: 9px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.order-plan { display: flex; align-items: center; gap: 11px; padding: 13px 0; border-top: 1px solid #222; border-bottom: 1px solid #222; }
.plan-symbol { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #373737; border-radius: 8px; color: #d6d6d6; background: #1b1b1b; font: 700 12px "space grotesk", sans-serif; letter-spacing: -.04em; }
.order-plan strong, .order-plan small { display: block; }
.order-plan strong { color: #ddd; font-size: 13px; }
.order-plan small { margin-top: 4px; color: #707070; font-size: 10px; }
.order-lines { display: grid; gap: 10px; padding-bottom: 15px; border-bottom: 1px solid #222; }
.order-lines span, .order-lines strong, .order-total span { color: #858585; font-size: 11px; font-weight: 500; }
.order-lines strong { color: #aaa; font-size: 10px; }
.order-total { align-items: baseline; }
.order-total span { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.order-total strong { color: #eee; font: 700 24px "space grotesk", sans-serif; letter-spacing: -.06em; }
.trust-list { display: grid; gap: 8px; margin-top: 2px; border-top: 1px solid #222; padding-top: 14px; }
.trust-list p { display: flex; align-items: center; gap: 8px; margin: 0; color: #777; font-size: 10px; line-height: 1.35; }
.trust-list span { color: #aaa; font-size: 9px; font-weight: 700; }
.payment-result { display: grid; gap: 13px; margin-top: 12px; }
.payment-result h2 { margin: 0; }
.payment-address { overflow-wrap: anywhere; margin: 0; color: #ddd; font-family: monospace; font-size: 12px; }
.payment-meta { color: #777; font-size: 11px; }
.status-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.status-heading span { color: #777; font-size: 11px; }
.uptime-graph { display: flex; min-height: 62px; align-items: stretch; gap: 3px; margin: 4px 0 10px; border: 1px solid var(--border); border-radius: 7px; background: #0b0b0b; padding: 9px; }
.uptime-bar { min-width: 5px; flex: 1; border-radius: 2px; background: #555; }
.uptime-bar.operational, [data-state="operational"] .dot { background: var(--green); }
.uptime-bar.degraded, [data-state="degraded"] .dot { background: #eab308; }
.uptime-bar.outage, [data-state="outage"] .dot { background: #ef4444; }
.uptime-bar.pending, [data-state="pending"] .dot { background: #666; }
.uptime-empty { align-self: center; color: #777; font-size: 11px; }
.health-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.health-check { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 7px; background: #101010; padding: 10px 11px; }
.health-check strong { min-width: 0; flex: 1; overflow: hidden; color: #bdbdbd; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.health-check span:last-child { color: #777; font-size: 10px; font-weight: 700; text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) {
  body { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 680px) {
  .topbar { height: auto; }
  .topbar-inner { flex-wrap: wrap; padding: 10px 0 8px; }
  .status-link { margin-left: auto; }
  .nav { order: 3; width: 100%; height: 36px; gap: 1px; margin: 7px 0 0; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: none; padding: 0 8px; font-size: 11px; }
  .nav a[href="/about"], .nav a[href="/support"], .nav a[href="https://venumzmail.xyz/support"] { display: none; }
  .nav a[href="/login"], .nav a[href="/dashboard"], .nav a[href="https://venumzmail.xyz/login"], .nav a[href="https://venumzmail.xyz/dashboard"] { margin-left: auto; }
  .page { padding-top: 49px; }
  h1 { font-size: 39px; }
  .lead { font-size: 14px; }
  .checkout-page { padding-top: 42px; }
  .checkout-intro { display: block; }
  .checkout-secure { display: inline-flex; margin-top: 16px; }
  .checkout-layout { grid-template-columns: 1fr; margin-top: 24px; }
  .order-card { order: -1; }
  .grid, .grid.three, .price-grid, .dashboard-grid { grid-template-columns: 1fr; }
  .health-checks { grid-template-columns: 1fr; }
  .api-key-card { grid-template-columns: 1fr; }
  .api-key-actions { justify-content: flex-start; }
  .matrix-row { grid-template-columns: 1fr; gap: 5px; padding: 15px; }
  .matrix-head { display: none; }
  .footer-inner { align-items: flex-start; flex-direction: column; gap: 9px; padding: 17px 0; }
}

@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}