/* ==========================================================================
   Aprotime Landing v2 - Dedicated Stylesheet
   All dimensions converted to rem (Base 16px = 1rem)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&family=Geist:wght@400;500;600;700&display=swap');

:root {
  --color-primary: #E80000;
  --color-primary-hover: #CE0000;
  --color-dark: #000000;
  --color-text-main: #1B1B1B;
  --color-hero-heading: #1E0B3A;
  --color-hero-desc: #33312C;
  --color-bg-white: #FFFFFF;
  --color-border-btn: rgba(27, 27, 27, 0.16);
  --color-border-toggle: rgba(27, 27, 27, 0.18);
  --font-family-base: 'DM Sans', sans-serif;
  --font-family-outfit: 'Outfit', sans-serif;
  --font-family-geist: 'Geist', sans-serif;
}

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

html {
  font-size: 16px;
}

/* Elastic responsiveness down to 768px (Figma 1440px canvas = 90rem) */
@media (min-width: 769px) {
  html {
    font-size: min(16px, calc(100vw / 90));
  }
}

@media (max-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  font-family: var(--font-family-base);
  background-color: var(--color-bg-white);
  color: var(--color-text-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Page Frame Container */
.page-container {
  width: 100%;
  max-width: 90rem; /* 1440px */
  margin: 0 auto;
  position: relative;
  background: var(--color-bg-white);
  overflow-x: clip;
}

/* ==========================================================================
   Header / Navbar
   ========================================================================== */

.site-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem 6.75rem;
  width: 100%;
  max-width: 90rem;
  min-height: 4.5rem;
  height: auto;
  margin: 0 auto;
  background: #FFFFFF;
  position: relative;
  z-index: 1000;
  box-sizing: border-box;
  transition: background-color 0.2s ease;
}

@media (max-width: 768px) {
  .site-header {
    padding: 1rem 1.25rem;
  }
}

.site-header.is-nav-open {
  background: #FFFFFF !important;
  z-index: 1005;
}

.header-container-margin {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  width: 100%;
  max-width: 77.375rem;
  min-width: 0;
  position: relative;
  z-index: 1003;
}

.header-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 76.5rem;
  min-width: 0;
  gap: 0.5rem;
}

/* Left Group */
.nav-left-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  gap: clamp(0.75rem, 2vw, 2.4375rem);
  min-width: 0;
  flex-shrink: 0;
}

.brand-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  gap: 0.5rem;
  width: auto;
  min-width: 0;
  flex-shrink: 0;
}

.brand-icon {
  width: 1.625rem;
  height: 1.625rem;
  object-fit: contain;
  flex-shrink: 0;
}

.brand-title {
  width: auto;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: clamp(1.35rem, 1rem + 1vw, 1.875rem);
  line-height: 1.2;
  letter-spacing: -0.07em;
  color: var(--color-dark);
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.nav-links-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  gap: 1.0625rem;
}

@media (max-width: 768px) {
  .nav-links-container {
    display: none;
  }
}

.nav-item {
  display: flex;
  flex-direction: column;
  height: 2.5rem;
}

.nav-item-features {
  align-items: flex-start;
  padding: 0 0.5625rem;
  width: auto;
}

.nav-item-about {
  justify-content: center;
  align-items: center;
  padding: 0 0.25rem;
  width: auto;
}

.nav-item-article {
  justify-content: center;
  align-items: center;
  padding: 0 0.4375rem;
  width: auto;
}

.nav-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0.5rem 0;
  height: 2.5rem;
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 0.9375rem; /* 15px matching Figma */
  line-height: 1.5rem; /* 24px matching Figma (or 160%) */
  letter-spacing: 0.0234rem; /* 0.375px matching Figma */
  color: #1B1B1B;
  transition: color 0.15s ease, font-weight 0.15s ease;
  white-space: nowrap;
  text-decoration: none;
}

.nav-link:hover {
  color: var(--color-primary);
}

.nav-link.active,
.nav-link[aria-current="page"] {
  font-weight: 600; /* bold 600 matching Figma active link */
  color: #1B1B1B;
  letter-spacing: 0.025rem; /* 0.375px matching Figma */
}

.nav-right-group {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding: 0;
  gap: 0.5rem;
  min-width: 0;
  flex-shrink: 0;
}

.auth-actions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding: 0;
  gap: clamp(0.35rem, 1vw, 0.75rem);
  width: auto;
  min-width: 0;
}

.auth-btn-wrapper {
  display: flex;
  align-items: center;
  width: auto;
}

.btn-login {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0.45rem clamp(0.6rem, 1vw, 1rem);
  width: auto;
  min-width: 0;
  height: 2.375rem;
  border: 0.1rem solid var(--color-border-btn);
  border-radius: 12.5rem;
  background: transparent;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
  line-height: 1.5rem;
  text-align: center;
  letter-spacing: 0.0131rem;
  color: var(--color-text-main);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.btn-login:hover {
  border-color: var(--color-text-main);
  background-color: rgba(27, 27, 27, 0.04);
}

.btn-create-account {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0.45rem clamp(0.75rem, 1.2vw, 1rem);
  width: auto;
  min-width: 0;
  height: 2.375rem;
  background: var(--color-primary);
  border-radius: 12.5rem;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
  line-height: 1.5rem;
  text-align: center;
  letter-spacing: 0.0131rem;
  color: #FFFFFF;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.btn-create-account:hover {
  background-color: var(--color-primary-hover);
}

/* ── Mobile Hamburger Toggle Button ───────────────────────────────────────── */
.mobile-nav-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  width: 2.75rem; /* 44px touch target */
  height: 2.75rem;
  border-radius: 0.5rem;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
  z-index: 1004;
  position: relative;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.mobile-nav-toggle:hover {
  background-color: rgba(27, 27, 27, 0.05);
}

.hamburger-box {
  width: 1.5rem; /* 24px */
  height: 1.125rem; /* 18px */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.hamburger-line {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #1B1B1B;
  border-radius: 2px;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, background-color 0.2s ease;
  transform-origin: center;
}

/* Morph Hamburger to Cancel (X) when active */
.mobile-nav-toggle.is-active .line-1 {
  transform: translateY(8px) rotate(45deg);
}

.mobile-nav-toggle.is-active .line-2 {
  opacity: 0;
  transform: scaleX(0);
}

.mobile-nav-toggle.is-active .line-3 {
  transform: translateY(-8px) rotate(-45deg);
}

/* ── Mobile Navigation Drawer (Slides Down from Top) ────────────────────────── */
.mobile-nav-menu {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  background: #FFFFFF;
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, visibility 0.35s;
  z-index: 1001;
  pointer-events: none;
  box-sizing: border-box;
}

.mobile-nav-menu.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-nav-inner {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.5rem 2rem;
  gap: 1.25rem;
  max-width: 32rem;
  margin: 0 auto;
  box-sizing: border-box;
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  padding: 0.85rem 1rem;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.5rem;
  color: #1B1B1B;
  border-radius: 0.5rem;
  transition: background-color 0.15s ease, color 0.15s ease;
  text-decoration: none;
}

.mobile-nav-link:hover,
.mobile-nav-link:focus-visible {
  background-color: rgba(232, 0, 0, 0.06);
  color: #E80000;
}

.mobile-nav-link.active,
.mobile-nav-link[aria-current="page"] {
  font-weight: 600;
  color: #1B1B1B;
  background-color: rgba(0, 0, 0, 0.04);
}

.mobile-nav-divider {
  width: 100%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.08);
}

.mobile-auth-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.btn-mobile-login {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.85rem;
  border: 1.5px solid rgba(27, 27, 27, 0.2);
  border-radius: 12.5rem;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  color: #1B1B1B;
  background: transparent;
  transition: all 0.15s ease;
  text-decoration: none;
  box-sizing: border-box;
}

.btn-mobile-login:hover {
  border-color: #1B1B1B;
  background-color: rgba(27, 27, 27, 0.04);
}

.btn-mobile-create {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.85rem;
  background: #E80000;
  border-radius: 12.5rem;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: #FFFFFF;
  transition: background-color 0.15s ease;
  text-decoration: none;
  box-sizing: border-box;
}

.btn-mobile-create:hover {
  background-color: #CE0000;
}

/* ── Backdrop for Mobile Drawer ───────────────────────────────────────────── */
.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
  z-index: 998;
  pointer-events: none;
}

.mobile-nav-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (max-width: 768px) {
  .mobile-nav-toggle {
    display: inline-flex;
  }

  .site-header .auth-actions {
    display: none;
  }
}

@media (min-width: 769px) {
  .mobile-nav-menu,
  .mobile-nav-backdrop {
    display: none !important;
  }
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.hero-section {
  position: relative;
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 3.5vw, 2rem) clamp(2.5rem, 5vw, 4.5rem);
  box-sizing: border-box;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Constrains hero content to the same max-width as header & features rows */
.hero-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 77.375rem; /* matches .header-container-margin / .features-content-row */
  margin: 0 auto;
  min-width: 0;
}

.hero-content-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 36rem;
  margin-bottom: clamp(2rem, 3.5vw, 3.5rem);
  min-width: 0;
}

.hero-headline {
  width: 100%;
  font-family: 'DM Sans', sans-serif !important;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(1.625rem, 1.25rem + 1.8vw, 2.25rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #1E0B3A;
  margin: 0 0 1rem;
  padding: 0;
  text-align: center;
  word-break: normal;
  overflow-wrap: break-word;
}

.hero-description {
  width: 100%;
  max-width: 33rem;
  font-family: 'DM Sans', sans-serif !important;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1rem);
  line-height: 1.6875rem;
  letter-spacing: 0;
  color: var(--color-hero-desc);
  margin: 0 0 1.75rem;
  padding: 0;
  text-align: center;
}

.hero-cta-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}

.btn-hero-primary {
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 9.5625rem; /* 153px */
  height: 3.0625rem; /* 49px */
  flex: none;
  background: #E63232;
  border: 1px solid #FFFFFF;
  border-radius: 2.5625rem;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.0625rem;
  color: #FFFFFF;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(230, 50, 50, 0.25);
  text-decoration: none;
  white-space: nowrap;
}

.btn-hero-primary:hover {
  background: #CE0000;
}

.btn-hero-secondary {
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 9.8125rem; /* 157px */
  height: 3.0625rem; /* 49px */
  flex: none;
  border: 1px solid #000000;
  border-radius: 2.5625rem;
  background: transparent;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  line-height: 1.0625rem;
  color: rgba(0, 0, 0, 0.62);
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn-hero-secondary:hover {
  border-color: #000000;
  color: #000000;
  background: rgba(0, 0, 0, 0.04);
}

/* Hero Bento Ecosystem */
.hero-bento-group {
  position: relative;
  width: 100%;
  max-width: 35.625rem; /* 570px */
  height: calc(min(35.625rem, 100vw - 2rem) * 0.7735); /* 440.9 / 570 = 0.7735 */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: 0 auto;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.aprotime-mockup-backdrop {
  display: none;
}

.bento-container {
  position: relative;
  width: 35.625rem; /* 570px */
  height: 27.556rem; /* 440.9px */
  transform-origin: top center;
  transform: scale(min(1, calc((100vw - 2rem) / 570px)));
  flex-shrink: 0;
}

@media (min-width: 769px) {
  /* Section stays full-bleed; gutters match .site-header exactly */
  .hero-section {
    height: 38.125rem;
    padding: 0 6.75rem;
    justify-content: center;
    overflow: visible;
  }

  /* Row is capped at the same 76.5rem (1224px) as .header-container,
     so the headline lines up with the logo and the bento with "Create Account" */
  .hero-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width: 76.5rem;
    height: 100%;
    gap: 1.5rem;
  }

  .hero-content-col {
    align-items: flex-start;
    text-align: left;
    flex: 1 1 auto;
    width: auto;
    max-width: 34.75rem;
    margin-bottom: 0;
  }

  .hero-headline {
    text-align: left;
    font-size: 2.5rem;
    line-height: 3.5rem;
    margin-bottom: 1.5rem;
  }

  .hero-description {
    text-align: left;
    font-size: 1rem;
    line-height: 1.6875rem;
    margin-bottom: 2rem;
  }

  .hero-cta-group {
    justify-content: flex-start;
    margin: 0;
  }

  .hero-bento-group {
    position: relative;
    width: 42.1875rem; /* 675px: backdrop (62 + 613) right edge = bento right edge */
    max-width: none;   /* base rule caps at 570px, which made the backdrop overflow */
    height: 29.056rem; /* 464.9px */
    flex: none;
    overflow: visible;
    margin: 0;
    display: block;
  }

  .aprotime-mockup-backdrop {
    display: block;
    position: absolute;
    width: 38.3125rem; /* 613px */
    height: 26.125rem; /* 418px */
    left: 3.875rem; /* 62px */
    top: 0;
    background: linear-gradient(90deg, #F5F3FF 0%, #FAFAFA 100%);
    border-radius: 1.25rem;
  }

  .bento-container {
    position: absolute;
    width: 35.625rem; /* 570px */
    height: 27.556rem; /* 440.9px */
    left: 6.5625rem; /* 105px */
    top: 1.5rem; /* 24px */
    transform: none;
  }
}

/* center-panel: 328.63px wide, left: 0, top: 0, bottom: 102.06px */
.bento-center-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 0.638rem; /* 10.21px */
  position: absolute;
  width: 20.539rem; /* 328.63px */
  left: 0;
  top: 0;
  bottom: 6.379rem; /* 102.06px */
}

/* header-row: 328.63px x 42.86px */
.bento-header-row {
  position: relative;
  width: 20.539rem; /* 328.63px */
  height: 2.679rem; /* 42.86px */
  flex: none;
  order: 0;
  align-self: stretch;
}

/* greeting-block: 185.75px x 30.24px at left: 0, top: 0 */
.bento-greeting-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 0.191rem; /* 3.06px */
  position: absolute;
  width: 11.609rem; /* 185.75px */
  height: 1.89rem; /* 30.24px */
  left: 0;
  top: 0;
}

.bento-greeting-title {
  min-width: 11.609rem;
  font-family: var(--font-family-outfit);
  font-weight: 700;
  font-size: 0.893rem; /* 14.2883px */
  line-height: 1.25;
  color: #0F172A;
  white-space: nowrap;
}

.bento-greeting-sub {
  min-width: 11.609rem;
  font-family: var(--font-family-geist);
  font-weight: 400;
  font-size: 0.446rem; /* 7.14414px */
  line-height: 1.35;
  color: #475569;
  white-space: nowrap;
}

