/*
Theme Name:   vablet 2026
Theme URI:    https://www.vablet.com/
Description:  Child theme of Divi carrying the vablet 2026 design system. Loads one stylesheet
              site-wide and provides a menu-driven header and footer, so page content only ever
              holds its own sections. Replaces the per-page inlined CSS used by the V3 prototypes.
Author:       vablet
Template:     Divi
Version:      1.5.3
Text Domain:  vablet-child

Brand:        vablet 2026 refresh (Aug 2026). Blue #0061D5, Ink #0A1628,
              Paper #F5F8FC, Deep Navy #02137D, Atlantis #A2DC26 (accents only).
              Typeface Archivo. Retired: #6714E3, #3DDDDC, #2647E0.
Update:       v1.3.0 (Sept 27, 2026). Bolder addendum retired; gradients
              restored; real wordmark in header and footer; type tuned to the
              V5 homepage. See section 9 and BRAND.md.
*/

/* ==========================================================================
   1. Divi neutralisation
   Divi's own header, footer and content wrappers are suppressed. The child
   theme's header.php and footer.php provide the real chrome. Remove this
   block only once Divi itself is retired.
   ========================================================================== */
#main-header,
#top-header,
#main-footer,
.et_slide_in_menu_container,
#et-boc .et-l--header,
#et-boc .et-l--footer { display: none !important; }

#page-container { padding-top: 0 !important; margin-top: 0 !important; }

#et-main-area,
#main-content,
#main-content .container,
#main-content .container .et_pb_row,
article.et_pb_post,
.entry-content,
.et_pb_post .entry-content {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
#main-content .container:before { display: none !important; }

/* WordPress prints the page title above the content on Divi's default template. */
.entry-title,
.main_title,
.et_post_meta_wrapper,
#breadcrumbs,
.et_pb_title_container { display: none !important; }

/* The admin bar is fixed and would sit over the sticky header for logged-in users. */
body.admin-bar header.site-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar header.site-header { top: 46px; }
}


/* ==========================================================================
   2. Reset and element defaults
   ========================================================================== */
/* base.css */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  hanging-punctuation: first last;
  scroll-padding-top: var(--space-16);
}

body {
  min-height: 100dvh;
  line-height: 1.6;
  font-weight: 400;
  font-family: var(--font-body, sans-serif);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}
ul[role='list'],
ol[role='list'] {
  list-style: none;
}
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
  line-height: 1.15;
}
p,
li,
figcaption {
  text-wrap: pretty;
  max-width: 72ch;
}

