/* ══════════════════════════════════════════════════════════
   ClockInHR — Impeccable Layout System
   8-pt spatial scale · fluid section rhythm · grid harmony
   Works across Precision Dark · Bento · Codex variants
   ══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   §1  SPATIAL TOKENS — the 8-pt grid, fluid section rhythm
   ───────────────────────────────────────────────────────── */
:root {
  /* 8-pt base scale */
  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-5:  40px;
  --sp-6:  48px;
  --sp-8:  64px;
  --sp-10: 80px;
  --sp-12: 96px;
  --sp-16: 128px;
  --sp-20: 160px;

  /* Fluid section padding (clamp: mobile → desktop) */
  --section-xs: clamp(40px,  5vw,  64px);   /* ticker / compact */
  --section-sm: clamp(56px,  6vw,  80px);   /* stats bar        */
  --section-md: clamp(72px,  8vw, 112px);   /* standard section */
  --section-lg: clamp(96px, 10vw, 148px);   /* feature / CTA    */
  --section-xl: clamp(112px,12vw, 176px);   /* hero / landing   */

  /* Grid gaps */
  --gap-xs: clamp(12px, 1.2vw, 20px);
  --gap-sm: clamp(16px, 1.8vw, 28px);
  --gap-md: clamp(20px, 2.2vw, 36px);
  --gap-lg: clamp(28px, 3.0vw, 48px);
  --gap-xl: clamp(36px, 4.0vw, 64px);

  /* Container */
  --cx-max:    1312px;
  --cx-gutter: clamp(20px, 4.5vw, 72px);

  /* Z-index stack */
  --z-base:    0;
  --z-raised:  10;
  --z-float:   20;
  --z-sticky:  100;
  --z-nav:     999;
  --z-modal:   9999;
  --z-toast:   99999;
}

/* ─────────────────────────────────────────────────────────
   §2  CONTAINER — max-width + fluid gutters
   ───────────────────────────────────────────────────────── */
.container {
  max-width: var(--cx-max) !important;
  padding-left:  var(--cx-gutter) !important;
  padding-right: var(--cx-gutter) !important;
  margin-left:  auto !important;
  margin-right: auto !important;
}

/* ─────────────────────────────────────────────────────────
   §3  NAVBAR — stacking + height
   ───────────────────────────────────────────────────────── */
#navbar {
  z-index: var(--z-nav);
  height: clamp(64px, 6vw, 80px);
  display: flex;
  align-items: center;
}
/* Ensure navbar container fills height */
#navbar .container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Dropdown positioning */
.hs-dropdown-menu {
  z-index: var(--z-sticky);
}
/* Demo modal */
#hs-demo-modal {
  z-index: var(--z-modal);
}
/* Floating badge */
.hero-badge-float {
  z-index: var(--z-float);
}

/* ─────────────────────────────────────────────────────────
   §4  MAIN HERO — index.html (hero-redesign)
   ───────────────────────────────────────────────────────── */
section#home.hero-redesign {
  padding-top:    clamp(108px, 11vw, 160px);
  padding-bottom: clamp(80px,  9vw, 128px);
}

/* Two-column grid: give text 52% and dashboard 48% */
section#home.hero-redesign .grid.lg\:grid-cols-2 {
  grid-template-columns: 52fr 48fr !important;
  align-items: center;
  gap: var(--gap-xl) var(--gap-xl);
}

/* Text column: constrain max-width for reading comfort */
section#home.hero-redesign .grid.lg\:grid-cols-2 > div:first-child {
  max-width: 600px;
}

/* Dashboard mockup: elevation + perspective tilt */
section#home.hero-redesign .grid.lg\:grid-cols-2 > div:last-child > div {
  transform: perspective(1200px) rotateY(-3deg) rotateX(1.5deg);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
section#home.hero-redesign .grid.lg\:grid-cols-2 > div:last-child > div:hover {
  transform: perspective(1200px) rotateY(-1deg) rotateX(0.5deg) translateY(-6px);
}

/* Stat pills row — align left with generous gap */
section#home.hero-redesign .flex.flex-wrap.gap-5 {
  gap: var(--sp-5) !important;
  margin-top: var(--sp-5) !important;
}

/* CTA button row */
section#home.hero-redesign .flex.flex-wrap.items-center {
  gap: var(--sp-3) !important;
  margin-top: var(--sp-6) !important;
}

