/* Homepage design language, scoped to account, commerce and dashboard surfaces. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap');

:root[data-ev-surface] {
  color-scheme: dark;
  --ev-bg: #000;
  --ev-surface: #090909;
  --ev-raised: #111;
  --ev-ink: #f2f2ee;
  --ev-muted: #979793;
  --ev-heading-muted: #7f7f7b;
  --ev-border: #242424;
  --ev-soft-border: #191919;
  --ev-header: rgba(0,0,0,.86);
  --ev-shadow: 0 24px 80px rgba(0,0,0,.14);
}
:root[data-ev-surface][data-theme="light"] {
  color-scheme: light;
  --ev-bg: #fafaf8;
  --ev-surface: #f2f2ef;
  --ev-raised: #eaeae6;
  --ev-ink: #151515;
  --ev-muted: #666661;
  --ev-heading-muted: #85857f;
  --ev-border: #d9d9d2;
  --ev-soft-border: #e6e6df;
  --ev-header: rgba(250,250,248,.9);
  --ev-shadow: 0 24px 80px rgba(0,0,0,.04);
}
/* Map the established page variables to the same Obsidian/Pearl palette. */
:root[data-ev-surface][data-theme] {
  --bg: var(--ev-bg); --surface: var(--ev-surface); --raised: var(--ev-raised);
  --ink: var(--ev-ink); --muted: var(--ev-muted); --border: var(--ev-border);
  --white: var(--ev-surface); --bg-light: var(--ev-raised); --black: var(--ev-ink);
  --gray-dark: var(--ev-muted); --gray-warm: var(--ev-muted); --border-sub: var(--ev-soft-border);
  --w: var(--ev-surface); --blk: var(--ev-ink); --gd: var(--ev-muted); --gw: var(--ev-muted);
  --br: var(--ev-border); --bs: var(--ev-soft-border);
  --card: var(--ev-surface); --line: var(--ev-border); --soft: var(--ev-raised);
  --sh-inset: inset 0 0 0 1px var(--ev-border); --sh-outline: 0 0 0 transparent;
  --si: inset 0 0 0 1px var(--ev-border); --so: 0 0 0 transparent;
  --sw2: inset 0 0 0 1px var(--ev-border); --sc: 0 0 0 transparent;
}
html[data-ev-surface] {scroll-padding-top:100px;}
body[data-ev-page] {
  position:relative; isolation:isolate; margin:0; padding:0; min-height:100vh;
  background:var(--ev-bg); color:var(--ev-ink); font-family:Inter,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; letter-spacing:0;
}
body[data-ev-page]:not([data-dashboard]) {display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;}
body[data-ev-page] *,body[data-ev-page] *::before,body[data-ev-page] *::after {box-sizing:border-box;}
body[data-ev-page] :is(button,input,select,textarea) {font-family:Inter,Arial,sans-serif;}
body[data-ev-page] :is(a,button,input,select,textarea,summary):focus-visible {outline:2px solid var(--ev-ink); outline-offset:4px;}
body[data-ev-page] ::selection {background:var(--ev-ink); color:var(--ev-bg);}
body[data-ev-page] .topographic-backdrop {position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; contain:strict;}
body[data-ev-page] .topographic-wallpaper {
  --topo-tile-height:900px; position:absolute; top:0; left:0; right:0;
  bottom:calc(-1 * var(--topo-tile-height)); background:url('./topographic-dark.svg') repeat;
  background-size:1440px 900px; opacity:.14; pointer-events:none; contain:strict;
}
[data-theme="light"] body[data-ev-page] .topographic-wallpaper {background-image:url('./topographic.svg'); opacity:.12;}