::selection {
  background: color-mix(in oklab, var(--color-primary) 25%, transparent);
  color: var(--color-text);
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

a {
  text-decoration: none;
  color: inherit;
}
button {
  cursor: pointer;
  background: none;
  border: none;
}
table {
  border-collapse: collapse;
  width: 100%;
}

a,
button,
[role='button'],
[role='link'],
input,
textarea,
select {
  transition:
    color var(--transition-interactive),
    background var(--transition-interactive),
    border-color var(--transition-interactive),
    box-shadow var(--transition-interactive);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ==========================================================================
   3. Design tokens and components
   ========================================================================== */
/* ==========================================================================
   vablet , design tokens
   ========================================================================== */
:root,
[data-theme='light'] {
  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.4rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.1rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.25rem);
  --text-3xl: clamp(2.25rem, 1rem + 3.6vw, 4.25rem);
  --text-hero: clamp(2.5rem, 0.5rem + 5.5vw, 5rem);

  /* Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Surfaces */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-2: #F5F8FC;
  --color-surface-offset: #E9F1FD;
  --color-divider: #EDF2F9;
  --color-border: #DCE4EF;

  /* Text */
  --color-text: #0A1628;
  --color-text-muted: #33415A;
  --color-text-faint: #5B6B82;
  --color-text-inverse: #ffffff;
  --color-text-inverse-muted: rgba(255, 255, 255, 0.74);
  --color-text-inverse-faint: rgba(255, 255, 255, 0.48);

  /* Ink (dark sections/footer) and Deep Navy (large brand surfaces) */
  --color-ink: #0A1628;
  --color-ink-2: #02137D;
  --color-ink-border: rgba(255, 255, 255, 0.1);

  /* vablet Blue , one hex for logo, links, buttons, app icon */
  --color-primary: #0061D5;
  --color-primary-hover: #004FAE;
  --color-primary-active: #003D86;
  --color-primary-highlight: #CFE0FA;
  --color-primary-soft: #E9F1FD;

  /* Deep hero gradient tones */
  --color-hero-1: #0A1628;
  --color-hero-2: #02137D;
  --color-hero-3: #0061D5;
  --color-hero-4: #6FA8F0;

  /* Status accents (used sparingly, inside data/UI only) */
  --color-success: #1C7A4A;
  --color-warning: #B4560A;
  --color-critical: #B3200F;

  /* Atlantis , checkmarks, positive signals and highlights ONLY.
     Never a primary button, never the logo. */
  --color-atlantis: #A2DC26;

  --radius-sm: 0.5rem;   /* controls, chips, buttons , 8px */
  --radius-md: 0.875rem; /* cards , 14px */
  --radius-lg: 0.875rem;
  --radius-xl: 1.25rem;
  --radius-full: 9999px;

  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-sm: 0 1px 2px rgba(10, 13, 26, 0.06);
  --shadow-md: 0 8px 24px rgba(10, 13, 26, 0.08);
  --shadow-lg: 0 24px 56px rgba(10, 13, 26, 0.16);

  --content-narrow: 640px;
  --content-default: 1080px;
  --content-wide: 1280px;
  --content-full: 100%;

  /* Archivo (Google Fonts, OFL). Variable: wdth 62.5,125, wght 100,900.
     Display = Expanded 125% 700. Body = 400. */
  --font-display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  /* v1.3.0: display headings use Archivo's semi-expanded width, not the full 125% */
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: clamp(var(--space-5), 4vw, var(--space-12));
}

section {
  padding-block: clamp(var(--space-12), 5.5vw, var(--space-24));
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.eyebrow.on-dark {
  color: var(--color-hero-4);
}

.section-head {
  max-width: 760px;
  margin-bottom: clamp(var(--space-8), 3.5vw, var(--space-12));
}
.section-head.center {
  margin-inline: auto;
  text-align: center;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-stretch: 125%;
  letter-spacing: -0.01em;
  font-weight: 700;
  line-height: 1.12;
  color: var(--color-text);
}

.h2 {
  font-size: var(--text-xl);
  font-stretch: 125%;
  font-weight: 700;
  line-height: 1.12;
  margin-top: var(--space-3);
}
.on-dark .h2,
.on-dark h2,
.on-dark h3 {
  color: var(--color-text-inverse);
}

p {
  color: var(--color-text-muted);
  font-weight: 400;
}
.on-dark p {
  color: var(--color-text-inverse-muted);
}

.lede {
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}
.on-dark .lede {
  color: var(--color-text-inverse-muted);
}

.grid {
  display: grid;
  gap: clamp(var(--space-4), 2vw, var(--space-6));
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: 0.9375rem;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 8px;
  white-space: nowrap;
  line-height: 1;
  border: 1px solid transparent;
}
.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover {
  background: var(--color-primary-hover);
}
.btn-dark {
  background: var(--color-ink);
  color: var(--color-text-inverse);
}
.btn-dark:hover {
  background: #1a2040;
}
.btn-outline {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn-outline:hover {
  border-color: var(--color-text);
}
.btn-ghost-light {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  backdrop-filter: blur(6px);
}
.btn-ghost-light:hover {
  background: rgba(255, 255, 255, 0.2);
}
.btn-white {
  background: #fff;
  color: var(--color-ink);
}
.btn-white:hover {
  background: #e9ecf5;
}
.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
}
.link-arrow {
  display: inline;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-primary);
}
.link-arrow svg {
  width: 12px;
  height: 12px;
  display: inline-block;
  vertical-align: middle;
  margin-left: var(--space-1);
  transition: transform var(--transition-interactive);
}
.link-arrow:hover svg {
  transform: translate(2px, -2px);
}
.on-dark .link-arrow {
  color: var(--color-hero-4);
}

/* ==========================================================================
   Header
   ========================================================================== */
.topbar {
  background: var(--color-ink);
  color: var(--color-text-inverse-muted);
  font-size: var(--text-xs);
  font-weight: 500;
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
  text-align: center;
  flex-wrap: wrap;
}
.topbar a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.topbar .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-atlantis);
  flex-shrink: 0;
}

header.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 22, 40, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
header.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-5);
  gap: var(--space-6);
}
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: var(--text-lg);
  color: #fff;
}
.logo svg.vablet-wordmark {
  height: 26px;
  width: auto;
  color: #fff;
}
.site-footer .logo svg.vablet-wordmark { height: 22px; }
nav.primary-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
nav.primary-nav a {
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--text-sm);
  font-weight: 500;
}
nav.primary-nav a:hover {
  color: #fff;
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.nav-actions .login-link {
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--text-sm);
  font-weight: 500;
}
.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.nav-toggle svg {
  width: 20px;
  height: 20px;
}
.mobile-nav {
  display: none;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-5) var(--space-5);
  background: var(--color-ink);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-nav a {
  padding: var(--space-3) 0;
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-nav a.btn {
  margin-top: var(--space-3);
  border-bottom: none;
  text-align: center;
  color: var(--color-ink);
}
.site-header.nav-open .mobile-nav {
  display: flex;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  padding-top: 0;
  padding-bottom: 0;
  background: linear-gradient(170deg, var(--color-hero-1) 0%, var(--color-hero-2) 38%, var(--color-hero-3) 66%, var(--color-hero-4) 84%, #ffffff 100%);
  position: relative;
}
.hero-inner {
  padding-top: clamp(var(--space-16), 8vw, var(--space-24));
  padding-bottom: clamp(var(--space-20), 10vw, var(--space-32));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--space-8), 6vw, var(--space-16));
  align-items: center;
}
.hero-copy h1 {
  color: #fff;
  font-size: var(--text-3xl);
  font-stretch: 125%;
  font-weight: 700;
  line-height: 1.08;
  margin-top: var(--space-4);
}
.hero-copy .lede {
  color: rgba(255, 255, 255, 0.72);
  max-width: 46ch;
}
.hero-form {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-8);
  flex-wrap: wrap;
}
.hero-input {
  flex: 1;
  min-width: 220px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  color: #fff;
  font-size: var(--text-sm);
}
.hero-input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}
.hero-secondary {
  margin-top: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.hero-secondary a {
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--text-sm);
  font-weight: 500;
}
.hero-secondary a:hover {
  color: #fff;
}
.hero-visual {
  position: relative;
}
.hero-visual img {
  border-radius: var(--radius-lg);
  width: 100%;
}

