/* pages.css — the standalone topic pages (/portfolio-management/, /upload/,
   /explore-3d/, /pricing/, /waitlist/, /financials/). Same dark look as the
   landing page in index.html (#authGate.lp). The pages are GENERATED by
   tools/seo-pages/build.py (outside the web root) — edit the copy there. */

:root {
  --bg: #05070d;
  --panel: #070a12;
  --glass: rgba(14, 18, 32, 0.5);
  --ink: #f4f1ea;
  --soft: rgba(244, 241, 234, 0.7);
  --faint: rgba(244, 241, 234, 0.6);
  --line: rgba(244, 241, 234, 0.1);
  --accent: #a8c1d8;
  --navy: #12233a;
  --serif: 'Jost', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --sans: 'Jost', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
  /* type + shape tokens — same scale as index.html (design pass 2026-10-13) */
  --fs-label: 0.6875rem; --fs-micro: 0.6875rem; --fs-caption: 0.8125rem; --fs-small: 0.8125rem;
  --fs-body: 1rem; --fs-lead: 1rem; --fs-h3: 1.25rem; --fs-h2: 1.25rem;
  --fs-h1: 1.75rem; --fs-display: 2.5rem;
  --ls-label: 0.06em; --ls-kicker: 0.12em;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --tap: 44px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px;
  --glass-blur-soft: blur(8px) saturate(1.2); --glass-blur: blur(16px) saturate(1.4);
  --glass-blur-strong: blur(22px) saturate(1.8);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); font-family: var(--sans); font-size: var(--fs-lead); line-height: 1.6;
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 50% 0%, rgba(26, 58, 95, 0.34) 0%, transparent 44%),
    radial-gradient(circle at 90% 60%, rgba(26, 58, 95, 0.12) 0%, transparent 40%);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); }

/* ── Top bar ── */
.pg-top {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: max(14px, env(safe-area-inset-top)) clamp(16px, 4vw, 40px) 14px;
  background: linear-gradient(to bottom, rgba(5, 7, 13, 0.94), rgba(5, 7, 13, 0.6));
  backdrop-filter: var(--glass-blur-soft); -webkit-backdrop-filter: var(--glass-blur-soft);
  border-bottom: 1px solid rgba(244, 241, 234, 0.05);
}
.pg-brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; font-family: var(--serif); font-weight: 400; font-size: var(--fs-h3); letter-spacing: -0.01em; white-space: nowrap; }
.pg-brand em { color: var(--accent); }
/* wordmark: caps, GLOB firm + ESTATE light (2026-10-23) */
.pg-brand > span { font-family: var(--sans); text-transform: uppercase; font-weight: 600; font-size: var(--fs-lead); letter-spacing: 0.24em; margin-right: -0.24em; line-height: 1; }
.pg-brand > span em { font-style: normal; font-weight: 300; }
.pg-brand svg { width: 26px; height: 26px; flex: none; }
.pg-nav { display: flex; gap: 4px 20px; flex-wrap: wrap; justify-content: center; font-family: var(--sans); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; font-weight: 600; }
.pg-nav a { color: var(--faint); text-decoration: none; padding: 6px 0; }
.pg-nav a:hover, .pg-nav a[aria-current="page"] { color: var(--ink); }
.pg-demo {
  flex: none; font-family: var(--sans); font-size: var(--fs-label); letter-spacing: var(--ls-kicker); text-transform: uppercase; text-decoration: none;
  color: var(--ink); background: rgba(14, 18, 32, 0.45); border: 1px solid rgba(244, 241, 234, 0.22);
  border-radius: 999px; padding: 12px 16px; transition: border-color .2s, background .2s; font-weight: 600;
  }
.pg-demo:hover { border-color: rgba(244, 241, 234, 0.6); background: rgba(14, 18, 32, 0.7); }
@media (max-width: 960px) { .pg-nav { display: none; } }

/* ── Layout ── */
.pg-main { max-width: 1080px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px); }
.pg-crumbs { padding-top: 24px; font-family: var(--sans); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--faint); font-weight: 600; }
.pg-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pg-crumbs li + li::before { content: "›"; margin-right: 8px; }
.pg-crumbs a { text-decoration: none; }
.pg-crumbs a:hover { color: var(--ink); }

.pg-hero { padding: clamp(40px, 8vw, 88px) 0 clamp(44px, 7vw, 80px); max-width: 780px; }
.pg-kicker { font-family: var(--sans); font-size: var(--fs-label); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--accent); margin: 0 0 18px; font-weight: 600; }
.pg-h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 22px; text-wrap: balance; }
.pg-h1 em, .pg-h2 em { font-style: italic; color: var(--accent); }
.pg-lede { font-family: var(--sans); font-weight: 400; font-size: var(--fs-lead); line-height: 1.6; color: var(--soft); margin: 0 0 30px; max-width: 640px; }
.pg-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

