/* ============================================================================
   MONO GETILLUSTRATIONS — Design System  v1.0  (2026-06-10)
   ----------------------------------------------------------------------------
   One typeface. One accent. A monochrome base.

   Extracted from the redesign homepage (variant B: IndexRedesign.cshtml +
   _LayoutRedesign.cshtml) and RATIONALIZED — the homepage shipped three lime
   hexes, five near-blacks and ad-hoc inline spacing; this file picks one
   canonical value for each so every future page stays consistent.

   Namespaced `--mono-*` / `.mono-*` so it can coexist with the live
   `--brand-*` / `--iv9-*` / `.iv5-*` styles during migration.

   Canonical decisions (vs. what the homepage shipped):
     • Lime   → #ccea4a   (was also #c8e82a, #CBEA4B)
     • Ink    → #111827   (was also #1a1a1a, #111317, #0a0a0a, #212529)
     • Gray-700 is a REAL grey #374151 here (homepage aliased it to #000)
     • Section rhythm → 48px recommended (homepage runs a tight 30px)
   ============================================================================ */

:root {
  /* ---- Brand --------------------------------------------------------------*/
  --mono-ink:            #111827;  /* primary text · dark surfaces · primary button */
  --mono-ink-raised:     #1f2937;  /* dark button hover · raised dark */
  --mono-lime:           #ccea4a;  /* THE accent — CTAs on hover, badges, checks */
  --mono-lime-bright:    #b8d640;  /* lime button hover */
  --mono-lime-pale:      #fbfde8;  /* pale lime surface · eyebrow-pill background */
  --mono-lime-ink:       #4d5e0f;  /* readable text/icon ON pale lime */
  --mono-white:          #ffffff;

  /* ---- Grey ramp (cool, Tailwind-aligned) --------------------------------*/
  --mono-gray-50:        #f9fafb;  /* subtle surface (chips, tiles, toolbars) */
  --mono-gray-100:       #f3f4f6;  /* raised surface (placeholders, tracks) */
  --mono-gray-200:       #e5e7eb;  /* DEFAULT border / hairline */
  --mono-gray-300:       #d1d5db;  /* stronger border */
  --mono-gray-400:       #9ca3af;  /* muted icon */
  --mono-gray-500:       #6b7280;  /* muted text · eyebrow · placeholder */
  --mono-gray-600:       #4b5563;  /* body-muted (sub-heads, descriptions) */
  --mono-gray-700:       #374151;  /* secondary text (REAL grey — fixed) */
  --mono-gray-800:       #1f2937;
  --mono-gray-900:       #111827;

  /* ---- Semantic aliases ---------------------------------------------------*/
  --mono-text:           var(--mono-ink);
  --mono-text-muted:     var(--mono-gray-600);
  --mono-text-subtle:    var(--mono-gray-500);
  --mono-border:         var(--mono-gray-200);
  --mono-border-strong:  var(--mono-gray-300);
  --mono-surface:        var(--mono-white);
  --mono-surface-subtle: var(--mono-gray-50);
  --mono-surface-raised: var(--mono-gray-100);
  --mono-surface-dark:   var(--mono-ink);

  /* ---- Status (rarely used on marketing pages) ---------------------------*/
  --mono-success:        #22c55e;
  --mono-warning:        #f59e0b;
  --mono-error:          #ef4444;
  --mono-info:           #3b82f6;

  /* ---- Typography ---------------------------------------------------------*/
  --mono-font-display: 'Bricolage Grotesque','Bricolage Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono-font-mono:    'JetBrains Mono','Menlo',monospace;
  /* No serif/italic accent — Bricolage Grotesque does everything (2026-06-10). */

  --mono-w-normal:    400;
  --mono-w-medium:    500;
  --mono-w-semibold:  600;
  --mono-w-bold:      700;
  --mono-w-extrabold: 800;   /* the signature heading weight */

  /* Fluid type scale (clamp: min, preferred-vw, max) */
  --mono-fs-display: clamp(2.5rem, 5.5vw, 5rem);      /* H1  ~80px */
  --mono-fs-h2:      clamp(1.875rem, 3.5vw, 2.75rem); /* H2  ~44px */
  --mono-fs-h2-lg:   clamp(2rem, 4vw, 3.25rem);       /* big statement H2 */
  --mono-fs-h3:      1.125rem;   /* 18px card titles */
  --mono-fs-h4:      1rem;       /* 16px feature/step heads */
  --mono-fs-lead:    1rem;       /* 16px lead paragraph */
  --mono-fs-body:    0.875rem;   /* 14px body */
  --mono-fs-sm:      0.8125rem;  /* 13px small/desc */
  --mono-fs-cta:     0.9375rem;  /* 15px button text */
  --mono-fs-eyebrow: 0.6875rem;  /* 11px uppercase label */

  --mono-lh-display: 1.02;
  --mono-lh-heading: 1.05;
  --mono-lh-snug:    1.45;
  --mono-lh-body:    1.6;

  --mono-track-display: -0.035em;  /* tight on display */
  --mono-track-heading: -0.03em;
  --mono-track-body:    -0.005em;  /* near-universal micro-tighten */
  --mono-track-label:   0.06em;    /* POSITIVE on uppercase labels */

  /* ---- Spacing (4px base · 8px grid) --------------------------------------*/
  --mono-space-1:  4px;
  --mono-space-2:  8px;    /* primary small gap */
  --mono-space-3:  12px;   /* primary medium gap */
  --mono-space-4:  16px;   /* base unit (grid gaps) */
  --mono-space-5:  20px;
  --mono-space-6:  24px;
  --mono-space-7:  28px;
  --mono-space-8:  32px;   /* section-head margin · container padding */
  --mono-space-10: 40px;
  --mono-space-12: 48px;   /* recommended section rhythm */
  --mono-space-14: 56px;
  --mono-space-16: 64px;
  --mono-space-18: 72px;
  --mono-space-20: 80px;

  --mono-section-y:    48px;   /* recommended vertical section padding */
  --mono-section-head: 32px;   /* gap below a section eyebrow+H2 block */

  /* ---- Containers ---------------------------------------------------------*/
  --mono-container:        1660px;  /* body content width */
  --mono-container-narrow: 1080px;  /* reading width (FAQ, prose) */
  --mono-container-pad:    32px;    /* → 20px under 720px (see media query) */

  /* ---- Radius -------------------------------------------------------------*/
  --mono-radius-sm:   8px;    /* small interactive (panel buttons, chips) */
  --mono-radius-md:   12px;   /* tiles, dropdown items */
  --mono-radius-lg:   16px;   /* DEFAULT card */
  --mono-radius-xl:   20px;   /* large card · mobile downscale of 2xl */
  --mono-radius-2xl:  28px;   /* statement containers (hero blocks) */
  --mono-radius-pill: 999px;  /* buttons, badges, search bar, dots */

  /* ---- Shadows (elevation) ------------------------------------------------*/
  --mono-shadow-xs:      0 1px 2px rgba(0,0,0,0.04);                                  /* chip / pill rest */
  --mono-shadow-card:    0 1px 2px rgba(17,17,17,0.04), 0 18px 50px rgba(17,17,17,0.05); /* white card rest */
  --mono-shadow-hover:   0 12px 28px rgba(17,24,39,0.08);                             /* card hover (neutral) */
  --mono-shadow-lift:    0 8px 25px rgba(0,0,0,0.12);                                 /* stronger hover lift */
  --mono-shadow-lime:    0 14px 32px rgba(204,234,74,0.22);                           /* lime-glow hover */
  --mono-shadow-cta:     0 10px 24px rgba(204,234,74,0.32);                           /* primary CTA glow */
  --mono-shadow-dropdown:0 24px 60px rgba(17,24,39,0.10);                             /* menus / autocomplete */
  --mono-shadow-panel:   0 20px 60px rgba(17,24,39,0.08);                             /* large elevated panel */

  /* ---- Motion -------------------------------------------------------------*/
  --mono-ease:        cubic-bezier(0.22, 0.61, 0.36, 1); /* signature decelerate */
  --mono-dur-fast:    0.15s;
  --mono-dur:         0.2s;
  --mono-dur-slow:    0.25s;
  --mono-dur-slower:  0.4s;
  --mono-transition-button: background var(--mono-dur), color var(--mono-dur), border-color var(--mono-dur), transform var(--mono-dur), box-shadow var(--mono-dur-slow);
  --mono-transition-card:   transform var(--mono-dur-slow) var(--mono-ease), box-shadow var(--mono-dur-slow) var(--mono-ease), border-color var(--mono-dur);
}

