/* ============================================================
   Solidshop Website — custom.css (deployed)
   Loaded automatically by the Foundra Joomla template.

   Sections 1–29 mirror web/site.css (single source of truth for
   the marketing site, docs, and content pages). Sections 30+ are
   Foundra-specific adapters that map the v2 design onto Joomla's
   markup (Foundra wrappers, Joomla article body, Kunena forum).

   Sections:
     1.  Reset & base
     2.  Design tokens
     3.  Container
     4.  Buttons
     5.  Sections
     6.  Cards
     7.  Badge
     8.  Header / Nav
     9.  Hero
     10. "Own everything" strip
     11. Why self-hosted
     12. Feature grid
     13. Commercial extensions
     14. How it works
     15. Privacy callout
     16. Developer callout
     17. Testimonials
     18. Pricing teaser
     19. Final CTA banner
     20. Footer
     21. Docs page layout
     22. Content page layout
     23. Article shell
     24. Prose
     25. Callouts
     26. Numbered steps
     27. Docs requirements grid
     28. FAQ accordion (shared by FAQ + content pages)
     29. Responsive
     -- Foundra adapters (not in site.css) --
     30. Foundra header / footer overrides
     31. Joomla article body prose adapter
     32. Foundra sidebar adapter (docs)
     33. Joomla page navigation (prev/next)
     34. Fullwidth section escape
     35. Kunena forum consistency
     36. Foundra responsive
   ============================================================ */


/* ============================================================
   1. RESET & BASE
   ============================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #1a1f2e;
  background: #fff;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
hr { border: none; }
code { font-family: 'SF Mono', 'Cascadia Code', 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; font-size: 0.875em; }
button { font: inherit; cursor: pointer; border: none; background: none; }


/* ============================================================
   2. DESIGN TOKENS
   ============================================================ */
:root {
  /* Brand */
  --brand: #196254;
  --brand-light: #1a7a68;
  --brand-wash: #eef7f4;
  --brand-wash-strong: #d4ede6;

  /* Neutrals */
  --ink: #0d1117;
  --ink-secondary: #3d4555;
  --ink-tertiary: #6b7280;
  --ink-faint: #9ca3af;
  --surface: #ffffff;
  --surface-raised: #f8f9fb;
  --surface-inset: #f1f3f6;
  --border: #e2e5eb;
  --border-subtle: #eef0f3;

  /* Dark palette */
  --dark-bg: #0a0f14;
  --dark-bg-raised: #111820;
  --dark-bg-card: #161d26;
  --dark-border: #1e2a36;
  --dark-ink: #e2e8f0;
  --dark-ink-secondary: #8492a6;
  --dark-ink-faint: #4a5568;

  /* Accent for dark sections */
  --glow: #2dd4a8;

  /* Spacing scale (8px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 56px;
  --s-11: 64px;
  --s-12: 80px;
  --s-13: 96px;
  --s-14: 120px;

  /* Type scale */
  --fs-xs: 0.8125rem;  /* 13 */
  --fs-sm: 0.875rem;   /* 14 */
  --fs-base: 1rem;     /* 16 */
  --fs-md: 1.125rem;   /* 18 */
  --fs-lg: 1.375rem;   /* 22 */
  --fs-xl: 1.75rem;    /* 28 */
  --fs-2xl: 2.25rem;   /* 36 */
  --fs-3xl: 2.875rem;  /* 46 */
  --fs-display: 4rem;  /* 64 */

  /* Mono stack */
  --font-mono: 'SF Mono', 'Cascadia Code', 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 100px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.03);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.05), 0 8px 32px rgba(0,0,0,0.04);
  --shadow-xl: 0 8px 24px rgba(0,0,0,0.06), 0 16px 48px rgba(0,0,0,0.05);

  /* Transitions */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 0.2s;
  --duration-md: 0.35s;
  --duration-lg: 0.5s;
}


/* ============================================================
   3. CONTAINER
   ============================================================ */
.container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--s-6);
}

.container--narrow {
  max-width: 800px;
}


/* ============================================================
   4. BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: inherit;
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
  white-space: nowrap;
  text-decoration: none;
}

.btn--primary {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.btn--primary:hover {
  background: var(--brand-light);
  border-color: var(--brand-light);
  box-shadow: 0 4px 16px rgba(25, 98, 84, 0.25);
  transform: translateY(-1px);
}

.btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--border);
}

.btn--outline:hover {
  border-color: var(--ink-tertiary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.btn--ghost-light {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.15);
}

.btn--ghost-light:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.25);
}

.btn--lg {
  font-size: var(--fs-base);
  padding: 14px 30px;
  border-radius: var(--radius-md);
}

.btn.is-disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.7;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

.btn--sm {
  font-size: var(--fs-xs);
  padding: 8px 16px;
}

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


/* ============================================================
   5. SECTIONS
   ============================================================ */
.section {
  padding: var(--s-14) 0;
  position: relative;
}

.section--alt {
  background: var(--surface-raised);
}

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

.section--dark-alt {
  background: var(--dark-bg-raised);
  color: var(--dark-ink);
}

.section-header {
  margin-bottom: var(--s-11);
}

.section-header--center {
  text-align: center;
}

.section-header--center .section-sub {
  margin-inline: auto;
}

.section-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--s-4);
}

.section--dark .section-label {
  color: var(--glow);
}