.pg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); text-decoration: none; cursor: pointer;
  min-height: 52px; padding: 0 24px; border-radius: var(--radius-md);
  font-family: var(--sans); font-size: var(--fs-caption); font-weight: 500; letter-spacing: var(--ls-kicker); text-transform: uppercase;
  background: var(--ink); color: var(--navy); border: 1px solid var(--ink); transition: background .2s;
}
.pg-btn:hover { background: #ffffff; }
.pg-btn.ghost { background: transparent; color: var(--ink); border-color: rgba(244, 241, 234, 0.6); border-radius: 999px; }
.pg-btn.ghost:hover { border-color: var(--ink); background: rgba(244, 241, 234, 0.06); }

.pg-sec { padding: clamp(48px, 8vw, 92px) 0; border-top: 1px solid var(--line); }
.pg-h2 { font-family: var(--serif); font-weight: 300; font-size: var(--fs-display); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 32px; max-width: 760px; text-wrap: balance; }
.pg-sec h3 { font-family: var(--sans); font-weight: 400; font-size: var(--fs-h3); line-height: 1.3; margin: 0 0 8px; }
.pg-sec p { color: var(--soft); margin: 0; font-size: var(--fs-body); line-height: 1.65; }
.pg-sec p + p { margin-top: 12px; }
.pg-prose { max-width: 680px; }
.pg-num { display: block; font-family: var(--sans); font-size: var(--fs-label); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--accent); margin-bottom: 14px; font-weight: 600; }

.pg-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.pg-grid > li { background: var(--panel); padding: 24px 24px 28px; min-width: 0; }
.pg-grid.c2 { grid-template-columns: repeat(2, 1fr); }
.pg-grid.c3 { grid-template-columns: repeat(3, 1fr); }
.pg-grid.c4 { grid-template-columns: repeat(4, 1fr); }
.pg-grid.c5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 960px) { .pg-grid.c3, .pg-grid.c4, .pg-grid.c5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .pg-grid.c2, .pg-grid.c3, .pg-grid.c4, .pg-grid.c5 { grid-template-columns: 1fr; } }

/* Key-figure tiles (financials) */
.pg-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.pg-tile { padding: 24px 20px; border-radius: var(--radius-lg); background: var(--glass); border: 1px solid rgba(244, 241, 234, 0.12); }
.pg-tile .k { font-family: var(--sans); font-size: var(--fs-label); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--faint); font-weight: 600; }
.pg-tile .v { font-family: var(--serif); font-weight: 300; font-size: var(--fs-h1); margin: 8px 0 6px; font-variant-numeric: tabular-nums; }
.pg-tile p { font-size: var(--fs-small); }
@media (max-width: 960px) { .pg-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .pg-tiles { grid-template-columns: 1fr; } }

/* Column table (upload) */
.pg-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.pg-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.pg-table th, .pg-table td { text-align: left; padding: 12px 16px; border-top: 1px solid var(--line); vertical-align: top; }
.pg-table thead th { border-top: 0; font-family: var(--sans); font-size: var(--fs-label); font-weight: 400; letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--faint); background: var(--panel); }
.pg-table td:first-child { color: var(--ink); font-weight: 500; white-space: nowrap; }
.pg-table td { color: var(--soft); }
.pg-table code { font-family: var(--sans); font-size: var(--fs-small); color: var(--accent); }

/* Plans (pricing) */
.pg-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.pg-plan { display: flex; flex-direction: column; gap: var(--space-4); padding: 24px 24px; border-radius: var(--radius-lg); background: var(--glass); border: 1px solid rgba(244, 241, 234, 0.12); min-width: 0; }
.pg-plan.featured { border-color: rgba(168, 193, 216, 0.55); }
.pg-plan .name { font-family: var(--serif); font-size: var(--fs-h2); }
.pg-plan .for { font-size: var(--fs-body); color: var(--soft); }
.pg-plan .price { font-family: var(--serif); font-weight: 300; font-size: var(--fs-display); line-height: 1; font-variant-numeric: tabular-nums; }
.pg-plan .price small { font-family: var(--sans); font-size: var(--fs-label); letter-spacing: var(--ls-label); color: var(--faint); margin-left: 6px; }
.pg-plan ul { margin: 0; padding: 0 0 0 16px; color: var(--soft); font-size: var(--fs-body); display: grid; gap: 6px; }
@media (max-width: 960px) { .pg-plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .pg-plans { grid-template-columns: 1fr; } }
.pg-fine { font-size: var(--fs-small) !important; color: var(--faint) !important; max-width: 760px; margin-top: 22px !important; }
.pg-fine a { color: var(--soft); }

