/* ======================================================================
   DECISIONDESK AI — PRODUCT LANDING PAGE
   Real name, description, capabilities and target audience confirmed
   from the client's own pitch deck (DataIntellec - 2026.pdf, 2026-08-27)
   — this replaced the earlier "Decision Lens" placeholder page (bracket
   copy, dev-status banner). Onboarding steps and FAQ answers are still
   the generic, honest framing used before (no fabricated specifics),
   since the deck doesn't cover rollout mechanics or support policy.
   Class names keep the historical .dl-* prefix internally.

   Page-specific components only. Shared tokens, header, footer, buttons
   and section primitives (.hiw-*, .fcta-*, .marquee, .hero-cta) live in
   index.css and are reused as-is for cross-site consistency.
   ====================================================================== */

.dl-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-1);
}

.dl-eyebrow-rule {
  width: 32px;
  height: 1px;
  background: var(--accent-1);
}

/* --- Hero visual: an abstract "scattered signals converge into one
   decision" graphic — no real product shot exists yet, so this is a
   deliberate brand composition rather than an empty dashed wireframe
   box or a fake dashboard mockup. --- */
.dl-hero-media {
  width: 100%;
  max-width: 480px;
  margin-left: auto;
}

.dl-hero-visual {
  padding: 40px 36px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
}

.dl-hero-visual__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.dl-hero-visual__signals {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 22px;
}

.dl-hero-visual__signals span {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: #fff;
}

.dl-hero-visual__arrow {
  display: flex;
  justify-content: center;
  margin: 22px 0;
  color: var(--accent-1);
}

.dl-hero-visual__arrow svg {
  width: 20px;
  height: 20px;
}

.dl-hero-visual__result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(204, 191, 147, 0.12);
  border: 1px solid rgba(204, 191, 147, 0.3);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

.dl-hero-visual__dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 999px;
  background: var(--accent-1);
}

.dl-hero-visual__label {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  max-width: 34ch;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 1023px) {
  .dl-hero-media {
    max-width: min(100%, 460px);
    margin-right: auto;
  }
}

/* --- Trust strip --- */
.dl-trust {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 56px 0 128px;
  background: var(--accent-2);
}

/* Soft fade at the top so the hard seam between the hero's photo+scrim
   and this flat navy section blends instead of showing a hard line. */
.dl-trust::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  height: 160px;
  background: linear-gradient(to bottom, rgba(6, 19, 31, 0.5), rgba(6, 19, 31, 0));
  pointer-events: none;
}

.dl-trust-arc {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  height: 100px;
  pointer-events: none;
}

.dl-trust-arc svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 767px) {
  .dl-trust-arc {
    height: 56px;
  }
}

.dl-trust .site_shell {
  position: relative;
  z-index: 1;
}

.dl-trust-label {
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.dl-trust .marquee {
  margin-top: 24px;
}

.dl-section-head {
  max-width: 62ch;
}

.dl-section-title {
  max-width: 22ch;
  margin: 18px 0 0;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--accent-2);
}

.dl-section-lede {
  max-width: 56ch;
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(15, 45, 73, 0.68);
}

/* --- Features grid --- */
.dl-features {
  padding: 100px 0 108px;
  background: #ffffff;
}

/* Two-column head — eyebrow/title on the left, a supporting line
   anchored to the baseline on the right — same "fresh layout" grammar
   used on Insight 360X's Key Features, instead of the single stacked
   block every other section on this page uses. */
.dl-features-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e5ebf1;
}

.dl-features-head__main {
  max-width: 620px;
}

.dl-features-title {
  margin: 16px 0 0;
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--accent-2);
}

.dl-features-head__lede {
  max-width: 30ch;
  padding-bottom: 4px;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(15, 45, 73, 0.55);
}

@media (min-width: 1024px) {
  .dl-features-head__lede {
    text-align: right;
  }
}

@media (max-width: 1023px) {
  .dl-features-head {
    align-items: flex-start;
  }

  .dl-features-head__lede {
    text-align: left;
  }
}

/* --- Photo focus-cards: same grammar as About's focus-grid / Insight
   360X's, reused here for both Key Capabilities and Who It's For, since
   DecisionDesk AI has no product screenshots to build a bento grid
   around but does have real site photography to lean on. --- */
.dl-focus-grid {
  display: grid;
  gap: 16px;
}