/* ============================================================================
   BASE / SCOPE
   Wrap a page region in `.mono` to opt into the system without affecting the
   rest of the cascade.
   ============================================================================ */
.mono {
  font-family: var(--mono-font-display);
  color: var(--mono-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Plain (un-classed) links inherit ink; classed links (.mono-btn*, .mono-link)
   keep their own colour — `:not([class])` avoids the specificity clash that
   would otherwise paint button labels with the inherited text colour. */
.mono a { text-decoration: none; }
.mono a:not([class]) { color: inherit; }

/* ============================================================================
   TYPOGRAPHY HELPERS
   ============================================================================ */
.mono-display {
  font-family: var(--mono-font-display);
  font-size: var(--mono-fs-display);
  font-weight: var(--mono-w-extrabold);
  line-height: var(--mono-lh-display);
  letter-spacing: var(--mono-track-display);
  color: var(--mono-ink);
  margin: 0;
}
.mono-h2 {
  font-family: var(--mono-font-display);
  font-size: var(--mono-fs-h2);
  font-weight: var(--mono-w-extrabold);
  line-height: var(--mono-lh-heading);
  letter-spacing: var(--mono-track-heading);
  color: var(--mono-ink);
  margin: 0;
}
.mono-h2--lg { font-size: var(--mono-fs-h2-lg); letter-spacing: var(--mono-track-display); }
/* No italic accent — keep emphasis upright so a bare <em> in a heading never
   falls back to a synthetic Bricolage oblique. Emphasis stays same weight/face. */
.mono-display em, .mono-h2 em, .mono-h3 em { font-style: normal; font-weight: inherit; }
.mono-h3 {
  font-size: var(--mono-fs-h3); font-weight: var(--mono-w-bold);
  letter-spacing: -0.015em; color: var(--mono-ink); margin: 0;
}
.mono-lead {
  font-size: var(--mono-fs-lead); font-weight: var(--mono-w-normal);
  line-height: var(--mono-lh-body); letter-spacing: var(--mono-track-body);
  color: var(--mono-text-muted); margin: 0;
}
.mono-body {
  font-size: var(--mono-fs-body); line-height: var(--mono-lh-body);
  letter-spacing: var(--mono-track-body); color: var(--mono-text-muted);
}
.mono-eyebrow {
  display: inline-block;
  font-size: var(--mono-fs-eyebrow); font-weight: var(--mono-w-extrabold);
  letter-spacing: var(--mono-track-label); text-transform: uppercase;
  color: var(--mono-text-subtle); margin: 0 0 var(--mono-space-3);
}
/* Eyebrow rendered as a pale-lime pill (used on SVG-editor / API sections) */
.mono-eyebrow--pill {
  background: var(--mono-lime-pale); color: var(--mono-lime-ink);
  padding: 6px 14px; border-radius: var(--mono-radius-pill);
}

/* ============================================================================
   BUTTONS
   Base + four variants + two sizes. The signature interaction is the
   "pill-fill swap": transparent/dark → lime, with a 2px lift.
   ============================================================================ */
.mono-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--mono-space-2);
  height: 52px; padding: 0 28px;
  font-family: var(--mono-font-display); font-size: var(--mono-fs-cta);
  font-weight: var(--mono-w-bold); letter-spacing: var(--mono-track-body);
  border-radius: var(--mono-radius-pill); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: var(--mono-transition-button);
}
.mono-btn:hover { transform: translateY(-2px); }

