/* ============================
   GLOBAL STYLES — style.css
   Organized variables, utilities,
   section system, responsive rules
   ============================ */

/* ---------- VARIABLES ---------- */
:root{ 
  /* Colors */
  --primary-color: #00C7A9;   /* Primary Color */
  --secondary-color: #00FFD7; /* Secondary Color */
  --white: #FFFFFF;

  /* Green palette shades (dark to light) for tags, badges */
  --green-1: #0a1f1a;
  --green-2: #0d2b26;
  --green-3: #0f3d38;
  --green-4: #007269;
  --green-5: #0d9488;
  --green-6: #14b8a6;
  --green-7: #5eead4;
  --green-8: #99f6e4;
  --green-9: #ccfbf1;
  --text-dark: #001B1B;
  --text-medium: #3B5450;
  --text-light: #FFFFFF;
  --off-white: #F8FFF2;
  --primary-dark: #001B1B;

  /* Accent colors */
  --accent-yellow: #FFEA00;
  --accent-yellow-dark: #736900;
  --accent-purple: #5100B8;
  --accent-purple-dark: #330073;
  --accent-indigo: #5E7EFF;
  --accent-indigo-dark: #445BB8;
  --accent-navy: #2A3973;

  /* Typography - Font Families */
  --font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --font-display: 'Poppins', var(--font-sans);
  --font-serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-handwritten: 'Caveat', 'Brush Script MT', cursive;
  
  /* Typography - Font Sizes (Desktop)
     Edit these to change desktop sizes */
  --font-size-hero: 44px;      /* Hero titles */
  --font-size-h1: 44px;        /* Page titles */
  --font-size-h2: 36px;        /* Section titles */
  --font-size-h3: 28px;        /* Subsection titles */
  --font-size-h4: 22px;        /* Card titles */
  --font-size-body: 17px;      /* Body text */
  --font-size-small: 14px;     /* Small text */

  /* Display type scale (large impact type, Apple-style) */
  --display-1: 72px;
  --display-2: 56px;
  --display-3: 44px;
  --display-4: 36px;

  /* Sizes & breakpoints */
  --max-width: 1200px;
  --container-padding: 20px;
  
  /* Breakpoint System (for reference - use actual px values in media queries)
     --bp-xs:  480px   Small phones
     --bp-sm:  640px   Large phones
     --bp-md:  880px   Tablets / primary breakpoint
     --bp-lg:  1024px  Small laptops
     --bp-xl:  1280px  Desktops
     --bp-2xl: 1536px  Large monitors
  */
  --breakpoint-xs: 480px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 880px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  
  /* Section heights */
  --section-height-mobile: 100vh;  /* Full viewport on mobile */
  --section-height-desktop: auto;  /* Natural height on desktop */
  
  /* Header heights - used for hero section padding */
  --header-height: 68px;
  
  /* Hero-copy container width (used by product, thrifters, resellers) */
  --hero-copy-width: 752px;
  --hero-copy-padding: 28px 40px 48px 40px;

  /* Elevation */
  --card-shadow: 0 10px 30px rgba(34,40,52,0.06);
}

/* Large Desktop Scale (1536px+)
   Slightly larger text for big monitors */
@media (min-width: 1536px) {
  :root {
    --font-size-hero: 44px;      /* 117% of base desktop */
    --font-size-h1: 44px;        /* 114% of base desktop */
    --font-size-h2: 40px;        /* 111% of base desktop */
    --display-1: 72px;
    --display-2: 56px;
    --display-3: 44px;
    --display-4: 36px;
  }
}

/* Tablet Typography Scale (881px - 1024px)
   Intermediate sizing for small laptops/tablets */
@media (min-width: 881px) and (max-width: 1024px) {
  :root {
    --font-size-hero: 42px;      /* 88% of desktop */
    --font-size-h1: 38px;        /* 86% of desktop */
    --font-size-h2: 32px;        /* 89% of desktop */
    --font-size-h3: 26px;        /* 93% of desktop */
    --display-1: 64px;           /* 89% of desktop */
    --display-2: 50px;           /* 89% of desktop */
    --display-3: 40px;           /* 91% of desktop */
    --display-4: 32px;           /* 89% of desktop */
    
    /* Slightly reduced hero-copy width for tablets */
    --hero-copy-width: 680px;
  }
}

/* Mobile Typography Scale
   Edit these values to control how much smaller text gets on mobile.
   Currently ~75-80% of desktop sizes for headings. */
@media (max-width: 880px) {
  :root {
    --header-height: 64px;

    /* Mobile font sizes - adjust these to scale all mobile text */
    --font-size-hero: 36px;      /* 75% of desktop */
    --font-size-h1: 32px;        /* 73% of desktop */
    --font-size-h2: 28px;        /* 78% of desktop */
    --font-size-h3: 22px;        /* 79% of desktop */
    --font-size-h4: 18px;        /* 82% of desktop */
    --font-size-body: 17px;      /* Same as desktop (best practice) */
    --font-size-small: 14px;     /* Same as desktop */
    --display-1: 54px;           /* 75% of desktop */
    --display-2: 42px;           /* 75% of desktop */
    --display-3: 34px;           /* 77% of desktop */
    --display-4: 28px;           /* 78% of desktop */
    
    /* Mobile hero-copy sizing */
    --hero-copy-width: 92%;
    --hero-copy-padding: 24px 24px 40px 24px;
  }
}

/* Small Phone Scale (480px and below)
   Further reduced for very small screens */
@media (max-width: 480px) {
  :root {
    --font-size-hero: 30px;      /* 63% of desktop */
    --font-size-h1: 28px;        /* 64% of desktop */
    --font-size-h2: 24px;        /* 67% of desktop */
    --font-size-h3: 20px;        /* 71% of desktop */
    --font-size-h4: 16px;        /* 73% of desktop */
    --display-1: 44px;           /* 61% of desktop */
    --display-2: 34px;           /* 61% of desktop */
    --display-3: 28px;           /* 64% of desktop */
    --display-4: 22px;           /* 61% of desktop */
    
    /* Extra small padding for small phones */
    --container-padding: 16px;
    --hero-copy-padding: 20px 16px 32px 16px;
  }
}

/* ---------- GLASS EFFECT (reusable) ---------- */
.glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Glass variant: Light (for dark backgrounds) */
.glass--light {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Glass variant: Tinted (cyan tint) */
.glass--cyan {
  background: rgba(139, 221, 208, 0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(139, 221, 208, 0.3);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* ---------- MOBILE BROWSER OVERRIDES ---------- */
/* Reset default mobile browser styling that can affect layout */
@media (max-width: 880px) {
  /* Disable tap highlight on touch devices */
  * {
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Remove default button/input styling on iOS/Android */
  button,
  input,
  select,
  textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
  }
  
  /* Prevent font size adjustment on orientation change */
  html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  
  /* Ensure consistent box-sizing */
  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
  }
  
  /* Reset default touch behavior for better click handling */
  a,
  button,
  .btn,
  .nav-link,
  .dropdown-chevron,
  .nav-toggle {
    touch-action: manipulation;
  }
  
  /* Prevent text selection on interactive elements */
  .btn,
  .nav-toggle,
  .dropdown-chevron {
    -webkit-user-select: none;
    user-select: none;
  }
  
  /* Force consistent padding/margin on common elements */
  .dropdown-menu,
  .dropdown-item,
  .dropdown-grid {
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }
  
  /* Override any inherited line-height issues */
  .dropdown-chevron,
  .icon-plus,
  .icon-minus {
    line-height: 1 !important;
  }
}

/* ===========================================
   RESPONSIVE IMAGE SCALING SYSTEM
   
   Apply .img-scale to any image for automatic 
   mobile-friendly sizing.
   
   Desktop: Image uses its natural or specified size
   Mobile: Image scales appropriately to fit viewport
   
   Usage:
     <img class="img-scale" src="..." alt="...">
     <img class="img-scale img-scale--contain" src="..." alt="...">
   
   Modifiers:
     .img-scale--contain  - Fit within container, preserve aspect
     .img-scale--cover    - Cover container, may crop
     .img-scale--center   - Center the image
   =========================================== */

/* Base responsive image class */
.img-scale {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Modifiers - work on both desktop and mobile */
.img-scale--contain {
  object-fit: contain;
}

.img-scale--cover {
  object-fit: cover;
}

.img-scale--center {
  margin-left: auto;
  margin-right: auto;
}

/* Mobile override - ensures proper scaling on phones */
@media (max-width: 880px) {
  .img-scale {
    max-width: 100% !important;
    width: auto;
    height: auto !important;
    object-fit: contain;
  }
  
  /* Full-width variant for mobile - image fills container */
  .img-scale--full-mobile {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Constrained width variants for mobile */
  .img-scale--sm-mobile {
    max-width: 50% !important;
  }
  
  .img-scale--md-mobile {
    max-width: 75% !important;
  }
  
  /* Fixed max-width for consistent sizing */
  .img-scale--fixed-mobile {
    max-width: 280px !important;
    width: 100% !important;
  }
}

/* ===========================================
   REUSABLE IMAGE CAROUSEL
   
   A simple fade-in/fade-out carousel for any set of images.
   Images stack and crossfade automatically via JS.
   
   Usage:
     <div class="img-carousel" data-carousel>
       <img src="image1.png" alt="..." class="active">
       <img src="image2.png" alt="...">
       <img src="image3.png" alt="...">
     </div>
   
   Options (data attributes on container):
     data-duration="3000"  - Time each image displays (ms), default 3000
     data-transition="800" - Crossfade duration (ms), default 800
   =========================================== */

.img-carousel {
  position: relative;
  width: 100%;
  max-width: 280px; /* Match how-img default */
  overflow: hidden;
}

.img-carousel img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  opacity: 0;
  z-index: 1;
  transition: opacity 0.8s ease;
}

.img-carousel img.active {
  opacity: 1;
  z-index: 2;
}

/* First image sets container height (position: relative) and establishes aspect */
.img-carousel img:first-child {
  position: relative;
  height: auto;
  object-fit: contain;
}

/* Mobile: slightly smaller */
@media (max-width: 880px) {
  .img-carousel {
    max-width: 224px;
  }
}

/* ===========================================
   SCROLL SNAP SYSTEM
   
   Native CSS scroll snapping for smooth section navigation.
   Apply to a container and its children for snap behavior.
   
   Usage:
     <div class="snap-container">
       <section class="snap-section">...</section>
       <section class="snap-section">...</section>
     </div>
   
   Modifiers:
     .snap-container--mobile-only  - Only snap on mobile
     .snap-section--start          - Snap to top of section
     .snap-section--center         - Snap to center of section (default)
   =========================================== */

/* Snap container - wraps sections that should snap */
.snap-container {
  scroll-snap-type: y proximity;
  overflow-y: auto;
  height: auto;
  overscroll-behavior-y: contain; /* Prevents scroll chaining */
}

/* Individual snap sections */
.snap-section {
  scroll-snap-align: start;
  box-sizing: border-box;
}

/* Center alignment variant */
.snap-section--center {
  scroll-snap-align: center;
}

/* Mobile-only snap container - disabled on desktop */
.snap-container--mobile-only {
  scroll-snap-type: none;
}

.snap-container--mobile-only .snap-section {
  scroll-snap-align: none;
}

@media (max-width: 880px) {
  /* Enable snapping only on mobile */
  .snap-container--mobile-only {
    scroll-snap-type: y proximity;
    scroll-padding-top: 0;
  }
  
  .snap-container--mobile-only .snap-section {
    scroll-snap-align: start;
    scroll-snap-stop: normal; /* Allows momentum scrolling past sections */
  }

  /* Only enforce full-viewport snap section height on mobile */
  .snap-section{
    min-height: 100vh;
  }
}

/* ---------- COLOR-SHIFT BACKGROUND ---------- */
/* Reusable gradient background with radial center cutout */
.color-shift-bg {
  position: relative;
}

.color-shift-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  opacity: 0.75;
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 0%, transparent 20%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,1) 100%);
  mask-image: radial-gradient(ellipse at center, transparent 0%, transparent 20%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,1) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Fixed background for mobile - sits behind everything */
.mobile-fixed-bg {
  display: none; /* Hidden on desktop */
}

@media (max-width: 880px) {
  .mobile-fixed-bg {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    opacity: 0.65;
    -webkit-mask-image: radial-gradient(ellipse at center, transparent 0%, transparent 15%, rgba(0,0,0,0.4) 45%, rgba(0,0,0,1) 100%);
    mask-image: radial-gradient(ellipse at center, transparent 0%, transparent 15%, rgba(0,0,0,0.4) 45%, rgba(0,0,0,1) 100%);
    pointer-events: none;
    z-index: -9999; /* Extremely low to ensure it's behind everything */
  }
}

/* ---------- BASE ---------- */
*{box-sizing:border-box}
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html,body{height:100%}
html{
  scroll-behavior: smooth; /* Smooth scrolling for the whole page */
}
body{
  margin:0;
  font-family: var(--font-sans);
  color:var(--text-dark);
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  font-size: var(--font-size-body);
  overflow-x: hidden;
  max-width: 100vw; /* Prevent body from exceeding viewport width */
  position: relative; /* Establish positioning context */
}

/* Prevent horizontal scrolling on mobile */
@media (max-width: 880px) {
  html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    position: relative !important;
  }
  
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    position: relative !important;
  }
  
  /* Ensure main content containers respect viewport width */
  main {
    max-width: 100vw !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }
  
  section {
    max-width: 100vw !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }
}

/* ---------- CONTAINERS ---------- */
.container{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  padding: 0 var(--container-padding);
}

/* ---------- HEADER ---------- */
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100vw; /* Ensure header never exceeds viewport width */
  z-index: 9999; /* Very high z-index to ensure header and dropdowns appear above everything */
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(34,40,52,0.04);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  overflow: visible !important; /* Allow dropdowns to show below header */
}

/* Mobile: Ensure header stays within viewport */
@media (max-width: 880px) {
  .site-header {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    overflow: visible !important;
  }
  
  .header-inner {
    max-width: 100vw !important;
    width: 100% !important;
    overflow: visible !important;
    position: relative;
    z-index: 9999; /* Match header z-index */
    pointer-events: auto; /* Ensure header is interactive */
  }
  
  .container {
    max-width: 100vw !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  height: var(--header-height);
  position: relative;
  z-index: 61; /* Above header background but below nav items */
}

/* logo */
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--text-dark);
}

/* nav */
.main-nav ul{
  display:flex;
  gap:32px;
  list-style:none;
  margin:0;
  padding-left:0; /* Padding handled by .main-nav on desktop */
}
  .main-nav a{
    text-decoration: none;
    color: var(--text-dark) !important;
    font-weight: 600;
    opacity: 0.92;
  }
  .main-nav a:hover,
  .main-nav a:focus{
    color: var(--text-dark) !important;
    opacity: 1;
  }
/* Desktop default: inline nav shown */
.main-nav{ 
  display: block; 
  position: relative;
  z-index: 10000; /* Ensure nav appears above everything */
}
.main-nav.open{
  display: block;
  z-index: 10000;
}

/* ---------- DROPDOWN MENUS ---------- */
.nav-item-dropdown{
  position: relative; /* Essential for absolute positioning of dropdown */
  z-index: 10000; /* Ensure dropdowns appear above everything */
}


/* Dropdown menu container */
.dropdown-menu{
  position: absolute !important;
  top: 100%; /* Position at bottom of nav item */
  left: 0 !important;
  right: auto !important;
  /* Slide-down animation: start hidden above and slide down */
  transform: translateY(-10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  margin-top: 0;
  background: rgba(255,255,255,0.95); /* Match header transparency */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 12px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
  padding: 16px;
  min-width: 480px;
  max-width: 540px;
  /* Slide-down transition */
  transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
  z-index: 10000 !important; /* Above header */
  display: block !important;
  box-sizing: border-box;
}

/* On desktop, position dropdown to touch bottom of header bar */
@media (min-width: 881px) {
  .nav-item-dropdown {
    display: flex;
    align-items: center; /* Keep text centered */
    height: var(--header-height); /* Extend to full header height */
  }
  /* Get in Contact: only in mobile hamburger menu, not on desktop (Contact CTA button is used there) */
  .nav-item-simple {
    display: none !important;
  }
  
  .nav-item-dropdown .dropdown-menu {
    top: 100% !important; /* Position at bottom of nav-item-dropdown */
    margin-top: 0 !important;
    position: absolute !important; /* Maintain absolute positioning */
    left: 0 !important;
    right: auto !important;
  }
}


.dropdown-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns for horizontal layout */
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

/* Solutions dropdown has 5 items — last one spans the full row */
.solutions-dropdown .dropdown-grid > .dropdown-item:nth-child(5):last-child{
  grid-column: 1 / -1;
}

/* Create invisible bridge between link and dropdown to prevent gap */
.nav-item-dropdown::before{
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  width: 100%;
  min-width: 200px;
  height: 8px; /* Larger bridge for better hover transition - prevents gap */
  background: transparent;
  z-index: 99;
  pointer-events: auto; /* Allow mouse to stay in hover area */
}

@media (min-width: 881px) {
  /* On desktop, make bridge always active to ensure smooth hover */
  .nav-item-dropdown::before {
  opacity: 1;
  visibility: visible;
}

  /* PRIMARY: Show dropdown on hover with slide-down animation */
  .nav-item-dropdown:hover > .dropdown-menu,
.nav-item-dropdown:hover .dropdown-menu,
.nav-item-dropdown:focus-within .dropdown-menu,
.nav-item-dropdown.dropdown-open .dropdown-menu,
  .dropdown-menu:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important; /* Slide down to final position */
    left: 0 !important;
    right: auto !important;
    display: block !important;
  }
  
  /* Ensure the entire nav item area triggers hover */
  .nav-item-dropdown:hover,
  .nav-item-dropdown:focus-within,
  .nav-item-dropdown.dropdown-open {
    z-index: 10001 !important; /* Higher z-index when hovering */
  }
  
  /* Ensure nav-link-wrapper also triggers hover */
  .nav-item-dropdown:hover .nav-link-wrapper,
  .nav-item-dropdown .nav-link-wrapper:hover {
    z-index: 10002 !important;
    position: relative;
  }
  
  /* Ensure hovering over nav-link-text also triggers dropdown */
  .nav-item-dropdown .nav-link-wrapper:hover ~ .dropdown-menu,
  .nav-item-dropdown .nav-link-text:hover ~ .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important; /* Slide down */
    left: 0 !important;
    right: auto !important;
    display: block !important;
  }
}

/* Consolidated dropdown hover states - universal support */
.nav-item-dropdown:hover .dropdown-menu,
.nav-item-dropdown:focus-within .dropdown-menu,
.nav-item-dropdown.dropdown-open .dropdown-menu,
.dropdown-menu:hover {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
  left: 0 !important;
  right: auto !important;
  display: block !important;
  z-index: 10001 !important;
}

/* Disable hover effects on page load until user moves mouse */
/* This prevents dropdown from appearing when navigating to a new page with cursor over menu */
body.dropdown-hover-disabled .nav-item-dropdown:hover > .dropdown-menu,
body.dropdown-hover-disabled .nav-item-dropdown:hover .dropdown-menu,
body.dropdown-hover-disabled .dropdown-menu:hover {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Nav link wrapper for mobile - contains text link and chevron button */
.nav-link-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-link-text {
  text-decoration: none;
  color: var(--text-dark) !important;
  /* Explicit size: chrome shouldn't scale with --font-size-body (20px), or the
     header grows with the reading size. Matches the pre-20px-body appearance. */
  font-size: 16px;
  font-weight: 600;
  opacity: 0.92;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav-link-text:hover,
.nav-link-text:focus {
  color: var(--text-dark) !important;
  opacity: 1;
}

/* Desktop dropdown indicator - chevron arrow */
@media (min-width: 881px) {
  .nav-item-dropdown .nav-link-text::after {
    content: '▼';
    font-size: 10px;
    margin-left: 8px; /* Space between text and arrow */
    color: var(--text-dark);
    opacity: 0.46;
    transition: transform 0.2s ease, opacity 0.2s ease;
    line-height: 1;
    display: inline-block;
  }
  
  .nav-item-dropdown:hover .nav-link-text::after,
  .nav-item-dropdown.dropdown-open .nav-link-text::after {
    opacity: 0.5;
    transform: translateY(1px);
  }
  
  /* White header: Desktop dropdown arrow - use medium green */
  .site-header:not(.header-dark) .nav-item-dropdown .nav-link-text::after {
    color: var(--green-5);
  }
  .site-header:not(.header-dark) .nav-item-dropdown:hover .nav-link-text::after,
  .site-header:not(.header-dark) .nav-item-dropdown.dropdown-open .nav-link-text::after {
    color: var(--green-5);
  }
  
  /* Dark mode: Desktop dropdown arrow - use primary cyan */
  .site-header.header-dark .nav-item-dropdown .nav-link-text::after {
    color: #00B899;
    opacity: 0.46;
  }
  
  .site-header.header-dark .nav-item-dropdown:hover .nav-link-text::after,
  .site-header.header-dark .nav-item-dropdown.dropdown-open .nav-link-text::after {
    color: #00B899;
    opacity: 0.5;
  }
}

/* Dropdown chevron button - hidden on desktop, shown on mobile */
.dropdown-chevron{
  display: none; /* Hidden by default, shown only on mobile */
  background: none;
  border: none;
  padding: 4px 8px;
  margin: 0;
  cursor: pointer;
  font-size: 14px;
  transition: transform 0.2s ease;
  vertical-align: middle;
  color: var(--text-dark);
  line-height: 1;
}

/* White header: Dropdown chevron - use medium green */
.site-header:not(.header-dark) .dropdown-chevron,
.site-header:not(.header-dark) .dropdown-chevron .icon-plus,
.site-header:not(.header-dark) .dropdown-chevron .icon-minus {
  color: var(--green-5);
}

/* Desktop: Ensure chevron is hidden */
@media (min-width: 881px){
  .dropdown-chevron{
    display: none !important;
  }
  
  /* Ensure desktop navigation is horizontal */
  .main-nav{
    display: block !important;
    position: relative !important;
  }
  
  .main-nav ul{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 48px !important;
  }
  
  .main-nav a{
    display: inline-block !important;
  }
  
  /* Desktop: make nav-link-wrapper behave like a single link */
  .nav-link-wrapper {
    display: inline-flex;
    align-items: center;
  }
  
  .nav-link-text {
    display: inline-block;
  }
  
  /* Desktop dropdown menu should be hidden by default */
  .dropdown-menu{
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: block !important; /* Keep as block, just hide it */
    transition: opacity 0.15s ease, visibility 0.15s ease !important; /* Faster transition for better feel */
    left: 0 !important; /* Force left alignment */
    right: auto !important; /* Ensure not right-aligned */
    transform: translateX(0) translateY(0) !important; /* Reset any transforms */
  }
  
  /* Desktop dropdown hover - inherits from consolidated rule above */
  
  /* Dropdown interactive states */
  .nav-item-dropdown:hover .dropdown-menu *,
  .dropdown-menu:hover * {
    pointer-events: auto !important;
  }
  
  .nav-item-dropdown:hover,
  .nav-item-dropdown.dropdown-open {
    z-index: 10001;
  }
}

.dropdown-chevron .icon-plus,
.dropdown-chevron .icon-minus{
  display: inline-block;
}

.dropdown-chevron .icon-minus{
  display: none;
}

.nav-item-dropdown.dropdown-open .dropdown-chevron .icon-plus{
  display: none;
}

.nav-item-dropdown.dropdown-open .dropdown-chevron .icon-minus{
  display: inline-block;
}


/* Dropdown item boxes */
.dropdown-item{
  display: flex;
  flex-direction: row !important;
  align-items: center !important; /* Vertically center both divs */
  text-align: left !important;
  padding: 10px 14px !important;
  border-radius: 8px;
  background: #f8f9fa;
  border: 1px solid rgba(34,40,52,0.06);
  text-decoration: none;
  color: var(--text-dark);
  transition: all 0.2s ease;
  gap: 12px !important;
  width: 100% !important; /* Ensure full width of grid cell */
  min-width: 0; /* Prevent overflow */
  box-sizing: border-box !important;
  gap: 16px !important;
  margin: 0 !important;
  position: relative;
  left: 0;
  transform: none;
}

.dropdown-item:hover{
  background: #fff;
  border-color: var(--primary-color);
  box-shadow: 0 4px 12px rgba(56,93,245,0.15);
  transform: translateY(-2px);
}

.dropdown-icon{
  font-size: 24px !important;
  margin: 0 !important;
  line-height: 1 !important;
  flex-shrink: 0 !important; /* Icon div stays its natural size, doesn't shrink */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important; /* Fixed width for icon container */
  min-width: 36px !important;
  max-width: 36px !important;
  text-align: center !important;
  order: 1 !important; /* Ensure icon is first */
}

.dropdown-icon img{
  width: 100%;
  height: auto;
  max-width: 36px;
  max-height: 36px;
  object-fit: contain;
  display: block;
}

/* Chat with support - inline icon + text link spanning full row */
.dropdown-chat-link {
  grid-column: 1 / -1;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: row !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  border-radius: 8px;
  background: #f8f9fa;
  border: 1px solid rgba(34,40,52,0.06);
  text-decoration: none;
  color: var(--text-dark);
  transition: all 0.2s ease;
  cursor: pointer;
}

.dropdown-chat-link:hover {
  background: #fff;
  border-color: var(--primary-color);
  box-shadow: 0 4px 12px rgba(56,93,245,0.15);
}

.dropdown-chat-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--primary-color);
  position: relative;
  top: 1px;
}

