:root {
  color-scheme: dark;
  --theme-accent: #20c997;
  --theme-accent-hover: #19a87d;
  --theme-accent-soft: #dff8ef;
  --theme-on-accent: #06130f;
  --theme-deep: #061a14;
  --theme-deep-2: #0c2b22;
  --theme-on-deep: #fffdf8;
  --theme-focus: #8fe8cd;
  --bg: var(--theme-deep);
  --panel: #10161c;
  --panel-strong: #13261f;
  --text: #f7faf9;
  --muted: #a2b2af;
  --line: #253139;
  --accent: var(--theme-accent);
  --accent-dark: var(--theme-deep-2);
}

:root[data-color-theme="ocean"]{--theme-accent:#199bb5;--theme-accent-hover:#147f96;--theme-accent-soft:#ddf3f7;--theme-on-accent:#06130f;--theme-deep:#071b24;--theme-deep-2:#102e39;--theme-focus:#8cd5e3}:root[data-color-theme="cobalt"]{--theme-accent:#447dea;--theme-accent-hover:#315fc0;--theme-accent-soft:#e4ecfd;--theme-on-accent:#06130f;--theme-deep:#09172c;--theme-deep-2:#152846;--theme-focus:#a5bff3}:root[data-color-theme="plum"]{--theme-accent:#936bdd;--theme-accent-hover:#744fba;--theme-accent-soft:#eee8fa;--theme-on-accent:#06130f;--theme-deep:#1d122d;--theme-deep-2:#302142;--theme-focus:#c7b2ed}:root[data-color-theme="terracotta"]{--theme-accent:#d76b42;--theme-accent-hover:#b85632;--theme-accent-soft:#f9e7df;--theme-on-accent:#06130f;--theme-deep:#2b1510;--theme-deep-2:#44231a;--theme-focus:#efb39c}:root[data-color-theme="berry"]{--theme-accent:#d45378;--theme-accent-hover:#b33f62;--theme-accent-soft:#f9e2e9;--theme-on-accent:#06130f;--theme-deep:#2a1119;--theme-deep-2:#43202a;--theme-focus:#eca9bd}:root[data-color-theme="gold"]{--theme-accent:#d7a928;--theme-accent-hover:#b38a1c;--theme-accent-soft:#f8efd4;--theme-on-accent:#06130f;--theme-deep:#261d08;--theme-deep-2:#3d3113;--theme-focus:#ead489}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--theme-accent) 18%, transparent), transparent 32%), var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.site-header {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  min-height: 78px;
  padding: 10px clamp(18px, 3vw, 44px);
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--theme-deep) 90%, transparent);
  backdrop-filter: blur(14px);
}
.brand img { display: block; width: clamp(190px, 18vw, 250px); height: 56px; object-fit:contain; }
.brand-logo-tint { position:relative;display:inline-block;overflow:hidden;border:1px solid color-mix(in srgb,var(--theme-accent) 72%,transparent);border-radius:15px;isolation:isolate;line-height:0;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--theme-accent) 18%,transparent); }
.brand-logo-tint::after { position:absolute;inset:0;content:"";pointer-events:none;background:var(--theme-accent);mix-blend-mode:color; }
.nav { align-items: center; display: flex; gap: 20px; font-weight: 800; }
.nav a { color: var(--muted); text-decoration: none; }
.nav a:hover { color: var(--text); }
.login-link, .primary {
  background: var(--accent);
  color: var(--theme-on-accent) !important;
  border-radius: 8px;
  padding: 13px 18px;
}
main { padding: 0 clamp(20px, 5vw, 64px) 56px; }
.hero {
  min-height: 58vh;
  display: grid;
  align-content: center;
  gap: 22px;
  max-width: 1100px;
  padding: 76px 0 48px;
}
.eyebrow { color: var(--accent); font-weight: 900; margin: 0; }
h1 { font-size: clamp(3rem, 8vw, 7.6rem); line-height: 0.96; letter-spacing: 0; margin: 0; max-width: 1100px; }
h2 { font-size: clamp(1.7rem, 3vw, 3rem); letter-spacing: 0; margin: 0 0 12px; }
.lead { color: var(--muted); font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1.55; margin: 0; max-width: 950px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.primary, .secondary { font-weight: 900; text-decoration: none; }
.secondary { border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 13px 18px; }
.feature-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 18px;
}
article, .workflow, .pricing {
  background: rgba(16, 22, 28, 0.88);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px;
}
article { min-height: 245px; }
article span { color: var(--accent); font-weight: 900; }
article h2 { font-size: 1.35rem; margin-top: 34px; }
article p, .workflow p, .workflow li, .pricing p { color: var(--muted); font-size: 1.05rem; line-height: 1.55; }
.workflow {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 32px;
  margin-top: 18px;
}
.workflow ul { margin: 0; padding-left: 22px; }
.workflow li { margin: 10px 0; }
.pricing { margin-top: 18px; }
.site-footer {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.35fr) auto;
  margin-top: 36px;
  padding: 36px clamp(20px, 5vw, 64px) 44px;
}
.site-footer p { color: var(--muted); line-height: 1.5; margin: 10px 0 0; }
.footer-brand { display: inline-flex; max-width: 190px; }
.footer-brand img { display: block; height: auto; max-width: 100%; }
.site-footer nav { align-content: start; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-footer nav a { color: var(--text); font-weight: 750; text-decoration: none; }
.site-footer nav a:hover { color: var(--accent); }
.footer-meta { margin: 0 !important; white-space: nowrap; }
@media (max-width: 820px) {
  .feature-grid, .workflow { grid-template-columns: 1fr; }
  .site-footer { grid-template-columns: 1fr; }
  .site-header { gap:12px; padding-inline:16px; }
  .brand img { width:190px;height:48px; }
  .nav { gap:10px; }
  .nav > a:not(.login-link) { display:none; }
}
@media (max-width: 520px) {
  .site-header { align-items:stretch;flex-wrap:wrap; }
  .nav { justify-content:flex-end; }
}

.theme-picker-mount{position:relative;display:inline-flex}.theme-picker-toggle{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.07);color:var(--text);font-weight:850}.theme-picker-toggle>span:first-child{display:grid;width:21px;height:21px;border:3px solid var(--theme-accent);border-radius:50%;background:linear-gradient(90deg,var(--theme-accent) 50%,#fff 50%);color:transparent}.theme-picker-panel{position:absolute;top:calc(100% + 10px);right:0;width:min(360px,calc(100vw - 28px));padding:16px;border:1px solid #d9ddd5;border-radius:18px;background:#fffdf8;color:#10211d;box-shadow:0 22px 60px rgba(0,0,0,.42)}.theme-picker-heading{display:grid;gap:2px;margin-bottom:12px}.theme-picker-heading small{color:#62706b}.theme-preset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.theme-preset{display:flex;align-items:center;gap:9px;min-height:44px;padding:7px 9px;border:2px solid transparent;border-radius:12px;background:#f1f3f0;color:#10211d;font-weight:800;text-align:left}.theme-preset.active{border-color:var(--theme-accent);background:var(--theme-accent-soft)}.theme-preset i{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--swatch) 0 50%,var(--swatch-deep) 50%)}.theme-custom-row{display:grid;grid-template-columns:1fr 42px auto;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid #d9ddd5;font-size:.78rem;font-weight:800}.theme-custom-row input{width:42px;height:38px;padding:2px}.theme-custom-row button{min-height:38px;padding:0 11px;border-radius:9px;background:var(--theme-accent);color:var(--theme-on-accent);font-weight:850}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--theme-focus);outline-offset:2px}

/* The landing page uses the same canonical brand treatment as the app. */
.site-header {
  min-height: 78px;
  padding: 10px clamp(18px, 3vw, 44px);
}
.site-header .brand-logo-tint {
  width: clamp(190px, 18vw, 250px);
  height: 56px;
  border: 1px solid color-mix(in srgb, var(--theme-accent) 38%, transparent);
  border-radius: 15px;
  background: #05090a;
  box-shadow: none;
}
.site-header .brand {
  display: flex;
  align-items: center;
  line-height: 0;
}
.site-header .brand img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}