.section-heading {
  font-size: var(--fs-2xl);
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.section--dark .section-heading,
.section--dark-alt .section-heading {
  color: #fff;
}

.section-sub {
  font-size: var(--fs-md);
  color: var(--ink-tertiary);
  line-height: 1.65;
  max-width: 580px;
  margin-top: var(--s-4);
}

.section--dark .section-sub {
  color: var(--dark-ink-secondary);
}


/* ============================================================
   6. CARDS
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: all var(--duration-md) var(--ease);
}

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

.card__body {
  padding: var(--s-7);
}


/* ============================================================
   7. BADGE
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
}

.badge--accent {
  background: var(--brand-wash);
  color: var(--brand);
  border: 1px solid var(--brand-wash-strong);
}

.badge--primary {
  background: var(--brand);
  color: #fff;
}

.badge--soon {
  background: var(--brand);
  color: #fff;
  margin-inline-start: var(--s-2);
}


/* ============================================================
   8. HEADER / NAV
   ============================================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border-subtle);
  transition: box-shadow var(--duration) var(--ease);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.header-logo img {
  height: 28px;
  width: auto;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

.header-nav a {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-tertiary);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  transition: all var(--duration) var(--ease);
}

.header-nav a:hover {
  color: var(--ink);
  background: var(--surface-inset);
}

.header-utils {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.header-signin {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-tertiary);
  transition: color var(--duration) var(--ease);
}

.header-signin:hover {
  color: var(--brand);
}

.header-divider {
  width: 1px;
  height: 18px;
  background: var(--border);
}

/* Mobile nav toggle */
.header-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}

.header-toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 1px;
  transition: all var(--duration) var(--ease);
}


/* ============================================================
   9. HERO
   ============================================================ */
.hero {
  padding: var(--s-14) 0 var(--s-13);
  background: var(--brand-wash);
  position: relative;
  overflow: hidden;
}

/* Fine grid pattern */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(25, 98, 84, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25, 98, 84, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, black 30%, transparent 80%);
  pointer-events: none;
}

/* Soft radial glow */
.hero::after {
  content: '';
  position: absolute;
  top: -180px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 600px;
  background: radial-gradient(ellipse at center, rgba(25, 98, 84, 0.08) 0%, transparent 65%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: rgba(25, 98, 84, 0.07);
  border: 1px solid rgba(25, 98, 84, 0.15);
  border-radius: var(--radius-full);
  padding: 7px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--brand);
  margin-bottom: var(--s-9);

  animation: badge-in 0.6s var(--ease-out) both;
}

.hero__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 10px var(--brand);
  flex-shrink: 0;
  animation: pulse-dot 2.5s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 6px var(--brand); }
  50% { box-shadow: 0 0 14px var(--brand), 0 0 24px rgba(25,98,84,0.2); }
}

@keyframes badge-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero__headline {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.045em;
  color: var(--ink);
  margin-bottom: var(--s-7);

  animation: headline-in 0.7s var(--ease-out) 0.1s both;
}

.hero__headline span {
  background: linear-gradient(135deg, #196254 0%, #0ea37c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes headline-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero__sub {
  font-size: var(--fs-md);
  color: var(--ink-secondary);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto var(--s-9);

  animation: fade-up 0.7s var(--ease-out) 0.2s both;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero__ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-11);

  animation: fade-up 0.7s var(--ease-out) 0.3s both;
}

.hero__proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  flex-wrap: wrap;

  animation: fade-up 0.6s var(--ease-out) 0.45s both;
}

.hero__proof-item {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.hero__proof-sep {
  color: var(--border);
  font-size: 11px;
}


/* ============================================================
   10. OWN EVERYTHING STRIP
   ============================================================ */
.strip {
  background: var(--surface);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: 16px 0;
}

.strip__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-1);
}

.strip__item {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--brand);
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 4px var(--s-4);
}

.strip__sep {
  color: var(--border);
  font-size: 12px;
}


/* ============================================================
   11. WHY SELF-HOSTED
   ============================================================ */
.why__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--s-12);
  align-items: start;
}

.why__pitch-heading {
  font-size: var(--fs-xl);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: var(--s-6);
}

.why__pitch-body {
  font-size: var(--fs-base);
  color: var(--ink-secondary);
  line-height: 1.75;
}

.why__pitch-body p + p {
  margin-top: var(--s-5);
}

/* Premium comparison table */
.why__table-wrap {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--surface);
}

.why__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.why__table thead {
  background: var(--surface-inset);
}

.why__table th {
  padding: 14px 18px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.why__table th:first-child {
  color: var(--ink-faint);
}

.why__table th:nth-child(2) {
  color: var(--brand);
}

.why__table td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--ink-secondary);
  line-height: 1.45;
}

.why__table tbody tr:last-child td {
  border-bottom: none;
}

.why__table tbody tr {
  transition: background var(--duration) var(--ease);
}

.why__table tbody tr:hover {
  background: var(--surface-raised);
}

.why__table td:nth-child(2) {
  font-weight: 650;
  color: var(--brand);
}

.why__table td:nth-child(3) {
  color: var(--ink-faint);
  font-size: var(--fs-xs);
}


/* ============================================================
   12. FEATURE GRID
   ============================================================ */
.features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}

.feature-card__icon {
  font-size: 24px;
  margin-bottom: var(--s-4);
  line-height: 1;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-wash);
  border-radius: var(--radius-md);
}

.feature-card__title {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--s-2);
  letter-spacing: -0.01em;
}

.feature-card__body {
  font-size: var(--fs-sm);
  color: var(--ink-tertiary);
  line-height: 1.65;
}


/* ============================================================
   13. COMMERCIAL EXTENSIONS
   ============================================================ */
.extensions__group-heading {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: var(--s-5);
}

.extensions__group-heading:not(:first-of-type) {
  margin-top: var(--s-10);
}

.plugins__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}

.plugin-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.plugin-card__name {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--s-2);
}

.plugin-card__desc {
  font-size: var(--fs-sm);
  color: var(--ink-tertiary);
  line-height: 1.65;
  flex: 1;
  margin-bottom: var(--s-5);
}

.plugin-card__price {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--brand);
  font-weight: 600;
  margin-bottom: var(--s-3);
  letter-spacing: 0.01em;
}

.plugin-card__link {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap var(--duration) var(--ease);
}

.plugin-card__link:hover {
  gap: 8px;
}

.plugins__cta {
  text-align: center;
  margin-top: var(--s-10);
}


/* ============================================================
   14. HOW IT WORKS
   ============================================================ */
.how__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-9);
  position: relative;
}