.dropdown-chat-link span {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-color);
  white-space: nowrap;
}

/* Dark mode: Chat with support link */
.site-header.header-dark .dropdown-chat-link {
  background: rgba(20,28,42,0.9);
  border-color: rgba(255,255,255,0.08);
}

.site-header.header-dark .dropdown-chat-link:hover {
  background: rgba(30,40,58,0.95);
  border-color: var(--primary-color);
  box-shadow: 0 4px 12px rgba(56,93,245,0.25);
}

.site-header.header-dark .dropdown-chat-link svg {
  color: var(--secondary-color);
}

.site-header.header-dark .dropdown-chat-link span {
  color: var(--secondary-color);
}

.dropdown-content{
  display: flex !important;
  flex-direction: column !important; /* Title (h4) and description (p) stacked vertically */
  gap: 4px !important;
  flex: 1 !important; /* Takes remaining space after icon */
  min-width: 0 !important;
  align-items: flex-start !important; /* Left-align text */
  justify-content: center !important; /* Vertically center the text content */
  order: 2 !important; /* Ensure content is second */
}

.dropdown-content h4{
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.dropdown-content p{
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-medium);
}

.dropdown-content h4{
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--primary-color);
  margin: 0 0 2px 0;
}

.dropdown-content p{
  font-size: 12px;
  color: var(--text-medium);
  margin: 0;
  line-height: 1.35;
}

/* header ctas */
.header-ctas{
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:auto; /* push CTA to the far right */
}

/* Header chat button */
.header-chat-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--primary-color);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  order: 1; /* After CTA on desktop */
}

.header-chat-btn svg {
  width: 18px;
  height: 18px;
  color: white;
}

/* Product page: cyan button with black icon */
.product-page .header-chat-btn {
  background: var(--secondary-color);
}
.product-page .header-chat-btn svg {
  color: #000000;
}
.product-page .header-chat-btn:hover {
  box-shadow: 0 4px 12px rgba(139, 221, 208, 0.4);
}

.header-chat-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(56, 93, 245, 0.4);
}

/* Hide default Crisp launcher only when our custom header button is active.
   This provides a safe fallback (e.g. on Android) if the custom button fails to load/work. */
.has-custom-chat #crisp-chatbox [data-launcher] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Mobile: chat button after hamburger */
@media (max-width: 880px) {
  .header-chat-btn {
    display: none !important; /* Hide chat button on mobile */
  }
  
  /* Show Chat with support submenu item on mobile */
  .mobile-only-chat-item {
    display: flex !important;
  }
}

/* Hide Chat with support submenu item on desktop */
.mobile-only-chat-item {
  display: none !important;
}

/* mobile nav toggle */
.nav-toggle{
  display:none;
  background:none;
  border:0;
  padding:6px;
  cursor: pointer;
  position: relative;
  z-index: 70; /* Above header but below dropdown menus */
  pointer-events: auto !important;
}
.hamburger{
  display:block;
  width:22px;
  height:2px;
  background:var(--text-dark);
  position:relative;
  pointer-events: none; /* Allow clicks to pass through to button */
  z-index: 1;
}
.hamburger::before, .hamburger::after{
  content:"";
  position: absolute;
  left: 0;
  right: 0;
  height:2px;
  background:var(--text-dark);
  pointer-events: none; /* Allow clicks to pass through */
}
.hamburger::before{ top: -6px; }
.hamburger::after{ top: 6px; }

/* ===========================================
   HEADER DARK MODE VARIANT
   Add class "header-dark" to <header> to enable
   =========================================== */
.site-header.header-dark {
  background: linear-gradient(180deg, rgba(13,18,27,0.98), rgba(13,18,27,0.95));
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Dark mode: Logo - invert for visibility (or use a white logo variant) */
.site-header.header-dark .logo {
  color: #ffffff;
}

/* Dark mode: Nav links */
.site-header.header-dark .main-nav a {
  color: #ffffff !important;
}
.site-header.header-dark .main-nav a:hover,
.site-header.header-dark .main-nav a:focus {
  color: #ffffff !important;
  opacity: 1;
}

/* Dark mode: Hamburger */
.site-header.header-dark .hamburger,
.site-header.header-dark .hamburger::before,
.site-header.header-dark .hamburger::after {
  background: #ffffff;
}

/* Dark mode: Dropdown menu */
.site-header.header-dark .dropdown-menu {
  background: rgba(13,18,27,0.98);
  border-color: rgba(255,255,255,0.1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

/* Dark mode: Dropdown items */
.site-header.header-dark .dropdown-item {
  background: rgba(20,28,42,0.9);
  border-color: rgba(255,255,255,0.08);
}
.site-header.header-dark .dropdown-item:hover {
  background: rgba(30,40,58,0.95);
  border-color: var(--primary-color);
  box-shadow: 0 4px 12px rgba(56,93,245,0.25);
}

/* Dark mode: Dropdown text */
.site-header.header-dark .dropdown-content h4 {
  color: #ffffff;
}
.site-header.header-dark .dropdown-content p {
  color: rgba(255,255,255,0.7);
}

/* Product page: Keep dropdown titles white (not blue) */
.product-page .dropdown-content h4 {
  color: #ffffff;
}

/* Product page: Dropdown chevrons white */
.product-page .dropdown-chevron {
  color: #ffffff;
  border-color: rgba(255,255,255,0.5) !important;
  background: transparent !important;
}
.product-page .dropdown-chevron .icon-plus,
.product-page .dropdown-chevron .icon-minus {
  color: #ffffff !important;
}
.product-page .nav-item-dropdown.dropdown-open .dropdown-chevron {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.3) !important;
}

/* Dark mode: Chevron/plus-minus icons - use primary cyan */
.site-header.header-dark .dropdown-chevron {
  color: #00B899;
  border-color: rgba(0, 184, 153, 0.5) !important;
  background: transparent !important;
}
.site-header.header-dark .dropdown-chevron .icon-plus,
.site-header.header-dark .dropdown-chevron .icon-minus {
  color: #00B899 !important;
}
.site-header.header-dark .nav-item-dropdown.dropdown-open .dropdown-chevron {
  background: rgba(0, 184, 153, 0.1) !important;
  border-color: rgba(0, 184, 153, 0.3) !important;
}

/* Dark mode: CTA button - teal color */
.site-header.header-dark .btn-primary {
  background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
  color: var(--text-dark);
  border: 1px solid rgba(255,255,255,0.55);
  text-shadow: none !important;
}
.site-header.header-dark .btn-primary:hover {
  background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
  color: var(--text-dark);
  border: 1px solid rgba(255,255,255,0.55);
}
.site-header.header-dark .btn-outline {
  color: var(--secondary-color);
  border-color: var(--secondary-color);
}
.site-header.header-dark .btn-outline:hover {
  background: rgba(0, 255, 215, 0.1);
  color: var(--secondary-color);
  border-color: var(--secondary-color);
}

/* Dark mode: Chat button uses cyan */
.site-header.header-dark .header-chat-btn {
  background: var(--secondary-color);
}
.site-header.header-dark .header-chat-btn:hover {
  box-shadow: 0 4px 12px rgba(139, 221, 208, 0.4);
}

/* Dark mode: Mobile nav menu */
@media (max-width: 880px) {
  .site-header.header-dark .main-nav {
    background: rgba(13,18,27,0.98);
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  }
  .site-header.header-dark .main-nav a:hover {
    background: rgba(255,255,255,0.08);
  }
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border-radius:10px;
  text-decoration:none;
  /* Explicit size so buttons don't inherit --font-size-body (20px). Label text
     is UI chrome, not reading copy — it shouldn't scale with body size. */
  font-size:16px;
  font-weight:700;
  font-family:var(--font-display);
  cursor:pointer;
  border:2px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn:active{ transform: translateY(1px); }

/* Small button – reusable for compact CTAs (~66% scale) */
.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

.btn-primary{
  background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
  color: var(--text-dark);
  border: 1px solid rgba(255,255,255,0.55);
  text-shadow: none;
}
.btn-primary:hover{
  background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
  color: var(--text-dark);
  border: 1px solid rgba(255,255,255,0.55);
}
.btn-primary.large{ padding:14px 22px; font-size:16px; }

@media (max-width: 880px) {
  .btn,
  .btn-primary,
  .btn-primary.large,
  .btn-outline {
    font-size: 0.8rem !important;
    padding: 7px 11px !important;
    border-radius: 10px !important;
    min-width: auto;
    white-space: nowrap;
    line-height: 1.2;
  }
}

/* Outline button - same as primary but no fill, border and text match */
.btn-outline{
  background: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}
.btn-outline:hover{
  background: rgba(0, 199, 169, 0.08);
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.link-ghost{
  margin-left:12px;
  font-weight:600;
  color:var(--text-medium);
  text-decoration:none;
}
/* Juicy CTA animations (pulse + breathe) */
.cta-boost{
  position: relative;
  overflow: visible;              /* allow pulse outside edges */
  isolation: isolate;             /* keep pseudo below text */
  backface-visibility: hidden;    /* keep text crisp */
  transform: translateZ(0);       /* promote to its own layer */
  will-change: opacity, box-shadow; /* avoid scaling the text */
}
.cta-boost::before{
  content: "";
  position: absolute;
  inset: -4px;                    /* halo extends outside */
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(0,69,92,0.35); /* uses primary tone */
  opacity: 0.9;
  transform: scale(1);
  animation: ctaPulse 2.8s ease-out infinite, ctaHaloBreathe 3.6s ease-in-out infinite;
  z-index: -1;                    /* sit behind the button */
}

@keyframes ctaPulse{
  0%   { box-shadow: 0 0 0 0 rgba(0,69,92,0.35); }
  70%  { box-shadow: 0 0 0 16px rgba(0,69,92,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,69,92,0); }
}
@keyframes ctaHaloBreathe{
  0%,100% { transform: scale(1); opacity: 0.65; }
  50%     { transform: scale(1.08); opacity: 0.9; }
}
@keyframes ctaBreathe{
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-1px) scale(1.03); }
}

/* Hover focus states—slightly stronger glow */
.cta-boost:hover,
.cta-boost:focus-visible{ box-shadow: 0 10px 26px rgba(0,69,92,0.28); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .cta-boost{ animation: none !important; }
  .cta-boost::before{ animation: none !important; }
  .follow-us .social-media-icons a,
  .footer-social a,
  .contact-social a {
    animation: none !important;
  }
}
/* ---------- HERO-COPY DEFAULT STYLES ---------- */
/* Base styles for all hero-copy elements - variants override as needed */

/* Default CTA button - gradient + dark text (matches header, product hero) */
.hero-section .btn-primary {
  background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
  color: var(--text-dark);
  border: 1px solid rgba(255,255,255,0.55);
  text-shadow: none;
}
.hero-section .btn-primary:hover {
  background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
  color: var(--text-dark);
  border: 1px solid rgba(255,255,255,0.55);
}

/* Default Learn More link - bright primary color */
.hero-actions .link-ghost {
  color: var(--secondary-color);
  transition: color .18s ease;
}
.hero-actions .link-ghost:hover {
  color: #7BCBC0;
}

/* Default hero text - dark text */
.hero-copy .hero-title,
.hero-copy .lead,
.hero-copy p {
  color: var(--text-dark);
}

/* Spacing and layout for hero CTAs */
.hero-actions{
  display: flex;
  align-items: center;
  gap: 18px;           /* increased space between Try It Today and Learn More */
  flex-wrap: wrap;     /* keeps layout tidy on narrow widths */
}

/* --- HERO promo banner --- */
.promo-banner{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(34,40,52,0.08);
  box-shadow: var(--card-shadow), 0 6px 18px rgba(0,0,0,0.12);
  margin-bottom: 14px;           /* space above your main headline */
}

.promo-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    var(--secondary-color) 0%,
    var(--primary-color) 100%
  );;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.3px;
  animation: badgePulse 2.2s ease-in-out infinite;
}

.promo-text{
  color: var(--text-dark);
  font-weight: 600;
  font-size: 14px;
}

.promo-link{
  color: var(--primary-color);
  font-weight: 700;
  text-decoration: none;
}
.promo-link:hover{ text-decoration: underline; }

/* subtle pulse */
@keyframes badgePulse{
  0%   { box-shadow: 0 0 0 0 rgba(0,69,92,0.28); }
  70%  { box-shadow: 0 0 0 10px rgba(0,69,92,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,69,92,0); }
}

/* mobile niceties */
@media (max-width: 880px){
  /* Mobile typography + spacing for list items (scoped; avoid affecting layout boxes) */
  .plan-card li{
    font-size: 0.9em;
    line-height: 1.35;
    padding: 10px 0;
  }
  .how-feature-list li{
    font-size: 0.9em;
    line-height: 1.35;
    padding: 6px;
  }
  .footer-links li{
    font-size: 0.9em;
    line-height: 1.35;
  }
  .promo-banner{
    display: inline-flex;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 6px 10px;
    width: auto;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    align-self: center;
    margin-bottom: 8px;          /* tighter spacing to hero headline on mobile */
  }
  .promo-badge {
    font-size: 10px;
    padding: 4px 8px;
  }
  .promo-text {
    font-size: 12px;
  }
  .promo-link {
    font-size: 12px;
  }
  /* Mobile safety: if animations fail, don’t hide pricing */
  .prehide-pricing .plan-card,
  .prehide-pricing .plan-badge,
  #pricing .section-title,
  #pricing .section-sub,
  #pricing .btn{
    opacity: 1 !important;
    transform: none !important;
  }

}

/* ===========================================
   UNIFIED HERO SECTION SYSTEM
   All hero sections use --header-height for top padding
   Content centering accounts for header space
   =========================================== */
.hero-section {
  height: 100vh; /* full viewport */
  display: flex;
  align-items: center;
  padding: 48px 0;
  padding-top: calc(48px + var(--header-height)); /* content padding + header clearance */
  padding-bottom: 48px;
  position: relative;
  overflow: hidden;
  background: url('images/thrift-store-bg.png') top center/cover no-repeat;
  box-sizing: border-box;
}

.home-page .hero-section {
  background-image: url('images/index-hero-bg.png'), linear-gradient(to bottom right, #00231A 0%, #000000 80%);
  background-position: calc(100% + 220px) top, 0 0;
  background-size: auto 70%, 100% 100%;
  background-repeat: no-repeat;
  animation: heroBgSlideIn 45s cubic-bezier(0.06, 1, 0.2, 1) both;
}

@keyframes heroBgSlideIn {
  0%     { background-position: calc(100% + 450px) top, 0 0; }
  100%   { background-position: calc(100% + 220px) top, 0 0; }   /* Full 45s slide: fast start, very slow finish */
}
@media (prefers-reduced-motion: reduce) {
  .home-page .hero-section { animation: none; }
}

.home-page .hero-section::before,
.home-page .hero-section::after {
  display: none !important;
}

/* ============================================
   HERO-USERS-UNIQUE - Completely standalone hero section for users.html
   No dependencies on other hero sections
   ============================================ */
.hero-users-unique {
  height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Align content to bottom */
  align-items: center; /* Center horizontally */
  padding-bottom: 40px; /* Match top padding of section below (40px) */
  position: relative;
  overflow: hidden;
  background: transparent;
  background-image: none;
}

/* Remove any background overlays */
.hero-users-unique::before,
.hero-users-unique::after{
  display: none;
}

/* Video background */
.hero-users-unique .hero-video-bg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  display: block;
  background: transparent;
}

/* Ensure video plays and is visible */
.hero-users-unique video.hero-video-bg {
  opacity: 1;
  visibility: visible;
}

/* Hero grid - centers content horizontally */
.hero-users-unique .hero-grid{
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Product page - keep centered but use transform for fine positioning */
.product-page .hero-users-unique .hero-grid {
  justify-content: center !important; /* Keep centered */
}

/* Hero copy styling */
.hero-users-unique .hero-copy{
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.7); /* White with 70% opacity */
  border-radius: 16px;
  padding: 40px;
  box-sizing: border-box;
}

/* ========================================
   USERS PAGE HERO SECTION - REBUILT FROM SCRATCH
   ======================================== */

/* Hero section container */
.users-page .hero-users-unique {
  height: 70vh; /* Increased by 5vh from 65vh */
  min-height: 400px; /* Minimum so content doesn't get squished */
  max-height: calc(100vh - 220px); /* Leave room for uses section (~220px) */
  padding-top: var(--header-height); /* Account for fixed header */
  padding-bottom: 0; /* Padding handled by hero-content-wrapper */
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end; /* Align content to bottom */
  box-sizing: border-box; /* Include padding in height */
  background: #FFFFFF !important; /* White fallback - no image */
  background-image: none !important; /* Ensure no background image */
  justify-content: center; /* Center horizontally */
  /* Fallback background color - matches first gradient color from section below (#A9BAFF) */
  background-color: #A9BAFF;
}

/* Video background */
.users-page .hero-users-unique .hero-video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* Fallback is handled by section background - video overlays it */

/* Hero content wrapper - centers everything horizontally, aligns to bottom */
.users-page .hero-users-unique .hero-content-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-width);
  padding: 0 var(--container-padding);
  padding-bottom: 20px; /* Match the padding-top of "User Types" section (20px) */
  display: flex;
  flex-direction: column;
  align-items: center; /* Center horizontally */
  justify-content: flex-end; /* Align to bottom */
  gap: 36px; /* 36px gap between the two containers */
  margin: 0 auto;
  box-sizing: border-box;
  height: 100%; /* Take full height of parent to enable bottom alignment */
  min-height: 0; /* Allow flex items to shrink */
}

/* First container: Content box with H1, description, CTA, and User Types link */
.users-page .hero-users-unique .users-hero-content-box {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  padding: 40px;
  text-align: center;
  max-width: 800px;
  width: 100%;
  box-sizing: border-box;
}

/* Title styling - uses shared spacing defined below */
.users-page .hero-users-unique .users-hero-content-box .hero-title {
  color: var(--text-dark);
  font-size: 38px !important; /* Reduced from default hero size */
}

@media (max-width: 880px) {
  .users-page .hero-users-unique .users-hero-content-box .hero-title {
    font-size: 28px !important; /* Smaller on mobile */
  }
}

/* Lead paragraph - uses shared spacing defined below */
.users-page .hero-users-unique .users-hero-content-box .lead.body-lg {
  color: var(--text-dark);
}

/* Hero actions container - uses shared spacing defined below */
.users-page .hero-users-unique .users-hero-content-box .hero-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* Second container: Marketplace icons in a single row */
.users-page .hero-users-unique .users-hero-marketplaces {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: nowrap; /* Prevent wrapping on desktop */
  width: 100%;
  max-width: 1200px; /* Increased width to fit all icons in one row */
}

/* Marketplace icon images */
.users-page .hero-users-unique .users-hero-marketplaces img {
  height: 48px;
  width: auto;
  object-fit: contain;
}

/* Mobile responsive styles */
@media (max-width: 880px) {
  .users-page .hero-users-unique {
    height: auto; /* Auto height on mobile - content determines size */
    min-height: 50vh; /* Minimum height */
    max-height: none; /* Remove max-height constraint on mobile */
    padding-top: 20vh; /* Space above hero on mobile */
    padding-bottom: 20px; /* Padding handled by hero-content-wrapper */
    background: #FFFFFF !important; /* White fallback - no image */
    background-image: none !important; /* Ensure no background image */
    box-sizing: border-box; /* Include padding in height */
  }
  
  .users-page .hero-users-unique .hero-content-wrapper {
    gap: 36px;
    padding-bottom: 20px; /* Match padding-top of "User Types" section (20px) */
  }
  
  .users-page .hero-users-unique .users-hero-content-box {
    padding: 32px 24px;
  }
  
  /* Marketplace icons: 4 above, 3 below on mobile */
  .users-page .hero-users-unique .users-hero-marketplaces {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 100%;
  }
  
  .users-page .hero-users-unique .users-hero-marketplaces img {
    height: 30px;
    justify-self: center;
  }
  
  /* First 4 icons in top row */
  .users-page .hero-users-unique .users-hero-marketplaces img:nth-child(1),
  .users-page .hero-users-unique .users-hero-marketplaces img:nth-child(2),
  .users-page .hero-users-unique .users-hero-marketplaces img:nth-child(3),
  .users-page .hero-users-unique .users-hero-marketplaces img:nth-child(4) {
    grid-row: 1;
  }
  
  /* Next 3 icons in bottom row, centered */
  .users-page .hero-users-unique .users-hero-marketplaces img:nth-child(5),
  .users-page .hero-users-unique .users-hero-marketplaces img:nth-child(6),
  .users-page .hero-users-unique .users-hero-marketplaces img:nth-child(7) {
    grid-row: 2;
    grid-column: span 1;
  }
  
  /* Center the bottom row (3 items) */
  .users-page .hero-users-unique .users-hero-marketplaces img:nth-child(5) {
    grid-column: 2;
  }
  
  .users-page .hero-users-unique .users-hero-marketplaces img:nth-child(6) {
    grid-column: 3;
  }
  
  .users-page .hero-users-unique .users-hero-marketplaces img:nth-child(7) {
    grid-column: 4;
  }
}

/* Most Scanned Items - two containers in a row: hashtag | text */
.use-case-section-heading {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 24px;
  text-align: left !important;
}
.use-case-section-heading-text {
  text-align: left;
}
.use-case-hashtag-container {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  width: fit-content;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.use-case-hashtag-text {
  font-family: 'Poppins', var(--font-sans);
  font-weight: 100;
  font-size: 72px;
  line-height: 1;
  background: linear-gradient(90deg, #5E61FF 0%, #a855f7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (max-width: 880px) {
  .use-case-hashtag-text {
    font-size: 56px;
  }
}

/* Users page - "many uses" section */
.users-page .use-case-section {
  padding: 60px 0 80px 0;
}

.users-page .use-case-section.use-case-section--skewed-grid {
  position: relative;
  overflow: hidden;
}

.users-page .use-case-section.use-case-section--skewed-grid::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to top, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
  z-index: 0;
  pointer-events: none;
}

/* Skewed grid background for users page "All the use cases" */
.users-page .use-case-skewed-grid-bg {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(94, 97, 255, 0.25) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(168, 85, 247, 0.25) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: 0 0;
  background-repeat: repeat;
  transform: skewX(-12deg);
  animation: use-case-grid-scroll 5s linear infinite;
}

@keyframes use-case-grid-scroll {
  0% { background-position: 0 0; }
  100% { background-position: -32px -32px; }
}

@media (prefers-reduced-motion: reduce) {
  .users-page .use-case-skewed-grid-bg { animation: none; }
}

.users-page .use-case-section .container {
  position: relative;
  z-index: 1;
}

.users-page .use-case-section .section-heading {
  margin-bottom: 24px; /* Tighter heading spacing */
}

/* "All the use cases" header - match pricing section font (Sabon), double size */
.users-page #many-uses .use-case-title {
  font-family: 'linotype-sabon', var(--font-serif);
  font-size: 4rem;
  font-weight: 400;
  font-style: italic;
}
@media (max-width: 880px) {
  .users-page #many-uses .use-case-title {
    font-size: 3rem;
  }
}

/* Slower marquee scroll for users page "All the use cases" only */
.users-page #many-uses .marquee-content {
  animation-duration: 65s;
}
@media (max-width: 880px) {
  .users-page #many-uses .marquee-content {
    animation-duration: 50s;
  }
}

@media (max-width: 880px) {
  .users-page .use-case-section {
    padding: 48px 0 64px 0;
  }
}

/* Text color - dark text on white background */
.hero-users-unique .hero-copy .hero-title,
.hero-users-unique .hero-copy .lead,
.hero-users-unique .hero-copy p,
.hero-users-unique .hero-copy .body-lg{
  color: var(--text-dark);
}

/* Hero actions - center the buttons */
.hero-users-unique .hero-actions{
  justify-content: center;
  display: flex;
}

/* Product page hero - use product-hero-bg.png background */
.product-page .hero-users-unique{
  background: url('images/product-hero-bg.png') center bottom / cover no-repeat !important;
  background-image: url('images/product-hero-bg.png') !important;
  background-position: center bottom !important;
  background-size: cover !important;
  height: 100vh !important; /* Full viewport height */
  min-height: 100vh !important;
  padding-bottom: 60px !important; /* Space below CTA */
  overflow: visible !important;
  box-sizing: border-box !important; /* Include padding in height calculation */
}

/* Move hero-copy lower - extend into features section - DESKTOP ONLY */
@media (min-width: 881px) {
  .product-page .hero-users-unique .hero-grid{
    margin-bottom: 0 !important;
    position: relative !important;
    z-index: 5 !important;
    padding-top: 0 !important;
    transform: none !important;
    align-items: flex-end !important; /* Align content to bottom */
    justify-content: center !important;
    height: 100% !important;
  }

  .product-hero-copy{
    margin-bottom: 0;
    margin-top: 0;
    /* padding from --hero-copy-padding variable */
  }
}

/* Fallback for desktop (outside media query for broader compatibility) */
.product-page .hero-grid{
  margin-bottom: -40px;
  position: relative;
  z-index: 5;
  padding-top: 0;
}

