/* ====================================================================
   Site theme — dark platform aesthetic
   Colours are defined as CSS variables in section 1 below: edit --accent
   and the --bg-* values to rebrand the entire site.

   That sentence used not to be true. Twelve rules further down carried the
   old indigo/cyan as literal rgba(99,102,241,…) / rgba(34,211,238,…) — tinted
   card washes, the hero's ambient blooms, the secondary button's hover — so
   changing --accent recoloured the links and the buttons and left the washes
   behind, indigo, on an amber page. Those literals are now
   rgba(var(--accent-rgb), a) and rgba(var(--accent-2-rgb), a), which is why
   the two *-rgb tokens exist: CSS cannot decompose a hex into channels, so a
   colour that is needed at partial opacity has to be declared twice. Change a
   hex below and change its -rgb partner in the same edit.
   ==================================================================== */

/* ====================================================================
   1. CSS VARIABLES
   ==================================================================== */

:root {
  --bg-primary: #0a0a0f;
  --bg-secondary: #12121a;
  --bg-tertiary: #1a1a2e;
  --bg-hover: #1f1f35;

  /* ExaBusiness amber. The sister sites on this theme are indigo (Exa Fleet)
     and ExaCollab's own; the accent is the only thing that tells them apart at
     a glance, so it is the one value a rebrand must change.

     THE MARK IS GREEN AND THAT IS DELIBERATE. images/favicon.svg — which is
     both the favicon and the navbar mark — is a green tile, not amber. It is
     the one place on the site that is not this accent, and it is a decision
     rather than an oversight: a green tile is findable in a tab strip of blue
     ones, where an amber one competes with every other warm favicon.

     So do NOT "fix" the inconsistency by recolouring either one to match the
     other. If you want them unified, that is a brand decision to take
     deliberately, and it means changing five tokens here AND the two greens in
     the SVG — not quietly editing whichever file you happened to open. */
  --accent: #ffc107;
  --accent-secondary: #ffd75e;
  --accent-tertiary: #f59e0b;

  /* Channel copies of the three above, for rgba() washes. See the note at the
     top of this file. */
  --accent-rgb: 255,193,7;
  --accent-2-rgb: 255,215,94;

  /* Text and icons sitting ON an accent-filled surface. The theme shipped
     `color: white` on .btn-primary, which was legible on indigo and is not on
     amber — white on #ffc107 is about 1.9:1, under half the 4.5:1 floor. Every
     filled-accent surface reads this token instead of naming a colour. */
  --accent-on: #171203;

  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-tertiary: #64748b;

  --border: #2d2d44;
  --border-light: #3d3d54;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.6);

  --glow-accent: 0 0 20px rgba(var(--accent-rgb),0.28);
  --glow-accent-strong: 0 0 30px rgba(var(--accent-rgb),0.45);

  --transition-fast: 150ms ease-in-out;
  --transition-base: 300ms ease-in-out;
}

/* ====================================================================
   2. RESET & BASE
   ==================================================================== */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ====================================================================
   3. TYPOGRAPHY
   ==================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

h1 { font-size: 3rem; margin-bottom: 1.5rem; }
h2 { font-size: 2.25rem; margin-bottom: 1.5rem; }
h3 { font-size: 1.5rem; margin-bottom: 1rem; }
h4 { font-size: 1.25rem; margin-bottom: 0.75rem; }

p {
  margin-bottom: 1rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover { color: var(--accent-secondary); }

strong { font-weight: 600; color: var(--text-primary); }

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-secondary);
  color: var(--accent-secondary);
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

pre {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  overflow-x: auto;
}

pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--text-primary);
  font-size: 0.875rem;
}

ul, ol {
  margin-bottom: 1.5rem;
  padding-left: 2rem;
}

li {
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

li strong { color: var(--text-primary); }

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
}

table thead {
  background: var(--bg-secondary);
  border-bottom: 2px solid var(--border-light);
}

table thead th {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--text-primary);
}

table tbody td {
  padding: 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}

table tbody tr:hover { background: var(--bg-secondary); }

blockquote {
  border-left: 4px solid var(--accent);
  padding-left: 1.5rem;
  margin: 0 0 1.5rem 0;
  color: var(--text-secondary);
  font-style: italic;
}

/* ====================================================================
   4. NAVIGATION — nav.nav
   ==================================================================== */

nav.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
  background: rgba(10, 10, 15, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

nav.nav.scrolled {
  background: rgba(10, 10, 15, 0.98);
}

.nav-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  height: 70px;
}