/* quick-stat-card: 132.68px x 42.86px at left: 195.95px, top: 0 */
.bento-quick-stat-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0.51rem; /* 8.16473px */
  gap: 0.51rem; /* 8.16px */
  position: absolute;
  width: 8.292rem; /* 132.68px */
  height: 2.679rem; /* 42.86px */
  left: 12.247rem; /* 195.95px */
  top: 0;
  background: #FFFFFF;
  border: 0.032rem solid #F1F5F9; /* 0.510295px */
  box-shadow: 0 0.127rem 0.765rem rgba(15, 23, 42, 0.03137);
  border-radius: 0.51rem; /* 8.16473px */
}

/* progress-ring-container: 26.54px x 26.54px */
.progress-ring-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  isolation: isolate;
  position: relative;
  width: 1.659rem; /* 26.54px */
  height: 1.659rem;
  flex: none;
}

.ring-track-circle {
  position: absolute;
  width: 1.659rem;
  height: 1.659rem;
  left: 0;
  top: 0;
  border-radius: 50%;
  border: 0.22rem solid #F1F5F9;
  z-index: 0;
}

.ring-fill-svg {
  position: absolute;
  width: 1.659rem;
  height: 1.659rem;
  left: 0;
  top: 0;
  transform: rotate(-90deg);
  z-index: 1;
}

.ring-center-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
  position: absolute;
  width: 0.8125rem; /* 13px */
  height: 0.4375rem; /* 7px */
  left: calc(50% - 0.406rem);
  top: calc(50% - 0.218rem);
  font-family: var(--font-family-geist);
  font-weight: 700;
  font-size: 0.35rem; /* 5.61325px */
  line-height: 0.4375rem; /* 7px */
  color: #0E70E4;
  z-index: 2;
}

/* stat-info: 81.65px x 21.02px */
.stat-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 0.064rem; /* 1.02px */
  width: 5.103rem; /* 81.65px */
  height: 1.314rem; /* 21.02px */
  flex-grow: 1;
}

.stat-info-label {
  width: 5.103rem;
  height: 0.5rem; /* 8px */
  font-family: var(--font-family-geist);
  font-weight: 600;
  font-size: 0.383rem; /* 6.12355px */
  line-height: 0.5rem; /* 8px */
  color: #475569;
}

.stat-info-val {
  width: 5.103rem;
  height: 0.75rem; /* 12px */
  font-family: var(--font-family-outfit);
  font-weight: 700;
  font-size: 0.574rem; /* 9.18532px */
  line-height: 0.75rem; /* 12px */
  color: #0F172A;
}

/* weekly-overview-card: 328.63px x 131.4px */
.weekly-overview-card {
  box-sizing: border-box;
  position: relative;
  width: 20.539rem; /* 328.63px */
  height: 8.212rem; /* 131.4px */
  background: #FFFFFF;
  border: 0.032rem solid #F1F5F9;
  box-shadow: 0 0.127rem 0.765rem rgba(15, 23, 42, 0.03137);
  border-radius: 0.638rem; /* 10.2059px */
  flex: none;
  order: 1;
  align-self: stretch;
}

/* card-header: height: 20.16px, left: 12.25px, right: 12.25px, top: 12.25px */
.weekly-card-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  position: absolute;
  height: 1.26rem; /* 20.16px */
  left: 0.765rem; /* 12.25px */
  right: 0.765rem; /* 12.25px */
  top: 0.765rem; /* 12.25px */
}

.weekly-title-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 0.127rem; /* 2.04px */
  width: 10.1875rem; /* 163px */
  height: 1.252rem; /* 20.04px */
}

.weekly-title {
  min-width: 5.375rem;
  font-family: var(--font-family-outfit);
  font-weight: 700;
  font-size: 0.51rem; /* 8.16473px */
  line-height: 1.2;
  color: #0F172A;
  white-space: nowrap;
}

.weekly-sub {
  min-width: 10.1875rem;
  font-family: var(--font-family-geist);
  font-weight: 400;
  font-size: 0.383rem; /* 6.12355px */
  line-height: 1.25;
  color: #475569;
  white-space: nowrap;
}

.weekly-chart-legend {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  gap: 0.383rem; /* 6.12px */
  width: 4.648rem; /* 74.37px */
  height: 0.5rem; /* 8px */
}

.legend-badge-today {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  gap: 0.127rem; /* 2.04px */
  width: 1.445rem; /* 23.12px */
  height: 0.5rem; /* 8px */
}

.legend-dot-today {
  width: 0.255rem; /* 4.08px */
  height: 0.255rem;
  background: #346BF1;
  border-radius: 50%;
}

.legend-text-today {
  width: 1.0625rem; /* 17px */
  height: 0.5rem; /* 8px */
  font-family: var(--font-family-geist);
  font-weight: 400;
  font-size: 0.383rem; /* 6.12355px */
  line-height: 0.5rem; /* 8px */
  color: #475569;
}

.legend-badge-proxy {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  gap: 0.127rem; /* 2.04px */
  width: 2.82rem; /* 45.12px */
  height: 0.5rem; /* 8px */
}

.legend-dot-proxy {
  width: 0.255rem; /* 4.08px */
  height: 0.255rem;
  background: #4FA0FF;
  opacity: 0.6;
  border-radius: 50%;
}

.legend-text-proxy {
  width: 2.4375rem; /* 39px */
  height: 0.5rem; /* 8px */
  font-family: var(--font-family-geist);
  font-weight: 400;
  font-size: 0.383rem; /* 6.12355px */
  line-height: 0.5rem; /* 8px */
  color: #475569;
}

/* bar-chart: height: 76.54px, left: 12.25px, right: 12.25px, top: 42.61px */
.weekly-bar-chart {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  padding: 0;
  gap: 0.51rem; /* 8.16px */
  position: absolute;
  height: 4.784rem; /* 76.54px */
  left: 0.765rem; /* 12.25px */
  right: 0.765rem; /* 12.25px */
  top: 2.663rem; /* 42.61px */
}

.bento-bar-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 0;
  gap: 0.255rem; /* 4.08px */
  width: 3.394rem; /* 54.3px */
  height: 4.784rem; /* 76.54px */
  flex-grow: 1;
}

.bento-bar-track {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 0;
  width: 1.529rem; /* 24.46px */
  height: 3.85rem; /* 61.6px */
  background: #F1F5F9;
  border-radius: 0.191rem; /* 3.06177px */
}

.bento-bar-fill {
  width: 1.529rem; /* 24.46px */
  background: #4FA0FF;
  opacity: 0.6;
  border-radius: 0.191rem; /* 3.06177px */
}

.bento-bar-fill.fill-thu {
  background: #346BF1;
  opacity: 1;
}

.bento-bar-label {
  font-family: var(--font-family-geist);
  font-weight: 500;
  font-size: 0.383rem; /* 6.12355px */
  line-height: 0.5rem; /* 8px */
  color: #475569;
}

.bento-bar-label.active-thu {
  font-weight: 600;
  color: #346BF1;
}

/* active-entries-card: 328.63px x 144.16px */
.active-entries-card {
  box-sizing: border-box;
  position: relative;
  width: 20.539rem; /* 328.63px */
  height: 9.01rem; /* 144.16px */
  background: #FFFFFF;
  border: 0.032rem solid #F1F5F9;
  box-shadow: 0 0.127rem 0.765rem rgba(15, 23, 42, 0.03137);
  border-radius: 0.638rem; /* 10.2059px */
  flex: none;
  order: 2;
  align-self: stretch;
  flex-grow: 1;
}

.entries-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  position: absolute;
  height: 0.6225rem; /* 9.96px */
  left: 0.765rem; /* 12.25px */
  right: 0.765rem; /* 12.25px */
  top: 0.765rem; /* 12.25px */
}

.entries-title {
  width: 3.3125rem; /* 53px */
  height: 0.625rem; /* 10px */
  font-family: var(--font-family-outfit);
  font-weight: 700;
  font-size: 0.51rem; /* 8.16473px */
  line-height: 0.625rem; /* 10px */
  color: #0F172A;
}

.entries-list {
  position: absolute;
  height: 5.97rem; /* 95.52px */
  left: 0.765rem; /* 12.25px */
  right: 0.765rem; /* 12.25px */
  top: 1.899rem; /* 30.38px */
}

/* entry-row: height: 30.48px, padding: 6.12px 8.16px, gap: 6.12px */
.entry-row {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0.383rem 0.51rem; /* 6.12355px 8.16473px */
  gap: 0.383rem; /* 6.12px */
  position: absolute;
  height: 1.905rem; /* 30.48px */
  left: 0;
  right: 0;
  border-radius: 0.383rem; /* 6.12355px */
}

.entry-row.row-1 {
  top: 0;
  background: #F8FAFC;
  border: 0.032rem solid #E2E8F0;
}

.entry-row.row-2 {
  top: 2.033rem; /* 32.52px */
}

.entry-row.row-3 {
  top: 4.065rem; /* 65.04px */
}

.entry-ellipse {
  width: 0.319rem; /* 5.1px */
  height: 0.319rem;
  border-radius: 50%;
  flex: none;
}

.dot-blue { background: #3B82F6; }
.dot-purple { background: #7C3AED; }
.dot-yellow { background: #F59E0B; }

.entry-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 0.064rem; /* 1.02px */
  height: 1.126rem; /* 18.02px */
  flex-grow: 1;
}

.entry-heading {
  font-family: var(--font-family-geist);
  font-weight: 600;
  font-size: 0.446rem; /* 7.14414px */
  line-height: 1.25;
  color: #0F172A;
  white-space: nowrap;
}

.entry-sub {
  font-family: var(--font-family-geist);
  font-weight: 400;
  font-size: 0.383rem; /* 6.12355px */
  line-height: 1.25;
  color: #475569;
  white-space: nowrap;
}

.entry-time {
  font-family: var(--font-family-geist);
  font-weight: 600;
  font-size: 0.446rem; /* 7.14414px */
  line-height: 1.25;
  color: #0F172A;
  white-space: nowrap;
  flex: none;
}

.status-badge {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0.128rem 0.255rem; /* 2.04118px 4.08236px */
  gap: 0.128rem; /* 2.04px */
  height: 0.693rem; /* 11.08px */
  border-radius: 0.191rem; /* 3.06177px */
  flex: none;
}

.badge-tracking {
  width: 2.642rem; /* 42.27px */
  background: #FEF2F2;
}

.badge-completed {
  width: 2.698rem; /* 43.16px */
  background: #ECFDF5;
}

.badge-dot-red {
  width: 0.191rem; /* 3.06px */
  height: 0.191rem;
  background: #EF4444;
  border-radius: 50%;
  flex: none;
}

.badge-text-red {
  width: 1.8125rem; /* 29px */
  height: 0.4375rem; /* 7px */
  font-family: var(--font-family-geist);
  font-weight: 600;
  font-size: 0.35rem; /* 5.61325px */
  line-height: 0.4375rem; /* 7px */
  text-transform: uppercase;
  color: #EF4444;
}

.badge-text-green {
  width: 2.1875rem; /* 35px */
  height: 0.4375rem; /* 7px */
  font-family: var(--font-family-geist);
  font-weight: 600;
  font-size: 0.35rem; /* 5.61325px */
  line-height: 0.4375rem; /* 7px */
  text-transform: uppercase;
  color: #10B981;
}

/* right-panel: 204.12px wide, left: 338.84px, top: 0, bottom: 102.06px */
.bento-right-panel {
  box-sizing: border-box;
  position: absolute;
  width: 12.757rem; /* 204.12px */
  left: 21.177rem; /* 338.84px */
  top: 0;
  bottom: 6.379rem; /* 102.06px */
  background: #FFFFFF;
  border: 0.032rem solid #F1F5F9;
  box-shadow: 0 0.127rem 0.765rem rgba(15, 23, 42, 0.03137);
  border-radius: 0.638rem; /* 10.2059px */
}

/* assistant-header-group: height: 32.29px, left: 12.25px, right: 12.25px, top: 12.25px */
.assistant-header-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 0.51rem; /* 8.16px */
  position: absolute;
  height: 2.018rem; /* 32.29px */
  left: 0.765rem; /* 12.25px */
  right: 0.765rem; /* 12.25px */
  top: 0.765rem; /* 12.25px */
}

.assistant-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  width: 11.226rem; /* 179.62px */
  height: 0.625rem; /* 10px */
}

.ai-identity {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  gap: 0.319rem; /* 5.1px */
  width: 2.8125rem; /* 45px */
  height: 0.625rem; /* 10px */
  font-family: var(--font-family-outfit);
  font-weight: 700;
  font-size: 0.51rem; /* 8.16473px */
  line-height: 0.625rem; /* 10px */
  color: #0F172A;
}

.ai-status {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  gap: 0.191rem; /* 3.06px */
  width: 1.57rem; /* 25.12px */
  height: 0.5rem; /* 8px */
}

.ai-status-dot {
  width: 0.191rem; /* 3.06px */
  height: 0.191rem;
  background: #10B981;
  border-radius: 50%;
}

.ai-status-text {
  width: 1.1875rem; /* 19px */
  height: 0.5rem; /* 8px */
  font-family: var(--font-family-geist);
  font-weight: 600;
  font-size: 0.383rem; /* 6.12355px */
  line-height: 0.5rem; /* 8px */
  color: #475569;
}

.ai-progress-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 0.191rem; /* 3.06px */
  width: 11.226rem; /* 179.62px */
  height: 0.883rem; /* 14.12px */
}

.ai-progress-labels {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0;
  width: 11.226rem; /* 179.62px */
  height: 0.5rem; /* 8px */
}

.ai-progress-label {
  width: 4.125rem; /* 66px */
  height: 0.5rem; /* 8px */
  font-family: var(--font-family-geist);
  font-weight: 600;
  font-size: 0.383rem; /* 6.12355px */
  line-height: 0.5rem; /* 8px */
  color: #475569;
}

.ai-progress-val {
  width: 0.8125rem; /* 13px */
  height: 0.5rem; /* 8px */
  font-family: var(--font-family-geist);
  font-weight: 700;
  font-size: 0.383rem; /* 6.12355px */
  line-height: 0.5rem; /* 8px */
  color: #E80000;
}

.ai-progress-track {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0;
  width: 11.226rem; /* 179.62px */
  height: 0.191rem; /* 3.06px */
  background: #F1F5F9;
  border-radius: 0.096rem; /* 1.53089px */
}

