/* ==========================================================================
   Vara SaaS — Component Styles
   Based on the Premium SaaS Design System
   ========================================================================== */

/* ── Global Reset ── */
:root {
  color-scheme: light;
}

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

html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
}

body {
  line-height: 1.6;
  font-weight: 400;
  font-family: var(--vara-font-family);
  color: var(--vara-text);
  background-color: var(--vara-bg);
}

/* ── Site Shell ── */
.vara-saas-site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Container ── */
.vara-saas-container {
  width: min(var(--vara-container-max, 1280px), calc(100% - var(--vara-gutter, 32px) * 2));
  max-width: 100%;
  margin: 0 auto;
  padding: var(--vara-section-gap, 120px) 0;
}

body.vara-saas-full .vara-saas-container {
  width: calc(100% - var(--vara-gutter, 32px) * 2);
  max-width: none;
}

body.vara-saas-boxed .vara-saas-container {
  max-width: min(var(--vara-container-max, 1280px), calc(100% - var(--vara-gutter, 32px) * 2));
}

/* ── Layout Grid ── */
.vara-saas-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

.vara-saas-sidebar-enabled .vara-saas-layout.has-sidebar {
  grid-template-columns: minmax(0, 1fr) 320px;
}

.vara-saas-layout-sidebar {
  width: 100%;
}

.vara-saas-single-layout--fullwidth,
.vara-saas-single-layout--boxed {
  grid-template-columns: minmax(0, 1fr);
}

.vara-saas-single-layout--fullwidth .vara-saas-layout-main {
  width: min(100%, 1200px);
  max-width: 100%;
  margin: 0 auto;
  justify-self: center;
}

.vara-saas-single-layout--boxed .vara-saas-layout-main {
  width: min(100%, 840px);
  max-width: 100%;
  margin: 0 auto;
  justify-self: center;
}

@media (min-width: 961px) {
  .vara-saas-sidebar-enabled .vara-saas-single-layout--sidebar-left.has-sidebar {
    grid-template-columns: 320px minmax(0, 1fr);
  }
  .vara-saas-sidebar-enabled .vara-saas-single-layout--sidebar-left.has-sidebar .vara-saas-layout-main {
    order: 2;
  }
  .vara-saas-sidebar-enabled .vara-saas-single-layout--sidebar-left.has-sidebar .vara-saas-layout-sidebar {
    order: 1;
  }
}

/* ── Header ── */
.vara-saas-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  background: var(--vara-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--vara-glass-border);
  transition: all 0.3s ease;
}

.home .vara-saas-header {
  position: sticky;
  top: 0;
  background: var(--vara-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--vara-glass-border);
}

/* Ensure wrapped menu (when 20+ items) pushes content instead of overlapping */
.home .vara-saas-header .vara-saas-navigation {
  flex-wrap: wrap;
}

.home .vara-saas-branding,
.home .vara-saas-header-actions,
.home .vara-saas-mobile-toggle {
  align-self: center;
}

/* Admin bar — WordPress adds body.admin-bar when logged-in; sticky header must be offset (32px desktop, 46px <782px). Mobile screenshot shows overlap. */
body.admin-bar .vara-saas-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .vara-saas-header { top: 46px; }
}
/* Modern WP provides --wp-admin--admin-bar--height (auto 32/46) — prefer it when available */
@supports (top: var(--wp-admin--admin-bar--height)) {
  body.admin-bar .vara-saas-header { top: var(--wp-admin--admin-bar--height, 32px); }
}

.vara-saas-header-inner {
  width: min(var(--vara-container-max, 1280px), calc(100% - var(--vara-gutter, 32px) * 2));
  margin: 0 auto;
  padding: 0;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  min-width: 0;
  flex-wrap: nowrap;
}

/* Nav alignment variants */
.vara-saas-header--nav-left .vara-saas-navigation {
  justify-content: flex-start;
}

.vara-saas-header--nav-center .vara-saas-navigation {
  justify-content: center;
}

.vara-saas-header--nav-right .vara-saas-navigation {
  justify-content: flex-end;
}

/* ── Branding ── */
.vara-saas-branding {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.vara-saas-logo {
  font-family: var(--vara-font-family);
  font-size: 32px;
  font-weight: 700;
  text-decoration: none;
  color: var(--vara-text);
  letter-spacing: -0.01em;
}

.home .vara-saas-logo {
  color: var(--vara-text);
}

/* ── Mobile Toggle ── */
.vara-saas-mobile-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--vara-text);
}

/* ── Navigation ── */
.vara-saas-navigation {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0 1.35rem;
}

.vara-saas-menu {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  min-width: 0;
  row-gap: 0.5rem;
  overflow: visible;
  align-content: flex-start;
}

.vara-saas-menu li {
  position: relative;
}

.vara-saas-menu li a {
  text-decoration: none;
  font-family: var(--vara-font-family);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--vara-text-secondary);
  transition: color 0.2s;
  padding: 0.6rem 0;
  display: inline-flex;
  align-items: center;
  line-height: 1.5;
  gap: 0.25rem;
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* WordPress wraps menu text in spans — ensure they inherit */
.vara-saas-menu li a span {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  display: inline;
}

.vara-saas-menu li a:hover,
.vara-saas-menu li.current-menu-item a,
.vara-saas-menu li.current_page_item a {
  color: var(--vara-primary);
}

/* Dropdowns — supports infinite depth, explicit 5 levels + auto beyond.
   Unit-test data: 5-deep hierarchy, long titles, fallback page menus.
   Uses :hover + :focus-within so keyboard navigation works; JS adds .menu-item-open for mobile/click.
   Note: overflow must stay visible so level 2 flyouts (right of parent) are not clipped. */
.vara-saas-menu .sub-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: auto;
  min-width: 220px;
  max-width: min(320px, calc(100vw - 32px));
  z-index: 100;
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  background: var(--vara-dropdown-bg);
  border: 1px solid var(--vara-card-border);
  box-shadow: var(--vara-shadow-lg);
  border-radius: var(--vara-radius);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  overflow: visible;
  max-height: none;
}

/* Hover bridge — invisible gap filler prevents flicker when moving diagonally across 4px gaps.
   Top-level: fills vertical gap below item. Nested: fills horizontal gap right of item. */
.vara-saas-menu > li::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 8px;
  background: transparent;
  pointer-events: auto;
  display: none;
}