/* Connector line */
.how__steps::before {
  content: '';
  position: absolute;
  top: 28px;
  left: calc(16.66% + 28px);
  right: calc(16.66% + 28px);
  height: 1px;
  background: linear-gradient(90deg, var(--border) 0%, var(--brand-wash-strong) 50%, var(--border) 100%);
}

.how__step {
  text-align: center;
  position: relative;
}

.how__step-num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: var(--fs-lg);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--s-6);
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 8px var(--surface-raised), 0 4px 12px rgba(25,98,84,0.15);
}

.how__step-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--s-3);
  letter-spacing: -0.01em;
}

.how__step-body {
  font-size: var(--fs-base);
  color: var(--ink-tertiary);
  line-height: 1.65;
}


/* ============================================================
   15. PRIVACY CALLOUT
   ============================================================ */
.privacy__headline {
  font-size: var(--fs-2xl);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: #fff;
  margin-bottom: var(--s-5);
  max-width: 680px;
  margin-inline: auto;
}

.privacy__sub {
  font-size: var(--fs-md);
  color: var(--dark-ink-secondary);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto var(--s-11);
}

.privacy__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}

.privacy-col {
  background: var(--dark-bg-card);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-lg);
  padding: var(--s-7);
  text-align: left;
  transition: border-color var(--duration) var(--ease);
}

.privacy-col:hover {
  border-color: rgba(45, 212, 168, 0.2);
}

.privacy-col__title {
  font-size: var(--fs-base);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.privacy-col__title::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--glow);
  box-shadow: 0 0 8px rgba(45, 212, 168, 0.4);
  flex-shrink: 0;
}

.privacy-col__body {
  font-size: var(--fs-sm);
  color: var(--dark-ink-faint);
  line-height: 1.65;
}


/* ============================================================
   16. DEVELOPER CALLOUT
   ============================================================ */
.dev__headline {
  font-size: var(--fs-xl);
  font-weight: 750;
  color: #fff;
  letter-spacing: -0.025em;
  margin-bottom: var(--s-6);
  line-height: 1.25;
}

.dev__headline em {
  font-style: normal;
  color: var(--glow);
}

.dev__body {
  font-size: var(--fs-base);
  color: var(--dark-ink-secondary);
  line-height: 1.75;
  max-width: 640px;
  margin: 0 auto var(--s-5);
}

.dev__tags {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-bottom: var(--s-8);
}

.dev__tag {
  background: rgba(45, 212, 168, 0.08);
  border: 1px solid rgba(45, 212, 168, 0.18);
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--glow);
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: all var(--duration) var(--ease);
}

.dev__tag:hover {
  background: rgba(45, 212, 168, 0.14);
  border-color: rgba(45, 212, 168, 0.3);
}


/* ============================================================
   17. TESTIMONIALS
   ============================================================ */
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}

.testimonial__quote-mark {
  font-size: 36px;
  color: var(--brand-wash-strong);
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1;
  margin-bottom: var(--s-3);
  font-weight: 700;
}

.testimonial__body {
  font-size: var(--fs-base);
  color: var(--ink-secondary);
  line-height: 1.7;
  margin-bottom: var(--s-7);
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.testimonial__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand) 0%, #0ea37c 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.testimonial__name {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
}

.testimonial__meta {
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  margin-top: 2px;
  margin-bottom: 4px;
}


/* ============================================================
   18. PRICING TEASER
   ============================================================ */
.pricing__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
  align-items: start;
}

.pricing-card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: all var(--duration-md) var(--ease);
}

.pricing-card:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-md);
}

.pricing-card--featured {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), var(--shadow-xl);
  position: relative;
  transform: scale(1.02);
}

.pricing-card--featured:hover {
  box-shadow: 0 0 0 1px var(--brand), var(--shadow-xl);
  transform: scale(1.03);
}

.pricing-card__badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 5px 16px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pricing-card__body {
  padding: var(--s-8) var(--s-7);
}

.pricing-card__tier {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--s-3);
}

.pricing-card__price {
  font-size: 44px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: var(--s-2);
}

.pricing-card__price sup {
  font-size: 18px;
  font-weight: 600;
  vertical-align: super;
  letter-spacing: 0;
}

.pricing-card__period {
  font-size: var(--fs-sm);
  color: var(--ink-tertiary);
  margin-bottom: var(--s-7);
}

.pricing-card__divider {
  height: 1px;
  background: var(--border-subtle);
  margin-bottom: var(--s-6);
}

.pricing-card__features {
  margin-bottom: var(--s-8);
}

.pricing-card__features li {
  font-size: var(--fs-sm);
  color: var(--ink-secondary);
  padding: 6px 0 6px 24px;
  position: relative;
  line-height: 1.45;
}

.pricing-card__features li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 11px;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23196254'%3E%3Cpath d='M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.pricing__cta {
  text-align: center;
  margin-top: var(--s-10);
}


/* ============================================================
   19. FINAL CTA BANNER
   ============================================================ */
.cta-banner {
  text-align: center;
}

.cta-banner__headline {
  font-size: var(--fs-3xl);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: #fff;
  margin-bottom: var(--s-5);
}

.cta-banner__sub {
  font-size: var(--fs-md);
  color: var(--dark-ink-secondary);
  line-height: 1.65;
  margin-bottom: var(--s-10);
  max-width: 480px;
  margin-inline: auto;
}

.cta-banner__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}


/* ============================================================
   20. FOOTER
   ============================================================ */
.footer {
  background: var(--dark-bg-raised);
  border-top: 1px solid var(--dark-border);
  padding: var(--s-12) 0 var(--s-9);
  color: var(--dark-ink-secondary);
}

.footer__top {
  display: grid;
  grid-template-columns: 220px repeat(4, 1fr);
  gap: var(--s-10);
  margin-bottom: var(--s-11);
}

.footer__brand-logo {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.footer__brand-logo img {
  height: 26px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.footer__brand-desc {
  font-size: var(--fs-sm);
  color: var(--dark-ink-faint);
  line-height: 1.6;
}

.footer__col-heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dark-ink);
  margin-bottom: var(--s-5);
}

.footer__col li + li {
  margin-top: var(--s-3);
}

.footer__col a {
  font-size: var(--fs-sm);
  color: var(--dark-ink-faint);
  transition: color var(--duration) var(--ease);
}

.footer__col a:hover {
  color: var(--dark-ink-secondary);
}

.footer__bottom {
  border-top: 1px solid var(--dark-border);
  padding-top: var(--s-7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.footer__copy {
  font-size: var(--fs-xs);
  color: var(--dark-ink-faint);
}

.footer__gpl {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--dark-ink-faint);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-sm);
  padding: 5px 12px;
}


/* ============================================================
   21. DOCS PAGE LAYOUT
   ============================================================ */
.docs {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--s-10);
  padding: var(--s-12) 0 var(--s-14);
  min-height: 60vh;
}

/* Sidebar */
.docs__sidebar {
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding-right: var(--s-5);
  border-right: 1px solid var(--border-subtle);
  scrollbar-width: thin;
}

.docs__sidebar-heading {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin-bottom: var(--s-3);
  padding-left: var(--s-3);
}

.docs__sidebar-heading:not(:first-child) {
  margin-top: var(--s-7);
}

.docs__nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.docs__nav a {
  display: block;
  padding: 6px var(--s-3);
  font-size: var(--fs-sm);
  color: var(--ink-secondary);
  border-radius: var(--radius-sm);
  transition: all var(--duration) var(--ease);
  line-height: 1.5;
}

.docs__nav a:hover {
  color: var(--ink);
  background: var(--surface-inset);
}

.docs__nav a.is-active {
  color: var(--brand);
  background: var(--brand-wash);
  font-weight: 600;
}

.docs__nav--nested {
  padding-left: var(--s-4);
}

.docs__nav--nested a {
  font-size: var(--fs-xs);
}

/* Article content */
.docs__content {
  max-width: 760px;
  min-width: 0;
}


/* ============================================================
   22. CONTENT PAGE LAYOUT
   ============================================================ */
.page {
  padding: var(--s-12) 0 var(--s-14);
  min-height: 60vh;
}

.page__content {
  max-width: 880px;
  margin-inline: auto;
  min-width: 0;
}


/* ============================================================
   23. ARTICLE SHELL — shared by docs + content pages
   Breadcrumb, title, subtitle, prev/next nav.
   ============================================================ */
.page__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--ink-tertiary);
  margin-bottom: var(--s-6);
}

.page__breadcrumb a {
  color: var(--ink-tertiary);
  transition: color var(--duration) var(--ease);
}

.page__breadcrumb a:hover {
  color: var(--brand);
}

.page__breadcrumb-sep {
  color: var(--ink-faint);
}

.page__title,
.com-content-article .page-header h1,
.com-content-category-blog__item .page-header h2 {
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: var(--s-3);
}

.com-content-article .page-header,
.com-content-category-blog__item .page-header {
  margin: 0;
  padding: 0;
  border: 0;
}

.com-content-article .page-header h1,
.com-content-category-blog__item .page-header h2 {
  margin-top: 0;
}

.com-content-category-blog__item .page-header h2 a {
  color: inherit;
}

.com-content-category-blog__item .page-header h2 a:hover {
  color: var(--brand);
}

.page__subtitle {
  font-size: var(--fs-md);
  color: var(--ink-secondary);
  line-height: 1.6;
  margin-bottom: var(--s-9);
}

/* Content pages can stack a second subtitle line before the first h2;
   extra bottom margin separates it from the prose. */
.page__subtitle:last-of-type {
  margin-bottom: var(--s-9);
}

/* Prev / next nav at the bottom of articles */
.page__nav-footer {
  display: flex;
  justify-content: space-between;
  gap: var(--s-5);
  margin-top: var(--s-12);
  padding-top: var(--s-8);
  border-top: 1px solid var(--border-subtle);
}

.page__nav-link {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: all var(--duration) var(--ease);
  max-width: 50%;
}

.page__nav-link:hover {
  border-color: var(--brand);
  background: var(--brand-wash);
}

.page__nav-link--next {
  margin-left: auto;
  text-align: right;
}

.page__nav-link__label {
  font-size: var(--fs-xs);
  color: var(--ink-tertiary);
  font-weight: 500;
}

.page__nav-link__title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand);
}


/* ============================================================
   24. PROSE — article body styles for docs + content pages
   ============================================================ */
.prose h2 {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: var(--s-11);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border-subtle);
}

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

.prose h3 {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--ink);
  margin-top: var(--s-9);
  margin-bottom: var(--s-4);
}

.prose h4 {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
  margin-top: var(--s-7);
  margin-bottom: var(--s-3);
}

.prose p {
  color: var(--ink-secondary);
  line-height: 1.75;
  margin-bottom: var(--s-5);
}

.prose strong {
  color: var(--ink);
  font-weight: 600;
}

.prose a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--brand-wash-strong);
  transition: text-decoration-color var(--duration) var(--ease);
}

.prose a:hover {
  text-decoration-color: var(--brand);
}

.prose ul,
.prose ol {
  color: var(--ink-secondary);
  line-height: 1.75;
  margin-bottom: var(--s-5);
  padding-left: var(--s-6);
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

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

.prose li::marker {
  color: var(--ink-faint);
}

/* Inline code */
.prose code {
  background: var(--surface-inset);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.875em;
  color: var(--ink);
  border: 1px solid var(--border-subtle);
}

/* Code blocks */
.prose pre {
  background: var(--dark-bg);
  color: var(--dark-ink);
  padding: var(--s-5) var(--s-6);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin-bottom: var(--s-5);
  font-size: var(--fs-sm);
  line-height: 1.7;
  border: 1px solid var(--dark-border);
}

.prose pre code {
  background: none;
  padding: 0;
  border: none;
  border-radius: 0;
  color: inherit;
  font-size: inherit;
}

/* Blockquote */
.prose blockquote {
  border-left: 3px solid var(--brand);
  background: var(--brand-wash);
  padding: var(--s-4) var(--s-6);
  margin-bottom: var(--s-5);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.prose blockquote p {
  color: var(--ink);
  margin-bottom: 0;
}

.prose blockquote p + p {
  margin-top: var(--s-3);
}

/* Tables */
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--s-5);
  font-size: var(--fs-sm);
}