.ai-progress-fill {
  width: 9.759rem; /* 156.15px (87%) */
  height: 0.191rem; /* 3.06px */
  background: #E80000;
  border-radius: 0.096rem; /* 1.53089px */
}

/* chat-history: height: 136.76px, left: 12.25px, right: 12.25px, top: 44.91px */
.chat-history {
  position: absolute;
  height: 8.548rem; /* 136.76px */
  left: 0.765rem; /* 12.25px */
  right: 0.765rem; /* 12.25px */
  top: 2.807rem; /* 44.91px */
}

.user-message-align {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 0;
  position: absolute;
  height: 1.339rem; /* 21.43px */
  left: 0;
  right: 0;
  top: 0.51rem; /* 8.16px */
}

.user-bubble {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.383rem; /* 6.12355px */
  width: 8.93rem; /* 142.88px */
  height: 1.328rem; /* 21.25px */
  background: #E80000;
  border-radius: 0.51rem 0.51rem 0.128rem 0.51rem;
  font-family: var(--font-family-geist);
  font-weight: 400;
  font-size: 0.415rem; /* 6.63384px */
  line-height: 140%;
  color: #FFFFFF;
}

.ai-message-align {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0;
  position: absolute;
  height: 6.634rem; /* 106.14px */
  left: 0;
  right: 0;
  top: 2.36rem; /* 37.76px */
}

.ai-bubble {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.446rem; /* 7.14414px */
  gap: 0.319rem; /* 5.1px */
  width: 10.206rem; /* 163.29px */
  height: 6.556rem; /* 104.89px */
  background: #F8FAFC;
  border: 0.032rem solid #F1F5F9;
  border-radius: 0.51rem 0.51rem 0.51rem 0.128rem;
}

.ai-text {
  width: 9.313rem; /* 149.01px */
  height: 1.25rem; /* 20px */
  font-family: var(--font-family-geist);
  font-weight: 400;
  font-size: 0.415rem; /* 6.63384px */
  line-height: 150%;
  color: #0F172A;
}

.proxy-logs-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.319rem; /* 5.10295px */
  gap: 0.191rem; /* 3.06px */
  width: 9.313rem; /* 149.01px */
  height: 3.149rem; /* 50.39px */
  background: #FFFFFF;
  border: 0.032rem solid #E2E8F0;
  border-radius: 0.255rem; /* 4.08236px */
}

.proxy-logs-title {
  width: 3.4375rem; /* 55px */
  height: 0.4375rem; /* 7px */
  font-family: var(--font-family-geist);
  font-weight: 600;
  font-size: 0.35rem; /* 5.61325px */
  line-height: 0.4375rem; /* 7px */
  text-transform: uppercase;
  color: #94A3B8;
}

.log-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0;
  width: 8.675rem; /* 138.8px */
  height: 0.5rem; /* 8px */
  font-family: var(--font-family-geist);
  font-size: 0.383rem; /* 6.12355px */
  line-height: 0.5rem; /* 8px */
}

.log-item-name {
  font-weight: 500;
  color: #0F172A;
}

.log-item-hours {
  font-weight: 600;
  color: #FF6603;
}

.ai-question {
  width: 9.313rem; /* 149.01px */
  height: 0.625rem; /* 10px */
  font-family: var(--font-family-geist);
  font-weight: 400;
  font-size: 0.415rem; /* 6.63384px */
  line-height: 150%;
  color: #0F172A;
}

/* chat-input-container: height: 24.49px, left: 12.25px, right: 12.25px, top: 302.09px */
.chat-input-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0.319rem 0.4465rem; /* 5.10295px 7.14414px */
  gap: 0.255rem; /* 4.08px */
  position: absolute;
  height: 1.531rem; /* 24.49px */
  left: 0.765rem; /* 12.25px */
  right: 0.765rem; /* 12.25px */
  top: 18.881rem; /* 302.09px */
  background: #F1F5F9;
  border: 0.032rem solid #F1F5F9;
  border-radius: 0.383rem; /* 6.12355px */
}

.chat-input-placeholder {
  width: 8.484rem; /* 135.74px */
  height: 0.5625rem; /* 9px */
  font-family: var(--font-family-geist);
  font-weight: 400;
  font-size: 0.415rem; /* 6.63384px */
  line-height: 0.5625rem; /* 9px */
  color: #475569;
  flex-grow: 1;
}

.input-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  gap: 0.255rem; /* 4.08px */
  width: 1.594rem; /* 25.51px */
  height: 0.893rem; /* 14.29px */
}

.mic-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 0.51rem; /* 8.16px */
  height: 0.51rem;
}

.send-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 0.829rem; /* 13.27px */
  height: 0.893rem; /* 14.29px */
  background: #E80000;
  border-radius: 0.191rem; /* 3.06177px */
}

/* ==========================================================================
   User Badges & Cursors (Absolute relative to active-entries-card)
   ========================================================================== */

/* Jane Carmal: Group 9139 (width: 170.32px, height: 44px)
   Positioned at the bottom-left edge overlapping the active-entries-card
   left: -105px (-6.5625rem), top: 125px (7.8125rem) */
.badge-jane-group {
  position: absolute;
  width: 10.645rem; /* 170.32px */
  height: 2.75rem; /* 44px */
  left: -6.5625rem; /* -105px */
  top: 7.8125rem; /* 125px */
  z-index: 50;
  pointer-events: none;
}

/* Frame 27231 (142px x 44px) */
.badge-card-jane {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 1rem; /* 8px 16px */
  gap: 0.5625rem; /* 9px */
  position: absolute;
  width: 8.875rem; /* 142px */
  height: 2.75rem; /* 44px */
  left: 0;
  top: 0;
  background: #FFFFFF;
  border: 0.0625rem solid rgba(196, 196, 196, 0.22); /* 1px */
  box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.09); /* 0px 1px 4px */
  border-radius: 2.5rem; /* 40px pill */
}

/* Ellipse 4 (27px x 27px) */
.avatar-jane {
  width: 1.6875rem; /* 27px */
  height: 1.6875rem; /* 27px */
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  order: 0;
}

/* Jane Carmal Text (82px x 21px, DM Sans 500 14px / 18px) */
.name-jane {
  width: 5.125rem; /* 82px */
  height: 1.3125rem; /* 21px */
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 0.875rem; /* 14px */
  line-height: 1.125rem; /* 18px */
  color: #000000;
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex: none;
  order: 1;
}

/* fa7-solid:mouse-pointer (20.31px x 20.31px, left: 150px, top: 1px) */
.cursor-pointer-jane {
  position: absolute;
  width: 1.25rem; /* 20px */
  height: 1.25rem; /* 20px */
  left: 9.375rem; /* 807px - 657px = 150px = 9.375rem */
  top: 0.0625rem; /* 513px - 512px = 1px = 0.0625rem */
  transform: rotate(90.91deg);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
  flex: none;
}

/* Frank Joe: Group 9139 (width: 120.48px, height: 64.31px)
   Positioned at the bottom-right corner of active-entries-card
   left: 238.2px (14.8875rem), top: 135px (8.4375rem) */
.badge-frank-group {
  position: absolute;
  width: 7.53rem; /* 120.48px */
  height: 4.019rem; /* 64.31px */
  left: 14.8875rem; /* 238.2px */
  top: 8.4375rem; /* 135px */
  z-index: 50;
  pointer-events: none;
}

/* fa7-solid:mouse-pointer (18.12px x 18.12px, left: 54.35px, top: 0, rotate: 0.91deg) */
.cursor-pointer-frank {
  position: absolute;
  width: 1.1325rem; /* 18.12px */
  height: 1.1325rem; /* 18.12px */
  left: 3.397rem; /* 292.55px - 238.2px = 54.35px = 3.397rem */
  top: 0;
  transform: rotate(0.91deg);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
  flex: none;
}

/* Frame 27231 (120.48px x 39.86px, left: 0, top: 24.45px) */
.badge-card-frank {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0.453rem 0.906rem; /* 7.24668px 14.4934px */
  gap: 0.509rem; /* 8.15px */
  position: absolute;
  width: 7.53rem; /* 120.48px */
  height: 2.491rem; /* 39.86px */
  left: 0;
  top: 1.528rem; /* 354.14px - 329.69px = 24.45px = 1.528rem */
  background: #FFFFFF;
  border: 0.057rem solid rgba(196, 196, 196, 0.22); /* 0.905835px */
  box-shadow: 0 0.057rem 0.226rem rgba(0, 0, 0, 0.09); /* 0px 0.905835px 3.62334px */
  border-radius: 2.5rem; /* pill shape */
}

/* Ellipse 4 (24.46px x 24.46px) */
.avatar-frank {
  width: 1.529rem; /* 24.46px */
  height: 1.529rem; /* 24.46px */
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  order: 0;
}

/* Frank Joe Text (65.22px x 19.02px, DM Sans 500 12.6817px / 17px) */
.name-frank {
  width: 4.076rem; /* 65.22px */
  height: 1.189rem; /* 19.02px */
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 0.793rem; /* 12.6817px */
  line-height: 1.0625rem; /* 17px */
  color: #000000;
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex: none;
  order: 1;
}

/* ==========================================================================
   Weekly Overview + Active Entries: Intro & Cursor Hover Loop
   (driven by hero-bento.js)
   ========================================================================== */

.weekly-overview-card,
.active-entries-card {
  transition: opacity 0.5s ease, translate 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.is-intro-hidden {
  opacity: 0 !important;
  translate: 0 0.5rem;
}

/* Bars grow up from the baseline */
.bento-bar-fill {
  transform-origin: bottom;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.25s ease, opacity 0.25s ease;
}

.bento-bar-fill.is-collapsed {
  transform: scaleY(0);
}

.bento-bar-track {
  transition: background-color 0.25s ease;
}

.bento-bar-label {
  transition: color 0.25s ease, opacity 0.4s ease, translate 0.4s ease;
}

/* Bar hover (Jane) */
.bento-bar-col.is-hovered .bento-bar-track {
  background: #E2E8F0;
}

.bento-bar-col.is-hovered .bento-bar-fill {
  background: #346BF1;
  opacity: 1;
}

.bento-bar-col.is-hovered .bento-bar-fill.fill-thu {
  background: #1E40AF;
}

.bento-bar-col.is-hovered .bento-bar-label {
  color: #346BF1;
  font-weight: 600;
}

/* Entry rows slide in and take a hover state (Frank) */
.entry-row {
  transition: opacity 0.4s ease, translate 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.entry-row:not(.row-1) {
  border: 0.032rem solid transparent; /* reserve space so hover border causes no shift */
}

.entry-row.is-intro-hidden {
  translate: -0.4rem 0;
}

.entry-row.is-hovered {
  background: #EEF4FF;
  border-color: #C7D7FE;
  box-shadow: 0 0.127rem 0.5rem rgba(52, 107, 241, 0.1);
}

/* Pills travel between targets */
.badge-jane-group,
.badge-frank-group {
  transition: translate 0.75s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.4s ease;
  will-change: translate;
}

/* ==========================================================================
   AI Assistant: Real-time Chat Loop (driven by hero-chat.js)
   ========================================================================== */

/* Reveal transitions */
.user-message-align,
.ai-bubble,
.ai-text,
.proxy-logs-card,
.log-item,
.ai-question {
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.chat-history {
  transition: opacity 0.4s ease;
}

.chat-history.is-clearing {
  opacity: 0;
}

.is-chat-hidden {
  opacity: 0 !important;
  transform: translateY(0.25rem);
}

/* Typing indicator (3 bouncing dots) */
.ai-typing {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.4rem 0.5rem;
  background: #F8FAFC;
  border: 0.032rem solid #F1F5F9;
  border-radius: 0.51rem 0.51rem 0.51rem 0.128rem;
  opacity: 0;
  transform: translateY(0.25rem);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.ai-typing.is-active {
  opacity: 1;
  transform: translateY(0);
}

.ai-typing span {
  width: 0.2rem;
  height: 0.2rem;
  border-radius: 50%;
  background: #94A3B8;
  animation: ai-typing-bounce 1s infinite ease-in-out;
}

.ai-typing span:nth-child(2) { animation-delay: 0.15s; }
.ai-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes ai-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-0.15rem); opacity: 1; }
}

/* Chat input: typed text + blinking caret */
.chat-input-placeholder {
  flex-grow: 0;
  width: auto;
  white-space: nowrap;
  overflow: hidden;
}

.chat-input-placeholder.is-typing {
  color: #0F172A;
}

.chat-caret {
  width: 0.04rem;
  height: 0.5rem;
  margin-right: auto;
  margin-left: 0.05rem;
  background: #0F172A;
  opacity: 0;
}

.chat-caret.is-active {
  animation: chat-caret-blink 0.9s steps(1) infinite;
}

@keyframes chat-caret-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* Send button press */
.send-btn {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.send-btn.is-pressed {
  transform: scale(0.82);
  box-shadow: 0 0 0 0.15rem rgba(232, 0, 0, 0.18);
}

/* Status: Ready -> Thinking */
.ai-status {
  width: auto;
}

.ai-status-text {
  width: auto;
  white-space: nowrap;
}

.ai-status-dot {
  transition: background-color 0.25s ease;
}

.ai-status.is-thinking .ai-status-dot {
  background: #F59E0B;
  animation: ai-status-pulse 1s infinite ease-in-out;
}

@keyframes ai-status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Progress bar fill animates when the AI logs time */
.ai-progress-fill {
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .ai-typing span,
  .chat-caret.is-active,
  .ai-status.is-thinking .ai-status-dot {
    animation: none;
  }
}

/* ==========================================================================
   Features Section — "Engineered for Modern..." (Component 20)
   Base: 1440px canvas, 16px root. All values in rem.
   ========================================================================== */

.features-section {
  position: relative;
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
  background: #F6F6F7;
  padding: clamp(3rem, 6vw, 4.5rem) clamp(1rem, 3.5vw, 6.3125rem) clamp(3.5rem, 6vw, 5rem);
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Section heading (Frame 27335) ────────────────────────────────────────── */

.features-heading-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  gap: 0.75rem;
  width: 100%;
  max-width: 47.4375rem;
  margin: 0 auto clamp(2rem, 4vw, 3.5rem);
  text-align: center;
}

.features-heading {
  width: 100%;
  max-width: 47.4375rem;
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(1.65rem, 1.2rem + 1.8vw, 2.25rem);
  line-height: clamp(2.2rem, 1.6rem + 1.8vw, 3rem);
  text-align: center;
  letter-spacing: -0.06rem;
  color: #1E0B3A;
  margin: 0;
  text-wrap: balance;
}

/* ── Content row ──────────────────────────────────────────────────────────── */

.features-content-row {
  position: relative;
  width: 100%;
  max-width: 77.375rem;
  display: flex;
  flex-direction: column-reverse; /* Mockup image before header and description */
  align-items: center;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  margin: 0 auto;
}

/* ── Left: text panel ── */

.features-text-panel {
  position: relative;
  width: 100%;
  max-width: 33.6875rem;
  min-height: 14rem;
  display: flex;
  justify-content: center;
}

/* Individual text slide */
.feature-text-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0;
  gap: clamp(1rem, 2vw, 2.9375rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
  pointer-events: none;
}

.feature-text-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s;
  pointer-events: auto;
}

/* Frame 27364: Heading 3 */
.feature-heading-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  width: 100%;
}