.trust-strip {
  background: #fff;
  padding-block: var(--space-10);
}
.trust-strip .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.trust-strip .trust-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  flex-shrink: 0;
}
.trust-tags {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.trust-tags span {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}

/* ==========================================================================
   Stat row
   ========================================================================== */
.stats-section {
  background: var(--color-surface-2);
}
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
}
.stat-cell {
  padding: clamp(var(--space-8), 4vw, var(--space-10)) var(--space-6);
  text-align: center;
  border-right: 1px solid var(--color-border);
}
.stat-cell:last-child {
  border-right: none;
}
.stat-value {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-size: var(--text-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
}
.stat-label {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 500;
}
.quote-block {
  margin-top: clamp(var(--space-10), 5vw, var(--space-14));
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}
.quote-block p {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--color-text);
  font-style: normal;
}
.quote-block cite {
  display: block;
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.on-dark .quote-block p {
  color: var(--color-text-inverse);
}
.on-dark .quote-block cite {
  color: rgba(255, 255, 255, 0.45);
}

/* ==========================================================================
   Bento cards
   ========================================================================== */
.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}
.bento.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.on-dark .card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}
.card-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  flex-shrink: 0;
}
.on-dark .card-icon {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-hero-4);
}
.card-icon svg {
  width: 20px;
  height: 20px;
}
.card h3 {
  font-size: var(--text-lg);
  font-weight: 500;
  margin-top: var(--space-1);
}
.card p {
  font-size: var(--text-sm);
  line-height: 1.55;
}

/* ==========================================================================
   Marquee tag cloud
   ========================================================================== */
.tagcloud-section {
  background: #fff;
  overflow: hidden;
}
.tagcloud-heading {
  text-align: center;
  max-width: 620px;
  margin-inline: auto;
}
.marquee-row {
  margin-top: var(--space-10);
  display: flex;
  gap: var(--space-3);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  gap: var(--space-3);
  flex-shrink: 0;
  animation: marquee 32s linear infinite;
}
.marquee-row.reverse .marquee-track {
  animation-direction: reverse;
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.tag-pill svg {
  width: 14px;
  height: 14px;
  color: var(--color-primary);
  flex-shrink: 0;
}

/* ==========================================================================
   Dark problem section
   ========================================================================== */
.on-dark {
  background: var(--color-ink);
}

/* ==========================================================================
   Role cards
   ========================================================================== */
.role-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}
.role-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: clamp(var(--space-6), 3vw, var(--space-7));
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
}
.role-card .role-num {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  font-weight: 600;
}
.role-card h3 {
  font-size: var(--text-lg);
  font-weight: 500;
}
.role-card p {
  font-size: var(--text-sm);
}
.role-summary {
  margin-top: clamp(var(--space-8), 4vw, var(--space-12));
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--color-text);
}

/* ==========================================================================
   Integrations
   ========================================================================== */
.integrations-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: clamp(var(--space-10), 5vw, var(--space-14));
}
.integration-tile {
  width: 132px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-3);
}
.integration-tile.hub {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list {
  max-width: 760px;
  margin-inline: auto;
  border-top: 1px solid var(--color-border);
}
.faq-item {
  border-bottom: 1px solid var(--color-border);
}
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
}
.faq-q svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-text-faint);
  transition: transform var(--transition-interactive);
}
.faq-item[open] .faq-q svg {
  transform: rotate(45deg);
  color: var(--color-primary);
}
.faq-a {
  padding-bottom: var(--space-6);
  font-size: var(--text-base);
  max-width: 68ch;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}

/* ==========================================================================
   Closing CTA
   ========================================================================== */