/* Product page hero - solid secondary color background, no gradients */
.product-page .hero-section{
  background: url('images/product-hero-bg.png') center center / cover no-repeat !important;
  align-items: flex-end; /* Align content to bottom */
  padding-bottom: 15vh; /* Position content lower in bottom section */
}
/* Product, Thrifters, Resellers hero overlay removal (consolidated below) */

/* Product page hero grid - ensure content aligns to bottom */
@media (max-width: 880px) {
.product-page .hero-grid{
  display: flex !important;
  justify-content: center !important;
  align-items: flex-end !important;
  width: 100%;
  }
}

/* Product page hero actions - center CTA and Learn More */
.product-page .hero-actions{
  justify-content: center !important;
  display: flex !important;
}

/* Product page feature image scaling (consolidated) */
.product-page #feature-2 .feature-img { transform: scale(0.67); }
.product-page #feature-3 .feature-img,
.product-page #feature-4 .feature-img,
.product-page #feature-5 .feature-img { transform: scale(2); }
.product-page #feature-inventory .feature-img { transform: scale(0.5); }

.product-page #feature-2 .feature-img,
.product-page #feature-3 .feature-img,
.product-page #feature-4 .feature-img,
.product-page #feature-5 .feature-img,
.product-page #feature-inventory .feature-img {
  transform-origin: center center;
}

.product-page #feature-5 .feature-media {
  background: transparent !important;
}

/* Product page features section - black background */
.product-page #feature-selection {
  background: #000000 !important;
}

/* Resellers page hero background */
/* Thrifters, Resellers, and Businesses hero sections - shared bottom alignment */
.thrifters-page .hero-section,
.resellers-page .hero-section,
.businesses-page .hero-section,
.enterprise-page .hero-section {
  height: 100vh;
  min-height: 100vh;
  padding-top: var(--header-height);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.thrifters-page .hero-section {
  background: #000000 !important;
  background-image: none !important;
}
.resellers-page .hero-section{
  background: #ffffff !important;
  background-image: none !important;
}
.businesses-page .hero-section{
  background: url('images/businesses-hero-bg.png') center center / cover no-repeat !important;
}
.enterprise-page .hero-section {
  background: #000 !important;
  background-image: none !important;
}
.enterprise-page .hero-section .hero-video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  display: block;
}
/* Hero overlay removal - consolidated for product, thrifters, resellers */
.product-page .hero-section::before,
.product-page .hero-section::after,
.thrifters-page .hero-section::before,
.thrifters-page .hero-section::after,
.resellers-page .hero-section::before,
.resellers-page .hero-section::after,
.businesses-page .hero-section::before,
.businesses-page .hero-section::after,
.enterprise-page .hero-section::before,
.enterprise-page .hero-section::after {
  display: none !important;
}

/* Thrifters, Resellers, Businesses, and Enterprise hero-grid - bottom aligned (consolidated) */
.thrifters-page .hero-grid,
.resellers-page .hero-grid,
.businesses-page .hero-grid,
.enterprise-page .hero-grid {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-end !important;
  position: relative;
  z-index: 1;
  width: 100%;
  padding-bottom: 40px;
}

/* Thrifters only: move hero glass card higher (vertical center vs bottom-aligned peers) */
.thrifters-page .hero-section {
  align-items: center;
}
.thrifters-page .hero-grid {
  align-items: center !important;
  justify-content: center !important;
  padding-bottom: 0;
}

/* Thrifters page video background */
.thrifters-page .hero-section .hero-video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  display: block;
  opacity: 0.66;
}

/* Resellers page video background positioning */
.resellers-page .hero-section .hero-video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  display: block;
}
/* Businesses page - same video background */
.businesses-page .hero-section .hero-video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* Thrifters hero layout - phone behind, copy in front */
.thrifters-hero-layout {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* min-height handled by .thrifters-page .hero-section */
}

/* Phone positioned behind the hero copy */
.thrifters-phone-bg {
  position: absolute;
  top: 50%;
  /* Use left/right auto margin for reliable centering regardless of container padding */
  left: 0;
  right: 0;
  background: transparent;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  transform: translateY(-50%); /* True vertical center */
  z-index: 1;
}

.thrifters-phone-bg .how-img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - 200px); /* Relative to viewport with padding space */
  /* Match feature-section phone appearance */
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  /* Ensure no rotation/animation */
  transform: none !important;
  animation: none !important;
}

/* ==========================================
   SHARED HERO-COPY BASE STYLES
   (thrifters, resellers, users pages)
   ========================================== */
/* Shared hero-copy base styles (product, thrifters, resellers)
   Uses CSS variables for unified control - change --hero-copy-width to resize all */
.product-hero-copy,
.thrifters-hero-copy,
.resellers-hero-copy,
.businesses-hero-copy {
  text-align: center;
  width: 100%;
  max-width: var(--hero-copy-width);
  margin: 0 auto;
  border-radius: 16px;
  padding: var(--hero-copy-padding);
  box-sizing: border-box;
  position: relative;
}

.users-page .hero-copy {
  text-align: center;
  max-width: 800px;  /* Unchanged */
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 16px;
  padding: 32px;
  box-sizing: border-box;
  position: relative;
}

/* Shared text color */
.thrifters-hero-copy .hero-title,
.thrifters-hero-copy .lead,
.thrifters-hero-copy p,
.resellers-hero-copy .hero-title,
.resellers-hero-copy .lead,
.resellers-hero-copy p,
.businesses-hero-copy .hero-title,
.businesses-hero-copy .lead,
.businesses-hero-copy p,
.users-page .hero-copy .hero-title,
.users-page .hero-copy .lead,
.users-page .hero-copy p {
  color: var(--text-dark);
}

/* Shared element spacing for consistent layout across all hero-copy containers */
.thrifters-hero-copy .hero-title,
.resellers-hero-copy .hero-title,
.businesses-hero-copy .hero-title,
.users-page .hero-copy .hero-title,
.users-page .hero-users-unique .users-hero-content-box .hero-title {
  margin: 0 0 6px 0 !important; /* Override any inline styles */
}

/* Desktop: Use default hero title font size for thrifters and resellers (same as product page) */
/* Removed override - now uses var(--font-size-hero) like product page */

.thrifters-hero-copy .lead,
.thrifters-hero-copy .lead.body-lg,
.resellers-hero-copy .lead,
.resellers-hero-copy .lead.body-lg,
.businesses-hero-copy .lead,
.businesses-hero-copy .lead.body-lg,
.users-page .hero-copy .lead,
.users-page .hero-users-unique .users-hero-content-box .lead,
.users-page .hero-users-unique .users-hero-content-box .lead.body-lg {
  margin: 6px 0 18px 0 !important; /* Consistent spacing above and below */
}

.thrifters-hero-copy .hero-actions,
.resellers-hero-copy .hero-actions,
.businesses-hero-copy .hero-actions,
.users-page .hero-copy .hero-actions,
.users-page .hero-users-unique .users-hero-content-box .hero-actions {
  justify-content: center !important;
  display: flex !important;
  margin: 0 !important;
}

/* Page-specific overrides - shared glass styling */
.thrifters-hero-copy,
.resellers-hero-copy,
.businesses-hero-copy,
.users-page .hero-users-unique .users-hero-content-box {
  z-index: 10;
  /* Glass effect - heavy blur with compatibility fallbacks */
  background: rgba(40, 40, 50, 0.30);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(60, 60, 70, 0.40);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}


/* Product page hero-copy - dark glassmorphism effect (product-specific styles only) */
.product-hero-copy{
  margin-top: -8px;
  background: rgba(20, 25, 35, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Glass containers: Use light text colors for dark glass background */
.thrifters-hero-copy .hero-title,
.thrifters-hero-copy .lead,
.thrifters-hero-copy p,
.thrifters-hero-copy .body-lg,
.resellers-hero-copy .hero-title,
.resellers-hero-copy .lead,
.resellers-hero-copy p,
.resellers-hero-copy .body-lg,
.businesses-hero-copy .hero-title,
.businesses-hero-copy .lead,
.businesses-hero-copy p,
.businesses-hero-copy .body-lg,
.users-page .hero-users-unique .users-hero-content-box .hero-title,
.users-page .hero-users-unique .users-hero-content-box .lead,
.users-page .hero-users-unique .users-hero-content-box p,
.users-page .hero-users-unique .users-hero-content-box .body-lg {
  color: var(--text-light) !important;
}

.thrifters-hero-copy .link-ghost,
.resellers-hero-copy .link-ghost,
.businesses-hero-copy .link-ghost,
.users-page .hero-users-unique .users-hero-content-box .link-ghost {
  color: var(--secondary-color) !important;
}

/* Hero-copy text colors now handled in shared base styles above */

/* Users page hero button - match site-wide primary style */
.users-page .hero-users-unique .hero-copy .btn-primary {
  background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%) !important;
  color: var(--text-dark) !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
  text-shadow: none !important;
}

.users-page .hero-users-unique .hero-copy .btn-primary:hover {
  background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%) !important;
  color: var(--text-dark) !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
}

/* Users page hero highlight - uses default .highlight class (primary blue) */

/* Product page hero text - white for dark glassmorphism background */
.product-hero-copy .hero-title,
.product-hero-copy .lead,
.product-hero-copy p,
.product-hero-copy .body-lg{
  color: #FFFFFF !important;
}

/* Product page highlight - cyan color for visibility on dark background */
.product-hero-copy .highlight{
  color: #8BDDD0 !important; 
}
.home-page .hero-copy .highlight-glow,
.product-hero-copy .highlight-glow,
.resellers-hero-copy .highlight-glow,
.businesses-hero-copy .highlight-glow,
.users-page .hero-users-unique .users-hero-content-box .highlight-glow,
.section--contact-form-embed .highlight-glow {
  color: var(--secondary-color) !important; /* Cyan/secondary color */
  text-shadow: 
    0 0 8px rgba(139, 221, 208, 0.35),
    0 0 16px rgba(139, 221, 208, 0.25),
    0 0 24px rgba(139, 221, 208, 0.15) !important;
  animation: glowPulseTeal 1.5s ease-in-out infinite;
}

/* Button glow effect for resellers and businesses hero */
.resellers-hero-copy .btn-primary,
.businesses-hero-copy .btn-primary {
  animation: glowPulseTealButton 1.5s ease-in-out infinite;
}

@keyframes glowPulseTeal {
  0%, 100% {
    text-shadow: 
      0 0 8px rgba(139, 221, 208, 0.35),
      0 0 16px rgba(139, 221, 208, 0.25),
      0 0 24px rgba(139, 221, 208, 0.15);
  }
  50% {
    text-shadow: 
      0 0 12px rgba(139, 221, 208, 0.55),
      0 0 24px rgba(139, 221, 208, 0.4),
      0 0 36px rgba(139, 221, 208, 0.25);
  }
}

@keyframes glowPulseTealButton {
  0%, 100% {
    box-shadow: 
      0 0 8px rgba(139, 221, 208, 0.35),
      0 0 16px rgba(139, 221, 208, 0.25),
      0 0 24px rgba(139, 221, 208, 0.15);
  }
  50% {
    box-shadow: 
      0 0 12px rgba(139, 221, 208, 0.55),
      0 0 24px rgba(139, 221, 208, 0.4),
      0 0 36px rgba(139, 221, 208, 0.25);
  }
}

/* Subtle pulsating glow for social media icons (follow-us, footer, contact) */
@keyframes glowPulseSocialIcon {
  0%, 100% {
    box-shadow: 0 0 8px rgba(139, 221, 208, 0.35), 0 0 16px rgba(139, 221, 208, 0.2);
  }
  50% {
    box-shadow: 0 0 12px rgba(139, 221, 208, 0.55), 0 0 24px rgba(139, 221, 208, 0.35);
  }
}

/* Hide marketplace icons on product page hero but keep the space */
.product-hero-copy .hero-marketplaces{
  visibility: hidden !important;
  height: 0; /* Reduced height to minimize space */
  margin-top: 0 !important; /* Remove any margin */
}

/* Product page hero particles - floating energy spheres */
.product-page .hero-users-unique {
  position: relative;
  overflow: hidden;
}

.hero-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  pointer-events: none;
  will-change: transform, opacity;
}

/* Particle animation - upward flow with random drift */
@keyframes particleFloat {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
  100% {
    transform: translateY(-100vh) translateX(calc(var(--drift-x) * 40px)) rotate(360deg);
  }
}

.particle {
  animation: particleFloat var(--duration, 15s) infinite linear;
  animation-delay: var(--delay, 0s);
}

/* Product page hero phone video */
.product-page .hero-phone-video{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  position: relative;
  margin-bottom: 10px !important; /* Reduced gap */
  background-color: transparent !important;
  background: transparent !important;
}

/* Product page hero phone video styling - LARGE on desktop */
/* Scales down when viewport height is reduced */
.product-phone-rotate-video{
  width: 800px !important;
  max-width: min(90vw, 60vh) !important; /* Constrain by viewport height too */
  min-width: 300px !important; /* Lower minimum to allow shrinking */
  height: auto !important;
  max-height: 65vh !important; /* Scale based on viewport height */
  pointer-events: none;
  position: relative;
  z-index: 2;
  mix-blend-mode: screen;
  filter: brightness(1.0) contrast(1.1);
  background-color: transparent !important;
  background: transparent !important;
}

/* GIF wrapper - replaces video in same position, 75% of original size */
.gif-wrapper {
  display: none; /* Hidden by default, shown by JS when video fails */
  background-color: transparent !important;
  background: transparent !important;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 600px !important; /* 75% of 800px */
  max-width: min(67.5vw, 45vh) !important; /* 75% of 90vw and 60vh */
  min-width: 225px !important; /* 75% of 300px */
  height: auto;
}

/* GIF fallback styling - 75% size with vh constraints */
.product-phone-rotate-gif {
  width: 100% !important;
  height: auto !important;
  max-height: 48.75vh !important; /* 75% of 65vh */
  pointer-events: none;
  position: relative;
  mix-blend-mode: screen;
  filter: brightness(1.0) contrast(1.1);
  background-color: transparent !important;
  background: transparent !important;
  object-fit: contain;
  display: block;
}

@media (max-width: 880px){
  /* Hide GIF fallback on mobile - video should work fine on mobile browsers */
  .gif-wrapper {
    display: none !important;
  }
  
  /* Product page mobile hero - prevent scrolling within section */
  .product-page .hero-phone-video{
    margin-bottom: 5px !important; /* Reduced gap */
    margin-top: 0 !important;
    padding-top: 0 !important;
    order: -1 !important; /* Place video above content on mobile */
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important; /* Allow video to be fully visible */
    display: flex !important;
  justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    flex-shrink: 0 !important;
  }
  
  /* Scale video appropriately on mobile - responsive to viewport height */
  .product-phone-rotate-video{
    width: 400px !important;
    min-width: 200px !important; /* Allow shrinking on short screens */
    max-width: min(90vw, 50vh) !important; /* Constrain by viewport height */
    height: auto !important;
    max-height: 55vh !important; /* Scale based on viewport height */
    object-fit: contain !important;
    display: block !important;
    position: relative !important;
    background-color: transparent !important;
  }
  
  
  /* Prevent horizontal scrolling and fix scrollable hero section */
  .product-page .hero-users-unique{
    overflow: visible !important; /* Allow overlap with section below */
    max-width: 100vw !important;
    width: 100% !important;
    height: auto !important; /* Let content determine height */
    min-height: auto !important; /* Fit to content, not viewport */
    max-height: none !important;
    padding-top: calc(8px + var(--header-height)) !important; /* Content padding + header clearance */
    /* Room below the badges for the next section's curve. .section--how-header
       pulls itself up 64px (margin-top: -64px) to show the hero through its
       concave clip-path, so the hero needs at least that much bottom padding or
       the curve lands on top of the badges. */
    padding-bottom: 76px !important;
    /* No extra overlap here. The -48px this used to carry stacked with the
       how-header's own -64px pull, burying the badges under 112px of the
       section below. */
    margin-bottom: 0 !important;
    position: relative !important;
    /* Above .section--how-header, which is also z-index 5 but comes later in the
       DOM — equal z-index meant it painted over the badges. */
    z-index: 6 !important;
    align-items: flex-start !important; /* Align content to top */
  }
  
  .product-page .hero-grid {
    max-width: 100vw !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* Align content from top */
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .product-page .hero-phone-video {
    margin: 56px 0 0 0 !important; /* Lower the phone graphic */
    padding: 0 !important;
  }
  
  .product-page .hero-appstore-badge {
    /* Sit directly below the hero copy. The old 56px pushed the badges past the
       hero's bottom edge, where the rounded top of the section below clipped
       them (the hero overlaps that section via margin-bottom: -48px). */
    margin-top: 12px !important;
  }
  
  .product-page .hero-grid {
    gap: 12px !important; /* Single source of spacing between video and hero-copy */
  }
  
  /* Ensure container element doesn't exceed viewport */
  .product-page .hero-users-unique > .container {
    max-width: 100vw !important;
    width: 100% !important;
    height: 100% !important; /* Take full height of hero section */
    overflow-x: hidden !important; /* Prevent horizontal overflow and scrolling */
    overflow-y: hidden !important; /* Prevent vertical overflow */
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Ensure hero content fits within viewport */
  .product-page .hero-phone-video {
    flex-shrink: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: visible !important;
    display: flex !important;
    justify-content: center !important;
  }

  .product-hero-copy {
    flex-shrink: 1; /* Allow text to shrink if needed */
    overflow: visible;
    min-height: 0; /* Allow flexbox to shrink it */
    margin-top: 0; /* Gap handled by .hero-grid gap */
    /* padding uses --hero-copy-padding variable from :root */
  }
}

/* Product page hero CTA button - cyan to match highlight */
.product-hero-copy .btn-primary{
  background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
  color: var(--text-dark) !important;
  border: 1px solid rgba(255,255,255,0.55);
  text-shadow: none !important;
}

.product-hero-copy .btn-primary:hover{
  background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%) !important;
  color: var(--text-dark) !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
}

/* Product page hero Learn More link - cyan for dark background */
.product-hero-copy .link-ghost {
  color: var(--secondary-color) !important;
}
.product-hero-copy .link-ghost:hover {
  color: #7BCBC0 !important;
}

/* Resellers hero-actions handled by .resellers-hero-copy */

/* Center marketplace logos on product, users, resellers, and businesses pages */
.product-page .hero-marketplaces,
.users-page .hero-marketplaces,
.resellers-page .hero-marketplaces,
.businesses-page .hero-marketplaces{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Users page hero grid - ensure content is centered and at bottom */


/* App / store badge (desktop: lives in header; mobile: floats below header) */
.hero-appstore-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 70;
}

.hero-appstore-badge img{
  height: 44px;
  width: auto;
  display: block;
}

/* Product hero (and any) two-badge row: iOS + Play Store side by side */
.hero-appstore-badge-row{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hero-appstore-badge-row a{
  display: inline-flex;
  align-items: center;
}

/* Home page: app store badges left-aligned with hero content */
.home-page .hero-copy .hero-appstore-badge-row {
  justify-content: flex-start;
}

/* App store icon variants: light (desktop) vs dark (mobile) */
.home-page .hero-copy .hero-appstore-badge .app-store-icon--dark {
  display: none;
}
.home-page .hero-copy .hero-appstore-badge .app-store-icon--light {
  display: block;
}

/* Desktop: hide app store badge from header */
@media (min-width: 881px){
  .header-ctas .hero-appstore-badge.desktop-only{
    display: none; /* Hidden from header on desktop */
  }
  .nav-appstore-badge{
    display: none; /* Hide menu badge on desktop */
  }
}

/* Mobile: hide from header, show in menu */
@media (max-width: 880px){
  .header-ctas .hero-appstore-badge.desktop-only{
    display: none;
  }
  
  /* Remove background image (but keep gradients) on product and users pages on mobile */
  
  /* Product page hero - solid secondary color background on mobile */
  .product-page .hero-section{
    background: url('images/product-hero-bg.png') center center / cover no-repeat !important;
  }
  
  /* Thrifters and resellers hero section - inherits from main rules */
  }
  
/* Thrifters page hero - video background (social-media-collage.mp4) */
.thrifters-page .hero-section {
  background: #000000 !important;
  background-image: none !important;
}

/* Hero overlays - uses primary/secondary/indigo palette */
.hero-section::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
              rgba(0, 255, 215, 0.45) 0%,
              rgba(0, 199, 169, 0.4) 100%);
  pointer-events: none;
  z-index: 0;
}

.hero-section::after{
  content: "";
  position: absolute;
  inset: 0;
  /* Desktop: strong white panel under hero copy on the left,
     fading softly into the background on the right */
  background: linear-gradient(
    to right,
    rgba(255,255,255,0.98) 0%,
    rgba(255,255,255,0.98) 42%,
    rgba(255,255,255,0.65) 58%,
    rgba(255,255,255,0.0) 100%
  );  
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 880px){
  .hero-section{ background-position: center center !important; }
  /* Hero art pinned to the top edge of the section on mobile (was `bottom`). */
  .home-page .hero-section{ background-position: right top, 0 0 !important; }
  .hero-section::after{
    background: linear-gradient(
      to top,
      rgba(255,255,255,0.97) 0%,
      rgba(255,255,255,0.65) 60%,
      rgba(255,255,255,0.0) 100%
    );
  }
  .hero-section {
  min-height: 0vh; /* full viewport */
}
}

@keyframes heroBlueFade{
  0%, 30% { opacity: 1; }
  70%, 100% { opacity: 00; }
}

@keyframes heroGreenFade{
  0%, 30% { opacity: 0; }
  70%, 100% { opacity: 1; }
}

.hero-grid{
  display:flex;
  gap:0px;
  align-items:center;
  justify-content:space-between;
  position: relative;
  z-index: 3;
  max-width:1080px;
}

/* Home page hero-grid uses default max-width from .hero-grid (1080px) */
.hero-copy {
  flex: 0 0 60%;
  z-index: 4;
}
/* Desktop hero copy spacing */
@media (min-width: 881px) {
  .hero-copy{ padding-right: clamp(16px, 6vw, 160px); }
  .hero-section .hero-copy {
    padding-right: clamp(4px, calc(6vw - 12px), 148px); /* Reduced by 12px */
  }
  .home-page .hero-grid {
    justify-content: flex-start;
    gap: 24px;
  }
  .home-page .hero-section .hero-copy {
    padding-right: 0;
    flex: 0 0 auto;
    max-width: 480px;
  }
  .home-page .hero-media {
    flex: 0 0 auto;
    margin-right: 0;
  }
}
.hero-copy{
  position: relative;
  isolation: isolate;
  z-index: 4;
}

/* Home hero: circle behind hero copy - hidden */
.home-page .hero-copy::before{
  display: none !important;
}

.home-page .hero-copy .hero-title,
.home-page .hero-copy .lead,
.home-page .hero-copy p,
.home-page .hero-copy .body-lg {
  color: var(--off-white) !important;
}
.home-page .hero-copy .hero-title .highlight {
  color: var(--secondary-color) !important;
}
.home-page .hero-copy .link-ghost {
  color: var(--secondary-color) !important;
}
.home-page .hero-copy .link-ghost:hover {
  color: #7BCBC0 !important;
}

.home-page .hero-section .btn-primary {
  color: var(--text-dark) !important;
  text-shadow: none !important;
}
.home-page .hero-section .btn-primary:hover {
  color: var(--text-dark) !important;
}

/* Thrifters page DESKTOP: Much larger hero phone */
@media (min-width: 881px) {
  .thrifters-page .hero-grid {
    max-width: 1200px;
    gap: 0;
  }
  
  .thrifters-page .thrifters-phone-bg {
    position: absolute;
    right: -100px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
  }
  
  .thrifters-page .thrifters-phone-bg .how-img {
    width: auto !important;
    max-width: none !important;
    height: auto;
    max-height: calc(100vh - 200px); /* Relative to viewport with padding space */
  }
}

@media (max-width: 880px){
  .hero-copy::before{
    left: -10%;
    opacity: 0.78;
    top: -6%;
    width: 120%;
    height: 120%;
    filter: blur(26px);
  }
  
}

.eyebrow{ font-family:var(--font-display); color:var(--text-medium); margin:0; font-weight:600; font-size:18px;}
.hero-title{
  font-family:var(--font-display);
  font-size: var(--font-size-hero);
  font-weight: 700;
  margin:10px 0 16px;
  line-height:1.2;
  color:var(--text-dark);
}
/* Tighten spacing between hero title and hero paragraph - applies globally */
.hero-title{ margin-bottom: 6px; }
.lead{ margin-top: 6px; }

.highlight{ color:var(--primary-color); }
.highlight-glow{ 
  color: var(--primary-color); 
  text-shadow: 
    0 0 8px rgba(56, 94, 245, 0.3),
    0 0 16px rgba(56, 94, 245, 0.2),
    0 0 24px rgba(56, 94, 245, 0.1);
  animation: glowPulse 1.5s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% {
    text-shadow: 
      0 0 8px rgba(56, 94, 245, 0.3),
      0 0 16px rgba(56, 94, 245, 0.2),
      0 0 24px rgba(56, 94, 245, 0.1);
  }
  50% {
    text-shadow: 
      0 0 12px rgba(56, 94, 245, 0.5),
      0 0 24px rgba(56, 94, 245, 0.35),
      0 0 36px rgba(56, 94, 245, 0.2);
  }
}

/* REMOVED: .header-offset class - hero sections now use --header-height variable */

.lead{ color: var(--off-white); font-size:1.06em; margin-bottom:18px; }