.feature-title {
  width: auto;
  font-family: 'Manrope', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.75rem;
  color: #111111;
  margin: 0;
  text-align: center;
}

/* Frame 27363 & Frame 27365: Paragraph wrappers */
.feature-para-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0 0;
  width: 100%;
  box-sizing: border-box;
}

.feature-para {
  width: 100%;
  max-width: 31.8125rem;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1rem);
  line-height: 1.625rem;
  color: #5F6368;
  margin: 0;
  text-align: center;
}

/* ── Right: mockup panel ──────────────────────────────────────────────────── */

.features-mockup-panel {
  position: relative;
  width: 100%;
  max-width: 38.0625rem; /* 609px */
  height: calc(min(38.0625rem, 100vw - 2rem) * 0.65517); /* 399 / 609 = 0.65517 */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: 0 auto;
}

/* The dark bezel container for mockup cards */
.features-mockup-bezel {
  position: relative;
  width: 38.0625rem; /* 609px */
  height: 24.9375rem; /* 399px */
  background: #1C1C1E;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 0.75rem 2.5rem rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: top center;
  transform: scale(min(1, calc((100vw - 2rem) / 609px)));
  flex-shrink: 0;
}

@media (min-width: 769px) {
  .features-section {
    padding: 4.5rem 6.3125rem 5rem;
  }

  .features-heading-wrap {
    margin: 0 auto 4rem;
  }

  .features-heading {
    font-size: 2.25rem;
    line-height: 3rem;
  }

  .features-content-row {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
  }

  .features-text-panel {
    width: 33.6875rem;
    min-height: 19.75rem;
    flex-shrink: 0;
  }

  .feature-text-slide {
    align-items: flex-start;
    text-align: left;
    gap: 2.9375rem;
  }

  .feature-heading-frame {
    align-items: flex-start;
    text-align: left;
  }

  .feature-title {
    text-align: left;
    font-size: 1.5rem;
    white-space: nowrap;
  }

  .feature-para-frame {
    align-items: flex-start;
    text-align: left;
  }

  .feature-para {
    text-align: left;
    font-size: 1rem;
    line-height: 1.625rem;
  }

  .features-mockup-panel {
    width: 38.0625rem;
    height: 24.9375rem;
    flex-shrink: 0;
    margin: 0;
    overflow: visible;
  }

  .features-mockup-bezel {
    transform: none;
  }
}

/* Smooth, steady cross-fade for slide cards (no bouncy scale/translate) */
.features-slide-card {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s ease-in-out, visibility 0.32s;
  pointer-events: none;
}

.features-slide-card.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.32s ease-in-out, visibility 0.32s;
  pointer-events: auto;
}

/* Subtle, smooth item entrance without jumping */
.features-slide-card .stagger-item {
  opacity: 0;
  transition: opacity 0.28s ease-in-out;
}

.features-slide-card.is-active .stagger-item {
  opacity: 1;
}

.features-slide-card.is-active .stagger-item:nth-child(1) { transition-delay: 0.04s; }
.features-slide-card.is-active .stagger-item:nth-child(2) { transition-delay: 0.08s; }
.features-slide-card.is-active .stagger-item:nth-child(3) { transition-delay: 0.12s; }
.features-slide-card.is-active .stagger-item:nth-child(4) { transition-delay: 0.16s; }

/* ── Slide 0 Card: Timer Card (581px x 374px) ────────────────────────────── */

.timer-card {
  position: relative;
  width: 36.3125rem;                   /* 581px */
  height: 23.375rem;                  /* 374px */
  background: #FFFFFF;
  border: 0.0556rem solid rgba(37, 37, 37, 0.2); /* 0.888px */
  border-radius: 1.11rem;             /* 17.76px */
  box-sizing: border-box;
}

.timer-card-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  width: 32.08rem;                     /* 513.3px */
  height: 1.554rem;                   /* 24.87px */
  left: 1.832rem;                      /* 29.31px */
  top: 1.832rem;                       /* 29.31px */
}

.timer-entry-label {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 1rem;                     /* 16px */
  line-height: 1.125rem;             /* 18px */
  color: #000000;
}

.timer-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 4.264rem;                     /* 68.23px */
  height: 1.554rem;                   /* 24.87px */
  background: rgba(232, 0, 0, 0.1);
  border-radius: 9999px;
}

.timer-badge-dot {
  position: absolute;
  width: 0.444rem;                     /* 7.1px */
  height: 0.444rem;
  left: 0.666rem;                      /* 10.66px */
  top: 0.555rem;                       /* 8.88px */
  background: #E80000;
  opacity: 0.8;
  border-radius: 9999px;
}

.timer-badge-text {
  position: absolute;
  left: 1.554rem;                      /* 24.87px */
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 0.777rem;                /* 12.43px */
  line-height: 1.125rem;
  color: #E80000;
  white-space: nowrap;
}

.timer-clock-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  width: 32.08rem;
  left: 1.832rem;
  top: 4.718rem;                       /* 75.48px */
}

.timer-clock {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 2.664rem;                /* 42.63px */
  line-height: 2.6875rem;            /* 43px */
  letter-spacing: -0.0666rem;        /* -1.066px */
  color: #000000;
  white-space: nowrap;
}

.timer-stop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.418rem;                     /* 70.68px */
  height: 2.22rem;                    /* 35.52px */
  background: #E80000;
  border: none;
  border-radius: 9999px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.777rem;                /* 12.43px */
  line-height: 1.125rem;
  color: #FFFFFF;
  cursor: default;
}

.timer-entries {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;                       /* 2px */
  position: absolute;
  width: 32.08rem;                     /* 513.3px */
  left: 1.832rem;
  top: 9.158rem;                       /* 146.53px */
}

.timer-entry-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0.666rem;                   /* 10.66px */
  width: 32.08rem;
  height: 3.33rem;                     /* 53.28px */
  background: #F3F3F3;
  border-radius: 0.666rem;            /* 10.66px */
  box-sizing: border-box;
}

.timer-entry-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.666rem;                       /* 10.66px */
}

.timer-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.74rem;                  /* ~59.82px */
  height: 2rem;                       /* 31.97px */
  border-radius: 9999px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 0.777rem;                /* 12.43px */
  line-height: 1.125rem;
  color: #FFFFFF;
  padding: 0 0.666rem;
  white-space: nowrap;
}

.timer-entry-name {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 0.777rem;
  line-height: 1.125rem;
  color: #000000;
  white-space: nowrap;
}

.timer-entry-time {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.777rem;
  line-height: 1.125rem;
  white-space: nowrap;
}

.timer-time-active { color: #E80000; }
.timer-time-muted  { color: #888888; }

/* ── Slide 1 Card: Background Activity (Frame 27333: 584px x 371px) ────── */

.activity-card {
  position: relative;
  width: 36.5rem;                      /* 584px */
  height: 23.1875rem;                 /* 371px */
  background: #FFFFFF;
  border-radius: 1.11rem;             /* 17.76px */
  box-sizing: border-box;
  overflow: hidden;
}

.activity-title {
  position: absolute;
  left: 1.5rem;                        /* 24px */
  top: 1.4375rem;                      /* 23px */
  width: 9.5625rem;                    /* 153px */
  height: 1.125rem;                    /* 18px */
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 1rem;                     /* 16px */
  line-height: 1.125rem;              /* 18px */
  color: #000000;
  margin: 0;
}

/* Action bar */
.activity-action-bar {
  position: absolute;
  left: 1.61375rem;                    /* 25.82px */
  top: 3.428125rem;                    /* 54.85px */
  width: 34.156875rem;                 /* 546.51px */
  height: 3.2875rem;                   /* 52.6px */
  background: #FFF8F8;
  border-bottom: 0.0952rem solid #F9C3C3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.2175rem;
  box-sizing: border-box;
}

.activity-selected-count {
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 0.548rem;                 /* 8.77px */
  line-height: 1.125rem;
  color: #E5272A;
}

.activity-action-btns {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.act-btn-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.3075rem;                   /* 20.92px */
  padding: 0 0.505rem;
  background: #E5272A;
  border: none;
  border-radius: 2.1rem;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 0.505rem;                 /* 8.08px */
  line-height: 0.75rem;
  color: #FFFFFF;
  cursor: default;
}

.act-btn-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.43875rem;                  /* 23.02px */
  padding: 0 0.505rem;
  background: transparent;
  border: 0.0658rem solid #E5E7EB;
  border-radius: 2.1rem;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 0.505rem;                 /* 8.08px */
  line-height: 0.75rem;
  color: #374151;
  cursor: default;
}

.act-btn-clear {
  background: transparent;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 0.487rem;                 /* 7.79px */
  line-height: 0.9375rem;
  color: #6B7280;
  cursor: default;
}

/* Rows list */
.activity-rows-list {
  position: absolute;
  left: 1.521875rem;                   /* 24.35px */
  top: 7.60625rem;                     /* 121.7px */
  width: 34.171875rem;                 /* 546.75px */
  display: flex;
  flex-direction: column;
  gap: 0.6875rem;                      /* ~11px */
}

.activity-row {
  position: relative;
  width: 34.171875rem;                 /* 546.75px */
  height: 3.576875rem;                 /* 57.23px */
  background: #FFFFFF;
  border: 0.0595rem solid #E5E7EB;
  border-radius: 0.4566rem;            /* 7.3px */
  display: flex;
  align-items: center;
  padding: 0.5rem 0.8rem;
  box-sizing: border-box;
  gap: 0.65rem;
}

.act-checkbox {
  width: 0.41875rem;                   /* 6.7px */
  height: 0.41875rem;
  min-width: 0.41875rem;
  border: 0.0262rem solid #767676;
  border-radius: 0.0524rem;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.act-checkbox.is-checked {
  background: #E5272A;
  border-color: #E5272A;
}

.act-time-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 2.74rem;                  /* 43.84px */
}

.act-time-start {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.4566rem;                /* 7.3px */
  line-height: 0.625rem;
  color: #6A7282;
  text-align: right;
}

.act-time-end {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.4566rem;
  line-height: 0.625rem;
  color: #99A1AF;
  text-align: right;
  margin-top: 0.076rem;
}

.act-indicator-bar {
  width: 0.075rem;                     /* 1.2px */
  height: 1.326rem;                    /* 21.22px */
  border-radius: 9999px;
  flex-shrink: 0;
}

.act-main-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.228rem;
}

.act-header-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.act-app-label {
  display: flex;
  align-items: center;
  gap: 0.38rem;
}

.act-app-icon {
  width: 0.913rem;                     /* 14.61px */
  height: 0.913rem;
  flex-shrink: 0;
}

.act-entry-title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.5327rem;                /* 8.52px */
  line-height: 0.75rem;
  color: #1C1C1E;
}

.act-app-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.4566rem;                /* 7.3px */
  line-height: 0.625rem;
  color: #99A1AF;
}

.act-duration-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.076rem 0.304rem;
  background: #F3F4F6;
  border-radius: 9999px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.4566rem;                /* 7.3px */
  line-height: 0.625rem;
  color: #6A7282;
}

.act-desc-line {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.4566rem;                /* 7.3px */
  line-height: 0.75rem;
  color: #6A7282;
  margin: 0;
  padding-left: 1.369rem;
}

/* ── Slide 2 Card: Cross-Platform & Offline Ready (587px x 371px) ───────── */

.offline-card {
  position: relative;
  width: 36.6875rem;                   /* 587px */
  height: 23.1875rem;                 /* 371px */
  background: #FFFFFF;
  border: 0.0625rem solid #E5E7EB;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.04);
  border-radius: 1rem;                /* 16px */
  padding: 2rem;                       /* 32px */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1.9375rem;                      /* 31px */
}

.offline-header-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 32.6875rem;                   /* 523px */
  height: 2rem;                        /* 32px */
}

.offline-brand-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;                         /* 8px */
}

.offline-icon-box {
  width: 2rem;                         /* 32px */
  height: 2rem;
  background: rgba(85, 88, 175, 0.07);
  border-radius: 0.5rem;              /* 8px */
  display: flex;
  align-items: center;
  justify-content: center;
}

.offline-brand-text {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;                  /* 12px */
  line-height: 1rem;
  text-transform: uppercase;
  color: #5558AF;
}

.offline-status-pill {
  display: flex;
  align-items: center;
  padding: 0.25rem 0.625rem;           /* 4px 10px */
  gap: 0.375rem;                       /* 6px */
  background: #F3F4F6;
  border-radius: 6.25rem;
}

.offline-dot-green {
  width: 0.375rem;                     /* 6px */
  height: 0.375rem;
  border-radius: 50%;
  background: #10B981;
}

.offline-status-text {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.6875rem;                /* 11px */
  line-height: 0.875rem;              /* 14px */
  color: #4B5563;
}

.offline-main-title {
  width: 32.6875rem;                   /* 523px */
  height: 1.75rem;                     /* 28px */
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 1.375rem;                 /* 22px */
  line-height: 1.75rem;               /* 28px */
  letter-spacing: -0.03125rem;        /* -0.5px */
  color: #1C1C1E;
  margin: 0;
}

.offline-devices-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.75rem;                        /* 12px */
  width: 32.875rem;                    /* 526px */
}

.device-card {
  width: 15.8125rem;                   /* 253px */
  height: 4.0625rem;                   /* 65px */
  background: #F9FAFB;
  border: 0.0625rem solid #E5E7EB;
  border-radius: 0.75rem;             /* 12px */
  padding: 1rem;                       /* 16px */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.75rem;                        /* 12px */
}

.device-card.device-mobile-tint {
  width: 15.75rem;                     /* 252px */
  background: #FDF8F6;
  border-color: #F8E3DD;
}

