/* =========================================================
   APPLICATION PAGE STYLES
   ========================================================= */

.app-hero {
  background: var(--clr-charcoal);
  padding-top: calc(var(--nav-h) + var(--sp-16));
  padding-bottom: var(--sp-20);
  position: relative;
  overflow: hidden;
  min-height: 480px;
  display: flex;
  align-items: center;
}

.app-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.app-hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .2;
}

.app-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(13,27,42,.95) 40%, rgba(13,27,42,.5) 100%);
}

.app-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,196,140,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,196,140,.03) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: 0;
}

.app-hero__content {
  position: relative;
  z-index: 1;
  max-width: 680px;
}

.app-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: rgba(255,255,255,.4);
}

.app-hero__breadcrumb a { color: rgba(255,255,255,.4); transition: color var(--t-fast); }
.app-hero__breadcrumb a:hover { color: var(--clr-teal); }
.app-hero__breadcrumb svg { width: 12px; height: 12px; stroke: currentColor; fill: none; }

.app-hero h1 { color: var(--clr-white); margin-bottom: var(--sp-4); }
.app-hero h1 em { font-style: normal; color: var(--clr-teal); }

.app-hero__intro {
  font-size: 1.0625rem;
  color: rgba(255,255,255,.68);
  line-height: 1.75;
  margin-bottom: var(--sp-8);
  max-width: 58ch;
}

.app-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* Applications hub hero */
.page-hero {
  padding-top: calc(var(--nav-h) + var(--sp-12));
  padding-bottom: var(--sp-12);
  position: relative;
  overflow: hidden;
}

.page-hero__content {
  max-width: 760px;
}

.app-hub-card {
  scroll-margin-top: calc(var(--nav-h) + var(--sp-6));
}

/* Pain point + solution */
.app-problem { background: var(--clr-stone); }

.app-problem__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  align-items: start;
}

.problem-box {
  background: #fff5f5;
  border: 1px solid #fed7d7;
  border-radius: var(--r-md);
  padding: var(--sp-7);
}

.problem-box__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #c53030;
  margin-bottom: var(--sp-3);
}

.problem-box h3 { font-size: 1rem; color: #1a202c; margin-bottom: var(--sp-3); }
.problem-box p { font-size: var(--fs-sm); color: #4a5568; line-height: 1.7; max-width: 100%; }

.solution-box {
  background: rgba(0,196,140,.05);
  border: 1px solid rgba(0,196,140,.2);
  border-radius: var(--r-md);
  padding: var(--sp-7);
}

.solution-box__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--clr-teal-dark);
  margin-bottom: var(--sp-3);
}

.solution-box h3 { font-size: 1rem; color: var(--clr-charcoal); margin-bottom: var(--sp-3); }
.solution-box p { font-size: var(--fs-sm); color: var(--clr-grey-dark); line-height: 1.7; max-width: 100%; }

/* Benefits */
.app-benefits { background: var(--clr-white); }

.benefits-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.benefit-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--clr-stone);
  border-radius: var(--r-md);
  border: 1px solid var(--clr-border);
}

.benefit-row__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: rgba(0,196,140,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.benefit-row__icon svg { width: 18px; height: 18px; stroke: var(--clr-teal); fill: none; }
.benefit-row__title { font-family: var(--font-head); font-size: .875rem; font-weight: 700; color: var(--clr-charcoal); margin-bottom: 3px; }
.benefit-row__desc { font-size: var(--fs-xs); color: var(--clr-grey-mid); line-height: 1.5; }

/* Recommended product */
.app-product { background: var(--clr-charcoal); }

.app-product__layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}

.app-product__card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(0,196,140,.2);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
}

.app-product__card-name {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--clr-white);
  margin-bottom: var(--sp-2);
}

.app-product__card-tagline {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.55);
  margin-bottom: var(--sp-6);
}

.app-product__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.app-product__spec {
  background: rgba(255,255,255,.05);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
}

.app-product__spec-val { font-family: var(--font-head); font-size: .9rem; font-weight: 700; color: var(--clr-teal); }
.app-product__spec-label { font-size: var(--fs-xs); color: rgba(255,255,255,.4); margin-top: 2px; }

/* App page CTA */
.app-cta { background: var(--clr-stone); }

.app-cta__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  align-items: center;
}

.app-cta__text h2 { margin-bottom: var(--sp-4); }
.app-cta__text p { color: var(--clr-grey-dark); line-height: 1.75; margin-bottom: var(--sp-6); }

/* Navigation between apps */
.app-nav-strip {
  background: var(--clr-white);
  border-top: 1px solid var(--clr-border);
  padding-block: var(--sp-8);
}

.app-nav-strip__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.app-nav-link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--clr-grey-dark);
  transition: color var(--t-fast);
}

.app-nav-link:hover { color: var(--clr-teal); }
.app-nav-link svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }

@media (max-width: 1024px) {
  .app-product__layout { grid-template-columns: 1fr; }
  .app-cta__layout { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .app-problem__layout { grid-template-columns: 1fr; }
  .benefits-list { grid-template-columns: 1fr; }
  .app-product__specs { grid-template-columns: 1fr 1fr; }
}