/* ---------- DISPLAY TYPOGRAPHY ---------- */
/* Large, bold impact type (Apple-style). Use on any element when you want big statement text.
   Distinct from h1-h4 which are for semantic structure. Future types (e.g. accented, alternate fonts)
   can be added here as .display-{type}-1 through .display-{type}-4 */

/* Base display (Poppins, bold) */
.display-1 {
  font-family: var(--font-display);
  font-size: var(--display-1);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  color: inherit;
}

.display-2 {
  font-family: var(--font-display);
  font-size: var(--display-2);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  color: inherit;
}

.display-3 {
  font-family: var(--font-display);
  font-size: var(--display-3);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  color: inherit;
}

.display-4 {
  font-family: var(--font-display);
  font-size: var(--display-4);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  color: inherit;
}

/* Serif display (Garamond) */
.display-serif-1 {
  font-family: var(--font-serif);
  font-size: var(--display-1);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  color: inherit;
}

.display-serif-2 {
  font-family: var(--font-serif);
  font-size: var(--display-2);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  color: inherit;
}

.display-serif-3 {
  font-family: var(--font-serif);
  font-size: var(--display-3);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  color: inherit;
}

.display-serif-4 {
  font-family: var(--font-serif);
  font-size: var(--display-4);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  color: inherit;
}

/* Handwritten display (Caveat) */
.display-handwritten-1 {
  font-family: var(--font-handwritten);
  font-size: var(--display-1);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin: 0;
  color: inherit;
}

.display-handwritten-2 {
  font-family: var(--font-handwritten);
  font-size: var(--display-2);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin: 0;
  color: inherit;
}

.display-handwritten-3 {
  font-family: var(--font-handwritten);
  font-size: var(--display-3);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  margin: 0;
  color: inherit;
}

.display-handwritten-4 {
  font-family: var(--font-handwritten);
  font-size: var(--display-4);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  margin: 0;
  color: inherit;
}

/* ---------- TYPOGRAPHY - HEADINGS ---------- */
/* Uses CSS variables for easy mobile scaling - edit :root to adjust */
h1 {
  font-family: var(--font-display);
  font-size: var(--font-size-h1);
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-dark);
  margin-bottom: 16px;
}

h2 {
  font-family: var(--font-display);
  font-size: var(--font-size-h2);
  font-weight: 600;
  line-height: 1.15;
  color: var(--text-dark);
  margin-bottom: 14px;
}

h3 {
  font-family: var(--font-display);
  font-size: var(--font-size-h3);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-dark);
  margin-bottom: 12px;
}

h4 {
  font-family: var(--font-display);
  font-size: var(--font-size-h4);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-dark);
  margin-bottom: 10px;
}

/* Body text base */
body {
  font-size: var(--font-size-body);
  line-height: 1.6;
}

h5 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-dark);
  margin-bottom: 8px;
}

h6 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-dark);
  margin-bottom: 6px;
}

/* Heading-to-body spacing: the heading's own margin-bottom (above) is the single
   source of truth. Without this, the browser default `p { margin: 1em 0 }` (20px at
   our body size) collapses with the heading's margin-bottom and the LARGER value
   wins — so headings always sat ~20px off their body copy instead of the 6-12px
   they specify. Article body copy (.blog-post-content p, .kb-article p) keeps its
   own rhythm: those class selectors outrank this one. */
h1 + p,
h2 + p,
h3 + p,
h4 + p,
h5 + p,
h6 + p {
  margin-top: 0;
}

/* hero media */
.hero-media {
  flex: 0 0 40%;
  display: flex;
  justify-content: center;   /* center horizontally */
  align-items: center;        /* center vertically within the div */
  z-index: 4;
  position: relative;
}
/* Phone entrance animation (reusable) */
.phone-mock{ --phone-end-transform: rotate(-8deg); }
@keyframes phoneEnter {
  0%   { transform: rotate(-24deg) translateY(10px); opacity: 0; }
  100% { transform: var(--phone-end-transform); }
}

@media (max-width: 880px){
  .hero-media {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: 24px !important;
    position: relative !important;
  }
  
  .phone-mock {
    display: block !important;
    width: 80% !important;
    max-width: 280px !important;
    height: auto !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 5 !important;
  }
}
.animate-phone{ animation: phoneEnter 900ms cubic-bezier(.2,.75,.2,1) 1 both; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .animate-phone{ animation: none !important; }
}
.phone-mock{
  width: 416px;           /* base size */
  max-width: 360px;        /* scale on large screens */
  height: auto;           /* keep aspect ratio */
  transform: rotate(-0deg);
  border-radius: 20px;
  opacity: 1;
  transition: opacity .4s ease;
  position: relative;
  z-index: 7;
}

.hero-media .phone-mock{
  margin-top: -190px;
}

.phone-mock.offscreen{ opacity: 0; }

/* ── Hero Process Terminal ── */
.hero-process-terminal{
  position: absolute;
  right: -80px;
  top: 50%;
  transform: translateY(40%);
  width: min(380px, 30vw);
  z-index: 8;
  background: rgba(13, 17, 23, 0.88);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 14px 28px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.04);
  overflow: hidden;
  pointer-events: none;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
}

.terminal-titlebar{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(22, 27, 34, 0.88);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Desktop client variant: title aligned top-right */
.hero-process-terminal--desktop .terminal-titlebar{
  justify-content: flex-end;
}
.hero-process-terminal--desktop .terminal-title{
  margin-left: 0;
}

/* Mobile/app variant (original): use hero-process-terminal--mobile + title "GlobalSKU" for dots-left layout */

.terminal-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.terminal-dot.red   { background: #ef4444; }
.terminal-dot.yellow{ background: #f59e0b; }
.terminal-dot.green { background: #22c55e; }

.terminal-title{
  margin-left: 8px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.45);
  letter-spacing: .3px;
}

.terminal-body{
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.terminal-step{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  transition: opacity .4s ease;
  opacity: .3;
}
.terminal-step.active,
.terminal-step.complete{
  opacity: 1;
}

.step-icon{
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.2);
  box-sizing: border-box;
  position: relative;
}

/* Spinner state */
.terminal-step.active .step-icon{
  border-color: transparent;
  border-top-color: #60a5fa;
  animation: termSpin .7s linear infinite;
}

@keyframes termSpin{
  to{ transform: rotate(360deg); }
}

/* Complete state — green check */
.terminal-step.complete .step-icon{
  border-color: #22c55e;
  background: #22c55e;
}
.terminal-step.complete .step-icon::after{
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #111827;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.step-text{
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,.85);
}
.terminal-step:not(.active):not(.complete) .step-text{
  color: rgba(255,255,255,.35);
}
.terminal-step.complete .step-text{
  color: #86efac;
}

/* Mobile terminal adjustments */
@media (max-width: 880px){
  .hero-process-terminal{
    position: absolute !important;
    left: 55% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 60% !important;
    max-width: 260px !important;
    z-index: 15 !important;
  }
  .terminal-body{ padding: 10px 10px; gap: 10px; }
  .step-text{ font-size: 10px; }
  .terminal-titlebar{ padding: 7px 10px; }
  .terminal-dot{ width: 8px; height: 8px; }
  .terminal-title{ font-size: 9px; }
  .step-icon{ width: 14px; height: 14px; }
  .terminal-step.complete .step-icon::after{
    left: 3px;
    top: 0px;
    width: 4px;
    height: 7px;
  }
}

@media (prefers-reduced-motion: reduce){
  .terminal-step.active .step-icon{ animation: none !important; }
}

/* Thrifters info-2: terminal in light mode, teal menu bar, bottom-right overlapping graphic */
/* Thrifters info-2: swap columns (text right, graphic left), reduce gap */
.thrifters-page #info-2 .info-inner {
  flex-direction: row-reverse;
  gap: 12px;
}

.thrifters-page .how-media--thrifters-info-2 {
  position: relative;
}
.thrifters-page .how-media--thrifters-info-2 .img-carousel {
  margin-left: 96px;
}
.thrifters-page .hero-process-terminal--thrifters-light {
  position: absolute !important;
  bottom: -8%;
  left: 0;
  right: auto !important;
  top: auto !important;
  transform: translateX(-88px);
  width: min(320px, 85%);
  z-index: 10;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.thrifters-page .hero-process-terminal--thrifters-light .terminal-titlebar {
  background: var(--primary-color);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  justify-content: flex-start;
}
.thrifters-page .hero-process-terminal--thrifters-light .terminal-title {
  color: #ffffff;
  font-weight: 600;
  font-size: 15px;
  margin-left: 8px;
}
.thrifters-page .hero-process-terminal--thrifters-light .terminal-body {
  background: #f8fafc;
}
.thrifters-page .hero-process-terminal--thrifters-light .step-text {
  color: var(--text-dark);
}
.thrifters-page .hero-process-terminal--thrifters-light .terminal-step:not(.active):not(.complete) .step-text {
  color: rgba(0, 0, 0, 0.4);
}
.thrifters-page .hero-process-terminal--thrifters-light .terminal-step.complete .step-text {
  color: #15803d;
}
.thrifters-page .hero-process-terminal--thrifters-light .terminal-step.active .step-icon {
  border-top-color: var(--primary-color);
}
.thrifters-page .hero-process-terminal--thrifters-light .terminal-step .step-icon {
  border-color: rgba(0, 0, 0, 0.2);
}
.thrifters-page .hero-process-terminal--thrifters-light .terminal-step.complete .step-icon::after {
  border-color: #ffffff;
}

/* Desktop: Scanning Listings box further left over the slideshow; slideshow slightly left */
@media (min-width: 881px) {
  .thrifters-page .how-media--thrifters-info-2 .img-carousel {
    margin-left: 64px;
  }
  .thrifters-page .hero-process-terminal--thrifters-light {
    left: 0 !important;
    right: auto !important;
    bottom: -6% !important;
    transform: translateX(-108px) !important;
  }
}

@media (max-width: 880px) {
  .thrifters-page .hero-process-terminal--thrifters-light {
    width: min(260px, 75%) !important;
    bottom: -4% !important;
    left: 0 !important;
    right: auto !important;
    transform: translateX(-132px) !important;
  }
  .thrifters-page .hero-process-terminal--thrifters-light .terminal-title {
    font-size: 13px;
  }

  /* How sections: clip-path “wipe” often fails on iOS Safari and leaves copy invisible.
     Opacity-only reveal is handled in thrifters.html Motion script; this ensures no stray clip. */
  .thrifters-page .info-section .info-text {
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }

  /* Thrifters #info-2: desktop uses row-reverse; that rule beats info-sections’ mobile
     `.info-inner { flex-direction: column }` (higher specificity), so the row stayed
     horizontal on small screens and the text column disappeared/clipped. Force stack. */
  .thrifters-page #info-2 .info-inner {
    flex-direction: column !important;
    align-items: center;
    gap: 36px;
  }
  /* Pull slideshow + terminal up; add air before the h3 below */
  .thrifters-page #info-2 .how-media--thrifters-info-2 {
    margin-top: -8px;
    transform: translateY(-20px);
  }
  .thrifters-page .how-media--thrifters-info-2 .img-carousel {
    margin-left: 0;
  }
  .thrifters-page #info-2 .how-media {
    order: 1;
    width: 100%;
    max-width: 100%;
  }
  .thrifters-page #info-2 .info-text {
    order: 2;
  }
}

@media (max-width: 880px) {
  /* Index.html phone sizing on mobile */
  .phone-mock{ 
    max-width: 27vw;
    width: 122px;
    --phone-end-transform: rotate(0deg); 
    transform: var(--phone-end-transform); 
  }

  /* Mobile: show hero image above the copy */
  .hero-media{ order: -1; margin-top:-16px; padding-top:0px;}
  
  /* Ensure hero section doesn't clip marketplace icons */
  .hero-section {
    overflow: visible !important;
    padding-bottom: 20px !important;
    padding-top: calc(24px + var(--header-height)) !important; /* Content padding + header clearance */
  }
  
  /* Hero marketplaces - ensure visible and not clipped */
  .hero-marketplaces {
    position: relative;
    z-index: 5;
    padding-bottom: 10px;
  }
  
  /* Index/Home page hero - fit to content, no internal scrolling */
  .home-page .hero-section {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-items: flex-start !important;
    padding-top: calc(8px + var(--header-height)) !important;
    padding-bottom: 40px !important;
    overflow: visible !important;
  }
  
  .home-page .hero-grid {
    padding: 0 16px !important;
    margin: 0 !important;
    gap: 0 !important;
    overflow: visible !important;
  }

  .home-page .hero-copy {
    flex: 1 1 auto !important;
    position: relative !important;
    z-index: 15 !important;
  }
  
  .home-page .hero-media {
    flex: 0 0 auto !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: -20px !important;
    padding: 0 !important;
    order: -1 !important;
    position: relative !important;
    z-index: 5 !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
  }
  
  .home-page .phone-mock {
    margin: 0 !important;
    max-width: 55vw !important;
    width: 220px !important;
    position: relative !important;
    z-index: 6 !important;
    transform: rotate(-6deg) !important;
    --phone-end-transform: rotate(-6deg) !important;
  }

  /* Home hero: mobile variant - terminal scaled to match phone */
  .home-page .hero-process-terminal {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: translateY(20%) !important;
    width: min(200px, 42vw) !important;
    max-width: 200px !important;
    flex-shrink: 0 !important;
    z-index: 4 !important;
    /* Tucked further under the phone (was -52px). .hero-media is a centered flex
       row, so tightening the overlap also narrows the pair and keeps it centered. */
    margin-left: -72px !important;
  }
  .home-page .hero-process-terminal .terminal-body {
    padding: 7px 9px !important;
    gap: 6px !important;
  }
  .home-page .hero-process-terminal .terminal-titlebar {
    padding: 5px 9px !important;
  }
  .home-page .hero-process-terminal .terminal-title {
    font-size: 9px !important;
  }
  .home-page .hero-process-terminal .terminal-dot {
    width: 6px !important;
    height: 6px !important;
  }
  .home-page .hero-process-terminal .step-text {
    font-size: 9px !important;
  }
  .home-page .hero-process-terminal .terminal-step {
    gap: 6px !important;
  }
  .home-page .hero-process-terminal .step-icon {
    width: 11px !important;
    height: 11px !important;
  }
  .home-page .hero-process-terminal .terminal-step.complete .step-icon::after {
    left: 2px !important;
    top: 0 !important;
    width: 4px !important;
    height: 6px !important;
  }
  
  /* Home hero: center app store badges on mobile */
  .home-page .hero-copy .hero-appstore-badge-row {
    justify-content: center !important;
    margin-top: 12px !important;
  }
  .home-page .hero-copy .hero-appstore-badge-row .app-store-icon,
  .home-page .hero-copy .hero-appstore-badge-row img {
    height: 40px !important;
    width: auto !important;
  }
  
  /* Home hero: compact card on mobile */
  .home-page .hero-copy {
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 16px;
    padding: 12px 16px 16px 16px !important;
    box-sizing: border-box;
  }
  .home-page .hero-copy .hero-title {
    font-size: 28px !important;
    line-height: 1.15 !important;
    margin-bottom: 4px !important;
  }
  .home-page .hero-copy .lead,
  .home-page .hero-copy .lead.body-lg {
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
  }
  .home-page .hero-copy .hero-actions {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    gap: 12px !important;
  }
  .home-page .hero-copy .hero-actions .btn {
    padding: 10px 20px !important;
    font-size: 14px !important;
  }

  /* Home hero: hide capsule marketplace logos, show app icons on mobile */
  .home-page .hero-copy .hero-marketplaces {
    display: none !important;
  }
  .home-page .hero-copy .hero-marketplaces-mobile {
    display: flex !important;
    gap: 10px;
    align-items: center;
    margin-top: 14px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .home-page .hero-copy .hero-marketplaces-mobile img {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain;
  }
  
  /* Home hero: circle bg behind hero copy - 50% opacity on mobile */
  .home-page .hero-copy::before {
    display: block !important;
    content: "";
    position: absolute;
    left: -10%;
    top: -6%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle at center, rgba(255,255,255,0.4) 0%, transparent 60%);
    filter: blur(26px);
    opacity: 0.5 !important;
    z-index: -1;
    pointer-events: none;
  }
}

/* Small phone hero compact overrides */
@media (max-width: 480px) {
  .home-page .phone-mock {
    max-width: 36vw !important;
    width: 130px !important;
  }
  .home-page .hero-process-terminal {
    width: min(130px, 28vw) !important;
    max-width: 130px !important;
    margin-left: -30px !important;
  }
  .home-page .hero-copy .hero-title {
    font-size: 24px !important;
  }
  .home-page .hero-copy .lead,
  .home-page .hero-copy .lead.body-lg {
    font-size: 13px !important;
  }
  .home-page .hero-copy {
    padding: 10px 12px 14px 12px !important;
  }
  .home-page .hero-copy .hero-appstore-badge-row .app-store-icon,
  .home-page .hero-copy .hero-appstore-badge-row img {
    height: 34px !important;
  }
  .home-page .hero-copy .hero-marketplaces-mobile img {
    width: 24px !important;
    height: 24px !important;
  }
}

/* ---------- SECTIONS ---------- */

.home-page #how-2 .info-box {
  background: #ffffff;
  border-radius: 14px;
  padding: 12px 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  margin-top: 14px;
  margin-bottom: 16px;
}

.home-page #how-2 .info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.home-page #how-2 .info-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 0.95em; /* Match the shared .info-list li size */
  color: var(--text-dark);
  line-height: 1.5;
}

.home-page #how-2 .info-list li::before {
  content: "";
  width: 22px;
  min-width: 22px;
  height: 22px;
  min-height: 22px;
  background-image: url('images/icon-checkcircle.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- SPEED COMPARISON SECTION ---------- */
.section--speed-comparison{
  /* Symmetric vertical room — one value drives both edges. */
  padding: 176px 0;
  /* Flat dark green — no gradient, no imagery. The felt texture below is the
     only thing breaking up the field. */
  background: var(--green-2);
  position: relative;
  overflow: hidden;
  /* Contain the texture layers' mix-blend-mode to this section, so they
     composite against the green background here and never against the page
     behind it. */
  isolation: isolate;
}

/* SURFACE TEXTURE — a very soft edge falloff so the field reads as a lit panel
   rather than a flat fill. Deliberately no turbulence on this layer: the
   low-frequency noise that used to live here produced large soft blobs that read
   as clouds, not fabric. */
.section--speed-comparison::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(ellipse 130% 110% at 50% 50%,
    rgba(0,0,0,0) 55%,
    rgba(0,0,0,0.22) 100%);
}

/* Fine, even fibre grain. numOctaves='1' is the important part — each extra
   octave folds in a lower-frequency pass, and those coarse passes are exactly
   what clumps into cloudiness. A single octave at high frequency stays uniform
   across the whole field, which is what a matted surface actually looks like. */
.section--speed-comparison::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23f)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 160px 160px;
  opacity: 0.18;
  mix-blend-mode: overlay;
}

/* CIRCUIT BACKDROP + SCANNING LIGHT
   The svg is applied ONCE, as a mask on this container. Everything inside is
   therefore clipped to the circuit traces, which means the two light layers can
   be plain colour and gradient — no second copy of the artwork to fetch, decode,
   or keep in sync.
   There is no base layer: the traces are invisible until the beam reaches them,
   so the grid only exists where the light currently is.
   The band is moved with `transform`, not `background-position`, so the mask is
   rasterised once and the browser only recomposites one layer per frame. */
.section--speed-comparison .speed-icon-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;

  mask-image: url('images/tech-vector-bg.svg');
  mask-size: cover;
  mask-position: center center;
  mask-repeat: no-repeat;
  -webkit-mask-image: url('images/tech-vector-bg.svg');
  -webkit-mask-size: cover;
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
}

/* The travelling beam — the only light in here, so it is also the only thing
   that makes the circuit visible at all.
   Wide (85% of the section) with many gradient stops: the long, gradually
   ramping falloff on both sides is what keeps the leading and trailing edges
   from reading as hard lines. The bright core is a small part of the whole. */
.section--speed-comparison .speed-icon-bg::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 85%;
  background-image: linear-gradient(100deg,
    rgba(153, 246, 228, 0)    0%,
    rgba(153, 246, 228, 0.03) 12%,
    rgba(153, 246, 228, 0.10) 24%,
    rgba(153, 246, 228, 0.22) 34%,
    rgba(153, 246, 228, 0.42) 43%,
    rgba(204, 251, 241, 0.95) 50%,
    rgba(153, 246, 228, 0.42) 57%,
    rgba(153, 246, 228, 0.22) 66%,
    rgba(153, 246, 228, 0.10) 76%,
    rgba(153, 246, 228, 0.03) 88%,
    rgba(153, 246, 228, 0)    100%);
  will-change: transform;
  animation: speedScanSweep 9s linear infinite;
}

/* translateX percentages resolve against the element's OWN width (85% of the
   container), so -100% parks it just off the left edge and 118% carries its left
   edge past the right one (100 / 85 * 100). */
@keyframes speedScanSweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(118%); }
}

/* No travelling beam — the circuit would never appear at all, so light it
   evenly and leave it there. */
@media (prefers-reduced-motion: reduce) {
  .section--speed-comparison .speed-icon-bg::after {
    animation: none;
    width: 100%;
    background-image: none;
    background-color: rgba(153, 246, 228, 0.2);
  }
}
.section--speed-comparison .container { position: relative; z-index: 1; }
.section--speed-comparison .section-title{
  color: #ffffff;
  text-align: center;
  /* Standard section-title face (Poppins), matching the rest of the site's
     headings rather than the linotype-sabon serif this used to carry. */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--font-size-hero) * 1.6);
  /* Heavy shadow so the copy lifts hard off the flat green. */
  text-shadow: 0 18px 40px rgba(0,0,0,0.65), 0 4px 10px rgba(0,0,0,0.5);
}
.section--speed-comparison .section-sub{
  color: rgba(255,255,255,0.65);
  text-align: center;
  font-size: 1.25rem;
  margin-bottom: 56px;
  text-shadow: 0 10px 26px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.45);
}
.speed-chart-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
  min-height: auto;
}
.speed-chart-card{
  background: rgb(20,28,42);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 28px 24px 20px;
  /* Heavy, layered drop shadow — the cards should sit well above the flat field. */
  box-shadow:
    0 40px 80px -20px rgba(0,0,0,0.8),
    0 24px 44px -24px rgba(0,0,0,0.7),
    0 6px 14px rgba(0,0,0,0.45);
}
.speed-chart-label{
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 16px;
  text-align: center;
  text-shadow: 0 6px 16px rgba(0,0,0,0.6);
}
.speed-chart-card canvas{
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 880px){
  .section--speed-comparison{ padding: 112px 0; } /* symmetric, scaled down from desktop's 176px */
  .section--speed-comparison .section-title{ font-size: calc(var(--font-size-hero) * 1.15); }
  .section--speed-comparison .section-sub{ font-size: 1em; margin-bottom: 36px; }
  .speed-chart-grid{
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 480px;
  }
}

/* ---------- SHOWCASE SECTION (above pricing) ---------- */
.section--showcase{
  padding: 120px 0;
  position: relative;
}

.showcase-inner{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
}

/* 3D Orbit scene */
.orbit-scene{
  position: relative;
  width: min(760px, 100%);
  min-height: 520px;
  display: grid;
  place-items: center;
  perspective: 900px;
  perspective-origin: 50% 45%;
  overflow: visible;
}

.orbit-phone{
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 48px;
}

.showcase-phone{
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: 20px;
  box-shadow: var(--card-shadow);
}

/* The ring itself (tilted for “3D”) */
.orbit-ring{
  position: absolute;
  inset: 0;
  z-index: 1;
  transform-style: preserve-3d;
  transform: rotateX(66deg) rotateZ(12deg);
  will-change: transform;
  animation: orbitSpin 18s linear infinite;
}

/* Place icons evenly around a circle in 3D space */
.orbit-icon{
  position: absolute;
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;

  /* sizing */
  width: 64px;
  height: 64px;

  /* circle math */
  --radius: 260px;
  --angle: calc((360deg / var(--count)) * var(--i));

  /* place around ring + face camera */
  transform:
    translate(-50%, -50%)
    rotateY(var(--angle))
    translateZ(var(--radius))
    rotateY(calc(-1 * var(--angle)))
    rotateX(-66deg)
    rotateZ(-12deg);

  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(34,40,52,0.10);
}

.orbit-icon img{
  width: 70%;
  height: 70%;
  object-fit: contain;
  display: block;
}

/* Slow constant rotation */
@keyframes orbitSpin{
  from { transform: rotateX(66deg) rotateZ(12deg) rotateY(0deg); }
  to   { transform: rotateX(66deg) rotateZ(12deg) rotateY(360deg); }
}

/* Pre-hide for Motion entrance (prevents “flash then hide”) */
.prehide-showcase .orbit-icon,
.prehide-showcase .showcase-phone{
  opacity: 0;
  transform: translateY(10px) scale(0.98);
}

/* Reduced motion: no rotation, no entrance hiding */
@media (prefers-reduced-motion: reduce){
  .orbit-ring{ animation: none !important; }
  html.js-animate .prehide-showcase .orbit-icon,
html.js-animate .prehide-showcase .showcase-phone{
  opacity: 0;
  transform: translateY(10px) scale(0.98);
}
}