/* The mark next to the wordmark, shown when params.logo_image is set in
   hugo.toml. partials/header.html has always emitted this class and the theme
   has never styled it — so setting logo_image rendered the file at its natural
   size and pushed the navbar apart. Sized in em so it tracks the wordmark if
   the brand font size changes. */
.nav-brand .logo-image {
  height: 1.55em;
  width: auto;
  display: block;
  flex: none;
}

.nav-brand .logo {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-brand .logo:hover {
  opacity: 0.85;
}

/* Nav menu */
.nav-menu {
  display: flex;
  list-style: none;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

.nav-item {
  position: relative;
  margin: 0;
}

.nav-link {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color var(--transition-fast);
}

.nav-link:hover {
  color: var(--text-primary);
}

/* Dropdown toggle */
.dropdown-toggle::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.4rem;
  vertical-align: middle;
  border-top: 4px solid currentColor;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  transition: transform var(--transition-fast);
}

.dropdown:hover .dropdown-toggle::after {
  transform: rotate(180deg);
}

/* Dropdown menu */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  min-width: 220px;
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
  box-shadow: var(--shadow-lg);
  z-index: 100;
}

.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu li {
  margin: 0;
}

.dropdown-menu a {
  display: block;
  padding: 0.6rem 1.25rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
  transition: all var(--transition-fast);
}

.dropdown-menu a:hover {
  background: var(--bg-tertiary);
  color: var(--accent-secondary);
  padding-left: 1.5rem;
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  flex-direction: column;
  gap: 5px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: all var(--transition-fast);
}

.nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ====================================================================
   5. BUTTONS
   ==================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-lg);
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
  gap: 0.5rem;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-tertiary));
  color: var(--accent-on);
  box-shadow: var(--glow-accent);
}

.btn-primary:hover {
  box-shadow: var(--glow-accent-strong);
  transform: translateY(-2px);
  color: var(--accent-on);
}

.btn-secondary {
  background: transparent;
  color: var(--accent-secondary);
  border: 2px solid var(--accent-secondary);
}

.btn-secondary:hover {
  background: rgba(var(--accent-2-rgb), 0.1);
  box-shadow: 0 0 20px rgba(var(--accent-2-rgb), 0.3);
  transform: translateY(-2px);
  color: var(--accent-secondary);
}

.btn-lg {
  padding: 1rem 2.5rem;
  font-size: 1rem;
}

/* ====================================================================
   6. HERO SECTION
   ==================================================================== */

.hero {
  margin-top: 70px;
  padding: 6rem 2rem;
  min-height: calc(100vh - 70px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(var(--accent-rgb),0.12), transparent);
  border-radius: 50%;
  z-index: 0;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: -20%;
  left: 5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(var(--accent-2-rgb),0.08), transparent);
  border-radius: 50%;
  z-index: 0;
}

.hero-content {
  text-align: center;
  max-width: 900px;
  position: relative;
  z-index: 1;
}

.hero-title {
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  font-weight: 800;
  background: linear-gradient(135deg, var(--text-primary) 30%, var(--accent-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.5rem;
  line-height: 1.1;
}

.hero-subtitle {
  font-size: 1.3rem;
  color: var(--text-secondary);
  margin-bottom: 2.5rem;
  line-height: 1.7;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ====================================================================
   7. REPLACES SECTION
   ==================================================================== */

.replaces-section {
  padding: 4rem 2rem;
  text-align: center;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.replaces-section h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 2rem;
}

.tool-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  max-width: 800px;
  margin: 0 auto;
}

.badge {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  transition: all var(--transition-base);
}

.badge:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(var(--accent-rgb),0.1);
}

/* ====================================================================
   8. FEATURE GRID (homepage + features list)
   ==================================================================== */

.features {
  padding: 6rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.features > h2 {
  text-align: center;
  margin-bottom: 3rem;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.feature-grid-large {
  grid-template-columns: repeat(3, 1fr);
}

.feature-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2rem;
  transition: all var(--transition-base);
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.feature-card:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent);
  box-shadow: var(--glow-accent);
  transform: translateY(-4px);
  color: inherit;
}

.feature-card-large {
  padding: 2.5rem;
}

.feature-icon {
  width: 56px;
  height: 56px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  border: 1px solid var(--border-light);
  transition: all var(--transition-base);
  color: var(--accent);
}

.feature-card:hover .feature-icon {
  background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
  border-color: var(--accent);
  color: var(--accent-on);
}

.feature-card h3 {
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
}

.feature-card p {
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 1rem;
  flex: 1;
}

.feature-link {
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 600;
  transition: color var(--transition-fast);
}

.feature-card:hover .feature-link {
  color: var(--accent-secondary);
}

/* ====================================================================
   9. SCALE / STATS SECTION
   ==================================================================== */

.scale-section {
  padding: 6rem 2rem;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
}

.scale-section > h2 {
  margin-bottom: 3rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.stat-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2.5rem 2rem;
  transition: all var(--transition-base);
}

.stat-card:hover {
  border-color: var(--accent);
  box-shadow: var(--glow-accent);
  transform: translateY(-2px);
}

.stat-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  color: var(--accent-secondary);
}