.vara-saas-menu > li:hover::before,
.vara-saas-menu > li:focus-within::before,
.vara-saas-menu > li.menu-item-open::before {
  display: block;
}

.vara-saas-menu .sub-menu li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  width: 8px;
  height: 100%;
  background: transparent;
  pointer-events: auto;
  display: none;
}

.vara-saas-menu .sub-menu li:hover::before,
.vara-saas-menu .sub-menu li:focus-within::before,
.vara-saas-menu .sub-menu li.menu-item-open::before {
  display: block;
}

/* Desktop: open on hover OR keyboard focus-within OR JS-open class */
.vara-saas-menu li:hover > .sub-menu,
.vara-saas-menu li:focus-within > .sub-menu,
.vara-saas-menu li.menu-item-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Arrow indicator for top-level items (down chevron) */
.vara-saas-menu > li.menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  margin-left: 6px;
  vertical-align: middle;
  opacity: 0.6;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.vara-saas-menu > li.menu-item-has-children:hover > a::after,
.vara-saas-menu > li.menu-item-has-children:focus-within > a::after,
.vara-saas-menu > li.menu-item-has-children.menu-item-open > a::after {
  transform: rotate(180deg);
}

/* Nested items with children get a right-pointing chevron (▶) — visible at all depths */
.vara-saas-menu .sub-menu li.menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
  margin-left: auto;
  padding-left: 6px;
  opacity: 0.6;
  transition: transform 0.15s;
  flex-shrink: 0;
}

.vara-saas-menu .sub-menu li.menu-item-has-children:hover > a::after,
.vara-saas-menu .sub-menu li.menu-item-has-children:focus-within > a::after,
.vara-saas-menu .sub-menu li.menu-item-has-children.menu-item-open > a::after {
  transform: translateX(2px);
  opacity: 0.9;
}

.vara-saas-menu .sub-menu li {
  position: relative;
}

.vara-saas-menu .sub-menu li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  font-family: var(--vara-font-family);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--vara-text-secondary);
  border-radius: 0;
  transition: color 0.15s, background-color 0.15s;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.5;
}

.vara-saas-menu .sub-menu li a:hover,
.vara-saas-menu .sub-menu li a:focus {
  color: var(--vara-primary);
  background: var(--vara-surface-container-high);
}

/* Nested sub-menus (level 2+) open to the right — explicit depths 2-5 + infinite fallback */
.vara-saas-menu .sub-menu .sub-menu {
  top: -0.5rem;
  left: calc(100% + 4px);
  right: auto;
}

/* Depth 2-5 explicit stacking, depth 6+ covered by generic catch-all below */
.vara-saas-menu .sub-menu .sub-menu { z-index: 101; }
.vara-saas-menu .sub-menu .sub-menu .sub-menu { z-index: 102; }
.vara-saas-menu .sub-menu .sub-menu .sub-menu .sub-menu { z-index: 103; }
.vara-saas-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu { z-index: 104; }
/* Catch-all depth 6+: anything deeper than 5 levels stacks above all */
.vara-saas-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu { z-index: 105; }

/* Edge flip: JS adds .sub-menu--flip when near viewport right edge */
.vara-saas-menu .sub-menu.sub-menu--flip,
.vara-saas-menu .sub-menu .sub-menu.sub-menu--flip {
  left: auto;
  right: calc(100% + 4px);
}

/* Nested inside flipped parent opens back to the left */
.vara-saas-menu .sub-menu .sub-menu .sub-menu--flip {
  left: calc(100% + 4px);
  right: auto;
}

/* ── Fallback: wp_page_menu outputs .children not .sub-menu ── */
/* Mirror all .sub-menu rules for .children so fallback menus work identically */
.vara-saas-menu .children {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: auto;
  min-width: 220px;
  max-width: min(320px, calc(100vw - 32px));
  z-index: 100;
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  background: var(--vara-dropdown-bg);
  border: 1px solid var(--vara-card-border);
  box-shadow: var(--vara-shadow-lg);
  border-radius: var(--vara-radius);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  overflow: visible;
  max-height: none;
}

.vara-saas-menu li:hover > .children,
.vara-saas-menu li:focus-within > .children,
.vara-saas-menu li.menu-item-open > .children {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Fallback arrows */
.vara-saas-menu > li.page_item_has_children > a::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  margin-left: 6px;
  vertical-align: middle;
  opacity: 0.6;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.vara-saas-menu > li.page_item_has_children:hover > a::after,
.vara-saas-menu > li.page_item_has_children:focus-within > a::after,
.vara-saas-menu > li.page_item_has_children.menu-item-open > a::after {
  transform: rotate(180deg);
}

.vara-saas-menu .children li.page_item_has_children > a::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
  margin-left: auto;
  padding-left: 6px;
  opacity: 0.6;
  transition: transform 0.15s;
  flex-shrink: 0;
}

/* Fallback nested children flyout right */
.vara-saas-menu .children .children {
  top: -0.5rem;
  left: calc(100% + 4px);
  right: auto;
}

/* Fallback z-index stacking for depth 2-6 */
.vara-saas-menu .children .children { z-index: 101; }
.vara-saas-menu .children .children .children { z-index: 102; }
.vara-saas-menu .children .children .children .children { z-index: 103; }
.vara-saas-menu .children .children .children .children .children { z-index: 104; }
.vara-saas-menu .children .children .children .children .children .children { z-index: 105; }

/* Fallback hover bridge for .children */
.vara-saas-menu li.page_item_has_children::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 8px;
  background: transparent;
  pointer-events: auto;
  display: none;
}

.vara-saas-menu li.page_item_has_children:hover::before,
.vara-saas-menu li.page_item_has_children:focus-within::before,
.vara-saas-menu li.page_item_has_children.menu-item-open::before {
  display: block;
}

.vara-saas-menu .children li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  width: 8px;
  height: 100%;
  background: transparent;
  pointer-events: auto;
  display: none;
}

.vara-saas-menu .children li:hover::before,
.vara-saas-menu .children li:focus-within::before,
.vara-saas-menu .children li.menu-item-open::before {
  display: block;
}

/* Fallback link styles */
.vara-saas-menu .children li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  font-family: var(--vara-font-family);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--vara-text-secondary);
  border-radius: 0;
  transition: color 0.15s, background-color 0.15s;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.5;
}

.vara-saas-menu .children li a:hover,
.vara-saas-menu .children li a:focus {
  color: var(--vara-primary);
  background: var(--vara-surface-container-high);
}

