/* Veil Docs Portal — page-level components (hero, cards, docs, forms).
   Extends tokens.css custom properties only, same hand-written convention as site.css. */

.container {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.section {
  padding: var(--space-8) 0;
}

.section--subtle {
  background: var(--color-bg-subtle);
}

.section-header {
  max-width: var(--prose-max-width);
  margin: 0 auto var(--space-7);
  text-align: center;
}

.section-header h2 {
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-3);
}

.section-header p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
  margin: 0;
}

/* ---- Hero ---- */

.hero {
  padding: var(--space-9) 0 var(--space-8);
}

.hero__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.hero h1 {
  font-size: var(--font-size-4xl);
  line-height: var(--line-height-tight);
  max-width: 22ch;
  margin: 0 0 var(--space-4);
}

.hero p {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  max-width: var(--prose-max-width);
  margin: 0 0 var(--space-6);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.btn--lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-base);
}

/* ---- Pillars (Home) ---- */

.pillar-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

.pillar-card {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.pillar-card__icon {
  width: 40px;
  height: 40px;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.pillar-card h3 {
  font-size: var(--font-size-lg);
  margin: 0 0 var(--space-2);
}

.pillar-card p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin: 0;
}

/* ---- Feature grid (Product) ---- */

.feature-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

.feature-card {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.feature-card h3 {
  font-size: var(--font-size-lg);
  margin: 0 0 var(--space-2);
  color: var(--color-accent-hover);
}

.feature-card p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin: 0;
}

.feature-card--core {
  border-color: var(--color-accent);
  background: var(--color-accent-subtle);
}

/* ---- Flow steps: numbered pipeline schematic (Home "How it works", Product "How a fault
   gets caught"). Stacks top-to-bottom on mobile (numbered circles already imply sequence);
   becomes a connected horizontal row with arrow dividers at tablet width and up. ---- */

.flow-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.flow-step {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.flow-step__num {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
}

.flow-step__body h3 {
  font-size: var(--font-size-lg);
  margin: 0 0 var(--space-2);
}

.flow-step__body p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin: 0;
}

.flow-step__arrow {
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--color-border);
  font-size: var(--font-size-2xl);
  line-height: 1;
}

@media (min-width: 768px) {
  .flow-steps {
    flex-direction: row;
    align-items: stretch;
  }

  .flow-step {
    flex-direction: column;
    flex: 1;
  }

  .flow-step__arrow {
    display: flex;
  }
}

/* ---- Mini steps: compact numbered list (Signup "what happens after you submit", Docs
   landing "getting access"). Smaller and simpler than .flow-steps — a short sequence
   explanation, not a product-pipeline diagram. ---- */

.mini-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mini-steps li {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
}

.mini-steps__num {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-accent-subtle);
  color: var(--color-accent-hover);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
}

.mini-steps p {
  margin: 0;
  color: var(--color-text-secondary);
}

.mini-steps strong {
  color: var(--color-text);
}

/* ---- Badges ---- */

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.badge--accent {
  background: var(--color-accent-subtle);
  color: var(--color-accent-hover);
}

.badge--muted {
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.badge--warning {
  background: #FBEFD9;
  color: var(--color-warning);
}

@media (prefers-color-scheme: dark) {
  .badge--warning {
    background: #2B2210;
  }
}

/* ---- Docs index ---- */

.docs-category {
  margin-bottom: var(--space-7);
}

.docs-category h2 {
  font-size: var(--font-size-xl);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.doc-card-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

.doc-card {
  display: block;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-fast);
}

.doc-card:hover {
  border-color: var(--color-accent);
}

.doc-card h3 {
  font-size: var(--font-size-base);
  margin: 0 0 var(--space-1);
  color: var(--color-text);
}

.doc-card p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ---- Doc detail (gated teaser) ---- */

.doc-detail-header {
  max-width: var(--prose-max-width);
  margin: 0 auto var(--space-6);
}

.doc-detail-header .breadcrumb {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.doc-detail-header h1 {
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
  margin: var(--space-2) 0 var(--space-3);
}

.doc-detail-header .doc-meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.doc-teaser {
  max-width: var(--prose-max-width);
  margin: 0 auto;
}

.doc-teaser__intro {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
}

.doc-teaser h2 {
  font-size: var(--font-size-base);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin: var(--space-6) 0 var(--space-3);
}

.doc-teaser ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.doc-teaser li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

.gate-box {
  margin-top: var(--space-7);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--color-border-strong);
  background: var(--color-bg-subtle);
  text-align: center;
}

.gate-box h2 {
  all: unset;
  display: block;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}

.gate-box p {
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4);
}

/* ---- Prose (blog post + doc body) ---- */

.prose {
  max-width: var(--prose-max-width);
  margin: 0 auto;
  line-height: var(--line-height-loose);
}

.prose > *:first-child {
  margin-top: 0;
}

