/* =========================================================
   Aedificon A+ — design system (portal subset)
   Synced from Aedificon/Website src/styles/global.css on
   2026-06-01. Lines 1–[end of marketing block] are a verbatim
   copy of that file; if anything changes on the marketing side,
   re-sync wholesale rather than patching in place.

   The "Portal additions" block at the bottom holds extensions
   that have no equivalent on the marketing site (status tokens,
   form fields, dashboard layout, notice banners). Keep new
   portal-only rules there so future re-syncs don't clobber them.
   ========================================================= */
:root {
  /* surfaces */
  --bg:        oklch(0.13 0.005 240);
  --bg-2:      oklch(0.16 0.005 240);
  --surface:   oklch(0.19 0.005 240);
  --surface-2: oklch(0.23 0.006 240);
  --line:      oklch(0.30 0.006 240);
  --line-2:    oklch(0.40 0.006 240);

  /* text */
  --fg:        oklch(0.97 0.005 240);
  --fg-2:      oklch(0.82 0.005 240);
  --muted:     oklch(0.62 0.006 240);
  --dim:       oklch(0.46 0.006 240);

  /* accent — drafting amber/sand */
  --accent:    oklch(0.82 0.13 78);
  --accent-2:  oklch(0.72 0.13 78);
  --accent-fg: oklch(0.18 0.02 78);

  /* type */
  --sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --radius: 4px;
  --radius-lg: 8px;

  /* spacing rhythm */
  --gutter: clamp(20px, 4vw, 56px);
  --section-y: clamp(64px, 9vw, 128px);
  --max: 1320px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--fg);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: var(--accent-fg); }

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* =========================================================
   Type scale
   ========================================================= */
.eyebrow {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: "";
  width: 18px; height: 1px;
  background: var(--line-2);
  display: inline-block;
}
h1, h2, h3, h4 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(40px, 7vw, 88px); line-height: 0.98; letter-spacing: -0.035em; }
h2 { font-size: clamp(30px, 4.6vw, 56px); line-height: 1.02; letter-spacing: -0.028em; }
h3 { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.18; letter-spacing: -0.018em; }
h4 { font-size: 16px; line-height: 1.3; }
p  { margin: 0; color: var(--fg-2); text-wrap: pretty; }
.lead { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: var(--fg-2); max-width: 60ch; }
.mono { font-family: var(--mono); }
.tnum { font-variant-numeric: tabular-nums; }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; padding: 0 22px;
  font: 500 14.5px/1 var(--sans);
  letter-spacing: -0.005em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--surface); border-color: var(--fg-2); }