.vara-saas-menu .children li {
  position: relative;
}

/* ── Header Actions ── */
.vara-saas-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  margin-left: auto;
}

.vara-saas-btn-explore {
  font-family: var(--vara-font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--vara-text-secondary);
  background: transparent;
  border: 1px solid var(--vara-border);
  padding: 0.5rem 1rem;
  border-radius: var(--vara-radius);
  cursor: pointer;
  transition: all 0.2s;
}

.vara-saas-btn-explore:hover {
  background: var(--vara-surface-container-high);
  color: var(--vara-text);
}

.vara-saas-btn-build {
  font-family: var(--vara-font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--vara-white);
  background: var(--vara-primary-container);
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: var(--vara-radius);
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: var(--vara-shadow-primary);
}

.vara-saas-btn-build:hover {
  filter: brightness(1.1);
  box-shadow: var(--vara-shadow-primary-lg);
  transform: translateY(-1px);
}

/* Theme Toggle Button — future-proof SVG handling
   Icons use inline SVG with stroke=currentColor. The global `svg` reset in
   style.css is now inline-block; these rules ensure header SVGs are always
   visible, correctly sized, and not affected by `img{max-width}` or future
   additions. */
.va-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--vara-radius);
  border: 1px solid var(--vara-border);
  background: transparent;
  color: var(--vara-text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.va-theme-toggle:hover {
  background: var(--vara-surface-container-high);
  color: var(--vara-text);
}

/* Icon wrappers — future additions can reuse `.va-theme-toggle__icon` */
.va-theme-toggle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  line-height: 0;
  flex-shrink: 0;
}

.va-theme-toggle__icon svg,
.va-theme-toggle svg {
  display: block;
  width: 18px;
  height: 18px;
  max-width: none;
  max-height: none;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
}

/* Default: light icon visible, dark hidden. Pure CSS so it works before JS. */
.va-theme-toggle__icon--light {
  display: inline-flex;
}

.va-theme-toggle__icon--dark {
  display: none !important;
}

body.va-dark .va-theme-toggle__icon--light {
  display: none !important;
}

body.va-dark .va-theme-toggle__icon--dark {
  display: inline-flex !important;
}

@media (prefers-color-scheme: dark) {
  body:not(.va-light):not(.va-dark) .va-theme-toggle__icon--light {
    display: none !important;
  }

  body:not(.va-light):not(.va-dark) .va-theme-toggle__icon--dark {
    display: inline-flex !important;
  }
}

/* Future-proof: any new inline SVG added to header actions/mobile toggle/scroll-top
   will remain visible and not be stretched by global resets. */
.vara-saas-mobile-toggle svg,
.vara-saas-scroll-top svg,
.vara-saas-header svg,
.va-theme-toggle svg {
  display: block;
  flex-shrink: 0;
  max-width: none;
}

.vara-saas-mobile-toggle svg {
  width: 24px;
  height: 24px;
}

.vara-saas-scroll-top svg {
  width: 20px;
  height: 20px;
}

/* ── Main Content ── */
.vara-saas-main-content {
  width: 100%;
  flex: 1;
}

/* ── Entry / Page ── */
.vara-saas-page-entry,
.vara-saas-entry {
  padding: 1rem 0;
}

.vara-saas-layout-main {
  min-width: 0;
}

.vara-saas-page-title,
.vara-saas-entry-title {
  margin: 0;
}

.vara-saas-page-content,
.vara-saas-entry-content {
  margin-top: 1.5rem;
}

.vara-saas-no-results {
  padding: 2rem 0;
}

/* ── Buttons ── */
.vara-saas-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--vara-radius);
  font-family: var(--vara-font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.vara-saas-button-primary {
  background: var(--vara-primary-container);
  color: var(--vara-white);
  box-shadow: var(--vara-shadow-primary);
}

.vara-saas-button-primary:hover {
  filter: brightness(1.1);
  box-shadow: var(--vara-shadow-primary-lg);
  transform: translateY(-1px);
}

.vara-saas-button-secondary {
  background: transparent;
  color: var(--vara-text);
  border: 1px solid var(--vara-card-border);
}

.vara-saas-button-secondary:hover {
  background: var(--vara-surface-container-high);
  transform: translateY(-1px);
}

/* ── Sections ── */
.vara-saas-section {
  width: 100%;
  max-width: var(--vara-container-max, 1280px);
  margin: 0 auto;
  padding: 0 var(--vara-gutter, 32px);
}

/* ── Hero Section ── */
.vara-saas-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
  padding: var(--vara-section-gap-lg, 200px) 0;
}

@media (min-width: 768px) {
  .vara-saas-hero {
    flex-direction: row;
    gap: 4rem;
  }
}

.vara-saas-hero-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  z-index: 10;
}

.vara-saas-hero-visual {
  flex: 1;
  width: 100%;
  max-width: 480px;
  z-index: 10;
}

/* ── Overline / Label ── */
.vara-saas-overline {
  font-family: var(--vara-font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--vara-primary);
  text-transform: uppercase;
}

/* ── Typography ── */
.vara-saas-display-lg {
  font-size: clamp(42px, 5vw, 64px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: var(--vara-text-heading);
}

.vara-saas-headline-lg {
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--vara-text-heading);
}

.vara-saas-headline-md {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--vara-text-heading);
}

.vara-saas-headline-sm {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--vara-text-heading);
}

.vara-saas-body-lg {
  font-size: 18px;
  line-height: 1.6;
  color: var(--vara-text-secondary);
}

.vara-saas-body-md {
  font-size: 16px;
  line-height: 1.6;
  color: var(--vara-text-secondary);
}

/* ── Feature Grid ── */
.vara-saas-feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .vara-saas-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .vara-saas-feature-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Feature Card ── */
.vara-saas-feature-card {
  background: var(--vara-surface-container-lowest);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--vara-radius-xl, 1.5rem);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border: 1px solid var(--vara-card-border);
  box-shadow: var(--vara-shadow);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.vara-saas-feature-card:hover {
  box-shadow: var(--vara-card-shadow-hover);
  border-color: rgba(124, 58, 237, 0.2);
  transform: translateY(-4px);
}

.vara-saas-feature-card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--vara-radius-lg, 1rem);
  background: var(--vara-surface-container);
  border: 1px solid var(--vara-card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vara-primary);
  font-size: 24px;
  transition: transform 0.2s;
}