.device-icon-box {
  width: 1.25rem;                      /* 20px */
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.device-info-col {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.device-name {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.8125rem;                /* 13px */
  line-height: 1.0625rem;             /* 17px */
  color: #1C1C1E;
}

.device-status-label {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 0.6875rem;                /* 11px */
  line-height: 0.875rem;              /* 14px */
}

.status-green { color: #10B981; }
.status-terracotta { color: #CC785C; }

/* ── Slide 3 Card: Flexible Deployment (584px x 376px) ──────────────────── */

.deployment-card {
  position: relative;
  width: 36.5rem;                      /* 584px */
  height: 23.5rem;                     /* 376px */
  background: #FFFFFF;
  border: 0.0604rem solid #E5E7EB;    /* 0.966px */
  box-shadow: 0 0.2416rem 1.2079rem rgba(0, 0, 0, 0.04);
  border-radius: 0.9663rem;            /* 15.46px */
  padding: 1.45rem;                    /* 23.2px */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 2.1875rem;                      /* 35px */
}

.deployment-header-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 33.60125rem;                  /* 537.62px */
  height: 1.9325rem;                   /* 30.92px */
}

.deploy-title-group {
  display: flex;
  align-items: center;
  gap: 0.604rem;                       /* 9.66px */
}

.deploy-icon-box {
  width: 1.9325rem;                    /* 30.92px */
  height: 1.9325rem;
  background: #EEF2F6;
  border-radius: 0.483rem;             /* 7.73px */
  display: flex;
  align-items: center;
  justify-content: center;
}

.deploy-title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 1.0871rem;                /* 17.39px */
  line-height: 1.4375rem;             /* 23px */
  color: #1C1C1E;
  margin: 0;
}

.deploy-options-list {
  display: flex;
  flex-direction: column;
  gap: 1.9375rem;                      /* 31px */
  width: 33.60125rem;                  /* 537.62px */
}

.deploy-option-row {
  width: 33.60125rem;                  /* 537.62px */
  height: 3.14125rem;                  /* 50.26px */
  background: #FFFFFF;
  border: 0.0604rem solid #E5E7EB;    /* 0.966px */
  border-radius: 0.483rem;             /* 7.73px */
  padding: 0.604rem 0.966rem;          /* 9.66px 15.46px */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.deploy-option-left {
  display: flex;
  align-items: center;
  gap: 0.725rem;                       /* 11.6px */
}

.deploy-app-logo {
  width: 1.69125rem;                   /* 27.06px */
  height: 1.69125rem;
  border-radius: 0.362rem;             /* 5.8px */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.deploy-meta-col {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.deploy-opt-heading {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.7247rem;                /* 11.6px */
  line-height: 0.9375rem;             /* 15px */
  color: #1C1C1E;
}

.deploy-opt-sub {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 0.6643rem;                /* 10.63px */
  line-height: 0.875rem;              /* 14px */
  color: #9CA3AF;
}

.deploy-option-right {
  display: flex;
  align-items: center;
  gap: 0.725rem;                       /* 11.6px */
}

.deploy-status-pill {
  padding: 0.12rem 0.483rem;           /* 1.93px 7.73px */
  background: #F3F4F6;
  border-radius: 6rem;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 0.604rem;                 /* 9.66px */
  line-height: 0.8125rem;             /* 13px */
  color: #4B5563;
}

.deploy-check {
  width: 0.8456rem;                    /* 13.53px */
  height: 0.8456rem;
  border-radius: 0.2415rem;            /* 3.86px */
  background: #FFFFFF;
  border: 0.0604rem solid #D1D5DB;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deploy-check.is-checked {
  background: #4F46E5;
  border-color: #4F46E5;
}

/* ── Carousel Pagination Indicators ───────────────────────────────────────── */

.features-progress-bar {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: clamp(0.5rem, 2.5vw, 6.25rem);
  position: relative;
  width: 100%;
  max-width: 75.8125rem;
  margin: clamp(2rem, 4vw, 3.5rem) auto 0;
  padding: 0 1rem;
  box-sizing: border-box;
}

.fp-bar-btn {
  position: relative;
  flex: 1 1 0;
  max-width: 14.1875rem;
  height: 0.3125rem;
  border-radius: 1.6875rem;
  background: rgba(217, 217, 217, 0.48);
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  overflow: hidden;
  transition: background-color 0.25s ease;
}

.fp-bar-btn:hover {
  background: rgba(217, 217, 217, 0.75);
}

.fp-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: rgba(232, 0, 0, 0.72);
  border-radius: 1.6875rem;
  pointer-events: none;
}

@media (min-width: 769px) {
  .features-progress-bar {
    margin-top: 3.5rem;
    gap: 6.25rem;
  }

  .fp-bar-btn {
    flex: none;
    width: 14.1875rem;
  }
}

/* ==========================================================================
   Work Anywhere, Sync Instantly Section (Figma Frame 27232 & Marquee)
   All dimensions and spacings in pure rem (1rem = 16px)
   ========================================================================== */

/* Outer section: Figma 1440px wide, dark #1B1B1B background */
.work-anywhere-section {
  position: relative;
  width: 100%;
  background-color: #1B1B1B;
  color: #FFFFFF;
  padding: 6.5625rem 0 5rem; /* 105px top, 80px bottom */
  overflow: hidden;
}

/* Inner max-width container: Figma 1242px exact centered canvas */
.work-anywhere-container {
  width: 100%;
  max-width: 77.625rem; /* 1242px exact width */
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

/* ── Section Heading Frame (Frame 27232: 494×111px) ── */
.work-anywhere-heading-wrap {
  text-align: center;
  width: 100%;
  max-width: 48rem; /* ample room for single-line title & subtitle on desktop */
  margin-bottom: 0;
}

/* Title: DM Sans 500, 36px/46px, letter-spacing -0.22px, #FAF4EE */
.work-anywhere-title {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 2.25rem; /* 36px */
  line-height: 2.875rem; /* 46px */
  letter-spacing: -0.01375rem; /* -0.22px */
  color: #FAF4EE;
  margin: 0;
  white-space: nowrap;
}

/* Subtitle: DM Sans 300, 18px/27px, #FFFFFF */
.work-anywhere-subtitle {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 1.125rem; /* 18px */
  line-height: 1.6875rem; /* 27px */
  color: #FFFFFF;
  margin: 0.9375rem 0 0 0; /* 15px */
  white-space: nowrap;
}

@media (max-width: 768px) {
  .work-anywhere-title,
  .work-anywhere-subtitle {
    white-space: normal;
  }
}


/* ── Tab Navigation (Frame 27233: padding 23px 10px, gap 10px, height 121px) ── */
.work-anywhere-tabs {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 1.4375rem 0.625rem; /* 23px 10px */
  gap: 0.625rem; /* 10px */
  height: 7.5625rem; /* 121px */
  width: 100%;
}

/* Tab Button: 300×67px, padding 20px, border-radius 16px */
.wa-tab-btn {
  flex: 1 1 0;
  max-width: 18.75rem; /* 300px */
  height: 4.1875rem; /* 67px */
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 1rem; /* 16px */
  padding: 1.25rem 0.75rem; /* 20px 12px */
  color: #FFFFFF;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1rem; /* 16px */
  line-height: 1.5rem; /* 24px */
  cursor: pointer;
  text-align: center;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.wa-tab-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Active tab: solid white, black text */
.wa-tab-btn.is-active {
  background: #FFFFFF;
  color: #000000;
  font-weight: 400;
}

.wa-tab-btn:focus-visible {
  outline: 0.125rem solid #E80000;
  outline-offset: 0.1875rem;
}

/* ── Showcase image wrap (Group 9128: 1242×550px, border-radius 20px) ── */
.work-anywhere-showcase-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1242 / 550;
  border-radius: 1.25rem; /* 20px */
  overflow: hidden;
  background: #111111;
}

.wa-showcase-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease-in-out;
}

.wa-showcase-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
}

.wa-showcase-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

/* ── Floating Glassmorphic Feature Card (Frame 27233 / Card - Time Capture)
   Figma: 423×135.57px, padding 4px 18.381px, gap 13.79px,
   background rgba(255,255,255,0.75), border-radius 10px,
   box-shadow 0 13.7857px 27.5714px -9.19048px rgba(0,0,0,0.0784314),
              0 2.29762px 9.19048px rgba(0,0,0,0.0588235) ── */
.wa-feature-card {
  position: absolute;
  z-index: 2;
  width: 26.4375rem; /* 423px */
  max-width: 34.05%; /* 423px / 1242px */
  height: 8.473125rem; /* 135.57px */
  padding: 0.25rem 1.1488125rem; /* 4px 18.381px */
  gap: 0.861875rem; /* 13.79px */
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(0.625rem); /* 10px */
  -webkit-backdrop-filter: blur(0.625rem);
  border-radius: 0.625rem; /* 10px */
  box-shadow:
    0 0.8616rem 1.7232rem -0.5744rem rgba(0, 0, 0, 0.0784314),
    0 0.1436rem 0.5744rem rgba(0, 0, 0, 0.0588235);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: auto;
}

/* Text: DM Sans 400, 18px/27px, #000000 */
.wa-card-text {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.125rem; /* 18px */
  line-height: 1.6875rem; /* 27px */
  text-align: center;
  color: #000000;
  margin: 0;
}

/* Per-slide card placements matching Figma coordinates & screenshots */
/* Slide 0 (Web): left 64.5px (5.193%), vertically centered on table */
.wa-card--web {
  left: 5.193%;
  top: 50%;
  transform: translateY(-50%);
}

/* Slide 1 (Desktop): left 53.5px (4.307%), top 176px (32%) */
.wa-card--desktop {
  left: 4.307%;
  top: 32%;
}

/* Slide 2 (Mobile): left 790.5px (63.647%), top 299px (54.36%) */
.wa-card--mobile {
  left: 63.647%;
  top: 54.36%;
}

/* Slide 3 (Offline): left 28px (2.25%), resting on wood table at bottom left */
.wa-card--offline {
  left: 2.25%;
  bottom: 1.75rem; /* 28px */
}

/* ── Bottom CTA Row: Schedule a Demo (Frame 27234)
   Figma: 208×57px, padding 15px 37px, #E80000, border-radius 9999px.
   Positioned 43px (2.6875rem) below 550px image showcase (20px auto-layout gap + 23px top padding). ── */
.work-anywhere-cta-row {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 0.625rem; /* 10px left gutter matching Frame 27234 */
  margin-top: 2.6875rem; /* 43px - Figma exact distance from 550px image */
  box-sizing: border-box;
}

.wa-demo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13rem; /* 208px */
  height: 3.5625rem; /* 57px */
  padding: 0.9375rem 2.3125rem; /* 15px 37px */
  background: #E80000;
  color: #FFFFFF;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 1rem; /* 16px */
  line-height: 1.6875rem; /* 27px */
  border-radius: 9999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.wa-demo-btn:hover {
  background: #CC0000;
  transform: translateY(-0.0625rem);
}

.wa-demo-btn:active {
  transform: translateY(0);
}

.wa-demo-btn:focus-visible {
  outline: 0.125rem solid #FFFFFF;
  outline-offset: 0.1875rem;
}

/* ── Marquee Heading (Frame 27232: 780×47px)
   Figma exact spacing:
   105px (6.5625rem) below CTA button bottom (Frame 27369 top: 1102px - button bottom: 997px),
   70px (4.375rem) above marquee cards top (6px gap + 64px padding-top) ── */
.marquee-heading-wrap {
  text-align: center;
  width: 100%;
  max-width: 60rem; /* ample room for 774px single-line title */
  margin-top: 6.5625rem; /* 105px - Figma exact distance from button bottom to heading top */
  margin-bottom: 4.375rem; /* 70px - Figma exact distance from heading bottom to cards top */
  padding: 0 1.25rem;
}

/* Heading: DM Sans 500, 36px/46px, -0.22px, #FAF4EE */
.marquee-heading {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 2.25rem; /* 36px */
  line-height: 2.875rem; /* 46px */
  letter-spacing: -0.01375rem; /* -0.22px */
  color: #FAF4EE;
  margin: 0;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .marquee-heading {
    white-space: normal;
  }
}


/* ── Continuous Infinite Marquee Scroller (Edge-to-edge) ── */
.marquee-scroller {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 0.5rem 0; /* protective breathing room for card shadows & hover translateY */
  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}

.marquee-scroller:focus-visible {
  outline: 0.125rem solid #E80000;
  outline-offset: 0.25rem;
}

/* Track: pitch 122.93px = 89.71px card + 33.22px gap */
.marquee-track {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2.07625rem; /* 33.22px */
  width: max-content;
  animation: waMarqueeScroll 35s linear infinite;
  will-change: transform;
}

.marquee-scroller:hover .marquee-track,
.marquee-scroller:focus-within .marquee-track {
  animation-play-state: paused;
}

/* RAW SVGs already contain the white rounded card, border, and drop shadow.
   No white background or border added to .marquee-item. */
.marquee-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  transition: transform 0.2s ease;
}

.marquee-item:hover {
  transform: translateY(-0.125rem); /* -2px */
}

/* Native SVG is 107×102px containing 89.71×89.71px card + blur shadow */
.marquee-logo {
  height: 6.375rem; /* 102px */
  width: auto;
  object-fit: contain;
  display: block;
  user-select: none;
  pointer-events: none;
}

@keyframes waMarqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
    overflow-x: auto;
    width: 100%;
    padding-bottom: 0.5rem;
  }

  .wa-showcase-slide {
    transition: none;
  }
}

/* ── Mobile Responsive (<= 768px) ── */

@media (max-width: 768px) {
  .work-anywhere-section {
    padding: 3.5rem 0;
  }

  .work-anywhere-container {
    padding: 0 1.25rem;
  }

  .work-anywhere-title {
    font-size: 1.875rem;
    line-height: 2.375rem;
    white-space: normal;
  }

  .work-anywhere-subtitle {
    font-size: 1rem;
    line-height: 1.5rem;
    margin-top: 0.625rem;
    white-space: normal;
  }

  .work-anywhere-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
    padding: 0.75rem 0;
    height: auto;
  }

  .wa-tab-btn {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 3.125rem;
    padding: 0.625rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.75rem;
  }

  .wa-feature-card {
    max-width: 60%;
    height: auto;
    min-height: 5.5rem;
    padding: 0.5rem 0.875rem;
  }

  .wa-card-text {
    font-size: 0.875rem;
    line-height: 1.35;
  }

  .work-anywhere-cta-row {
    margin-top: 3.5rem;
    justify-content: center;
  }

  .marquee-heading-wrap {
    margin-top: 4rem;
    margin-bottom: 2.5rem;
  }

  .marquee-heading {
    font-size: 1.625rem;
    line-height: 2.125rem;
    white-space: normal;
  }

  .marquee-track {
    gap: 1.5rem;
  }

  .marquee-logo {
    height: 5.25rem; /* 84px */
  }
}