.closing-cta {
  background: linear-gradient(120deg, var(--color-hero-2), var(--color-hero-3) 55%, var(--color-hero-4));
  position: relative;
  overflow: hidden;
  text-align: center;
}
.closing-cta h2 {
  color: #fff;
  font-size: var(--text-2xl);
  font-weight: 500;
}
.closing-cta .lede {
  color: rgba(255, 255, 255, 0.75);
  margin-inline: auto;
}
.closing-cta .hero-form {
  justify-content: center;
  max-width: 520px;
  margin-inline: auto;
}
.closing-fineprint {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.55);
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer.site-footer {
  background: var(--color-ink);
  color: var(--color-text-inverse-muted);
  padding-block: clamp(var(--space-16), 6vw, var(--space-20)) var(--space-8);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: var(--space-8);
  padding-bottom: var(--space-16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-brand .logo {
  color: #fff;
}
.footer-brand p {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  max-width: 30ch;
  color: rgba(255, 255, 255, 0.64);
}
.footer-col h4 {
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer-col a {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.64);
}
.footer-col a:hover {
  color: #fff;
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-8);
  flex-wrap: wrap;
  gap: var(--space-4);
}
.footer-bottom p {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.45);
}
.social-icons {
  display: flex;
  gap: var(--space-3);
}
.social-icons a {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.7);
}
.social-icons a:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.social-icons svg {
  width: 15px;
  height: 15px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  nav.primary-nav {
    display: none;
  }
  .nav-actions .login-link {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
  .hero-inner {
    grid-template-columns: 1fr;
  }
  .hero-visual {
    order: -1;
  }
  .bento,
  .bento.four,
  .role-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stat-cell:nth-child(2) {
    border-right: none;
  }
  .stat-cell:nth-child(1),
  .stat-cell:nth-child(2) {
    border-bottom: 1px solid var(--color-border);
  }
  .footer-top {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .bento,
  .bento.four,
  .role-grid {
    grid-template-columns: 1fr;
  }
  .stats-row {
    grid-template-columns: 1fr;
  }
  .stat-cell {
    border-right: none !important;
    border-bottom: 1px solid var(--color-border);
  }
  .stat-cell:last-child {
    border-bottom: none;
  }
  .trust-strip .wrap {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-top {
    grid-template-columns: 1fr;
  }
  .nav-actions .login-link {
    display: none;
  }
}

/* ==========================================================================
   4. Page components: logo wall, wedge, video, CTA bands
   ========================================================================== */
/* ---------- V3 additions ---------- */
.hero-copy h1{margin-top:0}
.hero-actions{display:flex;gap:var(--space-3);margin-top:var(--space-8);flex-wrap:wrap}
.hero-secondary{margin-top:var(--space-5)}

/* logo wall */
.logo-wall{background:#fff;padding-block:clamp(var(--space-12),6vw,var(--space-16))}
.logo-wall .trust-label{display:block;text-align:center;font-size:var(--text-xs);font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--color-text-faint);max-width:none}
.logo-row{margin-top:var(--space-8);display:flex;align-items:center;justify-content:center;gap:clamp(var(--space-6),4vw,var(--space-12));flex-wrap:wrap}
.logo-row img{height:clamp(26px,3.2vw,40px);width:auto;object-fit:contain;filter:grayscale(1);opacity:.62;transition:filter var(--transition-interactive),opacity var(--transition-interactive)}
.logo-row img:hover{filter:grayscale(0);opacity:1}
.logo-row .logo-more{font-size:var(--text-sm);font-weight:500;color:var(--color-text-faint);white-space:nowrap}
.logo-wall .trust-tags{margin-top:var(--space-10);justify-content:center}

/* stats: five tiles */
.stats-row{grid-template-columns:repeat(5,minmax(0,1fr))}
.stat-cell{padding-inline:var(--space-4)}
.stat-value{font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem)}

/* CTA band */
.cta-band{padding-block:0}
.cta-band .wrap{padding-block:0}
.cta-band-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap;padding:clamp(var(--space-6),3vw,var(--space-8)) clamp(var(--space-6),3vw,var(--space-10));border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-primary-soft)}
.cta-band-inner h3{font-size:var(--text-lg);font-weight:500}
.cta-band-inner p{font-size:var(--text-sm);margin-top:var(--space-1)}
.cta-band.on-dark{background:transparent}
.cta-band.on-dark .cta-band-inner{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.14)}
.cta-band.on-dark h3{color:var(--color-text-inverse)}
.cta-band.on-dark p{color:var(--color-text-inverse-muted)}

/* wedge */
.wedge{background:var(--color-hero-2) /* Deep Navy, flat */}
.wedge h2,.wedge .h2{color:var(--color-text-inverse)}
.wedge .lede{color:rgba(255,255,255,0.74)}
.wedge-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}
.wedge-card{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);border-radius:var(--radius-md);padding:clamp(var(--space-6),3vw,var(--space-8));display:flex;flex-direction:column;gap:var(--space-3)}
.wedge-card .card-icon{background:rgba(255,255,255,0.1);color:#fff}
.wedge-card h3{color:#fff;font-size:var(--text-lg);font-weight:500}
.wedge-card p{color:rgba(255,255,255,0.7);font-size:var(--text-sm);line-height:1.55}
.wedge-spec{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid rgba(255,255,255,0.14);font-family:var(--font-display);font-size:var(--text-sm);font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:var(--color-hero-4)}
.wedge-kicker{margin-top:clamp(var(--space-8),4vw,var(--space-12));text-align:center;font-family:var(--font-display);font-size:var(--text-lg);font-weight:400;color:#fff;max-width:60ch;margin-inline:auto}

/* video */
.video-section{background:var(--color-surface-2)}
.video-frame{position:relative;max-width:920px;margin-inline:auto;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-border);background:var(--color-ink); /* Ink, flat */box-shadow:var(--shadow-lg)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);text-align:center;padding:var(--space-8)}
.video-ph .play{width:78px;height:78px;border-radius:var(--radius-full);background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.32);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
.video-ph .play svg{width:26px;height:26px;color:#fff;margin-left:4px}
.video-ph p{color:rgba(255,255,255,0.78);font-size:var(--text-sm);max-width:44ch}
.video-badge{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:#0a0d1a;background:#ffd66b;padding:var(--space-2) var(--space-4);border-radius:var(--radius-full)}

/* integrations note */
.integrations-note{margin-top:var(--space-8);text-align:center;font-size:var(--text-sm);color:var(--color-text-faint);max-width:none}

@media (max-width:900px){
  .stats-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-cell:nth-child(5){grid-column:1 / -1;border-right:none}
  .wedge-split{grid-template-columns:1fr}
  .cta-band-inner{flex-direction:column;align-items:flex-start}
  .logo-row{gap:var(--space-6)}
}
@media (max-width:600px){
  .stats-row{grid-template-columns:1fr}
  .stat-cell:nth-child(5){grid-column:auto}
  .logo-row img{height:24px}
}

/* fixes carried over from V2 */
.eyebrow.on-dark{background:transparent}
.closing-fineprint{margin-inline:auto;max-width:none}
.closing-cta .hero-actions{justify-content:center}
.role-summary{max-width:none}
.card .link-arrow{margin-top:auto}
.quote-block{padding-top:var(--space-4)}

/* ==========================================================================
   5. Contact page and HubSpot form
   ========================================================================== */
/* ---------- contact page ---------- */
.hero.compact .hero-inner{display:block;padding-top:clamp(var(--space-12),6vw,var(--space-20));padding-bottom:clamp(var(--space-16),8vw,var(--space-24));max-width:760px}
.hero.compact h1{font-size:var(--text-2xl);margin-top:var(--space-3)}
.hero.compact .lede{max-width:56ch}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(var(--space-6),4vw,var(--space-12));align-items:start}
.form-card{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:clamp(var(--space-6),3.5vw,var(--space-10));box-shadow:var(--shadow-md)}
.form-card h2{font-size:var(--text-lg);font-weight:500}
.form-card > p{font-size:var(--text-sm);margin-top:var(--space-2)}
#hubspot-contact-form{margin-top:var(--space-6);min-height:360px}
.routes{display:flex;flex-direction:column;gap:var(--space-4)}
.route{display:block;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-5) var(--space-6);background:var(--color-surface-2)}
.route:hover{border-color:var(--color-primary);background:var(--color-primary-soft)}
.route .route-label{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-base);font-weight:500;font-family:var(--font-display);color:var(--color-text)}
.route .route-label svg{width:16px;height:16px;color:var(--color-primary);flex-shrink:0}
.route p{font-size:var(--text-sm);margin-top:var(--space-2);max-width:38ch}
.route .route-go{display:inline-block;margin-top:var(--space-3);font-size:var(--text-sm);font-weight:500;color:var(--color-primary)}
.contact-note{margin-top:var(--space-6);font-size:var(--text-xs);color:var(--color-text-faint);max-width:38ch}
.assurance{background:var(--color-surface-2);padding-block:clamp(var(--space-10),5vw,var(--space-14))}
.assurance .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap}
.assurance p{font-family:var(--font-display);font-size:var(--text-lg);font-weight:400;color:var(--color-text);max-width:34ch}
.assurance .facts{display:flex;gap:var(--space-8);flex-wrap:wrap}
.assurance .facts div{display:flex;flex-direction:column}
.assurance .facts b{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;color:var(--color-primary);line-height:1}
.assurance .facts span{margin-top:var(--space-2);font-size:var(--text-xs);color:var(--color-text-muted);font-weight:500}