.vara-saas-feature-card:hover .vara-saas-feature-card-icon {
  transform: scale(1.1);
}

/* ── Blog Grid ── */
.vara-saas-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* Blog card */
.vara-saas-blog-card {
  background: var(--vara-surface-container-lowest);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--vara-radius-xl, 1.5rem);
  padding: 1.5rem;
  border: 1px solid var(--vara-card-border);
  box-shadow: var(--vara-shadow);
  transition: all 0.3s ease;
}

.vara-saas-blog-card:hover {
  box-shadow: var(--vara-card-shadow-hover);
  transform: translateY(-4px);
}

.vara-saas-blog-card-image img {
  width: 100%;
  height: auto;
  border-radius: var(--vara-radius);
}

.vara-saas-blog-card-body {
  margin-top: 1rem;
}

/* ── Pricing Card ── */
.vara-saas-pricing-card {
  background: var(--vara-surface-container-lowest);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--vara-radius-xl, 1.5rem);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  border: 1px solid var(--vara-card-border);
  box-shadow: var(--vara-shadow);
  transition: all 0.3s ease;
}

.vara-saas-pricing-card:hover {
  box-shadow: var(--vara-card-shadow-hover);
}

.vara-saas-pricing-card--featured {
  border-color: rgba(124, 58, 237, 0.3);
  box-shadow: 0 8px 30px rgba(124, 58, 237, 0.12);
  position: relative;
  transform: scale(1.02);
  z-index: 10;
}

.vara-saas-pricing-card--featured:hover {
  box-shadow: 0 12px 40px rgba(124, 58, 237, 0.2);
}

.vara-saas-pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--vara-primary);
  color: var(--vara-white);
  font-family: var(--vara-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: var(--vara-radius-full, 9999px);
  box-shadow: var(--vara-shadow-primary);
}

/* ── Testimonial Card ── */
.vara-saas-testimonial-card {
  background: var(--vara-surface-container-lowest);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--vara-radius-xl, 1.5rem);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  border: 1px solid var(--vara-card-border);
  box-shadow: var(--vara-shadow);
  transition: all 0.3s ease;
}

.vara-saas-testimonial-card:hover {
  box-shadow: var(--vara-card-shadow-hover);
  transform: translateY(-4px);
}

/* ── FAQ ── */
.vara-saas-faq-item {
  background: var(--vara-surface-container-lowest);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--vara-radius-lg, 1rem);
  padding: 1.5rem;
  border: 1px solid var(--vara-card-border);
  box-shadow: var(--vara-shadow-sm);
  transition: all 0.2s;
}

.vara-saas-faq-item:hover {
  border-color: var(--vara-border);
}