/* Primary — dark, fills lime on hover (the hero CTA) */
.mono-btn--primary {
  background: var(--mono-ink); color: var(--mono-white); border-color: var(--mono-ink);
}
.mono-btn--primary:hover {
  background: var(--mono-lime); color: var(--mono-ink); border-color: var(--mono-lime);
  box-shadow: var(--mono-shadow-cta);
}

/* Secondary — outline, fills lime on hover */
.mono-btn--secondary {
  background: transparent; color: var(--mono-ink); border-color: var(--mono-ink);
}
.mono-btn--secondary:hover {
  background: var(--mono-lime); color: var(--mono-ink); border-color: var(--mono-lime);
}

/* Lime — solid accent, brightens on hover */
.mono-btn--lime {
  background: var(--mono-lime); color: var(--mono-ink); border-color: var(--mono-lime);
}
.mono-btn--lime:hover {
  background: var(--mono-lime-bright); border-color: var(--mono-lime-bright);
  box-shadow: 0 4px 12px rgba(204,234,74,0.35);
}

/* Ghost-on-dark — for dark sections (figma/API/final CTA) */
.mono-btn--ghost-dark {
  background: rgba(255,255,255,0.06); color: var(--mono-white);
  border-color: rgba(255,255,255,0.3);
}
.mono-btn--ghost-dark:hover {
  background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.55);
}