/* HubSpot form, restyled to match */
#hubspot-contact-form .hs-form-field{margin-bottom:var(--space-4)}
#hubspot-contact-form label{display:block;font-size:var(--text-xs);font-weight:600;letter-spacing:.02em;color:var(--color-text);margin-bottom:var(--space-2)}
#hubspot-contact-form label .hs-form-required{color:var(--color-primary);margin-left:2px}
#hubspot-contact-form .hs-field-desc{font-size:var(--text-xs);color:var(--color-text-faint);margin-bottom:var(--space-2)}
#hubspot-contact-form input[type=text],#hubspot-contact-form input[type=email],#hubspot-contact-form input[type=tel],#hubspot-contact-form input[type=number],#hubspot-contact-form select,#hubspot-contact-form textarea{width:100%;max-width:100%;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);font-family:var(--font-body);font-size:var(--text-sm);color:var(--color-text);line-height:1.4}
#hubspot-contact-form textarea{min-height:130px;resize:vertical}
#hubspot-contact-form input:focus,#hubspot-contact-form select:focus,#hubspot-contact-form textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-highlight)}
#hubspot-contact-form .hs-form-booleancheckbox label,#hubspot-contact-form .hs-form-checkbox label,#hubspot-contact-form .hs-form-radio label{display:flex;gap:var(--space-3);align-items:flex-start;font-weight:400;font-size:var(--text-sm);color:var(--color-text-muted)}
#hubspot-contact-form input[type=checkbox],#hubspot-contact-form input[type=radio]{margin-top:.3rem;accent-color:var(--color-primary);flex-shrink:0}
#hubspot-contact-form .hs-button,#hubspot-contact-form input[type=submit]{display:inline-flex;align-items:center;justify-content:center;background:var(--color-primary);color:#fff;border:1px solid transparent;border-radius:var(--radius-sm);padding:var(--space-3) var(--space-8);font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;line-height:1;cursor:pointer;width:auto;margin-top:var(--space-2)}
#hubspot-contact-form .hs-button:hover,#hubspot-contact-form input[type=submit]:hover{background:var(--color-primary-hover)}
#hubspot-contact-form .hs-error-msg,#hubspot-contact-form .hs-error-msgs label{color:#b3200f;font-size:var(--text-xs);font-weight:500;margin-top:var(--space-1)}
#hubspot-contact-form ul.hs-error-msgs{list-style:none;padding:0;margin:0}
#hubspot-contact-form .submitted-message{font-size:var(--text-base);color:var(--color-text)}
#hubspot-contact-form .legal-consent-container{font-size:var(--text-xs);color:var(--color-text-faint);margin-top:var(--space-2)}
#hubspot-contact-form .legal-consent-container p{font-size:var(--text-xs)}
#hubspot-contact-form fieldset{max-width:none!important;border:0;padding:0;margin:0}
#hubspot-contact-form fieldset.form-columns-2 .hs-form-field,#hubspot-contact-form fieldset.form-columns-3 .hs-form-field{width:100%!important;float:none!important}
#hubspot-contact-form .input{margin-right:0!important}
#hubspot-contact-form .hs-richtext{font-size:var(--text-sm);color:var(--color-text-muted)}
#hubspot-contact-form ul{list-style:none;padding:0;margin:0}
#hubspot-contact-form li{margin:0}
#hubspot-contact-form a{color:var(--color-primary);text-decoration:underline;text-underline-offset:2px}
#hubspot-contact-form .hs-recaptcha{margin-bottom:var(--space-4)}
#hubspot-contact-form .legal-consent-container .hs-form-booleancheckbox-display>span{margin-left:0!important}
.form-fallback{margin-top:var(--space-5);font-size:var(--text-sm);color:var(--color-text-faint)}