.prose th {
  text-align: left;
  font-weight: 600;
  color: var(--ink);
  padding: var(--s-3) var(--s-4);
  border-bottom: 2px solid var(--border);
  background: var(--surface-raised);
}

.prose td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--ink-secondary);
  vertical-align: top;
}

.prose tbody tr:last-child td {
  border-bottom: none;
}

/* Horizontal rule */
.prose hr {
  border-top: 1px solid var(--border-subtle);
  margin: var(--s-10) 0;
}

/* Images */
.prose img {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  margin-bottom: var(--s-5);
}


/* ============================================================
   25. CALLOUTS — shared by docs + content pages
   ============================================================ */
.callout {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  border-radius: var(--radius-md);
  margin-bottom: var(--s-5);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--ink-secondary);
}

.callout p {
  margin-bottom: 0;
}

.callout p + p {
  margin-top: var(--s-3);
}

.callout__icon {
  flex-shrink: 0;
  font-size: var(--fs-lg);
  line-height: 1;
}

.callout--tip {
  background: var(--brand-wash);
  border: 1px solid var(--brand-wash-strong);
}

.callout--tip .callout__icon { color: var(--brand); }

.callout--note {
  background: #eef3ff;
  border: 1px solid #c7d7fe;
}

.callout--note .callout__icon { color: #3b68d9; }

.callout--warning {
  background: #fef7ed;
  border: 1px solid #fbd89d;
}

.callout--warning .callout__icon { color: #b45309; }


/* ============================================================
   26. NUMBERED STEPS — used by docs + content pages
   ============================================================ */
.page-steps {
  counter-reset: page-step;
  margin-bottom: var(--s-5);
}

.page-step {
  counter-increment: page-step;
  position: relative;
  padding-left: 44px;
  padding-bottom: var(--s-6);
  border-left: 2px solid var(--border-subtle);
  margin-left: 15px;
}

.page-step:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.page-step::before {
  content: counter(page-step);
  position: absolute;
  left: -16px;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.page-step__title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--s-2);
  line-height: 30px;
}

.page-step__body {
  color: var(--ink-secondary);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

.page-step__body p {
  margin-bottom: var(--s-3);
}

.page-step__body p:last-child {
  margin-bottom: 0;
}


/* ============================================================
   27. DOCS REQUIREMENTS GRID
   ============================================================ */
.req-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}

.req-card {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--s-5);
}

.req-card__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-tertiary);
  margin-bottom: var(--s-1);
}

.req-card__value {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
}

.req-card__note {
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  margin-top: var(--s-1);
}


/* ============================================================
   28. FAQ ACCORDION (shared by FAQ + content pages)
   ============================================================ */
.faq {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: var(--s-5) 0 var(--s-7);
}

.faq__item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease);
}

.faq__item[open] {
  border-color: var(--brand-wash-strong);
  box-shadow: var(--shadow-sm);
}

.faq__question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-md);
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question:hover {
  color: var(--brand);
}

.faq__question:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.faq__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 4px;
  color: var(--ink-tertiary);
  transition: transform var(--duration) var(--ease),
              color var(--duration) var(--ease);
}

.faq__item[open] .faq__icon {
  transform: rotate(45deg);
  color: var(--brand);
}

.faq__answer {
  padding: 0 var(--s-5) var(--s-5);
  color: var(--ink-secondary);
  font-size: var(--fs-base);
  line-height: 1.65;
}

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

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

.faq__answer p + p,
.faq__answer p + ul,
.faq__answer ul + p {
  margin-top: var(--s-3);
}

.faq__answer ul {
  margin: var(--s-2) 0 0;
  padding-inline-start: var(--s-5);
}

.faq__answer li {
  margin-bottom: var(--s-1);
}