/* Mobile adjustments */
@media (max-width: 880px){
  .section--showcase{ padding: 88px 0; }
  .orbit-scene{
    min-height: 520px;
    perspective: 760px;
  }
  .orbit-phone{ padding: 28px; }
  .showcase-phone{ max-width: 300px; }
  .orbit-icon{
    width: 52px;
    height: 52px;
    --radius: 190px;
  }
}
.section{
  padding:60px 0;
}
.section-heading{ text-align:center; margin-bottom:28px; }

/* Full-width image section — gradient reversed from user-categories (secondary → white) */
.section--full-image{
  padding: 0;
  margin: 0;
  width: 100%;
  display: block;
  background: linear-gradient(to bottom, var(--secondary-color), #FFFFFF);
}

/* Users page: gradient from above section (user-categories) to testimonials */
.users-page .section--full-image{
  background: linear-gradient(to bottom, #1D2639, #00455c);
}
.full-width-image{
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}
.section-title{ font-family:var(--font-display); font-size: var(--font-size-h2); font-weight: 400; margin:0 0 8px;}
.section-sub{ color:var(--text-medium); margin:0 0 28px; }

/* Follow Us Section - matches info-section structure and styling */
.follow-us {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 600px;
  padding: 60px 0;
  background: 
    radial-gradient(ellipse 120% 80% at 20% 20%, rgba(0, 255, 215, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 100% 60% at 80% 80%, rgba(56, 93, 245, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #f8fafc 100%);
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

/* Home page follow-us section - primary blue background with white text */
.home-page .follow-us {
  background: var(--primary-color) !important;
}

.home-page .follow-us .info-text h3,
.home-page .follow-us .info-text p {
  color: #FFFFFF !important;
}

/* Home follow-us: same video as thrifters hero, over primary fallback */
.home-page .follow-us .follow-us-video-bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.home-page .follow-us .follow-us-video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  display: block;
  opacity: 0.66;
}

/* Product page follow-us section - teal background */
.product-page .follow-us {
  background: #00C4A7 !important;
}

/* Animated background layer - moving SVG parts */
.follow-us-anim-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Vignette over the section background (video / animated art) */
.follow-us::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 75% 75% at 50% 50%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.45) 75%, rgba(0, 0, 0, 0.75) 100%);
}

.follow-us .info-inner {
  position: relative;
  z-index: 2;
}

.follow-us-anim-bg .anim-part {
  position: absolute;
  top: 50%;
  max-height: 100%;
  height: 100%;
  width: auto;
  object-fit: contain;
  will-change: transform;
}

.follow-us-anim-bg .anim-part-1 { left: 2%; animation: animMoveLeft 10s ease-in-out infinite; }
.follow-us-anim-bg .anim-part-2 { left: 12%; animation: animMoveRight 18s ease-in-out infinite; }
.follow-us-anim-bg .anim-part-3 { left: 32%; animation: animMoveLeft 12s ease-in-out infinite; }
.follow-us-anim-bg .anim-part-4 { left: 52%; animation: animMoveRight 20s ease-in-out infinite; }
.follow-us-anim-bg .anim-part-5 { left: 72%; animation: animMoveLeft 14s ease-in-out infinite; }
.follow-us-anim-bg .anim-part-6 { left: 88%; animation: animMoveRight 16s ease-in-out infinite; }

@keyframes animMoveLeft {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50% { transform: translateY(-50%) translateX(-140px); }
}

@keyframes animMoveRight {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50% { transform: translateY(-50%) translateX(140px); }
}

/* Arrow pointing at social media content */
.follow-us-arrow {
  position: absolute;
  right: calc(50% - var(--max-width) / 2 - 24px);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dark);
  opacity: 0;
  z-index: 10;
  pointer-events: none;
}

@media (max-width: 1200px) {
  .follow-us-arrow {
    right: 24px;
  }
}

/* Use same info-inner and info-text styles from info-sections.css */
.follow-us .info-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  box-sizing: border-box;
}

.follow-us .info-text {
  flex: 0 0 56%;
  max-width: 56%;
  padding: 24px 80px 24px 32px; /* right: space for arrow */
  background: #0E1319; /* solid — no backdrop blur */
  border-radius: 12px;
}

/* Match hero-title styling */
.follow-us .info-text h3 {
  font-family: var(--font-display);
  font-size: var(--font-size-hero);
  margin: 10px 0 6px 0;
  line-height: 1.2;
  color: #FFFFFF;
  font-weight: 700;
}

.follow-us .info-text p {
  margin-top: 0;
  font-size: 1.3rem;
  line-height: 1.65;
  color: #FFFFFF;
}

/* Social buttons: 3 equal-width rectangles filling the container */
.follow-us .social-media-icons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
  margin-top: 28px;
}

.follow-us .social-media-icons a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 100%),
    #161C24;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 18px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  animation: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Accent bar along the bottom of each tile */
.follow-us .social-media-icons a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--primary-color);
}

/* Per-network brand colors for the accent bar + hover glow */
.follow-us .social-media-icons a[href*="facebook"]::after {
  background: #1877F2;
}

.follow-us .social-media-icons a[href*="instagram"]::after {
  background: linear-gradient(90deg, #405DE6 0%, #833AB4 25%, #C13584 50%, #FD1D1D 75%, #FCAF45 100%);
}

.follow-us .social-media-icons a[href*="tiktok"]::after {
  background: linear-gradient(90deg, #25F4EE 0%, #25F4EE 45%, #FE2C55 55%, #FE2C55 100%);
}

/* Hover is glow only — no lift, no scale. */
.follow-us .social-media-icons a:hover {
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 12px 26px rgba(0, 0, 0, 0.45);
}

.follow-us .social-media-icons a[href*="facebook"]:hover {
  border-color: rgba(24, 119, 242, 0.75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 12px 26px rgba(0, 0, 0, 0.45), 0 0 22px rgba(24, 119, 242, 0.35);
}

.follow-us .social-media-icons a[href*="instagram"]:hover {
  border-color: rgba(193, 53, 132, 0.75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 12px 26px rgba(0, 0, 0, 0.45), 0 0 22px rgba(193, 53, 132, 0.35);
}

.follow-us .social-media-icons a[href*="tiktok"]:hover {
  border-color: rgba(254, 44, 85, 0.75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 12px 26px rgba(0, 0, 0, 0.45), 0 0 22px rgba(37, 244, 238, 0.35);
}

.follow-us .social-media-icons a:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 3px;
}

.follow-us .social-media-icons a img {
  height: 40px !important;
  width: auto !important;
  max-width: 100% !important;
  filter: none;
}

@media (max-width: 880px) {
  .follow-us {
    min-height: 420px;
    padding: 64px 0;
  }
  
  .follow-us .info-inner {
    flex-direction: column;
    align-items: center;
    text-align: left;
    gap: 24px;
    padding: 0 var(--container-padding);
  }
  
  .follow-us .info-text {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    order: 2;
    text-align: left;
    padding: 24px var(--container-padding);
  }
  
  .follow-us .info-text h3 {
    margin: 0 0 8px 0;
  }
  
  .follow-us .info-text p {
    margin-top: 0;
    font-size: 1em;
  }

  .follow-us .social-media-icons {
    gap: 10px;
    margin-top: 20px;
  }

  .follow-us .social-media-icons a {
    min-height: 60px;
    padding: 12px;
  }

  .follow-us .social-media-icons a img {
    height: 30px !important;
  }

  .follow-us-arrow {
    display: none;
  }
}

/* Mobile: reduce space below subtitle in how-header section */
@media (max-width: 880px) {
  .section--how-header .section-sub {
    margin-bottom: 8px !important;
  }
  
  .section--how-header {
    padding-bottom: 12px !important;
    margin-top: -32px !important; /* Reduced overlap on mobile to not cover hero icons */
    padding-top: 48px !important;
  }
}

/* ---------- HOW IT WORKS (header + row sections) ---------- */
/* ---------- HOW IT WORKS – FEATURE LIST ---------- */
.how-feature-box{
  background: #ffffff;
  border-radius: 14px;
  padding: 10px 16px 12px 16px;
  box-shadow: var(--card-shadow);
  margin-top: 14px;
  margin-bottom:16px;
}

.how-feature-list{
  list-style: none;
  padding: 0;
  margin: 0;
}

.how-feature-list li{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 0.9em;
  color: var(--text-dark);
}

.how-feature-list li::before{
  content: "";
  width: 18px;
  height: 18px;
  background-image: url('images/icon-checkcircle.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
}

/* Reusable warning box style - red exclamation with dark red text */
.warning-box {
  background: #FFF5F5; /* Very light red tint - UX-friendly warning color */
  border-radius: 14px;
  padding: 10px 16px 12px 16px;
  box-shadow: var(--card-shadow);
  margin-top: 14px;
  margin-bottom: 16px;
}

.warning-box .how-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.warning-box .how-feature-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 0.9em;
  color: #8B0000; /* Dark red text */
}

.warning-box .how-feature-list li::before {
  content: "!";
  width: 18px;
  height: 18px;
  background: #DC3545;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: bold;
  flex: 0 0 18px;
}

/* ---------- FEATURE BOX & LIST (standalone, not tied to how sections) ---------- */
.feature-box {
  background: #ffffff;
  border-radius: 14px;
  padding: 10px 16px 12px 16px;
  box-shadow: var(--card-shadow);
  margin-top: 14px;
  margin-bottom: 16px;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 0.9em;
  color: var(--text-dark);
}

.feature-list li::before {
  content: "";
  width: 18px;
  height: 18px;
  background-image: url('images/icon-checkcircle.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
}

/* Warning box with feature-list (red exclamation with dark red text) */
.warning-box .feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.warning-box .feature-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 0.9em;
  color: #8B0000; /* Dark red text */
}

.warning-box .feature-list li::before {
  content: "!";
  width: 18px;
  height: 18px;
  background: #DC3545;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: bold;
  flex: 0 0 18px;
}

/* Mobile: smaller feature-list items */
@media (max-width: 880px) {
  .feature-list li {
    font-size: 0.9em;
    line-height: 1.35;
    padding: 6px;
  }
}

  .section--how-header{
    /* Default background - teal gradient (used by thrifters, resellers, users) */
    --how-header-bg: linear-gradient(360deg, #00455c 0%, #003040 100%);
    background: var(--how-header-bg);

    /* Pull the header up so the hero can be seen through the curve */
    margin-top: -64px;

    /* Extra room so the curve doesn't crowd the text */
    padding-top: 60px;
    padding-bottom: 20px;

    position: relative;
    z-index: 5;                  /* keep the entire bar above decorative elements */
    overflow: hidden;            /* needed for the masked curved edge */


    /* Real curved cutout (concave) so the hero shows behind it */
    clip-path: url(#howCurve);
-webkit-clip-path: url(#howCurve);
  }

  /* ===========================================
     PAGE-SPECIFIC SECTION HEADER BACKGROUNDS
     Override --how-header-bg for each page
     =========================================== */
  
  /* Home page (index.html) - theme-appropriate green gradient */
  .home-page .section--how-header {
    --how-header-bg: linear-gradient(360deg, var(--green-4) 0%, var(--green-2) 100%);
  }
  .home-page .section--how-header .section-title {
    font-weight: 700;
  }
  
  /* Product page - black with teal glow at top (reflecting hero light) */
  /* Uses radial gradient to follow the elliptical curve of the clip-path */
  .product-page .section--how-header {
    --how-header-bg: 
      radial-gradient(
        ellipse 80% 60% at 50% 0%,
        rgba(82, 184, 170, 0.7) 0%,
        rgba(82, 184, 170, 0.35) 40%,
        transparent 70%
      ),
      linear-gradient(180deg, #0a0a0a 0%, #0a0a0a 100%);
  }
  
  /* Thrifters page - purple accent */
  .thrifters-page .section--how-header {
    --how-header-bg: linear-gradient(360deg, #5B2A86 0%, #341A4F 100%);
  }
  
  /* Resellers page - default teal (same as index) */
  .resellers-page .section--how-header {
    --how-header-bg: linear-gradient(360deg, #00455c 0%, #003040 100%);
  }
  
  /* Businesses page - desaturated gray */
  .businesses-page .section--how-header {
    --how-header-bg: linear-gradient(360deg, #5a5a5a 0%, #3a3a3a 100%);
  }
  .businesses-page .section--how-header .section-title,
  .businesses-page .section--how-header .section-sub {
    color: rgba(255, 255, 255, 0.9) !important;
  }
  
  /* Users page - default teal (same as index) */
  .users-page .section--how-header {
    --how-header-bg: linear-gradient(360deg, #00455c 0%, #003040 100%);
  }

  /* Adjust features header section when viewport height is reduced (desktop only) */
  @media (min-width: 881px) and (max-height: 900px) {
    .product-page .section--how-header {
      padding-top: 60px !important;
      padding-bottom: 16px !important;
      margin-top: -48px !important; /* Less overlap */
    }
    
    .product-page .section--how-header .section-title {
      font-size: 2.25rem !important; /* Slightly smaller title */
    }
    
    .product-page .section--how-header .section-sub {
      font-size: 0.95em !important; /* Slightly smaller subtitle */
      margin-bottom: 16px !important;
    }
    
    .product-hero-copy {
      margin-top: 60px !important; /* Reduced margin when height is constrained */
      padding: 24px 40px 48px 40px !important; /* Maintain bottom padding for gap below CTA */
    }
    
    .product-page .hero-grid {
      padding-top: 24px !important; /* Reduced padding */
    }
    
    /* Big feature box - constrain height and use regular body font */
    .product-page #feature-content {
      max-height: 55vh !important;
      height: auto !important;
      min-height: 0 !important;
      padding: 24px 28px !important;
    }
    .product-page #feature-content .feature-description {
      font-size: 1em !important;
      line-height: 1.5 !important;
    }
    /* Equal gaps; icon same size as small feature boxes (48px) in vh mode */
    .product-page #feature-content .feature-content-text .feature-icon {
      width: 48px !important;
      height: 48px !important;
      margin-top: 0 !important;
      margin-bottom: 6px !important;
    }
    .product-page #feature-content .feature-content-text .feature-title,
    .product-page #feature-content .feature-content-text .feature-description {
      margin-top: 0 !important;
      margin-bottom: 6px !important;
    }
    .product-page #feature-content .feature-marketplaces {
      margin-top: 10px !important;
    }
    .product-page #feature-content .feature-marketplaces p {
      margin-bottom: 8px !important;
    }
    .product-page #feature-content .feature-content-graphics {
      min-height: 0 !important;
    }
    /* Match product hero pattern: explicit vh constraints so images scale with viewport */
    .product-page #feature-content .feature-content-graphics img {
      max-width: min(45vw, 42vh) !important;
      max-height: 42vh !important;
      width: auto !important;
      height: auto !important;
      object-fit: contain !important;
    }
    /* Smaller marketplace icons in Multi-List box to prevent left container clipping */
    .product-page #feature-content .how-marketplaces img {
      width: 32px !important;
      height: 32px !important;
    }
    .product-page #feature-content .how-marketplaces {
      gap: 8px !important;
      margin-top: 12px !important;
    }
  }
  
  @media (min-width: 881px) and (max-height: 750px) {
    .product-page .section--how-header {
      padding-top: 48px !important;
      padding-bottom: 12px !important;
      margin-top: -40px !important;
    }
    
    .product-page .section--how-header .section-title {
      font-size: 2rem !important;
    }
    
    .product-hero-copy {
      margin-top: 40px !important;
      padding: 20px 32px 48px 32px !important; /* Maintain bottom padding for gap below CTA */
    }
    
    .product-page .hero-grid {
      padding-top: 16px !important;
    }
    
    /* Big feature box - even tighter for very short viewports */
    .product-page #feature-content {
      max-height: 50vh !important;
      padding: 20px 24px !important;
    }
    /* Equal gaps; icon 48px (match small feature boxes) */
    .product-page #feature-content .feature-content-text .feature-icon {
      width: 48px !important;
      height: 48px !important;
      margin-top: 0 !important;
      margin-bottom: 4px !important;
    }
    .product-page #feature-content .feature-content-text .feature-title,
    .product-page #feature-content .feature-content-text .feature-description {
      margin-top: 0 !important;
      margin-bottom: 4px !important;
    }
    .product-page #feature-content .feature-marketplaces {
      margin-top: 8px !important;
    }
    .product-page #feature-content .feature-marketplaces p {
      margin-bottom: 6px !important;
    }
    /* Images scale with viewport - same vh method as product hero */
    .product-page #feature-content .feature-content-graphics img {
      max-width: min(45vw, 36vh) !important;
      max-height: 36vh !important;
    }
    /* Even smaller marketplace icons for very short viewports */
    .product-page #feature-content .how-marketplaces img {
      width: 28px !important;
      height: 28px !important;
    }
    .product-page #feature-content .how-marketplaces {
      gap: 6px !important;
      margin-top: 10px !important;
    }
  }

  /* Add background overlay to product page feature section title */
  .product-page .section--how-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* 50% opacity black overlay to darken the gradient */
    pointer-events: none;
    z-index: 1;
  }

  /* Ensure the How it Works text stays above everything in this section */
  .section--how-header .section-heading{
    padding-bottom: 0;
    position: relative;
    z-index: 6;
  }


/* How It Works scroll-driven styles moved to how-it-works.css */

/* How it Works sections - smooth transitions handled by JavaScript (fallback) */
.how-row{
  height: 75vh;                 /* 25% reduced from 100vh */
  min-height: 75vh;             /* fallback */
  display: flex;  
  align-items: center;           /* center vertically */
  background-image: url('images/howitworks-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow-x: clip;              /* prevents right-scroll caused by animated/transformed overlays */
  box-sizing: border-box;
}

/* White background for features sections on product, thrifters, resellers, and businesses pages */
.product-page .how-row,
.thrifters-page .how-row,
.resellers-page .how-row,
.businesses-page .how-row{
  background: #ffffff;
  background-image: none;
}

/* Fallback for browsers that don't support overflow: clip */
@supports not (overflow: clip){
  .how-row{ overflow-x: hidden; }
}
#how-2{ background-image: url('images/howitworks-bg-2.png'); }
#how-3{ background-image: url('images/howitworks-bg-3.png'); }
.how-inner{
  display: flex;
  align-items: center;           /* center vertically within container */
  justify-content: space-between;
  gap: 32px;
}
.how-text{ flex: 0 0 56%; }
.how-media{ 
  flex: 0 0 40%; 
  display: flex; 
  justify-content: center; 
  position: relative;
  background: transparent !important;
  background-color: transparent !important;
}


 .how-img{ width: 100%; max-width: 280px; border-radius: 0; box-shadow: none; }

/* Resellers page - larger images for feature sections */
.resellers-page #info-1 .how-img,
.resellers-page #info-2 .how-img,
.resellers-page #info-3 .how-img {
  max-width: 450px;
}
/* Businesses page - same larger images */
.businesses-page #info-1 .how-img,
.businesses-page #info-2 .how-img,
.businesses-page #info-3 .how-img {
  max-width: 450px;
}
/* Enterprise page - double size for info section media */
.enterprise-page #info-1 .how-img,
.enterprise-page #info-2 .how-img,
.enterprise-page #info-3 .how-img {
  max-width: 560px;
}
/* Thrifters page - larger graphic for info-1 (portable shopping expert) */
.thrifters-page #info-1 .how-img {
  max-width: 832px;
  height: auto;
}

/* Thrifters page - purple gradient for checkbox tags in portable shopping expert (info-1 only) */
.thrifters-page #info-1 .checkbox-grid--search .checkbox-tag {
  background: linear-gradient(135deg, #5E61FF 0%, #a855f7 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 2px 8px rgba(94, 97, 255, 0.3);
}
.thrifters-page #info-1 .checkbox-grid--search .checkbox-tag::after {
  background: rgba(255, 255, 255, 0.4);
}
.thrifters-page #info-1 .checkbox-grid--search .checkbox-tag::before {
  filter: brightness(0) invert(1);
}

/* Desktop/mobile image switching for resellers page */
.how-img-mobile {
  display: none;
}

@media (max-width: 880px) {
  .how-img-desktop {
    display: none;
  }
  
  .how-img-mobile {
    display: block;
    max-width: 100%;
    width: 100%;
  }
  
  /* Resellers page - mobile images should be full width and align with content padding */
  .resellers-page #info-1 .how-media,
  .resellers-page #info-2 .how-media,
  .resellers-page #info-3 .how-media {
    width: 100%;
    padding: 0 var(--container-padding);
    margin: 0;
    box-sizing: border-box;
  }
  
  .resellers-page #info-1 .how-img-mobile,
  .resellers-page #info-2 .how-img-mobile,
  .resellers-page #info-3 .how-img-mobile {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* Businesses page - same mobile image alignment */
  .businesses-page #info-1 .how-media,
  .businesses-page #info-2 .how-media,
  .businesses-page #info-3 .how-media {
    width: 100%;
    padding: 0 var(--container-padding);
    margin: 0;
    box-sizing: border-box;
  }
  
  .businesses-page #info-1 .how-img-mobile,
  .businesses-page #info-2 .how-img-mobile,
  .businesses-page #info-3 .how-img-mobile {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

/* Generate Listings section - transparent background and larger image */
.product-page #how-2 .how-media{
  background: transparent !important;
}
.product-page #how-2 .how-img{
  max-width: 400px !important;
  height: auto;
  box-shadow: none !important;
}

/* How it Works: Motion-driven one-time reveal (text wipe + media fade) */
:root{
  --how-wipe-start: polygon(0 0, 2% 0, 0 2%, 0 0);
  --how-wipe-end: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  --wipe-down-start: polygon(0 0, 100% 0, 100% 0, 0 0); /* Hidden from top */
  --wipe-down-end: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* Fully visible */
}

/* Base/final state */
.how-row{ opacity: 1; }
.how-row .how-text{ opacity: 1; clip-path: var(--how-wipe-end); -webkit-clip-path: var(--how-wipe-end); }
.how-row .how-media{ opacity: 1; }

/* JS-enabled prehide (only while waiting for in-view trigger) *//* Keep row/bg visible; hide only content until animated */
html.js-how-animate .how-row{ opacity: 1; }

html.js-how-animate .how-row:not([data-animated="1"]) .how-text{
  opacity: 0;
  clip-path: var(--how-wipe-start);
  -webkit-clip-path: var(--how-wipe-start);
}

html.js-how-animate .how-row:not([data-animated="1"]) .how-media{
  opacity: 0;
}

/* Step 3 overlay: now animating transform directly for reliability */
/* Overlay listing/graphic image on the phone (reused across steps) */
.how-overlay-wrap{
  position: absolute;
  left: 50%;
  bottom: -30%;
  width: 78%;
  max-width: 380px;
  z-index: 2;
  pointer-events: none;
  will-change: transform;
}

.how-overlay{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  transform: translateX(-80%); /* keep your slide baseline */
  opacity: 1;
  will-change: transform, opacity;
}

/* JS-enabled prehide for overlay (so it slides in smoothly) */
html.js-how-animate .how-overlay{
  opacity: 0;
  transform: translateX(calc(-80% - 32px));
}

/* Step-specific tweak for Step 1 scanning graphic */
#how-1 .how-overlay-wrap{
  bottom: 32%;
  width: 37%;  /* Reduced by 33% from 56% */
  max-width: 240px;  /* Reduced by 33% from 360px */
}
#how-3 .how-overlay-wrap{
  bottom: 22%;
  width: 78%;
  max-width: 380px;
  left: calc(50% - 96px); /* Shift graphic to the left by 96px from center */
}

@media (max-width: 880px){
  #how-1 .how-overlay-wrap{ 
    width: 19% !important; /* Reduced by 33% from 28% */
    max-width: 120px !important; /* Reduced by 33% from 180px */
  }
  #how-3 .how-overlay-wrap{ width: 70%; bottom: 22%; }
}

@media (prefers-reduced-motion: reduce){
  html.js-how-animate .how-row,
  html.js-how-animate .how-row .how-text,
  html.js-how-animate .how-row .how-media,
  html.js-how-animate #how-3 .how-overlay{
    opacity: 1 !important;
    clip-path: var(--how-wipe-end) !important;
    -webkit-clip-path: var(--how-wipe-end) !important;
    --overlay-x: 88px !important;
  }
}

/* Large gradient step numbers (1, 2, 3) */
.step-num{
  display: block;
  padding-bottom:16px;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  background: linear-gradient(
      to right,
      rgba(29, 38, 57, 0.55) 0%,
      rgba(29, 38, 57, 0) 23%,
      rgba(29, 38, 57, 0.0) 100%
  );
  background-clip: text;
  color: transparent;
}
.how-text h3{ margin-top: 2px; color: var(--primary-color); }

/* Overlay listing image on the phone (How #3 only) */
 #how-3 .how-media{ 
   position: relative;
   background: transparent !important;
   background-color: transparent !important;
 }
 #how-3 .how-img {
   transform: none;
 }
@media (max-width: 880px){
  #how-3 .how-overlay{ width: 70%; bottom: 22%; }
  #how-3 .how-img{ max-width: 224px; width: 80%; }
}

