/* Logistiqo Typography V2
   One shared typography language for redesigned pages.
   Component CSS owns layout; this file owns heading/text roles. */

/* ---------- Core roles ---------- */

.lq-type-kicker,
.lq-usp-v2__eyebrow,
.lq-home-seo-v2__eyebrow,
#slide3 .lq-video-showcase__header h2,
.lq-app-showcase-v2__header h2 {
  margin: 0 0 var(--lq-eyebrow-title-gap);
  color: var(--lq-kicker-color, var(--lq-orange));
  font-family: var(--lq-font-heading);
  font-size: var(--lq-kicker-size);
  font-weight: var(--lq-kicker-weight);
  line-height: 1.3;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.lq-type-section-title,
.lq-usp-v2__headline,
.lq-home-seo-v2__header h2,
#slide3 .lq-video-showcase__header h3,
.lq-app-showcase-v2__header h3 {
  width: 100%;
  max-width: var(--lq-title-max, var(--lq-heading-width));
  margin: 0 auto var(--lq-title-intro-gap);
  padding: 0;
  color: var(--lq-title-color, var(--lq-ink));
  font-family: var(--lq-font-heading);
  font-size: var(--lq-title-size, var(--lq-section-title-size));
  font-weight: var(--lq-section-title-weight);
  line-height: var(--lq-section-title-line);
  letter-spacing: -.028em;
  text-align: center;
  text-transform: none;
}

.lq-type-kicker--center {
  width: 100%;
  text-align: center;
}

.lq-type-section-title--left {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

.lq-type-section-title--compact {
  --lq-title-size: var(--lq-section-title-size-compact);
}

.lq-type-intro,
.lq-home-seo-v2__header p {
  width: 100%;
  max-width: var(--lq-intro-max, var(--lq-intro-width));
  margin: 0 auto;
  color: var(--lq-intro-color, var(--lq-muted));
  font-family: var(--lq-font-body);
  font-size: var(--lq-intro-size-local, var(--lq-intro-size));
  font-weight: 400;
  line-height: var(--lq-intro-line);
  text-align: center;
}

.lq-type-intro--left {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

.lq-type-subsection-title,
.lq-home-seo-v2__copy-section h3 {
  margin: 0 0 8px;
  color: var(--lq-subtitle-color, var(--lq-ink));
  font-family: var(--lq-font-heading);
  font-size: var(--lq-subtitle-size, var(--lq-subsection-title-size));
  font-weight: var(--lq-subsection-title-weight);
  line-height: var(--lq-subsection-title-line);
  letter-spacing: -.02em;
  text-align: left;
  text-transform: none;
}

.lq-type-subsection-title--lead {
  --lq-subtitle-size: 20px;
  margin-top: 12px;
}

.lq-type-card-title,
.lq-usp-v2__item h4 {
  margin: 0 0 16px;
  color: var(--lq-ink-strong);
  font-family: var(--lq-font-heading);
  font-size: var(--lq-card-title-size);
  font-weight: var(--lq-card-title-weight);
  line-height: 1.3;
  letter-spacing: -.015em;
  text-align: left;
}

/* ---------- Page hero ---------- */

.headerText:has(.lq-type-page-title) {
  width: min(550px, 90%);
  margin-top: 146px;
}

.lq-type-page-title {
  width: 100%;
  margin: 0;
  color: var(--lq-ink);
  font-family: var(--lq-font-heading);
  font-size: var(--lq-page-title-size-local, var(--lq-page-title-size));
  font-weight: var(--lq-page-title-weight-local, var(--lq-page-title-weight));
  line-height: var(--lq-page-title-line-local, var(--lq-page-title-line));
  letter-spacing: -.035em;
  text-align: center;
  text-transform: none;
}

.lq-type-page-title--left {
  text-align: left;
}

.lq-type-page-title--hero {
  --lq-page-title-size-local: 57px;
  --lq-page-title-weight-local: 800;
  --lq-page-title-line-local: 1.16;
}

.lq-type-page-title .highlight {
  padding-left: .06em;
  padding-right: .06em;
  background-position: 0 90%;
  background-size: 100% 30%;
}

/* Homepage still has legacy #slide1 h1 rules in style.css.
   This compatibility selector lets the shared H1 system own its typography. */
#slide1 h1.lq-type-page-title {
  display: block;
  width: 100%;
  margin: 0;
  color: var(--lq-ink);
  font-family: var(--lq-font-heading);
  font-size: var(--lq-page-title-size-local, var(--lq-page-title-size));
  font-weight: var(--lq-page-title-weight-local, var(--lq-page-title-weight));
  line-height: var(--lq-page-title-line-local, var(--lq-page-title-line));
  letter-spacing: -.035em;
  text-align: left;
  text-transform: none;
}

.lq-type-page-subtitle {
  width: 100%;
  max-width: 720px;
  margin: 18px auto 0;
  padding: 0;
  color: #475569;
  font-family: var(--lq-font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  text-align: center;
}

/* ---------- Light / dark context ---------- */

.darkbackground,
.lq-product-feature-v2,
#slide3.lq-video-showcase {
  --lq-title-color: var(--lq-on-dark);
  --lq-intro-color: var(--lq-on-dark-muted);
  --lq-subtitle-color: var(--lq-on-dark);
  --lq-kicker-color: var(--lq-kicker-on-dark);
}

.lq-type-on-dark {
  --lq-title-color: var(--lq-on-dark);
  --lq-intro-color: var(--lq-on-dark-muted);
  --lq-subtitle-color: var(--lq-on-dark);
}

/* ---------- Shared component variants ---------- */

/* Showcase copy: local H3 plus the recurring orange accent pill. */
.lq-showcase-v2__copy {
  --lq-subtitle-size: 21px;
}

.lq-showcase-v2__copy .lq-type-subsection-title {
  margin-bottom: 12px;
}

.lq-showcase-v2__copy .lq-type-subsection-title::after,
.lq-showcase-v2__copy h4::after {
  content: "";
  display: block;
  width: var(--lq-accent-width);
  height: var(--lq-accent-height);
  margin-top: 11px;
  border-radius: var(--lq-radius-control);
  background: var(--lq-orange);
}

/* Fallback for older V2 showcase panels not yet carrying the role class. */
.lq-showcase-v2__copy h4:not(.lq-type-subsection-title) {
  margin: 0 0 12px;
  color: var(--lq-ink);
  font-family: var(--lq-font-heading);
  font-size: var(--lq-subsection-title-size);
  font-weight: var(--lq-subsection-title-weight);
  line-height: 1.25;
  letter-spacing: -.025em;
  text-align: left;
  text-transform: none;
}

/* SEO copy sections use their own accent element; only typography is shared here. */
.lq-feature-seo-v2__copy-section .lq-type-subsection-title,
.lq-program-seo-v2__copy-section .lq-type-subsection-title {
  --lq-subtitle-size: 19px;
}

/* USP / benefit cards use one shared title language. */
.lq-usp-v2__item h4 span {
  margin: 0;
  padding: 0;
  background: none;
  -webkit-box-decoration-break: initial;
  box-decoration-break: initial;
}

.lq-usp-v2__item h4::after {
  content: "";
  display: block;
  width: var(--lq-accent-width);
  height: var(--lq-accent-height);
  margin-top: 10px;
  border-radius: var(--lq-radius-control);
  background: var(--lq-orange);
}

/* Closing CTA: same role, intentionally tighter scale/measure. */
.lq-usp-v2__closing {
  --lq-title-max: 440px;
  --lq-title-size: var(--lq-section-title-size-compact);
  --lq-intro-max: 470px;
  --lq-intro-size-local: 15.5px;
}

/* FAQ intro: left-aligned layout, same type roles. */
.lq-program-faq-v2__intro {
  --lq-title-max: 520px;
  --lq-intro-max: 560px;
  --lq-intro-size-local: 16px;
}

/* Program tech cards are intentionally one step smaller than editorial H3s. */
.lq-program-tech-v2__card {
  --lq-subtitle-size: 17px;
}

/* ---------- Small type alignment helpers ---------- */

.lq-product-feature-v2__row-copy strong,
.lq-more-functions-v2__card h3 {
  font-family: var(--lq-font-heading);
}

/* ---------- Responsive ---------- */

@media (max-width: 820px) {
  .lq-type-page-title--hero {
    --lq-page-title-size-local: clamp(44px, 7vw, 50px);
  }

  .headerText:has(.lq-type-page-title) {
    width: calc(100% - 32px);
    margin-top: 110px;
  }

  .lq-type-section-title--compact {
    --lq-title-size: 28px;
  }
}

@media (max-width: 560px) {
  .lq-type-page-title--hero {
    --lq-page-title-size-local: 40px;
    --lq-page-title-line-local: 1.04;
  }

  .headerText:has(.lq-type-page-title) {
    margin-top: 0;
  }

  .lq-type-page-subtitle {
    max-width: 92%;
    margin-top: 14px;
    font-size: 15.5px;
  }

  .lq-type-subsection-title--lead {
    --lq-subtitle-size: 18px;
  }

  .lq-showcase-v2__copy {
    --lq-subtitle-size: 21px;
  }
}