@media (max-width: 480px) {
  .work-anywhere-section {
    padding: 3rem 0;
  }

  .work-anywhere-container {
    padding: 0 1rem;
  }

  .work-anywhere-title {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .work-anywhere-subtitle {
    font-size: 0.875rem;
    line-height: 1.375rem;
    margin-top: 0.5rem;
  }

  .wa-tab-btn {
    min-height: 2.75rem;
    font-size: 0.8125rem;
    border-radius: 0.625rem;
  }

  .wa-feature-card {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 0.625rem !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 1.25rem);
    max-width: 22rem;
    height: auto;
    min-height: auto;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
  }

  .wa-card-text {
    font-size: 0.75rem;
    line-height: 1.3;
  }

  .work-anywhere-cta-row {
    margin-top: 2rem;
    justify-content: center;
  }

  .marquee-heading-wrap {
    margin-top: 3rem;
    margin-bottom: 1.5rem;
  }

  .marquee-heading {
    font-size: 1.25rem;
    line-height: 1.625rem;
  }

  .marquee-track {
    gap: 1.125rem;
  }

  .marquee-logo {
    height: 4.25rem; /* 68px */
  }
}

/* ==========================================================================
   Advanced Platform Capabilities Section (Figma Frame 27341)
   All dimensions and spacings in pure rem (1rem = 16px)
   ========================================================================== */

/* Outer section: Figma 1440px wide, 2158px height, white #FFFFFF background */
.capabilities-section {
  position: relative;
  width: 100%;
  background-color: #FFFFFF;
  padding: 9.5625rem 0 4.8125rem; /* 153px top, 77px bottom */
  overflow: hidden;
}

/* Inner centered container: Figma 1229px canvas */
.capabilities-container {
  width: 100%;
  max-width: 76.8125rem; /* 1229px */
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Section Heading (Heading 2): top 153px, height 48px, 126px gap to Row 1 */
.capabilities-heading-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  margin-bottom: 7.875rem; /* 126px (327px - 153px - 48px) */
}

.capabilities-title {
  width: 100%;
  max-width: 32rem; /* 512px */
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 2.25rem; /* 36px */
  line-height: 3rem; /* 48px / 133% */
  letter-spacing: -0.06rem; /* -0.96px */
  color: #1E0B3A;
  margin: 0;
  text-align: center;
}

/* Common Row Style */
.capabilities-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-left: 0.9375rem; /* 15px */
  box-sizing: border-box;
}

/* Row 1: AI Assistance (top 327px, height 437px, gap 126px) */
.capabilities-row:nth-of-type(1) {
  gap: 7.875rem; /* 126px */
  height: 27.3125rem; /* 437px */
}

.capabilities-row:nth-of-type(1) .capability-media-col {
  width: 37.875rem; /* 606px */
  height: 27.3125rem; /* 437px */
}

/* Row 2: Integrated Billing & Expense Management (top 949px, height 473px, gap 52px, 185px from row 1) */
.capabilities-row:nth-of-type(2) {
  margin-top: 11.5625rem; /* 185px (949px - 327px - 437px) */
  gap: 3.25rem; /* 52px */
  height: 29.5625rem; /* 473px */
}

.capabilities-row:nth-of-type(2) .capability-media-col {
  width: 42.1875rem; /* 675px */
  height: 29.5625rem; /* 473px */
}

/* Row 3: Budgets, Estimates & Retainers (top 1608px, height 473px, gap 52px, 186px from row 2) */
.capabilities-row:nth-of-type(3) {
  margin-top: 11.625rem; /* 186px (1608px - 949px - 473px) */
  gap: 3.25rem; /* 52px */
  height: 29.5625rem; /* 473px */
}

.capabilities-row:nth-of-type(3) .capability-media-col {
  width: 42.1875rem; /* 675px */
  height: 29.5625rem; /* 473px */
}

/* Text Column (Frame 27342): width 486.4px (30.4rem), gap 12px (0.75rem) */
.capability-text-col {
  width: 30.4rem; /* 486.4px */
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.75rem; /* 12px */
}

/* Heading 3 */
.capability-title {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1.5rem; /* 24px */
  line-height: 1.8125rem; /* 29px / 121% */
  color: #323333;
  margin: 0;
}

/* Description paragraph */
.capability-desc {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.125rem; /* 18px */
  line-height: 1.625rem; /* 26px / 144% */
  color: #323333;
  margin: 0;
}

.capability-desc--ai {
  line-height: 1.875rem; /* 30px / 167% */
}

/* Media Column */
.capability-media-col {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Screenshot image */
.capability-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 0.4375rem; /* 7px */
}

/* ── Mobile Responsive (<= 768px) ── */
@media (max-width: 768px) {
  .capabilities-section {
    padding: 4rem 0 3.5rem;
  }

  .capabilities-container {
    max-width: 100%;
    padding: 0 1.25rem;
  }

  .capabilities-heading-wrap {
    margin-bottom: 2.5rem;
    padding: 0;
  }

  .capabilities-title {
    font-size: 1.75rem;
    line-height: 2.25rem;
    letter-spacing: -0.03rem;
    max-width: 100%;
  }

  .capabilities-row {
    flex-direction: column !important;
    align-items: flex-start;
    height: auto !important;
    gap: 1.75rem !important;
    margin-top: 3.5rem !important;
    padding: 0 !important;
  }

  .capabilities-row:nth-of-type(1) {
    margin-top: 0 !important;
  }

  .capabilities-row--reverse .capability-text-col {
    order: 1;
  }

  .capabilities-row--reverse .capability-media-col {
    order: 2;
  }

  .capability-text-col {
    width: 100%;
    max-width: 100%;
  }

  .capability-title {
    font-size: 1.375rem;
    line-height: 1.75rem;
  }

  .capability-desc {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .capability-media-col {
    width: 100% !important;
    height: auto !important;
  }

  .capability-img {
    width: 100%;
    height: auto;
    border-radius: 0.4375rem;
    box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.06);
  }
}

@media (max-width: 480px) {
  .capabilities-section {
    padding: 3rem 0 2.5rem;
  }

  .capabilities-container {
    padding: 0 1rem;
  }

  .capabilities-heading-wrap {
    margin-bottom: 2rem;
  }

  .capabilities-title {
    font-size: 1.375rem;
    line-height: 1.875rem;
    letter-spacing: -0.02rem;
  }

  .capabilities-row {
    gap: 1.25rem !important;
    margin-top: 2.75rem !important;
    padding: 0 !important;
  }

  .capability-title {
    font-size: 1.25rem;
    line-height: 1.625rem;
  }

  .capability-desc {
    font-size: 0.9375rem;
    line-height: 1.45rem;
  }
}

/* ==========================================================================
   Tailored for Your Organization Section (Figma Frame 27347)
   All dimensions and spacings in pure rem (1rem = 16px)
   ========================================================================== */

/* Outer section: Figma 1440px wide, 840px height, white #FFFFFF background */
.tailored-section {
  position: relative;
  width: 100%;
  background-color: #FFFFFF;
  padding: 3.9375rem 0 5.8125rem; /* 63px top, 93px bottom */
  overflow: hidden;
}

/* Inner centered container: Figma 1232px canvas */
.tailored-container {
  width: 100%;
  max-width: 77rem; /* 1232px */
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Section Heading (Heading 2): top 63px, height 48px, 55px gap to cards */
.tailored-heading-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  margin-bottom: 3.4375rem; /* 55px (166px - 63px - 48px) */
}

.tailored-title {
  width: 100%;
  max-width: 29.8125rem; /* 477px */
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 2.25rem; /* 36px */
  line-height: 3rem; /* 48px / 133% */
  letter-spacing: -0.06rem; /* -0.96px */
  color: #1E0B3A;
  margin: 0;
  text-align: center;
}

/* Cards Row (Component 18): width 1232px, gap 18px, height 580px */
.tailored-cards-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 1.125rem; /* 18px */
  min-height: 36.25rem; /* 580px */
}

/* Individual Card (Frame 27347 Container: 607px x 580px) */
.tailored-card {
  position: relative;
  width: calc(50% - 0.5625rem);
  flex: none;
  min-width: 0;
  height: 36.25rem; /* 580px */
  background-color: #0F0E0D;
  border-radius: 0.75rem; /* 12px */
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: width;
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.15);
  outline: none;
}

.tailored-card:focus-visible {
  box-shadow: 0 0 0 2px #E80000, 0 0.25rem 1.25rem rgba(0, 0, 0, 0.2);
}

/* Subtle texture gradient on card */
.tailored-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
}

.tailored-card--enterprise::before {
  background-image: 
    linear-gradient(180deg, rgba(15, 14, 13, 0.2) 0%, rgba(15, 14, 13, 0.6) 60%, rgba(15, 14, 13, 0.95) 100%),
    url('/assets/images/v2/tailored-bg-left.avif');
}

.tailored-card--direct::before {
  background-image: 
    linear-gradient(180deg, rgba(15, 14, 13, 0.2) 0%, rgba(15, 14, 13, 0.6) 60%, rgba(15, 14, 13, 0.95) 100%),
    url('/assets/images/v2/tailored-bg-right.avif');
}

/* Inner content */
.tailored-card-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 2.25rem 2.25rem 0; /* 36px top, 36px left/right */
  box-sizing: border-box;
}

/* Header Text Frame */
.tailored-header {
  width: 33.4375rem; /* 535px */
  min-width: 33.4375rem;
  max-width: 33.4375rem;
  flex: none;
  margin-bottom: 1.5rem;
}

.tailored-heading {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 2rem; /* 32px */
  line-height: 2.3125rem; /* 37px / 115% */
  letter-spacing: -0.02rem; /* -0.32px */
  color: #FAFAF9;
  margin: 0 0 1.125rem; /* 18px */
  white-space: nowrap; /* Maintains exact single-line width, does not shrink/wrap */
}

.tailored-desc {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 0.9375rem; /* 15px */
  line-height: 1.5625rem; /* 25px / 165% */
  letter-spacing: -0.014rem; /* -0.225px */
  color: #FAFAF9;
  opacity: 0.9;
  margin: 0;
  width: 33.4375rem; /* 535px */
  min-width: 33.4375rem; /* Maintains full width without squishing */
  max-width: 33.4375rem;
}

/* Mockup Frame at bottom */
.tailored-mockup-frame {
  position: absolute;
  bottom: 0;
  left: 2.25rem; /* 36px */
  right: 2.25rem; /* 36px */
  width: auto; /* Expands to fill available space in card! */
  height: 22.375rem; /* 358px */
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}

/* ── DOM-Rendered Mockup Windows (Frame 27347) ── */
.mockup-window {
  width: 100%;
  min-width: 33.4375rem; /* 535px - when shrunk, preserves 535px without squishing */
  height: 22.375rem; /* 358px */
  background: #FFFFFF;
  border: 0.0625rem solid #E5E5E5;
  box-shadow: 0 0.625rem 0.9375rem -0.1875rem rgba(0, 0, 0, 0.25), 0 0.25rem 0.375rem -0.25rem rgba(0, 0, 0, 0.2);
  border-radius: 0.75rem; /* 12px */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
  pointer-events: none; /* Display only: animated, not clickable or selectable */
  user-select: none;
}

/* Window Titlebar: 36px height */
.mockup-titlebar {
  width: 100%;
  height: 2.25rem; /* 36px */
  background: #FAFAFA;
  border-bottom: 0.0625rem solid #E5E5E5;
  padding: 0 0.875rem; /* 14px */
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 8px */
  flex-shrink: 0;
  box-sizing: border-box;
}

.mockup-dots {
  display: flex;
  gap: 0.375rem; /* 6px */
  align-items: center;
}

.mockup-dot {
  width: 0.75rem; /* 12px */
  height: 0.75rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.mockup-dot--red { background: #FF5F57; }
.mockup-dot--yellow { background: #FFBD2E; }
.mockup-dot--green { background: #28C840; }

.mockup-url-bar {
  display: flex;
  justify-content: center;
  flex: 1;
}

.mockup-url-pill {
  width: auto;
  min-width: 11.25rem; /* 180px */
  max-width: 16rem;
  height: 1.25rem; /* 20px */
  background: #FFFFFF;
  border: 0.0625rem solid #E5E5E5;
  border-radius: 0.375rem; /* 6px */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.625rem;
  box-sizing: border-box;
}

.mockup-url-text {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.5625rem; /* 9px */
  line-height: 0.875rem; /* 14px */
  color: #9CA3AF;
  white-space: nowrap;
}

/* ── Screen 1: Enterprise Platform Body ── */
.mockup-body-enterprise {
  display: flex;
  width: 100%;
  height: 20.125rem; /* 322px */
}

/* Left Sidebar: 140px */
.mockup-sidebar {
  width: 8.75rem; /* 140px */
  height: 100%;
  background: #0F0F0F;
  padding: 0.75rem; /* 12px */
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
}

.mockup-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.75rem;
  margin-bottom: 0.25rem;
  border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.08);
}

.mockup-logo-icon {
  width: 1.25rem; /* 20px */
  height: 1.25rem;
  display: block;
  flex-shrink: 0;
}

.mockup-logo-text {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: 0.6875rem; /* 11px */
  line-height: 1rem; /* 16px */
  letter-spacing: -0.007rem;
  color: #FFFFFF;
}

.mockup-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.125rem; /* 2px */
  width: 100%;
}

.mockup-nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem; /* 6px 8px */
  border-radius: 0.5rem; /* 8px */
  transition: all 0.2s ease;
}

.mockup-nav-dot {
  width: 0.375rem; /* 6px */
  height: 0.375rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.mockup-nav-label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  font-size: 0.625rem; /* 10px */
  line-height: 0.9375rem; /* 15px */
  color: rgba(255, 255, 255, 0.35);
  transition: color 0.2s ease;
}

.mockup-nav-item.is-active {
  background: rgba(232, 0, 0, 0.2);
}

.mockup-nav-item.is-active .mockup-nav-dot {
  background: #E80000;
}

.mockup-nav-item.is-active .mockup-nav-label {
  color: rgba(255, 255, 255, 0.9);
}

