/* =========================================================
   BLOKZA v3.1 — Refined SaaSwise-style design
   ========================================================= */

:root {
  --bg: #f8f9fb;
  --bg-soft: #f1f3f8;
  --bg-mute: #e9ecf3;
  --bg-tint: #eef2fb;
  --surface: #ffffff;
  --border: #e1e5ed;
  --border-2: #cdd2de;

  --fg: #181024;
  --fg-2: #2a1f3d;
  --fg-muted: #5b5470;
  --fg-dim: #6b7280;
  /* 2.41:1 against the page at #9aa3b2 — under the 4.5:1 AA needs, and this
     token colours real text: breadcrumbs, section labels, timestamps, the
     template categories. Same blue-grey hue, dark enough to read (4.72:1). */
  --fg-faint: #667085;

  --p-50:  #f4f1ff;
  --p-75:  #ece6ff;
  --p-100: #e1d8ff;
  --p-200: #d0c5fd;
  --p-300: #b3a4f9;
  --p-400: #9683f0;
  --p-500: #7a5fe5;
  --p-600: #6442d6;
  --p-700: #4f30c2;
  --p-800: #3b1f9b;

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Monaco, Consolas, monospace;

  --r-sm: 4px;
  --r-md: 4px;
  --r-lg: 4px;
  --r-xl: 6px;
  --r-2xl: 6px;
  --r-3xl: 8px;

  --shadow-xs: 0 1px 2px rgba(15, 15, 20, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 15, 20, 0.04), 0 2px 4px rgba(15, 15, 20, 0.04);
  --shadow-md: 0 1px 2px rgba(15, 15, 20, 0.05), 0 8px 24px -6px rgba(15, 15, 20, 0.10);
  --shadow-lg: 0 24px 60px -20px rgba(122, 95, 229, 0.18), 0 12px 32px -16px rgba(15, 15, 20, 0.14);
  --shadow-purple: 0 12px 30px -10px rgba(122, 95, 229, 0.45);

  --container: 1320px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Selection off only for interactive chrome; content stays copyable */
.btn, .site-nav__links a, .site-nav__cta, .brand-mark, .brand-name,
.float-chip {
  -webkit-user-select: none;
  user-select: none;
}

/* Keep real inputs and code usable/selectable */
input, textarea, select, [contenteditable="true"], pre, code {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

img, svg, video, iframe { display: block; max-width: 100%; }
button { font-family: inherit; }
a { color: inherit; text-decoration: none; }

/* Anchored sections shouldn't hide under the sticky nav */
[id] { scroll-margin-top: 96px; }


::selection { background: var(--p-200); color: var(--p-800); }

/* ----- Type ----- */
h1, h2, h3, h4, h5 {
  margin: 0;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--fg);
}
/* Serif display only at hero/section scale; smaller headings stay sans
   (serifs get spindly and dated at small sizes). */
h1, h2 { font-family: var(--font-display); }
h3, h4, h5 { font-family: var(--font-sans); letter-spacing: -0.015em; }

/* Emphasis carried by weight, not slope.
   Neither Inter nor Fraunces is loaded with an italic axis, so the browser was
   shearing the roman instead — a synthetic oblique, on two short runs in the
   whole site. Inter's real italic is a 50 KB download to serve those two, which
   is not a trade worth making, and this is already the idiom here: both
   `.views__item figcaption em` and `.docs-find__hit em` set it straight.
   The demo pages load demos.css alone and keep their own Playfair italics. */
em { font-style: normal; font-weight: 500; }
h1 { font-size: clamp(2.8rem, 1.6rem + 4.4vw, 5.2rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(2.1rem, 1.5rem + 1.9vw, 3.2rem); letter-spacing: -0.028em; }
h3 { font-size: clamp(1.18rem, 1rem + 0.5vw, 1.4rem); }
p  { margin: 0; color: var(--fg-muted); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--p-700);
  background: var(--p-50);
  border: 1px solid var(--p-200);
  border-radius: 4px;
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
}
.eyebrow .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 4px;
  background: var(--p-600);
  box-shadow: 0 0 0 0 rgba(122, 95, 229, 0.4);
  animation: pulse-dot 2.4s var(--ease-in-out) infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(122, 95, 229, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(122, 95, 229, 0); }
}

.kicker {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--p-700);
}

.text-purple { color: var(--p-700); }
.text-muted { color: var(--fg-muted); }
.text-dim { color: var(--fg-dim); }

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