.stat-card p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0;
}

/* ====================================================================
   10. DOWNLOAD CTA
   ==================================================================== */

.download-cta {
  padding: 6rem 2rem;
  text-align: center;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.06), rgba(var(--accent-2-rgb),0.04));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.download-cta h2 {
  margin-bottom: 1rem;
}

.download-cta p {
  font-size: 1.15rem;
  max-width: 600px;
  margin: 0 auto 2.5rem;
}

/* ====================================================================
   11. FEATURE DETAIL PAGES
   ==================================================================== */

.feature-detail-page {
  margin-top: 70px;
  padding: 3rem 2rem 6rem;
}

.feature-detail-container {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 3rem;
  max-width: 1400px;
  margin: 0 auto;
}

/* Sidebar */
.feature-sidebar {
  position: sticky;
  top: 100px;
  height: fit-content;
}

.feature-sidebar .feature-nav h3 {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
  padding-left: 1rem;
}

.feature-sidebar .feature-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.feature-sidebar .feature-nav li {
  margin: 0;
}

.feature-sidebar .feature-nav a {
  display: block;
  padding: 0.6rem 1rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
  border-radius: var(--radius-md);
  border-left: 3px solid transparent;
  transition: all var(--transition-fast);
}

.feature-sidebar .feature-nav a:hover {
  background: var(--bg-secondary);
  color: var(--accent-secondary);
  border-left-color: var(--accent-secondary);
}

.feature-sidebar .feature-nav a.active {
  background: rgba(var(--accent-rgb),0.1);
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 600;
}

/* Feature content area */
.feature-content {
  min-width: 0;
}

.feature-header {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}

.feature-header-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-header-icon svg {
  display: block;
}

.feature-header-text h1 {
  font-size: 2.25rem;
  margin-bottom: 0.5rem;
}

.feature-description {
  font-size: 1.1rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
}

/* Feature article body */
.feature-article {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
}

.feature-article > p:first-child {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 2rem;
}

.feature-article h2 {
  font-size: 1.5rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  position: relative;
  padding-bottom: 0.75rem;
}

.feature-article h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-secondary));
  border-radius: var(--radius-full);
}

.feature-article h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.feature-article h3 {
  font-size: 1.15rem;
  margin-top: 1.5rem;
  color: var(--accent-secondary);
}

/* Prev/Next navigation */
.feature-nav-bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  gap: 1rem;
}

.feature-nav-bottom a {
  display: flex;
  flex-direction: column;
  padding: 1rem 1.5rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
  text-decoration: none;
  min-width: 160px;
}

.feature-nav-bottom a:hover {
  border-color: var(--accent);
  box-shadow: var(--glow-accent);
}

.nav-prev { align-items: flex-start; }
.nav-next { align-items: flex-end; margin-left: auto; }

.nav-label {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.nav-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
}

/* ====================================================================
   12. FEATURES LIST PAGE
   ==================================================================== */

.features-list-page {
  margin-top: 70px;
  padding: 4rem 2rem 6rem;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* ====================================================================
   13. PAGE HEADER
   ==================================================================== */

.page-header {
  text-align: center;
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}

.page-header h1 {
  margin-bottom: 0.75rem;
}

.page-subtitle {
  font-size: 1.15rem;
  color: var(--text-secondary);
  margin: 0;
}

.features-overview {
  margin-top: 2rem;
}

/* ====================================================================
   14. SINGLE PAGE (download, default)
   ==================================================================== */

.single-page {
  margin-top: 70px;
  padding: 4rem 2rem 6rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.article-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.article-content h2 {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  position: relative;
  padding-bottom: 0.75rem;
}

.article-content h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-secondary));
  border-radius: var(--radius-full);
}

.article-content h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* ====================================================================
   15. LIST PAGE (default)
   ==================================================================== */