.faq__answer a {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.faq__answer a:hover {
  color: var(--brand-light);
}

@media (prefers-color-scheme: dark) {
  .faq__item {
    background: var(--dark-bg-card);
    border-color: var(--dark-border);
  }

  .faq__item[open] {
    border-color: var(--glow);
    box-shadow: 0 0 0 1px rgba(45, 212, 168, 0.15);
  }

  .faq__question {
    color: var(--dark-ink);
  }

  .faq__question:hover {
    color: var(--glow);
  }

  .faq__icon {
    color: var(--dark-ink-secondary);
  }

  .faq__item[open] .faq__icon {
    color: var(--glow);
  }

  .faq__answer {
    color: var(--dark-ink-secondary);
  }

  .faq__answer a {
    color: var(--glow);
  }

  .faq__answer a:hover {
    color: #5ee9c4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq__item,
  .faq__icon {
    transition: none;
  }
}


/* ============================================================
   29. RESPONSIVE
   ============================================================ */

/* Tablet landscape */
@media (max-width: 1024px) {
  :root {
    --fs-display: 3rem;
    --fs-3xl: 2.25rem;
    --fs-2xl: 1.75rem;
  }

  .why__grid {
    grid-template-columns: 1fr;
    gap: var(--s-10);
  }

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

  .testimonials__grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }

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

  .pricing-card--featured {
    transform: none;
  }

  .pricing-card--featured:hover {
    transform: translateY(-2px);
  }

  .footer__top {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-9);
  }

  .footer__brand {
    grid-column: 1 / -1;
  }

  /* Docs layout tightens */
  .docs {
    grid-template-columns: 220px 1fr;
    gap: var(--s-8);
  }

  .req-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Tablet portrait / mobile landscape */
@media (max-width: 768px) {
  :root {
    --fs-display: 2.5rem;
    --fs-3xl: 2rem;
    --fs-2xl: 1.5rem;
    --fs-xl: 1.375rem;
  }

  .section {
    padding: var(--s-12) 0;
  }

  .section-header {
    margin-bottom: var(--s-9);
  }

  .hero {
    padding: var(--s-12) 0 var(--s-11);
  }

  .hero__headline {
    font-size: var(--fs-display);
  }

  /* Mobile nav */
  .header-nav,
  .header-utils {
    display: none;
  }

  .header-toggle {
    display: flex;
  }

  .how__steps {
    grid-template-columns: 1fr;
    gap: var(--s-10);
  }

  .how__steps::before {
    display: none;
  }

  .privacy__cols {
    grid-template-columns: 1fr;
  }

  .features__grid,
  .plugins__grid,
  .pricing__grid {
    grid-template-columns: 1fr;
  }

  .pricing__grid {
    max-width: 480px;
    margin-inline: auto;
  }

  .strip__inner {
    gap: 0;
  }

  .footer__top {
    grid-template-columns: 1fr;
    gap: var(--s-8);
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Docs page — collapse sidebar above content */
  .docs {
    grid-template-columns: 1fr;
    padding: var(--s-8) 0 var(--s-12);
  }

  .docs__sidebar {
    position: static;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
    padding-right: 0;
    padding-bottom: var(--s-6);
    margin-bottom: var(--s-6);
  }

  .docs__nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--s-2);
  }

  .docs__nav a {
    padding: 4px var(--s-3);
    font-size: var(--fs-xs);
  }

  .docs__nav--nested {
    padding-left: 0;
  }

  /* Content page */
  .page {
    padding: var(--s-8) 0 var(--s-12);
  }

  /* Article shell — tighter typography */
  .page__title,
  .com-content-article .page-header h1,
  .com-content-category-blog__item .page-header h2 {
    font-size: var(--fs-xl);
  }

  .prose h2 {
    font-size: var(--fs-lg);
    margin-top: var(--s-9);
  }

  .prose h3 {
    font-size: var(--fs-md);
    margin-top: var(--s-7);
  }

  .req-grid {
    grid-template-columns: 1fr;
  }

  .page__nav-footer {
    flex-direction: column;
  }

  .page__nav-link {
    max-width: 100%;
  }

  .page__nav-link--next {
    margin-left: 0;
    text-align: left;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  :root {
    --fs-display: 2.125rem;
  }

  .container {
    padding: 0 var(--s-4);
  }

  .hero__ctas {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__ctas .btn {
    width: 100%;
  }

  .cta-banner__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-banner__actions .btn {
    width: 100%;
  }

  .card__body {
    padding: var(--s-6);
  }
}


/* ============================================================
   30. FOUNDRA HEADER / FOOTER OVERRIDES
   Map the v2 design onto Foundra's wrapper markup.
   ============================================================ */

/* --- Header --------------------------------------------------- */
.foundra__header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: none;
}

.foundra__header-inner {
  height: 60px;
  max-width: 1320px;
  margin: 0 auto;
}

.foundra__logo-img {
  height: 28px;
  width: auto;
}

/* Joomla mod_menu nav links — match the v2 flat nav look.
   Parent items (with submenus) render as <button class="mod-menu__toggle-sub">,
   so include them alongside <a> to keep all top-level items visually identical. */
.foundra__nav li > a,
.foundra__nav li > span > a,
.foundra__nav li > .mod-menu__toggle-sub {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-tertiary);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  transition: all var(--duration) var(--ease);
}

.foundra__nav li > a:hover,
.foundra__nav li > a:focus,
.foundra__nav li > span > a:hover,
.foundra__nav li > span > a:focus,
.foundra__nav li > .mod-menu__toggle-sub:hover,
.foundra__nav li > .mod-menu__toggle-sub:focus {
  color: var(--ink);
  background: var(--surface-inset);
}

.foundra__nav li.active > a,
.foundra__nav li.current > a,
.foundra__nav li.active > .mod-menu__toggle-sub,
.foundra__nav li.current > .mod-menu__toggle-sub {
  color: var(--ink);
  font-weight: 600;
}

.foundra__header-utils {
  gap: var(--s-4);
}

.foundra__menu-toggle-bar {
  background: var(--ink);
}

/* --- Footer --------------------------------------------------- */
.foundra__footer {
  background-color: var(--dark-bg-raised);
  border-top: 1px solid var(--dark-border);
  color: var(--dark-ink-secondary);
  padding: var(--s-12) 0 var(--s-9);
}

.foundra__footer a {
  color: var(--dark-ink-faint);
  transition: color var(--duration) var(--ease);
}

.foundra__footer a:hover {
  color: var(--dark-ink-secondary);
}

.foundra__footer h3,
.foundra__footer h4,
.foundra__footer .foundra__footer-heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dark-ink);
  margin-bottom: var(--s-5);
}

.foundra__footer p {
  font-size: var(--fs-sm);
  color: var(--dark-ink-faint);
  line-height: 1.6;
}

.foundra__footer-grid {
  max-width: 1320px;
  margin: 0 auto;
}

.foundra__footer-bottom {
  background-color: var(--dark-bg-raised);
  border-top: 1px solid var(--dark-border);
  color: var(--dark-ink-faint);
}