/* ─────────────────────────────────────────────────────────
   §5  STATS BAR — breathing room + visual lift
   ───────────────────────────────────────────────────────── */
.stats-dark-bar {
  padding-top:    var(--section-sm) !important;
  padding-bottom: var(--section-sm) !important;
}

/* Stats 4-col grid: add inner dividers with consistent gap */
.stats-dark-bar .grid.lg\:grid-cols-4 {
  gap: var(--gap-sm) !important;
}

/* Each stat cell */
.stats-dark-bar .flex.flex-col.items-center {
  padding-block: var(--sp-3);
  position: relative;
}

/* Number + icon row spacing */
.stats-dark-bar .flex.items-center.gap-2 {
  gap: var(--sp-2) !important;
  margin-bottom: var(--sp-1) !important;
}

/* ─────────────────────────────────────────────────────────
   §6  SECTION INTRO BLOCKS — label + h2 + subtitle
   ───────────────────────────────────────────────────────── */

/* Section intros on index.html */
.max-w-2xl.mx-auto.text-center {
  max-width: 680px !important;
}

/* Spacing below section intros before card grids */
.max-w-2xl.mx-auto.text-center.mb-14 {
  margin-bottom: clamp(48px, 5vw, 72px) !important;
}

.max-w-2xl.mx-auto.text-center.mb-12 {
  margin-bottom: clamp(40px, 4.5vw, 64px) !important;
}

/* Space between clk-label and heading */
.clk-label + h2,
.clk-label + h1 {
  margin-top: var(--sp-3) !important;
}
/* Space between heading and subtitle paragraph */
h2 + p,
h1 + p {
  margin-top: var(--sp-3) !important;
}

/* ─────────────────────────────────────────────────────────
   §7  STANDARD CONTENT SECTIONS — fluid section rhythm
   ───────────────────────────────────────────────────────── */

/* Override Tailwind py-20 on sections (element+class beats class) */
section.py-20 {
  padding-top:    var(--section-md) !important;
  padding-bottom: var(--section-md) !important;
}

section.py-16 {
  padding-top:    var(--section-sm) !important;
  padding-bottom: var(--section-sm) !important;
}

/* First content section immediately below hero gets less top gap
   (visual continuity with the hero) */
section#home.hero-redesign + section {
  padding-top: var(--section-sm) !important;
}

.stats-dark-bar + section {
  padding-top: var(--section-md) !important;
}

/* ─────────────────────────────────────────────────────────
   §8  PAIN CARDS GRID — two-column with equal-height rows
   ───────────────────────────────────────────────────────── */
.grid.md\:grid-cols-2:has(.pain-card-v2) {
  gap: var(--gap-md) !important;
  align-items: stretch;
}

.pain-card-v2 {
  height: 100%;
  min-height: 112px;
}

/* ─────────────────────────────────────────────────────────
   §9  FEATURE CARDS GRID — 3-col equal height + stagger gap
   ───────────────────────────────────────────────────────── */
.grid.lg\:grid-cols-3.md\:grid-cols-2:has(.feat-card) {
  gap: var(--gap-md) !important;
  align-items: stretch;
}

/* Top gap above feat card grid */
.grid.lg\:grid-cols-3.md\:grid-cols-2.md\:pt-16 {
  padding-top: clamp(40px, 4.5vw, 64px) !important;
}

.feat-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Push card body text to fill remaining space */
.feat-card p {
  flex: 1;
}

/* ─────────────────────────────────────────────────────────
   §10  ATTENDANCE CARDS — 3-col balanced grid
   ───────────────────────────────────────────────────────── */
.grid.lg\:grid-cols-3:has(.att-card) {
  gap: var(--gap-lg) !important;
  align-items: stretch;
}

.att-card { height: 100%; }

/* ─────────────────────────────────────────────────────────
   §11  HOW IT WORKS — two-column feature section
        (alternating text / visual layout)
   ───────────────────────────────────────────────────────── */
/* Generous gap in two-col feature splits */
.grid.lg\:grid-cols-2.gap-16 {
  gap: clamp(48px, 6vw, 96px) !important;
  align-items: center;
}
.grid.lg\:grid-cols-2.gap-14 {
  gap: clamp(40px, 5vw, 80px) !important;
  align-items: center;
}
/* Text column max-width */
.grid.lg\:grid-cols-2 > div > h2:first-child {
  max-width: 520px;
}

