/* ============================
   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: 'Urbanist', 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: 16px;      /* 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: 84px;
  
  /* 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: 72px;
    
    /* 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: 16px;      /* 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:16px;
  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;
}

/* Desktop only: Solutions dropdown – first item (Resellers) spans full width */
@media (min-width: 881px) {
  .solutions-dropdown .dropdown-grid .dropdown-item:first-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;
  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;
  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.9rem;
    line-height: 1.35;
    padding: 10px 0;
  }
  .how-feature-list li{
    font-size: 0.9rem;
    line-height: 1.35;
    padding: 6px;
  }
  .footer-links li{
    font-size: 0.9rem;
    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: right calc(50% + 100px), 0 0;
  background-size: auto 85%, 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% + 350px) calc(50% + 100px), 0 0; }
  100%   { background-position: right calc(50% + 100px), 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 {
  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;
}
/* 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 {
  display: none !important;
}

/* Thrifters, Resellers, and Businesses hero-grid - bottom aligned (consolidated) */
.thrifters-page .hero-grid,
.resellers-page .hero-grid,
.businesses-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 */
    padding-bottom: 12px !important; /* Reduced to prevent scroll-within-section on mobile */
    margin-bottom: -48px !important; /* Overlap into container below */
    position: relative !important;
    z-index: 5 !important; /* Stack above section below */
    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 {
    margin-top: 56px !important; /* Lower the app store badges */
  }
  
  .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; }
  .home-page .hero-section{ background-position: right bottom, 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.06rem; 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;
}

/* 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: 520px;           /* base size */
  max-width: 450px;        /* 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: 0;
  top: 50%;
  transform: translateY(40%);
  width: min(380px, 30vw);
  z-index: 6;
  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: auto !important;
    max-height: none !important;
    align-items: flex-start !important;
    padding-top: calc(8px + var(--header-height)) !important;
    padding-bottom: 24px !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: 42vw !important;
    width: 160px !important;
    position: relative !important;
    z-index: 6 !important;
    transform: rotate(-6deg) !important;
    --phone-end-transform: rotate(-6deg) !important;
  }
  
  /* Home hero: mobile variant - smaller terminal */
  .home-page .hero-process-terminal {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: translateY(20%) !important;
    width: min(160px, 32vw) !important;
    max-width: 160px !important;
    flex-shrink: 0 !important;
    z-index: 4 !important;
    margin-left: -40px !important;
  }
  .home-page .hero-process-terminal .terminal-body {
    padding: 5px 7px !important;
    gap: 5px !important;
  }
  .home-page .hero-process-terminal .terminal-titlebar {
    padding: 4px 7px !important;
  }
  .home-page .hero-process-terminal .terminal-title {
    font-size: 7px !important;
  }
  .home-page .hero-process-terminal .terminal-dot {
    width: 5px !important;
    height: 5px !important;
  }
  .home-page .hero-process-terminal .step-text {
    font-size: 7px !important;
  }
  .home-page .hero-process-terminal .terminal-step {
    gap: 5px !important;
  }
  .home-page .hero-process-terminal .step-icon {
    width: 9px !important;
    height: 9px !important;
  }
  .home-page .hero-process-terminal .terminal-step.complete .step-icon::after {
    left: 2px !important;
    top: 0 !important;
    width: 3px !important;
    height: 5px !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.95rem;
  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{
  padding: 120px 0;
  background: #1D2639;
  position: relative;
  overflow: hidden;
}
.section--speed-comparison .section-title{
  color: #ffffff;
  text-align: center;
  font-family: 'linotype-sabon', var(--font-serif);
  font-weight: 400;
  font-size: calc(var(--font-size-hero) * 1.6);
}
.section--speed-comparison .section-sub{
  color: rgba(255,255,255,0.65);
  text-align: center;
  font-size: 1.25rem;
  margin-bottom: 56px;
}
.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;
}
.speed-chart-label{
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 16px;
  text-align: center;
}
.speed-chart-card canvas{
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 880px){
  .section--speed-comparison{ padding: 80px 0; }
  .section--speed-comparison .section-title{ font-size: calc(var(--font-size-hero) * 1.15); }
  .section--speed-comparison .section-sub{ font-size: 1rem; 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: var(--secondary-color) !important;
}

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

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

.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: rgba(0, 0, 0, 0.55);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* 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;
}

.follow-us .social-media-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  animation: none;
}

.follow-us .social-media-icons a img {
  height: 96px !important;
  width: auto !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: 1rem;
  }
  
  .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.9rem;
  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.9rem;
  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.9rem;
  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.9rem;
  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.9rem;
    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 - default teal (same as index) */
  .thrifters-page .section--how-header {
    --how-header-bg: linear-gradient(360deg, #00455c 0%, #003040 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.95rem !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: 1rem !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;
}
/* Thrifters page - larger graphic for info-1 (portable shopping expert) */
.thrifters-page #info-1 .how-img {
  max-width: 640px;
  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;
}

/* ---------- 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.92rem; }

/* 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.05rem;
  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;
}

/* 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 {
  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 { animation: none; }
}
/* Home page pricing: "Flexible Pricing" - Sabon (Adobe Fonts), double size, gradient text */
.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;
}
/* 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 page: text-dark pricing bg + spinning gradient-bg-dark overlay */
.product-page .section--pricing {
  background: var(--text-dark) !important;
}
.product-page .section--pricing::before {
  background: url('images/gradient-bg-dark.png') no-repeat center;
}
.product-page .section--pricing .section-title,
.product-page .section--pricing .section-sub {
  color: #FFFFFF !important;
}
/* Product page: dark pricing cards */
.product-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{
  color: var(--primary-color);
}
.product-page .section--pricing .plan-card li{
  color: rgba(255,255,255,0.85);
}
.product-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{
  border-top-color: rgba(255,255,255,0.12);
}
.product-page .section--pricing .price .per{
  color: rgba(255,255,255,0.5);
}
.product-page .section--pricing .plan-tag{
  color: var(--primary-color);
  border-color: var(--primary-color);
}
.product-page .section--pricing .plan-card.recommended{
  border-color: rgba(94, 97, 255, 0.55);
}
.product-page .section--pricing .plan-card.recommended h4{
  color: #a855f7 !important;
}
.product-page .section--pricing .plan-card.recommended .plan-tag{
  color: #a855f7;
  border-color: #a855f7;
}
/* --- 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{ contain: paint; 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(5,1fr);
  gap:18px;
  margin-top:20px;
  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: 20px;
  border-radius: 14px;
  text-align: left;                 /* left-align content like screenshot */
  box-shadow: var(--card-shadow);
  position: relative; z-index: 1;
}

/* 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{ 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 .plan-tag{
  color: var(--accent-purple);
  border-color: var(--accent-purple);
}
.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 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: 8px 0 0 0;
}
.plan-tag{
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary-color);
  background: transparent;
  border: 1px solid var(--primary-color);
  border-radius: 999px;
  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: 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.125rem;
  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: 0;
    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;
}
.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.3rem;   /* ~24px on 16px base */
  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: 32px !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: 1rem;
    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;
  }
}

  .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;  /* Reduced from 84px (~67% of original) */
  }
  
  /* --- 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: 28px; /* 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.05rem;
    line-height: 1.5;
  }
  
  /* Lead text - same reduction */
  .lead {
    font-size: 0.95rem;
  }
  
  /* 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: 1rem !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: 26px; /* 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.15rem;
    line-height: 1.55;
  }
  
  /* Lead text - same reduction */
  .lead {
    font-size: 1rem;
  }
  
  /* 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: 1rem !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;
  }
}