/* ----- Layout ----- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.section { padding: 120px 0; position: relative; }
.section-tight { padding: 72px 0; position: relative; }
@media (max-width: 720px) { .section { padding: 88px 0; } }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ----- Buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 0;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease,
              transform 0.18s var(--ease), box-shadow 0.18s ease;
  position: relative;
  isolation: isolate;
}
.btn:focus-visible {
  /*
   * A real ring, not a tint. This used to be `outline: none` plus a 3px
   * --p-200 (#d0c5fd) glow, which is 1.52:1 against the page — below the 3:1
   * WCAG 2.2 asks of a focus indicator, and in practice invisible, so a
   * keyboard user could not tell which of a page's several CTAs was focused.
   * The rule also beat the good generic ring below on specificity, so buttons
   * were the *only* controls on the site without one.
   *
   * The white inner ring keeps the outline readable when the button's own fill
   * is dark or when it sits on a tinted section.
   */
  outline: 2px solid var(--p-700);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  color: #fff;
  background: var(--p-700);
  box-shadow: var(--shadow-purple);
}
.btn-primary:hover { background: var(--p-800); transform: translateY(-1px); box-shadow: 0 16px 36px -10px rgba(122, 95, 229, 0.55); }

.btn-secondary {
  color: var(--fg);
  background: #fff;
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover {
  border-color: var(--border-2);
  background: var(--bg-soft);
  transform: translateY(-1px);
}


.btn-sm { padding: 10px 16px; font-size: 14px; border-radius: 0; }
.btn-lg { padding: 16px 28px; font-size: 16px; border-radius: 0; }

.btn .arr {
  display: inline-grid;
  place-items: center;
  width: 14px; height: 14px;
  transition: transform 0.25s var(--ease);
}
.btn:hover .arr { transform: translate(3px, -3px); }

/* ----- Cards ----- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  transition: box-shadow 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.card-hover:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-2);
  transform: translateY(-3px);
}

.icon-tile {
  display: inline-grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 4px;
  background: linear-gradient(160deg, #fff 0%, var(--p-50) 100%);
  color: var(--p-700);
  border: 1px solid var(--p-200);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 2px rgba(122, 95, 229, 0.08);
  flex: 0 0 auto;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.card-hover:hover .icon-tile {
  transform: scale(1.05) rotate(-3deg);
  box-shadow: 0 6px 18px -6px rgba(122, 95, 229, 0.35);
}
.icon-tile.alt-amber { background: linear-gradient(160deg, #fff 0%, #fff7ed 100%); border-color: #fed7aa; color: #c2410c; }
.icon-tile.alt-rose  { background: linear-gradient(160deg, #fff 0%, #fff1f2 100%); border-color: #fecdd3; color: #be123c; }
.icon-tile.alt-emerald { background: linear-gradient(160deg, #fff 0%, #ecfdf5 100%); border-color: #a7f3d0; color: #047857; }
.icon-tile.alt-sky { background: linear-gradient(160deg, #fff 0%, #f0f9ff 100%); border-color: #bae6fd; color: #0369a1; }


/* ----- Nav ----- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.site-nav.is-stuck {
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 18px;
}
.site-nav__brand {
  display: inline-flex;
  align-items: center;
  /* Never compress the lockup: as a flex item it was shrinking below its own
     content width, so the wordmark overflowed the anchor and collided with the
     first nav link in the ~24px band above the mobile breakpoint. Stated
     without naming the brand, because the bug is the shrink, not the string. */
  flex-shrink: 0;
  gap: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 20px;
  color: var(--fg);
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__links a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 9px 16px;
  border-radius: 4px;
  color: var(--fg-2);
  font-size: 15px;
  font-weight: 500;
  transition: color 0.15s ease, background 0.15s ease;
}
.site-nav__links a:hover { color: var(--p-700); background: var(--p-50); }
.site-nav__links a.is-active { color: var(--p-700); background: var(--p-50); }
.site-nav__links a svg { color: currentColor; opacity: 0.6; }

.site-nav__cta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-toggle {
  display: none;
  width: 38px; height: 38px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--fg);
  cursor: pointer;
}
.site-nav__mobile {
  display: none;
  border-top: 1px solid var(--border);
  padding: 12px 24px 16px;
  background: #fff;
}
.site-nav__mobile.is-open { display: block; }
.site-nav__mobile a {
  display: block;
  padding: 10px 4px;
  color: var(--fg-2);
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
}
.site-nav__mobile a:hover { color: var(--p-700); }
.site-nav__mobile .btn { width: 100%; margin-top: 8px; }

@media (max-width: 880px) {
  .site-nav__links,
  .site-nav__cta .btn-secondary { display: none; }
  .nav-toggle { display: inline-grid; place-items: center; }
}