/* ─────────────────────────────────────────────────────────
   §12  PRODUCT CARDS — 4-col compact grid
   ───────────────────────────────────────────────────────── */
.grid.md\:grid-cols-2.lg\:grid-cols-4:has(.product-card),
.grid.sm\:grid-cols-2.lg\:grid-cols-4:has(.product-card) {
  gap: var(--gap-md) !important;
  align-items: stretch;
}

.product-card { height: 100%; }

/* ─────────────────────────────────────────────────────────
   §13  PRICING GRID — 3-col with featured card elevated
   ───────────────────────────────────────────────────────── */
.grid:has(.pricing-card-v2) {
  gap: var(--gap-md) !important;
  align-items: stretch;
  isolation: isolate;
}

.pricing-card-v2 { height: 100%; }

/* Featured card subtle size lift */
.pricing-card-v2.featured {
  position: relative;
  z-index: var(--z-raised);
}

@media (min-width: 1024px) {
  /* Pull featured card up slightly on desktop */
  .pricing-card-v2.featured {
    margin-top:    calc(-1 * var(--sp-3));
    margin-bottom: calc(-1 * var(--sp-3));
    padding-top:   calc(var(--sp-8) + var(--sp-3)) !important;
    padding-bottom:calc(var(--sp-8) + var(--sp-3)) !important;
  }
}

/* ─────────────────────────────────────────────────────────
   §14  FAQ GRID — stacked with generous gaps
   ───────────────────────────────────────────────────────── */
.grid:has(.faq-block),
.space-y-4:has(.faq-block) {
  gap: var(--gap-sm) !important;
}

/* ─────────────────────────────────────────────────────────
   §15  TESTIMONIAL SLIDER — proper spacing
   ───────────────────────────────────────────────────────── */
/* Swiper outer padding so shadows don't clip */
.swiper.testi-slider,
[class*="swiper"]:has(.testi-slide-card) {
  padding-left:  var(--sp-2) !important;
  padding-right: var(--sp-2) !important;
  padding-bottom:var(--sp-5) !important;
}

.testi-slide-card {
  height: 100%;
}

/* ─────────────────────────────────────────────────────────
   §16  CONTACT SECTION — two-col layout balance
   ───────────────────────────────────────────────────────── */
.contact-card {
  height: 100%;
}

/* ─────────────────────────────────────────────────────────
   §17  CTA SECTIONS — dramatic vertical space
   ───────────────────────────────────────────────────────── */
.cta-dark-section,
section.jarallax.cta-dark-section {
  padding-top:    var(--section-lg) !important;
  padding-bottom: var(--section-lg) !important;
}

/* CTA inner: constrain content width for impact */
.cta-dark-section .container > * {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Inner-page CTA bar */
section.bg-primary.py-16 {
  padding-top:    var(--section-md) !important;
  padding-bottom: var(--section-md) !important;
}

/* ─────────────────────────────────────────────────────────
   §18  FOOTER — structured grid spacing
   ───────────────────────────────────────────────────────── */
footer .grid.grid-cols-2.md\:grid-cols-4.lg\:grid-cols-5 {
  gap: var(--gap-lg) !important;
  padding-top:    var(--section-md) !important;
  padding-bottom: var(--section-md) !important;
}

footer .col-span-full.lg\:col-span-2 {
  padding-right: var(--gap-xl);
}

footer .py-4 {
  padding-top:    var(--sp-4) !important;
  padding-bottom: var(--sp-4) !important;
}

/* Footer link list spacing */
footer .grid.space-y-3 {
  gap: var(--sp-3) !important;
}

footer h4 {
  margin-bottom: var(--sp-4) !important;
}

/* ─────────────────────────────────────────────────────────
   §19  INNER-PAGE HERO — pages.css sections
   ───────────────────────────────────────────────────────── */
.page-dark section:first-of-type {
  padding-top:    clamp(120px, 12vw, 168px) !important;
  padding-bottom: clamp(72px,  8vw, 112px)  !important;
}

/* Inner hero container: constrained for impact */
.page-dark section:first-of-type .container {
  max-width: 900px !important;
}

/* Inner hero pill row */
.page-dark section:first-of-type .flex.flex-wrap.justify-center.gap-3 {
  gap: var(--gap-xs) !important;
  margin-top: var(--sp-5) !important;
}

/* ─────────────────────────────────────────────────────────
   §20  INNER-PAGE CONTENT SECTIONS
   ───────────────────────────────────────────────────────── */
/* All section.py-20 / section.py-16 inherits from §7 above */

/* "How It Works" step grids */
.page-dark .grid.md\:grid-cols-3 {
  gap: var(--gap-lg) !important;
}

/* Step icon + text alignment */
.page-dark .text-center > .w-14,
.page-dark .text-center > .w-10 {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--sp-3) !important;
}