/* The header/footer markup comes directly from the homepage components. */
.ev-site-header {
  position:sticky; top:0; z-index:100; width:100%; flex-shrink:0; text-align:left;
  background:var(--ev-header); border-bottom:1px solid var(--ev-soft-border); backdrop-filter:blur(20px);
}
.ev-header-inner {width:min(1260px,calc(100% - 64px)); height:76px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:24px;}
.ev-wordmark {display:inline-flex; align-items:center; font:300 20px Raleway,Inter,sans-serif; letter-spacing:-.035em; white-space:nowrap; color:var(--ev-ink); text-decoration:none;}
.ev-wordmark strong {font-weight:700;}
body[data-ev-page] .ev-main-nav {position:static; display:flex; align-items:center; gap:29px; border:0; padding:0; background:transparent; box-shadow:none; backdrop-filter:none; font-size:13px; color:var(--ev-muted);}
.ev-main-nav>a {position:relative; padding:10px 0; text-decoration:none; color:inherit; white-space:nowrap;}
.ev-main-nav>a:hover,.ev-main-nav>a[aria-current="page"] {color:var(--ev-ink);}
.ev-main-nav>a::after {content:''; position:absolute; bottom:3px; left:0; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .25s;}
.ev-main-nav>a:hover::after,.ev-main-nav>a[aria-current="page"]::after {transform:scaleX(1);}
.ev-header-actions {display:flex; align-items:center; gap:18px;}
.ev-theme-button {border:0; background:transparent; padding:9px; border-radius:50%; display:grid; place-items:center; color:var(--ev-muted); cursor:pointer;}
.ev-theme-button:hover {background:var(--ev-raised); color:var(--ev-ink);}
.ev-theme-moon {display:none;}
[data-theme="light"] .ev-theme-moon {display:block;}
[data-theme="light"] .ev-theme-sun {display:none;}
.ev-button {display:inline-flex; align-items:center; justify-content:center; gap:16px; min-height:38px; padding:8px 17px; border:1px solid var(--ev-border); border-radius:999px; font-size:13px; font-weight:500; line-height:1.3; color:var(--ev-ink); text-decoration:none; white-space:nowrap;}
.ev-button:hover {border-color:var(--ev-muted); background:var(--ev-surface);}
.ev-menu-button,.ev-main-nav .ev-mobile-account {display:none;}
.ev-skip-link {position:fixed; top:-80px; left:20px; z-index:300; padding:12px 20px; border-radius:10px; background:var(--ev-ink); color:var(--ev-bg); text-decoration:none;}
.ev-skip-link:focus {top:12px;}
body[data-ev-page] .ev-site-footer {display:block; width:100%; max-width:none; margin:0; padding:0; background:var(--ev-header); border-top:1px solid var(--ev-border); color:var(--ev-muted); text-align:left;}
.ev-wrap {width:min(1180px,calc(100% - 72px)); margin-inline:auto;}
.ev-site-footer .ev-footer-main {display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:56px; padding-block:60px;}
.ev-footer-brand {display:block;}
.ev-footer-brand>p {color:var(--ev-muted); font-size:13px; line-height:1.9; margin:23px 0 14px;}
.ev-contact-email {font-size:12px; color:var(--ev-ink); overflow-wrap:anywhere;}
.ev-site-footer .ev-footer-column {display:flex; flex-direction:column; align-items:flex-start; gap:13px;}
.ev-footer-column h2 {font:500 11px Inter,Arial,sans-serif; letter-spacing:.13em; text-transform:uppercase; color:var(--ev-ink); margin:0 0 12px;}
.ev-footer-column a {font-size:12px; line-height:1.6; color:var(--ev-muted); text-decoration:none;}
.ev-footer-column a:hover {color:var(--ev-ink); text-decoration:underline; text-underline-offset:4px;}
.ev-site-footer .ev-footer-bottom {display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; border-top:1px solid var(--ev-border); padding-block:23px; font-size:11px; line-height:1.8;}
.ev-footer-bottom p {font-size:inherit; color:inherit; margin:0;}
.ev-reading-progress {display:none;}

