/* Feature Page Template — page-feature.php */

/* ---- Article Header ---- */
.fp-header {
  padding: 244px 32px 112px;
  background: #F2F4F7;
}

.fp-header__inner {
  max-width: 1240px;
  margin: 0 auto;
}

.fp-header__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #6B6F8A;
  margin-bottom: 20px;
}

.fp-header__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #726BEA;
  color: #fff;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.fp-header__parent-link {
  color: #726BEA;
  font-weight: 600;
  text-decoration: none;
}

.fp-header__parent-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fp-header__title {
  font-family: 'Rebond', sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: #262966;
  margin: 0 0 24px;
  max-width: 860px;
}

.fp-header__lede {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  line-height: 1.65;
  color: #262966; /* Pacific */
  max-width: 680px;
  margin: 0;
}

/* ---- Two-column layout ---- */
.fp-layout {
  padding: 56px 32px 80px;
}

.fp-layout__inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 264px 1fr;
  gap: 48px;
  align-items: start;
}

/* ---- Sidebar: Key features ---- */
.fp-sidebar {
  position: sticky;
  top: 114px; /* nav ~60px + breadcrumbs ~44px + 10px gap */
}

.fp-sidebar__card {
  background: #fff;
  border: 1px solid #EAEBF0;
  border-radius: 12px;
  padding: 22px 24px;
  box-shadow: 0 2px 8px rgba(38, 41, 102, 0.05);
}

.fp-sidebar__eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #726BEA;
  margin-bottom: 6px;
}

.fp-sidebar__title {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #262966;
  margin: 0 0 14px;
}

.fp-sidebar__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fp-sidebar__list li::before {
  display: none !important;
}

.fp-sidebar__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: #262966;
  line-height: 1.4;
}

.fp-sidebar__check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: #F0F2FF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0px;
  color: #726BEA;
}

/* ---- Article body ---- */
.fp-article {
  min-width: 0;
}

.fp-article h2 {
  font-weight: 700 !important;
  font-size: 32px;
  line-height: 1.25;          /* ~40px instead of 48px — much tighter */
  margin: 32px 0 12px;        /* consistent space above, small gap to the text below */
}

.fp-article p {
  font-size: 18px;
  line-height: 1.55;          /* ~28px instead of 34px — tighter but still readable */
  margin: 0 0 16px;           /* single, consistent bottom-margin rhythm */
}

/* kill the leading gap so the block starts flush */
.fp-article > *:first-child {
  margin-top: 0;
}

/* a heading right after a paragraph shouldn't double up on space */
.fp-article p + h2 {
  margin-top: 24px;
}

/* ---- KB Callout ---- */
.fp-kb-callout {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #F5F5FA;
  border: 1px solid #EAEBF0;
  border-radius: 12px;
  padding: 22px 24px;
  margin: 40px 0 0;
  font-family: 'Inter', sans-serif;
}

.fp-kb-callout__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: #fff;
  border: 1px solid #EAEBF0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6B6F8A;
}

.fp-kb-callout__body {
  flex: 1;
  min-width: 0;
}

.fp-kb-callout__eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6B6F8A;
  margin-bottom: 2px;
}

.fp-kb-callout h3 {
  font-family: 'Rebond', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #262966;
  margin: 0 0 2px;
}

.fp-kb-callout p {
  font-size: 13px;
  color: #6B6F8A;
  margin: 0;
  line-height: 1.5;
}

.fp-kb-callout__link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: #726BEA;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}

.fp-kb-callout__link:hover {
  color: #5D55D6;
}

/* ---- Article tail ---- */
.fp-article__tail {
  padding-top: 28px;
  margin-top: 40px;
  border-top: 1px solid #EAEBF0;
  font-family: 'Inter', sans-serif;
}

.fp-article__back {
  font-size: 14px;
  color: #6B6F8A;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}

.fp-article__back:hover {
  color: #726BEA;
}

.fp-article__back strong {
  color: #262966;
  font-weight: 600;
}

/* ---- CTA Band ---- */
.fp-ctaband {
  background: #262966;
  padding: 80px 32px;
  text-align: center;
}

.fp-ctaband__inner {
  max-width: 640px;
  margin: 0 auto;
}

.fp-ctaband__eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #A5B4FC;
  margin-bottom: 16px;
}

.fp-ctaband__title {
  font-family: 'Rebond', sans-serif;
  font-size: clamp(26px, 3.5vw, 42px);
  font-weight: 700 !important;
  color: #fff;
  margin: 0 0 16px;
  line-height: 1.08;
}

.fp-ctaband__body {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: #A5B4FC;
  margin: 0 0 32px;
}

.fp-ctaband__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.fp-ctaband__secondary {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #A5B4FC;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.15s;
}

.fp-ctaband__secondary:hover {
  color: #fff;
}

/* ---- Responsive ---- */
@media (max-width: 1023px) {
  .fp-layout__inner {
    grid-template-columns: 220px 1fr;
    gap: 32px;
  }
}

@media (max-width: 767px) {
  .fp-header {
    padding: 36px 20px 32px;
  }

  .fp-layout {
    padding: 24px 20px 56px;
  }

  .fp-layout__inner {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .fp-sidebar {
    position: static;
    margin-bottom: 36px;
  }

  .fp-kb-callout {
    flex-wrap: wrap;
  }

  .fp-kb-callout__link {
    width: 100%;
  }

  .fp-ctaband {
    padding: 56px 20px;
  }
}