/* Enterprise Main Content */
.mockup-content-enterprise {
  flex: 1;
  height: 100%;
  background: #F7F8FA;
  padding: 1rem; /* 16px */
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* 12px */
  box-sizing: border-box;
}

.mockup-content-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.mockup-content-header {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.mockup-content-title {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: 0.75rem; /* 12px */
  line-height: 1.0625rem;
  color: #111111;
  white-space: nowrap;
}

.mockup-content-desc {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-size: 0.5625rem; /* 9px */
  line-height: 0.8125rem;
  color: #6B7280;
  white-space: nowrap;
}

.mockup-btn-primary {
  height: 1.75rem; /* 28px */
  padding: 0 0.875rem;
  background: #E80000;
  border-radius: 0.5rem; /* 8px */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  font-size: 0.625rem; /* 10px */
  line-height: 0.9375rem; /* 15px */
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.125rem 0.25rem rgba(232, 0, 0, 0.2);
  transition: background-color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
  white-space: nowrap;
}

.mockup-btn-primary.is-saved {
  background: #28C840 !important;
  box-shadow: 0 0.125rem 0.375rem rgba(40, 200, 64, 0.35);
  transform: scale(0.96);
}

.mockup-hosting-card {
  width: 100%;
  background: #FFFFFF;
  border: 0.0625rem solid #E5E5E5;
  border-radius: 0.75rem; /* 12px */
  padding: 0.75rem; /* 12px */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.mockup-card-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: 0.625rem; /* 10px */
  line-height: 0.9375rem; /* 15px */
  letter-spacing: 0.03125rem;
  text-transform: uppercase;
  color: #5F6368;
  margin-bottom: 0.625rem;
  display: block;
}

.mockup-radio-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* 8px */
  width: 100%;
}

.mockup-radio-option {
  width: 100%;
  height: 2.875rem; /* 46px */
  background: #FAFAFA;
  border: 0.0625rem solid #E5E5E5;
  border-radius: 0.75rem; /* 12px */
  padding: 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem; /* 12px */
  box-sizing: border-box;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.mockup-radio-circle {
  width: 1.25rem; /* 20px */
  height: 1.25rem;
  border: 0.125rem solid #D0D0D0;
  border-radius: 50%;
  box-sizing: border-box;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s ease;
}

.mockup-radio-dot {
  width: 0.625rem; /* 10px */
  height: 0.625rem;
  border-radius: 50%;
  background: #E80000;
  transform: scale(0);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), opacity 0.2s ease;
}

.mockup-radio-label {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  font-size: 0.75rem; /* 12px */
  line-height: 1rem; /* 16px */
  color: #111111;
  flex-grow: 1;
  transition: color 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mockup-selected-badge {
  padding: 0.1875rem 0.5rem;
  background: #E80000;
  border-radius: 0.375rem; /* 6px */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: 0.5625rem; /* 9px */
  line-height: 0.875rem; /* 14px */
  color: #FFFFFF;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(0.25rem) scale(0.92);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.2, 0, 0, 1);
}

/* Selected state */
.mockup-radio-option.is-selected {
  background: rgba(232, 0, 0, 0.05);
  border-color: rgba(232, 0, 0, 0.35);
  box-shadow: 0 0.0625rem 0.1875rem rgba(232, 0, 0, 0.08);
}

.mockup-radio-option.is-selected .mockup-radio-circle {
  border-color: #E80000;
}

.mockup-radio-option.is-selected .mockup-radio-dot {
  transform: scale(1);
  opacity: 1;
}

.mockup-radio-option.is-selected .mockup-radio-label {
  color: #E80000;
}

.mockup-radio-option.is-selected .mockup-selected-badge {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* Features Grid */
.mockup-features-grid {
  border-top: 0.0625rem solid #F0F0F0;
  margin-top: 0.625rem;
  padding-top: 0.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 0.375rem;
  column-gap: 0.5rem;
  width: 100%;
}

.mockup-feature-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.mockup-feature-icon {
  width: 0.625rem; /* 10px */
  height: 0.625rem;
  display: block;
  flex-shrink: 0;
}

.mockup-feature-label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  font-size: 0.5625rem; /* 9px */
  line-height: 0.875rem; /* 14px */
  color: #5F6368;
}

/* ── Screen 2: Direct Access / Self-Serve Body ── */
.mockup-body-selfserve {
  width: 100%;
  height: 20.125rem;
  background: #F7F8FA;
  padding: 1.25rem; /* 20px */
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 16px */
  box-sizing: border-box;
}

.mockup-selfserve-header {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.mockup-selfserve-title {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: 0.75rem; /* 12px */
  line-height: 1.0625rem;
  color: #111111;
  white-space: nowrap;
}

.mockup-selfserve-desc {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-size: 0.5625rem; /* 9px */
  line-height: 0.8125rem;
  color: #6B7280;
  white-space: nowrap;
}

.mockup-stepper-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.mockup-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
  flex-shrink: 0;
}

.mockup-step-circle {
  width: 1.75rem; /* 28px */
  height: 1.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: 0.75rem; /* 12px */
  line-height: 1rem;
  position: relative;
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease, transform 0.3s ease;
}

.mockup-step-circle--completed {
  background: #111111;
  border: 0.125rem solid #111111;
  color: #FFFFFF;
}

.mockup-step-circle--active {
  background: #E80000;
  border: 0.125rem solid #E80000;
  color: #FFFFFF;
}

.mockup-step-circle--upcoming {
  background: #FFFFFF;
  border: 0.125rem solid #E5E5E5;
  color: #9CA3AF;
}

.mockup-step-check {
  display: none;
}

.mockup-step-circle--completed .mockup-step-check {
  display: block;
}

.mockup-step-circle--completed .mockup-step-num {
  display: none;
}

.mockup-step-label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  font-size: 0.5625rem; /* 9px */
  line-height: 0.875rem; /* 14px */
  margin-top: 0.25rem;
  transition: color 0.35s ease;
}