/* Glass — over imagery/video (frosted) */
.mono-btn--glass {
  background: rgba(255,255,255,0.62); color: var(--mono-ink);
  border-color: rgba(17,24,39,0.10); backdrop-filter: blur(6px);
}
.mono-btn--glass:hover { background: rgba(255,255,255,0.82); }

/* Sizes */
.mono-btn--sm { height: 42px; padding: 0 22px; font-size: var(--mono-fs-body); }
.mono-btn--lg { height: 56px; padding: 0 32px; font-size: 1.0625rem; }

/* Arrow that nudges right on hover — wrap the glyph in .mono-btn__arrow */
.mono-btn__arrow { display: inline-block; transition: transform var(--mono-dur-slow); }
.mono-btn:hover .mono-btn__arrow { transform: translateX(3px); }

/* Text link with arrow */
.mono-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--mono-fs-body); font-weight: var(--mono-w-semibold);
  color: var(--mono-ink); transition: color var(--mono-dur);
}
.mono-link .mono-btn__arrow,
.mono-link__arrow { display: inline-block; transition: transform var(--mono-dur-slow); }
.mono-link:hover .mono-link__arrow { transform: translateX(3px); }

/* ============================================================================
   CARDS
   `.mono-card` rest state + three hover modifiers. Wrap a zoomable image in
   `.mono-card__media > img` and the image scales while the card stays put.
   ============================================================================ */
.mono-card {
  background: var(--mono-surface); border: 1px solid var(--mono-border);
  border-radius: var(--mono-radius-lg); overflow: hidden;
  transition: var(--mono-transition-card);
}
/* Hover: neutral lift (default — packs, collections, icon cards) */
.mono-card--lift:hover { transform: translateY(-4px); box-shadow: var(--mono-shadow-lift); }
/* Hover: border goes lime (testimonials, reviews) */
.mono-card--accent:hover { transform: translateY(-3px); border-color: var(--mono-lime); }
/* Hover: lime glow (feature highlights) */
.mono-card--glow:hover { transform: translateY(-3px); box-shadow: var(--mono-shadow-lime); border-color: var(--mono-lime); }

.mono-card__media { overflow: hidden; }
.mono-card__media img,
.mono-card__media video { display: block; width: 100%; transition: transform var(--mono-dur-slower) var(--mono-ease); }
.mono-card:hover .mono-card__media img,
.mono-card:hover .mono-card__media video { transform: scale(1.04); }

/* Statement container (large dark/feature blocks) */
.mono-panel {
  border-radius: var(--mono-radius-2xl);
  box-shadow: var(--mono-shadow-panel);
}
.mono-panel--dark { background: var(--mono-surface-dark); color: var(--mono-white); }

/* ============================================================================
   PILLS · BADGES · CHIPS
   ============================================================================ */