/* ----- Footer ----- */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 64px;
  padding: 64px 0 32px;
  background: var(--bg-soft);
}
.site-footer__grid {
  display: grid;
  gap: 36px;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
}
@media (max-width: 880px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer__coltitle {
  /* h2 for the document outline, but the display serif h2 normally carries is
     for section titles — a footer column label is not one. */
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 14px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.site-footer a { color: var(--fg-muted); font-size: 14px; transition: color 0.15s ease; }
.site-footer a:hover { color: var(--p-700); }
.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 28px;
  margin-top: 48px;
  border-top: 1px solid var(--border);
  color: var(--fg-dim);
  font-size: 13px;
}

/* ----- Reveal & motion ----- */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
[data-reveal-stagger].is-visible > * { opacity: 1; transform: none; }
[data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 0.05s; }
[data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 0.12s; }
[data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 0.19s; }
[data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 0.26s; }
[data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 0.33s; }
[data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 0.40s; }
[data-reveal-stagger].is-visible > *:nth-child(7) { transition-delay: 0.47s; }
[data-reveal-stagger].is-visible > *:nth-child(8) { transition-delay: 0.54s; }
[data-reveal-stagger].is-visible > *:nth-child(n+9) { transition-delay: 0.6s; }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
  /*
   * Smooth scrolling is motion too. Without this, every in-page anchor and the
   * docs table of contents animates the viewport for a user who has asked the
   * system for no animation - which is the population most likely to be made
   * unwell by a long scroll.
   */
  html { scroll-behavior: auto !important; }
}


   
 .mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }   
.full-w { width: 100%; }


/* =================== NAV SUBMENUS =================== */
.site-nav__links li { position: relative; }
.site-nav__links .submenu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 9px 16px;
  border-radius: 4px;
  background: transparent;
  border: 0;
  color: var(--fg-2);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s ease, background 0.15s ease;
}
.site-nav__links .submenu-trigger svg {
  color: currentColor;
  opacity: 0.5;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.site-nav__links .has-submenu:hover .submenu-trigger,
.site-nav__links .has-submenu.is-open .submenu-trigger {
  color: var(--p-700);
  background: var(--p-50);
}
.site-nav__links .has-submenu:hover .submenu-trigger svg,
.site-nav__links .has-submenu.is-open .submenu-trigger svg {
  transform: rotate(180deg);
  opacity: 1;
}


.has-submenu:hover .submenu,
.has-submenu.is-open .submenu,
.has-submenu:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}


.submenu a .ico {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 4px;
  background: var(--p-50);
  color: var(--p-700);
  border: 1px solid var(--p-200);
  flex: 0 0 auto;
}
.submenu a .meta { display: grid; gap: 2px; }
.submenu a .meta strong { font-weight: 600; font-size: 13.5px; }
.submenu a .meta span { font-size: 11.5px; color: var(--fg-dim); font-weight: 400; }

@media (max-width: 880px) {
  .submenu, .submenu-trigger { display: none !important; }
}

/* Mobile submenu rendering */
.site-nav__mobile .mob-group { margin-top: 8px; }
.site-nav__mobile .mob-group strong {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  font-weight: 600;
  padding: 8px 4px 4px;
}
.site-nav__mobile .mob-group a {
  padding-left: 12px;
}


/* =================== ACCESSIBILITY =================== */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--p-700);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: top 0.2s ease;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.skip-link:focus {
  top: 16px;
  clip: auto;
  overflow: visible;
  /* Was --p-200, the same 1.52:1 lavender the buttons used. */
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

/* Better focus rings everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
details > summary:focus-visible {
  outline: 2px solid var(--p-500);
  outline-offset: 2px;
  border-radius: 2px;
}


/* =========================================================
   Production animations — beyond simple reveal
   ========================================================= */

/* Fade-up with subtle scale (cards) */
[data-reveal-scale] {
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal-scale].is-visible { opacity: 1; transform: none; }

/* Slide-from-left / right */
[data-reveal-left] {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
[data-reveal-left].is-visible { opacity: 1; transform: none; }
[data-reveal-right] {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
[data-reveal-right].is-visible { opacity: 1; transform: none; }

/* Word-by-word reveal for headlines */
.reveal-words .word {
  display: inline-block;
  /*
   * The mask that makes the word slide up from nothing. It has to extend below
   * the baseline or it clips descenders: "ship" rendered as "shi" with the p's
   * tail cut flat. The negative margin gives the padding back to the layout, so
   * line height and wrapping are unchanged.
   */
  overflow: hidden;
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
  vertical-align: top;
}
.reveal-words .word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.9s var(--ease);
}
.reveal-words.is-visible .word > span { transform: translateY(0); }

/* Button shine sweep on hover */
.btn-primary { overflow: hidden; }
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  /* Swept with transform rather than `left`: the same movement, composited,
     instead of a layout pass per frame for the whole hover. */
  transform: translateX(-250%);
  transition: transform 0.6s var(--ease);
  pointer-events: none;
}
.btn-primary:hover::after { transform: translateX(250%); }


@keyframes brand-pan {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Floating animation for hero decorative elements */
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}


/* Magnetic buttons: use the independent `translate` property so the
   cursor attraction never fights hover/active `transform` states */
[data-magnetic] {
  transition: translate 0.3s var(--ease);
  will-change: translate;
}

/* Pulse glow on focus indicators */
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(122, 95, 229, 0.35); }
  70%  { box-shadow: 0 0 0 14px rgba(122, 95, 229, 0); }
  100% { box-shadow: 0 0 0 0 rgba(122, 95, 229, 0); }
}

/* Card lift with cursor light */
.card-hover { will-change: transform; }
.card-hover::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(400px circle at var(--mx, -100%) var(--my, -100%), rgba(122, 95, 229, 0.06), transparent 40%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}
.card-hover { position: relative; isolation: isolate; }
.card-hover:hover::before { opacity: 1; }
.card-hover > * { position: relative; z-index: 1; }


.has-submenu:hover .submenu,
.has-submenu.is-open .submenu,
.has-submenu:focus-within .submenu {
  animation: submenu-pop 0.28s var(--ease);
}
@keyframes submenu-pop {
  0%   { opacity: 0; transform: translateY(-8px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Hero ::before — force hidden (no decorative bar) */
.hero::before {
  content: none !important;
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal-scale], [data-reveal-left], [data-reveal-right] { opacity: 1 !important; transform: none !important; }
  .reveal-words .word > span { transform: none !important; }
  .btn-primary::after, .brand-mark, .float-y { animation: none !important; }
}


/* =========================================================
   MEGA-MENU (Stripe-style 3 columns + featured card)
   ========================================================= */
.has-mega { position: static; }
.mega {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 320px;
  max-width: 400px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 40px -12px rgba(11, 18, 32, 0.18), 0 1px 2px rgba(11, 18, 32, 0.04);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.22s var(--ease), visibility 0.18s linear;
  z-index: 60;
}
.has-mega:hover .mega,
.has-mega.is-open .mega,
.has-mega:focus-within .mega {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}

.mega__inner {
  display: block;
}
.mega__coltitle {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 0 0 8px;
  padding: 0 12px;
}
.mega__link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 4px;
  color: var(--fg-2);
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s ease, transform 0.2s var(--ease);
  position: relative;
  width: 100%;
}
.mega__link:hover {
  background: var(--p-50);
  color: var(--p-700);
  transform: translateX(2px);
}
.mega__link .ico {
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 4px;
  background: var(--p-50);
  color: var(--p-700);
  border: 1px solid var(--p-100);
  flex: 0 0 auto;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.mega__link:hover .ico {
  background: var(--p-700);
  color: #fff;
  border-color: var(--p-700);
}
.mega__link .meta strong {
  display: block;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: inherit;
}
.mega__link .meta span {
  display: block;
  font-size: 12.5px;
  color: var(--fg-dim);
  font-weight: 400;
  margin-top: 2px;
  line-height: 1.5;
}
.mega__link:hover .meta span { color: var(--fg-muted); }


.mega__feature__visual .row {
  display: grid;
  grid-template-columns: 28px 1fr 32px;
  align-items: center;
  gap: 8px;
}
.mega__feature__visual .ic {
  width: 28px; height: 28px;
  border-radius: 4px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.18);
  display: grid;
  place-items: center;
  color: #fff;
}
.mega__feature__visual .ln {
  height: 6px;
  background: rgba(255,255,255,0.45);
  border-radius: 4px;
}

.mega__feature__visual .pill {
  height: 18px;
  background: #fff;
  border-radius: 4px;
}


@keyframes mega-pop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(0.97); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.has-mega:hover .mega,
.has-mega.is-open .mega,
.has-mega:focus-within .mega {
  animation: mega-pop 0.28s var(--ease);
}

@media (max-width: 880px) {
  .mega, .submenu-trigger { display: none !important; }
}


/* 2-column variant for Product mega-menu */
.has-mega--2col .mega { min-width: 560px; max-width: 640px; }
.mega__inner--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
/* Shrinks at 1040px, not 720px. The desktop nav survives down to 881px, so a
   560px panel anchored under "Product" hung off the left edge of the viewport
   for the whole 881-1030px band. The viewport clamp is a second belt: whatever
   the breakpoints say, the panel can never be wider than the window. */
@media (max-width: 1040px) {
  .has-mega--2col .mega { min-width: 320px; max-width: min(400px, calc(100vw - 32px)); }
  .mega__inner--2col { grid-template-columns: 1fr; }
}
.mega { max-width: calc(100vw - 32px); }


/* =========================================================
   Brand text override — refined violet text on light surfaces.
   - #5b3fd6 (violet-600) for headings/links/labels needing contrast
   - #d0c5fd remains the soft accent for chips, kickers on dark, etc.
   ========================================================= */
.kicker,
.text-purple,
.site-nav__links a:hover,
.site-nav__links a.is-active,
.site-nav__mobile a:hover,
.site-footer a:hover,
.submenu a:hover,
.site-nav__links .has-submenu:hover .submenu-trigger,
.site-nav__links .has-submenu.is-open .submenu-trigger,
.mega__link:hover,
.mega__feature__cta {
  color: #5b3fd6;
}

/* Soft-surface icon tiles + submenu icons keep the lavender tone
   on a tinted background, but the icon stroke uses the darker violet
   so the symbol stays readable. */
.icon-tile,
.submenu a .ico {
  color: #5b3fd6;
  background: #f4f1ff;
  border-color: #d0c5fd;
}

/*
 * A reveal that has not fired yet must not widen the page.
 *
 * `[data-reveal-right]` waits at `translateX(32px)`. On a 375px screen the
 * container's content box ends at 351px, so that offset put the element's right
 * edge at 383px and the whole document scrolled sideways by 8px — before the
 * user had scrolled far enough for the animation to run and remove it. The two
 * pages using horizontal reveals were the only two overflowing on mobile.
 *
 * `clip` rather than `hidden`: `hidden` would make each container a scroll
 * container, which silently breaks `position: sticky` on anything inside it.
 * Scoped with `:has()` so containers *without* a horizontal reveal keep letting
 * content overhang on purpose — the floating chips beside the hero mockup are
 * meant to sit outside their container and must not be clipped.
 */
.container:has([data-reveal-left]),
.container:has([data-reveal-right]) {
  overflow-x: clip;
}

/* ---------------------------------------------------------------------------
   Brand lockup

   The header used a 97 KB SVG that was a raster trace of the wordmark: 254
   unstructured paths, no viewBox, no groups. It could not be restyled, it did
   not scale cleanly, and the name was welded into the artwork — a rename could
   not touch it, so the header said one thing while the page said another.

   The name is real text now, set in the display face, so it is selectable,
   readable to a screen reader, sharp at any size, and changes in one place.

   The mark is the product's own vocabulary rather than an abstract logo: a
   canvas frame with a block snapped into one corner — the shape the editor
   draws while you drag something into place. Guide lines crossing at the
   block's corner were drawn first and cut: at 26px, a 0.9px hairline at 32%
   opacity is not visible, so it was detail that cost bytes and read as noise.
   It inherits `currentColor`, so it works on the light header and the dark
   footer without a second asset.
   --------------------------------------------------------------------------- */

.site-nav__brand,
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}
.brand-glyph {
  display: inline-flex;
  flex: none;
}
/* The mark is artwork now, not a currentColor glyph, so the span no longer
   passes a colour down to it. `display: block` kills the inline baseline gap
   that would otherwise sit under the image and push the lockup off centre. */
.brand-glyph img {
  display: block;
  height: 28px;
  width: auto;
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  /* Positive, unlike every other heading here, because this is the one string
     on the site set in all caps. Fraunces' letterfit is drawn for lowercase, so
     the negative tracking the headings use closed "LO" up and ran the K's leg
     into the Z. The social card's lockup uses the same value. */
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--fg);
}

/*
 * Chips are absolutely positioned with only `right` (or `left`) set, so their
 * shrink-to-fit width is resolved against the containing block — which this
 * positioning deliberately leaves at 14px. `nowrap` alone is not enough: the
 * box itself was still being squeezed, so "Auto-saved" broke into two lines.
 * `max-content` sizes the box to its contents and lets it overhang into the
 * page gutter, which is exactly where it is meant to sit.
 */
.float-chip {
  white-space: nowrap;
  width: max-content;
  max-width: none;
}