/* Footer logo — invert for dark background */
.foundra__footer .foundra__logo-img,
.foundra__footer img[alt*="olidshop"] {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* Bootstrap (loaded by Joomla core) applies padding-inline-start: 2rem and a
   list-style to every <ul>, which leaks into the marketing footer's column
   menus. Neutralise it here so the design matches web/site.css. */
.footer__col ul,
.footer__col ol {
  padding-inline-start: 0;
  margin: 0;
  list-style: none;
}


/* ============================================================
   31. JOOMLA ARTICLE BODY PROSE ADAPTER
   Joomla's article wrapper is .com-content-article__body. The rules
   below mirror the .prose styles so Joomla templates can omit the
   extra .prose div and still render correctly.
   ============================================================ */

.com-content-article .prose {
  padding: var(--s-6) 0 var(--s-14);
  min-height: 60vh;
}

/* Sidebar layout (docs): the column is already narrowed by the sidebar,
   so let the article body fill it. */
.foundra__content-wrap--has-sidebar .com-content-article__body,
.foundra__content-wrap--has-sidebar .com-content-article .page-header,
.foundra__content-wrap--has-sidebar .com-content-category-blog {
  max-width: 100%;
  min-width: 0;
}

/* Full-page article (about, privacy, terms…) and blog list:
   readability cap + center, matching the single-article width. */
.foundra__content-wrap:not(.foundra__content-wrap--has-sidebar) .com-content-article__body,
.foundra__content-wrap:not(.foundra__content-wrap--has-sidebar) .com-content-article .page-header,
.foundra__content-wrap:not(.foundra__content-wrap--has-sidebar) .com-content-category-blog {
  max-width: 880px;
  margin-inline: auto;
  min-width: 0;
}

.com-content-article__body h2 {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: var(--s-11);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border-subtle);
}

.com-content-article__body h2:first-child {
  margin-top: 0;
}

.com-content-article__body h3 {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--ink);
  margin-top: var(--s-9);
  margin-bottom: var(--s-4);
}

.com-content-article__body h4 {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
  margin-top: var(--s-7);
  margin-bottom: var(--s-3);
}

.com-content-article__body p {
  color: var(--ink-secondary);
  line-height: 1.75;
  margin-bottom: var(--s-5);
}

.com-content-article__body strong {
  color: var(--ink);
  font-weight: 600;
}

.com-content-article__body a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--brand-wash-strong);
  transition: text-decoration-color var(--duration) var(--ease);
}

.com-content-article__body a:hover {
  text-decoration-color: var(--brand);
}

.com-content-article__body ul,
.com-content-article__body ol {
  color: var(--ink-secondary);
  line-height: 1.75;
  margin-bottom: var(--s-5);
  padding-left: var(--s-6);
}

.com-content-article__body ul {
  list-style: disc;
}

.com-content-article__body ol {
  list-style: decimal;
}

.com-content-article__body li {
  margin-bottom: var(--s-2);
}

.com-content-article__body li::marker {
  color: var(--ink-faint);
}

.com-content-article__body code {
  background: var(--surface-inset);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.875em;
  color: var(--ink);
  border: 1px solid var(--border-subtle);
}

.com-content-article__body pre {
  background: var(--dark-bg);
  color: var(--dark-ink);
  padding: var(--s-5) var(--s-6);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin-bottom: var(--s-5);
  font-size: var(--fs-sm);
  line-height: 1.7;
  border: 1px solid var(--dark-border);
}

.com-content-article__body pre code {
  background: none;
  padding: 0;
  border: none;
  border-radius: 0;
  color: inherit;
  font-size: inherit;
}

.com-content-article__body blockquote {
  border-left: 3px solid var(--brand);
  background: var(--brand-wash);
  padding: var(--s-4) var(--s-6);
  margin-bottom: var(--s-5);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.com-content-article__body blockquote p {
  color: var(--ink);
  margin-bottom: 0;
}

.com-content-article__body blockquote p + p {
  margin-top: var(--s-3);
}

.com-content-article__body table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--s-5);
  font-size: var(--fs-sm);
}

.com-content-article__body th {
  text-align: left;
  font-weight: 600;
  color: var(--ink);
  padding: var(--s-3) var(--s-4);
  border-bottom: 2px solid var(--border);
  background: var(--surface-raised);
}

.com-content-article__body td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--ink-secondary);
  vertical-align: top;
}

.com-content-article__body tbody tr:last-child td {
  border-bottom: none;
}

.com-content-article__body hr {
  border-top: 1px solid var(--border-subtle);
  margin: var(--s-10) 0;
}

.com-content-article__body img {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  margin-bottom: var(--s-5);
}


/* ============================================================
   32. FOUNDRA SIDEBAR ADAPTER (docs)
   Style Joomla mod_articles output to look like the v2 docs sidebar.
   ============================================================ */
.foundra__sidebar--left {
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.foundra__sidebar .mod-articles-group > h4 {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin-bottom: var(--s-3);
  padding-left: var(--s-3);
}

.foundra__sidebar .mod-articles-group > h4:not(:first-child) {
  margin-top: var(--s-7);
}

.foundra__sidebar .mod-articles-items {
  display: flex;
  flex-direction: column;
  gap: 1px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.foundra__sidebar .mod-articles-items li {
  list-style: none;
  padding: 0;
  margin: 0;
}

.foundra__sidebar .mod-articles-items .mod-articles-title {
  font-size: var(--fs-sm);
  font-weight: 400;
  margin: 0;
  padding: 0;
}

.foundra__sidebar .mod-articles-items .mod-articles-link {
  display: block;
  padding: 6px var(--s-3);
  font-size: var(--fs-sm);
  color: var(--ink-secondary);
  border-radius: var(--radius-sm);
  transition: all var(--duration) var(--ease);
  line-height: 1.5;
  text-decoration: none;
}

.foundra__sidebar .mod-articles-items .mod-articles-link:hover {
  color: var(--ink);
  background: var(--surface-inset);
}

.foundra__sidebar .mod-articles-items .mod-articles-link.active {
  color: var(--brand);
  background: var(--brand-wash);
  font-weight: 600;
}


/* ============================================================
   33. JOOMLA PAGE NAVIGATION (prev/next)
   ============================================================ */
.com-content-article .pagenavigation {
  margin-top: var(--s-12);
  padding-top: var(--s-8);
  border-top: 1px solid var(--border-subtle);
}

.com-content-article .pagenavigation .btn-secondary {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--brand);
  font-weight: 600;
  font-size: var(--fs-sm);
  background: transparent;
  transition: all var(--duration) var(--ease);
  padding: var(--s-3) var(--s-5);
}

.com-content-article .pagenavigation .btn-secondary:hover {
  border-color: var(--brand);
  background: var(--brand-wash);
}


/* ============================================================
   34. FULLWIDTH SECTION ESCAPE
   When v2 content is placed in Joomla modules, Foundra wraps it
   in .foundra__container. These sections need to break out to
   full viewport width. Scoped away from #kunena because Kunena
   also uses a .section class on its category wrappers.
   ============================================================ */
.foundra__main .hero,
.foundra__main .strip,
.foundra__main > .section,
.foundra__main > * > .section,
.foundra__main .cta-banner,
.foundra__main .footer {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

#kunena .section,
#kunena.layout .section {
  width: auto;
  position: static;
  left: auto;
  right: auto;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
}

.foundra__main--fullwidth-only .hero,
.foundra__main--fullwidth-only .strip,
.foundra__main--fullwidth-only > .section,
.foundra__main--fullwidth-only > * > .section,
.foundra__main--fullwidth-only .cta-banner,
.foundra__main--fullwidth-only .footer {
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Remove Foundra's default main padding for pages using v2 sections */
.foundra__main:has(.hero) {
  padding: 0;
}

/* Keep the inner container width consistent inside escaped sections */
.foundra__main .section > .container,
.foundra__main .hero > .container,
.foundra__main .strip > .container,
.foundra__main .cta-banner > .container,
.foundra__main .footer > .container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--s-6);
}