.mono-pill {
  display: inline-flex; align-items: center; gap: var(--mono-space-2);
  font-size: var(--mono-fs-sm); font-weight: var(--mono-w-medium);
  color: var(--mono-gray-700);
  background: var(--mono-surface); border: 1px solid var(--mono-border);
  padding: 6px 14px; border-radius: var(--mono-radius-pill);
  box-shadow: var(--mono-shadow-xs);
}
/* Interactive chip (search suggestions / filters) */
.mono-chip {
  display: inline-flex; align-items: center;
  font-size: 0.75rem; font-weight: var(--mono-w-medium); color: var(--mono-gray-700);
  background: var(--mono-surface-subtle); border: 1px solid transparent;
  padding: 5px 12px; border-radius: var(--mono-radius-pill);
  cursor: pointer; transition: background var(--mono-dur), border-color var(--mono-dur), color var(--mono-dur);
}
.mono-chip:hover { background: var(--mono-surface); border-color: var(--mono-ink); color: var(--mono-ink); }
/* Badge — "New" / "Free" (lime) */
.mono-badge {
  display: inline-flex; align-items: center;
  font-size: 0.625rem; font-weight: var(--mono-w-extrabold);
  letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--mono-lime); color: var(--mono-ink);
  padding: 3px 9px; border-radius: var(--mono-radius-pill);
}
/* Check token (lime circle + dark tick) */
.mono-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--mono-lime); color: var(--mono-ink); flex-shrink: 0;
}

/* ============================================================================
   SEARCH INPUT (pill)
   ============================================================================ */
.mono-search {
  display: flex; align-items: center; gap: 10px;
  max-width: 720px; margin: 0 auto;
  background: var(--mono-surface); border: 1px solid rgba(17,24,39,0.10);
  border-radius: var(--mono-radius-pill); padding: 8px 8px 8px 24px;
  box-shadow: 0 4px 10px rgba(17,24,39,0.06), 0 18px 44px rgba(17,24,39,0.14);
  transition: border-color var(--mono-dur), box-shadow var(--mono-dur);
}
.mono-search:focus-within {
  border-color: var(--mono-ink);
  box-shadow: 0 6px 14px rgba(17,24,39,0.08), 0 22px 54px rgba(17,24,39,0.18);
}
.mono-search input {
  flex: 1; height: 42px; background: transparent; border: 0; outline: 0;
  font-family: var(--mono-font-display); font-size: var(--mono-fs-cta); color: var(--mono-ink);
}
.mono-search input::placeholder { color: var(--mono-text-subtle); letter-spacing: var(--mono-track-body); }

/* ============================================================================
   FORM FIELDS
   ============================================================================ */
.mono-field { display: grid; gap: 7px; margin-bottom: var(--mono-space-4); }
.mono-field > label { font-size: 0.8rem; font-weight: var(--mono-w-semibold); color: var(--mono-gray-700); }
.mono-input,
.mono-field input:not([type=checkbox]):not([type=radio]),
.mono-field textarea,
.mono-field select {
  width: 100%; font-family: var(--mono-font-display); font-size: 0.9rem; color: var(--mono-ink);
  background: var(--mono-white); border: 1px solid var(--mono-border); border-radius: var(--mono-radius-md);
  padding: 11px 14px; outline: none;
  transition: border-color var(--mono-dur), box-shadow var(--mono-dur);
}
.mono-input::placeholder,
.mono-field input::placeholder,
.mono-field textarea::placeholder { color: var(--mono-gray-400); }
.mono-input:focus,
.mono-field input:focus,
.mono-field textarea:focus,
.mono-field select:focus { border-color: var(--mono-ink); box-shadow: 0 0 0 3px rgba(17,24,39,0.06); }
.mono-field textarea { resize: vertical; min-height: 120px; }

/* ============================================================================
   FAQ ACCORDION  (native <details>)
   ============================================================================ */