/* City list (explore-3d) */
.pg-cities { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.pg-cities a { display: grid; gap: var(--space-1); padding: 16px 16px 20px; background: var(--panel); text-decoration: none; height: 100%; }
.pg-cities a span { font-family: var(--sans); font-size: var(--fs-h3); }
.pg-cities a small { font-family: var(--sans); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--faint); line-height: 1.5; font-weight: 600; }
.pg-cities a:hover span { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 960px) { .pg-cities { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .pg-cities { grid-template-columns: 1fr; } }

/* Waitlist form */
.pg-form { max-width: 560px; display: grid; gap: var(--space-3); }
.pg-form label.lbl { font-family: var(--sans); font-size: var(--fs-label); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--faint); font-weight: 600; }
.pg-row { display: flex; gap: var(--space-3); }
.pg-input {
  flex: 1 1 auto; min-width: 0; height: 56px; padding: 0 16px; font-family: var(--sans); font-size: var(--fs-lead); color: var(--ink);
  background: rgba(14, 18, 32, 0.6); border: 1px solid rgba(244, 241, 234, 0.24); border-radius: var(--radius-md);
}
.pg-input::placeholder { color: rgba(244, 241, 234, 0.6); }
.pg-input:focus { border-color: var(--accent); outline: none; }
.pg-consent { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--fs-small); line-height: 1.5; color: var(--soft); cursor: pointer; }
.pg-consent input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.pg-msg { min-height: 1.5em; font-size: var(--fs-body); color: #f2b8a2; }
.pg-msg.ok { color: var(--accent); }
@media (max-width: 480px) { .pg-row { flex-direction: column; } .pg-row .pg-btn { width: 100%; } }

/* Explore grid (every page) */
.pg-explore-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.pg-explore-grid a { display: grid; gap: 6px; padding: 24px 24px 24px; background: var(--panel); text-decoration: none; height: 100%; }
.pg-explore-grid a span { font-family: var(--sans); font-size: var(--fs-h3); }
.pg-explore-grid a p { font-size: var(--fs-body); }
.pg-explore-grid a[aria-current="page"] { background: rgba(26, 58, 95, 0.28); }
.pg-explore-grid a:hover span { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 960px) { .pg-explore-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .pg-explore-grid { grid-template-columns: 1fr; } }
.pg-citylinks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 20px; font-size: var(--fs-body); color: var(--faint); }
.pg-citylinks a { color: var(--soft); text-decoration: none; border-bottom: 1px solid var(--line); }
.pg-citylinks a:hover { color: var(--ink); border-color: var(--ink); }

/* Closing call to action */
.pg-cta { text-align: center; }
.pg-cta .pg-h2, .pg-cta .pg-lede { margin-left: auto; margin-right: auto; }
.pg-cta .pg-actions { justify-content: center; }

/* ── Footer ── */
.pg-foot { margin-top: 24px; border-top: 1px solid var(--line); padding: 40px clamp(16px, 4vw, 40px) max(40px, env(safe-area-inset-bottom)); }
.pg-foot-in { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr 1.6fr 1fr; gap: 28px; }
.pg-foot h2 { font-family: var(--sans); font-size: var(--fs-label); font-weight: 400; letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--faint); margin: 0 0 12px; }
.pg-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--fs-body); }
.pg-foot ul.cols2 { grid-template-columns: 1fr 1fr; column-gap: var(--space-4); }
.pg-foot a { color: var(--soft); text-decoration: none; }
.pg-foot a:hover { color: var(--ink); }
.pg-foot .about { font-size: var(--fs-body); color: var(--faint); }
.pg-foot .about strong { display: block; font-family: var(--serif); font-weight: 400; font-size: var(--fs-h3); color: var(--ink); margin-bottom: 8px; }
@media (max-width: 960px) { .pg-foot-in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .pg-foot-in { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* 2026-10-15: every button the same dark glass (matches the app). */
.pg-btn, .pg-btn.ghost {
  background: linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0.05)), rgba(18,22,34,0.36); color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.34); text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  border-radius: 999px; backdrop-filter: var(--glass-blur-strong); -webkit-backdrop-filter: var(--glass-blur-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 0 14px rgba(255,255,255,0.07), 0 8px 24px rgba(0,0,0,0.16);
  font-family: var(--sans); font-weight: 500; text-transform: uppercase; letter-spacing: var(--ls-label);
}
.pg-btn:hover, .pg-btn.ghost:hover { background: linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.10)), rgba(18,22,34,0.42); border-color: rgba(255, 255, 255, 0.5); }