/* Deep-dive two-col */
.page-dark .grid.lg\:grid-cols-2.gap-16 {
  gap: clamp(40px, 5.5vw, 88px) !important;
  align-items: center;
}

/* Spec cards grid */
.page-dark .grid.md\:grid-cols-3 {
  align-items: stretch;
}

/* "Best For" pill row */
.page-dark .flex.flex-wrap.justify-center.gap-4 {
  gap: var(--gap-sm) !important;
  margin-top: var(--sp-5) !important;
}

/* ─────────────────────────────────────────────────────────
   §21  SECTION VISUAL SEPARATORS
   Subtle gradient fade lines between alternating sections
   ───────────────────────────────────────────────────────── */

/* Dark theme: hair-line separator */
.page-dark section + section,
section#home.hero-redesign ~ section + section {
  position: relative;
}

.page-dark section.bg-white::before,
.page-dark section.bg-gray-50::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(93, 135, 255, 0.12) 20%,
    rgba(93, 135, 255, 0.18) 50%,
    rgba(93, 135, 255, 0.12) 80%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Bento variant */
.bento-theme section + section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(201, 123, 75, 0.14) 20%,
    rgba(201, 123, 75, 0.22) 50%,
    rgba(201, 123, 75, 0.14) 80%,
    transparent 100%
  );
  pointer-events: none;
}

/* Codex variant */
.codex-theme section + section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(93, 135, 255, 0.12) 20%,
    rgba(93, 135, 255, 0.20) 50%,
    rgba(93, 135, 255, 0.12) 80%,
    transparent 100%
  );
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────
   §22  MODAL — centered, proper max-width
   ───────────────────────────────────────────────────────── */
#hs-demo-modal > div {
  max-width: 780px !important;
  width: 100%;
  margin: auto;
}
#hs-demo-modal .bg-white.border.rounded-2xl {
  max-height: 90vh;
  overflow-y: auto;
}

/* ─────────────────────────────────────────────────────────
   §23  HERO — CROSS-DEVICE RESPONSIVE
   Mobile  < 640px  · Tablet 640–1023px · Laptop ≥ 1024px
   ───────────────────────────────────────────────────────── */

/* ── Below desktop (< 1024px): stack + centre everything ── */
@media (max-width: 1023px) {
  /* Reset the 52/48 forced split to single column */
  section#home.hero-redesign .grid.lg\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: var(--gap-lg) !important;
  }

  /* Text column: full-width, centred */
  section#home.hero-redesign .grid.lg\:grid-cols-2 > div:first-child {
    max-width: 100% !important;
    text-align: center;
  }

  /* Trust badge: auto-centre */
  section#home.hero-redesign .trust-badge-dark {
    margin-left: auto;
    margin-right: auto;
  }

  /* Subtext block: full width, centred */
  section#home.hero-redesign .max-w-lg {
    max-width: 640px !important;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  /* Service pills row: centred */
  section#home.hero-redesign .flex.flex-wrap.gap-2 {
    justify-content: center;
  }

  /* Dashboard mockup: strip perspective tilt, centre */
  section#home.hero-redesign .grid.lg\:grid-cols-2 > div:last-child > div {
    transform: none !important;
    margin-left: auto;
    margin-right: auto;
  }
  section#home.hero-redesign .grid.lg\:grid-cols-2 > div:last-child > div:hover {
    transform: translateY(-4px) !important;
  }
}

