.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.topbar {
  align-items: center;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  height: 64px;
  padding: 0 clamp(20px, 3.7vw, 64px);
  position: sticky;
  top: 0;
  z-index: 100;
}

.brand {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 12px;
  text-decoration: none;
}

.brand img {
  display: block;
  height: 28px;
  width: auto;
  object-fit: contain;
}

.brand-name {
  color: var(--brand-black);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
}

.topbar nav {
  display: flex;
  align-items: center;
  gap: clamp(28px, 3vw, 48px);
}

.topbar nav a {
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s ease;
}

.topbar nav a:hover,
.topbar nav a.active {
  color: var(--brand-black);
}

.menu-toggle {
  display: none;
}

.get-started,
.back-button {
  background: var(--brand-black);
  border: 0;
  border-radius: 10px;
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  height: 42px;
  padding: 0 22px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.get-started:hover,
.back-button:hover {
  transform: scale(1.01);
  filter: brightness(105%);
}

.hero {
  background: #FFFFFF;
  padding: 100px 24px 60px;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(40px, 5.5vw, 64px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--brand-black);
  margin: 0 0 20px;
}

.hero p {
  color: var(--text-muted);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.6;
  margin: 0 auto 36px;
  max-width: 680px;
  font-weight: 400;
}

.pathways,
.ai-strip,
.trust,
.security {
  margin-left: auto;
  margin-right: auto;
  max-width: 1240px;
  padding-left: 24px;
  padding-right: 24px;
}

.pathways {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin-top: 48px;
  margin-bottom: 96px;
}

.path-card {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-paper);
  transition: all 0.3s ease;
}

.path-card:hover {
  border-color: #CBD5E1;
  transform: translateY(-4px);
  box-shadow: var(--shadow-paper-hover);
}

.path-card h2 {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--brand-black);
  line-height: 1.3;
}

.path-card h3 {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 16px;
}

.path-card p {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 24px;
}

.path-card button {
  background: var(--brand-black);
  color: #FFFFFF;
  border: 0;
  border-radius: var(--radius-pill);
  height: 50px;
  padding: 0 24px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.path-card button:hover {
  background: #1E293B;
  transform: scale(1.01);
}

.footer-grid {
  display: grid;
  gap: 48px;
  grid-template-columns: 1.4fr repeat(3, 0.8fr) 1.2fr;
  max-width: 1240px;
  margin: 0 auto;
}

.footer-grid > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-grid .brand {
  margin-bottom: 16px;
}

.footer-grid p {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 16px;
}

.footer-grid b {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-black);
  margin-bottom: 20px;
  display: block;
}

.footer-grid a {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 12px;
  transition: color 0.2s ease;
  display: block;
}

.footer-grid a:hover {
  color: var(--brand-black);
}

.footer-grid form {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}

.footer-grid form input {
  flex: 1;
  height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid #E2E8F0;
  padding: 0 16px;
  font-size: 14px;
  background: #F8FAFC;
  outline: none;
}

.footer-grid form button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--brand-black);
  color: #FFFFFF;
  font-size: 16px;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.legal {
  border-top: 1px solid var(--border-light);
  color: var(--text-muted);
  display: flex;
  font-size: 13px;
  justify-content: space-between;
  align-items: center;
  margin-top: 64px;
  padding-top: 28px;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}

/* The landing page and the product suites share one document, so a deep link
   into VestStudio or VestMonitor parses the home page on its way there. The
   boot script in index.html marks that load before the first paint and these
   rules keep the marked one from ever showing it; app.js removes the attribute
   as soon as it has resolved the session and knows which surface to present. */
html[data-boot="workspace"] body { background: #F7FBFF; }

/* Signed in, the band behind the floating menu is the products' own cloud
   ground with the sky light the public pages carry in their corner, so the
   capsule reads as glass over the same surface the panels sit on. */
html[data-boot="workspace"] body,
body.is-authenticated:has(#workspace-container:not(.hidden)) {
  background:
    radial-gradient(900px 420px at 6% 0%, rgba(117, 199, 244, .2), transparent 70%),
    radial-gradient(780px 380px at 96% 0%, rgba(11, 99, 246, .07), transparent 70%),
    #F7FBFF;
}
html[data-boot="workspace"] #landing { display: none !important; }

.workspace-container {
  /* Product suites are viewport applications, not document-flow sections.
     Pinning the host prevents a child upload/re-render from collapsing the
     iframe's percentage height and leaving a blank page below it. */
  position: fixed;
  /* Below the floating menu: its capsule and the band it floats in. */
  inset: 82px 0 0;
  height: auto;
  min-height: calc(100dvh - 82px);
  overflow: hidden;
  background: transparent;
  z-index: 20;
}

/* In the workspace the capsule lines up with the panels under it: both sit
   10px in from the viewport, and 10px apart. */
@media (min-width: 901px) {
  body:has(#workspace-container:not(.hidden)) primary-menu.primary-menu--app-shell { padding: 10px 10px 0; }
}

.suite-iframe {
  border: 0;
  display: none;
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 100%;
  width: 100%;
}

.suite-iframe.active {
  display: block;
}

.user-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  padding: 6px 14px;
  border-radius: var(--radius-pill, 999px);
  cursor: pointer;
  transition: all 0.2s ease;
}
.user-badge:hover {
  background: #F1F5F9;
  border-color: #CBD5E1;
}
.user-badge img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.user-badge span {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.user-badge strong {
  font-size: 13px;
  font-weight: 600;
  color: #0F172A;
  line-height: 1.2;
}
.user-badge small {
  font-size: 11px;
  color: #64748B;
  line-height: 1.2;
}

/* ── The workspace on a phone ─────────────────────────────────────────────────
   On a wide screen the suites are viewport applications and the footer below
   them is never meant to be reached: the pinned host covers it, which is what
   `position: fixed` above is for.

   A phone reads the same page as a document. The pinned host there put the
   footer *underneath* VestStudio and VestMonitor — visible through nothing,
   scrolled under the panel rather than sitting after it — so the footer is
   returned to the flow below the workspace: menu, then the suite at one
   viewport, then the footer. Mobile only; nothing above 900px changes. */
@media (max-width: 900px) {
  .workspace-container {
    position: relative;
    inset: auto;
    /* One viewport minus the floating menu, so the suite still opens
       full-height and the footer begins exactly where it ends. */
    flex: 0 0 auto;
    height: calc(100dvh - 72px);
    min-height: calc(100dvh - 72px);
    /* Below the footer's stacking context rather than over it. */
    z-index: 1;
  }
}