@media (min-width: 640px) {
  .dl-focus-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .dl-focus-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dl-focus-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Four equal columns now, so the wide card no longer spans — kept as
     a no-op selector rather than removed, in case a future card set
     goes back to three items. */
  .dl-focus-grid .dl-focus-card--wide {
    grid-column: auto;
  }
}

.dl-focus-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 320px;
  padding: 28px;
  overflow: hidden;
  border-radius: 20px;
  background-color: var(--accent-2);
  background-image: var(--card-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.dl-focus-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6, 19, 31, 0.1) 0%,
    rgba(6, 19, 31, 0.1) 30%,
    rgba(6, 19, 31, 0.72) 62%,
    rgba(6, 19, 31, 0.96) 100%
  );
}

.dl-focus-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(6, 19, 31, 0);
  transition: background-color 360ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.dl-focus-card:hover::after {
  background: rgba(6, 19, 31, 0.16);
}

.dl-focus-tag {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.dl-focus-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: auto;
}

.dl-focus-card__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  transition: color 300ms ease;
}

.dl-focus-card:hover .dl-focus-card__title {
  color: var(--accent-1);
}

.dl-focus-card__arrow {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity 260ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dl-focus-card:hover .dl-focus-card__arrow {
  opacity: 1;
  transform: translate(0, 0);
}

.dl-focus-card__text {
  max-width: 34ch;
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

/* ========================= HOW IT WORKS =============================
   A left-to-right pipeline — three cards connected by arrows — instead
   of the shared .hiw-section's vertical sticky-intro-plus-connected-dot
   layout used elsewhere. Cream band between the two white sections
   above/below for rhythm. */

.dl-how {
  padding: 100px 0 108px;
  background: var(--page-bg);
}

@media (max-width: 767px) {
  .dl-how {
    padding: 76px 0 84px;
  }
}

.dl-how-head {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.dl-how-head .dl-eyebrow {
  justify-content: center;
}

.dl-how-title {
  margin: 18px auto 0;
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--accent-2);
}

.dl-how-lede {
  margin: 16px auto 0;
  max-width: 50ch;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(15, 45, 73, 0.65);
}

.dl-how-flow {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  margin: 48px 0 0;
}

@media (min-width: 1024px) {
  .dl-how-flow {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
  }
}

.dl-how-step {
  flex: 1;
  padding: 32px 28px;
  border: 1px solid #e5ebf1;
  border-radius: 20px;
  background: #fff;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), border-color 300ms ease;
}

.dl-how-step:hover {
  transform: translateY(-3px);
  border-color: rgba(204, 191, 147, 0.6);
}

.dl-how-step__num {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.6vw, 2.8rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent-1);
}

.dl-how-step__name {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--accent-2);
}

.dl-how-step__text {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(15, 45, 73, 0.6);
}

.dl-how-flow__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: rgba(15, 45, 73, 0.25);
  transform: rotate(90deg);
}

.dl-how-flow__arrow svg {
  width: 22px;
  height: 22px;
}

@media (min-width: 1024px) {
  .dl-how-flow__arrow {
    width: 44px;
    transform: none;
  }
}

.dl-how-cta {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin: 40px auto 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--accent-2);
}

.dl-how-cta svg {
  width: 16px;
  height: 16px;
  transition: transform 300ms ease;
}

.dl-how-cta:hover svg {
  transform: translateX(3px);
}

/* --- Who it's for --- */
.dl-who {
  padding: 100px 0 108px;
  background: #ffffff;
}


/* --- FAQ --- */
.dl-faq {
  padding: 100px 0 108px;
  background: var(--page-bg);
}

/* Left sticky intro + right accordion — same split-column grammar used
   on Insight 360X, so the two product pages read as one family. */
.dl-faq-layout {
  display: grid;
  gap: 32px;
}

@media (min-width: 1024px) {
  .dl-faq-layout {
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 80px;
    align-items: start;
  }

  .dl-faq-intro {
    position: sticky;
    top: 120px;
  }
}

.dl-faq-intro .dl-section-title {
  max-width: 14ch;
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
}

.dl-faq-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-2);
}

.dl-faq-cta svg {
  width: 15px;
  height: 15px;
  transition: transform 300ms ease;
}

.dl-faq-cta:hover svg {
  transform: translateX(3px);
}

.dl-faq-list {
  margin: 40px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 1024px) {
  .dl-faq-list {
    margin: 0;
  }
}

.dl-faq-item {
  border: 1px solid var(--border-soft, #e5ebf1);
  border-radius: 18px;
  background: #ffffff;
  overflow: hidden;
  transition: border-color 250ms ease;
}

.dl-faq-item[open] {
  border-color: rgba(204, 191, 147, 0.5);
}

.dl-faq-item summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
}