.vara-saas-faq-item summary {
  font-size: 18px;
  font-weight: 600;
  color: var(--vara-text-heading);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vara-saas-faq-item summary::-webkit-details-marker {
  display: none;
}

/* ── CTA Banner ── */
.vara-saas-cta-banner {
  background: var(--vara-surface-container-lowest);
  border-radius: 1.5rem;
  padding: 3rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  border: 1px solid rgba(124, 58, 237, 0.2);
  box-shadow: 0 8px 30px rgba(124, 58, 237, 0.08);
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .vara-saas-cta-banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ── Divider ── */
.vara-saas-divider {
  width: 100%;
  height: 1px;
  background: var(--vara-card-border);
}

/* ── Footer ── */
.vara-saas-footer {
  background: var(--vara-surface-container-lowest);
  border-top: 1px solid var(--vara-outline-variant);
  padding: var(--vara-section-gap, 120px) 0;
}

.vara-saas-footer-inner {
  width: min(var(--vara-container-max, 1280px), calc(100% - var(--vara-gutter, 32px) * 2));
  margin: 0 auto;
}

.vara-saas-footer-top {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.vara-saas-footer-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.vara-saas-footer-col-title {
  font-family: var(--vara-font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--vara-text);
}

.vara-saas-footer-col a {
  color: var(--vara-text-secondary);
  transition: color 0.2s;
}

.vara-saas-footer-col a:hover {
  color: var(--vara-primary);
}

.vara-saas-footer-brand {
  font-family: var(--vara-font-family);
  font-size: 24px;
  font-weight: 700;
  color: var(--vara-primary);
  text-decoration: none;
}

.vara-saas-footer-brand img {
  display: block;
  height: auto;
}

.vara-saas-footer-description {
  color: var(--vara-text-secondary);
  font-size: 16px;
  line-height: 1.6;
}

.vara-saas-footer-email {
  margin-top: 0.5rem;
}

.vara-saas-footer-email a {
  color: var(--vara-text-secondary);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.2s;
}

.vara-saas-footer-email a:hover {
  color: var(--vara-primary);
}

.vara-saas-footer-socials {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}

.vara-saas-footer-socials--left {
  justify-content: flex-start;
}

.vara-saas-footer-socials--center {
  justify-content: center;
}

.vara-saas-footer-socials--right {
  justify-content: flex-end;
}

.vara-saas-footer-socials a {
  color: var(--vara-text-secondary);
  font-size: 20px;
  transition: color 0.2s;
}

.vara-saas-footer-socials a:hover {
  color: var(--vara-primary);
}

.vara-saas-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--vara-outline-variant);
  padding-top: 1.5rem;
  margin-top: 1.5rem;
  gap: 1rem;
}

.vara-saas-footer-bottom--align-center {
  justify-content: center;
  text-align: center;
}

.vara-saas-footer-bottom--align-right {
  justify-content: flex-end;
}

/* ── Footer Responsive ── */
@media (max-width: 1024px) {
  .vara-saas-footer-top {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .vara-saas-footer-top {
    grid-template-columns: 1fr !important;
  }
  .vara-saas-footer-brand {
    font-size: 20px;
  }
  .vara-saas-footer-description {
    font-size: 14px;
  }
  .vara-saas-footer-socials {
    justify-content: flex-start;
  }
  .vara-saas-footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* ==========================================================================
   Forms — Accessible, theme-aware (matches Figma: Full Name / Work Email)
   Supports: native <form>, .vara-form, WP comment/search, CF7, Gutenberg
   ========================================================================== */

/* ── Layout ── */
.vara-form,
form.vara-form,
.comment-form,
.search-form,
.wpcf7-form,
.wp-block-search__inside-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.vara-form-group,
.comment-form p,
.wpcf7-form p {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0;
}

.vara-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .vara-form-row--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

fieldset {
  border: 1px solid var(--vara-border);
  border-radius: var(--vara-radius-md);
  padding: 1.25rem;
  margin: 0;
}

legend {
  font-family: var(--vara-font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vara-text-secondary);
  padding: 0 0.5rem;
}

/* ── Labels ── */
label,
.vara-form-label,
.comment-form label,
.wpcf7-label,
.wp-block-search__label {
  font-family: var(--vara-font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #55647a;
  line-height: 1.4;
}

label:has(+ input:required)::after,
label:has(+ textarea:required)::after,
label:has(+ select:required)::after,
.vara-form-label--required::after,
.required::after,
abbr.required::after {
  content: " *";
  color: #c81e1e;
  font-weight: 700;
}

/* ── Inputs / Textarea / Select ── */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
textarea,
select {
  width: 100%;
  font-family: var(--vara-font-family);
  font-size: 15px;
  line-height: 1.5;
  color: var(--vara-text);
  background: var(--vara-surface-container-lowest);
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.85rem 1rem;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

textarea {
  min-height: 128px;
  resize: vertical;
  line-height: 1.6;
}

select {
  padding-right: 2.5rem;
  background-image:
    linear-gradient(45deg, transparent 50%, #64748b 50%),
    linear-gradient(135deg, #64748b 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% - 2px),
    calc(100% - 15px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

input::placeholder,
textarea::placeholder {
  color: #94a3b8;
  opacity: 1;
}

/* ── Focus (accessible) ── */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--vara-primary);
  box-shadow: 0 0 0 3px var(--vara-focus-ring);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--vara-primary);
  outline-offset: 2px;
}

/* Fallback: keep box-shadow for focus without :focus-visible support */
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
  outline: none;
}

/* ── Invalid / Error ── */
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"],
input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown) {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.vara-form-hint {
  font-size: 12px;
  line-height: 1.5;
  color: #55647a;
}

.vara-form-error,
.wpcf7-not-valid-tip,
.comment-form .error {
  font-size: 12px;
  font-weight: 500;
  color: #c81e1e;
  line-height: 1.5;
}

.wpcf7-response-output,
.vara-form-notice {
  font-size: 14px;
  line-height: 1.5;
  border-radius: var(--vara-radius);
  padding: 0.85rem 1rem;
  border: 1px solid transparent;
}

.wpcf7-response-output.wpcf7-validation-errors,
.vara-form-notice--error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.wpcf7-mail-sent-ok,
.vara-form-notice--success {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

/* ── Disabled ── */
input:disabled,
textarea:disabled,
select:disabled,
button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Checkbox / Radio (accessible custom) ── */
input[type="checkbox"],
input[type="radio"] {
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  border-radius: 0.25rem;
  border: 1.5px solid #cbd5e1;
  background: var(--vara-surface-container-lowest);
  display: inline-grid;
  place-content: center;
  vertical-align: middle;
  flex-shrink: 0;
}

input[type="radio"] {
  border-radius: 50%;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: var(--vara-primary);
  border-color: var(--vara-primary);
  color: #fff;
}

input[type="checkbox"]:checked::before {
  content: "";
  width: 0.65rem;
  height: 0.65rem;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  background: #fff;
}

input[type="radio"]:checked::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #fff;
}

/* ── Buttons (Submit) ── */
button,
input[type="submit"],
input[type="button"],
.vara-btn,
.vara-form-submit,
.wp-block-button__link,
.wp-block-search__button,
.comment-form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--vara-font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 0.95rem 1.5rem;
  border-radius: 10px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}

button:active,
input[type="submit"]:active,
.vara-btn:active {
  transform: translateY(0);
}

button:disabled,
input[type="submit"]:disabled {
  transform: none;
  box-shadow: none;
}

/* Primary = Figma purple pill */
.vara-btn--primary,
.vara-form-submit,
input[type="submit"],
.comment-form input[type="submit"],
.wp-block-button__link,
.wpcf7-submit {
  width: 100%;
  background: #7c3aed;
  color: #ffffff;
  border-color: #7c3aed;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.28);
}

.vara-btn--primary:hover,
.vara-form-submit:hover,
input[type="submit"]:hover,
.comment-form input[type="submit"]:hover,
.wp-block-button__link:hover {
  background: #6d28e0;
  border-color: #6d28e0;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.36);
  transform: translateY(-1px);
}

.vara-btn--primary:active,
.vara-form-submit:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.24);
}

/* Secondary / Ghost */
.vara-btn--secondary,
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--vara-text);
  border-color: var(--vara-border);
}

.vara-btn--secondary:hover {
  background: var(--vara-surface-container-high);
  border-color: var(--vara-border);
}

/* Arrow affordance for submit (Figma →) */
.vara-form-submit::after {
  content: "→";
  font-size: 14px;
  transition: transform 0.2s;
}

.vara-form-submit:hover::after {
  transform: translateX(3px);
}

/* ── Search form inline ── */
.search-form,
.wp-block-search__inside-wrapper,
form[role="search"] {
  flex-direction: row;
  align-items: stretch;
}

.search-form label,
.wp-block-search__inside-wrapper .wp-block-search__input {
  flex: 1;
}

.search-form input[type="search"],
.wp-block-search__input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.search-form input[type="submit"],
.wp-block-search__button {
  width: auto;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  flex-shrink: 0;
}

/* ==========================================================================
   Blocks — Future-proof Gutenberg styling
   Covers: headings, paragraph, quote, code, table, separator, list, buttons,
           columns, cover, group, embed
   ========================================================================== */
.entry-content > *,
.wp-block-post-content > *,
.vara-saas-entry-content > *,
.vara-saas-page-content > * {
  max-width: 100%;
}

.wp-block-heading,
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 {
  color: var(--vara-text-heading);
  line-height: 1.25;
  overflow-wrap: break-word;
}

.entry-content p,
.wp-block-paragraph {
  color: var(--vara-text-secondary);
  line-height: 1.7;
}