.mockup-step-label--completed { color: #111111; }
.mockup-step-label--active { color: #E80000; }
.mockup-step-label--upcoming { color: #9CA3AF; }

.mockup-step-line-wrap {
  flex-grow: 1;
  margin: 0 0.5rem 1.125rem;
  height: 0.125rem;
  background: #E5E5E5;
  position: relative;
  overflow: hidden;
}

.mockup-step-line {
  display: block;
  width: 100%;
  height: 100%;
}

.mockup-step-line--black { background: #111111; }
.mockup-step-line--red { background: #E80000; }
.mockup-step-line--gray { background: #E5E5E5; }

.mockup-step-line--step34 {
  background: #E5E5E5;
  position: relative;
}

.mockup-step-line--step34::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #E80000;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.mockup-step-line--step34.is-filled::after {
  transform: scaleX(1);
}

/* Form Card in Direct Access */
.mockup-form-card {
  width: 100%;
  background: #FFFFFF;
  border: 0.0625rem solid #E5E5E5;
  border-radius: 0.75rem; /* 12px */
  padding: 1rem; /* 16px */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.mockup-form-header {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 8px */
  width: 100%;
  margin-bottom: 0.625rem; /* 10px */
}

.mockup-step-badge {
  width: 1.125rem; /* 18px */
  height: 1.125rem;
  background: #E80000;
  border-radius: 0.3125rem; /* 5px */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: 0.5625rem; /* 9px */
  line-height: 1;
  color: #FFFFFF;
  flex-shrink: 0;
}

.mockup-form-title {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: 0.625rem; /* 10px */
  line-height: 1rem;
  color: #111111;
  letter-spacing: -0.01rem;
  white-space: nowrap;
}

.mockup-step-counter {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.5rem; /* 8px */
  font-weight: 500;
  color: #9CA3AF;
  margin-left: auto;
  letter-spacing: 0.01rem;
  white-space: nowrap;
}

.mockup-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.375rem; /* 6px */
  width: 100%;
}

.mockup-check-item {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 8px */
  width: 100%;
  user-select: none;
  padding: 0.1875rem 0.25rem;
  border-radius: 0.375rem;
  box-sizing: border-box;
  transition: background-color 0.2s ease;
}

.mockup-checkbox {
  width: 0.8125rem; /* 13px */
  height: 0.8125rem;
  border-radius: 0.25rem; /* 4px */
  border: 0.09375rem solid #D1D5DB;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
  flex-shrink: 0;
}

.mockup-checkbox.is-checked {
  background: #111111;
  border-color: #111111;
}

.mockup-check-icon {
  width: 0.4375rem; /* 7px */
  height: 0.375rem; /* 6px */
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.2, 0, 0, 1);
}

.mockup-checkbox.is-checked .mockup-check-icon {
  opacity: 1;
  transform: scale(1);
}

.mockup-check-label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  font-size: 0.53125rem; /* 8.5px */
  line-height: 0.8125rem;
  color: #4B5563;
  transition: color 0.25s ease, font-weight 0.25s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* Visual Hierarchy states */
.mockup-check-item.is-completed .mockup-check-label {
  color: #4B5563;
  font-weight: 500;
}

.mockup-check-item.is-active .mockup-check-label {
  color: #111111;
  font-weight: 600;
}

.mockup-check-item.is-active .mockup-checkbox {
  border-color: #E80000;
}

.mockup-check-item.is-pending .mockup-check-label {
  color: #9CA3AF;
  font-weight: 400;
}

.mockup-check-badge {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.5rem; /* 8px */
  line-height: 0.6875rem;
  font-weight: 600;
  padding: 0.0625rem 0.3125rem;
  border-radius: 0.25rem;
  flex-shrink: 0;
  letter-spacing: 0.01rem;
  transition: all 0.25s ease;
}

.mockup-check-badge.is-done {
  background: #F3F4F6;
  color: #111111;
}

.mockup-check-badge.is-active {
  background: rgba(232, 0, 0, 0.08);
  color: #E80000;
}

.mockup-check-badge.is-pending {
  background: transparent;
  color: #9CA3AF;
  font-weight: 500;
}

.mockup-form-actions {
  margin-top: 0.625rem; /* 10px */
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.mockup-btn-continue {
  flex-grow: 1;
  height: 2rem; /* 32px */
  background: #E80000;
  box-shadow: 0 0.125rem 0.375rem rgba(232, 0, 0, 0.3);
  border-radius: 0.5rem; /* 8px */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  font-size: 0.6875rem; /* 11px */
  line-height: 1rem;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
}

.mockup-btn-continue.is-loading {
  background: #B50000;
  transform: scale(0.97);
}

.mockup-btn-continue.is-success {
  background: #28C840;
  box-shadow: 0 0.125rem 0.375rem rgba(40, 200, 64, 0.35);
}

.mockup-btn-skip {
  width: 3.0625rem; /* 49px */
  height: 2rem; /* 32px */
  background: transparent;
  border: 0.0625rem solid #E5E5E5;
  border-radius: 0.5rem; /* 8px */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-size: 0.6875rem; /* 11px */
  line-height: 1rem;
  color: #5F6368;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Interactive Expand / Contract (70% / 30%) ── */
@media (min-width: 769px) {
  .tailored-card {
    min-width: 0 !important;
    max-width: none !important;
    width: calc(50% - 0.5625rem) !important;
    flex: none !important;
    transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: width;
  }

  .tailored-card-inner {
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  /* Left card hovered / focused: 70% / 30% */
  .tailored-cards-row:has(.tailored-card--enterprise:hover, .tailored-card--enterprise:focus-within) .tailored-card--enterprise,
  .tailored-cards-row[data-hovered="enterprise"] .tailored-card--enterprise {
    width: calc(70% - 0.7875rem) !important;
  }

  .tailored-cards-row:has(.tailored-card--enterprise:hover, .tailored-card--enterprise:focus-within) .tailored-card--direct,
  .tailored-cards-row[data-hovered="enterprise"] .tailored-card--direct {
    width: calc(30% - 0.3375rem) !important;
  }

  /* Right card hovered / focused: 70% / 30% */
  .tailored-cards-row:has(.tailored-card--direct:hover, .tailored-card--direct:focus-within) .tailored-card--direct,
  .tailored-cards-row[data-hovered="direct"] .tailored-card--direct {
    width: calc(70% - 0.7875rem) !important;
  }

  .tailored-cards-row:has(.tailored-card--direct:hover, .tailored-card--direct:focus-within) .tailored-card--enterprise,
  .tailored-cards-row[data-hovered="direct"] .tailored-card--enterprise {
    width: calc(30% - 0.3375rem) !important;
  }
}

/* ── Mobile Responsive (<= 768px) ── */
@media (max-width: 768px) {
  .tailored-section {
    padding: 3.5rem 0;
  }

  .tailored-container {
    max-width: 100%;
    padding: 0 1.25rem;
  }

  .tailored-heading-wrap {
    margin-bottom: 2.25rem;
  }

  .tailored-title {
    font-size: 1.75rem;
    line-height: 2.25rem;
    letter-spacing: -0.03rem;
    max-width: 22rem;
    margin: 0 auto;
  }

  .tailored-cards-row {
    flex-direction: column !important;
    gap: 1.5rem !important;
    min-height: auto !important;
  }

  .tailored-card {
    width: 100% !important;
    flex: none !important;
    height: auto !important;
    min-height: auto !important;
  }

  .tailored-card-inner {
    padding: 1.75rem 1.25rem 1.75rem;
  }

  .tailored-header {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .tailored-heading {
    font-size: 1.625rem;
    line-height: 2rem;
    margin-bottom: 0.75rem;
    white-space: normal !important;
  }

  .tailored-desc {
    font-size: 0.875rem;
    line-height: 1.45rem;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .tailored-mockup-frame {
    position: relative;
    bottom: auto;
    left: auto;
    width: 100%;
    height: auto;
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    overflow: hidden;
  }

  .mockup-window {
    transform-origin: top center;
    transform: scale(min(1, calc((100vw - 3rem) / 535px)));
    margin-bottom: calc(22.375rem * (min(1, calc((100vw - 3rem) / 535px)) - 1));
  }
}

@media (max-width: 480px) {
  .tailored-section {
    padding: 3rem 0 2.5rem;
  }

  .tailored-container {
    padding: 0 1rem;
  }

  .tailored-heading-wrap {
    margin-bottom: 1.75rem;
  }

  .tailored-title {
    font-size: 1.375rem;
    line-height: 1.875rem;
    letter-spacing: -0.02rem;
    max-width: 18rem;
    margin: 0 auto;
  }

  .tailored-cards-row {
    gap: 1.25rem !important;
  }

  .tailored-card-inner {
    padding: 1.5rem 1rem 1.5rem;
  }

  .tailored-heading {
    font-size: 1.375rem;
    line-height: 1.75rem;
  }

  .tailored-desc {
    font-size: 0.8125rem;
    line-height: 1.35rem;
  }

  .tailored-mockup-frame {
    margin-top: 1.25rem;
  }

  .mockup-window {
    transform-origin: top center;
    transform: scale(min(1, calc((100vw - 2.5rem) / 535px)));
    margin-bottom: calc(22.375rem * (min(1, calc((100vw - 2.5rem) / 535px)) - 1));
  }
}

/* ==========================================================================
   FAQ Section (Frame 27246, 1440×756, #F8F8FA)
   ========================================================================== */
.faq-section {
  width: 100%;
  background-color: #F8F8FA;
  padding: 4.0375rem 0 5.25rem; /* ~64.6px top, 84px bottom */
  box-sizing: border-box;
}

.faq-container {
  width: 100%;
  max-width: 58rem; /* 928px Figma accordion width */
  margin: 0 auto;
  padding: 0 1.25rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.faq-header {
  width: 100%;
  text-align: center;
  margin-bottom: 2.8125rem; /* ~45px */
}

.faq-title {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 500;
  font-size: 2.5rem; /* 40px */
  line-height: 2.875rem; /* 46px / 115% */
  color: #000000;
  margin: 0;
  text-align: center;
  letter-spacing: -0.04rem;
}

.faq-accordion {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.faq-item {
  width: 100%;
  border-top: 0.05rem solid #E8EBF2; /* 0.8px */
  box-sizing: border-box;
}

.faq-item:first-child {
  border-radius: 0.625rem 0.625rem 0 0;
}

.faq-item:last-child {
  border-bottom: 0.05rem solid #E8EBF2;
  border-radius: 0 0 0.625rem 0.625rem;
}

.faq-heading {
  margin: 0;
  padding: 0;
  width: 100%;
}

.faq-trigger {
  width: 100%;
  min-height: 4.9375rem; /* 79px */
  padding: 1.5rem 1.5rem; /* 24px */
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem; /* 32px */
  text-align: left;
  outline: none;
  box-sizing: border-box;
  transition: background-color 0.2s ease;
}

.faq-trigger:hover {
  background-color: rgba(0, 0, 0, 0.015);
}

.faq-trigger:focus-visible {
  outline: 2px solid #E80000;
  outline-offset: -2px;
}

.faq-question {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 500;
  font-size: 1.5rem; /* 24px */
  line-height: 1.9375rem; /* 31px */
  color: #38312F;
  flex: 1;
  letter-spacing: -0.015rem;
}

.faq-chevron {
  width: 0.75rem; /* 12px */
  height: 0.75rem; /* 12px */
  border-right: 0.15rem solid #000000; /* 2.4px */
  border-bottom: 0.15rem solid #000000;
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
  flex-shrink: 0;
  margin-right: 0.125rem;
}

.faq-item.is-open .faq-chevron {
  transform: rotate(-135deg);
  border-color: #888888;
}

.faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

.faq-item.is-open .faq-content {
  grid-template-rows: 1fr;
}

.faq-content-inner {
  min-height: 0;
  overflow: hidden;
}

.faq-answer {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
  font-size: 1rem; /* 16px */
  line-height: 1.5rem; /* 24px / 150% */
  color: #38312F;
  margin: 0;
  padding: 0 1.5rem 1.75rem;
}

/* ==========================================================================
   Schedule Demo Section (Frame 27237, 1440×894, #1B1B1B)
   ========================================================================== */
.demo-section {
  width: 100%;
  background-color: #1B1B1B;
  padding: 4.125rem 0 5.5rem; /* ~66px top */
  box-sizing: border-box;
  color: #FFFFFF;
}

.demo-container {
  width: 100%;
  max-width: 48.47125rem; /* 775.54px */
  margin: 0 auto;
  padding: 0 1.25rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.demo-header {
  width: 100%;
  text-align: center;
  margin-bottom: 2.5rem;
}

.demo-title {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 500;
  font-size: 2.5rem; /* 40px */
  line-height: 3rem; /* 48px */
  color: #FFFFFF;
  margin: 0 0 1rem;
  letter-spacing: -0.03rem;
  text-align: center;
}

.demo-subtitle {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
  font-size: 1.125rem; /* 18px */
  line-height: 1.6875rem; /* 27px / 150% */
  color: #FFFFFF;
  opacity: 0.9;
  max-width: 42rem;
  margin: 0 auto;
  text-align: center;
}

.demo-form {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.demo-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6875rem 1.5625rem; /* 27px vertical, 25px horizontal */
  margin-bottom: 1.6875rem;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.demo-field {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.demo-field--full {
  grid-column: 1 / -1;
}

.demo-input {
  width: 100%;
  height: 3.845rem; /* 61.52px */
  background: #FFFFFF;
  border-radius: 2.4rem; /* 38.45px */
  border: none;
  padding: 0 1.538rem; /* 24.6px */
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
  font-size: 1rem; /* 16px */
  line-height: 1.3125rem; /* 21px */
  color: #111111;
  box-sizing: border-box;
  outline: none;
  transition: box-shadow 0.2s ease;
}

.demo-input::placeholder {
  color: #585F6C;
  opacity: 1;
}

.demo-input:focus {
  box-shadow: 0 0 0 2px #E63232;
}

.demo-field--dropdown {
  position: relative;
  width: 100%;
}

.demo-dropdown-trigger {
  width: 100%;
  height: 3.845rem; /* 61.52px */
  background: #FFFFFF;
  border-radius: 2.4rem; /* 38.45px */
  border: none;
  padding: 0 3.2rem 0 1.538rem; /* 24.6px */
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
  font-size: 1rem; /* 16px */
  line-height: 1.3125rem; /* 21px */
  color: #111111;
  box-sizing: border-box;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  user-select: none;
}

.demo-dropdown-trigger:focus-visible {
  box-shadow: 0 0 0 2px #E63232;
}

.demo-dropdown-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #111111;
}

.demo-dropdown-text.is-placeholder {
  color: #585F6C;
}

.demo-select-chevron {
  position: absolute;
  right: 1.538rem;
  top: 50%;
  width: 0.5625rem; /* 9px */
  height: 0.5625rem;
  border-right: 0.14rem solid #A3A3A3; /* 2.24px */
  border-bottom: 0.14rem solid #A3A3A3;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
}

.demo-field--dropdown.is-open .demo-select-chevron {
  transform: translateY(-30%) rotate(-135deg);
  border-color: #E63232;
}

.demo-field--dropdown.is-open {
  z-index: 100;
}

.demo-field--dropdown.is-open .demo-dropdown-trigger {
  box-shadow: 0 0 0 2px rgba(230, 50, 50, 0.4), 0 8px 24px rgba(0, 0, 0, 0.18);
}

.demo-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 1.25rem; /* 20px */
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.12);
  padding: 0.5rem 0.4rem;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top center;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.2s ease;
  pointer-events: none;
  max-height: 17rem;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Custom minimal scrollbar */
.demo-dropdown-menu::-webkit-scrollbar {
  width: 5px;
}
.demo-dropdown-menu::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.demo-field--dropdown.is-open .demo-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.demo-dropdown-option {
  position: relative;
  padding: 0.75rem 1.25rem;
  border-radius: 0.85rem;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 500;
  font-size: 0.9375rem; /* 15px */
  line-height: 1.25rem;
  color: #1F2937;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  outline: none;
}

.demo-dropdown-option:hover,
.demo-dropdown-option:focus-visible,
.demo-dropdown-option.is-highlighted {
  background-color: #F8F8FA;
  color: #111111;
}

.demo-dropdown-option.is-selected {
  background-color: #FFF2F2;
  color: #E63232;
  font-weight: 600;
}

.demo-dropdown-option.is-selected::after {
  content: '';
  display: inline-block;
  width: 0.35rem;
  height: 0.65rem;
  border: solid #E63232;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-left: 0.5rem;
  flex-shrink: 0;
}

.demo-footer-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.625rem;
}

.demo-consent {
  display: flex;
  align-items: center;
  gap: 0.6875rem; /* 11px */
  cursor: pointer;
  user-select: none;
}

.demo-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.demo-checkbox-box {
  width: 0.8125rem; /* 13px */
  height: 0.8125rem;
  border: 1px solid #585F6C;
  border-radius: 2px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  flex-shrink: 0;
}

.demo-checkbox:checked + .demo-checkbox-box {
  background-color: #E63232;
  border-color: #E63232;
}

.demo-checkbox:checked + .demo-checkbox-box::after {
  content: '';
  width: 0.25rem;
  height: 0.45rem;
  border: solid #FFFFFF;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) translate(-0.5px, -0.5px);
}

.demo-checkbox-text {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
  font-size: 0.75rem; /* 12px */
  line-height: 1rem; /* 16px */
  color: #FFFFFF;
}

.demo-submit-wrap {
  display: flex;
  justify-content: flex-end;
}

.demo-submit-btn {
  width: 11.75rem; /* 188px */
  height: 3.0625rem; /* 49px */
  background: #E63232;
  border-radius: 2.5625rem; /* 41px */
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.demo-submit-btn:hover {
  background: #D32828;
  transform: translateY(-1px);
  box-shadow: 0 0.25rem 0.75rem rgba(230, 50, 50, 0.35);
}

.demo-submit-btn:active {
  transform: translateY(0);
}

.demo-submit-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.demo-submit-btn span {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 700;
  font-size: 0.82rem; /* 13.12px */
  line-height: 1.0625rem; /* 17px */
  color: #FFFFFF;
  white-space: nowrap;
}

.demo-status {
  width: 100%;
  margin-top: 1rem;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.875rem;
  text-align: center;
  min-height: 1.25rem;
}

.demo-status.is-success {
  color: #28C840;
}

.demo-status.is-error {
  color: #FF5F57;
}

/* ==========================================================================
   Footer Section (Section 1440×269, #F2F2F2)
   ========================================================================== */
.site-footer {
  width: 100%;
  background-color: #F2F2F2;
  padding: 3.5rem 0 3.75rem;
  box-sizing: border-box;
}

.footer-container {
  width: 100%;
  max-width: 77.5rem; /* 1240px */
  margin: 0 auto;
  padding: 0 1.25rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 3rem;
}

.footer-brand {
  width: 17.5rem; /* 280px */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem; /* 9px */
  text-decoration: none;
  outline: none;
}

.footer-logo-icon {
  width: 1.625rem; /* 26px */
  height: 1.625rem;
  display: block;
  flex-shrink: 0;
}

.footer-logo-text {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  font-size: 1.875rem; /* 30px */
  line-height: 2.4375rem; /* 39px */
  letter-spacing: -0.07em;
  color: #000000;
}

.footer-tagline {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 500;
  font-size: 0.8125rem; /* 13px */
  line-height: 1.125rem; /* 18px / 138% */
  color: #6B7280;
  margin: 1rem 0 0;
}

.footer-links-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 3rem; /* 48px */
}

.footer-col {
  width: 7.5rem; /* 120px */
  display: flex;
  flex-direction: column;
}

.footer-col-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 700;
  font-size: 0.875rem; /* 14px */
  line-height: 1.0625rem; /* 17px */
  color: #1E293B;
  margin: 0 0 0.875rem; /* 14px */
}

.footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem; /* 10px */
}

.footer-list li a {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 500;
  font-size: 0.8125rem; /* 13px */
  line-height: 1rem; /* 16px */
  color: #6B7280;
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline-block;
}

.footer-list li a:hover {
  color: #E80000;
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 1.5rem; /* 24px */
  margin-left: 0.5rem;
}

.footer-social-link {
  width: 2.8125rem; /* 45px */
  height: 2.8125rem;
  border-radius: 50%;
  border: 0.125rem solid rgba(206, 0, 0, 0.15); /* #CE0000 10-15% */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(206, 0, 0, 0.03);
  text-decoration: none;
  transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.2s ease;
}

.footer-social-link:hover {
  border-color: #CE0000;
  background: rgba(206, 0, 0, 0.08);
  transform: translateY(-2px);
}

.footer-social-link:focus-visible {
  outline: 2px solid #E80000;
  outline-offset: 2px;
}

/* ==========================================================================
   Mobile Responsiveness (<= 768px) for FAQ, Demo, and Footer
   ========================================================================== */
@media (max-width: 768px) {
  /* FAQ */
  .faq-section {
    padding: 3rem 0 3.5rem;
  }

  .faq-header {
    margin-bottom: 2rem;
  }

  .faq-title {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .faq-trigger {
    min-height: 4rem;
    padding: 1.25rem 0.5rem;
    gap: 1.25rem;
  }

  .faq-question {
    font-size: 1.125rem;
    line-height: 1.5rem;
  }

  .faq-answer {
    font-size: 0.9375rem;
    line-height: 1.45rem;
    padding: 0 0.5rem 1.25rem;
  }

  /* Demo */
  .demo-section {
    padding: 3.5rem 0 4rem;
  }

  .demo-title {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .demo-subtitle {
    font-size: 0.9375rem;
    line-height: 1.45rem;
    margin-bottom: 2rem;
  }

  .demo-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
  }

  .demo-input {
    height: 3.5rem;
    border-radius: 2rem;
    font-size: 0.9375rem;
    padding: 0 1.25rem;
  }

  .demo-footer-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .demo-submit-wrap {
    width: 100%;
  }

  .demo-submit-btn {
    width: 100%;
    height: 3.25rem;
  }

  /* Footer */
  .site-footer {
    padding: 3rem 0 2.5rem;
  }

  .footer-container {
    flex-direction: column;
    gap: 2.5rem;
  }

  .footer-brand {
    width: 100%;
  }

  .footer-links-wrapper {
    width: 100%;
    flex-wrap: wrap;
    gap: 2rem 2.5rem;
  }

  .footer-col {
    width: calc(50% - 1.25rem);
    min-width: 8rem;
  }

  .footer-social {
    width: 100%;
    margin-left: 0;
    margin-top: 0.5rem;
  }
}

@media (max-width: 480px) {
  .faq-title {
    font-size: 1.625rem;
    line-height: 2rem;
  }

  .faq-question {
    font-size: 1rem;
    line-height: 1.375rem;
  }

  .demo-title {
    font-size: 1.625rem;
    line-height: 2rem;
  }

  .footer-col {
    width: 100%;
  }
}