/* Backstop against inline color/background styling that pasted-from-Word/Google-Docs content
   can carry (the real fix is a paste-time clipboard matcher in admin-content-editor.js, which
   keeps the stored HTML itself clean) — this is what stops any that already slipped through
   from rendering illegibly on the live public page and the admin Preview dialog, both of which
   share this .prose class with the blog editor's own .ql-editor styling. */
.prose [style*="color"],
.prose [style*="background"] {
  color: inherit !important;
  background: transparent !important;
}

.prose h1 {
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-4);
}

.prose h2 {
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
  margin: var(--space-7) 0 var(--space-3);
  scroll-margin-top: var(--space-6);
}

.prose h3 {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
  margin: var(--space-6) 0 var(--space-3);
  scroll-margin-top: var(--space-6);
}

.prose p {
  margin: 0 0 var(--space-4);
  color: var(--color-text-secondary);
}

.prose ul,
.prose ol {
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
}

.prose li {
  margin-bottom: var(--space-2);
}

.prose li > p {
  margin-bottom: var(--space-2);
}

.prose a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 0.15em;
}

.prose a:hover {
  text-decoration-color: currentColor;
}

.prose strong {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

/* Blockquote (in-body pull-quotes) and .prose__dek (the post excerpt, shown once as a lead-in
   above the body — see blog-detail.njk) share this look on purpose: both are a quoted/summary
   aside, not body copy. */
.prose blockquote,
.prose__dek {
  margin: var(--space-6) 0;
  padding: var(--space-1) 0 var(--space-1) var(--space-5);
  border-left: 3px solid var(--color-accent);
  color: var(--color-text-secondary);
  font-style: italic;
  font-size: var(--font-size-lg);
}

.prose__dek {
  margin: var(--space-4) 0 var(--space-6);
}

.prose blockquote > *:last-child {
  margin-bottom: 0;
}

.prose code {
  font-family: var(--font-family-mono);
  font-size: 0.875em;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.125em 0.375em;
}

.prose pre {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  overflow-x: auto;
  margin: 0 0 var(--space-4);
}

.prose pre code {
  background: none;
  border: none;
  padding: 0;
}

.prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  margin: var(--space-5) 0;
  display: block;
}

.prose hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-7) 0;
}

.prose__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: var(--space-2) 0 0;
}

/* ---- Blog ---- */

/* Card grid: 1 column on mobile, filling up to 3 columns at desktop widths — no fixed column
   count needed, minmax(280px, 1fr) does it. Fills the full .container width (unlike .prose's
   own single-column max-width), matching a real card-grid blog index rather than a list. */
.blog-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
}

.blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.blog-card__image {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-4);
  width: calc(100% + var(--space-5) * 2);
  max-width: none;
  display: block;
}

.blog-detail__image {
  width: 100%;
  max-height: 24rem;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
}

.blog-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.blog-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.blog-card h2 {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
  margin: var(--space-2) 0;
}

.blog-card__excerpt {
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4);
  flex: 1;
  /* Clamp to 3 lines so cards in the same row line up regardless of excerpt length. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__read-more {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  margin-top: auto;
}

.blog-card p {
  color: var(--color-text-secondary);
  margin: 0;
}

.empty-state {
  text-align: center;
  padding: var(--space-7) 0;
  color: var(--color-text-muted);
}

/* ---- Filter chips (Partners directory type filter) ---- */

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.filter-chip {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.filter-chip:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-hover);
}