.entry-content a:not(.wp-block-button__link):not(.vara-btn) {
  color: var(--vara-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(124, 58, 237, 0.3);
}

.entry-content a:not(.wp-block-button__link):hover {
  text-decoration-color: var(--vara-primary);
}

.wp-block-quote,
blockquote {
  border-left: 3px solid var(--vara-primary);
  margin: 2rem 0;
  padding: 1rem 1.5rem;
  background: var(--vara-surface-container-low);
  border-radius: 0 var(--vara-radius) var(--vara-radius) 0;
  color: var(--vara-text);
  font-style: italic;
}

.wp-block-quote cite,
blockquote cite {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--vara-font-mono);
  font-size: 12px;
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vara-text-secondary);
}

.wp-block-pullquote {
  border-top: 3px solid var(--vara-primary);
  border-bottom: 3px solid var(--vara-primary);
  padding: 2rem 0;
  text-align: center;
}

.wp-block-code,
pre {
  background: var(--vara-surface-container-low);
  border: 1px solid var(--vara-border);
  border-radius: var(--vara-radius-md);
  padding: 1.25rem;
  overflow-x: auto;
  font-family: var(--vara-font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--vara-text);
}

code:not(pre code) {
  background: var(--vara-surface-container-high);
  border-radius: 0.3rem;
  padding: 0.15rem 0.35rem;
  font-family: var(--vara-font-mono);
  font-size: 0.88em;
  color: var(--vara-text);
}

.wp-block-table {
  overflow-x: auto;
}

.wp-block-table table,
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.6;
}

.wp-block-table th,
.wp-block-table td,
table th,
table td {
  border: 1px solid var(--vara-border);
  padding: 0.75rem 1rem;
  text-align: left;
}

.wp-block-table th,
table th {
  background: var(--vara-surface-container-low);
  font-weight: 600;
  color: var(--vara-text-heading);
}

.wp-block-separator,
hr {
  border: none;
  border-top: 1px solid var(--vara-border);
  margin: 2.5rem auto;
}

.wp-block-separator.is-style-wide {
  width: 100%;
}

.wp-block-separator.is-style-dots::before {
  color: var(--vara-text-muted);
  letter-spacing: 0.6em;
}

.entry-content ul,
.entry-content ol,
.wp-block-list {
  padding-left: 1.5rem;
  color: var(--vara-text-secondary);
}

.entry-content li + li {
  margin-top: 0.4rem;
}

.wp-block-columns {
  gap: 2rem;
}

.wp-block-cover {
  border-radius: var(--vara-radius-xl);
  overflow: hidden;
}

.wp-block-cover__inner-container {
  width: min(100% - 2rem, 720px);
}

.wp-block-group.has-background {
  border-radius: var(--vara-radius-xl);
  padding: 2rem;
}

.wp-block-buttons {
  gap: 0.75rem;
}

/* ==========================================================================
   Media — Future-proof responsive media
   Covers: image, figure, gallery, video, audio, embed, cover
   ========================================================================== */
.entry-content img,
.wp-block-image img,
figure img {
  height: auto;
  border-radius: var(--vara-radius-md);
}

figure,
.wp-block-image,
.wp-block-gallery,
.wp-block-video,
.wp-block-audio,
.wp-block-embed {
  margin: 2rem 0;
}

figcaption,
.wp-caption-text,
.wp-block-image figcaption,
.wp-block-gallery figcaption,
.wp-block-embed figcaption {
  margin-top: 0.6rem;
  font-family: var(--vara-font-mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: #55647a;
  text-align: center;
}

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
  background: linear-gradient(0deg, rgba(0,0,0,0.65) 0%, transparent 100%);
  padding: 0.75rem 0.6rem 0.5rem;
  border-radius: 0 0 var(--vara-radius-md) var(--vara-radius-md);
}

.wp-block-video video,
video {
  width: 100%;
  height: auto;
  border-radius: var(--vara-radius-lg);
  background: #000;
}

.wp-block-audio audio,
audio {
  width: 100%;
}

.wp-block-embed__wrapper,
.wp-block-embed iframe {
  border-radius: var(--vara-radius-lg);
  overflow: hidden;
}

.wp-block-embed iframe {
  width: 100%;
}

/* Keep embeds responsive (16:9) when no aspect set */
.wp-block-embed.is-type-video .wp-block-embed__wrapper {
  position: relative;
  padding-top: 56.25%;
}

.wp-block-embed.is-type-video .wp-block-embed__wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Forms / Blocks / Media — Dark mode ── */
body.va-dark label,
body.va-dark .vara-form-label,
body.va-dark .vara-form-hint,
body.va-dark figcaption,
body.va-dark .wp-caption-text {
  color: var(--vara-text-secondary);
}

body.va-dark input::placeholder,
body.va-dark textarea::placeholder {
  color: var(--vara-text-muted);
}

body.va-dark code:not(pre code) {
  background: var(--vara-surface-container-high);
}

body.va-dark .vara-form-notice--error {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.28);
  color: #fca5a5;
}

body.va-dark .vara-form-notice--success {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.28);
  color: #86efac;
}

@media (prefers-color-scheme: dark) {
  body:not(.va-light):not(.va-dark) label,
  body:not(.va-light):not(.va-dark) .vara-form-label,
  body:not(.va-light):not(.va-dark) .vara-form-hint,
  body:not(.va-light):not(.va-dark) figcaption,
  body:not(.va-light):not(.va-dark) .wp-caption-text {
    color: var(--vara-text-secondary);
  }
  body:not(.va-light):not(.va-dark) input::placeholder,
  body:not(.va-light):not(.va-dark) textarea::placeholder {
    color: var(--vara-text-muted);
  }
}

/* ── Reduced motion (a11y) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Archive ── */
.vara-saas-archive-header {
  margin-bottom: 1.5rem;
}

.vara-saas-archive-list {
  display: grid;
  gap: 1.5rem;
}

.vara-saas-archive-entry {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
}

.vara-saas-archive-body {
  display: grid;
}

/* ── Builder Canvas ── */
.vara-saas-builder-canvas {
  width: 100%;
}

/* ── Scroll to Top ── */
.vara-saas-scroll-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 48px;
  height: 48px;
  border-radius: var(--vara-radius);
  background: var(--vara-primary-container);
  color: var(--vara-white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--vara-shadow-primary);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  z-index: 100;
}

.vara-saas-scroll-top.visible {
  opacity: 1;
  visibility: visible;
}

.vara-saas-scroll-top:hover {
  filter: brightness(1.1);
  box-shadow: var(--vara-shadow-primary-lg);
  transform: translateY(-2px);
}