/* Account and checkout pages keep their existing forms and state IDs. */
body[data-ev-page]>.page {flex:1; width:100%; min-height:640px; padding:76px 24px 88px; align-items:center; justify-content:center;}
body[data-ev-page] .page-inner {width:100%; max-width:560px;}
body[data-ev-page]:where(:not([data-dashboard])) .card {max-width:520px; border:1px solid var(--ev-border); border-radius:24px; background:var(--ev-surface); box-shadow:var(--ev-shadow);}
body[data-ev-page] .card-header {padding:36px 36px 0;}
body[data-ev-page] .card-body {padding:0 36px 36px;}
body[data-ev-page] :is(.card-title,.card h1) {font:300 clamp(32px,3.4vw,46px)/1.12 Raleway,Inter,sans-serif; letter-spacing:-.045em; color:var(--ev-ink); margin-bottom:16px;}
body[data-ev-page] :is(.card-sub,.card .sub,.success-sub) {color:var(--ev-muted); font-size:14px; line-height:1.85;}
body[data-ev-page] .card-icon {width:48px; height:48px; border-radius:14px; background:var(--ev-raised); color:var(--ev-ink); box-shadow:none; border:1px solid var(--ev-border); margin-bottom:26px;}
body[data-ev-page] :is(.btn-discord,.btn-black,.btn-pay) {min-height:49px; border:1px solid transparent; border-radius:999px; background:var(--ev-ink); color:var(--ev-bg); font:500 14px/1.4 Inter,Arial,sans-serif; text-transform:none; letter-spacing:0; transition:opacity .2s,transform .2s;}
body[data-ev-page] :is(.btn-discord,.btn-black,.btn-pay):hover {background:var(--ev-ink); opacity:.86; transform:translateY(-1px);}
body[data-ev-page] :is(.btn-outline,.back-link) {font-size:13px; color:var(--ev-muted);}
body[data-ev-page] .btn-outline {min-height:46px; border:1px solid var(--ev-border); border-radius:999px; background:transparent;}
body[data-ev-page] .btn-outline:hover {color:var(--ev-ink); border-color:var(--ev-muted); background:var(--ev-raised);}
body[data-ev-page] :is(.info-note,.info-box,.license-info,.copy-field) {background:var(--ev-raised); color:var(--ev-muted); border-radius:12px; box-shadow:none; border:1px solid var(--ev-border); font-size:13px; line-height:1.75;}
body[data-ev-page] .section-label {font-size:11px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--ev-muted);}
body[data-ev-page] .field input {min-height:46px; border:1px solid var(--ev-border); border-radius:10px; background:var(--ev-raised); color:var(--ev-ink); box-shadow:none;}
body[data-ev-page="waitlist"] .card {max-width:none; padding:42px 36px;}
body[data-ev-page="waitlist"] .tag {background:transparent; border:1px solid var(--ev-border); box-shadow:none; color:var(--ev-muted); padding:6px 14px; font-size:11px; letter-spacing:.1em;}
body[data-ev-page="waitlist"] .card h1 strong {font-weight:300; font-style:italic;}
body[data-ev-page="waitlist"] .plan-pill {max-width:none; padding:18px 12px; background:var(--ev-raised);}
body[data-ev-page="waitlist"] .plan-pill .plan-price {font-size:32px; letter-spacing:-.04em; margin-top:8px;}
.ev-account-intro {margin-bottom:36px;}
.ev-account-intro .ev-eyebrow {font-size:11px; color:var(--ev-muted); letter-spacing:.16em; text-transform:uppercase; margin-bottom:15px;}
.ev-account-intro h1 {font:300 clamp(38px,4vw,56px)/1.1 Raleway,Inter,sans-serif; letter-spacing:-.045em; margin:0 0 17px; color:var(--ev-ink);}
.ev-account-intro h1 span {color:var(--ev-heading-muted);}
.ev-account-intro p {font-size:14px; line-height:1.8; color:var(--ev-muted);}
.ev-account-intro,body[data-ev-page="marketplace"] .hero {position:relative; isolation:isolate;}
.ev-account-intro::before,body[data-ev-page="marketplace"] .hero::before {content:''; position:absolute; inset:-20px 0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 25% 50%,var(--ev-bg) 15%,transparent 75%); opacity:.9;}
body[data-ev-page="account"] .page-inner {max-width:680px;}
body[data-ev-page="account"] .card {max-width:none; border-radius:18px;}
body[data-ev-page="account"] .profile-row {padding:27px;}
body[data-ev-page="account"] .profile-name {font-size:20px;}
body[data-ev-page="account"] .info-row {padding:20px 27px;}
body[data-ev-page="account"] .btn-row {padding:24px 27px; gap:12px; flex-wrap:wrap;}
body[data-ev-page="account"] .discord-badge {background:var(--ev-raised); color:var(--ev-muted); border:1px solid var(--ev-border);}
body[data-ev-page="checkout"] .card {width:100%; padding:36px;}
body[data-ev-page="checkout"] .plan-price {font:300 64px/1.1 Raleway,Inter,sans-serif; letter-spacing:-.05em;}
body[data-ev-page="checkout"] .currency-btn {border-radius:12px;}
body[data-ev-page="checkout"] #sandbox-banner {position:static!important; width:100%; margin:0!important;}
body[data-ev-page="callback"]>.ev-standalone {display:grid; place-items:center;}
body[data-ev-page="callback"] .card {width:100%; padding:42px 36px; text-align:center;}
.ev-standalone {flex:1; width:100%; min-height:600px; padding:80px 24px; text-align:center;}
body[data-ev-page="not-found"] .code {font-weight:300; color:var(--ev-heading-muted); opacity:1; margin:0 0 22px; font-size:clamp(100px,15vw,180px);}
body[data-ev-page="not-found"] main h1 {font-size:38px; letter-spacing:-.045em;}
body[data-ev-page="not-found"] main p {margin:20px auto 28px;}
body[data-ev-page="trajectory"] .ev-standalone {display:grid; place-items:center;}
body[data-ev-page="trajectory"] .traj-card {background:var(--ev-surface); border:1px solid var(--ev-border); border-radius:24px; box-shadow:none; width:min(440px,100%); min-width:0;}
body[data-ev-page="trajectory"] .caption-row {flex-wrap:wrap; gap:12px;}