@media (max-width: 880px){
  .how-row{ min-height: auto; }
  .how-inner{ flex-direction: column-reverse; align-items: center; }
  .how-text, .how-media{ flex: 0 0 100%; width: 100%; }
  .how-media{ 
    justify-content: center; 
    align-items: center;
    background: transparent !important;
    background-color: transparent !important;
  }
  .phone-mock{ max-width: 60vw; width: 280px; transform: rotate(0deg); }
  .how-img {
    max-width: 224px;          /* 80% of the desktop 280px cap */
    width: 80%;                /* remain responsive within container */
    height: auto;
    transform: none;           /* avoid stacking transforms across steps */
  }

  /* Thrifters info-1 - larger graphic on mobile */
  .thrifters-page #info-1 .how-img {
    max-width: 460px;
    width: 100%;
  }

  /* Normalize header/description spacing on mobile (avoid stacked default h3/p margins) */
  .how-text h3{
    margin: 2px 0 8px 0;
  }
  .how-text p{
    margin-top: 0;
  }
  
  /* Center the overlay on mobile */
  .how-overlay-wrap {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  
}

/* ---------- FLOW DIVIDER (below How it Works) ---------- */
.flow-divider{
  width: 100%;
  height: 4px;                            /* line thickness */
  background: linear-gradient(90deg,
              var(--secondary-color),
              var(--primary-color),
              var(--secondary-color));
  background-size: 200% 100%;             /* room to animate */
  animation: flowDivider 4s linear infinite alternate; /* ping-pong for seamless loop */
  border-radius: 999px;                    /* pill edges */
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);  /* subtle depth */
}
@keyframes flowDivider{
  0%   { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce){
  .flow-divider{ animation: none; }
}

/* ---------- FLOW DIVIDER GLOWING (reusable variant with animated glow) ---------- */
.flow-divider-glowing {
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg,
              var(--flow-glow-1, var(--secondary-color)),
              var(--flow-glow-2, var(--primary-color)),
              var(--flow-glow-3, var(--secondary-color)),
              var(--flow-glow-2, var(--primary-color)),
              var(--flow-glow-1, var(--secondary-color)));
  background-size: 200% 100%;
  animation: 
    flowDividerGlow 4s linear infinite alternate,
    flowDividerGlowPulse 2s ease-in-out infinite;
  border-radius: 999px;
  position: relative;
  box-shadow: 
    0 0 8px var(--flow-glow-1, var(--secondary-color)),
    0 0 16px var(--flow-glow-2, var(--primary-color)),
    0 0 24px var(--flow-glow-1, var(--secondary-color)),
    0 0 32px var(--flow-glow-2, var(--primary-color));
}

/* Blurred duplicate underneath for extra glow spread */
.flow-divider-glowing::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  background-size: inherit;
  border-radius: 999px;
  filter: blur(8px);
  opacity: 0.8;
  animation: flowDividerGlow 4s linear infinite alternate;
}

.flow-divider-glowing::after {
  content: "";
  position: absolute;
  inset: -2px;
  background: inherit;
  background-size: inherit;
  border-radius: 999px;
  filter: blur(16px);
  opacity: 0.6;
  animation: flowDividerGlow 4s linear infinite alternate;
}