/* ── Mobile Responsive ── */
@media (max-width: 980px) {
  .vara-saas-container {
    padding: var(--vara-section-gap, 120px) 0;
  }

  .vara-saas-header-inner {
    width: calc(100% - var(--vara-gutter, 32px) * 2);
  }

  .vara-saas-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
  }

  .vara-saas-mobile-toggle svg {
    width: 28px;
    height: 28px;
  }

  .vara-saas-navigation {
    position: absolute;
    top: calc(100% + 8px);
    left: 12px;
    right: 12px;
    background: var(--vara-surface-container-lowest, #fff);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, visibility 0.35s;
    z-index: 99;
    border: 1px solid var(--vara-card-border, rgba(0,0,0,0.06));
    border-radius: 16px;
    box-shadow: var(--vara-shadow-lg, 0 8px 30px rgba(0,0,0,0.12));
  }

  .vara-saas-navigation--open {
    max-height: calc(100vh - 100px);
    max-height: calc(100dvh - 100px);
    opacity: 1;
    visibility: visible;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .vara-saas-menu {
    flex-direction: column;
    gap: 4px;
    padding: 12px;
  }

  .vara-saas-menu > li {
    border: none;
    border-radius: 10px;
    overflow: hidden;
    background: transparent;
    transition: background 0.15s;
  }

  .vara-saas-menu > li:hover {
    background: transparent;
  }

  .vara-saas-menu li a {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 0.75rem;
    width: 100%;
    border-radius: 10px;
    font-family: var(--vara-font-family, Inter, sans-serif);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.4;
    transition: background 0.15s, color 0.15s;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .vara-saas-menu li a:hover,
  .vara-saas-menu li a:focus {
    background: var(--vara-surface-container, #f1f5f9);
    color: var(--vara-primary, #7c3aed);
  }

  .vara-saas-menu > li.current-menu-item > a,
  .vara-saas-menu > li.current_page_item > a {
    background: rgba(124, 58, 237, 0.08);
    color: var(--vara-primary, #7c3aed);
    font-weight: 600;
  }

  /* Disable hover-based dropdown on mobile — use click + focus-within + open class */
  .vara-saas-menu li:hover > .sub-menu,
  .vara-saas-menu li:hover > .children {
    opacity: 0;
    visibility: hidden;
    transform: none;
  }

  .vara-saas-menu li:focus-within > .sub-menu,
  .vara-saas-menu li.menu-item-open > .sub-menu,
  .vara-saas-menu li:focus-within > .children,
  .vara-saas-menu li.menu-item-open > .children {
    opacity: 1;
    visibility: visible;
  }

  .vara-saas-menu .sub-menu,
  .vara-saas-menu .children {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    box-shadow: none;
    border-radius: 10px;
    border: none;
    background: var(--vara-surface-container, #f8fafc);
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease, margin 0.3s ease;
    max-width: none;
    width: auto;
  }

  body.va-dark .vara-saas-menu .sub-menu,
  body.va-dark .vara-saas-menu .children {
    background: var(--vara-surface-container-low, #131b2e);
  }

  .vara-saas-menu li.menu-item-open > .sub-menu,
  .vara-saas-menu li.menu-item-open > .children {
    max-height: none;
    max-height: 3000px;
    opacity: 1;
    visibility: visible;
    padding: 6px 0;
    margin: 6px 0 6px 12px;
    overflow: visible;
  }

  /* Sub-menu links — distinct from top level, prevent overlap */
  .vara-saas-menu .sub-menu li a,
  .vara-saas-menu .children li a {
    padding: 10px 16px 10px 16px;
    font-size: 14px;
    font-weight: 400;
    border-radius: 8px;
    margin: 2px 6px;
    width: calc(100% - 12px);
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.4;
    background: transparent;
  }

  .vara-saas-menu .sub-menu li a:hover,
  .vara-saas-menu .children li a:hover {
    background: var(--vara-surface-container-high, #e2e8f0);
  }

  /* Recursive indent + left accent — levels 2-5, 6+ flattened to prevent squeeze */
  .vara-saas-menu .sub-menu .sub-menu li a,
  .vara-saas-menu .children .children li a { padding-left: 24px; }
  .vara-saas-menu .sub-menu .sub-menu .sub-menu li a,
  .vara-saas-menu .children .children .children li a { padding-left: 32px; }
  .vara-saas-menu .sub-menu .sub-menu .sub-menu .sub-menu li a,
  .vara-saas-menu .children .children .children .children li a { padding-left: 40px; }
  .vara-saas-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li a,
  .vara-saas-menu .children .children .children .children .children li a { padding-left: 40px; }
  .vara-saas-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li a,
  .vara-saas-menu .children .children .children .children .children .children li a { padding-left: 40px; }

  /* Nested sub-menus — card inside card, no overlap */
  .vara-saas-menu .sub-menu .sub-menu,
  .vara-saas-menu .children .children,
  .vara-saas-menu .sub-menu .children,
  .vara-saas-menu .children .sub-menu {
    background: var(--vara-surface-container-high, #f1f5f9);
    border-left: 2px solid rgba(124, 58, 237, 0.12);
    margin: 6px 6px 6px 12px;
    border-radius: 10px;
  }

  body.va-dark .vara-saas-menu .sub-menu .sub-menu,
  body.va-dark .vara-saas-menu .children .children {
    background: rgba(255, 255, 255, 0.04);
    border-left-color: rgba(124, 58, 237, 0.2);
  }

  .vara-saas-menu .sub-menu .sub-menu .sub-menu,
  .vara-saas-menu .children .children .children {
    background: var(--vara-surface-container-high, #e8eaf0);
  }

  body.va-dark .vara-saas-menu .sub-menu .sub-menu .sub-menu,
  body.va-dark .vara-saas-menu .children .children .children {
    background: rgba(255,255,255,0.06);
  }

  /* Mobile submenu toggle arrow — all depths, caret perfectly centred vertically */
  .vara-saas-menu li.menu-item-has-children > a,
  .vara-saas-menu li.page_item_has_children > a {
    justify-content: space-between;
    padding-right: 40px;
    position: relative;
  }

  .vara-saas-menu li.menu-item-has-children > a::after,
  .vara-saas-menu li.page_item_has_children > a::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid currentColor;
    transform: translateY(-50%);
    transition: transform 0.2s;
    flex-shrink: 0;
    margin-left: 0;
  }

  .vara-saas-menu li.menu-item-open.menu-item-has-children > a::after,
  .vara-saas-menu li.menu-item-open.page_item_has_children > a::after {
    transform: translateY(-50%) rotate(180deg);
  }

  .vara-saas-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .vara-saas-btn-explore,
  .vara-saas-btn-build {
    display: none;
  }

  .vara-saas-hero {
    padding: 4rem 0;
    gap: 3rem;
  }

  .vara-saas-hero-visual {
    max-width: 100%;
  }

  .vara-saas-cta-banner {
    padding: 2rem;
  }

  .vara-saas-blog-grid {
    grid-template-columns: 1fr;
  }

  .vara-saas-feature-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Conic Gradient Border — Reusable Utility
   Apply class: .conic-border (static) or .conic-border--animated (rotating)
   Works on cards, buttons, sections, divs, images — any element.
   ========================================================================== */

/* ── Base: Static conic gradient border ── */
.conic-border {
  --conic-width: 2px;
  --conic-radius: 1rem;

  position: relative;
  border: none !important;
  border-radius: var(--conic-radius) !important;
  background:
    linear-gradient(var(--vara-bg, #fff), var(--vara-bg, #fff)) padding-box,
    conic-gradient(
      from 0deg,
      var(--vara-primary, #7c3aed),
      var(--vara-secondary, #cebdff),
      var(--vara-accent, #4edea3),
      var(--vara-primary-container, #7c3aed),
      var(--vara-secondary-container, #4f319c),
      var(--vara-tertiary-container, #007650),
      var(--vara-primary, #7c3aed)
    ) border-box;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
}

.conic-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--conic-width);
  background: conic-gradient(
    from 0deg,
    var(--vara-primary, #7c3aed),
    var(--vara-secondary, #cebdff),
    var(--vara-accent, #4edea3),
    var(--vara-primary-container, #7c3aed),
    var(--vara-secondary-container, #4f319c),
    var(--vara-tertiary-container, #007650),
    var(--vara-primary, #7c3aed)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ── Animated: Rotating conic gradient border ── */
@property --conic-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.conic-border--animated {
  --conic-angle: 0deg;
}

.conic-border--animated::before {
  background: conic-gradient(
    from var(--conic-angle),
    var(--vara-primary, #7c3aed),
    var(--vara-secondary, #cebdff),
    var(--vara-accent, #4edea3),
    var(--vara-primary-container, #7c3aed),
    var(--vara-secondary-container, #4f319c),
    var(--vara-tertiary-container, #007650),
    var(--vara-primary, #7c3aed)
  );
  animation: conic-spin 3s linear infinite;
}

@keyframes conic-spin {
  to {
    --conic-angle: 360deg;
  }
}

/* ── Variants: Thicker border ── */
.conic-border--thick {
  --conic-width: 3px;
}

.conic-border--thick::before {
  padding: 3px;
}

/* ── Variants: Glowing shadow ── */
.conic-border--glow::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--conic-angle, 0deg),
    var(--vara-primary, #7c3aed),
    var(--vara-secondary, #cebdff),
    var(--vara-accent, #4edea3),
    var(--vara-primary-container, #7c3aed),
    var(--vara-secondary-container, #4f319c),
    var(--vara-tertiary-container, #007650),
    var(--vara-primary, #7c3aed)
  );
  filter: blur(20px);
  opacity: 0.35;
  z-index: -1;
  pointer-events: none;
}

.conic-border--animated.conic-border--glow::after {
  animation: conic-spin 3s linear infinite;
}

/* ── Button sizing helper ── */
.conic-border.conic-border--btn {
  --conic-width: 2px;
  --conic-radius: 8px;
}

/* ── Card sizing helper ── */
.conic-border.conic-border--card {
  --conic-width: 2px;
  --conic-radius: 16px;
}

/* ── Image/Avatar helper ── */
.conic-border.conic-border--circle {
  --conic-radius: 9999px;
}

/* ── Dark mode adjustments ── */
body.va-dark .conic-border {
  background:
    linear-gradient(var(--vara-surface, #0b1326), var(--vara-surface, #0b1326)) padding-box,
    conic-gradient(
      from 0deg,
      var(--vara-primary, #d2bbff),
      var(--vara-secondary, #cebdff),
      var(--vara-accent, #4edea3),
      var(--vara-primary-container, #7c3aed),
      var(--vara-secondary-container, #4f319c),
      var(--vara-tertiary-container, #007650),
      var(--vara-primary, #d2bbff)
    ) border-box;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
}

body.va-dark .conic-border::before {
  background: conic-gradient(
    from 0deg,
    var(--vara-primary, #d2bbff),
    var(--vara-secondary, #cebdff),
    var(--vara-accent, #4edea3),
    var(--vara-primary-container, #7c3aed),
    var(--vara-secondary-container, #4f319c),
    var(--vara-tertiary-container, #007650),
    var(--vara-primary, #d2bbff)
  );
}

body.va-dark .conic-border--animated::before {
  background: conic-gradient(
    from var(--conic-angle),
    var(--vara-primary, #d2bbff),
    var(--vara-secondary, #cebdff),
    var(--vara-accent, #4edea3),
    var(--vara-primary-container, #7c3aed),
    var(--vara-secondary-container, #4f319c),
    var(--vara-tertiary-container, #007650),
    var(--vara-primary, #d2bbff)
  );
}

body.va-dark .conic-border--glow::after {
  background: conic-gradient(
    from var(--conic-angle, 0deg),
    var(--vara-primary, #d2bbff),
    var(--vara-secondary, #cebdff),
    var(--vara-accent, #4edea3),
    var(--vara-primary-container, #7c3aed),
    var(--vara-secondary-container, #4f319c),
    var(--vara-tertiary-container, #007650),
    var(--vara-primary, #d2bbff)
  );
  opacity: 0.45;
}

/* wp-caption and wp-caption-text */
.wp-caption {
  margin-top: 1.5rem;
  max-width: 100%;
  text-align: center;
}
.wp-caption .wp-caption-text {
  padding: 0.5rem 0.1rem;
  font-size: 0.857em;
  line-height: 1.4;
  color: #666666;
  margin: 0;
}
.sticky {
  display: list-item;
  list-style-image: url(https://s2.wp.com/wp-content/themes/pub/twentyten/images/entry-dot.gif);
}
.gallery-caption {
  text-align: center;
  padding: 0.5rem;
  font-style: italic;
}
.bypostauthor {
  display: block;
}