@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr}
  .assurance .wrap{flex-direction:column;align-items:flex-start}
}
@media (min-width:901px){
  #hubspot-contact-form fieldset.form-columns-2{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-4)}
}

/* ==========================================================================
   9. v1.3.0 (Sept 27, 2026): V5 homepage alignment
   The August "bolder direction" (coral, flat fills, wedge cuts) is retired;
   marketing chose the gradient direction of the V5 mockup. The real vablet
   wordmark (Illustrator outlines) replaces the V tile in header and footer.
   ========================================================================== */
h1, h2, h3, .h2, .stat-value { font-stretch: 110%; letter-spacing: -0.015em; }
.hero-copy h1 { font-size: clamp(2.25rem, 1.2rem + 3.2vw, 3.75rem); line-height: 1.05; }
.h2 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); }
nav.primary-nav a, .nav-actions a, .mobile-nav a { white-space: nowrap; font-stretch: 100%; }
.stat-value { font-variant-numeric: tabular-nums; }
nav.primary-nav ul, .mobile-nav ul, .footer-col ul { list-style: none; margin: 0; padding: 0; }
nav.primary-nav li, .mobile-nav li, .footer-col li, .site-footer li { margin: 0; padding: 0; list-style: none; display: block; }
nav.primary-nav ul { display: flex; align-items: center; gap: var(--space-6); }
/* Divi compatibility: the base reset makes images block-level, which breaks Divi's centred blurbs and image modules */
.et_pb_section img, .et_pb_blurb .et_pb_main_blurb_image img, .et_pb_image_wrap img { display: inline-block; }
.et_pb_blurb.et_pb_text_align_center .et_pb_main_blurb_image, .et_pb_blurb .et_pb_blurb_content { margin-left: auto; margin-right: auto; }
.et_pb_blurb .et_pb_main_blurb_image { text-align: inherit; }
.et_pb_section p, .et_pb_section li { max-width: none; }
@media (max-width: 640px) {
  .hero-copy h1 { font-size: clamp(2.1rem, 1rem + 7vw, 3rem); }
}

/* v1.3.4 (Sept 27, 2026): rules the theme never had; the V5 homepage relied on its own copy before it moved onto the theme */
.logos-strip { background: var(--color-surface-2); padding-block: var(--space-10); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.logos-strip .wrap { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
.logos-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-faint); }
.logos-row { display: flex; align-items: center; justify-content: center; gap: clamp(var(--space-8), 5vw, var(--space-12)); flex-wrap: wrap; }
.logos-row img { height: 26px; width: auto; object-fit: contain; filter: grayscale(1) opacity(0.55); transition: filter var(--transition-interactive); }
.logos-row img:hover { filter: grayscale(0) opacity(1); }
.logos-more { font-size: var(--text-sm); font-weight: 500; color: var(--color-text-faint); font-style: italic; }
.positioning-band { background: var(--color-primary-soft); padding-block: clamp(var(--space-10), 5vw, var(--space-12)); }
.positioning-inner { display: flex; align-items: flex-start; gap: var(--space-5); max-width: 900px; margin-inline: auto; }
.positioning-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-md); background: #fff; display: flex; align-items: center; justify-content: center; color: var(--color-primary); }
.positioning-icon svg { width: 22px; height: 22px; }
.positioning-inner h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.positioning-inner p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; }
.compliance-badges { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-6); margin-top: clamp(var(--space-8), 4vw, var(--space-10)); padding-top: clamp(var(--space-8), 4vw, var(--space-10)); border-top: 1px solid var(--color-border); }
.compliance-badges img { height: 52px; width: 52px; object-fit: contain; border-radius: var(--radius-full); }
.compliance-note { flex-basis: 100%; width: 100%; max-width: none; text-align: center; font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); margin-bottom: clamp(var(--space-6), 3vw, var(--space-8)); }
.stack-note { text-align: center; font-size: var(--text-sm); color: var(--color-text-faint); margin-top: var(--space-6); }
.tile-sub { display: block; font-size: var(--text-xs); font-weight: 400; color: var(--color-text-faint); }

/* v1.3.5 (Sept 27, 2026): proof block, promoted from the homepage so any page can use it. On dark sections the captions invert. */
.proof-section{background:var(--color-surface-2) }
.proof-grid{display:grid;grid-template-columns:1.15fr 0.85fr 1.3fr;gap:var(--space-5);align-items:stretch }
.proof-card{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column }
.proof-card.dark{background:var(--color-ink);border-color:rgba(255,255,255,.12) }
.proof-img{aspect-ratio:4/5;overflow:hidden;background:var(--color-surface-offset) }
.proof-card.dark .proof-img{background:#0A1628 }
.proof-img img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block }
.proof-cap{padding:var(--space-5) var(--space-6) }
.proof-cap .proof-who{display:block;font-size:var(--text-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-primary);margin-bottom:var(--space-1) }
.proof-card.dark .proof-cap .proof-who{color:var(--color-hero-4) }
.proof-cap h3{font-size:var(--text-base);font-weight:600;margin:0 }
.proof-card.dark .proof-cap h3{color:#fff }
.proof-cap p{font-size:var(--text-sm);margin-top:var(--space-2) }
.proof-card.dark .proof-cap p{color:rgba(255,255,255,.7) }
@media (max-width:900px){.proof-grid{grid-template-columns:1fr 1fr }
.proof-card:last-child{grid-column:1/-1 }
.proof-card:last-child .proof-img{aspect-ratio:16/10 }
 }
@media (max-width:600px){.proof-grid{grid-template-columns:1fr }
.proof-img{aspect-ratio:4/4.2 }
 }
.on-dark .proof-card figcaption { color: rgba(255,255,255,.75); }
.on-dark .proof-card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }

/* v1.4.0 (Sept 28, 2026): blog templates. Post hero, article body, cards, index grid, author box, subscribe form. */
.blog-hero { padding: 0; background: linear-gradient(170deg, var(--color-hero-1) 0%, var(--color-hero-2) 45%, var(--color-hero-3) 100%); }
.blog-hero .hero-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.blog-hero--index .hero-inner { grid-template-columns: 1fr; }
.blog-hero--index .hero-copy { max-width: 800px; }
.blog-hero h1 { color: #fff; font-size: clamp(2rem, 1.1rem + 2.6vw, 3.25rem); line-height: 1.08; margin-top: var(--space-4); }
.blog-hero .lede { color: rgba(255,255,255,.76); max-width: 60ch; }
.blog-hero .eyebrow a { color: inherit; text-decoration: none; }
.blog-meta { color: rgba(255,255,255,.7); font-size: var(--text-sm); margin-top: var(--space-4); }
.blog-shot { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.blog-shot img { width: 100%; height: auto; display: block; }
.blog-body { max-width: 760px; margin-inline: auto; font-size: var(--text-base); line-height: 1.75; }
.blog-body h2 { font-size: var(--text-xl); margin-top: clamp(var(--space-8), 4vw, var(--space-12)); margin-bottom: var(--space-3); }
.blog-body h3 { font-size: var(--text-lg); margin-top: var(--space-8); margin-bottom: var(--space-2); }
.blog-body p { margin-bottom: var(--space-4); max-width: none; }
.blog-body ul, .blog-body ol { margin: var(--space-4) 0 var(--space-6) 1.4em; }
.blog-body li { margin-bottom: var(--space-2); max-width: none; }
.blog-body img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: var(--space-6) 0; }
.blog-body a { color: var(--color-primary); }
.blog-body blockquote { border-left: 3px solid var(--color-primary); padding-left: var(--space-5); color: var(--color-text-muted); margin: var(--space-6) 0; }
.blog-body table { width: 100%; border-collapse: collapse; margin: var(--space-6) 0; font-size: var(--text-sm); }
.blog-body th, .blog-body td { border: 1px solid var(--color-border); padding: var(--space-3); text-align: left; vertical-align: top; }
.blog-body th { background: var(--color-surface-2); font-weight: 600; }
.blog-body iframe { max-width: 100%; }
.blog-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-8); }
.blog-tag { font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-primary); background: var(--color-primary-soft); border-radius: var(--radius-full); padding: 6px 12px; text-decoration: none; }
.blog-author-box { display: flex; gap: var(--space-4); align-items: center; margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
.blog-author-box img { border-radius: var(--radius-full); }
.blog-author-box p { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.post-card { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow var(--transition-interactive), transform var(--transition-interactive); }
.post-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.post-card__img { aspect-ratio: 16 / 9; background: var(--color-surface-2); overflow: hidden; }
.post-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); flex: 1; }
.post-card .kind { font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-primary); }
.post-card h3 { font-size: var(--text-lg); margin: 0; line-height: 1.3; }
.post-card p { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }
.post-card__by { margin-top: auto; padding-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-faint); }
.blog-pagination { margin-top: var(--space-10); display: flex; justify-content: center; }
.blog-pagination .nav-links { display: flex; gap: var(--space-2); }
.blog-pagination .page-numbers { padding: 8px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-full); text-decoration: none; color: var(--color-text); font-size: var(--text-sm); }
.blog-pagination .page-numbers.current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.blog-subscribe { background: var(--color-surface-2); }
.blog-form-card { max-width: 640px; margin-inline: auto; }
@media (max-width: 900px) { .blog-hero .hero-inner { grid-template-columns: 1fr; } .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }

