/* Top bar, sidebar, page shell, marketing sections */

/* dvh, not vh. On iOS Safari 100vh is the height with the toolbars HIDDEN,
   so a 100vh box is taller than what is actually on screen and the page
   scrolls when there is nothing to scroll to. dvh tracks the visible
   viewport. The vh line stays as the fallback for browsers without dvh. */
.app-shell {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}

/* App pages stop growing at a comfortable width and centre beyond it.
   Allowed to fill a 32in monitor instead, the dashboard's cards end up
   marooned at the left of a 2000px row and every panel's text is stretched
   past the width anyone can track a line across.

   It is a gutter rather than a max-width on one box because the top bar and
   the content beneath it have to share their left and right edges. Both
   resolve this percentage against .app-main, so both land on the same line.
   max() keeps the ordinary page padding wherever the window is smaller than
   the cap, which is every laptop. */
.app-main {
  --app-content-max: 1500px;
  --app-gutter: max(var(--space-5), (100% - var(--app-content-max)) / 2);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--app-gutter, var(--space-5));
  background: var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-border);
}

.wordmark {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--color-text);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  overflow: hidden;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
}
.wordmark span { color: var(--color-accent); }
.wordmark:hover { color: var(--color-text); }
.wordmark-icon { display: inline-block; height: 28px; width: auto; vertical-align: middle; align-self: center; flex-shrink: 0; }
.auth-card .wordmark-icon { display: inline-block; height: 40px; vertical-align: middle; margin-right: var(--space-2); }

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  flex-shrink: 0;
}

.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: var(--space-5) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: 500;
}
.sidebar-nav a svg { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar-nav a:hover { background: var(--color-surface-hover); color: var(--color-text); }
.sidebar-nav a[aria-current="page"] {
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  font-weight: 600;
}

.main-content {
  flex: 1;
  min-width: 0;
  /* Same gutter as the top bar above - see .app-main. */
  padding: var(--space-6) var(--app-gutter, var(--space-5));
}

.mobile-nav-toggle { display: none; }

/* Marketing / public page layout */
.hero {
  position: relative;
  padding: var(--space-8) 0 var(--space-7);
  text-align: center;
  overflow: hidden;
}
/* Soft ambient wash behind the hero content, standing in for a photographic
   background without needing real photography/blueprint assets - kept
   subtle so it never competes with the foreground text or mockup. */
.hero::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60%;
  height: 140%;
  background: radial-gradient(circle, var(--color-accent-soft) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hero h1 {
  font-size: var(--font-size-4xl);
  max-width: 820px;
  margin: 0 auto var(--space-5);
}
.hero .lead {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  max-width: 640px;
  margin: 0 auto var(--space-6);
}
.hero-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Two-column hero: copy + trust badges on the left, product mockup on the
   right (a stylised representation of the real dashboard, not a stock
   photo, so the marketing page never shows a UI that doesn't exist). */
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: var(--space-8);
  text-align: left;
}
.hero-content h1 { margin: 0 0 var(--space-5); text-align: left; }
.hero-content .lead { margin: 0 0 var(--space-6); text-align: left; }
.hero-accent { color: var(--color-accent-text); }
.hero-actions-left { justify-content: flex-start; margin-bottom: var(--space-6); }

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.hero-badges li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-muted);
}
.hero-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

/* Product mockup: browser chrome + a simplified, truthful facsimile of the
   real dashboard (same stat-card/badge language as the app itself), with
   two small "document" cards peeking out behind it for depth. */