.filter-chip[aria-pressed="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

/* ---- Partner cards (Partners directory) ---- */

.partner-card-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

.partner-card {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.partner-card__logo {
  display: block;
  max-width: 100%;
  max-height: 3rem;
  width: auto;
  margin-bottom: var(--space-3);
  object-fit: contain;
  object-position: left;
}

.partner-card h3 {
  font-size: var(--font-size-lg);
  margin: 0 0 var(--space-2);
}

.partner-card p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin: 0 0 var(--space-2);
}

.partner-card__description {
  line-height: var(--line-height-loose);
}

@media (min-width: 640px) {
  .partner-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- Downloads ---- */

.download-group {
  margin-bottom: var(--space-7);
}

.download-group h2 {
  font-size: var(--font-size-xl);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.download-card-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

.download-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.download-card h3 {
  font-size: var(--font-size-lg);
  margin: 0 0 var(--space-2);
}

.download-card__version {
  margin: 0 0 var(--space-3);
}

.download-card__notes {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin: 0 0 var(--space-4);
}

.download-card .btn {
  margin-top: auto;
}

@media (min-width: 640px) {
  .download-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- Search (/search/) ---- */

.search-box {
  position: relative;
  margin-bottom: var(--space-6);
}

.search-box input[type="search"] {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--font-size-lg);
  font-family: inherit;
}

.search-box input[type="search"]:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 1px;
}

.search-tip {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin: 0 0 var(--space-4);
}

.search-status {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin: 0 0 var(--space-5);
}

.search-result-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.search-result {
  display: block;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-fast);
}

.search-result:hover {
  border-color: var(--color-accent);
}

.search-result__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.search-result h3 {
  font-size: var(--font-size-base);
  margin: 0 0 var(--space-1);
  color: var(--color-text);
}

.search-result p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.search-result mark {
  background: var(--color-accent-dim, color-mix(in srgb, var(--color-accent) 25%, transparent));
  color: inherit;
  border-radius: 2px;
}

/* On-page highlight (search-highlight.js) — a search result's destination page carries the
   query as ?hl= and this wraps every matching word in the real content, not just the results
   list snippet above. A touch stronger than .search-result mark since it has to stand out
   inside a full paragraph of prose, not a two-line card. */
mark.search-highlight {
  background: var(--color-accent-dim, color-mix(in srgb, var(--color-accent) 35%, transparent));
  color: inherit;
  border-radius: 2px;
  padding: 0 0.15em;
  scroll-margin-top: var(--space-6);
}

/* ---- Auth forms (Login/Signup) ---- */

.auth-shell {
  max-width: 26rem;
  margin: var(--space-8) auto;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.auth-shell h1 {
  font-size: var(--font-size-2xl);
  margin: 0 0 var(--space-2);
}

.auth-shell > p {
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-6);
}

/* Account settings — same card treatment as .auth-shell but full-width within the page's own
   .container (matches every other real content page) instead of a narrow, isolated-looking
   floating box; a settings page benefits from breathing room .auth-shell's 26rem cap doesn't
   give, unlike login/signup which are deliberately kept narrow. */
.account-shell {
  max-width: 100%;
  margin: var(--space-8) auto;
  padding: var(--space-7);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.account-shell h1 {
  font-size: var(--font-size-2xl);
  margin: 0 0 var(--space-2);
}

.account-shell > p {
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-6);
}

.account-shell form {
  max-width: 32rem;
}

.account-shell hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-7) 0;
  max-width: 32rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--space-3);
}

.form-field {
  margin-bottom: var(--space-4);
}

.form-field label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-2);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--font-size-base);
  font-family: inherit;
}

.form-field textarea {
  resize: vertical;
  min-height: 8rem;
}

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 1px;
}

.avatar-upload {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}

.avatar-upload__preview {
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 1px solid var(--color-border);
  background: var(--color-accent);
  color: var(--color-on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.avatar-upload__controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.avatar-upload__progress {
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-bg-subtle);
  overflow: hidden;
  width: 10rem;
}

.avatar-upload__progress-bar {
  height: 100%;
  background: var(--color-accent);
  width: 0%;
  transition: width var(--transition-base);
}

/* ---- Licenses (Account page "My licenses" section) ---- */

.license-list {
  display: grid;
  gap: var(--space-4);
}

.license-card {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}

.license-card__heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.license-card__meta {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin: 0 0 var(--space-2);
}

.license-card__key-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.license-card__key {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: var(--font-size-sm);
  max-height: 4rem;
  overflow-y: auto;
  display: block;
}

.form-note {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}

/* .form-error existed as a className since the Phase 3 login page but was never actually
   styled anywhere — a real pre-existing gap, found and fixed while adding .form-success here. */
.form-error {
  font-size: var(--font-size-sm);
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}

.form-success {
  font-size: var(--font-size-sm);
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}

/* ---- Request-a-demo modal ---- */

.demo-modal {
  border: none;
  border-radius: var(--radius-lg);
  padding: 0;
  max-width: 34rem;
  width: calc(100% - var(--space-6));
  background: var(--color-surface);
  box-shadow: 0 24px 64px var(--color-shadow);
}

.demo-modal::backdrop {
  background: rgba(6, 16, 13, 0.6);
}

.demo-modal__inner {
  position: relative;
  padding: var(--space-6);
}

.demo-modal .auth-shell {
  max-width: none;
  margin: 0;
  padding: 0;
  border: none;
}

.demo-modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--font-size-xl);
  cursor: pointer;
  border-radius: var(--radius-sm);
  line-height: 1;
}

.demo-modal__close:hover {
  color: var(--color-text);
  background: var(--color-bg-subtle);
}

@media (min-width: 480px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

.btn--block {
  width: 100%;
}

.password-field {
  position: relative;
}

.password-field input {
  padding-right: var(--space-8);
}

.password-toggle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--space-8);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
}

.password-toggle:hover {
  color: var(--color-text);
}

.password-toggle__icon {
  width: 20px;
  height: 20px;
}

.auth-footer {
  margin-top: var(--space-5);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* ---- Company/Contact ---- */

.contact-card {
  max-width: var(--prose-max-width);
  margin: 0 auto;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.contact-card dt {
  font-weight: var(--font-weight-semibold);
  margin-top: var(--space-4);
}

.contact-card dd {
  margin: var(--space-1) 0 0;
  color: var(--color-text-secondary);
}

@media (min-width: 640px) {
  .pillar-grid,
  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .doc-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .hero h1 {
    font-size: clamp(2.5rem, 2rem + 3vw, 3.75rem);
  }
}