/* Marketplace: the same editorial scale and shell around the working catalog. */
body[data-ev-page="marketplace"]>main {width:min(1180px,calc(100% - 72px)); max-width:none; padding:0;}
body[data-ev-page="marketplace"] .hero {padding:80px 0 60px;}
body[data-ev-page="marketplace"] h1 {font-size:clamp(44px,5.5vw,72px); letter-spacing:-.045em;}
body[data-ev-page="marketplace"] h1 strong {color:var(--ev-heading-muted); font-weight:300;}
body[data-ev-page="marketplace"] .eyebrow {font-size:11px; letter-spacing:.16em;}
body[data-ev-page="marketplace"] .hero>p {font-size:15px;}
.ev-vendor-link {display:inline-flex; margin-top:24px; color:var(--ev-ink); font-size:13px; text-decoration:underline; text-underline-offset:5px;}
body[data-ev-page="marketplace"] :is(.weight-card,.bundle-card,.listing-card) {border-radius:20px;}
body[data-ev-page="marketplace"] .filters :is(input,select) {border-radius:12px; height:48px;}

/* The older sandbox pricing page retains its checkout links and plan content. */
body[data-ev-page="pricing"]>.page {background:transparent;}
body[data-ev-page="pricing"] .page>.container {width:min(1180px,100%); padding:0;}
body[data-ev-page="pricing"] .page-header h1 {font-size:clamp(42px,5.5vw,72px); letter-spacing:-.045em;}
body[data-ev-page="pricing"] .page-header p {font-size:15px; line-height:1.85;}
body[data-ev-page="pricing"] .pricing-grid {max-width:1120px; gap:24px;}
body[data-ev-page="pricing"] .price-card {background:var(--ev-surface); border:1px solid var(--ev-border); border-radius:20px; padding:36px; text-align:left; box-shadow:none;}
body[data-ev-page="pricing"] .price-card.featured {--ev-ink:#151515; --ev-muted:#666661; --ev-bg:#f1eee8; --ev-border:#d9d9d2; background:#f1eee8;}
body[data-ev-page="pricing"] .price-name {color:var(--ev-muted); font:500 12px Inter,sans-serif; letter-spacing:.14em; margin-bottom:30px;}
body[data-ev-page="pricing"] .price-amount {color:var(--ev-ink); font-size:72px; letter-spacing:-.05em;}
body[data-ev-page="pricing"] .price-period {color:var(--ev-muted); margin-top:12px;}
body[data-ev-page="pricing"] .price-features li {color:var(--ev-muted); border-color:var(--ev-border); font-size:13px;}
body[data-ev-page="pricing"] .price-features li::before {color:var(--ev-ink);}
body[data-ev-page="pricing"] .price-cta {display:flex; min-height:49px; border-radius:999px; background:var(--ev-ink)!important; color:var(--ev-bg)!important; font:500 14px Inter,sans-serif; text-transform:none; letter-spacing:0; box-shadow:none;}
body[data-ev-page="pricing"] .popular-badge {background:#151515; color:#f1eee8; font:500 11px Inter,sans-serif; letter-spacing:.06em;}
body[data-ev-page="pricing"] .faq {width:100%; max-width:900px;}

/* Dense workspaces retain their navigation and responsive table behavior. */
body[data-dashboard] #login {background:transparent; overflow:auto; padding:40px 24px;}
body[data-dashboard] .lcard {position:relative; width:100%; max-width:440px; margin:auto; padding:38px; border:1px solid var(--ev-border); border-radius:24px; background:var(--ev-surface); box-shadow:var(--ev-shadow);}
body[data-dashboard] .llogo {font-size:20px; letter-spacing:-.035em; margin-bottom:36px;}
body[data-dashboard] .lcard h1 {font-size:36px; letter-spacing:-.045em; line-height:1.12; margin-bottom:12px;}
body[data-dashboard] .lcard .lsub {font-size:13px; line-height:1.8; margin-bottom:28px;}
body[data-dashboard] .lcard .field {margin-bottom:18px;}
body[data-dashboard] .lbtn {min-height:49px; font:500 14px Inter,Arial,sans-serif; text-transform:none; letter-spacing:0; background:var(--ev-ink); color:var(--ev-bg);}
.ev-login-actions {display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0 0 24px; padding-bottom:20px; border-bottom:1px solid var(--ev-border); font-size:12px; color:var(--ev-muted);}
body[data-dashboard] .sb {background:var(--ev-header); backdrop-filter:blur(20px); border-right-color:var(--ev-border);}
body[data-dashboard] .sb-logo {font-size:20px; letter-spacing:-.035em;}
body[data-dashboard] .ni {border-radius:10px; padding:10px; font-size:13px;}
body[data-dashboard] .ni.active {background:var(--ev-raised);}
body[data-dashboard] .main {padding:36px;}
body[data-dashboard] .topbar {margin-bottom:32px;}
body[data-dashboard] .topbar h1 {font-size:36px; font-weight:300; letter-spacing:-.045em; line-height:1.15;}
body[data-dashboard] .topbar p {font-size:13px; line-height:1.8; margin-top:8px;}
body[data-dashboard] :is(.card,.sc,.ms,.cc,.tc) {background:var(--ev-surface); border:1px solid var(--ev-border); border-radius:18px; box-shadow:none;}
body[data-dashboard] .sc {padding:24px;}
body[data-dashboard] .sc-val {font-size:36px; letter-spacing:-.04em;}
body[data-dashboard] :is(.sc-lbl,.sb-sec) {letter-spacing:.1em; font-size:10px;}
body[data-dashboard] :is(.btn-add,.btn-primary) {font-family:Inter,Arial,sans-serif; letter-spacing:0; font-weight:500; text-transform:none;}
body[data-dashboard] .modal {background:var(--ev-surface); border:1px solid var(--ev-border); border-radius:20px;}

@media(max-width:1100px) {
  .ev-main-nav {gap:20px!important;}
  .ev-site-footer .ev-footer-main {gap:30px;}
}
@media(max-width:1024px) {
  body[data-ev-page] .ev-main-nav {display:none; position:absolute; top:75px; left:0; right:0; padding:20px 24px; flex-direction:column; align-items:stretch; gap:3px!important; background:var(--ev-bg); border-bottom:1px solid var(--ev-border); box-shadow:0 24px 40px rgba(0,0,0,.12);}
  body[data-ev-page] .ev-main-nav.ev-is-open {display:flex;}
  .ev-main-nav>a {padding:12px;}
  .ev-main-nav>a::after {left:12px; width:calc(100% - 24px); bottom:6px;}
  .ev-main-nav .ev-mobile-account {display:flex; align-items:center; gap:16px;}
  .ev-menu-button {width:38px; height:38px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; background:transparent; color:var(--ev-ink); border:1px solid var(--ev-border); border-radius:50%; cursor:pointer;}
  .ev-menu-button span {display:block; width:14px; height:1px; background:currentColor;}
  .ev-site-footer .ev-footer-main {grid-template-columns:1fr 1fr 1fr; gap:32px;}
  .ev-footer-brand {grid-column:1/-1;}
}
@media(max-width:760px) {
  body[data-dashboard] .main {padding:20px 16px;}
  body[data-dashboard] .topbar h1 {font-size:29px;}
  body[data-dashboard] .sc {padding:18px;}
}
@media(max-width:600px) {
  .ev-header-inner {width:calc(100% - 32px); gap:12px;}
  .ev-header-actions {gap:9px;}
  .ev-header-actions>.ev-button {display:none;}
  .ev-wrap {width:calc(100% - 36px);}
  .ev-site-footer .ev-footer-main {grid-template-columns:1fr 1fr; padding-block:42px; gap:32px 24px;}
  .ev-site-footer .ev-footer-bottom {display:grid; gap:9px;}
  body[data-ev-page]>.page {padding:40px 18px 55px; min-height:560px;}
  body[data-ev-page] .card-header {padding:27px 24px 0;}
  body[data-ev-page] .card-body {padding:0 24px 28px;}
  body[data-ev-page="waitlist"] .card,body[data-ev-page="callback"] .card {padding:30px 23px; border-radius:20px;}
  body[data-ev-page="waitlist"] .plan-pill {padding:14px 5px;}
  body[data-ev-page="waitlist"] .plan-pill .plan-price {font-size:27px;}
  body[data-ev-page="waitlist"] .plans-row {gap:7px;}
  body[data-ev-page="account"] .profile-row {padding:22px; gap:14px; flex-wrap:wrap;}
  body[data-ev-page="account"] .info-row {padding:18px 22px;}
  body[data-ev-page="account"] .btn-row {padding:22px;}
  body[data-ev-page="checkout"] .card {padding:26px 22px; border-radius:20px;}
  body[data-ev-page="marketplace"]>main {width:calc(100% - 36px);}
  body[data-ev-page="marketplace"] .hero {padding:48px 0 38px;}
  body[data-ev-page="marketplace"] .hero>p {font-size:14px;}
  body[data-ev-page="marketplace"] .filters label {flex-basis:100%;}
  body[data-dashboard] #login {padding:24px 18px;}
  body[data-dashboard] .lcard {padding:28px 24px; border-radius:20px;}
  body[data-dashboard] .lcard h1 {font-size:32px;}
  .ev-standalone {min-height:560px; padding:54px 18px;}
  body[data-ev-page] .topographic-wallpaper {--topo-tile-height:625px; background-size:1000px 625px;}
}
@media(prefers-reduced-motion:reduce) {
  html[data-ev-surface] {scroll-behavior:auto;}
  body[data-ev-page] *,body[data-ev-page] *::before,body[data-ev-page] *::after {animation:none!important; transition:none!important; scroll-behavior:auto!important;}
  body[data-ev-page] .topographic-wallpaper {transform:none!important; will-change:auto!important;}
}