.mono-faq details { border-bottom: 1px solid var(--mono-border); }
.mono-faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 4px; font-size: 1rem; font-weight: var(--mono-w-bold); letter-spacing: -0.01em; color: var(--mono-ink);
}
.mono-faq summary::-webkit-details-marker { display: none; }
.mono-faq summary::after { content: "+"; font-size: 24px; font-weight: 300; color: var(--mono-gray-500); flex-shrink: 0; transition: transform var(--mono-dur-slow) var(--mono-ease); }
.mono-faq details[open] summary::after { transform: rotate(45deg); }
.mono-faq__a { padding: 0 4px 18px; font-size: 0.9rem; line-height: 1.65; color: var(--mono-gray-600); }
.mono-faq__a a, .mono-faq a:not(.mono-btn) { color: var(--mono-ink); border-bottom: 2px solid var(--mono-lime); }

/* ============================================================================
   LAYOUT HELPERS
   ============================================================================ */
.mono-container { max-width: var(--mono-container); margin: 0 auto; padding: 0 var(--mono-container-pad); }
.mono-container--narrow { max-width: var(--mono-container-narrow); }
.mono-section { padding: var(--mono-section-y) 0; }
.mono-section-head { max-width: 780px; margin: 0 0 var(--mono-section-head); }
.mono-section-action { margin-top: var(--mono-section-head); }

/* Grid families — 5-col (packs/icons/categories) and 3-col (collections/features) */
.mono-grid { display: grid; gap: var(--mono-space-4); }
.mono-grid--5 { grid-template-columns: repeat(5, 1fr); }
.mono-grid--4 { grid-template-columns: repeat(4, 1fr); }
.mono-grid--3 { grid-template-columns: repeat(3, 1fr); gap: var(--mono-space-5); }
.mono-grid--2 { grid-template-columns: repeat(2, 1fr); }

/* Separator with a centred lime pill.
   CANONICAL (matches the homepage .iv5-sep, 2026-06-10): the hairline is
   CONTAINED to the body content width (1660px) and centred — it must NOT
   run edge-to-edge across the viewport. */
.mono-sep {
  position: relative; height: 1px; margin: var(--mono-space-10) auto;
  max-width: var(--mono-container); background: var(--mono-border);
}
.mono-sep::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 4px; border-radius: var(--mono-radius-pill); background: var(--mono-lime);
}

/* ============================================================================
   SCROLL REVEAL — homepage blur-in pattern (.iv5-reveal), shared utility.
   CWV-safe: opacity/transform/filter only (composite-only, zero CLS); gated
   on html.mono-js so no-JS users see everything; honours reduced motion.
   Wire-up: add .mono-reveal to sections + the snippet that toggles
   .is-visible via IntersectionObserver (see docs/design-system).
   ============================================================================ */
html.mono-js .mono-reveal {
  opacity: 0; transform: translateY(18px); filter: blur(9px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.8s ease;
}
html.mono-js .mono-reveal.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
  html.mono-js .mono-reveal { filter: none; transform: none; transition: opacity 0.4s ease; }
}

/* ============================================================================
   FAQ v2 — EXACT homepage pattern (.iv5-faq, 2026-06-10): one bordered grid,
   2 balanced columns (1fr 1fr, 56px gap, border-top on the list + border-bottom
   per item), +/– marker, padding transition on open — NO JS height animation
   (that's what made earlier FAQs jump). Reading width 1080px.
   ============================================================================ */
.mono-faq2 {
  max-width: var(--mono-container-narrow); margin: 0 auto;
  border-top: 1px solid var(--mono-border);
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px;
}
.mono-faq2 details {
  border-bottom: 1px solid var(--mono-border);
  padding: 22px 0; transition: padding 0.2s ease;
}
.mono-faq2 details[open] { padding: 24px 0 28px; }
.mono-faq2 summary {
  cursor: pointer; list-style: none;
  font-family: var(--mono-font-display);
  font-size: 16px; font-weight: var(--mono-w-bold);
  color: var(--mono-ink); letter-spacing: -0.01em;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  transition: color 0.18s;
}
.mono-faq2 summary:hover { color: var(--mono-gray-700); }
.mono-faq2 summary::-webkit-details-marker { display: none; }
.mono-faq2 summary::after {
  content: '+'; font-size: 24px; font-weight: 300; color: var(--mono-gray-500);
  line-height: 1; transition: transform 0.25s, color 0.18s; flex-shrink: 0;
}
.mono-faq2 details[open] summary::after { content: '\2013'; color: var(--mono-ink); transform: rotate(180deg); }
.mono-faq2 details p {
  font-family: var(--mono-font-display);
  font-size: 14px; line-height: 1.65; color: var(--mono-gray-600);
  margin: 14px 0 0; letter-spacing: -0.005em;
}
.mono-faq2 details a { color: var(--mono-ink); border-bottom: 2px solid var(--mono-lime); padding-bottom: 1px; text-decoration: none; }
@media (max-width: 760px) { .mono-faq2 { grid-template-columns: 1fr; column-gap: 0; } }