/* v1.4.2: blog category selector and search bar between the hero and the first row. */
.blog-filter { background: #fff; border-bottom: 1px solid var(--color-border); padding-block: var(--space-4); position: sticky; top: 0; z-index: 5; }
.blog-filter__inner { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.blog-cats { display: flex; gap: var(--space-2); flex-wrap: wrap; flex: 1; }
.blog-cat { font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 8px 14px; text-decoration: none; white-space: nowrap; }
.blog-cat span { color: var(--color-text-faint); font-weight: 500; margin-left: 4px; }
.blog-cat:hover { border-color: var(--color-primary); color: var(--color-primary); }
.blog-cat.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.blog-cat.is-active span { color: rgba(255,255,255,.7); }
.blog-search { position: relative; flex: 0 0 280px; max-width: 100%; }
.blog-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--color-text-faint); }
.blog-search input[type="search"] { width: 100%; padding: 10px 14px 10px 42px; border: 1px solid var(--color-border); border-radius: var(--radius-full); font: inherit; font-size: var(--text-sm); background: var(--color-surface-2); }
.blog-search input[type="search"]:focus { outline: none; border-color: var(--color-primary); background: #fff; }
@media (max-width: 900px) { .blog-filter { position: static; } .blog-search { flex-basis: 100%; } }

/* v1.4.3: tighter vertical rhythm between stacked sections (was 8rem max per side, now 6rem; heading margin 3rem max). */

/* v1.5.0: header dropdowns. Hover and focus on desktop, expanded lists on mobile. */
nav.primary-nav > li { position: relative; }
nav.primary-nav > li.menu-item-has-children > a::after { content: ""; display: inline-block; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-3px); margin-left: 8px; opacity: .7; }
nav.primary-nav .sub-menu { position: absolute; top: 100%; left: -12px; min-width: 260px; padding: 10px; margin-top: 6px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s ease, transform .15s ease, visibility .15s; z-index: 60; list-style: none; }
nav.primary-nav > li:hover > .sub-menu, nav.primary-nav > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
nav.primary-nav .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
nav.primary-nav .sub-menu li { margin: 0; }
nav.primary-nav .sub-menu a { display: block; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--color-text); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
nav.primary-nav .sub-menu a:hover, nav.primary-nav .sub-menu a:focus { background: var(--color-primary-soft); color: var(--color-primary); }
nav.primary-nav .sub-menu .menu-label > a { font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-faint); padding-bottom: 4px; pointer-events: none; }
nav.primary-nav .sub-menu .menu-label:not(:first-child) { margin-top: 10px; }
nav.primary-nav > li.mega > .sub-menu { min-width: 520px; column-count: 2; column-gap: 16px; }
nav.primary-nav > li.mega > .sub-menu li { break-inside: avoid; }
nav.primary-nav > li.mega > .sub-menu .menu-label:not(:first-child) { margin-top: 0; break-before: column; }
.mobile-nav .sub-menu { list-style: none; margin: 4px 0 8px 0; padding: 0 0 0 14px; border-left: 2px solid var(--color-border); }
.mobile-nav .sub-menu a { font-size: var(--text-sm); font-weight: 500; padding-block: 6px; }
.mobile-nav .sub-menu .menu-label > a { font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-faint); pointer-events: none; padding-top: 10px; }

/* v1.5.1: dropdown rows and two-column split. */
nav.primary-nav .sub-menu li { padding: 0; margin: 0; line-height: 1.3; }
nav.primary-nav .sub-menu a { padding: 7px 12px !important; line-height: 1.3 !important; font-size: var(--text-sm) !important; }
nav.primary-nav .sub-menu .menu-label > a { padding: 6px 12px 2px !important; }
nav.primary-nav > li.mega > .sub-menu { display: block; }

/* v1.5.2: dropdowns forced vertical, click-to-open, explicit two-column split. */
nav.primary-nav .sub-menu { display: block !important; flex-direction: column; width: max-content; left: -12px; padding: 10px !important; }
nav.primary-nav .sub-menu > li { display: block !important; width: 100%; }
nav.primary-nav > li.open > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
nav.primary-nav > li.mega > .sub-menu { display: grid !important; grid-template-columns: max-content max-content; column-gap: 24px; column-count: auto; min-width: 0; }
nav.primary-nav > li.mega > .sub-menu > li:nth-child(-n+4) { grid-column: 1; }
nav.primary-nav > li.mega > .sub-menu > li:nth-child(n+5) { grid-column: 2; }
nav.primary-nav > li.mega > .sub-menu > li:nth-child(1) { grid-row: 1; } nav.primary-nav > li.mega > .sub-menu > li:nth-child(2) { grid-row: 2; } nav.primary-nav > li.mega > .sub-menu > li:nth-child(3) { grid-row: 3; } nav.primary-nav > li.mega > .sub-menu > li:nth-child(4) { grid-row: 4; }
nav.primary-nav > li.mega > .sub-menu > li:nth-child(5) { grid-row: 1; } nav.primary-nav > li.mega > .sub-menu > li:nth-child(6) { grid-row: 2; } nav.primary-nav > li.mega > .sub-menu > li:nth-child(7) { grid-row: 3; } nav.primary-nav > li.mega > .sub-menu > li:nth-child(8) { grid-row: 4; } nav.primary-nav > li.mega > .sub-menu > li:nth-child(9) { grid-row: 5; } nav.primary-nav > li.mega > .sub-menu > li:nth-child(10) { grid-row: 6; } nav.primary-nav > li.mega > .sub-menu > li:nth-child(11) { grid-row: 7; } nav.primary-nav > li.mega > .sub-menu > li:nth-child(12) { grid-row: 8; }
nav.primary-nav > li.mega > .sub-menu .menu-label { break-before: auto; }
nav.primary-nav > li.menu-item-has-children > a { cursor: pointer; }

/* v1.5.3: dropdown performance and spacing. Solid header (no blur) while a dropdown is open, cheaper shadow, no row gap in the two-column menu. */
.site-header:has(nav.primary-nav > li.open), .site-header:has(nav.primary-nav > li:hover > .sub-menu) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--color-ink) !important; }
nav.primary-nav .sub-menu { box-shadow: 0 12px 32px rgba(10, 22, 40, .18); will-change: opacity, transform; contain: layout paint; }
nav.primary-nav > li.mega > .sub-menu { row-gap: 0 !important; column-gap: 24px !important; }
nav.primary-nav .sub-menu a { font-size: 15px !important; }