.btn-light { background: var(--fg); color: var(--bg); }
.btn-light:hover { background: var(--fg-2); }
.btn-sm { height: 38px; padding: 0 16px; font-size: 13.5px; }
.btn-lg { height: 54px; padding: 0 28px; font-size: 15.5px; }
.btn .arrow { display: inline-block; transition: transform 200ms ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* =========================================================
   Header / nav
   ========================================================= */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid color-mix(in oklab, var(--line) 60%, transparent);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-wordmark img {
  height: 34px; width: auto; display: block;
  /* The logo PNG has a black background — drop it on dark surfaces */
  mix-blend-mode: screen;
}
.footer .brand-wordmark img { height: 30px; }

.nav-links {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px;
}
.nav-links a {
  padding: 8px 14px; border-radius: 4px;
  color: var(--fg-2);
  transition: color 140ms ease, background 140ms ease;
}
.nav-links a:hover { color: var(--fg); background: var(--surface); }
.nav-links a.active { color: var(--fg); }

.nav-cta { display: flex; align-items: center; gap: 10px; }

/* CSS-only mobile menu toggle. The checkbox is visually hidden but receives
   the toggle from clicks on the associated <label class="nav-burger">. The
   :checked ~ .mobile-menu selector flips the menu visible without any JS,
   so the menu works even if React hydration is delayed or fails. */
.nav-menu-toggle {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nav-burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: 4px;
  background: transparent; color: var(--fg); cursor: pointer;
  align-items: center; justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
/* Ensure the inner SVG never intercepts taps (iOS Safari quirk). */
.nav-burger svg { pointer-events: none; }
.nav-burger:hover { background: var(--surface); }
.nav-burger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 960px) {
  .nav-links { display: none; }
  .nav-cta .btn-ghost,
  .nav-cta .btn-primary { display: none; }
  .nav-burger { display: inline-flex; }
}

.mobile-menu {
  display: none;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.nav-menu-toggle:checked ~ .mobile-menu { display: block; }
.mobile-menu .container { padding-block: 14px 22px; }
.mobile-menu a {
  display: block; padding: 12px 4px;
  border-bottom: 1px solid var(--line);
  color: var(--fg-2);
}
.mobile-menu a:last-of-type { border-bottom: 0; }
.mobile-menu .btn { width: 100%; margin-top: 12px; }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex; align-items: flex-end;
  padding-top: 80px; padding-bottom: clamp(40px, 6vw, 80px);
  overflow: hidden;
  isolation: isolate;
}
.hero-bg {
  position: absolute; inset: 0; z-index: -2;
  background: #000 center/cover no-repeat;
}
.hero-bg picture { display: block; width: 100%; height: 100%; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.92; }
.hero-overlay {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--bg) 60%, transparent) 0%, transparent 30%, color-mix(in oklab, var(--bg) 92%, transparent) 100%),
    linear-gradient(90deg, color-mix(in oklab, var(--bg) 65%, transparent) 0%, transparent 60%);
}
.hero-grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--fg) 7%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--fg) 7%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
}
.hero-inner { width: 100%; }
.hero-eyebrow {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 28px;
}
.hero-eyebrow::before {
  content: ""; width: 24px; height: 1px; background: var(--accent);
}
.hero h1 { max-width: 14ch; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-lead {
  margin-top: 28px; max-width: 50ch;
  font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55;
  color: var(--fg);
}
.hero-cta { margin-top: 40px; display: flex; gap: 12px; flex-wrap: wrap; }

.hero-meta {
  margin-top: 56px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 880px;
}
.hero-meta-item {
  background: color-mix(in oklab, var(--bg) 75%, transparent);
  padding: 18px 20px;
  backdrop-filter: blur(6px);
}
.hero-meta-item .k { font: 500 10.5px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.hero-meta-item .v { margin-top: 6px; font-size: 15px; font-weight: 500; }
@media (max-width: 720px) {
  .hero-meta { grid-template-columns: repeat(2, 1fr); }
}

/* corner crosshairs (drafting accents) */
.hero-corners::before, .hero-corners::after,
.hero-corners > i:first-child::before, .hero-corners > i:first-child::after {
  content: ""; position: absolute; width: 22px; height: 22px;
  border-color: var(--accent); border-style: solid; border-width: 0;
  z-index: 2;
}
.hero-corners::before { top: 92px; left: var(--gutter); border-top-width: 1px; border-left-width: 1px; }
.hero-corners::after  { top: 92px; right: var(--gutter); border-top-width: 1px; border-right-width: 1px; }
.hero-corners > i:first-child::before { bottom: 24px; left: var(--gutter); border-bottom-width: 1px; border-left-width: 1px; }
.hero-corners > i:first-child::after  { bottom: 24px; right: var(--gutter); border-bottom-width: 1px; border-right-width: 1px; }

/* =========================================================
   Sections
   ========================================================= */
.section { padding-block: var(--section-y); position: relative; }
.section-head {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: clamp(20px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(40px, 6vw, 72px);
}
.section-head .lead { margin-top: 16px; }
@media (max-width: 820px) {
  .section-head { grid-template-columns: 1fr; }
}

/* feature grid */
.features {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* Boxed modifier — wraps the grid in a rounded outline used on
   sub-page card grids (Features, Download "After install",
   Support self-service). Replaces a repeated inline-style block. */
.features.bordered {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.feature {
  background: var(--bg);
  padding: 36px 32px 40px;
  grid-column: span 6;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 260px;
  transition: background 200ms ease;
}
.feature:hover { background: var(--bg-2); }
.feature .num { font: 500 11px/1 var(--mono); letter-spacing: 0.18em; color: var(--accent); }
.feature h3 { max-width: 18ch; }
.feature p { color: var(--muted); font-size: 14.5px; line-height: 1.55; max-width: 36ch; }

@media (min-width: 980px) {
  .feature { grid-column: span 3; }
}
@media (min-width: 1180px) {
  .feature.feature-wide { grid-column: span 6; }
}

/* workflow */
.workflow {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.workflow-step { background: var(--bg-2); padding: 40px; min-height: 380px; display: flex; flex-direction: column; }
.workflow-step .step-num {
  font: 500 12px/1 var(--mono); letter-spacing: 0.18em;
  color: var(--accent); margin-bottom: 18px;
}
.workflow-step h3 { font-size: clamp(22px, 2.4vw, 30px); margin-bottom: 12px; }
.workflow-step p { color: var(--fg-2); font-size: 15px; max-width: 38ch; }
.workflow-art {
  margin-top: auto; padding-top: 32px;
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  display: flex; flex-direction: column; gap: 6px;
}
.workflow-art .line { display: flex; gap: 10px; }
.workflow-art .tag { color: var(--accent); }
@media (max-width: 820px) {
  .workflow { grid-template-columns: 1fr; }
}

/* drafting placeholder */
.drafting-placeholder {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, color-mix(in oklab, var(--fg) 4%, transparent) 11px 12px),
    var(--bg-2);
  aspect-ratio: 16/10;
  display: grid; place-items: center;
  color: var(--muted);
  font-family: var(--mono); font-size: 11.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  overflow: hidden;
}
.drafting-placeholder::before, .drafting-placeholder::after {
  content: ""; position: absolute; pointer-events: none;
}
.drafting-placeholder::before {
  inset: 14px;
  border: 1px dashed color-mix(in oklab, var(--fg) 16%, transparent);
}
.drafting-placeholder .label {
  background: var(--bg);
  padding: 6px 10px; border: 1px solid var(--line);
  position: relative; z-index: 1;
}

/* =========================================================
   Pricing
   ========================================================= */
.pricing-toggle {
  display: inline-flex; align-items: center; gap: 0;
  border: 1px solid var(--line); border-radius: 6px;
  padding: 4px; background: var(--bg-2);
}
.pricing-toggle button {
  background: transparent; color: var(--fg-2);
  border: 0; padding: 8px 16px; border-radius: 4px;
  font: 500 13px/1 var(--sans); cursor: pointer;
}
.pricing-toggle button.active { background: var(--surface); color: var(--fg); }

.pricing-grid {
  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;
}
@media (max-width: 1100px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .pricing-grid { grid-template-columns: 1fr; } }

.plan {
  background: var(--bg-2);
  padding: 32px 28px 36px;
  display: flex; flex-direction: column;
  position: relative;
  min-height: 520px;
}
.plan.featured { background: var(--surface); }
.plan-badge {
  position: absolute; top: 16px; right: 16px;
  font: 500 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-fg); background: var(--accent);
  padding: 6px 8px; border-radius: 3px;
}
.plan-name { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.plan-tag { color: var(--muted); font-size: 13px; margin-top: 4px; }
.plan-price {
  margin-top: 26px;
  display: flex; align-items: baseline; gap: 8px;
}
.plan-price .amount {
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(40px, 4vw, 52px); letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.plan-price .unit { font-size: 14px; color: var(--muted); }
.plan-billing { margin-top: 4px; font: 500 12px/1.4 var(--mono); color: var(--muted); letter-spacing: 0.04em; }

/* Animated "Save X%" badge on the pricing grid — its own row beneath
   .plan-billing. Gradient sweeps across the text; falls back to a static
   accent colour when reduced motion is set. */
.plan-save {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: linear-gradient(
    100deg,
    var(--accent) 35%,
    var(--fg) 50%,
    var(--accent) 65%
  );
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: plan-save-shimmer 3.2s linear infinite;
}
@keyframes plan-save-shimmer {
  to { background-position: -220% center; }
}
@media (prefers-reduced-motion: reduce) {
  .plan-save { animation: none; color: var(--accent); -webkit-text-fill-color: var(--accent); }
}

.plan-features { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 12px; }
.plan-features li {
  font-size: 14px; color: var(--fg-2);
  display: flex; gap: 12px; align-items: flex-start;
}
.plan-features li::before {
  content: "+"; color: var(--accent); font-family: var(--mono);
  font-weight: 500; flex-shrink: 0; line-height: 1.4;
}
.plan-cta { margin-top: auto; padding-top: 28px; }
.plan-cta .btn { width: 100%; }

/* =========================================================
   FAQ
   ========================================================= */
.faq {
  border-top: 1px solid var(--line);
}
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}
.faq summary {
  list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  cursor: pointer;
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .toggle {
  width: 28px; height: 28px; border: 1px solid var(--line-2); border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 16px; color: var(--fg-2);
  transition: transform 200ms ease, border-color 200ms ease, color 200ms ease;
  flex-shrink: 0;
}
.faq details[open] summary .toggle { transform: rotate(45deg); border-color: var(--accent); color: var(--accent); }
.faq .answer { padding-top: 16px; color: var(--fg-2); max-width: 75ch; font-size: 15px; }

/* =========================================================
   Big CTA strip
   ========================================================= */
.cta-strip {
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(70px, 9vw, 130px);
  background:
    radial-gradient(800px 300px at 75% 50%, color-mix(in oklab, var(--accent) 8%, transparent), transparent 70%),
    var(--bg-2);
}
.cta-strip h2 { max-width: 18ch; }
.cta-strip .row {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 48px; align-items: end;
}
.cta-strip .row .actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 820px) {
  .cta-strip .row { grid-template-columns: 1fr; }
  .cta-strip .row .actions { justify-content: flex-start; }
}

/* =========================================================
   Footer
   ========================================================= */
.footer {
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding-block: 64px 32px;
}
.footer-grid {
  display: grid; grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 40px;
}
.footer-brand .brand { margin-bottom: 18px; }
.footer-brand p { font-size: 13.5px; color: var(--muted); max-width: 30ch; }
.footer-col h5 {
  font: 500 11px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 16px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--fg-2); font-size: 14px; }
.footer-col a:hover { color: var(--fg); }
.footer-bottom {
  margin-top: 56px; padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font: 500 11.5px/1.4 var(--mono); letter-spacing: 0.06em; color: var(--muted);
}
@media (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 580px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Page hero (sub pages)
   ========================================================= */
.page-head {
  padding-top: 80px; padding-bottom: 56px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, var(--bg-2), var(--bg));
}
.page-head h1 { font-size: clamp(40px, 6vw, 72px); max-width: 18ch; }
.page-head .lead { margin-top: 18px; }
.page-head .crumbs {
  font: 500 11px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 24px;
  display: flex; gap: 12px; align-items: center;
}
.page-head .crumbs a:hover { color: var(--fg); }
.page-head .crumbs .sep { color: var(--dim); }

/* =========================================================
   Markdown / policy pages
   ========================================================= */
.policy-layout {
  display: grid; grid-template-columns: 240px 1fr;
  gap: 56px;
  padding-block: 64px;
}
@media (max-width: 980px) { .policy-layout { grid-template-columns: 1fr; gap: 24px; } }
.policy-toc {
  position: sticky; top: 90px; align-self: start;
  font-size: 13px;
  max-height: calc(100vh - 110px); overflow-y: auto;
}
.policy-toc h5 {
  font: 500 11px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 14px;
}
.policy-toc ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.policy-toc a {
  color: var(--fg-2);
  display: block; padding: 6px 10px; border-radius: 3px;
  border-left: 1px solid var(--line);
}
.policy-toc a:hover { color: var(--fg); border-left-color: var(--accent); }
@media (max-width: 980px) { .policy-toc { position: static; max-height: none; display: none; } }

.markdown {
  font-size: 15.5px; line-height: 1.7;
  color: var(--fg-2);
  max-width: 75ch;
}
.markdown h1, .markdown h2, .markdown h3, .markdown h4 { color: var(--fg); margin-top: 2.2em; margin-bottom: 0.6em; }
.markdown h1 { font-size: clamp(28px, 3vw, 38px); margin-top: 0; }
.markdown h2 { font-size: clamp(22px, 2.4vw, 28px); border-top: 1px solid var(--line); padding-top: 1.4em; }
.markdown h3 { font-size: 18px; }
.markdown h4 { font-size: 15px; }
.markdown p { margin: 1em 0; color: var(--fg-2); }
.markdown ul, .markdown ol { margin: 1em 0; padding-left: 1.4em; }
.markdown li { margin: 0.4em 0; }
.markdown a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--accent) 40%, transparent); text-underline-offset: 3px; }
.markdown a:hover { text-decoration-color: var(--accent); }
.markdown code {
  font-family: var(--mono); font-size: 0.9em;
  background: var(--surface); padding: 2px 6px; border-radius: 3px;
  color: var(--fg);
}
.markdown blockquote {
  border-left: 2px solid var(--accent);
  padding: 6px 18px;
  margin: 1.4em 0;
  background: var(--bg-2);
  color: var(--fg-2);
}
.markdown blockquote p { margin: 0.4em 0; }
.markdown table {
  width: 100%; border-collapse: collapse; margin: 1.4em 0;
  font-size: 14px;
}
.markdown th, .markdown td {
  border: 1px solid var(--line);
  padding: 10px 14px; text-align: left;
  vertical-align: top;
}
.markdown th { background: var(--surface); color: var(--fg); font-weight: 600; }
.markdown hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.markdown strong { color: var(--fg); font-weight: 600; }

/* =========================================================
   Misc
   ========================================================= */
.kbd {
  display: inline-block; font-family: var(--mono); font-size: 11px;
  border: 1px solid var(--line-2); border-radius: 3px;
  padding: 2px 6px; color: var(--fg-2);
  background: var(--surface);
}
.tag {
  font: 500 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 3px;
  display: inline-flex; align-items: center; gap: 8px;
}
.tag .dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }

/* support / contact */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.contact-cell { background: var(--bg-2); padding: 32px 28px; display: flex; flex-direction: column; gap: 10px; }
.contact-cell h4 { font-size: 16px; }
.contact-cell .email { font-family: var(--mono); font-size: 14px; color: var(--accent); }
.contact-cell p { font-size: 13.5px; color: var(--muted); }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

/* download */
.download-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  background: var(--bg-2);
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 40px; align-items: center;
}
@media (max-width: 820px) { .download-card { grid-template-columns: 1fr; padding: 28px; } }
.download-meta {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  display: grid; grid-template-columns: auto 1fr; gap: 6px 18px;
}
.download-meta dt { color: var(--accent); }
.download-meta dd { margin: 0; color: var(--fg-2); }

/* about */
.about-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.about-stat { background: var(--bg-2); padding: 28px; }
.about-stat .v { font-size: clamp(28px, 3vw, 40px); font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.about-stat .k { font: 500 11px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
@media (max-width: 820px) { .about-stats { grid-template-columns: repeat(2, 1fr); } }

/* small reveal — opacity stays 1 so content is always visible even if animation is throttled */
@keyframes fadeUp { from { transform: translateY(12px); } to { transform: none; } }
.reveal { animation: fadeUp 600ms ease both; }
.reveal-1 { animation-delay: 60ms; }
.reveal-2 { animation-delay: 140ms; }
.reveal-3 { animation-delay: 220ms; }
.reveal-4 { animation-delay: 320ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; transform: none; }
}

/* utility */
.hide-mobile { }
.hide-desktop { display: none; }
@media (max-width: 720px) {
  .hide-mobile { display: none; }
  .hide-desktop { display: block; }
}

/* =========================================================
   PORTAL ADDITIONS — extensions that have no equivalent on
   the marketing site. Keep these isolated from the canonical
   block above so a future re-sync of the marketing CSS can
   replace lines 1–[last marketing line] wholesale without
   touching the portal-only rules below.
   ========================================================= */

/* extra semantic tokens for status / notice styling */
:root {
  --ok:    oklch(0.78 0.12 145);
  --warn:  oklch(0.82 0.13 78);
  --error: oklch(0.65 0.20 25);
}

/* opt-in tighter h1 for sub-pages that aren't display headings
   (dashboards, account, etc.). Pricing + other marketing-equivalent
   pages should NOT use this — they should keep the marketing
   .page-head h1 sizing so the two sites look identical. */
h1.page-title { font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -0.025em; }

/* button extensions */
.btn-danger { background: var(--error); color: var(--fg); border-color: var(--error); }
.btn[disabled], .btn.is-disabled { opacity: 0.45; cursor: not-allowed; }

/* tag colour variants — status chips on dashboard / admin pages */
.tag.tag-ok    .dot { background: var(--ok); }
.tag.tag-warn  .dot { background: var(--warn); }
.tag.tag-error .dot { background: var(--error); }

/* forms */
.field {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 18px;
}
.field label {
  font: 500 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.field input,
.field select,
.field textarea {
  font-family: var(--sans); font-size: 15px;
  color: var(--fg);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  transition: border-color 140ms ease, background 140ms ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg);
}
.field .help { font-size: 12.5px; color: var(--muted); }
.field .error { font-size: 12.5px; color: var(--error); }
.field[aria-invalid="true"] input,
.field[aria-invalid="true"] select { border-color: var(--error); }

.form-actions {
  display: flex; gap: 12px; align-items: center;
  margin-top: 24px;
}

/* card surface — dashboard panels */
.card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.card h3 { margin-bottom: 14px; }
.card .card-meta {
  font: 500 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}

/* data tables */
.data-table {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  font-size: 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.data-table th,
.data-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.data-table th {
  background: var(--surface);
  font: 500 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.data-table tr:last-child td { border-bottom: 0; }
.data-table tr:hover td { background: color-mix(in oklab, var(--surface) 35%, transparent); }
.data-table .actions { text-align: right; white-space: nowrap; }

/* dashboard layout — sidebar + content */
.dash-layout {
  display: grid; grid-template-columns: 240px 1fr;
  gap: 56px;
  padding-block: 56px;
}
.dash-sidebar {
  position: sticky; top: 88px; align-self: start;
}
.dash-sidebar h5 {
  font: 500 11px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 14px;
}
.dash-sidebar ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.dash-sidebar a {
  display: block; padding: 8px 12px; border-radius: 4px;
  color: var(--fg-2); font-size: 14px;
  border-left: 2px solid transparent;
}
.dash-sidebar a:hover { color: var(--fg); background: var(--surface); }
.dash-sidebar a.active {
  color: var(--fg); border-left-color: var(--accent);
  background: var(--surface);
}
@media (max-width: 820px) {
  .dash-layout { grid-template-columns: 1fr; gap: 24px; padding-block: 32px; }
  .dash-sidebar { position: static; }
}

/* notice / banner strip */
.notice {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  padding: 14px 18px;
  font-size: 14px;
  color: var(--fg-2);
  display: flex; gap: 12px; align-items: flex-start;
}
.notice.notice-warn   { border-color: var(--warn); }
.notice.notice-error  { border-color: var(--error); }
.notice.notice-ok     { border-color: var(--ok); }
.notice strong { color: var(--fg); }