.dl-faq-item summary::-webkit-details-marker {
  display: none;
}

.dl-faq-item__figure {
  flex: none;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--accent-1);
}

.dl-faq-item__question {
  flex: 1;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-2);
}

.dl-faq-item__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--accent-2);
  color: var(--accent-1);
}

.dl-faq-item__icon svg {
  width: 16px;
  height: 16px;
  transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dl-faq-item[open] .dl-faq-item__icon svg {
  transform: rotate(45deg);
}

.dl-faq-item summary:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: -2px;
}

.dl-faq-answer {
  margin: 0;
  padding: 0 24px 22px 58px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(15, 45, 73, 0.65);
}


/* ============================ FINAL CTA =============================
   Same "point of the company" pattern as Insight 360X / Products: navy
   gradient, four corner photos, centered content, minimal transparent
   -underline form. */

.dl-point {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 130px 0;
  text-align: center;
  background: linear-gradient(160deg, var(--accent-3) 0%, var(--accent-2) 55%, #0a1e33 100%);
}

.dl-point-arc {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  z-index: 1;
  height: 70px;
  pointer-events: none;
}

.dl-point-arc svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 767px) {
  .dl-point-arc {
    height: 40px;
  }
}

.dl-point__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.dl-point__photo {
  position: absolute;
  overflow: hidden;
  border-radius: 18px;
  background-color: #0f2d49;
  background-image: var(--img);
  background-position: center;
  background-size: cover;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

.dl-point__photo-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(0, 42, 78, 0.5) 0%, rgba(0, 20, 38, 0.25) 100%);
  mix-blend-mode: multiply;
}

.dl-point__photo--tl { top: 14%; left: 6%; width: 210px; height: 270px; }
.dl-point__photo--tr { top: 10%; right: 7%; width: 190px; height: 150px; }
.dl-point__photo--bl { bottom: 12%; left: 8%; width: 220px; height: 140px; }
.dl-point__photo--br { bottom: 16%; right: 5%; width: 200px; height: 250px; }

@media (max-width: 1279px) {
  .dl-point__photo--tl { width: 170px; height: 220px; left: 20px; }
  .dl-point__photo--tr { width: 150px; height: 120px; right: 24px; }
  .dl-point__photo--bl { width: 170px; height: 110px; left: 24px; }
  .dl-point__photo--br { width: 160px; height: 200px; right: 20px; }
}

@media (max-width: 1023px) {
  .dl-point {
    padding: 96px 0;
  }

  .dl-point__media {
    display: none;
  }
}

.dl-point__content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}

.dl-point__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-1);
}

.dl-point__eyebrow-icon {
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: var(--accent-1);
}

.dl-point__title {
  margin: 22px auto 0;
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 2.8vw, 2.6rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}

.dl-point__lede {
  margin: 18px auto 0;
  max-width: 50ch;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.68);
}

.dl-point__card {
  max-width: 520px;
  margin: 34px auto 0;
  text-align: left;
}

.dl-point__form-row {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 22px;
  margin-bottom: 22px;
}

@media (min-width: 480px) {
  .dl-point__form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dl-point__field--wide {
    grid-column: span 2;
  }
}

.dl-point__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dl-point__field span {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}

.dl-point__field input {
  min-height: 34px;
  padding: 0 0 6px;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: 14px;
  transition: border-color 220ms ease;
}

.dl-point__field input::placeholder {
  color: rgba(255, 255, 255, 0.32);
}

.dl-point__field input:focus {
  outline: none;
  border-color: var(--accent-1);
}

.dl-point__submit {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  margin-top: 6px;
  border-radius: 0.75rem;
  background: linear-gradient(180deg, #d9cfae 0%, var(--accent-1) 100%);
  color: var(--accent-2);
  font-size: 15px;
  font-weight: 600;
  transition: transform 300ms ease;
}

.dl-point__submit svg {
  width: 16px;
  height: 16px;
  transition: transform 300ms ease;
}

.dl-point__submit:hover {
  transform: translateY(-2px);
}

.dl-point__submit:hover svg {
  transform: translateX(3px);
}

.dl-point__assurances {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.dl-point__assurances li {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.dl-point__alt {
  margin-top: 22px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.dl-point__alt a {
  color: var(--accent-1);
  text-decoration: underline;
  text-underline-offset: 3px;
}