/* -------------------------------------------------
   Global polish
--------------------------------------------------*/
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.navbar-link { font-weight: 500; }

/* Icons */
.icon-wrapper { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 20px; }
.icon-height-xs { width: 16px; height: 16px; display: block; }

/* -------------------------------------------------
   Forms / Contact
--------------------------------------------------*/
:root { --placeholder-color: #9AA3AF; }

.contact-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; }
@media (max-width: 767px) { .contact-form-grid { grid-template-columns: 1fr; } }

.form-input.contact::placeholder,
.form-input.is-text-area::placeholder { color: var(--placeholder-color); opacity: 1; }

select.form-input.contact:required:invalid { color: var(--placeholder-color); }
select.form-input.contact option { color: #0f172a; }
select.form-input.contact option[disabled][value=""] { color: var(--placeholder-color); }

.form-input.contact.w-select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 44px;
  background-image: url('../images/chevron.svg');
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px 18px;
}

.checkbox-inline { display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; }

.hero---contact .content-wrapper.align-center-x { text-align: center; }

.contact-card { max-width: 960px; margin: 0 auto; }
.form-block.align-center { max-width: 960px; margin: 0 auto; }

.b2-body-regular.align-center.inverse-color.contact-intro-wide { max-width: 1100px; margin: 0 auto; }

.alpha-form-inline { display: grid; grid-template-columns: minmax(480px, 1fr) auto; gap: 12px; width: 100%; }
.alpha-form-inline .form-input.submit { width: 100%; }
@media (max-width: 767px) {
  .alpha-form-inline { grid-template-columns: 1fr; }
}

/* -------------------------------------------------
   Team grid and cards
--------------------------------------------------*/
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 64px; }
@media (max-width: 991px) { .team-grid { gap: 40px; } }
@media (max-width: 767px) { .team-grid { grid-template-columns: 1fr; gap: 28px; } }

.team-card { display: grid; grid-template-columns: 112px 1fr; align-items: start; column-gap: 20px; row-gap: 6px; }
.team-card .image-wrapper { width: 112px; height: 112px; border-radius: 16px; overflow: hidden; grid-row: 1 / span 3; }
.team-card .image-wrapper .image { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-card .h5-heading-medium { margin: 0; }
.team-card .title { margin: 0; }
.team-card .bio { margin: 6px 0 0; line-height: 1.6; }
@media (max-width: 767px) { .team-card { grid-template-columns: auto 1fr; } }

/* Badges */
.role-badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 2px 8px; border-radius: 25px; font-size: 12px; font-weight: 600;
  letter-spacing: 0.25px; cursor: pointer; transition: all .3s cubic-bezier(.25,.8,.25,1);
  user-select: none;
}
.badge-icon { width: 1.25rem; height: 1.25rem; opacity: .9; }
.badge-icon-recommended { width: .9rem; height: .9rem; opacity: .9; }