@keyframes flowDividerGlow {
  0%   { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}

@keyframes flowDividerGlowPulse {
  0%, 100% {
    box-shadow: 
      0 0 8px var(--flow-glow-1, var(--secondary-color)),
      0 0 16px var(--flow-glow-2, var(--primary-color)),
      0 0 24px var(--flow-glow-1, var(--secondary-color)),
      0 0 32px var(--flow-glow-2, var(--primary-color));
  }
  50% {
    box-shadow: 
      0 0 12px var(--flow-glow-1, var(--secondary-color)),
      0 0 24px var(--flow-glow-2, var(--primary-color)),
      0 0 36px var(--flow-glow-1, var(--secondary-color)),
      0 0 48px var(--flow-glow-2, var(--primary-color));
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow-divider-glowing,
  .flow-divider-glowing::before,
  .flow-divider-glowing::after { 
    animation: none; 
  }
}

/* Product page: custom glow colors */
.product-page .flow-divider-glowing {
  --flow-glow-1: #8EFFED;
  --flow-glow-2: #52B8AA;
  --flow-glow-3: #154A49;
}

/* Thrifters page: purple glow to match the "What does GlobalSKU do?" header */
.thrifters-page .flow-divider-glowing {
  --flow-glow-1: #C89BF0;
  --flow-glow-2: #5B2A86;
  --flow-glow-3: #341A4F;
}

/* ---------- TESTIMONIALS ---------- */
.section--testimonials{
  background:linear-gradient(180deg, #00455c 0%, #141f23 100%);
  color:var(--text-light);
}
.testimonials-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px; /* controls space between cards */
}
.testimonial-card{
  background: rgba(0, 0, 0, 0.465);
  padding:22px;
  border-radius:12px;
  box-shadow: none;
  margin: 0; /* remove default blockquote margins that affect spacing */
}
.testimonial-card p{ margin:0 0 12px; color:var(--text-light); }

.testimonial-card cite{ color: rgba(255,255,255,0.75); font-size:0.92em; }

/* testimonial profile image + name */
.testimonial-meta{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.testimonial-avatar{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.35);
}
.testimonial-meta cite{ display: block; color: rgba(255,255,255,0.85); }

/* ---------- FAQ ---------- */
.section--faq {
  background: #141f23;
  color: var(--text-light);
}
.section--faq .section-title,
.section--faq .section-sub,
.section--faq .faq-question,
.section--faq .faq-answer p {
  color: var(--text-light);
}
.section--faq .faq-item {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}
.section--faq .faq-question .chev::before,
.section--faq .faq-question .chev::after {
  background: var(--text-light);
}
/* Knowledge base link text - make lighter for dark background */
.section--faq .faq-list > p,
.section--faq .faq-wrap p:last-child {
  color: rgba(255, 255, 255, 0.75) !important;
}
.section--faq .faq-list > p a[href*="knowledge-base"],
.section--faq .faq-wrap p:last-child a[href*="knowledge-base"] {
  color: rgba(255, 255, 255, 0.9) !important;
}
.faq-wrap{ max-width: 900px; margin: 0 auto; }
.faq-list{ display: flex; flex-direction: column; gap: 12px; }
.faq-item{
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  overflow: hidden; /* clip rounded corners during expand */
}
.faq-question{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05em;
  color: var(--text-dark);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}
.faq-question .q{ flex: 1; }
.faq-question .chev{
  display: inline-block;
  width: 18px; height: 18px;
  position: relative;
}
.faq-question .chev::before, .faq-question .chev::after{
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 18px; height: 2px; background: var(--text-dark); border-radius: 2px;
  transition: transform .25s ease;
}
.faq-question .chev::after{ transform: rotate(90deg); }
.faq-item.open .faq-question .chev::after{ transform: rotate(0deg); }

.faq-answer{
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
  padding: 0 18px; /* horizontal stays, vertical animates */
}
.faq-item.open .faq-answer{ padding-bottom: 16px; }
.faq-answer p{ margin: 12px 0 0 0; color: var(--text-medium); }

@media (prefers-reduced-motion: reduce){
  .faq-answer{ transition: none; }
}

.section--pricing{
  padding-top: 192px;
  padding-bottom: 192px;
  background: linear-gradient(180deg, rgba(56,93,245,0.02), rgba(139,221,208,0.01));
  position: relative;
  overflow: hidden; /* keep this so rotating bg stays contained */
}
.section--pricing > .container{
  position: relative;
  z-index: 1;
}
.section--pricing .section-title,
.section--pricing .section-sub{ position: relative; z-index: 1; }

/* Pricing trial text container - visible background */
.pricing-trial-text {
  display: block;
  width: fit-content;
  margin: 0 auto 16px;
  padding: 12px 24px;
  border-radius: 12px;
  background: #E5FFEF;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.pricing-trial-text .section-sub {
  margin: 0;
  color: var(--green-4);
}
.product-page .pricing-trial-text {
  background: rgba(20, 28, 42, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.product-page .pricing-trial-text .section-sub {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Pricing CTA button - match site-wide primary style */
.section--pricing .pricing-grid > .btn {
  background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
  color: var(--text-dark) !important;
  border: 1px solid rgba(255,255,255,0.55);
  text-shadow: none !important;
}
.section--pricing .pricing-grid > .btn:hover {
  background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%) !important;
  color: var(--text-dark) !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
}

/* Per-card Get Started CTA */
.plan-card-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  margin-top: 18px;
  padding: 10px 0;
  font-size: 14px;
}

@keyframes ctaPulseCyan {
  0%   { box-shadow: 0 0 0 0 rgba(0, 255, 215, 0.85); }
  70%  { box-shadow: 0 0 0 14px rgba(0, 255, 215, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 255, 215, 0); }
}
.plan-card-cta.cta-boost::before {
  inset: 0;
  opacity: 1;
  box-shadow: 0 0 0 0 rgba(0, 255, 215, 0.85);
  animation: ctaPulseCyan 2.8s ease-out infinite;
}

/* Make h2s in pricing section match h1 size */
.section--pricing h2,
.section--pricing .section-title {
  font-size: var(--font-size-hero);
  font-weight: 700;
}
.section--pricing::before{
  content: "";
  position: absolute;
  inset: -820px; /* extends beyond edges for clean rotation */
  background: url('images/gradient-bg.png') no-repeat center;
  opacity: 0.8;                /* subtle */
  z-index: 0;                   /* behind content */
  pointer-events: none;
  transform-origin: center center;
  animation: spinBg 12s linear infinite; /* very slow clockwise */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Home page: line grid visible only inside animated circles (reverse of contact dot-grid) */
@property --pricing-circle-x { syntax: "<percentage>"; inherits: false; initial-value: 80%; }
@property --pricing-circle-y { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --pricing-circle2-x { syntax: "<percentage>"; inherits: false; initial-value: 25%; }
@property --pricing-circle2-y { syntax: "<percentage>"; inherits: false; initial-value: 75%; }
@property --pricing-circle3-x { syntax: "<percentage>"; inherits: false; initial-value: 70%; }
@property --pricing-circle3-y { syntax: "<percentage>"; inherits: false; initial-value: 25%; }
@property --pricing-circle4-x { syntax: "<percentage>"; inherits: false; initial-value: 60%; }
@property --pricing-circle4-y { syntax: "<percentage>"; inherits: false; initial-value: 15%; }
.home-page .section--pricing .pricing-line-grid-bg,
.thrifters-page .section--pricing .pricing-line-grid-bg,
.product-page .section--pricing .pricing-line-grid-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Line grid: horizontal + vertical lines */
  background-image:
    linear-gradient(to right, #00FFD7 1px, transparent 1px),
    linear-gradient(to bottom, #00FFD7 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: 0 0;
  background-repeat: repeat;
  --pricing-circle-radius: 37.5%;
  /* Reversed mask: grid visible only INSIDE the circles (union), feathered edges */
  -webkit-mask-image:
    radial-gradient(
      circle at var(--pricing-circle-x) var(--pricing-circle-y),
      black calc(var(--pricing-circle-radius) * 0.75),
      rgba(0, 0, 0, 0.4) calc(var(--pricing-circle-radius) * 0.92),
      transparent var(--pricing-circle-radius)
    ),
    radial-gradient(
      circle at var(--pricing-circle2-x) var(--pricing-circle2-y),
      black calc(var(--pricing-circle-radius) * 0.75),
      rgba(0, 0, 0, 0.4) calc(var(--pricing-circle-radius) * 0.92),
      transparent var(--pricing-circle-radius)
    ),
    radial-gradient(
      circle at var(--pricing-circle3-x) var(--pricing-circle3-y),
      black calc(var(--pricing-circle-radius) * 0.75),
      rgba(0, 0, 0, 0.4) calc(var(--pricing-circle-radius) * 0.92),
      transparent var(--pricing-circle-radius)
    ),
    radial-gradient(
      circle at var(--pricing-circle4-x) var(--pricing-circle4-y),
      black calc(var(--pricing-circle-radius) * 0.75),
      rgba(0, 0, 0, 0.4) calc(var(--pricing-circle-radius) * 0.92),
      transparent var(--pricing-circle-radius)
    );
  mask-image:
    radial-gradient(
      circle at var(--pricing-circle-x) var(--pricing-circle-y),
      black calc(var(--pricing-circle-radius) * 0.75),
      rgba(0, 0, 0, 0.4) calc(var(--pricing-circle-radius) * 0.92),
      transparent var(--pricing-circle-radius)
    ),
    radial-gradient(
      circle at var(--pricing-circle2-x) var(--pricing-circle2-y),
      black calc(var(--pricing-circle-radius) * 0.75),
      rgba(0, 0, 0, 0.4) calc(var(--pricing-circle-radius) * 0.92),
      transparent var(--pricing-circle-radius)
    ),
    radial-gradient(
      circle at var(--pricing-circle3-x) var(--pricing-circle3-y),
      black calc(var(--pricing-circle-radius) * 0.75),
      rgba(0, 0, 0, 0.4) calc(var(--pricing-circle-radius) * 0.92),
      transparent var(--pricing-circle-radius)
    ),
    radial-gradient(
      circle at var(--pricing-circle4-x) var(--pricing-circle4-y),
      black calc(var(--pricing-circle-radius) * 0.75),
      rgba(0, 0, 0, 0.4) calc(var(--pricing-circle-radius) * 0.92),
      transparent var(--pricing-circle-radius)
    );
  -webkit-mask-composite: add;
  mask-composite: add;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: 0 0, 0 0, 0 0, 0 0;
  mask-position: 0 0, 0 0, 0 0, 0 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: pricingLineGridCircleMove 26s linear infinite;
}
@keyframes pricingLineGridCircleMove {
  0%   { --pricing-circle-x: 80%; --pricing-circle-y: 50%; --pricing-circle2-x: 25%; --pricing-circle2-y: 75%; --pricing-circle3-x: 70%; --pricing-circle3-y: 25%; --pricing-circle4-x: 60%; --pricing-circle4-y: 15%; }
  25%  { --pricing-circle-x: 50%; --pricing-circle-y: 20%; --pricing-circle2-x: 15%; --pricing-circle2-y: 50%; --pricing-circle3-x: 85%; --pricing-circle3-y: 50%; --pricing-circle4-x: 20%; --pricing-circle4-y: 70%; }
  50%  { --pricing-circle-x: 20%; --pricing-circle-y: 50%; --pricing-circle2-x: 35%; --pricing-circle2-y: 25%; --pricing-circle3-x: 55%; --pricing-circle3-y: 75%; --pricing-circle4-x: 75%; --pricing-circle4-y: 85%; }
  75%  { --pricing-circle-x: 50%; --pricing-circle-y: 80%; --pricing-circle2-x: 50%; --pricing-circle2-y: 15%; --pricing-circle3-x: 25%; --pricing-circle3-y: 55%; --pricing-circle4-x: 90%; --pricing-circle4-y: 40%; }
  100% { --pricing-circle-x: 80%; --pricing-circle-y: 50%; --pricing-circle2-x: 25%; --pricing-circle2-y: 75%; --pricing-circle3-x: 70%; --pricing-circle3-y: 25%; --pricing-circle4-x: 60%; --pricing-circle4-y: 15%; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .section--pricing .pricing-line-grid-bg,
  .thrifters-page .section--pricing .pricing-line-grid-bg,
  .product-page .section--pricing .pricing-line-grid-bg { animation: none; }
}
/* Home page pricing: "Flexible Pricing" - Sabon (Adobe Fonts), double size, gradient text */
.home-page .section--pricing .section-title,
.businesses-page .section--pricing .section-title,
.enterprise-page .section--pricing .section-title,
.resellers-page .section--pricing .section-title {
  font-family: 'linotype-sabon', var(--font-serif);
  font-weight: 400;
  font-style: normal;
  font-size: calc(var(--font-size-hero) * 2.5);
  background: linear-gradient(180deg, var(--primary-color) 0%, var(--primary-color) 55%, #A3E635 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Thrifters: same heading treatment as home; bottom of gradient uses brand purple (not lime) */
.thrifters-page .section--pricing .section-title {
  font-family: 'linotype-sabon', var(--font-serif);
  font-weight: 400;
  font-style: normal;
  font-size: calc(var(--font-size-hero) * 2.5);
  background: linear-gradient(180deg, var(--primary-color) 0%, var(--primary-color) 55%, #5E61FF 82%, #a855f7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Product + home page: text-dark pricing bg + spinning gradient-bg-dark overlay */
.product-page .section--pricing,
.home-page .section--pricing {
  background: var(--text-dark) !important;
}
.product-page .section--pricing::before,
.home-page .section--pricing::before {
  background: url('images/gradient-bg-dark.png') no-repeat center;
}
.product-page .section--pricing .pricing-line-grid-bg,
.home-page .section--pricing .pricing-line-grid-bg {
  opacity: 0.1;
}
.product-page .section--pricing .section-title,
.home-page .section--pricing .section-title {
  font-family: 'linotype-sabon', var(--font-serif);
  font-weight: 400;
  font-style: normal;
  font-size: calc(var(--font-size-hero) * 2.5);
  background: linear-gradient(180deg, var(--primary-color) 0%, var(--primary-color) 55%, #A3E635 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
.product-page .section--pricing .section-sub,
.home-page .section--pricing .section-sub {
  color: #FFFFFF !important;
}
/* Product + home page: dark pricing cards */
.product-page .section--pricing .plan-card,
.home-page .section--pricing .plan-card{
  background: #000000;
  box-shadow: 0 0 46px rgba(0,0,0,0.4);
}
.product-page .section--pricing .plan-card h4,
.home-page .section--pricing .plan-card h4{
  color: var(--primary-color);
}
.product-page .section--pricing .plan-card li,
.home-page .section--pricing .plan-card li{
  color: rgba(255,255,255,0.85);
}
.product-page .section--pricing .plan-card li::before,
.home-page .section--pricing .plan-card li::before{
  background-image: url('images/icon-checkcircle-glass.svg');
  filter: brightness(1.5);
}
.product-page .section--pricing .plan-card ul,
.home-page .section--pricing .plan-card ul{
  border-top-color: rgba(255,255,255,0.12);
}
.product-page .section--pricing .price .per,
.home-page .section--pricing .price .per{
  color: rgba(255,255,255,0.5);
}
.product-page .section--pricing .plan-tag,
.home-page .section--pricing .plan-tag{
  color: #000000;
  border-color: transparent;
}
.product-page .section--pricing .plan-description,
.home-page .section--pricing .plan-description{
  color: #ffffff;
}
.product-page .section--pricing .plan-card.recommended,
.home-page .section--pricing .plan-card.recommended{
  border-color: rgba(94, 97, 255, 0.55);
}
.product-page .section--pricing .plan-card.recommended h4,
.home-page .section--pricing .plan-card.recommended h4{
  color: #a855f7 !important;
}
/* --- Perf: only run the pricing background animations while the section is on screen ---
   The rotating gradient layer and the masked line-grid are both expensive (the mask
   animates gradient geometry, which repaints on the CPU every frame). An
   IntersectionObserver in load-header-footer.js adds `.pricing-idle` when the section
   scrolls out of view. Deliberately opt-OUT: if that script is missing or errors, the
   animations keep running as they always did rather than freezing. */
.section--pricing.pricing-idle::before,
.section--pricing.pricing-idle .pricing-line-grid-bg{
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce){
  .section--pricing::before{ animation: none; }
}

/* --- Android/Chrome stability: prevent disappearing text/layers --- */
.section--pricing, .plan-card, .plan-badge, .section--pricing .btn{
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.section--pricing > .container{ isolation: isolate; }

/* Reduce heavy background rotation on mobile to avoid GPU glitches */
@media (max-width: 880px){
  .section--pricing{ padding-bottom: 120px; }
  /* Pricing h2/section-title font sizes now controlled by CSS variables in :root */
}
.pricing-grid{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:18px;
  margin-top:20px;
  max-width: 1020px;
  margin-left: auto;
  margin-right: auto;
  position: relative; z-index: 1;
}
/* Center the Start Free Trial button within the grid */
.pricing-grid > .btn{
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 8px;
  margin-bottom: 16px; /* prevents halo clipping at bottom */
}

.plan-card{
  background: #fff;
  padding: 28px 24px 24px;
  border-radius: 14px;
  text-align: left;                 /* left-align content like screenshot */
  box-shadow: var(--card-shadow);
  position: relative; z-index: 1;
  display: flex;
  flex-direction: column;
}

/* Enhanced 3D-style shadows for pricing cards (desktop only) */
@media (min-width: 881px){
  .section--pricing .plan-card{
    box-shadow: 0 0px 46px rgba(15,23,42,0.16);
  }
  .section--pricing .plan-card:first-child{
    /* left-most card: shadow pushed slightly to the right, same vertical placement */
    box-shadow: 8px 0px 46px rgba(15,23,42,0.22);
  }
  .section--pricing .plan-card:nth-child(2),
  .section--pricing .plan-card:nth-child(3){
    /* center cards: centered drop shadow */
    box-shadow: 0 0px 46px rgba(15,23,42,0.24);
  }
  .section--pricing .plan-card:last-child{
    /* right-most card: shadow pushed slightly to the left, same vertical placement */
    box-shadow: -8px 0px 46px rgba(15,23,42,0.22);
  }
}

/* small 50% OFF badges on pricing cards */
.plan-badge{
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;                 /* keep same size */
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;                   /* keep same size */
  letter-spacing: 0.3px;

  /* Match HERO badge look */
  background: linear-gradient(
    135deg,
    var(--secondary-color) 0%,
    var(--primary-color) 100%
  );
  color: #ffffff;

  border: 1px solid rgba(255,255,255,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  box-shadow:
    0 6px 18px rgba(0,0,0,0.18),
    0 0 0 0 rgba(0,69,92,0.28);

  animation: badgePulse 2.6s ease-in-out infinite;
  z-index: 2;
}

@media (max-width: 880px){
  .plan-badge{ top: 10px; right: 10px; font-size: 10px; padding: 4px 8px; }
  .plan-card.recommended .plan-badge,
  .plan-badge--spring{ top: -10px; left: 10px; right: auto; }
}
.plan-card.recommended{
  transform: none;   /* align with others */
  border: 2px solid rgba(94, 97, 255, 0.45);
}
.plan-card.recommended h4{
  color: var(--accent-purple) !important;
}
.plan-card.recommended .price-new{
  background: linear-gradient(135deg, #5E61FF 0%, #a855f7 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* Most Popular badge: half outside, half inside the card, left-aligned */
.plan-card.recommended .plan-badge{
  top: -12px;
  left: 12px;
  right: auto;
}

/* Purple badge variant */
.plan-badge--purple{
  background: linear-gradient(135deg, #5E61FF 0%, #a855f7 100%) !important;
  box-shadow:
    0 6px 18px rgba(81, 0, 184, 0.25),
    0 0 0 0 rgba(94, 97, 255, 0.28) !important;
  animation: badgePulsePurple 2.6s ease-in-out infinite !important;
}
@keyframes badgePulsePurple{
  0%   { box-shadow: 0 6px 18px rgba(81,0,184,0.25), 0 0 0 0 rgba(94,97,255,0.35); }
  70%  { box-shadow: 0 6px 18px rgba(81,0,184,0.25), 0 0 0 10px rgba(94,97,255,0); }
  100% { box-shadow: 0 6px 18px rgba(81,0,184,0.25), 0 0 0 0 rgba(94,97,255,0); }
}

/* Spring Special badge: same position as Most Popular (half outside, top-left) */
.plan-badge--spring{
  top: -12px;
  left: 12px;
  right: auto;
}

/* Spring Special badge variant */
.plan-badge--spring{
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
  box-shadow:
    0 6px 18px rgba(16,185,129,0.25),
    0 0 0 0 rgba(52,211,153,0.28) !important;
  animation: badgePulseSpring 2.6s ease-in-out infinite !important;
}
@keyframes badgePulseSpring{
  0%   { box-shadow: 0 6px 18px rgba(16,185,129,0.25), 0 0 0 0 rgba(52,211,153,0.35); }
  70%  { box-shadow: 0 6px 18px rgba(16,185,129,0.25), 0 0 0 10px rgba(52,211,153,0); }
  100% { box-shadow: 0 6px 18px rgba(16,185,129,0.25), 0 0 0 0 rgba(52,211,153,0); }
}

/* Short description line on each plan card */
.plan-description{
  font-size: 12px;
  color: var(--text-medium);
  margin: 2px 0 8px;
  line-height: 1.4;
}

/* User type tags on pricing cards */
.plan-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: auto 0 0 0;
}
.plan-tag{
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(180deg, var(--primary-color) 0%, #A3E635 100%);
  border: none;
  border-radius: 6px;
  white-space: nowrap;
}

.plan-card h4{
  margin: 8px 0 4px;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--primary-color);
}
.price{
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin: 2px 0 6px;
}
.price-old{
  font-size: 22px;
  font-weight: 700;
  color: var(--text-medium);
  text-decoration: line-through;
  opacity: 0.85;
}
.price-new{
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.5px;
  background: linear-gradient(
    135deg,
    var(--secondary-color) 0%,
    var(--primary-color) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.price-old + .price-new{
  background: linear-gradient(
    135deg,
    var(--secondary-color) 0%,
    var(--primary-color) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Reusable gradient text class - purple to magenta (matches use-case-item underline) */
.text-gradient-purple-magenta,
.use-case-section .section-title.text-gradient-purple-magenta {
  background: linear-gradient(90deg, #5E61FF 0%, #a855f7 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
.price .per{ font-weight:500; font-size:13px; color:var(--text-medium); margin-left: 2px; }

.plan-card ul{
  list-style: none;
  padding: 12px 0 0;
  margin: 12px 0 0 0;
  border-top: 1px solid rgba(17,24,39,0.12); /* subtle divider above list */
}
.plan-card li{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  color: var(--text-dark);
}
.plan-card li::before{
  content: "";
  width: 20px;
  height: 20px;
  background: url('images/icon-checkcircle.svg') no-repeat center / contain;
  flex: 0 0 20px;
  opacity: 0.9;
}

@keyframes spinBg{
  0%   { transform: translateZ(0) rotate(0deg); }
  100% { transform: translateZ(0) rotate(360deg); }
}

/* ---------- REUSABLE FORM ---------- */
/* Use .form for any form; works on light or dark backgrounds with .form--dark */
.form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.form-label {
  font-family: var(--font-sans);
  font-size: var(--font-size-small);
  font-weight: 600;
  color: inherit;
}
.form-label--required::after {
  content: ' *';
  color: var(--secondary-color);
}
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.form-input::placeholder,
.form-textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--secondary-color);
  background: rgba(255, 255, 255, 0.1);
}
.form-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.form-textarea {
  min-height: 120px;
  resize: vertical;
}
.form-submit {
  margin-top: 8px;
  align-self: flex-start;
}
/* Light-theme form variant (for use on light backgrounds) */
.form--light .form-input,
.form--light .form-select,
.form--light .form-textarea {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.15);
  color: var(--text-dark);
}
.form--light .form-input::placeholder,
.form--light .form-textarea::placeholder {
  color: rgba(0, 0, 0, 0.45);
}
.form--light .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='rgba(0,0,0,0.5)' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
}

/* ---------- DOT GRID OVERLAY (reusable) ---------- */
/* Register circle positions so they interpolate smoothly in the animation */
@property --circle-x { syntax: "<percentage>"; inherits: false; initial-value: 80%; }
@property --circle-y { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --circle2-x { syntax: "<percentage>"; inherits: false; initial-value: 25%; }
@property --circle2-y { syntax: "<percentage>"; inherits: false; initial-value: 75%; }
@property --circle3-x { syntax: "<percentage>"; inherits: false; initial-value: 70%; }
@property --circle3-y { syntax: "<percentage>"; inherits: false; initial-value: 25%; }
/* Apply .dot-grid-section to any section; add .dot-grid-bg as first child for overlay */
.dot-grid-section {
  position: relative;
  overflow: hidden;
}
.dot-grid-section > .container {
  position: relative;
  z-index: 1;
}
.dot-grid-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: 0 0;
  background-repeat: repeat;
  --circle-radius: 37.5%; /* 25% larger than 30% */
  /* Three soft circles: dots visible only outside all three (intersect = visible where every mask is opaque) */
  -webkit-mask-image:
    radial-gradient(
      circle at var(--circle-x) var(--circle-y),
      transparent 0%,
      transparent 8%,
      rgba(0, 0, 0, 0.4) 16%,
      black var(--circle-radius)
    ),
    radial-gradient(
      circle at var(--circle2-x) var(--circle2-y),
      transparent 0%,
      transparent 8%,
      rgba(0, 0, 0, 0.4) 16%,
      black var(--circle-radius)
    ),
    radial-gradient(
      circle at var(--circle3-x) var(--circle3-y),
      transparent 0%,
      transparent 8%,
      rgba(0, 0, 0, 0.4) 16%,
      black var(--circle-radius)
    );
  mask-image:
    radial-gradient(
      circle at var(--circle-x) var(--circle-y),
      transparent 0%,
      transparent 8%,
      rgba(0, 0, 0, 0.4) 16%,
      black var(--circle-radius)
    ),
    radial-gradient(
      circle at var(--circle2-x) var(--circle2-y),
      transparent 0%,
      transparent 8%,
      rgba(0, 0, 0, 0.4) 16%,
      black var(--circle-radius)
    ),
    radial-gradient(
      circle at var(--circle3-x) var(--circle3-y),
      transparent 0%,
      transparent 8%,
      rgba(0, 0, 0, 0.4) 16%,
      black var(--circle-radius)
    );
  mask-composite: intersect;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: 0 0, 0 0, 0 0;
  mask-position: 0 0, 0 0, 0 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: dotGridCircleMove 26s linear infinite;
}
@keyframes dotGridCircleMove {
  /* Circle 1: orbit around center */
  0%   { --circle-x: 80%; --circle-y: 50%; --circle2-x: 25%; --circle2-y: 75%; --circle3-x: 70%; --circle3-y: 25%; }
  25%  { --circle-x: 50%; --circle-y: 20%; --circle2-x: 15%; --circle2-y: 50%; --circle3-x: 85%; --circle3-y: 50%; }
  50%  { --circle-x: 20%; --circle-y: 50%; --circle2-x: 35%; --circle2-y: 25%; --circle3-x: 55%; --circle3-y: 75%; }
  75%  { --circle-x: 50%; --circle-y: 80%; --circle2-x: 50%; --circle2-y: 15%; --circle3-x: 25%; --circle3-y: 55%; }
  100% { --circle-x: 80%; --circle-y: 50%; --circle2-x: 25%; --circle2-y: 75%; --circle3-x: 70%; --circle3-y: 25%; }
}
@media (prefers-reduced-motion: reduce) {
  .dot-grid-bg { animation: none; }
}

/* ---------- CONTACT PAGE ---------- */
.contact-page {
  background: linear-gradient(to bottom right, #00231A 0%, #000000 80%);
  color: var(--text-light);
}
.contact-section {
  padding: 120px 0 160px;
  background: linear-gradient(to bottom right, #00231A 0%, #000000 80%);
}
.contact-section .section-heading {
  text-align: left;
}
.contact-section .section-title,
.contact-section .section-sub {
  color: var(--text-light);
}
.contact-grid {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-top: 48px;
  width: 100%;
}
.contact-left-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
  min-width: 0;
}
.contact-info-box,
.contact-form-box,
.contact-grid #contact-form-placeholder {
  flex: 1;
  min-width: 0;
  background: #0f2222;
  border-radius: 12px;
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.contact-form-success {
  margin: 0;
  padding: 32px;
  background: #0f2222;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.contact-form-success p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.125em;
  line-height: 1.5;
}
.contact-left-column .contact-info-box {
  flex: 0 0 auto;
}
.contact-info-title {
  font-family: var(--font-sans);
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--secondary-color);
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.contact-info-box .contact-info-title:not(:first-child) {
  margin-top: 28px;
}
.contact-info-address {
  margin: 0;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}
.contact-info-box p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
}
.contact-link {
  color: var(--secondary-color);
  text-decoration: none;
  font-weight: 600;
}
.contact-link:hover,
.contact-link:focus {
  color: #5cffeb;
  text-decoration: underline;
}
.contact-section .contact-info-box .btn-outline {
  color: #fff;
  border-color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.contact-section .contact-info-box .btn-outline:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-color: #fff;
}
.contact-social {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}
.contact-social a {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transition: background 0.2s ease, transform 0.2s ease;
}
.contact-social a:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}
.contact-social a {
  animation: none;
}
.contact-social img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}
@media (max-width: 880px) {
  .contact-section {
    padding: 80px 0 100px;
  }
  .contact-grid {
    flex-direction: column;
    margin-top: 32px;
  }
  .contact-info-box {
    max-width: none;
  }
  .contact-info-box,
  .contact-form-box {
    padding: 24px;
  }
}

/* Contact form embed (e.g. businesses page) */
.section--contact-form-embed {
  background: linear-gradient(180deg, #00455c 0%, #0a2830 25%, #141f23 100%);
  color: var(--text-light);
}
.section--contact-form-embed .section-heading {
  text-align: left;
}
.section--contact-form-embed .section-title,
.section--contact-form-embed .section-sub {
  color: var(--text-light);
}
.section--contact-form-embed .contact-form-embed-grid {
  margin-top: 48px;
}
.section--contact-form-embed .contact-info-box .btn-outline {
  color: #fff;
  border-color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.section--contact-form-embed .contact-info-box .btn-outline:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-color: #fff;
}

@media (max-width: 880px) {
  .section--contact-form-embed .contact-form-embed-grid {
    flex-direction: column;
  }
  .section--contact-form-embed .contact-form-embed-grid #contact-form-placeholder {
    order: 1;
    width: 100%;
    max-width: 100%;
  }
  .section--contact-form-embed .contact-form-embed-grid .contact-left-column {
    order: -1;
    width: 100%;
    max-width: 100%;
  }
}

.contact-form-embed-wrapper {
  max-width: 520px;
  margin: 0 auto;
  margin-top: 32px;
}

/* ---------- FOOTER ---------- */
.site-footer{
  background:#0b1520;
  color: rgba(255,255,255,0.9);
  padding:36px 0 18px;
}
.site-footer .footer-links h5,
.site-footer .footer-contact h5{ 
  color: var(--secondary-color);
}
/* Section title links - inherit h5 styling */
.site-footer .footer-links h5 a,
.site-footer .footer-contact h5 a {
  color: inherit;
  text-decoration: none;
}
.site-footer .footer-links h5 a:hover,
.site-footer .footer-contact h5 a:hover,
.site-footer .footer-links h5 a:focus,
.site-footer .footer-contact h5 a:focus {
  color: #5cffeb;
}
/* Brighter email link for contrast */
.site-footer .footer-contact a{
  color: #4DB8FF;              /* bright blue for contrast */
  font-weight: 600;
  text-decoration: none;
}
.site-footer .footer-contact a:hover,
.site-footer .footer-contact a:focus{
  color: #80D4FF;              /* lighter on hover */
  text-decoration: underline;  /* clear affordance */
}
/* Container for Contact and Help Center sections - stacked vertically */
.footer-contact-help {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.footer-grid{
  display:flex;
  gap:28px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}
.footer-brand{ 
  max-width:360px;
  /* Align logo with h5 section headers (account for h5 default margin-top) */
  padding-top: 1em;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-social{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
  align-items: center;
}
.footer-social a{
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--secondary-color);
  transition: background .2s ease, transform .2s ease;
}
.footer-social a:hover{
  background: var(--secondary-color);
  opacity: 0.8;
  transform: translateY(-1px);
}
.footer-social a {
  animation: none;
}
.footer-social img{
  width: 18px;
  height: 18px;
  fill: rgba(255,255,255,0.9);
}

/* Product Hunt badge - below social row, left-aligned (not circular icon style) */
.site-footer .producthunt-banner {
  display: inline-flex;
  width: auto;
  height: auto;
  background: transparent;
  border-radius: 0;
  padding: 0;
}
.site-footer .producthunt-banner img {
  width: 180px;
  height: auto;
}

/* Footer App Store badge section - bottom left aligned on its own line, two badges in a row */
.footer-appstore-section{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  padding-bottom: 0;
}

.footer-appstore-badge{
  display: inline-flex;
  margin-top: 0;
}

.footer-appstore-badge img{
  height: 44px;
  width: auto;
  display: block;
}
.footer-links ul{ list-style:none; padding:0; margin:0; }
.footer-links a{ color: rgba(255,255,255,0.8); text-decoration:none; display:block; margin-bottom:8px; }
.muted{ color: rgba(255,255,255,0.6); }

/* copyright */
.footer-lower {
  margin-top: 24px;
}
.footer-social-centered {
  display: flex;
  justify-content: center;
}
.footer-social-centered .footer-social {
  margin-top: 0;
}
.footer-producthunt-corner {
  margin-top: 16px;
  display: none;
}
.copyright{ text-align:center; margin-top:18px; color: rgba(255,255,255,0.6); }

/* ---------- ANIMATIONS ---------- */
/* Section-scoped pre-hide to avoid global conflicts */
.prehide-pricing .plan-card,
.prehide-pricing .plan-badge,
.prehide-testimonials .testimonial-card{
  opacity: 0;
  transform: translateY(10px);
}

@media (prefers-reduced-motion: reduce){
  .prehide-pricing .plan-card,
  .prehide-pricing .plan-badge,
  .prehide-testimonials .testimonial-card{
    opacity: 1;
    transform: none;
  }
}
/* basic fade and slide animations used with IntersectionObserver */
.js-animate .fade-up, .js-animate .fade-in{
  opacity:0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
}
.js-animate .fade-in{ transform:none; }

/* ---------- TYPOGRAPHY UTILITIES ---------- */
.body-lg{
  font-size: 1.3em;   /* relative to --font-size-body */
  line-height: 1.55;   /* slightly tighter */
  color: var(--text-medium);
}


/* Header nav layout – desktop */
@media (min-width: 881px){
  .header-inner{ gap: 32px; } /* Space between logo and divider - matches padding-left of main-nav */
  .main-nav{ 
    position: relative; 
    margin-left: 0; 
    padding-left: 32px; /* Equal padding after divider to match gap between menu items */
  }
  .main-nav::before{
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 36px;                   /* vertical divider height */
    background: rgba(34,40,52,0.2);  /* subtle divider */
  }
  
  /* Dark mode: Divider - use primary cyan */
  .site-header.header-dark .main-nav::before {
    background: rgba(0, 184, 153, 0.4);
  }
  .main-nav ul{ gap: 32px; }
  /* Align hero phone under header CTA by nudging left */
  .phone-mock{ --phone-end-transform: rotate(-8deg) translateX(-60px) }
}

/* Smaller header buttons at tablet breakpoint (before hamburger at 880px) */
@media (max-width: 1024px) {
  .site-header .logo img {
    height: 42px !important;
  }
  .header-ctas .btn-primary,
  .header-ctas .btn-outline {
    font-size: 0.8rem !important;
    padding: 7px 11px !important;
    border-radius: 10px !important;
    min-width: auto;
    white-space: nowrap;
    line-height: 1.2;
  }
}

.hero-marketplaces {
    justify-content: center !important;
    width: 100%;
    display: flex;
  }

.hero-marketplaces-mobile {
  display: none;
}

/* Reusable icon drop shadow (used for marketplace chips/icons) */
.icon-drop-shadow{
  filter: drop-shadow(0 4px 4px rgba(0,0,0,0.16));
}

/* Compact marketplace icon row (used in How #3) */
.how-marketplaces{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
  padding-bottom:16px;
}

@media (max-width: 880px){
  .how-marketplaces{
    justify-content: center;
  }
}
.how-marketplaces img{
  width: 48px;
  height: 48px;
  object-fit: contain;
}

/* Info marketplaces - centered layout */
.info-marketplaces{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.info-marketplaces img{
  width: 48px;
  height: 48px;
  object-fit: contain;
}



/* ===========================================
   RESPONSIVE STYLES
   Single breakpoint system:
   - Mobile: max-width 880px
   - Desktop: min-width 881px
   
   Component-specific mobile styles are kept
   near their related desktop styles above.
   This section contains global mobile overrides.
   =========================================== */
@media (max-width: 880px) {
  /* Hero section mobile layout */
  .hero-grid{ flex-direction:column; gap:18px; text-align:center; }
  .hero-copy{ max-width:100%; }
  /* .hero-title font-size now controlled by --font-size-hero variable in :root */
  .hero-actions{ justify-content: center; gap: 16px; }

  /* Pricing grid single column on mobile */
  .pricing-grid{ grid-template-columns: 1fr; }

  .how-inner{ flex-direction: column; align-items: center; flex-wrap: nowrap; }
  .how-text, .how-media{ flex: 0 0 100%; width: 100%; }
  .how-row{
    height: 75vh;                /* 25% reduced from 100vh */
    min-height: 75vh;             /* fallback */
    display: flex;
    align-items: center;           /* center vertically */
    background-image: url('images/howitworks-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow-x: clip;
    scroll-margin-top: 0;          /* no margin needed when centering */
  }
  
  .how-media {
    width: 100%;
    margin-top:-24px;
    background: transparent !important;
    background-color: transparent !important;
  }
  #how-1{ background: url('images/howitworks-bg.png') center/cover no-repeat; }
  #how-2{ background: url('images/howitworks-bg-2.png') center/cover no-repeat; }
  #how-3{ background: url('images/howitworks-bg-3.png') center/cover no-repeat; }
  
  /* White background for features sections on product, thrifters, resellers, and businesses pages on mobile */
  .product-page .how-row,
  .thrifters-page .how-row,
  .resellers-page .how-row,
  .businesses-page .how-row,
  .product-page #how-1,
  .product-page #how-2,
  .product-page #how-3{
    background: #ffffff !important;
    background-image: none !important;
  }

/* ---------- TYPOGRAPHY UTILITIES Mobile ---------- */
  /* Heading sizes (h1, h2, h3, h4, .hero-title, .section-title) are now
     controlled by CSS variables in :root - edit mobile vars there to scale */
  .body-lg{
    font-size: 1em;
    line-height: 1.65;
    color: var(--text-medium);
}
  /* ------------------ */
  .testimonials-grid{ grid-template-columns: 1fr; }
  /* pricing-grid handled above */

  .main-nav{
    display: none;                 /* hide inline links on mobile */
    position: fixed;               /* Use fixed to escape stacking context */
    left: 0;                       /* Align to left edge */
    right: auto;
    top: var(--header-height);     /* drop below fixed header */
    background: rgba(255,255,255,0.95); /* Match header transparency */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 12px;
    border-radius: 0 0 10px 0;     /* Round only bottom-right corner */
    box-shadow: var(--card-shadow);
    width: 280px;                  /* increased width for dropdowns */
    z-index: 10000 !important;     /* Very high z-index to appear above everything */
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    /* Slide-down animation for mobile menu */
    transform: translateY(-10px);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  
  /* Mobile header spacing - keep side padding equal to gaps between adjacent items */
  .header-inner {
    padding: 0 12px;        /* Standard mobile side padding */
    gap: 12px;              /* Match side padding */
  }
  
  .nav-toggle {
    margin-right: 0;        /* Gap handles spacing */
  }
  
  .logo {
    margin-right: auto;     /* Push CTAs to the right */
  }
  
  .header-ctas {
    gap: 12px;              /* Match header padding/gap */
  }
  .main-nav.open{ 
    display: block !important; 
    z-index: 10000 !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
  }
  .main-nav ul{ 
    flex-direction: column; 
    align-items: flex-start; 
    gap: 8px; 
    padding-left: 0; /* No padding needed on mobile */
  }
  .main-nav a{ display: block; width: 100%; padding: 10px 8px; border-radius: 8px; }
  
  /* Mobile nav link wrapper and text */
  .nav-link-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  
  .nav-link-text {
    display: block;
    flex: 1;
    padding: 10px 8px;
    border-radius: 8px;
  }
  .main-nav a:hover{ background: rgba(34,40,52,0.06); }
  .main-nav::before{ display:none; }
  
  /* Mobile dropdown styles */
  .nav-item-dropdown{
    width: 100%;
  }
  .nav-item-simple{
    width: 100%;
  }
  
  /* Mobile dropdown chevron - plus/minus icon in circle - MUST show on mobile */
  .nav-item-dropdown .dropdown-chevron{
    float: right;
    margin-left: 16px;
    margin-right: 0;
    display: inline-flex !important;
    visibility: visible !important;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(56,93,245,0.1);
    border: 1px solid rgba(56,93,245,0.2);
    transition: all 0.3s ease;
  }
  
  .nav-item-dropdown .dropdown-chevron .icon-plus,
  .nav-item-dropdown .dropdown-chevron .icon-minus{
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    opacity: 0.46;
    line-height: 1;
    display: inline-block;
  }
  
  /* White header: Mobile dropdown chevron - use medium green */
  .site-header:not(.header-dark) .nav-item-dropdown .dropdown-chevron .icon-plus,
  .site-header:not(.header-dark) .nav-item-dropdown .dropdown-chevron .icon-minus {
    color: var(--green-5);
  }
  
  .nav-item-dropdown .dropdown-chevron .icon-minus{
    display: none;
  }
  
  .nav-item-dropdown.dropdown-open .dropdown-chevron{
    background: rgba(56,93,245,0.1);
    border-color: rgba(56,93,245,0.2);
  }
  
  .nav-item-dropdown.dropdown-open .dropdown-chevron .icon-plus{
    display: none;
  }
  
  .nav-item-dropdown.dropdown-open .dropdown-chevron .icon-minus{
    display: inline-block !important;
    color: var(--text-dark);
    opacity: 0.5;
  }
  
  .site-header:not(.header-dark) .nav-item-dropdown.dropdown-open .dropdown-chevron .icon-minus {
    color: var(--green-5);
  }
  
  .dropdown-menu{
    position: static !important;
    transform: none !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 8px 0 8px 0 !important;
    min-width: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    box-shadow: none !important;
    border: none !important;
    border-left: 2px solid rgba(56,93,245,0.2) !important;
    border-radius: 0 !important;
    background: transparent !important;
    display: none !important;
    left: auto !important;
  }
  
  /* Disable hover-triggered dropdowns on mobile - only click/tap opens them */
  .nav-item-dropdown:hover > .dropdown-menu,
  .nav-item-dropdown:hover .dropdown-menu,
  .nav-item-dropdown:focus-within .dropdown-menu,
  .dropdown-menu:hover {
    display: none !important;
  }
  
  /* Only .dropdown-open class can show dropdown on mobile */
  .nav-item-dropdown.dropdown-open .dropdown-menu{
    display: block !important;
  }
  
  /* Extra specificity to ensure dropdown shows when open */
  .main-nav .nav-item-dropdown.dropdown-open > .dropdown-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  
  .dropdown-grid{
    grid-template-columns: 1fr;
    gap: 4px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 4px;
  }
  
  /* Mobile dropdown toggle state handled by rules at lines 3412-3437 */
  }
  
  /* Desktop: hide chevron completely - dropdowns show on hover only */
  @media (min-width: 881px){
    /* Hide phone graphic and listing overlay in hero on product page desktop */
    .product-page .hero-media,
    .product-page .hero-listing-overlay{
      display: none;
    }
    
    /* Remove background image (but keep gradients) on product and users pages */
    .users-page .hero-section{
      background-image: none !important;
    }
    
    /* Product page hero - solid secondary color background, no gradients */
    .product-page .hero-section{
      background: var(--secondary-color) !important;
      background-image: none !important;
    }
    
    /* Hero overlay removal handled by consolidated rule */
    
    /* Center hero content when media is hidden */
    .product-page .hero-grid{
      justify-content: center;
      align-items: flex-end !important;
    }
    .resellers-page .hero-grid,
    .businesses-page .hero-grid,
    /* Mobile styles for unique users hero section */
    .hero-users-unique{
      padding-bottom: 40px;
    }
    /* Users page hero-copy (different width - unchanged) */
    .users-page .hero-copy{
      flex: 0 0 auto;
      max-width: 800px;
      text-align: center;
      padding-right: 0;
    }
    
    /* product/thrifters/resellers use --hero-copy-width variable (set in :root mobile) */
    
    .users-page .hero-copy {
      padding: 24px;
      max-width: 92%;
    }
    
    /* resellers hero - inherits full screen centered from desktop */
    
    /* resellers hero-grid - inherits centered layout from desktop */
    
    /* Thrifters page mobile - phone behind copy layout */
    .thrifters-phone-bg {
      top: 50% !important;
      transform: translateY(-50%) !important;
    }
    
    .thrifters-phone-bg .how-img {
      width: auto !important;
      max-width: 100% !important;
      max-height: calc(100vh - 280px) !important; /* Smaller on mobile with more padding */
    }
    
    /* thrifters-hero-copy now uses shared mobile styles above */
    
    /* thrifters hero - inherits full screen centered from desktop */
    
    /* Product page hero-copy - mobile adjustments (margin only, padding from variable) */
    .product-hero-copy{
      margin-bottom: -20px;
      margin-top: 0;
    }
    
    /* Move hero grid lower on mobile */
    .product-page .hero-grid{
      margin-bottom: -40px !important;
    }
    
    /* Users hero-copy text colors now handled in shared base styles */
    
    /* Product page hero text - white for dark glassmorphism background on mobile */
    .product-hero-copy .hero-title,
    .product-hero-copy .lead,
    .product-hero-copy p,
    .product-hero-copy .body-lg{
      color: #FFFFFF !important;
    }
    
    .product-page .hero-actions,
    .thrifters-page .hero-actions,
    .resellers-page .hero-actions,
    .businesses-page .hero-actions,
    .users-page .hero-actions{
      justify-content: center;
    }
  }
  
/* Mobile: App Store badge, nav toggle, header adjustments */
@media (max-width: 880px) {
  /* App Store badges in mobile menu - iOS + Android stacked vertically */
  .nav-appstore-badge{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding-top: 16px;
    margin-top: 12px;
    border-top: 1px solid rgba(34,40,52,0.08);
    width: 100%;
  }
  .nav-appstore-badge .hero-appstore-badge{
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .nav-appstore-badge .hero-appstore-badge img{
    height: 48px;
    width: auto;
    max-width: none;
    display: block;
  }

  /* Show hamburger & keep CTA to its left */
  .nav-toggle{ 
    display: inline-flex !important; 
    z-index: 70 !important; /* Ensure it's above header */
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
  }
  .header-ctas{ 
    gap: 16px; 
    position: relative;
    z-index: 70; /* Ensure CTA area is interactive */
  }
  .header-ctas .link-ghost{ display: none; }
  .header-ctas .header-contact-btn{ display: none !important; }
  .header-ctas .btn-primary{ display: inline-flex; }

  .header-inner{ height: var(--header-height); }
}
  
/* Mobile marketplace icons styling */
@media (max-width: 880px) {
  .hero-marketplaces {
    gap: 16px !important;
    justify-content: center !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    margin-top: 10px !important; /* Tighter row spacing on mobile */
    padding-bottom: 0px;
  }

  .hero-marketplaces img {
    height: 30px !important; /* Smaller on mobile */
    width: auto !important;
  }

  .hero-section .info-marketplaces img {
    width: 30px !important;
    height: 30px !important;
  }

  /* Tighter gap above App Store badges on mobile */
  .hero-section .hero-appstore-badge-row {
    margin-top: 12px !important;
  }

  /* App store badges: smaller on mobile (60% of desktop 60px) */
  .hero-section .hero-appstore-badge-row .app-store-icon,
  .hero-section .hero-appstore-badge-row img {
    height: 36px !important;
    width: auto !important;
  }

  /* Product page hero badges: side by side and smaller on mobile */
  .product-page .hero-appstore-badge-row {
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  .product-page .hero-appstore-badge-row img {
    height: 36px !important;
    width: auto !important;
  }
}

  .price-new{
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--primary-color);
}
.price-old{
  font-size: 12px;
  font-weight: 700;
  color: var(--text-medium);
  text-decoration: line-through;
  opacity: 0.85;
}

/* Small phone adjustments merged into main mobile styles */

/* small helper to maintain consistent spacing for all sections */
.section + .section{ margin-top:0; }

/* REMOVED: main padding-top - hero sections now use --header-height variable for their own clearance */
  /* Smooth anchor offset using scroll-margin instead of pseudo elements */
  :root{ --anchor-offset: calc(var(--header-height) + 16px); } /* header height + cushion */
  section[id]{ scroll-margin-top: var(--anchor-offset); }
  /* Ensure Pricing anchor sits comfortably below fixed header */
  #pricing{ scroll-margin-top: calc(var(--anchor-offset) + 16px); }

/* ===================================================================
   BROWSER COMPATIBILITY LAYER
   Fallbacks for older browsers that don't support modern CSS features
   =================================================================== */

/* ---------------------------------------------------------------------
   BACKDROP-FILTER FALLBACK
   For browsers that don't support backdrop-filter, use solid backgrounds
   --------------------------------------------------------------------- */
@supports not (backdrop-filter: blur(1px)) {
  /* Glass effects - use semi-transparent solid background */
  .glass,
  .glass--light,
  .glass--dark {
    background: rgba(255, 255, 255, 0.95);
  }
  
  .glass--dark {
    background: rgba(26, 26, 26, 0.95);
  }
  
  /* Header - solid white background */
  .site-header,
  .site-header .header-inner {
    background: rgba(255, 255, 255, 0.98);
  }
  
  /* Product page header - solid dark background */
  .product-page .site-header,
  .product-page .site-header .header-inner {
    background: rgba(10, 10, 10, 0.98);
  }
  
  /* Dropdown menus */
  .dropdown-menu {
    background: #ffffff;
  }
  
  .product-page .dropdown-menu {
    background: #1a1a1a;
  }
  
  /* Promo banner */
  .promo-banner {
    background: rgba(255, 255, 255, 0.95);
  }
  
  /* Orbit icons */
  .orbit-icon {
    background: rgba(255, 255, 255, 0.95);
  }
  
  /* Badges */
  .cta-badge {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
  }
  
  /* Hero copy containers */
  .thrifters-hero-copy {
    background: rgba(255, 255, 255, 0.92); /* More opaque for visibility without blur */
    border: 1px solid rgba(255, 255, 255, 0.6);
  }
  
  .resellers-hero-copy {
    background: rgba(255, 255, 255, 0.92); /* More opaque for visibility without blur */
    border: 1px solid rgba(255, 255, 255, 0.6);
  }
  
  .businesses-hero-copy {
    background: rgba(255, 255, 255, 0.92); /* More opaque for visibility without blur */
    border: 1px solid rgba(255, 255, 255, 0.6);
  }
  
  .users-page .hero-users-unique .users-hero-content-box {
    background: rgba(255, 255, 255, 0.92); /* More opaque for visibility without blur */
    border: 1px solid rgba(255, 255, 255, 0.6);
  }
  
  .users-page .hero-users-unique .users-hero-content-box .hero-title,
  .users-page .hero-users-unique .users-hero-content-box .lead,
  .users-page .hero-users-unique .users-hero-content-box p,
  .users-page .hero-users-unique .users-hero-content-box .body-lg,
  .users-page .hero-users-unique .users-hero-content-box .link-ghost {
    color: var(--secondary-color) !important;
  }
}

/* ---------------------------------------------------------------------
   CLIP-PATH FALLBACK
   For browsers that don't support clip-path, hide the curved elements
   and show standard rectangular sections
   --------------------------------------------------------------------- */
@supports not (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)) {
  /* How section curved headers - show as standard section */
  .section--how-header {
    border-radius: 0;
  }
  
  /* Text reveal animations - show text immediately */
  .how-row .how-text {
    opacity: 1;
  }
}

/* ---------------------------------------------------------------------
   CLAMP() FALLBACK
   For browsers that don't support clamp(), provide fixed fallback values
   These are placed BEFORE the clamp() values in the cascade
   --------------------------------------------------------------------- */
@supports not (width: clamp(1px, 1vw, 2px)) {
  /* Hero copy padding - use medium fixed value */
  @media (min-width: 881px) {
    .hero-copy {
      padding-right: 80px; /* Middle ground between 16px and 160px */
    }
    .hero-section .hero-copy {
      padding-right: 68px; /* Middle ground between 4px and 148px */
    }
  }
}

/* ---------------------------------------------------------------------
   CSS CUSTOM PROPERTIES (VARIABLES) FALLBACK
   For IE11 and other browsers that don't support CSS variables
   --------------------------------------------------------------------- */
@supports not (--test: 0) {
  /* Provide hardcoded fallbacks for critical variables */
  body {
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #1D2639;
  }
  
  a {
    color: #385DF5;
  }
  
  .btn-primary {
    background: linear-gradient(135deg, #00FFD7 0%, #00C7A9 100%);
    color: #001B1B;
    border: 1px solid rgba(255,255,255,0.55);
  }
  
  .btn-secondary {
    background: #8BDDD0;
    color: #1D2639;
  }
}

/* ---------------------------------------------------------------------
   REDUCED MOTION COMPATIBILITY
   Already implemented throughout, but ensure animations are disabled
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   SMALL DESKTOP / LOW RESOLUTION COMPATIBILITY
   For screens 881px-1366px (typical: 1366x768 laptops, older monitors)
   Reduces header and UI element sizes while maintaining legibility
   ===================================================================== */

/* Small desktop breakpoint - for screens with limited width AND limited height */
/* Only triggers when BOTH width is narrow AND height is constrained */
@media (min-width: 881px) and (max-width: 1366px) and (max-height: 900px) {
  
  /* --- ROOT VARIABLES FOR SMALL DESKTOP --- */
  :root {
    --header-height: 56px;  /* Compact: shorter than the 68px desktop default */
  }
  
  /* --- HEADER COMPACT MODE --- */
  .site-header {
    /* Slightly reduce blur for performance on lower-end devices */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  
  .header-inner {
    padding: 0 16px; /* Reduced horizontal padding */
  }
  
  /* Logo - smaller size for breakpoint mode */
  .site-header .logo img {
    height: 37px; /* Smaller than natural size */
    width: auto;
  }
  
  /* Navigation - tighten spacing */
  .main-nav ul {
    gap: 20px; /* Reduced from 32px */
  }
  
  .main-nav {
    padding-left: 20px; /* Reduced from 32px */
  }
  
  .main-nav::before {
    /* Divider line - same but positioned for smaller header */
    height: 20px; /* Slightly shorter divider */
  }
  
  /* Nav link text - slightly smaller */
  .nav-link-text,
  .main-nav a {
    font-size: 14px; /* Reduced from default ~16px */
  }
  
  /* Dropdown arrow - smaller */
  .nav-item-dropdown .nav-link-text::after {
    font-size: 8px; /* Reduced from 10px */
    margin-left: 6px;
  }
  
  /* Header CTAs - compact */
  .header-ctas {
    gap: 10px; /* Reduced from 12-16px */
  }
  
  /* ALL CTAs - compact for height-constrained screens (btn-sm sizing) */
  .btn {
    font-size: 13px;
    padding: 6px 12px;
  }
  
  .btn-primary {
    font-size: 13px;
    padding: 6px 12px;
  }
  
  .btn-primary.large {
    font-size: 13px;
    padding: 10px 16px;
  }
  
  /* Chat button - smaller */
  .header-chat-btn {
    width: 32px;
    height: 32px;
  }
  
  .header-chat-btn svg {
    width: 16px;
    height: 16px;
  }
  
  /* --- DROPDOWN MENUS - COMPACT --- */
  .dropdown-menu {
    min-width: 400px;
    max-width: 460px;
    padding: 12px;
  }
  
  .dropdown-grid {
    gap: 10px;
  }
  
  .dropdown-item {
    padding: 10px 12px;
  }
  
  .dropdown-icon {
    width: 36px;
    height: 36px;
  }
  
  .dropdown-icon img {
    width: 20px;
    height: 20px;
  }
  
  .dropdown-content h4 {
    font-size: 13px;
  }
  
  .dropdown-content p {
    font-size: 11px;
  }
}

/* Index hero graphic: cap height when viewport is height-constrained so it doesn't clip.
   Content images only (img elements); does not apply to background/texture/container-bg imagery.
   Hide the listing overlay in vh mode to save vertical space. */
@media (min-width: 881px) and (max-height: 900px) {
  .home-page .hero-section .hero-media img {
    max-height: 50vh;
    width: auto;
    height: auto;
    object-fit: contain;
  }
  .home-page .hero-section .hero-media .hero-listing-overlay {
    display: none;
  }
}

/* ---------------------------------------------------------------------
   VERY SMALL DESKTOP / HEIGHT-CONSTRAINED
   For screens with limited vertical space (e.g., 768px height)
   --------------------------------------------------------------------- */
@media (min-width: 881px) and (max-height: 800px) {
  
  :root {
    --header-height: 52px; /* Even more compact for short screens */
    
    /* Reduced typography for height-constrained screens */
    --font-size-hero: 38px;
    --font-size-h1: 34px;
    --font-size-h2: 28px;
    --font-size-h3: 22px;
    --font-size-h4: 18px;
  }
  
  /* Body large text - reduced for short screens */
  .body-lg {
    font-size: 1.05em;
    line-height: 1.5;
  }
  
  /* Lead text - same reduction */
  .lead {
    font-size: 0.95em;
  }
  
  /* Big feature box - constrain height, use regular body font */
  .product-page #feature-content {
    max-height: 52vh !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 22px 26px !important;
  }
  .product-page #feature-content .feature-description {
    font-size: 1em !important;
    line-height: 1.5 !important;
  }
  /* Equal gaps; icon 48px (match small feature boxes) */
  .product-page #feature-content .feature-content-text .feature-icon {
    width: 48px !important;
    height: 48px !important;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
  }
  .product-page #feature-content .feature-content-text .feature-title,
  .product-page #feature-content .feature-content-text .feature-description {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
  }
  .product-page #feature-content .feature-marketplaces {
    margin-top: 10px !important;
  }
  .product-page #feature-content .feature-marketplaces p {
    margin-bottom: 8px !important;
  }
  .product-page #feature-content .feature-content-graphics {
    min-height: 0 !important;
  }
  /* Match product hero: explicit vh constraints so images scale with viewport */
  .product-page #feature-content .feature-content-graphics img {
    max-width: min(45vw, 38vh) !important;
    max-height: 38vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
  /* Smaller marketplace icons in Multi-List box for height-constrained screens */
  .product-page #feature-content .how-marketplaces img {
    width: 30px !important;
    height: 30px !important;
  }
  .product-page #feature-content .how-marketplaces {
    gap: 8px !important;
    margin-top: 10px !important;
  }
  
  /* Logo - smaller size for very short screens */
  .site-header .logo img {
    height: 34px; /* Even smaller for very constrained screens */
    width: auto;
  }
  
  /* Tighter nav spacing */
  .main-nav ul {
    gap: 16px;
  }
  
  .main-nav {
    padding-left: 16px;
  }
  
  /* Smaller nav text */
  .nav-link-text,
  .main-nav a {
    font-size: 13px;
  }
  
  /* ALL CTAs - ultra-compact for very short screens (btn-sm sizing) */
  .btn {
    font-size: 13px;
    padding: 6px 12px;
  }
  
  .btn-primary {
    font-size: 13px;
    padding: 6px 12px;
  }
  
  .btn-primary.large {
    font-size: 13px;
    padding: 10px 16px;
  }
  
  /* Smaller chat button */
  .header-chat-btn {
    width: 28px;
    height: 28px;
  }
  
  .header-chat-btn svg {
    width: 14px;
    height: 14px;
  }
}

/* =====================================================================
   MODERATELY HEIGHT-CONSTRAINED (800px - 900px height)
   Slightly reduced typography for screens not quite as short
   ===================================================================== */
@media (min-width: 881px) and (max-height: 900px) and (min-height: 801px) {
  :root {
    --font-size-hero: 42px;
    --font-size-h1: 38px;
    --font-size-h2: 32px;
    --font-size-h3: 24px;
    --font-size-h4: 20px;
  }
  
  /* Body large text - slightly reduced for moderately short screens */
  .body-lg {
    font-size: 1.15em;
    line-height: 1.55;
  }
  
  /* Lead text - same reduction */
  .lead {
    font-size: 1em;
  }
  
  /* Big feature box - constrain for moderately short viewports (801-900px) */
  .product-page #feature-content {
    max-height: 58vh !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 28px 30px !important;
  }
  .product-page #feature-content .feature-description {
    font-size: 1em !important;
    line-height: 1.5 !important;
  }
  /* Equal gaps; icon 48px (match small feature boxes) */
  .product-page #feature-content .feature-content-text .feature-icon {
    width: 48px !important;
    height: 48px !important;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
  }
  .product-page #feature-content .feature-content-text .feature-title,
  .product-page #feature-content .feature-content-text .feature-description {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
  }
  .product-page #feature-content .feature-marketplaces {
    margin-top: 12px !important;
  }
  .product-page #feature-content .feature-marketplaces p {
    margin-bottom: 8px !important;
  }
  .product-page #feature-content .feature-content-graphics {
    min-height: 0 !important;
  }
  /* Match product hero: explicit vh constraints for moderately short viewports */
  .product-page #feature-content .feature-content-graphics img {
    max-width: min(45vw, 44vh) !important;
    max-height: 44vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
  /* Smaller marketplace icons in Multi-List box for moderately short viewports */
  .product-page #feature-content .how-marketplaces img {
    width: 34px !important;
    height: 34px !important;
  }
  .product-page #feature-content .how-marketplaces {
    gap: 10px !important;
    margin-top: 12px !important;
  }
}

/* ==========================================================================
   PRICING v2 — NATIVE APP LAUNCH
   ==========================================================================
   Layered on top of the existing pricing styles rather than replacing them:
   the plan cards, badges, tags, prices and CTAs are all the v1 components, so
   v2 reads as the same design system. Nothing above this block was modified.

   Visibility is CSS-driven so the page never flashes the wrong prices, and it
   fails closed — with no JS, #pricing-v2 stays hidden and v1 renders exactly
   as it does today. pricing-config.js adds the html class and then removes the
   losing section from the DOM entirely.
   ========================================================================== */

#pricing-v2 { display: none; }
html.pricing-v2-on #pricing-v2 { display: block; }
html.pricing-v2-on #pricing:not(.section--pricing-v2) { display: none; }

/* FAQ answers that differ between the two pricing versions */
.pricing-v2-only { display: none; }
html.pricing-v2-on .pricing-v2-only { display: block; }
html.pricing-v2-on .pricing-v1-only { display: none; }

/* ---------- Featured consumer card ---------- */

/* Single full-width card in its own grid, so the shared .pricing-grid reveal
   animation and resize watchdog pick it up with no JS changes. */
.pricing-grid--featured{
  grid-template-columns: 1fr;
  max-width: 880px;
}

.plan-card--featured{
  flex-direction: row;
  align-items: stretch;
  gap: 32px;
  padding: 32px;
  border: 2px solid rgba(0, 199, 169, 0.45);
}

/* Featured card is both :first-child and :last-child of its grid, which would
   otherwise inherit the left-pushed edge shadow. It's centred, so centre it. */
@media (min-width: 881px){
  .section--pricing .pricing-grid--featured .plan-card--featured{
    box-shadow: 0 0px 46px rgba(15,23,42,0.24);
  }
}

.plan-card--featured__intro,
.plan-card--featured__detail{
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
}

/* Vertical rule between the price side and the what-you-get side */
.plan-card--featured__detail{
  padding-left: 32px;
  border-left: 1px solid rgba(17,24,39,0.12);
  justify-content: center;
}

.plan-card--featured h4{
  font-size: 24px;
  margin-top: 4px;
}

.plan-card--featured .plan-description{
  font-size: 14px;
  margin-bottom: 16px;
}

.plan-card--featured .price{
  margin: 4px 0 2px;
}

.plan-card--featured .price-new{
  font-size: 56px;
}

/* The struck-through monthly price sitting next to the annual rate. The base
   .price-old is 12px for the old promo badges — far too small to read as the
   anchor against a 56px number. */
.plan-card--featured .price-old{
  font-size: 26px;
  font-weight: 700;
  color: var(--text-medium);
  opacity: 1;
  margin-right: 4px; /* .price's 4px gap alone reads as flush at this size */
}

.plan-card--featured .per{
  font-size: 15px;
}

.plan-price-note{
  font-size: 12px;
  color: var(--text-medium);
  line-height: 1.45;
  margin: 0 0 4px;
}

/* The figure that actually gets charged — don't bury it in the fine print. */
.plan-price-note strong{
  font-size: 13px;
  font-weight: 800;
  color: var(--text-dark);
}

/* .plan-tags uses `margin: auto 0 0 0` to sink to the bottom of a column card.
   Here it sits inline under the price instead. */
.plan-card--featured .plan-tags{
  margin: 16px 0 0 0;
}

/* The featured card's list already sits beside a divider, so it doesn't need
   the horizontal rule the stacked cards use. */
.plan-card--featured ul{
  border-top: 0;
  padding-top: 0;
  margin: 0 0 20px 0;
}

.plan-card--featured li{
  font-size: 15px;
}

.plan-card--featured .plan-card-cta{
  width: 100%;
  text-align: center;
  justify-content: center;
}

.plan-trial-note{
  font-size: 12px;
  color: var(--text-medium);
  text-align: center;
  line-height: 1.45;
  margin: 10px 0 0;
}

/* ---------- Monthly / annual toggle ---------- */

/* Both price blocks live in the markup; data-billing on the card decides which
   one is shown, so the copy stays editable in the HTML. */
.plan-card[data-billing="annual"] .price--monthly,
.plan-card[data-billing="annual"] .plan-price-note--monthly,
.plan-card[data-billing="monthly"] .price--annual,
.plan-card[data-billing="monthly"] .plan-price-note--annual{
  display: none;
}

.billing-toggle{
  display: inline-flex;
  align-self: flex-start;
  gap: 4px;
  padding: 4px;
  margin: 0 0 14px;
  background: rgba(17,24,39,0.06);
  border-radius: 999px;
}

.billing-toggle__btn{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-medium);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.billing-toggle__btn:hover{
  color: var(--text-dark);
}

.billing-toggle__btn.is-active{
  background: #ffffff;
  color: var(--text-dark);
  box-shadow: 0 1px 4px rgba(15,23,42,0.18);
}

.billing-toggle__btn:focus-visible{
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.billing-toggle__save{
  padding: 2px 7px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--primary-color) 0%, #A3E635 100%);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: #ffffff;
  white-space: nowrap;
}

/* Dim the savings pill once the user is looking at monthly pricing */
.plan-card[data-billing="monthly"] .billing-toggle__save{
  opacity: 0.55;
}

/* ---------- QuickScans vs Listing Credits explainer ---------- */

/* Promoted out of the FAQ: on a one-plan page the credit meter is the thing
   people need explained before they can read the price. */
.pricing-v2-explainer{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 880px;
  margin: 22px auto 0;
}

.pricing-v2-explainer__item{
  padding: 20px 22px;
  background: #ffffff;
  border: 1px solid rgba(17,24,39,0.10);
  border-radius: 14px;
}

.pricing-v2-explainer__item h4{
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  color: var(--primary-color);
}

.pricing-v2-explainer__item p{
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-medium);
}

/* ---------- B2B row ---------- */

.pricing-v2-b2b-heading{
  position: relative;
  z-index: 1;
  max-width: 1020px;
  margin: 54px auto 0;
  text-align: center;
}

.pricing-v2-b2b-heading h4{
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--text-dark);
}

.pricing-v2-b2b-heading p{
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-medium);
}

.pricing-grid--b2b{
  grid-template-columns: repeat(3, 1fr);
  max-width: 880px;
  margin-top: 26px;
}

/* Three cards instead of four: keep the outer cards' shadows pushed inward and
   the middle one centred, matching the v1 grid's edge treatment. */
@media (min-width: 881px){
  .section--pricing .pricing-grid--b2b .plan-card:nth-child(2){
    box-shadow: 0 0px 46px rgba(15,23,42,0.24);
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 880px){
  .plan-card--featured{
    flex-direction: column;
    gap: 24px;
    padding: 28px 22px 24px;
  }

  /* Divider moves from the side to between the two stacked halves */
  .plan-card--featured__detail{
    padding-left: 0;
    padding-top: 22px;
    border-left: 0;
    border-top: 1px solid rgba(17,24,39,0.12);
  }

  .plan-card--featured .price-new{
    font-size: 46px;
  }

  /* Full-width so both options stay comfortably tappable */
  .billing-toggle{
    display: flex;
    align-self: stretch;
  }

  .billing-toggle__btn{
    flex: 1 1 0;
    justify-content: center;
    padding: 10px 12px;
  }

  .pricing-v2-explainer{
    grid-template-columns: 1fr;
  }

  .pricing-v2-b2b-heading{
    margin-top: 40px;
  }

  .pricing-grid--b2b{
    grid-template-columns: 1fr;
  }
}

/* ---------- v2 on the dark pricing sections (home + product) ----------
   Those two pages paint .section--pricing on --text-dark with black plan
   cards, so every v2 surface that inherited a light default gets flipped
   here — same pattern as the v1 overrides further up this file. */

.product-page .section--pricing-v2 .plan-card--featured,
.home-page .section--pricing-v2 .plan-card--featured{
  border-color: rgba(0, 199, 169, 0.5);
}

.product-page .section--pricing-v2 .plan-card--featured__detail,
.home-page .section--pricing-v2 .plan-card--featured__detail{
  border-left-color: rgba(255,255,255,0.12);
}

.product-page .section--pricing-v2 .plan-price-note,
.home-page .section--pricing-v2 .plan-price-note,
.product-page .section--pricing-v2 .plan-trial-note,
.home-page .section--pricing-v2 .plan-trial-note{
  color: rgba(255,255,255,0.6);
}

.product-page .section--pricing-v2 .plan-price-note strong,
.home-page .section--pricing-v2 .plan-price-note strong{
  color: #ffffff;
}

/* --text-medium is a dark teal — invisible against a black card */
.product-page .section--pricing-v2 .plan-card--featured .price-old,
.home-page .section--pricing-v2 .plan-card--featured .price-old{
  color: rgba(255,255,255,0.42);
}

.product-page .section--pricing-v2 .billing-toggle,
.home-page .section--pricing-v2 .billing-toggle{
  background: rgba(255,255,255,0.07);
}

.product-page .section--pricing-v2 .billing-toggle__btn,
.home-page .section--pricing-v2 .billing-toggle__btn{
  color: rgba(255,255,255,0.55);
}

.product-page .section--pricing-v2 .billing-toggle__btn:hover,
.home-page .section--pricing-v2 .billing-toggle__btn:hover{
  color: #ffffff;
}

/* Active pill stays white-on-black — the selected billing period has to be
   unmistakable, since it's what the visitor is about to be charged. */
.product-page .section--pricing-v2 .billing-toggle__btn.is-active,
.home-page .section--pricing-v2 .billing-toggle__btn.is-active{
  background: #ffffff;
  color: var(--text-dark);
}

.product-page .section--pricing-v2 .pricing-v2-explainer__item,
.home-page .section--pricing-v2 .pricing-v2-explainer__item{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
}

.product-page .section--pricing-v2 .pricing-v2-explainer__item h4,
.home-page .section--pricing-v2 .pricing-v2-explainer__item h4{
  color: var(--secondary-color);
}

.product-page .section--pricing-v2 .pricing-v2-explainer__item p,
.home-page .section--pricing-v2 .pricing-v2-explainer__item p{
  color: rgba(255,255,255,0.72);
}

.product-page .section--pricing-v2 .pricing-v2-b2b-heading h4,
.home-page .section--pricing-v2 .pricing-v2-b2b-heading h4{
  color: #ffffff;
}

.product-page .section--pricing-v2 .pricing-v2-b2b-heading p,
.home-page .section--pricing-v2 .pricing-v2-b2b-heading p{
  color: rgba(255,255,255,0.62);
}

@media (max-width: 880px){
  .product-page .section--pricing-v2 .plan-card--featured__detail,
  .home-page .section--pricing-v2 .plan-card--featured__detail{
    border-top-color: rgba(255,255,255,0.12);
  }
}