/* ============================================================================
   DARK VIDEO BAND BACKGROUND — homepage "Made by real designers" pattern:
   lazy BunnyCDN Stream iframe at 0.55 opacity under a dark gradient overlay;
   content sits above. Host section needs position:relative + overflow:hidden
   + a solid dark background as the no-video fallback.
   ============================================================================ */
.mono-videobg { position: absolute; inset: 0; z-index: 0; opacity: 0.55; pointer-events: none; }
.mono-videobg iframe, .mono-videobg video {
  position: absolute; top: 50%; left: 50%;
  width: 140%; height: 140%; min-width: 140%; min-height: 140%;
  transform: translate(-50%, -50%); border: 0;
}
.mono-videobg-overlay {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.4) 0%, rgba(17, 24, 39, 0.78) 100%);
}
@media (prefers-reduced-motion: reduce) { .mono-videobg { display: none; } }

/* ============================================================================
   RESPONSIVE — five named breakpoints (rationalized from the homepage's 10+)
   sm 560 · md 720 (major mobile) · lg 980 (tablet) · xl 1100 (grids 5→3) · 2xl 1400
   ============================================================================ */
@media (max-width: 1100px) {
  .mono-grid--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .mono-grid--4 { grid-template-columns: repeat(3, 1fr); }
  .mono-grid--3 { grid-template-columns: 1fr; max-width: 540px; margin-inline: auto; }
}
@media (max-width: 720px) {
  :root { --mono-container-pad: 20px; --mono-section-y: 32px; }
  .mono-grid--5, .mono-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .mono-radius-2xl { } /* statement cards downscale 28→20 in components */
}
@media (max-width: 560px) {
  .mono-grid--5, .mono-grid--4, .mono-grid--2 { grid-template-columns: 1fr; }
}

/* ============================================================================
   MOTION SAFETY
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .mono-btn, .mono-card, .mono-card__media img, .mono-card__media video,
  .mono-btn__arrow, .mono-link__arrow { transition-duration: 0.01ms !important; }
  .mono-btn:hover, .mono-card--lift:hover, .mono-card--accent:hover, .mono-card--glow:hover { transform: none; }
}

/* ============================================================================
   LOGO MARQUEE — the pricing-plans "trusted by" rotating reel, shared.
   Markup: .mono-marquee-wrap > .mono-marquee-label + .mono-marquee >
   .mono-marquee__track with the logo set rendered TWICE (the -50% keyframe
   wraps seamlessly). Deliberately keeps rolling under prefers-reduced-motion
   (content navigation, same exception as the homepage reels).
   ============================================================================ */
.mono-marquee-wrap { text-align: center; }
.mono-marquee-label {
  font-size: 11px; color: var(--mono-gray-500);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 28px; font-weight: var(--mono-w-extrabold);
}
.mono-marquee {
  position: relative; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mono-marquee__track {
  display: flex; align-items: center; gap: 64px;
  animation: mono-marquee 50s linear infinite; width: max-content;
}
.mono-marquee__track img {
  height: 24px; width: auto; opacity: 0.55;
  filter: grayscale(100%); transition: opacity 0.2s, filter 0.2s;
}
.mono-marquee__track img:hover { opacity: 1; filter: grayscale(0%); }
@keyframes mono-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }