/* Shared page styles for subpages (pricing, compare, security, about, product, trial, demo, contact) */

.page-hero {
  padding: calc(var(--nav-height) + 96px) 0 72px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.page-hero .crumbs {
  display: flex; gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: 24px;
}
.page-hero .crumbs a { color: var(--color-text-secondary); }
.page-hero .crumbs a:hover { color: var(--color-brand-accent); }
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(44px, 6vw, 80px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 22px;
  max-width: 20ch;
}
.page-hero p.lede {
  font-size: 20px;
  color: var(--color-text-secondary);
  max-width: 640px;
  line-height: 1.55;
  margin: 0;
}
.page-hero .kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-brand-accent);
  margin-bottom: 20px;
}
.page-hero .kicker::before { content: ''; width: 24px; height: 1px; background: var(--color-brand-accent); display: inline-block; }

.prose {
  max-width: 720px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-text-primary);
}
.prose p { margin: 0 0 18px; color: var(--color-text-primary); }
.prose h2 {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 500;
  margin: 56px 0 18px;
  letter-spacing: -0.015em;
}
.prose h3 {
  font-size: 22px;
  font-weight: 600;
  margin: 36px 0 12px;
}
.prose ul, .prose ol { padding-left: 20px; color: var(--color-text-primary); }
.prose li { margin-bottom: 8px; }

/* Pricing table */
.pricing-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 32px;
}
.pricing-table th, .pricing-table td {
  text-align: left;
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-border);
  font-size: 15px;
}
.pricing-table th {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  background: var(--color-surface);
  font-weight: 500;
}
.pricing-table td.check { color: var(--color-success); font-weight: 500; }
.pricing-table td.x { color: var(--color-text-tertiary); }
.pricing-table .col-aew {
  background: rgba(217,72,78,0.04);
  border-left: 1px solid rgba(217,72,78,0.2);
  border-right: 1px solid rgba(217,72,78,0.2);
}
.pricing-table thead th.col-aew {
  color: var(--color-brand-accent);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: none;
  font-weight: 600;
}

.cta-band {
  background: var(--color-dark-bg);
  color: #fff;
  padding: 96px 0;
  text-align: center;
}
.cta-band h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.cta-band p { color: rgba(255,255,255,0.72); margin: 0 0 28px; font-size: 18px; }
.cta-band .btns { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* About page */
.about-split {
  display: grid;
  grid-template-columns: 460px 1fr;
  gap: 80px;
  align-items: flex-start;
}
@media (max-width: 960px) { .about-split { grid-template-columns: 1fr; gap: 48px; } }
.about-split .photo-frame { aspect-ratio: 4/5; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.about-split .photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 82%; transform: scale(1.25); transform-origin: 50% 70%; }
.founder-card-meta { margin-top: 18px; }
.fcm-name { font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.fcm-role { font-size: 13px; color: var(--color-text-secondary); font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px; }

/* Product mode cards (used on /product overview) */
.prod-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 820px) { .prod-grid { grid-template-columns: 1fr; } }
.prod-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 36px;
  background: var(--color-surface);
  transition: transform 280ms ease, box-shadow 280ms ease;
}
.prod-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.prod-card .pc-kind {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-brand-accent); margin-bottom: 16px;
}
.prod-card h3 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  margin: 0 0 12px;
  letter-spacing: -0.015em;
}
.prod-card p { color: var(--color-text-secondary); margin: 0 0 20px; line-height: 1.55; }
.prod-card .link-arrow { color: var(--color-brand-accent-dark); border-color: rgba(184,58,64,0.3); }

/* Form */
.form-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 40px;
  max-width: 560px;
  box-shadow: var(--shadow-md);
}
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  font-size: 15px;
  background: var(--color-bg);
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--color-brand-accent);
  box-shadow: 0 0 0 3px rgba(217,72,78,0.15);
  background: #fff;
}
.field textarea { min-height: 120px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }