/** Shopify CDN: Minification failed

Line 784:0 All "@import" rules must come first

**/
/* =============================================================
   Volteura patches 2026-04-18 — homepage refresh batch
   - Hide native Shopify footer (v2-footer replaces it fully)
   - Hide header search icon (belt + braces w/ show_search=false)
   - Brand logo grid styles for proof (stack) section
   - Volt/Nova subtle emphasis
   ============================================================= */

/* 1. Hide duplicate native footer — v2-footer renders all we need */
.shopify-section-group-footer-group { display: none !important; }

/* 2. Hide header search icon + modal (defence in depth) */
.search-action,
.search-modal,
button[aria-label*="search" i],
a[aria-label*="search" i] { display: none !important; }

/* 2b. Hide cart/bag icon — not a shop, no e-commerce surface to expose */
.header-actions__cart-icon,
cart-icon,
button[aria-label="Cart"],
button[aria-label*="cart" i]:not([aria-label*="scart" i]),
a[href="/cart"],
a[href$="/cart"] { display: none !important; }
/* Leave cart-drawer-component in DOM (used by theme scripts) but invisible */
cart-drawer-component, .cart-drawer { visibility: hidden !important; position: absolute !important; pointer-events: none !important; }

/* 3. Brand marquee — proof / stack section (auto-scroll, 3 rows, opposite dirs) */
.v2-proof-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 12px;
}
.v2-marquee {
  position: relative;
  overflow: hidden;
  padding: 8px 0;
  margin: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 80px, black calc(100% - 80px), transparent);
          mask-image: linear-gradient(90deg, transparent, black 80px, black calc(100% - 80px), transparent);
}
.v2-marquee-track {
  display: flex;
  gap: 14px;
  width: max-content;
  will-change: transform;
  animation-duration: 48s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.v2-marquee--left  .v2-marquee-track { animation-name: v2-marquee-left; }
.v2-marquee--right .v2-marquee-track { animation-name: v2-marquee-right; }
.v2-marquee:hover .v2-marquee-track,
.v2-marquee:focus-within .v2-marquee-track { animation-play-state: paused; }
@keyframes v2-marquee-left  { from { transform: translateX(0); }       to { transform: translateX(-50%); } }
@keyframes v2-marquee-right { from { transform: translateX(-50%); }    to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .v2-marquee-track { animation: none; transform: none; }
  .v2-marquee { overflow: auto; -webkit-mask-image: none; mask-image: none; }
  .v2-marquee::-webkit-scrollbar { display: none; }
}
/* differentiate row speeds for layered feel */
.v2-marquee[data-row="1"] .v2-marquee-track { animation-duration: 56s; }
.v2-marquee[data-row="2"] .v2-marquee-track { animation-duration: 68s; }
.v2-marquee[data-row="3"] .v2-marquee-track { animation-duration: 44s; }

/* Brand chip — larger, moodier, glow on hover */
.v2-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--v-fog, #c3c9d4);
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.v2-brand:hover {
  background: linear-gradient(135deg, rgba(196, 165, 122, 0.14), rgba(255, 255, 255, 0.04));
  border-color: rgba(196, 165, 122, 0.35);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(196, 165, 122, 0.14), 0 0 0 1px rgba(196, 165, 122, 0.15) inset;
}
.v2-brand img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
  filter: brightness(1.25);
}