.hero-visual {
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mock-browser {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 480px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.mock-browser-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-border);
}
.mock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border-strong);
}
.mock-url {
  margin-left: var(--space-2);
  padding: 3px var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: 11px;
  color: var(--color-text-faint);
}
.mock-app { display: flex; min-height: 260px; }
.mock-sidebar {
  width: 108px;
  flex-shrink: 0;
  background: var(--color-bg-elevated);
  border-right: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.mock-sidebar-item {
  font-size: 11px;
  color: var(--color-text-faint);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
}
.mock-sidebar-item.is-active {
  background: var(--color-surface);
  color: var(--color-accent-strong);
  font-weight: 600;
}
.mock-main { flex: 1; min-width: 0; padding: var(--space-4); }
.mock-main-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.mock-title { font-family: var(--font-heading); font-weight: 600; font-size: var(--font-size-sm); margin: 0; }
.mock-subtitle { font-size: 11px; color: var(--color-text-faint); margin: 2px 0 0; }
.mock-credits {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-accent-strong);
  background: var(--color-accent-soft);
  padding: 3px var(--space-2);
  border-radius: var(--radius-full);
}
.mock-credits small { font-weight: 500; color: var(--color-text-faint); margin-left: 2px; }
.mock-stat-row { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.mock-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-elevated);
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--color-text-muted);
}
.mock-stat .badge { font-size: 10px; padding: 2px var(--space-2); }
.mock-list-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-faint);
  margin: 0 0 var(--space-2);
}
.mock-report-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
  font-size: 11px;
  color: var(--color-text);
}
.mock-report-btn {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-on-accent);
  background: var(--color-accent);
  padding: 3px var(--space-2);
  border-radius: var(--radius-sm);
}

.hero-doc {
  position: absolute;
  z-index: 1;
  width: 150px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: var(--space-3);
}
.hero-doc-brand { font-family: var(--font-heading); font-size: 10px; font-weight: 600; margin: 0 0 var(--space-2); color: var(--color-text); }
.hero-doc-brand span { color: var(--color-accent); }
.hero-doc-title { font-size: 11px; font-weight: 600; margin: 0 0 var(--space-3); line-height: 1.3; }
.hero-doc-line { height: 4px; border-radius: 2px; background: var(--color-border); margin-bottom: 5px; }
.hero-doc-line-short { width: 60%; }
.hero-doc-1 { top: -6%; right: 4%; transform: rotate(6deg); }
.hero-doc-2 { bottom: -8%; left: 0; transform: rotate(-5deg); }

/* Stat/trust bar beneath the hero, in the same card language as .stat-card. */
.hero-stats {
  position: relative;
  z-index: 1;
  margin-top: var(--space-7);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5) var(--space-6);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}
.hero-stat { display: flex; align-items: center; gap: var(--space-3); text-align: left; }
.hero-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}
/* Scoped to the text wrapper div - a bare ".hero-stat span" would also match
   the .hero-stat-icon span and break its flex centering (icon glyph ends up
   top-left of the circle). */
.hero-stat div strong { display: block; font-size: var(--font-size-sm); color: var(--color-text); }
.hero-stat div span { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 2px; }

.section {
  padding: var(--space-7) 0;
  border-top: 1px solid var(--color-border);
}
/* Alternating tint for rhythm down the page - cards (always --color-surface)
   read as clearly "on top of" the section this way, echoing the hero's
   layered look without repeating its gradient treatment. */
.section-tint {
  background: var(--color-bg-elevated);
}
.section-header {
  text-align: center;
  max-width: var(--content-max);
  margin: 0 auto var(--space-6);
}
.section-header p { color: var(--color-text-muted); }
.section-header .eyebrow { color: var(--color-accent-text); }
/* One emphasised word per section heading (e.g. "What ArchLens Does") -
   --color-accent-text is the AA-compliant orange for text on light
   backgrounds; never use --color-accent for this. */
.accent-word { color: var(--color-accent-text); }

/* Faint blueprint line-art in the section corners, echoing the mockups'
   architectural-drawing backgrounds without raster artwork. Drawn as an
   inline SVG data URI so it costs no extra request; hidden on small
   screens where it would sit behind text. */
.section-plan { position: relative; overflow: hidden; }
.section-plan::before,
.section-plan::after {
  content: "";
  position: absolute;
  top: 0;
  width: 380px;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='380' fill='none' stroke='%23E18000' stroke-width='1'%3E%3Crect x='30' y='40' width='200' height='150'/%3E%3Crect x='230' y='40' width='120' height='90'/%3E%3Crect x='90' y='190' width='140' height='120'/%3E%3Cline x1='30' y1='190' x2='350' y2='190'/%3E%3Cline x1='30' y1='40' x2='30' y2='340'/%3E%3Cline x1='230' y1='130' x2='350' y2='130'/%3E%3Cline x1='160' y1='190' x2='160' y2='310'/%3E%3Ccircle cx='290' cy='250' r='40'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.1;
  pointer-events: none;
}
.section-plan::before { left: -120px; transform: scaleX(-1); }
.section-plan::after { right: -120px; }
.section-plan .container { position: relative; z-index: 1; }