.list-page {
  margin-top: 70px;
  padding: 4rem 2rem 6rem;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.page-content {
  margin-bottom: 2rem;
}

.pages-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.page-summary {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 2rem;
  transition: all var(--transition-base);
}

.page-summary:hover {
  border-color: var(--accent);
  box-shadow: var(--glow-accent);
}

.page-summary h2 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.page-summary h2 a {
  color: var(--text-primary);
}

.page-summary h2 a:hover {
  color: var(--accent);
}

.page-summary p {
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

.read-more {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
}

/* ====================================================================
   16. SUPPORT PAGE
   ==================================================================== */

.support-page {
  margin-top: 70px;
  padding: 4rem 2rem 6rem;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.support-sections {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

.support-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  transition: all var(--transition-base);
}

.support-card:hover {
  border-color: var(--accent);
  box-shadow: var(--glow-accent);
}

.support-card-icon {
  width: 64px;
  height: 64px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border-light);
  color: var(--accent);
}

.support-card h2 {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

.support-card > p {
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.support-contact {
  margin-bottom: 1.5rem;
}

.support-email {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.5rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  color: var(--accent-secondary);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 500;
  transition: all var(--transition-base);
}

.support-email:hover {
  border-color: var(--accent-secondary);
  background: rgba(var(--accent-2-rgb), 0.08);
  box-shadow: 0 0 15px rgba(var(--accent-2-rgb), 0.2);
  color: var(--accent-secondary);
}

.support-email svg {
  flex-shrink: 0;
  color: var(--accent-secondary);
}

.support-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.support-list li {
  padding: 0.4rem 0;
  padding-left: 1.25rem;
  position: relative;
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0;
}

.support-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.85rem;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

.support-commitment {
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.06), rgba(var(--accent-2-rgb),0.04));
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  text-align: center;
}

.support-commitment h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.support-commitment p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text-secondary);
  line-height: 1.8;
  font-size: 1.05rem;
}

@media (max-width: 768px) {
  .support-sections {
    grid-template-columns: 1fr;
  }
}

/* ====================================================================
   17. FOOTER
   ==================================================================== */

.footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  padding: 4rem 2rem 2rem;
  margin-top: 0;
}

.footer-container {
  max-width: 1400px;
  margin: 0 auto;
}

/* auto-fit, not repeat(3, 1fr). data/footer.yaml's own comment promises that
   the layout adapts to however many columns you define, and with three hard
   coded it did not — a fourth column dropped onto its own row and read as an
   afterthought rather than a peer. minmax's floor is what stops five columns
   becoming five unreadable slivers; below it they wrap, which is the correct
   answer at that width. */
.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer-column h3 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column li {
  margin-bottom: 0.6rem;
}

.footer-column a {
  color: var(--text-secondary);
  font-size: 0.875rem;
  transition: color var(--transition-fast);
}

.footer-column a:hover {
  color: var(--accent);
}

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  text-align: center;
}

.footer-bottom p {
  color: var(--text-tertiary);
  font-size: 0.8rem;
  margin: 0;
}

/* ====================================================================
   17. SCROLLBAR
   ==================================================================== */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ====================================================================
   18. ANIMATIONS
   ==================================================================== */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.feature-card,
.stat-card,
.page-summary {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeIn 0.4s ease-out forwards;
}

.feature-card:nth-child(1) { animation-delay: 0.05s; }
.feature-card:nth-child(2) { animation-delay: 0.1s; }
.feature-card:nth-child(3) { animation-delay: 0.15s; }
.feature-card:nth-child(4) { animation-delay: 0.2s; }
.feature-card:nth-child(5) { animation-delay: 0.25s; }
.feature-card:nth-child(6) { animation-delay: 0.3s; }

.stat-card:nth-child(1) { animation-delay: 0.05s; }
.stat-card:nth-child(2) { animation-delay: 0.1s; }
.stat-card:nth-child(3) { animation-delay: 0.15s; }

/* ====================================================================
   19. FOCUS & ACCESSIBILITY
   ==================================================================== */

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ====================================================================
   20. RESPONSIVE
   ==================================================================== */