/* 4. Volt + Nova row subtle emphasis (5th row in edge grid) */
.v2-edge-grid .v2-edge-row:nth-child(5) .v2-edge-heading {
  background: linear-gradient(90deg, var(--v-brass, #c4a57a) 0%, #e6e9f0 80%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 5. Footer privacy/terms anchor styling (works w/ added links) */
.v2-footer-bottom a {
  color: var(--v-fog, #c3c9d4);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.2);
  text-underline-offset: 2px;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
.v2-footer-bottom a:hover {
  color: #ffffff;
  text-decoration-color: rgba(255, 255, 255, 0.6);
}

/* 6. Profile "M" avatar — readable on dark header bg */
.account-button,
.account-button.header-actions__action {
  background: rgba(196, 165, 122, 0.12) !important;
  border: 1px solid rgba(196, 165, 122, 0.35) !important;
  border-radius: 999px !important;
  padding: 4px !important;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.account-button:hover {
  background: rgba(196, 165, 122, 0.22) !important;
  border-color: rgba(196, 165, 122, 0.6) !important;
  transform: scale(1.06);
}
.account-button__avatar {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #c4a57a, #8b6f44) !important;
  color: #0d1223 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
}

/* 7. Account popover — dark theme, matches site aesthetic */
.account-popover__panel,
.account-popover__panel.details-content {
  background: linear-gradient(180deg, #141a2e 0%, #0d1223 100%) !important;
  color: #e6e9f0 !important;
  border: 1px solid rgba(196, 165, 122, 0.18) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(196, 165, 122, 0.08) inset !important;
  padding: 8px !important;
}
.account-popover__panel .account-actions,
.account-popover__panel .account-actions * {
  color: #e6e9f0 !important;
  background: transparent !important;
}
.account-popover__panel a,
.account-popover__panel button {
  color: #e6e9f0 !important;
  background: transparent !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px !important;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease, box-shadow 140ms ease !important;
}
.account-popover__panel a:hover,
.account-popover__panel button:hover {
  background: rgba(196, 165, 122, 0.10) !important;
  color: #ffffff !important;
}

/* Popover: primary "Go to Dashboard" CTA — brass gradient, punchy */
.account-popover__panel .account-actions__cta,
.account-actions__cta {
  background: linear-gradient(135deg, #d4b485 0%, #c4a57a 50%, #a88a5c 100%) !important;
  color: #0d1223 !important;
  font-weight: 700 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 14px !important;
  padding: 14px 18px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(196, 165, 122, 0.6) !important;
  box-shadow: 0 8px 24px rgba(196, 165, 122, 0.25), 0 0 0 1px rgba(255,255,255,0.05) inset !important;
  letter-spacing: 0.01em !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
}
.account-popover__panel .account-actions__cta:hover,
.account-actions__cta:hover {
  background: linear-gradient(135deg, #e6c89a 0%, #d4b485 50%, #b89a6a 100%) !important;
  color: #0d1223 !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(196, 165, 122, 0.35), 0 0 0 1px rgba(255,255,255,0.1) inset !important;
}
.account-actions__cta-arrow {
  font-weight: 700;
  font-size: 16px;
  opacity: 0.85;
  margin-left: auto;
}

/* Popover: "Profile" secondary button */
.account-popover__panel .account-actions__secondary,
.account-actions__secondary {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: #e6e9f0 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px !important;
  padding: 11px 14px !important;
  border-radius: 10px !important;
}
.account-popover__panel .account-actions__secondary:hover,
.account-actions__secondary:hover {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(196, 165, 122, 0.3) !important;
  color: #ffffff !important;
}

/* Popover: Sign out — subtle red danger */
.account-popover__panel .account-actions__signout,
.account-actions__signout {
  color: #ef4444 !important;
  background: transparent !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  justify-content: center !important;
  text-decoration: none !important;
}
.account-popover__panel .account-actions__signout:hover,
.account-actions__signout:hover {
  background: rgba(239, 68, 68, 0.10) !important;
  color: #ff6a6a !important;
  border-color: rgba(239, 68, 68, 0.45) !important;
}
.account-actions__signout svg { flex-shrink: 0; }

/* Header inside popover — cleaner Hi, + email spacing */
.account-popover__panel .account-actions__header { padding: 16px 18px 12px !important; }
.account-popover__panel .account-actions__title {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-family: 'JetBrains Mono', monospace !important;
}
.account-popover__panel .account-actions__email {
  color: var(--v-fog, #c3c9d4) !important;
  font-size: 12px !important;
  font-family: 'JetBrains Mono', monospace !important;
  opacity: 0.8;
}
.account-popover__panel hr,
.account-popover__panel .divider {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

/* 8. /account/login + /account/register — dark theme override */
.v-auth-page {
  background: linear-gradient(180deg, #0d1223 0%, #05080f 100%) !important;
  min-height: 100vh;
  color: #e6e9f0;
}
.v-auth-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)) !important;
  border: 1px solid rgba(196, 165, 122, 0.2) !important;
  border-radius: 20px !important;
  color: #e6e9f0 !important;
}
.v-auth-card h1 { color: #ffffff !important; }
.v-auth-card label { color: var(--v-fog, #c3c9d4) !important; }
.v-auth-card input {
  background: rgba(0,0,0,0.25) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
}
.v-auth-card input:focus {
  border-color: rgba(196, 165, 122, 0.5) !important;
  outline: none !important;
}

/* 9. Customer dashboard (/pages/dashboard) — dark theme matching homepage */
.v-dashboard {
  background: linear-gradient(180deg, #0d1223 0%, #080c18 100%) !important;
  color: #e6e9f0 !important;
  min-height: 100vh;
}
body:has(.v-dashboard) { background: #0d1223; }
.v-dash-sidebar {
  background: linear-gradient(180deg, #141a2e 0%, #0d1223 100%) !important;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
  color: #e6e9f0 !important;
}
.v-dash-logo h2 { color: #ffffff !important; }
.v-dash-logo span { color: var(--v-fog, #c3c9d4) !important; }
.v-dash-nav-item {
  color: var(--v-fog, #c3c9d4) !important;
  border-radius: 10px !important;
  transition: background 160ms ease, color 160ms ease !important;
}
.v-dash-nav-item:hover {
  background: rgba(196, 165, 122, 0.10) !important;
  color: #ffffff !important;
}
.v-dash-nav-item.active {
  background: linear-gradient(135deg, rgba(196, 165, 122, 0.18), rgba(196, 165, 122, 0.06)) !important;
  color: #ffffff !important;
  border: 1px solid rgba(196, 165, 122, 0.35) !important;
}
.v-dash-user {
  background: rgba(255,255,255,0.03) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}
.v-dash-avatar {
  background: linear-gradient(135deg, #c4a57a, #8b6f44) !important;
  color: #0d1223 !important;
  font-weight: 700 !important;
}
.v-dash-user-info strong { color: #ffffff !important; }
.v-dash-user-info span { color: var(--v-fog, #c3c9d4) !important; }
.v-dash-logout { color: #ef4444 !important; }

.v-dash-main { background: transparent !important; }
.v-dash-header h1 { color: #ffffff !important; }
.v-dash-header p { color: var(--v-fog, #c3c9d4) !important; }

.v-stats-grid .v-stat-card,
.v-stat-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  color: #e6e9f0 !important;
}
.v-stat-label { color: var(--v-fog, #c3c9d4) !important; letter-spacing: 0.05em !important; }
.v-stat-value { color: #ffffff !important; }
.v-stat-card.v-stat-success .v-stat-value { color: #4ade80 !important; }
.v-stat-card.v-stat-primary .v-stat-value { color: #c4a57a !important; }
.v-stat-sub { color: var(--v-fog, #c3c9d4) !important; opacity: 0.7; }
.v-progress { background: rgba(255,255,255,0.08) !important; border-radius: 999px !important; }
.v-progress-fill { background: linear-gradient(90deg, #c4a57a, #e6c89a) !important; }

.v-section-title {
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.v-last-updated { color: var(--v-fog, #c3c9d4) !important; opacity: 0.7; }

.v-wf-card,
.v-workflow-grid .v-wf-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  color: #e6e9f0 !important;
  transition: border-color 180ms ease, transform 180ms ease !important;
}
.v-wf-card:hover {
  border-color: rgba(196, 165, 122, 0.35) !important;
  transform: translateY(-2px);
}
.v-wf-card h3, .v-wf-card strong { color: #ffffff !important; }
.v-wf-card p { color: var(--v-fog, #c3c9d4) !important; }
.v-wf-card a { color: #c4a57a !important; }
.v-wf-card a:hover { color: #e6c89a !important; }

.v-btn-outline {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #e6e9f0 !important;
  border-radius: 10px !important;
}
.v-btn-outline:hover {
  border-color: rgba(196, 165, 122, 0.4) !important;
  color: #ffffff !important;
}
.v-btn-outline.v-btn-danger { color: #ef4444 !important; border-color: rgba(239, 68, 68, 0.3) !important; }
.v-btn-outline.v-btn-go { color: #4ade80 !important; border-color: rgba(74, 222, 128, 0.3) !important; }

.v-table-wrap {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  overflow: hidden;
}
.v-table { background: transparent !important; color: #e6e9f0 !important; }
.v-table th { background: rgba(255,255,255,0.04) !important; color: var(--v-fog, #c3c9d4) !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; }
.v-table td { border-bottom: 1px solid rgba(255,255,255,0.05) !important; }
.v-table a { color: #c4a57a !important; }
.v-badge.v-badge-success { background: rgba(74, 222, 128, 0.15) !important; color: #4ade80 !important; border: 1px solid rgba(74, 222, 128, 0.3) !important; }
.v-badge.v-badge-pending { background: rgba(196, 165, 122, 0.15) !important; color: #c4a57a !important; border: 1px solid rgba(196, 165, 122, 0.3) !important; }

.v-loading-state { color: var(--v-fog, #c3c9d4) !important; opacity: 0.6; }

/* 10. Other dashboard surfaces (cards, modals, accordions, expanded workflow views) */
.v-card,
.v-section-cta,
.v-accordion,
.v-admin-panel,
.v-admin-panel > *,
.v-svc-detail {
  background: transparent !important;
  color: #e6e9f0 !important;
}
.v-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
}
.v-section-cta {
  background: linear-gradient(135deg, rgba(196, 165, 122, 0.10), rgba(255,255,255,0.02)) !important;
  border: 1px solid rgba(196, 165, 122, 0.25) !important;
  border-radius: 14px !important;
}
.v-accordion {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 12px !important;
}

/* Expanded workflow detail (clicking "View details" on a service card) */
.v-svc-detail {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  padding: 18px !important;
  color: #e6e9f0 !important;
}
.v-sub-wf,
.v-sub-wf-header,
.v-sub-wf-desc,
.v-sub-wf-meta,
.v-sub-wf-actions {
  background: transparent !important;
  color: #e6e9f0 !important;
}
.v-sub-wf {
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.v-sub-wf-header { color: #ffffff !important; }
.v-sub-wf-desc { color: var(--v-fog, #c3c9d4) !important; }
.v-sub-wf-meta { color: var(--v-fog, #c3c9d4) !important; opacity: 0.7; }
.v-sub-wf-sep { background: rgba(255,255,255,0.06) !important; }
.v-wf-header { color: #ffffff !important; }
.v-wf-desc { color: var(--v-fog, #c3c9d4) !important; }
.v-wf-meta { color: var(--v-fog, #c3c9d4) !important; }
.v-wf-view-details {
  color: #c4a57a !important;
  text-decoration: underline;
  text-decoration-color: rgba(196, 165, 122, 0.3);
}
.v-wf-view-details:hover { color: #e6c89a !important; }
.v-wf-count { color: var(--v-fog, #c3c9d4) !important; }
.v-wf-start, .v-wf-stop, .v-wf-stop-btn {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #e6e9f0 !important;
  border-radius: 8px !important;
}
.v-wf-start:hover { color: #4ade80 !important; border-color: rgba(74, 222, 128, 0.4) !important; }
.v-wf-stop:hover, .v-wf-stop-btn:hover { color: #ef4444 !important; border-color: rgba(239, 68, 68, 0.4) !important; }
.v-dot { background: var(--v-fog, #c3c9d4) !important; }
.v-process-dot { background: #c4a57a !important; }
.v-process-active { color: #4ade80 !important; }
.v-process-pending { color: #c4a57a !important; }
.v-badge.v-badge-inactive {
  background: rgba(255,255,255,0.06) !important;
  color: var(--v-fog, #c3c9d4) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}

/* Confirm modals (start-all, stop-all, etc) */
.v-confirm-modal,
.v-confirm-modal > * {
  background: linear-gradient(180deg, #141a2e, #0d1223) !important;
  color: #e6e9f0 !important;
  border: 1px solid rgba(196, 165, 122, 0.25) !important;
  border-radius: 16px !important;
}
.v-confirm-cancel {
  background: rgba(255,255,255,0.05) !important;
  color: #e6e9f0 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}

/* Customer admin panel — heading + description */
#adminPanel h1, #adminPanel h2, #adminTitle { color: #ffffff !important; }
#adminPanel p { color: var(--v-fog, #c3c9d4) !important; }

/* Anywhere leftover with color-scheme-1 default background inside dashboard */
.v-dashboard .color-scheme-1,
.v-dashboard [class*="color-scheme"] {
  background: transparent !important;
  color: #e6e9f0 !important;
}

/* 11. Blog listing + blog posts — dark theme (color-scheme-1 was leaking) */
.blog-posts,
.blog-posts-container,
.blog-post,
.blog-article,
main .color-scheme-1 {
  background: transparent !important;
  color: #e6e9f0 !important;
}
.blog-posts h1, .blog-posts h2, .blog-posts h3,
.blog-post h1, .blog-post h2, .blog-post h3,
.blog-article h1, .blog-article h2, .blog-article h3,
main h1, main h2, main h3 {
  color: #ffffff !important;
}
.blog-posts p, .blog-posts a,
.blog-post p, .blog-post a,
.blog-article p, .blog-article a,
.article__content p, .article__content a {
  color: var(--v-fog, #c3c9d4) !important;
}
.blog-posts a:hover,
.blog-post a:hover,
.blog-article a:hover,
.article__content a:hover { color: #ffffff !important; }

.article__body,
.article__content {
  color: #e6e9f0 !important;
}
.article__body h1, .article__body h2, .article__body h3,
.article__content h1, .article__content h2, .article__content h3 {
  color: #ffffff !important;
}
.article-card,
.blog-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  color: #e6e9f0 !important;
}
.article-card h2, .article-card h3, .blog-card h2, .blog-card h3 {
  color: #ffffff !important;
}

/* 12. 404 page — hide dummy product recommendations, fix heading */
.template-404 .color-scheme-1,
.not-found {
  background: transparent !important;
  color: #e6e9f0 !important;
}
.not-found h1, .template-404 h1, .not-found__title {
  color: #ffffff !important;
}
.not-found p, .template-404 p, .not-found__message {
  color: var(--v-fog, #c3c9d4) !important;
}
/* Kill the dummy t-shirt "Discover something new" carousel on 404 + anywhere it sneaks in */
.ui-test-product-list,
.shopify-section.ui-test-product-list,
.section-resource-list,
.resource-list--grid,
.section-resource-list__header,
.template-404 .collection-list,
.template-404 .product-recommendations,
.template-404 .resource-list,
.template-404 .featured-products,
body[class*="template--"][class*="-404"] .shopify-section.ui-test-product-list,
.not-found ~ .shopify-section,
.not-found-container ~ * {
  display: none !important;
}

/* 13. Overall safety — any remaining native Shopify .color-scheme-1 blocks on public pages should render in our dark palette */
body:not(.template-customers-account) .shopify-section .color-scheme-1 {
  background: transparent !important;
  color: #e6e9f0 !important;
}
body:not(.template-customers-account) .shopify-section .color-scheme-1 h1,
body:not(.template-customers-account) .shopify-section .color-scheme-1 h2,
body:not(.template-customers-account) .shopify-section .color-scheme-1 h3,
body:not(.template-customers-account) .shopify-section .color-scheme-1 h4 {
  color: #ffffff !important;
}

/* ===============================================================
   14. Site-wide subtle motion — set up by volteura-anim.js
   - Scroll-triggered fade-up on main sections
   - Pulse dots on hero "example flows" ready labels
   =============================================================== */
.v2-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 720ms cubic-bezier(0.22, 0.7, 0.28, 1),
    transform 720ms cubic-bezier(0.22, 0.7, 0.28, 1);
  will-change: opacity, transform;
}
.v2-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .v2-reveal { opacity: 1; transform: none; transition: none; }
}

/* Pulse dot on each "ready" meta — sells "live" feel in hero example flows */
.v2-flow-meta.ok {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--v-ok, #4ade80);
}
.v2-flow-meta.ok::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--v-ok, #4ade80);
  box-shadow: 0 0 6px var(--v-ok, #4ade80);
  animation: v2pulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
/* Stagger each row so pulses don't all fire at once */
.v2-product .v2-flow-row:nth-child(1) .v2-flow-meta.ok::before { animation-delay: 0s; }
.v2-product .v2-flow-row:nth-child(2) .v2-flow-meta.ok::before { animation-delay: 0.3s; }
.v2-product .v2-flow-row:nth-child(3) .v2-flow-meta.ok::before { animation-delay: 0.6s; }
.v2-product .v2-flow-row:nth-child(4) .v2-flow-meta.ok::before { animation-delay: 0.9s; }
.v2-product .v2-flow-row:nth-child(5) .v2-flow-meta.ok::before { animation-delay: 1.2s; }
.v2-product .v2-flow-row:nth-child(6) .v2-flow-meta.ok::before { animation-delay: 1.5s; }
.v2-product .v2-flow-row:nth-child(7) .v2-flow-meta.ok::before { animation-delay: 1.8s; }

/* ===============================================================
   14b. Section spacing — trim dead vertical space between sections
   =============================================================== */
.v2-hero {
  min-height: auto;
  padding-top: 120px;
  padding-bottom: 56px;
}
.v2-pain,
.v2-steps,
.v2-flows,
.v2-edge,
.v2-proof,
.v2-pricing,
.v2-faq,
.v2-final {
  padding-top: 68px;
  padding-bottom: 68px;
}
/* Proof marquee sits tight against the sections either side */
.v2-proof { padding-top: 48px; padding-bottom: 48px; }
/* Section eyebrows sit closer to the section top */
.v2-steps .v2-eyebrow,
.v2-flows .v2-eyebrow,
.v2-edge .v2-eyebrow,
.v2-pricing .v2-eyebrow,
.v2-faq .v2-eyebrow,
.v2-final .v2-eyebrow { margin-bottom: 18px; }

/* ===============================================================
   15. Mobile / phone fixes — site-wide
   =============================================================== */

/* Prevent horizontal scroll anywhere */
html, body { overflow-x: hidden; max-width: 100vw; }

/* Marquee rows must always respect viewport width */
.v2-proof-wrap { max-width: 100vw; padding-inline: 0; }
.v2-marquee { max-width: 100vw; }

@media (max-width: 900px) {
  /* Hero — a touch smaller so headline doesn't wrap awkwardly */
  .v2-hero { padding-top: 80px; padding-block-end: 40px; }
  .v2-hero h1 { font-size: 38px; line-height: 1.05; }
  .v2-hero p.v2-sub, .v2-sub { font-size: 15px; line-height: 1.55; }
  /* CTAs full width on mobile */
  .v2-btn { padding: 12px 18px; font-size: 13px; }

  /* Pain cells slightly tighter */
  .v2-pain-grid { gap: 14px; }
  .v2-pain-cell { padding: 16px; }

  /* Steps + flow cards — tighter padding */
  .v2-step, .v2-flow-card { padding: 18px; }

  /* Edge section mobile — full rebuild (was broken: number column hogged space, headline wrapped one-word-per-line) */
  .v2-edge { padding: 44px 14px !important; }
  .v2-edge-wrap { padding: 28px 16px !important; border-radius: 16px !important; }
  .v2-edge .v2-title { font-size: 32px !important; line-height: 1.05 !important; letter-spacing: -0.02em !important; }
  .v2-edge > .v2-edge-wrap > p,
  .v2-edge-wrap > p[style] { font-size: 15px !important; line-height: 1.55 !important; margin-bottom: 16px !important; }
  .v2-edge-grid { gap: 8px !important; margin-top: 24px !important; grid-template-columns: 1fr !important; }
  /* Stack row: number sits above heading (not beside), headings + body go full-width */
  .v2-edge-row { display: grid !important; grid-template-columns: 1fr !important; gap: 6px !important; padding: 18px 0 !important; }
  .v2-edge-num { padding-top: 0 !important; font-size: 12px !important; }
  .v2-edge-heading { font-size: 19px !important; line-height: 1.2 !important; margin-bottom: 6px !important; }
  .v2-edge-body { font-size: 14px !important; line-height: 1.55 !important; }

  /* Pricing tiers breathe */
  .v2-tier { padding: 20px; }
  .v2-tier-price { font-size: 32px; }

  /* FAQ items — smaller summary font so it doesn't wrap weird */
  .v2-faq-item summary { font-size: 15px; padding: 14px 16px; }

  /* Footer — 2 cols on tablet-phone instead of 4 */
  .v2-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 24px; }
  .v2-footer-bottom { flex-direction: column; gap: 8px; align-items: flex-start; font-size: 11px; }

  /* Dashboard — sidebar collapses to top bar on mobile */
  .v-dashboard { grid-template-columns: 1fr !important; display: flex; flex-direction: column; }
  .v-dash-sidebar { width: 100%; height: auto; position: relative; flex-direction: row; overflow-x: auto; padding: 12px; gap: 10px; }
  .v-dash-sidebar .v-dash-logo, .v-dash-sidebar .v-dash-user, .v-dash-sidebar .v-dash-logout { flex-shrink: 0; }
  .v-dash-nav { display: flex; flex-direction: row; gap: 6px; flex-wrap: nowrap; overflow-x: auto; }
  .v-dash-nav-item { padding: 8px 12px; font-size: 12px; white-space: nowrap; }
  .v-dash-main { padding: 20px 16px; }
  .v-stats-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .v-stat-card { padding: 14px; }
  .v-stat-value { font-size: 24px; }
  .v-workflow-grid { grid-template-columns: 1fr !important; }
  .v-wf-card { padding: 18px; }

  /* Popover — narrower on phones */
  .account-popover__panel { width: calc(100vw - 24px) !important; max-width: 340px !important; }

  /* Brand chips — allow wrap in dense mobile marquee */
  .v2-brand { padding: 11px 16px; font-size: 12px; }
  .v2-brand img { width: 16px; height: 16px; }

  /* Volt widget — smaller FAB, shifted slightly up */
  .v-chat-fab { bottom: 1rem; right: 1rem; padding: 0 14px 0 10px; font-size: 12px; height: 40px; }
  .v-chat-panel { width: 100vw !important; height: 75vh !important; border-radius: 16px 16px 0 0 !important; bottom: 0 !important; right: 0 !important; }

  /* Header — give nav room, profile button positioned right */
  .header__inline-links { gap: 14px; }
  .header { padding-inline: 16px; }
}

/* Extra tight for sub-420 phones */
@media (max-width: 420px) {
  .v2-hero h1 { font-size: 32px; }
  .v2-title { font-size: 28px; }
  .v2-final-title { font-size: 32px; }
  .v2-pain-grid { grid-template-columns: 1fr !important; }
  .v2-footer-grid { grid-template-columns: 1fr !important; gap: 18px; }
  .v-stats-grid { grid-template-columns: 1fr !important; }
  .v-dash-main { padding: 16px 12px; }
}

/* 4-col steps grid on wide desktop, 2-col on tablet */
.v2-steps-grid.v2-steps-grid-4 { grid-template-columns: repeat(4, 1fr) !important; gap: 16px; }
.v2-steps-grid.v2-steps-grid-4 .v2-step { padding: 28px 22px; }
.v2-steps-grid.v2-steps-grid-4 .v2-step-num { font-size: 52px; margin-bottom: 14px; }
.v2-steps-grid.v2-steps-grid-4 .v2-step-title { font-size: 22px; }
.v2-steps-grid.v2-steps-grid-4 .v2-step-body { font-size: 14px; line-height: 1.55; }
@media (max-width: 1100px) { .v2-steps-grid.v2-steps-grid-4 { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 640px) { .v2-steps-grid.v2-steps-grid-4 { grid-template-columns: 1fr !important; } }


/* ===============================================================
   Blog listing page — dark/brass theme matching v2-* (2026-04-19)
   Overrides Horizon default blog layout (.blog-posts-list container)
   =============================================================== */

/* Ensure required fonts are loaded on every page (not just home) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,500;0,600;1,400;1,500&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* Page wrapper — pulled-in max-width, generous padding to match other sections */
.blog-posts-list {
  padding: 72px 24px 96px !important;
  max-width: 1260px;
  margin: 0 auto !important;
}

/* Background — let the global v-ink show through */
.blog-posts-list .section-background,
.blog-posts-list .section-background.color-scheme-1 {
  background: transparent !important;
}

/* H1 blog title — Fraunces serif, linen, brass italic accent on last word */
/* max-specificity with html body chain — Horizon theme default hits with its own !important so we need to outrank it */
html body .blog-posts-list [class*="__title"] h1,
html body .blog-posts-list h1,
html body .shopify-section .text-block h1 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: clamp(40px, 5.5vw, 68px) !important;
  font-weight: 400 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
  color: var(--v-linen, #e6e9f0) !important;
  margin: 0 0 20px !important;
  max-width: 900px;
}
/* Eyebrow above H1 — matches "HOW IT WORKS" / "THE REAL MONDAY" elsewhere */
.blog-posts-list [class*="__title"]::before,
.blog-posts-list > div > div > [class*="__title"]::before {
  content: '— the journal';
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v-cobalt, #5b8dff);
  margin-bottom: 20px;
  line-height: 1;
}

/* Grid — consistent 3 col desktop, 2 tablet, 1 mobile (was uneven in default Horizon) */
.blog-posts-container {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  margin-top: 48px !important;
}
@media (max-width: 1100px) {
  .blog-posts-container { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
}
@media (max-width: 640px) {
  .blog-posts-container { grid-template-columns: 1fr !important; gap: 14px !important; }
}

/* Blog post item wrapper — shopify injects grid-column: span N per item (featured-first pattern). Neutralise it. */
.blog-posts-container > .blog-post-item,
.blog-post-item {
  display: flex !important;
  height: 100%;
  grid-column: auto !important;
  grid-row: auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}
.blog-post-item > .shopify-block,
.blog-post-item > .shopify-block > .blog-post-card {
  width: 100% !important;
  height: 100%;
  min-width: 0;
}

/* Post card — dark gradient surface, brass hair top, hover lift */
.blog-post-card {
  background: linear-gradient(160deg, var(--v-surface, #141a2e) 0%, var(--v-surface-2, #0d1223) 100%) !important;
  border: 1px solid var(--v-hair, rgba(255, 255, 255, 0.06)) !important;
  border-radius: 18px !important;
  padding: 30px 26px !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.blog-post-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196, 165, 122, 0.45), transparent);
  pointer-events: none;
}
.blog-post-card:hover {
  transform: translateY(-4px);
  border-color: rgba(196, 165, 122, 0.30) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(196, 165, 122, 0.10) inset !important;
}

/* Content column inside card */
.blog-post-card__content {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  gap: 0 !important;
}

/* Title — Fraunces serif, linen, hover brass */
.blog-post-card__content a:not(.blog-post-card__content-text *) {
  text-decoration: none !important;
  color: inherit !important;
}
.blog-post-card__content [class*="__heading"],
.blog-post-card__content h2,
.blog-post-card__content h3,
.blog-post-card__content h4 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  color: var(--v-linen, #e6e9f0) !important;
  margin: 0 0 14px !important;
  transition: color 0.2s ease;
}
.blog-post-card:hover [class*="__heading"],
.blog-post-card:hover h2,
.blog-post-card:hover h3 {
  color: var(--v-brass, #c4a57a) !important;
}

/* Date — mono, cobalt, tiny uppercase */
.blog-post-details,
.blog-post-details *,
.blog-post-card time {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--v-cobalt, #5b8dff) !important;
}
.blog-post-details { margin: 0 0 16px !important; }

/* Excerpt */
.blog-post-card__content-text,
.blog-post-card__content-text p,
.blog-post-card__content-text * {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.58 !important;
  color: var(--v-fog, #c3c9d4) !important;
  margin: 0 0 18px !important;
  flex-grow: 1;
}

/* "Read more..." link — brass mono uppercase with arrow */
.blog-post-card__content > a:last-child,
.blog-post-card__content a[href*="/blogs/"][href*="/"]:last-of-type {
  margin-top: auto !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--v-brass, #c4a57a) !important;
  text-decoration: none !important;
  align-self: flex-start;
  transition: letter-spacing 0.2s ease, color 0.2s ease;
}
.blog-post-card__content > a:last-child::after {
  content: ' \2192';
  display: inline-block;
  transition: transform 0.2s ease;
}
.blog-post-card:hover .blog-post-card__content > a:last-child {
  color: #e6c89b !important;
  letter-spacing: 0.12em !important;
}
.blog-post-card:hover .blog-post-card__content > a:last-child::after {
  transform: translateX(4px);
}

/* Hide Shopify's ellipsis dots after "Read more" if present */
.blog-post-card__content > a:last-child {
  white-space: nowrap;
}

/* ===============================================================
   Hero 60-day guarantee callout (promoted from trust-pill footnote 2026-04-19)
   =============================================================== */

/* === Hero 60-day guarantee callout — moved here for dedicated section === */
.v2-guarantee {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 22px 0 34px;
  padding: 16px 20px;
  background: linear-gradient(180deg, rgba(196, 165, 122, 0.09), rgba(196, 165, 122, 0.04));
  border: 1px solid rgba(196, 165, 122, 0.25);
  border-left: 3px solid var(--v-brass, #c4a57a);
  border-radius: 12px;
  max-width: 560px;
}
.v2-guarantee-icon {
  color: var(--v-brass, #c4a57a);
  font-size: 22px;
  line-height: 1.1;
  flex-shrink: 0;
  margin-top: 1px;
}
.v2-guarantee-headline {
  display: block;
  color: var(--v-linen, #e6e9f0);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.v2-guarantee-sub {
  display: block;
  margin-top: 6px;
  color: var(--v-fog, #c3c9d4);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.v2-hero-grid,
.v2-hero-grid > *,
.v2-guarantee,
.v2-guarantee > div,
.v2-guarantee-headline,
.v2-guarantee-sub,
.v2-product,
.v2-product-head,
.v2-flow-row,
.v2-flow-label {
  min-width: 0;
}
.v2-guarantee,
.v2-product {
  box-sizing: border-box;
  max-width: 100%;
}
.v2-guarantee-headline,
.v2-guarantee-sub,
.v2-flow-label {
  overflow-wrap: anywhere;
}
@media (max-width: 750px) {
  .v2-hero {
    overflow-x: hidden;
  }
  .v2-hero-grid,
  .v2-hero-grid > * {
    min-width: 0;
    max-width: 100%;
  }
  .v2-hero-grid {
    width: calc(100vw - 48px);
  }
  .v2-guarantee {
    width: calc(100vw - 48px) !important;
    max-width: calc(100vw - 48px) !important;
    min-width: 0;
    box-sizing: border-box;
    padding: 14px 16px;
    margin: 18px 0 26px;
    gap: 10px;
  }
  .v2-guarantee > div,
  .v2-product-head,
  .v2-flow-row,
  .v2-flow-label {
    min-width: 0;
  }
  .v2-product {
    width: calc(100vw - 48px) !important;
    max-width: calc(100vw - 48px) !important;
    min-width: 0;
    box-sizing: border-box;
    padding: 22px;
  }
  .v2-hero-actions {
    width: calc(100vw - 48px);
    max-width: calc(100vw - 48px);
    flex-direction: column;
    align-items: stretch;
  }
  .v2-hero-actions .v2-btn {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }
  .v2-hero .v2-trust {
    width: calc(100vw - 48px);
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .v2-product-live,
  .v2-flow-meta {
    font-size: 0;
  }
  .v2-product-live::before,
  .v2-flow-meta.ok::before {
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--v-ok, #6ee787);
    box-shadow: 0 0 8px var(--v-ok, #6ee787);
  }
  .v2-flow-label {
    overflow-wrap: anywhere;
  }
  .v2-flow-meta {
    flex-shrink: 0;
  }
  .v2-guarantee-icon { font-size: 18px; }
  .v2-guarantee-headline { font-size: 16px; }
  .v2-guarantee-sub { font-size: 12px; }
}

@media (max-width: 420px) {
  .v2-guarantee,
  .v2-product,
  .v2-hero-actions,
  .v2-hero .v2-trust {
    width: calc(100vw - 72px) !important;
    max-width: calc(100vw - 72px) !important;
  }
}