/* Icon circle + separate numbered chip on one row (per the homepage mockups) */
.card-icon-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.card-icon-row .card-icon { margin-bottom: 0; }
.card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--font-size-sm);
}

/* Short accent rule under a card title */
.card-rule {
  width: 28px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-accent);
  margin: var(--space-2) 0 var(--space-3);
}

/* Compact reassurance row under a card grid (e.g. beneath pricing) */
.section-trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4) var(--space-7);
  margin-top: var(--space-6);
  list-style: none;
  padding: 0;
}
.section-trust-row li { display: flex; align-items: center; gap: var(--space-3); text-align: left; }
.section-trust-row .card-icon { width: 40px; height: 40px; margin-bottom: 0; }
/* Scoped to the text wrapper div for the same reason as .hero-stat above -
   the icon is also a span, and display:block would break its centering. */
.section-trust-row div strong { display: block; font-size: var(--font-size-sm); color: var(--color-text); }
.section-trust-row div span { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 2px; }

/* Small credit-pack price list inside the pricing card - values come from
   payments.credit_packs config, never hardcoded in the page. */
.price-list {
  margin-top: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
}
.price-list-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.price-list-row:last-child { border-bottom: none; }
.price-list-row .price { color: var(--color-accent-text); font-weight: 700; }

/* Icon badge atop a .card in a feature/benefit grid - same visual language
   as .hero-badge-icon/.hero-stat-icon so the sections below the hero read
   as one continuous system rather than a different page. */
.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  margin-bottom: var(--space-4);
}

/* Security & privacy strip: icon + label items instead of a single paragraph */
.security-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
  max-width: var(--container-max);
  margin: 0 auto;
  text-align: left;
}
.security-item { display: flex; gap: var(--space-3); align-items: flex-start; }
.security-item .card-icon { margin-bottom: 0; }
.security-item h3 { margin: 0 0 var(--space-1); font-size: var(--font-size-base); }
.security-item p { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* Dark section utility (CTA banners, and the footer below) */
.section-dark {
  background: var(--color-dark-bg);
  color: var(--color-dark-text-muted);
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--color-dark-text); }
.section-dark p { color: var(--color-dark-text-muted); }
.section-dark .text-muted { color: var(--color-dark-text-muted); }
.section-dark a:not(.btn) { color: var(--color-accent); }
.section-dark a:not(.btn):hover { color: var(--color-dark-text); }

.site-footer {
  background: var(--color-dark-bg);
  color: var(--color-dark-text-muted);
  padding: var(--space-7) 0 var(--space-6);
  font-size: var(--font-size-sm);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
.footer-grid h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--color-dark-text);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: var(--space-2); }
.footer-grid a { color: var(--color-dark-text-muted); text-decoration: none; }
.footer-grid a:hover { color: var(--color-accent); }
.footer-bottom {
  border-top: 1px solid var(--color-dark-border);
  padding-top: var(--space-5);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.public-header {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) 0;
}
.public-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.public-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.public-nav a:not(.btn) {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: 500;
}
.public-nav a:not(.btn):hover { color: var(--color-text); }

/* Marketing nav hamburger - hidden on desktop, shown <=720px (responsive.css) */
.public-nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--font-size-lg);
  padding: var(--space-2) var(--space-3);
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
}

/* Centring is the point here, so the wrong viewport height is visible as a
   card sitting off-centre - see the note on .app-shell. */
.auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-5);
}
.auth-card {
  width: 100%;
  max-width: 420px;
}
/* Column beside the sidebar holding topbar + main content on app pages */
.app-main {
  flex: 1;
  min-width: 0;
}

.auth-card .wordmark { display: block; margin-bottom: var(--space-5); }
.auth-card h1 { font-size: var(--font-size-xl); }
.auth-switch { text-align: center; margin-top: var(--space-5); }