/* ── Mobile only (< 640px): tighter rhythm ── */
@media (max-width: 639px) {
  section#home.hero-redesign {
    padding-top:    clamp(88px, 18vw, 112px) !important;
    padding-bottom: clamp(48px, 10vw, 72px)  !important;
  }

  section#home.hero-redesign .grid.lg\:grid-cols-2 {
    gap: var(--gap-md) !important;
  }

  /* Subtext: slightly tighter text */
  section#home.hero-redesign .max-w-lg p {
    font-size: clamp(0.84rem, 3.8vw, 0.95rem) !important;
    line-height: 1.65;
  }

  /* Pills: compact on small screens */
  section#home.hero-redesign .flex.flex-wrap.gap-2 {
    gap: var(--sp-1) !important;
  }
  section#home.hero-redesign .flex.flex-wrap.gap-2 span {
    font-size: 11px !important;
    padding: 5px 10px !important;
  }

  /* CTA buttons: stack full-width */
  section#home.hero-redesign .hero-btn-primary,
  section#home.hero-redesign .hero-btn-outline {
    width: 100%;
    justify-content: center;
  }

  /* Dashboard mockup: cap width so it doesn't overflow */
  section#home.hero-redesign .grid.lg\:grid-cols-2 > div:last-child > div {
    max-width: 100% !important;
  }
}

/* ── Tablet (640px – 1023px): medium density ── */
@media (min-width: 640px) and (max-width: 1023px) {
  section#home.hero-redesign {
    padding-top:    clamp(100px, 13vw, 136px) !important;
    padding-bottom: clamp(60px,  8vw,  96px)  !important;
  }

  section#home.hero-redesign .grid.lg\:grid-cols-2 > div:last-child > div {
    max-width: 520px !important;
  }
}

/* ─────────────────────────────────────────────────────────
   §23  BENTO THEME LAYOUT OVERRIDES
   Same structure, warmer spatial feel with slightly wider gutters
   ───────────────────────────────────────────────────────── */
.bento-theme .container {
  --cx-gutter: clamp(24px, 5vw, 80px);
}

/* Bento hero: slightly more top space for airiness */
.bento-theme section#home.hero-redesign {
  padding-top:    clamp(116px, 12vw, 168px) !important;
  padding-bottom: clamp(88px,  9vw, 132px)  !important;
}

/* Bento card grids: larger gap for the "bento box" feel */
.bento-theme .grid.lg\:grid-cols-3:has(.feat-card),
.bento-theme .grid.lg\:grid-cols-3:has(.att-card),
.bento-theme .grid.lg\:grid-cols-4:has(.product-card) {
  gap: var(--gap-lg) !important;
}

/* ─────────────────────────────────────────────────────────
   §24  CODEX THEME LAYOUT OVERRIDES
   Tighter grid, monolithic spacing — vault-like density
   ───────────────────────────────────────────────────────── */
.codex-theme .container {
  --cx-gutter: clamp(20px, 4vw, 64px);
}

/* Codex card grids: compressed gap for technical density */
.codex-theme .grid.lg\:grid-cols-3:has(.feat-card) {
  gap: var(--gap-sm) !important;
}

.codex-theme .feat-card,
.codex-theme .att-card,
.codex-theme .product-card {
  border-radius: 12px !important; /* sharper corners for the vault aesthetic */
}

/* ─────────────────────────────────────────────────────────
   §25  RESPONSIVE ADJUSTMENTS
   ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  section#home.hero-redesign .grid.lg\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: var(--gap-xl) !important;
    text-align: center;
  }
  section#home.hero-redesign .grid.lg\:grid-cols-2 > div:first-child {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
  section#home.hero-redesign .flex.flex-wrap.items-center {
    justify-content: center !important;
  }
  section#home.hero-redesign .flex.flex-wrap.gap-5 {
    justify-content: center !important;
  }
  /* Undo dashboard tilt on tablet */
  section#home.hero-redesign .grid > div:last-child > div {
    transform: none !important;
  }
}

@media (max-width: 768px) {
  :root {
    --section-md: clamp(56px, 8vw, 80px);
    --section-lg: clamp(64px, 9vw, 96px);
    --section-xl: clamp(80px, 10vw, 112px);
  }

  .stats-dark-bar .grid.lg\:grid-cols-4 {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--gap-sm) !important;
  }

  .page-dark section:first-of-type .container {
    max-width: 100% !important;
  }

  .pricing-card-v2.featured {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

@media (max-width: 480px) {
  :root {
    --cx-gutter: 16px;
  }

  section.py-20 {
    padding-top:    clamp(48px, 8vw, 64px) !important;
    padding-bottom: clamp(48px, 8vw, 64px) !important;
  }
}