.admin-badge { background:#e0f2fe; color:#3182CE; border:1px solid #3182CE; }
.admin-badge:hover { background:#e0f2fe; transform: translateY(-2px); box-shadow:0 5px 15px rgba(0,0,0,.05); }

.recommended-badge { background:#fffbeb; color:#fb923c; border:1px solid #fb923c; }
.recommended-badge:hover { background:#fffbeb; transform: translateY(-2px); box-shadow:0 5px 15px rgba(0,0,0,.05); }

.recommended { background-image: linear-gradient(#ebf0ff, #f7f9ff); justify-content: space-between; width:auto; }

/* Ensure plan title rows are full-width flex to right-align badges */
/* Title row: enforce single-line layout with badges aligned to the right */
.pricing-card-comp .content-wrapper-6 .h-flex { 
  display: grid !important; 
  grid-template-columns: 1fr auto auto; 
  align-items: center; 
  column-gap: 8px; 
  width: 100%; 
}
.pricing-card-comp .content-wrapper-6 .h-flex h3.h7-heading-medium { 
  margin: 0 !important; 
  text-align: left !important; 
}
.pricing-card-comp .content-wrapper-6 .h-flex .role-badge { 
  justify-self: end; 
  white-space: nowrap !important; 
  margin: 0 !important; 
}

/* -------------------------------------------------
   Navbar: collapse at iPad Pro width (<=1024px)
   to show hamburger like iPad Air
--------------------------------------------------*/
/* iPad Pro specific: collapse navbar between 992px and 1024px */
@media screen and (min-width: 992px) and (max-width: 1024px) {
  /* Force collapse for iPad Pro width */
  .navbar-component.w-nav .w-nav-menu { display: none !important; }
  .navbar-component .navbar-menu-btn.w-nav-button { display: block !important; }
  /* Hide standalone header CTAs so the hamburger is the only control */
  .navbar-component .cart-menu-wrapper { display: none !important; }
  /* Ensure the hamburger icon renders the same as tablet */
  .navbar-component .navbar-menu-btn.w-nav-button { 
    display: flex !important; 
    align-items: center; 
    padding: 0 !important;
    background: transparent !important;
  }
  .navbar-component .menu-icon {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 3rem;
    height: 3rem;
    margin-right: -.5rem;
  }
  .navbar-component .menu-icon-line-top,
  .navbar-component .menu-icon-line-middle,
  .navbar-component .menu-icon-line-bottom {
    background-color: var(--primary--hard);
    width: 1.5rem;
    height: .125rem;
  }
  .navbar-component .menu-icon-line-middle {
    margin-top: .375rem;
    margin-bottom: .375rem;
  }
}
/* Force all plan titles to be left-aligned across breakpoints */
.pricing-card-comp .content-wrapper-6 h3.h7-heading-medium { 
  text-align: left !important; 
  align-self: flex-start !important; 
  margin-left: 0 !important; 
  margin-right: 0 !important;
}
.pricing-card-comp .content-wrapper-6 .h-flex h3.h7-heading-medium { 
  text-align: left !important; 
}

/* -------------------------------------------------
   Rich text lists: consistent alignment
--------------------------------------------------*/

/* Top-level lists align with paragraphs */
.rich-text-block > ul,
.rich-text-block > ol { margin: 0 0 1rem 0; padding-left: 0; }

/* Unordered lists */
.rich-text-block ul { list-style: disc; padding-left: 1.25rem; }
.rich-text-block li { margin: .375rem 0; }

/* Ordered lists with custom counters */
.rich-text-block ol { list-style: none; counter-reset: step; }
.rich-text-block ol > li {
  counter-increment: step;
  position: relative;
  padding-left: 1.75rem;
}
.rich-text-block ol > li::before {
  content: counter(step);
  position: absolute; left: 0; top: .15rem;
  width: 1.1rem; height: 1.1rem; line-height: 1.1rem;
  text-align: center; border-radius: 999px;
  border: 1px solid rgba(2,6,23,0.12);
  font-weight: 600;
}

/* Nested lists */
.rich-text-block li > ul,
.rich-text-block li > ol { margin: 0.25rem 0 0 1.25rem; }

/* -------------------------------------------------
   Demo section: wider container + larger player
--------------------------------------------------*/

/* Let the #demo section breathe wider than default container caps */
@media (min-width: 1024px) {
  #demo .container-default,
  #demo .w-container,
  #demo .inner-container { max-width: 1280px; }
}

/* Demo video block */
#demo .content-wrapper.align-center-x {
  width: 100%;
}

.demo-video-shell {
  width: 100%;
  max-width: clamp(720px, 80vw, 1280px);  /* scales nicely up to 1280px */
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(2, 6, 23, 0.12);
  background: #000;
  aspect-ratio: 16 / 9;
  position: relative;
}

@supports not (aspect-ratio: 1 / 1) {
  .demo-video-shell { padding-top: 56.25%; } /* 16:9 */
  .demo-video-shell > .demo-video { position: absolute; inset: 0; }
}

.demo-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* switch to 'contain' for letterboxing */
}