/* ============================================================
   35. KUNENA FORUM CONSISTENCY
   Light-touch overrides to align Kunena's default styling with
   the v2 brand. Targets the wrapper classes Kunena generates.
   ============================================================ */

/* Foundra's reset sets `svg { display: block }` globally, which breaks
   Kunena's inline icon-in-button pattern. Restore inline-block inside
   Kunena, preserving sizing. */
#kunena svg,
.dropdown-menu svg {
  display: inline-block;
  vertical-align: -0.125em;
  max-width: none;
  height: 1em;
  width: 1em;
}

#kunena .dropdown-menu .btn,
.dropdown-menu .btn {
  white-space: nowrap;
}

#kunena .dropdown-menu .btn svg,
.dropdown-menu .btn svg {
  margin-right: 0.35em;
}

#kunena .badge,
.dropdown-menu .badge {
  display: inline-block;
}

/* Restore Bootstrap 4's .form-group spacing — BS5 dropped it but
   Joomla core, Kunena, and many extensions still emit it. */
.form-group {
  margin-bottom: 1rem;
}

#kunena {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color: var(--ink-secondary);
  font-size: var(--fs-base);
  line-height: 1.6;
}

#kunena .card-header,
#kunena .kheader {
  background: var(--surface-raised);
  border-color: var(--border-subtle);
  color: var(--ink);
  font-weight: 600;
}

#kunena a {
  color: var(--brand);
  transition: color var(--duration) var(--ease);
}

#kunena a:hover {
  color: var(--brand-light);
}

#kunena .btn-primary,
#kunena .kbtn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: all var(--duration) var(--ease);
}

#kunena .btn-primary:hover,
#kunena .kbtn-primary:hover {
  background: var(--brand-light);
  border-color: var(--brand-light);
}

#kunena .card,
#kunena .kbox {
  border-color: var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* Tone down Bootstrap's heavy shadow on Kunena cards but keep
   a visible boundary — Kunena wraps forms (e.g. new-topic editor)
   in .shadow-lg.rounded with no border, so zeroing the shadow
   outright makes the wrapper disappear. */
#kunena .shadow-lg {
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid var(--border-subtle);
  background: var(--surface);
}

#kunena .ktopic-row:hover,
#kunena .category-item:hover {
  background: var(--surface-raised);
}

#kunena .kavatar img {
  border-radius: var(--radius-md);
}

#kunena .page-link {
  color: var(--brand);
  border-color: var(--border-subtle);
  border-radius: var(--radius-sm);
}

#kunena .page-item.active .page-link {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

#kunena .kmessage-text,
#kunena .kmsg {
  color: var(--ink-secondary);
  line-height: 1.7;
}

#kunena.layout ol.breadcrumb {
  background: transparent;
  font-size: var(--fs-sm);
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  list-style: none;
  padding-left: 0;
}

#kunena.layout .breadcrumb-item {
  display: flex !important;
  align-items: center;
  white-space: nowrap;
  gap: 0.25rem;
}

#kunena.layout .breadcrumb a {
  color: var(--ink-tertiary);
}

#kunena.layout .breadcrumb a:hover {
  color: var(--brand);
}

#kunena textarea,
#kunena input[type="text"],
#kunena select {
  border-color: var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration) var(--ease);
}

#kunena textarea:focus,
#kunena input[type="text"]:focus,
#kunena select:focus {
  border-color: var(--brand);
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-wash);
}

/* Category icon column — stop the 1/12 table cell from creating
   a huge gap between folder icon and category name. */
#kunena #kcat-icon,
#kunena td#kcat-icon {
  width: 56px;
  padding-right: 0.5rem;
  white-space: nowrap;
}


/* ============================================================
   36. FOUNDRA RESPONSIVE
   Adapter-only responsive rules.
   ============================================================ */
@media (max-width: 768px) {
  .foundra__sidebar--left {
    position: static;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
    padding-right: 0;
    padding-bottom: var(--s-6);
    margin-bottom: var(--s-6);
  }

  .foundra__sidebar .mod-articles-items {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--s-2);
  }

  .foundra__sidebar .mod-articles-items .mod-articles-link {
    padding: 4px var(--s-3);
    font-size: var(--fs-xs);
  }

  .com-content-article__body h2 {
    font-size: var(--fs-lg);
    margin-top: var(--s-9);
  }

  .com-content-article__body h3 {
    font-size: var(--fs-md);
    margin-top: var(--s-7);
  }
}