@media (max-width: 1024px) {
  .feature-grid,
  .feature-grid-large {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .feature-detail-container {
    grid-template-columns: 200px 1fr;
    gap: 2rem;
  }

  .footer-content {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2rem;
  }
}

@media (max-width: 768px) {
  .feature-grid,
  .feature-grid-large,
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .feature-detail-container {
    grid-template-columns: 1fr;
  }

  .feature-sidebar {
    position: static;
  }

  .feature-sidebar .feature-nav ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .feature-sidebar .feature-nav a {
    border-left: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
  }

  .feature-sidebar .feature-nav a.active {
    border-left: none;
    border-bottom-color: var(--accent);
  }

  .feature-header {
    flex-direction: column;
    gap: 1rem;
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .hero {
    padding: 4rem 1.5rem;
    min-height: auto;
  }

  .hero-title {
    font-size: clamp(2rem, 6vw, 3rem);
  }

  .hero-subtitle {
    font-size: 1.1rem;
  }

  .feature-article {
    padding: 1.5rem;
  }

  .feature-nav-bottom {
    flex-direction: column;
  }

  .nav-next { align-items: flex-start; margin-left: 0; }
}

@media (max-width: 480px) {
  .nav-menu {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    padding: 1rem;
    gap: 0;
  }

  .nav-menu.active {
    display: flex;
  }

  .nav-toggle {
    display: flex;
  }

  .dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    padding-left: 1rem;
    background: transparent;
  }

  .dropdown-toggle::after {
    display: none;
  }

  .hero-buttons {
    flex-direction: column;
  }

  .btn { width: 100%; }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.15rem; }

  .features-list-page,
  .single-page,
  .list-page,
  .support-page {
    padding: 3rem 1rem 4rem;
  }

  .feature-detail-page {
    padding: 2rem 1rem 4rem;
  }
}

/* ====================================================================
   21. PRINT
   ==================================================================== */

@media print {
  nav.nav, .footer, .hero, .download-cta { display: none; }
  body { background: white; color: #000; }
  a { color: #0066cc; }
}


/* ====================================================================
   PRICING SECTION
   Two columns and a conclusion, driven by data/home.yaml's `pricing`.

   The two cards are deliberately NOT symmetrical. A comparison where
   both sides are styled identically asks the reader to work out which
   one is the offer; the accent border and the accent total say it.
   ==================================================================== */

.pricing-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 6rem 2rem;
  text-align: center;
}

.pricing-grid {
  display: grid;
  /* auto-fit rather than repeat(2, …) so a third column — an annual plan, a
     larger tier — is a data edit and not a stylesheet one. */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
  text-align: left;
}

.pricing-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
}

.pricing-card-us {
  border-color: var(--accent);
  box-shadow: var(--glow-accent);
  background: linear-gradient(160deg, rgba(var(--accent-rgb),0.06), var(--bg-secondary) 60%);
}

.pricing-card h3 {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--text-tertiary);
  margin-bottom: 1.5rem;
}

.pricing-card-us h3 { color: var(--accent); }

.pricing-rows { margin: 0; }

.pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
}

.pricing-row dt { color: var(--text-secondary); }

.pricing-row dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--text-primary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pricing-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--border-light);
}

.pricing-total-label {
  font-size: 0.85rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--font-mono);
}

.pricing-total-value {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pricing-card-us .pricing-total-value { color: var(--accent); }

.pricing-note {
  margin-top: 1.25rem;
  margin-bottom: 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-tertiary);
}

.pricing-conclusion {
  max-width: 760px;
  margin: 3rem auto 0;
  font-size: 1.05rem;
  color: var(--text-secondary);
}

/* The introductory-pricing promise. Bordered rather than merely small: it is a
   commitment to the customer, and small grey text under a price reads as the
   place a company hides the catch. This one is the opposite of a catch, so it
   is given an edge and the accent. */
.pricing-footnote {
  max-width: 620px;
  margin: 2rem auto 0;
  padding: 0.9rem 1.25rem;
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  font-size: 0.92rem;
  color: var(--text-secondary);
  text-align: left;
}

@media (max-width: 768px) {
  .pricing-section { padding: 4rem 1.25rem; }
  .pricing-grid { gap: 1.25rem; }
  .pricing-card { padding: 1.5rem; }
  .pricing-total-value { font-size: 1.35rem; }
}

/* On a narrow screen the label and the price cannot share a line. The price is
   `white-space: nowrap` — it has to be, "$25 per user, per month" broken across
   two lines is unreadable — so it does not shrink, and at 390px it ran straight
   through the card's padding and out the side. Stacking is the fix: the label
   on one line, the price under it, nothing competing for width. The same rule
   applies to the totals, which are the longest pair on the card. */
@media (max-width: 520px) {
  .pricing-row,
  .pricing-total {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
  }
  .pricing-row dd { font-size: 0.85rem; color: var(--text-secondary); }
  .pricing-card-us .pricing-row dd { color: var(--text-primary); }
}